@charset "UTF-8";

.video-container-main {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.spot_main .swiper-slide:after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; 
background: rgb(0,0,0);
background: -moz-linear-gradient(93deg, rgba(0,0,0,0.2497373949579832) 0%, rgba(0,0,0,0.2497373949579832) 52%, rgba(0,0,0,0.6587009803921569) 86%, rgba(0,0,0,0.7483368347338936) 100%);
background: -webkit-linear-gradient(93deg, rgba(0,0,0,0.2497373949579832) 0%, rgba(0,0,0,0.2497373949579832) 52%, rgba(0,0,0,0.6587009803921569) 86%, rgba(0,0,0,0.7483368347338936) 100%);
background: linear-gradient(93deg, rgba(0,0,0,0.2497373949579832) 0%, rgba(0,0,0,0.2497373949579832) 52%, rgba(0,0,0,0.6587009803921569) 86%, rgba(0,0,0,0.7483368347338936) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
 z-index: 2; content: "";}
.video-container-main > video {
  display: block;
  position: absolute;
/*  left: 50%;*/
  top: 0;
/*  transform: translate(-50%, 0);*/
  z-index: 1;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
/*  width: 100%;*/
/*  height: 100%;*/

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


.wrap-spot-main .item .h1{ font-size: 50px; line-height: 1.2;  }
.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;
    }
}



.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: "";}*/
.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-main > video{ height: 70vw; }
    .video-container > video.mo{ display: initial; }
    .video-container > video.pc{ display: none; }
}
.video-container.hf > video {
    height: 100%;
}
.video-container.wf > video {
    width: 100%;
}
/*@media screen and (max-aspect-ratio: 1920/1080) {
  .video-container > video {
    height: 100%;
  }
}
@media screen and (min-aspect-ratio: 1920/1080) {
  .video-container > 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;
}
.spot_main .scrolldown .arr{}

@-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;
}*/




//SLIDES ANIMATIONS

@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) {
  .video-container > video {
    height: 100%;
  }
}
@media screen and (min-aspect-ratio: 1920/1080) {
  .video-container > video {
    width: 100%;
  }
}


#main_section_visual {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  transition-property: transform;
  /*min-height: 750px;
  max-height:1024px;
  height: calc(100vh - 250px);*/
  height: 940px;
  margin-top: 0;
}
#main_section_visual .swiper-container{/*min-height: 750px;max-height:1024px;height: calc(100vh - 250px);*/ height: 940px; margin-top: 0;}
@media screen and (max-width: 840px) {
   #main_section_visual {
    flex-shrink: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    transition-property: transform;
    min-height: auto;
    max-height: none;
    height: 135vw;
  } 
  #main_section_visual .swiper-container{min-height: auto;max-height:none;height: 185vw;margin-top: 0;background: #f9f9f9;}
}

#mainVisual { padding: 0; }
#mainVisual .swiper-wrapper {
  display: flex !important;
}
#mainVisual .swiper-wrapper:after{
  position:absolute;
  left:0;
  top:0;
  width:100%; height:100%; content:"";
/*  background: rgb(0,0,0);*/
  /*background: -moz-linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.9) 100%);
  background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.9) 100%);
  background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);*/
}
#mainVisual .swiper-slide {
  background-color: #fff;
  color: #222;
  overflow: hidden;
  height: 100%;
}
@media screen and (max-width: 840px) {
   #mainVisual .swiper-slide {
    min-height: auto;
    max-height: none;
    height: 70vw;
  } 
}

#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-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.15);
  -webkit-transform: scale(1.15);
  -o-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
  -webkit-transition: all 7500ms ease-in-out;
  -moz-transition: all 7500ms ease-in-out;
  -ms-transition: all 7500ms ease-in-out;
  -o-transition: all 7500ms ease-in-out;
  transition: all 7500ms ease-in-out;
  transition-delay: -1000ms;
}

.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: calc(100% - 145px);background-color:transparent;z-index: 2;display:flex;box-sizing: border-box;align-items: flex-start;margin-top: 175px;}
.spot_content .inr-c2{
  min-width: 1400px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  /*-webkit-transform: translate(50px,0px);
  -moz-transform: translate(50px,0px);
  -o-transform: translate(50px,0px);
  -ms-transform: translate(50px,0px);
  transform: translate(50px,0px);*/
  -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);*/
  align-items: flex-end;
}
.spot_content .h1,
.spot_content .t1,
.spot_content .data,
.spot_content .cate,
.spot_content .more{
  opacity: 0;
  -webkit-transform: translate(50px,0px);
  -moz-transform: translate(50px,0px);
  -o-transform: translate(50px,0px);
  -ms-transform: translate(50px,0px);
  transform: translate(50px,0px);
  -webkit-transition: transform 0.6s ease,  opacity 0.6s ease;
  -moz-transition: transform 0.6s ease, opacity 0.6s ease;
  -o-transition: transform 0.6s ease, opacity 0.6s ease;
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.spot_content .cate{
    margin-top: 0;
    font-size: 22px;
    font-weight:500;
    line-height: 1.2;
    color: #fff;
    text-decoration: underline;
    text-underline-position : under;
}
.spot_content .h1{
    font-size: 32px;
    line-height: 1.3;
    color: #fff;
    font-weight: 400;
    margin-top: 13px;
    height: 190px;
    overflow: hidden;
    word-break: keep-all;
}
.spot_content .t1{
    font-size: 42px;
    line-height: 1.3;
    color: #fff;
    font-weight: 400;
    margin-top: 13px;
}
.spot_content .data{
    font-size: 18px;
    line-height: 1;
    color: #fff;
    font-weight: 300;
    margin-top: 20px;
}
.spot_content .more{
    display: inline-block !important;
    border:1px #fff solid;
    padding: 15px 25px;
    margin-top: 30px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spot_content .more:hover{ background-color:#fff; color:#000; }
.spot_content .more i{ margin-left: 5px;  }

.spot_content .group_txt{margin-top: 0;}



@media screen and (max-width: 840px) {
    .spot_main .swiper-slide:after{display: none;}
  .spot_content .cate{font-size: 3.6vw;color: #000;}
  .spot_content .h1{ font-size: 4vw; margin-top: 2vw; }
.spot_content .more{margin-top: 3vw;font-size: 4vw;border: 1px #222 solid;color: #222;padding: 3vw 3vw;}
  .spot_content .group_txt{margin-top: 2vw;}
    #mainVisual .swiper-wrapper:after{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height: 70vw;
    content:"";
    background: rgb(0,0,0,0.2);
    /*background: -moz-linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.7) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.7) 100%);
    background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);*/
  }

}


.spot_content.on{  z-index: 5; }
.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.on .cate{transition-delay: 400ms;}
.spot_content.on .h1{transition-delay: 550ms;}
.spot_content.on .t1{transition-delay: 650ms;}
.spot_content.on .data{transition-delay: 750ms;}
.spot_content.on .more{transition-delay: 850ms;}
.spot_content.on .cate,
.spot_content.on .h1,
.spot_content.on .t1,
.spot_content.on .data,
.spot_content.on .more{
  opacity: 1;
  -webkit-transform: translate(0px,0px);
  -moz-transform: translate(0px,0px);
  -o-transform: translate(0px,0px);
  -ms-transform: translate(0px,0px);
  transform: translate(0px,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: 1730px) {
 
}
@media screen and (max-width: 1480px) {
 .spot_content .inr-c2{ margin-left: 40px; margin-right: 40px; }
}
@media screen and (max-width: 1280px) {
  .wrap_mousedown{display:none;}
  .spot_content .h1{font-size: 40px; }
}
}


#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: 50%; top: 30px;width: 1400px;margin-left: -700px;display: flex;align-items: center;z-index: 15;justify-content: center;}
#mainVisual .swiper-pagination {position: relative;text-align: left;width: 70%;display: flex;align-items: center;padding-right: 0;}
#mainVisual .swiper-pagination .swiper-pagination-bullet {width: 33.3332%;height: auto;border-radius: 0;background-color: transparent;opacity: 1;position: relative;padding: 17px 30px;border: 3px solid #fff;border-radius: 50px;text-align: center; background-color: rgba(0,0,0,0.5);}
#mainVisual .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left: 16px;}
#mainVisual .swiper-pagination .swiper-pagination-bullet-active {opacity: 1;background: #004098;border-color: #004098;}
#mainVisual .swiper-pagination .swiper-pagination-bullet .num{position: relative;left: 0;bottom: 0;font-weight: 400;color: #fff;width: 100%;font-size: 20px;line-height: 1.22;}
#mainVisual .swiper-pagination .swiper-pagination-bullet .bar {width: 0%;height: 5px;background-color: #fff;display: block;margin-top: 0;position: absolute;left: 0;top: -5px;display: none !important;}
#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);}
*/

.group_control{
    position: absolute;
    right: calc(50% - 513px);
    top: 549px;
    color: #fff;
    z-index: 60;
}
.group_control button{
    color: #fff;
    cursor: pointer;
    opacity: 0.4;
    font-size: 20px;
    border: 1px #fff solid;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 6px;
}
.group_control button:hover{
    color: #000;
    background:#fff;
}
.group_control button.on{
    opacity:1;
}




@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: 1480px) {
    .spot_content .inr-c2{ min-width: calc(100% - 80px);  }
    .group_control{right: 60px;}
    #mainVisual .progressbar-pagination {left: 20px; min-width: calc(100% - 40px);width: calc(100% - 40px);margin-left: 0;}
    #mainVisual .swiper-pagination .swiper-pagination-bullet{ padding: 14px 10px; }
    #mainVisual .swiper-pagination .swiper-pagination-bullet .num{ font-size: 16px; }
}

@media screen and (max-width: 1480px) {
    #main_section_visual{margin-top: 0;}
}


@media screen and (max-width: 840px) {
  .group_control{
    right: 4vw;
    bottom: auto;
    top: 59vw;
}
.group_control button{
    font-size: 3vw;
    width: 8vw;
    height: 8vw;
    margin-left: 2vw;
}
.group_control button:hover{
    color: #000;
    background:#fff;
}
.group_control button.on{
    opacity:1;
}
  
.spot_content .inr-c2{ margin-left: auto; margin-right: auto; }
  .spot_content{top: 72vw;width: calc(100% - 8vw);height: auto;display: flex;align-items: flex-start;margin: 0;left: 4vw;}
  .spot_content .inr-c2{ min-width: auto; max-width: 90vw; display:flex;flex-direction: column;justify-content: center;  opacity: 0; }
  
  .spot_content .h1{font-size: 5vw;color: #222;height: 27vw;}
  .pageing_ty2 .inr-c2,
  .spot_content .inr-c2{margin-left: 5vw;min-width: calc(100% - 4vw);display: flex;align-items: flex-start;}
  .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: 3vw;font-size: 5vw;color: #222;}
}
  
@media screen and (max-width: 840px){
  .spot_main .scrolldown{ display:none !important;}
  #main_section_visual{ margin-top: 14vw; }

  #mainVisual .progressbar-pagination {position: absolute;left: 6vw;bottom: auto;width: calc(100% - 8vw);display: flex;justify-content: flex-start;align-items: center;margin-left: 0;top: 60.1vw;min-width: calc(100% - 8vw);}
  #mainVisual .swiper-pagination {position: relative;text-align: left;width: auto;display: flex;align-items: center;padding-right: 0;margin-top: 0;justify-content: flex-start;margin: 0;}
  #mainVisual .swiper-pagination .swiper-pagination-bullet {width: 3vw;height: 3vw;padding: 0;margin: 0 2vw;border-radius: 50%;overflow: hidden;display: block;}
  #mainVisual .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left: 0;}
  #mainVisual .swiper-pagination .swiper-pagination-bullet-active {opacity: 1;background: #fff;}
  #mainVisual .swiper-pagination .swiper-pagination-bullet .num{bottom: 0;font-size: 0;line-height: 0;}
  #mainVisual .swiper-pagination .swiper-pagination-bullet .num br{ display: none; }
  #mainVisual .swiper-pagination .swiper-pagination-bullet .bar { width: 0%; height: 4px;  display: block; margin-top: 0;}
  #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%;}
  .spot_content .data{ color:#818181; font-size:4vw; }
  .spot_content .data{ margin-top: 0; }
  
  
}