@charset "utf-8";

body {width:100%;margin: 0; padding:0;overflow-x:hidden; overflow-y:scroll; position:relative; background:#d6f6e7;  }
	@media screen and (max-width:767px){
		body { width:100%; background-size:100%;}
	}
/*全域 套用 */
.for_pc { display:block !important; }
.for_pc2 { display:inline-block !important; }
.for_mobile { display:none !important;}
.for_mobile2 { display:none !important;}
.for_pc2 , .for_mobile2{display:inline-block !important;}


@media screen and (max-width:767px){
	.for_pc { display:none !important;}
	.for_mobile { display: block !important;}
	.for_mobile2 { display: inline-block !important;}
	.for_pc2{display:none !important;}
}

/*滑鼠hover 顯示動畫*/
.hover{
	-webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
    -ms-transition: transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
	transition: all 0.2s ease;}
.hover:hover{transform:scale(0.97); 
	-webkit-transform:scale(0.97);
    -moz-transform:scale(0.97);
    -ms-transform:scale(0.97);
    -o-transform:scale(0.97);
	filter:brightness(110%);
}

/***透明度動畫 ******/
.opacity{animation:opacity 3s ease;}
@keyframes opacity{
	0%{opacity:0;}
	100%{opacity:1;}	
}

/*全BOX版面*/
.WRAPPER { position: relative;margin: 0 auto;	padding: 0;	width:100%; min-width:1220px; max-width:2000px; ; overflow: hidden;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;/*border-left:3px solid #ffdbc0;border-right:3px solid #ffdbc0; box-shadow:0px 0px 15px #9e1831 , 0px 0px 15px #9e1831; */background:#d6f6e7 url("float_bg.png?t=1760421722589") bottom center fixed no-repeat;/*background-blend-mode:hard-light;*/}
.WRAPPER img {border:0; vertical-align:top;}
.WRAPPER a { text-decoration:none;  display:block;}
.WRAPPER .Area{  margin:0 auto; position:relative;}
.WRAPPER .mainArea {  padding: 0; position:relative;z-index: 2;max-width: 1220px;margin:0px auto;}
@media screen and (max-width:767px){
	
	.WRAPPER { padding-bottom:0px; margin:0 auto; display: block; min-width:100%; max-width:100%;border-left:none;border-right:none;box-shadow:none;}
	.WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:100%;max-width: 100%;}
}
		

		
		
/********header logo***************************/			
.Area.logoBox{width:100%;margin:0 auto; padding:20px 0px 12px 0px;overflow:hidden;background:; z-index:9; position:absolute;  }	
.logoBox .momologo{width:340px;height:38px; display:block;overflow:hidden;margin-left:10px;float:left;}	
.logoBox .momologo .Home{width:65%;float:left;height:100%;background: url(logo_mo.png?t=1760421722589) left center no-repeat; background-size:100%;}	
.logoBox .momologo .Page{width:35%;float:left;height:100%;background: url(logo_tv.png?t=1760421722589) left center no-repeat; background-size:100%;}
/**.logoBox .momologo .Home:hover{background:url(logo_mo_1.png?t=1760421722589) right center;}**/
/**.logoBox .momologo .Page:hover{background:url(logo_tv_1.png?t=1760421722589) left center;}**/

		
.Area.cut00 .float{position:absolute;width:2000px;  left:50%; margin-left:-1000px;top:0px;z-index:0;opacity:1;animation: float 4.5s ease infinite , float 3s ease infinite;z-index:1;}

.Area.float_bg1{position:absolute;width:2000px;height:100%;left:0;right: 0;top:600px;z-index:0;background-position:top center ; pointer-events:none;opacity:0;transition: all 0.6s linear;}
.Area.float_bg1.scroll{opacity:1;}

.Area.cut01 .float_1{position:absolute; z-index:1;  left:50%; margin-left:-1000px; top:50px;animation: float1 7s infinite ease;}
@keyframes float1{
	0%,100% {transform: translateY(4%);}
	50% {transform: translateY(-4%);}
}
@keyframes float {
	0% { transform: translate(0%,0%) scale(0.98); }
	50%{ transform: translate(0%,1%) scale(0.99); }
	100%{transform: translate(0%,0%) scale(0.98);}		
}

/*****************************************************************************************************/	
	
.Area.cut01{position:relative;overflow:hidden;width:100%;height: 755px; margin-top: -6px; }
.Area.cut01 .mainArea {position:relative;overflow:hidden;margin-top: 15px;}
.Area.cut01  .bk_bg{ position:absolute; width:1470px;height:auto; top:50px;left:0; right: 0;margin: 0 auto;z-index:3;}
.Area.cut01  .title{ position:absolute; width:900px;height:auto; top:75px; left:0; right: 0; z-index:2;margin:0 auto; animation: big_title 1.5s linear  infinite;}
.Area.cut01  .momologo{position:absolute;width:40%;top:0%; left:0%; z-index:2;}
 @keyframes big_title{
	0%{transform: scale(1) ;}
	50%{transform: scale(0.96) ;}
	100%{transform:scale(1) ;}
 }
.Area.cut01 .circle{position:absolute; top:-250px;margin-left: 50%;  left:-550px; width:1100px;height: auto; animation: light1 0.5s linear ;background-size: 100%; opacity: 1;
	
	-webkit-animation:money 90s linear 0s infinite normal;
		-moz-animation:money 90s linear 0s infinite normal;
		-o-animation:money 90s linear 0s infinite normal;
		-ms-animation:money 90s linear 0s infinite normal;
		animation:money 90s linear 0s infinite normal;
		animation-fill-mode:money 90s linear 0s infinite normal;

}
@keyframes light1 {
	0%,100%{transform: translate(0%,0%) rotate(0deg) ;opacity:0;}
	40%{transform: translate(10%,0%) rotate(0deg) ;opacity:1;}
	80%{transform: translate(20%,0%) rotate(0deg) ;opacity:0;}
}
@keyframes money {
	0%{transform: translate(0%,0%) rotate(0deg);}
	100%{transform:translate(0%,0%)  rotate(360deg) ;}
	}


.Area.cut01 .fly1{position:absolute; width:900px;height:auto; top:60px; left:0; right: 0; z-index:1;margin:0 auto; animation:  fly1 0.5s linear ;background-size: 100%; }
.Area.cut01 .fly2{width:100%;height:auto;position:absolute; top:0;left:0;right: 0;
animation:  fly2 1.8s linear infinite;background-size: 100%; }

@keyframes fly1 { 
	0%{transform: scale(1) ;}
	50%{transform: scale(1.1) ;}
	100%{transform:scale(1) ;}
}
@keyframes fly2 { 
	0%{transform: scale(1) ;}
	50%{transform: scale(1.3) ;}
	100%{transform:scale(1) ;}
}
@keyframes fly3 { 
	0% {transform: translateY(-1%); }
	50% {transform: translateY(0%);}
	100% {transform: translateY(-1%);}
}

			 		 
@media screen and (max-width:767px){
	
	.Area.cut01{  margin-top:0px;background:url(bk_m.jpg?t=1760421722589) no-repeat center top ;background-size: 100%;height: 95vw;}
	.Area.cut01  .fly1{width:100%;  top:7%; left:0; right: 0; z-index:1;margin:0 auto;  }	
	.Area.cut01  .bg_01{width:110%; margin-left:-5%; margin-top:2.8vw; }
	.Area.cut01 .circle{top: -24vw;  left: -8%;  margin: 0 auto; width: 120%;  opacity: 1;}

}


.Area.cut01 .pic_01{width:721px;position:absolute; left:50%; margin-left:-1050px; top:-325px;animation:tossing 2s -1s linear infinite both;}
.Area.cut01 .pic_02{width:721px;position:absolute; left:50%; margin-left:330px; top:-325px;animation:tossing 2s linear infinite both;}
.Area.cut01 .pic_03{width:100%;position:absolute; margin:0 auto; padding: 0 0; top: -22%;animation: float1 4.5s ease infinite , float 3s ease infinite;z-index:1;}
.Area.cut01 .float_1{position:absolute; z-index:1;  left:50%; margin-left:-1000px; top:50px;animation: floewr 7s infinite ease;}
@keyframes floewr{
	0%,100% {transform: translateY(4%);}
	50% {transform: translateY(-4%);}
}
@keyframes float {
	0% { transform: translate(0%,0%) scale(0.98); }
	50%{ transform: translate(0%,1%) scale(0.99); }
	100%{transform: translate(0%,0%) scale(0.98);}		
}

/*****************************************************************************************/

.Area.cut02{ padding-bottom:0px;margin-top: -30px;/*background:#ffbbd0;*/}
.Area.cut02 .TVtitle{display:block;margin:0px auto 20px auto;width: 70%;}
.Area.cut02 .box{overflow:hidden; position:relative;display: flex;justify-content: center;}
.Area.cut02 .box .btn {position:relative;display:block ;/*background:#000; opacity:0.7; */}
.Area.cut02 .box .btn img { width: 100%;}
.Area.cut02 .box .btn:nth-of-type(1){ }
.Area.cut02 .box .count{position:absolute;width:148px; font:600 18px "Century Gothic", Arial, "Microsoft JhengHei";overflow:hidden;color:#fff;  background:#4b8bef; border-radius:100px;left:10%;bottom:19%; text-align:center; letter-spacing:0.5px;padding: 3px 0px;}


/**警語**/
.Area.cut02 .warningBox{ overflow:hidden;position:relative;margin-top: 15px;}
.Area.cut02 .warningBox span{color:#ef004e;}
.Area.cut02 .warningBox p{ margin:0px; padding:0px ;font-size:17px;letter-spacing:1.5px; line-height:24px; text-align:center; font-weight:bold;color:#08487f;}
.Area.cut02 .warningBox a{display: inline;text-decoration:underline;color:#08487f;letter-spacing:1px;}


@media screen and (max-width:767px){
	.Area.cut01  .bk_bg{position:relative; width: 100%; top: 0%; left: 0%;margin: 0 auto;z-index: 2; }
	.Area.cut01  .title{ position: absolute; top: 10%; left: -3%; width: 106%;z-index:1; animation: big_title 1.5s linear  infinite; right: 0;margin: auto;}
	.Area.cut02{ padding-bottom:0vw;margin-bottom:0vw;margin-top:-53px;}	
	.Area.cut02 .box .bk_02{width:100%;z-index: 1; }
	.Area.cut02 .box .btn.one {position:absolute;display:block;width:62%;height:75%; bottom:0%;left:3%;margin-left: 0px;}
	.Area.cut02 .box .btn.linkPage01 {position:absolute;width:31%;height:37%; top:26%;right:2.5%;}
	.Area.cut02 .box .btn.linkPage02 {position:absolute;width:31%;height:37%; bottom:0%;right:2.5%;}
	
	.Area.cut02 .box .count{font: bold 3.1vw  "Century Gothic", Arial, "Microsoft JhengHei"; letter-spacing:0.5px;padding:0.5vw 0vw; width:21vw;left:43%;bottom:0.8%;}
	
	.Area.cut02 .warningBox{width:95%;padding-bottom:2.5vw;margin:1.5vw auto  0 auto;}
	.Area.cut02 .warningBox p{width:100%;margin:1px auto 0px auto; font-size:3.1vw;letter-spacing:0px;line-height:4.5vw;}
	.Area.cut02 .warningBox a{ display:inline-block;}
	.Area.cut02{ padding-bottom:0px;height: auto;}
	.Area.cut02 .box{overflow:hidden; width:100%;position:relative;margin-top: -10px;display: block;}
	

}



/****************************精選活動  輪播**************************/

.Area.cut033{ padding-bottom:0px; padding-top:20px; margin-bottom:0px; overflow:hidden;position:relative;}
.Area.cut033 .mainArea {padding:50px 0px 0px 0px; background-size:100%; background-repeat:no-repeat;}
.activeOut{width:62%;position:relative;margin:10px auto 0 auto;z-index:2;overflow:hidden;padding-bottom:30px; padding-top:5px;}
.activeOut .active_box{width:95%; margin:0 auto; position:relative; box-shadow:0px 0px 0px 0px #dd1552; border-radius:20px; }
.activeOut .box_acty{overflow:hidden;border:3px solid #3386ff;background:#3386ff;  border-radius:10px;}
.activeOut .box_acty .swiper-wrapper{width:100%;border-radius:20px;} 
.activeOut .box_acty .swiper-wrapper  .swiper-slide{display:block; margin:0vw 0vw 0vw 0vw ;border-radius:0px;} 
.activeOut .box_acty .swiper-wrapper  .swiper-slide  img{width:100%;display:block;border-radius:0px;} 


.activeOut .button { background-color:rgba(255,255,255,0.9); box-shadow:0 0 0 10px rgba(255,255,255,0.9), 0 0 15px 10px rgba(0,0,0,0.1); position:absolute;top:135px;}
.activeOut .swiper-button-next, 
.activeOut .swiper-button-prev {display:block;opacity:0;}
.activeOut .swiper-button-next,
.activeOut .swiper-button-prev {}
.activeOut:hover .swiper-button-next, 
.activeOut:hover .swiper-button-prev { display: block;opacity:1;}
.activeOut .swiper-button-next{
     right: 12px !important; 
}
.activeOut .swiper-button-prev  {
    left: 12px !important; 
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: -23px !important;
    width: 100%;
}


@media screen and (max-width:767px){

	.Area.cut033{ padding-bottom:0vw; margin-bottom:-10px; padding-top:3vw;}
	.Area.cut033 .mainArea {padding:3vw 0px 0vw 0px; background-image:none ! important;}
	.activeOut{width:98%;margin:0vw auto 0 auto;padding-bottom:8vw;padding-left:0px;}
	.activeOut .active_box{width:95%;border-radius:10px; box-shadow:0px 0px 0px 0px #dd1552;}
	.activeOut .box_acty{border-width:0.4vw; border-radius:10px;}
	.activeOut .box_acty .swiper-wrapper{width:100%;border-width:0.3vw;border-radius:0px;} 
	.activeOut .box_acty .swiper-wrapper  .swiper-slide{display:block; margin:0vw 0vw 0vw 0vw ;border-radius:0px;} 
	.activeOut .box_acty .swiper-wrapper  .swiper-slide  img{width:100%;display:block;border-radius:0px;} 

	.activeOut .swiper-button-next, 
	.activeOut .swiper-button-prev {display:none;opacity:0;}
	.activeOut .swiper-button-next,
	.activeOut .swiper-button-prev {}
	.activeOut:hover .swiper-button-next, 
	.activeOut:hover .swiper-button-prev {display:none;opacity:0;}
	.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
		bottom: -25px !important;
		width: 100%;
	}
	.swiper-pagination-bullet { width: 6px; height: 6px;}
	.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:3px}	
	.Area.cut033 .brightnessbg{display:block;height:35vw;z-index:0;}

}




/*****************精選分館**********************/

.Area.kind_area{position:relative;z-index:9;margin-top:10px;}
.Area.kind_box{width:1200px; height:auto;position:relative;margin:20px auto 0px auto;padding:25px 0px;}
.Area.kind_box .bg_title{width:595px; margin:0 25%; }
.Area.kind_box ul{width:100%; list-style:none;overflow:hidden; padding:0px; margin:10px auto 0 auto;padding-bottom:50px; text-align:center;}
.Area.kind_box li{list-style:none; padding:0px;display:inline-block;text-align:center; width:150px; margin:1% 0.5%; opacity:0;position:relative;pointer-events:none;}
.Area.kind_box li:last-child{padding-right:0px; }
.Area.kind_box li a{ width:100%;display:block;}
.Area.kind_box li a img{ width:100%;display:block;}

.Area.kind_box ul.flipInX li:nth-of-type(1){animation: flipInX  0.3s ease ;opacity:1;pointer-events:auto;}
.Area.kind_box ul.flipInX li:nth-of-type(2){animation: flipInX  0.5s ease ;opacity:1;pointer-events:auto;}
.Area.kind_box ul.flipInX li:nth-of-type(3){animation: flipInX  0.7s ease ;opacity:1;pointer-events:auto;}
.Area.kind_box ul.flipInX li:nth-of-type(4){animation: flipInX  0.9s ease ;opacity:1;pointer-events:auto;}
.Area.kind_box ul.flipInX li:nth-of-type(5){animation: flipInX  1.1s ease ;opacity:1;pointer-events:auto;}
.Area.kind_box ul.flipInX li:nth-of-type(6){animation: flipInX  1.3s ease ;opacity:1;pointer-events:auto;}
.Area.kind_box ul.flipInX li:nth-of-type(7){animation: flipInX  1.5s ease ;opacity:1;pointer-events:auto;}
.Area.kind_box ul.flipInX li:nth-of-type(8){animation: flipInX  1.7s ease ;opacity:1;pointer-events:auto;}
.Area.kind_box ul.flipInX li:nth-of-type(9){animation: flipInX  1.9s ease ;opacity:1;pointer-events:auto;}
.Area.kind_box ul.flipInX li:nth-of-type(10){animation: flipInX 2.1s ease ;opacity:1;pointer-events:auto;}

@keyframes flipInX{
	0%{transform: translateY(20%); opacity:0;}
	50%{transform: translateY(20%); opacity:0;}
	100%{transform: translateY(0%);opacity:1;}		
}

@media screen and (max-width:767px){	


	.Area.kind_box{width:100%; height:auto;position:relative;margin:10vw auto 8vw auto;padding:5px 0px; }
	.Area.kind_box .bg_title{width:88%; margin:0 6%;padding: 0 0;}
	.Area.kind_box ul{width:100%; padding:0px; margin:10px auto 0 auto;padding-bottom:2vw; text-align:center;}
	.Area.kind_box li{list-style:none; padding:0px;width:27%; margin:1% 1%;}

}



/*****************************************************************/

.apple_txt{text-align: center; width: 100%; padding: 20px 0px 80px 0px; color: #4d4d4d; font-size: 14px;}
.apple_txt p{width:90%;display:block;margin:0 auto;}
		
@media screen and (max-width:767px){
	
	.apple_txt{padding:3vw 0vw 15vw 0vw; font-size:12px;}
	 #kind_01{margin-top:18vw;}
}	
	

	
.blackBox.agree_more .box ul{padding: 0; margin: 0;text-align: center; width:100%; overflow:hidden;}
.blackBox.agree_more .box img{ display:block;  width: 70%;margin:10px auto; float:none;}


.blackBox.agree_more  .box .content .page{display:none; width:100%; box-sizing: border-box; text-align: left; }
.blackBox.agree_more  .box .content  .imgArea{float:left; width:100%; display:block;}
.blackBox.agree_more  .box .content  {float:left; width:100%; display:block; /* overflow-y:scroll;overflow-x:hidden; eight:600px !important;*/}

.blackBox.agree_more  .box   ul{ width: 100%;list-style: none; overflow: hidden; padding: 0; margin:0; background-color: #eee;}
.blackBox.agree_more  .box   ul  li{width: calc(100%/3); float: left; text-align: center; font-size:24px; font-family:"微軟正黑體"; color: #333; padding:10px 0px;cursor:pointer;}
#agree_more4  .box   ul  li{width: calc(100%/2);}
.blackBox.agree_more  .box   ul  li.click{background:#f51490; color:#fff;}


	
@media screen and (max-width:767px){
	

	.blackBox.agree_more  .box   ul  li{width: calc(100%/3); float: left; text-align: center; font-size:16px;padding:2.5vw 0px; font-weight:800;}
	#agree_more4  .box   ul  li{width: calc(100%/2);}
	/*.blackBox.agree_more  .box .content{max-height:390px  !important;}*/
	.blackBox.agree_more .box img{ display:block;  width: 100%;margin:2vw auto; float:none;}
	
	
}	

/****************館別********************************/
.kindtv{width:1220px;margin:auto;padding-top: 10px;padding-bottom: 80px;}
.kindtv ul{width:88%;padding:0px;position:relative;display:block;padding-top:10px; margin:0px auto ;overflow:hidden;text-align:center;}
.kindtv ul li{float:none;display:inline-block; box-sizing:border-box;text-align:center;margin: 0.5% 0.5%; width: 17%;}
.kindtv ul li img{width:100%;}

@media screen and (max-width:767px){
	.kindtv{width:100%;margin: auto;overflow:hidden;padding:10px 0px 30px 0px;height: auto;}
	.kindtv ul{width:100%;}
	.kindtv ul li{margin: 1% 1%; width: 21%;}
	.kindtv ul li img{width:100%;}

}