*, *::before, *::after {
	box-sizing: inherit;
}
html {
	font-size: 100%
}
html {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	height:100%;
}
@media screen and (min-width: 768px) {
	html {
		font-size: 16px;
	}
}
body {
	margin: 0;
	height:100%;
}
html, body, div, article, section, main, footer, header, form, fieldset, legend, pre, code, a, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, textarea, table, td, th, tr, input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"], .border-box {
    box-sizing: border-box;
}
article, aside, footer, header, nav, section {
    display: block;
}
a {
 text-decoration: none;
 color: inherit;
}
.container {
		max-width: 768px;
		margin: 0 auto;
	}
ul {
	list-style: none;
}
img {
	max-width: 100%;
}
.w-100 {
    width: 100%;
}
.h-100 {
	height: 100%;
}

.db {
    display: block;
}
.dib {
    display: inline-block;
}
.dtb {
	display: table;
}
.dtb-c {
	display: table-cell;
}



/*
화면 너비에 따라 br 적용
<span class="pc_br"></span>
*/
@media (min-width: 768px){
	.pc_br {
	    display: block;
	}
}
.title-under {	/* 제목밑줄 */
    margin: 15px auto 40px;
    width: 34px;
    height: 2px;
    background: #d41217;
    display: block;
}
.aln-c {	/* 텍스트 가운데 정렬 */
	text-align: center;
}
.valn-m {
vertical-align: middle;
}
.wrapper {
	overflow: hidden;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 10px;
}
.section {	/* 섹션 */
	padding: 3rem 0;
}
.float-clear::after {
  content: "";
  clear: both;
  display: table;
}



hr {
	border: 0;
  border-top: 1px solid #e5e5e5;
  margin: 14px 0;
}
.font-color-red {color: #d41217;}	/*포인트색*/
.sub-title {	/*소제목*/
	margin-bottom: 30px;
}
h2 {
		font-size: 2rem;
	}
h3 {
		font-size: 1.5rem;
	}
h3.sub-text {	/*소제목아래 텍스트*/
	font-size: 1.3rem;
}
h4 {
	font-size: 1.17rem;
}

.f09 {
	font-size: .9rem;
	}
	.f10 {
	font-size: 1rem;
	}
	.f11 {
	font-size: 1.14rem;
	}
	.f12 {
	font-size: 1.25rem;
	}
	.f15 {
	font-size: 1.5rem;
	}
	.f17 {
	font-size: 1.75rem;
	}
	.f18 {
		font-size: 1.875rem;
	}
	.f19 {
	font-size: 1.9rem;
	}	
	.f20 {
	font-size: 2rem;
	}	
	.fw1 {
	font-weight: 100;
	}
	.fw3 {
	font-weight: 300;
	}
	.fw4 {
	font-weight: 400;
	}
	.fw5 {
	font-weight: 500;
	}
	.fw7 {
	font-weight: 700;
	}
	.fw9 {
	font-weight: 900;
	}


.lh-18 {
		line-height: 1.8;
	}
	
/*
margin
--------------------------------- */
.mt02 {
	margin-top: .2rem
}
.mt10 {
	margin-top: 1rem
}
.mt15 {
	margin-top: 1.5rem
}
.mt20 {
	margin-top: 2rem
}
.mt30 {
	margin-top: 3rem
}
.mt40 {
	margin-top: 4rem
}
.mt50 {
	margin-top: 5rem
}
.mt60 {
	margin-top: 6rem
}
.mb10 {
	margin-bottom: 1rem
}
.mb15 {
	margin-bottom: 1.5rem
}
.mb20 {
	margin-bottom: 2rem
}
.mb30 {
	margin-bottom: 3rem
}
.mb40 {
	margin-bottom: 4rem
}
.mb50 {
	margin-bottom: 5rem
}
.mb60 {
	margin-bottom: 6rem
}


.py05 {
		padding-top: .5rem;
		padding-bottom: .5rem;
	}
	.py07 {
		padding-top: .7rem;
		padding-bottom: .7rem;
	}
	.py08 {
		padding-top: .8rem;
		padding-bottom: .8rem;
	}
	.py10 {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	.py12 {
		padding-top: 1.2rem;
		padding-bottom: 1.2rem;
	}
	.py15 {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
	.px05 {
		padding-left: .5rem;
		padding-right: .5rem;
	}
	.px07 {
		padding-left: .7rem;
		padding-right: .7rem;
	}
	.px10 {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.px12 {
		padding-left: 1.2rem;
		padding-right: 1.2rem;
	}
	.px15 {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.pr15 {
		padding-right: 1.5rem;
	}
	.pb07 {
		padding-bottom: .7rem;
	}
	.pb10 {
		padding-bottom: 1rem;
	}
	.pb15 {
		padding-bottom: 1.5rem;
	}
	.pt05 {
		padding-top: .5rem;
	}
	.pt10 {
		padding-top: 1rem;
	}
	.pt12 {
		padding-top: 1.2rem;
	}
	.pt15 {
		padding-top: 1.5rem;
	}
	
	
	/**
	flex
	****/
	.flex-none {
	    flex: none;
	}
	.flex {
	    display: flex;
	}
	.justify-between {
	    justify-content: space-between;
	}
	.justify-center {
			justify-content: center;
	}
	.items-top {
	    align-items: flex-start;
	}
	.items-center {
	    align-items: center;
	}
	.items-end {
	    align-items: flex-end;
	}
	.items-stretch {
		align-items: stretch;
	}
	.flex-nowrap {
	    flex-wrap: nowrap;
	}
	.flex-wrap {
	    flex-wrap: wrap;
	}
	.flex-row {
	    flex-direction: row;
	}
	.flex-column {
	    flex-direction: column;
	}
	
	.relative {
		position: relative;
	}
	.absolute {
		position: absolute;
	}
	

/* header
--------------------------------- */
header {
	border-bottom: solid 1px #e9e9e9;
	position:fixed;
	z-index: 999;
	width: 100%;
	background-color: #fff;
}
.header-padding {	/*상단메뉴 고정시 첫요소 top padding으로 내려주기*/
	padding-top: 84px;
}
@media screen and (max-width: 999px) {
	.header-padding {
		padding-top: 62px;
	}
}
@media screen and (max-width: 767px) {
	.header-padding {
		padding-top: 56px;
	}
}
.header-padding-b {	/*상단메뉴 고정시 첫요소 top padding으로 내려주기*/
	padding-top: calc(84px + 3rem);
}
@media screen and (max-width: 999px) {
	.header-padding-b {
		padding-top: calc(62px + 3rem);
	}
}
@media screen and (max-width: 767px) {
	.header-padding-b {
		padding-top: calc(56px + 3rem);
	}
}

.nav-container {
	position: relative;
}
.logo, .main-nav, .sub-nav {
	display: inline-block;
}

.main-nav {
	margin-left: 140px;
}
.sub-nav {
	float: right;
	margin-top: 1.66rem;
}
.mb-menu {
	display: none;
}
.main-nav ul, .sub-nav ul {
	display: flex;
}
.main-nav li>a {
	display: block;
	margin: 0 20px;
	padding: 2rem 0 1.5rem;
	font-size: 1.13rem;
	font-weight: 400;
	color: #000;
	letter-spacing: -0.63px;
}
.sub-nav li > a {
	display: flex;
	align-items: center;	
	font-size: .95rem;
	font-weight: 400;
	color: #000;
	letter-spacing: -0.63px;
}
.sub-nav > ul > li {
	margin-left: 14px;
}
.sub-nav .q-circle {
	border-radius: 50%;
	background-color: #ffc8c8;
	color: #fff;
	width: 2.3rem;
	height: 2.3rem;
	text-align: center;
	display: inline-block;
	padding-top: 9px;
	margin-right: 6px;
}
.sub-nav .q-circle >  span {
	font-size: 1.3rem;
}
.sub-nav .q-circle-2 {
	background-color: #cfd8e1;
}
.sub-nav .q-circle-2 > span {
	transform: rotate(270deg);
}
@media screen and (min-width: 1071px) {		
	.logo {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
}
@media screen and (max-width: 1070px) {	
  .main-nav {
   display: none;
  }
  .nav-container {
  	padding: 6px 0 8px;
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  }
  .mb-menu {
		display: block;
		/*order: 1;*/
		padding-top: 6px;
		width: 144px;
	}
	.mb-menu > span {
		font-size: 2rem;
	}
	.logo {
		order: 2;
	}
	.sub-nav {
		order: 3;
		margin-top: 0;
	}
	.subt {
		display: none;
	}
	.sub-nav > ul > li {
		margin-left: 10px;
	}
}
@media screen and (max-width: 767px) {
	.sub-nav .q-circle {
		padding-top: 7px;
	}
}

@media screen and (max-width: 450px) {
	.mb-menu { 
		width: 100px;
	}
	.sub-nav > ul > li {
		margin-left: 0;
	}
}


/* footer
---------------------------------- */
#footer {
    border-top: 1px solid #dddddd;
    padding-bottom: 30px;
}
#footer .footer-in {
	padding: 36px 0 0 208px;
  /*background: url(/img/foot_logo.gif) no-repeat left 43px;*/
  position: relative;
}
#footer .footer-logo {
	position: absolute;
	left: 40px;
	top: 36px;
	font-weight: 900;
	font-size: 2rem;
	line-height: 1;
	opacity: 0.3;
}
.footer-info li {
	display: inline-block;
	margin-right: 10px;
	font-size: 0.88rem;
}
.footer-info li:first-child {
	font-weight: 500;
}
.copyright {
	margin-top: 10px;
	font-size: 0.83rem;
	color: #b1b1b1;
}
@media screen and (max-width: 837px) {
	#footer .footer-in {
    padding: 20px 0 0 0;
	}
	#footer .footer-logo {
		display: none;
	}
	.footer-info li:first-child {
		display: block;
	}
}
/* footer - end
---------------------------------- */



/*첫화면 [더보기] 버튼*/
.btn-more {
    position: relative;
    display: block;
    max-width: 340px;
    padding: 10px 20px;
    margin: 0 auto;
    font-weight: 400;
    background-color: transparent;
    border: 1px solid #a7a9ae;
    color: #393d4a;
    text-align: center;
    transition: .3s;
}
.btn-more:hover {
	background-color: #393d4a;
	color: #fff;
}
.btn-more > span.angle-right {
	display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
}
/* banner
--------------------------------- */
.banner {
	background-color: #050e17;
}
.b-wrapper {
	padding: 0;
	position: relative;
}
.banner-bg {
	width: 100%;
   padding-top: 37%;
   background-image: url('../../images/banner_bg.jpg');
   background-repeat: no-repeat;
   background-size: cover;
}
.b-text-container {
	/*padding-left: 40px;
	padding-top: 60px;*/
	color: #fff;
	position: absolute;
	right:4px;
	top:70px;
}
.b-title {
	font-family: "Malgun Gothic", "맑은 고딕";
	font-size: 1.4rem;
	font-weight: 400;
	/*letter-spacing: -1px;*/
	margin-bottom: 2rem;
	line-height: 2.2rem;
	padding-right: 15px;
}


@media screen and (max-width: 1099px) {
	.b-title {
		font-size: 1.5rem;
	}

}
@media screen and (max-width: 768px) {
	
	.b-text-container {
		top: 20%;
	}
}
@media screen and (max-width: 550px) {
	.b-title {
		font-size: 1.2rem;
		line-height: 1.5rem;
		padding-left: 30px;
	}

}
@media screen and (max-width: 425px) {
	.banner-bg {
   		padding-top: 80%;
 	}
	.b-text-container {
		bottom: 0;
		right: auto;
		top: auto;
		width: 100%;
		background-color: rgb(0 0 0 / 40%);
		padding: 15px;
	}
	.b-title {
		margin-bottom: 1rem;
	}

}
.maintxt {
	padding-left: 8rem;
}
@media screen and (max-width: 768px) {
	.maintxt {
		padding-left: 0;
	}
	h2.maintxt {
		font-size: 1.5rem;
	}
	.maintxt br {
		display: none;
	}
}
/*
.prev, .next {	
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 10px;
  margin-top: -22px;
  font-size: 2.2rem;
  transition: 0.6s ease;
  user-select: none;
  opacity: 0.8;
}
.next {
  right: 0;
}
.prev:hover, .next:hover {
  opacity: 1;
}*/
.dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #cbcfd8;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot-active, .dot:hover {
  background-color: #0a214c;
}

.s-inner {
	padding: 20px 20px;
}
@media screen and (max-width: 425px) {
	.s-inner {
		padding: 20px 10px;
	}
}

/* 적용분야
---------------------------------- */
.grid {
	margin: 25px auto;
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	max-width: 800px;
}

.grid p {
	text-align: center;
}
.circle {
  height: 90px;
  width: 90px;
  background-color: #fff;
  border-radius: 50%;
  margin: 0 auto;
}

/* 계약실적
---------------------------------- */
.res-flexbox {
	margin-top: 30px;
	margin-bottom: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.res-flexbox > a {
	padding: 5px 14px;
	border: solid 1px #e5e5e5;
	border-radius: 18px;
	margin-left: 8px;
	margin-bottom: 6px;
	color: #000;
	cursor: pointer;
}
.res-flexbox > a:hover, .res-flexbox > a.active {
	background: #FFC8C8;
	border-color: #FFC8C8;
}

.list-flexbox {
	border-top:solid 1px #e9e9e9;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.list-flexbox:last-child {
	border-bottom:solid 1px #e9e9e9;
}
.erpdate {	
	font-weight: 400;
	font-size: 1.3rem;
	margin-right: 40px;
	flex-grow:0;flex-shrink:0;
}
.erpsort {
	padding: 5px 17px;
	border: solid 1px #e5e5e5;
	border-radius: 18px;
	font-size: 0.88rem;
	color: #000;
	white-space:nowrap;
	flex-grow:0;flex-shrink:0;
}
.more {
	margin-top: 16px;	
}
.more a {
	display: block;
	text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  transition: background-color .3s;  
  border: solid 1px #e9e9e9; 
}

.more a:hover {
  background-color: #e9e9e9;
}

.center {
  text-align: center;
}

.pagination {
	margin-top: 16px;
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  margin: 0 4px;
}

.pagination a.active {
  background-color: #ddd;
}

.pagination a.disabled {
  color: #ddd;
}

.pagination a:hover:not(.disabled) {background-color: #ddd;}

/* 특징 feature.php
---------------------------------- */


.field-list {	/* ul 다양한 건설분야에서 사용되고 있습니다. */
	margin: 30px auto 5px auto;	
	max-width: 800px;
}
.field-list li {
	display: inline-block;
	width: 105px;
	height: 160px;
	margin-right: 20px;
}
.field-list li:nth-child(6n) {
	margin-right: 0;
}
.field-list .circle {
	width: 105px;
	height: 105px;
	background-color: #fff;
	border-radius: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 90%;
}
.field-list .circle {
	position: relative;
	color: #bcbcbc;
}
.field-list .circle > img {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
opacity: .5;
width: 56px;
}
.field-list .circle > span {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,calc(-50% - 8px));
  transform: translate(-50%,calc(-50% - 8px));
  font-weight: 900;
  font-size: 32px;
  color: inherit;
  letter-spacing:3px;
}
.field-list li > a {

display: block;
}
.field-list li > a > .circle:hover {	/*더보기  계약실적 링크 */
background-color: #f6f6f6;
color: #393d4a;
}

@media screen and (max-width: 760px) {
	.field-list li {
		width: 32%;
		height: 130px;
		margin: 0;
	}
	.field-list .circle {
		margin: 0 auto;
		width: 90px;
		height: 90px;
	}
}



.neederp {	/* erp시스템은 어느기업에 필요할까요? */
	display: block;
	text-align: center;
	padding-top: 1.5rem;
}
.neederp li {
	display: inline-block;
	width:23.8%;
	padding: 0 5px 5px 5px;
	
}
.neederp li > div {
	border: solid 1px #dadada;
	position: relative;
	display: block;
	height: 240px;
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
}
.neederp li > div > p {
	position: absolute;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-weight: 400;
	padding: 10px;
	width: 100%;
	/*display: flex;
	align-items: center;
	flex-direction: column;*/
}
/*
.neederp li:not(:first-child){
border-left: 1px solid #e5e5e5;
}
.neederp img {
	margin-bottom: 20px;
}
*/
@media screen and (max-width: 768px) {
  .neederp li {
    width: 49.2%;
    margin-bottom: 10px;
  }
  
}

@media screen and (max-width: 425px) {
  .neederp li {
    display:block;
    width: 100%;
  }
}


.feature-container { /* 주요특징 */
	max-width: 800px;
	margin: 0 auto;
}
.feature {
	margin: 0 -10px;
	margin-top: 30px;
}
.feature > div {
	float: left;
	width: calc(50% - 20px);
	min-height: 310px;
	border: solid 1px #dadada;
	margin: 10px;
	padding-left: 25px;
	padding-right: 25px;
}
.feature img {
	width: 65px;
	margin-top: 30px;
	margin-bottom: 10px;
}
@media screen and (max-width: 580px) {
  .feature > div {
    width: calc(100% - 20px);
  }
}
.feature ul {
	margin-top: 10px;
	margin-left: 4px;
}
.feature li {
	position: relative;
	padding-left: 14px;
	line-height: 1.7;
}
.feature li:before {
	position: absolute;
	top: 12px;
	left: 0;
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	background: #333;
	border-radius: 50%;
}

/* 도입효과
---------------------------------- */
.row {
	margin-top: 20px;
}
.column {
  float: left;
  width: 25%;
}
@media screen and (max-width: 837px) {
  .column {
    width: 50%;
    display: block;
    min-height: 200px;
  }  
}
.circle-border { /* 메인페이지-도입효과-원테두리 */
	border: solid 1px #dadada;
	width: 190px;
	height: 190px;
	
	position:relative;
	background-repeat:no-repeat;
	background-position:50% 20%;
}
.circle > .title { /* 메인페이지-도입효과-설명 */
	position: absolute;
	bottom: 23px;
	width:100%;
	text-align:center;
	font-weight: 500;
	line-height: 1.2;
}

@media screen and (max-width: 425px) {
	.circle-border {
		background-size: 55%;
		width: 150px;
		height: 150px;
	}	
	.circle > .title {
		font-size: 0.88rem;
		line-height: 1.1;
		bottom: 16px;
	}
	
}


.card { /* 메인페이지 4구역나눔 영역 */
	text-align: center;
	margin: 12px;
}
.card > h4.title {	/* 메인페이지-주요특징-타이틀 */
	margin: 12px 0 8px 0;
}
.card > p { /* 메인페이지-주요특징-내용 */
	font-size: 1rem;
}

/* 구축절차
---------------------------------- */

/* 견적문의
---------------------------------- */



/* 메인페이지 끝
---------------------------------- */

/* 고객사
---------------------------------- */

.column-1 {
  float: left;
  width: 50%;
}
@media screen and (max-width: 837px) {
  .column-1 {
    width: 100%;
    display: block;
  }  
}
.card-1 {
	margin: 12px;
	border: solid 1px #e5e5e5;
	background: #fff;
	padding:20px;
}
.card-1 h3 {
	font-size: 1.3rem;
}
.point-color-1 {
	color: #d41217;
}
.list-dot li {
	position: relative;
    padding-left: 16px;
    line-height: 1.8;
}
.list-dot>li:before {
	display: inline-block;
	content: '';
	position: absolute;
	left: 0;
	border-radius: 50%;
	background-color: #454545;
	top: 14px;
    width: 4.4px;
    height: 4.4px;
}






/* 제품군 product.php
---------------------------------- */
#product {  
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}
#product th, #product td {
	border: 1px solid #dadcdd;
  padding: 8px;
  text-align: center;
}
#product thead th {
	font-weight: 700;
	padding-top: 12px;
  padding-bottom: 12px;
  background-color: #f3f3f3;
}
#product tbody th {
	font-weight: 500;
  background-color: #fbfbfb;
}
#product tbody {
	font-size: 0.92rem;
}
#product tbody tr:hover {
	background-color: #f3f3f3;
}
#product th p {font-weight: normal; font-size: 0.81rem;}

#product i.fa-circle {color: #5795ff;}	/* O */
#product i.fa-times {color: #cecfd2;}	/* X */
#product .slash {	/* / */
	display: inline-block;
	font-weight: 600;
	color: #cecfd2;
	margin: 0 6px;
	font-size: 0.78rem;
}
#product .numbers {	/* 금액 */
	color: #ff5e62;
	font-weight: 500;
	font-size: 1.2rem;
}

#product ul {margin:4px 8px;text-align: left;}
#product li {
	padding-left: 10px;
	position: relative;
	line-height: 1.8;
}
#product li:before {
	display: inline-block;
	content: '';
	position: absolute;
	left: 0;
	border-radius: 50%;
	background-color: #333;
	top: 12px;
	width: 3px;
	height: 3px;
}

@media screen and (max-width: 767px) {
  #product {
  	min-width: 500px;
  	margin-right: 50px;
  } 
  #product-wrapper {
  	overflow-x: auto;
  }
  #product .numbers {	/* 금액 */
		font-weight: normal;
		font-size: 1rem;
	}
}
#product-wrapper {margin-bottom: 30px;}
button.est {
	background-color: #fff;
	color: #d41217;
	border: solid 2px #d41217;
	padding: 10px 20px;
	font-weight: 500;
	font-size: 1.1rem;
}
button.est:hover {
	background-color: #d41217;
	color: #fff;
}
#product-tab {
	display: flex;
	flex-wrap: wrap;
	background-color: #fff;
}
#product-tab li {
	flex: 0 0 33%;
	padding-right: 10px;
padding-bottom: 10px;
}
#product-tab button {
	width: 100%;
	background-color: #f7f7f7;
	border: solid 1px #dedede;
	padding: 10px 20px;
	font-weight: 500;
	font-size: 1.1rem;
}
#product-tab button.active {
	background-color: #d41217;
	color: #fff;
	border-color: #d41217;
}
.tit {
	width: 28%;
	background-color: #f7f7f7;
}
@media screen and (max-width: 767px) {
	.tit {
		display: block;
		width: 100%;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	.con {
		display: block;
	}
}
#erpimg {
	display: flex;
	flex-wrap: wrap;
}
#erpimg > div {
    width: calc(50% - .75rem);
    min-height: 310px;
    border: solid 1px #dadada;
    padding: 50px 40px 40px;
    margin-bottom: 1.5rem;
}
#erpimg > div:nth-child(2n) {
    margin-left: 1.5rem;
}
@media screen and (max-width: 767px){
	#erpimg > div {
	    width: 100%;
	}
	#erpimg > div:nth-child(2n) {
	    margin-left: 0;
	}
}
.sticky {
  position: fixed;
  top: 83px;
  width: 100%;
  z-index: 10;
}

.sticky + .wrapper {
  padding-top: 130px;
}	
@media screen and (max-width: 905px) {/*서브메뉴2줄일때*/
	.sticky + .wrapper {
		padding-top: 200px;
	}
}
@media screen and (max-width: 999px) {
	.sticky {
		top: 62px;
	}

}
@media screen and (max-width: 767px) {
	.sticky {
		top: 56px;
	}
}

/* 주요기능 mfunction.php
---------------------------------- */

#func-list .tit {
	width: 20%;
}
@media screen and (max-width: 767px) {
	#func-list .tit {		
		width: 100%;
	}
}
#func-list dl {
	display: flex;
}
@media screen and (max-width: 767px){
	#func-list dl { 
		flex-direction: column;
	}
}
#func-list dl+dl {
	margin-top: 1rem;
}
#func-list dt {
	font-weight: 500;
	font-size: 1.14rem;
	width: 30%;
}
#func-list dd {
	position: relative;
	padding-left: 12px;
}
#func-list dd:before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
   /* top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);*/
    width: 4px;
    height: 4px;
    background: #000;
    border-radius: 50%;
}
@media screen and (max-width: 767px){
	#func-list dt {
		width: 100%;
	}
	#func-list dd:before {
		top: 10px;
	}
}
#erpproc {
 		display: flex;
 		justify-content: space-between;
 		flex-wrap: wrap;
 	} 	
	#erpproc > li {
		width: calc(20% - 18px);		
		padding: 1.5rem;
		border-radius: 10px;
		background-color: #fdfdfd;
		border: solid 1px #f1f1f1;
		position: relative;
	}
	#erpproc > li > p {
		line-height: 1.2;
	}
	#erpproc > li > ul {
		margin-top: 1rem;
		padding-top: .7rem;
		border-top: solid 1px #e5e5e5;
	}
	@media screen and (max-width: 1023px){	
		#erpproc > li {
			width: calc(25% - 18px);
			margin-bottom: 1.5rem;
		}
		#erpproc > li:last-child {
			margin-left: 30px;
		}
	}
	@media screen and (max-width: 767px){
 		#erpproc {
 			display: block;
		}
		#erpproc > li {
			width: 100%;
		}
		#erpproc > li:last-child {
			margin-left: 0;
		}
	}
	#erpproc > li > ul > li {
		position: relative;
		padding-left: 12px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
#erpproc > li > ul > li:before {
    content: '';
    position: absolute;
    left: 1px;
    top: 12px;
   /* top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);*/
    width: 4px;
    height: 4px;
    background: #000;
    border-radius: 50%;
}
@media screen and (max-width: 767px){	
	#erpproc > li > ul > li:before {
		top: 9px;
	}
	#erpproc > li:not(:first-child):before {
		content: '〉';
		
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -20px;
    font-weight: 700;
    font-size: 1.5rem;   
    transform: rotate(90deg); 
	}
}
@media screen and (min-width: 768px){	
	#erpproc > li {
		min-height: 280px;
	}
	#erpproc > li:not(:first-child):before {
		content: '〉';
    position: absolute;
    left: -18px;
    top: 20px;
    font-weight: 700;
    font-size: 1.5rem;
	}
}
#erpproc span.material-icons {
	font-size: 1rem;
}





/* 구축절차 procedure.php
---------------------------------- */
#procstep {
					display: flex;
					border: solid 2px #dadada;
				}
				#procstep li {
					width: calc(100%/7);
					text-align: center;
					padding: 2rem 0;
					position: relative;
					font-weight: 400;
				}
				#procstep li span {
					color: #fff;
					font-weight: 700;
					margin-bottom: 10px;
			    border-radius: 50%;
			    background: #FFC8C8;
			    display: inline-block;
			    width: 28px;
			    height: 28px;
			    padding-top: 1px;
				}
				@media screen and (max-width: 767px){
					#procstep {
						display: block;
						border-width: 1px;
					}
					#procstep li {
						width: 100%;
						text-align: left;
						padding: 1rem;
					}
					#procstep li span {
						text-align: center;
						margin-bottom: 0;
						margin-right: 1rem;
					}
					#procstep li:not(:last-child) {
						border-bottom: solid 1px #dadada;
					}
					#procstep br {
				    display: none;
					}
				}
				@media screen and (min-width: 768px){
					#procstep li:not(:last-child):before {
				    display: block;
				    content: '';
				    position: absolute;
				  	top: 28px;
				    right: -10px;
				    width: 107px;
				    height: 70px;
				    border: solid #efefef;
				    border-width: 1px 1px 0 0;
				    -webkit-transform: rotate(53deg);
				    -ms-transform: rotate(53deg);
				    transform: rotate(53deg);
					}
					#procdetail li {
						padding-left: 10px;
					}
				}
				
				#procdetail li:not(:first-child) {
					margin-top: 1.3rem;
				}
				#procdetail li p:first-child{
					font-weight: 500;
					font-size: 1.14rem;
					margin-bottom: .3rem;
				}
				#procdetail li p:not(:first-child) {
					padding-left: 1rem;
				}
				.pagelink {
					color: #d41217;
					border-bottom: solid 1px #d41217;
					display: inline-block;
				}
				#procdetail .material-icons {
					font-size: 1.3rem;
				}


/* 문의하기 question.php
---------------------------------- */
.tel-container {
	background-color: #f8f8f8;
	padding: 1.7rem 0 1.7rem 7rem;
	position: relative;
}
.tel-container > p:first-child {
	font-size: 1.3rem;font-weight: 700;
}
.tel-container > p.jh {
	font-size: 1rem;padding-left:5.9rem;
}
.callicon {
	position: absolute;
	left: 2.4rem;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 50%;
	color: #fff;
	padding: 10px 10px 7px 10px;
	background-color: #999;
}
@media screen and (max-width: 425px) {
	.tel-container {
		padding-left: 5rem;
	}
	.callicon {
		left: 1rem;
	}
}
.callicon >  span.material-icons-round {
	font-size: 1.5rem;
}

.tel-container, .input-container {
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}
#inputform label {
	padding: .5rem .2rem .5rem 0;
	display: inline-block;
	font-weight: 500;
}
input[type=text], select, textarea {
	width: 100%;
	padding: .5rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
}
.col-20 {
	float: left;
	width: 20%;
}
.col-30 {
	float: left;
	width: 30%;  
}
.col-80 {
	float: left;
	width: 80%;
}
#inputform .col-20, #inputform .col-30, #inputform .col-80 {
	margin-top: 10px;
}
#inputform .row2:after {
	content: "";
	display: table;
	clear: both;
}
#inputform label.gpadding {
	padding-left: 2rem;
}

#inputform .ess:after {
	content: "*";
	color: #d41217;
	font-weight: 500;
	font-size: 1rem;
}
@media screen and (max-width: 600px) {
	#inputform .col-20, #inputform .col-30, #inputform .col-80 {
		width: 100%;
		margin-top: 0;
	}
	#inputform label.gpadding {
		padding-left: 0;
	}
}

.ul-quest {	/*동의 약관 내용*/
	background-color: #f9fafc;
	border: solid 1px #e8e8e8;
	padding: 1.5rem;
	font-size: .9rem;
}
.ul-quest li:not(:last-child) {
	margin-bottom: 1rem;
}

.ul-quest li > p:not(:first-child) {
	position: relative;
	padding-left: 12px;
}
.ul-quest li > p:not(:first-child):before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 4px;
	height: 4px;
	background: #000;
	border-radius: 50%;
}
@media screen and (max-width: 768px) {
	.ul-quest li > p:before {
		top: 8px;
		width: 3px;
		height: 3px;
	}
}
.kakao-container {
	z-index: 1;
	position: fixed;
	right: 20px;
	bottom: 50px;
}				
.qr-container {
	background-color: #fee500;
	padding: 6px 10px 12px 10px;
	/*border: 1px solid #e8ebee;*/
    border-radius: 16px;
   
    box-shadow: 1px 3px 4px 0 rgb(0 0 0 / 23%);
}
@media (pointer:coarse){
	.qr-container {
		display: none;
	}
}
.qr-container .qr {
	text-align: center;
	font-weight: 500;
}				
				.link_qrcode {
    position: relative;
    background-color: #fff;
    width: 90px;
    height: 90px;
    margin: 3px auto 0 auto;
}
.img_qrcode {
	
		width: 75px;
    height: 75px;
    position: absolute;    
    top: 50%;
    left: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
  }
.link_qrcode .bg_qrcode {
    position: absolute;
    width: 4px;
    height: 20px;
    background-color: #fee500;
    
    background-color: rgb(204,204,204);
}
.link_qrcode .bg_hqrcode {
    position: absolute;
    height: 4px;
    width: 20px;
    background-color: #fee500;
    
    background-color: rgb(204,204,204);
}
				.link_qrcode .bg_qrcode1 {
    left: 0;
    top: 0;
}
.link_qrcode .bg_qrcode2 {
    left: 0;
    bottom: 0;
}
.link_qrcode .bg_qrcode3 {
    right: 0;
    top: 0;
}
.link_qrcode .bg_qrcode4 {
    right: 0;
    bottom: 0;
}
.link_qrcode .bg_qrcode5 {
    left: 0;
    top: 0;
}
.link_qrcode .bg_qrcode6 {
    right: 0;
    top: 0;
}
.link_qrcode .bg_qrcode7 {
    left: 0;
    bottom: 0;
}
.link_qrcode .bg_qrcode8 {
    right: 0;
    bottom: 0;
}

/* 회사소개 aboutus.php
---------------------------------- */

		#ul-aboutus li {
			float: left;
			display: inline-block;
			vertical-align: top;
			border: 1px solid #ededed;
			background-color: #f8f8f8;
			text-align: center;
			position: relative;
			padding-top: 5rem;
			padding-bottom: 1rem;
			padding-right: .5rem;
			padding-left: .5rem;
			min-height: 181px;
		}
		
		#ul-aboutus li p:first-child {
			color: #6c6d6f;
		}
		#ul-aboutus li p+p {
			font-weight: 500;
			margin-top: .7rem;
		}
		#ul-aboutus li {
			width: 23.5%;
		}		
		#ul-aboutus li:not(:last-child) {
			margin-right: 2%;
		}
		@media screen and (max-width: 767px){	
			#ul-aboutus li {
				width: 49%;
				min-height: 155px;
			}
			#ul-aboutus li:not(:last-child) {
				margin-right: 0;
			}
			#ul-aboutus li:nth-child(odd) {
				margin-right: 2%;
			}
			#ul-aboutus li:nth-child(3), #ul-aboutus li:nth-child(4) {
				margin-top: 46px;
			}
		}
		#ul-aboutus .circle {
			background-color: #fff;
	    border-radius: 50%;
	    border: solid 1px #ededed;
	    width: 96px;
	    height: 96px;
	    position: absolute;
	    left: 50%;
	    transform: translateX(-50%);
	    top: -35px;
  	}
	  #ul-aboutus .circle > img {
	  position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 40px;
}
  	.abouttext {
  		padding-top: 2rem;
  	}
  	@media screen and (min-width: 925px){
  		.abouttext > p {
  			max-width: 810px;
  			margin:0 auto;
  		}  		
  	}
  	@media screen and (max-width: 924px){	
	  	.abouttext {
	  		max-width:750px;
	  		margin:0 auto;
	  	}
	  }
	  #ul-locinfo {
	  	margin-top: 2rem;
	  }
	  #ul-locinfo > li {
	  	position: relative;
	  	padding: .7rem 0 .7rem 5rem;
	  	margin-bottom: 1rem;
	  }
	  #ul-locinfo > li > div.ititle, #ul-locinfo > li > div.icont {
	  	display: inline-block;
	  }
	  @media screen and (max-width: 767px){	
	  	#ul-locinfo > li > div.ititle {
	  		display: block;	  		
	  	}
	  	#ul-locinfo > li {
	  		padding-top: 0;
	  	}
	  }
	  #ul-locinfo > li > div.ititle {
	  	width: 5rem;
	  	vertical-align: top;
	  }
	  #ul-locinfo > li > div.circle {
	  background-color: #f8f8f8;
    border-radius: 50%;
    border: solid 1px #ededed;
    width: 3rem;
    height: 3rem;
    line-height: 3.4rem;    
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
  	}
  	#ul-locinfo > li > div.circle > span {
  		font-size: 1.5rem;
  		color: #8d8d8d;
  	}