@import url(reset-css.css);
/* (font-family: "Elice DX Neolli") */
@import url(font-eliceDXNeolli.css); /* font 임시로 넣어서 바꿔야함. */
@import url(font-spoqaHanSans.css); /* font 임시로 넣어서 바꿔야함. */


/* css 선언 순서 */
/*
1. position, display, overflow, visibility
2. align-items, justify-content, flex-wrap
3. top, right, bottom, left, width, height, z-index
4. margin, padding, border, border-radius, background, background-image, background-position
5. opacity, box-shadow
6. font-size, font-weight, line-height, color, text-align
7. transform, transition, animation
*/
/* // css 선언 순서 */

/* 공통 */
.tp-area * { font-family: "EliceNeoli" }

/* 레이아웃 배경색 */
.tp-area[data-bg="5A45DB"] {background-color: #5A45DB;}
.tp-area[data-bg="EEF2FF"] {background-color: #EEF2FF;}
.tp-area[data-bg="F7F7F7"] {background-color: #F7F7F7;}

/* 아이콘 URL */
i[data-ico="clock"] {background-image: url("../img/ico_clock.png");}
i[data-ico="blackbox"] {background-image: url("../img/ico_blackbox.png");}
i[data-ico="salecar"] {background-image: url("../img/ico_salecar.png");}
i[data-ico="safecar"] {background-image: url("../img/ico_safecar.png");}
i[data-ico="3040"] {background-image: url("../img/ico_3040.png");}
i[data-ico="baby"] {background-image: url("../img/ico_baby.png");}
i[data-ico="tmap"] {background-image: url("../img/ico_tmap.png");}
i[data-ico="kakao"] {background-image: url("../img/ico_kakao.png");}
i[data-ico="handle"] {background-image: url("../img/ico_handle.png");}
i[data-ico="internet"] {background-image: url("../img/ico_internet.png");}
i[data-ico="signs"] {background-image: url("../img/ico_signs.png");}
i[data-ico="load"] {background-image: url("../img/ico_load.png");}
i[data-ico="call"] {background-image: url("../img/ico_call.png");}
i[data-ico="check"] {background-image: url("../img/ico_check.png");}
/* // 공통 */

/* ****************** PC ****************** */

/* banner 영역 */
.tp-banner {
  width: 1180px;
  margin: 0 auto;
  padding: 80px 0;
  background-position: right 50%;
  background-repeat: no-repeat;
  background-size: 430px 400px;
  background-image: url("../img/img_triple_banner.png");
}

.tp-banner > span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 297px;
  height: 52px;
  margin-bottom: 40px;
  border-radius: 100px;
  background-color: #EFECFF;
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  color: #5A45DB;
}

.tp-banner > h1 {
  font-size: 60px;
  font-weight: 500;
  line-height: 60px;
  color: #EFECFF;
}

.tp-banner > h1 > span {
  display: block;
  margin-top: 20px;
  font-weight: 700;
  color: #FFF82F;
}
/* // banner 영역 */

/* content 영역 */
.tp-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1180px;
  margin: 0 auto;
  padding: 80px 0;
}

.tp-content > h2 {
  font-size: 32px;
  font-weight: 300;
  line-height: 32px;
  color: #000;
}

.tp-content > h2 > span {
  display: block;
  margin-top: 20px;
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  color: #5A45DB;
}

.tp-content .tp-buttons > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 420px;
  height: 100px;
  padding: 0 0 0 48px;
  border-radius: 100px;
  background: linear-gradient(90deg, #6A3CE9 0%, #4432C0 100%);
  font-size: 32px;
  font-weight: 500;
  line-height: 32px;
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
}

.tp-content .tp-buttons > a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 28px;
  width: 52px;
  height: 52px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 52px 52px;
  background-image: url("../img/ico_arrow.png");
  transform: translateY(-50%);
}

.tp-content .tp-buttons > .btn-call {
  display: none;
}

.tp-content > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 40px;
}

.tp-content li {
  display: flex;
  width: 32.20338%;
  min-height: 208px;
  margin: 0 1.69491% 1.69491% 0;
  padding: 40px 37px 40px 40px;
  border-radius: 20px;
  background-color: #fff;
  box-sizing: border-box;
}

@media screen and (min-width: 1241px)  {
  .tp-content li:nth-child(3n) {
    margin: 0 0 1.69491%;
  }
  
  .tp-content li:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
}

.tp-content .card-info {
  display: flex;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
}

.tp-content .card-info * {
  font-family: 'SpoqaHanSans';
}

.tp-content .card-info > h3 {
  width: 100%;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
}

.tp-content .card-info > h3 > span.pc-line-break {
  display: block;
  margin-top: 4px;
}

.tp-content .card-info > .badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 22px;
  border-radius: 100px;
  background-color: #E8E5FF;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  color: #5A45DB;
}

.tp-content .card-info > .badge + .percent {
  margin-left: 8px;
}

.tp-content .card-info > .percent {
  font-size: 36px;
  font-weight: 700;
  line-height: 36px;
  color: #5A45DB;
}

.tp-content .card-info > p {
  width: 100%;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.3px;
  color: #666;
}

.tp-content .card-info > p + p {
  margin-top: 4px;
}

.tp-content .card-icon {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.tp-content .card-icon i {
  display: block;
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  background-size: 64px 64px;
}

.tp-content .card-icon i + i {
  margin-top: 16px;
}

.tp-content > p {
  width: 100%;
  margin-top: 40px;
  font-family: 'SpoqaHanSans';
  font-size: 12px;
  font-weight: 300;
  line-height: 12px;
  color: #666666;
  text-align: center;
}
/* // content 영역 */

/* notice 영역 */
.tp-notice {
  width: 1180px;
  margin: 0 auto;
  padding: 20px 0;
}

.tp-notice * {
  font-family: 'SpoqaHanSans';
}

.tp-notice > h4 {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #666;
}

.tp-notice > h4::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-image: url("../img/ico_notice.png");
  transform: translateY(-50%);
}

.tp-notice > p {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #999;
}
/* // notice 영역 */

/* footer 영역 */
.tp-footer {
  width: 1180px;
  margin: 0 auto;
  padding: 20px 0 40px;
  text-align: center;
}

.tp-footer * {
  font-family: 'SpoqaHanSans';
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #666;
}

.tp-footer > address {
  display: inline;
}
/* // footer 영역 */
.pc_view { display: block; }
.mo_view { display: none; }

/* ****************** MO ****************** */
@media screen and (max-width: 1240px)  {
  .tp-area {
    min-width: auto;
    text-align: center;
  }

  /* 모바일 banner 영역 */
  .tp-banner {
    width: auto;
    padding: 40px 20px 203px;
    background-position: 50% bottom;
    background-size: 320px 175px;
    background-image: url("../img/img_triple_banner_mo.png");
  }

  .tp-banner > span {
    min-width: 198px;
    height: 38px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
  }

  .tp-banner > h1 {
    font-size: 28px;
    font-weight: 500;
    line-height: 28px;
  }

  .tp-banner > h1 > span {
    margin-top: 12px;
    font-size: 34px;
    font-weight: 700;
    line-height: 34px;
  }
  /* // 모바일 banner 영역 */

  /* 모바일 content 영역 */
  .tp-content {
    justify-content: center;
    width: auto;
    padding: 40px 0;
  }

  .tp-content > h2 {
    font-size: 20px;
    font-weight: 300;
    line-height: 20px;
  }

  .tp-content > h2 > span {
    margin-top: 12px;
    font-size: 24px;
    line-height: 24px;
  }

  .tp-content .tp-buttons {
    position: fixed;
    display: flex;
    bottom: 0;
    width: 100%;
    text-align: left;
  }

  .tp-content .tp-buttons i {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
  }

  .tp-content .tp-buttons > .btn-check {
    background: linear-gradient(90deg, #4733C3 0%, #4733C3 100%);
  }

  .tp-content .tp-buttons > .btn-call {
    display: inline-flex;
    background: linear-gradient(90deg, #0C0E7D 0%, #0C0E7D 100%);
  }

  .tp-content .tp-buttons > a {
    display: inline-flex;
    justify-content: center;
    width: 50%;
    height: 68px;
    padding: 0;
    border-radius: 0;
    font-family: 'SpoqaHanSans';
    font-size: 16px;
    font-weight: 700;
    line-height: 14px;
  }

  .tp-content .tp-buttons > a::after {
    display: none;
  }

  .tp-content > ul {
    margin-top: 20px;
    padding: 0 20px;
  }

  .tp-content li {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 48.4375%;
    min-height: auto;
    margin: 0 3.125% 3.125% 0;
    padding: 20px 16px;
  }

  .tp-content li:nth-child(2n) {
    margin: 0 0 3.125%;
  }

  .tp-content li[data-size="full"] {
    flex-direction: row;
    width: 100%;
    margin: 0 0 3.125% 0;
  }

  .tp-content li[data-size="full"] .card-icon {
    margin-top: 0;
  }

  .tp-content li:nth-last-child(-n + 3) {
    margin: 0 0 3.125% 3.125%;
  }

  .tp-content li:nth-last-child(1) {
    margin: 0 0 0 3.125%;
  }

  .tp-content li:nth-last-child(2) {
    margin: 0 0 0 0;
  }

  .tp-content .card-info {
    text-align: left;
  }

  .tp-content .card-info > h3 {
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
  }

  .tp-content .card-info > h3 > span {
    display: block;
    margin-top: 4px;
  }

  .tp-content .card-info > h3 > span.pc-line-break {
    display: inline;
    margin-top: 0;
  }

  .tp-content .card-info > .badge {
    height: 20px;
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
  }

  .tp-content .card-info > .badge + .percent {
    margin-left: 4px;
  }

  .tp-content .card-info > .percent {
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
  }

  .tp-content .card-info > p {
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
  }

  .tp-content .card-info > p > span{
    display: block;
    margin-top: 4px;
  }

  .tp-content .card-icon {
    align-items: flex-end;
    margin-top: 10px;
  }

  .tp-content .card-icon i {
    width: 40px;
    height: 40px;
    background-size: 40px 40px;
  }

  .tp-content > p {
    margin-top: 20px;
    font-size: 12px;
    font-weight: 300;
    line-height: 12px;
  }
  /* // 모바일 content 영역 */

  /* 모바일 notice 영역 */
  .tp-notice {
    width: auto;
    padding: 30px 20px 20px;
  }

  .tp-notice > h4 {
    text-align: left;
  }

  .tp-notice > p {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
  }

  .tp-notice > p > span {
    display: block;
    margin-top: 10px;
  }
  /* // 모바일 notice 영역 */

  /* 모바일 footer 영역 */
  .tp-footer {
    width: auto;
    padding: 20px 20px 108px;
    text-align: left;
  }

  .tp-footer * {
    font-weight: 400;
    line-height: 18px;
  }

  .tp-footer > address > span{
    display: block;
  }

  .tp-footer > p {
    margin-top: 10px;
    font-size: 10px;
    font-weight: 300;
    line-height: 10px;
  }
  .pc_view { display: none; }
  .mo_view { display: block; }
}

  /* // 모바일 header 영역 */
  header {background:#fff;}
  header .inner {width:1180px;max-width:100%;margin:0 auto;overflow:hidden;}
  header .inner h1 {float:left;margin-top:10px;}
  header .inner h1 img {display:block; width:52px; height:52px;}
  header .tit_area {float:right;}
  header .tit_area .tel {display:inline-block;width:180px;height:48px;margin:12px 0 0 20px;background:url("../img/btn_tel_pc.png") no-repeat 0 0;vertical-align:top;}
  header .inner .tit {line-height:72px; color:#000; font-size:2}
  .blind {overflow: hidden;border:0;position: absolute;z-index: -1;width: 1px;height:1px;clip: rect(1px,1px,1px,1px);clip-path: inset(50%);margin: -1px 0 0 0 !important;padding: 0 !important;}/* H23525 */
  @media screen and (max-width: 1239px) {
    header {min-width:100%;background:#fff;}
    header .inner {width:100%;padding:0 20px;box-sizing:border-box;}
    header .inner h1 {float:left;margin-top:0;}
    header .inner h1 img {display:block;width:30px;height:30px; margin-top: 8px; }
    header .tit_area {float:right;}
    header .tit_area .tel {display:inline-block;width:112px;height:28px;margin:9px 0 0 10px;background:url("../img/btn_tel_mo.png") no-repeat 0 0;background-size: cover; vertical-align:top;}
    header .inner .tit {line-height:46px;color:#000;font-size:12px;}
    .btm_txt {display:none;}
  }
  @media screen and (max-width: 320px){
    header .inner {padding:0 10px;}/* H23223 add */
  }