@charset "UTF-8";
.fn-hide {
  display: none; }

a {
  text-decoration: none; }

html {
  font-size: 62.5%;
  width: 100%;
  height: 100%; }

body {
  max-width: 1440px;
  min-width: 320px;
  margin: 0 auto;
  font-family: "Lantinghei SC", "Hiragino Sans GB", "华文细黑", "STHeiti", "微软雅黑", "Microsoft YaHei", SimHei, "Helvetica Neue", Helvetica, Arial, sans-serif; }

#welcome {
  background: url("img/bg.jpg") #0F0A19 center center no-repeat;
  background-position: 0 0;
  background-size: 100%;
  width: 100%;
  padding-bottom: 49%;
  position: relative;
  z-index: 100; }
  #welcome .logos {
    width: 19%;
    margin: 1% 0 0 2%;
    display: inline-block;
    float: left; }
    #welcome .logos a {
      display: inline-block;
      background-size: contain !important;
      height: 50px;
      vertical-align: middle; }
      #welcome .logos a.tai {
        background: url("img/tai_logo.png") no-repeat;
        width: 33%;
        background-position: 0 center; }
      #welcome .logos a.bs {
        background: url("img/NYT-w-en.png") no-repeat;
        width: 50%;
        background-position: 0 center; }
    #welcome .logos span {
      font-size: 16px;
      color: white;
      display: inline-block;
      vertical-align: middle;
      display: inline-block;
      border-right: 1px solid white;
      height: 30px;
      margin: 0 8%; }
  #welcome .mobile-nav-btn {
    display: none; }
  #welcome .button-link {
    position: absolute;
    color: #1EFE97;
    border: 1px solid #1EFE97;
    border-radius: 10px;
    background-color: transparent;
    left: 9%;
    bottom: 18%;
    padding: 10px 40px;
    font-size: 24px;
    transition: 0.3s ease; }
    #welcome .button-link:hover {
      background-color: #1EFE97;
      color: black; }
  #welcome .nav {
    float: right;
    width: 76%;
    margin-right: 2%; }
    #welcome .nav ul {
      list-style: none;
      text-align: right;
      padding: 0 !important;
      margin: 22px 0; }
      #welcome .nav ul li {
        display: inline-block;
        margin-right: 1.9047619048%; }
        #welcome .nav ul li:last-child {
          margin-right: 0; }
        #welcome .nav ul li a {
          color: white;
          font-size: 14px; }
        #welcome .nav ul li.on a {
          color: #FF8080 !important; }
    #welcome .nav.show {
      display: block !important;
      background-color: white;
      border-radius: 4px;
      width: 150px;
      position: absolute;
      right: 10px;
      top: 50px;
      z-index: 20;
      border: 1px solid #ccc; }
      #welcome .nav.show ul {
        text-align: center; }
        #welcome .nav.show ul li {
          text-align: center;
          padding: 5px 0;
          display: block; }
          #welcome .nav.show ul li a {
            color: black; }
  #welcome .nav-box.fixed {
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    width: 100%;
    z-index: 100;
    height: 50px; }
    #welcome .nav-box.fixed .nav {
      position: relative; }
      #welcome .nav-box.fixed .nav ul {
        margin-top: 16px; }
    #welcome .nav-box.fixed .logos {
      position: relative;
      margin-top: 0; }
  #welcome .mobile-nav-btn {
    color: #1EFE97;
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 18px;
    cursor: pointer;
    padding: 10px; }
  #welcome h1 {
    position: absolute;
    width: 100%;
    color: white;
    text-align: center;
    top: 20%; }
    #welcome h1 strong {
      font-size: 36px;
      font-size: 3.6rem;
      display: block;
      margin: 20px 0;
      letter-spacing: 15px;
      font-weight: normal; }
    #welcome h1 span {
      font-size: 28px;
      display: block;
      color: rgba(255, 255, 255, 0.6);
      opacity: 0.6;
      font-weight: normal; }
    #welcome h1 .main {
      width: 90%;
      font-size: 48px;
      font-size: 4.8rem;
      font-weight: normal;
      letter-spacing: 15px;
      background-size: contain;
      display: inline-block;
      height: 0;
      padding-bottom: 10.4347826087%; }
      #welcome h1 .main img {
        display: inline-block;
        width: 297px;
        position: relative;
        top: 20px;
        margin: 0 10px; }
  #welcome .info {
    position: absolute;
    bottom: 7%;
    text-align: center;
    color: white;
    text-align: left;
    padding-left: 8%;
    width: 100%;
    box-sizing: border-box;
    font-size: 18px;
    font-size: 1.8rem; }
    #welcome .info span {
      margin-right: 15px; }
      #welcome .info span i {
        margin: 0 10px; }
    #welcome .info img {
      position: relative;
      top: 15px; }
  #welcome button {
    display: none; }
  #welcome #animate-title {
    animation-duration: 1s;
    animation-delay: 0.8s;
    animation-iteration-count: 1; }
  #welcome #animate-subtitle {
    animation-duration: 0.5s;
    animation-delay: 0.5s;
    animation-iteration-count: 1; }
  #welcome #animate-small, #welcome #animate-info {
    animation-duration: 0.5s;
    animation-delay: 1.3s;
    animation-iteration-count: 1; }

.section {
  width: 100%;
  padding: 40px 0 20px 0;
  background-color: white;
  position: relative;
  overflow: hidden; }
  .section.gray {
    background-color: #f8f8f8; }
  .section.dark {
    background-color: #2E2D31; }
    .section.dark h2 {
      color: white; }
  .section h2 {
    text-align: center;
    font-size: 30px;
    color: #333;
    font-weight: normal;
    margin: 0; }
    .section h2 span {
      display: block;
      color: #A8A8A8;
      font-size: 16px;
      margin: 15px 10%;
      font-weight: normal; }
  .section .container {
    width: 68.0555555556%;
    margin: 0 auto; }

.lg-sub-html {
  background-color: rgba(0, 0, 0, 0.9); }
  .lg-sub-html h4 {
    font-size: 20px;
    font-weight: normal;
    margin: 10px auto; }
  .lg-sub-html a {
    color: #F23B50;
    font-size: 20px; }

.logo-box {
  background-color: #2E2D31;
  text-align: center;
  padding: 3.4722222222% 0; }
  .logo-box a {
    display: inline-block;
    margin: 0 3.2258064516%;
    width: 23.125%;
    min-width: 150px; }
    .logo-box a:first-child {
      width: 14.4444444444%;
      min-width: 100px; }
    .logo-box a img {
      width: 100%; }

.slide-area {
  margin-top: -11%;
  position: relative;
  z-index: 100;
  width: 100%;
  overflow: hidden; }
  .slide-area .slide-body {
    margin: 0 auto;
    text-align: center;
    max-height: 250px; }
    .slide-area .slide-body > a {
      display: none; }
    .slide-area .slide-body .slick-arrow {
      width: 49px;
      height: 100px;
      background-color: transparent;
      border: none;
      color: transparent;
      outline: none; }
      .slide-area .slide-body .slick-arrow:hover:before {
        color: white; }
    .slide-area .slide-body .slick-list {
      width: 85%;
      white-space: nowrap;
      overflow: hidden;
      margin: 0 auto;
      vertical-align: middle;
      display: inline-block; }
    .slide-area .slide-body .slick-prev:before {
      content: "";
      font-size: 70px;
      font-family: "icomoon";
      color: #40414c;
      line-height: 100px; }
    .slide-area .slide-body .slick-next:before {
      content: "";
      font-size: 70px;
      font-family: "icomoon";
      color: #40414c;
      line-height: 100px; }
    .slide-area .slide-body .slick-track {
      width: 100%; }
    .slide-area .slide-body .slick-dots {
      list-style: none;
      display: block;
      padding: 0;
      text-align: center;
      margin-top: 30px; }
      .slide-area .slide-body .slick-dots li {
        display: inline-block;
        width: 15px;
        height: 15px;
        border: none;
        margin: 0 10px; }
        .slide-area .slide-body .slick-dots li button {
          border: none;
          border-radius: 50%;
          width: 100%;
          height: 100%;
          text-indent: -999em;
          background-color: #f5ccd3; }
        .slide-area .slide-body .slick-dots li.slick-active button {
          background-color: #EB213F; }
    .slide-area .slide-body .slick-slide {
      display: inline-block;
      width: 23.8095238095%;
      margin-right: 10px;
      position: relative;
      background-color: black;
      border: 2px solid #40414c;
      outline: none; }
      .slide-area .slide-body .slick-slide:hover p {
        visibility: visible;
        opacity: 1; }
      .slide-area .slide-body .slick-slide:hover img {
        opacity: 0.3; }
      .slide-area .slide-body .slick-slide:last-child {
        margin-right: 0; }
      .slide-area .slide-body .slick-slide img {
        width: 100%;
        transition: all ease 0.3s; }
      .slide-area .slide-body .slick-slide p {
        position: absolute;
        bottom: 0;
        left: 10px;
        color: white;
        width: 90%;
        visibility: hidden;
        opacity: 0;
        transition: all ease 0.3s;
        text-align: left;
        white-space: normal; }
        .slide-area .slide-body .slick-slide p span {
          display: block;
          color: white; }
        .slide-area .slide-body .slick-slide p strong {
          font-size: 16px;
          margin-bottom: 5px;
          display: inline-block; }

#intro:before {
  content: "";
  display: block;
  position: absolute;
  width: 35.2777777778%;
  padding-bottom: 34.7222222222%;
  height: 0;
  background: url("img/stars.png") center center no-repeat;
  background-size: contain;
  top: -8%;
  left: -15%; }
#intro h3 {
  font-size: 30px;
  font-size: 3rem;
  line-height: 1.9em;
  margin: 55px 0;
  font-weight: normal;
  letter-spacing: 0.1em; }
#intro .detail {
  width: 100%;
  overflow: auto;
  margin-bottom: 35px;
  margin-top: 7%; }
  #intro .detail:last-child {
    margin-bottom: 40px; }
  #intro .detail img {
    display: inline-block;
    width: 38.7755102041%;
    vertical-align: top; }
  #intro .detail .text {
    width: 53.0612244898%;
    float: right;
    display: inline-block;
    margin-top: 5%; }
    #intro .detail .text p {
      font-size: 16px;
      color: #666;
      line-height: 1.75em;
      letter-spacing: 0.1em; }
      #intro .detail .text p:first-child {
        margin-top: 0; }
    #intro .detail .text a {
      float: right; }
      #intro .detail .text a img {
        width: 100%;
        max-width: 290px; }

#feature .text {
  color: #666;
  text-align: center;
  line-height: 1.75em;
  margin-top: 40px;
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: 0.1em; }
#feature h3 {
  font-size: 24px;
  font-size: 2.4rem;
  text-align: center;
  font-weight: normal; }
#feature ul {
  text-align: center;
  margin: 6.9444444444% 0 0 0;
  padding: 0; }
  #feature ul li {
    width: 18.0555555556%;
    margin: 0 0.3472222222%;
    margin-bottom: 30px;
    display: inline-block; }
    #feature ul li img {
      width: 100%; }

.cloud-bg img {
  display: block;
  width: 100%; }

#guests, #guests2 {
  padding-bottom: 20px;
  z-index: 10; }
  #guests ul, #guests2 ul {
    width: 72.9166666667%;
    margin: 5.5555555556% auto 0 auto; }
    #guests ul li, #guests2 ul li {
      width: 15.2380952381%;
      display: inline-block;
      vertical-align: top;
      margin-right: 4.2857142857%;
      text-align: center;
      margin-bottom: 5.5555555556%; }
      #guests ul li img, #guests2 ul li img {
        width: 100%; }
      #guests ul li p strong, #guests2 ul li p strong {
        display: block;
        margin-bottom: 10px;
        font-size: 18px;
        font-size: 1.8rem;
        font-weight: normal; }
      #guests ul li p span, #guests2 ul li p span {
        color: #999;
        font-size: 14px;
        line-height: 1.4em; }
        #guests ul li p span i, #guests2 ul li p span i {
          text-align: left;
          display: inline-block;
          font-style: normal; }
          #guests ul li p span i i, #guests2 ul li p span i i {
            font-style: italic; }

#guests2 ul {
  padding-left: 9%; }
  #guests2 ul li {
    width: 11.238095%; }
    #guests2 ul li div {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid #ccc; }

#calendar div {
  width: 100%;
  text-align: center;
  margin: 5% auto;
  margin-top: 40px; }
  #calendar div img {
    width: 30%;
    display: inline-block;
    padding: 0 8%; }
    #calendar div img:first-child {
      border-right: 1px solid #999; }
  #calendar div .day-box {
    text-align: left;
    width: 30%;
    display: inline-block;
    margin-top: 0;
    vertical-align: top;
    padding: 0 7%; }
    #calendar div .day-box:first-child {
      border-right: 1px solid #979797; }
    #calendar div .day-box h3 {
      font-size: 18px;
      margin-top: 40px;
      padding-bottom: 20px;
      border: 1px solid #E34739;
      text-align: center;
      color: #e34739;
      padding: 20px;
      border-radius: 4px; }
      #calendar div .day-box h3 span {
        display: block; }
    #calendar div .day-box strong {
      font-size: 14px;
      display: block;
      margin: 25px 0; }
      #calendar div .day-box strong.part span {
        color: #E34739; }
      #calendar div .day-box strong span {
        display: inline-block;
        width: 90%; }
      #calendar div .day-box strong:before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #E34739;
        border-radius: 50%;
        border: 3px solid #ed9f97;
        vertical-align: middle;
        margin-right: 10px;
        float: left;
        position: relative;
        top: 0px; }
    #calendar div .day-box p {
      font-size: 13px;
      padding-left: 2.5em; }

#subjects:before {
  content: "";
  display: block;
  position: absolute;
  width: 28.8194444444%;
  padding-bottom: 28.9583333333%;
  height: 0;
  background: url("img/astro.png") center center no-repeat;
  background-size: contain;
  top: -24%;
  right: -8%; }
#subjects ul {
  width: 67.0138888889%;
  margin: 4.5833333333% auto 0 auto;
  list-style: none; }
  #subjects ul li {
    width: 15.5440414508%;
    margin-right: 3.1088082902%;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 8.2901554404%;
    vertical-align: top;
    position: relative; }
    #subjects ul li.rotate {
      perspective: 2000px; }
      #subjects ul li.rotate .circle {
        transform: rotate3d(0, 1, 0, 180deg);
        z-index: -1; }
      #subjects ul li.rotate .circle-clone {
        transform: rotate3d(0, 1, 0, 360deg);
        z-index: 10;
        vertical-align: middle; }
        #subjects ul li.rotate .circle-clone p {
          display: inline-block;
          vertical-align: middle; }
      #subjects ul li.rotate .bar i {
        color: #DC1A39; }
    #subjects ul li.sending .bar {
      position: relative; }
      #subjects ul li.sending .bar:after {
        content: "投票中...";
        display: block;
        position: absolute;
        width: 100%;
        height: 35px;
        background-color: #333;
        top: 0;
        left: 0;
        line-height: 35px;
        padding-left: 10px;
        color: white;
        box-sizing: border-box; }
    #subjects ul li .circle {
      background-color: #ECECEC;
      color: #DC1A39;
      border-radius: 50%;
      position: relative;
      margin: 0 auto 5px auto;
      text-align: center;
      position: relative;
      z-index: 10;
      transition: all 0.5s ease-in-out;
      transform: rotate3d(0, 1, 0, 0deg); }
      #subjects ul li .circle i {
        padding: 29.0155440415% 15.5440414508%;
        font-size: 60px;
        line-height: 90.6666666667%;
        display: block; }
        #subjects ul li .circle i.txt {
          font-size: 45px;
          font-style: normal;
          padding: 34.7150259067% 15.5440414508%; }
    #subjects ul li .circle-clone {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      transform: rotate3d(0, 1, 0, 180deg);
      z-index: -1; }
      #subjects ul li .circle-clone p {
        padding: 7px 20px;
        color: black; }
        #subjects ul li .circle-clone p span {
          color: #DC1A39;
          display: block;
          font-size: 36px;
          margin: 5px 0; }
    #subjects ul li .bar {
      height: 35px;
      width: 100%;
      background-color: #333;
      box-sizing: border-box;
      padding: 0 10px; }
      #subjects ul li .bar span {
        line-height: 35px;
        color: white;
        font-size: 14px; }
      #subjects ul li .bar i {
        color: white;
        float: right;
        line-height: 35px;
        font-size: 16px;
        font-size: 1.6rem; }

#address ul {
  list-style: none;
  vertical-align: top;
  text-align: center;
  margin: 4% 0;
  padding-left: 0; }
  #address ul li {
    width: 24.3055555556%;
    display: inline-block;
    text-align: left;
    margin: 0 2%;
    vertical-align: top; }
    #address ul li i {
      color: white;
      display: inline-block;
      vertical-align: top;
      margin-right: 5%; }
    #address ul li div {
      width: 80%;
      display: inline-block;
      vertical-align: top; }
    #address ul li p {
      color: white; }
      #address ul li p:first-child {
        margin-top: 0; }

#reg .card-box {
  width: 100%;
  text-align: center;
  margin-top: 3.125%; }
  #reg .card-box .card-class {
    width: 22.2222222222%;
    display: inline-block; }
    #reg .card-box .card-class .card {
      width: 100%;
      min-height: 0;
      padding: 0 6.25%;
      margin-bottom: 6.25%;
      min-height: 245px; }
      #reg .card-box .card-class .card h3 {
        font-size: 14px;
        padding: 4.6875%; }
      #reg .card-box .card-class .card ul li {
        padding: 3% 0; }
        #reg .card-box .card-class .card ul li strong {
          font-size: 13px;
          font-size: 1.3rem; }
      #reg .card-box .card-class .card button {
        position: relative !important;
        margin-bottom: 6.25%; }
  #reg .card-box .card {
    width: 22.2222222222%;
    border-radius: 10px;
    border: 1px solid;
    padding: 0 1.3888888889%;
    display: inline-block;
    min-height: 540px;
    text-align: left;
    position: relative;
    max-width: 392px;
    box-sizing: border-box;
    margin-right: 2.0833333333%;
    vertical-align: top;
    background-color: white; }
    #reg .card-box .card:last-child {
      margin-right: 0; }
    #reg .card-box .card h3 {
      font-size: 24px;
      padding: 7.6530612245%;
      margin: 0;
      text-align: center; }
    #reg .card-box .card ul {
      list-style: none;
      padding: 0; }
    #reg .card-box .card li {
      padding: 5.1020408163% 0;
      border-bottom: 1px solid #EFEFEF; }
      #reg .card-box .card li:last-child {
        border-bottom: none; }
      #reg .card-box .card li strong {
        font-size: 15px;
        font-size: 1.5rem;
        font-weight: normal; }
        #reg .card-box .card li strong i {
          font-size: 16px; }
        #reg .card-box .card li strong a {
          color: #bbb;
          margin-left: 5px; }
          #reg .card-box .card li strong a:hover {
            color: #E34739; }
          #reg .card-box .card li strong a i {
            font-size: 20px; }
      #reg .card-box .card li p {
        font-size: 12px;
        color: #565656;
        line-height: 1.4em; }
    #reg .card-box .card p {
      color: #666;
      font-size: 14px;
      font-size: 1.4rem; }
    #reg .card-box .card button {
      padding: 10px 30px;
      position: absolute;
      bottom: 6%;
      left: 50%;
      margin-left: -62px;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      font-size: 1.6rem; }
      #reg .card-box .card button.disabled {
        background-color: #ccc !important;
        margin-left: -96px; }
      #reg .card-box .card button.sending {
        margin-left: -92px; }
    #reg .card-box .card.fee {
      color: #E34739;
      border-color: #E34739; }
      #reg .card-box .card.fee h3 {
        border-bottom: 1px solid #E34739; }
      #reg .card-box .card.fee button {
        background-color: #E34739; }
    #reg .card-box .card.media {
      color: #8AC831;
      border-color: #8AC831; }
      #reg .card-box .card.media h3 {
        border-bottom: 1px solid #8AC831; }
      #reg .card-box .card.media button {
        background-color: #8AC831; }
    #reg .card-box .card.author {
      color: #2DB0FF;
      border-color: #2DB0FF; }
      #reg .card-box .card.author h3 {
        border-bottom: 1px solid #2DB0FF; }
      #reg .card-box .card.author button {
        background-color: #2DB0FF; }

.slide-box-arrow {
  width: 63.8%;
  margin: 50px auto;
  position: relative; }
  .slide-box-arrow .viewport {
    width: 90%;
    margin: 0 auto;
    height: 0;
    padding-bottom: 19%;
    overflow: hidden;
    position: relative; }
    .slide-box-arrow .viewport ul {
      width: 100%;
      padding-left: 0;
      display: inline-block;
      position: absolute;
      left: 100%; }
      .slide-box-arrow .viewport ul.current {
        left: 0; }
      .slide-box-arrow .viewport ul li {
        width: 30%;
        display: inline-block;
        margin: 0 1.3%; }
        .slide-box-arrow .viewport ul li img {
          width: 100%;
          height: auto; }
    .slide-box-arrow .viewport > div {
      display: none; }
  .slide-box-arrow .arr {
    display: inline-block;
    position: absolute;
    width: 21px;
    height: 34px;
    top: 45%;
    margin-top: -17px;
    font-size: 65px;
    cursor: pointer;
    color: #D8D8D8; }
  .slide-box-arrow .larr {
    left: 0; }
  .slide-box-arrow .rarr {
    right: 0; }

.hlist {
  width: 63.8%;
  margin: 20px auto;
  list-style: none; }
  .hlist li {
    padding: 2.2727272727% 4.5454545455%;
    border-bottom: 1px solid #D8D8D8;
    font-size: 20px;
    font-size: 2rem; }
    .hlist li:last-child {
      border-bottom: none; }
  .hlist a {
    color: #333;
    font-size: 20px;
    font-size: 2rem; }
    .hlist a i {
      color: #2DB0FF !important;
      background-color: transparent !important;
      margin-left: 10px;
      font-size: 24px; }
    .hlist a span {
      float: right;
      vertical-align: middle; }

#host h2 {
  text-align: left;
  padding: 0 6.5972222222%; }
#host .host-box {
  width: 88.8888888889%;
  margin: 20px auto; }
  #host .host-box div {
    display: inline-block;
    vertical-align: middle; }
  #host .host-box .host-logo {
    width: 36.40625%;
    border-right: 1px solid #333;
    text-align: center;
    padding: 0;
    vertical-align: top;
    padding-bottom: 200px; }
    #host .host-box .host-logo a {
      width: 45%;
      display: block;
      vertical-align: middle;
      margin: 0 auto 20px auto; }
      #host .host-box .host-logo a img {
        width: 100%; }
    #host .host-box .host-logo .tmt {
      margin-bottom: 50px !important; }
    #host .host-box .host-logo .bs {
      width: 25.7510729614%; }
  #host .host-box .host-info {
    width: 57.8125%; }
    #host .host-box .host-info a {
      color: #333; }
    #host .host-box .host-info p {
      margin-left: 10%;
      color: #666;
      line-height: 1.75em;
      font-size: 16px;
      font-size: 1.6rem;
      letter-spacing: 0.1em; }
      #host .host-box .host-info p span {
        display: inline-block;
        vertical-align: top; }

.modal {
  box-shadow: 0 0 3px #ccc !important;
  background-color: white;
  padding: 3%; }
  .modal .close-modal {
    font-size: 30px;
    color: #BFC4C2;
    position: absolute;
    top: 10px;
    right: 20px; }
  .modal img {
    width: 196px;
    margin: 0px auto 30px auto;
    display: block; }
  .modal strong {
    font-size: 32px;
    font-size: 3.2rem;
    text-align: center;
    display: block;
    font-weight: normal;
    margin-bottom: 20px; }
  .modal .error_msg {
    text-align: center;
    margin: 20px;
    color: red; }
  .modal .sign-msg {
    background-color: #EDEFEE;
    color: #666;
    padding: 20px 0;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    font-size: 1.4rem; }
    .modal .sign-msg i {
      font-style: normal; }
    .modal .sign-msg span {
      color: #E34739;
      padding: 0 5px; }
  .modal input.btn {
    width: 20%;
    height: 35px;
    display: block;
    background-color: #E34739;
    border: none;
    color: white;
    border-radius: 4px;
    margin: 25px auto 15px auto;
    cursor: pointer;
    -webkit-appearance: none; }
  .modal .note {
    text-align: center; }
    .modal .note a {
      color: #E34739; }
  .modal .form {
    width: 78%;
    margin: 0 auto; }
    .modal .form label {
      display: block;
      margin: 20px 0;
      text-align: left;
      width: 45%; }
      .modal .form label.section-line {
        display: block !important;
        margin-bottom: 20px !important;
        height: auto !important;
        text-align: center !important;
        width: 100% !important; }
        .modal .form label.section-line b {
          display: block;
          margin: 0 auto;
          text-align: center !important;
          width: auto;
          margin-bottom: 10px;
          font-size: 16px;
          font-size: 1.6rem; }
        .modal .form label.section-line div {
          position: relative;
          left: 3%; }
        .modal .form label.section-line label {
          height: auto !important;
          margin: 5px 0 !important; }
        .modal .form label.section-line input {
          height: auto; }
      .modal .form label b {
        width: 100px;
        display: inline-block;
        font-weight: normal; }
      .modal .form label input {
        width: 60%;
        height: 25px;
        line-height: 25px;
        border-radius: 2px;
        border: 1px solid #ccc; }
        .modal .form label input.cbox {
          width: auto; }
    .modal .form .captcha-part {
      display: none; }
      .modal .form .captcha-part.show {
        display: block; }
      .modal .form .captcha-part input {
        width: 20%;
        margin-right: 10px; }
      .modal .form .captcha-part img {
        width: 62px;
        height: 25px;
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle; }
      .modal .form .captcha-part i {
        width: 20px;
        height: 20px;
        display: inline-block;
        background-size: 100%;
        vertical-align: middle;
        margin-left: 10px; }
        .modal .form .captcha-part i.sending {
          animation: rotate 2s linear infinite; }
  .modal .invoice-box {
    width: 80%;
    margin: 0 auto; }
    .modal .invoice-box label {
      height: auto !important;
      font-size: 14px;
      font-size: 1.4rem;
      margin-bottom: 15px !important; }
    .modal .invoice-box input[type=checkbox] {
      width: auto !important;
      height: auto !important;
      margin-right: 10px !important; }
    .modal .invoice-box strong {
      font-size: 14px;
      font-size: 1.4rem;
      text-align: left; }
    .modal .invoice-box .invoice-form label {
      height: 65px !important;
      margin-bottom: 0 !important; }
    .modal .invoice-box .invoice-form input, .modal .invoice-box .invoice-form textarea {
      display: block; }
    .modal .invoice-box .invoice-form input {
      height: 25px;
      line-height: 25px;
      border-radius: 2px;
      border: 1px solid #ccc;
      width: 90%;
      display: inline-block; }

#login, #register {
  width: 50%; }
  #login .form, #register .form {
    width: 90%; }
    #login .form label, #register .form label {
      margin: 20px auto;
      text-align: center; }
      #login .form label b, #register .form label b {
        text-align: left; }

#about-vr {
  width: 90%;
  max-width: 640px; }
  #about-vr p {
    font-size: 18px; }

#apply {
  width: 60%; }
  #apply .form {
    margin-top: 30px;
    text-align: left; }
    #apply .form label {
      display: inline-block;
      margin: 0;
      height: 65px;
      vertical-align: top; }
      #apply .form label select {
        width: 200px; }
      #apply .form label b {
        text-align: right;
        margin-right: 10px; }
      #apply .form label span {
        color: red;
        display: block;
        margin-left: 94px;
        margin-top: 7px;
        text-align: left; }
      #apply .form label i {
        width: 60%;
        display: inline-block;
        font-style: normal;
        color: #666;
        text-align: left; }
  #apply .success {
    padding: 150px 0;
    text-align: center; }
    #apply .success strong {
      color: #E4007F;
      font-size: 28px;
      font-size: 2.8rem;
      border: 1px solid #E4007F;
      border-left: none;
      border-right: none;
      padding: 15px 0; }
    #apply .success p {
      color: #666;
      margin-top: 25px;
      font-size: 14px;
      font-size: 1.4rem; }
      #apply .success p a {
        color: #E4007F; }

#reginfo {
  width: 60%;
  overflow: auto; }
  #reginfo .close-modal {
    top: 0;
    right: 0; }
  #reginfo .form label {
    display: inline-block;
    margin: 0;
    height: 65px;
    vertical-align: top;
    width: 50%;
    height: 35px; }
    #reginfo .form label b {
      margin-right: 0;
      width: 110px; }
    #reginfo .form label i {
      font-style: normal;
      color: #E53743;
      display: inline-block;
      width: 65%; }
    #reginfo .form label.section-area {
      display: block;
      width: 100%; }
      #reginfo .form label.section-area b {
        vertical-align: top; }
      #reginfo .form label.section-area i {
        width: 80%; }
    #reginfo .form label a {
      font-weight: bold;
      display: inline-block;
      border: 1px solid #E53743;
      padding: 5px 10px;
      border-radius: 4px;
      background-color: #E53743;
      color: white; }

#vendor .v-box {
  width: 80%;
  margin: 20px auto;
  max-width: 1000px; }
  #vendor .v-box h3 {
    color: #323232;
    font-size: 24px;
    border-bottom: 1px solid #979797;
    font-weight: normal;
    padding: 30px 0; }
  #vendor .v-box ul {
    list-style: none;
    padding: 0; }
    #vendor .v-box ul li {
      display: inline-block;
      margin: 0 15px 15px 0;
      border: 1px solid #ccc;
      height: 67px; }

#wemedia .box {
  width: 80%;
  margin: 20px auto;
  max-width: 1000px; }
  #wemedia .box ul {
    list-style: none;
    margin-top: 35px; }
    #wemedia .box ul li {
      display: inline-block;
      width: 80px;
      height: auto;
      margin-right: 5%;
      margin-bottom: 20px;
      vertical-align: top; }
      #wemedia .box ul li p {
        font-size: 14px;
        text-align: center; }
      #wemedia .box ul li img {
        width: 100%;
        border-radius: 50%;
        border: 1px solid #ddd; }

footer {
  color: white;
  background-color: #E34739;
  font-size: 14px;
  padding: 20px 30px; }
  footer span {
    margin: 0 20px; }

@media (max-width: 1150px) {
  #subjects ul {
    width: 90%; } }
@media (max-width: 1100px) {
  #welcome .nav {
    width: 76.3888888889%; }
    #welcome .nav ul li {
      display: inline-block;
      margin-right: 1.9047619048%; }

  #calendar div {
    width: 100%; } }
@media (max-width: 960px) {
  #welcome {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0; }
    #welcome .nav {
      display: none; }
      #welcome .nav.show ul li {
        padding: 12px 0; }
    #welcome .nav-box.fixed .logos {
      margin-top: 0 !important; }
    #welcome .nav-box.fixed .mobile-nav-btn {
      top: 5px; }
    #welcome .logos {
      min-width: 120px;
      width: 210px; }
    #welcome .mobile-nav-btn {
      display: block; }
    #welcome h1 {
      top: 15%; }
      #welcome h1 .main {
        padding-bottom: 13%; }
    #welcome .info {
      bottom: 7%; }

  .section .container {
    width: 90%; }

  #feature ul li {
    width: 40%; }

  #guests ul, #guests2 ul {
    width: 90%; }

  #subjects ul li {
    width: 20%; }

  #reg .card-box .card, #reg .card-box .card-class {
    width: 45%;
    margin-bottom: 20px; }

  #login, #register, #reginfo, #apply {
    width: 75%; }
    #login img, #register img, #reginfo img, #apply img {
      width: 30%;
      height: auto;
      max-width: 80px; }
    #login .form, #register .form, #reginfo .form, #apply .form {
      width: 100%;
      text-align: center; }
      #login .form label, #register .form label, #reginfo .form label, #apply .form label {
        width: 100%;
        text-align: left; }
        #login .form label input, #register .form label input, #reginfo .form label input, #apply .form label input {
          width: 100%; }
        #login .form label #reg_captcha_input, #register .form label #reg_captcha_input, #reginfo .form label #reg_captcha_input, #apply .form label #reg_captcha_input {
          width: 50%; }
        #login .form label b, #register .form label b, #reginfo .form label b, #apply .form label b {
          display: none; }
    #login .btn, #register .btn, #reginfo .btn, #apply .btn {
      width: 60% !important;
      max-width: 150px; }
    #login .sign-msg, #register .sign-msg, #reginfo .sign-msg, #apply .sign-msg {
      width: 100%;
      padding: 5% 10%;
      box-sizing: border-box; }

  #register {
    height: 90%;
    overflow: auto; }
    #register .close-modal {
      top: 0;
      right: 0; }

  #reginfo {
    width: 70%; }
    #reginfo .form label {
      display: block;
      height: 28px;
      margin-right: 4%;
      text-align: left;
      width: 100%; }
      #reginfo .form label b {
        display: inline-block; }
      #reginfo .form label i {
        width: auto !important; }

  #apply .form {
    text-align: left; }
    #apply .form label {
      height: auto;
      margin-bottom: 10px; }
      #apply .form label.section-line b {
        display: block; }
      #apply .form label.section-line input {
        width: auto; }
      #apply .form label input {
        width: 95%; }

  #host .host-box .host-logo a {
    width: 40%; } }
@media (max-width: 800px) {
  #welcome h1 {
    top: 17%; }
    #welcome h1 strong {
      margin-top: 0; }
    #welcome h1 .main {
      padding-bottom: 13%;
      font-size: 35px;
      font-size: 3.5rem; }
      #welcome h1 .main img {
        width: 200px;
        top: 12px; }
  #welcome .info {
    bottom: 7%; }

  #guests ul li, #guests2 ul li {
    width: 20%; }

  #intro .container {
    width: 85%; }
  #intro h3 {
    font-size: 30px;
    font-size: 3rem;
    margin: 10% auto 5% auto; }
  #intro .detail img {
    display: block;
    margin: 40px auto;
    width: 50%; }
  #intro .detail:last-child img {
    max-width: 1000px !important;
    width: 80% !important;
    margin-top: 0 !important; }
  #intro .detail .text {
    width: 100%; }
    #intro .detail .text a {
      float: none !important; }

  #subjects ul {
    width: 90%; }

  #calendar div .day-box {
    width: 90% !important;
    border: none !important;
    padding: 0;
    margin: 20px auto;
    display: block; }

  #history .hlist {
    padding: 0;
    width: 80%; }

  .slide-box-arrow {
    width: 80%;
    margin: 20px auto; }
    .slide-box-arrow .arr {
      display: none; }
    .slide-box-arrow .viewport {
      width: 100%;
      height: 0;
      padding-top: 56%; }
      .slide-box-arrow .viewport div {
        display: block;
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        font-size: 1.8rem; }
      .slide-box-arrow .viewport ul {
        position: absolute;
        top: 0;
        width: 100%; }
        .slide-box-arrow .viewport ul li {
          width: 100%;
          margin: 15px 0; }

  #host h2 {
    font-size: 24px;
    font-size: 2.4rem; }
  #host .host-box .host-logo {
    border: none;
    width: 100%;
    text-align: left;
    padding: 0; }
    #host .host-box .host-logo a {
      width: 20%;
      display: inline-block;
      margin: 0 !important;
      margin-bottom: 0 !important;
      margin-right: 5% !important; }
      #host .host-box .host-logo a.bs {
        width: 15%; }
      #host .host-box .host-logo a.tmt {
        margin-bottom: 0 !important; }
  #host .host-box .host-info {
    width: 100%; }
    #host .host-box .host-info p {
      margin: 15px 2%;
      display: none; }
      #host .host-box .host-info p.contact-info {
        display: block; } }
.back {
  position: fixed;
  right: 20px;
  bottom: 80px;
  border: 1px solid #929292;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: all 0.4s ease;
  opacity: 0;
  z-index: 100; }
  .back:hover {
    background-color: #929292; }
    .back:hover:after {
      border-color: transparent transparent white transparent; }
  .back:after {
    content: "";
    display: block;
    border: 8px solid;
    border-color: transparent transparent #929292 transparent;
    width: 0;
    position: relative;
    top: 22%;
    left: 34%; }

@media (max-width: 700px) {
  #subjects ul {
    text-align: center;
    padding: 0; }
    #subjects ul li {
      width: 25%; } }
@media (max-width: 640px) {
  .section {
    padding: 30px 0; }

  #welcome h1 {
    top: 17%; }
    #welcome h1 strong {
      font-size: 24px;
      font-size: 2.4rem; }
    #welcome h1 .main {
      padding-bottom: 13%;
      font-size: 26px;
      font-size: 2.6rem; }
      #welcome h1 .main img {
        width: 160px;
        top: 12px; }

  #guests ul, #guests2 ul {
    width: 85%; }
    #guests ul li, #guests2 ul li {
      width: 45%; }

  #feature .text {
    width: 90%;
    margin: 10% auto;
    text-align: left; }
  #feature ul {
    width: 85%;
    margin: 10% auto 0 auto; }
    #feature ul li {
      width: 100%;
      height: 0;
      padding-bottom: 96%;
      overflow: hidden;
      display: inline-block;
      position: relative; }
      #feature ul li img {
        position: absolute;
        bottom: 0;
        left: 0; }
  #feature h2:last-child {
    margin: 20px 0 !important; }

  #address ul {
    margin: 7% auto;
    width: 90%; }
    #address ul li {
      width: 100%;
      display: block;
      margin: 15px 0; }

  #calendar div img {
    width: 78%;
    margin: 10px 0 20px 0;
    padding: 0;
    border: none; }
    #calendar div img:first-child {
      border: none; }

  #reg .card-box .card, #reg .card-box .card-class {
    width: 90%;
    min-width: 300px;
    margin: 0;
    margin-bottom: 20px;
    padding: 0 8%;
    min-height: 0; }
    #reg .card-box .card button, #reg .card-box .card-class button {
      position: relative;
      margin: 20px auto;
      display: block;
      left: 0;
      bottom: 0; }
  #reg .card-box .card-class {
    padding: 0; } }
@media (max-width: 580px) {
  #welcome {
    padding-bottom: 55.5555555556%;
    background-size: contain; }
    #welcome h1 {
      top: 17%; }
      #welcome h1 strong {
        font-size: 22px;
        font-size: 2.2rem; }
      #welcome h1 span {
        font-size: 18px;
        font-size: 1.8rem; }
      #welcome h1 .main {
        padding-bottom: 13%;
        letter-spacing: 0;
        font-size: 20px;
        font-size: 2rem; }
        #welcome h1 .main img {
          width: 120px;
          top: 6px; }
    #welcome .info {
      padding-left: 0; }
      #welcome .info span {
        font-size: 13px;
        font-size: 1.3rem; }

  #intro h3 {
    font-size: 18px;
    font-size: 1.8rem; }

  #subjects ul {
    width: 70%; }
    #subjects ul li {
      width: 45%; }
      #subjects ul li .circle i {
        font-size: 50px;
        font-size: 5rem; }
        #subjects ul li .circle i.txt {
          font-size: 35px;
          font-size: 3.5rem; }

  #vendor .v-box ul {
    padding-left: 10%; }
    #vendor .v-box ul li {
      width: 40%;
      margin-right: 5%; }
      #vendor .v-box ul li img {
        width: 100%;
        height: auto; } }
@media (max-width: 480px) {
  #welcome {
    padding-bottom: 91.611111%;
    background-size: contain;
    background-image: url("img/bg_m.jpg");
    background-position: center; }
    #welcome h1 {
      top: 20%; }
      #welcome h1 strong {
        font-size: 20px;
        font-size: 2rem; }
      #welcome h1 span {
        font-size: 16px;
        font-size: 1.6rem; }
      #welcome h1 .main {
        padding-bottom: 13%;
        font-size: 20px;
        font-size: 2rem; }
        #welcome h1 .main img {
          width: 100px;
          top: 6px; }
    #welcome .button-link {
      width: 180px;
      left: 50%;
      margin-left: -90px;
      bottom: 20%;
      font-size: 13px;
      text-align: center;
      padding: 10px 0; }
    #welcome .info {
      margin: 0;
      text-align: center; }

  #feature ul {
    width: 85%; }
    #feature ul li {
      width: 100%;
      padding-bottom: 96%; }

  #history .hlist {
    padding: 0;
    width: 80%; }
    #history .hlist li {
      padding-left: 0;
      padding-right: 0; }
      #history .hlist li a {
        font-size: 16px;
        font-size: 1.6rem; }

  #host h2 {
    font-size: 24px;
    font-size: 2.4rem; }
  #host .host-box .host-logo a {
    width: 30%;
    margin-right: 10% !important; }
    #host .host-box .host-logo a.bs {
      width: 25%; } }
@media (max-width: 400px) {
  #subjects ul {
    width: 85%; }
    #subjects ul li {
      width: 45%; }

  #reg .card-box .card {
    width: 80%; } }