@charset "utf-8";

body {margin: 0; padding:0;  overflow-x:hidden; overflow-y:scroll; background:#f2cbed;}
@media screen and (max-width:767px){
	body { width:100%;  background:#f2cbed;}

}

/*全域 套用 */
.for_pc { display:block !important; }
.for_phone { display:none !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_phone { display:block !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(115%);
}

/***透明度動畫 ******/
.opacity{animation:opacity 1.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; background:url(bk_01.jpg?t=1762914970686) center center fixed; }
.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;padding:0; width:1220px;position:relative;}

@media screen and (max-width:767px){
	
	.WRAPPER { min-width:100%;max-width:100%;  background:url("images/"bk_01.jpg?t=1762914970686"");background-size:180%;}
	.WRAPPER .Area .mainArea {width:100%;}
}
		
		
/********header logo***************************/			
.Area.logoBox{width:100%;margin:0 auto; padding:20px 0px 12px 0px;overflow:hidden;background:none; z-index:9; position:absolute;  }	
.logoBox .momologo{width:350px;height:42px; display:block;overflow:hidden;margin-left:50px;float:left;}	
.logoBox .momologo .Home{width:70%;float:left;height:100%;background: url(logo_mo.png?t=1762914970686) left center no-repeat;}	
.logoBox .momologo .Page{width:30%;float:left;height:100%;background: url(logo_tv.png?t=1762914970686) left center no-repeat; }
/**.logoBox .momologo .Home:hover{background:url(logo_mo_1.png?t=1762914970686) right center;}**/
/**.logoBox .momologo .Page:hover{background:url(logo_tv_1.png?t=1762914970686) left center;}**/


/*************bgbgbgbgbgbgbgbg****************************************************************************/


.Area.cut00{position:absolute; width:100%;top:0px;left:0px; height:800px; overflow:hidden; background:url(bgbg.jpg?t=1762914970686)  top center no-repeat;}
.Area.cut000{position:absolute; width:100%;top:885px;left:0px; height:350px; overflow:hidden; background-position: top center; background-repeat:no-repeat;}
.pc_bgArea{width:100%; height:100%;position:absolute; top:0px; z-index:-1;background-color:#b4caa1; background-position: top center; background-repeat-y:repeat;}
.Area.float_bg{position:absolute;width:2000px; height:20000px; left:50%; margin-left:-1000px;top:510px;z-index:0; opacity:1;background-position:top center; pointer-events:none;}
@media screen and (max-width:767px){
	.mb_bgArea{width:100%;background-color:#b4caa1; height:100%; background-position:top center; background-size:100%; position:absolute;z-index:0; top:165vw; left:0px; }	
	.pc_bgArea{width:100%;background-size: 120%; }

}	
	


/*********主視覺*****************************************************/	

.Area.cut01{height:637px;position:relative; z-index:1;}
.Area.cut01 .mainArea{width:1220px;  margin:0px auto 0 auto;height:100%;position:relative; }
.Area.cut01 .mainArea .pd_box{width:2000px;position:absolute;height:auto; left:50%; margin-left:-990px;top:0px; animation:slideExpandUp2 1s ease;}
.Area.cut01 .mainArea .pd_box .for_pc{margin-left: 20%;margin-top: 6.5%;width: 1136px; position: absolute; z-index: 4;}
/*
.Area.cut01 .pic01{width: 123px; position: absolute;left: -115px; top: 80px;animation:fadeIn 2s linear , pic01 4s linear infinite; z-index:4;}
.Area.cut01 .pic02{width: 272px;position: absolute; right: -180px; top: 264px;animation:fadeIn 2s linear , pic02 2s ease; z-index:4;}
*/

@keyframes slideExpandUp2 {
	0% {transform: translateY(0%) scaleX(0.9); opacity:0;}
	10% {transform: translateY(0%) scaleX(0.9); opacity:0;}
	20% {transform: translateY(0%) scaleX(0.9); opacity:0;}
	30%{transform: translateY(0%) scaleX(0.9); }	
	40%{transform: translateY(0%) scaleX(0.9); }
	50%{transform: translateY(0%) scaleX(1.1);}
	60%{transform: translateY(0%) scaleX(0.9);}
	70% {transform: translateY(0%) scaleX(1.05);}			
	80%{transform: translateY(0%) scaleX(0.95);		}
	90% {transform: translateY(0%) scaleX(1.02);}	
	100%{transform: translateY(0%) scaleX(1);		}
}
@keyframes pic01{
	0% {transform: translateY(-1%) rotate(10deg); }
	50% {transform: translateY(0%) rotate(0deg);}
	100% {transform: translateY(-1%) rotate(10deg);}
}
@keyframes pic02{
	0%, 45%, 65%, 100%{transform: rotate(0deg);}
	50%, 55%{transform: rotate(-3deg);}
	53%, 58%{transform: rotate(3deg);}	
}

@media screen and (max-width:767px){
	.Area.cut01 .mainArea .pd_box .for_mobile{margin-left: 11%; margin-top: 4%; width: 77%; position: absolute; z-index: 4;}
	.Area.cut01 .pic01_m {width: 53px; position: absolute; left: 46px; top: 172px;animation:fadeIn 2s linear , pic01 4s linear infinite; z-index:4; }
}	
@keyframes shiny{
	0%{opacity:0; filter:brightness(50%) ;}
	100%{opacity:1; filter:brightness(100%) ;}
}

.Area.cut01 .title_box{display: block; width: 523px; float: left; margin-left: 29%; margin-top: 180px; overflow: hidden; position: relative;}
.Area.cut01 .title_box img.picBg{display:block;width:100%;}
.Area.cut01 .title_box .item_title_box{display:block;width:95%;position:absolute;overflow:hidden; top:4%;left:2.5%;z-index:4;}
.Area.cut01 .title_box .item_title_box .swiper-wrapper{width:100%;overflow:hidden;margin:0px; padding:0px;}
.Area.cut01 .title_box .item_title_box .swiper-slide{width:100%; display:block;overflow:hidden;margin:0px; padding:0px;list-style:none;text-align:center;vertical-align:middle;}
.Area.cut01 .title_box .item_title_box .swiper-slide img{width:100%;}

/*.Area.cut01 .float_point01{width:2000px;position:absolute; left:50%; top:-50px; margin-left:-1020px;}*/
.Area.cut01 .bird01{width: 1767px; position: absolute;left: -18%;top: 7%; animation: bg_leaf 1.8s 0.8s ease both , bird01 3s 2.8s infinite;}
/*.Area.cut01 .bird02{width: 2000px; position: absolute; right: -29%; top: 0%; animation: bg_leaf 1.8s 0.8s ease both , bird02 3s 2.8s infinite;}*/
@keyframes bg_leaf {
	0% { transform: translate(0%,2%) scale(0.97);opacity:0;}
	10% { transform: translate(0%,2%) scale(0.97);opacity:0;}
	20% { transform: translate(0%,2%) scale(0.97);opacity:0;}
	30% { transform: translate(0%,2%) scale(0.97);opacity:0;}
	40% { transform: translate(0%,2%) scale(0.97);opacity:0;}
	50%{ transform: translate(0%,2%) scale(0.97);opacity:0;}
	100%{transform: translate(0%,0%)  scale(1);opacity:1;}		
}
@keyframes bird01 {
	0% { transform: translate(0%,0%) scale(1);opacity:1;}
	50% { transform: translate(0%,3%) scale(1.02);opacity:1;}
	100%{transform: translate(0%,0%)  scale(1);opacity:1;}		
}

@keyframes bird02 {
	0% { transform: translate(0%,0%) scale(1);opacity:1;}
	50% { transform: translate(0%,-3%) scale(0.98);opacity:1;}
	100%{transform: translate(0%,0%)  scale(1);opacity:1;}		
}


@media screen and (max-width:767px){
	
	.Area.cut01{margin-bottom:0vw; width:100%;height:auto; background:none;}	
	.Area.cut01 .mainArea{width:100%;margin:0px auto 0 auto;position:relative;left:auto; margin-left:0px;height:auto;}
	.Area.cut01 .mainArea .pd_box{width:100%;position:absolute; left:0%; margin-left:0px; top:1%; animation:shiny 2s ease; }
	.Area.cut01 .title_box{display:block;width:100%;float:none;margin-left:0px;margin-top:0px;position:absolute; top:0vw; left:1%;z-index: 5;}
	.Area.cut01 .title_box img.picBg{ width: 65%; margin:190px auto 0 auto;}
	.Area.cut01 .title_box .item_title_box{display:block;width:100%;position:absolute;overflow:hidden; top:0%;left:0%; }
	.Area.cut01 .title_box .item_title_box .swiper-wrapper{width:100%;overflow:hidden;margin:0px; padding:0px;}
	.Area.cut01 .title_box .item_title_box .swiper-slide{width:100%; display:block;overflow:hidden;margin:0px; padding:0px;list-style:none;text-align:center;vertical-align:middle;}
	.Area.cut01 .title_box .item_title_box .swiper-slide img{width:100%;}
/*	.Area.cut01 .title_02{width:100%;position:absolute; left:0%;top:-10px; z-index:3; animation:shiny2 1.3s ease; }*/
	.Area.cut01 .m_bg{width:100%;}
	.Area.cut01 .float_point03{width:100%;position:absolute; left:0%; top:0px; z-index:8; }
	
	
	@keyframes shiny2{
		0%{opacity:0; }
		50%{opacity:0;}
		100%{opacity:1;}
	}
	
	
}	



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

.Area.cut02{ padding-bottom:0px; margin-top:-15px;position:relative; z-index:2;}
.Area.cut02 .opacity_bg01{width:2000px;height:200px;position:absolute;top:185px;left:50%;margin-left:-1000px;opacity:1;
	background:-webkit-linear-gradient(top , rgba(255,204,214,1) 0% ,rgba(255,204,214,0) 100% ); 
	background:-moz-linear-gradient(top , rgba(255,204,214,1) 0% ,rgba(255,204,214,0) 100% ); 
	background:linear-gradient(top , rgba(255,204,214,1) 0% ,rgba(255,204,214,0) 100% );
}
.Area.cut02 .mainArea {width:1220px;height:auto; margin:0px auto 0px auto;overflow:hidden;}
.Area.cut02 .TVtitle{
    display: block;
    width: 37%;
    margin: 10px auto 0px auto;
}
.Area.cut02 .box{overflow:hidden; width:fit-content; margin:10px auto 0px auto;position:relative; background:;overflow:hidden;padding-top:8px; }
.Area.cut02 .box .btn {position:relative;display:block ; float:left; overflow:hidden; margin-bottom:10px; margin-left:3px; margin-right:3px; /*background:#000; opacity:0.7;*/}
.Area.cut02 .box .btn:nth-of-type(1){}
.Area.cut02 .box .btn:nth-of-type(2){}
.Area.cut02 .box .btn:nth-of-type(3){}
.Area.cut02 .box .btn img.btnbg{}
.Area.cut02 .box .count{position:absolute;width:130px; padding:2px 3px;  font:400 15px "Century Gothic", Arial, "Microsoft JhengHei";overflow:hidden; background:#b248a4;color:#FFFFFF;  border-radius:100px; left:11%;bottom:11%; text-align:center; letter-spacing:0.5px; }

/**警語**/
.Area.cut02 .warningBox{
    display: block;
    width: 676px;
    overflow: hidden;
    position: relative;
    margin: 10px auto 0px auto;
/*	background-color:#FFFFFF95;*/
}
.Area.cut02 .warningBox span{color:#FFF500;}
.Area.cut02 .warningBox p{
    margin: 0px;
    padding: 0px;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 26px;
    text-align: center;
    font-weight: 500;
    color: #10390f;  
}
.Area.cut02 .warningBox a{
    display: inline-block;
    text-decoration: underline;
    color: #b248a4;
    letter-spacing: 1px;
	font-weight: 800;
}


@media screen and (max-width:767px){
	.Area.cut02{ padding-bottom:0vw;margin-bottom:0vw;margin-top:-12vw; }	
	.Area.cut02 .opacity_bg01{height:20vw;top:15vw;}
	.Area.cut02 .mainArea{width:100%;margin:-9px auto 2vw auto; background-color: none;height:auto;}
	.Area.cut02 .box {width:100%; margin:0px auto 0vw auto;  padding-left:0px;padding-top:0vw;background-color: none;}
	.Area.cut02 .box .bg_02{width:100%;}
	.Area.cut02 .box .btn{position:absolute;display:block;margin-bottom:0px; }
	.Area.cut02 .box .btn.one {width:62%;height:70%; top:27%;left:3%;}
	.Area.cut02 .box .btn.two {width:32%;height:35%; top:27%;right:3%;}
	.Area.cut02 .box .btn.three {width:32%;height:35%; top:62%;right:3%;}

	.Area.cut02 .box .count{position:absolute;width:21.5%; padding:1px 1px;  font:400 3vw "Century Gothic", Arial, "Microsoft JhengHei";left:40.5%;bottom:4vw; text-align:center; letter-spacing:0px; }

	.Area.cut02 .warningBox{width:94%;margin:0px auto 0px auto;}
	.Area.cut02 .warningBox p{width:100%;margin:1px auto 0px auto; font-size:3vw;letter-spacing:0.1px;line-height:4.5vw; text-align:center; }
	.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 #fff082; 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 #fcffa4;}
	.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;}

}




/*****************看更多指定商品**********************/



.btn_99{display:block; width:360px; margin:80px auto 80px auto; z-index:9; position:relative;}
.btn_99 img{ width:100%; }
@media screen and (max-width:767px){
	.btn_99{display:block; width:55%; margin:10vw auto 5vw auto;}
	
}	


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

.apple_txt{text-align:center; width:100%; padding:20px 0px; margin:30px 0px;color:#b248a4;font-size:14px; background:;  position:relative;}
.apple_txt p{width:90%;display:block;margin:0 auto;}	
@media screen and (max-width:767px){
	.apple_txt{padding:5vw 0vw 10vw 0vw; font-size:12px; margin:0px 0px; }
	
}	


/*********浮層框***********************/		
	
.blackBox.agree_more .box .content {float:left;width:100%;display:block;/*overflow-y:scroll;overflow-x:hidden; */max-height:600px;}/*max-height要設定-給抽mo幣查詢用*/
.blackBox.agree_more .box .content p{text-align:left;font-size:20px;  margin:0px 0px 10px 0px;}
.blackBox.agree_more .box img.pic{ display:block;  width: 70%;margin:10px auto; float:none;}

.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:19px; font-family:"微軟正黑體";color: #333;padding:11px 0px;cursor:pointer; font-weight:bold;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}


.blackBox.agree_more .box   ul.menuBox2  li span{display:inline-block;color: #333; }
.blackBox.agree_more .box   ul.menuBox3  li span{display:block;color: #333; }
.blackBox.agree_more .box   ul li.click{background:#f51490; color:#fff;}
.blackBox.agree_more .box   ul li.click span{color: #fff;}


.tab{padding:8px 5px !important; }
.tab01{font-weight:bold;color:#000;width:150px;}
.tab02{padding:10px 5px !important; width:150px;}
.tab.tab02 a{background:#f51490;color:#fff; padding:3px 12px; border-radius:50px;display: inline-block;margin:3px 5px;}
.tab.tab02 img{width:40%;}
.tab.tab03 a{background:#f51490;color:#fff; padding:3px 12px; border-radius:50px;display: inline-block;margin:3px 5px;}
.tab.tab03{text-align:left !important; }

.blackBox tr{padding:5px 0px; }
.blackBox td{padding:10px 0px;}


@media screen and (max-width:767px){
	
	.blackBox.agree_more .box .content{margin-top:1.5vw;max-height: 420px;}
	.blackBox.agree_more .box .content p{font-size:16px; margin:0px 0px 10px 0px;}
		
	.blackBox.agree_more .box  img.pic{width: 100%;margin:5px auto; float:none;}
	.blackBox.agree_more .box  img.pic.other{width: 100%;}
	.blackBox.agree_more .box  ul  li{float:left; text-align: center; font-size:1.01em;padding:2.4vw 0px;letter-spacing:-0.5px;font-weight:bold;}
	
	.blackBox.agree_more .box  img{ display:block; margin:2vw auto; float:none;}
	.blackBox.agree_more .box  img.pic{width: 100%;}
	.tab01{width:22%;}
	.tab02{width:18%;}
	.tab03{width:55%;}
	.tab.tab02 a{padding:5px 15px; }
	.tab.tab02 img{width:65%;}
	
	.blackBox.agree_more .box   ul.menuBox2  li span{display:block;font-size:0.9em;}
	


}