@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: 150%;}
html {font-size:12px;font-weight:400;}
body {overflow-x: hidden;font-size: 12px;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;}


/* == 베이스 Elements == */
/* Fonts */
.noto {font-family: "Noto Sans KR";}
.roboto { font-family: "Roboto";}
.poppins { font-family: "Poppins"; }
.tt{ font-family: 'tt_norms'; }
.univers{ font-family: 'univers_ltd'; }
.fontsize--14 {font-size: 14px!important;}
.fontsize--15 {font-size: 15px!important;}
.fontsize--16 {font-size: 16px!important;}
.fontsize--17 {font-size: 17px!important;}
.fontsize--18 {font-size: 18px!important;}
.fontsize--19 {font-size: 19px!important;}
.fontsize--20 {font-size: 20px!important;}
.fontsize--22{ font-size: 22px!important;}
.fontweight--200 {font-weight: 200!important;}
.fontweight--300 {font-weight: 300!important;}
.fontweight--400 {font-weight: 400!important;}
.fontweight--500 {font-weight: 500!important;}
.fontweight--600 {font-weight: 600!important;}
.fontweight--700 {font-weight: 700!important;}
.fontweight--800 {font-weight: 800!important;}
.fontweight--900 {font-weight: 900!important;}
.textalign--left {text-align: left!important;}
.textalign--center { text-align: center!important; }
.textalign--right { text-align: right!important;}
.font--uppercase {text-transform: uppercase!important;}
.font--capitalize {text-transform: capitalize!important;}
.font--underline {text-decoration: underline!important;}
.color--fff {color: #fff;}
.color--333 {color: #333;}
.color--101010 {color: #101010;}

/* Elements */
ul.bullet > li {position: relative;padding: 0 0 0 1em; text-align: left; line-height: 1.5; margin: 0 0 5px 0;}
ul.bullet > li:last-child {margin-bottom: 0!important;}
ul.bullet > li:before {display: block;content: "";width: 3px;height: 3px;border-radius: 100%;background-color: #333;position: absolute;top: 0.75em;left: 0; transform: translateY(-50%);}
ul.bullet.big > li:before {width: 6px; height: 6px; background: #bbb;}
ul.bullet.hyphen > li:before {width: 6px; height: 1px; background: #555;}

.video-box {position: relative; overflow: hidden; width: 100%; height: 0; padding-bottom: 56.25%; background-color: #000;}
.video-box .video,
.video-box iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;}
.video-box__loading {position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -5px; z-index: 0;}
.hidden {position: absolute!important;font-size: 0px!important;text-indent: -9999px!important;color:transparent!important;}
.pc-br {display: block;}
.t-br,
.m-br {display: none;}
.m-only{ display: none!important; }
.pc_img {display: block;}
.mo_img {display: none;}
.bg {background: no-repeat center / cover;}
.pd--0 {padding: 0!important;}
.pd_top--0 {padding-top: 0!important;}
.pd_bottom--0 {padding-bottom: 0!important;}
.pd_right--0 {padding-right: 0!important;}
.pd_left--0 {padding-left: 0!important;}
.mg_top--0 {margin-top: 0!important;}
.mg_bottom--0 {margin-bottom: 0!important;}
.mg_left--auto {margin-left: auto!important;}
.mg--0--auto {display: block; margin: 0 auto!important;}
b{ font-weight: 500; }

/* Icons */
/* .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);} */



.triangle{ display: inline-block; width: 10px; height: 10px; border-left: 7px solid #0e6bb6; border-top: 5px solid transparent; border-bottom: 5px solid transparent;}
.arrow {display:block;width:16px;height:16px;border-top:3px solid #fff;border-right:3px solid #fff; }
.arrow.right {transform:rotate(45deg) skew(-5deg, -5deg); margin-right: 8px; }
.arrow.left {transform:rotate(-135deg) skew(-5deg, -5deg); margin-left: 8px; }
.arrow.up {transform:rotate(-45deg);}
.arrow.down {transform:rotate(135deg);}

/* .history .arrow{ border-top: 3px solid #333; border-right: 3px solid #333; } */





.circle .arrow { position: absolute; top: 50%; left: 50%; }
.ico--plus {display:block;position:relative;}
.ico--plus:after,
.ico--plus:before {display:block;content:"";background-color:#ccc;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.ico--plus:after {width: 100%; height: 1px;}
.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.up {margin-top: 10%;}
.ico--circle .arrow.down {margin-top: -10%;}
.ico--hamburger {display: flex; flex-direction: column; justify-content: space-between; width: 26px; height: 26px;}
.ico--hamburger .bar {width: 100%; height: 3px; border-radius: 3px; background: #b2b2b2;}

/* line clamps */
.lineclamp--1 {display: block; word-break: break-all!important; white-space: nowrap; text-overflow: ellipsis; width: 100%; overflow: hidden;}
.lineclamp--2, .lineclamp--3, .lineclamp--4 {display:-webkit-box;-webkit-box-orient: vertical;overflow: hidden;}
.lineclamp--2 {-webkit-line-clamp: 2;}
.lineclamp--3 {-webkit-line-clamp: 3;}
.lineclamp--4 {-webkit-line-clamp: 4;}

@media screen and (max-width: 1024px) {
    .t-br {display: block;}
    .pc-br,
    .m-br {display: none;}
    .pc_img {display: none;}
    .mo_img {display: block;}
    ul.bullet.big > li:before {width: 4px; height: 4px;}
    .modal__overflow_wrapper {padding-top: 100px;}
}
@media screen and (max-width: 720px) {
    .m-br {display: block;}
    .pc-br,
    .t-br {display: none;}
    .pc-only{ display: none; }
    .m-only{ display: flex!important; }
    .modal__inner {padding: 60px 20px 40px 20px;}
    .modal__foot {padding: 20px;}
}

/* Flex Layouts */
.flex__col--2, .flex__col--3, .flex__col--4, .flex__col--5, .flex { display: flex; }
.flex__col--2, .flex__col--3, .flex__col--4, .flex__col--5 {flex-wrap: wrap;}
.flex__col--2 .flex__item {width: 49%; margin: 0 2% 2% 0;}
.flex__col--3 .flex__item {width: 32%; margin: 0 2% 2% 0;}
.flex__col--4 .flex__item {width: 23.5%; margin: 0 2% 2% 0;}
.flex__col--5 .flex__item {width: 18.4%; margin: 0 2% 2% 0;}
.layout {display: flex; width: calc(100% + 10px); margin-left: -5px;}
/* .layout .row {display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%;} */
.layout .row .col {padding: 0 5px 20px 5px;}
.layout .row .col--100 {width: 100%;}
.layout .row .col--50 {width: 50%;}
.layout .row .col--45 {width: 45%;}
.layout .row .col--40 {width: 40%;}
.layout .row .col--33 {width: calc(100% / 3);}
.layout .row .col--30 {width: 30%;}
.layout .row .col--25 {width: 25%;}
.layout .row .col--20 {width: 20%;}

@media screen and (min-width: 1025px) {
    .flex__col--2 .flex__item:nth-child(2n) {margin-right: 0!important;}
    .flex__col--3 .flex__item:nth-child(3n) {margin-right: 0!important;}
    .flex__col--4 .flex__item:nth-child(4n) {margin-right: 0!important;}
    .flex__col--5 .flex__item:nth-child(5n) {margin-right: 0!important;}
}
@media screen and (max-width: 1024px) {
    .flex__col--5 .flex__item {width: 23.5%; margin: 0 2% 2% 0;}
    .flex__col--5 .flex__item:nth-child(4n) {margin-right: 0!important;}
    .layout .row .col--25 {width: calc(100% / 3);}
    .layout .row .col--20 {width: calc(100% / 3);}
}
@media screen and (max-width: 768px) {
    .layout .row .col--50 {width: 50%;}
    .layout .row .col--40 {width: 50%;}
    .layout .row .col--33 {width: 50%;}
    .layout .row .col--30 {width: 50%;}
    .layout .row .col--25 {width: 50%;}
    .layout .row .col--20 {width: 50%;}
}
@media screen and (max-width: 500px) {
    .layout .row .col--50 {width: 100%;}
    .layout .row .col--40 {width: 100%;}
    .layout .row .col--33 {width: 100%;}
    .layout .row .col--30 {width: 100%;}
    .layout .row .col--25 {width: 100%;}
    .layout .row .col--20 {width: 100%;}
}


/*== 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: 920px; overflow: hidden;}

.catalog__contents {position: relative; height: 100%;}

#introPage01 .page__container,
#introPage02 .page__container,
#introPage03 .page__container,
#index .page__container
{ padding: 195px 100px; }

.page__container {position: relative; height: 100%; padding: 90px 50px 100px 440px;background-color: #fff;}
.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__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: 40px 50px 40px 1760px; 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 {}


@media screen and ( max-width : 720px ){  
    .page__container{ min-height: 100vh; padding: 100px 20px!important; }
    

}