@charset "utf-8";

/* == CSS 초기화 == */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
* {box-sizing: border-box; line-height: 1.5;}
html {font-size:12px;font-weight:400;}
body {overflow-x: hidden;font-size: 16px;line-height: 150%;-webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none;}
a {color:inherit;text-decoration: none;line-height:100%;}
img {max-width:100%; height: auto;}
ol, ul, li {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';	content: none;}
table {border-collapse: collapse;border-spacing: 0;}
.clearfix:after {display:block;content:"";clear:both;}
input:focus, textarea:focus {outline:none;box-shadow: 0px 0px 5px rgba(0, 183, 238, 0.2);}
a:focus {outline: none;}
b, strong { font-weight: 700; }
sub {font-size: 0.4em; vertical-align: sub;}
sup {font-size: 0.4em; vertical-align: super;}
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 130%; }
i {font-style: normal;}
small {font-size: 0.7em;}




/* 
** 기본 스타일 라이브러리입니다.
*** 임의로 수정을 금합니다.
*/
body {min-height: 100vh; line-height: 1.8;}
body.fixed {overflow: hidden;}
::-webkit-scrollbar {width: 5px; height: 5px; background: #dfdfdf;}
::-webkit-scrollbar-thumb {background: #004c73;}
body.is_viewport::-webkit-scrollbar {display: none!important;}



/* Set fonts */
.base_font--pretendard {font-family: "Pretendard";}
.base_font--noto_sans {font-family: "Noto Sans KR";}
.base_font--roboto {font-family: "Roboto";}

.ff--main {font-family: var(--main-font)!important;}
.ff--sub1 {font-family: var(--font-sub1)!important;}
.ff--sub2 {font-family: var(--font-sub2)!important;}

.typo1,
.typo2,
.typo3,
.typo4,
.typo5,
.typo6 {display: block; font-weight: 700; line-height: 1.3; margin-bottom: 0.4em;}
.typo1 {font-size: 92px;}
.typo2 {font-size: 82px;}
.typo3 {font-size: 76px;}
.typo4 {font-size: 70px;}
.typo5 {font-size: 64px;}
.typo6 {font-size: 58px;}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {display: block; font-weight: 700; line-height: 1.4; margin-bottom: 0.4em;}
.h1 {font-size: 52px;}
.h2 {font-size: 42px;}
.h3 {font-size: 36px;}
.h4 {font-size: 32px;}
.h5 {font-size: 28px;}
.h6 {font-size: 24px;}

.sbj_tag {display: block; font-size: 18px; font-weight: 700; color: var(--main-color); margin-bottom: 0.3em;}

.lead, .p1, .p2, .p3, .p4 {display: block; margin-bottom: 0.5em;}
.lead {font-size: 22px!important;}
.p1 {font-size: 20px!important;}
.p2 {font-size: 18px!important;}
.p3 {font-size: 16px!important;}
.p4 {font-size: 14px!important;}
.p5 {font-size: 13px!important;}
.p6 {font-size: 12px!important;}

@media screen and (max-width: 767px) {
  .is_responsive .typo1 {font-size: 42px;}
  .is_responsive .typo2 {font-size: 40px;}
  .is_responsive .typo3 {font-size: 38px;}
  .is_responsive .typo4 {font-size: 36px;}
  .is_responsive .typo5 {font-size: 34px;}
  .is_responsive .typo6 {font-size: 32px;}
  .is_responsive .h1 {font-size: 30px;}
  .is_responsive .h2 {font-size: 28px;}
  .is_responsive .h3 {font-size: 26px;}
  .is_responsive .h4 {font-size: 24px;}
  .is_responsive .h5 {font-size: 22px;}
  .is_responsive .h6 {font-size: 20px;}
  .is_responsive .sbj_tag {font-size: 16px;}
  .is_responsive .lead {font-size: 18px;}
  .is_responsive .p1 {font-size: 16px;}
  .is_responsive .p2 {font-size: 15px;}
  .is_responsive .p3 {font-size: 14px;}
  .is_responsive .p4 {font-size: 12px;}
}


/* Set styles */
.fc--main {color: var(--main-color)!important;}
.fc--sub1 {color: var(--sub-color1)!important;}
.fc--sub2 {color: var(--sub-color2)!important;}
.fc--sub3 {color: var(--sub-color3)!important;}
.fc--white {color: #fff!important;}
.fc--black {color: #000!important;}
.fc--gray1 {color: var(--gray1)!important;}
.fc--gray2 {color: var(--gray2)!important;}
.ta--l {text-align: left!important;}
.ta--r {text-align: right!important;}
.ta--c {text-align: center!important;}
.ta--j {text-align: justify!important;}
.fw--200 {font-weight: 200!important;}
.fw--300 {font-weight: 300!important;}
.fw--400 {font-weight: 400!important;}
.fw--500 {font-weight: 500!important;}
.fw--600 {font-weight: 600!important;}
.fw--700 {font-weight: 700!important;}
.fw--800 {font-weight: 800!important;}
.fw--900 {font-weight: 900!important;}
.tt--u {text-transform: uppercase!important;}
.tt--c {text-transform: capitalize!important;}
.lh--100 {line-height: 1.0!important;}
.lh--110 {line-height: 1.1!important;}
.lh--120 {line-height: 1.2!important;}
.lh--130 {line-height: 1.3!important;}
.lh--140 {line-height: 1.4!important;}
.lh--150 {line-height: 1.5!important;}
.lh--160 {line-height: 1.6!important;}
.lh--170 {line-height: 1.7!important;}
.lh--180 {line-height: 1.8!important;}
.wb--ka {word-break: keep-all!important;}
.wb--ba {word-break: break-all!important;}
.wb--n {word-break: normal!important;}

.dp--i {display: inline!important;}
.dp--ib {display: inline-block!important;}
.dp--b {display: block!important;}
.dp--f {display: flex!important;}
.dp--if {display: inline-flex!important;}
.dp--g {display: grid!important;}

.flex {display: flex!important;}
.flex--col {flex-direction: column!important;}
.flex--row {flex-direction: row!important;}
.flex--wrap {flex-wrap: wrap!important;}
.flex--nowrap {flex-wrap: nowrap!important;}
.flex--nonshrink {flex-shrink: 0!important;}
.flex--shrink {flex-shrink: 1!important;}
.jc--sb {justify-content: space-between!important;}
.jc--fs {justify-content: flex-start!important;}
.jc--fe {justify-content: flex-end!important;}
.jc--c {justify-content: center!important;}
.ai--c {align-items: center!important;}
.ai--fs {align-items: flex-start!important;}
.ai--fe {align-items: flex-end!important;}

.grid {display: grid!important;}
.gtc--2 {grid-template-columns: repeat(2, 1fr);}
.gtc--3 {grid-template-columns: repeat(3, 1fr);}
.gtc--4 {grid-template-columns: repeat(4, 1fr);}
.gtc--5 {grid-template-columns: repeat(5, 1fr);}

.gap--5 {gap: 5px;}
.gap--10 {gap: 10px;}
.gap--15 {gap: 15px;}
.gap--20 {gap: 20px;}
.gap--25 {gap: 25px;}
.gap--30 {gap: 30px;}
.gap--40 {gap: 40px;}
.gap--50 {gap: 50px;}
.gap--60 {gap: 60px;}
.gap--70 {gap: 70px;}
.gap--0-5 {gap: 0 5px;}
.gap--0-10 {gap: 0 10px;}
.gap--0-15 {gap: 0 15px;}
.gap--0-20 {gap: 0 20px;}
.gap--0-25 {gap: 0 25px;}
.gap--0-30 {gap: 0 30px;}
.gap--0-40 {gap: 0 40px;}
.gap--0-50 {gap: 0 50px;}
.gap--5-0 {gap: 5px 0;}
.gap--10-0 {gap: 10px 0;}
.gap--15-0 {gap: 15px 0;}
.gap--20-0 {gap: 20px 0;}
.gap--25-0 {gap: 25px 0;}
.gap--30-0 {gap: 30px 0;}
.gap--40-0 {gap: 40px 0;}
.gap--50-0 {gap: 50px 0;}

.fc--main {color: var(--main-color)!important;}
.fc--sub1 {color: var(--sub-color1)!important;}
.fc--sub2 {color: var(--sub-color2)!important;}

.bg--main {background: var(--main-color)!important;}
.bg--sub1 {background: var(--sub-color1)!important;}
.bg--sub2 {background: var(--sub-color2)!important;}
.bg--gray1 {background: var(--gray1)!important;}
.bg--lg1 {background: var(--light-gray1)!important;}

.bg {background: no-repeat center / cover;}

.bdr--10 {border-radius: 10px!important;}
.bdr--15 {border-radius: 15px!important;}
.bdr--20 {border-radius: 20px!important;}

.pc-br {display: block;}
.t-br {display: none;}
.m-br {display: none;}

.pos--r {position: relative;}
.pos--a {position: absolute;}

.mg--0 {margin: 0!important;}
.mg--0-auto {margin: 0 auto!important;}
.ml--0 {margin-left: 0!important;}
.mr--0 {margin-right: 0!important;}
.mt--0 {margin-top: 0!important;}
.mb--0 {margin-bottom: 0!important;}
.mr--auto {margin-right: auto!important;}
.ml--auto {margin-left: auto!important;}
.mt--auto {margin-top: auto!important;}
.mb--auto {margin-bottom: auto!important;}
.pd--0 {padding: 0!important;}
.pl--0 {padding-left: 0!important;}
.pr--0 {padding-right: 0!important;}
.pt--0 {padding-top: 0!important;}
.pb--0 {padding-bottom: 0!important;}

.el_align--center {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.el_align--x_center {position: absolute; top: 0; left: 50%; transform: translate(-50%, 0);}
.el_align--y_center {position: absolute; top: 50%; left: 0; transform: translate(0, -50%);}

@media screen and (max-width: 767px) {
  .is_responsive .pc-br {display: none;}
  .is_responsive .m-br {display: block;}
}
@media screen and (max-width: 499px) {
  .is_responsive .gtc--2,
  .is_responsive .gtc--3,
  .is_responsive .gtc--4,
  .is_responsive .gtc--5 {grid-template-columns: repeat(1, 1fr);}
}



/* Set container */
.container {max-width: calc(100% - 100px); min-width: 320px; margin: 0 auto;}
.container_size--1024 .container {width: 1024px;}
.container_size--1200 .container {width: 1200px;}
.container_size--1420 .container {width: 1420px;}
.container_size--1540 .container {width: 1540px;}
.container_size--full .container {width: 100%;}

@media screen and (max-width: 767px) {
  .is_responsive .container {max-width: calc(100% - 40px); width: 720px!important;}
}



/* Set elements */
.hidden {opacity: 0; font-size: 0; text-indent: -100vw; position: absolute; top: -100vw; left: -100vw; overflow: hidden; padding: 0; margin: 0; width: 0; height: 0;}
.arrow {display: block;width: 10px;height: 10px;border-top: 2px solid #000;border-right: 2px solid #000;}
.arrow.right {transform: rotate(45deg);}
.arrow.left {transform: rotate(-135deg);}
.arrow.up {transform: rotate(-45deg);}
.arrow.down {transform: rotate(135deg);}
.ico--times {transform: rotate(45deg);}
.ico--times,
.ico--plus {display: block;position: relative;width: 30px;height: 30px;}
.ico--times:after,
.ico--times:before,
.ico--plus:after,
.ico--plus:before {display: block;content: '';background-color: #ccc;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.ico--times:after,
.ico--plus:after {width: 100%;height: 1px;}
.ico--times:before,
.ico--plus:before {width: 1px;height: 100%;}
.ico--circle {position: relative;display: flex;justify-content: center;align-items: center;width: 40px;height: 40px;border-radius: 100%;border: 1px solid #000;}
.ico--circle .arrow {position: static;width: 30%;height: 30%;border-color: #000;}
.ico--circle .arrow.left {margin-left: 10%;}
.ico--circle .arrow.right {margin-left: -10%;}
.ico--circle .arrow.top {margin-top: 10%;}
.ico--circle .arrow.bottom {margin-top: -10%;}
.ico--hamburger {display: flex; flex-direction: column; justify-content: space-between; width: 40px; height: 40px;}
.ico--hamburger .bar {width: 100%; height: 2px; background: #333;}
.ico--hamburger .bar:nth-child(1) {}
.ico--hamburger .bar:nth-child(2) {}
.ico--hamburger .bar:nth-child(3) {}
.ico--play {display: block;width: 0;height: 0;border-left: 13px solid #000;border-top: 8px solid transparent;border-bottom: 8px solid transparent;margin-left: 3px;}
.ico--pause {display: block; width: 18px; height: 20px; display: flex; justify-content: space-between;}
.ico--pause::after,
.ico--pause::before {width: 7px; height: 100%; content: ''; display: block; background: #000;}
.ico--loading {display: block;width: 30px;height: 30px;border-radius: 50%;border: 4px solid #03c75b;border-right-color: transparent;animation-name: loading;animation-iteration-count: infinite;animation-duration: 1s;animation-timing-function: ease-in-out;}
@keyframes loading {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

ul.bullet > li {
    position: relative;
    padding: 0 0 0em 1em;
    text-align: left;
    font-weight: 400;
    line-height: 150%;
  }
  ul.bullet > li:last-child {
    padding-bottom: 0 !important;
  }
  ul.bullet > li:before {
    display: block;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background-color: #707070;
    position: absolute;
    top: 0.75em;
    left: 0;
    transform: translateY(-50%);
  }
  ul.bullet.tiny > li:before {
    width: 2px;
    height: 2px;
  }
  ul.bullet.squared > li:before {
    width: 4px;
    height: 4px;
    border-radius: 0;
  }
  ul.bullet.hyphen > li:before {
    width: 5px;
    height: 1px;
    border-radius: 0;
    background-color: #333;
  }
  ul.bullet.circled > li {font-size: 18px; padding-left: 1.5em;}
  ul.bullet.circled > li:before {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid var(--main-color);
    background: #aaa79f;
    box-sizing: border-box;
  }
  ul.bullet.big > li::before {
    width: 4px; height: 4px; background: #5499d3;
  }
  ul.bullet.plus > li:before {
    content: '+';
    color: var(--main-color);
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
  }

.overflow_container {overflow: auto;}
.overflow_container--x {overflow-x: auto;}
.overflow_container--y {overflow-y: auto;}

.catalog__link {cursor: pointer;}
.cover_paging {position: absolute;top: 0; left: 0;width: 100%; height: 100%;display: block;z-index: 5555;}

@media screen and (max-width: 767px) {
  .is_responsive ul.bullet > li {font-size: 14px;}

  .is_responsive .m_overflow_container--x {background: var(--light-gray1); overflow-x: auto; padding-bottom: 25px; padding-top: 25px; position: relative; border: 1px solid #dfdfdf; border-radius: 10px;}
  .is_responsive .m_overflow_container--x .overflow_inner {position: relative; min-width: 720px;}
  .is_responsive .m_overflow_container--x .overflow_inner::before {content: 'Swipe'; padding: 5px 20px; background: var(--gray2); position: sticky; top: 10px; left: 50%; transform: translate(-50%); z-index: 1; border: 1px solid var(--gray2); border-radius: 50px; color: #fff; display: inline-block; margin-bottom: 30px;}
  .is_responsive .m_overflow_container--x .overflow_inner::after {content: ''; width: calc(100%); height: 1px; background: var(--gray2); position: absolute; top: 28px; left: 0; z-index: 0;}

  .is_responsive .m_overflow_container--y {background: var(--light-gray1); overflow-y: auto; padding-right: 20px;}
}

/*== Catalog Frame ==*/
body {background: #000; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; touch-action: pan-y;}
.catalog {position: relative; overflow: hidden; -webkit-will-change: transform; -ms-will-change: transform; -moz-will-change: transform; will-change: transform;}
.catalog__wrapper {position: relative; width: 5760px; height: 1080px; display: flex; -webkit-will-change: transform; -ms-will-change: transform; -moz-will-change: transform; will-change: transform;}
.catalog__page {position: relative; width: 1920px; height: 1080px; overflow: hidden;}

.catalog__contents {position: relative; height: 100%;}
.page__container {position: relative; height: 100%; padding: 50px;}
.page__bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center / cover; z-index: 0;}
.page__content {position: relative; height: 100%; z-index: 1;}

.catalog--effect--fade .catalog__page--active:not(.catalog__page--duplicate) {z-index: 10;}

.catalog__page--active .bg--anime {animation: 20s linear;}
.catalog__page--active .bg--anime.infinite {animation-iteration-count: infinite; animation-direction: alternate;}
.catalog__page--active .bg--anime.expand {animation-name: bgExpand;}
.catalog__page--active .bg--anime.shrink {animation-name: bgShirink; transform: scale(1.2);}
@keyframes bgExpand {
    to {transform: scale(1.2);}
}
@keyframes bgShirink {
    from {transform: scale(1.2);}
    to {transform: scale(1);}
}

.catalog__paging {position: absolute; bottom: 0; left: 0; z-index: 8888; width: 100%; display: flex; justify-content: space-between; padding: 50px; pointer-events: none;}
.catalog__paging .btn {pointer-events: initial;}
.catalog__paging .btn--prev {margin-right: auto;}
.catalog__paging .btn--next {margin-left: auto;}
.first_page .catalog__paging .btn--prev {opacity: 0!important; pointer-events: none;}
.last_page .catalog__paging .btn--next {opacity: 0!important; pointer-events: none;}

body.is_responsive {display: block; touch-action: auto;}
.is_responsive .catalog {transform: none!important; -webkit-will-change: initial!important; -moz-will-change: initial!important; -ms-will-change: initial!important; will-change: initial!important;}
.is_responsive .catalog__wrapper {transform: none!important;}
.is_responsive .catalog__page {}
.is_responsive .catalog__contents {}