@charset 'utf-8';
/* 해상도별 콘텐츠 구분 */
.mo_c, .tb_c, .pc_c {display: none;}

/* 모바일까지 ~767px */
@media screen and (max-width: 767px) {
    .mo_c {display: block;}
    #m_chk:checked ~ .kcb_logo {left: 25px;}
    #m_chk:checked ~ .kcb_logo a {background-image: url('../images/logo.png');}
    .v_img {height: 100%; background: url('../images/m_bg1.jpg') center center; background-size: cover;}

    #footer{padding: 30px 0 60px;}
    .ft_gnb {display: none;}
    .nia img {width: 150px; }
    .ft_menu {padding: 10px 0;}
    .ft_menu a {float: left; padding: 0 10px 0 0;  color: #b0b0b0; font-size: .9em;}
    .ft_menu a:nth-of-type(4) {clear: both; }
    .ft_info_menu {font-size: 0.8em;}
    .ft_info_menu dl { font-size: .9em;}
    .ft_logos {margin-top: 30px;}
    .wa {width: 80px; margin-right: 30px;}
    .msict {width: 160px;}

    .modal_btns {display: none;}
    .modal {display: none;}

}
/* 태블릿 부터 768px~ */
@media screen and (min-width: 768px) {
    .tb_c {display: block;}
    .ft_menu a {display: inline-block; padding-right: 30px; text-align: center; line-height: 2.5; color: #b0b0b0; font-size: 1.1em;}
    
}
/* 태블릿만 768px ~ 1279px */
@media screen and (min-width: 768px) and (max-width: 1279px) {
    #footer{padding: 0;}
    .ft_gnb {padding: 60px 0;}
    .ft_depth_wrap {width: 650px; }
    .ft_depth1:nth-child(4) {clear: both;}
    .ft_depth1 > a {padding: 0; }
    .ft_depth2 {}

    .ft2_info {padding: 40px 0;}
    .ft_menu {padding: 0.9em 0;}

    .ft_info_menu dt:nth-of-type(4) {clear: none;}
    .ft_info_menu dd:nth-of-type(3)::after {content: '|'; margin: 0 0.5em;}
    .ft_logos {position: absolute; right: 0; top: 0; margin-top: 0;}
    .wa {width: 70px; margin-right: 30px;}
    .msict {width: 130px;}
    .kcb_m_wrap {width: 70%; right: -70%;}
    .modal_btns {display: none;}
    .modal {display: none;}
}
/* pc 1280px~ */
@media screen and (min-width: 1280px) {
    .tb_c {display: none;}
    .pc_c {display: block;}
    /*헤더영역*/
    #kcb_hd {
        min-width: 1200px;
        transition: background-color 0.5s;
    }
    .kcb_logo {
        position: absolute; 
        left: 5%; 
        top: 0; 
        padding: 30px 0;
    }
    .kcb_logo a {
        width: 187px; 
        height: 40px;
    }
    #kcb_gnb {
        display: block;
        height: 100px;
        margin: auto; 
        text-align: center;
        overflow: hidden;
        transition: height 0.5s;
    }

    #kcb_gnb:before {
        content: '';
        display: block;
        position: absolute; 
        left: 0; 
        top: 100px; 
        width: 100%; 
        height: 0;
        transition: height .5s; 
        background-color: #fff;
    }
    #kcb_gnb li {
        text-align: left;
    }
    .depth1 {
        position: relative;
        display: inline-block;
    }
    .depth1 > a {
        position: relative;
        display: block;
        padding: 0 65px 0 15px;
        line-height: 100px; 
        font-size: 1.1em;
        color: #f9f5f5;
    }
    .depth1 > a::after {
        position: absolute; 
        content: ''; 
        left: 0; 
        bottom: 0; 
        width: 100%;
        height: 3px; 
        background-color: #0e476d; 
        color: #231f20; 
        transform: scaleX(0); 
        transform-origin: left center;
        opacity: 0; 
        transition: .3s linear;
    }
    .depth1:hover > a:after, .depth1:focus-within > a:after {
        opacity: 1; 
        transform: scaleX(1);
    }
    .depth1:hover > a, .depth1:focus-within > a, .depth2 a:hover, .depth2 a :focus{
        color: #0e476d ;
    } /* 리스트 전체 메뉴 안에서 호버됐을때 글자색 유지 */
    
    .depth2 {
        position: absolute; 
        left: 0; 
        top: 100px; 
        width: 100%; 
        padding-top: 30px; 
        line-height: 2;
    }
    .depth2 li a {
        display: block; 
        padding-left: 18px;
        color: #555 !important; 
        font-size: 1em;
    }
    .depth2 li a:hover, .depth2 li a:focus {
        color:#0e476d !important ;
        font-weight: bold;
    }
    .utilmenu {
        position: absolute;
        right: 5%;
        top: 28px;
        height: 100px;
    }
    .kcb_lang {
        display: block;
        position: absolute;
        right: 100px;
        top: 5px;
        width: 60px;
        height: 32px; /* 원래는 36*4 = 144지만 보더 라인 5개 추가하여 149*/
        line-height: 34px;
        overflow: hidden;
        background-color: transparent;
        /* border: 1px solid #e0e0e0; */
        border: 1px solid transparent;
        font-size: .9em;
        transition: height .5s ;
        z-index: 100;
    }
    .kcb_lang:hover, .kcb_lang:focus-within  {
        height: 141px;
        border-color: #bbb;
        background: #fff;
    }
    .kcb_lang li {
        border-top: 1px solid #bbb;
        text-align: center;
    }
    .kcb_lang li a { display: block;}
    .kcb_lang li a:hover, .kcb_lang li a:focus  {
        background-color: #00AD83;
    }
    .kcb_lang li:first-child {
        color: #f9f5f5;
        border-top: 0;}
    .kcb_lang li:first-child a::after {
        position: relative;
        display:inline-block;
        top: -3px;
        content: '';
        width: 8px;
        height: 8px;
        box-sizing: border-box;
        border: 2px solid #f9f5f5;
        /* border-color: transparent #ccc #ccc transparent; */
        border-width: 0 2px 2px 0;
        margin-left: 10px;
        transform: scaleY(.8) rotate(45deg);
    }
    .m_chk_label {display: none;}
    

    /* 헤더 작동 
    #kcb_hd:hover, #kcb_hd:focus-within {background-color: #fff;}
    #kcb_hd:hover .kcb_logo a, #kcb_hd:focus-within .kcb_logo a {background-image: url('../images/logo.png')}
    #kcb_hd:hover #kcb_gnb .depth1 > a, #kcb_hd:focus-within #kcb_gnb .depth1 > a,
    #kcb_hd:hover .kcb_lang a, #kcb_hd:focus-within .kcb_lang a {color: #231f20 !important;}
    #kcb_hd:hover .kcb_lang li:first-child a::after, #kcb_hd:focus-within .kcb_lang li:first-child a::after {border-color: #231f20;}
    #kcb_gnb:hover, #kcb_gnb:focus-within {height: 400px;}
    #kcb_gnb:hover::before, #kcb_gnb:focus-within::before {height: 300px; border-top: 1px solid #ccc;}
    #kcb_hd:hover .modal_open i, #kcb_hd:focus-within .modal_open i {color: #231f20}
    */

    #kcb_hd.active {background-color: #fff;}
    #kcb_hd.active .kcb_logo a{background-image: url('../images/logo.png')}
    #kcb_hd.active #kcb_gnb .depth1 > a, #kcb_hd.active .kcb_lang a {color: #231f20 !important;}
    #kcb_hd.active .kcb_lang li:first-child a::after {border-color: #231f20;}
    #kcb_gnb.active {height: 400px;}
    #kcb_gnb.active:before {height: 300px; border-top: 1px solid #ccc;}
    #kcb_hd.active .modal_open i {color: #231f20}
        


    /* 푸터 영역 */
    .ft_gnb {}
    .ft_gnb_wrap {}
    .ft_gnb_wrap ol {}
    .ft_depth1 {width: 16.66%;}
    .ft_depth2 {}
    
    .ft2 {}
    .ft2_info_wrap {}
    .nia {position: absolute; left: 0; top: 0;}
    .nia img {}
    .ft2_info {padding: 45px 0; }
    .ft_menu {padding-top: 0; padding-left: 250px;  margin-top: 0; font-size: 1.2em;} 
    .ft_menu a {margin-right: 60px; line-height: 1.6; }
    .ft_info_menu {padding-top: 30px; line-height: 1.8;}
    .ft_info_menu dl {}
    .ft_info_menu dt {}
    .ft_info_menu dd {}
    .ft_logos {position: absolute; right: 0; bottom: 0; margin-top: 0;}

    .wa {}
    .msict {}

    /* 모달창-전체 카테고리 모달 */
    .modal {
        display: none;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 101;
        width: 100%;
        height: 100%;
        
        background-color: rgb(255, 255, 255,1);
    }
    .modal iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }
    .modal_btns {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 102;
        text-align: center;
        font-size: 1.4em;
    }
    .modal_btns label {
        display: block;
        width: 40px;
        line-height: 40px;
        cursor: pointer;
    }
    .modal_btns .modal_open {
        color: #f9f5f5;
    }
    .modal_btns .modal_close {
        display: none;
        font-size: 1.2em;
    }


    #modal_chk:checked ~ .modal {
        display: block;
    }
    #modal_chk:checked ~ .modal_btns .modal_open {
        display: none;
    }
    #modal_chk:checked ~ .modal_btns .modal_close {
        display: block;
    }
}

/* 1280px~1600px PC작은 해상도*/
@media screen and (min-width: 1280px) and (max-width: 1600px) {
    .kcb_logo {
        left: 10px;
    }
    #kcb_gnb {
        margin-left: 40px;
    }
    .depth1 > a {
        padding: 0 50px 0 5px;
    }
    .depth2 li a {
        padding-left: 3px;
    }
    .utilmenu {
        right: 10px;
    }
}
/* 1601px PC 큰 해상도*/
@media screen and (min-width: 1601px) {}