/**
* File Name : index_layout.css
* Description : 메인스타일시트
* Author : Wed Project Team / Design
* Update : 2026.09.11
**/

@charset "utf-8";
@import url('../css/NotoSans_Font.css');
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css'); 
@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css'); 
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');


/* Layout Selector */
*,*:after,*:before{ box-sizing: border-box;}


html, body {padding:0; margin:0; width:100%; height:100%;  box-sizing: border-box; font-family: 'Noto Sans KR',' sans-serif','Nanum Gothic','NanumBarunGothic', 'NanumSquare','Malgun Gothic','dotum', 'NanumSquareRound', 'Lato', 'Helvetica', 'Spoqa Han Sans', 'Montserrat',}
#wrap {position:relative; width:100%; margin: 0 auto; padding:0; display:block; }


a{ font-family: 'Noto Sans KR','sans-serif','Nanum Gothic','NanumBarunGothic','Malgun Gothic','dotum', 'NanumSquareRound', 'Lato', 'Helvetica' ,'Spoqa Han Sans', 'Montserrat'; text-decoration:none!important;   outline: none } 
a:link a:visited {color:#000; text-decoration:none!important;}
a:hover, a:active { color:#000; text-decoration:none!important;}

#wrap {width:100%; margin:0 auto;}

.section {width:100%; display:block; clear:both!important;}

.bgwhite {
  background:#fff; 
  height:auto!important; 
  width:100%; 
  padding:100px 0;
 }

 .bggrey {
  background:#f2f2f2; 
  height:auto!important; 
  width:100%; 
  padding:100px 0;
 }


 .bggrey-2 {
  background:#fcf8f2; 
  height:auto!important; 
  width:100%; 
  padding:100px 0;
 }

.bgblack { 
  background:#252525; 
  height:auto!important; 
  width:100%; 
  padding:100px 0; 
}


.bgyellow { 
  /*background:#ffcd05;*/ 
  background:url('../images/index/yellow-bg.jpg') no-repeat; 
  background-size: cover; 
  height:auto!important; 
  width:100%; 
  padding:100px 0;
} 


.bgyellow-2 { 
  background:#f3e8d8;
  background-size: cover; 
  height:auto!important; 
  width:100%; 
  padding:100px 0;
} 





.gall-title { width:100%; height:60px; font-size:18px; font-weight:500; color:#383838; text-align:center;  padding-top:10px;  }
.gall-btwrap { width:100%; margin:0 auto; text-align:center; padding:30px 0; clear:both;}
.gall-more {font-size:16px; background:#a17c47; color:#fff;  border:0;  padding:16px 50px; border-radius:30px; font-weight:600; }
.gall-more:hover {background:#000; color:#fff;  cursor:pointer }

.sect_tit {
  font-size:46px; 
  font-weight:700; 
  color:#000; 
  text-align:center; 
  line-height:1.4; 
  width:100%; 
  letter-spacing:-0.5px;
  padding:0 20px;
}

.sect_tdesc {
  display:block;
  font-size:22px; 
  font-weight:400; 
  color:#5d5d5d; 
  text-align:center;
  line-height:1.4;
  width:100%;
  letter-spacing:-0.5px;
  padding:10px 6%;
  
}

.sect_tdesc2 {
  font-size:22px; 
  font-weight:400; 
  color:#383838; 
  text-align:center;
  line-height:1.4;
  width:100%;
  letter-spacing:-0.5px;
  padding:20px 6%;
}


@media screen and (min-width: 1281px) and (max-width: 1519px){
 .bgwhite {padding:50px 0;}
 .bggrey {padding:50px 0;}
 .bgblack {padding:50px 0;}
 .bgyellow {padding:50px 0;}
 .bgyellow-2 {padding:50px 0;} 
 .bggrey-2 {padding:50px 0;}

 .sect_tit {font-size:40px;}
 .sect_tdesc {font-size:22px;}
 .sect_tdesc br {display:none}
 .gall-title {font-size:16px; }

}




@media screen and (min-width: 991px) and (max-width: 1280px){ 
 .bgwhite {padding:50px 0;}
 .bggrey {padding:50px 0;}
 .bgblack {padding:50px 0;}
 .bgyellow {padding:50px 0;}
 .bgyellow-2 {padding:50px 0;} 
 .bggrey-2 {padding:50px 0;}

 .sect_tit {font-size:36px;}
 .sect_tdesc {font-size:20px; }
 .sect_tdesc br {display:none }

 .gall-title {font-size:16px;}
}



@media screen and (min-width: 769px) and (max-width: 990px){
 .bgwhite {padding:40px 0;}
 .bggrey {padding:40px 0;}
 .bgblack {padding:40px 0;}
 .bgyellow {padding:40px 0;}
 .bgyellow-2 {padding:40px 0;} 
 .bggrey-2 {padding:40px 0;}

 .sect_tit {font-size:30px; }
 .sect_tdesc {font-size:18px; }
 .sect_tdesc br {display:none }

 .gall-title {font-size:16px;}
}



@media screen and (min-width: 577px) and (max-width: 768px){
 .bgwhite {padding:40px 0;}
 .bggrey {padding:40px 0;}
 .bgblack {padding:40px 0;}
 .bgyellow {padding:40px 0;}
 .bgyellow-2 {padding:40px 0;} 
 .bggrey-2 {padding:40px 0; }

 .sect_tit {font-size:26px; }
 .sect_tdesc {font-size:18px; }
 .sect_tdesc br {display:none }

 .gall-title {font-size:16px;}

}


@media screen and (min-width: 321px) and (max-width: 576px) {	
 .bgwhite {padding:40px 0;}
 .bggrey {padding:40px 0;}
 .bgblack {padding:40px 0;}
 .bgyellow {padding:40px 0;}
 .bgyellow-2 {padding:40px 0;}  
 .bggrey-2 {padding:40px 0; }

 
 .sect_tit {font-size:22px; letter-spacing:-.6px}
 .sect_tdesc {font-size:16px; }
 .sect_tdesc br {display:none }

 .gall-title {font-size:16px;  }

 .gall-more {background:#a17c47; color:#fff;  border:0;  padding:10px 40px; border-radius:30px; font-weight:600; }
 .gall-more:hover {background:#000; color:#fff;  cursor:pointer }

}
	

@media (max-width: 320px) {	
 .bgwhite {padding:30px 0;}
 .bggrey {padding:30px 0;}
 .bgblack {padding:30px 0;}
 .bgyellow {padding:30px 0;}
 .bgyellow-2 {padding:30px 0;}  
 .bggrey-2 {padding:30px 0; }

 
 .sect_tit {font-size:22px; letter-spacing:-.6px}
 .sect_tdesc {font-size:16px; }
 .sect_tdesc br {display:none }

 .gall-title {font-size:16px;  }

 .gall-more {background:#a17c47; color:#fff;  border:0;  padding:10px 40px; border-radius:30px; font-weight:600; }
 .gall-more:hover {background:#000; color:#fff;  cursor:pointer }

}
	

.section_content {width:100%; padding:0; margin:0 auto; height:auto; display:block; }
.mcontList {width:100%; margin:0 auto; }

@media screen and (min-width: 1281px) and (max-width: 1519px){
 .section_content {width:100%;  padding:50px 0;}
 .mcontList {width:100%;}
}


@media screen and (min-width: 991px) and (max-width: 1280px){ 
 .section_content {width:100%;  padding:40px 0;}
 .mcontList {width:100%;}
}


@media screen and (min-width: 769px) and (max-width: 990px){
 .section_content {width:100%;  padding:40px 0;}
 .mcontList {width:100%;}
}

@media screen and (min-width: 577px) and (max-width: 768px){
 .section_content {width:100%;  padding:30px 0;}
 .mcontList {width:100%;}
}

@media screen and (min-width: 321px) and (max-width: 576px) {	
 .section_content {width:100%;  padding:30px 0;}
 .mcontList {width:100%;}
}


@media (max-width: 320px) {	
 .section_content {width:100%;  padding:30px 0;}
 .mcontList {width:100%;}
}





/*========== section 1 철거 사업분야 ============*/

.bizcard {
  --space: 1.25rem;
  width: 1720px; 
  margin: 0 auto;
  place-items: center;  
  display: grid;
  gap: 1rem; /* 아이템 사이 간격 */
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  padding: 2rem; 
}

.biz-card {
  width: 100%;
  cursor: default;
  padding: none;
  background-color: var(--sdcolor);
  transition: transform 0.3s ease-in-out;
  color:#333;  
  border-radius:none;
  border:1px solid #ededed;
}

.biz-card:hover {
  transform: translateY(-0.5rem);
}

.biz-card a {color:#333;}
.biz-card:hover,.biz-card a:hover {color:#8b6852!important;}

.biz-card-img {
  width: 100%;
  height: 15rem;
  overflow: hidden;
  position: relative;
  border-radius: 0;
}

.biz-card-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}


.biz-card-title {
  text-transform: capitalize;
  margin: 0.3rem 0;
  font-size:1.2em;
  color:#000;
  font-weight:bold;
}

.biz-card-text {font-size:0.925em; color:#666;}


.biz-card a {color:#333!important;}
.biz-card:hover, .biz-card-text:hover, .biz-card a:hover {color:#8b6852!important;}

@media screen and (min-width:1281px) and (max-width:1719px) {
  .bizcard {width: 100%; grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));  padding: 3rem;}
}


@media screen and (min-width:993px) and (max-width:1280px) {
  .bizcard {width: 100%;  grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); padding: 3rem;}
}


@media screen and (min-width:769px) and  (max-width:992px) {
  .bizcard {width: 100%; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); padding: 2rem;}
}


@media screen and (min-width:577px) and  (max-width:768px) {
  .bizcard {width: 100%; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); padding: 1rem;}
}



@media screen and (min-width: 321px) and (max-width:576px) {
  .bizcard {width: 100%; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); padding: 1rem;}
}

@media (max-width:320px) {
  .bizcard {width: 100%; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); padding: 1rem;}
}



/*================ section 2 철거업무 현장 사진 =================*/
.gall-container {max-width: 1720px;  margin: 0 auto;  padding: 60px;}
.subtitle {font-size: 1.1rem; color: #7f8c8d; max-width: 600px; margin: 0 auto;}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 30px;
}

.gallery-item {
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.5s ease forwards;
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.gallery-item img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {transform: scale(1.05);}

.item-info {padding: 30px 20px ; background-color: white; min-height:120px;}
.item-info h3 {font-size: 1.2rem; margin-bottom: 5px; color: #2c3e50; font-weight:bold;}
.item-info p {color: #7f8c8d; font-size: 0.9rem; letter-spacing:-0.5px;}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: #7f8c8d;
}




@media screen and (min-width: 1281px) and (max-width: 1519px){
  .gall-container {max-width: 100%;  padding: 60px 20px;}
  .gallery {grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

@media screen and (min-width: 1281px) and (max-width: 1519px){
  .gall-container {max-width: 100%;  padding: 50px 20px;;}
  .gallery {grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

@media screen and (min-width: 991px) and (max-width: 1280px){
  .gall-container {max-width: 100%;  padding: 50px 20px;;}
  .gallery {grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}


@media screen and (min-width: 769px) and (max-width: 990px){
  .gall-container {max-width: 100%;  padding: 40px 20px;;}
  .gallery {grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media screen and (min-width: 577px) and (max-width: 768px){
  .gall-container {max-width: 100%;  padding: 40px 20px;;}
  .gallery {grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media screen and (min-width: 321px) and (max-width: 577px) {
  .gall-container {max-width: 100%;  padding: 30px 20px;;}
  .gallery { grid-template-columns: 1fr; }

}

@media (max-width: 320px) {
  .gall-container {max-width: 100%;  padding: 30px 20px;;}
  .gallery { grid-template-columns: 1fr; }

}




/*========== section 3 철거절차 ============*/
.process-wrap {display: block; width: 100%;  max-width: 1620px; margin: 0 auto; padding: 50px 50px 30px 50px;}
.process-list { display: flex; align-items: center; justify-content: center; margin-bottom:0;}
.process-item { flex: 0 1 206px; text-align: center; min-height:206px}


.process-desc {
  display: block;
  margin: 0 auto;
  color: #555;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.8px;
  word-break: keep-all;
  padding:20px 0 30px 0;
}

.process-arrow {position: relative; padding:0 10px;}
.process-m-arrow {display: none;}


.m-process-wrap {display: none; width:1620px; margin: 0 auto; padding: 50px 50px 30px 50px;}
.m-process-wrap .m-process-img {width: 100%; }
.m-process-wrap .m-process-img img {width: 100%; }


/* 태블릿 */
@media (max-width: 1619px) {
    .process-wrap {padding:50px 20px 30px 20px;}
    .process-list {flex-wrap: wrap; row-gap: 35px; margin-bottom:50px; }
    .process-item {flex-basis: calc(33.333% - 32px); }

	.m-process-wrap {display: none; width:100%;}

}

/* 3열에서 아이템과 화살표를 좀 더 안정적으로 보이게 */
@media (max-width: 1280px) {
    .process-wrap {padding:40px 20px 30px 20px;}
    .process-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 55px 10px; margin-bottom:0;}
    .process-item {flex: none; width: 100%;}
    .process-arrow {display: none;}

	.m-process-wrap {display: none; width:100%;}
	
}

/* 모바일 */
@media (min-width: 321px) and (max-width: 700px) {
    .process-wrap {display: none; padding: 50px 20px;}
    .process-list {display: flex; flex-direction: column; gap: 0; margin-bottom:0;}
    .process-item {width: 100%;}  
    .process-m-arrow {display: block; padding:0 0 10px 0;}
	.process-arrow {display: none;}

	.m-process-wrap {display: block; width:100%; padding: 50px 20px;}
}


@media (max-width: 320px) {
    .process-wrap {display: none; padding: 50px 20px;}
    .process-list {display: flex; flex-direction: column; gap: 0; margin-bottom:0;}
    .process-item {width: 100%;}  
    .process-m-arrow {display: block; padding:0 0 10px 0;}
	.process-arrow {display: none;}

	.m-process-wrap {display: block; width:100%; padding: 50px 20px;}
}


.process-img img {width:auto; }

.section_content .tel-adlink {width:100%; margin:0 auto; text-align:center;}
.section_content .tel-adlink div {
  display:block; 
  font-weight:800; 
  font-size:50px; 
  font-family:"Montserrat"; 
  padding:0.5rem; 
  text-align:center; 
  margin:0 auto;
}



.section_content .tel-adlink div a {
  display: block;
  margin: auto;
  text-decoration: none;
  position: relative;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  z-index: 1;
  font-family:"Montserrat"; 
  color: #333;
}

.section_content .tel-adlink div a:after {
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  bottom: 0;
  right: 1.25rem;
  left: 1.25rem;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  transform-origin: bottom center;
  z-index: -1;
}

.section_content .tel-adlink div a:hover {color: #fe5a11;}
.section_content .tel-adlink div a:hover:after {right: 0; left: 0; height: 100%;}

@media screen and (min-width: 1281px) and (max-width: 1519px){ 
 .process-img img {width:100%; }
 .section_content .tel-adlink .bar-col {font-size:30px; }
 .section_content .tel-adlink div {font-size:40px; }
}



@media screen and (min-width: 991px) and (max-width: 1280px){
 .process-img img {width:100%; }
 .section_content .tel-adlink div {font-size:40px; }
}



@media screen and (min-width: 769px) and (max-width: 990px){
 .process-img img {width:100%; }
 .section_content .tel-adlink div {font-size:36px; }

}

@media screen and (min-width: 577px) and (max-width: 768px){
 .process-img img {width:100%; }
 .section_content .tel-adlink div {font-size:30px; }
}


@media screen and (min-width: 321px) and (max-width: 576px) {	
 .process-img img {width:100%; }
 .section_content .tel-adlink div {font-size:26px; }
}

@media (max-width: 320px) {	
 .process-img img {width:100%; }
 .section_content .tel-adlink div {font-size:26px; }
}



/*========== section 4 주요현장  ============*/

.metal-works-wrap { margin:0 10%;} 

.metal-works {
  color: #272727;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0;
}

.main-card {max-width: 1520px; margin: 0 auto;}

.main-card img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.main-card .btn {
  color: #ffffff;
  padding: 0.8rem;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 4px;
  font-weight: 400;
  display: block;
  width: 100%;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
}

.main-card .btn:hover {background-color: rgba(255, 255, 255, 0.12);}

.img-cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 40px 0;
}

.cards_item {display: flex; padding: 1rem;}


.img-card {
  background-color: white;
  box-shadow: 0 10px 16px -16px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.img-card_content {
  padding: 1.1rem;
  /*background: linear-gradient(to bottom left, #eaa440 40%, #ebca14 100%);*/
  background:#d2cab8;
  border:1px solid #eee8d9;
  min-height:160px;
}

.img-card_title {
  color: #181612;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing:-0.5px;
  text-transform: capitalize;
  margin: 6px 0;
  text-align:center;
}

.img-card_text {
  color: #5e5b53;
  font-size: 0.985rem;
  line-height: 1.5;
  margin-bottom: 1rem;    
  font-weight: 400;
  letter-spacing:-0.7px;
  text-align:center;
}
.made_by{font-weight: 400; font-size: 13px; margin-top: 35px;  text-align: center;}

/*320px*/
@media (min-width: 20rem) {
  .metal-works-wrap { margin:0 2%;} 
  .cards_item {width: 100%;}
  .img-card_text br {display:none}


  .main-card img {width: 100%;}
  .img-card_content {min-height:140px;}

}
/*640px*/
@media (min-width: 40rem) {
  .metal-works-wrap { margin:0 2%;} 
  .cards_item {width: 50%;}
  .img-card_text br {display:none}

  .main-card img {width: 100%;}  
  .img-card_content {min-height:150px;}


}

/*900px*/
@media (min-width: 60rem) {
  .metal-works-wrap { margin:0 3%;} 
  .cards_item {width: 33.3333%;}
  .main-card img {width: 100%;} 
  .img-card_text br {display:none}

}



/*1200px*/
@media (min-width: 75rem) {
  .metal-works-wrap { margin:0 3%;} 
  .cards_item {width: 33.3333%;}
  .main-card img {width: 100%;} 
  .img-card_text br {display:none}

  
}

/*1440px*/
@media (min-width: 90rem) {
  .metal-works-wrap { margin:0 4%;} 
  .cards_item {width: 25%;}
  .main-card img {width: 100%;} 
  .img-card_content {min-height:160px;}
}

/*1520px*/
@media (min-width: 95rem) {
  .metal-works-wrap { margin:0 6%;} 
  .cards_item {width: 25%;}
  .main-card img {width: 100%;}
}





/*========== section 5 quick inquiry  ============*/
.speed-inquiry {display:block; width:100%; margin:0 auto;}



@media screen and (min-width: 1281px) and (max-width: 1519px){
 
}


@media screen and (min-width: 991px) and (max-width: 1280px){
  
}

@media screen and (min-width: 769px) and (max-width: 990px){
 
}

@media screen and (min-width: 577px) and (max-width: 768px){
 
}

@media screen and (min-width: 321px) and (max-width: 576px) {	
 
}


@media (max-width: 320px) {	
 
}