@charset "utf-8";
/* common */
.top-head-title-xl{font-size: 28px;font-weight: 700;line-height: 140%;letter-spacing: -0.56px;}
.top-head-title-l{margin-bottom:24px;font-weight: 700;font-size: 24px;line-height: 140%;letter-spacing: -0.48px;}
.top-head-text-xl{margin-top:6px;font-size: 18px;letter-spacing: -0.36px;line-height: 27px;}

/* main select custom */
/* .bl-custom-select {position: relative;width: 465px;font-size: 16px;color:#687286;}
.bl-custom-select .select-btn {width: 100%;height: 50px;padding: 12px 20px;;border: 1px solid #70B8FF;color:#687286;border-radius: 50px;background: #fff;text-align: left;cursor: pointer;position: relative;}
.bl-custom-select .select-btn .icon-main-select-arr {position: absolute;right: 20px;top: 50%;width: 18px;height: 18px;transform: translateY(-50%);}
.bl-custom-select.active .select-btn .icon-main-select-arr{transform: translateY(-50%) rotate(180deg);} 
.bl-custom-select .select-options {position: absolute;top: calc(100% + 10px);left: 50%;transform: translateX(-50%);pointer-events: none;width:calc(100% - 30px);padding:8px;background: #fff;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.16);border-radius: 6px;max-height: 0;opacity: 0;overflow: hidden;transition: max-height 0.25s ease, opacity 0.25s ease;z-index: 10;}
.bl-custom-select.active .select-options {max-height: 267px;opacity: 1;overflow-y: auto;pointer-events: auto;}
.bl-custom-select .select-options li {position: relative;padding: 10px 12px;cursor: pointer;transition: background 0.2s ease;border-radius:4px;color: #35425C;font-size:16px;line-height:150%;}
.bl-custom-select .select-options li:hover {background: rgba(235, 246, 255, 0.70);} */

.btn-main-estimate{display:flex;align-items: center;justify-content: space-between;padding: 8px 10px 8px 16px;margin:0 auto;width:540px;border-radius: 50px;border: 1px solid #70B8FF;}
.btn-main-estimate:hover .icon-main-top-arr{opacity:.7;}
.btn-main-estimate p{display: flex;align-items: center;gap: 4px;font-size: 16px;line-height: 24px;font-weight: 500;}


/* main common */
.main-con section{margin-bottom:100px;}

/* 고객리뷰 common */
.review-list{display:flex;flex-wrap:wrap;column-gap:48px;row-gap:16px;align-items: flex-start;}
/* .review-list{display: flex;flex-direction: column;justify-content: center;align-items: flex-start;gap: 16px;min-width: 0;} */
.review-list li{width: calc((100% - 48px) / 2);}
.review-list li a{display: flex;gap: 20px;align-items: flex-start;}
.review-list .text-box .badge{margin-bottom:6px;}
.review-list .text-box .title{white-space: nowrap;overflow:hidden;text-overflow: ellipsis;font-weight:500;letter-spacing: -0.3px;}
.review-list .text-box .text.ellipsis-1{white-space: nowrap;overflow:hidden;line-height: 21px;color:#616678;text-overflow: ellipsis;font-size: 14px;letter-spacing: -0.28px;}
.review-list .text-box .info{display: block;margin-top:5px;width: 100%;color:#8C92A4;font-size: 12px;line-height: 18px;letter-spacing: -0.24px;}
.review-list .img{display: flex;flex-direction: column;align-items: flex-start;aspect-ratio: 3/2;width:144px;height:96px;overflow:hidden;border-radius:8px;}
.review-list .img img{width: 100%;height: 100%;object-fit: cover;transition:transform .3s;}
.review-list li:hover img{transform:scale(1.085);}


/* 메인 live 수직 롤링 */
.main-live-box {margin:12px auto 0;width:333px;display:flex;gap:18px;height:23px;}
.main-live-box .live-title{flex-shrink: 0;display:flex;align-items:center;font-size: 12px;color:#687286;}
.main-live-box .live-title strong{display:flex;align-items:center;gap:4px;font-weight: 700;}
.main-live-box .live-title span{font-weight: 600;}
.main-live-box .swiper{width: calc(100% - 104px);margin:0 !important;}
.main-live-box .swiper-slide{font-size:14px;color:#687286;}
.main-live-box .swiper-slide a{display:flex;align-items:center;gap:8px;width:100%;font-size:14px;color:#687286;}

/* quick-box */
.quick-box{display:flex;justify-content:space-between;transform: translateZ(0);}
.quick-box li a{display:flex;flex-direction:column;gap:8px;align-items: center;padding:0 8px;color:#5A6275;font-size:14px;letter-spacing: -0.28px;}
.quick-box li .img{display:flex;align-items:center;justify-content:center;width:60px;height:60px;background-color:#F6F7F8;border-radius:16px;transition:transform .15s;}
.quick-box li:hover .img{transform:translateY(-8px);}


/* main top */
.main-top {padding-top:60px;}
.main-top .main-top-title{display: flex;justify-content: center;margin-bottom:32px;text-align: center;font-size: 32px;font-weight: 700;line-height: 130%;letter-spacing: -0.96px;}
.main-top .main-select-top{display: flex;justify-content: center;gap:8px;}
.main-top .main-select-top .btn-primary{display: flex;height: 50px;padding: 12px 16px;align-items: center;gap: 4px;color: #FFF;font-weight: 500;letter-spacing: -0.32px;border-radius: 50px;}

/* 메인 퀵메뉴 */
.main-con .quick-sec{padding:60px 0 0;margin-bottom: 70px;}

/* 메인 sec-02 */
.main-con .sec-02 >.container{display: grid;grid-template-columns: 1.5fr 1fr;justify-content:space-between;gap:90px;}
.main-con .sec-02 .ban-swiper {width:684px;position:relative;}
.main-con .sec-02 .ban-swiper .swiper{height:200px}
.main-con .sec-02 .ban-swiper .swiper-pagination{display:flex;gap:5px;justify-content: center;bottom: 28px !important;left: 50px !important;width: auto !important;}
.main-con .sec-02 .ban-swiper .swiper-pagination-bullet{width:6px;height:6px;margin:0 !important;background:rgba(255, 255, 255, 0.4);opacity:1;transition:width .3s;}
.main-con .sec-02 .ban-swiper .swiper-pagination-bullet-active{width:18px;background:rgba(255, 255, 255, 0.8);border-radius:6px;}
.main-con .sec-02 .ban-swiper .swiper-slide{border-radius:16px;overflow:hidden;}
.main-con .sec-02 .ban-swiper .swiper-button-next,.main-con .sec-02 .ban-swiper .swiper-button-prev{opacity:0;transition:opacity .3s;}
.main-con .sec-02 .ban-swiper:hover .swiper-button-next,.main-con .sec-02 .ban-swiper:hover .swiper-button-prev{opacity:1;}
.main-con .sec-02 .certi-col{display:flex;flex-direction:column;justify-content:space-between;padding:8px 0;}
.main-con .sec-02 .certi-col li > a{display:flex;justify-content:space-between;align-items:center;}
.main-con .sec-02 .certi-col .lf{display:flex;align-items: center;gap:28px;}
.main-con .sec-02 .certi-col .text{display:flex;flex-direction:column;gap:8px;line-height:120%;}
.main-con .sec-02 .certi-col .text em{color:#687286;font-size:13px;}
.main-con .sec-02 .certi-col .text strong{color:#353849;font-size:17px;font-weight:500;letter-spacing: -0.34px;}
.main-con .sec-02 .certi-col .text span{display:inline-block;margin-top:4px;color:rgba(104, 114, 134, 0.7);font-size:11px;}


/* 메인 review */
.review-swiper-main{position:relative;margin-bottom:60px;}
.review-swiper-main .img{display: flex;width: 362px;height: 245px;overflow:hidden;flex-direction: column;align-items: flex-start;aspect-ratio: 362/245;margin-bottom:10px;position:relative;border-radius:8px;overflow:hidden;}
.review-swiper-main .img img{transition:transform .3s; width: 100%;height: 100%;object-fit: cover; display: block; }
.review-swiper-main .swiper-slide:hover .img img{transform:scale(1.1);}
.review-swiper-main .review-badge{position:absolute;z-index: 9;top:16px;left:16px;}
.review-swiper-main .text-box .title{margin-bottom:2px;color:#353841;font-size:17px;line-height:120%;font-weight:500;letter-spacing: -0.34px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.review-swiper-main .text-box .info{color:#8C92A4;font-size:14px;letter-spacing: -0.28px;}
.review-swiper-main .swiper-prev-common,.review-swiper-main .swiper-next-common{top:99px !important;transform:none;opacity:0;transition:opacity .3s;}
.review-swiper-main:hover .swiper-prev-common,.review-swiper-main:hover .swiper-next-common{opacity:1;}


/* 암행현장 세로형 공통  */
.check-swiper{position:relative;}
.check-swiper a{position: relative;z-index: 1;display: flex;width: 266px;height: 346px;overflow: hidden;border-radius: 10px;}
.check-swiper a::before{display:block;position:absolute;z-index: 2;width:100%;height:100%;background: linear-gradient(180deg, rgba(37, 37, 37, 0.00) 22.63%, rgba(37, 37, 37, 0.50) 45.26%, rgba(37, 37, 37, 0.80) 90.53%);background-blend-mode: multiply;content:'';}
.check-swiper a img{position: relative;z-index: 1;aspect-ratio: 133/173;transition:transform .3s;-o-object-fit:cover; object-fit: cover;}
.check-swiper a:hover img{transform:scale(1.12);}
.check-swiper a .text{position: absolute;z-index: 2;display: flex;padding: 28px 24px;width: 100%;height: 100%;;flex-direction: column;justify-content: flex-end;align-items: flex-start;color: #fff;gap: 4px;}
.check-swiper a .text .num{font-size: 14px;font-weight: 500;line-height: 130%;letter-spacing: -0.28px;}
.check-swiper a .text .title{font-size: 18px;font-weight: 700;line-height: 130%;letter-spacing: -0.36px;margin-bottom: 4px;}
.check-swiper a .text .date{color:#AAAFBC;font-size: 13px;font-weight: 500;line-height: 130%;letter-spacing: -0.26px;}
.check-swiper .swiper-prev-common,.check-swiper .swiper-next-common{opacity:0;transition:opacity .3s;}
.check-swiper:hover .swiper-prev-common,.check-swiper:hover .swiper-next-common{opacity:1;}


/* 이벤트 */
.main-con .event-swiper{position:relative;}
.main-con .event-swiper .swiper-slide{height:152px;border-radius: 7.826px;overflow:hidden;}
.main-con .event-swiper .swiper-slide img{width:100%;}
.main-con .event-swiper .swiper-prev-common,.main-con .event-swiper .swiper-next-common{opacity:0;transition:opacity .3s;}
.main-con .event-swiper:hover .swiper-prev-common,.main-con .event-swiper:hover .swiper-next-common{opacity:1;}

/* 메인 sec-06 */
.main-con .sec-06 >.container{display:grid;grid-template-columns: 1fr 1fr;gap:60px;}
.main-con .sec-06 .faq-box{position:relative;width: 520px;}
.main-con .sec-06 .faq-box .top-title{margin-bottom:40px;}
.main-con .sec-06 .faq-box .btn-more{position:absolute;top:5px;right:0;color:#616678;font-size:16px;}
.main-con .sec-06 .faq-box{}
.main-con .sec-06 .faq-box ul{display:flex;flex-direction:column;gap:20px;}
.main-con .sec-06 .faq-box a{display:flex;align-items:center;justify-content:space-between;transition:opacity .3s;}
.main-con .sec-06 .faq-box a:hover{opacity:0.8;}
.main-con .sec-06 .faq-box p{color:#353841;font-size:18px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;max-width: 88%;}
.main-con .sec-06 .contact-box{display:flex;padding:48.5px 0;border:1px solid #C3C6CE;border-radius:10.5px;}
.main-con .sec-06 .contact-box a{display: flex;flex-direction: column;align-items: center;justify-content: center;flex:1;gap: 16px;color:#353841;letter-spacing: -0.32px;font-size:16px;border-right:1px solid #C3C6CE;}
.main-con .sec-06 .contact-box a:last-child{border-right:0;}
.main-con .sec-06 .contact-box a i{transition:opacity .3s;}
.main-con .sec-06 .contact-box a:hover i{opacity:0.8;}