/* 서브 gnb */
#sub_gnb{width: 100%; padding: 42px 0; background: #fff;}
#sub_gnb ul {display: flex; gap: 34px; justify-content: center; align-items: center;}
#sub_gnb ul li{width: 16.5%;}
#sub_gnb ul li a{display: flex; justify-content: center; align-items: center; width: 100%; height: 48px; border-radius: 25px; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; box-shadow: 0 4px 4px rgba(0,0,0,0.25); background-color: #fff;}
#sub_gnb ul li a.active{color: #fff; background-color: var(--color-green);}


/* about us 복지관소개 */
.sect-sub .top_banner {display: flex; justify-content: center; align-items: center; width: 100%; height: 20vw; background-size:cover; background-repeat: no-repeat; }
.sect-sub.about-top .top_banner{background-image: url('/theme/hongeun/img/page/about_us_top_banner.jpg'); }
.sect-sub .top_banner h2{color:#fff; font-size: 80px; font-weight: 700; letter-spacing: -0.03em;}
.about-us-wrap .cont-sect {padding: 100px 0;}
.cont-sect .title-wrap {text-align: center;}
.cont-sect .title-wrap .title {position: relative; display: inline; color: #111; font-size: 42px; letter-spacing: -0.03em; z-index: 2;}
.cont-sect .title-wrap .title::before {position: absolute; top: -7px; left: -17px; width: 35px; height: 35px; border-radius: 50%; background-color: var(--color-yellow); z-index: -1; content: '';}
.about-us-wrap .intro-wrap .intro-area{padding-top: 70px; overflow: hidden; }
.about-us-wrap .intro-wrap .intro-area img{width: 100%;}
.about-us-wrap .intro-wrap .col-wrap {display: flex; gap: 50px; padding-top: 50px;} 
.about-us-wrap .intro-wrap .col-wrap .col-left {flex-shrink: 0; width: 300px;}
.about-us-wrap .intro-wrap .col-wrap .col-left p{ color:#333; font-size: 24px; line-height: 1.6;}
.about-us-wrap .intro-wrap .col-wrap .col-left strong{color:#111;}
.about-us-wrap .intro-wrap .col-wrap .col-left span{color: var(--color-green);}
.about-us-wrap .intro-wrap .col-wrap .col-right p{color:#555; font-size: 20px; line-height: 1.6; font-weight: 400;}
.about-us-wrap .intro-wrap .col-wrap .col-right p:nth-child(2){padding: 20px 0;}
.about-us-wrap .intro-wrap .col-wrap .col-right p:last-child{font-weight: 600;}
.about-us-wrap .info-wrap .col-wrap {display: flex; gap: 40px; padding-top: 70px;}
.about-us-wrap .info-wrap .col-wrap .img-area{border-radius: 20px; overflow: hidden;}
.about-us-wrap .info-wrap .col-wrap .img-area img{width: 100%;}
.about-us-wrap .info-wrap .col-wrap .title-area{display: flex; gap: 20px; padding: 25px 0;}
.about-us-wrap .info-wrap .col-wrap .title-area p{color:#333; font-size: 24px; font-weight: 600;}
.about-us-wrap .info-wrap .col-wrap .title-area span{color: #555; font-size: 18px; line-height: 1.6; letter-spacing: -0.03em;}
.about-us-wrap .info-wrap .col-wrap .floor-area li{display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #ccc;}
.about-us-wrap .info-wrap .col-wrap .floor-area.green li:last-child{border-bottom: 0;}
.about-us-wrap .info-wrap .col-wrap .floor-area span{color: #000; font-size: 20px; letter-spacing: -0.03em;}
.about-us-wrap .info-wrap .col-wrap .floor-area .floor{ padding: 8px 10px; border-radius: 5px; font-size: 20px; color: #fff; font-weight: 700;}
.about-us-wrap .info-wrap .col-wrap .floor-area.green .floor{background: var(--color-green); }
.about-us-wrap .info-wrap .col-wrap .floor-area.yellow .floor{background: var(--color-yellow); }
.about-us-wrap .map-wrap .img-area {overflow: hidden;}
.about-us-wrap .map-wrap .img-area img{width: 100%;}
.about-us-wrap .map-wrap .map-desc-area {color: #000; font-weight: 700; line-height: 1.6; letter-spacing: -0.03em;}
.about-us-wrap .map-wrap .map-desc-area li{padding-bottom: 30px;}
.about-us-wrap .map-wrap .map-desc-area li:last-child{padding-top: 30px;}
.about-us-wrap .map-wrap .map-desc-area p{font-size: 30px; padding-bottom: 10px;}  
.about-us-wrap .map-wrap .map-desc-area span{font-size: 22px;}

/* value 핵심가치 */
.value-wrap .title-wrap {text-align: left;}
.value-wrap .cont01-wrap {display: flex; gap: 200px; padding: 100px 0;}
.value-wrap .cont-area {display: flex; gap: 60px;}
.value-wrap .cont-area div{width: 500px; height: 529px; padding: 117px 64px; border-radius: 0 0 20px 0; box-sizing: border-box;}
.value-wrap .cont-area div p{font-size: 40px; font-weight: 700; letter-spacing: -0.03em; padding-bottom: 120px;}
.value-wrap .cont-area div span{font-size: 20px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.6;}
.value-wrap .cont-area div:nth-child(1){color:#fff; background-color: var(--color-green);}
.value-wrap .cont-area div:nth-child(2){color:#222; background-color: var(--color-yellow);}
.value-wrap .cont02-wrap{display: flex; gap: 123px; padding: 150px 0 150px 240px; background-color: #F8F6ED; }
.value-wrap .cont02-wrap .title-wrap {position: relative; flex-shrink: 0; width: 278px;}
.value-wrap .cont02-wrap .title-wrap .swiper-button::after,
.value-wrap .cont02-wrap .title-wrap .swiper-button::before{content:none;}
.value-wrap .cont02-wrap .title-wrap .swiper-button{top: 130px; width: 34px; height: 34px; background-repeat: no-repeat; background-size: cover;}
.value-wrap .cont02-wrap .title-wrap .swiper-button-prev{background-image: url('/theme/hongeun/img/page/value_slide_arr_prev.png');}
.value-wrap .cont02-wrap .title-wrap .swiper-button-next{right: auto; left: 65px; background-image: url('/theme/hongeun/img/page/value_slide_arr_next.png');}
.value-wrap .cont02-wrap .swiper-slide{width: 353px; border-right: 1px solid #FFDD9B;}
.value-wrap .cont02-wrap .swiper-slide div{padding-left: 25px;}
.value-wrap .cont02-wrap .swiper-slide p {color:#333; font-size: 28px; font-weight: 600; letter-spacing: -0.03em;}
.value-wrap .cont02-wrap .swiper-slide span{color: var(--color-green); font-size: 20px; font-weight: 500;}
.value-wrap .cont02-wrap .swiper-slide ul {padding-top: 28px;}
.value-wrap .cont02-wrap .swiper-slide ul li{display: flex; flex-direction: column; gap: 10px; color: #555; font-size: 16px; font-weight: 500;}
.value-wrap .cont03-wrap {display: flex; gap: 149px; padding: 150px 0;}
.value-wrap .cont03-wrap .title-wrap {flex-shrink: 0; width: 230px;}
.value-wrap .cont03-wrap ul{display: flex; gap: 20px;}
.value-wrap .cont03-wrap ul li{ width: 340px; height: 250px; padding: 40px 0 25px; border-radius: 10px; text-align: center; letter-spacing: -0.03em; box-sizing: border-box; box-shadow: 0px 4px 8px rgba(81,67,54,0.15);}
.value-wrap .cont03-wrap ul li .tit{padding-bottom: 5px; color: var(--color-green); font-size: 28px; font-weight: 600; }
.value-wrap .cont03-wrap ul li span{color: #555; font-size: 16px; font-weight: 300;}
.value-wrap .cont03-wrap ul li img{padding-top: 15px;}

/* 재단소개 */
.foundation-wrap .cont-sect{padding: 200px 0;}
.foundation-wrap .col-wrap {display: flex; gap: 80px;}
.foundation-wrap .col-wrap .col-left {flex-shrink: 0; width: 450px;}
.foundation-wrap .col-wrap .col-right p{font-size: 18px; line-height: 1.6;}
.foundation-wrap .col-wrap .col-right .text1{padding-bottom: 15px; font-size: 22px;}
.foundation-wrap .col-wrap .col-right .text1 span{color: var(--color-green); font-size: 40px; letter-spacing: -0.03em; font-weight: 600; }
.foundation-wrap .col-wrap .col-right .text3,
.foundation-wrap .col-wrap .col-right .text4{padding-top: 20px;}
.foundation-wrap .col-wrap .col-right .text4 span{font-weight: 600;}

/* 직원소개 */
.member-wrap .cont-sect {padding: 100px 0;}
.member-wrap .cont-sect .member-area{display: flex; gap: 150px;}
.member-wrap .cont-sect .member-area .desc-area { width: 100%;}
.member-wrap .cont-sect .member-area .desc-area > ul > li{display: flex; gap: 10px; align-items: start; padding: 40px 0; border-bottom:1px solid #ccc;}
.member-wrap .cont-sect .member-area .member-name{width: 220px; flex-shrink: 0; padding-right: 10px; font-size: 22px; font-weight: 600; line-height: 1.5;}
.member-wrap .cont-sect .member-area .member-name span{color: var(--color-green); font-size: 18px;}
.member-wrap .cont-sect .member-area .member-role{color: #000; font-size: 18px; line-height: 1.8;}

/* 조직도 */
.organization-wrap .pc-img{display: block;}
.organization-wrap .mo-img{display: none;}
.organization-wrap img{width: 100%;}

/* 연혁 */
.history-wrap .cont-sect {padding: 100px 0;}
.history-wrap .history-tab {display: flex; align-items: center; justify-content: space-between; width: 100%; border-radius: 50px; margin-bottom: 100px; padding: 20px; box-shadow: 3px 3px 3px rgba(0,0,0,0.15); }
.history-wrap .history-tab li{width: 25%;}
.history-wrap .history-tab li a{ display: block; width: 100%; padding: 16px 0; color: #555; border-radius: 25px; font-size: 20px; text-align: center; line-height: 1; letter-spacing: -0.03em; transition: all 0.3s;}
.history-wrap .history-tab li a.active{color: #fff; background: var(--color-green);}
.history-wrap .history-img-area img{ width: 100%;}

@media(max-width: 1440px){

    /* 핵심가치 */
    .value-wrap .cont01-wrap {gap: 50px; padding: 100px 40px;}
    .value-wrap .cont-area div {width: 50%;}
    .value-wrap .cont03-wrap {gap: 50px; padding: 100px 40px;}
    .value-wrap .cont02-wrap {padding: 150px 0 150px 40px;}
    .value-wrap .cont03-wrap ul li{width: 23vw;}

}
@media(max-width: 1024px){
    /* 서브 gnb */
    #sub_gnb{padding: 22px 0;}
    #sub_gnb ul {gap: 14px; }    
    #sub_gnb ul li a{ height: 30px; font-size: 14px;}


    /* about us 복지관소개 */
    .sect-sub .top_banner {height: 25vw;}
    .sect-sub .top_banner h2{ font-size: 2rem;}
    .about-us-wrap .cont-sect {padding: 50px 0;}
    .cont-sect .title-wrap .title {font-size: 1.5rem;}
    .about-us-wrap .intro-wrap .intro-area {padding-top: 40px;}
    .about-us-wrap .intro-wrap .col-wrap{flex-direction: column; gap: 20px; padding-top: 20px;}
    .about-us-wrap .intro-wrap .col-wrap .col-left p{font-size: 20px;}
    .about-us-wrap .intro-wrap .col-wrap .col-right p{font-size: 16px;}
    .about-us-wrap .info-wrap .col-wrap {flex-direction: column;}
    .about-us-wrap .info-wrap .col-wrap .title-area p {font-size: 20px;}
    .about-us-wrap .info-wrap .col-wrap .title-area span{font-size: 16px;}
    .about-us-wrap .info-wrap .col-wrap .floor-area .floor,
    .about-us-wrap .info-wrap .col-wrap .floor-area span {font-size: 16px;}
    .about-us-wrap .map-wrap .map-desc-area p{font-size: 20px;}
    .about-us-wrap .map-wrap .map-desc-area span{font-size: 16px;}

    /* 핵심가치 */
    .value-wrap .cont01-wrap{flex-direction: column; gap: 40px; padding: 50px 0;}
    .value-wrap .title-wrap{padding-left: 20px;}
    .cont-sect .title-wrap .title::before {width: 25px; height: 25px;}
    .value-wrap .cont-area{gap: 40px;}
    .value-wrap .cont-area div{width: 50%; height: auto; padding: 8% 5%;}
    .value-wrap .cont-area div p{font-size: 24px; padding-bottom: 15%;}
    .value-wrap .cont-area div span{font-size: 14px;}
    .value-wrap .cont02-wrap {gap: 50px; padding: 100px 15px;}
    .value-wrap .cont02-wrap .title-wrap{width: auto;}
    .value-wrap .cont02-wrap .swiper-slide{width: 250px;}
    .value-wrap .cont02-wrap .swiper-slide p {font-size: 22px;}
    .value-wrap .cont02-wrap .swiper-slide span{font-size: 16px;}
    .value-wrap .cont03-wrap {flex-direction: column; gap: 40px; padding: 50px 0;}
    .value-wrap .cont03-wrap ul{flex-direction: column;}
    .value-wrap .cont03-wrap ul li{width: 100%;}
    .value-wrap .cont03-wrap ul li .tit{font-size: 24px;}

    /* 재단소개 */
    .foundation-wrap .cont-sect{padding: 100px 0;}
    .foundation-wrap .col-wrap {flex-direction: column; gap: 40px;}
    .foundation-wrap .col-wrap .col-left {width: 100%;}
    .foundation-wrap .col-wrap .col-left img{width: 100%;}
    .foundation-wrap .col-wrap .col-right .text1 span {font-size: 28px;}
    .foundation-wrap .col-wrap .col-right .text1 {font-size: 18px;}
    .foundation-wrap .col-wrap .col-right p{font-size: 16px;}

    /* 직원소개 */
    .member-wrap .cont-sect {padding: 50px 0;}
    .member-wrap .cont-sect .member-area {flex-direction: column; gap: 50px;}
    .member-wrap .cont-sect .member-area .desc-area > ul > li{padding: 20px 0;}
    .member-wrap .cont-sect .member-area .member-name {width: 21vw; font-size: 1.1rem;}
    .member-wrap .cont-sect .member-area .member-name span {display: block; font-size: 0.8rem;}
    .member-wrap .cont-sect .member-area .member-role{font-size: 1rem;}

    /* 조직도 */
    .organization-wrap .pc-img{display: none;}
    .organization-wrap .mo-img{display: block;}

    /* 연혁 */
    .history-wrap .cont-sect{padding: 50px 0;}
    .history-wrap .history-tab {padding: 10px; margin-bottom: 50px;}
    .history-wrap .history-tab li a {font-size: 0.8rem; padding: 10px 0;}
    
}
@media(max-width: 520px){
    /* 서브 gnb */
    #sub_gnb{padding: 10px 0;}
    #sub_gnb ul {justify-content: start; overflow-x: auto; width: 100%; padding: 10px 20px; scrollbar-width: none; }
    #sub_gnb ul::-webkit-scrollbar {display:none;}  
    #sub_gnb ul li{width: 80px; flex-shrink: 0;}
}