@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;700;900&display=swap');
@import url(../fonts/style.css);
/*
  danny 202107
  1. $Reset
  2. $font 
  3. $body,html
  4. $共用
  5. $Mobile
  6. $Pad
  7. $橫的版型
  8. $Pc
  9. $1025~1279
*/

/* $Reset
--------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0}fieldset,img{border:0;width: 100%;}address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}ol,ul{list-style:none}q:before,q:after{content:''}abbr,acronym{border:0}
a{;font-weight: normal;background:transparent;text-decoration:none;color:#00ccff;text-decoration: underline; cursor:pointer;line-height:1em;display:inline-block}a:active{outline:0;color:#00ccff;text-decoration: underline}input,textarea,button,select,option{border:0;margin:0;outline:none;padding:0;font-size:1.6rem;font-family:'Noto Sans TC','Open Sans','Arial','Microsoft JhengHei','Apple LiGothic Medium',sans-serif;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance: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}



/* $font
--------------------------------------------------------------------------------------*/
:before ,:after{ font-family:'icomoon','Microsoft JhengHei','Apple LiGothic Medium';}


/* $body,html
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; font-family:'Microsoft JhengHei','Apple LiGothic Medium', Arial, Helvetica, sans-serif; font-size:10px; background-image: url("../images/bg_L.jpg");background-size: cover; }
*{ box-sizing: border-box;}

body{ position: relative; }

/* $共用
--------------------------------------------------------------------------------------*/
/*----清除浮動技巧----*/
.clearfix:before,.clearfix:after {content: ' ';display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/*----清除浮動技巧----*/

/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}

/* float */
.floatL{ float: left;}
.floatR{ float: right;}

/* button reset、input reset、select reset */
button, input, select{ font-family:'Microsoft JhengHei','Apple LiGothic Medium', Arial, Helvetica, sans-serif; border: none; }

span{color: #fff000;}



/* $Mobile
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; font-size: 0.85rem; -webkit-text-size-adjust:none; background-color:#a31b20; }
.video_list{ display:flex; flex-wrap:wrap; }
.video_list li a{ position:relative; display:block; overflow:hidden; background:#000;}
.video_list li a .play{ position:absolute; width:20%; padding-top:20%; display:block; background:url('../images/train_play.svg'); background-size:cover; top:50%; left:50%; transform:translate(-50%,-50%);}
.video_list li img{ position:relative; width:100%; transition:all .6s;}
.popup{ position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,.9); z-index:100; display:flex; justify-content:center; align-items:center; transform:scale(0); transition:all .2s; transition-timing-function:cubic-bezier(.41,.2,.83,.67);}
.popup.on{ transform:scale(1); transition:all .4s; transition-timing-function:cubic-bezier(.19,1.27,.64,1.08); }
.popup .video_block{ position:relative; width:90vw; max-width:800px; padding:4px; background:#fff201; border-radius:2px;} 
.popup .video_block .video{ width:100%; padding-top:56%; position:relative; }
.popup .video_block .video iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }
.popup .video_block .close{ position:absolute; top:0; right:0; width:2.5rem; height:2.5rem; cursor:pointer; transform:translateX(110%); transition:all .4s;}
.popup .video_block .close:before,.popup .close:after{ position:absolute; content:''; width:80%; height:1px; display:block; background:#fff; top:-80%; left:-80%; transform:rotate(-45deg); }
.popup .video_block .close:after{ transform:rotate(45deg); }
.pc{display: none;}
.wrap{ max-width: 640px; width: 100%;  margin: auto; position: relative; }
.bg{ ; background-repeat:repeat-y; background-position:center 0,center 100%; background-image: url("../images/bg.jpg"); overflow: hidden;vertical-align: middle; min-height: calc(100vh - 90px );background-size: cover;}
.container{ padding: 0 16px; }
.mask{ width:100%; height:100%; background:rgba(0,0,0,.8); position:fixed; z-index:99; display:flex; align-items:center; justify-content:center; top:0; left:0; }
/*header*/
header{ width: 100%; max-width: 640px; height: 50px; background:#e60012; position:fixed; top:0; left:50%; transform: translateX(-50%); z-index:90; transition:all .6s ease-in-out;  }
header .header-container{ height: 100%; display:flex; justify-content:space-between; align-items:center; box-sizing: border-box; padding: 0 20px; position: relative;   }
header .header-container .logo{ width:120px; height:20px; display: hidden; }
header .header-container .logo svg{ width:auto; height:100%; }
header .header-container .logo svg > *{ fill:#FFF4CD; }
header nav{ position:absolute; top:0; left:0; width:100%; height:100vh; max-height:100vh; transform:translateY(0); padding:50px 20px 30px; width: 100%; background:#e60012; display: none; }
header nav .mainMenu-box{ width:100%; height:100%; overflow:auto; border-radius:5px; background:#fff; -ms-overflow-style: none; height: 100%;overflow: auto;}
header nav .mainMenu-box::-webkit-scrollbar{ display: none; }
header nav ul.mainMenu{ display:flex; justify-content:center; flex-wrap:wrap; flex-direction:column; align-items:center;  margin:30px 15px; }
header nav ul.mainMenu > li{list-style-type: none; text-align:left; padding: 1em 0; font-size:1.2rem; width:100%; color: #000; cursor: pointer; }
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; } 
header nav ul.mainMenu > li > a{ width:100%; border-radius:50px; padding: 0; font-size:1.5rem; line-height:1.5; color: #000; } 
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:30px; height:30px; box-sizing:border-box; cursor:pointer;}
.navToggle span ,.navToggle span:before ,.navToggle span:after{ display:block; width:100%; height:2px; 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:50px 20px 30px; max-height: 100vh; width: 100%;}*/
.kv{ line-height: 0; }
.kv img{ width: 100%; }
.kv .text_block{ text-align:justify; margin-bottom:16px;text-align: center; }
.kv .text_block p{ font-size:clamp(1.4rem, 4.6vw, 1rem); color:#fff; line-height:1.4; font-weight:bold; letter-spacing:.025em;text-align: left;width: 90%;margin: auto;}
.banner-box_m{ box-sizing: border-box; padding: 0 16px; margin: 0px 0; }
.banner-box_m>a{ width: 100%; }
.banner-box_m>a+a{ margin: 0 0 0 0; }
.banner-box_m img{ width: 100%; }
.banner-box_pc{ display: none;margin-top: -30px;}
.banner-box{ box-sizing: border-box; padding: 0 16px; margin: 0px 0; }
.banner-box.banana{ background: #009de2; }
.banner-box{ box-sizing: border-box; padding: 0 16px; margin: 0px 0; }
.table-box{ box-sizing: border-box; padding: 0 16px; margin: 0px 0;width: 135%;margin-left: -20%; }
.img-box{ line-height: 0; }
.img-box img{ width: 100%; }
.video-box{ width: 100%; height: 0; padding-bottom: 56.25%; position: relative; }
.video-box iframe{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.tit-box{ width: 92%; height: 50px; margin: 0 auto; border-radius: 5px; border: 3px solid #fff201; display: flex; justify-content: center; align-items: center; font-size: 2.4rem; color: #fff210; font-weight: bold; position: relative; }
.notetit{ margin: 50px auto 0; }
.note-box{ width: 92%; margin: 20px auto 0; padding: 0 0 50px; }
.note{ font-size: 1.6rem; line-height: 1.5; font-weight: bold; color: #fff;  list-style: decimal ; margin: 0 0 0 18px; }
.tit-box.game+.img-box{/*  display: none; */ }
.ig-box{ width: 100%; box-sizing: border-box; padding: 0 4%; background: #fff9a3; position: relative; }
.ig-box p{ color: #000; font-size: 1.5rem; line-height: 1.5; text-align: center; margin: 0 0 5px; }
.ig-slick{ border: 15px solid #fff; line-height: 0; }
.ig-slick li{ position: relative; }
.ig-slick li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.ig-box .slick-ui{ display: flex; justify-content: space-between; width: 82%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.ig-box .slick-ui span{ font-size: 5rem; opacity: 0.8; }
.ig-box .slick-dots{ display: flex; justify-content: center; margin: 10px 0 0; }
.ig-box .slick-dots li+li{ margin: 0 0 0 15px; }
.ig-box .slick-dots li{ width: 10px; height: 10px; background: #fff; border-radius: 50%; text-indent: -9999px; }
.ig-box .slick-dots li.slick-active{ background: #00a0d6; }
.bgcolor01{ background: #009de2; box-sizing: border-box; padding: 0 0 0 0; }
.box{ padding: 0; }
.content{ margin: 0 0 0 22px; text-align: justify; }
.center_block{ height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.full-img{ line-height: 0; padding: 0 0 30px 0;  }
.full-img img{ display: block; width: 100%; box-sizing: border-box;   }
.banana{ background: #009de2; }
.btn{width:40%;background:#ffc200;color:#e60611; font-size:clamp(1.2rem, 4vw, 1.6rem); padding:.4em 1.2em;margin: 0 auto 2% auto;border-radius:3em;text-align: center;font-weight: bold; cursor: pointer ;}
table{ width:100%; border-collapse:collapse; background:#eae4ce; margin:24px auto 0 auto; font-size:.8rem; line-height:1.5rem; border:0; } 
table th{ color: #fff;border: 1px solid #fff; background:#e60012;}
table tr{border: 1px solid #fff;}
table td{border: 1px solid #fff;}

/*抽獎form*/

.form_area {
	width: 100%;
	padding: 20px;
	text-align: center;
	/*mandy*/
	display: flex;
	flex-wrap: wrap; /* 允許換行 */
	gap: 10px; /* 每個 input 之間的間距 */
	color: white;
}

.form_area h1{font-size: 1rem;line-height: 2rem;color: #fff;}
.form_area img{width: auto;}
/*.form_area input{padding:5px 15px; background:#fff; border:1px solid #ccc;border-radius: 5px;font-size: 1rem;width: 100%; }*/
	.form_area input {
		padding: 5px 15px;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 1rem;
		width: calc(50% - 5px);
		
	}

.form_area input + input{ margin-top:8px; }
.form_area2 input[type="button"]{padding:5px 15px; background:#ddd; border:0 none;cursor:pointer;-webkit-border-radius: 5px;border-radius: 5px;width: 80px;font-size: 1rem;margin-left: 10px;text-align: center;color: #979797;}
.form_area2{ text-align: center;}
.form_area2 > div{ display:flex; align-items:stretch; justify-content:center; padding:0 20px; } 
.form_area2 img{width: auto;}
.form_area2 input {padding:5px 15px; background:#fff; border:1px solid #ccc;/*cursor:pointer;*/-webkit-border-radius: 5px;border-radius: 5px;font-size: 1rem;width: 30%; font-size: 0.8rem;}
.btn_p5{width: 50%;margin: 30px auto;}

.inforwindow{width: 300px;text-align: center;padding: 40px;background: #fff;border-radius: 10px;border: 1px solid #e60012;z-index: 999;position: absolute;top:30%;}
.inforwindow input[type="button"]{padding:5px 15px; background:#00973e; border:0 none;cursor:pointer;-webkit-border-radius: 5px;border-radius: 5px;width: 80px;font-size: 1rem;margin-left: 10px;text-align: center;color: #fff;margin-top: 30px;}

.hint{width: 100%;text-align: center;}
.hint h1{color:#ffc200; font-weight:bold; font-size:clamp(2.8rem, 9.3vw, 3rem); display:inline-block; }
.hint p{color:#fff; font-weight:bold; font-size:clamp(1.4rem, 4.6vw, 1.8rem);}

.result{width: 90%;margin: auto;text-align: center;}
.result h1,
.result h2{color:#ffc200; font-weight:bold; font-size:clamp(2.8rem, 9.3vw, 3rem); display:inline-block;}





/* font */

.t-light{color:#fff201; font-size: 18px; font-weight: bold;margin-top: 16px;}
.title-text{padding: 8px; color: #fff201; margin:16px 0 0 0; text-align: center; font-weight: bold;}
.title-text:before,
.title-text:after{ content:''; background: url('../images/icon.png') no-repeat; -webkit-background-size: contain; background-size: contain; display: inline-block; width: 30px; height: 30px; vertical-align: middle; margin: 0 4px; }
p{padding:1% 0;font-size: 1.2rem;}
hr{border:1px solid #fff201; margin:16px 0;}
.intro-title{ padding-top: 2em; }

.pink-box{ background-color: #e1147f; border-radius: 16px; padding: 12px 20px; }
.copyright{ color: #ffffff; text-align: center; padding: 1em; background:#e60012; }

/* gototop */
.btn-top{ width: 50px; height: 50px; display: none; position: fixed; right: 10px; bottom: 50px; cursor: pointer; }





/* ----------------------------電腦版---------------------------- */

@media screen and (min-width:1200px){
html,body{ width: 100%; font-size: 0.85rem; -webkit-text-size-adjust:none;background-image: url("../images/bg_L.jpg");background-size: cover; }
.pc{display: block}
.mobile{display: none;}
.banner-box_pc{ box-sizing: border-box; padding: 0 16px 10px 16px; margin: 0px 0; display: block;}
.banner-box_pc>a{ width: 100%; }
.banner-box_pc>a+a{ margin: 20px 0 0 0; }
.banner-box_pc img{ width: 100%; }
.banner-box_m{ display: none;}
.banner-box{ box-sizing: border-box; padding: 0 16px; margin: 0px 0; display: block;}
.banner-box>a{ width: 100%; }
.banner-box img{ width: 100%; }
.table-box{ box-sizing: border-box; padding: 0 16px; margin: 0px 0;width: 125%;margin-left: -14%; }
/* font */
.t-light{font-size: 32px;}
.title-text{font-size: 40px;}
p{font-size: 16px;}

/* gototop */
.btn-top{ width: 60px; height: 60px; display: none; position: fixed; right: 10px; bottom: 50px; cursor: pointer; }
.p-box a:link{text-decoration: underline;color: #14387f;font-size: 2rem;line-height: 3rem;}
.pro_title ul li:nth-child(2){width: 100%;font-size: 2.1rem;}
	.p-box span{color: #ff0000;font-size: 3rem;}
	.p-box p{font-size: 1.8rem;}

/*抽獎form*/

.form_area {width: 600px;padding: 20px;margin: auto;background:;text-align: center;}
.form_area h1{font-size: 1rem;line-height: 2rem;color: #fff;}
.form_area img{width: auto;}
.form_area input {padding:5px 15px; background:#fff; border:1px solid #ccc; -webkit-border-radius: 5px;border-radius: 5px;font-size: 1rem;width: 400px; }
.form_area2 input[type="button"]{padding:5px 15px; background:#ddd; border:0 none;cursor:pointer;-webkit-border-radius: 5px;border-radius: 5px;width: 80px;font-size: 1rem;margin-left: 10px;text-align: center;color: #979797;}
.form_area2{ text-align: center;}
.form_area2 img{width: auto;}
.form_area2 input {padding:5px 15px; background:#fff; border:1px solid #ccc; -webkit-border-radius: 5px;border-radius: 5px;font-size: 1rem;width: 130px; }
.btn_p5{width: 20%;margin: 30px auto;}
/* 讓發票/隨機碼變成兩欄並列，各 5 個 */
.form_area .invoice-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 兩欄 */
  gap: 12px 16px;                  /* 列間距 / 欄間距 */
  max-width: 860px;                /* 你可改成想要的寬 */
  margin: 0 auto;
}

/* 蓋掉原本 input 的固定寬與 input+input 的 margin-top */
.form_area .invoice-grid input{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  margin-top: 0 !important;
}

/*.inforwindow{width: 300px;text-align: center;padding: 40px;background: #fff;border-radius: 10px;border: 1px solid #ef7b00;z-index: 999;position: absolute;top:36%}*/
/*.inforwindow input[type="button"]{padding:5px 15px; background:#ef7b00; border:0 none;cursor:pointer;-webkit-border-radius: 5px;border-radius: 5px;width: 80px;font-size: 1rem;margin-left: 10px;text-align: center;color: #fff;margin-top: 30px;}*/
}
/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){

	html,body{ width: 100%; font-size: 0.85rem; -webkit-text-size-adjust:none;background-image: url("../images/bg_L.jpg");background-size: cover; }
    bg{ background-color: #b081b7;overflow: hidden;vertical-align: middle; min-height: calc(100vh - 90px );}

}