@charset "utf-8";

/* 팝업레이어 */
#hd_pop{z-index: 1000; position: relative; margin: 0 auto; height: 0}
#hd_pop h2{position: absolute; font-size: 0; line-height: 0; overflow: hidden;}
.hd_pops{position: absolute; border: 1px solid #e9e9e9; background: #fff;}
.hd_pops img{max-width: 100%}
.hd_pops_con{}
.hd_pops_footer{padding: 0; background: #000; color: #fff; text-align: left; position: relative;}
.hd_pops_footer:after{display: block; visibility: hidden; clear: both; content: "";}
.hd_pops_footer button{padding: 10px; border: 0; color: #fff}
.hd_pops_footer .hd_pops_reject{background: #000; text-align: left;}
.hd_pops_footer .hd_pops_close{
    background: #393939;
    position: absolute;
    top: 0;
    right: 0
}


/* 메인 시작 */
.main{}
.main .intro{width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 111; transition: 0.3s;}
.main .intro.active{opacity: 0; visibility: hidden; }
.main .intro iframe{width: 100%; height: 100%;}

@media screen and (max-width: 768px){
    .main .intro{display: none;}
}

.ms01{
    background: url(../img/main-mountain.png) no-repeat #F0FDFF bottom; padding-bottom: 10rem; background-size: cover; padding-top: 6rem;
}
@media screen and (max-width: 1200px){
    .ms01{
        background: url(../img/main-mountain-mo.png) no-repeat #F0FDFF bottom; background-size: cover;
    }
}
@media screen and (max-width: 1024px){
    
}
@media screen and (max-width: 768px){

}
/* main_banner */
.ms01 .main_banner{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.ms01 .main_banner .left{width: 49%;}
.ms01 .main_banner .left h3{font-size: 3rem; letter-spacing: -0.02em;}
.ms01 .main_banner .left h2{font-size: 3.75rem; font-weight: 700; letter-spacing: -0.02em; padding: 1.2rem 0;}
.ms01 .main_banner .left p{line-height: 2.5rem; font-size: 1.6rem; color: #464646;}
.ms01 .main_banner .left a{font-size: 1.6rem; border: solid 1px #464646; padding: 2.4rem 4.2rem; border-radius: 10rem; margin-top: 5rem; display: flex; width: fit-content; align-items: center;}
.ms01 .main_banner .left a span{font-size: 2.5rem; line-height: 0; margin-left: 1.4rem; margin-top: 0.4rem;}
.ms01 .main_banner .left a:hover{background-color: #000000b2; color: #fff; transition: all .5s;}
.ms01 .main_banner .main_slide{width: 49%; position: relative;}
.ms01 .main_banner .main_slide .sw-main{border-radius: 3rem;}
.ms01 .main_banner .main_slide ul{transition-timing-function: linear;}
.ms01 .main_banner .main_slide ul li{}
.ms01 .main_banner .main_slide ul li img{width: 100%;}
.ms01 .main_banner .main_slide .swiper-pagination{bottom: -30px !important; text-align: left; width: fit-content; font-size: 12px;}
.ms01 .main_banner .main_slide .swiper-pagination-bullet{background: none; color: #fff; opacity: 1; padding: 0 1rem; width: auto; height: auto;}
.ms01 .main_banner .main_slide .swiper-pagination-bullet:first-child{padding: 0 0;}
.ms01 .main_banner .main_slide .swiper-pagination-bullet-active{color: #FFE66B;}
.ms01 .main_banner .main_slide .slide_btn{position: absolute; display: flex; bottom: -30px; right: 3px; z-index: 11;}
.ms01 .main_banner .main_slide .slide_btn .btn_next,
.ms01 .main_banner .main_slide .slide_btn .btn_prev,
.ms01 .main_banner .main_slide .slide_btn .btn_pause{background-size: cover; width: 8px; height: 12px; cursor: pointer;}
.ms01 .main_banner .main_slide .slide_btn .btn_next{
    background: url('../img/btn_next.png');
}
.ms01 .main_banner .main_slide .slide_btn .btn_prev{
    background: url('../img/btn_prev.png');
}
.ms01 .main_banner .main_slide .slide_btn .btn_pause{
    background: url('../img/btn_pause.png'); margin: 0 10px;
}
.ms01 .main_banner .main_slide .slide_btn .btn_pause.on{opacity: .5;}
@media screen and (max-width: 1200px){
    
}
@media screen and (max-width: 768px){
    .ms01 .main_banner{text-align: center; justify-content: center;}
    .ms01 .main_banner .left{width: 100%;}
    .ms01 .main_banner .main_slide{margin-top: 30px; width: 100%; max-width: 600px;}
    .ms01 .main_banner .left a{margin: 20px auto 0; padding: 10px 20px;}
    .ms01 .main_banner .main_slide .swiper-pagination{bottom: -20px !important;}
    .ms01 .main_banner .main_slide .slide_btn{bottom: -20px !important;}
    .ms01 .main_banner .main_slide .swiper-pagination-bullet{color: #87B963;}
    .ms01 .main_banner .main_slide .swiper-pagination-bullet-active{color: #3E6829;}
    .ms01 .main_banner .main_slide .slide_btn .btn_next{
        background: url('../img/btn_next_mo.png');
    }
    .ms01 .main_banner .main_slide .slide_btn .btn_prev{
        background: url('../img/btn_prev_mo.png');
    }
    .ms01 .main_banner .main_slide .slide_btn .btn_pause{
        background: url('../img/btn_pause_mo.png'); margin: 0 10px;
    }
}
@media screen and (max-width: 768px){
    /* .ms01 .main_banner .left h3{font-size: 22px;}
    .ms01 .main_banner .left h2{font-size: 45px;}
    .ms01 .main_banner .left p{font-size: 18px;} */
}
@media screen and (max-width: 400px){
    /* .ms01 .main_banner .left h3{font-size: 18px;}
    .ms01 .main_banner .left h2{font-size: 30px;}
    .ms01 .main_banner .left p{font-size: 16px;} */
}


/* quick_menu */
.quick_menu{margin-top: 8rem; display: flex; justify-content: space-between; align-items: center; background-color: #fff; border-radius: 3rem; padding: 4rem; border: 1px solid #eee;}
.quick_menu .title-wrap{display: flex; align-items: center; gap: 10px; width: 30rem;}
.quick_menu .title-wrap img{}
.quick_menu .title-wrap .text{}
.quick_menu .title-wrap .text h2{font-size: 4rem; color: #3E6829; font-weight: 700;}
.quick_menu .title-wrap .text p{font-size: 2rem; color: #000000; }
.quick_menu .quick_btn_wr{display: flex; width: calc(100% - 35rem); justify-content: space-between;}
.quick_menu .quick_btn_wr li{display: block; width: 24%; position: relative; max-width: 200px;}
.quick_menu .quick_btn_wr li:last-child{margin-right: 0;}
.quick_menu .quick_btn_wr li{}
.quick_menu .quick_btn_wr li::after{content: ""; padding-bottom: 100%; display: block;}
.quick_menu .quick_btn_wr li a{position: absolute; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #F0F0F0; width: 100%; height: 100%; border-radius: 50%; transition: all .5s; transform-style: preserve-3d; }
.quick_menu .quick_btn_wr li span{font-size: 2rem; color: #000000; margin-top: 2.4rem;}
.quick_menu .quick_btn_wr li a:hover{transform: rotateY(180deg);}
.quick_menu .quick_btn_wr li a img{height: 7rem;}
.wood_train_img{width: auto; height: 10rem;}
@media all and (max-width: 1200px){
    
}
@media all and (max-width: 1024px){
    .quick_menu{flex-direction: column; text-align: center; padding: 30px 20px;}
    .quick_menu .title-wrap{width: auto;}
    .quick_menu .title-wrap img{display: none;}
    .quick_menu .title-wrap .text h2{margin-bottom: 5px;}

    .quick_menu .quick_btn_wr{width: 100%; margin-top: 20px; gap: 1%; justify-content: center;}
    .quick_menu .quick_btn_wr li{max-width: 180px; }
}
@media all and (max-width: 768px){
    .quick_menu{max-width: 600px; margin: 8rem auto 0;}
    .quick_menu .title-wrap .text h2{}
    .quick_menu .quick_btn_wr{flex-wrap: wrap; gap: 20px 4%; justify-content: center;}
    .quick_menu .quick_btn_wr li{width: 48%; max-width: 250px;}
    .quick_menu .quick_btn_wr li a img{height: 5rem;}
}
/* operation */
.operation{margin-top: 5.8rem;}
.operation ul{display: flex; justify-content: space-between; flex-wrap: wrap;}
.operation ul li{display: flex; align-items: center; flex: 1; gap: 2rem;}
.operation ul li a{display: flex; justify-content: center; align-items: center; gap: 2rem;}
.operation ul li .icon{background-color: #3E6829; border-radius: 50%; width: 7rem; height: 7rem; display: flex; align-content: center; justify-content: center; flex-wrap: wrap;}
.operation ul li .icon img{width: 50%;}
.operation ul li .txt{}
.operation ul li .txt span{color: #3E6829; font-size: 2.4rem;}
.operation ul li .txt h2{color: #fff; font-size: 2.5vw; margin-top: 1rem; font-weight: 700;}
.operation ul li:nth-child(2){margin: 0 2rem; padding: 2rem; border-right: solid 1px #3E6829; border-left: solid 1px #3E6829;}
.operation ul li:last-child .txt h2{font-size: 2rem; font-weight: 500; line-height: 1.5;}
@media all and (max-width: 1200px){

}
@media all and (max-width: 1024px){
    .operation{margin-top: 30px;}
    .operation ul{padding-bottom: 50px; }
    .operation ul li{width: 45%; flex: auto;}
    .operation ul li:nth-child(2){margin: 0; border: none; padding: 3rem 0;}
    .operation ul li .txt h2{font-size: 30px;}
}
@media all and (max-width: 768px){
    .operation ul{max-width: 320px; margin: 0 auto;}
    .operation ul li{width: 100%; }
    .operation ul li .txt h2{font-size: 16px;}
}

/* notice_wr */
.notice_wr{background-color: #FFF1E2; padding: 10rem 0 15rem; margin-top: -2px; position: relative;}
.notice_wr .inner{display: flex; justify-content: space-between;}
.notice_wr .video_wr{width: 52%; border-radius: 20px; overflow: hidden; position: relative;}
.notice_wr .video_wr::after{padding-bottom: 56.25%; content: ""; display: block;}
.notice_wr .video_wr iframe{position: absolute; width: 100%; height: 100%; }
.notice_wr .main_notice{width: 45%;}
.notice_wr .wave{position: absolute; width: 100%; bottom: -5rem;}
.notice_wr .wave img{width: 100%;}
@media all and (max-width: 1200px){

}
@media all and (max-width: 768px){
    .notice_wr{padding: 0; padding-bottom: 80px;}
    .notice_wr .inner{flex-wrap: wrap; max-width: 600px;}
    .notice_wr .video_wr{width: 100%;}
    .notice_wr .main_notice{width: 100%; margin-top: 5rem;}
    .notice_wr .wave{bottom: -25px;}
}
@media all and (max-width: 600px){
    .notice_wr .wave{bottom: -20px;}
}
/* edu_kit */
.edu_kit{padding: 13rem 0;}
.edu_kit .title{font-size: 4rem; font-weight: 700; position: relative; display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 5rem;}
.edu_kit .title img{}
.edu_kit ul{display: flex; justify-content: space-between;}
.edu_kit ul li{position: relative; width: 32%; border-radius: 3rem; color: #fff; overflow: hidden; max-width: 450px;}
.edu_kit ul li::after{content: ""; display: block; padding-bottom: 77%;}
.edu_kit ul li .cont{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 4rem; display: flex; flex-direction: column; justify-content: space-between; }
.edu_kit ul li:first-child{background-color: #FFA443;}
.edu_kit ul li:nth-child(2){background-color: #62B5BE;}
.edu_kit ul li:last-child{background-color: #87B963;}

.edu_kit ul li .top{position: relative; z-index: 1;}
.edu_kit ul li .top h3{font-size: 3rem; font-weight: 700; padding-bottom: 1rem;}
.edu_kit ul li .top span{}
.edu_kit ul li .btm{display: flex; align-items: flex-end; position: relative;}
.edu_kit ul li .btm a{color: #fff; border: solid 1px #fff; padding: 1rem 2.4rem 1rem 4.2rem; border-radius: 100rem; display: flex; align-items: center; z-index: 9; gap: 1rem; position: relative;}
.edu_kit ul li .btm a i{font-size: 2.5rem; content: "→"; position: absolute; right: 0;}
.edu_kit ul li .btm a span{ line-height: 0;}
.edu_kit ul li .btm a:hover{background-color: #fff;}
.edu_kit ul li .btm img{position: absolute; right: -4.1rem; bottom: -4.1rem; max-width: 60%;}
/* .main_kit_img{bottom: 2.4rem !important; right: -98.4rem !important;} */
/* .edu_kit ul li:nth-child(2) .btm img{right: -8rem;} */
/* .edu_kit ul li:last-child .btm img{right: -5.4rem !important;} */
.edu_kit ul li:first-child .btm a:hover{color: #FFA443; transition: all .5s;}
.edu_kit ul li:nth-child(2) .btm a:hover{color: #62B5BE; transition: all .5s;}
.edu_kit ul li:last-child .btm a:hover{color: #87B963; transition: all .5s;}
@media all and (max-width: 1200px){

}
@media all and (max-width: 1024px){
    .edu_kit ul{flex-direction: column; gap: 30px;}
    .edu_kit ul li{width: 100%; max-width: none;}
    .edu_kit ul li::after{padding-bottom: 200px;}
}
@media all and (max-width: 768px){
    
}

/* event_wr */
.event_wr{}
.event_wr .inner{display: flex; justify-content: space-between; flex-wrap: wrap;}
.event_wr .event_cont{width: 50%;}
.event_wr .report_cont{width: 45%;}
@media all and (max-width: 1200px){

}
@media all and (max-width: 1024px){
    .event_wr .inner{gap: 50px;}
    .event_wr .event_cont{width: 100%;}
    .event_wr .report_cont{width: 100%;}
}
@media all and (max-width: 768px){
    
}