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

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

.btn:hover img {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
     -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
         transition: all 0.3s ease;}
  @media screen and (max-width:767px){
    .btn:hover img {
      -webkit-transform: translateY(-3px);
      transform: translateY(-3px);}
  }

@media screen and (max-width:767px){
  img.title, .btn img {width: 85%!important;}
}

/*版頭*/
.Area_top {}
.Area_top .momologo { z-index:8; position: absolute;top: 15px; left:40px;}
.Area_top .momologo a { display:block; width:200px; height:71px; background: url(momo_logo.png) no-repeat;}
  @media screen and (max-width:767px){
      .Area_top { height: auto;}
      .Area_top .momologo { display:none;}
  }

/*全BOX版面*/
.WRAPPER { z-index:0; position: relative; display:block; margin: 0 auto; padding:0; overflow:hidden; width:100%; min-width:1220px; text-align:left; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
.Area .list_00 ul {display:inline-block;}
.Area .list_00 li {list-style:none;float:left;overflow: hidden;}
  @media screen and (max-width:767px){
      .WRAPPER { padding-bottom:0px; min-width: inherit; min-height:100vh; overflow:visible;}
      .WRAPPER img {  width:100%;  height:auto!important;}
  }

/*PC背景*/
.bg_01 { z-index:-50; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:repeat-x; background-position: center top; pointer-events:none;}
.bg_02 { z-index:-53; position:absolute;top:1100px;left:0px;width:100%;height:100%;background-repeat:repeat-x; background-position:center top; pointer-events:none;}
.bg_03-1 { z-index:-50; position:absolute;top:3540px;left:0px;width:100%;height:100%;background-repeat:repeat-x; background-position:center top; pointer-events:none;}
.bg_03-2 { z-index:-50; position:absolute;top:4475px;left:0px;width:100%;height:100%;background-repeat:repeat-x; background-position:center top; pointer-events:none;}
.bg_04 { z-index:-60; position:absolute;top:7170px;left:0px;width:100%;height:100%;background-repeat:repeat-x; background-position:center top; pointer-events:none;}
  @media screen and (max-width:767px){
    .mo_bg { z-index:0; position:absolute;width:100%;height:100%; background-repeat:repeat-y; background-size:100%;background-position:center bottom; pointer-events:none;}
  }

/*版頭區塊*/
.Area_title { height:1100px;}
  @media screen and (max-width:767px){
    .Area_title { height:100%;overflow:hidden;}			
  }
.title_text { position:absolute;left:200px;top:865px;color:#fff;letter-spacing:2.5pt;z-index:1;animation-duration:2s;animation-delay:.5s}
.title_logo { position:absolute;left:450px;top:40px;z-index:1;animation-duration:2s;animation-delay:.5s}
.smoke { position:absolute;left:-200px;top:20px;width:44%;z-index:0;animation-duration:.5s;animation-delay:.5s;filter:contrast(175%) brightness(120%) opacity(0.75);}
.title1  { position:absolute;left:-25px;top:115px;width:62%;z-index:2;animation-duration:.5s;animation-delay:.5s}
.title2 { position:absolute;left:530px;top:340px;z-index:0;animation-duration:0;animation-delay:0}
.title3 { position:absolute;left:720px;top:180px;z-index:0;animation-duration:.5s;animation-delay:1s}
.exclusive { position:absolute;left:20px;top:560px;z-index:0}
  @media screen and (max-width:767px){
  .title_text { position:absolute;left:14vw;top:94vw;z-index:1;animation-duration:2s;animation-delay:.5s;font-size:2vw}
  .title_logo { position:absolute;left:34vw;top:4vw;width:28%;z-index:2;animation-duration:2s;animation-delay:.5s}
  .smoke { position:absolute;left:-8vw;top:8vw;width:48%;z-index:0;animation-duration:.5s;animation-delay:.5s;filter:contrast(175%) brightness(120%) opacity(0.75);}
  .title1  { position:absolute;left:8vw;top:15vw;width:55%;z-index:2;animation-duration:.5s;animation-delay:.5s}
  .title2 { position:absolute;left:43vw;top:49vw;width:50%;z-index:0;animation-duration:0;animation-delay:0}
  .title3 { position:absolute;left:60vw;top:36vw;width:35%;z-index:0;animation-duration:.5s;animation-delay:1s}
  .exclusive { position:absolute;left:8vw;top:56vw;width:24%;z-index:0}
}

/*2品排列*/
@media screen and (min-width:768px){
  .Area_2PD .layuot_2PD {padding-bottom:80px;}
  .Area_2PD .layuot_2PD ul {width:96%;padding:180px 0 0 0;}
}
@media screen and (max-width:767px){
	.Area_2PD .layuot_2PD ul {width:96%; padding:12vw 0 10vw;}
}

/* 主打商品Main */
.Area_main { height:2920px}
.Area_main .main {position:relative;left:0;top:140px;width:100%;z-index:0;}
.Area_main .main ul{padding:0px;margin:0 auto; display:inline-block;width:100%;list-style-type:none;}
.Area_main .main ul li img{width:125%;margin-left:-150px}
.Area_main .main_product:hover img {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
     -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
         transition: all 0.3s ease;
}	
    @media screen and (max-width:767px){
    .Area_main { height:100%}
    .Area_main .main { position:relative;left:0;top:0;width:100%;background-image:url(); background-repeat:repeat-y; background-size:100%;padding:5vw 0;}
    .Area_main .main ul{padding:0; margin:0; width:96%}
    .Area_main .main ul li img{width:100%;margin-left:0}
    .Area_main .main_product:hover img {
      -webkit-transform: translateY(-3px);
      transform: translateY(-3px);}
  }

/* 主打商品Activy */
.Area_Activy { height:3240px}
.Area_Activy .Activy {position:relative;left:0;top:140px;width:100%;z-index:0}
.Area_Activy .Activy ul{padding:0px;margin:0 auto; display:inline-block;width:100%}
.Area_Activy .Activy ul li img{width:125%;margin-left:-150px}
    @media screen and (max-width:767px){
    .Area_Activy { height:100%}
    .Area_Activy .Activy { position:relative;left:0;top:0;width:100%;background-image:url(); background-repeat:repeat-y; background-size:100%}
    .Area_Activy .Activy ul{padding:0; margin:0; width:96%}
    .Area_Activy .Activy ul li img{width:100%}
  }

/* 主打商品Sales */
.Area_Sales { height:5210px}
.Area_Sales .Sales {position:relative;left:0;top:140px;width:100%;z-index:0}
.Area_Sales .Sales ul{padding:0px;margin:0 auto; display:inline-block;width:100%}
.Area_Sales .Sales ul li img{width:125%;margin-left:-150px}
    @media screen and (max-width:767px){
    .Area_Sales { height:100%}
    .Area_Sales .Sales { position:relative;left:0;top:0;width:100%;background-image:url(); background-repeat:repeat-y; background-size:100%}
    .Area_Sales .Sales ul{padding:0; margin:0; width:96%}
    .Area_Sales .Sales ul li img{width:100%}
  }

/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { position:relative; display:inline-block;} 
.Area .go_bt {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.Area .go_bt:hover {
  -webkit-transform:scale(0.95);
     -moz-transform:scale(0.95);
      -ms-transform:scale(0.95);
       -o-transform:scale(0.95);
          transform:scale(0.95);}
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
	@media screen and (max-width:767px){
		
		.Area .go_bt:hover {  
		-webkit-transform:none;
     -moz-transform:none;
      -ms-transform:none;
       -o-transform:none;
          transform:none;}
		  
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
		/*區塊_切割*/
		.Area_1bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_1bn a { float:left; margin:0 0 2% 0; padding:0; width:100%; list-style: none;}
		.Area_2bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_2bn a { float:left; margin:0 0% 0%; padding:0; width:50%; list-style: none;}
		.Area_3bn { margin: -1px auto; padding:0; overflow:hidden;}
		.Area_3bn a { float:left; margin:0 0% 0% ; padding:0; width:33.33%; list-style: none;}
		.Area_1bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_1bn_nopadding a { float:left; margin:0; padding:0; width:100%; list-style: none;}
		.Area_2bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_2bn_nopadding a { float:left; margin:0; padding:0; width:50%; list-style: none;}
		.Area_3bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_3bn_nopadding a { float:left; margin:0; padding:0; width:33.3%; list-style: none;}
		.Area_4bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_4bn_nopadding a { float:left; margin:0; padding:0; width:25%; list-style: none;}
	}

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

/*基本款*/
.PD {border-radius: 25px;}
.PD_layout,
.PD_layout * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box;} 
.PD_layout { position: relative; margin: 0 auto; text-align: center;} 
.PD_layout a { position: initial; display: block; text-decoration: none; color: #000;}
.PD_layout ul { margin: 0 auto; padding: 0; list-style: none; }
.PD_layout ul { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.PD_layout ul { flex-wrap: wrap; align-items: stretch;}
.PD_layout ul::after { content: ""; display: block; clear: both;}
.PD_layout li { position: relative; margin: 0; padding: 0; -webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; -ms-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease;}
.PD_layout li:hover { z-index: 5;}
.PD_layout li { counter-increment: num;}
.PD_layout .PD_slide::before { display: none; pointer-events: none; content: "0" counter(num) ". "; color:#dad8d9; font-style: italic; font-family: Times; font-size: 3em; font-size: 48px; line-height: 1; letter-spacing:-0.005em;}
.PD_layout .PD_slide:nth-of-type(n+10)::before { content: counter(num) ". ";}
.PD_layout .PD a { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;} 
.PD_layout .PD a { align-items: stretch; flex-direction: column;}             
.PD_layout .PD img { width: 100%; height: auto;}
    @media screen and (max-width:767px){
      .PD_layout li::before { font-size: 2.5em; font-size: 32px;}
      .PD_layout .PD_slide::before { font-size: 2em;}
      .PD_layout .PD_into { padding: 0.3125em;}
      .PD_layout .PD_img { padding:0.25em;}
      .PD_layout .PD p { height: 1.875em; line-height: 1.875em;}
      .PD_layout .PD p b,
      .PD_layout .PD p del { font-size: 0.8125em;}
      .PD_layout .PD p .Price { font-size: 1.5em;}
      .PD_layout .PD p small { font-size: 0.75em;}
    }
    @media screen and (min-width: 768px){
      .PD_layout .PD_slide:hover { -webkit-transform:translateY(-6px); -moz-transform:translateY(-6px); -ms-transform:translateY(-6px); -o-transform:translateY(-6px); transform:translateY(-6px);}
      .PD_layout .PD_slide:hover { box-shadow: 0 3px 30px rgba(0,0,0,0.4);}
    }
    @media screen and (max-width:767px){
      .PD_layout .PD_slide:hover { box-shadow:0 1em 2em rgba(0,0,0,0.2);}
    }
    /*套輪播時修正*/
    .PD_layout ul.swiper-wrapper { flex-wrap: nowrap;}

/* --------------------------------------
 *【佈局】  電腦版[data-pd-col-pc=""]  手機版[data-pd-col-phone=""] 
 * -------------------------------------- */
@media screen and (min-width:768px){
  .PD_layout[data-pd-col-pc="2"] ul { padding-left: 35px; padding-right: 35px;}
  .PD_layout[data-pd-col-pc="2"] li { margin-left: 20px; margin-bottom: 20px;border-radius: 60px;}
  .PD_layout[data-pd-col-pc="2"] li:nth-child(2n+1) { margin-left:0;border-radius: 60px;}
  .PD_layout[data-pd-col-pc="2"] li { width: calc(50% - 20px * 0.5);}
}
@media screen and (max-width:767px){
  .PD_layout[data-pd-col-phone="2"] ul { padding-left: 0.5em; padding-right: 0.5em;}
  .PD_layout[data-pd-col-phone="2"] li { margin-left: 0.5em; margin-bottom: 0.5em;}
  .PD_layout[data-pd-col-phone="2"] li:nth-child(2n+1) { margin-left:0;border-radius: 60px;}
  .PD_layout[data-pd-col-phone="2"] li { width: calc(50% - 0.5em * 0.5);border-radius: 60px;}
}