/* scroll effect */
.scroll_effect{ opacity: 0; transition: transform .6s, opacity .6s }
.scroll_effect.up{ transform: translateY(20%) }
.scroll_effect.right{ transform: translateX(-20%) }
.scroll_effect.left{ transform: translateX(20%) }
.scroll_effect.active{ transform: translate(0); opacity: 1 }
.scroll_effect.mask{ position: relative }
.scroll_effect.mask::before,
.scroll_effect.mask::after{ content: ''; position: absolute; inset: 0; background: #ddd }
.scroll_effect.mask.active::before{ animation: maskAni1 .1s .4s cubic-bezier(0.66, 0.04, 0.83, 1) both }
.scroll_effect.mask.active::after{ background: #233170; animation: maskAni2 .8s cubic-bezier(0.66, 0.04, 0.83, 1) both }
@keyframes maskAni1{
	0%{ opacity: 1 }
	100%{ opacity: 0 }
}
@keyframes maskAni2{
	0% { transform: scaleX(0); transform-origin: left }
    33%,
    66%{ transform: scaleX(1); transform-origin: left }
	66.1%{ transform-origin: right }
    100% { transform: scaleX(0); transform-origin: right }
}
.delay50{ transition-delay: .05s; animation-delay: .05s }
.delay100{ transition-delay: .1s; animation-delay: .1s }
@media(max-width: 767px){
	.delay50,
	.delay100{ transition-delay: 0s }
}

/* 슬라이드 공통 페이저 */
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{ bottom: auto }
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0 4.5px }
.swiper-pagination-bullet{ all: unset; display: inline-block; width: 7px; height: 7px; background: rgba(255, 255, 255, 0.5); border-radius: 100%; cursor: pointer }
.swiper-pagination-bullet-active{ background: #ff0000 }

/* 메인 비주얼 */
.area_visual .swiper-wrapper{ height: auto }
.area_visual .swiper-slide{ display: flex; align-items: center; height: 870px; background: #fff 50% / cover; color: #fff }
.area_visual .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; transform: scale(1.05); transition: cubic-bezier(0.35,-0.01, 0.61, 1.08) .8s }
.area_visual .swiper-slide-active::before{ transform: scale(1) }
.area_visual .slide1::before{ background-image: url(../images/main/img_visual1.jpg)}
.area_visual .slide2::before{ background-image: url(../images/main/slide02.jpg) }
.area_visual .slide3::before{ background-image: url(../images/main/slide03.jpg) }
.area_visual .swiper-slide::after{ content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2) }
.area_visual .swiper-slide.slide3::after{ display: none; }
.area_visual .inr{ height: auto; text-shadow: 3px 4px 16px rgba(0, 0, 0, 0.15); z-index: 1 }
.area_visual .box_txt{/*display: inline-block;*/ position: relative; text-align: center; }
.area_visual .box_txt::before{ content: ''; position: absolute; inset: -50px; background: rgba(0, 0, 0, 0.06); border-radius: 25%; filter: blur(50px); z-index: -1 }
.area_visual .controller { display: flex; justify-content: center; margin-bottom: 35px;}
.area_visual .navi{ display: flex; gap: 1.666666667em; position: relative; font-size: 15px }
.area_visual .navi::before{ content: ''; position: absolute; margin: auto; inset: 0; width: 1px; height: 0.866666666em; background: #e1e1e1 }
.area_visual .navi button{ background: 0; font-size: inherit }
.area_visual .navi button svg{ display: block; width: 0.666666667em; height: 1em } 
.area_visual .pager{ all: unset; display: flex; align-items: center; margin-left: 31.5px }
.area_visual h2{font-weight: 900; transition-delay: .25s; }
.area_visual .sub_p {font-size: 35px; font-weight: 700;}
.area_visual .small_p {font-size: 16px; line-height: 180%;}
.area_visual a.btn_more{ display: inline-block; margin-top: 50px; padding: 5px 15px 7px 17px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 100px; font-size: 14px; font-weight: 300; color: #ddd; transition: color .4s, background .4s, opacity .6s .5s, transform .6s .5s  }
.area_visual a.btn_more svg{ margin-left: 20px}
.area_visual a.btn_more path{ fill: #fff }
.area_visual a.btn_more:hover{ background: #000 }
.area_visual .box_txt > *:not(.controller){ opacity: 0; transform: translateY(20px); transition-duration: .6s }
.area_visual .swiper-slide-active .box_txt > *:not(.controller){ opacity: 1; transform: translateY(0) }
.area_visual .box_txt .list li p {font-size: 16px;}
.area_visual .box_txt .list li {position: relative;}
.area_visual .box_txt .list li::after {content: ''; position: absolute; top: 0; left: 0;width: 10px; height: 10px; border-left: 1px solid #00ccff; border-top: 1px solid #00ccff}
.area_visual .box_txt .list li::before {content: ''; position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-right: 1px solid #00ccff; border-bottom: 1px solid #00ccff}
.area_visual .box_txt p {font-size: 20px; font-weight: 500;}
/* 슬라이드1 */
.cf::after {content: ''; display: block; clear: both;}
.area_visual .slide1 .box_txt h2 {font-size: 55px; margin-bottom: 0.43636364em;}
.area_visual .slide1 .box_txt .list {width: 735px; margin:  3em auto 0 auto;}
.area_visual .slide1 .box_txt .list li {float: left; display: flex; align-items: center; justify-content: center; width: 235px; height: 85px; background: rgba(255, 255, 255, 0.25); border-radius: 0 15px 0 15px; margin: 5px;}
.area_visual .slide1 .box_txt .list li span {font-size: 14px; opacity: 0.8;}
/* 슬라이드2 */
.area_visual .slide2 .box_txt h2 {font-size: 55px; margin-bottom: 0.43636364em;}
.area_visual .slide2 .box_txt .list {display: flex; justify-content: center; margin-top: 3em;}
.area_visual .slide2 .box_txt .list li {width: 210px; height: 58px; line-height: 58px; margin: 0 0.9375em; background: rgba(255, 255, 255, 0.25); border-radius: 0 15px 0 15px;}
.area_visual .slide2 .box_txt .list li:first-child {margin-left: 0;}
.area_visual .slide2 .box_txt .list li:last-child {margin-right: 0;}
/* 슬라이드3 */
.area_visual .slide3 .box_txt h2 {font-size: 55px; margin-bottom: 0.43636364em;}
.area_visual .slide3 .box_txt h2 .blue {display: inline-block; font-weight: 900; color: transparent; background: linear-gradient(to right, #00f6ff, #00b4ff); background-clip: text; -webkit-background-clip: text;}
.area_visual .slide3 .box_txt em {border-bottom: 1px solid #eee;}
.area_visual .slide3 .box_txt .list {display: flex; justify-content: center; margin-top: 3em;}
.area_visual .slide3 .box_txt .list li {width: 210px; height: 58px; line-height: 58px; margin: 0 0.9375em; background: rgba(255, 255, 255, 0.25); border-radius: 0 15px 0 15px;}
.area_visual .slide3 .box_txt .list li:first-child {margin-left: 0;}
.area_visual .slide3 .box_txt .list li:last-child {margin-right: 0;}

.eng .area_visual .box_txt .list li{ box-sizing: border-box; }
.eng .area_visual .slide1 .box_txt .list li{ padding: .5em; }
.eng .area_visual .slide2 .box_txt .list li,
.eng .area_visual .slide3 .box_txt .list li{ display: flex; justify-content: center; align-items: center; height: auto; padding: .5em; line-height: 1.5; }

@media(max-width:1279px){
    .area_visual .swiper-slide{ height: 650px }
    .area_visual h2 { font-size: 40px !important }
    .area_visual .box_txt p {font-size: 18px;}
    .area_visual .sub_p {font-size: 30px;}
    .area_visual .small_p {font-size: 15px; font-weight: 400;}
    .area_visual .box_txt .list li p {font-size: 14px;}
    .area_visual .slide1 .box_txt p {font-size: 18px;}
    .area_visual .slide2 .box_txt h2 {margin-bottom: 0.57142857em;}
    .area_visual .slide1 .box_txt .list,
    .area_visual .slide2 .box_txt .list,
    .area_visual .slide3 .box_txt .list {margin-top: 1.875em;}
    .area_visual .slide2 .box_txt .list li {margin: 0 0.71428571em;}
}
@media(max-width:767px){
    .area_visual .controller {margin-bottom: 20px;}
    .area_visual a.btn_more {margin-top: 20px;}
    .area_visual h2 { font-size: 35px !important; font-weight: 700; }
    .area_visual .sub_p {font-size: 25px;}
    .area_visual .small_p {font-size: 14px;}
    .area_visual .small_p br {display: none;}
    .area_visual .slide1 .box_txt p {font-size: 16px;}
    .area_visual .slide1 .box_txt .list {width: 492px;}
    .area_visual .slide1 .box_txt .list li {height: 80px;}
    .area_visual .slide2 .box_txt .list li,
    .area_visual .slide3 .box_txt .list li {width: 33.333%; margin: 0;}
    .area_visual .slide3 .box_txt h2 {margin: 0.25em 0 0.53571429em 0;}
    .area_visual .slide1 .box_txt .list,
    .area_visual .slide2 .box_txt .list,
    .area_visual .slide3 .box_txt .list {margin-top: 1.42857143em; gap: 10px;}
}
@media(max-width:600px){
     .area_visual .swiper-slide{ height: 500px }
     .area_visual .sub_p {font-size: 18px;}
     .area_visual h2 {font-size: 25px !important;}
     .area_visual .box_txt p {font-size: 14px; font-weight: 400;}
     .area_visual .slide1 .box_txt .list {width: 100%;}
     .area_visual .slide1 .box_txt .list li {width: 48%; padding: 0 5px; box-sizing: border-box;}
     .area_visual .box_txt .list li::before,
     .area_visual .box_txt .list li::after {border: 0;}
     .area_visual .slide1 .box_txt .list li:nth-child(odd) {margin-left: 0;}
     .area_visual .slide1 .box_txt .list li:nth-child(even) {margin-right: 0;}
     .area_visual .slide1 .box_txt h2 {margin-bottom: 5px;}
     .area_visual .slide1 .box_txt .list li span {font-size: 13px;}
     .area_visual .slide1 .box_txt .list li span br {display: none;}
     .area_visual .slide2 .box_txt .list,
     .area_visual .slide3 .box_txt .list {flex-wrap: wrap;}
     .area_visual .slide2 .box_txt .list li,
     .area_visual .slide3 .box_txt .list li {width: 140px; height: 45px; line-height: 45px;}

}

/* 섹션 공통 */
section h2{ margin-bottom: 0.371428571428571em; font-size: 35px; font-weight: 800 }
section h2 + p{ font-size: 18px; font-weight: 500; }
@media(max-width:1279px){
    section h2{ font-size: 24px }
    section h2 + p{ font-size: 16px }
    #wrap .area_common{ padding: 80px 0 }
    #wrap .con_margin_top{ margin-top: 50px}
}
@media(max-width:767px){
    section h2{ font-size: 20px }
    section h2 + p{ font-size: 14px }
    #wrap .area_common{ padding: 60px 0 }
    #wrap .con_margin_top{ margin-top: 40px }
}

/* 사업안내 */
.area_business{ padding: 140px 0 146px; text-align: center }
.area_business .swiper{ margin-top: 56px; text-align: left }
.area_business .swiper-wrapper{ min-height: 575px }
.area_business .swiper-slide img{ width: 100%; object-fit: cover; transition: .6s }
.area_business [class^=btn_]{ display: flex; justify-content: center; align-items: center; position: absolute; top: 120px; width: 3.75em; height: 3.75em; background: #f5f5f5; font-size: 16px; z-index: 1 }
.area_business .btn_prev{left: 0}
.area_business .btn_next{right: 0}
.area_business .swiper-pagination{ display: none; position: relative; margin-top: 15px }
.area_business .swiper-pagination-bullet:not(.swiper-pagination-bullet-active){ background-color: rgba(0, 0, 0, 0.6) }
.area_business .swiper h3{ margin: 2.16666666666667em 0 0.722222222222222em; font-size: 18px; font-weight: 700 }
.area_business .swiper p{ line-height: 1.6; font-size: 15px; color: #666 }
@media(hover:hover){
    .area_business .swiper-slide img{ height: 300px }
    .area_business .swiper-slide.on img{ height: 400px }
}
@media(hover:none){
    .area_business .swiper-wrapper{ height: auto }
    .area_business .swiper-slide img{ height: auto }
    .area_business [class^=btn_]{ top: 0 }
}
@media(max-width:1279px){
    .area_business .swiper-wrapper{ min-height: 599px }
}
@media(max-width:767px){
    .area_business .swiper-wrapper{ min-height: auto }
    .area_business .swiper-slide img,
    .area_business .swiper-slide.on img{ height: auto; aspect-ratio: 44/30; }
    .area_business [class^=btn_]{ display: none }
    .area_business .swiper-pagination{ display: block }
}

/* 커뮤니티 */
.area_community .inr{ display:flex }
.area_community .con1{ position: relative; flex: 0 0 340px; padding: 140px clamp(20px, 5.208333333vw, 100px) 150px 0; background: #115721; color: #fff; z-index: 1 }
#wrap .area_community .con1{ padding-right: clamp(20px, 5.208333333vw, 100px)!important }
.area_community .con1::before{ content: ''; position: absolute; inset: 0 0 0 calc( ( 100vw - 1400px ) / -2 ); background: #115721 url(../images/main/img_community_bg.jpg) 50% / cover; z-index: -1 }
.area_community .con1 h2{ font-size: 35px; font-weight: 800 }
.area_community .con1 h2 + p{ margin-top: 0.722222222em; font-size: 18px; line-height: 1.611111111 }
.area_community .con1 ul{ margin-top: 75px }
.area_community .con1 li{ display: flex; align-items: center; max-width: 340px; width: 100%; padding: 1.125em 1.875em 1.125em 1.25em; box-sizing: border-box; background: #233170; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer }
.area_community .con1 li + li{ margin-top: 15px }
.area_community .con1 li svg{ width: 1.25em; height: 1.25em }
.area_community .con1 li path{ fill: #fff }
.area_community .con1 li span{ position: relative; margin-left: 3.0625em }
.area_community .con1 li span::before{ content: ''; position: absolute; margin: auto; inset: 0; margin-left: -1.8125em; width: 1px; height: 1.0625em; background: #233170 }
.area_community .con1 li i{ flex: 1; padding-right: 1.25em; text-align: right }
.area_community .con1 li[aria-selected=true],
.area_community .con1 li:hover{ background: #fff; color: #233170 }
.area_community .con1 li[aria-selected=true] path,
.area_community .con1 li:hover path{ fill: #233170!important }
.area_community .con1 li[aria-selected=true] span::before,
.area_community .con1 li:hover span::before{ background: #c3d5c7 }
.area_community .con1 li[aria-selected=true] i,
.area_community .con1 li:hover i{ padding-right: 0 }

[aria-role=tabpanel]{ display: none }
[aria-role=tabpanel][aria-hidden=false]{ display: block }

.area_community .con2{ position: relative; flex: 1; padding: 140px 0 150px clamp(20px, 5.208333333vw, 100px); box-sizing: border-box; background: #fafafa }
#wrap .area_community .con2{ position: relative; flex: 1; padding-left: clamp(20px, 5.208333333vw, 100px) }
.area_community .con2::after{ content: ''; position: absolute; inset: 0 calc( ( 100vw - 1400px ) / -2 ) 0 0; background: #fafafa; z-index: -1 }
.area_community .con2 h3{ font-size: 24px; font-weight: 800 }
.area_community .con2 h3 a{ display: flex; justify-content: space-between; align-items: center; position: relative }
.area_community .con2 .icon_plus{ position: relative; width: 0.708333333em; height: 0.708333333em }
.area_community .con2 .icon_plus::before,
.area_community .con2 .icon_plus::after{ content: ''; position: absolute; margin: auto; inset: 0; width: 100%; height: .125em; min-height: 1px; background: #111 }
.area_community .con2 .icon_plus::after{ transform: rotate(90deg) } 
.area_community .con2 ul{ margin-top: 19px; font-size: 15px }
.area_community .con2 li:first-child{ border-top: 2px solid #111 }
.area_community .con2 li a,
.area_community .con2 .non_board_data{ display: flex; padding: 2em; border-bottom: 1px solid #e1e1e1 }
.area_community .con2 li:first-child a{ padding: 2.266666667em 2em }
.area_community .con2 li .box_img{ margin-right: clamp(15px, 1.822916667vw, 35px) }
.area_community .con2 li .box_img.file_img{ flex: 0 0 37.5% }
.area_community .con2 li .box_img img{ width: clamp(100px, 100%, 300px); height: 100%; aspect-ratio: 30/18; object-fit: cover }
.area_community .con2 li .box_img .date{ display: block; margin: 0 clamp(15px, 1.822916667vw, 35px) .5em 0; font-size: 1.333333333em; font-weight: 900; white-space: nowrap; color: #111 }
.area_community .con2 li .box_txt.file_img{ margin: 0.866666667em 0 0.533333333em }
.area_community .con2 li span:not(.date){ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-break: break-all }
.area_community .con2 li .title{ font-size: 1.333333333em; font-weight: 700 }
.area_community .con2 li:first-child .commonts{ -webkit-line-clamp: 3 }
.area_community .con2 li .commonts{ -webkit-line-clamp: 2; margin-top: 0.666666667em; line-height: 1.6; color: #666 }
.area_community .con2 li .file_img .commonts{ margin-bottom: 1.733333333em }
.area_community .con2 li .box_txt .date{ font-size: 13px; font-weight: 300; color: #aaa }
.area_community .con2 li .box_txt .date{ display: block }
@media(max-width:1520px){
    .area_community .con1::before{ left: -4vw }
    .area_community .con2::after{ right: -4vw }
}
@media(max-width: 1279px){
    .area_community .con1{ flex-basis: auto }
    .eng .area_community .con1{ flex-basis: 255px; }
    .area_community .con1 h2{ font-size: 26px }
    .area_community .con1 h2 + p{ font-size: 16px }
}
@media(max-width:767px){
    .area_community .inr{ flex-direction: column }
    #wrap .area_community .con1{ padding-right: 0 }
    .area_community .con1::before{ right: -4vw }
    .area_community .con1 h2{ font-size: 20px }
    .area_community .con1 h2 + p{ font-size: 14px }
    
    #wrap .area_community .con2{ padding-left: 0 }
    .area_community .con2::after{ left: -4vw }
    .area_community .con2 ul{ font-size: 14px }
    .area_community .con2 li a,
    .area_community .con2 li:first-child a{ padding: 2.266666667em 0 }
    .area_community .con2 li a{ display: block }
    .area_community .con2 li .box_img{ margin-right: 0 }
    .area_community .con2 li .box_img img{ width: 100% }
}