@charset "utf-8";

/* VISUAL */
#KS_visual { min-height:200px }
.KS_PP_btn , .KS_visual_tag { display:none }
.KS_visual_title { margin:0px }



/* LIST */
.HIS_list , .HIS_list > li , .HIS_box , .HIS_box_head , .HIS_box_head > b , .HIS_box_head > span , 
.HIS_box_body { display:block ; overflow:hidden}
.HIS_list , .HIS_box_body , .HIS_box_body > b { text-align:center  }
.HIS_list > li { display:inline-block ; margin:15px 10px }
.HIS_list > li , .HIS_box { width:230px }
.HIS_box_head , .HIS_box_body , .HIS_box > a > span { border-radius:4px }
.HIS_box_head { background-color:#012d6b ; margin-bottom:3px }
.HIS_box_head > b , .HIS_box_head > span { width:100% ; text-align:center }
.HIS_box_head > b { font-size:0.8em ; line-height:1em ; color:#ffffff ; font-weight:400 ; padding:10px 0px }
.HIS_box_head > span { height:110px ; background-repeat:no-repeat ; background-position:0px 0px }

.HIS_box { position:relative }
.HIS_box > a { position:absolute ; left:0px ; top:0px ; width:100% ; height:100% }

#Y2014 .HIS_box_head > span { background-image:url(../history/KIIP_2014.jpg) }
#Y2015 .HIS_box_head > span { background-image:url(../history/KIIP_2015.jpg) }
#Y2016 .HIS_box_head > span { background-image:url(../history/KIIP_2016.jpg) }
#Y2017 .HIS_box_head > span { background-image:url(../history/KIIP_2017.jpg) }
#Y2018 .HIS_box_head > span { background-image:url(../history/KIIP_2018.jpg) }
#Y2019 .HIS_box_head > span { background-image:url(../history/KIIP_2019.jpg) }
#Y2020 .HIS_box_head > span { background-image:url(../history/KIIP_2020.jpg) }
#Y2021 .HIS_box_head > span { background-image:url(../history/KIIP_2021.jpg) }

.M12 .HIS_box_head > span { background-position:0px 0px }
.M11 .HIS_box_head > span { background-position:-240px 0px }
.M10 .HIS_box_head > span { background-position:-480px 0px }
.M09 .HIS_box_head > span { background-position:-720px 0px }

.M08 .HIS_box_head > span { background-position:0px -120px }
.M07 .HIS_box_head > span { background-position:-240px -120px }
.M06 .HIS_box_head > span { background-position:-480px -120px }
.M05 .HIS_box_head > span { background-position:-720px -120px }

.M04 .HIS_box_head > span { background-position:0px -240px }
.M03 .HIS_box_head > span { background-position:-240px -240px }
.M02 .HIS_box_head > span { background-position:-480px -240px }
.M01 .HIS_box_head > span { background-position:-720px -240px }

.HIS_box_body , .HIS_box_body > b , .HIS_box > a > span { transition:0.3s all }
.HIS_box_body {  
    width:100% ; box-sizing:border-box ; border:solid 1px rgba(0,0,0,0.1) ; padding:7px 1px ;
    background-color:rgba(0,0,0,0.05) }
.HIS_box_body > b { font-size:0.9em ; line-height:1.4em ; color:#444444 ; word-break:keep-all ; letter-spacing:-0.5px }
.HIS_box_body , .HIS_box_body > b { vertical-align:middle }
.HIS_list > li:hover .HIS_box_body {  background-color:#012d6b }
.HIS_list > li:hover .HIS_box_body > b { color:#ffffff }

.HIS_box > a , .HIS_box > a > span { display:block ; overflow:hidden  }
.HIS_box > a > span { 
    font-size:0em ; text-indent:-9999px ; opacity:0 ; 
    width:100% ; height:142px ; background:url(../img/icon_main_more.png) no-repeat 50% 55% rgba(0,0,0,0.6) }
.HIS_box > a:focus > span ,
.HIS_list > li:hover .HIS_box > a > span { opacity:1  }

#Y2014 .HIS_box_body , #Y2016 .HIS_box_body  { min-height:3.6em }
#Y2016 .HIS_box_body { padding-left:15px ; padding-right:15px }



/* PC **********/
@media all and (min-width:1000px){
 	
    /* VISUAL */
    #KS_visual { height:250px ; margin-bottom:70px  }
    .KS_visual_title { padding-top:40px }
    .KS_PP_btn { top:63% }
    
    
     
}