@charset "utf-8";
/* *******************************************************
 * filename : responsive.css
 * description : 전체 반응형 CSS (layout + content + main)
 * date : 260526
******************************************************** */


/* ================================================================
 * LAYOUT RESPONSIVE
================================================================ */

/* --------------------------------------------------------
 * SETTING
-------------------------------------------------------- */
@media all and (max-width: 1280px) {
	:root {
		--header-height: 60px;
		--header-top: 0;
		--area-padding: 80px;
	}
}
@media all and (max-width: 1025px) {
	:root {
		--area-padding: 40px;
	}
}
@media all and (max-width: 600px) {
	:root {
		--area-padding: 24px;
	}
}

/* --------------------------------------------------------
 * FONT SIZE
-------------------------------------------------------- */
@media all and (max-width: 1536px) {
	html { font-size: 0.6510vw; } /* 10px */
}
@media all and (max-width: 1280px) {
	html { font-size: 0.8594vw; } /* 11px */
}
@media all and (max-width: 800px) {
	html { font-size: 1.375vw; }
}
@media all and (max-width: 640px) {
	html { font-size: 1.7188vw; }
}
@media all and (max-width: 480px) {
	html { font-size: 2.2vw; }
}
@media all and (max-width: 412px) {
	html { font-size: 2.4272vw; }
}
@media all and (max-width: 390px) {
	html { font-size: 2.1795vw; } /* 8.5px */
}

/* --------------------------------------------------------
 * LAYOUT :: 공통 클래스
-------------------------------------------------------- */
@media all and (max-width: 1900px) {
	.area-wide { padding: 0 var(--area-padding); max-width: none; }
}
@media all and (max-width: 1660px) {
	.area-box {padding: 0 80px; max-width: none; }
	
}
@media all and (max-width: 1500px) {
	.area { padding: 0 var(--area-padding); max-width: none; }
}
@media all and (max-width: 1440px) {
	.area,
	.area-sub { padding: 0 40px; max-width: none;}
}
@media all and (max-width: 600px) {
	.area-box, .area, .area-sub {width: 100%; max-width: none; padding: 0 24px;}
}

/* --------------------------------------------------------
 * LAYOUT :: HEADER
-------------------------------------------------------- */
@media all and (max-width: 1660px) {
	#headerInner { padding: 0 40px; }
}
@media all and (max-width: 1366px) {
	#gnb > ul > li > a { font-size: 18px; padding: 0 40px; }
	#gnb > ul > li .gnb-2dep ul li a { font-size: 14px; }
}
@media all and (max-width: 1280px) {
	#headerInner {height: 60px;}
	#headerInnerWrap { position: absolute; top: 0; height: 60px;}
	#header .logo a {height: 32px;}
	/* #header.scrolled #headerInnerWrap { background-color: rgba(5,8,20,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 24px rgba(0,0,0,0.45); } */
	.header-lang-list { display: none; }
	#gnb { display: none; }
	.gnb-overlay-bg { display: none; }
}
@media all and (max-width: 1024px) {
	.header-util-box .user-info { display: none; }
	#headerInner {padding: 0 80px;}
}
@media all and (max-width: 800px) {
	#headerInner {padding: 0 40px;}
}
@media all and (max-width: 600px) {
	#headerInner {padding: 0 24px;}
}

/* --------------------------------------------------------
 * LAYOUT :: FOOTER
-------------------------------------------------------- */
@media all and (max-width: 1660px) {
	.to-top-btn,
	.footer-quick-menu { right: var(--area-padding); }
}
@media all and (max-width: 1280px) {
	.footer-inner-con { padding: 40px; }
	.footer-address-list { margin-left: 0; margin-bottom: 24px; }
	.footer-quick-menu a,
	.to-top-btn,
	.footer-quick-con .quick-menu-btn {width: 50px; height: 50px; line-height: 50px;}
	.footer-quick-menu a span {font-size: 16px; left: 50px;}
	.footer-quick-menu a:hover {padding: 0 110px 0 20px;}
	.footer-quick-menu a i,
	.to-top-btn i,
	.footer-quick-con .quick-menu-btn i {font-size: 20px; line-height: 1;}
	.foot-logo {padding-bottom: 24px; width: 180px;}
	.footer-address-list dl {line-height: 1.6; font-size: 14px;}
	.footer-address-list dl dt {width: 80px;}
	.partner-dropdown {max-width: 180px;}
	.foot-menu li a {font-size: 14px;}
	.footer-copyright {font-size: 12px;}
}
@media all and (max-width: 800px) {
	.footer-inner-con { display: block; }
	.to-top-btn { width: 48px; height: 48px; }
	.to-top-btn.bottom-fixed { bottom: 20px; }
	.to-top-btn.footer-fixed { bottom: 140px; }
	.to-top-btn i { line-height: 48px; font-size: 20px; }
	.footer-quick-menu a { width: 48px; height: 48px; line-height: 48px; border-radius: 48px; margin-bottom: 24px;}
	.footer-quick-menu a:before { border-radius: 48px; }
	.footer-quick-menu a i { line-height: 48px; font-size: 20px; }
	.footer-quick-menu a:hover { padding: 0 110px 0 20px; }
	.footer-quick-menu.bottom-fixed { bottom: 7rem; }
	.footer-quick-menu.footer-fixed { bottom: 100px; }
	.footer-left-con,
	.footer-right-con { width: 100%; float: none; justify-content: center; align-items: center; gap: 0; }
	.footer-inner-con { padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border-radius: 24px 24px 0 0; }
	.foot-logo { width: 160px; padding-bottom: 24px; margin: 0 auto; }
	.foot-logo svg { width: 158px; height: 46px; }
	.footer-address-info-box { margin-bottom: 24px; }
	.footer-address-list strong { font-size: 18px; margin-bottom: 1.40px; }
	.footer-right-middle {display: flex; justify-content: space-between; padding-top: 24px;}
	.footer-right-middle:after { display: none; }
	.foot-menu { float: none; margin-left: 0; margin-right: 30px; }
	.footer-copyright { margin-top: 16px; font-size: 13px; }
	.footer-quick-con {position: absolute; top: 24px; right: 24px; gap: 8px;}
	.footer-address-list dl dd {word-break: keep-all;}
}
@media all and (max-width: 500px) {
	.foot-logo {float: none; padding-bottom: 24px;}
	.footer-quick-con {top: auto; right: auto; left: 16px; bottom: 100px;}
	.partner-dropdown {max-width: 180px; margin-left: 40%;}
	.footer-address-list dl {display: flex; align-items: flex-start; justify-content: flex-start;}
	.footer-address-list dl + dl {margin-top: 8px;}
	.footer-address-list dl dt {width: 88px; flex-shrink: 0; font-size: 14px;}
	.footer-address-list dl dd {font-size: 14px;}
	.partner-dropdown-trigger .txt {font-size: 14px;}
	.footer-quick-con .quick-menu-btn {width: 48px; height: 48px;}
}


/* --------------------------------------------------------
 * LAYOUT :: SUB LAYOUT
-------------------------------------------------------- */
@media all and (max-width: 1280px) {
	.sub-wrap #mainVisual .main-visual-txt-item .main-visual-txt1 {font-size: 40px;}
	.sub-wrap #mainVisual .main-visual-txt-item .main-visual-txt2 {font-size: 16px;}
}
@media all and (max-width: 800px) {
}


/* ================================================================
 * MAIN RESPONSIVE
================================================================ */

/* --------------------------------------------------------
 * 메인 비주얼
-------------------------------------------------------- */
@media all and (max-width: 1367px) {
	.main-visual-txt-item .main-visual-txt1 b {font-size: 56px;}
	.main-visual-txt-item .main-visual-txt2 {font-size: 48px;}
}
@media all and (max-width: 1280px) {
	#mainVisual { height: 100vh; height: 100dvh; }
	.main-visual-txt-item .main-visual-txt1 { font-size: 40px; }
	.main-visual-txt-item .main-visual-txt2 { font-size: 36px; }
	.main-visual-txt-item .main-visual-txt3 {font-size: 16px; font-weight: 500;}	
}
@media all and (max-width: 800px) {
	#mainVisual { height: 100vh; height: 100dvh; }
	.main-visual-overlay { padding-bottom: 30px; }
	.main-visual-txt-item .main-visual-txt1 { font-size: 40px; }
	.main-visual-txt-item .main-visual-txt2 { font-size: 24px; word-break: keep-all; }
	.main-visual-pagination .swiper-pagination-bullet {width: 60px !important;}
	.main-visual-pc-img { display: none !important; }
	.main-visual-m-img { display: block !important; opacity: 1; }
}
@media all and (max-width: 600px) {
	.main-visual-txt-item .main-visual-txt1 { font-size: 28px; }
}


/* --------------------------------------------------------
 * 메인 컨텐츠 :: 공통 타이틀 / 버튼
-------------------------------------------------------- */
@media all and (max-width: 1367px) {
	.main-tit-box .main-tit {font-size: 40px;}	
}
@media all and (max-width: 1280px) {
	#mainContent > article {min-height: auto;}
	.main-tit-box .main-tit { font-size: 32px; margin-bottom: 16px;}
	.btn.more {height: 40px; line-height: 40px;}
}
@media all and (max-width: 800px) {
	.main-tit-box .main-tit { font-size: 24px; }
	.main-tit-box .main-sub-tit { font-size: 18px; }
	.main-btn { width: 21rem; height: 50px; margin-top: 24px; }
	.main-btn .txt { font-size: 16px; }
}
@media all and (max-width: 600px) {
	.main-tit-box .main-tit {font-size: 24px; line-height: 1.4;}
}


/* --------------------------------------------------------
 * 메인 컨텐츠1
-------------------------------------------------------- */
@media all and (max-width: 1660px) {
	.main-con01 { padding: 100px 100px 100px; }
	.main-con01-txt .text {font-size: 32px;}
}
@media all and (max-width: 1280px) {
	.main-con01-txt .text {font-size: 24px;}
}
@media all and (max-width: 800px) {
	.main-con01 { padding: 80px var(--area-padding); text-align: center; }
	.main-con01-txt .text { font-size: 18px; max-width: 80%; margin: 0 auto; }
	.main-con01 .main-sub-tit { font-size: 24px;}
}
@media all and (max-width: 600px) {
	.main-con01 .main-sub-tit {margin-bottom: 24px;}
}

/* --------------------------------------------------------
 * 메인 컨텐츠2 (Full-Stack AI)
-------------------------------------------------------- */
@media all and (max-width: 1280px) {
	.main-ai-list-con { width: 520px; height: 520px; }
	.main-ai-list {width: 80%; height: 80%;}
	.main-ai-txt-wrap { width: calc(100% - 520px); padding-left: 40px; box-sizing: border-box; }
	.main-ai-list-con:before { border-radius: 100px; }
	.main-btn {width: 100px; height: 40px; margin-top: 24px;}
	.main-btn .txt {font-size: 16px;}
	.main-tit-box .main-txt02 {font-size: 16px;}
	.main-tit-box .main-txt02 + .main-txt02 {margin-top: 0;}
	.main-tit-box .main-txt02 br {display: none;}
	.main-ai-list-con .inner-txt .tit {font-size: 32px;}
	.main-tit-box .main-sub-tit,
	.main-ai-list-con .inner-txt span {font-size: 18px;}
	.main-ai-list li strong {font-size: 14px;}
}
@media all and (max-width: 800px) {
	.main-con02-inner { flex-direction: column-reverse; align-items: start; justify-content: start; }
	.main-ai-list-con { width: 100%; height: 0; padding-top: 100%; max-width: 100%; margin-top: 24px;}
	.main-ai-list-con:before { border-radius: 24px; transform: scale(1.1);}
	.animated .main-ai-txt-wrap { width: 100%; min-width: 100%; padding-left: 0; margin-bottom: 3.50px; }
	.main-ai-txt-wrap .main-tit-box { text-align: center; }
	.main-ai-list { position: absolute; width: calc(100% - 160px); height: calc(100% - 160px); top: 80px; left: 80px; }
	.main-ai-list li.item01 { top: 20px; left: 20px; }
	.main-ai-list li.item02 { top: 20px; right: 20px; }
	.main-ai-list li.item03 { bottom: 20px; right: 20px; }
	.main-ai-list li.item04 { bottom: 20px; left: 20px; }
	.main-ai-list li .icon-box { width: 48px; height: 48px; margin: 0 auto; }
	.main-ai-list li .icon-box svg { max-width: 100%; max-height: 100%; }
	.main-ai-list li strong { font-size: 14px; }
	.main-btn {margin: 24px auto; width: 160px;}	
	.main-tit-box .main-txt02 {margin: 16px auto 0; width: 80%;}
	.main-tit-box .main-sub-tit {font-size: 16px; margin-bottom: 8px;}
}
@media all and (max-width: 640px) {
	.main-ai-list { width: calc(100% - 10.60px); height: calc(100% - 10.60px); top: 5.30px; left: 5.30px; }
	.main-ai-list li.item01 { top: 0; left: 0; }
	.main-ai-list li.item02 { top: 0; right: 0; }
	.main-ai-list li.item03 { bottom: 0; right: 0; }
	.main-ai-list li.item04 { bottom: 0; left: 0; }
	.main-tit-box .main-txt02 {word-break: keep-all; width: 100%;}
	.main-ai-txt-pc {height: 180px;}
	#mainContent5 .main-ai-txt-pc {width: 100%;}
}
@media all and (max-width: 480px) {
	.main-ai-list li {width: 120px; height: 120px;}
	.animated .main-ai-list-con:before {transform: scale(1.1);}
	/* .main-ai-list li.item01 { top: -1rem; left: -1rem; }
	.main-ai-list li.item02 { top: -1rem; right: -1rem; }
	.main-ai-list li.item03 { bottom: -1rem; right: -1rem; }
	.main-ai-list li.item04 { bottom: -1rem; left: -1rem; } */
}

/* --------------------------------------------------------
 * 메인 컨텐츠3
-------------------------------------------------------- */
@media all and (max-width: 1367px) {
	.main-con03 .left-con {width: 36%;}
	.main-con03 .right-con { width: 64%;}
}
@media all and (max-width: 1280px) {
	#mainContent3 { padding: 80px 0; }
	.main-con03 { display: block; }
	.main-con03 .left-con { width: 100%; margin-bottom: 40px; }
	.main-con03 .left-con .main-tit-box { width: 100%; text-align: center; }
	.main-con03 .left-con .main-btn {margin: 24px auto;}
	.main-con03 .right-con { width: 100%; }
	.main-con03-list li .icon-box {margin: 24px auto 0;}
}
@media all and (max-width: 800px) {
	#mainContent3 { padding: 80px 0; }
	.main-con03-list { gap: 16px; width: 100%; margin: 0 auto; }
	.main-con03-list li { position: relative; margin: 0; width: 100%; padding: 24px; border-radius: 24px; }
	.main-con03-list li .icon-box { position: absolute; left: auto; right: 24px; top: 24px; margin: 0; width: 60px; height: 60px; }
	.main-con03 .right-con li .tit-box strong {margin-top: 16px; font-size: 20px;}
	.main-con03-list li .tit-box p {margin-top: 16px; font-size: 14px;}
	.badge span, .badge-group .badge {font-size: 12px; padding: 6px 12px;}
}
@media all and (max-width: 600px) {
	#mainContent3 {padding: 40px 0;}
}

/* --------------------------------------------------------
 * 메인 컨텐츠4
-------------------------------------------------------- */
@media all and (max-width: 1367px) {
	.main-con04-box {padding: 40px;}
	.main-con04-box:before {border-radius: 24px;}
}
@media all and (max-width: 1280px) {
	#mainContent4 {padding: 80px 0;}
	.main-con04 .main-tit-box {margin-bottom: 40px;}
	.main-con04-box {padding: 40px;}
	.main-application-list {gap: 24px;}
	.main-application-list li p {text-align: center;}
	.main-con04-box .video-area {min-height: 47rem;}
}
@media all and (max-width: 1024px) {
	.main-con04-box .video-area {min-height: auto;}        
	.main-con04-box .video-area video {position: relative; width: 100%; height: 100%; left: 0; top: 0; right: 0;}
}
@media all and (max-width: 800px) {
	.main-con04-box {padding: 24px;;}
	.main-application-list {width: 100%; flex-wrap: wrap;}
	.main-con04-box.animated .main-application-list li {min-width: calc(50% - 13px);}
	.main-con04-box .video-area {border-radius: 24px;}
	.main-con04-box.animated:before {border-radius: 24px;}
}
@media all and (max-width: 500px) {
	#mainContent4 {padding: 40px 0;}
	.main-application-list {width: 100%; flex-wrap: wrap; flex-direction: column;}
	.main-con04-box.animated .main-application-list li {min-width: 100%;}
	.main-application-list li p {font-size: 16px;}
}
/* --------------------------------------------------------
 * 메인 컨텐츠5
-------------------------------------------------------- */
@media all and (max-width: 1367px) {
	#mainContent5 .main-tit-box .main-tit {font-size: 40px;}
}
@media all and (max-width: 1280px) {
	#mainContent5 {padding: 80px 0;}
	#mainContent5 .main-tit-box .main-tit {font-size: 32px;}
	#mainContent5 .main-tit-box .main-txt01 {font-size: 20px; margin-bottom: 8px;}
	#mainContent5 .main-tit-box .main-txt02 {font-size: 16px;}
}
@media all and (max-width: 800px) {
	#mainContent5 {padding: 40px 0;}
	#mainContent5 .main-tit-box .main-sub-tit {font-size: 16px; font-weight: 500;}
	#mainContent5 .main-tit-box .main-tit {font-size: 24px;}
	.main-ai-txt-pc {position: relative; height: 160px; margin: 16px auto; width: 100%;}
	.main-ai-txt-con {width: 100%;}
}


/* --------------------------------------------------------
 * 메인 컨텐츠6
-------------------------------------------------------- */
@media all and (max-width: 1367px) {
	.main-con06 .right-con {padding-left: 40px;}
}
@media all and (max-width: 1280px) {
	#mainContent6 {padding: 80px 0;}
	.main-con06 {flex-direction: column; align-items: center; justify-content: center; gap: 40px}
	.main-con06 .left-con,
	.main-con06 .right-con {width: 100%; text-align: center;}
	.main-con06 .right-con {padding-left: 0;}
	.main-con06 .main-btn {margin: 24px auto;}
	.main-con06-list li {min-height: 100%;}
	.main-con06-list li a .icon-box {position: relative; margin: 40px auto 0; bottom: auto; right: auto;}
}
@media all and (max-width: 800px) {
	.main-con06 .main-tit-box { text-align: center; }
	.main-con06-list {margin: 0 auto; flex-direction: column; gap: 24px}
	.main-con06-list li {width: 100%; margin: 0;}
	.main-con06-list li a {padding: 24px;}	
	.main-con06-list li a .tit-box p {font-size: 14px;}
	.main-con06-list li a .tit-box strong {font-size: 20px;}
}
@media all and (max-width: 600px) {
	#mainContent6 {padding: 40px 0;}
	.main-con06 {gap: 24px;}
	.main-con06-list li a .icon-box {margin: 24px auto 0;}
}	
/* --------------------------------------------------------
 * 메인 main-products
-------------------------------------------------------- */
@media all and (max-width: 1800px) {
	#mainContent > article.main-products {min-height: 1000px;}	
}
@media all and (max-width: 1367px) {
	.main-products__panel-title {font-size: 40px;}
	.main-products__cont-area .txt02 {width: 80%;}
	.main-products__btn-area {transform: translateY(-55%); padding: 0 40px 40px;}
	.main-products__panel .swiper-slide {width: 360px; height: 425px;}
	.main-products__card  {width: 100%; height: 100%;}
	.main-products__slider-wrap {margin-top: 40px;}
}
@media all and (max-width: 1280px) {
	#mainContent > article.main-products {min-height: 860px;}
	.main-products__btn-area {transform: none;  padding: 0 40px; position: relative; top: 80px; left: 0; right: 0; width: 100%;}
	.main-products__tab-list {flex-direction: row; align-items: center; justify-content: flex-start;}
	.main-products__tab-list li button {min-width: unset; font-size: 16px;}
	.main-products__panel-inner {margin: 100px 0 0 40px;}
	.main-products__panel-title {font-size: 32px;}
	.main-products__cont-area .txt02 {font-size: 16px;}
	.main-products__panel .swiper-slide {width: 300px; height: 355px;}
	.main-products__card-text {padding: 0;}
	.main-products__card {gap: 16px;}
}
@media all and (max-width: 900px) {
	#mainContent > article.main-products {min-height: 800px;}
}
@media all and (max-width: 800px) {
	.main-products__btn-area {top: 40px;}
	.main-products__panel-title {font-size: 24px;}
	.main-products__tab-list li button {font-size: 14px; padding: 8px 16px;}
	.main-products__panel-inner {margin: 60px 0 0 40px;}
	.main-products__cont-area .txt02 {font-size: 14px;}
	.btn.more {font-size: 16px; width: 140px;}
	.btn.more i {font-size: 16px;}
}
@media all and (max-width: 600px) {
	.main-products__card-text .card-title {font-size: 16px;}
	.main-products__panel-inner {margin: 40px 0 0 24px;}
	.main-products__cont-area .txt02 {width: 100%;}
	.main-products__btn-area {padding: 0 24px;}
	.main-products__tab-list li button {font-size: 13px; padding: 8px 12px;}
}
/* --------------------------------------------------------
 * 메인 컨텐츠7
-------------------------------------------------------- */
@media all and (max-width: 1280px) {
	#mainContent7 {padding: 80px 0;}
	.main-visual-txt-item .main-visual-txt1 b {font-size: 40px;}
	.main-con07 { display: block; }
	.main-con07 .left-con { width: 100%; margin-bottom: 50px; }
	.main-con07 .right-con { width: 100%; }
	.main-con07-tit-con .tit {font-size: 48px;}
	.main-con07-tit-con .txt-box .txt01 {font-size: 28px;}
	.main-con07-tit-con .txt-box .txt02 {font-size: 16px;}
	.main-con07-box {padding: 40px;}
	.custom-select-value {font-size: 14px;}
	.inquiry-form input[type="text"], .inquiry-form input[type="tel"], .inquiry-form input[type="email"], .inquiry-form select {font-size: 14px; height: 40px;}
	.inquiry-form textarea {font-size: 14px;}
	.inquiry-form label {font-size: 12px;}
	.submit-btn {height: 48px;}
	.submit-btn-inner {padding: 0 24px;}
	.submit-btn .txt {font-size: 14px;}
	.main-con07-tit-con {margin-bottom: 40px;}
	.main-con07-box:before {border-radius: 40px;}
	.privacy-check .checkmark {width: 16px; height: 16px;}
}
@media all and (max-width: 800px) {
	.main-con07-tit-con {display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;}
	.main-con07-tit-con .txt-box {width: 100%; padding: 0;}
	.main-con07-tit-con .txt-box:before,
	.main-con07-tit-con .txt-box:after {display: none;}
	.main-con07-tit-con .tit { font-size: 40px; width: 100%;}
	.main-con07-tit-con .txt-box .txt01 { font-size: 24px; }
	.main-con07-box { padding: 24px; }
	.inquiry-form .form-row {flex-direction: column;}
	.inquiry-form .form-bottom {flex-direction: column;}
	.main-con07-tit-con {margin-bottom: 24px;}
	.main-con07-box:before {border-radius: 24px;}	
}
@media all and (max-width: 600px) {
	#mainContent7 {padding: 40px 0;}
	.main-con07-tit-con .tit { font-size: 32px; }
	.main-con07-tit-con .txt-box .txt02 {margin: 16px auto; word-break: keep-all; font-size: 14px;}
	.main-con07-tit-con .txt-box .txt02 br {display: none;}
	.main-con07-tit-con {gap: 16px;}
	.main-con07-tit-con .txt-box .txt01 {font-size: 20px;}
	.privacy-check .txt {font-size: 14px;}
	.privacy-check {align-items: flex-start; line-height: 1.4;}
}

/* --------------------------------------------------------
 * 메인 컨텐츠8
-------------------------------------------------------- */
@media all and (max-width: 1280px) {
	#mainContent8 {padding: 80px 0; min-height: 40rem !important;}
	.main-partners-wrap {position: relative; padding: 0;}
	.main-con08 .main-tit-box {padding-bottom: 40px;}
}
@media all and (max-width: 900px) {
	.main-partners-list .partner-inner > span img {max-width: 160px; height: auto; max-height: 40px;}
}
@media all and (max-width: 800px) {
	#mainContent8 {padding: 40px 0; min-height: 320px !important;}
	.main-con08 .main-tit-box {padding-bottom: 24px;}
	.main-partners-list .partner-inner > span img {max-height: 36px;}
}

/* ================================================================
 * CONTENT RESPONSIVE
================================================================ */

/* --------------------------------------------------------
 * 메인 :: 헤더 진입 애니메이션 (min-width: 1281px)
-------------------------------------------------------- */
@media all and (min-width:1281px){
	.main-wrap #header{opacity:0; transform:translateY(-100%); transition:transform 0.8s ease, opacity 0.8s ease; transition-delay:0.2s;}
	.main-wrap #header.main-start{opacity:1; transform:translateY(0); }
}


/* --------------------------------------------------------
 * 제품 :: Highlights 스와이퍼
-------------------------------------------------------- */
@media (max-width: 1068px) {
	.section-title { font-size: 36px; }
	.highlights-swiper { padding: 0 40px !important; }
	.highlights-swiper .swiper-slide { width: 680px; height: 420px; }
}
@media (max-width: 734px) {
	.section-header { padding: 0 20px; flex-direction: column; gap: 12px; }
	.section-title { font-size: 28px; }
	.highlights-swiper { padding: 0 20px !important; }
	.highlights-swiper .swiper-slide { width: calc(100vw - 48px); height: 360px; }
	.card-caption { padding: 24px 28px; }
	.card-caption .headline { font-size: 18px; }
	.text-dotnav li button .dot-label { display: none; }
}
@media all and (max-width: 800px) {
	.highlights-section { padding-bottom: 40px; }
	.section-header { padding: 0 var(--area-padding); flex-direction: column; gap: 0; }
	.section-title { font-size: 32px; }
	.sub-txt { font-size: 16px; }
	.highlights-swiper { padding: 0 var(--area-padding) !important; }
	.highlights-swiper .swiper-slide { width: calc(100vw - (2 * var(--area-padding))); height: 30rem; border-radius: 24px; }
	.card-caption { padding: 24px; }
	.card-caption .headline { font-size: 14px; line-height: 1.5; }
	.card-caption .headline .highlight { font-size: 16px; margin-bottom: 6px; }
	.gallery-controls { margin-top: 20px; }
	.text-dotnav li button .dot-label { display: none; }
	.text-dotnav li button .dot-circle {width: 8px; height: 8px;}
	.play-pause-btn {margin-left: 0;}
}
@media all and (max-width: 640px) {
	.highlights-swiper .swiper-slide { height: 260px; }
	.card-caption { padding: 24px; }
	.card-caption.bottom-left {bottom: 24px; left: 24px;}
	.card-caption .headline { font-size: 14px; }
	.card-caption .headline .highlight { font-size: 18px; }
}
@media all and (max-width: 480px) {
	.highlights-swiper .swiper-slide { height: 220px; }
	.card-caption { padding: 16px; }
	.card-caption .headline { font-size: 13px; }
	.card-caption .headline .highlight { font-size: 16px; }
}

/* --------------------------------------------------------
 * 제품 :: Features 뷰어
-------------------------------------------------------- */
@media (max-width: 768px) {
	.viewer-card {grid-template-columns: 1fr;	grid-template-rows: 1fr auto; height: auto;}
	.image-panel {order: -1; min-height: 40rem; border-radius: 24px; overflow: hidden;}
	.image-panel img {border-radius: 24px;}
	.image-panel::before {display: none;}
	.feature-panel {padding: 0;}
	.nav-arrows {flex-direction: row; position: static; transform: none; justify-content: center; margin: 24px auto 16px;}
}

/* --------------------------------------------------------
 * sitemap
-------------------------------------------------------- */
/* 버튼 ripple 효과 (PC only) */
@media all and (min-width:801px) {
	.cm-fill-btn .cm-fill {
		position: absolute;
		display: block;
		width: 0px;
		height: 0px;
		transform: translate(-50%,-50%);
		border-radius: 50%;
		background: #fff;
		transition: width 0.5s ease-out, height 0.5s ease-out;
	}
	.cm-fill-btn:hover .cm-fill {
		width: 40vw;
		height: 40vw;
		transition: width 0.5s ease-in 0.1s, height 0.5s ease-in 0.1s;
	}
}

/* 사이트맵 hover (포인터 디바이스) */
@media (hover: hover) {	
	.sitemap-wrapper-style > ul > li .sitemap-2dep:hover a {opacity: 0.4;}
	.sitemap-wrapper-style > ul > li .sitemap-2dep:hover a:hover {opacity: 1.0; color: #fff;}	
}
@media all and (max-width:1367px) {
	.sitemap-wrapper-style > ul > li > h2 {font-size: 36px;}
}
@media all and (max-width: 1280px) {
	.sitemap-line-btn {width: 40px; height: 40px;}
	.sitemap-line-btn .dot {margin: -20px 0 0 -20px;}
	.sitemap-line-btn .dot i {font-size: 40px;}
	.sitemap-wrapper-style > ul {justify-content: center; gap: 80px;}
	.sitemap-wrapper-style > ul > li > h2 {font-size: 28px;}
	.sitemap-wrapper-style > ul > li .sitemap-2dep a {font-size: 16px;}
}
/* 사이트맵 모바일 1024px 이하 */
@media all and (max-width: 1024px) {
	.sitemap-inner {padding: 2em 0; vertical-align: top;}
	.sitemap-wrapper-style { margin-top: 4em; }
	.sitemap-wrapper-style > ul { display: block; }
	.sitemap-wrapper-style > ul > li { float: none; display: block; width: auto; padding: 2% 0; margin-bottom: 0; text-align: left; border-left: none; border-top: 1px solid rgba(255,255,255,0.1); }
	.sitemap-wrapper-style > ul > li:last-child { border-right: none; }
	.sitemap-wrapper-style > ul > li:first-child { border-top: none; }
	.sitemap-wrapper-style > ul > li > h2 { min-height: auto; font-size: 24px; margin-bottom: 8px;}
	.sitemap-wrapper-style > ul > li .sitemap-2dep { overflow: hidden; margin: 0 -1%; padding: 0; }
	.sitemap-wrapper-style > ul > li .sitemap-2dep li { float: left; position: relative; width: 31.33%; margin: 0 1%; word-break: keep-all; }
	.sitemap-wrapper-style > ul > li .sitemap-2dep li a { font-size: 16px; }
	.sitemap-wrapper-style > ul > li .sitemap-2dep li:before { position: absolute; top: 0px; left: 0; bottom: 0px; width: 1px; background-color: #eee; content: ""; display: none; }
	.sitemap-wrapper-style > ul > li .sitemap-2dep li:nth-child(3n+1) { clear: both; }
	.sitemap-wrapper-style > ul > li .sitemap-2dep .gnb-3dep li { width: 98%; }	
	.sitemap-login-box { display: inline-block; padding: 0;}
}
/* 사이트맵 모바일 480px 이하 */
@media all and (max-width: 480px) {
	.sitemap-wrapper-style > ul > li > h2 { font-size: 28px; }
	.sitemap-wrapper-style > ul > li .sitemap-2dep a { font-size: 18px; }
	.sitemap-wrapper-style > ul > li .sitemap-2dep li { width: 48%; }
	.sitemap-wrapper-style > ul > li .sitemap-2dep li:nth-child(3n+1) { clear: none; }
	.sitemap-wrapper-style > ul > li .sitemap-2dep li:nth-child(odd) { clear: both; }
	.sitemap-line-btn { width: 40px; height: 40px; }
	.sitemap-line-btn .dot { margin: -20px 0 0 -20px; }
	.sitemap-line-btn .dot i { font-size: 40px; }
}

/* --------------------------------------------------------
 * .privacy-modal-
-------------------------------------------------------- */
@media all and (max-width: 640px) {
	.privacy-modal-header {padding: 24px 24px 0;}
	.privacy-modal-body {margin: 24px;}
	.privacy-modal-title {font-size: 20px;}
	.privacy-modal-footer {padding: 0 24px 24px;}
}

/* --------------------------------------------------------
 * about
-------------------------------------------------------- */
@media all and (max-width: 1660px) {
	.about .company-section,
	.about .values-section  {padding: 20rem 80px;}
	.about .company-list {gap: 24px;}
	.about .company-list li {width: 200px; height: 200px; max-width: 200px;}
}
@media all and (max-width: 1280px) {
	.about .company-section,
	.about .values-section,
	.philosophy-section, 
	.business-section  {padding: 100px 80px;}
	.philosophy-section .area-box {padding: 0;}
	.tit-box .tit {font-size: 3.6rem;}
	.tit-box .txt {font-size: 16px; margin-top: 16px;}
	.company-body {margin-top: 40px;}
	.about .company-list {justify-content: center; gap: 16px; padding: 0;}
	.company-list li .text-box {font-size: 16px; text-align: center; line-height: 1.2;}
	.about .company-list li {width: 160px; height: 160px; max-width: 160px; gap: 16px}
	.company-body.animated .company-list li {min-width: 160px;}
	.company-list li .icon-box {width: 56px;}
	.philosophy-item, .business-item {padding: 24px 24px 32px;}
	.philosophy-img, .business-img {margin-bottom: 24px; border-radius: 24px;}
	.philosophy-txt, .business-txt {font-size: 16px; margin-bottom: 24px;}
	.badge span, .badge-group .badge {padding: 4px 12px; font-size: 13px;}
	.values-list.animated .value-card {padding: 32px;}
	.values-list.animated .value-card .value-tit {font-size: 20px;}
	.values-list.animated .value-card .value-desc {font-size: 16px;}
	.location-info {top: auto; left: 40px; right: 40px; bottom: 80px; flex-direction: row; flex-wrap: wrap; padding: 24px;}
	.location-info .location-info-item {flex: 1; max-width: 25%; gap: 16px;}
	.location-info-txt dd {white-space: unset;}
	.location-con {min-height: 700px;}
	.location-map {min-height: 100%;}
}
@media all and (max-width: 1025px) {
	.about .company-section, .about .values-section, .philosophy-section, .business-section {padding: 80px 40px;}
	.about .company-body {display: flex; align-items: center; justify-content: center;}
	.about .company-list {flex-wrap: wrap; height: auto;}
	.values-list {grid-template-columns: repeat(2, 1fr);}
	.location-info-txt dt {font-size: 12px;}
	.location-info-txt dd {font-size: 14px;}
	.about .company-list li {width: 120px; height: 120px; max-width: 120px;}
	.company-body.animated .company-list li {min-width: 120px;}
	.sub-wrap #mainVisual .main-visual-txt-item .main-visual-txt1 {font-size: 36px;}
}
@media all and (max-width: 800px) {
	.location-info .location-info-item {max-width: 50%; min-width: calc(50% - 16px);}
	.philosophy-con {grid-template-columns: 1fr; gap: 16px;}
	.location-info-txt dd span {margin-top: 0; }
}
@media all and (max-width: 600px) {
	.about .company-section, .about .values-section, .philosophy-section, .business-section {padding: 40px 24px;}
	.values-list {grid-template-columns: 1fr;}
	.location-info {display: none;}
	.location-con {min-height: 500px;}
	.values-list.animated .value-card .value-tit {font-size: 18px;}
	.values-list.animated .value-card .value-desc {font-size: 14px;}
	.philosophy-txt, .business-txt {font-size: 14px; margin-bottom: 16px;}
	.company-list li .text-box {font-size: 14px;}
	.about .company-list li {gap:8px;}
	.sub-wrap #mainVisual .main-visual-txt-item .main-visual-txt1 {font-size: 24px;}
	.sub-wrap #mainVisual .main-visual-txt-item .main-visual-txt2 {font-size: 14px;}
	.tit-box .txt {font-size: 14px;}
}

/* --------------------------------------------------------
 * solutions
-------------------------------------------------------- */
@media all and (max-width: 1600px) {
	.container-start {margin-left: 80px;}
	.solutions .solution {padding: 20rem 80px;}
	.partner-txt-swiper {width: 100%;}
	.partner-txt-swiper .swiper-slide {padding-right: 40px;}
	.partner-swiper-wrap {gap: 60px; margin-top: 40px; padding: 0; width: 100%;}
	.solution.section04 .tit-box.area-box {padding: 0;}
}
@media all and (max-width: 1360px) {
	.solutions .solution.section01 ul {flex-wrap: wrap; gap: 40px; justify-content: flex-start;}
	.solutions .solution.section01 ul li {min-width: calc(50% - 20px);}
}
@media all and (max-width: 1280px) {
	.solutions .solution {padding: 100px 80px;}
	.solution.section02.bg-blue {padding: 100px 0;}
	.solutions .solution.section01 ul li .txt-area {padding: 24px;}
	.service-process .tit-box {margin-bottom: 40px;}
	.process-list .process-item {padding: 24px;}
	.partner-cta .main-btn {width: 200px;}
}
@media all and (max-width: 1024px) {
	.solution-row {grid-template-columns: 1fr; gap: 32px;}
	.solution-row-reverse .solution-media {order: 1;}
	.solution-row-reverse .solution-body {order: 2;}
	.solution-tagline {font-size: 24px;}
	.solution-industry-list {grid-template-columns: repeat(2, 1fr);}
}
@media all and (max-width: 800px) {
	.solutions {padding: 0;}
	.solution-section {padding: 60px 0;}
	.solution-industry-section {padding: 40px 24px; border-radius: 30px;}
	.solution-cta-btns {flex-direction: column; align-items: center;}
	.solution-industry-swiper .swiper-slide {width: 78vw;}
	.solution-industry-swiper .solution-industry-item {padding: 32px 24px;}
	.solution-industry-nav {justify-content: center;}

	.partner-swiper-wrap {flex-direction: column; gap: 32px;}
	.partner-swiper-media {flex-basis: auto; max-width: 100%; width: 100%;}

	.why-vts-wrap {flex-direction: column; gap: 48px; min-height: 0;}
	.why-vts-circle {display: none;}
	.why-vts-col,
	.why-vts-col-right {margin-top: 0; max-width: 100%; text-align: center; align-items: center;}
}
@media all and (max-width: 500px) {
	.solution-industry-list {grid-template-columns: repeat(1, 1fr);}
	.solution-tagline {font-size: 20px;}
}

/* --------------------------------------------------------
 * Support :: Media 탭 + Swiper
-------------------------------------------------------- */
@media all and (max-width: 1280px) {
	.section01 .tab_btn {margin-top: 24px;}
	.section01 .tab_btn .scroll ul li button {height: 40px; padding: 0 24px; font-size: 1.50px;}
	.section01 .tab_con {margin-top: 32px;}
	.section01 .slider_wrap .swiper-slide {width: 260px; margin-right: 16px;}
	.section01 .slider_wrap .swiper-slide:has(.download-item) {width: 340px;}
	.download-item .text-area {padding: 0 24px 24px;}
	.download-item h4 {font-size: 20px;}
}
@media all and (max-width: 800px) {
	.section01 .slider_wrap .swiper-slide {width: 220px; margin-right: 12px;}
	.section01 .slider_wrap .swiper-slide a::before {width: 40px; height: 40px;}
	.section01 .slider_wrap .swiper-slide a::after {border-width: 0.7rem 0 0.7rem 1.1rem;}
	.section01 .slider_wrap .swiper-slide:has(.download-item) {width: 27rem;}
	.download-item .img-area {padding: 24px;}
	.download-item .img-area::before {font-size: 36px;}
	.download-item .item-info {flex-direction: column; align-items: flex-start; gap: 12px;}
	.download-item .btn-download {width: 100%; justify-content: center;}
}


/* References :: 연도별 탭/카드 */
@media all and (max-width: 1024px) {
	.ref-card-grid {grid-template-columns: repeat(2, 1fr);}
}
@media all and (max-width: 800px) {
	.ref-year-tabs {gap: 8px;}
	.ref-year-tab {height: 48px; padding: 0 24px; font-size: 14px;}
	.ref-card-grid {grid-template-columns: repeat(1, 1fr); gap: 16px;}
	.ref-card {padding: 32px 24px;}
}

/* --------------------------------------------------------
 * Product Gallery
-------------------------------------------------------- */
@media all and (max-width: 1280px) {
	.pg-layout { gap: 40px; }
	.pg-sidebar { width: 240px; }
}
@media all and (max-width: 1024px) {
	.pg-layout { flex-direction: column; }
	.pg-sidebar { width: 100%; position: static; }
	.pg-cat-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
	.pg-cat-list li button { padding: 0.60px 16px; border: 1px solid #e1e5ea; border-radius: 100px; }
	.pg-cat-list li.active button { background: var(--main-gradient); border-color: transparent; color: #fff; }
	.pg-featured-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.pg-sidebar-section:last-child { border-bottom: none; }
}
@media all and (max-width: 800px) {
	.pg-grid { grid-template-columns: 1fr; }
	.pg-filter-wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
	.product-gallery-page { padding: 40px 0 100px; }
	.pg-featured-list { grid-template-columns: 1fr; }
}