/* include 공통 CSS */

/************************* 공통 시작*************************/
.point {color: var(--main-color);}
.inner {width: 100%; max-width:var(--inner-width); margin: 0 auto; --inner-width:1280px;}
.inner--fill {max-width:none; padding-right: calc((100% - var(--inner-width)) / 2); padding-left: calc((100% - var(--inner-width)) / 2);}
@media(max-width:1320px){.inner {padding: 0 4%;}}

.sub-container {min-height:5rem; overflow: hidden; letter-spacing:-0.03125em;}

.sub-page {padding-top: 6.7em;}
.sub-page__sec {padding-top: 12.6em;}
.sub-page__sec:first-child {padding-top: 0;}
.sub-page__int {padding-bottom: 2.4em; border-bottom:1px solid #ccc;}
.sub-page__int--noline {padding-bottom: 0; border:None;}

.dot-list {padding:0 0.5em;}
.dot-list__item {position: relative; display: flex; flex-wrap:wrap; font-size: 1.25em; color: #595757; line-height: 1.5;}
.dot-list__item:before {content:'•'; display: inline-block; margin-right: 0.25em;}
.dot-list__cate {font-weight: 700;}
.dot-list__desc {flex:1;}
@media(max-width:768px){.dot-list__cate + .dot-list__desc {flex:none; width: 100%;}}
/************************* 공통 끝 *************************/

/************************* header_inc 시작*************************/
.header {padding-top: 3.875em; font-size: var(--fz);}
.header__fix {position: fixed; left:0; top:0; z-index: 100; width:100%; height: 3.875em; background-color: var(--white); --menu-height:0; transition: 0.15s ease-in-out all;}
.header__fix:after {position: absolute; content:''; top: 100%; left: 0; z-index: -1; width: 100%; height: var(--menu-height); background-color: var(--white); transition: 0.15s ease-in-out all;}
.header__inner {display: flex; justify-content: space-between; align-items: center; height: inherit;}
.header__ctrl {display: flex; align-items: center; height: inherit;}

.header-home__logo {width: 11.25em; height: 2em; transition: 0.15s ease-in-out all;}

.header-navi {position: relative; height: inherit; transition: .15s ease-in-out all;}
.header-navi__m-list {display: flex; height: inherit; gap: 1.75em;}
.header-navi__m-item {height: inherit;}
.header-navi__m-item:last-child {margin-right: 0;}
.header-navi__m-btn {display: flex; align-items: center; height: inherit; font-size: 1em; font-weight: 500; color: var(--main-color); letter-spacing: -0.5px;}
.header-navi__m-item {position: relative;}
.header-navi__s-wrap {position: absolute; top: 100%; left: 50%; min-width: 150%; transform:translateX(-50%);}
.header-navi__s-list {transition: .15s ease-in-out all;}
.header-navi__s-btn {display: block;}
@media(max-width:1080px){.header-navi {display: none;}}

.header-sch {margin-left: 2.5em;}
.header-sch__img {width: 1.125em; vertical-align: middle;}

.header-drawer {position: relative; margin-left: 1em;}
.header-drawer__btn {position: relative; width: 1.125em; height: 1.125em; z-index: 0; transition:.15s ease-in-out all;}
.header-drawer__dot {position: absolute; width: 0.375em; height: 0.375em; background-color: var(--main-color); transition:.15s ease-in-out all;}
.header-drawer__dot:first-child {top: 0; left: 0;}
.header-drawer__dot:nth-child(2) {top: 0; right: 0;}
.header-drawer__dot:nth-child(3) {bottom: 0; left: 0;}
.header-drawer__dot:nth-child(4) {right: 0; bottom: 0;}
@media(hover:hover){
	.header-drawer__btn:hover .header-drawer__line--top{left: -0.25em;}
	.header-drawer__btn:hover .header-drawer__line--middle{left: 0.25em;}
	.header-drawer__btn:hover .header-drawer__line--bottom{left: -0.125em;}
}

.header__fix.enter {background-color: var(--white);}
.header__fix.enter .header-navi__m-btn {color: var(--main-color);}
.header__fix.enter .header-navi__m-btn--crt {color: var(--main-color);}
.header__fix.enter .header-navi__s-list {background-color: var(--white);}
.header__fix.enter .header-navi__s-btn {color: var(--main-black);}
.header__fix.enter .header-navi__s-btn--crt {color: var(--main-color);}
.header__fix.enter .header-navi__c-btn {color: var(--main-gray);}
.header__fix.enter .header-navi__c-btn--crt {color: var(--main-color);}
.header__fix.enter .header-lang__btn {color: var(--main-black);}
.header__fix.enter .header-lang__btn.on {color: var(--main-color);}
.header__fix.enter .header-lang__list {background-color: var(--white);}
.header__fix.enter .header-lang__link {color: var(--main-black);}
.header__fix.enter .header-login__link {color: var(--main-black);}
.header__fix.enter .header-drawer__line {background-color: var(--main-black);}
@media(hover:hover){.header__fix.enter .header-lang__link:hover {color: var(--main-color);}}

/************************* header_inc 끝*************************/

/************************* sub-dropdown 시작 *************************/
.drop-menu {border-bottom:1px solid var(--main-gray);}
.drop-menu__inner {display: flex; border-right:1px solid var(--main-gray); border-left:1px solid var(--main-gray);}
.drop-menu__home {display: inline-flex; min-width: 3em; min-height: 3em; height: inherit; justify-content: center; align-items: center;}
.drop-menu__icon {width: 1.75em;}
.drop-menu__wrap {position: relative; z-index: 0; border-left:1px solid var(--main-gray);}
.drop-menu__wrap:last-child {border-right:1px solid var(--main-gray); }
.drop-menu__btn {display: flex; justify-content: space-between; align-items: center; min-width:15em; height: 100%; padding:0 0.15rem; font-weight: 500; transition:.15s ease-in-out all;}
.drop-menu__tit {display: block; font-size: 1.125em;}
.drop-menu__arr {margin-left: 1.5em; width: 0.75em; transition:.15s ease-in-out all;}
.drop-menu__navi {position: absolute; top: 100%; left: -1px; z-index: 10; width:calc(100% + 2px);  height: 0; overflow: hidden;}
.drop-menu__list {background-color: var(--white); border:1px solid var(--main-gray);}
.drop-menu__link {display: block; padding:0.5em 0.15rem; transition:.15s ease-in-out all;}
@media(hover:hover){.drop-menu__link:hover {background-color: var(--main-color); color: var(--white);}}

.drop-menu__btn.on {background-color: var(--main-color); color: var(--white);}
.drop-menu__btn.on .drop-menu__arr {filter:brightness(0) invert(1); transform:rotate(180deg);}

/************************* dropdown 끝 *************************/
/************************* tabmenu 시작 *************************/
.tab-menu {border-bottom:1px solid var(--main-gray)}
.tab-menu__list {display: flex;}
.tab-menu__item {flex:1;}
.tab-menu__btn {padding:1.5em 0.75em; display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; transition: .15s ease-in-out all;}
.tab-menu__btn--crt {background-color: var(--main-color);}
.tab-menu__btn--crt,
.tab-menu__btn--crt:link,
.tab-menu__btn--crt:visited {color: var(--white);}
@media(hover:hover){.tab-menu__btn:hover {background-color: var(--main-color); color: var(--white);}}
/************************* sub-tabmenu 끝 *************************/

/************************* depth3 시작 *************************/
.depth3__list {display: flex; flex-flow: row wrap;}
.depth3__item {flex:1;}
.depth3__item:last-child {border:0;}
.depth3__btn {padding:1.5em 0.75em; width: 100%; height: 100%; display: flex; align-items: center;justify-content: center; border-bottom:2px solid var(--main-gray); transition:.15s ease all;}
.depth3__btn--crt {border-color:var(--main-color);}
@media(hover:hover){.depth3__btn:hover {border-color:var(--main-color);}}
/************************* depth3 끝 *************************/


/************************* footer_inc 시작 *************************/

.footer {display: flex; justify-content: flex-end; flex-direction:column; width: 100%;  font-size: calc(var(--fz) * 0.776);}
.footer__inner {display: flex; justify-content: space-between; flex-wrap:wrap;}
.footer__inner--banner {padding-top: 2em; padding-bottom: 2em; 	align-items: center; min-height: 21.75em;}
.footer__inner--link {align-items: center;}
.footer__inner--adm {padding-top: 0.8em; padding-bottom: 2.9em; border-top: 1px solid #999}

.footer-banner {margin-bottom: 3.5em; background:url('./img/footer_bg.png') no-repeat center / cover}
.footer-banner__txt {font-size: 3.4375em; font-weight: 700; color: #fff; line-height: 1.2909;}
.footer-banner__link {display: flex; justify-content: center; align-items: center; width: 10.2795em; height: 1.9945em; font-size: 2.125em; font-weight: 700; text-align: center; background-color: #fff; border-radius: 2em; transition: .15s ease-in-out all;}
.footer-banner__link,
.footer-banner__link:visited,
.footer-banner__link:link {color: var(--main-color);}
.footer-banner__link img {margin-left: 0.4em; transition: .15s ease-in-out all;}
@media(hover:hover){
	.footer-banner__link:hover {background-color: var(--main-color); color: #fff;}
	.footer-banner__link:hover img {filter:brightness(0) invert(1)}
}
@media(max-width:500px){
	.footer-banner__txt {margin-bottom: 0.5em;}
	.footer-banner__txt br {display: none;}
}

.footer-link {margin-top: 3.5em; margin-bottom: 1.5em;}
.footer-link__home {display: block;}
.footer-link__logo {width: 22.1875em;}
.footer-link__list {display: flex; flex-wrap:wrap; gap:0.5625em;}

.footer-info {padding-bottom: 3.9em;}
.footer-info__item {display: flex; flex-wrap: wrap; margin-bottom: 0.35em;}
.footer-info__item:last-child {margin-bottom: 0;}
.footer-info__cate {min-width: 7em; font-weight: 700; color: var(--main-color);}
.footer-info__desc {flex:1;color: #656565; line-height: 1.375; letter-spacing: -0.03em;}
.footer-info__navi {flex:1; padding-left: 12em;}
.footer-info__m-list {display: grid; grid-template-columns: repeat(4,1fr); gap:2.6em}
.footer-info__m-item {display: flex; flex-direction: column;}
.footer-info__m-item:last-child {margin-right: 0;}
.footer-info__m-btn {font-size: 1.25em; font-weight: 700;}
.footer-info__m-btn br {display: none;}
.footer-info__m-btn,
.footer-info__m-btn:link,
.footer-info__m-btn:visited {color: var(--main-color); font-weight: 700;}
.footer-info__s-wrap {padding-top: 1em;}
.footer-info__s-item {margin-bottom: 0.75em;}
.footer-info__s-item:last-child {margin-bottom: 0;}
.footer-info__s-btn {display: inline-flex; font-size: 1em; letter-spacing: -0.03em; white-space:nowrap;}
.footer-info__s-btn,
.footer-info__s-btn:link,
.footer-info__s-btn:visited {color: #474747;}
.footer-info__s-btn:before {content:''; margin-top: 0.2em; display: inline-block; width: 0; height: 1em; background: url('./img/ft_arr.png') no-repeat center / cover; transition: .15s ease-in-out all;}
.footer-info__s-btn br {display: none;}
@media(hover:hover){
	.footer-info__s-btn:hover:before {width: 1em; margin-right: 0.5em;}
}
@media(max-width:1080px){
	.footer-info__detail {width: 100%;}
	.footer-info__navi {margin-top: 2em; padding-left: 0; width: 100%;}
	.footer-info__m-list {display: flex; justify-content: space-between; gap:1.5em;}
	.footer-info__m-item {margin-right: 0;}
}
@media(max-width:500px){
	.footer-info__m-list {flex-wrap:wrap;}
	.footer-info__m-item {flex-direction:row; flex-wrap: wrap; width: 100%;}
	.footer-info__m-btn {font-size: 1em; min-width: 7em;}
	.footer-info__m-btn br {display: block;}
	.footer-info__s-wrap {padding-top: 0; flex:1;}
	.footer-info__s-list {display: flex; flex-wrap:wrap; gap:0.5em 1.5em;}
	.footer-info__s-item {margin-bottom: 0;}
	.footer-info__s-btn br {display: none;}
}

.footer-adm {}
.footer-adm__inner {}
.footer-adm__cprt {color: #808080;} 
.footer-adm__link,
.footer-adm__link:visited,
.footer-adm__link:link {color: #808080;}
.footer-adm__link:after {display: inline-block; margin:0 1em 0 0.9em; content:""; width: 1px; height: 1em; background-color: #808080; vertical-align: middle;}
.footer-adm__link:last-child:after {display: none;}
/************************* footer_inc 끝 *************************/


/************************* split-text *************************/
.split-text__word {font-size: inherit;}
.split-text__letter {display: inline-block; font-size: inherit;}
.split-text--no-delay .split-text__letter {transition-delay:0s !important; animation-delay:0s !important;}

/************************* footer 수정 (한글화) *************************/
.footer-adm__link--bold {font-weight: 600; color: var(--gray02);}

/************************* footer 수정 끝 *************************/


/************************* 서브페이지 공통 컴포넌트 시작 *************************/

/* 섹션 기본 */
.sp-sec {padding:5em 0;}
.sp-sec strong {font-weight:600;}

/* 섹션 타이틀 (2em) */
.sp-sec-title {font-size:2em; font-weight:700; color:var(--gray01); text-align:center; margin-bottom:1.5em;}
.sp-sec-title--sm {margin-bottom:0.75em;}
.sp-sec-title--ssm {margin-bottom:0.625em;}

/* Hero 섹션 */
.sp-hero {text-align:center; padding:6.25em 0 5em;}
.sp-hero--partner {padding:6.25em 0;}
.sp-hero__label {display:inline-flex; align-items:center; gap:0.5em; border:1px solid var(--main-color); background:var(--bg01); border-radius:0.3125em; padding:0.6em 1.3em 0.6em 1.1em; font-size:0.875em; font-weight:400; color:var(--main-color); text-transform:uppercase; margin-bottom:2.25em;}
.sp-hero__label--white {background:var(--white);}
.sp-hero__label .dot {width:0.2858em; height:0.2858em; border-radius:50%; background:var(--main-color);}
.sp-hero__title {font-size:2.5em; font-weight:700; color:var(--gray01); margin-bottom:0.35em;}
.sp-hero__title-lg {margin-bottom: 0.7em;}
.sp-hero__title--gap-lg {margin-bottom:1.2em;}
.sp-hero__highlight {background:var(--bg03); border-radius:0.625em; padding:1.25em; max-width:1280px; margin:0 auto 1.75em;}
.sp-hero__highlight p {font-size:1.125em; font-weight:600; color:var(--main-color); margin:0;}
.sp-hero__desc {font-size:1em; font-weight:400; color:var(--gray02); line-height:1.8; max-width:1280px; margin:0 auto;}
.sp-hero__desc--center {text-align:center; margin-bottom:3em;}

/* 배너 섹션 (배경이미지에 어두운 오버레이 합성 포함 → CSS 오버레이 불필요) */
.sp-banner {position:relative; display:flex; align-items:center; justify-content:center; padding:0; background-size:cover; background-position:center; background-repeat:no-repeat;}
.sp-banner__content {position:relative; z-index:1; text-align:center; max-width:1280px; margin:0 auto;}
.sp-banner__title {font-size:2em; font-weight:700; color:var(--white); margin-bottom:0.75em;}
.sp-banner__desc {font-size:1em; font-weight:400; color:var(--white); line-height:1.8;}

/* 세로 카드 (일러스트 위 + 텍스트 아래) - 카드 패딩 + 자연 flex flow + margin-top 갭 패턴 */
.sp-vcard-row {display:flex; justify-content:center; gap:1em;}
.sp-vcard {background:var(--bg03); border-radius:0.625em; box-shadow:var(--shadow-card-dark); padding:2.5em; display:flex; flex-direction:column; overflow:hidden;}
.sp-vcard__img {width:100%; display:flex; align-items:center; justify-content:center;}
.sp-vcard__img img {width:auto; height:auto; mix-blend-mode:darken;}
.sp-vcard__body {margin-top:2.5em;}
.sp-vcard__body h3 {font-size:1.125em; font-weight:600; color:var(--gray01); line-height:1.4; margin:0 0 0.75em;}
.sp-vcard__body p {font-size:1em; font-weight:400; color:var(--gray02); line-height:1.8; margin:0;}
.sp-vcard__body ul {padding-left:1.5em; margin:0;}
.sp-vcard__body li {font-size:1em; font-weight:400; color:var(--gray02); line-height:1.8; list-style:disc;}

/* sp-vcard 공통 modifier (폭/패딩/배경/그림자/중앙정렬) */
.sp-vcard--3col {width:32.5%; padding:3.125%;}
.sp-vcard--2col {width:49.4%; padding:3.125%;}
.sp-vcard--center {text-align:center;}
.sp-vcard--center .sp-vcard__img img {width:100%; height:auto;}
.sp-vcard--center .sp-vcard__body {margin-top:2.5em;}
.sp-vcard--bg01 {background:var(--bg01);}
.sp-vcard--bg02 {background:var(--bg02);}
.sp-vcard--bg03 {background:var(--bg03);}
.sp-vcard--shadow-dark {box-shadow:var(--shadow-card-dark);}
.sp-vcard--shadow-blue {box-shadow:var(--shadow-card-blue);}

/* 섹션 서브설명 공통 */
.sp-sec-subdesc {font-size:1em; color:var(--gray02); text-align:center; margin:0 auto 3em;}

@media(max-width:768px){.sp-vcard--3col, .sp-vcard--2col {width:100%;}}

/* 가로 카드 (아이콘 왼쪽 + 텍스트 오른쪽) */
.sp-hcard-list {display:flex; flex-direction:column; gap:1em;}
.sp-hcard {border-radius:0.625em; display:flex; align-items:center; overflow:hidden;}
.sp-hcard__icon {width:12.5em; min-width:12.5em; height:100%; overflow:hidden; margin-left:1.25em;}
.sp-hcard__icon img {width:100%; height:auto; mix-blend-mode:darken;}
.sp-hcard__body {padding:0 2.5em; flex:1; display:flex; flex-direction:column; justify-content:center;}
.sp-hcard__body h3 {font-size:1.125em; font-weight:600; color:var(--gray01); line-height:1.4; margin:0 0 0.75em;}
.sp-hcard__body p {font-size:1em; font-weight:400; color:var(--gray02); line-height:1.8; margin:0;}
.sp-hcard__body ul {padding-left:1.5em; margin:0;}
.sp-hcard__body li {font-size:1em; font-weight:400; color:var(--gray02); line-height:1.8; list-style:disc;}


/* 4개 타겟 페이지(zia_backup/zia_migration/zia_disaster_recovery/serverless_disaster_recovery) 공통 반응형 — 2026-04-21 */
@media(max-width:1080px){
	.sp-hero {padding:4em 0 3em;}
	.sp-banner {padding:4em 4%;}
	.sp-vcard-row {flex-wrap:wrap;}
	.sp-hcard {align-items:flex-start;}
}
@media(max-width:768px){
	.sp-sec {padding:3.5em 0;}
	.sp-hero {padding:3em 0 2.5em;}
	.sp-hero__title {font-size:1.875em;}
	.sp-hero__highlight {padding:1em;}
	.sp-hero__highlight p {font-size:1em;}
	.sp-sec-title {font-size:1.75em; margin-bottom:1em;}
	.sp-banner {padding:3em 4%;}
	.sp-banner__title {font-size:1.625em;}
	.sp-vcard {padding:2em;}
	.sp-hcard {flex-direction:column; text-align:center;}
	.sp-hcard__icon {min-width:0; height:auto; margin:1.5em auto 0;}
	.sp-hcard__body {padding:1.5em 1.75em 2em; width:100%;}
	.sp-hcard__body ul {text-align:left;}
}
@media(max-width:500px){
	.sp-sec {padding:2.5em 0;}
	.sp-hero {padding:2.5em 0 2em;}
	.sp-hero__title {font-size:1.5em;}
	.sp-hero__label {font-size:0.8125em; margin-bottom:1.5em;}
	.sp-sec-title {font-size:1.5em;}
	.sp-banner {padding:2.5em 4%;}
	.sp-banner__title {font-size:1.375em;}
	.sp-banner__desc {font-size:0.9375em;}
	.sp-vcard {padding:1.5em;}
	.sp-vcard__body {margin-top:1.5em;}
	/* .sp-hcard__icon {width:8em;} */
	.sp-hcard__body {padding:1.25em 1.25em 1.75em;}
}
/************************* 서브페이지 공통 컴포넌트 끝 *************************/