@charset "UTF-8";
/*
 * sub_layout.css
 *
 */

/* !Loading
---------------------------------------------------------- */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1.8s 0.6s;
  background-color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

/* !mainvisual
---------------------------------------------------------- */
.subMain {
	width: 100%;
	height:350px;
	position: relative;
	z-index:-99;
	overflow: hidden;
	top:90px;
	margin-bottom: 90px;
}
	.subMain h1 {
		position: absolute;
		font-size:54px;
		font-weight:700;
		color: #5CACDF;
		line-height:1.4;
		letter-spacing: 0.04em;
		font-feature-settings: "palt";
		top:33%;
		left:5%;
		z-index:4;
		animation: text-animation 2.5s 1 ease ;
	}
		.subMain h1 span {
			display: block;
			font-family: "Roboto", sans-serif;
			font-size:22px;
			font-weight: 500;
			color: #26353D;
			letter-spacing: 0.04em;
			padding-left:1em;
			line-height:2;
			position: relative;
		}
			.subMain h1 span:before {
				position: absolute;
				content: "";
				width:2px;
				height: 100%;
				background-color: #21A6D8;
				top:0;
				left:0;
				transform: rotate(20deg);
			}

	.subMain img.rhombus1 {
		display: block;
		position: absolute;
		width:306px;
		top:0;
		right: 12%;
		z-index: 1;
		animation: rhombus1 2.5s 1 ease ;
	}
	.subMain img.rhombus2 {
		display: block;
		position: absolute;
		width:516px;
		top:13%;
		right: -8%;
		z-index: 3;
		animation: rhombus2 2.7s 1 ease ;
	}
	.subMain img.rhombus3 {
		display: block;
		position: absolute;
		width:530px;
		bottom:0;
		right: 6%;
		z-index: 2;
		animation: rhombus3 2.9s 1 ease ;
	}

@keyframes text-animation {
    0% {
		opacity:0;
        transform: translateY(50px);
    }
	70% {
		opacity:0;
        transform: translateY(50px);
    }
    100% {
		opacity:1;
        transform: translateY(0);
    }
}

@keyframes rhombus1 {
    0% {
        opacity: 0;
		transform: translateX(-100px);
    }
	55% {
        opacity: 0;
		transform: translateX(-100px);
    }
	100% {
        opacity: 1;
		transform: translateX(0);
    }
}

@keyframes rhombus2 {
    0% {
        opacity: 0;
		transform: translateY(-100px);
    }
	60% {
        opacity: 0;
		transform: translateY(-100px);
    }
	100% {
        opacity: 1;
		transform: translateY(0);
    }
}

@keyframes rhombus3 {
    0% {
        opacity: 0;
		transform: translateX(100px);
    }
	65% {
        opacity: 0;
		transform: translateX(100px);
    }
	100% {
        opacity: 1;
		transform: translateX(0);
    }
}

@media screen and (max-width:1039px){
.subMain {
	height:260px;
	top:80px;
	margin-bottom: 80px;
}
	.subMain h1 {
		font-size:44px;
		top:30%;
		left:30px;
	}
		.subMain h1 span {
			font-size:18px;
		}

	.subMain img.rhombus1 {
		width:228px;
		right: 5%;
	}
	.subMain img.rhombus2 {
		width:386px;
		top:14%;
		right: -20%;
	}
	.subMain img.rhombus3 {
		width:394px;
		right: 0%;
	}
}

@media screen and (max-width:767px){
.subMain {
	height:180px;
	top:70px;
	margin-bottom: 70px;
}
	.subMain h1 {
		font-size:28px;
		top:26%;
		left:25px;
	}
		.subMain h1 span {
			font-size:16px;
		}

	.subMain img.rhombus1 {
		width:156px;
		right: -10%;
	}
	.subMain img.rhombus2 {
		width:268px;
		top:13%;
		right: -42%;
	}
	.subMain img.rhombus3 {
		width:272px;
		right: -26%;
	}

@keyframes text-animation {
    0% {
		opacity:0;
        transform: translateY(40px);
    }
	70% {
		opacity:0;
        transform: translateY(40px);
    }
    100% {
		opacity:1;
        transform: translateY(0);
    }
}

@keyframes rhombus1 {
    0% {
        opacity: 0;
		transform: translateX(-60px);
    }
	55% {
        opacity: 0;
		transform: translateX(-60px);
    }
	100% {
        opacity: 1;
		transform: translateX(0);
    }
}

@keyframes rhombus2 {
    0% {
        opacity: 0;
		transform: translateY(-60px);
    }
	60% {
        opacity: 0;
		transform: translateY(-60px);
    }
	100% {
        opacity: 1;
		transform: translateY(0);
    }
}

@keyframes rhombus3 {
    0% {
        opacity: 0;
		transform: translateX(60px);
    }
	65% {
        opacity: 0;
		transform: translateX(60px);
    }
	100% {
        opacity: 1;
		transform: translateX(0);
    }
}
}

@media screen and (max-width:359px){
	.subMain h1 {
		font-size:26px;
		top:26%;
		left:25px;
	}
	.subMain img.rhombus1 {
		width:156px;
		right: -14%;
	}
	.subMain img.rhombus2 {
		width:268px;
		top:13%;
		right: -52%;
	}
	.subMain img.rhombus3 {
		width:272px;
		right: -32%;
	}
}

/* !contents
---------------------------------------------------------- */
#contents {
	width:100%;
}

.linkInPage {
	margin-top:-90px;
	padding-top:90px;
}

@media screen and (max-width:1039px){
.linkInPage {
	margin-top:-80px;
	padding-top:80px;
}
}

@media screen and (max-width:767px){
.linkInPage {
	margin-top:-70px;
	padding-top:70px;
}
}