html, body {
  width:100%;
  overflow-x: hidden;
}

body {
  color:#222;
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  word-break: keep-all;
  
}


span.text-color-gray {color:#bd8451}
span.text-color-green {color:#1ea987}
span.text-color-blue {color:#635fb4}
span.text-color-purple {color:#635fb4}

span.nowrap {white-space:nowrap}

#top > .hero {
  background: url("../img/web/top_vs.png") no-repeat center;
  background-size: cover;
  overflow: hidden;
  position: relative;
  z-index: 0;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  border-bottom:8px solid;
  border-image:linear-gradient(90deg, #d19f6a 0%, #f4c93f 50%, #3db286 100%);
  border-image-slice: 1;
		
}

#top > .hero > .hero_inner {
  margin-top:90px;
  margin-left:90px;
  margin-right:90px;
  min-height: 520px;
  letter-spacing:-2px;
}

#top > .hero > .hero_inner > p {
  margin-bottom:0;
  -webkit-transform: matrix(0.93128, 0, 0, 0.93128, 0, 0);
          transform: matrix(0.93128, 0, 0, 0.93128, 0, 0);
}
#top > .hero > .hero_inner > .desc_1, #top > .hero > .hero_inner > .desc_3 {
  font-size:47px;
  line-height:60px;
}
#top > .hero > .hero_inner > .desc_2 {
  font-size:60px;
  line-height:80px;
  margin-bottom:10px;
  letter-spacing:-3px;
}
#top > .hero > .hero_inner > .desc_3 {
  margin-bottom:20px
}
#top > .hero > .hero_inner > .desc_4 {
  font-size:26px;
  font-weight:300;
}
#top > .hero > .hero_inner > .desc_5 {
  padding-top:30px;
}
.cust_btn {
  position:relative;
  display:inline-block;
  width:172px;
  height:50px;
  font-size: 15px;
  letter-spacing: -1px;
  line-height:50px;
  padding-left:48px;
  padding-right:10px;
  background-color:#f1fdff;
  border:1px solid;
  border-image:linear-gradient(0deg, #d19f6a 0%, #3db286 100%);
  border-image-slice: 1;
}
.cust_btn:after {
  position:absolute;
  content:"";
  left:30px;
  top:23px;
  width:5px;
  height:5px;
  background-color:#3fc52e;
  border-radius:3px
}
.cust_btn:before {
  position:absolute;
  content:"";
  left:20px;
  top:23px;
  width:5px;
  height:5px;
  background-color:#377fcf;
  border-radius:3px
}




.cust_btn_2 {
  display:inline-block;
  background-color:#635fb4;
  color:#fff;
  font-size:30px;
  width:180px;
  height:60px;
  line-height:60px;
  text-align:center;
  border-radius:12px;
}



.check_wrap {display: inline-block;width:24px;height:32px;vertical-align: middle;margin-right:4px}
.check_wrap > .form-check-input {
  display: none;
}
/* off */
.check_wrap > .form-check-input+label{ 
  background-repeat: no-repeat; /* 반복 방지 */
  background-image: url('../img/web/check_off.png'); /*off 이미지*/
}
/* on */
.check_wrap > .form-check-input:checked+label{
  background-repeat: no-repeat; /* 반복 방지 */
  background-image: url('../img/web/check_on.png'); /*on 이미지*/
}
.check_wrap > label{
    display: inline-block;
    width:24px;
    height:24px;
}


  .arrow_img {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    vertical-align: middle;
  }

  .arrow_img:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height:20px;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
    margin-top: 2px;
    border-top: 2px solid #333;
    border-left: 2px solid #333;
  }
  .arrow_img.top:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }            
  .arrow_img.down:before {
    transform: translate(-50%, -50%) rotate(-135deg);
  }
  .arrow_img.left:before {
    transform: translate(-50%, -50%) rotate(315deg);
  }      
  .arrow_img.right:before {
    transform: translate(-50%, -50%) rotate(135deg);
  }
  
  
#contents-1 {position:relative}

#contents-1 > .tab-1 > .img_wrap_1 {position:absolute;width:420px;top:60px;right:40px}
#contents-1 > .tab-1 > .img_wrap_1 > div {padding:0 40px}
#contents-1 > .tab-1 > .img_wrap_1 > div > img {width:230px;}
#contents-1 > .tab-1 > .img_wrap_1 > .img_1 {text-align:right}
#contents-1 > .tab-1 > .img_wrap_1 > .img_2 {text-align:left}

#contents-1 > .tab-1 > .desc_1 {font-size:22px;line-height:30px;letter-spacing:-2px;padding-top:70px;padding-right:300px}
#contents-1 > .tab-1 > .desc_2 {font-size:56px;line-height:62px;padding-top:30px;padding-bottom:220px;margin-bottom:0;background: url("../img/web/baby_img.png") no-repeat left bottom;
}

#contents-1 > .tab-2 > .row {position:relative;margin-bottom:40px;padding:0 50px}
#contents-1 > .tab-2 > .row:after {  content: "";
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  position: absolute;
  bottom: -34px;
  left: 50%;
  padding-left: -8px}
#contents-1 > .tab-2 > .row > div > .num_img {width:120px}
#contents-1 > .tab-2 > .row_1 {background-color:#fdf2e9}
#contents-1 > .tab-2 > .row_1:after {border-top: 26px solid #d2beae}
#contents-1 > .tab-2 > .row_2 {background-color:#f0f2ec}
#contents-1 > .tab-2 > .row_2:after {border-top: 26px solid #b1b7a4}
#contents-1 > .tab-2 > .row_3 {background-color:#f0fee7}
#contents-1 > .tab-2 > .row_3:after {border-top: 26px solid #9abc84}
#contents-1 > .tab-2 > .row_4 {background-color:#e4edec}

#contents-1 > .tab-2 > .row > div > .num_img {width:120px;padding-top:40px;}
#contents-1 > .tab-2 > .row > div > .desc_1 {font-size:32px;letter-spacing:-2px;padding-top:16px}
#contents-1 > .tab-2 > .row > div > .desc_2 {padding-bottom:40px;line-height:20px}
#contents-1 > .tab-2 > .row_3 > div > .desc_2 {padding-bottom:14px}
#contents-1 > .tab-2 > .row_4 {padding-left:0}
#contents-1 > .tab-2 > .row_4 > div > .num_img {padding-top:40px}
#contents-1 > .tab-2 > .row_4 > div > .img-fluid {padding:0}
#contents-1 > .tab-2 > .row_4 > div.order-lg-1 {padding-left:0}
#contents-1 > .tab-2 > .row_4 > div > .desc_2 {padding-bottom:10px}


#contents-2 {}
#contents-2 > .tab-1 > .desc_1 {font-size:52px;letter-spacing:-2px}
#contents-2 > .tab-2 {padding:30px 40px;margin-top:20px}
#contents-2 > .tab-2 > .row {border-left:1px solid #635fb4;border-top:1px solid #635fb4}
#contents-2 > .tab-2 > .row > div {padding:30px 40px;border-right:1px solid #635fb4;border-bottom:1px solid #635fb4}
#contents-2 > .tab-2 > .row > div > div > p {font-size:22px;letter-spacing:-1px}
#contents-2 > .tab-2 > .row > div > div > p.desc_1 {color:#635fb4}
#contents-2 > .tab-2 > .row > div > div > p.desc_2 {margin-top:10px}


#contents-3 > .header-img {margin-top:60px}
#contents-3 > .tab-1 {margin-top:60px}
#contents-3 > .tab-1 > .row > div.order-lg-2 {margin-bottom:40px}
#contents-3 > .tab-1 > .row > div > .desc_1 {line-height:54px;font-size:48px;letter-spacing:-3px;font-weight:600;margin-bottom:6px}
#contents-3 > .tab-1 > .row > div > .desc_2 {line-height:60px;font-size:54px;letter-spacing:-3px;font-weight:600;margin-bottom:24px}
#contents-3 > .tab-1 > .row > div > .desc_3 {line-height:24px;font-size:20px;letter-spacing:-1px;color:#9b98d9;margin-bottom:6px}
#contents-3 > .tab-1 > .row > div > .desc_4 {line-height:24px;font-size:20px;letter-spacing:-1px;color:#635fb4;margin-bottom:24px}
#contents-3 > .tab-1 > .row > div > .desc_5 {line-height:36px;font-size:26px;letter-spacing:-1px;}


#contents-3 > .header-img {margin-top:60px}


#bottom {background-color:#daf4f3;padding:40px 0;padding-bottom:120px}
#bottom > .tab-1 > .row > .col-lg-8 > p {padding-left:32px}
#bottom > .tab-1 > .row > .col-lg-8 > p.desc_1 {position:relative;color:#475ca9;margin-bottom:2px}
#bottom > .tab-1 > .row > .col-lg-8 > p.desc_1:before {position:absolute;content:"";left:20px;top:10px;width:4px;height:4px;background-color:#377fcf;border-radius:2px}

#bottom > .tab-1 > .row > .col-lg-8 > p.desc_2 {margin-bottom:24px}
#bottom > .tab-1 > .row > .col-lg-8 > img {margin:24px 0 72px}


#layer {z-index:10;position:fixed;bottom:-800px;width:100%;padding:24px 0 0;border-radius: 30px 30px 0 0;background-color:#fff8f1;
  -webkit-box-shadow: 0 -8px 15px -6px gray;
  -moz-box-shadow: 0 -8px 15px -6px gray;
  box-shadow: 0 -8px 15px -6px gray;
  transition: bottom 0.2s;
}

#layer > .of_button {z-index:12;position:absolute;left:50%;top:-30px;width:120px;height:50px;margin-left:-60px;border-radius: 60px 60px 0 0;background-color: #fff8f1;
  -webkit-box-shadow: 0 -8px 4px -6px gray;
  -moz-box-shadow: 0 -8px 4px -6px gray;
  box-shadow: 0 -8px 4px -6px gray;cursor:pointer}
#layer > .of_button > .arrow_img {left:45px;top:8px}
#layer .form-floating > label {left: 10px !important;}

#layer .tab-1 .desc_1 {position:relative;font-size:22px;line-height:24px;letter-spacing:-1px;font-weight:600;color:#635fb4;margin-bottom:48px}
#layer .tab-1 .desc_1:after { content: "";
  border-top: 13px solid #635fb4;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  position: absolute;
  bottom: -34px;
  left: 24%;
  padding-left: -4px}
#layer .tab-1 .desc_1 {font-size:22px;line-height:24px;letter-spacing:-1px;font-weight:600;color:#635fb4}
#layer .tab-1 .desc_2 {font-size:18px;line-height:22px;letter-spacing:-1px;}
#layer .tab-1 .desc_3 {font-size:18px;line-height:22px;letter-spacing:-1px;}
#layer .tab-1 .desc_4 {font-size:18px;line-height:22px;letter-spacing:-1px;margin-bottom:24px}
#layer .tab-1 .desc_5 {font-size:16px;line-height:30px;letter-spacing:-1px}
#layer .tab-1 .desc_5 > .l_btn {font-size:18px;text-decoration: underline;cursor:pointer}


@media (max-width: 1200px) {
  #top > .hero > .hero_inner {
    margin-top:45px;
    margin-left:45px;
    margin-right:45px;
  }
  
  #top > .hero > .hero_inner > .desc_1, #top > .hero > .hero_inner > .desc_3 {
    font-size:37px;
    line-height:45px;
  }
  #top > .hero > .hero_inner > .desc_2 {
    font-size:50px;
    line-height:65px;
  }
  #top > .hero > .hero_inner > .desc_4 {
    font-size:20px;
  }
}
@media (max-width: 991px) {
  #contents-1 > .tab-2 > .row_4 {padding:0 40px}
  #layer .tab-1 .desc_1 {margin-bottom:24px}
  #layer .tab-1 .desc_1:after { display:none}
  #bottom {padding-bottom:120px}
 
  #layer .tab-1 .desc_1 {font-size:20px;line-height:20px;letter-spacing:-1px;font-weight:600;color:#635fb4}
  #layer .tab-1 .desc_2 {font-size:16px;line-height:20px;letter-spacing:-1px;}
  #layer .tab-1 .desc_3 {font-size:16px;line-height:20px;letter-spacing:-1px;}
  #layer .tab-1 .desc_4 {font-size:16px;line-height:20px;letter-spacing:-1px;margin-bottom:24px}
  
  .cust_btn_2 {width:100%;font-size: 24px;
      height: 60px;
      line-height: 60px;}

}
@media (max-width: 767px) {
  #top > .hero {
    background: url("../img/mbi/top_vs.png") no-repeat bottom;
  }
  #top > .hero > .hero_inner {
    margin-left:25px;
    margin-right:25px;
    min-height: 700px;
  }
  #top > .hero > .hero_inner > .desc_1 {
  }
  #top > .hero > .hero_inner > .desc_1, #top > .hero > .hero_inner > .desc_3 {
    font-size:32px;
    line-height:40px;
  }
  #top > .hero > .hero_inner > .desc_2 {
    font-size:45px;
    line-height:50px;
  }
  #top > .hero > .hero_inner > .desc_3 {
    margin-bottom:10px
  }
  #top > .hero > .hero_inner > .desc_4 {
    font-size:18px;
  }
  
  
  #contents-1 > .tab-1 > .img_wrap_1 {position:inherit;width:auto;}
  #contents-1 > .tab-1 > .img_wrap_1 > div {padding:0 10px}
  #contents-1 > .tab-1 > .img_wrap_1 > div > img {width:100%;}
  #contents-1 > .tab-1 > .desc_1 {font-size:18px;padding-top:50px;padding-right:0;padding-bottom:40px}
  #contents-2 > .tab-1 > .desc_1 {font-size:32px;letter-spacing:-1px}
  
  #contents-1 > .tab-2 > .row > div > .desc_1 {font-size:28px;letter-spacing:-2px;}

  #contents-1 > .tab-1 > .desc_2 {font-size:48px;line-height:54px;padding-top:24px;}
  #contents-3 > .tab-1 > .row > div > .desc_1 {line-height:48px;font-size:42px;letter-spacing:-3px}
  #contents-3 > .tab-1 > .row > div > .desc_2 {line-height:54px;font-size:48px;letter-spacing:-3px}
  #contents-3 > .tab-1 > .row > div > .desc_3 {line-height:20px;font-size:16px;letter-spacing:-1px;color:#9b98d9;margin-bottom:6px}
  #contents-3 > .tab-1 > .row > div > .desc_4 {line-height:20px;font-size:16px;letter-spacing:-1px;color:#635fb4;margin-bottom:24px}
  #contents-3 > .tab-1 > .row > div > .desc_5 {line-height:32px;font-size:22px;letter-spacing:-1px;}

}