@charset "UTF-8";

/* visual */
.cloud-visual {background-image:url('../images/business/cloud-main.jpg');}
.itservice-visual {background-image:url('../images/business/it-main.jpg');}

/**
 * cloud service
==========================================================================================**/
.cloud-service {position: relative; margin-bottom: 150px;}
.it-service {position: relative; margin-bottom: 0;}
.cloud-service {width: 100%;}
.cloud-service .inner {display: flex; justify-content: space-between; background-color: #fff;}
.cloud-service .inner .service-title {width: 25%;}
.cloud-service .inner .service-title > h3 {font-size: 40px; font-weight: 600;}
.cloud-service .inner .service-content {width: 70%; padding-top: 20px;}
.cloud-service .inner .service-content > p {font-size: 20px; line-height: 1.5;}


.service-items {display: flex; flex-wrap: wrap; width: 100%;}
.service-items li {display: flex; flex-direction: column; padding: 80px 0 0;}
.service-items li span {display: block; font-size: 20px; color: #999;}
.service-items li > h4 {font-size: 28px; color: #121212; margin-top: 40px;}
.service-items li > p  {width: 80%; font-size: 18px; margin-top: 40px;}
.service-items.service-items-3div li {width: 33.33%;}


.it-service .inner .service-title p  {font-size: 20px; line-height: 1.5;}
.it-service-items {display: flex; flex-wrap: wrap; width: 100%;}
.it-service-items li {display: flex; flex-direction: column; width: 33.33%; padding: 0 0 120px;}
.it-service-items li span {width: 150px;}
.it-service-items li > h4 {font-size: 24px; color: #121212; margin-top: 40px;}
.it-service-items li > p  {width: 80%; font-size: 18px; margin-top: 40px;}

@media screen and (max-width: 1280px) { /* PC + Tablet 환경 */
	.cloud-service {margin-bottom: 22.22vw;}
	.it-service {margin-bottom: 0;}

	.cloud-service .inner {flex-direction: column; justify-content: inherit;}
	.cloud-service .inner .service-title {width: 100%;}
	.cloud-service .inner .service-title > h3 {font-size: 36px;}
	.cloud-service .inner .service-content {width: 100%;}
	.cloud-service .inner .service-content > p {font-size: 18px;}

	.service-items li {padding: 40px 0 0;}
	.service-items li span {font-size: 18px;}
	.service-items li h4 {font-size: 24px; margin-top: 24px;}
	.service-items li > p  {font-size: 16px; margin-top: 34px;}

	.it-service-items li {width: 50%; padding: 0 0 80px;}
	.it-service-items li span {width: 120px;}
	.it-service-items li > h4 {font-size: 24px; margin-top: 24px;}
	.it-service-items li > p  {font-size: 16px; margin-top: 24px;}
}

@media screen and (max-width: 450px) { /* Mobile 환경 */
	.cloud-service {margin-bottom: 100px;}	
	.cloud-service .inner .service-title h3 {font-size: 6.7vw;}	
	.cloud-service .inner .service-content > p {font-size: 4.4vw;}

	.service-items li {padding: 40px 0 0;}
	.service-items li span {font-size: 4.0vw;}
	.service-items li > h4 {font-size: 5.3vw; margin-top: 16px;}
	.service-items li > p  {width: 100%; font-size: 4.0vw; margin-top: 16px;}
	.service-items.service-items-3div li {width: 100%;}

	.it-service-items li {width: 100%; text-align: center; border: 1px solid #121212; border-radius: 5px; padding: 20px 20px 40px; margin-bottom: 40px;}
	.it-service-items li span {margin: 0 auto;}
	.it-service-items li h4 {font-size: 5.3vw; margin-top: 16px;}
	.it-service-items li p  {width: 100%; font-size: 4.0vw; margin-top: 16px;}
}