@charset "utf-8";
 
/* VISUAL */ 
#KM_main_visual , #KM_MV_PP { display:block ; overflow:hidden }
#KM_main_visual {
    position:relative ; 
    width:100% ; height:500px ; max-height:1100px ; 
    background:url(../img/KM_main_visual.jpg) no-repeat center center ; background-size:cover }
#KM_main_visual > video , #KM_main_visual_btn , #KM_MV_PP { position:absolute }
#KM_main_visual > video { 
    width:854px ; height:480px ; padding-top:50px ; 
    left:50% ; top:50% ; transform:translate(-50%,-50%) }

#KM_main_visual_btn { display:none }
#KM_main_visual_btn , #KM_MV_PP { opacity:0.3 ; transition:opacity 0.3s }
#KM_MV_PP {
    left:20px ; bottom:20px ; box-sizing:border-box ;  ;   
    width:20px ; height:20px ; border-radius:20px ; 
    border:solid 2px rgba(256,256,256,1) ;
    font-size:0px ; text-indent:-9999px ;
    background:none ;
    background:url(../img/video_icon_PP.png) no-repeat -22px -2px ; background-size:40px 20px 
}
#KM_MV_PP.play { background-position:-1px -2px }
#KM_MV_PP:hover { opacity:0.7 } 


/* HP LIST */
#KUM_hp , #KUM_hp li , #KUM_hp a , #KUM_hp a > span { display:block ; overflow:hidden }
#KUM_hp { border-top:solid 1px #f07828 }
#KUM_hp li { 
    float:left ; width:33.3% ;
    background-position:center center ; background-repeat: no-repeat ; background-size:350px 233px ;
     }
#KUM_hp a {  width:100% ; height:160px ; position:relative ; background-color:rgba(0,0,0,0.5) }
#KUM_hp a > span { 
    width:80% ; margin:auto ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    font-size:1.2em ; line-height:1.4em ; font-weight:600 ; color:#ffffff ; text-align:center ; 
    word-break:keep-all ; font-family:'NanumSquare', sans-serif ;   
}
#KUM_hp li:nth-child(1) { background-image:url(../img/KM_main_HPimgAA.jpg) }
#KUM_hp li:nth-child(2) { background-image:url(../img/KM_main_HPimgGR.jpg) ; width:33.4% }
#KUM_hp li:nth-child(3) { background-image:url(../img/KM_main_HPimgAS.jpg) }

#KUM_hp , #KUM_hp li , #KUM_hp * { transition:all 0.3s }
#KUM_hp li:hover { background-size:450px 300px}
#KUM_hp li:hover a { background-color:rgba(0,0,0,0.8) }



/* INTRO */
#KUM_intro , #KUM_news , #KUM_intro ul , .KUM_intro_box , .KUM_title_h2 ,
.KUM_intro_box > h3 , .KUM_intro_box > p , .KUM_intro_box > p > a { display:block ; overflow:hidden ; text-align:center } 
#KUM_intro , #KUM_news { padding:80px 25px ; padding-bottom:40px  }
.KUM_title_h2 { 
    font-size:1.8em ; line-height:1.6em ; font-weight:600 ; color:#f07828 ; 
    word-break:keep-all ; font-family:'NanumSquare', sans-serif ; letter-spacing:-0.5px ;
    margin-bottom:20px 
}
#KUM_intro ul { text-align:center }
#KUM_intro li { width:150px ; display:inline-block ; margin:0px 5px ; margin-bottom:40px  }
.KUM_intro_box > h3 , .KUM_intro_box > p {  margin-bottom:20px }
.KUM_intro_box > h3 {
    font-size:1.6em ; line-height:1.2em ; font-weight:800 ; color:#111111 ; 
    word-break:keep-all ; font-family:'NanumSquare', sans-serif ; letter-spacing:-0.5px ; 
}
.KUM_intro_box > p > br { display:none }
.KUM_intro_box > p { font-size:0.9em ; line-height:1.4em ; height:4.2em  ; color:#444444 ; word-break:keep-all  }
.KUM_intro_box > a { 
    display:inline-block ; padding:8px 20px ; border-radius:30px ; border:solid 1px #f07828 ; 
    font-size:0.8em ; line-height: 1em ; transition:all 0.2s  }
.KUM_intro_box > a:hover { background-color:#f07828 ; color:#ffffff } 
 

/* NEWS */
#KUM_news { background-color:#fafafa }
#KUM_news .KUM_title_h2 { color:#111111 }
#KUM_news_list , #KUM_news_list li , .KUM_news_box , 
.KUM_news_title , .KUM_news_more , .KUM_news_more > span { display:block ; overflow:hidden ; text-align:center }
#KUM_news_list li , .KUM_news_box , .KUM_news_img , .KUM_news_img img { width:300px }
#KUM_news_list li { display:inline-block ; margin:5px ; margin-bottom:40px }
.KUM_news_box { position:relative }
.KUM_news_img , .KUM_news_img img { height:206px }
.KUM_news_img { margin:auto }
.KUM_news_title { padding:5px ; padding-top:15px ; line-height:1.4em ; height:8em }
.KUM_news_title > b , .KUM_news_title > span { line-height:1.4em ; word-break:keep-all  }
.KUM_news_title > b { 
    display:inline-block ; margin-right:5px ; margin-top:4px ; 
    background-color:#f07828 ; color:#ffffff ; padding:2px 10px ; border-radius:20px ; font-size:0.8em }
.KUM_news_title > span {
    font-size:1.3em ; font-weight:600 ; color:#111111  ; 
    word-break:keep-all ; font-family:'NanumSquare', sans-serif ; letter-spacing:-0.5px }
.KUM_news_more { 
    opacity:0 ; transition:opacity 0.3s ;  
    position:absolute ; left:0px ; top:0px ; box-sizing:border-box ; padding-top:80px ;
    width:100% ; height:100% ; background-color:rgba(0,0,0,0.5) }
.KUM_news_more > span {
    width:60px ; height:60px ; margin:auto ; border-radius:30px ; 
    font-size:0px ; text-indent:-9999px ;  
    background:url(../img/KM_main_news_more.png) no-repeat center center rgba(0,0,0,0.5) }
.KUM_news_more:hover { opacity:1 }


/* TV */
#KUM_tv , #KUM_tv_box , #KUM_tv_page , #KUM_tv_page button , .KUM_tv_li > .KM_inner ,
.KUM_tv_li , .KUM_tv_img , .KUM_tv_img > img , .KUM_tv_txt , 
.KUM_tv_link , .KUM_tv_link > span { display:block ; overflow:hidden ; text-align:center } 

#KUM_tv { 
    padding:60px 25px ; position:relative ; 
    background:url(../img/KM_main_tv_bg.jpg) no-repeat center center ; background-size:cover } 
#KUM_tv .KUM_title_h2 { color:#ffffff }
#KUM_tv_box { max-width:620px ; margin:auto ; margin-bottom:20px   } 
#KUM_tv_box , #KUM_tv_list , .KUM_tv_li , .KUM_tv_img , .KUM_tv_img > img { width:100% }
#KUM_tv_list { position:relative ; height:200px }
.KUM_tv_li { position:absolute ; top:0px }
.KUM_tv_img { margin-bottom:15px } 
.KUM_tv_txt {
    font-size:1.2em ; line-height:1.4em  ; font-weight:400 ; color:#ffffff  ; 
    word-break:keep-all ; font-family:'NanumSquare', sans-serif ; letter-spacing:-0.5px}
#KUM_tv_PN { display:none }

#KUM_tv_page li { display:inline-block ; margin:0px 10px }
#KUM_tv_page button { 
    width:12px ; height:12px ; border:solid 2px #ffffff ; opacity:0.5 ; transition:opacity 0.2s ; 
    font-size:0px ; text-indent:-9999px ; background:none ; border-radius:20px }
#KUM_tv_page button:hover { opacity:1  }
#KUM_tv_page li.active button { width:30px ; opacity:1 ; background-color:#ffffff }

.KUM_tv_li > .KM_inner , .KUM_tv_link { width:100% ; height:100% }
.KUM_tv_li > .KM_inner { position:relative }
.KUM_tv_link { position:absolute ; left:0px ; top:0px ; padding-bottom:100px ; box-sizing:border-box }
.KUM_tv_link > span , #KUM_tv_PN > button { background-image:url(../img/KM_main_video.png) }
.KUM_tv_link > span { 
    opacity:0.5 ; transition:opacity 0.2s ; 
    position:absolute ; left:50% ; top:40% ; transform:translate(-50%,-50%)   ; 
    width:90px ; height:90px ; font-size:0px ; text-indent:-9999px ; border-radius:50px ; margin:auto ;   
    background-repeat:no-repeat ; background-position:5px 5px ; background-color:rgba(0,0,0,0.7)    
}
.KUM_tv_link:hover > span { opacity:0.8 }

#KUM_tv_PN { 
    display:none ; 
    position:absolute ; left:50% ; top:50% ; z-index:60 ; 
    width:100% ; max-width:760px ; transform:translate(-50%,-50%) }
#KUM_tv_PN > button { 
    width:40px ; height:40px ; font-size:0px ; text-indent:-9999px ; background-color:rgba(0,0,0,0) ; 
    opacity:0.5 ; transition:opacity 0.2s  }
#KUM_tv_PN > button:hover { opacity:1 }
#KUM_tv_prev { float:left ; background-position:-80px 0px  }
#KUM_tv_next { float:right ; background-position:-80px -40px  }


/* SNS */
#KUM_SNS , #KUM_SNS_list , #KUM_SNS_list a , #KUM_SNS_list span , #KUM_SNS_list b { 
    display:block ; overflow:hidden ; text-align:center  }
#KUM_SNS , #KUM_culture { padding:60px 0px ; padding-bottom:40px }
#KUM_SNS > .KUM_title_h2  { color:#111111 }
#KUM_SNS_list li { display:inline-block ; width:100px ; text-align:center ; margin-bottom:20px }
#KUM_SNS_list span { 
    width:100px ; height:80px ; margin:auto ; margin-bottom:5px ;  
    background:url(../img/KM_main_SNS.png) no-repeat -300px 50%}
#KUM_SNS_list b { font-size:0.8em ; line-height:1.4em ; color:#444444 ; word-break:keep-all }
#KUM_SNS_list li:nth-child(1) span { background-position:0px 50%}
#KUM_SNS_list li:nth-child(2) span { background-position:-100px 50%}
#KUM_SNS_list li:nth-child(3) span { background-position:-200px 50%} 


/* CULTURE */
#KUM_culture , #KUM_culture_list , .KUM_CL_box , 
.KUM_CL_img , .KUM_CL_title , .KUM_CL_more { display:block ; overflow:hidden ; text-align:center }
#KUM_culture { background:url(../img/KM_main_culture_bg.jpg) no-repeat center center #444444 ; background-size:cover }
#KUM_culture > .KUM_title_h2 { font-size:0px ; text-indent:-9999px ; padding:0px ; margin:0px ; height:0px ; overflow:hidden }
#KUM_culture_list > li { display:inline-block ; width:150px ; margin:5px 0px ; margin-bottom:20px }
.KUM_CL_box { position:relative } 
.KUM_CL_img {
    transition:opacity 0.3s ;
    border-radius:100px ; margin:auto ; margin-bottom:20px ; opacity:0.8 ; 
    width:120px ; height:120px ; font-size:0px ; text-indent:-9999px ;
    background:url(../img/KM_main_culture.png) no-repeat 0px 0px #f07828 }
#KUM_culture_list > li:nth-child(2) .KUM_CL_img { background-position:-120px 0px }
#KUM_culture_list > li:nth-child(3) .KUM_CL_img { background-position:-240px 0px }
.KUM_CL_title { font-size:1.4em ; line-height:1.2em  ; color:#ffffff ; font-weight:600 ; margin-bottom:15px }
.KUM_CL_more { 
    position:absolute ; top:0px ; left:0px ;
    width:100% ; height:100% ;
    font-size:0px ; text-indent:-9999px  
}
#KUM_culture_list li:hover .KUM_CL_img , #KUM_culture_list li:hover .KUM_CL_txt { opacity:1 }


/* PC ********** */
@media all and (min-width:1024px){
  
    /* VISUAL */  
    #KM_main_visual { height:100vh }
    #KM_main_visual_btn {
    display:block ; overflow:hidden ; left:50% ; bottom:20px ; margin-left: -15px ; 
    width:30px ; height:50px ;  
    background:url(../img/KM_icon_mouse.png) no-repeat center center ;
    font-size:0px ; text-indent:-9999px }
    #KM_main_visual_btn:hover { opacity:0.7 }    
    

    
    /* HP LIST */
    #KUM_hp { position:relative }
    #KUM_hp .point_bar { height:40px ; bottom:0px }
    #KUM_hp li { background-size:640px 427px }
    #KUM_hp a { height:200px }
    #KUM_hp li:hover { background-size:700px 467px }
 
    
    /* INTRO */
    #KUM_intro , #KUM_news { padding:80px 0px ; width:1100px ; margin:auto ; position:relative }
    #KUM_intro .point_bar:first-child { top:0px }
    #KUM_intro .point_bar:last-child  { bottom:0px ; height:40px }
    .KUM_title_h2 { margin-bottom:30px }
    #KUM_intro ul { padding-top:30px }
    #KUM_intro li { 
        width:275px ; margin:0px ; float:left ;
        background:url(../img/KM_main_intro_bar.gif) no-repeat right center  }
    #KUM_intro li:last-child { background:none }
    .KUM_intro_box > p > br { display:block }
    .KUM_intro_box > p { height:auto }    
    
    
    /* NEWS */
    #KUM_news { width:100% ; padding-bottom:30px }
    .KUM_news_title { height:6em }
    #KUM_news .point_bar { top:0px }
    #KUM_news_list { width:1122px ; margin:auto }
    #KUM_news_list li , .KUM_news_box , .KUM_news_img , .KUM_news_img img { width:350px }
    #KUM_news_list li { margin:0px 12px ; margin-bottom:50px ; float:left }
    .KUM_news_img , .KUM_news_img img { height:240px }
    .KUM_news_more { padding-top:90px }
    
    
    /* TV */
    #KUM_tv_PN { display:block }
    
    
    /* SNS */
    #KUM_SNS { padding:60px 0px }
    #KUM_SNS_list { width:880px ; margin:auto }
    #KUM_SNS_list li { 
        opacity:0 ; transition:opacity 0.5s ;
        width:220px ; display:block ; float:left ; margin:0px ;
        background:url(../img/KM_main_SNS_bar.gif) no-repeat 100% 25px  }
    #KUM_SNS_list li:last-child { background:none }
    
    .active #KUM_SNS_list li  { opacity:1 ; transition-delay:0.6s }
    .active #KUM_SNS_list li:nth-child(1) { transition-delay:0.1s }
    .active #KUM_SNS_list li:nth-child(2) { transition-delay:0.3s }
    .active #KUM_SNS_list li:nth-child(3) { transition-delay:0.5s }
    .active #KUM_SNS_list li:nth-child(4) { transition-delay:0.7s }
    .active #KUM_SNS_list li:nth-child(5) { transition-delay:0.9s }
    .active #KUM_SNS_list li:nth-child(6) { transition-delay:1.1s }
    
    
    /* CULTURE */
    #KUM_culture { padding:60px 0px }
    #KUM_culture_list { width:1080px ; margin:auto } 
    #KUM_culture_list > li { margin:0px ; float:left ; width:360px }
    #KUM_culture_list > li { display:block } 
    
    
    
    
}