@charset "utf-8";

/* 메인 비주얼 */

#recentMB1 .banner .bx-pager{position:absolute;width:100%;top:auto;bottom:20px;text-align:center;}
#recentMB1 .banner .bx-pager div{display:inline-block;margin:0 4px;}
#recentMB1 .banner .bx-pager div a{width:13px;height:13px;border:0;display:block;border-radius:100%; font-size:0; line-height:0;padding:0;}
#recentMB1 .banner .bx-pager div a.active{background:yellow}
#recentMB1 .banner .bx-prev, .banner .bx-next { top: 55%;}
#recentMB1 .banner .bx-next{position: absolute;top: 50%;right: 100px;z-index: 100;width: 38px;height: 82px;background: url(/user/default/image/icon/bxSlider_next.png) no-repeat 0 0px; opacity: none;}
#recentMB1 .banner .bx-prev{position: absolute;top: 50%;left: 100px;z-index: 100;width: 38px;height: 82px;background: url(/user/default/image/icon/bxSlider_prev.png) no-repeat 0 0px; opacity: none;}

/* 배너모음  */

#recentMR1 .banner .bx-prev {position:absolute; top:0%; left:0px; z-index:100; width: 50px; height: 80px; text-indent: -999999px; background: url(/user/default/image/icon/bxSlider_prev.gif) no-repeat 0 0px; }
#recentMR1 .banner .bx-next {position:absolute; top:0%; right:0px; z-index:100; width: 50px; height: 80px; text-indent: -999999px; background: url(/user/default/image/icon/bxSlider_next.gif) no-repeat 0 0px;}
#recentMR1 .banner .bx-next:hover,.bx-prev:hover {background-position: 0 0;}
#bannerMR1 .bannerUnit{border:0px solid #e3e3e3; width: 310px !important; box-sizing: border-box; margin-right:10px;}
#bannerMR1 .bannerUnit:first-child {margin-left:0px;}
#recentMR1 .bx-viewport{ overflow:hidden; margin:0 50px;}
.m_banner{background:#f8f8f8; padding:50px 0;}


.Board:before{background-color:#59abdf}
.Board:before {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 56%;}

#recentMB1 .banner {font-size:1.3em;}
#recentMB1 .banner,#recentMB1 .banner ul{height:0;padding-bottom:60%;}
#recentMB1 .bannerCopy{position:absolute;left:50%;top:95%;}
#recentMB1 .bannerCopy *{position:relative;  text-align:center; }
#recentMB1 .active-slide .bannerCopy div{animation-name:fadeInUp;}
#recentMB1 .banner .bannerCopy span{display:block; font-weight:600}
#recentMB1 .banner .bannerCopy em{font-family: font-weight:600}
#recentMB1 .banner .bannerCopy div:nth-child(1) {-webkit-animation-delay:0.5s;animation-delay:0.5s;}
#recentMB1 .banner .bannerCopy div:nth-child(2) {-webkit-animation-delay:1s;animation-delay:1s;}
#recentMB1 .banner .bannerCopy div:nth-child(3) {-webkit-animation-delay:1.5s;animation-delay:1.5s;}
#recentMB1 .banner .bannerCopy .bannerCopy1 {font-size:170%;margin:0 0 1vmin;   color:#fff; text-shadow: 0 3px 5px rgba(0,0,0,0.3);}
#recentMB1 .banner .bannerCopy .bannerCopy2 {font-size:500%;  font-weight:600; color:#fff; text-shadow: 0 3px 5px rgba(0,0,0,0.3);}


section{position:relative;display:block;font-size:1em;}
section:after{content:'';display:table;clear:both;}
section dt, section strong{font-weight:normal;  font-family: 'Noto Medium';}


.main_tit {display:block;font-size:200%; margin:0em 0 3em 0; text-align:center}
.main_tit h4{position:relative;display:inline-block;font-size:200%;margin-bottom:15px; line-height:normal;  color:#2b2b2b; font-family: 'Noto Bold';}
.main_tit p{display:block;font-size:70%;margin:0 0 25px 0px; line-height:normal; color:rgba(0,0,0,0.6);}

.m_btn { color:#fff !important; font-size:19px; padding:15px 50px 15px 50px;  background:#656565}
.m_btn:hover {color:#fff !important; background-color:#53c7be}
.m_btn.v2{ background:url(/user/default/image/main/arrew.png) 80% center no-repeat; background-color:none; border:1px solid rgba(255,255,255,0.2)}
.m_btn.v2:hover {border:1px solid rgba(255,255,255,0.5)}


.m_pad{padding:5% 0px 7% 0px}


.m_con01 {position:relative;overflow:hidden; font-size:220%; background:#bad43d; text-align:center; top:-150px;  opacity: 0.9;}
.m_con01 .cell{position:relative; display:inline-block !important; float:none !important; padding:6% 0px; overflow:hidden; vertical-align:top; width:24%; border-left:1px solid #abbd47; }
.m_con01 .cell:first-child {border-left: 0px solid #efefef;}
.m_con01 .cell img{margin-bottom:10px;}
.m_con01 .cell dt{display:block; color:#000;   line-height:200%; font-weight:500;   }
.m_con01 .cell dd{display:block;color:#3a7b05;font-size:100%; padding:5px 0px; font-weight:500;  }
.m_con01 .cell SPAN{display:inline-block;color:#fff;font-size:90%; padding:7px 30px; font-weight:300; letter-spacing:0em; margin-top:10px }
.pro_more{background:#e9eaeb; color:#000; display:block; text-align:center; padding:15px 0; font-size:150%}

.m_bg01{background:#f3f3f3}


.m_con03 {position:relative;overflow:hidden; font-size:200%; padding:10% 0px 10% 0px}
.m_con03 .cell{position:relative; float:left;  padding:3% 15px; overflow:hidden;  text-align:center; border-left:1px solid #efefef}
.m_con03 .cell:first-child{border-left:0px solid #efefef}
.m_con03 .cell img{margin-bottom:30px; }
.m_con03 .cell dt{display:block; color:#000;   line-height:200%; font-weight:500;   }
.m_con03 .cell dd{display:block; color:#777;font-size:60%; line-height:1.5;  padding:5px 0px;}
.m_con03 .cell dd.main_cell{font-size:110%; color:#59abdf;     padding: 0px 0px;font-family: 'Heebo';font-weight: 800;}





.m_bg01{background:#f3f3f3}




.recentThumb {margin:0 -15px; padding-bottom:10em}
.recentThumb .cell {width:25%; padding:20px 15px }
.recentThumb .cell .title a {font-size:130%}



.Portfolio .recentThumb .cell{padding:0;}
.Portfolio .cell .thumb{background:#e3e3e3;}
.Portfolio .cell:hover:before{content:'';position:absolute;left:1px;top:1px;right:1px;bottom:1px;background:rgba(0,0,0,0.5);}
.Portfolio .cell:hover:after{content:'';position:absolute;left:50%;bottom:25%;margin-top:10px;margin-left:-23px;width:55px;height:55px;background:url(/user/default/image/icon/more_btn.png) no-repeat 0px 0px;}


.Portfolio .cell .thumb{border-color:#fff !important;}
.Portfolio .cell .thumb:before{content:'';position:absolute;left:1px;top:1px;right:1px;bottom:1px;z-index:2}
.Portfolio .cell .title,.Portfolio .cell .date{display:none;margin:0;position:absolute;top:40%; width:100%}
.Portfolio .cell:hover .title,.Portfolio .cell:hover .date{display:block;color:#fff;text-align:center} 
.Portfolio .cell:hover .date{font-weight:300; font-size:90%}
.Portfolio .cell:hover:before,.Portfolio .cell:hover:after,.Portfolio .cell:hover .title,.Portfolio .cell:hover .date{animation-name:slideInUp;animation-duration:0.5s;}


#recentMC31 {position:relative;margin:15px 0;padding:70px 50px 70px 20px}
#recentMC31:before{ content:'';position:absolute;top:0;left:15px; right:15px; bottom:0;}
#recentMC31 .recentHeader {position:relative}
#recentMC31 .recentHeader h3 {font-size:300%;padding-bottom:10px;border-bottom:1px solid #7abce5;font-weight:500; color:#fff;}
#recentMC31 .recentHeader .more {top:30px; right:0px;}
#recentMC31 .recentBody {display:block; font-size:110%;}
#recentMC31 .recentBody .docTitle{border-bottom:1px solid #7abce5; line-height:30px; padding-bottom:20px; }
#recentMC31 .recentBody .docTitle .title {color: #fff;font-size: 17px; }
.recentBody .docTitle:before {content:none}
.recentBody .docTitle .date {position: absolute;right: 5px;bottom: 12px;font-size: 17px;color: #fff;font-family: Noto Light !important;}
.recentHeader .more a {display: block;width: 16px;height: 13px;background: url(/user/default/image/icon/more_icon.png) no-repeat;}









@media only screen and (max-width:1400px){
.ban_go img {position:absolute; left:-2%; top:5%; width:60%;}
.ban_go dl {position:relative;left:60%; top:5%}
.ban_go  {padding:4% 0%; }
}


@media only screen and (max-width:1200px){
.Board:before {width: 100%;height: 500px;}
.m_con01 .cell{width:24%;}
#recentMC31 {padding: 70px 0px 70px 0px}
.m_con03 .cell{    padding: 3% 0px;}

}


@media only screen and (max-width:1024px){
#recentMB1 .banner{font-size:0.8em;}
#recentMB1 .banner,#recentMB1 .banner ul{padding-bottom:80%;}
#recentMB1 .bannerCopy{top:90%;}


#recentMC21 .banner{font-size:13px;}
#recentMC21 .banner, #recentMC21 .banner ul{padding-bottom:330px;}
#recentMC21 .bannerCopy{top:60%}


.m_con01 .container a{float:left; width:100%; border-left:0px; border-bottom:2px dashed rgba(255,255,255,0.2); margin:10px 0px }
.m_con01 .container a:last-child{border-bottom:0px dashed rgba(255,255,255,0.2);}
.m_con01 .container a dl dt{font-size:90%;}
.m_con01 .container a dl dd{font-size:70%; color:rgba(255,255,255,0.8); padding-top:8px}

.f_l {float:none}
.f_r {float:none}
}

@media only screen and (max-width:980px){

.m_con03 .container{padding:30px 50px; font-size:0.7em}
section{font-size:0.7em;}
.main_tit h4{font-size:300%;}
.main_tit h4:before {margin-left:-25px; top:0px; width:20px; height:2px; }
.main_tit p {margin:0px 0 15px 0; font-size: 120%;}
.main_tit {font-size:2em;}

.recentThumb .cell {width:50%; }
.recentThumb .cell .title a {font-size:150%}


}

@media only screen and (max-width:767px){
#recentMB1 .banner{font-size:0.7em;}
#recentMB1 .banner .bannerCopy .bannerCopy2 {font-size:300%; }
#recentMB1 .bannerCopy{left:45%;}
#recentMB1 .banner .bx-prev, #recentMB1 .banner .bx-next{display:none;}

.m_con01 .cell img{width:50%;}
.m_con03 .container {text-align:center}
.m_con03 .container .btn_area{position:relative; right:0px; top:20px; width:100%; text-align:center}

#recentMC21 .banner{font-size:10px;}
#recentMC21 .banner, #recentMC21 .banner ul{padding-bottom:250px;}
#recentMC21 .bannerCopy{top:62%}
#recentMC21 .banner .bannerCopy .bannerCopy3 {width:150px; padding:10px 180px 10px 70px; margin:20px auto}
#recentMC21 .banner .bannerCopy .bannerCopy2 {font-size:120%; }
#recentMC21 .banner .bannerCopy .bannerCopy1:before {margin-left:-25px; top:0px;  width:20px; }

#recentMC31 .recentBody .docTitle .title, .recentBody .docTitle .date{font-size:15px;}
#recentMC31 .recentHeader .more {top: 20px;}

.m_con01 {font-size:160%; top: -100px;}
.m_con01 dd{font-size:80%;}

.ban_go img {position:relative; width:80%; left:10%; top:0%; margin:5% auto}
.ban_go dl {position:relative;left:20%; top:8%}
.ban_go  {padding:4% 0%; font-size:90%}

.Board:before{height:450px;}


}


@media only screen and (max-width:600px){
.pad_none{padding: 0 0;}
.main_tit h4{margin-bottom:5px;    font-size: 200%;}
.m_btn {font-size: 100%;padding: 10px 30px 10px 30px;}
.m_con01 {top: -50px;}
.m_con03{font-size:150%;}
.m_con03 .cell img{width:60%;}
.m_con03 .cell dt{line-height:130%;}
.m_con03 .cell dd{display:none;}
.m_con03 .cell dd.main_cell{display:block;}
#recentMC32{padding:0 0;}
#recentMC31{padding: 50px 0px 50px 0px;}
#recentMC31 .recentBody .docTitle{padding-bottom: 10px;}
.Board:before {height: 380px;}



}