@charset "utf-8";

/* reset */
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,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
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,
details,
figcaption,
figure,
dialog,
footer,
header,
hgroup,
menu,
main,
nav,
section {
  margin: 0;
  padding: 0;
  border: 0
}

article,
aside,
details,
figcaption,
figure,
dialog,
footer,
header,
hgroup,
menu,
main,
nav,
section {
  display: block
}

body {
  word-wrap: break-word;
  word-break: keep-all;
  color: #242424;
  line-height: normal;
  -webkit-text-size-adjust: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: 400
}

a {
  color: #000
}

a:link {
  text-decoration: none
}

a:visited {
  text-decoration: none
}

a:hover {
  text-decoration: none
}

a:focus {
  text-decoration: none
}

a,
button,
input {
  -webkit-tap-highlight-color: rgb(0 0 0 / .2)
}

body,
select,
input,
textarea,
button {
  font-feature-settings: "tnum";
  font-family: "Noto Sans KR", sans-serif;
  vertical-align: middle;
  line-height: 1.5;
  font-weight: 400
}

ol,
ul,
li {
  list-style: none
}

label {
  vertical-align: middle;
  display: inline-block
}

legend,
caption {
  width: 1rem !important;
  height: 1rem !important;
  opacity: 0 !important;
  overflow: hidden;
  margin-top: -1rem !important;
  border: 0 none !important;
  background: transparent !important;
  color: transparent !important
}

img {
  vertical-align: middle;
  border: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

address,
em,
i {
  font-style: normal
}

strong,
b {
  font-weight: 400
}

.fwb {
  font-weight: bold !important
}

.fwn {
  font-weight: normal !important
}

.bsc {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.bsb {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[tabindex]:focus>.pbd,
::-ms-clear {
  display: none
}

input[type=search]::-ms-clear {
  display: none;
  width: 0;
  height: 0
}

input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none
}

input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield
}

input::-webkit-input-placeholder {
  color: #8e9094;
  font-weight: 400;
  text-align: left
}

input:-ms-input-placeholder {
  color: #8e9094;
  font-weight: 400;
  text-align: left
}

textarea::-webkit-input-placeholder {
  color: #8e9094;
  font-weight: 400;
  text-align: left
}

textarea:-ms-input-placeholder {
  color: #8e9094;
  font-weight: 400;
  text-align: left
}

select::-ms-expand {
  display: none
}

input[type=number] {
  appearance: textfield !important;
  -moz-appearance: textfield !important
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0
}

a.disabled {
  pointer-events: none;
  cursor: default
}

/* common */
:root{  
  color-scheme: only light;
  --bounce: cubic-bezier(.1, 1.3, .75, 1);
  --ease: cubic-bezier(.1, .75, .85, 1);
}

html {
  font-size: max(calc(100vw / 1920), 1px);
}
html.min{
  font-size: min(calc(100vw / 1440), 0.75px);
}
html.mobile {
  font-size: min(calc(100vw / 720), calc(100vh / 1280));
}

body.resizing * {
  transition: none !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
}


img {
  display:block;
  margin:0;
  padding:0;
  width: 100%;
  height:auto;
  object-fit: contain;
}

.blind {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden;
  margin-left: -1px !important;
  border: 0 none !important;
  background: transparent !important;
  color: transparent !important;
}
.ci{position:absolute;z-index:5;pointer-events:fill;cursor:pointer}

.cmp-container{overflow-x:clip;position:relative;width:100%}
.desk-top .cmp-container{min-width:1366px}
.page-tab-container > section,
.cmp-container > section{position:relative;z-index:1;width:100%;height:auto}

.cmp-container .full-vh,
.desk-top .cmp-container .full-vh-pc,
.mobile .cmp-container .full-vh-mo{height:100vh}
.desk-top .cmp-container .full-vh,
.desk-top .cmp-container .full-vh-pc{min-height:50vw}
.desk-top.min .cmp-container .full-vh,
.desk-top.min .cmp-container .full-vh-pc{height:75vw}
.mobile .cmp-container .full-vh,
.mobile .cmp-container .full-vh-mo{max-height:233vw}

.desk-top .only-mo,
.mobile .only-pc{display:none !important}

.cmp-container .bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.cmp-container .wrap{position:relative;z-index:2;max-width:100%;margin:0 auto}

.cmp-container .full-vh .wrap,
.desk-top .cmp-container .full-vh-pc .wrap,
.mobile .cmp-container .full-vh-mo .wrap{height:100%;display:flex;flex-direction:column;justify-content:center}

.cmp-container .full-vh .wrap *,
.desk-top .cmp-container .full-vh-pc .wrap *,
.mobile .cmp-container .full-vh-mo .wrap *{flex:none}

.desk-top .cmp-container .wrap{width:1440rem}
.mobile .cmp-container .wrap{width:720rem;max-width:100%}


.video-content {
  margin: 0 auto;
  position: relative;
}

.video-content::before {
  content: "";
  display: block;
  padding-top: 56.25%
}

.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: clip
}
.video-player>iframe {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin-left: -1px;
  margin-top: -1px;
  border: none
}


@keyframes fadeInMoveUpMargin {
  0% {
    opacity: 0;
    margin-top:25rem;
  }

  100% {
    opacity: 1;
    margin-top:0;
  }
}
@keyframes fadeInMoveUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 25rem, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInMoveDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -25rem, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInScaleUp {
  0% {
    opacity: 0;
    transform: scale3d(.9, .9, .9);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes fadeInScaleDown {
  0% {
    opacity: 0;
    transform: scale3d(1.15, 1.15, 1.15);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes upDownFloating {

  0% {
    transform: translate3d(0, -2.5%, 0);
  }

  50% {
    transform: translate3d(0, 2.5%, 0);
  }

  100% {
    transform: translate3d(0, -2.5%, 0);
  }
}


.cmp-container .header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88rem;
  z-index: 99;
  display: flex;
  align-items: stretch;
  gap: 20rem;
  justify-content: space-between;
  pointer-events: none;
}

.cmp-container .page-tab-container .header{
  top:67rem
}

.cmp-container .header .btn-back {
  pointer-events: fill;
  display: flex;
  flex: none;
  width: 88rem;
  height: 88rem;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding:4rem;
  margin-left:4rem;
}

.cmp-container .header .btn-back .icon{
  display:block;width:100%;height:auto
}

.desk-top .cmp-container .header{
  display:none;
}

.page-tab-group{position:absolute;z-index:10;top:0;left:0;width:100%;display:flex;justify-content:center;}
.page-tab-group li{flex:1;display:block;position:relative;}
.page-tab-group li::before{
  content:"";display:block;position:absolute;left:0;width:100%;bottom:0;height:2rem;background:rgba(255,255,255,.2)
}
.page-tab-group .page-tab-btn{position:relative;z-index:1;display:flex;width:100%;height:100rem;flex-direction:column;justify-content:center;align-items:center;background:#dddee1}

.page-tab-group > li:first-child .page-tab-btn{align-items:flex-end;box-shadow:-3rem -3rem 7rem 0 rgba(0,0,0,.35) inset}
.page-tab-group > li:last-child .page-tab-btn{align-items:flex-start;box-shadow:3rem -3rem 7rem 0 rgba(0,0,0,.35) inset}
.cmp-container .page-tab-btn > span{color:#fff;line-height:1.2;text-align:center;font-weight:bold;letter-spacing:-.045em;width:100%;display:block;flex:none;position:relative;padding-bottom:.15em}

.desk-top .page-tab-group{gap:24rem}
.desk-top .page-tab-group .page-tab-btn{height:50rem}
.desk-top .page-tab-group .page-tab-btn > span{max-width:526rem;font-size:17rem}
.desk-top .cmp-container .page-tab-group .page-tab-btn[data-active="true"] > span{
  font-size:21rem 
}

.mobile .page-tab-group{gap:16rem}
.mobile .page-tab-group .page-tab-btn{height:67rem}
.mobile .page-tab-group .page-tab-btn > span{max-width:352rem;font-size:22.5rem}
.mobile .cmp-container .page-tab-group .page-tab-btn[data-active="true"] > span{
  font-size:28.4rem 
}

.cmp-container .page-tab-group .page-tab-btn[data-active="true"]{background:transparent;box-shadow:none;pointer-events:none}
.cmp-container .page-tab-group .page-tab-btn[data-active="true"] > span{color:#fff;}

.cmp-container .page-tab-container{
  width:100%;position:relative;display:none
}
.cmp-container .page-tab-container[data-active="true"]{
  display:block
}