/*========== main ==========*/
.main-visual {width:100%;height:642px;margin:0 auto;background:url('../../Service/images/sub/visual_bg.png') no-repeat 50% 50%;}
.m-visual-tit {width:100%;text-align:center;padding-top:170px;margin-bottom:40px;}
.m-visual-tit .sub-tit {font-size:28px;color:#fff;font-weight:300;margin-bottom:10px;}
.m-visual-tit h3 {padding-top:0;font-weight:400;background:url('../../Service/images/sub/h3_topline1.png') no-repeat 50% 0;}
.m-visual-tit h3 strong {color:#e2af00;font-weight:700;}

/*auto banner*/
.visual-banner-wrap {width:1260px;margin:0 auto;position:relative;}
.visual-banner-wrap .btn-prev {position:absolute;left:0;top:87px;}
.visual-banner-wrap .btn-next {position:absolute;right:0;top:87px;}
/*banner 효과*/
.banner-base {display:inline-block;width:211px;height:211px;margin-right:10px;padding-top:50px;text-align:center;float:left;box-sizing:border-box;}
.banner-base:after {display:inline-block;position:relative;border-radius:50%;content:'';box-sizing:content-box;backface-visibility:hidden;}
.banner-effect {background:url('../../Service/images/sub/visual_cbg.png') no-repeat;}
/*.banner-effect:after {width:201px;height:201px;top:-157px;left:0px;box-shadow: 0 0 0 4px #fff;opacity:0;-ms-transform:scale(.8);-webkit-transform:scale(.8);transition:transform .2s,opacity .2s;}*/
.banner-effect:hover {background:url('../../Service/images/sub/visual_cbg_hover.png') no-repeat;}
.banner-effect:hover p {color:#fff;}
.banner-effect:hover:after {transform:scale(1);-ms-transform:scale(1);/* IE 9 */-webkit-transform:scale(1);/* Safari */opacity:1;}
.banner-tit {margin:0 auto;padding-bottom:15px;color:#e2af00;font-size:24px;}
.banner-sub {width:160px;color:#fff;font-size:18px;font-weight:300;margin:0 auto;}
.banner-sub.topline {border-top:1px solid #bab6b5;padding-top:15px;}

/*주요사업분야영역*/
.content-business {width:100%;height:420px;}
.business-area {width:1260px;margin:20px auto 0;position:relative;}
.business-area li {width:290px;margin-right:33px;float:left;}
.business-area li a {font-size:16px;color:#999;display:block;}
.business-area li a:hover {text-decoration:underline;}
.business-area li strong {font-size:22px;color:#333;display:block;padding:15px 0 10px 0;}
/*주요사업분야 detail페이지*/
.detail-area {width:1260px;height:230px;padding-top:20px;text-align:center;border:1px solid #ccc;background-color:#fff;box-sizing:border-box;position:absolute;left:0;top:0;}
.detail-area li {width:100%;font-size:16px;color:#333;}
.detail-area li strong {font-size:30px;font-weight:400;color:#444;padding:0px;}
.detail-area li strong span {font-size:20px;}
.detail-table {width:1005px;margin:30px auto 0;}
.detail-table li {width:auto;margin-right:0px;float:left;}
.detail-table-list {display: inline-block; vertical-align: middle;}
.detail-table li .detail-table-list li {width:230px;padding-left:17px;text-align:left;font-size:15px;float: none; position:relative;}
.detail-table li .detail-table-list li::before {display:block; content:'-'; font-size: 15px;position: absolute;left: 8px;}
.detail-table.cms-table {width:604px;margin-top:20px;}
.detail-table.cms-table li {margin-right:20px;}
.detail-table.kdms-table {width:1062px;}
.detail-table.kdms-table li {margin-right:10px;}
.detail-table.si-table {width:742px;margin-top:20px;}
.detail-table.si-table li {margin-right:10px;}
.bg-tit {width:84px;height:84px;line-height:84px;color:#fff;font-weight:400;display:inline-block;vertical-align: middle;background:url('../../Service/images/common/business_bg00.png') no-repeat;}
.bg-tit01 {width:258px;height:53px;line-height:53px;color:#fff;font-weight:400;display:block;background:url('../../Service/images/common/business_bg01.png') no-repeat;float:left;}

/*ourWork영역*/
.content-work {width:100%;height:490px;background-color:#f4f6f7;}
.work-inner {width:1260px;margin:0 auto;position:relative;}
.work-subTitle {text-align:center;font-size:20px;color:#333;margin-bottom:35px;}
.work-btnArea {position:absolute;left:0;top:60px;width:100%;}
.work-btnArea span {width:120px;height:73px;line-height:73px;border:1px solid #ccc;display:inline-block;text-align:center;margin-right:10px;}
.work-sites {position:relative;}
.work-sites li {position:absolute;}
.work-sites .ws-item0 {left:0;top:10px;opacity:0;}
.work-sites .ws-item1 {left:323px;top:20px;opacity:0;}
.work-sites .ws-item2 {left:646px;top:30px;opacity:0;}
.work-sites .ws-item3 {left:969px;top:40px;opacity:0;}

/*mini-map영역*/
.content-map {width:100%;height:1000px;margin:0 auto;padding-top:60px;background:url('../../Service/images/sub/map_bg.png') no-repeat 50% 50%;}
.mini-map {width:1260px;height:720px;margin:0 auto;}
.mini-map-inner li {float:left;}
.mini-map-inner li strong {width:420px;display:block;font-size:24px;font-weight:500;color:#fff;text-align:center;margin-top:55px;}
.mini-map-inner .con03 strong, .mini-map-inner .con04 strong {font-size:30px;}
.mini-map-inner .con02, .mini-map-inner .con03, .mini-map-inner .con04, .mini-map-inner .con05 {width:420px;height:290px;}
.mini-map-inner .con01 {width:420px;height:580px;background:url('../../Service/images/sub/map_contact.png') no-repeat;}
.mini-map-inner .con02 {background:url('../../Service/images/sub/map_demo.png') no-repeat;}
.mini-map-inner .con03 {background-color:#487491;}
.mini-map-inner .con04 {background-color:#30405d;}
.mini-map-inner .con05 {background:url('../../Service/images/sub/map_coinfo.png') no-repeat;}
.mini-map-inner .con06 {width:1260px;height:78px;padding:20px 30px;background:url('../../Service/images/sub/con04_bg.png');box-sizing:border-box;position:relative;}
.mini-map-inner .con06 span {display:block;width:92px;height:34px;background:rgba(255, 255, 255, 0.2);float:left;font-size: 16px; color: #fff; font-weight: 500; line-height: 34px; text-align: center; border-radius: 20px;} /* url('../../Service/images/common/notice.png') no-repeat */
/*con06 notice-table*/
.notice-table {}
.notice-table tr {float:left;}
.notice-table td, .notice-table td a {height:30px;color:#fff;font-size:16px;}
.notice-table td a:hover {text-decoration:underline;}
.notice-table .notice-tit {width:350px;padding-left:30px;}
.notice-table .notice-date {width:150px;text-align:center;font-weight:300;position:relative;}
.notice-table .notice-date:after {content:'';position:absolute;top:0px;right:0;height:30px;border-right:1px solid #6e6a6c;}
.notice-table .notice-date.after-border0:after {border-right:none;}
.btn-notice {position:absolute;right:30px;top:22px;border:none;background:transparent;padding:0;}

.text-wrap {margin-top:170px;text-align:center;font-size:16px;}
.text-wrap .text-phone {font-size:38px;font-weight:700;color:#fff;margin-bottom:10px;}
.text-wrap .text-email {color:#fff;height:80px;}
.text-wrap .text-email span {font-weight:400;}
.text-wrap .text-time {color:#a4dce8;height:43px;margin-top: 25px;}
.demo-wrap {width:382px;margin:45px auto 0;}
.demo-wrap li{float:left;margin-right:10px;margin-bottom:10px;}
.coninfo-wrap {text-align:center;color:#bec2c8;font-size:16px;margin-top:20px;}

/*clientCompany영역*/
.content-client {width:100%;height:280px;background:url('../../Service/images/sub/client_bg.png');padding: 0 2rem; box-sizing: border-box;}
.client-banner-wrap {width:1260px;margin:20px auto 0;}

/*clientTab메뉴영역*/
.client-tabs {width:470px;margin:0 auto 25px;}
.client-tabs li {float:left;}
.client-tabs a {display:block;padding:0 30px 5px 30px;font-size:18px;position:relative;}
.client-tabs a:after {content:'';position:absolute;top:5px;right:0;height:15px;border-right:1px solid #333;}
.client-tabs a.after-border0:after {border-right:none;}
.client-tabs a:hover, .client-tabs a.active {background:url('../../Service/images/btn/underline.png') no-repeat;background-position:50% 100%;}

/*clientBanner영역*/
.tabs-content-wrap {position:relative;}
.client_slider li {background:#fff;}
.client_slider li a:hover {cursor:default;}
.bx-controls-direction .bx-prev, .bx-controls-direction .bx-next {position:absolute;width:57px;height:57px;top:0;}
.bx-controls-direction .bx-prev {left:0;background:url('../../Service/images/btn/banner_prev.png') no-repeat;}
.bx-controls-direction .bx-next {right:0;background:url('../../Service/images/btn/banner_next.png') no-repeat;}

/*nonslider*/
.nonslider li {float:left;margin-right:10px;width:210px;list-style:none;position: relative;}
.nonslider li:first-child {margin-left:85px;}

/*client_nonSlider*/
.client_nonSlider {width:650px;margin:0 auto;overflow:hidden;}
.client_nonSlider li {float:left;margin-right:10px;width:210px;background:#fff;}
@media all and (max-width: 1260px) {
	.client_slider li a img {width: 100%;}
}
@media all and (max-width: 1000px){
	/* 배너 */
	.main-visual {height: auto; background-size: cover;}
	.m-visual-tit {padding-top: 4.8rem; margin-bottom: 2rem;}
	.m-visual-tit .sub-tit {display: none;}
	.m-visual-tit .sub-tit-m {margin-bottom: 1rem; color: #fff; font-size: 1.4rem; line-height: 2rem; letter-spacing: -0.14px;}
	.m-visual-tit h3 {width: 100%; padding-top: 20px; background: url(../../Service/images/sub/h3_topline1.png) no-repeat 50% 0 / 30px 1px; font-weight: 500; font-size: 2.1rem;}
	.m-visual-tit h3 strong {color: #FFC705;}
	.visual-banner-wrap {width: 100%; padding-bottom: 4.8rem;}
	.visual-banner-wrap .btn-prev, .visual-banner-wrap .btn-next {display: none;}
	.visual_banner {display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 1.18%;}
	.banner-base {float: initial; width: 11rem; height: 11rem; border-radius: 100%; margin-right: 0; padding-top: 2.1rem;}
	.banner-effect {width: 11rem; height: 11rem; background: rgba(0, 0, 0, 0.5);}
	.banner-effect:hover {width: 11rem; height: 11rem; background: rgba(56, 125, 218, 0.75);}
	.banner-tit {padding-bottom: 0.6rem; color: #FFC605; font-size: 1.4rem; font-weight: 500; line-height: 1.6rem; letter-spacing: -0.28px;}
	.banner-sub {width: 100%; color: #fff; font-size: 1.2rem; font-weight: 400; letter-spacing: -0.12px; line-height: 1.8rem; word-break: keep-all;}
	.banner-sub.topline {position: relative; border-top: 0; padding-top: 0.6rem;}
	.banner-sub.topline::after {content:''; display: block; position: absolute; top:0; left: 50%; margin-left: -4rem; width: 8rem; height: 1px; background-color: rgba(255, 255, 255, 0.8);}
	/* 주요 사업분야 */
	.content-business {height: auto;}
	.content-business h2 {width: auto; color: #222; font-size: 1.8rem; font-weight: 500; padding-top: 3.2rem;}
	.business-area {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 12px 1.56%;width: 100%; margin: 1.2rem auto 0; padding: 0 2rem 3.2rem;box-sizing: border-box;}
	.business-area.after:after {content: none;}
	.business-area li {float:none; width: calc(50% - 1.56%); margin-top: 1rem; margin-right: 0%;}
	.business-area li img {width: 100%;}
	.business-area li strong {display: none;}
	.business-area li .btn_detail-area {display: flex; align-items: flex-start; justify-content: space-between;width: 100%; margin-top: 4px; text-align: left; border: 0; padding: 0; background: #fff;}
	.business-area li .btn_detail-area::after {content:''; display: inline-flex; width:20px; height:20px; margin-left: 4px; padding: 0.4rem 0; 
		background: #fff url('../../Service/images/sub/ico_Info.png') no-repeat center; vertical-align: middle;}
	.business-area li button strong {display: inline; font-size: 1.6rem; font-weight: 500; color: #333; padding: 0.4rem 0; line-height: 2.3rem; vertical-align: middle;}
	.business-area li a {display: none; font-size: 1.4rem; font-weight: 400; color: #777; line-height: 2rem;}
	.business-area li a.business-cont {display: block;}
		.detail-area {width: calc(100% - 40px); height: auto; left: 20px; padding: 32px 20px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15); z-index: 1;}
		.detail-area .btn-close {width: 12px; height: 12px; top: 14px; right: 14px; padding: 0;}
		.detail-area .btn-close img {width: 1.2rem; vertical-align: top;}
		.detail-area li {width: 100%; margin-top: 0; font-size: 1.4rem; font-weight: 400; color: #333; line-height: 2.2rem; text-align: left;}
		.detail-area li strong {font-size: 1.8rem;}
		.detail-area li strong span {display: block; margin-top: 2px; margin-bottom: 8px; font-size: 1.6re m; font-weight: 500; color: #333; line-height: 2.3rem;}
			/* 주요 사업분야 > 규정관리시스템 */
			.detail-table {width: 100%; margin: 0;}
			.detail-table > li {margin-top: 2rem; text-align: center;}
			/* 주요 사업분야 > 준법지원시스템 */
			.detail-table.cms-table {display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 11px; width: 100%;}
			.detail-table.cms-table.after:after {content:none;}
			.detail-table.cms-table li {width: auto; margin-top: 0; margin-right: 0;}
			/* 주요 사업분야 > 지식재산권 관리시스템 */
			.detail-table.kdms-table {width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 12px; margin-top: 2rem; padding: 0 2rem; }
			.detail-table.kdms-table.after:after {content:none;}
			.detail-table.kdms-table li {float: none; width: calc(100% / 4 - 12px); min-width: 280px; margin: 0;}
			.bg-tit01 {width: 100%; height: 44px; line-height: 44px; color: #fff; font-weight: 500; font-size: 14px; display: block; background: #1493D5; border-radius: 200px; float: none;}
			/* 주요 사업분야 > SI 개발 */
			.detail-table.si-table {width: 28rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 8px; margin: 2rem auto 0;}
			.detail-table.si-table.after:after {content:none;}
			.detail-table.si-table li {width: auto; margin-top: 0; margin-right: 0;}
			.detail-table.si-table li .bg-tit {width: 6.4rem; height: 6.4rem; line-height: 6.4rem; background: url(../../Service/images/common/business_bg00.png) no-repeat center / 64px 64px;}
	/* 작업 기관 */
	.content-work {height: auto; min-height: 38rem; padding: 3.2rem 2rem;  transition: height 0.1s linear;}
	.work-inner {width: 100%;}
	.work-inner h2 {font-size: 1.8rem; font-weight: 500; color: #222; width: 100%; margin: 0 auto; text-align: center; padding-top: 1.6rem;}
	.work-subTitle {font-size: 1.4rem; font-weight: 400; margin-top: 0.4rem; margin-bottom: 2rem;}
	.work-btnArea {display: none;}
	.m-work-mark {text-align: center;}
	.m-work-mark span {width: 7.3rem; height: 4.5rem; line-height: 4.5rem; border: 1px solid #ccc; display: inline-block; text-align: center;}
	.m-work-mark span + span {margin-left: 0.6rem;}
	.m-work-mark span img {width: 74%;}
	.work-sites {display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 3.12%;}
	.work-sites.after:after {content: none;}
	.work-sites li {width: calc(50% - 3.12%); max-width: 29rem; position: initial;}
	.work-sites li img {width: 100%;}
	.work-btnMore {margin-top: 2rem; text-align: center;}
	.work-btnMore .btn-more {position: initial; display: inline-block; width: 9.3rem; height: 4rem; background: url('../../Service/images/btn/arr-right.png') no-repeat right 4px center; 
		border: 1px solid #B4B4B4; padding-left: 1.6rem; line-height: 4rem; color: #222; font-weight: 500; font-size: 1.4rem; letter-spacing: -0.28px; text-align: left; }
	/* MAP */
	.content-map {padding-top: 0; height: auto; background: url(../../Service/images/sub/map_bg.png) no-repeat 50% 100%;}
	.mini-map {width: 84rem; height: auto; overflow: hidden;}
	.mini-map-inner.after:after {content: none;}
	.mini-map-inner .con02, .mini-map-inner .con05 {display: none;}
	.mini-map-inner .con06 {width: 100%; height: auto; padding: 3.2rem 2rem;}
	/* 공지 */
	.mini-map-inner .con06 span {float: none; margin: 0 auto 20px; width: 12.4rem; height: 2.9rem; line-height: 2.9rem;}
	.btn-notice {top: 3.2rem; right: 2rem;}
	.notice-table {width: 100%;}
	.notice-table tr {width: 100%;}
	.notice-table tr + tr {margin-top: 10px;}
	.notice-table td, .notice-table td a {font-size: 1.4rem;}
	.notice-table .notice-tit {width: calc(100% - 150px); padding-left:0;}
	.notice-table .notice-date {text-align: right;}
	.notice-table .notice-date:after {content: none;}
	.notice-table .notice-nolist {display: block; width: 100%; text-align: center;}
	/* 고객사 배너 */
	.content-client {height: auto; padding: 0 2rem 3.2rem;}
	.content-client h2 {font-size: 1.8rem; font-weight: 500; color: #222; width: 100%; margin: 0 auto; text-align: center; padding-top: 3.2rem;}
	.client-banner-wrap {width: 100%;}
	.client-tabs {width: 29rem; margin: 0 auto 20px;}
	.client-tabs a {display: block; padding: 0 16px 5px 16px; font-size: 1.4rem; font-weight: 500; position: relative;}
	.bx-controls-direction .bx-prev {left: 0; background: url(../../Service/images/btn/banner_prev.png) no-repeat 0 center / 45px 45px;}
	.bx-controls-direction .bx-next {right: 0; background: url(../../Service/images/btn/banner_next.png) no-repeat 0 center / 45px 45px;}
	.bx-controls-direction .bx-prev, .bx-controls-direction .bx-next {position: absolute; width: 45px; height: 45px; top: 50%; transform: translateY(-50%);}
}
@media all and (max-width: 870px) {
	.mini-map {width: 100%;}
	.mini-map-inner .con01 {width: 100%; height: 48.3rem; background: #02B5D0 url(../../Service/images/sub/m-map_contact.png) no-repeat center;}
	.mini-map-inner .con03, .mini-map-inner .con04 {width: 50%; height: 24.1rem;}
	.mini-map-inner li strong {width: 100%; margin-top: 0; font-size: 1.6rem; position: absolute; top: 34px; left: 50%; transform: translateX(-50%); padding-bottom: 34px;}
	.mini-map-inner .con01 strong, .mini-map-inner .con03 strong, .mini-map-inner .con04 strong {font-size: 1.6rem; position: relative; z-index: 1; line-height: 23px;}
	.mini-map-inner .con03 strong::after, .mini-map-inner .con04 strong::after {
		content:''; display: block; width: 11.2rem; height: 2.9rem; background-color: rgba(0, 0, 0, 0.2); border-radius: 20px; position: absolute; top:-2px; left: 50%; margin-left: -5.6rem; z-index: -1;
	}
	.mini-map-inner .con04 strong::after {width: 18.4rem; margin-left: -9.2rem;}
	.text-wrap {margin-top: 14.5rem; font-size: 1.4rem;}
	.text-wrap .text-phone {font-size: 3rem;}
	.text-wrap .text-email {height: 6rem; line-height: 2rem;}
	.text-wrap .text-time {margin-top: 0; height: 8rem; padding-top: 4rem; line-height: 2rem; position:relative; color: rgba(255, 255, 255, 0.8);}
	.text-wrap .text-time::after {content:''; width: 10rem; height: 0.1rem; background-color: rgba(255, 255, 255, 0.8); position: absolute; top:2rem; left:50%; margin-left: -5rem;}
	.btn-minimap {width: 10.5rem; border: 1px solid rgba(255, 255, 255, 0.5); background: url(../../Service/images/btn/arr-right-wt.png) no-repeat right 4px center; padding-left: 1.6rem; margin: 20px auto 0;  font-weight: 500;}
	.demo-wrap {width: 100%; margin: 4rem auto; padding: 0 2rem;  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 4px;}
	.demo-wrap.after:after {content: none;}
	.demo-wrap li {float: none; width: calc(50% - 5px); max-width: 26rem; margin-right: 0; margin-bottom: 0;}
	.demo-wrap li:last-child .btn-minimap.btn-wide {padding-left: 1.2rem;}
	.btn-minimap.btn-wide {width: 100%; margin: 0; background: url(../../Service/images/btn/arr-right-wt.png) no-repeat right 4px center;  letter-spacing: -0.28px;}
	.coninfo-wrap {color: #fff; font-size: 1.4rem; font-weight: 400; line-height: 2rem;}
}
@media all and (max-width: 768px) {
	.visual_banner li:nth-child(-n+2) {width: calc(50% - 1.18%);}
	.visual_banner li:first-child {text-align: right;}
	
	.mini-map-inner .con03, .mini-map-inner .con04 {width: 100%;}
	.demo-wrap {padding: 0 1.5rem;}
	/* 주요 사업분야 */
	.detail-table.cms-table {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 28rem; margin: 2rem auto 0;}
	
	/* 고객사 배너 */
	.client_nonSlider {display: flex; justify-content: center;width: 100%;}
	.client_nonSlider li {width: calc(30% - 11px); float: none;}
	.client_nonSlider li a img {width: 100%;}
	.bx-controls-direction .bx-prev, .bx-controls-direction .bx-next {width: 2.4rem; height: 2.4rem;}
	.bx-controls-direction .bx-prev {left: 0; background: url(../../Service/images/btn/banner_prev.png) no-repeat 0 center / 2.4rem 2.4rem;}
	.bx-controls-direction .bx-next {right: 0; background: url(../../Service/images/btn/banner_next.png) no-repeat 0 center / 2.4rem 2.4rem;}
}
@media all and (max-width: 420px) {
	/* 주요 사업분야 */
	.detail-table > li {display: flex;}
	.bg-tit {flex-shrink: 0;}
	.detail-table-list {width: calc(100% - 84px);}
	.detail-table li .detail-table-list li {width: 100%;}
}
@media all and (max-width: 360px) {
	/* 주요 사업분야 > 준법지원시스템 */
	.detail-table.cms-table {width: 87.5%; gap: 12px 3.92%;}
	/* 주요 사업분야 > 지식재산권 관리시스템 */
	.detail-table.kdms-table li {min-width: 24rem;}
	/* 주요 사업분야 > SI 개발 */
	.detail-table.si-table {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; width: 100%;} 
}