@charset "utf-8";

/* pretendard 폰트*/
@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

* {
  /* rem 계산용 */
  font-size: 62.5%;

  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  margin: 0;
  padding: 0;
  list-style: none;
}

input {
  display: none;
}

main{
  margin-top: 8rem;
}
label[for='trigger'] {
  display: none;
}

.tab-menu {
  display: none;
}

/* 모바일 줄바꿈 */
.mobile_br {
  display: none;
}
/* 팝업 배경 어둡게 */
.bg{
  content: "";
  width: 100%;
  height: 100%;
  background: #00000054;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}
/* header */
header {
  background-color: #fff;
  border-bottom: 0.5px solid #ccc;
  box-sizing: border-box;
  height: 8rem;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.header-wrap {
  display: flex;
  justify-content: space-between;
  gap: 10%;
  width: 95%;
  align-items: center;
  margin: 0 auto;
}

.menu {
  display: flex;
  justify-content: space-between;
}

.menu > li{
  text-align: center;
  line-height: 4rem;
  height: 4rem;
  font-size: 1.8rem;
  margin-right: 2rem;
}
.menu > .qna{
  background-color: #13B5BB;
  border-radius: 1.5rem;
  color: #fff;
  width: 10rem;
}
.menu > .qna:hover{
  color: #13B5BB;
  border: 1px solid #13B5BB;
  background-color: #fff;
  box-sizing: border-box;
}
.mobile-menu > .qna{
  background-color: #13B5BB;
  width: 18rem;
  height: 6rem;
  text-align: center;
  line-height: 6rem;
  border-radius: 1.8rem;
  color: #fff;
  margin: 0 auto;
}
.mobile-menu > .qna:hover{
  color: #13B5BB;
  background-color: #fff;
  border: 1px solid #13B5BB;
  box-sizing: border-box;
}

.menu li:hover {
  color: #13B5BB;
  font-weight: 700;
  cursor: pointer;
}

.menu span {
  display: none;
}

/* 스크롤 top 버튼 */
#top-btn {
  display: none;
  position: fixed;
  bottom: 4rem;
  right: 4rem;
  z-index: 999;
  background-color: white;
  border: 2px solid #dbdbdb;
  outline: none;
  cursor: pointer;
  padding: 1rem;
  border-radius: 50%;
  width: 9rem;
  height: 9rem;
  font-size: 2rem;
  font-weight: 500;
  color: #333333;
}

/* main */
.main-banner {
  height: 97rem;
  background: url(../images/banner.png) no-repeat center;
  background-position: 0 0;
  background-size: cover;
  width: 100%;
  text-align: center;
}

.title h1 {
  font-size: 4.8rem;
  font-weight: bold;
  text-align: center;
  padding-top: 9.8rem;
  margin-bottom: 0.7rem;
  letter-spacing: -0.12rem;
}
.title img{
  width: 270px;
  margin-top: 2rem;
}
.title p {
  font-size: 2.2rem;
  color: #4E4E4E;
  font-weight: 600;
  margin-top: 4.1rem;
}

.banner-mockup {
  margin-top: 3.5rem;
}

.download {
  text-align: center;
  margin-top: 3.8rem;
}

.download-wrap {
  display: inline-block;
}

.download-wrap>img {
  float: left;
}

.download-wrap>img:first-child {
  margin-right: 1rem;
}


/* 업체 스와이퍼 영역 */
section:nth-child(2) {
  margin-top: 7.1rem;
  height: 42.4rem;
  background-color: #fff;
}

.shoplist-txt {
  text-align: center;
}

.shoplist-txt h1 {
  font-size: 3.6rem;
  font-weight: bold;
  margin-bottom: 0;
  letter-spacing: -0.12rem;
}

.shoplist-txt p {
  font-size: 2rem;
  font-weight: 500;
  color: #4E4E4E;
  margin-top: 0.7rem;
}

.shoplist-img {
  margin-top: 2.9rem;
}

.swiper {
  width: 120rem;
  overflow: hidden;
  margin: 0 auto;
  height: 20rem;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items: center;
}

.swiper-wrapper {
  display: flex;
  transition-timing-function: linear;
}

.swiper-slide:hover .shop {
  transform: scale(1.1);
  cursor: pointer;
}

.shop {
  width: 21.6rem;
  height: 9.3rem;
  border-radius: 2rem;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  position: relative;
}

.shop>img {
  position: absolute;
  width: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* contents */
.c-txt {
  width: 50%;
}

.c-2 .c-txt,
.c-4 .c-txt {
  text-align: right;
}

.c-txt h3 {
  font-size: 2rem;
  font-weight: bold;
  color: #13B5BB;
}

.c-txt h1 {
  line-height: 3rem;
  font-size: 2.6rem;
  font-weight: bold;
  margin-top: 1.05rem;
  letter-spacing: -0.12rem;
}

.c-txt p {
  font-size: 1.6rem;
  line-height: 2.5rem;
  color: #4E4E4E;
  margin-top: 3rem;
}

.contents,
.contents-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
}

.contents {
  width: 100%;
  height: 80rem;
  position: relative;
}

.c-1,
.c-3,
.c-5 {
  background-color: #F5F5F5;
}

.contents-wrap {
  width: 75%;
  height: 84%;
  justify-content: space-around;
  transform: translateY(5rem);
  opacity: 0;
  transition: all 1.3s;
}

.point {
  line-height: 3rem;
  background-color: #FF5A1A;
  display: inline-block;
  padding: 0 1.7rem;
  font-size: 1.4rem;
  color: #fff;
  border-radius: 1.5rem;
  margin-top: 1.56rem;
}

.motion {
  position: relative;
  height: inherit;
  overflow: hidden;
}
.motion-1{
  background-image: url(../images/motion1.gif);
}
.motion-2{
  background-image: url(../images/section3-1-2.gif);
}
.motion-1,
.motion-2{
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.motion-5{
  width: 100%;
  background-image: url(../images/review-motion.gif);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
/* section3 */
.m1-txt {
  display: flex;
  position: absolute;
  top: 80%;
  left: 18%;
  opacity: 0;
}

.m1-txt p {
  font-size: 1.6rem;
  margin-right: 2.2rem;
}

.select {
  color: #13B5BB;
  text-decoration-line: underline;
  text-decoration-thickness: 0.3rem;
  text-underline-position: under;
}

/* section8 */
.s8-bg {
  background: url(../images/리뷰배경.png) no-repeat center;
  background-position: 0 0;
  background-size: cover;
  width: 100%;
  height: 50rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s8-bg h1 {
  font-size: 3.6rem;
  color: #222;
  text-align: center;
  line-height: 5rem;
}

/* footer */
footer {
  background-color: #131313;
  padding: 4rem 0;
  position: relative;
  height: 18rem;
}

.footer-wrap {
  width: 80%;
  margin: 0 auto;
}

.footer-logo {
  text-align: center;
}

.footer-logo img {
  width: 12rem;
}

.footer-txt {
  color: #eee;
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

}

.footer-txt>p {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 200;
  margin-bottom: 2rem;
}

.footer-txt1 {
  margin-right: 2rem;
}

.footer-txt-bt{
  display: flex;
  gap: 2rem;
}

.footer-txt1>p,
.footer-txt2>p {
  font-size: 1.2rem;
  font-weight: 200;
  margin-bottom: 1rem;
}

/* 문의 팝업 */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox  */
input[type='number'] {
  -moz-appearance: textfield;
}
/* select 화살표 삭제 */
select {
  -webkit-appearance:none; /* for chrome */
  -moz-appearance:none; /*for firefox*/
  appearance:none;
}
select::-ms-expand{
  display:none;/*for IE10,11*/
}

.qna-popup input{
  display: block;
}

.close{
  width: 2.5rem;
  height: 2.5rem;
  background: url(../images/close.png) no-repeat;
  background-size: contain;
  margin: 1.5rem 1.5rem 0 0;
  position: absolute;
  right: 0;
}
.close:hover{
  cursor: pointer;
}

.qna-popup{
  z-index: 999;
  display: none;
  width: 80rem;
  height: 98rem;
  background-color: #F8F8FA;
  border: 1px solid #000;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(90%);
}
.qna-popup label{
  font-size: 1.6rem;
}
.qna-wrap{
  width: 62rem;
  /* border: 1px solid red; */
  height: 90%;
  margin: 0 auto;
}
.qna-title{
  display: flex;
  flex-flow: column;
  gap: 3.5rem;
  width: 62rem;
}
.qna-title h1{
  font-size: 3.6rem;
  margin-top: 8.4rem;
}
.qna-title h1:after{
  content: ".";
  color: #13B5BB;
  font-size: 5rem;
}
.qna-title p{
  font-size: 1.5rem;
  color: #5E5E5E;
}
.qna-input1{
  display: flex;
  justify-content: space-between;
  margin-top: 4.8rem;
}
.qna-name,
.qna-phone{
  width: 28rem;
}
.qna-name input,
.qna-phone input,
.qna-email input,
.qna-option select,
#qna-content{
  margin-top: 0.3rem;
  border: 1px solid #D3DCE6;
  height: 5rem;
  font-size: 1.6rem;
  box-sizing: border-box;
  padding-left: 1.7rem;
  width: 100%;
}
#option{
  padding-left: 1.7rem;
  background-image: url(../images/qna-option.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 4rem;
}
#option:hover{
  cursor: pointer;
}
option{
  font-size: 1.6rem;
  color: #000;
}
.qna-email,
.qna-option,
.qna-content{
  margin-top: 3.8rem;
}
.qna-name input,
.qna-phone input{
  width: 28rem;
}
.qna-option select{
  font-size: 1.6rem;
  color: #000;
}
#qna-content{
  resize: none;
  width: 62.2rem !important;
  height: 12.3rem !important;
  padding: 1.6rem 0 0 1.6rem;
}
#qna-content::placeholder{
  font-size: 1.6rem;
  color: #B7B7B7;
}
.qna-txt{
  color: #5e5e5e;
  font-size: 1.4rem;
  text-align: center;
  margin-top: 2.9rem;
}
#qna-submit{
  width: 27.6rem;
  height: 8.1rem;
  border: 3px solid #13B5BB;
  border-radius: 2rem;
  font-size: 2rem;
  font-weight: bold;
  background-color: transparent;
  color: #13B5BB;
  margin-top: 5.2rem;
  margin: 5.2rem auto 0;
}
#qna-submit:hover{
  background-color: #13B5BB;
  color: #fff;
  cursor: pointer;
}
/* 작은 pc 사이즈 & 큰 태블릿 사이즈 */
@media(max-width:1199px) and (min-width:835px) {
  .swiper {
    width: 60%;
  }

  /* 스크롤 top 버튼 */
  #top-btn {
    padding: 8px;
    width: 70px;
    height: 70px;
    font-size: 16px;
  }
}

/* 태블릿 & 모바일 사이즈 */
@media(max-width: 834px) {
  * {
    font-size: 40%;
  }

  /* header */
  header{
    height: 10rem;
  }
  .header-logo img {
    width: 18rem;
  }
  main{
    margin-top: 6rem;
  }
  .menu {
    display: none;
    position: relative;
  }

  .tab-menu {
    display: none;
    z-index: 2;
  }

  /* 햄버거 버튼 */
  label[for=trigger] {
    width: 3.8rem;
    height: 3rem;
    display: block;
    position: absolute;
    cursor: pointer;
    right: 1rem;
    margin-right: 2rem;
  }

  label[for=trigger] span {
    position: absolute;
    height: 3px;
    background-color: #000;
    width: 100%;
    transition: 0.3s;
    border-radius: 2rem;
  }

  label[for=trigger] span:nth-child(1) {
    top: 0;
  }

  label[for=trigger] span:nth-child(2) {
    top: 50%;
  }

  label[for=trigger] span:nth-child(3) {
    top: 100%;
  }

  input[id=trigger]:checked+label[for=trigger] span {
    z-index: 3;
  }

  input[id=trigger]:checked+label[for=trigger] span:nth-child(1) {
    top: 50%;
    transform: rotate(45deg);
  }

  input[id=trigger]:checked+label[for=trigger] span:nth-child(2) {
    opacity: 0;
  }

  input[id=trigger]:checked+label[for=trigger] span:nth-child(3) {
    top: 50%;
    transform: rotate(-45deg);
  }

  input[id=trigger]:checked~.tab-menu {
    display: block;
    width: 50%;
    height: 100%;
    background-color: #fff;
    position: fixed;
    right: 0;
    top: 0;
  }

  .mobile-menu {
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .mobile-menu>li {
    font-size: 2.8rem;
    margin-bottom: 4rem;
    text-align: center;
  }

  .qna-mobile{
    width: 16rem;
    height: 6rem;
    border-radius: 2rem;
    margin: 0 auto;
    line-height: 6rem;
    color: #fff;
    background-color: #13B5BB;
  }
  .qna-mobile:hover{
    background-color: #fff;
    color: #13B5BB;
    border: 1px solid #13B5BB;
    box-sizing: border-box;
  }

  /* 모바일 줄바꿈 */
  .mobile_br {
    display: block;
  }

  /* main */
  .main-banner {
    display: table;
    overflow: hidden;
    padding-bottom: 2rem;
  }

  .title img{
    transform: scale(0.8);
    margin-top: 0;
  }

  .swiper {
    width: 50%;
  }

  .banner-mockup>img {
    display: table-row;
    margin: 0 auto;
    width: 35rem;
  }

  .download-wrap {
    margin: 0 auto;
  }

  .download {
    margin: 0 auto;
    margin-top: 1rem;
  }

  .contents-wrap {
    flex-flow: column;
  }

  .contents .c-txt {
    width: 100%;
    text-align: center;
  }

  .c-1 .c-txt,
  .c-3 .c-txt,
  .c-5 .c-txt {
    order: 2;
  }

  /* 스크롤 top 버튼 */
  #top-btn {
    font-size: 100%;
    padding: 7px;
    width: 60px;
    height: 56px;
    font-size: 14px;
  }

  /* footer */
  .footer{
    position: absolute;
    padding: 2rem 0;
  }
  .footer-txt {
    font-size: 100%;
  }
  .footer-txt1,
  .footer-txt2{
    text-align: center;
  }

  /* 모바일 문의하기 */
  .qna-popup{
    width: 68rem;
    height: 110rem;
    padding: 0 2.4rem;
    box-sizing: border-box;
    font-size: 100%;
  }
  .qna-popup label{
    font-size: 2rem;
  }
  .qna-wrap{
    width: 59rem;
  }
  .qna-title{
    width: 60rem;
    gap: 2.2rem;
    text-align: center;
  }
  .qna-title h1{
    margin-top: 7rem;
    font-size: 4rem;
  }
  .qna-title p{
    font-size: 2rem;
  }
  .qna-input1{
    margin-top: 3.5rem;
  }
  .qna-email, .qna-option, .qna-content, .qna-phone{
    margin-top: 1rem;
  }
  .qna-input,
  .qna-popup input,
  #qna-content{
    width: 59rem !important;
    font-size: 2rem;
  }
  .qna-input input,
  .qna-input select{
    height: 6rem;
    margin-top: 0.5rem;
  }
  .qna-input1{
    display: block;
  }
  .qna-option select{
    font-size: 2rem;
  }
  #qna-content{
    height: 18rem !important;
    font-size: 2rem;
  }
  #qna-content::placeholder{
    font-size: 2rem;
    text-align: center;
    line-height: 14rem;
  }
  .qna-txt{
    font-size: 1.9rem;
  }
  #qna-submit{
    width: 200px !important;
    height: 50px;
    border-radius: 20px;
    font-size: 2.8rem;
  }
}

@media(min-width:416px){
  .footer-txt1,
  .footer-txt2{
    float: none;
  }
  .footer-txt1{
    margin-right: 0;
  }
}

/* 4k & 와이드 사이즈 */
@media(min-width:2000px) {
  * {
    font-size: 90%;
  }
  .banner-mockup > img{
    transform: scale(1.2);
    margin-top: 3rem;
  }
  .download-wrap {
    margin-top: 10vh;
  }
  .download-wrap > img{
    transform: scale(1.2);
  }
  .download-wrap > img:first-child{
    margin-right: 3rem;
  }
}