@charset "utf-8";
/*字型-思源黑體*/
/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&subset=chinese-traditional');*/
/*字型-fontawesome Pro*/
@import url('https://pro.fontawesome.com/releases/v5.8.2/css/all.css');
/*卷軸外掛*/
@import url('/js/lib/mCustomScrollbar/jquery.mCustomScrollbar.min.css');


/* reset */
*{ margin:0; padding:0; font-size:10px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent; outline:none; font-family:'Noto Sans TC','Microsoft JhengHei','Apple LiGothic Medium','Arial',sans-serif;}

html{ -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; }
body{ margin:0; -webkit-overflow-scrolling:touch; text-align:center; }
:before,:after,i{ font-family:'icomoon','Font Awesome 5 Pro','Font Awesome 5 Free','Font Awesome 5 Brands','fontawesome','Microsoft JhengHei',Arial,'Microsoft JhengHei','Apple LiGothic Medium',sans-serif;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary,div,a{ display:block; box-sizing:border-box; position:relative;}
a{ background:transparent; text-decoration:none; color:inherit; cursor:pointer; line-height:1em; display:inline-block; font-size:inherit;}
a:active{ outline:0; }
b,strong{ font-weight:bold; font-size:inherit; }
dfn{ font-style:normal; }
img{width: 100%; border:0; vertical-align:middle; line-height:0; font-size:0; }
input,textarea,button,select,option{ border:0; margin:0; outline:none; padding:0; font-size:1.6rem; font-family:/*'Noto Sans TC','Open Sans',*/'Microsoft JhengHei','Apple LiGothic Medium','Arial',sans-serif; -webkit-appearance:none; -moz-appearance:none; /*-ms-appearance:none; appearance:none;*/ }
button{cursor: pointer; background: none;}
label,span{ font-size:inherit; }
textarea{ resize:none; }
select::-ms-expand{ display:none; }
input::-moz-placeholder,textarea::-moz-placeholder{ color:#ccc; }
input:-ms-input-placeholder,textarea:-ms-input-placeholder{ color:#ccc; }
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{ color:#ccc; }
table{ border-collapse:collapse; border-spacing:0; }
td,th{ padding:0; }
h1,h2,h3,h4,h5,h6,p,figure,form,blockquote{ margin:0; font-weight:normal; line-height:1em; margin-bottom:0;}
ul,ol,li,dl,dd{ margin:0; padding:0; }
ul,ol{ list-style:none; box-sizing:border-box;}
/* reset */


/*loading*/
.loading{ width:100vw; height:100%; min-height:100vh; position:fixed; left:0; top:0; z-index:9999; display:flex; justify-content:center; align-items:center; background-color: rgba(0,0,0,.8);}
/*loading 圖*/
.loading-circle circle{ -webkit-animation:c1_2 9s linear infinite,c1_3 4.5s infinite; -moz-animation:c1_2 9s linear infinite,c1_3 4.5s infinite; animation:c1_2 9s linear infinite,c1_3 4.5s infinite; stroke-width:2px; }
@-webkit-keyframes c1_2{0%{stroke-width:0; } 10%{stroke-width:4; } 75%{stroke-width:4; } 90%{stroke-width:0; } 100%{stroke-width:0; } }
@-webkit-keyframes c1_3{
0%{stroke-dasharray:104,156; stroke-dashoffset:-52; } 16%{stroke-dasharray:1,156; stroke-dashoffset:-52; }
16.01%{stroke-dasharray:1,156; stroke-dashoffset:-208; } 33%{stroke-dasharray:104,52; stroke-dashoffset:-104; }
33.01%{stroke-dasharray:104,52; stroke-dashoffset:-104; } 49%{stroke-dasharray:1,156; stroke-dashoffset:-104; } 
49.01%{stroke-dasharray:1,156; stroke-dashoffset:52; } 66%{stroke-dasharray:104,52; stroke-dashoffset:156; }
66.01%{stroke-dasharray:104,52; stroke-dashoffset:156; } 82%{stroke-dasharray:1,156; stroke-dashoffset:156; }
82.01%{stroke-dasharray:1,156; stroke-dashoffset:156; } 99.99%{stroke-dasharray:104,52; stroke-dashoffset:256; }
}

/* Firefox隱藏滾動bar */
html {overflow: -moz-hidden-unscrollable;height: 100%;}
/* Chorme隱藏滾動bar */
body::-webkit-scrollbar {display: none;}
body {
	/* IE/Edge隱藏滾動bar */
    -ms-overflow-style: none;
    /* Firefox隱藏滾動bar */
    height: 100%;overflow: auto;	
	/*文字對齊*/
	text-align: left;text-justify:inter-ideograph;-ms-word-break: break-all;-ms-word-wrap: break-all;-webkit-word-break: break-word;-webkit-word-wrap: break-word;word-break: break-word;word-wrap: break-word;
} 

/*slick*/
.slick-slider{ height:100%; }
.slick-slide{ opacity:0; width:100%;}
.slick-slide.slick-active{ opacity:1; width: 100%;}
.slick-dotted.slick-slider{ margin-bottom:60px; }
.slick-dots li{ border-radius:50%; border:solid 1px; width:10px; height:10px; border-color:transparent; background:#68401b; opacity:.3;}
.slick-dots li.slick-active{ background:#000;border-color:#68401b; background:#68401b; opacity:1; }
.slick-dots li button{ width:100%; height:100%;}
.slick-dots li button:before{ content:''; display:none; }
.slick-arrow{ width:16px; height:16px; z-index:2; border:solid 4px rgba(0, 0, 0, 0.3); border-right:none; border-top:none;  transition:all .6s;}
.slick-prev{ left:0; transform:translateX(-100%) rotate(45deg); }
.slick-next{ right:0; transform:translateX(100%) rotate(-135deg);}
.slick-arrow:before{ content:''; display:none;  }
.slick-slide img{display:block; width:100%; height:auto; }


/*卷軸樣式*/
.mCSB_inside>.mCSB_container{ margin-right:0; }
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color:#fff; }
.mCSB_scrollTools .mCSB_draggerRail{ background-color:rgba(255,255,255,.4); }


/*共用內容*/
html{ position:relative; }
html.fixed{ position:fixed; }
body{ height:100%; min-height:100vh; position:relative; overflow-x:hidden; font-size: 10px;}
html,body{ background-color: linear-gradient(to right, #89d5c9, #89d5c9, #89d5c9);; }
/*為了解決footer下方謎樣空白*/
iframe{ position:absolute; }


/*header*/
header ,header nav{ background:#000;} 
header{ position:fixed; top:0; left:0; width:100%; z-index:90; transition:all .6s ease-in-out;}
header .header-container{ display:flex; justify-content:space-between; align-items:center; padding:15px 25px; }
header .header-container .logo{ width:145px; height:27px; }
header .header-container .logo svg{ width:auto; height:100%; }
header .header-container .logo svg > *{ fill:#fff; }
header nav{ position:fixed; bottom:0; left:0; width:100%; height:0; overflow:hidden; transition:background .3s cubic-bezier(.17,.67,.83,.67); transform:translateY(0);}
header nav .mainMenu-box{ width:100%; height:100%; overflow:auto; border-radius:5px; background:#fff;}
header nav ul.mainMenu{ display:flex; justify-content:center; flex-wrap:wrap; flex-direction:column; align-items:center;  margin:30px 15px; padding-right:30px;  }
header nav ul.mainMenu > li{list-style-type: none; text-align:left; margin:0 15px; padding: 1em 0; font-size:1.8rem; width:100%; max-width:480px;}
header nav ul.mainMenu > li h4{ color:#f72f33; border-left:solid 4px #f72f33;font-size:.8em; font-weight:600; display:block; margin: 0 0 .8em 0; padding-left:.4em; text-align: left; } 
header nav ul.mainMenu > li > a{ width:100%; border-radius:50px; padding: 0; font-size:1em; line-height:1.3; } 
header nav ul.mainMenu > li > a:after{ content:''; width:0; height:2px; background:#fff; display:block; transform:translateY(6px); transition:all .6s;}
header nav ul.mainMenu > li + li{ border-top:dotted 2px #000; }
header nav ul.mainMenu > li > a.mtop{padding-top:0em; }
.navToggle{ width:37px; height:27px; box-sizing:border-box; cursor:pointer;}
.navToggle span ,.navToggle span:before ,.navToggle span:after{ display:block; width:100%; height:4px; background:#fff;} 
.navToggle span{ position:relative; top:50%; transform:translateY(-50%);}
.navToggle span:before ,.navToggle span:after{ content:''; position:absolute; }
.navToggle span:before{ top:-10px; }
.navToggle span:after{ bottom:-10px; }

.navToggle.navToggle01 span{ transition:background .3s .6s;}
.navToggle.navToggle01 span:before{ transition:transform .1s .3s ,top .3s .7s; }
.navToggle.navToggle01 span:after{ transition:transform .1s .3s ,bottom .3s .7s;}
.navCheck{ display:none; font-size:0; opacity:0; pointer-events:none; }
.navCheck:checked ~ .navToggle.navToggle01 span{ background:none; transition:background 0s;}
.navCheck:checked ~ .navToggle.navToggle01 span:before{ top:0; transform:rotate(135deg); transition:top .2s .1s,transform .2s .6s;}
.navCheck:checked ~ .navToggle.navToggle01 span:after{ bottom:0; transform:rotate(225deg); transition:bottom .2s .1s,transform .2s .6s;}
.navCheck:checked ~ nav{ padding:20px 25px 30px; max-height: 100vh; width: 100vw;}


/* ---------- 頁面滑動動態 ---------- */
header.hide{ transform:translateY(-240%); }

/* 右 登錄序號抽 */
.fixed-box.hide{ display: ; }

/* 下方加碼抽 */
.stickers-scroll.hide{ display: none; }
.stickers-scroll.hasbottom{ bottom: 45px; }

/* tabs scroll fixed */
.tabs.scrollfixed{ position: fixed; left: 0; top: 0; z-index: 999; transition:all .6s ease-in-out;}
.tabs.hastop{ top: 57px; transition:all .6s ease-in-out; box-shadow: rgb(0 0 0 / 40%) 0px 15px 10px -15px; }

/* kv */
.kv-container{width: 100vw; max-width: 100vw; line-height: 0; padding: 0;}
.kv-container.act .bounceInDown{ animation:bounceInDown .7s;  }
.kv-container.act .bounceInUp{ animation:bounceInUp .6s .1s both; }
.kv-slid_m{display: none;}

/* tab-錨點選單 */
.tabs{display:flex; width: 100%;transition:all .6s ease-in-out;}
.tabs li{ flex: 1;cursor: pointer; box-shadow:inset 0px 15px 10px -15px #910000;}
.tabs li a{display:flex;width:100%;height: 100%;text-decoration: none;color: #fff;font-weight: bold;font-size: 3em;text-align: center;padding: 20px 0;box-shadow: 8px 8px 16px #9100005C;transition:all .6s ease-in-out;cursor: pointer;align-items: center;justify-content: center; flex-wrap: wrap; }


/* GotoTop */
.gototop { width: 60px; height: 60px; position:fixed; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1.6em; font-weight: bold; right:20px; bottom:70px; cursor:pointer; border: 2px solid #D1AE3B; border-radius: 50%; background:rgb(255,255,255,.9); color: #C8161D; transition: .5s;} 
.gototop img{ width:auto; height:50px; }
.gototop i { font-size: 1.2em; margin-top: -5px; }
.gototop:hover { background: #D1AE3B; color: #fff; transition: .5s; }
.gototop:hover i { color: #fff; transition: .5s; }
/* 右下登錄序號抽ad */
.register-number {position:fixed; right:12px; bottom:140px; cursor:pointer; transition:.5s;}
.register-number:hover { bottom:150px; transition:.5s;}
.register-number img{ width:auto; height:140px; border-radius: 10px; box-shadow: 1px 1px 8px rgba(0,0,0,.3);}


/* ------------------ 
Extra large devices (pc) 
------------------ */
@media screen and (min-width:1200px){ 
	/*header*/
	.navToggle{ transform:scaleX(.8); transition:transform .3s cubic-bezier(0.78, 2.21, 0.51, 0.32); }
	.navToggle:hover { transform:scaleX(1); }
	.navCheck:checked ~ .navToggle.navToggle01{ transform:scaleX(1); }
	/* kv */
	.index footer{ display: flex; flex-direction: row; justify-content: center; color: #fff; margin-top: 0px;}
	.index .kv-container .images-block .images-bg:before{ padding-top:38.6%; min-height:528px; } 

}


/* ------------------ 
Large devices (tablets) 
------------------ */
@media screen and (max-width:1199.98px){
	/*header*/
	header nav ul.mainMenu > li{ width:100%; }
	/* kv */
	.index .kv-container .images-block .images-bg{ max-width:605px; } 
	.index .kv-container .images-block .images-bg:before{ padding-top:100%; } 
	.index .kv-container { min-height: auto; }  

}


/* ------------------ 
Small devices (phones) 
------------------ */
@media screen and (max-width:767.98px){
	/*header*/
	header .header-container{ padding:15px; }
	header .header-container .logo{ width:109px; height:20px; }
	header nav{ align-items:initial; }
	.navToggle{ width:27px; height:20px;  }
	.navToggle span, .navToggle span:before, .navToggle span:after{ height:2px; }
	.navToggle span:before{ top:-8px; }
	.navToggle span:after{ bottom:-8px; }
	.navCheck:checked ~ nav{ padding:0 15px 30px;  }
	/* 輪播 */
	.slick-dotted.slick-slider {margin-bottom: 40px;}
	/* wrap */
	.wrap{padding: 0;}
	/* tab */
	/* #tab1{ top: -80px;}
	#tab2,#tab3{top: -60px;} */
	.tabs.hastop{top: 50px;}
	.tabs li a{font-size: 1.8em;padding: 16px 0;}
	/* footer */
	footer div p{font-size: 1em;}
	.gototop{right: 18px;bottom: 70px;}
	.gototop img {width: auto;height: 48px;}

}