@charset "utf-8";

/* HERO */
.hero-section {
	background-color: #FFF;
	overflow: hidden;
	height: calc(var(--slider_height) + var(--header_height));
	padding-top: var(--header_height);
}

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

.hero-slider .slick-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: var(--slider_height);
	background-position: 50%;
	background-size: cover;
	cursor: pointer;
}

.hero-dots {
	position: absolute;
	left: 50%;
	bottom: 25px;
	transform: translateX(-50%);
}

.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: 10px;
	height: 10px;
	border: none;
	border-radius: 6px;
	padding: 0;
	background-color: rgba(255 255 255 / 50%);
	transition: all .1s ease;
}

.hero-dots .hero-ul-dots li.slick-active button {
	background-color: #FFF;
}

/** SECTION _ company **/
.main-section-intro {
	background-repeat: repeat-x !important;
	background: #FBF4EC url('../images/front/main-round-pat.png') 50%;
}

.main-section-intro .inner-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 130px 24px 230px 24px;
}

h2.section-heading {
	font-size: 48px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 18px;
}

h2.section-heading + p.sub-heading {
	color: var(--gray500);
	font-size: 18px;
	line-height: 1.5em;
	text-align: center;
}

.service-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 40px auto;
}

.service-badge p {
	color: #FFF;
	font-size: 24px;
	background-color: #CE1312;
	padding: 14px 32px;
	border-radius: 999px;
}

.service-badge p:nth-of-type(2) {
	background-color: #EB6D1F;
}

.service-badge p:nth-of-type(3) {
	background-color: #FDA003;
}

.service-mail {
	display: flex;
	align-items: center;
	gap: 16px;
}

.service-mail a {
	padding: 22px 32px 24px 64px;
	border-radius: 999px;
	background: #222 url('../images/front/ico-mail-light.svg') 28px 58%;
	margin: 0 auto;
	transition: background .05s ease;
}

.service-mail a span {
	display: block;
	color: #FFF;
	font-size: 24px;
	line-height: 1.0em;
}

.service-mail a:active {
	background-color: #444;
}

.service-mail a:active span {
	transform: scale(96%);
}

.logo-p-3d {
	position: absolute;
	right: -100px;
	bottom: -120px;
	z-index: 1;
}

/*** Main Client ***/
.main-section-client .inner-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 130px 24px 0 24px;
}

.btn-show-banner {
	position: absolute;
	left: 50%;
	bottom: 70px;
	transform: translateX(-50%);
	display: flex;
	font-size: 16px;
	line-height: 1.0em;
	height: 48px;
	margin: 40px auto 0 auto;
	padding: 0 46px 0 18px;
	background: #FFF url('../images/front/ico-arrow-down.svg') calc(100% - 12px) 50%;
	border: 1px solid var(--dark);
	border-radius: 16px;
	z-index: 1;
	align-items: center;
}

.btn-show-banner.active {
	background-image: url(
	'../images/front/ico-arrow-up.svg');
	z-index: 1;
}

.client-wrapper {
	display: flex;
	flex-direction: column;
	gap: 100px;
	max-height: 480px;
	overflow: hidden;
	margin-top: 80px;
}

.client-wrapper.expanded {
  max-height: none;
  padding-bottom: 200px;
}

.client-container {
	display: flex;
	flex-direction: column;
	gap: 30px;	
}

.client-heading {
	display: flex;
	align-items: center;
	gap: 16px;
}

.client-heading h3 {
	font-size: 32px;
	font-weight: 700;
}

.client-heading span {
	color: var(--gray300);
	font-size: 15px;
}

.client-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  grid-auto-rows: auto;                  
  gap: 45px;  
}

.client-banner div p {
	font-size: 18px;
	text-align: center;
	margin-top: 1.0em;
}

.gradient-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 480px;
  background: linear-gradient(transparent, #ffffff 60%);
}

/* 펼쳐지면 그라데이션 숨기기 */
.detail-container.expanded .gradient-overlay {
  display: none;
}

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

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

}

@media screen and (max-width:1024px) {
	* {
		--slider_height: 450px;
	}

	.hero-section {
		height: calc(var(--slider_height) + var(--mob_header_height));
  	padding-top: var(--mob_header_height);
	}

	/** CTA **/
	.main-section-intro .inner-content {
		padding: 80px 16px 160px 16px;
	}

	h2.section-heading {
		font-size: 32px;
		margin-bottom: 10px;
	}

	h2.section-heading + p.sub-heading {
		font-size: 16px;
	}

	.service-badge p {
		font-size: 16px;
	}

	.service-mail a {
		padding: 18px 28px 20px 54px;
		background-position: 20px 56%;
	}

	.service-mail a span {
		font-size: 18px;
	}

	.logo-p-3d {
		width: 580px;
		right: -20%;
	}

	/** Clients */
	.main-section-client .inner-content {
		padding: 80px 16px 0 16px;
	}

	.client-heading {
		gap: 12px;
	}

	.client-heading h3 {
		font-size: 24px;
	}

	.client-heading span {
		font-size: 13px;
	}

	.client-banner div p {
		font-size: 14px;
	}

	.client-banner {
		gap: 30px 20px;
	}

}

@media screen and (max-width: 800px) {
	* {
		--slider_height: 350px;
	}

	/* CTA */
	h2.section-heading {
		font-size: 28px;
	}

	h2.section-heading + p.sub-heading {
		font-size: 14px;
	}

	.logo-p-3d {
		width: 400px;
		right: -20vw;
	}

}

@media screen and (max-width: 640px) {
	* {
		--slider_height: 280px;
	}

	.hero-dots {
		bottom: 14px;
	}

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

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

	/* CTA */
	.main-section-intro .inner-content {
		padding: 60px 16px 120px 16px;
	}

	.logo-p-3d {
		width: 60vw;
		bottom: -100px;
	}

	.btn-show-banner {
		font-size: 15px;
		height: 42px;
		padding: 0 42px 0 16px;
	}

	/** Clients **/
	.client-wrapper {
		max-height: 380px;
		gap: 60px;
	}

	.client-wrapper.expanded {
		padding-bottom: 150px;
	}

	.client-banner {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 12px;
	}

	.gradient-overlay {
		height: 380px;
	}

}

@media screen and (max-width: 480px) {
	/* Slide */
	* {
		--slider_height: 160px;
	}
	/* CTA */
	h2.section-heading {
		font-size: 24px;
	}

	.service-badge p {
		font-size: 15px;
	}

	.service-mail a span {
		font-size: 16px;
	}

	.logo-p-3d {
		bottom: -80px;
	}

	/** Clients **/
	.client-wrapper {
		max-height: 250px;
		margin-top: 50px;
	}

	.client-heading {
		gap: 8px;
	}

	.client-heading h3 {
		font-size: 20px;
	}

	.client-heading span {
		font-size: 12px;
	}
	
	.gradient-overlay {
		height: 250px;
	}

	.client-banner div p {
		margin-top: 0.8em;
	}

}