@charset "utf-8";

body {margin: 0; padding:0; background:#6e0003; background: url(bgg2.jpg?t=1751514417903) bottom center fixed;}
	@media screen and (max-width:767px){
		body { width:100%; background-size:100%;background:#150034;}
}
/*全域 套用 */
.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;}
.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(115%);
}


/*全BOX版面*/
.WRAPPER { position: relative;margin: 0 auto;padding:0;width:100%; min-width:1220px; max-width:2000px;overflow: hidden;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica; }
.WRAPPER img {display:;border:0; vertical-align:top;}
.WRAPPER a { text-decoration:none;  display:block;}
.WRAPPER .Area{ margin:0 auto; position:relative;width:100%;}
.WRAPPER .Area .mainArea {display:block;margin:0 auto 0 auto;padding:0; width:1220px;position:relative;}

@media screen and (max-width:767px){
	
	.WRAPPER { min-width:100%;max-width:100%; background-size:100%;background:url(bgbg.jpg?t=1751514417903) top center fixed;}
	.WRAPPER .Area .mainArea {width:100%;}
	
}
		
		
/********header logo***************************/			
.logoBox{width:100%;margin:0 auto; padding:12px 0px; position:relative;overflow:hidden;/*background:#e6048d;*/}	
.logoBox .momologo{width:350px;height:42px; display:block;overflow:hidden;margin-left:30px;}	
.logoBox .momologo .Home{width:62%;float:left;height:100%;background:url(logo_mo.png?t=1751514417903) right center no-repeat;}	
.logoBox .momologo .Page{width:38%;float:left;height:100%;background:url(logo_tv.png?t=1751514417903) left center no-repeat; }
.logoBox .momologo .Home:hover{background:url(logo_mo_1.png?t=1751514417903) right center;}
.logoBox .momologo .Page:hover{background:url(logo_tv_1.png?t=1751514417903) left center;}
.momologo_m {display:none;}

@media screen and (max-width:767px){
	.momologo_m{display: block;position:absolute;margin-top:0px;margin-left:0px;}
	.momologo_m img{width:160px;}
}

/*********主視覺*****************************************************/	
.Area.cut01 .mainArea .title_01{display:block; width:960px; margin:10px auto 0px auto;/* padding-left:70px;*/}
.Area.cut01{position:relative; }
.Area.cut01 .bg_01{position:absolute; top:0px;left:0px;}
@media screen and (max-width:767px){
	.Area.cut01{margin-bottom:4vw;margin-top:10vw;}	
}	
	
.Area .AE-top{position:absolute;display: block; top:-16px;width: 120%;}
			 
	/****************light********************/
	.Area.cut01 .light01 {width:15%;top:-8%;left:0%;opacity:0.6;position: absolute;
		transform-origin:center top;
		-webkit-animation:light01 4s 0s both infinite;
		-moz-animation:light01 4s 0s both infinite;
		-o-animation:light01 4s 0s both infinite;
		-ms-animation:light01 4s 0s both infinite;
		animation:light01 4s 0s both infinite;
	}
		@keyframes light01 {
	0%,100% {transform:scale(1,1) rotate(-20deg); opacity:0.8;}
	50% {transform:scale(1,1) rotate(20deg); opacity:0;}
	}
	.Area.cut01 .light02 {width:15%;top:-8%;left:20%;opacity:0.8;position: absolute;
		transform-origin:center top;
		-webkit-animation:light01 4s 0s both infinite;
		-moz-animation:light01 4s 0s both infinite;
		-o-animation:light01 4s 0s both infinite;
		-ms-animation:light01 4s 0s both infinite;
		animation:light01 4s 0s both infinite;
	}
		@keyframes light02 {
	0%,100% {transform:scale(1,1) rotate(-30deg); opacity:0.8;}
	50% {transform:scale(1,1) rotate(20deg); opacity:0;}
	}
	.Area.cut01 .light03 {width:15%;top:-8%;right:15%;opacity:0.8;position: absolute;
		transform-origin:center top;
		-webkit-animation:light03 4s 0s both infinite;
		-moz-animation:light03 4s 0s both infinite;
		-o-animation:light03 4s 0s both infinite;
		-ms-animation:light03 4s 0s both infinite;
		animation:light03 4s 0s both infinite;
	}
		@keyframes light03 {
	0%,100% {transform:scale(1,1) rotate(25deg); opacity:0.8;}
	50% {transform:scale(1,1) rotate(-25deg); opacity:0;}
	}
	.Area.cut01 .light04 {width:15%;top:-8%;right:35%;opacity:0.8;position: absolute;
		transform-origin:center top;
		-webkit-animation:light03 4s 0s both infinite;
		-moz-animation:light03 4s 0s both infinite;
		-o-animation:light03 4s 0s both infinite;
		-ms-animation:light03 4s 0s both infinite;
		animation:light03 4s 0s both infinite;
	}
		@keyframes light04 {
	0%,100% {transform:scale(1,1) rotate(-35deg); opacity:0.8;}
	50% {transform:scale(1,1) rotate(-25deg); opacity:0;}
	}
	/****************light********************/

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

.Area.cut02{ padding-bottom:0px; margin-top:15px;}
.Area.cut02 .TVtitle{display:block;width:90%;margin:-19px auto -23px auto}
.Area.cut02 .box{overflow:hidden; width:100%;position:relative;}
.Area.cut02 .box .btn {position:relative;float:left;display:block ; overflow:hidden; /*background:#000; opacity:0.7; */}
.Area.cut02 .box .btn img { height:235px;}
.Area.cut02 .box .btn:nth-of-type(1){ margin-left:15px;}
.Area.cut02 .box .count{position:absolute;width:140px; font:600 18px "Century Gothic", Arial, "Microsoft JhengHei";overflow:hidden;color:#14756d;  background:#fff;; border-radius:100px; 
right:25%;bottom:16%; text-align:center; letter-spacing:0.5px; background:;}


/**警語**/
.Area.cut02 .warningBox{display:block;width:1100px; overflow:hidden;position:relative;margin:0px auto 20px auto;}
.Area.cut02 .warningBox span{color:#fffca2;}
.Area.cut02 .warningBox p{ margin:0px; padding:0px ;font-size:17px; letter-spacing:1.5px; line-height:24px; text-align:center; font-weight:400;color:#07322f;}
.Area.cut02 .warningBox a{ display:block;text-decoration:underline;color:#cb1111;letter-spacing:1px;}


@media screen and (max-width:767px){
	.Area.cut02{ padding-bottom:0vw;margin-bottom:-1vw;margin-top:0px;}	
	.Area.cut02 .box .bg_02{width:100%;}
	.Area.cut02 .box .btn.one {position:absolute;display:block;width:62%;height:79%; bottom:5%;left:-1%;}
	.Area.cut02 .box .btn.linkPage01 {position:absolute;width:31%;height:37%; top:23%;right:2.5%;}
	.Area.cut02 .box .btn.linkPage01 {position:absolute;width:31%;height:37%; top:16%;right:2.5%;}
	.Area.cut02 .box .btn.linkPage02 {position:absolute;width:31%;height:37%; bottom:5.5%;right:2.5%;}
	
	.Area.cut02 .box .count{font: bold 3.1vw  "Century Gothic", Arial, "Microsoft JhengHei"; letter-spacing:0.5px;padding:0vw 0vw; width:21vw;left:42.5%;bottom:1.5%;}
	
	.Area.cut02 .warningBox{width:95%;padding-bottom:2.5vw;margin:2vw auto  0 auto;}
	.Area.cut02 .warningBox p{width:100%;margin:1px auto 0px auto; font-size:3.1vw;letter-spacing:0.5px;line-height:4.5vw;}
	.Area.cut02 .warningBox a{ display:inline-block;}

}


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

.Area.cut03{ padding-bottom:0px; padding-top:0px; margin-bottom:-20px; overflow:hidden;position:relative;}
.Area.cut03 .mainArea {padding:50px 0px 20px 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 5px #abdd98; border-radius:20px; }
.activeOut .box_acty{overflow: hidden; border: 1px solid #ffffff; background: #ffe9a8;  border-radius:20px;}
.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:20px;} 
.activeOut .box_acty .swiper-wrapper  .swiper-slide  img{width:100%;display:block;border-radius:5px;} 


.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.cut03{ padding-bottom:0vw; margin-bottom:-10px; padding-top:1.5vw;}
	.Area.cut03 .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: 9px; box-shadow: 0px 0px 0px 3px #658000;}
	.activeOut .box_acty{border-width:1px; border-radius:10px;}
	.activeOut .box_acty .swiper-wrapper{width:100%;border-width:0.3vw;border-radius:10px;} 
	.activeOut .box_acty .swiper-wrapper  .swiper-slide{display:block; margin:0vw 0vw 0vw 0vw ;border-radius:10px;} 
	.activeOut .box_acty .swiper-wrapper  .swiper-slide  img{width:100%;display:block;border-radius:10px;} 

	.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.cut03 .brightnessbg{display:block;height:35vw;z-index:0;}

}





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


.Area.kind_area{position:relative;z-index:9; height:110px;margin-top:50px;}
.Area .kind_box{width:1280px;position:relative;margin:20px auto 50px auto;padding:15px 0px;border-radius:100px;overflow:hidden;background:#fee0e7;border:2px solid #fee0e7;transition:0.3s;}
.Area .kind_box.fixed{ position:fixed; margin:0px auto 0px auto;padding:15px 0px;  top:-2px; left:50%; margin-left:-642px;background:#fee0e7;border-radius:0px 0px 15px 15px;}

.Area .kind_box ul{list-style:none;overflow:hidden; padding:0px; margin:0px auto 0 auto;padding-bottom:0px; text-align:center; }
.Area .kind_box  li{list-style:none; padding:0px 17px;display:inline-block;border-left:0px solid #fee8b2;text-align:center; }
.Area .kind_box  li:nth-of-type(1){border-left:0px solid #8fa4ab;padding-left:0px; }
.Area .kind_box  li:last-child{padding-right:0px; }
.Area  .kind_box li a{display:block;color:#11004e; font-size:20px;text-align:center;font-weight:800;}
.Area  .kind_box li a:hover{color:red;}
.Area  .kind_box li a.scroll{color:red;}/*****卷軸滑到 選單a顏色換色******/





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

.apple_txt{text-align:center; width:100%; padding:20px 0px; color:#08544e;font-size:14px; background:;  }
.apple_txt p{width:90%;display:block;margin:0 auto;}	
@media screen and (max-width:767px){
	.apple_txt{padding:5vw 0vw; font-size:12px;}
	
}	
	
.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  {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%/2); float: left; text-align: center; font-size:24px; font-family:"微軟正黑體"; color: #333; padding:10px 0px;cursor:pointer;}
.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;}
	
	
}