@charset "utf-8";
html{ font-size: 62.5%;} 
body{ font: 62.5% 微軟正黑體,新細明體,"Century Gothic",Arial,sans-serif; line-height: 1; background-color: #00d2ff;}
a{ text-decoration: none;}
a:hover{ opacity: 1;}
.headerNav{ z-index: 5 !important;}
.FOOTER_BG{ padding-bottom: 100px !important;}

.pcNo{ display: block;}
.mNo{ display: none;}

.scrollHide{ overflow: hidden;}

.txtBlue{ color: #244ee0;}
.txtPurple{ color: #3e19b6;}
.txtDeepRed{ color: #7a1d1d;}
.txtYellow{ color: #ffee31;}
.alink{ color: #ffee31; text-decoration: underline;}
.alink:hover{ text-decoration: none;}
.txtLeft{ text-align: left !important;}
.txtXL{ font-size: 1.8rem;}

/*bg-----------------------------------------*/
.bg1{transform-origin:left; transform:skewY(5deg); background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230804_kodansha/images/bg1.jpg); background-position: top center; background-size: cover; background-repeat: no-repeat;}
.bg1Cirle{ transform:skewY(-5deg); background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230804_kodansha/images/bg1_circle.png); background-position: top center; background-size: 100%; background-repeat: no-repeat;}
.bg1Ice{ padding-bottom: 30px; background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230804_kodansha/images/bg1_ice.png); background-position: top center; background-size: 100%; background-repeat: no-repeat;}

.bg2{ background-color: #fffde7; background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230804_kodansha/images/bg2_top.jpg); background-position: top center; background-size: cover; background-repeat: no-repeat;}
.bg2Bottom{ background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230804_kodansha/images/bg2_bottom.jpg); background-position: top bottom; background-size: cover; background-repeat: no-repeat;}
.bg2Cirle{ background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230804_kodansha/images/bg2_circle.png); background-position: top center; background-size: 100%; background-repeat: no-repeat;}
.bg2Ice{ padding-bottom: 30px; background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230804_kodansha/images/bg2_ice.png); background-position: top center; background-size: 115%; background-repeat: no-repeat;}


/*--header-----------------------------------------*/
.headerBox{ overflow: hidden; position: relative; margin-top: 55px; background-image: url(https://cp-img.bookwalker.com.tw/event/2023/20230804_kodansha/images/header_bg.jpg); background-position: top center; background-repeat: no-repeat; background-size: cover;}
.headerBox img{ display: block; width: 100%;}
.headerH{ width: 100%;}

.headerPicFull{ position: absolute; top: 0; left: 0; width: 100%;}
.headerPic{ position: absolute;}

/*--contain-----------------------------------------*/
.contain{ overflow: hidden;}
.areaWidth,.areaWidth2{ position: relative; width: 90%; margin: 0 auto;}
.headerW{ position: relative; width: 100%; margin: 0 auto;}

.mainTitle{ width: 70%; padding-top: 25px; position: relative;}
.mainTitle2{ width: 70%; padding-top: 40px; position: relative;}
.mainTitle img,.mainTitle2 img{ width: 100%;}
.titleMore{ position: absolute; top: 40px; left: 0;}

.mainTitle2 { animation: titleMore 2s infinite;}
@keyframes titleMore { 
    0%{ transform: scale(1)}
    50% { transform: scale(0.95) translateX(5px);} 
    100%{ transform: scale(1);}
}

/*--KOL推薦書-----------------------------------------*/
.recomBox{ /*overflow: hidden;*/clear: both; margin-top: 30px;}
.recomCouponBox{ display: flex; justify-content: space-between; align-items: end; flex-direction: row-reverse; width: 100%;}
.recom2 .recomCouponBox{ flex-direction: inherit;}
.recomCouponBox > li{ width: 49%;}

.recomBookList{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.recomBookList > li{ width: 49%; padding-top: 15px;}
.recomBookList img{ display: block; width: 100%;}

.decoIce{ display: block; width: 100%; margin-top: 15px;}

/*--人氣推薦-----------------------------------------*/
.hotBox{ margin-top: 30px; margin-bottom: 30px;}
.hotBookList{ display: flex; justify-content: space-between; margin-top: 10px;}
.hotBookList > li{ width: 49%;}

/* popup --------------------------------------------------- */
.popOverlay{ position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(47, 35, 49, 0.99); transition:opacity 500ms; z-index:10000; font-size:1.4rem;}
.popBox{ width:93%; max-height:90vh; padding:40px 14px 14px; margin:15px auto 0 auto; background:#d4cfbc; border-radius:5px; position:relative; transition:all 1s ease-in-out; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.popBox .popClose{ display:block; position:absolute; top:9px; right:10px; width:25px; height:25px; background:url(https://cp-img.bookwalker.com.tw/event/2023/20230804_kodansha/images/icon-close.png) no-repeat; background-size:25px 25px; cursor:pointer;}
.popBox h2{ padding:8px 1%; margin-bottom:5px; font-size:1.6rem; background-color:#ad3c41; color:#ffffff; background-color:#efefef; color:#636363; font-weight:normal; text-align:center;}
.popBox ul{ list-style:none;}

/* popup按鈕樣式 */
.ppBtn{ display:block; font-size:1.5rem; cursor:pointer; border-radius:2px; line-height:45px; text-align: center;}
.popBtn{ display:flex;}
.popBtn a{ flex:1; width:100%; border:#8d1a91 2px solid; background-color: #d4cfbc; margin-right:4%; font-size:1.8rem; color: #8d1a91; font-weight: bold; font-family:Arial, Verdana, Microsoft JhengHei, sans-serif; outline:none;}
.popBtn a:last-child{ margin-right:0;}
.popBtn a:hover{ background-color: #8d1a91; color: #fff;}

/* popup共用提醒 */
.popAlert{ text-align:center; margin-bottom: 40px; padding:15px 2% 25px 2%; color: #8d1a91; font-size:1.8rem; font-weight:bold;}
.ppaRed{ color:#b8292f;}
.popContent{ overflow-y:auto; max-height:70vh; -webkit-overflow-scrolling:touch;}


/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    .FOOTER_BG{ padding-bottom: 20px !important;}
    .pcNo{ display: none;}
    .mNo{ display: block;}

    /*bg-----------------------------------------*/
    .bg1Cirle{  background-attachment: fixed;}
    .bg1Ice{ padding-top: 100px; padding-bottom: 100px;}

    .bg2Cirle{  background-attachment: fixed;}
    .bg2Ice{ padding-top: 100px; padding-bottom: 100px; background-size: 100%;}

    /*--contain-----------------------------------------*/
    .areaWidth{ max-width: 1023px; padding-top: 0;}
    .areaWidth2{ max-width: 1233px; padding-top: 0;}
    .mainTitle{ width: 40%; padding-top: 0;}
    .mainTitle2{ width: 50%; padding-top: 50px;}
    .titleMore{ top: 50px;}

    /*--KOL推薦書-----------------------------------------*/
    .recomBox{ /*overflow: hidden;*/ padding-top: 40px;}
    .recomCouponBox{ float: right; width: 21%; display: block;}
    .recom2 .recomCouponBox{ float: left;}
    .recomCouponBox > li{ width: 100%;}
    .recomBookList{  float: left; width: 76%;  padding-bottom: 10px;}
    .recomBookList > li{ width: 32%; padding-top: 0;} 
    .recom2 .recomBookList{ float: right;}
    /* .recom2 .recomBookList > li{ width: 32%;} */

    .decoIce{ width: 60%; margin-top: 0; padding-top: 40px;}
    .decoIce.r{ float: right;}
    .decoIce.c{ margin: 0 auto;}

    /*--人氣推薦-----------------------------------------*/
    .hotBox{ display: flex; justify-content: space-between; margin-top: 95px; margin-bottom: 40px;}
    .hotBox > div{ width: 49%;}
    .hotBox h3{ margin-bottom: 15px;}
    .hotBookList{  margin-top: 0;}

    /* popup --------------------------------------------------- */
	.popBox{ width:33%; margin:50px auto; padding:40px 20px 20px;}

	/*popup按鈕樣式*/
	.popBtn button{ margin-right:2%;}
	.popContent{ max-height:55vh;}

    
    /*--hover animate--------------------------------*/
    .recomBookList a, .recomCouponBox a, .hotBookList a{ display: block; transition: 0.4s;}
    .recomBookList a:hover{ transform: scale(0.9) }

    .recomCouponBox a:hover{ transform: rotate(4deg);}
    .hotBookList a:hover{ transform: translateY(15px);}

}

@media screen and (min-width:1024px) and (max-width:1200px) {
}

/*--768-1023(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1023px) { 
    /*bg-----------------------------------------*/
    .bg1Cirle,.bg2Cirle{ background-attachment: inherit;}

    .areaWidth{ width: 94%;}
    .headerW{ width: 94%;}

}
@media screen and (max-width:1200px) {
}

@media screen and (max-width:320px) {}

/*--animate.css--------------------------------*/
.animate__animated.animate__delay-02s{-webkit-animation-delay:0.2s;animation-delay:0.2s;}
.animate__animated.animate__delay-03s{-webkit-animation-delay:0.3s;animation-delay:0.3s;}
.animate__animated.animate__delay-04s{-webkit-animation-delay:0.4s;animation-delay:0.4s;}
.animate__animated.animate__delay-05s{-webkit-animation-delay:0.5s;animation-delay:0.5s;}
.animate__animated.animate__delay-06s{-webkit-animation-delay:0.6s;animation-delay:0.6s;}
.animate__animated.animate__delay-07s{-webkit-animation-delay:0.7s;animation-delay:0.7s;}
.animate__animated.animate__delay-08s{-webkit-animation-delay:0.8s;animation-delay:0.8s;}
.animate__animated.animate__delay-10s{-webkit-animation-delay:1.0s;animation-delay:1.0s;}
.animate__animated.animate__delay-12s{-webkit-animation-delay:1.2s;animation-delay:1.2s;}
.animate__animated.animate__delay-13s{-webkit-animation-delay:1.3s;animation-delay:1.3s;}
.animate__animated.animate__delay-14s{-webkit-animation-delay:1.4s;animation-delay:1.4s;}