input:focus,
select:focus {outline: none;}
select { background: url(../images/select02.png) no-repeat right 10px center; background-size: 10px; padding: 12px 10px; border: 1px solid #ddd; border-radius: 5px; width: 100%; font-size: 15px !important; font-family: 'Pretendard', sans-serif;}
input {padding: 12px 10px; border: 1px solid #ddd; border-radius: 5px; width: 100%;}
input[type="date"] {font-size: 14px;}

.Wrap.sub article {margin-top: 60px;}

.simple-img {height: 200px;}
.simple-txt {padding: 30px 20px;}
.simple-txt h3 {font-size: 20px; line-height: 1.35; margin-bottom: 16px;}
.simple-txt h3 span {font-size: 22px; font-weight: bold; display: inline-block;}
.simple-txt p {font-size: 16px; line-height: 1.45; margin-bottom: 15px;}

.btn-wrap button {padding: 15px 0; border-radius: 5px; font-size: 15px; font-weight: 500;}

/*------- 솔루션신청 -------*/

.que-wrap {display: flex; flex-direction: column; gap: 11px; margin-bottom: 30px;}
.que-wrap p {font-size: 16px; font-weight: 500;}
.que-wrap .que-btn {width: 100%; display: flex; flex-wrap: wrap;}
.que-wrap .que-btn input[type="radio"] {display: none;}
.que-wrap .que-btn label {width: calc((100% - 12px) / 2); display: inline-block; border-radius: 5px; border: 1px solid #ddd; padding: 12px; text-align: center; margin-right: 12px; display: flex; align-items: center; justify-content: center;}
.que-wrap .que-btn label:nth-child(4n) {margin-right: 0;}
.que-wrap .que-btn label span {color: #555; font-size: 15px;}

.que-wrap .que-btn label:nth-child(6),
.que-wrap .que-btn label:nth-child(8) {margin-top: 12px;}

.que-wrap .que-btn input[type="radio"]:checked + label {border-color: #2046a1; background-color: rgba(70, 125, 255, .15);}
.que-wrap .que-btn input[type="radio"]:checked + label span {font-weight: 500; color: #2046a1;}

.que-wrap input[type="text"] {padding: 14px 10px; border-radius: 5px; border: 1px solid #ddd;}
.que-wrap input[type="text"]::placeholder {font-size: 14px; color: #888;}
.que-wrap input[type="text"]:focus {outline: none;}

/*------- 솔루션신청 결과-------*/

.result-con h3 {font-size: 18px; font-weight: 700; margin-bottom: 15px;}
.result-con {margin-bottom: 25px;}
.result-con h3 span {display: inline-block; font-weight: 700;}
.result-con .result-wrap { width: 100%; overflow: auto;  white-space:nowrap; overflow-x: scroll;}
.result-slide {display: flex; width: 245%; gap: 15px;}
.result-slide02 {display: flex; width: 340%; gap: 15px;}
.result-slide .result {width: 80%; display: flex; flex-direction: column; gap: 10px;}
.result-slide02 .result {width: 70%; display: flex; flex-direction: column; gap: 10px;}
.result .result-img {border-radius: 10px; overflow: hidden; aspect-ratio: 2 / 1.3; width: 100%;}
.result-name {display: flex; flex-direction: column; gap: 3px;}
.result-name h4 {font-size: 17px; font-weight: 600; line-height: 1.4;}
.result-name .star {display: flex; align-items: center;}
.result-name .star span {font-size: 14px; color: #888; font-weight: 400;}
.result-name .star .star-icon {width: 12px; margin-left: 5px; margin-right: 3px; padding-bottom: 2px;}
.result-name .star b {font-weight: 600; color: #888; font-size: 14px;}
.result-name p {color: #555; font-size: 14px;}
.result-name p span {display: inline-block; font-weight: 600; color: #2046a1;}

/*------- 컨설팅 디테일 -------*/

.detail-main-img {height: 198px;}
.detail-tit {padding: 20px; display: flex; flex-direction: column;}
.detail-tit ul {display: flex; align-items: center; gap:3px; margin-bottom: 5px;}
.detail-tit ul li {font-size: 13px; color: #555;}
.detail-tit ul li:last-child {font-weight: 700;}

.detail-tit h2 {font-size: 18px; font-weight: 700;}
.detail-tit span i {display: inline-block; width: 15px; padding-bottom: 2px;}
.detail-tit span i img{width: 100%; object-fit: contain;}
.detail-tit span {display: flex; gap: 3px; align-items: center; font-size: 14px; color: #888; margin: 3px 0;}
.detail-tit p {font-size: 14px; color: #555;}
.detail-tit p b {font-weight: 700; color: #2046a1;}

.pro-detail h3 {font-size: 18px; font-weight: 700; margin-bottom: 8px;}
.pro-detail p {font-size: 16px; color: #555; }

.pro-review .review-tab {display: flex; align-items: center; justify-content: space-between;}
.pro-review .review-tab .review-tit {display: flex; align-items: center; font-size: 18px; gap: 5px;}
.pro-review .review-tab .review-tit p {font-weight: 700;}
.pro-review .review-tab .review-tit p b {font-weight: 700; color: #2046a1;}
.pro-review .review-tab .review-tit .re-star {display: flex; align-items: center; gap: 3px;}
.pro-review .review-tab .review-tit .re-star i {display: inline-block; width: 18px;}
.pro-review .review-tab .review-tit .re-star span {font-weight: 500;}
.tab-angle {width: 15px; transform: rotate(0deg); transition: all 0.3s;}
.tab-angle.on {transform: rotate(180deg);}

.review-con {margin-top: 20px; display: none;}
.review-con .review {padding: 20px 13px; background-color: #f5f5f5; border-radius: 15px; margin-top: 10px;}
.review-con .review .review-profile {display: flex; align-items: center; gap: 10px;}
.review-con .review .review-profile .profile-img {width: 36px;}
.review-con .review .review-profile .profile-name {display: flex; flex-direction: column;}
.review-con .review .review-profile .profile-name > div {display: flex; align-items: center; gap: 4px;}
.review-con .review .review-profile .profile-name > div .star {display: flex; gap: 2px;}
.review-con .review .review-profile .profile-name > div .star img {width: 10px;}
.review-con .review > p {font-size: 15px; margin-top: 15px;}

.pro-ask .ask-tab {display: flex; align-items: center; justify-content: space-between;}
.pro-ask .ask-tab p {font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 4px;}
.pro-ask .ask-tab p span {font-weight: 700; color: #2046a1;}

.ask-con {display: none;}
.ask-con .ask {padding: 20px 0px; border-bottom: 1px solid #eee;}
.ask-con .ask:last-child {border-bottom: none;}
.ask-con .ask .ask-info {display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;}
.ask-con .ask .ask-info span {font-weight: 500;}
.ask-con .ask .ask-info ul {font-size: 0;}
.ask-con .ask .ask-info ul li {display: inline-block; font-size: 14px; border-right: 1px solid #888; color: #888; line-height: 0.7; padding: 0 5px;}
.ask-con .ask .ask-info ul li:last-child {border: none;}
.ask-con .ask .ask-detail {display: flex; flex-direction: column; gap: 10px;}
.ask-con .ask .ask-detail > div {display: flex; align-items:flex-start; gap: 8px;}
.ask-con .ask .ask-detail .ask-que b {font-weight: bold; font-size: 15px; color: #2046a1;}
.ask-con .ask .ask-detail > div p {font-size: 15px;}

.ask-con .ask .ask-detail .ask-an b {font-weight: bold; font-size: 15px; color: #999;}

.none-ask {margin-top: 20px; padding: 30px 20px; border-radius: 10px; background-color: #f5f5f5; color: #888; text-align: center;}

/*------- 결제하기 -------*/

article.pay h3 {font-size: 18px; font-weight: 700; margin-bottom: 20px;}
article.pay > div {padding: 20px;}
.pay-info .pay-img-wrap {display: flex; align-items: center;gap: 10px;}
.pay-info .pay-img-wrap .pay-img {width: 70px; aspect-ratio: 1 / 1; border-radius:10px; overflow: hidden;}
.pay-info .pay-img-wrap .pay-txt {width: calc(100% - 80px);}
.pay-info .pay-img-wrap .pay-txt p {font-size: 17px; font-weight: 600;}
.pay-info .pay-img-wrap .pay-txt span {font-size: 14px; font-weight: 400; color: #888;}

.pay-per .per-info {display: flex; flex-direction: column; gap: 15px;}
.pay-per .per-info p {font-size: 16px; margin-bottom: 8px;}
article.pay input[type="text"] {font-size: 15px; padding: 12px 10px; border-radius: 5px; border: 1px solid #ddd; width: 100%;}
.pay-per .per-info input:focus {outline: none;}

.payment .payment-num {display: flex; flex-direction: column; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid #eee;}
.payment .payment-num > div {display: flex; align-items: center; justify-content: space-between;}
.payment .payment-num > div p {font-size: 14px; color: #888;}
.payment .payment-num > div span {font-size: 15px; color: #555;}
.payment .final-pay {display: flex; align-items: center; justify-content: space-between; margin-top: 15px;}
.payment .final-pay p {font-size: 14px; color: #888;}
.payment .final-pay span {font-size: 18px; font-weight: 700;}

.pay-met .pay-choice {display: flex; gap: 15px; margin-bottom: 15px;}
.pay-met .pay-choice > div {width: 50%; border-radius: 5px; border: 1.3px solid #ddd; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0; gap: 10px;}
.pay-met .pay-choice > div.on {border-color: #2046a1; background-color: rgba(70, 125, 255, .15);}

.pay-met .pay-choice > div p {font-size: 16px; font-weight: 500;}
.pay-met .pay-choice > div .pay-icon {width: 35px;}
.pay-met select {position: relative; border: 1px solid #ddd; border-radius: 5px; padding: 12px 10px; width: 100%; background: url(../images/select02.png) no-repeat right 10px center; background-size: 10px;}
.pay-met select:focus {outline: none;}
.pay-met .pay-card {display: none;}
.pay-met .pay-card.active {display: block;}
.pay-met .pay-money {display: none;}
.pay-met .pay-money.active {display: block;}
.pay-met .pay-card select {width: 100%; margin-bottom: 10px;}
.pay-met .pay-money .pay-money-info {margin-top: 10px;}
.pay-met .pay-money .pay-money-info p {font-size: 16px; margin-bottom: 8px;}
.pay-met .pay-money > p {font-size: 14px; color: #f3392d; text-align: right; margin-top: 3px;}
.pay-met .pay-money .pay-money-in {border-radius: 10px; background-color: #f5f5f5; padding: 20px; margin-top: 15px;}
.pay-met .pay-money .pay-money-in p {font-size: 15px; font-weight: 600; color: #555; margin-bottom: 15px;}
.pay-met .pay-money .pay-money-in span {font-size: 14px; color: #888; margin-bottom: 5px;}

.privacy-wrap {border: 1px solid #ddd; border-radius: 10px; padding: 10px;}
.privacy > div div {display: flex; align-items: center; justify-content: space-between; padding: 5px 0;}
.privacy > div div p {font-size: 15px;}

/*------- 상담요청 -------*/

.step01 {display: flex; flex-direction: column; align-items: center; padding: 60px 0 20px 0;}
.step01 .step-img {width: 100px; margin: 30px 0 10px 0;}
.step01 p {width: 100%; text-align: left; font-weight: 400; margin-bottom: 10px; font-size: 16px; line-height: 1.5; text-align: center;}
.step01 p b {font-weight: 700;}
.step01 .intro {font-size: 24px; font-weight: 600; text-align: center; line-height: 1.3; margin-bottom: 30px;}
.step01 p:last-child {font-size: 16px; color: #888;}


.step02 h3 {font-size: 18px; font-weight: 700; margin-bottom: 20px;}
.step02 .form-date {border-bottom: 1px solid #eee; padding: 20px;}
.step02 .form-date p {font-size: 16px; margin-bottom: 8px;}
.step02 .form-date input,
.step02 .form-date select {padding: 13px 10px; border: 1px solid #ddd; border-radius: 5px; width: 100%; margin-bottom: 15px;}
.step02 .form-date input:focus,
.step02 .form-date select:focus {outline: none;}
.step02 .form-date select { background: url(../images/select02.png) no-repeat right 10px center; background-size: 10px;}
.form-type {padding: 20px;}
.form-type label {display: flex; align-items: center; gap: 10px; padding: 15px 10px; border-radius: 10px; border: 1px solid #ddd;}
.form-type label .type-icon {width: 40px; }
.form-type label .type-txt {width: calc(100% - 50px);}
.form-type label .type-txt p {font-size: 16px; font-weight: 600;}
.form-type label .type-txt span {color: #555;}
.form-type input {display: none;}
.form-type input[type="radio"]:checked + label {border-color: #2046a1; background-color: rgba(70, 125, 255, .15);}

.form-type .type-wrap {display: flex; flex-direction: column; gap: 10px;}

.Wrap.done {height: 100vh; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.Wrap.done article {margin: 0;}
/* .Wrap.done .btn-wrap {position: absolute; bottom: 50px; left: 0; width: 100%;} */
/* .Wrap.done .btn-wrap button {background-color: white; color: #2046a1; font-weight: 700;} */
.Wrap.done .done-wrap {display: flex; flex-direction: column; align-items: center; gap: 20px;}
.Wrap.done .done-img {width: 90px;}
.Wrap.done .done-txt {text-align: center; padding: 0 20px;}
.Wrap.done .done-txt h3 {font-size: 26px; font-weight: bold; color: #333;}
.Wrap.done .done-txt p {font-size: 15px; color: #888; margin-top: 10px;}

/*------- 간편신청 -------*/

textarea {resize: none; border: 1px solid #ddd; border-radius: 10px; height: 130px;}
textarea:focus {outline: none;}

/*------- 컨설팅 -------*/

.consult header nav > ul {position: relative;}
.consult header nav > ul .main-menu span {font-size: 16px; font-weight: 600; color: #000; display: flex; align-items: center; gap: 5px;}
.consult header nav > ul .main-menu span i {width: 6px; display: inline-block;}
.consult header nav > ul li ul {position: absolute; top: 120%; text-align: center; left:50%; transform: translateX(-50%) ; box-shadow: 2px 0 10px rgba(32, 70, 161, .15); background-color: white; padding: 10px 20px; border-radius: 10px; display: none; width: max-content;}
.consult header nav > ul li ul li {padding: 8px 0; font-size: 15px; width: 100%; text-align: center;}

.consult .consult-bg {padding: 20px; background: linear-gradient(to right, #92C2FF, #A0B8FA, #2D61F3 ); position: relative; width: 100%; overflow: hidden;}
.consult .consult-bg span {font-size: 14px; font-weight: 300; color: white; position: relative; z-index: 10;}
.consult .consult-bg h3 {font-size: 18px; font-weight: 600; color: white; position: relative; z-index: 10;}

.consult .consult-bg .it-bg {position: absolute; bottom: -5px; right: 55px; width: 92px; opacity: 0.7;}

.consult .consult-wrap {padding: 20px;}
.consult .total p {font-size: 14px; font-weight: 600; color: #555; margin-bottom: 20px;}
.consult .total p span {color: #2046a1; display: inline-block; font-weight: 600;}
.consult .consulting-wrap {display: flex; flex-wrap: wrap; row-gap: 20px;}
.consult .consulting-wrap > div {width: calc((100% - 15px) / 2); margin-right: 15px;}
.consult .consulting-wrap > div:nth-child(2n) {margin-right: 0;}
.consult .consulting-wrap > div .consult-img {border-radius: 10px; overflow: hidden; width: 100%; aspect-ratio: 1 / 0.8; margin-bottom: 10px;}

.swiper.deSwiper {border-radius: 0;}
.swiper.deSwiper .swiper-pagination {justify-content: center; padding: 0;}
.swiper.deSwiper .swiper-pagination-bullet {background-color: rgba(255, 255, 255, .8) !important;}
.swiper.deSwiper .swiper-pagination-bullet-active {background-color: #2046a1 !important;}

.policy-con {padding: 20px; font-size: 16px;}

.price {display: flex; align-items: center; gap: 5px; margin-top: 5px;}
.price h4 {font-size: 20px !important; font-weight: 700;}
.price span {font-size: 15px; font-weight: 400; color: #b1b1b1; text-decoration: line-through;}
.price.custom {margin-top: -2px;}
/* .price h4 {font-size: 18px; font-weight: 700;} */
.price.custom h4 {font-size: 16px !important; font-weight: 700;}

.con-first {margin-left: 20px;}
.due-date {display: flex; align-items: center; color: #f3392d; justify-content: flex-end; gap: 5px;}
.due-date em {color: #f3392d;}

.recent {padding: 20px;}
.recent h3 {font-size: 15px; font-weight: 700; margin-bottom: 10px;}
.recent p {font-size: 15px; font-weight: 400; color: #888;}
.search-bar {border-bottom: 2px solid #2046a1;}

.search-con-wrap {padding: 20px; display: none;}
.search-con-wrap > p {font-size: 15px; font-weight: 700; margin-bottom: 10px;}
.search-con {display: flex; align-items: center; gap: 15px;}
/* .search-con > div {width: 50%;} */
.search-con .search-con-img {border-radius: 10px; overflow: hidden; aspect-ratio: 1 / 1; width: 35%;}

/*------- 체크박스 -------*/

.privacy-chk {display: flex; align-items: center; gap: 5px;}
.privacy-chk span {background: url(../images/privacy.png) no-repeat; background-size: cover; width: 15px; height: 15px;}

.privacy-wrap input[type="checkbox"]:checked + label span {background: url(../images/privacy-chk.png) no-repeat; background-size: cover; width: 15px; height: 15px;}

@media (max-width:400px){
    .consult .consult-bg .it-bg {width: 86px; bottom: 0; right: 35px;}
    .result-name p {font-size: 13px;}
}
@media (max-width:360px){
    .consult .consult-bg .it-bg {width: 86px; bottom: 0; right: 35px;}
    .result-name p {font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
    .price h4 {font-size: 15px;}
    .price span {font-size: 13px;}
    .result-name h4 {font-size: 16px;}
    .result-name .star span {font-size: 12px;}
    .result-name .star b {font-size: 12px;}
    .result-name .star .star-icon {width: 11px;}
    .pay-met .pay-card select {font-size: 15px;}

    .search-con {gap: 10px;}
}
@media (max-width:320px){
    .result-name h4 {font-size: 14px;}
    .price span {font-size: 12px;}
    .consult .consult-bg h3 {font-size: 16px;}

    .my-consult > div .my-consult-img {width: 106px !important;}
    .my-consult > div .my-consult-info h3 {font-size: 16px !important; margin-bottom: 2px !important;}
    .my-consult > div .my-consult-info span {font-size: 12px !important;}
    .my-consult > div .my-consult-info p {font-size: 14px !important;}
    .my-consult > div {gap: 10px !important;}
    .my-pay > div h3 {font-size: 16px !important; margin-bottom: 2px !important;}
    .my-pay > div p {font-size: 14px !important;}
    .my-pay-img {width: 106px !important;}
    .my-pay > div {gap: 10px !important;}
}
@media (max-width:300px){
    .my-consult > div .my-consult-info h3 {font-size: 15px !important;}
    .login-part .join p {font-size: 12px;}
    .login-part .join span {font-size: 13px;}

    .search-con-wrap {padding: 20px 16px;}
}