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

/*基本*/
body{margin:0;padding:0;}

/*全BOX版面*/
.WRAPPER {z-index:0;position: relative;display:block;margin: 0 auto;padding:0;width:100%;min-width:1220px;text-align:left;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;padding-bottom: 80px;overflow: hidden; background: #493b2f; }
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration: none;}

/*預設清單樣式*/
.Area .list_00 ul {display:inline-block;}
.Area .list_00 li {list-style:none;float:left;overflow: hidden;}
.Area li {list-style:none;}
  @media screen and (max-width:767px){
    .WRAPPER {margin-bottom: 0;min-width: inherit;min-height: 100vh;overflow: hidden;background-size: 100%;padding-bottom: 19vw;}
    .WRAPPER img {  width:100%;  height:auto; }
  }


/** 入稿區基本 **/
.content_Area { position:relative; display:inline-block; margin:0px auto 0px auto; padding: 0px 0px 0px 0px; width:1220px;}
.buttonAera_more { position: absolute; top:15px; right:15px; padding-left:17px; padding-right:10px;  border-radius:60px; width:90px; height:40px; background-color: #666; text-align:center;}
.buttonAera_more a { display:block; padding-top:5px; font: bold 24px/29px Century Gothic; color:#fff; text-decoration: none; letter-spacing:-0.05em; }
.buttonAera_more:hover {background-color: #000;}
.buttonAera_more .btnGO { margin:5px; float:right; width:20px ;height:20px;}


/*PC背景*/
@media screen and (min-width:768px){
.bg_fix {z-index: -59;position:absolute;top: 0;left:0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;}
.light {z-index: -20;position:absolute;top: 10px;left:0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;mix-blend-mode: screen;}
.light2 {z-index: 50;position:absolute;top: 655px;left:25px;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;mix-blend-mode: screen;}
.bg_01 {z-index: -30; position:absolute; top: 575px;left:0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;}
.bg_02 {z-index: -65;position:absolute;top: 2580px;left:0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;}
.bg_repeat {z-index: -65;position:absolute;top: 0;left: 0;width:100%;height: 100%;background-repeat:repeat-y;background-position: center top;pointer-events:none; }
}

@media screen and (max-width:767px){
.m_bg_fix {z-index: -50;position:absolute;top: 9vw;left:0;width:102%;height:100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;}	
.m_bg_01 {z-index: -30;position:absolute;top: 70.5vw;left:0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;}
.light {z-index: -20;position:absolute;top: 20vw;left: -18vw;width: 137%;height: 120vw;background-size: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;mix-blend-mode: screen;}
.light2 {z-index: 50;position:absolute;top: 87vw;left: 25vw;width: 53%;height: 35vw;background-size: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;mix-blend-mode: screen;}
.bg_repeat {z-index: -60;position:absolute;top: 0vw;left: 0;width:100%;height: 100%;background-size: 100%;background-repeat:repeat-y;background-position: center top;pointer-events:none; }
}



/*共用設定*/
@media screen and (min-width:768px){
.Areatitle { z-index: 1; position: relative; margin: 0 auto; width: 80%; height: 180px; background-size: 100%; background-repeat: no-repeat; background-position: center top; pointer-events: none; }  
.bg { position:absolute; width: 2000px; height: 100%; transform: translateX(-50%); left: 50%; background-size: 100%; background-repeat:no-repeat;background-position: center top;pointer-events:none; } 
.Area_bottom {margin-bottom: 4%!important;}
.Area_bottom2 {margin-bottom: 8%!important;}
}
@media screen and (max-width:767px){
.Areatitle { z-index: 1; position: relative; margin: 0 auto; width: 100%; height: 20vw; background-size: 100%; background-repeat: no-repeat; background-position: center top; pointer-events: none; }  
.bg { position:absolute; width: 100%; height: 100%; background-size: 100%; background-repeat:no-repeat;background-position: center top;pointer-events:none; } 
.Area_bottom {margin-bottom: 7vw!important;}
.Area_bottom2 {margin-bottom: 5vw!important;}	
}



/*版頭區塊*/
.Area_title img{ width: 100%; }
@media screen and (min-width:768px){
.Area_title {height: 980px;z-index: 20;}
}

@media screen and (max-width:767px){
.Area_title {height: 110vw;}
}


/*版頭主標微調*/
.Area_title img{width: 100%;border-radius: 0!important;}
.Area_title .PD_layout .PD_slide { min-width:auto; }
.Area_title .PD_layout li { border:none; }
.Area_title .box01 .PD_layout li { pointer-events: none; }

@media screen and (min-width: 768px){
.Area_title .titlelogo {z-index:3;position:absolute;top: 0;left: 10px;}		
.Area_title .Area_topPD::after { content: ""; display: block; clear: both; z-index: -1; position: absolute; width: 16%; height: 480px; top: 0; left: 9px; background: url("toplogo_bg.png?t=1756715694050") center top/100% no-repeat scroll; }		
.Area_title .box_pd {z-index: 10;position:absolute;width: 80%; }  
.Area_title .box_pd .layout_BN1 {z-index: 10;position:absolute;width: 30%;top: 515px;left: 605px;}
.Area_title .box_pd .layout_PD1 {z-index: 9;position:absolute;width: 40%;top: 415px;left: 225px;}
.Area_title .title {position: relative;z-index: 10;}
.Area_title .title .PD_layout li:nth-of-type(1) {position: absolute;top: 81px;left: 164px;z-index: 20;width: 38.5%;}
.Area_title .title .PD_layout li:nth-of-type(2) {position: absolute;top: 4px;right: 93px;z-index: 10;width: 16%;}
.Area_title .title .PD_layout li:nth-of-type(3) {position: absolute;top: 606px;right: 8px;z-index: 1;width: 14%;}
.Area_title .title .PD_layout li:nth-of-type(4) {position: absolute;top: 595px;left: -33px;z-index: 10;width: 19%;}
.Area_title .title .PD_layout li:nth-of-type(5) {position: absolute;top: -35px;left: 70px;z-index: 10;width: 14%;}
.Area_title .title .PD_layout li:nth-of-type(6) {position: absolute;top: -37px;left: 525px;z-index: 10;width: 13%;}
.Area_title .title .PD_layout .PD img { width: 100%; }
}

@media screen and (max-width:767px){
.Area_title .titlelogo {z-index:4;position:absolute;width: 21%;top: -11vw;left: -1vw;}	
.Area_title .Area_topPD::after {content: "";display: block;clear: both;z-index: -1;position: absolute;width: 22%;height: 50vw;top: 31.5vw;left: -1.5vw;background: url("mlogo_bg.png?t=1756715694050") center top/100% no-repeat scroll;}		
.Area_title .box_pd {z-index: 10;position:absolute;width: 57%;top: 44vw;left: 12vw;}
.Area_title .box_pd .layout_BN1 {z-index: 11;position:absolute;width: 34%;top: 21vw;left: 56vw;}
.Area_title .box_pd .layout_PD1 {z-index: 10;position:absolute;width: 51%;top: 3vw;left: 20vw;}
.Area_title .title {position: relative;width: 100vw;height: 41vw;}
.Area_title .title .PD_layout li:nth-of-type(1) {position: absolute;top: 12vw;left: 1.8vw;z-index: 17;width: 51.5vw;}
.Area_title .title .PD_layout li:nth-of-type(2) {position: absolute;top: 1vw;right: -2.5vw;z-index: 10;width: 21vw;}
.Area_title .title .PD_layout li:nth-of-type(3) {position: absolute;top: 78vw;right: -12vw;z-index: 30;width: 20vw;height: 20vw;}
.Area_title .title .PD_layout li:nth-of-type(4) {position: absolute;top: 74.2vw;left: -17vw;z-index: 0;width: 31vw;opacity: 0.6;}
.Area_title .title .PD_layout li:nth-of-type(5) {position: absolute;top: -2vw;left: -5vw;z-index: 10;width: 20vw;opacity: 0.7;}
.Area_title .title .PD_layout li:nth-of-type(6) {position: absolute;top: -4vw;left: 42vw;z-index: 10;width: 18vw;opacity: 0.7;}
.Area_title .title .PD_layout .PD_img { width: 100%; padding: 0; }
.Area_title .title .PD_layout .PD img { width: 100%; }
}


/*副標*/
.sub .PD_layout ul{display: flex;padding: 0;}
@media screen and (min-width: 768px){
.sub {position: absolute;top: 265px;left: 133px;width: 45%;height: 160px;z-index: 30;overflow: hidden;}	
.sub .PD_layout ul::after { z-index: -1; position: absolute; top: 4px; left: 13%; width: 72.5%; height: 155px; pointer-events:none; background: url(sub_bg.png?t=1756715694050) center top / 100% no-repeat scroll; }	
.sub .PD_layout .PD_img img {width: 75%;}	
}
@media screen and (max-width:767px){
  .sub {position: absolute;top: 31.5vw;left: -5vw;width: 60%;height: 20vw;z-index: 30;overflow: hidden;}
  .sub .PD_layout ul::after { z-index: -1; position: absolute; top: 1vw; left: 3vw; width: 86.5%; height: 20vw; pointer-events:none; background: url(sub_bg.png?t=1756715694050) center top / 100% no-repeat scroll; }	
  .sub .PD_layout .PD_img img {width: 87%;padding: 0;}
}

/*版頭輪播品*/
.Area_title .box_PD {z-index: 1;position:absolute;top: 0; right: 135px;}
.Area_title .box_PD .Area_swiper, .Area_title .box_PD .Area_swiper_box { overflow: visible; }
.Area_title .box_PD .Area_swiper ul {display:flex;margin:0;padding:0;}
  
.Area_title .box_PD .layout_BN1 { z-index:-1; position: relative; top:0px;left: 0;width: 470px; }
.Area_title .box_PD .layout_PD1 { z-index:99; position:absolute;top: 495px;left: -380px;width: 72%;transform: rotate(360deg);}
.Area_title .box_PD .layout_PD1 ul::after { z-index: -1; position: absolute; top: -91px; left: -24px; width: 110%; aspect-ratio: 327 / 305; background: url("top_PD_bg.png?t=1756715694050") center top/100% no-repeat scroll; background-size: 100%; transform: rotate(-4deg); }
.Area_title .box_PD .layout_PD2 { z-index:99; position:absolute;top: -52px;left: 913px;width:300px;transform:rotate(348deg); }
/*輪播特效(左)*/	
.Area_title .box_PD .swiper-slide .PD_img { opacity: 0; transform: translate(-6%,0);  }
.Area_title .box_PD .swiper-slide-active .PD_img { opacity: 1; transition: 1s ease-out; transform: translate(0,0);}
  
/*輪播特效(右)*/	
.Area_title .box_PD .layout_PD2 .swiper-slide .PD_img  { opacity: 0; transform: translate(6%,0); }
.Area_title .box_PD .layout_PD2 .swiper-slide-active .PD_img  { opacity: 1; transition: 1s ease-out; transform: translate(0,0);}

.Area_title .box_PD .layout_PD3 .swiper-slide .PD_img  { opacity: 0; transform: translate(6%,0); }
.Area_title .box_PD .layout_PD3 .swiper-slide-active .PD_img  { opacity: 1; transition: 1s ease-out; transform: translate(0,0);}
@media screen and (max-width:767px){
.Area_title .box_PD {position:absolute;width:100%;height:100%;top:0; right: -34vw; }
.Area_title .box_PD .Area_swiper ul {margin: 0;padding: 0; display: flex;}
  
.Area_title .box_PD .layout_BN1 {z-index: 0;top: 3vw;left: -7vw;width: 55.5%;}
.Area_title .box_PD .layout_PD1 {z-index: 99;position:absolute;top: 58vw;left: -28vw;width: 41%;transform: rotate(-1deg);}
.Area_title .box_PD .layout_PD1 ul::after { z-index: -1; position: absolute; top: -10.5vw; left: -2.5vw; width: 108%; aspect-ratio: 327 / 305; background: url("top_PD_bg.png?t=1756715694050") center top/100% no-repeat scroll; background-size: 100%; transform: rotate(-2deg); }
.Area_title .box_PD .layout_PD2 {z-index: 99;position:absolute;top: 69vw;left: 64vw;width: 33%;}
  
/*輪播特效(左)*/	
.Area_title .box_PD .swiper-slide .PD_img { opacity: 0; transition: .2s ease-out;transform: translate(-2%,0);  }
.Area_title .box_PD .swiper-slide-active .PD_img { opacity: 1; transition: 1s ease-out; transform: translate(0,0);}
  
/*輪播特效(右)*/	
.Area_title .box_PD .layout_PD2 .swiper-slide .PD_img  { opacity: 0; transform: translate(2%,0); }
.Area_title .box_PD .layout_PD2 .swiper-slide-active .PD_img  { opacity: 1; transition: 1s ease-out; transform: translate(0,0);}

.Area_title .box_PD .layout_PD3 .swiper-slide .PD_img  { opacity: 0; transform: translate(2%,0); }
.Area_title .box_PD .layout_PD3 .swiper-slide-active .PD_img  { opacity: 1; transition: 1s ease-out; transform: translate(0,0);}
}
  


/** 倒數 **/
.TimerNick {position: absolute;top: 785px;left: 300px;z-index:0;display:inline-block;text-align: center;}
.TimerNick .FontStyle {display:inline-block;margin: 0;padding:0; font: bold 2em/2em Arial;color: #4a3c30;letter-spacing: -0.02em;text-align: left;}
.TimerNick .reciprocal { position: absolute; top: -25px; left: 28%; font: bold 1.5em/1.5em "微軟正黑體","Noto Sans CJK TC", Arial, Helvetica;letter-spacing: -0.05em;color: #4a3c30;}
@media screen and (max-width:767px){
.TimerNick {z-index:2;position: absolute;top: 96vw;left: 12vw;display:inline-block;margin:0; height: unset;text-align:center;/*background:url(m_time_bg.png?t=1747987506196) no-repeat center top; */background-size:100%;}
.TimerNick .FontStyle {display:inline-block;margin:0 auto;padding:0 1vw 0 0;border:0px; font: bold 4vw/4vw Arial;color: #4a3c30;/*text-shadow:1px 1px 0px #fff;*/letter-spacing:-1px;text-align:right;background:transparent;}
.TimerNick .reciprocal { top: -4vw; padding-left:1vw;font: bold 3.5vw/3.5vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;color: #4a3c30;}
}


/*輪播點點*/
.swiper-pagination-bullet {}
@media screen and (max-width:767px){
  .swiper-pagination-bullet { width: 2vw; height: 2vw; }
  .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 0.8vw; }
}

/*攻略*/
.Area_strategy { }
.Area_strategy .PD_layout li { pointer-events: none; }
@media screen and (max-width:767px){
  .Area_strategy {  }
  .Area_strategy .box { width: 104%; margin-left: -2.2vw; }
}

/*登記*/
.danji_Area { height: 100%;}
.danji_Area .bg.bg1 {z-index:-30; top: -115px; height: 1000px; background: url("danji_bg01.png?t=1756715694050") center top/100% no-repeat scroll; background-size: 100%; }	
.danji_Area .bg.bg2 {z-index:-30; top: 770px; height: 1400px; background: url("danji_bg02.png?t=1756715694050") center top/100% no-repeat scroll; background-size: 100%; }
.danji_Area .box { position: relative; }	
.danji_Area .box01, .danji_Area .box02, .danji_Area .box03, .danji_Area .box04 { margin: 8% auto 0; }
.danji_Area .box01 .box_1::after { content: ""; display: block; clear: both; z-index: -1; position: absolute; width: 16%; height: 75px; top: -75px; left: 130px; background: url("danji_tag01.png?t=1756715694050") center top/100% no-repeat scroll; }	
.danji_Area .box02 .box_1::after { content: ""; display: block; clear: both; z-index: -1; position: absolute; width: 16%; height: 75px; top: -75px; left: 130px; background: url("danji_tag02.png?t=1756715694050") center top/100% no-repeat scroll; }	
.danji_Area .box03 .box_1::after { content: ""; display: block; clear: both; z-index: -1; position: absolute; width: 16%; height: 75px; top: -75px; left: 130px; background: url("danji_tag03.png?t=1756715694050") center top/100% no-repeat scroll; }	
.danji_Area .box04 .box_1::after { content: ""; display: block; clear: both; z-index: -1; position: absolute; width: 16%; height: 75px; top: -75px; left: 130px; background: url("danji_tag04.png?t=1756715694050") center top/100% no-repeat scroll; }	
@media screen and (max-width:767px){
.danji_Area {  }
.danji_Area .bg.bg1 {z-index:-30;top: -11vw;width: 200vw;height: 80vw;background: url("danji_bg01.png?t=1756715694050") center top/100% no-repeat scroll;background-size: 100%;}	
.danji_Area .bg.bg2 {z-index:-30;top: 68vw;width: 200vw;height: 140vw;background: url("danji_bg02.png?t=1756715694050") center top/100% no-repeat scroll;background-size: 100%;}
.danji_Area .Area_danji .danji_box ul li { width: 95%; }
.danji_Area .box01 .box_1::after, .danji_Area .box02 .box_1::after, .danji_Area .box03 .box_1::after, .danji_Area .box04 .box_1::after { width: 16%; height: 6.5vw; top: -6.2vw; left: 2.5vw;  }	
}

/*折價券*/
.Area_coupon { margin-bottom: 4%!important; }	
.Area_coupon .Areatitle { top: 50px; }	
.Area_coupon .bg { top: 125px; width: 1220px; }	
.Area_coupon .PD_layout { width: 80%; margin: 0 auto; }
.Area_coupon .box::after { content: ""; display: block; clear: both; position: relative; height: 60px; background: url("coupon_bg2.png?t=1756715694050") center bottom/100% no-repeat scroll; }	
@media screen and (max-width:767px){
  .Area_coupon .Areatitle { top: 5vw; }	
  .Area_coupon .bg { top: 13vw; left: -9vw; width: 140vw; }	
  .Area_coupon .PD_layout { width: 100%; }
  .Area_coupon .box::after { top: 1.5vw; left: -7vw; width: 112vw; height: 5vw; }	

}

/*重磅爆品*/
.Area_main { }
.Area_main .Areatitle { top: 0; height: 210px; }
.Area_main .bg { width: 1630px; height: 1370px; top: 5.5%; left: 32%; }
/*重磅爆品頁籤*/
.Area_box02 { width:100%; height: 100%; left:0; margin:0 auto; box-sizing:border-box; }
.Area_box02 .NavArea_tabbar_page { display: block!important; width: 95%; }
.Area_box02 .NavArea_tabbar_page .Nav_box { background-color:transparent; overflow: visible!important; }
.Area_box02 .NavArea_tabbar_page .Nav_box { background-color:transparent; }
.Area_box02 .NavArea_tabbar_page .Nav_box .Nav { width: 80%; left: 17%; height: 60px; }
.Area_box02 .NavArea_tabbar_page .Nav_box .Nav ul { transform: none!important; }
.Area_box02 .NavArea_tabbar_page .Nav_box .Nav li { width: 23%!important; }
.Area_box02 .NavArea_tabbar_page .Nav_box .Nav a { color: #2b0200;font:bold 40px/50px "Century Gothic","微軟正黑體","Microsoft JhengHei", Arial, Helvetica; }
.Area_box02 .NavArea_tabbar_page .Nav_box .Nav .swiper-slide-active a { color: #e7e7e7!important; }
.Area_box02 { width: 75%!important; }
.Area_box02 .page_box { height: 100%!important; }
.Area_box02 .page.swiper-slide { margin: 0 auto; }
.Area_box02 .page.swiper-slide-prev { filter: brightness(40%); pointer-events: none; }
.Area_box02 .page.swiper-slide-next { filter: brightness(40%); pointer-events: none; }
.Area_box02 .page.swiper-slide-active { filter: brightness(100%); pointer-events: auto; }
.Area_box02 .page.swiper-slide-active img{ box-shadow: 4px 1px 15px #43423a; }
.Area_box02 .PD_layout ul { padding: 0!important; grid-gap: 0!important; }
.Area_box02 .PD_layout ul li .PD { width: 86%; margin: 0 auto; }

@media screen and (max-width:767px){
.Area_main { }
.Area_main .Areatitle { top: 0vw; height: 19vw; }
.Area_main .bg { width: 152vw; height: 130vw; top: 10vw; left: -53vw; }
/*重磅爆品頁籤*/  
.Area_box02 .PD_layout ul {width: 95%!important;}
.Area_box02 .PD_layout .PD_into { margin-top: inherit; }
.Area_box02 {width:100%;height: 104vw;padding:0;background-repeat: no-repeat;left: 0;top: 0;}
.Area_box02 .NavArea_tabbar_page .Nav_box .Nav { width: 95%; left: 5vw; height: 11vw; padding: 0 1vw; }
.Area_box02 .NavArea_tabbar_page .Nav_box .Nav a { color: #2b0200; font-size: 4.5vw; padding: 0 1vw; }

.Area_box02 .PD_layout ul li .PD { width: 93%; margin: 0 auto; }
}
     

/*區塊4*/
.Area04 { }
.Area04 .Areatitle { top: 120px; }	
.Area04 .bg { top: 11%; }	
.Area04 .box { margin: 105px auto 0; }
@media screen and (max-width: 767px){
.Area04 {z-index: 1;height: 100%;}
.Area04 .bg { top: 13vw; left: -158vw; width: 510vw; }	
.Area04 .Areatitle {top: 21vw;left: 0; height: 14vw;}	
.Area04 .box {margin: 25vw auto 0;width: 93%;}
}


/*區塊5*/
.Area05 {  }
.Area05 .Areatitle { top: 10px; height: 160px; }
.Area05 .bg { z-index: -2; top: -220px; height: 1530px; }	
.Area05 .box { margin: 0 auto; }	
.Area05 .box .bn_area { width: 85%; margin: 1% auto; }	
@media screen and (max-width: 767px){
.Area05 { z-index: 1; }
.Area05 .Areatitle { top: 3vw; left: 0; height: 15vw; }
.Area05 .bg {z-index: -5;top: -5vw;left: -197vw;width: 345vw;height: 210vw;}	
.Area05 .box .bn_area { width: 100%; margin: 4vw auto; }	
}
  


/*區塊6*/
.Area06 {  }
.Area06 .Areatitle { top: 80px; }
.Area06 .bg { z-index: -2; top: -4%; }	
.Area06 .box { margin: 5% auto 0; }	
.Area06 .box .bn_area { width: 85%; margin: 1% auto; }	
@media screen and (max-width: 767px){
.Area06 {  }
.Area06 .Areatitle { top: 3vw; left: 0; height: 15vw; }
.Area06 .bg {z-index: -5;top: 4vw;left: -29vw;width: 157%;height: 20vw;}	
.Area06 .box .bn_area { width: 100%; margin: 4vw auto; }
}


/*區塊7*/
.Area07 {  }
.Area07 .Areatitle { top: 0px; }
.Area07 .bg { z-index: -2; top: -25px; height: 1530px; }	
.Area07 .box { margin: 0 auto 0; }	
.Area07 .box .bn_area { width: 85%; margin: 1% auto; }	
@media screen and (max-width: 767px){
.Area07 {  }
.Area07 .Areatitle { top: 3vw; left: 0; height: 15vw; }
.Area07 .bg {z-index: -5;top: 0vw;left: -250vw;width: 460vw;height: 170vw;}	
.Area07 .box .bn_area { width: 100%; margin: 4vw auto; }		
}


/*區塊8*/
.Area08 .NavArea_tabbar_page { width: 1170px; display: block; margin: 4% auto; }	
@media screen and (max-width:767px){
  .Area08 .NavArea_tabbar_page { width: 100%; margin: 11vw auto 3vw; }	 
}

/*區塊9*/
.Area09 {  }
.Area09 .Areatitle { top: -10px; left: 0; width: 80%; }
.Area09 .bg { top: -9%; left: 60%; width: 2400px; height: 2400px; }	
.Area09 .brand_logo { z-index: 0; position: relative; width: 75%; top: 80px; }
.Area09 .ootd_btn01 ul li:nth-child(1) { z-index: 0; position: relative; left: -115px; width: 1200px; }
.Area09 .ootd_btn02 .PD_into { z-index: 0; position: absolute; left: 50%; transform: translateX(-50%); bottom: 5%; width: 90%; }
.Area09 .ootd_btn02 .PD_into h3 { font-size: 1.85em; color: #000; letter-spacing: -0.05em; }
.Area09 .ootd_btn02 .PD img { width: 90%; }
.Area09 .ootd_btn02 ul li { z-index: 1; position: absolute; min-width: inherit; }
.Area09 .ootd_btn02 ul li::after{ content: ""; display: block; clear: both; position: absolute; z-index: -1; }
.Area09 .ootd_btn02 ul li:nth-child(1) {top: 130px;left: -120px;width: 33%;}
.Area09 .ootd_btn02 ul li:nth-child(1) .PD { transform: rotate(-4deg); }
.Area09 .ootd_btn02 ul li:nth-child(1)::after { top: 0; left: 0; width: 100%; aspect-ratio: 320 / 335; background: url("PD01_bg.png?t=1756715694050") center top/100% no-repeat scroll; background-size: 100%; }
.Area09 .ootd_btn02 ul li:nth-child(2) {top: 554px;left: -107px;width: 32%;}
.Area09 .ootd_btn02 ul li:nth-child(2)::after {top: 5%;left: -5%;width: 115%;aspect-ratio: 317 / 260;background: url("PD02_bg.png?t=1756715694050") center top/100% no-repeat scroll;background-size: 100%;}
.Area09 .ootd_btn02 ul li:nth-child(2) .PD { transform: rotate(-1deg); }
.Area09 .ootd_btn02 ul li:nth-child(3) {top: 895px;left: -94px;width: 33%;}
.Area09 .ootd_btn02 ul li:nth-child(3)::after {top: 5%;left: -7%;width: 100%;aspect-ratio: 281 / 266;background: url("PD03_bg.png?t=1756715694050") center top/100% no-repeat scroll;background-size: 100%;}
.Area09 .ootd_btn02 ul li:nth-child(3) .PD { transform: rotate(-1deg); }
.Area09 .ootd_btn02 ul li:nth-child(4) {top: 37px;right: 57px;width: 33%;}
.Area09 .ootd_btn02 ul li:nth-child(4)::after {top: 0;right: 0;width: 125%;aspect-ratio: 317 / 272;background: url("PD04_bg.png?t=1756715694050") center top/100% no-repeat scroll;background-size: 100%;}
.Area09 .ootd_btn02 ul li:nth-child(4) .PD { transform: rotate(14deg); }
.Area09 .ootd_btn02 ul li:nth-child(5) {top: 520px;right: 39px;width: 34%;}
.Area09 .ootd_btn02 ul li:nth-child(5)::after {top: 3%;right: 4%;width: 107%;aspect-ratio: 299 / 271;background: url("PD05_bg.png?t=1756715694050") center top/100% no-repeat scroll;background-size: 100%;}
.Area09 .ootd_btn02 ul li:nth-child(5) .PD { transform: rotate(7deg); }
.Area09 .ootd_btn02 ul li:nth-child(6) {top: 900px;right: 15px;width: 35%;}
.Area09 .ootd_btn02 ul li:nth-child(6)::after {top: 6%;right: 6%;width: 113%;aspect-ratio: 332 / 279;background: url("PD06_bg.png?t=1756715694050") center top/100% no-repeat scroll;background-size: 100%;}
.Area09 .ootd_btn02 ul li:nth-child(6) .PD { transform: rotate(-7deg); }
@media screen and (max-width:767px){
  .Area09 {  }
  .Area09 .bg { z-index: -2; top: -12vw; left: -13vw; width: 215vw; height: 245vw; }	
  .Area09 .Areatitle {top: 1vw;left: 0;width: 100%;height: 20vw;}
  .Area09 .brand_logo { width: 90%; top: 3vw; left: 5vw; }
  .Area09 .ootd_btn01 ul li:nth-child(1) { top: -1vw; left: -5vw; width: 108vw; }
  .Area09 .ootd_btn02 ul li:nth-child(1) {top: 13vw;left: 0vw;width: 33%;}
  .Area09 .ootd_btn02 ul li:nth-child(2) {top: 45vw;left: 0vw;width: 32%;}
  .Area09 .ootd_btn02 ul li:nth-child(3) {top: 75vw;left: 1vw;width: 33%;}
  .Area09 .ootd_btn02 ul li:nth-child(4) {top: 8vw;right: -2vw;width: 33%;}
  .Area09 .ootd_btn02 ul li:nth-child(5) {top: 46vw;right: -1vw;width: 34%;}
  .Area09 .ootd_btn02 ul li:nth-child(6) {top: 73vw;right: -3vw;width: 35%;}
} 

/*BN區*/
.Area_bn{ padding-top: 4%; }
.Area_bn .box_all { overflow: hidden; }
.Area_bn .box_all ul { height: 480px; }
@media screen and (max-width:767px){
  .Area_bn { padding-top: 7vw; }
  .Area_bn .box_all ul { height: 47vw; }
}

/*區塊10-公版*/
.Area10 {  }
.Area10 .brand_logo { z-index: 0; position: relative; width: 75%; top: 40px; left: 40px; }
@media screen and (max-width:767px){
.Area10 { width: 95%; margin: 0 auto 5%; }
.Area10 .brand_logo { width: 90%; top: 3vw; left: 5vw; }
}



/*飄-上下*/
.title .PD_layout li:nth-of-type(6) { -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,5px); } 
100% { -webkit-transform: translate(0,0);}
}
@keyframes uptodown-play { 
0%   { transform: translate(0,-5px);} 
100% { transform: translate(0,0);}
}

/*飄-下上*/
.title .PD_layout li:nth-of-type(5) { -webkit-animation:downtoup-play 3s ease-in-out infinite alternate;
  animation:downtoup-play 3s ease-in-out infinite alternate;}
@-webkit-keyframes downtoup-play { 
0% { 
-webkit-transform: translate(0,0);  
} 
100% { 
-webkit-transform: translate(0,-5px);
}
}
@keyframes downtoup-play { 
0% { 
transform: translate(0,0);  
} 
100% { 
transform: translate(0,-5px);
}
}
/*飄-左右*/
.title .PD_layout li:nth-of-type(4) { -webkit-animation:left-play 3s ease-in-out infinite alternate;
  animation:left-play 3s ease-in-out infinite alternate;}
@-webkit-keyframes left-play { 
0% { 
-webkit-transform: translate(0,0);  
} 
100% { 
-webkit-transform: translate(-5px,0);
}
}
@keyframes left-play { 
0% { 
transform: translate(0,0);  
} 
100% { 
transform: translate(-5px,0);
}
}






/*分享浮層*/
.floatBox { position:relative; margin:2% auto; padding: 2% 0; width: 700px; height:auto; background-color:rgba(0,0,0,0.8); text-align:center;  border-radius:20px;}
.floatBox img { width:100%; height:auto;}
.floatBox .go_bt {
  -webkit-transition: all 0.2s ease;
     -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
       -o-transition: all 0.2s ease;
          transition: all 0.2s ease;}
.floatBox .go_bt:hover { filter: brightness(120%);
  -webkit-transform:translateY(-6px);
     -moz-transform:translateY(-6px);
      -ms-transform:translateY(-6px);
       -o-transform:translateY(-6px);
          transform:translateY(-6px);}
.floatBox .closeButton a { display:block; cursor:pointer; position:absolute; top:-20px; right:-20px; 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; z-index:2}
.floatBox .closeButton:hover {background-color:#666; text-decoration:none;}
.floatBox .title  { display:inline-block; margin:0 0 10px 0; border-bottom:1px solid #ffd800; font:bold 45px/1.5em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;  color:#ffd800; text-align:center}
.floatBox .box_ { margin:0 auto; width:90%;}
.floatBox .box_:after { content: ""; display:block; clear:both;}
.floatBox .box_btn { margin:20px auto 0; width: 80%;}
.floatBox .box_btn a { display:block; margin:3% 0;}
.floatBox .box_btn img { width:100%;}
.floatBox .box_btn .btn { margin:0 auto; width:60%;}
.floatBox .box_btn2 a { float:left; margin:0 1%; width:48%;}
	@media screen and (max-width:767px){
		.floatBox { padding:5% 0; width:90%; height: auto;}
		.floatBox .closeButton a {display:block; position:absolute; top:-15px; right:-15px; width:30px; height:30px; border-radius:50%; border:solid 2px #999999; font:bold 30px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5);text-decoration: none; z-index:2}
		.floatBox .closeButton:hover {background-color:#666; text-decoration:none}
		.floatBox .title  { margin:0 5% 3vw; font-size: 6vw; line-height:2rem;}
		.floatBox .box_btn { margin:2% auto 0;}
		.floatBox .box_btn .btn { margin:0 auto; width:80%;}
	}