@charset "UTF-8";

.blue{color: #0b7cb7}
.bg{max-width: 100%; background: #6ec8da;}
.inner{max-width: 1920px; margin: 0 auto;}

.header{ position: absolute; top: 0; left: 0; z-index: 100; width: 100%; min-height: 130px; margin: 0 auto; }
.header .inner{display: flex; align-items: center; justify-content: space-between; min-height: 130px; padding: 0 clamp(24px, 4vw, 70px); box-sizing: border-box;}
.logo{flex: 0 0 auto;}
.logo img{display: block; max-width: clamp(150px, 14vw, 245px); height: auto;}
.menu{display: flex; align-items: center; gap: clamp(28px, 5vw, 95px); margin: 0; padding: 0; font-weight: 600; font-size: 1.5em; line-height: 1.2; color:#007BB7}
.menu a{position: relative; display: inline-block;}
.menu .won:after{position:absolute; content:""; right:-18px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background-color:#70C7D9;}
.menu>li{float: none; padding-right: 0; white-space: nowrap;}
.menu:after{display: block; content: ""; clear: both;}
.menu a:hover { color: #70C7D9; }

.price-callout{display: block; position: absolute; z-index: 110; width: auto; padding: 6px 13px 7px; overflow: visible; border-radius: 18px; background: #808080; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; pointer-events: none; opacity: 0;}
.price-callout.is-ready{opacity: 1;}
.price-callout span{display: inline-block; vertical-align: middle; line-height: 1;}
.price-callout .price-callout-tail{display: block; position: absolute; left: var(--tail-left, 50%); top: -8px; width: 0; height: 0; padding: 0; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 9px solid #808080;}
.price-callout .price-callout-dot{padding: 0 4px;}

@media (max-width: 900px) {
  .header{min-height: 96px;}
  .header .inner{min-height: 96px; padding: 0 24px;}
  .menu{gap: 28px; font-size: 1.25em;}
  .logo img{max-width: 160px;}
}

.intro{ position: relative; width: 100%; height: 100%; }
.intro ul li{font-size: 4.5em; text-align: center; font-weight: 900; color: #666666; padding-top: 10px;}

.logo1 { position: absolute; top:1%; right: 11.3%; animation: motion 0.8s linear 0s infinite alternate; }
.logo2 { position: absolute; top: 20%; animation: motionre 2s linear 0s infinite alternate; }
.logo3 { position: absolute; top: 50%; right:3%; animation: motionre 3s linear 0s infinite alternate; margin-top: 0; }
@keyframes motion {
  0% {margin-top: 0px;}
  100% {margin-top: 10px;}

}
@keyframes motionre {
  0% {margin-top: 0px;}
  100% {margin-top: 50px;}

}

.intro .slide { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 100%; text-align: center; overflow: hidden; }
.intro .slide .tt {color: #6ec8da; font-weight: 500; font-size: 1.1em; letter-spacing: 0.5em; text-align: center; }
.intro .slide p { font-size: 70px; font-weight: 700; }
.intro .slide i{ position: relative; font-weight: 700; }
.intro .slide i:before{ content: ""; position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: 35px; background: #6ec8da; }
.intro .slide.slide-a .slide-a-child {
  transform: translateY(50px);
  opacity: 0;
  transition: all 1s;
}
.intro .slide.slide-a .slide-a-child.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.intro .slide.slide-b p:nth-of-type(1) {
  transform: translateX(-50px);
}
.intro .slide.slide-b p:nth-of-type(2) {
  transform: translateX(50px);
}
.intro .slide.slide-b p:nth-of-type(3) {
  transform: translateX(-50px);
}
.intro .slide.slide-b p:nth-of-type(4) {
  transform: translateX(50px);
}

.marketing{width: 100%; padding-top: 200px; }
.marketing .bg{height: 590px;}
.marketing .inner{position: relative;}
.cont{max-width: 70%; margin: 0 auto;}
.txt{color: #fff; padding: 160px 0}
.txt h3{font-size: 2em; font-weight: 600; padding-bottom: 10px;}
.txt h1{font-size: 3.5em; padding-bottom: 30px; font-weight: 700;}
.txt h1>img{vertical-align: middle;}
.txt p{font-size: 1.5em; line-height: 2.5em;}
.txt p>span{font-size: 1.5em; font-weight: 600;}
.t_right{text-align: right; }

.sns{position: absolute; z-index: 1; right: 10%; top: -60px; }
.mobile{position: absolute; z-index: 1; left: 15%; top: -50px;}
.blog{position: absolute; z-index: 1; right: 0; top: -30px;}
.cafe{position: absolute; z-index: 1; left: 12%; bottom: -30px;}

.qanda{width: 100%; padding-top: 200px; color: #fff; }
.qanda .bg{height: 900px;}
.qanda .inner{margin: 0 auto; padding-top: 100px;}
.qanda .inner>div{max-width: 70%; margin: 0 auto; position: relative; }
.qanda .inner>div>div:first-child{ position: relative; width: 220px; height: 54px; background: #fff; color: #6ec8da; font-size: 3em; font-weight: 600; text-align: center; line-height: 54px;}
.qanda .inner>div>div:first-child:before{content: ""; position: absolute; top: 0; right: -54px; border-bottom: 54px solid #fff; border-right: 54px solid transparent; }
.qanda .inner>div>p{font-size: 3.3em;}
.qanda .inner>div>p>span{font-size: 1.4em; font-weight: 500;}
.qanda .inner>div>p>span:last-child{font-weight: 800;}
.qa{position: absolute; right: 50px; top: -70px;}

.gray1{width: 400px; height: 50px; background: #666666; padding-left: 20px; border-radius: 100px; margin-bottom: 40px; font-size: 1.2em; line-height: 50px;}
.gray2{width: 320px; height: 50px; background: #666666; padding-left: 20px; border-radius: 100px; margin-bottom: 40px; font-size: 1.2em; line-height: 50px;}
.white{width: 520px; height: 80px; background: #fff; padding: 15px 30px 0px 0; border-radius: 100px; text-align: right; margin: 0 0 40px 50px; font-size: 1.2em;}
.white2{width: 520px; height: 100px; background: #fff; padding: 15px 30px 0px 0; border-radius: 100px; text-align: right; margin: 0 0 40px 50px; font-size: 1.2em;}
.question{padding-top: 100px;}
.question p{color: #666666; padding-left: 20px;}
.q_left{float: left;}
.q_right{float: right;}
.question>div:after{display: block; content: ""; clear: both;}

.partner { text-align: center; }
.partner h1{font-size: 5em; color: #6ec8da; text-align: center; font-weight: 600; padding-top: 180px;}
.partner p{font-size: 1.5em; color: #7b7b7b; text-align: center; padding-top: 10px;}
.partner div { padding: 20px 0 0 0; }

.proc{width: 100%;}
.proc .inner{height: 500px; position: relative;}
.proc h1{font-size: 5em; color: #6ec8da; text-align: center; font-weight: 600; padding-top: 180px;}
.proc p{font-size: 1.5em; color: #7b7b7b; text-align: center; padding-top: 10px;}
.logo4{position: absolute; top: 70px; left: 70px;}
.logo5{position: absolute; top: 20px; right: 360px;}

.step{width: 100%;}
.step .bg{ padding: 5% 5%;}
.step ul li p{ display: inline-block; position: relative; height: 28px; padding: 0 10px; font-size: 1.2em; font-weight: 600; line-height: 28px; color: #6ec8da; background: #fff;}
.step ul li p:before{content: ""; position: absolute; top: 0; right: -28px; border-bottom: 28px solid #fff; border-right: 28px solid transparent; }
.step ul li h4 {font-size: 1.7em; font-weight: 700; padding: 10px 0;}

.survey { position: relative; padding: 170px 0; }
.survey .tt { text-align: center; }
.survey h4 { padding: 30px 0; font-size: 30px; }
.survey p { padding: 0 0 30px 0; font-size: 25px; }
.survey ul{ max-width: 550px; margin: 0 auto; }
.survey li { padding: 5px 0; }
.survey .logo6{position: absolute; top: 0; right: 50px;}
.survey .logo7{position: absolute; top: 200px; left: 10px;}
.survey .logo8{position: absolute; bottom: 170px; right: 110px;}
.survey input[type="submit"] { height: 50px; font-size: 1.2em; }
.survey span { cursor: pointer; position: }

footer{ padding: 30px 0; border-top: 2px solid #6ec8da; background: #e8f8f9; text-align: center; font-size: 0.9em; font-weight: 400; }
footer span{font-size: 0.8em;}