@charset "utf-8";

@import url('font.css');
@import url('common.css');
@import url('swiper.min.css');

/* main-banner */
.main-banner .tit-box {margin-bottom:0;}
.main-banner .tit-box h3 {margin-top:36px; font-size:120px; font-weight:900; word-break:keep-all;}

.main-banner .banner-cont {margin-top:-52px;}
.main-banner .banner-cont p {max-width:480px; width:100%; margin:0 auto;}
.main-banner .banner-cont p img {display:block; width:100%; height:100%;}
.main-banner .banner-cont video {position:relative; z-index:1; left:50%; transform:translateX(-50%); max-width:100%; width:480px;}
.main-banner .banner-cont video source {display:block; width:100%; height:100%;}

/* kwel-card */
.kwel-card .kwel-swiper .swiper-slide {flex:1; align-items:stretch; position:relative; height:auto; margin-right:27px; padding:133px 50px 50px; border-radius:20px; background-color:#fff;}
.kwel-card .kwel-swiper .swiper-slide:last-of-type {margin-right:0;}
.kwel-card .kwel-swiper .swiper-slide::before {content:''; position:absolute; z-index:1; top:50px; right:50px; width:43px; height:63px; background:url(../images/pic/pic_kwel_ic.png) no-repeat; background-size:100%;}

.kwel-card .kwel-swiper .swiper-slide .img {max-width:242px; margin:0 auto;}
.kwel-card .kwel-swiper .swiper-slide .img img {display:block; width:100%; height:100%;}

.kwel-card .kwel-swiper .swiper-slide .txt {margin-top:20px; text-align:center;}
.kwel-card .kwel-swiper .swiper-slide .txt span {color:#1D1D1D; font-size:20px;}
.kwel-card .kwel-swiper .swiper-slide .txt strong {display:block; color:#1D1D1D; font-size:36px; font-weight:700; line-height:1;}
.kwel-card .kwel-swiper .swiper-slide .txt p {margin-top:15px; color:#909090; word-break:keep-all;}

/* card-design */
.card-design .design-swiper {max-width:none; width:100%; white-space:nowrap;}
.card-design .design-swiper .swiper-wrapper {display:flex; flex-wrap:nowrap; width:max-content; position:relative; left:0; text-align:left; animation:designAni 20s infinite linear;}
.card-design .design-swiper .swiper-wrapper:hover,
.card-design .design-swiper .swiper-wrapper:focus {animation-play-state:paused}

.card-design .design-swiper .swiper-slide {display:inline-block; width:230px; margin-right:20px;}
.card-design .design-swiper .swiper-slide .white-card {border:1px solid #909090; border-radius:10px;}

@keyframes designAni {
    100% {transform:translate(-50%, 0);}
}

/* card-production */
.card-production .production-cont {max-width:750px; margin:0 auto;}

.card-production .card-cost .cost {display:flex; justify-content:center; align-items:stretch;}
.card-production .card-cost .cost > li {flex:1; margin-right:50px; padding:50px; border:1px solid #D9D9D9; border-radius:20px; background-color:#fff;}
.card-production .card-cost .cost > li:last-of-type {margin-right:0;}

.card-production .card-cost .cost .tit {display:block; padding:12px 0; font-size:30px; font-weight:700; text-align:center; line-height:1; letter-spacing:-0.05em; border-bottom:1px solid #000;}
.card-production .card-cost .cost .img {margin:40px auto 0;}
.card-production .card-cost .cost .img img {margin:0 auto;}

.card-production .card-cost .cost .txt {margin-top:30px;}
.card-production .card-cost .cost .txt li {display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px dotted #CCCCCC;}
.card-production .card-cost .cost .txt li strong {color:#1D1D1D; font-size:30px; font-weight:700; word-break:keep-all;}
.card-production .card-cost .cost .txt li > span {flex-shrink:0; color:#CCCCCC; font-size:30px; word-break:keep-all;}
.card-production .card-cost .cost .txt li p {color:#1D1D1D; font-size:26px; word-break:keep-all;}
.card-production .card-cost .cost .txt li p span {font-weight:700; word-break:keep-all;}

.card-production .card-cost .cost .txt li:first-of-type::after {display:none;}
.card-production .card-cost .cost .txt li::after {content:''; flex-shrink:0; display:inline-block; width:30px; height:30px; background-image:url(../images/ico/ico_production_card.svg); background-repeat:no-repeat; background-size:100%;}
.card-production .card-cost .cost .txt li.celebrate::after {background-image:url(../images/ico/ico_production_celebrate.svg);}
.card-production .card-cost .cost .txt li.best::after {background-image:url(../images/ico/ico_production_best.svg);}
.card-production .card-cost .cost .txt li.money::after {background-image:url(../images/ico/ico_production_money.svg);}
.card-production .card-cost .cost .txt li.heart::after {background-image:url(../images/ico/ico_production_heart.svg);}


.card-production .card-custom {margin-top:100px;}
.card-production .card-custom h4 {margin-bottom:50px; font-size:50px; font-weight:800; text-align:center; letter-spacing:-0.07em;}
.card-production .card-custom .process {display:flex; justify-content:space-between; align-items:center;}
.card-production .card-custom .process li {flex:1; position:relative;}
.card-production .card-custom .process li::after {content:''; display:block; position:absolute; z-index:1; top:calc(50% - 30px); left:120px; transform:translateY(-50%); width:100%; height:1px; background-color:#D9D9D9;}
.card-production .card-custom .process li:last-of-type:after {display:none;}
.card-production .card-custom .process li strong {display:block; text-align:center; font-size:26px; font-weight:600;}
.card-production .card-custom .process li strong::before {content:''; display:block; position:relative; z-index:2; width:120px; height:120px; margin:0 auto 20px; border:4px solid #08041A; border-radius:50%; background-color:#fff; background-repeat:no-repeat; background-position:center;}
.card-production .card-custom .process li.order strong::before {background-size:60px 60px; background-image:url(../images/ico/ico_sequence_moniter.svg);}
.card-production .card-custom .process li.confirm strong::before {background-size:60px 60px; background-image:url(../images/ico/ico_sequence_check.svg);}
.card-production .card-custom .process li.product strong::before {background-size:48px 71px; background-image:url(../images/ico/ico_sequence_card.svg);}

.card-production .noti {margin-top:30px; padding:16px 0; color:#909090; font-size:26px; text-align:center; line-height:1; word-break:keep-all; border-top:1px solid #D9D9D9; border-bottom:1px solid #D9D9D9;}
.card-production .noti span {color:#000; font-weight:700;}

.card-production .card-custom .noti {margin-top:100px;}

/* user-review */
.user-review .wrapper {width:1560px;}
.user-review .review-swiper .swiper-wrapper {display:flex; justify-content:center; flex-wrap:wrap; margin:-15px 0;}
.user-review .review-swiper .swiper-slide {align-items:stretch; height:auto; width:calc(33.3% - 30px); margin:15px; border:1px solid #D9D9D9; background-color:#fff;}
.user-review .review-swiper .swiper-slide a {display:block; width:100%; height:100%; padding:40px;}

.user-review .review-swiper .swiper-slide .top {display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #D9D9D9;}
.user-review .review-swiper .swiper-slide .top strong {display:block; margin-right:24px; font-family:'notosans'; font-size:24px; font-weight:800; line-height:1.2; letter-spacing:-0.07em; word-break:keep-all;}
.user-review .review-swiper .swiper-slide .top strong::before {content:'“';}
.user-review .review-swiper .swiper-slide .top strong::after {content:'”';}
.user-review .review-swiper .swiper-slide .top strong::before,
.user-review .review-swiper .swiper-slide .top strong::after {display:block;}
.user-review .review-swiper .swiper-slide .top p {flex-shrink:0; display:flex; justify-content:center; align-items:center; width:80px; height:80px; border-radius:50%; background-color:#F5F5F5;}
.user-review .review-swiper .swiper-slide .top p img {width:54px; height:55px;}

.user-review .review-swiper .swiper-slide .btm p {color:#909090; font-size:20px; line-height:1.3; word-break:keep-all;}

/* card-operate */
.card-operate .oper-cont {max-width:600px; margin:0 auto;}
.card-operate .oper-cont ul li {display:flex; justify-content:space-between; align-items:center; padding:20px 30px; border-radius:20px; background-color:#fff;}
.card-operate .oper-cont ul li + li {margin-top:20px;}
.card-operate .oper-cont ul li div {margin-right:24px;}
.card-operate .oper-cont ul li div strong {font-size:24px; font-weight:700; word-break:keep-all;}
.card-operate .oper-cont ul li div p {color:#666; font-size:24px; word-break:keep-all;}
.card-operate .oper-cont ul li .img {width:80px; height:80px;}
.card-operate .oper-cont ul li .img img {display:block; width:100%; height:100%;}

.card-operate .oper-cont .po-gradi {margin-top:40px; color:#fff; font-size:24px; text-align:center; line-height:1; word-break:keep-all;}
.card-operate .oper-cont .po-gradi span {font-weight:700;}

/* card-counsel */
.card-counsel .inp-box label {display:block;}
.card-counsel .inp-box label + label {margin-top:50px;}
.card-counsel .inp-box label span {display:block; padding-bottom:20px; font-size:26px; line-height:1;}
.card-counsel .inp-box label input {display:block; width:100%; height:80px; padding:0 20px; font-size:26px;}
.card-counsel .inp-box label input::placeholder {color:#C9C9C9; font-size:26px; line-height:1; letter-spacing:-0.07em;}
.card-counsel .inp-box label textarea {display:block; width:100%; height:200px; padding:20px; font-size:26px;}
.card-counsel .inp-box label textarea::placeholder {color:#C9C9C9; font-size:26px; line-height:1; letter-spacing:-0.07em;}

.card-counsel .agree-box {display:flex; align-items:center; margin-top:30px;}
.card-counsel .agree-box .agree {display:flex; align-items:center;}
.card-counsel .agree-box .agree input {display:none; position:absolute; z-index:-9999px; top:0; left:-9999px; width:0; height:0; overflow:hidden;}
.card-counsel .agree-box .agree i {display:block; position:relative; width:26px; height:26px; margin-right:20px; border:1px solid #909090; border-radius:50%; background-color:#fff;}
.card-counsel .agree-box .agree input:checked + i {border-color:#EB222E; background-color:#EB222E; transition:all .2s ease;}
.card-counsel .agree-box .agree input:checked + i::after {content:''; position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%, -50%); width:19px; height:13px; background:url(../images/ico/ico_counsel_check_white.svg) no-repeat center; background-size:contain;}
.card-counsel .agree-box .agree span {font-size:20px; line-height:1;}
.card-counsel .agree-box .terms {display:inline-block; padding:20px; font-size:20px; line-height:1; text-decoration:underline; text-underline-position:under}
.card-counsel .btn-box {display:block; margin-top:50px; width:100%; padding:29px 0; font-size:40px;}

/* step-guide */
.step-guide {border-top:10px solid #F5F5F5;}
.step-guide .wrapper {padding-top:110px; padding-bottom:100px;}
.step-guide ul {display:flex; align-items:center;}
.step-guide ul li {flex-grow: 1; margin-right:20px; border:1px solid #C9C9C9; background-color:#F5F5F5;}
.step-guide ul li:last-of-type {margin-right:0;}
.step-guide ul li a {display:block; width:100%; height:100%; padding:26px 40px 26px 19px; font-size:20px; background:url(../images/ico/ico_arw_right_gray.svg) no-repeat center right 20px; background-size:7px 12px;}

.balanceWrap {box-sizing:border-box;padding:0 20px; position:relative}

/* title */
.topFixedWrap {position:fixed;top:0;left:0;width:100%;z-index:1000}
.topFixedWrap header {padding:14px 21px; position:relative;top:0;left:0;width:100%;box-sizing:border-box;margin:0 auto;}
.topFixedWrap .title {width:100%;height:auto;overflow:hidden; display: flex; flex-wrap: wrap;}
#wrap h1 {float:left;font-weight:bold;font-size:22px;line-height:30px;color:#000; width: 90px; height: 30px;}
#wrap .contents {padding-top:57px;}

/* 화면 하단 배너 */
.bottomFixedWrap {position:fixed;bottom:0;left:0;width:100%}

/* /// 공통 /// */
/* 취소&확인 버튼 */
.btnBox {width:100%;max-width:960px;margin:0 auto;font-size:0;text-align:center;box-sizing:border-box;padding:10px 20px;border-top:1px solid #eee}
.btnBox a.w100 {display:inline-block;width:100%;border-radius:20px;height:40px;background:#EB222E;;color:#fff;font-size:16px;line-height:40px}

/* 입력창*/
.card_input_box {width:100%;height:100%;box-sizing:border-box;padding:10px 20px;}
.card_input_box .detail_input_box {margin-bottom:25px;}
.card_input_box .detail_input_box p{color:#282828;margin-bottom:12px;font-weight:bold;}
.card_input_box .detail_input_box input{border-radius: 20px;border: 1px solid #c6c6c6;padding: 0 21px 0 26px;height: 55px;color: #666; width: 100%;}
.card_input_box .detail_input_box_flex{display: flex; justify-content: left;}

#balance-popup .pop-box { height: 180px;}
#balance-popup .pop-cont div{font-size: 18px;text-align: center;}

.breakdownList nav {clear: both;background: #f0f0f0;height: 50px;box-sizing: border-box;padding: 12px 19px 14px;font-size: 0;}
.breakdownList nav a{display: inline-block;font-size: 16px;line-height: 28px;position: relative;color: #666;padding: 0 19px;}
.breakdownList nav a.active {color: #000;font-weight: bold;}
.breakdownList nav a:first-child:before {content: "";display: block;width: 1px;height: 15px;background: #d3d3d3;position: absolute;top: 7px;right: 19px;}
.breakdownList article p{text-align: center;}
.breakdownList .ListNull{display: block;border-bottom: 0;padding-top: 50px;}
.breakdownList .ListNull img {display: block;width: 60px;margin: 0 auto;}
.breakdownList div ul li {text-align: right;font-size: 13px;line-height: 16px;color: #666;}
.breakdownList div ul li:first-child {color: #000;margin-bottom: 2.5px;}

.breakdownList div dl dd span {padding-left: 11px;display: inline-block;position: relative;}
.breakdownList div dl dt {font-size: 17px;line-height: 27.5px;color: #000;}
.breakdownList div ul li:first-child span {font-family: "ProductSans-Bold";font-size: 18px;line-height: 22px;}
.breakdownList div{box-sizing: border-box;padding: 13px 19px;width: 100%;height: auto;overflow: hidden;display: flex;justify-content: space-between;}

.balance dl{ display:flex; flex-wrap: wrap; justify-content: space-between; align-content: center; width:100%; border-bottom:1px solid rgb(198, 198, 198); height:50px; }
.balance dl dt{ font-weight: bold; color: rgb(0, 0, 0); font-size: 18px;}
.balance dl dd{ font-weight: bold; color: #ff0000; font-size: 18px;}
.balance dl span{ font-weight: bold; color: rgb(0, 0, 0); }

#inquiry-error-popup .pop-box {height: 250px;}
#inquiry-error-popup .pop-cont div{font-size: 20px;}

#term-popup .pop-box .pop-cont .term-table{border-collapse: collapse; margin-bottom: 20px;}
#term-popup .pop-box .pop-cont .term-table td,
#term-popup .pop-box .pop-cont .term-table th{border: 1px solid #999;padding: 8px 10px;margin: 10px;text-align: center;}
#term-popup .pop-cont .term-table strong {margin: 10px;}
#term-popup .pop-cont{display: flex;flex-direction: column;justify-content: center;}
#inquiry-complete-popup .pop-cont{font-size: 18px;text-align: center;}


@media all and (max-width:1560px) {
    /* user-review */
    .user-review .wrapper {width:1200px;}
    .user-review .review-swiper .swiper-wrapper {margin:-10px 0;}
    .user-review .review-swiper .swiper-slide {width:calc(33.3% - 20px); margin:10px;}
    .user-review .review-swiper .swiper-slide a {padding:40px 30px;}

    .user-review .review-swiper .swiper-slide .top {display:block;}
    .user-review .review-swiper .swiper-slide .top strong {margin-right:0; font-size:23px;}
    .user-review .review-swiper .swiper-slide .top p {margin-left:auto;}
}

@media all and (max-width:1199px) {
    /* main-banner */
    .main-banner .tit-box h3 {margin-top:36px; font-size:100px;}

    /* kwel-card */
    .kwel-card .kwel-swiper .swiper-slide {padding:100px 40px 50px;}
    .kwel-card .kwel-swiper .swiper-slide::before {top:40px; right:40px; width:34px; height:49px;}

    .kwel-card .kwel-swiper .swiper-slide .img {max-width:200px; margin:0 auto;}

    .kwel-card .kwel-swiper .swiper-slide .txt span {font-size:18px;}
    .kwel-card .kwel-swiper .swiper-slide .txt strong {font-size:32px;}
    .kwel-card .kwel-swiper .swiper-slide .txt p {margin-top:14px;}

    /* user-review */
    .user-review .wrapper {width:100%;}
    .user-review .review-swiper .swiper-slide {width:calc(50% - 20px);}

    .user-review .review-swiper .swiper-slide .top strong {font-size:24px;}

    /* card-counsel */
    .card-counsel .inp-box label span {font-size:24px;}
    .card-counsel .inp-box label input {font-size:24px;}
    .card-counsel .inp-box label input::placeholder {font-size:24px;}
    .card-counsel .inp-box label textarea {font-size:24px;}
    .card-counsel .inp-box label textarea::placeholder {font-size:24px;}

    .card-counsel .btn-box {font-size:32px;}
}

@media all and (max-width:1080px) {
    /* main-banner */
    .main-banner.bg-clr01 {background-color:#fff;}
    .main-banner .wrapper {padding-top:100px;}
    .main-banner .tit-box h3 {margin-top:30px; font-size:80px;}

    .main-banner .banner-cont {margin-top:-28px;}
    .main-banner .banner-cont p {max-width:420px;}
    .main-banner .banner-cont video {width:420px;}

    /* kwel-card */
    .kwel-card .kwel-swiper .swiper-slide {margin-right:24px; padding:100px 20px 40px;}
    .kwel-card .kwel-swiper .swiper-slide::before {top:30px; right:30px; width:30px; height:43px;}

    .kwel-card .kwel-swiper .swiper-slide .img {max-width:160px;}

    .kwel-card .kwel-swiper .swiper-slide .txt span {font-size:16px;}
    .kwel-card .kwel-swiper .swiper-slide .txt strong {font-size:28px;}
    .kwel-card .kwel-swiper .swiper-slide .txt p {margin-top:13px; font-size:14px;}

    /* card-design */
    .card-design .design-swiper .swiper-slide {width:200px;}

    /* card-production */
    .card-production .card-cost .cost > li {margin-right:30px;}


    .card-production .card-custom h4 {font-size:46px;}
    .card-production .card-custom .process li strong::before {width:100px; height:100px;}
    .card-production .card-custom .process li.order strong::before {background-size:50px 50px;}
    .card-production .card-custom .process li.confirm strong::before {background-size:50px 50px;}
    .card-production .card-custom .process li.product strong::before {background-size:40px 59px;}

    .card-production .card-custom .noti {margin-top:80px;}

    /* user-review */
    .user-review .review-swiper .swiper-wrapper {justify-content:flex-start; flex-wrap:nowrap; margin:0;}
    .user-review .review-swiper .swiper-slide {width:400px; margin:0; border-radius:10px;}

    /* card-operate */
    .card-operate .oper-cont ul li div p {font-size:22px;}

    /* card-counsel */
    .card-counsel .inp-box label + label {margin-top:40px;}
    .card-counsel .inp-box label span {padding-bottom:16px; font-size:22px;}
    .card-counsel .inp-box label input {height:70px; padding:0 20px; font-size:22px;}
    .card-counsel .inp-box label input::placeholder {font-size:22px;}
    .card-counsel .inp-box label textarea {height:200px; padding:20px; font-size:22px;}
    .card-counsel .inp-box label textarea::placeholder {font-size:22px;}

    .card-counsel .agree-box {margin-top:20px;}
    .card-counsel .agree-box .agree i {width:23px; height:23px; margin-right:16px;}
    .card-counsel .agree-box .agree input:checked + i::after {width:15px; height:11px;}
    .card-counsel .agree-box .agree span {font-size:18px;}
    .card-counsel .agree-box .terms {font-size:18px;}
    .card-counsel .btn-box {margin-top:32px; padding:24px 0; font-size:26px;}

    /* step-guide */
    .step-guide ul li a {padding:24px 40px 24px 19px;}
}

@media all and (max-width:768px) {
    /* main-banner */
    .main-banner .wrapper {padding-top:80px; padding-bottom:80px;}
    .main-banner .tit-box h3 {margin-top:20px; font-size:64px;}

    .main-banner .banner-cont {margin-top:30px;}
	.main-banner .banner-cont p {max-width:360px;}
    .main-banner .banner-cont video {width:360px;}

    /* kwel-card */
    .kwel-card .kwel-swiper .swiper-slide {flex:none; width:260px; margin-right:0;}

    .kwel-card .kwel-swiper .swiper-slide .txt span {font-size:14px;}
    .kwel-card .kwel-swiper .swiper-slide .txt strong {font-size:24px;}
    .kwel-card .kwel-swiper .swiper-slide .txt p {margin-top:11px; font-size:12px;}

    /* card-design */
    .card-design .design-swiper .swiper-slide {width:180px; margin-right:18px;}

    /* card-production */
    .card-production .card-cost .cost {display:block;}
    .card-production .card-cost .cost > li {margin-right:0;}
    .card-production .card-cost .cost > li + li {margin-top:30px;}

    .card-production .card-cost .cost .img {max-width:350px; margin-top:40px;}


    .card-production .card-custom {margin-top:80px;}
    .card-production .card-custom h4 {font-size:42px;}
    .card-production .card-custom .process {display:block;}
    .card-production .card-custom .process li + li {margin-top:80px;}
    .card-production .card-custom .process li::after {top:calc(100% + 20px); left:calc(50% + 1px); transform:translateX(-50%); width:1px; height:32px; border-left:1px solid #000; background-color:transparent;}
    .card-production .card-custom .process li strong::before {width:80px; height:80px; border:3px solid #08041A;}
    .card-production .card-custom .process li.order strong::before {background-size:40px 40px;}
    .card-production .card-custom .process li.confirm strong::before {background-size:40px 40px;}
    .card-production .card-custom .process li.product strong::before {background-size:32px 47px;}

    .card-production .noti {margin-top:30px; line-height:1.3;}
    .card-production .card-custom .noti {margin-top:60px;}

    /* user-review */
    .user-review .review-swiper .swiper-slide {width:360px;}
    .user-review .review-swiper .swiper-slide .top strong br {display:none;}
    .user-review .review-swiper .swiper-slide .btm p br {display:none;}

    /* card-operate */
    .card-operate .oper-cont ul li {border-radius:16px;}
    .card-operate .oper-cont ul li + li {margin-top:18px;}
    .card-operate .oper-cont ul li div strong {font-size:22px;}
    .card-operate .oper-cont ul li div p {font-size:20px;}
    .card-operate .oper-cont ul li .img {width:70px; height:70px;}

    .card-operate .oper-cont .po-gradi {font-size:22px;}

    /* card-counsel */
    .card-counsel .inp-box label + label {margin-top:30px;}
    .card-counsel .inp-box label span {padding-bottom:11px; font-size:20px;}
    .card-counsel .inp-box label input {height:60px; padding:0 16px; font-size:18px;}
    .card-counsel .inp-box label input::placeholder {font-size:18px;}
    .card-counsel .inp-box label textarea {height:160px; padding:16px; font-size:18px;}
    .card-counsel .inp-box label textarea::placeholder {font-size:18px;}

    .card-counsel .agree-box {margin-top:0;}
    .card-counsel .agree-box .agree i {width:20px; height:20px; margin-right:12px;}
    .card-counsel .agree-box .agree input:checked + i::after {width:13px; height:9px;}
    .card-counsel .agree-box .agree span {font-size:16px;}
    .card-counsel .agree-box .terms {font-size:16px;}
    .card-counsel .btn-box {margin-top:12px; padding:20px 0; font-size:22px;}

    /* step-guide */
    .step-guide .wrapper {padding-top:100px;}
    .step-guide ul {flex-direction: column;}
    .step-guide ul li {width: 100%; margin-right:0;}
    .step-guide ul li:last-of-type {margin-right:0;}
    .step-guide ul li + li {margin-top:20px;}
    .step-guide ul li a {padding:20px 40px 20px 19px;}
}

@media all and (max-width:640px) {
    /* main-banner */
    .main-banner .wrapper {padding-top:50px; padding-bottom:50px;}
    .main-banner .tit-box span {line-height:1.1;}
    .main-banner .tit-box h3 {margin-top:12px; font-size:50px; line-height:0.95;}

    /* .main-banner .banner-cont p {max-width:300px;} */
    .main-banner .banner-cont video {width:300px;}

    /* kwel-card */
    .kwel-card .kwel-swiper .swiper-slide {width:220px; padding:75px 20px 28px; border-radius:12px;}
    .kwel-card .kwel-swiper .swiper-slide::before {top:28px; right:28px; width:24px; height:35px;}

    .kwel-card .kwel-swiper .swiper-slide .img {max-width:140px;}

    .kwel-card .kwel-swiper .swiper-slide .txt {margin-top:12px;}
    .kwel-card .kwel-swiper .swiper-slide .txt span {font-size:12px;}
    .kwel-card .kwel-swiper .swiper-slide .txt strong {font-size:20px;}
    .kwel-card .kwel-swiper .swiper-slide .txt p {margin-top:8px; font-size:10px;}

    /* card-design */
    .card-design .design-swiper .swiper-slide {width:150px; margin-right:14px;}
    .card-design .design-swiper .swiper-slide .white-card {border-radius:8px;}

    /* card-production */
    .card-production .card-cost .cost > li + li {margin-top:20px;}

    .card-production .card-cost .cost .img {max-width:250px;}


    .card-production .card-custom {margin-top:50px;}
    .card-production .card-custom h4 {font-size:36px;}
    .card-production .card-custom .process li + li {margin-top:74px;}
    .card-production .card-custom .process li strong::before {border:2px solid #08041A;}

    .card-production .noti {margin-top:20px; padding:24px 0;}
    .card-production .card-custom .noti {margin-top:40px;}

    /* user-review */
    .user-review .review-swiper .swiper-slide {width:330px;}

    /* card-operate */
    .card-operate .oper-cont ul li {padding:18px 30px; border-radius:12px;}
    .card-operate .oper-cont ul li + li {margin-top:15px;}
    .card-operate .oper-cont ul li div strong {font-size:20px;}
    .card-operate .oper-cont ul li div p {font-size:16px; line-height:1;}
    .card-operate .oper-cont ul li .img {width:60px; height:60px;}

    .card-operate .oper-cont .po-gradi {margin-top:30px; line-height:1.2;}

    /* card-counsel */
    .card-counsel .tit-box h3 {margin-top:19px;}

    .card-counsel .inp-box label input {height:50px; padding:0 12px; font-size:16px;}
    .card-counsel .inp-box label input::placeholder {font-size:16px;}
    .card-counsel .inp-box label textarea {height:120px; padding:12px; font-size:16px;}
    .card-counsel .inp-box label textarea::placeholder {font-size:16px;}

    .card-counsel .agree-box .agree i {margin-right:10px;}
    .card-counsel .agree-box .agree span {font-size:14px;}
    .card-counsel .agree-box .terms {font-size:14px;}
    .card-counsel .btn-box {margin-top:5px; padding:18px 0; font-size:20px;}

    /* step-guide */
    .step-guide ul li a {padding:18px 40px 18px 19px;}
}

@media all and (max-width:420px) {
    /* main-banner */
    .main-banner .tit-box h3 {font-size:40px;}

    /* .main-banner .banner-cont p {max-width:270px;} */
     .main-banner .banner-cont video {width:270px;}

    /* kwel-card */
    .kwel-card .kwel-swiper .swiper-slide {width:200px;}

    /* card-design */
    .card-design .design-swiper .swiper-slide {width:130px; margin-right:10px;}

    /* card-operate */
    .card-operate .oper-cont ul li {border-radius:10px;}
    .card-operate .oper-cont ul li div p {font-size:14px;}
    .card-operate .oper-cont ul li .img {width:50px; height:50px;}

    .card-operate .oper-cont .po-gradi {margin-top:20px; font-size:20px;}
}

@media all and (max-width:375px) {
    /* main-banner */
    .main-banner .tit-box h3 {margin-top:12px; font-size:36px;}

    .main-banner .banner-cont {margin-top:30px;}
    /* .main-banner .banner-cont p {max-width:220px;} */
    .main-banner .banner-cont video {width:220px;}

    /* card-design */
    .card-design .design-swiper .swiper-slide {width:120px;}
    .card-design .design-swiper .swiper-slide .white-card {border-radius:7px;}

    /* card-production */
    .card-production .card-cost .cost > li {padding:40px 30px;}

    .card-production .card-cost .cost .tit {padding:12px 0; font-size:26px;}
    .card-production .card-cost .cost .img {margin-top:30px;}

    .card-production .card-cost .cost .txt {margin-top:20px;}
    .card-production .card-cost .cost .txt li strong {font-size:26px;}
    .card-production .card-cost .cost .txt li > span {font-size:26px;}
    .card-production .card-cost .cost .txt li p {font-size:22px;}


    .card-production .card-custom h4 {margin-bottom:30px; font-size:30px;}
    .card-production .card-custom .process li + li {margin-top:60px;}
    .card-production .card-custom .process li::after {top:calc(100% + 16px); height:28px;}
    .card-production .card-custom .process li strong {font-size:22px;}
    .card-production .card-custom .process li strong::before {margin:0 auto 12px;}

    .card-production .noti {padding:20px 0; font-size:22px;}

    /* user-review */
    .user-review .review-swiper .swiper-slide {width:280px;}
    .user-review .review-swiper .swiper-slide a {padding:30px 20px;}

    .user-review .review-swiper .swiper-slide .top {margin-bottom:20px; padding-bottom:20px;}
    .user-review .review-swiper .swiper-slide .top strong {font-size:20px;}
    .user-review .review-swiper .swiper-slide .top p {width:60px; height:60px;}
    .user-review .review-swiper .swiper-slide .top p img {width:34px; height:35px;}

    .user-review .review-swiper .swiper-slide .btm p {font-size:16px;}

    /* card-operate */
    .card-operate .oper-cont ul li {padding:16px 24px;}
    .card-operate .oper-cont ul li div strong {font-size:18px;}

    .card-operate .oper-cont .po-gradi {font-size:18px;}

    /* card-counsel */
    .card-counsel .inp-box label span {font-size:16px;}
    .card-counsel .inp-box label input {height:45px; font-size:14px;}
    .card-counsel .inp-box label input::placeholder {font-size:14px;}
    .card-counsel .inp-box label textarea {height:100px; font-size:14px;}
    .card-counsel .inp-box label textarea::placeholder {font-size:14px;}

    .card-counsel .btn-box {margin-top:12px; padding:16px 0; font-size:18px;}

    /* step-guide */
    .step-guide ul li a {padding:16px 40px 16px 19px;}


}