@charset "UTF-8";
/*-------------------------------------------------
Author : ksi
Create date : 2019-10-15
-------------------------------------------------*/
@import url("//fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700");
/*
//heading
@mixin heading($fz, $w, $h, $color){ font-size:$fz; position: relative;padding-left: $w + 7px;
  &::before{content: '';background-color: $color;width: $w;height: $h;position: absolute;left: 0; top:$fz*.75 - ($h/2);}
}
//bullet
@mixin bul($w, $h, $color, $r){ position: relative;padding-left: $w + 7px;
  &::before{content: '';background-color: $color;width: $w;height: $h;border-radius:$r;position: absolute;left: 0; top:15px*.7 - ($h/2);}//15px은 콘텐츠 기본사이즈
}
*/
body { width: 100%; overflow-x: hidden; }

/* header */
#header { position: relative; z-index: 5; -webkit-transition: all .3s; transition: all .3s; /* top */ /* bottom */ /* header.active */ /* all-menu-active */ }

#header .bg { width: 100%; height: 0; background: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; z-index: -1; opacity: 0; }

#header .container { width: 70rem; max-width: 100%; margin: 0 auto; position: relative; }

#header .container::after { content: ""; clear: both; display: table; }

#header .top { background: #2e2e2e; position: relative; z-index: 1; height: 2.1rem; display: none; }

#header .top::after { content: ""; clear: both; display: table; }

#header .top .site-link { float: left; position: relative; }

#header .top .site-link .btn-drop { display: none; }

#header .top .site-link .list::after { content: ""; clear: both; display: table; }

#header .top .site-link .list > li { float: left; }

#header .top .site-link .list > li > a { display: block; color: #acacac; font-size: .75rem; min-width: 7rem; border-left: 1px solid #434343; text-align: center; padding: .6rem .2rem; }

#header .top .site-link .list > li:last-child > a { border-right: 1px solid #434343; }

#header .top .utils { float: right; }

#header .top .utils .link { float: left; display: block; color: #acacac; margin: 0 .7rem; padding: .5rem 0; }

#header .top .utils .link i { font-size: 1rem; vertical-align: middle; }

#header .top .utils .link span { font-family: "Montserrat"; font-size: .6rem; }

#header .bottom { background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; width: 100%; z-index: 1; }

#header .bottom .container { height: 4rem; }

#header .bottom .logo { position: absolute; top: 0; left: 0; height: inherit; width: 5.9rem; margin-right: 3.2rem; z-index: 3; }

#header .bottom .logo a { display: block; height: inherit; position: relative; background: url("../img/common/logo.png") center/contain no-repeat; }

#header .bottom nav { padding-left: 9.5rem; height: inherit; z-index: 2; position: relative; float: left; width: 52.6rem; max-width: 100%; }

#header .bottom nav #gnb { height: inherit; }

#header .bottom nav #gnb > li { display: inline-block; height: inherit; padding-left: 3rem; vertical-align: top; /* 1depth active */ }

#header .bottom nav #gnb > li:first-child { padding-left: 0; }

#header .bottom nav #gnb > li > a { display: block; height: inherit; line-height: 4rem; color: #fff; font-size: .9rem; font-weight: 600; -webkit-transition: all .3s; transition: all .3s; position: relative; }

#header .bottom nav #gnb > li > a::before { content: ''; content: ''; border-radius: 50%; width: 0.3rem; height: 0.3rem; text-align: center; background-color: #fff; position: absolute; bottom: .8rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: absolute; bottom: .8rem; left: 50%; -webkit-transform: translateX(-50%) scale(2); transform: translateX(-50%) scale(2); -webkit-transition: all .25s; transition: all .25s; opacity: 0; }

#header .bottom nav #gnb > li > a.active::before { opacity: 1; -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); }

#header .bottom nav #gnb > li .depth-info { position: absolute; top: 4rem; left: 0; width: 13.5rem; opacity: 0; -webkit-transition: all .3s; transition: all .3s; visibility: hidden; padding-top: 2rem; z-index: 1; }

#header .bottom nav #gnb > li .depth-info .title { display: block; color: #0c385a; font-size: 1.5rem; margin-bottom: 1rem; }

#header .bottom nav #gnb > li .depth-info .desc { font-size: .9rem; margin: 1rem 0 1.5rem; }

#header .bottom nav #gnb > li .depth2 { position: absolute; top: 4rem; left: 13.5rem; padding-top: 1.5rem; /* width: calc(100% - 13.5rem + 5.5rem);*/ width: 53.6rem; padding-left: 1.5rem; opacity: 0; visibility: hidden; }

#header .bottom nav #gnb > li .depth2::after { content: ""; clear: both; display: table; }

#header .bottom nav #gnb > li .depth2::before { content: ''; width: 1000%; height: calc(100% + 3rem); background: #fff; position: absolute; top: 0; left: -50%; z-index: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); min-height: 16.5rem; }

#header .bottom nav #gnb > li .depth2 > li { float: left; width: 25%; padding: 0 .7rem; }

#header .bottom nav #gnb > li .depth2 > li > a { display: block; border: 1px solid #ddd; text-align: left; font-size: .75rem; color: #333; padding: .65rem 0.5rem; position: relative; -webkit-transition: all .3s; transition: all .3s; letter-spacing: -1px; margin-bottom: 0.8rem; }

#header .bottom nav #gnb > li .depth2 > li:hover > a { border-color: #0c385a; color: #0c385a; }

#header .bottom nav #gnb > li .depth2 > li:hover > a::before { color: #0c385a; }

#header .bottom nav #gnb > li .depth2 > li > div { position: relative; z-index: 1; display: none; }

#header .bottom nav #gnb > li .depth2 > li.hr { width: 100%; height: 0; overflow: hidden; margin: 0; padding: 0; float: none; }

#header .bottom nav #gnb > li .depth2 > li.hr::after { content: ""; clear: both; display: table; }

#header .bottom nav #gnb > li .lnb-detail { padding: 0 .7rem; }

#header .bottom nav #gnb > li .lnb-detail > li { position: relative; padding-left: .6rem; margin-bottom: 0.5rem; }

#header .bottom nav #gnb > li .lnb-detail > li::before { content: ''; width: .2rem; height: .2rem; background: #adb2b6; position: absolute; top: .4rem; left: 0; -webkit-transition: all .3s; transition: all .3s; }

#header .bottom nav #gnb > li .lnb-detail > li > a { display: block; color: #767676; -webkit-transition: all .3s; transition: all .3s; }

#header .bottom nav #gnb > li .lnb-detail > li:hover::before { background-color: #0c385a; }

#header .bottom nav #gnb > li .lnb-detail > li:hover > a { color: #0c385a; text-decoration: underline; }

#header .bottom nav #gnb > li.active > a::before { opacity: 1; -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); }

#header .bottom nav #gnb > li.active .depth-info { opacity: 1; visibility: visible; }

#header .bottom nav #gnb > li.active .depth2 { opacity: 1; visibility: visible; }

#header .bottom .util { float: right; position: relative; height: inherit; z-index: 3; }

#header .bottom .util > a { display: block; color: #fff; font-size: 1.25rem; height: inherit; line-height: 4rem; float: left; padding: 0 1rem; width: 4rem; text-align: center; }

#header .bottom .util > a i { line-height: inherit; }

#header .bottom .util > a.kor { font-size: 1rem; width: 5.6rem; line-height: 3.7rem; }

#header .bottom .util > a.kor i { vertical-align: middle; }

#header .bottom .util > a.kor span { display: inlinle-block; font-size: .6rem; font-family: "Montserrat"; vertical-align: middle; }

#header .bottom .util > a.popup-open { position: absolute; right: 0; top: 100%; width: 7.5rem; height: 1.8rem; border-radius: 0 0 0.5rem 0.5rem; background-color: #2e2e2e; font-size: 0.7rem; color: #d5d5d5; line-height: 1.8rem; white-space: nowrap; }

#header .bottom .util .search-wrap { position: absolute; top: 4rem; left: 0; width: 100%; opacity: 0; visibility: hidden; -webkit-transition: all .1s; transition: all .1s; }

#header .bottom .util .search-wrap::before { content: ''; width: 1000%; height: 8.4rem; background: #0c385a; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 2; }

#header .bottom .util .search-wrap::after { content: ''; width: 15.2rem; height: 3.7rem; background: url("/english/img/common/search_wrap_bg.png") 0 0 no-repeat; position: absolute; right: 1rem; bottom: 0; z-index: 2; }

#header .bottom .util .search-wrap .inner { position: relative; z-index: 3; width: 30.5rem; margin: 0 auto; padding: 1.5rem 0 2rem; max-width: 100%; }

#header .bottom .util .search-wrap .inner .input-box { position: relative; margin-bottom: 0.7rem; }

#header .bottom .util .search-wrap .inner .input-box .form-control { background: transparent; border: 0; border-bottom: 2px solid #fff; padding: .5rem 2.5rem .5rem 0; font-size: .9rem; height: 3rem; color: #fff; }

#header .bottom .util .search-wrap .inner .input-box .btn { display: block; position: absolute; top: 0; right: 0; width: 3rem; height: 3rem; font-size: 1.2rem; color: #fff; }

#header .bottom .util .search-wrap .inner .ex-area { text-align: center; }

#header .bottom .util .search-wrap .inner .ex-area .point { background: #f26b48; color: #fff; font-size: .9rem; font-weight: 600; display: inline-block; border-radius: 1.5rem; padding: 0 .8rem; line-height: 1.2rem; margin-right: 0.6rem; }

#header .bottom .util .search-wrap .inner .ex-area .list-ex { display: inline-block; }

#header .bottom .util .search-wrap .inner .ex-area .list-ex > li { display: inline-block; color: #dee1e4; padding-right: 1rem; position: relative; }

#header .bottom .util .search-wrap .inner .ex-area .list-ex > li::before { content: ''; width: 1px; height: .6rem; background: #b3bcc3; position: absolute; top: .25rem; right: .4rem; }

#header .bottom .util .search-wrap .inner .ex-area .list-ex > li:last-child { padding-right: 0; }

#header .bottom .util .search-wrap .inner .ex-area .list-ex > li:last-child::before { display: none; }

#header .bottom .util .search-wrap .btn-close { width: 4rem; height: 4rem; position: absolute; top: -4rem; right: 4rem; background: #0c385a; color: #fff; text-align: center; font-size: 1.25rem; line-height: 4rem; }

#header .bottom .util .search-wrap.active { opacity: 1; visibility: visible; }

#header.active { background: #fff; z-index: 6; }

#header.active::before { opacity: 1; height: 100vh; z-index: 0; }

#header.active .bg { opacity: 1; z-index: 0; height: 100vh; }

#header.active .bottom { background: #0c385a; }

#header.active .util .all-menu-btn { color: #2e2e2e; }

#header.all-menu-active { position: fixed; top: 0; left: 0; width: 100%; }

#header.all-menu-active .bottom { background: #0c385a; }

/* all-menu */
.all-menu-wrap { position: fixed; top: 0; right: -100%; width: 24rem; max-width: 100%; height: 100vh; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: all .3s; transition: all .3s; }

.all-menu-wrap::before { content: ''; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; z-index: -1; -webkit-transition: all .3s; transition: all .3s; }

.all-menu-wrap .web-top { height: 4rem; background: #0c385a; position: relative; }

.all-menu-wrap .web-top .title { color: #fff; display: block; font-size: 1.1rem; line-height: 4rem; padding-left: 1rem; font-weight: 400; }

.all-menu-wrap .box { background: #fff; position: relative; height: calc(100% - 4rem); }

.all-menu-wrap .box::before { content: ''; width: 45%; height: 100%; background: #04233b; position: absolute; top: 0; left: 0; z-index: 0; }

.all-menu-wrap .depth1 { position: relative; z-index: 1; padding-top: .5rem; }

.all-menu-wrap .depth1 > li { width: 45%; /* li.active */ }

.all-menu-wrap .depth1 > li > a { display: block; color: #a2a5a9; text-align: left; padding: .7rem 1.1rem; font-size: 1rem; position: relative; }

.all-menu-wrap .depth1 > li > a::before { content: ''; content: ''; border-radius: 50%; width: 0.3rem; height: 0.3rem; text-align: center; background-color: #fff; position: absolute; top: 50%; right: .7rem; -webkit-transform: translateY(-50%) scale(2); transform: translateY(-50%) scale(2); -webkit-transition: all .25s; transition: all .25s; opacity: 0; }

.all-menu-wrap .depth1 > li.active > a { color: #fff; }

.all-menu-wrap .depth1 > li.active > a::before { opacity: 1; -webkit-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); }

.all-menu-wrap .depth1 > li.active .depth2 { display: block; }

.all-menu-wrap .depth2 { position: absolute; top: 0; left: 45%; width: 55%; display: none; padding: .5rem .7rem; max-height: 80vh; overflow-y: auto; }

.all-menu-wrap .depth2::-webkit-scrollbar { width: 3px; }

.all-menu-wrap .depth2::-webkit-scrollbar-thumb { background-color: #333; border: 3px solid #333; border-radius: 6px; }

.all-menu-wrap .depth2::-webkit-scrollbar-track { background-color: #e5e5e5; }

.all-menu-wrap .depth2 > li > a { display: block; font-size: .9rem; padding: .85rem 0; border-bottom: 1px solid #d2d2d2; color: #000; position: relative; padding-right: 0.5rem; }

.all-menu-wrap .depth2 > li.hassub { /*active*/ }

.all-menu-wrap .depth2 > li.hassub > a::before { content: '\e914'; color: #b9b9b9; font-family: "xeicon"; position: absolute; top: .8rem; right: .2rem; }

.all-menu-wrap .depth2 > li.hassub.active > a::before { content: '\e91b'; }

.all-menu-wrap .depth3 { padding: .7rem 0; display: none; }

.all-menu-wrap .depth3 > li { margin-bottom: 0.4rem; }

.all-menu-wrap .depth3 > li:last-child { margin-bottom: 0; }

.all-menu-wrap .depth3 > li > a { display: block; color: #666; }

.all-menu-wrap .depth3 > li:hover a { color: #0c385a; }

.all-menu-wrap .btn-close { display: block; position: absolute; top: 0; right: 0; color: #fff; font-size: 1.25rem; line-height: 4rem; width: 4rem; text-align: center; }

.all-menu-wrap.active { opacity: 1; visibility: visible; z-index: 6; right: 0; }

.all-menu-wrap.active::before { opacity: 1; z-index: 0; }

/* footer */
#footer { width: 100%; background: #151515; word-break: keep-all; position: relative; }

#footer .container { width: 70rem; max-width: 100%; margin: 0 auto; }

#footer .container::after { content: ""; clear: both; display: table; }

#footer .top { border-bottom: 1px solid #2d2d2d; }

#footer .top .container { height: 3rem; }

#footer .top .links { float: left; }

#footer .top .links > li { display: inline-block; vertical-align: middle; padding-right: 1.5rem; position: relative; }

#footer .top .links > li::before { content: ''; width: 1px; height: .7rem; background: #3c4046; position: absolute; top: 1.2rem; right: .7rem; }

#footer .top .links > li:last-child { padding-right: 0; }

#footer .top .links > li:last-child::before { display: none; }

#footer .top .links > li > a { color: #a7a7a7; display: block; font-size: .75rem; line-height: 3rem; }

#footer .top .links > li.point > a { color: #519585; }

#footer .top .utils { float: right; }

#footer .top .utils::after { content: ""; clear: both; display: table; }

#footer .top .utils .link-sns { float: left; }

#footer .top .utils .link-sns::after { content: ""; clear: both; display: table; }

#footer .top .utils .link-sns .link { display: block; float: left; line-height: 3rem; padding: 0 .6rem; color: #a7a7a7; }

#footer .top .utils .link-sns .link.facebook { font-size: 1rem; }

#footer .top .utils .link-sns .link.blog img { padding-bottom: 0.2rem; }

#footer .top .utils .link-sns .link.youtube { font-size: 1.15rem; }

#footer .top .utils .relate-site { float: left; width: 9.1rem; color: #a7a7a7; position: relative; }

#footer .top .utils .relate-site .btn { display: block; width: 100%; height: 3rem; line-height: 3rem; text-align: center; }

#footer .top .utils .relate-site .btn::after { content: '\e917'; font-family: "xeicon"; padding-left: .5rem; display: inline-block; }

#footer .top .utils .relate-site .list { position: absolute; bottom: 3rem; left: 0; width: inherit; max-height: 0; overflow: hidden; visibility: hidden; z-index: -1; opacity: 0; -webkit-transition: all .3s; transition: all .3s; background: #151515; font-size: .75rem; text-align: center; }

#footer .top .utils .relate-site .list a { display: block; padding: .3rem 1rem; -webkit-transition: all .3s; transition: all .3s; }

#footer .top .utils .relate-site .list a:hover { text-decoration: underline; }

#footer .top .utils .relate-site.active .btn::after { content: '\e91e'; }

#footer .top .utils .relate-site.active .list { max-height: 500rem; opacity: 1; z-index: 3; visibility: visible; padding: .5rem 0; }

#footer .bottom { padding: 1rem 0; color: #989898; }

#footer .bottom .img { float: left; width: 5.95rem; height: 1.95rem; margin-right: 0.9rem; background: url("../img/common/logo.png") center/contain no-repeat; background-size: 100%; }

#footer .bottom .img img { display: none; }

#footer .bottom .address { line-height: 1.7; float: left; }

#footer .bottom .address span { display: inline-block; margin-right: .5em; }

#footer .bottom .address span:last-of-type { margin-right: 0; }

#footer .bottom .award { float: right; }

#footer .bottom .award img { display: inline-block; vertical-align: middle; margin: 0 .4rem; }

.go_top { position: fixed; border-radius: 50%; width: 2.5rem; height: 2.5rem; text-align: center; background-color: rgba(49, 54, 65, 0.7); display: block; right: 2.5rem; bottom: 2rem; z-index: 4; color: #fff; padding-top: .25rem; -webkit-transition: all .25s; transition: all .25s; }

.go_top span { display: block; font-size: 1.25rem; padding-top: 0.1rem; }

.go_top.active { opacity: 1; visibility: visible; -webkit-transition: all .25s; transition: all .25s; }

.go_top.stick { bottom: 7rem; }

.web { display: block !important; }

.mobile { display: none !important; }

/*================================================*/
/*================== 반응형 ======================*/
/*================================================*/
@media (max-width: 1400px) { #header .top { z-index: 2; }
  #header .bottom .logo { left: 1rem; }
  #header nav { display: none; }
  #header.all-menu-active::before { height: calc(100% - 6.1rem); top: 6.1rem; }
  .all-menu-wrap { top: 4rem; }
  .all-menu-wrap .web-top { display: none; }
  .all-menu-wrap .btn-close { -webkit-transform: translateY(-100%); transform: translateY(-100%); right: 0; left: auto; background: #0c385a; }
  #footer .bottom .award { display: none; } }

@media (max-width: 900px) { #header .top .site-link .btn-drop { display: block; color: #acacac; font-size: .75rem; width: 8rem; border-right: 1px solid #434343; position: relative; padding: .6rem 1rem; }
  #header .top .site-link .btn-drop::before { content: '\e942'; font-family: "xeicon"; position: absolute; top: .6rem; right: .5rem; }
  #header .top .site-link .list { position: absolute; top: 2.1rem; left: 0; background: #2e2e2e; max-height: 0; overflow: hidden; -webkit-transition: all .3s; transition: all .3s; visibility: hidden; }
  #header .top .site-link.active .list { max-height: inherit; visibility: visible; }
  #header .top .site-link .list > li { float: none; }
  #header .top .site-link .list > li > a { min-width: auto; width: 8rem; border: 0 !important; border-bottom: 1px solid #434343; text-align: left; padding: .6rem 1rem; position: relative; }
  #header .top .site-link .list > li > a::before { content: '\e914'; font-family: "xeicon"; position: absolute; top: .6rem; right: .5rem; }
  #footer .bottom .img { display: none; } }

@media (max-width: 768px) { .web { display: none !important; }
  .mobile { display: block !important; }
  #header .top .site-link .btn-drop { width: 7.5rem; }
  #header .top .site-link .list > li > a { width: 7.5rem; }
  #header .bottom .util .search-wrap .inner { padding: 1.5rem 1rem 2rem; }
  #header .top .utils .link { margin: 0 .5rem; }
  #header .bottom .util > a.kor { display: none; }
  #footer { padding-bottom: 3rem; }
  #footer .top { padding-bottom: 1rem; }
  #footer .top .container { height: auto; }
  #footer .top .links { float: none; text-align: center; }
  #footer .top .utils { float: none; text-align: center; }
  #footer .top .utils .link-sns { float: none; }
  #footer .top .utils .link-sns .link { display: inline-block; float: none; border: 1px solid #434343; border-radius: 50%; width: 2.2rem; height: 2.2rem; padding: 0; line-height: 2.2rem; vertical-align: top; margin: 0 .3rem; }
  #footer .top .utils .link-sns .link.blog img { width: .6rem; }
  #footer .bottom .address { float: none; text-align: center; }
  #footer .top .utils .relate-site { position: absolute; bottom: 0; left: 0; width: 100%; }
  #footer .top .utils .relate-site .btn { background: #000; }
  .go_top { display: none; } }