@charset "utf-8";
/* @latest 2022.01.17 ssj */
/* @latest 2022.02.09 ssj */

#top {position:relative; float:left; width:100%;}
.head-group {float:left; width:100%; box-sizing:border-box; clear:both;
             position:relative; background:#fff; z-index:1;
             -webkit-transition:top 500ms, background 500ms;
             transition:top 500ms, background 500ms; z-index:999 !important;}
.header {width:100%; /*height:35px;*/ height:0; background:#f8f8f8;
        position:absolute; z-index:990; box-sizing:border-box; opacity:1;
        /* border-bottom:1px solid rgba(240,130,0,0.1); */
        -webkit-transition:top 500ms, opacity 1s;
        transition:top 500ms, opacity 1s;}
.header .inner {width:100%; max-width:1300px; margin:0 auto; /* padding:0 75px; */ box-sizing:border-box;
                line-height:70px; /* text-align:right; */ vertical-align:middle; height:0; position:relative;}


ul.gnb1 {display:none;}
ul.gnb {/*height:35px;*/ clear:both; overflow:hidden; box-sizing:border-box; text-align:right; line-height:30px; max-width:30%; max-height:60px;
        display:inline-block; clear:both; margin-top: 45px; margin-right:15px;}
ul.gnb li{display:inline-block; font-size:14px;font-weight:600;margin:0;}
ul.gnb li a {color:#333; height:30px; padding:0 15px 0 10px;position:relative;opacity:0.8;}
ul.gnb li a:after {content:"";width:2px;height:2px;background:#333;background:#f18201;border-radius:100%; position:absolute;right:0;top:6px;}
ul.gnb li:last-child a:after {display:none;}
ul.gnb li a:hover {color:#d97400;}
ul.gnb li a:focus {outline:thin dotted;}
ul.gnb li.link-group {padding:0; border:none;}
ul.gnb li.link-group select {height:25px !important;  margin-top:-2px; padding:0 20px 0 5px; box-sizing:border-box;
                            font-size:13px; color:#fff; line-height:28px; border:1px solid rgba(0,0,0,0.3); border:none;
                            background:url(/images/wzwg/cmm/arrow_white.png) no-repeat right 5px center; background-size:6px;
                            appearance:none; -webkit-appearance:none;}
ul.gnb li.link-group select::-ms-expand {opacity:0;}
ul.gnb li.link-group select option {color:#333;}


/* srch setting */
.header .srchbox {background:#fff; border-bottom:1px solid #fbd9b2; height:30px; box-sizing:border-box; width:240px; line-height:30px; margin-left:10px;}
.header .srchbox input[type="text"] {background:transparent; border:none; float:left; padding-left:10px !important; font-size:12px;}
.header .srchbox .head_srchbtn {text-indent:-9999px; width:28px; height:28px; box-sizing:border-box; margin:0 2px 2px 0;
                                background:url(/images/wzwg/cmm/icon_set.png); background-repeat:no-repeat; background-position:-178px 4px;}
.header .srchbox .head_srchbtn:focus {outline:thin dotted;}


.menu {width:100%; float:left; z-index:1;
        -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;
              -webkit-transition:height 500ms, line-height 500ms;transition:height 500ms, line-height 500ms;}
.menu .logo {width:100%;max-width:1300px;height: 130px;margin:0 auto;padding:15px 10px;line-height:80px;text-align: center;box-sizing:border-box;vertical-align:middle;background: #fff;}
.menu .logo a img {width:auto; max-height:90%; max-width: 35%; display:inline-block; vertical-align:middle;
                   -webkit-transition:max-height 500ms, -webkit-transform 500ms; transition:max-height 500ms, transform 500ms;}
.lnb {width: 100%;max-width: 1300px;margin: 0 auto;box-sizing:border-box;}
.lnb > li{float: left;/*display:inline-block;*/vertical-align:middle;box-sizing:border-box;line-height: 93px;height: 70px;padding: 0 10px;overflow: hidden; background:#fff;}
.lnb > li.selected {border:none !important;}
.lnb > li:last-child:after {content:""; display:none;}
.lnb > li > a {/* height: 70px; */
                width: 100%;
                line-height: 22px;
                display: inline-block;
                box-sizing: border-box;
                /* max-height: 63px; */
                vertical-align: middle;
                text-align:center;
                box-shadow: 0 0 1px rgba(0, 0, 0, 0);
                font-size: 20px;
                color: #555;
                font-weight: 600;
                padding: 0 0px 24px;
                background: #fff;
                overflow: hidden;
                position: relative;
                -webkit-transform: perspective(1px) translateZ(0);
                transform: perspective(1px) translateZ(0);
                }
.lnb > li > a:before {content: ""; position: absolute; z-index: -1; left: 51%; right: 51%; bottom: 0; background: #f18201; height: 2px;
                    -webkit-transition-property: left, right;
                    transition-property: left, right;
                    -webkit-transition-duration: 0.3s;
                    transition-duration: 0.3s;
                    -webkit-transition-timing-function: ease-out;
                    transition-timing-function: ease-out;}

.lnb > li.selected>a:before,
.lnb > li > a:focus:before,
.lnb > li:hover > a:before {left:0; right:0;}


.lnb > li.selected > a {color:#7099c5;position:relative; font-weight:600;}
.lnb > li.selected > a:hover {line-height:25px;}

.lnb > li > ul {
                display:none;
                height: auto;
                overflow: hidden;
                top:0px !important;
                width:1300px !important;
                padding: 0 0 0 324px;
                left:0;
                right:0;
                /* background: #fff; */
                margin:0 auto;
                border-top:1px solid #e0e0e0;
                box-sizing:border-box;
                position:absolute;
                color:#333;
                z-index: -1;
                text-align:left;
                -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; top:200px !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:hover > ul,
.lnb > li > a:focus {outline:none;}
/* .lnb > li > a:focus +ul {display:block;}
.lnb > li > a:focus +ul {display:block;} */
.lnb > li > a + ul > li {text-align:left;margin-left: 1px;display: block;display: table;float: left;width: 100%;box-sizing: border-box;background: #fff;
                        border-bottom: 1px solid rgba(214, 207, 198, 0.9); border-right:1px solid transparent; -webkit-transition:border-right 0.5s;transition:border-right 0.5s;}
.lnb > li > a + ul > li:only-of-type>a,
.lnb > li > a + ul > li:nth-of-type(2):last-of-type>a,
.lnb > li > a + ul > li:nth-of-type(3):last-of-type>a {padding-bottom:50px;}
.lnb > li > a + ul.on > li {border-right: 1px solid #ececec;}
.lnb > li > a + ul > li:last-child {border-bottom:none;}
.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 {
                            display: table-cell;
                            vertical-align: top;
                            /* display:block; */
                            width: 30%;
                            height: 100%;
                            box-sizing: border-box;
                            padding: 10px 15px;
                            color: #fff;
                            background: #f8f8f8;
                            /* background: #f18201; */
                            background: #ed7322;
                            /* border-bottom: 1px solid rgba(51,51,51,0.08); */
                            /* float:left; */
                            font-size: 17px;
                            line-height: 150%;
                            -webkit-transition:background 0.5s;
                            transition:background 0.5s;
                            /* border-bottom: 1px solid rgba(255,255,255,0.3); */
                            }
.lnb > li > a + ul > li > a:hover{font-weight:600;}
.lnb > li > a + ul > li > a:focus{box-sizing:border-box; font-weight:600;}
.lnb > li > a + ul > li > a:only-child {float:left;}
.lnb > li > a + ul > li > a + ul {line-height: 150%;box-sizing:border-box;/* float: left; */width: 70%;padding: 7px 5px;display: table-cell;vertical-align: top;/* border-bottom: 1px solid #ececec; */}
.lnb > li > a + ul > li > a + ul > li {float:left;display: inline-block;}
.lnb > li > a + ul > li > a + ul > li a {color: #555;font-size: 15.5px;font-weight:600; line-height: 150%;padding: 2px 12px;position: relative;display:block;-webkit-transition:color 0.5s;transition:color 0.5s;}
.lnb > li > a + ul > li > a + ul > li a:after {content:"";width:1px;height: 12px;background: #ccc;display: inline-block;position: absolute;right: 0;top: 8px;}
.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:#f18201;}
.lnb > li > a + ul > li > a + ul > li a:focus {font-weight:600; color:#f18201;}


#lnbBg {/* display:block !important; */ /* opacity:0; */
        -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:block !important; overflow:hidden;
            top: 200px !important; z-index:-2 !important;
            border-top:1px solid rgba(51,51,51,0.1);border-bottom:1px solid rgba(51,51,51,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;
            -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:before {content: ""; position: absolute; left:-15px; bottom:-15px; width: 180px; height: 180px; opacity: 0.1;
                    background: url(/module/upload/file/selectImageView.do?atchFileId=30000003767&fileSn=0);
                    background-repeat: no-repeat;
                    background-size: 1000px;
                    background-position: -823px 1px;}

.header .inner .btn_wrap {width:auto;float:right;margin-top: 35px;}



/* srchbtn */
.lnb_search {width:30px;height:30px;display:inline-block;margin-right:10px;}
.lnb_search .btn_search {font-size:0; line-height:0; float:left;}
.lnb_search .btn_search:before {content:"";background:url(/images/wzwg/cmm/icon_set.png) no-repeat center;display:inline-block;width:30px;height:30px;background-position:-178px 5px;}

#searchPannel {}
#searchPannel .search_box {width:100%; height:100%;}
#searchPannel .search_box .search_box_inner {width:100%; height:100%;}
#searchPannel .search_box .search_box_inner input[type="text"]:focus {outline:auto; outline-color:#ddd; background:#f1f1f1; color:#333;}

    @media (min-width:991px){
        #searchPannel {display: block !important;width: 17%;left:auto;top:0;right: 80px;/* height:100px; */position:absolute;background: transparent;}
        #searchPannel .search_box .search_box_inner input[type="text"] {width: 100%;height:35px;border:none;border-bottom: 2px solid #333;margin-top: 40px;font-size: 15px;background: transparent;/* padding-right: 50px; */}
    }
    @media (max-width:990px){
        #searchPannel {position:absolute; top:0; right: 50px; width: calc(100% - 100px); height:50px; line-height:50px;}
        #searchPannel .search_box .search_box_inner input[type="text"] {width:95%;}
    }



/* allmenu (sitemap-popup btn) */
/* #f18201 À» #ED7322 ·Î º¯°æ */
.all_menu {width:30px;height:30px;display:inline-block;}
.all_menu .btn_allmenu {display:inline-block; float:left;
                         background:url("/sample/templatehead/wide/img/menuBar_white.png") #ED7322 no-repeat center;
                         width:30px; height:30px; text-indent:-9999px;}
.all_menu .wzpopup-wrap {display:none;}
.all_menu .wzpopup .pop-container {text-align:left;}
.all_menu #fade {display:none;}

    @media (min-width:991px){
        .menu .inner {position:relative;}
        .fixedhead .menu .inner .all_menu {height:50px; line-height:normal;}

    }
    @media (max-width:990px){
        .all_menu {display:none;}
        .lnb:hover ~ #lnbBg {display:none !important;}
    }



.menu ul#m_nav {display:none;}



/* mobile popup menu design */
.showMenu {width:50px; height:50px; cursor:pointer; background:url("/sample/templatehead/wide/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:url(/images/wzwg/cmm/arrow_white.png) no-repeat right 5px center; color:#fff; outline:none; 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){
        .header {/* display:none; */}
        .header ul.gnb {display:none;}
        .header .inner .btn_wrap {margin-top:0;}

        ul.lnb{display:none;}
        .menu {height:50px; }
        .menu .inner {padding:0;display:block;height:50px; overflow:hidden;}

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

        #lnbBg {display:none !important;}
    }





/* PC ver_ left menu */
    @media all and (min-width:991px) and (max-width:1400px){
        .header .inner {padding:0 15px;}
    }
     @media all and (min-width:991px) and (max-width:1300px){
        .menu {border-bottom:1px solid rgba(0,0,0,0.1);}
        .lnb > li > ul {width:99.8% !important; max-width:1300px; left:50%; transform:translateX(-50%); padding:0 0 0 20%;}
    }



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

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

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

    @media (min-width:991px){
        .menu {/* height:100px; */box-sizing:border-box;/* margin-top:35px; */}
        .lnb:before {content:"";width:100%;height:1px;border-bottom: 1px solid rgba(51,51,51,0.2);position:absolute;left:0;margin-top: -2px;}
    }





/* fixed setting */
.fixedhead {position:fixed;top:0;background:#fff; box-shadow:0px 0px 5px 2px rgba(0,0,0,0.1);z-index: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 .inner {max-width:100%;}
        .fixedhead .header ul.gnb {display:none;}
        .fixedhead .header .inner .btn_wrap {/* margin-top:0; */display: none;}

        .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;}
        .fixedhead .menu .logo {display:inline-block;height:50px;line-height:50px;padding:0 10px;width:auto;max-width:100%;position:absolute; display:none;}
        .fixedhead .menu .logo a img {max-height:35px;  max-width:100%; transform-origin:top;
                                     -webkit-transition:max-height 500ms, -webkit-transform 500ms;
                                     transition:max-height 500ms, transform 500ms;}
        .fixedhead .lnb {height:50px;}
        .fixedhead .lnb:before {display:none;}
        .fixedhead .lnb > li {border:none;height:50px;line-height:50px;padding-top:0;}
        .fixedhead .lnb > li > a {height: 50px;line-height: 50px;}
        .fixedhead .lnb > li > ul {top:50px !important; border-top:none;}

        .fixedhead #lnbBg.on {top:50px !important;}
    }
    @media (min-width:991px) and (max-width:1299px){
        .fixedhead .menu .logo {display:none;}
        .fixedhead .header {right:0;}
        .fixedhead .header .inner {padding:0;}
        .fixedhead .header .inner .btn_wrap .lnb_search {width:50px;height:50px;margin-right:-0;border-left:1px solid #ddd;box-sizing:border-box;float:left;}
        .fixedhead .header .inner .btn_wrap .lnb_search .btn_search:before {margin:10px;}
        .fixedhead .header .inner .btn_wrap .all_menu {width:50px; height:50px; float:left;}
        .fixedhead .header .inner .btn_wrap .all_menu .btn_allmenu {width:50px; height:50px;}
        .fixedhead #searchPannel {right:100px;}

    }


/* lofa : speacial menu text */
.lnb > li > ul span.oneDepth_menuNm {position:absolute;left: 0;font-size: 38px;line-height: 105%;width:300px;margin-top: 20px;padding-left: 15px;font-weight: 600;display: block !important;}

    @media (min-width:991px) and (max-width:1299px){
        .lnb > li > ul span.oneDepth_menuNm {font-size:32px; width:18%; word-break:break-all;}
    }