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

/*基本*/
body { margin: 0; padding: 0; background-color: #d00025; background-repeat: repeat-y; background-size: 100%;} 
@media screen and (max-width:767px){
	body { background-color: #d00025; background-repeat: repeat-y; background-size: 100%;z-index: -2;}}

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

/*LOGO CSS*/
.momologo {z-index:2;position: absolute;top: 28px;left:15px;}
.momologo a { display:block; width:140px; height:21px;}
.momologo a svg { width:140px; height:21px; }
.momologo a path { fill:#EA27C2; }
.momologo-pink  a path { fill:#EA27C2; }/*LOGO 桃紅色*/
.momologo-white a path { fill:#ffffff; }/*LOGO 白色*/
@media screen and (max-width:767px){
		.momologo { display:none;}
}


/*隱鑶*/
.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: 440px;}
.Area_top .top_bg {position: relative;left: 50%;transform: translateX(-50%);}
.Area_top .btn_more {position: absolute;top: 45px;right: -60px;width: 80px;z-index: 9;}
.Area_top .btn_list {position: absolute; top: 70px; right: -100px; width: 80px; z-index: 9;}
.Area_top .text_bg{position: absolute;top: 0px;left: 0;z-index: 1;right: 0;margin: auto;}
.Area_top .text { position: absolute; top: 80px; left: 0px; width: 960px; font-size: 50px; font-weight: 700; letter-spacing: -0.05em; /* background-clip: text; */ height: 50px; line-height: 50px; z-index: 2; color: #fff7e5; /* transform: skew(-9deg, 0deg); */ font-family: Arial; /* background: linear-gradient(0deg, #f0ca7d, #fbf6e2); */ }
.Area_top .top_deco {position:absolute;left: 97px;top: 64px;z-index: 0;animation-delay:1.5s;mix-blend-mode: screen;}
.Area_top .top_light1 {position:absolute;left: 688px;top: 33px;z-index: 2;animation-delay:2s;mix-blend-mode: screen;}
.Area_top .top_light2 {position:absolute;left: 130px;top: 286px;z-index: 1;animation-delay:2.5s;mix-blend-mode: screen;}

	@media screen and (max-width:767px){
	.Area_top { height: 46vw;}
	.Area_top .top_bg { position: absolute;}
	.Area_top .btn_more {position: absolute;z-index: 9;width: 14%;top: 3vw;right: 0vw;}
	.Area_top .text_bg {position: relative;top: 0vw;left:1vw;width: 100%;z-index: 1;}
	.Area_top .text { position: absolute; top: 6vw; left: 0vw; width: 100%; font-size: 5.2vw; font-weight: 800; letter-spacing: -0.02em; background-clip: text; height: 10vw; line-height: 10vw; z-index: 2; color: #fff7e5; }
	.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 .top_light1 {position:absolute;width: 15%;left: 75vw;top: 8vw;z-index: 1;animation-delay:2s;mix-blend-mode: screen;}
	.Area_top .top_light2 {position:absolute;width: 15%;left: 14vw;top: 31vw;z-index: 1;animation-delay:2s;mix-blend-mode: screen;}

}
/*調整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=1769752889537) 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: 100%;margin: 0 auto 24px;position: relative;z-index: 2;}
.Area_content01 .recommendBox p {padding: 0;margin: 0;position: absolute;top: 150px;left:465px;font-family:"Arial";font-size: 45px;color: #d10027;line-height: 76px;text-align: left;z-index: 5;font-weight: 800;}
/*按鈕*/
.Area_content01 .recommendBox .btnaArea {width: 40%;overflow: hidden;text-align: center;position: absolute;top: 250px;z-index: 2;margin: 1px 30%;}
.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: 100%;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;ma;margin: 0;width: 100%;margin-top: 5vw;}
	.Area_content01 .recommendBox img { display: block; width: 100%; margin: 0;}
	.Area_content01 .recommendBox p {top: 15vw;left: 44vw;font-size: 7vw;line-height: 7.5vw;}
	/*按鈕*/
	.Area_content01 .recommendBox .btnaArea {width: 44%;margin: 0 auto;overflow: hidden;text-align: center;position: absolute;top: 25vw;margin: 0 26%;z-index: 2;}
	.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;}
.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: 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: 110px 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=1769752889537)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: 12vw 0vw 2vw;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%);} 
	}