@charset "UTF-8";
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

/* 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;font-style:normal;font-family: "GMarketSans", "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}
img { vertical-align:top; }
html,body{height:100%;}
button{background: transparent;}
input::placeholder,
textarea::placeholder {
  color: #bebebe;
}

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

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

div[class^="btn"] a {display: block; width: 100%; height: 100%;}
button {display: block; padding: 0; border: 0; background: transparent; font-size: 0; cursor: pointer;}
.section .btn {position: absolute; text-indent: -999em;}

section {position: relative; text-align: center; z-index: 1;}
section .text {opacity: 0;}

/* bg */
.bg {overflow:hidden; position: absolute; max-width: 2000px; margin: 0 auto; inset: 0; z-index: 0; pointer-events:none;}
.bg .bg1 .bg1-inner,
.bg .bg2 {
  will-change: transform;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  backface-visibility: hidden;
  perspective: 1000px;
}
.bg .bg1 {position: absolute; top: -3.7%; left: 0; right: 0; height: 100%; opacity: .8; transform: scale(1.05);}
.bg .bg1 .bg1-inner {position: absolute; inset: 0; background: url('../images/main_bg1.png') top/100% no-repeat; will-change: transform;}
.bg .bg2 {position: absolute; top: 0; display:block; margin: 0 auto; width: 100%; will-change: transform;
  transform: translateY(80px); opacity: 0;
}
.ani .bg .bg1 {animation: bgAni1 .4s linear forwards;}
.ani .bg .bg2 {animation: bgAni2 .9s .2s ease forwards;}
.bg .bg-2000 {visibility: hidden;}

/* main */
.main {background: #1cb4ff; transform: translateZ(0);}
.main .inner {max-width: 1920px;}
.main .inner img {max-width: 1600px;}
.main .inner .logo {position: absolute; left: 9.25%; top: 3.45%; width: 9.029%;}
.main .img-box .img {position: absolute; max-width: auto;}
.main .img-box .img-tit {left: 14.6%; top: 9.95%; width: 41.365%; transform: translateY(80px); opacity: 0;}
.ani .main .img-box .img-tit {animation: topMoveAni .6s .5s ease-out forwards;}
.main .content {position: absolute; left: 50%; top: 35.25%; width: 100%; transform: translateX(-50%);}
.main .content .card {position: relative;}
.main .content .card img.main-card {position: absolute; left: 50%; top: 0; width: 100%; transform: translateX(-50%); opacity: 0; z-index: 1;}
.main .content .card .main-card1 {margin-left: 4%;}
.main .content .card .main-card2 {}
.main .content .card .main-card3 {margin-left: -2%;}
.main .content .main-card-shadow {opacity: 0;}
.main .content .card.aos-animate .main-card1 {animation: cardAni1 .5s .7s ease-out forwards;}
.main .content .card.aos-animate .main-card2 {animation: opacityAni .5s .55s ease-out forwards;}
.main .content .card.aos-animate .main-card3 {animation: cardAni3 .5s .75s ease-out forwards;}
.main .content .card.aos-animate .main-card-shadow {animation: opacityAni .7s .9s ease-out forwards;}

@keyframes cardAni1 {
  0% {margin-left: 4%; opacity: 0;}
  100% {margin-left: 0; opacity: 1;}
}
@keyframes cardAni3 {
  0% {margin-left: -2%; opacity: 0;}
  100% {margin-left: 0; opacity: 1;}
}

/* s1 */
.s1 {background: #f5f6f8 url('../images/0514/s1_bg.png') top/100% no-repeat; z-index: 1;}
.s1 .video-box {position: relative;}
.s1 .video-box .video-tab {position: absolute; left: 50%; top: 7%; width: 76.8%; height: 9.5%; transform: translateX(-50%);}
.s1 .video-box .video-tab li {float: left; height: 100%;}
.s1 .video-box .video-tab li:nth-child(1) {width: 17.8%;}
.s1 .video-box .video-tab li:nth-child(2) {width: 20.2%;}
.s1 .video-box .video-tab li:nth-child(3) {width: 18.1%;}
.s1 .video-box .video-tab li:nth-child(4) {width: 21.2%;}
.s1 .video-box .video-tab li:nth-child(5) {width: 22.7%;}
.s1 .video-box .video-tab li a {display: block; width: 100%; height: 100%; text-indent: -999em;}
.s1 .video-box iframe,
.s1 .video-thumb {position: absolute; left: 50%; top: 23.45%; width: 75.375%; height: 54.061%; transform: translateX(-50%);}
.s1 .video-thumb {display: none; z-index: 1;}

/* s2 */
.s2 {background: url('../images/s2_bg.png') center/100% no-repeat, linear-gradient(to bottom, #1b6bff 50%, #3fadff 50%); z-index: 1;}
.s2 .content {position: relative;}
.s2 .content .card-slider {position: absolute; left: 50%; top: 12.1%; width: 100%; height: 100%; transform: translateX(-50%);}
.s2 .content .card-slider .card-slider-inner {position: relative; display: flex; justify-content: center; height: 59.464%;}
.s2 .content .card-slider .card-box {position: absolute; width: 20%; height: 100%; cursor: pointer;
  transition: transform .35s cubic-bezier(0.4, 0.2, 0.2, 1), opacity .35s ease;}
.s2 .content .card-slider .card-box .flip-card {position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .3s ease-in-out;}
.card-slider .card-box .flip-card .front,
.card-slider .card-box .flip-card .behind {
  position: absolute; inset: 0; width: 100%; height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 18px;
  box-shadow: 4px 8px 28px rgba(0, 20, 80, 0.35);
}
.card-slider .card-box .flip-card .behind {transform: rotateY(180deg);}
.card-slider .card-box.flipped .flip-card {transform: rotateY(-180deg);}
.s2 .content .card-slider .card-slider-nav {position: absolute; bottom: 19.2%; left: 50%; width: 11.5%; height: 9%; transform: translateX(-50%); z-index: 1;
  display: flex; justify-content: center; gap: 25%;}
.s2 .content .card-slider .card-slider-nav>button {width: 50%; height: 100%;}

/* s3 */
.s3 {background: url('../images/s3_bg.png') center/100% no-repeat, linear-gradient(to bottom, #40aeff 50%, #1b6bff 50%); z-index: 1;}
.s3 .benefit-box {}
.s3 .benefit-box .benefit-tab {position: absolute; left: 50%; top: 42.2%; width: 50.5%; height: 7.3%; transform: translateX(-50%); z-index: 1;}
.s3 .benefit-box .benefit-tab li {float: left; width: 50%; height: 100%;}
.s3 .benefit-box .benefit-tab li a {display: block; width: 100%; height: 100%; text-indent: -999em;}
.s3 .benefit-box .benefit-input {position: absolute; left: 50%; top: 72.1%; width: 26.5%; height: 17.4%; transform: translateX(-50%);}
.s3 .benefit-box .benefit-input input {width: 92%; height: 50%; font-size: 40px; text-align: center; color: #000; letter-spacing: -1px;}
.s3 .benefit-box .benefit-input .btn {display: block; width: 85%; height: 28%; margin-top: 12.8%;}
.s3 .benefit-box .benefit-input.benefit-ip1 {margin-left: -18.3%;}
.s3 .benefit-box .benefit-input.benefit-ip2 {margin-left: 16.8%;}
.s3 .benefit-box .benefit-input.benefit-ip1 input {}
.s3 .benefit-box .benefit-input.benefit-ip2 input {height: 52%; font-weight: bold; font-size: 84px; color: #f545ad; letter-spacing: -1.5px;}
.s3 .benefit-box .benefit-input.benefit-ip1 .btn {height: 27%; padding-top: 1%; margin-left: 7.5%; background: #1b6cff; border-radius: 50px; font-weight: bold; font-size: 30px; color: #fff; align-content: center; text-indent: 0;}
.s3 .benefit-box .benefit-input.benefit-ip1 .btn.active {animation: fadeRolling 1s ease-out infinite; will-change: transform, opacity;}
.s3 .benefit-box .benefit-input.benefit-ip2 .btn {margin-left: 15%;}
.s3 .benefit-box.on .benefit-input {top: 70.9%; height: 19.2%;}
.s3 .benefit-box.on .benefit-input input {height: 46%;}
.s3 .benefit-box.on .benefit-input.benefit-ip2 input {height: 48%;}
.s3 .benefit-box.on .benefit-input .btn {height: 25.5%; margin-top: 18%;}
.s3 .benefit-box.on .benefit-input.benefit-ip2 .btn {margin-top: 18.8%;}
.s3 .benefit-box .ip-myresult2 {display: none;}
.s3 .benefit-box.on .ip-myresult2 {display: block;}
.s3 .benefit-box .ip-myresult2>div {position: absolute; bottom: 32%; padding: 3px 3px 0; border-radius: 4px; border: 1px solid #81c5ff; background: #1d59c7; font-weight: 400; font-size: 16px; color: #fff;}
.s3 .benefit-box .ip-myresult2>div:nth-child(1) {left: 70%; bottom: 42.2%;}
.s3 .benefit-box .ip-myresult2>div:nth-child(2) {left: 75%; bottom: 33%;}

/* footer */
.footer {position: relative; padding-bottom: 103px; background: #272829;}
.footer .nav-sns {position: absolute; right: .7%; top: 59.25%; width: 12.6%; height: 12%; transform: translateY(-50%);}
.footer .nav-sns a {display: block; float: left; width: 33.333%; height: 100%;}

.footer .nav-sns.new {right: 1.25%; top: 86.9%; width: 12%; height: 6.4%;}

.btn-floating {position: fixed; left: 50%; bottom: 0; width: 100%; background: #f545ad;
  transform: translateX(-50%); opacity: 0; animation: opacityAni .8s .7s ease forwards; z-index: 99;}
.btn-floating .btn {width: 100%; text-align: center;}
.btn-floating .btn>img {max-width: 1600px;}


@keyframes bgAni1 {
  0% {transform: scale(1.05); opacity: .8;}
  100% {transform: scale(1); opacity: 1;}
}
@keyframes bgAni2 {
  0% {transform: translateY(80px); opacity: 0;}
  100% {transform: translateY(0); opacity: 1;}
}

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

@keyframes opacityAni {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes opacityAni2 {
  0% {opacity: .5;}
  100% {opacity: 1;}
}

@keyframes fadeRolling {
  0% {opacity: 1; transform: scale(1);}
  50% {opacity: .7; transform: scale(1.03);}
  100% {opacity: 1; transform: scale(1);}
}


@media (min-width: 1921px)  {
  .bg .bg1 .bg1-inner {background: url('../images/main_bg1_2000.png') top/2000px no-repeat;}
  .bg .bg2 {visibility: hidden;}
  .bg .bg2.bg-2000 {visibility: visible;}
  .s2 {background: url('../images/s2_bg_2000.png') center/2000px no-repeat, linear-gradient(to bottom, #1b6bff, #3fadff);}
  .s3 {background: url('../images/s3_bg_2000.png') top/2000px no-repeat, linear-gradient(to bottom, #40aeff, #1b6bff);}
}