@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;background-color:#99d4ff; 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}
@media screen and (max-width:767px){
.WRAPPER { margin-bottom: 0;min-width: inherit; min-height: 100vh; overflow: hidden; background-size: 100%; background-image:url("mrepeat.png?t=1779939998870") ; background-repeat: repeat-y;background-color: #99d4ff;}
.WRAPPER img {  width:100%;  height:auto;}
}

/*區塊_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 { 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:scale(0.95);
     -moz-transform:scale(0.95);
      -ms-transform:scale(0.95);
       -o-transform:scale(0.95);
          transform:scale(0.95);}
		  
		  
.WRAPPER .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;}
.WRAPPER .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){
		.Area1220 { width:100%;}
		.Area960 { width:96%;}
		.Area .go_bt:hover {  
			-webkit-transform:none;
			-moz-transform:none;
			-ms-transform:none;
			-o-transform:none;
			transform:none;}


	}

/*背景*/
@media screen and (min-width:768px){
.bg_01 { z-index:-45; position:absolute;top:-155px;left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_02 {z-index:-50;position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:repeat-y;background-position: center top;pointer-events:none;}
}
@media screen and (max-width: 767px){

}

/*不可點擊*/
.pointer a{pointer-events: none;}


/*版頭區*/
@media screen and (min-width:768px){
   .Area_title {
      height:487px;
      .brand_top{
         position:absolute;
         left: 111px;
         top: 90px;
         z-index:6;
         width: 37%;
      }
      .ka_piske{
         position:absolute;
         left: 689px;
         top: 148px;
         z-index:6;
         width: 47%;
      }
      .date_top{
         position:absolute;
         left:1082px;
         top:54px;
         z-index:5;
         width: 11%;
      }
      .main-title {
         position: absolute; 
         width: 57%;
         left:2px; 
         top:141px;
      }
      .subtitle {
         position: absolute; 
         width: 35%;
         left:127px; 
         top:317px;
      }
   }
}

@media screen and (max-width: 767px){
   .Area_title {
      height:102vw;
      .brand_top{
         position:absolute;
         left: 21vw;
         top: 6vw;
         z-index: 5;
         width: 60%;
      }
      .ka_piske{
         position:absolute;
         left: 6vw;
         top: 46vw;
         z-index:5;
         width: 89%;
      }
      .date_top{
         position:absolute;
         left: 79vw;
         top: 38vw;
         z-index: 3;
         width: 18%;
      }
      .main-title {
         position:absolute;
         width: 86%;
         top: 12vw;
         right: 6vw;
      }
      .subtitle {
         position: absolute;
         width: 53%;
         top: 33vw;
         left: 24vw;
      }
   }
   .top_bg {
      position:relative;
      top:0;
      z-index:0;
   }
}
	

/*登記贈品文案顏色*/
.Area_danji .danji_box ul li .activityText .gifts span { color: #007ee1;}   

/* 作圖區 */
.PD_layout.PD_layout-CSSBG_01[data-pd-li=PDBN]{
   ul{
      gap: 40px;
      @media screen and (max-width:767px){
         gap: 4vw;
      }
      li{
         .PD_img{
            padding: 0;
            margin:86px auto 70px;
            width: 70%;
            @media screen and (max-width:767px){
               width: 60%;
               margin: 10vw auto 6vw;
            }
         }
         .PD_into{
            width: 80%;
            margin: 0 auto;
            h3{
               color: #212121;
               font-size: 1.8rem;
               @media screen and (max-width:767px){
                  font-size: 3.7vw;
               }
            }
            h4{
               color: #212121;
               font-size: 1.3rem;
               @media screen and (max-width:767px){
                  font-size: 4vw;
               }
            }
            p{
               font-size: 1.2rem;
               color: #007ee1;
               @media screen and (max-width:767px){
                  font-size: 3vw;
               }
               .oPrice{
                  color: #888888;
                  font-size: 1.5rem;
                  @media screen and (max-width:767px){
                     font-size: 2vw;
                  }
               }
               .Price{
                  color: #007ee1;
                  font-size: 2.5rem;
                  @media screen and (max-width:767px){
                     font-size: 5vw;
                  }
               }
            }
         }
      }
      li::after {
         content: "";
         display: block;
         width: 100%;
         height: 0;
         padding-bottom: 154%;
         background-image: url(PD_layout-CSSBG_01.png?t=1779939998870);
         background-repeat: no-repeat;
         background-size: 100%;
         background-position: center top;
      }
   }

}

/* 調整BN間距 */
.PD_layout[data-pd-li="BN"]{
  ul{
    gap: 2vw;
    @media screen and (min-width: 768px){
      gap: 20px;
    }
  }
}

/* 圖片區標 */
.box_title{
    margin-bottom: 2vw;
    pointer-events: none;
    @media screen and (min-width: 768px){
      margin-bottom: 20px;
    }
    ul{
      &::after {
         content: unset;
      }
    }
}


/* 文字區標 */
.box_title_text{
  margin-bottom: 1vw;
  pointer-events: none;
  @media screen and (min-width: 768px){
    margin-bottom: 20px;
  }
  .PD_layout.PD_layout-D3_01{
      ul{
         &::after {
            content: unset;
         }
         .PD{
            .PD_img img{
               width: 100%;
            }
            .PD_into{
               h3{
               color: #212121;
               top: 55%;
               }
            }
         }
      }
  }
}

/* 區塊間距 */
.Area_bottom{
   margin-bottom: 6vw;
   @media screen and (min-width: 768px){
      margin-bottom: 60px;
   }
}

/*注意事項區*/
.edm_notice { text-align:center; padding:10px 10px 15px 10px; color:#000000; font:12px/18px Helvetica; }/*文字顏色依視覺調整*/
.edm_notice .apple_notice { padding:10px 0px 10px 0px; }  

.Area_product{
   .box_title_text{
      margin-bottom: 2vw;
      pointer-events: none;
      @media screen and (min-width: 768px){
         margin-bottom: 20px;
      }
      .PD_layout.PD_layout-D3_01 .PD{
         .PD_img img{
            width: 100%;
         }
         .PD_into{
            h3{
            color: #212121;
            line-height: 2.2em;
            max-height: 3em;
            top: 55%;
            }
         }
      }
   }
}

.Area_brand{
   .box_title{
      margin-bottom: 0;
      pointer-events: none;
      @media screen and (min-width: 768px){
         margin-bottom: 0;
      }
   }

}

.Area_logo{
   width: 80%;
   @media screen and (min-width: 768px){
      width: 750px;

   }
}


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