@charset "UTF-8";
video {
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}
/* splash s */
.splash {
	background: #e5adad;
	height: 100vh;
	width: 100%;
	color: #fff;
	display: flex;
	align-content: center;
	justify-content: center;
	font-size: 50px;
	position: fixed;
	z-index: 10000;
}

/* splash e */

/* main s */
.main {
    display: none;
}
.main.on {
    display: block;
}
.main_img {
	width: 100% !important;
	display: flex;
	flex-direction: column;
	height: 100vh;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff;
	/* object-fit: contain; */
	justify-content: center;
	object-fit: cover;
	align-content: center;
	align-items: center;
}
.main_img video {
	object-fit: cover;
	height: 100%;
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
}
.main_img .video_web {
	
}
.main_img .video_mobile {
	display: none;
}
/* main e */

/* section s */
.section1 {}

.main_img {}

.aos_wrap {
	display: flex;
	flex-flow: column;
	margin: 0 auto;
}

.aos_wrap>div {}


.section2 {
	background: #F5F1F0;
	transition: .8s;
}

.Our_project {
	width: 100% !important;
	display: flex;
	flex-direction: column;
	height: 110vh;
	margin: 0 !important;
	padding: 0 !important;
	/* background: #F5F1F0; */
	align-items: center;
	justify-content: center;
	/* gap: 16px; */
	min-height: 932px;
}

.Our_project .txt {
	font-size: 30px;
	font-family: 'SUIT-Regular';
	margin-bottom: 40px;
}

.Our_project>.button {
	display: flex;
	width: 580px;
	height: 80px;
	border-radius: 40px;
	background: #FFF;
	font-size: 20px;
	transition: .3s;
	/* cursor: pointer; */
	justify-content: center;
	align-items: center;
	position: relative;
	border: none;
	margin-top: 40px;
	z-index: 0;
	font-weight: 600;
	transition: .3s;
}
.Our_project .txt_block {
	display: block;
}
.Our_project .txt_none {
	display: none;
}
.button-hover {
	margin: 0;
	display: flex;
	background: #7DA4E7;
	width: 60px;
	height: 60px;
	border-radius: 40px;
	position: absolute;
	right: 7px;
	top: 50%;
	align-items: center;
	justify-content: center;
	transition: .3s;
	transform: translateY(-50%);
}

button:hover .button-hover {
	background-color: #FDBF31;
}

.Our_project_none {
	display: flex;
	/* border-right: 2px dotted #ccd7d7; */
	/* width: 580px; */
	/* height: 80px; */
	border-radius: 40px;
	background: none;
	border: none;
	/* margin: clamp(15px, 3vw, 22px) 0; */
	font-size: 150px;
	transition: 1s;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	padding: 0;
	font-weight: 900;
	font-family: 'SUIT';
	padding-bottom: 16px;
}

.Our_project_none:hover .project,
.Our_project_none:focus .project {
	transform: translate3d(0, -105%, 0);
}

.our_project_none {
	display: inline-block;
	overflow: hidden;
	transition: .3s;
}

.project {
	display: inline-block;
	position: relative;
	transition: transform 1s;
}

.project::before {
	position: absolute;
	content: attr(data-hover);
}

.project {
	color: #000000;
}

.project::before {
	top: 105%;
	color: #7DA4E7;
}
/* .cursor_s[data-img="1"] {
	background: url(../img/database-bg.png) 50% 50% / contain no-repeat;
}
.cursor_s[data-img="2"] {
	background: url(../img/system-bg.png) 50% 50% / contain no-repeat;
	
}

.cursor_s[data-img="3"] {
	background: url(../img/design-bg.png) 50% 50% / contain no-repeat;
	
}
 */


.Contents {
	width: 100% !important;
	display: flex;
	flex-direction: column;
	/* height: 250vh; */
	margin: 0 !important;
	padding: 0 0 250px 0;
	align-items: center;
	justify-content: center;
	gap: 200px;
}

.section2-background {
	background-color: #B9CFFA;
	/* 원하는 배경색으로 변경 */
}

.marquee {
	width: 100%;
	overflow: hidden;
	/* display: flex; */
	/* flex-direction: row; */
	/* gap: 30px; */
	white-space: nowrap;
	box-sizing: border-box;
}
.marquee .setting {
	background: url(./img/setting.png)50% 50% / contain no-repeat;
	height: 100%;
	width: 146px;
	margin: 0 40px;
}
.marquee .earth {
	background: url(./img/earth.png)50% 50% / contain no-repeat;
	height: 100%;
	width: 146px;
}
.marquee .star {
	background: url(./img/star_on.png)50% 50% / contain no-repeat;
	height: 100%;
	width: 146px;
}

.marquee>div {
	font-size: 150px;
	color: #fff;
	font-weight: 900;
	display: flex;
	flex-direction: row;
	/* transition: .3s; */
}

.marquee>div>div {
	display: flex;
	flex-direction: row;
	gap: 50px;
	background-image: url(./img/txt.png);
	height: 172px;
	width: 3283px;
	z-index: 1000;
	background-size: cover;
	background-position: center;
	transition: .3s;
}

.marquee>div>div>div {
	display: flex;
}

.digital {
	max-width: 1624px;
	display: flex;
	flex-direction: row;
	gap: 190px;
	justify-content: center;
	margin: 0 70px;
	min-width: 320px;
}

.digital .txt {}

.digital .img {
	position: relative;
	display: flex;
	align-items: center;
}

.digital .video {
	height: 700px;
	background: #ddd;
	border-radius:20px;
	object-fit: cover;
}

.digital .txt {
	width: 500px;
	display: flex;
	font-size: 40px;
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 1.4;
	transition: .3s;
}

.digital .arrow {
	background: #7DA4E7 url(./img/arrow.png) 50% 50% / 60px no-repeat;
	width: 128px;
	height: 128px;
	border-radius: 100px;
	position: absolute;
	right: -64px;
}
.digital .arrow:hover {
	transition: all .5s ease;
	animation: demo 1s infinite;
}

@keyframes demo {
	 30% {
        transform: scale(1.1);
    }

    40%, 60% {
        transform: rotate(-10deg) scale(1.1);
    }

    50% {
        transform: rotate(10deg) scale(1.1);
    }

    70% {
        transform: rotate(0deg) scale(1.1);
    }
}
.brand .arrow:hover {
	transition: all .5s ease;
	animation: demo 1s infinite;
}
.brand .arrow {
	background: #fff url(./img/arrow_ON.png) 50% 50% / 60px no-repeat;
	width: 128px;
	height: 128px;
	border-radius: 100px;
	/* flex: 1 0 128px; */
	/* transform: translateX(70px); */
	position: absolute;
	left: -64px;
}

.brand {
	max-width: 1622px;
	display: flex;
	flex-direction: row;
	gap: 190px;
	justify-content: center;
	margin: 0 70px;
	min-width: 320px;
}

.brand .video {
	height: 700px;
	background: #ddd;
	border-radius: 20px;
	object-fit: cover;
	border: none;
}

.brand .txt {
	width: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40px;
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
	flex-direction: column;
	line-height: 1.2;
	min-width: 320px;
}

.brand .img {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
}

.culture {
	background-color: #FFD678;
	justify-content: center;
	align-items: center;
	height: 110vh;
	display: grid;
	overflow: hidden;
	min-height: 932px;
}

.culture .culture_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.culture .aniamtion-img {
	background: url(./img/c-txt-box.png) 50% 50% / contain no-repeat;
	height: 800px;
	width: 800px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: rotatebox 38s linear infinite;
	transform-origin: 50% 50%;
}

@keyframes rotatebox {
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.culture .c_content {
	width: 650px;
	height: 650px;
	background-color: #fff;
	border-radius: 1000px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 25px;
	transition: .3s;
}

.culture .c_content .c_y_bg {
	background: url(./img/y-bg.png) 50% 50% / contain no-repeat;
	width: 393px;
	height: 332px;
	animation: culture 2s cubic-bezier(0.53, 0, 0.32, 1) infinite;
}

@keyframes culture {
	0% {
		transform: translateY(-30px) ;
	}
	50% {
		transform: translateY(0px) ;
	}
	100% {
		transform: translateY(-30px) ;
	}
}



.culture .c_content .join-btn {
	text-transform: uppercase;
	background: initial;
	border: 1px solid #000;
	border-radius: 500px;
	font-size: 20px;
	/* transition: .3s; */
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 274px;
	height: 80px;
	font-weight: 600;
}
.culture .font_img {
	background-image: url(./img/font_txt.png);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	height: 100%;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	display: none;
}
.culture .c_content .join-btn:hover {
	background: #000;
	color: #fff;
	transition: .3s;
}

.end {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #F5F1F0;
	width: 100%;
	align-content: center;
	justify-content: center;
	min-height: 932px;
	overflow: hidden;
}
.end .video-box {
	flex: 1 0 auto;
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	max-width: 1624px;
	margin: 0 70px;
	box-sizing: border-box;
	height: 75%;
}
.end video {
	height: inherit;
	width: 100%;
	/* background: inherit; */
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	object-fit: contain;
}

.footer {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
/* 	padding-bottom: 88px; */
	gap: 40px;
	padding: 0 70px;
	box-sizing: border-box;
	margin-bottom: 94px;
}

.footer .brochure {
	font-size: 30px;
	font-weight: 600;
	width: auto;
	display: flex;
	align-items: center;
	gap: 13px;
	background: inherit;
	border: none;
	transition: .3s;
	
}

.footer .brochure .b_arrow {
  background: url(./img/b_arrow.png) 50% 50% / contain no-repeat;
  width:24px;
  height:24px;
  display: block;
}

.footer .footer-bottom {
	border-top:1px solid #000;
	padding-top: 15px;
	display: flex;
	justify-content: space-between;
}

.footer .footer-bottom p {
	font-size: 14px;
	font-weight: 500;
	transition: .3s;
}
.footer .footer-bottom .none {
	display: none;
	transition: .3s;
}

.landscape {
	display:none;
}