@charset "utf-8";
/*基本*/
body {margin: 0; padding:0;background-color: #c3e8e9;}

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


/*全BOX版面*/
.WRAPPER { position: relative;margin: 0 auto; padding: 0;	width:100%; min-width:1220px; overflow: hidden;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { border:0; vertical-align:top;}
.WRAPPER a { text-decoration:none;  display:inline-block;}
.WRAPPER .Area_top{position: relative; }
.WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:1220px;}
	@media screen and (max-width:767px){
		.WRAPPER { padding-bottom:0px; margin:0 auto; display: block; min-width:100%;/*background: url("mb_bgrepeat.jpg?t=1752567395939") center top/ 100% repeat-y scroll;z-index: 0;*/}
		.WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:100%;  }

	}


/*滑過上飄*/	
.WRAPPER .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;}
.WRAPPER .go_bt:hover { 
  -webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);}


/*PC背景*/
@media screen and (min-width:767px){
  .bg_deco00 { z-index:-21; position:absolute; top:0; left:0; width:100%; min-width:1220px; height:100%; background-repeat:repeat-y; background-position:center top;  }
	.bgtop01 { z-index:-20; position:fixed; top:0; left:0; width:100%; min-width:1220px; height:715px; background-repeat:no-repeat; background-position:center top;pointer-events:none; }
	.bgtop02 { z-index:20; position:fixed; top:230px; left:0; width:100%; min-width:1220px; height:100%; background-repeat:no-repeat; background-position:center top;pointer-events:none; }
	.bg_airp { z-index:-10; position:absolute; top:0; left:0; width:100%; min-width:1220px; height:100%; background-repeat:no-repeat; background-position:center top; pointer-events:none;}
	
}

/*mb背景*/
@media screen and ( max-width:767px) {
	.m_bg01 { z-index:-5; position:fixed; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center bottom; background-size:100%; }	
}


/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; text-align:center;  }
.Area .box_bg{position:absolute;top:0;left: 0;z-index: 0;} 
.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 img{ width:100%;}
	.Area { position: relative;}

	}


/*版頭區塊*/
@media screen and (min-width:768px){
	.Area_title {height:680px;}
	.Area_title .cloud01 {position: fixed; top:220px;left: 70px; width: 327px; z-index: -1;}
	.Area_title .cloud02 {position: fixed; top:170px;right:110px;width: 294px;z-index:-5;}
	.Area_title .Earth {position: fixed; top:170px;left:185px;width: 1650px;z-index:-15;}
}
@media screen and (max-width:767px){
	.Area_title {height: 122vw;z-index:0;background: url("mb_01.jpg?t=1752567395939") center top/ 100% no-repeat scroll;}
	.Area_title .cloud01 { position: absolute; top:39vw; left: -10vw; width: 30%; z-index: 1;}	
	.Area_title .cloud02 { position: absolute; top:7vw;  left: 80vw;  width: 30%; z-index: 1;}	
	.Area_title .Earth {position: absolute; top:25vw;left:3vw;width: 95%;z-index:-5;}
	.Area_title .mb_01 {position: absolute; top:31vw;left:0;width: 100%;z-index:0;}
	.Area_title .airp {position: absolute; top:0;left:0;width: 100%;z-index:0;}
}


/*主標微調(線上入稿)*/
.Area_title .toptitle { position: absolute; top:160px; left:0; width:53%; z-index: 5;}
.Area_title .toptitle ul li:nth-child(1) {position: absolute; width: 100%;top: 0px; left:27px;}
.Area_title .PD_layout .PD img { width: 100%;}
.Area_title .toptitle .js-PD_url {pointer-events: none;}
.Area_title .PD_layout .PD_slide:hover {transform: translateY(0px);box-shadow: none;}
@media screen and (max-width:767px){
.Area_title .toptitle { position: absolute; top:12vw;left:13vw; width:75%;height: auto; z-index: 5;}	
.Area_title .toptitle .PD_layout[data-pd-li*="BN-AWD"] .PD_logo {display: block !important;}
.Area_title .toptitle ul li:nth-child(1) {width: 100%;top: 0; left: 0;}
 }


/*版頭副標輪播*/
#eWriterBtn_bt_B_000_02 { position: absolute; top:65px!important;}
.subtitle ul { grid-gap: 0px !important; }
@media screen and (min-width:768px){
.subtitle .PD_layout { width: 38%; position: absolute; top:427px; left:114.5px; height:110px; overflow: hidden; z-index: 10;}
.subtitle .PD_layout img { width: 100%;}
.subtitle ul.PD_wrapper { display: flex; flex-wrap: nowrap; }
}
@media screen and (max-width:767px){
.subtitle .PD_layout { width: 58%; position: absolute; top: 42.5vw; left: 21vw; height:110px; overflow: hidden; z-index: 10;}
.subtitle .PD_layout img { width: 100%;}
.subtitle ul.PD_wrapper { display: flex; flex-wrap: nowrap; }
}


/*版頭品-2品公版輪播-背景*/
@media screen and (min-width:768px){
.Area_title .topday_bg{ position:absolute;  top:20px; left:730px;z-index:1 ;}
}
@media screen and (max-width: 767px){
.Area_title .topday_bg{ display: none; /*position:absolute;  top:72vw; left:0; width:100%; z-index:0;*/}
}


/*2品公版*/
@media screen and (min-width:768px){
.Area_toppd { position: absolute; top: 135px; left: 345px; z-index: 5; }
.Area_toppd .box{ position: relative; overflow: hidden; width: 26%; margin: 0 auto; }
.Area_toppd .box ul.PD_wrapper { position: relative; display: flex; flex-wrap: nowrap; margin: 0; width: 100%; box-sizing: content-box; }
.Area_toppd .box ul.PD_wrapper li{ flex-shrink: 0; margin: 0; padding: 0;}
.Area_toppd .box ul.PD_wrapper li:hover{ box-shadow: none; filter: none;}
}
@media screen and (max-width:767px){
.Area_toppd { position: absolute; top: 60vw; z-index: 5; }
.Area_toppd .PD_layout .PD_into { margin: auto 0;}
.Area_toppd .box{ position: relative; overflow: hidden; width: 94%; margin: 0 auto; }
.Area_toppd .box ul.PD_wrapper { position: relative; display: flex; flex-wrap: nowrap; margin: 0; width: 100%; box-sizing: content-box; }
.Area_toppd .box ul.PD_wrapper li{ flex-shrink: 0; margin: 0; padding: 0;}
.Area_toppd .box ul.PD_wrapper li:hover{ box-shadow: none; filter: none;}
}

/*公版調整*/
  @media screen and (min-width: 768px) {
    .Area_toppd .box {  }
    .Area_toppd .box ul.PD_wrapper { padding: 0 0 35px;}
    .Area_toppd .box ul.PD_wrapper li{ width: 304px; margin: 0; padding: 0;}
  }
  @media screen and (max-width: 767px) {
    .Area_toppd .box { width: 96%;}
    .Area_toppd .box ul.PD_wrapper { padding: 0 0 14vw;}
    .Area_toppd .box ul.PD_wrapper li{  width: 48vw; margin: 0; padding: 0;}
	.Area_toppd .PD_layout[data-pd-col-phone="3"] .PD .Price{ font-size:24px; }
	.Area_toppd .PD_layout[data-pd-col-phone="3"] .PD p b, .Area_01 .PD_layout[data-pd-col-phone="3"] .PD p del, .Area_01 .PD_layout[data-pd-col-phone="3"] .PD p .money{ font-size:14px; }	  
  }

/*折價劵(線上入搞)*/
@media screen and (min-width:768px){
.Area_coupon { margin-bottom: 50px;}
}
@media screen and (max-width:767px){
.Area_coupon { width: 96%; padding-bottom:4vw;}

}


/*每區標題*/
@media screen and (min-width:768px){
.Area_notice .box01 .title8p { width: 60%;}
.Area_8PD .title8p { width: 45%; }
.Area_activity .title8p { width: 60%; margin-bottom: 15px;}
}
@media screen and (max-width:767px){
.Area_notice .box01 .title8p { width: 70%;}
.Area_8PD .title8p { width: 70%;}
.Area_activity .title8p { width: 90%; margin-bottom: 2vw;}
}


/*每區下方間隔*/
@media screen and (min-width:767px){
.bottom { margin-bottom: 30px !important}
}
@media screen and (max-width:767px){
.bottom { margin-bottom: 5vw !important}
}


/*超值樂讀包-8品公版們*/
.Area_notice { background-color: #f54900; border-radius: 2em; }
@media screen and (min-width:768px){
.Area_notice .notice_txt { padding: 0px 0px 30px;}
.Area_notice .PD18 { width: 94%; padding: 15px 0px 30px;}
}
@media screen and (max-width:767px){
.Area_notice .notice_txt { padding: 0px 0px 5vw;}
.Area_notice .PD18 { width: 100%; padding: 2vw 0vw 5vw;}
}


/*8公板-無底色*/
@media screen and (min-width:768px){
.Area_8PD .PD28 { padding: 15px 0px 30px;}
}
@media screen and (max-width:767px){
.Area_8PD .PD28 { padding: 2vw 0vw 5vw;}
}




/*電子書-步驟說明*/
@media screen and (min-width:768px){
.Area_activity { position: relative; height: 820px; top: 0; margin-bottom:0px;}
.Area_activity .booktitle { width: 45%; position: absolute;top: 196px; left: 340px;z-index: 2;}
.Area_activity .layout_activity01 { position: absolute; top: 342px; left: 56px; width:28%; margin:0 auto;}
.Area_activity .layout_activity02 { position: absolute; top: 342px; left: 432px; width:28%; margin:0 auto;}
.Area_activity .layout_activity03 { position: absolute; top: 342px; left: 812px; width:28%; margin:0 auto;}
.Area_activity .book01 { position: absolute;top:785px;z-index: 2}
.Area_activity .people img { position: absolute; top:53vw; left: 76vw; width: 12.5%; z-index: 3}
}
@media screen and (max-width:767px){
.Area_activity { height: auto;}
.Area_activity .layout_activity { height: 248vw; background: url("mb_14.png?t=1752567395939") center top/ 100% repeat-y scroll;}
.Area_activity .booktitle { width: 75%; position: absolute; top: 24vw; left: 12vw; z-index: 2;}
.Area_activity .layout_activity01 .PD_layout { width:85%; position: absolute; top: 48vw; left: 7vw;}
.Area_activity .layout_activity02 .PD_layout { width:85%; position: absolute; top: 160vw; left: 7vw;}
.Area_activity .layout_activity03 .PD_layout { width:85%; position: absolute; top: 284vw; left: 7vw;}
.Area_activity .book01 {position: absolute;top:390vw;left: 1vw;width: 20%; z-index: 11;}
.Area_activity .actline {position: absolute;top:154.5vw;left: 11.5vw;width: 77%; z-index: 10;}
.Area_activity .actline2 {position: absolute;top:277vw;left: 11.5vw;width: 77%; z-index: 10;}
.Area_activity .people {position: absolute;top:373vw;left: 63vw;width: 35%; z-index: 11}
.Area_activity .bottompic { width: 100%; position: relative; z-index: -1;}
}


/*置底*/
.fixbn a {padding-bottom:constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
					padding-bottom:env(safe-area-inset-bottom);}   /* 兼容 iOS >= 11.2 */ 
.fixbn{position:fixed; background-size:100%;bottom:0; display:block; z-index:30;}
.fixbn ul{ margin-top: 0px;margin-bottom: 0px; padding-left: 0px;}
.fixbn ul li{float:left;padding:0;list-style-type:none;width:50vw;}
.fixbn ul li img{width:100%;margin:0 auto;}

/*1顆按鈕*/
.fixbn .class_00 {position:absolute;width:100%; height: 100%; }
.fixbn .class_00 a {display:block;width:100%;height:100%;}
.fixbn .class_01 { top:0%;left:0%;}




/*Appletxt*/
.apple_txt{ position: relative;margin:100px auto 150px; color:#000;font-size: 13px; text-align: center;}
@media screen and (max-width:767px){
.apple_txt{position: relative;margin:0 0 0 0;padding: 3% 4% 3% 4%; color:#000; /*background-color: #24847b;*/}
}


/*移除公版設定*/
.Area .remove_box_style ul { background-color: transparent; grid-gap: 10px;}
.Area .remove_box_style ul li { border: none!important;}
@media screen and (max-width:767px){
  .Area .remove_box_style ul { width: 100%; grid-gap: 0.2em;}
  .Area .remove_box_style ul {}
}


/*3品公版間距*/
.Area .PD_layout-add2cart ul { padding: 20px;}
@media screen and (max-width:767px){
  .Area .PD_layout-add2cart ul { padding: 0.2em 0;}
  .Area .PD_layout-add2cart ul li { padding: 0.2em;}
}


/*輪播移除公版設定*/
.Area .swiper_remove_box_style ul { background-color: transparent; grid-gap: 0;}
.Area .swiper_remove_box_style ul li { border: none!important; background-color: #fff;}
.Area .swiper_remove_box_style ul li,
.Area .swiper_remove_box_style ul li .PD_img img { border-radius: 10px;}
@media screen and (max-width:767px){
  .Area .swiper_remove_box_style ul { width: 100%; grid-gap: 0.2em;}
  .Area .swiper_remove_box_style ul {}
}


/**延遲載圖用**/
.mainArea .articleList * img.lazy {display:none;}