/* book list */
.K__p.guide { margin-bottom:1.5rem }  
.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%) ;
}



/* book end guide */
.book__end { padding:4rem 0 }
.book__end__item {
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
    margin-bottom:1rem ; padding:1.5rem 2rem 1.7rem ;
    font-size:1.8rem ; line-height:2.8rem ; text-align:left ; word-break:keep-all ;
    background-color:#f7f7f7 ; word-break:keep-all ;
}

.book__end__item:first-child { position:relative ; padding-left:4.2rem } 
.book__end__item:last-child  { margin-bottom:0 } 
.book__end__item:first-child > span { position:absolute ; left:2rem ; top:1.5rem }

.book__btn__copy , .book__btn__copy > span , .book__btn__copy > span::before { transition:0.3s all }
.book__btn__copy { 
    display:block ; overflow:hidden ; border-radius:0.4rem ; width:26rem ;
    padding:1.5rem 1rem 1.5rem ; margin:auto ;
    color:#ffffff ; font-size:1.6rem ; line-height:2.8rem ; font-weight:500 ; text-align:center ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    background-color:#0e1ea3 ;
}
.book__btn__copy:hover , .book__btn__copy:focus { background-color:#111111 }
.book__btn__copy > span { 
    position:relative ; padding:0 0 0.2rem 4rem ;
    font-size:inherit ; line-height:inherit ; color:inherit ; font-weight:inherit ; text-shadow:inherit } 
.book__btn__copy > span::before {
    display:block; content:"" ; width:3rem ; height:3rem ;  
    position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ; opacity:0.7 ;
    background:url(../img/icon_sprite.png) no-repeat -15rem 0rem ; background-size:auto 6rem ;
}
.book__btn__copy:hover > span::before , .book__btn__copy:focus > span::before { opacity:1 } 





/* PC */
@media screen and (min-width:1024px){ 
  
    /* 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:55 ; width:55% }
    .col3 { flex-grow:30 ; width:30% }
    .col4 { flex-grow:20 ; width:20% } 

    .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) } 



    /* book end guide */
    .book__end__item { padding:1.5rem 4rem 1.7rem }
    .book__end__item:first-child { position:relative ; padding-left:6.2rem } 
    .book__end__item:first-child > span { left:4rem }
 

} 





/* PRINT */
@media print { 
    /* book */
    .K__p.guide { display:none }
}