@charset "utf-8";

/*------------------------------------*\
	FONT
	- 폰트

\*------------------------------------*/

/* Pretendard - 가변 다이나믹 서브셋
	extra thin : 100 / 200 / light : 300 / regular : 400 / medium : 500 / semi bold : 600 / bold : 700 / extra bold : 800 / black : 900
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
*/

/*------------------------------------*\
	RESET
	- 스타일 초기화

	https://andy-bell.co.uk/a-modern-css-reset/
\*------------------------------------*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {padding:0;}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

a {
  text-decoration: none;
  color:inherit; 
}

/* Make images easier to work with */
img,
picture {
	max-width:100%;
	vertical-align:top;
}
picture {
	display:block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

caption,
legend {
	display:none;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/*------------------------------------*\
	COMMON
	- 공통, 모듈 요소 스타일

	font-family : 'Pretendard Variable', sans-serif;
\*------------------------------------*/

:root {
	--font-set : "Pretendard Variable", "Noto Sans KR", sans-serif;
	--font-Proxima : "Proxima", "Pretendard Variable", "Noto Sans KR", sans-serif;
	--color-default : #000;
	--color-second : #444;
	--color-primary : #FF5536;
}

html {overflow-x:hidden;}
html.gnb_on {overflow:hidden;}

html, body {overflow-x:clip;}

body {font-family: var(--font-set); color:#000; font-size:16px; line-height:1.5;  -webkit-text-size-adjust:none;}
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
th {font-weight:700;}
em, address {font-style:normal;}
button {border:none; background:transparent; cursor: pointer;}
img, video, iframe {max-width:100%; vertical-align:top;}

table {border-collapse: collapse;}
textarea {width:100%; padding:24px; background:rgb(0 0 0 / 3%); border:0;}
::placeholder {color:rgb(0 0 0 / 40%);}
textarea::placeholder {color:rgb(0 0 0 / 20%);}

/* hidden */
.scroll_hidden {overflow:hidden !important;}
.reader_only {position:absolute; overflow:hidden; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}

/* font-weight */
.regular {font-weight:400 !important;}
.medium {font-weight:500 !important;}
.bold {font-weight:700 !important;}

/* color */
.c_gray	{color:#B7B7B7;}
.c_blue	{color:#2F67FB;}
.c_skyblue {color:#009DFF;}
.c_mint	{color:#A4F0FA;} 
.c_yellow {color:#FEDB4A;}
.c_orange {color:#FDA30F;}
.c_perple {color:#5E16E5;}

/* text style */
.text_01 {color:#7D7D7D; font-size:20px; line-height:26px;} /* 그룹소개 - BRAND */

/* text align */
.al_l {text-align:left !important;}
.al_c {text-align:center;}

/* margin padding */
.mt_10 {margin-top:10px;}
.mt_50 {margin-top:50px;}

/* 반응형 클래스 */
.show_m,
.show_tbl,
.mobile_only {display:none;}

/* ----------------------- 버튼 - 5가지 / 네모박스, 네모보더, 화살표, 네모화살표, 네모더보기, 기타특수형버튼*/
.btn {display:inline-block; width:100%; max-width:228px; font-size:18px; line-height:60px; text-align:center; vertical-align:top; transition:0.2s; cursor:pointer;}
	.btn[class *= bd] {line-height:58px; padding-top:0; padding-bottom:0;}
	.btn[class *= bg] {line-height:58px; padding-top:0; padding-bottom:0; border:0;}
.btn.block {width:100%; max-width:240px;}

.btn.bg_black {color:#fff !important; background:#000;}
	.btn.bg_orange {color:#fff !important; background:#fd6539;}
	.btn.bg_gray {color:rgb(0 0 0 / 30%) !important; background:rgb(0 0 0 / 10%);}
	.btn.bg_gray:hover {opacity:0.5;}

.btn.bd_black {color:var(--color-default) !important; font-weight:500; background:#fff; border:1px solid var(--color-default);}

	.btn.bd_white {position:relative; font-weight:400; padding:0 50px; color:#fff !important; transition:0.4s;
					background: linear-gradient(60deg, #fff 50%, transparent 55%, transparent) 98% 0 / 250% 100%;}
	.btn.bd_white::before {
					content: "";
					background: linear-gradient(-30deg, #fff, rgb(255 255 255 / 80%) 50%, #fff);
					background: #fff; position: absolute; padding: 1px; transition: opacity .2s; z-index: -1;
					inset: 0;
					-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
					mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
					-webkit-mask-composite: xor;
					mask-composite: exclude;}
	.btn.bd_white:hover::before {opacity:0;}
	.btn.bd_white:hover {color:#000 !important; background-position:2% 0;}
/* 그룹소개 - 브랜드 */
.btn_download {line-height:54px; text-align:left; border-radius:40px; padding-left:24px; border:1px solid #000;}

/* 그룹소개 - Contact - 문의하기 버튼 */
.btn.link {width:32px; height:32px; background:url("../images/common/btn_link_arrow_white.svg") no-repeat center / cover; font-size:0;}
/* 메인 - card_02 / 사람 문화 성장 */
.btn.link_02 {position:relative; width:auto; max-width:none; font-size:20px; line-height:48px; font-weight:500; padding-right:70px; transition:0.2s;}
.btn.link_01::after {content:''; position:absolute; right:0; width:48px; height:48px; background:url("../images/common/btn_link_01_white.svg") no-repeat center / 100%; transition:0.2s ease-out; vertical-align:top;}
.btn.link_01:hover {color:#939393;}
.btn.link_01:hover::after {transform:translateX(5px);}
/*  */
.btn.link_02 {position:relative; width:auto; max-width:none; padding:0 44px 0 24px; background:url("../images/common/ico_arrow_outward.svg") no-repeat right 20px center / 24px;}
.btn.link_02:hover {background-image:url("../images/common/ico_arrow_outward_white.svg");}
.btn.link_02::after {display:none; content:''; position:absolute; top:calc(50% - 3px); right:26px; width:6px; height:6px; border:1px solid #000; border-left:0; border-bottom:0; transform:rotate(45deg) scale(1.5); transition:0.2s;}
.btn.link_02:hover::after {border-color:#fff;}
/* 메인 - 잠재력 - 텍스트 없음 */
.btn.link_03 {position:relative; display:inline-block; width:46px; height:46px; background:url("../images/common/btn_link_03_circle.svg") no-repeat center / 100%; font-size:0;}
.btn.link_03 svg {position:static; width:100%; height:auto; transition:0.2s;}
.btn.link_03:hover svg {fill:rgb(255, 85, 54);}
/* 메인 - 배너 링크 버튼 */
.btn.link_04 {position:relative; display:flex; width:auto; max-width:none; color:#fff; font-size:16px; line-height:40px; font-weight:500;}
.btn.link_04 span {position:relative; padding:0 46px 0 20px; border:1px solid #fff; border-radius:40px;}
.btn.link_04::before {content:""; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; background:#fff; clip-path: circle(9% at 90% 50%); border-radius:40px;transition:0.5s;}
.btn.link_04::after {content:""; position:absolute; top:50%; right:12px; width:14px; height:14px; background:url("../images/common/ico_arrow_right_black.svg") no-repeat -14px center; transform:translateY(-50%); transition:0.5s;}
.btn.link_04:hover {color:#000;}
.btn.link_04:hover::before {clip-path:circle(200% at 90% 50%);}
.btn.link_04:hover::after {background-position-x:0;}
/* 스스로 - 플러스 링크 */
.btn.__link_05 {position:relative; display:inline-block; width:auto; max-width:none; color:#000; font-size:26px; line-height:38px; font-weight:700; text-align:left; padding-right:58px; background:url("../images/common/btn_circle_plus.svg") no-repeat center right;}
/* 메인 - 비주얼 타이틀 링크 버튼 */
.btn.__link_06 {position:relative; display:inline-block; width:auto; max-width:none; color:#fff; font-size:30px; line-height:32px; font-weight:700; padding-right:50px; border-radius:30px;}
.btn.__link_06 span {position:relative;}
.btn.__link_06::before {content:''; position:absolute; top:-5px; bottom:-5px; left:-15px; right:-6px; background:url("../images/common/ico_arrow_circle_right_white.svg") no-repeat right 8px center / 32px; border-radius:30px; transition:0.5s;}
.btn.__link_06:hover {}
/* 사각테두리, 화살표 -  */
.btn.__link_07 {width:auto; max-width:none; font-size:24px; line-height:64px; font-weight:600; text-align:left; padding:0 84px 0 30px; background:url("../images/common/ico_arrow_right2_black.svg") no-repeat right 30px center; border-color:#b1b1b1; transition:0.3s;}
.btn.__link_07:hover {color:#fff !important; background-color:#000; background-image:url("../images/common/ico_arrow_right2_white.svg");}



.btn_close {position:relative; width:58px; height:58px; font-size:0;}
.btn_close:before,
.btn_close::after {content: ''; position: absolute; left:14px; top: 27px; width: 32px; height: 4px; background: #cecece; border-radius: 10px; transition:0.2s;}
.btn_close:before {transform: rotate(45deg);}
.btn_close:after {transform: rotate(-45deg);}
.btn_close:hover::before,
.btn_close:hover::after {background:var(--color-primary);}

.btn_menu {display:none; position:relative; width:58px; height:80px; z-index:2; background:url("../images/common/btn_hamburger_black.svg") no-repeat center; font-size:0;}
.gnb_on .btn_menu {background-image:url("../images/common/ico_x_hamburger.svg") !important;}
.btn_more {position:relative; width:calc(100% - 40px); max-width:240px; border:1px solid #000; text-indent:-1em; transition:0.2s;}
.btn_more::before,
.btn_more::after {content:''; position:absolute; top:calc(50% - 1px); left:calc(50% + 20px); width:12px; height:1px; background:#000; transition:0.2s;}
.btn_more::after {transform:rotate(90deg);}
.btn_more:hover {color:#fff; background:#000;}
.btn_more:hover::before,
.btn_more:hover::after {background:#fff;}

.btn_scrollTop {opacity:0; visibility:hidden; clip-path:inset(20%); position:fixed; bottom:0; right:15px; width:40px; height:40px; background:rgb(255 255 255 / 80%) url("../images/common/btn_top.svg") no-repeat center / 50px; border-radius:10px; font-size:0; transition:0.2s; z-index:2;}
.btn_scrollTop.__on {opacity:0.5; visibility:visible; clip-path:inset(-50%); bottom:20px; text-indent:-99999em;}


.header_btns a.btn_ssro {width:90px; background:url("../images/common/btn_ssro.svg") no-repeat center / 100%; font-size:0;}
[data-theme="dark"] .header_btns a.btn_ssro {background-image:url("../images/common/btn_ssro_white.svg");}
[data-scroll="up"][data-theme="dark"] .header_btns a.btn_ssro {background-image:url("../images/common/btn_ssro.svg");}
.gnb_on .header_btns a.btn_ssro,
[data-header-hover="true"][data-theme="dark"] .header_btns a.btn_ssro {background-image:url("../images/common/btn_ssro.svg");}

.btn_lang {position:relative; width:64px; height:40px;transition:0.2s; }
.btn_lang button {font-size:0; display:block; width:100%; padding:0 8px; text-align:left; }
.btn_lang button::before {font-size:18px; font-weight:600; line-height:40px;}
.btn_lang button::after {transform:scaleY(-1); content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url("../images/common/ico_arrow_up.svg") no-repeat right 8px center;}
html[lang="ko"] .btn_lang button::before {content:'KO';}
html[lang="en"] .btn_lang button::before {content:'EN';}
.btn_lang .__btns {display:none; position:absolute; left:0; top:100%; width:100%; background:#fff; border:1px solid #c6ccd2; border-radius:12px;}
.btn_lang .__btns a {display:block; color:#444; text-align:center; font-size:18px; height:40px; line-height:40px;} 
.btn_lang .__btns a.__active {color:#000; font-weight:600; }
.btn_lang.__active button::after {transform:none;}
.btn_lang.__active .__btns {display:block;}
.btn_lang span {position:relative; display:block; height:100%; font-size:0; }
.btn_lang span::before,
.btn_lang span::after {position:absolute; line-height:1;}
.btn_lang span::before {top:calc(50% - 12px); left:calc(50% - 12px); font-size:18px; font-weight:600;}
.btn_lang span::after {top:calc(50% - 2px); left:calc(50% + 1px); opacity:0.4; font-size:14px;}
html[lang="ko"] .btn_lang span::before {content:"ko";}
html[lang="en"] .btn_lang span::before {content:"en";}
html[lang="ko"] .btn_lang span::after {content:"en";}
html[lang="en"] .btn_lang span::after {content:"ko";}
.btn_lang:hover {color:#fff;}
.btn_lang:hover::before {border:0; background:linear-gradient(145deg, black 50%, transparent)}


/* ----------------------- 폼 요소
*/

.form_element select,
.form_element input[type="search"],
.form_element input[type="text"] {height:60px; font-size:18px; padding-left:24px; color:#000; border-radius:0;}
.form_element select {-webkit-appearance:none; appearance:none; padding-right:40px; border:1px solid #000; background:url("../images/common/ico_select_arrow.svg") no-repeat right 20px center;}
.news_wrap .form_element select {-webkit-appearance:none; -moz-appearance: none; appearance:none; padding:0 20px;}
.form_element input[type="text"],
.form_element input[type="search"] {height:60px; padding:0 24px; border:1px solid #000;}
.form_element label {display:inline-block; font-size:16px; line-height:24px; cursor:pointer;}
.form_element label:hover input + span {text-decoration:underline;}
.form_element label input[type="checkbox"],
.form_element label input[type="radio"] {position:absolute; clip-path:rect(0 0 0 0);}
.form_element label input[type="checkbox"] + span,
.form_element label input[type="radio"] + span {display:block; line-height:24px; padding-left:34px; background:url("../images/common/btn_checkbox_off.svg") no-repeat left center;}
.form_element label input[type="checkbox"]:checked + span,
.form_element label input[type="radio"]:checked + span {background-image:url("../images/common/btn_checkbox_on.svg");}


/* ----------------------- 타이틀
	.title_01 페이지 
	.title_02 섹션
	.title_03 컴포넌트 등
	...
*/

.title_01 {text-align:center; word-break:keep-all;}
.title_01 .__primary {font-size:56px; line-height:76px; font-weight:700;}
.title_01 .__primary .btn.link_03 {margin-top:12px;}
.title_01 .__secondary {font-size:24px; line-height:36px; font-weight:700; margin-top:10px;}
.title_01 .btn.link_01 {margin-top:24px;}

.title_02 {text-align:center; word-break:keep-all;}
.title_02 .__primary {font-size:52px; line-height:72px; font-weight:700;}
.title_02 .__secondary {color:#444; font-size:26px; line-height:40px; font-weight:500; margin-top:10px;}

.title_03 {text-align:center; word-break:keep-all;}
.title_03 .__primary {font-size:32px; line-height:40px; font-weight:700;}


/* 페이드 슬라이드 업 */
[data-effect="fadeUp"] {opacity:0; transform:translateY(50px);}
/* placeholder-rewritten clone of common.css — 이미지 참조는 자작 플레이스홀더 SVG */