/* ================= 기본 ================= */

body {
    margin:0;
    font-family:'Noto Sans KR', sans-serif;
    background:#f2f2f2;
}

.inner {
    width:1200px;
    margin:0 auto;
}

/* ================= HEADER ================= */

#header {
    background:#fff;
    border-bottom:none;   /* 제거해서 GNB와 자연스럽게 연결 */
}

#header .inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0px 0;     /* 세로 간격 축소 */
}

.logo img {
    height:40px;       /* 로고 약간 축소 */
    display:block;   
}

.top_util {
    display:flex;
    align-items:center;
    gap:20px;
}

.top_util a {
    text-decoration:none;
    color:#333;
    font-size:13px;
}

/* ================= GNB ================= */

#gnb {
    background:#8c6d4c;
    position:relative;
    z-index:999;
}

#gnb .inner {
    display:flex;
    justify-content:center;
}

.depth1 {
    display:flex;
    justify-content:center;
    gap:60px;
    list-style:none;
    margin:0;
    padding:0;
}

.depth1 > li {
    position:relative;
}

.depth1 > li > a {
    display:block;
    padding:14px 10px;   /* 18 → 14 (세로 간격 축소) */
    color:#fff;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
}

.depth1 > li:hover {
    background:#755738;
}

/* ================= 2DEPTH ================= */

.depth2 {
    position:absolute;
    top:100%;
    left:0;
    background:#8c6d4c;   /* 흰색 → 브라운 톤 통일 */
    list-style:none;
    padding:5px 0;
    margin:0;
    width:180px;
    display:none;
    box-shadow:0 4px 10px rgba(0,0,0,0.25);
}

.depth2 li a {
    display:block;
    padding:10px 15px;
    color:#fff;
    text-decoration:none;
    font-size:14px;
}

.depth2 li a:hover {
    background:#755738;
}

.depth1 > li:hover .depth2 {
    display:block;
}

/* ================= 메인 비주얼 ================= */

/* ================= 슬라이드 ================= */

#main_visual {
    position:relative;
    height:520px;
    overflow:hidden;
}

.slide_wrap {
    position:relative;
    width:100%;
    height:100%;
}

.slide {
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 1s ease-in-out;
}

.slide img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.slide.active {
    opacity:1;
}
.visual_bg {
    position:absolute;
    width:100%;
    height:100%;
    background:url("assets/img/main_photo01.jpg") center center no-repeat;
    background-size:cover;
}

.main_text {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:100%;
    color:#fff;
}

.main_text .t1 {
    font-size:30px;
    line-height:1.6;
    text-shadow:0 2px 6px rgba(0,0,0,0.5);
}

.main_text span {
    color:#ffcc66;
}

/* ================= 메인 하단 영역 ================= */

#main_banner {
    background:#fff;
    padding:40px 0px;
    background:linear-gradient(to bottom, #ffffff, #ffffff);    
}


#main_banner .inner {
    display:flex;
    justify-content:space-between;
    align-items:stretch;
}

/* 좌측 소개 */
.about_box {
    width:33%;
    background:#fff;
    padding:25px;
    box-sizing:border-box;
}

/* 가운데 아이콘 */
.quick_box {
    width:33%;
    display:flex;
    justify-content:space-between;
}

.quick_item {
    width:33%;
    background:#fff;
    padding:20px 0;
    text-align:center;
    box-sizing:border-box;
}

.quick_item img {
    width:20px;
    margin-bottom:0px;
}

/* 우측 고객센터 */
.cs_center {
    width:33%;
    background:#9b7a55;
    color:#fff;
    padding:0px;
    box-sizing:border-box;
}

.cs_center .tel {
    font-size:10px;
    font-weight:bold;
    margin:10px 0;
}

/* ================= 푸터 ================= */

#footer_banner {
    background:#fff;
    padding:20px 0;
    text-align:center;
}

#footer_banner img {
    margin:0 10px;
}

#footer {
    background:#4a4a4a;
    color:#ddd;
    padding:30px 0;
    text-align:center;
    font-size:14px;
}

/* ================= 공통 ================= */

.banner_wrap {
    display:flex;
    gap:10px;
}

.banner {
    flex:1;
    height:200px;
    position:relative;
    color:#030303;
    padding:25px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
}

/* ================= 배너 1 ================= */

.banner01 {
    background:url("assets/img/m_banner_01.jpg") no-repeat center/cover;
}

.banner01 h3 {
    font-size:20px;
    margin-bottom:5px;
}

.banner01 p {
    font-size:13px;
    line-height:1.5;
    margin-bottom:12px;
}

.btn_more {
    display:inline-block;
    background:#ff8c00;
    color:#ffffff;
    padding:6px 14px;
    font-size:13px;
    text-decoration:none;
}

.banner02 {
    flex:1.5;
    min-height:200px;
    background:url("assets/img/m_banner_02.jpg") no-repeat center/cover;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.banner02::before {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(15,25,40,0.65);   /* 더 고급스러운 어둠 */
}
/* 카드 감싸는 영역 */
.quick_wrap {
    position:relative;
    z-index:2;
    display:flex;
    gap:40px;              /* 카드 간격 넓힘 */
}
.quick_item {
    width:120px;
    height:130px;
    background:#182942;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.quick_btn {
    margin-top:15px;
    padding:4px 10px;
    font-size:13px;
    background:#ff8c00;
    color:#ffffff;
    text-decoration:none;
}
.quick_item img {
    width:40px;
    margin:0 auto 6px;
}

.quick_item p {
    font-size:17px;
    font-weight:600;
    color:#fff;
    margin-bottom:20px;
}
.quick_btn {
    padding:8px 22px;
    font-size:13px;
    background:#ff8c00;
    color:#fff;
    border-radius:30px;
    text-decoration:none;
    transition:all 0.3s ease;
}

/* ================= 배너 3 ================= */

.banner03 {
    background:url("assets/img/m_banner_03.jpg") no-repeat center/cover;
    height:200px;
    padding:0px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#fff;
    line-height:0.8;
}

.banner03::before {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.35);
}

.banner03 .cs_txt {
    position:relative;
    z-index:0;
}

.banner03 h3 {
    font-size:15px;
    margin-bottom:0px;
}

.banner03 .tel {
    font-size:15px;
    font-weight:bold;
    margin:0px 0;
}

.cs_btn_wrap {
    margin-top:15px;
    display:flex;
    gap:10px;
}

.cs_btn {
    flex:1;
    text-align:center;
    padding:10px 0;
    font-size:12px;
    text-decoration:none;
}

.cs_btn.left {
    background:#ff8c00;
    color:#fff;
}

.cs_btn.right {
    background:#ffffff;
    color:#333;
}

#main_board {
    padding:0px 100px;
    background:#ffffff;
}

.board_wrap {
    display:flex;
    justify-content:space-between;
    gap:40px;
}

.board_box {
    width:32%;
}

.board_title {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:2px solid #8a7a1e;
    padding-bottom:10px;
    margin-bottom:20px;
}

.board_title h3 {
    font-size:20px;
    font-weight:700;
}

.board_title a {
    font-size:13px;
    color:#666;
    text-decoration:none;
}

.board_list li {
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid #eee;
    font-size:14px;
}

.board_list li a {
    color:#333;
    text-decoration:none;
}

.board_list li span {
    color:#888;
    font-size:13px;
}

/* 갤러리 영역 */
.gallery_wrap {
    display:flex;
    gap:12px;
}

.gallery_item {
    width:180px;
    height:100px;
}
.gallery_item img {
    width:100%;
    height:100%;
    object-fit:cover;   /* ← 비율 유지하면서 꽉 채움 */
    display:block;
}

/* ================= 협력기관 ================= */

#partner {
    background:#f7f7f7;
    padding:100px 200px;
    text-align:center;
}

#partner h2 {
    font-size:15px;
    margin-bottom:60px;
    font-weight:600;
}

.partner_wrap {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:80px;
}

.partner_item {
    flex:0 0 auto;   /* 크기 고정 */
    padding:15px 25px;
    background:#fff;
    border:1px solid #eee;
    transition:0.3s;
}

.partner_item img {
    max-height:50px;
    width:auto;
    max-width:100%;
    object-fit:contain;
    filter:grayscale(100%);
    opacity:0.7;
}

.partner_item:hover img {
    filter:none;
    opacity:1;
}


/* ================= FOOTER ================= */
#footer {
    background:#3a3a3a;
    color:#ccc;
    padding:30px 0;
    font-size:13px;
}

.footer_wrap {
    position:relative;
    display:flex;
    align-items:center;
}

.footer_left {
    text-align:left;
}

.footer_right {
    position:absolute;
    left:100%;
    transform:translateX(-50%);
}

.footer_mark {
    height:60px;
}




/* ================= 서브 비주얼 ================= */

.sub_visual {
    position:relative;
    height:220px;
    overflow:hidden;
}

.sub_visual_bg {
    position:absolute;
    inset:0;
    background:url("../assets/img/about/sub_bg_top1.jpg") center/cover no-repeat;
}

.sub_visual::after {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0);
    z-index:1;   /* 이거 추가 */
}

.sub_visual_text {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color:#ffffff;
    font-size:30px;
    font-weight:500;
    z-index:2;   /* 이거 추가 */
}

/* ================= 서브 콘텐츠 ================= */

.sub_container {
    padding:50px 0;
}

.sub_inner {
    display:flex;
    gap:50px;
    max-width:1400px;
}

.sub_left {
    width:220px;
}

.sub_left h2 {
    font-size:18px;
    margin-bottom:20px;
}

.lnb {
    list-style:none;
    padding:0;
}

.lnb li {
    border-bottom:1px solid #eee;
}

.lnb li a {
    display:block;
    padding:12px;
    text-decoration:none;
    color:#333;
}

.lnb li.active {
    background:#8c6d4c;
}

.lnb li.active a {
    color:#fff;
}

/* ================= 인사말 ================= */

.sub_content {
    flex:1;
    width:100%;
}

.sub_content h3 {
    background:none;
    border:none;
    padding-left:15px;
    margin-bottom:30px;
    font-size:20px;
    font-weight:600;
    position:relative;
}

.sub_content h3::before {
    content:"";
    position:absolute;
    left:0;
    top:5px;
    width:4px;
    height:18px;
    background:#c79c60;
}
.greeting_wrap {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:60px;
}

.greeting_text {
    flex:1;
}

.greeting_img {
    width:320px;
}
.greeting_text h4 {
    font-size:25px;
    color:#1e4fb3;
    margin-bottom:10px;
}

.greeting_img img {
    width:100%;
    display:block;
}
.greeting_wrap::after {
    content:"";
    display:block;
    clear:both;
}
.sub_container {
    padding:30px 0 120px;
}

#partner {
      padding:30px 0;
}

html, body { height:100%; }

#wrap {
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.sub_container { flex:1; }


/* ================= 조직도 ================= */

.organization_wrap {
    text-align:center;
    margin-bottom:60px;
    background:none;
    padding:0;
    border:none;
}

.organization_wrap img {
    max-width:100%;
    height:auto;
}

.certificate_wrap {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
}

.certificate_wrap img {
    width:100%;
    border:1px solid #eee;
    transition:0.3s;
}

.certificate_wrap img:hover {
    transform:scale(1.05);
}

.sub_content h4 {
    font-size:20px;
    font-weight:600;
    margin-bottom:25px;
    padding-bottom:8px;
    border-bottom:1px solid #ddd;
    color:#222;
}

.map_wrap {
    margin-bottom:40px;
}

.location_info table {
    width:100%;
    border-collapse:collapse;
}

.location_info th,
.location_info td {
    padding:15px;
    border-bottom:1px solid #ddd;
    text-align:left;
    font-size:15px;
}

.location_info th {
    width:120px;
    background:#f8f8f8;
    font-weight:600;
}

.location_title_box {
    display:flex;
    align-items:center;
    gap:30px;
    margin-bottom:40px;
    padding:25px 0;
    border-bottom:1px solid #e5e5e5;
}

.location_logo {
    width:140px;
}

.location_text strong {
    display:block;
    font-size:20px;
    margin-bottom:8px;
}

.location_text p {
    font-size:15px;
    color:#555555;
    line-height:1.7;
}
.location_text strong::after {
    content:"";
    display:block;
    width:1000px;
    height:2px;
    background:#2a5caa;
    margin:15px auto 0;
}

.performance_wrap {
    display:flex;
    gap:40px;
    margin-top:30px;
}

.performance_img img {
    width:260px;
}

.performance_text {
    flex:1;
}

.performance_text h4 {
    font-size:18px;
    margin-bottom:10px;
    color:#2a5caa;
}

.performance_text p {
    font-size:15px;
    line-height:1.7;
    color:#555;
    margin-bottom:20px;
}

.performance_list {
    padding-left:18px;
}

.performance_list li {
    margin-bottom:8px;
    font-size:15px;
    color:#444;
}

.mt40 {
    margin-top:40px;
}

/* 네모 박스 버튼 */
.btn_box {
    display: inline-block;
    background: #f07d00;   /* 오렌지 */
    color: #fff;
    padding: 14px 100px;
    font-size: 15px;
    font-weight:2000;
    text-decoration: none;
    border-radius: 4px;     /* 완전 네모면 0으로 */
    transition: 0.3s;
}

.btn_box:hover {
    background: #d96f00;
}

/* ================= 법령 영역 스타일 강제 적용 ================= */

.sub_content .law_title {
    color: #1e4fa1 !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    margin-top: 20px !important;
}

.sub_content h6 {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 10px 0 10px 0 !important;
}

.sub_content .law_list {
    padding-left: 50px !important;
    line-height: 1.8 !important;
    margin-bottom: 15px !important;
}

.sub_content .law_list ul {
    padding-left: 30px !important;
    margin-top: 5px !important;
}
.law_list {
    padding-left: 30em !important;   /* 탭 1칸 느낌 */
    line-height: 1.8;
}

.law_list li {
    margin-bottom: 8px;
}

/* 성능점검 기준 표 */
.inspection_table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
}

.inspection_table th {
    background: #f3f3f3;
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
    font-weight: 600;
}

.inspection_table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

.inspection_table tbody tr:hover {
    background: #fafafa;
}

.inspection_photo {
    text-align: center;
    margin-top: 30px;
}

.inspection_photo img {
    width: 100%;
    max-width: 700px;
    border: 1px solid #ddd;
    padding: 5px;
}
.apply_building {
    margin-top: 15px;
    padding-left: 20px;
    line-height: 1.8;
}

.inspection_wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #ddd;
    border-bottom: none;
    margin-top: 30px;
}

.inspection_card {
    text-align: center;
    padding: 25px 10px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.inspection_card:nth-child(4n) {
    border-right: none;
}

.inspection_card img {
    width: 55px;
    margin-bottom: 10px;
}

.inspection_card p {
    font-size: 14px;
    margin: 0;
}

.red {
    color: red;
    font-weight: bold;
}

.blue {
    color: #2563eb !important;
}

.sub_content .blue {
    color: #2563eb !important;
}

.fine-image-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 150px;
}

.fine-image-wrap img {
    width: 400px;
    max-width: 100%;
    opacity: 1 !important;
    filter: none !important;
    display: block;
}

.fine-image-wrap img {
    opacity: 1 !important;
    filter: none !important;
}

.procedure_list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}

.procedure_item {
    background: #f3f3f3;
    border: 1px solid #ddd;
    padding: 15px 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.proc_icon {
    width: 40px;
    height: auto;
}

.procedure_text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.arrow {
    color: #f07d00;
    font-size: 20px;
    font-weight: 1000;
    align-items: center;

}

.equipment_wrap{
    display:grid;
    grid-template-columns: repeat(5,1fr);
    gap:20px;
    margin-top:30px;
}

.equipment_item{
    border:1px solid #ddd;
    background:#ffffff;   /* ← 이걸로 변경 */
    text-align:center;
    padding:15px;
}

.equipment_item img{
    width:100%;
    max-height:140px;
    object-fit:contain;
    margin-bottom:10px;
}

.equipment_item p{
    font-size:14px;
}

.equipment_wrap{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:20px;
    margin-top:30px;
}

.equipment_item{
    border:1px solid #ddd;
    background:#f7f5ec;
    display:flex;
    flex-direction:column;
    height:230px;     /* 🔥 카드 전체 높이 고정 */
}

.equipment_img{
    height:150px;     /* 🔥 이미지 영역 고정 */
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
}

.equipment_img img{
    max-height:130px;
    max-width:90%;
    object-fit:contain;
}

.equipment_text{
    height:80px;      /* 🔥 글씨 영역 고정 */
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    border-top:1px solid #ddd;
    text-align:center;
    padding:10px;
}

.major_table{
    width:130%;
    border-collapse:collapse;
    margin-top:20px;
    font-size:14px;
}

.major_table th{
    background:#f7f5ec;
    border-top:2px solid #c8a36a;
    padding:18px 15px;
    font-weight:1000;
}

.major_table td{
    border-bottom:1px solid #ddd;
    padding:15px 15px;
    vertical-align:top;
    line-height:1.6;
}

.major_table tr:hover{
    background:#fafafa;
}

.gallery_wrap{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
    margin-top:20px;
}

.gallery_item{
    overflow:hidden;
    border:1px solid #e5e5e5;
    background:#fff;
    transition:all 0.3s ease;
}

.gallery_item img{
    width:100%;
    height:100px;
    object-fit:contain;
    display:block;
    background:#f5f5f5;  /* 여백 자연스럽게 */
    transition:transform 0.4s ease;
}

/* hover 효과 */
.gallery_item:hover{
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.gallery_item:hover img{
    transform:scale(1.05);
}

.contact_form{
    margin-top:40px;
}

.form_row{
    display:flex;
    margin-bottom:20px;
    align-items:center;
}

.form_row label{
    width:150px;
    font-weight:600;
}

.form_row input,
.form_row textarea{
    flex:1;
    padding:10px;
    border:1px solid #ddd;
    font-size:14px;
}

.flex_input{
    display:flex;
    gap:10px;
    flex:1;
}

.flex_input input{
    flex:1;
}

.checkbox_row{
    align-items:center;
}

.form_btn{
    margin-top:30px;
}

.form_btn button{
    padding:10px 30px;
    border:none;
    background:#8b6f47;
    color:#fff;
    cursor:pointer;
    margin-right:10px;
}

.form_btn .gray{
    background:#777;
}

.policy_box{
    margin-top:40px;
}

.policy_box h4{
    margin-bottom:10px;
    font-weight:600;
}

.policy_text{
    height:250px;
    overflow-y:auto;
    border:1px solid #ddd;
    padding:15px;
    font-size:13px;
    line-height:1.6;
    background:#f9f9f9;
}

.agree_row{
    margin-top:10px;
}

.contact_form{
    margin-top:40px;
}

.form_row{
    display:flex;
    margin-bottom:20px;
    align-items:center;
}

.form_row label{
    width:150px;
    font-weight:600;
}

.form_row input,
.form_row textarea{
    flex:1;
    padding:10px;
    border:1px solid #ddd;
}

.flex_input{
    display:flex;
    gap:10px;
    flex:1;
}

.form_btn{
    margin-top:30px;
}

.form_btn button{
    padding:10px 30px;
    border:none;
    background:#8b6f47;
    color:#fff;
    cursor:pointer;
    margin-right:10px;
}

.form_btn .gray{
    background:#777;
}

.board_wrap{
    margin-top:40px;
}

.board_table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.board_table thead{
    background:#f3f3f3;
}

.board_table th,
.board_table td{
    border-bottom:1px solid #ddd;
    padding:12px 10px;
    text-align:center;
}

.board_table td.title{
    text-align:left;
}

.board_table td.title a{
    color:#333;
    text-decoration:none;
}

.board_table td.title a:hover{
    text-decoration:underline;
}

.paging{
    margin-top:30px;
    text-align:center;
}

.paging a{
    display:inline-block;
    width:35px;
    height:35px;
    line-height:35px;
    border:1px solid #ddd;
    margin:0 3px;
    text-decoration:none;
    color:#333;
}

.paging a.active{
    background:#8b6f47;
    color:#fff;
    border-color:#8b6f47;
}