/**//*상단 메뉴*/
header{padding: 2rem 0; transition: 0.3s ease;}
header.fixed{position: fixed; padding: 0.5rem 0; top: 0; left: 0; width: 100%; z-index: 2; background-color: #fff; border-bottom: 1px solid #eee; transition: 0.3s ease;}
header h1 img{height: 45px; max-height: 45px!important; transition: 0.3s ease;}
header.fixed h1 img{height: 40px; transition: 0.3s ease;}

header>.mobile{display: none;}

@media screen and (min-width: 1200px) {
    #gnb {font-size: 1.1em;}
    #gnb .depth1 {list-style: none;padding: 0;margin: 0;display: flex;align-items: center;}
    #gnb .depth1 > li {position: relative;padding: 10px 20px;}
    #gnb .depth1 > li > a {text-decoration: none;padding: 10px 0;display: block;font-size: 1.2em;font-weight: 600;position: relative; height: 40px}
    #gnb .depth1 > li > a:after{content: ""; display: block; width: 100%; height: 0px; border-radius: 10px; background-color: #2E7D32; transition: all 0.3s; opacity: 0;}
    #gnb .depth1 > li:hover > a {font-weight: 600;color: #000000; padding: 0; transition: all 0.3s;}
    #gnb .depth1 > li:hover > a:after{width: 100%; height: 4px; opacity: 1; margin-top: 6px;}

    #gnb .depth1 > li > a.txt_orange:after{background: #FF6225!important}

    /*#gnb .depth1 > li > a.txt_color:after{background: #2E7D3212;height: 20px;opacity: 1;position: absolute;bottom: 0;width: 120%;left: 50%;transform: translateX(-50%);}
    #gnb .depth1 > li:hover > a.txt_color{}
    #gnb .depth1 > li:hover > a.txt_color:after{margin: 0;}*/


    #gnb .depth2-wrapper {display: none;position: absolute;top: 80%;left: 50%;transform: translateX(-50%); z-index: 1000;}
    #gnb .depth2 {list-style: none;padding: 0;margin: 0;border-radius: 10px;border: 1px solid #eee;overflow: hidden;background-color: #fff;width: max-content;}
    #gnb .depth2 li a {text-decoration: none;padding: 12px 20px;white-space: nowrap; /* 텍스트 줄 바꿈 방지 */display: block;width: 100%;text-align: center;}  .depth2 li:not(:last-child) a{border-bottom: 1px dashed #eeeeee;}
    #gnb .depth2 li a:hover {background-color: #eeeeee56;color: #2E7D32;font-weight: 600;}
    #gnb .mobile_my{display: none;}
}


.tnb > a{margin-left: 6px;}
.tnb .hd_count{display: none; /*background: #2E7D3225; padding: 4px 1rem; border-radius: 10px;*/}
.tnb .hd_count li{line-height: 1.2em;}
.tnb > ul{margin-right: 10px;}
.tnb .mobile{display: none;}
.mobile_menu{display: none;}

#wrapper{max-width: 1500px; margin: 0 auto;}
.lnb_wrapper{display: grid; grid-template-columns: 220px 1fr; gap: 60px;}
.container{padding: 0;margin: 0;}

.lnb .mypage{border-radius: 20px; background-color: #eeeeee56; text-align: center; padding: 3rem 1rem; margin-bottom: 10px;}
.lnb .mypage p{font-size: 1.15em;}
.lnb .mypage span{font-size: 0.9em;}
.lnb > ul{padding:0 1rem; margin-bottom: 20px;}
.lnb a{font-size: 1.1em; display:flex; align-items: center; justify-content: space-between; line-height: 3em; border-bottom: 1px solid #eee;}
.lnb a:after{content: "\f054"; font-family: "Font Awesome 6 Pro"; font-weight: 400; font-size: 0.8em; opacity: 0.8;}
.lnb a.active{color: #2E7D32; font-weight: 600; border-bottom: 1px solid #2E7D3256;}

/*하단*/
footer{padding: 2rem 0;}
.fnb{ border-bottom: 1px solid #eee; padding: 2rem 0; font-size: 1.1em;}
.fnb a{font-weight: 600;}
.copy{padding: 2rem 0;}
.copy h1{font-weight: 600; font-size: 1.1em;}
.copy ul{margin: 6px 0}
.copy li{margin-right: 10px; display: inline-block;}

@media screen and (max-width: 1200px) {
    header{padding: 1rem 3rem;}
    header>.mobile{display: flex; align-items: center; justify-content: space-between; gap: 4px; padding-top: 0px;}
    header>.mobile>a{width: 100%;}
    header h1 img{height: 35px;}

    .tnb > ul{display: none!important;}
    .tnb .btn_colorline{display: none;}
    .tnb .hd_count{display: block;}
    .tnb .mobile{display: inline-block;}
    .tnb .btn_line{display: none}
    .mobile_menu{display: block;}
    .mobile_menu i{font-size: 1.8em; height: 35px; line-height: 35px; width: 30px; text-align: center; color: #333333;}

    /*모바일 메뉴*/
    #gnb {position: fixed;right: -90%; /* Hide it outside the screen */top: 0;width: 90%;height: 100%;background-color: #fff;z-index: 1000;transition: right 0.3s ease-in-out; padding: 1rem; overflow-y: auto; max-width: 400px;}
    #gnb.open {right: 0; z-index: 9999; /* Slide in the menu */}
    .overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 2;}
    .overlay.show {display: block;}

    #gnb .depth1{border-bottom: 1px solid #eee;}
    #gnb .depth1 > li > a{font-size: 1.2em;font-weight: 600;border-top: 1px solid #eee; padding: 1.2rem 1rem;display: flex; align-items: center;}
    #gnb .depth1 > li > a:before{display: inline-block;content: "";width: 3px;height: 14px;background-color: #2E7D32;border-radius: 6px;margin-right: 6px;}
    #gnb .depth2{padding: 1rem 1.6rem; background-color: #2E7D3210; border-radius: 15px; margin-bottom: 1rem; display: grid; grid-template-columns: 1fr 1fr;}
    #gnb .depth2 a:before{content: ""; display: inline-block; width: 4px; height: 4px; background-color: #2E7D3256; margin-right: 6px; vertical-align: middle; border-radius: 50%;}
    #gnb .mobile_my{display: block; padding: 1rem}
    #gnb .mobile_my .btn{margin-bottom: 0;}
    #gnb .mobile_my .close-btn{font-size: 2em;}
    #gnb .lnb{margin-top: 10px;}
    #gnb .lnb .mypage{padding-top: 10px; padding-bottom: 10px;}
    #gnb .lnb .mypage span{color: #333333}
    #gnb .lnb a{border-bottom: 0; font-size: 0.9em; line-height: 1.8em; display: flex; align-items: center;}
    #gnb .lnb a:after{content: ""; width: 1px; height: 12px; background-color: #ccc; display: inline-block; margin: 0 4px;}
    #gnb .lnb a:last-child:after{display: none;}

    .container{padding-left: 1rem; padding-right: 1rem;}

    .fnb > .flex{display: block!important;}
    .fnb > .flex li{display: inline-block;}

    .lnb_wrapper{display: block!important;}
    .lnb_wrapper .lnb{display: none;}

    #wrapper h3.flex span.txt14{font-size: 12px;}


}
@media screen and (max-width: 992px) {
    header {padding: 1rem;}
}
@media screen and (max-width: 768px) {}




/*메인*/

.main-slider{max-width: 1670px; height: 400px; max-height: 400px; margin: 0 auto; position: relative; z-index:1; padding: 0 35px;}
.main-slider .main-swiper {width: 100%;height: 100%; border-radius: 20px; overflow: hidden;}
.main-slider .swiper-slide {text-align: center;font-size: 18px;background: #fff; display: flex;justify-content: center;align-items: center;}
.main-slider .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
.main-slider .swiper-slide img.mobile{display: none;}
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev{background-color: #fff!important; border-radius: 50%; opacity: 1; box-shadow:none;
width: 70px!important; height: 70px!important; top: 50%; transform: translateY(-50%); z-index: 2;}
.main-slider .swiper-button-next:after,
.main-slider .swiper-button-prev:after{color: #555555; font-size: 1.4em!important;}
.main-slider .swiper-button-next{right: 0px;}
.main-slider .swiper-button-prev{left: 0px;}
.main-slider .swiper-pagination-fraction{color: #fff;}

main section:not(:last-of-type){margin-bottom: 4rem}
.main-list > h3 {font-size:1.6em; font-weight: 600; color: #333333; margin-bottom: 40px;}
.main-list > h3 > i {background-color: #2E7D32; color: #fff; border-radius: 50%; width: 22px; height: 22px; text-align: center;line-height: 22px!important; font-size: 11px;  margin-right: 4px;}
/**/
.grid-list ul {gap: 40px 20px;display: grid;width: 100%;box-sizing: border-box;}
.grid-list li.empty {grid-column: 1 / -1;}
.grid-list li {cursor: pointer;max-width: 100%;width: 100%;box-sizing: border-box;overflow: hidden;}
.grid-list .area-text {margin-top: 16px;padding: 0 10px;display: block;width: 100%;box-sizing: border-box;}
.grid-list .area-text .title{display:inline-block; width:100%; overflow: hidden; text-overflow: ellipsis; vertical-align:middle; white-space: nowrap;}
.grid-list .area-text .info span{display: inline-block; white-space: nowrap;}
.grid-list .area-text .exp {color: #70707070;margin-top: 6px;display: inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;box-sizing: border-box; /* 패딩이나 여백 포함 */display: none;}
.grid-list .area-img {aspect-ratio: 3/2;width: 100%;overflow: hidden; position: relative;}
.grid-list .area-img .fa-heart{position: absolute;right: 12px;top: 12px;}
.grid-list .more{text-align: center;}
.btn-more{width: 80px; height: 80px; color: #333333; border-radius: 50%; border: 2px solid #333333; text-align: center; align-items: center; display: flex; justify-content: center; font-size: 2em; margin: 60px auto;}
.btn-more:hover{transform: scale(1.2); transition: transform 0.3s ease; background-color:#2E7D32; color: #fff; border: 0;}
@media screen and (max-width: 1200px) {
    .inner {padding: 1rem 3rem}
}
@media screen and (max-width: 992px) {
    .signup .box-gray .grid2,
    .sign_form .box-gray .grid2{grid-template-columns: 1fr!important;}

    .main-slider{height: auto; padding: 0 1rem; aspect-ratio:3/1;}
    .main-slider .swiper-button-next,
    .main-slider .swiper-button-prev{display: none;}

    .sub-banner{aspect-ratio:4/1; width: 100%; height: auto; padding: 0 1rem;}

    .grid-list .grid{grid-template-columns: repeat(2, 1fr);}
    .grid-list ul{gap: 20px 10px;}
    .grid-list .area-text .title{font-size: 1.3em;}
    .grid-list .area-text .info{font-size: 0.9em;}
    .grid-list .area-text .exp{margin-top: 0; font-size: 0.9em;}

    .btn-more{width: 50px; height: 50px; font-size: 1.2em; margin: 20px auto 0;}
}
@media screen and (max-width: 768px) {
    .inner{padding: 1rem}
}