html{background-color: #fff; -webkit-font-smoothing: antialiased;}
.wrap{width: 1400px; margin: 0 auto; position: relative; }
.mob{display: none;}
.pc{display: inline-block;}    

.header {width: 100%; padding: 10px 5px; top: 0; left: 0; z-index: 999; position: absolute; transition: 0.5s; border-bottom: 1px solid #fff;}
.header > .wrap > .logo_area {display: inline-block; vertical-align: middle;position: relative;width: 120px; height: 52px;}
.header > .wrap > .logo_area > a > .logo{background: url("/images/content/layout/logo.svg") no-repeat center/contain; width: 120px; height: 52px;  position: absolute; transition:opacity 100ms;}
.header > .wrap > .logo_area > a > .logo2{background: url("/images/content/layout/logo2.svg") no-repeat center/contain; width: 120px; height: 52px; position: absolute; opacity: 0; transition:opacity 100ms;}
.header > .wrap > .h_L {display: inline-block; vertical-align: middle; margin-left: 30px; }
.header > .wrap > .h_L > .h_menu {float: left; font-weight: 700; position: relative; }
.header > .wrap > .h_L > .h_menu > li {display: inline-block; padding: 13px 20px; width:130px; text-align: center;}
.header > .wrap > .h_L > .h_menu > li:hover > a{color:#1B5DC1}
.header > .wrap > .h_L > .h_menu > li > a {color: #fff; transition:color 100ms;}
.header > .wrap > .right{float: right !important; text-align: right; margin-top: 10px; width: 30% !important ;}
.header > .wrap > .right > .lang {display: inline-block;}
.header > .wrap > .right > .lang > .langs{font-weight: 700; font-size: 14px; color: #fff; transition:color 100ms;}
.header > .wrap > .right > .lang > .lang_dis{font-weight: 500 !important; font-size: 14px; color: #ccc;}
.header > .wrap > .right > .mob > .menu_btn {display: inline-block; vertical-align: middle;position: relative;width: 20px; height: 15px;}
.header > div > .menu_pan {width: 100%; height: 320px; background: rgba(255,255,255,0.8); position: absolute; left: 0; top:100%; z-index: 999; padding-left: 180px; font-size: 15px; display: none;}
.header > div > .menu_pan > .wrap {height: 100%;}
.header > div > .menu_pan > .wrap > .cate_bx { padding-left: 60px; height: 100%;  display: inline-block;}
.header > div > .menu_pan > .wrap > .cate_bx > .menu_category {margin-left: 1px; height: 100%; margin-bottom: 0; display: inline-block; vertical-align: top; width: 130px;}
.header > div > .menu_pan > .wrap > .cate_bx > .menu_category > .category { padding: 9px 0; vertical-align: top;  height: 41px; width:100%; text-align: center;}
.header > div > .menu_pan > .wrap > .cate_bx > .menu_category > .category:nth-child(1) {margin-top: 30px; }
.header > div > .menu_pan > .wrap > .cate_bx > .menu_category > .category:hover { font-weight: 700; color: #1B5DC1;}
.header > div > .menu_pan > .wrap > .depth_wrap { opacity: 0; transition: all .5s ease-in-out; z-index: -1;}
.header > div > .menu_pan > .wrap > .depth_wrap { position: absolute; display: inline-block; width: 1500px; text-align: left; right: 100px; padding-top: 50px; }
.header > div > .menu_pan > .wrap > .depth_wrap > .img_wrap { width: 32%; height: auto; float: right;}
.header > div > .menu_pan > .wrap > .depth_wrap .img_wrap .img {width: 100%; height: 200px; float: right; vertical-align: middle; overflow: hidden;}
.header > div > .menu_pan > .wrap > .depth_wrap .img_wrap .img .in_img { width: 100%; height: 100%;background: url("/images/content/layout/menu1_company.png")no-repeat center/cover;  transition: all .5s ease-in-out;}
.header > div > .menu_pan > .wrap > .depth_wrap .img_wrap .img:hover .in_img{ transform: scale(1.05);}
.header > div > .menu_pan > .wrap > .depth_wrap.dw1 .img_wrap .img .in_img{ background: url("/images/content/layout/menu1_company.png")no-repeat center/cover;}
.header > div > .menu_pan > .wrap > .depth_wrap.dw2 .img_wrap .img .in_img{ background: url("/images/content/layout/menu2_product.png")no-repeat center/cover;}
.header > div > .menu_pan > .wrap > .depth_wrap.dw3 .img_wrap .img .in_img{ background: url("/images/content/layout/menu3_notice.png")no-repeat center/cover;}
.header > div > .menu_pan > .wrap > .depth_wrap.dw4 .img_wrap .img .in_img{ background: url("/images/content/layout/menu4_inquiry.png")no-repeat center/cover;}
.header > div > .menu_pan > .wrap > .depth_wrap .txt_wrap {background-color: #1B5DC1; padding: 15px; position: absolute; right: 420px; bottom: 30px;}
.header > div > .menu_pan > .wrap > .depth_wrap .txt_wrap .dp_more .tit {display: inline-block; vertical-align: middle;width:31px; height: 10px; background: url("/images/content/layout/Arrow.png")no-repeat center left;}
.header > div > .menu_pan > .wrap > .depth_wrap .txt_wrap .dp_more .txt {display: inline-block; vertical-align: middle; color: #fff; font-weight: 700;}

.header.active {background:rgba(255,255,255,.8);}
.header.active .h_menu > li > a {color:#555555 !important;}
.header.active .langs {color:#666 !important;}
.header.active .logo {opacity:0;}
.header.active .logo2 {opacity:1 !important; transition:opacity 100ms;}
.header.active .hambutton {opacity:0; transition:opacity 100ms;}
.header.active .hambutton2 {opacity:1 !important; transition:opacity 100ms;}


/* .header > .wrap > .h_L > .h_menu > li> a::after {position: absolute; content:""; display: block; border-bottom: 3px solid #000; transition: all 250ms ease-out; left: 50%; width: 0;}
.header > .wrap > .h_L > .h_menu > li> a:hover::after {transition: all 250ms ease-out; left: 0%; width: 100%;} */

footer{background-color: #121619 ; font-size: 14px; font-weight: 500; color: #999;}
footer > .foot-menu {border-bottom: #999 1px solid; height: 50px;}
footer > .foot-menu > .wrap > p {display: inline-block; margin-top: 15px; margin-right: 30px; color: #666;}
footer > .foot-menu > .wrap > p > a {font-size: 14px; font-weight: 500; color: #999;}
footer > .wrap{padding:30px 0;}
footer > .wrap > .foot-left{ display: inline-block; vertical-align: top; width: 70%;}
footer > .wrap > .foot-left > .foot-txt > p:nth-child(1){color: #ccc; font-weight: 600;}
footer > .wrap > .foot-left > .foot-txt > p:nth-child(2) {margin-bottom: 10px;}
footer > .wrap > .foot-left > .foot-txt > p:nth-child(2) > span {color: #ccc; font-weight: 600;}
footer > .wrap > .foot-right{display: inline-block; vertical-align: top; width: 29%;}
footer > .wrap > .foot-right> .foot-logo{width: 160px; height: 65px; margin: 0 auto;background: url("/images/content/main/foot-logo.png")no-repeat center/cover;} 




/**/
#svb {position:relative;}
#svb .visual {
    background-position:center center; text-align:center;
    height:500px; display:flex; color:#fff; align-items: center;
    background-image:url(/images/content/layout/svb1.png);
}
#svb .visual .first-menu-name {color:#fff; margin:0 0 6px 4px; font-family: 'poppins', sans-serif;}

#svb .visual-1{background-image:url(/images/content/layout/svb1.png) !important;}
#svb .visual-6{background-image:url(/images/content/layout/svb2.png) !important;}
#svb .visual-10{background-image:url(/images/content/layout/svb3.png) !important;}
#svb .visual-12{background-image:url(/images/content/layout/svb3.png) !important;}


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

/**/
#svb .location {
    position:absolute; left:0; bottom:0; width:100%; height:50px; background:rgba(0,0,0,0.2);
    color:#fff; z-index:10;
}
#svb .location .wrap {
    height:100%; display:flex; align-items: center;
}
#svb .location .home {
    width:50px; height:100%; background:url(/images/content/layout/locahome.png) no-repeat center center, #1B5DC1;
}
#svb .location .menu {
    min-width:150px; height:100%; text-align:center; padding:0; border-right:1px solid #ccc;
    display:flex; align-items: center; justify-content: center; position:relative;
}
#svb .location .menu > a {
    color:#fff; height:100%; display:flex; align-items: center; justify-content:center; padding:0 12px;
}
#svb .location .menu > ul {
    position:absolute; top:100%; width:100%; background:rgba(0,0,0,0.3); padding:4px 0;
    display:none;
}
#svb .location .menu > ul li {padding:4px 0;}
#svb .location .menu > ul li > a {color:#fff;}

@keyframes topAni{
    0% {
        top: 0;
    }
    100% {
        top: 100%;
    }
}

@media(max-width:768px){

}


/*  */
#m_list{display: none;}
.menu_btn{display: none;}
/* --------------------------------------meadiaquery----------------------------------------- */


/* Tablet */

@media (max-width:1100px) and (min-width:780px){


.wrap{width: 100% !important;}
.pc{display: none !important;}    
.mob{display: inline-block !important;}

/**/

header{background-color: rgba(255, 255, 255, 0.8); width: 100vw;}
.header > .wrap > .logo_area > a > .logo{background: url("/images/content/layout/logo2.svg") no-repeat center/contain; }
.header .h_menu  {display: none;}
.header > .wrap > .right{float: right !important; text-align: right; margin-top: 10px; margin-right: 16px; }
.header > .wrap > .right > .lang {display: inline-block;}
.header > .wrap > .right > .lang > .langs{font-weight: 700; font-size: 14px; color: #1B5DC1; transition:color 100ms;}
.header > .wrap > .right > .lang > .lang_dis{font-weight: 500 !important; font-size: 14px; color: #ccc;}
.header > .wrap > .right > .mob > .menu_btn{border: none; background: none; width: 30px; height: 30px;}

.m_list{ position: absolute; background:none; border: none; top: 30px; right: 10px; transform:  translate(0%,-50%);} 
.off{ display: none;}

#m_list{ display: block; position: fixed;  top: 0; right: -1920px; width: 80%; height: 100vh; z-index: 997; background: #1B5DC1; background-size: 60%; opacity: 0;}

.background-black { position: fixed; top: 0px; left: 0; width: 100%; height: 150%; background-color: rgba(0,0,0,0.65); z-index: 200; display: none;}

.m_realList{ margin-top: 120px; }
.m_realList a{ color: #fff;}
.m_realList li{ color: #fff;}
.m_gnb{ width: 100%; height: 70px; display: block; line-height: 70px; font-size: 20px; font-weight: 800; margin-top: 30px;}
.m_gnb a{ padding: 0 30px;}
.menucopy{position: absolute;bottom: 30px;left: 50%;transform: translate(-50%,-0%);color: #999;font-weight: normal;font-size: 10px;text-align: center;}
.sub{display:block; background-color:#0b459c ;width: 100%; position: relative;}


/*  */

footer{background-color: #121619 ; font-size: 14px; font-weight: 500; color: #999;}
footer > .foot-menu {padding: 0 16px;}
footer > .wrap > .foot-left{ padding: 0 16px}


}/* 태블릿 종료 */





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

.wrap{width: 100% !important;} 
.pc{display: none !important;}    
.mob{display: inline-block !important;}


/**/

header{background-color: rgba(255, 255, 255, 0.8); width: 100vw;}
.header > .wrap > .logo_area > a > .logo{background: url("/images/content/layout/logo2.svg") no-repeat center/contain; }
.header .h_menu  {display: none;}
.header > .wrap > .right{float: right !important; text-align: right; margin-top: 10px;margin-right: 16px; }
.header > .wrap > .right > .lang {display: inline-block;}
.header > .wrap > .right > .lang > .langs{font-weight: 700; font-size: 14px; color: #1B5DC1; transition:color 100ms;}
.header > .wrap > .right > .lang > .lang_dis{font-weight: 500 !important; font-size: 14px; color: #ccc;}
.header > .wrap > .right > .mob > .menu_btn{border: none; background: none; width: 30px; height: 30px;}


.header > .wrap > .logo_area {display: inline-block; vertical-align: middle;position: relative;width: 100px; height: 42px;}
.header > .wrap > .logo_area > a > .logo{width: 100px; height: 42px;  position: absolute; transition:opacity 100ms;}
.header > .wrap > .logo_area > a > .logo2{width: 100px; height: 42px; position: absolute; transition:opacity 100ms;}



.m_list{ position: absolute; background:none; border: none; top: 30px; right: 10px; transform:  translate(0%,-50%);} 
.off{ display: none;}

#m_list{ display: block; position: fixed;  top: 0; right: -1920px; width: 80%; height: 100vh; z-index: 997; background: #1B5DC1; background-size: 60%; opacity: 0;}

.background-black { position: fixed; top: 0px; left: 0; width: 100%; height: 150%; background-color: rgba(0,0,0,0.65); z-index: 200; display: none;}

.m_realList{ margin-top: 120px; }
.m_realList a{ color: #fff;}
.m_realList li{ color: #fff;}
.m_gnb{ width: 100%; height: 70px; display: block; line-height: 70px; font-size: 20px; font-weight: 800; margin-top: 30px;}
.m_gnb a{ padding: 0 30px;}
.menucopy{position: absolute;bottom: 30px;left: 50%;transform: translate(-50%,-0%);color: #999;font-weight: normal;font-size: 10px;text-align: center;}
.sub{display:block; background-color:#0b459c ;width: 100%; position: relative;}

/*  */

footer{background-color: #121619 ; font-size: 14px; font-weight: 500; color: #999;}
footer > .foot-menu {margin: 0 auto; text-align: center;}
footer > .foot-menu > .wrap{text-align: center;}
footer > .foot-menu > .wrap > p:nth-child(4){margin-right: 0;}
footer > .foot-menu > .wrap > p > a {font-size: 12px;}
footer > .wrap > .foot-left{ padding: 0 16px; text-align: center; width: 100%; height: auto; display: block; order: 2;}
footer > .wrap > .foot-right{ padding: 0 16px; margin-top: 20px; text-align: center; width: 100%; height: auto; display: block; order: 1;}


}/*모바일 종료*/