@import url('https://fonts.googleapis.com/css2?family=Huninn&family=Noto+Sans+TC:wght@100..900&display=swap');

@font-face {
  font-family: 'Huninn';
  src: url('Huninn-Regular.ttf') format("truetype");
  font-style: normal;
  font-weight: 400;
}

div,p{transition: all 0.05s linear;}

a, a:active,a:hover { text-decoration: none; color: aqua;}

body{ 
	background-color: #000;
	font-family: "Huninn", sans-serif,;
}
.bt {text-indent: -999px;overflow: hidden;cursor:pointer;}
[v-cloak]{display: none;}

/********************* load *********************/
.loadbg{ 
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    background: url(../img/loadbg.jpg) no-repeat center top;
    z-index: 9999;
    position: absolute;
}
.loading p{
    color: #fdcb4c;
    font: normal 400 4rem / 1.5 "Huninn", sans-serif;
    text-align: center;
}
.loadseer {
    width: 117px;
    height: 168px;
    background-image: url(../img/loadpic.png);
    position: relative;
    margin: 0 auto 2%;
    animation-name: oxxo;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: step-start;
}
@keyframes oxxo{
	0%   { background-position:0px 0;}
	12.5%{ background-position:117px 0;}
	25%  { background-position:234px 0;}
	37.5%{ background-position:351px 0;}
	50%  { background-position:468px 0;}
	62.5%{ background-position:585px 0;}
	75%  { background-position:702px 0;}
	87.5%{ background-position:819px 0;}
	100% { background-position:936px 0;}
}
.progress{    
	height: 2rem;
	border-radius: 1rem;
}
/********************* loade *********************/

/*********************scroll*********************/
.web-scroll {
  position: relative;
  margin: 0 auto;
  width: 10%;
  height: 6%;
  background: url(../img/scroll.png) no-repeat center top;
  background-size: contain;
  margin-top: 42%;
  animation: sdrop 2s ease-out infinite;
}
@keyframes sdrop {
  0% {
    opacity: 0;
    transform: translate(0px, 0px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0px, 20px);
  }
}

/********************* 影片全螢幕 *********************/
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
video { 
    width: 100%;
    height: fit-content;
    top: -66px;
    left: 0;
    position: absolute;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: auto;}
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 100%; /*left: -100%;*/ }
}
/*rwdvideo*/
.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%;
}
/********************************背景********************************/
.page00_bg,.page01_bg,.page02_bg,.page03_bg,.page04_bg,.page05_bg,.page06_bg{
	position: absolute; 
	bottom: 0; right: 0; 
	width: 100%; 
	height: 100%; 
	margin:0; 
	background-position: center center; 
	z-index:1;
	background-size: cover;
}
.page01_bg {background:url(../img/dot.png) ; padding: 0%; background-repeat: repeat;}
.page02_bg {background:url(../img/bg02.jpg); padding: 0%;}
.page03_bg {background:url(../img/dot.png); padding: 0%; background-repeat: repeat;}
.page04_bg {background:url(../img/bg04.jpg); padding: 0%;}
.page05_bg {background:url(../img/bg05.jpg); padding: 0%;}
.page06_bg {background:url(../img/bg06.jpg); padding: 0%;}

#footer.active{-webkit-animation:none;}
.modal-backdrop.show { opacity: .7;}
button,button:active,button:focus,button:focus-visible{background-color: unset; border: unset;}

/********************************nav********************************/
#fp-nav ul li a span, .fp-slidesNav ul li a span{ background:#fff0;}
/*nav_top*/
.navsite{ width: 881px;margin:0 auto; position:relative;}
.navup{ 
    width: 760px;
    margin: 20px auto 0;
    height: 30px;
    padding: 0 45px;
    z-index: 999;
    position: relative;
    background-color: rgba(0, 0, 0, 0.45);
}
.navup .btn{ 
    font: normal 400 18px/1 'Noto Sans TC',Microsoft JhengHei,Heiti TC,sans-serif;
    left: 0;
    color: rgba(255,255,255,1);
    margin: 0px 15px;
    float: left;
    letter-spacing: 9px;
    text-shadow: 0em 0em 2px #000000, 0em 0em 4px #000000, 0em 0em 6px #000000;
}
.navup .btn:hover{ color: #f6da7b;text-shadow: 0em 0em 2px #000000, 0em 0em 4px #000000, 0em 0em 6px #000000; cursor:pointer}
/*nav right*/
.navarea_right{ 
    position: fixed;
    bottom: 4%;
    right: .5%;
    z-index: 999;
    font: normal bold 16px/1 '微軟正黑體',Microsoft JhengHei,Heiti TC,sans-serif;
    text-align: center;
    color: #ffffff;
    letter-spacing: 2px;
    transform: scale(.93);
    filter: drop-shadow(10px 10px 0px rgba(0, 0, 0, 0.15));
}
.navpre,.nav,.navs,.gotop{
    cursor: pointer;
    padding: 10px;
}
.navpre{
    width: 140px;
    height: 133px;
    background: url(../img/navs_nono.png) no-repeat top center;
    background-size: 100%;
    right: 10px;
    position: absolute;
    z-index: -1;
  -webkit-animation:movenavpre .8s infinite ; 
}
@-webkit-keyframes movenavpre{
  0%{   bottom: 220px; }
  50%{ 
    bottom: 250px;
    transform: scaleY(0.96);
    transform-origin: 100%;
	}
  100%{ bottom: 220px; }
}

.navarea_right a{ text-decoration:none;}	

.navs_effort,.navs_sn,.navs_cs,.navs_ls{ 
	width: 138px; 
	height: 41px;
	background: url(../img/navs_effort.png) no-repeat top center;
	background-size: 100%;
	margin-bottom: 3%;
}
.navs_effort{height: 56px;}
.navs_sn{background: url(../img/navs_sn.png) no-repeat top center;}
.navs_cs{background: url(../img/navs_cs.png) no-repeat top center;}
.navs_ls{background: url(../img/navs_ls.png) no-repeat top center;}

.navicon{
	float: left;
	margin: 0px 1px;
	cursor: pointer;
	transform: scale(.9);
}
.navs_effort:hover,.navs_sn:hover,.navs_cs:hover,.navicon:hover,.navs_ls:hover{
	transform: scale(1.09); cursor: pointer;
}
.nav{
    margin: 0 auto;
    color: #a14d33;
    letter-spacing: 1px;
    font: normal 400 16px/0.8 "Huninn", sans-serif;
}
.nav:hover{
    letter-spacing: 0px;
    color: #ff4900;
}
.navs_msg{
	background: url(../img/navs_msg.png) no-repeat top center;
	width: 125px;
	height: 32px;
	left: -110px;
	top: 3px;
	position: relative;
	animation: movmsg .8s ease-out infinite;
	animation-delay:1s;
}
@keyframes movmsg{
  0%{ left: -105px;}
  90%{ left: -110px;}
  100%{ left: -105px;}
}
/******************************** page01 ********************************/
.logo{
	background: url(../img/logo.png) no-repeat center top;
	background-size: 100%;
	width: 100vw; 
	height: 100vh;
	top:0;
	position: absolute;
}

/******************************** page02 ********************************/
.tab01b, .tab02b, .tab03b {
  padding: 10%;
  background-size: auto;
	height: 100vh;
}
.tab01b {
  background: url(../img/tab01b.jpg) no-repeat center top;
}
.tab02b {
  background: url(../img/tab02b.jpg) no-repeat center top;
}
.tab03b {
  background: url(../img/tab03b.jpg) no-repeat center top;
}

.carousel-control {
    opacity: 1;
}
.carousel-control-next-icon,.carousel-control-prev-icon{
	padding: 14% 16%;
	background: url(../img/arrow_right.png) no-repeat center top;
	background-size: cover;
  animation: moven 2s ease-out infinite;
}
.carousel-control-prev-icon{
  background: url(../img/arrow_left.png) no-repeat center top;
	background-size: cover;
  animation: movep 2s ease-out infinite;
}
@keyframes moven {
  0% {
    opacity: 0;
    transform: translate(-20px, 0px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0px, 0px);
  }
}
@keyframes movep {
  0% {
    opacity: 0;
    transform: translate(20px, 0px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0px, 0px);
  }
}
/******************************** page02e ********************************/

/******************************** page03 ********************************/
.kv03_01{
	background: url(../img/kv03_01.png) no-repeat center top;
	background-size: cover;
	width: 100vw;
	height:100vh;
	position: absolute;
	z-index: 1;
  animation: mvkv03_01 2s ease-out infinite;
}
@keyframes mvkv03_01 {
  0% {top: 1%;}
  50%{top: 0%;}
  100% {top: 1%;}
}
.kv03_02{
	background: url(../img/kv03_02.png) no-repeat center top;
	background-size: cover;
	width: 100vw;
	height:100vh;
	position: absolute;
	z-index: 0;	
}
.kv03_fr{
    background: url(../img/kv03_00.png) no-repeat center top;
    background-size: cover;
    width: 102%;
    height: 548px;
    position: absolute;
    z-index: 1;
    bottom: -2rem;
    left: -2rem;
    filter: blur(.5rem);
}
.kvc_bg03{
    z-index: 9;
    position: relative;
}
.box_pre {
	width: 700px;
	height: 990px;
	background: url(../img/box_pre.png) no-repeat center top;
	background-size: cover;
	margin: -2% auto 0;
	position: relative;
	padding: 220px 80px 0;
	transform: scale(.67);
}
.form-group {
  background-color: #fff0;
  margin-bottom: 15px;
  left: 7px;
  position: relative;
  width: 97%;
}
.capital.checkbox input[type=checkbox], .capital.checkbox-inline input[type=checkbox], .capital.radio input[type=radio], .capital.radio-inline input[type=radio] {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  top: 10px;
  position: relative;
}
label {
  color: aqua;
}
.input-group-text {
    border-radius: unset;
    background-color: #0a4c8200;
    color: aliceblue;
    padding: 1% 3.9% 1% 1%;
    border: unset;
    font: normal 300 4rem / 1 "Huninn", sans-serif;
}
.form-control {
  border: 1px solid #d7a96e;
  border-radius: 0;
  font: normal 400 3.3rem / 1 "Huninn", sans-serif;
  padding: 2% 2.5%;
}
#area_code, #phone_number {
  height: 5.5rem;
}
.capital.checkbox {
  position: relative;
  margin: 0px 0 20px;
  display: inline-block;
  font: normal 400 3rem / 1 "Huninn", sans-serif;
}
.btn {
  background: url(../img/btn.png) no-repeat center top;
  background-size: contain;
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, .8));
  width: 316px;
  height: 136px;
  margin: 13px auto;
  position: relative;
  float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: btn_playm 1.5s infinite linear;
}
@keyframes btn_playm {
	0% {filter: drop-shadow(0px 0px 15px rgba(255, 197, 0, 1));}
	50% {filter: drop-shadow(0px 0px 0px rgba(255, 197, 0, 0.5));}
	100% {filter: drop-shadow(0px 0px 15px rgba(255, 197, 0, 1));}
}

.btn:hover{
	transform: scale(.96);
}
.btn p {
    font: normal 500 5.2rem / 1 "Huninn", sans-serif;
    color: #ffffff;
    position: relative;
    text-shadow: 0 0 15px #0d6efd, 0 0 30px #000;
}
#area_code option {
  text-align: center;
}

/*跑馬燈*/
.latest-news-section {
	overflow: hidden;
	display: block;
	clear: both;
	background: #06213f;
	padding: 4px 0 5px;
	position: relative;
}

.ln-title {
    position: absolute;
    height: 100%;
    width: 29%;
    left: 0;
    top: 0;
    text-align: right;
    padding-top: 6px;
    padding-right: 20px;
    text-shadow: 0px 1px 0px #ffffff75;
    background: linear-gradient(#efeff8 50%, #c3c4d5 50%);
    z-index: 1;
    font: normal 500 1.85rem / 1 "Huninn", sans-serif;
}

.news-ticker {
	width: 71%;
	float: right;
	overflow: hidden;
	display: inline-block;
}

.news-ticker-contant .nt-item {
	margin-right: 35px;
	color: #bbb;
	display: inline-block;
}

.news-ticker-contant .nt-item span {
	margin-right: 10px;
	display: inline-block;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 500;
	color: #fff;
	padding: 0px 10px;
}

.news-ticker-contant .nt-item span.new {
	background: #3074c9;
}

/******************************** page03e ********************************/

/******************************** page04 ********************************/
.box_team {
    width: 700px;
    height: 990px;
    background: url(../img/box_team.png) no-repeat center top;
    background-size: cover;
    margin: -2% auto;
    position: relative;
    padding: 226px 44px 0;
    transform: scale(.67);
}
.nofp {
  margin: 60px 0 40px 335px;
  width: 86px;
}
.nofp p {
  font: normal 900 7rem / 1.3 "Huninn", sans-serif;
  color: #ff76b3;
  display: inline;
}
.box_team .btn {
    width: 250px;
    height: 110px;
    margin: 20px 37px 0px;
}
.box_team .btn p {
  top: -0.5rem;
  font: normal 500 4.4rem / 1 "Huninn", sans-serif;
}
.box_team .btn.gift {
    transform: translate(180px, -10px) scale(1.13);
    margin: 4% auto;
}
.box_team .btn.gift p {
  font: normal 500 4rem / 2.2 "Huninn", sans-serif;
}
.box h1{
    font-size: 3.5rem;
    line-height: 1;
    color: #fff3a6;
    text-align: justify;
    font-family: "Huninn", sans-serif;
    margin: 0 0 3% 0;
}
.box {
    padding: 2% 4%;
    width: 96%;
    margin: 0 auto;
    display: grid
;
}
.box p {
    font: normal 300 2.1rem / 1.5 "Huninn", sans-serif;
    color: azure;
    text-align: justify;
}
.kv04_01 {
    background: url(../img/kv04_01.png) no-repeat center top;
    background-size: contain;
    float: left;
    left: 12.6%;
    top: 2%;
    z-index: 5;
    position: relative;
    padding: 22% 14%;
}
.kv04_02 {
		padding: 22% 14%;
    background: url(../img/kv04_02.png) no-repeat center top;
    background-size: cover;
    float: right;
    right: 24%;
    top: 4%;
    position: relative;
}
/******************************** page04e ********************************/

/******************************** page05 ********************************/
.t02 {
    background: url(../img/t02.png) no-repeat center top;
    background-size: contain;
    padding: 11%;
    position: absolute;
    top: 10%;
}
.page05 .carousel {
    transform: scale(.93); 
    /*top: -40px;*/
}
#section5 .img-fluid{border: 5px solid #a3e8ff;}

.page05_bg{
	display: flex;
	align-items: center;
	justify-content: center;
}
/******************************** page05e ********************************/

/******************************** page06 ********************************/
.page06_bg{
	display: flex;
	align-items: center;
	justify-content: center;
}
.box_rule {
    padding: 5% 4%;
    background: url(../img/box_rule.png) no-repeat center top;
    background-size: contain;
    width: 590px;
    height: 766px;
}
.box_rule_bg{
    background: url(../img/box_rule_bg.png) no-repeat center top;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    position: relative;
}
.box_rule h1 {
	letter-spacing: 2px;
	color: #fff3a6;
	font: normal 400 2rem / 1.5 "Huninn", sans-serif;
}
.box_rule p {
	font: normal 400 1.4rem / 1.5 "Huninn", sans-serif;
	text-align: justify;
	color: aliceblue;
}
/******************************** footer ********************************/

#footer{height: 200px!important;}
#footer .wrap-box{ padding:2% 0 0 0;}
.copyfight{ margin: 0 auto; position: relative;}

/******************************** lightbox ********************************/
.modal{ margin: 1% 0; transform: scale(.9);}
.form-group {
    background-color: #fff0;
    margin-bottom: 5px;
}
.modal-backdrop.in {
    filter: alpha(opacity=75);
    opacity: .8;
}
.modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0);
}
.modal-content {
    position: relative;
    background-color: #fff0;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 0px solid #999;
    border: 0px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0);
    box-shadow: 0 3px 9px rgba(0,0,0,0);
}
.modal-header {
    border-bottom: 0px solid #e5e5e5;
}
.modal-content .close { 
    background: url(../img/close.png) no-repeat;
    background-size: 100%;
    width: 70px;
    height: 70px;
    top: 36px;
    right: 19px;
    opacity: 1;
    cursor: pointer;
    z-index: 9999;
    position: absolute;
}

.serialbox00 .form-control,.serialbox01 .form-control{
    font-size: 21px;
    position: relative;
    border-radius: 0;
    padding: 0px 7px 0;
    font-family: 'Microsoft JhengHei',微軟正黑體;
    color: #a5a199;
    margin-bottom: 6px;
    height: 40px;
    border: 0;
}
.serial_btn {
    background: url(../images/lightbox_03btn.png) no-repeat center top;
    background-size: 100%;
    position: relative;
    width: 120px;
    height: 51px;
    top: 150px;
    left: 79px;
    cursor: pointer;
}
.serial_btn:hover {
	-webkit-filter: drop-shadow(0px 0px 10px rgb(15, 128, 254));
    filter: drop-shadow(0px 0px 10px rgb(15, 128, 254));
}

/*完成預約*/
.serialbox00{
    width: 561px;
    height: 400px;
    background: url(../images/lightbox_00.png) no-repeat;
    background-size: 100%;
    padding: 160px 44px 0 252px;
}
/*查詢序號*/
.serialbox01{
    width: 589px;
    height: 521px;
    background: url(../images/lightbox_01.png) no-repeat;
    background-size: 100%;
    padding: 76px 190px;
}

/********************************lightbox********************************/
.modal {
    transform: scale(0.69);
    overflow-y: hidden;
}
.modal-dialog{max-width: 661px;}
.modal-content {
    position: relative;
    background-color: #fff0;
    background-clip: padding-box;
    border: 0px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    box-shadow: 0 3px 9px rgb(0 0 0 / 0%);
}
.modal-content .close {
    background: url(../img/close.png) no-repeat;
    background-size: 100%;
    width: 97px;
    height: 97px;
    top: 0px;
    right: -33px;
    position: absolute;
    border: unset;
	z-index: 99;
}
.serialbox01 {
    width: 661px;
    height: 885px;
    background: url(../img/box_ac.png) no-repeat;
    background-size: 100%;
}
.serialbox02 {
    width: 661px;
    height: 885px;
    background: url(../img/box_sn.png) no-repeat;
    background-size: 100%;
    padding: 270px 75px 0;
}
.serialbox03 {
    width: 661px;
    height: 885px;
    background: url(../img/box_teams.png) no-repeat;
    background-size: 100%;
    padding: 270px 75px 0;
}
.serialbox04 {
    width: 661px;
    height: 987px;
    background: url(../img/box_mi2.png) no-repeat;
    background-size: 100%;
    padding: 200px 55px 0;
    transform: scale(.67);
    color: antiquewhite;
    font: normal 400 1.4rem / 1 "Huninn", sans-serif;
}
.serialbox04 .tle{
    font-size: 3.4rem;
    text-align: center;
    margin-bottom: 3%;
}
.serialbox04 .btn{ 
    transform: scale(.9);
    left: 20%;
}
.mi2bg{ 
    width: 100vw;
    height: inherit;
    background-color: #000000b3;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 99;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
		
}

.form-control {
    border: 1px solid #d7a96e;
    border-radius: 0;

}
.serialbox02 .form-control {
    font-size: 3rem;
    color: #a6a6a6;
    margin-bottom: 1rem;
    height: 5.5rem;
}
.form-group {
    background-color: #fff0;
    margin-bottom: 15px;
    left: 7px;
    position: relative;
    width: 97%;
}
.serialbox02 .btn {
    transform: scale(.9);
    left: 9rem;
    position: relative;
}
table {
    color: white;
    font: normal 23px / 1.4 '微軟正黑體', Microsoft JhengHei, Heiti TC, sans-serif;
    padding-left: 15px;
    text-align: justify;
    border: 1px rgba(255, 255, 255, 0.4) solid;
    background-color: rgb(8 73 123);
    margin: 20px 0;
    letter-spacing: 1px;
}
td {
    text-align: center;
    padding: 1rem;
    border: 1px solid;
    font: normal 100 2.5rem / 1 "Huninn", sans-serif;
}
/********************************lightboxe********************************/

/******************************** rwd ********************************/
/*-- media width: 18000px--*/
@media ( max-width: 1920px){
}
@media (min-width: 1280px) and (max-width: 1600px){

.kvc_bg01{ transform:scale(.93) translateY(-3%)}
.kv_01 {
    width: 46%;
    top: 0%;
    left: -6%;
}
.kv_02 {
	width: 45%;
    top: -4%;
    right: -6%;
}
.kv_03,.kv_04{transform: scale(.8) translateY(70px);}
.kv_04{ right:-5%}
.kvc_bg02{ transform:scale(.8) translateY(-11%);}
.kv_05 img{ transform: scale(.9) translateY(70px) translateX(-3%);}
.kv_06 img{ transform: scale(.9) translateY(20px) translateX(7%);}
.active .kvc_bg03{transform:scale(.86); margin: 30px auto;}
#section3 .rwd{transform: scale(.83) translateY(-90px);}
.active .tittle .img-responsive{transform:scale(.92);}
.kvc_bg04{transform: scale(.88) translateY(-5%);}
.navarea_right{transform:scale(.9);}
}
@media (min-width: 1280px) and (max-width: 1279px){

/*.kv_10 {
    padding: 17.7% 16%;
    bottom: 4%;
    left: -2%;
}
.kv_11 {
    padding: 15% 12.5%;
    bottom: 2%;
    right: 3%;
}

#section3 .container{
    transform: scale(.9);
}
#section4 .container{
    transform: scale(.8);
    margin: -6% auto;
}
#section5 .carousel{
	width: 600px;
    height: 481px;
    margin: 1% auto 0;
}
.article{ width:500px;}*/
}
/*-- media width: 1440px--*/
@media (min-width: 1366px) and (max-width: 1600px){