@font-face {
    font-family: 'Paperlogy-2ExtraLight';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
}
@font-face {
    font-family: 'Paperlogy-5Medium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
}


 :root {
    --primary: #2A3FFB;
    --secondary: #00D2FF;
    --accent: #FF3366;
    --dark: #2e2e1a;
    --dark2: #353543;
    --light: #F5F7FF;
    --gray: #6B7280;
    --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
}

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

body {
    font-family: 'Paperlogy-2ExtraLight', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif ;
    line-height: 1.5;
    background: var(--light);
    color: var(--dark);
   
}



/* Chat Container */
/*.chat-container{background-color: #2a2f37;}*/
.chat-container, .chat-section, .intro-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 80px;
    /* background-color: #353543; */
}


/*
.box1000p{padding-left: 20px important;padding-right: 20px important;}
.chat-container{ background-color: #363636;}
@media(max-width: 768px){
    .chat-container{margin-left: -15px !important;margin-right: -15px !important;}    
}
*/


.chat-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 40px;
    background: var(--gradient);
    border-radius: 20px;
    color: white;
    box-shadow: 0 10px 30px rgba(42, 63, 251, 0.15);

}

.chat-header h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 800;
    color: white;
}

.chat-header p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* Chat Sections */
.chat-section {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.5s ease-out forwards;
	position: relative;
}

.chat-question {
    display: inline-flex;
    align-items: center;
/*    background: #373F47;*/
/*    background: #34344A;*/
/*    background: #F45B69;*/
/*    background: #63C132;*/
/*    color: white;*/
    padding: 20px 30px;
    padding: 20px 30px;
    border-radius: 30px;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.chat-question:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(42, 63, 251, 0.15);
}

.question-icon {
    color: var(--primary);
    font-weight: 800;
    margin-right: 15px;
    font-size: 1.4rem;
}

.chat-answer {
    display: flex;
    margin-left: 40px;
    margin-top: 20px;
}

.answer-icon {
    color: var(--accent);
    font-weight: 800;
    margin-right: 15px;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.answer-content {
    background: white;
/*        background: #373F47;*/
/*    background: #34344A;*/
/*    background: #F45B69;*/
/*    background: #5FB49C;*/
    padding: 30px 20px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    flex: 1;
}

.highlight {
    font-size: 1.3rem;
    color: var(--dark);
    margin-bottom: 20px;
    font-weight: 500;
}

.detail-points {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.point {
    display: flex;
    align-items: center;
    gap: 10px;
}

.point i {
    color: var(--primary);
    font-size: 1.2rem;
}

/* Feature Boxes */
.feature-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}





/*  Curriculum */

        .curriculum-detail {
            background: #0F172A;
            padding: 20px 20px;
            color: #fff;
            font-family: 'Pretendard', sans-serif;
			border-radius: 17px;
			    max-width: 720px;
			margin: 0 auto;
			
        }
        
        .curriculum-detail-head {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .curriculum-detail-head h2 {
            font-size: 2.5rem;
            margin-bottom: 15px;
            color: #fff;
        }
        
        .curriculum-detail-head p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 1.1rem;
        }
        
        .curriculum-detail-timeline {
            max-width: 600px;
            margin: 0 auto;
            position: relative;
            padding: 40px 0;
        }
        
        .curriculum-timeline-track {
            position: absolute;
            left: 196px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, 
                transparent,
                rgba(99, 102, 241, 0.5) 10%,
                rgba(99, 102, 241, 0.5) 90%,
                transparent
            );
        }
        
        .curriculum-timeline-blick {
            display: flex;
            margin-bottom: 25px;
            position: relative;
        }
        
        .detail-time-info {
            width: 200px;
            flex-shrink: 0;
            padding-right: 40px;
            text-align: right;
        }
        
        .detail-duration {
            display: inline-block;
            background: rgba(99, 102, 241, 0.2);
            color: #818cf8;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            margin-bottom: 10px;
        }
        
        .detail-time-info h3 {
            font-size: 1.2rem;
            margin: 0;
            color: #fff;
        }
        
        .detail-course-content {
            flex: 1;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-radius: 12px;
            padding: 20px;
            margin-left: 40px;
            position: relative;
        }
        
        .detail-course-content::before {
            content: '';
            position: absolute;
            left: -40px;
            top: 20px;
            width: 40px;
            height: 2px;
            background: rgba(99, 102, 241, 0.5);
        }
        
        .detail-course-content::after {
            content: '';
            position: absolute;
            left: -48px;
            top: 16px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #818cf8;
            box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
        }
        
        .detail-sub-course {
            margin-bottom: 20px;
        }
        
        .detail-sub-course h4 {
            color: #818cf8;
            margin: 0 0 10px 0;
            font-size: 1rem;
			margin-bottom: 0;
			padding-top: 12px;
        }
        
        .detail-course-content ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .detail-course-content li {
            padding: 8px 0;
            padding-left: 20px;
            position: relative;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .detail-course-content li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: #818cf8;
        }
        
        @media (max-width: 768px) {
            .curriculum-detail-head h2 {
                font-size: 2rem;
            }
        
            .curriculum-timeline-track {
                left: 120px;
            }
        
            .detail-time-info {
                width: 100px;
            }
        
            .detail-time-info h3 {
                font-size: 1rem;
            }
        
            .detail-course-content {
                margin-left: 30px;
            }
        
            .detail-course-content::before {
                left: -30px;
                width: 30px;
            }
        
            .detail-course-content::after {
                left: -38px;
            }
        }
        



/* Stats Display */
.stats-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.stat-box {
    flex: 1;
    min-width: 200px;
    background: white;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.stat-label {
    color: var(--gray);
    font-weight: 500;
}

/* Benefits Section */
.benefits-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 30px;
}

.benefit-card {
    flex: 1;
    min-width: 300px;
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

.benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient);
}

.benefit-icon {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--primary);
}

/* Location Map Section */
.location-container {
    margin-top: 30px;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.location-info {
    padding: 30px;
}

.location-details {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

.location-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.location-detail-item i {
    color: var(--primary);
}

/* Testimonials */
.testimonial-container {
    margin-top: 30px;
}


.testimonial-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .chat-container {
        padding: 20px;
    }

    .chat-header {
        padding: 30px;
    }

    .chat-header h1 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .chat-container, .chat-section{padding: 0;}
    .chat-question {
        font-size: 1.6rem;
        padding: 15px 25px;
    }

    .answer-content {
        padding: 20px;
    }

    .stat-box,
    .benefit-card {
        min-width: 100%;
		padding-top: 22px;padding-bottom: 20px;
    }
	.benefit-card .fas{margin-bottom: 0;}
    .location-details {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .chat-header h1 {
        font-size: 1.5rem;
    }

    .chat-question {
        width: 100%;
    }

    .chat-answer {
        margin-left: 20px;
    }

    .timeline-item {
        flex-direction: column;
    }

    .timeline-number {
        margin-bottom: 15px;
    }
}

/* Interactive Elements */
.chat-question.active {
    background: var(--gradient);
    color: white;
}

.chat-question.active .question-icon {
    color: white;
}

/* Hover Effects */
.benefit-card:hover,
.stat-box:hover,
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(42, 63, 251, 0.15);
    transition: all 0.3s ease;
}

.comparison-item {
    flex: 1;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.comparison-header {
    background: var(--gradient);
    padding: 20px;
    color: white;
    text-align: center;
    
}

.comparison-header h3 {
    margin: 0;
    font-size: 1.5rem;color: white;
}

.comparison-divider {
    display: flex;
    align-items: center;
    font-weight: 800;
    color: var(--primary);
    font-size: 1.5rem;
}

.feature-list {
    list-style: none;
    padding: 25px;
    margin: 0;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.feature-list li:last-child {
    border-bottom: none;
}

.feature-list i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
	 flex-shrink: 0;
}

.feature-list .fa-check {
    background: rgba(42, 63, 251, 0.1);
    color: var(--primary);
}

.feature-list .fa-times {
    background: rgba(255, 51, 102, 0.1);
    color: var(--accent);
}

/* Testimonials Styles */
.testimonials-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

.testimonial-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    height: 430px;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.testimonial-info h4 {
    margin: 0;
    color: var(--dark);
}

.testimonial-info span {
    color: var(--gray);
    font-size: 0.9rem;
}

/* CTA Section Styles */
.cta-section {
    margin-top: 60px;
    text-align: center;
    background: var(--gradient);
    padding: 60px 30px;
    border-radius: 30px;
    color: white;
}

.cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: white;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
	font-size: 1.2rem;
}

.cta-button {
    padding: 15px 40px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-button.primary {
    background: white;
    color: var(--primary);
}

.cta-button.secondary {
    background: transparent;
    border: 2px solid white;
    color: white;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Floating Action Button */
.fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 5px 15px rgba(42, 63, 251, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
}
.fab i {
    font-size: 20px;
}
.fab:hover {
    transform: scale(1.1);
}


@media (max-width: 768px) {
    .comparison-container {
        flex-direction: column;
    }

    .comparison-divider {
        text-align: center;
        padding: 0;
    }

    .cta-section h2 {
        font-size: 2rem;
    }

    .cta-buttons {
        flex-direction: column;
		font-size: 1.7rem;
/*		padding: 15px 10px;*/
    }
	.cta-button.secondary{padding: 15px;} 
    .fab {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
    .testimonial-card {
        height: 620px;
        padding: 0;
    }
	

}



/* .slide-up {
    animation: slideUp 0.5s ease-out forwards;
} */



/* Hover Effects */
.chat-section:hover .chat-question {
    transform: translateY(-2px);
}

.comparison-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(42, 63, 251, 0.15);
}

.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(42, 63, 251, 0.15);
}
.stat-number {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    gap: 5px;
}

.stat-number .prefix {
    font-size: 1.5rem;
    margin-right: 5px;
}

.stat-number .unit {
    font-size: 1.5rem;
    margin-left: 5px;
}

.stat-number .number {
    font-size: 2.5rem;
}

.stat-label {
    color: var(--gray);
    font-weight: 500;
}
/* 포트폴리오 섹션 스타일 */
.portfolio-features {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0;
}

.feature-item {
    flex: 1;
    min-width: 300px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: rgba(42, 63, 251, 0.05);
    padding: 20px;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(42, 63, 251, 0.1);
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.feature-text h4 {
    color: var(--primary);
    margin-bottom: 5px;
}

.portfolio-quote {
    background: var(--gradient);
    color: white;
    padding: 30px;
    border-radius: 15px;
    margin-top: 30px;
    position: relative;
}

.portfolio-quote i {
    font-size: 2rem;
    opacity: 0.5;
    margin-bottom: 10px;
}

.portfolio-quote p {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: white;
}

.portfolio-quote span {
    opacity: 0.8;
    font-size: 0.9rem;
}

/* 시설 섹션 스타일 */
.facility-features {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
}

.facility-item {
    flex: 1;
    min-width: 300px;
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.facility-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(42, 63, 251, 0.15);
}

.facility-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.facility-text h4 {
    color: var(--primary);
    margin-bottom: 15px;
}

.facility-text ul {
    list-style: none;
    padding: 0;
}

.facility-text ul li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: var(--gray);
}

.facility-text ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--primary);
}
.port-t {
    display: none !important;
    height: 1px !important;
}


/* pc에서 전화 걸리지 않게 */
@media screen and (min-width: 769px) {
    .phone-link[href^="tel:"] {
        pointer-events: none;
        cursor: default;
    }
}


/* 반응형 디자인 */
@media (max-width: 768px) {
    .feature-item,
    .facility-item {
        min-width: 100%;
		padding: 15px;
    }
    
    .portfolio-quote {
        padding: 20px;
    }
}

/* 수업난이도 섹션 스타일 */
.feature-box {
    flex: 1;
    min-width: 250px;
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(42, 63, 251, 0.15);
}

.feature-box i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 15px;
}

.feature-box h4 {
    color: var(--primary);
    margin-bottom: 10px;
}

/* 취업전망 섹션 스타일 */
.stats-highlight {
    display: flex;
    gap: 30px;
    margin: 30px 0;
}

.stat-item {
    flex: 1;
    background: white;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-desc {
    color: var(--gray);
    font-size: 16px;
}

.location-highlight {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(42, 63, 251, 0.05);
    padding: 20px;
    border-radius: 15px;
}

.location-highlight i {
    font-size: 2rem;
    color: var(--primary);
}

/* 교육 퀄리티 섹션 스타일 */
.awards-section {
    margin-top: 30px;
}

.awards-grid {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

.award-item {
    flex: 1;
    background: white;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.award-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(42, 63, 251, 0.15);
}

.award-item i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 15px;
}

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

.testimonial-item {
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.testimonial-item i {
    color: var(--primary);
    font-size: 1.5rem;
}

/* 강사진 소개 섹션 스타일 */
.instructor-profile {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.profile-header i {
    font-size: 3rem;
    color: var(--primary);
}

.profile-info h4 {
    color: var(--primary);
    margin-bottom: 5px;
}

.expertise-grid {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.expertise-item {
    flex: 1;
    background: rgba(42, 63, 251, 0.05);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.expertise-item:hover {
    transform: translateY(-5px);
    background: var(--gradient);
}

.expertise-item:hover i,
.expertise-item:hover p {
    color: white;
}

.expertise-item i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 10px;
}

/* 반응형 디자인 보완 */
@media (max-width: 768px) {
    .stats-highlight,
    .awards-grid,
    .expertise-grid {
        flex-direction: column;
    }

    .stat-item,
    .award-item,
    .expertise-item {
        width: 100%;
    }

    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .testimonial-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}



/* 애니메이션 키프레임 정의 */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-17px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    /* from {
        opacity: 0;
        transform: translateX(17px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    } */
    from {
        opacity: 0;
        transform: translateX(-17px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInScroll {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}




/* 섹션 스타일링 */
.chat-section {
    opacity: 0;
    visibility: hidden;
}



/* 스크롤 애니메이션 */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 그라데이션 배경 */
.hero {
    background: linear-gradient(-45deg, var(--primary), var(--secondary));
    background-size: 200% 200%;
    animation: gradientBG 15s ease infinite;
}




/* 섹션 스타일링 */
.chat-section {
    opacity: 0;
    visibility: hidden;
}

.chat-section.animate {
    visibility: visible;
    
}

.chat-section.animate:nth-child(odd) {
    animation: slideInLeft 1s ease-out forwards;
}

.chat-section.animate:nth-child(even) {
    animation: slideInRight 1s ease-out forwards;
}

/* 스크롤 애니메이션 */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease-out;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 그라데이션 배경 */
.hero {
    background: linear-gradient(-45deg, var(--primary), var(--secondary));
    background-size: 200% 200%;
    animation: gradientBG 15s ease infinite;
}


/* 도입부 시작 */

.intro-container {
    background: linear-gradient(135deg, #1a1f3c, #2a3f7c);
    color: white;
    padding: 80px 0;
    position: relative;
    overflow: hidden;

}

.intro-container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('path/to/pattern.svg') repeat;
    opacity: 0.1;
    pointer-events: none;
}

/* 메인 소개 섹션 */
.main-intro {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}
.main-intro h2, .chat-header h1{ font-family: 'Paperlogy-5Medium'; color: white;font-weight: 700;}
.main-intro h2{margin-bottom: 0; }
/*
.intro-title {
    font-size: 3.5rem;
    font-family: 'Paperlogy-5Medium';
    margin-bottom: 20px;
    background: linear-gradient(135deg, #fff, #88c8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
*/
/* 기존 intro-title 스타일 수정 */
.intro-title {
    font-size: 3.5rem;
    font-family: 'Paperlogy-5Medium';
    margin-bottom: 20px;
    color: white;
    text-align: center;
}

.intro-subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 60px;
}

.intro-highlights {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 22vw;
}

.highlight-card {
    /* 기본 스타일 */
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 20px;
    flex: 1;
    max-width: 300px;
    text-align: center;
    transition: transform 0.3s ease;
}

@supports (backdrop-filter: blur(5px)) {
    .highlight-card {
        backdrop-filter: blur(5px);
    }
}

@supports (-webkit-backdrop-filter: blur(5px)) {
    .highlight-card {
        -webkit-backdrop-filter: blur(5px);
    }
}



.highlight-card:hover {
    transform: translateY(-10px);
}

.highlight-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.highlight-icon i {
    font-size: 2rem;
    color: white;
}

.highlight-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: white;
}

/* 커리큘럼 프리뷰 섹션 */
.curriculum-preview {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 0 20px;
}

.curriculum-header {
    text-align: center;
    margin-bottom: 10px;
}

.curriculum-header h2 {
    font-weight: 200;
    font-family: 'Paperlogy-5Medium';
    font-size: 2.5rem;
    margin-bottom: 0;
    color: white;
}
.card-content h3, .intro-highlights h3 {
    font-weight: 200;
    font-family: 'Paperlogy-5Medium';
    color: white ;
}

.curriculum-cards {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.course-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 20px;
    flex: 1;
    max-width: 350px;
    transition: all 0.3s ease;
}

.course-card.featured {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(46, 204, 113, 0.2));
    transform: scale(1.05);
}

.course-card:hover {
    transform: translateY(-10px);
}

.card-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-icon i {
    font-size: 1.8rem;
    color: white;
}

.card-content h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.card-content p {
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 968px) {
    .intro-highlights,
    .curriculum-cards {
        flex-direction: column;
        align-items: center;
    }

    .highlight-card,
    .course-card {
        width: 100%;
        max-width: 400px;
    }
    .intro-title {font-size: 2.5rem;}
	.main-intro h2, .curriculum-header h2 {font-size: 2rem;}
}

/* 인트루 애니메이션 */

/* 인트로 섹션 애니메이션 */
/* 초기 상태 */

.grid-overlay {
    position: absolute;
    z-index: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
/*	margin: 500px auto 5px auto;*/
    width: 50vw;
    top: 25vw;
    left: 27vw;
}
.grid-overlay img {
    display: block;
    width: 100%;
    height: 100%;object-fit: cover;
}

.main-intro, .curriculum-preview {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.intro-title, .intro-subtitle, .highlight-card,
.curriculum-header, .course-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* hover 효과 */
.highlight-card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.15);
}

.course-card:hover {
    transform: translateY(-15px) scale(1.03) !important;
    background: rgba(255, 255, 255, 0.15);
}

.course-card.featured {
    position: relative;
}

.course-card.featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.course-card.featured:hover::before {
    opacity: 1;
}



/* 부드러운 스크롤 인터랙션 */
.parallax-element {
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}


/*메인 타이틀 글자 애니션이션*/
/* AI 중심 텍스트 애니메이션 스타일 */
.highlight-text {
    display: inline-block;
    position: relative;
    color: #00D2FF;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.highlight-text.visible {
    opacity: 1;
    transform: translateY(0);
    animation: glow 2s ease-in-out forwards;
}

.highlight-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    right: -5px;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(0, 210, 255, 0) 0%,
        rgba(0, 210, 255, 0.2) 50%,
        rgba(0, 210, 255, 0) 100%);
    opacity: 0;
    z-index: -1;
}
#home{margin-bottom: 100px;height: fit-content;}
.highlight-text.visible::before {
    animation: staticBlink 4s forwards;
}
.rev_slider_wrapper {
    position: relative;
    height: 450px;
    min-height: 450px;
    max-height: 450px;
    overflow: hidden;
}
@keyframes glow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(0, 210, 255, 0.5),
                     0 0 20px rgba(0, 210, 255, 0.3),
                     0 0 30px rgba(0, 210, 255, 0.1);
    }
    50% {
        text-shadow: 0 0 20px rgba(0, 210, 255, 0.8),
                     0 0 30px rgba(0, 210, 255, 0.5),
                     0 0 40px rgba(0, 210, 255, 0.3);
    }
}

@keyframes staticBlink {
    0%, 100% {
        opacity: 0;
    }
    15%, 25% {
        opacity: 1;
    }
    40%, 45% {
        opacity: 0;
    }
    60%, 70% {
        opacity: 1;
    }
    85%, 90% {
        opacity: 0;
    }
}

/*상단 과정 설명 보완션섹션*/



.header-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #818cf8;
    padding: 15px 35px;  
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;  
    margin-bottom: 50px;
    position: relative;
    animation: pulseAndGlow 3s infinite;
}

.header-tag::before {
    content: '';
    display: inline-block;
    width: 10px;  
    height: 10px;  
    background: #818cf8;
    border-radius: 50%;
    margin-right: 15px;
    animation: pulseDot 3s infinite;
}

/* 태그 전체 애니메이션 */
@keyframes pulseAndGlow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(99, 102, 241, 0);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(99, 102, 241, 0);
    }
}

/* 도트 애니메이션 */
@keyframes pulseDot {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


    .ai-em-title {
        margin-top: 170px;
        text-align: center;
        margin-bottom: 80px;
    }

    .ai-em-maintitle {
        font-size: 3rem;
        line-height: 1.3;
        margin-bottom: 30px;
        background: linear-gradient(to right, #fff, #818cf8);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.ai-em-stro {
    font-size: 3.5rem;
    display: block;
    margin: 5px 0;
    background: linear-gradient(to right, #81F499, #13be38); /* 새로운 그라디언트 색상 */
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}


        .ai-em-sub {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.7);
            max-width: 600px;
            margin: 0 auto;
        }

        .comparison-container {
            display: flex;
            gap: 15px;
            position: relative;
        }

        .comparison-box {
            flex: 1;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 40px;
            position: relative;
            overflow: hidden;
        }

        .comparison-box.featured {
            background: rgba(99, 102, 241, 0.05);
            border-color: rgba(99, 102, 241, 0.2);
        }

        .comparison-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(to right, transparent, #818cf8, transparent);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .comparison-box:hover::before {
            opacity: 1;
        }

        .comp-cont-box {
            position: relative;
            z-index: 1;
        }

    .com-box-img {
        width: 250px;
        height: 200px;
        margin: 0 auto 10px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* border: 1px solid yellow; */
        overflow: hidden; 
        margin-bottom: -30px;
    }

.com-box-img img {
    width: auto; 
    height: 100%; 
    object-fit: contain;
}

        .ai-box-tit {
            font-size: 1.5rem;
            color: #fff;
            margin-bottom: 20px;
            text-align: center;
        }

        .strength-meter {
            display: flex;
            gap: 8px;
            justify-content: center;
        }

        .strength-bar {
            width: 50px;
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            overflow: hidden;
        }

        .strength-bar.active {
            background: #818cf8;
            box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
        }


.por-ui-ani{
	position: absolute;
    top: 10px;left: 45vw;
    width: 11vw;z-index: 5000;
    height: auto;
}

.por-glasses{
        position: absolute;
        top: -20px;left: 45vw;
        width: 15vw !important;height: auto;
	z-index: 5000;
}
.por-ui-ux{
	position: absolute;
    top: 14px;left: 55vw;
    width: 17vw;z-index: 5000;
    height: auto;
}
.por-curri{
	position: absolute;
    top: 14px;left: 55vw;
    width: 17vw;z-index: 5000;
    height: auto;
}
.curri-img{
	position: absolute;
    top: 78vw;left: 55vw;
    width: 21vw;z-index: 5000;
    height: auto;
}
.por-location{
	position: absolute;
    top: 35px;left: 55vw;
    width: 17vw;z-index: 5000;
    height: auto;
}
.por-cong{
	position: absolute;
    top: 120px;
    left: 35vw;
    width: 19vw;
    height: auto;z-index: 5000;
}
.awd2{width: 100%;height: auto;}
.awd2 img{
    width: 100%;height: 100%;object-fit: cover;
}
.chat-section .bxslider .testimonial{background-color: #464646 !important;}
.testimonial .content::after{color: #cfcfcf;}

.bx-controls .bx-controls-direction .bx-prev{
    right: 100px;
    /* left: auto; */
    top: -15px; 
}
.bx-controls .bx-controls-direction .bx-next{
right: 68px;
    top: -15px;
}
.bx-controls .bx-controls-direction .bx-prev,
.bx-controls .bx-controls-direction .bx-next {
    width: 25px;
    height: 23px;
    border-radius: 5px;
    border: 1px solid #7c7c7c;
    background-color: #ececec;
    transition: all 0.3s ease;
/*    position: relative;*/
    display: inline-block;
}

.bx-controls .bx-controls-direction .bx-prev:hover,
.bx-controls .bx-controls-direction .bx-next:hover {
    background-color: #7c7c7c;
}

.bx-controls .bx-controls-direction .bx-prev i,
.bx-controls .bx-controls-direction .bx-next i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #333;
    font-size: 16px;
}

.bx-controls .bx-controls-direction .bx-prev:hover i,
.bx-controls .bx-controls-direction .bx-next:hover i {
    color: #fff;
}

.bx-controls .bx-controls-direction .bx-prev {
    margin-right: 5px;
}

/* 버튼 활성화/비활성화 상태 */
.bx-controls .bx-controls-direction .bx-prev.disabled,
.bx-controls .bx-controls-direction .bx-next.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.testimonial-card{padding-top: 35px;}
.intro-strong{ 
    font-family: 'Paperlogy-5Medium';
    color: #FF3366;font-weight: 600;    }
.intro-strong-sm{ 
    font-family: 'Paperlogy-5Medium';
    color: #FF3366;font-size: 16px;  }


/*
.chat-question {
    display: inline-block; 
    white-space: normal;
}

.intro-strong {
    color: #FF3366;
    font-weight: 600;
    display: inline; 
    word-wrap: normal; 
}
*/

.intro-incru{
    font-family: 'Paperlogy-5Medium';
    font-size: 18px;
}
.intro-awd, .intro-a{
	display: inline-block;
	max-width: 130px;
	height: auto;
}
.award-item p{
	font-family: 'Paperlogy-5Medium';
    font-size: 18px;
}
.profile-container .timeline-item h3 {font-size: 1.1rem !important;}

/* 영상 합성 */
 .port-laptop {
    position: absolute;
    top: 14px;
    left: 55vw;
    max-width: 256px;
    width: 100%;
    aspect-ratio: 16 / 9;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.port-screen {
    position: relative;
    width: 100%;
    height: calc(100% - 11px); /* laptop-bottom의 height를 뺀 값 */
    background: #252525;  
    border-radius: 7px;
    padding: 5px;
    box-sizing: border-box;
    box-shadow: 
        0 0 0 2px #555555,
        inset 0 0 10px rgba(0,0,0,0.5); 
    transform: rotateX(2deg); 
    transform-origin: bottom;
}

.port-screen-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    box-shadow: 0 0 2px rgba(255,255,255,0.1);  
}

#videoPlayer {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.port-laptop-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 11px;
    background: linear-gradient(to bottom, #444, #333);  
    border-radius: 0 0 7px 7px;
    transform: rotateX(10deg);
    transform-origin: top;
    box-shadow: 
        0 1px 2px rgba(0,0,0,0.5),
        inset 0 1px rgba(255,255,255,0.1);  
}

.port-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.15) 0%,
        rgba(255,255,255,0.05) 20%,
        rgba(255,255,255,0) 60%
    );
    border-radius: 7px;
    pointer-events: none;
}

.port-laptop::after {
    content: '';
    position: absolute;
    bottom: 11px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to bottom, #222222, #444);
    transform: rotateX(45deg);
    transform-origin: bottom;
}
/*
.floating2 {
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
	  will-change: transform;
}
*/

@media(max-width: 768px){
	.grid-overlay {
        width: 75vw;
        top: 50vw;
/*		left: 27vw;*/
	}
	.intro-container{padding-top: 30px;padding-bottom: 30px;margin-bottom: 70px;}
    .curriculum-cards, .intro-highlights{gap: 15px;}
    .course-card.visible,.highlight-card.visible{padding: 15px;}
    .rev_slider_wrapper {
        position: relative;
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
        overflow: hidden;
    }

    /* 추가 안정성을 위한 내부 요소 제어 */
    .rev_slider_wrapper > * {
        height: 100% !important;
        max-height: 250px !important;
    }

    /* Revolution Slider 관련 클래스 강제 높이 지정 */
    .rev_slider,
    .rev_slider_wrapper .rev_slider,
    .rev_slider_wrapper .rev_slider .tp-revslider-mainul {
        height: 250px !important;
        max-height: 250px !important;
    }
    
      .ai-em-maintitle {
                font-size: 2rem;
            }

            .ai-em-stro {
                font-size: 2.5rem;
            }

            .ai-em-sub {
                font-size: 1rem;
                padding: 0 20px;
            }

            .comparison-container {
                flex-direction: column;
                gap: 20px;
            }

            .comparison-box {
                padding: 30px 20px;
            }

            .com-box-img {
                /* width: 100px;
                height: 100px; */
            }

            .ai-box-tit {
                font-size: 1.3rem;
            }
            .header-tag {
        padding: 12px 25px;
        font-size: 1rem;
    }

    .header-tag::before {
        width: 8px;
        height: 8px;
        margin-right: 12px;
    }
	.ai-em-title {
        margin-top: 70px;
        text-align: center;
        margin-bottom: 20px;
    }
	.header-tag {margin-bottom: 10px;}
	.com-box-img {height: 120px;}
	.intro-subtitle{margin-bottom: 120px;}
	.por-phone{
		position: absolute;
		top: 55px;left: 75vw;
		width: 25vw;height: fit-content;
		z-index: 100;
    }
	.por-ui-ani{
		position: absolute;
		top: 55px;left: 75vw;
		width: 25vw;
		height: auto;
	}

	.por-glasses{
        position: absolute;
/*        top: -20px;left: 45vw;*/
        width: 35vw !important;left: 15vw;
    }
    .por-ui-ux{
        position: absolute;
		top: 55px;left: 75vw;
		width: 25vw;
		height: auto;
    }
    .por-ui-ux{
        top: 30px;left: 67vw;
        width: 30vw;
    }
    .por-curri{
	position: absolute;
    top: 14px;left: 75vw;
    width: 21vw;z-index: 5000;
    height: auto;
	}
	.por-location{
		top: 45px;left: 62vw;
		width: 37vw;
	}
	.por-cong{
        top: 160px;
        left: 37vw;
        width: 43vw;
    }
	
	.curri-img{
		top: 170vw;
		left: 58vw;
		width: 35vw;
	}
    .highlight{font-size: 1.4rem;}
    .bx-controls .bx-controls-direction .bx-prev{
        right: 60px;
        /* left: auto; */
        top: -15px; 
    }
    .bx-controls .bx-controls-direction .bx-next{
        right: 28px;
        top: -15px;
    }
	.comparison-header h3 {
		font-size: 1.6rem;
	}
	.highlight {font-size: 1.4rem;}
	.location-info h3 {font-size: 1.4rem !important}
	
	.port-laptop {
		position: static;
		margin: auto;
	}


/*
    .curriculum-detail {
        padding: 40px 15px;
    }

    .curriculum-detail-head h2 {
        font-size: 2rem;
    }

    .curriculum-detail-timeline {
        padding: 20px 0;
        width: 100%;
    }

    .curriculum-timeline-track {
        left: 30px;
    }

    .curriculum-timeline-blick {
        display: flex;
        margin-bottom: 30px;
        padding-left: 15px;
        width: 100%;
    }

    .detail-time-info {
        width: auto;
        min-width: 120px;
        padding-left: 45px;
        text-align: left;
    }

    .detail-time-info h3 {
        font-size: 1rem;
    }

    .detail-duration {
        font-size: 0.9rem;
        padding: 4px 12px;
    }

    .detail-course-content {
        flex: 1;
        margin-left: 20px;
        padding: 15px;
        position: relative;
        width: calc(100% - 140px);
    }

    .detail-course-content::before {
        content: '';
        position: absolute;
        left: -20px;
        top: 15px;
        width: 20px;
        height: 2px;
        background: rgba(99, 102, 241, 0.5);
    }

    .detail-course-content::after {
        content: '';
        position: absolute;
        left: -34px;
        top: 11px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #818cf8;
        box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    }

    .detail-sub-course {
        margin-bottom: 15px;
    }

    .detail-sub-course h4 {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .detail-course-content ul {
        margin: 0;
    }

    .detail-course-content li {
        font-size: 0.9rem;
        line-height: 1.5;
        padding: 6px 0 6px 15px;
    }

    .detail-course-content li::before {
        left: 0;
    }
*/

	.curriculum-detail-timeline{padding: 0}
	
}

 
@media (max-width: 768px) {
	.detail-sub-course{margin-bottom: 7px;}
    .curriculum-detail {
        padding: 30px 10px;
    }

    .curriculum-timeline-blick {
        flex-direction: column;
        margin-bottom: 10px;
    }

    .curriculum-timeline-track {
        left: 15px;
    }

    .detail-time-info {
        width: 100%;
        text-align: left;
        padding-left: 30px;
		margin-bottom: 5px;
        margin-top: 15px;
    }

    .detail-course-content {
        margin-left: 30px;
        width: auto;
        margin-right: 0;
        position: relative;
		padding-top: 7px;
        padding-bottom: 7px;
    }

    .detail-course-content::before {
        left: -15px;
        top: 15px;
        width: 15px;
        height: 2px;
    }

    .detail-course-content::after {
        left: -19px;
        top: 11px;
        width: 8px;
        height: 8px;
    }

    .detail-duration {
        font-size: 0.8rem;
        padding: 4px 12px;
    }

    .detail-course-content li {
        font-size: 0.9rem;
		padding-top: 5px;
        padding-bottom: 5px;
    }
}

@media(max-width: 431px){
	.grid-overlay {
        top: 37vw;
	}
}
@media(max-width: 390px){
	.grid-overlay {
        top: 47vw;
	}
}
/* 범용 애니메이션을 위한 애니메이션 스타일 */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}