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


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

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


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


/*共用--區塊_all*/
.Area { z-index:1; position: relative; margin:0 auto; padding:0; border-radius:0; /*text-align:center;*/ }
.Area a { position:relative; display: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:none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none; filter:brightness(110%);}
  @media screen and (min-width:768px){
    .Area .go_bt:hover { -webkit-transform:translateY(-6px); -moz-transform:translateY(-6px); -ms-transform:translateY(-6px); -o-transform:translateY(-6px); transform:translateY(-6px);}
  }
  /*寬度,間距*/
  .Area1220 { margin:0 auto; width:100%;}
  .Area960 { margin:0 auto; width:100%;}
    @media screen and (min-width:768px){
      .Area1220 { width:1220px;}
      .Area960 { width:960px;}
      .Areabottom { margin-bottom:0;}
    }
    @media screen and (max-width:767px){
      .Areabottom { margin-bottom:0;}
    }




/*PC背景*/
	@media screen and (min-width:768px){
    .Area_bgtop { pointer-events: none;}
    .Area_bgtop span { background-repeat: no-repeat;}
		.Area_bgtop_fixed { position: fixed;}
    .Area_bgtop .bgtop_ { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    .Area_bgtop .bgtop_ span { position: absolute; display: block; width: 100%; height: 100%; background-position: center top;}
    
		.Area_bgtop_1 .bgtop_ { z-index: 1; height: 850px; overflow: hidden;}
		.Area_bgtop_1 .bgtop_1_2 { z-index: 2;}
		.Area_bgtop_1 .bgtop_1_3 { z-index: 3;}
		.Area_bgtop_1 .bgtop_1_1 span { background-image: url(bgtop_1_1.png?t=1789094996867);}
		.Area_bgtop_1 .bgtop_1_2 span { background-image: url(bgtop_1_2.png?t=1789094996867);}
		.Area_bgtop_1 .bgtop_1_3 span { background-image: url(bgtop_1_3.png?t=1789094996867);}
    
    .Area_bgtop_2 { z-index: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2000px; height: 100%;}
    .Area_bgtop_2 .bgtop_ { opacity: 1;}
    .Area_bgtop_2 .bgtop_ span { height: 100%;}
    .Area_bgtop_2 .bgtop_2_1 { width: 100%; height: 100%; /*top: 1213px;*/}
    .Area_bgtop_2 .bgtop_2_1 span { background: url(bg_body.jpg?t=1789094996867) center top no-repeat; /*opacity: 0;*/} 
  }

/*Phone背景*/
  @media screen and (max-width:767px){
    .m_Area_bgtop { pointer-events: none;}
    .m_Area_bgtop span { background-repeat: no-repeat;}
	  .m_Area_bgtop_fixed { position: fixed; top: 32px;} /*搭配js-appBgFixed*/
    .m_Area_bgtop .m_bgtop_ { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 100%;}
    .m_Area_bgtop .m_bgtop_ span { position: absolute; display: block; width: 100%; height: 100%; padding-bottom: 100%; overflow: hidden; background-position: center top; background-size: 100%;}
    
    .m_Area_bgtop_1 .m_bgtop_1_2 { z-index: 1;}
    .m_Area_bgtop_1 .m_bgtop_1_3 { z-index: 1;}
    .m_Area_bgtop_1 .m_bgtop_1_0 span { position: absolute; top: 0; left: 0; width: 100%; height:100%; background: url(m_bg_body.jpg?t=1789094996867) center top no-repeat; background-size: 100%;}
    .m_Area_bgtop_1 .m_bgtop_1_1 span { position: absolute; top: 0; left: 0; width: 100%; height:100%; background: url(m_bgtop_1_1.png?t=1789094996867) center top no-repeat; background-size: 100%;}
    .m_Area_bgtop_1 .m_bgtop_1_2 span { position: absolute; top: 0; left: 0; width: 100%; height:100%; background: url(m_bgtop_1_2.png?t=1789094996867) center top no-repeat; background-size: 100%;}
    .m_Area_bgtop_1 .m_bgtop_1_3 span { position: absolute; top: 0; left: 0; width: 100%; height:100%; background: url(m_bgtop_1_3.png?t=1789094996867) center top no-repeat; background-size: 100%;}
  }


/*區塊背景-共用設定*/
.Area_bg { pointer-events: none; z-index: 0;}
.Area_bg div { pointer-events: none; z-index: 1; position: absolute; left: 0; width: 100%; background-position: center top; background-repeat: no-repeat;}
    @media screen and (max-width: 767px) {
      .Area_bg div { pointer-events: none; z-index: -1; position: absolute; left: 0; width: 100%; background-position: center top; background-repeat: no-repeat;}
      .Area_bg div { z-index: 1; top: 0vw; padding-bottom: 200%; background-size: 100%;}
    }
    /*圖片*/
    @media screen and (min-width: 768px) {
      .Area_txt_bg div { height: 83px; position: absolute; z-index: 0; background-repeat: repeat-x;}
        .Area_txt_bg .txt1 { top: -280px; animation: bgtop_d-play1 60s linear infinite; background-position: 69px top; animation-delay: .9s;}
        .Area_txt_bg .txt2 { top: -209px; animation: bgtop_d-play2 80s linear infinite; background-position: 177px top; animation-delay: .9s;}
        .Area_txt_bg .txt3 { top: -136px; animation: bgtop_d-play3 60s linear infinite; background-position: 102px top; animation-delay: .9s;}
    }
    @media screen and (max-width: 767px) {
      .Area_top_bg div { height: 0; padding-bottom: 20%; z-index: 0; background-repeat: repeat-x; background-position: 100% top;}
        .Area_top_bg .txt1 { top: 62vw; animation: bgtop_d-play5 120s linear infinite alternate; background-size: 325%; animation-delay: .9s; transform: translateX(41%);}
        .Area_top_bg .txt2 { top: 75vw; animation: bgtop_d-play5 140s linear infinite alternate; background-size: 283%; animation-delay: .9s;}
      .Area_txt_bg div { height: 0; padding-bottom: 20%; z-index: 0; background-repeat: repeat-x;}
        .Area_txt_bg .txt1 { top: -1vw; animation: bgtop_d-play4 100s linear infinite alternate; background-size: 325%; animation-delay: .9s;}
        .Area_txt_bg .txt2 { top: 12vw; animation: bgtop_d-play4 120s linear infinite alternate; background-size: 283%; animation-delay: .9s;}
        .Area_txt_bg .txt3 { top: 25vw; animation: bgtop_d-play4 100s linear infinite alternate; background-size: 349%; animation-delay: .9s;}
    }



/* --------------------------------------
 * page 輪播微調
 * -------------------------------------- */

/*輪播樣式調整--按鈕/小圓點/進度條*/
.Area_boxstyle_pagination .swiper-pagination-bullet { border-radius: 20px; width: 6px; height: 6px;
  -webkit-transition: opacity .3s, background-color .3s, width .3s;
          transition: opacity .3s, background-color .3s, width .3s;
  -webkit-transition-delay: .3s, .3s, 0s;
          transition-delay: .3s, .3s, 0s;}
.Area_boxstyle_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 24px;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
/*.Area_boxstyle_pagination .swiper-pagination-bullet { background-color: #fff; opacity: 0.4;}
.Area_boxstyle_pagination .swiper-pagination-bullet-active { background-color: #fff; opacity: 1;}
.Area_boxstyle_pagination-white .swiper-pagination-bullet { background-color: #fff; opacity: 0.4;}
.Area_boxstyle_pagination-white .swiper-pagination-bullet-active { background-color: #fff; opacity: 1;}*/ /*小圓點顏色-預設class_swiper-pagination-black*/
.Area_boxstyle_button { color: #575757; /*text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.6);*/ -webkit-transition: 0.2s; transition: 0.2s;} /*箭頭顏色*/
.Area_boxstyle_button.swiper-button-next::after,
.Area_boxstyle_button.swiper-button-prev::after { -webkit-transform: scale(0.8); transform: scale(0.8);}
.Area_boxstyle_button.swiper-button-next::before,
.Area_boxstyle_button.swiper-button-prev::before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; width: calc(var(--swiper-navigation-size) * 1.5); height: calc(var(--swiper-navigation-size) * 1.5);}
.Area_boxstyle_button.swiper-button-next::before,
.Area_boxstyle_button.swiper-button-prev::before { background-color: rgba(0, 0, 0, 0.25); opacity: 1;
  -webkit-box-shadow: inset 0 0 1px 1px #fff;
          box-shadow: inset 0 0 1px 1px #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: 0.2s;
          transition: 0.2s;}
.Area_boxstyle_button.swiper-button-next::before { left: 45%;}
.Area_boxstyle_button.swiper-button-prev::before { left: 55%;}
  /*配色*/
  .Area_boxstyle_button.swiper-button-next::before,
  .Area_boxstyle_button.swiper-button-prev::before {
    background-color: rgba(242, 242, 242, .95); /*箭頭圓形顏色*/
    -webkit-box-shadow: inset 0 0 1px 1px #575757;
            box-shadow: inset 0 0 1px 1px #575757;}

  .Area_boxstyle_button-white { color: #fff;}
  .Area_boxstyle_button.swiper-button-next:after,
  .Area_boxstyle_button.swiper-button-prev:after { -webkit-transform: scale(0.6); transform: scale(0.6);} /*箭頭大小*/
  .Area_boxstyle_button-white.swiper-button-next::before,
  .Area_boxstyle_button-white.swiper-button-prev::before { -webkit-box-shadow: inset 0 0 1px 1px #fff; box-shadow: inset 0 0 1px 1px #fff;}
  .Area_boxstyle_scrollbar.swiper-scrollbar { left: 23%; width: 54%; background-color: rgba(0, 0, 0, 0.1);}
  .Area_boxstyle_scrollbar .swiper-scrollbar-drag { background: #45acdf;}
  .Area_boxstyle_scrollbar-white .swiper-scrollbar-drag { background: #fff;}
    @media screen and (min-width: 768px) {
      /*.Area_boxstyle_button:hover { color: #fff; text-shadow: inherit;}*/
      .is-showhover.Area_boxstyle_button.swiper-button-next:hover::before,
      .is-showhover.Area_boxstyle_button.swiper-button-prev:hover::before { opacity: 1; width: calc(var(--swiper-navigation-size) * 1.7); height: calc(var(--swiper-navigation-size) * 1.7); background-color: #fff;}
      .Area_boxstyle_scrollbar.swiper-scrollbar { height: 6px; bottom: 70px;}
    }
    @media screen and (max-width: 767px) {
      :root { --swiper-navigation-size: 30px;}
      .Area_boxstyle_scrollbar.swiper-scrollbar { bottom: 5vw;}
      .is-showhover.Area_boxstyle_button.swiper-button-next:hover::before,
      .is-showhover.Area_boxstyle_button.swiper-button-prev:hover::before { opacity: 1; background-color: #fff;}
    }

/*輪播調整*/
.Area_swiper { position: relative;}
.Area_swiper .PD_layout ul { display: flex; margin: 0; padding: 0; grid-gap: 0;}
.Area_swiper_box .pagination, .Area_swiper_box .Area_boxstyle_button { -webkit-transform:scale(0.7); transform:scale(0.7);}
  @media screen and (min-width: 768px) {
    .Area_swiper { margin-top: 20px; padding: 10px 60px 0;}
    .Area_swiper .PD_layout ul { padding-bottom: 35px;}
    
  }
  @media screen and (max-width: 767px) {
    .Area_swiper { margin: 0; padding: 0 4.2%; width: 100%; box-sizing: border-box;}    
  }





/*版頭*/
.Area_top { height: 952px;}
.Area_top .motionLine { position: absolute; top: 313px; left: 1160px; width: 1px; height: 145px; background-color: #2e2e2e;}
.Area_top .motionLine:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; background-color: #ccc; animation: motionLine 4s linear infinite;}
.Area_top .momoco { position: absolute; top: 299px; left: 471px; animation-delay: 0.5s;}
	@media screen and (max-width:767px){
    .Area_top { height: inherit;}
    .Area_top .motionLine { top: 46.3vw; left: 92.3%; height: 13vw;}
    .Area_top .momoco { position: absolute; top: 29.7vw; left: 40%; width: 9.5%; transform-origin: center bottom;}
  }
  /*下載*/
  .Area_top .register { position: absolute;}
  .Area_top .register ul { margin: 0; padding: 0; list-style: none;}
  .Area_top .register li { float: left; margin: 0;}
  .Area_top .register li img { width: 100%;}
    @media screen and (min-width:768px){
      .Area_top .register { top: 544px; left: 766px;}
      .Area_top .register ul { padding-top: 6px;}
      .Area_top .register li { width: 206px;}
    }
    @media screen and (max-width:767px){
      .Area_top .register { top: 109.5vw; left: 9.2%;}
      .Area_top .register li { width: 45%;}
    }
  /*motionLine*/
  @keyframes motionLine {
    0%   { height: 0;}
    25%  { height: 0;}
    85%  { height: 100%;}
    100% { height: 100%;}
  }



/*生活大小事 都是momo的事*/
.Area_thing {}
  @media screen and (min-width:768px){
    .Area_thing .deco_01 { position: absolute; top: 137px; left: 0; pointer-events: none;}
    .Area_thing .decotxt { z-index: 0; position: absolute; pointer-events: none;}
    .Area_thing .decotxt.txt1 { top: 763px; left: 269px; /*animation: block-moveR 30s infinite linear alternate;*/}
    .Area_thing .decotxt.txt2 { top: 845px; left: -392px; /*animation: block-moveL 30s infinite linear alternate;*/}    
  } 
  @media screen and (max-width: 767px){
    .Area_thing .box { position: relative;}
    .Area_thing .deco_01 { position: relative; pointer-events: none;}
    .Area_thing .decotxt { z-index: 0; position: absolute; pointer-events: none; width: 180%;}
    .Area_thing .decotxt.txt1 { top: 78vw; left: 12%; animation: block-moveR 30s infinite linear alternate;}
    .Area_thing .decotxt.txt2 { top: 88vw; left: -75%; animation: block-moveL 30s infinite linear alternate;}    
  } 
  /*兩圖輪播*/
  .Area_hotbrand1 { /*background: #224026;*/ }
  .Area_hotbrand1 .PD_layout li .PD_logo { pointer-events: none; z-index: 10; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; overflow: visible}
  .Area_hotbrand1 .PD_layout li .PD::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0;padding-bottom: 180%; background-size: 100%; background-repeat: no-repeat; background-position: center top; pointer-events: none;}
  .Area_hotbrand1 .PD_layout li .PD::before { z-index: 9; background-image: url(Area_hotbrand1_icon1.png?t=1789094996868)}
  .Area_hotbrand1 .PD_layout li .PD_img { z-index: 1;}
  .Area_hotbrand1 .PD_layout .PD_slide.swiper-slide:hover { filter: none;}
    /*切換動態*/
    .Area_hotbrand1 .PD_layout li .PD_logo,
    .Area_hotbrand1 .PD_layout li .PD::before { opacity: 0; transform: translateY(8%); transition: ease 0.4s;}
    .Area_hotbrand1 .PD_layout li.swiper-slide-active .PD_logo,
    .Area_hotbrand1 .PD_layout li.swiper-slide-active .PD::before { opacity: 1; transform: translateY(0%);}
    .Area_hotbrand1 .PD_layout li .PD_img img { transform: scale(.98) translateY(0%) translateZ(0); transition: transform 0.5s 0.2s cubic-bezier(0.77, 0, 0.175, 1.5); filter: brightness(.4);}
    .Area_hotbrand1 .PD_layout li.swiper-slide-active .PD_img img { transform: scale(1) translateY(0%) translateZ(0); filter: brightness(1);}
    /*.Area_hotbrand1 .PD_layout li.swiper-slide-active { margin: 120px!important;}*/
      @media screen and (min-width: 768px) {
        .Area_hotbrand1 { height: 970px; /*overflow: hidden*/}
        .Area_hotbrand1 .box { padding-top: 48px;}
        .Area_hotbrand1 .Area_swiper { position: relative; margin: 0 auto; width: 304px; overflow: visible;}
        .Area_hotbrand1 .swiper-button-next { top: 48%; right: -20px;}
        .Area_hotbrand1 .swiper-button-prev { top: 48%; left: -20px}
        .Area_hotbrand1 .pagination { bottom: 45px;}
      }
      @media screen and (max-width: 767px) {
        .Area_hotbrand1 { height: auto;/*height: 140.6vw;*/}
        .Area_hotbrand1 .Area_swiper { position: absolute; top: 0; left: 24.8%; width: 50.4%; padding-top: 6.5vw; overflow: visible;}
        .Area_hotbrand1 .swiper-button-next { top: 53%; right: 0;}
        .Area_hotbrand1 .swiper-button-prev { top: 53%; left: 0;}
      }



/*APP會員獨享活動(手機大看板)*/
@media screen and (min-width:768px){
  .Area_bn .deco_01 { margin-top: 30px; margin-left: -390px; text-align: left;}
  .Area_bn .Area_swiper .swiper-button-next, .Area_bn .Area_swiper .swiper-button-prev { top: 46%;}
} 
@media screen and (max-width: 767px){
  .Area_bn .box_title  { margin-bottom: 3vw;;}
  .Area_bn .deco_01 { position: absolute; top: 15.5vw; left: 0; width: 64%; pointer-events: none;}
  .Area_bn .Area_swiper .PD_layout ul { padding-bottom: 8vw;}
  .Area_bn .Area_swiper .swiper-button-next, .Area_bn .Area_swiper .swiper-button-prev { top: 42%;}
} 



/*注意事項*/
.Area03 { color: #4f4a40; font-family: "Century Gothic","Microsoft JhengHei"; font-weight: 500; font-size: 23px; padding-bottom: 145px;}
.Area03 .box { width: 100%; margin: 0 auto;}
.Area03 .box_list { /*font-size: 1.5em;*/ padding: 0; text-align: justify;}
.Area03 .box_list h2 { font-size: 1.25em; margin-top: 1em; margin-bottom: 0.35em; text-align: justify;}
.Area03 .box_list ol { margin: 0; padding: 0; padding-left: 1em;}
.Area03 .box_list ul { margin: 0; padding: 0; list-style: none;}
.Area03 .box_list li { margin: 0; padding: 0; margin-bottom: 0.75em; /*font-size: 21px;*/}
.Area03 .box_list li img { margin: 0.2em 0; width: 70%; max-width: 480px; box-shadow: 0em 0.3em 1.5em rgba(0,0,0,0.1);}
.Area03 .box p { text-align: center; font-family: "Century Gothic","微軟正黑體","Microsoft JhengHei",Helvetica; font-size: 16px; color: #000;margin-top: 50px;}
    @media screen and (max-width:767px){
      .Area03  { padding-bottom: 180px; font-size: 16px;}
      .Area03 .box { width: 87%; margin-top: 3%;}
      .Area03 .box .box_list { font-size: 0.875em; padding: 0;}
      .Area03 .box .box_list h2 { font-size: 0.8em;}
      .Area03 .box p { font-size: 3.1vw; margin-top: 7.5vw; padding: 0;}
    }



/*可拖移廣告icon*/
.Area_hammerAD { z-index: 300; display: none; position: fixed; bottom: 0; right: 5px; /*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; bottom: inherit; top: 385px; display: block; width: 210px; height:200px;}
      .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%; bottom: -10px;}
      .Area_hammerAD .closeButton a { top: 1vw; right: 1vw;}
    }
    @media screen and (min-width:1670px){
      .Area_hammerAD { right: inherit; left: 50%; transform: translateX(636px);}
    }