@charset "utf-8";

/* HERO */
.hero-section {
	height: 100vh;
	max-height: 950px;
	background-color: #000;
	overflow: hidden;
}

.hero-slider {
	visibility: hidden;
	margin-bottom: 0 !important;
}

.hero-slider .slick-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	max-height: 950px;
}

.hero-slider-typo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	max-width: 1440px;
	transform: translate(-50%, calc(-50% + 1.5em));
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	padding: 0;
	transition: opacity 2s ease;
	z-index: 1;
}

.hero-slider-typo.load-hide {
	opacity: 0;
}

.hero-slider-typo p {
	color: #FFF;
}

.hero-slider-typo .typo-eng {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-family: var(--barlow);
}

.hero-slider-typo .typo-max {
	font-size: 58px;
	font-weight: 600;
	line-height: 1.3;
}

.hero-slider-typo .typo-max:lang(en) {
	font-size: 52px;
	line-height: 1.2;
}

.hero-slider .slick-slide {
	background-position: 50% 0;
	background-size: cover;
}

.slide-hero-001 {
	background-image: url('../images/front/main-slide-001.jpg');
}

.slide-hero-002 {
	background-image: url('../images/front/main-slide-002.jpg');
}

.slide-hero-003 {
	background-image: url('../images/front/main-slide-003.jpg');
}

.hero-dots {
	top: 24px;
	left: 12px;
}

.hero-dots .hero-ul-dots {
	display: flex;
	gap: 12px;
}

.hero-dots .hero-ul-dots li button {
	display: block;
	font-size: 0;
	line-height: 0;
	width: 8px;
	height: 8px;
	border: none;
	border-radius: 6px;
	padding: 0;
	background-color: #FFF;
	border: none;
	transition: all .6s ease;
}

.hero-dots .hero-ul-dots li.slick-active button {
	background-color: var(--primary);
	width: 42px;
}

/** Section **/
.main-section {
	overflow: hidden;
}

.main-section.bg-blue {
	background-color: var(--blue100);
}

.main-section.bg-vision {
	overflow: hidden;
	height: 100vh;
	max-height: 950px;
	background: url('../images/front/bg-vision.jpg') 50% bottom / cover;
}

.main-section.bg-consult {
	background: var(--gray100) url('../images/front/bg-consult.jpg') right 50% / contain;
}

.main-section .main-content-inner {
	height: 100%;
	margin: 0 auto;
	padding: 120px 0;
	max-width: 1440px;
}

/** Section Biz **/
.biz-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.biz-cat-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 400px;
	padding: 40px 30px 30px;
	width: calc((100% / 3) - (((3 - 1) / 3) * 32px));
	background-color: #000;
	border-radius: 12px;
	overflow: hidden;
}

.biz-cat-card.invisible {
	opacity: 0;
}

.biz-cat-card.visible {
	opacity: 1;
	transition: opacity .8s ease-out;
}

.biz-cat-card:nth-of-type(3) { transition-delay: .1s; }
.biz-cat-card:nth-of-type(4) { transition-delay: .2s; }
.biz-cat-card:nth-of-type(5) { transition-delay: .3s; }


.biz-cat-typo {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.biz-cat-typo p {
	color: #FFF;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.45em;
}

.biz-cat-typo p.biz-cat-name {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 0.2em;
}

.biz-cat-go {
	display: inline-block;
	padding: 13px 46px 13px 18px;
	background: url('../images/front/ico-arrow-go.svg') calc(100% - 12px) 50%;
	background-color: var(--primary);
	align-self: flex-end;
	border-radius: 40px;
	color: #FFF;
	font-size: 14px;
	line-height: 1.0;
	transition: padding .2s ease-out, background .2s ease-out;
}

.biz-cat-go:hover {
	padding-right: 62px;
	background-color: #15397a;
}

.biz-cat-card.biz-gis {
	flex-grow: 1;
	width: calc((100% / 2) - (((2 - 1) / 2) * 32px));
	background: url('../images/front/biz-card-01.png') 0 / cover;
}

.biz-cat-card.biz-vr {
	background: url('../images/front/biz-card-02.png') 0 / cover;
}

.biz-cat-card.biz-web {
	background: url('../images/front/biz-card-03.png') 0 / cover;
}

.biz-cat-card.biz-ai {
	background: url('../images/front/biz-card-04.png') 0 / cover;
}

.biz-cat-card::before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0 0 0 / 0);
	content: "";
	transition: background .3s ease;
}

.biz-cat-card.warrenty::before {
	display: none
}

.biz-cat-card:hover::before {
	background-color: rgba(0 0 0 / 50%);
}

.biz-cat-card.warrenty {
	align-items: center;
	justify-content: center;
	background-color: #FFF;
	gap: 28px;
}

.biz-cat-card.warrenty .biz-cat-typo p {
	color: var(--gray500);
	text-align: center;
}

.biz-cat-card.warrenty .biz-cat-typo p.biz-cat-name {
	color: var(--dark);
}

.biz-cat-card.warrenty .biz-cat-go {
	align-self: center;
	background-color: var(--dark);
}

.biz-cat-card.warrenty .biz-cat-go:hover {
	background-color: var(--gray500);
}

/*** 비전 ***/
.vision-typo-group {
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: 38px;
	padding: 30px 0;
	align-items: center;
}

.main-title-small {
	font-size: 21px;
	font-weight: 700;
}

.main-typo-lg {
	font-size: 42px;
	font-weight: 700;
	line-height: 1.35em;
}

.case-go {
	display: inline-block;
	top: 20px;
	padding: 17px 42px;
	background-color: var(--primary);
	border-radius: 40px;
	color: #FFF;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.0;
	letter-spacing: 0.02em;
	transition: padding .3s ease-out, background .3s ease;
}

.case-go:hover {
	padding-left: 52px;
	padding-right: 52px;
	background-color: var(--dark);
}

.vision-bottom-typo {
	top: 80px;
	font-size: 100px;
	letter-spacing: 0.02em;
	line-height: 1.2em;
	font-weight: 600;
	color: rgba(255 255 255 / 60%);
	font-family: var(--barlow);
	text-align: center;
}

.vision-bottom-typo.invisible {
	opacity: 0;
	top: 140px;
}

.main-title-small.invisible {
	opacity: 0;
}

.main-title-small.visible {
	opacity: 1;
	transition: opacity 1.2s ease
}

.main-title-small.invisible {
	opacity: 0;
	top: 20px;
}

.main-typo-lg.invisible {
	opacity: 0;
	top: 20px;
}

.main-title-small.visible {
	opacity: 1;
	top: 0;
	transition: opacity 1.2s ease, top .6s ease;
}

.main-typo-lg.visible {
	opacity: 1;
	top: 0;
	transition: opacity 1.2s ease, top .6s .1s ease;
}

.vision-bottom-typo.visible {
	opacity: 1;
	top: 80px;
	transition: opacity 1.2s ease;
}


/*** 상담하기 ***/
.main-content-consult {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 180px 0;
	max-width: 1440px;
}

.consult-typo-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.go-circle-dark {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background-color: var(--dark);
	color: #FFF;
	font-size: 18px;
	font-weight: 500;
	flex-shrink: 0;
	transition: background .2s ease-out, color .2s ease-out;
}

.go-circle-dark:hover {
	color: var(--dark);
	background-color: rgba(255 255 255 / 60%);
	backdrop-filter: blur(3px);
}


/* Responesive
--------------------------------------------- */
@media screen and (max-width:1536px) {
	/** Hero **/
	.hero-slider-typo {
		padding: 0 62px;
	}

  /* Section */
  .main-section .main-content-inner, .main-content-consult {
  	padding-left: 32px;
  	padding-right: 32px;
  }

  .consult-typo-group {
  	padding: 0 32px;
  }

}

@media screen and (max-width:1280px) {
	/* */
}

@media screen and (max-width:1024px) {
	/* Hero */
	.hero-section, .hero-slider .slick-slide {
		height: 75vh;
	}

  .hero-slider-typo .typo-max, .hero-slider-typo .typo-max:lang(en) {
  	font-size: 42px;
  }

  .hero-slider-typo .typo-eng {
  	font-size: 16px;
  }

  /* Section */
  .main-section .main-content-inner {
  	padding: 64px 24px;
  }

  /* BIZ */
  .biz-cat-typo p {
  	font-size: 16px;
  	word-break: keep-all;
  }

  .biz-cat-typo p br {
  	display: none;
  }

  .main-typo-lg:lang(en) br {
  	display: none;	
  }
}

@media screen and (max-width: 800px) {
	/* Hero */
	.hero-section {
		height: 60vh;
	}

	.slide-hero-001 {
		background-image: url('../images/front/main-slide-001@.jpg');
	}

	.slide-hero-002 {
		background-image: url('../images/front/main-slide-002@.jpg');
	}

	.slide-hero-003 {
		background-image: url('../images/front/main-slide-003@.jpg');
	}

	/*** Section > Biz ***/
	.biz-wrapper {
		gap: 18px;
	}

	.biz-cat-card, .biz-cat-card.biz-gis {
		flex-grow: 1;
		width: calc((100% / 2) - (((2 - 1) / 2) * 18px));
	}

	.biz-cat-card.warrenty {
		width: 100%;
		padding: 50px 16px 40px 16px;
		height: auto;
	}

	.main-typo-lg {
		font-size: 32px;
	}

	.case-go {
		font-size: 16px;
		padding: 16px 32px;
	}

	.main-section.bg-vision {
		height: auto;
	}

	.main-section.bg-vision .main-content-inner {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 80px;
	}

	.vision-bottom-typo {
		font-size: 48px;
		top: inherit;
		bottom: 0;
	}

	/*** Section > Consult ***/
	.main-section.bg-consult {
		background-size: cover;
	}

	.main-content-consult {
		padding-top: 130px;
		padding-bottom: 130px;
	}

}

@media screen and (max-width: 640px) {
	/* Hero */
	.hero-slider .slick-slide {
		background-position: 50% 0;
		background-size: contain;
	}

	.hero-slider-typo .typo-max:lang(en) {
		font-size: 32px;
	}

	.hero-slider-typo .typo-max:lang(en) br {
		display: none;
	}
}

@media screen and (max-width: 430px) {
	/* Hero */
	.hero-section, .hero-slider .slick-slide {
		height: 50vh;
	}

	.hero-slider .slick-slide {
		background-position: 50% 0;
		background-size: cover;
	}

	.hero-dots {		
		left: 0;
	}

	.hero-dots .hero-ul-dots {
		gap: 8px;
	}

	.hero-dots .hero-ul-dots li button {
		width: 6px;
		height: 6px;
	}

	.hero-dots .hero-ul-dots li.slick-active button {
		width: 32px;
	}

	.hero-slider-typo {
		padding: 0 32px;
		gap: 16px;
	}

	.hero-slider-typo .typo-eng {
		font-size: 12px;
		font-weight: 400;
	}

	.hero-slider-typo .typo-max {
		font-size: 26px;
		word-break: keep-all;
	}

	.hero-slider-typo .typo-max:lang(en) {
		font-size: 22px;
		word-break: break-word;
		line-height: 1.3em;
	}

	/** Section **/
	.main-section .main-content-inner {
		padding: 40px 20px
	}

	/** Biz **/
	.biz-cat-card, .biz-cat-card.biz-gis {
		width: 100%;
		height: auto;
		padding: 24px 24px;
		gap: 60px;
	}

	.biz-cat-card.biz-vr {
		background-position: 0 100%;
	}

	.biz-cat-typo p.biz-cat-name {
		font-size: 24px;
		margin-bottom: 0;
	}

	.biz-cat-typo p {
		font-size: 14px;
	}

	.biz-cat-go {
		font-size: 12px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.vision-typo-group {
		padding: 20px 0;
		gap: 24px;
	}

	.main-typo-lg {
		font-size: 24px;
		word-break: keep-all;
	}

	.main-title-small {
		font-size: 18px;
	}

	.main-typo-lg br {
		display: none;
	}

	.vision-bottom-typo {
		width: 112vw;
		left: 50%;
		transform: translateX(-50%);
		font-size: 26px;
	}

	.case-go {
		font-size: 14px;
		padding: 12px 28px;
	}

	.case-go:hover {
		padding-left: 38px;
		padding-right: 38px;
	}

	/** Consult **/
	.main-section.bg-consult {
		background-position: 0;
	}

	.main-content-consult {
		flex-direction: column;
		padding: 60px 20px;	
		gap: 50px;	
	}

	.consult-typo-group {
		padding: 0;
	}

	.go-circle-dark {
		margin-left: auto;
		font-size: 14px;
		width: 100px;
		height: 100px;
	}

}