@charset "UTF-8";

.spot_main .scrolldown2{ position:absolute; left:50%; bottom:32px; z-index: 10; margin-left: -32.5px; }
.wrap-spot-main .item .h1{ font-size: 50px; line-height: 1.2;  font-family: 'ONE-Mobile-Title'; }
.wrap-spot-main .item .t1{font-size: 18px;line-height: 1.8;margin-top: 39px;}


.wrap-spot-main{ background-color: #000; position: relative; }
.wrap-spot-main > .swiper-wrapper-main{ position: relative; width: 100%; height: 100vh; z-index: 1; overflow: hidden; }

.wrap-spot-main .item{
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-clip: content-box;
    position: absolute;
    right: 100%;
    width: 100%;
    border-right: 412px solid transparent;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
}
.wrap-spot-main .item .bg-cover{ opacity: 1;
    -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
 }
.wrap-spot-main .item.big .bg-cover,
.wrap-spot-main .item.small2big .bg-cover{ 
    opacity: 0.3; 
}

.wrap-spot-main .item .vam{z-index: 5;color: #fff;box-sizing: border-box;right: -140px;top: 140px;position: relative;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.wrap-spot-main .item .bef{display: block;top: 435px;width: 290px;right: auto;left: 100px;}
.wrap-spot-main .item .bef .h1{font-size: 34px;font-weight:600;line-height: 1;}
.wrap-spot-main .item.bigleftout .vam{ opacity: 0; }
.wrap-spot-main .item .aft .logo,
.wrap-spot-main .item .aft .h1,
.wrap-spot-main .item .aft .t1{
  transition-delay: 0.3s;
  opacity: 0;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  -moz-transform: translateX(0) translateY(30px);
  -webkit-transform: translateX(0) translateY(30px);
  -o-transform: translateX(0) translateY(30px);
  -ms-transform: translateX(0) translateY(30px);
  transform: translateX(0) translateY(30px);
}
.wrap-spot-main .item .aft .logo{margin-bottom: 10px;}
.wrap-spot-main .item .aft .t1{
  transition-delay: 0.4s;
  -moz-transform: translateX(0) translateY(30px);
  -webkit-transform: translateX(0) translateY(30px);
  -o-transform: translateX(0) translateY(30px);
  -ms-transform: translateX(0) translateY(30px);
  transform: translateX(0) translateY(30px);
}

.wrap-spot-main .item .bef{ 
    opacity: 0; 
    -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  -moz-transform: translateX(30px) translateY(0);
  -webkit-transform: translateX(30px) translateY(0);
  -o-transform: translateX(30px) translateY(0);
  -ms-transform: translateX(30px) translateY(0);
  transform: translateX(30px) translateY(0);
}

.wrap-spot-main .item .bef{
  -moz-transform: translateX(30px) translateY(0);
  -webkit-transform: translateX(30px) translateY(0);
  -o-transform: translateX(30px) translateY(0);
  -ms-transform: translateX(30px) translateY(0);
  transform: translateX(30px) translateY(0);
}
.wrap-spot-main .item.small .bef{ 
  opacity: 1; 
  -moz-transform: translateX(0px) translateY(0);
  -webkit-transform: translateX(0px) translateY(0);
  -o-transform: translateX(0px) translateY(0);
  -ms-transform: translateX(0px) translateY(0);
  transform: translateX(0px) translateY(0);
}

.wrap-spot-main .item.big .aft .logo,
.wrap-spot-main .item.big .aft .h1,
.wrap-spot-main .item.big .aft .t1{
 opacity: 1; 
  -moz-transform: translateX(0px) translateY(0);
  -webkit-transform: translateX(0px) translateY(0);
  -o-transform: translateX(0px) translateY(0);
  -ms-transform: translateX(0px) translateY(0);
  transform: translateX(0px) translateY(0); 
}

.wrap-spot-main .item .bg-pos{ background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; background-clip:content-box;  }
.wrap-spot-main .item.big{
        right: 0;
        width: 100%;
        z-index: 3;
        background-position: 50% 50%;
 }

.wrap-spot-main .item.small{ 
   right: 0;
    width: 412px;
    border-right-width: 0;
    background-position: 50% 50%;
 }
.wrap-spot-main .item.bigleftout{ -webkit-animation:.6s ease-in-out .3s both animbigleftout; animation:.6s ease-in-out .3s both animbigleftout;  }

.spot_main .btns{position: absolute;top: calc(50% - 105px);right: 460px;display: flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row;z-index: 5;flex-direction: column;}

.spot_main .btns button{
    height: 64px;
    width: 64px;
    border: 0;
    -webkit-transition:background-color .3s;
    transition:background-color .3s;
    cursor:pointer;
    border-radius: 50%;
    border: 1px rgba(255,255,255,0.4) solid;
    display: flex;
    color:#fff;
    align-items: center;
    justify-content: center;
    font-family: 'icomoon';
    src:  url('icomoon/icomoon.eot?1ki0q8');
    src:  url('icomoon/icomoon.eot?1ki0q8#iefix') format('embedded-opentype'),
      url('icomoon/icomoon.ttf?1ki0q8') format('truetype'),
      url('icomoon/icomoon.woff?1ki0q8') format('woff'),
      url('icomoon/icomoon.svg?1ki0q8#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-size:24px;
    } 
.spot_main .btns button.prev{background: transparent;margin-bottom: 19px;}
.spot_main .btns button.prev:after{content: "\ea0a";}
.spot_main .btns button.next{background: transparent;}
.spot_main .btns button.next:after{content: "\ea0b";}
.spot_main .btns button:hover{background-color: rgba(255,255,255,0.2);}

#main_section_visual .btns{ right: 40px;}

.wrap-spot-main .item.big, .wrap-spot-main .item.big2small, .wrap-spot-main .item.bigleftout, .wrap-spot-main .item.fromleft, .wrap-spot-main .item.small2big{
  z-index: 3;
}


.wrap-spot-main .item.bigleftout {
    /* Previous big goes out to left */
    animation: 0.6s ease-in-out 0.3s both animbigleftout;
}

.wrap-spot-main .item.small2big {
    /* Previous small goes to big */
    animation: 0.6s ease-in-out 0.3s both animsmalltobig;
}

.wrap-spot-main .item.fromright {
    /* new small appears from right */
    animation: 0.6s ease-in-out 0.3s both animsmallfromright;
}

.wrap-spot-main .item.fromleft {
    /* new big appears from left */
    animation: 0.6s ease-in-out 0.3s both animbigfromleft;
}

.wrap-spot-main .item.big2small {
    /* Previous big goes to small */
    animation: 0.6s ease-in-out 0.3s both animbigtosmall;
}

.wrap-spot-main .item.smallrightout {
    /* new big appears from left */
    animation: 0.6s ease-in-out 0.3s both animsmallrightout;
}






.timer{position: absolute;top: calc(50% + 81px);right: 473px;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index: 100;width: 40px;height: 40px;}
.timer svg{ position: relative; width: 40px; height: 40px; margin: 0; display: block;}
.timer svg circle.prog{ fill: transparent;  stroke: #fff; stroke-width: 2; stroke-dasharray: 82; stroke-dashoffset: 82; stroke-linecap: round; transform-origin: 50% 50%; transform: rotateZ(-90deg);}
.timer svg circle.bg{  fill: transparent; stroke: rgba(255,255,255,0.5); stroke-width: 1;}
.timer button{  position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        border: 0;
        margin: 0;
        width: 40px;
        height: 40px;
        background: transparent; cursor: pointer;}
.timer button:focus{outline: none;}
.timer button:before{
            position: absolute;
            display: block;
            content: '';
            width: 9px;
            height: 12px;
            border-left: 2px solid #fff;
            border-right: 2px solid #fff;
            top: 14px;
            left: 15px;
            transition: border-color 0.3s;
          }
 .timer button:hover:before {
            border-color: #1dbfcd;
        }
    .timer button:after {
            position: absolute;
            display: none;
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 7px 0 7px 10px;
            border-color: transparent transparent transparent #fff;
            top: 13px;
            left: 16px;
            transition: border-left-color 0.3s;
        }
.timer button:hover::after {
            border-color: transparent transparent transparent #00b8ff;
        }

@keyframes circle--animation {
    0% {
        stroke-dashoffset: 82;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.timer.animated svg circle.prog {
    animation: 4s linear infinite both circle--animation;
}
.timer.animated.video svg circle.prog {
    animation: 28s linear infinite both circle--animation;
}

.timer.paused button:before {
    display: none;
}

.timer.paused button:after {
    display: block;
}

.timer.animated.aninone svg circle.prog,
.timer.paused svg circle.prog {
    animation: none;
}


@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .timer.animated svg circle.prog {
        display: none;
    }
}



.header-visual .video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/*.video-container:after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2; content: "";}*/
.header-visual .video-container > video {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  z-index: 1;
}

.video-container > video.mo{ display: none; }
@media screen and (max-width: 840px){
    .video-container > video.mo{ display: initial; }
    .video-container > video.pc{ display: none; }
}
.video-container.hf > video {
    height: 100%;
}
.video-container.wf > video {
    width: 100%;
}
.spot_main .scrolldown{position:absolute;left:30px;bottom: 0;z-index:3;width:100px;height:0;color:#9a9a9a;height: 180px; opacity: 0.7;}
.spot_main .scrolldown .wrap{display: inline-flex;flex-direction: column;align-items: center; position:relative;}
.spot_main .scrolldown .t{
                               position:absolute;
                               left: -5px;
                               top: 63px;
                               width: 0;
                               -moz-transform: rotate(-90deg);
                               -webkit-transform: rotate(-90deg);
                               -o-transform: rotate(-90deg);
                               -ms-transform: rotate(-90deg);
                               transform: rotate(-90deg);
                               }
.spot_main .scrolldown .t span{ font-size:13px; display: block; width: 100px; }                           
.spot_main .scrolldown .line{
    width:2px;height: 120px;background:#9a9a9a;display:block;
    -webkit-animation: scrollMotion 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse both;
            animation: scrollMotion 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse both;
}

@-webkit-keyframes scrollMotion {
  0% {
   height: 120px;
    
  }
  100% {
  height: 150px;
  }
}
@keyframes scrollMotion {
  0% {
   height: 120px;
    
  }
  100% {
  height: 150px;
  }
}


/* 수정 2023-02-12 분할 삭제  */
/*.wrap-spot-main.modi_1 .item{ border-right:0; }
.wrap-spot-main.modi_1 .item.small{ width: 0;}
.wrap-spot-main.modi_1 .item.small2big {

    animation: 0.6s ease-in-out 0.3s both animsmalltobig2;
}*/



@keyframes animsmalltobig {
    0% {
        right: 0;
        width: 412px;
        border-right-width: 0;
        background-position: 50% 50%;
    }

    100% {
        right: 0;
        width: 100%;
        border-right-width: 412px;
        background-position: 50% 50%;
    }
}

@include media-breakpoint-down(sm) {
    @keyframes animsmalltobig {
        0% {
            right: -412px;
            width: 412px;
            border-right-width: 0;
            background-position: 50% 50%;
        }

        100% {
            right: 0;
            width: 100%;
            border-right-width: 0;
            background-position: 50% 50%;
        }
    }
}

@keyframes animsmalltobig2 {
    0% {
        right: 0;
        width: 0;
        border-right-width: 0;
        background-position: 50% 50%;
    }

    100% {
        right: 0;
        width: 100%;
        border-right-width: 412px;
        background-position: 50% 50%;
    }
}

@include media-breakpoint-down(sm) {
    @keyframes animsmalltobig2 {
        0% {
            right: 0;
            width: 0;
            border-right-width: 0;
            background-position: 50% 50%;
        }

        100% {
            right: 0;
            width: 100%;
            border-right-width: 0;
            background-position: 50% 50%;
        }
    }
}


@keyframes animbigtosmall {
    0% {
        right: 0;
        width: 100%;
        border-right-width: 412px;
        background-position: 50% 50%;
    }

    100% {
        right: 0;
        width: 412px;
        border-right-width: 0;
        background-position: 50% 50%;
    }
}

@include media-breakpoint-down(sm) {
    @keyframes animbigtosmall {
        0% {
            right: 0;
            width: 100%;
            border-right-width: 0;
            background-position: 50% 50%;
        }

        100% {
            right: -412px;
            width: 412px;
            border-right-width: 0;
            background-position: 50% 50%;
        }
    }
}

@keyframes animsmallfromright {
    0% {
        right: -412px;
        width: 412px;
        border-right-width: 0;
        background-position: 50% 50%;
    }

    100% {
        right: 0;
        width: 412px;
        border-right-width: 0;
        background-position: 50% 50%;
    }
}


@keyframes animbigfromleft {
    0% {
        right: 100%;
        width: 100%;
        border-right-width: 0;
        background-position: 50% 50%;
    }

    100% {
        right: 0;
        width: 100%;
        border-right-width: 412px;
        background-position: 50% 50%;
    }
}


@keyframes animsmallrightout {
    0% {
        right: 0;
        width: 412px;
        border-right-width: 0;
        background-position: 50% 50%;
    }

    100% {
        right: -412px;
        width: 412px;
        border-right-width: 0;
        background-position: 50% 50%;
    }
}

@keyframes animbigleftout {
    0% {
        right: 0;
        width: 100%;
        border-right-width: 412px;
        background-position: 50% 50%;
    }

    100% {
        right: 100%;
        width: 100%;
        border-right-width: 0;
        background-position: 50% 50%;
    }
}


@keyframes animsmalltobig {
    0% {
        right: 0;
        width: 412px;
        border-right-width: 0;
        background-position: 50% 50%;
    }

    100% {
        right: 0;
        width: 100%;
        border-right-width: 412px;
        background-position: 50% 50%;
    }
}





/*///////////////////////////////////////////*/

/*
.video-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.video-container:after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2; content: "";}
.video-container > video {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  z-index: 1;
}
*/

@media screen and (max-aspect-ratio: 1920/1080) {
  .header-visual .video-container > video {
    height: 100%;
  }
}
@media screen and (min-aspect-ratio: 1920/1080) {
  header-visual .video-container > video {
    width: 100%;
  }
}

#main_section_visual {
  flex-shrink: 0;
  width: 100%;
  height: 100vh;
  position: relative;
  transition-property: transform;
}


#mainVisual { padding: 0; }
#mainVisual .swiper-wrapper {
  display: flex !important;
}
#mainVisual .swiper-slide {
  background-color: #333;
  color: #fff;
  overflow: hidden;
  height: 100vh;
}

#mainVisual .swiper-slide:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(40,42,28,0.3);
  z-index: 1;
}
#mainVisual .swiper-slide.video-container:after{ opacity: 0; }
#mainVisual .img {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: #000; 
  background-position: center; 
  background-size: cover;
}
#mainVisual .text { position: relative; width: 100%; height: 100vh; box-sizing: border-box; z-index: 2; text-align: left; }
#mainVisual .text > .inner { display: table; width: 86%; height: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; }
#mainVisual .text > .inner > * { display: table-cell; vertical-align: middle; }
#mainVisual .text .tit { opacity: 0; font-size: 40px; color: #fff; line-height: 60px; font-family: "KHNPHD"; font-weight: 600; word-break: keep-all; }
#mainVisual .text .txt { opacity: 0; font-size: 18px; color: #d2d2d2; line-height: 40px; margin-top: 50px; }
#mainVisual .text .btn { opacity: 0; font-size: 14px; color: #fff; line-height: 60px; display: inline-block; width: 160px; height: 60px; border: 1px solid #fff; text-align: center; margin-top: 50px; font-family: 'Roboto', sans-serif; 
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
#mainVisual .text .btn:hover { background-color: #fff; color: #333; }
#mainVisual .text.ani .tit { animation: mainVisual-animation 0.7s ease-in-out 0.3s forwards; }
#mainVisual .text.ani .txt { animation: mainVisual-animation 0.7s ease-in-out 0.6s forwards; }
#mainVisual .text.ani .btn { animation: mainVisual-animation 0.7s ease-in-out 0.9s forwards; }
#mainVisual .text.center { text-align: center; }

#mainVisual .graph { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
#mainVisual .graph > .inner { position: relative; width: 100%; max-width: 1600px; margin: 0 auto; height: 100%; }

#mainVisual .wrap-graph {
  position: absolute;
  left: auto;
  right: 10%;
  top: 16.65%;
  height: 276px;
}
#mainVisual .wrap-graph .bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 15px;
  height: 10%;
  border-radius: 15px;
  background-color: rgba(245, 226, 207, 0.2);
}
#mainVisual .wrap-graph.ty1 .bar {
  background-color: rgba(177, 168, 224, 0.2);
}
#mainVisual .wrap-graph.ty2 {
  position: absolute;
  right: 6%;
  bottom: 25%;
  height: 155px;
  top: auto;
}
#mainVisual .wrap-graph.ty2 .bar {
  background-color: rgba(255, 255, 255, 0.2);
}
#mainVisual .wrap-number {
  color: #fff;
  text-align: left;
  font-size: 20px;
}
#mainVisual .wrap-number .ff-en-ty2 {
  font-size: 0;
  opacity: 0;
}
#mainVisual .wrap-number .ff-en-ty2 .col {
  display: inline-block;
  font-size: 120px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}
/*.wrap-number .ff-en-ty2 .col.num{display: inline-block; overflow: hidden; text-align: left;}*/
#mainVisual .wrap-number .ff-en-ty2 .num .wrap {
  display: block;
  position: relative;
}
#mainVisual .wrap-number .ff-en-ty2 .num .wrap .n {
  display: block;
  line-height: 1;
}
#mainVisual .wrap-number .ff-en-ty2 .parsent {
  font-size: 50px;
  font-weight: 300;
}
#mainVisual .wrap-number .t2 {
  line-height: 1.5;
  padding-left: 5px;
}
#mainVisual .wrap-number.ty1 {
  position: absolute;
  right: 25%;
  top: 25%;
  z-index: 2;
}
#mainVisual .wrap-number.ty2 {
  position: absolute;
  right: 10%;
  bottom: 28%;
  z-index: 2;
  opacity: 0.5;
}

#mainVisual .wrap-number.ty1 .t1 {
  color: #a066ff;
}

#mainVisual .graph .line {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: #fff;
  z-index: 2;
  opacity: 0.2;
}


.spot_main .swiper-slide .bg-pos {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 10000ms ease-in-out;
  -moz-transition: all 10000ms ease-in-out;
  -ms-transition: all 10000ms ease-in-out;
  -o-transition: all 10000ms ease-in-out;
  transition: all 10000ms ease-in-out;
  transition-delay: -2000ms;
}

.spot_main .swiper-slide.swiper-slide-active .bg-pos{
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}


.spot_content{position:absolute;left:0;top:0;width:100%;height: 100vh;background-color:transparent;z-index:1;display:flex;align-items: center;padding-bottom: 190px;box-sizing: border-box;}
.spot_content.n2{background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.3561799719887955) 0%, rgba(0,0,0,0) 12%, rgba(255,255,255,0) 100%);}
.spot_content .inr-c2{
  width: 1670px;display:flex;flex-direction: column;justify-content: center; margin-top: -11vh; opacity: 0;
  /*-webkit-transform: translate(0px,-50px);
  -moz-transform: translate(0px,-50px);
  -o-transform: translate(0px,-50px);
  -ms-transform: translate(0px,-50px);
  transform: translate(0px,-50px);*/
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
/*  background: rgba(0, 0, 0, 0.5);*/
/*  box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.5);*/

}
/*.spot_content .h1{font-size: 52px; color: #fff; font-weight: 600;  line-height: 1.2; font-weight: 300;}
.spot_content .h1 .ff-en{font-weight: 600;margin-top: 20px;display: block;font-size: 0.8em;line-height: 1;}*/

.spot_content .h1{ 
    font-size: 50px; line-height: 1.2;  font-family: 'ONE-Mobile-Title'; color: #fff; 
    
}
.spot_content .t1{
    font-size: 18px;line-height: 1.8;margin-top: 39px; color: #fff;
    
}
.spot_content.on .h1{-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s both;
            animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s both;}
.spot_content.on .t1{-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s both;
            animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s both;}

@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}


.spot_content.on .inr-c2{ 
  opacity: 1; 
  -webkit-transform: translate(0, 0px);
  -moz-transform: translate(0, 0px);
  -o-transform: translate(0, 0px);
  -ms-transform: translate(0, 0px);
  transform: translate(0, 0px);
}



.spot_content .lst{display:flex; margin-top:100px;}
.spot_content .lst li{margin-right:10px; opacity: 0;}
@media screen and (max-width: 1730px) {
  .pageing_ty2 .inr-c2,
  .spot_content .inr-c2{width: auto;margin-left: 100px;margin-right:0;}
}
@media screen and (max-width: 1280px) {
  .pageing_ty2 .inr-c2,
  .spot_content .inr-c2{width: auto;margin-left: 60px;margin-right:0;}
  .wrap_mousedown{display:none;}
  .spot_content .h1{font-size: 54px; }
}
@media screen and (max-width: 840px) {
  .spot_content .h1{font-size: 8vw; }
  .pageing_ty2 .inr-c2,
  .spot_content .inr-c2{margin-left: 5vw;}
  .spot_content .lst{display:flex; margin-top:10vw;}
  .spot_content .lst li{margin-right:2vw;}
  .spot_content .lst li img{width:13vw}
  .spot_content .t1{margin-top: 10vw; font-size: 5vw; color: #fff;}
}





#mainVisual .swiper-progressbar { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; height: 3px; background-color: rgba(255,255,255,0.3); 
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
#mainVisual .swiper-progressbar span { display: block; width: 0; height: 3px; background-color: #561c80; } 

#mainVisual .progressbar-pagination { position: absolute; left: calc(50vw - 600px); bottom: 50px; width: 100%; display: flex; justify-content: flex-start; align-items: center; z-index: 1; }
#mainVisual .swiper-pagination {position: relative;text-align: left;width: auto;display: flex;align-items: center;justify-content: flex-end;padding-right: 40px;}
#mainVisual .swiper-pagination .swiper-pagination-bullet { width: 150px; height: 2px; border-radius: 0; background-color: rgba(255,255,255,0.5); opacity: 1; position: relative;  }
#mainVisual .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet { margin-left: 6px; }
#mainVisual .swiper-pagination .swiper-pagination-bullet-active { opacity: 1; }
#mainVisual .swiper-pagination .swiper-pagination-bullet .num{position: absolute;left: 0;bottom: 5px;font-weight: 600;color: #fff; width: 100%; font-size: 1rem;}
#mainVisual .swiper-pagination .swiper-pagination-bullet .num span { font-weight: 400; margin: 0 0 0 5px;}
#mainVisual .swiper-pagination .swiper-pagination-bullet .bar { width: 0%; height: 4px; background-color: #fff; display: block; margin-top: -3px;}
#mainVisual .mute { margin-right: 10px; }
#mainVisual .mute button { cursor: pointer; width: 50px; height: 50px; border-radius: 50%; background-color: rgba(255, 255, 255, .3); font-size: 0; background-repeat: no-repeat; background-size: 35%; background-position: center; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96.08 92.95'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M47.79,.26c-1.29-.53-2.77-.24-3.75,.75L17.23,27.81H3.44c-1.9,0-3.44,1.54-3.44,3.44v30.43c0,1.9,1.54,3.44,3.44,3.44h13.79l26.8,26.81c.66,.66,1.54,1.01,2.44,1.01,.44,0,.89-.09,1.32-.26,1.29-.53,2.12-1.79,2.12-3.18V3.44c0-1.39-.84-2.65-2.12-3.18Z'/%3E%3Cpath class='cls-1' d='M82.49,46.39l12.45-12.39c1.52-1.51,1.52-3.96,.01-5.48-1.51-1.51-3.96-1.52-5.48-.01l-12.48,12.42-12.48-12.42c-1.52-1.51-3.97-1.5-5.48,.01-1.51,1.52-1.5,3.97,.01,5.48l12.45,12.39-12.46,12.39c-1.52,1.51-1.52,3.96-.01,5.48,.76,.76,1.75,1.14,2.75,1.14s1.98-.38,2.73-1.13l12.48-12.42,12.48,12.42c.76,.75,1.74,1.13,2.73,1.13s1.99-.38,2.74-1.14c1.51-1.52,1.5-3.97-.01-5.48l-12.45-12.39Z'/%3E%3C/svg%3E"); }
#mainVisual .mute button.on { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 111.2 93.81'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M47.79,.7c-1.29-.53-2.77-.24-3.75,.75L17.23,28.25H3.44c-1.9,0-3.44,1.54-3.44,3.44v30.43c0,1.9,1.54,3.44,3.44,3.44h13.79l26.81,26.81c.66,.66,1.54,1.01,2.43,1.01,.44,0,.89-.09,1.32-.26,1.29-.53,2.13-1.79,2.13-3.18V3.88c0-1.39-.84-2.65-2.13-3.18Z'/%3E%3Cpath class='cls-1' d='M61.68,65.99c-.99,0-1.98-.38-2.74-1.13-1.51-1.51-1.52-3.96,0-5.48,3.33-3.34,5.17-7.77,5.17-12.48s-1.83-9.15-5.17-12.47c-1.51-1.51-1.51-3.97,0-5.48,1.51-1.51,3.96-1.51,5.48,0,4.79,4.79,7.43,11.17,7.43,17.95s-2.64,13.15-7.43,17.95c-.76,.76-1.75,1.14-2.74,1.14Z'/%3E%3Cpath class='cls-1' d='M75.32,81.2c-2.14,0-3.87-1.73-3.87-3.87h0c0-1.04,.41-2.02,1.13-2.75,7.4-7.4,11.47-17.23,11.47-27.68s-4.07-20.29-11.47-27.68c-1.51-1.51-1.51-3.96,0-5.48,1.51-1.51,3.96-1.51,5.48,0,8.86,8.85,13.74,20.63,13.74,33.16s-4.85,24.23-13.66,33.08c-.71,.75-1.71,1.21-2.81,1.21Z'/%3E%3Cpath class='cls-1' d='M89.5,93.81c-.99,0-1.98-.38-2.74-1.14-1.51-1.51-1.51-3.96,0-5.48,10.77-10.76,16.7-25.07,16.7-40.29s-5.93-29.54-16.69-40.3c-1.51-1.51-1.51-3.96,0-5.48,1.51-1.51,3.96-1.51,5.48,0,12.22,12.22,18.96,28.48,18.96,45.77s-6.74,33.55-18.97,45.77c-.76,.75-1.75,1.13-2.74,1.13Z'/%3E%3C/svg%3E"); }

.pageing_ty2 .swiper-button-prev2,
.pageing_ty2 .swiper-button-next2{position: absolute;  top: 50%; z-index: 5; font-size: 0; margin-top: -30px; cursor: pointer;}
.pageing_ty2 .swiper-button-prev2{left: 50px;}
.pageing_ty2 .swiper-button-next2{right: 50px;}
.pageing_ty2 .swiper-button-prev2:hover,
.pageing_ty2 .swiper-button-next2:hover{opacity: 0.8;}

#main_section_visual .timer{ right: 54px;}

.progressbar-pagination .btn_full{margin-right: 30px;border: 1px solid #fff;padding: 10px 40px; display: inline-block; position:relative;}
.progressbar-pagination .btn_full .t{ font-size: 16px; color: #fff; font-weight: 600; display: inline-block; position: relative; z-index: 1;}
.progressbar-pagination .btn_full:after{position:absolute; left:0; bottom:0; width:100%; height:0%; background:#fff; content:""; z-index:0;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;}
#main_section_visual.n1 .progressbar-pagination .btn_full.n2{display: none;}
#main_section_visual.n2 .progressbar-pagination .btn_full.n1{display: none;}
.progressbar-pagination .btn_full:hover .t{ color:#222;}
.progressbar-pagination .btn_full:hover:after{ height:100%;}
/*
#main_section_visual.n2 .swiper-pagination .swiper-pagination-bullet .num{color: #0082cf;}
#main_section_visual.n2 .swiper-pagination .swiper-pagination-bullet .bar { background-color: #00588a; }
#main_section_visual.n2 .swiper-pagination .swiper-pagination-bullet { background-color: rgba(0,130,207,0.3);}
*/



@media screen and (max-width: 1600px){
    .spot_main .scrolldown{ display: block !important; left: 0; opacity: 1; }
    .spot_main .scrolldown .arr,
    .spot_main .scrolldown .t{ color: #fff;  }
    .spot_main .scrolldown .line{ background:#fff; }

    .spot_main .scrolldown2{ display: none; }
}

@media screen and (max-width: 840px){
  .spot_main .scrolldown{ display:none !important;}

  #mainVisual .progressbar-pagination {position: absolute;left: 0;bottom: 5vw;width: 100%;display: flex;justify-content: flex-start;align-items: center;z-index: 1; margin-left: 6%;}
  #mainVisual .swiper-pagination {position: relative;text-align: left;width: auto;display: flex;align-items: center;justify-content: flex-end;padding-right: 40px;}
  #mainVisual .swiper-pagination .swiper-pagination-bullet {width: 31vw;height: 2px; margin-right: 10px;}
  #mainVisual .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left: 0;}
  #mainVisual .swiper-pagination .swiper-pagination-bullet-active { opacity: 1; }
  #mainVisual .swiper-pagination .swiper-pagination-bullet .num{bottom: 2vw; font-size: 16px;}
  #mainVisual .swiper-pagination .swiper-pagination-bullet .bar { width: 0%; height: 4px; background-color: #fff; display: block; margin-top: -3px;}
  #mainVisual .mute {margin-right: 2vw;}
  #mainVisual .mute button {width: 10vw;height: 10vw;background-size: 37%;}
  #mainVisual .mute button.on { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 111.2 93.81'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M47.79,.7c-1.29-.53-2.77-.24-3.75,.75L17.23,28.25H3.44c-1.9,0-3.44,1.54-3.44,3.44v30.43c0,1.9,1.54,3.44,3.44,3.44h13.79l26.81,26.81c.66,.66,1.54,1.01,2.43,1.01,.44,0,.89-.09,1.32-.26,1.29-.53,2.13-1.79,2.13-3.18V3.88c0-1.39-.84-2.65-2.13-3.18Z'/%3E%3Cpath class='cls-1' d='M61.68,65.99c-.99,0-1.98-.38-2.74-1.13-1.51-1.51-1.52-3.96,0-5.48,3.33-3.34,5.17-7.77,5.17-12.48s-1.83-9.15-5.17-12.47c-1.51-1.51-1.51-3.97,0-5.48,1.51-1.51,3.96-1.51,5.48,0,4.79,4.79,7.43,11.17,7.43,17.95s-2.64,13.15-7.43,17.95c-.76,.76-1.75,1.14-2.74,1.14Z'/%3E%3Cpath class='cls-1' d='M75.32,81.2c-2.14,0-3.87-1.73-3.87-3.87h0c0-1.04,.41-2.02,1.13-2.75,7.4-7.4,11.47-17.23,11.47-27.68s-4.07-20.29-11.47-27.68c-1.51-1.51-1.51-3.96,0-5.48,1.51-1.51,3.96-1.51,5.48,0,8.86,8.85,13.74,20.63,13.74,33.16s-4.85,24.23-13.66,33.08c-.71,.75-1.71,1.21-2.81,1.21Z'/%3E%3Cpath class='cls-1' d='M89.5,93.81c-.99,0-1.98-.38-2.74-1.14-1.51-1.51-1.51-3.96,0-5.48,10.77-10.76,16.7-25.07,16.7-40.29s-5.93-29.54-16.69-40.3c-1.51-1.51-1.51-3.96,0-5.48,1.51-1.51,3.96-1.51,5.48,0,12.22,12.22,18.96,28.48,18.96,45.77s-6.74,33.55-18.97,45.77c-.76,.75-1.75,1.13-2.74,1.13Z'/%3E%3C/svg%3E"); }
  
  .pageing_ty2 .swiper-button-prev2,
  .pageing_ty2 .swiper-button-next2{position: absolute;  top: 50%; z-index: 5; font-size: 0; margin-top: -30px; cursor: pointer;}
  .pageing_ty2 .swiper-button-prev2{left: 50px;}
  .pageing_ty2 .swiper-button-next2{right: 50px;}
  .pageing_ty2 .swiper-button-prev2:hover,
  .pageing_ty2 .swiper-button-next2:hover{opacity: 0.8;}

  .progressbar-pagination .btn_full{margin-right: 5vw;border: 1px solid #fff;padding: 1.2vw 6vw;display: inline-block;position: absolute;right: 0;bottom: 15vw;}
  .progressbar-pagination .btn_full .t{font-size: 3.5vw;color: #fff;font-weight: 600;display: inline-block;position: relative;z-index: 1;}
  .progressbar-pagination .btn_full:after{position:absolute; left:0; bottom:0; width:100%; height:0%; background:#fff; content:""; z-index:0;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;}
  #main_section_visual.n1 .progressbar-pagination .btn_full.n2{display: none;}
  #main_section_visual.n2 .progressbar-pagination .btn_full.n1{display: none;}
  .progressbar-pagination .btn_full:hover .t{ color:#222;}
  .progressbar-pagination .btn_full:hover:after{ height:100%;}
  
  
}
/* 팝업 한개 */
/* #modal-wrap{position: fixed; width: auto; top:50%; left:50%; box-shadow: 1px 1px 10px #666; transform: translate(-50%, -50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); z-index: 1000;} */
#modal-wrap{position: fixed; width: 22%; top:39%; left:76%; box-shadow: 1px 1px 10px #666; transform: translate(-50%, -50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); z-index: 1000;}
/* #modal-wrap .main-modal {outline: none;} */
.main-modal .foot-close a:focus{outline-offset:-3px;}
#modal-wrap .image {position:relative;}
#modal-wrap .image>img {width: 100%;}
#modal-wrap .image .btns {position:absolute; top:0; left:0; width:100%; height:100%;}
/* #modal-wrap .image .btns a {position:absolute; width: 56%; top: 80%; left:22%; } */
#modal-wrap .image .btns .btns_box a {width:60%;}
#modal-wrap .image .btns>a {position:absolute; width: 94%; top: 39.5%; left:3%; }
#modal-wrap .image .btns .btns_box{position:absolute; bottom:10%; width:109%; left:-4%; display: flex; justify-content: space-around;}
#modal-wrap .image .btns a img {width: 100%;}
.main-modal .foot-close { height: 50px; line-height: 50px; background: #222; }
.main-modal .foot-close .input { float: left; margin-left: 20px;}
.main-modal .foot-close .input label { color: #fff; margin-left: 10px; }
.main-modal .foot-close a { float: right; color: #fff; padding: 0 20px; }

@media screen and (max-width: 1200px){
  #modal-wrap{width: 32%}
}
@media screen and (max-width: 840px){
    #modal-wrap{width: 75%; top:50%; left:50%;}
    #modal-wrap .image .btns .btns_box{position:absolute; bottom:10%; width:109%; left:-4%; display: flex; justify-content: space-around;}

    /* #modal-wrap .foot-close{height: 22px; line-height: 22px;}
    #modal-wrap .foot-close a{width: 10px; height: 10px;} */
    #modal-wrap .foot-close {height: 50px; line-height: 50px; background: #222;}
    #modal-wrap .foot-close a { float: right; color: #fff; padding: 0 20px; } }