/* CSS Document */

.cantantBase {
  display: none!important;
}
.Area_logo { 
  display: none!important;
}

/*基本*/
body{ margin:0; padding:0; background-color: #fde46e;}

/*全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; margin:0; padding:0;}
.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: hidden;}
		.WRAPPER img {  width:100%;  height:auto;}
	}


/*回版頭*/
#gotop { display: none; position:fixed; z-index:201; right:0; padding:14px 6px 3px 10px; font:12px/30px Verdana; text-align:center; color:#fff; cursor:pointer; transition: 0.2s; transform: translateX(200%);
        bottom:70px;
        bottom: calc(70px + constant(safe-area-inset-bottom)*0.6 );
        bottom: calc(70px + env(safe-area-inset-bottom)*0.6 );}
#gotop::before { content: ""; position:absolute; top:9px; left:19px; width: 0; height: 0; border: 4px solid #fff; border-color: transparent transparent #fff; }
#gotop::after  { content: ""; z-index:-1; position:absolute; top:50%; left:50%; border-radius:50px 0 0 50px; transform:translate(-50%,-50%); width:44px; height:44px; background-color:rgba(0,0,0,0.8);}
#gotop.cate-open { transform: translateX(0%);}
  /*白色*/
  #gotop { color:#000; }
  #gotop::before { border-color: transparent transparent #000;}
  #gotop::after  { background-color: rgba(255,255,255,0.95);  box-shadow:0 1px 0 rgba(242,242,242,1), 0 0 10px rgba(0,0,0,0.2);}

	



/*背景*/
.bg_00 { z-index:-2; 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:-2; position:absolute; top:0; left:0; width:100%; height:1867px; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_02 { z-index:-2; position:absolute; top:1848px; left:0; width:100%; height:1582px; background-repeat:no-repeat; background-position: center top; pointer-events:none;}

@media screen and (max-width:767px){
	.mbg_01 {z-index:-2;position:absolute;top:0;left:0;width:100%;height: 100%;background-repeat:no-repeat;background-position:center top;background-size:100%;pointer-events:none;}
}



/*區塊_all*/
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a {  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:scale(0.95);
     -moz-transform:scale(0.95);
      -ms-transform:scale(0.95);
       -o-transform:scale(0.95);
          transform:scale(0.95);}
		  
		  
.Area .go_bt1 {
  -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_bt1:hover { 
  -webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);}
	@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 {margin:0 auto;width: 96%;}
	}


/*隱藏物件*/
.Area_logo { display: none!important; }

/*LOGO*/
.momologo { z-index:2; position: absolute; top: 15px; left:15px;}
.momologo a { display:block; width:140px; height:21px;}
.momologo a svg { width:140px; height:21px; }
.momologo a path { fill:#EA27C2; }
.momologo-pink  a path { fill:#EA27C2; }/*LOGO 桃紅色*/
.momologo-white a path { fill:#ffffff; }/*LOGO 白色*/
  @media screen and (max-width:767px){
    .momologo { display:none;}
  }
                    


/*版頭區塊*/
.Area_title {height:498px; width: 100%;}
.Area_title .title_01 {position: absolute;left: 688px;top: 66px;width: 36%;} 
.Area_title .title_01 img { width: 100%; height: 100%; } 
.Area_title_btn{ position: absolute; top: 435px; left: 405px; animation: Area_title_btn 1s infinite ease-in-out alternate;}
.Area_title_btn img{ width: 100%; }
.deco01{ position: absolute; width: 100%; left: 303px; top:164px; }
@media screen and (max-width:767px){
	.Area_title {height: 50vw;}
	.Area_title .title_01 {position:relative;top: 10vw;left: 3vw;width: 95%;}
	.Area_title_btn{ position: absolute; top: 42.5vw; left: 29vw; width: 42vw;  }
	.deco01{  top: 18.5vw; left: 63vw; width: 39vw; }
  
}



/* 三顆 */
.Area08 .PD_layout li { border: none;  } 
.Area08 .PD_layout li a{ pointer-events: none; }
.Area08 li:nth-child(1) .js-PD_img2{ position: absolute; top: 2%; left: 14%; width: 66%!important;}
.Area08 li:nth-child(2) .js-PD_img2{ position: absolute; top: -7%; left: 16%; width: 60%!important;}
.Area08 li:nth-child(3) .js-PD_img2{ position: absolute; top: -3%; left: 23%; width: 53%!important;}
@media screen and (min-width: 768px){
  .Area08 .PD_layout ul { padding: 0 85px; grid-gap:17px;}
}
@media screen and (max-width: 767px){
  .Area08 { margin-bottom: -11vw; width: 98%;}
  .Area08 .PD_layout ul { grid-gap: 0; background: none; width: 100%; padding: 0;}
}


/*整頁deco*/
.deco img{ width: 100%; }
.Area02 .deco, .Area_QA .deco{ position: absolute; z-index: 3;}
@media screen and (min-width: 768px){
  .Area02_2 .deco{ top: -35px; right: 127px; }
  .Area02_3 .deco{ top: -38px; right: 65px; }
  .Area_QA .deco{ top: -46px; right: 33px; }
}
@media screen and (max-width:767px){
  .Area02_2 .deco{  width: 9vw; top: -5vw; right: 5vw;  }
  .Area02_3 .deco{ width: 15vw; top: -3vw; right: 3vw;  }
  .Area_QA .deco{ width: 9vw; top: -11vw; right: 3vw;  }
 
}



/*步驟*/
.swiper-slide img{ width: 100%; }
.Area02 img{ width: 100%; }
.Area02 .txt{ width: 50%; margin: auto;}
.Area02 .arrow{ position: absolute; z-index: 2;  }
@media screen and (min-width: 768px){
  .Area02{ margin-top: 62px; }
  .Area02 .arrow{  width: 600px; }
  .Area02_4{ margin-top: 85px; }
  .Area02_1 .arrow{  top: -143px; right:-37px; }
  .Area02_2 .arrow{  top: -280px; right:-265px; }
  .Area02_3 .arrow{  top: -280px; right:-265px; }
  .Area02_4 .arrow{  top: -143px; right:-37px; }
  .Area02_1 .tag{ width: 30%; margin: 41px  0 14px -41px;}
  .Area02_2 .tag{ width: 30%; margin: 61px  0 14px -1px;}
  .Area02_3 .tag{ width: 30%; margin: 61px  0 14px -9px;}
  .Area02_4 .tag{ width: 30%; margin: 41px  0 14px -41px;}
  .Area02_4:before{ content: ""; position: absolute; top: 41px; left: -390px; width: 2000px; height: 792px; z-index: -1; background: url(pc_pink.png?t=1755862601339) no-repeat center / 100%; }
}
@media screen and (max-width:767px){
  .Area02{ margin-top: 19vw; }
	.Area02_1{ margin-top: 13vw; }
	.Area02_4{ margin-top: 10vw; }
  .Area02 .txt{ width: 70%; }
  .Area02_1 .arrow{  top: -15vw; right: 0vw; width: 45vw;  }
  .Area02_2 .arrow{  top: -23vw; right: 0vw; width: 45vw;  }
  .Area02_3 .arrow{  top: -23vw; right: 0vw; width: 45vw;  }
  .Area02_4 .arrow{  top: -15vw; right: 0vw; width: 45vw;  }
  .Area02_1 .tag{ width: 47%; margin: 4vw 0 1vw -10.5vw;}
  .Area02_2 .tag{ width: 47%; margin: 6vw 0 1vw -3.5vw;}
  .Area02_3 .tag{ width: 49%; margin: 6vw 0 1vw -6.5vw;}
  .Area02_4 .tag{ width: 47%; margin: 4vw 0 1vw -10.5vw;}
  .Area02_4:before{ content: ""; position: absolute; top: -27vw; left: 0; width: 100vw; height: 200vw; z-index: -1; background: url(m_pink.png?t=1755862601339) no-repeat center / 100%; }

  
}



/*QA區塊*/
.Area_QA .txt{ width: 50%; margin: auto;}
.Area_QA .arrow{ position: absolute; z-index: 2;  }

.QAbox .moreButton .fix.up::after { transform:rotate(0deg);}
.QAbox .moreButton .fix.down::after { transform:rotate(180deg);}
  @media screen and (min-width:768px){
    .Area_QA{ margin-top: 80px; }
    .Area_QA .arrow{  width:500px; top: -271px; right:-165px;}
    .QAbox  {padding: 25px 100px 100px 100px}  
    .Area_QA_PD {position: absolute;top: -110px;left: 634px;width: 56%;z-index: -2;}
    .Area_QA_light {position: absolute;top: -110px;left: 634px;width: 56%;z-index: -1;}	  
    .Area_QA_PD img { width: 100%; height: 100%;}
    .order_btn {position: absolute;bottom: 2px;left: 450px;margin-bottom: 0; transform: scale(0.8);}
    .Area_forewarned { margin: 40px auto 0; padding-bottom: 34px; }
  }
  @media screen and (max-width:767px){
    .Area_QA { margin-top: 14vw; }
    .Area_QA .txt{ width: 70%; }
    .Area_QA .arrow{  top: -24vw; left: -17vw; width: 45vw; transform: scaleX(-1); }
    .Area_QA .box { margin-bottom: 9vw;}
    .order_btn {position: absolute;width: 47%;top: 104vw;left: 27vw;}  	
    .QAbox {width: 96%;margin: 0 auto;padding-top:3vw;}
    .Area_QA_PD {position: absolute;top: 20.4vw;left: 7.8vw;width: 83%;}
    .Area_QA_light {position: absolute;top: 20.4vw;left: 7.8vw;width: 83%;}	  
    .Area_QA_PD img { width: 100%; height: 100%;}
    .Area_forewarned { margin: -5vw 0 -1vw 0; padding-bottom: 5vw;}
  }

/*訂閱說明 展開選單*/
.QAbox .moreButton {
  width: 100%;
}

.QAbox .moreButton .title {
  font: 20px/1.7em '微軟正黑體';
  letter-spacing: 0;
  text-align: justify;
  margin-bottom: 10px;
  display: inline-block;
  color: #1B1616;
}

.QAbox .moreButton dl {
}

.QAbox .moreButton dt {
  cursor: pointer;
}

.QAbox .moreButton dd {
  display: none;
  margin: 0;
  padding: 3%;
  font: 18px/1.8em '微軟正黑體', 'Century Gothic';
  text-align: left;
  color: #424242;
  background-color : #fff;
}

.QAbox .moreButton .menu_btn {
  position: relative;
  display: block;
  height: 50px;
  width: 100%;
  font: bold 21px/50px 微軟正黑體;
  color: #fff;
  text-align: left;
  box-sizing: border-box;
  padding-left: 2%
}

.QAbox .moreButton .up::after {
  content: "";
  position: absolute;
  top: 45%;
  right: 2%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4em 0.3em 0 0.3em;
  border-color: #fff transparent transparent transparent;
  transform: rotate(180deg);
}

.QAbox .moreButton .down::after {
  content: "";
  position: absolute;
  top: 45%;
  right: 2%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4em 0.3em 0 0.3em;
  border-color: #fff transparent transparent transparent;
}

.QAbox .moreButton .up img {
  width: 100%;
  height: auto;
}

.QAbox .moreButton .down img {
  width: 100%;
  height: auto;
}

.QAbox .moreButtontag {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .QAbox .moreButton {
      width: 100%;
      margin: 3vw auto;
  }

  .QAbox .moreButton .title {
      font: 16px/1.7em '微軟正黑體';
      letter-spacing: 0;
      text-align: justify;
      margin-bottom: 10px;
      display: inline-block;
      line-height: 1.5em;
  }

  .QAbox .moreButton dl {
  }

  .QAbox .moreButton dt {
      cursor: pointer;
  }

  .QAbox .moreButton dd {
      font: 16px/1.8em '微軟正黑體', 'Century Gothic';
      border: .2vw solid #e3cfae;
  }

  .QAbox .moreButton .menu_btn {
      position: relative;
      display: block;
      height: 2em;
      font: bold 16px/2em 微軟正黑體;
      color: #fff;
      text-align: left;
      padding: 0 2%;
  }

  /* .moreButton .up::after {content: ""; position: absolute; top:44%; right:10vw; width: 0; height: 0; border-style: solid; border-width: 3vw 2vw 0 2vw; border-color: #fff transparent transparent transparent;transform:rotate(180deg);} */
  /* .moreButton .down::after {content: ""; position: absolute; top:44%; right:10vw; width: 0; height: 0; border-style: solid; border-width: 3vw 2vw 0 2vw; border-color: #fff transparent transparent transparent;} */
  .QAbox .moreButton .up img {
      width: 100%;
      height: auto;
  }

  .QAbox .moreButton .down img {
      width: 100%;
      height: auto;
  }

  .QAbox .moreButtontag {
      display: none!important;
  }
}


.agree_more .paragraph { padding: 10px 0 0 28px!important; list-style:circle;}
.agree_more .noStyle{list-style: none; padding-left: 1.5em!important; }
.agree_more li{ word-break: break-all; }
.agree_more a { color:#629645; text-decoration: underline; }
.agree_more .box_table{ padding: 10px 0 0;}
.agree_more .box_table .small{ font-size: 0.7em; }
.agree_more .box_table .sum{ padding-left: 4em;}
.agree_more .box_table .green{ background-color: #d4e8a3; }
.agree_more .box_table .green2{ background-color: #f1fbd4; }
	@media screen and (max-width:767px){    
	.agree_more .paragraph{ padding:2vw 0 0 5vw!important;}
	.agree_more .box_table .sum{ padding-left:10em;}
		
	}




/*共用--區塊_切割*/
.Area_grid { margin: 0 auto; padding:0; list-style: none;}
.Area_grid:after  { content: ""; display:block; clear:both;}
.Area_grid .grid-slide { float:left; display:block; padding:0; list-style: none;}
  /*共用--區塊_切割PC*/
  @media screen and (min-width:768px){
    .Area_grid_1bn_PC .grid-slide { margin:0 0 2% 0; width:100%;}
    .Area_grid_2bn_PC .grid-slide { margin:0 1% 2%; width:48%;}
    .Area_grid_3bn_PC .grid-slide { margin:0 1% 2% ; width:31.3%;}
    .Area_grid_4bn_PC .grid-slide { margin:0 0.5% 2% ; width:24%;}
    .Area_grid_1bn_nopadding_PC .grid-slide { width:100%;}
    .Area_grid_2bn_nopadding_PC .grid-slide { width:50%;}
    .Area_grid_3bn_nopadding_PC .grid-slide { width:33.3%;}
    .Area_grid_4bn_nopadding_PC .grid-slide { width:25%;}
    .Area_grid_5bn_nopadding_PC .grid-slide { width:20%;}
    .Area_grid_6bn_nopadding_PC .grid-slide { width:16.6%;}
  }
  /*共用--區塊_切割Phone*/
  @media screen and (max-width:767px){
    .Area_grid_1bn_Phone .grid-slide { margin:0 0 2% 0; width:100%;}
    .Area_grid_2bn_Phone .grid-slide { margin:0 1% 2%; width:48%;}
    .Area_grid_3bn_Phone .grid-slide { margin:0 1% 2% ; width:31.3%;}
    .Area_grid_4bn_Phone .grid-slide { margin:0 0.5% 2% ; width:24%;}
    .Area_grid_1bn_nopadding_Phone .grid-slide { width:100%;}
    .Area_grid_2bn_nopadding_Phone .grid-slide { width:50%; }
    .Area_grid_3bn_nopadding_Phone .grid-slide { width:33.3%;}
    .Area_grid_4bn_nopadding_Phone .grid-slide { width:25%;}
    .Area_grid_5bn_nopadding_Phone .grid-slide { width:20%;}
    .Area_grid_6bn_nopadding_Phone .grid-slide { width:16.6%;}
  }

.Area_game_coupon .Area960 { padding: 15px 0 20px;}
.Area_game_coupon .box_ { width: 80%;}
.Area_game_coupon .box_ img { width: 100%; height: auto;}
    @media screen and (max-width:767px){
      .Area_game_coupon .Area960 { padding: 2.8vw 0 0vw;}
      .Area_game_coupon .box_ { width: 92%;}
    }






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



/*注意事項區*/
.edm_notice{ text-align:center; padding:10px 10px 15px 10px; color:#1e1e1e; font:12px/18px Helvetica;}
.edm_notice .apple_notice{  padding:10px 0px 10px 0px; }