/**/
header {position:fixed; width:100%; border-bottom: 1px solid rgba(229,229,229,0); z-index:999; transition:all 400ms;}
html, body {min-height:100vh; word-break:keep-all; position: relative; overflow-x:hidden;}

/**/
.wrap {max-width:1500px;}

@media (max-width:1560px){
    .wrap {max-width:95%;}
}

#logo {width: auto; height: auto;}
#logo a{ height: 100%; display: flex;}

/**/
#tnb {height: 100px; transition:all 400ms; border-bottom: 1px solid rgba(255,255,255,0.15);}
#tnb .wrap{height: 100%; max-width:100%; display: flex; justify-content: space-between;}
#tnb .wrap .tnb-l{height: 100%; display: flex; align-items: center; margin-left:100px;}
#tnb ul.m1 {display:flex; justify-content: center; align-items: center; flex-wrap: nowrap; height:100%;}
#tnb li.m1 {padding:0 55px; position:relative; font-size: 18px; font-weight: 500;}
#tnb a.m1{color: #fff;}
#tnb ul.m2 {position:absolute; top:65px; left:0; min-width:100%; padding:20px 5px; background:#0575b5; text-align:center; transition:background 100ms; box-shadow: 4px 4px 10px rgb(0 0 0 / 20%);}
#tnb li.m2{font-size: 17px; font-weight: 400;  padding: 10px 0;}
#tnb li.m2 a{color: rgba(255, 255, 255, 0.6); display: block; width: 100%; transition: all 0.2s;}
#tnb li.m2 a:hover{color: rgba(255, 255, 255, 1);}
#tnb .wrap .tnb-r{display: flex; align-items: center;}

#tnb .contact {font-size:14px; margin-right:15px;}
#tnb .contact a{color:#fff;}
#tnb .lang {width: 60px; margin-right: 30px; position: relative; text-align: center; }
#tnb .lang .lang_btn{position: relative; font-size:14px; font-weight: 400; color: #fff; cursor:pointer;}
#tnb .lang .lang_btn::after{
    position: absolute; content: ''; width: 1px;
    height: 10px; top: 5px; left: -4px; background-color: rgba(255,255,255,0.3);
}
#tnb .lang .lang_option{
    position: absolute; content: ''; font-size: 14px; font-weight: 500; top: 30px; left: 5px; background: #fff;
    border: 1px solid #e0e0e0; border-radius: 5px; padding: 6px; display: none;
}
#tnb .lang .lang_option .lang_item{display: block; padding: 10px; border-radius: 5px; line-height: 1;}
#tnb .lang .lang_option .lang_item.on{color: #0575b5; background: #f5f5f5; font-weight: 600;}
#tnb .lang .lang_option a:nth-child(2){margin-top: 5px; color: #333; }
#tnb .lang .lang_option.active{display: block;}
#tnb .lang .lang_btn.active i{transform: rotate(-180deg);}

#tnb .sitemap{width: 100px; height: 100px; background-color:#0575b5; position: relative; cursor: pointer;}
#site-map-toggle{position: absolute; left: 0; right: 0; top: 0; bottom:0; width: 25px; height: 28px;}
#site-map-toggle span{background: #fff; margin: 5px 0;}

#tnb:hover,
header.in-active #tnb{background:rgba(0,0,0,0.6);}

#snb-overlay{
    position: fixed; width: 100%; height: 100vh; background: rgba(0,0,0,0.7); top: 0; left: 0; right: 0; bottom: 0;
    transition: all 0.8s; opacity: 0; display: none;
}
#snb{
    position: fixed; width: 100%; height: 90vh; background: #0575b5; min-width: 300px; max-width: 640px;
    padding: 80px 0 0 0; right: -640px; top: 0; z-index: 999999;
    transition:all 0.8s; display:block;
}
#snb button{background: transparent; border: none; padding: 0; outline: 0;}
#snb .close-btn{width: 25px; height: 25px; position: absolute; top: 17px; right: 25px; transition: all 0.4s; cursor: pointer; z-index: 9999;}
#snb .close-btn span{display: block; width: 100%; height: 2px; background: #fff;}
#snb .close-btn span:first-child{transform: rotate(-45deg) translateX(-1px);}
#snb .close-btn span:last-child{transform: rotate(45deg) translateX(-1px);}
#snb .close-btn:hover{transform: rotate(180deg);}
#snb.active{right: 0;}
#snb-overlay.active{opacity: 1; display: block;}

#snb ul.gnb{padding: 0 0 0 30px;}
#snb > ul > li > a{
    background: transparent; border: none; padding: 0; outline: 0; display: block; width: auto; height: 75px;
    line-height: 75px; font-size: 35px; font-weight: 700; color: #fff; text-align: left; cursor:pointer;
}
#snb > ul > li > ul.m2{display: none;}
#snb > ul > li > ul{padding-left: 20px; transform: translateY(-10px);}
#snb > ul > li > ul > li > a{display: block; color: rgba(255,255,255,0.6); font-weight: 400; padding: 12px 0; transition: all 0.3s;}
#snb > ul > li > ul > li:hover a{color: rgba(255,255,255,1); font-weight: 600;}

#snb .view{
    position: absolute; content: ''; top: 0; display: flex; border-bottom: 1px solid rgba(255,255,255,0.2); width: 100%;
    padding: 20px 0 10px 30px;
}
#snb .contact {font-size:14px; margin-right:20px;}
#snb .contact a{color:#fff;}
#snb .lang {width: auto; position: relative; text-align: center; }
#snb .lang a {display: inline-block; margin-left: 10px;}
#snb .lang .lang_btn{position: relative; font-size:14px; font-weight: 400; color: #fff; float: left;}
#snb .lang .lang_btn::after{
    position: absolute; content: ''; width: 1px;
    height: 10px; top: 5px; left: -10px; background-color: rgba(255,255,255,0.3);
}
#snb .lang .eng{opacity: 0.3; font-size:14px; font-weight: 400; color: #fff; float: left; transition: all 0.3s;}
#snb .lang .eng:hover{opacity: 1;}


@media(max-width:1200px){
    #tnb ul.m1 {display:none;}
    #tnb .wrap .tnb-l{margin-left: 10px;}
    #tnb .contact,
    #tnb .lang{display: none;}

}
@media(max-width:768px){
    #site-map-toggle{width: 20px;}
    /*#snb .close-btn{width: 25px; top: 40px; right: 40px;}*/
    header #logo a,
    header.in-active #logo a{background-size: contain;}
    #tnb{height: 64px;}
    #logo{width: 110px;}
    #tnb .lang .lang_option .lang_item{font-size: 14px;}
    #tnb .lang .lang_btn{font-size: 14px;}
    #tnb .lang .lang_btn::before{top: 7px;}
    #tnb .sitemap{height: 64px; width: 64px;}

    #snb > ul > li > a{font-size: 30px;}
    #snb > ul > li > ul > li > a{font-size: 15px; padding: 10px 0;}

}

/**/
#svb {}
#svb .visual {
    background-position:center center;
    height:520px; display:flex; color:#fff; align-items: center;
}
#svb .visual-1{background-image:url(/images/content/layout/svb_1.jpg);}
#svb .visual-2{background-image:url(/images/content/layout/svb_2.jpg);}
#svb .visual-3{background-image:url(/images/content/layout/svb_3.jpg);}
#svb .visual-4{background-image:url(/images/content/layout/svb_4.jpg);}
#svb .third-menu {text-align:center; padding:25px 0;}
#svb .third-menu a {
    display:inline-block; padding:9px 42px; border:2px solid transparent; border-radius:40px; color:#999;
    transition:all 300ms;
}
#svb .third-menu a.active {border-color:#0575b5; color:#0575b5; font-weight: 700;}
#svb .third-menu a:hover {border-color:#0575b5;}

@media (max-width:768px){
    #svb .visual {height:350px; background-size: cover;}
    #svb .visual-2{background-position: 70% center;}
    #svb .visual > div{display: flex; flex-direction: column-reverse;}
    #svb .visual > div > span:nth-child(2){font-size: 14px;}
    #svb .third-menu a{padding: 7px 35px; font-size: 15px;}
}
@media (max-width:550px){
    #svb .menu{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
    #svb .menu a{padding: 3px 20px;}
}

/**/
#svb-menu {padding:0; background:#f9f9f9; border-bottom:1px solid #e0e0e0;}
#svb-menu img {display:block;}
#svb-menu .menu-select {
    width:200px; text-align:left; padding:20px 20px; position:relative; cursor:pointer; transition:all 300ms;
}
/*#svb-menu .menu-select:hover {background:#ccc;}*/
#svb-menu .menu-select:after {
    content:''; display:block; position:absolute; margin:auto; top:0; right:15px; bottom:0; left:auto;
    width:11px; height:7px; background:url(/images/content/layout/svb_menu_arr.png) no-repeat center center;
}
#svb-menu .menu-select.m2 .active{color: #0575b5; font-weight: 600;}
#svb-menu .menu-list {
    border:1px solid #ddd; position:absolute; width:100%; top:100%; left:0; background:#f9f9f9;
    z-index:100; display:none; border-top: 0;
}
#svb-menu .menu-list a {display:block; padding:15px 20px; transition: all 0.3s;}
#svb-menu .menu-list a:hover {color:#0575b5; }
@media (max-width:768px){
    #svb-menu .menu-select{width: 50%; padding: 12px 20px; font-size:14px;}
    #svb-menu .menu-select:after{background-size: contain; height: 6px;}
}

/**/
.page-title {text-align:center; padding:110px 20px;}
.page-title .menu-name {margin-bottom: 10px;}
.page-title .menu-text {}
.page-title .line {
    position: relative; width: 2px; height: 60px; background: #ccc; overflow: hidden;  margin: 0 auto;
}
.page-title .line:after{
    position: absolute; content: ''; width: 2px; height: 20px; background: #0575b5; top: 0%;
    transition: 0.3s; animation: topAni 2s ease infinite;
}
@keyframes topAni{
    0% {
        top: 0%;
    }
    100% {
        top: 100%;
    }
}

@media(max-width:768px){
    .page-title {padding:60px 20px;}
    .page-title .menu-name{font-size:28px;}
    .page-title .line{height: 50px;}
    .page-title .line:after{height: 15px;}

}

/**/
footer {background:#262626; margin-top:150px;}
footer .head {background:#303030; color:#777; padding:25px 0;}
footer .head a {color:#777; margin-right:25px;}
footer .head a:last-child {margin-right:0;}
footer .body {padding:100px 0;}
footer .body .wrap {display:flex; justify-content: space-between; align-items: center;}
footer .body .pre{font-family: 'Pretendard' , sans-serif;}
footer .body .wrap > div {width:33%; color:#777;}

#btn-top{position: fixed; content: ''; right: 40px; bottom: 40px; text-align: center; display: inline-block; transition: 0.4s; z-index: 9999;}
#btn-top span{display: block; font-weight: 600;transition: all 0.3s;width:60px;height:60px;border-radius:60px;background:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.2);display:flex;align-items:center;juustify-content:center;}
#btn-top:hover span{transform: translateY(-20px);transition: all 0.3s;background:#0575b5;color:#fff;}
#btn-top span i {flex-grow:1; font-size:22px;}


@media(max-width:768px){
    footer{ font-size: 14px;}
    footer .body {padding:60px 0;}
    footer .body .wrap {flex-wrap: wrap;}
    footer .body .wrap > div {width:100%; margin-bottom:20px;}
    footer .body .wrap > div.justify-content-end{justify-content: flex-start !important;}
    footer .body .wrap > div > img{width: 150px;}

    #btn-top{bottom: 20px; right: 20px;}
    #btn-top span{width: 50px; height: 50px;}
}

