@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; }
.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: 370px;}
.Area_top .t1{ position: absolute; top: 10px; left: 0; z-index: 1;}
.Area_top .top_bg{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.Area_top .deco{ position: absolute;top: 0;width: 100%;  z-index:2;}
.Area_top .deco img{ position: absolute;width: 80%;margin: 0 auto;top: 20px; left: 50%;transform: translateX(-50%);}
.Area_top .deco2 {position: absolute; top: 218px;left: 653px; z-index: 2;}
.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: 36vw;}
	.Area_top .top_bg { position: absolute;}
	.Area_top .t1 { position: relative; top: 0; left: 0; width: 100%; z-index: 4;}
	.Area_top .deco { position: absolute; top: -3vw; left: 0; width: 100vw; z-index: 5;}
	.Area_top .deco img{ width: 80%;}
	.Area_top .deco2 { position: absolute; top: 21.6vw;left: 64vw;width: 14.5%; z-index: 9;}	
	.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 { position: absolute;     padding: 0 0 20px;}
.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=1748333150699) 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: 372px; 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;filter: drop-shadow(1px 2px 4px #ff9eab);}
.Area_content01 .recommendBox .btnaArea .btnBox img { width: 100%;}
@media screen and (max-width:767px){
	.Area_content01 { height: auto;width: 96%;}	
	.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-top: 4vw;}
	.Area_content01 .recommendBox img { display: block; width: 100%; margin: 0;}
	.Area_content01 .recommendBox p { top: 14vw;left: 34vw;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%;}	
}


/*03_享會員好禮*/
.Area_content03 {height:auto; /* margin-top: 49px; */}
.Area_content03 .titleBox { position: relative; }
.Area_content03 .txtBox { font-size: 26px; color: #461e0a; padding: 0; margin-bottom: .5em;}
.Area_content03 .txtBox2 { font-size: 26px; color: #fff; padding: 20px 0 15px 0;}
/*調整PD*/
@media screen and (max-width:767px){
	.Area_content03 { height: auto; padding: 5vw 0 0;}	
    .Area_content03 .titleBox { position: relative; top: 0; left: 0; width: 100%; z-index: 50; height: auto;}
	.Area_content03 .titleBox a {width: 50px !important; top: 4vw !important; position: absolute!important;}
	.Area_content03 .txtBox { font-size: 12px; position: relative; top:0; padding: 0;}
	.Area_content03 .txtBox2 { font-size: 14px; color: #fff; position: relative; top:0;}
}


/*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; }
}


/*飄-上下*/
.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%);} 
	}