@charset "utf-8";

/* 메인 비주얼 */

.banner .bx-pager{position:absolute;width:100px;bottom:20px;text-align:center;left:50%; margin-left:-50px;  height:63px;}
.banner .bx-controls-auto{position:absolute;left:50%;width:60px; margin-right:-30px; bottom:85px; text-align:center;} 
.banner .bx-pager div{display:inline-block;margin:0 4px; vertical-align:top}
.banner .bx-pager div a{width:14px;height:14px;border:0;display:block;border-radius:100%; font-size:0; line-height:0;padding:0; border:3px solid #fff; }
.banner .bx-pager div a.active{ border:none}
.banner .bx-prev{background: url(/user/default/image/icon/bxSlider_prev1.png) no-repeat; width:63px; height:63px; left:10%}
.banner .bx-prev:hover{background: url(/user/default/image/icon/bxSlider_prev1.png) no-repeat;}
.banner .bx-next{background: url(/user/default/image/icon/bxSlider_next1.png) no-repeat; width:63px; height:63px; right:10%}
.banner .bx-next:hover{background: url(/user/default/image/icon/bxSlider_next1.png) no-repeat;}
.banner .bx-prev, .banner .bx-next { top: 53%;}
.banner .bx-start, .banner .bx-stop  { display: block; font-size:0px;}
.banner .bx-start:after {content: '\f04b'; font-size:16px; color:#fff; font-family: 'FontAwesomeS'; }
.banner .bx-start.active:after { color:#31a4db;  }
.banner .bx-stop:after {content: '\f04d'; font-size:16px;color:#fff; font-family: 'FontAwesomeS'; }
.banner .bx-stop.active:after { color:#31a4db; }
.banner .bx-controls-auto-item a:foucs {outline:2px solid #000 !important;}
.banner .bx-controls-auto .bx-controls-auto-item{display:inline-block;   margin:0 6px }



#recentMB1 .banner {font-size:1.3em;}
#recentMB1 .banner,#recentMB1 .banner ul{height:0;padding-bottom:50%;}
#recentMB1 .bannerCopy{position:absolute;left:50%;top:90%; text-align:center; }
#recentMB1 .bannerCopy *{position:relative;  text-align:center;   color:#fff;}
#recentMB1 .active-slide .bannerCopy div{animation-name:fadeInUp;}
#recentMB1 .banner .bannerCopy span{display:block;}
#recentMB1 .banner .bannerCopy strong{ font-weight:bold; font-size:120%;}
#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 {position: relative;display:inline-block; font-size:120%; padding:10px 5%;}
#recentMB1 .banner .bannerCopy .bannerCopy1:before {content:''; position: absolute;  background: #0e3f99; border-left:6px solid #e00000; top:0%; bottom: 0; right: 0; left: 0;  -ms-transform: skewX(-30deg);  transform: skewX(-30deg);}
#recentMB1 .banner .bannerCopy .bannerCopy2 { font-size:330%; font-weight:bold;  margin:20px 0}
#recentMB1 .banner .bannerCopy .bannerCopy3 {font-size:150%;  font-weight:400; }



#recentMB1 .banner .bannerCopy.copy-position4  {top:66%;}
#recentMB1 .banner .bannerCopy.copy-position4 .bannerCopy1 { font-size:100%; padding:8px 2%; border-radius:40px; background-color:#0068b7;}
#recentMB1 .banner .bannerCopy.copy-position4 .bannerCopy1:before {display:none;}
#recentMB1 .banner .bannerCopy.copy-position4 .bannerCopy2 { font-size:150%; font-weight:300;  margin-bottom:0px}
#recentMB1 .banner .bannerCopy.copy-position4 .bannerCopy3 {font-size:300%; color:#000; font-weight:bold; }

section{position:relative;display:block;font-size:1em;}
section:after{content:'';display:table;clear:both;}

.m_tit *{text-align:center}
.m_tit h4{font-size:300%; color:#000 !important; font-weight:600}
.m_tit h4.v2{font-size:250%;}
.m_tit p{font-size:130%; font-weight:200; color:rgba(0,0,0,0.3)}
.m_tit span{display:block; font-size:250%; font-weight:600 }

.m_tit2 *{ color:#fff !important;}
.m_tit2 h4{position:relative;font-size:450%; padding-bottom:5%; font-family: Roboto;font-weight: 700;}
.m_tit2 h4:after{content:''; position:absolute; left:0; width:10%; bottom:0; border-bottom:1px solid #fff}
.m_tit2 p{font-size:130%; padding:7% 0  }
.m_tit2 span{font-size:150%; }

.m_btn {display:inline-block; color:#fff !important; font-weight:200; font-size:100%; padding:10px 0px; width:130px; text-align:center; border:1px solid rgba(255,255,255,0.3); border-radius:50px;;}
.m_btn:hover {color:#fff !important; border:1px solid rgba(255,255,255,0.8); }

.m_btn2 {display:inline-block; color:#fff !important; font-weight:200; font-size:100%; padding:15px 0px; width:180px; text-align:center; border:1px solid rgba(255,255,255,0.8); border-radius:50px;;}
.m_btn2:hover {color:#fff !important; border:1px solid rgba(255,255,255,0.8); }

.m_pad{padding:6% 0px}
.m_pad1{padding-bottom:5%; }
.m_pad2{padding:3% 0px}
.m_line{margin-top:-2%;padding:3% 0; border-top:1px solid #ddd}


.m_bg{background:#f6f6f6}



/* 사업소개 */
.m_business {position:relative;overflow:hidden;}
.m_business .col-lg-3{position:relative; }
.m_business .col-lg-3 .photo{position:relative; display:block; overflow:hidden;  margin:4% 0;    border: 1px solid #eee;}
.m_business .col-lg-3 .photo img{width:100%;transition:all 0.3s linear 0s; }
.m_business .col-lg-3:hover .photo img{ transform: scale(1.15); -webkit-transition: all .5s ; -moz-transition: all .5s ; -ms-transition: all .5s ; -o-transition: all .5s ; transition: all .5s ;
-webkit-animation: showElement .5s ; -moz-animation: showElement .5s ; -ms-animation: showElement .5s; -o-animation: showElement .5s ;}
.m_business .col-lg-3 .over{display:none;position:absolute; padding:45% 10% 15% 10%;left:0; right:0; top: 100%; bottom:0; opacity: 0;   background:rgba(0,53,157,0.8);  transition: all 0.3s;}
.m_business .col-lg-3:hover .over{ top: 0%;opacity: 1;  transition: all 0.3s;}
.m_business .col-lg-3:after{content:none; position:absolute;z-index:999; opacity: 0;left:15px; top:50px; width:30px; height:35px; background:#e00000; box-shadow:5px 5px 5px rgba(0,0,0,0.3);   -ms-transform: skewX(-30deg);  transform: skewX(-30deg);   transition: all 0.3s; }
.m_business .col-lg-3:hover:after{opacity: 1; top:80px; }
.m_business .col-lg-3 .over *{color:#fff;}
.m_business .col-lg-3 .over dt{font-size:250%;}
.m_business .col-lg-3 .over dt span{display:block; font-size:50%;}
.m_business .col-lg-3 .over em{display:block; margin:10% 0;font-size:110%; color:rgba(255,255,255,0.8)}
.m_business .col-lg-3 p{font-size:140%; text-align:center}

.ex {background:url(/user/default/image/main/main_quick_bg.jpg) no-repeat right bottom;  }
.main_quick li{background:#fff;border: 1px solid #eee;box-shadow: 2px 3px 2px rgb(0 0 0 / 10%); padding:9% 5%; width:47%;}
.main_quick li:last-child{margin-left:5%;}
.main_quick li h3{font-size:16px; color:#777;}
.main_quick li span{font-size:25px;color:#222; display:block;margin-bottom:15px;font-family: 'Noto bold'}
.main_quick li a{display:inline-block; background:#fff;padding:5% 10%; border:1px solid #888; font-size:16px; font-weight:400; margin-top:10%;}
.main_quick li a:hover{background:#60584c; color:#fff;}
.main_quick li i{margin-left:20px;}
.main_quick li a .arrow{display:inline-block; width:30px; height:14px; background:url('/user/default/image/icon/arrow02.png') no-repeat; background-size:contain !important; margin-left:25px; vertical-align:middle; position:relative; top:-2px; transition:transform 0.3s}
.main_quick li a:hover .arrow{display:inline-block; width:30px; height:14px; background:url('/user/default/image/icon/arrow01.png') no-repeat; background-size:contain !important; margin-left:25px; vertical-align:middle; position:relative; top:-2px; transition:transform 0.3s}

/* 게시물 타이틀 및 더보기 */
.recentHeader {float:left; width:20%;}
.recentHeader h3 {font-weight:normal; font-size:200%; font-weight:600; padding:10px 0 30px 10px;}
.recentHeader .more {    position: absolute;    left:10px;    top:70%; z-index:999}
.tabRecent .tabMore {    position: absolute;    right:6%;    top:13%;z-index:999}
.tabRecent .tabMore a, .recentHeader .more a {position:relative;  display: block;  width:50px;    height: 18px;    background:none;    font-size: 0;    line-height: 0;}
.tabRecent .tabMore a:after, .recentHeader .more a:after { content:'더보기';font-size:14px;  position: absolute;    right: 0;    top: 0; width:50px;    height: 18px;  color:#777}

/* 공지사항 리스트  */
#recentMR2 {position: relative; box-shadow:2px 3px 2px rgba(0,0,0,0.1);  background:#fff;  margin:0 15px; margin-top:2%; padding:2.5%;}
#recentMR2 .recentBody {  margin-left:12%;  padding:0 20px; }
#recentMR2 .recentBody .docTitle {  padding-left: 0px;   margin-top: 0px;   text-align: left;   display: block;   line-height: inherit; }
#recentMR2 .recentBody .docTitle:before { display:none}
#recentMR2 .recentBody .docTitle .title { font-size:140%;   height:38px; line-height:38px; color:#000}
#recentMR2 .recentBody .docTitle .date {  position: absolute;   top:0%;   font-size: 120%;  line-height:38px;  color:#777;   font-family: Tahoma !important; }
#recentMR2 .recentBody .docTitle .icon {  display:none }


/* 컨설팅사례 */
.ex .col-md-7{z-index:9; padding:0 0;}
.ex:before{content:''; position: absolute;  background: #0087a9;  top:0%; bottom: 0; left: 0; right:58.333333% }



/* 바로가기 */
.m_goto {position:relative;  overflow:hidden; }
.m_goto .col-md-6 .photo{position:relative; display:block; overflow:hidden;  margin:1% 0}
.m_goto .col-md-6 > .photo > img{width:100%;transition:all 0.3s linear 0s; }
.m_goto .col-md-6:hover > .photo  > img{ transform: scale(1.15); -webkit-transition: all .5s ; -moz-transition: all .5s ; -ms-transition: all .5s ; -o-transition: all .5s ; transition: all .5s ;
-webkit-animation: showElement .5s ; -moz-animation: showElement .5s ; -ms-animation: showElement .5s; -o-animation: showElement .5s ;}
.m_goto .col-md-6 dl{position:absolute;left:10%;top:25%; font-size:120%; }
.m_goto .col-md-6 dl *{color:#fff;}
.m_goto .col-md-6 dl dt{font-size:170%; font-weight:400; padding:5% 0}
.m_goto .col-md-6 dl dt img{width:auto;vertical-align: middle; margin-right:20px;}
.m_goto .col-md-6 dl dd{font-weight:300;}
.m_goto .col-md-6 dl dt .arrow{display:inline-block; width:30px; height:14px; background:url('/user/default/image/icon/arrow01.png') no-repeat; background-size:contain !important; margin-left:25px; vertical-align:middle; position:relative; top:-2px; transition:transform 0.3s}
.cm-arrow-btn:hover .arrow{transform:translateX(6px)}

/* 배너모음  */
#recentMR21 .bannerUnit {  width:220px !important; margin-right:10px; }
#recentMR21 .bannerUnit img{ border:1px solid #ddd;}








@media only screen and (max-width:1400px){
#recentMB1 .banner,#recentMB1 .banner ul{padding-bottom:60%;}
#recentMB1 .bannerCopy{top:80%;}
#recentMB1 .banner .bannerCopy .bannerCopy1 img{width:30%}
#recentMB1 .banner .bannerCopy .bannerCopy2 img{width:50%}
#recentMB1 .banner{font-size:0.8em;}

}


@media only screen and (max-width:1200px){
.m_business .col-lg-3 {width:50%; float:left; padding:10px 9px;}
}

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

.banner .bx-prev{background-size:100%; width:35px; height:35px; left:3%}
.banner .bx-prev:hover{background-size:100%;}
.banner .bx-next{background-size:100%;  width:35px; height:35px; right:3%}
.banner .bx-next:hover{background-size:100%;}

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

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

section{font-size:0.7em;}
.m_pad{padding:8% 0px}

.ex:before{ top:0%; bottom:43%; left: 0; right:0% }
#recentMC31 .recentBody .docTitle .title { font-size:150%;height:53px; line-height:25px; }
#recentMC31 .recentBody .docTitle .date { font-size:140%; bottom:10px;}
.m_tit2 h4:after {width: 5%;bottom: 0;   top: 50%;left: 50%;transform: translate(-50%, -50%);}
.m_tit2 p{font-size:16px;padding:2% 0;}
.m_tit2 span{font-size:16px;}
#recentMR2 { margin:0px; }

.main_quick li{width:100%; margin-bottom:20px;}
.main_quick li:last-child {margin-left:0%;}
.main_quick li a{margin-top:3%;padding:2% 10%;}
.ex{text-align:center;}

.m_business .col-lg-3 p{font-size:16px;}

}


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

#recentMB1 .banner,#recentMB1 .banner ul{padding-bottom:90%;}
#recentMB1 .banner .bannerCopy .bannerCopy1 img{width:40%}
#recentMB1 .banner .bannerCopy .bannerCopy2 img{width:70%}
#recentMB1 .bannerCopy{left:45%;}

#recentMB1 .banner .bannerCopy.copy-position4  {top:70%;}
#recentMB1 .banner .bannerCopy.copy-position4 .bannerCopy1 { width:80%; padding:5px 2% }
#recentMB1 .banner .bannerCopy.copy-position4 .bannerCopy2 { font-size:130%; margin-top:5px}
#recentMB1 .banner .bannerCopy.copy-position4 .bannerCopy3 {font-size:230%; }
#recentMB1 #banner-list4 {background-size:180% auto !important; background-position:center bottom !important;}



/* 게시물 타이틀 및 더보기 */
.recentHeader {margin-bottom:10px;}
.recentHeader h3 { font-size:180%; }

.recentThumb {padding-bottom:0em}

.banner .bx-pager{bottom:-20px}
.banner .bx-controls-auto{ bottom:65px;} 

.m_goto .col-md-4 dl{font-size:150%; }

#recentMR21 .bannerUnit {  width:140px !important;}
#recentMR21 .bannerUnit img{height:auto !important;}

.main_quick li h3 {font-size: 15px;}
.main_quick li span {font-size: 20px;}
.main_quick li a{font-size:15px;}

}

@media only screen and (max-width:540px){
#recentMB1 .banner .bannerCopy .bannerCopy1 { width:60%}
#recentMB1 .banner .bannerCopy .bannerCopy2 { font-size:200%;margin: 20px 0 5px 0;}
#recentMB1 .banner .bannerCopy div:nth-child(2){padding:0 20%;}
.banner .bx-prev, .banner .bx-next{display:none;}

.ex:before{  bottom:58%;  }
#recentMC31 .recentBody .docTitle { width:100%;  margin:5px 0%;}

.m_business .col-lg-3 p {font-size: 15px;}
.m_business .col-lg-3 .over{padding:23% 10% 15% 10%;}
.m_business .col-lg-3:after{left:10px;top:50px; width:20px; height:25px}
.m_business .col-lg-3:hover:after{opacity: 1; top:30px; }
.m_business .col-lg-3 .over dt{font-size:250%;}
.m_business .col-lg-3 .over dt span{display:block; font-size:50%;}
.m_business .col-lg-3 .over em{display:block; margin:10% 0;font-size:110%; color:rgba(255,255,255,0.8)}
.m_btn { padding:5px 0px; width:100px;}

.m_goto .col-md-6 dl {top: 4%;}
.m_goto .col-md-6 dl dt img{height:50px;}
.m_goto .col-md-6 dl dt{font-size:150%;}

.m_tit2 p{font-size:15px;padding:2% 0 5% 0;}
.m_tit2 span{font-size:15px;}

.main_quick li h3 {font-size: 14px;}
.main_quick li a{padding:4% 10%;margin-top:5%;font-size: 14px;}

.m_tit2 h4:after {top:70%;}

.recentHeader{width:30%;}

}