@charset "utf-8";

/*

font-family: 'Noto Sans KR', sans-serif;  Regular 400 , Bold 700
font-family: 'Montserrat', sans-serif;
font-family: 'Roboto', sans-serif; 
font-family: 'Nanum Gothic', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Poppins', sans-serif;

타이틀,메인 - #131581;   #171757;
사업부 굵은글씨 - #5679e8;
내용텍스트 - #879de4;  #484849; (흑)

*/

/*프로젝트 섹션*/
.project_sec{
	margin-top:200px;
}

.project_sec h2{
	text-align:center;
	font-family: 'Noto Sans KR', sans-serif;
	font-size:30px;
	font-weight:700;
	color:#000;
	margin-bottom:200px;
	position:relative;
	top:200px;
	opacity:0;
	transition:1.3s;
}

.project_sec h2.scroll{
	top:0;
	opacity:1;
}

.project_wrap{
	width:90%;
	position:relative;
	padding-left:100px;
	overflow:hidden;
}

.project_wrap:before{
	position:absolute;
	content:"";
	background:#3669ec;
	opacity:0.2;
	width:1px;
	height:100%;
	top:0;
	left:50%;
}

.project_wrap div:nth-child(2), .project_wrap div:nth-child(4), .project_wrap div:nth-child(6), .project_wrap div:nth-child(8){
	padding-left:600px;
}

.project_box{
	margin-bottom:150px;
}

.pb01, .pb03, .pb05, .pb07, .pb09 {
	position:relative;
	left:-200px;
	opacity:0;
	transition:1.3s;
}

.pb02, .pb04, .pb06, .pb08, .pb10{
	position:relative;
	right:-200px;
	opacity:0;
	transition:1.3s;	
}

.pb09{
	margin-bottom:50px;
}

.pb01.scroll, .pb03.scroll, .pb05.scroll, .pb07.scroll, .pb09.scroll{
	left:0;
	opacity:1;
}

.pb02.scroll, .pb04.scroll, .pb06.scroll, .pb08.scroll, .pb10.scroll{
	right:0;
	opacity:1;
}

.project_box h3{
	font-family: 'Noto Sans KR', sans-serif;
	font-size:30px;
	font-weight:700;
	color:#3669ec;
	margin-bottom:30px;
}

.project_box  p{
	font-family: 'Noto Sans KR', sans-serif;
	font-size:18px;
	font-weight:400;
	color:#666;
	margin-left:40px;
	margin-bottom:12px;
}

.project_wrap02{
	position:relative;
	top:200px;
	opacity:0;
	transition:1.3s;
}

.project_wrap02.scroll{
	top:0;
	opacity:1;
}

/* 삼각형 애니메이션 */
.triangle01, .triangle02, .triangle03{
	position:absolute;
}

.triangle01{
	left:30%;
	top:15%;
}

.triangle01 img{
	width:44px;
	animation: rotation1 20s infinite linear reverse;
}

@keyframes rotation1{
	from{transform:rotate(60deg);}
	to{transform:rotate(419deg);}
}

.triangle02{
	right:12%;
	top:43%;
}

.triangle02 img{
	animation: rotation2 15s infinite linear;
}

@keyframes rotation2{
	from{transform:rotate(0deg);}
	to{transform:rotate(359deg);}
}

.triangle03{
	left:51%;
	bottom:2%;
}

.triangle03 img{
	width:50px;
	animation: rotation3 20s infinite linear reverse;
}

@keyframes rotation3{
	from{transform:rotate(-90deg);}
	to{transform:rotate(269deg);}
}

.project_wrap02{
	width:70%;
	margin:250px auto 0;
	text-align:center;
}

.project_box02{
	float:left;
	width:50%;
}

.project_box02 figure{
	margin-left:-50px;
}

.project_box02 figure img{
	height:50px;
}

.project_box02 figcaption{
	font-family: 'Noto Sans KR', sans-serif;
	font-size:20px;
	font-weight:400;
	color:#666;
	margin-top:55px;
}

@media screen and (max-width:1400px){
	.project_wrap div:nth-child(2), .project_wrap div:nth-child(4), .project_wrap div:nth-child(6){
		padding-left:390px;
	}
	
	.project_box p{
		line-height:22px;
		font-size:17px;
		margin-left:15px;
	}
	
}

@media screen and (max-width:1024px){
	.triangle01{
		left:20%;
	}
	
	.triangle02{
		top:50%;
	}
	
	.triangle02 img{
		width:40px;
	}
	
	.project_sec{
		margin-top:150px;
	}
	
	.project_wrap{
		padding-left:10vw;
	}
	
	.project_wrap div:nth-child(2), .project_wrap div:nth-child(4), .project_wrap div:nth-child(6){
		padding-left:19.5vw;
	}
	
	.project_sec h2{
		font-size:3.3vw;
	}
	
	.project_box h3{
		font-size:3vw;
	}
	
	.project_box p{
		font-size:2.3vw;
		line-height:2.8vw;
	}
	
	.project_wrap:before{
		display:none;
	}
	
}

@media screen and (max-width:768px){
	.project_sec h2{
		font-size:3.8vw;
	}
	
	.project_box h3{
		font-size:3.5vw;
	}
	
	.project_box p{
		font-size:3vw;
		line-height:3.8vw;
	}
	
	.project_wrap{
		padding-left:7vw;
	}
	
}

@media screen and (max-width:640px){
	.project_sec h2{
		font-size:5vw;
		margin-bottom:100px;
	}
	
	.project_box h3{
		font-size:4.5vw;
	}
	
	.project_box p{
		font-size:3.6vw;
		line-height:4.8vw;
	}
	
	.project_wrap{
		padding-left:0;
		margin:0 auto;
	}
	
	.project_wrap div:nth-child(2), .project_wrap div:nth-child(4), .project_wrap div:nth-child(6){
		padding-left:0;
	}
	
	
	.triangle01{
		top:10%;
		left:40%;
	}
	
	.triangle02{
		top:55%;
	}
	
	.triangle03{
		left:37%;
		bottom:15%;
	}
	
	.triangle01 img{
		width:6.8vw;
	}

	.triangle02 img{
		width:4.5vw;
	}	
	
	.triangle03 img{
		width:7.8vw;
	}
	
}

@media screen and (max-width:380px){
	.project_sec{
		margin-top:100px;
	}
	
	.project_wrap{
		width:93%;
	}
	
	.project_sec h2{
		font-size:5.5vw;
	}
	
	.project_box h3{
		font-size:6.5vw;
	}
	
	.project_box p{
		font-size:4.6vw;
		line-height:5.8vw;
		margin-left:0;
	}
	
	
	
}