@charset "utf-8";

@import url('layout.css');
@import url('customize.css');

/* common */
.cu-con-01 .cu-text {
	position:relative; font-size:20px; line-height:1.5em; text-align:center;
}
.cu-con-01 .cu-text span {
	display:inline-block;
}
h4.cu-title {
	margin-bottom:10px;
}
.cu-reference {
	clear:both; position:relative; width:100%; text-align:center;
}
.cu-reference .cu-inner {
	position:relative; display:inline-block; padding:40px 60px; border:1px solid #e4e4e4; background-color:#f4f4f4;
}
.cu-inquiry {
	clear:both; position:relative; width:100%; text-align:center; 
}
.cu-inquiry .cu-inner {
	position:relative; display:inline-block;
}
.cu-inquiry .cu-inner span {
	display:inline-block;
}

@media screen and (max-width:1280px) {
	.cu-con-01 .cu-text {
		font-size:18px;
	}
	h4.cu-title {
		margin-bottom:7px;
	}
	.cu-reference {
		padding-top:20px;
	}
	.cu-reference .cu-inner {
		padding:40px 40px;
	}
}
@media screen and (max-width:1024px) {
	.cu-con-01 .cu-text {
		font-size:16px;
	}
	h4.cu-title {
		margin-bottom:5px;
	}
	.cu-reference .cu-inner {
		padding:30px 30px;
	}
}
@media screen and (max-width:768px) {
	#cu-content {
		padding:0px 20px;
	}
	.cu-con-01 .cu-text {
		font-size:13px;
	}
	.cu-reference .cu-inner {
		padding:20px 30px;
	}
	.cu-inquiry .cu-inner span {
		display:block;
	}
	.cu-inquiry .cu-inner .cu-text > div {
		padding-top:8px;
	}
	.cu-inquiry .cu-inner .cu-text > div:first-child {
		padding-top:2px;
	}
}

/* System Integration */
#integration .cu-con-02 .cu-image {
	position:relative; width:28%; height:500px; margin:auto; background:url("../images/service_01_01_v.png") 50% 50% no-repeat; background-size:cover;
}
#integration .cu-con-02 .cu-item {
	position:absolute; width:32%; text-align:center; top:80px;
}
#integration .cu-con-02 .cu-item.cu-01 {
	left:0px;
}
#integration .cu-con-02 .cu-item.cu-02 {
	right:0px;
}
#integration .cu-con-02 .cu-item .cu-icon {
	position:relative; width:120px; height:120px; margin:0px auto 30px auto;
}
#integration .cu-con-02 .cu-item.cu-01 .cu-icon {
	background:url("../images/service_01_icon_01.png") 50% 50% no-repeat;
}
#integration .cu-con-02 .cu-item.cu-02 .cu-icon {
	background:url("../images/service_01_icon_02.png") 50% 50% no-repeat;
}

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

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

}
@media screen and (max-width:768px) {	
	#integration .cu-con-02 .cu-image {
		position:relative; width:100%; height:140px; background:url("../images/service_01_01_h.png") 50% 50% no-repeat; background-size:cover;
	}
	#integration .cu-con-02 .cu-item {
		position:relative; width:100%; top:20px;
	}
	#integration .cu-con-02 .cu-item .cu-icon {
		margin-bottom:10px;
	}
	#integration .cu-con-02 .cu-item.cu-01 {
		margin-bottom:30px;
	}
}

/* IT Outsourcing */
#outsourcing .cu-con-02 .cu-image {
	position:relative; width:100%; height:300px; margin:auto; background:url("../images/service_02_01.png") 50% 50% no-repeat; background-size:cover;
}
#outsourcing .cu-con-02 .cu-image .cu-opacity-bgcolor {
	position:absolute; width:100%; height:100%; background-color:rgba(0,0,0,0.3);
}
#outsourcing .cu-con-02 .cu-image h4.cu-title {
	position:absolute; top:60px; left:50%; margin:auto; color:#fff; transform:translateX(-50%);
}
#outsourcing .cu-con-02 .cu-context {
	position:relative;
}
#outsourcing .cu-con-02 .cu-context > ul {
	position:relative; list-style:none; text-align:center; margin-top:-150px; border-top:1px solid rgba(255,255,255,0.5);
}
#outsourcing .cu-con-02 .cu-context > ul > li {
	position:relative; float:left; width:33.33%; padding:0px 10px; border-left:1px solid rgba(255,255,255,0.5);
}
#outsourcing .cu-con-02 .cu-context > ul > li:first-child {
	border-left:none;
}
#outsourcing .cu-con-02 .cu-context > ul > li h5.cu-title {
	position:relative; height:150px; color:#fff; padding-top:70px;
}
#outsourcing .cu-con-02 .cu-context > ul > li:nth-child(2) h5.cu-title {
	padding-top:60px;
}
#outsourcing .cu-con-02 .cu-context > ul > li .cu-text {
	padding-top:20px;
}

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

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

}
@media screen and (max-width:768px) {	
	#outsourcing .cu-con-02 .cu-image {
		height:140px;
	}
	#outsourcing .cu-con-02 .cu-image h4.cu-title {
		font-size:18px;
	}
	#outsourcing .cu-con-02 .cu-context > ul {
		margin-top:0px;
	}
	#outsourcing .cu-con-02 .cu-context > ul > li {
		float:none; width:100%; padding:0px; border:none; padding-top:20px;
	}
	#outsourcing .cu-con-02 .cu-context > ul > li h5.cu-title {
		height:auto; color:inherit; padding-top:0px !important;
	}
	#outsourcing .cu-con-02 .cu-context > ul > li .cu-text {
		padding-top:5px;
	}
}

/* Consulting */
#consulting .cu-con-02 .cu-image {
	position:relative; width:100%; height:300px; margin:auto; background:url("../images/service_03_01.png") 50% 50% no-repeat; background-size:cover;
}
#consulting .cu-con-02 .cu-image .cu-opacity-bgcolor {
	position:absolute; width:100%; height:100%; background-color:rgba(0,0,0,0.3);
}
#consulting .cu-con-02 .cu-image h4.cu-title {
	position:absolute; top:60px; left:50%; margin:auto; color:#fff; transform:translateX(-50%);
}
#consulting .cu-con-02 .cu-context {
	position:relative;
}
#consulting .cu-con-02 .cu-context > ul {
	position:relative; list-style:none; text-align:center; margin-top:-150px; border-top:1px solid rgba(255,255,255,0.5);
}
#consulting .cu-con-02 .cu-context > ul > li {
	position:relative; float:left; width:25%; height:150px; border-left:1px solid rgba(255,255,255,0.5);
}
#consulting .cu-con-02 .cu-context > ul > li:first-child {
	border-left:none;
}
#consulting .cu-con-02 .cu-context > ul > li h5.cu-title {
	position:absolute; width:90%; color:#fff; top:50%; left:50%; transform:translate(-50%,-50%);
}

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

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

}
@media screen and (max-width:768px) {	
	#consulting .cu-con-02 .cu-image {
		height:140px;
	}
	#consulting .cu-con-02 .cu-image h4.cu-title {
		font-size:18px;
	}
	#consulting .cu-con-02 .cu-context > ul {
		margin-top:0px;
	}
	#consulting .cu-con-02 .cu-context > ul > li {
		float:none; width:100%; height:auto; border:none; padding-top:20px;
	}
	#consulting .cu-con-02 .cu-context > ul > li h5.cu-title {
		position:relative; color:inherit;  width:100%; top:auto; left:auto; transform:none;
	}
}