@charset "UTF-8";


.link-text a{
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 400;	
}
#bg-slide{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0;
}

#bg-slide figure{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
#bg-slide figure img{
	width: 100%;
	height: 100%;
	transform: scale(1);
	will-change: opacity;
	object-fit: cover;
}
#bg-slide figure.on{
	opacity: 1;
}
#bg-slide figure.zoom img{
	transform: scale(1.2);
	transition: transform 10000ms linear;
}

#bg-slide figure.ease {
	transition: all 3000ms ease;
}

#kv{
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100vh;
	opacity: 0;
}
.kv-logo-wrap{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.logo-scale{
	transform: translateY(50px);
	opacity: 0;
}
.logo-scale.on{
	transform: translateY(0);
	opacity: 1;
	transition: transform 1100ms ease ,opacity 800ms ease;
}

.on-loading #bg-slide,
.on-loading #kv{
	transition: opacity 400ms ease;
	opacity: 1;
}
.bg-overlay{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transition: all 600ms ease;
}
.on-stement .bg-overlay{
	opacity: 1;
	visibility: visible;
}



@media screen and (min-width: 768px) {

	#main{
		position: relative;
		z-index: 50;
	}
	#kv{
		min-width: 1480px;
	}
	#bg-slide figure{
		min-width: 1480px;
	}
	/* thinknext   
	===============================================================*/

	#thinknext{
		position: relative;
		overflow: hidden;
	}
	#thinknext .thinknext-txt{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	#thinknext p{
		color: #fff;
		line-height: 1.8;
		font-size: 38px;
		letter-spacing: -1px;
	}
	#thinknext p + p{
		margin-top: 45px;
	}
	#thinknext .link-text{
		margin-top: 140px;
	}
	.link-text a{
		position: relative;
		padding: 0 90px 0 0;
		font-size: 45px;
		color: #FF5B34;
		transition: opacity 400ms ease;
	}
	.link-text a span{
		position: absolute;
		margin: auto;
		top: 0;
		right: 0;
		bottom: 0;
		width: 60px;
		height: 60px;
		border: 2px solid #FF5B34;
		border-radius: 30px;
	}
	.link-text a span:before{
		content: "";
		position: absolute;
		margin:  auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: block;
		width: 20px;
		height: 15px;
		background: url(../../../shared/img/arrow_more.svg) 50% 50% no-repeat;
		background-size: 100% 100%;
		transition: transform 400ms ease;
	}
	.link-text a:hover span:before{
		transform: translateX(5px);
	}
	.link-text a:hover{
		opacity: 0.7;
	}
	.draw-line-box{
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		height: 100%;
		z-index: 100;
	}
	.draw-line{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1140px;
		transform: translate(-50%,-50%);
	}
	.draw-line svg{
		width: 1140px;
	}


	/* feature   
	===============================================================*/
	#feature{
		padding: 180px 0 120px;
	}

	#feature .top-sec-header{
		padding: 0 0 80px;
		border-bottom: 1px solid #C9C9C9;
	}
	#feature .link-text{
		padding: 70px 0 0;
		border-top: 1px solid #C9C9C9;
	}

	/* works   
	===============================================================*/

	#works{
		padding: 180px 0 120px;
	}
	#works .sec-header h2 img{
		height: 118px;
	}
	.works-item-list-top{	
		margin: 80px 0 0;
	}
	#works .link-text{
		margin: 80px 0 0;
	}


	/* information   
	===============================================================*/

	#information{
		padding: 180px 0 120px;
	}
	#information .sec-inner{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	#information .top-sec-header{
		width: 100%;
	}
	#information .news-item-list{
		margin-top: -50px;
		width: calc(100% - 460px);
	}
	#information .link-text{
		margin: 80px 0 0;
	}



}



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


	.kv-logo-wrap{
		position: absolute;
		bottom: 50%;
		left: 0;
		width: 100%;
		transform: translateY(50%);
	}

	#main{
		position: relative;
		z-index: 50;
	}
	#bg-slide figure img{
		object-fit: cover;
	}
	/* thinknext   
	===============================================================*/

	#thinknext{
		position: relative;
		overflow: hidden;
	}
	#thinknext .thinknext-txt{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	#thinknext p{
		color: #fff;
		line-height: 1.8;
		font-size: 21px;
		letter-spacing: -1px;
	}
	#thinknext p + p{
		margin-top: 45px;
	}
	#thinknext .link-text{
		margin-top: 140px;
	}
	.link-text a{
		position: relative;
		padding: 0 55px 0 0;
		font-size: 25px;
		color: #FF5B34;
		transition: opacity 400ms ease;
	}
	.link-text a span{
		position: absolute;
		margin: auto;
		top: 0;
		right: 0;
		bottom: 0;
		width: 35px;
		height: 35px;
		border: 1px solid #FF5B34;
		border-radius: 30px;
	}
	.link-text a span:before{
		content: "";
		position: absolute;
		margin:  auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: block;
		width: 12px;
		height: 9px;
		background: url(../../../shared/img/arrow_more.svg) 50% 50% no-repeat;
		background-size: 100% 100%;
		transition: transform 400ms ease;
	}
	.draw-line-box{
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
	}
	.draw-line{
		position: absolute;
		bottom: -100px;
		right: -120px;
		width: 391px;
		transform: rotate(17deg);
	}
	.draw-line svg{
		width: 391px;
		height: 443px;
	}


	/* feature   
	===============================================================*/
	#feature{
		padding: 60px 0 70px;
	}
	#feature .top-sec-header{
		padding: 0 0 40px;
		border-bottom: 1px solid #C9C9C9;
	}
	#feature .link-text{
		padding: 40px 0 0;
		border-top: 1px solid #C9C9C9;
	}

	/* works   
	===============================================================*/

	#works{
		padding: 60px 0 70px;
	}
	#works .top-sec-header{
		padding: 0 0 40px;
		border-bottom: 1px solid #C9C9C9;
	}
	#works .link-text{
		padding: 40px 0 0;
		border-top: 1px solid #C9C9C9;
	}


	/* information   
	===============================================================*/

	#information{
		padding: 60px 0 70px;
	}
	#information .top-sec-header{
		padding: 0 0 40px;
		border-bottom: 1px solid #C9C9C9;
	}
	#information .link-text{
		padding: 40px 0 0;
		border-top: 1px solid #C9C9C9;
	}


}


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


	#thinknext p{
		font-size: 18px;
	}

}