@charset "UTF-8";
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url("https://fonts.googleapis.com/css?family=Righteous");
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }
  
* {
  box-sizing: border-box;
}


article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden], template {
  display: none; }

a {
  background-color: transparent; }
  a:active, a:hover {
    outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

h1 {
  font-size: 2em;
  margin: 0; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

figure {
  margin: 0; }

hr {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em; }

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible;
  text-transform: none; }

select {
  text-transform: none; }

button, html input[type="button"] {
  -webkit-appearance: button;
  cursor: pointer; }

input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled], html input[disabled] {
  cursor: default; }

button::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }
  input::-moz-focus-inner {
    border: 0;
    padding: 0; }
  input[type="checkbox"], input[type="radio"] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0; }
  input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
    height: auto; }
  input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box; }
    input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
      -webkit-appearance: none; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

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

td, th {
  padding: 0; }

ol, ul {
  list-style: none; }

* {
  margin: 0;
  padding: 0; }

img {
  display: block; }

/* bisic ===================================================================*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  display: inline-block; }

* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

html {
  min-height: 100%; }

body {
  position: relative;
  height: auto;
  min-height: 100%;
  text-align: left;
  -webkit-text-size-adjust: none;
  font-size: 15px;
  color: #333;
  line-height: 1.8em;
  font-family: 'Noto Sans TC', "微軟正黑體", Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  overflow-x: hidden; }
  body.lock {
    overflow: hidden; }

a {
  color: #333;
  text-decoration: none;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease; }

ol > li {
  list-style-type: decimal; }

ol li, ul li {
  list-style-position: outside;
  margin-left: 26px; }

hr {
  border: 1px solid #333;
  border-top: none;
  margin-bottom: 15px; }

h1, h2, h3, h4, h5, h6, p {
  margin: 0; }

h1, h2, h3 {
  line-height: 1.3em; }

h1 {
  font-size: 40px; }

h2 {
  font-size: 32px; }

h3 {
  font-size: 24px; }

input, select, textarea {
  padding: 0 5px;
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  colos: #333; }

input:-moz-placeholder, textarea:-moz-placeholder {
  colos: #333; }

input::-moz-placeholder, textarea::-moz-placeholder {
  colos: #333; }

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  colos: #333; }

select {
  cursor: pointer; }

.textarea {
  height: 150px;
  padding: 5px; }

.placeholder_form p {
  display: inline-block;
  position: relative; }
  .placeholder_form p label {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 24px;
    text-align: left;
    text-indent: 5px;
    cursor: pointer; }
  .placeholder_form p input {
    text-indent: 5px; }

.hover_fade > img {
  opacity: 1;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s; }

.hover_fade:hover > img {
  opacity: .85; }

.video_icon {
  position: relative; }
  .video_icon .icon {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px; }
    .video_icon .icon img {
      width: 100%;
      height: 100%; }

.edit_wrap {
  clear: both;
  width: 100%;
  line-height: 1.8em; }
  .edit_wrap h1, .edit_wrap h2, .edit_wrap h3, .edit_wrap h4, .edit_wrap h5, .edit_wrap h6, .edit_wrap p, .edit_wrap img, .edit_wrap video, .edit_wrap iframe {
    margin-bottom: 12px; }
  .edit_wrap h1, .edit_wrap h2, .edit_wrap h3, .edit_wrap h4, .edit_wrap h5, .edit_wrap h6, .edit_wrap p {
    line-height: 1.8em; }
  .edit_wrap img, .edit_wrap video, .edit_wrap iframe {
    margin-top: 10px; }
  .edit_wrap h1 {
    font-size: 20px; }
  .edit_wrap h2 {
    font-size: 18px; }
  .edit_wrap h3 {
    font-size: 16px; }
  .edit_wrap h4 {
    font-size: 15px; }
  .edit_wrap h5 {
    font-size: 22px; }
  .edit_wrap h6 {
    font-size: 24px; }
  .edit_wrap img {
    max-width: 100%;
    height: auto !important;
    margin: 0 auto 30px auto; }
  .edit_wrap video {
    width: 100%;
    background-size: cover;
    -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
  .edit_wrap iframe {
    width: 100%; }
  .edit_wrap table {
    border: 1px solid #ccc; }
    .edit_wrap table td {
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc; }
      .edit_wrap table td:last-child {
        border-right: none; }

@media screen and (max-width: 1200px) {
  h1 {
    font-size: 32px; }
  h2 {
    font-size: 26px; }
  h3 {
    font-size: 20px; } 

 }

@media screen and (max-width: 800px) {
  h1 {
    font-size: 26px; }
  h2 {
    font-size: 22px; }
  h3 {
    font-size: 18px;
    text-align:center;
  } 
  
}

/* main.css ==============================================*/
.mw_30 {
  max-width: 30px; }

.mw_40 {
  max-width: 40px; }

.mw_50 {
  max-width: 50px; }

.mw_60 {
  max-width: 60px; }

.mw_70 {
  max-width: 70px; }

.mw_80 {
  max-width: 80px; }

.mw_90 {
  max-width: 90px; }

.mw_100 {
  max-width: 100px; }

.mw_110 {
  max-width: 110px; }

.mw_120 {
  max-width: 120px; }

.mw_130 {
  max-width: 130px; }

.mw_140 {
  max-width: 140px; }

.mw_150 {
  max-width: 150px; }

.mw_160 {
  max-width: 160px; }

.mw_170 {
  max-width: 170px; }

.mw_180 {
  max-width: 180px; }

.mw_190 {
  max-width: 190px; }

.mw_200 {
  max-width: 200px; }

.mw_210 {
  max-width: 210px; }

.mw_220 {
  max-width: 220px; }

.mw_230 {
  max-width: 230px; }

.mw_240 {
  max-width: 240px; }

.mw_250 {
  max-width: 250px; }

.mw_260 {
  max-width: 260px; }

.mw_270 {
  max-width: 270px; }

.mw_280 {
  max-width: 280px; }

.mw_290 {
  max-width: 290px; }

.mw_300 {
  max-width: 300px; }

.mw_310 {
  max-width: 310px; }

.mw_320 {
  max-width: 320px; }

.mw_330 {
  max-width: 330px; }

.mw_340 {
  max-width: 340px; }

.mw_350 {
  max-width: 350px; }

.box {
  display: block;
  width: 100%; }

.wrap {
  clear: both;
  width: 94%;
  max-width: 1200px;
  margin: 0 auto; }

.video_h {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; }

.full_wrap {
  width: 100%;
  height: 100vh;
  overflow: hidden; }

.full_min {
  width: 100%;
  min-height: 100vh; }

.full_vid {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  -webkit-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.full_vid video {
    width: 100%;
    height: 100%; }

.video_bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 95%;
  background-size: cover; }

.fixed_bg {
  background-attachment: fixed; }

.cover_bg, .contain_bg {
  height: 0;
  padding-bottom: 56.25%;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); }

.cover_bg {
  background-size: cover; }

.contain_bg {
  background-size: contain; }

.content {
  width: 100%;
}

section .group {
  margin-bottom: 40px; }

.tc {
  text-align: center; }

.tl {
  text-align: left; }

.tr {
  text-align: right; }

.fl {
  float: left; }

.fr {
  float: right; }

.mobile {
  display: none; }

.terms .box {
  margin-bottom: 30px; }

.terms label {
  display: block;
  padding-bottom: 5px;
  cursor: pointer;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease; }
  .terms label:hover {
    color: #D90000; }
  .terms label input {
    margin-right: 10px; }

.terms ul li, .terms ol li {
  margin-bottom: 10px; }
  .terms ul li ul, .terms ul li ol, .terms ol li ul, .terms ol li ol {
    margin-top: 10px; }

.terms ul > li {
  list-style-type: disc; }

.slider_btn {
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  cursor: pointer; }
  .slider_btn:hover:before, .slider_btn:hover:after {
    background: #D90000; }
  .slider_btn:before, .slider_btn:after {
    content: "";
    display: block;
    position: absolute;
    width: 5px;
    height: 61%;
    border-radius: 3px;
    background: #666;
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease; }
  .slider_btn.prev {
    left: 3%; }
    .slider_btn.prev:before, .slider_btn.prev:after {
      left: 0; }
    .slider_btn.prev:before {
      top: 0;
      -webkit-transform: translateX(12px) rotate(45deg);
      -ms-transform: translateX(12px) rotate(45deg);
      transform: translateX(12px) rotate(45deg); }
    .slider_btn.prev:after {
      bottom: 0;
      -webkit-transform: translateX(12px) rotate(-45deg);
      -ms-transform: translateX(12px) rotate(-45deg);
      transform: translateX(12px) rotate(-45deg); }
  .slider_btn.next {
    right: 3%; }
    .slider_btn.next:before, .slider_btn.next:after {
      right: 0; }
    .slider_btn.next:before {
      top: 0;
      -webkit-transform: translateX(-12px) rotate(-45deg);
      -ms-transform: translateX(-12px) rotate(-45deg);
      transform: translateX(-12px) rotate(-45deg); }
    .slider_btn.next:after {
      bottom: 0;
      -webkit-transform: translateX(-12px) rotate(45deg);
      -ms-transform: translateX(-12px) rotate(45deg);
      transform: translateX(-12px) rotate(45deg); }
  .slider_btn.hide {
    display: none; }

.c_blue {
  color: #214a8f; }

.c_yellow {
  color: #fcff00; }

.c_red {
  color: #b00; }

.c_pink {
  color: #FF6263; }

.close_btn {
  position: absolute;
  right: 15px;
  top: 8px;
  z-index: 30;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .close_btn:hover {
    -webkit-transform: rotateZ(180deg) scale(1.2);
    -ms-transform: rotate(180deg) scale(1.2);
    transform: rotateZ(180deg) scale(1.2); }
  .close_btn:before, .close_btn:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70%;
    height: 2px;
    background: #fff; }
  .close_btn:before {
    -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotateZ(45deg); }
  .close_btn:after {
    -webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotateZ(-45deg); }

.icon_close {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px; }
  .icon_close:before, .icon_close:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 7px;
    background: #fcff00; }
  .icon_close:before {
    -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotateZ(45deg); }
  .icon_close:after {
    -webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotateZ(-45deg); }

/* header.css ==============================================*/
.header {
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  z-index: 15;
  width: 100%;
  max-width: 300px;
  height: 100%;
  background-color:#7A62A9;
  background-color:rgba(122,98,169,0.8);
  background-size: cover;
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow-x: hidden;
  overflow-y: auto; }
  .header.trans {
    visibility: visible;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  .header .title {
    margin-top: 50px; }
  .header .menu {
    position: relative;
    width: 100%;
    margin-top: 200px; }
    .header .menu:before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 3px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
    .header .menu .icon {
      position: absolute;
      left: 120%;
      top: 62px;
      z-index: 1;
      width: 50px;
      height: 3px;
      background: #fff;
      -webkit-transform: translateX(48px);
      -ms-transform: translateX(48px);
      transform: translateX(48px); }
    .header .menu .group {
      width: 100%;
      margin: 0 auto;
      text-align: center;
      -webkit-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
      transform: translateY(-20%); }
    .header .menu .item {
      display: inline-block;
      position: relative;
      margin: 0 10px;
      font-size: 18px;
      cursor: pointer;
      color: #fff;
      -webkit-transition: 0.3s ease;
      -o-transition: 0.3s ease;
      transition: 0.3s ease; }
      .header .menu .item.trans, .header .menu .item:hover {
        -webkit-transform: translateY(-3%);
        -ms-transform: translateY(-3%);
        transform: translateY(-3%); }
        .header .menu .item.trans .box, .header .menu .item:hover .box {
          opacity: 1; }
          .header .menu .item.trans .box:before, .header .menu .item:hover .box:before {
            opacity: 1;
            visibility: visible; }
        .header .menu .item.trans .number, .header .menu .item:hover .number {
          margin-bottom: 80px;
          color: #fcff00;
          text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
          -webkit-transform: scale(1.2);
          -ms-transform: scale(1.2);
          transform: scale(1.2);
          -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
          -o-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .header .menu .item.trans p, .header .menu .item:hover p {
          -webkit-transform: scale(1.5);
          -ms-transform: scale(1.5);
          transform: scale(1.5); }
      .header .menu .item .box {
        position: relative;
        float: left;
        width: 50px;
        height: 230px;
        text-align: center;
        -webkit-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease; }
        .header .menu .item .box:before {
          opacity: 0;
          visibility: hidden;
          content: "";
          display: block;
          position: absolute;
          left: 50%;
          top: 50px;
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%);
          width: 120px;
          height: 90px;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          -webkit-transition: 0.3s ease;
          -o-transition: 0.3s ease;
          transition: 0.3s ease; }
        .header .menu .item .box.after {
          opacity: 1; }
      .header .menu .item .number, .header .menu .item p {
        display: inline-block;
        -webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .header .menu .item .number {
        margin: 0 auto 55px auto;
        font-size: 26px;
        font-family: 'Encode Sans Semi Condensed', sans-serif;
        letter-spacing: 3px; }
      .header .menu .item p {
        width: 18px;
        line-height: 1.3em;
        margin: 0 auto; }
        .header .menu .item p span {
          display: inline-block;
          margin-bottom: 12px; }

@media screen and (max-width: 480px) {
  .header .menu {
    margin-top: 120px; }
    .header .menu .icon {
      top: 44px;
      -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
      transform: translateX(10px); }
    .header .menu .item {
      margin: 0 5px; }
      .header .menu .item .box {
        height: 200px; } }

@media screen and (max-width: 420px) {
  .header .menu {
    width: 100%;
    margin-top: 70px; }
    .header .menu:before {
      display: none; }
    .header .menu .icon {
      display: none; }
    .header .menu .group {
      width: 100%;
      text-align: left;
      margin: 0 auto;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .header .menu .item {
      width: 100%;
      padding: 0 5%;
      padding-bottom: 15px;
      margin: 0;
      margin-bottom: 5px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .header .menu .item .box {
        width: 100%;
        opacity: 1;
        height: auto;
        text-align: left; }
        .header .menu .item .box:before {
          display: none; }
      .header .menu .item .number {
        display: inline-block;
        font-size: 20px;
        margin-bottom: 0;
        margin-right: 15px; }
      .header .menu .item p {
        display: inline-block;
        width: auto; }
      .header .menu .item.trans, .header .menu .item:hover {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0); }
        .header .menu .item.trans .number, .header .menu .item:hover .number {
          margin-bottom: 0; } }

@media screen and (min-width: 701px) and (max-height: 920px) {
  .header .title {
    width: 400px; }
  .header .menu {
    margin-top: 150px; } }

@media screen and (min-width: 701px) and (max-height: 700px) {
  .header .title {
    width: 300px;
    margin-top: 20px; }
  .header .menu {
    margin-top: 120px; } }

@media screen and (min-width: 701px) and (max-width: 1380px) and (max-height: 800px) {
  .header .title {
    width: 300px; }
  .header .menu {
    margin-top: 120px; } }

@media screen and (min-width: 701px) and (max-width: 915px) and (max-height: 700px) {
  .header .title {
    width: 300px; }
  .header .menu {
    margin-top: 120px; } }

/* share.css ==============================================*/
.main_share .share {
  position: fixed;
  right: 0;
  z-index: 5;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 30px;
  padding-right: 50px; }
  .main_share .share a {
    display: block;
    margin: 15px auto; }

.share a {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-left: 15px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
    .share a.fb {
        width: 20px;
        background-image: url("../Images_t/icon/icon_facebook.svg");
    }
    .share a.line {
        background-image: url("../Images_t/icon/icon_line.svg");
    }
    .share a.google {
        width: 28px;
        background-image: url("../Images_t/icon/icon_google.svg");
    }
    .share a.twitter {
        width: 34px;
        background-image: url("../Images_t/icon/icon_twitter.svg");
    }
    .share a.ig {
        background-image: url("../Images_t/icon/icon_instagrame.svg");
    }
    .share a.youtube {
        background-image: url("../Images_t/icon/icon_youtube.svg");
    }
  .share a:hover {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15); }
    .share a:hover.fb {
        background-image: url("../Images_t/icon/icon_facebook_active.svg");
    }
    .share a:hover.line {
        background-image: url("../Images_t/icon/icon_line_active.svg");
    }
    .share a:hover.google {
        background-image: url("../Images_t/icon/icon_google_active.svg");
    }
    .share a:hover.twitter {
        background-image: url("../Images_t/icon/icon_twitter_active.svg");
    }
    .share a:hover.ig {
        background-image: url("../Images_t/icon/icon_instagrame_active.svg");
    }
    .share a:hover.youtube {
        background-image: url("../Images_t/icon/icon_youtube_active.svg");
    }

.share.white a.fb {
    background-image: url("../Images_t/share/share_fb_w.svg");
}

.share.white a.google {
    background-image: url("../Images_t/share/share_google_w.svg");
}

.share.white a.twitter {
    background-image: url("../Images_t/share/share_twitter_w.svg");
}

.share.white a.line {
    background-image: url("../Images_t/share/share_line_w.svg");
}

.share.white a.ig {
    background-image: url("../Images_t/share/share_ig_w.svg");
}

.share.white a.mail {
    background-image: url("../Images_t/share/share_mail_w.svg");
}

.share.white a.weibo {
    background-image: url("../Images_t/share/share_weibo_w.svg");
}

.share.circle a {
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-size: auto 65%; }
  .share.circle a.mail {
    background-size: auto 50%; }

/* mobilerBtn.css ==============================================*/
.menu_m {
  position: fixed;
  right: 25px;
  top: 20px;
  z-index: 20;
  width: 30px;
  height: 22px;
  cursor: pointer;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease; }
  .menu_m .group {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease; }
    .menu_m .group div {
      position: absolute;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 2px;
      background: #fff;
      -webkit-transition: 0.3s ease;
      -o-transition: 0.3s ease;
      transition: 0.3s ease; }
    .menu_m .group .line1 {
      top: 0; }
    .menu_m .group .line2, .menu_m .group .line3 {
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
    .menu_m .group .line4 {
      bottom: 0; }
  .menu_m:hover .group .line1, .menu_m:hover .group .line4 {
    -webkit-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    transform: translateX(-5px); }
  .menu_m:hover .group .line2, .menu_m:hover .group .line3 {
    -webkit-transform: translate(-5px, -50%);
    -ms-transform: translate(-5px, -50%);
    transform: translate(-5px, -50%); }
  .menu_m.on {
    width: 30px;
    height: 22px;
    margin-left: 50px; }
    .menu_m.on .group {
      top: -2px;
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg); }
      .menu_m.on .group div {
        background: #fff; }
      .menu_m.on .group .line1, .menu_m.on .group .line4 {
        top: 0;
        opacity: 0;
        -webkit-transition: top 0.5s ease 0, opacity 0.1s ease 0.4, -webkit-transform 0.5s ease 0;
        transition: top 0.5s ease 0, opacity 0.1s ease 0.4, -webkit-transform 0.5s ease 0;
        -o-transition: transform 0.5s ease 0, top 0.5s ease 0, opacity 0.1s ease 0.4;
        transition: transform 0.5s ease 0, top 0.5s ease 0, opacity 0.1s ease 0.4;
        transition: transform 0.5s ease 0, top 0.5s ease 0, opacity 0.1s ease 0.4, -webkit-transform 0.5s ease 0; }
      .menu_m.on .group .line2 {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg); }
      .menu_m.on .group .line3 {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg); }
    .menu_m.on:hover {
      -webkit-transform: rotate(-180deg) scale(1.2);
      -ms-transform: rotate(-180deg) scale(1.2);
      transform: rotate(-180deg) scale(1.2); }

.menu_m .group .line2, .menu_m .group .line3 {
  -webkit-transition: all .5s 0 ease;
  -o-transition: all .5s 0 ease;
  transition: all .5s 0 ease; }

.menu_m .group .line1, .menu_m .group .line4, .menu_m.on .group .line2, .menu_m.on .group .line3 {
  -webkit-transition: top 0.5s ease 0.4, opacity 0.1s ease 0.4, -webkit-transform 0.5s ease 0.4;
  transition: top 0.5s ease 0.4, opacity 0.1s ease 0.4, -webkit-transform 0.5s ease 0.4;
  -o-transition: transform 0.5s ease 0.4, top 0.5s ease 0.4, opacity 0.1s ease 0.4;
  transition: transform 0.5s ease 0.4, top 0.5s ease 0.4, opacity 0.1s ease 0.4;
  transition: transform 0.5s ease 0.4, top 0.5s ease 0.4, opacity 0.1s ease 0.4, -webkit-transform 0.5s ease 0.4; }

@media screen and (max-width: 990px) {
  .menu_m {
    display: block; } }

/* inViewport.css ==============================================*/
.view_item {
  -webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); }
  .view_item.trans.to_top, .view_item.trans.to_right, .view_item.trans.to_left, .view_item.trans.to_bottom {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  .view_item.trans.scale_in {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  .view_item.trans .scale_out {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8); }
  .view_item.trans.bg_scale_in, .view_item.trans.bg_scale_out {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  .view_item.trans.fade_in {
    opacity: 1; }
  .view_item.trans.flip {
    opacity: 1;
    -webkit-transform: rotateY(0);
    transform: rotateY(0); }
  .view_item.trans.speed_scale_left, .view_item.trans.speed_scale_right {
    opacity: 1;
    -webkit-transform: scale(1) translate(0);
    -ms-transform: scale(1) translate(0);
    transform: scale(1) translate(0); }

.to_top, .to_right, .to_left, .to_bottom {
  opacity: 0; }

.to_top {
  -webkit-transform: translateY(60%);
  -ms-transform: translateY(60%);
  transform: translateY(60%); }

.to_right {
  -webkit-transform: translateX(-60%);
  -ms-transform: translateX(-60%);
  transform: translateX(-60%); }

.to_bottom {
  -webkit-transform: translateY(-60%);
  -ms-transform: translateY(-60%);
  transform: translateY(-60%); }

.to_left {
  -webkit-transform: translateX(60%);
  -ms-transform: translateX(60%);
  transform: translateX(60%); }

.scale_in {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0); }

.speed_scale_left, .speed_scale_right {
  opacity: 0;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s; }

.speed_scale_left {
  -webkit-transform: scale(5) translate(-50%, 100%);
  -ms-transform: scale(5) translate(-50%, 100%);
  transform: scale(5) translate(-50%, 100%); }

.speed_scale_right {
  -webkit-transform: scale(5) translate(50%, 100%);
  -ms-transform: scale(5) translate(50%, 100%);
  transform: scale(5) translate(50%, 100%); }

.bg_scale_in {
  opacity: 0;
  -webkit-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s; }

.bg_scale_out {
  opacity: 0;
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
  -webkit-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s; }

.fade_in {
  opacity: 0; }

.flip {
  opacity: 0;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg); }

.delay_1 {
  -webkit-transition-delay: .2s;
  -o-transition-delay: .2s;
  transition-delay: .2s; }

.delay_2 {
  -webkit-transition-delay: .3s;
  -o-transition-delay: .3s;
  transition-delay: .3s; }

.delay_3 {
  -webkit-transition-delay: .5s;
  -o-transition-delay: .5s;
  transition-delay: .5s; }

.delay_4 {
  -webkit-transition-delay: .8s;
  -o-transition-delay: .8s;
  transition-delay: .8s; }

.delay_5 {
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s; }

@media screen and (max-width: 1140px) {
  .to_right {
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
  .to_left {
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%); } }

@media screen and (max-width: 860px) {
  .to_top {
    -webkit-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%); } }

@media screen and (max-width: 630px) {
  .to_top {
    -webkit-transform: translateY(35%);
    -ms-transform: translateY(35%);
    transform: translateY(35%); } }

@media screen and (max-width: 500px) {
  .to_right {
    -webkit-transform: translateX(-40%);
    -ms-transform: translateX(-40%);
    transform: translateX(-40%); }
  .to_left {
    -webkit-transform: translateX(40%);
    -ms-transform: translateX(40%);
    transform: translateX(40%); }
  .to_top {
    -webkit-transform: translateY(25%);
    -ms-transform: translateY(25%);
    transform: translateY(25%); } }

@media screen and (max-width: 350px) {
  .to_right {
    -webkit-transform: translateX(-30%);
    -ms-transform: translateX(-30%);
    transform: translateX(-30%); }
  .to_left {
    -webkit-transform: translateX(30%);
    -ms-transform: translateX(30%);
    transform: translateX(30%); }
  .to_top {
    -webkit-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%); } }

/* index.css ==============================================*/
body {
    background: #0d0f2a url("../Images_t/index/bg_reverse.png") repeat-y center top;
    background-size: 100% auto;
    overflow-x: hidden;
}

@-webkit-keyframes scrollIcon {
  0% {
    margin-top: 0; }
  20% {
    margin-top: 10px; }
  40% {
    margin-top: 0px; }
  60% {
    margin-top: 10px; }
  80% {
    margin-top: 0; }
  100% {
    margin-top: 0; } }

@keyframes scrollIcon {
  0% {
    margin-top: 0; }
  20% {
    margin-top: 10px; }
  40% {
    margin-top: 0px; }
  60% {
    margin-top: 10px; }
  80% {
    margin-top: 0; }
  100% {
    margin-top: 0; } }

.vh_wrap {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1; }

.home {
  position: relative;
  background: #000; }
  .home:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15vh;
    background: -webkit-gradient(linear, left bottom, left top, from(#0d0f2a), to(rgba(13, 15, 42, 0)));
    background: -webkit-linear-gradient(bottom, #0d0f2a, rgba(13, 15, 42, 0));
    background: -o-linear-gradient(bottom, #0d0f2a, rgba(13, 15, 42, 0));
    background: linear-gradient(to top, #0d0f2a, rgba(13, 15, 42, 0)); }
  .home.trans .video_2 {
    opacity: 1; }
  .home.trans .title {
    opacity: 1; }
    .home.trans .title .main_title, .home.trans .title .sub_title {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
  .home.trans .countdown_wrap {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0); }
  .home.trans .booking_btn {
    right: 30px; }
  .home.trans .scroll_icon {
    opacity: 1;
    -webkit-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px); }
  .home .video_trans {
    min-height: 100%; }
    .home .video_bg {
        background: url("../Images_t/index/video_bg.png") no-repeat center;
        background-size: cover;
    }
  .home .video_1 {
    z-index: 0; }
  .home .video_2 {
    opacity: 0;
    z-index: 1;
    -webkit-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s; }
  .home .logo, .home .title, .home .countdown_wrap {
    position: absolute;
    z-index: 10; }
  .home .logo {
    left: 30px;
    top: 20px; }

.logo img {
	width:100%;
	max-width:110px;
	height:auto;
}

  .home .title {
    opacity: 0;
    left: 50%;
    top: 40%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 94%;
    max-width: 574px; }
    .home .title .main_title, .home .title .sub_title {
      opacity: 0;
      width: 100%;
      margin: 0 auto;
      -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
      transform: translateY(100px); }
	  
      .home .title .main_title div, .home .title .sub_title div {
        width: 100%;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        height: 0; }

    .home .title .main_title {
      margin-bottom: 15%;
      -webkit-transition: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
      -o-transition: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
      transition: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s; }
        .home .title .main_title div {
            padding-bottom: 55.23%;
            background-image: url("../Images_t/index/home_title.png");
        }

    .home .title .sub_title {
      max-width: 441px;
      -webkit-transition: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
      -o-transition: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
      transition: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s; }
        .home .title .sub_title div {
            padding-bottom: 53.8%;
            background-image: url("../Images_t/index/home_title_sub.png");
        }
  .home .scroll_icon {
    opacity: 0;
    padding-bottom: 15px;
    color: #fff;
    text-align: center;
    font-size: 18px;
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
    -o-transition: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
    transition: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 1s; }
    .home .scroll_icon:after {
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 12px;
      height: 12px;
      border-right: 3px solid #fff;
      border-bottom: 3px solid #fff;
      -webkit-transform: translateX(-50%) rotate(45deg);
      -ms-transform: translateX(-50%) rotate(45deg);
      transform: translateX(-50%) rotate(45deg);
      -webkit-animation: scrollIcon 1s;
      animation: scrollIcon 1s; }
  .home .countdown_wrap {
    opacity: 0;
    visibility: hidden;
    left: 50%;
    bottom: 10px;
    -webkit-transform: translate(-50%, 100%);
    -ms-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    width: 100%;
    text-align: center;
    -webkit-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
    -o-transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 1s; }
    .home .countdown_wrap .countdown {
      width: 450px;
      margin: 0 auto;
      font-size: 30px;
      text-align: center;
      color: rgba(255, 255, 255, 0.7); }
      .home .countdown_wrap .countdown div {
        position: relative;
        float: left;
        width: 25%;
        padding-right: 5%;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
        .home .countdown_wrap .countdown div:after {
          position: absolute;
          right: 0;
          bottom: 8px;
          font-size: 18px;
          line-height: 1em;
          text-indent: 5px;
          margin: 10px 0 5px 0;
          color: #95d2f2; }
      .home .countdown_wrap .countdown span {
        float: right;
        font-size: 45px;
        line-height: 1em;
        font-family: 'Righteous', cursive; }
      .home .countdown_wrap .countdown .day:after {
        content: "天"; }
      .home .countdown_wrap .countdown .hour {
        width: 23%;
        padding-right: 5%;; }
        .home .countdown_wrap .countdown .hour:after {
          content: "時"; }
      .home .countdown_wrap .countdown .min:after {
        content: "分"; }
      .home .countdown_wrap .countdown .sec:after {
        content: "秒"; }
  .home .booking_btn {
    right: -150px; }

.booking_btn {
  position: fixed;
  right: 30px;
  top: 80%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 10;
  width: 130px;
  height: 130px;
  cursor: pointer;
  -webkit-transition: right 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 1.5s, -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: right 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 1.5s, -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: right 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 1.5s, transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: right 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 1.5s, transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: right 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 1.5s, transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
  .booking_btn.top {
    right: 20px;
    top: 70px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    width: 100px;
    height: 100px; }
    .booking_btn.top:after {
      font-size: 16px; }
    .booking_btn.top:hover {
      -webkit-transform: translateY(0) scale(1.1);
      -ms-transform: translateY(0) scale(1.1);
      transform: translateY(0) scale(1.1); }
  .booking_btn:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(100%, -50%);
    -ms-transform: translate(100%, -50%);
    transform: translate(100%, -50%);
    width: 29px;
    height: 2px;
    background: none; }
  .booking_btn:after {
    content: "活動辦法";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    font-size: 20px;
    color: #fff;
    text-align: center; }
  .booking_btn:hover {
    -webkit-transform: translateY(-50%) scale(1.1);
    -ms-transform: translateY(-50%) scale(1.1);
    transform: translateY(-50%) scale(1.1); }
  .booking_btn div {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 3%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .booking_btn div:before, .booking_btn div:after {
      content: "";
      display: block;
      width: 100%;
      height: 100%; }
    .booking_btn div:before {
      z-index: 0;
      border-radius: 50%;
      background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
      background: -webkit-linear-gradient(left, #97d3f3, #008acc);
      background: -o-linear-gradient(left, #97d3f3, #008acc);
      background: linear-gradient(to right, #97d3f3, #008acc); }
    .booking_btn div:after {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 120%;
        height: 120%;
        z-index: 1;
        background: url("../Images_t/index/btn_cover.png") no-repeat center center;
        background-size: 100% auto;
        -webkit-animation: btnCircle 5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite forwards;
        animation: btnCircle 5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite forwards;
    }

@-webkit-keyframes btnCircle {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0); }
  40% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg); }
  60% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg); }
  75% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0); }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0); } }

@-moz-keyframes btnCircle {
  0% {
    transform: translate(-50%, -50%) rotate(0); }
  40% {
    transform: translate(-50%, -50%) rotate(360deg); }
  60% {
    transform: translate(-50%, -50%) rotate(360deg); }
  75% {
    transform: translate(-50%, -50%) rotate(0); }
  100% {
    transform: translate(-50%, -50%) rotate(0); } }

@-ms-keyframes btnCircle {
  0% {
    -ms-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0); }
  40% {
    -ms-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg); }
  60% {
    -ms-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg); }
  75% {
    -ms-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0); }
  100% {
    -ms-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0); } }

@keyframes btnCircle {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0); }
  40% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg); }
  60% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg); }
  75% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0); }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0); } }

.sponsor {
  width: 94%;
  max-width: 760px;
  padding-top: 100px;
  margin: 0 auto;
  text-align: center; }
  .sponsor.fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    width: 100%;
    max-width: none;
    padding: 0;
    background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
    background: -webkit-linear-gradient(left, #97d3f3, #008acc);
    background: -o-linear-gradient(left, #97d3f3, #008acc);
    background: linear-gradient(to right, #97d3f3, #008acc);
    -webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); }
    .sponsor.fixed.trans {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    .sponsor.fixed .box {
      margin-bottom: 0; }
    .sponsor.fixed .item img {
      height: 50px; }
    .sponsor.fixed .item i {
      color: #fff; }
  .sponsor .box {
    width: auto; }
    .sponsor .box.box_1 .item img {
      height: 50px; }
    .sponsor .box.box_1 .item:nth-child(2) img {
      height: 55px; }
    .sponsor .box.box_2 .item img {
      height: 36px; }
      .sponsor .box.box_2 .item img.fubon {
        height: 30px; }
      .sponsor .box.box_2 .item img.aws {
        clear: both; }
      .sponsor .box.box_2 .item img.ctbc {
        height: 27px; }
      .sponsor .box.box_2 .item img.itri {
        -webkit-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
        transform: translateY(-4px); }
    .sponsor .box.box_3 .item img {
      height: 22px; }
      .sponsor .box.box_3 .item img.richart {
        height: 26px;
        -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        transform: translateY(-2px); }
      .sponsor .box.box_3 .item img.cathay {
        height: 28px; }
  .sponsor .item {
    display: inline-block;
    width: auto;
    position: relative;
    padding-left: 105px;
    margin-right: 30px; }
    .sponsor .item:last-child {
      margin-right: 0; }
    .sponsor .item i {
      position: absolute;
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 80px;
      font-style: normal;
      color: #97d3f3;
      line-height: 1em;
      border-right: 1px solid #fff; }
    .sponsor .item a {
      float: left; }
      .sponsor .item a img:last-child {
        margin-right: 30px; }
    .sponsor .item img {
      float: left;
      margin: 15px 30px 15px 0;
      height: 42px; }
      .sponsor .item img:last-child {
        margin-right: 0; }

.info_wrap {
  padding: 10px 0; }

.head {
  margin-bottom: 50px;
  text-align: center;
  color: #fff; }

ins {
  float: left;
  width: 100%;
  margin: 30px 0 50px 0;
  text-align: center; }
  ins > div {
    position: relative;
    margin: 0 auto; }
    ins > div > div {
      position: relative;
      z-index: 1; }
    ins > div:before {
      content: "";
      display: block;
      position: absolute;
      left: -8px;
      top: -8px;
      z-index: 0;
      width: calc( 100% + 16px);
      height: calc( 100% + 16px);
      background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
      background: -webkit-linear-gradient(left, #97d3f3, #008acc);
      background: -o-linear-gradient(left, #97d3f3, #008acc);
      background: linear-gradient(to right, #97d3f3, #008acc); }
    ins > div iframe {
      margin: 0 !important; }

.intro {
  padding-top: 100px; }
  .intro .group {
    position: relative;
    width: 100%; }
  .intro .left, .intro .right {
    width: 48%; }
  .intro .left {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .intro .left:before, .intro .left:after {
      left: -60px;
      display: block;
      position: absolute; }
    .intro .left:before {
      content: "";
      top: 18px;
      width: 2px;
      height: calc( 100% - 240px);
      margin-left: 11px;
      background: #008acc; }
    .intro .left:after {
      content: "INFORMATION";
      bottom: 0;
      -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
      color: #008acc;
      letter-spacing: 8px; }
    .intro .left .text {
      margin-bottom: 40px; }
      .intro .left .text:last-child {
        margin-bottom: 0; }
    .intro .left h3 {
      margin-bottom: 10px;
      line-height: 1.1em;
      color: #68e2f1;
      font-size: 84px;
      font-weight: normal; }
      .intro .left h3 span {
        display: inline-block;
        width: 55px;
        height: 55px;
        margin-left: 15px;
        margin-top: -15px;
        border-radius: 50%;
        border: 2px solid #68e2f1;
        font-size: 36px;
        line-height: 50px;
        text-align: center;
        vertical-align: middle; }
    .intro .left h4 {
      margin-bottom: 20px;
      font-size: 32px;
      color: #008acc; }
    .intro .left p {
      color: #fff;
      font-size: 18px;
      line-height: 1.8em; }
  .intro .right {
    position: absolute;
    right: 0;
    top: 0;
    height: 95%;
    padding: 40px 20px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .intro .right:before {
      content: "";
      display: block;
      position: absolute;
      right: 0;
      top: 20px;
      z-index: 0;
      width: calc( 100% - 20px);
      height: calc( 100% - 40px);
      background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
      background: -webkit-linear-gradient(left, #97d3f3, #008acc);
      background: -o-linear-gradient(left, #97d3f3, #008acc);
      background: linear-gradient(to right, #97d3f3, #008acc); }
    .intro .right iframe {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%; }

.idx_speaker {
  padding-bottom: 80px; }
  .idx_speaker .item {
    float: left;
    width: 47%; }
    .idx_speaker .item:nth-child(2n) {
      float: right; }
  .idx_speaker .group {
    margin-bottom: 60px; }
  .idx_speaker .pic {
    display: block;
    position: relative;
    float: left;
    width: 40%;
    padding: 10px 0 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease; }
    .idx_speaker .pic:hover {
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1); }
    .idx_speaker .pic:before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
	  width: calc( 100%);
      height: calc( 100%);
/*      width: calc( 100% - 10px);
      height: calc( 100% - 10px);
      background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
      background: -webkit-linear-gradient(left, #97d3f3, #008acc);
      background: -o-linear-gradient(left, #97d3f3, #008acc);
      background: linear-gradient(to right, #97d3f3, #008acc); */
	  }
    .idx_speaker .pic img {
      position: relative;
      z-index: 1;
      width: 100%;
      border: 1px solid #97d3f3;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
  .idx_speaker .text {
    float: right;
    width: 55%;
    color: #fff; }
    .idx_speaker .text h3 {
      margin-bottom: 5px;
      font-size: 26px;
      color: #97d3f3; }
    .idx_speaker .text h4 {
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: normal; }
  .idx_speaker .more {
    font-size: 20px;
    text-align: center; }
    .idx_speaker .more p {
      display: inline-block;
      margin: 0 auto;
      padding: 7px 20px 8px 20px;
      color: #fff;
      background: -webkit-gradient(linear, left top, right top, from(#008acc), to(#97d3f3));
      background: -webkit-linear-gradient(left, #008acc, #97d3f3);
      background: -o-linear-gradient(left, #008acc, #97d3f3);
      background: linear-gradient(to right, #008acc, #97d3f3); }

.banner .left, .banner .right {
  width: 48%; }

.banner .left {
  float: left; }

.banner .right {
  float: right; }

.banner .group {
  position: relative;
  width: 100%; }

.banner a {
  display: block;
  overflow: hidden;
  cursor: pointer; }
  .banner a:hover img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }

.banner img {
  width: 100%;
  -webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); }

.banner .icon {
    position: absolute;
    right: 40px;
    bottom: 0;
    -webkit-transform: translateY(50%) scale(1);
    -ms-transform: translateY(50%) scale(1);
    transform: translateY(50%) scale(1);
    width: 80px;
    height: 80px;
    background: url("../Images_t/index/banner_icon.png") no-repeat center center;
    background-size: 100% 100%;
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
    -webkit-animation: iconAni 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: iconAni 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
  .banner .icon:hover {
    -webkit-transform: translateY(50%) scale(1.1);
    -ms-transform: translateY(50%) scale(1.1);
    transform: translateY(50%) scale(1.1);
    -webkit-animation: none;
    animation: none; }

@-webkit-keyframes iconAni {
  0% {
    -webkit-transform: translateY(50%) scale(1);
    transform: translateY(50%) scale(1); }
  10% {
    -webkit-transform: translateY(50%) scale(1.1);
    transform: translateY(50%) scale(1.1); }
  20% {
    -webkit-transform: translateY(50%) scale(1);
    transform: translateY(50%) scale(1); }
  30% {
    -webkit-transform: translateY(50%) scale(1.1);
    transform: translateY(50%) scale(1.1); }
  40% {
    -webkit-transform: translateY(50%) scale(1);
    transform: translateY(50%) scale(1); }
  100% {
    -webkit-transform: translateY(50%) scale(1);
    transform: translateY(50%) scale(1); } }

@keyframes iconAni {
  0% {
    -webkit-transform: translateY(50%) scale(1);
    transform: translateY(50%) scale(1); }
  10% {
    -webkit-transform: translateY(50%) scale(1.1);
    transform: translateY(50%) scale(1.1); }
  20% {
    -webkit-transform: translateY(50%) scale(1);
    transform: translateY(50%) scale(1); }
  30% {
    -webkit-transform: translateY(50%) scale(1.1);
    transform: translateY(50%) scale(1.1); }
  40% {
    -webkit-transform: translateY(50%) scale(1);
    transform: translateY(50%) scale(1); }
  100% {
    -webkit-transform: translateY(50%) scale(1);
    transform: translateY(50%) scale(1); } }

.article_title {
  margin-bottom: 20px; }
  .article_title:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
    background: -webkit-linear-gradient(left, #97d3f3, #008acc);
    background: -o-linear-gradient(left, #97d3f3, #008acc);
    background: linear-gradient(to right, #97d3f3, #008acc); }
  .article_title span, .article_title .more {
    display: inline-block;
    height: 40px;
    color: #fff; }
  .article_title span {
    padding: 0 20px;
    font-size: 22px;
    line-height: 38px;
    background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
    background: -webkit-linear-gradient(left, #97d3f3, #008acc);
    background: -o-linear-gradient(left, #97d3f3, #008acc);
    background: linear-gradient(to right, #97d3f3, #008acc); }
  .article_title .more {
    float: right;
    padding: 0 10px;
    border: 1px solid #008acc;
    border-bottom: none;
    font-size: 20px;
    line-height: 33px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .article_title .more:hover {
      background: #008acc; }
  .article_title .share_wrap {
    float: right;
    margin-top: 3px; }

.article_wrap .group {
  float: left;
  width: 100%;
  margin-bottom: 30px; }

.article_wrap .article_title {
  margin-bottom: 30px; }

.article_wrap .focus {
  margin-bottom: 20px; }
  .article_wrap .focus .item {
    width: 48%;
    margin-right: 4%; }
    .article_wrap .focus .item:nth-child(2n) {
      margin-right: 0; }
    .article_wrap .focus .item .text p {
      font-size: 18px; }

.article_wrap .item {
  float: left;
  width: 32%;
  margin-right: 2%;
  margin-bottom: 30px; }
  .article_wrap .item:nth-child(3n) {
    margin-right: 0; }
  .article_wrap .item:nth-child(3n+1) {
    clear: left; }
  .article_wrap .item .pic {
    display: block;
    width: 100%;
    padding: 6px;
    margin-bottom: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
    background: -webkit-linear-gradient(left, #97d3f3, #008acc);
    background: -o-linear-gradient(left, #97d3f3, #008acc);
    background: linear-gradient(to right, #97d3f3, #008acc); }
  .article_wrap .item .text {
    color: #fff; }
    .article_wrap .item .text p {
      line-height: 1.6em; }

.footer {
  padding-bottom: 10px;
  text-align: center;
  color:#FFF;
}
  .footer .footer_logo {
    vertical-align: middle;
    line-height: 1em; }
    .footer .footer_logo img {
      display: inline-block;
      height: 52px;
      margin: 0 10px;
      -webkit-transform: translateY(8px);
      -ms-transform: translateY(8px);
      transform: translateY(8px); }
  .footer p {
    font-size: 13px;
	line-height:17px;}

.banner_overlay img {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.booking_overlay {
  width: 94%;
  padding: 50px;
  background: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 3px; }
  .booking_overlay .head {
    margin-bottom: 50px;
    text-align: center; }
  .booking_overlay img {
    display: inline-block;
    margin-bottom: 30px; }
  .booking_overlay h2, .booking_overlay h3 {
    font-size: 36px; }
  .booking_overlay h2 {
    margin-bottom: 5px;
    color: #008acc; }
  .booking_overlay h3 {
    margin-bottom: 30px;
    color: #97d3f3; }
  .booking_overlay p {
    margin-bottom: 10px;
    font-size: 20px;
    color: #333; }
    .booking_overlay p span {
      color: #97d3f3;
      font-size: 24px;
      margin: 0 5px; }
  .booking_overlay .form {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 50px auto; }
  .booking_overlay .item {
    position: relative;
    padding-left: 85px;
    margin-bottom: 20px;
    border: 3px solid #008acc;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .booking_overlay .item.mail {
      padding-left: 110px; }
    .booking_overlay .item i {
      display: block;
      position: absolute;
      left: 10px;
      top: 5px;
      width: 80px;
      font-size: 24px;
      font-weight: bold;
      font-style: normal;
      color: #008acc; }
  .booking_overlay input {
    width: 100%;
    height: 40px;
    background: none;
    border: none;
    font-size: 24px;
    color: #008acc; }
    .booking_overlay input:hover {
      background: #eee; }
  .booking_overlay .text {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 50px auto; }
    .booking_overlay .text li {
      margin-bottom: 5px;
      font-size: 16px; }
      .booking_overlay .text li span {
        color: #97d3f3; }
  .booking_overlay .btn_wrap {
    text-align: center; }

.color_btn {
  display: inline-block;
  padding: 8px 30px;
  color: #fff;
  font-size: 18px;
  cursor: pointer; }

.color_btn {
  background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
  background: -webkit-linear-gradient(left, #97d3f3, #008acc);
  background: -o-linear-gradient(left, #97d3f3, #008acc);
  background: linear-gradient(to right, #97d3f3, #008acc); }
  .color_btn:hover {
    background: #0d0f2a; }

.line_btn {
    display: inline-block !important;
    padding: 8px 30px !important;
    color: #fff !important;
    background: #615EA8 !important;
    border: 1px solid #615EA8 !important;
    font-size: 18px !important;
    cursor: pointer !important;
}

  .line_btn:hover {
    border: 1px solid #7A62A9;
	background: #7A62A9;
	color: #fff;
	}
  .line_btn.fixed {
    position: absolute;
    left: 20px;
    top: 20px;
    padding: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    line-height: 69px; }

.in_content {
  padding-top: 10px; }

.article_detail {
  clear: both; }
  .article_detail .head {
    margin-bottom: 30px;
    color: #97d3f3;
    text-align: left; }
  .article_detail .pic {
    width: 100%;
    margin-bottom: 30px; }
    .article_detail .pic img {
      width: 100%; }
  .article_detail .edit_wrap {
    margin-bottom: 40px;
    color: #fff; }
    .article_detail .edit_wrap h2, .article_detail .edit_wrap h3 {
      margin: 15px 0 20px 0;
      line-height: 1.5em;
      font-size: 26px;
      color: #008acc; }
    .article_detail .edit_wrap br {
      display: none; }
    .article_detail .edit_wrap a {
      color: #97d3f3; }
      .article_detail .edit_wrap a:hover {
        color: #fff; }
    .article_detail .edit_wrap .logo_win10 img {
      margin-left: 0; }

@media screen and (max-width: 1400px) {
  .banner_overlay {
    padding-top: 50px; } }

@media screen and (max-width: 1350px) {
  .intro .left:before, .intro .left:after {
    display: none; }
  .booking_btn.top {
    width: 80px;
    height: 80px; }
    .booking_btn.top:after {
      font-size: 15px; } }

@media screen and (max-width: 1240px) {
  .home.trans .booking_btn {
    right: 20px; }
  .home .logo {
    left: 20px; }
  .booking_btn {
    width: 100px;
    height: 100px; }
    .booking_btn:after {
      font-size: 16px; }
  .intro .left .text {
    margin-bottom: 25px; }
  .intro .left h3 {
    font-size: 60px; }
    .intro .left h3 span {
      width: 45px;
      height: 45px;
      font-size: 30px;
      line-height: 43px;
      margin-top: -10px; }
  .intro .left h4 {
    margin-bottom: 10px;
    font-size: 22px; } }

@media screen and (max-width: 1100px) {
  .home .countdown_wrap .countdown {
    width: 450px; }
    .home .countdown_wrap .countdown span {
      font-size: 45px; } }

@media screen and (max-width: 1000px) {
  .sponsor {
    padding-top: 50px; }
    .sponsor .item {
      padding-left: 95px; }
      .sponsor .item i {
        width: 75px; }
      .sponsor .item img {
        height: 35px; }
  .intro .left .text {
    margin-bottom: 20px; }
  .intro .left h3 {
    font-size: 40px; }
    .intro .left h3 span {
      width: 30px;
      height: 30px;
      font-size: 22px;
      line-height: 28px;
      margin-top: -7px; }
  .intro .left h4 {
    font-size: 20px; }
  .intro .left p {
    font-size: 16px; } }

@media screen and (max-width: 900px) {
  .home .countdown_wrap .countdown {
    width: 450px; }
    .home .countdown_wrap .countdown span {
      font-size: 45px; }
  .idx_speaker .pic, .idx_speaker .text {
    float: none;
    width: 100%;
    margin: 0 auto; }
  .idx_speaker .pic {
    max-width: 276px;
    margin-bottom: 20px; }
  .idx_speaker .text {
    max-width: 300px; }
    .idx_speaker .text h3, .idx_speaker .text h4 {
      text-align: center; } }

@media screen and (max-width: 840px) {
  .sponsor {
    max-width: 660px;
    text-align: left; }
    .sponsor.fixed {
      text-align: center; }
    .sponsor .item img {
      margin-top: 10px;
      margin-bottom: 10px; }
    .sponsor .box.box_3 {
      max-width: 500px; }
  .booking_btn {
    width: 80px;
    height: 80px; }
    .booking_btn:after {
      font-size: 15px; }
  .article_wrap .group {
    margin-bottom: 20px; }
  .article_wrap .article_title {
    margin-bottom: 20px; }
  .article_wrap .item {
    float: left;
    width: 48%;
    margin-right: 4%;
    margin-bottom: 20px; }
    .article_wrap .item:nth-child(3n) {
      margin-right: 4%; }
    .article_wrap .item:nth-child(3n+1) {
      clear: none; }
    .article_wrap .item:nth-child(2n) {
      margin-right: 0; }
    .article_wrap .item:nth-child(2n+1) {
      clear: left; }
  .article_wrap.idx .item:last-child {
    display: none; } }

@media screen and (max-width: 800px) {
  .banner .left, .banner .right {
    width: 100%; }
  .banner .left {
    margin-bottom: 50px; } }

@media screen and (max-width: 740px) {
  .home .countdown_wrap .countdown {
    width: 450px; }
    .home .countdown_wrap .countdown span {
      font-size: 45px; }
  .intro .left, .intro .right {
    position: relative;
    width: 100%;
    margin-right: 0; }
  .intro .left {
    margin-bottom: 20px; }
  .intro .right {
    height: 300px;
    padding: 10px; }
    .intro .right:before {
      left: 0;
      top: 0;
      width: 100%;
      height: 100%; }
  .banner .icon {
    right: 30px;
    width: 60px;
    height: 60px; } }

@media screen and (max-width: 740px) and (min-width: 481px) {
  .intro {
    text-align: center; }
    .intro .left {
      display: inline-block;
      width: auto;
      margin-left: auto;
      margin-right: auto;
      text-align: left; }
      .intro .left h3 {
        font-size: 60px; }
        .intro .left h3 span {
          width: 40px;
          height: 40px;
          font-size: 30px;
          line-height: 38px;
          margin-top: -11px; }
      .intro .left h4 {
        font-size: 23px; }
      .intro .left p {
        font-size: 16px; } }

@media screen and (max-width: 700px) {
  .sponsor {
    max-width: 460px; }
    .sponsor .box.box_2 .item img.aws {
      clear: none; }
  ins {
    margin: 15px 0 30px 0; } }

@media screen and (max-width: 660px) {
  .home .countdown_wrap .countdown {
    display: inline-block;
    width: 100%;
    text-align: center; 
	}
    .home .countdown_wrap .countdown div {
      display: inline-block;
      float: none;
      width: auto !important;
      margin: 0 10px; }
    .home .countdown_wrap .countdown span {
      font-size: 40px; }
  .sponsor.fixed .item img {
    height: 44px; }
  .sponsor .box.box_1 .item img {
    height: 45px; }
  .sponsor .box.box_1 .item:nth-child(2) img {
    height: 50px; }
  .sponsor .box.box_2 .item img {
    height: 30px; }
  .sponsor .box.box_3 .item img {
    height: 21px; }
    .sponsor .box.box_3 .item img.richart {
      height: 24px;
      -webkit-transform: translateY(1px);
      -ms-transform: translateY(1px);
      transform: translateY(1px); }
    .sponsor .box.box_3 .item img.cathay {
      height: 26px; }
  .booking_overlay {
    padding: 60px 30px 40px 30px; }
    .booking_overlay .head, .booking_overlay .form, .booking_overlay .text {
      margin-bottom: 30px; }
    .booking_overlay h2, .booking_overlay h3 {
      font-size: 30px; }
    .booking_overlay h3 {
      margin-bottom: 20px; } }

@media screen and (max-width: 580px) {
  .home .countdown_wrap {
    bottom: 10px; }
    .home .countdown_wrap .countdown div {
      margin: 0 5px; }
      .home .countdown_wrap .countdown div:after {
        bottom: 5px;
        margin-bottom: 0;
        font-size: 18px; }
    .home .countdown_wrap .countdown span {
      font-size: 30px; }
.logo img {
	width:100%;
	max-width:80px;
	height:auto;
}	  
  .sponsor.fixed {
    padding: 10px 0 5px 0; }
    .sponsor.fixed .box {
      width: 360px;
      margin: 0 auto; }
    .sponsor.fixed .item {
      display: block;
      padding-left: 0;
      margin: 0 0 5px 0;
      text-align: left; }
      .sponsor.fixed .item:last-child {
        margin-bottom: 0; }
      .sponsor.fixed .item i {
        display: inline-block;
        position: relative;
        left: 0;
        top: 0;
        -webkit-transform: translateY(-11px);
        -ms-transform: translateY(-11px);
        transform: translateY(-11px);
        margin-right: 15px; }
      .sponsor.fixed .item img {
        display: inline-block;
        float: none;
        margin: 0;
        height: 40px; }
  .article_wrap .focus .item {
    width: 100%;
    margin-right: 0; }
  .idx_speaker {
    padding-bottom: 0; }
    .idx_speaker .item {
      width: 100%;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px dotted #97d3f3; }
    .idx_speaker .text {
      max-width: 400px; }
  .footer {
    padding-bottom: 30px; } }

@media screen and (max-width: 480px) {
  .home .logo {
    left: 20%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 15px;
    width: 130px; }

  .home .countdown_wrap .countdown div {
    margin: 0; }
    .home .countdown_wrap .countdown div:after {
      font-size: 16px; }
  .home .countdown_wrap .countdown span {
    font-size: 24px; }
  .home.trans .booking_btn {
    right: 30px; }
  .home .booking_btn {
    width: 75px;
    height: 75px;
    right: 30px;
    top: 10px;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    text-align: center; }
    .home .booking_btn:before {
      display: none; }
    .home .booking_btn:after {
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 75px;
      line-height: 1.3em; }
  .sponsor {
    max-width: 260px; }
    .sponsor.fixed .item i {
      color: #fff;
      border-right: 1px solid #fff; }
    .sponsor .box {
      margin-bottom: 10px; }
      .sponsor .box.box_4 .item img {
        height: 40px; }
      .sponsor .box.box_1 .item img {
        height: 44px; }
      .sponsor .box.box_1 .item:nth-child(2) img {
        height: 60px; }
      .sponsor .box.box_2 .item img {
        height: 40px; }
      .sponsor .box.box_3 .item img {
        margin-left: 5px;
        margin-right: 5px; }
        .sponsor .box.box_3 .item img.richart {
          margin-left: 10px;
          margin-right: 10px; }
    .sponsor .item {
      width: 100%;
      padding-left: 0;
      margin-bottom: 5px;
      text-align: center; }
      .sponsor .item i {
        display: block;
        position: relative;
        left: 0;
        top: 0;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        border: none;
        margin-bottom: 5px;
        color: #97d3f3;
        text-align: left; }
      .sponsor .item a, .sponsor .item img {
        display: inline-block;
        float: none;
        margin-right: 0; }
      .sponsor .item a img:last-child {
        margin-right: 0; }
  .article_wrap .article_title span, .article_wrap .article_title .more {
    height: 35px; }
  .article_wrap .article_title span {
    line-height: 34px;
    font-size: 18px; }
  .article_wrap .article_title .more {
    line-height: 30px;
    font-size: 16px; }
  .article_wrap .focus {
    margin-bottom: 0; }
  .article_wrap .item {
    float: left;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 25px !important; }
    .article_wrap .item:nth-child(3) {
      display: block; }

    .article_wrap .item .text p {
      font-size: 15px !important; }
  .banner .icon {
    right: 20px;
    width: 50px;
    height: 50px; } }

@media screen and (max-width: 400px) {
  .sponsor.fixed .box {
    width: 305px; }
  .sponsor.fixed .item img {
    height: 35px; }
  .sponsor .item i {
    top: 0;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
  .banner .icon {
    left: 50%;
    right: auto;
    bottom: -40px;
    margin-left: -25px; } }

@media screen and (max-height: 750px) {
  .home .title .main_title {
    margin-bottom: 5%;}
    .home .title .main_title div {
      padding-bottom: 50%; }
}

@media screen and (max-height: 600px) {
  .home .title {
    top: 43%; }
    .home .title .main_title {
      margin-bottom: 20px; }
      .home .title .main_title div {
        padding-bottom: 35%; }
    .home .title .sub_title div {
      padding-bottom: 38%; } }

@media screen and (max-height: 600px) and (min-width: 741px) {
  .home .countdown_wrap .countdown {
    width: 450px; }
    .home .countdown_wrap .countdown span {
      font-size: 45px; } }

@media screen and (max-height: 500px) {
  .home .title .main_title {
    margin-bottom: 10px; }
    .home .title .main_title div {
      padding-bottom: 33%; }
  .home .title .sub_title div {
    padding-bottom: 33%; } }

@media screen and (max-height: 500px) and (min-width: 661px) {
  .home .countdown_wrap .countdown {
    display: inline-block;
    width: auto;
    text-align: center; }
    .home .countdown_wrap .countdown div {
      width: auto;
      margin: 0 20px; }
    .home .countdown_wrap .countdown span {
      font-size: 40px; } }

/* ticket.css ==============================================*/
.ticket_group {
  width: 94%;
  max-width: 1200px;
  text-align: center;
  margin: 0 auto;
  padding-top: 60px; }

.title_wrap {
  text-align: center;
  margin: 0 auto 70px auto; }
  .title_wrap img {
    display: inline-block;
    max-width: 100%; }
  .title_wrap .title {
    margin-bottom: 50px; }
  .title_wrap .gift {
    color: #fff;
    margin-bottom: 80px;
    font-size: 20px; }
    .title_wrap .gift a {
      display: inline-block;
      margin: 0 5px;
      color: #fcff00;
      border-bottom: 1px solid #fcff00;
      cursor: pointer; }
      .title_wrap .gift a:hover {
        color: #97d3f3;
        border-color: #97d3f3; }

.ticket_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .ticket_wrap .login_wrap {
    position: relative;
    margin-bottom: 20px;
    text-align: left;
    padding-right: 100px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff; }
    .ticket_wrap .login_wrap .btn {
      position: absolute;
      right: 0;
      top: 0;
      width: 80px;
      text-align: center;
      background: #008acc;
      color: #fff;
      cursor: pointer; }
      .ticket_wrap .login_wrap .btn:hover {
        background: #97d3f3; }
  .ticket_wrap .text_wrap {
    margin-bottom: 40px;
    color: #fff;
    text-align: left; }
    .ticket_wrap .text_wrap a {
      color: #fff;
      border-bottom: 1px solid #fff; }
      .ticket_wrap .text_wrap a:hover {
        color: #fcff00; }
  .ticket_wrap .group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    float: left;
    width: 48%;
    margin-right: 4%;
    margin-bottom: 60px;
    padding: 35px 25px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .ticket_wrap .group:before, .ticket_wrap .group:after {
      content: "";
      display: block;
      position: absolute; }
    .ticket_wrap .group:before {
      left: 0;
      top: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      background: -webkit-gradient(linear, left bottom, left top, from(#008acc), to(#97d3f3));
      background: -webkit-linear-gradient(bottom, #008acc, #97d3f3);
      background: -o-linear-gradient(bottom, #008acc, #97d3f3);
      background: linear-gradient(to top, #008acc, #97d3f3);
      opacity: .6; }
    .ticket_wrap .group:after {
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 1;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      border: 1px solid rgba(255, 255, 255, 0.8);
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-position: center 90%;
      background-repeat: no-repeat;
      background-size: auto 60%; }
    .ticket_wrap .group:last-child {
      margin-right: 0; }
    .ticket_wrap .group.group_1:after {
        background-image: url("../Images_t/index/ticket_icon_1.png");
    }
    .ticket_wrap .group.group_2:after {
        background-image: url("../Images_t/index/ticket_icon_2.png");
    }
    .ticket_wrap .group.group_3:after {
        background-image: url("../Images_t/index/ticket_icon_3.png");
    }
    .ticket_wrap .group .text {
      position: relative;
      z-index: 2;
      text-align: center;
      width: 100%;
      margin-bottom: 25px; }
      .ticket_wrap .group .text a {
        cursor: pointer;
        background: rgba(255, 255, 255, 0.2); }
        .ticket_wrap .group .text a.btn {
          border-color: #fff; }
      .ticket_wrap .group .text .btn {
        display: inline-block;
        width: 200px;
        padding: 7px 0 10px 0;
        margin-bottom: 25px;
        border-radius: 5px;
        font-size: 18px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #fff; }
      .ticket_wrap .group .text a:hover {
        background: #fff;
        color: #333;
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05); }
      .ticket_wrap .group .text p {
        font-size: 16px;
        line-height: 1.5em;
        color: #fff; }
    .ticket_wrap .group .notice_text {
      -ms-flex-item-align: end;
      align-self: flex-end;
      position: relative;
      z-index: 1;
      width: 100%;
      line-height: 1.5em;
      color: #fcff00;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }

.ticket_wrap.member, .ticket_wrap.complete {
  margin: 0 auto 30px auto;
  display: block; }
  .ticket_wrap.member .group, .ticket_wrap.complete .group {
    width: 100%;
    margin-right: 0;
    padding-bottom: 50px;
    margin-bottom: 20px; }
    .ticket_wrap.member .group.main, .ticket_wrap.complete .group.main {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.ticket_wrap.member {
  max-width: 650px; }

.ticket_wrap.complete {
  max-width: 800px;
  color: #fff;
  text-align: left; }
  .ticket_wrap.complete .group {
    margin-bottom: 30px;
    padding-bottom: 30px; }
    .ticket_wrap.complete .group:after {
      background-position: 20% center;
      background-size: auto 70%; }
    .ticket_wrap.complete .group .text {
      display: inline-block;
      width: 100%;
      margin: 0 auto;
      padding-left: 45%;
      text-align: left;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
  .ticket_wrap.complete .box {
    margin-bottom: 40px; }
  .ticket_wrap.complete h3 {
    line-height: 1.5em;
    font-size: 18px;
    font-weight: normal;
    text-align: center; }
  .ticket_wrap.complete h2 {
    margin-bottom: 10px;
    color: #97d3f3;
    font-size: 20px; }
  .ticket_wrap.complete p, .ticket_wrap.complete li {
    margin-bottom: 10px; }
    .ticket_wrap.complete p span, .ticket_wrap.complete li span {
      color: #fcff00; }
    .ticket_wrap.complete p a, .ticket_wrap.complete li a {
      color: #fff;
      border-bottom: 1px solid #fff; }
      .ticket_wrap.complete p a:hover, .ticket_wrap.complete li a:hover {
        color: #fcff00; }
  .ticket_wrap.complete img {
    max-width: 100%;
    margin: 0 auto; }
  .ticket_wrap.complete .btn_wrap {
    margin-bottom: 40px;
    text-align: center; }
    .ticket_wrap.complete .btn_wrap a {
      display: inline-block;
      width: 150px;
      padding: 4px 10px 7px 10px;
      background: #97d3f3;
      color: #fff;
      cursor: pointer; }
      .ticket_wrap.complete .btn_wrap a:hover {
        background: #008acc; }
  .ticket_wrap.complete.ticket_attend_complete .group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 50px; }
    .ticket_wrap.complete.ticket_attend_complete .group .text {
      width: auto;
      padding: 0 30px;
      margin-bottom: 30px; }
      .ticket_wrap.complete.ticket_attend_complete .group .text p {
        line-height: 1.8em; }
      .ticket_wrap.complete.ticket_attend_complete .group .text a {
        background: none; }
        .ticket_wrap.complete.ticket_attend_complete .group .text a:hover {
          color: #FF6263;
          border-color: #FF6263; }
  .ticket_wrap.complete.ticket_attend_complete .btn_wrap {
    position: relative;
    z-index: 5;
    text-align: center;
    width: 100%;
    margin-bottom: 0; }
    .ticket_wrap.complete.ticket_attend_complete .btn_wrap a {
      display: inline-block;
      width: 180px;
      margin: 0 15px 15px 15px;
      border-radius: 3px;
      background: #97d3f3;
      font-size: 16px; }
      .ticket_wrap.complete.ticket_attend_complete .btn_wrap a:hover {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1); }

.ticket_wrap.ticket_attend .group:after {
  background: none; }

.ticket_wrap.ticket_attend_text {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  color: #fff;
  padding-bottom: 60px; }
  .ticket_wrap.ticket_attend_text a {
    color: #FF6263;
    border-bottom: 1px solid #FF6263; }
    .ticket_wrap.ticket_attend_text a:hover {
      color: #97d3f3;
      border-color: #97d3f3; }

.company_title {
  margin-bottom: 30px; }
  .company_title h3 {
    color: #fff; }

.form_wrap .group {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden; }
  .form_wrap .group.trans {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  .form_wrap .group.hide {
    padding-bottom: 0;
    margin-bottom: 0;
    height: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0); }

.select_add {
  display: none;
  -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
  .select_add.trans {
    display: block; }
  .select_add.select_group .add_btn_wrap {
    display: block; }
  .select_add.select_group .close_btn {
    display: block; }
  .select_add .add_btn_wrap {
    display: none; }
  .select_add .btn_wrap {
    clear: both;
    padding: 30px 0 50px 0; }
    .select_add .btn_wrap p {
      margin-bottom: 30px; }
    .select_add .btn_wrap label {
      color: #fff; }
      .select_add .btn_wrap label input {
        margin-right: 10px;
        width: 16px;
        height: 16px;
        -webkit-transform: translateY(3px);
        -ms-transform: translateY(3px);
        transform: translateY(3px); }
      .select_add .btn_wrap label a {
        cursor: pointer;
        color: #fff; }
        .select_add .btn_wrap label a span {
          margin: 0 5px;
          color: #fcff00; }
        .select_add .btn_wrap label a:hover {
          color: #b00; }
          .select_add .btn_wrap label a:hover span {
            color: #b00; }
    .select_add .btn_wrap .btn {
      display: block;
      width: 200px;
      padding: 5px 0 7px 0;
      margin: 0 auto;
      font-size: 18px;
      color: #fff;
      background: #e61438;
      cursor: pointer; }
      .select_add .btn_wrap .btn:hover {
        background: #97d3f3; }
    .select_add .btn_wrap .add_item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      border: 1px solid #97d3f3;
      background: none; }
      .select_add .btn_wrap .add_item:after {
        content: "+";
        display: inline-block;
        margin-left: 10px;
        font-size: 30px;
        font-weight: bold; }
  .select_add .close_btn {
    display: none;
    right: 20px;
    top: 15px; }
    .select_add .close_btn:before, .select_add .close_btn:after {
      width: 90%; }

.form {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 500px;
  margin: 0 auto; }
  .form:before {
    content: attr(data-title);
    display: block;
    margin-bottom: 25px;
    font-size: 22px;
    font-weight: normal;
    text-align: left;
    color: #fcff00; }
  .form .item {
    position: relative;
    width: 100%;
    padding-left: 120px;
    margin-bottom: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .form .item:last-child {
      margin-bottom: 0; }
    .form .item:before {
      content: attr(data-title);
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      line-height: 32px;
      text-align: right;
      font-style: normal;
      color: #fff;
      font-size: 16px; }
    .form .item input, .form .item select {
      width: 100%;
      height: 35px; }
  .form label {
    float: left;
    margin: 0 15px 20px 15px;
    color: #fff;
    cursor: pointer;
    text-align: left; }
    .form label:hover {
      color: #fcff00; }
    .form label input[type=checkbox] {
      width: 14px;
      height: 14px;
      margin-right: 10px;
      -webkit-transform: translateY(2px);
      -ms-transform: translateY(2px);
      transform: translateY(2px); }
    .form label input[type=text] {
      width: 300px;
      height: 35px;
      color: #333;
      margin-top: 5px; }
    .form label span {
      margin-right: 15px;
      font-size: 16px; }
      .form label span:last-child {
        margin-right: 0; }

.privacy_overlay {
  max-width: 800px;
  padding: 50px;
  background: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 3px; }
  .privacy_overlay .group:last-child {
    margin-bottom: 0; }
  .privacy_overlay h3 {
    margin-bottom: 20px;
    color: #008acc; }

.login_bw {
  width: 94%;
  max-width: 460px;
  background: #fff;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  overflow: hidden; }
  .login_bw .overlay_close_btn:before, .login_bw .overlay_close_btn:after {
    background: #fff; }
  .login_bw .title {
    width: 100%;
    padding: 40px 20px;
    background: -webkit-gradient(linear, left top, right top, from(#008acc), to(#97d3f3));
    background: -webkit-linear-gradient(left, #008acc, #97d3f3);
    background: -o-linear-gradient(left, #008acc, #97d3f3);
    background: linear-gradient(to right, #008acc, #97d3f3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    color: #fff; }
    .login_bw .title h3 {
      margin-bottom: 20px;
      font-size: 30px; }
    .login_bw .title p {
      font-size: 18px; }
    .login_bw .title a {
      display: inline-block;
      color: #fff;
      margin-left: 10px;
      padding-bottom: 0;
      border-bottom: 1px solid #fff;
      -webkit-transition: 0.3s ease;
      -o-transition: 0.3s ease;
      transition: 0.3s ease; }
  .login_bw .form {
    padding: 25px;
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .login_bw .form:before {
      display: none; }
    .login_bw .form .group {
      margin-bottom: 20px; }
      .login_bw .form .group:last-child {
        margin-bottom: 0; }
      .login_bw .form .group .item {
        position: relative;
        height: 45px;
        padding: 0 20px 0 100px;
        margin-bottom: 30px;
        border: 1px solid #97d3f3;
        border-radius: 25px; }
        .login_bw .form .group .item:before {
          display: none; }
        .login_bw .form .group .item i {
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          line-height: 42px;
          border-radius: 25px 0 0 25px;
          padding: 0 12px 0 15px;
          color: #fff;
          font-style: normal;
          background: -webkit-gradient(linear, left bottom, left top, from(#008acc), to(#97d3f3));
          background: -webkit-linear-gradient(bottom, #008acc, #97d3f3);
          background: -o-linear-gradient(bottom, #008acc, #97d3f3);
          background: linear-gradient(to top, #008acc, #97d3f3); }
        .login_bw .form .group .item input, .login_bw .form .group .item select {
          width: 100%;
          height: 100%;
          border: none;
          outline: none;
          color: #333;
          -webkit-box-sizing: border-box;
          box-sizing: border-box; }
          .login_bw .form .group .item input::-webkit-input-placeholder, .login_bw .form .group .item select::-webkit-input-placeholder {
            color: #333; }
          .login_bw .form .group .item input:-moz-placeholder, .login_bw .form .group .item select:-moz-placeholder {
            color: #333; }
          .login_bw .form .group .item input::-moz-placeholder, .login_bw .form .group .item select::-moz-placeholder {
            color: #333; }
          .login_bw .form .group .item input:-ms-input-placeholder, .login_bw .form .group .item select:-ms-input-placeholder {
            color: #333; }
        .login_bw .form .group .item select option {
          height: 30px; }
        .login_bw .form .group .item span {
          display: block;
          position: absolute;
          left: 100px;
          bottom: 0;
          padding-left: 5px;
          color: #b00;
          font-size: 13px;
          -webkit-transform: translateY(100%);
          -ms-transform: translateY(100%);
          transform: translateY(100%); }
            .login_bw .form .group .item span:before {
                content: "";
                display: block;
                position: absolute;
                left: 0;
                top: 50%;
                width: 14px;
                height: 14px;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
                background: url("../Images_t/icon/icon_warn.png") no-repeat center;
                background-size: contain;
            }
      .login_bw .form .group.link_wrap {
        margin-top: 40px; }
        .login_bw .form .group.link_wrap a {
          float: left;
          clear: both;
          color: #666;
          padding-bottom: 0;
          margin-bottom: 5px;
          border-bottom: 1px solid #666;
          -webkit-transition: 0.3s ease;
          -o-transition: 0.3s ease;
          transition: 0.3s ease; }
          .login_bw .form .group.link_wrap a:hover {
            color: #b00;
            border-color: #b00; }
        .login_bw .form .group.link_wrap p {
          position: relative;
          float: left;
          clear: both;
          width: 100%;
          margin-top: 10px;
          padding-left: 15px;
          color: #666;
          line-height: 1.5em; }
          .login_bw .form .group.link_wrap p:before {
            content: "*";
            display: block;
            position: absolute;
            left: 0;
            top: 0; }
    .login_bw .form .btn_wrap .login_btn {
      display: block;
      position: relative;
      width: 100%;
      max-width: 250px;
      height: 46px;
      line-height: 45px;
      margin: 0 auto;
      color: #fff;
      border-radius: 23px;
      text-align: center;
      font-size: 18px;
      overflow: hidden;
      cursor: pointer; }
      .login_bw .form .btn_wrap .login_btn.bw {
        background: #008acc; }
      .login_bw .form .btn_wrap .login_btn:hover {
        background: #97d3f3; }
  .login_bw.ticket_attend_overlay .btn_wrap {
    padding-top: 40px; }

.slimduet_overlay {
  width: 94%;
  max-width: 900px;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); }
  .slimduet_overlay .pic {
    float: left;
    width: 35%; }
    .slimduet_overlay .pic img {
      width: 100%; }
  .slimduet_overlay .text {
    float: right;
    width: 65%;
    padding: 70px 30px 20px 30px;
    line-height: 1.8em;
    font-size: 18px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .slimduet_overlay .text p {
      margin-bottom: 20px; }
    .slimduet_overlay .text a {
      float: right;
      padding: 5px 20px;
      background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
      background: -webkit-linear-gradient(left, #97d3f3, #008acc);
      background: -o-linear-gradient(left, #97d3f3, #008acc);
      background: linear-gradient(to right, #97d3f3, #008acc);
      color: #fff; }
      .slimduet_overlay .text a:hover {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1); }

@media screen and (max-width: 1200px) {
  .ticket_wrap .group {
    width: 49%;
    margin-right: 2%; } }

@media screen and (max-width: 900px) {
  .ticket_wrap {
    display: block;
    margin-bottom: 40px; }
    .ticket_wrap .group {
      width: 100%;
      margin-right: 0;
      margin-bottom: 20px; }
      .ticket_wrap .group:after {
        background-position: 10% center; }
      .ticket_wrap .group.group_3:after {
        background-position: 7% center; } }

@media screen and (max-width: 800px) {
  .slimduet_overlay {
    padding: 20px 0;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .slimduet_overlay .group {
      margin-bottom: 0; }
    .slimduet_overlay .pic, .slimduet_overlay .text {
      float: none; }
    .slimduet_overlay .pic {
      display: inline-block;
      width: 90%;
      max-width: 250px;
      margin: 0 auto; }
      .slimduet_overlay .pic img {
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
    .slimduet_overlay .text {
      width: 100%;
      padding-top: 20px;
      padding-bottom: 0; }
      .slimduet_overlay .text p {
        margin-bottom: 15px;
        text-align: left; }
      .slimduet_overlay .text a {
        display: inline-block;
        float: none;
        margin-top: 20px; } }

@media screen and (max-width: 640px) {
  .title_wrap .gift {
    margin-bottom: 50px;
    font-size: 18px; } }

@media screen and (max-width: 600px) {
  .ticket_wrap.complete .group:after {
    background-position: 15% center; }
  .ticket_wrap.complete.ticket_attend_complete .group {
    padding: 30px 20px; }
    .ticket_wrap.complete.ticket_attend_complete .group .text {
      width: 100%; } }

@media screen and (max-width: 500px) {
  .form label input[type=text] {
    width: 200px; } }

@media screen and (max-width: 480px) {
  .slimduet_overlay {
    padding-top: 50px; }
    .slimduet_overlay .overlay_close_btn {
      right: 5px !important;
      top: 0px !important; }
    .slimduet_overlay .text {
      padding-top: 10px;
      font-size: 15px; }
      .slimduet_overlay .text a {
        margin-top: 0; } }

@media screen and (max-width: 450px) {
  .ticket_wrap.complete .group:after {
    background-position: 10% center;
    background-size: auto 50%; }
  .ticket_wrap.complete .group .text {
    padding-left: 38%; } }

@media screen and (max-width: 400px) {
  .form label input[type=text] {
    width: 170px; } }

@media screen and (max-width: 380px) {
  .ticket_wrap.complete .group:after {
    background: none; }
  .ticket_wrap.complete .group .text {
    padding: 0 20px; } }

/* speaker.css ==============================================*/
.speaker .info_wrap {
  padding-top: 0px; }

.speaker .slider_wrap {
  width: 100%;
  margin-bottom: 80px;
  overflow: hidden; }
  .speaker .slider_wrap.single .slider .item {
    width: 100%;
    padding: 0; }
    .speaker .slider_wrap.single .slider .item .text {
      left: 40px; }
  .speaker .slider_wrap.single .slider_btn_wrap {
    display: none; }
  .speaker .slider_wrap.slider_on .base_wrap {
    width: 150vw;
    max-width: none;
    -webkit-transform: translateX(-25vw);
    -ms-transform: translateX(-25vw);
    transform: translateX(-25vw);
    overflow: visible; }
  .speaker .slider_wrap .base_wrap {
    width: 94%;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden; }
  .speaker .slider_wrap .slider {
    position: relative;
    z-index: 0;
    width: 100%;
    overflow: hidden; }
    .speaker .slider_wrap .slider .item {
      position: relative;
      float: left;
      width: 50vw;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .speaker .slider_wrap .slider .item.black .text {
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); }
      .speaker .slider_wrap .slider .item .pic, .speaker .slider_wrap .slider .item .text {
        position: relative;
        z-index: 0; }
      .speaker .slider_wrap .slider .item .pic {
        display: block;
        position: relative;
        width: 100%;
        padding: 8px;
        cursor: pointer;
        overflow: hidden;
        -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
        background: -webkit-linear-gradient(left, #97d3f3, #008acc);
        background: -o-linear-gradient(left, #97d3f3, #008acc);
        background: linear-gradient(to right, #97d3f3, #008acc); }
        .speaker .slider_wrap .slider .item .pic:before, .speaker .slider_wrap .slider .item .pic:after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          height: 100%; }
        .speaker .slider_wrap .slider .item .pic:before {
          left: 0;
          z-index: 1;
          opacity: 0;
          width: 100%;
          background: -webkit-gradient(linear, left bottom, left top, from(#97d3f3), to(#008acc));
          background: -webkit-linear-gradient(bottom, #97d3f3, #008acc);
          background: -o-linear-gradient(bottom, #97d3f3, #008acc);
          background: linear-gradient(to top, #97d3f3, #008acc);
          -webkit-transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
          transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
          -o-transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
          transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
          transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s, -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s; }
        .speaker .slider_wrap .slider .item .pic:after {
          opacity: .3;
          z-index: 2;
          width: 200%;
          background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
          background: -webkit-linear-gradient(left, #97d3f3, #008acc);
          background: -o-linear-gradient(left, #97d3f3, #008acc);
          background: linear-gradient(to right, #97d3f3, #008acc);
          -webkit-transform: translateX(-100%);
          -ms-transform: translateX(-100%);
          transform: translateX(-100%);
          -webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
          -o-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .speaker .slider_wrap .slider .item .pic:hover:before {
          opacity: .3;
          -webkit-transform: translateX(100%);
          -ms-transform: translateX(100%);
          transform: translateX(100%); }
        .speaker .slider_wrap .slider .item .pic:hover:after {
          -webkit-transform: translateX(50%);
          -ms-transform: translateX(50%);
          transform: translateX(50%); }
      .speaker .slider_wrap .slider .item .text {
        position: absolute;
        left: 40px;
        bottom: 20px;
        width: 100%;
        max-width: 40%;
        text-align: left;
        color: #fff; }
        .speaker .slider_wrap .slider .item .text h3 {
          margin-bottom: 10px;
          font-size: 28px;
          font-weight: normal; }
        .speaker .slider_wrap .slider .item .text h4 {
          margin-bottom: 10px;
          font-size: 18px;
          font-weight: normal; }
      .speaker .slider_wrap .slider .item .more {
        position: absolute;
        right: 50px;
        bottom: 40px;
        padding: 7px 25px 10px 25px;
        font-size: 20px;
        color: #fff;
        -webkit-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
        background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
        background: -webkit-linear-gradient(left, #97d3f3, #008acc);
        background: -o-linear-gradient(left, #97d3f3, #008acc);
        background: linear-gradient(to right, #97d3f3, #008acc); }
        .speaker .slider_wrap .slider .item .more:hover {
          padding-right: 55px; }

.speaker .slider_btn_wrap {
  display: block; }
  .speaker .slider_btn_wrap a:before, .speaker .slider_btn_wrap a:after {
    background: #fff; }

.speaker_detail {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto 40px auto; }
  .speaker_detail .main {
    margin-bottom: 120px;
    padding: 50px;
    background: rgba(0, 0, 0, 0.3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  .speaker_detail .pic {
    position: relative;
    float: left;
    width: 50%;
    padding: 0 0 20px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .speaker_detail .pic .cover_bg {
      position: relative;
      padding-bottom: 66.6%; }
    .speaker_detail .pic:before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: calc( 100% - 20px);
      height: calc( 100% - 20px);
      background: -webkit-gradient(linear, left bottom, left top, from(#97d3f3), to(#008acc));
      background: -webkit-linear-gradient(bottom, #97d3f3, #008acc);
      background: -o-linear-gradient(bottom, #97d3f3, #008acc);
      background: linear-gradient(to top, #97d3f3, #008acc); }
  .speaker_detail .text {
    float: right;
    width: 45%;
    color: #fff; }
    .speaker_detail .text h2 {
      margin-bottom: 20px;
      line-height: 1.5em;
      font-size: 22px;
      color: #97d3f3; }
    .speaker_detail .text h1 {
      margin-bottom: 30px;
      font-weight: normal;
      font-size: 45px; }
      .speaker_detail .text h1 span {
        display: block;
        font-size: 30px; }
    .speaker_detail .text h3 {
      line-height: 1.5em;
      font-weight: normal;
      font-size: 20px;
      margin-bottom: 30px; }
    .speaker_detail .text .word {
      margin-bottom: 50px; }
    .speaker_detail .text p {
      margin-bottom: 20px;
      font-size: 16px;
      color: #ccc; }
    .speaker_detail .text .more {
      display: inline-block;
      padding: 10px 20px;
      background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
      background: -webkit-linear-gradient(left, #97d3f3, #008acc);
      background: -o-linear-gradient(left, #97d3f3, #008acc);
      background: linear-gradient(to right, #97d3f3, #008acc);
      color: #fff;
      font-size: 16px;
      -webkit-transition: 0.3s ease;
      -o-transition: 0.3s ease;
      transition: 0.3s ease; }
      .speaker_detail .text .more:hover {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px); }
  .speaker_detail .edit_wrap {
    max-width: 1000px;
    margin: 0 auto; }
  .speaker_detail .video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; }
    .speaker_detail .video iframe {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%; }

@media screen and (max-width: 1200px) {
  .speaker .slider_btn_wrap {
    position: absolute;
    width: 94%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .speaker_detail {
    width: 94%; }
    .speaker_detail .main {
      padding: 0;
      background: none; } }

@media screen and (max-width: 850px) {
  .speaker_detail {
    width: 94%; }
    .speaker_detail .pic, .speaker_detail .text {
      float: none;
      width: 100%; }
    .speaker_detail .pic {
      max-width: 500px;
      margin: 0 auto 30px auto; }
    .speaker_detail .text {
      max-width: 600px;
      margin: 0 auto; }
    .speaker_detail .btn_wrap {
      text-align: center; } }

@media screen and (max-width: 640px) {
  .speaker .info_wrap {
    padding: 0; }
  .speaker .slider_wrap.slider_on .base_wrap {
    width: 94%;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  .speaker .slider_wrap .slider .item {
    width: 100%;
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    text-align: center; }
    .speaker .slider_wrap .slider .item:last-child {
      padding-bottom: 0;
      margin-bottom: 0;
      border: none; }
    .speaker .slider_wrap .slider .item .pic {
      margin-bottom: 10px; }
    .speaker .slider_wrap .slider .item .text {
      position: relative;
      left: 0 !important;
      top: 0;
      max-width: none; }
      .speaker .slider_wrap .slider .item .text h3 {
        margin-bottom: 5px;
        font-size: 20px; }
      .speaker .slider_wrap .slider .item .text h4 {
        font-size: 15px; }
    .speaker .slider_wrap .slider .item .more {
      display: inline-block;
      position: relative;
      right: 0;
      bottom: 0;
      margin: 20px auto;
      padding: 5px 20px; }
  .speaker .slider_btn_wrap {
    display: none; } }

/* event.css ==============================================*/
.event_qa .head {
  margin-bottom: 50px; }
  .event_qa .head h1 {
    margin-bottom: 15px;
    color: #97d3f3; }
  .event_qa .head h2 {
    margin-bottom: 20px;
    color: #97d3f3;
    text-align: center; }
  .event_qa .head h3 {
    line-height: 1.5em;
    font-size: 22px;
    font-weight: normal; }

.qa_wrap {
  max-width: 1000px;
  margin: 0 auto 50px auto; }
  .qa_wrap .group {
    margin-bottom: 40px; }
  .qa_wrap .item {
    position: relative;
    width: 100%;
    padding: 0 200px 10px 0;
    margin-bottom: 15px;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    font-size: 16px; }
    .qa_wrap .item.correct .ans {
      color: #999; }
    .qa_wrap .item.wrong .ans {
      color: #FF6263; }
      .qa_wrap .item.wrong .ans .icon {
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        top: -3px; }
        .qa_wrap .item.wrong .ans .icon:before, .qa_wrap .item.wrong .ans .icon:after {
          content: "";
          display: block;
          left: 50%;
          top: 50%;
          width: 100%;
          height: 4px;
          background: #FF6263; }
        .qa_wrap .item.wrong .ans .icon:before {
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg); }
        .qa_wrap .item.wrong .ans .icon:after {
          -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg); }
    .qa_wrap .item .que, .qa_wrap .item .ans {
      position: relative;
      padding-left: 50px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
    .qa_wrap .item .que {
      margin-bottom: 10px; }
      .qa_wrap .item .que i {
        position: absolute;
        left: 0;
        top: -1px;
        font-weight: bold;
        font-size: 36px;
        color: #97d3f3; }
    .qa_wrap .item .ans {
      height: 0;
      line-height: 1.6em;
      font-size: 15px;
      overflow: hidden;
      -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      -o-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
      .qa_wrap .item .ans .icon {
        position: absolute;
        left: 0;
        width: 25px;
        height: 25px; }
        .qa_wrap .item .ans .icon:before, .qa_wrap .item .ans .icon:after {
          display: block;
          position: absolute; }
    .qa_wrap .item .btn_wrap {
      position: absolute;
      right: 0;
      top: 0; }
      .qa_wrap .item .btn_wrap a {
        display: inline-block;
        line-height: 23px;
        width: 65px;
        height: 25px;
        color: #fff;
        border-radius: 15px;
        vertical-align: middle;
        background: #999;
        cursor: pointer;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
        .qa_wrap .item .btn_wrap a:hover {
          background: #666; }
        .qa_wrap .item .btn_wrap a.on {
          background: #97d3f3; }
        .qa_wrap .item .btn_wrap a.correct_btn {
          margin-right: 15px; }
          .qa_wrap .item .btn_wrap a.correct_btn i {
            border-radius: 50%;
            border: 1px solid #fff; }
        .qa_wrap .item .btn_wrap a.wrong_btn i {
          width: 15px;
          height: 15px;
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%); }
          .qa_wrap .item .btn_wrap a.wrong_btn i:before, .qa_wrap .item .btn_wrap a.wrong_btn i:after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100%;
            height: 2px;
            background: #fff; }
          .qa_wrap .item .btn_wrap a.wrong_btn i:before {
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg); }
          .qa_wrap .item .btn_wrap a.wrong_btn i:after {
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg); }
        .qa_wrap .item .btn_wrap a i, .qa_wrap .item .btn_wrap a span {
          display: inline-block;
          margin: 0 3px; }
        .qa_wrap .item .btn_wrap a i {
          position: relative;
          width: 10px;
          height: 10px; }
  .qa_wrap > .btn_wrap {
    text-align: center; }
  .qa_wrap .qa_send {
    display: inline-block;
    padding: 5px 20px;
    color: #fff;
    border-radius: 3px;
    font-size: 18px;
    cursor: pointer;
    background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
    background: -webkit-linear-gradient(left, #97d3f3, #008acc);
    background: -o-linear-gradient(left, #97d3f3, #008acc);
    background: linear-gradient(to right, #97d3f3, #008acc); }
    .qa_wrap .qa_send:hover {
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1); }
    .qa_wrap .qa_send.hide {
      opacity: 0;
      visibility: hidden; }

.qa_result {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease; }
  .qa_result.trans {
    opacity: 1;
    visibility: visible; }

.result {
  padding-top: 50px;
  padding-bottom: 80px; }
  .result .item {
    display: none;
    position: relative;
    width: 100%;
    padding-top: 80px; }
    .result .item.trans {
      display: block; }
    .result .item.item_1 h3 {
      color: #97d3f3; }
    .result .item.item_2 h3 {
      color: #6b85c0; }
    .result .item.item_3 h3 {
      color: #008acc; }
    .result .item .pic, .result .item img {
      position: absolute;
      left: 5%;
      top: 0;
      width: 35%;
      height: 90%; }
      .result .item .pic .contain_bg, .result .item img .contain_bg {
        height: 100%;
        padding-bottom: 0; }
    .result .item .box {
      padding: 40px 0 60px 45%;
      border: 1px solid #fff;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
    .result .item .text {
      color: #fff; }
      .result .item .text h3 {
        margin-bottom: 10px;
        font-size: 36px;
        line-height: 1.2em; }
      .result .item .text p {
        margin-bottom: 20px;
        font-size: 18px; }
      .result .item .text a {
        display: inline-block;
        padding: 5px 15px;
        color: #fff;
        border-radius: 3px;
        font-size: 16px;
        cursor: pointer;
        background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
        background: -webkit-linear-gradient(left, #97d3f3, #008acc);
        background: -o-linear-gradient(left, #97d3f3, #008acc);
        background: linear-gradient(to right, #97d3f3, #008acc); }
        .result .item .text a:hover {
          -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
          transform: scale(1.1); }

.hide_wrap {
  display: none; }
  .hide_wrap.trans {
    display: block; }

.lottery {
  margin-bottom: 80px; }
  .lottery .group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .lottery .left, .lottery .right {
    float: left;
    width: 48%;
    padding: 15px;
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .lottery .left h3, .lottery .right h3 {
      text-align: center;
      font-size: 30px;
      font-weight: normal;
      margin-bottom: 20px; }
      .lottery .left h3 span, .lottery .right h3 span {
        display: inline-block;
        padding-bottom: 7px;
        border-bottom: 2px solid #fff; }
    .lottery .left p, .lottery .right p {
      text-align: center;
      line-height: 1.8em;
      font-size: 17px; }
  .lottery .award {
    margin-bottom: 100px; }
    .lottery .award h2 {
      margin-bottom: 40px; }
    .lottery .award h3 {
      margin-bottom: 30px; }
    .lottery .award p {
      font-size: 20px;
      line-height: 1.8em;
      margin-bottom: 10px; }
      .lottery .award p span {
        margin-left: 15px; }
  .lottery .left {
    margin-right: 4%;
    background: #008acc; }
  .lottery .right {
    background: #97d3f3; }
    .lottery .right .overlay_item {
      margin: 0 5px;
      padding-bottom: 2px;
      line-height: 1em;
      cursor: pointer;
      color: #fff;
      border-bottom: 1px solid #fff; }
      .lottery .right .overlay_item:hover {
        color: #FF6263;
        border-color: #FF6263; }
  .lottery .box {
    position: relative;
    width: 100%;
    min-height: 100%;
    border: 1px solid #fff;
    padding: 20px 40px 100px 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  .lottery .form .item {
    position: relative;
    padding-left: 105px;
    padding-right: 130px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 15px;
    border: none;
    background: #fff;
    border-radius: 5px;
    color: #333;
    overflow: hidden; }
    .lottery .form .item i {
      position: absolute;
      left: 10px;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      line-height: 1em;
      font-style: normal;
      font-size: 18px; }
  .lottery .form input {
    width: 100%;
    height: 45px;
    border: none; }
  .lottery .form a {
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-bottom: 4px;
    line-height: 1em;
    cursor: pointer;
    border-bottom: 1px solid #999; }
    .lottery .form a:hover {
      color: #97d3f3;
      border-color: #97d3f3; }
  .lottery .btn_wrap {
    position: absolute;
    left: 0;
    bottom: 40px;
    width: 100%;
    text-align: center; }
    .lottery .btn_wrap a {
      display: inline-block;
      position: relative;
      cursor: pointer;
      color: #fff; }
      .lottery .btn_wrap a span {
        display: inline-block;
        position: relative;
        z-index: 1;
        width: 100px;
        padding: 5px 30px;
        border-radius: 5px;
        font-size: 18px;
        -webkit-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease; }
      .lottery .btn_wrap a:before {
        content: "";
        display: block;
        position: absolute;
        left: 6px;
        top: 6px;
        z-index: 0;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        background: #fff; }
      .lottery .btn_wrap a.send span {
        background: #97d3f3; }
      .lottery .btn_wrap a.link span {
        background: #008acc; }
      .lottery .btn_wrap a:hover {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1); }

.lottery_info {
  max-width: 900px;
  margin: 0 auto;
  color: #fff; }
  .lottery_info .box {
    margin-bottom: 25px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  .lottery_info h4 {
    margin-bottom: 5px;
    font-size: 18px;
    color: #008acc; }
  .lottery_info p, .lottery_info ol {
    padding-left: 20px; }
  .lottery_info .focus {
    color: #FF6263; }

.lottery_number h3 {
  margin-bottom: 20px;
  font-size: 24px;
  text-align: center;
  color: #fff;
  font-weight: normal; }

.lottery_number.overlay_box .overlay_close_btn {
  right: -50px;
  top: -5px; }
  .lottery_number.overlay_box .overlay_close_btn:before, .lottery_number.overlay_box .overlay_close_btn:after {
    background: #fff; }

@media screen and (max-width: 1040px) {
  .result {
    padding-top: 50px;
    padding-bottom: 80px; }
    .result .item {
      padding-top: 0; }
      .result .item .box {
        padding-left: 30%; }
      .result .item .pic {
        width: 20%; } }

@media screen and (max-width: 800px) {
  .result .item .text {
    padding-right: 20px; }
    .result .item .text h3 {
      font-size: 30px; }
  .lottery .group {
    display: block; }
  .lottery .left, .lottery .right {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px; } }

@media screen and (max-width: 720px) {
  .qa_wrap .item {
    min-height: 75px;
    font-size: 15px;
    padding-right: 0; }
    .qa_wrap .item .que {
      margin-bottom: 10px;
      padding-left: 30px;
      line-height: 1.5em; }
      .qa_wrap .item .que i {
        font-size: 26px; }
    .qa_wrap .item .ans {
      padding-left: 30px;
      margin-bottom: 10px; }
    .qa_wrap .item .btn_wrap {
      position: relative;
      margin-left: 30px; } }

@media screen and (max-width: 640px) {
  .result .item .box {
    padding: 20px;
    text-align: center; }
  .result .item .pic {
    display: inline-block;
    position: relative;
    left: auto;
    width: 100%;
    max-width: 250px;
    margin: 0 auto 20px auto; }
    .result .item .pic .contain_bg {
      padding-bottom: 60%; }
  .result .item .text {
    padding-right: 0;
    padding-bottom: 20px; } }

/* point.css ==============================================*/
.point_overlay {
  width: 94%;
  max-width: 900px;
  background: #fff;
  padding: 50px;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .point_overlay .head {
    color: #333; }
    .point_overlay .head h2 {
      line-height: 1.5em;
      color: #97d3f3;
      margin-bottom: 25px; }
    .point_overlay .head p {
      line-height: 1.7em;
      font-size: 18px;
      margin: 0 auto; }
    .point_overlay .head h3 {
      color: #FF6263;
      font-size: 20px;
      margin-top: 20px; }
  .point_overlay .point_icon {
    width: 90%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto 60px auto; }
  .point_overlay .btn_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    text-align: center; }
    .point_overlay .btn_wrap a {
      display: inline-block;
      width: 50%;
      max-width: 200px;
      margin: 0 20px;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 18px;
      cursor: pointer; }
      .point_overlay .btn_wrap a.gray {
        color: #fff;
        background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
        background: -webkit-linear-gradient(left, #97d3f3, #008acc);
        background: -o-linear-gradient(left, #97d3f3, #008acc);
        background: linear-gradient(to right, #97d3f3, #008acc); }
      .point_overlay .btn_wrap a.send {
        color: #fff;
        background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
        background: -webkit-linear-gradient(left, #97d3f3, #008acc);
        background: -o-linear-gradient(left, #97d3f3, #008acc);
        background: linear-gradient(to right, #97d3f3, #008acc); }
      .point_overlay .btn_wrap a.disable {
        opacity: .3;
        cursor: default; }
        .point_overlay .btn_wrap a.disable:hover {
          -webkit-transform: scale(1);
          -ms-transform: scale(1);
          transform: scale(1); }
      .point_overlay .btn_wrap a:hover {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1); }

.point_icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .point_icon.all .item {
    width: calc( 79% / 8); }
  .point_icon .item {
    float: left;
    width: calc( 82% / 7);
    margin-right: 3%; }
    .point_icon .item:last-child {
      margin-right: 0; }
    .point_icon .item.not.item_hotel div {
        background-image: url("../Images_t/index/point_hotel_line.png");
    }
    .point_icon .item.not.item_restaurant div {
        background-image: url("../Images_t/index/point_restaurant_line.png");
    }
    .point_icon .item.not.item_home div {
        background-image: url("../Images_t/index/point_home_line.png");
    }
    .point_icon .item.not.item_shop div {
        background-image: url("../Images_t/index/point_shop_line.png");
    }
    .point_icon .item.not.item_bank div {
        background-image: url("../Images_t/index/point_bank_line.png");
    }
    .point_icon .item.not.item_factory div {
        background-image: url("../Images_t/index/point_factory_line.png");
    }
    .point_icon .item.not.item_traffic div {
        background-image: url("../Images_t/index/point_traffic_line.png");
    }
    .point_icon .item.not.item_special div {
        background-image: url("../Images_t/index/point_special_line.png");
    }
    .point_icon .item.item_hotel div {
        background-image: url("../Images_t/index/point_hotel.png");
    }
    .point_icon .item.item_restaurant div {
        background-image: url("../Images_t/index/point_restaurant.png");
    }
    .point_icon .item.item_home div {
        background-image: url("../Images_t/index/point_home.png");
    }
    .point_icon .item.item_shop div {
        background-image: url("../Images_t/index/point_shop.png");
    }
    .point_icon .item.item_bank div {
        background-image: url("../Images_t/index/point_bank.png");
    }
    .point_icon .item.item_factory div {
        background-image: url("../Images_t/index/point_factory.png");
    }
    .point_icon .item.item_traffic div {
        background-image: url("../Images_t/index/point_traffic.png");
    }
    .point_icon .item div {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%; }

.point {
  position: absolute;
  left: 50%;
  top: 20px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  cursor: pointer; }
  .point:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    -webkit-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    width: 170%;
    height: 170%;
    border-radius: 50%;
    background: #fff;
    -webkit-animation: pointAni 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: pointAni 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; }
  .point:hover img {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9); }
  .point img {
    display: none;
    position: relative;
    z-index: 1;
    width: 70px;
    -webkit-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
    .point img.trans {
      display: block; }

@-webkit-keyframes pointAni {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0); }
  50% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1); }
  100% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1); } }

@keyframes pointAni {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0); }
  50% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1); }
  100% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1); } }

.point_head h2 {
  margin-bottom: 10px;
  color: #97d3f3; }

.point_wrap {
  width: 100%;
  max-width: 1000px;
  padding: 30px 40px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(13, 15, 42, 0.8);
  color: #fff;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0); }
  .point_wrap .main_box .box {
    margin-bottom: 30px; }
  .point_wrap .box {
    margin-bottom: 15px; }
  .point_wrap h3 {
    color: #008acc; }
  .point_wrap h4 {
    margin-bottom: 20px;
    font-size: 18px;
    color: #008acc; }
  .point_wrap h5 {
    margin-bottom: 5px;
    font-size: 18px;
    color: #008acc; }
    .point_wrap h5 span {
      color: #fff; }
  .point_wrap a {
    cursor: pointer; }
    .point_wrap a:hover {
      color: #FF6263; }
  .point_wrap .point_icon {
    width: 100%; }
    .point_wrap .point_icon .item {
      width: calc( 78% / 7);
      margin-right: 4%; }
      .point_wrap .point_icon .item:last-child {
        margin-right: 0; }
  .point_wrap .gift {
    padding: 20px;
    margin-bottom: 40px;
    text-align: center;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .point_wrap .gift.gift_1 .award {
      padding-top: 20px; }
    .point_wrap .gift.gift_2 .pic, .point_wrap .gift.gift_2 .award {
      display: inline-block;
      margin: 0 20px; }
    .point_wrap .gift.gift_2 .pic {
      max-width: 180px;
      margin-bottom: 15px; }
    .point_wrap .gift.gift_2 .award {
      text-align: left; }
    .point_wrap .gift p {
      margin-bottom: 25px;
      font-size: 18px; }
    .point_wrap .gift .pic {
      display: inline-block;
      margin: 0 10px;
      max-width: 280px;
      padding: 5px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
      background: -webkit-linear-gradient(left, #97d3f3, #008acc);
      background: -o-linear-gradient(left, #97d3f3, #008acc);
      background: linear-gradient(to right, #97d3f3, #008acc); }
      .point_wrap .gift .pic img {
        width: 100%; }
    .point_wrap .gift .award {
      max-width: 330px;
      margin: 0 auto;
      padding: 15px 0; }
      .point_wrap .gift .award h4 {
        font-size: 24px;
        color: #fcff00; }
      .point_wrap .gift .award p {
        display: block;
        position: relative;
        width: 100%;
        margin-bottom: 12px;
        font-size: 16px;
        word-break: break-all;
        line-height: 1.4em; }
        .point_wrap .gift .award p span {
          margin-right: 20px; }

.point_overlay_box {
  margin-bottom: 60px;
  text-align: center; }
  .point_overlay_box.trans {
    display: block; }
  .point_overlay_box img {
    margin: 0 auto 20px auto; }
  .point_overlay_box h2 {
    color: #97d3f3;
    margin-bottom: 20px; }
  .point_overlay_box p {
    max-width: 600px;
    margin: 0 auto 20px auto; }
  .point_overlay_box a {
    display: inline-block;
    padding: 7px 15px;
    font-size: 18px;
    border: 1px solid #FF6263;
    background: #eee; }
    .point_overlay_box a:hover {
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1); }

.point_more {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 20px 7px 20px;
  font-size: 18px;
  background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
  background: -webkit-linear-gradient(left, #97d3f3, #008acc);
  background: -o-linear-gradient(left, #97d3f3, #008acc);
  background: linear-gradient(to right, #97d3f3, #008acc);
  color: #fff;
  border-radius: 7px 2px 2px 2px; }
  .point_more:hover {
    opacity: .9;
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95); }

.point_overlay_collection p {
  line-height: 1.7em;
  font-size: 20px; }

.point_overlay_collection h4 {
  font-size: 18px;
  font-weight: normal; }

.point_overlay_collection .name {
  color: #008acc; }

.point_overlay_collection .count {
  color: #FF6263;
  font-size: 30px; }

.point_overlay_collection .point_icon {
  margin-bottom: 40px;
  padding-top: 20px; }
  .point_overlay_collection .point_icon .item {
    position: relative; }
    .point_overlay_collection .point_icon .item.not:before {
      display: none; }
    .point_overlay_collection .point_icon .item:before {
        content: "";
        display: block;
        position: absolute;
        left: 2px;
        top: -4px;
        width: 100%;
        height: 25px;
        background: url("../Images_t/icon/icon_check.svg") no-repeat center center;
        background-size: auto 100%;
    }

.point_overlay_award .form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto; }
  .point_overlay_award .form input {
    width: 100%;
    margin-bottom: 15px;
    height: 45px;
    border: 3px solid #008acc;
    font-size: 18px;
    color: #97d3f3; }
    .point_overlay_award .form input::-webkit-input-placeholder {
      color: #97d3f3;
      font-size: 18px; }
    .point_overlay_award .form input:-moz-placeholder {
      color: #97d3f3;
      font-size: 18px; }
    .point_overlay_award .form input::-moz-placeholder {
      color: #97d3f3;
      font-size: 18px; }
    .point_overlay_award .form input:-ms-input-placeholder {
      color: #97d3f3;
      font-size: 18px; }

@media screen and (max-width: 780px) {
  .point_overlay {
    padding: 20px;
    padding-top: 60px;
    padding-bottom: 40px; }
    .point_overlay .head {
      margin-bottom: 25px; }
      .point_overlay .head h2 {
        margin-bottom: 20px; }
      .point_overlay .head p br {
        display: none; }
    .point_overlay .btn_wrap a {
      margin: 0 10px; }
  .point_icon {
    width: 100%;
    margin-bottom: 40px; }
  .point_wrap {
    padding: 0;
    background: none; }
    .point_wrap .point_icon .item {
      width: 20%;
      margin: 0 2%; } }

@media screen and (max-width: 700px) {
  .point_wrap .gift .pic {
    max-width: 240px; } }

@media screen and (max-width: 600px) {
  .point_wrap .gift .pic {
    max-width: 200px; }
  .point_wrap .gift.gift_2 .pic {
    max-width: 140px; }
  .point_wrap .gift .award {
    display: block; } }

@media screen and (max-width: 550px) {
  .point_icon {
    display: block;
    width: 100%;
    margin-bottom: 40px; }
    .point_icon .item {
      display: inline-block;
      float: none;
      width: 20%;
      margin: 0 2%; }
  .point_overlay .btn_wrap a {
    padding: 10px 0; } }

@media screen and (max-width: 480px) {
  .point_wrap .gift .pic {
    margin-right: 0; }
  .point_wrap .gift.gift_2 .pic, .point_wrap .gift.gift_2 .award {
    margin: 0; }
  .point_wrap .gift .award h4 {
    text-align: center; }
  .point_wrap .gift .award p {
    font-size: 14px; }
  .point_overlay .btn_wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .point_overlay .btn_wrap a {
      width: 100%;
      margin-bottom: 10px;
      max-width: none; } }

/* zone.css ==============================================*/
.zone_head h2 {
  margin-bottom: 20px;
  color: #97d3f3; }
  .zone_head h2 span {
    color: #008acc; }

.zone_head p {
  font-size: 18px;
  line-height: 1.8em; }

.zone_head a {
  margin: 0 5px;
  color: #008acc;
  border-bottom: 1px solid #008acc; }
  .zone_head a:hover {
    color: #FF6263;
    border-color: #FF6263; }

.zone_wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 30px;
  color: #fff;
  font-size: 18px;
  line-height: 1.8em; }
  .zone_wrap .box {
    padding-bottom: 40px;
    margin-bottom: 60px;
    border-bottom: 1px dotted #fff; }
    .zone_wrap .box:last-child {
      border: none;
      padding-bottom: 0; }
  .zone_wrap .gift {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .zone_wrap .gift .pic {
      float: left;
      width: 30%; }
      .zone_wrap .gift .pic img {
        width: 100%; }
    .zone_wrap .gift .text {
      float: right;
      width: 70%;
      padding-left: 50px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .zone_wrap .gift .text h3 {
        margin-bottom: 15px;
        color: #008acc;
        font-size: 26px; }
  .zone_wrap .map {
    text-align: center; }
    .zone_wrap .map h3 {
      display: inline-block;
      text-align: center;
      padding: 5px 50px;
      margin: 0 auto 50px auto;
      font-size: 26px;
      font-weight: normal;
      background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
      background: -webkit-linear-gradient(left, #97d3f3, #008acc);
      background: -o-linear-gradient(left, #97d3f3, #008acc);
      background: linear-gradient(to right, #97d3f3, #008acc);
      border-radius: 3px; }
    .zone_wrap .map img {
      max-width: 100%;
      margin-bottom: 40px; }
    .zone_wrap .map h4 {
      margin-bottom: 20px;
      color: #008acc;
      font-size: 26px; }
  .zone_wrap .pavilion .group {
    max-width: 670px;
    margin: 0 auto; }
  .zone_wrap .pavilion .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 40px; }
    .zone_wrap .pavilion .item.green h3 {
      color: #0ba85d; }
    .zone_wrap .pavilion .item.green .hex {
      background: #0ba85d; }
      .zone_wrap .pavilion .item.green .hex:before {
        border-color: transparent #0ba85d transparent transparent; }
      .zone_wrap .pavilion .item.green .hex:after {
        border-color: transparent transparent transparent #0ba85d; }
    .zone_wrap .pavilion .item.pink h3 {
      color: #FF6263; }
    .zone_wrap .pavilion .item.pink .hex {
      background: #FF6263; }
      .zone_wrap .pavilion .item.pink .hex:before {
        border-color: transparent #FF6263 transparent transparent; }
      .zone_wrap .pavilion .item.pink .hex:after {
        border-color: transparent transparent transparent #FF6263; }
    .zone_wrap .pavilion .item.purple h3 {
      color: #008acc; }
    .zone_wrap .pavilion .item.purple .hex {
      background: #008acc; }
      .zone_wrap .pavilion .item.purple .hex:before {
        border-color: transparent #008acc transparent transparent; }
      .zone_wrap .pavilion .item.purple .hex:after {
        border-color: transparent transparent transparent #008acc; }
    .zone_wrap .pavilion .item.blue h3 {
      color: #97d3f3; }
    .zone_wrap .pavilion .item.blue .hex {
      background: #97d3f3; }
      .zone_wrap .pavilion .item.blue .hex:before {
        border-color: transparent #97d3f3 transparent transparent; }
      .zone_wrap .pavilion .item.blue .hex:after {
        border-color: transparent transparent transparent #97d3f3; }
    .zone_wrap .pavilion .item.orange h3 {
      color: #f6921e; }
    .zone_wrap .pavilion .item.orange .hex {
      background: #f6921e; }
      .zone_wrap .pavilion .item.orange .hex:before {
        border-color: transparent #f6921e transparent transparent; }
      .zone_wrap .pavilion .item.orange .hex:after {
        border-color: transparent transparent transparent #f6921e; }
    .zone_wrap .pavilion .item .hex {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      position: relative;
      width: 60px;
      -webkit-box-flex: 0;
      -ms-flex: 0 0 60px;
      flex: 0 0 60px;
      height: 100px;
      margin-left: 30px; }
      .zone_wrap .pavilion .item .hex:before, .zone_wrap .pavilion .item .hex:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        width: 0;
        height: 0;
        border-style: solid; }
      .zone_wrap .pavilion .item .hex:before {
        left: 0;
        border-width: 50px 30px 50px 0;
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%); }
      .zone_wrap .pavilion .item .hex:after {
        right: 0;
        border-width: 50px 0 50px 30px;
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%); }
      .zone_wrap .pavilion .item .hex p {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        -webkit-transform: translate(-50%, -55%);
        -ms-transform: translate(-50%, -55%);
        transform: translate(-50%, -55%);
        width: 120px;
        line-height: 1.3em;
        font-size: 22px;
        text-align: center; }
    .zone_wrap .pavilion .item .text {
      padding-left: 60px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .zone_wrap .pavilion .item .text h3 {
        margin-bottom: 12px; }
      .zone_wrap .pavilion .item .text p {
        line-height: 1.5em; }
  .zone_wrap .info h3 {
    margin-bottom: 20px;
    text-align: center;
    color: #97d3f3; }
  .zone_wrap .info ol {
    margin-bottom: 30px; }
  .zone_wrap .info .qr {
    text-align: center;
    margin: 0 auto; }
    .zone_wrap .info .qr img {
      display: inline-block;
      width: 120px; }

@media screen and (max-width: 720px) {
  .zone_wrap {
    font-size: 16px; }
    .zone_wrap .box {
      padding-bottom: 30px;
      margin-bottom: 40px; }
    .zone_wrap .gift .text {
      padding-left: 30px; }
      .zone_wrap .gift .text h3 {
        margin-bottom: 10px;
        font-size: 20px; }
    .zone_wrap .map h3 {
      padding-left: 30px;
      padding-right: 30px;
      margin-bottom: 40px;
      font-size: 22px; }
    .zone_wrap .map h4 {
      margin-bottom: 15px; }
    .zone_wrap .pavilion .item {
      margin-bottom: 30px; } }

@media screen and (max-width: 550px) {
  .zone_wrap {
    padding-top: 0; }
    .zone_wrap .gift {
      display: block;
      text-align: center; }
      .zone_wrap .gift .pic, .zone_wrap .gift .text {
        float: none;
        width: 100%; }
      .zone_wrap .gift .pic {
        margin-bottom: 10px; }
        .zone_wrap .gift .pic img {
          display: inline-block;
          max-width: 350px; }
      .zone_wrap .gift .text {
        padding-left: 0; } }

@media screen and (max-width: 480px) {
  .zone_wrap .pavilion .item .hex {
    width: 50px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50px;
    flex: 0 0 50px; }
    .zone_wrap .pavilion .item .hex p {
      font-size: 20px; }
  .zone_wrap .pavilion .item .text {
    padding-left: 50px; } }

/* lottery.css ==============================================*/
.lottery_live {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  text-align: center; }
  .lottery_live.lottery_start h3 {
    color: #97d3f3; }
  .lottery_live.lottery_start h2 {
    margin-bottom: 50px;
    color: #008acc; }
  .lottery_live.lottery_start a {
    display: inline-block;
    width: 100%;
    max-width: 400px; }
    .lottery_live.lottery_start a img {
      width: 100%; }
  .lottery_live.lottery_award .pic div img, .lottery_live.lottery_thanks .pic div img {
    height: 80%; }
  .lottery_live.lottery_award h3, .lottery_live.lottery_award h2 {
    color: #008acc; }
  .lottery_live.lottery_award .pic div {
    background: #fff; }
  .lottery_live.lottery_thanks h3, .lottery_live.lottery_thanks h2 {
    color: #97d3f3; }
  .lottery_live.lottery_thanks h3 {
    font-size: 80px; }
  .lottery_live.lottery_thanks h2 {
    padding-left: 0; }
  .lottery_live .group {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%; }
  .lottery_live h3 {
    font-size: 60px; }
  .lottery_live h2 {
    padding-left: 60px;
    font-size: 90px; }
  .lottery_live .pic {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto; }
    .lottery_live .pic div {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      border-radius: 10%; }
    .lottery_live .pic img {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
  .lottery_live .back {
    opacity: .7;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    padding: 10px 30px; }

/* media.css ==============================================*/
@media screen and (max-width: 800px) {
  .mobile {
    display: block; }
  .desktop {
    display: none; } }

/* checkIn.css ==============================================*/
.checkin_wrap {
  position: relative;
  width: 100%;
  height: 100vh; }
  .checkin_wrap .group {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 650px;
    padding-bottom: 90px;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .checkin_wrap .group img {
      width: 100%;
      margin-bottom: 5vh; }
    .checkin_wrap .group h3 {
      margin-bottom: 30px;
      font-size: 30px;
      color: #97d3f3; }
    .checkin_wrap .group .data_table {
      width: 100%;
      margin-bottom: 3vh;
      background: rgba(255, 255, 255, 0.95);
      color: #fff;
      border: 2px solid #FF6263; }
      .checkin_wrap .group .data_table th, .checkin_wrap .group .data_table td {
        width: 20%;
        padding: 8px 5px;
        text-align: center; }
      .checkin_wrap .group .data_table th {
        background: #008acc;
        font-weight: normal; }
      .checkin_wrap .group .data_table td {
        color: #333; }
    .checkin_wrap .group input[type=text] {
      display: block;
      width: 100%;
      max-width: 400px;
      height: 50px;
      line-height: 49px;
      margin: 0 auto 20px auto;
      border: 1px solid #FF6263;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.2);
      color: #fff;
      font-size: 28px;
      text-align: center; }
    .checkin_wrap .group .send, .checkin_wrap .group .plus {
      display: inline-block;
      width: 180px;
      border: none;
      border-radius: 3px;
      color: #fff;
      background: -webkit-gradient(linear, left top, right top, from(#FF6263), to(#008acc));
      background: -webkit-linear-gradient(left, #FF6263, #008acc);
      background: -o-linear-gradient(left, #FF6263, #008acc);
      background: linear-gradient(to right, #FF6263, #008acc); }
    .checkin_wrap .group .send {
      padding: 7px 0;
      font-size: 20px; }
    .checkin_wrap .group .plus {
      position: absolute;
      left: 50%;
      bottom: 0;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      width: 100px;
      background: none;
      border: 1px solid #FF6263;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 18px; }

/* overlay.css ==============================================*/
.overlay_wrap {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
  .overlay_wrap.trans {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
    .overlay_wrap.trans .overlay_content {
      opacity: 1; }
  .overlay_wrap.full > .overlay_close_btn {
    display: block;
    right: 30px;
    width: 50px;
    height: 50px; }
    .overlay_wrap.full > .overlay_close_btn:before, .overlay_wrap.full > .overlay_close_btn:after {
      background: #fff; }
  .overlay_wrap.in_close > .overlay_close_btn {
    display: none; }

.overlay_content {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -o-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s; }

.overlay_bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(#97d3f3), to(#008acc));
    background: -webkit-linear-gradient(left, #97d3f3, #008acc);
    background: -o-linear-gradient(left, #97d3f3, #008acc);
    background: linear-gradient(to right, #97d3f3, #008acc);
    cursor: url(../Images_t/icon/mouse_icon_w.png), auto;
}

.overlay_flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: 20px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.overlay_box {
  display: none;
  position: relative;
  z-index: 1; }
  .overlay_box.trans {
    display: block; }
  .overlay_box .overlay_close_btn {
    top: 10px; }

.overlay_close_btn {
  position: absolute;
  right: 15px;
  top: 8px;
  z-index: 30;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -webkit-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .overlay_close_btn:hover {
    -webkit-transform: rotateZ(180deg) scale(1.2);
    -ms-transform: rotate(180deg) scale(1.2);
    transform: rotateZ(180deg) scale(1.2); }
  .overlay_close_btn:before, .overlay_close_btn:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90%;
    height: 4px;
    background: #97d3f3; }
  .overlay_close_btn:before {
    -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotateZ(45deg); }
  .overlay_close_btn:after {
    -webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotateZ(-45deg); }

.overlay_slider_btn {
  display: block;
  position: fixed;
  top: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease; }
  .overlay_slider_btn:before {
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    width: 40px;
    height: 40px;
    -webkit-transform: rotateZ(45deg);
    -ms-transform: rotate(45deg);
    transform: rotateZ(45deg); }
  .overlay_slider_btn:hover.prev {
    left: 30px; }
  .overlay_slider_btn:hover.next {
    right: 30px; }
  .overlay_slider_btn.prev {
    left: 40px; }
    .overlay_slider_btn.prev:before {
      left: 9px;
      border-bottom: 5px solid #D90000;
      border-left: 5px solid #D90000; }
  .overlay_slider_btn.next {
    right: 40px; }
    .overlay_slider_btn.next:before {
      right: 9px;
      border-top: 5px solid #D90000;
      border-right: 5px solid #D90000; }

.notice_box {
  background: #fff;
  width: 90%;
  max-width: 550px;
  padding: 50px;
  text-align: center;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1.5em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .notice_box .overlay_close_btn {
    right: 10px;
    top: 5px; }
  .notice_box p {
    margin-bottom: 10px; }
    .notice_box p:last-child {
      margin-bottom: 0; }
	  
	  
.students_box1 {
	width:20%; 
	float:left; 
	color:#FFF;
}

.students_box2 {
	width:35%;
	float:left;
	margin-bottom:20px;
}

.students_box2 img{
	width:90%;
	height:auto;
}

.students_box3 {
	width:45%;
	float:left; 
	color:#FFF; 
	font-size:17px;
}




@media screen and (max-width: 600px) {
.students_box1 {
	width:100%; 
	float:left; 
}
    .vote-col {
        width: 100%;
        float: left;
    }

    .students_box2 {
        width: 100%;
        float: left;
    }

.students_box2 img{
	width:90%;
	height:auto;
	margin:0 auto;
}

.students_box3 {
	width:93%;
	float:left;
	margin-top:10px;
	padding-left:5%;
	font-size:15px;
}

.exstudent_text {
	padding-bottom:3px;
	font-size:1em;
}
}


.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
  font-size:22px;
  background-color:#FFF;
}

.pagination a.active {
  background-color: #008acc;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.exstudent_text {
	padding-bottom:5px;
	font-size: 1em;
}

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
position: absolute; 
top: 0;left: 0;
width: 100%;
height: 100%;
}


.col-container {
  width: 100%;
}

.col {
	position: relative;
	width:23%; 
	float:left; 
	padding:20px;
	margin:1%;
}

.col h2 {
	font-size:21px;
	color:#ffee98;
	line-height:40px;
}

.col p{
	font-size:16px;
	color: #FFF;
}

.title_container {
  position: relative;
  text-align: center;
  width:90%;
  max-width:1599px;
  height:auto;
  margin:0 auto;
  border:#F00 1px solid;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.title_center {
    justify-content: center;
    align-items: center;
    background: url(../Images_t/index/title02_bg.png) no-repeat center;
    height: 360px;
}

@media (max-width:980px) {
.col {
	width:48%;
	margin:1%;
}
.line_btn {
  font-size: 15px;
}
}

@media (max-width:530px) {
.col {
	width:98%;
	margin:1%;
}
}


.white_box {
	width:100%; 
	float:left; 
	padding-bottom:50px;
	padding-top:20px;
}

.main_box1 {
	width:100%; 
	margin:0px auto; 
	padding:30px 0px;
	color: #333;
}

.main_box_title {
	width:24.27%; 
	float:left;
	font-family:'微軟正黑體'; 
	font-size:30px;
	text-align:center;
}

.main_box_text {
	width:75.7281%; 
	float:left;
	font-family:'微軟正黑體'; 
	font-size:19px;
	line-height:36px;
	padding-top:20px;
	padding-bottom:10px;
}


.main_box_text a{
	color:#039;
}

.main_box_text a:hover{
	color: #060;
}

@media (min-width:0) and (max-width:860px) {

.main_box_title {
	width:100%; 
	padding:0px 5%;
	margin-bottom:10px;
}

.main_box_text {
	width:100%; 
	padding:15px 5%;
	
}

}


.red_box {
	width:100%; 
	float:left; 
	padding-bottom:50px;
	padding-top:20px;
}

.main_vote_title {
	width:98%; 
	float:left;
	color: #fff;
	font-family:'微軟正黑體'; 
	font-size:30px;
	text-align:center;
	margin-bottom:20px;
	margin-top:40px;
	font-weight:bold;
}

.vote_title {
	display:block; 
	margin:15px 8px 12px 8px; 
	padding:12px; 
	border-bottom:#dadada 1px solid; 
	color:#72a2c0; 
	font-size:17px;
	line-height:24px;
	font-family:'微軟正黑體';
	text-align:center;
	height:80px;
}

.vote-item {
  display: inline-block;
  width: 18%;
  margin-left:2%;
  float:left;
  border: #999 1px solid;
  padding-bottom:20px;
  margin-bottom:30px;
}

.list_title {
	display:block; 
	margin:15px 8px 12px 8px; 
	padding:12px; 
	color:#72a2c0; 
	font-size:17px;
	line-height:24px;
	font-family:'微軟正黑體';
	text-align:center;
}

.list_title2 {
	display:block; 
	margin:15px 8px 12px 8px; 
	padding:12px; 
	color:#333;
	font-size:17px;
	line-height:24px;
	font-family:'微軟正黑體';
	text-align:center;
}


.vote_subtitle {
	display:block; 
	color:#797979;
	font-size:15px; 
	font-family:'微軟正黑體';
	text-align:center;
}

.vote_btn_box {
	display:block; 
	font-family:'微軟正黑體';
	text-align:center;
	margin:25px 8px 2px 8px;
}

.vote_number {
	border:#c6e1fa 1px solid; 
	padding:7px 7px; 
	color: #333; 
	width:30%; 
	margin-right:2%; 
	text-align:center;
}

.btn-vote {
	color: #FFF;
	border: 1px solid #e35255;
	padding:7px 10px 7px 23px;
	width:100%; 
	display: block;
	background:#e35255;
	margin-top:5px;
}
.btn-vote:hover,
.btn-vote:focus,
.btn-vote:active {
	border: 1px solid #ff777a;
	color: #FFF;
	background:#ff777a;
}

.btn-fb {
    color: #FFF;
    border: 1px solid #1d65a6;
    padding: 7px 10px 7px 23px;
    width: 30%;
    display: inline-block;
    background: #1d65a6 url(../Images_t/icon_fb.png) no-repeat 20px 50%;
}
    .btn-fb:hover,
    .btn-fb:focus,
    .btn-fb:active {
        border: 1px solid #719bf0;
        color: #FFF;
        background: #719bf0 url(../Images_t/icon_fb.png) no-repeat 20px 50%;
    }

.vote_btn_box a {
	color: #FFF;
	text-decoration:none;
}


.btn-page {
	border: 1px solid #ba171a;
	color: #FFF;
	background:#ba171a;
	padding:7px 15px;
	text-decoration:none;
	font-weight:normal;
}
.btn-page:hover,
.btn-page:focus,
.btn-page:active {
	border: 1px solid #e35255;
	color: #FFF;
	background: #e35255;
	cursor:pointer;
}

.btn-back {
	border: 1px solid #a0ddf0;
	color: #FFF;
	background:#a0ddf0;
	padding:7px 25px;
	text-decoration:none;
	font-weight:normal;
}
.btn-back:hover,
.btn-back:focus,
.btn-back:active {
	border: 1px solid #9bc3d0;
	color: #FFF;
	background: #9bc3d0;
	cursor:pointer;
}

/* Style the tab */
.tab {
  overflow: hidden;
}

/* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
        width: 25%;
        background: url(../Images_t/group_bm2.png) center bottom no-repeat;
        color: #bed5e1;
    }

/* Change background color of buttons on hover */
.tab button:hover {
	color:#D3EDFB;
}

/* Create an active/current tablink class */
        .tab button.active {
            color: #D3EDFB;
            background: url(../Images_t/group_bm.png) center bottom no-repeat;
            border: none;
            font-size: 22px;
            font-weight: bold;
        }

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: none;
}

.tab2 {
  overflow: hidden;
}

/* Style the buttons inside the tab */
    .tab2 button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
        width: 33.3333%;
        background: url(../Images_t/group_bm4.png) center bottom no-repeat;
        color: #036;
    }

/* Change background color of buttons on hover */
.tab2 button:hover {
	color: #036;
}

/* Create an active/current tablink class */
        .tab2 button.active {
            color: #000;
            background: url(../Images_t/group_bm3.png) center bottom no-repeat;
            border: none;
            font-size: 18px;
            font-weight: bold;
        }

@media (max-width:640px) {
.tab button {
  width:100%;
  margin-bottom:5px;
}

.tab2 button {
  width:100%;
  margin-bottom:5px;
}
}


.photo-container {
	position: relative;
}

.photo-container img{
	width:100%;
	height:auto;
}


.group_title {
	color:#D3EDFB;
	text-align:center; 
	font-size:28px; 
	margin:30px 0 40px;
	font-weight:bold;
}

.group_title2 {
	color: #00286e;
	text-align:center; 
	font-size:19px; 
	margin:30px 0 40px;
}

.prize-item {
  display: inline-block;
  width: 31.1%;
  margin-left:2%;
  float:left;
  background-color:#FFF;
  margin-bottom:30px;
  border:#f1f1f1 1px solid;
  border-radius: 10px;
  -webkit-box-shadow: #d1d1d1 3px 3px 5px;     /*陰影for Google Chrome、Safari*/
  -moz-box-shadow: #d1d1d1 3px 3px 5px;     /*陰影for Firefox*/
  box-shadow: #d1d1d1 3px 3px 5px;     /*陰影for IE*/
}

.prize {
	margin:20px 10px;
}

.prize2 {
    display: block;
    margin: 20px 0 20px 15px;
    color: #ffa800;
    font-size: 23px;
    font-family: '微軟正黑體';
    padding-left: 60px;
    background: url(../Images_t/icon_15.png) left no-repeat;
    line-height: 60px;
}

.prize_title {
	display:block; 
	margin:15px 8px 15px 8px; 
	padding:12px; 
	color: #333;
	font-size:19px;
	font-family:'微軟正黑體';
	text-align:center;
}

.prize_school {
	display:block; 
	margin:8px; 
	padding:4px; 
	color: #FFF;
	background-color:#0486db;
	font-size:15px;
	font-family:'微軟正黑體';
	text-align:center;
    border:#0486db 1px solid;
    border-radius:10px;	
}

.school_text2 {
	background-color:#ffb400;
    border:#ffb400 1px solid;
}

@media (max-width:980px) {
.prize-item {
  display: inline-block;
  width: 47.5%;
  margin-bottom:30px;
  margin-left:2%;
  float:left;
}
}


@media (max-width:650px) {
.prize-item {
  display: inline-block;
  width: 98%;
  margin-left:2%;
}
}

@media (max-width:1450px) {
.vote-item {
  display: inline-block;
  width: 23%;
  margin-bottom:30px;
  margin-left:2%;
  float:left;
}
}

@media (max-width:1050px) {
.vote-item {
  display: inline-block;
  width: 31.3%;
  margin-bottom:30px;
  margin-left:2%;
  float:left;
}
}

@media (max-width:840px) {
.product-item {
  display: inline-block;
  width: 47.5%;
  margin-bottom:30px;
  margin-left:2%;
  float:left;
}

.vote-item {
  display: inline-block;
  width: 47.5%;
  margin-bottom:30px;
  margin-left:2%;
  float:left;
}

.list-item {
  display: inline-block;
  width: 47.5%;
  margin-bottom:30px;
  margin-left:2%;
  float:left;
}

.award_item {
  display: inline-block;
  width: 31.1%;
  margin-bottom:30px;
  margin-left:2%;
  float:left;

}

}


@media (max-width:650px) {
.product-item {
  display: inline-block;
  width: 98%;
  margin-left:2%;
}

.vote-item {
  display: inline-block;
  width: 98%;
  margin-left:2%;
}

.list-item {
  display: inline-block;
  width: 98%;
  margin-left:2%;
}

.award_item {
  display: inline-block;
  width: 47.5%;
  margin-bottom:30px;
  margin-left:2%;
  float:left;
}

}

.teacher_box {
	width:20%; 
	float:left; 
	margin:0 auto; 
	text-align:center;
	padding:20px 5px;
	color: #fff;
	font-size:17px;
    height:450px;
}

.teacher_box img{
	width:100%;
	max-width:200px;
	height:auto;
	margin:0 auto;
	margin-bottom:10px;
}

.teacher_box button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 5px 25px;
  text-align: center;
  cursor: pointer;
  margin-top:15px;
  background-color: #00A0E9;
  color: white; 
  border-radius:8px;
  font-size:16px;
}

.teacher_box button:hover {
  color: black;
  background-color: #9FD9F6;
}


@media (max-width:980px) {
.teacher_box {
	width:50%;
	margin-bottom:25px;
}

@media (max-width:530px) {
.teacher_box {
	width:100%;
	margin-bottom:25px;
}