@charset "utf-8";
@import url(font.css);
@import url(all.css);
@import url(reset.css);
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    font-family: "Pretendard-Regular";
    font-size: 16px;
    color: #333;
    background-color: #9777ba;
  }
  .wrap{
    width: 100%;
    height: 100%;
    
  }
 
.bottom-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 3%;
    position: relative;
    margin-top: -7%;
  
}
.bottom-visual > a {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width:25%;
  gap: 0;
 
}
    .visual-2{
      width: 80%;
      margin: 0 auto;
      padding-top: 15%;
      padding-bottom: 15%;
      position: relative;
    }
    .visual-inner2{
    
      text-align: center;
      /* margin-top: 4%; */
      font-size: 5.5rem;
      font-weight:300;
      justify-content: center;

    }
    
  .visual-inner2 > h1{
    font-family: var(--font-secondary);
    font-weight: 100;
     color: var(--color-default);
  }
    .visual-phone{
      display: flex;
      align-items: center;
      position: relative;
      width: 100%;
      justify-content: center;
      gap: 0;
    }
    .phone-inner{
      width: 100%;
    }
    #visual-2-phone{
     width:75%;
     align-items: center;
     padding:5%;
     margin: 0 auto;
     display: flex;
    }
    .phone-logo{
      width: 100%;
    }
    .vs-2-mandoo{
      width: 100%;
    }
    .mandoo-logo2{
      width: 100%;
      height: 100%;
    }
    #mandoo-logo-2{
width: 100%;
height: 100%;

    }
    .mandoo-write{
      width: 100% ;
      text-align: center;
      color: white;
      font-size: 1.3rem;
      line-height: 120%;
    }
    .mandoo-write > h3{
      width: 100% ;
    }
    .visual-3{
      width: 100%;
      margin: 0 auto;
      padding: 5%;
      position: relative;
      background-color:#ECE6F0;
    }
    /* .visual-inner3 > h1{
      font-family: 'OTEnjoystoriesBA';
      color: #9777ba;
      text-align: center;
  
      font-size: 5.5rem;
      font-weight:300;
    } */
    .visual-4{
      width: 100%;
    
    }
    .visual-4-wrap{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5rem;
      margin-top: 5%;
      margin-bottom: 5%;
    }
    .mandoo-logo-bt{
     width:14vw;
    
    }
   
    .mandoo-logo-bt > img {
      margin-left: 15%;
      width: 70%;
  }
    .visual4-wt > h1{
      font-family: var(--font-secondary);
    font-weight: 100;
      color: white;
      text-align: center;
      /* margin-top: 4%; */
      font-size: 5.5rem;
  
      justify-content: center;
    }
    .button-wrap{
      width: auto;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .bt-1 >img,.bt-2 >img{
      width: 15vw;
      height: auto;
    }
   /* footer */
  .ft-sd {
    position: relative; /
    width: 100%; 
    margin: 0; 
    padding: 0; 
   
}

.footer {
    background-color: #ffffff; /
    margin: 0; 
    padding: 0;
}

/* footer 내 요소 스타일 */
.footer-wrap {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    padding: 20px;
    align-items: flex-start;
}

.footer-left{
    display: flex;
    flex-direction: column;
    margin-left: 3%;
}
.ft-img{
  width: 40%;
}



.naver , .instagram , .facebook{
  width: 35px;
}
.tel h3, .copyright h3 {
    margin: 0; 
    padding: 0; 
}

.ft-sd img {
    width: 100%; 
    height: auto; 
    display: block;
}
  
.footer-right{
  display: flex;
  gap: 10%;
  margin-right: 3%;
 
}
.footer-left > div {
  display: block;
  margin-bottom: 10%; 
}
.tel{
  line-height: 150%;
  color: #9777ba;
}

.tel p{
    color: #9777ba;
}
.copyright{


  color: #9777ba;
  font-weight: 600;
}

.use-agree a{
    color: #9777ba;
    font-size: 0.9rem;
}

.use-agree > a:nth-child(2){
    margin-left: 2rem;
}
.use-agree-cont { margin-left:10%; margin-right:10%;}
.use-agree-cont ul { margin-top: 2rem; margin-bottom:2rem;}
.use-agree-cont li { font-size: .75rem; line-height: 1.3rem; margin-left: 1rem; margin-right:1rem;}
.use-agree-cont li b { margin-left: -1rem; margin-right: -1rem; line-height: 3rem; font-size:1rem; font-weight:800; }

@media (max-width:767px){
    .use-agree-cont li b {line-height: 1rem;}
}