@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; (흑)

*/
#wrap{
	width:100%;
	height:100vh;
	position:relative;
}
/*모토섹션*/
.moto_sec{
	margin-top:200px;
}

.moto_sec .inner{
	position:relative;
}

.moto_sec .inner div:nth-child(2){
	margin-top:160px;
	margin-bottom:160px;
}

.moto_wrap{
	margin-left:50px;
	transition:1.3s;
}

.mw01, .mw02, .mw03{
	opacity:0;
	position:relative;
	top:200px;
}

.mw01.scroll, .mw02.scroll, .mw03.scroll{
	opacity:1;
	top:0;
}

.moto_wrap h3{
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size:30px;
	color:#000;
	margin-bottom:50px;
	position:relative;
}

.moto_wrap h4{
	font-family: 'Noto Sans KR', sans-serif;
	font-weight:400;
	font-size:18px;
	color:#666;
	line-height:30px;
}

.moto_wrap h3:after{
	content:"";
	position:absolute;
	background:#3669ec;
	width:200px;
	height:2px;
	left:0;
	bottom:-20px;
	opacity:1;
}

/*****사각형 애니메이션*****/
.square01, .square02, .square03, .square04{
	position:absolute;
	opacity:1;
}

.square01{
	right:2%;
	top:15%;
}

.square03{
	right:65%;
	top:25%;
}

.square02{
	right:25%;
	bottom:15%;
}

.square01 img{
	width:100px;
}

.square02 img{
	width:50px;
}

.square03 img{
	width:80px;
}

.square01 img{
	animation: rotate-in-center 2.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
	filter: drop-shadow(2px 3px 3px #08483b);
}

@keyframes rotate-in-center {
  0% {
    transform: rotate(-360deg);
    opacity: 0;
  }
  100% {
	 transform: rotate(0);
    opacity: 1;
  }
}

.square02 img{
	animation: rotate-in-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
	filter: drop-shadow(2px 1px 4px #08483b);
}

@keyframes rotate-in-center {
  0% {
    transform: rotate(-360deg);
    opacity: 0.2;
  }
  100% {
	 transform: rotate(0);
    opacity: 1;
  }
}

.square03 img{
	animation: rotate-in-center 3.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
	filter: drop-shadow(2px 1px 4px #08483b);
}

@keyframes rotate-in-center {
  0% {
    transform: rotate(-360deg);
    opacity: 1;
  }
  100% {
	 transform: rotate(0);
    opacity: 0.2;
  }
}

/*비전 섹션*/
.vision_sec{
	margin-top:250px;
	background:url(../img/sub_company/vision_bg.png) 0 -30px no-repeat;
	background-size:cover;
	position:relative;
	top:200px;
	opacity:0;
	transition:1.3s;
}

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

.vision_sec .inner > div:nth-child(2){
	margin-top:40px;
}


.vision_box{
	width:50%;
	float:left;
	padding:80px 0 110px;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight:400;
}

.vision_box h3{
	font-size:25px;
	color:#000;
	margin-bottom:30px;
	font-weight:700;
}

.vision_box h4{
	font-size:18px;
	color:#666;
	position:relative;
	margin-left:50px;
}

.vision_box h4:before{
	content:"";
	background:#000;
	width:7px;
	height:7px;
	border:1px solid #000;
	position:absolute;
	left:-25px;
	top:50%;
	transform:translateY(-50%);
}

.item h4:nth-child(3){
	margin-top:15px;
}

.vision_box01{
	float:left;
	width:40%;
}

.vision_box01 h4{
	color:#000;
	font-size:20px;
	font-weight:500;
	text-align:left;
}

.vision_box01 h4:nth-child(2), .vision_box01 h5:nth-child(2){
	margin-top:15px;
	margin-bottom:15px;
}

.vision_box01 h5{
	text-align:left;
	font-size:18px;
	color:#666;
}

/*경력 섹션*/
.career_sec{
	margin-top:250px;
	font-family: 'Noto Sans KR', sans-serif;
	overflow:hidden;
}

.career_sec h2{
	position:relative;
	font-size:25px;
	font-weight:700;
	color:#000;
	text-align:center;
	margin-bottom:35px;
	top:200px;
	opacity:0;
	transition:2s;
}

.career_sec h2.scroll, .career_wrap01.scroll{
	top:0;
	opacity:1;
}

.career_sec h2:after{
	content:"";
	position:absolute;
	background:#3669ec;
	width:200px;
	height:3px;
	bottom:-20px;
	left:50%;
	transform:translateX(-50%);	
}

.career_wrap01{
	margin-bottom:140px;
	position:relative;
	top:200px;
	opacity:0;
	transition:2s;
}

.career_wrap02{
	position:relative;
	left:-200px;
	opacity:0;
	transition:1.3s;
}

.career_wrap03{
	position:relative;
	right:-200px;
	opacity:0;
	transition:1.3s;
}

.career_wrap02.scroll{
	left:0;
	opacity:1;
}

.career_wrap03.scroll{
	right:0;
	opacity:1;
}

.career_wrap02:after{
	content:"";
	position:absolute;
	background:#3669ec;
	top:0;
	right:0;
	width:1px;
	height:450px;
	opacity:0.4;
}

.career_wrap02 ,.career_wrap03{
	float:left;
	width:50%;
}

.career_wrap01 h3{
	text-align:center;
	font-size:18px;
	font-weight:700;
}

.career_wrap02 h3 ,.career_wrap03 h3{
	text-align:center;
	font-size:20px;
	font-weight:400;
	color:#000;
	margin-bottom:70px;
}

.career_wrap02 p ,.career_wrap03 p{
	font-size:18px;
	font-weight:400;
	color:#666;
	text-align:left;
	margin-bottom:20px;
	line-height:23px;
	margin-left:150px;
}

.career_wrap03 p{
	margin-left:170px;
}

@media screen and (max-width:1400px){
	.square01{
		right:20%;
	}
	
	.square01 img{
		width:70px;
	}
	
		/*비전섹션*/
	.vision_sec{
		margin-top:200px;
	}
	
	.vision_sec .inner > div:nth-child(2){
		margin-top:0;
	}
	
	.vision_box h3{
		font-size:23px;
	}
	
	.vision_box h4{
		margin-left:3.5vw;
	}
	
	.vision_box01{
		width:45%;
	}
	
	/*경력사항*/
	.career_wrap03 h3{
		margin-left:-100px;
	}
	
	.career_wrap03 p{
		margin-left:90px;
	}

	.career_wrap02:after{
		right:-15px;
	}

	.career_wrap02 h3, .career_wrap03 h3{
		font-size:1.5vw;
	}
	
	.career_wrap02 p, .career_wrap03 p{
		font-size:1.3vw;
		line-height:1.6vw;
	}
}

@media screen and (max-width:1024px){
	/*모토섹션*/
	.moto_sec{
		margin-top:150px;
	}
	
	.moto_sec .inner div:nth-child(2){
		margin-top:130px;
		margin-bottom:130px;
	}	
	
	.moto_wrap{
		margin-left:20px;
	}
	
	.moto_wrap h3{
		font-size:3.3vw;
	}
	
	.moto_wrap h4{
		font-size:2.3vw;
		line-height:3.2vw;
	}
	/*비전섹션*/
	.vision_box{
		width:100%;
		float:inherit;
		padding:60px 0 80px;
	}
	
	.vision_box h3{
		font-size:3.3vw;
		margin-bottom:50px;
	}
	
	.vision_box h4, .vision_box01 h5{
		font-size:2.3vw;
	}
	
	.vision_wrap{
		margin-left:30px;
	}
	
	/*경력섹션*/
	.career_sec{
		margin-top:200px;
	}
	
	.career_wrap02, .career_wrap03{
		width:100%;
		float:inherit;
	}
	
	.career_wrap02 h3, .career_wrap03 h3{
		font-size:3vw;
	}
	
	.career_wrap02 p, .career_wrap03 p{
		font-size:2.3vw;
		line-height:3.6vw;
		text-align:center;
		margin-left:0;
	}
	.career_wrap02:after{
		display:none;
	}
	
	.career_wrap03 h3{
		margin-top:100px;
		margin-left:0;
	}
	
	.career_sec h2{
		font-size:3vw;
	}
	
	.career_wrap01 h3{
		font-size:2.1vw;
	}
	
	.career_sec h2:after{
		width:19.5vw;
	}
	
	.career_wrap01, .career_wrap02, .career_wrap03{
		transition:2s;
	}
	
}

@media screen and (max-width:768px){
	.moto_sec br{
		display:none;
	}
	
	.moto_wrap h3, .vision_box h3, .career_sec h2{
		font-size:3.8vw;
	}
	
	.moto_wrap h4, .vision_box h4, .vision_box01 h5, .career_wrap02 p, .career_wrap03 p{
		font-size:3vw;
		line-height:4vw;
	}
	
	.career_wrap01 h3{
		font-size:2.5vw;
	}
	
	.career_wrap02 h3, .career_wrap03 h3{
		font-size:3.2vw;
	}
}

@media screen and (max-width:640px){
	.moto_sec{
		margin-top:100px;
	}
	
	.moto_wrap{
		margin-left:10px;
	}
	
	.moto_wrap h3{
		font-size:5.5vw;
		margin-bottom:7.8vw;
	}
	
	.moto_wrap h4{
		font-size:3.6vw;
		line-height:4.5vw;
	}
	
	.moto_sec .inner div:nth-child(2){
		margin-top:120px;
		margin-bottom:120px;
	}
	
	.square01 img{
		width:6.2vw;
	}
	
	.square02 img{
		width:7.8vw;
	}	
	
	.square03 img{
		width:12.5vw;
	}
	
	.moto_wrap h3:after{
		width:28.4vw;
		bottom:-3.9vw;
	}
	
	/*비전섹션*/
	.vision_sec{
		margin-top:150px;
	}
	
	.vision_box{
		padding:4.6vw 0 12.5vw;
	}
	
	.vision_box h3{
		font-size:5vw;
		margin-bottom:7.8vw;
	}
	
	.vision_box h4, .vision_box01 h5{
		font-size:3.6vw;
	}
	
	.vision_box01{
		width:47%;
	}
	
	.vision_box h4:before{
		left:-18px;
	}
	
	.vision_wrap{
		margin-left:15px;
	}
	
	/*경력 섹션*/
	.career_sec h2{
		font-size:5vw;
	}
	
	.career_sec h2:after{
		width:31.5vw;
	}
	
	.career_wrap01 h3{
		font-size:3.5vw;
	}
	
	.career_wrap02 h3, .career_wrap03 h3{
		font-size:4vw;
	}
	
	.career_wrap02 p, .career_wrap03 p{
		font-size:3.6vw;
	}
	
}

@media screen and (max-width:400px){
	.moto_sec{
		margin-top:50px;
	}
	
	.career_sec {
		margin-top: 100px;
	}
	
	.moto_sec .inner div:nth-child(2){
		margin-top:50px;
		margin-bottom:50px;
	}
	
}