@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: #55289c;}
.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; }
  .WRAPPER img {  width: 100%;  height: auto;}
}
	
/*背景*/
.bgtop { position: absolute; top: 0; left: 0; width: 100%; min-width: 1220px; height: 100%; background: url(bgtop.png?t=1750152923469) no-repeat center top;}
.bgfixed { position: fixed; top: 100px; left: 0; width: 100%; min-width: 1220px; height: 100%; background: url(bg_bgfixed.jpg?t=1750152923469) repeat-y center top;}
.bgdeco { z-index: 0; position: absolute; top: 1080px; left: 0; width: 100%; min-width: 1220px; height: 100%; background: url(bgdeco.png?t=1750152923469) repeat-y center top; mix-blend-mode: lighten; transition: 0.5s linear; pointer-events: none;}
@media screen and (max-width:767px){
  .bgtop { min-width: inherit;  background: url(m_bgtop.png?t=1750152923469) no-repeat center 44px; background-size: 100%;}
  .bgfixed { position: fixed; top: 30vw; min-width: 100%; height: 100%; background: url(m_bg_flex.jpg?t=1750152923469) repeat-y center top; background-size: 100%;}
}

/*區塊_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);}
.Area .go_bt2 {
  -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_bt2:hover { 
  filter: brightness(130%);
  -webkit-transform: translateY(-10px);
     -moz-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
       -o-transform: translateY(-10px);
          transform: translateY(-10px);
		  }
.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;}
  .Area .go_bt2:hover { 
    filter: brightness(1);
    -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 1% 2%; padding: 0; width: 48%; list-style: none;}
  .Area_3bn { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_3bn a { float: left; margin: 0 1% 2% ; padding: 0; width: 31.3%; 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_bottom { margin-bottom: 50px;}
@media screen and (max-width:767px){
  .Area_bottom { margin-bottom: 10vw;}
}

/*共用樣式*/
.pointer-off ul li{ pointer-events: none;}
.Area .title{ top: 5px; margin: 0 auto 20px;}
.Area .title ul li h5{ color: #fff;}
.titlebg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.Area .title02{ top: 5px; margin: 0 auto;}
.Area .title02 ul li h5{ color: #6f43b2;}
.titlebg02 { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); }
@media screen and (max-width:767px){
  .titlebg {top: 0; width: 100%; }
  .Area .title{ top: 0vw; margin: 0 auto 3vw;}
  .PD_box .PD_layout{ padding: 0 1.5vw;}
  .PD_box02 .PD_layout{ padding: 0 1.5vw;}
  .titlebg02 {top: 3vw; width: 100%; }
  .Area .title02{ top: 4vw; margin: 0 auto 3vw;}
}

/*版頭*/
.Area_top {height: 945px;}
.Area_top .main { position: absolute; width: 960px; top: 65px; left: 50%; transform: translateX(-50%);}
.Area_top .mainsubtitle { position: absolute; top: 298px; left: 50%; transform: translateX(-50%); width: 100%; z-index: 1;}
.Area_top .mainsubtitle img { width: 80%;}
.Area_top .mainsubtitle ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; grid-gap: 0; box-sizing: content-box; height: 166px;}
.Area_top .mainsubtitle ul.PD_wrapper li { position: relative; flex-shrink: 0; margin: 0; padding: 0; background-image: none;}
.star{ position: absolute; top: 310px; left: 195px;}
@media screen and (max-width:767px){
  .Area_top { height: 100vw;}
  .Area_top .main { width: 100vw; top: 7vw;}
  .Area_top .mainsubtitle { top: 31.5vw; width: 100%;}
  .Area_top .mainsubtitle img { width: 100vw;}
  .Area_top .mainsubtitle ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; grid-gap: 0; box-sizing: content-box; height: 166px;}
  .Area_top .mainsubtitle ul.PD_wrapper li { position: relative; flex-shrink: 0; margin: 0; padding: 0; background-image: none;}
  .star{ width: 18vw; top: 32vw; left: 6vw;}
}

/*版頭輪播PD*/
.Area_top .top_PD {position: absolute;top: 363px;left: 130px;width: 960px;margin: 0;overflow: hidden;}
.Area_top .top_PD ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; grid-gap: 0;}
.Area_top .top_PD img {width: 100%;}
.Area_top .top_PD ul.PD_wrapper li.PD_slide { min-width: inherit;}

.Area_top .top_PD ul.PD_wrapper li { position: relative; flex-shrink: 0; pointer-events: inherit; opacity: 0; transform: translate(5%,0);}
.Area_top .top_PD 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 .top_PD {top: 38vw; left: 0; width: 100%;}
 }

/*質感閱讀夥伴*/
.Area03 .PD_box02 .PD_layout li {border-top: none; border-right: none;}
@media screen and (max-width:767px){
  .Area03 {}
}

/*規格總覽介紹*/
.Area04 .btn_box ul li{ padding: 6px;}
@media screen and (max-width:767px){
  .Area04 {}
}
/* youtube */
.box_youtube .youtubeArea { position: relative; width: 100%; height: 0; padding-bottom: 56.25%;}
.box_youtube .youtubeArea * { margin: 0; padding: 0;}
.box_youtube .youtubeArea iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.box_youtube .youtubeArea .youtubeDiv { background-color: transparent!important;}
.box_youtube { width: 960px; margin: 20px auto;}
@media screen and (max-width:767px){
  .box_youtube { width: 94vw; margin: 0 auto;}
}

/*使用介面_BN輪播*/
.Area_bn .swiper-pagination-bullet {background: #fff;}
@media screen and (min-width:768px){
.Area_bn {width: 60%;margin: 25px auto 0;height: auto;padding: 5% 14% 0 4.7%;margin-bottom:40px;overflow: hidden;background: url("Area_bn_bg.png?t=1750152923469") center top/ 100% no-repeat scroll;}
.layout_bn.PD_layout ul{display: flex; padding: 0 0% 0;height: 805px;grid-gap: 0;}
}
@media screen and (max-width:767px){
.Area_bn {width: 65%;margin: 0 auto;height: auto;overflow: hidden;padding: 5.7% 17.6% 0% 7.21%;background: url("Area_bn_bg.png?t=1750152923469") center top/ 96% no-repeat scroll;}
.layout_bn.PD_layout ul{ display: flex;padding: 0;margin: 0 auto;height: 100vw;grid-gap: 0;}
}

/*使用介面_按鈕*/
@media screen and (min-width:768px){
.bn_btn {position:absolute;width: 28%;top: 155px;right: -25px;margin:0 auto;padding:0;margin-bottom:0;z-index: 10;}
.bn_btn ul {margin:0 auto;grid-gap: 0px;}
.bn_btn ul li {padding:6%;margin:0 auto;}
/* .PD_layout .PD_slide:hover {transform: translateY(-3px);box-shadow: none;} */
}
@media screen and (max-width:767px){
.bn_btn {position:absolute;width: 25%;top: 15.5vw;right: -0.5vw;margin:0 auto;padding:0;margin-bottom:0;z-index: 10;}
.bn_btn ul {margin:0 auto;padding:0;grid-gap:0vw!important;}
.bn_btn ul li {margin: 0 auto;padding:0%;}
}

.bg_color{ width: 80%; margin: 0 auto; background: #6b25b4; border-radius: 25px; padding: 0 0 10px 0;}
@media screen and (max-width:768px){
  .bg_color{ width: 100%; padding: 0 0 3vw ;}
}

/*登記活動*/
/* .Area08 .Area_danji .danji_box ul li .activityText .gifts{ color: #000;} */
/* .Area08 .Area_danji .danji_box ul li .activityText .Tip{ color: #000;} */
@media screen and (max-width:767px){
  .Area08 .Area_danji .box_1{ padding: 0 1.5vw; }
}

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

/*常見問題*/
.Area_QA {height:auto;margin-bottom: 50px;margin-top: 80px;}
.Area_QA .box {position:relative; width:80%; padding:3% 0 1.5%;z-index:5;background-color: #ded0f5;border-radius: 25px;}
.moreButton {width:100%; margin:0 auto; }
.moreButton .title {font:30px/1.2em '微軟正黑體'; letter-spacing: -0.05em; text-align:center; margin-bottom:10px; display:inline-block;}
dl.moreButton { margin-bottom:2%;}
.moreButton dt {cursor:pointer; }
.moreButton dd {display: none; margin:0 auto;width:84%; padding:1%; font:1.3em/1.5em '微軟正黑體', 'Century Gothic'; text-align:left; color:#333;background-color: #fff; border-radius: 8px;}
.moreButton dd a { display:inline-block;}
.moreButton .up::after{content: "";position: absolute;bottom:36%;margin-left: 2%;width: 0;height: 0;border-style: solid;border-width: .5em .3em 0 .3em;border-color: #ffffff transparent transparent transparent;transform:rotate(180deg);}
.moreButton .down::after {content: "";position: absolute;bottom:36%;margin-left: 2%;width: 0;height: 0;border-style: solid;border-width: .5em .3em 0 .3em;border-color: #b28dea transparent transparent transparent;}
.moreButton .menu_btn {margin: 0 auto 5px; position: relative;display: block; height:auto;width:85%;padding-left: 1.5%;font:bold 1.3em/2em 微軟正黑體; color:#fff; text-align: left;background-color:#653da3;border-radius: 8px;}
.moreButton .up img{ width:100%; height:auto }
.moreButton .down img{ width:100%; height:auto}
.moreButtontag { display:none!important;}

@media screen and (max-width:767px){
.Area_QA  {height: 100%;margin-bottom: 3vw;margin-top: 6vw;}
.Area_QA .box {position:relative;width:100%;top:0;left:0;margin:0;padding: 1% 0 4%;z-index:5;}
.moreButton {width:95%; margin:0 auto; }
.moreButton .menu_btn { margin:0 ;width:100%;font-size: 1em; line-height: 1.8em; text-indent: -2.5rem;  padding-left: 3rem; box-sizing: border-box;border-radius: 5px;}
.moreButton dd {margin: 1% auto;width: 94%;padding: 2% 2% 4% 4%;font:1em/1.5em '微軟正黑體', 'Century Gothic';border-radius: 5px;}

}

/*注意事項*/
.PD_note h3{color:#6e6e6e;margin-bottom: 0;font-weight:400;text-align: left;}
.PD_info_box ul {list-style: decimal;width: 98.5%;padding-left: 6vw;}	  
.PD_info_box ul li{background-color: inherit;text-align: left;}	  
.PD_note .title{ margin: 0 auto 30px;}
@media screen and (min-width:768px){
  .PD_info_box{position: relative;width:80%;margin: -1% 0 5% 7%;}	
  .PD_info_box ul li {color: #ded0f5;font-size: 1.5rem; letter-spacing:1px;line-height: 1.3em;margin-bottom: 1em}	 
  .PD_note h3{ font-size:2rem;padding: 0 8%;text-align: left;}
}

@media screen and (max-width:767px){
  .PD_note{width:96%; padding:0}	  
  .PD_info_box{position: relative;width:87%;margin: 1% auto 5%;}	  
  .PD_info_box ul li {color: #ded0f5;font-size: 0.85rem;letter-spacing: 0.3vw;line-height: 1.4em;margin-bottom: 1em}
  .PD_info_box ul li a span{line-height: 5vw}
  .PD_note .title{ margin: 0 auto 3vw;}
}


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

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