@charset "utf-8";


:root {
  color-scheme: light only;
  font-size: 100px;
  --bounce: cubic-bezier(.1, 1.4, .75, 1);
  --zoom-bounce: cubic-bezier(0.3, -2.5, 0.5, 1);
  --ease: cubic-bezier(.1, .7, .48, 1);
}


/* reset */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-family: inherit;
    font-weight: 500;
}

strong {
    font-weight: 700;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    font-family: "S-CoreDream", sans-serif;
    font-weight: 500;
    color: #000;
    background-color: #ececec;
    scroll-behavior: smooth;
    overscroll-behavior: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 폼 요소 초기화 및 리셋 */
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
table,
th,
td,
form,
fieldset,
legend,
select,
button,
input,
textarea,
figure,
figcaption {
    margin: 0;
    padding: 0;
    font-size: 0;
    font-weight: inherit;
    font-style: inherit;
    color: inherit;
    line-height: 0;
}

fieldset,
li,
img {
    border: 0;
    vertical-align: baseline;
}

ul,
ol {
    list-style: none;
}

input,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

address,
caption,
cite,
code,
dfn,
em,
var,
h1,
h2,
h3,
h4,
h5,
h6,
strong,
span {
    font-style: inherit;
    color: inherit;
    font-weight: inherit;
}

button {
    box-shadow: none;
    outline: 0;
    border: 0 none;
    background: transparent;
    cursor: pointer;
}

button::-moz-focus-inner {
    padding: 0;
}

a,
a:focus,
a:active,
a:hover {
    outline: none;
    box-shadow: none;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

hr {
    display: none;
}

legend {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    font-size: 1px;
    line-height: 100px;
    white-space: nowrap;
}

::-ms-clear,
::-ms-reveal {
    display: none;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: rgba(255, 255, 255, .5);
}

::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background: rgba(0, 0, 0, .25);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .4);
}

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

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

input::placeholder {
    opacity: .2;
    color: inherit;
}

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

select {
    -o-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0 none;
    outline: 0 none;
}

.screen-out {
    font-size: 1px;
    line-height: 1px;
    width: 1px;
    height: 1px;
    left: -1px;
    top: -1px;
    position: absolute;
    overflow: hidden;
}

html:focus-within {
    scroll-behavior: smooth;
}
.no-ui {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  width: 100%;
  caret-color: auto;
}

.no-ui::-webkit-outer-spin-button,
.no-ui::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-ui[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}


@media (min-width: 1201px) {
  :root {
      font-size: max(100px, 5.2083vw);
  }
  .pc-only {
    display: block !important
  }

  .mo-only {
    display: none !important
  }
}

@media (max-width: 1200px) {
  :root {
      font-size: calc(13.8889vw);
  }
  .pc-only {
    display: none !important
  }

  .mo-only {
    display: block !important
  }
}


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

.page-wrapper{overflow:clip}
.page-wrapper,
.page {
  position: relative;
  width: 100%;
  height: auto;
}
.page-wrapper video,
.page-wrapper svg,
.page-wrapper img,
.modal-container img{display:block;width:100%;height:auto;object-fit:contain}

.page-bg{position:relative;height:auto}
.page-bg > .kv{position:absolute;opacity:0}
.page-cont{position:absolute;left:50%;top:0;height:100%;z-index:2}

footer{background:url(../img/footer-bg.jpg) repeat-x center / auto 100%;display:flex;width:100%;align-items: center;justify-content: center;}
footer .copyright{flex:none;color:#fff;font-weight:400;font-size:15px;line-height:1.1}
  footer .copyright{letter-spacing:.08em;}

header{position:fixed;left:0;top:0;width:100%;z-index:10;pointer-events:none}

#gnb_toggle{position:absolute;pointer-events:auto}
#gnb{position:fixed;display:flex;flex-direction:column;width:1.79rem;align-items:center;gap:.14rem;pointer-events:auto}
.nav-link{position:relative;width:100%;flex:none}
.nav-link > img{opacity:0;transform:rotateX(-90deg);will-change: opacity, transform;transition:opacity .15s var(--ease), transform .3s var(--ease)}
.nav-link > span{position:absolute;left:0;top:50%;transform:translate3d(0, -50%, 0);color:#9e9e9e;letter-spacing:-.02em;font-size:.22rem;line-height:.26rem;width:100%;text-align:center;}
.nav-link.on > span{color:#fff}
.nav-link.on > img{opacity:1;transform:rotateX(0)}

.market-buttons{display:flex;align-items:center;justify-content:center;width:100%}
.market-buttons > button{display:block;flex:none}

.page-bg .kv{position:absolute;opacity:0;will-change: opacity, transform;transition:opacity .5s var(--ease), transform 1s var(--ease);z-index:1;pointer-events:none}
#wrapper.init .page.active .kv{opacity:1;transform:translate3d(0,0,0);transition-delay:.5s, .4s}
.page-cont__tag,
.page-cont__title,
.page-cont__period,
.divider {
  display:block;
  margin:0 auto;
}
.page-cont__tag{scroll-margin-top:50px}
.page-cont__desc{text-align:center;font-weight:500;letter-spacing:-.04em;line-height:1.25}

.box-inner{position:absolute;left:0;top:0;width:100%;height:100%}
.scroll-point{position:absolute;width:100%;left:0;}



@media (min-width: 1201px) {
  :root {
    font-size: max(100px, calc(100vw / 5.2083vw));
  }     
  .page-bg{min-width:19.2rem;left:min(calc((100% - 19.2rem)/2), 0px)}
  .page-cont{width:10.4rem;margin-left:-5.2rem}
  footer{height:1.16rem}
  #gnb{top:50%;right:.7rem;transform:translate3d(0, -50%, 0)}
  #gnb::before{content:"";display:block;width:120%;height:120%;position:absolute;left:-10%;top:-10%;background:#000;z-index:-1;pointer-events:none;border-radius:100%;filter:blur(.5rem);opacity:.7}
  .nav-link:hover > span{color:#fff}
  .nav-link:hover > img{opacity:1;transform:rotateX(0)}
  #gnb_toggle{display:none}

  .page-cont__tag{width:2.57rem;margin-top:2rem}
  .page-cont__title{width:5.32rem;margin-top:.2rem}
  .page-cont__period{margin-top:.15rem}
  .page-cont__desc{font-size:.23rem;margin-top:.2rem}
  #features .divider,
  .page-cont > .divider{width:3.46rem;margin-top:.15rem}
  .page-cont__period + .divider{margin-top:.1rem}
  .scroll-point{top:1.4rem}
  #main .scroll-point{top:0}
}

@media (max-width: 1200px) {
  :root {
    font-size: calc(13.8889vw);
  }
  .page-bg{width:100%}
  .page-cont{width:7.2rem;margin-left:-3.6rem}
  footer{height:.98rem}

  header{will-change:backdrop-filter, background-color;transition:backdrop-filter .5s var(--ease), background-color .5s var(--ease)}
  header.opened{top:0;height:100%;background-color:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem)}

  #gnb{opacity:0;pointer-events:none;transform:translate3d(100%, 0, 0);right:.2rem;top:.75rem;will-change:opacity, transform;transition:opacity .5s var(--ease), transform .5s var(--ease);padding-bottom:.75rem}
  html.gnb-locked{overscroll-behavior:none}
  header.opened{pointer-events:auto;overscroll-behavior:contain;touch-action:pan-y;overflow-y:auto}
  header.opened #gnb{opacity:1;pointer-events:auto;transform:translate3d(0, 0, 0)}

  #gnb_toggle{right:0;top:0;width:.64rem;height:.64rem}
  #gnb_toggle .icon{
    width:.24rem;height:.03rem;border-radius:.02rem;background:#aaa8a9;position:absolute;left:50%;top:50%;
    transform: translate3d(-50%, -50%, 0);
    transition: background-color .5s var(--ease);
  }
  #gnb_toggle .icon::before,
  #gnb_toggle .icon::after {
    content: "";
    display: block;
    width: .24rem;
    height: .03rem;
    border-radius: .02rem;
    background: #aaa8a9;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform, top;
    transition: top .5s var(--ease), transform .5s var(--ease);
  }
  #gnb_toggle .icon::before {
    top: calc(50% - .07rem);
  }
  #gnb_toggle .icon::after {
    top: calc(50% + .07rem);
  }
  header.opened #gnb_toggle .icon{background:transparent}  
  header.opened #gnb_toggle .icon::after{top:50%;transform:translate3d(-50%, -50%, 0) rotate(-45deg)}
  header.opened #gnb_toggle .icon::before{top:50%;transform:translate3d(-50%, -50%, 0) rotate(45deg)}

  .page-cont__tag{width:2.04rem;margin-top:.72rem}
  .page-cont__title{width:4.24rem;margin-top:.14rem}
  .page-cont__period{width:2.16rem;margin-top:.1rem}
  .page-cont__desc{font-size:.18rem;margin-top:.15rem}
  #features .divider,
  .page-cont > .divider{width:2.6rem;margin-top:.12rem}
  .page-cont__period + .divider{margin-top:.08rem}
  .scroll-point{top:0}
  footer .copyright{font-size:.16rem}
}





/* main */
#main{background:#000;z-index:5}
#main .page-bg video{filter:blur(.1rem);will-change: filter}
.init #main .page-bg video{opacity:1;filter:blur(0);transition:filter .5s var(--ease)}
#main .slogan{display:block;margin:0 auto}
.main-play-btn{display:block;margin:0 auto}
.bi{display:block;margin:0 auto}
.caligraphy{position:absolute;bottom:0;width:100%;left:0;overflow:visible;display:flex;align-items:start;justify-content:center;flex-direction:row-reverse}
.caligraphy > p,
.caligraphy > span{display:block;position:relative;flex:none}
.lounge-btn{position:absolute;left:0;top:0;z-index: 3;}
.lounge-btn > .icon{position:absolute;left:50%;top:50%;transform:translate3d(-50%, -50%, 0)}

@media (min-width: 1201px) {
  #main .page-cont{height:10.8rem;bottom:auto}
  #main .market-buttons{gap:.06rem;margin-top:.52rem}
  #main .market-buttons > button{width:1.32rem}
  #main .slogan{width:9.8rem;margin-top:.4rem}
  .main-play-btn{width:1.46rem;margin-top:2.36rem}
  .bi{width:5.2rem;margin-top:.48rem}
  .lounge-btn{width:1.2rem;height:.96rem}
  .lounge-btn > .icon{width:.53rem}

  .caligraphy{height:4.2rem;gap:.17rem}
  .caligraphy > p{width:.6rem}
  .caligraphy .t-01{top:-.37rem}
  .caligraphy .t-02{top:.03rem}
  .caligraphy .t-03{top:2.46rem}
  .caligraphy .deco-line.d-01{height:2.56rem}
  .caligraphy .deco-line.d-02{height:2.05rem}
}

@media (max-width: 1200px) {
  #main .page-bg > video{position:relative;min-width:12rem;left:min(calc((100% - 12rem)/2), 0px)}
  #main .page-cont{height:9.05rem;bottom:auto}
  #main .market-buttons{gap:.06rem;margin-top:.4rem}
  #main .market-buttons > button{width:1.22rem}
  #main .slogan{width:5.47rem;margin-top:.46rem}
  .main-play-btn{width:1.46rem;margin-top:2.15rem}
  .bi{width:4.73rem;margin-top:1.3rem}
  .lounge-btn{width:.64rem;height:.64rem}

  .caligraphy{height:3.5rem;gap:.13rem;margin-top:.8rem}
  .caligraphy > p{width:.44rem}
  .caligraphy .t-01{top:0}
  .caligraphy .t-02{top:.3rem}
  .caligraphy .t-03{top:2.08rem}
  .caligraphy .deco-line.d-01{height:2rem}
  .caligraphy .deco-line.d-02{height:1.46rem}
}


/* preregister */
#preregister .page-cont__desc{color:#5b3918}
.preregister-content{position:relative;margin:0 auto;z-index:2}
.preregister-rewards{position:absolute;left:0;top:0}
.preregister-fieldset{position:absolute;right:0;bottom:0}
.preregister-fieldset .box-inner{left:auto;right:0}
.preregister-fieldset .title{margin:0 auto;display:block}
.input-field{position:relative;margin:0 auto;box-sizing:border-box;border:1px solid #a0a0a0;display:flex;align-items:center}
.input-field > div{
  flex:1;
  position: relative;
  height:100%
}
.input-field > p{  
  flex:none;
  text-align:center;
}
.input-field input {
  box-sizing: border-box;
  position: absolute;
  text-align: left;
  width:100%;left:0;top:0;height:100%;
  border:0 none;
  outline:none
}
.input-field > p,
.input-field input,
.input-field label{
  display: block;
  color: #6d6d6d;
  font-weight:500;
  letter-spacing: -.04em;
}

.input-field input+label {
  position: absolute;
  pointer-events: none;
}

.input-field input:focus+label,
.input-field input:valid+label,
.input-field input.has-value+label {
  display: none
}

input[type="checkbox"]+label {
  display: inline;
  cursor: pointer;
  color: #7c7c7c;
  font-weight: 500;
  letter-spacing: -.03em;
}

input[type="checkbox"].radio+label{color:#575757;font-weight:600}
input[type="checkbox"]+label>span {
  vertical-align: middle;
}

input[type="checkbox"]+label .icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  background: url(../img/checkbox.svg) no-repeat center / contain;
}

input[type="checkbox"]:checked+label .icon {
  background-image: url(../img/checkbox_on.svg)
}
input[type="checkbox"].radio+label .icon {
  background-image: url(../img/radio.svg)
}

input[type="checkbox"].radio:checked+label .icon {
  background-image: url(../img/radio_on.svg)
}

.user-agree {
  display:block;margin:0 auto
}
.user-agree li {
  display: flex;
  align-items: start;
  overflow: hidden;
  position: relative;
  text-align: left;
  justify-content: center
}
.user-agree li input {
  outline: none
}
.user-agree li label{flex:1}
.user-agree .btn-docs{display:block;flex:none;background:#959494;position:relative}
.user-agree .btn-docs > span{position:absolute;width:100%;left:0;top:50%;transform:translate3d(0, -55%, 0);color:rgba(255,255,255,.6);letter-spacing:-.03em;font-weight:400}
.preregister-fieldset .common-btn{display:block;position:relative;margin:0 auto}

.preregister-fieldset .common-btn > strong{position:absolute;width:100%;text-align:center;left:0;font-weight:900;color:#fff;letter-spacing:0;text-indent:-1em;top:50%;transform:translate3d(0, -55%, 0);line-height:1.1}

.preregister-fieldset .common-btn .go{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate3d(0, -50%, 0) rotate(45deg);
  border-style:solid;border-color:#fff
}


@media (min-width: 1201px) {
  .page-cont__period{width:2.7rem}
  #preregister .kv{width:7.84rem;left:.88rem;top:1.42rem;transform:translate3d(-15%, 3%, 0)}
  .preregister-content{height:5.36rem;margin-top:.3rem}
  .preregister-rewards{width:4.44rem}
  #preregister .market-buttons{gap:.07rem;margin-top:.3rem}
  #preregister .market-buttons > button{width:1.44rem}

  .preregister-fieldset{width:7.3rem}
  .preregister-fieldset .box-inner{width:6.34rem}
  .preregister-fieldset .title{width:3.85rem;margin-top:.48rem}
  .input-field{width:3.85rem;border-radius:.08rem;background:#fff;margin-top:.3rem;height:.58rem}
  .input-field > p{width:.94rem;font-size:.18rem;line-height:.22rem}
  .input-field input,
  .input-field label{font-size:.18rem;line-height:.22rem}  
  .input-field label{top:50%;margin-top:-.11rem}
  .user-agree {
    width:4.12rem;margin-top:.25rem;margin-bottom:.25rem;position:relative;left:.22rem
  }
  .user-agree li{height:.19rem}
  .user-agree li + li{margin-top:.04rem}
  .user-agree li:first-child + li{margin-top:.08rem}
  .user-agree li label{font-size:.13rem;line-height:.17rem;}
  .user-agree li:first-child label{font-size:.14rem;line-height:.19rem}
  .user-agree li .icon{width:.17rem;height:.17rem;margin-right:.07rem;margin-left:.01rem;vertical-align:middle}
  .user-agree input[type="checkbox"].radio+label .icon{width:.19rem;height:.19rem;margin-left:0}
  .user-agree .btn-docs{width:.74rem;height:.2rem;border-radius:.1rem}
  .user-agree .btn-docs > span{font-size:.12rem;line-height:.13rem}

  .preregister-fieldset .common-btn{width:3.47rem}
  .preregister-fieldset .common-btn > strong{font-size:.23rem}  
  .preregister-fieldset .common-btn .go{left:75%;width:.08rem;height:.08rem;border-width:.02rem;border-left:0 none;border-bottom:0 none}  
}

@media (max-width: 1200px) {
  .page-cont__period{width:2.1rem}
  #preregister .kv{width:4.44rem;left:-.72rem;top:.75rem;transform:translate3d(-15%, 3%, 0)}
  .preregister-content{width:5.86rem;height:7.6rem;margin-top:.3rem}
  .preregister-rewards{width:3.55rem;top:0;left:1.15rem}
  #preregister .market-buttons{gap:.06rem;position:absolute;left:0;top:100%;margin-top:.15rem}
  #preregister .market-buttons > button{width:1.16rem}

  .preregister-fieldset{width:100%}
  .preregister-fieldset .box-inner{width:100%}
  .preregister-fieldset .title{width:3.85rem;margin-top:.5rem}
  .input-field{width:4rem;border-radius:.08rem;background:#fff;margin-top:.24rem;height:.58rem}
  .input-field > p{width:.72rem;font-size:.18rem;line-height:.22rem}
  .input-field input,
  .input-field label{font-size:.18rem;line-height:.22rem;letter-spacing:-.065em}  
  .input-field label{top:50%;margin-top:-.11rem}
  .user-agree {
    width:4.8rem;margin-top:.24rem;margin-bottom:.24rem
  }
  .user-agree li{height:.21rem}
  .user-agree li + li{margin-top:.05rem}
  .user-agree li:first-child + li{margin-top:.1rem}
  .user-agree li label{font-size:.125rem;line-height:.17rem;letter-spacing:-.065em}
  .user-agree li:first-child label{font-size:.14rem;line-height:.2rem;letter-spacing:-.05em}
  .user-agree li .icon{width:.17rem;height:.17rem;margin-right:.07rem;margin-left:.01rem;vertical-align:middle}
  .user-agree input[type="checkbox"].radio+label .icon{width:.19rem;height:.19rem;margin-left:0}
  .user-agree .btn-docs{width:.9rem;height:.19rem;border-radius:.1rem;}
  .user-agree .btn-docs > span{font-size:.12rem;line-height:.13rem;letter-spacing:-.065em}

  .preregister-fieldset .common-btn{width:2.76rem}
  .preregister-fieldset .common-btn > strong{font-size:.17rem}  
  .preregister-fieldset .common-btn .go{left:75%;width:.06rem;height:.06rem;border-width:.02rem;border-left:0 none;border-bottom:0 none} 
}


/* rewards */
.rewards-list{width:100%;display:flex;position:relative;z-index:2;justify-content:center}
.rewards-list > li{position:relative;flex:1;}
@media (min-width: 1201px) {
  #rewards .page-cont__desc{color:#fff}
  #rewards .kv{width:9.67rem;right:0;top:.2rem;transform:translate3d(15%, 3%, 0)}
  .rewards-list{width:11.24rem;margin-top:.85rem;margin-left:-.42rem;gap:.14rem}
  .rewards-list > li{width:2.12rem}
}

@media (max-width: 1200px) {
  #rewards .page-cont__desc{color:#5b3918}
  #rewards .kv{width:5.48rem;right:-1.04rem;top:.7rem;transform:translate3d(15%, 3%, 0)}
  #rewards .page-cont__title{width:3.61rem}
  .rewards-list{width:6.4rem;margin:0 auto;margin-top:.4rem;gap:.14rem;flex-wrap:wrap}
  .rewards-list > li{width:1.98rem;flex:none;margin-bottom:.16rem}
}


/* event */
#event .page-cont__desc{color:#5b3918}
.event-content{position:relative;z-index:2}
.event-howto{position:absolute;left:0;top:0}
.event-gift{position:absolute;right:0;bottom:0}
.event-buttons{position:absolute;width:100%;display:flex;align-items:center;justify-content:center}
.event-buttons > button{flex:none;display:block;position:relative}
.event-buttons > button strong{position:absolute;line-height:1.2;left:0;top:50%;width:100%;transform:translate3d(0,-55%, 0);text-align:center;color:#fff;font-weight:600;letter-spacing:0}
.event-howto .notice{display:none;position:absolute;width:100%;left:0;text-align:center;color:rgba(0, 0, 0, 0.5);font-weight:500;letter-spacing:-.03em;line-height:1.25}
.event-howto .notice.visible{display:block}

@media (min-width: 1201px) {
  #event .kv{width:9.15rem;left:0;top:.15rem;transform:translate3d(-15%, 3%, 0)}
  .event-content{height:5.96rem;margin-top:.55rem;}
  .event-howto{width:8.07rem}
  .event-gift{width:8.06rem}
  .event-howto .notice{font-size:.16rem;bottom:.3rem}
  .event-buttons{bottom:.6rem;gap:.16rem}
  .event-buttons > button{width:1.88rem}
  .event-buttons > button strong{font-size:.14rem}
}

@media (max-width: 1200px) {
  #event .kv{width:4.98rem;left:-1.36rem;top:-.22rem;transform:translate3d(-15%, 3%, 0)}
  #event .page-cont__title{width:2.62rem}
  .event-content{height:5.56rem;margin:0 auto;margin-top:.25rem;width:6.72rem;}
  .event-howto{width:6.47rem}
  .event-gift{width:6.47rem}
  .event-howto .notice{font-size:.17rem;bottom:.2rem}
  .event-buttons{bottom:.5rem;gap:.16rem}
  .event-buttons > button{width:1.88rem}
  .event-buttons > button strong{font-size:.14rem}
}


/* classes */

.classes-viewer .swiper-slide,
.classes-viewer{display:flex;width:100%;height:auto;align-items:center;position:relative;}
.classes-viewer .visual-box,
.classes-viewer .text-box{flex:1;position:relative}
.classes-viewer .swiper-slide > .text,
.classes-viewer .swiper-slide > .visual{flex:1;position:relative;box-sizing:border-box}
.classes-viewer .swiper-slide > .text{display:flex;flex-direction:column;align-items:start;justify-content:flex-end}
.classes-viewer .text-box > .boximg{position:absolute;width:110.6%;left:-10.6%}
.classes-viewer .swiper-container{position:absolute;width:100%;bottom:0;left:0}
.classes-play-btn{position:relative;display:block;z-index:1;visibility:hidden}
.classes-play-btn .thumbnail{position:absolute;left:0;top:0;width:100%;height:100%;overflow:clip;z-index:-1;}

.classes-viewer .eng{position:absolute;}
.classes-viewer .eng > span{position:absolute;left:0;top:0;width:100%;opacity:0;transform:translate3d(-15%, 0, 0)}
.classes-viewer .eng[data-no="1"] > .c-01,
.classes-viewer .eng[data-no="2"] > .c-02,
.classes-viewer .eng[data-no="3"] > .c-03,
.classes-viewer .eng[data-no="4"] > .c-04{opacity:1;transform:translate3d(0, 0, 0);transition:opacity .5s ease-out, transform .5s ease-out}
.classes-viewer .desc{color:#6f6f6f}
.classes-viewer .desc strong{color:#363636}

.classes-viewer .back-img,
.classes-viewer .front-img{position:absolute;bottom:0;left:50%;opacity:0}
.classes-viewer .back-img{transform:translate3d(-60%, 2%, 0)}
.classes-viewer .front-img{transform:translate3d(-40%, 2%, 0)}

.classes-viewer .swiper-slide{align-items:stretch}
.classes-viewer .swiper-slide.swiper-slide-active .back-img,
.classes-viewer .swiper-slide.swiper-slide-active .front-img{opacity:1;transform:translate3d(-50%, 0, 0);transition:opacity .5s ease-out, transform .5s var(--ease)}

.classes-viewer .swiper-slide.swiper-slide-active .back-img{transition-duration:.6s}
.classes-viewer .swiper-slide > .visual{-webkit-mask-image:url(../img/classes-visual-mask.png);mask-image:url(../img/classes-visual-mask.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.classes-viewer .title{position:relative}
.classes-viewer .title::before{content:"";display:block;position:absolute;left:100%;width:170%;top:50%;background:url(../img/classes-name-line.png) no-repeat left center / contain}


#classes_pager{position:relative;background:url(../img/classes-category-line-edge.png) no-repeat left center / auto 6px;display:flex;justify-content:center;align-items:center;}
#classes_pager::before,
#classes_pager::after{
  content:"";
  display:block;
  position:absolute;
  top:50%;
}
#classes_pager::before{left:28px;right:28px;height:2px;background:#aaa395;transform:translateY(-50%)}
#classes_pager::after{right:0;width:28px;height:6px;background:url(../img/classes-category-line-edge.png) no-repeat left center / auto 6px;transform:translateY(-50%) rotateX(180deg)}

#classes_pager .swiper-pagination-bullet{display:block;position:relative;flex:none;opacity:1;background:none;border-radius:0}

#classes_pager .swiper-pagination-bullet::before,
#classes_pager .swiper-pagination-bullet::after{
  content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:url(../img/classes-category-btn.png) no-repeat center / 100% auto;opacity:0;z-index:0
}

#classes_pager .swiper-pagination-bullet::before{background-position:center top;opacity:1}
#classes_pager .swiper-pagination-bullet::after{background-position:center bottom;opacity:0}
#classes_pager .swiper-pagination-bullet > img{position:absolute;left:50%;top:50%;z-index:2;transform:translate3d(-50%, -50%, 0)}
#classes_pager .swiper-pagination-bullet.swiper-pagination-bullet-active::before{opacity:0}
#classes_pager .swiper-pagination-bullet.swiper-pagination-bullet-active::after{opacity:1}  

.caligraphy-line{position:absolute;pointer-events:none;z-index:30}

@media (min-width: 1201px) {
  .page-cont > .classes-viewer{margin-top:-.32rem;align-items:start;flex-direction:row-reverse}
  .page-cont > .classes-viewer .text-box > .boximg{top:.32rem}
  
  .classes-viewer .swiper-container{height:7.6rem}

  .classes-play-btn .thumbnail > img{transition:transform .5s ease-out}
  .classes-play-btn:hover .thumbnail > img{transform:scale(1.1)}
  
  .classes-viewer .eng{left:-.5rem;top:.82rem;width:3.61rem}
  .classes-viewer .text{padding-bottom:1.02rem;padding-bottom:1.12rem}
  .classes-viewer .title{padding-left:.7rem;width:1.44rem}
  .classes-play-btn{left:.7rem;width:2.05rem}
  .classes-viewer .desc{padding-left:.7rem;padding-top:1.25em;font-size:.18rem;line-height:.2rem;height:1.54rem}
  .classes-viewer .title::before{height:.06rem;margin-left:.16rem;margin-top:-.03rem}
  .classes-viewer .back-img,
  .classes-viewer .front-img{width:6.8rem}
  #classes_pager{top:-.12rem;height:1.06rem;gap:.64rem}
  #classes_pager .swiper-pagination-bullet{width:1.19rem;height:1.06rem}
  
  #classes_pager .swiper-pagination-bullet:hover::before{opacity:0}
  #classes_pager .swiper-pagination-bullet:hover::after{opacity:1}  
  #classes_pager .swiper-pagination-bullet > img{width:.24rem}

  .caligraphy-line{width:7.8rem;left:-1.64rem;top:2.9rem}
}

@media (max-width: 1200px) {
  .classes-viewer{width:6.66rem;margin:0 auto}
  .page-cont > .classes-viewer{margin-top:-.18rem;align-items:start;flex-direction:row-reverse}
  .page-cont > .classes-viewer .text-box > .boximg{top:.2rem}
  
  .classes-viewer .swiper-container{height:4.86rem}
  .classes-play-btn .thumbnail > img{transition:transform .5s ease-out}
  .classes-play-btn:hover .thumbnail > img{transform:scale(1.1)}
  
  .classes-viewer .eng{left:-.32rem;top:.53rem;width:2.32rem}
  .classes-viewer .text{padding-bottom:.56rem;padding-bottom:.5rem}
  .classes-viewer .title{padding-left:.2rem;width:1.08rem}
  .classes-play-btn{left:.2rem;width:1.3rem}
  .classes-viewer .desc{padding-left:.2rem;padding-top:1em;font-size:.13rem;line-height:.15rem;height:1.1rem;letter-spacing:-.05em}
  .classes-viewer .title::before{height:.04rem;margin-left:.12rem;margin-top:-.02rem}
  .classes-viewer .back-img,
  .classes-viewer .front-img{width:4.35rem}
  #classes_pager{width:6.8rem;margin:0 auto;top:.08rem;height:1.06rem;gap:.52rem}
  #classes_pager .swiper-pagination-bullet{width:1.19rem;height:1.06rem}
  
  #classes_pager .swiper-pagination-bullet:hover::before{opacity:0}
  #classes_pager .swiper-pagination-bullet:hover::after{opacity:1}  
  #classes_pager .swiper-pagination-bullet > img{width:.24rem}

  .caligraphy-line{width:5rem;left:-.86rem;top:1.87rem}
}


/* features */

#features .page-cont__desc{position:relative;z-index:2}
#features .page-cont__desc::before{content:"";position:absolute;display:block;height:130%;left:50%;top:-15%;transform:translateX(-50%);border-radius:100%;filter:blur(.3rem);background:#fff;z-index:-1;opacity:0.55}
#features .page-cont__desc.f-01{color:#5b3918}
#features .page-cont__desc.f-02{color:#42403a}
#features .page-cont__desc.f-03{color:#6f6f6f}
#features .page-bg > div{pointer-events:none;position:absolute;left:0;width:100%;background-repeat:no-repeat;background-position:center;background-size:cover;opacity:0;z-index:1}
#features .page-bg > div .kv{transform:translate3d(15%,3%,0);will-change:opacity,transform}
#features .page-bg .feature-02 .kv.lft{transform:translate3d(-15%,3%,0)}
#features .page-bg .feature-03 .kv.lft{transform:translate3d(0,7%,0)}
#wrapper.init #features .page-bg > div:not(.is-current) .kv{opacity:0}
#features.active .page-bg > div.is-current{animation:feature-bg-enter .5s var(--ease) forwards}
#wrapper.init #features.active .page-bg > div.is-current .kv{animation:feature-kv-enter 1s var(--ease) forwards}
#wrapper.init #features.active .page-bg .feature-02.is-current .kv.lft{animation-name:feature-kv-enter-left}
#wrapper.init #features.active .page-bg .feature-03.is-current .kv{animation-name:feature-kv-enter-bottom}
.page-bg .feature-01{background-image:url(../img/features-01-bg.png)}
.page-bg .feature-02{background-image:url(../img/features-02-bg.png)}
.page-bg .feature-03{background-image:url(../img/features-03-bg.png)}
#features .page-bg > div.is-current{opacity:1}

#features .page-cont__caligraphy{display:block;margin:0 auto}
#features .page-cont__content{display:block;margin:0 auto}

#features .swiper-buttons{position:absolute;left:0;width:100%;display:flex;align-items:center;justify-content:center}
#features .swiper-buttons .swiper-btn,
#features .swiper-buttons .swiper-pagination{position:relative;left:auto;top:auto;right:auto;bottom:auto;flex:none;transform:none}
#features .swiper-pagination .swiper-pagination-bullet{position:relative;opacity:1;background:#fff}
#features .swiper-pagination .swiper-pagination-bullet::before{content:"";display:block;position:absolute;border-color:#3e3523;border-style:solid;box-sizing:border-box;border-radius:100%;opacity:0;left:50%;top:50%;transform:translate(-50%,-50%)}
#features .swiper-pagination .swiper-pagination-bullet-active::before{opacity:1}

@keyframes feature-bg-enter {
  from{opacity:0}
  to{opacity:1}
}
@keyframes feature-kv-enter {
  from{opacity:0;transform:translate3d(15%,3%,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes feature-kv-enter-left {
  from{opacity:0;transform:translate3d(-15%,3%,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes feature-kv-enter-bottom {
  from{opacity:0;transform:translate3d(0,7%,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@media (min-width: 1201px) {
  #features .page-bg > div{height:19.88rem;top:-2.52rem}
  #features .page-cont__caligraphy{width:5.72rem;margin-top:-.12rem;margin-bottom:-.44rem}
  #features .page-cont__content{width:100%;margin-top:.54rem;display:flex;flex-wrap:wrap;gap:.18rem}
  #features .page-cont__content > li{flex:1 1 calc(50% - .09rem);box-sizing:border-box}
  #features > .swiper-btn{position:absolute;top:5.25rem;z-index:3;width:1.07rem;transform:translateY(-50%)}
  #features > .swiper-btn.prev{left:.24rem;right:auto}
  #features > .swiper-btn.next{left:auto;right:.24rem}
  .page-bg .feature-01 .kv,
  .page-bg .feature-02 .kv.rgt,
  .page-bg .feature-03 .kv{right:0}
  .page-bg .feature-02 .kv.lft{left:0}
  .page-bg .feature-01 .kv{width:12.7rem;top:2.52rem}
  .page-bg .feature-02 .kv.lft{width:8.96rem;top:2.62rem}
  .page-bg .feature-02 .kv.rgt{width:7.78rem;top:3.48rem}
  .page-bg .feature-03 .kv{width:8.69rem;top:3.52rem;right:-.65rem}  
  #features .page-cont__desc.f-02::before,
  #features .page-cont__desc.f-03::before{width:35%}
  #features .swiper-buttons{top:9.44rem}
  #features .swiper-pagination{width:1.76rem}
  #features .swiper-pagination .swiper-pagination-bullet{width:.2rem;height:.2rem;margin:0 .13rem}  
  #features .swiper-pagination .swiper-pagination-bullet::before{border-width:.06rem;width:.24rem;height:.24rem;}
}

@media (max-width: 1200px) {
  #features .page-bg > div{height:15.74rem;top:-3.74rem}
  #features .page-cont__caligraphy{width:4.56rem;margin-top:-.08rem;margin-bottom:-.36rem}
  #features .page-cont__content{width:6.16rem;margin-top:.4rem;display:flex;flex-direction:column;gap:.12rem}
  #features .page-cont__content > li{flex:none;width:3.96rem;box-sizing:border-box}
  #features > .swiper-btn{position:absolute;top:5.25rem;z-index:3;width:1.07rem;transform:translateY(-50%)}
  #features > .swiper-btn.prev{left:.24rem;right:auto}
  #features > .swiper-btn.next{left:auto;right:.24rem}
  .page-bg .feature-01 .kv{width:7.68rem;top:6.56rem;left:.28rem}
  .page-bg .feature-02 .kv.lft{width:5.42rem;top:6.99rem;left:-.96rem}
  .page-bg .feature-02 .kv.rgt{width:4.47rem;top:7.39rem;right:-.82rem}
  .page-bg .feature-03 .kv{width:5.17rem;top:9.3rem;left:1.14rem}  
  #features .page-cont__desc.f-02::before,
  #features .page-cont__desc.f-03::before{width:40%;opacity:.7}
  #features .swiper-buttons{top:10.14rem}
  #features .swiper-buttons .swiper-btn{width:.94rem}
  #features .swiper-pagination{width:1.76rem}
  #features .swiper-pagination .swiper-pagination-bullet{width:.2rem;height:.2rem;margin:0 .13rem}  
  #features .swiper-pagination .swiper-pagination-bullet::before{border-width:.06rem;width:.24rem;height:.24rem;}
}


/* media */
.swiper-btn.prev{position:absolute;right:100%;top:50%;transform:translateY(-50%)}
.swiper-btn.next{position:absolute;left:100%;top:50%;transform:translateY(-50%)}
.media-tab-content{display:none}
.media-tab-content.active{display:block}

.media-tab-buttons{display:flex;width:100%;align-items:center;justify-content:center}
.media-tab-btn{flex:none;position:relative;background:url(../img/media-category.png) no-repeat center top / 100% auto}
.media-tab-btn.active{background-position-y:bottom}
.media-tab-btn strong{position:absolute;left:50%;top:50%;transform:translate(-50%,-57%);white-space:nowrap;color:#aaa395}
.media-tab-btn.active strong{color:#fff}

.media-tab-contents{width:100%;height:auto}
.media-tab-content{margin:0 auto;position:relative;display:none;z-index:2}
.media-tab-content.active{display:block}
.media-tab-content iframe{width:100%;height:100%}
.media-tab-content .swiper-container{width:100%;height:100%}
.media-tab-content .viewer{width:100%;aspect-ratio:1046 / 592;position:relative;}
.media-tab-content .viewer > img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
@media (min-width: 1201px) {
  #media .kv{width:14.46rem;right:0;top:1.04rem;transform:translate3d(15%, 3%, 0)}
  
  .media-tab-buttons{margin-top:.2rem;gap:.06rem}
  .media-tab-btn{width:2.02rem;height:.54rem}
  .media-tab-btn strong{font-size:.2rem;line-height:1.2;letter-spacing:-.02em;font-weight:500}
  .media-tab-btn:hover{background-position-y:bottom}
  .media-tab-btn:hover strong{color:#fff}
  
  .media-tab-content{width:9.8rem;margin-top:.2rem}
  .media-tab-content .swiper-btn{top:3.4rem;width:.56rem;transform:translateY(-50%)}
  .media-tab-content .media-name{height:.36rem;margin-bottom:.15rem;text-align:center;}
  .media-tab-content .media-name strong{color:#fff;display:inline-block;position:relative;font-size:.28rem;font-weight:600;line-height:.32rem}
  .media-tab-content .media-name strong::before,
  .media-tab-content .media-name strong::after{content:"";position:absolute;top:50%;width:.69rem;height:.18rem;transform:translateY(-50%);background:url(../img/media-name-deco.png) no-repeat center / contain}
  .media-tab-content .media-name strong::before{right:calc(100% + .16rem)}
  .media-tab-content .media-name strong::after{left:calc(100% + .16rem);transform:translateY(-50%) scaleX(-1)}
  .media-tab-content[data-tab="screenshot"] .media-name{opacity:0}
  #video_swiper,
  #screenshot_swiper{position:relative;z-index:1;overflow:hidden}
  .video-frame,
  .screenshot-frame{position:absolute;top:.51rem;left:0;z-index:2;width:100%;aspect-ratio:1046 / 592;pointer-events:none;background:url(../img/media-frame.png) no-repeat center / 100% 100%}
  #video_player{position:absolute;top:.51rem;left:0;width:100%;height:auto;aspect-ratio:1046 / 592;overflow:hidden;z-index:1}
  
  .swiper-btn.prev{margin-right:.12rem}
  .swiper-btn.next{margin-left:.12rem}
}

@media (max-width: 1200px) {
  #media .kv{width:8.94rem;right:-1.12rem;top:.9rem;transform:translate3d(15%, 3%, 0)}
  
  .media-tab-buttons{margin-top:.3rem;gap:.04rem}
  .media-tab-btn{width:1.61rem;height:.43rem}
  .media-tab-btn strong{font-size:.16rem;line-height:1.2;letter-spacing:-.02em;font-weight:500}
  .media-tab-btn.active,
  .media-tab-btn:hover{background-position-y:-.44rem}
  .media-tab-btn:hover strong{color:#fff}
  
  .media-tab-content{width:6.16rem;margin-top:.48rem}
  .media-tab-content .swiper-btn{top:2.2rem;width:.32rem;transform:translateY(-50%)}
  .media-tab-content .media-name{height:.24rem;margin-bottom:.2rem;text-align:center;}
  .media-tab-content .media-name strong{color:#42403a;display:inline-block;position:relative;font-size:.2rem;font-weight:600;line-height:.24rem}
  .media-tab-content .media-name strong::before,
  .media-tab-content .media-name strong::after{content:"";position:absolute;top:50%;width:.69rem;height:.18rem;transform:translateY(-50%);background:url(../img/media-name-deco-mo.png) no-repeat center / contain}
  .media-tab-content .media-name strong::before{right:calc(100% + .16rem)}
  .media-tab-content .media-name strong::after{left:calc(100% + .16rem);transform:translateY(-50%) scaleX(-1)}
  .media-tab-content[data-tab="screenshot"] .media-name{opacity:0}
  #video_swiper,
  #screenshot_swiper{position:relative;z-index:1}
  .video-frame,
  .screenshot-frame{position:absolute;top:.44rem;left:0;z-index:2;width:100%;aspect-ratio:1046 / 592;pointer-events:none;background:url(../img/media-frame.png) no-repeat center / 100% 100%}
  #video_player{position:absolute;top:.44rem;left:0;width:100%;height:auto;aspect-ratio:1046 / 592;overflow:hidden;z-index:1}
  
  .swiper-btn.prev{margin-right:.06rem}
  .swiper-btn.next{margin-left:.06rem}
}




.modal-container,
.modal-layer {
  pointer-events: none;
  display: none
}

.modal-container.visible,
.modal-layer.visible {
  display: block;
  z-index:10;
  pointer-events: auto;
}
.modal-container{
  position:fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow:auto;
  box-sizing: border-box;
}

.modal-dim {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  background: rgba(0,0,0,.5);
  transition: opacity .25s ease-out
}

.modal-container.visible .modal-dim {
  pointer-events: auto;
  opacity: 1
}

.video-modal-container.visible{z-index:20}
.video-modal-layer{position:absolute;left:50%;top:50%;z-index:10;width:min(12rem, calc(100vw - .4rem));aspect-ratio:1200 / 675.12;transform:translate(-50%,-50%);background:#000}
.video-modal-layer > div{width:100%;height:100%}
.video-modal-layer iframe{display:block;width:100%;height:100%}
.video-modal-close{position:absolute;right:-.64rem;top:-.64rem;width:.64rem;height:.64rem}
.video-modal-close .icon{position:absolute;left:50%;top:50%;width:.24rem;height:.03rem;border-radius:.02rem;background:transparent}
.video-modal-close .icon::before,
.video-modal-close .icon::after{content:"";display:block;position:absolute;left:50%;top:50%;width:.24rem;height:.03rem;border-radius:.02rem;background:#fff}
.video-modal-close .icon::before{transform:translate(-50%,-50%) rotate(45deg)}
.video-modal-close .icon::after{transform:translate(-50%,-50%) rotate(-45deg)}

.doc-modal-layer{position:absolute;left:50%;top:50%;z-index:10;height:auto;transform:translate(-50%,-50%);overflow:hidden;color:#3b3020}
.doc-modal-content{position:absolute;overflow-y:auto;line-height:1.375;color:#575757}
.doc-modal-content > p{font-size:inherit;line-height:inherit;font-weight:600;letter-spacing:-.05em}
.doc-tb{border-left:1px solid #9b856a;border-right:1px solid #9b856a}
.doc-tb .col{display:grid;grid-template-columns:18% 82%;border-top:1px solid #9b856a}
.doc-tb .col:last-child{border-bottom:1px solid #9b856a}
.doc-tb .cell{font-size:inherit;line-height:inherit;display:flex;justify-content:center;flex-direction:column;letter-spacing:-.05em}
.doc-tb .cell.head{background:#d6d1c3}
.doc-tb .cell + .cell{border-left:1px solid #9b856a}
.doc-modal-content .info{color:#7c7c7c}
.doc-modal-content .info > p.flx{display:flex;align-items:start}
.doc-modal-content .info > p > span{flex:none;width:fit-content}
.doc-modal-content .info .cslink{color:#577e6d;text-decoration:underline}
.doc-modal-close{position:absolute;right:0;top:0;z-index:2;aspect-ratio:1;background:transparent}
.doc-modal-close .icon{position:absolute;background:#42403a;top:50%;width:38%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}
.doc-modal-close .icon::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:#42403a;transform:rotate(90deg)}

.doc-modal-content .modal-confirm{position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:2}
.doc-modal-content .modal-confirm.common-btn{background:url(../img/btn-modal-ok.png) no-repeat center/contain}
.doc-modal-content .modal-confirm.common-btn > span{position:absolute;left:0;top:50%;transform:translate3d(0,-55%,0);width:100%;color:#fff;font-weight:900;letter-spacing:0;text-align:center}

.modal-layer {
  z-index: 10;
  position: absolute;
  box-sizing: border-box;
  left:50%;
  top:50%;
  will-change: transform, opacity;
  transform:translate3d(-50%, -50%, 0) scale3d(.85, .85, 1);
  opacity:0
}
.modal-layer.visible{opacity:1;transform:translate3d(-50%, -50%, 0) scale3d(1, 1, 1)}

.modal-content{
  display:block;width:100%;position:absolute;left:0;top:0;height:100%
}
.modal-content::before{content:"";display:block;width:100%;padding-top:53.04%}
.modal-content > p {width:100%}
.modal-buttons{margin:0 auto;width:87.587%;left:7.2065%;display:flex;align-items:stretch;justify-content:center}
.modal-btn{flex:1;display:block;position:relative;height:auto}
.modal-btn > span{color:#fff;font-weight:900;letter-spacing:-.025em;white-space:nowrap;position:absolute;left:0;width:100%;text-align:center;top:50%;}

@media (min-width: 1201px) {
  .doc-modal-layer,
  .modal-layer{
    width: 6.73rem;
  }
  .modal-btn > span{font-size:.19rem;line-height:.24rem;margin-top:-.12rem}
  .doc-modal-content{top:1.5rem;left:.44rem;right:.44rem;bottom:0}
  .doc-modal-close{width:1rem;height:1rem}
  .doc-modal-close .icon{height:.06rem;}
  .doc-modal-content > p{font-size:.2rem}
  .doc-modal-content .doc-tb{margin-top:.18rem;margin-bottom:.18rem}
  .doc-modal-content .doc-tb .cell{font-size:.175rem;line-height:.27rem;padding:.08rem .11rem}
  .doc-modal-content .info p{font-size:.16rem;line-height:.2rem}
  .doc-modal-content .info p + p{margin-top:.8em}
  .doc-modal-content .modal-confirm.common-btn{width:2.88rem;height:.63rem;bottom:.5rem}
  .doc-modal-content .modal-confirm.common-btn > span{font-size:.2rem;line-height:.24rem}
}

@media (max-width: 1080px) {
  .modal-layer{
    width: 100%;
    max-width: 7.2rem;
  }
}

@media (max-width: 1200px) {
  .video-modal-close{right:0;top:-.64rem}
  .doc-modal-layer{width:6.4rem;}
  .modal-btn > span{font-size:.19rem;line-height:.24rem;margin-top:-.12rem}
  .doc-modal-content{top:1.5rem;left:.36rem;right:.36rem;bottom:0}
  .doc-modal-close{width:.9rem;height:.9rem}
  .doc-modal-close .icon{height:.06rem;}
  .doc-modal-content > p{font-size:.14rem;letter-spacing: -.065em}
  .doc-modal-content .doc-tb{margin-top:.14rem;margin-bottom:.14rem}
  .doc-modal-content .doc-tb .cell{font-size:.15rem;line-height:.2rem;padding:.1rem .08rem;letter-spacing: -.065em}
  .doc-modal-content .doc-tb .cell br{display:none}
  .doc-modal-content .info p{font-size:.14rem;line-height:.19rem;letter-spacing: -.065em;}
  .doc-modal-content .info p br{display:inline-block}
  .doc-modal-content .info p + p{margin-top:.7em}
  .doc-modal-content .modal-confirm.common-btn{width:2.88rem;height:.63rem;bottom:.4rem}
  .doc-modal-content .modal-confirm.common-btn > span{font-size:.2rem;line-height:.24rem}
}



@keyframes fade-in-up {
  0% {
    transform: translate3d(0, .25rem, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes zoom-in-up {
  0% {
    transform: scale3d(.85, .85, 1);
    opacity: 0;
  }
  100% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}


.caligraphy .deco-line{width:1px;position:relative;}
.caligraphy .deco-line::before{top:0;height:100%;width:1px;transform:translateX(-50%)}
.caligraphy .d-01 i{left:50%;top:0}
.caligraphy .d-02 i{left:50%;top:100%}
.deco-line{position:relative}
.deco-line > i{position:absolute;transform:translate3d(-50%, -50%, 0) rotate(45deg);border-style:solid;border-color:#aa9b77}
.deco-line > i::before{content:"";position:absolute;top:50%;left:50%;background:#aa9b77;transform:translate3d(-50%, -50%, 0) rotate(-45deg);}
.deco-line::before,
.deco-line::after{content:"";display:block;position:absolute;background:#aa9b77}

.preregister-fieldset .deco-line{position:absolute}
.preregister-fieldset .deco-line::before{width:100%;height:1px;left:0}
.preregister-fieldset .deco-line::after{height:100%;width:1px;top:0}
.preregister-fieldset .deco-line.d-01 i{left:100%;top:0}
.preregister-fieldset .deco-line.d-01::before{top:0}
.preregister-fieldset .deco-line.d-01::after{right:0}
.preregister-fieldset .deco-line.d-02 i{left:0;top:100%}
.preregister-fieldset .deco-line.d-02::before{bottom:0}
.preregister-fieldset .deco-line.d-02::after{left:0}

.event-content .deco-line{position:absolute}
.event-content .deco-line::before{width:100%;height:1px;left:0}
.event-content .deco-line::after{height:100%;width:1px;top:0}
.event-content .deco-line.d-01 i{left:0;top:0}
.event-content .deco-line.d-01::before{top:0}
.event-content .deco-line.d-01::after{left:0}
.event-content .deco-line.d-02 i{left:100%;top:100%}
.event-content .deco-line.d-02::before{bottom:0}
.event-content .deco-line.d-02::after{right:0}

.classes-viewer .deco-line{position:absolute}
.classes-viewer .deco-line::before{top:0;height:100%;width:1px;transform:translateX(-50%)}
.classes-viewer .deco-line.d-01 i{left:0;top:0}
.classes-viewer .deco-line.d-02 i{left:0;top:100%}

#features .deco-line{position:absolute;display:none}
#features[data-slide="0"] .deco-line{display:block}
#features .deco-line::before{top:0;height:100%;width:1px;transform:translateX(-50%)}
#features .deco-line.d-01 i{left:0;top:0}
#features .deco-line.d-02 i{left:0;top:100%}



.media-tab-contents .deco-line{position:absolute}
.media-tab-contents .deco-line::before{width:100%;height:1px;left:0}
.media-tab-contents .deco-line::after{height:100%;width:1px;top:0}
.media-tab-contents .deco-line.d-01 i{left:0;top:0}
.media-tab-contents .deco-line.d-01::before{top:0}
.media-tab-contents .deco-line.d-01::after{left:0}
.media-tab-contents .deco-line.d-02 i{left:0;top:100%}
.media-tab-contents .deco-line.d-02::before{bottom:0}
.media-tab-contents .deco-line.d-02::after{left:0}
.media-tab-contents .deco-line.d-03 i{left:100%;top:0}
.media-tab-contents .deco-line.d-03::before{top:0}
.media-tab-contents .deco-line.d-03::after{right:0}
.media-tab-contents .deco-line.d-04 i{left:100%;top:100%}
.media-tab-contents .deco-line.d-04::before{bottom:0}
.media-tab-contents .deco-line.d-04::after{right:0}

@media (min-width: 1201px) {
  .deco-line > i{width:.11rem;height:.11rem;border-width:.04rem;}
  .deco-line > i::before{width:.03rem;height:.03rem}
  .caligraphy .d-01{top:-.62rem}
  .caligraphy .d-02{top:2.52rem}
  .preregister-fieldset .deco-line{width:.88rem;height:.88rem}
  .preregister-fieldset .deco-line.d-01{top:-.13rem;right:-.13rem}
  .preregister-fieldset .deco-line.d-02{left:-.13rem;bottom:-.13rem}
  .event-content .deco-line{width:.92rem;height:.92rem}
  .event-content .deco-line.d-01{left:-.11rem;top:-.11rem}
  .event-content .deco-line.d-02{right:-.13rem;bottom:-.13rem}
  .classes-viewer .deco-line{right:-.11rem}
  .classes-viewer .deco-line.d-01{height:.36rem;top:.3rem}
  .classes-viewer .deco-line.d-02{height:2.4rem;top:1.8rem}
  #features .deco-line{left:-.13rem;height:2.3rem}
  #features .deco-line.d-01{top:4.85rem}
  #features .deco-line.d-02{top:7.13rem}
  .media-tab-contents .deco-line{width:.92rem;height:.92rem}
  .media-tab-contents .deco-line.d-01{left:-.12rem;top:.36rem}
  .media-tab-contents .deco-line.d-02{left:-.12rem;bottom:-.12rem}
  .media-tab-contents .deco-line.d-03{right:-.12rem;top:.36rem}
  .media-tab-contents .deco-line.d-04{right:-.12rem;bottom:-.12rem}
}

@media (max-width: 1200px) {
  .deco-line > i{width:.08rem;height:.08rem;border-width:.04rem;}
  .deco-line > i::before{width:.02rem;height:.02rem}
  .caligraphy .d-01{top:-.11rem}
  .caligraphy .d-02{top:2.14rem}
  .preregister-fieldset .deco-line{width:.72rem;height:.72rem}
  .preregister-fieldset .deco-line.d-01{top:-.1rem;right:-.1rem}
  .preregister-fieldset .deco-line.d-02{left:-.1rem;bottom:-.1rem}
  .event-content .deco-line{display:none}
  .classes-viewer .deco-line{right:-.06rem}
  .classes-viewer .deco-line.d-01{height:.22rem;top:.25rem}
  .classes-viewer .deco-line.d-02{height:1.8rem;top:.92rem}
  #features .deco-line{left:.4rem;height:3.6rem}
  #features .deco-line.d-01{top:2.95rem}
  #features .deco-line.d-02{top:6.45rem}
  .media-tab-contents .deco-line{width:.56rem;height:.56rem}
  .media-tab-contents .deco-line.d-01{left:-.08rem;top:.36rem}
  .media-tab-contents .deco-line.d-02{left:-.08rem;bottom:-.08rem}
  .media-tab-contents .deco-line.d-03{right:-.08rem;top:.36rem}
  .media-tab-contents .deco-line.d-04{right:-.08rem;bottom:-.08rem}
}



/*
@media (prefers-color-scheme: dark){
  #wrapper.samsung-stock .page-cont__desc{color:#f00 !important}
}
  #wrapper.samsung-stock .page-cont__desc{color:#ff0 !important}
*/