@charset "utf-8";

/* 내용관리 */
#ctt {
    margin: 40px 0;
    padding: 0;
    background: transparent;
}

.ctt_admin {
    text-align: right;
}

#ctt header h1 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#ctt_con {
    padding: 0;
    line-height: 1.7;
    color: #333;
    max-width: 1400px;
    margin: 0 auto;
}

/* 기본 타이포그래피 */
#ctt_con h2, #ctt_con h3, #ctt_con h4 {
    font-weight: 600;
    color: #1a1a1a;
    margin: 30px 0 20px;
}

#ctt_con h2 {
    font-size: 28px;
    border-bottom: 2px solid #d4a259;
    padding-bottom: 0px;
}

#ctt_con h3 {
    font-size: 22px;
}

#ctt_con h4 {
    font-size: 18px;
}

#ctt_con p {
    margin: 15px 0;
    line-height: 1.8;
}

#ctt_con img {
    max-width: 100% !important;
    height: auto;
    border-radius: 0em;
    max-width: 1000px;
}

#ctt_con table {
    max-width: 1200px !important;
    margin: 0 auto !important;
    border-collapse: collapse;
    /* margin: 20px 0; */
}

#ctt_con table th,
#ctt_con table td {
    padding: 12px;
    border: 1px solid #e0e0e0;
    text-align: left;
    max-width: 568px;
}
 
.page-area2  table td {
 
    border: 0px solid #e0e0e0 !important;
 
}

#ctt_con table td img {
 
    text-align: center;
}

#ctt_con table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #1a1a1a;
    text-align: center;
}

.ctt_img {
    text-align: center;
    margin: 20px 0;
}

/* 이미지 클릭 커서 */
.ctt_con a[data-fancybox],
.ctt_con [onclick*="view_img"] {
    cursor: pointer;
}

.ctt_con a[data-fancybox] img,
.ctt_con [onclick*="view_img"] img {
    cursor: pointer;
    transition: all 0.3s ease;
}

.ctt_con a[data-fancybox] img:hover,
.ctt_con [onclick*="view_img"] img:hover {
    opacity: 0.8;
    transform: scale(1.02);
}

/* contBox 스타일 */
.contBox {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
}


/* contBox h2 아이콘 스타일 */
.contBox .cont h2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contBox .cont h2::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 1. 공법개요 - 문서 아이콘 (심플 라인) */
.contBox .cont h2:nth-of-type(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 2. 공법특징 - 스타/특징 아이콘 */
.contBox .cont h2:nth-of-type(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 3. 산업재산권 - 인증/뱃지 아이콘 */
.contBox .cont h2:nth-of-type(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15a6 6 0 1 0 0-12 6 6 0 0 0 0 12z' stroke='%23F97316' stroke-width='1.5'/%3E%3Cpath d='M8.21 13.89L7 23l5-3 5 3-1.21-9.12' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 4. 모식도 - 레이어/다이어그램 아이콘 */
.contBox .cont h2:nth-of-type(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 17l10 5 10-5' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 12l10 5 10-5' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 5. 적용처 - 위치 마커 아이콘 */
.contBox .cont h2:nth-of-type(5)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0z' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='3' stroke='%23F97316' stroke-width='1.5'/%3E%3C/svg%3E");
}


/* 1. 공법개요 - 문서 아이콘 (심플 라인) */
.contBox .tab-panel h2:nth-of-type(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 2. 공법특징 - 스타/특징 아이콘 */
.contBox .tab-panel h2:nth-of-type(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 3. 산업재산권 - 인증/뱃지 아이콘 */
.contBox .tab-panel h2:nth-of-type(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15a6 6 0 1 0 0-12 6 6 0 0 0 0 12z' stroke='%23F97316' stroke-width='1.5'/%3E%3Cpath d='M8.21 13.89L7 23l5-3 5 3-1.21-9.12' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 4. 모식도 - 레이어/다이어그램 아이콘 */
.contBox .tab-panel h2:nth-of-type(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 17l10 5 10-5' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 12l10 5 10-5' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 5. 적용처 - 위치 마커 아이콘 */
.contBox .tab-panel h2:nth-of-type(5)::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0z' stroke='%23F97316' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='3' stroke='%23F97316' stroke-width='1.5'/%3E%3C/svg%3E");
}

.cont {
    max-width: 1200px;
    margin: 0 auto;
}

/* h2 제목 스타일 개선 */
#ctt_con h2 {
    font-size: 24px;
    color: #1a1a1a;
    font-weight: 600;
    padding: 12px;
    /* padding: 15px 0 15px 20px;
    margin: 30px 0 20px; */
    /* border-left: 4px solid #d4a259; */
    background: linear-gradient(to right, rgba(212, 162, 89, 0.08), transparent);
    border-bottom: 1px solid #e0e0e0;
}

#ctt_con h2 .title-decoration {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #d4a259;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
}

/* 이미지가 있는 p 태그 */
#ctt_con p.img {
    text-align: center;
    margin: 30px 0;
    padding: 20px 0 !important;
}

#ctt_con p.img img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 특허 정보 스타일 */
#ctt_con .patent-info {
    display: inline-block;
    background: #f8f9fa;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 10px 0;
    border: 1px solid #e0e0e0;
}

#ctt_con .patent-info strong {
    color: #d4a259;
    font-weight: 700;
}

/* 특징 리스트 스타일 */
#ctt_con ul.feature-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

#ctt_con ul.feature-list li {
    position: relative;
    padding: 10px 0 10px 30px;
    line-height: 1.8;
    color: #333;
}

#ctt_con ul.feature-list li:before {
    content: "●";
    position: absolute;
    left: 0;
    color: #d4a259;
    font-size: 10px;
    top: 14px;
}

/* 일반 p 태그 개선 */
#ctt_con p {
    margin: 15px 0;
    line-height: 1.5;
    color: #333;
    /* word-break: keep-all; */
}

/* b 태그 스타일 */
#ctt_con b,
#ctt_con strong {
    font-weight: 600;
    color: #1a1a1a;
}


/* Vision Page - Paradigm Cards */
.vision-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 40px 0;
}

.vision-header h2 {
    font-size: 20px;
    font-weight: 400;
    color: #666;
    margin-bottom: 15px;
    letter-spacing: 1px;
    border: none;
    background: none;
    padding: 0;
}

.paradigm-title {
    font-size: 48px;
    font-weight: 800;
    color: #2E5A7D;
    margin: 0;
    letter-spacing: 2px;
}

.paradigm-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 80px;
}

.paradigm-card {
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.paradigm-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.card-icon {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.paradigm-card h3 {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.card-subtitle {
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* Certificates Grid - 반응형 */
.certs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px;
    padding: 20px 0;
}

.cert-item {
    text-align: center;
    transition: all 0.3s ease;
}

.cert-item:hover {
    transform: translateY(-8px);
}

.cert-image {
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    background: #fff;
    padding: 10px;
}

.cert-image:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.cert-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.cert-image:hover img {
    transform: scale(1.05);
}

.cert-title {
    margin-top: 15px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    line-height: 1.5;
    text-align: center !important;
}

.rauth_right { display: block; }
.rauth_bottom { display: none; text-align: center; }

/* 태블릿 */
@media (max-width: 768px) {
    .certs-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 30px;
    }
    
    .cert-title {
        font-size: 14px;
    }

.rauth_right { display: none; }
.rauth_bottom { display: block; }

}

/* 모바일 */
@media (max-width: 480px) {
    .certs-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 20px;
    }
    
    .cert-image {
        padding: 8px;
    }
    
    .cert-title {
        font-size: 13px;
        margin-top: 10px;
    }
}

/* Patent Table - 반응형 */
.patent-title {
    font-size: 24px;
    color: #1a1a1a;
    font-weight: 600;
    padding: 15px 0 15px 20px;
    margin: 60px 0 30px;
    border-left: 4px solid #d4a259;
    background: linear-gradient(to right, rgba(212, 162, 89, 0.08), transparent);
    border-bottom: 1px solid #e0e0e0;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0 40px;
}

.patent-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
    font-size: 14px;
}

.patent-table thead th {
    background: #2E5A7D;
    color: #fff;
    font-weight: 600;
    padding: 15px 12px;
    border: 1px solid #1a4566;
    text-align: center;
    white-space: nowrap;
}

.patent-table tbody td {
    padding: 12px;
    border: 1px solid #e0e0e0;
    vertical-align: middle;
    line-height: 1.6;
}

.patent-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.patent-table tbody tr:hover {
    background: #fff9f0;
}

.patent-table tbody td:nth-child(1) {
    text-align: center;
    font-weight: 600;
    color: #2E5A7D;
    background: #f0f4f8;
}

.patent-table tbody td:nth-child(2),
.patent-table tbody td:nth-child(3),
.patent-table tbody td:nth-child(4) {
    text-align: center;
}

.patent-table tbody td:nth-child(5) {
    text-align: left;
}

.patent-table tbody td:nth-child(6) {
    text-align: center;
}

@media (max-width: 768px) {

    #ctt_con h2
    {
        margin: 0.5em 0 0em 0;
        padding: 0.0em !important;
        font-size: 1.5em;
    }

    .patent-title {
        font-size: 20px;
        margin: 40px 0 20px;
    }
    
    .patent-table {
        font-size: 13px;
        min-width: 700px;
    }
    
    .patent-table thead th,
    .patent-table tbody td {
        padding: 10px 8px;
    }
}

@media (max-width: 480px) {
    .patent-title {
        font-size: 18px;
        padding: 12px 0 12px 15px;
    }
    
    .patent-table {
        font-size: 12px;
        min-width: 650px;
    }
    
    .patent-table thead th,
    .patent-table tbody td {
        padding: 8px 6px;
    }
}