@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
* {
  margin: 0;
  padding: 0;
  line-height: 1.4;
  position: relative;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  cursor: default; }

select,
input,
textarea {
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none; }

html {
  font-size: 16px; }
  @media all and (max-width: 490px) {
    html {
      font-size: 14px; } }

body {
  min-height: 100vh;
  width: 100vw;
  font-family: 'Noto Sans TC', sans-serif; }

a {
  text-decoration: none;
  cursor: pointer; }
  a * {
    cursor: pointer; }

.main {
  position: relative;
  width: 100vw;
  min-height: 100vh; }
  .main.home .nav {
    position: fixed;
    background: rgba(255, 255, 255, 0.7); }
  .main .nav {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 70px;
    width: 100%;
    background: #fff; }
    .main .nav .contain {
      max-width: 1004px;
      margin: 0 auto;
      display: block;
      position: relative;
      height: 100%;
      padding-left: 20px; }
      .main .nav .contain .logo {
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        width: 60px;
        background: url("../assets/img/EOF_logo.png") center no-repeat;
        background-size: 56.26px 26.7px; }
        .main .nav .contain .logo img {
          max-width: 100%; }
      .main .nav .contain .menu {
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        width: calc(100% + (-64px));
        font-size: 1rem;
        font-weight: 500;
        text-align: right; }
        .main .nav .contain .menu a {
          color: #1f2326; }
          .main .nav .contain .menu a div {
            display: inline-block;
            padding: 24px 30px; }
            @media all and (max-width: 490px) {
              .main .nav .contain .menu a div {
                padding: 26px 14px; } }
          .main .nav .contain .menu a:hover {
            color: #FF1250; }
  .main .block {
    width: 100%; }
    .main .block .contain {
      margin: 0 auto;
      vertical-align: top;
      text-align: center; }
    .main .block._1 {
      height: 100vh;
      max-height: 600px;
      background: #c0c0c0; }
      .main .block._1 .vid {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 600px;
        overflow: hidden; }
        .main .block._1 .vid video {
          position: relative;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto; }
      .main .block._1 .contain {
        height: 100%; }
        .main .block._1 .contain .logo {
          width: 300px;
          height: 166px;
          background: url("../assets/img/EOF.png") center no-repeat;
          background-size: 298.1px 164.4px;
          margin: 0 auto;
          top: 50%;
          transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          -ms-transform: translateY(-50%); }
          @media all and (max-width: 490px) {
            .main .block._1 .contain .logo {
              background-size: 238.48px 131.52px; } }
    .main .block._2 {
      min-height: 400px;
      background: #1f2326; }
      .main .block._2 .contain {
        padding-top: 105px;
        padding-bottom: 126px; }
        .main .block._2 .contain .each {
          display: inline-block;
          margin-right: -4px;
          width: 274px;
          height: 100%;
          text-align: center; }
          .main .block._2 .contain .each:last-child {
            margin-right: 0; }
          @media all and (max-width: 543px) {
            .main .block._2 .contain .each:not(:first-child) {
              margin-top: 30px; } }
          .main .block._2 .contain .each .img {
            height: 100px;
            width: 112px;
            margin: 0 auto; }
          .main .block._2 .contain .each .name {
            font-weight: 500;
            font-size: 1.75rem;
            line-height: 1.5;
            color: #fff; }
          .main .block._2 .contain .each .date {
            font-weight: 300;
            font-size: 1.125rem;
            line-height: 1.5;
            color: #fff; }
          .main .block._2 .contain .each.register .img {
            background: url("../assets/img/icon_1.svg") center no-repeat;
            background-size: contain; }
          .main .block._2 .contain .each.pre-exam .img {
            background: url("../assets/img/icon_2.svg") center no-repeat;
            background-size: contain; }
          .main .block._2 .contain .each.offline_ctf .img {
            background: url("../assets/img/icon_3.svg") center no-repeat;
            background-size: contain; }
    .main .block._3 {
      min-height: 670px;
      background: url("../assets/img/block3.jpg") center no-repeat;
      background-size: cover; }
      .main .block._3 .contain {
        height: 100%;
        max-width: 844px;
        padding: 50px 40px 100px 40px; }
        .main .block._3 .contain .info {
          text-align: left;
          max-width: 546px; }
          @media all and (max-width: 900px) {
            .main .block._3 .contain .info {
              margin: 0 auto; } }
          .main .block._3 .contain .info .title {
            color: #fc0053;
            font-size: 1.875rem;
            font-weight: 500;
            line-height: 1.5;
            margin-top: 40px; }
          .main .block._3 .contain .info .sub_title {
            color: #fff;
            font-size: 1.25rem;
            font-weight: 500;
            line-height: 1.45;
            margin-top: 16px; }
          .main .block._3 .contain .info .content {
            color: #fff;
            font-size: 1.125rem;
            font-weight: 300;
            line-height: 1.5;
            margin-top: 6px; }
            .main .block._3 .contain .info .content ul {
              list-style-type: none;
              margin-left: 2.25rem;
              margin-top: 5px;
              font-size: 1rem; }
              .main .block._3 .contain .info .content ul li {
                margin-left: 3rem;
                text-indent: -3em; }
            .main .block._3 .contain .info .content > div {
              display: inline-block;
              padding: 0 10px; }
    .main .block._4 {
      min-height: 360px;
      background: #fff; }
      .main .block._4 .contain {
        max-width: 832px;
        padding: 62px 0; }
        .main .block._4 .contain .sponsor {
          display: none; }
        .main .block._4 .contain .title {
          color: #1f2326;
          font-size: 1.5rem;
          font-weight: 500;
          line-height: 1.5;
          margin-bottom: 16px; }
        .main .block._4 .contain > div .each {
          display: inline-block;
          height: 168px;
          width: 168px;
          margin-right: 28px; }
          .main .block._4 .contain > div .each:nth-child(2) {
            margin-left: 32px; }
          .main .block._4 .contain > div .each:last-child {
            margin-right: 32px; }
        .main .block._4 .contain > div.support {
          margin-top: 16px; }
          .main .block._4 .contain > div.support .kk {
            margin-right: 0;
            margin-left: 0;
            background: url("../assets/img/KK_Logo.png") center no-repeat;
            background-size: contain; }
        @media all and (max-width: 830px) {
          .main .block._4 .contain {
            max-width: 627px; }
            .main .block._4 .contain > div .each:nth-child(n+4) {
              margin-top: 30px; }
            .main .block._4 .contain > div .each:nth-child(even) {
              margin-left: 32px;
              margin-right: 28px; }
            .main .block._4 .contain > div .each:nth-child(odd) {
              margin-right: 32px; }
            .main .block._4 .contain > div.support .kk {
              margin-right: 0; } }
        @media all and (max-width: 431px) {
          .main .block._4 .contain {
            max-width: 339px; }
            .main .block._4 .contain > div .each {
              margin: 0 !important; }
              .main .block._4 .contain > div .each:nth-child(n+3) {
                margin-top: 30px !important; }
            .main .block._4 .contain > div.support .kk {
              margin-right: 0; } }
    .main .block._5 {
      min-height: 300px;
      background: #1f2326; }
      .main .block._5 .contain {
        max-width: 1019px;
        padding: 41px 20px;
        text-align: left; }
        .main .block._5 .contain > div {
          display: inline-block;
          color: #fff;
          font-size: 1rem;
          vertical-align: top;
          text-align: left; }
        .main .block._5 .contain .info {
          width: calc(100% + (-54px));
          min-width: 226px; }
          .main .block._5 .contain .info > div {
            vertical-align: top;
            display: inline-block; }
          .main .block._5 .contain .info .logo {
            width: 68px;
            height: 64px;
            background: url("../assets/img/AIS3_logo.png") center no-repeat;
            background-size: contain;
            margin-right: 8px; }
          .main .block._5 .contain .info .detail {
            line-height: 24px;
            margin-left: 5em;
            text-indent: -5em; }
        .main .block._5 .contain .language {
          position: absolute;
          top: 41px;
          right: 20px;
          width: 55px; }
          .main .block._5 .contain .language > div {
            display: none;
            cursor: pointer; }
            .main .block._5 .contain .language > div.l {
              padding-left: 4px; }
              .main .block._5 .contain .language > div.l:hover {
                color: #E2E2E2; }
              @media all and (max-width: 490px) {
                .main .block._5 .contain .language > div.l {
                  padding-left: 6px; } }
            .main .block._5 .contain .language > div.choose {
              display: block;
              text-align: center; }
              .main .block._5 .contain .language > div.choose:after {
                content: "▴";
                display: inline-block;
                margin-left: 6px; }
        .main .block._5 .contain .copyright {
          width: 100%;
          margin-top: 33px; }
        @media all and (max-width: 590px) {
          .main .block._5 .contain {
            text-align: center; }
            .main .block._5 .contain .info {
              width: calc(100% + (-103px)); }
              .main .block._5 .contain .info .logo {
                margin-bottom: 10px; }
            .main .block._5 .contain .copyright {
              text-align: center; } }
        @media all and (max-width: 440px) {
          .main .block._5 .contain .info {
            width: 100%; } }
  .main .common {
    background: #f6f6f6;
    width: 100%;
    min-height: calc(100vh + (-370px));
    padding: 120px 30px; }
    .main .common .form {
      margin: 0 auto;
      max-width: 698px;
      font-weight: 500;
      padding: 47px 0;
      padding-bottom: 79px;
      background: #fff;
      text-align: left; }
      .main .common .form > * {
        width: 70%;
        margin: 0 auto; }
        @media all and (max-width: 440px) {
          .main .common .form > * {
            width: 80%; } }
      .main .common .form .title {
        font-size: 1.5rem;
        color: #fc0053;
        text-align: center; }
      .main .common .form .col {
        margin-top: 16px; }
        .main .common .form .col.two {
          margin-top: 40px; }
          .main .common .form .col.two > div {
            display: inline-block;
            vertical-align: top; }
            .main .common .form .col.two > div:first-child {
              width: calc(50% + (-34px));
              margin-right: 30px;
              min-width: 100px; }
            .main .common .form .col.two > div:last-child {
              width: 50%;
              min-width: 120px; }
            @media all and (max-width: 440px) {
              .main .common .form .col.two > div {
                width: 100% !important; }
                .main .common .form .col.two > div:last-child {
                  margin-top: 16px; } }
        .main .common .form .col .note {
          color: #44525e;
          font-weight: 300;
          font-size: 1.25rem;
          line-height: 1.45;
          margin-top: 4px; }
        .main .common .form .col .error {
          margin-bottom: 0;
          font-size: 1rem;
          color: #fc0053; }
      .main .common .form label {
        display: block;
        font-size: 1.25rem;
        line-height: 1.45;
        color: #151b21;
        margin-bottom: 11px; }
      .main .common .form input, .main .common .form select {
        display: block;
        width: 100%;
        border: 1px solid #44525e;
        height: 49px;
        padding: 12px 20px;
        font-size: 1rem;
        cursor: auto;
        color: #44525e; }
        @media all and (max-width: 340px) {
          .main .common .form input, .main .common .form select {
            padding: 12px; } }
        .main .common .form input:placeholder, .main .common .form select:placeholder {
          color: #c6ced6; }
        .main .common .form input:placeholder-shown, .main .common .form select:placeholder-shown {
          background-color: #fff; }
        .main .common .form input:-webkit-autofill, .main .common .form select:-webkit-autofill {
          -webkit-box-shadow: 0 0 0 30px white inset;
          -webkit-text-fill-color: #44525e !important; }
        .main .common .form input:disabled, .main .common .form select:disabled {
          border: 1px solid #c6ced6 !important; }
      .main .common .form input[type="submit"] {
        background: #ff2266;
        border: 1px solid #ff2266;
        color: #fff;
        width: auto;
        padding: 10.5px 66px;
        margin-left: auto;
        cursor: pointer;
        border-radius: 0; }
        .main .common .form input[type="submit"]:hover {
          background: #E01252;
          border: 1px solid #E01252;
          color: #E2E2E2; }
      .main .common .form .radio {
        display: inline-block; }
        .main .common .form .radio:not(:last-child) {
          margin-right: 64px; }
        .main .common .form .radio .dot {
          display: inline-block;
          width: 19px;
          height: 19px;
          border-radius: 100%;
          border: 1px solid #44525e;
          padding: 1px; }
          .main .common .form .radio .dot .inner {
            width: 15px;
            height: 15px;
            border-radius: 100%; }
        .main .common .form .radio .label {
          font-size: 1.25rem;
          line-height: 1.45;
          color: #44525e;
          font-weight: 300;
          vertical-align: bottom; }
        .main .common .form .radio input[type="radio"] {
          position: absolute;
          width: 19px;
          height: 19px;
          padding: 0;
          border-radius: 100%;
          z-index: 1;
          opacity: 0;
          cursor: pointer;
          top: 6px; }
          .main .common .form .radio input[type="radio"]:checked + div .inner {
            background: #ff2266; }
      .main .common .form .reg {
        font-size: 1.25rem;
        line-height: 1.45;
        color: #c6ced6;
        font-weight: 300;
        text-align: right;
        margin-top: 14px;
        margin-bottom: 31px; }
        .main .common .form .reg a {
          color: #c6ced6; }
          .main .common .form .reg a:hover {
            color: #323C44; }
      .main .common .form .select_wrapper select {
        background-color: transparent; }
      .main .common .form .select_wrapper:before {
        content: "▼";
        position: absolute;
        width: 40px;
        height: 49px;
        line-height: 49px;
        text-align: center;
        right: 0;
        font-size: 1rem; }
      .main .common .form .error input {
        border: 1px solid #ff2266; }
      .main .common .form .upload {
        margin-bottom: 11px;
        width: 100%;
        border: 1px solid #44525e;
        height: 49px;
        font-size: 1rem;
        cursor: auto;
        color: #44525e; }
        .main .common .form .upload > p {
          height: 100%;
          display: inline-block;
          vertical-align: top; }
          .main .common .form .upload > p.content {
            width: calc(100% + (-40px));
            margin-right: -4px;
            padding: 12px 20px;
            font-size: 1rem;
            text-align: left;
            color: #ff2266; }
            .main .common .form .upload > p.content.not_empty {
              color: #44525e;
              overflow-y: hidden;
              line-height: 23px;
              text-overflow: ellipsis;
              white-space: nowrap; }
          .main .common .form .upload > p.btn {
            width: 40px;
            background: url(../assets/img/upload01.png) center no-repeat;
            background-size: 30.5px 30.1px; }
            .main .common .form .upload > p.btn:hover {
              background: url(../assets/img/upload02.png) center no-repeat;
              background-size: 30.5px 30.1px; }
        .main .common .form .upload:hover > p.btn {
          background: url(../assets/img/upload02.png) center no-repeat;
          background-size: 30.5px 30.1px; }
        .main .common .form .upload:last-child {
          margin-bottom: 0; }
        .main .common .form .upload input {
          opacity: 0;
          position: absolute;
          z-index: 1;
          cursor: pointer; }

.win {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none; }
  .win .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1; }
  .win .dialog {
    position: absolute;
    margin: 0 auto;
    margin-top: calc(50vh + (-150px));
    padding: 15px;
    z-index: 10;
    height: 300px;
    width: 600px;
    left: calc(50vw + (-300px)); }
    @media all and (max-width: 600px) {
      .win .dialog {
        width: 350px;
        left: calc(50vw + (-175px)); } }
    @media all and (max-width: 490px) {
      .win .dialog {
        width: 320px;
        left: calc(50vw + (-160px)); } }
    .win .dialog .content {
      height: 100%;
      width: 100%;
      background: #fff;
      text-align: center;
      text-align: center;
      padding: 47px 0; }
      .win .dialog .content .win-header {
        line-height: 1.5;
        font-size: 1.5rem;
        font-weight: 500;
        color: #fb0054; }
      .win .dialog .content .win-body {
        font-size: 1.25rem;
        font-weight: 500;
        color: #151c21;
        line-height: 1.45;
        padding: 16px 10px;
        padding-bottom: 21px; }
      .win .dialog .content .win-footer {
        text-align: center; }
        .win .dialog .content .win-footer input {
          background: #ff2266;
          border: 1px solid #ff2266;
          color: #fff;
          width: auto;
          padding: 10.5px 66px;
          margin-left: auto;
          cursor: pointer;
          font-size: 1rem;
          border-radius: 0; }
          .win .dialog .content .win-footer input:hover {
            background: #E01252;
            border: 1px solid #E01252;
            color: #E2E2E2; }