@charset "utf-8";

html, body {font-family: 'Pretendard', sans-serif;overflow-x: hidden;}
body {line-height: inherit;margin: 0;}
*, :after, :before {border: 0 solid #e5e7eb;box-sizing: border-box;}

.layout {overflow:hidden;width:100%;min-width:1284px}
.header_area,.section_area,.footer_area {width:100%;clear:both}
.header_area {position:fixed;top:0;height:90px;z-index:99999;background-color:#fff;/*border-bottom: 1px solid #e9e9e9;*/}
.section_area {margin-top:100px}

.header_area{width: 100%;background: rgba(255, 255, 255, 0.4);  backdrop-filter: blur(20px);position: fixed;top: 0;left: 0;z-index: 9999;transition: all .2s ;}
.header_area:hover{background-color: #fff;}
.header_wrap{width: 100%;position: relative;height: 90px;} 

.header {max-width: 1624px;;height:90px;margin:auto;padding: 0 20px;}
.header .logo {overflow:hidden;float:left;padding:0;margin: 0;}
.header .logo a {width:459px;height:90px}
.header .logo a img {display:block;padding:20px 0;height: 90px;}

.wrap {width: 100%;margin: auto;position: relative;box-sizing: border-box;}
.wrap img{width: 100%;height: 100%;}
.hidden{display: none;}

/* 메인배너 */
.main_wrap, main {margin: 7rem auto auto;max-width: 1600px;padding: 0 20px 3rem;position: relative;width: 100%;}
.main_wrap {padding: 0;}
.main_inner {width: 100%;}
.main_banner {display: grid;position: relative;width: 100%;max-width: 1600px;aspect-ratio: 1600 / 555;border-radius: 0 50px 50px 50px;overflow: hidden;margin: 0 auto;}

/* ===== 슬라이더 스타일 ===== */
.slider_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slider_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.slide.active {
    opacity: 1;
    visibility: visible;
}

.slide .banner_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slide .banner_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 6s ease-out;
}

.slide.active .banner_box img {
    transform: scale(1.05);
}

.slide .banner_text {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding-top: clamp(30px, 5vw, 70px);
    padding-left: clamp(20px, 5vw, 80px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out 0.3s, transform 0.6s ease-out 0.3s;
}

.slide.active .banner_text {
    opacity: 1;
    transform: translateY(0);
}

.slide .banner_text .title {
    font-size: clamp(24px, 3vw, 50px);
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.4;
    text-shadow: 0 2px 5px rgba(32, 21, 16, 0.6);
    color: white;
}

.slide .banner_text .subtitle {
    position: relative;
    font-size: clamp(12px, 1.5vw, 24px);
    margin: 0;
    opacity: 0.9;
    padding-left: 105px;
    color: white;
    font-weight: 300;
    text-shadow: 0 2px 5px rgba(32, 21, 16, 0.5);
}

.slide .banner_text .subtitle::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 90px;
    height: 2px;
    background-color: white;
}

/* 슬라이더 네비게이션 버튼 */
.slider_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
}

.slider_container:hover .slider_btn {
    opacity: 1;
}

.slider_btn:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-50%) scale(1.1);
}

.slider_btn span {
    color: #333;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
}

.slider_prev {
    left: 20px;
}

.slider_next {
    right: 20px;
}

/* 슬라이더 인디케이터 */
.slider_indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.7);
}

.indicator.active {
    background: #f68b1e;
    border-color: #f68b1e;
    transform: scale(1.2);
}

/* 프로그레스 바 (선택 사항) */
.slider_progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #4db848, #f68b1e);
    width: 0%;
    z-index: 10;
    animation: progressBar 5s linear infinite;
}

@keyframes progressBar {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* ===== 슬라이더 스타일 끝 ===== */

.arrow_box {grid-area: 1 / 1;justify-self: end;align-self: end;margin: 40px;z-index: 20;position: relative;}
.circle_btn {display: flex;justify-content: center;align-items: center;width: 100px;height: 100px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.5);text-decoration: none;transition: background-color 0.2s, transform 0.2s;}
.circle_btn .inner_circle {display: flex;justify-content: center;align-items: center;width: 60px;height: 60px;border-radius: 50%;background-color: #fff;transition: background-color 0.2s;}
.circle_btn .inner_circle .arrow {color: #676565;font-size: 26px;transform: rotate(-45deg);display: inline-block; transition: color 0.2s;}
.circle_btn:hover {background-color: rgba(246, 165, 30, 0.5)}
.circle_btn:hover .inner_circle {background-color: #f68b1e;}
.circle_btn:hover .arrow {color: white;}

.section_inner {margin: auto;max-width: 1600px;padding: 0 20px;position: relative;width: 100%;}
.section_title {margin-bottom:80px;text-align: center;}
.section_title h2 {margin: 0 0 30px;font-size: 52px;color: #4db848;font-weight: bold;}
.section_title h2 .dot {color: #f68b1e}
.section_title p {color: #333333;font-weight: 400;font-size: 20px;line-height: 1.4;margin: 0;}
.wrap .section_1 {background-color: #f7fdf8;margin-top: 0;padding: 90px 0 100px;}
.section_1 .about_box {max-width: 1600px;margin: 0 auto;display: flex;flex-direction: column;}
.section_1 .ab_list_top {display: grid;grid-template-columns: 66% 31%;column-gap: 40px;margin: 0;margin-bottom: 40px;padding: 0;}
.section_1 .ab_list_bottom {display: grid;grid-template-columns: 31% 66%;column-gap: 40px;margin: 0;padding: 0;}
.section_1 .about_box ul li {height: 370px;border-radius: 30px;border: 1px solid #e1e1e1;overflow: hidden;position: relative;}
.section_1 .about_box ul li img {width: 100%;height: 100%;object-fit: cover;display: block;transition: transform 0.3s ease;}
.section_1 .about_box ul li:hover img {transform: scale(1.03);}

.wrap .section_2 {margin-top: 0;padding: 90px 0 100px;}
.section_2 .point_box ul {display: flex;margin: 0;padding: 0;justify-content: space-between}
.section_2 .point_box ul li {position: relative;list-style: none;width: 24%;background-color: #f4f5f6;height: 320px;border-radius: 30px;padding: clamp(20px, 3vw, 50px) clamp(15px, 2vw, 40px);box-sizing: border-box;display: flex;flex-direction: column;justify-content: flex-start;}
.section_2 .point_box ul li p {margin: 0;color: #676565;font-size: clamp(16px, 2vw, 30px);font-weight: bold;line-height: 1.4;}
.section_2 .point_box ul li img {width: 120px;height: 110px;}
.section_2 .point_box ul li .point_bottom {margin-top: auto;align-self: flex-end; }

.section_3 {display: flex;justify-content: space-between;max-height: 1600px;position: relative;}
.section_3 .map_left {width: 60%;}
.embed-container {position: relative;padding-bottom: 56.25%;height: 100%;overflow: hidden;max-width: 100%;}
.embed-container iframe, .embed-container object, .embed-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.section_3 .map_right {width: 40%;background-color: #4db848;padding: clamp(40px, 5vw, 100px) clamp(20px, 5vw, 80px);}
.section_3 .map_right .map_title_box {color: #fff;text-align: left;}
.section_3 .map_right .map_title_box h1 {font-size: clamp(28px, 4vw, 52px);margin: 0 0 3.75rem 0;}
.section_3 .map_right .map_title_box h1 span {color:#f68b1e}
.section_3 .map_right .map_title_box .map_title {margin-bottom: clamp(20px, 3vw, 50px);}
.section_3 .map_right .map_title_box .map_title h3 {font-size: clamp(18px, 2vw, 30px);margin: 0 0 1.25rem 0;border-left: 3px solid #fff;padding-left: 10px;}
.section_3 .map_right .map_title_box .map_title p {font-size: clamp(14px, 1.5vw, 24px);margin: 0;line-height: 1.4;font-weight: 300;}

.footer_area {background-color: #f4f5f7;margin-top: 0;padding:0;}
.footer {margin: auto;max-width: 1600px;padding: 0 20px;position: relative;width: 100%;}
.footer .top_area {padding: 90px 0 70px;}
.footer .top_area ul {display: flex;margin: 0;padding: 0;justify-content: space-between;flex-wrap: wrap}
.footer .top_area ul li {margin-bottom: 30px;position: relative;list-style: none;width: 49%;height: 125px;box-sizing: border-box;}
.footer .top_area ul li a {background-color: #fff;border-radius: 20px;transition: 0.25s;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);}
.footer .top_area ul .bar_blog a:hover {background-color: #03c75a;}
.footer .top_area ul .bar_blog a:hover .sns_img img {content: url("/images/main/sns_img01_1.png");}
.footer .top_area ul .bar_band a:hover {background-color: #28c737}
.footer .top_area ul .bar_band a:hover .sns_img img {content: url("/images/main/sns_img02_2.png");}
.footer .top_area ul .bar_dg a:hover {background-color: #ff6f0f}
.footer .top_area ul .bar_dg a:hover .sns_img img {content: url("/images/main/sns_img03_3.png");}
.footer .top_area ul .bar_insta a:hover {background-color: #fe0971}
.footer .top_area ul .bar_insta a:hover .sns_img img {content: url("/images/main/sns_img04_4.png");}
.footer .top_area ul li a {display: block;width: 100%;height: 100%;padding: 0 30px;text-decoration: none;color: inherit;display: flex;justify-content: space-between;align-items: center;}
.footer .top_area ul li p {margin: 0;color: #676565;font-size: clamp(16px, 2vw, 30px);font-weight: bold;transition: 0.25s;}
.footer .top_area ul li:hover p {color: #fff;}
.footer .top_area ul li .sns_img {border-radius: 50%;background-color: #f4f5f6;width: 80px;height: 80px;display: flex;justify-content: center;align-items: center;transition: 0.25s;}
.footer .top_area ul li:hover .sns_img {background-color: #fff;}
.footer .top_area ul li:hover .sns_img img {transition: 0.25s ease-in-out;}
.footer .bottom_area {padding: 50px 0;border-top: 2px solid #e9e9e9;}
.footer .bottom_area .f_logo {margin-bottom:30px;}
.footer .txt_company{font-size:18px;line-height:1.5;letter-spacing:0;margin: 0;font-weight: 300;color: #444446;}

@media screen and (max-width:1024px) {
    .header_area {height:80px;}
    .header {height: 80px;}
    .header .logo a img {display: block;padding: 20px 0;height: 80px;}
    .main_banner{height: 40vh;}
    
    /* 슬라이더 반응형 */
    .slider_btn {
        width: 40px;
        height: 40px;
    }
    .slider_btn span {
        font-size: 20px;
    }
    .slider_indicators {
        bottom: 20px;
    }
    .indicator {
        width: 10px;
        height: 10px;
    }
}

@media screen and (max-width:768px) {
    .slide .banner_text {padding: 30px 30px 0px 20px;}
    .slide .banner_text .title {font-size: 24px;}
    .slide .banner_text .subtitle {padding-left: 0;font-size: 1rem;}
    .slide .banner_text .subtitle::before {width: 2rem;display: none;}
    .arrow_box {margin: 30px 20px;}
    .circle_btn {width: 90px;height: 90px;}
    .main_wrap, main {margin-top: 5.5rem;;}
    .header_area {height:65px;}
    .header {height: 65px;}
    .header .logo a img {display: block;padding: 15px 0;height: 65px;}
    .section_title {margin-bottom: 40px;font-size: 24px;}
    .section_title  p {font-size: 15px;}
    .section_title h2 {font-size: 32px;margin-bottom: 20px;}
    .wrap .section_1 {padding: 40px 0 80px;}
    .wrap .section_2 {padding: 40px 0 60px;}
    .section_1 .ab_list_top {grid-template-columns:100%;margin-bottom: 0;}
    .section_1 .about_box ul li {height: 20rem;margin-bottom: 2rem;}
    .section_1 .ab_list_bottom {grid-template-columns:100%;margin-bottom: 0;}
    .section_1 .ab_list_bottom li:last-child {margin-bottom: 0;}
    .section_2 .point_box ul {flex-wrap: wrap}
    .section_2 .point_box ul li {width: 49%;height: 15rem;margin-bottom:1rem;}
    .section_2 .point_box ul li p {font-size: 1.4rem;}
    .section_3  {flex-wrap: wrap;}
    .section_3 .map_left {width: 100%;}
    .section_3 .map_right {width: 100%;}
    .section_3 .map_right .map_title_box h1 {font-size: 52px;margin-bottom: 2rem;}
    .section_3 .map_right .map_title_box .map_title {margin-bottom: 2.5rem;}
    .section_3 .map_right .map_title_box .map_title:last-child {margin-bottom: 0;}
    .section_3 .map_right .map_title_box .map_title h3 {font-size: 1.8rem;}
    .section_3 .map_right .map_title_box .map_title p {font-size: 1.4rem;}
    .footer .top_area {padding:5rem 0 4rem}
    .footer .top_area ul li {width: 100%;}
    .footer .top_area ul li p {font-size: 1.6rem;}
    
    /* 슬라이더 반응형 */
    .slider_btn {
        width: 36px;
        height: 36px;
        opacity: 1;
    }
    .slider_prev {
        left: 10px;
    }
    .slider_next {
        right: 10px;
    }
    .slider_indicators {
        bottom: 15px;
        gap: 8px;
    }
    .indicator {
        width: 8px;
        height: 8px;
    }
}

@media screen and (max-width:500px) {
    .section_2 .point_box ul li {width: 100%;padding: 25px;}
    .section_3 .map_right {padding: 30px 20px;}
    .section_3 .map_right .map_title_box h1 {font-size: 28px;margin-bottom:20px;}
    .section_3 .map_right .map_title_box .map_title {margin-bottom: 25px;}
    .section_3 .map_right .map_title_box .map_title:last-child {margin-bottom: 0;}
    .section_3 .map_right .map_title_box .map_title h3 {font-size: 22px;margin-bottom:15px;}
    .section_3 .map_right .map_title_box .map_title p {font-size: 18px;}
    .footer .top_area {padding: 50px 0 30px;}
    .footer .top_area ul li a {padding: 0 20px;}
    .footer .top_area ul li p {font-size: 18px;}
    .footer .bottom_area {padding: 40px 0;}
    .footer .top_area ul li .sns_img {width: 60px;height: 60px;}
    .footer .top_area ul li .sns_img img {width: 40%}
    .footer .bottom_area .f_logo {margin-bottom: 20px;}
    .footer .bottom_area .f_logo img {width: 100%;}
    .footer .txt_company {font-size: 14px;}
    
    /* 슬라이더 반응형 */
    .slider_btn {
        width: 32px;
        height: 32px;
    }
    .slider_btn span {
        font-size: 18px;
    }
    .slider_indicators {
        bottom: 10px;
        gap: 6px;
    }
}