/* --------------------------- 서브공통 */
.content article { margin-top:4.375rem; } 
.content article:first-of-type { margin-top:0; } 


/* 배경 박스 */
.top_bg_box {margin-bottom:60px; padding:4rem 4.25rem; min-height:21.875rem; background-color: #D7E0E4; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 20px; } 
.top_bg_box > p { font-size: 1.875rem; font-weight: 600; line-height: 140%; color:#fff; letter-spacing: -1.2px; word-break: keep-all; } 
.top_bg_box.center { display: flex; align-items: center; justify-content: center; flex-direction: column; } 
.top_bg_box.center > p { font-size: 2.25rem; font-weight: 700; line-height: 150%; text-align: center; letter-spacing: -1.44px; } 


#greetings .top_bg_box {background-image: url("../../images/sub/bg_greetings.png");}
#history .top_bg_box {background-image: url("../../images/sub/bg_history.png");}



/** 회사소개 > 회사소개 **/
#greetings .text_box { display: flex; gap:3.125rem; justify-content: space-between;flex:1; flex-direction: column;}
#greetings .text_box .text {flex:1;}
#greetings .text_box .text p.lg {margin-bottom:3.625rem; font-size: 2.625rem; font-weight: 600; line-height: 140%; letter-spacing: -1.92px;}
#greetings .text_box .text p.desc { font-size: 1.125rem; line-height: 160%;color: var(--gray-750, #3F3F3F); letter-spacing: -0.72px; }
#greetings .text_box .img img { width:auto;max-width: 100%}
#greetings .img_box img {width:100%;} 


#greetings .greetings_list { display: grid; gap: 1.25rem; margin:4.375rem 0; grid-template-columns: repeat(3,1fr); } 
#greetings .greetings_list li { display: flex; gap:1.5625rem; align-items: center; justify-content: center; flex-direction: column; width:100%; height:25rem; color:#fff; text-align: center; border-radius: 20px; } 
#greetings .greetings_list li:nth-child(1) { background: var(--dark, #071E4A); } 
#greetings .greetings_list li:nth-child(2) { background: #005780; } 
#greetings .greetings_list li:nth-child(3) { background: #7D8589; } 

#greetings .greetings_list li p { font-size:1.125rem; font-weight: 500; line-height: 140%; letter-spacing: -0.64px; } 
#greetings .greetings_list li p.tit { font-size: 1.75rem; font-weight: 600; line-height: 130%; letter-spacing: -1.12px; } 

@media (max-width: 768px) { 
 #greetings .greetings_list { grid-template-columns: repeat(1,1fr); } 
}


/** 회사소개 > 연혁 **/
#history .history_list {display: flex; flex-direction: column;}
#history .history_list > li { display: flex; gap:20%; justify-content: space-between; padding-top:6.25rem; padding-bottom:9.375rem;position: relative;}
#history .history_list > li::after { position: absolute; right:0; bottom:0; font-size: 5.625rem; font-weight: 800; color: #F6F6F6;content: 'MAILSAIL.'; opacity: 0.5;}
#history .history_list > li:last-child::after {display:none;}
#history .history_list > li:first-child {padding-top:0;}
#history .history_list > li p.year {font-family: var(--montserrat); font-size: 3.75rem; font-weight: 600; }
#history .history_list > li ul.month_list {flex:1; }
#history .history_list > li ul.month_list li {display: flex; padding:1.75rem 0; border-bottom:1px solid #f5f5f5;}
#history .history_list > li ul.month_list li:first-child {padding-top:0;}
#history .history_list > li ul.month_list li p.month {width:5.625rem; font-size: 1.25rem; font-weight: 600; line-height: 140%; } 
#history .history_list > li ul.month_list li .desc {  font-size: 1.25rem; font-weight: 500; line-height: 140%;color: var(--gray-700, #555);}


@media screen and (max-width:640px){
  #history .history_list > li { gap:2.6rem;flex-direction: column;}  
  #history .history_list > li::after {font-size: 12vw;}
}



/** 회사소개 > 주요고객사 **/
#partners article {margin-top:70px;}
#partners article:first-of-type {margin-top:0;}
#partners article h3 {margin-bottom:40px; font-size: 34px; font-weight: 700;}

#partners .partner_list { display: grid; gap:1.25rem; grid-template-columns: repeat(4,1fr); } 
#partners .partner_list li { display: flex; align-items: center; justify-content: center; padding:1.5rem 1rem; border: 1px solid var(--gray-200, #CCC); height:10rem; 
background: #FFF; border-radius: 10px; } 
#partners .partner_list li img { max-width:100%; } 

@media (max-width: 1024px) { 
 #partners .partner_list { grid-template-columns: repeat(2,1fr); } 
}

@media (max-width: 640px) { 
 #partners .partner_list { grid-template-columns: repeat(1,1fr); } 
}


/** 회사소개 > 오시는 길 **/
#map .map_logo { padding-top:2.5rem; padding-bottom:3.75rem; border-bottom:1px solid #A9D1EA; text-align: center; } 

#map .map_iframe { overflow: hidden; border-radius: 20px; } 
#map .map_iframe iframe { width:100%; height:500px; } 

#map .map_info ul { display: flex; gap:1.75rem 8.75rem; flex-wrap: wrap; } 
#map .map_info ul li { display: flex; gap:1.125rem; align-items: center; } 
#map .map_info ul li .ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width:4.375rem; height:4.375rem; background: var(--gray-50, #F8F8F8); border-radius: 10px; } 
#map .map_info ul li .txt { display: flex; gap:0.625rem; flex-direction: column; } 
#map .map_info ul li .txt p { font-size: 1.125rem; font-weight: 500; line-height: 1.2; color: var(--gray-650, #595959); letter-spacing: -0.36px; word-break: keep-all; } 
#map .map_info ul li .txt p.tit { font-size: 1.5rem; font-weight: 600; line-height: normal; color: #000; letter-spacing: -0.48px; } 



/** 공급업체 **/
.supplier a:hover {text-decoration: underline;}

.supplier .supplier_list {display: grid; gap:1.875rem; grid-template-columns: repeat(4,1fr);}
.supplier .supplier_list > li { display: flex; align-items: center; flex-direction: column; padding:2.5rem 1.875rem; box-shadow: 0 0 50px rgba(0, 0, 0, 0.10);width:100%; border-radius: 20px;}
.supplier .supplier_list > li .logo { display: flex; align-items: center;  justify-content: center; padding-bottom:1rem; width:100%; height:100px; text-align: center;}
.supplier .supplier_list > li .logo img {max-width:80%; max-height:80px; object-fit: cover; }
.supplier .supplier_list > li .txt_box { padding-top:1rem; border-top:1px solid #ddd;width:100%; font-size: 1.1875rem; line-height: 136%; text-align: center;}

.supplier .supplier_list > li .txt_box ul {display: flex; flex-direction: column; text-align: left;}

@media (max-width: 1024px) { 
 .supplier .supplier_list {grid-template-columns: repeat(3,1fr);}
}

@media (max-width: 640px) { 
 .supplier .supplier_list {grid-template-columns: repeat(1,1fr);}
}