@charset "utf-8";
/* *_book.jsp */

/* TITLE */
.KS31_book_header , .KS31_book_header > h4 ,  .KS31_book_header > p , .KS31_book_list { width:100% ; box-sizing:border-box }
.KS31_book_header { margin-bottom:1.5rem }
.KS31_book_header > h4 ,  .KS31_book_header > p { text-align:center ; word-break:break-all }
.KS31_book_header > h4 { font-size:3rem ; line-height:3.4rem ; font-weight:600 ; color:#111111 ; letter-spacing:-0.2rem ; margin-bottom:1rem }
.KS31_book_header > p  { font-size:1.4rem ; line-height:2.2rem }
 
.KS31_book , .KS31_book::before { overflow:hidden ; border-radius:0.4rem ; }
.KS31_book , .KS31_book > a , .KS31_book > a::after { transition:0.3s all }
.KS31_book_list { font-size:0 ; text-align:center }
.KS31_book::before , .KS31_book > a { width:100% ; height:100% ; overflow:hidden ; position:absolute ; left:0 ; top:0 ; box-sizing:border-box }
.KS31_book::before { border:solid 1px rgba(0,0,0,0.1) ; content:"" ; display:block }
.KS31_book { 
    width:26rem ; height:36.6rem ; margin:0.5rem ;
    display:inline-block ; position:relative ; background:no-repeat center ; background-size:26rem auto ;
    box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.2) ;
}
.KS31_book > a { display:block ; font-size:0 ; color:transparent }

.KS31_book > a::after { 
    content:"" ; display:block ; overflow:hidden ; border-radius:100% ; opacity:0 ;
    width:8rem ; height:8rem ; position:absolute ; left:50% ; top:65% ; transform:translate(-50%,-50%) ;
    background:url(../img/icon_book_w.png) no-repeat center #85e13d ; background-size:4rem auto ;
}
 
.KS31_book.book1 { background-image:url(../img_sub/KS31_book1.jpg) }
.KS31_book.book2 { background-image:url(../img_sub/KS31_book2.jpg) }
.KS31_book.book3 { background-image:url(../img_sub/KS31_book3.jpg) }
.KS31_book.book4 { background-image:url(../img_sub/KS31_book4.jpg) }
.KS31_book.book5 { background-image:url(../img_sub/KS31_book5.jpg) }
.KS31_book.book6 { background-image:url(../img_sub/KS31_book6.jpg) }
.KS31_book.book7 { background-image:url(../img_sub/KS31_book7.jpg) }
.KS31_book.book8 { background-image:url(../img_sub/KS31_book8.jpg) }

.KS31_book:hover { background-size:28rem auto }
.KS31_book:hover > a { background-color:rgba(0,0,0,0.5)}
.KS31_book:hover > a::after { top:50% ; opacity:0.9 }



/* POPUP */ 
.KS31_pop { 
    display:block ; width:100% ; height:100vh ; box-sizing:border-box ;  ; padding:1.5rem ; opacity:0 ;
    position:fixed ; left:-105% ; top:0 ; z-index:110 ;  
    background-color:rgba(0,0,0,0.6) ; overflow:hidden ; transition:0.3s all
}
.KS31_pop.open { opacity:1 ; left:0 }
.KS31_pop_inner { 
    display:none ;
    width:100% ; height:100% ; box-sizing:border-box ; background-color:#ffffff ;  
    padding:2rem ; overflow:auto  
}
.open .KS31_pop_inner { display:block }
.KS31_pop_img , .KS31_pop_img > img { width:100% }
.KS31_pop_img , .KS31_pop_img::before { border-radius:0.4rem ; overflow:hidden }
.KS31_pop_img { margin:auto ; margin-bottom:2rem ; position:relative ; max-width:27rem ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.3) }
.KS31_pop_img::before {
    display:block ; overflow:hidden ; content:"" ; width:100% ; height:100% ; box-sizing:border-box ;
    border:solid 1px rgba(0,0,0,0.1) ; position:absolute ; left:0 ; top:0
}

.KS31_pop_infor , .KS31_pop_infor > li , .KS31_pop_index { width:100% ; box-sizing:border-box } 
.KS31_pop_infor > li , .KS31_pop_index {
    position:relative ; display:block ; overflow:hidden ; border-radius:0.4rem ;
    padding:1rem 0.7rem ; font-size:0 ; 
    border:solid 1px rgba(0,0,0,0.1) ; margin-bottom:1rem }
.KS31_pop_infor span { 
    display:inline-block ; padding:0 1rem 0.2rem 0.2rem ; margin-right:1rem ; margin-top:0.3rem ;
    position:relative ;
    font-size:1.2rem ; line-height:1.8rem }
.KS31_pop_infor span::before {
    display:block ; content:"" ; width:0.1rem ; height:1rem ; background-color:#000000 ; opacity:0.1 ;
    position:absolute ; right:0 ; top:50% ; transform:translateY(-50%);
}
.KS31_pop_infor span.sound { padding:0 ; margin:0 ; font-size:0 ; color:transparent } 
.KS31_pop_infor b { 
    font-size:1.8rem ; line-height:2.4rem ; font-weight:400 ;
    letter-spacing:-0.1rem ; word-break:keep-all ;
} 
.KS31_pop_infor li:first-child b { font-weight:600 ; color:#111111 }
.KS31_pop_index { margin-bottom:1.5rem ; padding:1rem 1.5rem }
.KS31_pop_index ul , .KS31_pop_index li { width:100% ; box-sizing:border-box }
.KS31_pop_index li { font-size:1.6rem ; line-height:2.4rem ; margin-bottom:1rem ; word-break:keep-all }
.KS31_pop_index ul ul { padding-top:0.3rem }
.KS31_pop_index ul ul > li { padding-left:1.5rem ; position:relative }

.KS31_pop_index > div > ul { margin-bottom:3rem }
.KS31_pop_index > div > ul:last-of-type  { margin-bottom:0 }

.KS31_pop_infor > span { font-size:0 ; color:transparent ; width:0 ; height:0 ; display:block ; overflow:hidden }

.KS31_link , .KS31_link > li , .KS31_link_btn { width:100% ; box-sizing:border-box } 
.KS31_link { margin-bottom:2rem }
.KS31_link > li , .KS31_link_btn { display:block ; text-align:center }
.KS31_link > li { margin-bottom:0.5rem }

.per .KS31_pop_index > div > ul > li { padding-left:1rem ; position:relative }
.per .KS31_pop_index > div > ul > li::before {
    display:block ; overflow:hidden ; content:"" ;
    width:0.3rem ; height:0.3rem ; border-radius:0.2rem ; background-color:#000000 ; opacity:0.2 ;
    position:absolute ; left:0 ; top:1.2rem 
}
.KS31_pop_index > div > ul > li li { padding-left:2rem }


.KS31_link_btn { padding:1rem 0.5rem ; background-color:#000000 ; border-radius:0.4rem ; overflow:hidden } 
.KS31_link_btn > span { 
    display:inline-block ; padding-bottom:0.2rem ; padding-left:3.5rem ; 
    font-size:1.6rem ; line-height:2.8rem ; color:#ffffff ; font-weight:400 ;
    background:no-repeat left center ; background-size:2.7rem auto ;
}
.KS31_link_btn , .KS31_link_btn > span { transition:0.3s all } 
.KS31_link_btn.info > span { background-image:url(../img/icon_book_w.png) }
.KS31_link_btn.copy > span { background-image:url(../img/icon_print_w.png) }

.KS31_link_btn:hover { background-color:#012b66 } 
.KS31_link_btn:hover > span { background-size:3rem auto ; letter-spacing:0.1rem }

.KS31_pop_PP { 
    position:relative ; background-color:rgba(0,0,0,0.05) ;  
    width:10rem ; margin:auto ; margin-bottom:1rem ; border-radius:0.4rem ; border:solid 1px rgba(0,0,0,0.1) }
.KS31_pop_PP , .KS31_pop_PP li , .KS31_PPP { height:5rem ; overflow:hidden ; box-sizing:border-box }
.KS31_pop_PP::before { 
    display:block ; overflow:hidden ; content:"" ; width:0.1rem ; height:2rem ; background-color:#000000 ;
    opacity:0.1 ; position:absolute ; left:50% ; top:50% ; transform:translateY(-50%) ;
} 
.KS31_pop_PP li { float:left ; width:50% }
.KS31_PPP , .KS31_PPP::before { transition:0.3s all }
.KS31_PPP { 
    display:block ; overflow:hidden ; ; position:relative ; width:100% ; box-sizing:border-box ;
    font-size:0 ; color:transparent
}
.KS31_PPP::before { 
    display:block ; overflow:hidden ; content:"" ;
    width:1rem ; height:1rem ; border:solid 0.2rem #000000 ; border-bottom:none ;
    position:absolute ; left:50% ; top:50% ; opacity:0.6 ; 
} 
.KS31_PPP.prev::before { border-right:none ; transform:translate(-50%,-50%) rotate(-45deg) }
.KS31_PPP.next::before { border-left:none ; transform:translate(-50%,-50%) rotate(45deg) }

.KS31_PPP:hover { background-color:#000000 }
.KS31_PPP:hover::before{ border-color:#ffffff ; opacity:1 }
.KS31_PPP.prev:hover::before { transform:translate(-50%,-50%) rotate(-45deg) scale(1.2) ; left:48% }
.KS31_PPP.next:hover::before { transform:translate(-50%,-50%) rotate(45deg) scale(1.2) ; left:52% }

.KS31_pop_close , .KS31_pop_close::before , .KS31_pop_close::after { transition:0.3s all }
.KS31_pop_close { 
    display:block ; overflow:hidden ; width:2rem ; height:2rem ;
    position:fixed ; left:1.5rem ; top:1.5rem ; opacity:0.5 ;
    font-size:0 ; color:transparent
}
.KS31_pop_close::before , .KS31_pop_close::after {
    display:block ; overflow:hidden ; content:"" ;
    width:1.7rem ; height:0.2rem  ; background-color:#000000 ;
    position:absolute ; left:50% ; top:50%
}
.KS31_pop_close::before { transform:translate(-50%,-50%) rotate(45deg) }
.KS31_pop_close::after { transform:translate(-50%,-50%) rotate(-45deg) }

.KS31_pop_close:hover , .KS31_pop_close:focus { opacity:1}
.KS31_pop_close:hover::before , .KS31_pop_close:hover::after { width:2rem ; height:0.1rem }
.KS31_pop_close:hover::before { transform:translate(-50%,-50%) rotate(135deg) }
.KS31_pop_close:hover::after  { transform:translate(-50%,-50%) rotate(45deg) }





/* PC **********/
@media all and (min-width:1100px){

    /* TITLE */
    .KS31_book_header , .KS31_book_list { max-width:110rem ; margin:auto }
    .KS31_book_header { margin-bottom:2rem ; overflow:hidden }
    .KS31_book_header > h4 ,  .KS31_book_header > p { display:inline-block ; width:auto ; margin:0 ; padding:0 }
    .KS31_book_header > h4 { margin-right:1.5rem }
    .KS31_book_header > p { padding-left:1.6rem ; position:relative ; margin-top:1rem }
    .KS31_book_header > p::before {
        display:block ; overflow:hidden ; content:"" ; padding-bottom:0.2rem ;
        width:0.1rem ; height:1rem ; background-color:#000000 ; opacity:0.1 ;
        position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ; 
    }

    .KS31_book { margin:0 ; display:block ; float:left ; margin-right:2rem }
    .KS31_book:last-child { margin-right:0 } 
    .KS31_book_list::after { content:"" ; display:block ; clear:both }



    /* POPUP  */
    .KS31_pop.open { min-height:80rem }
    .KS31_pop_inner { 
        width:110rem ; height:80rem ; overflow:hidden ;
        position:fixed ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
        padding:10rem 4rem 4rem 34rem ; margin:auto ; border-radius:0.4rem 
    }
    .KS31_pop_img { max-width:26rem ; position:absolute ; left:4rem ; top:4rem }

    .KS31_pop_infor { margin-bottom:0.5rem ; overflow:hidden }
    .KS31_pop_infor > li { padding:1rem ; margin:0 ; margin-bottom:0.5rem ; float:left }  
    .KS31_pop_infor > li:nth-child(2) { width:31.5rem ; margin-right:0.5rem }
    .KS31_pop_infor > li:nth-child(3) { width:40rem }
    .KS31_pop_infor li:first-child { padding-left:1.5rem  }
    .KS31_pop_infor li:first-child b { font-size:2.4rem ; line-height:3rem ; padding-bottom:0.2rem }
    .KS31_pop_infor span { 
        display:block ; width:7rem ; padding:0 ; padding-bottom:0.2rem ; margin:0 ;
        position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ;
        text-align:center ;
    }
    .KS31_pop_infor b { font-size:2rem ; line-height:2.4rem ; padding-bottom:0.2rem ; display:block }
 
    .KS31_pop_index { padding:2rem ; box-sizing:border-box ; height:49.5rem }
    .per .KS31_pop_index { height:54rem }
    .KS31_pop_infor > li , .KS31_pop_index { padding-left:8.5rem }
    .KS31_pop_index > div { width:100% ; height:100% ; box-sizing:border-box ; overflow:auto }

    .KS31_pop_index > span {
        font-size:1.2rem ; line-height:1.8rem ; color:#444444 ; text-align:center ;
        width:7rem ; height:auto ; padding-bottom:0.2rem ;
        position:absolute ; left:0 ; top:2.3rem ; display:block ;       
    }

    .per .KS31_pop_index > span { 
        position:relative ; left:auto ; top:auto ; width:100% ;
        display:inline-block ; text-align:left ;
        margin:0 ; padding:0 ; padding-bottom:1rem ; margin-bottom:1.5rem ;
        border-bottom:dashed 1px rgba(0,0,0,0.1) ;
    }
    .per .KS31_pop_index > span::after { display:none }

    .per .KS31_pop_index { padding-left:2rem }

    .KS31_pop_index > span::after {
        width:0.1rem ; height:1rem ; display:block ; content:"" ;
        background-color:#000000 ; opacity:0.1 ; 
        position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
    }

    .KS31_link { width:45rem ; position:absolute ; top:4rem ; left:34rem } 
    .KS31_pop_PP { position:absolute ; right:4rem ; top:4rem ; overflow:hidden ; }
    .KS31_link > li , .KS31_link_btn { width:22rem }
    .KS31_link > li  { float:left ; margin:0 ; margin-right:0.5rem }  

    .KS31_pop_close {
        position:absolute ; left:50% ; margin-left:55.5rem ; top:6% ;
        width:4rem ; height:4rem ; opacity:0.8 ;
    }
    .KS31_pop_close::before , .KS31_pop_close::after { background-color:#ffffff }
    .KS31_pop_close::before , .KS31_pop_close::after { width:2.6rem }
    .KS31_pop_close:hover::before , .KS31_pop_close:hover::after { width:3rem ; height:0.2rem }
 
  
}