@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

@font-face {
  font-family: 'TmoneyRoundWindRegular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'TmoneyRoundWindExtraBold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindExtraBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SpoqaHanSansNeo-Light';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SpoqaHanSansNeo-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SpoqaHanSansNeo-Medium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SpoqaHanSansNeo-Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.batang {font-family: 'GyeonggiBatang';}
.light {font-family: 'SpoqaHanSansNeo-Light';}
.spoqa_r {font-family: 'SpoqaHanSansNeo-Regular';}
.md {font-family: 'SpoqaHanSansNeo-Medium';}
.bold {font-family: 'SpoqaHanSansNeo-Bold';}


html, body { font-family: 'SpoqaHanSansNeo-Regular', sans-serif; letter-spacing:-0.5px; font-size:16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height:normal; color:#111; overflow-x: hidden;}
::selection {background-color: rgba(243, 109, 32, 0.8); color: #fff;}
body {overflow: hidden;}

.mont {font-family: 'Montserrat', sans-serif;}

.t_reg {font-family: 'SpoqaHanSansNeo-Regular';}
.t_bold {font-family: 'SpoqaHanSansNeo-Bold';}
.letter0 {letter-spacing: 0}
.center {text-align: center;}
.fff {color: #fff;}
.navy {color: #05081a;}
.red {color: #b8282e;}

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


/* 상단 */
#header {width:100%; background: transparent; color: #111; height: 80px; transition: all 0.3s; position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; align-items: center;}
#header .wrapper {display: flex; align-items: center; justify-content: space-between; height: 100%;}
#header nav {/* color: #fff; */ position: relative; display: flex; align-items: center; height: 100%; margin-right: -19px; transition: all 0.3s;}
#header nav ul.depth1_wrap {font-size: 1.0625em; display: flex; align-items: center; height: 100%;}
#header nav ul.depth1_wrap li {height: 100%; display: flex; align-items: center;}
#header nav ul.depth1_wrap li a {font-family: 'SpoqaHanSansNeo-Regular'; position: relative; height: 100%; display: flex; align-items: center; justify-content: center; width: 160px;}
#header nav ul.depth1_wrap li a span {position: relative;}
#header nav ul.depth1_wrap li a span::before {content: ""; display: block; position: absolute; left: -30px; top: 0; width: 24px; height: 18px; background: url(/img/header_hover.png) no-repeat center center; background-size: 24px 18px; transition: all 0.3s; opacity: 0;}
#header nav ul.depth1_wrap li a:hover {font-weight: bold; color: #c7252b;}
#header nav ul.depth1_wrap li a:hover span::before {opacity: 1;}
#header nav ul.depth1_wrap li a.hover {font-weight: bold; color: #c7252b;}
#header nav ul.depth1_wrap li a.hover span::before {opacity: 1;}


#header.sm_header nav {color: #111;}
#header.sm_header {height: 80px; background: rgba(255,255,255,1); box-shadow: 7px 7px 15px rgb(0 0 0 / 10%);}
#header .logo img {width: 90%;}
#header.sm_header .logo img {width: 80%;}
#header.sm_header #dropdown {top: 80px; box-shadow: 7px 7px 15px rgb(0 0 0 / 10%);}
#header.sm_header #dropdown .depth2_wrap {background: rgba(255,255,255,1);}

#header .logo {z-index: 99999; text-align: center;}
#header .logo img {transition: all 1s;}


#header #dropdown {transition: all 0.3s; position: absolute; right: 0; top: 72px; display: none; transition: all 0.3s; width: max-content; border-radius: 0 0 30px 30px; overflow: hidden;}
#header #dropdown.show {display: block;}
#header #dropdown .depth2_wrap {display: flex; background: rgba(255,255,255,0.7);}
#header #dropdown .depth2 {color: #111; width: 160px; text-align: center; padding: 30px 0 50px 0;}
#header #dropdown .depth2:first-child {border-radius: 0 0 0 30px;}
#header #dropdown .depth2:last-child {border-radius: 0 0 30px 0;}
#header #dropdown .depth2 li a {font-size: 1em; transition: all 0.3s; padding: 8px 0;}
#header #dropdown .depth2 li:first-child a {padding-top: 0;}
#header #dropdown .depth2 li:last-child a {padding-bottom: 0;}
#header #dropdown .depth2 li a:hover {color: #c7252b;}
#header #dropdown .depth2.online_link {background: url(/img/dropdown.png) no-repeat center center; background-size: cover; padding: 30px 0;}
#header #dropdown .depth2.online_link .txt {display: flex; flex-direction: column; justify-content: space-between; align-items: center; color: #fff; height: 100%;}
#header #dropdown .depth2.online_link .txt .top {font-size: 1em; line-height: 145%;}
#header #dropdown .depth2.online_link .txt i {transition: all 0.3s; font-size: 32px;}
#header #dropdown .depth2.online_link:hover .txt i {font-size: 40px;}

/* 모바일 상단 */
#header .mobile_menu {display:none; cursor: pointer; z-index: 99999;}
#header .mobile_menu span {display: block;width:25px; height:2px; /* background-color: #fff; */ background-color: #05081a; margin-bottom:5px}
#header .mobile_menu.bt-close span {background-color: #05081a;}
#header .mobile_menu span:last-child {margin-bottom:0}
#header.sm_header .mobile_menu span {background-color: #05081a;}

#header-ham {width: 100%; min-height: 100%; position: fixed; top: 0; left: 0; z-index: 10000; display: none; justify-content: center; align-items: center;}
#header-ham.active {display: block;}
#header-ham .modal-wrap {position: absolute; top: 75px; right: -200%; width: 100%; min-height: 100%; background-color: #fff; display: flex; font-size: 0.8rem; font-size: 1em; text-align: left;}
#header-ham .modal-wrap > .modal-navi > li {display: inline-block; width: 100%; border-bottom: 1px solid #eee;}
#header-ham .modal-wrap > .modal-navi > li > ul {display: none; width: 100%;}
#header-ham .modal-wrap > .modal-navi > li > a {display: inline-block; padding: 30px 50px; width: 100%;}
#header-ham .modal-wrap > .modal-navi > li > ul > li {background-color: #fff;}
#header-ham .modal-wrap > .modal-navi > li > ul > li > a{width: 100%; display: inline-block; padding: 20px 20px 20px 70px;}
#header-ham .bt-close {width: 100%; height: 75px; border: none; background-color: #fff; border-bottom: 1px solid #e6e6e6; position: absolute; top: 0; right: -200%; cursor: pointer; z-index: 2; display: flex; justify-content: flex-end; align-items: center; outline: 0;}
#header-ham .bt-close i {font-size: 1.25rem;}
#header-ham .ham-title {width: 40%; border-right: 1px solid #e6e6e6; font-size: 1.111em;}
#header-ham .ham-title a {display: inline-block; text-align: left; width: 100%; box-sizing: border-box; padding: 20px 0; border-bottom: 1px solid #e6e6e6; padding-left: 20px;}
#header-ham .ham-list {height: 100vh; width: 60%; padding: 20px 20px 20px 25px;}
#header-ham  #hamListArea a {width: 100%; padding-bottom: 25px; font-size: 1.125em;}
#header-ham #hamListArea ul li > ul {color: #aaa; font-size: 0.9em;}
#header-ham #hamListArea ul li > ul a {padding: 5px 0;}
.ham-title > a.on {color: #c7252b; border-right: 5px solid #c7252b;}
.ham-click {width: 100%; font-size: 1.1em;}


/* 하단 */
.footer_rel {font-size:0;white-space:nowrap;padding:10px 0;text-align:center;border-top: 1px solid #e6e6e6;}
.footer_rel ul {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.footer_rel li {margin:0 20px;}
#footer {padding: 30px 20px; background: #111; text-align: center;}
#footer .sns_wrap {margin-bottom: 30px; display: flex; justify-content: center; align-items: center;}
#footer .sns_wrap a {position: relative; margin: 0 10px;}
#footer .sns_wrap a img.hover {position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; transition: all 0.3s;}
#footer .sns_wrap a:hover img.hover {opacity: 1;}
#footer .footer_txt {font-size: 0.9375em; transform: rotate(-0.03deg);}
#footer .footer_txt > div {margin-bottom: 10px; display: flex; justify-content: center; align-items: center;}
#footer .footer_txt > div p {opacity: 0.4; margin: 0 7px;}
#footer .footer_txt > div.copy p {margin-top: 25px; opacity: 0.2; margin-bottom: 0;}


/* 서브 */
.sub_title {display: flex; align-items: flex-end; position: relative; height: 370px;}
.sub_title .lt {padding: 0; padding-bottom: 50px; z-index: 10;}
.sub_title .lt .red {font-size: 1.375em; font-family: 'SpoqaHanSansNeo-Bold';}
.sub_title .lt .navy {font-size: 3.4375em; font-family: 'SpoqaHanSansNeo-Bold';}
.sub_title .rt {position: absolute; top: 0; right: 0;}
.sub_title .rt .title_bg {border-radius: 0 0 0 50px; background: #ccc; width: 68vw; max-width: 1240px; min-width: 960px; height: 370px;}

.sub_cont {padding: 80px 0 150px 0;}
.sub_cont.p50 {padding: 50px 0 150px 0;}

.search_bar {display: flex; justify-content: center; align-items: center; color: #111;}
.search_bar input {border: 0; border-bottom: 2px solid #111; height: 50px;  font-family: 'SpoqaHanSansNeo-Regular', sans-serif; font-size:inherit; margin: 0 1px 0 5px; color: #111; box-sizing: border-box;}
.search_bar input::placeholder {color: #ccc; font-size: inherit;}

/* 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; margin-top: 40px;}
.pager button {cursor: pointer; font-size: 1.25em; transition: all 0.2s; color: #111; border-radius: 50%;}
.pager button.page {margin: 0 5px; height: 35px; width: 35px;}
.pager button.page:hover {color:#b8282e;}
.pager button.page.active {color: #fff; background: #b8282e;}
.pager button.pager-btn {color: #bbb; padding: 0;}
.pager button.pager-btn i {font-size: 40px;} 
.pager button.pager-prev {margin-right: 20px; border: 1px solid #e6e6e6;}
.pager button.pager-next {margin-left: 20px; border: 1px solid #e6e6e6;}
.pager button.pager-btn.active {color: #111; border: 1px solid #111;}
.pager button.pager-btn:hover {color: #111; border: 1px solid #111;}

.popup_bg {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.8); display: none; z-index: 99999; transition: all 0.3s;}
.popup {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 10px 10px 10px rgba(0,0,0,0.2); color: #111; padding: 35px 30px;  z-index: 999999;}
.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%;}

/* 게시판 검색바 */
.board_search_bar {display: flex; justify-content: flex-end; align-items: center; color: #111;font-size: 1.0625em; position: relative; transform: rotate(-0.03deg);}
.board_search_bar input {border: 1px solid #e6e6e6; border-radius: 5px; width: 350px; height: 45px; font-family: 'SpoqaHanSansNeo-Regular', sans-serif; font-size:inherit;  box-sizing: border-box; letter-spacing: 0; padding-right: 50px;}
.board_search_bar input::placeholder {color: #ccc;}
.board_search_bar button {position: absolute; right: 15px; top: 50%; transform: translateY(-50%); text-align: center; color: #111;  font-size: 30px; cursor: pointer;}



@media screen and (max-width: 1500px) {
  #header nav {margin-right: -5px;}
  #header nav ul.depth1_wrap {font-size: 1em;}
  #header nav ul.depth1_wrap li a {width: 130px;}
  #header #dropdown {top: 75px;}
  #header #dropdown .depth2 {width: 130px; padding: 30px 0 50px 0; }
  #header #dropdown .depth2 li a {font-size: 0.875em; padding: 6px 0;}
  #header nav ul.depth1_wrap li a span::before {width: 16px; height: 12px; background-size: 16px 12px; left: -20px;}

  .sub_title {height: 323px;}
  .sub_title .rt .title_bg {width: 100vw; min-width: auto; max-width: none; border-radius: 0; height: 323px;}
  .sub_title .lt {z-index: 100; padding-bottom: 4%;}
  .sub_title .lt .navy {/* color: #fff; */}
}

@media screen and (max-width: 1400px) {
  .sub_cont {padding: 80px 20px 150px 20px;}
  .sub_cont.p50 {padding: 50px 20px 150px 20px;}
  .sub_title .lt {padding: 0 20px 50px 20px;}
}

@media screen and (max-width: 1240px) {
  .sub_title .lt .red {font-size: 1.35em;}
  .sub_title .lt .navy {font-size: 3.25em;}
}

@media screen and (max-width: 1024px) {
  #header {height: 75px;}
  #header .logo img {width: 70%;}
  #header nav {display: none;}
  #header .mobile_menu {display:block}

  #header.sm_header {height: 75px;}
  #header.sm_header .logo img {width: 70%}

  .popup.video_pop {width: 95%;}

}

@media screen and (max-width: 768px) {
  html, body {font-size: 14px;}
  .footer_rel {padding: 2vw 0;}
  .footer_rel li {width: 14%; display: flex; justify-content: center; align-items: center; margin: 0;}
  .footer_rel li img {max-width: 70%;}
  #footer {padding: 6% 5%;}
  #footer .footer_txt {font-size: 0.875em;}
  #footer .footer_txt > div {display: block; margin-bottom: 0; line-height: 170%;}
  #footer .footer_txt > div.copy p {margin-top: 4%;}
  #footer .sns_wrap {margin-bottom: 4%;}
  #footer .sns_wrap a {max-width: 10%; margin: 0 7px;}

  .sub_cont {padding: 12% 20px 17% 20px;}
  .sub_cont.p50 {padding: 8% 20px 17% 20px;}

  .sub_title {height: 280px;}
  .sub_title .rt .title_bg {height: 280px;}
  .sub_title .lt {padding-bottom: 4%;}
  .sub_title .lt .red {font-size: 1.25em;}
  .sub_title .lt .navy {font-size: 3em;}

  .board_search_bar input {width: 250px; height: 40px;}
  .board_search_bar button {font-size: 25px;}

  .pager {margin-top: 6%;}
  .pager button {font-size: 1.125em;}
  .pager button.page {width: 27px; height: 27px; margin: 0 3px;}
  .pager button.pager-btn i {font-size: 30px;}
  .pager button.pager-prev {margin-right: 10px;}
  .pager button.pager-next {margin-left: 10px;}

  .popup .x_btn {font-size: 40px; top: -45px;}

}

@media screen and (max-width: 540px) {
  html, body {font-size: 13px;}

  .footer_rel {padding: 3vw 0;}
  .footer_rel li {width: 25%;}
  .footer_rel li img {max-width: 85%; max-height: 15vw;}

  .sub_cont {padding: 10% 20px 17% 20px;}
  .sub_cont.p50 {padding: 10% 20px 17% 20px;}

  .sub_title {height: 220px;}
  .sub_title .rt .title_bg {height: 220px;}
  .sub_title .lt {padding-bottom: 5%;}
  .sub_title .lt .red {font-size: 1.111em;}
  .sub_title .lt .navy {font-size: 2.5em;}

  .board_search_bar input {width: 220px; height: 35px;}
  .board_search_bar button {font-size: 22px;}
  .board_search_bar input::placeholder {font-size: 13px;}

  .pager button {font-size: 1em;}
  .pager button.page {width: 25px; height: 25px; margin: 0 1px;}
  .pager button.pager-btn i {font-size: 23px;}
  .pager button.pager-prev {margin-right: 10px;}
  .pager button.pager-next {margin-left: 10px;}
 
}

@media screen and (max-width: 414px) {
  #header-ham .ham-title a {padding-left: 15px;}
}