@font-face {
  font-family: 'NEXT ART Regular';
  font-style: normal;
  font-weight: normal;
  src: local('NEXT ART Regular'), url('/next-art-cufonfonts-webfont/NEXT_ART_Regular.woff') format('woff');
}

@font-face {
  font-family: 'NEXT ART Thin';
  font-style: normal;
  font-weight: normal;
  src: local('NEXT ART Thin'), url('/next-art-cufonfonts-webfont/NEXT_ART_Thin.woff') format('woff');
}

@font-face {
  font-family: 'NEXT ART Light';
  font-style: normal;
  font-weight: normal;
  src: local('NEXT ART Light'), url('/next-art-cufonfonts-webfont/NEXT_ART_Light.woff') format('woff');
}

@font-face {
  font-family: 'NEXT ART SemiBold';
  font-style: normal;
  font-weight: normal;
  src: local('NEXT ART SemiBold'), url('/next-art-cufonfonts-webfont/NEXT_ART_SemiBold.woff') format('woff');
}

@font-face {
  font-family: 'NEXT ART Bold';
  font-style: normal;
  font-weight: normal;
  src: local('NEXT ART Bold'), url('/next-art-cufonfonts-webfont/NEXT_ART_Bold.woff') format('woff');
}

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

.thin {font-weight: 100;}
.light {font-weight: 300;}
.reg {font-weight: 400;}
.md {font-weight: 500;}
.bold {font-weight: 700;}
.black {font-weight: 900;}
.next.reg {font-family: 'NEXT ART Regular'; font-weight: normal;}
.next.md {font-family: 'NEXT ART SemiBold'; font-weight: normal;}
.next.bold {font-family: 'NEXT ART Bold'; font-weight: normal;}
.next.light {font-family: 'NEXT ART Light'; font-weight: normal;}
.next.thin {font-family: 'NEXT ART Thin'; font-weight: normal;}
/* .next.black {font-weight: 900;}  */
.noto {font-family: 'Noto Sans KR', sans-serif;}
.mont {font-family: 'Montserrat', sans-serif;}
.roboto {font-family: 'Roboto', sans-serif;}

html, body { font-family: 'Noto Sans KR', 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; scroll-behavior: smooth;}
::selection {background-color: #ffa930}
body {overflow: hidden;}

.letter0 {letter-spacing: 0}
.fff {color: #fff;}
.green {color: #223a1b;}

input, textarea, select {font-family: 'Noto Sans KR', sans-serif; /* letter-spacing:-1px; padding-left:15px !important */}
textarea {/* padding:15px !important */}

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


/* 상단 */
.logo_sub {display: block;}
.logo_main {display: none ;}
#header .logo {z-index: 100; transition: all 0.3s;}
#header .logo.active {filter: brightness(0);}
#header .logo img {transition: all 0.3s ease-in-out;}
#header {width:100%; padding: 40px 0; position: absolute; top: 0; left: 0; width: 100%; background: transparent; color: #fff; /* height: 95px; */ z-index: 100; transition: all 0.3s;}
#header .wrapper {display: flex; justify-content: space-between; align-items: center;}
#header .header_rt {display: flex; justify-content: flex-end; align-items: center; height: 100%;}
#header nav > ul {display: flex; align-items: center; height: 100%; letter-spacing: 0;}
#header nav > ul > li {position: relative; padding: 0 35px; height: 100%; display: flex; align-items: center;}
#header nav > ul > li:last-child {padding: 0 0 0 35px;}
#header nav > ul > li > a {font-size: 1em; color: #fff; transition: all 0.3s ease-in-out;}

#hamburger-3 {z-index: 1000; margin-left: 60px; cursor: pointer; display: none;}
/* .hamburger.is-active .line {background: #111;} */
.hamburger .line{
  width: 30px;
  height: 2px;
  background-color: #fff;
  display: block;
  margin: 7px 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-3.is-active .line {margin: 6px auto;}
#hamburger-3.is-active .line:nth-child(1),
#hamburger-3.is-active .line:nth-child(3) {width: 20px;}

#hamburger-3.is-active .line:nth-child(1){
  -webkit-transform: translateX(6px) rotate(45deg);
  -ms-transform: translateX(6px) rotate(45deg);
  -o-transform: translateX(6px) rotate(45deg);
  transform: translateX(6px) rotate(45deg);
}

#hamburger-3.is-active .line:nth-child(3){
  -webkit-transform: translateX(6px) rotate(-45deg);
  -ms-transform: translateX(6px) rotate(-45deg);
  -o-transform: translateX(6px) rotate(-45deg);
  transform: translateX(6px) rotate(-45deg);
}

#header_ham {
  background: #111;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  right: -100%;
/*   display: flex;
  justify-content: center;
  align-items: center; */
  /* transition: right 0.3s; */
  z-index: 11;
  opacity: 1;
  text-align: center;
}
#header_ham.active {/* right: 0; */}

.ham_bg {
  width: 100%;
  position: fixed;
  left: 0;
  height: 100vh;
  top: -100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: top 0.3s;
  z-index: 10;}
.ham_bg#ham_bg1 {background-color: #203919; z-index: 8;}
.ham_bg#ham_bg2 {background-color: #8b6e25; z-index: 9;}
.ham_bg#ham_bg3 {background-color: #fea82f; z-index: 10;}

#header_ham .flex {flex-direction: column; align-items: flex-start; width: 100%; /* max-width: 60%; */ color: #fff; padding: 50px; padding-top: 15vh;}
#header_ham .flex .cate {/* opacity: 0; */}
#header_ham .flex .cate .cate_fixed {font-size: 1.625em; font-weight: 500; transition: all 0.3s;}
#header_ham .flex .cate:not(:last-child) {margin-bottom: 10%;}


/* 하단 */
#footer {background: #121212; color: #fff; padding: 30px 0 50px 0;}
#footer .wrapper {position: relative;}
#footer .footer_txt {color: rgba(255,255,255,0.5); margin-bottom: 25px; font-size: 1em; transform: rotate(-0.03deg);}
#footer .footer_txt.copy {color: #969696; margin-bottom: 0;}
#footer .txt {display: inline-block; line-height: 150%;}
#footer .line {margin: 0 15px; display: inline-block; width: 1px; background: rgba(255,255,255,0.2); height: 12px;}
#footer .email_pop {font-size: 0.9375em; padding: 10px 15px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.35); position: absolute; right: 0; top: 0; cursor: pointer; transition: all 0.3s; transform: rotate(-0.03deg);}
#footer .email_pop:hover {background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.65);}
.email_popup.popup {max-width: 1240px; max-height: none;}
.email_popup.popup .pop_cont {line-height: 170%;}
.email_popup.popup .pop_cont .top {border: 5px solid #e6e6e6; padding: 30px; font-size: 1.125em; transform: rotate(-0.03deg); margin-bottom: 3%; line-height: 180%;}
.email_popup.popup .pop_cont .top .lt {width: 15%;}
.email_popup.popup .pop_cont .top .lt img {}
.email_popup.popup .pop_cont .top .rt {width: 85%; padding-left: 5%;}
.email_popup.popup .pop_cont .bt {font-size: 1em; transform: rotate(-0.03deg);}
.email_popup.popup .pop_cont .bt .title {font-size: 1.25em; font-weight: bold; margin-bottom: 10px;}
.email_popup.popup .pop_cont .bt .dot_p {padding-left: 15px;}
.email_popup.popup .pop_cont .bt .info {margin-top: 10px; padding-left: 15px;}
.email_popup.popup .pop_cont .bt .info::before {content: "※";}

/* 공통 */
.sub_top {position: relative; height: 440px; overflow: hidden;}
.sub_top .banner_bg {height: 100%; transition: all 3.5s ease;}
.sub_top .top_title {text-align: center; position: absolute; left: 50%; transform: translateX(-50%) rotate(-0.03deg); /* bottom: 75px; */ bottom: -100%; color: #fff; width: 100%; padding: 0 20px;}
.sub_top .top_title .bold {font-size: 2.8125em; margin-bottom: 20px;}
.sub_top .top_title .light {font-size: 1.0625em; width: 100%;}

.logo_wrap {width: 102%; margin-left: -1%; display: flex; flex-wrap: wrap; text-align: center;}
.logo_wrap li {width: 18%; margin: 0 1% 2% 1%; height: 100px; background: #fff; border-radius: 10px; display: flex; justify-content: center; align-items: center; transition: all 0.3s;}
.logo_wrap li:hover {transform: translateY(-10px); box-shadow: 5px 5px 15px rgba(255,255,255,0.15);}
.logo_wrap li a {height: 90%; display: flex; justify-content: center; align-items: center;}

.count_wrap {display: flex;}
.count_wrap > li {width: 25%; text-align: center; padding: 50px 0; transition: all 0.3s; visibility: hidden;}
.count_wrap > li:hover > img {transform: translateY(-10px);}
.count_wrap > li:hover > .noto {transform: translateY(-10px) rotate(-0.03deg);}
.count_wrap > li:hover > .roboto {transform: translateY(-10px); color: #223a1b;}
.count_wrap > li:not(:last-child) {border-right: 1px solid #e6e6e6;}
.count_wrap > li > img {transition: all 0.3s;}
.count_wrap > li > .noto {margin: 40px auto 15px auto; font-size: 1.125em; transform: rotate(-0.03deg); transition: all 0.3s;}
.count_wrap > li > .roboto {font-size: 2.8125em; transition: all 0.3s;}
.count_wrap > li > .roboto > .reg {font-size: 1.5rem; font-weight: 500;}

.more_btn {padding: 15px 90px; font-size: 1.0625em; font-weight: bold; color: #223a1b; background: #fff; border: 1px solid #223a1b; border-radius: 50px; text-align: center; transition: all 0.2s; overflow: hidden; position: relative;-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); display: inline-block;}
.more_btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #223a1b;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.more_btn:hover {color: #fff;}
.more_btn:hover::before {-webkit-transform: scaleX(1); transform: scaleX(1);}

.marquee {width: 100%;  overflow: hidden; position: relative;}
.marquee1 {height: 170px; line-height: 170px;}
.marquee1 > div {height: 170px;}
.marquee2 {height: 110px; line-height: 110px;}
.marquee2 > div {height: 110px;}
.marquee > div { display: block; width: 400%; position: absolute; overflow: hidden;}
.marquee1 > div {animation: marquee1 6s linear infinite;}
.marquee2 > div {animation: marquee2 6s linear infinite;}
.marquee > div > span {float: left; width: 25%; display: inline; text-align: center; height: 100%; letter-spacing: 1px; color: #eee;}
.marquee > div > span > span {text-align: center; font-weight: 900;}
.marquee1 {font-size: 14.875em;}
.marquee2 {font-size: 8.9375em;}

@keyframes marquee1 {0% { left: 0; } 100% { left: -100%; }}
@keyframes marquee2 {0% { right: 0; } 100% { right: -100%; }}

.txt_ani_wrap {
  transform: translateY(300%);
  opacity: 0;
  transition: transform 2s, opacity 3s;
}
.txt_ani_wrap.animated {
  transform: translateY(0px);
  opacity: 1;
}

.top_ani_wrap {
  bottom: 0;
  opacity: 0;
  transition: bottom 1s, opacity 1.5s;
}
.top_ani_wrap.animated {
  bottom: 75px;
  opacity: 1;
}

.logo_wrap {
  transition-timing-function: cubic-bezier(.175,.885,.32,1.275);
  transition-duration: 1s;
  transition-delay: .1s;
  transition-property: opacity,transform;
  opacity: 0;
  transform: translate3d(0,100px,0);
}

.logo_wrap.animated {
  opacity: 1;
  transform: translateZ(0);
}

.ad_wrap {
  transition-timing-function: cubic-bezier(.175,.885,.32,1.275);
  transition-duration: 1s;
  transition-delay: .1s;
  transition-property: opacity,transform;
  opacity: 0;
  transform: translate3d(0,100px,0);
}

.ad_wrap.animated {
  opacity: 1;
  transform: translateZ(0);
}

.team_ani_wrap {
  transition-timing-function: cubic-bezier(.175,.885,.32,1.275);
  transition-duration: 1s;
  transition-delay: .1s;
  transition-property: opacity,transform;
  opacity: 0;
  transform: translate3d(0,100px,0);
}

.team_ani_wrap.second {
  transition-timing-function: cubic-bezier(.175,.885,.32,1.275);
  transition-duration: 1s;
  transition-delay: .3s;
  transition-property: opacity,transform;
  opacity: 0;
  transform: translate3d(0,100px,0);
}

.team_ani_wrap.animated {
  opacity: 1;
  transform: translateZ(0);
}

/* 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: 30px;}
.pager button {cursor: pointer; font-size: 1.0625em; transition: all 0.2s; color: #aaa; font-family: 'Roboto', sans-serif; border-radius: 50%; width: 32px; height: 32px;}
.pager button.page {margin: 0 3px;}
.pager button.page:hover {color: #111; font-weight: bold;}
.pager button.page.active {color: #fff; background: #111;}
.pager button.pager-btn {color: #ccc; padding: 0; border: 1px solid #e6e6e6; border-radius: 50%; width: auto; height: auto;}
.pager button.pager-btn i {font-size: 32px;}
.pager button.pager-prev {margin-right: 25px;}
.pager button.pager-next {margin-left: 25px;}
.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: 100; transition: all 0.3s;}
.popup {display: none; width: 90%; max-width: 800px; position: fixed; top: 54%; left: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 10px 10px 10px rgba(0,0,0,0.2); color: #111; padding: 60px 50px; font-size: 14px; line-height: 1.5rem; border-radius: 20px; z-index: 1000; max-height: 60vh;}
.popup .pop_cont {font-size: 14px; height: 100%; overflow-y: scroll; -ms-overflow-style: none; }
.popup .pop_cont::-webkit-scrollbar{ display:none; }
.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;}

/* 게시판 검색바 */
.board_search_bar {display: flex; justify-content: center; align-items: center; color: #111;font-size: 1.0625em; margin: 30px auto 50px auto;}
.board_search_bar select {border: 1px solid #e6e6e6; height: 50px; font-size: inherit; min-width: 150px; line-height: 32px;}
.board_search_bar input {border: 1px solid #e6e6e6; border-right: 0; width: 300px; height: 50px; font-family: 'Noto Sans KR', sans-serif; font-size:inherit; margin: 0 1px 0 5px; color: #222; box-sizing: border-box;}
.board_search_bar button {width: 80px; height: 50px; background: #111; color: #fff; text-align: center; font-size: 1.0625em; cursor: pointer;}




@media screen and (max-width: 1540px) {
  #footer .email_pop {right: 20px;}
}

@media screen and (max-width: 1024px) {
  .popup.video_pop {width: 95%;}
}

@media screen and (max-width: 768px) {
  html, body {font-size: 14px;}
  #header {padding: 15px 0;}
  #header nav {display: none;}
  #hamburger-3  {display: block;}

  .sub_top {height: 300px;}
  .top_ani_wrap.animated {bottom: 15%;}
  /* .sub_top .top_title {bottom: 15%;} */
  .sub_top .top_title .bold {margin-bottom: 3%;}
  .sub_top .top_title .light br.br_mo {display: block;}
  .sub_top .top_title .light br.br_mo.br_414 {display: none;}

  .more_btn {padding: 3.25% 15%;}
  .count_wrap > li {padding: 5% 0;}
  .count_wrap > li > img {height: 55px;}
  .count_wrap > li > .noto {font-size: 1em; margin: 20% auto 8% auto;}
  .count_wrap > li > .roboto {font-size: 2.5em;}

  .pager button.page {margin: 0 7px;}
  .pager button.pager-prev {margin-right: 20px;}
  .pager button.pager-next {margin-left: 20px;}
  .pager button.pager-btn i {font-size: 30px;}

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

  .email_popup.popup {padding: 5%;}
  .email_popup.popup .pop_cont .top {display: block; line-height: 160%; font-size: 1.125em; padding: 5% 4%; margin-bottom: 5%;}
  .email_popup.popup .pop_cont .top .lt {width: 100%; text-align: center; margin-bottom: 20px;}
  .email_popup.popup .pop_cont .top .lt img {max-width: 180px;}
  .email_popup.popup .pop_cont .top .rt {width: 100%; padding-left: 0;}
  .email_popup.popup .pop_cont .bt .dot_p {padding-left: 10px;}
  .email_popup.popup .pop_cont .bt .info {padding-left: 10px;}

}

@media screen and (max-width: 540px) {
  html, body {font-size: 13px;}
  #header .logo img {max-width: 80px;}
  .hamburger .line {width: 23px; height: 1px; margin: 6px auto;}
  #hamburger-3.is-active .line:nth-child(1) {transform: translateX(5px) rotate(45deg);}
  #hamburger-3.is-active .line:nth-child(3) {transform: translateX(5px) rotate(-45deg);}
  #footer {padding: 7% 0 8%;}
  #footer .footer_txt {margin-bottom: 3%; line-height: 160%; font-size: 0.95em;}
  #footer .email_pop {padding: 7px 12px;}
  #footer .footer_txt br {display: none;}
  #footer .txt {display: block;}
  #footer .line {display: none;}
  .email_popup.popup {padding: 8% 7%; top: 52%;}
  .popup .pop_cont {font-size: 12px;}
  .email_popup.popup .pop_cont {max-height: 75vh; overflow-y: scroll;}
  .email_popup.popup .pop_cont .bt .dot_p {padding-left: 5px;}
  .email_popup.popup .pop_cont .bt .info {padding-left: 5px;}
  .email_popup.popup .pop_cont .top {margin-bottom: 8%;}
  .email_popup.popup .pop_cont .bt .title {margin-bottom: 7px;}
  .email_popup.popup .pop_cont .top .lt img {max-width: 120px;}
  .email_popup.popup .pop_cont .top .lt {margin-bottom: 15px;}

  .sub_top {height: 250px;}

  .more_btn {border-radius: 30px;}
  .logo_wrap li a {max-width: 70%;}

  .count_wrap {flex-wrap: wrap;}
  .count_wrap > li {width: 50%; padding: 3% 0;}
  .count_wrap > li:nth-child(2) {border-right: 0;}
  .count_wrap > li:nth-child(1), .count_wrap > li:nth-child(2) {margin-bottom: 3%;}
  .count_wrap > li > .noto {margin: 12% auto 5% auto; font-size: 1.111em;}
  .count_wrap > li > .roboto {font-size: 2em;}
  .count_wrap > li:not(:last-child) {border-right: 0 !important;}

  .pager {margin-top: 40px;}
  .pager button.page {margin: 0 4px; font-size: 13px;}
  .pager button.pager-prev {margin-right: 15px;}
  .pager button.pager-next {margin-left: 15px;}
  .pager button.pager-btn i {font-size: 27px;}

}

@media screen and (max-width: 414px) {
  .sub_top .top_title .light br.br_mo.br_414 {display: block;}
}


/* 팝업 */
.common_popup {position: absolute;   background: #fff; padding: 0; text-align: center;-ms-overflow-style: none; border: 2px solid #111;}
.common_popup .x_btn {position: relative; text-align: right; padding: 5px 10px; cursor: pointer;}
.common_popup .x_btn i {font-size: 30px; vertical-align: middle; text-align: right; position: absolute; right: 0; bottom: -30px; cursor: pointer;}
.common_popup .x_btn2 {position: absolute; top: 5px; right: 5px; color: #fff; cursor: pointer; padding: 0;}
.common_popup .onday_close {display: flex; justify-content: space-between; padding: 5px 10px; font-size: 13px; align-items: center;}
.common_popup .onday_close p {cursor: pointer;}
.common_popup .onday_close p i {font-size: 24px;}