/* Common */
.section {
  padding:120px 0px;
}

.section-title {
  font-size:4.4rem;
  font-weight:700;
  line-height:1;
  margin-bottom:40px;
}

.section-subtitle {
  font-size:2rem;
  margin-bottom:80px;
}

.section-essential {
  font-size:1.6rem;
  line-height: 1.8;
  color:#999999;
}

.section-essential span {
  color:#1d1d56;
}

@media (max-width:1200px) {

  .section-title {
    font-size:3rem;
    margin-bottom:28px;
  }

  .section-subtitle {
    font-size:1.8rem;
    margin-bottom:60px;
  }

  .section-essential {
    font-size:1.5rem;
  }

}
@media (max-width:1024px) {

  .section {
    padding:80px 0px;
  }

}
@media (max-width:768px) {

  .section {
    padding:60px 0px;
  }

  .section-title {
    font-size:2.2rem;
    margin-bottom:20px;
  }

  .section-subtitle {
    font-size:1.6rem;
    margin-bottom:40px;
  }

  .section-essential {
    font-size:1.4rem;
  }

}
@media (max-width:500px) {


}


/* Brand */
.section--brand {
  text-align: center;
  padding:120px 0px 160px;
}

.section--brand .brand {
  display: -ms-flexbox;
  display: flex;
}

.section--brand .brand__left,
.section--brand .brand__right {
  flex:1 1 50%;
  max-width:50%;
  position: relative;
}

.section--brand .brand__left::after {
  content:"";
  display:block;
  position: absolute;
  top:40px;
  left:40px;
  width:100%;
  height:0;
  padding-top:calc(500/680*100%);
  background-color:#1d1d56;
}

.section--brand .swiper-container {
  height:100%;
}

.section--brand .swiper-wrapper {
  height:100%;
}

.section--brand .swiper-slide {
  height:100%;
  overflow: hidden;
}

.section--brand .thumb {
  position: relative;
  width:100%;
  height:0;
  padding-top:calc(500/680*100%);
  overflow:hidden;
  background-color: #fff;
}

.section--brand .thumb__img {
  width:100%;
  height:100%;
  position: absolute;
  top:50%;
  left:50%;
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section--brand .brand__right {
  padding:100px 0px 0px 7%;
}

.section--brand .text {
  text-align: left;
}

.section--brand .text p {
  font-size:1.8rem;
  line-height:1.8;
  margin-bottom:40px;
}

.section--brand .text p:last-child {
  margin-bottom:0px;
}

.section--brand .text p.text__tit {
  display: inline-block;
  position: relative;
  font-size: 2.4rem;
  font-weight:700;
  line-height:1.4;
  padding:0px 40px;
  margin-bottom:50px;
}

.section--brand .text p.text__tit::before,
.section--brand .text p.text__tit::after {
  content:"";
  display: block;
  position: absolute;
  width:22px;
  height:17px;
  background-size:auto 17px;
  background-repeat: no-repeat;
  background-position: center;
}

.section--brand .text p.text__tit::before {
  top:0;
  left:0;
  background-image: url('/child/img/sub/brand/section-brand-mark1.png');
}

.section--brand .text p.text__tit::after {
  bottom:0;
  right:0;
  background-image: url('/child/img/sub/brand/section-brand-mark2.png');
}

@media (max-width:1200px) {

  .section--brand .brand__left::after {
    top:28px;
    left:28px;
  }

  .section--brand .brand__right {
    padding:60px 0px 0px 7%;
  }

  .section--brand .text p {
    font-size:1.6rem;
    margin-bottom:28px;
  }

  .section--brand .text p.text__tit {
    font-size:2rem;
    margin-bottom:36px;
  }

}
@media (max-width:1024px) {

  .section--brand {
    padding:80px 0px;
  }

  .section--brand .brand {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .section--brand .brand__left,
  .section--brand .brand__right {
    flex:1 1 100%;
    max-width:100%;
  }

  .section--brand .brand__left::after {
    display: none;
  }

  .section--brand .brand__right {
    padding:60px 0px 0px;
  }

}
@media (max-width:768px) {

  .section--brand {
    padding:60px 0px;
  }

  .section--brand .brand__right {
    padding:40px 0px 0px;
  }

  .section--brand .text p {
    font-size:1.5rem;
    margin-bottom:20px;
  }

  .section--brand .text p.text__tit {
    font-size:1.8rem;
    padding: 0px 28px;
    margin-bottom:26px;
  }

  .section--brand .text p.text__tit::before,
  .section--brand .text p.text__tit::after {
    width:18px;
    height:12px;
    background-size:auto 12px;
  }

}
@media (max-width:500px) {

  .section--brand .text p.text__tit {
    padding: 0px 20px;
  }

  .section--brand .text p.text__tit::before,
  .section--brand .text p.text__tit::after {
    width:13px;
    height:10px;
    background-size:auto 10px;
  }

}


/* Reserve */
.section--reserve {
  text-align:center;
}

.section--reserve .reserve {
  background-color: #f8f8f8;
  padding:80px 20px;
}

.section--reserve .reserve-inner {
  max-width:768px;
  width:100%;
  margin:0 auto;
}

@media (max-width:1200px) {

}
@media (max-width:1024px) {
  .section--reserve .reserve {
    padding:60px 20px;
  }
}
@media (max-width:768px) {

  .section--reserve .reserve {
    padding:40px 10px;
  }

}
@media (max-width:500px) {

}


/* Guide */
.section--guide {
  text-align: center;
}

.section--guide .guide__service {
  position: relative;
  padding:80px 0px;
}

.section--guide .guide__service::after {
  content:"";
  display:block;
  background-color: #f8f8f8;
  width:100vw;
  height:100%;
  position: absolute;
  top:0;
  left:50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index:-1;
}

.section--guide .guide-contitle {
  font-size:2.8rem;
  font-weight:700;
  margin-bottom:40px;
}

.section--guide .guide__stap {
  margin-top:120px;
}

.section--guide .lists {
  display:-ms-flex;
  display:flex;
  margin:-40px -30px;
}

.section--guide .lists li {
  flex:1 1 33.33%;
  padding:40px 30px;
  position: relative;
}

.section--guide .lists li::after {
  content:"";
  display:block;
  position: absolute;
  top:50%;
  right:-12px;
  width:23px;
  height:23px;
  background-size:auto 23px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('/child/img/main/section-guide-arrow.png');
}

.section--guide .lists li:last-child::after {
  display:none;
}

.section--guide .card {
  height:100%;
  padding:60px 40px 50px;
  background-color: #fff;
  box-shadow: 6px 7px 21px 0px rgba(0, 0, 0, 0.05);
  position: relative;
}

.section--guide .card__pin {
  font-size:2rem;
  font-weight:500;
  line-height:1;
  color:#fff;
  text-align: center;
  width:calc(100% - 100px);
  position: absolute;
  top:-25px;
  left:50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius:50px;
  padding:15px 10px;
  background-color: #1d1d56;
}

.section--guide .card__pin2 {
  background-color:#58b349;
}

.section--guide .card__tit {
  font-size:2rem;
  font-weight:700;
  line-height:1;
  margin:40px 0px 20px;
}

.section--guide .card__txt {
  font-size:1.6rem;
  line-height:1.7;
}

.section--guide .section-essential {
  text-align: right;
  margin-top:40px;
}

@media (max-width:1200px) {

  .section--guide .guide-contitle {
    font-size:2rem;
    margin-bottom:28px;
  }

  .section--guide .card__pin {
    font-size:1.8rem;
    width:calc(100% - 60px);
  }

  .section--guide .card__tit {
    font-size:1.8rem;
    margin:28px 0px 10px;
  }

  .section--guide .card__txt {
    font-size:1.5rem;
  }

  .section--guide .section-essential {
    margin-top:28px;
  }

}
@media (max-width:1024px) {

  .section--guide .guide__service {
    padding:60px 0px;
  }

  .section--guide .guide__stap {
    margin-top:80px;
  }

  .section--guide .lists {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin:-28px -22px;
  }

  .section--guide .lists li {
    /* flex:1 1 50%; */
    padding:28px 22px;
  }

  /* .section--guide .lists li::after {
    display: none;
  } */

  .section--guide .card {
    padding:40px 28px 36px;
  }

}
@media (max-width:768px) {

  .section--guide .guide__service {
    padding:40px 0px;
  }

  .section--guide .guide__service img {
    content:url('/child/img/sub/guide/section-guide-img-mo.png');
  }

  .section--guide .guide__stap {
    margin-top:60px;
  }

  .section--guide .lists {
    margin:-10px -8px;
  }

  .section--guide .lists li {
    flex:1 1 100%;
    padding:10px 8px;
  }

  .section--guide .lists li::after {
    display: none;
  }

  .section--guide .card {
    padding:48px 20px 26px;
  }

  .section--guide .card__pin {
    font-size:1.6rem;
    padding:8px 6px;
    width:100%;
    border-radius:0px;
    top:0;
  }

  .section--guide .card__tit {
    font-size:1.6rem;
    margin:20px 0px 6px;
  }

  .section--guide .card__txt {
    font-size:1.4rem;
  }

  .section--guide .section-essential {
    margin-top:20px;
  }

}
@media (max-width:500px) {

  .section--guide .lists {
    margin:-5px 0px;
  }

  .section--guide .lists li {
    padding:5px 0px;
  }

}


/* Board */
.section--board {
  text-align:center;
}


/* Member */
.section--member {
  text-align:center;
}

.section--member .member {
  text-align: left;
  border:1px solid #e5e5e5;
  padding:20px;
}

.section--member .member * {
  font-size:1.4rem;
}


@media (max-width:768px) {
  .section--member .member {
    padding:12px;
  }

  .section--member .member * {
    font-size:1.2rem;
  }
}


/* Contact */
.section--board .contact-guide {
  text-align: left;
  border:1px solid #d8d3d0;
  padding:30px;
  margin-bottom:40px;
}

.section--board .contact-guide p {
  font-size:1.6rem;
  color:#999;
}

.section--board .contact-guide p.contact-guide__tit {
  font-weight:700;
  color:#222;
}

.section--board .contact-guide ul {
  margin:10px 0px;
}

.section--board .contact-guide li {
  font-size:1.6rem;
  padding:2px 0px;
}

@media (max-width:1200px) {
  .section--board .contact-guide p {
    font-size:1.5rem;
  }

  .section--board .contact-guide li {
    font-size:1.5rem;
  }
}
@media (max-width:1024px) {
  .section--board .contact-guide {
    padding:22px;
    margin-bottom:28px;
  }
}
@media (max-width:768px) {
  .section--board .contact-guide {
    padding:16px;
    margin-bottom:20px;
  }

  .section--board .contact-guide p {
    font-size:1.3rem;
  }

  .section--board .contact-guide li {
    font-size:1.3rem;
  }
}

@media (max-width:500px) {
  .section--board .contact-guide {
    padding:12px;
    margin-bottom:16px;
  }
}


/* 20240610 개인결제 페이지가 추가 되었습니다. */
.section--personal .section-title {
  text-align: center;
  margin-bottom:80px;
}

@media (max-width:1200px) {
  .section--personal .section-title {
    margin-bottom:60px;
  }
}
@media (max-width:1024px) {

}
@media (max-width:768px) {
  .section--personal .section-title {
    margin-bottom:40px;
  }
}
@media (max-width:500px) {
  .section--personal .section-title {
    margin-bottom:28px;
  }
}