/* acc - header */
.acc__header { margin-bottom:1.5rem } 
.K__p.guide  { margin-bottom:1rem } 
.acc__header__btns::after { display:block ; content:"" ; clear:both }
#acc__all__open , #acc__all__close { 
    width:49.5% ; padding:0.7rem 1rem 0.9rem ; background-color:#ffffff ;
    font-size:1.4rem ; line-height:1.8rem ; text-align:center ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
    transition:0.3s all ;
} 
#acc__all__open { float:left }
#acc__all__close { float:right }
#acc__all__open:hover , #acc__all__close:hover , #acc__all__open:focus , #acc__all__close:focus {
    color:#000000 ; border-color:rgba(0,0,0,0.2) ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.3) ;
}



/* acc */
.acc__item { 
    width:100% ; overflow:hidden ; 
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.6rem ; 
    margin-bottom:1rem ; background-color:#ffffff }
.acc__item.open { border-color:rgba(0,0,0,0.2) ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.1) }
.acc__item__header       { position:relative }
.open .acc__item__header { 
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
    background-color:#0e1ea3 ; 
}
.acc__item__title  { 
    padding:1rem 3rem 1.2rem 5rem ; position:relative ;
    font-size:2rem ; line-height:2.8rem ; color:#111111 ; font-weight:600 ; word-break:keep-all ;
}
.open .acc__item__title { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
.acc__item__num { 
    display:block ; width:4rem ;
    font-size:inherit ; line-height:inherit ; color:inherit ; font-weight:inherit ; text-align:center ;
    position:absolute ; left:0 ; top:1rem 
}
.acc__item__num::after {
    display:block ; content:"" ; width:1px ; height:1.4rem ; background-color:#000000 ; opacity:0.1 ;
    position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
}
.open .acc__item__num::after { background-color:#ffffff ; opacity:0.2 }
.AI__btn__open { 
    position:absolute ; left:0 ; top:0 ; 
    display:block ; width:100% ; height:100% ; 
    font-size:0 ; color:transparent ;  
}
.acc__item__header , .acc__item__title , .AI__btn__open::before , .acc__item__body { transition:0.3s all }
.AI__btn__open::before {
    display:block ; content:"" ; width:0.6rem ; height:0.6rem ; 
    border:solid 0.2rem #111111 ; border-top:none ; border-left:none ;
    position:absolute ; right:1rem ; top:2.1rem ; transform:translate(-50%,-50%) rotate(45deg) ;
    opacity:0.3 ;
}
.AI__btn__open:hover::before , .AI__btn__open:focus::before { transform:translate(-50%,-50%) rotate(45deg) scale(1.2) ; opacity:1  }
.open .AI__btn__open::before {
    border-color:#ffffff ; transform:translate(-50%,-50%) rotate(225deg) scale(1.1) ;
    opacity:1 ; top:2.6rem ;
} 
.open .AI__btn__open:hover::before , .open .AI__btn__open:focus::before { transform:translate(-50%,-50%) rotate(225deg) scale(1.2) }

.acc__item__body        { padding:0 2rem ; height:0 ; overflow:hidden } 
.open .acc__item__body  { padding:2rem ; height:auto }

.acc__item__wrap        { display:none }
.open .acc__item__wrap  { display:block }
.acc__item__wrap::after { display:block }
  
.AI__btn__close { 
    width:2rem ; height:2rem ; margin:1.5rem auto ; 
    display:none ; overflow:hidden ; opacity:0.3 ;
    font-size:0 ; color:transparent ;
    position:relative ;
}
.AI__btn__close::before , .AI__btn__close::after { 
    display:block ; content:"" ; transition:0.3s all ;
    width:1.8rem ; height:0.1rem ; background-color:#000000 ;
    position:absolute ; left:50% ; top:50%
}  
.AI__btn__close:hover , .AI__btn__close:focus { opacity:1 }
.AI__btn__close::before { transform:translate(-50%,-50%) rotate(45deg) }
.AI__btn__close::after  { transform:translate(-50%,-50%) rotate(-45deg) }
.AI__btn__close:hover::before , .AI__btn__close:focus::before { transform:translate(-50%,-50%) rotate(135deg) }
.AI__btn__close:hover::after , .AI__btn__close:focus::after   { transform:translate(-50%,-50%) rotate(45deg) }
.open .AI__btn__close { display:block }

.acc__more , .acc__more__icon { transition:0.3s all }
.acc__more {
    display:block ; overflow:hidden ; width:22rem ; padding:1.2rem 0.5rem 1.4rem ; margin:4rem auto 0 ;
    border-radius:0.4rem ; background-color:#0e1ea3 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; 
    font-size:1.8rem ; line-height:2.8rem ; font-weight:500 ; text-align:center ; color:#ffffff ; 
}
.acc__more:hover , .acc__more:focus { background-color:#111111 }
.acc__more__icon {
    width:1.6rem ; height:1.6rem ; display:inline-block ; overflow:hidden ;
    font-size:0 ; color:transparent ;
    position:relative ; top:0.7rem ; margin-right:0.7rem
} 
.acc__more:hover .acc__more__icon  , .acc__more:focus .acc__more__icon { transform:rotate(90deg) }

.acc__more__icon::before , .acc__more__icon::after { 
    display:block ; content:"" ; transition:0.3s all ;
    width:1.4rem ; height:0.2rem ; background-color:#ffffff ;
    position:absolute ; left:50% ; top:50%
}  
.acc__more__icon::before { transform:translate(-50%,-50%) rotate(0deg) }
.acc__more__icon::after  { transform:translate(-50%,-50%) rotate(90deg) }
 


/* img */
.img  { max-width:80rem } 



/* book list */
.K__p.guide { margin-bottom:1.5rem }  
.book__list { margin-bottom:4rem }
.book__list__header { display:none  }

.book__item , .book__tag , .book__title { transition:0.3s all }

.book__item {
    display:block ; overflow:hidden ; width:100% ; 
    margin-bottom:0.7rem ; padding:1.5rem ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.6rem ;
    position:relative ; background-color:#ffffff ;
}
.book__item br { display:none }
.book__item:hover , .book__item:focus { border-color:rgba(0,0,0,0.3) ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.3)}
.book__item:last-child { margin-bottom:0 }

.col1 .book__tag::before , .book__col.col1::before { content:"번호" }
.col2 .book__tag::before , .book__col.col2::before { content:"원저" }
.col3 .book__tag::before , .book__col.col3::before { content:"저자" }
.col4 .book__tag::before , .book__col.col4::before { content:"수록지" }

.book__num , .book__tag { 
    display:inline-block ; border-radius:0.4rem  ; 
    margin-right:0.3rem 
}
.book__num { 
    background-color:#0e1ea3 ; padding:0.2rem 1rem 0.4rem ;
    font-size:1.4rem ; line-height:1.8rem ; color:#ffffff ; font-weight:500 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    padding:0.2rem 0.8rem 0.4rem ; ; position:relative ; top:0.3rem
}
.book__tag { 
    font-size:1.4rem ; line-height:1.8rem ; font-weight:500 ; 
    background-color:#f7f7f7 ; border:solid 1px rgba(0,0,0,0.1) ; 
    padding:0.2rem 0.8rem 0.4rem ; position:relative ; top:0.1rem ; overflow:hidden ; 
}

.book__item:hover .book__tag , .book__item:focus .book__tag {
    background-color:#111111 ; border-color:#111111 ; color:#ffffff
}
.book__title { display:inline ; border-bottom:solid 1px #ffffff }
.book__item:hover .book__title  , .book__item:focus .book__title , .book__title:focus { border-color:rgba(0,0,0,0.15) }
.col1 .book__tag , .col2 .book__tag { 
    position:absolute ; padding:0 ; margin:0 ; border:none ; background:none ;
    display:block ; overflow:hidden ; width:0 ; height:0 ; font-size:0 ; content:"" }
.book__title , .book__writer , .book__source { word-break:keep-all }
.book__title { font-size:2rem ; line-height:3rem ; font-weight:600 ; color:#111111 }
.book__writer { margin-top:1rem }
.book__writer , .book__source { 
    font-size:1.8rem ; line-height:2.6rem ;
    border-top:dashed 1px rgba(0,0,0,0.1) ; padding:0.8rem 0 1rem ;
}

.book__more {
    display:block ; overflow:hidden ; width:98% ; height:96% ;
    font-size:0 ; color:transparent ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}


/* PC */
@media screen and (min-width:1024px){ 

    /* acc - header */
    .acc__header { position:relative ; padding-right:20rem ; margin-bottom:2rem }
    .K__p.guide  { margin-bottom:0 } 
    .acc__header__btns { 
        width:18rem ;
        position:absolute ; right:0 ; top:0
    }
    #acc__all__open , #acc__all__close { width:48% }



    /* acc */
    .acc__item__title  { 
        padding:2rem 6rem 2.2rem 9rem ; position:relative ;
        font-size:2.2rem ; line-height:2.8rem ; color:#111111 ; font-weight:600 ; word-break:keep-all ;
    }
    .acc__item__num { 
        display:block ; width:7rem ; border-right:solid 1px rgba(0,0,0,0.1) ;
        font-size:2.8rem ; line-height:4rem ; padding-bottom:0.2rem ;
        top:1.5rem 
    }
    .open .acc__item__num { border-color:rgba(255,255,255,0.2) }

    .acc__item__num::after { display:none } 

    .AI__btn__open::before {
        width:1rem ; height:1rem ; 
        right:2rem ; top:3.3rem
    }
    .open .AI__btn__open::before { top:3.8rem } 

    .acc__item__body { padding:0 4rem } 
    .open .acc__item__body { padding:3rem 4rem }


    
    /* book list */
    .book__list__header , .book__item { display:flex ; align-items:center ; width:100% ; margin:0 ; padding:0 }
    .book__list , .book__list__header { overflow:hidden ; border-radius:0.4rem }
    .book__list__header { background-color:#0e1ea3 ;  margin-bottom:0.5rem }
    
    .book__col {  
        padding:1.2rem 0.5rem 1.4rem ; position:relative ;  
        font-size:1.6rem ; line-height:2rem ; color:#ffffff ; font-weight:400 ; text-align:center ;
        text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; 
    }
    .book__col::after {
        display:block ; content:"" ; width:1px ; height:1.4rem ; background-color:#ffffff ; opacity:0.3 ;
        position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
    } 
    .book__col:last-child:after { display:none }

    .col1 { flex-grow:5 ; width:5% }
    .col2 { flex-grow:65 ; width:65% }
    .col3 { flex-grow:15 ; width:15% }
    .col4 { flex-grow:25 ; width:25% } 

    .book__list { border:solid 1px rgba(0,0,0,0.1) }

    .book__item , .book__item:hover , .book__item:focus { 
        border-radius:0 ; box-shadow:none ; padding:1rem 0 ; margin:0 ; border:none ;  
        border-bottom:solid 1px rgba(0,0,0,0.1) ;
        overflow:hidden ;
    } 
    .book__item:last-child { border:none }
    .book__item br { display:block }

    .book__tag , .col1 .book__tag , .col2 .book__tag  {
        display:block ; overflow:hidden ; width:0 ; height:0 ; position:absolute ; 
        padding:0 ; margin:0 ; border:none ; border-radius:0 ; 
        font-size:0 ; color:transparent ;  
    }
   
    .book__num , .book__title , .book__writer , .book__source { 
        display:block ; border-radius:0 ; border:none ; padding:0 ; margin:0 ;
        background:none ; text-align:center ;
        position:relative ; padding:0 0.2rem 0.2rem ;
    }
    .book__writer , .book__source { padding-left:1rem ; padding-right:1rem }
    .book__title { text-align:left ; padding-left:5rem ; padding-right:1rem } 
 
    .book__num::after , .book__title::after , .book__writer::after {
        display:block ; content:"" ; width:1px ; height:26rem ; background-color:rgba(0,0,0,0.1) ;
        position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
    }
    
    .book__num { 
        padding-bottom:0.4rem ; font-weight:400 ;
        text-shadow:none ; color:#444444 ; font-size:1.8rem ; line-height:2.6rem }
    
    .book__more { width:99% ; height:98% }

    .book__item:hover  , .book__item:focus { background-color:#f7f7f7 ; border-color:rgba(0,0,0,0.3) }

    .book__title .book__tag , .book__title .book__tag::before  { width:3rem ; height:3rem ; display:block ; overflow:hidden ; position:absolute  }
    .book__title .book__tag {  
        border:solid 1px rgba(0,0,0,0.1) ; border-radius:100% ; 
        left:1.5rem ; top:0rem
    }
    .book__title .book__tag::before { 
        left:50% ; top:50% ; transform:translate(-50%,-50%) scale(0.7) ; opacity:0.3 ; 
        background:url(../img/icon_sprite_MB.png) no-repeat right top ; background-size:6rem auto ;
    }

    .book__item:hover .book__title .book__tag , .book__item:focus .book__title .book__tag  { background-color:#0e1ea3 ; border:0 }
    .book__item:hover .book__title .book__tag::before  , .book__item:focus .book__title .book__tag::before { 
        background-position:right bottom ; opacity:1 ; transform:translate(-50%,-50%) scale(0.9) } 
  
 
} 





/* PRINT */
@media print { 

    /* acc  */
    .acc__header , .AI__btn__close , .open .AI__btn__close { display:none } 
    .acc__item , .acc__item.open { border-color:rgba(0,0,0,0.1) ; box-shadow:none }
    .acc__item__header , .open .acc__item__header { 
        border-bottom:solid 1px rgba(0,0,0,0.1) ;
        background-color:#ffffff
    }
    .acc__item__title , .open .acc__item__title { color:#111111 ; text-shadow:none }
    .acc__item__num::after , .open .acc__item__num::after { background-color:#000000 ; opacity:0.1 }
    .AI__btn__open , .acc__more { display:none }
    .acc__item__body , .open .acc__item__body { padding:2rem ; height:auto }
    .acc__item__wrap , .open .acc__item__wrap { display:block }  


 
 
}