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

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


/*全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; background-color:#162552;}
.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; background:url(m_10.jpg?t=1661929735148) center bottom repeat-y; background-size: 100%;}
		.WRAPPER img {  width:100%;  height:auto;}
	}

/*區塊_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;}
	}


/*登記區塊*/
@media screen and (min-width:767px){
.Area_book {position: relative;display:block; width:1220px; height:1320px; margin:0 auto;top:0; padding:0; /*background:url(book_bg.png?t=1661929735148) top center no-repeat;*/}
 }
.Area_book .button_add{position:absolute; top: 340px;left: 575px;z-index:4}
.Area_book ul {display:flex ;width:1220px; position:relative; top:160px; left:0; margin:0 auto; padding:0 ;  text-decoration:none;  overflow:hidden; list-style:none; z-index:2;flex-direction: row;flex-wrap: wrap; justify-content: center; }
.Area_book ul li { position: relative; padding:0; margin:5px 0; text-decoration:none;display:block; list-style:none;  float:left;}
.Area_book ul li a { display:block; text-decoration:none;}

@media screen and (max-width:767px){
  .Area_book { width:100%; height:100%; margin:0 auto; padding:0;  /*background:url(mb_20.jpg?t=1661929735148) top center no-repeat ; background-size:100%; */}
  .Area_book ul { display:flex; width:100%; position:relative; top:0; left: 0; margin:0; padding:0 ;  text-decoration:none;  overflow:hidden;list-style:none; z-index:2; text-align:center}
  .Area_book ul li {display:inline-block; width:50%; padding:0 0 0 0; margin:0 0; text-decoration:none;  text-align:center;}
	.Area_book .button_add{position:absolute; top: 56vw;left: 45.5vw;z-index:4; width: 7%;}
  }

/*----------------1品-登記區塊START--------------*/
.Area_book_01 {position: relative;display:block; width:1220px; height:250px; margin:0 auto; padding:0; }
.Area_book_01 ul {display:block;width:1220px; position:absolute; top:-5px; left:30px; padding:0 ;  text-decoration:none;  overflow:hidden;list-style:none; z-index:2; }
.Area_book_01 ul li { position: relative; padding:0; margin:10px 6px; text-decoration:none;display:block; list-style:none;  float:left;}
.Area_book_01 ul li a { display:block; text-decoration:none;}
.Area_book_01 .txt { 	display: block;z-index:8; margin: 0 auto; font-family: "Century Gothic","Microsoft JhengHei","微軟正黑體", Arial, sans-serif; line-height: 1.5; text-align: left; }
.Area_book_01 .txt p { width:112px; height:25px; border-radius:35px; text-align:center; background-color:#fff; color: #000;}
.Area_book_01 .txt1 { position:absolute; top: 130px; left:319px;}


/*----------------2品-登記區塊START--------------*/
.Area_book_02 {position: relative;display:block; width:1220px; height:550px; margin:0 auto; padding:0; margin-bottom: 35px; }
.Area_book_02 ul {display:block;width:1000px; position:absolute; top:100px; left:88px; padding:0 ;  text-decoration:none;  overflow:hidden;list-style:none; z-index:2; }
.Area_book_02 ul li { position: relative; padding:0 0 10px; margin:0 15px 10px 0; text-decoration:none;display:block; list-style:none;  float:left;}
.Area_book_02 ul li a { display:block; text-decoration:none;}
.Area_book_02 .txt { 	display: block;z-index:8; margin: 0 auto; font-family: "Century Gothic","Microsoft JhengHei","微軟正黑體", Arial, sans-serif; line-height: 1.5; text-align: left; }
.Area_book_02 .txt p{ width:112px; height:25px; border-radius:35px; text-align:center; background-color:#fff; color: #000;}
.Area_book_02 .txt1 { position:absolute; top: 185px; left:153px;}
.Area_book_02 .book04{ position: absolute;  top:116px; left:890px; z-index: 2;}
.Area_book_02 .book05{ position: absolute;  top:230px; left:890px; z-index: 2;}

/*----------------3品-登記區塊START--------------*/
 .Area_book_03 {position: relative;display:block; width:1220px; height:365px; margin:0 auto; padding:150px 0 0 0; }
 .Area_book_03 ul {display:block;width:1220px; position:absolute; top:225px; left:60px ;padding:0 ;  text-decoration:none;  list-style:none; z-index:2; }
 .Area_book_03 ul li { position: relative; padding:0; margin:10px 0px; text-decoration:none;display:block; list-style:none;  float:left;}
 .Area_book_03 ul li a { display:block; text-decoration:none;}
 .Area_book_03 .txt { 	display: block;z-index:8; margin: 0 auto; font-family: "Century Gothic","Microsoft JhengHei","微軟正黑體", Arial, sans-serif; line-height: 1.5; text-align: left; }
 .Area_book_03 .txt p{ width:112px; height:25px; border-radius:35px; text-align:center; background-color:#fff; color: #000;}
 .Area_book_03 .txt1 { position:absolute; top: 192px; left:168px;}
 .Area_book_03 .book04{ position: absolute;   top:236px;left:977px;z-index: 2;}
 .Area_book_03 .book05{ position: absolute;   top:349px;left:977px;z-index: 2;}


/*----------------4品-登記區塊START--------------*/
.Area_book_04 {position: relative;display:block; width:1220px; height:680px; margin:0 auto; padding:0;  top:180px; margin-bottom: 50px; }
.Area_book_04 ul {display:block;width:1220px; position:relative; top:115px; left:85px; padding:0 ;  text-decoration:none;  overflow:hidden;list-style:none; z-index:2; }
.Area_book_04 ul li { position: relative; padding:0; margin:3px 6px; text-decoration:none;display:block; list-style:none;  float:left;}
.Area_book_04 ul li a { display:block; text-decoration:none;}
.Area_book_04 .txt1{ position:absolute; top: 151px ;left: 220px; margin: 0 auto;font-family: "Century Gothic","Microsoft JhengHei","微軟正黑體", Arial, sans-serif;line-height:1.5;text-align: left; pointer-events:none;}
.Area_book_04 .txt1 p {width:120px; height:25px; border-radius:35px; text-align:center; color: #000;}
.Area_book_04 .book04{ position: absolute;  top:115px; left:890px; z-index: 2;}
.Area_book_04 .book05{ position: absolute;  top:321px; left:890px; z-index: 2;}

/*手機登記按鈕*/
.book_box {  position:relative; margin:0;}
.book_box a { display:block; width:100%; height:100%;}
.book_ { }
.book_ .count { margin: 0;padding: 0 1vw; color:#000 ;text-align:center;border-radius: 4vw; font: bold 3vw/5vw "Century Gothic", Arial, "Microsoft JhengHei";}	

/*1品*/		
.book_01 { position:absolute;width:62.50%;  height: 100%;  top: -2vw;left:0vw; }
.book_01 .count { position: absolute; width: fit-content;   top: 84%; left: 65%; background: #fff; color:#000; border-radius: 4vw;  box-sizing: border-box;}
.post { position:absolute; width:37.50%;  height: 50%;  top: 0; left:62.4%;}
.list { position:absolute; width:37.50%;  height: 50%;  top: 50%;left:62.4%; }

/*2品*/	
.book_box2 .book_01 { position:absolute;width:37.50%;  height: 100%;  top: 0vw;left:0vw; }
.book_box2 .book_01 .count { position: absolute; top: 87.5%; left:28%;  background: #fff; color:#000; border-radius: 4vw;  box-sizing: border-box;}
.book_box2 .book_02 { position:absolute;width:34.38%;  height: 100%;  top:0;left:37%;  }
.book_box2 .book_02 .count {  position: absolute; top: 87.5%; left:25%;  background: #fff; color:#000; border-radius: 4vw;  box-sizing: border-box;}
.book_box2 .post { position:absolute; width:28.13%;  height: 50%;  top: 0; left:71.4%;}
.book_box2 .list { position:absolute; width:28.13%;  height: 50%;  top: 50%;left:71.4%; }

/*3品*/	
.book_box3 .count{ position: absolute;   width:fit-content; padding: 0.2vw 3.5vw;  background: #fff; color:#000; border-radius: 4vw;  box-sizing: border-box;}
.book_box3 .book_01 { position:absolute;width:34.50%;  height: 75%;  top: 0vw;left:0vw; }
.book_box3 .book_01 .count { position: absolute; top: 88.5%; left:24%;}
.book_box3 .book_02 { position:absolute;width:31.0%;  height: 75%;  top:0;left:35%;  }
.book_box3 .book_02 .count {  position: absolute; top: 88.5%; left:14%;}
.book_box3 .book_03 { position:absolute;width:34.50%;  height: 75%;  top:0;left:66%;  }
.book_box3 .book_03 .count {  position: absolute; top: 88.5%; left:12%;}
.book_box3 .post { position:absolute; width:50%;  height: 25%;  top: 75%; left:0%;}
.book_box3 .list { position:absolute; width:50%;  height: 25%;  top: 75%; left:50%; }

/*4品*/	
.book_box4 .book_01 { position: absolute; width: 50%; height: 36%; top: 0; left: 0;}
.book_box4 .book_01 .count { position: absolute; top: 91.5%; left: 30%; transform: translate(-50%,0); z-index: 3;}
.book_box4 .book_02 { position: absolute; width: 50%; height: 36%; top: 0; left: 50%;}
.book_box4 .book_02 .count {  position: absolute; top: 91.5%; left: 23%; transform: translate(-50%,0); z-index: 3;}
.book_box4 .book_03 { position:absolute; width: 50%; height: 37.5%; top: 40%;left: 0;}
.book_box4 .book_03 .count {  position: absolute; top: 91.5%; left: 30%; transform: translate(-50%,0); z-index: 3;}
.book_box4 .book_04 { position: absolute; width: 50%;  height: 37.5%; top: 40%; left: 50%;}
.book_box4 .book_04 .count {  position: absolute; top: 91.5%; left: 23%; transform: translate(-50%,0); z-index: 3;}
.book_box4 .post { position: absolute; width: 50%; height: 20%; top: 81%; left: 0;}
.book_box4 .list { position: absolute; width: 503%; height: 20%; top: 81%; left: 50%;}

/*---------------登記區塊END------------------*/


/*版頭*/
.Area_top .momologo { z-index:2; position: absolute;top:36px; left:26px;}
.Area_top .momologo a { display:block; width:200px; height:71px; background: url(momo_logo.png?t=1661929735148) no-repeat;}
.Area_top .momologo a:hover{ background: url(momo_logo_on.png?t=1661929735148) no-repeat;}
	@media screen and (max-width:767px){
		.Area_top { height: auto;}
		.Area_top .momologo { display:none;}
	}


/*PC背景*/
.bg_00 { z-index:0; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_01 { z-index:-50; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_02 { z-index:-51; position:absolute; top:730px; left:0; width:100%; height:100%; background-repeat:repeat-y; background-position: center top; pointer-events:none;}
.bg_tree { z-index:-1; position:fixed; bottom:0px; left:0; width:100%;  background-position: center top; pointer-events:none; top:0;}
.bgdeco { z-index:-1; position:fixed; top:0px; left:0; width:100%; height:100%; background-position:center 0px; background-repeat:repeat-y; transition:0.5s linear; pointer-events:none;}


/*版頭區塊*/
.Area_title { height:928px;}
.main{position:absolute; left:-8px; top:154px;}
.main img{width: 82%;}
.main2{position:absolute; left:753px; top:145px;}
.paste{position: absolute; top:315px; left:810px; z-index: 1;}
.person{position: absolute; top:102px; left:295px; z-index: -1;} 
.fly { position:absolute;left:-147px;top:254px;}

@media screen and (max-width:767px){
			.Area_title { height:200vw; }	
			.main{position:absolute; left: 1vw;  top:19vw;width:32%;}
	        .main2{position:absolute; left: 61vw;  top:19vw;width:35%;}		
	        .toplight{position:absolute;left:0vw;top:0;z-index:99; width:100%;}
	        .fly {position:absolute; left: 4vw;  top:36vw;width:15%;}
	
	
}





/*行銷活動*/
.Area_title .activ { position:absolute;left:55px;top:387px; width:100%; z-index:5;}
.Area_title .activ ul{padding-left:0px;padding-top:0px; margin: 0 auto;  width:100%;}
.Area_title .activ ul li {position: relative; list-style: none;float: left;margin:0 0 0 -40px; width:25%;}
.Area_title .activ ul li:nth-child(1) {position: absolute; top: -16px; left:0; }
.Area_title .activ ul li:nth-child(2) {position: absolute; top: 205px; left:-63px; }
.Area_title .activ ul li:nth-child(3) {position: absolute; top: 205px; left:91px; }
.Area_title .activ ul li img{width:100%;}
		@media screen and (max-width:767px){
			
			.Area_title .activ {left:0;top:112vw; width:100%; }
			.Area_title .activ ul{padding:0; margin:0; width:100%;}
		    .Area_title .activ ul li{width:25%;margin:0; margin-left: -1vw;}
			.Area_title .activ ul li img{width:120%;}
			.Area_title .activ ul li:nth-child(1) {position: absolute;   top: 2vw; left: 22vw; width: 49%; }
			.Area_title .activ ul li:nth-child(2) {position: absolute; top: 40vw; left:16vw; }
			.Area_title .activ ul li:nth-child(3) {position: absolute; top: 40vw; left:57vw; }
		}
		





/*版頭輪播品*/
    .Area_title .box_PD .Area_swiper {  position: absolute; top: 249px; left: 909px; width: 551px; height: 586px;}
    .Area_title .box_PD .Area_swiper .Area_swiper_box .swiper-wrapper {margin: 0; padding: 0;}
	.Area_title .box_PD .Area_swiper li {list-style: none;}
    .Area_title .box_PD .Area_swiper li .swiper_pd { z-index: 3;opacity: 0; position: absolute; top: 229px; left: -83px;transform: translate(5%,0);  }
    .Area_title .box_PD .Area_swiper li.swiper-slide-active .swiper_pd { z-index: 3;opacity: 1;transition: .8s ease-out;transform: translate(0,0);  }
    .Area_title .box_PD .Area_swiper img { width:100%; height:auto;}
    .Area_title .box_PD .Area_swiper li .swiper_txt { opacity: 0; position: absolute; top:130px; left: -22px;transition: .8s ease-out;transform: translate(10%,0);  }
    .Area_title .box_PD .Area_swiper li.swiper-slide-active .swiper_txt { opacity: 1;z-index: 5;transition:transform 1s cubic-bezier(0.77, 0, 0.175, 1),opacity 1s cubic-bezier(0.77, 0, 0.175, 1);transform: translate(0,0); }
    @media screen and (max-width:767px){
      .Area_title .box_PD .Area_swiper { z-index: 2; position:absolute;left:0vw;top:42.3vw; width:80%; height:44%;}
      .Area_title .box_PD .Area_swiper li .swiper_pd {   opacity: 0; z-index: 1;position: absolute; top: 35vw; left:44vw;width:60%;transform: translate(5%,0);  }
	  .Area_title .box_PD .Area_swiper li .swiper_txt {   opacity: 0; z-index: 1;position: absolute; top: 40vw; left:3vw;width:55%;transition: .8s ease-out;transform: translate(-10%,0); }
	  .Area_title .box_PD .Area_swiper li.swiper-slide-active .swiper_pd {  opacity: 1;z-index: 1;transition: .8s ease-out;transform: translate(0,0);}
	  .Area_title .box_PD .Area_swiper li.swiper-slide-active .swiper_txt {  opacity: 1;z-index: 1;transition:transform 1s cubic-bezier(0.77, 0, 0.175, 1),opacity 1s cubic-bezier(0.77, 0, 0.175, 1);transform: translate(0,0); }
    }




/*主打*/
.Area_item { height:644px;}
.Area_item .title{height:auto; position: relative; left:0; margin:0px auto 0px;  text-align: center; background-position:center top; background-repeat:no-repeat;}
.Area_item .item {position:absolute; width:100%; top:158px; left: -17px; }
.Area_item .item ul{overflow: hidden; margin:0; display:inline-block; }
.Area_item .item ul li { list-style: none;float: left; width: 20%; padding-bottom:13px; }
.Area_item .item ul li img{width:95%;}

		@media screen and (max-width:767px){
			.Area_item { height:100%;}
			.Area_item .item {position:relative;width:100%; top:-2vw;  margin:0; left:0; padding-bottom: 8vw;background-color: #fcbb38; }
			.Area_item .item ul{width:92%; margin-left: -8vw;}
		    .Area_item .item ul li{margin:1vw 0; padding:0 ;width:50%; padding-bottom: 0; }		
			.Area_item .item ul li img{width:90%;}			
		
	}





/*品類優惠*/
.Area_guan { height:543px;}
.Area_guan .title{height:auto; position: relative; left:0; margin:0px auto 0px;  text-align: center; background-position:center top; background-repeat:no-repeat;}
.Area_guan .guan {position:absolute; width:100%; top:151px; left: -17px; }
.Area_guan .guan ul{overflow: hidden; margin:0; display:inline-block; }
.Area_guan .guan ul li { list-style: none;float: left; width: 20%; padding-bottom:13px; }
.Area_guan .guan ul li img{width:95%;}

		@media screen and (max-width:767px){
			.Area_guan { height:100%;}
			.Area_guan .guan {position:relative;width:93%; top:3vw;  margin:0; left: 2vw; padding-bottom: 8vw;}
			.Area_guan .guan ul{width:92%; margin-left: -8vw;}
		    .Area_guan .guan ul li{margin:1vw 0; padding:0 ;width:50%; padding-bottom: 0; }
			.Area_guan .guan ul li img{width:90%;}			
		
	}








/*FB+登記攻略*/
.Area_fans{ height:178px;}
.Area_fans .fans {position:absolute;left:154px; top:7px;}
.Area_fans .fans ul{margin: 0 auto; display:inline-block; width:85%;}
.Area_fans .fans ul li {list-style: none;float: left;margin:0; width:50%;}
.Area_fans .fans ul li img{width:93%;}
		@media screen and (max-width:767px){
			.Area_fans { height:19vw; left: 0; top:5vw;}
			.Area_fans .fans {position:absolute;left:2.2vw;top:-1vw; width:96%;}
			.Area_fans .fans ul{width: 100%; padding-left: 0;}
		    .Area_fans .fans ul li{width:50%;margin:0;}
			.Area_fans .fans ul li img{width:97%;}
		}






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