@charset "utf-8";
/* DisabledFunction:TM002,TM003,MM003,MS001,MT001,MT002,MW002,MW003,MW004 */
/* wide down headermenu Design 05 영문용 통합검색창 없음
    2021.12.29 YHY
    2022.01.20 YHY
    2022.02.08 YHY
*/

.head-group {clear:both; position:relative; float:left; width:100%; background:#fff; box-sizing:border-box; z-index:999 !important; box-sizing:border-box;}
.header {width:100%;height: 45px;position:absolute;z-index:990;background:#424951;background: #005da4;border-bottom: 1px solid #e5e7ee !important;box-sizing:border-box;}
.header .inner {width:100%;height: 100%;max-width:1300px;margin:0 auto;box-sizing:border-box;position: relative;}

ul.gnb1 {width:30%; float:left;}
ul.gnb1 li {float:left; line-height:30px; }
ul.gnb1 li:first-child a {border-right:1px solid #003975; padding:0 20px;}
ul.gnb1 li:last-child a {border-right:none !important;}
ul.gnb1 li a {border-right:1px solid #dedede; color:#333; font-weight:600; padding:0 20px; box-sizing:border-box; font-size:12px;}
ul.gnb {float:right;height: 45px;text-align:right;/* padding-right: 39px; */width: 70%;text-align: right;}
ul.gnb li {line-height: 45px;font-size: 14px;text-align:right;list-style:outside;color:transparent;display: inline-block;margin-left: -4px;}
ul.gnb li a {color: #fff;font-weight: 400;padding: 0px 10px;box-sizing:border-box;width: 100%;height: 100%;float: left;position: relative;}
ul.gnb li a:after {/* content:"|"; *//* float: right; *//* position: absolute; *//* right: 0; *//* opacity: 0.5; *//* font-weight: 400; */}
ul.gnb li a:hover {font-weight:600;}
ul.gnb li:last-child a {padding-right:0;color: #44f7f9;}
ul.gnb li:last-child a:after {content:""; display:none;}
ul.gnb li.link-group {padding:0; border:none;}
ul.gnb li.link-group select {border: 1px solid rgba(0,0,0,0.5); color:#333; border-radius:2px; margin-top:-2px; height: 30px !important; line-height: 30px; font-size: 14.5px;
                             box-sizing:border-box; font-weight:600; padding:0 20px 0 5px; background-size:6px; vertical-align: middle;
                             background:url(/images/wzwg/cmm/arrow_black.png) rgba(255,255,255,0.9) no-repeat right 5px center; appearance:none; -webkit-appearance:none; }
ul.gnb li.link-group select::-ms-expand {opacity:0;}
ul.gnb li.link-group select option {color:#333;}
ul.gnb li.link-group select + button {height: 30px;padding:0 10px;line-height:28px;font-size:14px;font-weight:600;vertical-align: middle;}

.menu {width:100%;height:80px;background:#fff;float:left;position:relative;z-index:1;transition: height 0.5s;}
.menu .inner {width:100%;max-width:1300px;margin:0 auto;box-sizing:border-box;/* height:120px; */line-height: 100px;vertical-align:middle;text-align:right;/* display:table; */vertical-align:middle;position: relative;}
.menu .logo {width: 20%;float: left;height: 100px;padding: 5px 0;line-height: 90px;text-align: left;vertical-align:middle;box-sizing:border-box;transition: padding 0.1s;}
.menu .logo a {width: 100%;display:block;margin: 0 auto; font-size:18px;}
.menu .logo a img {/* width: 100%; */max-width: 100%;display:inline-block;vertical-align:middle;}
.menu .logo img {vertical-align:middle; max-height:60px;}

.lnb {width: 80%;/* height: 100px; *//* float: left; *//* max-width: 1300px; */margin: 0 auto;box-sizing:border-box;line-height: normal;display: inline-block;vertical-align: middle;text-align: right;padding-right: 110px;margin-top: -5px;}
.lnb > li{/* float: left; */width: auto !important;display:inline-block;vertical-align:middle;box-sizing:border-box;/* line-height: 100px; *//* height: 100px; */padding-left: 60px;overflow: hidden;/* background:#fff; */margin-top: -6px;}
.lnb > li.selected {border:none !important;}
.lnb > li:last-child:after {content:""; display:none;}
.lnb > li > a {width: 100%; /* line-height: 22px; */ display: inline-block; box-sizing: border-box; vertical-align: middle;
                text-align:center; font-size: 23px; /* color: #fff; */ font-weight: 600; overflow: hidden; transition: font-size 0.5s; letter-spacing: -0.5px;}
.lnb > li > a:focus {outline:auto;border: 2px solid #333;}
.lnb > li:first-child a:before {content:""; display:none;}
.lnb > li:last-child > a:after {display:none;}
.lnb > li > a:hover {/* opacity:0.9; */-webkit-transition:opacity 0.5s;transition:opacity 0.5s;}
.lnb > li > a:hover>ul {display:block !important;}
.lnb > li.selected > a {border:none !important;}
.lnb > li > ul {display:none; max-width: 1300px; width: 100% !important; height: auto;
                overflow: hidden;
                box-sizing:border-box;
                position:absolute;
                left:0;
                right: 0;
                top:0px !important;
                margin:0 auto;
                color:#333;
                z-index: -1;
                text-align: center;
                -webkit-transition:top 0.3s;
                -moz-transition:top 0.3s;
                -ms-transition:top 0.3s;
                -o-transition:top 0.3s;
                transition:top 0.3s;
                }
.lnb > li > ul.on {z-index:1;
                    display:block;
                    /*display:table;*/
                    table-layout: fixed;
                    top:60px !important;
                    width:auto;
                    padding-top: 78px;
                    -webkit-transition:top 0.3s;
                    -moz-transition:top 0.3s;
                    -ms-transition:top 0.3s;
                    -o-transition:top 0.3s;
                    transition:top 0.3s;
                    }
.lnb > li > ul.on > li {display:table-cell;float: none;/*width: auto;*/}



.lnb > li > a + ul > li {text-align:left;/* display: table; */float: left;width: 25%;padding: 0 20px 25px 0;box-sizing: border-box;display: table-cell;vertical-align: top;border-left: 1px solid #ccc;width: 20%;}
.lnb > li > a + ul > li:last-of-type {border-right: none;}
.lnb > li > a + ul > li > a {display: block;vertical-align: top;width: 100%;/* height: 100%; */box-sizing: border-box;padding: 12px 10px 12px 20px;color: #fff;background: #004a98;border-radius: 8px;font-size: 18px;font-weight: 600;line-height: 150%;word-break:keep-all;letter-spacing: -0.5px;margin-top: -8px;}
.lnb > li > a + ul > li > a:focus {box-sizing:border-box; font-weight:600;}
.lnb > li > a + ul > li:last-of-type > a {border-bottom:none;}
.lnb > li > a + ul > li > a + ul {line-height: 150%;box-sizing:border-box;width: 70%;padding: 10px 10px 10px 20px;display: table-cell;}
.lnb > li > a + ul > li > a + ul > li {float:left;display: block;width: 100%;position: relative;}
.lnb > li > a + ul > li > a + ul > li a {color: #333;font-size: 16px;/* font-weight:600; */line-height: 130%;padding: 6px 0;letter-spacing: -0.5px;position: relative;display:block;-webkit-transition:color 0.5s;transition:color 0.5s;}
.lnb > li > a + ul > li > a + ul > li:last-child a:after {content:""; display:none;}
.lnb > li > a + ul > li > a + ul > li a:hover {font-weight:600;color: #333;}
.lnb > li > a + ul > li > a + ul > li a:focus {font-weight:600; color:#f18201;}

.lnb > li > a + ul > li:nth-child(2) {}
.lnb > li > a + ul > li:nth-last-child(8) {}
.lnb > li > a + ul > li:nth-child(2):nth-last-child(8),
.lnb > li > a + ul > li:nth-child(3):nth-last-child(7),
.lnb > li > a + ul > li:nth-child(4):nth-last-child(6),
.lnb > li > a + ul > li:nth-child(5):nth-last-child(5),
.lnb > li > a + ul > li:nth-child(6):nth-last-child(4),
.lnb > li > a + ul > li:nth-child(7):nth-last-child(3),
.lnb > li > a + ul > li:nth-child(8):nth-last-child(2),
.lnb > li > a + ul > li:nth-child(9):nth-last-child(1) {width:25% !important;float: left;}


    @media (max-width:1500px){
        .lnb > li:last-child > ul {right:0;}
    }
    @media (min-width:1300px){
        .lnb > li > a + ul > li.selected > a {background:#003975; color:#fff;}
        .lnb > li > a + ul > li.mnGroup.selected:after {background-position: -119px 17px;}
    }
    @media (min-width:991px) and (max-width:1299px){
        .lnb > li {padding-left:30px;}
    }





/* sub menu (확장패널)*/
#lnbBg {
        top: 100px !important;
        -webkit-transition:top 0.3s;
        -moz-transition:top 0.3s;
        -ms-transition:top 0.3s;
        -o-transition:top 0.3s;
        transition:top 0.3s;
        /* -webkit-transition:height 0.3s; */
        -moz-transition:height 0.3s;
        -ms-transition:height 0.3s;
        -o-transition:height 0.3s;
        /* transition:height 0.3s; */
        box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
        }
#lnbBg.on {display:block !important;overflow:hidden;/* top: 170px !important; */z-index:-2 !important;background: rgba(255,255,255,0.9);/* border-top: 1px solid rgba(0,0,0,0.05); */border-bottom: 1px solid rgba(0,0,0,0.08);}
.fixedhead #lnbBg {top: 70px !important;}

    /* speacial menu text */
    .lnb > li > ul span.oneDepth_menuNm {display: none !important;}

        @media (min-width:991px) and (max-width:1299px){
            .lnb > li > ul span.oneDepth_menuNm {font-size:32px;width: 20%;word-break:break-all;}
        }
        @media (max-width:990px){
            #lnbBg, #lnbBg.on {display:none !important;}
        }








/* allmenu (sitemap-popup btn) */
.btn_wrap {position: absolute;top: 0px;left: 0;width: 100%;height: 0px;}
.all_menu {margin:0;width: 1px;/* display:table-cell; */text-align:center;vertical-align:middle;position:relative;text-align:left;float: right;background: transparent !important;}
.all_menu .btn_allmenu {display:inline-block;width: 40px;height: 40px;line-height: 30px;color:#fff;background: #fff !important;font-size:1px;overflow:hidden;text-indent:-999px;float:right;margin-top: 75px;position: absolute;right: -5px;}
.all_menu .btn_allmenu:before {content:"";font-family:FontAwesome;vertical-align:middle;font-size: 15px;font-weight: 400;text-indent: 0;width: 25px;height: 25px;position: absolute;right: 6px;top: 8px;background: url(/images/wzwg/site/kotra/headIcon.png);background-position-x: -87px;}

.all_menu .wzpopup-wrap {display:none;}
.all_menu .wzpopup .pop-container {text-align:left;}
.all_menu #fade {display:none;}

    @media (min-width:1300px){
        .btn_wrap {max-width: 1300px;left: 50%;transform: translateX(-50%);}
    }
    @media (min-width:991px){
        .fixedhead .menu .inner .all_menu {height:50px; line-height:normal;}
    }
    @media (max-width:990px){
        .all_menu .btn_allmenu {display:none;}
    }



.menu ul#m_nav {display:none;}



/* mobile popup menu design */
.showMenu {width:50px;height:50px;cursor:pointer;background:url("/sample/templatestyle/img/menuBar.png")no-repeat center;position:absolute;top:0;right: 0;}

#m_nav {
        float:left;
        width: 100%;
        /* max-width:400px; */
        max-height: calc(100vh - 100px);
        overflow-y:scroll;
        background:#fff;
        padding: 0;
        position:absolute;
        top:50px;
        left: 0;
        text-align:left;
        box-shadow: 1px 4px 7px rgb(0,0,0,0.2);
        box-sizing:border-box;
        border-top: 1px solid #ddd;
        }
    #m_nav > li {width:100%; float:left; box-sizing:border-box; position:relative; border-bottom:1px solid #f3f3f3;}
    #m_nav > li > a {width:100%;font-size: 17px;float:left;padding:13px 30px 13px 20px;line-height:20px;font-weight:600;display:block;box-sizing:border-box;}
    #m_nav > li.mnGroup {position:relative;}
    #m_nav li.mnGroup.selected {border-bottom:none;}
    #m_nav > li.mnGroup > a:after {content:"\276D"; display:inline-block; transform:rotate(90deg); position:absolute; right:15px; top:13px;}
    #m_nav li.mnGroup.selected > a:after {transform:rotate(-90deg) !important; margin-right:-2px;}
    #m_nav li a {color:#333; word-break:keep-all;}
    #m_nav li > a:hover  {color:#2d59b0;}
    #m_nav li > ul {float:left; background:#f7f7f7; width:100%}
    #m_nav li > ul > li {float:left; width:100%; border-bottom:1px solid #eee;}
    #m_nav li > ul > li.mnGroup > a:after {content:"\276D"; display:inline-block; transform:rotate(90deg); position:absolute; right:15px; top:10px;}
    #m_nav li > ul > li > a {float:left;width:100%;font-size: 16px;padding: 11px 20px 11px 25px;height:auto;line-height:18px;position:relative;box-sizing:border-box;}
    #m_nav li ul li ul {background:#ececec; width:100%;}
    #m_nav li ul li ul li {border-bottom:1px solid #e3e2e2;}
    #m_nav li ul li ul li:last-child {border-bottom:none;}
    #m_nav li ul li ul li a {padding-left: 45px;}

    /* popup login menu */
    #m_nav > li.mobile_gnb, #m_nav > li:last-child {background:#2b2b2b;}
    #m_nav > li.mobile_gnb ul li, #m_nav > li:last-child ul li {width:33.33%;box-sizing:border-box;float:left;text-align:center;border-bottom:1px solid rgba(255,255,255,0.2);border-right:1px solid rgba(255,255,255,0.2);/*border-width:1px 1px 0 0;*/line-height:70px;}
    #m_nav > li.mobile_gnb ul li:nth-child(3n), #m_nav > li:last-child ul li:nth-child(3n) {border-right:none;}
    #m_nav > li.mobile_gnb ul li:nth-child(3n+1), #m_nav > li:last-child ul li:nth-child(3n+1) {clear:both;}
    #m_nav > li.mobile_gnb ul li a, #m_nav > li:last-child ul li a {color:#fff; width:100%; line-height:20px; vertical-align:middle; display:inline-block;}

    #m_nav > li:last-child ul li.link-group a:after {display:none;}
    #m_nav > li:last-child ul li.link-group select {width:92%; background:transparent; color:#fff; border-radius:2px; line-height:30px; height:30px; border-color:rgba(255,255,255,0.3);}
    #m_nav > li:last-child ul li.link-group select option {background:white; color:black;}

    @media (max-width:990px){
        .head-group {border-bottom:none;}
        .head-group.fixedhead {top: 0px !important;}
        .header {/* display:none; */height:0;}
        ul.gnb, ul.lnb{display: none !important;}
        .menu {height:50px;border-bottom:none;}
        .menu .inner {height:auto;line-height: normal;}

        .menu .logo {width: 50%;height:50px;line-height:50px;text-align: left;padding: 0 10px;display:block;}
        .menu .logo a img {max-height:35px;}
        .showMenu, .menu:hover .showMenu {height:51px;overflow:hidden;z-index: 1;}
    }






/* PC ver_ left menu */
    @media all and (min-width:991px) and (max-width:1400px){
        .header .inner {padding: 0 10px;}
        .menu .logo {padding: 5px 10px;}
        .lnb > li:last-child > ul {right:0;}
    }
    @media all and (min-width:991px) and (max-width:1300px){
        .lnb > li > ul {max-width: 100%;/* padding: 0 0 0 20%; */}
        .lnb > li > a + ul > li.selected {position:relative;}
        .lnb > li > a + ul > li.selected > a {padding-right:30px;}
        .lnb > li > a + ul > li > a + ul > li a {padding-left:15px;}
        .lnb > li > a + ul > li > a + ul > li:before {left: 2px;}
        .lnb > li > a + ul > li.mnGroup:after {right: 7px;}
    }

    @media all and (min-width:1051px){
      .menu ul#m_nav, .showMenu {display:none !important;}
    }
    @media all and (min-width:991px) and (max-width:1050px){
        .menu ul#m_nav, .showMenu {display:none !important;}

        ul.gnb {padding-left:10px;overflow: hidden;}
    }

    @media all and (min-width:991px){
        .head-group {/* border-bottom: 1px solid #ccc; */}
        .head-group .menu {height: 100px;box-sizing:border-box;margin-top: 45px;}
        .head-group:not(.fixedhead) .menu:before {content:"";display:block;width: 100%;height: 1px;/* border-bottom:1px solid rgba(0,0,0,0.1); */position:absolute;left:0;top:100px;opacity: 0;}
    }




/* fixed setting */
.fixedhead {position:fixed;top:0;background:rgba(255,255,255,0.9);/* box-shadow:0px 0px 1px 0px rgba(0,0,0,0.1); */z-index:10;/* border-bottom: 1px solid rgba(0,0,0,0.1); */}
.fixedhead .menu {box-shadow: 0px 1px 5px rgb(0 0 0 / 10%);}

    @media all and (min-width:991px){
        .fixedhead:hover {box-shadow:0px 0px 3px 0px rgba(0,0,0,0.3); background:#fff;     -webkit-transition:box-shadow 500ms, background 500ms, -webkit-transform 500ms;     transition:box-shadow 500ms,background 500ms, transform 500ms;     }

        .fixedhead .header {/* display:none; *//* top:-40px; *//* opacity:0; */height: 0;}
        .fixedhead .header .inner {height:1px;}
        .fixedhead .header .inner .gnb,
        .fixedhead #bannerTopLink {display:none !important;}
        .fixedhead .menu {margin-top:0;height: 70px;}
        .fixedhead .menu:hover {background:rgba(255,255,255,1); -webkit-transition:background 500ms, -webkit-transform 500ms; transition:background 2s, transform 500ms;   }
        .fixedhead .menu .inner {height: 70px;line-height: 70px;}
        .fixedhead .menu .logo {height: 70px;line-height: 70px;padding: 0;width: 15%;float: left;text-align: left;}
        .fixedhead .menu .logo a {width:100%;}
        .fixedhead .menu .logo a img {max-height: 40px;transform-origin:top;-webkit-transition:max-height 500ms, -webkit-transform 500ms;transition:max-height 500ms, transform 500ms;}
        .fixedhead .lnb {/*display: none;*//* max-height:50px; */overflow:hidden;width: 85%;float: left;text-align: revert;margin: 23px 0px;padding-right: 100px;}
        .fixedhead .lnb > li {width: auto !important;float: none;display: inline-block;margin-left: -3px;line-height: 130%;height: auto;padding: 0;}
        .fixedhead .lnb > li > a {color:#333;font-size: 18px;padding: 0 15px;position: relative;/* letter-spacing: -0.5px; */}
        .fixedhead .lnb > li > a:before {/* color:#333; */padding-right:15px;position: absolute;left: -1px;}
        .fixedhead .lnb > li > ul {top: 77px !important;border-top:none;padding-top: 15px;padding-bottom: 30px;}
        .fixedhead .all_menu .btn_allmenu {margin-top: 16px;}
        .fixedhead .all_menu .btn_allmenu:before {top: 6px;}
        .fixedhead .all_menu {width:39px;}
        .fixedhead .btn_wrap {right: 10px;}
    }
    
    
    
/* srchbox setting */
.btn_search {text-indent:-99999px;}
.lnb_search {display:none;}


/*202402 수정 */
.bannerTopPanel ul li a {display:flex;align-items: center;justify-content: center;padding: 0;}
.bannerTopPanel ul li:first-child a img{-webkit-filter: brightness(1) invert(0); filter: brightness(1) invert(0);}
.bannerTopPanel ul li:first-child a{background:none;}
.bannerTopPanel ul li:first-child a:hover{background: linear-gradient(85deg, #e8e8e8 0%, #e8e8e8 100%);}

.bannerTopPanel ul li a {display:flex;align-items: center;justify-content: center;padding: 0;}
.bannerTopPanel ul li:nth-child(6) a img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
.bannerTopPanel ul li:nth-child(6) a{background: linear-gradient(230deg, #ff8387 , #3c69c9 );}

#btn_topBannerOpen{left:195px}