@charset "utf-8";
@import "./serial_list.css";
@import "./morebooks.css";
@import "./reviews.css";

/* 공통 페이징 */
.pg_wrap {
    margin-top:40px;
    width:100%;
}
.pg_wrap .pg {
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content: center;
    gap:5px;
}
.pg_wrap .pg .pg_page {
    width:40px;
    height:40px;
    border:1px solid #CACACA;
    border-radius:2px;
    background-color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    font-weight:400;
    letter-spacing:-0.8px;
    color:#8E8E8E;
}
.pg_wrap .pg .pg_current {
    width:40px;
    height:40px;
    border:1px solid #CACACA;
    border-radius:2px;
    background-color:#774C9E;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    letter-spacing:-0.8px;
    color:#fff;
    font-weight:600;
} 

/* 공통 - 버튼 */
.pagebtn {
    border-radius:2px;
    width:60px;
    text-align:center;
    font-size:0.88rem;
    font-weight:600;
    padding:6px 10px;
}
.purple_btn {
    border:1px solid #774C9E;
    background-color:#FAF5FF;
    color:#774C9E!important;
}
.gray_btn {
    border:1px solid #555;
    background-color:#8E8E8E;
    color:#fff!important;;
}
.white_btn {
    border:1px solid #CACACA;
    background-color:#fff;
    color:#555!important;;
} 


/* 공통 - 북이트로메인 bookintro_main */
#bookintro {}
#bookintro .bookintro_main {
    background-color:#F9F9F9;
    padding:50px 0;
}
#bookintro .bookintro_main .bookintro_bookinfo {
    display:flex;
    align-items:center;
    gap:30px;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_thumbnail_wrap {
    width:500px;
    min-height:340px;
    border-radius:20px;
    position: relative;
    overflow:hidden;
    border:1px solid #CACACA;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_thumbnail_wrap .book_thumbnail_bg {
    width:150%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    filter: blur(20px);
    z-index:1;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_thumbnail_wrap .book_thumbnail_effect {
    content:'';
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.5);
    position:absolute;
    left:0;
    top:0;
    z-index:2;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_thumbnail_wrap .book_thumbail_img {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:3;
    max-width:208px;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.25);
} 
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info {
    flex:1;
    border:1px solid #CACACA;
    background-color:#fff;
    border-radius:20px;
    padding:30px 50px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .book_cate {
    display:flex;
    align-items:center;
    gap:20px;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .book_cate p {
    font-size:0.88rem;
    font-weight:400;
    color:#774C9E;
    position: relative;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .book_cate p::before {
    content:'';
    width:2px;
    height:2px;
    border-radius:99px;
    background-color:#774C9E;
    position:absolute;
    left:-12px;
    top:50%;
    transform:translateY(-50%);
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .book_cate p:first-child::before {
    display:none;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .book_name {
    font-size:1.44rem;
    font-weight:600;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .book_writer {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 0;
} 
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .book_writer p {
    font-size:1.11rem;
    font-weight:500;
    color:#555;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .book_writer p.book_writer_name {
    font-weight:700;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .book_writer .book_write_icon {
    width:22px;
    height:22px;
    border-radius:999px;
    background-color:#FAF5FF;
    display:flex;
    align-items:center;
    justify-content:center;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .bookintro_option {
    display:flex;   
    align-items:center;
    gap:5px;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .bookintro_option .option_btn {
    border:1px solid #CACACA;
    border-radius:999px;
    padding:5px 15px;
    display:flex;
    align-items:center;
    gap:5px;
    font-size:0.88rem;
    font-weight:700;
    color:#555;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .bookintro_option .bookmark_btn_on,
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .bookintro_option .morebooks_btn:hover,
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .bookintro_option .share_btn:hover {
    background-color:#FAF5FF;
    border-color:#774C9E;
    color:#774C9E;
} 
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .bookintro_meta {
    display:flex;
    align-items:center;
    gap:10px;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .bookintro_meta p {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:0.88rem;
    font-weight:700;
    color:#555;
    padding:5px;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .bookintro_tags {
    display:flex;
    flex-wrap: wrap;
    gap:10px;
}
#bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .bookintro_tags .tag {
    background-color:#FAF5FF;
    border-radius:999px;
    padding:3px 10px;
    font-size:1rem;
    font-weight:400;
    color:#774C9E;
}
#bookintro .bookintro_container {
    display:flex;
    align-items:flex-start;
    gap:50px;
    margin-top:50px;
}
#bookintro .bookintro_container .bookintro_cont {
    flex:1;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_tabs {
    border:1px solid #CACACA;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_tabs .bookintro_tab {
    display:flex;
    align-items:stretch;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_tabs .bookintro_tab li {
    flex:1;
    height:70px;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_tabs .bookintro_tab li a {
    font-size:1.11rem;
    font-weight:600;
    color:#555;
    background-color:#F8F8F8;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_tabs .bookintro_tab li.active a {
    background-color:#fff;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_tabs .bookintro_tab_cont {
    padding:30px;
    height:140px;
    overflow-y:scroll;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_tabs .bookintro_tab_cont p {
    font-size:1rem;
    font-weight:400;
    line-height:187%;
    color:#555;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_board {
    margin-top:50px;
    display:flex;
    flex-direction:column;
    gap:50px;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_board .bookintro_board_tabs {
    display:flex;
    align-items: stretch;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_board .bookintro_board_tabs li {
    flex:1;
    height:70px;
    border-bottom:3px solid #CACACA;
    position: relative;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_board .bookintro_board_tabs li::before {
    content:'';
    width:0;
    height:3px;
    background-color: #774C9E;
    position:absolute;
    left:50%;
    bottom:-3px;
    transform:translateX(-50%);
    transition:width .3s;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_board .bookintro_board_tabs li a {
    font-size:1.11rem;
    font-weight:600;
    color:#555;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_board .bookintro_board_tabs li.active::before {
    width:100%;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_board .bookintro_board_tabs li.active a {
    color:#774C9E;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_board .bookintro_board_cont .bookintro_board_box {
    display:none;
}
#bookintro .bookintro_container .bookintro_cont .bookintro_board .bookintro_board_cont .bookintro_board_box:first-child {
    display: block; 
}

/* 반응형 미디어쿼리 css */
@media (max-width:1440px) {}
@media (max-width:1200px) {
    #bookintro .bookintro_main .bookintro_bookinfo .bookintro_thumbnail_wrap {
        width:350px;
    }
}
@media (max-width:1024px) {}
@media (max-width:991px) {
    #bookintro .bookintro_main {
        background-color:#fff;
        padding-top:0;
        padding-bottom:0;
    }
    #bookintro .bookintro_main .bookintro_bookinfo {
        flex-direction:column;
        gap:0;
    }
    #bookintro .bookintro_main .bookintro_bookinfo .bookintro_thumbnail_wrap {
        width:100%;
        min-height: 450px;
        border-radius:0 0 20px 20px;
        border:none;
    }
    #bookintro .bookintro_main .bookintro_bookinfo .bookintro_thumbnail_wrap .book_thumbail_img {
        top:40%;
    }
    #bookintro .bookintro_main .bookintro_bookinfo .bookintro_info {
        margin:0 15px;
        margin-top: -80px;
        z-index: 4;
        border:none;
        padding:20px;
    }
}
@media (max-width:768px) {
    .only_pc {
        display:none!important;
    }
}
@media (max-width:640px) {
    #bookintro .bookintro_main .bookintro_bookinfo .bookintro_info {
        padding:15px;
    }
    #bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .bookintro_option .option_btn {
        padding:5px;
        font-size: 0.80rem;
    }
    #bookintro .bookintro_main .bookintro_bookinfo .bookintro_info .bookintro_option .option_btn svg {
        width:18px;
        height:auto;
    }
}