@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{background:transparent;text-decoration:none;color:inherit;cursor:pointer;line-height:1em;display:inline-block}a:active{outline: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','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-color: #f2f2f2; }
*{ 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; }





/* $Mobile
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; font-size: 10px; -webkit-text-size-adjust:none; }
.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%; height: 100vh; margin: 50px auto 0; position: relative; }
.bg{ background-image: url("../images/bg.jpg");background-size:contain;background-repeat: no-repeat;background-color: #fff3f7;}
.container{ padding: 0 16px; }

/*header*/
header{ width: 100%; max-width: 640px; height: 50px; background: #e84393; 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; transition:background .3s cubic-bezier(.17,.67,.83,.67); transform:translateY(0); background-attachment: #e84393; padding:50px 20px 30px; max-height: 100vh; width: 100%; background: #e84393; display: none; }
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; }
header nav ul.mainMenu > li{list-style-type: none; text-align:left; padding: 1em 0; font-size:1.8rem; 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.8rem; 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; position: relative;}
.kv img{ width: 100%; }
.banner-box_m{ box-sizing: border-box; padding: 0 16px; margin: 0px 0; position: relative;}
.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; }
.banner-box img{border-radius: 20px;}
.table-box{ box-sizing: border-box; margin: auto;width: 100%;}
.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: 5% auto 0 auto; border-radius: 5px; border: 3px solid #e84393; display: flex; justify-content: center; align-items: center; font-size: 1.8rem; color: #e84393; font-weight: bold; position: relative;text-align: center;padding: 10%; }
/* .tit-box.game:after{ content: '\e90b'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } */
/* .tit-box.game.active:after{ content: '\e90a'; } */
.notetit{ margin: 20px auto 0; }
.note-box{ width: 85%; margin: 20px auto 0; padding: 0 0 20px; }
.note{ font-size: 1.6rem; line-height: 1.5; font-weight: bold; color: #fff;  list-style: decimal ; margin: 0 0 0 18px; }
.note a{color:#0075c2;text-decoration: underline;}
.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; }

/* font */
h1,h2,h3,h4,p,a,li{color: #606060; }
.t-light{color:#e84393; font-size: 18px; font-weight: bold;margin-top: 16px;}
.title-text{padding: 8px; color: #e84393; 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:8px 0;}
hr{border:1px solid #e84393; margin:16px 0;}
.intro-title{ padding-top: 2em; }
.btn{ border: 3px solid #fff; background-color: #0075c2; border-radius: 50px; width: 100%; padding: 8px; margin:8px 0 16px 0; text-align: center; font-size: 24px; font-weight: bold; }
.btn:after{ content: '\f0da'; margin-left: 8px; }
.pink-box{ background-color: #e1147f; border-radius: 16px; padding: 12px 20px; }
.copyright{ color: #ffffff; text-align: center; padding: 1em; background-color: #e84393; }
.btn2{width: 50%;margin: auto;}
.btn2 img{width: 100%;}
/* gototop */
.btn-top{ width: 50px; height: 50px; display: none; position: fixed; right: 10px; bottom: 50px; cursor: pointer; }





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

@media screen and (min-width:1200px){
.pc{display: block}
.mobile{display: none;}
.banner-box_pc{ box-sizing: border-box; padding: 0 16px 10px 16px; margin: 0px 0; display: block;position:relative}
.banner-box_pc>a{ width: 100%; }
.banner-box_pc>a+a{ margin: 0 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; margin: 0px 0;width: 100%;margin:auto }
.tit-box{ width: 92%; height: 85px; margin:20px auto 0 auto; border-radius: 5px; border: 3px solid #e84393; display: flex; justify-content: center; align-items: center; font-size: 2.4rem; color: #e84393; font-weight: bold; position: relative;text-align: center;padding: 0; }
/* font */
.t-light{font-size: 32px;}
.title-text{font-size: 40px;}
p,li{font-size: 22px;}
.btn{ border: 5px solid #fff; padding: 16px; font-size: 44px; }
/* gototop */
.btn-top{ width: 60px; height: 60px; display: none; position: fixed; right: 10px; bottom: 50px; cursor: pointer; }
}


/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){

	.banner-box_pc{ box-sizing: border-box; padding: 0 16px 10px 16px; margin: 0px 0; display: block;position: absolute;top:34.7%;}
	.banner-box_m{display: none;}
	.tit-box{ width: 92%; height: 50px; margin: 30% auto 0 auto; border-radius: 5px; border: 3px solid #e84393; display: flex; justify-content: center; align-items: center; font-size: 2.4rem; color: #e84393; font-weight: bold; position: relative;text-align: center;padding: 0; }

}