@import "reset.css";
@import "keyframe.css";
@import "header.css";
@import "carousel.css?v=2026061402";
@import "video.css";
@import "card_img.css?v=2026061403";
@import "ai_course.css?v=2026061402";
@import "admin.css";
@import "admin_dashboard.css";
@import "modal_flow.css?v=2025041104";
@import "youtube.css";

main{margin-top:80px; width:100vw;}






.container-mobile{ display: flex; flex-direction: column; align-items:center; justify-content: space-between; margin-bottom: 50px; display: none;}
.container{ display: flex; flex-direction: column; align-items:center; margin-top: 50px; margin-bottom: 50px;}
.item_list{ display:flex; justify-content:space-between;  gap: 2vw; }
.youtube {    width: 90vw;    display: flex;    justify-content: center;    margin-bottom: 50px;  }



 /* 팝업 라이트 박스 스타일 */
 #myModal h2{font-size:30px;font-weight:700;margin-bottom:50px;}
 #myModal p{font-size:1.3em; line-height: 1.5em;}
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);  /*박스 뒷 배경 어둡게 설정 */
    z-index: 1000;
    overflow: auto; /* 스크롤 가능하도록 설정 */
}

.lightbox-content-wrapper {
    position: relative;
    margin: 10% auto;
    overflow: hidden;
    width: 50%; /* 가로 비율 50% */
    border-radius: 10px;
    
    background-color: #f2f2f2;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    animation: fadeIn .5s ease-in-out forwards, scaleIn .5s ease-in-out forwards; /* fade in  애니메이션 추가 */
    transform-origin: center; /* 크기 변환 중심점 설정 */
}

/* 닫기 버튼 스타일 */
.close {
    position: absolute;
    top: -10px;
    right: 25px;
    color: #aaa;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;;
}



/* PC (해상도 1340px)*/

footer{  width: 100vw;display: flex; justify-content:center;  padding: 80px 20px; background-color: #F3F4F5; }
#copy{color:#a2a2a2; margin-top:40px;}
#com-name{font-size:1.3em; font-weight:800;color:#625757; margin-bottom: 10px;}
#com-addr{font-size:1em; color: #333;}
#com-addr-mobile{font-size:1em; color: #333; line-height: 1.5em; display: none;}
.footer_line{color:#a2a2a2; margin:0;}
.com-info{width:80vw;}

.lecture_detail{padding:10px;}

/*-------------공통-------------------------*/



.academy_back{display: flex;justify-content: center; }
main#academy{display:grid; grid-template-columns:1fr 1fr; width:60vw;
    
    transform: translateY(80px);
    opacity: 0;
    animation: showAcademy .5s ease-out forwards ;
    /* animation-delay: .5s; */
    
    /*animation: fadeIn .5s ease-in-out forwards; */
}
@keyframes showAcademy {
    from{
        opacity: 0;
        transform: translateY(80px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}



.container-academy{text-align:center; padding: 50px 0px; border-radius: 10px;
    background-color: white;
    /* box-shadow: rgba(0,0,0,0.5) 0px 8px 16px -8px,
    rgba(0,0,0,0.024) 0px -6px 16px -6px; */
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
}
    
.container-academy h1{font-size:30px; font-weight: 700;}
.container-academy h2{font-size:20px; font-weight: 700;}
.container-academy h3{font-size:15px; font-weight: 700;}
.container-academy p{font-size:12px; font-weight: 500;}

/*-------------academy end------------------------*/
#dev-big-bg{width:100vw;background-color: white; padding:100px 0;}

.dev-con{width:780px; margin:0px auto 50px auto;}

.dev-header{margin-top:40px;}
.dev-con h1{ font-size: 32px; font-weight:700;text-align: center; margin-bottom: 32px;line-height: 40px;}
.dev-header>p{ font-size: 16px; font-weight:400;text-align: center;line-height: 20px;}
.dev-con h2{ font-size:30px;font-weight:700;margin-bottom:50px; }
.dev-con img{width:100%;}

#dev-big-bg img {width: 100%;  height: auto; }

.detail_h2{padding: 15px 15px 0px 15px; color:#012b47}
.lecture_detail h3{ font-size:1.5em; font-weight: 600;}
.lecture_detail li{padding-top: 15px; font-size:1.3em; line-height: 1.5em;;}
.lecture_detail{margin : 30px ; }
.hr_up{margin-top: 40px;}
.in_p1{margin-bottom:30px; font-size:1.3em; line-height: 1.5em;}
.in_h3{margin: 10px 0 15px 0;}
/*-------------dev end------------------------*/


@media  (min-width:1581px) { 
    
    .lightbox-content-wrapper {   width: 50%;}
    #dev-video-section {  height: 911px;   }
    /* #video-section{  height: 90vh;   } */
    /* #academy #video-background {height:100vh; } */
    .item_list, .youtube{width: 60vw;  }
    .image-container { width:20vw; }
    .image-container.youyube-card { width:50vw; }
    #text-container {right: 50px;}
    #academy #text-container {width: 30vw;}
    .container { display: flex;}
    
    main#academy{margin-top:100px; margin-bottom:20px;}
    #text-section h2{font-size:30px; font-weight:700;line-height:30px;} 
    .carousel-item img {
        height:90%; 
        width: auto;
        object-fit: cover;
    }
    .carousel-caption h5{font-size:56px; font-weight:700;line-height:64px;}
    .carousel-caption p{font-size:34px; font-weight:700;line-height:42px;}

}


@media  (max-width:1580px) { 
    .lightbox-content-wrapper {   width: 80%; }
    #dev-video-section {  height: 911px;   }
    /* .dev-con h1{ margin-top:20px;} */
    .dev-con{width:90vw; }
    /* .dev-con img {
        width: 100vw; 
        height: auto; 
        position: relative;
        left: 50%;
        transform: translateX(-50%); 
      } */
    /* #video-setion, #dev-video-section {  height: 20vh;   } */
    /* #academy #video-background {width: 100vw; } */
    .item_list{width: 90vw;  }
    .image-container { width:90vw; }
    #text-container {right: 10px;}
    #academy #text-container {width: 90vw;}
    #text-section h2, #academy-text-section h2{font-size:15px; font-weight:700;line-height:15px;}
    header .head_con{width: 90vw;}
    
    .menu-toggle {  display: block;   cursor: pointer;   }
    .nav, .sub_nav, .special_menu {  display: none; /* 기본 메뉴 숨김 */ } 
    .menu-toggle i { font-size: 24px; /* 아이콘 크기 */  }
    .container { display: none;}
    .container-mobile{display: flex;}
    #com-addr{display:none;}
    #com-addr-mobile{display: block;}
    main#academy{display:grid; grid-template-columns:1fr;width:auto;}
    
    #dev-text-container {top: 50vh; font-size:15px; font-weight: 700;}
    .carousel-caption h5{font-size:30px; font-weight:700;line-height:34px;}
    .carousel-caption p{font-size:18px; font-weight:700;line-height:24px;}
}