@charset "utf-8";

/*메인비쥬얼 영역*/

/*
배경컬러:   #fafafa;  폰트컬러: #292725;  강조컬러:  #766ad4; 
font-family: 'Noto Sans KR', sans-serif;  Regular 400 , Bold 700
font-family: 'Montserrat', sans-serif;
font-family: 'Roboto', sans-serif; 
*/

body{
	width:100%;
	height:100%;
	overflow:hidden;
}

#wrap{
	width:100%;
	height:100vh;
	position:relative;
	/* scroll-direction: horizontal; */
}

/*메인비쥬얼 영역*/
.main{
	overflow:inherit;
}

.main01{
	/* background:url(../img/main/main101.jpg) 0 0 no-repeat; */
	background-size:cover;
	height:100vh;
	border-right:4px solid #000;
	border-left:4px solid #000;
}

.main02{
	/* background:url(../img/main/main22.jpg) 0 0 no-repeat; */
	background-size:cover;
	height:100vh;
	border-right:4px solid #000;
	border-left:4px solid #000;	
	background:#0d1018;	
}

.main03{
	background:url(../img/main/main33.jpg) 0 0 no-repeat;
	background-size:cover;
	height:100vh;
	color:#fff;
	border-right:4px solid #000;
	border-left:4px solid #000;	
}

.main04{
	background:url(../img/main/main04.jpg) 0 0 no-repeat;
	background-size:cover;
	height:100vh;
	border-right:4px solid #000;
	border-left:4px solid #000;	
}

.swiper-button-prev:after, .swiper-button-next:after{
	display:none;
}

.swiper-button-next, .swiper-button-prev{
	background:url(../img/main/arrow_w.png) 0 0 no-repeat;
	top:inherit;
	bottom:7.5%;
	width:50px;
	height:50px;
}

.swiper-button-next{
	transform:scaleX(-1);
	right:30%;
}

.swiper-button-prev{
	left:30%;
}

.swiper-pagination-bullet{
	width:14px;
	height:14px;
	opacity:1;
	background:#fff;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
	bottom:9.2%;
	left:49%;
	width:inherit;
    font-size: 22px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
}

.swiper-pagination-bullet-active{
	background: #3669ec;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
	margin:0 10px;
}

/*첫번째 슬라이드*/
.box {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 2px 30px rgba(black, .2);
  background: lighten(#f0f4c3, 10%);
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.wave {
  opacity: .4;
  position: absolute;
  top: 0;
  left: 0;
  background: #0af;  /*#1e7ff7*/
  width: 90%;
  height: 90%;
  border-radius: 3%;
  animation: drift 30000ms infinite linear;
}

.wave.-three {
  animation: drift 50000ms infinite linear;
}

.wave.-two {
  animation: drift 70000ms infinite linear;
  opacity: .1;
  background: #3669ec;
}

.box:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
  z-index: 11;
  transform: translate3d(0, 0, 0);
}

@keyframes drift {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}

.main01_text{
	position:absolute;
	top:40%;
	color:#fff;
	font-weight:300;
	width:100%;
	text-align:center;
}

.main01_text{
	animation: focus-in-expand 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes focus-in-expand {
  0% {
    /* letter-spacing: -0.5em; */
	filter: blur(12px);
    opacity: 0;
  }
  100% {
	filter: blur(0px);
    opacity: 1;
  }
}


.main01_text h2{
	margin-bottom:70px;
	color:#fff;
}

.main01_text h2 span {
	font-family: 'Roboto', sans-serif; 
	font-size: 80px;
	position: relative;
	letter-spacing: -4px;
	color: #fff;
}
.main01_text h2 span:before {
	content: '';
	height: 1px;
	position: absolute;
	bottom: 0;
	background: #fff;
	width: 0%;
	animation: voila 3s forwards linear;
	opacity:0.5;
  }
  
.main01_text h2 span:nth-child(2) {
    opacity: 1;
	margin:0 15px;
  }
.main01_text h2 span:nth-child(3) {
    opacity: 1;
  }

@keyframes voila {
  to { width: 100%; }
}

.main01_text h3{
	font-family: 'Noto Sans KR', sans-serif; 
	font-size:25px;
	font-weight:300;
	line-height:35px;
}

/****메인비쥬얼 영역****/


/****첫번째 슬라이드****/

/*두번째 슬라이드*/

.gooey{
	background-image: linear-gradient(120deg, #34e0f0 0%, #b400ff 100%);
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	width: 10%; height: 12%;
	animation: morph 3s linear infinite; 
	transform-style: preserve-3d;
	outline: 1px solid transparent;
	will-change: border-radius;
	position:absolute;
	top:40%;
	left:60%;
}
.gooey:before,
.gooey:after{
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left: 39px; top: 0;
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	box-shadow: 5px 5px 89px rgba(0, 102, 255, 0.21);
	will-change: border-radius, transform, opacity;
	animation-delay: 200ms;
	background-image: linear-gradient(120deg, rgba(0,67,255,.55) 0%, rgba(0,103,255,.89) 100%);
}

.gooey:before{
	animation: morph 3s linear infinite;
	opacity: .21;
	animation-duration: 1.5s;
}

.gooey:after{
	animation: morph 3s linear infinite;
	animation-delay: 400ms;
	opacity: .89;
	content: "VIEW MORE?";
	line-height: 120px;
	text-indent: -21px;
	color:#fff;
	font-family: 'Montserrat', sans-serif;
	font-size:19px;
	font-weight:500;
}

@keyframes morph{
  0%,100%{
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  34%{
      border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
  }
  50%{
    opacity: .89;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  67%{
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
  }
}

@keyframes fadeIn{
	100%{
		transform: scale(1.03);
		opacity: 0;
	}
}


.main02_text{
	font-family: 'Noto Sans KR', sans-serif;
	color:#fff;
	margin:300px auto;
	width:50%;
}

.main02_text h2{
	font-size:40px;
	font-weight:700;
	margin-bottom:50px;
}

.main02_text h3{
	font-size:20px;
	font-weight:400;
	color:#3669ec;
	margin-bottom:40px;
}

.main02_text h4{
	font-size:18px;
	font-weight:400;
}

.main02_text h4:nth-child(4){
	margin:40px 0;
}

/****두번째 슬라이드****/

/*세번째 슬라이드*/

.main03_textbox{
	margin:250px auto;
	width:100%;
	text-align:center;
	font-weight:400;
}

.main03 h2{
	background:url(../img/main/circle.png) 50% 0 no-repeat;
	font-family: 'Roboto', sans-serif; 
	font-size:80px;
	padding-top:55px;
	height:200px;
	/* text-shadow:2px 2px 2px black; */
}

.main03 h3{
	font-family: 'Noto Sans KR', sans-serif;
	font-size:20px;
	line-height:28px;
	margin-top:80px;
	margin-bottom:150px;
	/* text-shadow:2px 2px 2px black; */
}

.main03 ul{
	width:75%;
	margin:0 auto;
}

.main03 ul li{
	display:inline-block;
	width:20%;
	font-family: 'Noto Sans KR', sans-serif;	
	font-size:20px;
	position:relative;
	/* text-shadow:2px 2px 2px black; */
}

.main03 ul li i{
	width: 17px;
    height: 17px;
    border: 3px solid #3669ec;
    border-radius: 50%;
    position: absolute;
    display: block;
    left: 47%;
    top: -40px;
	/* filter: drop-shadow(2px 3px 2px black); */
}

/****세번째 슬라이드****/

/*네번째 슬라이드*/

.main04_textbox{
	width:100%;
	margin-top:280px;
	font-family: 'Noto Sans KR', sans-serif;
	text-align:center;
}

.main04 h2{
	font-size:35px;
	font-weight:700;
	color:#fff;
}

.ability{
	width:70%;
	height:310px;
	margin:140px auto 0;
}

.ability li{
	display:inline-block;
	width:24%;
	height:100%;
	border:1px solid rgba(255,255,255,0.4);
	padding-top:100px;
	position:relative;
}

.ability li:nth-child(1), .ability li:nth-child(3){
	top:40px;
}

.ability h3{
	font-size:20px;
	font-weight:700;
	color:#fff;
	margin-bottom:50px;
}

.ability h4{
	font-size:18px;
	font-weight:400;
	color:#d6d6d6;
	line-height:22px;
}

/****네번째 슬라이드****/

@media screen and (max-width:1700px){
	.project_img{
		margin-top:300px;
	}
	
	.project_img figure{
		float:inherit;
	}
	
	.seoul_m figure{
		margin-left:0;
		margin-top:50px;
	}
	
}

@media screen and (max-width:1500px){
	.main02_text h2{
		font-size:30px;
	}
	
	.project_img{
		margin-top:300px;
		margin-left:150px;
	}	
	
	.ability{
		margin:100px auto 0;
	}
	
	.ability li:nth-child(1), .ability li:nth-child(3){
		top:0;
	}
	.ability li{
		width:45%;
		height:70%;
		padding-top:50px;
	}
	
	.main01_text h2 span:before{
		display:none;
	}
	
}


@media screen and (max-width:1024px){
	
	.main01, .main02, .main03, .main04{
		background-position:83% 0;
	}
	
	/*슬라이드01*/
	.main01_text{
		top:30%;
	}
	
	#anim, #shuffle{
		font-size:80px;
	}

	.main01_text h3{
		font-size:25px;
		line-height:35px;
	}
	/****슬라이드01****/

	/*슬라이드02*/
	.main02_text{
		margin:220px auto;
		float:inherit;
		width:85%;
	}
	
	.main02_text h2{
		font-size:30px;
		margin-bottom:50px;
	}
	
	.main02_text h3{
		font-size:25px;
	}
	
	.main02_text h4{
		font-size:20px;
	}
	
	.view_btn{
		margin-top:80px;
	}
	
	.project_img{
		display:none;
	}
	/****슬라이드02****/
	
	/*슬라이드 03*/
	.main03_textbox{
		width:90%;
		margin:240px auto;
	}
	
	.main03 h3{
		margin:90px 0 120px;
	}
	
	.main03 ul{
		display:none;
	}

	
	/****슬라이드 03****/

	/*슬라이드 04*/
	.main04_textbox{
		margin-top:24.5vh;
	}
	
	.ability{
		margin:5.8vh auto 0;
	}
	
	.ability li{
		width:45%;
		height:60%;
		padding-top:0;
	}
	
	.main04 h2{
		font-size:3.2vw;
	}
	
	.ability h3{
		padding-top:30px;
		font-size:2.1vw;
	}
	
	.ability h4{
		font-size:1.9vw;
	}
	
	.ability li:nth-child(1), .ability li:nth-child(3){
		margin-right:40px;
	}
	
	.ability li:nth-child(1), .ability li:nth-child(2){
		margin-bottom:40px;
	}
	/****슬라이드 04****/
	
	/*스와이퍼 버튼*/
	.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
		bottom:5.2%;
	}
	
	.swiper-button-next{
		right:25%;
	}
	
	.swiper-button-prev{
		left:25%;
	}
	
	.swiper-button-next, .swiper-button-prev{
		bottom:1.5%;
	}
	
}

@media screen and (max-width:930px){
	.main03 h3 br{
		display:none;
	}
	
	.ability li{
		height:55%;
	}
	
	
}

@media screen and (max-width:768px){
	/*슬라이드 01*/
	.main01_text h2{
		margin-bottom:50px;
	}	
	
	#anim, #shuffle{
		font-size:80px;
	}
	
	.main01_text h3{
		font-size:20px;
		line-height:30px;
	}	
	/****슬라이드01****/
	
	/*슬라이드02*/
	.main02_text{
		margin: 280px auto;
	}
	
	.main02_text h2{
		font-size:28px;
	}
	
	.main02_text h3{
		font-size:25px;
	}
	
	.main02_text h4{
		font-size:21px;
	}	
	
	/****슬라이드02****/
	
	/*슬라이드03*/
	.main03 h2{
		font-size:9.1vw;
		background-size:40%;
	}
	
	
	/*슬라이드03*/
	
	/*슬라이드 04*/
	.main04 h2{
		font-size:4.2vw;
	}
	
	.ability{
		margin:8.8vh auto 0;
	}
	
	/***슬라이드04***/
	
	/*스와이퍼 버튼*/
	.swiper-button-next, .swiper-button-prev{
		bottom:2.5%;
	}
	
}

@media screen and (max-width:640px){
	.main01, .main02, .main03, .main04{
		border-right:8px solid #000;
		border-left:8px solid #000;
	}
	/*슬라이드 01*/
	.main01_text{
		top:23%;
	}
	
	.main01_text h2{
		margin-bottom:5.8vw;
	}	
		
	#anim, #shuffle{
		font-size:11.5vw;
		line-height:12vw;
	}	
		
	.main01_text h3{
		font-size:3.3vw;
		line-height:6vw;
	}	
	/****슬라이드 01****/
	
	/*슬라이드 02*/
	.main02_text{
		margin-top:45vw;
	}
	
	.main02_text h2{
		font-size:4.7vw;
	}
	
	.main02_text h3{
		font-size:4vw;
	}
	
	.main02_text h4{
		font-size:3.4vw;
	}	
	
	.view_btn{
		font-size:3vw;
		margin-top:20.3vw;
		margin-left:3.1vw;
	}

	.triangle img{
		width:13.2vw;
	}
	/****슬라이드 02****/
	
	/*슬라이드 03*/
	
	.main03_textbox{
		margin:31.2vw auto;
	}
	
	.main03 ul li{
		font-size:3.2vw;
	}
	
	.main03 ul li i{
		left:42%;
		top:-5.4vw;
		width:2.6vw;
		height:2.6vw;
	}
	
	.main03 h2{
		font-size:12.5vw;
		background-size:47.187vw;
		padding-top:8.5vw;
	}
	
	.main03 h3{
		font-size:3.1vw;
		line-height:4.3vw;
		margin:8vw 0 18.7vw;
	}
	
	.square01{
		top:13%;
	}
	
	.square04{
		top:39%;
	}
	
	.square01 img, .square02 img, .square04 img{
		width:40px;
	}
	/****슬라이드 03****/
	
	/*슬라이드 04*/
	
	.main04_textbox{
		margin-top:33.93vw;
	}
	
	.ability{
		margin:17.9vw auto 0;
		width:100%;
	}
	
	.ability li{
		height:60%;
	}
	
	.ability li:nth-child(1), .ability li:nth-child(2){
		margin-bottom:3.1vw;
	}
	
	.ability li:nth-child(1), .ability li:nth-child(3){
		margin-right:3.1vw;
	}
	
	.ability h3 {
		padding-top: 6.3vw;
		margin-bottom:8.8vw;
		font-size: 3.7vw;
	}
	
	.ability h4 {
		font-size: 3vw;
		line-height: 4.1vw;
	}
	/****슬라이드 04****/
	
		/*스와이퍼 버튼*/
	.swiper-button-next, .swiper-button-prev{
		display:none;
	}
	
}

@media screen and (max-width:480px){
	.main01_text h2{
		letter-spacing:0;
	}
	
	.main02_text{
		margin-top:30vw;
	}
	
	.ability li{
		height:50%;
	}	
}

@media screen and (max-width:400px){
	.main01_text{
		top:30%;
	}
	
	.main02_text{
		width:90%;
		margin-top:40vw;
	}
	
	.main02_text h2{
		margin-bottom:5vw;
	}
	
	.main02_text h3{
		font-size:4.5vw;
		margin-bottom:10vw;
	}
	
	.main02_text h4{
		font-size:3.6vw;
	}
	
	.main02_text h4:nth-child(4){
		margin:7.5vw 0;
	}
	
	.view_btn{
		margin-top:12.5vw;
		font-size:4vw;
	}
	
	.main03_textbox{
		margin:43.2vw auto;
	}
	
	.main03 h3{
		margin: 8vw 0 23.7vw;
	}
	
	.main04 h2{
		font-size:6.2vw;
	}
	
	.ability{
		margin:27.9vw auto 0;
	}
	
	.ability h3{
		padding-top:9.3vw;
	}
	
	.ability h4{
		font-size:3.3vw;
	}
	
	.swiper-button-next{
		right:15%;
	}
	
	.swiper-button-prev{
		left:15%;
	}
	
	.swiper-button-next, .swiper-button-prev{
		background-size:contain;
		width:13px;
		height:34px;
	}
	
	/*4.26 수정*/
	
	.main01_text h2 span{
		font-size:49px;
		letter-spacing:0px;
	}
	
	.gooey{
		width:37%;
		top:48%;
		left:50%;
	}
	
	
}