@charset "utf-8";

/* sub visual */
.sub-visual { position: relative; width: 100%; height: 45rem; margin-top: var(--sub-header-offset, 19.7rem); overflow: visible; background-color: var(--main-black); }
.sub-visual .inner { overflow: visible; position: relative; z-index: 2; height: 100%; }
.sub-visual-bg { position: absolute; top: 0; right: 0; z-index: 1; width: 80rem; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; }
.sub-visual-bg::after { content: ''; position: absolute; inset: 0; opacity: 0.42; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); pointer-events: none; }

/* sub visual content */
.sub-vis-cont { display: flex; flex-direction: column; overflow: visible; position: relative; z-index: 2; max-width: 70.1rem; padding: 6.4rem 0 4.8rem; }
.sub-vis-tit-wrap { margin: 0; }
.sub-vis-tit-wrap .en-tit { display: block; margin-bottom: 2rem; font-size: var(--fs-16); font-weight: 600; line-height: 1.25; color: var(--key-color); }
.sub-vis-tit-wrap .tit { display: block; font-size: var(--fs-48); font-weight: 400; line-height: 1.25; color: #fff; }

/* breadcrumb */
.sub-vis-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; position: relative; z-index: 5; gap: 1.6rem; margin-top: 2rem; }
.sub-vis-home { display: block; flex-shrink: 0; width: 2.4rem; height: 2.4rem; }
.sub-vis-home img { display: block; width: 100%; height: 100%; }
.sub-vis-bc-divider { flex-shrink: 0; width: 0.1rem; height: 1.8rem; background-color: rgba(255, 255, 255, 0.35); }
.sub-vis-bc-dropdown { position: relative; }
.sub-vis-bc-dropdown.is-open { z-index: 15; }
.sub-vis-bc-dropdown:not(:has(.sub-vis-bc-list > li)) { display: none; }
.sub-vis-bc-item { display: inline-flex; align-items: center; gap: 3.2rem; padding: 0; border: 0; background: transparent; font-family: inherit; font-size: var(--fs-22); line-height: 1.25; color: #fff; white-space: nowrap; cursor: pointer; }
.sub-vis-bc-item.is-static { cursor: default; }
.sub-vis-bc-label { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-family-ridi); }
.sub-vis-bc-arr { flex-shrink: 0; width: 1.4rem; height: 0.7rem; transition: transform .2s ease; }
.sub-vis-bc-dropdown.is-open .sub-vis-bc-arr { transform: rotate(180deg); }
.sub-vis-bc-list { display: none; flex-direction: column; position: absolute; top: calc(100% + 1.2rem); left: 0; z-index: 20; gap: 0.8rem; min-width: 22rem; margin: 0; padding: 1rem 0; border: 0.1rem solid rgba(255, 255, 255, 0.15); list-style: none; background: rgba(0, 0, 0, 0.92); }
.sub-vis-bc-dropdown.is-open .sub-vis-bc-list { display: flex; }
.sub-vis-bc-list a { display: flex; align-items: center; gap: 0.4rem; padding: 1rem 1.6rem; font-family: var(--font-family-ridi); font-size: var(--fs-18); line-height: 1.25; color: rgba(255, 255, 255, 0.8); text-decoration: none; white-space: nowrap; transition: color .2s ease, background .2s ease; }
.sub-vis-bc-list a:hover,
.sub-vis-bc-list .is-current a { color: #fff; }
.sub-vis-bc-list .is-current a { background: rgba(255, 255, 255, 0.06); }

/* sub visual intro */
.sub-vis-intro { margin-top: 6.4rem; font-size: var(--fs-22); line-height: 1.6; color: #fff; }
.sub-vis-intro p { line-height: 160%; }

/* vs_css KV backgrounds */
.sub-visual.sub-vis1-1 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis1-1.jpg"); }
.sub-visual.sub-vis1-2 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis1-2.jpg"); }
.sub-visual.sub-vis1-3 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis1-3.jpg"); }
.sub-visual.sub-vis1-4 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis1-4.jpg"); }
.sub-visual.sub-vis2-1 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis2-1.jpg"); }
.sub-visual.sub-vis2-2 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis2-2.jpg"); }
.sub-visual.sub-vis2-3 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis2-3.jpg"); }
.sub-visual.sub-vis3-1 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis3-1.jpg"); }
.sub-visual.sub-vis3-2 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis3-2.jpg"); }
.sub-visual.sub-vis3-3 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis3-3.jpg"); }
.sub-visual.sub-vis3-4 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis3-4.jpg"); }
.sub-visual.sub-vis4-1 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis4-1.jpg"); }
.sub-visual.sub-vis4-2 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis4-2.jpg"); }
.sub-visual.sub-vis5 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis5.jpg"); }
.sub-visual.sub-vis6 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis6.jpg"); }
.sub-visual.sub-vis7 .sub-visual-bg { background-image: url("/resources/img/sub/sub-vis7.jpg"); }

/* extension intro */
.sub-vis-extension { display: none; margin-top: 12rem; }
.sub-vis-extension.is-active { display: block; }
.sub-vis-extension-wrap { display: flex; align-items: flex-start; gap: 8.8rem; }
.sub-vis-extension-visual { flex-shrink: 0; position: relative; width: 36rem; }
.sub-vis-extension-visual-media { width: 36rem; height: 17.2rem; background-color: rgba(255, 255, 255, 0.03); background-image: url("/resources/img/sub/sub_vis_extension_intro.png"); background-repeat: no-repeat; background-position: center; background-size: cover; }
.sub-vis-extension-from-wrap { position: absolute; top: 2.4rem; left: 2.4rem; z-index: 2; }
.sub-vis-extension-from { display: inline-block; position: relative; font-size: var(--fs-28); font-weight: 400; line-height: 1; color: #fff; white-space: nowrap; }
.sub-vis-extension-from::after { content: ''; position: absolute; top: 50%; right: 0; width: 2rem; height: 2rem; background: url("/resources/img/common/mark_txt_detail.svg") no-repeat center / contain; transform: translate(55%, -50%); pointer-events: none; }
.sub-vis-extension-txt { flex: 1; min-width: 0; font-size: var(--fs-20); font-weight: 400; color: #fff; }
.sub-vis-extension-txt p { margin: 0; font-weight: 400; line-height: 150%; }
.sub-vis-extension-txt p + p { margin-top: 0; }
.sub-vis-extension-txt.is-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 48rem)); gap: 3.2rem; }
.sub-vis-extension-txt.is-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; }

@media screen and (max-width: 1440px) {
	.sub-visual { height: 42rem; }
	.sub-visual-bg { width: 72rem; }
	.sub-vis-cont { max-width: 64rem; padding: 5.6rem 0 4rem; }
	.sub-vis-intro { margin-top: 5.6rem; }
	.sub-vis-extension { margin-top: 10rem; }
	.sub-vis-extension-wrap { gap: 6.4rem; }
}

@media screen and (max-width: 1280px) {
	.sub-visual { height: auto; min-height: 40rem; margin-top: var(--sub-header-offset, 10rem); }
	.sub-visual-bg { width: 58%; min-width: 48rem; }
	.sub-vis-cont { max-width: 56rem; padding: 5.2rem 0 3.6rem; }
	.sub-vis-tit-wrap .tit { font-size: var(--fs-42); }
	.sub-vis-breadcrumb { gap: 1.4rem; margin-top: 1.8rem; }
	.sub-vis-bc-item { gap: 2.4rem; font-size: var(--fs-20); }
	.sub-vis-intro { margin-top: 4.8rem; font-size: var(--fs-20); }
	.sub-vis-extension-wrap { gap: 5.6rem; }
	.sub-vis-extension-txt.is-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

@media screen and (max-width: 1024px) {
	.sub-visual { min-height: 38rem; }
	.sub-visual-bg { width: 100%; min-width: 0; min-height: 38rem; }
	.sub-vis-cont { max-width: 100%; padding: 4.8rem 0 3.2rem; }
	.sub-vis-tit-wrap .en-tit { margin-bottom: 1.6rem; }
	.sub-vis-tit-wrap .tit { font-size: var(--fs-36); }
	.sub-vis-breadcrumb { gap: 1.2rem; margin-top: 1.6rem; }
	.sub-vis-bc-item { gap: 2rem; font-size: var(--fs-18); }
	.sub-vis-bc-list { min-width: 20rem; }
	.sub-vis-intro { margin-top: 4rem; }
	.sub-vis-extension { margin-top: 2rem; }
	.sub-vis-extension-wrap { flex-direction: column; gap: 4.8rem; }
	.sub-vis-extension-visual,
	.sub-vis-extension-visual-media { width: 100%; max-width: 36rem; }
	.sub-vis-extension-visual-media { height: 16rem; }
	.sub-vis-extension-txt.is-cols-2,
	.sub-vis-extension-txt.is-cols-3 { grid-template-columns: 1fr; gap: 2rem; }
}

@media screen and (max-width: 768px) {
	.sub-visual { min-height: 34rem; }
	.sub-visual-bg { min-height: 34rem; }
	.sub-vis-cont { padding: 4rem 0 2.8rem; }
	.sub-vis-tit-wrap .en-tit { margin-bottom: 1.2rem; font-size: var(--fs-16); }
	.sub-vis-tit-wrap .tit { font-size: var(--fs-32); line-height: 1.3; }
	.sub-vis-breadcrumb { gap: 1rem; margin-top: 1.4rem; }
	.sub-vis-home { width: 2rem; height: 2rem; }
	.sub-vis-bc-divider { height: 1.6rem; }
	.sub-vis-bc-item { gap: 1.6rem; font-size: var(--fs-17); }
	.sub-vis-bc-list a { padding: 0.8rem 1.4rem; font-size: var(--fs-16); }
	.sub-vis-intro { margin-top: 3.2rem; font-size: var(--fs-17); }
	.sub-vis-extension { margin-top: 6.4rem; }
	.sub-vis-extension-wrap { gap: 3.2rem; }
	.sub-vis-extension-visual-media { height: 14rem; }
	.sub-vis-extension-from-wrap { top: 1.6rem; left: 1.6rem; }
	.sub-vis-extension-from { font-size: var(--fs-24); }
	.sub-vis-extension-txt { font-size: var(--fs-18); }
}

@media screen and (max-width: 500px) {
	.sub-visual { min-height: 30rem; }
	.sub-visual-bg { min-height: 30rem; }
	.sub-vis-cont { padding: 3.2rem 0 2.4rem; }
	.sub-vis-tit-wrap .tit { font-size: var(--fs-28); }
	.sub-vis-breadcrumb { gap: 0.8rem; }
	.sub-vis-bc-item { gap: 1.2rem; max-width: 100%; white-space: normal; }
	.sub-vis-bc-label { flex-wrap: wrap; }
	.sub-vis-bc-list { left: 0; right: auto; min-width: min(22rem, calc(100vw - 4.8rem)); }
	.sub-vis-intro { margin-top: 2.4rem; }
	.sub-vis-extension { margin-top: 5.6rem; }
	.sub-vis-extension-wrap { gap: 2.4rem; }
	.sub-vis-extension-visual-media { height: 12rem; }
	.sub-vis-extension-from { font-size: var(--fs-22); }
	.sub-vis-extension-txt { font-size: var(--fs-16); }
}

@media screen and (max-width: 480px) {
	.sub-vis-intro p { display: inline; }
}