/**/
header {position:fixed; width:100%; border-bottom: 1px solid rgba(255,255,255,0.2); z-index:999; transition:all 400ms;}
html, body {min-height:100vh; word-break:keep-all; position: relative; overflow-x:hidden;}

/**/
.wrap {max-width:1400px;}
.wrap-b {max-width:1720px;}
#tnb .wrap{max-width:1720px !important;}

@media (max-width:1560px){
    .wrap {max-width:95%;}
    #tnb .wrap{max-width:100% !important;}
}

#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.2); background-color: rgba(255,255,255,0.2);}
#tnb .wrap {height: 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%; width:100%; justify-content: space-around; }
#tnb li.m1 {padding:0 25px; position:relative; font-size: 16px; font-weight: 500;}
#tnb a.m1{color: #fff;}
#tnb ul.m2 {position:absolute; top:63px; left:0; min-width:100%; padding:20px 5px; background:#ffffff; border-radius: 10px ;border:1px solid #e0e0e0; text-align:center; transition: 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: #333; display: block; width: 100%; transition: all 0.2s; font-size: 16px;}
#tnb li.m2 a:hover{color: #2cadf1; font-weight: 700;}
#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; 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 {background:rgba(255,255,255,0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);}
header.in-active #tnb{background:rgba(255,255,255,0.8); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);}

#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 !important; 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 !important;}
#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 !important; 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){
    footer {background:#333333; margin-top:0px; padding:80px 0; margin-top: 150px;}
footer .wrap {display:flex; justify-content: space-between; align-items: center; color: #999; margin-bottom: 0 !important;}
    #tnb ul.m1 {display:none;}
    #tnb .wrap .tnb-l{margin-left: 10px;}
    #tnb .contact,
    #tnb .lang{display: none;}

}
@media(max-width:779px){
    #tnb .wrap{max-width:100% !important;}
    .site-map-toggle{position: absolute !important; top: 0; right: 0px !important;}
    #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:500px; display:flex; color:#fff; align-items: center;
    background-image:url(/images/content/layout/svb_1.jpg);
}
#svb .visual .first-menu-name {color:rgba(255,255,255,0.5); margin:0 0 6px 4px;}
#svb .visual .menu-name {}
#svb .visual .menu-name span {line-height:100%;}
#svb .visual-1{background-image:url(/images/content/layout/svb_1.jpg);}
#svb .visual-2{background-image:url(/images/content/layout/svb_2.jpg) !important;} */
/*#svb .visual-3{background-image:url(/images/content/layout/svb_3.jpg);}*/
/*#svb .visual-4{background-image:url(/images/content/layout/svb_4.jpg);}*/

@media (max-width:779px){
    #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;}
}
@media (max-width:550px){
    #svb .menu{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
    #svb .menu a{padding: 3px 20px;}
}

/**/
/* #svb {padding-top:100px;} */
#svb .sub-visual {
    height:300px;
    background-repeat: no-repeat; background-position:center center;
    display:flex; justify-content: center; align-items: center;
    background-image: url(/images/content/layout/svb_1.jpg);
}
#svb .sub-visual-1{background-image:url(/images/content/layout/svb_1.jpg);}
#svb .sub-visual-2{background-image:url(/images/content/layout/svb_2.jpg) !important;}
#svb .sub-visual-3{background-image:url(/images/content/layout/svb_1.jpg) !important;}

#svb .sub-visual > div {
    color:#fff;
}

/**/
#svb-location {
    text-align:center; 
    background:#fff; padding:80px 0  80px;
    z-index: 5;
}
#svb-location .location {
    display:flex; justify-content: center; align-items: center;
    margin-top:45px; user-select:none;
}
#svb-location .location li.home a {
    display:block;
    background:url(/images/content/layout/icon_home.png) no-repeat center center;
    width:15px; height:15px; font-size:0;
}
#svb-location .location .arr {
    margin:0 10px; width:6px; height:9px; font-size:0;
    background:url(/images/content/layout/la.png) no-repeat center center;
}
#svb-location .location ul.l1 {
    display:flex; justify-content: center; align-items: center;
}
#svb-location .location li.l1 {
    cursor:pointer; position:relative; z-index: 1;
}
#svb-location .location ul.l2 {
    display:none;
    position:absolute; border:1px solid #ccc; border-radius:20px; background-color: #fff;
    box-shadow:0 0 10px 3px rgba(0,0,0,0.2); padding:16px 10px; width:100%; min-width:120px; z-index: 10;
    background:#fff;
}
#svb-location .location li.l2 {}
#svb-location .location a.l2 {font-size: 16px; font-weight: 500; color: #555; line-height: 200%;}

@media (max-width:779px){
    #svb-menu .menu-select{width: 50%; padding: 12px 20px; font-size:14px;}
    #svb-menu .menu-select:after{background-size: contain; height: 6px;}
    #svb-location.wrap{margin-top: 50px;}
}

/**/
.page-title {text-align:left; padding:10px; }
.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:779px){
    .page-title {padding:60px 20px;}
    .page-title .menu-name{font-size:28px;}
    .page-title .line{height: 50px;}
    .page-title .line:after{height: 15px;}
}


/**/
.third-menu {text-align:center; padding:0; margin:20px 0 60px 0;}
.third-menu a {
    display:inline-block; border:1px solid #ccc; width:100%; height:100%;
    padding:10px; transition:all 200ms;
}
.third-menu a.active,
.third-menu a:hover {border-color:#2cadf1; color:#fff; font-weight: 700; background:#2cadf1;}

@media (max-width:779px){
    .third-menu a{padding: 7px 35px; font-size: 15px;}
}

/**/
footer {background:#333333; margin-top:0px; padding:80px 0; margin-top: 150px;}
footer .wrap {display:flex; justify-content: space-between; align-items: center; color: #999; margin-bottom: 0 !important;}

#btn-top{
    position: fixed; content: ''; right: 40px; bottom: 40px; text-align: center;
    display: inline-block; transition: 0.4s; z-index: 9999;
}
#btn-top span{
    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; justify-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:779px){
    #btn-top{bottom: 20px; right: 20px;}
    #btn-top span{width: 50px; height: 50px;}
    
}




/* Mobile - Portrait */
@media (max-width:779px){

footer {background:#333333; margin-top:0px; padding:80px 0; margin-top: 150px;}
footer .wrap {display:flex; justify-content: space-between; align-items: center; color: #999; margin-bottom: 0 !important;}

}    /*모바일 미디어쿼리 종료*/