@charset "utf-8";
@import url('fonts.css');
@import url('open-color.css');

/* === CSS reset === */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
/* table, caption, tbody, tfoot, thead, tr, th, td, */
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main, summary,
time, mark, audio, video{ margin:0; padding:0; border:0; outline:0; background: transparent; box-sizing: border-box; }
html{ -webkit-font-smoothing: subpixel-antialiased; -webkit-tap-highlight-color: transparent; }
body{ -webkit-text-size-adjust: none; /*overflow-x:hidden; overflow-y:auto;*/ }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main{display:block;}
ul,ol,li{list-style:none;}
a{ margin:0; padding:0; border:0; outline:0; text-decoration:none !important; color:inherit; }
table{ border-collapse:collapse; border-spacing:0; }
hr{ display:block; height:1px; border:0; border-top:1px solid var(--oc-gray-3); margin:1rem 0; padding:0; }
img{border:0; max-width:100%; vertical-align:middle;}
em{font-style:normal;}
input, textarea, button{ -webkit-appearance:none; -moz-appearance:none; appearance:none; }
input, textarea, button, select{ border-radius:0; }
button{ border:none; outline:none; background:none; cursor:pointer; }
input, select{vertical-align:middle;}
input:required, input:invalid{ /*border:0 none;*/ outline: 0 none; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow: none; }
address, cite, dfn, em, var{font-style: normal;}
blockquote, q{quotes: none;}
blockquote:before, blockquote:after, q:before, q:after{content:''; content: none;}
sup{vertical-align: text-top;}
sub{vertical-align: text-bottom;}
embed{ /*for the damn thouder plugin*/ display:none; }

/* === form CSS reset cross browsing === */

select::-ms-expand {display:none}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{display:none;}
input:-moz-submit-invalid{box-shadow: none;}
input:-moz-ui-invalid{box-shadow:none;}

/* === Common === */

:root {
	/* color */
	--color-main :		#1d4ed8; 
	--color-main-rgb :	29,78,216;	
	--color-skip1 :		#0097ff;	--color-skip2 :		#00cdee;	--color-skip3 :		#66fbd2;	
	--color-main-100 :	#d0dbf9;	--color-main-200 :	#a2b7f2;	--color-main-300 :	#7393ec;	--color-main-400 :	#446ee6;
	--color-main-600 :	#173ead;	--color-main-700 :	#112f82;	--color-main-800 :	#0c1f56;	--color-main-900 :	#06102b;
	--color-wh-rgb :	255,255,255;
	--color-bk-rgb :	0,0,0;

	/* gradient */
	--gradi-skip :		#1d4ed8 10%, #0097ff 40%, #00cdee 60%, #66fbd2 90%;

	/* font */
	--font-title :	'Montserrat', 'SUIT', 'Spoqa Han Sans Neo', 'Pretendard', 'Noto Sans KR', sans-serif;
	--font-text :	'Roboto', 'Pretendard', 'Spoqa Han Sans Neo', 'Noto Sans KR', 'AppleGothic', '맑은 고딕', 'Malgun Gothic', 돋움, Dotum, sans-serif;
	--font-mono :	'Roboto Mono', 'Roboto', 'Pretendard', 'Noto Sans Mono', 'Noto Sans KR', sans-serif;
	--font-icon :	'Font Awesome 7 Free', 'FontAwesome', 'xeicon', 'Pretendard', 'Noto Sans KR', sans-serif;

	/* size */
	--size-font :		18px;
	--size-space-xl:	clamp(40px, 10vw, 80px);
	--size-space-lg:	clamp(32px, 8vw, 64px);
	--size-space-md:	clamp(24px, 6vw, 48px);	/* margin */
	--size-space-sm:	clamp(16px, 4vw, 32px);	/* gutter */
	--size-space-xs:	clamp(8px, 2vw, 16px);	/* gap, radius */
	--size-circle:		clamp(240px, 45vw, 480px);
	--size-round:		32px;
	--size-round-m:		-32px;

	/* btn */
	--btn-padding-x:	1.5em;
	--btn-padding-y:	0.75em;
	--btn-padding-i:	0.5em;
	--btn-scale-lg:		1.2;
	--btn-scale-sm:		0.8;
	--btn-radius:		4px;

	/* transition */
	--transition-slow : all .3s ease-in-out;
	--transition-fast : all .1s ease-in-out;
}

@media (max-width: 1200px) {
	:root {
		--size-font :	16px;

		--btn-padding-x:	1em;
		--btn-padding-y:	0.6em;
		--btn-padding-i:	0.4em;
	}
}
@media (max-width: 768px) {
	:root {
		--size-circle:	clamp(280px, 75vw, 360px);
		--size-round:	16px;
		--size-round-m:	-16px;
	}
}

html, body { height:100%; }
body { font-family:var(--font-text); font-size:var(--size-font); color:var(--oc-gray-7); line-height:1.5; width:100%; }
h1, h2, h3, h4, h5, h6 { color:var(--oc-gray-9); }
button, input, select, textarea { font-family:var(--font-text); font-size:var(--size-font); }
a { color:var(--oc-gray-8); transition: var(--transition-fast); -webkit-transition: var(--transition-fast); }
a:hover, a:focus { color:var(--oc-gray-9); }
a:hover, a:focus,
button:active, button:focus { outline: none !important; box-shadow: none !important; }
.inner { width:90%; height:100%; padding:0 var(--size-space-sm); margin:0 auto; position:relative; }
body::-webkit-scrollbar { width: 8px;  /* 스크롤바의 너비 */ }
body::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: var(--oc-gray-6); /* 스크롤바의 색상 */ border-radius: var(--size-space-xs); }
body::-webkit-scrollbar-track { background: var(--oc-gray-2); /*스크롤바 뒷 배경 색상*/ }
@media (max-width:1200px) {
	.inner { width:100%; }
}

#smooth-wrapper { height: 100%; overflow: visible; }

/* === media === */

.max_wide, .max_pc, .max_ta, .max_mo { display:none !important; }

/* Wide 이하 (≤1600px) */
@media (max-width: 1600px) {
	.min_wide { display:none !important; }
	.max_wide { display:block !important; }
}

/* PC 이하 (≤1200px) */
@media (max-width: 1200px) {
	.min_pc { display:none !important; }
	.max_pc { display:block !important; }
}

/* 태블릿 이하 (≤768px) */
@media (max-width: 768px) {
	.min_ta { display:none !important; }
	.max_ta { display:block !important; }
}

/* 모바일 이하 (≤560px) */
@media (max-width: 560px) {
	.min_mo { display:none !important; }
	.max_mo { display:block !important; }
}

/* === component === */

/* column */

.col-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--size-space-md); }
.col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--size-space-md); }
.col-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--size-space-md); }
@media (max-width: 1200px) {
	.col-4,
	.col-3,
	.col-2 { gap: var(--size-space-md) var(--size-space-sm); }
}
@media (max-width: 768px) {
	.col-4,
	.col-3,
	.col-2 { grid-template-columns: 1fr; }
}

/* button */

.btn-custom { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	font-size: var(--size-font); font-weight: 600; line-height: 1;
	padding: var(--btn-padding-y) var(--btn-padding-x); border-radius: var(--btn-radius); border: 2px solid transparent;
	cursor: pointer; white-space: nowrap; text-decoration: none; transition: var(--transition-slow); }
.btn-custom.main { background-color: var(--color-main); color: #fff; }
.btn-custom.main:hover { background-color: var(--color-main-600); }
.btn-custom.main.line { background-color: transparent; color: var(--color-main); border-color: var(--color-main); }
.btn-custom.main.line:hover { background-color: var(--color-main-600); color: #fff; border-color: var(--color-main-600); }
.btn-custom.white { background-color: rgba(var(--color-wh-rgb), 0.9); color: var(--color-main); }
.btn-custom.white:hover { background-color: #fff; }
.btn-custom.white.line { background-color: transparent; color:rgba(var(--color-wh-rgb), 0.9); border-color:rgba(var(--color-wh-rgb), 0.9); }
.btn-custom.white.line:hover { background-color:#fff; color: var(--color-main); border-color:#fff; }
.btn-custom.black { background-color: rgba(var(--oc-gray-9-rgb), 0.9); color: #fff; }
.btn-custom.black:hover { background-color: #000; }
.btn-custom.black.line { background-color: transparent; color: rgba(var(--oc-gray-9-rgb), 0.9); border-color: rgba(var(--oc-gray-9-rgb), 0.9); }
.btn-custom.black.line:hover { background-color: #000; color: #fff; border-color: #000; }
.btn-custom.gray { background-color: rgba(var(--oc-gray-5-rgb), 0.9); color: #fff; }
.btn-custom.gray:hover { background-color: var(--color-main); }
.btn-custom.gray.line { background-color: transparent; color: rgba(var(--oc-gray-5-rgb), 0.9); border-color: rgba(var(--oc-gray-5-rgb), 0.9); }
.btn-custom.gray.line:hover { background-color: var(--color-main); color: #fff; border-color: var(--color-main); }
.btn-custom.lg { font-size: calc(var(--size-font) * var(--btn-scale-lg));
	padding: calc(var(--btn-padding-y) * var(--btn-scale-lg)) calc(var(--btn-padding-x) * var(--btn-scale-lg)); }
.btn-custom.sm { font-size: calc(var(--size-font) * var(--btn-scale-sm));
	padding: calc(var(--btn-padding-y) * var(--btn-scale-sm)) calc(var(--btn-padding-x) * var(--btn-scale-sm)); }
.btn-custom.round { border-radius:999px; }
.btn-custom.circle { aspect-ratio: 1 / 1; border-radius: 50%; flex: 0 0 auto; }
.btn-custom.icon { padding: var(--btn-padding-i); background-color: transparent; border-color: transparent; }
.btn-custom.icon i { font-size:1.5em; }
.btn-custom.icon:hover { background-color: transparent; border-color: transparent; }
.btn-custom.icon.main { color: var(--color-main); }
.btn-custom.icon.main:hover { color: var(--color-main-600); }
.btn-custom.icon.white { color: rgba(var(--color-wh-rgb), 0.9); }
.btn-custom.icon.white:hover { color: #fff; }
.btn-custom.icon.black { color: rgba(var(--oc-gray-9-rgb), 0.9); }
.btn-custom.icon.black:hover { color: #000; }
.btn-custom.icon.gray { color: rgba(var(--oc-gray-5-rgb), 0.9); }
.btn-custom.icon.gray:hover { color: var(--color-main); }
.btn-custom.icon.lg { padding: calc(var(--btn-padding-i) * var(--btn-scale-lg)); }
.btn-custom.icon.sm { padding: calc(var(--btn-padding-i) * var(--btn-scale-sm)); }
.btn-custom.plus:before { content:'\e913'; font-family:xeicon; }
.btn-custom.plus:hover:before { content:'\e907'; }
.btn-custom:focus-visible { outline: none; }
.btn-wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--size-space-xs); }
.btn-wrap.left { justify-content:flex-start; }

/* form */

input.inp-custom,
select.select-custom { -webkit-appearance: none; }
input.inp-custom::placeholder,
select.select-custom::placeholder,
textarea.textarea-custom::placeholder { color: var(--oc-gray-5); font-size: 0.9em; }
input.inp-custom,
select.select-custom,
textarea.textarea-custom { transition: var(--transition-slow); outline: none; background: #fff;
	border: 1px solid var(--oc-gray-3); border-radius:var(--btn-radius); padding: 0.5em var(--size-space-xs); }
textarea.textarea-custom { resize: vertical; }
input.inp-custom:disabled,
select.select-custom:disabled,
textarea.textarea-custom:disabled { border: 1px solid var(--oc-gray-3); background: var(--oc-gray-1); color: var(--oc-gray-6); }
input.inp-custom:hover,
select.select-custom:hover,
textarea.textarea-custom:hover { border-color: var(--oc-gray-5); }
input.inp-custom:focus,
select.select-custom:focus,
textarea.textarea-custom:focus { border-color: var(--color-main) !important; }
input[type="checkbox"] + label.check-custom,
input[type="radio"] + label.radio-custom { cursor:pointer; transition: var(--transition-slow); }
input[type="checkbox"] + label.check-custom:hover,
input[type="radio"] + label.radio-custom:hover { color:var(--oc-gray-9); }
input[type="checkbox"] + label.check-custom:before,
input[type="radio"] + label.radio-custom:before { font-family:var(--font-icon); display:inline-block; margin-right:0.4em; }
input[type="checkbox"] + label.check-custom:before { content:'\f0c8'; }
input[type="radio"] + label.radio-custom:before { content:'\f111'; }
input[type="checkbox"]:checked + label.check-custom:before,
input[type="radio"]:checked + label.radio-custom:before { color:var(--color-main); }
input[type="checkbox"]:checked + label.check-custom:before { content:'\f14a'; }
input[type="radio"]:checked + label.radio-custom:before { content:'\f192'; }
label.label-custom:has(input) { transition: var(--transition-slow); cursor: pointer; gap:var(--size-space-xs); }
label.label-custom:has(input):hover { color: var(--color-main); }
.form-custom .form-title { border-bottom: 1px solid var(--oc-gray-4); margin-bottom: var(--size-space-sm); padding-bottom: 5px; }
.form-custom .form-inp-wr { margin: var(--size-space-xs) 0; width: 100%; }
.form-custom .form-inp-wr input.inp-custom,
.form-custom .form-inp-wr select.select-custom { width: 100%; }
.form-custom .form-inline { display:flex; gap: 5px var(--size-space-xs); }
.form-custom .form-box { margin-bottom: var(--size-space-md); }
.form-custom .form-box label.label-custom { display: block; font-weight:600; margin-bottom: 5px; }
.form-custom .form-box textarea.textarea-custom { width: 100%; min-height: 12rem; }
.form-custom .required:after { content: "*"; color: var(--color-main); margin-left: 5px; }
@media (max-width: 1200px) {
	.form-custom .form-inp-wr { gap: var(--size-space-sm); }
}

/* gradient */

.gradient.right { background-image: linear-gradient(to right, var(--gradi-skip) ); }
.gradient.bottom { background-image: linear-gradient(to bottom, var(--gradi-skip) ); }
.gradient.text { background-clip:text; -webkit-background-clip:text; color: transparent; }
.gradient_mesh { background-color: hsla(173, 77%, 83%, 1);
    background-image: radial-gradient(circle at 5% 1%, hsla(250, 76%, 61%, 1) 7%, transparent 84%), radial-gradient(circle at 7% 81%, hsla(184, 91%, 91%, 1) 16%, transparent 53%), radial-gradient(circle at 11% 29%, hsla(213, 97%, 75%, 1) 8%, transparent 74%), radial-gradient(circle at 39% 52%, hsla(149, 93%, 64%, 1) 6%, transparent 68%), radial-gradient(circle at 90% 50%, hsla(118, 94%, 89%, 1) 2%, transparent 85%);
    background-blend-mode: normal, normal, normal, normal, normal; }
mark.gradient { background-image: linear-gradient(to right, rgba(var(--color-main-rgb),0.5) 10%, rgba(0,151,255,0.5) 40%, rgba(0,205,238,0.5) 60%, rgba(102,251,210,0.5) 90%);
	background-repeat: no-repeat; background-size: 100% 25%; background-position: 0 90%; color:inherit; }

/* animation */

.gradient.shift { background-size: 200% 100%; background-position: 0 0; animation: rainbow-shift 4s ease-in-out infinite; }
@keyframes rainbow-shift {
	0%{ background-position: 0 0;}
	50%{ background-position: 100% 0;}
	100% {background-position: 0 0;}
}
.floating { animation: floating 3s ease-in-out infinite; }
@keyframes floating {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-1.25em); }
	100% { transform: translateY(0px); }
}
.scroll { position:absolute; z-index:10; left:50%; bottom:var(--size-space-sm); padding:var(--size-space-lg) 0 0; transform:translateX(-50%);
	font-size:12px; font-weight:600; text-align:center; line-height:1.3; font-family:var(--font-title); color: rgba(var(--color-wh-rgb), 0.9); }
.scroll span { display:block; position:absolute; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:#fff; transition:all .2s; animation:scr_down 3s infinite; }
.scroll:hover,
.scroll:focus { color:#fff; }
@media (max-width: 1200px) {
	.scroll { bottom:calc(var(--size-space-sm) + 50px); }
}
@keyframes scr_down {
	0% { top:0; opacity:0; }
	20% { opacity:1; }
	100% { top:calc(90% - 30px); opacity:0; }
}

/* round-box */
.round-box { background:var(--oc-gray-0); border-radius:var(--size-round); position:relative; }
.round-box.outline { background:#fff; border:1px solid var(--oc-gray-2); }
.round-box .round-side { position:absolute; z-index:10; bottom:-5px; right:-5px; display:flex; align-items:center; width:}
.round-box .round-side:before { content: ''; position: absolute; left: var(--size-round-m); bottom: 5px; z-index: -1;
    width: var(--size-round); height: var(--size-round); border-radius: 0 0 var(--size-round) 0; box-shadow: var(--size-round) var(--size-round) 0 var(--size-round) #fff; }
.round-box .round-side:after { content: ''; position: absolute; right: 5px; top: var(--size-round-m); z-index: -1;
    width: var(--size-round); height: var(--size-round); border-radius: 0 0 var(--size-round) 0; box-shadow: var(--size-round) var(--size-round) 0 var(--size-round) #fff; }
.round-box .round-side .round { position: relative; border-top-left-radius:var(--size-round); background:#fff; border:5px solid #fff; display:flex; align-items:center; overflow:hidden;
	height:calc((var(--size-round) * 2) + 10px); box-sizing: border-box; }
.round-box .round-side .round .btn-custom { width:calc(var(--size-round) * 2); height:calc(var(--size-round) * 2); line-height: 1; padding:0; }
.round-box .round-side .round .btn-custom i { font-size:1.5em; }
@media (max-width: 768px) {
	.round-box .round-side .round .btn-custom i { font-size:1.2em; }
}

/* video */

.video-bg { opacity: 0; transition: opacity .6s ease; }
.video-bg.is-ready { opacity: 1; }
.mbYTP_wrapper { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; }
.mbYTPPlayer { width: 100% !important; height: 100% !important; }

/* === Layout === */

/* header */

#g-header { position: fixed; top: 0; left: 0; width: 100%; height:70px; z-index: 999; transition: background .3s ease, box-shadow .3s ease; word-break:keep-all; }
#g-header.is-transparent { background: transparent; box-shadow: none; }
#g-header.is-solid { background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
#g-header.is-transparent .gnb-depth1-btn { color: #fff; }
#g-header.is-solid .gnb-depth1-btn { color: var(--oc-gray-7); }
#g-header .inner { display:flex; align-items:center; justify-content:space-between; gap:var(--size-space-xs); }
#g-header .hd-logo img { max-height:48px; }
#g-header .hd-icon { display:none; }
@media (max-width: 1200px) {
	#g-header { height:50px; }
	#g-header .inner { padding-right: calc(var(--size-space-sm) - 0.5em); }
	#g-header .hd-logo img { max-height:36px; }
	#g-header .hd-cta { margin-left:auto; }
	#g-header .hd-icon { display: inline-flex; }	
}

/* gnb */

#g-gnb .depth1 { display:flex; align-items:center; justify-content:center; gap:var(--size-space-md); }
#g-gnb .depth1 .gnb-depth1-btn { font-weight:500; font-family:var(--font-title); }
@media (max-width: 1200px) {
	#g-gnb .depth1 { display:none; }
	#g-header.mobile .hd-logo,
	#g-header.mobile .hd-cta,
	#g-header.mobile .hd-icon { z-index: 1; }
	#g-header.mobile #g-gnb { position: fixed; z-index: 0; height: 100vh; width: 15em; top: 0; right: -15em; background: rgba(0,0,0,0.9); backdrop-filter: blur(3px);
		transition:right .1s ease-in-out; padding-top: calc(50px + var(--size-space-sm)); overflow-y: auto; }
	#g-header.mobile #g-gnb.open { right: 0; }
	#g-header.mobile #g-gnb.open .depth1 { display:flex; flex-direction: column; align-items: flex-start; gap: var(--size-space-xs); }
	#g-header.mobile #g-gnb .gnb-depth1 { width: 100%; }
	#g-header.mobile #g-gnb .gnb-depth1-btn { font-size: 1.5em; width: 100%; padding: 0 var(--size-space-sm); }
	#g-header.mobile #g-gnb .gnb-depth2 { display: flex; }
	#g-header.mobile #g-gnb .gnb-depth2-btn { font-size: 1.2em; }
	#g-header.mobile #g-gnb .gnb-depth1-btn,
	#g-header.mobile #g-gnb .gnb-depth2-btn { color: var(--oc-gray-0) !important; }
}

/* footer */

#g-footer { background:var(--oc-gray-9); color:var(--oc-gray-5); padding-top:var(--size-space-lg); padding-bottom:var(--size-space-lg); word-break:keep-all; }
#g-footer a { color:var(--oc-gray-3); }
#g-footer a:hover { color:var(--oc-gray-1); }
#g-footer .ft-head { display:flex; gap:var(--size-space-sm); align-items:center;
	padding-bottom:var(--size-space-sm); margin-bottom:var(--size-space-sm); border-bottom:1px solid rgba(var(--color-wh-rgb), 0.2); }
#g-footer .ft-body { display:flex; gap:var(--size-space-sm); align-items:center; }
#g-footer .ft-head .ft-logo img { max-height:48px; }
#g-footer .ft-head .fnb { margin-left:auto; font-family:var(--font-title); }
#g-footer .ft-head .fnb,
#g-footer .ft-head .fnb .menu,
#g-footer .ft-head .fnb .login { display:flex; flex-wrap:wrap; gap:0 var(--size-space-sm); }
#g-footer .ft-head .fnb .login .adm a { color:var(--color-main-300); }
#g-footer .ft-head .fnb .login .adm a:hover { color:var(--color-main-200); }
#g-footer .ft-body .address { display:flex; flex-wrap:wrap; gap:0 var(--size-space-sm); max-width:700px; font-size:0.9em; }
#g-footer .ft-body .address address { display:inline; }
#g-footer .ft-body .address strong:after { content:' : '; }
#g-footer .ft-body .copy { margin-left:auto; font-size:0.8em; }
@media (max-width: 1200px) {
	#g-footer { padding-top:var(--size-space-md); padding-bottom:var(--size-space-md); }
	#g-footer .ft-logo img { max-height:36px; }
	#g-footer .ft-body { flex-direction:column; align-items:stretch; gap:var(--size-space-xs); }
	#g-footer .ft-body .address { max-width:auto; }
	#g-footer .ft-body .copy { margin-left:0; }
}
@media (max-width: 768px) {
	#g-footer .ft-head,
	#g-footer .ft-body { flex-direction:column; align-items:center; gap:var(--size-space-sm); }	
	#g-footer .ft-head .fnb { margin-left:0; justify-content:center; }
	#g-footer .ft-body .address { flex-direction:column; }
}

/* quick */

.go-top { position:fixed; bottom:calc(3rem + 60px); right:2rem; z-index:100; opacity:0; transition: var(--transition-slow); }
.go-top.scrolled { opacity:1; }
.go-top .btn-top { display: flex; justify-content:center; align-items:center; height: 60px; width: 60px; font-size:32px;
	background:rgba(var(--oc-gray-6-rgb), 0.9); color: #fff; border-radius: 50%; cursor:default; transition: var(--transition-slow); }
.go-top .btn-top:hover { background:var(--color-main); }
.go-top.scrolled .btn-top { cursor:pointer; }
.go-btns { position:fixed; bottom:2rem; right:2rem; z-index:100; transition: var(--transition-slow); }
.go-btns .btn-chat { display: flex; justify-content:center; align-items:center; height: 60px; width: 60px; font-size:32px;
	background:#FFDE00; color: #231916; border-radius: 50%;
	transition: var(--transition-slow); }
.go-btns .btn-chat img { max-width:32px; }
.go-btns .btn-chat:hover { background:#FFDE00; color: #231916; }
@media (max-width:1200px) {
	.go-top { bottom:calc(15px + 40px + 10px); right:15px; }
	.go-top .btn-top { height:40px; width:40px; font-size:24px; }
	.go-btns { bottom:15px; right:15px; }
	.go-btns .btn-chat { height:40px; width:40px; font-size:24px; background:#FFDE00; color: #231916; }
	.go-btns .btn-chat img { max-width:24px; }
}

/* === Content === */

.section-main { min-height: 100dvh; display: flex; align-items: center; justify-content: center; }
.section-main h1,
.section-main h2,
.section-main h3,
.section-main h4,
.section-main h5,
.section-main h6 { font-family: var(--font-title); word-break:keep-all; }
.section-main h1 { font-size: clamp(3rem, 7vw, 7rem); line-height: 1.15; letter-spacing: -0.03em; }
.section-main h2 { font-size: clamp(2.5rem, 5.5vw, 5.5rem); line-height: 1.18; letter-spacing: -0.025em; }
.section-main h3 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.22; letter-spacing: -0.02em; }
.section-main h4 { font-size: clamp(1.5rem, 3vw, 3rem); line-height: 1.28; letter-spacing: -0.015em; }
.section-main h5 { font-size: clamp(1.25rem, 2vw, 2rem); line-height: 1.35; letter-spacing: -0.01em; }
.section-main h6 { font-size: clamp(1.1rem, 1.5vw, 1.5rem); line-height: 1.4; letter-spacing: -0.005em; }
.section-main p { word-break:keep-all; letter-spacing: -0.005em; }
.section-main hgroup { text-align:center; margin-bottom:var(--size-space-sm); }
.section-main hgroup .desc { margin-top:var(--size-space-xs); font-size: clamp(1.1rem, 1.5vw, 1.5rem); }
.section-main .inner { padding-top:calc(70px + var(--size-space-xs)); padding-bottom:var(--size-space-xl); }
@media (max-width: 1600px) {
	.section-main hgroup { text-align:left; }
}
@media (max-width: 1200px) {
	.section-main .inner { padding-top:calc(50px + var(--size-space-xs)); }
}

/* === Section === */

.section-main.visual { position: relative; height: 100vh; overflow: hidden; }
.section-main.visual::before { /* poster */ content: ''; position: absolute; inset: 0;
	background: var(--visual-poster) no-repeat 50% 50% / cover; z-index: 0; transform: scale(1.05); opacity: 1; transition: opacity .6s ease; }
.section-main.visual.video-ready::before { /* video ready → poster fade out */ opacity: 0; }
.section-main.visual::after { content: ''; position: absolute; inset: 0; background: rgba(var(--color-bk-rgb),0.5); z-index: 2; }
.section-main.visual .visual-text { position: relative; z-index: 3; height: 100%; text-align: center;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--size-space-md); }
.section-main.visual .visual-text h1 { color:rgba(var(--color-wh-rgb),0.9); font-weight:500; }
.section-main.visual .visual-text h1 strong { font-weight:900; }
.section-main.visual .visual-text .desc { color:rgba(var(--color-wh-rgb),0.8); font-size: clamp(1.25rem, 2vw, 2rem); }
.section-main.visual .visual-text .desc strong { font-family:var(--font-title); color:#fff; }
@media (max-width: 768px) {
	.section-main.visual::before { transform: scale(1.2); }
}

.section-main.demo { position: relative; }
.section-main.demo hgroup,
.section-main.demo h2 { color:#fff; }
.section-main.demo .anchor-target { position: absolute; top: 0; transform: translateY(-1px); }
.section-main.demo .inner > .tech_list { max-width:calc(1600px - (var(--size-space-sm) * 2)); margin:0 auto; }
.section-main.demo .tech_list { margin-top:var(--size-space-md); }
.section-main.demo .tech_list .pin-spacer { margin-bottom:var(--size-space-md) !important; padding-bottom:0px !important; height:600px !important; }
.section-main.demo .tech_list .tech_item { position:relative; perspective:300px; }
.section-main.demo .tech_list .tech_item .gsap_container { position:relative; display:flex; justify-content:space-between; align-items:center; gap:var(--size-space-xs); 
	padding:var(--size-space-md); height:600px; min-height:400px; border-radius:var(--size-space-sm); filter:brightness(1); background-color:#fff; }
.section-main.demo .tech_list .tech_item + .tech_item { margin-top:var(--size-space-md); }
.section-main.demo .tech_list .tech_item:nth-child(1) { z-index: 1; }
.section-main.demo .tech_list .tech_item:nth-child(2) { z-index: 2; }
.section-main.demo .tech_list .tech_item:nth-child(3) { z-index: 3; }
.section-main.demo .tech_list .tech_item .txt_cont { display:flex; flex-direction:column; justify-content:space-between; width:calc(50% - var(--size-space-xs)); height:100%; }
.section-main.demo .tech_list .tech_item .txt_cont h5 { margin-bottom:var(--size-space-sm); color:var(--oc-gray-5); }
.section-main.demo .tech_list .tech_item .txt_cont h3 { margin-bottom:var(--size-space-xs); }
.section-main.demo .tech_list .tech_item .txt_cont p { margin-bottom:var(--size-space-sm); }
.section-main.demo .tech_list .tech_item .img_cont { width:50%; height:100%; border-radius:var(--size-round); overflow:hidden; }
.section-main.demo .tech_list .tech_item .img_cont .swiper-slide a { display:block; width:100%; height:100%; position:relative; }
.section-main.demo .tech_list .tech_item .img_cont .swiper-slide a .btn-custom.plus { border:none; }
.section-main.demo .tech_list .tech_item .img_cont .swiper-slide a:hover .btn-custom.plus {background-color: hsla(173, 77%, 83%, 1);
    background-image: radial-gradient(circle at 5% 1%, hsla(250, 76%, 61%, 1) 7%, transparent 84%), radial-gradient(circle at 7% 81%, hsla(184, 91%, 91%, 1) 16%, transparent 53%), radial-gradient(circle at 11% 29%, hsla(213, 97%, 75%, 1) 8%, transparent 74%), radial-gradient(circle at 39% 52%, hsla(149, 93%, 64%, 1) 6%, transparent 68%), radial-gradient(circle at 90% 50%, hsla(118, 94%, 89%, 1) 2%, transparent 85%);
    background-blend-mode: normal, normal, normal, normal, normal; }
.section-main.demo .tech_list .tech_item .img_cont .swiper-slide a:hover .btn-custom.plus::before { content:'\e907'; }
/*
.section-main.demo .tech_list .tech_item .img_cont .swiper-slide a::before { content:'\f090'; display:inline-flex; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	font-family:var(--font-icon); font-size:5em; color:rgba(255,255,255,0); transition: var(--transition-slow); }
.section-main.demo .tech_list .tech_item .img_cont .swiper-slide a:hover::before { color:rgba(255,255,255,0.8); }
*/
.section-main.demo .tech_list .tech_item .img_cont img { width:100%; height:100%; object-fit:cover; }
.section-main.demo .pager_txt { position: relative; display:flex; flex-direction:column; gap:var(--size-space-xs); margin-bottom:var(--size-space-sm); }
.section-main.demo .pager_txt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.2); }
.section-main.demo .pager_txt .pager-item { display:flex; position:relative; gap:var(--size-space-xs); width:max-content; height:auto; margin-left:-1px; padding-left:var(--size-space-xs); border-radius:0;
	font-family:var(--font-title); font-size:clamp(1.1rem, 1.5vw, 1.5rem); font-weight:600; line-height:1.15; background:none; opacity:.3; cursor:pointer; transition: var(--transition-slow); }
.section-main.demo .pager_txt .pager-item .num { font-weight: 900; letter-spacing: 0.005em; }
.section-main.demo .pager_txt .pager-item .txt { letter-spacing: -0.005em; }
.section-main.demo .pager_txt .pager-item.is-active { padding-left:calc(var(--size-space-xs) * 2); border-left:3px solid var(--oc-gray-9); opacity:1; color:var(--oc-gray-9); }
.section-main.demo .pager_txt .pager-item.is-active::before { content:''; position:absolute; left:calc(var(--size-space-xs) - 2px); top:50%; transform:translateY(-50%);
	width:4px; height:4px; border-radius:100px; background: var(--oc-gray-9); transition: var(--transition-slow); }
@media (max-width: 1200px) {
	.section-main.demo .tech_list .tech_item .gsap_container { height:540px; padding:var(--size-space-sm); gap:var(--size-space-sm); }
}
@media (max-width: 768px) {
	.section-main.demo .tech_list .tech_item .gsap_container { transform: none !important; filter: none !important; height:auto; flex-direction:column; }
	.section-main.demo .tech_list .tech_item .txt_cont { width:100%; }
	.section-main.demo .tech_list .tech_item .txt_cont h5 { margin-bottom: var(--size-space-xs); }
	.section-main.demo .tech_list .tech_item .img_cont { width:100%; }
}

.section-main.intro .process { position: relative; margin-top: var(--size-space-md); }
.section-main.intro .progress-bar { position: absolute; top: calc(240px + var(--size-space-xs)); left: 0; width: 100%; height: 2px;
	background: var(--oc-gray-2); border-radius: 999px; overflow: hidden; }
.section-main.intro .progress-fill { width: 0%; height: 100%;
	transform-origin: left center; transition: width 0.5s linear, height 0.5s linear; }
.section-main.intro .process .col-4 li { text-align:center; position: relative; }
.section-main.intro .process .col-4 li::before { content: ''; position: absolute; top: calc(240px + var(--size-space-xs) - 7px); left: 50%;
	transform: translateX(-50%); width: 16px; height: 16px; background: var(--color-main); border-radius: 50%; z-index: 3; }
.section-main.intro .process .col-4 li:nth-child(1)::before { background: var(--color-main); }
.section-main.intro .process .col-4 li:nth-child(2)::before { background: var(--color-skip1); }
.section-main.intro .process .col-4 li:nth-child(3)::before { background: var(--color-skip2); }
.section-main.intro .process .col-4 li:nth-child(4)::before { background: var(--color-skip3); }
.section-main.intro .process .col-4 li:nth-child(1) .floating { animation-delay: 0s; }
.section-main.intro .process .col-4 li:nth-child(2) .floating { animation-delay: 0.6s; }
.section-main.intro .process .col-4 li:nth-child(3) .floating { animation-delay: 1.2s; }
.section-main.intro .process .col-4 li:nth-child(4) .floating { animation-delay: 1.8s; }
.section-main.intro .img_cont { height: 240px; margin-bottom: var(--size-space-md); }
.section-main.intro .img_cont img { width:auto; height:100%; }
.section-main.intro .txt_cont h4 { margin-bottom: var(--size-space-xs); }
@media (max-width: 1600px) {
	.section-main.intro .txt_cont p br { display:none; }
	.section-main.intro .progress-bar { top: calc(15vw + var(--size-space-xs)); }
	.section-main.intro .process .col-4 li::before { top: calc(15vw + var(--size-space-xs) - 7px); }
	.section-main.intro .img_cont { height: 15vw; }
}
@media (max-width: 768px) {
	.section-main.intro .process { padding-left: 12px; } 
	.section-main.intro .progress-bar { top:0; left:0; width: 2px; height: 100%; }
	.section-main.intro .progress-fill { width: 100%; height: 0%; transform-origin: top center; }
	.section-main.intro .process .col-4 li::before { top: 50%; left: -19px; transform: none; }
	.section-main.intro .img_cont { height: auto; margin-bottom: var(--size-space-xs); }
	.section-main.intro .img_cont img { max-width:180px; }
	.section-main.intro .txt_cont p br { display:block; }
}

.section-main.intro .advantage.venn-section { padding:var(--size-space-lg) 0; }
.section-main.intro .advantage .venn-wrap { position: relative; width: 100%; max-width: 1200px; height:75vw; max-height:900px; margin: 0 auto; }
.section-main.intro .advantage .venn-circle {
	width: var(--size-circle); height: var(--size-circle); position: absolute; top: 50%; left: 50%; 
	display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.section-main.intro .advantage .venn-circle .venn-inner { width: 100%; height: 100%; background: transparent; border: 2px solid var(--oc-gray-2); border-radius: 50%; 
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: background-color .3s ease-in-out, border-color .3s ease-in-out; }
.section-main.intro .advantage .venn-circle h4 { margin-bottom:var(--size-space-xs); transition: color .3s ease-in-out; }
.section-main.intro .advantage .circle-1 { /* 왼쪽 위 */
	transform: translate( calc(-50% - var(--size-circle) * 0.425), calc(-50% - var(--size-circle) * 0.35) ); }
.section-main.intro .advantage .circle-2 { /* 오른쪽 위 */
	transform: translate( calc(-50% + var(--size-circle) * 0.425), calc(-50% - var(--size-circle) * 0.35) ); }
.section-main.intro .advantage .circle-3 { /* 아래 중앙 */
	transform: translate( -50%, calc(-50% + var(--size-circle) * 0.375) ); }
.section-main.intro .advantage .venn-circle:hover { z-index:1; }
.section-main.intro .advantage .venn-circle:hover .venn-inner { background-color: rgba(var(--color-main-rgb),0.05); border-color:var(--color-main); }
.section-main.intro .advantage .venn-circle:hover h4 { color:var(--color-main); }
@media (max-width: 768px) {
	.section-main.intro .advantage .venn-wrap { height: auto; max-height:100%; display: flex; flex-direction: column; align-items: center; }
	.section-main.intro .advantage .venn-circle {
		position: relative; top: auto; left: auto; transform: none; margin-top: -7.5vw; flex-shrink: 0; }
	.section-main.intro .advantage .circle-1 { margin-top: 0; }
	.section-main.intro .advantage .circle-3 { transform: none; }
}

.section-main.intro .slogan { position: relative; font-size:clamp(2.75rem, 7vw, 7rem); font-weight: 500; }
.section-main.intro .slogan .txt_area { display: flex; flex-direction:column; align-items: center; justify-content: center; }
.section-main.intro .slogan .txt_area p { overflow: hidden; white-space: nowrap; line-height: 1.22; letter-spacing:-0.02em; }
.section-main.intro .slogan .txt_area p strong { font-weight:900; }
.section-main.intro .slogan .txt_area p strong:not(.gradient) { color:var(--oc-gray-9); }
.section-main.intro .slogan .txt_area p mark { font-weight:700; color:var(--oc-gray-9); }

.section-main.faq .inner > ul { max-width:calc(1600px - (var(--size-space-sm) * 2)); margin:0 auto; }
.section-main.faq ul { background-color:#fff; border: 1px solid var(--oc-gray-3); padding: 0; border-radius:var(--size-space-xs); overflow:hidden; }
.section-main.faq li { padding: var(--size-space-sm); }
.section-main.faq li:not(:last-child) { border-bottom: 1px solid var(--oc-gray-3); }
.section-main.faq a { display:flex; align-items:center; gap:var(--size-space-xs); }
.section-main.faq a:after { content: "\f078"; font-family: var(--font-icon); font-weight: 900; margin-left: auto; color: var(--oc-gray-4); }
.section-main.faq .faq_li_open a:after { content: "\f077"; }
.section-main.faq .con_inner { display: none; background: var(--oc-gray-1); margin-top:var(--size-space-sm); padding:var(--size-space-xs); border-radius:var(--size-space-xs); }

.section-main.contact .inner > .form-custom { max-width:calc(1600px - (var(--size-space-sm) * 2)); margin:0 auto; }
.section-main.contact .agree-box { max-height:12rem; margin:var(--size-space-xs) 0; padding:0.5em var(--size-space-xs); 
	background-color:var(--oc-gray-1); border: 1px solid var(--oc-gray-3); border-radius:var(--btn-radius); font-size: 0.9em; overflow-y: auto; }
.section-main.contact .agree-box + .agree-check { display:flex; justify-content: flex-end; gap:var(--size-space-xs); }