@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;}
.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%;}	
.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;}
.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){
.PD_layout-D3_01 .PD h3 { z-index: 10; }	
.PD_layout-D3_01 .PD h3 span { font-size: 1em; line-height: 2.3; font-family:"Arial","Noto Sans CJK TC"; letter-spacing: -0.05em; font-weight: 600; color: #000; }	
.PD_layout.PD_layout-D3_01 ul { padding: 0; }
.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){
.PD_layout.PD_layout-D3_01 .PD .PD_img { position: absolute!important; }
.PD_layout-D3_01 .PD h3 { z-index: 10; position: relative!important; left: 50%!important; transform: translateX(-50%)!important; }	
.PD_layout.PD_layout-D3_01 .PD h3  { font-size: inherit!important; }
.PD_layout-D3_01 .PD h3 span { z-index: 10; font-size: 1.25em; line-height: 2.2; font-family:"Arial","Noto Sans CJK TC"; letter-spacing: -0.05em; font-weight: 600; color: #000; }	
.PD_layout.PD_layout-D3_01 ul { padding: 0; }	
.PD_layout.PD_layout-D3_01 .PD .PD_img { padding: 0; }
.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: 925px;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=1764140128480") 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 .title {position: relative;z-index: 10;}
.Area_title .title .PD_layout li:nth-of-type(1) {position: absolute;top: 12px;left: 313px;z-index: 20;width: 48.5%;}
.Area_title .title .PD_layout li:nth-of-type(1) a {pointer-events: none;}
.Area_title .title .PD_layout li:nth-of-type(2) {position: absolute;top: 144px;left: 155px;z-index: 10;width: 16%;}
.Area_title .title .PD_layout li:nth-of-type(2) a {pointer-events: none;}
.Area_title .title .PD_layout li:nth-of-type(3) {position: absolute;top: 606px;right: 50px;z-index: 1;width: 14%;}
.Area_title .title .PD_layout li:nth-of-type(3) a {pointer-events: none;}
.Area_title .title .PD_layout li:nth-of-type(4) {position: absolute;top: 685px;left: 23px;z-index: 10;width: 15%;}
.Area_title .title .PD_layout li:nth-of-type(4) a {pointer-events: none;}
.Area_title .title .PD_layout li:nth-of-type(5) {position: absolute;top: 366px;left: 40px;z-index: 10;width: 14%;}
.Area_title .title .PD_layout li:nth-of-type(5) a {pointer-events: none;}
.Area_title .title .PD_layout li:nth-of-type(6) {position: absolute;top: 295px;left: 922px;z-index: 10;width: 13%;}
.Area_title .title .PD_layout li:nth-of-type(6) a {pointer-events: none;}
.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=1764140128480") 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 .title {position: relative;width: 100vw;height: 41vw;}
.Area_title .title .PD_layout li:nth-of-type(1) {position: absolute;top: 3vw;left: 14.8vw;z-index: 17;width: 71.5vw;}
.Area_title .title .PD_layout li:nth-of-type(2) {position: absolute;top: 24vw;left:0vw;z-index: 10;width: 22vw;}
.Area_title .title .PD_layout li:nth-of-type(3) {position: absolute;top: 72vw;left: 86vw;z-index: 30;width: 20vw;height: 20vw;}
.Area_title .title .PD_layout li:nth-of-type(4) {position: absolute;top: 82.2vw;left: 0vw;z-index: 0;width: 20vw;}
.Area_title .title .PD_layout li:nth-of-type(5) {position: absolute;top: 55vw;left: -2vw;z-index: 10;width: 17vw;}
.Area_title .title .PD_layout li:nth-of-type(6) {position: absolute;top: 41vw;left: 83vw;z-index: 10;width: 18vw;}
.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: 215px;left: 316px;width: 48%;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=1764140128480) center top / 100% no-repeat scroll; }	
.sub .PD_layout .PD_img img {width: 82%;}	
}
@media screen and (max-width:767px){
.sub {position: absolute;top: 26.5vw;left: 21vw;width: 60%;height: 20vw;z-index: 30;overflow: hidden;}
.sub .PD_layout ul::after { z-index: -1; position: absolute; top: 2vw; left: 3vw; width: 86.5%; height: 20vw; pointer-events:none; background: url(sub_bg.png?t=1764140128480) center top / 100% no-repeat scroll; }	
.sub .PD_layout .PD_img img {width: 100%;padding: 0;}
}

/*版頭輪播品*/
.Area_title .box_PD {z-index: 11;position:absolute;top: 310px; left: 250px;}
.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: 720px; }
@media screen and (max-width:767px){
.Area_title .box_PD {position:absolute;width:100%;height:100%;top:0; left: 0vw; }
.Area_title .box_PD .Area_swiper ul {margin: 0;padding: 0; display: flex;}
.Area_title .box_PD .layout_BN1 {z-index: 0;top: 42vw;left: 1vw;width: 75.5%;} 
}
  

/*版頭3PD*/
@media screen and (min-width: 768px){
.Area_topPD3 .PD_layout_PD ul {grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media screen and (max-width: 767px){
.Area_topPD3 .PD_layout_PD ul {width: 96%; grid-template-columns: repeat(3, minmax(0, 1fr));} 
}

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


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

/*活動按鈕*4*/
.Area_item { height: 100%;}

.Area_item_top {z-index: 0;position:absolute;top: -140px;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;}			
.Area_item_repeat {z-index: 0;position:absolute;top: 70px;width:100%;height:257px;background-repeat:repeat-y;background-position: center top;pointer-events:none;}			
.Area_item_end {z-index: -8;position:absolute;top: 79px;width:100%;height: 100%;background-repeat:no-repeat;background-position: center bottom;pointer-events:none;}	

@media screen and (max-width:767px){

.m_Area_item_bg {z-index: -1;position:absolute;top: 11vw;width:100%;height: 58vw;background-repeat:repeat-y;background-position: center top;pointer-events:none;background-size: 100%;}	
.Area_item::before {content:"";position: absolute;display:block;top: -10vw;left: 0;width: 100%;height: 100%;pointer-events:none;z-index: -10;background: url("m_Area_item_top.png?t=1764140128480") center top/100% no-repeat scroll;}
.Area_item::after {content:"";position: absolute;display:block;top: 7vw;left: 0;width: 100%;height: 100%;pointer-events:none;z-index: -10;background: url("m_Area_item_end.png?t=1764140128480") center bottom/100% no-repeat scroll;}	

}


/*登記贈品文案顏色*/
.Area_danji .danji_box ul li .activityText .gifts span { color: #902f1e;} 
/*登記*/
.danji_Area { height: 100%;}
.danji_Area .bg.bg1 {z-index:-30; top: -115px; height: 1000px; background: url("danji_bg01.png?t=1764140128480") 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=1764140128480") 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; }
@media screen and (max-width:767px){
.danji_Area {  }
.danji_Area .bg.bg1 {z-index:-30;top: -16vw;width: 200vw;height: 80vw;background: url("danji_bg01.png?t=1764140128480") center top/100% no-repeat scroll;background-size: 100%;}	
.danji_Area .bg.bg2 {z-index:-30;top: 64vw;width: 200vw;height: 140vw;background: url("danji_bg02.png?t=1764140128480") 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;  }	
}


/*BN區塊*/
@media screen and (min-width: 768px){
.AreaBN .box {background-color: #a18358;border-radius: 50px;padding-bottom: 50px;}
}
@media screen and (max-width: 767px){
.AreaBN .box {background-color: #a18358;border-radius: 10px;padding-bottom: 3vw;} 
}


     
/*下方公版*8_01*/
.Area06 {  }
.Area06 .Areatitle { top: 80px; }
.Area06 .bg { z-index: -2; top: -4%; }	
.Area06 .box { margin: 0 auto 0; }	
@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 { margin: 0 auto 11vw; }	
.Area06 .PD_layout ul {width: 96%;}
}



/*下方公版*8_02*/
.Area05 {  }
.Area05 .Areatitle { top: 10px; height: 160px; }
.Area05 .bg { z-index: -2; top: -22px; height: 1530px; }	
.Area05 .box { margin: 0 auto 120px; }	
@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: -296vw;width: 572vw;height: 350vw;}	
.Area05 .box { margin: 0 auto 11vw; }	
.Area05 .PD_layout ul {width: 96%;}
}
  

/*區標*/
@media screen and (min-width: 768px){
.PD_layout-D3_01 { height: 160px; }
.PD_layout-D3_01 ul li a{ pointer-events: none; }
}
@media screen and (max-width: 767px){
.PD_layout-D3_01 { height: 16vw; }
.PD_layout-D3_01 ul li a{ pointer-events: none; }
}




/*旗艦館*/
.Area09 .brand_logo { z-index: 0; position: relative; width: 100%; top: 35px; }
@media screen and (max-width: 767px){
.Area09 .brand_logo { width: 100%; top: 0vw; left: 0vw; }
}







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