@charset "utf-8";
/* CSS Document */

/*基本*/
body { margin: 0; padding: 0;}
	@media screen and (max-width:767px){ 
		body { background-size: 125%; width: 100%;}
	}


/*全BOX版面*/
.WRAPPER { position: relative; display: inline-block; margin: 0; padding :0; width: 100%; overflow: hidden;}
.WRAPPER img { border: 0; vertical-align: top;}
.WRAPPER a { text-decoration: none; display: block;}
.WRAPPER .mainArea {  margin: 0 auto; width: 1220px; font-family:"Century Gothic", "微軟正黑體", sans-serif; position:relative;}
.WRAPPER .mainArea a { padding: 0; margin:0; text-decoration: none;}
.Area .list_00 ul { display: inline-block;}
.Area .list_00 li { list-style: none; float: left; overflow: hidden;}
@media screen and ( max-width:736px){
	.WRAPPER { min-width: inherit;}
	.WRAPPER .mainArea { padding-bottom: 0; width:100%;}
	.WRAPPER img { width: 100%; height: auto;}
}


/*隱鑶*/
.for_pc {}
.for_phone { display: none !important;}
	@media screen and (max-width:767px){
		.for_pc { display: none !important;}
		.for_phone { display: inherit !important;}
		.Areabottom { margin-bottom: 8vw;}
}


/*可拖移廣告icon(修改)*/
.Area_hammerAD { z-index: 300; display: none; position: fixed; bottom: 0; right: 0; transform: translate3d(0,200px,0); /*background-color: rgba(0,0,0,0.5);*/}
.Area_hammerAD .box { position: relative; margin-right: 10px; opacity: 1;}
.Area_hammerAD img { width: 100%; height: auto;}
.Area_hammerAD .closeButton a { display: block; cursor: pointer; position: absolute; width: 20px; height: 20px; border-radius: 50%; font: bold 20px/1em "Century Gothic"; color: #FFF; text-align: center; background-color: rgba(0%,0%,0%,0.5); text-decoration: none; z-index: 2;}
    @media screen and (min-width:768px){
      .Area_hammerAD { position: fixed; z-index: 300; left: 50%; right: auto; bottom: 50px; display: block; width: 210px; height:200px; transform: translateX(618px);}
      .Area_hammerAD .closeButton a { top: 0; right: 0;}
      .Area_hammerAD_phone { display: none;}
    }
    @media screen and (max-width:767px){
      .Area_hammerAD { display: block; width: 26%;}
      .Area_hammerAD .closeButton a { top: 1vw; right: 1vw;}
    }


/*APP下載*/
.app { margin-bottom: 8%;}
.app ul { width: 100%; margin: 0; padding: 0;}
.app ul li { width: 50%; list-style: none; overflow: hidden; float: left;}


/*版頭*/
.Area_top {height: 472px;}
.Area_top .t1{ position: absolute; top:50px; left:180px; z-index: 1;}
.Area_top .top_bg{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.Area_top .btn_more {position: absolute; top: 70px; right: -98px; width: 80px; z-index: 9;}
.Area_top .btn_list {position: absolute; top: 120px; right: -98px; width: 80px; z-index: 9;}
	@media screen and (max-width:767px){
	.Area_top { height:52vw;}
	.Area_top .top_bg { position: absolute;}
	.Area_top .t1 { position: relative; top:7vw; left:18vw; width:80%; z-index: 4;}	

	.Area_top .btn_more { position: absolute; z-index: 9; width: 14%; top: 4vw; right: 0;}		

}

/*調整MB box 間距*/
.Area_content .box{ position: relative; }
	@media screen and (max-width:767px){
        .Area_content { margin-bottom:0vw; }
		.Area_content .box{width: 100%;padding: 0vw;top: 0vw;}
        }

/*區塊_共同設定*/
.Area_content{ position: relative;}
.Area_content .titleBox{padding: 0;padding: 0 0 70px;}
.Area_content .titleBox img{margin: 0 auto;width: 100%;}
.Area_content .titleBox .moreBtn{position: absolute; width: 90px; height: 46px; top:18px; right: 80px; background: url(more_btn.png?t=1756278528121) no-repeat center top; background-size: 100%;}
.Area_content .titleBox .moreBtn{position: absolute; width: 90px; height: 46px; top:40px; right: 150px; background: url(more_btn.png?t=1756278528121) no-repeat center top; background-size: 100%;z-index: 50}
@media screen and (max-width:767px){
	.Area_content{ }
	.Area_content .titleBox {padding: 0 0 5vw;}
	.Area_content .titleBox2 {position: absolute; top:5vw; left: 82vw; width: 10vw;z-index: 30}
}


/*01_推薦好禮*/
.Area_content01 {display: flex;gap: 24px;flex-direction: column;margin-top: 52px;}
.Area_content01 .box01 { margin: 0;}

/*集氣*/
.Area_content01 .PD_slide img { width: 100%; margin: 0 auto;}
.Area_content01 { position: relative;}
.Area_content01 p { padding: 0; position: absolute; left: 823px; top:685px; font: normal 73px/86px "Century Gothic"; color: #000;}
.Area_content01 .pd { z-index: 5; position: relative; padding: 0; top: 0; left: 0;}
.Area_content01 .recommendBox_title { position: relative; margin: 4% 0 1% 0;}
/*推薦碼*/
.Area_content01 .recommendBox { position: relative;padding-bottom: 40px;width: 90%;margin:0 5% 10%;}
.Area_content01 .recommendBox img { display: block; width: 100%; margin: 0;}
.Area_content01 .recommendBox p { padding: 0; margin: 0; position: absolute; top: 40px; left: 450px; font-family:"Arial"; font-size: 52px; color: #ea27c2; line-height: 76px; text-align: left;}
.Area_content01 .recommendBox .invite_btn { display: block; padding: 0; position: absolute ; top:135px;margin: 0 23%;}
.Area_content01 .recommendBox .invite_btn img { width: 100%; margin: 0;}
.Area_content01 .recommendBox .go_bt:hover { filter: brightness(120%); transform: translateY(0px);}

@media screen and (max-width:767px){
.Area_content01 {margin-top: 4vw;gap: 3vw;}		
.Area_content01 .box01 {width:90%;margin: 0 auto;}	
.Area_content01 .PD_layout[data-pd-col-phone="1"] li  { width: 85%; height: 20vw !important; margin: 0 auto .5em; }
.Area_content01 .PD_slide img { height: -webkit-fill-available; height:fill-available !important; aspect-ratio: auto 861/190;}
/*集氣*/
.Area_content01 p { left: 51vw; top: 99vw; font: normal 9vw/13vw "Century Gothic"; z-index: 1;}	
.Area_content01 .pd { z-index: 5; position: relative; margin: 0; padding: 0;  left: 0; width: 100%;}
.Area_content01 .recommendBox_title { position: relative; top: 3vw; left: 0; width: 100%; margin: 0 auto;}	
/*推薦碼*/
.Area_content01 .recommendBox { position: relative;padding-bottom: 1vw;width: 90%;margin: 0 auto 15%;}
.Area_content01 .recommendBox img { display: block; width: 100%; margin: 0 auto 0;}
.Area_content01 .recommendBox p { top: 4vw; left:44.5vw; font-size: 6vw; line-height: 7.5vw;}
.Area_content01 .recommendBox .invite_btn { top: 15.3vw; z-index: 5;}
.Area_content01 .recommendBox .invite_btn img { width: 100%; margin: 0;}
}

/*已加入+已首購人數*/
.Area_content01 .totalman { position: relative; font-family:"Arial"; font-size: 50px; color: #ea27c2; line-height: 77px; text-align: right; font-weight: 600; margin-bottom: 0; left: 0; top: 0;}
.Area_content01 .totalman .login { position: absolute; top: 39px; right: 635px; /*max-width: 170px; overflow: hidden;*/}
.Area_content01 .totalman .order { position: absolute; top: 39px; right: 110px; /*max-width: 170px; overflow: hidden;*/}
@media screen and (max-width:767px){
  .Area_content01 .totalman { font-size: 5.2vw; line-height: 1.41; letter-spacing: -0.025em; left: 0;  width: 100%;}
  .Area_content01 .totalman .login { top: 4.1vw; right: 66%;}
  .Area_content01 .totalman .order { top: 4.1vw; right: 11%;}
}


.content_box:before{
	z-index: -1;
	content: "";
	width: 2000px;
	height: calc(100% + -420px);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 550px;
	background: url(Area02_boxstyle_top.jpg?t=1756278528121) top center / 100% no-repeat,
	 url(Area02_boxstyle_bottom.jpg?t=1756278528121) bottom center / 100% no-repeat,
	  url(Area02_boxstyle_center.jpg?t=1756278528121) bottom center / 100% repeat-y;
	}

@media screen and (max-width:767px){
	.content_box {margin-bottom: 12vw}

	.content_box:before{
		z-index:-1;
		content: "";
		width: 100vw;
		height: calc(100% - 58vw);
		position: absolute;
		left: 0;
		transform: none;
		top: 60vw;
		background: 
		url(mArea02_boxstyle_top.jpg?t=1756278528121) top center / 100% no-repeat,
		url(mArea02_boxstyle_bottom.jpg?t=1756278528121) bottom center / 100% no-repeat,
		url(mArea02_boxstyle_center.jpg?t=1756278528121) top center / 100% calc(95%) repeat-y;
	  
		}
	}


/*02_推薦流程*/
.Area_content02 { padding: 70px 0 100px;}
.Area_content02 .titleBox { position: relative;  z-index: 4}
.Area_content02 .titleBox a { position: relative;top:70px !important;left:900px!important; }
.Area_content02 .swiper-slide {margin-right: 0;}
.Area_content02 .swiper-button-next {right: 0px !important;color: #fff;}
.Area_content02 .swiper-button-prev {left: 0px !important;color: #fff;}
.Area_content02 .Step_Box { width: 80%; margin: 0 auto; overflow: hidden;}
.Area_content02 .swiper-slide img { width:100%; }
.Area_content02 .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom:-15px;}
@media screen and (max-width:767px){
	.Area_content02 { padding: 5vw 0 0; margin: 0;}
	.Area_content02 .swiper-button-next { right: 0 !important;}
    .Area_content02 .swiper-button-prev { left: 0 !important;}
	.Area_content02 .titleBox { position: relative; top: 0; left: 0; width: 100%;}
	.Area_content02 .moreBtn{ right: 31vw; padding: 3vw 0 2vw;}
	.Area_content02 .swiper-slide img{ width: 100%;  margin: 2vw auto;}
    .Area_content02 .Step_Box { width: 96%; margin: 0 auto; }
}

	
/*記錄浮層*/
.refArea { width:760px; position:relative; display:block; margin: 0 auto; padding:20px 100px; height: auto; background-color:rgba(0,0,0,0.8); border-radius:20px;}
.refArea img { vertical-align:bottom;}
.refArea .closeBN a { z-index:2; position:absolute; top:-20px; right:-20px; display:block; width:40px; height:40px; border-radius:50%; border:solid 2px #999999; font:bold 40px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5);text-decoration: none;}
.refArea .closeBN a:hover { background-color:#666; text-decoration:none}
.refArea .title  { margin:0 20px 0px; border-bottom:1px solid #ffd800; font:bold 45px/2em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;  color:#ffd800; text-align:center}
.refArea .box { margin: 10px auto; padding: 20px 20px; text-align:center;}
.refArea .box a { display:block;}
@media screen and (max-width:767px){
		.refArea { width:90%; padding:20px 0}
		.refArea .title  { margin:0 5%; font-size:30px;}
		.refArea .closeBN a { top:-15px; right:-15px; width:30px; height:30px; font-size:30px;}
}


/*分享浮層*/
.FBLINEArea { width:700px; position:relative; display:block; margin: 0 auto; padding:20px 0px; height: auto; background-color:rgba(0,0,0,0.8); border-radius:20px;}
.refArea img { vertical-align:bottom; width:100%;}
.FBLINEArea .closeBN a { z-index:2; position:absolute; top:-20px; right:-20px; display:block; width:40px; height:40px; border-radius:50%; border:solid 2px #999999; font:bold 40px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5);text-decoration: none;}
.FBLINEArea .closeBN a:hover { background-color:#666; text-decoration:none}
.FBLINEArea .title  { margin:0 50px 10px; border-bottom:1px solid #fff59c; font:bold 45px/2em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;  color:#fff59c; text-align:center}
.FBLINEArea .box { margin: 10px auto;}
.FBLINEArea .box a{ display: flex; margin: 20px auto; width:100%; height: 82px;}
.FBLINEArea .box a img{ margin: 0 auto;}
@media screen and (max-width:767px){
		.FBLINEArea { width:90%;}
		.FBLINEArea .title  { margin:0 5%; font-size:30px;}
		.FBLINEArea .closeBN a { top:-15px; right:-15px; width:30px; height:30px; font-size:30px;}
	    .FBLINEArea .box a{ display: block; width: 90%; height:auto; }
		.FBLINEArea .box img{width: 100%;margin: 0; }
}		
	

/*飄-上下*/
.uptodown-play { -webkit-animation:uptodown-play 2s ease-in-out infinite alternate;
				         animation:uptodown-play 2s ease-in-out infinite alternate;}
	@-webkit-keyframes uptodown-play { 
		0%   { -webkit-transform: translate(0,10px); } 
		100% { -webkit-transform: translate(0,0);}
	}
	@keyframes uptodown-play { 
		0%   { transform: translate(0,-10px);} 
		100% { transform: translate(0,0);}
	}

/*飄-下上*/
.downtoup-play { -webkit-animation:downtoup-play 2s ease-in-out infinite alternate;
				         animation:downtoup-play 2s ease-in-out infinite alternate;}
	@-webkit-keyframes downtoup-play { 
		0% { 
			-webkit-transform: translate(0,0);  
		} 
		100% { 
			-webkit-transform: translate(0,-10px);
		}
	}
	@keyframes downtoup-play { 
		0% { 
			transform: translate(0,0);  
		} 
		100% { 
			transform: translate(0,-10px);
		}
	}



@keyframes bounceIn {
    from,20%,40%,60%,80%,to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3)
    }


    100% {
        transform: scale3d(0.97, 0.97, 0.97)
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1)
    }
}

.bounceIn {
    animation-duration: .75s;
    animation-name: bounceIn
}


/*放大縮小*/
.scaleDraw { -webkit-animation:scaleDraw .5s ; animation:scaleDraw .5s ;}
                @-webkit-keyframes scaleDraw {
                  0%   { transform:scale(0);}
                  100% { transform:scale(1)}
                }
                @keyframes scaleDraw {
                  0%   { transform:scale(0);}
                  100% { transform:scale(1)}
                }


/*放大縮小*/
.zoominzoomout-play { -webkit-animation-duration: 0.7s;  animation-duration: 0.7s; animation-delay:-1s;  -webkit-animation-name: zoominzoomout-play;  animation-name: zoominzoomout-play;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;-webkit-animation-direction: alternate;animation-direction: alternate;}
	@-webkit-keyframes zoominzoomout-play {   
		0%  { -webkit-transform: scale(1); transform: scale(1);} 
		100%{ -webkit-transform: scale(0.95); transform: scale(0.95); }
		}
	@keyframes zoominzoomout-play { 
		0%  { -webkit-transform: scale(1); transform: scale(1); } 
		100%{ -webkit-transform: scale(0.95); transform: scale(0.95);}
	}

/*心跳A*/
.heartbeat-play {-webkit-animation-duration:1.2s;  animation-duration:1.2s;  -webkit-animation-name: heartbeat-play;  animation-name: heartbeat-play;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}
	@-webkit-keyframes heartbeat-play {   
		0%   { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);} 
		60%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		80%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
		100% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		}
	@keyframes heartbeat-play { 
		0%   { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);} 
		60%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		80%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
		100% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
	}


/*心跳A*/
.heartbeat-play {-webkit-animation-duration:1.2s;  animation-duration:1.2s;  -webkit-animation-name: heartbeat-play;  animation-name: heartbeat-play;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}
	@-webkit-keyframes heartbeat-play {   
		0%   { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);} 
		60%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		80%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
		100% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		}
	@keyframes heartbeat-play { 
		0%   { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);} 
		60%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		80%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
		100% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
	}