

.main_visual { height: 100vh; width: 100%; overflow-x: hidden; position: relative; }
.main_visual .swiper { width: 100%; height: 100vh; }
.main_visual .swiper-slide { background-position: center; background-size: cover; display: flex; align-items: center; justify-content: center; }
.main_visual .swiper-slide:nth-child(1n) { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/main_banner_img01.jpg'); }
.main_visual .swiper-slide:nth-child(2n) { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/main_banner_img01.jpg'); }
.main_visual .swiper-slide:nth-child(3n) { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/main_banner_img01.jpg'); }
.main_visual .swiper-slide.video-slide, .main_visual .swiper-slide.youtube-slide { background-image: none; }
.main_visual .swiper-slide .visual-tit { color: #fff; text-align: center; position: relative; z-index: 2; padding: 0 20px; }
.main_visual .swiper-slide .title { font-weight: 500; line-height: 1.2; font-size: 3vw; margin-bottom: 20px; }
.main_visual .swiper-slide .description { font-size: 0.9vw; color: #fff; opacity: 0.8 }
.video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.video-slide::before, .youtube-slide::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; }
.main_visual .nav-and-scroll { position: absolute; bottom: 50px; right: 150px; display: flex; align-items: center; z-index: 100; }
.main_visual .nav-buttons { display: flex; margin-right: 10px; }
.main_visual .swiper-button-next, .main_visual .swiper-button-prev { position: relative; width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background-color: transparent; transition: all ease 0.3s; margin: 0 5px; }
.main_visual .swiper-button-prev { background: url('../img/main_arrow01.png') no-repeat center; }
.main_visual .swiper-button-next { background: url('../img/main_arrow02.png') no-repeat center; }
.main_visual .swiper-button-prev::after, .main_visual .swiper-button-next::after { content: ''; }
.main_visual .swiper-button-prev:hover, .main_visual .swiper-button-next:hover { border-color: #fff; }
.main_visual .scroll_move { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); animation: moveUpDown 2s infinite; }
.main_visual .scroll_move .scroll_icon { font-size: 30px; color: #fff; line-height: 1; animation: bounce_frames 0.5s alternate infinite cubic-bezier(0.5, 0.05, 1, 0.5); }
@keyframes moveUpDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bounce_frames { from { transform: translateY(0); } to { transform: translateY(5px); } }

/* 애니메이션 스타일 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.main_visual .swiper-slide .title,
.main_visual .swiper-slide .description {
    opacity: 0;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.main_visual .swiper-slide-active .title {
    animation-name: fadeInUp;
    animation-delay: 0.5s;
}

.main_visual .swiper-slide-active .description {
    animation-name: fadeInUp;
    animation-delay: 1s;
}

@media screen and (max-width: 768px) {
    .main_visual .swiper-slide .title { font-size: 8vw; }
    .main_visual .swiper-slide .description { font-size: 3.5vw; word-break: keep-all; line-height: 1.65 }
    .main_visual .nav-and-scroll { bottom: 10px; right: 10px; }
    .main_visual .swiper-button-next, .main_visual .swiper-button-prev, .main_visual .scroll_move { width: 50px; height: 50px; }
    .main_visual .scroll_move .scroll_icon { font-size: 16px; }
}

@media screen and (max-width: 480px) {
    .main_visual .nav-buttons { display: none}
}


/* 공통 요소 */
.container {max-width:1200px;margin:0 auto;padding:0 20px;}
section.about,section.services,section.gallery,section.contact {padding:100px 0;}

/* 섹션 헤더 */
.section-header {text-align:center;margin-bottom:60px;}
.section-title {font-size:2.5rem;font-weight:700;color:#a82a2a;margin-bottom:1rem;position:relative;}
.section-title::after {content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:80px;height:4px;background:linear-gradient(45deg,#a82a2a,#d4a574);border-radius:2px;}
.section-subtitle {font-size:1.2rem;color:#666;max-width:600px;margin:0 auto;}

/* 소개 섹션 */
.about {background:#fff;}
.about-content {display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.about-text h3 {font-size:1.5rem;color:#a82a2a;margin-bottom:1rem;font-weight:600;}
.about-text p {margin-bottom:2rem;line-height:1.8;color:#555;font-size:1rem;}
.about-image {display:flex;justify-content:center;align-items:center;}
.image-placeholder {width:300px;height:300px;background:url('/theme/basic/img/main_okkhe.jpg') center/cover;border-radius:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 40px rgba(0,0,0,0.1);transition:transform 0.3s ease;position:relative;}
.image-placeholder::after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(168,42,42,0.1),rgba(212,165,116,0.1));border-radius:20px;}
.image-placeholder i {display:none;}

/* 서비스 섹션 */
.services {background:#faf8f5;}
.services-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;}
.service-card {background:#fff;padding:40px 30px;border-radius:20px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.1);transition:all 0.3s ease;position:relative;overflow:hidden;}
.service-card::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(168,42,42,0.1),transparent);transition:left 0.5s ease;}
.service-card:hover::before {left:100%;}
.service-card:hover {transform:translateY(-10px);box-shadow:0 20px 40px rgba(168,42,42,0.2);}
.service-icon {width:80px;height:80px;background:linear-gradient(45deg,#a82a2a,#d4a574);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;transition:all 0.3s ease;}
.service-card:hover .service-icon {transform:scale(1.1) rotate(10deg);}
.service-icon i {font-size:2rem;color:#fff;}
.service-card h3 {font-size:1.3rem;color:#a82a2a;margin-bottom:15px;font-weight:600;}
.service-card p {color:#666;line-height:1.6;font-size:1rem;}

/* 갤러리 섹션 */
.gallery {background:#fff;}
.gallery-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.gallery-item {position:relative;overflow:hidden;border-radius:15px;cursor:pointer;transition:transform 0.3s ease;}
.gallery-item:hover {transform:scale(1.05);}
.gallery-placeholder {width:100%;height:250px;background:linear-gradient(135deg,#a82a2a,#d4a574);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;transition:all 0.3s ease;position:relative;font-size:1rem;}
.gallery-item:nth-child(1) .gallery-placeholder {background:url('/theme/basic/img/okkhee_01.jpg') center/cover;}
.gallery-item:nth-child(2) .gallery-placeholder {background:url('/theme/basic/img/okkhee_02.jpg') center/cover;}
.gallery-item:nth-child(3) .gallery-placeholder {background:url('/theme/basic/img/okkhee_03.jpg') center/cover;}
.gallery-item:nth-child(4) .gallery-placeholder {background:url('/theme/basic/img/okkhee_04.jpg') center/cover;}
.gallery-item:nth-child(5) .gallery-placeholder {background:url('/theme/basic/img/okkhee_05.jpg') center/cover;}
.gallery-item:nth-child(6) .gallery-placeholder {background:url('/theme/basic/img/okkhee_06.jpg') center/cover;}
.gallery-placeholder::after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(168,42,42,0.7),rgba(212,165,116,0.5));transition:opacity 0.3s ease;}
.gallery-item:hover .gallery-placeholder::after {opacity:0.3;}

/* 연락처 섹션 */
.contact {background:linear-gradient(135deg,#a82a2a 0%,#d4a574 100%);color:#fff;}
.contact-content {display:grid;grid-template-columns:1fr 1fr;gap:60px;}
.contact-info h2 {font-size:2rem;margin-bottom:30px;color:#f4e4c1;}
.contact-item {display:flex;align-items:flex-start;margin-bottom:30px;}
.contact-item i {font-size:1.5rem;color:#f4e4c1;margin-right:20px;margin-top:5px;}
.contact-item h4 {font-size:1.1rem;margin-bottom:5px;color:#f4e4c1;}
.contact-item p {opacity:0.9;line-height:1.5;font-size:1rem;}
.contact-form {background:rgba(255,255,255,0.1);padding:40px;border-radius:20px;backdrop-filter:blur(10px);}
.contact-form h3 {font-size:1.5rem;margin-bottom:30px;color:#f4e4c1;}
.contact-form input,.contact-form select,.contact-form textarea {width:100%;padding:15px;margin-bottom:20px;border:none;border-radius:10px;background:rgba(255,255,255,0.9);font-family:inherit;transition:all 0.3s ease;font-size:1rem;}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus {outline:none;box-shadow:0 0 20px rgba(244,228,193,0.3);transform:translateY(-2px);}
.contact-form button {width:100%;padding:15px;background:linear-gradient(45deg,#f4e4c1,#e6d4a7);color:#a82a2a;border:none;border-radius:10px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;}
.contact-form button:hover {transform:translateY(-3px);box-shadow:0 10px 25px rgba(244,228,193,0.3);}

/* 전통 패턴 효과 */
.traditional-pattern {position:relative;}
.traditional-pattern::before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="pattern" width="20" height="20" patternUnits="userSpace" ><rect width="10" height="10" fill="#cd853f"/><rect x="10" y="10" width="10" height="10" fill="#8b0000"/></pattern></defs><rect width="100" height="100" fill="url(#pattern)"/></svg>');}

/* 태블릿 반응형 (1024px 이하) */
@media (max-width:1024px) {
    .container {padding:0 15px;}
    section.about,section.services,section.gallery,section.contact {padding:80px 0;}
    .section-title {font-size:2.2rem;}
    .section-subtitle {font-size:1.1rem;}
    .about-text h3 {font-size:1.4rem;}
    .about-text p {font-size:0.95rem;}
    .service-card h3 {font-size:1.2rem;}
    .service-card p {font-size:0.95rem;}
    .service-icon {width:70px;height:70px;}
    .service-icon i {font-size:1.8rem;}
    .contact-info h2 {font-size:1.8rem;}
    .contact-form h3 {font-size:1.4rem;}
    .contact-item h4 {font-size:1rem;}
    .contact-item p {font-size:0.95rem;}
    .contact-form input,.contact-form select,.contact-form textarea {font-size:0.95rem;}
    .contact-form button {font-size:1rem;}
    .image-placeholder {width:250px;height:250px;}
}

/* 모바일 반응형 (768px 이하) */
@media (max-width:768px) {
    .container {padding:0 10px;}
    section.about,section.services,section.gallery,section.contact {padding:60px 0;}
    .section-header {margin-bottom:40px;}
    .section-title {font-size:1.8rem;}
    .section-subtitle {font-size:1rem;}
    .about-content {grid-template-columns:1fr;gap:30px;}
    .about-text h3 {font-size:1.2rem;}
    .about-text p {font-size:0.9rem;margin-bottom:1.5rem;}
    .contact-content {grid-template-columns:1fr;gap:30px;}
    .contact-info h2 {font-size:1.5rem;}
    .contact-form h3 {font-size:1.2rem;}
    .contact-item h4 {font-size:0.95rem;}
    .contact-item p {font-size:0.9rem;}
    .contact-item i {font-size:1.3rem;}
    .contact-form {padding:30px 20px;}
    .contact-form input,.contact-form select,.contact-form textarea {font-size:0.9rem;padding:12px;}
    .contact-form button {font-size:0.95rem;padding:12px;}
    .services-grid {grid-template-columns:1fr;gap:20px;}
    .service-card {padding:30px 20px;}
    .service-card h3 {font-size:1.1rem;}
    .service-card p {font-size:0.9rem;}
    .service-icon {width:60px;height:60px;}
    .service-icon i {font-size:1.5rem;}
    .gallery-grid {grid-template-columns:1fr;gap:15px;}
    .gallery-placeholder {height:200px;font-size:0.9rem;}
    .image-placeholder {width:200px;height:200px;}
}

/* 작은 모바일 반응형 (480px 이하) */
@media (max-width:480px) {
    .container {padding:0 8px;}
    section.about,section.services,section.gallery,section.contact {padding:40px 0;}
    .section-title {font-size:1.5rem;}
    .section-subtitle {font-size:0.9rem;}
    .about-text h3 {font-size:1.1rem;}
    .about-text p {font-size:0.85rem;}
    .contact-info h2 {font-size:1.3rem;}
    .contact-form h3 {font-size:1.1rem;}
    .contact-item h4 {font-size:0.9rem;}
    .contact-item p {font-size:0.85rem;}
    .contact-item i {font-size:1.2rem;}
    .contact-form {padding:20px 15px;}
    .contact-form input,.contact-form select,.contact-form textarea {font-size:0.85rem;padding:10px;}
    .contact-form button {font-size:0.9rem;padding:10px;}
    .service-card {padding:25px 15px;}
    .service-card h3 {font-size:1rem;}
    .service-card p {font-size:0.85rem;}
    .service-icon {width:50px;height:50px;}
    .service-icon i {font-size:1.3rem;}
    .gallery-placeholder {height:180px;font-size:0.85rem;}
    .image-placeholder {width:150px;height:150px;}
}