/**/
header {position:fixed; width:100%; box-shadow: 0px 1px 10px rgb(0 0 0 / 8%); z-index:999; transition:all 400ms;}
html, body {min-height:100vh; word-break:keep-all; position: relative;}

/*header .tnb-c {overflow:hidden;}*/
/*body.navOn header .tnb-c {overflow:unset;}*/

/**/
.wrap {max-width:1800px; }
.inner {max-width:1300px !important; width: 100%; margin: 0 auto; position: relative;}
@media (max-width:1860px){
    .wrap {max-width:95%;}
    .inner {max-width:95% !important;}
}

#logo {width: 170px; height: 54px;}
#logo a{display: block; background: url(/images/content/layout/logo.png) no-repeat center center; height: 100%;}
#tnb {height: 100px; transition:all 400ms; background: #fff; position: relative; z-index: 9999;}
#tnb .wrap{height: 100%; display: flex; justify-content: space-between;}
#tnb .wrap .tnb-l{height: 100%; display: flex; align-items: center; margin-right: 30px;}
#tnb .wrap .tnb-c{width: 100%;}
#tnb ul.m1 {display:flex; justify-content: center; align-items: center; flex-wrap: nowrap; height:100%; width: 90%; margin: 0 auto;}
#tnb li.m1 {width: 100%; text-align: center; position:relative; font-size: 20px; font-weight: 600; transition: height 0.5s ease, opacity 0.5s ease;}
#tnb li.m1:last-child ul.m2{border-right: 1px solid #e5e5e5;}
#tnb a.m1{color: #333;}
#tnb ul.m2 {
    overflow:hidden;
    position:absolute; top:67px; left:0; min-width:100%; height: 0; text-align:center; display: block;
    transition: height 0.5s ease, opacity 0.5s ease, background 0.3s; opacity: 0; border-left: 1px solid #e5e5e5;
}
#tnb ul.m2:before{position: absolute; content: ''; width: 0; height: 2px; background: #4947a6; left: 0; top: 0; transition: width 0.5s ease-out;}
#tnb li.m1:hover ul.m2{background: #f9f9f9;}
#tnb li.m1:hover ul.m2:before{width: 100%;}
body.navOn #tnb ul.m2{height: 339px; opacity: 1;}
#tnb li.m2{font-size: 17px; font-weight: 400; padding: 10px;}
#tnb li.m2:nth-child(1){margin-top: 18px;}
#tnb li.m2 a{color: #555; display: block; width: 100%; transition: all 0.3s;}
#tnb li.m2 a:hover{color: #4947a6; font-weight: 500;}
#tnb .wrap .tnb-r{display: flex; align-items: center; margin-left: 67px;}

#tnb li.m1:hover{}

#tnb .lang {width: 80px; height: 31px; line-height: 31px; margin-right: 30px; position: relative; text-align: center; background: #d81820; border-radius: 16px;}
#tnb .lang:after {position: absolute; content: ""; width: 1px; height: 12px; background: rgba(256,256,256,0.5); top: 10px; left: 40px; }
#tnb .lang a {font-size: 14px; font-weight: 700; color: #fff; transition: all 0.3s;}
#tnb .lang a:nth-child(1):hover{opacity: 0.7;}
#tnb .lang a:nth-child(1){margin-right: 8px; opacity: 0.5;}
#tnb .lang a:nth-child(2){}

#tnb-bg{position: absolute; content: ''; width: 100%; height: 0; background: #fff; left: 0; top: 100px; display: block; opacity: 0;
    box-shadow: 0px 6px 20px rgb(0 0 0 / 8%); transition: height 0.5s ease, opacity 0.5s ease; z-index: 999;}
body.navOn #tnb-bg{height: 340px; opacity: 1; border-top: 1px solid #e5e5e5;}

#site-map-toggle{position: relative; right: 0; width: 23px; height: 28px;}
#site-map-toggle span{background: #fff; margin: 5px 0; height: 3px;}

/*header,*/
/*header:hover,*/
/*header.in-active {background: #fff; border-bottom: 1px solid rgba(229,229,229,0.5);}*/
header #tnb,
header:hover #tnb,
header.in-active #tnb{ }
/*header #logo a,*/
/*header.in-active #logo a{background: url(/images/content/layout/logo.png) no-repeat center center;}*/
/*header:hover #logo a,*/
/*header.in-active #logo a{background-image: url(/images/content/layout/logo.png) !important;}*/
/*header #tnb a.m1,*/
/*header:hover #tnb a.m1,*/
/*header.in-active #tnb a.m1{color: #333; font-weight: 700;}*/
header #site-map-toggle span,
header:hover #site-map-toggle span,
header.in-active #site-map-toggle span{background: #333;}

#snb{
    position: fixed; width: 100%; height: 100vh; background: #fff;
    top: 0; right: 100%; z-index: 999999; opacity: 0;
    transition:all 0.5s; display:block;
}
#snb:after{
    position: absolute; content: ''; background: url(/images/content/layout/logo_sub.png) no-repeat center center;
    background-size: cover; width: 719px; height: 229px; right: 5%; bottom: 5%;
    z-index: -1;
}
#snb .snb-top{width: 100%; height: 100px; border-bottom: 1px solid #e5e5e5;}
#snb .wrap{height: 100%; display: flex; justify-content: space-between;}
#snb .wrap .snb-l{height: 100%; display: flex; align-items: center; }
#snb .wrap .snb-r{display: flex; align-items: center; margin-left: 37px;}
#snb button{background: transparent; border: none; padding: 0; outline: 0;}
#snb .close-btn{width: 25px; height: 30px; transition: all 0.4s; cursor: pointer;}
#snb .close-btn span{display: block; width: 100%; height: 3px; background: #333;}
#snb .close-btn span:first-child{transform: rotate(-45deg) translateX(-2px);}
#snb .close-btn span:last-child{transform: rotate(45deg) translateX(-2px);}
#snb .close-btn:hover{transform: rotate(180deg);}
#snb .lang {width: 80px; height: 31px; line-height: 31px; margin-right: 30px; position: relative; text-align: center; background: #d81820; border-radius: 16px;}
#snb .lang:after {position: absolute; content: ""; width: 1px; height: 12px; background: rgba(256,256,256,0.5); top: 10px; left: 40px; }
#snb .lang a {font-size: 14px; font-weight: 700; color: #fff; transition: all 0.3s;}
#snb .lang a:nth-child(1):hover{opacity: 0.7;}
#snb .lang a:nth-child(1){margin-right: 8px; opacity: 0.5;}
#snb .lang a:nth-child(2){}
#snb.active{opacity: 1; right: 0;}
/*#snb-overlay.active{opacity: 1; display: block;}*/

#snb > .inner{margin-top: 130px; height: auto; max-width: 100% !important; display: flex;}
#snb > .inner ul.m1{display: flex; flex-direction: column; margin: 0 auto; width: 70%;}
#snb > .inner li.m1{margin-top: 25px; position: relative; transition: all 0.3s; display: flex; flex-direction: row; align-items: center;}
#snb > .inner li.m1:after{
    position: absolute; content: ''; width: 0px; height: 1px; top: 0; bottom: 0; left: 25%; margin: auto;
    background: #2b2a58; transition: all 0.3s;
}
#snb > .inner li.m1:before{
    position: absolute; content: ''; background: url(/images/content/layout/snb_point.png) no-repeat center; top: 0;
    bottom: 0; left: 34.3%; margin: auto; width: 21px; height: 21px; transition: all 0.3s; display: none;
}
#snb > .inner li.m1.active:after{width: calc(100% - 90%);}
#snb > .inner li.m1.active:before{display: inline-block;}
#snb > .inner li.m1.active > a{color: #4947a6;}
#snb > .inner li.m1:first-child{margin-top: 0;}
#snb > .inner li.m1 > a{
    background: transparent; border: none; padding: 0; outline: 0; display: inline-block; width: 24%; height: auto;
    font-size: 46px; font-weight: 700; color: #333; text-align: left; cursor:pointer; transition: all 0.3s;
}
#snb > .inner ul.m2{display: none; position: absolute; top: 23px; left: 38%;}
#snb > .inner li.m2 {float:left; margin-right:50px;}
#snb > .inner li.m2 > a {display: block; color: #999999; font-size: 20px; font-weight: 400; transition: all 0.2s;}
#snb > .inner li.m2:hover a{color: #4947a6; font-weight: 600;}

footer{background: #222222; padding: 68px 0; color: #999;}
footer .wrap{width: 1500px; margin: 0 auto;}
footer .inner{display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
footer .logo{opacity: 0.6;}
footer .info{text-align: right;}
footer .info .call > span:nth-child(2){margin-right: 15px;}
footer .info .call span p{display: inline-block; margin-left: 5px;}
footer .copy{opacity: 0.5;}
#btn-top{
    position: fixed; content: ''; right: 45px; bottom: 45px; width: 50px; height: 50px; background: #2b2a58;
    text-align: center; display: inline-block; transition: 0.4s; z-index: 9999;
}
#btn-top img{
    transition: transform 0.3s; height: 21px; position: absolute; margin: auto; top: 0;
    left: 0; right: 0; bottom: -28px; z-index: 999;
}
#btn-top span{display: block; font-weight: 600;}
#btn-top:hover img{transform: translateY(-12px);}

@media(max-width:1860px){
    #tnb ul.m1 {width: 100%;}
}
@media(max-width:1600px){
    #tnb li.m1{font-size: 18px;}
    #tnb li.m2{font-size: 14px;}
    #snb > .inner{margin-top: 80px;}
    #snb > .inner ul.m2{top: 70px; left: 0;}
    #snb > .inner ul.m1{width: 95%;}
    #snb > .inner li.m1{margin-top: 50px;}
    #snb > .inner li.m1:after,
    #snb > .inner li.m1:before{display: none;}
    #snb > .inner li.m1.active:before{display: none;}
}
@media(max-width:1100px){
    #tnb ul.m1 {display:none;}
    body.navOn #tnb-bg{display: none;}
}
@media(max-width:768px){
    header #logo a,
    header.in-active #logo a{background-size: contain;}
    #tnb{height: 80px;}
    #logo{width: 130px;}
    #tnb .lang{display: none;}
    #site-map-toggle{width: 20px;}
    #snb:after{width: 100%; background-size: contain; height: 135px; right: 0;}
    #snb .snb-top{height: 80px;}
    #snb .close-btn{width: 25px; top: 40px; right: 40px;}
    #snb .lang{width: 70px; height: 28px; line-height: 26px; margin-right: 15px;}
    #snb .lang a{font-size: 12px;}
    #snb .lang:after{height: 9px; left: 35px;}
    #snb > .inner li.m1{justify-content: center; flex-direction: column; align-items: center; margin-top: 25px;}
    #snb > .inner li.m1 > a{text-align: center; width: 100%}
    #snb > .inner ul.m2{position: relative; width: 100%; text-align: center; top: 0;}
    #snb > .inner li.m2{margin-right: 0; float: unset; margin: 10px 0;}
    #snb > .inner li.m1 > a{font-size: 36px;}
    #snb > .inner li.m2 > a{font-size: 16px;}
    #snb > .inner li.m2:hover a{color: #999; font-weight: 400;}

    footer{padding: 40px 0;}
    footer .inner{flex-direction: column-reverse; align-items: flex-start; max-width: 100% !important;}
    footer .add h5,
    footer .add p{display: inline;}
    footer .add .mt-5{margin-top: 0.5rem !important;}
    footer .info{text-align: left; margin-bottom: 30px;}
    footer .info img{width: 100px;}
    footer .logo img{width: 110px;}
    footer .info .call > div > span p{margin-left: 0; }

    #btn-top{width: 40px; height: 40px; right: 20px; bottom: 30px;}
    #btn-top img{height: 16px; bottom: -23px;}
}
@media(max-width:430px){
    footer .info .call > span{display: block;}
    footer .info .call > span:nth-child(2){margin: 3px 0;}
}

/**/
#svb {padding-top:100px; margin-bottom:60px;}
#svb .visual {position: relative; height:490px; background-position:center center; margin-top:0; background-image:url(/images/content/menu/svb_01.jpg);}
#svb .visual-2{background-image:url(/images/content/menu/svb_02.jpg);}
#svb .visual-3{background-image:url(/images/content/menu/svb_03.jpg);}
#svb .visual-4{background-image:url(/images/content/menu/svb_04.jpg);}
#svb .visual-5{background-image:url(/images/content/menu/svb_05.jpg);}
#svb .visual:before{position: absolute; content: ''; width: 55%; height: 140px; background: #2b2a58; right: 0; display: inline-block; bottom: -10%;}
#svb .sub-name {width:100%; max-width: 1300px; position: absolute; content: ''; color: #fff; bottom: 10px; left: 50%; transform: translateX(-50%); }
#svb .menu{width: 100%; max-width: 1300px; margin: 0 auto; box-sizing: border-box; display: flex;}
#svb .menu .location{width: 44%; display: inline-block; margin-top: 27px;}
#svb .menu ul.l_ctn{display: flex; flex-direction: row;}
#svb .menu ul.l_ctn > li{font-size: 14px; color: #888; font-weight: 500; position: relative; display: inline-block; letter-spacing: -0.03em; margin-right: 25px;}
#svb .menu ul.l_ctn > li:after{position: absolute; content: ''; width: 5px; height: 8px; background: url(/images/content/layout/icon_arrow_s.png) no-repeat; right: -17px; top: 6px;}
#svb .menu ul.l_ctn > li:last-child:after{display: none;}
#svb .menu .list{width: 56%; display: inline-block; position: relative; top: -91px; height: 140px; line-height: 140px;}
#svb .menu ul.sub_depth{position: relative; display: flex; width: 100%; height: 140px;}
#svb .menu ul.sub_depth > li{flex: 0 0 17%; text-align: center; font-size: 16px; font-weight: 500; opacity: 0.6; position: relative; }
#svb .menu ul.sub_depth > li:before{position: absolute; content: ''; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 13px; background: #fff; opacity: 0.4;}
#svb .menu ul.sub_depth > li:last-child:before{display: none;}
#svb .menu ul.sub_depth > li > a{color: #fff; position: relative; display: block; transition: transform 0.4s;}
#svb .menu ul.sub_depth > li > a:after{
    position: absolute; content: ''; display: inline-block; width: 4px; height: 4px; background: #fff; transition: 0.4s;
    transform: translateX(-50%); left: 50%; bottom: 30px; opacity: 0;
}
#svb .menu ul.sub_depth > li:hover{opacity: 1;}
#svb .menu ul.sub_depth > li:hover a,
#svb .menu ul.sub_depth > li.active a{transform: translateY(-10px);}
#svb .menu ul.sub_depth > li:hover a:after,
#svb .menu ul.sub_depth > li.active a:after{bottom: 45px; opacity: 1;}
#svb .menu ul.sub_depth > li.active{opacity: 1;}

#svb .menu-2 ul.sub_depth > li,
#svb .menu-4 ul.sub_depth > li,
#svb .menu-5 ul.sub_depth > li{flex: 0 0 50%;}
#svb .menu-3 ul.sub_depth > li{flex: 0 0 25%;}
#svb .menu-1 ul.sub_depth > li:nth-child(2) > a,
#svb .menu-1 ul.sub_depth > li:nth-child(4) > a,
#svb .menu-3 ul.sub_depth > li > a{height: 100%; line-height: 20px; padding-top: 45px;}
#svb .menu-3 ul.sub_depth > li:hover a:after,
#svb .menu-3 ul.sub_depth > li.active a:after{bottom: 36px; opacity: 1;}

@media (max-width:1345px){
    #svb .sub-name,
    #svb .menu .location{padding-left: 20px;}
}
@media (max-width:1200px){
    #svb{padding-top: 80px;}
    #svb .visual:before{height: 80px; bottom: -8%; width: 60%;}
    #svb .menu .list{height: 80px; line-height: 80px; top: -41px; width: 65%;}
    #svb .menu ul.sub_depth{height: 80px;}
    #svb .menu ul.sub_depth > li{font-size: 16px;}
    #svb .menu ul.sub_depth > li > a:after{bottom: 10px;}
    #svb .menu ul.sub_depth > li:hover a:after,
    #svb .menu ul.sub_depth > li.active a:after{bottom: 20px; opacity: 1;}
    #svb .menu-3 ul.sub_depth > li > a{line-height: 18px; padding-top: 22px;}
    #svb .menu-3 ul.sub_depth > li:hover a,
    #svb .menu-3 ul.sub_depth > li.active a{transform: translateY(-8px);}
    #svb .menu-3 ul.sub_depth > li:hover a:after,
    #svb .menu-3 ul.sub_depth > li.active a:after{bottom: 9px;}
}
@media (max-width:1000px){
    #svb .visual{height: 300px; background-size: cover;}
    #svb .visual-5{background-position: 62% center;}
    #svb .visual:before{display: none;}
    #svb .menu .list{display: none;}
    #svb .menu .location{width: 100%;}
}
@media (max-width:430px){
    #svb .menu ul.l_ctn > li{font-size: 12px;}
}