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

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


/*全BOX版面*/
.WRAPPER { position: relative; display: block; margin: 0 auto; padding: 0; width: 100%;  min-width: 1220px; overflow: hidden; font-family: "微軟正黑體","Microsoft JhengHei",Helvetica; background: url(bgrepeat.jpg?t=1751289800242)top center repeat-y;background-color:#000; }
.WRAPPER img { border: 0; vertical-align: top;}
.WRAPPER a { text-decoration: none;}
@media screen and (max-width:767px){
  .WRAPPER { min-width: inherit; padding-bottom: 10vw; background: url(bgrepeat_m.jpg?t=1751289800242)top center repeat-y; background-size: 100%;background-color:#000; }
  .WRAPPER img {  width: 100%;  height: auto;}
}
	
/*背景*/
.bgtop  { z-index: 0; position: absolute; top: 0; left: 0; width: 100%; min-width: 1220px; height: 100%; background: url(bgtop.jpg?t=1751289800242) no-repeat center top;}
.bgdeco  { z-index: 0; position: absolute; top: 940px; left: 0; width: 100%; min-width: 1220px; height: 100%; background: url(bgdeco.png?t=1751289800242) repeat-y center top;}
.main_light  { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; min-width: 1220px; height: 100%; background: url(main_light.png?t=1751289800242) no-repeat center top; mix-blend-mode: screen; pointer-events: none;}
@media screen and (max-width:767px){
  .bgtop { min-width: inherit;  background: url(bgtop_m.jpg?t=1751289800242) no-repeat center 44px; background-size: 100%;}
  .main_light { min-width: inherit;  background: url(main_light_m.png?t=1751289800242) no-repeat center 44px; background-size: 100%;}
}



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


/*Area_txt(有設計的區標PC手機共用)*/
@media screen and (min-width:768px){
	.Area_txt {margin:0 auto 15px; }
	.Area_txt img {width:700px; }	  
}
@media screen and (max-width:767px){
		.Area_txt {width:100%;margin:0vw auto 0vw; }
	    .Area_txt img {width:100%;}
}

/*btn*/
@media screen and (min-width:768px){
.btn { z-index: 99; padding: 0;width: 100%; margin: -10px auto 40px!important;  }
.btn .PD_layout ul { padding: 0; width: 20%; grid-gap: 0;}
.btn .PD_layout ul li { background-color: transparent; padding: 0; background: #000; border-radius: 50px;}
.btn .PD_layout ul li .PD_into { padding: 0;}
.btn .PD_layout ul li h5 { padding: 0; margin: 0; font: bold 30px/43px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; color: #fff;}
}
@media screen and (max-width:767px){
  .btn {  z-index: 99;padding: 0;width: 100%; margin: 1vw auto 8vw!important; }
  .btn .PD_layout ul { padding: 0; width: 35%!important; grid-gap: 0!important;}
  .btn .PD_layout ul li { background-color: transparent; padding: 0; background: #000; border-radius: 10vw;}
  .btn .PD_layout ul li .PD_into { padding: 0;}
  .btn .PD_layout ul li h5 {padding: 0vw; margin: 1.5vw; font: bold 5.2vw/5vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;color: #fff;}
}




/*區塊_all*/
.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);}
.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_bottom { margin-bottom: 50px;}
@media screen and (max-width:767px){
  .Area_bottom { margin-bottom: 10vw;}
}

/*公版*/
/*.PD_layout h3 { background: #000 !important;}*/

/*版頭*/
.Area_top { position: relative;height:964px;}

.Area_top .balloon_01 { position: absolute; top: -72px; left: -450px;}
.Area_top .balloon_02 { position: absolute; top: 188px; right: -140px;}
.Area_top .balloon_03 { position: absolute; top: -72px; right: -360px;}


/*主副標*/
.Area_top .toptitle { z-index:9;position: absolute; top:15px; left:250px; width:720px; }
.Area_top .main_titile { z-index:10;position: absolute; top:275px; left:-12px; width:57%; }




@media screen and (max-width:767px){
/*主副標*/
.Area_top .toptitle { position: absolute; top:-5vw; width:74%;left:13vw;z-index: 7;}
.Area_top .main_titile {position: absolute; top:32vw; width:76%;left:9vw;z-index: 7;}

/*版頭品*/	
.Area_top .box_PD { position: absolute; top:6vw; width:76%;left:52vw;z-index: 7;}
.Area_top .box_PD .PD_layout .PD_slide:hover {box-shadow: none;}	
.Area_top .PD_layout .PD_logo{ display:block!important;}
.Area_top .PD_layout[data-pd-pdlogo="3"] .PD .PD_logo img{ width: 142%;height: auto;position: relative;left: -55vw;top: 43vw;}
.Area_top .box_PD .PD_layout .PD_img { display:none;}
	
  .Area_top { height:117vw;}

  .Area_top .balloon_01 { top: -4vw; left: 3vw; width: 22%;}
  .Area_top .MJbag { top: 65vw; left: 28vw; width: 47%;}
  .Area_top .coach { top: 98vw; left: 53vw; width: 35%;}
  .Area_top .DW { top: 103vw; left: 25vw; width: 19%;}
  .Area_top .MJ { top: 105vw; left: 41vw; width: 15%;}
}




/*副標輪播*/
.Area_top .subtitle { position: absolute; top: 286px; left:408px; width: 400px; height: 88px; overflow: hidden; z-index: 10;}
.Area_top .subtitle ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; box-sizing: content-box; grid-gap: inherit;}
.Area_top .subtitle ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; opacity: 0; transform: translate(5%,0);}
.Area_top .subtitle ul.PD_wrapper li.swiper-slide-active { opacity: 1; transition: .8s ease-out; transform: translate(0,0);}

@media screen and (max-width:767px){
  .Area_top .subtitle { position: absolute; width: 40%; height: auto; top: 23.8vw; left: 30vw;  overflow: hidden;}
}


/*輪播特效*/
@media screen and (min-width:768px){
.Area_top  .box_PD .Area_swiper .swiper-slide .PD_img { opacity: 0; transform: translate(0,0%);  }
.Area_top  .box_PD .Area_swiper .swiper-slide-active .PD_img { opacity: 1; transition: 1s cubic-bezier(0, 0.63, 0.63, 0.89); transform: translate(0,0);}
.Area_top  .box_PD .Area_swiper .swiper-slide .PD_logo {display: none;}
    }
    @media screen and (max-width:767px){
       .Area_top  .box_PD .Area_swiper .swiper-slide .PD_logo { opacity: 0; transition: .2s ease-out;transform: translate(0%,0);  }
       .Area_top  .box_PD .Area_swiper .swiper-slide-active .PD_logo { opacity: 1; transition: 1s ease-out; transform: translate(0,0);}
       .Area_top  .box_PD .Area_swiper .swiper-slide .PD_img {display: none;}
    }





/*---top6品---*/
@media screen and (min-width:768px){
	.Area_6pd{position: relative;top:436px;left:165px ; margin: 0px;width:885px!important }
	.Area_6pd .box_6pd{margin: 0px  ;}
	.Area_6pd .box_6pd .box_bg{position: relative; padding: 40px 0px 20px ; border-radius: 40px;}
	.Area_6pd .box_6pd .box_swiper{position: relative;width: 100%;height: 400px;margin: 0 auto 40px;overflow: hidden;}
	.Area_6pd .box_6pd .box_swiper .layout_6pd {padding-bottom: 0px}
	.Area_6pd .box_6pd .box_swiper .layout_6pd ul { display: flex; grid-gap: 0; padding: 0;margin: 10px 10px 10px 0px; /*height: 365px;*/ }
	.Area_6pd .box_6pd .box_swiper .layout_6pd ul li {/* height: 333px;*/ }
	/*輪播_按鈕*/
    .Area_6pd  .myarrow_r{z-index:99;position:absolute;top: 48%;right: -79px;cursor: pointer;}
    .Area_6pd  .myarrow_l {z-index:99;position:absolute;top: 48%;left: -86px;cursor: pointer;}
	.Area_6pd .swiper-pagination-bullet {}
	.Area_6pd .PD_layout[data-pd-h3="2"] .PD h3{ /* background-image: repeating-linear-gradient(90deg, #3a9ef1 -1%, #ff7196 101%)*/ /*background-color: #3a9ef1*/ ;}
	.Area_6pd .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { top:354px }
}
@media screen and (max-width:767px){
    .Area_6pd{position: relative;top:43vw;left:0vw ;margin: 5vw auto 0 ;width:90%!important }
	.Area_6pd .box_6pd {margin: 0 auto 3vw ;}
	.Area_6pd .box_6pd .box_bg { position: relative;width: 100%; margin: 0 auto; padding: 3vw 0 2vw ;}
	.Area_6pd .box_6pd .box_swiper{ position: relative; width: 100%;/* height: 69vw;*/ margin: 0 auto; overflow: hidden;}
	.Area_6pd .box_6pd .box_swiper .layout_6pd {  padding:0 2vw 10vw;}
	.Area_6pd .box_6pd .box_swiper .layout_6pd ul { display: flex; grid-gap: 0; padding: 0; /*height: 72vw;*/ }
	.Area_6pd .box_6pd .box_swiper .layout_6pd ul li { /*height: 62vw;*/}
	/*輪播_按鈕*/	
	.Area_6pd .swiper-pagination-bullet {}
	.Area_6pd .PD_layout[data-pd-h3="2"] .PD h3{/* background-image: repeating-linear-gradient(90deg, #3a9ef1 -1%, #ff7196 101%)*/ /*background-color: #3a9ef1*/ }
    .Area_6pd .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { top:61.5vw }
}


@media screen and (min-width:768px){
 .activ { width:87% ;padding:20px 0 20px; margin: auto }

}
@media screen and (max-width:767px){
.activ { width:96% ;padding:2vw 0 2vw; margin: auto }
.PD_layout-coupon3{width:96% ;margin: auto}
}


@media screen and (min-width:768px){

.Area_sectionTitle ul {position: relative;padding: 0;margin: 0;list-style: none;height: 100px!important;top:0px;}
 .Area_sectionTitle ul li { background-color: transparent; pointer-events: none;}
.Area_sectionTitle ul li h5 {position: relative;top:7px;margin: 0;padding: 0;width: 100%;height: 88px;font: 41px/80px "Noto Sans CJK SC";font-weight: 700;text-align: center;color:#fff;letter-spacing: 0px;overflow: hidden;/*text-shadow: 0px 0px 5px #000;*/}
}
@media screen and (max-width:767px){
.Area_sectionTitle ul {padding: 0;margin: 0;list-style: none;}
.Area_sectionTitle ul li { background-color: transparent; pointer-events: none;}
.Area_sectionTitle ul li h5 {position: relative;top:3vw;margin: 0;padding: 0;width: 100%;height: 10vw;font: 5.3vw/6.5vw "Noto Sans CJK SC";font-weight: 700;text-align: center;color:#fff;letter-spacing: 0px;overflow: hidden;/*text-shadow: 0px 0px 5px #000;*/}
}


/*登記贈品文案顏色*/
.Area_danji .danji_box ul li .activityText .gifts span { color: #4dc1c7;}       
@media screen and (max-width:767px){
.Area_danji{width: 96%;}
}


@media screen and (min-width:768px){
 
.box_txt2 {position: absolute;margin: 0 auto;width: 100%;height: auto;top:-15px}
.box_txt2 img{width: 80%;} 
}
@media screen and (max-width:767px){
 .box_txt2 {position: absolute;margin: 0 auto;width: 100%;padding-bottom: 3vw;height: 15vw; top: -1vw;}
.box_txt2 img{width: 100%;}

}
@media screen and (max-width:767px){
.Area01 .PD_layout{width: 96%;}
}



/*Area_page*/

  @media screen and (min-width:768px){ 
    .Area_page1 { overflow: hidden; background-color: #159399; padding: 35px 0 ; border-radius: 1em } 
    .Area_page1 h3 { color: #fff; margin: 0 auto 20px; padding: 0; font: bold 40px/50px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;}
    .Area_page1 .box_txt2{top: 14px}
    .Area_page1 .page_box .PD_layout{ width: 96%}
    .Areabottom { margin-bottom:100px; }

  }
  @media screen and (max-width:767px){
    .Area_page1 { width: 96%; overflow: hidden; background-color: #159399; padding:4vw 0vw 2vw ; border-radius: 1em } 
    .Area_page1 h3 { color: #fff; margin: 0 auto 2vw; padding: 0; font: bold 5.2vw/9vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;}
    .Area_page1 .box_txt2{top:2.5vw}
    .Area_page1 .page_box .PD_layout{ width: 96%}
    .Areabottom { margin-bottom:10vw }

  }
  @media screen and (max-width:767px){
  .layout_PD{width: 96%;}
  }
    /* --------------------------------------
     * Page 頁籤_202405291900
     * -------------------------------------- */
    .NavArea_tabbar_page { margin: 0 auto 10px  ; width: 94%; }  
    .NavArea_tabbar_page .Nav { overflow: visible; transform: translate3d(-30.5%, 0, 0);}  
    .NavArea_tabbar_page .Nav_box { border-radius: 8px; overflow: hidden; padding: 0 2%;}
    .NavArea_tabbar_page[data-num="2"] .Nav-wrapper { transform: translate3d(55.5%, 0, 0)!important}
    .NavArea_tabbar_page[data-num="3"] .Nav-wrapper { transform: translate3d(43.0%, 0, 0)!important}
    .NavArea_tabbar_page[data-num="4"] .Nav-wrapper { transform: translate3d(30.5%, 0, 0)!important}
    .NavArea_tabbar_page[data-light="box"] .Nav ul { padding: 0 }
    .NavArea_tabbar_page .Nav li { overflow: visible; }
     /*頁籤高亮顏色設定 */  
    .NavArea_tabbar_page .Nav .swiper-slide-active a { color:#fff;}
    .NavArea_tabbar_page .Nav .swiper-slide-active i { display:block; border: 1px solid #159399 !important; background-color: #159399 !important;}
     /*推編輯按鈕 */  
    .NavArea_tabbar_page .Nav input { position: fixed; left: 30%}
      @media screen and (min-width:768px){ 
        .NavArea_tabbar_page { display: block; }
      }

      /* --------------------------------------
       * Page 頁面
       * -------------------------------------- */
      /*Phone置頂滑動選單*/
      .Area_floorPD_NavArea_tabbar {
        margin: 0 auto 2vw ;
        width: 94%;
      }

      .Area_floorPD_NavArea_tabbar.cate-fixed {
        width: 100%;
      }

      .Area_floorPD_NavArea_tabbar .Nav_box {
        border-radius: 8px;
        -webkit-box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
                box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
      }

      .Area_floorPD_NavArea_tabbar .Nav li {
        overflow: visible;
      }

      /*.NavArea_tabbar .Nav a { display:inline-block;}*/
      .Area_floorPD_NavArea_tabbar.cate-fixed .Nav_box {
        border-radius: 0;
        background-color: rgba(255, 255, 255, 1);
        -webkit-box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
                box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
      }





@media screen and (min-width:768px){
.pc_activx3 .PD_layout ul { width:60% ; padding:0px; text-align:center;margin: 0px auto;}
}
@media screen and (max-width:767px){
    	.pc_activx3 .PD_layout ul { width:76% ;;padding:0px; text-align:center;margin:  0vw auto 0vw!important;grid-gap: 1.5em}
}



  /*注意事項區*/
  .edm_notice{ text-align:center; padding:10px 10px 15px 10px; color:#000; font:12px/18px Helvetica;     z-index: 3; position: relative;}
  .edm_notice .apple_notice{  padding:10px 0px 10px 0px; }