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

@charset "utf-8";
@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;
 }

.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:800; 
  color:#000; 
  text-align:center; 
  line-height:1.4; 
  width:100%; 
  letter-spacing:-0.5px;
  padding:0 20px;
}

.sect_tdesc {
  font-size:22px; 
  font-weight:400; 
  color:#383838; 
  text-align:center;
  line-height:1.4;
  width:100%;
  letter-spacing:-0.5px;
  padding:20px 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;} 

 .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;} 

 .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: 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;} 
 .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: 577px) and (max-width: 768px){
 .bgwhite {padding:50px 0;}
 .bggrey {padding:50px 0;}
 .bgblack {padding:50px 0;}
 .bgyellow {padding:50px 0;}
 .bgyellow-2 {padding:50px 0;}  

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

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

}


@media screen and (max-width: 576px) {	
 .bgwhite {padding:50px 0;}
 .bggrey {padding:50px 0;}
 .bgblack {padding:50px 0;}
 .bgyellow {padding:50px 0;}
 .bgyellow-2 {padding:50px 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 (max-width: 576px) {	
 .section_content {width:100%;  padding:30px 0;}
 .mcontList {width:100%;}
}








/*========== section 1 주요취급업무 ============*/

.mixcontainer {margin:40px 6%;}

#mixedSlider {position: relative;}
#mixedSlider .MS-content {white-space: nowrap; overflow: hidden; margin: 0 8%; }
#mixedSlider .MS-content .item {
  display: inline-block;
  width: 25%;
  position: relative;
  vertical-align: top;
  overflow: hidden;
  height: 100%;
  white-space: normal;
  padding: 0 20px;  
}

@media (max-width: 1519px) {
  #mixedSlider .MS-content .item {width: 25%;}
}


@media (max-width: 1224px) {
  #mixedSlider .MS-content .item {width: 33.333333%;}
}


@media (max-width: 991px) {
  #mixedSlider .MS-content .item {width: 50%;}
}


@media (max-width: 767px) {
  #mixedSlider .MS-content .item {width: 50%;}
}

@media (max-width: 576px) {
  #mixedSlider .MS-content .item {width: 100%;}
}

#mixedSlider .MS-content .item .imgTitle {position: relative;}
#mixedSlider .MS-content .item .imgTitle .blogTitle {
  display:block;
  margin: 0;
  padding:20px 10px;
  text-align: center;
  color: #fff;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  font-weight: bold;
  bottom:0;
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#mixedSlider .MS-content .item .imgTitle img {height: auto; width: 100%; border:1px solid rgba(0,0,0, 0.6);} 
#mixedSlider .MS-content .item .tit-sub {
  font-size: 16px; 
  text-align:center;
  display:block; 
  color:rgba(92,62,10,0.9); 
  font-weight:400; 
  letter-spacing:-0.5px; 
  padding:10px 10px 0 10px;	
}

#mixedSlider .MS-content .item a {
  float: right;
  margin: 0 20px 0 0;
  font-size: 16px;
  color: rgba(173, 0, 0, 0.82);
  font-weight: bold;
  letter-spacing: 1px;
  transition: linear 0.1s;
}

#mixedSlider .MS-content .item a:hover {text-shadow: 0 0 1px grey;}
#mixedSlider .MS-controls button {
  position: absolute;
  border: none;
  background-color: transparent;
  outline: 0;
  font-size: 50px;
  color: rgba(0, 0, 0, 0.4);
  transition: 0.15s linear;
  top:40%;
  cursor:pointer;
}

#mixedSlider .MS-controls button:hover {color: rgba(0, 0, 0, 0.8);}
#mixedSlider .MS-controls .MS-left {left: 2%;}
#mixedSlider .MS-controls .MS-right {right: 2%;}


@media (max-width:1519px) {     
  .mixcontainer {margin:40px 2%;}
  #mixedSlider .MS-content .item .tit-sub {font-size: 16px;padding:10px 10px 0 10px;}
  #mixedSlider .MS-content .item .imgTitle .blogTitle {font-size: 18px; }
}



@media (max-width: 1280px) {
  #mixedSlider .MS-controls .MS-left {left: 2%;}
  #mixedSlider .MS-controls .MS-right {right: 2%; }
  #mixedSlider .MS-content .item .tit-sub {font-size: 16px;padding:10px 10px 0 10px;}
  #mixedSlider .MS-content .item .imgTitle .blogTitle {font-size: 18px;}
}



@media (max-width: 992px) {
  #mixedSlider .MS-controls button {font-size: 30px;}
  #mixedSlider .MS-controls .MS-left {left: 1%;}
  #mixedSlider .MS-controls .MS-right {right: 1%; }
  #mixedSlider .MS-content .item .tit-sub {font-size: 16px; padding:10px 10px 0 10px;}
  #mixedSlider .MS-content .item .imgTitle .blogTitle {font-size: 18px;}
}


@media (max-width: 767px) {
  #mixedSlider .MS-controls button {font-size: 30px;}
  #mixedSlider .MS-controls .MS-left {left: 1%;}
  #mixedSlider .MS-controls .MS-right {right: 1%; }

  #mixedSlider .MS-content .item .tit-sub {font-size: 16px;padding:10px 10px 0 10px;}
  #mixedSlider .MS-content .item .imgTitle .blogTitle {font-size: 18px;}
}




/*========== section 2 매입절차 ============*/
.process-wrap {display:block; width:1520px; padding:0 ; margin:0 auto; text-align:center}
.process-img {width:100%; margin:0 auto;  text-align:center}
.process-img img {width:auto; }

@media screen and (min-width: 1281px) and (max-width: 1519px){
  .process-wrap {width:100%; padding:0 40px;}
  .process-img {width:100%; }
  .process-img img {width:100%; }
}



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



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

@media screen and (min-width: 577px) and (max-width: 768px){
  .process-wrap {width:100%; padding:0 40px;}
  .process-img {width:100%; }
  .process-img img {width:100%; }
}


@media screen and (max-width: 576px) {	
  .process-wrap {width:100%; padding:0 40px;}
  .process-img {width:100%; }
  .process-img img {width:100%; }
}
	



/*========== section 3 스크랩 매입  ============*/

.scrap-container  {width:1520px; margin:0 auto; padding:0 30px;}



.scrap-thumbnail {
    display: block;
    padding: 0;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;border:1px solid #ededed;
}



.scrap-container .scrap-desc {
 display:block;
 margin: 0 auto;
 width:100%; 
 padding:10px; 
 font-size:16px; 
 color:#444; 
 text-align:center;
 letter-spacing:-0.5px;
 font-weight:400;
}

.section_content .tel-adlink {width:100%; margin:0 auto; text-align:center;}
.section_content .tel-adlink .bar-col {font-weight:300; font-size:30px; }
.section_content .tel-adlink div {display:inline-block; font-weight:800; font-size:40px; font-family:"Montserrat";}
.section_content .tel-adlink div:nth-child(2) {display:inline-block; font-weight:800; font-size:40px; font-family:"Montserrat";}

.section_content .tel-adlink a {font-family:"Montserrat";}
.section_content .tel-adlink a:hover{color:#ff780a; font-family:"Montserrat";}

@media (min-width: 1281px) and (max-width: 1519px){
 
  .scrap-container  {width:100%; padding:0 30px;}

 .scrap-container .scrap-desc {padding:10px; font-size:16px;}

 .section_content .tel-adlink .bar-col {font-size:30px; }
 .section_content .tel-adlink div {display:inline-block; font-size:40px; }
 .section_content .tel-adlink div:nth-child(2) {display:inline-block; font-size:40px;}
}



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

  .scrap-container  {width:100%; padding:0 30px;}

 .scrap-container .scrap-desc {width:100%;  padding:10px 40px; font-size:16px;}
 .section_content .tel-adlink .bar-col {font-size:30px; }
 .section_content .tel-adlink div {display:inline-block; font-size:40px; }
 .section_content .tel-adlink div:nth-child(2) {display:inline-block; font-size:40px;}
}



@media (min-width: 769px) and (max-width: 990px){
  .scrap-container  {width:100%; padding:0 30px;}

 .scrap-container .scrap-desc {width:100%;  padding:10px 40px; font-size:16px;}
 .section_content .tel-adlink .bar-col {font-size:20px; }
 .section_content .tel-adlink div {display:inline-block; font-size:30px; }
 .section_content .tel-adlink div:nth-child(2) {display:inline-block; font-size:30px;}

}

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

 .scrap-container .scrap-desc {width:100%; padding:10px 40px; font-size:16px;}
 .section_content .tel-adlink .bar-col {font-size:20px; }
 .section_content .tel-adlink div {display:inline-block; font-size:26px; }
 .section_content .tel-adlink div:nth-child(2) {display:inline-block; font-size:26px;}
}


@media (max-width: 576px) {	
  .scrap-container  {width:100%; padding:0 30px;}

 .scrap-container .scrap-desc {width:100%; padding: 10px ; font-size:16px; }
 .section_content .tel-adlink .bar-col {font-size:20px; }
 .section_content .tel-adlink div {display:inline-block; font-size:20px; }
 .section_content .tel-adlink div:nth-child(2) {display:inline-block; font-size:20px;}
}

	



/*========== 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.4rem;
  /*background: linear-gradient(to bottom left, #eaa440 40%, #ebca14 100%);*/
  background:#d2cab8;
  min-height:auto;
}

.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.975rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;    
  font-weight: 400;
  letter-spacing:-0.7px;
  text-align:center;
}
.made_by{font-weight: 400; font-size: 13px; margin-top: 35px;  text-align: center;}


@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:150px}

}

@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:220px}

}

@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}
  .img-card_content {min-height:220px}
}


@media (min-width: 90rem) {
  .metal-works-wrap { margin:0 4%;} 
  .cards_item {width: 25%;}
  .main-card img {width: 100%;}
}

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







/*============= section5 현장갤러리 =============*/

.images-gall-wrap {width:1520px; margin: 0 auto; padding:0 0;}


@media screen and (min-width: 1281px) and (max-width: 1519px){
 .images-gall-wrap {width:100%; padding:0 20px}
}



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

 .images-gall-wrap {width:100%; padding:0 20px}
}



@media screen and (min-width: 769px) and (max-width: 990px){
  .images-gall-wrap {width:100%; padding:0 20px}
}

@media screen and (min-width: 577px) and (max-width: 768px){
  .images-gall-wrap {width:100%; padding:0 20px}
}


@media screen and (max-width: 576px) {	
 .images-gall-wrap {width:100%; padding:0 20px}
}