@charset "utf-8";
/* headmenu20 : compound ! */
/*@ latest 2020.02.10 OSY */
/*@ latest 2021.03.16 SSJ */


.wrap{width:100%;}
#top {position:relative; float:left; width:100%;}
.head-group {clear:both; 
            position:relative;
            float:left;
            width:100%; 
            box-sizing:border-box;
            z-index:999 !important;
            position:absolute;
            -webkit-transition:top 500ms;
            transition:top 500ms;
            }
.header {width:100%;}
.header .inner {width:100%; max-width:1300px; margin:0 auto; margin-top:0px; box-sizing:border-box; text-align:right;
                vertical-align:middle; height:45px;}

    @media (max-width:990px){
        .mainVisual .swiper-slide {padding-bottom:80%;}
    }

ul.gnb1 {display:none;}
ul.gnb {max-width:35%; height:45px; margin-right:83px; display:inline-block; clear:both; overflow:hidden; box-sizing:border-box; font-size:0;}
ul.gnb li {position:relative; display:inline-block; padding:13px 15px; margin:0; vertical-align:middle;}
ul.gnb li a {display:block; font-size:14px; color:#333; line-height:18px;}
ul.gnb li a:before {content:""; width:1px; height:12px; background:#aaa; position:absolute; top:16px; left:-1px;}
ul.gnb li:first-child a:before {display:none;}
ul.gnb li a:hover {font-weight:600;}
ul.gnb li:last-child a{border-right:none; padding-right:0;}
ul.gnb li.link-group {padding: 0 10px;border:none;}
ul.gnb li.link-group select {
                            margin-top:-2px;
                            height: 30px !important;
                            line-height: 30px;
                            font-size: 14.5px;
                            box-sizing:border-box;
                            /* color:#fff; */
                            background: url(/images/wzwg/cmm/arrow_black.png) no-repeat right 5px center;
                            appearance:none;
                            -webkit-appearance:none;
                            padding:0 20px 0 5px;
                            background-size:6px;
                            border:1px solid #ddd;
                            }
ul.gnb li.link-group a:before {
    top: 5px;
}
ul.gnb li.link-group select::-ms-expand {opacity:0;}
ul.gnb li.link-group select option {color:#333;}


.menu {width:100%; float:left; -webkit-transition:height 500ms, background 500ms, transform 500ms margin-top 500ms;
        transition:height 500ms, background 500ms, transform 500ms margin-top 500ms;}
.menu .inner {
                width:100%;
                max-width:1300px;
                margin:0 auto;
                box-sizing:border-box;
                height:80px;
                line-height:80px;
                vertical-align:middle;
                text-align:center;
                background: #fff;
                border-radius: 5px;
                position: relative;
                box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
                -webkit-transition:height 500ms, line-height 500ms;
                transition:height 500ms, line-height 500ms;
                }
.menu .logo {width:20%; float:left; height:80px; padding:0 15px; line-height:80px; text-align:left; box-sizing:border-box;
            text-align:center;z-index:999;}
.menu .logo a img {width:auto; max-height:60px; max-width:100%; display:inline-block;vertical-align:middle; vertical-align:middle;
                    -webkit-transition:max-height 500ms, -webkit-transform 500ms;
                            transition:max-height 500ms, transform 500ms;}

.lnb {width: calc(70% - 80px);/* float:left; */display: inline-block;/* height:80px; */line-height: normal;text-align:right;padding-right:20px;box-sizing: border-box;vertical-align: middle;}
.lnb > li{width: auto !important;/* float:left; */display: inline-block;line-height: normal;/* position:relative; */vertical-align:middle;}
.lnb > li.selected {border:none !important;}
.lnb > li:last-child:after {content:""; display:none;}
.lnb > li > a {
             width:100%;
             height:auto;
             line-height: 150%;
             display:inline-block;
             text-align:center;
             font-size: 18px;
             font-weight:600;
             padding: 0 19px;
             letter-spacing: -0.5px;
             box-sizing:border-box;
             }
.lnb > li:first-child a:before {content:""; display:none;}
.lnb > li:last-child > a:after {display:none;}
.lnb > li > a:hover {color: #f08300;-webkit-transition: color 0.5s;transition: color 0.5s;}
.lnb > li.selected > a {border:none !important; color: #f08300;}
.lnb > li > ul {
                display:none;
                height: auto;
                top: 0px !important;
                width:1300px !important;
                padding:20px 0 20px 17%; margin-top:70px !important;
                box-sizing:border-box;
                position:absolute; left:0; right:0;
                background: #fff;
                border-radius:0 0 5px 5px;
                margin:0 auto;
                color:#333;
                z-index: -1;
                text-align:left;
                box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
                -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 {display: block !important;
                     top: 0px !important;
                     width:auto;
                     -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 > a + ul > li {text-align:left;float: left;width: 33.333%;margin-top: 15px;
                        padding: 0 15px;box-sizing: border-box;}
.lnb > li > a + ul > li:hover > a {border-left:2px solid orange;}
.lnb > li > a + ul > li:nth-of-type(3n+1) {clear:both;}
.lnb > li > a + ul > li.selected:after {transform:rotate(-180deg); border-top:6px solid #0a58a3;}
.lnb > li > a + ul > li.selected {border:none !important;}
.lnb > li > a + ul > li.selected > a {font-weight:600; border-bottom:2px solid #0a58a3; box-sizing:border-box;}
.lnb > li > a + ul > li > a {width: 100%;
                            float: left;
                            box-sizing: border-box;
                            padding: 10px 15px;
                            background: #f8f8f8;
                            font-weight:600;
                            font-size: 17px;
                            line-height: 150%;
                            border-left:2px solid transparent;
                            -webkit-transition:background 0.5s;
                            transition:background 0.5s;
                            }
.lnb > li > a + ul > li > a:hover,
.lnb > li > a + ul > li > a:focus {font-weight:600;}
.lnb > li > a + ul > li:hover >a {font-weight:600;}
.lnb > li > a + ul > li > a + ul {line-height: 150%;box-sizing:border-box;float: left;/* width: 70%; */padding: 7px 5px;}
.lnb > li > a + ul > li > a + ul > li {float:left;width: 100%;display: block;}
.lnb > li > a + ul > li > a + ul > li a {color: #333;
                                        font-size: 15.5px;
                                        line-height: 150%;
                                        padding: 2px 12px 2px 15px;
                                        position: relative;
                                        display:block;
                                        -webkit-transition:color 0.5s;
                                        transition:color 0.5s;
                                        }
.lnb > li > a + ul > li > a + ul > li a:before {content:"";width: 4px;height: 2px;background: #f18201;display: inline-block;
                                                position: absolute;left: 6px;top: 12px;}
.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:#333;}

#lnbBg {-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;}

#lnbBg.on {
            display: none;
            overflow:hidden;
            background: #fff !important;
            top: 135px !important;
            z-index:-2 !important;
            /* max-width: 1300px; */
            /* margin: 0 auto; */
            -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;
            }



.menu ul#m_nav {display:none;}


.lnb_search {position:relative;}
.lnb_search .btn_search {font-size:0px;}
.lnb_search .btn_search::before {content:"\f002"; font-family:fontAwesome; color:#fff; font-size:29px; position:absolute; top:-42px; left:-45px; z-index:999;}


/* srchbtn */
.header .inner .btn_wrap {height:30px; display:inline-block; line-height:30px; float:right; margin-top:10px;}

.all_menu {width:100px; height:0px; text-align:right; position:absolute; right:15px; top:-85px; z-index:1;}
.all_menu:before {/* content:"\f0c9"; font-family:fontAwesome; color:#fff; font-size:29px; */}
.all_menu .btn_allmenu {color:#333; font-size:14px; line-height:0; margin-top:-38px;}
.all_menu .btn_allmenu:hover {font-weight:600;}
.all_menu .btn_allmenu::before {content:""; width:1px; height:12px; background:#aaa; position:absolute; top:-9px; right:66px;}

.btn_wrap {position:absolute; top:100px;}
#searchPannel {width:86px; height:80px; background:#4c4845; display:block !important; position:absolute; top:-65px; right:0px; z-index:999; border-radius:0 5px 5px 0;}
#searchPannel.on .search_box .search_box_inner {display:block !important;}
#searchPannel .search_box {vertical-align:middle;}
#searchPannel .search_box .search_box_inner {display:none; width:100%; height:30px; line-height:30px; position:absolute; top:80px; right:122px;}

    @media all and (min-width:991px) and (max-width:1400px){
        #searchPannel {position:absolute; right:-15px !important;}
        .lnb_search .btn_search::before {position:absolute; top:-40px; left:-42px !important;}
    }
    @media (min-width:991px){
        #searchPannel {position:absolute; top:-65px; right:0px;}
        #searchPannel .search_box .search_box_inner input[type="text"] {font-size:18px; padding:20px 5px; border-radius:6px; border:3px solid #4c4845;}
        .lnb_search .btn_search::before {position:absolute; top:-40px; left:-56px;}
    }
    @media (max-width:990px){
        #searchPannel {width:50px; height:50px; line-height:50px; position:absolute; top:-110px; right:0; border-radius:0; background:#fff;}
        #searchPannel .search_box .search_box_inner input[type="text"] {position:absolute; top:-30px; right:-122px; width:150px; height:34px; border:2px solid #4c4845; border-radius:0 0 6px 6px;}
        .lnb_search .btn_search::before {content:"\f002"; font-family:fontAwesome; color:#4c4845; font-size:22px; position:absolute; top:-97px; left:-35px; z-index:999;}
    }








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

#m_nav {float:left; width:95%; max-width:400px; height:calc(100vh - 100px); overflow-y:scroll; background:#fff; padding:0 0 20px; 
        position:absolute; top:49px; left:0; text-align:left; box-shadow:1px 2px 5px 0px rgba(0,0,0,0.1); box-sizing:border-box;}
    #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:14px;  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:13px; 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:35px;}

    /* 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:1px solid rgba(255,255,255,0.2); border-width:1px 1px 1px 0; margin-top:-1px; 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 {}
    #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 all and (min-width:991px) and (max-width:1299px){
        .lnb > li > a {font-size:17px; padding:0 6px;}
        .lnb > li > ul {width:100% !important;}
    }
    @media (max-width:990px){
        .header {height:0;}
        ul.lnb {display:none;}
        ul.gnb {display:none;}
        .btn_allmenu {display:none;}
        .menu {height:50px;background: #fff;}
        .menu .inner {padding:0; display:block; height:50px; overflow:hidden; border-bottom:1px solid rgba(255,255,255,0.3); color: black; float:right; width:90%; border-radius:0; box-shadow:none; background:transparent;}

        .menu .logo {width:95%; height:50px; line-height:50px; text-align:center; padding:0 15px; display:block;}
        .menu .logo a img {max-height:35px;}
        .showMenu, .menu:hover .showMenu {height:51px; overflow:hidden;}
    }





/* PC ver_ left menu */
    @media all and (min-width:991px) and (max-width:1400px){
        .header .inner {padding:0 15px;}
        .lnb > li:last-child > ul {right:0;}
    }



    @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;}
    }

    @media all and (min-width:991px){
        .head-group {height:160px;}
        .menu {height:70px;box-sizing:border-box;/* margin-top: 10px; */}
    }




/*기타 컨텐츠부분 css*/
@media all and (min-width:991px){  
    #sub_visual {height: 450px !important;}  
    #sub_visual .bluebg {margin-top: 130px; height: calc(100% - 130px) !important;}   

    #content {padding-top:130px;}
     #content.maintemplate011 {padding-top:0;}
    .maintemplate011 .copy {top:180px;}
}
@media all and (max-width:599px){  
    #sub_visual {height:200px;}     
    #sub_visual .sub_titbox p.bTitle {margin-top:80px;}
}






/* 스크롤시 fixed */
.fixedhead {position:fixed;top:0;background:rgba(255,255,255,0.9);box-shadow:0px 0px 1px 0px rgba(0,0,0,0.1);}

@media all and (min-width:991px){ 
    .head-group.fixedhead {height:auto;}
    .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;}
    .fixedhead .menu {margin-top:0; height:50px;
                    -webkit-transition:height 500ms, background 500ms, transform 500ms, margin-top 500ms;
                    transition:height 500ms, background 500ms, transform 500ms, margin-top 500ms;
                    }
    .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:50px; line-height:50px; box-shadow:none; background:transparent; border-radius:0;}
    .fixedhead .menu .logo {height:50px; line-height:50px; padding:0 10px; width:20%;}
    .fixedhead .menu .logo a img {max-height:35px; transform-origin:top;
                            -webkit-transition:max-height 500ms, -webkit-transform 500ms;
                                    transition:max-height 500ms, transform 500ms;
                            }
    .fixedhead .lnb {height:50px; width:78%; display:inline-block; box-shadow:none; background:none;}
    .fixedhead .lnb > li {line-height:50px;}
    .fixedhead .lnb > li > a {font-size:14px;}
    .fixedhead .lnb > li > a + ul > li > a {padding:5px 20px 5px 10px;}
    .fixedhead .lnb > li > a + ul > li:hover:before,
    .fixedhead .lnb > li > a + ul > li.selected:before {margin-left:5px;}
    .fixedhead .lnb > li > a + ul > li > a + ul {padding:5px 10px 5px 5px;}
    .fixedhead .lnb > li > ul {/* width:100% !important; */top: -20px !important;}
}


/* widedown menu - speacial menu text */
.lnb > li > ul span.oneDepth_menuNm {position:absolute; left:0px; top:0px;
                                    font-size:30px;
                                    line-height:130%;
                                    padding:40px 0 0 20px;
                                    font-weight:600;
                                    width:235px; height:100%;
                                    color:#f38200; word-wrap:break-word;
                                    z-index: -1;
                                    box-sizing: border-box;
                                    overflow-y:hidden;
                                    display:block !important;
                                    }