@font-face {
  font-family: 'netmarbleL';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.1/netmarbleL.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'netmarbleM';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.1/netmarbleM.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'netmarbleB';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.1/netmarbleB.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'HallymGothic-Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2204@1.0/HallymGothic-Bold.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

html, body {font-family: 'Pretendard', sans-serif; letter-spacing: -0.03em; font-size:16px; font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height:normal; color:#111; overflow-x: hidden; background: #fff;}
body {overflow: hidden;}
img::selection {background: transparent;}

.netl {font-family: 'netmarbleL';}
.netm {font-family: 'netmarbleL'; font-weight: 600;}
.netb {font-family: 'netmarbleB';}
.pretend {font-family: 'Pretendard', sans-serif;}
.hallym {font-family: 'HallymGothic-Bold';}

.thin {font-weight: 100;}
.light {font-weight: 300;}
.reg {font-weight: 400;}
.md {font-weight: 500;}
.semi {font-weight: 600;}
.bold {font-weight: 700;}
.extra {font-weight: 800;}
.heavy {font-weight: 900;}

.fff {color: #fff;}
.blue {color: #0B4198;}
.red {color: #CD2A2A;}

.wrapper {width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px;}
.br_mo {display: none;}
.flex {display: flex; align-items: center; width: 100%;}
.br_1024 {display: none;}
.br_768 {display: none;}
.br_540 {display: none;}

.fadeAni {transform: translateY(80px); opacity: 0; transition: transform 1s ease, opacity 1s ease;}
.fadeAni.active {transform: translateY(0); opacity: 1;}
.active .fadeAni {transform: translateY(0); opacity: 1;}

.swiper-button-prev::after,
.swiper-button-next::after {display: none;}
.swiper-button-prev,
.swiper-button-next {margin-top: 0 !important;}

#searchBar {width: 100%; display: flex; align-items: center; justify-content: center; padding: 25px 20px; margin-bottom: 40px; background: #F6F6F6;}
#searchBar .searchBox {position: relative;}
#searchBar .searchBox input {width: 500px; height: 50px; max-width: 100%; background: #fff; border: 1px solid #e6e6e6; border-radius: 5px; padding: 0 55px 0 20px;}
#searchBar .searchBox button {width: 55px; height: 100%; background: url(/img/icon_search.png) no-repeat center center; background-size: 24px; position: absolute; top: 0; right: 0;}

.black_btn {width: 250px; height: 55px; display: flex; align-items: center; justify-content: center; column-gap: 15px; background: #111; color: #fff; margin: 50px auto 0;}
.black_btn.margin_80 {margin: 80px auto 0;}
.black_btn span {font-size: 1.0625rem; font-weight: 700;}
.black_btn img {width: 24px; transition: transform .2s;}
.black_btn:hover img {transform: translateX(5px);}

/***********************************/


/* 상단 */
#header {width:100%; height: 100px; background: #fff; position: fixed; top: 0; left: 0; z-index: 99999; transition: all .3s;}
#header.sm_header {height: 70px; box-shadow: 0 7px 15px rgba(0,0,0,0.05); background: rgba(255,255,255,0.9); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}
@supports (-webkit-backdrop-filter: none) { 
  #header.sm_header {-webkit-backdrop-filter: blur(5px);}
}
#header.sm_header .logo img {height: 57px;}
#header.sm_header nav ul.depth1 > li.highlight::before {height: calc(100% + 10px); top: -10px;}
#header.sm_header nav ul.depth1 > li.highlight:hover::before {top: 0;}
#header.sm_header nav ul.depth1 > li::after {bottom: 15px;}

#header .wrapper {height: 100%; display: flex; align-items: center;}
#header .wrapper > .flex {display: flex; align-items: center; justify-content: space-between; height: 100%; position: relative; z-index: 10000;}
#header .logo {height: 100%; display: flex; align-items: center;}
#header .logo img {height: 67px; transition: width .3s;}
#header .header_rt {height: 100%; display: flex; align-items: center;}
#header .header_nav {justify-self: center; position: relative;}
#header nav {position: relative; font-size: 1em; text-align: center; height: 100%; display: flex; align-items: center; font-family: 'netmarbleL'; font-weight: 700;}
#header nav ul.depth1 {display: flex; align-items: center; column-gap: 30px; height: 100%;}
#header nav ul.depth1 > li {position: relative; height: 100%;}
#header nav ul.depth1 > li > a {padding: 0 20px; height: 100%; display: flex; align-items: center; transition: color .3s;}
#header nav ul.depth1 > li::after {content: ""; display: block; width: 0; height: 2px; background: #0B4198; transition: width .3s, bottom .3s; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);}
#header nav ul.depth1 > li:hover > a {color: #0B4198;}
#header nav ul.depth1 > li:hover::after {width: calc(100% - 30px);}

#header nav ul.depth1 > li.highlight a {display: flex; align-items: center; column-gap: 8px; color: #0B4198; transition: all .3s;}
#header nav ul.depth1 > li.highlight a img {width: 19px; transition: filter .3s;}
#header nav ul.depth1 > li.highlight::before {content: ""; display: block; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; background: transparent; box-shadow: 0 0 0 2px #0B4198 inset; border-radius: 0 0 15px 15px; box-sizing: border-box; z-index: -1; transition: all .3s;}
#header nav ul.depth1 > li.highlight::after {display: none;}
#header nav ul.depth1 > li.highlight:hover::before {background: linear-gradient(299.33deg, #0B4198 0%, #4C79EC 100%); box-shadow: none; top: 0;}
#header nav ul.depth1 > li.highlight:hover a {transform: translateY(15px); color: #fff; }
#header nav ul.depth1 > li.highlight:hover a img {filter: invert(1) brightness(3);
animation: anchorAni 0.75s; animation-delay: .15s;}

@keyframes anchorAni {
  50% {transform: rotate(-15deg);}
  100% {transform: rotate(0);}
}

#header nav ul.depth2 {position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; top: 100%; width: max-content; text-align: center; background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); padding: 15px 30px;}
@supports (-webkit-backdrop-filter: none) { 
  #header nav ul.depth2 {-webkit-backdrop-filter: blur(5px);}
}
#header nav ul.depth2 a {transition: color .3s; font-size: 0.95em;}
#header nav ul.depth2 a:not(:last-child) {margin-bottom: 12px;}
#header nav ul.depth2 a:hover {color: #0B4198;}

#headerHam {position: fixed; left: 0; background: #fff; width: 100%; height: 100vh; top: -100vh; transition: top 0.3s; z-index: 9999; display: none;}
#headerHam.open {top: 0;}


.hamburger {display: none;}
.hamburger .line{
  width: 20px;
  height: 2px;
  background-color: #0B4198;
  display: block;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hamburger:hover{cursor: pointer;}

.hamburger.is-active{
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.hamburger.is-active .line:nth-child(2){width: 0px;}
.hamburger.is-active .line:nth-child(1),
.hamburger.is-active .line:nth-child(3){
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.hamburger.is-active .line:nth-child(1){
  -webkit-transform: translateY(7px);
  -ms-transform: translateY(7px);
  -o-transform: translateY(7px);
  transform: translateY(7px);
}

.hamburger.is-active .line:nth-child(3){
  -webkit-transform: translateY(-7px) rotate(90deg);
  -ms-transform: translateY(-7px) rotate(90deg);
  -o-transform: translateY(-7px) rotate(90deg);
  transform: translateY(-7px) rotate(90deg);
}


/* 하단 */
#footer .partner_wrap {padding: 40px 20px; background: #fff;}
#footer .partner_wrap ul {column-gap: 80px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
#footer .partner_wrap ul li {max-width: calc( (100% - 320px)/5 );}

#footer .footer_info_wrap {background: #F6F6F6; padding: 50px 20px 55px; text-align: center;}
#footer .footer_info_wrap .logo img {width: 91px;}
#footer .footer_info_wrap .name {margin: 15px 0 30px; font-size: 1.0625em; line-height: 141%; /* color: #0B4198; */ color: #777;}
#footer .footer_info_wrap .name .bold {font-size: 1.795em; margin-bottom: 9px;}
#footer .footer_info_wrap .name .bold > span {color: #fff; padding: 0 3px; position: relative;}
#footer .footer_info_wrap .name .bold > span::after {content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* background: #0B4198; */ background: #777; width: 100%; height: calc(100% - 8px);}
#footer .footer_info_wrap .name .bold > span > span {position: relative; z-index: 2;}
#footer .footer_info_wrap .name .reg {font-weight: 300; letter-spacing: 4.25px; width: fit-content; margin: 0 auto; padding-left: 7px;}
#footer .footer_info_wrap .name .reg span {font-weight: 700;}
#footer .footer_info_wrap ul {display: flex; justify-content: center; align-items: center; color: #aaa; font-size: 0.875em; letter-spacing: 0;}
#footer .footer_info_wrap ul li:not(:last-child) {display: flex; align-items: center;}
#footer .footer_info_wrap ul li:not(:last-child)::after {content: ""; display: block; margin: 0 15px; width: 1px; height: 13px; background: #ccc;}

.main-contact__content {width: 100%; height: 250px; margin: 0 auto; position: relative; display: table;}
.main-contact__bg {width: 0; height: 100%; position: absolute; top: 0; left: 50%; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); /* background: #111; */ background: url(/img/footer_bg.jpg) no-repeat center center; background-size: cover; transition: width 1s ease-in-out; transform-origin: center;}
.main-contact__text {color:#fff; font-size: 1.875em; height: 100%;}
.main-contact__text .wrapper {display: flex; justify-content: space-between; align-items: center; padding: 0 110px; height: 100%; position: relative; opacity: 0; transform: translateY(50px); transition: opacity 1s 0.4s, transform 1s 0.4s;}
.main-contact__text .rt {display: flex; align-items: center; column-gap: 20px;}
.main-contact__text .rt img {width: 30px; transition: margin .3s, transform .3s;}
.main-contact__text .rt:hover img {margin-left: 10px; transform: rotate(-30deg);}
.main-contact__bg h3 {font-size: 5.625em; font-weight: 900; text-transform: uppercase; color: #f6f6f6; opacity: 0.06; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content;}
.active .main-contact__bg {width: 100%;}
.main-contact__content.active .main-contact__text .wrapper {opacity: 1; transform: translateY(0);}


/* 서브 공통 */
.sub_banner {padding: 130px 20px 50px; max-width: 1320px; margin: 0 auto; text-align: center;}
.sub_banner .sub_banner__title {font-size: 2.5em;}
.sub_banner .sub_tab {display: flex; align-items: center; justify-content: center; column-gap: 50px; margin-top: 30px;}
.sub_banner .sub_tab li {font-size: 1.125em; opacity: 0.3; transition: opacity .2s;}
.sub_banner .sub_tab li:hover {opacity: 1;}
.sub_banner .sub_tab li a {width: 100%; position: relative;}
.sub_banner .sub_tab li.active {opacity: 1;}
.sub_banner .sub_tab li.active a::after {content: ""; display: block; width: 100%; height: 2px; background: #111; position: absolute; left: 50%; transform: translateX(-50%); bottom: -8px;}

.sub_padding_bt {padding-bottom: 150px;}

.sub_top_banner {width: 100%; height: 400px; border-radius: 15px; overflow: hidden;}
.sub_top_banner img {width: 100%; height: 100%; object-fit: cover;}



/* pagination */
button {border: 0; background: none; outline: 0; font-family: inherit;}
button:focus {outline: 0;}
.pager {text-align: center; width: 100%; display: inline-flex; justify-content: center; align-items: center; column-gap: 5px; margin-top: 50px;}
.pager button {cursor: pointer; font-size: 0.875em; font-weight: 500; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; border: 1px solid #111; box-sizing: border-box;}
.pager button.page:hover {background: #231815; color: #fff;}
.pager button.page.active {background: #231815; color: #fff;}
.pager button.pager-btn {border: 0; width: 24px;}
.pager button.pager-btn img {width: 100%;} 
.pager button.pager-prev {margin-right: 15px;}
.pager button.pager-next {margin-left: 15px;}
.pager button.pager-btn.active {color: #111;}
.pager button.pager-btn:hover {color: #111;}
.pager a {cursor: pointer; font-size: 0.875em; font-weight: 500; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; border: 1px solid #111; box-sizing: border-box;}
.pager a.page:hover {background: #231815; color: #fff;}
.pager a.page.active {background: #231815; color: #fff;}

.popup_bg {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.8); display: none; z-index: 100;}
.popup {display: none; width: calc(100% - 40px); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 60px 50px; z-index: 1000;}
.popup.video_pop {background: transparent; padding: 0;}
.pop_video_wrap {width: 100%; height: 0; padding-bottom: 56.25%; position: relative; overflow: hidden;}
.pop_video_wrap iframe {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
.pop_video_wrap img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
.popup .x_btn {color: #fff; font-size: 45px; position: absolute; display: inline-block; top:
-60px; right: 0; cursor: pointer; z-index: 1000;}

.view_bt_btn {display: flex; justify-content: space-between;}
.view_bt_btn a {width: 125px; height: 48px; border: 1px solid #111; box-sizing: border-box; font-size: 0.875em; font-weight: 500; display: flex; justify-content: center; align-items: center; column-gap: 15px;}
.view_bt_btn a.board_next_btn {margin-left: auto;}
.view_bt_btn a img {width: 16px;}



@media screen and (max-width: 1320px) {
  .main-contact__text .wrapper {padding: 0 4.5vw;}
  .main-contact__bg h3 {font-size: 6.75vw;}
}


@media screen and (max-width: 1024px) {
  .br_1024 {display: block;}

  #header {height: 80px;}
  #header .logo img {height: 62px;}
  #header nav ul.depth1 {column-gap: 15px;}
  #header nav ul.depth1 > li > a {padding: 0 15px;}
  #header nav ul.depth1 > li.highlight a img {width: 16px;}
  #header nav ul.depth1 > li::after {bottom: 20px;}
  #header.sm_header nav ul.depth1 li::after {bottom: 10px;}
  #header.sm_header {height: 60px;}
  #header.sm_header .logo img {height: 52px;}
  #header.sm_header nav ul.depth1 > li.highlight::before {height: calc(100% + 10px); top: -10px;}
  #header.sm_header nav ul.depth1 > li.highlight:hover::before {top: 0;}

  .main-contact__content {height: 21vw;}
  .main-contact__text .wrapper {padding: 0 30px; /* background: url(/img/footer_img.png) no-repeat 52.5% 43%; background-size: 40%; */}
  .main-contact__text {font-size: 2.75vw;}
  .main-contact__text .rt {column-gap: 1.325vw;}
  .main-contact__text .rt img {width: 3vw;}

  #footer .partner_wrap {padding: 4% 20px;}
  #footer .partner_wrap ul {column-gap: 5%;}
  #footer .partner_wrap ul li {max-width: calc( 80%/5 );}
}

@media screen and (max-width: 768px) {
  html, body {font-size: 14px;}
  .br_768 {display: block;}
  .sub_padding_bt {padding-bottom: 125px;}

  .netm {font-family: 'netmarbleM'; font-weight: normal;}
  #header {height: 70px;}
  #header .logo img {height: 57px;}
  #header.sm_header {height: 55px;}
  #header.sm_header .logo img {height: 46px;}
  #header .header_nav {display: none;}
  .hamburger {display: block;}
  #headerHam {display: block;}
  #headerHam .header_nav {display: flex; justify-content: center; align-items: center; font-family: 'netmarbleM'; font-weight: normal;}
  #headerHam nav ul.depth1 {height: auto; justify-content: center; row-gap: 50px; flex-direction: column;}
  #headerHam nav ul.depth1 > li > a {font-size: 1.325em; justify-content: center;}
  #headerHam nav ul.depth1 > li::after {display: none;}
  #headerHam nav ul.depth1 > li.highlight a {column-gap: 10px;}
  #headerHam nav ul.depth1 > li.highlight::before {display: none;}
  #headerHam nav ul.depth1 > li.highlight::after {content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 26px); height: calc(100% + 26px); background: transparent; box-shadow: 0 0 0 2px #0B4198 inset; border-radius: 12px; box-sizing: border-box; z-index: -1; transition: all .3s;}
  #headerHam nav ul.depth2 {position: static; transform: none; padding: 0; margin: 20px auto 0; display: none;}
  #headerHam nav ul.depth2 a {font-size: 1.075em;}
  #headerHam nav ul.depth2 a:not(:last-child) {margin-bottom: 14px;}
  #headerHam nav ul.depth1 > li.highlight:hover a {transform: none; color: #0B4198;}
  #headerHam nav ul.depth1 > li.highlight:hover a img {filter: none; animation: none;}

  .main-contact__content {height: 23vw;}
  .main-contact__bg h3 {font-size: 6.875vw;}
  .main-contact__text .wrapper {padding: 0 15px; background-size: 36%;}
  .main-contact__text {font-size: 3.5vw;}
  .main-contact__text .rt {column-gap: 1.75vw;}
  .main-contact__text .rt img {width: 4vw;}

  .sub_banner {padding: 120px 20px 45px;}
  .sub_banner .sub_tab {column-gap: 35px;}
  .sub_banner .sub_banner__title {font-size: 2.25em;}

  .sub_top_banner {height: 300px;}

  .pager {margin-top: 40px;}

  .view_bt_btn a {width: 110px; height: 45px; font-size: 0.95em; column-gap: 10px;}
  
  .black_btn img {width: 22px;}
  .black_btn {width: 220px; height: 50px;}
  .black_btn.margin_80 {margin: 50px auto 0;}

  #searchBar {padding: 20px;}
  #searchBar .searchBox input {width: 375px; height: 45px; padding: 0 45px 0 20px;}
  #searchBar .searchBox button {width: 45px; background-size: 21px;}

  #footer .partner_wrap ul {column-gap: 5%; row-gap: 3vw;}
  #footer .partner_wrap ul li {max-width: none; width: 30%; text-align: center;}

  #footer .footer_info_wrap {padding: 35px 20px 40px;}
  #footer .footer_info_wrap .logo img {width: 82px;}
  #footer .footer_info_wrap .name {margin: 12px 0 20px;}
  #footer .footer_info_wrap .name .reg {letter-spacing: 3.75px; padding-left: 7px;}
  #footer .footer_info_wrap ul li:not(:last-child)::after {margin: 0 12px;}
}

@media screen and (max-width: 540px) {
  html, body {font-size: 13px;}
  .br_540 {display: block;}
  .sub_padding_bt {padding-bottom: 100px;}

  #header {height: 60px;}
  #header .logo img {height: 52px;}
  #header.sm_header {height: 50px;}
  #header.sm_header .logo img {height: 44px;}

  #footer .partner_wrap {padding: 6% 15px;}
  #footer .partner_wrap ul {column-gap: 5%; row-gap: 4vw;}
  
  #footer .footer_info_wrap {padding: 30px 20px 35px;}
  #footer .footer_info_wrap .logo img {width: 75px;}
  #footer .footer_info_wrap .name {margin: 13px 0 17px;}
  #footer .footer_info_wrap .name .reg {letter-spacing: 3.5px; padding-left: 5px;}
  #footer .footer_info_wrap ul {flex-wrap: wrap; row-gap: 3px; justify-content: center; column-gap: 15px;}
  #footer .footer_info_wrap ul li:not(:last-child) {display: block;}
  #footer .footer_info_wrap ul li:not(:last-child)::after {display: none;}
  #footer .footer_info_wrap ul li:nth-child(1),
  #footer .footer_info_wrap ul li:nth-child(2) {width: auto;}
  #footer .footer_info_wrap ul li:nth-child(3),
  #footer .footer_info_wrap ul li:nth-child(4) {width: 100%;}
  .main-contact__content {height: 51.15384vw;}
  .main-contact__bg {background: url(/img/footer_bg_mo.jpg) no-repeat center center; background-size: contain; width: 100%;}
  .main-contact__bg h3 {display: none;}
  .main-contact__content.active .main-contact__text .wrapper {opacity: 0;}

  .sub_banner {padding: 110px 20px 40px;}
  .sub_banner .sub_tab {column-gap: 30px; flex-wrap: wrap; column-gap: 0; row-gap: 20px;}
  .sub_banner .sub_tab li {width: 25%;}
  .sub_banner .sub_tab li.active a::after {bottom: -6px;}
  .sub_banner .sub_tab li a {width: max-content; margin: 0 auto;}
  .sub_banner .sub_banner__title {font-size: 2.125em; font-family: 'netmarbleM'; font-weight: normal;}
  .sub_top_banner {height: 200px; border-radius: 10px;}

  .pager {margin-top: 30px;}
  .pager button {width: 25px; height: 25px;}
  .pager a {width: 25px; height: 25px;}
  .pager button.pager-btn {width: 20px;}
  .pager button.pager-prev {margin-right: 10px;}
  .pager button.pager-next {margin-left: 10px;}

  .view_bt_btn a {width: 80px; height: 35px; column-gap: 6px;}
  .view_bt_btn a img {width: 12px;}

  .black_btn {width: 170px; height: 45px; column-gap: 10px; margin: 35px auto 0;}
  .black_btn.margin_80 {margin: 30px auto 0;}
  .black_btn img {width: 21px;}

  #searchBar {margin-bottom: 30px; padding: 18px 15px; width: calc(100% + 40px); margin-left: -20px;}
  #searchBar .searchBox {max-width: 100%;}
  #searchBar .searchBox input {width: 350px; height: 42px; padding: 0 42px 0 15px;}
  #searchBar .searchBox button {width: 42px; background-size: 20px;}
}