#header
{position:relative; height:75px; border-bottom:1px solid #ddd;}
.header
{}
#header .header-inner
{max-width:1300px; margin:0 auto;}
#header .header-wrap
{display:flex; justify-content:space-between; align-items:center;}
/* LOGO */
.header-wrap .tlogo
{}
/* TEL */
.header-wrap #tel_but
{display:none; position: fixed; top: 15px; right: 60px; z-index: 10;}
/***** PC GNB ******/
.header-wrap .main-nav
{width:70%;}
.header-wrap .main-nav #gnb
{display:flex; justify-content: flex-end;}
.main-nav #gnb > li
{position:relative; width:20%; text-align:center; transition:all 0.3s ease;}
.main-nav #gnb > li > a
{display:block; font-size:20px; color:#333; font-weight:500; height:75px; line-height:75px;}
.main-nav #gnb > li > a:hover{
    color: #2c2a50;
}
.main-nav #gnb > li > a::before{
    content: "";
    display: block;
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50px;
    left: 15px;
    top: 20px;
    background: #2c2a50;
    opacity: 0;
    transition: 0.3s all;
}

.main-nav #gnb > li > a:hover::before{
    opacity: 1;
}
.main-nav #gnb li .submenuul
{position:absolute; opacity:0;visibility: hidden;  height:0; top:76px; width:100%; padding:10px 0px; transition:all 0.4s ease;}

.main-nav #gnb li .submenuul > li > a
{font-size:16px; padding:5px 0px; display:inline-block; border-bottom: 1px solid transparent;}
.main-nav #gnb li .submenuul > li > a:hover{
    border-bottom: 1px solid #2c2a50;
}

.main-nav #gnb > li:after
{content:''; position:absolute; left:50%; width:0%; height:1px; background:#2c2a50; transition:all 0.3s ease;}
/* MOUSEOVER */
.main-nav #gnb > li.active > a
{color:#2c2a50}
.main-nav #gnb > li.active:after
{width:100%; left:0%;}

.main-nav #gnb li .submenuul.on
{visibility: visible; opacity:1; z-index:999; height:350px; padding:10px 0;}
/* HEADER BACKGROUND */
.header_bg
{position:absolute; width:100%; height:75px; left:0; top:0; background:#fff; overflow:hidden; transition:all 0.4s; z-index:99;}
.header_bg.on
{height:250px; border-bottom:1px solid #ddd;}

/* 스크롤 다운 */
#header.header_scroll
{position:fixed; z-index:9999; top:0; left:0; width:100%;}
#header.header_scroll .header_bg
{background:rgba(255,255,255,0.9); 
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    box-shadow: 0px 5px 30px rgba(0,0,0,0.2);}




/* UTIL BOX */
.util-box
{position:relative; width:5%;}
.util-box > div
{display:inline-block; background: #2c2a50; padding: 10px; transition: 0.3s all;}

.util-box > div:hover{
    background: #303C8D;
}

/* ALLMENU BUTTON */
.util-box .allmenu-button
{position:absolute; width:40px; top:48%; transform:translatey(-50%); right:0; z-index:999;}
.util-box .allmenu-button .menu-button
{width:100%; cursor: pointer;}
.util-box .allmenu-button .menu-button span
{width:100%; height:3px; display:block; background:#fff; transition: all 0.6s ease;}
.util-box .allmenu-button .menu-button span:nth-of-type(2) 
{margin-top: 5px; width: 70%;}
.util-box .allmenu-button .menu-button span:nth-of-type(3) 
{margin-top: 5px}
.util-box .allmenu-button.active .menu-button{
    background: #222;
    z-index: 99999;
}
.util-box .allmenu-button.active .menu-button span:nth-of-type(1) 
{width: 1.5em; transform: translateY(.6rem) rotate(-45deg);}
.util-box .allmenu-button.active .menu-button span:nth-of-type(2) 
{transform: translateX(1.5rem); opacity: 0; }
.util-box .allmenu-button.active .menu-button span:nth-of-type(3) 
{transform: translateY(-0.55rem) rotate(45deg);width: 1.5em;}


/* ALL MENU WRAP */
.menu-overlay 
{width: 70%; height: 100%; position: fixed; top: 0; background:url(../img/overlay_bg.png) no-repeat #fff; background-size: cover; color: #222; transform: translateY(100%); transition: all 0.6s ease-in-out; z-index: 99999;}
.menu-overlay.open 
{transform: translateY(0) !important;}
.menu-overlay.open .menu-overlay__image img 
{animation: fadeIn 0.8s ease-in-out 0.6s forwards;}
.menu-overlay.open .nav 
{animation: fadeIn 1s ease-in-out 0.2s forwards; }


.menu-overlay2
{width: 30%; height: 100%; position: fixed; top: 0; right: 0; background-color: #222; color: #fff; transform: translateY(-100%); transition: all 0.6s ease-in-out; z-index: 100;}


.menu-overlay2.open{
    transform: translateY(0) !important;
}


.close-button{
    cursor: pointer;
    position: fixed;
    right: 15%;
    top: 30px;
}

.close-button span{
    width: 40px;
    height: 3px;
    background: #fff;
    display: block;
    margin: 5px 0;
}

.close-button span:first-child{
    transform: translateY(.08rem) rotate(-45deg); width: 1.5em;
}

.close-button span:last-child{
    transform: translateY(-0.5rem) rotate(45deg); width: 1.5em;
}


.menu-overlay .nav{
    height: 100%;
    align-items: center;
    padding-left: 20%;
}

.menu-overlay .nav__items{
    width: 100%;
}

.menu-overlay.open .navArea .inner{opacity: 1;}
.navArea .inner:after {
    content: '';
    display: block;
    clear: both;
}
.gnbList li{z-index:1}
.gnbList li:after{content:'';display:block;clear:both;}
.gnbList li *{vertical-align:top}
.gnbList > li{
    display: flex;
    align-items: center;
    width: 100%;
    padding-right: 20%;
}

.gnbList > li::after{
    content: '\f061';
    font-family: "fontawesome";
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
    font-size: 36px;
    opacity: 0;
    transform: translateX(-50px);
    transition: 0.5s all;
}


.gnbList > li:hover::after{
    opacity: 1;
    transform: translateX(0);
}


.gnbList > li > a 
{position:relative;display:block;float:left;width:300px;color:#222;font-size:52px;font-weight:700;line-height: 2.5;    letter-spacing: -.05em;}
.gnbList li a:hover{text-decoration:none}
/*.gnbList > li.gnb03 > a{width:350px}*/
.gnbList > li.gnbON > a, .gnbList > li:hover > a{color:#303C8D}
.gnbList li .subGnb
{position:relative;overflow:hidden;display:block;float:left; display: flex; align-items: center; height:95px;padding:10px 0 10px 0;transition:1s;-webkit-transition:1s;opacity:1;z-index:0;    padding: 0; margin-left: 30px;}
.gnbList li .subGnb ul{display:inline-block;padding-left:6px; margin-left: 30px;}
.gnbList li .subGnb *{vertical-align:top}
.gnbList li .subGnb:before{content:'';display:inline-block;width:300px;height:2px;background:#ccc}
.gnbList > li .subGnb ul li{float:left}
.gnbList > li .subGnb ul li a{padding:1px 20px 0;color:#666;font-size:20px;font-weight:500;line-height:79px}
.gnbList > li .subGnb ul li.subON a, .gnbList > li .subGnb ul li a:hover{color:#303C8D;}
.gnbList > li .subGnb ul li.subON a{font-weight:600}
.gnbList li:hover .subGnb, .gnbList > li.gnbON .subGnb{opacity:1;z-index:100}
.gnbList > li.gnbON a + .subGnb{z-index:0}
.gnbList li .subGnb:before{width:85px}/*20201124 171px*/
/*.gnbList li.gnb03 .subGnb:before{width:58px}*/
.gnbList li:hover{z-index:10}

.linkLang{position:relative;margin:60px 0 0 -8px;text-align:left}
.linkLang a{display:inline-block;padding:0 8px;color:rgba(255,255,255,0.5);font-size:16px;line-height:34px}
.linkLang a.on{color:rgba(255,255,255,1);font-weight:600}


.header-info{
    display: flex;
    flex-flow: column;
    height: 100%;
    justify-content: flex-end;
    color: #666;
    padding: 90px 80px;
}

.header-info .hinfo-menu{
    margin: 30px 0;
    display: flex;
}

.header-info .hinfo-menu li{
    display: block;
    align-items: center;
}

.header-info .hinfo-menu li a{
    color: #666;
}

.header-info .hinfo-menu li:first-child a{
    color: #999;
}

.header-info .hinfo-menu li::after{
    content: "";
    width: 1px;
    height: 16px;
    background: #666;
    display: inline-block;
    margin: 0 20px;
}

.header-info .hinfo-menu li:last-child::after{
    display: none;
}

.hinfo-des span{
    display: inline-block;
    margin-right: 15px;
}

@media screen and (max-width:1023px){
    .header
    {height:75px;}
    #header .header-inner
    {height:100%; padding:0 10px;}
    #header .header-wrap
    {height:100%;}
    .mob-btn
    {display:block;}
    .header-wrap #tel_but
    {display:block;}

    .header-wrap .main-nav
    {display:none;}
    
}

/* 모바일 메뉴 */

/* COMMON */
.mob-btn
{display:none;}
.mob-btn span
{width:30px; height:4px; border-radius:15px; background-color:#000; display:block; margin:6px 0;}
.overlay
{display:none; position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.5); left:0; top:0; z-index:999}
#m-nav-close
{display:none; position:absolute; right:4%; top:2%; font-size:36px;}


/* MOBILE VER 1 */
.gnb-style-default.gnb-style-default
{ background:#fff; position:fixed; width:280px; height:100%;  right:-280px; top:0; z-index:9999; transition:all 0.3s ease;}
.gnb-style-default .gnb-mobile-wrapper
{width:100%; height:100%; position:relative;}
.gnb-style-default .gnb-mobile-wrapper .gnb-mobile-inner
{padding:0px 0px;}
.gnb-style-default #mobile-nav > li
{position:relative; border-bottom:1px solid #ddd;}
.gnb-style-default #mobile-nav > li > i
{position:absolute; left:0; top:0; width:100%; height:55px; transition: 0.4s ease; font-style:normal;}
.gnb-style-default #mobile-nav > li > i:after
{position:absolute; right:10%; top:25%; content:'\f078'; font-family:'Font Awesome 5 Free'; font-weight:900;}
.gnb-style-default #mobile-nav > li > a
{position:relative; display:block; padding: 0 10px; height:55px; line-height:55px; font-size:17px;}
.gnb-style-default #mobile-nav > li > a:after
{position:absolute; content:''; left:50%; width:0; height:1px; background:#0069bf; bottom:0; transition:all 0.3s ease;}
.gnb-style-default #mobile-nav .submenu
{display:none;}
.gnb-style-default #mobile-nav .submenu li
{border-top:1px solid #ddd;}
.gnb-style-default #mobile-nav .submenu li a
{display:block; padding:0px 20px; font-size:15px; height:45px; line-height:45px; transition:0.4s ease;}

.gnb-style-default #mobile-language
{margin-top:20px;}
.gnb-style-default #mobile-language .mobile-lan-wrap
{text-align:center;}
.gnb-style-default #mobile-language .mobile-lan-wrap li
{display:inline-block; width:100px; border:1px solid #ddd;}
.gnb-style-default #mobile-language .mobile-lan-wrap li a 
{display:block; padding:5px;}
.gnb-style-default #mobile-language .mobile-lan-wrap li.active a
{background:#0069bf; color:#fff;}

.gnb-style-default#gnb-mobile.open
{right:0;}
.gnb-style-default #mobile-nav > li.open > a:after
{left:0; width:100%;}
.gnb-style-default #mobile-nav > li.open > a
{background:#f4f4f4; color:#0069bf; font-weight:600;}
.gnb-style-default #mobile-nav > li.open > i:after
{content:'\f077'}

/* LANGUAGE CUSTOM */
.gnb-style-default .header-wrap
{position:relative;}
.gnb-style-default #language
{position:absolute;  top:22px; right:-12%; width:100px; z-index:99;}
.gnb-style-default #language .current-lan
{text-align:center;}
.gnb-style-default #language .current-lan span
{display:block; border:1px solid #ddd; border-radius:50px; cursor:pointer; transition:all .4s}
.gnb-style-default #language .current-lan span:hover
{background:#2c2a50; color:#fff;}
.gnb-style-default #language .lan-list
{display:none; text-align:center; background:#f4f4f4; border-radius:5px; margin-top:5px;}
.gnb-style-default #language .lan-list li:first-child
{border-bottom:1px solid #ddd;}
.gnb-style-default #language .lan-list li a
{font-size:15px; display:block; padding:1px 5px;}




.gnb-style-full
{visibility:hidden; opacity:0;  position:fixed; width:100%; height:0; left:0; top:0; background:#fff; z-index:99999; transition:0.4s ease; }
.gnb-style-full .gnb-mobile-wrapper
{display:table; width:100%; height:100%;}
.gnb-style-full .gnb-mobile-wrapper .gnb-mobile-inner
{display:table-cell; vertical-align:middle;}
.gnb-style-full #mobile-nav > li
{position:relative; text-align:center;}
.gnb-style-full #mobile-nav > li > i
{position:absolute; left:0; top:0; width:100%; height:55px; transition: 0.4s ease; font-style:normal;}
.gnb-style-full #mobile-nav > li > i:after
{position:absolute; right:10%; top:25%; content:'\f078'; font-family:'Font Awesome 5 Free'; font-weight:900;}
.gnb-style-full #mobile-nav > li > a
{position:relative; display:block; padding: 0 10px; height:55px; line-height:55px; font-size:17px;}
.gnb-style-full #mobile-nav > li > a:after
{position:absolute; content:''; left:50%; width:0; height:1px; background:#0069bf; bottom:0; transition:all 0.3s ease;}
.gnb-style-full #mobile-nav .submenu
{display:none; background:#f4f4f4}
.gnb-style-full #mobile-nav .submenu > li > a
{font-size:15px; color:#666; display:block; padding:10px;}
.gnb-style-full #mobile-nav > li.open > a
{color:#0069bf; font-weight:600;}
.gnb-style-full #mobile-nav > li.open > i:after
{content:'\f077'}
.gnb-style-full.open
{display:block; height:100%; visibility:visible; opacity:1;}
/* LANGUAGE CUSTOM */
.gnb-style-full #m-util-box
{position:absolute; width:100%; bottom:5%; left:0; bottom:5%;}
.gnb-style-full #m-util-box #mobile-language
{position:relative;}
.gnb-style-full #mobile-language .mobile-lan-wrap
{text-align:center;}
.gnb-style-full #mobile-language .mobile-lan-wrap li
{display:inline-block;}
.gnb-style-full #mobile-language .mobile-lan-wrap li a
{padding:0 10px; font-size:15px; color:#222;}
.gnb-style-full #mobile-language .mobile-lan-wrap li.active a
{color:#0069bf; font-weight:600;}

.menu-overlay .close-button{
    display: none;
    right: 3%;
    z-index: 999;
}
@media screen and (max-width:1440px){

    .menu-overlay .nav{
        padding-left: 10%;
    }

    .gnbList > li > a{
        width: 250px;
        font-size: 42px;
    }

    .header-info{
        padding: 30px;
    }
    
}


@media screen and (max-width:1024px){

    .gnbList > li > a{
        width: 200px;
        font-size: 30px;
    }

    .gnbList > li{
        padding-right: 8%;
    }

    .gnbList li .subGnb:before{
        width: 50px;
    }

    .gnbList > li .subGnb ul li a{
        font-size: 18px;
    }
    
    .header-info .hinfo-menu{
        flex-wrap: wrap;
    }
}


@media screen and (max-width:1023px){
    .header
    {height:75px;}
    #header .header-inner
    {height:100%; padding:0 10px;}
    #header .header-wrap
    {height:100%;}

    .header-wrap #tel_but
    {display:block !important;}
    #language
    {display:none;}
    #header.header_scroll,
    .header_scroll .header,
    .header_scroll .header_bg
    {height:60px;}
    .header_scroll .header-wrap #tel_but
    {top:9px;}
    .header_scroll .mob-btn span
    {background:#000;}

    .header-wrap .main-nav
    {display:none;}

    .header-info, .menu-overlay2{
        display: none !important;
    }

    .menu-overlay{
        width: 100%;
    }

    .menu-overlay .close-button{
        display: block;
    }
    .menu-overlay .close-button span{
        background: #222;
    }

}

@media screen and (max-width:512px){
    .menu-overlay .nav{
        padding: 0 15px;
    }

    .gnbList li .subGnb{
        margin-left: 15px;
    }

    .gnbList > li > a{
        font-size: 24px;
        width: 130px;
    }

    .gnbList li .subGnb ul{
        margin-left: 15px;
    }

    .gnbList > li{
        padding-right: 0;
    }

    .gnbList > li .subGnb ul li a{
        padding: 0;
        font-size: 16px;
        line-height: 1.5em;
    }

    .gnbList > li::after{
        font-size: 16px;
    }

    .gnbList > li .subGnb ul li{
        margin-right: 15px;
    }
}