@charset "utf-8";

/*基本*/
body {margin: 0; padding:0; background: #3ea1e7 }
    @media screen and (max-width:767px){
    body {margin: 0; padding:0; background: #8fcff3 }
    }


/*隱鑶*/
.for_pc {}
.for_phone, .for_m { display:none !important;}
    @media screen and (max-width:767px){
      .for_pc { display:none !important;}
      .for_phone, .for_m { display: inherit !important;}
    }

/*全BOX版面*/
.WRAPPER { position: relative;margin: 0 auto; padding: 0;	width:100%; min-width:1220px; overflow: hidden;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { border:0; vertical-align:top;}
.WRAPPER a { text-decoration:none;  display:inline-block;}
.WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:1220px;}
    @media screen and (max-width:767px){
      .WRAPPER { width: 100%; padding-bottom:0px; margin:0 auto; display: block; min-width:100%; background-repeat:repeat-y; background-size:100% ;}
      .WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:100%;}
    }
ul {margin: 0; padding: 0}
li { list-style: none;}


/*PC背景*/
@media screen and (min-width:767px){
 .bg_01 { z-index:-8; position:absolute; top:0px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_02 { z-index:-8; position:absolute; top:1500px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_03 { z-index:-8; position:absolute; top:3000px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_04 { z-index:-8; position:absolute; top:4500px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_05 { z-index:-8; position:absolute; top:6000px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_06 { z-index:-8; position:absolute; top:7500px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_07 { z-index:-8; position:absolute; top:9000px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_08 { z-index:-8; position:absolute; top:10500px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_09 { z-index:-8; position:absolute; top:12000px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_10 { z-index:-8; position:absolute; top:13500px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
 .bg_11 { z-index:-8; position:absolute; top:15000px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; }
  .pc_bg_deco{  position:absolute; top:1200px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:14742px; background-repeat:repeat-y; background-position:center top; }
  .pc_bgtopre { z-index:-3; position:absolute; top:1300px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:20000px; background-repeat:repeat-y; background-position:center top;}
  .pc_bottom{z-index:-3;  position:absolute; bottom:0px;  margin: 0 ;left: 50%;transform:translateX(-50%);width:2000px; height:725px; background-repeat:repeat-y; background-position:center top; }
	
} 


/*MB背景*/
.m_Area_bgtop{ z-index: -40;  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  pointer-events: none;}
.m_Area_bgtop .m_bgtop_ {position: absolute;  top: 0; left: 0 ;  width: 100%;  height: 100%;  padding-bottom: 100%;}


.title {margin: 0 auto; }
    @media screen and (max-width:767px){
      .title {position: absolute; top:5vw; left: 0vw; width: 100% }
      .title img { width:80% }
    }


/*我是CSS_momologo*/
 .contral{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.momologo { position:absolute; top:15px; left:20px; z-index:999; }
.Area_top .contral a{margin:34px 15px 0;}
.Area_top .contral img{width:120px;}
    @media screen and (max-width:767px){
      .momologo {position:absolute; width: 25%; top: 2.5vw; left:4vw; }
  .Area_top .contral {position: absolute; z-index: 1;padding:2vw 0;}
  .Area_top .contral a{margin: 0vw 1vw 0;}
  .Area_top .contral img{width: 12vw;}
    }

/*版頭*/
.Area_top { position:relative; height:1256px;}
.Area_top .logo { position:absolute; top:10px; left:0px; width: 1200px;}
.Area_top .main { position:absolute; top:0px; left: 0px;  }
  @media screen and (max-width:767px){
  .Area_top { position:relative; height:145vw; }
  .Area_top  .main {position: absolute; top:0vw; left:0; width:100%; z-index: 1}
  .Area_top  .logo {position: absolute; top:2vw; left:0; width:100%; z-index: 1}
 }


/*01-攻略*/
.Area_act { position:relative; height:808px; }
.Area_act .layout_bg { position: absolute; top:0; left: 0; z-index:0;  pointer-events: none; }
.Area_act .act {position: relative; margin:0 auto; }
 @media screen and (max-width:767px){
  .Area_act { position:relative; height:90vw; }
  .Area_act .Area_danji { width:96%;  }
  .Area_act .Area_danji.first {  position: absolute; top:30vw; left:2%;}	 
  .Area_act .act { position: absolute; top: 0; bottom:0; margin:67vw 0 0 0; padding: 0;  }	 
  .Area_act .act a { padding:0 ; margin: 0; width: 96%; } 	 
     .sw{margin: 0 7.5vw; width: 85vw; overflow: hidden;}
  
 }


/*03-主打品*/
.Area03 { position: relative; height:4600px; padding-bottom: 30px ;}
.Area03 .title {padding-top: 80px; }
.Area03 .layout_bg { position: absolute; top:0; left:-390px; z-index:-1;  pointer-events: none; }
.Area03 .pd { z-index: 5; margin: 0 auto; padding-top: 100px;}
.Area03 .pd a {margin-bottom:125px }
 @media screen and (max-width:767px){
.Area03 { position: relative; width: 100%; height:100%;  padding-bottom:0%; }
.Area03 .title { padding-top:0; }	 
.Area03 .pd { position: absolute; top:25vw; padding-top:0; }
.Area03 .pd a {margin-bottom:6vw; width: 96%; }
 }


/*04頁籤*/
.Area04 { position: relative;  height:1267px; }
.Area04 .layout_page ul {background-color: transparent; display: flex; margin: 0 auto; padding: 0;  }
.Area04 .layout_page ul li {border: none;  }
.Area04 .layout_page ul.contral { justify-content:center; margin-bottom: 50px; }
.Area04 .layout_page ul.contral li { padding: 5px; filter:brightness(80%); }
.Area04 .layout_page ul.contral li.cate-hover { filter: brightness(100%);}
.Area04 .box .PD_layout.BN ul li img {border-radius: 10px; width: 94%;  }
 @media screen and (max-width:767px){
.Area04 { position: relative; width: 100%; height:290vw; }
.Area04 .layout_page  {position: absolute; top:30vw; left: 0vw; }	 
.Area04 .layout_page ul.contral { flex-wrap: wrap; justify-content:center; margin-bottom:3vw; }
.Area04 .layout_page ul.contral li { padding:2%; width:26%;  }	 
.Area04 .layout_page ul.contral li img {border-radius: 10px; width:100%;  } 
.Area04	.Area_swiper  {position: absolute; top:97vw; left: 0vw; }	
 }



/*05-新品*/
.Area05 { position: relative; width:1220px; height:800px; }
.Area05 .guan {display: flex; flex-wrap: nowrap; justify-content: center; }
.Area05 .guan a {margin:20px; }
 @media screen and (max-width:767px){
.Area05 { position: relative; width: 100%; height:100%; }
.Area05 .title {width: 90%; margin:0 0 0 10%}	 
.Area05 .guan { position: absolute; top:29vw; width:97%; margin:0;padding-left:1%;}
.Area05 .guan a { float:left; width:88%; margin: 1%;  } 	 
 }


/*Area06 錨點公版*/
.Area06 { position:relative; height:4250px; }
.Area06 .layout_bg { position: absolute; top: 42px; left: 55px; z-index: -1;  pointer-events: none; }
.Area06 .layout {  position:relative; width:1082px; height: 552px; margin-bottom: 80px; }
.Area06 .PD_layout {padding:165px 0 0 144px ; width: 100%; }
 @media screen and (max-width:767px){
 .Area06 { position:relative; height:100%; margin-bottom: -8vw; }
 .Area06 .link { position: absolute; top:26vw; left: 4vw;  width:92%; }	 
 .Area06 .link a { width: 30%; padding:0.5% }
 .Area06 .link a img {}
 .Area06 .layout_bg { position: absolute; top:0; left:0; z-index: -1;  pointer-events: none; }
 .Area06 .layout {  position:relative; width:100%; height:auto; margin-bottom:3vw; }
 .Area06 .PD_layout { padding:14vw 0 8vw 0; }	 
  }


/*Area08 六品公版*/
.Area08 { position:relative; height:1100px; }
.Area08 .layout_bg { position: absolute; top: 42px; left: 55px; z-index: -1;  pointer-events: none; }
.Area08 .layout {  position:relative; width:1082px; height: 552px; margin-bottom: 80px; }
.Area08 .PD_layout {padding:0px 0 0 144px ; width: 100%; }
 @media screen and (max-width:767px){
 .Area08 { position:relative; height:100%; margin-bottom: -5vw; }
 .Area08 .link { position: absolute; top:26vw; left: 4vw;  width:92%; }	 
 .Area08 .link a { width: 30%; padding:0.5% }
 .Area08 .link a img {}
 .Area08 .layout_bg { position: absolute; top:0; left:0; z-index: -1;  pointer-events: none; }
 .Area08 .layout {  position:relative; width:100%; height:auto; margin-bottom:3vw; }
 .Area08 .PD_layout { padding:26vw 0 8vw 0; }	 
  }


/*Area07 brand*/
.Area07 { position:relative; height:724px; }
.Area07 .PD_layout ul { background-color: transparent; }
.Area07 .PD_layout ul li {border: none; padding-bottom: 30px; }
 @media screen and (max-width:767px){
 .Area07 { position:relative; height:135vw;}
 .Area07 .PD_layout { width: 100%;  }
 .Area07 .PD_layout ul { display: flex; flex-wrap: wrap;justify-content: center;}	 
 .Area07 .PD_layout ul li { padding-bottom: 1vw;  width:48%; }	
 .Area07 .PD_layout ul li img { }
 }



/**延遲載圖用**/
.mainArea .articleList * img.lazy {display:none;}