@charset "utf-8";

/* 내용관리 */
#ctt {margin:10px 0;padding:20px;background:#fff}
.ctt_admin {text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0;line-height:1.6em}
#ctt_himg img, #ctt_timg img, #ctt_con img {max-width:100%;height:auto}
.ctt_img {text-align:center}
        @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Nanum Gothic', sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
        }

        .image-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .image-container {
            overflow: hidden;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .image-container img {
            width: 100%;
            height: auto;
            border-radius: 15px;
            object-fit: cover;
            aspect-ratio: 16 / 9;
        }

        .image-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }

        .store-info {
            text-align: center;
            margin-top: 10px;
            line-height: 1.8;
            font-weight: 500;
            color: #333;
        }

        .store-info h3 {
            margin-bottom: 5px;
            font-size: 1.2em;
            font-weight: 700;
        }

        .store-info p {
            margin: 2px 0;
            font-size: 1em;
        }
      .header-image {
    width: 100%;
    height: 40vh; /* 화면 높이의 80% */
    overflow: hidden;
    position: relative;
    margin-bottom: 0; /* 하단 여백 제거 */
}

.header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.main-title {
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    margin-top: -20px; /* 이미지와 텍스트 사이의 간격을 줄이기 위해 음수 margin 적용 */
        margin-bottom: 20px; /* 텍스트 아래쪽에 적절한 여백 추가 */

    color: #333;
}
/* CEO 인사말 섹션 */
.ceo-container {
    max-width: 900px;
    margin: 50px auto;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: fadeInUp 1s ease-in-out;
}

.ceo-container img {
    width: 100%;
    height: auto;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.ceo-text-section {
    padding: 30px;
    background: linear-gradient(135deg, #f5f5f5, #ffffff);
    border-radius: 0 0 15px 15px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}

.ceo-text-section h1 {
    text-align: center;
    color: #0056b3;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.ceo-text-section p {
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1.1em;
    color: #444;
}

.ceo-text-section .highlight {
    font-weight: bold;
    color: #e60000;
}

.ceo-text-section .emphasis {
    font-weight: bold;
    font-size: 1.2em;
    color: #0056b3;
}

.ceo-footer {
    margin-top: 30px;
    text-align: right;
    color: #555;
    font-size: 1.1em;
}

/* 애니메이션 */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 768px) {
    .header-image {
        height: 15vh; /* 모바일에서는 25% 화면 높이 */
    }

    .main-title {
        font-size: 1.5em; /* 모바일에서는 제목 크기 줄이기 */
        margin-top: -10px; /* 간격 줄이기 */
        margin-bottom: 15px; /* 간격 줄이기 */
    }
}