html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
  scroll-behavior: auto !important;
}


 .main_3 {
    width: 100%;
    height:100%;background-color:#fff;
	/* background-color:#fff;
	 
  background-image: url(https://eumpro.co.kr/estate/assets/img/2440x1000_1.jpg);

	background-size: 1920px auto;
    background-position: center;
    background-repeat: no-repeat;*/  padding-top:180px;padding-bottom:50px;
}

@media screen and (max-width:767px){
 .main_3 {
    padding-top:40px;

}
}



/* 목록
-----------------------------------------------------------------*/
/*일부수정*/

.strip .wrapper {
  padding: 20px 5px 15px 15px;  flex; /* 부모가 flex일 때 */
}
 

.strip .wrapper h3 {font-size:15px;   
font-size: 1.20rem;
  margin: 0;
  color: #000;
  font-weight: 400;
  
  /* 1. 띄어쓰기 기준으로 줄바꿈 (한글 권장) */
  word-break: keep-all;
  overflow-wrap: break-word; /* 긴 단어가 있을 경우 대비 */

  /* 2. 최대 2줄까지만 보여주고 이후는 말줄임 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 이 숫자를 2로 설정 */
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* 3. 기존의 white-space: nowrap은 반드시 삭제하거나 normal로 변경 */
  white-space: normal; 
  
  /* 높이는 2줄 분량에 맞춰 유연하게 두거나 조정하세요 */
  line-height: 1.3; 
  max-height: 2.8em; /* line-height의 2배수 */


min-height:45px;font-weight:400;margin-bottom:15px;}

.strip .wrapper h4 { font-size: 16px;  font-size: 1rem;font-weight:400;margin-bottom:20px;;}
.strip .wrapper h6 {margin:0px 0px 0px 0px;font-size:23px;    font-size:1.5rem;  color:#000;font-weight:500;margin-bottom:9px;}
.strip .wrapper p {margin:0px 0px 0px 0px;font-size:18px; font-size:1.125rem;  color:#121212;font-weight:400;}
.strip .wrapper small {  margin-top: 2px;  display: inline-block;  font-size: 16px;  font-size: 1rem;font-weight:400;}
.strip .wrapper h4 span,.strip .wrapper h6 span,.strip .wrapper small span{margin:0px 10px 0px 10px;font-size:10px; border-right: 1px solid #dcd9d9;}
.strip .wrapper p span{color:#168ab0;font-weight:600;}



/*--------------------------------------------------------------
  우측 견적-2024/alarms
--------------------------------------------------------------*/
.intro_title_booking {
	margin-top:0px;margin-bottom:80px;font-weight:500;
}
.intro_title_booking h2 {
    font-size:36px;
	margin-bottom:10px;
	color:#121212;line-height:40px;
	
	/*text-transform:uppercase;*/
}
.intro_title_booking h2 span {
 color:#888;   
}
.intro_title_booking p {
	color:#888;
	font-size:30px;
}

@media (max-width: 767px) {
.strip .wrapper h3 {
min-height:30px;margin-bottom:10px;}

  .intro_title_booking {
	margin-top:-30px;
}

.intro_title_booking h2 {
  font-size:24px;
 font-size:1.5rem;margin-bottom:10px;line-height:24px;
	
}
.intro_title_booking p {
	font-size:16px; 
}


}


.mb-20 {margin-bottom:20px !important; }

.sp-padding {
  padding-top:180px;
  padding-bottom:50px;
}

 .box { position: relative;
        display: flex;
        align-items: center;
            justify-content: center;
            color: white;
            font-weight: 500px;
            background-image: url(https://eumpro.co.kr/common/img/bg/sample8.jpg);

	background-size: auto;
    background-position: center;
    background-repeat: no-repeat
            overflow: hidden;
            cursor: pointer;min-height:400px; 
        }
 .box:hover, .box.active {
            transform: scale(1.00);
           /* box-shadow: 0 10px 10px rgba(255, 255, 255, 0.1); filter: brightness(1.1);*/
            z-index: 10;background-color:#333;
           
        }

  .box:hover::before {
            background-position: 10% 10%, 80% 20%, 30% 70%, 70% 80%;
        }

        .box:hover::after {
            background-position: 50% 40%, 20% 80%, 90% 60%, 10% 40%;
            animation-delay: 0.4s;
        }

        @keyframes magic-sparkle {
            0% { transform: scale(0.5); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: scale(1.3); opacity: 0; }
        }




@media screen and (max-width:767px){
.sp-padding {
  padding-top:60px;
  padding-bottom:20px;
}
 .box {background-color:none; border:0px solid #112075;height: 100%; min-height:160px;   }
 .boxline {background-color: #2c48dc; border:1px solid #112075;margin-bottom:20px; }
}



/* ----------------------------------------
   커스텀 컨트롤러 (화살표 + 숫자 페이지네이션)
---------------------------------------- */
    /* Swiper 공통 설정    
*/
 .swiper {
      /*width:100%;
      height: 100%;
      /* 하단 컨트롤러가 슬라이드를 가리지 않도록 여백 확보 */
      padding-bottom:20px; 
      box-sizing: border-box;
    }

	
/* ----------------------------------------
   커스텀 컨트롤러 (화살표 + 숫자 페이지네이션)
---------------------------------------- */
/* 컨트롤러 전체 컨테이너 */
.slider-controls {
  position: absolute;
  bottom:0px;/*swiper  bottom 간격에 맞춰 조정*/
  left: 50%;
  transform: translateX(-50%);
  width:98%; /* 배너 영역에 맞춰 조절 가능 */
  max-width: 1400px;
  display: flex;
  align-items:center;
  gap: 30px; /* 바와 버튼 그룹 사이의 간격 */
  z-index: 10;
}
/* 좌측 프로그레스 바 영역 (공간을 꽉 채움) */
.progress-container {
  flex: 1; 
  height: 2px; /* 얇고 지적인 느낌의 라인 */
  background-color: rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%; /* JS에서 동적으로 조절 */
  background-color: #444; /* 프로그레스 컬러 */
  transition: width 0.3s ease; /* 부드러운 움직임 */
}

/* 우측 네비게이션 그룹 */
.nav-group {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0; /* 버튼 그룹이 찌그러지지 않게 고정 */
}

/* 숫자 페이지네이션 스타일 (1 / 5) */
.swiper-pagination-fraction {
  position: static !important;
  width: auto !important;
  color: #444;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
}

/* 네비게이션 화살표 커스텀 */
.custom-nav {
  position: static !important;
  margin: 0 !important;
  width: 20px !important;
  height: 20px !important;
  color: #444 !important;
}

.custom-nav::after {
  font-size: 14px !important;
  font-weight:600;
}




.section-title-area {
  max-width: max-content;
}
.section-title-area p.sub-title {
  color: var(--color-white);
  font-size:14px;
  line-height: 34px;
  margin-bottom:0px;
}

/*.section-title-area .section-title {
  color: var(--color-heading-1);
  font-weight: 500;
  margin-bottom: 0;
}
.section-title-area .section-title span {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
*/


/* 전페이지우측 고정배너
--------------------------------------------------------
.si-sticky { 
	position: fixed; z-index:99;
	top:10px;
	left: 5px;
	width: 280px;
}

.si-sticky.si-sticky-right {
	left: auto;
	right:0px;
}

---------*/
a.btn_pro2 {
background: #121212;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  padding: 25px 20px;
  line-height: 1;
  margin-bottom: 5px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-weight:500;
  font-size:16px;
  font-size: 1rem;
  color: #fff;
}
a.btn_pro2:hover {
  background-color: #000;

}