@charset "utf-8";


* {margin: 0; padding: 0; }

html, body {width: 100%; height: 100%; font-family: 'klavika', 'rixgo', Apple SD Gothic Neo, 'Microsoft Yahei', 'Microsoft MingLiU', Arial, 돋움, dotum, sans-serif; font-weight: 400; font-style: normal; font-stretch: normal; font-size: 16px; line-height: 1.5; color: #222; word-break: keep-all; word-wrap: break-word; white-space: normal; }
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; }

body {position: relative; }

.wrapper,
.container,
.contents {position: relative; width: 100%; }

.wrapper,
.container {position: relative; min-height: 100vh; }
.container.sub {padding-bottom: 340px; box-sizing: border-box; }

.header-pd {padding-top: 60px; }
.inner:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.noscroll {height: 100%; min-height: 100%; overflow: hidden !important; touch-action: none; }

/* =====================================================
   header
=====================================================*/

.header {position: fixed; top: 0; left: 0; width: 100%; padding: 20px 100px 0; box-sizing: border-box; z-index: 105; }
.header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

/* logo */
.logo {display: block; position: absolute; left: 50%; bottom: 0; width: 120px; height: 38px; transform: translateX(-50%); background-image: url("/AppData/images/common/w_logo.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: 0 0; -webkit-transition: all 300ms ease 300ms; transition: all 300ms ease 300ms; }
.header.active {background-color: transparent; }
.header.active .logo {background-position: 0 -38px; }


/* menu */
.header-menu {display: block; position: relative; float: left; width: 40px; height: 40px; }
.header-menu .line {display: block; width: 30px; height: 3px; margin: 6px 0; background-color: #fff; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.header-menu .line:nth-child(2) {width: 25px; }
.header-menu .line:nth-child(3) {width: 20px; }

.header.active .header-menu {z-index: 100; }
.header.active .header-menu .line {background-color: #222; }
.header.active .header-menu .line:nth-child(1) {-webkit-transform: translateY(9px) rotate(45deg); -ms-transform: translateY(9px) rotate(45deg); -o-transform: translateY(9px) rotate(45deg); transform: translateY(9px) rotate(45deg); }
.header.active .header-menu .line:nth-child(2) {opacity: 0; }
.header.active .header-menu .line:nth-child(3) {width: 30px; -webkit-transform: translateY(-9px) rotate(-45deg); -ms-transform: translateY(-9px) rotate(-45deg); -o-transform: translateY(-9px) rotate(-45deg); transform: translateY(-9px) rotate(-45deg); }


/* lang */
.lang-wrap {position: relative; float: right; }
.select-lang {width: 85px; height: 40px; padding: 0 35px 0 20px; border: 1px solid rgba(255, 255, 255, 0.6); background-image: url("/AppData/images/common/select_lang.png"); background-repeat: no-repeat; background-position: right 20px center; color: #fff; font-size: 14px; font-weight: 600; }
.lang-wrap.active .select-lang {background-image: url("/AppData/images/common/select_lang_open.png"); }

.lang-list {height: 0; overflow: hidden; }
.lang-list .btn-lang {width: 85px; padding: 10px 20px; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.8); color: #222; font-size: 13px; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: left; }
.lang-list .btn-lang:hover {background-color: rgba(245, 245, 245, 0.6); }

.lang-wrap.active .lang-list {position: absolute; top: 100%; left: 0; height: auto; overflow: visible; }

.header.active .select-lang {border: 1px solid rgba(0, 0, 0, 0.6); color: #222; background-image: url("/AppData/images/common/select_lang_b.png"); }
.header.active .lang-wrap.active .select-lang {background-image: url("/AppData/images/common/select_lang_open_b.png"); }
.header.active .lang-list .btn-lang {border: 1px solid rgba(34, 34, 34, 0.6); border-top: 0; }


/* sub header
-----------------------------------------------------*/
.sub .header {position: relative; }
.sub .header .logo {background-image: url("/AppData/images/common/b_logo.png"); transition: none; }
.sub .header .header-menu .line {background-color: #222; }
.sub .header .select-lang {border: 1px solid rgba(0, 0, 0, 0.6); color: #222; background-image: url("/AppData/images/common/select_lang_b.png"); }
.sub .header .lang-wrap.active .select-lang {background-image: url("/AppData/images/common/select_lang_open_b.png"); }
.sub .header .lang-list .btn-lang {border: 1px solid rgba(34, 34, 34, 0.6); border-top: 0; }
.sub .header .lang-list .btn-lang:hover {background-color: rgba(235, 235, 235, 0.6); }

.sub .header.fixed {position: fixed; width: 100%; padding: 20px 100px; background-color: rgba(255, 255, 255, 0.6); backdrop-filter: saturate(150%) blur(3px); }
.sub .header.fixed .logo {top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.sub .header.fixed.active {background-color: transparent; backdrop-filter: none; }



/* gnb */
.gnb {position: fixed; top: 0; left: -100%; width: 40%; max-width: 600px; height: 0; background-color: #fff; overflow: hidden; overflow-y: auto; z-index: 102; opacity: 0; transition: left 0.6s; }
.gnb-list {position: absolute; top: 100px; left: 100px; width: calc(100% - 200px); height: 100%; max-height: calc(90vh - 100px); margin-top: 3vh; overflow: hidden auto; }
.gnb-list li { }
.gnb-list li + li {margin-top: 20px; }
.gnb-list li > a {display: block; position: relative; width: 100%; height: 100%; background-color: #fff; font-size: 1.8rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.gnb-list li > a:hover {color: grey; }
.gnb-list ul + ul {margin-top: 80px; }
.gnb-list ul + ul li > a {font-weight: 400; }

.gnb-list li.use-depth {position: relative; }
.gnb-list li.use-depth > a {cursor: pointer; }
.gnb-list li.use-depth ul {display: none; margin: 10px 0 0 30px; box-sizing: content-box; }

.gnb-list li.use-depth ul > li {}
.gnb-list li.use-depth ul > li + li {margin-top: 10px; }
.gnb-list li.use-depth ul > li > a {font-size: 18px; font-weight: 400; color: #888; }
.gnb-list li.use-depth ul > li > a:hover {-webkit-text-stroke: inherit; -webkit-text-fill-color: inherit; color: #000; }

.header.active + .gnb {left: 0; height: 100%; opacity: 1; }
.gnb-list li.use-depth:hover:before {opacity: 1; }
.gnb-list li.use-depth:hover ul {opacity: 1; }

.gnb-dim {position: fixed; top: 0; left: -100%; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.3s; z-index: 101; }
.header.active + .gnb + .gnb-dim {left: 0; opacity: 1; }


/* 22-03-28 수정사항 - 메인 dim */
.container.main .header {padding-bottom: 20px; background-color: rgba(0, 0, 0, 0.4); }
.container.main .header.active {background-color: transparent; }
.container.main .header .logo {bottom: 20px; transition: 0s; }
.container.main .header.active .logo {background-position: 0 0; }
.container.main .header.active .select-lang {border: 1px solid rgba(255, 255, 255, 0.6); background-image: url("/AppData/images/common/select_lang.png"); color: #fff; }

/* 22-04-07 수정사항 */
@media all and (max-width: 640px) {
.container.main .header.active + .gnb {opacity: 0.6; }
.container.main .header.active + .gnb + .gnb-dim {opacity: 0.5; }
}

/* =====================================================
   navigation custom
=====================================================*/
#fp-nav.fp-right {right: 100px; transition: all 0.5s; -ms-touch-action: pan-y; touch-action: pan-y; }

#fp-nav ul li a span,
.fp-slidesNav ul li a span {left: auto; right: 0; width: 70%; height: 1px; border-radius: 0; background-color: #ddd; }
#fp-nav ul li,
.fp-slidesNav ul li {width: 50px; height: 12px; margin: 0; }

/* hover */
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {width: 50px; height: 1px; margin: 0; background-color: #fff; }
#fp-nav ul li:hover .fp-tooltip {display: none; }

/* active */
#fp-nav.fp-show-active a.active + .fp-tooltip {width: 100px; right: 50px; font-size: 12px; font-weight: 500; }
#fp-nav ul li:hover a.active + .fp-tooltip {display: block; }

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {top: 50%; width: 100%; height: 2px; margin: 0; border-radius: 0; background-color: #fff; transform: translate(0, -50%); }


/* =====================================================
   sticky
=====================================================*/
.sticky-wrap {position: fixed; right: 100px; bottom: 100px; z-index: 100; }
.sticky-wrap .sticky-btn + .sticky-btn {margin-top: 20px; }
.sticky-wrap .sticky-btn {display: block; width: 60px; height: 60px; border-radius: 20px; box-shadow: 5px 2px 28px rgba(34, 34, 34, 0.15); background-color: #fff; background-repeat: no-repeat; background-position: center center; overflow: hidden; }
.sticky-wrap .sticky-top {display: none; background-image: url("/AppData/images/common/sticky_top.png"); background-size: 16px 20px; }
.sticky-wrap .sticky-kakao {display: none; background-image: url("/AppData/images/common/sticky_kakao.png"); background-size: 28px 28px; background-color: #222; }
.sticky-wrap .sticky-insta {display: none; background-image: url("/AppData/images/common/sticky_insta.png"); background-size: 28px 28px; background-color: #222; }

/* 아카데미에서만 노출,
   #contents의 .kakao, insta 클래스명으로 none block 컨트롤.
   보이게 하고 싶으면 kakao와 insta를 각각 추가하면 됩니다. */
.kakao + .sticky-wrap .sticky-kakao {display: block; }
.insta + .sticky-wrap .sticky-insta {display: block; }



/* =====================================================
   footer
=====================================================*/
.footer {position: absolute; left: 0; bottom: 0; width: 100%; height: 340px; padding: 50px 100px; box-sizing: border-box; background-color: #f5f5f5; }
.footer:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.footer .footer-logo {float: left; width: 13%; }
.footer .footer-logo img {display: block; width: 120px; }

.footer .footer-info {float: left; font-size: 12px; font-weight: 400; color: #888; line-height: 18px; }
.footer .footer-info a {color: #666; }
.footer .footer-info a:hover {text-decoration: underline; }
.footer .footer-company {margin-bottom: 5px; font-size: 13px; font-weight: 600; color: #666; }

.footer .footer-util {margin-top: 25px; }
.footer .footer-util ul:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.footer .footer-util li {position: relative; float: left; }
.footer .footer-util li + li {margin-left: 10px; padding-left: 11px; }
.footer .footer-util li + li:before {content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 9px; background-color: #888; transform: translateY(-50%); }
.footer .footer-util a {font-size: 11px; text-decoration: underline; }

.footer .footer-sns {position: absolute; top: 50px; right: 100px; }
.footer .footer-sns ul:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.footer .footer-sns li {float: left; width: 26px; height: 26px; background-repeat: no-repeat; background-size: contain; background-position: center center; }
.footer .footer-sns li + li {margin-left: 5px; }

.footer .footer-sns .icon-ig {background-image: url("/AppData/images/common/footer_sns_ig.png"); }
.footer .footer-sns .icon-fb {background-image: url("/AppData/images/common/footer_sns_fb.png"); }
.footer .footer-sns .icon-nv {background-image: url("/AppData/images/common/footer_sns_nv.png"); }
.footer .footer-sns .icon-yt {background-image: url("/AppData/images/common/footer_sns_yt.png"); }
/*.footer .footer-sns .icon-wb {background-image: url("/AppData/images/common/footer_sns_wb.png"); }*/
.footer .footer-sns .icon-va {background-image: url("/AppData/images/common/footer_sns_va.png"); }
.footer .footer-sns .icon-np {background-image: url("/AppData/images/common/footer_sns_npost.png"); }



/* =====================================================
   popup
=====================================================*/
#popup {display: none; }
#popup .popup-bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(34, 34, 34, 0.8); z-index: 300; }
#popup .popup-contents {display: block; position: fixed; top: 50%; left: 50%; width: 600px; height: 84vh; max-height: 800px; padding: 25px 25px; box-sizing: border-box; background-color: #fff; transform: translate(-50%, -50%); z-index: 303; }
#popup .popup-header {width: 100%; padding-bottom: 20px; border-bottom: 1px solid #222; box-sizing: border-box; }
#popup .popup-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
#popup .popup-header strong {float: left; font-size: 18px; font-weight: 700; line-height: 30px; }
#popup .popup-header .btn-close {float: right; width: 30px; height: 30px; background-image: url("/AppData/images/common/icon_close.svg"); background-repeat: no-repeat; background-size: 14px 14px; background-position: center center; }

#popup .popup-container {margin-top: 10px; height: calc(100% - 61px); max-height: 730px; padding: 10px 10px; box-sizing: border-box; overflow-y: auto; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.25px; }
#popup .popup-container img {max-width: 100%; }

#popup .popup-container::-webkit-scrollbar {width: 5px; }
#popup .popup-container::-webkit-scrollbar-thumb {background-color: #222; }
#popup .popup-container::-webkit-scrollbar-track {background-color: #ddd; }






/* =====================================================
   반응형
=====================================================*/

@media all and (max-width: 1600px) {
   #fp-nav.fp-right {right: 0; }
   .gnb-list li > a {font-size: 1.6rem; }
}


/* 가로폭 1280px 이하 */
@media all and (max-width: 1280px) {

  #fp-nav.fp-right {right: 0; }
  #fp-nav ul li .fp-tooltip.fp-right,
  #fp-nav ul li:hover a.active + .fp-tooltip {display: none; }
  #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span {width: 70%; }

  .gnb {width: 45%; }

  .sticky-wrap {right: 20px; bottom: 20px; }

}

@media all and (max-width: 1170px) {
  .container.sub {padding-bottom: 260px; }
  .header {padding: 20px 40px 0; }
  .sub .header.fixed {padding: 20px 40px; }

  .gnb-list {left: 40px; width: calc(100% - 80px)}
  .gnb-list li + li {margin-top: 10px; }
  .gnb-list li.use-depth ul {margin-top: 20px; }
  .gnb-list ul + ul {margin-top: 50px; }

  .footer {height: auto; padding: 30px 40px 40px; }
  .footer .footer-logo {float: none; }
  .footer .footer-info {float: none; margin-top: 40px; }
  .footer .footer-sns {top: 34px; right: 40px; }

}

@media all and (max-width: 1000px) {
   .gnb {width: 55%; }
   .gnb-list li.use-depth {width: 100%; padding-right: 0; }
   .gnb-list li.use-depth:before {content: none; }
   .gnb-list li.use-depth ul {position: static; transform: translateY(0); opacity: 1; }
}



@media all and (max-width:768px) {

   html, body {font-size: 14px; }

   .gnb-list li > a {font-size: 24px; }

   #popup .popup-contents {width: 70%; height: 60vh; }
   #popup .popup-header {padding-bottom: 15px; }
   #popup .popup-container {max-height: calc(100% - 60px); }

   .title-wrap .title {font-size: 24px; }
   .title-wrap .text {font-size: 16px; }

   .sticky-wrap {right: 10px; bottom: 10px; }
   .sticky-wrap .sticky-btn {width: 50px; height: 50px; }
   .sticky-wrap .sticky-btn + .sticky-btn {margin-top: 10px; }
   .sticky-wrap .sticky-top {background-size: 14px 17px; }
   .sticky-wrap .sticky-kakao {background-image: 24px 24px; }
}



/* 가로폭 680px 이하 */
@media all and (max-width: 680px) {

  .container.sub {padding-bottom: 258px; }
  .header {padding: 20px 20px 0; }
  .header-menu {width: 35px; height: 35px; }
  .header-menu .line {width: 25px; margin: 4px 0; }
  .header-menu .line:nth-child(2) {width: 20px; }
  .header-menu .line:nth-child(3) {width: 15px; }

  .header.active .header-menu .line {}
  .header.active .header-menu .line:nth-child(1) {width: 24px; -webkit-transform: translateY(7px) rotate(45deg); -ms-transform: translateY(7px) rotate(45deg); -o-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg); }
  .header.active .header-menu .line:nth-child(3) {width: 24px; -webkit-transform: translateY(-7px) rotate(-45deg); -ms-transform: translateY(-7px) rotate(-45deg); -o-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); }

  .gnb {width: 70%; }

  .logo {width: 90px; height: 28px; }
  .select-lang {width: 75px; height: 35px; padding: 0 25px 0 10px; background-position:  right 10px center; }
  .lang-list .btn-lang {width: 75px; padding: 10px 15px; }

  .header.active .logo {background-position: 0 -28px; }
  .sub .header.fixed {padding: 20px 20px; }
/*  .sub .header .logo {background-position: 0 -28px; }*/

  .footer {padding: 30px 20px 40px; }
  .footer .footer-info {margin-top: 20px; }
  .footer .footer-sns {right: 20px; }


}


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

  #fp-nav ul li, .fp-slidesNav ul li {width: 35px; }

  .footer .footer-sns {top: 37px;}
  .footer .footer-sns li {width: 20px; height: 20px; }

  .gnb-list {left: 20px; width: 90%; }
  .gnb-list li + li {margin-top: 10px; }
  .gnb-list ul + ul {margin-top: 30px; }
  .gnb-list li > a {font-size: 20px; }
  .gnb-list li.use-depth ul {margin: 10px 0 0 15px; }
  .gnb-list li.use-depth ul li a {padding: 0; font-size: 4vw; }

   #popup .popup-contents {width: 80%; }
   #popup .popup-header {padding-bottom: 10px; }
   #popup .popup-header strong {font-size: 15px; line-height: 1.3; }

   .title-wrap .title {font-size: 20px; }
   .title-wrap .text {font-size: 14px; }

}

@media all and (max-width: 375px) {
   .gnb-list li > a {font-size: 18px; }
}

@media all and (max-width: 320px) {
  .container.sub {padding-bottom: 250px; }

  #fp-nav ul li, .fp-slidesNav ul li {width: 25px; }
  .select-lang {width: 65px; font-size: 12px; padding: 0 20px 0 10px; background-position: right 5px center; }
  .lang-list .btn-lang {width: 65px; font-size: 11px; }

  .gnb-list li > a {font-size: 16px; }

  .footer .footer-info {font-size: 11px; }

  #popup .popup-contents {padding: 15px 15px; }
  #popup .popup-container {max-height: calc(100% - 70px); font-size: 12px; }

  .title-wrap .title {font-size: 18px; }
  .title-wrap .text {font-size: 13px; }

}



/* 가로폭 1280px 이상, 세로 높이 800px 이하일 경우 : Nest Hub Max */
@media all and (min-width: 1280px) and (max-height: 800px) {
}



/* 가로폭 1000px 이상, 세로 높이 768px 이하일 경우 : iPad 가로, Nest Hub */
@media all and (min-width: 1000px) and (max-height: 768px) {

  .gnb-list li + li {margin-top: 15px; }
  .gnb-list li > a {font-size: 24px; }
  .gnb-list ul + ul {margin-top: 50px; }
}




/* 가로폭 700px 이상,  세로 높이 540px 이하일 경우 : Surface Duo, Galaxy Fold */
@media all and (min-width: 700px) and (max-height: 540px) {

  .container.sub {padding-bottom: 258px; }
  .header {padding: 20px 20px 0; }
  .header-menu {width: 35px; height: 35px; }
  .header-menu .line {width: 25px; margin: 4px 0; }
  .header-menu .line:nth-child(2) {width: 20px; }
  .header-menu .line:nth-child(3) {width: 15px; }

  .header.active .header-menu .line {}
  .header.active .header-menu .line:nth-child(1) {width: 24px; -webkit-transform: translateY(7px) rotate(45deg); -ms-transform: translateY(7px) rotate(45deg); -o-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg); }
  .header.active .header-menu .line:nth-child(3) {width: 24px; -webkit-transform: translateY(-7px) rotate(-45deg); -ms-transform: translateY(-7px) rotate(-45deg); -o-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); }

  .logo {width: 90px; height: 28px; }
  .select-lang {width: 75px; height: 35px; padding: 0 25px 0 10px; background-position:  right 10px center; }
  .lang-list .btn-lang {width: 75px; padding: 10px 15px; }

  .header.active .logo {background-position: 0 -28px; }
  .sub .header.fixed {padding: 20px 20px; }
  .sub .header .logo {background-position: 0 -28px; }

  .gnb-list li + li {margin-top: 15px; }
  .gnb-list li > a {font-size: 20px; }
  .gnb-list ul + ul {margin-top: 50px; }

}


/* 가로폭 320px 이상,  세로 높이 414px 이하일 경우 : 모바일기기 가로회전 */
@media all and (min-width: 320px) and (max-height: 414px) {

   #popup .popup-contents {width: 60%; height: 80vh; }
   #popup .popup-header {padding-bottom: 10px; }
   #popup .popup-container {max-height: calc(80vh - 100px); }

  .gnb-list li + li {margin-top: 5px; }
  .gnb-list li > a {font-size: 18px; }
  .gnb-list ul + ul {margin-top: 20px; }

}