/*메인비주얼*/
.visual{height:80vh;  position: relative;}
.visual .inner{ width: 100%; max-width:87.5rem; margin: 0 auto;}
.main_slide .slide {background-image: url("../images/main/main_01.jpg"); background-size: cover; background-position: center center;}
.main_slide .slide_text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-70%); color: #fff; z-index: 3; text-align: left; width: 100%; max-width:87.5rem;}
.main_slide .slide_text small{font-size: 1.4rem; letter-spacing: 0.188rem; opacity: .6; display: block; margin-bottom: .7rem;}
.main_slide .slide_text p {font-size: 1.5rem; line-height: 1.4;margin-top: .5rem; letter-spacing: 0.125rem;}
.main_slide .slide_text strong {font-size: 3.625rem; letter-spacing: 0.1875rem; font-weight: 800;}
.visual_pagination{position: absolute;   bottom: 10% !important;  z-index: 1; text-align: center;}
.visual_pagination .swiper-pagination-bullet {background: #fff; opacity: .5;}
.visual_pagination .swiper-pagination-bullet-active{opacity: 1;}

/*공지사항*/
.main_title{font-size: 2.25rem; padding-bottom: 2.5rem; font-weight: 800; }
.empty {color: #555;  padding: 1.25rem 1.875rem; text-align: center; width: 100%; }
.empty i{font-size: 2rem; color:#a5acb7;}
.section_1 {background: #f1f0f4; padding: 6.25rem 0;}
.section_1 .main_title{padding-left: 20%;}
.section_1 .inner{max-width:106.25rem; margin: 0 auto; position: relative;}
.notice {display: flex;}
.notice > .more {position: absolute; right: 0; top: -0.625rem; text-align: center; width: 4.375rem; height: 4.375rem; border: 0.125rem dotted #007764; color: #007764; border-radius: 3.125rem; display: flex; flex-direction: column; justify-content: center;  transition: all .3s;}
.notice > .more span{display: block; font-size: 0.875rem; font-weight: 800;}
.notice > .more:hover{background: #007764; color: #fff;}
.notice_tab {width: 20%; display: flex; flex-direction: column; gap: 0.625rem; padding-right: 3.75rem;}
.notice_tab button{display: block; padding: 1.25rem 1.875rem; font-size: 1.25rem; background: #fff; width: 100%; font-weight: 700; color: #007764; text-align:left; position: relative;}
.notice_tab button.active{background: linear-gradient(90deg, #05BD73 0%, #00DDBA 100%); color: #fff;}
.notice_tab button i {position: absolute; right: 1.875rem; top: 50%; transform: translateY(-50%)}
.notice_list{display: flex; gap: 2.5rem; width: 85%;}
.notice_item {background: #fff;width: calc(100% / 4); position: relative; overflow: hidden;  }
.notice_item a{position: relative; z-index: 2; display: block; padding: 2.8125rem 1.5625rem 3.75rem;margin: 0.1875rem;}
.notice_item .label{font-style: normal; color: #007764; font-weight: 800; display: block; margin-bottom: 1.875rem;  transition: all .4s;}
.notice_item .tit {font-size: 1.375rem; font-weight: 600; margin-bottom: 3.125rem;min-height: 4.125rem;transition: all .4s;}
.notice_item .date {color: #888888; transition: all .4s;}
.notice_item .more {position: absolute; right: -1.875rem;  bottom: -1.875rem;  background: #03ca90; display: inline-block; width: 5.4375rem; height: 5.4375rem; border-radius: 3.125rem;}
.notice_item .more i {color: #fff; display: inline-block; padding: 0.9375rem 1.25rem; font-size: 1.7rem;transition: transform 0.3s linear;}
.notice_item:hover .more i {-webkit-transform:translate(0%, 0%) rotate(180deg); transform:translate(0%, 0%) rotate(180deg);}
.notice_item:hover .label, .notice_item:hover .tit, .notice_item:hover .date{color: #fff;}
.notice_item:before, .notice_item:after {content: "";background: #ffab2e;width: calc( 18.75rem * 2);height: calc( 18.75rem * 2 );border-radius: 50%;position: absolute;top: 0;left: 0;transform: translate(-50%, -50%) scale(0);transition: all 0.1s cubic-bezier(0, 1.04, 1, 0.01);}
.notice_item:after {bottom: 0;left: 0;background: #03ca90;transform: translate(0, 0) scale(0);}
.notice_item:hover:after {transition: all 1s ease-in-out;transform: translate(-50%, -50%) scale(2);}

/*퀵메뉴*/
.section_2 {padding: 4.375rem 0;max-width:106.25rem; margin: 0 auto; position: relative;}
.quick {display: flex;}
.quick .left,  .quick .right{width: 50%}
.quick .left{background: url("../images/main/quick_bg_01.jpg") center no-repeat; background-size: cover; padding: 4.6875rem;}
.quick h2{font-size: 2.25rem; font-weight: 800; color: #fff; padding-bottom: 1.25rem; margin-bottom: 3.125rem; border-bottom: 0.0625rem solid #fff;}
.quick .link_1 {display: flex; flex-wrap: wrap; gap: 1.25rem;}
.quick .link_1 li{width: calc(100% / 3 - 0.9375rem);}
.quick .link_1 a{color: #fff; display: block; position: relative; font-weight: 600; }
.quick .link_1 a:after{content: ''; width: 1.25rem; height: 1.5rem; background: url("../images/main/arrow-right.png") center no-repeat; display: inline-block; position: absolute; right: 0; background-size: 30%; transition: all .3s;}
.quick .link_1 li:hover a:after{right: -0.3125rem}
.quick .link_2 {display: flex;}
.quick .link_2 li{width: 50%; position: relative;}
.quick .link_2 li:after{content:'';  width: 6.25rem; height: 6.25rem; display: inline-block; position: absolute; right: 1.875rem; bottom: 1.25rem;}
.quick .link_2 li:nth-child(1){background: #2fa534;}
.quick .link_2 li:nth-child(1):after{background: url("../images/main/quick_01.svg") center no-repeat;}
.quick .link_2 li:nth-child(2){background: #1c711f;}
.quick .link_2 li:nth-child(2):after{background: url("../images/main/quick_02.svg") center no-repeat;}
.quick .link_2 li a{display: block; padding: 2.5rem 2.5rem 3.75rem; position: relative;}
.quick .link_2 li strong {font-size: 2.25rem; font-weight: 800; color: #fff; display: block; padding-bottom: 1.25rem;}
.quick .link_2 li p {color: rgba(255,255,255,.7); font-weight: 400; width: 80%;}
.quick .link_2 li .more{position: absolute; right: 2.5rem; top: 3.125rem; color: #fff;  font-size: .875rem; transition: all .3s;}
.quick .link_2 li .more i {padding-left: 0.625rem;}
.quick .link_2 li:hover .more{top: 2.5rem;}
.quick .link_3 {display: flex; padding: 3.125rem 4.375rem; background: #255d69; justify-content: space-between;}
.quick .link_3 li{width: calc(100% / 4); text-align: center; transition: all .3s; }
.quick .link_3 li a{color: #fff;}
.quick .link_3 li a span {display: block; padding-top: 0.625rem;}
.quick .link_3 li:hover {transform: translateY(-0.3125rem)}

/*배너*/
.section_3 {position: relative; padding-bottom: 4.375rem;max-width: 106.25rem; margin: 0 auto; display: flex; gap: 3.125rem;}
.banner {width: 25%; overflow: hidden; border: 0.625rem solid #eaeaea; padding: 1.875rem;display: flex;flex-direction: column;justify-content: space-between;}
.banner .thumb {position: relative; width: 100%; padding-bottom: 100%;}
.banner .thumb_img {position: absolute; inset: 0; overflow: hidden;}
.banner .thumb_img img {position: absolute; display: block; width: 100%; height: 100%; object-fit: cover;}
.banner .banner_item strong{font-size: 1.25rem; margin: 1.25rem 0;}
.banner .swiper-wrapper {height: auto;}
.banner_indicator {display: flex; justify-content: space-between; align-items: center;}
.banner_pagination span{font-weight: 800; color: #979797; display: inline-block; min-width: 3.125rem;}
.banner_pagination .swiper-pagination-current{color:#007764;  position: relative; padding-right: 1.875rem;}
.banner_pagination .swiper-pagination-current:after{content: ''; width: 1.375rem; height: 0.0625rem; background: #BABABA; position: absolute; top: 50%; transform: translateY(-50%); right: 0.0625rem;}
.banner_control {display: flex;}
.banner_control button{color: #9d9d9d; font-size: 1.4rem;}
.banner_control .bn_play{display: none;}
.swiper-button-lock~button{display: none;}

 /*갤러리*/
.gallery {width: 75%; position: relative}
.gallery_list{display: flex; justify-content: space-between; height: 80%; gap: 1.5625rem;}
.gallery_list .gallery_item{ width: calc(100% / 3)}
.gallery_item .thumb {position: relative; width: 100%; padding-bottom: 70%;}
.gallery_item .thumb_img {position: absolute; inset: 0; overflow: hidden;}
.gallery_item .thumb_img img {position: absolute; display: block; width: 100% !important; height: 100% !important; object-fit: cover;}
.gallery_item .text_group{display: flex; flex-direction: column; justify-content: space-between; width: 100%; padding-top: 1.25rem;}
.gallery_item .title{font-size: 1.25rem; margin-bottom: 0.9375rem;}
.gallery_item .desc{color: #666; font-size: 1rem; min-height: 3rem;}
.gallery_item .date{color: #888; font-size: 0.875rem; padding-top: 0.9375rem;}
.gallery .more {position: absolute; right: 0; top: -0.625rem; text-align: center; width: 4.375rem; height: 4.375rem; border: 0.125rem dotted #007764; color: #007764; border-radius: 3.125rem; display: flex; flex-direction: column; justify-content: center;  transition: all .3s;}
.gallery .more span{display: block; font-size: 0.875rem; font-weight: 800;}
.gallery .more:hover{background: #007764; color: #fff;}

/*sns*/
.sns {width: 40%; margin: 6.25rem 0;}
.sns .video_wrap {position: relative; width: 110%; padding-bottom: 60%; transform: translateX(-9%);}
.sns .main_video {position: absolute; inset: 0; border-radius: 1.25rem 1.25rem 0 1.25rem; overflow: hidden;box-shadow: 0.0625rem 0.25rem 1.125rem rgba(0,0,0,.25);}
.sns .main_video iframe {position: absolute; display: block; width: 100%; height: 100%; }
.sns_link {width: 100%; display: flex; border: 0.25rem solid #add47f; border-radius: 0 0 1.5625rem 0; align-items: center; gap: 0.625rem; justify-content: space-between; padding: 0.625rem 1.875rem; background: #fff; }
.sns_link dt{color: #333; font-size: 1.25rem;}
.sns_link dt span{color: #007764; font-weight: 800;}
.sns_link dd{position: relative;flex: 1 1 0;}
.sns_link dd a{display: flex; align-items: center; padding: 0.625rem; gap: 0.625rem; justify-content: center; color: #444; font-weight: 600;}



@media all and (max-width:1700px) {
    /*메인비주얼*/
    .main_slide .slide_text {padding: 0 0.9375rem;}
    
    /*공지사항*/
    .section_1 .inner{padding: 0 0.9375rem;}
}

@media all and (max-width:1200px) {

}

@media (max-width: 992px) {
    /*공지사항*/
    .section_1 .main_title{padding-left: 0;}
    .notice_list{flex-wrap: wrap;}
    .notice_tab{width: 40%;}
    .notice > .more{ right: 0.9375rem;}
    .notice_item{width:  calc(100% / 2 - 1.25rem);}
    
    /*퀵메뉴*/
    .quick{flex-direction: column;}
    .quick .left,.quick .right{width: 100%;}
}

@media all and (max-width:767px) {
    
    /*메인비주얼*/
    .visual{height:500px;}
    .main_slide .slide_text small{font-size: 1.2rem;}
    .main_slide .slide_text p{font-size: 1.2rem;}
    .main_slide .slide_text strong {font-size: 2.5rem;}
    
    /*공지사항*/
    .section_1{padding: 3.125rem 0;}
    .notice{flex-direction: column;}
    .notice_tab{width: 100%; padding-right: 0; flex-direction:row; padding-bottom: 1.25rem;}
    .notice_tab button{padding: 0.625rem 0.3125rem; text-align: center; font-size: 1.1rem;}
    .notice_tab button i{display: none;}
    .notice_list{width:100%; gap: 0.9375rem;}
    .notice_item{width: 100%;}
    .notice_item .more{display: none;}
    .notice_item a{padding: 1.25rem;}
    .notice_item .label{margin-bottom: 0.625rem;}
    .notice_item .tit{margin-bottom: 0.9375rem; ;}
    .notice > .more{width: 2.8125rem; height: 2.8125rem; top: 0; background: #007764;}
    .notice > .more i{color: #fff;}
    .notice > .more span{overflow: hidden; position: absolute; width: 0.0625rem; height: 0.0625rem; clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);}
    
    /*퀵메뉴*/
    .section_2{padding: 0;}
    .quick .left{padding: 3.125rem 1.875rem;}
    .quick .link_2 li strong{font-size: 1.5625rem;}
    .quick .link_2 li p{width: 100%;}
    .quick .link_2 li a{padding: 1.875rem 1.25rem; display: block; height: 100%;}
    .quick .link_2 li .more{display: none;}
    .quick .link_3{padding: 30px 10px;}
    .quick .link_3 li a img{width: 45px;}
    
    /*베너*/
    .section_3{padding: 3.125rem 0.9375rem;flex-direction: column;}
    .banner{width: 100%;}
    
    /*갤러리*/
    .gallery{width: 100%;}
    .gallery_list{flex-direction: column;}
    .gallery_list .gallery_item{width: 100%;}
    .gallery .more{width: 2.8125rem; height: 2.8125rem; top: 0; background: #007764;}
    .gallery .more i{color: #fff;}
    .gallery .more span{overflow: hidden; position: absolute; width: 0.0625rem; height: 0.0625rem; clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);}
}

