@charset "utf-8";

/* ******************* *
* common
* ******************* */
.msec {margin-bottom: 100px;}
.msec-tit {margin-bottom: 18px;}
.msec-tit > .title {color: #fff;font-family: var(--font-esamanru);font-size: 1.75em;font-weight: 500;}
.msec-tit > .desc {color: #8F8F8F;font-size: 18px;}

@media all and (max-width: 768px){
    .msec {margin-bottom: 80px;}
}
@media all and (max-width: 640px){
    .msec-tit > .title {font-size: 28px;}
}


/* ******************* *
* msec01 
* ******************* */
.msec01 {margin: 50px auto;}
.msec01 > .cinner {display: flex;justify-content: space-between;align-items: stretch;gap: 20px;}
.msec01 > .cinner > div {border-radius: 20px;overflow: hidden;}
.mvis {max-width: 880px;width: 74%;height: 100%;position: relative;}
.mvis .swiper-slide > .img {position: relative;}
.mvis .swiper-slide > .img::before {content: '';display: block;width: 0;padding-top:45.45%;}
.mvis .swiper-slide > .img > img {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.mvis .mvis-pagination {width: auto !important;position: absolute;top: auto !important;left: 50% !important;bottom: 20px !important;transform: translateX(-50%);z-index: 10;}
.mvis .mvis-pagination > .swiper-pagination-bullet {width: 8px;margin: 0 1.5px !important;aspect-ratio: 1 / 1;border-radius: 4px;background: var(--color1);opacity: 1;}
.mvis .mvis-pagination > .swiper-pagination-bullet-active {width: 25px;background: #FF7E0C;}
.mconsult {flex: 0 0 auto;max-width: 300px;width: 25%;background: #fff;}
.mconsult > .title {display: flex;justify-content: center;align-items: center;gap: 10px;height: 60px;background: var(--color-main);color: #fff;font-family: var(--font-esamanru);font-size: 1.10em;font-weight: 500;position: relative;}
.mconsult > .title::before {content: '';display: block;width: 25px;aspect-ratio: 1 / 1;background: url(../img/main/msec01-ico_01.png) center center / cover no-repeat;}
.mconsult > form {display: flex;flex-direction: column;justify-content: space-between;height: calc(100% - 60px);padding: 20px;box-sizing: border-box;}
.mconsult > form ul {display: flex;flex-direction: column;gap: 10px;width: 100%;margin-bottom: 10px;}
.mconsult > form ul > li > .rdos {display: flex;align-items: center;flex-wrap: wrap;gap: 10px 14px;}
.mconsult > form ul > li > .rdos > .rdo {font-size: 18px;font-weight: 500;cursor: pointer;}
.mconsult > form ul > li > .rdos > .rdo > label {display: flex;align-items: center;gap: 5px;padding-left: 25px;position: relative;}
.mconsult > form ul > li > .rdos > .rdo > label::before,
.mconsult > form ul > li > .rdos > .rdo > label::after {content: '';display: block;border-radius: 50%;box-sizing: border-box;position: absolute;top: 0;bottom: 0;margin: auto;}
.mconsult > form ul > li > .rdos > .rdo > label::before {width: 20px;height: 20px;border: 1px solid #DDD;background: #fff;left: 0;}
.mconsult > form ul > li > .rdos > .rdo > label::after {width: 10px;height: 10px;background: var(--color-main);left: 5px;visibility: hidden;opacity: 0;}
.mconsult > form ul > li > .rdos > .rdo > input[type=radio] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}
.mconsult > form ul > li > .rdos > .rdo > input[type=radio]:checked + label:after {visibility: visible;opacity: 1;}
.mconsult > form ul > li > input[type=text] {width: 100%;height: 45px;padding: 6px 16px;border: 1px solid #E9E9E9;border-radius: 5px;box-sizing: border-box;color: #333;font-size: 16px;font-weight: 500;}
.mconsult > form ul > li > input[type=text]::placeholder {color: #AEAEAE;font-size: 15px;font-weight: 400;}
.mconsult > form .agree-box {display: flex;justify-content: space-between;align-items: center;}
.mconsult > form .agree-box > .cont >input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } 
.mconsult > form .agree-box > .cont >input[type="checkbox"] + label {display: flex;align-items: center;margin-bottom: 0;padding-left: 22px;color: #000;font-size: 15px;position: relative;cursor: pointer;} 
.mconsult > form .agree-box > .cont >input[type="checkbox"] + label:before,
.mconsult > form .agree-box > .cont >input[type="checkbox"] + label:after {content: ''; display: block; box-sizing: border-box; position: absolute; top: -1px; bottom: 0; margin: auto;} 
.mconsult > form .agree-box > .cont >input[type="checkbox"] + label:before {border-radius: 2px;width: 15px;height: 15px;border: 1px solid #ebebeb;box-sizing: border-box;border-radius: 2px;background: #fff;left: 0;} 
.mconsult > form .agree-box > .cont >input[type="checkbox"] + label:after {border: 2px solid #fff;border-top: 0;border-right: 0;width: 9px;height: 5px;transform: rotate(-45deg);margin: 11px 0 0 0;opacity: 0;top: -5px;left: 3px;} 
.mconsult > form .agree-box > .cont >input[type="checkbox"]:checked + label:before {background: var(--color-main);} 
.mconsult > form .agree-box > .cont >input[type="checkbox"]:checked + label:after {opacity: 1;transition: .35s linear;} 
.mconsult > form .agree-box > a {color: var(--color1);font-size: 15px;font-weight: 700;}
.mconsult > form > button {display: block;width: 100%;height: 50px;margin: 0 auto 0;border: 0;border-radius: 5px;background: #3E4045;color: #fff;font-size: 18px;font-weight: 600;}

@media all and (max-width: 1399px){
    .mconsult > form ul > li > input[type=text] {height: 40px;}
    .mconsult > form > button {height: 40px;font-size: 16px;}
}
@media all and (max-width: 1199px){
    .msec01 > .cinner {flex-direction: column;}
    .mvis {max-width: none;width: 100%;}
    .mconsult {max-width: none;width: 100%;}
    .mconsult > .title {height: 50px;}
    .mconsult > form ul {flex-direction: row;flex-wrap: wrap;justify-content: space-between;}
    .mconsult > form ul > li {width: 32%;}
    .mconsult > form ul > li:first-child {width: 100%;}
    .mconsult > form > button {margin-top: 10px;}
}
@media all and (max-width: 768px){
    .msec01 > .cinner > div {border-radius: 10px;overflow: hidden;}
    .mconsult > form ul > li > .rdos > .rdo > label {font-size: 16px;}
    .mconsult > form ul > li > input[type=text] {font-size: 14px;}
}
@media all and (max-width: 640px){
    .msec01 {margin: 30px auto 50px;}
    .mconsult > form ul > li {width: 100%;}
}

/* ******************* *
* msec02, .msec03 슬라이드 공통
* ******************* */
.list-swiper-cont {position: relative;}
.list-swiper {position: relative;overflow: hidden;}
.list-swiper .list-cont {border-radius: 10px;overflow: hidden;}
.list-swiper .list-cont .img-cont {position: relative;}
.list-swiper .list-cont .img-cont > .img {position: relative;}
.list-swiper .list-cont .img-cont > .img::before {content: '';display: block;width: 0;padding-top: 59.65%;}
.list-swiper .list-cont .img-cont > .img > img {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.list-swiper .list-cont .img-cont > .tag {max-height: 30px;padding: 5px 12px;border-radius: 5px;box-sizing: border-box;background: var(--color1);color: #fff;font-size: 15px;font-weight: 600;position: absolute;top: 10px;right: 10px;}
.list-swiper .list-cont .info-cont {padding: 20px;box-sizing: border-box;background: #FFF;}
.list-swiper .list-cont .info-cont > .title {display: flex;justify-content: space-between;align-items: center;gap: 5px 10px;margin-bottom: 15px;padding-bottom: 5px;border-bottom: 1px solid rgba(0,0,0,.1);}
.list-swiper .list-cont .info-cont > .title > .tit {width: 100%;font-family: var(--font-esamanru);font-size: 1.10em;font-weight: 300;display: -ms-flexbox;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 1;}
.list-swiper .list-cont .info-cont > .title > .brand {flex: 0 0 auto;display: flex;justify-content: flex-end;align-items: center;gap: 5px;width: 120px;}
.list-swiper .list-cont .info-cont > .title > .brand > .img > img {height: 25px;}
.list-swiper .list-cont .info-cont > .title > .brand > .txt {font-size: 14px;font-weight: 600;}
.list-swiper .list-cont .price-info {margin-bottom: 15px;}
.list-swiper .list-cont .price-info > ul > li {display: flex;justify-content: space-between;align-items: center;}
.list-swiper .list-cont .price-info > ul > li > .tit {font-size: 16px;}
.list-swiper .list-cont .price-info > ul > li.price > .txt {color: #777;font-size: 16px;}
.list-swiper .list-cont .price-info > ul > li.rental > .txt {font-size: 18px;}
.list-swiper .list-cont .price-info > ul > li.rental > .txt > span {color: var(--color1);font-size: 1.56em;font-weight: 600;}
.list-swiper .list-cont .etc {display: flex;gap: 5px;margin-bottom: 15px;}
.list-swiper .list-cont .etc > p {max-height: 28px;padding: 4px 20px;border-radius: 14px;background: #EBEBEB;font-size: 14px;}
.list-swiper .list-cont .btn-consult {display: flex;justify-content: center;align-items: center;width: 100%;height: 45px;border: 0;border-radius: 5px;background: var(--color1);color: #fff;font-size: 18px;font-weight: 600;line-height: 1.0;}
.list-swiper .empty {width: 100% !important;padding: 50px 0;color: #fff;font-size: 18px;text-align: center;}
.list-swiper-ctrls {display: flex;align-items: center;width: 100%;}
.list-swiper-ctrls button {display: block;width: 54px;height: 54px;border: 1px solid #EBEBEB;border-radius: 50%;box-sizing: border-box;background: #fff;position: absolute;top: 0;bottom: 0;margin: auto;z-index: 1;}
.list-swiper-ctrls button:after {content: '';display: block;border-width: 3px;border-style: solid;border-color: transparent var(--color1) var(--color1) transparent;border-radius: 3px;box-sizing: border-box;width: 30%;height: 30%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
.list-swiper-ctrls .btn-prev {right: calc(100% - 20px);}
.list-swiper-ctrls .btn-prev:after {transform: rotate(135deg) translate(-10%, -10%);}
.list-swiper-ctrls .btn-next {left: calc(100% - 20px);}
.list-swiper-ctrls .btn-next:after {transform: rotate(-45deg) translate(-10%, -10%);}
.list-swiper-ctrls button.swiper-button-lock {display: none;}

.btn-list-more {display: flex;justify-content: center;align-items: center;width: 190px;height: 50px;margin: 40px auto 0;border: 2px solid #fff;border-radius: 25px;box-sizing: border-box;color: #fff;font-size: 18px;font-weight: 500;text-align: center;transition: .35s;}
.btn-list-more:hover {background: #fff;color: #2A2C30;}

@media all and (max-width: 1399px){
    .list-swiper .list-cont .info-cont > .title {flex-direction: column-reverse;align-items: normal;}
    .list-swiper .list-cont .info-cont > .title > .brand {justify-content: normal;width: auto;}
    .list-swiper .list-cont .etc > p {padding: 4px 12px;}
}
@media all and (max-width: 1199px){
    .list-swiper .list-cont .price-info > ul > li.rental > .txt {font-size: 16px;}
    .list-swiper .list-cont .price-info > ul > li.rental > .txt > span {font-size: 1.33em;}
}
@media all and (max-width: 1024px){
    .list-swiper-ctrls button {width: 45px;height: 45px;}
}
@media all and (max-width: 640px){
    .btn-list-more {width: 150px;height: 45px;font-size: 16px;}
}

/* ******************* *
* msec04
* ******************* */
.msec04 .adm-btns {display: flex;justify-content: center;align-items: center;gap: 10px;margin-top: 20px;}
.msec04 .adm-btns > a {display: block;padding: 5px 10px;background: #E04545;color: #fff;font-size: 14px;font-weight: 500;}



/* ******************* *
* msec05
* ******************* */
.msec05 > .cinner {display: flex;justify-content: space-between;align-items: stretch;}
.msec05 .ban-cont {display: flex;flex-direction: column;gap: 10px;max-width: 580px;width: 49%;}
.msec05 .ban-cont > .img {position: relative;border-radius: 15px;overflow: hidden;}
.msec05 .ban-cont > .img::before {content: '';display: block;width: 0;padding-top: 29.31%;}
.msec05 .ban-cont > .img > img  {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.msec05 .faq-cont {max-width: 580px;width: 49%;}
.msec05 .faq-cont > .faq-list > .title {display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;}
.msec05 .faq-cont > .faq-list > .title > .tit {color: #fff;font-family: var(--font-esamanru);font-size: 1.25em;font-weight: 500;}
.msec05 .faq-cont > .faq-list > .title > .btn-more {display: block;width: 20px;aspect-ratio: 1 / 1;position: relative;transition: .35s;}
.msec05 .faq-cont > .faq-list > .title > .btn-more::before,
.msec05 .faq-cont > .faq-list > .title > .btn-more::after {content: '';display: block;width: 100%;height: 2px;background: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.msec05 .faq-cont > .faq-list > .title > .btn-more::after {transform: translate(-50%, -50%) rotate(90deg);}
.msec05 .faq-cont > .faq-list > ul > li:not(:last-child) {margin-bottom: 10px;}
.msec05 .faq-cont > .faq-list > ul > li > a {display: flex;align-items: center;gap: 5px;width: 100%;height: 50px;padding: 10px 30px;box-sizing: border-box;border-radius: 25px;background: #fff;font-size: 17px;line-height: 1.0;position: relative;text-overflow: ellipsis;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 1;}
.msec05 .faq-cont > .faq-list > ul > li > a::before {content: 'Q.';color: var(--color1);font-size: 1.41em;font-weight: 600;}
.msec05 .faq-cont > .faq-list > ul > li > a > span {display: -ms-flexbox;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 1;}
.msec05 .faq-cont > .faq-list > ul > li > a:hover > span {text-decoration: underline;text-underline-offset: 2px;}

@media all and (max-width: 1199px){
    .msec05 > .cinner {flex-direction: column;}
    .msec05 .ban-cont {flex-direction: row;gap: 20px;max-width: none;width: 100%;margin-bottom: 30px;}
    .msec05 .ban-cont > .img {width: calc(50% - 10px);}
    .msec05 .faq-cont {max-width: none;width: 100%;}
}
@media all and (max-width: 1024px){
    .msec05 .ban-cont {gap: 10px;}
    .msec05 .ban-cont > .img {width: calc(50% - 5px);}
}
@media all and (max-width: 768px){
    .msec05 .ban-cont {flex-direction: column;}
    .msec05 .ban-cont > .img {width: 100%;border-radius: 10px;}
}
@media all and (max-width: 640px){
    .msec05 .faq-cont > .faq-list > ul > li > a {padding: 14px 20px;font-size: 16px;}
}

/* ******************* *
* msec06
* ******************* */
.msec06 .msec-tit {text-align: center;}
.msec06 .content {display: flex;flex-direction: column;gap: 15px;}
.msec06 .content ul {display: flex;align-items: center;gap: 15px;}
.msec06 .content ul > li {width: 200px;}

@media all and (max-width: 1024px){
    .msec06 .content ul > li {width: 160px;}
}