/*사업소개*/
/* 그누보드 내용관리등 에디터로 입력할 경우  여기서부터 */

.daon_ver3_sub_type15 {width:100%; max-width:1500px; margin:0 auto;}
.daon_ver3_sub_type15:after{ content:""; display:block; clear:both;}
.daon_ver3_sub_type15 .type15-1 {position:relative; width:100%;}
.daon_ver3_sub_type15 .type15-1:after{ content:""; display:block; clear:both;}
.daon_ver3_sub_type15 .type15-1 .con_box { display:flex; align-items: center;justify-content: space-between; flex-direction: row-reverse; width:100%; margin:100px auto;}
.daon_ver3_sub_type15 .type15-1 .con_box:after{ content:""; display:block; clear:both;}
.daon_ver3_sub_type15 .type15-1 .img_box {position:relative; width:50%; transition:0.5s all ease; } 
.daon_ver3_sub_type15 .type15-1 .img_box img {max-width:100%; box-shadow: 15px 15px 10px rgba(0,0,0,.05); transition:0.5s all ease; border-radius:10px;}
.daon_ver3_sub_type15 .type15-1 .txt_box {position:relative; width:50%; padding-right:50px; overflow:hidden;  } 
.daon_ver3_sub_type15 .type15-1 .txt_box:after{ content:""; display:block; clear:both;}
.daon_ver3_sub_type15 .type15-1 .txt_box h2.tit1 {display:flex; align-items: center;}
.daon_ver3_sub_type15 .type15-1 .txt_box h2.tit1 .icon { display:flex; justify-content: center; align-items: center; width: 80px; height: 80px; margin-right:20px; border-radius: 50%; background-color:#e53d30; transition:0.5s all ease;}
.daon_ver3_sub_type15 .type15-1 .txt_box h2.tit1 .icon i {font-size:2.5em; color:#fff; }
.daon_ver3_sub_type15 .type15-1 .txt_box h2.tit1 p { width:75%; display: inline-block; vertical-align: middle; font-size:2.5em; color:#000; line-height:1.2em; font-weight:700; }
.daon_ver3_sub_type15 .type15-1 .txt_box p.tit_desc {display:block; margin-top:30px; font-size:1.25em; color:#666; line-height:1.6em; font-weight:400; word-break:keep-all;}
.daon_ver3_sub_type15 .type15-1 .txt_box ul.chk_list { width:100%; margin-top:50px; border-top:1px solid #222 }
.daon_ver3_sub_type15 .type15-1 .txt_box ul.chk_list:after{ content:""; display:block; clear:both;}
.daon_ver3_sub_type15 .type15-1 .txt_box ul.chk_list li {position:relative; float:left; width:100%; padding:10px 15px 10px 25px; font-size: 1.25em; color: #666; line-height: 1.6em; border-bottom:1px dashed #ddd; transition:0.5s all ease;}
.daon_ver3_sub_type15 .type15-1 .txt_box ul.chk_list li:before { display:block; content:""; position:absolute; left:12px; top:22px; width:4px; height:4px; background-color:#e53d30; border-radius:4px;}

.daon_ver3_sub_type15 .type15-2 {width:100%;}
.daon_ver3_sub_type15 .type15-2:after{ content:""; display:block; clear:both;}
.daon_ver3_sub_type15 .type15-2 .con_box { position:relative; display:flex; align-items: center; width:100%; margin:150px auto; }
.daon_ver3_sub_type15 .type15-2 .con_box:before {z-index:-1;  display:block; content:""; position:absolute; right:0; top:0px; width:70%; height:400px; background-color:#f8f8f8; border-radius:10px;}
.daon_ver3_sub_type15 .type15-2 .img_box { position:relative; top:-50px; width:40%; text-align:center; transition:0.5s all ease;} 
.daon_ver3_sub_type15 .type15-2 .img_box img {max-width:100%; box-shadow: 15px 15px 10px rgba(0,0,0,.05); transition:0.5s all ease; border-radius:10px;}
.daon_ver3_sub_type15 .type15-2 .txt_box {position:relative; width:60%; padding:0 0 0 80px; } 
.daon_ver3_sub_type15 .type15-2 .txt_box:after{ content:""; display:block; clear:both;}
.daon_ver3_sub_type15 .type15-2 .txt_box em.num {position: absolute; right:50px; bottom:-30px; font-size:6em; font-weight:900; color:rgba(0,0,0,.05); font-style:normal;}
.daon_ver3_sub_type15 .type15-2 .txt_box h2.tit1 {position:relative; display:block;}
.daon_ver3_sub_type15 .type15-2 .txt_box h2.tit1:before { content: ''; display:block; position: absolute; left: 0; top:-15px; width: 50px; height: 2px; background-color:#000;}
.daon_ver3_sub_type15 .type15-2 .txt_box h2.tit1 .icon {  display: inline-block; vertical-align: middle; text-align:center; width: 80px; height: 80px; margin-right: 15px; border-radius: 50%; background: #e53d30;}
.daon_ver3_sub_type15 .type15-2 .txt_box h2.tit1 .icon i {display: inline-block; vertical-align: middle; font-size:2.5em; color:#fff; line-height:80px;}
.daon_ver3_sub_type15 .type15-2 .txt_box h2.tit1 p {display: inline-block; vertical-align: middle; font-size:2.85em; color:#000; line-height:1.2em; font-weight:700; }
.daon_ver3_sub_type15 .type15-2 .txt_box h2.tit1 p strong { display:block; color:#000; font-weight:400;}
.daon_ver3_sub_type15 .type15-2 .txt_box p.tit_desc {display:block; margin-top:30px; font-size:1.25em; color:#666; line-height:1.6em; font-weight:400; word-break:keep-all;}
.daon_ver3_sub_type15 .type15-2 .con_box.type_other {flex-direction: row-reverse; }
.daon_ver3_sub_type15 .type15-2 .con_box.type_other:before {z-index:-1;  display:block; content:""; position:absolute; left:0; top:0px; width:70%; height:400px; background-color:#f8f8f8;}
.daon_ver3_sub_type15 a.btn_go {display:inline-block; margin-top:40px; padding:10px 20px; font-size:1.25em; line-height:1.4em; text-align:center; color:#fff; background-color:#e53d30; border-radius:4px; transition: .3s;} 
.daon_ver3_sub_type15 a.btn_go:hover {background-color:#333; }

@media all and (max-width:1500px){
	.daon_ver3_sub_type15 {padding:0 4%;}
}

@media all and (max-width:1200px){
	.daon_ver3_sub_type15 .type15-1 .txt_box h2.tit1 .icon { width: 70px; height: 70px; }
	.daon_ver3_sub_type15 .type15-1 .txt_box h2.tit1 .icon i { font-size:2em; }
	.daon_ver3_sub_type15 .type15-1 .txt_box h2.tit1 p { font-size:2em;}
	.daon_ver3_sub_type15 .type15-1 .txt_box p.tit_desc {font-size:1.15em;}

	.daon_ver3_sub_type15 .type15-2 .con_box:before{height:300px; top:-30px;}
	.daon_ver3_sub_type15 .type15-2 .con_box.type_other:before{height:300px; top:-30px;}
	.daon_ver3_sub_type15 .type15-2 .txt_box p.tit_desc {font-size:1.15em;}
}

@media all and (max-width:992px){		
	.daon_ver3_page_title{margin-bottom:50px;}	
	.daon_ver3_page_title h1{font-size:1.85em;}
	.daon_ver3_page_title h2{font-size:1em;}

	.daon_ver3_sub_type15 .type15-1 .con_box {flex-direction: column; margin:50px auto 0;} 
	.daon_ver3_sub_type15 .type15-1 .img_box {width:100%; padding:0; text-align:center;}
	.daon_ver3_sub_type15 .type15-1 .txt_box {width:100%; margin:50px 0; padding:0 20px;}

	
	.daon_ver3_sub_type15 .type15-2 .con_box {flex-direction: column; margin:20px auto 0;}
	.daon_ver3_sub_type15 .type15-2 .con_box:before {display:none; }
	.daon_ver3_sub_type15 .type15-2 .img_box { width:100%; top:0; }
	.daon_ver3_sub_type15 .type15-2 .txt_box {width:100%; margin-top:40px; padding:20px 20px;}
	.daon_ver3_sub_type15 .type15-2 .txt_box em.num {right:0; bottom:45px; font-size:6em; }
	.daon_ver3_sub_type15 .type15-2 .txt_box h2.tit1 p { font-size:2em; }
	.daon_ver3_sub_type15 .type15-2 .con_box.type_other {flex-wrap: wrap;}
	.daon_ver3_sub_type15 .type15-2 .con_box.type_other:before { display:none; }
}

@media screen and (max-width:768px){		
	.daon_ver3_page_title{margin-bottom:40px;}
	.daon_ver3_page_title h1{font-size:1.85em;}
	.daon_ver3_page_title h2{font-size:1em;}
}

@media all and (max-width:640px){
	.daon_ver3_sub_type15 .type15-1 .txt_box h2.tit1 .icon { width: 50px; height: 50px; margin-right:10px;}
	.daon_ver3_sub_type15 .type15-1 .txt_box h2.tit1 .icon i { font-size:1.5em; }
	.daon_ver3_sub_type15 .type15-1 .txt_box h2.tit1 p { font-size:1.5em;}
	.daon_ver3_sub_type15 .type15-1 .txt_box ul.chk_list li {font-size:1.15em;}	
	.daon_ver3_sub_type15 a.btn_go {font-size:1em;}
}
/*  여기까지 코드를 복사하여 공통 css파일 최하단에 추가합니다. */

/* 그누보드 내용관리등 에디터로 입력할 경우  여기서부터 */
.ssugun_point {color:#C53428; }
.ssugun_wrap{width:100%; min-width:320px; max-width:1500px; margin:0 auto;}

.ssugun_01_title{width:100%; text-align:center; margin-bottom:70px;}
.ssugun_01_title h1{width:100%; font-size:2.5em; font-weight:600;}
.ssugun_01_title h1:after {content:""; clear:both; display:block; width:30px; margin:10px auto; border:1px solid #000;}
.ssugun_01_title h2{width:100%; font-size:1.2em; color:#666; margin-top:20px; }

.ssugun_type02 {width:100%; max-width:1500px; margin:0 auto;}
.ssugun_type02:after{ content:""; display:block; clear:both;}
.ssugun_type02 .ssugun_15-1 {position:relative; width:100%;}
.ssugun_type02 .ssugun_15-1:after{ content:""; display:block; clear:both;}
.ssugun_type02 .ssugun_15-1 .con_box { display:flex; align-items: center;justify-content: space-between; flex-direction: row-reverse; width:100%; margin:100px auto;}
.ssugun_type02 .ssugun_15-1 .con_box:after{ content:""; display:block; clear:both;}
.ssugun_type02 .ssugun_15-1 .img_box {position:relative; width:50%; transition:0.5s all ease; } 
.ssugun_type02 .ssugun_15-1 .img_box img {max-width:100%; box-shadow: 15px 15px 10px rgba(0,0,0,.05); transition:0.5s all ease; border-radius:10px;}
.ssugun_type02 .ssugun_15-1 .txt_box {position:relative; width:50%; padding-right:50px; overflow:hidden;  } 
.ssugun_type02 .ssugun_15-1 .txt_box:after{ content:""; display:block; clear:both;}
.ssugun_type02 .ssugun_15-1 .txt_box h2.tit1 {display:flex; align-items: center;}
.ssugun_type02 .ssugun_15-1 .txt_box h2.tit1 .icon { display:flex; justify-content: center; align-items: center; width: 80px; height: 80px; margin-right:20px; border-radius: 50%; background-color:#e53d30; transition:0.5s all ease;}
.ssugun_type02 .ssugun_15-1 .txt_box h2.tit1 .icon i {font-size:2.5em; color:#fff; }
.ssugun_type02 .ssugun_15-1 .txt_box h2.tit1 p { width:75%; display: inline-block; vertical-align: middle; font-size:2.5em; color:#000; line-height:1.2em; font-weight:700; }
.ssugun_type02 .ssugun_15-1 .txt_box p.tit_desc {display:block; margin-top:30px; font-size:1.25em; color:#666; line-height:1.6em; font-weight:400; word-break:keep-all;}
.ssugun_type02 .ssugun_15-1 .txt_box ul.chk_list { width:100%; margin-top:50px; border-top:1px solid #222 }
.ssugun_type02 .ssugun_15-1 .txt_box ul.chk_list:after{ content:""; display:block; clear:both;}
.ssugun_type02 .ssugun_15-1 .txt_box ul.chk_list li {position:relative; float:left; width:100%; padding:10px 15px 10px 25px; font-size: 1.25em; color: #666; line-height: 1.6em; border-bottom:1px dashed #ddd; transition:0.5s all ease;}
.ssugun_type02 .ssugun_15-1 .txt_box ul.chk_list li:before { display:block; content:""; position:absolute; left:12px; top:22px; width:4px; height:4px; background-color:#e53d30; border-radius:4px;}

.ssugun_type02 .ssugun_15-2 {width:100%;}
.ssugun_type02 .ssugun_15-2:after{ content:""; display:block; clear:both;}
.ssugun_type02 .ssugun_15-2 .con_box { position:relative; display:flex; align-items: center; width:100%; margin:150px auto; }
.ssugun_type02 .ssugun_15-2 .con_box:before {z-index:-1;  display:block; content:""; position:absolute; right:0; top:0px; width:70%; height:400px; background-color:#f8f8f8; border-radius:10px;}
.ssugun_type02 .ssugun_15-2 .img_box { position:relative; top:-50px; width:40%; text-align:center; transition:0.5s all ease;} 
.ssugun_type02 .ssugun_15-2 .img_box img {max-width:100%; box-shadow: 15px 15px 10px rgba(0,0,0,.05); transition:0.5s all ease; border-radius:10px;}
.ssugun_type02 .ssugun_15-2 .txt_box {position:relative; width:60%; padding:0 0 0 80px; } 
.ssugun_type02 .ssugun_15-2 .txt_box:after{ content:""; display:block; clear:both;}
.ssugun_type02 .ssugun_15-2 .txt_box em.num {position: absolute; right:50px; bottom:-30px; font-size:6em; font-weight:900; color:rgba(0,0,0,.05); font-style:normal;}
.ssugun_type02 .ssugun_15-2 .txt_box h2.tit1 {position:relative; display:block;}
.ssugun_type02 .ssugun_15-2 .txt_box h2.tit1:before { content: ''; display:block; position: absolute; left: 0; top:-15px; width: 50px; height: 2px; background-color:#000;}
.ssugun_type02 .ssugun_15-2 .txt_box h2.tit1 .icon {  display: inline-block; vertical-align: middle; text-align:center; width: 80px; height: 80px; margin-right: 15px; border-radius: 50%; background: #e53d30;}
.ssugun_type02 .ssugun_15-2 .txt_box h2.tit1 .icon i {display: inline-block; vertical-align: middle; font-size:2.5em; color:#fff; line-height:80px;}
.ssugun_type02 .ssugun_15-2 .txt_box h2.tit1 p {display: inline-block; vertical-align: middle; font-size:2.85em; color:#000; line-height:1.2em; font-weight:700; }
.ssugun_type02 .ssugun_15-2 .txt_box h2.tit1 p strong { display:block; color:#000; font-weight:400;}
.ssugun_type02 .ssugun_15-2 .txt_box p.tit_desc {display:block; margin-top:30px; font-size:1.25em; color:#666; line-height:1.6em; font-weight:400; word-break:keep-all;}
.ssugun_type02 .ssugun_15-2 .con_box.type_other {flex-direction: row-reverse; }
.ssugun_type02 .ssugun_15-2 .con_box.type_other:before {z-index:-1;  display:block; content:""; position:absolute; left:0; top:0px; width:70%; height:400px; background-color:#f8f8f8;}
.ssugun_type02 a.btn_go {display:inline-block; margin-top:40px; padding:10px 20px; font-size:1.25em; line-height:1.4em; text-align:center; color:#fff; background-color:#e53d30; border-radius:4px; transition: .3s;} 
.ssugun_type02 a.btn_go:hover {background-color:#333; }

@media all and (max-width:1500px){
	.ssugun_type02 {padding:0 4%;}
}

@media all and (max-width:1200px){
	.ssugun_type02 .ssugun_15-1 .txt_box h2.tit1 .icon { width: 70px; height: 70px; }
	.ssugun_type02 .ssugun_15-1 .txt_box h2.tit1 .icon i { font-size:2em; }
	.ssugun_type02 .ssugun_15-1 .txt_box h2.tit1 p { font-size:2em;}
	.ssugun_type02 .ssugun_15-1 .txt_box p.tit_desc {font-size:1.15em;}

	.ssugun_type02 .ssugun_15-2 .con_box:before{height:300px; top:-30px;}
	.ssugun_type02 .ssugun_15-2 .con_box.type_other:before{height:300px; top:-30px;}
	.ssugun_type02 .ssugun_15-2 .txt_box p.tit_desc {font-size:1.15em;}
}

@media all and (max-width:992px){		
	.ssugun_01_title{margin-bottom:50px;}	
	.ssugun_01_title h1{font-size:1.85em;}
	.ssugun_01_title h2{font-size:1em;}

	.ssugun_type02 .ssugun_15-1 .con_box {flex-direction: column; margin:50px auto 0;} 
	.ssugun_type02 .ssugun_15-1 .img_box {width:100%; padding:0; text-align:center;}
	.ssugun_type02 .ssugun_15-1 .txt_box {width:100%; margin:50px 0; padding:0 20px;}

	
	.ssugun_type02 .ssugun_15-2 .con_box {flex-direction: column; margin:20px auto 0;}
	.ssugun_type02 .ssugun_15-2 .con_box:before {display:none; }
	.ssugun_type02 .ssugun_15-2 .img_box { width:100%; top:0; }
	.ssugun_type02 .ssugun_15-2 .txt_box {width:100%; margin-top:40px; padding:20px 20px;}
	.ssugun_type02 .ssugun_15-2 .txt_box em.num {right:0; bottom:45px; font-size:6em; }
	.ssugun_type02 .ssugun_15-2 .txt_box h2.tit1 p { font-size:2em; }
	.ssugun_type02 .ssugun_15-2 .con_box.type_other {flex-wrap: wrap;}
	.ssugun_type02 .ssugun_15-2 .con_box.type_other:before { display:none; }
}

@media screen and (max-width:768px){		
	.ssugun_01_title{margin-bottom:40px;}
	.ssugun_01_title h1{font-size:1.85em;}
	.ssugun_01_title h2{font-size:1em;}
}

@media all and (max-width:640px){
	.ssugun_type02 .ssugun_15-1 .txt_box h2.tit1 .icon { width: 50px; height: 50px; margin-right:10px;}
	.ssugun_type02 .ssugun_15-1 .txt_box h2.tit1 .icon i { font-size:1.5em; }
	.ssugun_type02 .ssugun_15-1 .txt_box h2.tit1 p { font-size:1.5em;}
	.ssugun_type02 .ssugun_15-1 .txt_box ul.chk_list li {font-size:1.15em;}	
	.ssugun_type02 a.btn_go {font-size:1em;}
}
/*  여기까지 코드를 복사하여 공통 css파일 최하단에 추가합니다. */

/*서브 제품안내 탭 메뉴 시작*/
/* ===== 메인 컨테이너 ===== */
        .su211-container {
            max-width: 1430px; /* 최대 가로 넓이 1430px */
            width: 100%; /* 반응형을 위한 100% 너비 */
            margin: 0 auto;
        }
        
        /* ===== 탭 메뉴 래퍼 ===== */
        .su211-tab-wrapper {
            width: 100%;
            margin-bottom: 0;
        }
        
        /* ===== 탭 메뉴 리스트 ===== */
        .su211-tab-list {
            display: flex;
            gap: 10px; /* 탭 간격 10px */
            padding: 0;
            list-style: none;
            margin-bottom: 0;
            flex-wrap: wrap; /* 반응형을 위한 줄바꿈 허용 */
			margin-bottom: 70px;
        }
        
        /* ===== 개별 탭 아이템 ===== */
        .su211-tab-item {
            flex: 1;
            min-width: 150px; /* 최소 너비 설정 */
            position: relative;
        }
        
        /* ===== 탭 버튼 스타일 ===== */
        .su211-tab-button {
            width: 100%;
            padding: 15px 20px;
            border: none;
            background: linear-gradient(to right, #808080 0%, #808080 100%); /* 기본 회색 배경 */
            color: #ffffff;
            font-size: 22px;
            font-weight: 500;
            cursor: pointer;
            border-radius: 10px 10px 10px 10px; /* 라운드 처리 - 값 조절 가능 */
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        /* ===== 탭 버튼 그라데이션 애니메이션 오버레이 ===== */
        .su211-tab-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, #2f4e9e 0%, #2f4e9e 100%); /* 회색에서 파란색으로 그라데이션 */
            transition: left 0.5s ease;
            z-index: 1;
        }
        
        /* ===== 탭 버튼 텍스트 (오버레이 위에 표시) ===== */
        .su211-tab-button span {
            position: relative;
            z-index: 2;
        }
        
        /* ===== 탭 하단 라인 애니메이션 ===== */
        .su211-tab-button::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: -100%;
            width: 100%;
            height: 4px; /* 하단 라인 굵기 */
            background-color: #021545;
            transition: left 0.5s ease;
            z-index: 3;
        }
        
        /* ===== 탭 호버 효과 ===== */
        .su211-tab-button:hover::before {
            left: 0; /* 그라데이션 애니메이션 실행 */
        }
        
        .su211-tab-button:hover::after {
            left: 0; /* 하단 라인 애니메이션 실행 */
        }
        
        /* ===== 활성 탭 스타일 ===== */
        .su211-tab-button.su211-active {
            background: linear-gradient(to right, #2f4e9e 0%, #2f4e9e 100%); /* 활성 탭 파란색 배경 */
        }
        
        .su211-tab-button.su211-active::before {
            display: none; /* 활성 탭은 호버 애니메이션 제거 */
        }
        
        .su211-tab-button.su211-active::after {
            left: 0;
            background-color: #2f4e9e;
        }
        
        /* ===== 콘텐츠 영역 컨테이너 ===== */
        .su211-content-container {
            width: 100%;
            background-color: #ffffff; /* 콘텐츠 영역 배경색 - 삭제하려면 이 줄을 제거하세요 */
            border-radius: 10px 10px 10px 10px; /* 하단 라운드 처리 */
            overflow: hidden;
        }
        
        /* ===== 개별 콘텐츠 패널 ===== */
        .su211-content-panel {
            display: none;
            padding: 0px; /* 콘텐츠 내부 패딩 */
            min-height: 300px; /* 최소 높이 - 삭제하면 콘텐츠에 따라 자동 조절됩니다 */
            /* height를 지정하려면 아래 주석을 해제하고 값을 설정하세요 */
            /* height: 500px; */
            animation: su211-fadeIn 0.5s ease;
        }
        
        /* ===== 활성 콘텐츠 패널 표시 ===== */
        .su211-content-panel.su211-active {
            display: block;
        }
        
        /* ===== 페이드인 애니메이션 ===== */
        @keyframes su211-fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* ===== 콘텐츠 타이틀 스타일 ===== */
        .su211-content-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            text-align: center;
        }
        
        /* ===== 콘텐츠 텍스트 스타일 ===== */
        .su211-content-text {
            font-size: 22px;
            line-height: 1.6;
            color: #666;
            text-align: center;
        }
        
        /* ===== 반응형 디자인 ===== */
        @media (max-width: 768px) {
            .su211-tab-button {
                font-size: 18px;
                padding: 12px 15px;
            }
            
            .su211-content-panel {
                padding: 30px 20px;
                min-height: 200px; /* 모바일에서 최소 높이 조정 */
            }
            
            .su211-tab-item {
                min-width: 120px;
            }
        }
        
        @media (max-width: 480px) {
            .su211-tab-list {
                flex-direction: column;
            }
            
            .su211-tab-item {
                width: 100%;
            }
            
            .su211-tab-button {
                border-radius: 10px; /* 모바일에서는 전체 라운드 처리 */
            }
        }

/*서브 제품안내 탭 메뉴 끝*/

/*와이어링 넷 시작*/
 /* ===== 메인 컨테이너 ===== */
        .su212-container {
            max-width: 1430px; /* 최대 가로 넓이 1430px */
            width: 100%;
            margin: 0 auto;
            background-color: #ffffff;
        }
        
        /* ===== 섹션 공통 스타일 ===== */
        .su212-section {
            margin-bottom: 60px;
            opacity: 0; /* 애니메이션 초기 상태 */
            /* 초기 transform은 JavaScript에서 섹션별로 설정 */
        }
        
        /* ===== 섹션 제목 스타일 ===== */
        .su212-section-title {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            font-size: 28px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        /* 제목 앞 사각형 아이콘 */
        .su212-title-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #4169E1 0%, #5479F1 100%);
            margin-right: 15px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 20px;
        }
        
        /* ===== 1. 공법 개요 섹션 ===== */
        .su212-overview-content {
            background-color: #f8f9fa;
            padding: 25px;
            border-left: 4px solid #4169E1;
            border-radius: 5px;
            line-height: 1.8;
            font-size: 20px;
            color: #555;
        }
		
		.su212-oc {
			font-size: 22px;
            font-weight: bold;
            color: #000000;
		}
        
        .su212-overview-content li {
            margin-left: 20px;
            list-style-type: disc;
        }
        
        /* ===== 2. 특징 및 효과 섹션 ===== */
        .su212-features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .su212-feature-item {
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            opacity: 0; /* 초기 상태 숨김 */
            transform: translateX(0); /* 애니메이션용 */
        }
        
        .su212-feature-item:hover {
            transform: translateY(-5px) !important;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            border-color: #4169E1;
        }
        
        /* 좌측에서 슬라이드 인 (홀수 아이템) */
        .su212-feature-item:nth-child(odd) {
            transform: translateX(-100px);
        }
        
        /* 우측에서 슬라이드 인 (짝수 아이템) */
        .su212-feature-item:nth-child(even) {
            transform: translateX(100px);
        }
        
        /* 애니메이션 활성화 시 */
        .su212-feature-item.su212-visible {
            opacity: 1;
            transform: translateX(0) !important;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .su212-feature-icon {
            width: 50px;
            height: 50px;
            background: #4169E1; /* 파란색 단색 배경 */
            border-radius: 50%;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        /* 흰색 선 스타일 아이콘 */
        .su212-feature-icon::before {
            content: '';
            width: 24px;
            height: 24px;
            /* 아이콘 이미지로 변경하려면 아래 주석을 해제하고 URL을 수정하세요 */
            /* background-image: url('아이콘이미지경로.svg'); */
            /* background-size: contain; */
            /* background-repeat: no-repeat; */
            /* background-position: center; */
            
            /* 기본 선 스타일 아이콘 (이미지 사용시 아래 border 속성들을 주석 처리) */
        }
        
        /* 각 아이템별 다른 아이콘 스타일 */
        .su212-feature-item:nth-child(1) .su212-feature-icon::before {
            /* 첫 번째 아이템 아이콘 */
            background-image: url('https://sws21.mycafe24.com/theme/mon13/img/su001.png');
            transform: none;
        }
        
        .su212-feature-item:nth-child(2) .su212-feature-icon::before {
            /* 두 번째 아이템 아이콘 */
            background-image: url('https://sws21.mycafe24.com/theme/mon13/img/su002.png');
            transform: none;
        }
        
        .su212-feature-item:nth-child(3) .su212-feature-icon::before {
            /* 세 번째 아이템 아이콘 */
            background-image: url('https://sws21.mycafe24.com/theme/mon13/img/su003.png');
            transform: none;
        }
		 .su212-feature-item:nth-child(4) .su212-feature-icon::before {
            /* 세 번째 아이템 아이콘 */
            background-image: url('https://sws21.mycafe24.com/theme/mon13/img/su004.png');
            transform: none;
        }
		 .su212-feature-item:nth-child(5) .su212-feature-icon::before {
            /* 세 번째 아이템 아이콘 */
            background-image: url('https://sws21.mycafe24.com/theme/mon13/img/su005.png');
            transform: none;
        }
        
        /* 아이콘에 이미지 사용 시 스타일 */
        .su212-feature-icon img {
            width: 24px;
            height: 24px;
            filter: brightness(0) invert(1); /* 흰색으로 변경 */
            /* 컬러 아이콘을 사용하려면 위 filter 줄을 주석 처리하세요 */
        }
        
        .su212-feature-title {
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 22px;
        }
        
        .su212-feature-desc {
            color: #666;
            font-size: 18px;
            line-height: 1.6;
        }
        
        /* ===== 3. 성능 및 우수성 섹션 ===== */
        .su212-performance-wrapper {
            background: #fff;
            border-radius: 10px;
            margin-top: 20px;
        }
        
        .su212-performance-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
        }
        
        .su212-performance-table th {
            background: linear-gradient(135deg, #4169E1 0%, #5479F1 100%);
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 18px;
            border: 1px solid #3457D5;
        }
        
        .su212-performance-table td {
            padding: 20px 10px;
            border: 1px solid #ddd;
            text-align: center;
            font-size: 18px;
            background: #fff;
			line-height: 180%;
			vertical-align: top;
        }
        
        .su212-performance-table tr:nth-child(even) td {
            background: #f8f9fa;
        }
        
        .su212-image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
			margin: 30px auto 0px;
        }

		.su212-image-grid02 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
			width:80%;
			margin: 30px auto 0px;
        }
        
        /* 이미지 삽입 영역 스타일 */
        .su212-image-placeholder {
            /* 이미지 삽입 영역 - 실제 이미지로 교체하세요 */
            background: #f0f0f0;
            border: 2px dashed #ccc;
            border-radius: 10px;
            height: 430px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 18px;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .su212-image-placeholder:hover {
            background: #e8e8e8;
            border-color: #4169E1;
            color: #4169E1;
        }

		/* 실제 이미지 스타일 - img 태그 사용시 적용 */
        .su212-image-placeholder img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

	/* 이미지 삽입 영역 스타일 */
        .su212-image-placeholder02 {
            /* 이미지 삽입 영역 - 실제 이미지로 교체하세요 */
            background: #f0f0f0;
            border: 2px dashed #ccc;
            border-radius: 10px;
            height: 330px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 18px;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .su212-image-placeholder02:hover {
            background: #e8e8e8;
            border-color: #4169E1;
            color: #4169E1;
        }

		/* 실제 이미지 스타일 - img 태그 사용시 적용 */
        .su212-image-placeholder02 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }


		/* 이미지 삽입 영역 스타일 */
        .su212-image-placeholder_sa {
            /* 이미지 삽입 영역 - 실제 이미지로 교체하세요 */
            background: #f0f0f0;
            border: 2px dashed #ccc;
            border-radius: 10px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 18px;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .su212-image-placeholder_sa:hover {
            background: #e8e8e8;
            border-color: #4169E1;
            color: #4169E1;
        }

		/* 실제 이미지 스타일 - img 태그 사용시 적용 */
        .su212-image-placeholder_sa img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }


		/* 이미지 삽입 영역 스타일 */
        .su212-image-placeholder01 {
            /* 이미지 삽입 영역 - 실제 이미지로 교체하세요 */
            background: #f0f0f0;
            border: 2px dashed #ccc;
            border-radius: 10px;
            height: 590px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 18px;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .su212-image-placeholder01:hover {
            background: #e8e8e8;
            border-color: #4169E1;
            color: #4169E1;
        }
        
        /* 실제 이미지 스타일 - img 태그 사용시 적용 */
        .su212-image-placeholder01 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }
        
        /* ===== 4. 제품 구조 섹션 ===== */
        .su212-structure-content {
            background: #fff;
            padding: 0px;
            border-radius: 10px;
        }
        
        .su212-structure-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
        }
        
        .su212-structure-table th {
            background: #f8f9fa;
            padding: 15px;
            text-align: left;
            font-weight: bold;
            border: 1px solid #ddd;
            color: #2c3e50;
        }
        
        .su212-structure-table td {
            padding: 12px;
            border: 1px solid #ddd;
            font-size: 18px;
        }
        
        .su212-structure-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 30px;
        }
        
        /* ========================================== */
        /* ===== 화려한 애니메이션 효과 섹션 시작 ===== */
        /* 애니메이션을 삭제하려면 이 섹션 전체를 제거하거나 주석 처리하세요 */
        /* 시작: 이 줄부터 ↓↓↓ */
        /* ========================================== */
        
        /* 페이드 인 + 슬라이드 업 애니메이션 */
        .su212-animate-fadeInUp {
            animation: su212FadeInUp 0.8s ease forwards;
        }
        
        @keyframes su212FadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 좌측에서 슬라이드 인 애니메이션 */
        .su212-animate-slideInLeft {
            animation: su212SlideInLeft 1s ease forwards;
        }
        
        @keyframes su212SlideInLeft {
            from {
                opacity: 0;
                transform: translateX(-100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* 우측에서 슬라이드 인 애니메이션 */
        .su212-animate-slideInRight {
            animation: su212SlideInRight 1s ease forwards;
        }
        
        @keyframes su212SlideInRight {
            from {
                opacity: 0;
                transform: translateX(100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* 스케일 업 애니메이션 */
        .su212-animate-scaleIn {
            animation: su212ScaleIn 0.6s ease forwards;
        }
        
        @keyframes su212ScaleIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        /* 회전 페이드 인 애니메이션 */
        .su212-animate-rotateIn {
            animation: su212RotateIn 1s ease forwards;
        }
        
        @keyframes su212RotateIn {
            from {
                opacity: 0;
                transform: rotate(-10deg) scale(0.9);
            }
            to {
                opacity: 1;
                transform: rotate(0) scale(1);
            }
        }
        
        /* 바운스 인 애니메이션 */
        .su212-animate-bounceIn {
            animation: su212BounceIn 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }
        
        @keyframes su212BounceIn {
            0% {
                opacity: 0;
                transform: scale(0.3);
            }
            50% {
                opacity: 1;
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1);
            }
        }
        
        /* 순차적 애니메이션 지연 */
        .su212-delay-1 { animation-delay: 0.2s; }
        .su212-delay-2 { animation-delay: 0.4s; }
        .su212-delay-3 { animation-delay: 0.6s; }
        .su212-delay-4 { animation-delay: 0.8s; }
        
        /* ========================================== */
        /* ===== 화려한 애니메이션 효과 섹션 끝 ===== */
        /* 끝: 이 줄까지 ↑↑↑ */
        /* ========================================== */
        
        /* ===== 반응형 디자인 ===== */
        @media (max-width: 768px) {
            .su212-container {
                padding: 20px 15px;
            }
            
            .su212-features-grid {
                grid-template-columns: 1fr;
            }
            
            .su212-structure-images {
                grid-template-columns: 1fr;
            }
            
            .su212-performance-table {
                font-size: 12px;
            }
            
            .su212-performance-table th,
            .su212-performance-table td {
                padding: 8px;
            }
            
            .su212-image-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* ===== 부가 스타일 ===== */
        .su212-highlight {
            background-color: #fff3cd;
            padding: 2px 5px;
            border-radius: 3px;
            font-weight: bold;
        }
        
        .su212-badge {
            display: inline-block;
            padding: 5px 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            margin-left: 10px;
        }
/*와이어링 넷 끝*/

/*시공사진*/
/* 메인 컨테이너 */
        .su213-container {
            max-width: 1430px;
            width: 100%;
            margin: 0 auto;
            background-color: #ffffff;
        }
        
        /* 섹션 공통 스타일 */
        .su213-section {
            margin-bottom: 60px;
        }
        
        /* 섹션 타이틀 */
        .su213-section-title {
            display: flex;
            align-items: center;
            margin-bottom: 40px;
            gap: 15px;
        }
        
        .su213-title-number {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #4169E1 0%, #5479F1 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 20px;
        }
        
        .su213-title-text {
            font-size: 28px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        /* 이미지 그리드 레이아웃 */
        .su213-image-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
			margin: 0px auto 40px;
        }
        
        /* 이미지 아이템 컨테이너 */
        .su213-image-item {
            display: flex;
            flex-direction: column;
            gap: 15px;
            opacity: 0;
            transform: translateY(50px);
        }

		/* 이미지 그리드 레이아웃 */
        .su213-image-grid01 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            width: 80%;
			margin: 0px auto 40px;
        }
        
        /* 이미지 아이템 컨테이너 */
        .su213-image-item01 {
            display: flex;
            flex-direction: column;
            gap: 15px;
            opacity: 0;
            transform: translateY(50px);
        }
        
        /* ========================================== */
        /* ===== 애니메이션 효과 시작 ===== */
        /* 애니메이션을 삭제하려면 이 섹션 전체를 주석 처리하세요 */
        /* 또는 JavaScript의 SU213_ENABLE_ANIMATIONS를 false로 변경하세요 */
        /* 시작: 이 줄부터 ↓↓↓ */
        /* ========================================== */
        
        /* 애니메이션 활성화 시 */
        .su213-image-item.su213-visible {
            opacity: 1;
            transform: translateY(0);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* 좌측에서 슬라이드 (첫 번째 컬럼) */
        .su213-image-item:nth-child(odd) {
            transform: translateX(-80px) translateY(30px);
        }
        
        .su213-image-item:nth-child(odd).su213-visible {
            transform: translateX(0) translateY(0);
        }
        
        /* 우측에서 슬라이드 (두 번째 컬럼) */
        .su213-image-item:nth-child(even) {
            transform: translateX(80px) translateY(30px);
        }
        
        .su213-image-item:nth-child(even).su213-visible {
            transform: translateX(0) translateY(0);
        }
        
        /* 순차적 애니메이션 딜레이 (조절 가능) */
        .su213-image-item:nth-child(1) { transition-delay: 0s; }
        .su213-image-item:nth-child(2) { transition-delay: 0.15s; }
        .su213-image-item:nth-child(3) { transition-delay: 0.3s; }
        .su213-image-item:nth-child(4) { transition-delay: 0.45s; }
        .su213-image-item:nth-child(5) { transition-delay: 0.6s; }
        .su213-image-item:nth-child(6) { transition-delay: 0.75s; }
        .su213-image-item:nth-child(7) { transition-delay: 0.9s; }
        .su213-image-item:nth-child(8) { transition-delay: 1.05s; }
        
        /* ========================================== */
        /* ===== 애니메이션 효과 끝 ===== */
        /* 끝: 이 줄까지 ↑↑↑ */
        /* ========================================== */
        
        /* 이미지 래퍼 */
        .su213-image-wrapper {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 비율 유지 */
            background: #e8e8e8;
            border: 3px dashed #ccc;
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .su213-image-wrapper:hover {
            border-color: #4169E1;
            box-shadow: 0 5px 20px rgba(65, 105, 225, 0.2);
        }
        
        /* 실제 이미지 스타일 */
        .su213-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 이미지 플레이스홀더 텍스트 (이미지 없을 때) */
        .su213-image-placeholder-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #666;
            font-size: 18px;
            font-weight: 600;
            text-align: center;
            pointer-events: none;
        }
        
        /* 이미지 설명 텍스트 */
        .su213-image-caption {
            text-align: center;
            font-size: 18px;
            color: #333;
            font-weight: 600;
            padding: 12px 15px;
            background: #f8f9fa;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .su213-image-item:hover .su213-image-caption {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        /* 반응형 디자인 */
        @media (max-width: 768px) {
            .su213-image-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .su213-section-title {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .su213-title-text {
                font-size: 22px;
            }
            
            .su213-image-caption {
                font-size: 16px;
                padding: 10px 12px;
            }
            
            /* 모바일에서는 아래에서 위로 슬라이드 */
            .su213-image-item:nth-child(odd),
            .su213-image-item:nth-child(even) {
                transform: translateY(50px);
            }
            
            .su213-image-item:nth-child(odd).su213-visible,
            .su213-image-item:nth-child(even).su213-visible {
                transform: translateY(0);
            }
        }

		/*영상소개*/
		 /* 메인 컨테이너 */
        .su214-container {
            max-width: 1430px;
            width: 100%;
            margin: 0 auto;
            background-color: #ffffff;
        }
        
        /* 섹션 타이틀 */
        .su214-section-title {
            display: flex;
            align-items: center;
            margin-bottom: 40px;
            gap: 15px;
        }
        
        .su214-title-number {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #4169E1 0%, #5479F1 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 20px;
        }
        
        .su214-title-text {
            font-size: 28px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        /* 비디오 그리드 레이아웃 */
        .su214-video-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }
        
        /* 비디오 아이템이 1개일 때 full width */
        .su214-video-grid:has(.su214-video-item:only-child) {
            grid-template-columns: 1fr;
        }
        
        /* 비디오 아이템 컨테이너 */
        .su214-video-item {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        /* 비디오 썸네일 래퍼 */
        .su214-video-wrapper {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 비율 */
            background: #e8e8e8;
            border: 3px dashed #ccc;
            border-radius: 15px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .su214-video-wrapper:hover {
            border-color: #4169E1;
            box-shadow: 0 5px 20px rgba(65, 105, 225, 0.3);
            transform: translateY(-5px);
        }
        
        /* 비디오 썸네일 */
        .su214-video-thumbnail {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 재생 버튼 오버레이 */
        .su214-play-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }
        
        .su214-video-wrapper:hover .su214-play-overlay {
            background: rgba(0, 0, 0, 0.5);
        }
        
        /* 재생 버튼 */
        .su214-play-button {
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .su214-video-wrapper:hover .su214-play-button {
            background: #ffffff;
            transform: scale(1.1);
        }
        
        /* 재생 아이콘 */
        .su214-play-icon {
            width: 0;
            height: 0;
            border-left: 25px solid #4169E1;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            margin-left: 5px;
        }
        
        /* 비디오 제목 */
        .su214-video-title {
            text-align: center;
            font-size: 20px;
            color: #333;
            font-weight: 600;
            padding: 12px 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        /* 플레이스홀더 텍스트 (비디오 없을 때) */
        .su214-placeholder-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #666;
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            z-index: 1;
        }
        
        /* ===== 레이어 팝업 스타일 ===== */
        .su214-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            animation: su214FadeIn 0.3s ease;
        }
        
        .su214-modal.su214-active {
            display: flex;
        }
        
        @keyframes su214FadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* 모달 콘텐츠 */
        .su214-modal-content {
            position: relative;
            width: 90%;
            max-width: 1200px;
            background: #000;
            border-radius: 10px;
            overflow: hidden;
            animation: su214SlideUp 0.4s ease;
        }
        
        @keyframes su214SlideUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 비디오 프레임 래퍼 */
        .su214-video-frame-wrapper {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 비율 */
        }
        
        /* 유튜브 iframe */
        .su214-youtube-iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
        
        /* 닫기 버튼 */
        .su214-close-button {
            position: absolute;
            top: -45px;
            right: 0;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #333;
            transition: all 0.3s ease;
            z-index: 1;
        }
        
        .su214-close-button:hover {
            background: #ffffff;
            transform: rotate(90deg);
        }
        
        /* 반응형 디자인 */
        @media (max-width: 768px) {
            .su214-video-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .su214-section-title {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .su214-title-text {
                font-size: 22px;
            }
            
            .su214-video-title {
                font-size: 18px;
                padding: 10px 12px;
            }
            
            .su214-play-button {
                width: 60px;
                height: 60px;
            }
            
            .su214-play-icon {
                border-left: 20px solid #4169E1;
                border-top: 12px solid transparent;
                border-bottom: 12px solid transparent;
            }
            
            .su214-modal-content {
                width: 95%;
            }
            
            .su214-close-button {
                top: 10px;
                right: 10px;
            }
        }

		/*인증서*/
		/* 메인 컨테이너 */
        .su215-main-container {
            max-width: 1430px;
            width: 100%;
            margin: 0 auto;
            background-color: #ffffff;
        }
        
        /* 섹션 스타일 */
        .su215-section-wrap {
            margin-bottom: 60px;
        }
        
        /* 섹션 헤더 */
        .su215-header {
            display: flex;
            align-items: center;
            margin-bottom: 40px;
            gap: 15px;
        }
        
        .su215-number-badge {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #4169E1 0%, #5479F1 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 20px;
        }
        
        .su215-header-title {
            font-size: 28px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        /* 이미지 그리드 (5열) */
        .su215-grid-layout {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
        }
        
        /* 이미지 카드 */
        .su215-card {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        /* 이미지 박스 */
        .su215-image-box {
            position: relative;
            width: 100%;
            padding-top: 100%; /* 1:1 정사각형 비율 */
            background: #fff;
            border: 3px dashed #ccc;
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
			height: 390px;
        }
        
        .su215-image-box:hover {
            border-color: #4169E1;
            box-shadow: 0 4px 15px rgba(65, 105, 225, 0.2);
            transform: translateY(-3px);
        }
        
        /* 실제 이미지 */
        .su215-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 플레이스홀더 텍스트 */
        .su215-placeholder {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #666;
            font-size: 16px;
            font-weight: 600;
            text-align: center;
            white-space: nowrap;
        }
        
        /* 이미지 캡션 */
        .su215-caption {
            text-align: center;
            font-size: 20px;
            color: #333;
            font-weight: 600;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .su215-card:hover .su215-caption {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        /* ===== 반응형 디자인 ===== */
        
        /* 태블릿 (1024px 이하) - 4열 */
        @media (max-width: 1024px) {
            .su215-grid-layout {
                grid-template-columns: repeat(4, 1fr);
                gap: 18px;
            }
            
            .su215-placeholder {
                font-size: 14px;
            }
            
            .su215-caption {
                font-size: 15px;
                padding: 9px;
            }
        }
        
        /* 태블릿 소형 (768px 이하) - 3열 */
        @media (max-width: 768px) {
            .su215-grid-layout {
                grid-template-columns: repeat(3, 1fr);
                gap: 15px;
            }
            
            .su215-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .su215-header-title {
                font-size: 24px;
            }
            
            .su215-placeholder {
                font-size: 13px;
            }
            
            .su215-caption {
                font-size: 14px;
                padding: 8px;
            }
        }
        
        /* 모바일 (480px 이하) - 2열 */
        @media (max-width: 480px) {
            .su215-grid-layout {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
            
            .su215-main-container {
                padding: 30px 15px;
            }
            
            .su215-number-badge {
                width: 45px;
                height: 45px;
                font-size: 18px;
            }
            
            .su215-header-title {
                font-size: 20px;
            }
            
            .su215-placeholder {
                font-size: 12px;
            }
            
            .su215-caption {
                font-size: 13px;
                padding: 7px;
            }
        }
        
        /* 모바일 초소형 (360px 이하) - 1열 */
        @media (max-width: 360px) {
            .su215-grid-layout {
                grid-template-columns: 1fr;
                gap: 15px;
            }
        }


		/*연혁*/
		 /* 메인 컨테이너 */
        .su216-timeline-container {
            max-width: 1430px;
            width: 100%;
            margin: 0 auto;
            padding: 60px 20px;
            background-color: #ffffff;
        }
        
        /* 타임라인 섹션 */
        .su216-timeline-section {
            margin-bottom: 100px;
        }
        
        /* 섹션 타이틀 */
        .su216-period-title {
            text-align: center;
            font-size: 48px;
            font-weight: 300;
            color: #d0d0d0;
            margin-bottom: 60px;
            letter-spacing: 2px;
        }
        
        /* 타임라인 아이템 래퍼 */
        .su216-timeline-row {
            display: flex;
            align-items: center;
            gap: 60px;
            margin-bottom: 80px;
            opacity: 0;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* 애니메이션 활성화 */
        .su216-timeline-row.su216-animate {
            opacity: 1;
        }
        
        /* 좌측 이미지 영역 */
        .su216-image-area {
            flex: 0 0 600px;
            transform: translateX(-100px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .su216-timeline-row.su216-animate .su216-image-area {
            transform: translateX(0);
        }
        
        /* 이미지 박스 */
        .su216-image-wrapper {
            position: relative;
            width: 100%;
            padding-top: 75%; /* 4:3 비율 */
            background: #f5f5f5;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .su216-image-wrapper:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }
        
        /* 실제 이미지 */
        .su216-timeline-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 우측 연혁 콘텐츠 영역 */
        .su216-content-area {
            flex: 1;
            transform: translateX(100px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .su216-timeline-row.su216-animate .su216-content-area {
            transform: translateX(0);
        }
        
        /* 연혁 아이템 */
        .su216-history-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 30px;
            padding-left: 130px;
            border-left: 0px solid #e0e0e0;
            transition: all 0.3s ease;
        }
        
        .su216-history-item:hover {
            border-left-color: #4169E1;
            padding-left: 30px;
        }
        
        .su216-history-item:last-child {
            margin-bottom: 0;
        }
        
        /* 연도 뱃지 */
        .su216-year-badge {
            flex: 0 0 auto;
            min-width: 100px;
            padding: 8px 20px;
            background: #f8f9fa;
            border: 2px solid #e0e0e0;
            border-radius: 25px;
            font-size: 18px;
            font-weight: 600;
            color: #333;
            text-align: center;
            margin-right: 25px;
            transition: all 0.3s ease;
        }
        
        .su216-history-item:hover .su216-year-badge {
            background: #4169E1;
            border-color: #4169E1;
            color: #ffffff;
            transform: scale(1.05);
        }
        
        /* 연혁 내용 */
        .su216-history-content {
            flex: 1;
            /* 🔧 상단 공간 조절: padding-top 값을 줄이면 간격이 좁아집니다 */
            /* 예: 0px, 2px, 3px 등으로 변경 가능 */
            padding-top: 0px;
        }
        
        .su216-history-text {
            font-size: 18px;
            /* 🔧 텍스트 간격 조절: line-height 값을 줄이면 행간이 좁아집니다 */
            /* 예: 1.4, 1.5, 1.6 등으로 변경 가능 */
            line-height: 1.6;
            color: #555;
            /* 🔧 텍스트 아래 간격 조절: margin-bottom 값을 줄이면 간격이 좁아집니다 */
            /* 예: 0px, 3px, 8px 등으로 변경 가능 */
            margin-bottom: 3px;
			margin-top: 6px;
        }
        
        .su216-history-text:last-child {
            margin-bottom: 0;
        }
        
        /* 순차적 애니메이션 딜레이 */
        .su216-timeline-row:nth-child(1) { transition-delay: 0s; }
        .su216-timeline-row:nth-child(2) { transition-delay: 0.1s; }
        .su216-timeline-row:nth-child(3) { transition-delay: 0.2s; }
        .su216-timeline-row:nth-child(4) { transition-delay: 0.3s; }
        .su216-timeline-row:nth-child(5) { transition-delay: 0.4s; }
        .su216-timeline-row:nth-child(6) { transition-delay: 0.5s; }
        .su216-timeline-row:nth-child(7) { transition-delay: 0.6s; }
        .su216-timeline-row:nth-child(8) { transition-delay: 0.7s; }
        
        /* 반응형 디자인 */
        @media (max-width: 1024px) {
            .su216-image-area {
                flex: 0 0 350px;
            }
            
            .su216-period-title {
                font-size: 40px;
            }
            
            .su216-year-badge {
                min-width: 90px;
                font-size: 16px;
                padding: 7px 18px;
            }
            
            .su216-history-text {
                font-size: 17px;
            }
        }
        
        @media (max-width: 768px) {
            .su216-timeline-row {
                flex-direction: column;
                gap: 30px;
                margin-bottom: 60px;
            }
            
            .su216-image-area {
                flex: 0 0 auto;
                width: 100%;
                transform: translateY(-50px);
            }
            
            .su216-timeline-row.su216-animate .su216-image-area {
                transform: translateY(0);
            }
            
            .su216-content-area {
                width: 100%;
                transform: translateY(50px);
            }
            
            .su216-timeline-row.su216-animate .su216-content-area {
                transform: translateY(0);
            }
            
            .su216-period-title {
                font-size: 36px;
            }
            
            .su216-history-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .su216-year-badge {
                margin-right: 0;
            }
        }
        
        @media (max-width: 480px) {
            .su216-timeline-container {
                padding: 40px 15px;
            }
            
            .su216-period-title {
                font-size: 28px;
                margin-bottom: 40px;
            }
            
            .su216-timeline-row {
                margin-bottom: 50px;
            }
            
            .su216-year-badge {
                font-size: 15px;
                padding: 6px 15px;
            }
            
            .su216-history-text {
                font-size: 15px;
            }
        }

		/*와이어링넷*/
		/* 갤러리 컨테이너 */
.ssu201_gallery_container {
    width: 100%;
    max-width: 1430px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* 갤러리 래퍼 */
.ssu201_gallery_wrap {
    display: flex;
    gap: 15px; /* 이미지 간격 조절 */
    flex-wrap: wrap;
}

/* 개별 이미지 아이템 */
.ssu201_gallery_item {
    flex: 1 1 calc(25% - 11.25px);
    /* 이미지 영역 높이 조절 - 원하는 높이로 변경 가능 */
    height: 300px; 
    overflow: hidden;
    border-radius: 8px; /* 모서리 둥글기 조절 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 이미지 스타일 */
.ssu201_img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지 채우기 방식: cover, contain, fill 등으로 변경 가능 */
    transition: transform 0.3s ease;
}

/* 이미지 호버 효과 */
.ssu201_img:hover {
    transform: scale(1.05);
}

/* 태블릿 반응형 (768px ~ 1024px) */
@media screen and (max-width: 1024px) {
    .ssu201_gallery_item {
        flex: 1 1 calc(50% - 7.5px);
        /* 태블릿에서 이미지 영역 높이 */
        height: 250px;
    }
}

/* 모바일 반응형 (768px 이하) */
@media screen and (max-width: 768px) {
    .ssu201_gallery_container {
        padding: 10px;
    }
    
    .ssu201_gallery_wrap {
        gap: 10px;
    }
    
    .ssu201_gallery_item {
        flex: 1 1 calc(50% - 5px);
        /* 모바일에서 이미지 영역 높이 */
        height: 200px;
    }
}

/* 소형 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .ssu201_gallery_item {
        flex: 1 1 100%;
        /* 소형 모바일에서 이미지 영역 높이 */
        height: 250px;
    }
}


/* 제품 컨테이너 */
.ssu202_product_container {
    width: 100%;
    max-width: 1430px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* 제품 래퍼 */
.ssu202_product_wrap {
    display: flex;
    gap: 20px; /* 이미지 간격 조절 */
    justify-content: space-between;
}

/* 개별 제품 아이템 */
.ssu202_product_item {
    flex: 1;
    position: relative;
    /* 이미지 영역 높이 조절 - 원하는 높이로 변경 가능 */
    height: 350px;
    overflow: hidden;
    border-radius: 8px; /* 모서리 둥글기 조절 */
    background: #f5f5f5;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* 제품 이미지 스타일 */
.ssu202_product_img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지 채우기 방식: cover, contain, fill 등으로 변경 가능 */
    transition: transform 0.3s ease;
}

/* 제품 라벨 */
.ssu202_product_label {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #2c5aa0; /* 라벨 배경색 변경 가능 */
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px; /* 라벨 글자 크기 조절 */
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 이미지 호버 효과 */
.ssu202_product_item:hover .ssu202_product_img {
    transform: scale(1.05);
}

/* 태블릿 반응형 (768px ~ 1024px) */
@media screen and (max-width: 1024px) {
    .ssu202_product_wrap {
        gap: 15px;
    }
    
    .ssu202_product_item {
        /* 태블릿에서 이미지 영역 높이 */
        height: 300px;
    }
    
    .ssu202_product_label {
        font-size: 13px;
        padding: 6px 12px;
    }
}


/* SSU311 컨테이너 */
        .ssu311-container {
            max-width: 1430px;
            margin: 0 auto;
        }

        /* SSU311 그리드 */
        .ssu311-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        /* SSU311 카드 */
        .ssu311-card {
            background: #fff;
            border-radius: 16px;
            padding: 40px 30px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            opacity: 0;
        }

        .ssu311-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }

        /* SSU311 아이콘 */
        .ssu311-icon {
            width: 60px;
            height: 60px;
            background: #4169E1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
        }

        .ssu311-icon svg {
            width: 30px;
            height: 30px;
            fill: #fff;
        }

        /* SSU311 제목 */
        .ssu311-title {
            font-size: 22px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 16px;
            line-height: 1.4;
        }

        /* SSU311 설명 */
        .ssu311-description {
            font-size: 15px;
            color: #666;
            line-height: 1.7;
        }

        /* SSU311 애니메이션 - 왼쪽에서 */
        .ssu311-fade-left {
            transform: translateX(-100px) translateY(60px);
            transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .ssu311-fade-left.ssu311-active {
            opacity: 1;
            transform: translateX(0) translateY(0);
        }

        /* SSU311 애니메이션 - 오른쪽에서 */
        .ssu311-fade-right {
            transform: translateX(100px) translateY(60px);
            transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .ssu311-fade-right.ssu311-active {
            opacity: 1;
            transform: translateX(0) translateY(0);
        }

        /* SSU311 딜레이 */
        .ssu311-delay-1 {
            transition-delay: 0.1s;
        }

        .ssu311-delay-2 {
            transition-delay: 0.2s;
        }

        .ssu311-delay-3 {
            transition-delay: 0.3s;
        }

        .ssu311-delay-4 {
            transition-delay: 0.4s;
        }

        /* 반응형 - 태블릿 */
        @media (max-width: 768px) {
            .ssu311-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .ssu311-card {
                padding: 30px 24px;
            }

            .ssu311-title {
                font-size: 20px;
            }

            .ssu311-description {
                font-size: 14px;
            }

            .ssu311-icon {
                width: 50px;
                height: 50px;
            }

            .ssu311-icon svg {
                width: 25px;
                height: 25px;
            }

            /* 모바일에서는 모두 아래에서 위로 */
            .ssu311-fade-left,
            .ssu311-fade-right {
                transform: translateX(0) translateY(60px);
            }
        }

        /* 반응형 - 모바일 */
        @media (max-width: 480px) {
            body {
                
            }

            .ssu311-card {
                padding: 24px 20px;
            }

            .ssu311-title {
                font-size: 18px;
            }
        }