@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* #region custom */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  word-wrap: break-word;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

body, input, textarea, select, button {
  font-family: Helvetica, Arial, 'Heiti TC', 'Microsoft JhengHei', sans-serif;
}

/* #endregion custom */
/* #region function */
/* #endregion function */
/* #region mixin */
/* #endregion mixin */
/* #region extend */
/* #endregion extend */
/* #region 活動結束-索取資料banner */
#end_banner {
  position: fixed;
  bottom: 0;
  display: none;
  margin: 0 auto;
  width: 100%;
  height: 200px;
  background: url(/tw/dsc/images/event_end_bg.jpg) no-repeat center center;
  color: #868484;
  text-align: center;
}

#end_banner img {
  border: 0;
}

/* #endregion 活動結束-索取資料banner */
/* #region all */
.no-touchevents nav a {
  -webkit-transition: background-color .2s;
  transition: background-color .2s;
}
.no-touchevents nav a:hover {
  background-color: #2f368e;
  color: #fff;
}
.no-touchevents .signupEntry:hover {
  background-image: url("../images/06/signup-entry-bg-hover.png");
}

body {
  min-width: 320px;
  background-color: #fff;
  font-size: 1.375rem;
  line-height: 35px;
}

.container {
  margin: 0 auto;
  max-width: 1200px;
}

.contentTitle {
  color: #00aae6;
  font-weight: bold;
  font-size: 1.5625rem;
}

.contentSubtitle {
  font-weight: bold;
  font-size: 1.375rem;
  line-height: 22px;
}

.articleTitle {
  color: #2f368e;
  font-weight: bold;
  font-size: 1.875rem;
}
.articleTitle::before {
  content: '[';
}
.articleTitle::after {
  content: ']';
}

.scheduleAndDate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 22px;
}

strong {
  color: #ffea00;
}

@media (max-width: 1200px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
  }

  .scheduleAndDate {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 624px;
  }
}
@media (max-width: 414px) {
  html {
    font-size: 14px;
  }
}
/* #endregion all */
/* #region nav */
nav {
  z-index: 3;
  width: 100%;
  height: 60px;
  background-color: #42bef9;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  border-bottom: 1px solid #fff;
}
nav.is-sticky a:first-of-type.active.is-active, nav.is-sticky a:not(:first-of-type).active {
  background-color: #2f368e;
  color: #fff;
}
nav .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 0;
  padding-left: 0;
}
nav a {
  width: 20%;
  height: 60px;
  border-right: 1px solid #fff;
  color: #fff;
  text-align: center;
  font-size: 22px;
  display: block;
  line-height: 60px;
}
nav a:first-of-type {
  border-left: 1px solid #fff;
}

.mbnav {
  z-index: 3;
  width: 100%;
  height: 60px;
  background-color: #42bef9;
  border-bottom: 1px solid #fff;
}
.mbnav.is-sticky a:first-of-type.active.is-active, .mbnav.is-sticky a:not(:first-of-type).active {
  background-color: #2f368e;
  color: #fff;
}
.mbnav .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 0;
  padding-left: 0;
}
.mbnav a {
  width: 20%;
  height: 60px;
  border-right: 1px solid #fff;
  color: #fff;
  text-align: center;
  font-size: 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  line-height: 1.3;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mbnav a:first-of-type {
  border-left: 1px solid #fff;
}

#mbnav-sticky-wrapper {
  display: none;
}

@media (max-width: 1200px) {
  nav a:first-of-type,
  .mbnav a:first-of-type {
    border-left: none;
  }

  nav a:last-of-type,
  .mbnav a:last-of-type {
    border-right: none;
  }
}
@media (max-width: 640px) {
  nav {
    display: none;
  }

  .mbnav {
    display: block;
  }

  #mbnav-sticky-wrapper {
    display: block;
  }

  #pcnav-sticky-wrapper {
    display: none;
  }
}
@media (max-width: 414px) {
  .mbnav a {
    font-size: 20px;
  }
}
/* #endregion nav */
/* #region header */
header {
  background-image: url('../images/04/header-bg.png?1538020911');
  background-position: 50% 0;
  background-repeat: no-repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 500px;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
header img {
  vertical-align: bottom;
}

@media (max-width: 1024px) {
  header {
    padding-top: 70px;
    padding-right: 140px;
    padding-bottom: 39px;
    padding-left: 140px;
    height: auto;
    background-color: #333391;
    background-image: url('../images/04/header-bg-m.png?1538020911');
    background-size: cover;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
@media (max-width: 640px) {
  header {
    padding-right: 40px;
    padding-bottom: 53px;
    padding-left: 40px;
    background-image: url('../images/04/header-bg-s.png?1538020911');
  }
}
/* #endregion header */
/* #region banner/main */
.banner {
  margin-top: 51px;
  margin-bottom: 32px;
  padding: 38px 48px;
  background-image: url('../images/04/banner-bg.png?1538020911');
  background-size: cover;
  color: #fff;
}

.main {
  margin-bottom: 40px;
}

.main-intro {
  margin-bottom: 1em;
}

.main-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.main-illust {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.main-text {
  margin-right: 29px;
}
.main-text p:nth-of-type(2) {
  margin-bottom: 1em;
}

@media (max-width: 1200px) {
  .banner {
    margin-right: 20px;
    margin-left: 20px;
  }

  .main-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .main-text {
    margin-right: 0;
    margin-bottom: 29px;
    width: 100%;
  }
}
/* #endregion banner/main */
/* #region schedule */
.schedule {
  margin-right: 30px;
  max-width: 624px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.schedule h1 {
  margin-bottom: 30px;
}

.schedule-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 50px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.schedule-list dt {
  position: relative;
  width: 184px;
}
.schedule-list dt::before {
  position: absolute;
  top: 17px;
  right: 19px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #00b4fa;
  content: '';
}
.schedule-list dt::after {
  position: absolute;
  top: 0;
  right: 26px;
  width: 1px;
  height: 100%;
  background-color: #00b4fa;
  content: '';
}
.schedule-list dd {
  width: calc(100% - 184px);
}
.schedule-list dd:not(:last-of-type) {
  border-bottom: 1px solid #c7c7c7;
}
.schedule-list sup {
  vertical-align: super;
  font-size: smaller;
}

@media (max-width: 1200px) {
  .schedule {
    margin-right: 0;
    margin-bottom: 30px;
  }
}
@media (max-width: 414px) {
  .schedule-list {
    line-height: 40px;
  }
  .schedule-list dt {
    width: 154px;
  }
  .schedule-list dt::before {
    top: 12px;
  }
}
/* #endregion schedule */
/* #region date */
.date {
  max-width: 546px;
}
.date dt {
  margin-top: 1em;
  font-weight: bold;
}

.date-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 15px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.date-year {
  margin-left: 15px;
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 1;
}

.date-day {
  color: #00b4fa;
  font-weight: bold;
  font-size: 6.25rem;
  line-height: 1;
}
.date-day::after {
  content: '(五)';
  font-size: 1.5625rem;
}

.date-map {
  position: relative;
}
.date-map::before {
  position: absolute;
  content: '';
  right: -13px;
  left: -13px;
  top: -8.5px;
  bottom: -8.5px;
}

/* #endregion date */
/* #region signup */
.signup {
  background-image: url('../images/04/signup-bg.png?1538020912');
  background-position: 50% 0;
  background-repeat: no-repeat;
  padding-top: 50px;
  padding-bottom: 50px;
  background-size: cover;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 40px;
}
.signup h1 {
  margin-bottom: 10px;
}
.signup ul {
  padding-left: 1em;
  list-style-type: decimal;
}
.signup dd:first-of-type {
  margin-bottom: 30px;
}

/* #endregion signup */
/* #region signupEntry */
.signupEntry {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 40px;
  height: 170px;
  background-image: url('../images/04/signup-entry-bg.png?1538020912');
  background-position: 50% 0;
  color: #fff;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.signupEntry p:first-of-type {
  position: relative;
  margin-bottom: 5px;
  letter-spacing: 0.1em;
  font-weight: bold;
  font-size: 5rem;
  line-height: 1;
}
.signupEntry p:first-of-type::after {
  position: absolute;
  top: 0;
  right: -100px;
  content: url('../images/04/signup-entry.png?1538020912');
}
.signupEntry br {
  display: none;
}
.signupEntry strong {
  color: #fff000;
  font-weight: bold;
}

@media (max-width: 640px) {
  .signupEntry p:first-of-type {
    font-size: 4.375rem;
  }
  .signupEntry p:first-of-type::after {
    display: none;
  }
  .signupEntry br {
    display: block;
  }
}
/* #endregion signupEntry */
/* #region interview */
.interview {
  margin-bottom: 60px;
}

.interview-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 480px auto;
      grid-template-columns: 480px auto;
  -ms-grid-rows: (auto)[2];
      grid-template-rows: repeat(2, auto);
}

.interview-title {
  padding-top: 10px;
  padding-left: 15px;
  height: 91px;
  background-image: url('../images/04/interview-title-bg.png?1538020912');
  color: #fff;
  font-weight: bold;
  font-size: 1.875rem;
}

.interview-name {
  letter-spacing: 0.01em;
  font-weight: bold;
  font-size: 2.25rem;
}

.interview-intro {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}
.interview-intro p:nth-last-child(-n + 2) {
  margin-bottom: 1em;
}

.interview-illust {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
}

.interview-experience {
  padding-left: 28px;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
}
.interview-experience ul:first-of-type {
  margin-bottom: 1em;
  padding-left: 1em;
  list-style-type: disc;
}

@media (max-width: 1200px) {
  .interview-grid {
    -ms-grid-columns: auto;
        grid-template-columns: auto;
    -ms-grid-rows: (auto)[3];
        grid-template-rows: repeat(3, auto);
  }

  .interview-intro {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
  }

  .interview-illust {
    margin-bottom: 1em;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    -ms-grid-column-align: center;
        justify-self: center;
  }

  .interview-experience {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
  }
}
/* #endregion interview */
/* #region share */
.share h1 {
  margin-bottom: 1em;
}

.share-list {
  margin-bottom: 1em;
  padding-left: 1em;
  list-style-type: disc;
}

.video {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  /* 16:9 */
  width: 100%;
  height: 0;
  margin-bottom: 72px;
}
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* #endregion share */



/*# sourceMappingURL=WB00287904.css.map */