@charset "UTF-8";

@font-face {
  font-family: 'VITRO';
  src: url('/_user/font/Vitro-insprire.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

html, body {height: 100%;}
html.hover * {cursor: none;}
body:hover .cursor {opacity: 1;}
.wrap {overflow: hidden; height: 100%; position: relative; background-color: #222;}
.cursor {opacity: 0; transition: opacity 0.3s; pointer-events: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 100; color: #fff;}
.cursor-inner {position: absolute;}
.cursor-pointer {width: 200px; height: 200px; transform: translate(-50%,-50%); transition: all 0.2s;}
.cursor .arrow {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #ff5722; width: 20px; height: 20px; border-radius: 50%;}
.cursor .arrow:before {display: none; content: ''; position: absolute; right: 0; top: 50%; margin-top: -23px; transform: rotate(45deg); width: 30px; height: 30px; border-right: 15px solid #fff; border-top: 15px solid #fff;}

.cursor-pointer span {display: inline-block; font-size: 22px; height: 195px; position: absolute; width: 20px; left: 50%; top: 3px; margin-left: -7px; text-align: center;}
.rolling-txt {position: relative; opacity: 0; transition: all 0.2s; width: 200px; height: 200px; animation: rollingAni linear infinite 20s;}

@keyframes rollingAni {
  0%  {transform: rotate(0deg); transform-origin: center center;}
  100% {transform: rotate(360deg);}
}

.intro-wrap {background: url('/_user/img/intro/bg-intro01.jpg') 50% no-repeat; background-size: cover; font-size: 14px; color: #fff; font-family: 'NotoSans', sans-serif; display: flex; flex-direction: column; justify-content: space-between; position: relative; height: 100%; overflow-y: auto; transition: background 0.3s;}
.intro-wrap>* {position: relative;}
.intro-wrap:before {content: ''; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.3);}
.intro-wrap>.top, .intro-wrap>.bottom {max-width: 1800px; margin: 0 auto; width: 100%; padding: 35px 20px; box-sizing: border-box;}
.contents .out-link {display: inline-block;}
.contents .txt-box>li {padding: 10px; display: flex; justify-content: center;}
.contents .cube-split {display: flex; position: relative; font-family: 'VITRO', sans-serif;}
.cube-split .cube {font-size: 45px; height: 46px; width: 32px; color: #fff; box-sizing: border-box; position: relative; transform-style: preserve-3d; transform: rotateY(0deg); transition: transform 0.3s;}
.cube-split .cube.wid-type1 {width: 6px;}
.cube-split .cube.wid-type2 {width: 12px;}
.cube-split .cube.wid-type3 {width: 22px;}
.cube-split .cube span {position: absolute; height: 46px; line-height: 50px;}
.cube-split .cube .front {transform: translateZ(20px); color: transparent; -webkit-text-stroke: 1px #fff; -moz-text-stroke: 1px #fff; -ms-text-stroke: 1px #fff; -o-text-stroke: 1px #fff;}
.cube-split .cube .bottom {transform: rotateX(-90deg) translateZ(20px);}
.out-link:hover .cube {transform: rotateX(90deg);}
.cube-split .cube:nth-child(2) {transition-delay: 0.025s;}
.cube-split .cube:nth-child(3) {transition-delay: 0.05s;}
.cube-split .cube:nth-child(4) {transition-delay: 0.075s;}
.cube-split .cube:nth-child(5) {transition-delay: 0.1s;}
.cube-split .cube:nth-child(6) {transition-delay: 0.125s;}
.cube-split .cube:nth-child(7) {transition-delay: 0.15s;}
.cube-split .cube:nth-child(8) {transition-delay: 0.175s;}
.cube-split .cube:nth-child(9) {transition-delay: 0.2s;}
.cube-split .cube:nth-child(10) {transition-delay: 0.225s;}

.intro-wrap>.bottom {font-size: 12px;}
.intro-wrap .sns {display: flex; padding-top: 20px;}
.intro-wrap .sns>li {margin-right: 10px;}

@media screen and (min-width: 768px){
  .cursor.on {mix-blend-mode: difference;}
  .cursor.on .arrow {left: 69px; top: 91px; width: 70px; height: 15px; background: #fff; transform: translate(0,0); border-radius: 0;}
  .cursor.on .arrow:before {display: block;}
  .cursor.on .rolling-txt {opacity: 1;}
  .cursor.on .arrow {display: inline-block;}

  .cube-split .cube {font-size: 95px; height: 92px; width: 66px;}
  .cube-split .cube.wid-type1 {width: 12px;}
  .cube-split .cube.wid-type2 {width: 21px;}
  .cube-split .cube.wid-type3 {width: 47px;}
  .cube-split .cube span {height: 92px; line-height: 99px;}
  .cube-split .cube .front {transform: translateZ(45px);}
  .cube-split .cube .bottom {transform: rotateX(-90deg) translateZ(45px);}
  .contents .txt-box>li {padding: 15px;}

  .intro-wrap>.bottom {font-size: 14px; display: flex; justify-content: space-between; align-items: center;}
}
@media screen and (min-width: 1024px){
  .cube-split .cube {font-size: 114px; height: 110px; width: 76px;}
  .cube-split .cube.wid-type1 {width: 15px;}
  .cube-split .cube.wid-type2 {width: 28px;}
  .cube-split .cube.wid-type3 {width: 56px;}
  .cube-split .cube span {height: 110px; line-height: 118px;}
  .cube-split .cube .front {transform: translateZ(50px);}
  .cube-split .cube .bottom {transform: rotateX(-90deg) translateZ(50px);}
  .contents .txt-box>li {padding: 20px;}
}


/*popup 팝업존 추가*/
.dimm {position: fixed; left: 0; top: 0; bottom: 0; opacity: 0; width: 100%; height: 0; background: rgba(0,0,0,.7); transition: all 0.3s;}
.dimm.on {opacity: 1 !important;height: auto; z-index: 20;}
.popup-zone-wrap {max-width: calc(100% - 40px); position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 50; min-width: 320px;}
.popup-zone-wrap > p {font-size: 25px;font-weight: bold;color: #fff;margin-bottom: 10px;}
.popup-slider {padding-top: 60px;margin-top: -60px;}
.popup-slider .swiper-slide {height: 400px !important; width: 340px !important;}
.popup-slider .swiper-slide>a {display: block; height: 100%; max-width: 350px !important; margin: 0 auto;}
.popup-slider .swiper-slide>a>img {width: 100%; height: 100%; object-fit: contain; background: #fff;}
.popup-slider .swiper-pagination-fraction {text-align: center;top: 9px;line-height: 35px;color:#fff;font-size: 12px;font-weight: bold;left: auto;right: 0;width: 35px;height: 35px;border-radius: 100%;background: #1FA8CD;}
.popup-slider .swiper-pagination-fraction .swiper-pagination-current {color:#fff;}
.popup-slider .swiper-button-next, .popup-slider .swiper-button-prev {top: 33px;width: 30px;height: 35px;background-image: none;background: #fff;}
.popup-slider .swiper-button-next.swiper-button-disabled, .popup-slider .swiper-button-prev.swiper-button-disabled {opacity: 1;}
.popup-slider .swiper-button-prev {left: auto;right: 77px;border-top-left-radius: 45px;border-bottom-left-radius: 45px;}
.popup-slider .swiper-button-prev:after {position: absolute;content: '';display: block;left: 13px;top: 14px;width: 6px;height: 6px;border-bottom: 2px solid #1FA8CD;border-left: 2px solid #1FA8CD;transform: rotate(45deg);}
.popup-slider .swiper-button-next {right: 48px;border-top-right-radius: 45px;border-bottom-right-radius: 45px;}
.popup-slider .swiper-button-next:after {left: 9px;top: 14px;width: 6px;height: 6px;position: absolute;content: '';display: block;border-top: 2px solid #1FA8CD;border-right: 2px solid #1FA8CD;transform: rotate(45deg);}
.popup-slider .swiper-button-next:before {position: absolute;content: '';display: block;width: 1px;height: 15px;background: #1FA8CD;left: 0;top: 10px;}
.popup-slider .swiper-button-next.off, .popup-slider .swiper-button-prev.off, .popup-slider .swiper-pagination.off {opacity: 0; width: 1px; height: 1px;}

.popup-btn-wrap {text-align: center; margin-top: 25px;}
.popup-btn-wrap .btn-close {position: relative; display: inline-block; font-weight: bold; color: #fff; background: #000; font-size: 16px; padding: 8px 31px 8px 15px; border-radius: 30px;}
.popup-btn-wrap .btn-close:after {position: absolute; content: ''; right: 23px; top: 13px; transform: rotate(45deg); width: 1px; height: 13px; background: #fff;}
.popup-btn-wrap .btn-close:before {position: absolute; content: ''; right: 17px; top: 19px; transform: rotate(45deg); width: 13px; height: 1px; background: #fff;}
.popup-btn-wrap .btn-close.today-no {margin-right: 10px;}

@media screen and (min-width: 520px) {
  .popup-zone-wrap > p {font-size: 30px;}
  .popup-slider .swiper-button-next, .popup-slider .swiper-button-prev {top: 24px; width: 45px; height: 45px;}
  .popup-slider .swiper-button-prev {right: 109px;}
  .popup-slider .swiper-button-prev:after {left: 20px; top: 17px; width: 10px; height: 10px;}
  .popup-slider .swiper-button-next {right: 65px;}
  .popup-slider .swiper-button-next:before {top: 15px;}
  .popup-slider .swiper-button-next:after {left: 13px; top: 17px; width: 10px; height: 10px;}
  .popup-slider .swiper-pagination-fraction {top: 1px; width: 45px; height: 45px; line-height: 45px; font-size: 13px;}

  .popup-btn-wrap .btn-close {font-size: 16px;}
  .popup-btn-wrap .btn-close:before {top: 17px; right: 14px;}
  .popup-btn-wrap .btn-close:after {top: 11px; right: 20px;}
}

@media screen and (min-width: 768px){
  .popup-zone-wrap {max-width: 725px;}
  .popup-slider .swiper-slide {max-width: 350px !important;}
  /*.popup-slider .swiper-slide>a {max-width: none !important;}*/
}

@media screen and (min-width: 1024px){
  .popup-zone-wrap {max-width: 900px;}
  .popup-zone-wrap > p {font-size: 50px; margin-top: 0;}
  .popup-slider {padding-top: 80px; margin-top: -80px;}
  .popup-slider .swiper-pagination-fraction {top: 0; line-height:67px; font-size: 18px; width: 67px; height: 67px;}
  .popup-slider .swiper-button-next, .popup-slider .swiper-button-prev {top: 24px; width: 67px; height: 67px;}
  .popup-slider .swiper-button-prev {right: 151px;}
  .popup-slider .swiper-button-prev:after {left: 28px; top: 26px; width: 12px; height: 12px;}
  .popup-slider .swiper-button-next {right: 85px;}
  .popup-slider .swiper-button-next:after {left: 23px; top: 26px; width: 12px; height: 12px;}
  .popup-slider .swiper-button-next:before {top: 24px;}
  .popup-slider .control-slide {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-indent: -9999px;border: none;background: none;}
  .popup-slider .control-slide:before {content: '';position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 7px;height: 7px;background: #555;}
  .popup-slider .control-slide.on {right: 20px;}
  .popup-slider .control-slide.on:before {background: none; border-left: 6px solid #555; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: none; width: 0; height: 0;}

  .popup-btn-wrap {margin-top: 48px;}
  .popup-btn-wrap .btn-close {background: #000; font-size: 16px; font-weight: bold;}
  .popup-btn-wrap .btn-close:after {right: 23px; top: 13px;}
  .popup-btn-wrap .btn-close:before {right: 17px; top: 19px;}
}
@media screen and (min-width: 1200px) {
  .popup-zone-wrap {max-width: 1100px;}

  /*.popup-slider .swiper-slide {padding-left: 25px;}*/
  .popup-slider .swiper-slide:first-child {padding-left: 0;}
}