@charset "utf-8";

/* 메인 : 공통 */
.page-main{display:flex; flex-wrap:wrap; gap:7.4rem 3.8rem; padding-top:4rem;}
.sec-main{position: relative;}
.page-main .sec-title{font-weight:600; font-size:2rem; font-family: 'Pretendard', sans-serif; margin-bottom:0.5em;}
.page-main .sec-desc{font-size:1.7rem; font-family: 'Pretendard', sans-serif; color:#8F8F8F; margin-bottom:2.8rem;}
.page-main .more{font-size:1.5rem; color:#888; letter-spacing:-0.05em;display:flex; justify-content: space-between; margin-top:2.6rem;}
.page-main .more .more-btn{padding:0 1.6rem 0 1.2rem; display:flex; align-items: center; letter-spacing: -0.065em;}
.page-main .more .more-btn:after{content:""; display:block; width:0.7rem; height:0.7rem; border-bottom:1px solid #777; border-right:1px solid #777; transform: rotate(-45deg); margin:-0.18rem -1.2rem 0 0.7rem}
.page-main .swiper-container{position:relative;}
.page-main .swiper-control .arrow{display:block; background-size:100% auto; background-repeat:no-repeat; background-position:center; width:3.6rem; height:3.6rem; border-radius:50%; box-shadow:0 8px 6px rgba(0,0,0,0.16); position:absolute; top:50%; transform:translateY(-50%); z-index:90;}
.page-main .swiper-control .arrow-left{background-image:url('../img/main/icon-arrow-left.svg'); left:-1.8rem;}
.page-main .swiper-control .arrow-right{background-image:url('../img/main/icon-arrow-right.svg'); right:-1.8rem;}
.page-main .swiper-control .arrow.swiper-button-disabled{display:none;}

/* 메인 : 그리드 */
.m-sec-1, .m-sec-3, .m-sec-5{width:calc(100% - 44.8rem)}
.m-sec-2, .m-sec-4, .m-sec-6{width:41rem}

/* 메인 : 섹션1 */
.m-sec-1 .slide-item{display:block; width:100%; border-radius:5px; overflow: hidden; background:#f8f9fa; position: relative; max-height:360px;}
.m-sec-1 .slide-item:before{content:""; display:block; width:100%; height: 0; padding-bottom:46.1539%;}
.m-sec-1 .slide-item img{width:100%; height:100%; position: absolute; top:0; left:0; object-fit:contain;} 
.m-sec-1 .slide-item .empty{width:100%; height:100%; position: absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; color:#888}
.m-sec-1 .swiper-pager{display:flex; align-items: center; justify-content: center; gap:8px; position:absolute; bottom:-3rem; left:50%; transform:translateX(-50%)}
.m-sec-1 .swiper-pager .swiper-pagination-bullet{background:#ddd; width:0.8rem; height:0.8rem; opacity: 1;}
.m-sec-1 .swiper-pager .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#0565F4; width:3rem; border-radius: 9999px;}

/* 메인 : 섹션2 */
.m-sec-2{display:flex; gap:1rem;}
.m-sec-2 .talk-banner{display:block; width:100%; border-radius: 8px; overflow:hidden; background-size:100% auto; background-repeat: no-repeat; background-position: right bottom; position: relative; font-size:1.4rem; font-weight:bold;}
.m-sec-2 .talk-banner.blue{background-color:#E2F1FF; background-image: url('../img/main/talk-blue.png') }
.m-sec-2 .talk-banner.yellow{background-color:#FFF9E3; background-image: url('../img/main/talk-yellow.png') ;}
.m-sec-2 .talk-banner .talk-content{position: absolute; left:0; top:0; width:100%; padding:4rem 3rem;}
.m-sec-2 .count{position: absolute; right:1.4rem; top:1.8rem; width:4.8rem; height:2.4rem; border-radius:9999px; color:#fff; display:flex; justify-content: center; align-items: center; letter-spacing: -0.07em;}
.m-sec-2 .sub-title{margin-bottom:0.8em;}
.m-sec-2 .title{font-size:2.4rem; font-weight:600; font-family: 'Pretendard', sans-serif; margin-bottom:0.6em;}
.m-sec-2 .desc{color:#4B5054; letter-spacing: -0.06em; line-height:1.3}
.m-sec-2 .blue .count{background:#0565F4;}
.m-sec-2 .blue .sub-title{color:#0565F4;}
.m-sec-2 .yellow .count{background:#F28911}
.m-sec-2 .yellow .sub-title{color:#F28911}

/* 메인 : 섹션3 */
.m-sec-3 .sec-header{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom:2.8rem;}
.m-sec-3 .sec-header .sec-desc{margin:0;}
.m-sec-3 .tab-nav{display:flex; gap:1.6rem;}
.m-sec-3 .tab-nav li{position: relative;}
.m-sec-3 .tab-nav .nav-btn{font-weight: bold; opacity: 0.34;}
.m-sec-3 .tab-nav li.on .nav-btn{opacity: 1;}
.m-sec-3 .tab-nav li.on .nav-btn:after{content:""; width:100%; height:2px; background:#000; position: absolute; left:50%; bottom:-11px; transform: translateX(-50%); }
.m-sec-3 .tab-nav li:before{content:attr(data-count); position: absolute; left:50%; top:-38px; transform: translateX(-50%); color:#fff; font-weight:bold; font-size:1.4rem; width:4.8rem; height:2.4rem; border-radius:9999px;display:flex; align-items: center; justify-content: center; display:none;}
.m-sec-3 .tab-nav li:after{content:"";display:block;border-left: 0.3rem solid transparent;border-right: 0.3rem solid transparent;border-top: 0.6rem solid #000;position: absolute;left:50%;top: -14px;transform: translateX(-50%);display:none;}
.m-sec-3 .tab-nav li:nth-child(1):before{background:#0566F5}
.m-sec-3 .tab-nav li:nth-child(2):before{background:#F2A60F}
.m-sec-3 .tab-nav li:nth-child(3):before{background:#55B74F}
.m-sec-3 .tab-nav li:nth-child(1):after{border-top-color:#0566F5}
.m-sec-3 .tab-nav li:nth-child(2):after{border-top-color:#F2A60F}
.m-sec-3 .tab-nav li:nth-child(3):after{border-top-color:#55B74F}
.m-sec-3 .tab-nav li.on:before, .m-sec-3 .tab-nav li.on:after{display:flex;}
.m-sec-3 .tab-panel{display:none;}
.m-sec-3 .tab-panel.on{display:block;}
.m-sec-3 .support-list-wrapper{position: relative;}
.m-sec-3 .support-item{display:block; height:28.4rem; background:#F6F8FB; border-radius: 12px; overflow: hidden; padding:5.6rem 2.4rem; position: relative;}
.m-sec-3 .empty .support-item{display:flex; align-items:center; justify-content:center; color:#888}
.m-sec-3 .support-item .item-title, .m-sec-3 .support-item .item-desc{overflow:hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height:1.3}
.m-sec-3 .support-item .item-title{margin-bottom: 1em; font-weight:bold;}
.m-sec-3 .support-item .item-desc{color:#888}
.m-sec-3 .support-item .item-category{position: absolute; left:0; bottom:0; padding:2.4rem; display:flex; align-items: center; gap:6px; color:#525861; font-size:1.3rem; font-weight:bold;}
.m-sec-3 .support-item .badge{position: absolute; left:0; top:0; min-width:5.6rem; height:3.2rem; padding:0 0.7em; display:flex; align-items: center; justify-content: center; background:#000; color:#fff; font-weight:bold; font-size:1.4rem; border-radius: 0 0 12px 0;}
.m-sec-3 .support-item .badge.type-01{background:#0565F4}
.m-sec-3 .support-item .badge.type-02{background:#F86300}
.m-sec-3 .support-item .badge.type-03{background:#55B74F}
.m-sec-3 .support-item .badge.type-04{background:#CE05F4}
.m-sec-3 .more .color-desc{display:flex; align-items: center; gap:6px}
.m-sec-3 .more .color-desc img{margin-top:-2px;}
.m-sec-3 .more .more-btn:before{content:""; display:block; width:6px; height:6px; border-radius:50%; background:#0565F4; margin-right:6px;}
.m-sec-3 .more .more-btn:after{content:""; display:block; width:7px; height:7px; border-bottom:1px solid #777; border-right:1px solid #777; transform: rotate(-45deg); margin:-3px -12px 0 7px}
.m-sec-3 .more .more-btn strong{color:#0565F4;}
.m-sec-3 .mobile-button-list{display:none;}

/* 메인 : 섹션4 */
.m-sec-4 .topic-list{display:flex; gap:1rem; flex-wrap:wrap; height:32.6rem; align-items: stretch;}
.m-sec-4 .topic-list li{width:calc(50% - 0.5rem);}
.m-sec-4 .topic-list .topic-item{display:flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height:100%; border-radius:4px; font-size:1.6rem; font-weight:bold; }
.m-sec-4 .topic-list .topic-item .item-title{line-height:1.2}
.m-sec-4 .topic-list .topic-item .item-icon{margin-bottom:8px;}
.m-sec-4 .topic-list .topic-item.red{background:#FDE3F5}
.m-sec-4 .topic-list .topic-item.red strong{color:#C20E23}
.m-sec-4 .topic-list .topic-item.blue{background:#E9F1FA}
.m-sec-4 .topic-list .topic-item.blue strong{color:#0565F4}
.m-sec-4 .topic-list .topic-item.green{background:#F2F9EB}
.m-sec-4 .topic-list .topic-item.green strong{color:#03A128}
.m-sec-4 .topic-list .topic-item.purple{background:#EAE6FD}
.m-sec-4 .topic-list .topic-item.purple strong{color:#2607B7}

/* 메인 : 섹션5 */
.m-sec-5 .notice-list{min-height:22.8rem;}
.m-sec-5 .notice-list li{border-bottom:1px solid #eee;}
.m-sec-5 .notice-list .empty{color:#888; padding:6.6em 0;}
.m-sec-5 .notice-list .notice-item{display:flex; align-items: center; height:5.7rem;}
.m-sec-5 .notice-list .notice-item .item-badge{width:4.6rem; height:2.6rem; background:#0565F4; color:#fff; font-weight:bold; font-size:1.4rem; display:flex; align-items: center; justify-content: center; margin-right: 1.2rem; border-radius: 9999px;}
.m-sec-5 .notice-list .notice-item .item-title{flex:1; min-width:0; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; font-size:1.6rem; font-weight:bold; line-height:1.24}
.m-sec-5 .notice-list .notice-item .item-date{color:#888; font-size:1.5rem; padding-left:2em;}
.m-sec-5 .more{justify-content: flex-end;}

/* 메인 : 섹션6 */
.m-sec-6 .job-list{display:flex; width:100%; height:27.3rem; gap:1rem; align-items: stretch;}
.m-sec-6 .job-list li {width:100%;}
.m-sec-6 .job-list .job-card{width:100%; height:100%; border:1px solid #eee; box-shadow: 0 12px 12px rgba(0,0,0,0.05); display:flex; flex-direction: column; align-items: center; justify-content: center; text-align:center; border-radius: 8px;}
.m-sec-6 .job-list .job-card .sub-title{font-size:1.6rem; font-weight:bold; color:#888; margin:1.4em 0 0.7em;}
.m-sec-6 .job-list .job-card .card-title{font-family: 'Pretendard', sans-serif; font-size:1.8rem; font-weight:600;}

@media screen and (max-width:1240px) {
    .page-main{gap:7.4rem 2.2rem;}
    .m-sec-1, .m-sec-3, .m-sec-5{width:calc(100% - 43.2rem)}
    .m-sec-2 .talk-banner{background-size:18vw auto;}
    .m-sec-2 .desc{display:none;}
}

@media screen and (max-width:1024px) {
    .container{overflow: hidden;}
    .page-main{flex-direction: column; padding-top:2rem; gap:4rem 1.8rem;}
    .m-sec-1, .m-sec-3, .m-sec-5,
    .m-sec-2, .m-sec-4, .m-sec-6{width:100%}
    .m-sec-1{order:6}
    .m-sec-1 .swiper-control{display:none;}
    .m-sec-1 .swiper-container{overflow: visible;}
    .m-sec-2 .talk-banner{background-size:auto 130%; box-shadow: 0 10px 16px rgba(0,0,0,0.08); max-height:36rem;}
    .m-sec-2 .talk-banner:before{content:""; display:block; width:100%; height:0; padding-bottom:55vw;}
    .m-sec-2 .desc{display:none;}
    .m-sec-2 .count{top:auto; right:auto; left:3rem; bottom:3rem;}    
    .m-sec-2 .talk-banner .talk-content{padding:3.8rem 3rem; height:100%;}
    .m-sec-3 .support-list-wrapper{display:none;}
    .m-sec-3 .tab-nav{display:none;}
    .m-sec-3 .mobile-button-list{display:flex; justify-content: center; gap:2rem; max-width:768px; margin:0 auto;}
    .m-sec-3 .mobile-button-list li{width:100%; text-align: center; max-width:16rem;}
    .m-sec-3 .mobile-button-list .mobile-button{position: relative; display:block;}
    .m-sec-3 .mobile-button-list .mobile-button img{width:100%; position: relative;}
    .m-sec-3 .mobile-button-list .button-title{font-weight: bold; margin:1.4em 0 1em;}    
    .m-sec-3 .mobile-button-list .mobile-button:before{content:attr(data-count); position: absolute; right:0; top:0; color:#fff; font-weight:bold; font-size:1.4rem; width:4.8rem; height:2.4rem; border-radius:9999px;display:flex; align-items: center; justify-content: center; z-index: 1;}
    .m-sec-3 .mobile-button-list .mobile-button:after{content:""; display:block; border-left:0.6rem solid transparent; border-right:0.6rem solid transparent; border-top:1.2rem solid #000; position: absolute; right:1.9rem; top:18px; z-index: 1;}
    .m-sec-3 .mobile-button-list li:nth-child(1) .mobile-button:before{background:#0566F5}
    .m-sec-3 .mobile-button-list li:nth-child(2) .mobile-button:before{background:#F2A60F}
    .m-sec-3 .mobile-button-list li:nth-child(3) .mobile-button:before{background:#55B74F}
    .m-sec-3 .mobile-button-list li:nth-child(1) .mobile-button:after{border-top-color:#0566F5}
    .m-sec-3 .mobile-button-list li:nth-child(2) .mobile-button:after{border-top-color:#F2A60F}
    .m-sec-3 .mobile-button-list li:nth-child(3) .mobile-button:after{border-top-color:#55B74F}    
    .m-sec-4 .topic-list{height:auto;}
    .m-sec-4 .topic-list .topic-item{height:20rem;}    
    .m-sec-5{order:5}
	.m-sec-5 .notice-list{min-height:0;}
    .m-sec-5 .notice-list .notice-item{background:#f8f9fa; border-radius:8px; padding:0 1.4em;}
    .m-sec-5 .notice-list li{border-bottom:none; margin-bottom: 6px;}
    .m-sec-5 .more{justify-content: center;}
}

@media screen and (min-width:1024px){
    .page-main .more .more-btn:hover{text-decoration: underline;}
    .m-sec-3 .more .color-desc:hover{text-decoration: underline;}
    .m-sec-2 .talk-banner{transition:all 0.2s}
    .m-sec-2 .talk-banner:hover{transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.05)}
    .m-sec-3 .support-item{transition:background 0.2s}
    .m-sec-3 .support-item:hover{background:#f3f8ff}
    .m-sec-4 .topic-list .topic-item{transition:transform 0.2s}
    .m-sec-4 .topic-list .topic-item:hover{transform:translateY(-5px);}
    .m-sec-3 .support-item:hover .item-title{text-decoration: underline;}
    .m-sec-5 .notice-list .notice-item:hover .item-title{text-decoration: underline;}
    .m-sec-6 .job-list .job-card{transition:transform 0.2s}
    .m-sec-6 .job-list .job-card:hover{transform:translateY(-5px);}
}

@media screen and (max-width:600px) {
	.m-sec-2 .talk-banner .talk-content{padding:3rem 2.2rem}
	.m-sec-2 .talk-banner{max-height:240px;}
	.m-sec-2 .talk-banner:before{padding-bottom:68vw;}
    .m-sec-2 .count{left:2rem;}
	.m-sec-6 .job-list{height:24rem;}

	.page-main .sec-title{font-size:1.8rem;}
	.m-sec-3 .sec-header .sec-desc{font-size:1.6rem;}
    
}

@media screen and (max-width:425px){
    .m-sec-2 .title{font-size:2rem;}

}

@media screen and (max-width:375px){
    .m-sec-2 .title{font-size:2rem;}
    .m-sec-2 .talk-banner{background-size: auto 120%;}
}