/* 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 }

.acc__sub { margin-bottom:4rem ; padding-bottom:4rem ; border-bottom:dashed 1px rgba(0,0,0,0.1) }
.acc__sub:last-of-type , .acc__sub.end { margin-bottom:0 ; padding:0 ; border:none }
.acc__sub .acc__sub                    { margin-bottom:4rem ; padding:0 ; border:none }
.acc__sub .acc__sub:last-child         { margin-bottom:0 } 
.acc .notice { margin-top:6rem }

.AIS__h5 { 
    font-size:2.4rem ; line-height:2.8rem ; font-weight:700 ; color:#111111 ;
    margin-bottom:1rem ;
}
.AIS__h6  { font-size:2rem ; line-height:2.8rem ; font-weight:700 ; color:#111111 ; margin-bottom:0.5rem }
.AIS__num { 
    width:3rem ; height:3rem ; display:inline-block ; overflow:hidden ; padding:0 0 0.2rem ; border-radius:100% ;
    font-size:1.8rem ; line-height:2.8rem ; color:#ffffff ; font-weight:600 ; text-align:center ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    background-color:rgba(0,0,0,0.9) ;  
}
.AIS__li { padding-left:1rem ; margin-bottom:1.5rem ; position:relative }
.no .AIS__li { padding-left:0 }
.AIS__li:last-child { margin-bottom:0 } 
.AIS__li::before {
    display:block ; content:"" ; width:0.4rem ; height:0.4rem ; 
    background-color:#000000 ; opacity:0.3 ;
    position:absolute ; left:0 ; top:1.3rem
}
.no .AIS__li::before { display:none } 

.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:6rem 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) }

.AIS__li b { font-weight:600 ; color:#111111 } 



/* table */  
#K22_table4 .tag1::before , #K22_table4 thead th:nth-child(1)::before  { content:"구분" }
#K22_table4 .tag2::before , #K22_table4 thead th:nth-child(2)::before  { content:"대지표" }
#K22_table4 .tag3::before , #K22_table4 thead th:nth-child(3)::before  { content:"보조지표" } 

#K22_table9 .tag1::before , #K22_table9 thead th:nth-child(1)::before  { content:"조사항목" }
#K22_table9 .tag2::before , #K22_table9 thead th:nth-child(2)::before  { content:"응답의 주요내용" }



/* img */
#k22_img1 , #k22_img2 { max-width:50rem }
#k22_img3 { max-width:80rem } 
#k22_img3 , #k22_imgs12 { padding-top:4rem }

.k22__figcaption { text-align:center }
.k22__figcaption > span {
    display:inline-block ; padding:0.5rem 2.5rem 0.7rem ;
    font-size:1.8rem ; line-height:2.8rem ; font-weight:600 ; 
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:3rem ;
    background-color:#f7f7f7 ;
}




/* 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 }



    /* table */  
    #K22_table4 tbody td:nth-child(1) { width:7% }
    #K22_table4 tbody td:nth-child(2) { width:23% }
    #K22_table4 tbody td:nth-child(3) { text-align:left ; padding-left:2rem }

    #K22_table9 td:nth-child(1) { width:20% }
    #K22_table9 td:nth-child(2) { padding-left:1.5rem ; padding-right:1.5rem }



    /* img */
    #k22_imgs12 { max-width:100rem }

}  





/* 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 } 
 
}