/* 공통 */
@import url('//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css');

:root{
    --black100: #333;
    --gray200: #6B7684;
    --gray100: #6B7684;
    --gray10: #F9FAFB;
    --gray50: #DBDBDB;
    --blue100: #3182F6;
    --red100: #F04452;
    --yellow100: #FFE000;
    --yellow50: #FFEB00;
    --darkblue100: #191F28;
    --darkblue50: #242A52;

    /* pc */
    --h0: 63px;
    --h05: 50px;
    --h1: 48px;
    --h2: 45px;
    --h3: 30px;
    
    --body0: 42px;
    --body1: 43px;
    --body2: 35px;
    --body3: 30px;
    --body3: 28px;
    --body4: 24px;
    --body5: 22px;
    --body6: 20px;
    --body7: 16px;
    --body8: 15px;
    --btn1: 24px;
    --btn2: 20px;

    /* mobile */
    --body9: 18px;
    --body10: 33px;
    --body11: 17px;
    --body12: 13px;
    
}

*{font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif'; color: var(--black100);word-break: keep-all;}
body,html{width: 100%; overflow-x: hidden;box-sizing: border-box;}
p{margin: 0;}
button{border: 0;background: none;padding: 0;}
ul li{list-style: none;}
h1,h2,h3,h4,h5,h6{margin: 0;}
a{color: var(--black100) !important;}
.inner{width: 1280px;margin: 0 auto;}
.scroll{opacity: 0;transition: all .5s ease;}
.scroll.animation {opacity: 1;}

/* .swiper-wrapper{transition-timing-function: linear;} */
.swiper-wrapper{-webkit-animation: slide 10s linear infinite; animation: slide 10s linear infinite;white-space: nowrap;}
@-webkit-keyframes slide {0%{transform: translate3d(0, 0, 0);}100% {transform: translate3d(-100%, 0, 0);}}
@keyframes slide {0%{ transform: translate3d(0, 0, 0);}100% {transform: translate3d(-100%, 0, 0);}}

/* tag */
.tag{display: inline-block; background-color: var(--blue100);border-radius: 50px;color: #fff;font-size: var(--body7);padding: 8px 17px;}

/* wave */
.wave{position: relative;}
.wave::after{content: "";position: absolute;bottom: -8px;}

/* kakao */
.kakao-btn1::before{content: "";display: inline-block;margin-right: 20px; vertical-align: middle; width: 37px;height: 37px;background: url(../image/kakao_icon.png) no-repeat center / contain;}
.kakao-btn1{transition: .3s; width: 360px;height: 86px;text-decoration: none;line-height: 86px; background-color: var(--yellow100);font-weight: bold;font-size: var(--btn1);display: flex;align-items: center;justify-content: space-between;border-radius: 50px;}
.kakao-btn1:hover{background-color: var(--yellow50);}
a.kakao-btn1{width: 402px;height: 86px;display: flex;align-items: center;justify-content: center;}

/* floating */
.floating{
    -webkit-overflow-scrolling: touch;
    z-index: 1000;
    position: absolute;
    left: 50%;
    margin-left: 640px;
    width: 128px;
    height: 58px;
    background: url(../image/consult_large_yellow_mobile.png) no-repeat center / contain;
}


/* header */
header {position: absolute;top: 0;left: 0;z-index: 1000;width: 100%;height: 100px; background: transparent; /*border-bottom: 1px solid var(--gray10); background-color: #fff; box-shadow: 0 5px 35px rgba(0, 0, 0, .1);*/ }
header .inner{ display: flex; justify-content: space-between; align-items: center;height: 100%;}
header a.logo{display: block; width: 129px;height: 60px;background: url(../image/logo1.png) no-repeat center / contain;}
header a.btn{color: #fff !important; font-size: var(--body7);width: auto;height: 41px; padding: 0 25px;line-height: 39px; text-decoration: none; border-radius: 10px;color: #fff; background:var(--blue100);transition: .3s;}
header a.btn:hover{background: var(--darkblue50);}
/* 메인 */
.main{height: 100vh; background-color: #D4E1FB;position: relative;}
.main .bg{position: absolute;left: 0;background-position: 50% 50%;background-size: cover;right: 0;top: 0; bottom: 0;width: 100%;height: 100%; background-image: url(../image/main_bg2.png);}
/* .main .bg::after{content: ""; position: absolute;left: 0;right: 0;top: 0;bottom: 0; width: 100%;height: 100%;background: linear-gradient(0.25turn, #2563EA, rgba(255,255,255,0), #2563EA);} */
.main .bg::after{content: ""; position: absolute;left: 0;right: 0;top: 0;bottom: 0; width: 100%;height: 100%;background: linear-gradient(0.25turn, rgba(255,255,255,.5), rgba(255,255,255,0),rgba(255,255,255,.5));}
.main .inner > div{z-index: 100; color: #fff; text-align: center; position: absolute; left: 50%; transform: translate(-50%, -50%);top: 50%;}
.main .inner > div h1{color: var(--black100);font-weight: bold;font-size: var(--h0);margin-bottom: 74px;}
.main .inner > div h1 span{color: var(--blue100);}
.main .inner > div p{font-weight: bold; color: var(--black100);font-size: var(--h2);margin: 0 0 20px 0;}
.main .inner > div p strong{color: var(--blue100);}
.main .inner > div a{margin: 0 auto;}
.main .arrow{width: 39px;height: 33px;position: absolute;bottom: 5%;left: 50%;transform: translateX(-50%);}
.main .wave::after{left: -3px;width: 159px;height: 14px;background: url(../image/wave1.png) no-repeat center / contain;}
.main .inner img{width: 576px;height: 182px;margin-bottom: 23px;}

/* 무료안내 */
.cont2 .inner{display: flex;align-items: center;justify-content: space-around;flex-wrap: wrap;}
.cont2 ul{margin: 0;padding: 0;}
.cont2 .full{width: 100%;text-align: center; margin-bottom: 61px;}
.cont2 .full li:nth-child(1){font-size: var(--h05);margin: 115px 0 25px 0;font-weight: bold;}
.cont2 .full li:nth-child(1) strong{color: var(--blue100);}
.cont2 .full li:nth-child(2){font-size: var(--body0);}
.cont2 .left{margin-left: 5%;}
.cont2 .right{text-align: left;margin-right: 5%}
.cont2 .right li:nth-child(odd){font-size: var(--body3);}
.cont2 .right li:nth-child(3){margin-top: 30px;}
.cont2 .right li:nth-child(even){font-size: var(--h1);}
.cont2 .right p{font-size: var(--body2);margin: 34px 0 54px 0;}
.cont2 .phone{position: relative; background:url(../image/phone.png) no-repeat center / contain; width: 464px; height: 606px;}
.cont2 .phone > div{position: absolute; left: 86px;top: 151px;font-size: var(--body7);}
.cont2 .phone > div > div{height: 188px;display: flex;flex-direction: column;justify-content: space-between;margin: 57px 0;}
.cont2 .phone > div .big{font-size: var(--body4);}
.cont2 .phone > div img.logo{width: 250px;}
.cont2 .phone > div img.kakao{width: 183px;padding: 0;}
.cont2 .wave::after{left: -5px; width: 325px;height: 8px; background: url(../image/wave2.png) no-repeat center / contain;}
.cont2 .mobile{display: none;}

/* 환급대상 */
.cont3{background-color: var(--gray10);}
.cont3 .inner{padding: 200px 0; display: flex;align-items: center;justify-content: space-around;}
.cont3 .inner div:nth-child(2){width: 464px;}
.cont3 .inner img{width: 93px;height: 45px;}
.cont3 .inner .box{width: 391px; height: 299px; box-shadow: 0 3px 35px rgba(0, 0, 0, .1); border-radius: 30px; padding: 55px 62px;display: flex;flex-direction: column;justify-content: space-between;}
.cont3 .inner .box p{font-size: var(--h3);}
.cont3 .inner .box p strong{font-size: var(--h1);}
.cont3 .inner .right li:nth-child(1){color: var(--blue100);font-weight: bold;font-size: var(--body4);}
.cont3 .inner .right li:nth-child(2){margin: 38px 0 64px 0;font-size: var(--body3);}
.cont3 .wave::after{left: -10px; width: 191px; height: 6px; background: url(../image/wave3.png) no-repeat center / contain;}

/* bg */
.cont4{background-color: #0A0A0C;width: 100%;height: 573px;position: relative;}
.cont4 li{font-size: var(--body5)}
.cont4 h1{font-size: var(--h1);}
.cont4 .bg{background-attachment: fixed !important;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: url(../image/bg_full2.png) no-repeat center / cover;}
.cont4 ul{position: absolute; left: 50%; top: 50%;text-shadow: 1px 1px 6px black; transform: translate(-50%,-50%);text-align: center;}
.cont4 ul li img{width: 199px;height: 95px;}
.cont4 ul li,
.cont4 ul li strong{color: #fff;}

/* FAQ */
.cont5{background-color: var(--gray10);}
.cont5 .inner {display: flex;align-items: center;justify-content: center;}
.cont5 .inner > div{width: 770px;padding: 111px 0;}
.cont5 .inner > div h1{text-align: center;margin-bottom: 47px;font-weight: bold;font-size: var(--h2);}
.cont5 .inner > div ul{margin: 0;padding: 0;}
.cont5 .inner > div ul li{margin-bottom: 20px;background-color: #fff;padding: 35px 35px;border-radius: 30px;box-shadow: 0 3px 35px rgba(0,0,0,.1);}
.cont5 .inner > div ul li:last-child{margin-bottom: 0;}
.cont5 .inner > div ul li p:first-child{font-size: var(--btn2);font-weight: bold;}
.cont5 .inner > div ul li p:last-child{font-size: var(--body7)}

/* logo */
.cont6{padding: 30px 0;}
.cont6 .swiper-wrapper{display: flex;align-items: center;}
.cont6 .swiper-wrapper > div h1{text-align: center;}

/* footer */
footer{padding: 45px 0; background-color: var(--darkblue100);display: flex;align-items: center;justify-content: space-between;}
footer .inner{display: flex;align-items: center;justify-content: space-between;}
footer ul{margin-left: 0;padding-left: 0;}
footer li,
footer button{color: var(--gray100);}
footer button{margin: 0;padding: 0;}
footer .left ul li img{width: 70px;}
footer .left > ul > li:nth-child(2){margin: 52px 0 37px 0;}
footer .left > ul > li:nth-child(3){margin-bottom: 37px;}
footer .left ul li > ul {display: flex;align-items: center;}
footer .left ul li > ul li:first-child{margin-right: 11px;}

/* 반응형 */
@media (max-width: 1619px){
    /* floating */
    .floating{
        margin-left: 30%;
    }
}
@media (max-width: 1299px){
    .inner{width: 100%;}
    a.kakao-btn1{width: 260px;font-size: var(--body7);height: 51px;}
    .kakao-btn1::before{margin-right: 4px;}
    
    header .inner {padding: 0 20px;}
    
    .main .inner > div h1{font-size: var(--body2);line-height: 54px;}
    .main .inner > div p{font-size: var(--body4); margin: 0 0 25px 0;}
    .main .inner > div a{margin: 0 auto;}
    .main .wave::after{left: -11px;width: 101px;height: 6px;bottom:-5px;background: url(../image/wave1_m.png) no-repeat center / contain;}
    .main .inner img{width: 100%;height: 100%; margin-bottom: 50px;}
    .main .inner > div h1{margin-bottom: 50px;}


    .cont2 .full li:nth-child(1){font-size: var(--body3);}
    .cont2 .mobile{display: block;font-size: var(--body6);}
    .cont2 .pc{display: none;}
    .cont2 .wave::after{left: -5px; width: 151px;height: 5px; background: url(../image/wave2.png) no-repeat center / contain;}
    .cont2 .right li:nth-child(odd){font-size: var(--body5);}
    .cont2 .right li:nth-child(even){font-size: var(--body2);}
    .cont2 .right p{font-size: var(--body3);}
    
    .cont4 ul{margin: 0; padding: 0;width: 100%;}
    .cont4 h1{font-size: var(--body2);}
    .cont4 li{font-size: var(--body5);}

    .cont5{padding: 0 20px;}
    .cont5 .inner > div h1{font-size: var(--body0)}

    footer .inner{flex-direction: column; width: 90%;align-items: flex-start;}

}
@media (max-width: 1183px){
    .cont2 .right{text-align: center;margin: 0 auto;padding: 70px 0;}
    .cont2 .right a{margin: 0 auto;}
    .cont2 .phone{background-position: top;}

}
@media (max-width: 660px){
    header a.logo{width: 62px;}
    header a.btn{padding: 0 15px;}
    
    .floating{width: 90px;}
    
    .main .bg{background-position: 43%;}
    .main .inner > div{top: 48%;}

    .cont2 .phone > div img.kakao{width: 147px;}
    .cont2 .right p{font-size: var(--body5);}
    
    .cont4{height: 345px;}
    .cont4 .bg{background-position: top;}
    .cont4 h1 {font-size: var(--body3);}
    .cont4 li {font-size: var(--body7);}
    .cont4 li strong{font-weight: normal;}

    .cont5 .inner > div h1{font-size: var(--body3);}
    .cont5 .inner > div ul li p:first-child{font-size: var(--body7);}

    .cont4 ul{width: 90%;}

    footer li{font-size: var(--body12);}

}
@media (max-width: 435px){
     /* floating */
     .floating{
        margin-left: 23%;
    }

    .main .inner > div{top: 50%;}
    .main .inner > div h1{margin-bottom: 33px;}
    
    .cont2 .phone > div .big{font-size: var(--body6);}
    .cont2 .phone > div > div{margin: 39px 0;}
}
@media (max-width: 435px){
    .cont2 .full li:nth-child(1){padding: 0 20px;margin: 63px 0 25px 0;}
    .cont2 .phone{height: 548px;}
    .cont2 .phone > div{left: 82px;top: 113px;}
    .cont2 .phone > div > div{margin: 20px 0;}
    .cont2 .phone > div img.logo{width: 194px;}
    .cont2 .right{padding: 35px 0 70px 0;}
    .cont2 .right p{padding: 0 20px;}

}