@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* RESET */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,
em,img,ins,kbd,q,samp,small,strong,sub,sup,var,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,
menu,nav,section,summary,time,mark,audio,video,input{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;color:#333;font-style:normal;font-family: "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", sans-serif;}
body{line-height:1.2;word-break:break-all}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav,ul,li{list-style:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;color:#333}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #f2f2f2;margin:15px 0 20px;padding:0}
input,select{vertical-align:middle}
html{font-size:13px}
caption{overflow:hidden;visibility:hidden;width:0;height:0;font-size:1px}
html{-webkit-text-size-adjust:none}
img { vertical-align:top; }
html,body{height:100%;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family: 'Malgun Gothic', sans-serif;}

.text-hidden {position: absolute;text-indent: -9999em;font-size: 0;}
img {width: 100%;}

#wrap {overflow: hidden; width: 100%; background: #fff;}
.container, .foot {width: 100%;}
.inner {position: relative; width: 100%; margin: 0 auto;}

div[class^="btn"] a {display: block; width: 100%; height: 100%;}

section {position: relative; background: #fff;}
.main {background: #9bd3ff;}
.s2 {background: #f9fafb;}
.main img {opacity: 0;}
.ani .main img {animation: opacityAni 1s ease forwards;}
#wrap.pageOff .main img {opacity: 1; animation: none;}

.main .img-box .img {position: absolute; max-width: none;}
.main .img-box .img-tit {left: 0; top: 10.5%; width: 100%; transform: translateY(80px); opacity: 0; z-index: 1;}
.main .img-box .img-bg {left: 0; top: 0; width: 100%; opacity: 0;}
.main .img-box .img-card1 {left: 0; bottom: 19%; width: 100%; transform: translateY(80px); opacity: 0; z-index: 1;}
.main .img-box .img-card2 {left: 0; bottom: 19%; width: 100%; transform: translateY(80px); opacity: 0; z-index: 1;}
.main .img-box .img-navi1 {left: 13.2%; top: 51.5%; width: 8.195%; transform: translateY(-5%); opacity: 0; z-index: 2;}
.main .img-box .img-navi2 {left: 74.7%; top: 71.8%; width: 8.75%; opacity: 0; z-index: 2;}
.ani .main .img-box .img-tit {animation: topMoveAni .5s .4s ease-out forwards;}
.ani .main .img-box .img-bg {animation: opacityAni .8s .85s ease forwards;}
.ani .main .img-box .img-card1 {animation: topMoveAni .5s .7s ease-out forwards;}
.ani .main .img-box .img-card2 {animation: topMoveAni .5s .7s ease-out forwards;}
.ani .main .img-box .img-navi1 {animation: opacityAni .7s 1.1s linear forwards, updownMonveAni 1.2s 1.3s ease-in infinite alternate;}
.ani .main .img-box .img-navi2 {animation: opacityAni .7s 1.2s linear forwards, updownMonveAni2 1.3s 1.4s ease-in infinite alternate;}
.main canvas {position: absolute; left: 0; top: 0; opacity: 0; animation: opacityAni 2s linear forwards;}

.s1 .swiper-card {position: absolute; left: 50%; top: 18.2%; width: 47%; padding-bottom: 8.5%; transform: translateX(-50%);}
.s1 .swiper-card .swiper-pagination {bottom: 0;}
.s1 .swiper-card .swiper-pagination .swiper-pagination-bullet {width: 46px; height: 46px; margin: 0 19px; border: 2px solid transparent; opacity: 1;}
.s1 .swiper-card .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {border: 2px solid #f56383;}
.s1 .swiper-card .swiper-pagination .swiper-pagination-bullet:nth-child(1) {background: url('../images/pagination1.png') no-repeat; background-size: 100%;}
.s1 .swiper-card .swiper-pagination .swiper-pagination-bullet:nth-child(2) {background: url('../images/pagination2.png') no-repeat; background-size: 100%;}
.s1 .swiper-card .swiper-pagination .swiper-pagination-bullet:nth-child(3) {background: url('../images/pagination3.png') no-repeat; background-size: 100%;}
.s1 .swiper-card .swiper-pagination .swiper-pagination-bullet:nth-child(4) {background: url('../images/pagination4.png') no-repeat; background-size: 100%;}

.img-box img {position: absolute;}
.s1 .img-item1 {left: 64%; top: 64.5%; width: 12%;}
.s1 .img-item2 {left: 59.3%; top: 71.2%; width: 22%;}
.s2 .img-item {left: 50%; top: 3%; width: 64%; transform: translateX(-50%);}
.s3 .img-item {left: 50%; top: 2.5%; width: 60%; transform: translateX(-50%);}
.s3 .inner>img {position: relative; z-index: 1;}
.s4 .img-item {left: 50%; top: 33.3%; width: 55%; transform: translateX(-50%);}

.section .btn {position: absolute; left: 50%; width: 63%; transform: translateX(-50%); text-indent: -999em;}
.s2 .btn {bottom: 12%; height: 7.55%;}

.footer {padding-bottom: 160px; background: #303032;}

.btn-floating {position: absolute; left: 50%; top: 830px; width: 666px; background: transparent; border-radius: 24px;
  z-index: 99; transform: translateX(-50%); opacity: 0; animation: opacityAni .8s .8s ease forwards; box-shadow: 8px 2px 12px rgba(56,56,56,.5);}
.btn-floating.on {position: fixed; top: 39px;}
.btn-floating .btn {float: left; width: 50%; height: 100%;}
.btn-floating .btn1 {text-align: right;}
.btn-floating .btn2 {text-align: left;}
.btn-floating .btn img {max-width: 333px;}
.btn-floating .img-box img {position: absolute; left: 0; top: 0; opacity: 0; animation: fadeRolling 2s infinite ease-in-out; transition: opacity 1s ease;}
.img-box img:nth-child(2) {animation-delay: 1s;}

.btn-floating .countdown {position: absolute; right: 6.5%; top: -59%; width: 34.685%; height: 78.1%; padding: 2.7% 2.8% 1.1% 0; background: url('../images/countdown.png') no-repeat; background-size: 100%; align-content: center;
  text-align: center; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-weight: 600; font-size: 24px; color: #282830; letter-spacing: -.2rem; box-sizing: border-box; transform: translateY(-9%); opacity: 0; animation: opacityAni .6s .4s linear forwards, updownMonveAni 1s 1.1s ease-in infinite alternate;}
.btn-floating .countdown>span {margin-left: 6px; font-size: 25px; color: #282830; letter-spacing: -.2rem;}
.btn-floating .countdown>span.day {margin-left: 0;}

#wrap.cdown {padding-top: 13.9%;}
#wrap.cdown .btn-floating {top: 930px;}
#wrap.cdown .btn-floating.on {top: auto; bottom: 68px;}
.countdown-floating {display: none; position: fixed; left: 0; top: 0; width: 100%; background: #2d2d35; box-shadow: 8px 2px 12px rgba(156,156,156,.75); z-index: 999;}
.countdown-floating .countdown {position: absolute; left: 30.5%; top: 0; align-content: center; width: 100%; height: 100%; font-weight: bold;}
.countdown-floating .countdown>* {font-size: 32px; color: #fff; vertical-align: middle;}
.countdown-floating .countdown>span {margin: 0 2%;}
.countdown-floating .countdown>div {display: inline-block; font-size: 0;}
.countdown-floating .countdown>div>span {display: inline-block; align-content: center; min-width: 46px; margin-left: 3px; padding: 0 4px; background: #f56383; border-radius: 5px; text-align: center; font-size: 55px; color: #fff;}


@keyframes topMoveAni {
  0% {transform: translateY(80px); opacity: 0;}
  100% {transform: translateY(0); opacity: 1;}
}

@keyframes updownMonveAni {
  0% {
    transform: translateY(-5%);
  }
  50% {
    transform: translateY(5%);
  }
  100% {
    transform: translateY(-5%);
  }
}

@keyframes updownMonveAni2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes updownMonveAni3 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes opacityAni {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeRolling {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}