/*메인페이지*/

/*공통*/
* {box-sizing:border-box;}
.center {width:83.3%; margin:0 auto;}
.padding120 {padding:120px 0;}
.cont_title {font-size:34px; color:#000; margin-bottom:60px;}

@media all and (max-width:1300px){

    .padding120 {padding:60px 0;}
    .cont_title {font-size:30px;}
}

@media all and (max-width:768px){

    .cont_title {font-size:25px;}
}

/*비주얼*/
.visual {height: calc(85vh - 87px);}
.visual .swiper {width: 100%; height: 100%;}
.visual .swiper-slide {background-repeat:no-repeat;}


.main-slide1 {background-color:#e9f0f8; position:relative;}
.main-slide1 .fiximg {position:absolute; bottom:0; right:30px;}



.visual .txtbox {padding-top:180px;}
.visual .txtbox p.txtbig {font-size:60px; line-height:90px; font-weight:800; color:#333; position: relative;
    z-index: 2;}
/*.visual .txtbox p.txtsmall {font-size:23px; line-height:35px; margin-top:30px;}*/
.visual .txtbox p br.mobile {display:none;}

.visual .swiper-button-prev::after,
.visual .swiper-button-next::after {display:none;}

.visual .swiper-button-prev,
.visual .swiper-button-next{display:block;width:40px;height:76px;}
/*
.visual .swiper-button-prev {background:url(/images/vis-prev.png) no-repeat;left:22px;}
.visual .swiper-button-next {background:url(/images/vis-next.png) no-repeat;right:22px;}
*/

.main-slide2 {position:relative;}
.main-slide2 .txtbox {position:absolute;}
.main-slide2 .fiximg {width:100%; height:100%; object-fit:cover;}

.main-slide2 .txtbox p.txtbig {color:#fff}

.swiper-pagination-bullet {width:10px !important; height:10px !important;}
.swiper-pagination-bullet-active {width:60px !important; height:10px !important; border-radius:10px !important;}

.btn_position {position:relative;}
.btn_wrap {position:absolute; bottom:90px; left:0%; transform:transitionX(-50%); z-index:10; display:flex; align-items: center;}

.btn_wrap .swiper-button-next, .btn_wrap .swiper-button-prev {width:60px !important; height:60px !important; position:relative !important; left:0 !important; top:0 !important; padding:0; background-color:rgba(255,255,255,0.8); border-radius:50%; background-size:10px; margin:0; text-align:center;     line-height: 60px; display: flex;}
.btn_wrap .swiper-button-prev {margin-right:6px;}
.btn_wrap .swiper-button-next {margin-right:25px;}
.btn_wrap .swiper-button-next i, .btn_wrap .swiper-button-prev i {font-size:30px; color:#333;}

.bar {
    width:160px;
    height:3px;
    background:rgba(0,0,0,0.05);
    position:relative;
    margin-right: 6px;
}

.back {
    display:inline-block;
    width:0%;
    height:100%;
    background:#024287;
    position:absolute;
    top:0;
    left:0;
}

.animation {
    animation:2s start linear 1s;
}


@keyframes start {
    0% {
        width:0%
    }
    100% {
        width:100%
    }
}

@media all and (max-width:1300px){
    .visual .txtbox p.txtbig {font-size: 50px; line-height: 70px;}

}

@media all and (max-width:1000px){
    .visual .txtbox {padding-top:100px;}
    .main-slide1 .fiximg {width:70%;}
    .visual .txtbox p.txtbig {font-size:40px; line-height:60px;}
}

@media all and (max-width:768px){
    .visual {height: calc(70vh - 87px);}
    .visual .txtbox p.txtbig {font-size: 30px; line-height: 45px;}
    .main-slide1 .fiximg {width:90%;}

}

@media all and (max-width:640px){
    .visual .txtbox {text-align:center;}
    .main-slide2 .txtbox {left:50%; transform:translateX(-50%); text-align:center; width:100%;}
    .visual .txtbox p.txtbig {font-size:25px; line-height:40px;}
    .btn_wrap {bottom:208px; }
    .btn_wrap .swiper-button-next, .btn_wrap .swiper-button-prev {display:none;}
    

}


.business .business_box_list {display:flex; justify-content:space-between;}
.business .business_box_list > div.business_box {width:24%; height:470px; overflow:hidden; background-repeat: no-repeat; background-size: cover; background-position: center;}

.business .business_box_list > div.business_box:nth-child(1) {background-image: url(/images/main_img_zone.jpg);}
.business .business_box_list > div.business_box:nth-child(2) {background-image: url(/images/main_img_zone2.jpg);}
.business .business_box_list > div.business_box:nth-child(3) {background-image: url(/images/sub_2_pa.jpg); background-position: right 50%;}
.business .business_box_list > div.business_box:nth-child(4) {background-image: url(/images/main_img_zone3.jpg);}

.business .business_box_list > div.business_box a {width:100%; height:100%; display: flex; align-items: center; font-size:500;}


.business .business_box_list .hidetxt {text-align:center; position:relative; opacity:0; padding: 0 20px;}
.business .business_box_list .hidetxt .busi_tit {font-size:25px; color:#fff; font-weight:600; margin-bottom:27px;}

.business .business_box_list .hidetxt .busi_context {font-size:18px; line-height:29px; color:#fff;}


.business .business_box_list > div.business_box.active a { background-color:rgba(0,0,0,0.5);}
.business .business_box_list > div.business_box.active .hidetxt {animation-name:up; animation-duration:1s; animation-fill-mode:forwards; opacity:1;}

@keyframes up {
    0% {top:30%;}
    100% {top:0%;}
}


@media all and (max-width:1300px){
    .business .business_box_list {flex-wrap:wrap;}
    .business .business_box_list > div.business_box {width:48%; margin-bottom:2%;}

}

@media all and (max-width:1000px){
    .business .business_box_list > div.business_box a {background-color:rgba(0,0,0,0.5);}
    .business .business_box_list .hidetxt {opacity:1;}

}

@media all and (max-width:640px){
    .business .business_box_list > div.business_box {width:100%; height:280px;}
    .business .business_box_list .hidetxt .busi_tit {font-size:17px; margin-bottom: 15px;} 
    .business .business_box_list .hidetxt .busi_context {font-size:15px;}
}


.activity {background-color:#f9f9f9;}
.activity .board_list {display:flex; justify-content:space-between;}
.activity .board_list > div.area {width:32.333%; position:relative;}
.activity .area .img {height:350px; background-size:cover;}

.activity .board_list span.activity_tit {display:block; position:absolute; bottom:0; left:0; background-color:rgba(0,0,0,0.6); color:#fff; font-size:18px; padding:20px 15px; width:100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}

.activity .area ul {display:flex; border-bottom:1px solid #d4d4d4; padding:20px 0;}
.activity .area ul:last-of-type {border-bottom:none;}

.activity .area li.tit {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; font-size:20px; width:70%; font-weight:500; color:#000;}
.activity .area li.reg {font-size:16px; color:#999; width:calc(100% - 70%); text-align:right;}


@media all and (max-width:1300px){
   
    .activity .board_list {flex-wrap:wrap;}
    .activity .board_list > div.area:nth-child(1),
    .activity .board_list > div.area:nth-child(2) {width:48%; margin-bottom:2%;}
    .activity .board_list > div.area:last-of-type {width:100%;}
    
}

@media all and (max-width:640px){
    
    .activity .board_list > div.area:nth-child(1),
    .activity .board_list > div.area:nth-child(2) {width:100%;}
    
    .activity .board_list span.activity_tit {font-size:15px;}
    .activity .area li.tit {font-size:15px; width:90%;}
    .activity .area li.reg {font-size:13px;}
    
}


.donate .donate_box {padding:65px 50px; background-repeat:no-repeat; background-size:cover; background-color:#f3f9ff; border-radius:20px; position:relative;}

.donate .donate_box .txtbox {color:#000;position: relative; z-index: 2;}
.donate .donate_box .txtbox h5 {font-size:35px; font-weight:600; margin-bottom:40px;}
.donate .donate_box .txtbox p {font-size:20px; line-height:30px; margin-bottom:50px;}
.donate .donate_box .txtbox a {display:block; width:180px; height:55px; line-height:55px; font-size:18px; color:#fff; background-color: #024287; border-radius:10px; transition:all 0.5s ease-in-out; text-align: center;}
.donate .donate_box .txtbox a span {margin-left:12px;}

.donate .donate_box .txtbox a:hover {background:#000;}
.donate .donate_box img {position:absolute; bottom:30px; right:160px;}

@media all and (max-width:1500px){

    .donate .donate_box img {right:20px;}
}

@media all and (max-width:1000px){

    .donate .donate_box img {width:50%; bottom:0;}
    .donate .donate_box .txtbox h5 {font-size:30px; margin-bottom: 20px;}
    .donate .donate_box .txtbox p {font-size: 18px; line-height: 28px; margin-bottom: 30px;}
    .donate .donate_box .txtbox a {width: 150px; height: 50px; line-height: 50px; font-size: 16px;}
}


@media all and (max-width:768px){

    .donate .donate_box {padding: 65px 30px;}
    .donate .donate_box .txtbox h5 {font-size:25px;}
    .donate .donate_box .txtbox p {font-size:16px;}
   
}


@media all and (max-width:640px){

    .donate .donate_box .txtbox h5 {font-size:20px;}
    .donate .donate_box .txtbox p {font-size:16px; line-height:24px;}
}



/*기관소개*/
.introduce .tit {font-size:20px; font-weight:bold; margin-bottom:22px; border-left:5px solid #0c90e3; padding-left:15px; color:#000;}

.introduce .overview {margin-bottom:60px;}
.introduce .overview .greybg {background-color:#f9f9f9; padding:30px 35px;}
.introduce .overview .greybg ul li {font-size:16px; color:#000; line-height:32px;}
.introduce .overview .greybg ul li span {font-weight:bold;}


.introduce .sub_business {margin-bottom:60px;}
.introduce .sub_business .imgbox {text-align:center;}
.introduce .sub_business .imgbox img {max-width:100%;}
.introduce .sub_business .gridbox {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 20px;}
.introduce .sub_business .gridbox .txtbox {padding:0 15px; text-align:center; color:#000;}
.introduce .sub_business .gridbox h6 {font-size:18px; font-weight:bold; padding:25px 0 19px;}
.introduce .sub_business .gridbox p {font-size:16px; line-height:25px;}

.introduce .video {margin-bottom:60px;}

@media all and (max-width:768px){
    .introduce .tit {font-size:15px;}
    .introduce .overview .greybg ul li {font-size:12px;}
    .introduce .sub_business .gridbox {grid-template-columns:1fr 1fr; row-gap:20px;}
    .introduce .sub_business .gridbox h6 {font-size:14px;}
    .introduce .sub_business .gridbox p {font-size:12px;}

}

@media all and (max-width:390px){
 
    .introduce .overview .greybg {padding:20px 15px;}
    .introduce .sub_business .gridbox {grid-template-columns:1fr;}
}


.introduce .context {font-size:16px; color:#000; line-height:35px; margin-bottom:36px; font-weight: bold;}
.introduce .grid {background:url(/images/pattern_grid.png) repeat;}

.introduce .markimg {border:1px solid #ddd; text-align:center; }
.introduce .simbol {margin-bottom:65px;}
.introduce .simbol .markimg {width:100%; padding:65px 0;}

.introduce .ci {display:flex; justify-content:space-between;align-items: center;}
.introduce .ci > div {width:49%;}
.introduce .ci > div h6 {font-size:18px; margin-bottom:32px; color:#000; font-weight:600;}
.introduce .ci .markimg {width:100%; height: 214px; display: flex; justify-content: center; align-items: center;}
.introduce .ci .markimg img {max-width:90%;}

.introduce .btn_file {display:flex; align-items:center; justify-content:space-between; margin-top:10px;}
.introduce .btn_file > div {width:49%; border:1px solid #ddd; text-align:center; height:60px; line-height:60px; font-size:18px;}
.introduce .btn_file > div > a {display: block; color:#000;}
.introduce .btn_file span {margin-left:10px;}

.introduce .btn_file > div:hover {background-color:#134383;}
.introduce .btn_file > div:hover a {color:#fff;}


@media all and (max-width:1000px){
    .introduce .btn_file > div {font-size:16px;}

}

@media all and (max-width:768px){
    .introduce .ci {flex-direction:column; align-items: baseline;}
    .introduce .ci > div {width:100%;}
    .introduce .ci > div.vertical, .introduce .ci > div.horizon {margin-bottom:60px;}
    .introduce .ci > div h6 {font-size:17px;}
    .introduce .btn_file > div {font-size:15px;}
    
}


@media all and (max-width:640px){
   
    .introduce .markimg img {max-width:80%;}
    
    .introduce .context {font-size:13px; line-height:24px;}

    .introduce .ci > div h6 {font-size:14px;}
    .introduce .btn_file > div {font-size:13px; line-height:50px; height:50px;}
}


/*영상 게시판*/

.video_list {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 40px; column-gap: 20px;}
.video_list > div {box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.video_list > div .imgbox {height:190px; border:1px solid #ddd;}
.video_list > div .imgbox img {width:100%; height:100%; object-fit:cover;}

.video_list > div .txtbox {padding:24px 10px; text-align:center;}
.video_list > div .txtbox .tit {font-size:16px; color:#000; margin-bottom:15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}
.video_list > div .txtbox p {font-size:14px; color:#aaacad; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}

@media all and (max-width:1000px){

    .video_list {grid-template-columns: 1fr 1fr 1fr;}
}


@media all and (max-width:768px){

    .video_list {grid-template-columns: 1fr 1fr;}
}

@media all and (max-width:500px){

    .video_list {grid-template-columns: 1fr;}
    .video_list > div .imgbox {height:230px;}
}


.flex_zone2{display: flex; gap: 15px; position: relative; height: 100%;}

.flex_zone2 .txt_box{ width: 1400px; margin: 0 auto; margin-top: 35px; z-index: 1;}
.flex_zone2 .img_box {
    position: absolute;
    right: 0;

}
.swiper-slide.main-slide3{background: #d5efe6; padding-top: 87px;}


@media all and (max-width:1760px){
    .flex_zone2 .img_box {
        position: absolute;
        right: 0;
        max-width: 954px;
        bottom: 0;
        margin-bottom: -100px;
    }
    .flex_zone2 .txt_box{margin-top: 45px;}
}
@media all and (max-width:1450px){
.flex_zone2 .txt_box{width: 100%; padding: 0 50px;}
}

@media all and (max-width:1350px){
.flex_zone2{flex-direction: column;}
.flex_zone2 .txt_box{margin-top: 0;}
.flex_zone2 .txt_box{text-align: center;}
.flex_zone2 .img_box{max-width: 100%; position: relative; margin-bottom: 0; margin-top: -100px;}
.flex_zone2 .txt_box img{max-width: 300px; text-align: center;}
.swiper-slide.main-slide3{padding-top: 32px;}
}


@media all and (max-width:800px){
    .test_cons_seddd p br{
    display: none;
    }
    .test_cons_seddd p{font-size: 16px;  letter-spacing: -0.02em; text-align: left !important;}
}
@media all and (max-width:500px){
.flex_zone2 .img_box{margin-top: 0;}
.flex_zone2 .txt_box img{max-width: 65%;}

}

@media all and (max-width:420px){
.flex_zone2 .txt_box img{max-width: 100%;}
}