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

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


/*全BOX版面*/
.WRAPPER {position:relative; display:inline-block;  margin:0; padding:0;  width:100%;  overflow:hidden; background: url();}
.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:480px;position: relative;}
.Area_top .t1{ position: absolute; top:-4px; left:70px; z-index: 1;}
.Area_top .top_bg{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.Area_top .text {
    position: absolute;
    top: 307px;
    left: 12px;
    width: 960px;
    font-size: 55px;
    font-weight: 700;
    letter-spacing: -0.05em;
    background-clip: text;
    height: 50px;
    line-height: 50px;
    z-index: 2;
    color: #004faf;
    transform: skew(-9deg, 0deg);
    font-family: Arial;
}
.Area_top .top_deco {position:absolute;left: 97px;top: 64px;z-index: 0;animation-delay:1.5s;mix-blend-mode: screen;}
.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:56vw;}
	.Area_top .top_bg { position: absolute;}
	.Area_top .t1 { position: relative; top:0vw; left:9vw; width:82%; z-index: 1;}	
	.Area_top .btn_more { position: absolute; z-index: 9; width: 14%; top: 4vw; right: 0;}	
	.Area_top .text {
		position: absolute;
		top: 29.5vw;
		left: 1vw;
		width: 100%;
		font-size: 5.5vw;
		font-weight: 800;
		letter-spacing: -0.02em;
		background-clip: text;
		height: 10vw;
		line-height: 10vw;
		z-index: 2;
		color: #004faf;
		transform: skew(-10deg, -0deg);

	}
	.Area_top .top_deco {position:absolute;width: 17%;left: 8vw;top: 5vw;z-index: 0;animation-delay:1.5s;mix-blend-mode: screen;}
	/* .Area_top .sub_title ul li img{width: 100%!important;} */
}

/*調整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 { position: absolute; padding: 40px 0 30px;}
.Area_content .titleBox img { margin: 0 auto; width: 100%;}
.Area_content .titleBox .moreBtn { position: absolute; width: 90px; height: 46px; top: 40px; right: 150px; background: url(more_btn.png?t=1761647246842) no-repeat center top; background-size: 100%; z-index: 50;}
@media screen and (max-width:767px){
	.Area_content .titleBox {padding: 0 0 2vw;}
	.Area_content .titleBox2 { position: absolute; top: 5vw; left: 82vw; width: 10vw; z-index: 30;}
}


/*01_朋友推薦碼*/
.Area_content01 { height: auto;}
.Area_content01 .box {position: relative; top: 0;}
.Area_content01 .PD_slide img { width: 100%; margin: 0 auto;}
.Area_content01 .title { position: relative; left: 0; top: 0; width: 100%;}
.Area_content01 .txtBox { font-size: 39px; line-height: 48px; color: #013d4a; text-align: center; padding: 10px 0 20px; font-weight: bold; letter-spacing: -0.5px;}
.Area_content01 .txtBox2 { font-size: 30px; line-height: 40px; color: #013d4a; text-align: center; padding: 0px 0 20px; font-weight: bold; letter-spacing: -0.5px; margin-top:0;}
/*推薦碼*/
.Area_content01 .recommendBox { position: relative;margin-top: 52px;}
.Area_content01 .recommendBox img { display: block; width: 80%; margin: 0 auto 24px;position: relative;z-index: 2;}
.Area_content01 .recommendBox p { padding: 0; margin: 0; position: absolute; top: 107px; left:465px; font-family:"Arial"; font-size: 45px; color: #e72291; line-height: 76px; text-align: left;z-index: 5;font-weight: 800;}
/*按鈕*/
.Area_content01 .recommendBox .btnaArea { width: 70%; margin: 0 auto; overflow: hidden; text-align: center;}
.Area_content01 .recommendBox .btnaArea .btnBox { display: inline-block; margin: 0;}
.Area_content01 .recommendBox .btnaArea .btnBox img { width: 100%;}
@media screen and (max-width:767px){
	.Area_content01 { height: auto;width: 96%;margin-bottom:5vw;}	
	.Area_content01 { padding-bottom: 0;}
	.Area_content01 .title { position: relative; width: 100%;}
	.Area_content01 .box { position: relative; }	
	.Area_content01 .PD_slide img { width: 94%; margin: 0 auto;}
	.Area_content01 .txtBox {font-size: 4.2vw; line-height: 5.5vw; color: #013d4a; text-align: center; padding:2vw 0; font-weight: bold; letter-spacing: -0.5px;}
	.Area_content01 .txtBox2 {font-size: 4.1vw;line-height: 5.4vw; color: #013d4a; text-align: center;padding: 2vw 0 2vw;font-weight: bold;letter-spacing: -0.5px;margin-top: 0vw;}
	/*推薦碼*/
	.Area_content01 .recommendBox { position: relative; top: 0;margin:0 3%;width: 95%;}
	.Area_content01 .recommendBox img { display: block; width: 100%; margin: 0;}
	.Area_content01 .recommendBox p { top: 14vw;left:40vw;font-size: 7vw; line-height: 7.5vw;}
	/*按鈕*/
	.Area_content01 .recommendBox .btnaArea { width: 57%; margin: 0 auto; overflow: hidden; text-align: center; margin-top: 1%;}
	.Area_content01 .recommendBox .btnaArea .btnBox { display: inline-block; margin: 0; width: 100%;}
	.Area_content01 .recommendBox .btnaArea .btnBox img { width: 100%;}	
}

/*02_推薦流程*/
.Area_content02 { padding: 0 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; }
}

/*03_首購禮*/
.Area_content03 .bg {position: absolute; top: 150px;left: 0;width: 960px;}
.Area_content03 .activ_box {position: relative;display: flex;flex-wrap: nowrap;z-index: 2;margin: 0 auto;width: 960px;}
.Area_content03 .activ_box .Area_PD {width: 40%;overflow: hidden;padding: 85px 30px 0;}
.Area_content03 .activ_box .Area_PD .PD_layout ul {display: flex;flex-wrap: nowrap;height: auto;grid-gap:0;width: 100%;margin: 0 auto;}
.Area_content03 .activ_box .Area_PD .PD_layout[data-pd-li=BN] ul{padding: 0 15px}
.Area_content03 .activ_box .Area_BN {width: 51%;padding: 42px 0 0;height: 745px;}
.Area_content03 .activ_box .Area_BN ul {padding:0;position: relative;grid-gap: 29px;}
.Area_content03 .swiper-pagination-bullet { background: #000000; opacity: .5;}
.Area_content03 .swiper-pagination-bullet-active { background: #000000; opacity: 1;}
.Area_content03 .PD_layout .PD h3 {font-size: 30px;}
.Area_content03 .PD_layout .PD h4 {font-size: 20px;}
.Area_content03 .PD_layout .PD p  {height: 5em;line-height: 5em;}
.Area_content03 .PD_layout .PD p .Price {font-size: 60px;}
.Area_content03 .PD_layout .PD p b, .PD_layout .PD p del {font-size: 20px;}
.Area_content03 .PD_layout .PD p small {font-size: 20px;}

@media screen and (max-width: 767px){
.Area_content03 .bg {position: absolute; top: 16vw;left: 0;width:100%;}
/*.Area_content03 { background: url(Area_content01_bg.png?t=1761647246842)top center no-repeat; background-size:100%; height:auto;}*/
.Area_content03 .activ_box {padding: 0;margin: 0 auto;width: 96%;}
.Area_content03 .activ_box .Area_PD {width: 45%;padding: 8vw 0vw;height: 62vw;margin: 0 1vw 0 1vw;}
.Area_content03 .activ_box .Area_PD .PD_layout ul {height: auto;width: 100%;margin: 0 -6%;}
.Area_content03 .activ_box .Area_BN  {width: 60%;padding: 0;margin:5vw 0 0 2vw;height: auto;}	
.Area_content03 .activ_box .Area_BN ul {padding: 0;position: relative;grid-gap: 0.6em;}	
.Area_content03 .activ_box .Area_swiper_box .swiper-pagination { bottom: 3vw !important }
.Area_content03 .swiper-pagination-bullet { background: #000000; opacity: .5;}
.Area_content03 .swiper-pagination-bullet-active { background: #000000; opacity: 1;}
.Area_content03 .PD_layout .PD h3 {font-size: 15px;}
.Area_content03 .PD_layout .PD h4 {font-size: 15px;}
.Area_content03 .PD_layout .PD p  {height: 2em;line-height: 2em;}
.Area_content03 .PD_layout .PD p .Price {font-size: 1.5em;}
.Area_content03 .PD_layout .PD p b, .PD_layout .PD p del {font-size: 12px;}
.Area_content03 .PD_layout .PD p small {font-size: 12px;}
}



@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
}

/*轉轉2*/	
.rotate2-play { -webkit-animation:rotate2-play 5s linear infinite ;
	animation:rotate2-play 5s linear infinite ;}
@keyframes rotate2-play {
0% { 
transform: rotate(0deg);
}
60% { 
transform: rotate(0deg);
}
100% { 
transform: rotate(360deg);
}
}


/*放大縮小*/
.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%);} 
	}