@font-face {
  font-family: 'NEXON Lv2 Gothic Light';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'NEXON Lv2 Gothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'NEXON Lv2 Gothic Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html, body { font-family: 'NEXON Lv2 Gothic'; overflow-x: hidden; -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;}
::selection {background-color: #3d96e7; color: #fff;}

input {outline: 0;  -webkit-appearance: none; -webkit-border-radius: 0;}
input:focus {outline: 0;}
textarea {outline: 0; border: 1px solid #ddd; resize: none;}
textarea:focus {outline: 0;}
select {border-radius:0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

.light { font-family: 'NEXON Lv2 Gothic Light'; font-weight: 300;}
.reg { font-family: 'NEXON Lv2 Gothic';}
.bold { font-family: 'NEXON Lv2 Gothic Bold';}
.blue {color: #3d96e7;}

.wrapper {width: 100%; max-width: 1240px; margin: 0 auto;}

/* header */
.header {width: 100%; height: 70px; background: transparent; color: #fff; font-size: 18px; position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 1000; transition: all 0.3s; z-index: 100000; padding: 0 40px;}
.header_top {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%;}
.header.active {background: #fff;}
.header.ham {height: 100vh;}
.header_ham {position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%); z-index: 3; display: none;width: 100%; max-width: 1240px; padding: 0 30px;}
.header_ham.active {display: flex; justify-content: space-between;}
.header_ham .navis {margin: 0 2%;}
.header_ham .navi {font-size: 32px; font-weight: 700; margin-bottom: 50px; display: inline-block;}
.header_ham .menu_wrap {font-size: 20px;}
.header_ham .menu_wrap .menu {margin-bottom: 30px; transition: all 0.2s; font-size: 18px; padding-left: 5px;}
.header_ham .menu_wrap .menu:hover {color: #3d96e7; transform: translateX(5px);}
.header_ham_mo {display: none;}

.header.ham:hover {background: inherit;}
/* .header:hover {background: rgba(0,0,0,0.5);} */
/* .header:hover .header_left .logo2 {opacity: 1; z-index: 1;} */
.header_left {position: relative; width: 137px; height: 100%; z-index: 10000;}
.header_left img {position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.header_left .logo2 {opacity: 0; z-index: 1;}
.header_center.active {display: none;}
.header_center {width: 60%; display: flex;}
.header_center .navis {position: relative; flex: 1; text-align: center;}
.header_center .navi {position: relative; height: 70px; line-height: 70px; display: inline-block; text-align: center; width: 100%;}
.header_center .navi::after {content: ""; display: block; background: #3d96e7; width: 0px; height: 0px; border-radius: 50%; transform: translateX(-50%); transition: all 0.3s; position: absolute;
 left: 50%; bottom: -5px; transition: all 0.3s; z-index: 2;}
.header_center .navi:hover::after {width: 10px; height: 10px;}
.header_center .menu_wrap {width: 100%; position: absolute; top: 70px; left: 50%; transform: translateX(-50%); display: none;}
.header_center .menu {width: 100%; background: rgba(0,0,0,0.5); color: #fff; margin-bottom: 1px; height: 45px; text-align: center; line-height: 45px; font-size: 14px; transition: all 0.2s;}
.header_center .menu:hover {color: #3d96e7;}
.header_center .menu a {display: inline-block; width: 100%;}


.header_language img {width: 100%; max-width: 25px;}
.header_language label {font-size:1rem; margin-right:8px; letter-spacing: 0;}
.header_right,
.header_language {display: flex; align-items: center; cursor: pointer; z-index: 3;}
.header_language:hover {opacity: 0.75; transition: 0.3s;}


.header .hamberger {width: 22px; height: 18px; position: relative; cursor: pointer; z-index: 10000; margin-left:35px}
.header .hamberger .line {background: #fff; height: 1px; position: absolute; right: 0;}
.header .hamberger .line1 {width: 22px; top: 0; transition: all 0.3s;}
.header .hamberger .line2 {width: 22px; top: 8px; transition: all 0.3s;}
.header .hamberger .line3 {width: 22px; top: 16px; transition: all 0.3s;}
.header .hamberger .line1.active {transform: rotate(45deg) translate(6px, 5px);}
.header .hamberger .line2.active {opacity: 0;}
.header .hamberger .line3.active {transform: rotate(135deg) translate(-6px, 5px);}

.header .ham_menus {display: none; position: absolute;top: 80px; left: 0; width: 100%; color: #fff; z-index: 10000;}
.header .ham_menus .menu {cursor: pointer; padding: 20px; display: block; transition: all 0.2s;border-bottom: 1px solid rgba(0, 60, 166, 0.15);}
.header .ham_menus .menu:hover {background: #fff; color: #3d96e7;}
.header .ham_menus ul {display: none;}
.header .ham_menus ul li {padding: 13px 30px; font-size: 16px; cursor: pointer; border-bottom: 1px dashed rgba(221,221,221,0.5);}
.header .ham_menus ul li::before {content: "-"; display: inline-block; padding-right: 10px; color: #003ca6;}
.header .ham_menus ul li:hover {background: #0a3279; color: #fff;}
.header .ham_menus ul li:hover::before {color: #fff;}

.ham_bg {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: url(/img/ham.png) no-repeat center center; display: none; z-index: 2; background-size: cover;}
.ham_bg.active {display: block;}

/* sub */
.top_banner {height: 350px; position: relative;}
.top_banner .banner_bg {height: 350px;}
.top_banner .sub_name {color: #fff; font-size: 40px; line-height: 350px; text-align: center; width: 100%; position: absolute; top: 0; left: 0; height: inherit;}
.top_banner .sub_name2 {color: #fff; font-size: 22px; text-align: center; width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); line-height: 2.25rem;}

.sub_drop {width: 100%; height: 60px; line-height: 60px; background: #fff; color: #111; font-size: 18px; display: flex; justify-content: center; z-index: 100; border-bottom: 1px solid #e5e5e5;}
.sub_drop .sub_menus {cursor: pointer; width: 220px; padding: 0 10px; text-align: center; transform: rotate(-0.03deg);}
.sub_drop .sub_menus:hover {border-bottom: 2px solid #3d96e7; color: #3d96e7;}
.sub_drop .sub_menus.active {border-bottom: 2px solid #3d96e7; color: #3d96e7;}

.sub_name_lignt {font-size: 30px; margin-bottom: 5px;}
.sub_name_reg {font-size: 30px; font-weight: 600;}

.br_pc {display: none;}
.br_mo {display: block;}

/* pagination */
button {border: 0; background: none; outline: 0;}
button:focus {outline: 0;}
.pager {text-align: center; margin: 70px auto 80px auto; width: 90%; display: flex; justify-content: center; align-items: center;}
.pager button {font-size: 20px; padding: 5px 11px; cursor: pointer; transition: all 0.15s;}
.pager button.page {margin: 0 5px; border-radius: 50%;}
.pager button.page:hover {box-shadow: 0 0 0 2px #3d96e7 inset; color: #3d96e7;}
.pager button.page.active {box-shadow: 0 0 0 2px #3d96e7 inset; color: #3d96e7;}
.pager button.pager-btn {color: #c3c3c3; font-size: 40px; font-weight: 600;}
.pager button.pager-btn.active {color: #111;}
.pager button.pager-btn:hover {color: #111;}

/* footer */
.footer {width: 100%; background-color: #010711 ; color: #fff; font-size: 14px; overflow: hidden;}
.footer .wrapper {padding: 30px 0; display: flex; transform: rotate(-0.03deg);}
.footer_img {margin-right: 35px;}
.opacity {color: #828283; padding-right: 10px;}

.footer_txt {position: relative;}
.footer_txt p {display: inline-block; margin: 0 15px 10px 0; font-size: 14px; margin-bottom: 10px;}
.footer_txt div {font-size: 14px;}
.footer_txt .copy {margin-top: 30px;}
.footer_txt .sns_wrap {position: absolute; right: 0; bottom: 0; display: flex;}
.footer_txt .sns_wrap a {display: block;}
.footer_txt .sns_wrap a {display: block; transition: all 0.2s;}
.footer_txt .sns_wrap a:hover {opacity: 0.7;}
.footer_txt .sns_wrap a:last-child {margin-left: 10px;}
.footer_txt .sns_wrap a img {width: 40px; height: 40px;}

.footer .footer_rt {display: flex; margin-left: 1.2%;}
.footer .footer-rel {/* position: absolute; right: 0; */ transition: all 0.3s; position: relative;}
.footer .arrow-down {display: inline; margin-left: 5px;}
.footer .site-btn {display: block; padding-bottom: 10px;}
.footer .site-btn:hover {color: #3d96e7;}
.footer .drop_wrap {position: absolute; top: 10px; font-size: 13px;}
.footer .drop-menu {text-align: center;}
.footer .drop-menu a {padding: 8px 0; border-bottom: 1px solid #fff; transition: all 0.2s; display: block;}
.footer .drop-menu a:hover {color: #3d96e7;}
/* .footer .drop-menu a:nth-child(1) {border-top: 1px solid #fff;} */
.footer .drop-menu a:nth-child(1):hover {color: #3d96e7;}
/* .footer .drop-menu:not(:nth-child(1)) {margin-top: 11px;} */
.footer .drop-menu:nth-child(1) {margin-top: 11px;}

.footer .footer-inquiry {/* position: absolute; right: 130px; */ transition: all 0.3s; margin-left: 10px;}
.footer .footer-inquiry:hover {color: #3d96e7;}
.footer .footer-inquiry i {margin-left: 5px;}


.back_btn {width: 190px; height: 50px; line-height: 50px; border: 1px solid #111; cursor: pointer; display: block; text-align: center; margin: 80px auto 0 auto; transform: rotate(-0.03deg);}
.pop_bg {display: none; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1001;}

.popup {display: none; width: 90%; max-width: 700px; height: 100%; max-height: 70vh; position: fixed; top: 51%; left: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 10px 10px 10px rgba(0,0,0,0.2); color: #111; padding: 40px; font-size: 13px; line-height: 1.5rem; border-radius: 15px; z-index: 99999;}
.popup .x_btn {color: #fff; font-size: 45px; position: absolute; display: inline-block; top: -45px; right: 0; cursor: pointer; z-index: 1000;}
.popup_bg_ie {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 100; transition: all 0.3s; display: none;}
.popup.ie_pop {font-size: 18px; line-height: 180%; text-align: center; width: auto; height: 20vh; align-items: center; display: none;}

/* 반응형 */
@media screen and (max-width: 1300px) {
  .footer .wrapper {padding: 30px 50px;}
  .wrapper {padding: 0 30px;}
  .header {font-size: 16px;}
  .header_ham .navi {font-size: 24px; margin-bottom: 40px;}
  .header_ham .menu_wrap {font-size: 16px;}
  .header_language img {width: 100%; max-width: 25px;}
  .header_language label {font-size:1rem; margin-right:8px; letter-spacing: 0;}
  .header_right,
  .header_language {display: flex; align-items: center; cursor: pointer;}
  .header_language:hover {opacity: 0.75; transition: 0.3s;}

  .header .hamberger {margin-left:25px}
}

@media screen and (max-width: 1000px) {
  .sol_title h2 {font-size: 24px;}
  .footer .wrapper {display: block; padding: 30px;}
  .footer_img {margin-bottom: 10px;}
  .footer .wrapper p {margin: 0 15px 5px 0; font-size: 12px;}
  .footer_txt div {font-size: 12px;}
  .footer_txt .copy {margin-top: 15px;}
  .footer .footer-rel {font-size: 12px;}
  .footer .drop-menu {width: auto; font-size: 12px; bottom: -35px; left: 0; right: auto;}
  .drop_btn .arrow-down { padding-left: 29px !important;}
  .header {font-size: 14px;}
  .header_ham .navi {font-size: 20px; margin-bottom: 30px;}
  .header_ham .menu_wrap {font-size: 14px;}
  .footer .footer_rt {margin-left: 0; margin-top: 10px; font-size: 12px;}
  .footer .footer-rel {position: static;}
  .footer .drop_wrap {position: static;}
  .footer .site-btn {padding-bottom: 0;}
  .footer .drop-menu:nth-child(1) {margin-top: 3px;}
  .footer .drop-menu a {padding: 4px 0;}
  .header_language label {font-size:14px; margin-right:8px; letter-spacing: 0;}
}

@media screen and (max-width: 860px) {
  .sub_drop {width: 100%; font-size: 16px; display: flex;}
}

@media screen and (max-width: 768px) {
  .br_pc {display: block;}
  .br_mo {display: none;}
  .header_center {display: none;}
  .top_banner .sub_name {font-size: 24px;}
  .pager {margin: 50px auto 100px auto;}
  .pager button {font-size: 16px;}
  .pager button.page {margin: 0 5px;}
  .pager button.pager-prev {margin-right: 15px;}
  .pager button.pager-next {margin-left: 15px;}
  .top_banner .sub_name2 {padding: 0 30px;}
  .sub_name_lignt {font-size: 18px;}
  .sub_name_reg {font-size: 18px;}

  .header_ham.active {flex-direction: column;}
  .header_ham {text-align: center;}
  .header_ham .navis {margin-bottom: 30px;}
  .header_ham .navi {cursor: pointer; margin-bottom: 15px;}
  .header_ham .menu_wrap {display: none;}
  .header_ham .menu_wrap .menu {font-size: 16px; margin-bottom: 20px;}
  .footer_txt {position: static;}
  .footer .wrapper {position: relative;}
  .footer_txt .sns_wrap {right: 15px; bottom: 15px;}
  .footer_txt .sns_wrap a img {width: 30px; height: 30px;}
  .footer_txt .sns_wrap a:last-child {margin-left: 7px;}
}

@media screen and (max-width: 540px) {
  .header .wrapper {padding: 0 30px;}
  .top_banner {height: 200px;}
  .top_banner .banner_bg {height: 200px;}
  .top_banner .sub_name {line-height: 250px; font-size: 20px;}
  .sub_drop {font-size: 14px; padding: 0 20px;}

  .pager {margin: 30px auto; width: 100%;}
  .pager button {font-size: 14px; padding: 3px 8px;}
  .pager button.page {margin: 0 2px;}
  .pager button.pager-prev {margin-right: 3px;}
  .pager button.pager-next {margin-left: 3px;}

  .footer .wrapper p {font-size: 10px;}
  .footer_txt div {font-size: 10px;}
  .footer .footer_rt {font-size: 10px;}
  .footer .footer-rel {font-size: 10px;}
  .footer .drop-menu {font-size: 10px;}

  .sub_drop .sub_menus {width: auto;}
  .top_banner .sub_name2 {line-height: 1.5rem;}
  .sub_name_lignt {font-size: 14px;}
  .sub_name_reg {font-size: 14px;}
  .top_banner .sub_name2 {top: 70%;}
  .back_btn {margin: 0 auto 0 auto; font-size: 13px; width: 120px; height: 40px; line-height: 40px;} 
  .header_ham .navi {font-size: 22px;}
  .header_ham .navis {margin-bottom: 25px;}
  .header_ham .menu_wrap .menu {margin-bottom: 12px;}
}

@media screen and (max-width: 400px) {
  .top_banner .sub_name2 {line-height: 1.25rem;}
  .sub_name_lignt {font-size: 12px; display: inline;}
  .sub_name_reg {font-size: 12px; display: inline;}
}