@charset "utf-8";

/* HEADER */
#KIIP_header , #KIIP_header > .inner_wrap , #KIIP_header_btn > b  { display:block ; overflow:hidden }
#KIIP_header , #KIIP_header > .inner_wrap { width:100% ; height:60px }
#KIIP_header { position:fixed ; left:0px ; top:0px ; z-index:80 ; min-width:300px  }
#KIIP_header > .inner_wrap , #KIIP_nav_btn > b { position:relative }

#KIIP_header_date , #KIIP_header_logo ,
#KIIP_header_btn, #KIIP_header_btn span , #KIIP_nav_btn span { display:block ; overflow:hidden ; position:absolute  }

#KIIP_header_date { width:0px ; height:0px ; font-size:0em ; line-height:0em ; opacity:0 }
#KIIP_header_logo , #KIIP_header_btn span , #KIIP_nav_btn span { font-size:0px ; text-indent:-9999px }
#KIIP_header_logo { 
    width:170px ; height:50px ; top:5px ; left:25px ;    
    background:url(../img/header_logo_MB.png) no-repeat 0px 0px ; background-size:170px 100px   }
#KIIP_header_btn , #KIIP_header_btn > b , #KIIP_nav_btn > b { width:30px ; height:30px }
#KIIP_header_btn > b , #KIIP_nav_btn > b { position:relative }
#KIIP_header_btn { right:25px ; top:15px }
#KIIP_header_btn span , #KIIP_nav_btn span { 
    transition:0.3s all ;
    width:26px ; height:4px ; border-radius:10px ; background-color:#89dc56 ; left:2px }
#KIIP_header_btn span:nth-child(1) { top:4px }
#KIIP_header_btn span:nth-child(2) { top:50% ; transform:translateY(-50%) }
#KIIP_header_btn span:nth-child(3) { bottom:4px }
 
.open #KIIP_header_btn span { background-color:#00aef0 ; left:50% }
.open #KIIP_header_btn span:nth-child(1) { top:50% ; transform:translate(-50%,-50%) rotate(45deg) }
.open #KIIP_header_btn span:nth-child(2) { opacity:0 }
.open #KIIP_header_btn span:nth-child(3) { bottom:50% ; transform:translate(-50%,50%) rotate(-45deg) }

.open #KIIP_header , .sticky #KIIP_header , .sub #KIIP_header { 
    background-color:#ffffff ; border-bottom:solid 1px rgba(0,0,0,0.1) ; transition:0.2s all 
}
.open #KIIP_header_logo , .sticky #KIIP_header_logo , .sub #KIIP_header_logo { background-position:0px -50px }

#KIIP_nav_btn , #KIIP_nav_btn > b , #KIIP_nav_btn span { display:block ; overflow:hidden }
#KIIP_nav_btn { background-color:#ffffff ; width:100% ; padding:15px 0px }
#KIIP_nav_btn > b { margin:auto }
#KIIP_nav_btn span { background-color:#d7d7d7 ; top:50% ; left:50% ; width:21px ; height:3px  }
#KIIP_nav_btn span:nth-child(1) { transform:translate(-50%,-50%) rotate(45deg) }
#KIIP_nav_btn span:nth-child(2) { transform:translate(-50%,-50%) rotate(-45deg) }
#KIIP_nav_btn:hover span , #KIIP_nav_btn:focus span { background-color:#012d6b }



/* NAV */
#KIIP_NAV {
    transition:0.3s left ; 
    position:fixed ; left:-100% ; top:0px ; z-index:79 ; padding-top:60px ; box-sizing:border-box ;     
    display:block ; width:100% ; height:100vh ; overflow:auto ; background-color:rgba(0,0,0,0.5) } 
.open #KIIP_NAV { left:0px }
#KIIP_NAV_theme , #KIIP_NAV_list , #KIIP_NAV_theme > b ,
#KIIP_NAV_list , .KIIP_NAV_li , .KIIP_NAV_li00 , .KIIP_NAV_sub { display:block ; overflow:hidden }
#KIIP_NAV_list { background-color:#ffffff }
#KIIP_NAV_theme > b , .KIIP_NAV_li00 { font-family:'NanumSquare',sans-serif ; font-weight:400 }
#KIIP_NAV_theme > b {
    background-color:#012d6b ; padding:15px 0px ;
    font-size:1.4em ; line-height:1.4em ; color:#ffffff ; text-align:center }
 
.KIIP_NAV_li00 { 
    padding:15px 0px ;   
    font-size:1.2em ; line-height:1.2em ; text-align:center ; font-weight:600 ; color:#111111 }
.KIIP_NAV_li00 br { display:none }
.KIIP_NAV_li { border-bottom:solid 1px rgba(0,0,0,0.1) }

#KIIP11 .li10 , #KIIP12 .li10 , #KIIP13 .li10 ,
#KIIP21 .li20 , #KIIP22 .li20 , #KIIP23 .li20 ,
#KIIP31 .li30 , #KIIP32 .li30 , #KIIP33 .li30 ,
#KIIP41 .li40 , #KIIP42 .li40 , #KIIP43 .li40 ,
#KIIP51 .li50 , #KIIP52 .li50 , #KIIP53 .li50 ,
.KIIP_NAV_li:hover { background-color:#f7f7f7 ; border-color:rgba(0,0,0,0.2) }

#KIIP11 .KIIP_NAV_li00.li10 , #KIIP12 .KIIP_NAV_li00.li10 , #KIIP13 .KIIP_NAV_li00.li10 ,
#KIIP21 .KIIP_NAV_li00.li20 , #KIIP22 .KIIP_NAV_li00.li20 , #KIIP23 .KIIP_NAV_li00.li20 ,
#KIIP31 .KIIP_NAV_li00.li30 , #KIIP32 .KIIP_NAV_li00.li30 , #KIIP33 .KIIP_NAV_li00.li30 ,
#KIIP41 .KIIP_NAV_li00.li40 , #KIIP42 .KIIP_NAV_li00.li40 , #KIIP43 .KIIP_NAV_li00.li40 ,
#KIIP51 .KIIP_NAV_li00.li50 , #KIIP52 .KIIP_NAV_li00.li50 , #KIIP53 .KIIP_NAV_li00.li50 ,
.KIIP_NAV_li:hover .KIIP_NAV_li00 , .KIIP_NAV_li00:focus { background-color:#7ac142 ; color:#ffffff }
.KIIP_NAV_sub , .KIIP_NAV_sub li { text-align:center }
.KIIP_NAV_sub { padding:10px ; border-top:solid 1px #d7d7d7 }
.KIIP_NAV_sub li { display:inline-block ; margin:7px }
.KIIP_NAV_s { 
    display:block ; overflow:hidden ; font-size:1em ; line-height:1.2em ; 
    border:solid 1px #d7d7d7 ; padding:7px 25px ; border-radius:50px }
.KIIP_NAV_sub , .KIIP_NAV_s { border-color:rgba(0,0,0,0.1) }  

#KIIP11 .li11 , #KIIP12 .li12 , #KIIP13 .li13 ,
#KIIP21 .li21 , #KIIP22 .li22 , #KIIP23 .li23 ,
#KIIP31 .li31 , #KIIP32 .li32 , #KIIP33 .li33 ,
#KIIP41 .li41 , #KIIP42 .li42 , #KIIP43 .li43 ,
#KIIP51 .li51 , #KIIP52 .li52 , #KIIP53 .li53 ,
.KIIP_NAV_s:hover , .KIIP_NAV_s:focus { background-color:#ffffff ; color:#222222 ; border-color:rgba(0,0,0,0.2) }
.KIIP_NAV_s > br { display:none }



/* ASIDE */
#KIIP_aside , .KIIP_aside_btn { transition:0.3s all }
#KIIP_aside , #KIIP_aside ul , #KIIP_aside li , #KIIP_aside a , .KIIP_aside_btn { display:block ; overflow:hidden }
#KIIP_aside , #KIIP_aside ul , #KIIP_aside li , .KIIP_aside_btn { width:70px ; height:70px } 
#KIIP_aside { position:fixed ; right:0px ; bottom:0px ; z-index:79 ; background:none ; opacity:0 }
#KIIP_aside li { display:none } 
#KIIP_aside li:last-child { display:block } 
.KIIP_aside_btn  { background:url(../img/icon_aside.png) no-repeat left bottom ; box-sizing:inherit ; opacity:0.8 }
.KIIP_aside_btn:hover , #KIIP_aside.sticky { opacity:1 }
#KIIP_aside_btn5 { font-size:0em ; text-indent:-9999px ; background-color:#012d6b } 
 



/* FOOTER */
#KIIP_footer , #KIIP_footer .inner_wrap , #KIIP_footer_nav , .KIIP_footer_btn , 
#KIIP_footer_copy , #KIIP_footer_copy > span  { display:block ; overflow:hidden }
#KIIP_footer { background-color:#333333 ; padding:40px 20px  }
#KIIP_footer_nav { border-bottom:solid 1px rgba(255,255,255,0.1) ; padding-bottom:20px ; margin-bottom:30px ; text-align:center  }
#KIIP_footer_nav > li { display:inline-block ; margin:10px 5px }
.KIIP_footer_btn , #KIIP_footer_copy > span { 
    font-size:0.8em ; line-height:1em ; color:#ffffff ; color:rgba(255,255,255,0.8) ; font-weight:200 ; letter-spacing:0px }
.KIIP_footer_btn { padding:7px 15px ; border:solid 1px rgba(255,255,255,0.1) ; transition:0.3s all ; box-sizing:border-box ; border-radius:4px  }
.KIIP_footer_btn:hover { color:#ffffff ; background-color:rgba(0,0,0,0.3) ; border-color:rgba(255,255,255,0.2) }
#KIIP_footer_copy > span { font-size:0.9em ; line-height:1.4em ; text-align:center ; word-break:keep-all ; margin-bottom:10px }



/* ETC */
.KS_lang { font-size:inherit ; line-height:inherit ; font-weight:inherit ; color:inherit ; font-family:sans-serif }



  
/* PC **********/
@media all and (min-width:1000px){
 
    /* HEADER */
    #KIIP_header { min-width:1300px ; background:url(../img/icon_point_block10.png) repeat-x 0px 90px }
    #KIIP_header , #KIIP_header > .inner_wrap { height:90px } 
    .open #KIIP_header , #KIIP_GTN:hover #KIIP_header , #KIIP_GTN:hover .open #KIIP_header { 
        height:21em ; background-color:#ffffff ; box-shadow:0px 0px 3px #000000 } 
    .sticky #KIIP_header , .sub #KIIP_header { background-color:#ffffff }

    #KIIP_header > .inner_wrap { width:1300px ; margin:auto }  
    #KIIP_header_logo , #KIIP_header_date { 
        background:none ; background-image:url(../img/header_logo.png) ; background-repeat:no-repeat ; height:50px ; top:20px }
    #KIIP_header_logo { background-position:left top ; width:230px ; left:20px }
    #KIIP_header_date {
        background-position:right top ; width:170px ; opacity:1 ; right:20px ; 
        display:block ; overflow:hidden ; font-size:0px ; text-indent:-9999px }
    
    .sticky #KIIP_header_logo , .sub #KIIP_header_logo ,
    .open #KIIP_header_logo , #KIIP_GTN:hover .open #KIIP_header_logo , #KIIP_GTN:hover #KIIP_header_logo { background-position:left bottom }
    .sticky #KIIP_header_date , .sub #KIIP_header_date ,
    .open #KIIP_header_date , #KIIP_GTN:hover .open #KIIP_header_date , #KIIP_GTN:hover #KIIP_header_date { background-position:right bottom }
 
    #KIIP_header_btn { top:30px ; right:210px ; width:0px ; height:0px ; opacity:0 }
    #KIIP_header_btn:focus { width:30px ; height:30px ; opacity:1 } 
    
    
    
    /* NAV */  
    #KIIP_NAV , #KIIP_NAV_theme , #KIIP_NAV_theme > b { background:none }
 
    #KIIP_NAV , .open #KIIP_NAV , #KIIP_NAV , .open #KIIP_NAV{   
        width:100% ; min-width:1300px ; max-width:1300px ; height:1px ; overflow:visible ; 
        position:fixed ; top:0px ; left:50% ; z-index:91 ; padding:0px ; 
        padding:0px ; margin:0px ; transform:translateX(-50%) 
    }
    #KIIP_NAV > .inner_wrap { width:55% ; max-width:800px ; margin-left:430px }
 
    .KIIP_NAV_li { padding:0px ; margin:0px ; float:left ; width:20% } 
    #KIIP_NAV_theme { width:260px ; position:fixed ; left:50% ; top:90px ; margin-left:-630px   }
    #KIIP_NAV_theme > b { color:#012d6b ; font-size:1.4em ; line-height:1.2em ; text-align:left ; word-break:keep-all ; font-weight:600   } 
    
    #KIIP_NAV_list , .KIIP_NAV_li , .KIIP_NAV_li00 { background:none ; border:0px }
    #KIIP_NAV_list { margin-bottom:30px }
    .KIIP_NAV_li00 { 
        transition:none ; 
        font-family:'Noto Sans KR',sans-serif ; font-size:0.9em ; line-height:1.2em ; font-weight:500 ;
        color:#ffffff ; color:rgba(255,255,255,0.8) ; letter-spacing:0.5px ;
        padding:36px 0px ; border-bottom:solid 2px rgba(0,0,0,0)  }
 
    .KIIP_NAV_sub , .KIIP_NAV_sub li , .KIIP_NAV_s { display:block ; overflow:hidden ; padding:0px ; margin:0px ; border:0px ; border-radius:0px }
    .KIIP_NAV_s , .open .KIIP_NAV_s , #KIIP_GTN:hover .open .KIIP_NAV_s , #KIIP_GTN:hover .KIIP_NAV_s { 
        background:none ; 
        padding:15px 0px ; text-align:center ; color:#444444 ; color:rgba(0,0,0,0.8) ; font-size:0.9em }
    .KIIP_NAV_s { border-bottom:solid 1px rgba(0,0,0,0) ; width:90% ; margin:auto ; transition:0.3s all }
    
    #KIIP_nav_btn { width:30px ; height:30px ; padding:0px ; margin:auto ; background:none } 
    #KIIP_nav_btn span { color:#d1d1d1 ; width:20px ; height:2px }
 
    #KIIP11 .KIIP_NAV_li00.li10 , #KIIP12 .KIIP_NAV_li00.li10 , #KIIP13 .KIIP_NAV_li00.li10 ,
    #KIIP21 .KIIP_NAV_li00.li20 , #KIIP22 .KIIP_NAV_li00.li20 , #KIIP23 .KIIP_NAV_li00.li20 ,
    #KIIP31 .KIIP_NAV_li00.li30 , #KIIP32 .KIIP_NAV_li00.li30 , #KIIP33 .KIIP_NAV_li00.li30 ,
    #KIIP41 .KIIP_NAV_li00.li40 , #KIIP42 .KIIP_NAV_li00.li40 , #KIIP43 .KIIP_NAV_li00.li40 ,
    #KIIP51 .KIIP_NAV_li00.li50 , #KIIP52 .KIIP_NAV_li00.li50 , #KIIP53 .KIIP_NAV_li00.li50 ,
    .KIIP_NAV_li:hover , .KIIP_NAV_li:hover .KIIP_NAV_li00 , .KIIP_NAV_li00:focus ,
    .KIIP_NAV_s:hover , .KIIP_NAV_s:focus { background:none ; color:#000000 } 
    .KIIP_NAV_s:hover { border-color:rgba(0,0,0,0.2) }

    #KIIP_NAV_theme , .KIIP_NAV_sub , #KIIP_nav_btn { height:0px ; opacity:0 ; display:none }    
    
    #KIIP11 .li10 , #KIIP12 .li10 , #KIIP13 .li10 ,
    #KIIP21 .li20 , #KIIP22 .li20 , #KIIP23 .li20 ,
    #KIIP31 .li30 , #KIIP32 .li30 , #KIIP33 .li30 ,
    #KIIP41 .li40 , #KIIP42 .li40 , #KIIP43 .li40 ,
    #KIIP51 .li50 , #KIIP52 .li50 , #KIIP53 .li50 ,
    .sticky .KIIP_NAV_li00 , .sub .KIIP_NAV_li00 ,
    .open .KIIP_NAV_li00 , #KIIP_GTN:hover .open .KIIP_NAV_li00 , #KIIP_GTN:hover .KIIP_NAV_li00 {  background:none ; color:#222222 } 
 
    #KIIP11 .li10 , #KIIP12 .li10 , #KIIP13 .li10 ,
    #KIIP21 .li20 , #KIIP22 .li20 , #KIIP23 .li20 ,
    #KIIP31 .li30 , #KIIP32 .li30 , #KIIP33 .li30 ,
    #KIIP41 .li40 , #KIIP42 .li40 , #KIIP43 .li40 ,
    #KIIP51 .li50 , #KIIP52 .li50 , #KIIP53 .li50 ,
    .KIIP_NAV_li:hover .KIIP_NAV_li00 , .KIIP_NAV_li:hover .KIIP_NAV_li00 { background:none ; border-color:#012d6b ; color:#012d6b }
 
    #KIIP_GTN:hover .open #KIIP_NAV_theme , #KIIP_GTN:hover .open .KIIP_NAV_sub , #KIIP_GTN:hover .open #KIIP_nav_btn ,
    #KIIP_GTN:focus .open #KIIP_NAV_theme , #KIIP_GTN:focus .open .KIIP_NAV_sub , #KIIP_GTN:focus .open #KIIP_nav_btn ,
    #KIIP_GTN:hover #KIIP_NAV_theme , #KIIP_GTN:hover .KIIP_NAV_sub , #KIIP_GTN:hover #KIIP_nav_btn ,
    #KIIP_GTN:focus #KIIP_NAV_theme , #KIIP_GTN:focus .KIIP_NAV_sub , #KIIP_GTN:focus #KIIP_nav_btn ,
    .open #KIIP_NAV_theme , .open .KIIP_NAV_sub , .open #KIIP_nav_btn { height:auto ; opacity:1 ; display:block ; transition-delay:0.2s  }
 
    #KIIP_header , #KIIP_NAV_theme , .KIIP_NAV_sub , #KIIP_nav_btn { transition:0.3s all } 
    #KIIP_GTN:hover #KIIP_nav_btn , #KIIP_GTN:focus #KIIP_nav_btn { display:none }   
    .KIIP_NAV_sub { box-sizing:border-box ; border-left:solid 1px #d7d7d7 ; border-color:rgba(0,0,0,0.05) ; margin-top:20px  }
    .KIIP_NAV_li.li10 .KIIP_NAV_sub { border:0px }
 
    
    
    /* ASIDE */
    #KIIP_aside , #KIIP_aside ul { width:70px ; height:350px }
    #KIIP_aside { background-color:#ffffff } 
    #KIIP_aside li { display:block }  
    #KIIP_aside_btn1 { background-position:0px 0px }
    #KIIP_aside_btn2 { background-position:0px -70px }
    #KIIP_aside_btn3 { background-position:0px -140px }
    #KIIP_aside_btn4 { background-position:0px -210px }
    .KIIP_aside_btn  { opacity:0.7 }
    .KIIP_aside_btn > span { 
        display:block ; overflow:hidden ; 
        font-size:0.7em ; color:#000000 ; text-align:center ; padding-top:50px ; height:70px ; 
        box-sizing:border-box ; border:solid 1px rgba(0,0,0,0.1) ; border-right:0px ; border-bottom:0px  }
    #KIIP_aside_btn5 > span { border:0px }
    #KIIP_aside_btn5 { opacity:1 }
    #KIIP_aside_btn5:hover { background-color:#000000  }
 
    

    /* FOOTER */
    #KIIP_footer { padding:45px 0px}
    #KIIP_footer .inner_wrap { width:1100px ; margin:auto }
    #KIIP_footer_nav , #KIIP_footer_copy { padding:0px ; margin:0px }
    #KIIP_footer_nav { float:right }
    #KIIP_footer_copy { float:left }
    #KIIP_footer_copy > span { text-align:left ; padding-top:3px ; margin-bottom:3px  }
    #KIIP_footer_copy > span:nth-child(2) { margin-bottom:10px } 
    #KIIP_footer_nav { border:0px ; margin:0px }
    #KIIP_footer_nav > li { margin:0px 3px ; text-align:right }
    #KIIP_footer_nav > li:last-child { margin-right:0px }
 	 
} 


/* PC **********/
@media all and (min-width:1200px){
    /* NAV */
    #KIIP_NAV > .inner_wrap { width:800px  ; margin-left:300px }
    
}