@charset "utf-8"; @import "base.css"; @import "common.css"; /* 공통 */
#contents_wrap { padding-bottom: clamp(50px, 5vw, 100px); } 

 /* ============ 인사말 ============ */
.greeting .flex_box { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(25px, 4vw, 50px); } 
.greeting .flex_box .left,.greeting .flex_box .right { flex: 1 1 0; } 
.greeting .flex_box .left h2 { line-height: 1.4; position: relative; z-index: 1; word-break: auto-phrase; } 
.greeting .flex_box .left h2::before { content: "MANBO"; position: absolute; left: 0; top: -90px; font-family: SBAggro; font-weight: 700; color: #9c9c9c; font-size: clamp(32px, 8vw, 128px); height: 623px; height: 155px; opacity: 0.18; z-index: -1; } 
.greeting .flex_box .left h2 span { font-size: clamp(18px, 3.5vw, 40px); font-weight: 800; } 
.greeting .flex_box .left p:first-of-type { padding: 30px 0 60px; font-size: clamp(16px, 1.5vw, 20px); position: relative; } 
.greeting .flex_box .left p:first-of-type::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100px; height: 1px; background-color: #234383; } 
.greeting .flex_box .left p:last-of-type { font-size: clamp(20px, 2vw, 24px); font-weight: 500; padding: 60px 0 0; line-height: 1.4; } 
.greeting .flex_box .right img { width: 100%; border-radius: 20px; } 
.greeting .content_text { font-size: clamp(18px, 1.8vw, 22px); width: 70%; word-break: auto-phrase; } 

@media (max-width:1360px) { 
 .greeting .flex_box .left h2 { font-size: clamp(24px, 3.5vw, 30px); } 
 .greeting .flex_box .left h2:before { top: -88%; } 
 } 
@media (max-width:1000px) { 
 .greeting .flex_box { flex-direction: column; gap: 107px; align-items: baseline; } 
 .greeting .flex_box .right { order: 1; flex: none; } 
 .greeting .flex_box .left { order: 2; flex: none; } 
 .greeting .flex_box .left h2:before { top: -50%; } 
 .greeting .flex_box .left p:first-of-type { padding: 15px 0 30px; } 
 .greeting .flex_box .left p:last-of-type { padding: 30px 0 0; } 
 .greeting .content_text { width: 100%; } 
 } 
@media (max-width:640px) { 
 .greeting .flex_box { gap: 50px; } 
 .greeting .flex_box .left h2:before { top: -20px; } 
 } 

.history { position: relative; } 
.history .intro p:first-of-type { font-weight: 800; font-size: clamp(24px, 3.5vw, 40px); line-height: 1.4; margin-bottom: 15px; background: linear-gradient(
 45deg,
 #16325b 6.3%,
 #006a67 51.29%,
 #1870da 95.35%
 ); background-size: 200% 200%; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: gradientMove 5s ease infinite; } 
.history .intro p:last-of-type { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.4; font-weight: 500; } 

@keyframes gradientMove { 
 0% { background-position: 0% 50%; } 
 50% { background-position: 100% 50%; } 
 100% { background-position: 0% 50%; } 
 } 

.history .flex_wrap { display: flex; justify-content: space-between; } 
.history .head_photos { position: relative; width: clamp(320px, 36vw, 500px); aspect-ratio: 500 / 527; margin: clamp(40px, 8vw, 110px) 0 0 0; } 
.history .head_photos img { position: absolute; display: block; height: auto; opacity: 0; transform: translateY(20px); transition: none; } 
.history .head_photos img:nth-child(1) { width: 84%; top: 0; right: 0; } 
.history .head_photos img:nth-child(2) { width: 38%; top: 200px; left: 0; transition-delay: 0.2s; } 
.history .head_photos.on img { animation: fadeUp .8s ease forwards; } 
.history .head_photos.on img:nth-child(1) { animation-delay: 0s; } 
.history .head_photos.on img:nth-child(2) { animation-delay: .2s; } 

@keyframes fadeUp { 
 from { opacity: 0; transform: translateY(20px); } 
 to { opacity: 1; transform: translateY(0); } 
 } 


.history .container { padding: 60px 20px; max-width: 1200px; } 
.history .container .content { position: relative; padding-left: 200px; margin-bottom: 80px; } 

.history .container .content h3 { position: absolute; left: 0; top: 0; font-size: clamp(20px, 2.5vw, 32px); line-height: 1; font-weight: 800; color: #cccccc; transition: color 0.3s ease; } 
.history .container .content.on h3 { color: #1870da; } 
.history .container .content ul { list-style: none; margin: 0; padding: 0; } 
.history .container .content ul li { position: relative; padding-left: 20px; margin-bottom: 20px; font-size: 20px; line-height: 1.6; color: #333; } 
.history .container .content ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; border-radius: 50%; background-color: #888; } 
.history .container .content.on ul li::before { background-color: #1870da; } 
.history .container .content.on::before { background-color: #1870da; } 
.history .container .content ul li { opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s ease forwards; } 
.history .container .content ul { position: relative; margin-left: 50px; } 
.history .container .content ul::before { content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background-color: #eee; } 

.history .container .content.on ul li:nth-child(1) { animation-delay: 0.2s; } 
.history .container .content.on ul li:nth-child(2) { animation-delay: 0.4s; } 
.history .container .content.on ul li:nth-child(3) { animation-delay: 0.6s; } 
.history .container .content.on ul li:nth-child(4) { animation-delay: 0.8s; } 
.history .container .content.on ul li:nth-child(5) { animation-delay: 1s; } 

@keyframes fadeUp { 
 from { opacity: 0; transform: translateY(20px); } 
 to { opacity: 1; transform: translateY(0); } 
 } 

 @media (max-width:1000px) { 
 .history .flex_wrap { flex-direction: column; } 
.history .container { padding: 0 20px 60px 100px; } 
 } 
 @media (max-width:750px) { 
 .history .container { padding: 40px 20px 40px 20px; } 
.history .container .content { padding-left: 0; } 
.history .container .content h3 { position: unset; } 
 } 


 /* ============ 비전 ============ */
 

:root { --ink:#0f172a; --ink-2:#334155; --muted:#94a3b8; --bg:#ffffff; --card:#f8fafc; --line:#e2e8f0; --radius:16px; --shadow: 0 8px 24px rgba(15,23,42,.08); } 


/* House Layout */
.vision .house { position:relative; display:grid; gap: clamp(15px, 2.5vw, 25px); grid-template-columns: 1fr 1fr; grid-template-areas: "roof roof" "mission mission" "talent rules" "values values"; } 

/* 공통 카드 */
.vision .house .card { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 40px); } 
.vision .house .card h2 { margin:0 0 clamp(12px, 2vw, 25px) 0; font-size:clamp(20px, 2.5vw, 28px); } 
.vision .house .card p { margin:.25em 0 0 0; font-size:clamp(14px, 1.3vw, 16px); color:var(--ink-2); line-height: 1.2; } 
.vision .house .card p.vision { margin:.25em 0 0 0; font-size:clamp(16px, 1.3vw, 18px); color:#fff; line-height: 1.4; width: 50%; width: calc(27vw + 19px); } 

/* 지붕 */
.vision .house .roof { grid-area: roof; position:relative; overflow:hidden; color:#fff; background:
 radial-gradient(120% 120% at 0% 0%, rgba(37,161,233,.25) 0%, rgba(35,129,132,.0) 50%),
 linear-gradient(135deg, #006a67, #092c2b); } 
.vision .house .roof::before { content:""; position:absolute; width: 1400px; height: 200px; bottom: 0; right: 0; background: url(../images/sub/line.png) no-repeat 0 0 / 100%; opacity: 0.3; } 
.vision .house .roof .inner { position:relative; display:grid; gap:.5rem; } 
.vision .house .roof h2 { font-size:clamp(20px, 2.5vw, 28px); color:#f3fbff; letter-spacing:.06em; } 
.vision .house .roof .vision-text { font-size: clamp(16px, 2vw, 22px); line-height:1.6; font-weight:600; } 

/* Mission */
.vision .house .mission { grid-area: mission; display:grid; grid-template-columns: 72px 1fr; align-items:center; gap: clamp(12px, 2vw, 16px); background:#fff; } 
.vision .house .mission .icon { inline-size:72px; block-size:72px; aspect-ratio: 1/1; border-radius:16px; display:grid; place-items:center; background: #006a67; position: relative; box-shadow: 1px 1px 8px 2px rgb(112 112 112 / 28%); } 
 .vision .house .mission .icon::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 45px; height: 45px; background: url(../images/sub/mission.png) no-repeat 0 0 / 100%; } 

/* 2층 */
.vision .house .talent { grid-area: talent; } 
.vision .house .rules { grid-area: rules; } 
.vision .house .pill_list { display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(12px, 2vw, 25px); } 
.vision .house .pill { padding:10px 15px; border-radius:20px; font-size:clamp(14px, 1.1vw, 16px); border:1px solid var(--line); background:#fff; color:var(--ink-2); white-space:nowrap; } 

/* 핵심가치 */
.vision .house .values { grid-area: values; background:#fff; } 
.vision .house .flex_wrap { display:flex; flex-wrap: wrap; gap: clamp(10px, 1vw, 15px); margin-top:.75rem; } 
.vision .house .value { width: calc((100% - 60px) / 5); display:flex; flex-direction: column; align-items: center; gap:10px; padding:25px 8px; border-radius:14px; background: var(--card); border:1px solid var(--line); } 
.vision .house .value p { text-align: center; line-height: 1.2; } 
.vision .house .value p.point_text { font-size: 18px; font-weight: 600; } 
.vision .house .badge { inline-size:80px; block-size:80px; aspect-ratio: 1/1; border-radius:50%; background: #006a67; box-shadow: 1px 1px 8px 2px rgb(112 112 112 / 28%); position: relative; } 
 .vision .house .badge::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 45px; height: 45px; } 
 .vision .house .value:nth-of-type(1) .badge::before { background: url(../images/sub/mission_icon_01.png) no-repeat 0 0 / 100%; } 
 .vision .house .value:nth-of-type(2) .badge::before { background: url(../images/sub/mission_icon_02.png) no-repeat 0 0 / 100%; } 
 .vision .house .value:nth-of-type(3) .badge::before { background: url(../images/sub/mission_icon_03.png) no-repeat 0 0 / 100%; } 
 .vision .house .value:nth-of-type(4) .badge::before { background: url(../images/sub/mission_icon_04.png) no-repeat 0 0 / 100%; } 
 .vision .house .value:nth-of-type(5) .badge::before { background: url(../images/sub/mission_icon_05.png) no-repeat 0 0 / 100%; } 

/* 반응형 */
@media (max-width: 1000px) { 
 .vision .house .roof::before { display: none; } 
 } 
@media (max-width: 900px) { 
 .vision .house { grid-template-columns: 1fr; grid-template-areas:
 "roof"
 "mission"
 "talent"
 "rules"
 "values"; } 
 .vision .house .flex_wrap { grid-template-columns: repeat(3, 1fr); } 
 } 

@media (max-width:750px) { 
 .vision .house .value { width: calc((100% - 30px) / 3); } 
 } 

@media (max-width:640px) { 
 .vision .house .value { width: calc((100% - 15px) / 2); } 
.vision .house .card p.vision { width: 96%; } 
 } 
@media (max-width:450px) { 
 .vision .house .rules .pill_list .pill { display: inline-block; width: 100%; text-align: center; } 
 } 


/* ============ 오시는길 ============ */
.map .content_box { border: 1px solid #ededed; margin-bottom: clamp(20px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 40px); display: flex; gap: 25px; } 
.map .content_box .title { font-weight: 500; display: inline-block; width: 70px; } 
.map .content_box .title, .map .content_box .text { font-size:clamp(14px, 3vw, 16px); } 
#daumRoughmapContainer1758678288826 { width: 100% !important; } 
#daumRoughmapContainer1758678288826 .cont { display: none; } 
.map .content_box .icon { inline-size: 80px; block-size: 80px; aspect-ratio: 1/1; border-radius: 40px; display: grid; place-items: center; background: #006a67; position: relative; box-shadow: 1px 1px 8px 2px rgb(112 112 112 / 28%); } 
.map .content_box .icon::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: url(../images/sub/map.png) no-repeat 0 0 / 100%; } 

@media (max-width:640px) { 
 .map .content_box { gap: 15px; } 
 .map .content_box .icon { inline-size: 60px; block-size: 60px; border-radius: 10px; } 
 .map .content_box .icon::before { width: 30px; height: 30px; } 
 .map .content_box .basic_ul li { display: flex; flex-direction: column; } 
 .map .content_box .basic_ul > li:before { top: 25%; } 
 } 


@keyframes fadeUp { 
 from { opacity: 0; transform: translateY(20px); } 
 to { opacity: 1; transform: translateY(0); } 
 } 

/* ============ 사업면허 ============ */

#section_cert h3 { text-align: center; margin-bottom: clamp(20px, 2.5vw, 60px); } 
#section_cert .flex_list { display: flex; flex-wrap: wrap; gap: 60px 30px; } 
#section_cert .flex_list.center { justify-content: center; } 
#section_cert .flex_list li { width: calc((100% - 90px) / 4); position: relative; box-sizing: border-box; } 
#section_cert .flex_list li { border-radius: 0; padding: 14px; background: linear-gradient(145deg, #eaa61d, #f0e2b2) padding-box,
 linear-gradient(180deg, #f6e9c6, #a37b33 40%, #f6e9c6) border-box; box-shadow: 0 12px 30px rgba(0,0,0,.18); } 
#section_cert .flex_list li::before { content:""; position:absolute; inset:0; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08),
 inset 0 10px 20px rgba(0,0,0,.06),
 inset 0 -8px 16px rgba(255,255,255,.35); pointer-events:none; } 
#section_cert .flex_list li img { display: block; width: 100%; background: #fff; box-shadow: 0 0 0 1px #e5e5e5, 0 4px 10px rgba(0,0,0,.07); object-fit: cover; } 

@media (max-width:1000px) { 
 #section_cert .flex_list li { width: calc((100% - 60px) / 3); } 
 } 
@media (max-width:640px) { 
 #section_cert .flex_list { gap: 20px; } 
 #section_cert .flex_list li { width: calc((100% - 20px) / 2); } 
 } 


 /* ============ 사업현황 ============ */

#projects { background: url(../images/sub/plant_bg.jpg) no-repeat 0 0 / cover; padding: clamp(50px, 5vw , 100px) 0; } 
#projects .tabpanel { display: block; } 
#projects .tabpanel[hidden] { display: none; } 
#projects .plant_wrap { display: flex; gap: clamp(50px, 5vw , 100px); padding: clamp(20px, 2vw , 40px) 0 clamp(20px, 2.5vw , 50px); } 

#projects .tab_bar { display: flex; gap: var(--gap); align-items: center; justify-content: space-between; margin-bottom: 16px; flex: 2 1 0; } 
#projects .tablist { display: flex; flex-wrap: wrap; flex-direction: column; width: 100%; } 

/* 탭 버튼 베이스 */

#projects .tab_btn { padding: 25px; font-size:clamp(16px, 2.4vw, 24px); color: #fff; text-align: left; } 
#projects .tab_btn.is-active, .tab_btn[aria-selected="true"],#projects .tab_btn:hover { border-color: #111827; font-weight: 600; background-color: #1870da; border-radius: 0 50px 50px 0; position: relative; } 
#projects .tab_btn.is-active::before,#projects .tab_btn:hover:before { content: ''; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: url(../images/common/arrow-right.png) no-repeat 0 0 / 100%; } 
#projects .tab_con { display: none; } 
#projects .tab_con.active { display: block; } 
#projects #cert01.tab_con.active { display: flex; } /* PLANT */
#projects #cert02.tab_con.active { display: block; } /* 건축조형물 */
/* 패널 표시/숨김 */



/* 전체보기 버튼 & 다이얼로그 */


#projects .tabpanel_group { flex: 7 1 0; } 
#projects .tabpanel_group .panel_image { margin-bottom: clamp(50px, 5vw , 100px); border-radius: 20px; overflow: hidden; } 
#projects .tabpanel_group .panel_image img { width: 100%; } 

#projects .tabpanel_group .table_wrap tbody td { color: #fff; } 
#projects .tabpanel_group .table_wrap tbody tr:not(:first-child) td:last-of-type { border-right: 1px solid #e5e7e2; } 

#projects .allmenu_dialog[hidden] { display: none; } 
#projects .allmenu_dialog { 
 position: fixed; inset: 50% auto auto 50%; transform: translate(-50%,-50%); 
 width: min(92vw, 520px); background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); 
 max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; 
 } 
#projects .allmenu_header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #eee; } 
#projects .btn_all_close { appearance: none; border: none; background: transparent; font: inherit; cursor: pointer; } 

#projects .allmenu_list { list-style: none; margin: 0; padding: 8px; overflow: auto; } 
#projects .allmenu_list li { margin: 0; } 
#projects .allmenu_item { 
 width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; 
 } 
#projects .allmenu_item:hover, .allmenu_item:focus { background: #f3f4f6; outline: none; } 

#projects #cert02 .img_wrap { margin: 0 auto; width: fit-content; } 
#projects #cert02 .img_wrap img { border-radius: 20px; width: 100%; } 
#projects #cert02 h5 { margin-top: 20px; color:#fff; text-align: center; } 

 @media (max-width:800px) { 
 #projects .plant_wrap { flex-direction: column; } 
 #projects .tablist { flex-direction: row; gap: 10px; } 
 #projects .tab_btn { border: 1px solid #eee; border-radius: 10px; padding: 10px 0; width: calc((100% - 30px) / 4); text-align: center; } 
 #projects .tab_btn.is-active, .tab_btn[aria-selected="true"],#projects .tab_btn:hover { border-radius: 10px; } 
 #projects .tab_btn.is-active::before,#projects .tab_btn:hover:before { display: none; } 

 #projects .table_wrap:before { color: #fff; } 
 } 


/* ============ ESG 경영 개요 ============ */

/* 공통 */
#esg_intro .esg_img { display: block; margin: clamp(50px, 5vw, 100px) auto; } 
#esg_intro .esg_title { color: #006a67; font-weight: 600; text-align: center; } 
#esg_intro .middle { font-size: clamp(18px, 1.8vw, 22px); text-align: center; margin:clamp(10px, 2vw, 20px) 0; line-height: 1.2; } 
#esg_intro .text { text-align: center; } 

/* ESG 경영 개요 */

#esg_intro .flex_list { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 80px); margin: clamp(50px, 5vw, 100px) 0 0; justify-content: space-between; } 
#esg_intro .flex_list li { width: calc((100% - 160px) / 3); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 60px); display: flex; flex-direction: column; gap: 40px; } 
#esg_intro .flex_list li img { width: 100%; border-radius: 50%; display: block; margin: 0 auto; } 
#esg_intro .flex_list li .text_wrap { padding:0 0 40px; position: relative; } 
#esg_intro .flex_list li .text_wrap::before { content: ''; position: absolute; width: 100%; height: 1px; background-color: #ededed; bottom: 0; left: 0; } 
#esg_intro .flex_list li .text_wrap p:nth-child(1) { font-size: clamp(14px, 1.2vw, 16px); font-weight: 300; text-align: center; padding-bottom: 10px; } 
#esg_intro .flex_list li .text_wrap p:nth-child(2) { font-size: clamp(18px, 1.5vw, 20px); font-weight: 600; text-align: center; } 
#esg_intro .flex_list li .content { display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 5px; } 
#esg_intro .flex_list li .content span { color: #555; } 

/* ESG 경영 추진방향*/

/* ESG 조직도 */
#esg_intro .img_wrap img { width: 100%; } 

@media (max-width:1000px) { 
 #esg_intro .esg_img { width: 75%; } 
#esg_intro .flex_list li { width: calc((100% - 90px) / 3); } 
 } 
@media (max-width:640px) { 
 #esg_intro .flex_list { gap: 10px; } 
 #esg_intro .flex_list li { width: calc((100% - 10px) / 2); } 
 } 

 /* ============ Environment ============ */

/* 공통 */
#environment .esg_title { color: #006a67; font-weight: 600; text-align: center; } 



/* 환경경영 방침 */
#environment .middle { font-size: clamp(18px, 1.8vw, 22px); text-align: center; margin: clamp(20px, 2.5vw, 40px) 0; line-height: 1.2; } 
#environment .text { text-align: center; margin: clamp(20px, 2.5vw, 40px) 0; } 
#environment p:last-of-type { text-align: center; font-size: clamp(16px, 1.2vw, 20px); line-height: 1.2; } 
#environment img { display: block; margin: 0 auto; } 
#environment #cert01 .basic_ul { text-align: center; padding: 20px; border-top: 1px solid #239BA7; border-bottom: 1px solid #239BA7; width: fit-content; margin: 0 auto; } 

/* 환경경영 추진목표 */
#environment #cert02 .env_01, #environment #cert02 .env_02,#environment #cert02 .env_03,#environment #cert02 .env_04 { margin-top: clamp(50px, 5vw , 100px); } 

#environment .env_01 { display: flex; gap: clamp(20px, 4vw, 80px); align-items: center; } 
#environment .env_01 .vision { font-family: SBAggro; font-weight: 700; color: #1d496a; font-size: clamp(24px, 4vw, 50px); } 
#environment .env_01 div:last-of-type { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 40px); background: var(--card); flex: 1; text-align: center; font-size: clamp(16px, 1.6vw, 20px); } 

#environment .env_02 { display: flex; gap: clamp(20px, 4vw, 80px); align-items: center; } 
#environment .env_02 .goal { font-family: SBAggro; font-weight: 700; color: #239BA7; font-size: clamp(24px, 4vw, 50px); } 
#environment .env_02 div:last-of-type { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 40px); flex: 1; text-align: center; font-size: clamp(16px, 1.6vw, 20px); } 

#environment .env_03 { display: flex; gap: clamp(20px, 4vw, 80px); } 
#environment .env_03 .strategy { font-family: SBAggro; font-weight: 700; color: #60ac4e; font-size: clamp(24px, 4vw, 50px); min-width: 206px; } 
#environment .env_03 .number_list { display: flex; flex-wrap: wrap; flex: 1 2 0; gap: 10px; } 
#environment .env_03 .number_list > li { padding-left: 0; width: calc((100% - 10px) / 2); box-sizing: border-box; margin: 0; } 
#environment .env_03 .number_list > li div { display: flex; } 
#environment .env_03 .number_list > li:before { display: none; } 
#environment .env_03 .number_list > li .number_point { font-size: clamp(16px, 1.2vw, 20px); color: #2cb862; font-weight: 600; padding-right: 10px; } 
#environment .env_03 .number_list > li .text { font-size: clamp(16px, 1.2vw, 18px); font-weight: 600; margin: 0; text-align-last: left; } 
#environment .env_03 .number_list > li ul { margin-top: 5px; } 
#environment .env_03 .number_list > li ul li { padding-left: 40px; } 
#environment .env_03 .number_list > li ul li::before { top: 50%; left: 25px; } 

#environment .env_04 { display: flex; gap: clamp(20px, 4vw, 80px); } 
#environment .env_04 .indexes { font-family: SBAggro; font-weight: 700; font-size: clamp(24px, 4vw, 50px); color: #eb9039; min-width: 206px; } 
#environment .env_04 > div:last-of-type { flex: 4 1 0; } 
/* 환경경영 지표관리 */
.highcharts_figure { max-width: 720px; margin: 100px auto; } 
.highcharts_description { text-align: center; font-size: 14px; margin-top: 5px; color: #555; } 

@media (max-width:1200px) { 
 #environment .env_03 .strategy,#environment .env_04 .indexes { min-width: auto; } 
 } 
@media (max-width:800px) { 
 #environment .env_01,
 #environment .env_02,
 #environment .env_03,
 #environment .env_04 { flex-direction: column; } 

 #environment .env_01 > div:last-of-type,
 #environment .env_02 > div:last-of-type,
 #environment .env_04 > div:last-of-type { flex: none; width: 100%; } 

 #environment .env_03 .number_list { gap: 20px; } 
 #environment .env_03 .number_list li { width: 100%; } 
 } 

/* ============ Social ============ */

/* 공통 */
#social .social_title { color: #006a67; font-weight: 600; text-align: center; margin: 0 0 clamp(25px, 3vw, 50px); } 
#social .middle { font-size: clamp(18px, 1.8vw, 22px); text-align: center; margin: clamp(20px, 2.5vw, 40px) 0; line-height: 1.2; } 
#social .text { text-align: center; margin: clamp(20px, 2.5vw, 40px) 0; } 


/* 안전보건 */ 
#social .env_00 .middle { font-size: clamp(18px, 1.8vw, 22px); text-align: center; margin: clamp(20px, 2.5vw, 40px) 0; line-height: 1.2; } 
#social .env_00 .basic_ul { width: fit-content; position: relative;  left: 50%;  transform: translateX(-50%); } 
#social .env_00 .text { text-align: center; margin: clamp(20px, 2.5vw, 40px) 0; } 
#social .env_00 p:last-of-type { text-align: center; font-size: clamp(16px, 1.2vw, 20px); line-height: 1.2; } 
#social .env_00 img { display: block; margin: 0 auto clamp(50px, 5vw , 100px); } 
#social .env_00 .number_list { text-align: center; padding: 20px; border-top: 1px solid #239BA7; border-bottom: 1px solid #239BA7; width: fit-content; margin: 0 auto; } 

#social #cert01 .env_00, #social #cert01 .env_01, #social #cert01 .env_02,#social #cert01 .env_03,#social #cert01 .env_04 { margin-top: clamp(50px, 5vw , 100px); } 
#social #cert01 .env_05,#social #cert01 .env_06,#social #cert01 .env_07 { margin-top: clamp(100px, 8.5vw , 150px); } 

#social .env_01 { display: flex; gap: clamp(20px, 4vw, 80px); align-items: center; } 
#social .env_01 .vision { font-family: SBAggro; font-weight: 700; color: #1d496a; font-size: clamp(24px, 4vw, 50px); } 
#social .env_01 div:last-of-type { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 40px); background: var(--card); flex: 1; text-align: center; font-size: clamp(16px, 1.6vw, 20px); } 

#social .env_02 { display: flex; gap: clamp(20px, 4vw, 80px); align-items: center; } 
#social .env_02 .goal { font-family: SBAggro; font-weight: 700; color: #239BA7; font-size: clamp(24px, 4vw, 50px); } 
#social .env_02 div:last-of-type { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 40px); flex: 1; text-align: center; font-size: clamp(16px, 1.6vw, 20px); } 

#social .env_03 { display: flex; gap: clamp(20px, 4vw, 80px); } 
#social .env_03 .strategy { font-family: SBAggro; font-weight: 700; color: #60ac4e; font-size: clamp(24px, 4vw, 50px); min-width: 206px; } 
#social .env_03 .number_list { display: flex; flex-wrap: wrap; flex: 1 2 0; gap: 10px; } 
#social .env_03 .number_list > li { padding-left: 0; width: calc((100% - 10px) / 2); box-sizing: border-box; margin: 0; } 
#social .env_03 .number_list > li > div { display: flex; } 
#social .env_03 .number_list > li:before { display: none; } 
#social .env_03 .number_list > li .number_point { font-size: clamp(16px, 1.2vw, 20px); color: #2cb862; font-weight: 600; padding-right: 10px; } 
#social .env_03 .number_list > li .text { font-size: clamp(16px, 1.2vw, 18px); font-weight: 600; margin: 0; text-align: left; } 
#social .env_03 .number_list > li ul { margin-top: 5px; } 
#social .env_03 .number_list > li ul li { padding-left: 40px; } 
#social .env_03 .number_list > li ul li::before { top: 50%; left: 25px; } 

#social .env_04 { display: flex; gap: clamp(20px, 4vw, 80px); } 
#social .env_04 .indexes { font-family: SBAggro; font-weight: 700; font-size: clamp(24px, 4vw, 50px); color: #eb9039; min-width: 206px; } 
#social .env_04 > div:last-of-type { flex: 4 1 0; } 

#social .env_05 .flex_wrap { display: flex; gap: clamp(20px, 2vw, 40px); } 
#social .env_05 .flex_wrap li { width: calc((100% - 40px) / 3); display: flex; flex-direction: column; gap: clamp(20px, 3vw, 40px); } 
#social .env_05 .flex_wrap li .card { display: flex; align-items: center; gap: clamp(12px, 2vw, 16px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 40px); } 
#social .env_05 .flex_wrap li .card .icon { inline-size: 72px; block-size: 72px; aspect-ratio: 1/1; border-radius: 16px; display: grid
; place-items: center; background: radial-gradient(120% 120% at 20% 20%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, #238184, #25a1e9); position: relative; } 
#social .env_05 .flex_wrap li .card .icon::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 45px; height: 45px; } 
#social .env_05 .flex_wrap li:nth-of-type(1) .card .icon::before { background: url(../images/sub/shield.png) no-repeat 0 0 / 100%; } 
#social .env_05 .flex_wrap li:nth-of-type(2) .card .icon::before { background: url(../images/sub/hard-hat.png) no-repeat 0 0 / 100%; } 
#social .env_05 .flex_wrap li:nth-of-type(3) .card .icon::before { background: url(../images/sub/insurance.png) no-repeat 0 0 / 100%; } 
#social .env_05 .flex_wrap li .card h2 { margin: 0 0 clamp(10px, 2vw, 15px) 0; font-size: clamp(20px, 2.5vw, 28px); } 
#social .env_05 .flex_wrap li .card h2 span { font-size: clamp(12px, 0.8vw, 14px); } 
#social .env_05 .flex_wrap li .card p { margin: .25em 0 0 0; font-size: clamp(14px, 1.3vw, 16px); color: var(--ink-2); line-height: 1.2; } 
#social .env_05 .flex_wrap li > div { text-align: center; } 
#social .env_05 .flex_wrap li img { width: 100%; } 

#social .env_06 .safety_competition { display: flex; flex-wrap: wrap; gap: 20px; margin: clamp(20px, 4vw, 50px) 0; } 
#social .env_06 .safety_competition li { width: calc((100% - 80px) / 5); padding: 20px; border-radius: 50px; background: linear-gradient(37deg, #16325b, #0994c8); color: #fff; text-align: center; font-weight: 600; } 
#social .env_06 .table_flex { display: flex; gap: 40px; } 



/* 지역사회공헌 */
#social #cert02 .photo_flex { display: flex; gap: 40px; flex-wrap: wrap; } 
#social #cert02 .photo_flex li { width:calc((100% - 40px) / 2); } 
#social #cert02 .photo_flex li img { width: 100%; border-radius: 10px; aspect-ratio: 596 / 259; } 

/* 인권존중 */


@media (max-width:1440px) { 
 #social .env_05 .flex_wrap li .card { padding: clamp(20px, 3vw, 25px) clamp(20px, 3vw, 20px); } 
 #social .env_05 .flex_wrap li .card h2 { font-size: clamp(20px, 2.5vw, 22px); } 
 } 
@media (max-width:1200px) { 
 #social .env_03 .strategy,#social .env_04 .indexes { min-width: auto; } 


 #social .env_05 .flex_wrap li .card h2 { margin: 0 0 clamp(10px, 1.5vw, 10px) 0; } 
 #social .env_05 .flex_wrap li .card .icon { inline-size: 50px; block-size: 50px; border-radius: 7px; } 
 #social .env_05 .flex_wrap li .card .icon::before { width: 30px; height: 30px; } 

 #social .env_06 .safety_competition li { width: calc((100% - 40px) / 3); } 
 } 
@media (max-width:1000px) { 
 #social .env_05 .flex_wrap { gap: 80px 40px; flex-wrap: wrap; } 
#social .env_05 .flex_wrap li { width: calc((100% - 40px) / 2); } 

#social #cert02 .photo_flex li { width: 100%; } 
 } 
@media (max-width:800px) { 
 #social .env_01,
 #social .env_02,
 #social .env_03,
 #social .env_04 { flex-direction: column; } 

 #social .env_01 > div:last-of-type,
 #social .env_02 > div:last-of-type,
 #social .env_04 > div:last-of-type { flex: none; width: 100%; } 

 #social .env_00 img { width: 100%; } 

 #social .env_03 .number_list { gap: 20px; } 
 #social .env_03 .number_list li { width: 100%; } 

 #social .env_06 .table_flex { flex-direction: column; gap: clamp(50px, 6vw, 50px);; } 
 } 
 @media (max-width:640px) { 
 #social .env_05 .flex_wrap li { width: 100%; } 

 #social .env_06 .safety_competition { gap: 10px; } 
 #social .env_06 .safety_competition li { width: calc((100% - 10px) / 2); } 
 } 

 /* ============ Governance ============ */

/* 공통 */
#governance .governance_title { color: #006a67; font-weight: 600; text-align: center; margin: 0 0 clamp(25px, 3vw, 50px); } 
#governance .middle { font-size: clamp(18px, 1.8vw, 22px); text-align: center; margin: clamp(20px, 2.5vw, 40px) 0; line-height: 1.2; } 
#governance .text { text-align: center; margin: clamp(20px, 2.5vw, 40px) 0; line-height: 1.4; } 

/* COMPLIANCE PROGRAM */
#governance .img_flex { display: flex; gap: clamp(20px, 2vw, 40px); } 
#governance .img_flex li { width: calc((100% - 40px) / 2); border-radius: 10px; overflow: hidden; } 
#governance .img_flex li img { width: 100%; } 

/* 윤리서약서 */
#governance #cert02 img { width: 50%; display: block; margin: 0 auto; padding: 14px; background: linear-gradient(145deg, #eaa61d, #f0e2b2) padding-box, linear-gradient(180deg, #f6e9c6, #a37b33 40%, #f6e9c6) border-box; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); } 



@media (max-width:800px) { 
 #governance #cert02 img { width: 70%; } 
 } 

 /* ============ inquire 문의 공통 ============ */

.inquire .txt_dsc { padding-bottom: 10px; } 
.inquire table input[type=text] { width: 100%; } 
.inquire .agreeArea { margin: clamp(30px, 3.5vw , 50px) 0; } 
.inquire .agreeArea .txt_dsc { margin-bottom: 20px; } 
.inquire .agreeArea .txt_dsc:nth-of-type(2) { margin-bottom: 0; } 
.inquire .agreeArea .dl_type01 { margin-bottom: 20px; } 
.inquire .agreeArea .dl_type01 dd { position: relative; padding-left: 15px; margin-left: 10px; } 
.inquire .agreeArea .dl_type01 dd::before { content: '-'; position: absolute; left: 0; top: 0; width: 4px; height: 1px; } 
.inquire .assent { margin-top: 20px; } 

 /* ============ 신고센터공통 ============ */

.reporting_center .text { text-align: center; margin: clamp(20px, 2.5vw, 40px) 0; line-height: 1.4; } 
.reporting_center .table_wrap tbody th { font-weight: 600; } 
/* .reporting_center .table_wrap tbody td { padding: 20px; } */
.reporting_center .guarantee { margin: clamp(50px, 5vw , 100px) 0; } 
.reporting_center .number_list > li { padding-left: 0; box-sizing: border-box; margin: 0; } 
.reporting_center .number_list > li:first-of-type { margin-bottom: clamp(20px, 2.5vw, 40px); } 

.reporting_center .number_list > li > div { display: flex; } 
.reporting_center .number_list > li:before { display: none; } 
.reporting_center .number_list > li .number_point { font-size: clamp(16px, 1.2vw, 20px); color: #193a8c; font-weight: 600; padding-right: 10px; } 
.reporting_center .number_list > li .text { font-size: clamp(16px, 1.2vw, 18px); font-weight: 600; margin: 0; text-align: left; margin: 0 !important; } 
.reporting_center .number_list > li ul { margin-top: 5px; } 
.reporting_center .number_list > li ul li { padding-left: 40px; } 
.reporting_center .number_list > li ul li::before { top: 50%; left: 25px; } 

.reporting_center .txt_dsc { padding-bottom: 10px; } 
.reporting_center table input[type=text] { width: 100%; } 
.reporting_center .agreeArea { margin: clamp(30px, 3.5vw , 50px) 0; } 
.reporting_center .agreeArea .txt_dsc { margin-bottom: 20px; } 
.reporting_center .agreeArea .txt_dsc:nth-of-type(2) { margin-bottom: 0; } 
.reporting_center .agreeArea .dl_type01 { margin-bottom: 20px; } 
.reporting_center .agreeArea .dl_type01 dd { position: relative; padding-left: 15px; margin-left: 10px; } 
.reporting_center .agreeArea .dl_type01 dd::before { content: '-'; position: absolute; left: 0; top: 0; width: 4px; height: 1px; } 
.reporting_center .assent { margin-top: 20px; } 


 /* ============ CP소개 ============ */

.cp_intro .section_02,.cp_intro .section_03,.cp_intro .accordion { margin-top: 100px; } 

.cp_intro .section_01 { width: 100%; background: #f5f5f5; margin: clamp(50px,5vw,100px) 0 clamp(100px,10vw,200px); padding: 50px 0; height: 538px; } 
 .cp_intro .section_01 .cp_title { border-radius: 50px; padding: 10px 15px 10px 45px; background-color: #fff; position: relative; margin: 0 auto 50px; width: fit-content; } 
 .cp_intro .section_01 .cp_title::before { content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/sub/clover.png) no-repeat 0 0 / 100%; } 
.cp_intro .section_01 h3 { text-align: center; } 
.cp_intro .section_01 .cp_banner { position: relative; margin: 60px auto 0; background: url(../images/sub/cp_intro.jpg) no-repeat 50% 50%; padding: clamp(30px,5vw,100px); display: flex; align-items: center; } 
 .cp_intro .section_01 .cp_banner p { padding-left: 50px; color: #fff; line-height: 1.6; font-size: clamp(14px, 1.4vw, 20px); } 

 .cp_intro .section_02 .cp_list { display: flex; flex-wrap: wrap; justify-content: center; } 
.cp_intro .section_02 .cp_list li { width: calc(100% / 5); aspect-ratio: 1 / 1; background-color: #dff3da; opacity: 0.5; padding: 20px; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #000; font-size: clamp(14px, 1vw, 18px); text-align: center; line-height: 1.4; } 
.cp_intro .section_02 .cp_list li:nth-of-type(2),.cp_intro .section_02 .cp_list li:nth-of-type(4) { background-color: #e5e5e5; } 
.cp_intro .section_02 .cp_list li:nth-of-type(1) { transform: translateX(60px); } 
.cp_intro .section_02 .cp_list li:nth-of-type(2) { transform: translateX(30px); } 
.cp_intro .section_02 .cp_list li:nth-of-type(4) { transform: translateX(-30px); } 
.cp_intro .section_02 .cp_list li:nth-of-type(5) { transform: translateX(-60px); } 

.cp_intro .section_03 { display: flex; gap: clamp(20px, 4vw, 80px); } 
.cp_intro .section_03 .left h3 { min-width: 334px; font-family: SBAggro; font-weight: 700; color: #60ac4e; font-size: clamp(24px, 4vw, 50px); } 
.cp_intro .section_03 .right { flex: 4 1 0; } 
.cp_intro .section_03 .right .basic_ul { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 20px);; } 
.cp_intro .section_03 .right .basic_ul > li { padding-left: 0; } 
.cp_intro .section_03 .right .basic_ul > li:before { display: none; } 
.cp_intro .section_03 .right .basic_ul > li div { padding: 0 0 5px 15px; position: relative; font-size: clamp(16px, 1.2vw, 18px); font-weight: 600; } 
.cp_intro .section_03 .right .basic_ul > li div::before { content: ''; display: block; position: absolute; top: 50%; left: 0; width: 5px; height: 5px; background-color: #60ac4e; border-radius: 50%; transform: translateY(-50%); } 
 .cp_intro .section_03 .right .basic_ul > li > ul { margin-left: 15px; } 

.cp_intro .accordion { display: flex; gap: clamp(20px, 4vw, 80px); } 
.cp_intro .accordion .left h3 { min-width: 334px; font-family: SBAggro; font-weight: 700; color: #1d496a; font-size: clamp(24px, 4vw, 50px); } 
.cp_intro .accordion .right { flex: 4 1 0; } 

:root { --cp-bg:#fff; /* 바디 배경 */
 --cp-head:#fff; /* 헤더 배경 */
 --cp-border:#91a1bd; /* 보더 */
 --cp-text:#0f172a; /* 본문 텍스트 */
 --cp-accent:#2d6187; /* 포인트(스텝/아이콘) */
 --cp-shadow:0 1px 2px rgba(2,6,23,.04), 0 6px 16px rgba(2,6,23,.06); } 

.accordion { color: var(--cp-text); } 
.accordion_title { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; margin: 0 0 12px; } 
.accordion_item { background: var(--cp-bg); border-top: 1px solid var(--cp-border); border-bottom: 1px solid var(--cp-border); border-radius: 0; box-shadow: var(--cp-shadow); overflow: hidden; margin: 10px 0; } 

/* header */
.accordion_header { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 20px; background: var(--cp-head); border: 0; cursor: pointer; text-align: left; transition: background .25s ease, color .25s ease; } 
.accordion_step { display: inline-block; font-weight: 800; letter-spacing: .02em; color: var(--cp-accent); min-width: 92px; /* STEP 폭 일정 */ } 
.accordion_label { font-weight: 700; font-size: clamp(15px, 1.6vw, 18px); } 
.accordion_icon { inline-size: 18px; block-size: 18px; position: relative; } 
.accordion_icon::before,
.accordion_icon::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 2px; background: var(--cp-accent); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } 
.accordion_icon::after { transform: rotate(90deg); } /* + 모양 */
.accordion_item.active .accordion_header { background: #f3f6f9; } 
.accordion_item.active .accordion_icon::after { transform: rotate(0deg); /* -로 변환 */
 opacity: 0; } 

/* body (부드러운 펼침) */
.accordion_body { max-height: 0; overflow: hidden; padding: 0 18px; background: var(--cp-bg); line-height: 1.65; font-size: 15px; transition: max-height .35s ease, padding .35s ease, opacity .25s ease; opacity: .0; } 
.accordion_item.active .accordion_body { padding: 60px 20px 80px; opacity: 1; /* max-height는 JS로 scrollHeight를 넣어 자연스러운 높이 보장 */ } 

/* 애니메니션 */
/* === Reveal 기본 === */
.reveal, .reveal_top, .reveal_left, .reveal_right { opacity: 0; will-change: transform, opacity; } 
.reveal_top { transform: translateY(-80px); transition: opacity .8s ease, transform .8s ease; } 
.reveal_left { transform: translateX(-60px); transition: opacity .8s ease, transform .8s ease; } 
.reveal_right { transform: translateX(60px); transition: opacity .8s ease, transform .8s ease; } 
.reveal_top.show,
.reveal_left.show,
.reveal_right.show { opacity: 1; transform: translate(0,0); } 

/* 접근성: 모션 최소화 환경 */
@media (prefers-reduced-motion: reduce) { 
 .reveal, .reveal_top, .reveal_left, .reveal_right { transition: none !important; transform: none !important; opacity: 1 !important; } 
 } 

@media (max-width: 1000px) { 

 .cp_intro .section_01 { height: auto; padding: 50px 0 0; } 
 .cp_intro .section_01 .cp_banner p { padding-left: 0; } 
 .cp_intro .section_02 .cp_list li { width: calc(100% / 3); } 
 .cp_intro .section_02 .cp_list li:nth-of-type(1) { transform: translateX(30px); } 
 .cp_intro .section_02 .cp_list li:nth-of-type(2) { transform: translateX(0); } 
 .cp_intro .section_02 .cp_list li:nth-of-type(3) { transform: translateX(-30px); } 
 .cp_intro .section_02 .cp_list li:nth-of-type(4) { transform: translate(30px , -60px); } 
 .cp_intro .section_02 .cp_list li:nth-of-type(5) { transform: translate(0,-60px); } 
 .cp_intro .section_03,.cp_intro .accordion { flex-direction: column; } 
 .cp_intro .section_03 .left h3 { min-width: unset; } 
 } 
@media (max-width: 800px) { 
 .cp_intro .section_01 { margin: clamp(50px, 5vw, 100px) 0 clamp(50px, 5vw, 100px); } 
.cp_intro .section_02,.cp_intro .section_03,.cp_intro .accordion { margin-top: clamp(50px, 5vw , 100px); } 
 } 


@media (max-width: 640px) { 
 .cp_intro .section_02 .cp_list li:nth-of-type(1) { transform: translateX(0); } 
 .cp_intro .section_02 .cp_list li:nth-of-type(2) { transform: translateX(0); } 
 .cp_intro .section_02 .cp_list li:nth-of-type(3) { transform: translateX(0); } 
 .cp_intro .section_02 .cp_list li:nth-of-type(4) { transform: translate(0,0); } 
 .cp_intro .section_02 .cp_list li:nth-of-type(5) { transform: translate(0,0); } 

 .accordion_header { padding: 14px 14px; } 
 .accordion_step { min-width: 80px; font-size: 13px; } 
 .accordion_label { font-size: 15px; } 
 .accordion_body { font-size: 14px; } 
 } 


 /* ============ 자율준수 메시지 & 자율준수 행동강령 ============ */

.cp .declaration { display: flex; gap: clamp(40px, 6vw, 80px); } 
.cp .declaration .frame { flex: 1 1 0; display: flex; flex-direction: column; gap: clamp(40px, 4vw, 80px); justify-content: space-between; position: relative; align-items: center; border: 2px solid #e0e4e6; padding: clamp(40px, 4vw, 80px) clamp(20px, 2vw, 40px); border-radius: 10px; box-sizing: border-box; box-shadow: var(--shadow); } 
.cp .declaration .frame::before { content: "MANBO"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: SBAggro; font-weight: 700; color: #c9c9c9; font-size: clamp(32px, 8vw, 128px); height: 623px; height: 155px; opacity: 0.1; z-index: -1; } 
.cp .declaration .left .img_wrap { width: 50%; } 
.cp .declaration .left .img_wrap img { width: 100%; } 
.cp .declaration .right .img_wrap { width: 70%; } 
.cp .declaration .right .img_wrap img { width: 100%; } 
.cp .declaration .contents { min-height: 300px; } 
.cp .declaration .contents .sub_title { font-size: clamp(16px,1.2vw,18px); font-weight: 500; margin-bottom: clamp(5px,1vw,10px); } 
.cp .declaration .contents .text { font-size: clamp(14px,1vw,16px); line-height: 1.4; } 
.cp_code .contents .sub_title { margin-top:40px; text-align: center; } 
 .cp .point { font-weight: 600; font-size: 17px; color:#FA812F; position: relative; z-index: 1; } 
 .cp .point_02 { font-weight: 600; font-size: 17px; color:#ED3F27; position: relative; z-index: 1; } 
 .cp .point::before { position: absolute; content: ''; width: 100%; height: 50%; left: 0; bottom: 0; background-color: #fdefd9; z-index: -1; } 
 .cp .point_02::before { position: absolute; content: ''; width: 100%; height: 50%; left: 0; bottom: 0; background-color: #fdefd9; z-index: -1; } 


@media (max-width: 1000px) { 
 .cp .declaration { flex-direction: column; } 
 } 

/* ============ CP 관련문서 ============ */
.cp_documents ul { display: flex; gap: clamp(20px,3vw,60px) clamp(20px,1.2vw,40px); flex-wrap: wrap; justify-content: space-between; } 
.cp_documents ul li { width: calc((100% - 80px) / 3); background:#fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 40px); display: flex; gap: clamp(20px,2vw,20px); align-items: center; } 
.cp_documents ul li .icon { inline-size: clamp(60px,8vw,80px); block-size: clamp(60px,8vw,80px); border-radius: 16px; display: grid; place-items: center; background: #1870da; position: relative; aspect-ratio: 1 / 1; } 
.cp_documents ul li .icon::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(30px,4vw,45px);; height: clamp(30px,4vw,45px); background: url(../images/sub/document.png) no-repeat 0 0 / 100%; } 
.cp_documents ul li p { margin-bottom: 20px; font-weight: 500; font-size: clamp(18px,1.4vw,20px); word-break: keep-all; } 
.cp_documents ul li .downroad { padding: 13px 20px 13px 55px; background: url(../images/sub/download.png) no-repeat 20px center / 20px #203f6d; color: #fff; display: inline-block; border-radius: 5px; } 

@media (max-width: 1400px) { 
 .cp_documents ul li { width: calc((100% - 40px) / 2); } 
 } 
@media (max-width: 700px) { 
 .cp_documents ul li { width: 100%; } 
 } 


/* ============ 사이트맵 ============ */

.site_map ul { display: flex; gap: 20px; flex-wrap: wrap; margin-top: clamp(20px,2vw,40px); margin-bottom: clamp(40px,4vw,100px); } 
.site_map ul li { width: calc((100% - 60px) / 4); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: 0.3s ease-in; } 
.site_map ul li a { transition: 0.3s ease-in; display: inline-block; width: 100%; padding: 20px; } 
.site_map ul li:hover { border-color: #0e5cc1; } 
.site_map ul li:hover a { color: #0e5cc1; } 
@media (max-width: 1000px) { 
 .site_map ul { gap: 10px; } 
 .site_map ul li { width: calc((100% - 30px) / 4); } 
 } 
@media (max-width: 750px) { 
 .site_map ul li { width: calc((100% - 20px) / 3); } 
 } 
@media (max-width: 540px) { 
 .site_map ul li { width: calc((100% - 10px) / 2); } 
 } 
@media (max-width: 360px) { 
 .site_map ul li a { padding: 20px 5px 20px 15px; } 
 }