@charset "UTF-8";
/* =====================================================
▼ COLOR
===================================================== */
/*---------------------------------------------------------------------------*/
.section-intro {
	margin: 9rem 0 4rem;
	position: relative;
}
.kv:after {
	background-color: rgba(0, 161, 164, 0.44);
}
@media screen and (max-width: 768px) {
	.section-intro {
		margin: 8vw 0 2.66667vw;
	}
}
.section-intro:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 55rem;
	left: 0;
	top: 41%;
	background-color: rgba(0, 161, 164, 0.1);
	-webkit-transform: skewY(-27deg);
	-moz-transform: skewY(-27deg);
	-ms-transform: skewY(-27deg);
	transform: skewY(-27deg);
	z-index: -1;
}
@media screen and (min-width: 769px) {
	.intro-top {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
	}
}
@media screen and (min-width: 1500px) {
	.intro-top_copy {
		width: 100%;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: end;
		-moz-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		padding: 6rem 5rem 8rem 1.5rem;
	}
	.intro-top_copy .intro-head {
		max-width: 75.5rem;
		font-size: 2.6rem;
		font-weight: 400;
		color: #00A1A4;
	}
}
@media screen and (max-width: 768px) {
	.intro-top_copy {
		padding: 8vw;
	}
	.intro-top_copy .intro-head {
		font-size: 4.26667vw;
		font-weight: 400;
		color: #00A1A4;
	}
}

@media screen and (min-width: 769px) and (max-width: 1499px){
	.intro-top_copy {
		padding: 0 4vw 2vw;
	}
	.intro-top_copy .intro-head {
		font-size: 1.5vw;
		font-weight: 400;
		color: #00A1A4;
	}
}
.intro-top_info {
	color: #fff;
	position: relative;
	z-index: 1;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-moz-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	padding: 5rem 0 5rem 5rem;
}
@media screen and (min-width: 1200px) and (max-width: 1500px){
	.intro-top_info {
		color: #fff;
		position: relative;
		z-index: 1;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: start;
		-moz-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		padding: 5rem 0 5rem 20rem;
	}
}
@media screen and (min-width: 769px) and (max-width: 1199px){
	.intro-top_info {
		color: #fff;
		position: relative;
		z-index: 1;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: start;
		-moz-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		padding: 5rem 0 5rem 5rem;
	}
}
@media screen and (max-width: 768px) {
	.intro-top_info {
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		padding: 8vw;
	}
}
.intro-top_info:after {
	position: absolute;
	content: '';
	width: -webkit-calc(100% + 14.5rem);
	width: -moz-calc(100% + 14.5rem);
	width: calc(100% + 14.5rem);
	height: 100%;
	left: 0;
	top: 0;
	background-color: #00a1a4;
	mix-blend-mode: multiply;
	z-index: -1;
}
.intro-top_info__ttl {
	font-size: 1.8rem;
	line-height: 1;
	margin-bottom: 2.5rem;
}
.intro-top_info__ttl span {
	display: inline-block;
	font-size: 4.2rem;
}
.intro-top_info__ctn {
	font-size: 1.7rem;
	line-height: 1.8235;
	padding-left: 2.5rem;
	border-left: 1px solid #fff;
}
@media screen and (min-width: 769px) and (max-width: 1499px){
	.intro-top_info__copy {
		width: 100%;
	}
}
@media screen and (min-width: 1500px) {
	.intro-top_info__copy {
		width: 45%;
	}
}
@media screen and (min-width: 769px) {
	.intro-top_ctn {
		width: -webkit-calc(952/1920 * 100%);
		width: -moz-calc(952/1920 * 100%);
		width: calc(952/1920 * 100%);
	}
}
@media screen and (min-width: 769px) and (max-width: 1499px){
	.intro-top_img {
		width: 70%;
		mix-blend-mode: multiply;
		position: relative;
		z-index: 2;
	}
	.intro-top_img img {
		width: 100%;
	}
}
@media screen and (min-width: 1500px) {
	.intro-top_img {
		width: -webkit-calc(968/1920 * 100%);
		width: -moz-calc(968/1920 * 100%);
		width: calc(968/1920 * 100%);
		mix-blend-mode: multiply;
		position: relative;
		z-index: 2;
	}
	.intro-top_img img {
		max-width: 96.8rem;
	}
}
@media screen and (min-width: 769px) {
	.intro-art {
		max-width: 131rem;
		padding: 0 1.5rem;
		margin: 0 auto;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-moz-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.intro-art_img {
		width: -webkit-calc(490/1280 * 100%);
		width: -moz-calc(490/1280 * 100%);
		width: calc(490/1280 * 100%);
	}
	.intro-art_ctn {
		width: -webkit-calc(685/1280 * 100%);
		width: -moz-calc(685/1280 * 100%);
		width: calc(685/1280 * 100%);
	}
}
@media screen and (max-width: 768px) {
	.intro-art {
		padding: 8vw;
	}
	.intro-art_img {
		margin-bottom: 5.33333vw;
	}
}
.intro-art_list {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-top: 3rem;
}
@media screen and (max-width: 768px) {
	.intro-art_list {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-moz-box-orient: horizontal;
		-moz-box-direction: normal;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		-ms-flex-pack: distribute;
		justify-content: space-around;
		margin: 8vw 0 0 -5.33333vw;
	}
}
.intro-art_list li {
	max-width: 10rem;
}
@media screen and (min-width: 769px) {
	.intro-art_list li + li {
		margin-left: 4.5rem;
	}
}
@media screen and (max-width: 768px) {
	.intro-art_list li {
		width: -webkit-calc(100%/2 - 5.33333vw);
		width: -moz-calc(100%/2 - 5.33333vw);
		width: calc(100%/2 - 5.33333vw);
		margin: 0 0 5.33333vw 5.33333vw;
	}
}
@media screen and (min-width: 769px) {
	.intro-art:nth-child(odd) {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-moz-box-orient: horizontal;
		-moz-box-direction: reverse;
		-ms-flex-flow: row-reverse;
		flex-flow: row-reverse;
		margin-top: 6rem;
	}
}
/** section-feature **/
.section-feature {
	position: relative;
	z-index: 1;
}
.section-feature:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 55rem;
	left: 0;
	top: 6%;
	background-color: rgba(0, 161, 164, 0.1);
	-webkit-transform: skewY(27deg);
	-moz-transform: skewY(27deg);
	-ms-transform: skewY(27deg);
	transform: skewY(27deg);
	z-index: -1;
}
.feature-main {
	mix-blend-mode: multiply;
}
@media screen and (min-width: 769px) {
	.feature-row {
		max-width: 149rem;
		margin: 0 auto;
		padding: 0 1.5rem;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}
@media screen and (max-width: 768px) {
	.feature-row {
		padding: 8vw;
	}
}
@media screen and (min-width: 769px) {
	.feature-col {
		padding: 6rem 8rem;
		width: 50%;
		position: relative;
		z-index: 1;
	}
	.feature-col:after {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: #fff;
		z-index: -1;
	}
	.feature-col:nth-child(1) {
		margin-right: -7rem;
		padding-bottom: 11rem;
	}
	.feature-col:nth-child(2) {
		margin-top: -36rem;
	}
	.feature-col:nth-child(2):after {
		height: 70%;
	}
	.feature-col .copy + .copy {
		margin-top: 8rem;
	}
}
@media screen and (max-width: 768px) {
	.feature-col .copy {
		margin-top: 8vw;
	}
}
.feature-img {
	margin-bottom: 6rem;
}
@media screen and (max-width: 768px) {
	.feature-img {
		margin-bottom: 0;
	}
}
.feature-img_list {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	margin: 4.5rem -2rem 0;
}
.feature-img_list li + li {
	margin-left: 3.5rem;
}
@media screen and (max-width: 768px) {
	.feature-img_list li + li {
		margin-left: 2.66667vw;
	}
}
/** section-terminal **/
.section-terminal {
	position: relative;
}
@media screen and (min-width: 769px) {
	.section-terminal {
		margin-top: -11rem;
	}
}
.section-terminal:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 55rem;
	left: 0;
	top: 6%;
	background-color: rgba(0, 161, 164, 0.1);
	-webkit-transform: skewY(-27deg);
	-moz-transform: skewY(-27deg);
	-ms-transform: skewY(-27deg);
	transform: skewY(-27deg);
	z-index: -1;
}
.terminal-main {
	mix-blend-mode: multiply;
}
.terminal-inner {
	background: #00A1A4;
	color: #fff;
	padding: 6rem 1.5rem 8rem;
	mix-blend-mode: multiply;
}
.terminal-inner .heading-lv3 {
	color: #fff;
}
.terminal-inner .heading-lv3:after {
	background: #fff;
}
.terminal-inner .copy {
	max-width: 130rem;
	margin: 0 auto;
}