@charset "utf-8";

/********************
** header
********************/
.contactLine {border:1px solid #D9DADE;}
header {border-bottom:1px solid #D9DADE;}
.fixBtns {right:2%; bottom:4%;}

/********************
** mainBanner
********************/
.mainBanner {position: relative; overflow: hidden;}
.mainBannerWrap {display: flex; align-items: center; justify-content: space-between;}
.mainBannerText {flex: 1 1 55%; position: relative; z-index: 2;}
.mainBannerCopy {transition: opacity 0.3s ease, transform 0.3s ease; opacity: 1; transform: translateY(0);}
.mainBannerCopy.is-fading {opacity: 0; transform: translateY(8px);}
.mainBannerCopyData {display: none;}
.mainBannerSwiper {flex: 0 0 40%; max-width: 560px; width: 100%; position: relative; z-index: 1;}
.mainBannerImage img {width: 100%; height: auto; display: block;}
.mainBannerPagination {position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 2;}
.mainBannerPagination .swiper-pagination-bullet {width: 10px; height: 10px; background: #d9dade; opacity: 1; margin: 0 4px;}
.mainBannerPagination .swiper-pagination-bullet-active {background: #703c8f;}
.mainBannerNav {position: absolute; right: 16px; bottom: 24px; display: flex; gap: 12px; z-index: 2;}
.mainBannerNav button {width: 44px; height: 44px; border-radius: 999px; border: 1px solid #d9dade; background: rgba(255, 255, 255, 0.8); cursor: pointer; display: flex; align-items: center; justify-content: center;}
.mainBannerNav button::before {content: ""; width: 10px; height: 10px; border-top: 2px solid #703c8f; border-right: 2px solid #703c8f; display: block;}
.mainBannerPrev::before {transform: rotate(-135deg);}
.mainBannerNext::before {transform: rotate(45deg);}
.mainBannerBg {right: 0; bottom: 0; z-index: 0;}

@media only screen and (max-width: 1200px) {
    .mainBannerWrap {flex-direction: column; align-items: flex-start; min-height: auto; padding: 40px 0 80px;}
    .mainBannerSwiper {max-width: none; width: 100%;}
    .mainBannerNav {right: 20px;}
}

@media only screen and (max-width: 768px) {
    .mainBannerNav {display: none;}
    .mainBannerPagination {bottom: 20px;}
}


/********************
** about
********************/
.aboutBg {left:0; bottom:0;}
.aboutBgTop {right:0; top:0;}

/********************
** why
********************/
.whyCntLine {box-shadow:0 0 8px #D9DADE;}

/********************
** product
********************/
.productWrap {align-items: flex-start;}
.productTextSwiper {flex: 0 0 40%; max-width: 40%;}
.productTextSwiper .swiper-slide {height: auto;}
.productImageSwiper {flex: 0 0 50%; max-width: 50%;}
.productImageSwiper .swiper-slide img {display: block; width: 100%; height: auto;}
.productImageProgress {position: relative; height: 12px; background: #EEEEF0; margin-top: 16px; overflow: hidden;}
.productImageProgress .swiper-pagination-progressbar-fill {background: #91949F;}

@media only screen and (max-width: 1200px) {
    .productWrap {flex-direction: column;}
    .productTextSwiper,
    .productImageSwiper {flex: 0 0 100%; max-width: 100%; width: 100%;}
}

.productTable{border-top:1px solid #26272B; border-bottom:1px solid #26272B;}
.productTable tr {border-bottom:1px solid #D9DADE;}
.productTable tr:last-child {border-bottom:none;}

/********************
** solution
********************/
.solutionTop {top:0; left:0;}
.solutionbottom {bottom:0; right:0;}

/********************
** location
********************/
.locationTxtBox  {background: linear-gradient(to bottom, #FFFFFF, #F9F6FD);}
.section_address {display: none !important;}
.wrap_controllers {display: none !important;}
.wrap_btn_zoom {display:none !important;}
.root_daum_roughmap {width:100% !important; height:100% !important;}
.wrap_map {height:100% !important;}

/********************
** Contact
********************/
.consultModal {position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(38, 39, 43, 0.6); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease; z-index: 1000;}
.consultModal.is-open {opacity: 1; visibility: visible; pointer-events: auto;}
.consultModal__overlay {position: absolute; inset: 0; z-index: 0;}
.consultModal__dialog {position: relative; z-index: 1; width: min(980px, 40vw); max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);}
.consultModal__close {width: 40px; height: 40px; border-radius: 999px; background: url("/img/closeBtn.svg") no-repeat center; background-size: 18px 18px; cursor: pointer;}
.consultModal__close::before,
.consultModal__close::after {content: none;}
.consultModal .inner {width: 100%; margin: 0;}
body.modal-open {overflow: hidden;}

.addressSearchBtn {flex: 0 0 auto; white-space: nowrap; border: none; cursor: pointer;}

.online{background:url('/img/contactBg.jpg'); background-size:cover;}
.inputBox{ padding: 24px; border: 1px solid #D9DADE; border-radius: 4px;}
.inputBox:placeholder-shown{color: #91949f; line-height: 1em;}

.custom-checkbox{width: 20px; height: 20px; padding: 0; border: none; background: url('/img/chkOff.svg') no-repeat center; background-size: 20px 20px; margin-right: 10px; transition: background 0.2s ease; position: relative;}
.checkpolicy input[type="checkbox"] {display: none;}
.checkpolicy input[type="checkbox"]:checked + .custom-checkbox{background: url('/img/chkOn.svg') no-repeat center; background-size: 20px 20px;}
.checkpolicy input[type="checkbox"]:checked + .custom-checkbox::after{content: none;}

.moreBtn{text-decoration: underline;}

.onlineBtn{ cursor: pointer;}

/********************
** footer
********************/
footer {background:linear-gradient( to bottom, #26272B, #37383E);}

.loginBg {background:url('/img/loginBg.jpg'); background-position:center; background-size:cover;}
.loginBox {box-shadow:0 0 16px rgba(0, 0, 0, 0.05);}
.adminBtnLine {border:1px solid #d9dade;}
/********************
** sonsult
********************/
/** List **/
.sonsultTable th {border-bottom:1px solid #D9DADE; border-top:1px solid #D9DADE; border-right:1px solid #D9DADE;}
.sonsultTable th:last-child {border-right:none;}
.sonsultTable td {border-bottom:1px solid #D9DADE; border-top:1px solid #D9DADE; border-right:1px solid #D9DADE;}
.sonsultTable td:last-child {border-right:none;}

.consiltCntLine {border-top:1px solid #EEEEF0;}
.consiltCnts .consiltCntLine:last-child {border-bottom:1px solid #EEEEF0;}