@charset "utf-8";

/***********************
******* 해더
************************/
header{border-bottom: 1px solid #F7F8F8; top: 0;  left: 0;  transition: background-color 0.4s ease, border-color 0.4s ease;}
.menu {  transition: color 0.4s ease;}
/* JavaScript로 추가될 .scrolled 클래스의 스타일입니다. */
header.scrolled {  background-color: white;  border-bottom: 1px solid #F7F8F8 !important; }
header.scrolled .menu {  color: #222;}


/***********************
******* 메인베너
************************/
.slider-container {  overflow: hidden;}
.slide {  top: 0;  left: 0;  background-size: cover;  background-position: center;  opacity: 0;  transition: opacity 1.5s ease-in-out; }
.slide.active {  opacity: 1;}
.slide-indicators {    position: absolute;    bottom: 20px;   left: 50%;    transform: translateX(-50%);   gap: 10px;  }
.indicator {    width: 12px;    height: 12px;    border: 2px solid white;    border-radius: 50%;    cursor: pointer;    transition: background-color 0.5s ease;  }
.indicator.active {    background-color: white;  }
.quickMenu{right:60px; bottom:40px;}
.shadowTxt{text-shadow: 0 0 8px rgba(0, 0, 0, 0.25);}
/***********************
******* about
************************/
.about{background:url('/img/aboutImg.png');   background-repeat: no-repeat; background-size:488px; background-position: right bottom;}

/***********************  
******* who
************************/
.whoBg{left:0; bottom:0}
.whoTxtBox{  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);}


/***********************  
******* HOW
************************/
.HOW{background:url('/img/howBg.jpg'); background-size:cover;}
.howgrid{display:grid;  grid-template-columns: repeat(3, 2fr);}
.howImgBox{border:1px solid #D9DADE;}

/***********************  
******* review
************************/
.reviewPointTxt{bottom:0;}
.review_section{background:url('/img/reviewBg.png'); background-size:80%; background-position: left top; background-repeat: no-repeat;}
.review_slider_area {      flex-grow: 1;      overflow: hidden;  }
.review_slider_track {display: flex;transition: transform 0.5s ease-in-out;}
.review_slide_content{overflow:hidden;   box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); display:flex; flex-direction: column; align-items: stretch;  height: 100%;}
.review_slide_item {      flex: 0 0 65%; padding-left:3px; }
.review_slide_content img {object-fit: cover;  }

 /* ----- 3. 게이지 바 (Progress Bar) ----- */
.review_progress_bar_container {  width: 100%;  background-color: #EEEEF0;  height: 8px;  margin-top: 40px;}
.review_progress_bar {  width: 0%; /* 시작 너비는 0 */  height: 100%;  background-color: #455C59;  /* 너비가 변경될 때 0.5초 동안 부드럽게 움직이도록 설정 */  transition: width 0.5s ease-in-out; }

/***********************  
******* service
************************/
.serviceBox{border:1px solid #D9DADE;}  
.serviceList{display:grid; grid-template-columns: repeat(2, 1fr);}
.serviceBox1{border-radius:16px 0 0 0 }
.serviceBox2{border-radius:0 16px 0 0 }
.serviceFoot{border-radius: 0 0 16px 16px;letter-spacing: 0; background: linear-gradient(to right, #738E8A, #62807C);}

/***********************  
******* why
************************/
.why{background:url('/img/whyBg.jpg'); background-size:cover;}
.whyContact{display:grid;  grid-template-columns: repeat(3, 1fr);}

/***********************  
******* lastBanner
************************/
.lastBanner{background: linear-gradient(to bottom, #26272B, #41424B);}

/***********************  
******* qa
************************/
.qa{background:url('/img/contact.jpg'); background-size:cover;}
.form_agreement input[type="checkbox"] {  margin-right: 10px;  appearance: none;  width: 18px;  height: 18px;  border: 1px solid #ccc;  border-radius: 3px;  cursor: pointer;  position: relative;}
.form_agreement input[type="checkbox"]:checked {  background-color: #161D1D;  border-color: #161D1D;}
/* 체크 표시 (V) 만들기 */
.form_agreement input[type="checkbox"]:checked::after {  content: '✔';  color: white;  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  font-size: 12px;}
.policymore{text-decoration: underline;}


/***********************  
******* login
************************/
.login{background:url('/img/login.jpg'); background-size:cover;}
.input-group input{border:1px solid #D9DADE}
.checkbox-group input[type="checkbox"] {    display: none;}
.checkbox-group label {    cursor: pointer;}
.checkbox-group label::before {    content: '';    display: inline-block;    width: 20px;    height: 20px;    margin-right:8px;    border: 1px solid #26272B;    transition: background-color 0.2s;}
.checkbox-group input[type="checkbox"]:checked + label::before {    background-color: #26272B;     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");    background-position: center;    background-repeat: no-repeat;}


/***********************  
******* admin
************************/
.admin{background:url('/img/login.jpg'); background-size:cover;}


/***********************  
******* onlineList
************************/
.onlineViews {border-top:1px solid #D9DADE; border-bottom:1px solid #D9DADE;}
.onlineViews tr {border-top:1px solid #D9DADE;}
.onlineListBtn {border:1px solid #D9DADE;}
.styleN {border:none;}
.onlineLine {border:1px solid #D9DADE;}
.onlineLists {border-top:1px solid #D9DADE; border-bottom:1px solid #D9DADE;}
.onlineLists tr{border-top:1px solid #D9DADE;}
.onlineLists tr th:not(:last-child){border-right:1px solid #D9DADE;}
.onlineLists tr td:not(:last-child){border-right:1px solid #D9DADE;}

/***********************  
******* policy
************************/
.policyTp {border-bottom:1px solid #222;}