html,
body {
	font-family:"pretendard", sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #9CA3AF;
	line-height: 28px;
	word-break:keep-all;
	-webkit-font-smoothing: antialiased;
	background-color: #000
}

h2 {
	color: #10141D;
	text-align: center;
	font-size: 68px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.68px
}

img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
}

input::placeholder,
textarea::placeholder,
.is-placeholder {
	font-size: 16px;
	font-weight: 400;
	color: #9FA4AB;
}

.btn {
	display: block;
	width: fit-content;
	height: 62px;
	padding: 0 32px;
	text-align: center;
	font-size: 18px;
	color: #000;
	font-weight: 600;
	line-height: 62px;
	border: 1px solid transparent;
	border-radius: 80px;
	background-color: #fff;
	transition: 0.3s;
	user-select: none;
	cursor: pointer;
}

.btn_light:hover {
	background-color: #E5E7EB;
}


.btn_dark {
	color: #fff;
	background-color: #10141D;
}

.btn_dark:hover {
	background-color: #1D2027;
}

.btn_dark_border {
	color: #fff;
	border-color:#9CA3AF;
	background-color: transparent;
}

.btn_dark_border:hover {
	background-color:#1D2027;
}


.btn_floating {
	position: fixed;
	left: 50%;
	bottom: 32px;
	min-width:246px;
	z-index: 200;
	opacity: 0;
	transform: translateX(-50%);
	transition: bottom .2s, opacity .2s, background-color .2s;
	background-color:#10141d;
}
.btn_floating:hover {
	background-color:#30353E;
}
.btn_floating.on {
	bottom: 64px;
	opacity: 1;
}

.br {
	display:block
}

.tab_br {
	display:inline;
	line-height:0;
}

.mo_br {
	display:inline;
	line-height:0;
}

[data-scroll] {
	transition: 0.6s;
}

[data-scroll="in"] {
	opacity: 1;
	transform: translateY(0);
}

[data-scroll="out"] {
	opacity: 0;
	transform: translateY(80px);
}

.inner {
	width: 1222px;
	margin: 0 auto;
	overflow: hidden;
}
/*******/
/* 모달 */
/*******/
.modal.on {
	display:block;
}
.modal {
	position:fixed;
	top:50%;
	left:50%;
	width:768px;
	height:90vh;
	display:none;
	padding:20px 4px;
	border-radius:24px;
	transform:translate(-50%, -50%);
	background-color:#fff;
	overflow:hidden;
	z-index:10200;
}

.modal:has(.submitted-message) {
	height:fit-content
}

.modal .btn_close {
	position:absolute;
	right:20px;
	top:20px;
	width:32px;
	height:32px;
	font-size:0;
	background:url(https://hlab.im/hubfs/H.LAB%201.0/ATS/icon_close.svg) no-repeat;
	background-position:center;
	background-size:cover;
}

.modal .inner {
	width:100%;
	height:100%;
	padding:60px 44px;
	overflow-y:scroll
}

.modal .inner::-webkit-scrollbar {width:8px}

.modal .inner::-webkit-scrollbar-thumb {
	background:#D1D6DB;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	border-radius:50px
}

.modal .form_area .tit {
	font-size:44px;
	font-weight:700;
	color:#121619;
	line-height:58px;
}

.modal .form_area .txt {
	margin-top:8px;
	font-size:17px;
	font-weight:500;
	color:#121619;
	line-height:27px;
	text-align:center;
} 

.modal .form_area .description {
	padding-top:80px;
	font-size:14px;
	font-weight:500;
	line-height:22px;
	color:#283358;
}

.modal .form_area .description strong {
	font-size:16px;
	font-weight:600;
	line-height:25px;
	color:#121619;
}

.modal form input[type="email"],
.modal form input[type="text"],
.modal form textarea {
	width:100%;
	border:1px solid #D6D9E2;
	border-radius:8px;
	padding-left:20px;
	font-family:'pretendard',sans-serif;
	font-size:16px;
	font-weight:400;
	color:#121619;

}
.modal form input[type="email"],
.modal form input[type="text"] {
	height:56px;
	line-height:56px;
}
.modal form .hs-fieldtype-textarea {
	position:relative
}
.modal form .hs-fieldtype-textarea textarea {
	min-height:145px;
	margin-top:0;
	padding:20px 24px;
	resize: none;
}

.modal label span {
	font-size:13px;
	font-weight:400;
	color:#121619;
	line-height:21px;
}

.modal .hs-fieldtype-text,
.modal .hs-fieldtype-phonenumber,
.modal .hs-fieldtype-textarea {
	position:relative;
	margin-top:16px
}

.modal .hs-error-msgs {
	position:absolute;
	right:0;
	top:0;
}

.modal .hs-error-msgs .hs-error-msg {
	font-size:13px;
	font-weight:500;
	color:#FF2C1E;
	line-height:21px;
}

.modal .box_agreeAll {
	position:relative;
	margin-top: 32px;
}

.modal input[type="checkbox"] {
	position:absolute;
	left:0;
	top:0;
	height:1px;
	width:1px;
	visibility:hidden;
}
.modal input[type="checkbox"] + span {
	position:relative;
	padding-left:26px;
	display:flex;
	align-items:center;
	font-size:15px;
	font-weight:500;
	color:#383E42;
	line-height:28px;
}

.modal input[type="checkbox"] + span:before {
	content: "";
	position:absolute;
	left:0;
	top:calc(50% + 1px);
	width: 20px;
	height: 20px;
	border: 2px solid #383E42;
	border-radius: 4px;
	box-sizing:border-box;
	transform:translateY(-50%);
	background: #fff;
	cursor: pointer;
}

.modal input[type="checkbox"]:checked + span:before {
	background-image:url(https://hlab.im/hubfs/H.LAB%201.0/ATS/icon_checked_blue.svg);
	background-position:center;
	border-color:transparent;
}

.modal input[type="checkbox"] + span a {
	position:absolute;
	right:0;
	top:0;
	color:#383E42;
	font-size:15px;
	font-weight:500;
	line-height:28px;
	text-decoration:underline;
}

.modal .hs-fieldtype-booleancheckbox {
	position:relative;
}
.modal .hs_jobda_privacy_policy_agreement {
	display:flex;
	flex-flow:column-reverse;
}

.modal .hs-fieldtype-booleancheckbox + .hs-fieldtype-booleancheckbox {
	margin-top:12px
}

.modal .hs-fieldtype-booleancheckbox label {
	cursor:pointer;
	user-select:none;
}

.modal .hs-fieldtype-booleancheckbox .hs-error-msgs {
	position:relative;
	top:-6px;
	right:auto;
	left:0;
}

.modal .hs-submit {
	margin-top:18px
}

.modal .hs-submit input {
	width:100%;
	height:54px;
	font-size:16px;
	font-weight:500;
	color:#fff;
	line-height:54px;
	border-radius:8px;
	background-color:#121619;
	cursor:pointer;
	user-select:none;
}

.modal .hs_error_rollup {
	display: none !important;
}

/* 모달 _ catalog */
.modal.catalog .submitted-message {
	padding:84px 0;
	text-align:center;
}

.modal.catalog .submitted-message strong {
	font-size:44px;
	font-weight:700;
	line-height:57px;
	color:#121619;
}

.modal.catalog .submitted-message p:has(span) {
	margin-top:24px;
	font-size:17px;
	font-weight:400;
	line-height:27px;
	color:#121619;
}

/* 모달 _ inquiry */
.modal.inquiry form {
	margin-top:77px;
}
.modal.inquiry .hs-richtext p {
	font-size:16px;
	font-weight:600;
	line-height:25px;
	color:#121619;
}

.modal.inquiry .hs-richtext em {
	font-size:14px;
	font-weight:500;
	line-height:22px;
	color:#283358;
}

.modal.inquiry .hs_contact_inbound_basic {
	position:relative;
	margin:12px auto 64px;
}
.modal.inquiry .hs_contact_inbound_basic .hs-form-required {
	display:none;
}

.modal.inquiry .hs_contact_inbound_basic ul {
	display:flex;
	flex-flow:column;
	row-gap:12px;
}

.modal.inquiry .hs_contact_inbound_basic li {
	width:100%;
	height:131px;
}

.modal.inquiry .hs-form-checkbox-display {
	position:relative;
}

.modal.inquiry .hs-form-checkbox-display label {
	display:block;
	font-size:13px;
	font-weight:400;
	letter-spacing:-0.13px;
	line-height:21px;
}

.modal.inquiry .hs_contact_inbound_basic .hs-form-checkbox-display span {
	border: 1px solid #d6d9e2;
	box-sizing:border-box;
	border-radius: 10px;
	color: #333d4b;
	cursor: pointer;
	display: block;
	font-size: 14px;
	font-weight: 400;
	height: 131px;
	letter-spacing: -.28px;
	line-height: 22px;
	padding: 38px 30px 38px 57px;
	user-select:none;
}

.modal.inquiry .hs_contact_inbound_basic input[type="checkbox"]:checked+span {
	border:2px solid #3E72F8;
}

.modal.inquiry .hs_contact_inbound_basic .hs-form-checkbox-display span:before {
	top:43px;
	left:30px;
	transform:translateY(0);
}

.modal.inquiry .hs_contact_inbound_basic .hs-form-checkbox-display strong {
	color: #191f28;
	display: block;
	font-size: 18px;
	font-weight: 700;
	line-height: 29px;
}

.modal.inquiry .hs_contact_inbound_basic li span {
	background-position:right center;
	background-size:auto 100%;
	background-repeat:no-repeat
}

.modal.inquiry .hs_contact_inbound_basic li:nth-of-type(1) span {
	background-image: url(https://inhr.im/hubfs/Solution_center/contact_new/solution/item_jobdaATS.jpg);
}

.modal.inquiry .hs_contact_inbound_basic li:nth-of-type(2) span {
	background-image: url(https://inhr.im/hubfs/Solution_center/contact_new/solution/item_test.jpg);
}

.modal.inquiry .hs_contact_inbound_basic li:nth-of-type(3) span {
	background-image: url(https://inhr.im/hubfs/Solution_center/contact_new/solution/item_jobdaMatching.jpg);
}

.modal.inquiry .hs_contact_inbound_basic li:nth-of-type(4) span {
	background-image: url(https://inhr.im/hubfs/Solution_center/contact_new/solution/item_inhr.jpg);
}



.modal.inquiry .hs_contact_inbound_basic .hs-error-msgs {
	top:auto;
	bottom:-28px;
	right:auto;
	left:0;
}

.modal.inquiry .hs_contact_inbound_basic .hs-error-msgs li {
	height:auto;
}

.modal.terms {
	width: 768px;
	padding: 32px 4px;
	border-radius: 24px;
	background-color: #fff;
}

.modal.terms .inner {
	width:100%;
	height:100%;
	padding:60px 44px;
	overflow-y:scroll;
}

.modal.terms .inner::-webkit-scrollbar-thumb {
	background:#D1D6DB;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	border-radius:50px
}

.modal.terms .btn_terms_close {
	position: absolute;
	right: 20px;
	top: 20px;
	width: 32px;
	height: 32px;
	font-size: 0;
	background:url(https://hlab.im/hubfs/H.LAB%201.0/ATS/icon_close.svg) no-repeat;
	background-position:center;
	background-size:cover;
	cursor: pointer;
}

.modal.terms strong {
	font-size: 24px;
	font-weight: 600;
	line-height: 34px;
	color: #222;
}

.modal.terms dt {
	margin-top: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	color: #333;
}

.modal.terms dd {
	padding-left: 12px;
	font-size: 15px;
	font-weight: normal;
	line-height: 22px;
	color: #4e4e4e;
	position: relative;
}

.modal.terms dd:before {
	content: "-";
	position: absolute;
	left: 0;
	top: 0;
	font-size: 15px;
	font-weight: normal;
	color: #4e4e4e;
}

#dim {
	background-color:rgba(39,37,37,.8);
	position:fixed;
	top:0;
	left:0;
	display:none;
	height:100vh;
	width:100vw;
	z-index:10100;
}

#dim.on {
	display:block;
}

/***********/
/* competency_test 헤더 */
/***********/
.competency_test_header {
	position: fixed;
	top: 72px;
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(20px);
	transition: top .4s;
	z-index: 500;
}

.competency_test_header.hide {
	top: 0;
}

.competency_test_header .inner {
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.competency_test_header .logo a {
	font-size: 22px;
	font-weight: 600;
	color: #fff;
	letter-spacing: -0.22px;
}

.competency_test_header .wrap_nav .btn_gnb {
	display:none;
}

.competency_test_header .nav ul {
	display: flex;
	align-items: center;
	column-gap: 4px;
}

.competency_test_header .nav ul li{
	transition: opacity .2s;
}

.competency_test_header .nav ul a {
	padding:0 14px;
	display: block;
	font-size: 16px;
	color: #d1d5db;
	line-height: 72px;
}

.competency_test_header .nav ul .anchor_form {
	padding-right:0;
	font-weight: 600;
	color: #f3f4f6;
	cursor:pointer
}

.hero {
	height: 1028px;
	background-color: #000;
}

.hero .inner {
	height: 766px;
	display: flex;
	padding-top: 300px;
}

.hero .container_txt,
.hero .container_img {
	position: relative;
	width: 50%;
}

.hero .container_txt .btn {
	width: 200px;
}

.hero .tit {
	position: relative;
	width: 100%;
	display: inline-block;
	font-size: 60px;
	font-weight: 500;
	color: #fff;
	line-height: 120%;
	opacity:0;
}

.hero .tit[data-scroll="in"] {
	opacity:1;
}

.hero .tit strong,
.hero .tit h2 {
	text-align: left;
	font-size: 72px;
	color: #fff;
}

.hero .tit .motion_txt {
	position: relative;
	width: fit-content;
	display: block;
}

.hero .tit .motion_txt::after {
	content: "";
	position: absolute;
	top: 18px;
	right: -6px;
	width: 2px;
	height: 56px;
	background-color: #fff;
	animation: caret 1s steps(1) infinite;
}

@keyframes caret {
	50% {
		opacity: 0;
	}
}

.hero h2 {
	font-weight: 500;
}

.hero .tit .motion_txt em {
	width: fit-content;
	display: block;
	font: inherit;
	font-weight: 500;
	line-height:120%;
	user-select: none;
	background: linear-gradient(90deg, #3887F3 2.07%, #75A6E9 100.68%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	will-change: contents;
}

.motion_img {
	height: 100%;
	position: relative;
}

.hero .container_img {
	opacity:0;
}

.hero .container_img[data-scroll="in"] {
	opacity:1;
}

.hero .container_img .slide {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	user-select: none
}

.hero .container_img .slide.active {
	opacity: 1;
}

.hero .container_img .slide:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 263px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 96%);
	z-index: 100;
}

.hero .container_img .slide.slide_b:after {
	height: 430px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 73%);
}

.hero .container_img .slide.slide_c:after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 96.82%);
	height: 263px;
}

.hero .container_img .slide_a img {
	transform: translateY(60px);
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
}

.hero .container_img .slide_a .img_a_1 {
	position: absolute;
	bottom: 0;
	right:0;
/* 	margin-left:-183px; */
	width: 445px;
	height: 447px;
	opacity: 0;
}

.hero .container_img .slide_a .img_a_2 {
	position: absolute;
	bottom: 0;
	right: 22px;
	width: 445px;
	height: 469px;
/* 	margin-left:-203px; */
	/* 	box-shadow: 0px 2.178px 16.332px 0px rgba(67, 69, 87, 0.15); */
	opacity: 0;
	transition-delay: 0.2s;
	z-index:1;
	filter: drop-shadow(10px 0px 80px rgba(0, 0, 0, 0.50));
}

.hero .container_img .slide_a .img_a_3 {
	position: absolute;
	bottom: 0;
/* 	left: 50%; */
	right:44px;
	width: 445px;
	height: 491px;
/* 	margin-left:-223px; */
	
	/* 	box-shadow: 0px 2.178px 16.332px 0px rgba(67, 69, 87, 0.15); */
	opacity: 0;
	transition-delay: 0.4s;
	z-index:2;
	filter: drop-shadow(10px 0px 80px rgba(0, 0, 0, 0.50));

}

.hero .container_img .slide_a.active .img_a_1,
.hero .container_img .slide_a.active .img_a_2,
.hero .container_img .slide_a.active .img_a_3 {
	opacity: 1;
	transform: translateY(0)
}


.hero .container_img .slide_b img {
	position:absolute;
	opacity: 0;
/* 	left:50%; */
	transform: translateY(60px);
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
}

.hero .container_img .slide_b.active img {
	opacity: 1;
	transform: translateY(0);
}

.hero .container_img .slide_b .img_b_1 {
	bottom:116px;
	width:473px;
	height:228px;
	right:35px;
/* 	margin-left:-236px; */
}

.hero .container_img .slide_b .img_b_2 {
	bottom:164px;
	width:507px;
	height:250px;
	right:18px;
/* 	margin-left:-253px; */
	transition-delay: 0.2s;
	box-shadow: 2px 2px 16px 0px rgba(11, 15, 25, 0.20);
}

.hero .container_img .slide_b .img_b_3 {
	bottom:210px;
	width:543px;
	height:248px;
	right:0;
/* 	margin-left:-271.5px; */
	transition-delay: 0.4s;
	box-shadow: 0px 0px 16px 0px rgba(11, 25, 16, 0.15)
}

.hero .container_img .slide_c {
	display: flex;
	flex-flow: column;
	row-gap: 12px;
	align-items:end;
}

.hero .container_img .slide_c img {
	width: 497px;
	height: 476px;
	opacity: 0;
	transform: translateY(60px);
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
}

.hero .container_img .slide_c.active img {
	opacity: 1;
	transform: translateY(0)
}

.hero .btns {
	margin-top: 48px;
	display: flex;
	column-gap: 8px;
	opacity:0;
}
.hero .btns[data-scroll="in"] {
	opacity:1;
}

.intro {
	position: relative;
	margin-top: -250px;
	padding-top: 200px;
	text-align: center;
	border-radius: 120px;
	background: #f2f3f8;
	transition: .5s;
	z-index: 100;
}
.intro.on {
	background: #2d5eeb;
}

.intro.on .container_needs p em {
	color:#fff
}
.intro .container_needs {
	display: flex;
	flex-flow: column;
	row-gap: 64px;
}

.intro .container_needs p {
	font-size: 51px;
	font-weight: 600;
	color: #10141d;
	line-height: 72px;
	opacity: 0;
	transform: translateY(60px);
	transition: 0.5s;
	will-change: opacity, transform;
}

.intro .container_needs p em {
	font-size:51px;
	color: #5079EF;
	font-weight: 600;
	transition: .5s
}

.intro .container_solution {
	margin-top: 200px;
	padding-bottom: 200px;
}

.intro h1 {
	font-size: 56px;
	color: #fff;
	font-weight: 600;
	line-height: 67.2px;
	letter-spacing: -0.5px;
	opacity: 0;
	transform: translateY(60px);
	transition: .5s;
	will-change: opacity, transform;
}

.intro .btn {
	min-width:246px;
	margin: 40px auto 0;
	border:0;
	opacity: 0;
	transform: translateY(60px);
	transition: .5s;
	will-change: opacity, transform;
}

/*********************/
/* section - function */
/*********************/
.function {
	position:relative;
	height:100%;
}

.function .btn_inquiry {
	position:sticky;
	bottom:40px;
	left:50%;
	transform:translateX(-50%);
}

.function .inner {
	position: relative;
	padding: 180px 0;
	overflow: unset;
}
.function h2 {
	margin-bottom: 32px;
	font-size:64px;
	color: #F9FAFB;
	transform:translateY(60px)
}
.function h2[data-scroll="in"] {
	transform:translateY(0);
}

.function .tab_function {
	position:relative;
	display: flex;
	width: 414px !important;
	height: 62px;
	margin: 0 auto 72px;
	column-gap: 4px;
	padding: 8px;
	border-radius: 36px;
	background-color: #fff;
	transition: .4s;
}

.function .tab_function .swiper-pagination-bullet {
	width: 130px;
	height: 46px;
	margin:0 !important;
	font-size: 16px;
	font-weight:500;
	color: #4B5563;
	line-height: 46px;
	text-align: center;
	border-radius: 24px;
	background-color: transparent;
	opacity:1;
	transition: .5s;
}

.function .tab_function .swiper-pagination-bullet.swiper-pagination-bullet-active {
	color: #fff;
	background-color:#5079EF;
}

.function .tab_function .swiper-pagination-bullet.active:hover {
	background-color: transparent;
}

.function .tab_function .bg {
	position: absolute;
	top: 7px;
	width: 100px;
	height: 48px;
	color: #fff;
	border-radius: 24px;
	background-color: #66C279;
	transition: .3s ease-out;
	z-index: -1;
}

.function .slider_function {
	opacity: 0;
	transform:translateY(60px);
	transition: .5s
}

.function .slider_function[data-scroll="in"] {
	opacity:1;
	transform:translateY(0);
}

.function .slider_function .swiper-slide {
	height:480px;
	background-color:#F9FAFB;
	border-radius:30px;
	position:relative;
}
.function .slider_function .swiper-slide .container {
	display:flex;
	height:100%;
}


.function .slider_function .swiper-slide .txt {
	width:611px;
	padding:102px 0 102px 86px;
}

.slider_function .swiper-slide .txt h3 {
	margin-top:16px;
	font-size:30px;
	font-weight:600;
	line-height:38px;
	color:#10141d;
}
.slider_function .swiper-slide .txt p {
	margin-top:16px;
	font-size:18px;
	font-weight:400;
	line-height:28px;
	color:#4B5563;
}

.slider_function .swiper-slide .txt .btn {
	width:192px;
	height:62px;
	margin-top:16px;
	line-height:62px;
	letter-spacing:-0.02rem;
}

.function .slider_function .swiper-slide .img {
	width:611px;
	position:relative;
}

.function .slider_function .swiper-slide .img img {
	position:absolute;
	right:0;
	bottom:0;
	width:50%;
	height:auto;
}
.function .slider_function .swiper-slide .img .img_pc {
	display:block;
}
.function .slider_function .swiper-slide .img .img_tab {
	display:none;
}
.function .slider_function .swiper-slide .img .img_mo {
	display:none
}

.function .slider_function .swiper-slide.slide_a .img img {
	width:578px;
	height:374px;
}

.function .slider_function .swiper-slide.slide_b .img img {
	width:477px;
	height:376px;
}

.function .slider_function .swiper-slide.slide_c .img img {
	width:528px;
	height:372px;
}

.function .wrap-vod .modal-vod {
	position:fixed;
	left:50%;
	top:50%;
	width:1016px;
	height:0;
	margin-top:-285px;
	padding-bottom:56.25%;
	transform:translateX(-50%);
	z-index:10200;
	display:none;
}

@media (max-width:1080px) {
	.function .wrap-vod .modal-vod {
		width:720px;
		margin-top:-202px;
	}
}

.function .wrap-vod .modal-vod.on {
	display:block;
}

.function .wrap-vod .modal-vod video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border-radius:32px;

}

.function .wrap-vod .modal-vod .btn_close_vod {
	position:absolute;
	right:0;
	top:-58px;
}

.function .wrap-vod .modal-vod .btn_close_vod svg .btn_path {
	transition: .25s	
}

.function .wrap-vod .modal-vod .btn_close_vod svg:hover .btn_path{
	fill:#fff
}

.feature {
	padding:180px 0;
	background-color:#E5E9F3;
}
.feature ul {
	display:flex;
	flex-flow:column;
	row-gap:150px;
}

.feature li h3 {
	width:fit-content;
	margin-bottom:40px;
	font-size: 52px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.52px;
	background: linear-gradient(90deg, #2C5DEA 50%, #96BDF1 134.08%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity:0;
	transform:translateY(60px);
}

.feature li h3[data-scroll="in"]{
	opacity:1;
	transform:translateY(0);
}

.feature li .container {
	display:flex;
	background-color:#F9FAFB;
	border-radius:30px;
	opacity:0;
	transform:translateY(60px) scale3d(.9,.9,1);
	transition: .5s
}

.feature li .container[data-scroll="in"] {
	opacity:1;
	transform:translateY(0) scale(1);
}

.feature li .txt {
	width:527px;
	display:flex;
	flex-flow:column;
	justify-content:center;
	row-gap:16px;
	padding-left:104px;
}

.feature li .txt strong {
	color: #10141D;
	font-size: 30px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.3px;
}
.feature li .txt p {
	color:#4b5563;
}

.feature li .img {
	width:695px;
}

.feature li .img .img_pc {
	display:block;
}
.feature li .img .img_tab {
	display:none;
}
.feature li .img .img_mo {
	display:none
}

.feature .container.triple {
	flex-flow:column;
	background-color:transparent;
	row-gap:20px;
}

.feature .container .wrap_item {
	display:flex;
	column-gap:20px;
}

.feature .container.triple .wrap_item .item {
	background-color:#f9fafb;
}

.feature .container.triple .wrap_item .item .step {
	width:85px;
	height:31px;
	display: flex;
	align-items: center;
	justify-content:center;
	color: #FFF;
	font-family: Pretendard;
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	line-height: 31px;
	letter-spacing: -0.15px;
	border-radius: 40px;
	background: #5079EF;
	background-color:#5079EF;
}
.feature .container.triple .wrap_item .item strong {
	margin-top:8px;
	color: #10141D;
	font-family: Pretendard;
	font-size: 30px;
	font-style: normal;
	font-weight: 600;
	line-height: 130%; /* 39px */
	letter-spacing: -0.3px;

}
.feature .container.triple .wrap_item .item p {
	margin-top:16px;
	color: #4B5563;
	font-family: Pretendard;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; /* 27px */
}

.feature .container .wrap_item .item {
	height:548px;
	border-radius: 30px;
}

.feature .container .wrap_item .txt {
	width:100%;
	height:258px;
	padding:56px 56px 0;
	gap:0;
}

.feature .container .wrap_item.double .item {
	width:601px;
}

.feature .container .wrap_item.single .item {
	display:flex;
	width:100%;
	height:480px;
}

.feature .container .wrap_item.single .txt {
	width:596px;
	padding: 56px 0 0 56px;
}

.feature .container .wrap_item.single .item .img {
	display:flex;
	justify-content:end;
	align-items:end;
}

.feature .container .wrap_item.single .item img {
	width:627px;
	height:424px;
}

.feature .container .wrap_item.double .img {
	width:100%;
	height:290px;
	position:relative;
	display:flex;
	align-items:end;
	justify-content:center;
}

.feature .container .wrap_item.double .item img.img_tab {
	display:none
}

.feature .container .wrap_item.double .item:nth-of-type(1) img {
	width:487px;
	height:230px;
}

.feature .container .wrap_item.double .item:nth-of-type(2) img {
	width:421px;
	height:242px;
}



.graph {
	padding:180px 0 200px;	
}

.graph .tit h2 {
	color: #FFF;
	text-align: center;
	font-size: 72px;
	font-weight: 600;
	line-height: 130%;P
	letter-spacing: -0.72px;
}

.graph .tit p {
	margin-top:40px;
	text-align: center;
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -0.22px;
}

.graph .inner {
	position:relative;
}

.graph .area_graph {
	position:relative;
	margin-top:100px;
}

.graph .area_graph .img_tab {
	display:none;
}
.graph .area_graph .img_mo {
	display:none;
}

.graph .area_graph .motion_box {
	position:absolute;
	right:252px;
	bottom:120px;
	width: 100px;
	height: 370px;
	display:flex;
	flex-flow:column;
	align-items:center;
	opacity: 1;
	transform:translateY(0); 
}

.graph .area_graph .motion_box .bar {
	position:absolute;
	bottom:0;
	display:block;
	height:0;
	width:12px;
	border-radius:6px 6px 0 0;
	background: linear-gradient(180deg, rgba(154,191,255,1) 0%, rgba(45,99,255,0.42808998599439774) 62%, rgba(103,167,255,0) 100%);
	opacity: 1;
	transform:translateY(0);
	transition: height 1s cubic-bezier(0.32, 0.61, 0.34, 0.92);
}

.graph .area_graph .motion_box.on .bar{
	height:295px;
	opacity: 1;
	transform:translateY(0);
}

.graph .area_graph .motion_box .label {
	color: #9AC4FF;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	line-height: 140%;
	letter-spacing: -0.13px;
}

.graph .area_graph .motion_box .num {
	text-align: center;
	font-size: 40px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.4px;
	background: linear-gradient(113deg, #9AC4FF 44.06%, #507DFF 91.68%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.graph .area_description {
	width:100%;
	height:376px;
	margin-top:32px;
	display: flex;
	flex-flow:column;
	row-gap:48px;
	align-items:center;
	justify-content:center;
	border:1px solid #353940;
	border-radius:30px;
}

.graph .area_description .txt {
	display:flex;
	flex-flow:column;
	align-items:center;
	row-gap:14px;
}

.graph .area_description .txt em {
	color: #9CA3AF;
	font-size: 16px;
	font-weight: 500;
	line-height: 140%;
	letter-spacing: -0.16px;
}

.graph .area_description .txt p {
	color: #D1D5DB;
	text-align: center;
	font-size: 20px;
	font-weight: 500;
	line-height: 140%;
	letter-spacing: -0.2px;
}

.sticky-screen {
	position:relative;
	height:100vh;
}

.sticky-screen .tit {
	position:sticky;
	top:50%;
	transform:translateY(-50%);
}

.sticky-screen .tit h2 {
	font-size:64px;
	color:#fff;
	transform:translateY(80px) scale(0.8);
}

.sticky-screen .tit h2[data-scroll="in"] {
	transform:translateY(0) scale(1);
}

.sticky-screen .tit p {
	margin-top:8px;
	font-size:32px;
	color:#e5e5e5;
	text-align:center;
	transform:translateY(80px) scale(0.8);
}

.sticky-screen .tit p[data-scroll="in"] {
	transform:translateY(0) scale(1);
}

.wrap_slider_application {
	position:relative;
	width:808px;
	margin:0 auto;
}
.application {
	margin-top:140px;
}
.slider_application {
	width:808px;
	overflow:visible;
}

.slider_application .swiper-slide {
	width:808px;
}

.slider_application .swiper-slide em {
	color: #638CFF;
	font-size: 20px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.2px;
}
.slider_application .swiper-slide h3 {
	margin-top:10px;
	color: #FFF;
	font-size: 30px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.3px;
}
.slider_application .swiper-slide p {
	margin-top:16px;
	color: #9CA3AF;
	font-size: 18px;
	font-weight: 400;
	line-height: 160%;
	letter-spacing:-0.01rem;
}

.slider_application .swiper-slide .img {
	margin-top:36px;
}

.slider_application .swiper-slide .img img {
	user-select: none
}
.slider_application .swiper-slide .img .img_tab {
	display:none;
}

.wrap_slider_application .swiper-button-prev {
	width:160px;
	height:668px;
	top:auto;
	bottom:0;
	right:auto;
	left: 50%;
	margin:0;
	transform: translateX(-564px);
}
.wrap_slider_application .swiper-button-prev.swiper-button-disabled:after {
	background-image:url(https://hlab.im/hubfs/H.LAB%201.0/NCT/icon_application_slider_prev_disabled.svg);
}

.wrap_slider_application .swiper-button-prev:after {
	content:'';
	width:80px;
	height:80px;
	position:absolute;
	left:50%;
	bottom:267px;
	background:url(https://hlab.im/hubfs/H.LAB%201.0/NCT/icon_application_slider_prev_default.svg) no-repeat;
	background-size:cover;
	transform:translateX(-50%);
}
.wrap_slider_application .swiper-button-prev:hover:after {
	background-image:url(https://hlab.im/hubfs/H.LAB%201.0/NCT/icon_application_slider_prev_hover.svg);
	transition:.5s;
}

.wrap_slider_application .swiper-button-next {
	width:160px;
	height:668px;
	top:auto;
	bottom:0;
	left:auto;
	right:50%;
	margin:0;
	transform:translateX(564px);
}

.wrap_slider_application .swiper-button-next:after {
	content:'';
	width:80px;
	height:80px;
	position:absolute;
	right:50%;
	bottom:267px;
	background:url(https://hlab.im/hubfs/H.LAB%201.0/NCT/icon_application_slider_next_default.svg) no-repeat;
	background-size:cover;
	transform:translateX(50%);
	/* 	transition: .3s; */
}

.wrap_slider_application .swiper-button-next:hover:after {
	background-image:url(https://hlab.im/hubfs/H.LAB%201.0/NCT/icon_application_slider_next_hover.svg);
	transition:.5s;
}

.wrap_slider_application .swiper-button-next.swiper-button-disabled:after {
	background-image:url(https://hlab.im/hubfs/H.LAB%201.0/NCT/icon_application_slider_next_disabled.svg);
}

.wrap_slider_application .swiper-button-next.swiper-button-disabled,
.wrap_slider_application .swiper-button-prev.swiper-button-disabled {
	opacity: 1;
}

.customer {
	padding-top:200px;
	overflow: hidden;
	background-color:#f3f4f6;
	border-radius:120px 120px 0 0;
}


.customer .title_customer[data-scroll="in"] {
	opacity: 1;
	transform: translateY(0);
}

.customer .title_customer {
	color: #10141D;
	font-size: 72px;
	font-weight: 600;
	line-height: 94px;
	letter-spacing: -0.01em;
	text-align: center;
	opacity: 0;
	transform: translateY(60px);
	transition: opacity .4s, transform .4s;
}

.customer .desc_section {
	margin-top:40px;
	color: #374151;
	font-size: 22px;
	font-weight: 400;
	line-height: 140%;
	letter-spacing: -0.22px;
	text-align:center;
}

.customer .desc_section[data-scroll="in"] {
	opacity: 1;
	transform: translateY(0);
}

.customer .group_list {
	margin-top: 80px;
	opacity: 0;
	transform: translateY(60px);
	transition: opacity .4s, transform .4s;
}

.customer .group_list[data-scroll="in"] {
	opacity: 1;
	transform: translateY(0);
}

.customer .top .list_logo {
	animation: marquee 100s linear infinite alternate;
}

.customer .bottom .list_logo {
	justify-content: flex-end;
	animation: marqueeReverse 100s linear infinite alternate;
}

@keyframes marquee {
	0% {
		transform: translateX(0)
	}

	to {
		transform: translateX(-100%)
	}
}

@keyframes marqueeReverse {
	0% {
		transform: translateX(0)
	}

	to {
		transform: translateX(100%)
	}
}

.customer .box_list+.box_list {
	margin-top: 20px;
}

.customer .list_logo {
	display: flex;
	column-gap: 16px;
}

.customer .list_logo img {
	width: 160px;
	border-radius: 80px;
}

.customer .btn {
	margin-top: 80px;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity .4s, transform .4s;
}

.customer .btn.on {
	opacity: 1;
	transform: translateY(0);
}


.review {
	padding:220px 0 200px;
	background-color:#f3f4f6;
	border-radius:0 0 120px 120px;
	position:relative;
}

.review .inner {
	overflow:visible;
}

.review h2 {
	color: #10141D;
	font-size: 72px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.72px;
}

.review ul {
	margin-top:80px;
	display:flex;
	column-gap:20px;
}

.review li {
	width:394px;
	border-radius:20px;
	position:relative;
	overflow:hidden;
	transition: .5s
}

.review li:hover {
	transform:translateY(-10px);
	box-shadow: 0px 10px 30px rgba(32, 55, 71, 0.25);	
}

.review li em {
	display:none
}

.review li.recommend em {
	position:absolute;
	left:16px;
	top:16px;
	width:79px;
	height:33px;
	display:block;
	color:#fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 33px;
	letter-spacing: -0.13px;
	text-align:center;
	border-radius:8px;
	background-color:#5079EF
}

.review li img {
	height:221px;	
}

.review li .txt { 
	padding:39px 32px;
	background-color: #fff;
}

.review li.recommend .txt {
	background: linear-gradient(90deg, #4370F0 33.94%, #72A2FF 107.37%);
}

.review li .txt strong {
	color: var(--gray_900, #10141D);
	font-family: Pretendard;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 140%; /* 28px */
	letter-spacing: -0.2px;
}

.review li.recommend .txt strong {
	color:#fff;
}

.review li .txt span {
	display:block;
	margin-top:8px;
	color: #3887F3;
	font-size: 15px;
	font-weight: 500;
	line-height: 160%;
	letter-spacing: -0.15px;
} 

.review li.recommend .txt span {
	color:#fff;
}




/**********************/
/* section - question */
/**********************/
.question {
	background-color: #F7F7F9;
	border-radius: 140px 140px 0px 0px;
}

.question .inner {
	padding: 200px 0 120px;
}

.question ul {
	position: relative;
	margin-top: 72px;
	display: flex;
	flex-flow: column;
}

.question li {
	display: flex;
	row-gap: 98px;
	height: 78px;
	overflow: hidden;

}

.question ul li.active {
	height: fit-content;
}

.question li h3 {
	height: 78px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #9CA3AF;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.22px;
	user-select: none;
	cursor: pointer;
}

.question li h3 span {
	width: 24px;
	height: 24px;
	background: url(https://hlab.im/hubfs/H.LAB%201.0/ATS/icon_arrow_grey.svg) no-repeat;
	background-size: cover;
	will-change: contents;
}

.question li .txt {
	width: 555px;
	border-top: 1px solid #E5E7EB;
}

.question li p {
	padding-bottom: 24px;
	font-size:17px;
	color: #4B5563;
}

.question li.active:first-child .txt {
	border-color: #66C279
}

.question li.active:first-child h3 {
	color: #66C279;
}

.question li.active:first-child h3 span {
	background-image: url(https://hlab.im/hubfs/H.LAB%201.0/ATS/icon_arrow_green.svg);
}

.question li.active:nth-child(2) .txt {
	border-color: #5EB4B5
}

.question li.active:nth-child(2) h3 {
	color: #5EB4B5
}

.question li.active:nth-child(2) h3 span {
	background-image: url(https://hlab.im/hubfs/H.LAB%201.0/ATS/icon_arrow_emerald.svg);
}

.question li.active:nth-child(3) .txt {
	border-color: #7B48E9
}

.question li.active:nth-child(3) h3 {
	color: #7B48E9
}

.question li.active:nth-child(3) h3 span {
	background-image: url(https://hlab.im/hubfs/H.LAB%201.0/ATS/icon_arrow_purple.svg);
}

.question ul li .img_pc {
	display:block;
}

.question ul li .img_tab {
	display:none;
}

.question ul li .img_mo {
	display:none;
}

.question ul li img {
	position: absolute;
	right: 0;
	top: 0;
	width: 570px;
	transform: translateY(60px);
	opacity: 0;
	transition: 0.5s;
}

.question ul li.active img {
	transform: translateY(0);
	opacity: 1;
}

.industry {
	position: relative;
	border-radius: 0px 0px 120px 120px;
	background: linear-gradient(180deg, #F7F7F9 0%, #9DD7A9 100%);
	z-index: 100;
}

.industry .inner {
	padding: 180px 0;
}

.industry ul {
	margin-top: 80px;
	display: flex;
	gap: 24px 20px;
	flex-flow: wrap;
}

.industry ul li {
	position: relative;
	width: 394px;
	height: 400px;
	text-align: center;
	perspective: 5000px;
	background: transparent;
}

.industry ul li .box_flip {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform .4s;
	transform-style: preserve-3d;
	will-change: transform;
}

@media (hover:hover) {
	.industry ul li:hover .box_flip {
		transform: rotateY(180deg);
	}
}

.industry ul li h3 {
	font-size: 28px;
	color: #1F2937;
	font-weight: 600;
}

.industry .front {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 59px 28px 48px;
	background-color: #fff;
	border-radius: 20px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.industry .front img {
	margin-top: 44px;
	width: 338px;
	height: 213px;
}

.industry .back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-top: 59px;
	background-color: #66C279;
	border-radius: 20px;
	transform: rotateY(180deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.industry .back h3 {
	color: #F9FAFB;
}

.industry .back p {
	margin-top: 58px;
	color: #F9FAFB;
	opacity: 0.88;
	text-align:center;
	letter-spacing:-0.2px;
}

.banner {
	/* 	margin-top: -168px; */
	background: url(https://hlab.im/hubfs/H.LAB%201.0/ATS/img_banner.png) no-repeat;
	background-size: auto 100%;
	background-position: center;
}

.banner .inner {
	padding: 260px 0 298px;
}

.banner h2 {
	color: #F9FAFB;
}

.banner .btn {
	margin: 40px auto 0;
}

.total {
	background: url(https://hlab.im/hubfs/H.LAB%201.0/ATS/img_total_line.png) no-repeat;
	background-size: 100%;
	background-position: center 55%;
}

.total .inner {
	padding: 74px 0 206px;
}

.total h2 {
	color: #F9FAFB;
}

.total ul {
	margin-top: 80px;
	display: flex;
	column-gap: 20px;
}

.total li {
	position: relative;
	width: 290px;
	height: 320px;
	padding: 48px 0 0 36px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px 20px 30px 30px;
	background: rgba(134, 226, 154, 0.10);
	backdrop-filter: blur(40px);
}

.total li:nth-child(2) {
	margin-top: 42px;
	background: rgba(227, 231, 255, 0.10);
	transition-delay: .15s;
}

.total li:nth-child(3) {
	background: rgba(227, 231, 255, 0.10);
	transition-delay: .3s;
}

.total li:nth-child(4) {
	margin-top: 42px;
	background: rgba(227, 231, 255, 0.10);
	transition-delay: .45s;
}

.total li em {
	display: block;
	width: fit-content;
	height: 32px;
	padding: 0 10px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #070A11;
	line-height: 32px;
	border-radius: 8px;
	background-color: #66C279;
}

.total li:nth-child(2) em {
	background-color: #4CA9EC
}

.total li:nth-child(3) em {
	background-color: #55BFBA
}

.total li:nth-child(4) em {
	background-color: #8E99FF
}

.total li strong {
	margin-top: 8px;
	display: block;
	font-size: 26px;
	color: #fff;
	font-weight: 600;
	line-height: 39px;
	letter-spacing: -0.78px;
}

.total li h3 {
	position: absolute;
	left: 48px;
	bottom: 56px;
	color: #86E29A;
}

.total li:nth-child(2) h3 {
	color: #78C7FF
}

.total li:nth-child(3) h3 {
	color: #6AE6E0
}

.total li:nth-child(4) h3 {
	color: #A1AAFF
}

.total .btn {
	margin: 56px auto 0;
}






@media (max-width:1279px) {
	html, 
	body {
		overflow-x: hidden;
	}

	.inner {
		width: auto;
		padding:0 24px;
	}

	.br {
		display:inline;
	}

	.tab_br {
		display:block;
	}

	.mo_br {
		display:inline;
	}

	.btn {
		height:56px;
		line-height:56px;
		font-size:16px;
	}

	h2 {
		font-size:48px;
	}

	.competency_test_header {
		top:68px;
	}

	.competency_test_header .inner {
		height:64px;
	}

	.competency_test_header .nav ul a {
		font-size: 15px;
		line-height: 64px;
	}

	.hero {
		height:auto;
	}

	.hero .inner {
		height:fit-content;
		flex-flow:column;
		align-items:center;
		padding-top:222px;
	}

	.hero .container_txt,
	.hero .container_img {
		width:100%;
	}

	.hero .container_img {
		margin-top:70px;
		height:426px;
	}

	.hero .container_img .slide {
		width:604px;
		left:50%;
		transform:translateX(-50%);
	}

	.hero .container_img .slide.slide_a {
		width:508px;
	}
	.hero .container_img .slide_a .img_a_2 {
		right:0;
	}
	.hero .container_img .slide.slide_a {
		width:426px;
	}
	.hero .container_img .slide.slide_b {
		width:543px;
	}
	.hero .container_img .slide.slide_c {
		width:446px;
	}
	.hero .container_img .slide_a .img_a_1 {
		width:387px;
		height:388px;
		left:38px;
	}
	.hero .container_img .slide_a .img_a_2 {
		width:387px;
		height:407px;
		left:19px;
	}
	.hero .container_img .slide_a .img_a_3 {
		width:387px;
		height:427px;
		left:0;
	}
	.hero .container_img .slide_b .img_b_1 { 
		bottom:63px;
	}
	.hero .container_img .slide_b .img_b_2 { 
		bottom:111px;
	}
	.hero .container_img .slide_b .img_b_3 {
		bottom:157px;
	}
	.hero .container_img .slide_c img {
		width:446px;
		height:427px
	}
	.hero .container_img .slide.slide_a:after {
		height:237px;
	}
	.hero .container_img .slide.slide_b:after {
		height:273px;
	}
	.hero .container_img .slide.slide_c:after {
		height:236px;
	}

	.hero .tit {
		font-size: 56px;
		line-height:64px;
	}
	.hero .tit .motion_txt {
		height:64px;
		width:100%;
	}

	.hero .tit .motion_txt::after {
		display:none;
	}

	.hero .tit h2,
	.hero .tit strong {
		font-size:56px;
		text-align:center;
		line-height:64px;
	}

	.hero .tit .motion_txt em {
		position:absolute;
		left:50%;
		width:max-content;
		line-height:64px;
		transform:translateX(-50%)
	}

	.hero .tit .motion_txt em:after {
		content: "";
		position: absolute;
		top: 8px;
		right: -6px;
		width: 2px;
		height: 56px;
		background-color: #fff;
		animation: caret 1s steps(1) infinite;
	}

	.hero .btns {
		margin-top:32px;
		justify-content:center;
	}

	.hero .container_txt .btn {
		width:180px;
	}

	.intro {
		margin-top:0;
		padding-top:100px;
		border-radius:64px;
	}

	.intro .container_needs p {
		font-size:40px;
		line-height:56px;
	}
	.intro .container_needs p em {
		font-size:40px;
	}

	.intro h1 {
		font-size:40px;
		line-height:56px;
	}



	.function .inner {
		padding:100px 0;
	}
	.function h2 {
		font-size:48px;
	}

	.function .slider_function {
		width:560px;
	}

	.function .tab_function {
		margin: 0 auto 56px;
	}

	.function .slider_function .swiper-slide {
		height:560px;
		width:560px;
	}
	.function .slider_function .swiper-slide .container {
		flex-flow:column;
		row-gap:10px;
	}
	.function .slider_function .swiper-slide .txt {
		width:100%;
		padding: 56px 22px 0;
		display:flex;
		flex-flow:column;
		align-items:center;
		justify-content:center;
		text-align:center;
	}
	.slider_function .swiper-slide .txt h3 {
		margin-top:8px;
		font-size:26px;
		line-height:34px;
	}

	.slider_function .swiper-slide .txt p {
		margin-top:8px;
		font-size:16px;
		line-height:26px;
	}

	.function .slider_function .swiper-slide .img {
		width:100%;
		height:248px;
		display:flex;
		justify-content:center;
	}
	.function .slider_function .swiper-slide .img .img_pc {
		display:none;
	}
	.function .slider_function .swiper-slide .img .img_mo {
		display:none
	}
	.function .slider_function .swiper-slide .img img.img_tab {
		position:static;
		display:block;
		width:auto;
		height:100%;
	}
	.sticky-screen {
		height:auto;
	}
	.sticky-screen .tit {
		position:static;
		top:0;
		transform:translateY(0);
	}
	.sticky-screen .tit h2 {
		font-size:48px;
	}
	.sticky-screen .tit p {
		margin-top: 16px;
		font-size:18px;
		line-height:140%;
	}
	.graph {
		padding: 100px 0 140px;
	}
	.graph .inner {
		width:721px;
		padding:0;
	}
	.graph .tit h2 {
		font-size: 48px;
	}
	.graph .tit p {
		margin-top:16px;
		font-size:18px;
		line-height:140%;
	}
	.graph .area_graph {
		width:721px;
		margin:64px auto 0;
	}
	.graph .area_graph .img_pc {
		display:none
	}
	.graph .area_graph .img_tab {
		display:block
	}
	.graph .area_graph .img_mo {
		display:none;
	}
	.graph .area_graph .motion_box {
		height:358px;
		right:106px;
	}
	.graph .area_graph .motion_box .num {
		font-size:34px;
	}
	.graph .area_graph .motion_box .label {
		font-size:11px;
	}
	.graph .area_description {
		height:376px;
		row-gap:60px;
	}
	.application {
		margin-top:80px;
	}
	.slider_application {
		width:560px;
	}
	.wrap_slider_application {
		width:560px;
	}
	.slider_application .swiper-slide {
		width:560px;
	}
	.slider_application .swiper-slide .txt {
		text-align:center;
	}
	.slider_application .swiper-slide p {
		font-size:16px;
	}
	.slider_application .swiper-slide .img {
		position:relative;
		height:462px;
	}
	.slider_application .swiper-slide .img .img_pc {
		display:none;
	}
	.slider_application .swiper-slide .img .img_tab {
		display:block;
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:auto;
	}
	.wrap_slider_application .swiper-button-prev {
		top:0;
		width:104px;
		height:192px;
		left:-104px;
		transform:none;
	}
	.wrap_slider_application .swiper-button-next {
		top:0;
		width:104px;
		height:192px;
		right:-104px;
		transform:none;
	}
	.wrap_slider_application .swiper-button-prev:after {
		width:48px;
		height:48px; 
		bottom:25%;
	}
	.wrap_slider_application .swiper-button-next:after {
		width:48px;
		height:48px; 
		bottom:25%;
	}
	.feature {
		padding: 100px 0;
	}
	.feature .inner {
		width:721px;
		padding:0;
	}
	.feature ul {
		row-gap:64px;
	}
	.feature li .container {
		/* 		height:507px; */
		flex-flow:column;
	}
	.feature li h3 {
		margin-bottom:24px;
		font-size:44px;
	}
	.feature .container .wrap_item {
		flex-flow:column;
		row-gap:24px;
	}
	.feature .container .wrap_item.single {
		height:507px;
	}
	.feature .container .wrap_item.single .item .img {
		justify-content:center;
	}
	.feature li .txt {
		width:100%;
		padding:56px 0 0;
		align-items:center;
		text-align:center;
	}
/* 	.feature li .container > .txt {
		height:212px;
	} */

	.feature li .txt strong {
		font-size:26px;
	}
	.feature li .txt p {
		font-size:16px;
		font-weight:400;
		line-height:150%;
	}
	.feature .container .wrap_item .txt {
		height:247px;
	}
	.feature li .img {
		height:295px;
		width:100%;
		display:flex;
		justify-content:center;
		align-items:end;
	}
	.feature li .img .img_pc {
		display:none
	}
	.feature li .img .img_tab {
		display:block;
	}
	.feature li .img .img_mo {
	display:none
	}
	.feature .container.triple {
		row-gap:24px;
	}
	.feature .container.triple .wrap_item .item .step {
		width:94px; 
		height:35px;
		line-height:35px;
		font-size:16px;
	}
	.feature .container.triple .wrap_item .item strong {
		margin-top:10px;
		font-size:26px;
	}
	.feature .container.triple .wrap_item .item p {
		font-size:16px;
	}

	.feature .container .wrap_item .item {
		height:507px;
	}

	.feature .container .wrap_item.single .item {
		flex-flow:column;
		height:auto;
	}
	.feature .container .wrap_item.single .txt {
		width:100%;
	}

	.feature .container .wrap_item.single .item img {
		width:100%;
		height:auto;
	}
	.feature .container .wrap_item.double .item .img {
		position:relative;
		height:260px;
	}
	.feature .container .wrap_item.double .item img.img_pc {
		display:none
	}
	.feature .container .wrap_item.double .item img.img_tab {
		position:absolute;
		bottom:0;
		left:50%;
		transform:translateX(-50%);
		display:block
	}
	.feature .container .wrap_item.double .item {
		width:100%;
	}


	.feature .container .wrap_item.double .item:nth-of-type(1) img {
		width:575px;
		height:220px;
	}
	.feature .container .wrap_item.double .item:nth-of-type(2) img {
		width:421px;
		height:220px;
	}
	.feature .container .wrap_item.single .item .img img {
		width:422px;
		height:217px;
	}
	.feature li .container .img img {
		width:543px;
		height:273px;
	}


	.customer {
		padding-top: 140px;
		border-radius: 64px 64px 0 0;
	}

	.customer .title_customer {
		font-size: 48px;
		line-height: 130%;
	}
	.customer .desc_section {
		margin-top:16px;
		font-size:18px;
	}

	.customer .group_list {
		position: relative;
		margin-top: 64px;
	}

	.customer .top .list_logo {
		animation-duration: 30s;
	}

	.customer .bottom .list_logo {
		animation-duration: 30s;
	}

	.customer .btn {
		margin-top: 64px;
	}

	.review {
		padding: 200px 0 124px;
		border-radius:0 0 64px 64px;
	}
	.review .inner {
		padding:0;
	}
	.review h2 {
		font-size:48px;
	}
	.review ul {
		margin-top:64px;
		flex-flow:column;
		align-items:center;
		row-gap:20px;
	}
	.review li {
		border-radius:16px;
	}

	.question {
		border-radius:64px 64px 0 0;
	}
	.question .inner {
		padding: 100px 24px 0;
		display:flex;
		flex-flow:column;
		align-items:center;
	}

	.question ul {
		width:720px;
	}

	.question li {
		flex-flow:column;
		padding-bottom:40px;
		row-gap: 32px;
	}

	.question li .txt {
		width:auto;
		row-gap:32px;
	}

	.question li h3 {
		height: 82px;
		font-size: 24px;
	}

	.question ul li .img_pc {
		display:none;
	}

	.question ul li .img_tab {
		display:block;
	}

	.question ul li .img_mo {
		display:none;
	}

	.question ul li img {
		position: relative;
		width:100%;
		max-width:720px;
		margin:0 auto;
	}

	.industry {
		margin-top: -1px;
	}

	.industry .inner {
		padding: 150px 24px 100px;
	}

	.industry ul {
		width:724px;
		margin:56px auto 0;
		gap: 20px;
	}

	.industry ul li {
		height:356px;
		width:352px;
	}

	.industry ul li h3 {
		font-size:22px
	}

	.industry .front {
		position:relative;
		padding: 54px 24px 48px;
	}

	.industry .front img {
		width: 100%;
		height: auto;
		margin-top:40px;
	}

	.industry .back {
		padding: 54px 24px 0;
	}

	.industry .back p {
		margin-top:40px;
	}


	.industry ul li.on .box_flip {
		transform: rotateY(180deg);
	}

	.banner {
		margin-top:-60px;
	}
	.banner .inner {
		padding: 240px 0;
	}

	.banner .btn {
		margin:24px auto 0
	}

	.total {
		background-image:url(https://hlab.im/hubfs/H.LAB%201.0/ATS/img_total_line_tab.png);
	}
	.total .inner {
		padding: 0 54px 140px;
	}

	.total ul {
		width:680px;
		margin:80px auto 0;
		flex-flow:wrap;
		gap: 100px 20px;
	}

	.total li {
		width: 320px;
		padding: 40px;
	}

	.total li:nth-child(2) {
		margin-top:160px;
	}

	.total li:nth-child(3) {
		margin-top:-160px;
	}

	.total li:nth-child(4) {
		margin-top:0;
	}

	.total li strong {
		font-size:24px;
		line-height:36px;
	}

	.total .btn {
		margin:80px auto 0;
	}
}


@media (max-width: 768px) {
	.br {
		display:inline
	}

	.tab_br {
		display:inline;
	}

	.mo_br {
		display:block;
	}

	h2 {
		font-size:36px
	}

	input::placeholder,
	textarea::placeholder,
	.is-placeholder {
		font-size: 15px;
	}
	
	.modal form input[type=email],
	.modal form input[type=text],
	.modal form textarea {
		font-size:15px;
	}

	.modal {
		position:fixed;
		top:0;
		left:0;
		width:100vw;
		height:100vh;
		display:none;
		padding:60px 4px 40px;
		border-radius:0;
		transform:none;
	}

	.modal .inner {
		padding:0 20px 120px;
	}

	.modal .form_area .tit {
		font-size:31px;
		line-height:44px;
		letter-spacing:-1px;
	}

	.modal .form_area .txt {
		font-size:15px;
		line-height:24px;
	}

	.modal.inquiry form {
		margin-top:68px;
	}

	.modal.inquiry .hs_contact_inbound_basic li:nth-of-type(1) span {
		background-image: url(https://hlab.im/hubfs/H.LAB%201.0/ATS/item_jobda_ATS_mo.png);
	}

	.modal.inquiry .hs_contact_inbound_basic li:nth-of-type(2) span {
		background-image: url(https://hlab.im/hubfs/H.LAB%201.0/ATS/item_test_mo.png);
	}

	.modal.inquiry .hs_contact_inbound_basic li:nth-of-type(3) span {
		background-image: url(https://hlab.im/hubfs/H.LAB%201.0/ATS/item_jobda_matching_mo.png);
	}

	.modal.inquiry .hs_contact_inbound_basic li:nth-of-type(4) span {
		background-image: url(https://hlab.im/hubfs/H.LAB%201.0/ATS/item_inhr_mo.png);
	}

	.modal.inquiry .hs_contact_inbound_basic .hs-form-checkbox-display strong {
		font-size:16px;
		line-height:25px;
	}

	.modal.inquiry .hs_contact_inbound_basic .hs-form-checkbox-display span {
		padding:28px 0 30px 48px;
	}

	.modal.inquiry .hs_contact_inbound_basic .hs-form-checkbox-display span:before {
		left:22px;
		top:31px;
	}

	.modal.inquiry .hs-richtext em {
		display:block
	}

	.modal form .hs-fieldtype-textarea textarea {
		padding:16px;
	}

	.modal input[type=checkbox]+span {
		font-size:14px;
		line-height:22px;
	}

	.modal input[type=checkbox]+span a {
		font-size:14px;
		line-height:22px;
	}

	.modal.terms {
		width:100vw;
	}

	.modal.terms .inner {
		padding:48px 18px
	}

	.modal.catalog .submitted-message strong {
		font-size:32px;
		line-height:45px;
	}

	.competency_test_header .inner {
		padding-right:0;
	}

	.competency_test_header .logo a {
		font-size:22px;
	}

	.competency_test_header .wrap_nav .btn_gnb {
		width:64px;
		height:64px;
		display:block;
		background:url(https://hlab.im/hubfs/H.LAB%201.0/ATS/icon_arrow_grey.svg) no-repeat;
		background-position:center;
		background-size: 24px;
		transition: .3s
	}	
	.competency_test_header .wrap_nav .btn_gnb.active {
		transform:rotate(180deg);	
	}

	.competency_test_header .wrap_nav .nav {
		position:absolute;
		top:65px;
		left:0;
		right:0;
		display:none;
		background-color:#121619;
		border-bottom: 1px solid rgba(255, 255, 255, 0.20);
	}

	.competency_test_header .wrap_nav .nav.on {
		display:block;
	}

	.competency_test_header .wrap_nav .nav ul {
		flex-flow:column;
	}

	.competency_test_header .wrap_nav .nav ul li {
		width:100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.competency_test_header .nav ul a {
		text-align:left
	}

	.hero .inner {
		padding-top:192px;
	}

	.hero .tit {
		font-size:40px;
		line-height:48px;
	}

	.hero .tit .motion_txt {
		height:48px;
	}

	.hero .tit .motion_txt em {
		line-height:48px;
	}
	
	.hero .tit .motion_txt em:after {
		top:8px;
		height:36px;
	}

	.hero .tit h2,
	.hero .tit strong {
		font-size:40px;	
		line-height:48px;
	}

	.hero .container_txt .btn {
		width:140px;
		padding:0;
	}

	.hero .container_img {
		height:238px;
		margin-top:38px;
	}

	.hero .container_img .slide.slide_a {
		width:237.5px;
	}
  
	.hero .container_img .slide.slide_b {
		width:319px;
	}
	.hero .container_img .slide.slide_c {
		width:238px;
	}
	
	.hero .container_img .slide_a .img_a_1 {
		width:216px;
		height:216px;
		left:20px;
	}
	.hero .container_img .slide_a .img_a_2 {
		width:216px;
		height:227px;
		left:10px;
	}
	.hero .container_img .slide_a .img_a_3 {
		width:216px;
		height:238px;
		left:0;
	}
	
	.hero .container_img .slide_b .img_b_1 {
	bottom:27px;
	width:278px;
	height:134px;
	right:20px;
/* 	margin-left:-139px; */
}

.hero .container_img .slide_b .img_b_2 {
	bottom:55px;
	width:298px;
	height:147px;
	right:10px;
/* 	margin-left:-149px; */
}

.hero .container_img .slide_b .img_b_3 {
	bottom:82px;
	width:319px;
	height:145px;
/* 	margin-left:-159.5px; */
}
	.hero .container_img .slide_c .img_c_1 {
		width:249px;
		height:238px;
	}
	
	.hero .container_img .slide.slide_a:after,
	.hero .container_img .slide.slide_b:after,
	.hero .container_img .slide.slide_c:after {
		width: auto;
		left: -200px;
		right: -200px;
		height: 113px;
	}



	.intro {
		border-radius:40px;
		padding-top: 80px;
	}

	.intro .inner {
		padding:0 33.24px;
	}

	.intro .container_needs {
		row-gap:56px;
	}

	.intro .container_needs p {
		font-size:28px;
		line-height:39px;
	}
	.intro .container_needs p em {
		font-size:28px;
	}
	.intro .container_solution {
		margin-top:200px;
		padding-bottom:200px;
	}
	.intro h1 {
		font-size:32px;
		line-height:140%;
	}
	.intro .btn {
		min-widtn:210px;
		width:210px;
	}

	.function {
		width:auto;
	}
	.function .inner {
		padding:80px 20px;
	}
	.function h2 {
		margin-bottom:24px;
		font-size:36px;
	}
	.function .tab_function {
		width:320px !important;
		height:52px;
		margin: 0 auto 24px;
		padding:6px;
		justify-content:space-between;
	}
	.function .slider_function {
		width:100%;
	}
	.function .slider_function .swiper-slide.slide_a .img img,
	.function .slider_function .swiper-slide.slide_b .img img{
		right:auto;
	}
	.function .slider_function .swiper-slide .img img.img_pc {
		display:none;
	}
	.function .slider_function .swiper-slide .img img.img_tab {
		display:none
	}
	.function .slider_function .swiper-slide .img img.img_mo {
		display:block;
		height:231px;
		width:auto
	}
	
	.function .slider_function .swiper-slide {
		border-radius:20px;
	}
	.function .slider_function .swiper-slide .txt {
		padding:32px 22px 0;
	}
	.function .tab_function .swiper-pagination-bullet {
		width:100px;
		height:40px;
		line-height:40px;
		font-size:14px;
	}
	.slider_function .swiper-slide .txt h3 {
		font-size:24px;
		line-height:130%;
	}
	.slider_function .swiper-slide .txt .btn {
		width:155px;
		height:50px;
		padding:0 24px;
		line-height:50px;
		font-size:15px;
	}
	.slider_application .swiper-slide .img {
		height:263px;
		width:335px;
		margin:80px auto 0;
	}

	.sticky-screen .tit h2 {
		font-size:36px;
	}
	.sticky-screen .tit p {
		font-size:16px;
	}
	
	.application {
		margin-top:64px;
	}
	.feature {
		padding:0;
	}
	
	.feature .inner {
		width:100%;
		padding: 80px 20px;
	}

	.feature li h3 {
		font-size:32px;
	}
	
	.feature li:nth-of-type(2) .img {
		align-items:center;
	}
	.feature li .img .img_pc {
		display:none
	}
	.feature li .img .img_tab {
		display:none;
	}
	.feature li .img .img_mo {
	display:block
	}
	
	.feature .container .box {
		height:480px;
	}
	.feature .container.triple .wrap_item .item strong {
		margin-top:12px;
		font-size:24px;
	}

	.feature .container.triple .wrap_item .item p {
		font-size:15px;
	}
	.feature .container .wrap_item {
		row-gap:16px;
	}
	.feature .container .wrap_item .txt {
		height:auto;
		padding:48px 22px 0;
	}
	.feature .container .wrap_item.single .txt {
		padding:48px 22px 0;
	}
	.feature .container.couple .box {
		height:480px;
	}
	.feature .container .wrap_item.double .item .img {
		height:160px;
	}
	.feature .container .wrap_item.double .item:nth-of-type(1) img {
		width:300px;
		height:auto;
	}
/* 	.feature .container .wrap_item.double .item:nth-of-type(2) {
		margin-top:40px;
	} */
	.feature .container .wrap_item.double .item:nth-of-type(2) img {
		width:300px;
		height:auto;
	}
	.feature .container.triple {
		row-gap:16px;
	}
	.feature .container .wrap_item.single {
		height:auto;
	}
	.feature .container .wrap_item.single .item .img {
		height:193px;
		align-items:center;
	}
	.feature .container .wrap_item.single .item .img img {
		width:300px;
		height:auto;
	}
	
	.feature li .img {
		height:214px;
	}
	.feature li .container .img img {
		width:320px;
		height:auto;
	}
	.graph {
		padding:80px 0;
	}
	.graph .inner {
		width:100%;
		padding:0 20px;
	}
	.graph .tit h2 {
		font-size:40px;
	}
	.graph .tit p {
		font-size:16px;
	}
	.graph .area_graph {
		margin: 40px auto 0;
		width:320px;
	}
	.graph .area_graph .motion_box {
		right:20px;
		bottom:44px;
		height:166px;
	}
	.graph .area_graph .motion_box .label {
		font-size:7px;
	}
	.graph .area_graph .motion_box .num {
		font-size:16px;
	}
	.graph .area_graph .motion_box .bar {
		width:8px;
	}
	.graph .area_graph .motion_box.on .bar {
		height:134px;
	}
	.graph .area_graph .img_tab {
		display:none;
	}
	.graph .area_graph .img_mo {
		display:block;
	}
	.graph .area_description {
		height:364px;
		row-gap:40px;
	}
	.graph .area_description .txt em {
		font-size:14px;
	}
	.graph .area_description .txt p {
		font-size:16px;
	}
	.wrap_slider_application {
		width:100%;
	}
	.wrap_slider_application .swiper {
		padding:0 20px;
	}
	.slider_application {
		width:100%;
	}
	.slider_application .swiper-slide { 
		width:100%;
	}
	.slider_application .swiper-slide em {
		font-size:16px;
	}
	.slider_application .swiper-slide h3 {
		margin-top:12px;
		font-size:24px;
	}
	.wrap_slider_application .swiper-button-prev {
		width:40px;
		height:40px;
		left:50%;
		top:236px;
		margin-left:-50px;
	}
	.wrap_slider_application .swiper-button-prev:after {
		width:40px;
		height:40px;
		bottom:0;
	}
	.wrap_slider_application .swiper-button-next {
		width:40px;
		height:40px;
		right:50%;
		top:236px;
		margin-right:-50px
	}
	.wrap_slider_application .swiper-button-next:after {
		width:40px;
		height:40px;
		bottom:0;
	}
	
	
	
	.customer {
		padding-top: 104px;
		border-radius:40px 40px 0 0;
	}

	.customer .title_customer {
		font-size: 40px;
		line-height: 52px;
	}

	.customer .desc_section {
		font-size:16px;
		line-height: 140%;
	}

	.customer .group_list {
		margin-top: 64px;
	}

	.customer .top .list_logo,
	.customer .bottom .list_logo {
		animation-duration: 20s;
	}

	.review {
		padding:100px 0;
		border-radius: 0 0 40px 40px;
	}
	.review .inner {
		padding:0 20px;
	}
	.review h2 {
		font-size:40px;
	}
	.review ul {
		margin-top:40px;
		row-gap:16px;
	}
	.review li {
		width:100%;
		max-width:350px;
	}
	.review li img {
		height:180px;
		width:100%;
		object-fit:cover;
	}
	.review li.recommend em {
		top:13px;
		left:13px;
		width:64px;
		height:27px;
		font-size:11px;
		line-height:27px;
	}
	.review li .txt {
		padding: 29px 24px;
	}
	.review li .txt strong {
		font-size: 17px;
	}
	.review li .txt span {
		font-size: 13px;
	}
	.feature .container .wrap_item.double .item img.img_tab {
		display:none;
	}
	.function .wrap-vod .modal-vod {
		width:340px;
		margin-top:-95px;
	}
	.function .wrap-vod .modal-vod video {
		border-radius:16px;
	}

	.question {
		border-radius: 40px 40px 0 0;
	}

	.question ul {
		width:320px;
		margin-top:40px;
	}

	.question li h3 {
		font-size:18px;
		line-height:
	}

	.question li p {
		padding-bottom:0;
		font-size:15px;
		line-height:25px;
	}

	.question ul li .img_pc {
		display:none;
	}

	.question ul li .img_tab {
		display:none;
	}

	.question ul li .img_mo {
		display:block;
	}

	.industry {
		border-radius: 0 0 40px 40px;
	}

	.industry .inner {
		padding: 140px 15px 80px;
	}

	.industry ul {
		width: 100%;
		flex-flow: column;
		align-items:center;
	}

	.industry ul li {
		width:320px;
	}

	.industry .front {
		padding: 54px 9px 48px;
	}

	.banner .inner {
		padding: 200px 0;
	}
	.total .inner {
		padding: 0 20px 120px;
	}

	.total {
		background-image:url(https://hlab.im/hubfs/H.LAB%201.0/ATS/img_total_line_mo.png)
	}

	.total ul {
		width:100%;
		margin: 48px auto 0;
		flex-flow:column;
		align-items:center;
		gap:20px;
	}

	.total .inner li {
		margin-top: 0;
	}

	.total .inner ul.mo li {
		background-color:rgba(36, 38, 42, 0.70);
	}

	.total .btn {
		margin: 64px auto 0;
	}



}