@charset "UTF-8";

br.for-xs{ display: none; }
br.for-lg{ display: block;}


.btn-container{ padding: 10px 0 20px; position: relative; transition:all ease-out 0.3s;}

.btn-container .btn{ width:240px; height: 75.2px; background-image: url("../img/btn_bg.png"); background-repeat: no-repeat; background-size: 240px auto; line-height: 1; color: #FFF; font-size: 26px; font-weight: 500; margin: 10px auto; letter-spacing: 2px; transition:all ease-out 0.3s; display: flex; justify-content: center; align-items: center; cursor: pointer; user-select: none; position: relative; }
.desktop .btn-container .btn:hover{ color: #fdee9a; transition:all ease 0.3s; }
.btn-container .btn:active{ position: relative; top: 1px;}

.btn-container .btn-go{ background-image: url("../img/btn_go.png"); padding-right: 3%;}
.btn-container .btn-submit{ background-image: url("../img/btn_submit.png"); padding-right: 3%;}
.btn-container .btn-home{ background-image: url("../img/btn_home.png"); padding-right: 3%;}
.btn-container .btn-download{ background-image: url("../img/btn_download.png"); padding-right: 3%;}

.btn-container .text-container{ width: 100%; text-align: center; }
.btn-container .text-container .waiting{ color: #434343; margin-top: 10px; animation: flashing infinite 1s;}

.page-index .btn-container.sticky{ display: none;}

.mobile .page-index .btn-container{ position: fixed; bottom: 0; left: 0; width: 100%; padding: 0; z-index: 999; }
.mobile .page-index .sec-kv .btn-container{ display: none;}
.mobile .page-index .btn-container.sticky{ display: block; position: sticky; bottom: 0; left: 0; width: 100%; padding: 0 0 10px; z-index: 999; }
.mobile .sec-kv{ z-index: 5;}

.fixed{ position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 999;}
.fixed .btn-go{ display: block; width: 150px; padding-right: 10px; animation-delay: 1s; transition: opacity ease-out 0.6s;}
.fixed .btn-go:hover{ opacity: 0.8; transition: opacity ease-out 0.6s;}
.mobile .fixed{ display: none;}

.sec-kv{ width: 100%; max-width: 1920px; margin: 0 auto; padding-bottom: 50px; position: relative; }
.sec-kv::after{ content: ''; width: 100%; height: 26px; left: 0; bottom: 0; background: url("../img/bg_wave.png") center bottom repeat-x; position: absolute; 
	animation: animation_wave linear 3s infinite;}
.sec-kv .container{ width:100%; max-width: 1280px; color: #FFF; }
.sec-kv .banner{ margin: 0 auto; overflow: hidden;}
.sec-kv .banner img{ margin: 0 auto; width: 100%; max-width: 1920px;}
.sec-kv .banner .md{ display: block; }
.sec-kv .banner .xs{ display: none; animation: kv-intro ease-in-out 1.2s;}


.sec-kv .box{ width: 90%; max-width: 720px; margin: 400px auto 20px; padding: 30px 0 40px; background-color: rgba(72,87,144,0.85); border-radius: 15px;}
.sec-kv .desc{ font-size: 18px; line-height: 1.75; text-align: center; margin-bottom: 20px; text-shadow: #15286a 0 0 8px;}
.sec-kv .info-wrap{ width: calc( 90% - 50px); max-width: 550px; font-size: 18px; margin: 0 auto; padding: 15px 0 0; border-top: #f5cc44 solid 2px; position: relative; text-shadow: #15286a 0 0 8px;}
.sec-kv .info-wrap::before,
.sec-kv .info-wrap::after{ content: ''; width: 18px; height: 22px; background-image: url("../img/kv_info_x.png"); background-size: 18px auto; position: absolute; top: -12px;}
.sec-kv .info-wrap::before{ left: -25px;}
.sec-kv .info-wrap::after{ right: -25px;}
.sec-kv .info{ border-bottom: #f5cc44 solid 2px; position: relative;}
.sec-kv .info::before,
.sec-kv .info::after{ content: ''; width: 18px; height: 22px; background-image: url("../img/kv_info_x.png"); background-size: 18px auto; position: absolute; bottom: -12px;}
.sec-kv .info::before{ left: -25px;}
.sec-kv .info::after{ right: -25px;}
.sec-kv .info li{ margin-bottom: 10px; padding-left: 10px;}
.sec-kv .info li .label{ color: #f5cc44;}


.sec-event{ background: #fff url("../img/bg_dots.png") center top repeat-y; background-size: 100% auto; width: 100%; max-width: 1920px; margin:0 auto; padding: 100px 0 50px; position: relative; z-index: 3; animation: animation_fly linear 16s infinite; }
.sec-event::before{ content: ''; width: 100%; height: 50px; top: 0; left: 0; position: absolute; background: linear-gradient(to bottom, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%); z-index: 2;}
.sec-event::after{ content: ''; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background: url("../img/bg_dots_2.png") center top repeat-y; background-size: 100% auto; animation: animation_fly linear 8s infinite; z-index: -1; }
.sec-event .container{ width: 90%; max-width: 1100px; }
.sec-event .road{ position: absolute; top: -100px; left: 5%; z-index: -1;}
.sec-event .event{ display: flex; flex-direction: row-reverse; justify-content: flex-end; margin-bottom: 100px; position: relative; top: 80px; }
.sec-event .event figure{ width: 400px;}
.sec-event .event figure img{ width: 350px; margin: 0 auto; padding-right: 20px; user-select: none;}
.sec-event .event figcaption{ display: flex; flex-direction: column; justify-content: center; }
.sec-event .event figcaption h3{ font-size: 42px; color: #bf9d5b; margin-bottom: 10px; }
.sec-event .event figcaption h3 span{ position: relative;}
.sec-event .event figcaption h3 span::after{ content: ''; width: 18px; height: 22px; background-image: url("../img/event_x.png"); background-size: 18px auto; position: absolute; top: -8px; right: -18px;}
.sec-event .event figcaption p{}
.sec-event .event-2{ left: 6.5%;}
.sec-event .event-2 figure{ width: 500px;}
.sec-event .event-2 figure img{ width: 450px;}
.sec-event .event-4{ left: 18%;}


.rule-box{ width: 100%; max-width: 900px; margin: 0 auto; padding: 60px 5% 30px;}
.rule-box h3{ font-size: 24px; color: #bf9d5b; margin-bottom: 10px; line-height: 1; padding-left: 10px; position: relative;}
.rule-box h3::before{ background-color: #bf9d5b; content: ''; width: 4px; height: 24px; top: 2px; left: 0; position: absolute;}
.rule-box ul{ margin: 0 0 30px 0;}
.rule-box ul li{ position: relative; padding-left: 25px;}
.rule-box ul li::before{ background-color: #bf9d5b; content: ''; width: 8px; height: 8px; border-radius: 8px; top: 11px; left: 8px; position: absolute;}
.rule-box ul li span{ color: #bf9d5b;}
.rule-box ol{ margin: 0 0 30px 25px;}
.rule-box ol li{}
.rule-box .link{ color: #000; text-decoration: underline;}
.desktop .rule-box .link:hover{ text-decoration: none;}


.sec-kv-inside{ padding: 50px 0 0 0; }
.sec-kv-inside .slogan{ width:55%; max-width: 360px; margin: 10px auto 90px;;}
.sec-kv-inside .container{ }

.sec-form{}
.sec-form .container{ }
.sec-form .notice{ width: 90%; max-width: 460px; margin: 0 auto; font-size: 16px; margin-bottom: 15px; }
.sec-form .notice ul{ }
.sec-form .notice ul li{ position: relative; padding-left: 20px;}
.sec-form .notice ul li::before{ content: '※'; top: 0px; left: 0px; position: absolute;}
.sec-form .notice .highlight{ color: #ff0000;}

.sec-form .form-box{ width: 90%; max-width: 450px; margin: 0 auto 20px; background-color: #fff; border-radius: 10px; padding-bottom: 10px; overflow: hidden; }
.sec-form .form-box .form-title{ background: #5a6caf url("../img/from_title_bg_2025.png") no-repeat; background-size: auto 70px; height: 70px; font-size: 26px; letter-spacing: 2px; font-weight: 500; display: flex; justify-content: center; align-items: center; margin-bottom: 15px; color: #fff;}

.sec-form .form-box h5{ width: 90%; color: #bf9d5b; font-size: 22px; font-weight: 400; text-align: center; margin:0 auto 5px; position: relative;}
.sec-form .form-box h5::before{ background-color: #bf9d5b; content: ''; width: 100%; height: 2px; top: 50%; left: 0; position: absolute; z-index: 1;}
.sec-form .form-box h5 span{ display: inline-block; padding: 0 20px; background-color: #fff; position: relative; z-index: 2;}

.sec-form .form{ width:90%; margin:0 auto 15px; }
.sec-form .form li{ display:block; padding:5px 0; font-size:20px;}
.sec-form .form li .label{ font-size:20px; font-weight:400; margin-bottom:3px;}
.sec-form .form li .label p{ font-size:16px; font-weight:normal; margin-bottom:10px;}
.sec-form .form li .value{ font-size:20px; }
.sec-form .form li .value a{ color:#FFF; }
.sec-form .form li .value .combo-input{ display: flex; overflow: hidden;}
.sec-form .form li .value .combo-input .input-phone{ margin-bottom: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.sec-form .form li .value .combo-input .btn-sendcode{ background-color: #fec845; color: #000; text-align: center; width: 260px; height:40px; font-size: 16px; line-height:40px; cursor: pointer; transition: all ease 0.3s; letter-spacing: 1px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; user-select: none; border: 0; font-family:'Noto Sans TC', Helvetica;}

.sec-form .form li .value .combo-input .btn-sendcode:disabled{ cursor: default; color: #000; }
.sec-form .form li .value .combo-input .btn-sendcode:disabled span{ position: relative; top: 0;}
/*.desktop .sec-form .form li .value .combo-input .btn-sendcode:hover{ color: #15286a; transition: all ease 0.3s; }*/
.sec-form .form li .value .combo-input .btn-sendcode:active:not([disabled]) span{ position: relative; top: 1px;}
.sec-form .form li .value p{ font-size: 16px; font-weight:normal;}
.sec-form .form li .value .flex{ display: flex; justify-content: space-around;}

.sec-form .agree-box{ width:90%; font-size:18px; margin:0 auto; padding:10px 0; }
.sec-form .agree-box .btn-privacy{ color: #000; text-decoration:underline;}
.desktop .sec-form .agree-box .btn-privacy:hover{ text-decoration:none;}

.sec-form .radio-box{ position:relative; margin-bottom:0px;}
.sec-form .radio-box label{ display:inline-block; vertical-align:middle; margin-right:20px;}
.sec-form .radio-box label:last-child{ margin-right:0;}

::placeholder { color:#434343; opacity:0.5;}
:-ms-input-placeholder { color:#434343; opacity:0.5;}
::-ms-input-placeholder { color:#434343; opacity:0.5;}

input.input{ 
	width:100%; height:40px; padding:0px 10px; color:#000; transition: all ease 0.3s; 
	font-size:20px; line-height:40px; vertical-align:middle; margin-bottom:5px;
	background-color:#f6f6f6; border:#ccc solid 1px; border-radius: 5px;
	font-family:'微軟正黑體','Microsoft JhengHei',Arial, Helvetica, sans-serif;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input.input:focus{ border:#bf9d5b solid 1px; outline:none; transition: all ease 0.3s; }
.styled-select {
   	background:#f6f6f6 url(../img/ic_arr_down.png) no-repeat 98% 50%; 
   	background-size:auto 60%; border:#ccc solid 1px; border-radius: 5px;
	width:100%; height:40px; margin-bottom:5px;
   	overflow: hidden;
}

.styled-select select {
	background: transparent;
	width:100%; height:40px; padding-left:5px; color:#000; 
	font-size:18px; 
	border:0; border-radius:0;
	font-family:'微軟正黑體','Microsoft JhengHei', Arial, Helvetica, sans-serif;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	outline: none;
	text-indent: 0.01px;
    text-overflow: '';
}

.styled-select.people{ width: 50%; }
.styled-select select option[disabled]{ opacity: 0.5;}
.styled-select select::-ms-expand { display: none;}

.magic-radio,
.magic-checkbox { position:absolute; display:none; }

.magic-radio[disabled],
.magic-checkbox[disabled] { cursor: not-allowed; }

.magic-radio + label,
.magic-checkbox + label {
  position: relative;
  display: block;
  padding-left: 35px;
  cursor: pointer;
  vertical-align: top;
  padding-bottom:10px; }
  .magic-radio + label:hover:before,
  .magic-checkbox + label:hover:before {}
  .magic-radio + label:before,
  .magic-checkbox + label:before {
    position: absolute;
    top: 0px;
    left: 0;
    display: inline-block;
    width: 30px;
    height: 30px;
    content: '';
    background-color:#f6f6f6; border:#ccc solid 1px; border-radius: 5px; }
  .magic-radio + label:after,
  .magic-checkbox + label:after { position: absolute; display: none; content: ''; }

.magic-radio[disabled] + label,
.magic-checkbox[disabled] + label { cursor: not-allowed;  color: #e4e4e4; }
  .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
  .magic-checkbox[disabled] + label:hover,
  .magic-checkbox[disabled] + label:before,
  .magic-checkbox[disabled] + label:after { cursor: not-allowed; }
  .magic-radio[disabled] + label:hover:before,
  .magic-checkbox[disabled] + label:hover:before { }
  .magic-radio[disabled] + label:before,
  .magic-checkbox[disabled] + label:before {}

.magic-radio:checked + label:before,
.magic-checkbox:checked + label:before {}

.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after { display: block; }

.magic-radio + label:before { border-radius: 50%; }

.magic-radio + label:after {
  top: 7px;
  left: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:#fec845; }

.magic-radio:checked + label:before { border:#8f94a8 solid 1px; }

.magic-radio:checked[disabled] + label:before { border:#8f94a8 solid 0px; }

.magic-radio:checked[disabled] + label:after { background: rgba(90,11,83,.3); }

.magic-checkbox + label:before {  }

.magic-checkbox + label:after {
  top: 2px;
  left: 8px;
  box-sizing: border-box;
  width: 14px;
  height: 22px;
  transform: rotate(45deg);
  border-width: 5px;
  border-style: solid;
  border-color: #bf9d5b;
  border-top: 0;
  border-left: 0; }

.magic-checkbox:checked + label:before { border:#ccc solid 1px; border-radius: 5px; background-color:#F6F6F6; }
.magic-checkbox:checked[disabled] + label:before { border: 0; background-color:#df9f0a; }


.sec-result{ }
.sec-result .container{ }

.result-box{ width: 90%; max-width:500px; background-color: #313b4d; margin: 0 auto 15px; border-radius: 10px; overflow: hidden;}
.result-box .content{ color: #FFF; width: 90%; max-width: 400px; min-height: 250px; margin: 0 auto; padding: 30px 0;}
.result-box .content h4{ font-size: 32px; font-weight: 500; margin-bottom: 10px; }
.result-box .content h4 a{ display: inline-block; font-size: 80%; color: #FFF; text-decoration: underline;}
.result-box .content p{ font-size: 18px; }
.result-box .card{ }



.sec-checkin{ }
.sec-checkin .container{ }
.sec-checkin .text{ padding:20px 0 30px 0;  }
/*.sec-checkin .content-0{ display: block;}
.sec-checkin .content-1{ display: none;}*/
.sec-checkin .guest-info{ }
.sec-checkin .guest-info li{ background: url("../img/icon_guest.png") no-repeat; background-position: 5px 50%; background-size: 60px auto; padding: 20px 0 20px 80px; border-bottom: #fdee9a solid 1px;}
/*.sec-checkin .guest-info li:first-child{ background-position: 25px 50%; background-size: 40px auto;}*/
.sec-checkin .guest-info li:last-child{ border: 0;}
.sec-checkin .guest-info .name{ font-size: 32px; line-height: 1; letter-spacing: 3px; margin-bottom: 5px; }
.sec-checkin .guest-info .id-number{ font-size: 24px; letter-spacing:1px;}
.sec-checkin .guest-info .email{ font-size: 15px; padding: 5px 0 0 0;}
.sec-checkin .btn-close{ }
.sec-checkin .btn-checkin{ }

/*.sec-checkin.verified .content-0{ display: none;}
.sec-checkin.verified .content-1{ display: block;}
.sec-checkin.verified .btn-checkin{ display: flex;}
.sec-checkin.verified .btn-close{ display: none;}*/


.privacy-box{ background-color: #15286a; color:#FFF; font-size:16px; font-weight: 400; line-height:1.5; padding: 30px 5% 50px;}
.privacy-box h3{ font-size: 24px; color: #bf9d5b; margin-bottom: 10px; line-height: 1; padding-left: 10px; position: relative;}
.privacy-box h3::before{ background-color: #bf9d5b; content: ''; width: 4px; height: 24px; top: 2px; left: 0; position: absolute;}
.privacy-box .flex{ display: flex; margin-bottom: 15px; }
.privacy-box .flex span{}
.privacy-box .flex .content{}
.privacy-box .margin-bottom{ margin-bottom: 15px; }
.privacy-box ol{ margin-left: 25px; }
.privacy-box ul{ }



/*	RESPONSIVE:  */
@media only screen and (max-width:1280px) {

.sec-kv .banner{ border-radius: 0; margin: 0 auto;}
		
}

/*	RESPONSIVE:  */
@media only screen and (max-width:1023px) {
	
.sec-kv{ padding-bottom: 0px; }

.sec-kv::after{ display: none;}
.sec-kv .banner .md{ display: none;}
.sec-kv .banner .xs{ display: block;}
.sec-kv .box{ width: 100%; max-width: 100%; background: rgba(72,87,144,1) url("../img/bg_wave.png") center bottom repeat-x; border-radius: 0; margin: 0 auto; background-size: 62.5px auto; padding-bottom: 60px; animation: animation_wave linear 3s infinite;}
	
.sec-event{ background-image: none; padding: 50px 0 0px;}
.sec-event::before,		
.sec-event::after{ display: none;}
.sec-event .container{ background: none;}	
.sec-event .road{ display: none;}
.sec-event .event{ display: block; margin-bottom: 50px; top: auto;}
.sec-event .event figure{ width: 100%;}
.sec-event .event figure img{ width: 80%; max-width: 350px; margin: 0 auto;}
.sec-event .event figcaption{ display: block; width: 100%; max-width: 450px; margin: 0 auto; }
.sec-event .event figcaption h3{ font-size: 36px; }
.sec-event .event figcaption p{ margin-bottom: 20px;}

.sec-event .event-2 figure{ width: 100%;}
.sec-event .event-2 figure img{ width: 100%; max-width: 400px;}
.sec-event .event-2,
.sec-event .event-4{ left:auto;}

.rule-box{ padding: 50px 3% 0px;}
	
.sec-kv-inside{ padding: 35px 0 0 0; }
.sec-kv-inside .slogan{ width: 60%; max-width: 270px; margin: 0 auto 70px;}
	
 .fixed{ display: none;}
}

/*	RESPONSIVE:  */
@media only screen and (max-width:767px) {

.btn-container .btn-go,
.btn-container .btn-submit,
.btn-container .btn-home,
.btn-container .btn-download{ padding-right: 11.5%;}
	
br.for-xs{ display: block;}
br.for-lg{ display: none; }	
	
.sec-kv .info li{ padding-left: 0;}	
.sec-kv .info li .text{ display: block;}
.sec-kv .info-wrap{ font-weight: 500;}
	
.sec-kv-inside .slogan{ margin: 0 auto 40px;}	
}



/*	RESPONSIVE:  */
@media only screen and (max-width:375px) {
        
.sec-form .form li .label{ font-size:18px;}
.sec-form .form li .label p{ font-size:15px;}
.sec-form .form li .value{ font-size:18px; }
.sec-form .form li .value .combo-input .btn-sendcode{ font-size: 15px;}	
.sec-form .agree-box{ font-size:16px;}
input.input{ padding:0px 5px; font-size:16px; line-height:30px;}
.styled-select{ background-size:auto 40%; }
.styled-select select {	font-size:16px;}

}


@keyframes animation_wave {
  0% {
	  background-position: -125px bottom;
  }
  100% {
	  background-position: 0px bottom;
  }
}

@keyframes animation_fly {
  0% {
	  background-position: 50% 0;
  }
  100% {
	  background-position: 50% -800px;
  }
}


@keyframes kv-intro {
  0% {
	  transform: scale(1.1,1.1);
  }
  100% {
	  transform: scale(1,1);
  }
}
@keyframes flashing {
  0% {
	  opacity: 1;
  }
  50% {
	  opacity: 0.5;
  }
  100% {
	  opacity: 1;
  }
}