@charset "utf-8";

/* ACCORDION */
.KS_ACC , .KS_ACC_header , .KS_ACC_box , .KS_AB_title , .KS_ACC_inner { width:100% ; box-sizing:border-box } 
.KS_ACC_header , .KS_ACC_box { position:relative } 
.KS_ACC_box:last-child { border-bottom:solid 1px rgba(0,0,0,0.1) }
.KS_ACC_header { margin-bottom:2rem ; text-align:center ; font-size:0 }
.KS_ACC_header > p { 
    width:100% ;
    font-size:1.4rem ; line-height:2rem ; word-break:keep-all ; margin-bottom:1rem }
.KS_ACC_all , .KS_ACC_all::before , .KS_ACC_all::after , .KS_ACC_inner , .KS_AB_title::before { transition:0.3s all }
.KS_ACC_all {
    font-size:1.4rem ; line-height:2rem ; position:relative ;
    border:solid 1px rgba(0,0,0,0.1) ; overflow:hidden ; border-radius:0.4rem ;
    padding:0.5rem 1.3rem 0.7rem 1.3rem ; display:inline-block ;
    margin:0.2rem 0.5rem
}
.KS_ACC_all:hover { padding-left:3.3rem ; background-color:#000000 ; color:#ffffff } 
.KS_ACC_all::before , .KS_ACC_all::after {
    width:1.4rem ; height:0.2rem ; display:block ; overflow:hidden ; content:"" ;
    background-color:#ffffff ; opacity:0 ;
    position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ;
} 
.KS_ACC_all:hover::before , .KS_ACC_all:hover::after { background-color:#ffffff ; left:1.3rem ; opacity:1 }
.KS_ACC_all.ACCopen:hover::before { top:37% } 
.KS_ACC_all.ACCopen:hover::after  { top:63% } 
.KS_ACC_all.close:hover::before , .KS_ACC_all.close:hover::after { top:50% ; left:2.2rem }
.KS_ACC_all.close:hover::before { transform:translate(-50%,-50%) rotate(45deg) } 
.KS_ACC_all.close:hover::after  { transform:translate(-50%,-50%) rotate(-45deg) } 

.KS_AB_title { 
    padding:1rem 0.5rem 1.2rem 3rem ; word-break:keep-all ; cursor:pointer ;
    font-size:2rem ; line-height:3rem ; text-align:left ; font-weight:500 ; color:#444444 ; letter-spacing:-0.1rem ;
    border-top:solid 0.2rem #012c68 ; position:relative ;
}
.KS_AB_title::before {
    display:block ; width:0 ; height:100% ; content:"" ;
    background-color:#000000 ; opacity:0 ;
    position:absolute ; left:0 ; top:0
}
.KS_ACC_box:hover .KS_AB_title::before { width:100% ; opacity:0.03 }
.KS_ACC_inner { padding:0 ; opacity:0 ; border:0 ; overflow:hidden ; height:0 }

.KS_ACC_btn_open , .KS_ACC_btn_open::before , .KS_ACC_btn_open::after { transition:0.3s all }
.KS_ACC_btn_open {
    width:3rem ; height:3rem ; overflow:hidden ;
    font-size:0 ; color:transparent ;
    position:absolute ; left:0 ; top:1.2rem  
}
 
.KS_ACC_btn_open::before , .KS_ACC_btn_open::after { 
    display:block ; overflow:hidden ; content:"" ;
    width:1rem ; height:0.2rem ; border-radius:1rem ;
    background-color:#012c68 ; position:absolute ;
}
.KS_ACC_btn_open::before { transform:translate(-50%,-50%) rotate(45deg) ; left:50% ; top:40% }
.KS_ACC_btn_open::after  { transform:translate(-50%,-50%) rotate(-45deg) ; left:50% ; top:60% }

.KS_ACC_box:hover .KS_ACC_btn_open { transform:rotate(90deg) }

.KS_ACC_btn_close  , .KS_ACC_btn_close::before , .KS_ACC_btn_close::after { transition:0.3s all }
.KS_ACC_btn_close { 
    width:0 ; height:0 ; opacity:0 ; overflow:hidden ;
    font-size:0 ; color:transparent ;
    position:absolute ; left:50% ; bottom:1rem ; transform:translateX(-50%) ;
}

.KS_ACC_btn_close::before , .KS_ACC_btn_close::after {
    display:block ; overflow:hidden ; content:"" ;
    width:1.5rem ; height:0.1rem ; position:absolute ; left:50% ; top:50% ;
    background-color:#000000 ;
}
.KS_ACC_btn_close::before { transform:translate(-50%,-50%) rotate(45deg) }
.KS_ACC_btn_close::after  { transform:translate(-50%,-50%) rotate(-45deg) }
.KS_ACC_btn_close:hover , .KS_ACC_btn_close:focus { opacity:1 }
.KS_ACC_btn_close:hover::before , .KS_ACC_btn_close:hover::after  { width:1.8rem }
.KS_ACC_btn_close:hover::before { transform:translate(-50%,-50%) rotate(135deg) }
.KS_ACC_btn_close:hover::after  { transform:translate(-50%,-50%) rotate(45deg) }

.ACCopen .KS_ACC_inner {
    padding:3rem 0 5rem 0 ; height:auto ; opacity:1 ;
    border-top:solid 1px rgba(0,0,0,0.1) 
}
.ACCopen .KS_AB_title { border-color:#549125 ; color:#000000 }
.ACCopen .KS_ACC_btn_close { width:2rem ; height:2rem ; opacity:0.3 }
.ACCopen .KS_ACC_btn_open::before , .ACCopen .KS_ACC_btn_open::after { background-color:#549125 ; left:50% ; top:50% ; width:1.6rem } 
.ACCopen .KS_ACC_btn_open::before { transform:translate(-50%,-50%) rotate(45deg) }
.ACCopen .KS_ACC_btn_open::after  { transform:translate(-50%,-50%) rotate(-45deg) }



/* history.jsp */ 
.KS_ACC_BOX , .KS_ACC_item  { width:100% ; box-sizing:border-box ; text-align:center } 
.KS_ACC_title {     
    padding:1rem 0.5rem 1.2rem 3rem ; word-break:keep-all ; cursor:pointer ;
    font-size:2rem ; line-height:3rem ; text-align:left ; font-weight:500 ; color:#444444 ; letter-spacing:-0.1rem ;
    border-top:solid 0.2rem #012c68 }
.KS_ACC_item { position:relative }
.KS_ACC_item:last-of-type { border-bottom:solid 1px rgba(0,0,0,0.1) } 


.KS_ACC_btn_open > span { font-size:0 ; color:transparent ; width:0 ; height:0 ; display:block ; overflow:hidden ; position:absolute ; left:0 ; top:0 }
.KS_ACC_btn_open , .KS_ACC_btn_open::before , .KS_ACC_btn_open::after { transition:0.3s all }
.KS_ACC_btn_open {
    width:3rem ; height:3rem ; overflow:hidden ;
    font-size:0 ; color:transparent ;
    position:absolute ; left:0 ; top:1.2rem  
}
 
.KS_ACC_btn_open::before , .KS_ACC_btn_open::after { 
    display:block ; overflow:hidden ; content:"" ;
    width:1rem ; height:0.2rem ; border-radius:1rem ;
    background-color:#012c68 ; position:absolute ;
}
.KS_ACC_btn_open::before { transform:translate(-50%,-50%) rotate(45deg) ; left:50% ; top:40% }
.KS_ACC_btn_open::after  { transform:translate(-50%,-50%) rotate(-45deg) ; left:50% ; top:60% }

.KS_ACC_item:hover .KS_ACC_btn_open { transform:rotate(90deg) }



/* HISTORY */
.HIS_list { text-align:center ; display:flex ; flex-wrap:wrap ; justify-content:center } 
.HIS_list > li { 
    position:relative ;
    border:solid 1px rgba(0,0,0,0.1) ; box-sizing:border-box ; background-color:#ffffff ; border-radius:0.4rem ;
    overflow:hidden ; width:23rem  ; margin:1.4rem }
.HIS_box , .HIS_box_head , .HIS_box_head b , .HIS_box_head span ,
.HIS_box_body , .HIS_box_body , .HIS_box_body > b , .HIS_box > a { display:block ; overflow:hidden } 
.HIS_box_head b , .HIS_box_head span , .HIS_box_body , .HIS_box_body > b , .HIS_box > a { width:100% ; text-align:center }
.HIS_box_head b { 
    background-color:#012d6b ; padding:0.4rem 0 ; 
    font-size:1.4rem ; color:#ffffff ; line-height:1.8rem ; font-weight:400 }
.HIS_box_head > span { height:11rem ; background-repeat:no-repeat ; background-size:95rem auto }
.HIS_box_body > b { 
    font-size:1.6rem ; line-height:2rem ; font-weight:500 ; word-break:keep-all ; 
    padding:0.8rem ; padding-bottom:1.2rem ; box-sizing:border-box }
.HIS_box > a { height:100% ; font-size:0 ; color:transparent ; position:absolute ; left:0 ; top:0 }

#y25 .HIS_box_head > span { background-image:url(../../history/KIIP_2025.jpg) }
#y24 .HIS_box_head > span { background-image:url(../../history/KIIP_2024.jpg) }
#y23 .HIS_box_head > span { background-image:url(../../history/KIIP_2023.jpg) }
#y22 .HIS_box_head > span { background-image:url(../../history/KIIP_2022.jpg) }
#y21 .HIS_box_head > span { background-image:url(../../history/KIIP_2021.jpg) }
#y20 .HIS_box_head > span { background-image:url(../../history/KIIP_2020.jpg) }
#y19 .HIS_box_head > span { background-image:url(../../history/KIIP_2019.jpg) }
#y18 .HIS_box_head > span { background-image:url(../../history/KIIP_2018.jpg) }
#y17 .HIS_box_head > span { background-image:url(../../history/KIIP_2017.jpg) }
#y16 .HIS_box_head > span { background-image:url(../../history/KIIP_2016.jpg) }
#y15 .HIS_box_head > span { background-image:url(../../history/KIIP_2015.jpg) }
#y14 .HIS_box_head > span { background-image:url(../../history/KIIP_2014.jpg) }

.HIS_list > li , .HIS_box_head b { transition:0.3s all }
.HIS_list > li:hover { border-color:#7ac142 }
.HIS_list > li:hover .HIS_box_head b { background-color:#7ac142 ; text-shadow:0 0 0.2rem rgba(0,0,0,0.2) ; }

.M12 .HIS_box_head > span { background-position:0 0 }
.M11 .HIS_box_head > span { background-position:-24rem 0 }
.M10 .HIS_box_head > span { background-position:-48rem 0 }
.M09 .HIS_box_head > span { background-position:-72rem 0 }

.M08 .HIS_box_head > span { background-position:0 -12rem }
.M07 .HIS_box_head > span { background-position:-24rem -12rem }
.M06 .HIS_box_head > span { background-position:-48rem -12rem }
.M05 .HIS_box_head > span { background-position:-72rem -12rem }

.M04 .HIS_box_head > span { background-position:0 -24rem }
.M03 .HIS_box_head > span { background-position:-24rem -24rem }
.M02 .HIS_box_head > span { background-position:-48rem -24rem }
.M01 .HIS_box_head > span { background-position:-72rem -24rem }




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

    
    /* ACCORDION */
    .KS_ACC { max-width:110rem ; margin:auto }
    .KS_ACC_header , .KS_ACC_header > p { overflow:hidden }
    .KS_ACC_header { margin-bottom:0.5rem }
    .KS_ACC_header > p { float:left ; max-width:80rem ; text-align:left ; padding-top:1rem }
    .KS_ACC_all { float:right ; margin:0 } 
    .KS_AB_title { padding:1.5rem 0.5rem 1.7rem 3rem ; font-size:2.4rem ; line-height:3.4rem } 
    .KS_ACC_all.close { margin-right:0.5rem }
    .ACCopen .KS_ACC_inner { padding:4rem 0 6rem 0 } 
    .KS_ACC_BOX  { max-width:110rem ; margin:auto }  
}