@charset "UTF-8";

#wrap { outline: 0; }
#header { width: 128rem; max-width: calc(100% - 6rem); margin-left: auto !important; margin-right: auto !important; position: relative; z-index: 5; width: 100%; max-width: 100%; height: 8.5rem; color: #333; }
#header::after { display: block; clear: both; width: 100%; height: 0; content: ''; }
#header .search .control.open { font-size: 2.5rem; overflow: hidden; position: absolute; right: 8.4rem; bottom: 2.7rem; width: 3rem; height: 3rem; color: #333; text-align: center; line-height: 3rem; }
#header .search .control.open::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; content: ''; }
#header .search .group { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; top: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 100%; width: 100% !important; -webkit-transition: all 0.2s; transition: all 0.2s; }
#header .search .group::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background-color: #1D1D1D; }
#header .search .form { width: 60rem; max-width: calc(100% - 6rem); margin-left: auto !important; margin-right: auto !important; position: relative; margin: 5rem 0; color: #000; line-height: 6rem; }
#header .search .form label { font-size: 2rem; position: absolute; left: 0; top: 0; font-weight: 500; }
#header .search .form input { width: 100%; height: 6rem; padding-left: 1rem; font-size: 2.6rem; border: 0 none; background-color: #1D1D1D; color: #fff; border-bottom: 2px  solid #fff; }
#header .search .form input::-webkit-input-placeholder { color: #888888; }
#header .search .form input:-ms-input-placeholder { color: #888888; }
#header .search .form input::-ms-input-placeholder { color: #888888; }
#header .search .form input::placeholder { color: #888888; }
#header .search .form button { font-size: 3.6rem; overflow: hidden; position: absolute; right: 0; top: 0; width: 6rem; height: 6rem; text-align: center; line-height: 6rem; color: #D2D2D2; }
#header .search .form button::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; content: ''; }
#header .search .close { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 50%; width: 5rem; height: 5rem; color: #fff; line-height: 5rem; overflow: hidden; -webkit-transform: translate(63rem, -50%); transform: translate(63rem, -50%); }
#header .search .close::before { content: ''; display: block; font-family: "xeicon"; font-size: 5rem; }
#header .search.active { -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); }
#header .search.active .group { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; }
#hnb { position: absolute; top: 3.2rem; left: auto; right: 14.2rem; width: auto; font-size: 1.5rem; }
#hnb::before { display: none; }
#hnb li { position: relative; display: inline-block; color: #767676; }
#hnb li::before { content: ''; position: absolute; top: 0.6rem; right: -1rem; width: 1px; height: 10px; background-color: #CECECE; }
#hnb li.active { display: none; }
#hnb li + li { margin-left: 1.8rem; }
#hnb li:last-child::before { display: none; }
#logo { float: left; /*width: 21.5rem; height: 4.5rem;*/ margin: 1.6rem 0 0 4.2rem; }
#logo a { display: block; }
#gnb1 > ul { float: right; width: calc(100% - 56rem); margin: 2.8rem 26.9rem 0 0; text-align: center; }
#gnb1 > ul > li { display: inline-block; margin: 0 3rem; padding-bottom: 2.5rem;}

.translated-ltr #gnb1 > ul > li > a {
  font-size: 1.4rem;
}
.translated-ltr #gnb1 > ul > li { margin: 0 1.5rem;    max-width: 120px;
    vertical-align: top;}
.translated-ltr #gnb1 > ul {
    margin-top: 3rem;
}
#gnb1 > ul > li > a { position: relative; font-size: 1.8rem; font-weight: 600; }
#gnb1 > ul > li > a::after { content: ''; position: absolute; bottom: -3.3rem; left: 0; height: 5px; background-color: #313131; width: 100%; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; }
#gnb1 > ul > li.active .submenu { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; color: #333; -webkit-box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1); box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1); }
#gnb1 > ul > li.active > a::after { -webkit-transform: scaleX(100%); transform: scaleX(100%); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; }
#gnb1 > ul > li .submenu > ul > li { float: left; width: 33.33%; padding: 1rem; }
#gnb1 > ul > li .submenu > ul > li > a { position: relative; display: block; padding: 1.3rem 2.3rem; font-size: 1.7rem; color: #333; text-align: left; }
#gnb1 > ul > li .submenu > ul > li > a::before { content: ''; position: absolute; right: 2rem; top: 1.4rem; font-family: "xeicon"; font-size: 1.5rem; }
#gnb1 > ul > li .submenu > ul > li > a::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #dddddc; -webkit-transition: all 0.1s; transition: all 0.1s; }
#gnb1 > ul > li .submenu > ul > li > a.linkWindow::before { content: ''; }
#gnb1 > ul > li .submenu > ul > li > div { padding: 1.5rem 1.2rem .5rem; }
#gnb1 > ul > li .submenu > ul > li > div ul li a { position: relative; padding-left: 1rem; line-height: 1.5; display: inline-block; }
#gnb1 > ul > li .submenu > ul > li > div ul li a::before { content: ''; position: absolute; top: .8rem; left: 0; width: 5px; height: 5px; background-color: #afafb0; border-radius: 100%; -webkit-transition: all 0.2s; transition: all 0.2s; }
#gnb1 > ul > li .submenu > ul > li > div ul li a:hover, #gnb1 > ul > li .submenu > ul > li > div ul li a:focus { font-weight: 600; text-decoration: underline; }
#gnb1 > ul > li .submenu > ul > li > div ul li a:hover::before, #gnb1 > ul > li .submenu > ul > li > div ul li a:focus::before { background-color: #292c3c; -webkit-transition: all 0.2s; transition: all 0.2s; }
#gnb1 > ul > li .submenu > ul > li > div ul li a.linkWindow { position: relative; }
#gnb1 > ul > li .submenu > ul > li > div ul li a.linkWindow::after { content: ''; font-family: "xeicon"; padding-left: 0.3rem; vertical-align: top; }
#gnb1 > ul > li .submenu > ul > li.active > a::after { border: 2px solid #292C3C; -webkit-transition: all 0.1s; transition: all 0.1s; }
#gnb1 > ul > li.lnb1 .submenu .desc { background: url("../img/layout/menu_bg02.png") no-repeat top right; background-size: cover; }
#gnb1 > ul > li.lnb2 .submenu .desc { background: url("../img/layout/menu_bg01.png") no-repeat top right; background-size: cover;}
#gnb1 > ul > li.lnb3 .submenu .desc { background: url("../img/layout/menu_bg03.png") no-repeat top right; background-size: cover;}
#gnb1 > ul > li.lnb4 .submenu .desc { background: url("../img/layout/menu_bg04.png") no-repeat top right; background-size: cover;}
#gnb1 > ul > li.lnb5 .submenu .desc { background: url("../img/layout/menu_bg05.png") no-repeat top right; background-size: cover; }
#gnb1 > ul > li.lnb6 .submenu .desc { background: url("../img/layout/menu_bg06.png") no-repeat top right; background-size: cover;}
#gnb1 > ul > li.lnb7 .submenu .desc { background: url("/main/img/layout/menu_bg07.png") no-repeat top right; background-size: cover;}
#gnb1 > ul > li.lnb7.active > a { color: #46A022  !important; }
#gnb1 > ul > li.lnb7.active > a::after { background-color: #46A022; }
#gnb1 > ul > li.lnb7 .submenu::before { background-color: #076758; }
#gnb1 > ul > li.lnb7 .submenu .desc { height: 39.4rem; background: url("../img/layout/menu_bg_edu.png") no-repeat center center;border-bottom-right-radius: 6rem; }
#gnb1 > ul > li.lnb7 .submenu .desc .menu_title { color: #000000; }
#gnb1 > ul > li.lnb7 .submenu .desc .menu_title::before { background-color: #000; }
#gnb1 > ul > li.lnb7 .submenu .desc .m_txt { color: rgba(0, 0, 0, 0.7); }
#gnb1 > ul > li.lnb7 .submenu > ul > li > a { color: #fff; }
#gnb1 > ul > li.lnb7 .submenu > ul > li.active a::after { border-color: #fff; }
#gnb1 > ul > li.lnb7 .submenu > ul > li > div ul li a { color: #fff; }
#gnb1 > ul > li.lnb7 .submenu > ul > li > div ul li a::before { background-color: #fff; }
#gnb1 > ul .submenu { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; display: block !important; position: absolute; left: -1rem; top: 100%; z-index: 1; width: calc(100% + 2rem) !important; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
#gnb1 > ul .submenu::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background-color: #fff; -webkit-box-shadow: inset 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1); box-shadow: inset 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1); }
#gnb1 > ul .submenu::after { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-color: #eee; content: ''; }
#gnb1 > ul .submenu .desc { font-size: 1.7rem; float: left; width: 30%; max-width: 57.2rem; padding-left: 31rem; height: 39rem; text-align: center; background: url("/main/img/layout/menu_bg.png") no-repeat center center; text-align: left; background-size: 100% 100%; border-radius: 0 0 50px 0; }
#gnb1 > ul .submenu .desc > * { width: 100%; max-width: 31rem; float: right; }
#gnb1 > ul .submenu .desc .menu_title { font-size: 3rem; position: relative; display: block; padding: 7.3rem 0 2.4rem; margin-bottom: 2.4rem; color: #fff; }
#gnb1 > ul .submenu .desc .menu_title::before { content: ''; position: absolute; bottom: 0; left: 0; width: 2.7rem; height: 0.3rem; background-color: rgba(255, 255, 255, 0.8); }
#gnb1 > ul .submenu .desc .m_txt { color: rgba(255, 255, 255, 1); }
#gnb1 > ul .submenu > ul { font-size: 1.6rem; line-height: 1.75; float: left; width: 70%; max-width: 108.3rem; height: auto; max-height: 62.2rem; padding: 2.5rem 4.5rem; text-align: left; }
#gnb2 .control { font-size: 2.4rem; overflow: hidden; position: absolute; z-index: 3; color: #333; text-align: left; line-height: 3rem; display: block; bottom: 3.3rem; right: 3.9rem; width: 2.3rem; height: 1.7rem; padding-top: 1.8rem; border-top: 2px solid #222; }
#gnb2 .control::before { content: ''; position: absolute; top: 0.7rem; left: 0; width: 2.3rem; height: 2px; background-color: #222; }
#gnb2 .control::after { content: ''; position: absolute; bottom: 0; left: 0; width: 2.3rem; height: 2px; background-color: #222; }
#gnb2 .control.close { display: none; width: 3.7rem; height: 3.7rem; line-height: 3.7rem; border: 0 none !important; -webkit-transform: rotate(0); transform: rotate(0); -webkit-transition: all 0.2s; transition: all 0.2s; padding-top: 0; }
#gnb2 .control.close::before { content: ''; width: 3.7rem; height: 3.7rem; font-family: "xeicon"; font-size: 3.7rem; color: #fff; background: none; top: 0; }
#gnb2 .control.close::after { display: none; }
#gnb2 .control.close:hover, #gnb2 .control.close:focus { -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 0.2s; transition: all 0.2s; background: none; }
#gnb2 > ul { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; margin-top: -6rem; display: inline-block; width: calc(100% + 0px); position: absolute; left: 50%; top: 10rem; z-index: 2; color: #fff; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; max-width: 128rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding-top: 3rem; }
#gnb2 > ul > * { clear: none; float: left; width: calc(25% - 0px); margin: 6rem 0px 0 0; }
#gnb2 > ul > *:nth-child(2n + 1) { clear: none; }
#gnb2 > ul > *:nth-child(3n + 1) { clear: none; }
#gnb2 > ul > *:nth-child(4n + 1) { clear: both; }
#gnb2 > ul::before { content: ''; position: absolute; top: -4rem; left: -50%; width: 1000%; height: calc(100% + 10rem); z-index: -1; background-color: #1D1D1D; }
#gnb2 > ul > li { position: relative; padding: 0 2.6rem; text-align: left; display: block; }
#gnb2 > ul > li:nth-child(1)::before, #gnb2 > ul > li:nth-child(2)::before, #gnb2 > ul > li:nth-child(3)::before, #gnb2 > ul > li:nth-child(4)::before { content: ''; position: absolute; left: 0; top: -13rem; width: 1px; height: 1000%; max-height: 98rem; background-color: #303030; }
#gnb2 > ul > li:nth-child(4)::after { content: ''; position: absolute; right: 0; top: -13rem; width: 1px; height: 1000%; max-height: 98rem; background-color: #303030; }
#gnb2 > ul > li > a { position: relative; display: block; font-weight: 600; color: #fff; font-size: 2.5rem; }
#gnb2 > ul > li > a::before { content: ''; position: absolute; left: -2.6rem; top: 0.2rem; width: 6px; height: 3.4rem; background: transparent linear-gradient(167deg, #C3CD2A 0%, #45A022 100%) 0% 0% no-repeat padding-box; }
#gnb2 .submenu a { padding-left: 1.3rem; -webkit-transition: all 0.2s; transition: all 0.2s; color: #fff; }
#gnb2 .submenu > ul { padding: 2.2rem 0; }
#gnb2 .submenu > ul > li > a { position: relative; font-size: 1.8rem; line-height: 2rem; }
#gnb2 .submenu > ul > li > a::before { content: ''; position: absolute; left: 0; top: 0.8rem; width: 3px; height: 3px; border-radius: 100%; background: #fff; }
#gnb2 .submenu > ul > li:hover > a::after { width: calc(100% - 1.1rem); -webkit-transition: all 0.15s; transition: all 0.15s; }
#gnb2 .submenu > ul > li + li { margin-top: 1.5rem; }
#gnb2 .submenu div { padding-top: 1.5rem; margin-bottom: 3.6rem; }
#gnb2 .submenu div a { color: #ababab; font-size: 1.6rem; line-height: 1.8rem;display: inline-block; -webkit-transition: all 0.2s; transition: all 0.2s; }
#gnb2 .submenu div a:hover, #gnb2 .submenu div a:focus { color: #fff; -webkit-transition: all 0.2s; transition: all 0.2s; }
#gnb2 .submenu div li + li { margin-top: 1.2rem; }
#gnb2 .submenu a.linkWindow { position: relative; }
#gnb2 .submenu a.linkWindow::after { content: ''; font-family: "xeicon"; padding-left: 0.3rem; vertical-align: top; }
#gnb2.active .open { display: none; }
#gnb2.active .close { display: block; }
#gnb2.active > ul { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; width: 100%; }
#footer { position: relative; z-index: 0; width: 128rem; max-width: calc(100% - 6rem); margin-left: auto !important; margin-right: auto !important; color: #fff; padding-bottom: 8rem; }
#footer::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background-color: #212426; }
#footer .related { position: absolute; right: 0; bottom: 9.5rem; }
#footer .related .group { float: left; position: relative; width: 26rem; height: 6rem; margin-left: 0.5rem; color: #ababab; background-color: #151A1D; }
#footer .related .group.active .label::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#footer .related .group.active .list { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; padding: 2rem 0; -webkit-transition: all 0.2s; transition: all 0.2s; }
#footer .related .group.active .list a { line-height: 3rem; }
#footer .related a { display: block; position: relative; padding: 0 2rem; line-height: 6rem; }
#footer .related .label::after { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; font-size: 1.8rem; right: 2rem; color: #999999; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; }
#footer .related .list { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; left: 0; bottom: 100%; width: 100% !important; margin-bottom: 0.5rem; background-color: #444; color: #fff; line-height: 2.5rem; }
#footer .mark { position: absolute; right: 30rem; bottom: 6.5rem; }
#footer .btn_top { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: fixed; left: 50%; bottom: 26rem; width: 7rem; height: 7rem; margin-left: 78rem; border-radius: 100%; background-color: #767676; color: #fff; text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s; }
#footer .btn_top::before { display: inline-block; position: relative; top: 1px; font-family: "xeicon"; vertical-align: top; display: block; padding-top: 0.5rem; content: ''; }
#footer .btn_top:hover, #footer .btn_top:focus { -webkit-animation: updown 0.75s 0.25s infinite alternate; animation: updown 0.75s 0.25s infinite alternate; }
#footer .btn_top.active { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; width: 7rem; height: 7rem; }
@-webkit-keyframes updown { 0% { margin-bottom: 0; }
 100% { margin-bottom: 0.5rem; } }
@keyframes updown { 0% { margin-bottom: 0; }
 100% { margin-bottom: 0.5rem; } }
#fnb { margin-bottom: 3rem; border-bottom: 1px solid #333; padding: 2.1rem 0; }
#fnb::after { content: ''; display: block; clear: both; }
#fnb .fnb1 { float: left; }
#fnb .fnb1 li { display: inline; line-height: 2.4rem; }
#fnb .fnb1 li {margin: 0 1.5rem;}
#fnb .fnb1 li.policy a { color: #FEA929; font-weight: 600; }
#fnb .fnb2 { float: right; height: 3rem; }
#fnb .fnb2 li { display: inline-block; }
#fnb .fnb2 li + li { margin-left: 0.7rem; }
#fnb .fnb2 a { font-size: 1.7rem; display: inline-block; overflow: hidden; width: 3rem; height: 3rem; line-height: 3rem; text-align: center; color: #FFF; }
#fnb .fnb2 a::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; -webkit-transition: all 0.2s; transition: all 0.2s; }
#fnb .fnb2 .facebook a { background-color: #4267B2; }
#fnb .fnb2 .facebook a::before { content: ''; }
#fnb .fnb2 .youtube a { background-color: #FF0000; }
#fnb .fnb2 .youtube a::before { content: ''; }

#siteinfo { position: relative; padding-left: 25rem; padding-right: 40rem; }
#siteinfo .logo { position: absolute; left: 0; top: .6rem; }
#siteinfo .copyright { font-size: 1.6rem; margin-top: 1rem; font-weight: 100; opacity: 0.6; }
#siteinfo address{display: block;}
#siteinfo .tel { display: inline-block; }
#siteinfo .tel { position: relative;  }
/*#siteinfo .tel::before { content: ''; position: absolute; width: 2px; height: 13px; top: 0.5rem; left: 2rem; background-color: #555; }*/
#siteinfo span { margin-right: 1rem; }
#siteinfo .webwatch{position: absolute; right: 29rem; top: 0;}
#siteinfo .webwatch img{width: 10.5rem;}