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

body {font-family: 'Pretendard-Regular';}

/* 공통 */
.container {max-width: 748px; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box;}
section {padding: 60px 0 70px; overflow: hidden;}
section:nth-of-type(even) {background: #f6f6f6;}

.description {margin-top: 15px; font-size: 15px; font-weight: 300; line-height: 1.2; color: #585858; text-align: center;}

/* tit-box */
.tit-box {margin-bottom: 50px; text-align: center;}
.tit-box .tit {margin-bottom: 15px; font-size: 50px; font-weight: 300; line-height: 1.2; color: #585858;}
.tit-box .tit > b {color: var(--pr);}
.tit-box .sub {font-size: 16px; font-weight: 300; line-height: 1.19; color: #585858;}
/* //tit-box */

/* content-tit */
.ct-tit {margin-bottom: 20px; font-size: 18px; font-weight: bold; line-height: 1.17; color: #585858;}
/* content-tit */

/* input-box */
.input-box {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}
.input-box:last-of-type {margin-bottom: 0;}
.input-box input:not([type="checkbox"]) {width: 100%; height: 70px; padding: 0 20px; margin-right: 10px; border-radius: 5px; box-sizing: border-box; font-size: 24px; font-weight: 300; line-height: 1.21; color: #585858; background: #fff;}
.input-box input:last-of-type {margin-right: 0;}
.input-box input::placeholder {color: #949494;}
.input-box input[type="checkbox"] {display: none;}
.input-box input[type="checkbox"]:checked ~ label::before {content: ''; display: block; width: 20px; height: 20px; background: url(./../img/chk_on.png)no-repeat 50% 50%; background-size: cover;}
.input-box label {display: flex; align-items: center; font-size: 15px; font-weight: 400; line-height: 1.2; color: #fff;}
.input-box label::before {content: ''; display: block; width: 20px; height: 20px; margin-right: 8px; background: url(./../img/chk_off.png)no-repeat 50% 50%; background-size: cover;}
.conditions {}
.conditions .conditions-btn {padding: 3px 5px; box-sizing: border-box; border-radius: 2px; background: #949494; font-size: 12px; font-weight: 400; line-height: 1.17; color: #fff;}
.calculate-btn {display: flex; align-items: center; justify-content: center; width: 100%; height: 70px; margin-top: 10px; background: var(--pr); border-radius: 5px; box-sizing: border-box; font-size: 24px; font-weight: bold; line-height: 1.21; color: #fff;}
/* //input-box */


/* header */
header {position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 110px; padding: 0 30px; z-index: 10; box-sizing: border-box;}
.logo {width: 308px; height: auto;}
.logo img {width: 100%; height: auto;}
.inquiry-btn {display: flex; align-items: center; justify-content: center; width: 224px; height: 50px; background: var(--pr); border-radius: 5px; box-sizing: border-box; font-size: 16px; font-weight: 400; line-height: 1.19; color: #fff;}
/* //header */

/* sec1 */
.sec1 {}
/* //sec1 */

/* coupon-area */
.coupon-area {width: 100%; height: auto;}
.coupon-area .coupon {display: flex; align-items: center; justify-content: flex-start; padding: 20px; margin-bottom: 20px; background: #fff; border-radius: 10px; box-sizing: border-box;}
.coupon-area .coupon:last-of-type {margin-bottom: 0;}
.coupon-area .coupon .img-box {min-width: 221px; height: auto; margin-right: 20px;}
.coupon-area .coupon .img-box img {width: 100%; height: auto;}
.coupon-area .coupon .txt-box {width: 100%;}
.coupon-area .coupon .txt-tit {margin-bottom: 20px; font-size: 24px; font-weight: bold; line-height: 1.21; color: var(--pr);}
.coupon-area .coupon .txt-sub {margin: 15px 0 11px; font-size: 16px; font-weight: bold; line-height: 1.19; color: #262626;}
.coupon-area .coupon dl {display: flex;}
.coupon-area .coupon dl dt {margin-right: 4px;}
.coupon-area .coupon dl dt,dd {font-size: 14px; font-weight: 300; line-height: 1.29; color: #585858;}
.receive_present {display: flex; align-items: center; justify-content: center; width: 100%; height: 35px; margin-top: 30px; background: var(--pr); font-size: 15px; font-weight: bold; color: #fff; border-radius: 5px;}
/* //coupon-area */

/* logo_collection */
.logo_collection {width: 100%; height: auto;}
.logo_collection ul {display: flex; align-items: center; flex-wrap: wrap; gap: 20px 0; margin: 0 -10px;}
.logo_collection ul li {width: calc(100% / 3); padding: 0 10px; box-sizing: border-box;}
.logo_collection ul li .child-box {display: flex; align-items: center; justify-content: space-between; flex-flow: column; height: 160px; padding: 29.1px 30px; border-radius: 5px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15); background-color: #fff; box-sizing: border-box;}
.logo_collection ul li:nth-child(1) .child-box .img-box {width: 104px; height: auto;}
.logo_collection ul li:nth-child(2) .child-box .img-box {width: 64px; height: auto;}
.logo_collection ul li:nth-child(3) .child-box .img-box {width: 92px; height: auto;}
.logo_collection ul li:nth-child(4) .child-box .img-box {width: 88px; height: auto;}
.logo_collection ul li:nth-child(5) .child-box .img-box {width: 104px; height: auto;}
.logo_collection ul li:nth-child(6) .child-box .img-box {width: 92px; height: auto;}
.logo_collection ul li:nth-child(7) .child-box .img-box {width: 130px; height: auto;}
.logo_collection ul li:nth-child(8) .child-box .img-box {width: 150px; height: auto;}
.logo_collection ul li:nth-child(9) .child-box .img-box {width: 120px; height: auto;}
.logo_collection ul li .child-box .img-box img {width: 100%; height: auto;}
.logo_collection ul li .child-box .txt {font-size: 18px; font-weight: bold; line-height: 1.17; color: #585858;}
.logo_collection ul li .child-box .txt span {color: var(--pr);}
/* //logo_collection */

/* logo_collection2 */
.logo_collection2 {width: 100%; height: auto;}
.logo_collection2 ul {display: flex; align-items: center; flex-wrap: wrap; gap: 20px 0; margin: 0 -10px;}
.logo_collection2 ul li {width: calc(100% / 3); padding: 0 10px; box-sizing: border-box;}
.logo_collection2 ul li .child-box {display: flex; align-items: center; justify-content: flex-end; flex-flow: column; height: 221px; padding: 20px; border-radius: 5px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15); background-color: #fff; box-sizing: border-box;}
.logo_collection2 ul li:nth-child(1) .child-box .img-box {width: 150px; height: auto;}
.logo_collection2 ul li:nth-child(2) .child-box .img-box {width: 102px; height: auto;}
.logo_collection2 ul li:nth-child(3) .child-box .img-box {width: 128px; height: auto;}
.logo_collection2 ul li:nth-child(4) .child-box .img-box {width: 130px; height: auto;}
.logo_collection2 ul li:nth-child(5) .child-box .img-box {width: 150px; height: auto;}
.logo_collection2 ul li:nth-child(6) .child-box .img-box {width: 136px; height: auto;}
.logo_collection2 ul li:nth-child(7) .child-box .img-box {width: 130px; height: auto; padding-bottom: 30px;}
.logo_collection2 ul li:nth-child(8) .child-box .img-box {width: 150px; height: auto;}
.logo_collection2 ul li:nth-child(9) .child-box .img-box {width: 120px; height: auto;}
.logo_collection2 ul li .child-box .more-btns {width: 100%; height: auto;}
.logo_collection2 ul li .child-box .more-btns .more-btn {display: flex; align-items: center; justify-content: center; width: 100%; height: 35px; margin-top: 35px; border-radius: 5px; background: var(--pr); font-size: 15px; font-weight: 400; line-height: 1.2; color: #fff;}
/* //logo_collection2 */

/* content-area */
.content-area {width: 100%; height: auto;}
.content-area ul {display: flex; align-items: center; flex-wrap: wrap; gap: 20px 0; margin: 0 -10px;}
.content-area ul li {width: calc(100% / 2); padding: 0 10px; box-sizing: border-box;}
.content-area ul li .child-box {padding: 20px 0 40px; border-radius: 5px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15); background-color: #fff; box-sizing: border-box;}
.content-area ul li .child-box .img-box {margin-bottom: 10px; width: 150px; height: auto; margin: 0 auto;}
.content-area ul li .child-box .img-box img {width: 100%; height: auto;}
.content-area ul li .child-box .txt-box {text-align: center;}
.content-area ul li .child-box .txt-box .txt-tit {margin-bottom: 5px; font-size: 18px; font-weight: bold; line-height: 1.17; color: var(--pr);}
.content-area ul li .child-box .txt-box .txt-sub {font-size: 16px; font-weight: 300; line-height: 1.19; color: #585858;}
/* //content-area */

/* procedure-area */
.procedure-area {width: 100%; height: auto; margin-top: 40px;}
.procedure-area ul {display: flex; align-items: center; justify-content: space-between;}
.procedure-area ul .circle {display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; border-radius: 100%; font-size: 16px; font-weight: 400; line-height: 1.19; color: #fff; background: var(--pr);}
/* background: linear-gradient(135deg, #2777ff 3%, #5d99ff 50%, #8bb6ff 96%); */
.procedure-area ul .arrow {width: 20px; height: auto; margin: 0 15px;}
.procedure-area ul .arrow img {width: 100%; height: auto;}
/* //procedure-area */

/* img-list */
.img-list {width: 100%; height: auto;}
.img-list ul {display: flex; align-items: center; flex-wrap: wrap; gap: 30px 0; margin: 0 -10px;}
.img-list ul li {width: calc(100% / 3); padding: 0 10px; box-sizing: border-box;}
.img-list ul li .child-box {}
.img-list ul li .child-box .img-box {width: 100%; height: auto; margin-bottom: 10px; border-radius: 5px; box-sizing: border-box; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);}
.img-list ul li .child-box .img-box img {width: 100%; height: auto;}
.img-list ul li .child-box button {display: flex; align-items: center; justify-content: center; border-radius: 5px; width: 100%; height: 35px; background: var(--pr); font-size: 15px; font-weight: 400; line-height: 1.2; color: #fff;}
.img-list ul li .child-box button > b {margin-right: 4px;}
/* //img-list */

/* visual */
.visual {display: flex; align-items: center; justify-content: center; width: 100%; height: 648px; background: url(./../img/k-vg.png)no-repeat 50% top; background-size: cover;}
.visual .tit-box .sub {color: #fff;}
/* //visual */

/* footer */
footer {padding: 60px 0; background: #262626;}
.f-tit_box {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.f-tit_box .f-tit {font-size: 18px; font-weight: bold; line-height: 1.17; color: #fff;}
.f-tit_box .f-sub {font-size: 15px; font-weight: 300; line-height: 1.2; color: #f6f6f6;}
.txt-area {width: 100%; height: auto; margin-bottom: 70px;}
.txt-area dl {display: flex; margin-bottom: 8px;}
.txt-area dl:last-of-type {margin-bottom: 0;}
.txt-area dl dt {margin-right: 4px;}
.txt-area dl dt,dd {font-size: 14px; font-weight: 300; line-height: 1.2; color: #c7c7c7;}
.logo_address-area {display: flex; align-items: center; justify-content: space-between;}
.logo_address-area address {font-size: 15px; font-weight: 300; line-height: 1.2; color: #c7c7c7; text-align: right;}
.logo_address-area address > b {font-weight: bold;}
/* //footer */

/* popup */
.dim {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.6); z-index: 11;}
.popup-area {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 12; width: 788px; height: auto; padding: 35px 20px 20px; background: #fff; border-radius: 10px; box-sizing: border-box;}
.popup-area.on {animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@keyframes scale-in-center {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
.popup-area2 {display: none;}
.popup-area .popup-hd {margin-bottom: 30px;}
.popup-area .hd-tit_box {text-align: center;}
.popup-area .hd-tit_box .hd-tit {margin-bottom: 10px; font-size: 30px; font-weight: 300; line-height: 1.6; color: #585858;}
.popup-area .hd-tit_box .hd-tit > b {color: var(--pr);}
.popup-area .hd-tit_box .hd-sub {font-size: 14px; font-weight: 300; line-height: 1.14; color: #585858;}
.popup-area .close-btn {position: absolute; top: 20px; right: 20px; width: 20px; height: 20px;}
.popup-area .close-btn .close {width: 100%; height: 100%;}
.popup-area .close-btn .close svg line {stroke: var(--pr);}

.popup-area .input-box input:not([type="checkbox"]) {height: 50px; background: #f6f6f6; font-size: 15px;}
.popup-area .input-box label {font-size: 14px; color: #262626;}
.calculate-btn {height: 50px; font-weight: 400; font-size: 16px;}

.popup-ft {margin-top: 20px;}
.popup-area .coupon-area .coupon {box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.09);}
/* //popup */