@charset "UTF-8"; 


/* visual */

#visual{background: url(../img/main/visual_bg.png)0 0 no-repeat; width: 100%; /* height: 762px; */ margin-bottom: 60px;}
#visual .inner_wrap{width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between;padding-top: 50px; word-break: keep-all;}


/* #visual .vis_l{width: calc(100% - 340px - 40px);} */
#visual .vis_l{width:100%;}

#visual .vis_l .vis_slide_wrap{margin-bottom: 40px; height: 458px; display: flex;}

#visual .vis_l .vis_slide{width: calc(100% - 80px); border-radius: 30px 0 0 30px; overflow: hidden; }
/* #visual .vis_l .vis_slide .item{height: 458px !important;} */
#visual .vis_l .vis_slide img{width: 100%; height: 100%; object-fit: fill}

#visual .vis_l .slide_util{width: 100%; max-width: 80px; background:#fff;position: relative; border-radius: 0 30px 30px 0; overflow: hidden; }
#visual .vis_l .slide_util .util_inner{transform: rotate(90deg); transform-origin: left top; position: absolute; top: 0; left: 100%; z-index: 9; padding-left: 50px; display: flex; align-items: center; justify-content: center; min-height: 80px; }

#visual .vis_l .slide_util h2.tit{font-size: 22px; font-family: "GmarketSansMedium"; margin-right: 20px;}
#visual .vis_l .slide_util h2.tit strong{font-family: "GmarketSansBold";}
#visual .vis_l .slide_util .slide_btn_wrap{display: flex;}
#visual .vis_l .slide_util .slide_btn_wrap ul.slide_cnt{display: flex; align-items: center;}
#visual .vis_l .slide_util .slide_btn_wrap ul.slide_cnt li{font-size: 16px; margin: 0 10px; font-family: "GmarketSansMedium";}
#visual .vis_l .slide_util .slide_btn_wrap ul.slide_cnt li.crnt{font-family: "GmarketSansBold"; color: #89b7a0;}
#visual .vis_l .slide_util .slide_btn_wrap ul.slide_btn{display: flex; align-items: center; }
#visual .vis_l .slide_util .slide_btn_wrap ul.slide_btn li{margin: 0 10px; }
#visual .vis_l .slide_util .slide_btn_wrap ul.slide_btn li.vis_play{display: none;}
#visual .vis_l .slide_util .slide_btn_wrap ul.slide_btn li a{display: block; background: url(../img/main/visual_slide_btn_spicon.png)0 0 no-repeat; width: 8px; height: 12px;}
#visual .vis_l .slide_util .slide_btn_wrap ul.slide_btn li:nth-child(2) a{background-position: -8px 0}
#visual .vis_l .slide_util .slide_btn_wrap ul.slide_btn li:nth-child(3) a{background-position: -16px 0; }
#visual .vis_l .slide_util .slide_btn_wrap ul.slide_btn li:nth-child(4) a{background-position: -24px 0}



#visual .vis_l .vis_quick{}
#visual .vis_l .vis_quick ul{display: flex; flex-wrap: wrap; align-items: center; border-radius: 30px; box-sizing: border-box; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,.2);}
#visual .vis_l .vis_quick ul li{width: 50%; }
#visual .vis_l .vis_quick ul li a{display: block; background: #9bd650; padding: 20px 30px; box-sizing: border-box; display: flex; align-items: center; }
#visual .vis_l .vis_quick ul li:nth-child(2) a{background: #2dc3d7}
#visual .vis_l .vis_quick ul li a span.icon{background: url(../img/main/vis_quick_icon_01.png)center center no-repeat; width: 187px; height: 175px; display: block; margin-right: 20px;}
#visual .vis_l .vis_quick ul li:nth-child(2) a span.icon{background: url(../img/main/vis_quick_icon_02.png)center center no-repeat; width: 193px; height: 175px; display: block;}
#visual .vis_l .vis_quick ul li a span.txt{}
#visual .vis_l .vis_quick ul li a span.txt h2{font-size: 33px; font-weight: bold; color: #fff; margin-bottom: 10px;}
#visual .vis_l .vis_quick ul li a span.txt p{font-size: 16px; font-weight: 500; color: #fff; line-height: 24px;}
#visual .vis_l .vis_quick ul li a span.txt p::after{content: ''; background: url(../img/main/vis_quick_arrw_icon.png)0 0 no-repeat; width: 22px; height: 6px; display: block; margin: 20px 0 0 auto;}

#visual .vis_r{width: 100%; max-width: 340px; background: #019c7d; padding: 120px 40px 0; box-sizing: border-box; border-radius: 30px; box-shadow: 0 0 10px rgba(0,0,0,.2); overflow: hidden; position: relative; }
#visual .vis_r::after{content: ''; background: url(../img/main/vis_r_bg_icon.png)0 0 no-repeat; width: 312px; height: 339px; position: absolute; bottom: 0; right: 0;}
#visual .vis_r h2{margin-bottom: 15px;}
#visual .vis_r h2 img{max-width: 100%;}
#visual .vis_r a.view_btn{display: block; font-size: 21px; font-weight: 600; color: #019c7d; background: #fff; width: 100%; max-width: 230px; text-align: center; padding: 16px 0; box-sizing: border-box; border-radius: 50px; margin-bottom: 23px}
#visual .vis_r a.view_btn::before{content: ''; background: url(../img/main/vis_r_btn_icon.png)0 0 no-repeat; width: 28px; height: 24px; margin: 0 10px 0 0; display: inline-block; vertical-align: middle;}
#visual .vis_r p{font-size: 18px; line-height: 28px; color: #fff; font-weight: 500; font-family: "GmarketSansMedium"; text-shadow: 0 0 4px rgba(0,0,0,.3); position: relative; z-index: 10;}


@media all and (max-width:1400px){
    
    #visual .inner_wrap{width: 98%; }
}

@media all and (max-width:1200px){
    
    #visual{height: auto; background-size: cover;}
    #visual .inner_wrap{flex-direction: column;}
    #visual .vis_l{width: 100%; margin-bottom: 40px;}
    #visual .vis_r{width: 100%; max-width: none; padding: 50px }
    
    
    #visual .vis_r .mind_health{display: flex; flex-direction: column}
    
    #visual .vis_r a.view_btn{order: 3;margin-bottom: 0}
    #visual .vis_r p{order: 2; margin-bottom: 20px;}
    #visual .vis_r p br{display: none;}
}

@media all and (max-width:1024px){
    
    #visual .vis_l{margin-bottom: 20px;}
    #visual .vis_l .vis_slide_wrap{display: block;height: auto; margin-bottom: 20px;}
    #visual .vis_l .vis_slide{width: 100%; border-radius: 30px 30px 0 0; height: auto !important}
    #visual .vis_l .vis_slide .item{height: auto !important;}
    #visual .vis_l .slide_util{max-width: none; border-radius: 0 0 30px 30px;}
    #visual .vis_l .slide_util .util_inner{position: static; transform: none; padding-left: 0; min-height: auto; padding: 16px 0; }
  
}


@media all and (max-width:768px){
    
    #visual{margin-bottom: 30px;}
    #visual .vis_l .slide_util h2.tit{font-size: 17px; margin-right: 10px;}
    #visual .vis_l .slide_util .slide_btn_wrap ul.slide_cnt li{font-size: 14px; margin: 0 6px;}
    #visual .vis_l .slide_util .slide_btn_wrap ul.slide_btn li{margin: 0 6px;}
    
    #visual .vis_l .vis_quick ul li a span.icon{display: none;}
    #visual .vis_l .vis_quick ul li:nth-child(2) a span.icon{display: none;}
    #visual .vis_l .vis_quick ul li a span.txt{width:100%;}
    
    #visual .vis_l .vis_quick ul li a span.txt h2{font-size: 24px;}
    #visual .vis_l .vis_quick ul li a span.txt p{font-size: 14px; line-height: 24px;}
    
    #visual .vis_r h2 img{max-width: 220px;}
    #visual .vis_r p{font-size: 16px; margin-bottom: 10px;}
    #visual .vis_r a.view_btn{font-size: 18px;}
}

@media all and (max-width:640px){
    
    #visual .inner_wrap{padding-top: 20px;}
    #visual .vis_r{padding: 30px;}
    #visual .vis_r::after{width: 240px; height: 261px; background-size: cover;}
}

@media all and (max-width:540px){
    #visual .vis_l .vis_quick ul{flex-direction: column;}
    #visual .vis_l .vis_quick ul li{width: 100%;}
    #visual .vis_l .vis_quick ul li a span.txt p::after{margin: 6px 0 0 auto;}
   
    #visual .vis_r::after{width: 180px; height: 196px;}
    #visual .vis_r h2 img{max-width: 170px; }
    #visual .vis_r p{ text-shadow: 0 0 4px rgba(0,0,0,.7);}
    #visual .vis_r a.view_btn{box-shadow:0 0 4px rgba(0,0,0,.3); position: relative; z-index: 10}
}



@media all and (max-width:420px){
     #visual .vis_r::after{width: 150px; height: 163px;}
}



/* latest */

#latest{margin-bottom: 80px;}
#latest .inner_wrap{width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; word-break: keep-all;}

#latest .latest_l{width: 56%; }
#latest .tit_wrap{width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; box-sizing: border-box; margin-bottom: 30px;}
#latest .tit_wrap h2{font-size: 34px; font-weight: bold;}
#latest .tit_wrap h2::before{content: ''; background: #ffae00; width: 10px; height: 10px; display: inline-block; vertical-align: top; border-radius: 50%; margin: 0 3px 0 0;}
#latest .tit_wrap h2 span{color: #f6821f;}

#latest .tit_wrap a.more_btn{width: 36px; height: 36px; background: url(../img/main/more_btn_icon.png) 0 0 no-repeat; width: 30px; height: 30px; display: block;}


#latest ul.extract{display: flex; flex-wrap: wrap; }
#latest ul.extract li{width: 48%; margin: 0 4% 4% 0;}
#latest ul.extract li:nth-child(2n){margin: 0 0 4% 0;}
#latest ul.extract li:nth-child(5),#latest ul.extract li:nth-child(6){margin-bottom: 0;}
#latest ul.extract li a{display: block; background: #f6f7f8; padding: 30px; box-sizing: border-box; border-radius: 20px; border: 3px solid #f6f7f8}
#latest ul.extract li a .date::before{content: ''; background: url(../img/main/latest_date_spicon.png)0 0 no-repeat; width: 44px; height: 44px; display: inline-block; vertical-align: middle; margin-right: 10px; margin-bottom: 10px;}
#latest ul.extract li a .date{font-size: 16px; font-weight: 500; color: #888; display: flex; align-items: center; margin-bottom: 3px  }
#latest ul.extract li a .date span{font-size: 17px; font-weight: 500; color: #666;text-align: center; position: relative;margin-right: 20px;}
#latest ul.extract li a .date span::after{content: ''; background: #333; width:1px; height: 33px; position: absolute; right: -11px; top: 3px;}
#latest ul.extract li a .date b{font-size: 44px; font-weight: bold; color: #b5b5b5; }
#latest ul.extract li a .tit{font-size: 20px; font-weight: bold; line-height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; margin-bottom: 10px;}
#latest ul.extract li a .txt{font-size: 16px; font-weight: 500; color: #888; line-height: 24px;display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}

#latest ul.extract li.on a{border: 3px solid #51d1d0; background: #fff;}
#latest ul.extract li.on a .date::before{background-position: -44px 0}
#latest ul.extract li.on a .date b{color: #333;}


#latest .latest_r{width: 100%; max-width: 536px; }
#latest .latest_r .map_wrap{background: #ebfaed; padding:30px; box-sizing: border-box; position: relative; border-radius: 30px;}


#latest .latest_r .map_wrap .alim_slide .item {border-radius:20px;overflow:hidden;position:relative;}
#latest .latest_r .map_wrap .alim_slide .item a {display:block;font-size:22px;font-weight:500;}
#latest .latest_r .map_wrap .alim_slide .item img {max-width:100%;}
#latest .latest_r .map_wrap .alim_slide .item .txt_wrap {background:rgba(0,0,0,0.3);width:100%;height:100%;position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;transition:0.5s;}
#latest .latest_r .map_wrap .alim_slide .item:hover .txt_wrap {opacity:1;transition:0.5s;}
#latest .latest_r .map_wrap .alim_slide .item .txt_wrap span {display:block;color:#fff;padding:10px 20px;overflow:hidden;text-align:center}





#latest .latest_r .map_wrap .map_tit{font-size: 32px; font-weight: bold; color: #009481; font-family: "GmarketSansBold"; display: inline-block; position: absolute; top: 60px; right: 60px; text-align: center;}
#latest .latest_r .map_wrap .map_tit span{font-size: 12px; display: block; font-family: "pretendard"; font-weight: 400; letter-spacing: 0px;}


#latest .latest_r .map_wrap .map_box{padding-top: 50px; margin-bottom: 15px;}
#latest .latest_r .map_wrap .map_box img{max-width: 100%;}

#latest .latest_r .map_wrap .map_info{width: 100%; }
#latest .latest_r .map_wrap .map_info .tt{font-size: 26px; font-weight: bold; color: #58c48b; text-align: center; margin-bottom: 10px;}
#latest .latest_r .map_wrap .map_info ul.tx {min-height:115px;}
#latest .latest_r .map_wrap .map_info ul.tx li{font-size: 17px; font-weight: 500; line-height: 28px; color: #58c48b; padding-left: 50px; box-sizing: border-box;position:relative;padding:0 0 0 20px}

#latest .latest_r .map_wrap .map_info ul.tx li::before{content: ''; background: url(../img/main/map_info_spicon.png)0 0 no-repeat; width: 20px; height: 18px;position:absolute;left:-5px;top:2px}
#latest .latest_r .map_wrap .map_info ul.tx li:nth-child(2)::before{background-position: -20px 0;}







.latest_r .org_list_cmn {display:none;display:none;justify-content: center;flex-direction: column;align-items: center;}
.latest_r .org_list_01 {display:flex;}
.latest_r ul.pagination{display: flex; justify-content: center; padding-top: 30px;}
.latest_r ul.pagination li{margin: 0 10px 0 0;}
.latest_r ul.pagination li:last-child{margin: 0;}
.latest_r ul.pagination li a{display: block; font-size:0px; width:13px; height:13px;background:#ddd;}
.latest_r ul.pagination li.on a{background:#85d3aa;}n








@media all and (max-width:1400px){
    
    #latest .inner_wrap{width: 98%; }
}


@media all and (max-width:1300px){
    
    #latest .inner_wrap{flex-direction: column; }
    
    
    #latest .latest_l{width: 100%; margin-bottom: 40px;}
    #latest .latest_r{width: 100%; max-width: none;}
    #latest .latest_r .map_wrap .map_tit{position: static; display: block; }
    #latest .latest_r .map_wrap .map_box{text-align: center; padding-top: 10px;}
    #latest .latest_r .map_wrap .map_info ul.tx li{padding-left: 0; text-align: center;}
    
}


@media all and (max-width:768px){
    
    #latest{margin-bottom: 30px;}
    #latest .tit_wrap{ margin-bottom: 20px;}
    #latest .tit_wrap h2{font-size: 28px; }
    
    #latest .latest_l{margin-bottom: 30px;}
    #latest ul.extract li{width: 100%; margin: 0 0 10px 0;}
    #latest ul.extract li:nth-child(2n){width: 100%; margin: 0 0 10px 0;}
    #latest ul.extract li:nth-child(5){margin: 0 0 10px 0;}
    #latest ul.extract li:last-child{margin: 0;}
    
    #latest ul.extract li a .date span{font-size: 15px;}
    #latest ul.extract li a .date b{font-size: 38px;}
    #latest ul.extract li a .tit{font-size: 17px;}
    #latest ul.extract li a .txt{font-size: 14px; line-height: 22px;}
    
    #latest .latest_r .map_wrap .map_tit{font-size: 28px;}
    #latest .latest_r .map_wrap .map_tit span{font-size: 10px;}
    
    #latest .latest_r .map_wrap .map_info .tt{font-size: 22px;}
    #latest .latest_r .map_wrap .map_info ul.tx li{font-size: 15px; line-height: 24px;}
}


@media all and (max-width:420px){
    #latest ul.extract li a{padding: 20px;}
}