@import url('https://webfontworld.github.io/kopus/KoPubWorldBatang.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');

:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

/*@font-face {
    font-family: 'batang';
    src: url('/app/fonts/KoPubWorld_Batang_Bold.ttf') format('truetype');
    font-weight: 900;
}
@font-face {
    font-family: 'batang';
    src: url('/app/fonts/KoPubWorld_Batang_Medium.ttf') format('truetype');
    font-weight: 700;
}
@font-face {
    font-family: 'batang';
    src: url('/app/fonts/KoPubWorld_Batang_Light.ttf') format('truetype');
    font-weight: 500;
}*/

button {
    color: inherit;
}
/* ebook_01 */

.ebook_container{ 
/*    padding-top: 8vw;
    padding-bottom: 8vw;*/
    position: relative;
  /*  height: calc(100vh - 70px - 55px);*/
    min-height: calc(100vh - 125px);
    overflow: hidden;
}
.ebook_container.ajax-list {
    /*overflow: auto;*/
}
.ebook_container .ebook_itembox{
    display: flex;
    flex-wrap: wrap;
    padding: 4vw;
    gap: 4vw;
    row-gap: 9vw;
    touch-action: pan-y;
    overflow: hidden;
}
.ebook_container .ebook_itembox .ebook_item{
    display: flex;
    flex-direction: column;
    /*width: 50%;*/
    width: 44vw;
    height: 60vw;
}
.ebook_container .ebook_itembox .ebook_item .ebook_image_layer_box{
    width: 100%;
    height: 82%;
    position: relative;
}
.ebook_container .ebook_itembox .ebook_item .ebook_image_layer_box .ebook_image_layer{
    position: absolute;
    /* top: -6vw; */
    padding-left: 6%;
    /* height: calc(100% - 5%);
    width: calc(100% - 13%); */
    /* border-radius: 5px;
    overflow: hidden; */
    /* border: 1px solid #d9d9d9; */
    /* border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; */
}
.ebook_container .ebook_itembox .ebook_item .ebook_image_layer_box .ebook_image_layer img{
    width: 94%;
}

/* .ebook_container .ebook_itembox .ebook_item .ebook_image_layer_box .ebook_image_layer_01{z-index: 4;}
.ebook_container .ebook_itembox .ebook_item .ebook_image_layer_box .ebook_image_layer_02{background-color:white;z-index: 3;left: 6.8%;top:.4%}
.ebook_container .ebook_itembox .ebook_item .ebook_image_layer_box .ebook_image_layer_03{background-color:white;z-index: 2;left: 7.6%;top:.8%}
.ebook_container .ebook_itembox .ebook_item .ebook_image_layer_box .ebook_image_layer_04{background-color:white;z-index: 1;left: 8.4%;top:1.2%} */

.ebook_container .ebook_itembox .ebook_item .ebook_image_layer_box .ebook_ped{
    width: 100%;
    height: 5%;
    position: absolute;
    bottom: 0;
    z-index: 5;
    left: 0;
    background-color: #ab8b76;
    border-radius: 5vw;
    box-shadow: 0 -3px 10px rgba(0,0,0,.3)
}

.ebook_container .ebook_itembox .ebook_item .ebook_title{ display: flex; justify-content: center;padding-top: 2.4vw;font-size: 5vw;}

#sentinel { height: 30vh; }

/* ebook_01  END */



/* ebook_02 */

.view-container .ebook_container {
    height: calc((var(--vh, 1vh) * 100) - 70px - 55px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
    /*height: calc(100vh - 70px - 55px - env(safe-area-inset-bottom) - env(safe-area-inset-top));*/
}
.top_controll_box{
    position: fixed;
    width: 100%;
    display: none;
    padding: 30px 15px 15px;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    z-index: 1;
}
.ebook_container.use_audio .top_controll_box { display: flex; }
.ebook_container .top_controll_box .sound_box{ display: flex; align-items: center; width: 100%; }
.ebook_container .top_controll_box .sound_box audio{ width: 100%; height: 35px; }
/*.ebook_container.use_audio .top_controll_box .sound_box audio{ display: block; }*/
.config_box .ebook_content_config{ width:60px; height: 30px;background-color: #ab8a75;color: white;font-weight: bold;border-radius: 5px;font-size: 16px;}
/*.ebook_container .ebook_content{ padding: 18px 40px 0; font-size: 17px; color: #111; overflow: hidden; position: relative;}*/
.ebook_container { overflow: auto;}
.ebook_container.use_slide { overflow: hidden !important; --webkit-overflow-scrolling: touch; }
.ebook_container .ebook_content{
    height: auto;
    position: relative;
/*    top: 75px;*/
    right: 0;
    width: 100vw;
    padding: 18px 40px 58px;
    margin: 0;
    transition-property: right;
    transition: 0.3s ease;
}
.ebook_container.use_slide .ebook_content{
    /*height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;*/
    height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    scroll-snap-type: x mandatory;
    touch-action: pan-y;
    max-width: inherit;
    column-fill: auto;
    -moz-column-fill: auto;
    -webkit-column-fill: auto;
    column-width: 100vw;
    -moz-column-width: 100vw;
    -webkit-column-width: 100vw;
    column-gap: 80px;
    -moz-column-gap: 80px;
    -webkit-column-gap: 80px;
    /*    overflow: hidden;*/
    /*height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;*/
}
.ebook_container.use_audio .ebook_content {
    top: 75px;
}
.ebook_container.use_slide.use_audio .ebook_content{
    /*    overflow: hidden;*/
    /*height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 75px) !important;*/
    height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 75px) !important;
}
.ebook_container .ebook_content .ebook_wrap {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
    transition: all 0.3s ease 0s;
}
.ebook_container .ebook_content .ebook_wrap section.page {
    position: relative;
    scroll-snap-align: center;
    padding: 20px 40px;
    font-size: 19px;
}

/*.ebook_container .ebook_content * {
    font-size: inherit !important;
    font-family: inherit !important;
}*/

.ebook_container .ebook_swiper_btn_box{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 94%;
    height: 0;
    transform: translate(-50%, -50%);
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}
.ebook_container.use_slide .ebook_swiper_btn_box{
    display: flex;
}
.ebook_container .ebook_swiper_btn_box .ebook_swiper_btn_next{
    transform: rotate(180deg);
}
.ebook_swiper_btn{
    background-color: transparent;
    width: 50%;
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    text-align: left;
}
.ebook_swiper_btn img{
    width: 12.5px;
    height: 23px;
}
.ebookimg {
    width: 100%;
    max-width: 100%;
    position: absolute;
}

.ebookimg img {
    border: none;
    height: auto;
    width: 100%;
    max-width: 100%;
    opacity: 0;
    margin-top: -50px;
}

/* ebook_02 END */


/* ebook_config_layer */

.ebook_config_layer{
    display: flex;
    height: 100vh;
    width: 100vw;
    position: fixed;
    background-color: white;
    top: 100vh;
    left: 0;
    z-index: 100;
    transition: .25s;
}
.config_header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55px;
    background-color: white;
    border-bottom: 1px solid #e4e4e4;
}
.config_close{
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    align-items: center;
    justify-content: center;
    width: 60px;
}
.config_h1{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    height: 100%;
}
.config_body{
    padding-top: 55px;
    width: 100%;
    background-color: #f4f4f4;
}
.config_block{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.config_main_title{
    width: 100%;
    height: 40px;
    background-color: #f4f4f4;
    display: flex;
    align-items: center;
    padding-left: 15px;
    font-size: 15px;
    border-bottom: 1px solid #e4e4e4;
}
.config_content{
    background-color: white;
    display: flex;
    align-items: center;
    padding: 0 15px;
    height: 66px;
    border-bottom: 1px solid #e4e4e4;
}
.config_sub_title{
    display: flex;
    min-width: 80px;
    text-align: left;
    font-size: 16px;
}
.config_init{
    width: 70px;
    height: 34px;
    color: white;
    background-color: #b6b6b6;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
.config_option_content_box{
    margin-left: auto;
    display: flex;
    
}
.font-family-option{
    background-color: transparent;
    color: #a2a2a2;
    font-size: 15px;
}

.font-family-option.active{
    color: #011;
}
.font-family-option[data-option="KoPubWorldBatang"] {
    font-family: 'KoPubWorldBatang';
    margin-top: 1px;
}
.font-family-option[data-option="Noto Serif KR"] {
    font-family: 'Noto Serif KR';
}
.option_calc_btn{
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: 1px solid #a2a2a2;
    border-radius: 5px;
    font-size: 20px;
    font-weight: bolder;
    color: #a2a2a2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.option-count{
    margin-right: 15px;
    font-size: 15px;
    display: flex;
    align-items: center;
}
.option_calc_btn img{
    width: 100%;
    height: 100%;
}
.font-init-btn{
    background-color: transparent;
    line-height: 22px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.font-init-btn-underline{
    border-bottom: 1px solid;
}
.font-init-btn img{
    width: 17px;
    height: 15px;
}
.ebook_config_layer button{
    position: relative;
    overflow: hidden;
    background-color: transparent;
}

.ebook_config_layer button.disabled:after {
    content: "";
    background: #000000;
    opacity: 0.2;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.ebook_config_layer button.background-option.active {
    border: 2px solid #e35a2e;
}

.option-background-color-box{
    display: flex;
    gap: 17px;
    margin-left: auto;
}
.background-option{
    width: 40px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;
}

.ebook_config_layer button.background-option-ffffff{background-color: #ffffff;}
.ebook_config_layer button.background-option-d5d5d5{background-color: #d5d5d5;}
.ebook_config_layer button.background-option-d6e1e9{background-color: #d6e1e9;}
.ebook_config_layer button.background-option-d8c7bd{background-color: #d8c7bd;}
.ebook_config_layer button.background-option-afa26d{background-color: #afa26d;color: white;}
.ebook_config_layer button.background-option-45505b{background-color: #45505b;color: white;}



.switch-btn-design-box{
    display: flex;
    margin-left: auto;
    position: relative;
    width: 110px;
    height: 40px;
    background-color: #f4f4f4;
    border: 1px solid #d6d6d6;
    border-radius: 20px;
    overflow: hidden;
}

.switch-content{
    position: absolute;
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: #959595;
}
.switch-btn-design-box.on .switch-content:nth-child(1){color: white;}
.switch-content:nth-child(1){ left: 0;}
.switch-content:nth-child(2){left: 50%;}
.moving_round_background{
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: #7f7f7f;
    border-radius: 20px;
    left: 50%;
    transition: 0.3s;
}
.switch-btn-design-box.on .moving_round_background{background-color: #0f71cd; left: 0;}

.more-width{
    width: 100px;
}


/* option */
.option-font-family{
    gap: 16px;
}
.option-font-calc-btn{
    gap: 5px;
}


#temp_div {
    position: relative;
    top: -9999px;
    visibility: hidden;
}

/*  */
/* ebook_config_layer : END*/


#petite_alert {
    position: fixed;
    bottom: 20vh;
    left: 50%;
    padding: 10px 15px;
    min-width: 50%;
    transform: translateX(-50%);
    z-index: -1;
    background: #0000007a;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transition: 0.3s;
}

span.br {
    display: block;
    line-height: 1.8;
}

#pagination {
    display: none;
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom));
    right: 0;
    padding: 10px 15px;
    z-index: 1;
    border-radius: 50px;
    text-align: right;
    white-space: nowrap;
    transition: 0.3s;
    font-size: 13px;
}