@charset "utf-8";

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

/* common */
.cu-con-01 .cu-image {
	position:relative; width:100%; height:320px; background-size:cover;
}
.cu-con-01 .cu-text {
	position:relative; width:80%; font-size:20px; line-height:1.5em; text-align:center; padding:40px 40px; margin:-80px auto auto auto; background-color:#fff; 
}
h4.cu-title {
	margin-bottom:10px;
}
.cu-text ul {
	list-style:none;
}
.cu-text ul li {
	position:relative; padding-left:12px;
}
.cu-text ul li::before {
	content:""; display:block; position:absolute; width:4px; height:4px; top:0.6em; left:0px; background-color:#777; border-radius:2px;
}
.cu-reference {
	clear:both; position:relative; width:100%; text-align:center; padding:25px 5% 0px 5%;
}
.cu-reference .cu-inner {
	position:relative; display:inline-block; padding:40px 60px; border:1px solid #e4e4e4; background-color:#f4f4f4;
}

@media screen and (max-width:1280px) {
	.cu-con-01 .cu-image {
		height:320px;
	}
	.cu-con-01 .cu-text {
		font-size:18px; padding:30px 40px;
	}
	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-image {
		height:280px;
	}
	.cu-con-01 .cu-text {
		font-size:16px; padding:25px 35px;
	}
	h4.cu-title {
		margin-bottom:5px;
	}	
	.cu-reference {
		padding-top:15px;
	}
	.cu-reference .cu-inner {
		padding:30px 30px;
	}
}
@media screen and (max-width:768px) {
	.cu-con-01 .cu-image {
		height:220px;
	}
	.cu-con-01 .cu-text {
		font-size:13px; padding:15px 20px; margin-top:-50px;
	}
	#cu-content.cu-solution .cu-con-01 .cu-image {
		width:100% !important;
	}
	.cu-reference {
		padding:10px 20px 0px 20px;
	}
	.cu-reference .cu-inner {
		padding:20px 30px;
	}
}

/* trade */
#trade .cu-con-01 .cu-image {
	background:url("../images/solution_01_01.png") 50% 50% no-repeat; background-size:cover;
}
#trade .cu-text {
	padding:30px 40px;
}
#trade .cu-con-02 .cu-image {
	position:relative; width:50%; height:240px; float:left; background:url("../images/solution_01_02.png") 50% 50% no-repeat; background-size:cover;
}
#trade .cu-con-02 .cu-text {
	position:absolute; width:60%; bottom:0%; left:40%; line-height:1.5em; padding-bottom:0px; margin:auto; background-color:#fff;
}
#trade .cu-con-03 .cu-image {
	position:relative; width:50%; height:240px; float:right; background:url("../images/solution_01_03.png") 50% 50% no-repeat; background-size:cover;
}
#trade .cu-con-03 .cu-text {
	position:absolute; width:60%; top:50%; right:40%; line-height:1.5em; transform:translateY(-50%); background-color:#fff;
}
#trade .cu-con-04 .cu-image {
	position:relative; width:50%; height:240px; float:left; background:url("../images/solution_01_04.png") 50% 50% no-repeat; background-size:cover;
}
#trade .cu-con-04 .cu-text {
	position:absolute; width:60%; bottom:0%; left:40%; line-height:1.5em; padding-bottom:0px; margin:auto; background-color:#fff;
}

@media screen and (max-width:1280px) {	
	#trade .cu-text {
		padding:25px 35px;
	}
	#trade .cu-con-02 .cu-image {
		height:200px;
	}
	#trade .cu-con-04 .cu-image {
		height:200px;
	}
}
@media screen and (max-width:1024px) {	
	#trade .cu-text {
		padding:20px 30px;
	}
}
@media screen and (max-width:768px) {	
	#trade .cu-image {
		width:60% !important;
	}
	#trade .cu-text {
		padding:15px 20px;
	}
	#trade .cu-con-04 .cu-image {
		height:220px;
	}
	#trade .cu-con-02 .cu-text {
		width:70%; left:30%;
	}
	#trade .cu-con-03 .cu-text {
		width:70%; right:30%;
	}
	#trade .cu-con-04 .cu-text {
		width:70%; left:30%;
	}	
}
@media screen and (max-width:500px) {
	#trade .cu-con-01 .cu-text {
		margin-top:-60px;
	}
}

/* drawback */
#drawback .cu-con-01 .cu-image {
	background:url("../images/solution_02_01.png") 50% 50% no-repeat; background-size:cover;
}
#drawback .cu-col {
	float:left; width:50%;
}
#drawback .cu-col h4.cu-title {
	position:absolute; bottom:0px; left:0px; padding:20px 30px 0px 0px; margin:0px; margin-right:10%; background-color:#fff;
}
#drawback .cu-col .cu-text {
	margin-top:20px;
}
#drawback .cu-col .cu-image {
	height:240px;
}
#drawback .cu-con-02 .cu-image {
	position:relative; width:100%; background:url("../images/solution_02_02.png") 50% 50% no-repeat; background-size:cover;
}
#drawback .cu-con-02 .cu-text {
	position:relative; width:100%;
}
#drawback .cu-con-03 .cu-image {
	position:relative; width:100%; background:url("../images/solution_02_03.png") 50% 50% no-repeat; background-size:cover;
}
#drawback .cu-con-03 .cu-text {
	position:relative; width:100%;
}
#drawback .cu-con-04 .cu-image {
	position:relative; width:100%; background:url("../images/solution_02_04.png") 50% 50% no-repeat; background-size:cover;
}
#drawback .cu-con-04 .cu-text {
	position:relative; width:100%;
}
#drawback .cu-con-05 .cu-image {
	position:relative; width:100%; background:url("../images/solution_02_05.png") 50% 50% no-repeat; background-size:cover;
}
#drawback .cu-con-05 .cu-text {
	position:relative; width:100%;
}

@media screen and (max-width:1024px) {
	#drawback .cu-col h4.cu-title {
		padding:15px 20px 0px 0px;
	}
	#drawback .cu-col .cu-image {
		height:200px;
	}
}
@media screen and (max-width:768px) {
	#drawback .cu-col {
		float:none; width:100%;
	}
	#drawback .cu-col .cu-image {
		height:150px;
	}
}

/* viola */
#viola .cu-con-01 .cu-image {
	background:url("../images/solution_03_01.png") 50% 50% no-repeat; background-size:cover;
}
#viola .cu-con-02 ul.cu-context {
	position:relative; list-style:none; width:100%; padding-left:45%;
}
#viola .cu-con-02 ul.cu-context > li {
	padding:10px 0px;
}
#viola .cu-con-02 .cu-image {
	position:absolute; width:40%; height:100%; top:0px; left:0px; background:url("../images/solution_03_02_v.png") 50% 50% no-repeat; background-size:cover;
}

@media screen and (max-width:768px) {
	#viola .cu-con-02 ul.cu-context {
		padding:160px 20px 0px 30px;
	}
	#viola .cu-con-02 ul.cu-context > li {
		padding:6px 0px;
	}
	#viola .cu-con-02 .cu-image {
		position:absolute; width:calc(100% - 40px); height:140px; top:0px; left:20px; background:url("../images/solution_03_02_h.png") 50% 50% no-repeat; background-size:cover;
	}
}

/* blockchain */
#blockchain .cu-con-01 .cu-image {
	background:url("../images/solution_05_01.png") 50% 50% no-repeat; background-size:cover;
}
#blockchain .cu-con-02 .cu-text {
	text-align:center;
}
#blockchain .cu-con-02 .cu-text span {
	display:inline-block;
}
#blockchain .cu-con-02 .cu-image {
	text-align:center; padding-top:30px;
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap {
	position:relative; width:100%; max-width:1000px; list-style:none; margin:auto;
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap::after {
	content:""; display:table; clear:both;
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap > li {
	position:relative; float:left; width:26%; height:220px;
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap > li:first-child {
	width:11%;
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap > li:last-child {
	width:11%;
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap .cu-dot {
	position:absolute; display:block; width:8px; height:8px; top:0px; bottom:0px; left:0px; right:0px; margin:auto; border-radius:50%; background-color:#999; 
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap .cu-dot::before {
	content:""; display:block; position:absolute; width:100%; height:100%; border-radius:50%; top:0px; left:-12px; background-color:#999;
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap .cu-dot::after {
	content:""; display:block; position:absolute; width:100%; height:100%; border-radius:50%; top:0px; right:-12px; background-color:#999; 
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap .cu-block {
	position:absolute; top:50%; left:50%; margin:auto; transform:translate(-50%,-50%);
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap .cu-block .cu-figure {
	position:relative; width:160px; height:100px; background-color:#ddd;
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap .cu-block .cu-figure::before {
	content:""; position:absolute; top:-50px; left:0px; width:0px; height:0px; border-left:80px solid transparent; border-right:80px solid transparent; border-bottom:50px solid #ddd;
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap .cu-block .cu-figure::after {
	content:""; position:absolute; bottom:-50px; left:0px; width:0px; height:0px; border-left:80px solid transparent; border-right:80px solid transparent; border-top:50px solid #ddd;
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap .cu-block .cu-context-wrap {
	position:absolute; width:100%; font-size:12px; line-height:1.5em; text-align:center; top:-25%; left:0px;
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap .cu-block .cu-context-wrap > ul.cu-list {
	position:relative; list-style:none;
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap .cu-block .cu-context-wrap > ul.cu-list > li:first-child {
	font-size:13px; font-weight:700; padding-bottom:10px;
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap .cu-block .cu-context-wrap > ul.cu-list > li:nth-child(3) {
	padding-bottom:10px;
}
#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap .cu-block .cu-context-wrap > ul.cu-list em {
	color:#ef9500; font-weight:700;
}
#blockchain .cu-con-02 .cu-image .cu-caption {
	padding-top:10px;
}
#blockchain .cu-con-02 .cu-image .cu-node {
	position:absolute; width:50%; height:1px; background-color:#ef9500; z-index:2;
}
#blockchain .cu-con-02 .cu-image .cu-node::before {
	content:""; position:absolute; width:5px; height:5px; top:-2px; left:0px; border-radius:50%; background-color:#ef9500;
}
#blockchain .cu-con-02 .cu-image .cu-node::after {
	content:""; position:absolute; width:5px; height:5px; top:-2px; right:0px; border-radius:50%; background-color:#ef9500;
}
#blockchain .cu-con-02 .cu-image .cu-node.cu-left {
	top:135px; left:-25%;
}
#blockchain .cu-con-02 .cu-image .cu-node.cu-right {
	top:152px; right:-25%;
}

@media screen and (max-width:768px) {
	#blockchain > .cu-item {
		padding:0px 20px;
	}
	#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap > li {
		position:relative; float:none; width:100%; height:200px;
	}
	#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap > li:first-child {
		display:none;
	}
	#blockchain .cu-con-02 .cu-image ul.cu-inner-wrap > li:last-child {
		display:none;
	}
	#blockchain .cu-con-02 .cu-image .cu-node {
		position:absolute; width:50px; height:200px; border:1px solid #ef9500; background-color:transparent;
	}
	#blockchain .cu-con-02 .cu-image .cu-node.cu-left {
		top:-75px; left:50%; transform:translateX(-110px); border-right:none;
	}
	#blockchain .cu-con-02 .cu-image .cu-node.cu-right {
		top:142px; right:50%; transform:translateX(110px); border-left:none;
	}
	#blockchain .cu-con-02 .cu-image .cu-node.cu-left::before {
		content:""; display:block; position:absolute; width:5px; height:5px; top:-3px; bottom:auto; left:auto; right:0px; margin:auto; border-radius:50%; background-color:#ef9500;
	}
	#blockchain .cu-con-02 .cu-image .cu-node.cu-left::after {
		content:""; display:block; position:absolute; width:5px; height:5px; top:auto; bottom:-3px; left:auto; right:0px; margin:auto; border-radius:50%; background-color:#ef9500;
	}
	#blockchain .cu-con-02 .cu-image .cu-node.cu-right::before {
		content:""; display:block; position:absolute; width:5px; height:5px; top:-3px; bottom:auto; left:0px; right:auto; margin:auto; border-radius:50%; background-color:#ef9500;
	}
	#blockchain .cu-con-02 .cu-image .cu-node.cu-right::after {
		content:""; display:block; position:absolute; width:5px; height:5px; top:auto; bottom:-3px; left:0px; right:auto; margin:auto; border-radius:50%; background-color:#ef9500;
	}
}

#blockchain .cu-con-03 .cu-text {
	text-align:center;
}
#blockchain .cu-con-03 .cu-text span {
	display:inline-block;
}
#blockchain .cu-con-03 .cu-image {
	text-align:center; padding-top:30px;
}
#blockchain .cu-con-03 .cu-image > ul.cu-inner-wrap {
	position:relative; list-style:none;
}
#blockchain .cu-con-03 .cu-image ul.cu-inner-wrap::after {
	content:""; display:table; clear:both;
}
#blockchain .cu-con-03 .cu-image > ul.cu-inner-wrap > li {
	position:relative; float:left; width:33.33%; height:180px; padding:10px; margin-right:-1px; margin-bottom:-1px; border:1px dashed #b4b4b4;
}
#blockchain .cu-con-03 .cu-image > ul.cu-inner-wrap > li::before {
	content:""; position:absolute; width:0px; height:0px; top:0px; left:0px; border-top:45px solid #999; border-right:45px solid transparent;
}
#blockchain .cu-con-03 .cu-image > ul.cu-inner-wrap .cu-num {
	position:absolute; top:4px; left:6px; font-size:15px; line-height:1.5em; color:#fff; font-weight:700;
}
#blockchain .cu-con-03 .cu-image > ul.cu-inner-wrap .cu-context {
	font-size:13px; line-height:1.5em;
}
#blockchain .cu-con-03 .cu-image > ul.cu-inner-wrap .cu-figure {
	position:absolute; width:200px; height:100px; bottom:20px; left:0px; right:0px; margin:auto;
}
#blockchain .cu-con-03 .cu-image > ul.cu-inner-wrap > li:nth-child(1) .cu-figure {
	background:url("../images/solution_05_03_01.png") 50% 50% no-repeat;
}
#blockchain .cu-con-03 .cu-image > ul.cu-inner-wrap > li:nth-child(2) .cu-figure {
	background:url("../images/solution_05_03_02.png") 50% 50% no-repeat;
}
#blockchain .cu-con-03 .cu-image > ul.cu-inner-wrap > li:nth-child(3) .cu-figure {
	background:url("../images/solution_05_03_03.png") 50% 50% no-repeat;
}
#blockchain .cu-con-03 .cu-image > ul.cu-inner-wrap > li:nth-child(4) .cu-figure {
	background:url("../images/solution_05_03_04.png") 50% 50% no-repeat;
}
#blockchain .cu-con-03 .cu-image > ul.cu-inner-wrap > li:nth-child(5) .cu-figure {
	background:url("../images/solution_05_03_05.png") 50% 50% no-repeat;
}
#blockchain .cu-con-03 .cu-image > ul.cu-inner-wrap > li:nth-child(6) .cu-figure {
	background:url("../images/solution_05_03_06.png") 50% 50% no-repeat;
}
#blockchain .cu-con-03 .cu-image .cu-caption {
	padding-top:20px;
}

@media screen and (max-width:1024px) {
	#blockchain .cu-con-03 .cu-image > ul.cu-inner-wrap > li {
		width:50%;
	}
}
@media screen and (max-width:768px) {
	#blockchain .cu-con-03 .cu-image > ul.cu-inner-wrap > li {
		width:100%;
	}
}

#blockchain .cu-con-04 .cu-text {
	text-align:center;
}
#blockchain .cu-con-04 .cu-text span {
	display:inline-block;
}
#blockchain .cu-con-04 .cu-image {
	position:relative; text-align:center; padding-top:30px;
}
#blockchain .cu-con-04 .cu-image .cu-figure {
	position:relative; width:100%; height:170px; background:url("../images/solution_05_04_01.png") 50% 50% no-repeat;
}
#blockchain .cu-con-04 .cu-image ul.cu-inner-wrap {
	position:relative; list-style:none;
}
#blockchain .cu-con-04 .cu-image ul.cu-inner-wrap::after {
	content:""; display:table; clear:both;
}
#blockchain .cu-con-04 .cu-image ul.cu-inner-wrap > li {
	position:relative; float:left; width:33.33%; padding:0px 10px;
}
#blockchain .cu-con-04 .cu-image ul.cu-inner-wrap .cu-num {
	display:inline-block; width:28px; height:28px; font-size:14px; line-height:28px; color:#fff; font-weight:700; border-radius:50%; background-color:#999;
}
#blockchain .cu-con-04 .cu-image ul.cu-inner-wrap .cu-context {
	font-size:13px; line-height:1.5em; padding-top:10px;
}
#blockchain .cu-con-04 .cu-image .cu-caption {
	padding-top:20px;
}

@media screen and (max-width:1024px) {
	
}
@media screen and (max-width:768px) {
	#blockchain .cu-con-04 .cu-image {
		padding-top:20px;
	}
	#blockchain .cu-con-04 .cu-image .cu-figure {
		height:130px; background-size:500px;
	}
	#blockchain .cu-con-04 .cu-image ul.cu-inner-wrap > li {
		float:none; width:100%; padding:10px;
	}
	#blockchain .cu-con-04 .cu-image .cu-caption {
		padding-top:10px;
	}
}
@media screen and (max-width:600px) {
	#blockchain .cu-con-04 .cu-image .cu-figure {
		height:100px; background-size:320px;
	}
}

#blockchain .cu-con-05 .cu-inner-wrap {
	position:relative; width:100%; height:300px; background:url("../images/solution_05_05_01.png") 50% 50% no-repeat; background-size:cover;
}
#blockchain .cu-con-05 .cu-inner-wrap::before {
	content:""; display:block; width:100%; height:100%; background-color:rgba(0,0,0,0.4);
}
#blockchain .cu-con-05 .cu-inner-wrap .cu-text {
	position:absolute; width:80%; top:50%; left:50%; color:#fff; text-align:center; transform:translate(-50%,-50%);
}
#blockchain .cu-con-05 .cu-inner-wrap .cu-text .cu-title {
	color:#fff; margin-bottom:15px;
}
#blockchain .cu-con-05 .cu-inner-wrap .cu-text .cu-title span {
	display:inline-block;
}

@media screen and (max-width:768px) {
	#blockchain .cu-con-05 .cu-inner-wrap {
		height:240px;
	}
}

/* uTrade */
#uTrade .cu-con-01 .cu-image {
	background:url("../images/solution_04_01.png") 50% 50% no-repeat; background-size:cover;
}
#uTrade .cu-item .cu-image {
	position:relative; width:48%; height:240px;
}
#uTrade .cu-item .cu-text {
	position:absolute; width:48%; top:50%; transform:translateY(-50%);
}
#uTrade .cu-con-02 .cu-image {
	float:left; background:url("../images/solution_04_02.png") 50% 50% no-repeat; background-size:cover;
}
#uTrade .cu-con-02 .cu-text {
	right:0px;
}
#uTrade .cu-con-03 .cu-image {
	float:right; background:url("../images/solution_04_03.png") 50% 50% no-repeat; background-size:cover;
}
#uTrade .cu-con-03 .cu-text {
	left:0px;
}
#uTrade .cu-con-04 .cu-image {
	float:left; background:url("../images/solution_04_04.png") 50% 50% no-repeat; background-size:cover;
}
#uTrade .cu-con-04 .cu-text {
	right:0px;
}
#uTrade .cu-con-05 .cu-image {
	float:right; background:url("../images/solution_04_05.png") 50% 50% no-repeat; background-size:cover;
}
#uTrade .cu-con-05 .cu-text {
	left:0px;
}

@media screen and (max-width:1024px) {
	#uTrade .cu-item .cu-image {
		height:200px;
	}
}
@media screen and (max-width:768px) {
	#uTrade .cu-item {
		padding:0px 20px;
	}
	#uTrade .cu-item .cu-image {
		width:100%; height:130px; margin-bottom:10px;
	}
	#uTrade .cu-item .cu-text {
		position:relative; width:100%; top:50%; transform:translateY(0px);
	}
}

/* GEP */
#GEP .cu-con-01 .cu-image {
	background:url("../images/solution_06_01.png") 50% 50% no-repeat; background-size:cover;
}
#GEP .cu-item .cu-image {
	position:relative; width:48%; height:240px;
}
#GEP .cu-item .cu-text {
	position:absolute; width:48%; top:50%; transform:translateY(-50%);
}
#GEP .cu-con-02 .cu-image {
	float:left; background:url("../images/solution_06_02.png") 50% 50% no-repeat; background-size:cover;
}
#GEP .cu-con-02 .cu-text {
	right:0px;
}
#GEP .cu-con-03 .cu-image {
	float:right; background:url("../images/solution_06_03.png") 50% 50% no-repeat; background-size:cover;
}
#GEP .cu-con-03 .cu-text {
	left:40px; padding-right:30px;
}
#GEP .cu-con-04 .cu-image {
	float:left; background:url("../images/solution_06_04.png") 50% 50% no-repeat; background-size:cover;
}
#GEP .cu-con-04 .cu-text {
	right:0px;
}
#GEP .cu-con-05 .cu-text {
	left:0px;
}
#GEP .cu-documentType {
	clear:both; position:relative; width:100%; text-align:center; padding:20px 5%;
}
#GEP .cu-documentType .cu-inner {
	position:relative; width:100%; max-width:800px; margin:auto;
}
#GEP .cu-documentType .cu-inner table thead th:nth-child(2) {
	width:120px;
}
#GEP .cu-documentType .cu-inner table thead th:nth-child(3) {
	width:160px;
}
#GEP .cu-documentType .cu-inner .cu-context {
	text-align:left; padding-top:15px;
}

@media screen and (max-width:1024px) {
	#GEP .cu-item .cu-image {
		height:200px;
	}
}
@media screen and (max-width:768px) {
	#GEP .cu-item {
		padding:0px 20px;
	}
	#GEP .cu-item .cu-image {
		width:100%; height:130px; margin-bottom:10px;
	}
	#GEP .cu-item .cu-text {
		clear:both; position:relative; width:100%; top:50%; transform:translateY(0px);
	}
	#GEP .cu-con-03 .cu-text {
		left:0px; padding-right:0px;
	}
	#GEP .cu-documentType .cu-inner table thead th:nth-child(2) {
		width:60px;
	}
	#GEP .cu-documentType .cu-inner table thead th:nth-child(3) {
		width:90px;
	}
	.cu-tbl-col thead th {
		font-size:14px; line-height:1.4em; padding:7px 5px 5px 5px;
	}
	.cu-tbl-col tbody td {
		font-size:13px; line-height:1.4em; padding:7px 5px 5px 5px;
	}
}