html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
body { line-height: 1 }
ol, ul { list-style: none }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none }
table { border-collapse: collapse; border-spacing: 0 }
a { text-decoration: none; color: inherit }
@font-face { font-family: "Pretendard"; src: url("/font/Pretendard-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap }
@font-face { font-family: "Pretendard"; src: url("/font/Pretendard-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap }
@font-face { font-family: "Pretendard"; src: url("/font/Pretendard-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap }
*, *:after, *:before { box-sizing: border-box }
html { font-size: 62.5%; font-family: "Pretendard", Arial, sans-serif }
button { border: 0; background-color: rgba(0,0,0,0) }
img { width: 100%; height: auto }
.h1 { font-size: max(2.9167vw, 38px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.45 }
.h2 { font-size: max(2.7083vw, 36px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.45 }
.h3 { font-size: max(9.5833vw, 124px); letter-spacing: -0.03em; font-weight: 500 }
.h4 { font-size: max(6.6667vw, 88px); letter-spacing: -0.02em; font-weight: 500 }
.t1 { font-size: max(1.875vw, 24px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.4 }
.t2 { font-size: max(1.6667vw, 22px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.4 }
.t3 { font-size: max(1.4583vw, 19px); letter-spacing: -0.02em; font-weight: 600; line-height: 1.4 }
.t4 { font-size: max(1.25vw, 16px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.3 }
.t5 { font-size: max(1.1458vw, 16px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.45 }
.t6 { font-size: max(1.0417vw, 14px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.5 }
.b1 {
font-size:max(.8333vw, 11px); font-weight: 400; line-height: 1.6; letter-spacing: -0.01em }
.b2 {
font-size:max(.7813vw, 10px); font-weight: normal; letter-spacing: -0.01em; line-height: 1.5 }
.b3 {
font-size:max(.7292vw, 10px); letter-spacing: -0.01em; line-height: 1.6 }
.d1 {
font-size:max(.7813vw, 10px); letter-spacing: -0.02em }
@media screen and (max-width: 1024px) {
.h1 { font-size: min(3.7109vw, 38px) }
.h2 { font-size: min(3.125vw, 32px) }
.h3 { font-size: min(12.1094vw, 128px) }
.h4 { font-size: min(8.9844vw, 96px) }
.t1 { font-size: min(2.3438vw, 24px) }
.t2 { font-size: min(2.1484vw, 22px) }
.t3 { font-size: min(1.7578vw, 20px) }
.t4 { font-size: 18px }
.t5 { font-size: 15px }
.t6 { font-size: 16px }
.b1 { font-size: 15px }
.b2 { font-size: 14px }
.b3 { font-size: 13px }
.d1 { font-size: 12px }
}
@media screen and (max-width: 767px) {
.h1 { font-size: min(7.1795vw, 30px) }
.h2 { font-size: min(6.1538vw, 26px) }
.h3 { font-size: min(16.4103vw, 68px) }
.h4 { font-size: min(15.3846vw, 64px) }
.t1 { font-size: min(5.641vw, 24px) }
.t2 { font-size: min(5.1282vw, 22px) }
.t3 { font-size: min(4.359vw, 20px) }
.t4 { font-size: 16px }
.t5 { font-size: 15px }
.t6 { font-size: 15px }
.b1 { font-size: 14px }
.b2 { font-size: 13px }
.b3 { font-size: 12px }
.d1 { font-size: 12px }
}
.sub-h1 { font-size: max(5vw, 64px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.45 }
.sub-h2 { font-size: max(4.1667vw, 52px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.45 }
.sub-h3 { font-size: max(3.75vw, 48px); letter-spacing: -0.01em; line-height: 1.4; font-weight: 600 }
.sub-h4-52-sb { font-size: max(2.7083vw, 36px); letter-spacing: -0.01em; line-height: 1.45; font-weight: 600 }
.sub-t1 { font-size: max(1.875vw, 24px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.4 }
.sub-t2 { font-size: max(1.6667vw, 22px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.4 }
.sub-t3 { font-size: max(1.5625vw, 20px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.4 }
.sub-t4-m { font-size: max(1.25vw, 16px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.5 }
.sub-t4-sb { font-size: max(1.25vw, 16px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.45 }
.sub-t4-sb em { color: #004098 }
.sub-t5 { font-size: max(1.1458vw, 16px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.45 }
.sub-t6-sb { font-size: max(1.0417vw, 14px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.5 }
.sub-t6-m { font-size: max(1.0417vw, 15px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.45 }
.sub-b1 { font-size: max(1.0417vw, 14px); font-weight: 500; line-height: 1.5; letter-spacing: -0.01em }
.sub-b2-m {
font-size:max(.9375vw, 12px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.5 }
.sub-b2-r {
font-size:max(.9375vw, 12px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.5 }
.sub-b3-sb {
font-size:max(.8333vw, 11px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.6 }
.sub-b3-m {
font-size:max(.8333vw, 11px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.6 }
.sub-b3-r {
font-size:max(.8333vw, 11px); letter-spacing: -0.01em; font-weight: 400; line-height: 1.6 }
.sub-b4 {
font-size:max(.7813vw, 11px); letter-spacing: -0.01em; font-weight: 400; line-height: 1.6 }
.sub-b5 {
font-size:max(.7292vw, 10px); letter-spacing: -0.01em; line-height: 1.45 }
.sub-d1 {
font-size:max(.7813vw, 10px); letter-spacing: -0.02em; font-weight: 400; line-height: 1 }
@media screen and (max-width: 1024px) {
.sub-h1 { font-size: min(9.2308vw, 48px) }
.sub-h2 { font-size: min(8.7179vw, 40px) }
.sub-h3 { font-size: min(8.2051vw, 34px) }
.sub-h4-52-sb { font-size: min(6.1538vw, 26px) }
.sub-t1 { font-size: 22px }
.sub-t2 { font-size: 20px }
.sub-t3 { font-size: 18px }
.sub-t4-m { font-size: 17px }
.sub-t4-sb { font-size: 17px }
.sub-t5 { font-size: 15px }
.sub-t6-sb { font-size: 16px }
.sub-t6-m { font-size: 16px }
.sub-b1 { font-size: 16px }
.sub-b2-m { font-size: 15px }
.sub-b2-r { font-size: 15px }
.sub-b3-sb { font-size: 14px }
.sub-b3-m { font-size: 14px }
.sub-b3-r { font-size: 14px }
.sub-b4 { font-size: 13px }
.sub-b5 { font-size: 12px }
.sub-d1 { font-size: 12px }
}
@media screen and (max-width: 767px) {
.sub-h1 { font-size: min(9.2308vw, 46px) }
.sub-h2 { font-size: min(8.7179vw, 40px) }
.sub-h3 { font-size: min(8.2051vw, 34px) }
.sub-h4-52-sb { font-size: min(6.1538vw, 26px) }
.sub-t1 { font-size: 22px }
.sub-t2 { font-size: 20px }
.sub-t3 { font-size: 18px }
.sub-t4-m { font-size: 17px }
.sub-t4-sb { font-size: 17px }
.sub-t5 { font-size: 15px }
.sub-t6-sb { font-size: 16px }
.sub-t6-m { font-size: 16px }
.sub-b1 { font-size: 16px }
.sub-b2-m { font-size: 15px }
.sub-b2-r { font-size: 15px }
.sub-b3-sb { font-size: 14px }
.sub-b3-m { font-size: 14px }
.sub-b3-r { font-size: 14px }
.sub-b4 { font-size: 13px }
.sub-b5 { font-size: 12px }
.sub-d1 { font-size: 12px }
}
.fw-bold { font-weight: 700 !important }
.hidden, [hidden] {
display:none !important
}
.a11y { position: absolute !important; overflow: hidden; height: 1px; width: 1px; clip: rect(1px, 1px, 1px, 1px) }
.container-main { padding-left: calc(max(1.5625vw, 20px) + 6.25vw); padding-right: calc(max(1.5625vw, 20px) + 6.25vw) }
.container-sub1 { padding-left: calc(max(1.5625vw, 20px) + 4.6875vw); padding-right: calc(max(1.5625vw, 20px) + 4.6875vw) }
.container-sub2 { padding-left: calc(max(1.5625vw, 20px) + 4.6875vw); padding-right: calc(max(1.5625vw, 20px) + 4.6875vw) }
@media screen and (max-width: 1024px) {
.container-main { padding-left: calc(max(2.3438vw, 20px) + 3.9063vw); padding-right: calc(max(2.3438vw, 20px) + 3.9063vw) }
.container-sub1 { padding-left: calc(max(2.3438vw, 20px) + 3.9063vw); padding-right: calc(max(2.3438vw, 20px) + 3.9063vw) }
.container-sub2 { padding-left: calc(max(2.3438vw, 20px) + 3.9063vw); padding-right: calc(max(2.3438vw, 20px) + 3.9063vw) }
}
@media screen and (max-width: 767px) {
.container-main { padding-left: 4.1026vw; padding-right: 4.1026vw }
.container-sub1 { padding-left: 4.1026vw; padding-right: 4.1026vw }
.container-sub2 { padding-left: 4.1026vw; padding-right: 4.1026vw }
}
.row { box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; margin-left:calc(0.9375vw * 0.5 * -1);
margin-right:calc(0.9375vw * 0.5 * -1)
}
.row.reverse { justify-content: end }
.row-grid { box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; margin-left:calc(0.9375vw * 0.5 * -1);
margin-right:calc(0.9375vw * 0.5 * -1);
margin-top:calc(4.8rem * 0.5 * -1);
margin-bottom:calc(4.8rem * 0.5 * -1)
}
.row-grid .col-4 { padding-top:calc(4.8rem * 0.5);
padding-bottom:calc(4.8rem * 0.5)
}
.row-grid .col-3 { padding-top:calc(4.8rem * 0.5);
padding-bottom:calc(4.8rem * 0.5)
}
@media screen and (max-width: 767px) {
.row-grid .col-4 { padding-top: 0; padding-bottom: 0 }
.row-grid .col-3 { padding-top: 0; padding-bottom: 0 }
}
.grid-1 { box-sizing: border-box }
.grid-2 { box-sizing: border-box }
.grid-3 { box-sizing: border-box }
.grid-4 { box-sizing: border-box }
.grid-5 { box-sizing: border-box }
.grid-6 { box-sizing: border-box }
.grid-7 { box-sizing: border-box }
.grid-8 { box-sizing: border-box }
.grid-9 { box-sizing: border-box }
.grid-10 { box-sizing: border-box }
.grid-11 { box-sizing: border-box }
.grid-12 { box-sizing: border-box }
.grid-13 { box-sizing: border-box }
.grid-14 { box-sizing: border-box }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { box-sizing: border-box; flex: 0 0 auto; padding-left:calc(0.9375vw * 0.5);
padding-right:calc(0.9375vw * 0.5)
}
.col-1 { flex-basis:calc(100% / 12 * 1);
max-width:calc(100% / 12 * 1)
}
@media screen and (min-width: 1025px) {
.col-offset-1 { margin-left:calc(100% / 12 * 1)
}
}
.col-2 { flex-basis:calc(100% / 12 * 2);
max-width:calc(100% / 12 * 2)
}
@media screen and (min-width: 1025px) {
.col-offset-2 { margin-left:calc(100% / 12 * 2)
}
}
.col-3 { flex-basis:calc(100% / 12 * 3);
max-width:calc(100% / 12 * 3)
}
@media screen and (min-width: 1025px) {
.col-offset-3 { margin-left:calc(100% / 12 * 3)
}
}
.col-4 { flex-basis:calc(100% / 12 * 4);
max-width:calc(100% / 12 * 4)
}
@media screen and (min-width: 1025px) {
.col-offset-4 { margin-left:calc(100% / 12 * 4)
}
}
.col-5 { flex-basis:calc(100% / 12 * 5);
max-width:calc(100% / 12 * 5)
}
@media screen and (min-width: 1025px) {
.col-offset-5 { margin-left:calc(100% / 12 * 5)
}
}
.col-6 { flex-basis:calc(100% / 12 * 6);
max-width:calc(100% / 12 * 6)
}
@media screen and (min-width: 1025px) {
.col-offset-6 { margin-left:calc(100% / 12 * 6)
}
}
.col-7 { flex-basis:calc(100% / 12 * 7);
max-width:calc(100% / 12 * 7)
}
@media screen and (min-width: 1025px) {
.col-offset-7 { margin-left:calc(100% / 12 * 7)
}
}
.col-8 { flex-basis:calc(100% / 12 * 8);
max-width:calc(100% / 12 * 8)
}
@media screen and (min-width: 1025px) {
.col-offset-8 { margin-left:calc(100% / 12 * 8)
}
}
.col-9 { flex-basis:calc(100% / 12 * 9);
max-width:calc(100% / 12 * 9)
}
@media screen and (min-width: 1025px) {
.col-offset-9 { margin-left:calc(100% / 12 * 9)
}
}
.col-10 { flex-basis:calc(100% / 12 * 10);
max-width:calc(100% / 12 * 10)
}
@media screen and (min-width: 1025px) {
.col-offset-10 { margin-left:calc(100% / 12 * 10)
}
}
.col-11 { flex-basis:calc(100% / 12 * 11);
max-width:calc(100% / 12 * 11)
}
@media screen and (min-width: 1025px) {
.col-offset-11 { margin-left:calc(100% / 12 * 11)
}
}
.col-12 { flex-basis:calc(100% / 12 * 12);
max-width:calc(100% / 12 * 12)
}
@media screen and (min-width: 1025px) {
.col-offset-12 { margin-left:calc(100% / 12 * 12)
}
}
@media screen and (max-width: 1366px) {
.row { margin-left:calc(1.1719vw * 0.5 * -1);
margin-right:calc(1.1719vw * 0.5 * -1)
}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { box-sizing: border-box; flex: 0 0 auto; padding-left:calc(1.1719vw * 0.5);
padding-right:calc(1.1719vw * 0.5)
}
.col-lg-1 { flex-basis:calc(100% / 12 * 1);
max-width:calc(100% / 12 * 1)
}
.col-offset-lg-1 { margin-left:calc(100% / 12 * 1)
}
.col-lg-2 { flex-basis:calc(100% / 12 * 2);
max-width:calc(100% / 12 * 2)
}
.col-offset-lg-2 { margin-left:calc(100% / 12 * 2)
}
.col-lg-3 { flex-basis:calc(100% / 12 * 3);
max-width:calc(100% / 12 * 3)
}
.col-offset-lg-3 { margin-left:calc(100% / 12 * 3)
}
.col-lg-4 { flex-basis:calc(100% / 12 * 4);
max-width:calc(100% / 12 * 4)
}
.col-offset-lg-4 { margin-left:calc(100% / 12 * 4)
}
.col-lg-5 { flex-basis:calc(100% / 12 * 5);
max-width:calc(100% / 12 * 5)
}
.col-offset-lg-5 { margin-left:calc(100% / 12 * 5)
}
.col-lg-6 { flex-basis:calc(100% / 12 * 6);
max-width:calc(100% / 12 * 6)
}
.col-offset-lg-6 { margin-left:calc(100% / 12 * 6)
}
.col-lg-7 { flex-basis:calc(100% / 12 * 7);
max-width:calc(100% / 12 * 7)
}
.col-offset-lg-7 { margin-left:calc(100% / 12 * 7)
}
.col-lg-8 { flex-basis:calc(100% / 12 * 8);
max-width:calc(100% / 12 * 8)
}
.col-offset-lg-8 { margin-left:calc(100% / 12 * 8)
}
.col-lg-9 { flex-basis:calc(100% / 12 * 9);
max-width:calc(100% / 12 * 9)
}
.col-offset-lg-9 { margin-left:calc(100% / 12 * 9)
}
.col-lg-10 { flex-basis:calc(100% / 12 * 10);
max-width:calc(100% / 12 * 10)
}
.col-offset-lg-10 { margin-left:calc(100% / 12 * 10)
}
.col-lg-11 { flex-basis:calc(100% / 12 * 11);
max-width:calc(100% / 12 * 11)
}
.col-offset-lg-11 { margin-left:calc(100% / 12 * 11)
}
.col-lg-12 { flex-basis:calc(100% / 12 * 12);
max-width:calc(100% / 12 * 12)
}
.col-offset-lg-12 { margin-left:calc(100% / 12 * 12)
}
.col-offset-lg-0 { margin-left: 0 }
}
@media screen and (max-width: 1024px) {
.row { margin-left:calc(1.1719vw * 0.5 * -1);
margin-right:calc(1.1719vw * 0.5 * -1)
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8 { box-sizing: border-box; flex: 0 0 auto; padding-left:calc(1.1719vw * 0.5);
padding-right:calc(1.1719vw * 0.5)
}
.col-md-1 { flex-basis:calc(100% / 8 * 1);
max-width:calc(100% / 8 * 1)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-1 { margin-left:calc(100% / 8 * 1)
}
}
@media screen and (max-width: 1024px) {
.col-md-2 { flex-basis:calc(100% / 8 * 2);
max-width:calc(100% / 8 * 2)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-2 { margin-left:calc(100% / 8 * 2)
}
}
@media screen and (max-width: 1024px) {
.col-md-3 { flex-basis:calc(100% / 8 * 3);
max-width:calc(100% / 8 * 3)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-3 { margin-left:calc(100% / 8 * 3)
}
}
@media screen and (max-width: 1024px) {
.col-md-4 { flex-basis:calc(100% / 8 * 4);
max-width:calc(100% / 8 * 4)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-4 { margin-left:calc(100% / 8 * 4)
}
}
@media screen and (max-width: 1024px) {
.col-md-5 { flex-basis:calc(100% / 8 * 5);
max-width:calc(100% / 8 * 5)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-5 { margin-left:calc(100% / 8 * 5)
}
}
@media screen and (max-width: 1024px) {
.col-md-6 { flex-basis:calc(100% / 8 * 6);
max-width:calc(100% / 8 * 6)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-6 { margin-left:calc(100% / 8 * 6)
}
}
@media screen and (max-width: 1024px) {
.col-md-7 { flex-basis:calc(100% / 8 * 7);
max-width:calc(100% / 8 * 7)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-7 { margin-left:calc(100% / 8 * 7)
}
}
@media screen and (max-width: 1024px) {
.col-md-8 { flex-basis:calc(100% / 8 * 8);
max-width:calc(100% / 8 * 8)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-8 { margin-left:calc(100% / 8 * 8)
}
}
@media screen and (max-width: 767px) {
.row { margin-left:calc(0.8rem * 0.5 * -1);
margin-right:calc(0.8rem * 0.5 * -1)
}
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4 { box-sizing: border-box; flex: 0 0 auto; padding-left:calc(0.8rem * 0.5);
padding-right:calc(0.8rem * 0.5)
}
.col-sm-1 { flex-basis:calc(100% / 4 * 1);
max-width:calc(100% / 4 * 1)
}
.col-offset-sm-1 { margin-left:calc(100% / 4 * 1)
}
.col-sm-2 { flex-basis:calc(100% / 4 * 2);
max-width:calc(100% / 4 * 2)
}
.col-offset-sm-2 { margin-left:calc(100% / 4 * 2)
}
.col-sm-3 { flex-basis:calc(100% / 4 * 3);
max-width:calc(100% / 4 * 3)
}
.col-offset-sm-3 { margin-left:calc(100% / 4 * 3)
}
.col-sm-4 { flex-basis:calc(100% / 4 * 4);
max-width:calc(100% / 4 * 4)
}
.col-offset-sm-4 { margin-left:calc(100% / 4 * 4)
}
}
[class*=spacing] {
display:block;
pointer-events:none
}
[class*=spacing][class*=mobile] {
display:none
}
@media screen and (max-width: 767px) {
[class*=spacing][class*=mobile] {
display:block
}
}
.mobilebr { font-size: inherit }
@media screen and (max-width: 1024px) {
.mobilebr { height: 1em }
}
.mobilebr-sm { font-size: inherit }
@media screen and (max-width: 1024px) {
.mobilebr-sm { display: block; height: 0em; width: 100% }
}
.spacing1 { height: clamp(160px, 12.5vw, 280px) }
.spacing2 { height: clamp(132px, 10.4167vw, 240px) }
.spacing3 { height: clamp(108px, 8.3333vw, 200px) }
.spacing4 { height: clamp(80px, 6.25vw, 160px) }
.spacing5 { height: clamp(68px, 5.2083vw, 120px) }
.spacing6 { height: clamp(52px, 5.2083vw, 100px) }
@media screen and (max-width: 1024px) {
.spacing1 { height: clamp(106px, 12.5vw, 128px) }
.spacing2 { height: clamp(88px, 10.3516vw, 106px) }
.spacing3 { height: clamp(72px, 8.5938vw, 88px) }
.spacing4 { height: clamp(64px, 7.0313vw, 72px) }
.spacing5 { height: clamp(56px, 6.25vw, 64px) }
.spacing6 { height: clamp(48px, 5.4688vw, 56px) }
}
@media screen and (max-width: 767px) {
.spacing1 { height: clamp(100px, 25.641vw, 128px) }
.spacing2 { height: clamp(80px, 20.5128vw, 106px) }
.spacing3 { height: clamp(64px, 16.4103vw, 88px) }
.spacing4 { height: clamp(56px, 14.359vw, 72px) }
.spacing5 { height: clamp(48px, 12.3077vw, 64px) }
.spacing6 { height: clamp(40px, 10.2564vw, 56px) }
}
:root { --header-height: clamp(68px, 4.375vw, 100px);
--header-top-height: clamp(36px, 1.9792vw, 46px);
--header-total-height: calc(var(--header-height) + var(--header-top-height))
}
@media screen and (max-width: 1024px) {
:root { --header-height: 66px;
--header-top-height: 36px
}
}
@media screen and (max-width: 767px) {
:root { --header-height: 66px;
--header-top-height: 36px
}
}
header { position: fixed; width: 100%; top: 0; z-index: 9999; transition: transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1) }
@media screen and (max-width: 1024px) {
header { background-color: #fff }
}
@media screen and (min-width: 768px) {
header [data-mobile-only] { display: none !important }
}
@media screen and (min-width: 1025px) {
header [data-tablet-mobile-only] { display: none !important }
}
@media screen and (max-width: 1024px) {
header [desktop-only] { display: none !important }
}
@media screen and (min-width: 1025px) {
header[open] .header .header-inner:has(.header-units-mobile):has(.gnb a:hover):not(.header-search-area.active), header[open] .header .header-inner:has(.gnb-under li:hover):not(.header-search-area.active), header[open] .header:has(.header-search-area.active):not(.header-search-area.active) {
position:relative
}
header[open] .header .header-inner:has(.header-units-mobile):has(.gnb a:hover):not(.header-search-area.active)::after, header[open] .header .header-inner:has(.gnb-under li:hover):not(.header-search-area.active)::after, header[open] .header:has(.header-search-area.active):not(.header-search-area.active)::after {
display:block;
content:"";
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:100vw;
height:1px;
background-color:#e0e0e0;
z-index:-1
}
header[open] .header .header-inner:has(.header-units-mobile):has(.gnb a:hover):not(.header-search-area.active)::after, header[open] .header .header-inner:has(.gnb-under li:hover):not(.header-search-area.active)::after, header[open] .header:has(.header-search-area.active):not(.header-search-area.active)::after {
z-index:9990;
bottom:0px
}
}
header:not([active]) { transform: translateY(-100%); transition: none }
@media screen and (min-width: 1025px) {
body[direction=up] { --header-height:clamp(48px, 3.333vw, 80px);
--header-top-height:clamp(30px, 1.7708vw, 42px)
}
}
body[direction=up] header { transform: translateY(0%) !important }
body[direction=up] header .header-inner .gnb::before { transform: translate(-50%, var(--header-height)) }
body[direction=down] header { transform: translateY(-100%) !important }
body[direction=down] header .header-inner .gnb::before { transform: translate(-50%, var(--header-height)) }
.header { transition: height .15s ease-out; height: var(--header-height) }
.header-container { padding: 0 4.1026vw; width: 100%; height: 100%; box-sizing: border-box }
@media screen and (max-width: 767px) {
[lang=en] .header-top .header-container { padding: 0; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none }
[lang=en] .header-top .header-container::-webkit-scrollbar {
display:none
}
}
.header-top { z-index: 10000; position: relative; height: var(--header-top-height); background-color: #004098 }
.header-top-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100% }
.header-top-inner .header-lang { display: flex; justify-content: center; align-items: center; gap: 1.8461538462em; font-size:max(.6771vw, 12px);
color: #fff }
.header-top .header-family-site { display: flex }
@media screen and (max-width: 767px) {
.header-top .header-family-site { justify-content: space-between; width: 100%; margin: 0 26px }
}
.header-top .header-family-site a { display: block; font-size:max(.6771vw, 12px);
margin-right: 2.4615384615em; white-space: nowrap; word-break: keep-all }
@media screen and (max-width: 1024px) {
.header-top .header-family-site a { font-size: 14px; margin-right: 34px }
}
@media screen and (max-width: 767px) {
.header-top .header-family-site a { font-size: 14px; margin-right: 0 }
}
@media screen and (max-width: 767px) {
[lang=en] .header-top .header-family-site { margin: 0 4.1026vw; width: fit-content }
}
[lang=en] .header-top .header-family-site a { text-transform: uppercase }
@media screen and (max-width: 1024px) {
[lang=en] .header-top .header-family-site a { font-size: 13px; margin-right: 18px }
}
.header-top a { color: #fff; font-weight: 500 }
.header:has(.header-search-area.active)::before {
content:"";
display:block;
width:100vw;
height:100vh;
background-color:rgba(0,0,0,.4);
position:fixed;
top:0;
left:0;
z-index:-10
}
.header-global-list {
font-size:max(.6771vw, 12px) !important; position: relative !important; z-index: 10000 !important; width: fit-content !important; min-width: unset !important }
.header-global-list * {
font-size:max(.6771vw, 12px) !important; text-transform: uppercase; background-color: #004098 !important; color: unset !important }
.header-global-list:hover, .header-global-list:active, .header-global-list:hover *, .header-global-list:active * { background-color: #004098 !important; color: unset !important; cursor: pointer }
.header-global-list button { white-space: nowrap; max-height: var(--header-top-height) !important; border: 0 !important; padding: 0 !important }
.header-global-list button:not(.select__btn):hover { text-decoration: underline }
.header-global-list button.selected { position: relative }
.header-global-list button.selected::before {
width:max(.5208vw, 10px);
height:max(.5208vw, 10px); font-size: inherit; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; content: ""; background: url("/images/ksob_arrow_under_white.svg") center center/max(0.5208vw, 10px) no-repeat }
.header-global-list button.select__btn { position: relative }
.header-global-list button.select__btn::before {
width:max(.5208vw, 10px);
height:max(.5208vw, 10px);
font-size:max(.6771vw, 12px); position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; content: ""; background: url("/images/ksob_arrow_under_white.svg") center center/max(0.5208vw, 10px) no-repeat }
.header-global-list button.select__btn:hover, .header-global-list button.select__btn:active { position: relative }
.header-global-list button.select__btn:hover::before, .header-global-list button.select__btn:active::before {
width:max(.5208vw, 10px);
height:max(.5208vw, 10px);
font-size:max(.6771vw, 12px); position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; content: ""; background: url("/images/ksob_arrow_under_white.svg") center center/max(0.5208vw, 10px) no-repeat }
.header-global-list button { min-width: 10.8333333333em; font-size:max(.625vw, 10px);
line-height: 130% !important; width: fit-content }
.header-global-list button.select__btn.open { position: relative }
.header-global-list button.select__btn.open::before {
width:max(.5208vw, 10px);
height:max(.5208vw, 10px);
font-size:max(.6771vw, 12px); position: absolute; right: 0; top: 50%; display: block; content: ""; background: url("/images/ksob_arrow_under_white.svg") center center/max(0.5208vw, 10px) no-repeat; transform: translateY(-50%) rotate(180deg) }
.header-global-list .drop-box { width: fit-content; position: absolute !important; font-size:max(.625vw, 10px);
top: calc(var(--header-top-height) + .3636363636em) !important; left: 50% !important; transform: translateX(-50%) !important; border-radius: var(--br-4) !important; padding: 1.8181818182em !important; min-width: 11.9090909091em; text-transform: uppercase; visibility: hidden; line-height: 130% !important }
.header-global-list .drop-box.active { visibility: visible }
.header-global-list .drop-box button { margin: 0 !important; padding: 0 !important; font-size:max(.625vw, 10px) !important;
line-height: 130% !important; width: fit-content !important; min-height: unset !important; text-transform: uppercase; display: block }
.header-global-list .drop-box button:not(:last-of-type) { margin-bottom: 1.0909090909em !important }
.header-global-list .drop-box button::before { display: none }
.header-global-list .drop-box button.selected { opacity: 0 !important; height: unset !important; min-height: unset !important }
.header-units { position: relative; z-index: 9999 }
.header-units[desktop-only] { display: flex; justify-content: center; align-items: center; gap: .5em; font-size: 20px }
.header-units .header-contact-btn {
font-size:max(.7292vw, 12px); font-weight: 500; line-height: 1; padding: 0 1.4285714286em; height: max(2.0833vw, 32px); border-radius: 3rem; display: flex; justify-content: center; align-items: center; background-color: #e4e4e4; transition: all .3s ease-in }
.header-units .header-search-btn { display: flex; justify-content: center; align-items: center; font-size: 14px; width: max(2.0833vw, 32px); height: max(2.0833vw, 32px); padding: 0; border-radius: 40px; background: #e4e4e4 url("/images/ksob_search.svg") center center/max(1.0417vw, 16px) no-repeat }
.header-units .header-search-btn:hover { cursor: pointer }
.header-units:has(~.header-search-area.active) .header-search-btn {
background:#e4e4e4 url("/images/ksob_close.svg") center center/max(1.0417vw, 16px) no-repeat
}
.header-units-mobile span { display: block; width: 1.2em; font-size: 20px; height: 2px; background-color: #000; border-radius: var(--br-1); transition: transform .3s ease-in }
@media screen and (max-width: 1024px) {
.header-units-mobile { font-size: 20px; width: 1.2em; height: .9em; margin-right: 3px; display: flex; flex-direction: column; justify-content: center; align-items: center; align-items: flex-start; justify-content: space-between }
}
.header-units-mobile.open span:first-of-type { transform: translate(0px, 400%) rotate(45deg) }
.header-units-mobile.open span:nth-of-type(2) { display: none }
.header-units-mobile.open span:last-of-type { transform: translate(0px, -400%) rotate(-45deg) }
.header-search-area { background-color: #fff; width: 100vw; font-size: 20px; height: var(--header-height); opacity: 0; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: -1; transition: height .25s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .35s cubic-bezier(0.165, 0.84, 0.44, 1); border-radius: 0 0 17px 17px; z-index: -1; overflow: hidden; display: flex; justify-content: center; align-items: center }
.header-search-area.active { opacity: 1; height: calc(var(--header-height) + 9.4em) }
.header-search-area.active::after { content: ""; display: block; width: 100vw; height: 0px; background-color: #e0e0e0; position: absolute; top: var(--header-height); left: 50%; transform: translateX(-50%) }
.header-search-area input { width: 100%; background-color: #f5f5f5; border-radius: 1.25em; font-size: max(1.25vw, 17px); padding: .75em 1.25em; border: 0; display: block; height: unset; position: relative }
.header-search-area input:focus { outline: none }
.header-search-area .header-input { margin-top: calc(var(--header-height) + clamp(40px, 3.125vw, 68px)); margin-bottom: clamp(40px, 3.125vw, 68px); height: fit-content; position: relative }
.header-search-area .header-input em { display: none; font-size: 20px; content: ""; width: max(1.25vw, 16px); height: max(1.25vw, 16px); position: absolute; right: max(3.958vw, 76px); top: 50%; transform: translateY(-50%); background: url("/images/ksob_search_clean.svg") 100% 100%/contain no-repeat }
.header-search-area .header-input em:hover { cursor: pointer }
.header-search-area .header-input span { font-size: 20px; content: ""; display: block; width: max(1.6667vw, 22px); height: max(1.6667vw, 22px); position: absolute; right: 1.6em; top: 50%; transform: translateY(-50%); background: url("/images/ksob_search.svg") 100% 100%/contain no-repeat }
.header-search-area .header-input span:hover { cursor: pointer }
.header-search-area .header-input.typed em { display: block }
.header-inner { position: relative; display: flex; justify-content: space-between; align-items: center; height: 100% }
.header-inner:has(.gnb-under) {
height:fit-content
}
.header-inner:has(~.header-inner .gnb-under li:nth-of-type(1):hover) .gnb li:nth-of-type(1) a::after {
width:100%
}
.header-inner:has(~.header-inner .gnb-under li:nth-of-type(2):hover) .gnb li:nth-of-type(2) a::after {
width:100%
}
.header-inner:has(~.header-inner .gnb-under li:nth-of-type(3):hover) .gnb li:nth-of-type(3) a::after {
width:100%
}
.header-inner:has(~.header-inner .gnb-under li:nth-of-type(4):hover) .gnb li:nth-of-type(4) a::after {
width:100%
}
.header-inner:has(~.header-inner .gnb-under li:nth-of-type(5):hover) .gnb li:nth-of-type(5) a::after {
width:100%
}
.header-inner .logo img { position: relative; z-index: 9999; height: max(1.5625vw, 24px); width: auto }
@media screen and (max-width: 1024px) {
.header-inner .logo img { height: 26px }
}
[lang=en] .header-inner .logo img { height: max(2.1354vw, 34px) }
@media screen and (max-width: 1024px) {
[lang=en] .header-inner .logo img { height: 34px }
}
.header-inner:has(~.header-inner .gnb-under:hover) .gnb li {
width:max(8.3333vw, 122px);
padding:0
}
[lang=en] .header-inner:has(~.header-inner .gnb-under:hover) .gnb li {
width:max(10vw, 128px)
}
.header-inner .gnb { display: flex; font-size:max(.9375vw, 15px);
position: absolute; top: 0; left: 50%; transform: translateX(-50%) }
.header-inner .gnb li { word-break: keep-all; transition: width .5s ease-out; width: 8.5em }
.header-inner .gnb li a { color: #000; font-weight: 500; font-size:max(.9375vw, 15px);
letter-spacing: -0.01em; transition: height .15s ease-out; height: var(--header-height); display: flex; align-items: center; justify-content: center; position: relative }
.header-inner .gnb li a::after { position: absolute; bottom: -3px; left: 0; content: ""; display: block; height: 3px; width: 0; background-color: #004098; transition: width .5s ease-in-out }
.header-inner .gnb li:hover a::after { width: 100% }
.header-inner .gnb li:hover~li, .header-inner .gnb li:hover, .header-inner .gnb li:has(~li:hover) {
width:max(8.3333vw, 122px);
padding:0
}
[lang=en] .header-inner .gnb li:hover~li, [lang=en] .header-inner .gnb li:hover, [lang=en] .header-inner .gnb li:has(~li:hover) {
width:max(10vw, 128px)
}
.header-inner .gnb-under { height: 0; opacity: 0; overflow: hidden; width: 100%; position: absolute; left: 50%; top: -0.5px; transform: translateX(-50%); transition: height .15s cubic-bezier(0.165, 0.84, 0.44, 1) .15s, opacity .1s cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 9999 }
.header-inner .gnb-under ul { display: flex; justify-content: center; align-items: center; height: 100% }
.header-inner .gnb-under ul li { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; font-size:max(.8333vw, 13px);
font-weight: 400; line-height: 130%; letter-spacing: -0.16px; gap: .875em; padding: max(1.875vw, 28px) 0; width: max(8.3333vw, 122px); height: 100%; border-left: 1px solid #e0e0e0; word-break: keep-all; white-space: nowrap }
.header-inner .gnb-under ul li:last-of-type { border-right: 1px solid #e0e0e0 }
.header-inner .gnb-under ul li a { position: relative }
.header-inner .gnb-under ul li a em.icon { position: absolute; right:-.5208333333vw;
top:-.2604166667vw
}
.header-inner .gnb-under ul li a span { background-image: linear-gradient(transparent calc(100% - 1px), #000000 1px); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .3s ease-in }
.header-inner .gnb-under ul li a.active span { background-size: 100% 100% }
.header-inner .gnb-under ul li a:hover span { background-size: 100% 100% }
[lang=en] .header-inner .gnb-under ul li { width: max(10vw, 128px); font-size:max(.8333vw, 11px)
}
.header-inner .gnb-under:hover { font-size: 20px; opacity: 1; height: max(13.9583vw, 21.8rem) }
[lang=en] .header-inner .gnb, [lang=en] .header-inner .gnb-under { text-transform: uppercase }
.header-inner .gnb::after { content: ""; display: block; background-color: #fff; width: 100vw; font-size: 20px; height: var(--header-height); opacity: 1; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: -1; transition: height .15s ease-in, opacity .15s ease-in }
.header-inner .gnb::before { content: ""; display: block; background-color: rgba(0,0,0,.4); width: 100vw; font-size: 20px; height: 100vh; opacity: 0; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: -2; transition: opacity .15s ease-in; pointer-events: none }
.header-inner .gnb:has(li:hover)::after {
height:calc(var(--header-height) + max(13.9583vw, 21.8rem));
opacity:1;
border-radius:0 0 .85em .85em;
font-size:20px
}
.header-inner .gnb:has(li:hover)::before {
height:100vh;
opacity:1;
pointer-events:all
}
.header-inner:has(~.header-inner .gnb-under:hover) .gnb::after {
height:calc(var(--header-height) + max(13.9583vw, 21.8rem));
opacity:1;
border-radius:0 0 .85em .85em;
font-size:20px
}
.header-inner:has(~.header-inner .gnb-under:hover) .gnb::before {
opacity:1
}
.header-inner:not(.gnb-under):has(li:hover)~.header-inner .gnb-under {
font-size:20px;
opacity:1;
height:max(13.9583vw, 21.8rem)
}
.header-inner-mobile { pointer-events: none; position: fixed; top: var(--header-total-height); right: 0; width: 0; opacity: 0; box-sizing: border-box; padding-left: max(1.5625vw, 20px); padding-right: max(1.5625vw, 20px); overflow: hidden; height: calc(100vh - var(--header-total-height) - env(safe-area-inset-bottom)); background-color: #fff; z-index: -1; transition: width .5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .2s cubic-bezier(0.165, 0.84, 0.44, 1) }
@supports(height: 100dvh) {
.header-inner-mobile {
height:calc(100dvh - var(--header-total-height) - env(safe-area-inset-bottom))
}
}
.header-inner-mobile input { margin-bottom: 2.5em; width: 100%; display: block; background-color: #f5f5f5; border-radius: 30px; font-size: 16px; padding: .8125em 3em .8125em 1.25em; border: 0 }
.header-inner-mobile input:focus { outline: none }
@media screen and (max-width: 1024px) {
.header-inner-mobile { padding-left: max(3.5156vw, 32px); padding-right: max(3.5156vw, 32px) }
}
@media screen and (max-width: 767px) {
.header-inner-mobile { padding-left: max(1.5625vw, 20px); padding-right: max(1.5625vw, 20px) }
}
.header-inner-mobile .header-input { position: relative }
.header-inner-mobile .header-input span { content: ""; display: block; width: 24px; height: 24px; position: absolute; right: 1.6em; top: 50%; transform: translateY(-50%); background: url("/images/ksob_search.svg") 100% 100%/contain no-repeat }
.header-inner-mobile .header-input em { display: none; font-size: 20px; content: ""; width: max(20px, 1em); height: max(20px, 1em); position: absolute; right: 2em; top: 50%; transform: translateY(-50%); background: url("/images/ksob_search_clean.svg") 100% 100%/contain no-repeat }
.header-inner-mobile .header-input em:hover { cursor: pointer }
@media screen and (max-width: 1024px) {
.header-inner-mobile .header-input em { right: 2.5em }
}
.header-inner-mobile .header-input.typed em { display: block }
.header-inner-mobile [accordion-wrap] { align-items: flex-start }
[lang=en] .header-inner-mobile [accordion-wrap] { text-transform: uppercase }
.header-inner-mobile [accordion-wrap] [accordion-li] { font-size: 22px; font-style: normal; font-weight: 500; line-height: 130%; letter-spacing: -0.22px; margin-bottom: 1.2727272727em; width: 100%; height: fit-content; justify-content: space-between; display: flex; flex-wrap: wrap }
.header-inner-mobile [accordion-wrap] [accordion-li] img { transition: transform .5s linear; width: .8181818182em; display: block }
.header-inner-mobile [accordion-wrap] [accordion-li] [accordion-hiddencont] .ul { margin-top: .75em; background-color: #ebf0f6; padding: 1.5em 1.25em; border-radius: 12px; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; letter-spacing: -0.16px; width: 100%; display: block }
.header-inner-mobile [accordion-wrap] [accordion-li] [accordion-hiddencont] .ul a:not(:last-of-type) { display: block; margin-bottom: 1.125em }
.header-inner-mobile [accordion-wrap] [accordion-li] [accordion-hiddencont] .ul span { background-image: linear-gradient(transparent calc(100% - 1px), #000000 1px); background-repeat: no-repeat; background-size: 0% 100% }
.header-inner-mobile [accordion-wrap] [accordion-li] [accordion-hiddencont] .ul span.active { background-size: 100% 100% }
.header-inner-mobile [accordion-wrap] [accordion-li].active { color: #004098 }
.header-inner-mobile [accordion-wrap] [accordion-li].active [accordion-hiddencont] { color: #000 }
.header-inner-mobile [accordion-wrap] [accordion-li].active img { transform: rotate(180deg) }
.header-inner-mobile .header-bottom { display: flex; justify-content: center; align-items: center; margin-bottom: 2em; justify-content: flex-start; font-size: 14px; font-weight: 500; line-height: 100%; letter-spacing: -0.14px }
.header-inner-mobile .header-bottom .lang { margin-right: 1.2857142857em; display: flex; justify-content: center; align-items: center; gap: 1.2857142857em; border-right: 1px solid #ccc; margin-right: 1.5714285714em; padding-right: 1.5714285714em }
.header-inner-mobile .header-bottom .lang a { opacity: .4; display: inline-block; width: fit-content; position: relative }
.header-inner-mobile .header-bottom .lang a.active { pointer-events: none; opacity: 1 }
.header-inner-mobile .header-bottom .lang a.active::after { content: ""; display: block; width: 100%; position: absolute; height: 1px; bottom: 0; left: 0; background-color: #000; transition: width .3s ease-in }
@media screen and (max-width: 1024px) {
.header .header-inner-mobile.open { overscroll-behavior: contain; display: flex; flex-direction: column; justify-content: space-between; gap: 4rem; overflow-y: auto; width: 422px; opacity: 1; pointer-events: all; background-color: #fff; z-index: 10 }
.header .header-inner-mobile.open::before { content: ""; display: block; width: 422px; height: calc(100dvh - var(--header-total-height) - env(safe-area-inset-bottom)); position: fixed; right: 0; top: var(--header-total-height); bottom: 0; background-color: #fff; z-index: -9; opacity: inherit; transition: opacity .2s ease-in-out .1s }
.header .header-inner-mobile.open::after { content: ""; display: block; width: calc(100vw - 422px); height: calc(100dvh - var(--header-total-height) - env(safe-area-inset-bottom)); position: fixed; left: 0; top: var(--header-total-height); bottom: 0; background-color: rgba(0,0,0,.4); z-index: -8; opacity: inherit; transition: opacity .2s ease-in-out .1s }
}
@media screen and (max-width: 1024px)and (max-width: 767px) {
.header .header-inner-mobile.open::before { z-index: -8; min-width: 100vw; transition: opacity 0s linear }
.header .header-inner-mobile.open::after { z-index: -10; width: 0; transition: opacity 0s linear }
}
@media screen and (max-width: 767px) {
.header .header-inner-mobile.open { width: 100%; opacity: 1; pointer-events: all }
}
@media screen and (min-width: 1440px) {
[lang=en] .header-inner .gnb li { width: 9.2em }
}
.wrapper { background-color: #000 }
@media screen and (min-width: 1025px) {
.wrapper[data-footer-motion=scale][footerActive] .content-container { border-radius: var(--br-1); transform: scale(0.975) }
}
.wrapper[data-footer-motion=clip][footerActive] .footer-motion-box { transform: translate(0) }
.wrapper .footer-motion-box { position: absolute; bottom: 0; width: max(1.5625vw, 20px); height: 100%; background-color: #000; transition: 600ms ease; z-index: 1 }
.wrapper .footer-motion-box span { position: absolute; background-color: #000; bottom: 0px; height: var(--br-1); width: var(--br-1); overflow: hidden; transition: 600ms ease }
.wrapper .footer-motion-box span::before { content: ""; position: absolute; width: var(--br-1); height: var(--br-1); bottom: 0; background: #fff; z-index: 9; transition: 600ms ease }
.wrapper .footer-motion-box.left { transform: translateX(calc(-100% - var(--br-1))) }
.wrapper .footer-motion-box.left span { left: max(1.5625vw, 20px) }
.wrapper .footer-motion-box.left span::before { right: 0; border-bottom-left-radius: var(--br-1) }
.wrapper .footer-motion-box.right { right: 0; transform: translateX(calc(100% + var(--br-1))) }
.wrapper .footer-motion-box.right span { right: max(1.5625vw, 20px) }
.wrapper .footer-motion-box.right span::before { left: 0; border-bottom-right-radius: var(--br-1) }
.wrapper .footer-motion-box.is-blue span::before { background-color: #004098 }
@media screen and (max-width: 1024px) {
.wrapper .footer-motion-box { display: none }
}
.content-container { position: relative; background-color: #fff; box-sizing: border-box; overflow: hidden; z-index: 10; transform-origin: bottom; transition: 600ms ease; min-height: 100vh }
.content-container[data-view-type=no-footer] { margin-bottom: 0 !important }
@media screen and (max-width: 1024px) {
.content-container { border-radius: 0 0 var(--br-2) var(--br-2); margin-bottom: 0 !important }
}
footer { background-color: #000; margin: 0 auto; color: #ddd; font-size: 20px }
@media screen and (min-width: 1025px) {
footer { position: fixed; bottom: 0; left: 0; width: 100%; bottom: 0; z-index: 9 }
}
@media screen and (max-width: 1024px) {
footer { position: relative; z-index: 11 !important }
}
footer .footer { position: relative; padding: max(2.0833vw, 40px) 0; display: flex; flex-direction: column; justify-content: center; align-items: center; align-items: flex-start; flex-wrap: wrap; width: 100% }
@media screen and (max-width: 767px) {
footer .footer { padding: 60px 0 }
}
footer .footer-top, footer .footer-mid, footer .footer-bottom, footer .footer-family-site { width: 100% }
footer .footer-inner { display: flex; justify-content: space-between; align-items: center; align-items: flex-start; width: 100% }
@media screen and (min-width: 768px) {
[lang=ko] footer .footer-top { margin-bottom: max(3.75vw, 60px) }
[lang=en] footer .footer-top { margin-bottom: max(4.8958vw, 60px) }
}
@media screen and (max-width: 767px) {
footer .footer-top { margin-bottom: 40px }
footer .footer-top .footer-inner { flex-direction: column-reverse; align-items: baseline }
}
footer .footer-logo { height: max(1.875vw, 30px) }
footer .footer-logo img { width: auto; height: 100%; display: block }
@media screen and (max-width: 767px) {
footer .footer-logo { height: 32px }
}
[lang=en] footer .footer-logo { height: max(3.125vw, 40px) }
@media screen and (max-width: 767px) {
[lang=en] footer .footer-logo { height: 40px }
}
footer .footer-mid .footer-inner { margin-bottom: max(1.6667vw, 22px) }
footer .footer-mid .footer-inner .inner { border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: max(1.6667vw, 22px); width: 100%; display: flex; justify-content: space-between; align-items: flex-end }
@media screen and (max-width: 1024px) {
footer .footer-mid .footer-inner { border-bottom: none; padding-bottom: 0 }
}
@media screen and (max-width: 767px) {
footer .footer-mid .footer-inner { margin-bottom: 2.4rem }
footer .footer-mid .footer-inner .inner { border-bottom: 0; padding-bottom: 0 }
}
footer .footer-mid .footer-isms-box { display: flex; gap: 2.4rem; align-items: center; margin-bottom: 3.2rem }
footer .footer-mid .footer-isms-box .icon img { width: 6.2rem }
footer .footer-mid .footer-isms-box .txt-box { display: flex; flex-direction: column; gap:.8rem
}
footer .footer-mid .footer-isms-box .txt-box .txt { display: flex; gap: 1rem; font-size:max(.7813vw, 12px);
font-weight: 400; line-height: 1.4 }
footer .footer-mid .footer-isms-box .txt-box .txt span { color: #999 }
@media screen and (max-width: 767px) {
footer .footer-mid .footer-isms-box { gap: 1.2rem; flex-direction: column; align-items: flex-start; margin-bottom: 2.4rem }
footer .footer-mid .footer-isms-box .icon img { width: 5.6rem }
footer .footer-mid .footer-isms-box .txt-box { gap:.6rem
}
footer .footer-mid .footer-isms-box .txt-box .txt { font-size: 1.3rem }
footer .footer-mid .footer-isms-box .txt-box .txt span { text-wrap: nowrap }
}
@media screen and (max-width: 767px) {
footer .footer-mid .awards { display: none }
}
footer .footer-mid .awards .webaward img { width: 5rem }
@media screen and (max-width: 1024px) {
footer .footer-mid .awards .webaward img { width: 4.2rem }
}
footer .footer-desc {
font-size:max(.7813vw, 12px); font-weight: 400; line-height: 1.4 }
footer .footer-desc p:not(:first-child) { margin-top: .5333333333em }
@media screen and (max-width: 767px) {
footer .footer-desc { font-size: 1.3rem }
footer .footer-desc p:not(:first-child) { margin-top: .6153846154em }
}
footer .footer-bottom .footer-inner .inner { width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap }
footer .footer-bottom .footer-inner .inner a { color: #ddd }
footer .footer-bottom .footer-inner .inner a.bold { color: #299be5 }
@media screen and (max-width: 767px) {
footer .footer-bottom .footer-inner { justify-content: flex-start; align-items: flex-start; margin-bottom: 3rem }
footer .footer-bottom .footer-inner .inner { border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 3rem; align-items: flex-start; gap: 4.5rem; flex-wrap: nowrap }
}
@media screen and (max-width: 767px) {
footer .footer-bottom .footer-inner { margin-bottom: 30px }
}
footer .footer-left, footer .footer-right, footer .footer-social { display: flex; justify-content: center; align-items: center; gap: 1.6em; font-size:max(.7813vw, 12px);
font-weight: 400; line-height: 21px }
@media screen and (max-width: 1366px) {
footer .footer-left, footer .footer-right, footer .footer-social { gap: 1.3333333333em }
}
@media screen and (max-width: 767px) {
footer .footer-left, footer .footer-right, footer .footer-social { width: 50%; flex-direction: column; align-items: flex-start; font-size: 1.4rem; gap: 1.0714285714em }
}
footer .footer-social { display: none; margin-top: 2.1333333333em; justify-content: flex-start }
@media screen and (min-width: 768px) {
[lang=en] footer .footer-right { display: none }
[lang=en] footer .footer-social { display: flex }
}
@media screen and (min-width: 768px)and (max-width: 1024px) {
[lang=en] footer .footer-left { flex-wrap: wrap; justify-content: flex-start; row-gap:.6rem
}
}
@media screen and (min-width: 768px) {
footer .footer-family-site { overflow: hidden }
}
footer .footer-family-site .family-site-box { margin-left: 0; position: absolute; top: max(2.0833vw, 40px); right:calc(max(1.5625vw, 20px) + 4.6875vw + 2.3958333333vw + .625vw)
}
footer .footer-family-site .family-site-box .drop-box-inner .inner-box { display: flex; flex-direction: column; gap: 1.5625vw }
footer .footer-family-site .family-site-list { display: flex; flex-direction: column; gap:.78125vw;
padding-left:.4166666667vw;
margin-top:.7291666667vw
}
footer .footer-family-site .family-site-list-box .tit { display: block; font-size:.6770833333vw;
color: #999; font-weight: 400 }
footer .footer-family-site .family-site-list-box:last-child { margin-bottom: 1.0416666667vw }
footer .footer-family-site .family-site-list li { display: inline-flex }
footer .footer-family-site .family-site-list a {
font-size:.78125vw; color: #fff; line-height: 1.25 }
footer .footer-family-site .family-site-list a:hover { text-decoration-line: underline; text-underline-position: under; text-decoration-thickness: 1px }
@media screen and (max-width: 1366px) {
footer .footer-family-site .family-site-box { right:calc(max(1.5625vw, 20px) + 4.6875vw + 3.6rem + .8rem)
}
}
@media screen and (max-width: 1024px) {
footer .footer-family-site .family-site-list { gap: 1.3rem; margin-top: 1.2rem }
footer .footer-family-site .family-site-list-box .tit { font-size: 1.2rem }
footer .footer-family-site .family-site-list-box:last-child { margin-bottom: 1.6rem }
footer .footer-family-site .family-site-list a { font-size: 1.3rem }
}
@media screen and (max-width: 767px) {
footer .footer-family-site .family-site-box { position: relative; top: unset; right: unset }
footer .footer-family-site .family-site-box .drop-box-inner .inner-box { gap: 2rem }
}
footer .footer-family-site .drop-box-wrap .drop-box { position: absolute; bottom: 2px; width: 100%; height: var(--btn-height); max-height: 18.9583333333vw; border: 1px solid #a0a0a0; border-radius: 1.25vw 1.25vw 25px 25px; background-color: #111; visibility: hidden; overflow: hidden; transition: all ease .5s; z-index: 1 }
footer .footer-family-site .drop-box-wrap .drop-box-inner { padding: 1.0416666667vw }
footer .footer-family-site .drop-box-wrap .drop-box-inner .inner-box { max-height: calc(18.9583333333vw - var(--btn-height) - 1.0416666667vw); overflow-y: scroll; margin-right:-.4166666667vw
}
footer .footer-family-site .drop-box-wrap .drop-box-inner .inner-box::-webkit-scrollbar {
width:.2604166667vw
}
footer .footer-family-site .drop-box-wrap .drop-box-inner .inner-box::-webkit-scrollbar-thumb {
width:.2604166667vw;
border-radius:50px;
background:#a0a0a0
}
footer .footer-family-site .drop-box-wrap .drop-box-btn { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: .875em 1.5em; border: 1px solid #a0a0a0; width: max(11.4583vw, 160px); height: max(2.3958vw, 36px); background-color: #111; border-radius: 3rem; color: #fff; font-size:max(.8333vw, 13px);
font-weight: 500; cursor: pointer }
footer .footer-family-site .drop-box-wrap .drop-box-btn svg { display: block; width:.7291666667vw;
height:.7291666667vw;
transition: all ease .3s }
footer .footer-family-site .drop-box-wrap[data-dropbox-open=true] .drop-box { height: 18.9583333333vw; visibility: visible }
footer .footer-family-site .drop-box-wrap[data-dropbox-open=true] .drop-box-btn svg { transform: rotate(180deg) }
@media screen and (max-width: 1024px) {
footer .footer-family-site .drop-box-wrap .drop-box { max-height: none }
footer .footer-family-site .drop-box-wrap .drop-box-inner { padding: 1.6rem }
footer .footer-family-site .drop-box-wrap .drop-box-inner .inner-box { max-height: calc(34rem - var(--btn-height) - 1.6rem) }
footer .footer-family-site .drop-box-wrap .drop-box-btn { width: 16rem; height: 3.6rem; padding: 0 1.6rem; font-size: 1.3rem }
footer .footer-family-site .drop-box-wrap .drop-box-btn svg { width: 1rem; height: 1rem }
footer .footer-family-site .drop-box-wrap[data-dropbox-open=true] .drop-box { height: 34rem }
}
@media screen and (max-width: 767px) {
footer .footer-family-site .drop-box-wrap .drop-box { border-radius: 1.8rem; max-height: none }
footer .footer-family-site .drop-box-wrap .drop-box-inner { padding: 1.6rem }
footer .footer-family-site .drop-box-wrap .drop-box-inner .inner-box { max-height: calc(34rem - var(--btn-height) - 1.6rem); margin-right: -6px }
footer .footer-family-site .drop-box-wrap .drop-box-inner .inner-box::-webkit-scrollbar {
width:4px
}
footer .footer-family-site .drop-box-wrap .drop-box-inner .inner-box::-webkit-scrollbar-thumb {
width:4px
}
footer .footer-family-site .drop-box-wrap[data-dropbox-open=true] .drop-box { height: 34rem }
}
footer .footer-family-site .footer-inner { align-items: flex-end }
@media screen and (min-width: 768px) {
footer .footer-family-site .awards { display: none }
}
footer .footer-family-site .awards .webaward img { width: 4.2rem }
footer .footer-topbtn { width: 2.3958333333vw }
footer .footer-topbtn img { display: block; width: 100% }
footer .footer-topbtn:hover, footer .footer-topbtn:active { cursor: pointer }
@media screen and (max-width: 1366px) {
footer .footer-topbtn { width: 3.6rem }
}
@media screen and (max-width: 767px) {
footer .footer-topbtn { margin:2rem 0 .4rem auto
}
}
@media screen and (max-width: 767px) {
footer .footer>div:nth-of-type(1) { order: 1 }
footer .footer>div:nth-of-type(2) { order: 3 }
footer .footer>div:nth-of-type(3) { order: 2 }
footer .footer>div:nth-of-type(4) { order: 4 }
}
@media screen and (max-width: 767px) {
footer .footer { padding: 0 0 6rem 0 }
}
footer .business-detail-area { display: none }
footer .business-detail-area .business-links { display: flex; gap:.7291666667vw
}
footer .business-detail-area .business-links li { flex: 1; position: relative }
footer .business-detail-area .business-links a { display: block; overflow: hidden; border-radius: var(--br-4) }
footer .business-detail-area .business-links a img { transition: 600ms ease }
@media(hover: hover)and (pointer: fine) {
footer .business-detail-area .business-links a:hover img { transform: scale(1.1) }
}
footer .business-detail-area .cont { position: absolute; left: 1.5625vw; bottom: 1.5625vw }
footer .business-detail-area .cont span { display: block }
footer .business-detail-area .cont small { display: block; font-size:max(.625vw, 1rem);
text-transform: uppercase }
footer .business-detail-area .border { border-bottom: 1px solid rgba(255,255,255,.6) }
@media screen and (max-width: 1024px) {
footer .business-detail-area .cont { left: 1.6rem; bottom: 1.6rem }
footer .business-detail-area .cont small { display: block; font-size: 1.1rem }
}
@media screen and (max-width: 767px) {
footer .business-detail-area .business-links { display: grid; gap:.8rem;
grid-template-columns: repeat(2, 1fr) }
footer .business-detail-area .tit-more { margin-bottom: 2rem }
}
[data-view-type=business-detail]+footer .business-detail-area {
display:block
}
[data-gnb="2-1"] footer { display: none }
[data-gnb="2-2"] footer .business-links li:nth-child(1) { display: none }
[data-gnb="2-3"] footer .business-links li:nth-child(2) { display: none }
[data-gnb="2-4"] footer .business-links li:nth-child(3) { display: none }
[data-gnb="2-5"] footer .business-links li:nth-child(4) { display: none }
[data-gnb="2-6"] footer .business-links li:nth-child(5) { display: none }
:root { --br-1: 1.5625vw;
--br-2: 1.3021vw;
--br-3: 1.0417vw;
--br-4: 0.7813vw
}
.br-1 { border-radius: var(--br-1) }
.br-2 { border-radius: var(--br-2) }
.br-3 { border-radius: var(--br-3) }
.br-4 { border-radius: var(--br-4) }
@media screen and (max-width: 1024px) {
:root { --br-1: 2.4414vw;
--br-2: 1.9531vw;
--br-3: 1.4648vw;
--br-4: 0.9766vw
}
.br-1 { border-radius: var(--br-1) }
.br-2 { border-radius: var(--br-2) }
.br-3 { border-radius: var(--br-3) }
.br-4 { border-radius: var(--br-4) }
}
@media screen and (max-width: 767px) {
:root { --br-1: 5.1282vw;
--br-2: 4.1026vw;
--br-3: 3.0769vw;
--br-4: 2.0513vw
}
.br-1 { border-radius: var(--br-1) }
.br-2 { border-radius: var(--br-2) }
.br-3 { border-radius: var(--br-3) }
.br-4 { border-radius: var(--br-4) }
}
@font-face { font-family: "fontello"; src: url("/font/fontello.woff2") format("woff2"), url("/font/fontello.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap }
.icon-arrow { display: inline-block }
.icon-arrow:before { content: ""; display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.icon-search { display: inline-block }
.icon-search:before { content: ""; display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.icon-link { display: inline-block }
.icon-link:before { content: ""; display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.icon-down { display: inline-block }
.icon-down:before { content: ""; display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.icon-up { display: inline-block }
.icon-up:before { content: ""; display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
button { color: initial }
.btn { position: relative; display: inline-flex; min-width: min(8.5416666667vw, 164px); padding:min(.6770833333vw, 13px) min(1.1458333333vw, 22px) min(.6770833333vw, 13px) min(1.25vw, 24px);
align-items: center; justify-content: center; box-sizing: border-box; font-size:min(.8854166667vw, 17px);
line-height: 1; letter-spacing: -0.02em; font-weight: 500; border-radius: 3rem; color: #000; transition: 600ms ease; overflow: hidden; font-family: "Pretendard", Arial, sans-serif; cursor: pointer }
.btn * { position: relative; z-index: 2 }
.btn svg {
margin-left:min(.625vw, 1.2rem); width: min(1.0416666667vw, 20px) }
.btn svg rect, .btn svg path { transition: 600ms ease }
.btn::before, .btn::after { content: ""; position: absolute; top: 0; width: 100%; height: 100%; border-radius: 3rem }
.btn::before { left: 0; border: 1px solid #ccc }
.btn::after { background-color: #004098; transform: translateX(-100%); transition: transform 600ms ease; left: -2px }
.btn-arrow { justify-content: space-between }
.btn--white { color: #fff }
.btn--white::before { border-color: rgba(255,255,255,.6) }
.btn--white::after { background-color: #fff }
.btn--en { font-family: "Pretendard", Arial, sans-serif }
.btn:disabled { color: #ccc !important; border-color: #ccc !important; background-color: rgba(0,0,0,0) !important; cursor: default; pointer-events: none }
.btn:disabled svg path { stroke: #ccc !important }
.btn--s { font-size: 14px; padding: 13px 24px }
@media(hover: hover)and (pointer: fine) {
.btn:hover, .btn:focus { color: #fff }
.btn:hover svg rect, .btn:hover svg path, .btn:focus svg rect, .btn:focus svg path { stroke: #fff }
.btn:hover::after, .btn:focus::after { transform: translateX(0); left: 0 }
.btn--white:hover, .btn--white:focus { color: #000 }
.btn--white:hover.btn-arrow svg rect, .btn--white:hover.btn-arrow svg path, .btn--white:focus.btn-arrow svg rect, .btn--white:focus.btn-arrow svg path { stroke: #000 }
}
@media screen and (max-width: 1366px) {
.btn { min-width: 11.4rem; padding:.9rem 1.6rem .9rem 1.8rem;
font-size: 1.3rem }
.btn svg { width: 1.4rem }
}
@media screen and (max-width: 1024px) {
.btn { min-width: 12.4rem; padding-left: 1.6rem; font-size: 1.4rem }
.btn svg { width: 1.8rem }
}
@media screen and (max-width: 767px) {
.btn { min-width: 12.4rem; padding: 1rem 1.4rem 1rem 1.6rem; gap:.8rem;
font-size: 1.4rem }
.btn svg { width: 1.6rem; height: 1.6rem }
}
[lang=en] .btn { width: fit-content }
[lang=en] .btn span { text-transform: uppercase }
[lang=en] .btn svg { margin-left:min(.625vw, 1.2rem)
}
.badge { display: inline-block; padding: 7px 10px; border: 1px solid rgba(0,0,0,.8); border-radius: 4px; font-size: 1.6rem; line-height: 1 }
.badge--em { background-color: rgba(0,0,0,.8); color: #fff }
.category { display: inline-block; font-size: 1.0416666667vw; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; background-color: #004098; color: #fff; padding:min(.2604166667vw, 5px) min(.625vw, 12px);
border-radius:.5208333333vw
}
@media screen and (max-width: 1024px) {
.category { font-size: 1.2rem; padding:.3rem .9rem;
border-radius:.5rem
}
}
.tag-list { display: flex; align-items: flex-start; gap:.4rem
}
.tag1 { text-transform: uppercase; display: inline-flex; padding: .3571428571em .7142857143em; justify-content: center; align-items: center; text-align: center; border-radius: var(--br-3); color: #fff; font-size:max(.7292vw, 11px);
line-height: 1; font-weight: 600; background-color: #adadad; border: 1px solid #adadad; height: 1.25vw }
.tag1.youtube { background-color: red; border: 1px solid red }
.tag1.blog { background-color: #31a836; border: 1px solid #31a836 }
@media screen and (max-width: 1024px) {
.tag1 { height: 17px }
}
.tag1.hashtag { background-color: rgba(0,0,0,0); color: #666; border: 1px solid #ccc; box-sizing: border-box; font-weight: 500; text-align: left }
.tag1.hashtag em { display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical }
@media screen and (max-width: 1366px) {
.tag1 { padding:.3rem .6rem;
font-size:.9rem
}
}
@media screen and (max-width: 1024px) {
.tag1 {
padding:.3rem .7rem .4rem .7rem; font-size: 1rem }
}
.breadcrumb { width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: right }
.breadcrumb li { position: relative; padding-right: 1.1rem; line-height: 1; display: inline-block; font-size: 1.2rem; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: .22px; text-align: left }
.breadcrumb li:last-child { padding-right: 0 }
.breadcrumb li:not(:last-of-type) { margin-right:.7rem
}
.breadcrumb li:after { content: ""; display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px; display: block; position: absolute; font-size: 14px; top: 50%; right: -0.4rem; transform: translateY(-50%) rotateZ(90deg) }
.breadcrumb li>a { color: #000 }
.breadcrumb li:nth-last-of-type(1)::after { display: none }
.breadcrumb li:nth-last-of-type(1)>a { color: #666 }
.tab-wrap { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none }
.tab-wrap::-webkit-scrollbar {
display:none
}
.tab-wrap::-webkit-scrollbar {
width:0;
height:0
}
.tab-wrap .tab-list { display: flex; flex-wrap: nowrap; font-size: max(1.25vw, 16px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.5 }
.tab-wrap .tab-list li { flex: 0 0 auto; cursor: pointer; margin-right: 1.5em; color: #000; opacity: .4; position: relative }
@media screen and (max-width: 1024px) {
.tab-wrap .tab-list li { margin-right: 1.6rem }
}
.tab-wrap .tab-list li:not(.link) { padding: 0 1rem 1.4rem }
.tab-wrap .tab-list li.link a { display: block; padding: 0 1rem 1.4rem }
.tab-wrap .tab-list li::after { content: ""; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,0); width: 100%; height: 2px }
.tab-wrap .tab-list li.active { color: #004098; pointer-events: none; opacity: 1 }
.tab-wrap .tab-list li.active::after { background: #004098; width: 100%; height: 2px }
.tab-wrap .tab-list li.count-tab { display: inline-flex; gap:.3rem
}
.tab-wrap .tab-list li.count-tab .count {
font-size:max(.6770833333vw, 1.3rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.5; margin:max(.15625vw, 3px) 0
}
.tab-wrap .tab-list li.count-tab .icon { display: block; height: 1rem; line-height: 0; margin:max(.3645833333vw, 7px) 0
}
.tab-wrap .tab-list li.count-tab.active .icon { display: none }
@media screen and (max-width: 1024px) {
.tab-wrap .tab-list li.count-tab { margin-right: 1.6rem; padding:0 .6rem .8rem
}
.tab-wrap .tab-list li.count-tab .count { margin:max(.1041666667vw, 2px) 0;
font-size:.9rem
}
.tab-wrap .tab-list li.count-tab .icon { margin: 4px 0; height:.9rem
}
}
@media screen and (hover: hover) {
.tab-wrap .tab-list li:hover, .tab-wrap .tab-list li:active { color: #004098; opacity: 1 }
.tab-wrap .tab-list li:hover::after, .tab-wrap .tab-list li:active::after { background: #004098; width: 100%; height: 2px }
}
@media screen and (max-width: 1024px) {
.tab-wrap .tab-list li { margin-right: 1.6rem }
.tab-wrap .tab-list li:not(.link) { padding: 0 1rem 1.4rem }
.tab-wrap .tab-list li.link a { padding: 0 1rem 1.4rem }
.tab-wrap .tab-list li.active::after { width: 100%; height: 2px }
}
@media screen and (max-width: 767px) {
.tab-wrap .tab-list { font-size: max(1.25vw, 16px); line-height: 1.45 }
.tab-wrap .tab-list li { margin-right: 1.6rem }
.tab-wrap .tab-list li:not(.link) { padding:0 .6rem .8rem
}
.tab-wrap .tab-list li.link a { padding:0 .6rem .8rem
}
}
.tab-wrap .tab-list-capsule { display: flex; flex-wrap: nowrap; font-size:max(.9375vw, 15px);
font-weight: 500; line-height: 1 }
.tab-wrap .tab-list-capsule li { flex: 0 0 auto; cursor: pointer; margin-right:.8rem;
color: #666; border: 1px solid #ccc; padding:.9rem 1.6rem;
border-radius: 20px }
.tab-wrap .tab-list-capsule li.active { color: #fff; pointer-events: none; background: #004098 }
@media screen and (hover: hover) {
.tab-wrap .tab-list-capsule li:hover, .tab-wrap .tab-list-capsule li:active { color: #fff; background: #004098 }
}
@media screen and (min-width: 1025px) {
.tab-wrap .tab-list-capsule { flex-wrap: wrap; row-gap:.8rem
}
}
@media screen and (max-width: 767px) {
.tab-wrap .tab-list-capsule { font-size: 1.5rem; padding:.7rem 1.2rem .7rem 0rem
}
}
.tab-container { border-bottom: 1px solid #e0e0e0 }
.selectbox { position: relative; min-width: 240px; margin-left: auto; color: #000 }
.selectbox * { -webkit-box-sizing: border-box; box-sizing: border-box }
.selectbox .select__btn { width: 100%; min-height: unset; font-size: max(18px, 1.25rem); color: inherit; padding: .4em 2.1em .4em .7em; font-weight: 400; line-height: .9; text-align: left; word-break: break-all; margin-top: 16px; border: solid 1px #000; border-radius: 26px; -webkit-border-radius: 26px; -webkit-transition: all .3s; transition: all .3s }
.selectbox .select__btn:nth-of-type(1) { margin-top: 0 }
.selectbox .select__btn:before, .selectbox .select__btn+.drop-box button:nth-of-type(1):before { display: block; content: ""; position: absolute; top: 0; right: .7em; width: .9em; height: 100%; background-size: .9em; -webkit-transition: all .2s; transition: all .2s; font-size: max(18px, 1.25rem) }
.selectbox .select__btn:hover { color: #fff; background-color: #000 }
.selectbox .select__btn:hover:before { background-image: url("https://trading.samsungcnt.com/assets/source/common/ico-dropdown-white.svg") }
.selectbox .select__btn.open { background-color: #000 }
.selectbox .select__btn.open:before { -webkit-transform: rotate(180deg); transform: rotate(180deg) }
.selectbox .drop-box { opacity: 0; overflow: hidden; position: absolute; top: 0; left: 0; right: 0; max-height: 80vh; z-index: 2; border-radius: 25px; background-color: #000; -webkit-transition: height .4s cubic-bezier(0.25, 1, 0.5, 1); transition: height .4s cubic-bezier(0.25, 1, 0.5, 1) }
.selectbox .drop-box::-webkit-scrollbar {
width:0
}
.selectbox .drop-box.active { overflow: hidden scroll }
.selectbox .drop-box.active button:nth-of-type(1) { position: relative }
.selectbox .drop-box.active button:nth-of-type(1):before { -webkit-transform: rotate(180deg); transform: rotate(180deg); background-image: url("https://trading.samsungcnt.com/assets/source/common/ico-dropdown-white.svg") }
.selectbox .drop-box button { height: auto; min-height: 36px; padding: .3em .9em .6em .7em; display: block; width: 100%; font-size: max(16px, 1.125rem); font-weight: 400; color: #fff; line-height: 1; text-align: left; word-break: break-all }
.selectbox .drop-box button.selected, .selectbox .drop-box button.active { color: #000 }
.selectbox .drop-box button.selected { position: relative; font-size: max(18px, 1.25rem); color: #cdff46; text-decoration: underline }
@media screen and (hover: hover) {
.selectbox .drop-box button:hover { color: #cdff46; background-color: rgba(0,0,0,0) }
}
.selectbox .drop-box button:nth-of-type(1) { padding-top: .5em; padding-bottom: .5em }
.selectbox .drop-box button:nth-last-of-type(1) { margin-bottom: 0; padding-bottom: .8em }
.selectbox.ready .drop-box { opacity: 1; height: 0 }
.selectbox.white { color: #fff; font-size: 13px }
.selectbox.white .select__btn { border: 1px solid rgba(255,255,255,.6); padding: .7692307692em 1.2307692308em; font-size: 13px; font-style: normal; font-weight: 500; line-height: normal; border-radius: 1.5384615385em; height: 3.5384615385em }
.selectbox.white .drop-box { border-radius: 1.5384615385em }
.selectbox.white .drop-box button.selected { font-size: 13px; font-style: normal; font-weight: 500; line-height: normal; border-radius: 1.5384615385em; height: 3.5384615385em; border: 1px solid rgba(255,255,255,.6); padding: .7692307692em 1.2307692308em }
.indicator { display: block; font-size: 0; margin: 0 auto; text-align: center }
.indicator button { width: 20px; height: 20px; font-size: inherit }
.indicator button:before { content: ""; overflow: hidden; display: block; width: 8px; height: 8px; margin: auto; background-color: rgba(0,0,0,.15); box-sizing: border-box; color: rgba(0,0,0,0); border-radius: 50%; transition: background-color .2s, opacity .2s }
.indicator button:hover:before, .indicator button:focus:before { background-color: #4d4d4d }
.indicator li { display: inline-block; vertical-align: middle }
.indicator li.is-current button:before { background-color: #4d4d4d }
.indicator--invert li.is-current button:before { background-color: #fff }
.indicator--invert button:before { background-color: rgba(255,255,255,.4) }
.indicator--invert button:hover:before, .indicator--invert button:focus:before { background-color: #fff }
[inmotion-first] {
opacity:0
}
@media screen and (max-width: 1024px) {
[inmotion-first] {
opacity:1
}
}
[kv-masking-section] .pre-cont { white-space: nowrap; overflow: hidden }
@media screen and (max-width: 1024px) {
[kv-masking-section] .pre-cont { word-break: break-word; white-space: wrap; max-width: 100vw }
[kv-masking-section] .pre-cont .kv-title { max-width: 100vw }
}
.pre-cont { overflow: hidden }
.pre-cont>* { opacity: 0 }
[kv-fullinmotionpage] .pre-cont { overflow: hidden }
[kv-fullinmotionpage] .pre-cont { width: 100%; height: fit-content; display: block; overflow: hidden; position: relative; font-size: 20px; overflow: hidden; height:calc(1*max(5vw, 64px))
}
[kv-fullinmotionpage] .pre-cont:has(.sub-t4-m) {
display:block;
font-size:20px;
margin:.8em max(1.5625vw, 20px) 0 max(1.5625vw, 20px)
}
[kv-fullinmotionpage] .pre-cont .sub-h1 { position: absolute; left: 50%; top: 0; transform: translateX(-50%); line-height: 1; opacity: 0 }
@media screen and (max-width: 1024px) {
[kv-fullinmotionpage] .pre-cont { width: unset }
}
[kv-fullinmotionpage] .sub-t4-m:not(.swiper-title) { display: block; margin-top: 0.9583333333em; opacity: 0 }
@media screen and (max-width: 767px) {
[kv-fullinmotionpage] .sub-t4-m:not(.swiper-title) { margin-top: 0 }
}
[kv-fullinmotionpage] .head-cont { margin-top: var(--header-total-height); width: 100vw }
[kv-fullinmotionpage] .kv-section { font-size: max(1.0417vw, 14px); height:calc(100vh - max(100px, 13vh) + 2.2em + max(1.0417vw, 14px)*1.5 - var(--header-total-height));
overflow: visible; position: relative; text-align: center; position: relative; margin: 0 }
@media screen and (max-width: 1024px) {
[kv-fullinmotionpage] .kv-section { font-size: 16px; height: calc(88dvh - env(safe-area-inset-bottom) + 2.2em + 24px - var(--header-total-height)) }
}
@media screen and (max-width: 767px) {
[kv-fullinmotionpage] .kv-section { height: calc(84vh - env(safe-area-inset-bottom) + 2.2em + 24px - var(--header-total-height)) }
@supports(height: 84dvh) {
[kv-fullinmotionpage] .kv-section {
height:calc(84dvh - env(safe-area-inset-bottom) + 2.2em + 24px - var(--header-total-height))
}
}
}
@media screen and (max-width: 767px) {
[kv-fullinmotionpage] .kv-title { word-break: keep-all; white-space: nowrap }
}
[kv-fullinmotionpage] .kv-desc { margin-left: max(1.5625vw, 20px); margin-right: max(1.5625vw, 20px) }
[kv-fullinmotionpage] .kv-image-cont { opacity: 0; transform: translateY(20%) }
[kv-fullinmotionpage] .kv-imgcont { pointer-events: none; position: absolute; opacity: 0; transform: translateY(20%); overflow: hidden; margin-left: max(1.5625vw, 20px); margin-right: max(1.5625vw, 20px); height: 33.8542vw; position: relative; margin: 0 auto; border-radius: var(--br-2); margin-bottom: 6.4vmax; margin-bottom: clamp(108px, 8.3333vw, 200px) }
[kv-fullinmotionpage] .kv-imgcont img { pointer-events: none; display: block; width: 100vw; height: 100vh; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }
[kv-fullinmotionpage] .kv-imgcont img[desktop-tablet-only] { height: max(33.854vw, 650px) }
@media screen and (max-width: 1024px) {
[kv-fullinmotionpage] .kv-imgcont { height: 40rem; width:calc(100vw - max(1.5625vw, 20px)*2)
}
}
@media screen and (max-width: 767px) {
[kv-fullinmotionpage] .kv-imgcont { height: 640px }
}
[kv-fullinmotionpage] .kv-realimgcont { pointer-events: none; position: fixed; width: 100vw !important; height: 100vh; transform: translateY(1.7%); left: 0; top: 0; opacity: 0; overflow: hidden; margin-bottom: 6.4vmax }
[kv-fullinmotionpage] .kv-realimgcont::after { width: 100%; height: 100%; content: ""; display: block; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 45.31%, rgba(0, 0, 0, 0.5) 100%); position: fixed; left: 0; top: 0; z-index: 0 }
[kv-fullinmotionpage] .kv-realimgcont img { display: block; width: 100vw; height: 100vh; object-fit: cover; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0) }
@media screen and (max-width: 1024px) {
[kv-fullinmotionpage] .kv-realimgcont { width:calc(100vw - max(1.5625vw, 20px)*2)
}
}
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] { z-index: 1; display: flex; justify-content: center; align-items: center; color: #fff; gap: 2.4em; position: absolute; bottom: 2.15em; left: 0; width: 100vw; justify-content: flex-start }
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li:first-of-type { display: block; margin-left: calc(max(1.5625vw, 20px) + 4.6875vw) }
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li:last-of-type { display: block; margin-right: calc(max(1.5625vw, 20px) + 4.6875vw) }
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li:hover { cursor: pointer }
@media screen and (max-width: 1024px) {
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li { word-break: keep-all; white-space: nowrap }
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li:first-of-type { display: block; margin-left: calc(max(1.5625vw, 20px) + 3.9063vw) }
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li:last-of-type { display: block; margin-right: calc(max(1.5625vw, 20px) + 3.9063vw) }
}
@media screen and (max-width: 767px) {
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li:first-of-type { display: block; margin-left: 4.1026vw }
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li:last-of-type { display: block; margin-right: 4.1026vw }
}
@media screen and (max-width: 767px) {
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] { overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none }
[kv-fullinmotionpage] .kv-section ul[kv-maindesc]::-webkit-scrollbar {
display:none
}
}
@media screen and (max-width: 1024px) {
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] { gap: 1.3333333333em }
}
[kv-fullinmotionpage] .kv-textarea { z-index: 1; width: 100vw; position: absolute; left: 0; bottom: 0; opacity: 0; bottom:calc(2.15em + max(1.0417vw, 14px)*1.5);
font-size: 20px; color: #fff; text-align: left }
[kv-fullinmotionpage] .kv-btn { opacity: 0; background-color: #004098; border-radius: 50%; transform: translateY(50%); display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; z-index: 1001; right: calc(max(1.5625vw, 20px) + 4.6875vw); background: #004098 url(/images/ksob_arrow_bottom.svg) no-repeat center; background-size: max(1.5625vw, 2rem); width: max(3.9583vw, 5.2rem); height: max(3.9583vw, 5.2rem) }
@media screen and (max-width: 1024px) {
[kv-fullinmotionpage] .kv-btn { right: calc(max(1.5625vw, 20px) + 3.9063vw); width: 5.6rem; height: 5.6rem; bottom: -0.4em }
[kv-fullinmotionpage] .kv-btn svg { width: 1.15em }
}
@media screen and (max-width: 767px) {
[kv-fullinmotionpage] .kv-btn { right: 2.8rem; width: 4.8rem; height: 4.8rem; bottom: -0.25em; background-size: 50% }
[kv-fullinmotionpage] .kv-btn svg { width: 1em }
}
[lang=en] [kv-masking-section] .pre-cont { height:calc(1.2*max(5vw, 64px))
}
@media screen and (max-width: 1024px) {
[lang=en] [kv-masking-section] .pre-cont { white-space: nowrap; height: 60px }
}
@media screen and (max-width: 767px) {
[lang=en] [kv-masking-section] .pre-cont { height: 48px }
}
.pagination .prev, .pagination .prev--latest, .pagination .next, .pagination .next--first, .pagination .page { display: inline-block; overflow: hidden; position: relative; z-index: 1; height: 40px; min-width: 40px; line-height: 38px; border-radius: 50% }
.pagination a.prev:hover:after, .pagination a.prev--latest:hover:after, .pagination a.next:hover:after, .pagination a.next--first:hover:after, .pagination a.page:hover span { color: #333; background-color: #444 }
.pagination { margin-top: 5rem; font-size: 0; text-align: center }
.pagination .page { box-sizing: border-box; text-decoration: none; font-size: 1.5rem; transition: color .2s }
.pagination .page span { box-sizing: border-box; display: inline-block; min-width: 40px; height: 40px; padding: 0 .5em; line-height: 40px; border-radius: 40px; color: #737373; transition: background-color .2s }
.pagination .page.is-current span { background-color: #000; color: #fff }
.pagination .prev, .pagination .prev--latest, .pagination .next, .pagination .next--first { width: 40px; text-align: center; font-size: 1.5rem }
.pagination .prev:before, .pagination .prev--latest:before, .pagination .next:before, .pagination .next--first:before { color: #333; line-height: 1; vertical-align: middle }
.pagination .prev:after, .pagination .prev--latest:after, .pagination .next:after, .pagination .next--first:after { content: ""; z-index: -1; margin: 7px; border-radius: 40px; transition: background-color .2s }
.pagination .prev.is-disabled:before, .pagination .prev--latest.is-disabled:before, .pagination .next.is-disabled:before, .pagination .next--first.is-disabled:before { color: #999 }
.pagination .prev { display: inline-block }
.pagination .prev:before { display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.pagination .prev--latest { display: inline-block }
.pagination .prev--latest:before { display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.pagination .next { display: inline-block }
.pagination .next:before { display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.pagination .next--first { display: inline-block }
.pagination .next--first:before { display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.preloader { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff }
.preloader__content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem }
[accordion-wrap] {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center
}
[accordion-wrap] [accordion-li] [accordion-hiddencont] {
overflow:hidden;
display:none;
align-items:flex-start;
gap:toEm(20px);
width:100%
}
[accordion-wrap] [accordion-li].active [accordion-hiddencont] { display: flex }
[data-responsive-break] {
word-break:keep-all
}
@media screen and (max-width: 767px) {
[data-responsive-break] {
word-break:keep-all
}
[data-responsive-break] br { display: none }
}
[data-responsive-break-tablet] {
word-break:keep-all
}
@media screen and (max-width: 1024px) {
[data-responsive-break-tablet] {
word-break:keep-all
}
[data-responsive-break-tablet] br { display: none }
}
[data-responsive-break-all] {
word-break:keep-all;
word-break:keep-all
}
[data-responsive-break-all] br { display: none }
.card-news-con .mobile-unit { display: flex; justify-content: center; margin-top: 3.6rem }
@media screen and (min-width: 768px) {
.card-news-con .mobile-unit { display: none }
}
@media screen and (max-width: 767px) {
.card-news-con .unit { display: none }
}
.card-news-con .sns-list { display: flex; gap: 1.2rem }
@media screen and (max-width: 1366px)and (min-width: 1025px) {
.card-news-con .sns-list img { width: 2.4rem }
}
.card-news-top-tit-box { position: relative; display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.4rem }
.card-news-top-tit-box .tit { display: block; overflow: hidden }
.card-news-top-tit-box .tit span { display: block }
.card-news-top-tit-box .line { display: block; position: absolute; bottom: 0; width: 100%; height: 1px; background-color: #ccc }
@media screen and (max-width: 1366px) {
.card-news-top-tit-box { padding-bottom: 1.2rem }
}
@media screen and (max-width: 767px) {
.card-news-top-tit-box { display: block }
}
.card-news-list-box { margin-top: 4rem }
@media screen and (max-width: 1366px) {
.card-news-list-box { margin-top: 2.8rem }
}
@media screen and (max-width: 1024px) {
.card-news-list-box { margin-top: 2.2rem }
}
@media screen and (max-width: 767px) {
.card-news-list-box { margin-top: 2.4rem }
}
.card-news-list-box.not-line { margin-top: 2rem }
@media screen and (max-width: 1366px) {
.card-news-list-box.not-line { margin-top: 1.6rem }
}
@media screen and (max-width: 1024px) {
.card-news-list-box.not-line { margin-top: 1.6rem }
}
@media screen and (max-width: 767px) {
.card-news-list-box.not-line { margin-top: 1.6rem }
}
.card-news-list.col04 li .img-wrap { aspect-ratio: 336/189 }
.card-news-list li a { display: block; height: 100%; background-color: #f5f5f5; border-radius: var(--br-4); overflow: hidden }
.card-news-list li .img-wrap { display: block; position: relative; aspect-ratio: 454/302; border-radius: var(--br-4); overflow: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-backface-visibility: hidden; -moz-transform: translate3d(0, 0, 0) }
.card-news-list li .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: 600ms ease }
.card-news-list li .txt-box { padding: 1.5625vw }
.card-news-list li .txt-box .tit { margin-top: .4545454545em; height: 2.9em; display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; word-wrap: break-word }
.card-news-list li .txt-box .date { display: inline-block; margin-top: 1.3333333333em; color: #999 }
.card-news-list li a:hover { background-color: #eaeaea }
.card-news-list li a:hover img { transform: scale(1.1) }
@media screen and (min-width: 1025px) {
.card-news-list.col04 li .txt-box { padding: 1.25vw }
}
@media screen and (max-width: 1024px) {
.card-news-list li .txt-box { padding: 1.6rem }
.card-news-list li .txt-box .tit { margin-top: .5333333333em }
.card-news-list li .txt-box .date { margin-top: 1em }
}
@media screen and (max-width: 767px) {
.card-news-list { gap: 1.6rem }
.card-news-list.col04 { gap: 2.4rem 0 }
.card-news-list.col04 li .txt-box { padding: 1.6rem 1.2rem }
.card-news-list li .txt-box { padding: 2rem }
}
[img-slider] {
color:#fff;
width:100%;
border-radius:var(--br-4);
overflow:hidden;
font-size:20px
}
@media screen and (max-width: 767px) {
[img-slider] {
height:670px
}
}
[img-slider] [img-wrapper] {
display:flex;
justify-content:center;
align-items:center
}
@media screen and (max-width: 767px) {
[img-slider] [img-wrapper] {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center
}
}
[img-slider] [img-slide] {
width:20%;
height:max(30.4688vw, 31.2rem);
padding:2em;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
align-items:flex-start;
justify-content:flex-end;
transition:width .5s ease-in-out, height .5s ease-in-out;
position:relative;
font-size:20px
}
[img-slider] [img-slide] * { pointer-events: none !important }
[img-slider] [img-slide]::after { transition: opacity .75s ease-out; content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 64, 152, 0) 0%, rgba(0, 64, 152, 0.9) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%) 50%/cover no-repeat; position: absolute; top: 0; left: 0; opacity: 0; z-index: 0 }
[img-slider] [img-slide]:hover::after, [img-slider] [img-slide]:active::after { opacity: 1 }
@media screen and (max-width: 1024px) {
[img-slider] [img-slide] {
height:15.6em;
padding:1em;
z-index:1
}
}
@media screen and (max-width: 767px) {
[img-slider] [img-slide] {
width:100%;
height:134px;
padding:1em;
font-size:20px;
justify-content:center
}
}
[img-slider] [img-slide] img { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(62.604vw, 1202px); height: max(30.4688vw, 31.2rem); object-fit: cover; z-index: -1 }
@media screen and (max-width: 767px) {
[img-slider] [img-slide] img { height: 100% }
}
[img-slider] [img-slide] div { z-index: 2 }
[img-slider] [img-slide] span { z-index: 2; display: block; margin: 0 0 .4444444444em 0 }
[img-slider] [img-slide] p { z-index: 2; pointer-events: none !important; height: 0; opacity: 0; overflow: hidden }
@media screen and (min-width: 768px) {
[img-slider] [img-slide].active { width: max(62.604vw, 1202px) }
[img-slider] [img-slide].active p { display: block; margin-top: 1.5em }
}
@media screen and (max-width: 1024px) {
[img-slider] [img-slide].active { z-index: 2 }
}
@media screen and (max-width: 767px) {
[img-slider] [img-slide].active { height: 402px; justify-content: flex-end }
[img-slider] [img-slide].active p { opacity: 1; height: auto; margin-top: 1.5em }
}
@media screen and (min-width: 768px) {
[img-slider] [img-slide].hide { pointer-events: none }
[img-slider] [img-slide].hide div, [img-slider] [img-slide].hide span, [img-slider] [img-slide].hide p { display: none }
}
@media screen and (max-width: 767px) {
[img-slider] [img-slide].hide { height: 67px }
[img-slider] [img-slide].hide div, [img-slider] [img-slide].hide span, [img-slider] [img-slide].hide p { display: none }
}
@media screen and (min-width: 768px) {
[data-mobile-only] {
display:none !important
}
}
@media screen and (max-width: 1024px) {
[data-desktop-only] {
display:none !important
}
}
@media screen and (min-width: 768px) {
[data-mobile-only] {
display:none !important
}
}
@media screen and (min-width: 1025px) {
[data-tablet-only] {
display:none !important
}
}
@media screen and (max-width: 767px) {
[data-tablet-only] {
display:none !important
}
}
@media screen and (min-width: 1025px) {
[tablet-mobile-only] {
display:none !important
}
}
@media screen and (max-width: 767px) {
[desktop-tablet-only] {
display:none !important
}
}
@media screen and (max-width: 1024px) {
[desktop-only] {
display:none !important
}
}
@media screen and (min-width: 1025px) {
body[direction=up] [data-progress-nav].show {
--header-total-height: calc(var(--header-height) + var(--header-top-height)); transform: translate(-50%, var(--header-total-height)) !important; transition-delay: .05s }
}
body[direction=down] [data-progress-nav].show { transform: translate(-50%, 0%) !important }
[data-progress-nav] {
font-family:"Pretendard", Arial, sans-serif;
position:fixed;
width:100vw;
left:50%;
height:max(2.9167vw, 48px);
top:0;
transform:translate(-50%, -100%);
transition:transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
background-color:#dfe6ee;
z-index:10000;
display:flex;
justify-content:center;
align-items:center
}
[data-progress-nav] .popup-btn-dimm { width: 100vw; height: 200vh; left: 0; background-color: rgba(0,0,0,.4); z-index: 1; position: fixed; display: none; height: 200vh; background-color: rgba(0,0,0,.4); position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0) }
[data-progress-nav] .popup-btn-dimm.show { display: block }
[data-progress-nav] .popup-btn-cont { position: absolute; background-color: #dfe6ee; padding: max(1.0416666667vw, 20px); border-radius: var(--br-4); right: max(1.5625vw, 30px); top:calc(clamp(48px, 2.9167vw, 68px) + max(.5208333333vw, 10px));
display: none }
[data-progress-nav] .popup-btn-cont .__delete { position: absolute; right:max(.5208333333vw, 10px);
top:max(.5208333333vw, 10px);
width: 1.25vw }
@media screen and (max-width: 1024px) {
[data-progress-nav] .popup-btn-cont .__delete { right: 12px; top: 12px; width: 24px }
}
@media screen and (max-width: 1024px) {
[data-progress-nav] .popup-btn-cont { padding: 24px; right: 30px; top: unset; bottom: 66px }
[data-progress-nav] .popup-btn-cont .__title { font-size: 18px }
[data-progress-nav] .popup-btn-cont .__cont span { font-size: 12px }
}
@media screen and (max-width: 767px) {
[data-progress-nav] .popup-btn-cont { padding: 20px; position: fixed; width: 332px; margin-top: auto; margin-bottom: auto; background-color: #fff; z-index: 1; left: 50%; bottom: unset; top: unset; transform: translate(-50%, -250%) }
}
[data-progress-nav] .popup-btn-cont.show { display: block }
[data-progress-nav] .popup-btn-cont .__title { width: 100%; display: flex; justify-content: center; align-items: center }
[data-progress-nav] .popup-btn-cont .__cont { display: flex; justify-content: center; align-items: center; font-size:max(.7813vw, 10px)
}
[data-progress-nav] .popup-btn-cont .__cont span { width: 100%; display: block; display: flex; justify-content: center; align-items: center }
[data-progress-nav] .popup-btn-cont .__cont[data-desktop-only] { margin-top:.5208333333vw;
gap:.9375vw
}
[data-progress-nav] .popup-btn-cont .__cont[data-desktop-only] img { width: 2.3958333333vw; margin-bottom:.3125vw;
display: block }
[data-progress-nav] .popup-btn-cont .__cont[data-tablet-only] { margin-top: 16px; gap: 20px; font-size: 12px }
[data-progress-nav] .popup-btn-cont .__cont[data-tablet-only] img { width: 56px; margin-bottom: 6px; display: block }
[data-progress-nav] .popup-btn-cont .__cont[data-mobile-only] { margin-top: 16px; gap: 20px; font-size: 12px }
[data-progress-nav] .popup-btn-cont .__cont[data-mobile-only] img { width: 56px; margin-bottom: 6px; display: block }
[data-progress-nav].show { transform: translate(-50%, 0) }
@media screen and (max-width: 1024px) {
[data-progress-nav] {
top:unset;
bottom:0;
transform:translate(-50%, 100%)
}
[data-progress-nav] span { top: 0; bottom: unset }
}
@media screen and (max-width: 767px) {
[data-progress-nav] {
height:56px
}
[data-progress-nav]::after { content: ""; display: block; width: 100vw; height: 56px; background-color: #dfe6ee; position: absolute; left: 0; top: 0; z-index: -1 }
[data-progress-nav] .dropdown { display: flex; justify-content: center; align-items: center; gap: 4px; margin-left: max(1.5625vw, 20px); font-size: 15px; padding: 0 }
[data-progress-nav] .dropdown::after { transition: transform .5s linear; content: ""; display: block; width: 10px; height: 10px; background: url("/images/ksob_arrow_small.svg") center center/10px no-repeat }
[data-progress-nav]:has(.nav-ul.open)::before {
content:"";
display:block;
width:100vw;
height:200vh;
background-color:rgba(0,0,0,.4);
position:absolute;
left:50%;
bottom:0;
transform:translate(-50%, 0);
z-index:-2
}
[data-progress-nav]:has(.nav-ul.open) .dropdown::after {
transform:rotate(180deg)
}
[data-progress-nav]:has(.nav-ul.open)>span {
opacity:0;
animation:spanpos .5s linear forwards
}
}
[data-progress-nav] .nav-ul { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); gap: 2.824em; font-size:max(.8854vw, 14px);
height: max(2.9167vw, 48px) }
[data-progress-nav] .nav-ul a { display: flex; justify-content: center; align-items: center; margin: 1.0588235294em 0; font-size:max(.8854vw, 14px);
color: rgba(51,51,51,.4) }
[data-progress-nav] .nav-ul a:hover, [data-progress-nav] .nav-ul a.active { cursor: pointer; color: #333 }
@media screen and (max-width: 767px) {
[data-progress-nav] .nav-ul a:hover, [data-progress-nav] .nav-ul a.active { color: #004098 }
}
@media screen and (max-width: 1024px) {
[data-progress-nav] .nav-ul { position: relative; transform: translate(0, 0); top: unset; left: unset; margin: 0 max(1.5625vw, 20px) }
[data-progress-nav] .nav-ul a { font-size: 15px }
}
@media screen and (max-width: 767px) {
[data-progress-nav] .nav-ul { flex-direction: column; justify-content: flex-start; height: fit-content; transition: height .5s ease-out; overflow: visible; background-color: #dfe6ee; width: 100vw; position: absolute; bottom: 56px; left: 50%; line-height: 150%; transform: translate(-50%, 100%); transition: transform .4s linear; margin: 0; padding: 26px max(1.5625vw, 20px); gap: 12px; border-radius: 16px 16px 0 0; border-bottom: 1px solid #ccc; z-index: -1 }
[data-progress-nav] .nav-ul a { margin: 0 auto; justify-content: flex-start; margin: 0; text-align: left; display: block; width: 100% }
[data-progress-nav] .nav-ul.open { transform: translate(-50%, 0); display: flex; z-index: -1 }
}
[data-progress-nav] .nav-right { margin-left: auto; display: flex; justify-content: center; align-items: center; gap:.417vw;
font-size: 20px; margin-right: max(1.5625vw, 20px) }
[data-progress-nav] .nav-right a, [data-progress-nav] .nav-right button { padding: 0; background-color: #b7c8df; border-radius: var(--br-1); font-family: "Pretendard", Arial, sans-serif; display: flex; justify-content: center; align-items: center }
[data-progress-nav] .nav-right a:first-of-type, [data-progress-nav] .nav-right button:first-of-type { background-color: #004098; color: #fff; gap: .2666666667em; font-size:max(.7813vw, 13px);
padding: .7em 1.0666666667em; height: max(1.875vw, 30px) }
[data-progress-nav] .nav-right a:first-of-type svg path, [data-progress-nav] .nav-right a:first-of-type svg line, [data-progress-nav] .nav-right button:first-of-type svg path, [data-progress-nav] .nav-right button:first-of-type svg line { stroke: #fff }
[data-progress-nav] .nav-right a:last-of-type, [data-progress-nav] .nav-right button:last-of-type { font-size: 20px; width: max(1.875vw, 30px); height: max(1.875vw, 30px) }
[data-progress-nav] .nav-right a svg, [data-progress-nav] .nav-right button svg { display: block; width:.938vw;
font-size: 20px }
@media screen and (max-width: 1024px) {
[data-progress-nav] .nav-right { gap: 8px }
[data-progress-nav] .nav-right a svg, [data-progress-nav] .nav-right button svg { width: 18px }
[data-progress-nav] .nav-right a:first-of-type, [data-progress-nav] .nav-right button:first-of-type { font-size: 15px; height: 36px }
[data-progress-nav] .nav-right a:last-of-type, [data-progress-nav] .nav-right button:last-of-type { width: 1.8em; height: 1.8em }
}
[data-progress-nav]>span {
position:absolute;
bottom:0;
left:0;
transform:translateX(-50%);
background-color:#004098;
width:300px;
height:3px;
display:block;
transition:opacity .5s ease-in-out
}
@keyframes spanpos { 0% {
bottom:0
}
100% {
bottom:300px
}
}
.main-popup-container { width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; background-color: rgba(0,0,0,.6); display: flex; justify-content: center; align-items: center; z-index: 10000; display: none }
.main-popup-container.active { display: flex }
.main-popup-container .popup { width: clamp(32rem, 25vw, 62rem); height: fit-content; border-radius: var(--br-3); overflow: hidden; background-color: #fff }
@media screen and (max-width: 1024px) {
.main-popup-container .popup { width: 326px }
}
.main-popup-container .popup-inner { height: clamp(32rem, 25vw, 62rem); width: 100% }
@media screen and (max-width: 1024px) {
.main-popup-container .popup-inner { height: 326px }
}
.main-popup-container .popup-inner img { width: 100%; display: block; height: 100%; object-fit: cover }
.main-popup-container .popup-bottom { padding: 1.2em 1.3333333333em; width: 100%; height: clamp(4rem, 3.0208vw, 7.6rem); display: flex; justify-content: space-between; align-items: center }
@media screen and (max-width: 1024px) {
.main-popup-container .popup-bottom { height: 50px; padding: 14px 16px }
}
.main-popup-container .popup-bottom .check-cont { display: flex; justify-content: center; align-items: center; gap: .5333333333em }
@media screen and (max-width: 1024px) {
.main-popup-container .popup-bottom .check-cont { gap: 8px }
}
.main-popup-container .popup-bottom .check-cont input.check-input { width: max(1.1458333333vw, 22px); height: max(1.1458333333vw, 22px); border-radius: .2666666667em; background-color: rgba(0,0,0,0); border: 1px solid #ccc !important; -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; margin: 0 !important }
.main-popup-container .popup-bottom .check-cont input.check-input:checked { display: flex; justify-content: center; align-items: center; border: 1px solid #004098 !important }
.main-popup-container .popup-bottom .check-cont input.check-input:checked::after { display: block; width: 100%; height: 100%; border-radius: 2px; content: ""; background: #004098 url("/images/ksob_check.svg") center center/10px no-repeat }
@media screen and (max-width: 1024px) {
.main-popup-container .popup-bottom .check-cont input.check-input { width: 20px; height: 20px }
}
.main-popup-container .popup-bottom .popup-btn { width: 1.2em; height: 1.2em }
@media screen and (max-width: 1024px) {
.main-popup-container .popup-bottom .popup-btn { width: 18px; height: 18px }
}
.main-popup-container .popup-bottom .popup-btn a { display: block; width: 100%; height: 100% }
.main-popup-container .popup-bottom .popup-btn a svg { display: block; width: 100%; height: 100% }
[type=text], [type=number], [type=tel], [type=search], [type=password], [type=email], [type=url], [type=date], [type=datetime-local], [type=file], select, textarea {
box-sizing:border-box;
padding:10px 20px;
border:1px solid rgba(0,0,0,.1);
background:#fff;
color:#000;
font-size:inherit;
line-height:1.6;
outline:none;
vertical-align:middle;
border-radius:10px;
font-family:"Pretendard", Arial, sans-serif;
-webkit-border-radius:10px;
-webkit-appearance:none;
transition:border-color .3s;
padding:.625em 1.25em
}
[type=text][readonly], [type=number][readonly], [type=tel][readonly], [type=search][readonly], [type=password][readonly], [type=email][readonly], [type=url][readonly], [type=date][readonly], [type=datetime-local][readonly], [type=file][readonly], select[readonly], textarea[readonly] {
background-color:#f5f5f5
}
[type=text]:hover, [type=text]:focus, [type=number]:hover, [type=number]:focus, [type=tel]:hover, [type=tel]:focus, [type=search]:hover, [type=search]:focus, [type=password]:hover, [type=password]:focus, [type=email]:hover, [type=email]:focus, [type=url]:hover, [type=url]:focus, [type=date]:hover, [type=date]:focus, [type=datetime-local]:hover, [type=datetime-local]:focus, [type=file]:hover, [type=file]:focus, select:hover, select:focus, textarea:hover, textarea:focus { border-color: #000 }
[type=text][readonly]:hover, [type=text][readonly]:focus, [type=number][readonly]:hover, [type=number][readonly]:focus, [type=tel][readonly]:hover, [type=tel][readonly]:focus, [type=search][readonly]:hover, [type=search][readonly]:focus, [type=password][readonly]:hover, [type=password][readonly]:focus, [type=email][readonly]:hover, [type=email][readonly]:focus, [type=url][readonly]:hover, [type=url][readonly]:focus, [type=date][readonly]:hover, [type=date][readonly]:focus, [type=datetime-local][readonly]:hover, [type=datetime-local][readonly]:focus, [type=file][readonly]:hover, [type=file][readonly]:focus, select[readonly]:hover, select[readonly]:focus, textarea[readonly]:hover, textarea[readonly]:focus { border-color: #000 }
[type=text][disabled], [type=number][disabled], [type=tel][disabled], [type=search][disabled], [type=password][disabled], [type=email][disabled], [type=url][disabled], [type=date][disabled], [type=datetime-local][disabled], [type=file][disabled], select[disabled], textarea[disabled] {
cursor:not-allowed;
color:#000;
background:#f1f1f1
}
[type=text][disabled]:hover, [type=number][disabled]:hover, [type=tel][disabled]:hover, [type=search][disabled]:hover, [type=password][disabled]:hover, [type=email][disabled]:hover, [type=url][disabled]:hover, [type=date][disabled]:hover, [type=datetime-local][disabled]:hover, [type=file][disabled]:hover, select[disabled]:hover, textarea[disabled]:hover { border-color: #000 }
@media screen and (max-width: 1024px) {
[type=text], [type=number], [type=tel], [type=search], [type=password], [type=email], [type=url], [type=date], [type=datetime-local], [type=file], select, textarea {
padding:9px 16px
}
}
select { display: inline-block; padding-right: 40px; -webkit-appearance: none; -moz-appearance: none; color: #000; position: relative }
select::-ms-expand {
display:none
}
.csstransitions select { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAICAYAAADnVO9eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzMEY4OTZBNTI3MTExRThBQjRDQzc4NkVEN0Q2N0E1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMzMEY4OTZCNTI3MTExRThBQjRDQzc4NkVEN0Q2N0E1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzMwRjg5Njg1MjcxMTFFOEFCNENDNzg2RUQ3RDY3QTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzMwRjg5Njk1MjcxMTFFOEFCNENDNzg2RUQ3RDY3QTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7NDvcmAAAAmklEQVR42mLQ0NAQZiASgNT+//+fgRzMxMXFNcvIyCiHkCUgNSC1DGQCpk+fPkUxMjIGGxsbl+BSBJIDqQGpJduiO3fu/Pz48aMHkO2NzTKomDdIDUgt2RaBCFyWUcsSEGBE5qioqLDz8/PvADK3/vv3j4OJickZ3RJQxFJsEZplDNh8QjWLQEBBQYEDRD948OAHuhy5FgEEGABfqXiJWBAInAAAAABJRU5ErkJggg==); background-repeat: no-repeat; background-position: right 50%; background-size: 26px auto }
.csstransitions select[multiple] { background: rgba(0,0,0,0) }
textarea { max-width: 100%; min-height: 100px; line-height: 1.6; resize: none }
::-webkit-input-placeholder {
color:#acacac
}
::-moz-placeholder {
color:#acacac
}
:-ms-input-placeholder {
color:#acacac
}
:-moz-placeholder {
color:#acacac
}
input::-ms-clear {
display:none
}
input[type=number] { -webkit-appearance: none; -moz-appearance: textfield }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
margin:0;
-webkit-appearance:none
}
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
display:none
}
.search-form { width: max(13.8020833333vw, 265px) }
.search-form .input[type=search] { border: none; width: 100%; background: #f5f5f5; position: relative; padding: 0; border-radius: 40px }
.search-form .input[type=search] input { background: none; border: none; width: 100%; padding: 1.0625em 2.625em 1.0625em 1.25em; border-radius: 40px; -webkit-border-radius: 40px }
.search-form .input[type=search] .__search { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) }
input[type=date]::-webkit-inner-spin-button, input[type=datetime-local]::-webkit-inner-spin-button {
display:none;
margin:0
}
input[type=date]::-webkit-clear-button, input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-clear-button, input[type=datetime-local]::-webkit-calendar-picker-indicator {
display:none
}
input[type=date]::-webkit-datetime-edit-fields-wrapper, input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper {
padding:0
}
input[type=radio] { width: 1.3333333333em; font-size: 18px; height: 1.3333333333em; border: 1px solid #e0e0e0; border-radius: 50%; outline: none; -webkit-appearance: none }
input[type=radio].white { border: 1px solid #fff }
input[type=radio].white:checked:before { background: #fff }
input[type=radio].white:checked { border-color: #fff }
input[type=radio]:before { content: ""; display: block; width: 60%; height: 60%; margin: 20% auto; border-radius: 50% }
input[type=radio]:checked:before { background: #004098 }
input[type=radio]:checked { border-color: #e0e0e0 }
input[type=submit] { position: relative; -webkit-appearance: none; outline: none; display: inline-flex; border: 1px solid rgba(0,0,0,.2); background-color: rgba(0,0,0,0) }
input[type=submit]:hover { background-color: #004098 }
.ta { position: relative }
.ta-counter { position: absolute; right: 20px; bottom: 10px; font-size: 14px }
select { width: 20.75em; border: 1px solid rgba(0,0,0,.1); background: url("/images/ksob_arrow_under.svg") calc(100% - 16px) center/16px no-repeat }
select[readonly] { pointer-events: none; background-color: #f5f5f5 }
textarea[readonly] { pointer-events: none; background-color: #f5f5f5 }
.form-error-message { margin-top: .7142857143em; color: red; bottom: -2em; font-size: 14px; font-weight: 500; line-height: 145%; letter-spacing: -0.14px }
.form-ul h6 { padding-bottom: .8888888889em; margin-bottom: .8888888889em; border-bottom: 1px solid #e0e0e0 }
.form-ul>li .col { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 3.55em; font-size: 20px; margin-bottom: 1.6em; padding-bottom: 1.6em; border-bottom: 1px solid #e0e0e0 }
@media screen and (max-width: 1024px) {
.form-ul>li .col { gap: 1.5em; row-gap: 1.5em }
}
.form-ul>li:not(:first-of-type) { margin-top: 3.4em; font-size: 20px }
.form-ul>li:not(:first-of-type):has(.removable.hide) {
margin-top:0
}
.form-ul .form-input-cont, .form-ul .form-textarea-cont, .form-ul .form-title-cont, .form-ul .form-email-cont, .form-ul .form-select-cont { display: flex; justify-content: center; align-items: center; position: relative; gap: .625em }
.form-ul .form-input-cont input, .form-ul .form-textarea-cont input, .form-ul .form-title-cont input, .form-ul .form-email-cont input, .form-ul .form-select-cont input { width: 20.75em }
@media screen and (max-width: 1024px) {
.form-ul .form-input-cont input, .form-ul .form-textarea-cont input, .form-ul .form-title-cont input, .form-ul .form-email-cont input, .form-ul .form-select-cont input { width: 16.375em }
}
@media screen and (max-width: 767px) {
.form-ul .form-input-cont input, .form-ul .form-textarea-cont input, .form-ul .form-title-cont input, .form-ul .form-email-cont input, .form-ul .form-select-cont input { width: 18.125em }
}
.form-ul .form-input-cont.required .form-input-title span, .form-ul .form-input-cont.required .form-textarea-title span, .form-ul .form-input-cont.required .form-title-title span, .form-ul .form-input-cont.required .form-email-title span, .form-ul .form-input-cont.required .form-select-title span, .form-ul .form-textarea-cont.required .form-input-title span, .form-ul .form-textarea-cont.required .form-textarea-title span, .form-ul .form-textarea-cont.required .form-title-title span, .form-ul .form-textarea-cont.required .form-email-title span, .form-ul .form-textarea-cont.required .form-select-title span, .form-ul .form-title-cont.required .form-input-title span, .form-ul .form-title-cont.required .form-textarea-title span, .form-ul .form-title-cont.required .form-title-title span, .form-ul .form-title-cont.required .form-email-title span, .form-ul .form-title-cont.required .form-select-title span, .form-ul .form-email-cont.required .form-input-title span, .form-ul .form-email-cont.required .form-textarea-title span, .form-ul .form-email-cont.required .form-title-title span, .form-ul .form-email-cont.required .form-email-title span, .form-ul .form-email-cont.required .form-select-title span, .form-ul .form-select-cont.required .form-input-title span, .form-ul .form-select-cont.required .form-textarea-title span, .form-ul .form-select-cont.required .form-title-title span, .form-ul .form-select-cont.required .form-email-title span, .form-ul .form-select-cont.required .form-select-title span { position: relative }
.form-ul .form-input-cont.required .form-input-title span::after, .form-ul .form-input-cont.required .form-textarea-title span::after, .form-ul .form-input-cont.required .form-title-title span::after, .form-ul .form-input-cont.required .form-email-title span::after, .form-ul .form-input-cont.required .form-select-title span::after, .form-ul .form-textarea-cont.required .form-input-title span::after, .form-ul .form-textarea-cont.required .form-textarea-title span::after, .form-ul .form-textarea-cont.required .form-title-title span::after, .form-ul .form-textarea-cont.required .form-email-title span::after, .form-ul .form-textarea-cont.required .form-select-title span::after, .form-ul .form-title-cont.required .form-input-title span::after, .form-ul .form-title-cont.required .form-textarea-title span::after, .form-ul .form-title-cont.required .form-title-title span::after, .form-ul .form-title-cont.required .form-email-title span::after, .form-ul .form-title-cont.required .form-select-title span::after, .form-ul .form-email-cont.required .form-input-title span::after, .form-ul .form-email-cont.required .form-textarea-title span::after, .form-ul .form-email-cont.required .form-title-title span::after, .form-ul .form-email-cont.required .form-email-title span::after, .form-ul .form-email-cont.required .form-select-title span::after, .form-ul .form-select-cont.required .form-input-title span::after, .form-ul .form-select-cont.required .form-textarea-title span::after, .form-ul .form-select-cont.required .form-title-title span::after, .form-ul .form-select-cont.required .form-email-title span::after, .form-ul .form-select-cont.required .form-select-title span::after { content: "*"; display: block; position: absolute; top: -0.3em; right: -.5333333333em; font-size:max(.8333vw, 11px);
color: red }
.form-ul .form-input-cont .form-message, .form-ul .form-textarea-cont .form-message, .form-ul .form-title-cont .form-message, .form-ul .form-email-cont .form-message, .form-ul .form-select-cont .form-message { display: none; position: absolute; left: max(3.8020833333vw, 5.2142857143em); color: red; bottom: -2em; font-size: 14px; font-weight: 500; line-height: 145%; letter-spacing: -0.14px }
.form-ul .form-input-cont.error, .form-ul .form-textarea-cont.error, .form-ul .form-title-cont.error, .form-ul .form-email-cont.error, .form-ul .form-select-cont.error { margin-bottom: .5714285714em }
.form-ul .form-input-cont.error input, .form-ul .form-input-cont.error textarea, .form-ul .form-textarea-cont.error input, .form-ul .form-textarea-cont.error textarea, .form-ul .form-title-cont.error input, .form-ul .form-title-cont.error textarea, .form-ul .form-email-cont.error input, .form-ul .form-email-cont.error textarea, .form-ul .form-select-cont.error input, .form-ul .form-select-cont.error textarea { border: 1px solid red }
.form-ul .form-input-cont.error .form-message, .form-ul .form-textarea-cont.error .form-message, .form-ul .form-title-cont.error .form-message, .form-ul .form-email-cont.error .form-message, .form-ul .form-select-cont.error .form-message { display: block }
.form-ul .form-input-title, .form-ul .form-textarea-title, .form-ul .form-title-title, .form-ul .form-email-title, .form-ul .form-select-title { display: block; width: 3.9375em }
.form-ul .form-textarea-cont { position: relative; width: 100%; align-items: flex-start }
.form-ul .form-textarea-cont textarea { width: calc(100% - 3.9375em); padding: 1.25em 1.25em 4.125em 1.25em; height: 18em }
@media screen and (max-width: 767px) {
.form-ul .form-textarea-cont textarea { height: 360px }
}
.form-ul .form-textarea-cont .count { display: block; position: absolute; right: 1.25em; bottom: 1.25em; color: #999 }
.form-ul .form-textarea-cont .count em { color: #000 }
.form-ul .form-title-cont { width: 100%; justify-content: flex-start }
.form-ul .form-title-cont input { width: 100% }
.form-ul .form-email-cont { justify-content: flex-start }
.form-ul .form-email-cont .form-email-right { flex-wrap: wrap; width: 100%; display: flex; justify-content: center; align-items: center }
@media screen and (max-width: 767px) {
.form-ul .form-email-cont .form-email-right { display: block }
.form-ul .form-email-cont .form-email-right input, .form-ul .form-email-cont .form-email-right select { min-width: 100% }
.form-ul .form-email-cont .form-email-right input { margin-bottom: 16px }
.form-ul .form-email-cont .form-email-right input:nth-of-type(2) { min-width: calc(100% - 23px); width: calc(100% - 23px) !important; margin-left: 0 }
.form-ul .form-email-cont .form-email-right span { width: 13px; margin-right: 10px; height: 42px; line-height: 42px; float: left }
}
@media screen and (max-width: 767px) {
.form-ul .form-email-cont { justify-content: flex-start }
}
.form-ul .form-email-cont input { width: 20.75em }
@media screen and (max-width: 1024px) {
.form-ul .form-email-cont input { width: 12.6875em }
}
@media screen and (max-width: 767px) {
.form-ul .form-email-cont input { width: 18.125em }
.form-ul .form-email-cont input:nth-of-type(2) { width: 16.875em }
}
@media screen and (max-width: 767px)and (max-width: 623px) {
.form-ul .form-email-cont input:nth-of-type(2) { margin-left: auto }
}
@media screen and (max-width: 1024px) {
.form-ul .form-email-cont select { width: 12.6875em }
}
@media screen and (max-width: 767px) {
.form-ul .form-email-cont select { width: 18.125em }
}
@media screen and (max-width: 623px) {
.form-ul .form-email-cont select { margin-left: auto }
}
@media screen and (max-width: 1024px) {
.form-ul .form-select-cont { position: relative }
.form-ul .form-select-cont.opened::after { width: 40px; height: 40px; position: absolute; right: 10px; top: 0px; content: ""; display: block; pointer-events: all; z-index: 10000 }
}
@media screen and (max-width: 1024px) {
.form-ul .form-select-cont select { width: 15.3125em }
.form-ul .form-select-cont select option { margin-bottom: -30px }
}
@media screen and (max-width: 767px) {
.form-ul .form-select-cont select { width: 18.125em }
}
.form-ul .form-radio-cont { position: relative; display: flex; justify-content: center; align-items: center; justify-content: flex-end; gap: 1.7777777778em }
.form-ul .form-radio-cont .form-radio-item { display: flex; justify-content: center; align-items: center; gap: .4444444444em }
.form-ul .form-radio-cont .form-error-message { position: absolute }
@media screen and (max-width: 767px) {
.form-ul .form-radio-cont { flex-wrap: wrap }
}
.form .policy-cont { border: 1px solid #e0e0e0; border-radius: var(--br-4); padding: 2.5em }
.form .policy-cont li { display: flex; justify-content: center; align-items: center; justify-content: flex-start }
@media screen and (max-width: 767px) {
.form .policy-cont li { flex-direction: column; justify-content: flex-start; align-items: flex-start }
}
.form .policy-cont li span:first-of-type { width: 8.8125em; margin-right: 1em; display: block }
.form .policy-cont li span:last-of-type { color: #444 }
@media screen and (max-width: 767px) {
.form .policy-cont li span:last-of-type { margin-left: 1.25em }
}
.form .policy-cont li:not(:last-of-type) { margin-bottom: .375em }
.form .policy-cont--security li { display: block }
.form .policy-cont--security li:not(:last-of-type) { margin-bottom: 1.25em }
.form .policy-cont--security li span:first-of-type { width: auto }
.form .policy-cont--security li .circular-h, .form .policy-cont--security li .circular-h:first-of-type { display: block; margin-top: .75em }
.form .policy-cont--security li .inner-ul { margin-top: .5em }
.form .policy-cont--security li .inner-ul li { margin-bottom: 0 }
.form .policy-cont--security li .added { display: block; margin-top: .5em }
.form .policy-cont--security li .inner-ul, .form .policy-cont--security li .added { color: #444 }
.form .policy-tit { margin-bottom: 1.3333333333em }
.form .policy-capt { margin-top: 1.5em; display: block; color: #999 }
#business-contact-us-form .form .policy-capt { color: #8db3e8 }
#business-contact-us-form .form .policy-capt::before { content: "*"; margin-right: .4em }
[lang=en] .form-ul .form-input-title, [lang=en] .form-ul .form-textarea-title, [lang=en] .form-ul .form-title-title, [lang=en] .form-ul .form-email-title, [lang=en] .form-ul .form-select-title { min-width: max(6.25vw, 80px); width: max(6.25vw, 80px); position: relative; white-space: nowrap }
[lang=en] #page-inquiry .form-input-cont label, [lang=en] #page-inquiry .form-textarea-cont label, [lang=en] #page-inquiry .form-title-cont label, [lang=en] #page-inquiry .form-email-cont label, [lang=en] #page-inquiry .form-select-cont label { min-width: max(6.25vw, 80px); width: max(6.25vw, 80px); position: relative }
[lang=en] .form-ul .form-input-cont.required .form-input-title span::after, [lang=en] .form-ul .form-input-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-input-cont.required .form-title-title span::after, [lang=en] .form-ul .form-input-cont.required .form-email-title span::after, [lang=en] .form-ul .form-input-cont.required .form-select-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-input-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-title-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-email-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-select-title span::after, [lang=en] .form-ul .form-title-cont.required .form-input-title span::after, [lang=en] .form-ul .form-title-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-title-cont.required .form-title-title span::after, [lang=en] .form-ul .form-title-cont.required .form-email-title span::after, [lang=en] .form-ul .form-title-cont.required .form-select-title span::after, [lang=en] .form-ul .form-email-cont.required .form-input-title span::after, [lang=en] .form-ul .form-email-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-email-cont.required .form-title-title span::after, [lang=en] .form-ul .form-email-cont.required .form-email-title span::after, [lang=en] .form-ul .form-email-cont.required .form-select-title span::after, [lang=en] .form-ul .form-select-cont.required .form-input-title span::after, [lang=en] .form-ul .form-select-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-select-cont.required .form-title-title span::after, [lang=en] .form-ul .form-select-cont.required .form-email-title span::after, [lang=en] .form-ul .form-select-cont.required .form-select-title span::after { right: -0.633em }
@media screen and (max-width: 1024px) {
[lang=en] .form-ul .form-input-cont.required .form-input-title span::after, [lang=en] .form-ul .form-input-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-input-cont.required .form-title-title span::after, [lang=en] .form-ul .form-input-cont.required .form-email-title span::after, [lang=en] .form-ul .form-input-cont.required .form-select-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-input-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-title-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-email-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-select-title span::after, [lang=en] .form-ul .form-title-cont.required .form-input-title span::after, [lang=en] .form-ul .form-title-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-title-cont.required .form-title-title span::after, [lang=en] .form-ul .form-title-cont.required .form-email-title span::after, [lang=en] .form-ul .form-title-cont.required .form-select-title span::after, [lang=en] .form-ul .form-email-cont.required .form-input-title span::after, [lang=en] .form-ul .form-email-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-email-cont.required .form-title-title span::after, [lang=en] .form-ul .form-email-cont.required .form-email-title span::after, [lang=en] .form-ul .form-email-cont.required .form-select-title span::after, [lang=en] .form-ul .form-select-cont.required .form-input-title span::after, [lang=en] .form-ul .form-select-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-select-cont.required .form-title-title span::after, [lang=en] .form-ul .form-select-cont.required .form-email-title span::after, [lang=en] .form-ul .form-select-cont.required .form-select-title span::after { right: -0.5333333333em }
[lang=en] .form-ul .form-input-title, [lang=en] .form-ul .form-textarea-title, [lang=en] .form-ul .form-title-title, [lang=en] .form-ul .form-email-title, [lang=en] .form-ul .form-select-title { min-width: 93px; width: 93px }
[lang=en] #page-inquiry .form-input-cont label, [lang=en] #page-inquiry .form-textarea-cont label, [lang=en] #page-inquiry .form-title-cont label, [lang=en] #page-inquiry .form-email-cont label, [lang=en] #page-inquiry .form-select-cont label { min-width: 93px; width: 93px }
[lang=en] #page-inquiry .form-email-cont input, [lang=en] #page-inquiry .form-email-cont select { width: 100% }
[lang=en] #form-textarea-title { position: relative }
}
.radio, .checkbox { position: relative; display: inline-block; margin-right: 8px; white-space: normal; word-break: keep-all; word-wrap: break-word }
.radio>label, .checkbox>label { vertical-align: top; font-size: 16px; line-height: 20px; padding: 5px 0 }
.radio:last-child, .checkbox:last-child { margin-right: 0 }
.radio [type=radio], .radio [type=checkbox], .checkbox [type=radio], .checkbox [type=checkbox] { margin: 0 }
.radio [type=radio]+label, .radio [type=checkbox]+label, .checkbox [type=radio]+label, .checkbox [type=checkbox]+label { position: relative; padding-left: 8px; transition: color .3s }
.radio [type=radio]+label:before, .radio [type=radio]+label:after, .radio [type=checkbox]+label:before, .radio [type=checkbox]+label:after, .checkbox [type=radio]+label:before, .checkbox [type=radio]+label:after, .checkbox [type=checkbox]+label:before, .checkbox [type=checkbox]+label:after { position: absolute; left: 0; top: 10px; font-size: 17px; line-height: 1 }
.radio [type=radio]+label:before, .radio [type=checkbox]+label:before, .checkbox [type=radio]+label:before, .checkbox [type=checkbox]+label:before { color: #4d4d4d }
.radio [type=radio]+label:after, .radio [type=checkbox]+label:after, .checkbox [type=radio]+label:after, .checkbox [type=checkbox]+label:after { color: rgba(0,0,0,0); transition: color .2s }
.radio [type=radio]:focus+label, .radio [type=checkbox]:focus+label, .checkbox [type=radio]:focus+label, .checkbox [type=checkbox]:focus+label { outline: 1px dotted #000 }
.radio [type=radio][disabled]+label, .radio [type=checkbox][disabled]+label, .checkbox [type=radio][disabled]+label, .checkbox [type=checkbox][disabled]+label { cursor: not-allowed; color: #000 }
.rectangle-swiper-arrow { display: flex }
.rectangle-swiper-arrow button { width: min(3.0208333333vw, 5.8rem); height: min(2.2916666667vw, 4.4rem); border: 1px solid rgba(255,255,255,.6); cursor: pointer; padding: 0 }
.rectangle-swiper-arrow button.arrow-prev {
border-radius:.6rem 0rem 0rem .6rem; margin-right: -1px }
.rectangle-swiper-arrow button.arrow-next { border-radius:0rem .6rem .6rem 0rem
}
.rectangle-swiper-arrow button.swiper-button-disabled { border-color: rgba(255,255,255,.4); opacity: .4; cursor: default }
.rectangle-swiper-arrow button svg { width:min(.7291666667vw, 1.4rem);
height:min(.7291666667vw, 1.4rem)
}
@media screen and (max-width: 1366px) {
.rectangle-swiper-arrow button { width: 4.3rem; height: 3.2rem }
.rectangle-swiper-arrow button svg { width: 1rem; height: 1rem }
}
html.lenis { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain }
.lenis.lenis-scrolling iframe { pointer-events: none }
@font-face { font-family: "swiper-icons"; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal }
:root { --swiper-theme-color: #007aff
}
:host {
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
z-index:1
}
.swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block }
.swiper-vertical>.swiper-wrapper { flex-direction: column }
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box }
.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0) }
.swiper-horizontal { touch-action: pan-y }
.swiper-vertical { touch-action: pan-x }
.swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block }
.swiper-slide-invisible-blank { visibility: hidden }
.swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto }
.swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height }
.swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden }
.swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px }
.swiper-3d .swiper-wrapper { transform-style: preserve-3d }
.swiper-3d { perspective: 1200px }
.swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d }
.swiper-css-mode>.swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none }
.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
display:none
}
.swiper-css-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align: start start }
.swiper-css-mode.swiper-horizontal>.swiper-wrapper { scroll-snap-type: x mandatory }
.swiper-css-mode.swiper-vertical>.swiper-wrapper { scroll-snap-type: y mandatory }
.swiper-css-mode.swiper-free-mode>.swiper-wrapper { scroll-snap-type: none }
.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align: none }
.swiper-css-mode.swiper-centered>.swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999 }
.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always }
.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before) }
.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after) }
.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before) }
.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after) }
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10 }
.swiper-3d .swiper-slide-shadow { background: rgba(0,0,0,.15) }
.swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) }
.swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) }
.swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) }
.swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) }
.swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: rgba(0,0,0,0) }
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear }
.swiper-lazy-preloader-white { --swiper-preloader-color: #fff
}
.swiper-lazy-preloader-black { --swiper-preloader-color: #000
}
@keyframes swiper-preloader-spin { 0% {
transform:rotate(0deg)
}
100% {
transform:rotate(360deg)
}
}
.swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10 }
.swiper-pagination.swiper-pagination-hidden { opacity: 0 }
.swiper-pagination-disabled>.swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important }
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100% }
.swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0 }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33) }
.swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2) }
button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; appearance: none }
.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer }
.swiper-pagination-bullet:only-child { display: none !important }
.swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)) }
.swiper-vertical>.swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0) }
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block }
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px }
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top }
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px) }
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap }
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left }
.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right }
.swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit) }
.swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute }
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top }
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top }
.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0 }
.swiper-vertical>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0 }
.swiper-pagination-lock { display: none }
.swiper-creative .swiper-slide { backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height }
@font-face { font-family: "swiper-icons"; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); font-weight: 400; font-style: normal }
:root { --swiper-theme-color: #007aff
}
:host {
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
z-index:1
}
.swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block }
.swiper-vertical>.swiper-wrapper { flex-direction: column }
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box }
.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0) }
.swiper-horizontal { touch-action: pan-y }
.swiper-vertical { touch-action: pan-x }
.swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block }
.swiper-slide-invisible-blank { visibility: hidden }
.swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto }
.swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height }
.swiper-backface-hidden .swiper-slide { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden }
.swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px }
.swiper-3d .swiper-wrapper { transform-style: preserve-3d }
.swiper-3d { perspective: 1200px }
.swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d }
.swiper-css-mode>.swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none }
.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
display:none
}
.swiper-css-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align: start start }
.swiper-css-mode.swiper-horizontal>.swiper-wrapper { scroll-snap-type: x mandatory }
.swiper-css-mode.swiper-vertical>.swiper-wrapper { scroll-snap-type: y mandatory }
.swiper-css-mode.swiper-free-mode>.swiper-wrapper { scroll-snap-type: none }
.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align: none }
.swiper-css-mode.swiper-centered>.swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999 }
.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always }
.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before) }
.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after) }
.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before) }
.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after) }
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10 }
.swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15) }
.swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) }
.swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) }
.swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) }
.swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) }
.swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent }
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear }
.swiper-lazy-preloader-white { --swiper-preloader-color: #fff
}
.swiper-lazy-preloader-black { --swiper-preloader-color: #000
}
@keyframes swiper-preloader-spin { 0% {
transform:rotate(0deg)
}
100% {
transform:rotate(360deg)
}
}
.swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; transform: translateZ(0) }
.swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ""; position: absolute; left: 0; top: 0; pointer-events: none }
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size) }
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size) }
:root { --swiper-navigation-size: 44px
}
.swiper-button-prev, .swiper-button-next { position: absolute; top: var(--swiper-navigation-top-offset, 50%); width:calc(var(--swiper-navigation-size)/44*27);
height: var(--swiper-navigation-size); margin-top: calc(0px - var(--swiper-navigation-size)/2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)) }
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none }
.swiper-button-prev.swiper-button-hidden, .swiper-button-next.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none }
.swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-next { display: none !important }
.swiper-button-prev svg, .swiper-button-next svg { width: 100%; height: 100%; object-fit: contain; transform-origin: center }
.swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg { transform: rotate(180deg) }
.swiper-button-prev, .swiper-rtl .swiper-button-next { left: var(--swiper-navigation-sides-offset, 10px); right: auto }
.swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto }
.swiper-button-lock { display: none }
.swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1 }
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: "prev" }
.swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto }
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next" }
.swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10 }
.swiper-pagination.swiper-pagination-hidden { opacity: 0 }
.swiper-pagination-disabled>.swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important }
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100% }
.swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0 }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33) }
.swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2) }
button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none }
.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer }
.swiper-pagination-bullet:only-child { display: none !important }
.swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)) }
.swiper-vertical>.swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0) }
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block }
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px }
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top }
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px) }
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap }
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left }
.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right }
.swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit) }
.swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute }
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top }
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top }
.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0 }
.swiper-vertical>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0 }
.swiper-pagination-lock { display: none }
.swiper-scrollbar { border-radius: var(--swiper-scrollbar-border-radius, 10px); position: relative; touch-action: none; background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1)) }
.swiper-scrollbar-disabled>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important }
.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: var(--swiper-scrollbar-sides-offset, 1%); bottom: var(--swiper-scrollbar-bottom, 4px); top: var(--swiper-scrollbar-top, auto); z-index: 50; height: var(--swiper-scrollbar-size, 4px); width:calc(100% - 2*var(--swiper-scrollbar-sides-offset, 1%))
}
.swiper-vertical>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-vertical { position: absolute; left: var(--swiper-scrollbar-left, auto); right: var(--swiper-scrollbar-right, 4px); top: var(--swiper-scrollbar-sides-offset, 1%); z-index: 50; width: var(--swiper-scrollbar-size, 4px); height:calc(100% - 2*var(--swiper-scrollbar-sides-offset, 1%))
}
.swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5)); border-radius: var(--swiper-scrollbar-border-radius, 10px); left: 0; top: 0 }
.swiper-scrollbar-cursor-drag { cursor: move }
.swiper-scrollbar-lock { display: none }
.swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center }
.swiper-zoom-container>img, .swiper-zoom-container>svg, .swiper-zoom-container>canvas { max-width: 100%; max-height: 100%; object-fit: contain }
.swiper-slide-zoomed { cursor: move; touch-action: none }
.swiper .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000 }
.swiper-free-mode>.swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto }
.swiper-grid>.swiper-wrapper { flex-wrap: wrap }
.swiper-grid-column>.swiper-wrapper { flex-wrap: wrap; flex-direction: column }
.swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out }
.swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity }
.swiper-fade .swiper-slide .swiper-slide { pointer-events: none }
.swiper-fade .swiper-slide-active { pointer-events: auto }
.swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto }
.swiper-cube { overflow: visible }
.swiper-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100% }
.swiper-cube .swiper-slide .swiper-slide { pointer-events: none }
.swiper-cube.swiper-rtl .swiper-slide { transform-origin: 100% 0 }
.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto }
.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible }
.swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: .6; z-index: 0 }
.swiper-cube .swiper-cube-shadow:before { content: ""; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px) }
.swiper-cube .swiper-slide-next+.swiper-slide { pointer-events: auto; visibility: visible }
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden }
.swiper-flip { overflow: visible }
.swiper-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1 }
.swiper-flip .swiper-slide .swiper-slide { pointer-events: none }
.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto }
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden }
.swiper-creative .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height }
.swiper-cards { overflow: visible }
.swiper-cards .swiper-slide { transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
body { line-height: 1 }
ol, ul { list-style: none }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none }
table { border-collapse: collapse; border-spacing: 0 }
a { text-decoration: none; color: inherit }
@font-face { font-family: "Pretendard"; src: url("/font/Pretendard-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap }
@font-face { font-family: "Pretendard"; src: url("/font/Pretendard-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap }
@font-face { font-family: "Pretendard"; src: url("/font/Pretendard-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap }
*, *:after, *:before { box-sizing: border-box }
html { font-size: 62.5%; font-family: "Pretendard", Arial, sans-serif }
button { border: 0; background-color: rgba(0,0,0,0.1) }
img { width: 100%; height: auto }
.h1 { font-size: max(2.9167vw, 38px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.45 }
.h2 { font-size: max(2.7083vw, 36px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.45 }
.h3 { font-size: max(1vw, 100px); letter-spacing: -0.03em; font-weight: 500 }
.h4 { font-size: max(6.6667vw, 88px); letter-spacing: -0.02em; font-weight: 500 }
.t1 { font-size: max(1.875vw, 24px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.4 }
.t2 { font-size: max(1.6667vw, 22px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.4 }
.t3 { font-size: max(1.4583vw, 19px); letter-spacing: -0.02em; font-weight: 600; line-height: 1.4 }
.t4 { font-size: max(1.25vw, 16px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.3 }
.t5 { font-size: max(1.1458vw, 16px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.45 }
.t6 { font-size: max(1.0417vw, 14px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.5 }
.b1 {
font-size:max(.8333vw, 11px); font-weight: 400; line-height: 1.6; letter-spacing: -0.01em }
.b2 {
font-size:max(.7813vw, 10px); font-weight: normal; letter-spacing: -0.01em; line-height: 1.5 }
.b3 {
font-size:max(.7292vw, 10px); letter-spacing: -0.01em; line-height: 1.6 }
.d1 {
font-size:max(.7813vw, 10px); letter-spacing: -0.02em }
@media screen and (max-width: 1024px) {
.h1 { font-size: min(3.7109vw, 38px) }
.h2 { font-size: min(3.125vw, 32px) }
.h3 { font-size: min(12.1094vw, 128px) }
.h4 { font-size: min(8.9844vw, 96px) }
.t1 { font-size: min(2.3438vw, 24px) }
.t2 { font-size: min(2.1484vw, 22px) }
.t3 { font-size: min(1.7578vw, 20px) }
.t4 { font-size: 18px }
.t5 { font-size: 15px }
.t6 { font-size: 16px }
.b1 { font-size: 15px }
.b2 { font-size: 14px }
.b3 { font-size: 13px }
.d1 { font-size: 12px }
}
@media screen and (max-width: 767px) {
.h1 { font-size: min(7.1795vw, 30px) }
.h2 { font-size: min(6.1538vw, 26px) }
.h3 { font-size: min(16.4103vw, 68px) }
.h4 { font-size: min(15.3846vw, 64px) }
.t1 { font-size: min(5.641vw, 24px) }
.t2 { font-size: min(5.1282vw, 22px) }
.t3 { font-size: min(4.359vw, 20px) }
.t4 { font-size: 16px }
.t5 { font-size: 15px }
.t6 { font-size: 15px }
.b1 { font-size: 14px }
.b2 { font-size: 13px }
.b3 { font-size: 12px }
.d1 { font-size: 12px }
}
.sub-h1 { font-size: max(5vw, 64px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.45 }
.sub-h2 { font-size: max(4.1667vw, 52px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.45 }
.sub-h3 { font-size: max(3.75vw, 48px); letter-spacing: -0.01em; line-height: 1.4; font-weight: 600 }
.sub-h4-52-sb { font-size: max(2.7083vw, 36px); letter-spacing: -0.01em; line-height: 1.45; font-weight: 600 }
.sub-t1 { font-size: max(1.875vw, 24px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.4 }
.sub-t2 { font-size: max(1.6667vw, 22px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.4 }
.sub-t3 { font-size: max(1.5625vw, 20px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.4 }
.sub-t4-m { font-size: max(1.25vw, 16px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.5 }
.sub-t4-sb { font-size: max(1.25vw, 16px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.45 }
.sub-t4-sb em { color: #004098 }
.sub-t5 { font-size: max(1.1458vw, 16px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.45 }
.sub-t6-sb { font-size: max(1.0417vw, 14px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.5 }
.sub-t6-m { font-size: max(1.0417vw, 15px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.45 }
.sub-b1 { font-size: max(1.0417vw, 14px); font-weight: 500; line-height: 1.5; letter-spacing: -0.01em }
.sub-b2-m {
font-size:max(.9375vw, 12px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.5 }
.sub-b2-r {
font-size:max(.9375vw, 12px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.5 }
.sub-b3-sb {
font-size:max(.8333vw, 11px); letter-spacing: -0.01em; font-weight: 600; line-height: 1.6 }
.sub-b3-m {
font-size:max(.8333vw, 11px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.6 }
.sub-b3-r {
font-size:max(.8333vw, 11px); letter-spacing: -0.01em; font-weight: 400; line-height: 1.6 }
.sub-b4 {
font-size:max(.7813vw, 11px); letter-spacing: -0.01em; font-weight: 400; line-height: 1.6 }
.sub-b5 {
font-size:max(.7292vw, 10px); letter-spacing: -0.01em; line-height: 1.45 }
.sub-d1 {
font-size:max(.7813vw, 10px); letter-spacing: -0.02em; font-weight: 400; line-height: 1 }
@media screen and (max-width: 1024px) {
.sub-h1 { font-size: min(9.2308vw, 48px) }
.sub-h2 { font-size: min(8.7179vw, 40px) }
.sub-h3 { font-size: min(8.2051vw, 34px) }
.sub-h4-52-sb { font-size: min(6.1538vw, 26px) }
.sub-t1 { font-size: 22px }
.sub-t2 { font-size: 20px }
.sub-t3 { font-size: 18px }
.sub-t4-m { font-size: 17px }
.sub-t4-sb { font-size: 17px }
.sub-t5 { font-size: 15px }
.sub-t6-sb { font-size: 16px }
.sub-t6-m { font-size: 16px }
.sub-b1 { font-size: 16px }
.sub-b2-m { font-size: 15px }
.sub-b2-r { font-size: 15px }
.sub-b3-sb { font-size: 14px }
.sub-b3-m { font-size: 14px }
.sub-b3-r { font-size: 14px }
.sub-b4 { font-size: 13px }
.sub-b5 { font-size: 12px }
.sub-d1 { font-size: 12px }
}
@media screen and (max-width: 767px) {
.sub-h1 { font-size: min(9.2308vw, 46px) }
.sub-h2 { font-size: min(8.7179vw, 40px) }
.sub-h3 { font-size: min(8.2051vw, 34px) }
.sub-h4-52-sb { font-size: min(6.1538vw, 26px) }
.sub-t1 { font-size: 22px }
.sub-t2 { font-size: 20px }
.sub-t3 { font-size: 18px }
.sub-t4-m { font-size: 17px }
.sub-t4-sb { font-size: 17px }
.sub-t5 { font-size: 15px }
.sub-t6-sb { font-size: 16px }
.sub-t6-m { font-size: 16px }
.sub-b1 { font-size: 16px }
.sub-b2-m { font-size: 15px }
.sub-b2-r { font-size: 15px }
.sub-b3-sb { font-size: 14px }
.sub-b3-m { font-size: 14px }
.sub-b3-r { font-size: 14px }
.sub-b4 { font-size: 13px }
.sub-b5 { font-size: 12px }
.sub-d1 { font-size: 12px }
}
.fw-bold { font-weight: 700 !important }
.hidden, [hidden] {
display:none !important
}
.a11y { position: absolute !important; overflow: hidden; height: 1px; width: 1px; clip: rect(1px, 1px, 1px, 1px) }
.container-main { padding-left: calc(max(1.5625vw, 20px) + 6.25vw); padding-right: calc(max(1.5625vw, 20px) + 6.25vw) }
.container-sub1 { padding-left: calc(max(1.5625vw, 20px) + 4.6875vw); padding-right: calc(max(1.5625vw, 20px) + 4.6875vw) }
.container-sub2 { padding-left: calc(max(1.5625vw, 20px) + 4.6875vw); padding-right: calc(max(1.5625vw, 20px) + 4.6875vw) }
@media screen and (max-width: 1024px) {
.container-main { padding-left: calc(max(2.3438vw, 20px) + 3.9063vw); padding-right: calc(max(2.3438vw, 20px) + 3.9063vw) }
.container-sub1 { padding-left: calc(max(2.3438vw, 20px) + 3.9063vw); padding-right: calc(max(2.3438vw, 20px) + 3.9063vw) }
.container-sub2 { padding-left: calc(max(2.3438vw, 20px) + 3.9063vw); padding-right: calc(max(2.3438vw, 20px) + 3.9063vw) }
}
@media screen and (max-width: 767px) {
.container-main { padding-left: 4.1026vw; padding-right: 4.1026vw }
.container-sub1 { padding-left: 4.1026vw; padding-right: 4.1026vw }
.container-sub2 { padding-left: 4.1026vw; padding-right: 4.1026vw }
}
.row { box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; margin-left:calc(0.9375vw * 0.5 * -1);
margin-right:calc(0.9375vw * 0.5 * -1)
}
.row.reverse { justify-content: end }
.row-grid { box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; margin-left:calc(0.9375vw * 0.5 * -1);
margin-right:calc(0.9375vw * 0.5 * -1);
margin-top:calc(4.8rem * 0.5 * -1);
margin-bottom:calc(4.8rem * 0.5 * -1)
}
.row-grid .col-4 { padding-top:calc(4.8rem * 0.5);
padding-bottom:calc(4.8rem * 0.5)
}
.row-grid .col-3 { padding-top:calc(4.8rem * 0.5);
padding-bottom:calc(4.8rem * 0.5)
}
@media screen and (max-width: 767px) {
.row-grid .col-4 { padding-top: 0; padding-bottom: 0 }
.row-grid .col-3 { padding-top: 0; padding-bottom: 0 }
}
.grid-1 { box-sizing: border-box }
.grid-2 { box-sizing: border-box }
.grid-3 { box-sizing: border-box }
.grid-4 { box-sizing: border-box }
.grid-5 { box-sizing: border-box }
.grid-6 { box-sizing: border-box }
.grid-7 { box-sizing: border-box }
.grid-8 { box-sizing: border-box }
.grid-9 { box-sizing: border-box }
.grid-10 { box-sizing: border-box }
.grid-11 { box-sizing: border-box }
.grid-12 { box-sizing: border-box }
.grid-13 { box-sizing: border-box }
.grid-14 { box-sizing: border-box }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { box-sizing: border-box; flex: 0 0 auto; padding-left:calc(0.9375vw * 0.5);
padding-right:calc(0.9375vw * 0.5)
}
.col-1 { flex-basis:calc(100% / 12 * 1);
max-width:calc(100% / 12 * 1)
}
@media screen and (min-width: 1025px) {
.col-offset-1 { margin-left:calc(100% / 12 * 1)
}
}
.col-2 { flex-basis:calc(100% / 12 * 2);
max-width:calc(100% / 12 * 2)
}
@media screen and (min-width: 1025px) {
.col-offset-2 { margin-left:calc(100% / 12 * 2)
}
}
.col-3 { flex-basis:calc(100% / 12 * 3);
max-width:calc(100% / 12 * 3)
}
@media screen and (min-width: 1025px) {
.col-offset-3 { margin-left:calc(100% / 12 * 3)
}
}
.col-4 { flex-basis:calc(100% / 12 * 4);
max-width:calc(100% / 12 * 4)
}
@media screen and (min-width: 1025px) {
.col-offset-4 { margin-left:calc(100% / 12 * 4)
}
}
.col-5 { flex-basis:calc(100% / 12 * 5);
max-width:calc(100% / 12 * 5)
}
@media screen and (min-width: 1025px) {
.col-offset-5 { margin-left:calc(100% / 12 * 5)
}
}
.col-6 { flex-basis:calc(100% / 12 * 6);
max-width:calc(100% / 12 * 6)
}
@media screen and (min-width: 1025px) {
.col-offset-6 { margin-left:calc(100% / 12 * 6)
}
}
.col-7 { flex-basis:calc(100% / 12 * 7);
max-width:calc(100% / 12 * 7)
}
@media screen and (min-width: 1025px) {
.col-offset-7 { margin-left:calc(100% / 12 * 7)
}
}
.col-8 { flex-basis:calc(100% / 12 * 8);
max-width:calc(100% / 12 * 8)
}
@media screen and (min-width: 1025px) {
.col-offset-8 { margin-left:calc(100% / 12 * 8)
}
}
.col-9 { flex-basis:calc(100% / 12 * 9);
max-width:calc(100% / 12 * 9)
}
@media screen and (min-width: 1025px) {
.col-offset-9 { margin-left:calc(100% / 12 * 9)
}
}
.col-10 { flex-basis:calc(100% / 12 * 10);
max-width:calc(100% / 12 * 10)
}
@media screen and (min-width: 1025px) {
.col-offset-10 { margin-left:calc(100% / 12 * 10)
}
}
.col-11 { flex-basis:calc(100% / 12 * 11);
max-width:calc(100% / 12 * 11)
}
@media screen and (min-width: 1025px) {
.col-offset-11 { margin-left:calc(100% / 12 * 11)
}
}
.col-12 { flex-basis:calc(100% / 12 * 12);
max-width:calc(100% / 12 * 12)
}
@media screen and (min-width: 1025px) {
.col-offset-12 { margin-left:calc(100% / 12 * 12)
}
}
@media screen and (max-width: 1366px) {
.row { margin-left:calc(1.1719vw * 0.5 * -1);
margin-right:calc(1.1719vw * 0.5 * -1)
}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { box-sizing: border-box; flex: 0 0 auto; padding-left:calc(1.1719vw * 0.5);
padding-right:calc(1.1719vw * 0.5)
}
.col-lg-1 { flex-basis:calc(100% / 12 * 1);
max-width:calc(100% / 12 * 1)
}
.col-offset-lg-1 { margin-left:calc(100% / 12 * 1)
}
.col-lg-2 { flex-basis:calc(100% / 12 * 2);
max-width:calc(100% / 12 * 2)
}
.col-offset-lg-2 { margin-left:calc(100% / 12 * 2)
}
.col-lg-3 { flex-basis:calc(100% / 12 * 3);
max-width:calc(100% / 12 * 3)
}
.col-offset-lg-3 { margin-left:calc(100% / 12 * 3)
}
.col-lg-4 { flex-basis:calc(100% / 12 * 4);
max-width:calc(100% / 12 * 4)
}
.col-offset-lg-4 { margin-left:calc(100% / 12 * 4)
}
.col-lg-5 { flex-basis:calc(100% / 12 * 5);
max-width:calc(100% / 12 * 5)
}
.col-offset-lg-5 { margin-left:calc(100% / 12 * 5)
}
.col-lg-6 { flex-basis:calc(100% / 12 * 6);
max-width:calc(100% / 12 * 6)
}
.col-offset-lg-6 { margin-left:calc(100% / 12 * 6)
}
.col-lg-7 { flex-basis:calc(100% / 12 * 7);
max-width:calc(100% / 12 * 7)
}
.col-offset-lg-7 { margin-left:calc(100% / 12 * 7)
}
.col-lg-8 { flex-basis:calc(100% / 12 * 8);
max-width:calc(100% / 12 * 8)
}
.col-offset-lg-8 { margin-left:calc(100% / 12 * 8)
}
.col-lg-9 { flex-basis:calc(100% / 12 * 9);
max-width:calc(100% / 12 * 9)
}
.col-offset-lg-9 { margin-left:calc(100% / 12 * 9)
}
.col-lg-10 { flex-basis:calc(100% / 12 * 10);
max-width:calc(100% / 12 * 10)
}
.col-offset-lg-10 { margin-left:calc(100% / 12 * 10)
}
.col-lg-11 { flex-basis:calc(100% / 12 * 11);
max-width:calc(100% / 12 * 11)
}
.col-offset-lg-11 { margin-left:calc(100% / 12 * 11)
}
.col-lg-12 { flex-basis:calc(100% / 12 * 12);
max-width:calc(100% / 12 * 12)
}
.col-offset-lg-12 { margin-left:calc(100% / 12 * 12)
}
.col-offset-lg-0 { margin-left: 0 }
}
@media screen and (max-width: 1024px) {
.row { margin-left:calc(1.1719vw * 0.5 * -1);
margin-right:calc(1.1719vw * 0.5 * -1)
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8 { box-sizing: border-box; flex: 0 0 auto; padding-left:calc(1.1719vw * 0.5);
padding-right:calc(1.1719vw * 0.5)
}
.col-md-1 { flex-basis:calc(100% / 8 * 1);
max-width:calc(100% / 8 * 1)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-1 { margin-left:calc(100% / 8 * 1)
}
}
@media screen and (max-width: 1024px) {
.col-md-2 { flex-basis:calc(100% / 8 * 2);
max-width:calc(100% / 8 * 2)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-2 { margin-left:calc(100% / 8 * 2)
}
}
@media screen and (max-width: 1024px) {
.col-md-3 { flex-basis:calc(100% / 8 * 3);
max-width:calc(100% / 8 * 3)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-3 { margin-left:calc(100% / 8 * 3)
}
}
@media screen and (max-width: 1024px) {
.col-md-4 { flex-basis:calc(100% / 8 * 4);
max-width:calc(100% / 8 * 4)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-4 { margin-left:calc(100% / 8 * 4)
}
}
@media screen and (max-width: 1024px) {
.col-md-5 { flex-basis:calc(100% / 8 * 5);
max-width:calc(100% / 8 * 5)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-5 { margin-left:calc(100% / 8 * 5)
}
}
@media screen and (max-width: 1024px) {
.col-md-6 { flex-basis:calc(100% / 8 * 6);
max-width:calc(100% / 8 * 6)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-6 { margin-left:calc(100% / 8 * 6)
}
}
@media screen and (max-width: 1024px) {
.col-md-7 { flex-basis:calc(100% / 8 * 7);
max-width:calc(100% / 8 * 7)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-7 { margin-left:calc(100% / 8 * 7)
}
}
@media screen and (max-width: 1024px) {
.col-md-8 { flex-basis:calc(100% / 8 * 8);
max-width:calc(100% / 8 * 8)
}
}
@media screen and (max-width: 1024px)and (max-width: 1024px)and (min-width: 768px) {
.col-offset-md-8 { margin-left:calc(100% / 8 * 8)
}
}
@media screen and (max-width: 767px) {
.row { margin-left:calc(0.8rem * 0.5 * -1);
margin-right:calc(0.8rem * 0.5 * -1)
}
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4 { box-sizing: border-box; flex: 0 0 auto; padding-left:calc(0.8rem * 0.5);
padding-right:calc(0.8rem * 0.5)
}
.col-sm-1 { flex-basis:calc(100% / 4 * 1);
max-width:calc(100% / 4 * 1)
}
.col-offset-sm-1 { margin-left:calc(100% / 4 * 1)
}
.col-sm-2 { flex-basis:calc(100% / 4 * 2);
max-width:calc(100% / 4 * 2)
}
.col-offset-sm-2 { margin-left:calc(100% / 4 * 2)
}
.col-sm-3 { flex-basis:calc(100% / 4 * 3);
max-width:calc(100% / 4 * 3)
}
.col-offset-sm-3 { margin-left:calc(100% / 4 * 3)
}
.col-sm-4 { flex-basis:calc(100% / 4 * 4);
max-width:calc(100% / 4 * 4)
}
.col-offset-sm-4 { margin-left:calc(100% / 4 * 4)
}
}
[class*=spacing] {
display:block;
pointer-events:none
}
[class*=spacing][class*=mobile] {
display:none
}
@media screen and (max-width: 767px) {
[class*=spacing][class*=mobile] {
display:block
}
}
.mobilebr { font-size: inherit }
@media screen and (max-width: 1024px) {
.mobilebr { height: 1em }
}
.mobilebr-sm { font-size: inherit }
@media screen and (max-width: 1024px) {
.mobilebr-sm { display: block; height: 0em; width: 100% }
}
.spacing1 { height: clamp(160px, 12.5vw, 280px) }
.spacing2 { height: clamp(132px, 10.4167vw, 240px) }
.spacing3 { height: clamp(108px, 8.3333vw, 200px) }
.spacing4 { height: clamp(80px, 6.25vw, 160px) }
.spacing5 { height: clamp(68px, 5.2083vw, 120px) }
.spacing6 { height: clamp(52px, 5.2083vw, 100px) }
@media screen and (max-width: 1024px) {
.spacing1 { height: clamp(106px, 12.5vw, 128px) }
.spacing2 { height: clamp(88px, 10.3516vw, 106px) }
.spacing3 { height: clamp(72px, 8.5938vw, 88px) }
.spacing4 { height: clamp(64px, 7.0313vw, 72px) }
.spacing5 { height: clamp(56px, 6.25vw, 64px) }
.spacing6 { height: clamp(48px, 5.4688vw, 56px) }
}
@media screen and (max-width: 767px) {
.spacing1 { height: clamp(100px, 25.641vw, 128px) }
.spacing2 { height: clamp(80px, 20.5128vw, 106px) }
.spacing3 { height: clamp(64px, 16.4103vw, 88px) }
.spacing4 { height: clamp(56px, 14.359vw, 72px) }
.spacing5 { height: clamp(48px, 12.3077vw, 64px) }
.spacing6 { height: clamp(40px, 10.2564vw, 56px) }
}
:root { --header-height: clamp(68px, 4.375vw, 100px);
--header-top-height: clamp(36px, 1.9792vw, 46px);
--header-total-height: calc(var(--header-height) + var(--header-top-height))
}
@media screen and (max-width: 1024px) {
:root { --header-height: 66px;
--header-top-height: 36px
}
}
@media screen and (max-width: 767px) {
:root { --header-height: 66px;
--header-top-height: 36px
}
}
header { position: fixed; width: 100%; top: 0; z-index: 9999; transition: transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1) }
@media screen and (max-width: 1024px) {
header { background-color: #fff }
}
@media screen and (min-width: 768px) {
header [data-mobile-only] { display: none !important }
}
@media screen and (min-width: 1025px) {
header [data-tablet-mobile-only] { display: none !important }
}
@media screen and (max-width: 1024px) {
header [desktop-only] { display: none !important }
}
@media screen and (min-width: 1025px) {
header[open] .header .header-inner:has(.header-units-mobile):has(.gnb a:hover):not(.header-search-area.active), header[open] .header .header-inner:has(.gnb-under li:hover):not(.header-search-area.active), header[open] .header:has(.header-search-area.active):not(.header-search-area.active) {
position:relative
}
header[open] .header .header-inner:has(.header-units-mobile):has(.gnb a:hover):not(.header-search-area.active)::after, header[open] .header .header-inner:has(.gnb-under li:hover):not(.header-search-area.active)::after, header[open] .header:has(.header-search-area.active):not(.header-search-area.active)::after {
display:block;
content:"";
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:100vw;
height:1px;
background-color:#e0e0e0;
z-index:-1
}
header[open] .header .header-inner:has(.header-units-mobile):has(.gnb a:hover):not(.header-search-area.active)::after, header[open] .header .header-inner:has(.gnb-under li:hover):not(.header-search-area.active)::after, header[open] .header:has(.header-search-area.active):not(.header-search-area.active)::after {
z-index:9990;
bottom:0px
}
}
header:not([active]) { transform: translateY(-100%); transition: none }
@media screen and (min-width: 1025px) {
body[direction=up] { --header-height:clamp(48px, 3.333vw, 80px);
--header-top-height:clamp(30px, 1.7708vw, 42px)
}
}
body[direction=up] header { transform: translateY(0%) !important }
body[direction=up] header .header-inner .gnb::before { transform: translate(-50%, var(--header-height)) }
body[direction=down] header { transform: translateY(-100%) !important }
body[direction=down] header .header-inner .gnb::before { transform: translate(-50%, var(--header-height)) }
.header { transition: height .15s ease-out; height: var(--header-height) }
.header-container { padding: 0 4.1026vw; width: 100%; height: 100%; box-sizing: border-box }
@media screen and (max-width: 767px) {
[lang=en] .header-top .header-container { padding: 0; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none }
[lang=en] .header-top .header-container::-webkit-scrollbar {
display:none
}
}
.header-top { z-index: 10000; position: relative; height: var(--header-top-height); background-color: #004098 }
.header-top-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100% }
.header-top-inner .header-lang {position:relative;left:30px; display: flex; justify-content: center; align-items: center; gap: 1.8461538462em; font-size:max(.6771vw, 12px);
color: #fff }
.header-top .header-family-site { display: flex }
@media screen and (max-width: 767px) {
.header-top .header-family-site { justify-content: space-between; width: 100%; margin: 0 26px }
}
.header-top .header-family-site a { display: block; font-size:max(.6771vw, 12px);
margin-right: 2.4615384615em; white-space: nowrap; word-break: keep-all }
@media screen and (max-width: 1024px) {
.header-top .header-family-site a { font-size: 14px; margin-right: 34px }
}
@media screen and (max-width: 767px) {
.header-top .header-family-site a { font-size: 14px; margin-right: 0 }
}
@media screen and (max-width: 767px) {
[lang=en] .header-top .header-family-site { margin: 0 4.1026vw; width: fit-content }
}
[lang=en] .header-top .header-family-site a { text-transform: uppercase }
@media screen and (max-width: 1024px) {
[lang=en] .header-top .header-family-site a { font-size: 13px; margin-right: 18px }
}
.header-top a { color: #fff; font-weight: 500 }
.header:has(.header-search-area.active)::before {
content:"";
display:block;
width:100vw;
height:100vh;
background-color:rgba(0,0,0,.4);
position:fixed;
top:0;
left:0;
z-index:-10
}
.header-global-list {
font-size:max(.6771vw, 12px) !important; position: relative !important; z-index: 10000 !important; width: fit-content !important; min-width: unset !important }
.header-global-list * {
font-size:max(.6771vw, 12px) !important; text-transform: uppercase; background-color: #004098 !important; color: unset !important }
.header-global-list:hover, .header-global-list:active, .header-global-list:hover *, .header-global-list:active * { background-color: #004098 !important; color: unset !important; cursor: pointer }
.header-global-list button { white-space: nowrap; max-height: var(--header-top-height) !important; border: 0 !important; padding: 0 !important }
.header-global-list button:not(.select__btn):hover { text-decoration: underline }
.header-global-list button.selected { position: relative }
.header-global-list button.selected::before {
width:max(.5208vw, 10px);
height:max(.5208vw, 10px); font-size: inherit; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; content: ""; background: url("/images/ksob_arrow_under_white.svg") center center/max(0.5208vw, 10px) no-repeat }
.header-global-list button.select__btn { position: relative }
.header-global-list button.select__btn::before {
width:max(.5208vw, 10px);
height:max(.5208vw, 10px);
font-size:max(.6771vw, 12px); position: absolute; right: 73px; top: 50%; transform: translateY(-50%); display: block; content: ""; background: url("/images/ksob_arrow_under_white.svg") center center/max(0.5208vw, 10px) no-repeat }
.header-global-list button.select__btn:hover, .header-global-list button.select__btn:active { position: relative;right:73px; }
.header-global-list button.select__btn:hover::before, .header-global-list button.select__btn:active::before {
width:max(.5208vw, 10px);
height:max(.5208vw, 10px);
font-size:max(.6771vw, 12px); position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; content: ""; background: url("/images/ksob_arrow_under_white.svg") center center/max(0.5208vw, 10px) no-repeat }
.header-global-list button { min-width: 10.8333333333em; font-size:max(.625vw, 10px);
line-height: 130% !important; width: fit-content }
.header-global-list button.select__btn.open { position: relative }
.header-global-list button.select__btn.open::before {
width:max(.5208vw, 10px);
height:max(.5208vw, 10px);
font-size:max(.6771vw, 12px); position: absolute; right: 0; top: 50%; display: block; content: ""; background: url("/images/ksob_arrow_under_white.svg") center center/max(0.5208vw, 10px) no-repeat; transform: translateY(-50%) rotate(180deg) }
.header-global-list .drop-box { width: fit-content; position: absolute !important; font-size:max(.625vw, 10px);
top: calc(var(--header-top-height) + .3636363636em) !important; left: 50% !important; transform: translateX(-50%) !important; border-radius: var(--br-4) !important; padding: 1.8181818182em !important; min-width: 11.9090909091em; text-transform: uppercase; visibility: hidden; line-height: 130% !important }
.header-global-list .drop-box.active { visibility: visible }
.header-global-list .drop-box button { margin: 0 !important; padding: 0 !important; font-size:max(.625vw, 10px) !important;
line-height: 130% !important; width: fit-content !important; min-height: unset !important; text-transform: uppercase; display: block }
.header-global-list .drop-box button:not(:last-of-type) { margin-bottom: 1.0909090909em !important }
.header-global-list .drop-box button::before { display: none }
.header-global-list .drop-box button.selected { opacity: 0 !important; height: unset !important; min-height: unset !important }
.header-units { position: relative; z-index: 9999 }
.header-units[desktop-only] { display: flex; justify-content: center; align-items: center; gap: .5em; font-size: 20px }
.header-units .header-contact-btn {
font-size:max(.7292vw, 12px); font-weight: 500; line-height: 1; padding: 0 1.4285714286em; height: max(2.0833vw, 32px); border-radius: 3rem; display: flex; justify-content: center; align-items: center; background-color: #e4e4e4; transition: all .3s ease-in }
.header-units .header-search-btn { display: flex; justify-content: center; align-items: center; font-size: 14px; width: max(2.0833vw, 32px); height: max(2.0833vw, 32px); padding: 0; border-radius: 40px; background: #e4e4e4 url("/images/ksob_search.svg") center center/max(1.0417vw, 16px) no-repeat }
.header-units .header-search-btn:hover { cursor: pointer }
.header-units:has(~.header-search-area.active) .header-search-btn {
background:#e4e4e4 url("/images/ksob_close.svg") center center/max(1.0417vw, 16px) no-repeat
}
.header-units-mobile span { display: block; width: 1.2em; font-size: 20px; height: 2px; background-color: #000; border-radius: var(--br-1); transition: transform .3s ease-in }
@media screen and (max-width: 1024px) {
.header-units-mobile { font-size: 20px; width: 1.2em; height: .9em; margin-right: 3px; display: flex; flex-direction: column; justify-content: center; align-items: center; align-items: flex-start; justify-content: space-between }
}
.header-units-mobile.open span:first-of-type { transform: translate(0px, 400%) rotate(45deg) }
.header-units-mobile.open span:nth-of-type(2) { display: none }
.header-units-mobile.open span:last-of-type { transform: translate(0px, -400%) rotate(-45deg) }
.header-search-area { background-color: #fff; width: 100vw; font-size: 20px; height: var(--header-height); opacity: 0; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: -1; transition: height .25s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .35s cubic-bezier(0.165, 0.84, 0.44, 1); border-radius: 0 0 17px 17px; z-index: -1; overflow: hidden; display: flex; justify-content: center; align-items: center }
.header-search-area.active { opacity: 1; height: calc(var(--header-height) + 9.4em) }
.header-search-area.active::after { content: ""; display: block; width: 100vw; height: 0px; background-color: #e0e0e0; position: absolute; top: var(--header-height); left: 50%; transform: translateX(-50%) }
.header-search-area input { width: 100%; background-color: #f5f5f5; border-radius: 1.25em; font-size: max(1.25vw, 17px); padding: .75em 1.25em; border: 0; display: block; height: unset; position: relative }
.header-search-area input:focus { outline: none }
.header-search-area .header-input { margin-top: calc(var(--header-height) + clamp(40px, 3.125vw, 68px)); margin-bottom: clamp(40px, 3.125vw, 68px); height: fit-content; position: relative }
.header-search-area .header-input em { display: none; font-size: 20px; content: ""; width: max(1.25vw, 16px); height: max(1.25vw, 16px); position: absolute; right: max(3.958vw, 76px); top: 50%; transform: translateY(-50%); background: url("/images/ksob_search_clean.svg") 100% 100%/contain no-repeat }
.header-search-area .header-input em:hover { cursor: pointer }
.header-search-area .header-input span { font-size: 20px; content: ""; display: block; width: max(1.6667vw, 22px); height: max(1.6667vw, 22px); position: absolute; right: 1.6em; top: 50%; transform: translateY(-50%); background: url("/images/ksob_search.svg") 100% 100%/contain no-repeat }
.header-search-area .header-input span:hover { cursor: pointer }
.header-search-area .header-input.typed em { display: block }
.header-inner { position: relative; display: flex; justify-content: space-between; align-items: center; height: 100% }
.header-inner:has(.gnb-under) {
height:fit-content
}
.header-inner:has(~.header-inner .gnb-under li:nth-of-type(1):hover) .gnb li:nth-of-type(1) a::after {
width:100%
}
.header-inner:has(~.header-inner .gnb-under li:nth-of-type(2):hover) .gnb li:nth-of-type(2) a::after {
width:100%
}
.header-inner:has(~.header-inner .gnb-under li:nth-of-type(3):hover) .gnb li:nth-of-type(3) a::after {
width:100%
}
.header-inner:has(~.header-inner .gnb-under li:nth-of-type(4):hover) .gnb li:nth-of-type(4) a::after {
width:100%
}
.header-inner:has(~.header-inner .gnb-under li:nth-of-type(5):hover) .gnb li:nth-of-type(5) a::after {
width:100%
}
.header-inner .logo img { position: relative; z-index: 9999; height: max(1.5625vw, 24px); width: auto }
@media screen and (max-width: 1024px) {
.header-inner .logo img { height: 26px }
}
[lang=en] .header-inner .logo img { height: max(2.1354vw, 34px) }
@media screen and (max-width: 1024px) {
[lang=en] .header-inner .logo img { height: 34px }
}
.header-inner:has(~.header-inner .gnb-under:hover) .gnb li {
width:max(8.3333vw, 122px);
padding:0
}
[lang=en] .header-inner:has(~.header-inner .gnb-under:hover) .gnb li {
width:max(10vw, 128px)
}
.header-inner .gnb { display: flex; font-size:max(.9375vw, 15px);
position: absolute; top: 0; left: 50%; transform: translateX(-50%) }
.header-inner .gnb li { word-break: keep-all; transition: width .5s ease-out; width: 8.5em }
.header-inner .gnb li a { color: #000; font-weight: 500; font-size:max(.9375vw, 15px);
letter-spacing: -0.01em; transition: height .15s ease-out; height: var(--header-height); display: flex; align-items: center; justify-content: center; position: relative }
.header-inner .gnb li a::after { position: absolute; bottom: -3px; left: 0; content: ""; display: block; height: 3px; width: 0; background-color: #004098; transition: width .5s ease-in-out }
.header-inner .gnb li:hover a::after { width: 100% }
.header-inner .gnb li:hover~li, .header-inner .gnb li:hover, .header-inner .gnb li:has(~li:hover) {
width:max(8.3333vw, 122px);
padding:0
}
[lang=en] .header-inner .gnb li:hover~li, [lang=en] .header-inner .gnb li:hover, [lang=en] .header-inner .gnb li:has(~li:hover) {
width:max(10vw, 128px)
}
.header-inner .gnb-under { height: 0; opacity: 0; overflow: hidden; width: 100%; position: absolute; left: 55%; top: -0.5px; transform: translateX(-50%); transition: height .15s cubic-bezier(0.165, 0.84, 0.44, 1) .15s, opacity .1s cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 9999 }
.header-inner .gnb-under ul { display: flex; justify-content: center; align-items: center; height: 100% }
.header-inner .gnb-under ul li { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; font-size:max(.8333vw, 13px);
font-weight: 400; line-height: 130%; letter-spacing: -0.16px; gap: .875em; padding: max(1.875vw, 28px) 0; width: max(8.3333vw, 122px); height: 100%; border-left: 1px solid #e0e0e0; word-break: keep-all; white-space: nowrap }
.header-inner .gnb-under ul li:last-of-type { border-right: 1px solid #e0e0e0 }
.header-inner .gnb-under ul li a { position: relative }
.header-inner .gnb-under ul li a em.icon { position: absolute; right:-.5208333333vw;
top:-.2604166667vw
}
.header-inner .gnb-under ul li a span { background-image: linear-gradient(transparent calc(100% - 1px), #000000 1px); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .3s ease-in }
.header-inner .gnb-under ul li a.active span { background-size: 100% 100% }
.header-inner .gnb-under ul li a:hover span { background-size: 100% 100% }
[lang=en] .header-inner .gnb-under ul li { width: max(10vw, 128px); font-size:max(.8333vw, 11px)
}
.header-inner .gnb-under:hover { font-size: 20px; opacity: 1; height: max(13.9583vw, 21.8rem) }
[lang=en] .header-inner .gnb, [lang=en] .header-inner .gnb-under { text-transform: uppercase }
.header-inner .gnb::after { content: ""; display: block; background-color: #fff; width: 100vw; font-size: 20px; height: var(--header-height); opacity: 1; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: -1; transition: height .15s ease-in, opacity .15s ease-in }
.header-inner .gnb::before { content: ""; display: block; background-color: rgba(0,0,0,.4); width: 100vw; font-size: 20px; height: 100vh; opacity: 0; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: -2; transition: opacity .15s ease-in; pointer-events: none }
.header-inner .gnb:has(li:hover)::after {
height:calc(var(--header-height) + max(13.9583vw, 21.8rem));
opacity:1;
border-radius:0 0 .85em .85em;
font-size:20px
}
.header-inner .gnb:has(li:hover)::before {
height:100vh;
opacity:1;
pointer-events:all
}
.header-inner:has(~.header-inner .gnb-under:hover) .gnb::after {
height:calc(var(--header-height) + max(13.9583vw, 21.8rem));
opacity:1;
border-radius:0 0 .85em .85em;
font-size:20px
}
.header-inner:has(~.header-inner .gnb-under:hover) .gnb::before {
opacity:1
}
.header-inner:not(.gnb-under):has(li:hover)~.header-inner .gnb-under {
font-size:20px;
opacity:1;
height:max(13.9583vw, 21.8rem)
}
.header-inner-mobile { pointer-events: none; position: fixed; top: var(--header-total-height); right: 0; width: 0; opacity: 0; box-sizing: border-box; padding-left: max(1.5625vw, 20px); padding-right: max(1.5625vw, 20px); overflow: hidden; height: calc(100vh - var(--header-total-height) - env(safe-area-inset-bottom)); background-color: #fff; z-index: -1; transition: width .5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .2s cubic-bezier(0.165, 0.84, 0.44, 1) }
@supports(height: 100dvh) {
.header-inner-mobile {
height:calc(100dvh - var(--header-total-height) - env(safe-area-inset-bottom))
}
}
.header-inner-mobile input { margin-bottom: 2.5em; width: 100%; display: block; background-color: #f5f5f5; border-radius: 30px; font-size: 16px; padding: .8125em 3em .8125em 1.25em; border: 0 }
.header-inner-mobile input:focus { outline: none }
@media screen and (max-width: 1024px) {
.header-inner-mobile { padding-left: max(3.5156vw, 32px); padding-right: max(3.5156vw, 32px) }
}
@media screen and (max-width: 767px) {
.header-inner-mobile { padding-left: max(1.5625vw, 20px); padding-right: max(1.5625vw, 20px) }
}
.header-inner-mobile .header-input { position: relative }
.header-inner-mobile .header-input span { content: ""; display: block; width: 24px; height: 24px; position: absolute; right: 1.6em; top: 50%; transform: translateY(-50%); background: url("/images/ksob_search.svg") 100% 100%/contain no-repeat }
.header-inner-mobile .header-input em { display: none; font-size: 20px; content: ""; width: max(20px, 1em); height: max(20px, 1em); position: absolute; right: 2em; top: 50%; transform: translateY(-50%); background: url("/images/ksob_search.svg") 100% 100%/contain no-repeat }
.header-inner-mobile .header-input em:hover { cursor: pointer }
@media screen and (max-width: 1024px) {
.header-inner-mobile .header-input em { right: 2.5em }
}
.header-inner-mobile .header-input.typed em { display: block }
.header-inner-mobile [accordion-wrap] { align-items: flex-start }
[lang=en] .header-inner-mobile [accordion-wrap] { text-transform: uppercase }
.header-inner-mobile [accordion-wrap] [accordion-li] { font-size: 22px; font-style: normal; font-weight: 500; line-height: 130%; letter-spacing: -0.22px; margin-bottom: 1.2727272727em; width: 100%; height: fit-content; justify-content: space-between; display: flex; flex-wrap: wrap }
.header-inner-mobile [accordion-wrap] [accordion-li] img { transition: transform .5s linear; width: .8181818182em; display: block }
.header-inner-mobile [accordion-wrap] [accordion-li] [accordion-hiddencont] .ul { margin-top: .75em; background-color: #ebf0f6; padding: 1.5em 1.25em; border-radius: 12px; font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; letter-spacing: -0.16px; width: 100%; display: block }
.header-inner-mobile [accordion-wrap] [accordion-li] [accordion-hiddencont] .ul a:not(:last-of-type) { display: block; margin-bottom: 1.125em }
.header-inner-mobile [accordion-wrap] [accordion-li] [accordion-hiddencont] .ul span { background-image: linear-gradient(transparent calc(100% - 1px), #000000 1px); background-repeat: no-repeat; background-size: 0% 100% }
.header-inner-mobile [accordion-wrap] [accordion-li] [accordion-hiddencont] .ul span.active { background-size: 100% 100% }
.header-inner-mobile [accordion-wrap] [accordion-li].active { color: #004098 }
.header-inner-mobile [accordion-wrap] [accordion-li].active [accordion-hiddencont] { color: #000 }
.header-inner-mobile [accordion-wrap] [accordion-li].active img { transform: rotate(180deg) }
.header-inner-mobile .header-bottom { display: flex; justify-content: center; align-items: center; margin-bottom: 2em; justify-content: flex-start; font-size: 14px; font-weight: 500; line-height: 100%; letter-spacing: -0.14px }
.header-inner-mobile .header-bottom .lang { margin-right: 1.2857142857em; display: flex; justify-content: center; align-items: center; gap: 1.2857142857em; border-right: 1px solid #ccc; margin-right: 1.5714285714em; padding-right: 1.5714285714em }
.header-inner-mobile .header-bottom .lang a { opacity: .4; display: inline-block; width: fit-content; position: relative }
.header-inner-mobile .header-bottom .lang a.active { pointer-events: none; opacity: 1 }
.header-inner-mobile .header-bottom .lang a.active::after { content: ""; display: block; width: 100%; position: absolute; height: 1px; bottom: 0; left: 0; background-color: #000; transition: width .3s ease-in }
@media screen and (max-width: 1024px) {
.header .header-inner-mobile.open { overscroll-behavior: contain; display: flex; flex-direction: column; justify-content: space-between; gap: 4rem; overflow-y: auto; width: 422px; opacity: 1; pointer-events: all; background-color: #fff; z-index: 10 }
.header .header-inner-mobile.open::before { content: ""; display: block; width: 422px; height: calc(100dvh - var(--header-total-height) - env(safe-area-inset-bottom)); position: fixed; right: 0; top: var(--header-total-height); bottom: 0; background-color: #fff; z-index: -9; opacity: inherit; transition: opacity .2s ease-in-out .1s }
.header .header-inner-mobile.open::after { content: ""; display: block; width: calc(100vw - 422px); height: calc(100dvh - var(--header-total-height) - env(safe-area-inset-bottom)); position: fixed; left: 0; top: var(--header-total-height); bottom: 0; background-color: rgba(0,0,0,.4); z-index: -8; opacity: inherit; transition: opacity .2s ease-in-out .1s }
}
@media screen and (max-width: 1024px)and (max-width: 767px) {
.header .header-inner-mobile.open::before { z-index: -8; min-width: 100vw; transition: opacity 0s linear }
.header .header-inner-mobile.open::after { z-index: -10; width: 0; transition: opacity 0s linear }
}
@media screen and (max-width: 767px) {
.header .header-inner-mobile.open { width: 100%; opacity: 1; pointer-events: all }
}
@media screen and (min-width: 1440px) {
[lang=en] .header-inner .gnb li { width: 9.2em }
}
.wrapper { background-color: #000 }
@media screen and (min-width: 1025px) {
.wrapper[data-footer-motion=scale][footerActive] .content-container { border-radius: var(--br-1); transform: scale(0.975) }
}
.wrapper[data-footer-motion=clip][footerActive] .footer-motion-box { transform: translate(0) }
.wrapper .footer-motion-box { position: absolute; bottom: 0; width: max(1.5625vw, 20px); height: 100%; background-color: #000; transition: 600ms ease; z-index: 1 }
.wrapper .footer-motion-box span { position: absolute; background-color: #000; bottom: 0px; height: var(--br-1); width: var(--br-1); overflow: hidden; transition: 600ms ease }
.wrapper .footer-motion-box span::before { content: ""; position: absolute; width: var(--br-1); height: var(--br-1); bottom: 0; background: #fff; z-index: 9; transition: 600ms ease }
.wrapper .footer-motion-box.left { transform: translateX(calc(-100% - var(--br-1))) }
.wrapper .footer-motion-box.left span { left: max(1.5625vw, 20px) }
.wrapper .footer-motion-box.left span::before { right: 0; border-bottom-left-radius: var(--br-1) }
.wrapper .footer-motion-box.right { right: 0; transform: translateX(calc(100% + var(--br-1))) }
.wrapper .footer-motion-box.right span { right: max(1.5625vw, 20px) }
.wrapper .footer-motion-box.right span::before { left: 0; border-bottom-right-radius: var(--br-1) }
.wrapper .footer-motion-box.is-blue span::before { background-color: #004098 }
@media screen and (max-width: 1024px) {
.wrapper .footer-motion-box { display: none }
}
.content-container { position: relative; background-color:none; box-sizing: border-box; overflow: hidden; z-index: 10; transform-origin: bottom; transition: 600ms ease; min-height: 100vh }
.content-container[data-view-type=no-footer] { margin-bottom: 0 !important }
@media screen and (max-width: 1024px) {
.content-container { border-radius: 0 0 var(--br-2) var(--br-2); margin-bottom: 0 !important }
}
footer { background-color: #000; margin: 0 auto; color: #ddd; font-size: 20px }
@media screen and (min-width: 1025px) {
footer { position: fixed; bottom: 0; left: 0; width: 100%; bottom: 0; z-index: 9 }
}
@media screen and (max-width: 1024px) {
footer { position: relative; z-index: 11 !important }
}
footer .footer { position: relative; padding: max(2.0833vw, 40px) 0; display: flex; flex-direction: column; justify-content: center; align-items: center; align-items: flex-start; flex-wrap: wrap; width: 100% }
@media screen and (max-width: 767px) {
footer .footer { padding: 60px 0 }
}
footer .footer-top, footer .footer-mid, footer .footer-bottom, footer .footer-family-site { width: 100% }
footer .footer-inner { display: flex; justify-content: space-between; align-items: center; align-items: flex-start; width: 100% }
@media screen and (min-width: 768px) {
[lang=ko] footer .footer-top { margin-bottom: max(3.75vw, 60px) }
[lang=en] footer .footer-top { margin-bottom: max(4.8958vw, 60px) }
}
@media screen and (max-width: 767px) {
footer .footer-top { margin-bottom: 40px }
footer .footer-top .footer-inner { flex-direction: column-reverse; align-items: baseline }
}
footer .footer-logo { height: max(1.875vw, 30px) }
footer .footer-logo img { width: auto; height: 100%; display: block }
@media screen and (max-width: 767px) {
footer .footer-logo { height: 32px }
}
[lang=en] footer .footer-logo { height: max(3.125vw, 40px) }
@media screen and (max-width: 767px) {
[lang=en] footer .footer-logo { height: 40px }
}
footer .footer-mid .footer-inner { margin-bottom: max(1.6667vw, 22px) }
footer .footer-mid .footer-inner .inner { border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: max(1.6667vw, 22px); width: 100%; display: flex; justify-content: space-between; align-items: flex-end }
@media screen and (max-width: 1024px) {
footer .footer-mid .footer-inner { border-bottom: none; padding-bottom: 0 }
}
@media screen and (max-width: 767px) {
footer .footer-mid .footer-inner { margin-bottom: 2.4rem }
footer .footer-mid .footer-inner .inner { border-bottom: 0; padding-bottom: 0 }
}
footer .footer-mid .footer-isms-box { display: flex; gap: 2.4rem; align-items: center; margin-bottom: 3.2rem }
footer .footer-mid .footer-isms-box .icon img { width: 6.2rem }
footer .footer-mid .footer-isms-box .txt-box { display: flex; flex-direction: column; gap:.8rem
}
footer .footer-mid .footer-isms-box .txt-box .txt { display: flex; gap: 1rem; font-size:max(.7813vw, 12px);
font-weight: 400; line-height: 1.4 }
footer .footer-mid .footer-isms-box .txt-box .txt span { color: #999 }
@media screen and (max-width: 767px) {
footer .footer-mid .footer-isms-box { gap: 1.2rem; flex-direction: column; align-items: flex-start; margin-bottom: 2.4rem }
footer .footer-mid .footer-isms-box .icon img { width: 5.6rem }
footer .footer-mid .footer-isms-box .txt-box { gap:.6rem
}
footer .footer-mid .footer-isms-box .txt-box .txt { font-size: 1.3rem }
footer .footer-mid .footer-isms-box .txt-box .txt span { text-wrap: nowrap }
}
@media screen and (max-width: 767px) {
footer .footer-mid .awards { display: none }
}
footer .footer-mid .awards .webaward img { width: 5rem }
@media screen and (max-width: 1024px) {
footer .footer-mid .awards .webaward img { width: 4.2rem }
}
footer .footer-desc {
font-size:max(.7813vw, 12px); font-weight: 400; line-height: 1.4 }
footer .footer-desc p:not(:first-child) { margin-top: .5333333333em }
@media screen and (max-width: 767px) {
footer .footer-desc { font-size: 1.3rem }
footer .footer-desc p:not(:first-child) { margin-top: .6153846154em }
}
footer .footer-bottom .footer-inner .inner { width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap }
footer .footer-bottom .footer-inner .inner a { color: #ddd }
footer .footer-bottom .footer-inner .inner a.bold { color: #299be5 }
@media screen and (max-width: 767px) {
footer .footer-bottom .footer-inner { justify-content: flex-start; align-items: flex-start; margin-bottom: 3rem }
footer .footer-bottom .footer-inner .inner { border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 3rem; align-items: flex-start; gap: 4.5rem; flex-wrap: nowrap }
}
@media screen and (max-width: 767px) {
footer .footer-bottom .footer-inner { margin-bottom: 30px }
}
footer .footer-left, footer .footer-right, footer .footer-social { display: flex; justify-content: center; align-items: center; gap: 1.6em; font-size:max(.7813vw, 12px);
font-weight: 400; line-height: 21px }
@media screen and (max-width: 1366px) {
footer .footer-left, footer .footer-right, footer .footer-social { gap: 1.3333333333em }
}
@media screen and (max-width: 767px) {
footer .footer-left, footer .footer-right, footer .footer-social { width: 50%; flex-direction: column; align-items: flex-start; font-size: 1.4rem; gap: 1.0714285714em }
}
footer .footer-social { display: none; margin-top: 2.1333333333em; justify-content: flex-start }
@media screen and (min-width: 768px) {
[lang=en] footer .footer-right { display: none }
[lang=en] footer .footer-social { display: flex }
}
@media screen and (min-width: 768px)and (max-width: 1024px) {
[lang=en] footer .footer-left { flex-wrap: wrap; justify-content: flex-start; row-gap:.6rem
}
}
@media screen and (min-width: 768px) {
footer .footer-family-site { overflow: hidden }
}
footer .footer-family-site .family-site-box { margin-left: 0; position: absolute; top: max(2.0833vw, 40px); right:calc(max(1.5625vw, 20px) + 4.6875vw + 2.3958333333vw + .625vw)
}
footer .footer-family-site .family-site-box .drop-box-inner .inner-box { display: flex; flex-direction: column; gap: 1.5625vw }
footer .footer-family-site .family-site-list { display: flex; flex-direction: column; gap:.78125vw;
padding-left:.4166666667vw;
margin-top:.7291666667vw
}
footer .footer-family-site .family-site-list-box .tit { display: block; font-size:.6770833333vw;
color: #999; font-weight: 400 }
footer .footer-family-site .family-site-list-box:last-child { margin-bottom: 1.0416666667vw }
footer .footer-family-site .family-site-list li { display: inline-flex }
footer .footer-family-site .family-site-list a {
font-size:.78125vw; color: #fff; line-height: 1.25 }
footer .footer-family-site .family-site-list a:hover { text-decoration-line: underline; text-underline-position: under; text-decoration-thickness: 1px }
@media screen and (max-width: 1366px) {
footer .footer-family-site .family-site-box { right:calc(max(1.5625vw, 20px) + 4.6875vw + 3.6rem + .8rem)
}
}
@media screen and (max-width: 1024px) {
footer .footer-family-site .family-site-list { gap: 1.3rem; margin-top: 1.2rem }
footer .footer-family-site .family-site-list-box .tit { font-size: 1.2rem }
footer .footer-family-site .family-site-list-box:last-child { margin-bottom: 1.6rem }
footer .footer-family-site .family-site-list a { font-size: 1.3rem }
}
@media screen and (max-width: 767px) {
footer .footer-family-site .family-site-box { position: relative; top: unset; right: unset }
footer .footer-family-site .family-site-box .drop-box-inner .inner-box { gap: 2rem }
}
footer .footer-family-site .drop-box-wrap .drop-box { position: absolute; bottom: 2px; width: 100%; height: var(--btn-height); max-height: 18.9583333333vw; border: 1px solid #a0a0a0; border-radius: 1.25vw 1.25vw 25px 25px; background-color: #111; visibility: hidden; overflow: hidden; transition: all ease .5s; z-index: 1 }
footer .footer-family-site .drop-box-wrap .drop-box-inner { padding: 1.0416666667vw }
footer .footer-family-site .drop-box-wrap .drop-box-inner .inner-box { max-height: calc(18.9583333333vw - var(--btn-height) - 1.0416666667vw); overflow-y: scroll; margin-right:-.4166666667vw
}
footer .footer-family-site .drop-box-wrap .drop-box-inner .inner-box::-webkit-scrollbar {
width:.2604166667vw
}
footer .footer-family-site .drop-box-wrap .drop-box-inner .inner-box::-webkit-scrollbar-thumb {
width:.2604166667vw;
border-radius:50px;
background:#a0a0a0
}
footer .footer-family-site .drop-box-wrap .drop-box-btn { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: .875em 1.5em; border: 1px solid #a0a0a0; width: max(11.4583vw, 160px); height: max(2.3958vw, 36px); background-color: #111; border-radius: 3rem; color: #fff; font-size:max(.8333vw, 13px);
font-weight: 500; cursor: pointer }
footer .footer-family-site .drop-box-wrap .drop-box-btn svg { display: block; width:.7291666667vw;
height:.7291666667vw;
transition: all ease .3s }
footer .footer-family-site .drop-box-wrap[data-dropbox-open=true] .drop-box { height: 18.9583333333vw; visibility: visible }
footer .footer-family-site .drop-box-wrap[data-dropbox-open=true] .drop-box-btn svg { transform: rotate(180deg) }
@media screen and (max-width: 1024px) {
footer .footer-family-site .drop-box-wrap .drop-box { max-height: none }
footer .footer-family-site .drop-box-wrap .drop-box-inner { padding: 1.6rem }
footer .footer-family-site .drop-box-wrap .drop-box-inner .inner-box { max-height: calc(34rem - var(--btn-height) - 1.6rem) }
footer .footer-family-site .drop-box-wrap .drop-box-btn { width: 16rem; height: 3.6rem; padding: 0 1.6rem; font-size: 1.3rem }
footer .footer-family-site .drop-box-wrap .drop-box-btn svg { width: 1rem; height: 1rem }
footer .footer-family-site .drop-box-wrap[data-dropbox-open=true] .drop-box { height: 34rem }
}
@media screen and (max-width: 767px) {
footer .footer-family-site .drop-box-wrap .drop-box { border-radius: 1.8rem; max-height: none }
footer .footer-family-site .drop-box-wrap .drop-box-inner { padding: 1.6rem }
footer .footer-family-site .drop-box-wrap .drop-box-inner .inner-box { max-height: calc(34rem - var(--btn-height) - 1.6rem); margin-right: -6px }
footer .footer-family-site .drop-box-wrap .drop-box-inner .inner-box::-webkit-scrollbar {
width:4px
}
footer .footer-family-site .drop-box-wrap .drop-box-inner .inner-box::-webkit-scrollbar-thumb {
width:4px
}
footer .footer-family-site .drop-box-wrap[data-dropbox-open=true] .drop-box { height: 34rem }
}
footer .footer-family-site .footer-inner { align-items: flex-end }
@media screen and (min-width: 768px) {
footer .footer-family-site .awards { display: none }
}
footer .footer-family-site .awards .webaward img { width: 4.2rem }
footer .footer-topbtn { width: 2.3958333333vw }
footer .footer-topbtn img { display: block; width: 100% }
footer .footer-topbtn:hover, footer .footer-topbtn:active { cursor: pointer }
@media screen and (max-width: 1366px) {
footer .footer-topbtn { width: 3.6rem }
}
@media screen and (max-width: 767px) {
footer .footer-topbtn { margin:2rem 0 .4rem auto
}
}
@media screen and (max-width: 767px) {
footer .footer>div:nth-of-type(1) { order: 1 }
footer .footer>div:nth-of-type(2) { order: 3 }
footer .footer>div:nth-of-type(3) { order: 2 }
footer .footer>div:nth-of-type(4) { order: 4 }
}
@media screen and (max-width: 767px) {
footer .footer { padding: 0 0 6rem 0 }
}
footer .business-detail-area { display: none }
footer .business-detail-area .business-links { display: flex; gap:.7291666667vw
}
footer .business-detail-area .business-links li { flex: 1; position: relative }
footer .business-detail-area .business-links a { display: block; overflow: hidden; border-radius: var(--br-4) }
footer .business-detail-area .business-links a img { transition: 600ms ease }
@media(hover: hover)and (pointer: fine) {
footer .business-detail-area .business-links a:hover img { transform: scale(1.1) }
}
footer .business-detail-area .cont { position: absolute; left: 1.5625vw; bottom: 1.5625vw }
footer .business-detail-area .cont span { display: block }
footer .business-detail-area .cont small { display: block; font-size:max(.625vw, 1rem);
text-transform: uppercase }
footer .business-detail-area .border { border-bottom: 1px solid rgba(255,255,255,.6) }
@media screen and (max-width: 1024px) {
footer .business-detail-area .cont { left: 1.6rem; bottom: 1.6rem }
footer .business-detail-area .cont small { display: block; font-size: 1.1rem }
}
@media screen and (max-width: 767px) {
footer .business-detail-area .business-links { display: grid; gap:.8rem;
grid-template-columns: repeat(2, 1fr) }
footer .business-detail-area .tit-more { margin-bottom: 2rem }
}
[data-view-type=business-detail]+footer .business-detail-area {
display:block
}
[data-gnb="2-1"] footer { display: none }
[data-gnb="2-2"] footer .business-links li:nth-child(1) { display: none }
[data-gnb="2-3"] footer .business-links li:nth-child(2) { display: none }
[data-gnb="2-4"] footer .business-links li:nth-child(3) { display: none }
[data-gnb="2-5"] footer .business-links li:nth-child(4) { display: none }
[data-gnb="2-6"] footer .business-links li:nth-child(5) { display: none }
:root { --br-1: 1.5625vw;
--br-2: 1.3021vw;
--br-3: 1.0417vw;
--br-4: 0.7813vw
}
.br-1 { border-radius: var(--br-1) }
.br-2 { border-radius: var(--br-2) }
.br-3 { border-radius: var(--br-3) }
.br-4 { border-radius: var(--br-4) }
@media screen and (max-width: 1024px) {
:root { --br-1: 2.4414vw;
--br-2: 1.9531vw;
--br-3: 1.4648vw;
--br-4: 0.9766vw
}
.br-1 { border-radius: var(--br-1) }
.br-2 { border-radius: var(--br-2) }
.br-3 { border-radius: var(--br-3) }
.br-4 { border-radius: var(--br-4) }
}
@media screen and (max-width: 767px) {
:root { --br-1: 5.1282vw;
--br-2: 4.1026vw;
--br-3: 3.0769vw;
--br-4: 2.0513vw
}
.br-1 { border-radius: var(--br-1) }
.br-2 { border-radius: var(--br-2) }
.br-3 { border-radius: var(--br-3) }
.br-4 { border-radius: var(--br-4) }
}
@font-face { font-family: "fontello"; src: url("/font/fontello.woff2") format("woff2"), url("/font/fontello.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap }
.icon-arrow { display: inline-block }
.icon-arrow:before { content: ""; display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.icon-search { display: inline-block }
.icon-search:before { content: ""; display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.icon-link { display: inline-block }
.icon-link:before { content: ""; display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.icon-down { display: inline-block }
.icon-down:before { content: ""; display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.icon-up { display: inline-block }
.icon-up:before { content: ""; display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
button { color: initial }
.btn { position: relative; display: inline-flex; min-width: min(8.5416666667vw, 164px); padding:min(.6770833333vw, 13px) min(1.1458333333vw, 22px) min(.6770833333vw, 13px) min(1.25vw, 24px);
align-items: center; justify-content: center; box-sizing: border-box; font-size:min(.8854166667vw, 17px);
line-height: 1; letter-spacing: -0.02em; font-weight: 500; border-radius: 3rem; color: #000; transition: 600ms ease; overflow: hidden; font-family: "Pretendard", Arial, sans-serif; cursor: pointer }
.btn * { position: relative; z-index: 2 }
.btn svg {
margin-left:min(.625vw, 1.2rem); width: min(1.0416666667vw, 20px) }
.btn svg rect, .btn svg path { transition: 600ms ease }
.btn::before, .btn::after { content: ""; position: absolute; top: 0; width: 100%; height: 100%; border-radius: 3rem }
.btn::before { left: 0; border: 1px solid #ccc }
.btn::after { background-color: #004098; transform: translateX(-100%); transition: transform 600ms ease; left: -2px }
.btn-arrow { justify-content: space-between }
.btn--white { color: #fff }
.btn--black { color: #000 }
.btn--white::before { border-color: rgba(255,255,255,.6) }
.btn--white::after { background-color: #fff }
.btn--en { font-family: "Pretendard", Arial, sans-serif }
.btn:disabled { color: #ccc !important; border-color: #ccc !important; background-color: rgba(0,0,0,0) !important; cursor: default; pointer-events: none }
.btn:disabled svg path { stroke: #ccc !important }
.btn--s { font-size: 14px; padding: 13px 24px }
@media(hover: hover)and (pointer: fine) {
.btn:hover, .btn:focus { color: #fff }
.btn:hover svg rect, .btn:hover svg path, .btn:focus svg rect, .btn:focus svg path { stroke: #fff }
.btn:hover::after, .btn:focus::after { transform: translateX(0); left: 0 }
.btn--white:hover, .btn--white:focus { color: #000 }
.btn--white:hover.btn-arrow svg rect, .btn--white:hover.btn-arrow svg path, .btn--white:focus.btn-arrow svg rect, .btn--white:focus.btn-arrow svg path { stroke: #000 }
}
@media screen and (max-width: 1366px) {
.btn { min-width: 11.4rem; padding:.9rem 1.6rem .9rem 1.8rem;
font-size: 1.3rem }
.btn svg { width: 1.4rem }
}
@media screen and (max-width: 1024px) {
.btn { min-width: 12.4rem; padding-left: 1.6rem; font-size: 1.4rem }
.btn svg { width: 1.8rem }
}
@media screen and (max-width: 767px) {
.btn { min-width: 12.4rem; padding: 1rem 1.4rem 1rem 1.6rem; gap:.8rem;
font-size: 1.4rem }
.btn svg { width: 1.6rem; height: 1.6rem }
}
[lang=en] .btn { width: fit-content }
[lang=en] .btn span { text-transform: uppercase }
[lang=en] .btn svg { margin-left:min(.625vw, 1.2rem)
}
.badge { display: inline-block; padding: 7px 10px; border: 1px solid rgba(0,0,0,.8); border-radius: 4px; font-size: 1.6rem; line-height: 1 }
.badge--em { background-color: rgba(0,0,0,.8); color: #fff }
.category { display: inline-block; font-size: 1.0416666667vw; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; background-color: #004098; color: #fff; padding:min(.2604166667vw, 5px) min(.625vw, 12px);
border-radius:.5208333333vw
}
@media screen and (max-width: 1024px) {
.category { font-size: 1.2rem; padding:.3rem .9rem;
border-radius:.5rem
}
}
.tag-list { display: flex; align-items: flex-start; gap:.4rem
}
.tag1 { text-transform: uppercase; display: inline-flex; padding: .3571428571em .7142857143em; justify-content: center; align-items: center; text-align: center; border-radius: var(--br-3); color: #fff; font-size:max(.7292vw, 11px);
line-height: 1; font-weight: 600; background-color: #adadad; border: 1px solid #adadad; height: 1.25vw }
.tag1.youtube { background-color: red; border: 1px solid red }
.tag1.blog { background-color: #31a836; border: 1px solid #31a836 }
@media screen and (max-width: 1024px) {
.tag1 { height: 17px }
}
.tag1.hashtag { background-color: rgba(0,0,0,0); color: #666; border: 1px solid #ccc; box-sizing: border-box; font-weight: 500; text-align: left }
.tag1.hashtag em { display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical }
@media screen and (max-width: 1366px) {
.tag1 { padding:.3rem .6rem;
font-size:.9rem
}
}
@media screen and (max-width: 1024px) {
.tag1 {
padding:.3rem .7rem .4rem .7rem; font-size: 1rem }
}
.breadcrumb { width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: right }
.breadcrumb li { position: relative; padding-right: 1.1rem; line-height: 1; display: inline-block; font-size: 1.2rem; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: .22px; text-align: left }
.breadcrumb li:last-child { padding-right: 0 }
.breadcrumb li:not(:last-of-type) { margin-right:.7rem
}
.breadcrumb li:after { content: ""; display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px; display: block; position: absolute; font-size: 14px; top: 50%; right: -0.4rem; transform: translateY(-50%) rotateZ(90deg) }
.breadcrumb li>a { color: #000 }
.breadcrumb li:nth-last-of-type(1)::after { display: none }
.breadcrumb li:nth-last-of-type(1)>a { color: #666 }
.tab-wrap { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none }
.tab-wrap::-webkit-scrollbar {
display:none
}
.tab-wrap::-webkit-scrollbar {
width:0;
height:0
}
.tab-wrap .tab-list { display: flex; flex-wrap: nowrap; font-size: max(1.25vw, 16px); letter-spacing: -0.01em; font-weight: 500; line-height: 1.5 }
.tab-wrap .tab-list li { flex: 0 0 auto; cursor: pointer; margin-right: 1.5em; color: #000; opacity: .4; position: relative }
@media screen and (max-width: 1024px) {
.tab-wrap .tab-list li { margin-right: 1.6rem }
}
.tab-wrap .tab-list li:not(.link) { padding: 0 1rem 1.4rem }
.tab-wrap .tab-list li.link a { display: block; padding: 0 1rem 1.4rem }
.tab-wrap .tab-list li::after { content: ""; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,0); width: 100%; height: 2px }
.tab-wrap .tab-list li.active { color: #004098; pointer-events: none; opacity: 1 }
.tab-wrap .tab-list li.active::after { background: #004098; width: 100%; height: 2px }
.tab-wrap .tab-list li.count-tab { display: inline-flex; gap:.3rem
}
.tab-wrap .tab-list li.count-tab .count {
font-size:max(.6770833333vw, 1.3rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.5; margin:max(.15625vw, 3px) 0
}
.tab-wrap .tab-list li.count-tab .icon { display: block; height: 1rem; line-height: 0; margin:max(.3645833333vw, 7px) 0
}
.tab-wrap .tab-list li.count-tab.active .icon { display: none }
@media screen and (max-width: 1024px) {
.tab-wrap .tab-list li.count-tab { margin-right: 1.6rem; padding:0 .6rem .8rem
}
.tab-wrap .tab-list li.count-tab .count { margin:max(.1041666667vw, 2px) 0;
font-size:.9rem
}
.tab-wrap .tab-list li.count-tab .icon { margin: 4px 0; height:.9rem
}
}
@media screen and (hover: hover) {
.tab-wrap .tab-list li:hover, .tab-wrap .tab-list li:active { color: #004098; opacity: 1 }
.tab-wrap .tab-list li:hover::after, .tab-wrap .tab-list li:active::after { background: #004098; width: 100%; height: 2px }
}
@media screen and (max-width: 1024px) {
.tab-wrap .tab-list li { margin-right: 1.6rem }
.tab-wrap .tab-list li:not(.link) { padding: 0 1rem 1.4rem }
.tab-wrap .tab-list li.link a { padding: 0 1rem 1.4rem }
.tab-wrap .tab-list li.active::after { width: 100%; height: 2px }
}
@media screen and (max-width: 767px) {
.tab-wrap .tab-list { font-size: max(1.25vw, 16px); line-height: 1.45 }
.tab-wrap .tab-list li { margin-right: 1.6rem }
.tab-wrap .tab-list li:not(.link) { padding:0 .6rem .8rem
}
.tab-wrap .tab-list li.link a { padding:0 .6rem .8rem
}
}
.tab-wrap .tab-list-capsule { display: flex; flex-wrap: nowrap; font-size:max(.9375vw, 15px);
font-weight: 500; line-height: 1 }
.tab-wrap .tab-list-capsule li { flex: 0 0 auto; cursor: pointer; margin-right:.8rem;
color: #666; border: 1px solid #ccc; padding:.9rem 1.6rem;
border-radius: 20px }
.tab-wrap .tab-list-capsule li.active { color: #fff; pointer-events: none; background: #004098 }
@media screen and (hover: hover) {
.tab-wrap .tab-list-capsule li:hover, .tab-wrap .tab-list-capsule li:active { color: #fff; background: #004098 }
}
@media screen and (min-width: 1025px) {
.tab-wrap .tab-list-capsule { flex-wrap: wrap; row-gap:.8rem
}
}
@media screen and (max-width: 767px) {
.tab-wrap .tab-list-capsule { font-size: 1.5rem; padding:.7rem 1.2rem .7rem 0rem
}
}
.tab-container { border-bottom: 1px solid #e0e0e0 }
.selectbox { position: relative; min-width: 240px; margin-left: auto; color: #000;left: -26px; }
.selectbox * { -webkit-box-sizing: border-box; box-sizing: border-box }
.selectbox .select__btn { width: 100%; min-height: unset; font-size: max(18px, 1.25rem); color: inherit; padding: .4em 2.1em .4em .7em; font-weight: 400; line-height: .9; text-align: left; word-break: break-all; margin-top: 16px; border: solid 1px #000; border-radius: 26px; -webkit-border-radius: 26px; -webkit-transition: all .3s; transition: all .3s }
.selectbox .select__btn:nth-of-type(1) { margin-top: 0 }
.selectbox .select__btn:before, .selectbox .select__btn+.drop-box button:nth-of-type(1):before { display: block; content: ""; position: absolute; top: 0; right: .7em; width: .9em; height: 100%; background-size: .9em; -webkit-transition: all .2s; transition: all .2s; font-size: max(18px, 1.25rem) }
.selectbox .select__btn:hover { color: #fff; background-color: #000 }
.selectbox .select__btn:hover:before { background-image: url("https://trading.samsungcnt.com/assets/source/common/ico-dropdown-white.svg") }
.selectbox .select__btn.open { background-color: #000 }
.selectbox .select__btn.open:before { -webkit-transform: rotate(180deg); transform: rotate(180deg) }
.selectbox .drop-box { opacity: 0; overflow: hidden; position: absolute; top: 0; left: 0; right: 0; max-height: 80vh; z-index: 2; border-radius: 25px; background-color: #000; -webkit-transition: height .4s cubic-bezier(0.25, 1, 0.5, 1); transition: height .4s cubic-bezier(0.25, 1, 0.5, 1) }
.selectbox .drop-box::-webkit-scrollbar {
width:0
}
.selectbox .drop-box.active { overflow: hidden scroll }
.selectbox .drop-box.active button:nth-of-type(1) { position: relative }
.selectbox .drop-box.active button:nth-of-type(1):before { -webkit-transform: rotate(180deg); transform: rotate(180deg); background-image: url("https://trading.samsungcnt.com/assets/source/common/ico-dropdown-white.svg") }
.selectbox .drop-box button { height: auto; min-height: 36px; padding: .3em .9em .6em .7em; display: block; width: 100%; font-size: max(16px, 1.125rem); font-weight: 400; color: #fff; line-height: 1; text-align: left; word-break: break-all }
.selectbox .drop-box button.selected, .selectbox .drop-box button.active { color: #000 }
.selectbox .drop-box button.selected { position: relative; font-size: max(18px, 1.25rem); color: #cdff46; text-decoration: underline }
@media screen and (hover: hover) {
.selectbox .drop-box button:hover { color: #cdff46; background-color: rgba(0,0,0,0) }
}
.selectbox .drop-box button:nth-of-type(1) { padding-top: .5em; padding-bottom: .5em }
.selectbox .drop-box button:nth-last-of-type(1) { margin-bottom: 0; padding-bottom: .8em }
.selectbox.ready .drop-box { opacity: 1; height: 0 }
.selectbox.white { color: #fff; font-size: 13px }
.selectbox.white .select__btn { border: 1px solid rgba(255,255,255,.6); padding: .7692307692em 1.2307692308em; font-size: 13px; font-style: normal; font-weight: 500; line-height: normal; border-radius: 1.5384615385em; height: 3.5384615385em }
.selectbox.white .drop-box { border-radius: 1.5384615385em }
.selectbox.white .drop-box button.selected { font-size: 13px; font-style: normal; font-weight: 500; line-height: normal; border-radius: 1.5384615385em; height: 3.5384615385em; border: 1px solid rgba(255,255,255,.6); padding: .7692307692em 1.2307692308em }
.indicator { display: block; font-size: 0; margin: 0 auto; text-align: center }
.indicator button { width: 20px; height: 20px; font-size: inherit }
.indicator button:before { content: ""; overflow: hidden; display: block; width: 8px; height: 8px; margin: auto; background-color: rgba(0,0,0,.15); box-sizing: border-box; color: rgba(0,0,0,0); border-radius: 50%; transition: background-color .2s, opacity .2s }
.indicator button:hover:before, .indicator button:focus:before { background-color: #4d4d4d }
.indicator li { display: inline-block; vertical-align: middle }
.indicator li.is-current button:before { background-color: #4d4d4d }
.indicator--invert li.is-current button:before { background-color: #fff }
.indicator--invert button:before { background-color: rgba(255,255,255,.4) }
.indicator--invert button:hover:before, .indicator--invert button:focus:before { background-color: #fff }
[inmotion-first] {
opacity:0
}
@media screen and (max-width: 1024px) {
[inmotion-first] {
opacity:1
}
}
[kv-masking-section] .pre-cont { white-space: nowrap; overflow: hidden }
@media screen and (max-width: 1024px) {
[kv-masking-section] .pre-cont { word-break: break-word; white-space: wrap; max-width: 100vw }
[kv-masking-section] .pre-cont .kv-title { max-width: 100vw }
}
.pre-cont { overflow: hidden }
.pre-cont>* { opacity: 0 }
[kv-fullinmotionpage] .pre-cont { overflow: hidden }
[kv-fullinmotionpage] .pre-cont { width: 100%; height: fit-content; display: block; overflow: hidden; position: relative; font-size: 20px; overflow: hidden; height:calc(1*max(5vw, 64px))
}
[kv-fullinmotionpage] .pre-cont:has(.sub-t4-m) {
display:block;
font-size:20px;
margin:.8em max(1.5625vw, 20px) 0 max(1.5625vw, 20px)
}
[kv-fullinmotionpage] .pre-cont .sub-h1 { position: absolute; left: 50%; top: 0; transform: translateX(-50%); line-height: 1; opacity: 0 }
@media screen and (max-width: 1024px) {
[kv-fullinmotionpage] .pre-cont { width: unset }
}
[kv-fullinmotionpage] .sub-t4-m:not(.swiper-title) { display: block; margin-top: 0.9583333333em; opacity: 0 }
@media screen and (max-width: 767px) {
[kv-fullinmotionpage] .sub-t4-m:not(.swiper-title) { margin-top: 0 }
}
[kv-fullinmotionpage] .head-cont { margin-top: var(--header-total-height); width: 100vw }
[kv-fullinmotionpage] .kv-section { font-size: max(1.0417vw, 14px); height:calc(100vh - max(100px, 13vh) + 2.2em + max(1.0417vw, 14px)*1.5 - var(--header-total-height));
overflow: visible; position: relative; text-align: center; position: relative; margin: 0 }
@media screen and (max-width: 1024px) {
[kv-fullinmotionpage] .kv-section { font-size: 16px; height: calc(88dvh - env(safe-area-inset-bottom) + 2.2em + 24px - var(--header-total-height)) }
}
@media screen and (max-width: 767px) {
[kv-fullinmotionpage] .kv-section { height: calc(84vh - env(safe-area-inset-bottom) + 2.2em + 24px - var(--header-total-height)) }
@supports(height: 84dvh) {
[kv-fullinmotionpage] .kv-section {
height:calc(84dvh - env(safe-area-inset-bottom) + 2.2em + 24px - var(--header-total-height))
}
}
}
@media screen and (max-width: 767px) {
[kv-fullinmotionpage] .kv-title { word-break: keep-all; white-space: nowrap }
}
[kv-fullinmotionpage] .kv-desc { margin-left: max(1.5625vw, 20px); margin-right: max(1.5625vw, 20px) }
[kv-fullinmotionpage] .kv-image-cont { opacity: 0; transform: translateY(20%) }
[kv-fullinmotionpage] .kv-imgcont { pointer-events: none; position: absolute; opacity: 0; transform: translateY(20%); overflow: hidden; margin-left: max(1.5625vw, 20px); margin-right: max(1.5625vw, 20px); height: 33.8542vw; position: relative; margin: 0 auto; border-radius: var(--br-2); margin-bottom: 6.4vmax; margin-bottom: clamp(108px, 8.3333vw, 200px) }
[kv-fullinmotionpage] .kv-imgcont img { pointer-events: none; display: block; width: 100vw; height: 100vh; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }
[kv-fullinmotionpage] .kv-imgcont img[desktop-tablet-only] { height: max(33.854vw, 650px) }
@media screen and (max-width: 1024px) {
[kv-fullinmotionpage] .kv-imgcont { height: 40rem; width:calc(100vw - max(1.5625vw, 20px)*2)
}
}
@media screen and (max-width: 767px) {
[kv-fullinmotionpage] .kv-imgcont { height: 640px }
}
[kv-fullinmotionpage] .kv-realimgcont { pointer-events: none; position: fixed; width: 100vw !important; height: 100vh; transform: translateY(1.7%); left: 0; top: 0; opacity: 0; overflow: hidden; margin-bottom: 6.4vmax }
[kv-fullinmotionpage] .kv-realimgcont::after { width: 100%; height: 100%; content: ""; display: block; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 45.31%, rgba(0, 0, 0, 0.5) 100%); position: fixed; left: 0; top: 0; z-index: 0 }
[kv-fullinmotionpage] .kv-realimgcont img { display: block; width: 100vw; height: 100vh; object-fit: cover; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0) }
@media screen and (max-width: 1024px) {
[kv-fullinmotionpage] .kv-realimgcont { width:calc(100vw - max(1.5625vw, 20px)*2)
}
}
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] { z-index: 1; display: flex; justify-content: center; align-items: center; color: #fff; gap: 2.4em; position: absolute; bottom: 2.15em; left: 0; width: 100vw; justify-content: flex-start }
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li:first-of-type { display: block; margin-left: calc(max(1.5625vw, 20px) + 4.6875vw) }
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li:last-of-type { display: block; margin-right: calc(max(1.5625vw, 20px) + 4.6875vw) }
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li:hover { cursor: pointer }
@media screen and (max-width: 1024px) {
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li { word-break: keep-all; white-space: nowrap }
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li:first-of-type { display: block; margin-left: calc(max(1.5625vw, 20px) + 3.9063vw) }
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li:last-of-type { display: block; margin-right: calc(max(1.5625vw, 20px) + 3.9063vw) }
}
@media screen and (max-width: 767px) {
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li:first-of-type { display: block; margin-left: 4.1026vw }
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] li:last-of-type { display: block; margin-right: 4.1026vw }
}
@media screen and (max-width: 767px) {
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] { overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none }
[kv-fullinmotionpage] .kv-section ul[kv-maindesc]::-webkit-scrollbar {
display:none
}
}
@media screen and (max-width: 1024px) {
[kv-fullinmotionpage] .kv-section ul[kv-maindesc] { gap: 1.3333333333em }
}
[kv-fullinmotionpage] .kv-textarea { z-index: 1; width: 100vw; position: absolute; left: 0; bottom: 0; opacity: 0; bottom:calc(2.15em + max(1.0417vw, 14px)*1.5);
font-size: 20px; color: #fff; text-align: left }
[kv-fullinmotionpage] .kv-btn { opacity: 0; background-color: #004098; border-radius: 50%; transform: translateY(50%); display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; z-index: 1001; right: calc(max(1.5625vw, 20px) + 4.6875vw); background: #004098 url(/images/ksob_arrow_bottom.svg) no-repeat center; background-size: max(1.5625vw, 2rem); width: max(3.9583vw, 5.2rem); height: max(3.9583vw, 5.2rem) }
@media screen and (max-width: 1024px) {
[kv-fullinmotionpage] .kv-btn { right: calc(max(1.5625vw, 20px) + 3.9063vw); width: 5.6rem; height: 5.6rem; bottom: -0.4em }
[kv-fullinmotionpage] .kv-btn svg { width: 1.15em }
}
@media screen and (max-width: 767px) {
[kv-fullinmotionpage] .kv-btn { right: 2.8rem; width: 4.8rem; height: 4.8rem; bottom: -0.25em; background-size: 50% }
[kv-fullinmotionpage] .kv-btn svg { width: 1em }
}
[lang=en] [kv-masking-section] .pre-cont { height:calc(1.2*max(5vw, 64px))
}
@media screen and (max-width: 1024px) {
[lang=en] [kv-masking-section] .pre-cont { white-space: nowrap; height: 60px }
}
@media screen and (max-width: 767px) {
[lang=en] [kv-masking-section] .pre-cont { height: 48px }
}
.pagination .page, .pagination .prev, .pagination .prev--latest, .pagination .next, .pagination .next--first { display: inline-block; overflow: hidden; position: relative; z-index: 1; height: 40px; min-width: 40px; line-height: 38px; border-radius: 50% }
.pagination a.page:hover span, .pagination a.prev:hover:after, .pagination a.prev--latest:hover:after, .pagination a.next:hover:after, .pagination a.next--first:hover:after { color: #333; background-color: #444 }
.pagination { margin-top: 5rem; font-size: 0; text-align: center }
.pagination .page { box-sizing: border-box; text-decoration: none; font-size: 1.5rem; transition: color .2s }
.pagination .page span { box-sizing: border-box; display: inline-block; min-width: 40px; height: 40px; padding: 0 .5em; line-height: 40px; border-radius: 40px; color: #737373; transition: background-color .2s }
.pagination .page.is-current span { background-color: #000; color: #fff }
.pagination .prev, .pagination .prev--latest, .pagination .next, .pagination .next--first { width: 40px; text-align: center; font-size: 1.5rem }
.pagination .prev:before, .pagination .prev--latest:before, .pagination .next:before, .pagination .next--first:before { color: #333; line-height: 1; vertical-align: middle }
.pagination .prev:after, .pagination .prev--latest:after, .pagination .next:after, .pagination .next--first:after { content: ""; z-index: -1; margin: 7px; border-radius: 40px; transition: background-color .2s }
.pagination .prev.is-disabled:before, .pagination .prev--latest.is-disabled:before, .pagination .next.is-disabled:before, .pagination .next--first.is-disabled:before { color: #999 }
.pagination .prev { display: inline-block }
.pagination .prev:before { display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.pagination .prev--latest { display: inline-block }
.pagination .prev--latest:before { display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.pagination .next { display: inline-block }
.pagination .next:before { display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.pagination .next--first { display: inline-block }
.pagination .next--first:before { display: inline-block; font-family: "fontello"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; width: auto; font-size: 24px }
.preloader { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff }
.preloader__content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem }
[accordion-wrap] {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center
}
[accordion-wrap] [accordion-li] [accordion-hiddencont] {
overflow:hidden;
display:none;
align-items:flex-start;
gap:toEm(20px);
width:100%
}
[accordion-wrap] [accordion-li].active [accordion-hiddencont] { display: flex }
[data-responsive-break] {
word-break:keep-all
}
@media screen and (max-width: 767px) {
[data-responsive-break] {
word-break:keep-all
}
[data-responsive-break] br { display: none }
}
[data-responsive-break-tablet] {
word-break:keep-all
}
@media screen and (max-width: 1024px) {
[data-responsive-break-tablet] {
word-break:keep-all
}
[data-responsive-break-tablet] br { display: none }
}
[data-responsive-break-all] {
word-break:keep-all;
word-break:keep-all
}
[data-responsive-break-all] br { display: none }
.card-news-con .mobile-unit { display: flex; justify-content: center; margin-top: 3.6rem }
@media screen and (min-width: 768px) {
.card-news-con .mobile-unit { display: none }
}
@media screen and (max-width: 767px) {
.card-news-con .unit { display: none }
}
.card-news-con .sns-list { display: flex; gap: 1.2rem }
@media screen and (max-width: 1366px)and (min-width: 1025px) {
.card-news-con .sns-list img { width: 2.4rem }
}
.card-news-top-tit-box { position: relative; display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.4rem }
.card-news-top-tit-box .tit { display: block; overflow: hidden }
.card-news-top-tit-box .tit span { display: block }
.card-news-top-tit-box .line { display: block; position: absolute; bottom: 0; width: 100%; height: 1px; background-color: #ccc }
@media screen and (max-width: 1366px) {
.card-news-top-tit-box { padding-bottom: 1.2rem }
}
@media screen and (max-width: 767px) {
.card-news-top-tit-box { display: block }
}
.card-news-list-box { margin-top: 4rem }
@media screen and (max-width: 1366px) {
.card-news-list-box { margin-top: 2.8rem }
}
@media screen and (max-width: 1024px) {
.card-news-list-box { margin-top: 2.2rem }
}
@media screen and (max-width: 767px) {
.card-news-list-box { margin-top: 2.4rem }
}
.card-news-list-box.not-line { margin-top: 2rem }
@media screen and (max-width: 1366px) {
.card-news-list-box.not-line { margin-top: 1.6rem }
}
@media screen and (max-width: 1024px) {
.card-news-list-box.not-line { margin-top: 1.6rem }
}
@media screen and (max-width: 767px) {
.card-news-list-box.not-line { margin-top: 1.6rem }
}
.card-news-list.col04 li .img-wrap { aspect-ratio: 336/189 }
.card-news-list li a { display: block; height: 100%; background-color: #f5f5f5; border-radius: var(--br-4); overflow: hidden }
.card-news-list li .img-wrap { display: block; position: relative; aspect-ratio: 454/302; border-radius: var(--br-4); overflow: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-backface-visibility: hidden; -moz-transform: translate3d(0, 0, 0) }
.card-news-list li .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: 600ms ease }
.card-news-list li .txt-box { padding: 1.5625vw }
.card-news-list li .txt-box .tit { margin-top: .4545454545em; height: 2.9em; display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; word-wrap: break-word }
.card-news-list li .txt-box .date { display: inline-block; margin-top: 1.3333333333em; color: #999 }
.card-news-list li a:hover { background-color: #eaeaea }
.card-news-list li a:hover img { transform: scale(1.1) }
@media screen and (min-width: 1025px) {
.card-news-list.col04 li .txt-box { padding: 1.25vw }
}
@media screen and (max-width: 1024px) {
.card-news-list li .txt-box { padding: 1.6rem }
.card-news-list li .txt-box .tit { margin-top: .5333333333em }
.card-news-list li .txt-box .date { margin-top: 1em }
}
@media screen and (max-width: 767px) {
.card-news-list { gap: 1.6rem }
.card-news-list.col04 { gap: 2.4rem 0 }
.card-news-list.col04 li .txt-box { padding: 1.6rem 1.2rem }
.card-news-list li .txt-box { padding: 2rem }
}
[img-slider] {
color:#fff;
width:100%;
border-radius:var(--br-4);
overflow:hidden;
font-size:20px
}
@media screen and (max-width: 767px) {
[img-slider] {
height:670px
}
}
[img-slider] [img-wrapper] {
display:flex;
justify-content:center;
align-items:center
}
@media screen and (max-width: 767px) {
[img-slider] [img-wrapper] {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center
}
}
[img-slider] [img-slide] {
width:20%;
height:max(30.4688vw, 31.2rem);
padding:2em;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
align-items:flex-start;
justify-content:flex-end;
transition:width .5s ease-in-out, height .5s ease-in-out;
position:relative;
font-size:20px
}
[img-slider] [img-slide] * { pointer-events: none !important }
[img-slider] [img-slide]::after { transition: opacity .75s ease-out; content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 64, 152, 0) 0%, rgba(0, 64, 152, 0.9) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%) 50%/cover no-repeat; position: absolute; top: 0; left: 0; opacity: 0; z-index: 0 }
[img-slider] [img-slide]:hover::after, [img-slider] [img-slide]:active::after { opacity: 1 }
@media screen and (max-width: 1024px) {
[img-slider] [img-slide] {
height:15.6em;
padding:1em;
z-index:1
}
}
@media screen and (max-width: 767px) {
[img-slider] [img-slide] {
width:100%;
height:134px;
padding:1em;
font-size:20px;
justify-content:center
}
}
[img-slider] [img-slide] img { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(62.604vw, 1202px); height: max(30.4688vw, 31.2rem); object-fit: cover; z-index: -1 }
@media screen and (max-width: 767px) {
[img-slider] [img-slide] img { height: 100% }
}
[img-slider] [img-slide] div { z-index: 2 }
[img-slider] [img-slide] span { z-index: 2; display: block; margin: 0 0 .4444444444em 0 }
[img-slider] [img-slide] p { z-index: 2; pointer-events: none !important; height: 0; opacity: 0; overflow: hidden }
@media screen and (min-width: 768px) {
[img-slider] [img-slide].active { width: max(62.604vw, 1202px) }
[img-slider] [img-slide].active p { display: block; margin-top: 1.5em }
}
@media screen and (max-width: 1024px) {
[img-slider] [img-slide].active { z-index: 2 }
}
@media screen and (max-width: 767px) {
[img-slider] [img-slide].active { height: 402px; justify-content: flex-end }
[img-slider] [img-slide].active p { opacity: 1; height: auto; margin-top: 1.5em }
}
@media screen and (min-width: 768px) {
[img-slider] [img-slide].hide { pointer-events: none }
[img-slider] [img-slide].hide div, [img-slider] [img-slide].hide span, [img-slider] [img-slide].hide p { display: none }
}
@media screen and (max-width: 767px) {
[img-slider] [img-slide].hide { height: 67px }
[img-slider] [img-slide].hide div, [img-slider] [img-slide].hide span, [img-slider] [img-slide].hide p { display: none }
}
@media screen and (min-width: 768px) {
[data-mobile-only] {
display:none !important
}
}
@media screen and (max-width: 1024px) {
[data-desktop-only] {
display:none !important
}
}
@media screen and (min-width: 768px) {
[data-mobile-only] {
display:none !important
}
}
@media screen and (min-width: 1025px) {
[data-tablet-only] {
display:none !important
}
}
@media screen and (max-width: 767px) {
[data-tablet-only] {
display:none !important
}
}
@media screen and (min-width: 1025px) {
[tablet-mobile-only] {
display:none !important
}
}
@media screen and (max-width: 767px) {
[desktop-tablet-only] {
display:none !important
}
}
@media screen and (max-width: 1024px) {
[desktop-only] {
display:none !important
}
}
@media screen and (min-width: 1025px) {
body[direction=up] [data-progress-nav].show {
--header-total-height: calc(var(--header-height) + var(--header-top-height)); transform: translate(-50%, var(--header-total-height)) !important; transition-delay: .05s }
}
body[direction=down] [data-progress-nav].show { transform: translate(-50%, 0%) !important }
[data-progress-nav] {
font-family:"Pretendard", Arial, sans-serif;
position:fixed;
width:100vw;
left:50%;
height:max(2.9167vw, 48px);
top:0;
transform:translate(-50%, -100%);
transition:transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
background-color:#dfe6ee;
z-index:10000;
display:flex;
justify-content:center;
align-items:center
}
[data-progress-nav] .popup-btn-dimm { width: 100vw; height: 200vh; left: 0; background-color: rgba(0,0,0,.4); z-index: 1; position: fixed; display: none; height: 200vh; background-color: rgba(0,0,0,.4); position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0) }
[data-progress-nav] .popup-btn-dimm.show { display: block }
[data-progress-nav] .popup-btn-cont { position: absolute; background-color: #dfe6ee; padding: max(1.0416666667vw, 20px); border-radius: var(--br-4); right: max(1.5625vw, 30px); top:calc(clamp(48px, 2.9167vw, 68px) + max(.5208333333vw, 10px));
display: none }
[data-progress-nav] .popup-btn-cont .__delete { position: absolute; right:max(.5208333333vw, 10px);
top:max(.5208333333vw, 10px);
width: 1.25vw }
@media screen and (max-width: 1024px) {
[data-progress-nav] .popup-btn-cont .__delete { right: 12px; top: 12px; width: 24px }
}
@media screen and (max-width: 1024px) {
[data-progress-nav] .popup-btn-cont { padding: 24px; right: 30px; top: unset; bottom: 66px }
[data-progress-nav] .popup-btn-cont .__title { font-size: 18px }
[data-progress-nav] .popup-btn-cont .__cont span { font-size: 12px }
}
@media screen and (max-width: 767px) {
[data-progress-nav] .popup-btn-cont { padding: 20px; position: fixed; width: 332px; margin-top: auto; margin-bottom: auto; background-color: #fff; z-index: 1; left: 50%; bottom: unset; top: unset; transform: translate(-50%, -250%) }
}
[data-progress-nav] .popup-btn-cont.show { display: block }
[data-progress-nav] .popup-btn-cont .__title { width: 100%; display: flex; justify-content: center; align-items: center }
[data-progress-nav] .popup-btn-cont .__cont { display: flex; justify-content: center; align-items: center; font-size:max(.7813vw, 10px)
}
[data-progress-nav] .popup-btn-cont .__cont span { width: 100%; display: block; display: flex; justify-content: center; align-items: center }
[data-progress-nav] .popup-btn-cont .__cont[data-desktop-only] { margin-top:.5208333333vw;
gap:.9375vw
}
[data-progress-nav] .popup-btn-cont .__cont[data-desktop-only] img { width: 2.3958333333vw; margin-bottom:.3125vw;
display: block }
[data-progress-nav] .popup-btn-cont .__cont[data-tablet-only] { margin-top: 16px; gap: 20px; font-size: 12px }
[data-progress-nav] .popup-btn-cont .__cont[data-tablet-only] img { width: 56px; margin-bottom: 6px; display: block }
[data-progress-nav] .popup-btn-cont .__cont[data-mobile-only] { margin-top: 16px; gap: 20px; font-size: 12px }
[data-progress-nav] .popup-btn-cont .__cont[data-mobile-only] img { width: 56px; margin-bottom: 6px; display: block }
[data-progress-nav].show { transform: translate(-50%, 0) }
@media screen and (max-width: 1024px) {
[data-progress-nav] {
top:unset;
bottom:0;
transform:translate(-50%, 100%)
}
[data-progress-nav] span { top: 0; bottom: unset }
}
@media screen and (max-width: 767px) {
[data-progress-nav] {
height:56px
}
[data-progress-nav]::after { content: ""; display: block; width: 100vw; height: 56px; background-color: #dfe6ee; position: absolute; left: 0; top: 0; z-index: -1 }
[data-progress-nav] .dropdown { display: flex; justify-content: center; align-items: center; gap: 4px; margin-left: max(1.5625vw, 20px); font-size: 15px; padding: 0 }
[data-progress-nav] .dropdown::after { transition: transform .5s linear; content: ""; display: block; width: 10px; height: 10px; background: url("/images/ksob_arrow_small.svg") center center/10px no-repeat }
[data-progress-nav]:has(.nav-ul.open)::before {
content:"";
display:block;
width:100vw;
height:200vh;
background-color:rgba(0,0,0,.4);
position:absolute;
left:50%;
bottom:0;
transform:translate(-50%, 0);
z-index:-2
}
[data-progress-nav]:has(.nav-ul.open) .dropdown::after {
transform:rotate(180deg)
}
[data-progress-nav]:has(.nav-ul.open)>span {
opacity:0;
animation:spanpos .5s linear forwards
}
}
[data-progress-nav] .nav-ul { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); gap: 2.824em; font-size:max(.8854vw, 14px);
height: max(2.9167vw, 48px) }
[data-progress-nav] .nav-ul a { display: flex; justify-content: center; align-items: center; margin: 1.0588235294em 0; font-size:max(.8854vw, 14px);
color: rgba(51,51,51,.4) }
[data-progress-nav] .nav-ul a:hover, [data-progress-nav] .nav-ul a.active { cursor: pointer; color: #333 }
@media screen and (max-width: 767px) {
[data-progress-nav] .nav-ul a:hover, [data-progress-nav] .nav-ul a.active { color: #004098 }
}
@media screen and (max-width: 1024px) {
[data-progress-nav] .nav-ul { position: relative; transform: translate(0, 0); top: unset; left: unset; margin: 0 max(1.5625vw, 20px) }
[data-progress-nav] .nav-ul a { font-size: 15px }
}
@media screen and (max-width: 767px) {
[data-progress-nav] .nav-ul { flex-direction: column; justify-content: flex-start; height: fit-content; transition: height .5s ease-out; overflow: visible; background-color: #dfe6ee; width: 100vw; position: absolute; bottom: 56px; left: 50%; line-height: 150%; transform: translate(-50%, 100%); transition: transform .4s linear; margin: 0; padding: 26px max(1.5625vw, 20px); gap: 12px; border-radius: 16px 16px 0 0; border-bottom: 1px solid #ccc; z-index: -1 }
[data-progress-nav] .nav-ul a { margin: 0 auto; justify-content: flex-start; margin: 0; text-align: left; display: block; width: 100% }
[data-progress-nav] .nav-ul.open { transform: translate(-50%, 0); display: flex; z-index: -1 }
}
[data-progress-nav] .nav-right { margin-left: auto; display: flex; justify-content: center; align-items: center; gap:.417vw;
font-size: 20px; margin-right: max(1.5625vw, 20px) }
[data-progress-nav] .nav-right a, [data-progress-nav] .nav-right button { padding: 0; background-color: #b7c8df; border-radius: var(--br-1); font-family: "Pretendard", Arial, sans-serif; display: flex; justify-content: center; align-items: center }
[data-progress-nav] .nav-right a:first-of-type, [data-progress-nav] .nav-right button:first-of-type { background-color: #004098; color: #fff; gap: .2666666667em; font-size:max(.7813vw, 13px);
padding: .7em 1.0666666667em; height: max(1.875vw, 30px) }
[data-progress-nav] .nav-right a:first-of-type svg path, [data-progress-nav] .nav-right a:first-of-type svg line, [data-progress-nav] .nav-right button:first-of-type svg path, [data-progress-nav] .nav-right button:first-of-type svg line { stroke: #fff }
[data-progress-nav] .nav-right a:last-of-type, [data-progress-nav] .nav-right button:last-of-type { font-size: 20px; width: max(1.875vw, 30px); height: max(1.875vw, 30px) }
[data-progress-nav] .nav-right a svg, [data-progress-nav] .nav-right button svg { display: block; width:.938vw;
font-size: 20px }
@media screen and (max-width: 1024px) {
[data-progress-nav] .nav-right { gap: 8px }
[data-progress-nav] .nav-right a svg, [data-progress-nav] .nav-right button svg { width: 18px }
[data-progress-nav] .nav-right a:first-of-type, [data-progress-nav] .nav-right button:first-of-type { font-size: 15px; height: 36px }
[data-progress-nav] .nav-right a:last-of-type, [data-progress-nav] .nav-right button:last-of-type { width: 1.8em; height: 1.8em }
}
[data-progress-nav]>span {
position:absolute;
bottom:0;
left:0;
transform:translateX(-50%);
background-color:#004098;
width:300px;
height:3px;
display:block;
transition:opacity .5s ease-in-out
}
@keyframes spanpos { 0% {
bottom:0
}
100% {
bottom:300px
}
}
.main-popup-container { width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; background-color: rgba(0,0,0,.6); display: flex; justify-content: center; align-items: center; z-index: 10000; display: none }
.main-popup-container.active { display: flex }
.main-popup-container .popup { width: clamp(32rem, 25vw, 62rem); height: fit-content; border-radius: var(--br-3); overflow: hidden; background-color: #fff }
@media screen and (max-width: 1024px) {
.main-popup-container .popup { width: 326px }
}
.main-popup-container .popup-inner { height: clamp(32rem, 25vw, 62rem); width: 100% }
@media screen and (max-width: 1024px) {
.main-popup-container .popup-inner { height: 326px }
}
.main-popup-container .popup-inner img { width: 100%; display: block; height: 100%; object-fit: cover }
.main-popup-container .popup-bottom { padding: 1.2em 1.3333333333em; width: 100%; height: clamp(4rem, 3.0208vw, 7.6rem); display: flex; justify-content: space-between; align-items: center }
@media screen and (max-width: 1024px) {
.main-popup-container .popup-bottom { height: 50px; padding: 14px 16px }
}
.main-popup-container .popup-bottom .check-cont { display: flex; justify-content: center; align-items: center; gap: .5333333333em }
@media screen and (max-width: 1024px) {
.main-popup-container .popup-bottom .check-cont { gap: 8px }
}
.main-popup-container .popup-bottom .check-cont input.check-input { width: max(1.1458333333vw, 22px); height: max(1.1458333333vw, 22px); border-radius: .2666666667em; background-color: rgba(0,0,0,0); border: 1px solid #ccc !important; -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; margin: 0 !important }
.main-popup-container .popup-bottom .check-cont input.check-input:checked { display: flex; justify-content: center; align-items: center; border: 1px solid #004098 !important }
.main-popup-container .popup-bottom .check-cont input.check-input:checked::after { display: block; width: 100%; height: 100%; border-radius: 2px; content: ""; background: #004098 url("/images/ksob_check.svg") center center/10px no-repeat }
@media screen and (max-width: 1024px) {
.main-popup-container .popup-bottom .check-cont input.check-input { width: 20px; height: 20px }
}
.main-popup-container .popup-bottom .popup-btn { width: 1.2em; height: 1.2em }
@media screen and (max-width: 1024px) {
.main-popup-container .popup-bottom .popup-btn { width: 18px; height: 18px }
}
.main-popup-container .popup-bottom .popup-btn a { display: block; width: 100%; height: 100% }
.main-popup-container .popup-bottom .popup-btn a svg { display: block; width: 100%; height: 100% }
[type=text], [type=number], [type=tel], [type=search], [type=password], [type=email], [type=url], [type=date], [type=datetime-local], [type=file], select, textarea {
box-sizing:border-box;
padding:10px 20px;
border:1px solid rgba(0,0,0,.1);
background:#fff;
color:#000;
font-size:inherit;
line-height:1.6;
outline:none;
vertical-align:middle;
border-radius:10px;
font-family:"Pretendard", Arial, sans-serif;
-webkit-border-radius:10px;
-webkit-appearance:none;
transition:border-color .3s;
padding:.625em 1.25em
}
[type=text][readonly], [type=number][readonly], [type=tel][readonly], [type=search][readonly], [type=password][readonly], [type=email][readonly], [type=url][readonly], [type=date][readonly], [type=datetime-local][readonly], [type=file][readonly], select[readonly], textarea[readonly] {
background-color:#f5f5f5
}
[type=text]:hover, [type=text]:focus, [type=number]:hover, [type=number]:focus, [type=tel]:hover, [type=tel]:focus, [type=search]:hover, [type=search]:focus, [type=password]:hover, [type=password]:focus, [type=email]:hover, [type=email]:focus, [type=url]:hover, [type=url]:focus, [type=date]:hover, [type=date]:focus, [type=datetime-local]:hover, [type=datetime-local]:focus, [type=file]:hover, [type=file]:focus, select:hover, select:focus, textarea:hover, textarea:focus { border-color: #000 }
[type=text][readonly]:hover, [type=text][readonly]:focus, [type=number][readonly]:hover, [type=number][readonly]:focus, [type=tel][readonly]:hover, [type=tel][readonly]:focus, [type=search][readonly]:hover, [type=search][readonly]:focus, [type=password][readonly]:hover, [type=password][readonly]:focus, [type=email][readonly]:hover, [type=email][readonly]:focus, [type=url][readonly]:hover, [type=url][readonly]:focus, [type=date][readonly]:hover, [type=date][readonly]:focus, [type=datetime-local][readonly]:hover, [type=datetime-local][readonly]:focus, [type=file][readonly]:hover, [type=file][readonly]:focus, select[readonly]:hover, select[readonly]:focus, textarea[readonly]:hover, textarea[readonly]:focus { border-color: #000 }
[type=text][disabled], [type=number][disabled], [type=tel][disabled], [type=search][disabled], [type=password][disabled], [type=email][disabled], [type=url][disabled], [type=date][disabled], [type=datetime-local][disabled], [type=file][disabled], select[disabled], textarea[disabled] {
cursor:not-allowed;
color:#000;
background:#f1f1f1
}
[type=text][disabled]:hover, [type=number][disabled]:hover, [type=tel][disabled]:hover, [type=search][disabled]:hover, [type=password][disabled]:hover, [type=email][disabled]:hover, [type=url][disabled]:hover, [type=date][disabled]:hover, [type=datetime-local][disabled]:hover, [type=file][disabled]:hover, select[disabled]:hover, textarea[disabled]:hover { border-color: #000 }
@media screen and (max-width: 1024px) {
[type=text], [type=number], [type=tel], [type=search], [type=password], [type=email], [type=url], [type=date], [type=datetime-local], [type=file], select, textarea {
padding:9px 16px
}
}
select { display: inline-block; padding-right: 40px; -webkit-appearance: none; -moz-appearance: none; color: #000; position: relative }
select::-ms-expand {
display:none
}
.csstransitions select { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAICAYAAADnVO9eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzMEY4OTZBNTI3MTExRThBQjRDQzc4NkVEN0Q2N0E1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMzMEY4OTZCNTI3MTExRThBQjRDQzc4NkVEN0Q2N0E1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzMwRjg5Njg1MjcxMTFFOEFCNENDNzg2RUQ3RDY3QTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzMwRjg5Njk1MjcxMTFFOEFCNENDNzg2RUQ3RDY3QTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7NDvcmAAAAmklEQVR42mLQ0NAQZiASgNT+//+fgRzMxMXFNcvIyCiHkCUgNSC1DGQCpk+fPkUxMjIGGxsbl+BSBJIDqQGpJduiO3fu/Pz48aMHkO2NzTKomDdIDUgt2RaBCFyWUcsSEGBE5qioqLDz8/PvADK3/vv3j4OJickZ3RJQxFJsEZplDNh8QjWLQEBBQYEDRD948OAHuhy5FgEEGABfqXiJWBAInAAAAABJRU5ErkJggg==); background-repeat: no-repeat; background-position: right 50%; background-size: 26px auto }
.csstransitions select[multiple] { background: rgba(0,0,0,0) }
textarea { max-width: 100%; min-height: 100px; line-height: 1.6; resize: none }
::-webkit-input-placeholder {
color:#acacac
}
::-moz-placeholder {
color:#acacac
}
:-ms-input-placeholder {
color:#acacac
}
:-moz-placeholder {
color:#acacac
}
input::-ms-clear {
display:none
}
input[type=number] { -webkit-appearance: none; -moz-appearance: textfield }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
margin:0;
-webkit-appearance:none
}
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
display:none
}
.search-form { width: max(13.8020833333vw, 265px) }
.search-form .input[type=search] { border: none; width: 100%; background: #f5f5f5; position: relative; padding: 0; border-radius: 40px }
.search-form .input[type=search] input { background: none; border: none; width: 100%; padding: 1.0625em 2.625em 1.0625em 1.25em; border-radius: 40px; -webkit-border-radius: 40px }
.search-form .input[type=search] .__search { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) }
input[type=date]::-webkit-inner-spin-button, input[type=datetime-local]::-webkit-inner-spin-button {
display:none;
margin:0
}
input[type=date]::-webkit-clear-button, input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-clear-button, input[type=datetime-local]::-webkit-calendar-picker-indicator {
display:none
}
input[type=date]::-webkit-datetime-edit-fields-wrapper, input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper {
padding:0
}
input[type=radio] { width: 1.3333333333em; font-size: 18px; height: 1.3333333333em; border: 1px solid #e0e0e0; border-radius: 50%; outline: none; -webkit-appearance: none }
input[type=radio].white { border: 1px solid #fff }
input[type=radio].white:checked:before { background: #fff }
input[type=radio].white:checked { border-color: #fff }
input[type=radio]:before { content: ""; display: block; width: 60%; height: 60%; margin: 20% auto; border-radius: 50% }
input[type=radio]:checked:before { background: #004098 }
input[type=radio]:checked { border-color: #e0e0e0 }
input[type=submit] { position: relative; -webkit-appearance: none; outline: none; display: inline-flex; border: 1px solid rgba(0,0,0,.2); background-color: rgba(0,0,0,0) }
input[type=submit]:hover { background-color: #004098 }
.ta { position: relative }
.ta-counter { position: absolute; right: 20px; bottom: 10px; font-size: 14px }
select { width: 20.75em; border: 1px solid rgba(0,0,0,.1); background: url("/images/ksob_arrow_under.svg") calc(100% - 16px) center/16px no-repeat }
select[readonly] { pointer-events: none; background-color: #f5f5f5 }
textarea[readonly] { pointer-events: none; background-color: #f5f5f5 }
.form-error-message { margin-top: .7142857143em; color: red; bottom: -2em; font-size: 14px; font-weight: 500; line-height: 145%; letter-spacing: -0.14px }
.form-ul h6 { padding-bottom: .8888888889em; margin-bottom: .8888888889em; border-bottom: 1px solid #e0e0e0 }
.form-ul>li .col { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 3.55em; font-size: 20px; margin-bottom: 1.6em; padding-bottom: 1.6em; border-bottom: 1px solid #e0e0e0 }
@media screen and (max-width: 1024px) {
.form-ul>li .col { gap: 1.5em; row-gap: 1.5em }
}
.form-ul>li:not(:first-of-type) { margin-top: 3.4em; font-size: 20px }
.form-ul>li:not(:first-of-type):has(.removable.hide) {
margin-top:0
}
.form-ul .form-input-cont, .form-ul .form-textarea-cont, .form-ul .form-title-cont, .form-ul .form-email-cont, .form-ul .form-select-cont { display: flex; justify-content: center; align-items: center; position: relative; gap: .625em }
.form-ul .form-input-cont input, .form-ul .form-textarea-cont input, .form-ul .form-title-cont input, .form-ul .form-email-cont input, .form-ul .form-select-cont input { width: 20.75em }
@media screen and (max-width: 1024px) {
.form-ul .form-input-cont input, .form-ul .form-textarea-cont input, .form-ul .form-title-cont input, .form-ul .form-email-cont input, .form-ul .form-select-cont input { width: 16.375em }
}
@media screen and (max-width: 767px) {
.form-ul .form-input-cont input, .form-ul .form-textarea-cont input, .form-ul .form-title-cont input, .form-ul .form-email-cont input, .form-ul .form-select-cont input { width: 18.125em }
}
.form-ul .form-input-cont.required .form-input-title span, .form-ul .form-input-cont.required .form-textarea-title span, .form-ul .form-input-cont.required .form-title-title span, .form-ul .form-input-cont.required .form-email-title span, .form-ul .form-input-cont.required .form-select-title span, .form-ul .form-textarea-cont.required .form-input-title span, .form-ul .form-textarea-cont.required .form-textarea-title span, .form-ul .form-textarea-cont.required .form-title-title span, .form-ul .form-textarea-cont.required .form-email-title span, .form-ul .form-textarea-cont.required .form-select-title span, .form-ul .form-title-cont.required .form-input-title span, .form-ul .form-title-cont.required .form-textarea-title span, .form-ul .form-title-cont.required .form-title-title span, .form-ul .form-title-cont.required .form-email-title span, .form-ul .form-title-cont.required .form-select-title span, .form-ul .form-email-cont.required .form-input-title span, .form-ul .form-email-cont.required .form-textarea-title span, .form-ul .form-email-cont.required .form-title-title span, .form-ul .form-email-cont.required .form-email-title span, .form-ul .form-email-cont.required .form-select-title span, .form-ul .form-select-cont.required .form-input-title span, .form-ul .form-select-cont.required .form-textarea-title span, .form-ul .form-select-cont.required .form-title-title span, .form-ul .form-select-cont.required .form-email-title span, .form-ul .form-select-cont.required .form-select-title span { position: relative }
.form-ul .form-input-cont.required .form-input-title span::after, .form-ul .form-input-cont.required .form-textarea-title span::after, .form-ul .form-input-cont.required .form-title-title span::after, .form-ul .form-input-cont.required .form-email-title span::after, .form-ul .form-input-cont.required .form-select-title span::after, .form-ul .form-textarea-cont.required .form-input-title span::after, .form-ul .form-textarea-cont.required .form-textarea-title span::after, .form-ul .form-textarea-cont.required .form-title-title span::after, .form-ul .form-textarea-cont.required .form-email-title span::after, .form-ul .form-textarea-cont.required .form-select-title span::after, .form-ul .form-title-cont.required .form-input-title span::after, .form-ul .form-title-cont.required .form-textarea-title span::after, .form-ul .form-title-cont.required .form-title-title span::after, .form-ul .form-title-cont.required .form-email-title span::after, .form-ul .form-title-cont.required .form-select-title span::after, .form-ul .form-email-cont.required .form-input-title span::after, .form-ul .form-email-cont.required .form-textarea-title span::after, .form-ul .form-email-cont.required .form-title-title span::after, .form-ul .form-email-cont.required .form-email-title span::after, .form-ul .form-email-cont.required .form-select-title span::after, .form-ul .form-select-cont.required .form-input-title span::after, .form-ul .form-select-cont.required .form-textarea-title span::after, .form-ul .form-select-cont.required .form-title-title span::after, .form-ul .form-select-cont.required .form-email-title span::after, .form-ul .form-select-cont.required .form-select-title span::after { content: "*"; display: block; position: absolute; top: -0.3em; right: -.5333333333em; font-size:max(.8333vw, 11px);
color: red }
.form-ul .form-input-cont .form-message, .form-ul .form-textarea-cont .form-message, .form-ul .form-title-cont .form-message, .form-ul .form-email-cont .form-message, .form-ul .form-select-cont .form-message { display: none; position: absolute; left: max(3.8020833333vw, 5.2142857143em); color: red; bottom: -2em; font-size: 14px; font-weight: 500; line-height: 145%; letter-spacing: -0.14px }
.form-ul .form-input-cont.error, .form-ul .form-textarea-cont.error, .form-ul .form-title-cont.error, .form-ul .form-email-cont.error, .form-ul .form-select-cont.error { margin-bottom: .5714285714em }
.form-ul .form-input-cont.error input, .form-ul .form-input-cont.error textarea, .form-ul .form-textarea-cont.error input, .form-ul .form-textarea-cont.error textarea, .form-ul .form-title-cont.error input, .form-ul .form-title-cont.error textarea, .form-ul .form-email-cont.error input, .form-ul .form-email-cont.error textarea, .form-ul .form-select-cont.error input, .form-ul .form-select-cont.error textarea { border: 1px solid red }
.form-ul .form-input-cont.error .form-message, .form-ul .form-textarea-cont.error .form-message, .form-ul .form-title-cont.error .form-message, .form-ul .form-email-cont.error .form-message, .form-ul .form-select-cont.error .form-message { display: block }
.form-ul .form-input-title, .form-ul .form-textarea-title, .form-ul .form-title-title, .form-ul .form-email-title, .form-ul .form-select-title { display: block; width: 3.9375em }
.form-ul .form-textarea-cont { position: relative; width: 100%; align-items: flex-start }
.form-ul .form-textarea-cont textarea { width: calc(100% - 3.9375em); padding: 1.25em 1.25em 4.125em 1.25em; height: 18em }
@media screen and (max-width: 767px) {
.form-ul .form-textarea-cont textarea { height: 360px }
}
.form-ul .form-textarea-cont .count { display: block; position: absolute; right: 1.25em; bottom: 1.25em; color: #999 }
.form-ul .form-textarea-cont .count em { color: #000 }
.form-ul .form-title-cont { width: 100%; justify-content: flex-start }
.form-ul .form-title-cont input { width: 100% }
.form-ul .form-email-cont { justify-content: flex-start }
.form-ul .form-email-cont .form-email-right { flex-wrap: wrap; width: 100%; display: flex; justify-content: center; align-items: center }
@media screen and (max-width: 767px) {
.form-ul .form-email-cont .form-email-right { display: block }
.form-ul .form-email-cont .form-email-right input, .form-ul .form-email-cont .form-email-right select { min-width: 100% }
.form-ul .form-email-cont .form-email-right input { margin-bottom: 16px }
.form-ul .form-email-cont .form-email-right input:nth-of-type(2) { min-width: calc(100% - 23px); width: calc(100% - 23px) !important; margin-left: 0 }
.form-ul .form-email-cont .form-email-right span { width: 13px; margin-right: 10px; height: 42px; line-height: 42px; float: left }
}
@media screen and (max-width: 767px) {
.form-ul .form-email-cont { justify-content: flex-start }
}
.form-ul .form-email-cont input { width: 20.75em }
@media screen and (max-width: 1024px) {
.form-ul .form-email-cont input { width: 12.6875em }
}
@media screen and (max-width: 767px) {
.form-ul .form-email-cont input { width: 18.125em }
.form-ul .form-email-cont input:nth-of-type(2) { width: 16.875em }
}
@media screen and (max-width: 767px)and (max-width: 623px) {
.form-ul .form-email-cont input:nth-of-type(2) { margin-left: auto }
}
@media screen and (max-width: 1024px) {
.form-ul .form-email-cont select { width: 12.6875em }
}
@media screen and (max-width: 767px) {
.form-ul .form-email-cont select { width: 18.125em }
}
@media screen and (max-width: 623px) {
.form-ul .form-email-cont select { margin-left: auto }
}
@media screen and (max-width: 1024px) {
.form-ul .form-select-cont { position: relative }
.form-ul .form-select-cont.opened::after { width: 40px; height: 40px; position: absolute; right: 10px; top: 0px; content: ""; display: block; pointer-events: all; z-index: 10000 }
}
@media screen and (max-width: 1024px) {
.form-ul .form-select-cont select { width: 15.3125em }
.form-ul .form-select-cont select option { margin-bottom: -30px }
}
@media screen and (max-width: 767px) {
.form-ul .form-select-cont select { width: 18.125em }
}
.form-ul .form-radio-cont { position: relative; display: flex; justify-content: center; align-items: center; justify-content: flex-end; gap: 1.7777777778em }
.form-ul .form-radio-cont .form-radio-item { display: flex; justify-content: center; align-items: center; gap: .4444444444em }
.form-ul .form-radio-cont .form-error-message { position: absolute }
@media screen and (max-width: 767px) {
.form-ul .form-radio-cont { flex-wrap: wrap }
}
.form .policy-cont { border: 1px solid #e0e0e0; border-radius: var(--br-4); padding: 2.5em }
.form .policy-cont li { display: flex; justify-content: center; align-items: center; justify-content: flex-start }
@media screen and (max-width: 767px) {
.form .policy-cont li { flex-direction: column; justify-content: flex-start; align-items: flex-start }
}
.form .policy-cont li span:first-of-type { width: 8.8125em; margin-right: 1em; display: block }
.form .policy-cont li span:last-of-type { color: #444 }
@media screen and (max-width: 767px) {
.form .policy-cont li span:last-of-type { margin-left: 1.25em }
}
.form .policy-cont li:not(:last-of-type) { margin-bottom: .375em }
.form .policy-cont--security li { display: block }
.form .policy-cont--security li:not(:last-of-type) { margin-bottom: 1.25em }
.form .policy-cont--security li span:first-of-type { width: auto }
.form .policy-cont--security li .circular-h, .form .policy-cont--security li .circular-h:first-of-type { display: block; margin-top: .75em }
.form .policy-cont--security li .inner-ul { margin-top: .5em }
.form .policy-cont--security li .inner-ul li { margin-bottom: 0 }
.form .policy-cont--security li .added { display: block; margin-top: .5em }
.form .policy-cont--security li .inner-ul, .form .policy-cont--security li .added { color: #444 }
.form .policy-tit { margin-bottom: 1.3333333333em }
.form .policy-capt { margin-top: 1.5em; display: block; color: #999 }
#business-contact-us-form .form .policy-capt { color: #8db3e8 }
#business-contact-us-form .form .policy-capt::before { content: "*"; margin-right: .4em }
[lang=en] .form-ul .form-input-title, [lang=en] .form-ul .form-textarea-title, [lang=en] .form-ul .form-title-title, [lang=en] .form-ul .form-email-title, [lang=en] .form-ul .form-select-title { min-width: max(6.25vw, 80px); width: max(6.25vw, 80px); position: relative; white-space: nowrap }
[lang=en] #page-inquiry .form-input-cont label, [lang=en] #page-inquiry .form-textarea-cont label, [lang=en] #page-inquiry .form-title-cont label, [lang=en] #page-inquiry .form-email-cont label, [lang=en] #page-inquiry .form-select-cont label { min-width: max(6.25vw, 80px); width: max(6.25vw, 80px); position: relative }
[lang=en] .form-ul .form-input-cont.required .form-input-title span::after, [lang=en] .form-ul .form-input-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-input-cont.required .form-title-title span::after, [lang=en] .form-ul .form-input-cont.required .form-email-title span::after, [lang=en] .form-ul .form-input-cont.required .form-select-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-input-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-title-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-email-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-select-title span::after, [lang=en] .form-ul .form-title-cont.required .form-input-title span::after, [lang=en] .form-ul .form-title-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-title-cont.required .form-title-title span::after, [lang=en] .form-ul .form-title-cont.required .form-email-title span::after, [lang=en] .form-ul .form-title-cont.required .form-select-title span::after, [lang=en] .form-ul .form-email-cont.required .form-input-title span::after, [lang=en] .form-ul .form-email-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-email-cont.required .form-title-title span::after, [lang=en] .form-ul .form-email-cont.required .form-email-title span::after, [lang=en] .form-ul .form-email-cont.required .form-select-title span::after, [lang=en] .form-ul .form-select-cont.required .form-input-title span::after, [lang=en] .form-ul .form-select-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-select-cont.required .form-title-title span::after, [lang=en] .form-ul .form-select-cont.required .form-email-title span::after, [lang=en] .form-ul .form-select-cont.required .form-select-title span::after { right: -0.633em }
@media screen and (max-width: 1024px) {
[lang=en] .form-ul .form-input-cont.required .form-input-title span::after, [lang=en] .form-ul .form-input-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-input-cont.required .form-title-title span::after, [lang=en] .form-ul .form-input-cont.required .form-email-title span::after, [lang=en] .form-ul .form-input-cont.required .form-select-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-input-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-title-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-email-title span::after, [lang=en] .form-ul .form-textarea-cont.required .form-select-title span::after, [lang=en] .form-ul .form-title-cont.required .form-input-title span::after, [lang=en] .form-ul .form-title-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-title-cont.required .form-title-title span::after, [lang=en] .form-ul .form-title-cont.required .form-email-title span::after, [lang=en] .form-ul .form-title-cont.required .form-select-title span::after, [lang=en] .form-ul .form-email-cont.required .form-input-title span::after, [lang=en] .form-ul .form-email-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-email-cont.required .form-title-title span::after, [lang=en] .form-ul .form-email-cont.required .form-email-title span::after, [lang=en] .form-ul .form-email-cont.required .form-select-title span::after, [lang=en] .form-ul .form-select-cont.required .form-input-title span::after, [lang=en] .form-ul .form-select-cont.required .form-textarea-title span::after, [lang=en] .form-ul .form-select-cont.required .form-title-title span::after, [lang=en] .form-ul .form-select-cont.required .form-email-title span::after, [lang=en] .form-ul .form-select-cont.required .form-select-title span::after { right: -0.5333333333em }
[lang=en] .form-ul .form-input-title, [lang=en] .form-ul .form-textarea-title, [lang=en] .form-ul .form-title-title, [lang=en] .form-ul .form-email-title, [lang=en] .form-ul .form-select-title { min-width: 93px; width: 93px }
[lang=en] #page-inquiry .form-input-cont label, [lang=en] #page-inquiry .form-textarea-cont label, [lang=en] #page-inquiry .form-title-cont label, [lang=en] #page-inquiry .form-email-cont label, [lang=en] #page-inquiry .form-select-cont label { min-width: 93px; width: 93px }
[lang=en] #page-inquiry .form-email-cont input, [lang=en] #page-inquiry .form-email-cont select { width: 100% }
[lang=en] #form-textarea-title { position: relative }
}
.radio, .checkbox { position: relative; display: inline-block; margin-right: 8px; white-space: normal; word-break: keep-all; word-wrap: break-word }
.radio>label, .checkbox>label { vertical-align: top; font-size: 16px; line-height: 20px; padding: 5px 0 }
.radio:last-child, .checkbox:last-child { margin-right: 0 }
.radio [type=radio], .radio [type=checkbox], .checkbox [type=radio], .checkbox [type=checkbox] { margin: 0 }
.radio [type=radio]+label, .radio [type=checkbox]+label, .checkbox [type=radio]+label, .checkbox [type=checkbox]+label { position: relative; padding-left: 8px; transition: color .3s }
.radio [type=radio]+label:before, .radio [type=radio]+label:after, .radio [type=checkbox]+label:before, .radio [type=checkbox]+label:after, .checkbox [type=radio]+label:before, .checkbox [type=radio]+label:after, .checkbox [type=checkbox]+label:before, .checkbox [type=checkbox]+label:after { position: absolute; left: 0; top: 10px; font-size: 17px; line-height: 1 }
.radio [type=radio]+label:before, .radio [type=checkbox]+label:before, .checkbox [type=radio]+label:before, .checkbox [type=checkbox]+label:before { color: #4d4d4d }
.radio [type=radio]+label:after, .radio [type=checkbox]+label:after, .checkbox [type=radio]+label:after, .checkbox [type=checkbox]+label:after { color: rgba(0,0,0,0); transition: color .2s }
.radio [type=radio]:focus+label, .radio [type=checkbox]:focus+label, .checkbox [type=radio]:focus+label, .checkbox [type=checkbox]:focus+label { outline: 1px dotted #000 }
.radio [type=radio][disabled]+label, .radio [type=checkbox][disabled]+label, .checkbox [type=radio][disabled]+label, .checkbox [type=checkbox][disabled]+label { cursor: not-allowed; color: #000 }
.rectangle-swiper-arrow { display: flex }
.rectangle-swiper-arrow button { width: min(3.0208333333vw, 5.8rem); height: min(2.2916666667vw, 4.4rem); border: 1px solid rgba(255,255,255,.6); cursor: pointer; padding: 0 }
.rectangle-swiper-arrow button.arrow-prev {
border-radius:.6rem 0rem 0rem .6rem; margin-right: -1px }
.rectangle-swiper-arrow button.arrow-next { border-radius:0rem .6rem .6rem 0rem
}
.rectangle-swiper-arrow button.swiper-button-disabled { border-color: rgba(0,0,0,.4); opacity: .4; cursor: default }
.rectangle-swiper-arrow button svg { width:min(.7291666667vw, 1.4rem);
height:min(.7291666667vw, 1.4rem)
}
@media screen and (max-width: 1366px) {
.rectangle-swiper-arrow button { width: 4.3rem; height: 3.2rem }
.rectangle-swiper-arrow button svg { width: 1rem; height: 1rem }
}
html.lenis { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain }
.lenis.lenis-scrolling iframe { pointer-events: none }
@font-face { font-family: "swiper-icons"; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal }
:root { --swiper-theme-color: #007aff
}
:host {
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
z-index:1
}
.swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block }
.swiper-vertical>.swiper-wrapper { flex-direction: column }
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box }
.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0) }
.swiper-horizontal { touch-action: pan-y }
.swiper-vertical { touch-action: pan-x }
.swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block }
.swiper-slide-invisible-blank { visibility: hidden }
.swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto }
.swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height }
.swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden }
.swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px }
.swiper-3d .swiper-wrapper { transform-style: preserve-3d }
.swiper-3d { perspective: 1200px }
.swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d }
.swiper-css-mode>.swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none }
.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
display:none
}
.swiper-css-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align: start start }
.swiper-css-mode.swiper-horizontal>.swiper-wrapper { scroll-snap-type: x mandatory }
.swiper-css-mode.swiper-vertical>.swiper-wrapper { scroll-snap-type: y mandatory }
.swiper-css-mode.swiper-free-mode>.swiper-wrapper { scroll-snap-type: none }
.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align: none }
.swiper-css-mode.swiper-centered>.swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999 }
.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always }
.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before) }
.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after) }
.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before) }
.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after) }
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10 }
.swiper-3d .swiper-slide-shadow { background: rgba(0,0,0,.15) }
.swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) }
.swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) }
.swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) }
.swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) }
.swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: rgba(0,0,0,0) }
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear }
.swiper-lazy-preloader-white { --swiper-preloader-color: #fff
}
.swiper-lazy-preloader-black { --swiper-preloader-color: #000
}
@keyframes swiper-preloader-spin { 0% {
transform:rotate(0deg)
}
100% {
transform:rotate(360deg)
}
}
.swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10 }
.swiper-pagination.swiper-pagination-hidden { opacity: 0 }
.swiper-pagination-disabled>.swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important }
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100% }
.swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0 }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66) }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33) }
.swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2) }
button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; appearance: none }
.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer }
.swiper-pagination-bullet:only-child { display: none !important }
.swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)) }
.swiper-vertical>.swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0) }
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block }
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px }
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top }
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px) }
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap }
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left }
.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right }
.swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit) }
.swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute }
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top }
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top }
.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0 }
.swiper-vertical>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0 }
.swiper-pagination-lock { display: none }
.swiper-creative .swiper-slide { backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height }
.fullsize-view { position: absolute; width: 100%; height: 100vh; bottom: 0; left: 0 }
.section--business { position: relative }
.section--business .main-sector { position: absolute; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: start; flex-direction: column; z-index: 1; background-color: #fff }
.section--business .main-sector .slogan-wrap { text-align: center }
.section--business .main-sector .slogan { text-align: center }
.section--business .main-sector .slogan br { display: none }
.section--business .main-sector .slogan .motion-wrap { overflow: hidden }
.section--business .main-sector .slogan .txt-motion-inner { display: inline-block }
.section--business .main-sector .slides { display: flex; width: 100%; gap: 18px; padding: 4.1666666667vw var(--cm-margin) 0 }
.section--business .main-sector .slides.hide { transition: opacity 0s .5s; opacity: 0 }
.section--business .main-sector .slide-image { position: absolute; height: 100%; width: 100%; left: 0; top: 0 }
.section--business .main-sector .slide { position: relative; width: 100%; flex: 1 }
.section--business .main-sector .slide.center { z-index: 1 }
.section--business .main-sector .slide::before { content: ""; display: block; position: relative; padding-top: 117.3184357542% }
.section--business .main-sector .slide .img-wrap, .section--business .main-sector .slide img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover }
.section--business .main-sector .slide .img-wrap { border-radius: var(--br-4); overflow: hidden }
.section--business .motion-handle { height: 100vh }
.section--business .motion-handle.expand { height: 75vh }
.section--business .motion-handle.delay { height: 200vh }
@media screen and (max-width: 1024px) {
.section--business .motion-handle.reveal { height: 60vh }
}
.section--business .main-business-sector { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100% }
@media screen and (max-width: 1024px) {
.section--business .main-business-sector { height: var(--landing-height, 100vh) }
.section--business .main-business-sector.is-fixed { height: calc(100vh - env(safe-area-inset-bottom)) }
@supports(height: 100dvh) {
.section--business .main-business-sector.is-fixed {
height:calc(100dvh - env(safe-area-inset-bottom))
}
}
}
.section--business .business-swiper { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.section--business .business-swiper::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 8.125vw; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 50%, rgba(0, 0, 0, 0.55) 100%); z-index: 10 }
.section--business .business-swiper-pagination { display: flex; position: absolute; bottom: 0; left: 0; top: auto; width: 100%; z-index: 10; gap: 0 }
.section--business .business-swiper-pagination .swiper-pagination-bullet { position: relative; width: 20%; height: 4.1666666667vw; margin: 0; background: rgba(0,0,0,0); color: #fff; font-size: max(1.1458vw, 15px); border-radius: 0; border-top: 1px solid rgba(255,255,255,.4); white-space: nowrap; opacity: 1; padding-left: 2rem; padding-right: 2rem }
.section--business .business-swiper-pagination .swiper-pagination-bullet .num, .section--business .business-swiper-pagination .swiper-pagination-bullet .tit { opacity: .6; transition: opacity .34s }
.section--business .business-swiper-pagination .swiper-pagination-bullet::before { content: ""; position: absolute; left: 0; top: 0; display: block; transform: translateY(-100%); height: 1px; width: 100%; background-color: rgba(255,255,255,.4); opacity: 0; transition: opacity .34s }
.section--business .business-swiper-pagination .swiper-pagination-bullet::after { content: ""; position: absolute; left: 0; top: 0; transform: translateY(-100%); display: block; height: 2px; width: 0; background-color: #fff }
.section--business .business-swiper-pagination .swiper-pagination-bullet .num { margin-right: .8333333333em }
.section--business .business-swiper-pagination .swiper-pagination-bullet-active .num, .section--business .business-swiper-pagination .swiper-pagination-bullet-active .tit { opacity: 1 }
.section--business .business-swiper-pagination .swiper-pagination-bullet-active::before { opacity: 1 }
.section--business .business-swiper-pagination .swiper-pagination-bullet-active::after { transform-origin: left; width: 100%; transform: scaleX(var(--animation-per)) translateY(-100%) }
@media(hover: hover)and (pointer: fine) {
.section--business .business-swiper-pagination .swiper-pagination-bullet:hover .num, .section--business .business-swiper-pagination .swiper-pagination-bullet:hover .tit { opacity: 1 }
.section--business .business-swiper-pagination .swiper-pagination-bullet:hover::before { opacity: 1 }
}
.section--business .business-swiper .swiper-slide { overflow: hidden }
.section--business .business-swiper .img-wrap::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.25) }
.section--business .business-swiper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover }
.section--business .business-swiper .cont { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; padding-left: 4.6875vw; padding-bottom: 7.2916666667vw }
.section--business .business-swiper .cont a { display: block; width: fit-content }
.section--business .business-swiper .cont .tit-wrap { margin-top: .097826087em; overflow: hidden }
.section--business .business-swiper .cont .tit { position: relative; z-index: 1; color: #fff; transform: translate3d(0, 100%, 0); transition: transform 1s var(--tit-delay, "0s") cubic-bezier(0.23, 1, 0.32, 1) }
.section--business .business-swiper .cont .link { z-index: 1 }
.section--business .business-swiper.active .swiper-slide-active .cont .tit { transform: translate3d(0, 0, 0) }
.section--business .feature { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 2.6041666667vw 2.0833333333vw }
.section--business .feature-swiper { position: absolute; font-size: 1.25vw; top: 2.0833333333vw; bottom: 6.25vw; right: 2.0833333333vw; width: 23.2291666667vw; background-color: #fff; pointer-events: none }
.section--business .feature .numb { font-size: 3.125vw; color: #ddd; font-weight: 600 }
.section--business .feature .tit { margin-top: .25em }
.section--business .feature .desc { margin-top: .75em; margin-bottom: 2em }
.section--business .feature .thumbnail { position: relative; display: flex; align-items: flex-end }
.section--business .feature .thumbnail-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap:.7rem
}
.section--business .feature .thumbnail small { display:none;position: absolute; left: .7692307692em; bottom: .7692307692em; font-size:max(1rem, .6770833333vw);
color: #fff; max-width: 86%; line-height: 1.25; font-weight: 600 }
@media screen and (max-width: 1024px) {
.section--business .main-sector .slides { --cm-margin: max(2.3438vw, 20px);
gap:.8rem
}
.section--business .main-sector .slide .img-wrap { border-radius: 1rem }
.section--business .main-sector .slide::before { padding-top: 117.4603174603% }
.section--business .business-swiper-pagination { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; bottom: 1.8rem }
.section--business .business-swiper-pagination::-webkit-scrollbar {
display:none
}
.section--business .business-swiper-pagination .swiper-pagination-bullet { font-size: 1.8rem; width: fit-content; height: 6.6rem; flex: 1 }
.section--business .business-swiper .cont { bottom: calc(var(--feature-height) + 2.8rem + 6.4rem + 8.4rem); padding-left: 6.4rem; padding-bottom: 0 }
.section--business .feature { flex-direction: row; padding: 3rem }
.section--business .feature-swiper { top: auto; right: auto; min-height: 30rem; width: auto; left: 6.4rem; right: 6.4rem; bottom: 14.8rem }
.section--business .feature-swiper .swiper-slide { height: auto }
.section--business .feature .top { flex: auto; width: 30% }
.section--business .feature .bot { flex: auto; width: 70%; display: flex; flex-direction: column; justify-content: space-between }
.section--business .feature .thumbnail { width: auto }
.section--business .feature .thumbnail-container { flex: 1; display: flex; align-items: flex-end }
.section--business .feature .thumbnail-wrap { width: 100%; grid-template-columns: repeat(5, 1fr); gap:max(.4rem, .5859vw)
}
.section--business .feature .thumbnail small {
left:calc(.7em + .35rem); bottom: .7em }
.section--business .feature__t br { display: none }
}
@media screen and (max-width: 767px) {
.section--business .main-sector .slogan br { display: block }
.section--business .main-sector .slides { flex-wrap: wrap; justify-content: center; padding-top: 4rem; padding-left: 4.1026vw; padding-right: 4.1026vw }

.section--business .main-sector { position: absolute; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: unset; flex-direction: column; z-index: 1; background-color: #fff }

.section--business .main-sector .slide { flex: 0 1 auto; width:calc(33.33% - .6rem)
}
.section--business .main-sector .slide::before { padding-top: 116.6666666667% }
.section--business .main-sector .slide .img-wrap { border-radius:.8rem
}
.section--business .main-sector .slide:nth-child(1) { order: 1 }
.section--business .main-sector .slide:nth-child(2) { order: 3 }
.section--business .main-sector .slide:nth-child(3) { order: 2 }
.section--business .main-sector .slide:nth-child(4) { order: 4 }
.section--business .main-sector .slide:nth-child(5) { order: 5 }
.section--business .business-swiper-pagination { bottom: 0 }
.section--business .business-swiper-pagination .swiper-pagination-bullet { font-size: 1.6rem; height: 6.3rem; padding-left:.9rem;
padding-right:.9rem
}
.section--business .business-swiper-pagination .swiper-pagination-bullet::before { width: calc(100% - 1.8rem); left:.9rem;
opacity: 0 }
.section--business .business-swiper-pagination .swiper-pagination-bullet::after { width: calc(100% - 1.8rem); left:.9rem;
opacity: 0; transition: opacity .34s }
.section--business .business-swiper-pagination .swiper-pagination-bullet:first-child { padding-left: 1.5em }
.section--business .business-swiper-pagination .swiper-pagination-bullet:first-child::after { left: 1.5em; width:calc(100% - 1.5em - .9rem)
}
.section--business .business-swiper-pagination .swiper-pagination-bullet:last-child { padding-right: 1.5em }
.section--business .business-swiper-pagination .swiper-pagination-bullet:last-child::after { width:calc(100% - 1.5em - .9rem)
}
.section--business .business-swiper-pagination .swiper-pagination-bullet-active::after { opacity: 1; transform: scaleX(1) }
.section--business .business-swiper-pagination .swiper-pagination-bullet .num { display: none }
.section--business .business-swiper .cont { bottom: calc(var(--feature-height) + 3rem + 2.4rem + 6.3rem); padding-left: 1.6rem }
.section--business .feature { padding: 3rem 0 }
.section--business .feature .top { display: none }
.section--business .feature .bot .t-cont { display: flex; flex-direction: column; justify-content: flex-end; padding-left: 2rem; padding-right: 2rem }
.section--business .feature .desc { margin-top:.6rem
}
.section--business .feature-swiper { pointer-events: initial; left: 1.6rem; right: 1.6rem; bottom: 8.7rem; height: auto; min-height: auto }
.section--business .feature-swiper .swiper-slide { height: auto }
.section--business .feature .thumbnail { min-width: 30%; width: 30%; flex: 0 1 auto; padding: 0 }
.section--business .feature .thumbnail-container { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none }
.section--business .feature .thumbnail-container::-webkit-scrollbar {
display:none
}
.section--business .feature .thumbnail-wrap { display: flex; flex-wrap: nowrap; margin-left: 0; margin-right: 0; gap:.7rem;
padding-left: 2rem; padding-right: 2rem }
.section--business .feature .thumbnail-wrap::after { content: ""; flex: 0 0 1.3rem }
.section--business .feature .thumbnail small {
left:.8rem;
bottom:.8rem; font-size: 1.2rem; white-space: pre-line }
}
.circle-link { display: inline-block; position: relative; width: 3.9583333333vw; height: 3.9583333333vw; border-radius: 50%; border: 1px solid #fff; cursor: pointer; padding: 0; overflow: hidden; transition: all .64s .12s cubic-bezier(0.23, 1, 0.32, 1) }
.circle-link::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate3d(-250%, -50%, 0); background: url(/images/ksob_arrow_right.svg) no-repeat center/100%; width: 1.5625vw; height: 1.5625vw; transition: all .64s cubic-bezier(0.23, 1, 0.32, 1); opacity: 0 }
.circle-link::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); background: url(/images/ksob_arrow_right_white.svg) no-repeat center/100%; width: 1.5625vw; height: 1.5625vw; transition: all .64s cubic-bezier(0.23, 1, 0.32, 1) }
@media(hover: hover)and (pointer: fine) {
.cont a:hover .circle-link { background-color: #fff }
.cont a:hover .circle-link::before { transform: translate3d(-50%, -50%, 0); opacity: 1 }
.cont a:hover .circle-link::after { transform: translate3d(250%, -50%, 0) }
}
@media screen and (max-width: 1024px) {
.circle-link { width: 5.6rem; height: 5.6rem }
.circle-link::before, .circle-link::after { width: 2.4rem; height: 2.4rem }
}
@media screen and (max-width: 767px) {
.circle-link { width: 4.8rem; height: 4.8rem }
.circle-link::before, .circle-link::after { width: 2rem; height: 2rem }
}
.business .overview { position: fixed; height: 100vh; width: 100%; z-index: 1 }
.business .overview .head-cont { position: relative; margin: var(--header-total-height) auto 0; z-index: 10; pointer-events: none }
.business .overview .head-cont .text-wrap { overflow: hidden }
.business .overview .head-cont .tit { margin-bottom: .1590909091em; text-align: center }
.business .overview .head-cont .desc { text-align: center }
.business .overview .business__overview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 1 }
.business .overview .business__overview .img-container { height: 100% }
.business .overview .business__overview .img-container::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.25); z-index: 10 }
.business .overview .business__overview .card-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; gap:.9375vw;
padding-left: 8.3333333333vw; padding-right: 8.3333333333vw; --header-height: max(4.375vw, 68px);
--header-top-height: max(1.9792vw, 36px);
--header-total-height: calc(var(--header-height) + var(--header-top-height));
height: calc(100vh - var(--header-total-height)); top: var(--header-total-height) }
.business .overview .business__overview .card { aspect-ratio: 305/650; width: 25vmin; cursor: pointer; color: #fff; display: flex; flex-direction: column; justify-content: space-between; border-radius: 20px; overflow: hidden; background-size: cover }
.business .overview .business__overview .card .cover-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .34s }
.business .overview .business__overview .card__id {
font-size:.8333333333vw; transform: rotate(90deg) translate(100%, 100%); transform-origin: right; display: flex; gap: 1.0416666667vw; padding-left: 1.0416666667vw; padding-top:.5208333333vw;
font-weight: 500; transition: all .2s; z-index: 1 }
[lang=en] .business .overview .business__overview .card__id { opacity: 0 !important }
.business .overview .business__overview .card__tit { font-size: 2.0833333333vw; padding-left: 1.5625vw; padding-bottom: 1.7708333333vw; text-transform: uppercase; font-weight: 600; transition: all .2s; z-index: 1 }
[lang=en] .business .overview .business__overview .card__tit { font-size: 1.6666666667vw }
.business .overview .business__overview .card.is-hide .card__id, .business .overview .business__overview .card.is-hide .card__tit { opacity: 0 !important }
.business .overview .business__overview .card.is-open .cover-img { opacity: 0 }
.business .overview .business__overview .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0) }
.business .overview .business__overview .mask .bg-entry { position: fixed; width: 100%; height: 100vh; object-fit: cover; transition: all .5s; opacity: 0 }
.business .overview .business__overview .mask .bg-entry.is-active { opacity: 1 !important; z-index: 10 }
.business .overview .head-cont .tit { transform: translate3d(0, 100%, 0) }
.business .overview .head-cont .desc { opacity: 0 }
.business .overview .business__overview .card { transform: translate3d(0, 100vh, 0) }
.business .overview .business__overview .img-container { transform: translate3d(0, 100vh, 0) }
@media screen and (max-width: 1024px) {
.business .overview { height: calc(100dvh - env(safe-area-inset-bottom)) }
.business .overview .head-cont { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); width: 100%; margin: 0 }
.business .overview .business__overview .card-container { height: calc(100vh - env(safe-area-inset-bottom) - var(--header-total-height)); flex-direction: column; gap:.8rem;
padding-left: 1.6rem; padding-right: 1.6rem; padding-bottom: 1.6rem }
@supports(height: 100dvh) {
.business .overview .business__overview .card-container {
height:calc(100dvh - env(safe-area-inset-bottom) - var(--header-total-height))
}
}
.business .overview .business__overview .card-container .card { width: 100%; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center }
.business .overview .business__overview .card-container .card__number { display: none }
.business .overview .business__overview .card-container .card__id { font-size: 1.1rem; transform: none; transform-origin: right; display: flex; gap: 1.0416666667vw; padding-left: 0; padding-top: 0 }
[lang=en] .business .overview .business__overview .card-container .card__id { display: none !important }
.business .overview .business__overview .card-container .card__tit { font-size: 2.2rem; line-height: 1.4; padding-left: 0; padding-bottom: 0; transition: all .2s }
.business .overview .business__overview .card { position: relative; transform: none; transform-origin: left; clip-path: inset(0% 100% 0% 0% round var(--br-3)); transition: clip-path .8s cubic-bezier(0.22, 1, 0.36, 1); border-radius: var(--br-3) }
.business .overview .business__overview .card.is-reveal { clip-path: inset(0% 0% 0% 0% round var(--br-3)) }
.business .overview .business__overview .img-container { transform: none }
}
.business { word-break: keep-all; word-wrap: break-word }
.business .detail { overflow: hidden; height: 100vh; display: none }
.business .detail.on { display: block; height: auto }
.business .detail hr { position: relative; border-top: 1px solid #e0e0e0; border-bottom: 0; margin: 0 }
.business .detail .mask { position: relative; height: 100vh; background-color: rgba(0,0,0,0) }
.business .detail .mask::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.25) }
.business .detail .bg-entry { position: fixed; width: 100%; height: 100vh; object-fit: cover; opacity: 0; visibility: hidden }
.business .detail .bg-entry img { position: fixed; width: 100%; height: 100vh; object-fit: cover }
.business .detail .kv { position: relative; height: calc(100vh - max(100px, 13vh)) }
.business .detail .kv::after { content: ""; position: absolute; width: 100%; bottom: -7.8125vw; left: 0; height: 29.2708333333vw; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 50%, rgba(0, 0, 0, 0.5) 100%); transition: opacity .2s; opacity: 0 }
.business .detail .kv.add-on-dimmed::after { opacity: 1 }
.business .detail .kv .cont { position: absolute; bottom: 0; z-index: 1 }
.business .detail .kv .cont .intro-text { color: #fff }
.business .detail .kv .cont .intro-text .txt-wrap { overflow: hidden }
.business .detail .kv .cont .intro-text .txt-wrap .txt { transform: translate3d(0, 100%, 0) }
.business .detail .kv .cont .selector { position: relative; display: inline-block; padding-right: 2.6041666667vw; cursor: pointer }
.business .detail .kv .cont .selector::before { content: ""; position: absolute; top: 50%; right:.5208333333vw;
transform: translate3d(0, -50%, 0); transition: all .34s ease-out; background-color: #fff; border-radius: 50%; width: 1.5625vw; height: 1.5625vw; z-index: 1 }
.business .detail .kv .cont .selector::after { content: ""; position: absolute; top: 50%; right: 1.0416666667vw; transform: translate3d(0, -50%, 0) rotateZ(-135deg); transition: all .34s ease-out; width:.46875vw;
height:.46875vw;
border-top: 2px solid #000; border-left: 2px solid #000; z-index: 2 }
.business .detail .kv .cont .selector .select-box { position: absolute; left: 0; bottom: 0; color: #8f8f8f; opacity: 0; pointer-events: none; transition: all .4s }
.business .detail .kv .cont .selector .select-box::before { content: ""; position: absolute; display: block; width: calc(100% + .694em + .694em + 2.6041666667vw); height: calc(100% + .556em + .556em); top: -0.556em; left: -0.694em; background-color: #fff; border-radius: var(--br-3) }
.business .detail .kv .cont .selector .select-box__item { position: relative; white-space: nowrap; z-index: 1 }
.business .detail .kv .cont .selector .select-box .sel { color: #004098 }
.business .detail .kv .cont .selector.is-active::before { background-color: #004098 }
.business .detail .kv .cont .selector.is-active::after { transform: translate3d(0, -50%, 0) rotate(45deg); border-color: #fff }
.business .detail .kv .cont .selector.is-active .select-box { opacity: 1; pointer-events: initial }
.business .detail .kv.inactive { opacity: 0; pointer-events: none }
@media screen and (max-width: 1024px) {
.business .detail .kv { height: calc(88dvh - env(safe-area-inset-bottom)) }
.business .detail .kv::after { bottom: -9.375vw }
.business .detail .kv .cont .selector { padding-right: 3.6rem }
.business .detail .kv .cont .selector::before { width: 1.8rem; height: 1.8rem; right: 1.2rem }
.business .detail .kv .cont .selector::after { right: 1.8rem; width:.6rem;
height:.6rem
}
.business .detail .kv .cont .selector .select-box::before { width: calc(100% + .667em + .762em + 3.6rem); height: calc(100% + .376em + .476em); left: -0.762em; top: -0.5em; padding: .476em .667em .476em .762em }
}
@media screen and (max-width: 767px) {
.business .detail .kv { height: calc(84dvh - env(safe-area-inset-bottom)); height: 84svh; height: calc(84vh - env(safe-area-inset-bottom) + 2.2em + 24px - var(--header-total-height)) }
@supports(height: 84dvh) {
.business .detail .kv {
height:calc(84dvh - env(safe-area-inset-bottom) + 2.2em + 24px - var(--header-total-height))
}
}
.business .detail .kv::after { height: 35.6rem; bottom: -10rem }
.business .detail .kv .cont .selector .select-box::before { border-radius: 12px; width: calc(100% + .5em + .625em + 3.6rem); height: calc(100% + .375em + .375em); left: -0.625em; top: -0.5em; padding: .375em .5em .375em .625em }
}
@media screen and (max-width: 767px) {
.business .detail .kv .cont { padding-left: .625em; padding-right: .625em }
.business .detail .kv .cont .container-sub1 { padding-left: 0; padding-right: 0 }
.business .detail .contents-nav-wrap { padding-left: .625em; padding-right: .625em; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none }
.business .detail .contents-nav-wrap::-webkit-scrollbar {
display:none
}
.business .detail .contents-nav-wrap .container-sub1 { padding-left: 0; padding-right: 0 }
}
.business .detail .contents-wrapper { transform: translateY(100px); opacity: 0 }
.business .detail .contents-wrapper .contents-nav { transform: translateY(20px); opacity: 0 }
.business .detail .contents-nav { position: relative; color: #fff; display: flex; gap: 2.4em; padding-bottom: 2.2em; white-space: nowrap }
.business .detail .contents-nav::after { content: ""; padding-right: .625em }
.business .detail .contents-nav-wrap { position: relative; z-index: 1 }
@media screen and (max-width: 1024px) {
.business .detail .contents-nav { gap: 1.3333333333em }
}
@media screen and (max-width: 767px) {
.business .detail .contents-nav { padding-bottom: 4rem }
}
.business .detail .contents { position: relative; z-index: 1; padding-top: 6.4vmax }
.business .detail .contents::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-top-left-radius: var(--br-1); border-top-right-radius: var(--br-1); background-color: #fff }
.business .detail .contents .btn-contents-view { position: absolute; top: 0; right: calc(max(1.5625vw, 20px) + 4.6875vw); border-radius: 50%; background: #004098 url(/images/ksob_arrow_bottom.svg) no-repeat center; background-size: max(1.5625vw, 2rem); width: max(3.9583vw, 5.2rem); height: max(3.9583vw, 5.2rem); transform: translateY(-50%) }
@media screen and (max-width: 1024px) {
.business .detail .contents .btn-contents-view { right: calc(max(1.5625vw, 20px) + 3.9063vw); width: 5.6rem; height: 5.6rem }
}
@media screen and (max-width: 767px) {
.business .detail .contents .btn-contents-view { right: 2.8rem; width: 4.8rem; height: 4.8rem; background-size: 50% }
}
.business .detail .introduction { position: relative; background-color: #fff }
.business .detail .introduction__name { font-size: 15.625vw; font-weight: 600; opacity: .1; text-align: center; margin-bottom: 1.875vw; white-space: nowrap; letter-spacing: .01em }
.business .detail .introduction { position: relative; height: 300vh }
.business .detail .introduction__visual { position: absolute; top: 0; left: 0; width: 100%; height: 200vh }
.business .detail .introduction__visual-guide { position: absolute; top: 100px; bottom: 40px; height: calc(100vh - 100px - 40px); left: max(1.5625vw, 20px); right: max(1.5625vw, 20px) }
.business .detail .introduction__visual-content { display: flex; flex-direction: column; align-items: center }
.business .detail .introduction__visual-content .img-container { position: relative; width: 22.3958333333vw; height: 26.0416666667vw }
.business .detail .introduction__visual-content .introduction__img-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-left: auto; margin-right: auto; overflow: hidden }
.business .detail .introduction__visual-content .introduction__img { width: 100%; height: 100%; object-fit: cover }
.business .detail .introduction__visual-content .introduction__dimmed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.25); opacity: 0 }
.business .detail .introduction__desc { position: absolute; top: 100vh; height: 100vh; left: 0; width: 100%; z-index: 1 }
.business .detail .introduction__desc-content { position: absolute; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff }
.business .detail .introduction__desc .txt { opacity: .7 }
.business .detail .introduction__desc .masking { position: absolute; left: 0; top: 0; opacity: 1; clip-path: inset(0 100% 0 0) }
.business .detail .introduction__desc .masking-container { position: relative }
.business .detail .introduction__desc .masking-container, .business .detail .introduction__desc .txt, .business .detail .introduction__desc .masking { display: inline-block; line-height: 1.3 }
@media screen and (max-width: 1024px) {
.business .detail .introduction__visual-guide { top: 2.4rem; bottom: 2.4rem; height: calc(100vh - 2.4rem - 2.4rem); left: 2.4rem; right: 2.4rem }
@supports(height: 100dvh) {
.business .detail .introduction__visual-guide {
height:calc(100dvh - 2.4rem - 2.4rem)
}
}
.business .detail .introduction__name { font-size: 15.625vw; margin-bottom: 3.515625vw }
.business .detail .introduction__visual-content { height: calc(100vh - env(safe-area-inset-bottom)); justify-content: center }
@supports(height: 100dvh) {
.business .detail .introduction__visual-content {
height:calc(100dvh - env(safe-area-inset-bottom))
}
}
.business .detail .introduction__visual-content .img-container { width: 330px; height: 400px }
}
@media screen and (max-width: 767px) {
.business .detail .introduction__visual-guide { top: 1.6rem; bottom: 1.6rem; height: calc(100vh - 1.6rem - 1.6rem); left: 1.6rem; right: 1.6rem }
@supports(height: 100dvh) {
.business .detail .introduction__visual-guide {
height:calc(100dvh - 1.6rem - 1.6rem)
}
}
.business .detail .introduction__name { font-size: 12.5162972621vw; font-size: 9.6rem; font-size: 7.2rem; margin-bottom: 4.6936114733vw }
.business .detail .introduction__visual-content { overflow: hidden }
.business .detail .introduction__visual-content .img-container { width: 175px; height: 213px }
}
.business .detail .major-place { position: relative; background-color: #fff }
.business .detail .major-place-head { display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 2.0833333333vw; padding-bottom: 1.4rem }
.business .detail .major-place-head .unit { display: flex; align-items: center; gap: 2rem }
.business .detail .major-place-head .line { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: rgba(255,255,255,.4) }
.business .detail .major-place .tit { color: #fff }
.business .detail .major-place-swiper { overflow: visible }
.business .detail .major-place-swiper .swiper-slide { height: auto;position:relative }
.business .detail .major-place-swiper .major-place-slide-item { padding: 0; background: #fff; backdrop-filter: blur(15px); color: #fff; height: 100%; cursor: pointer }
.business .detail .major-place-swiper .inner-box {  height: 100% }
.business .detail .major-place-swiper .cont { display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 3.5rem;position:absolute;bottom: 23px;
left: 5%;}
.business .detail .major-place-swiper .top-banner { display: flex; gap:.5208333333vw
}
.business .detail .major-place-swiper .top-banner img { width: 2.3958333333vw }
.business .detail .major-place-swiper .txt-box .tit { display: block; margin-top: .8333333333em; margin-bottom: .4166666667em; padding-bottom: 0; white-space: pre-line }
.business .detail .major-place-swiper .txt-box .txt { opacity: .7; white-space: pre-line }
.business .detail .major-place-swiper .img-wrap { display: block; aspect-ratio: 0/261; border-radius:.8208333333vw;
overflow: hidden }
.business .detail .major-place-swiper .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: 600ms ease }
.business .detail .major-place-swiper .img-wrap img:hover{


 transform: scale(1.1);

}

.business .detail .major-place-swiper .bottom-box { display: flex; align-items: center; justify-content: space-between; font-size: 1.5rem }
.business .detail .major-place-swiper .bottom-box img { pointer-events: none }
.business .detail .major-place-swiper .bottom-box .contact-btn { width: 2.6041666667vw; height: 2.6041666667vw; cursor: pointer; padding: 0 }
.business .detail .major-place .func { display: none }
@media screen and (max-width: 1366px) {
.business .detail .major-place-swiper .inner-box { gap: 1.6rem }
.business .detail .major-place-swiper .img-wrap {  }
.business .detail .major-place-swiper .cont { width: calc(100% - 9.0625vw - 1.6rem) }
}
@media screen and (max-width: 1024px) {
.business .detail .major-place-head { margin-bottom: 2.8rem }
.business .detail .major-place-swiper .major-place-slide-item { padding:0rem }
.business .detail .major-place-swiper .img-wrap { width: 100%; height: auto }
.business .detail .major-place-swiper .bottom-box { font-size: 1.3rem }
.business .detail .major-place-swiper .bottom-box .contact-btn { width: 3.2rem; height: 3.2rem }
.business .detail .major-place-swiper .cont { width: calc(100% - 14.7rem - 1.6rem); row-gap: 1.6rem }
.business .detail .major-place-swiper .cont .tit { margin-top: 0 }
.business .detail .major-place-swiper .top-banner { gap:.5rem
}
.business .detail .major-place-swiper .top-banner img { width: 3.4rem }
}
@media screen and (max-width: 767px) {
.business .detail .major-place-head { margin-bottom: 2.4rem }
.business .detail .major-place-swiper .major-place-slide-item { padding: 0rem }
.business .detail .major-place-swiper .inner-box { flex-direction: column; gap: 1.6rem }
.business .detail .major-place-swiper .img-wrap { width: 100% }
.business .detail .major-place-swiper .cont { width: 100% }
.business .detail .major-place .unit .more-btn { display: none }
.business .detail .major-place .func { display: block; padding-top: 3.6rem; text-align: center }
}
.business .detail .related-content { position: relative; background-color: #fff }
.detailed-business { position: relative }
.detailed-business__tit { margin-bottom: 3.6458333333vw }
.detailed-business__nav-wrapper { padding-top: 6.25vw; width: 100%; width: calc(100% - 6.25vw); height: 100%; border-right: 1px solid #e0e0e0 }
.detailed-business__nav { transition: transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1) }
.detailed-business__nav li { margin-bottom: 1em }
.detailed-business__nav li a { display: flex; gap:.3125vw;
gap: 0; transition: all .34s; opacity: .4 }
.detailed-business__nav li a::before { content: ""; position: relative; top: .3em; display: inline-block; width: 0; height:.9375vw;
background-color: #004098; transition: all .34s }
.detailed-business__nav li.active a {
gap:.3125vw; opacity: 1 }
.detailed-business__nav li.active a::before { width:.15625vw
}
.detailed-business .desc { margin-top: .6666666667em; margin-bottom: 1em; white-space: pre-line }
.detailed-business__info { position: relative }
[lang=en] .detailed-business__info .tit { white-space: pre-line }
.detailed-business__info .info { width: 50.3125vw }
.detailed-business__info .info__tit { margin-right: .5555555556em }
.detailed-business__info .info__desc { color: #444; font-weight: 400 }
.detailed-business__info .info small { color: #999; font-weight: 400 }
[lang=en] .detailed-business__info .info small { display: block }
.detailed-business__info .btn-contact-us { position: absolute; right: 0; bottom: 0 }
.detailed-business__info.no-info { padding-bottom: calc(3.59375vw - 1em) }
.detailed-business__info.no-info .btn-contact-us { right: auto; left: 0 }
.detailed-business .img-wrap { margin-top: 2.5vw; margin-bottom:.9375vw;
overflow: hidden }
.detailed-business .features { display: flex; gap:.9375vw
}
.detailed-business .features .feature { flex: 1; display: block; background-color: #f5f5f5; padding: 1.5625vw; height: auto }
.detailed-business .features .feature__num { display: block; color: #004098 }
.detailed-business .features .feature__tit { display: block; margin-top: 1.2em; margin-bottom: .6em }
.detailed-business .features .feature__desc { color: #444 }
.detailed-business .features.has-one .feature { display: flex; gap: 1.25vw }
.detailed-business .features.has-one .feature__tit { margin-top: 0; margin-bottom: 0 }
.detailed-business .features.has-one .feature__num { display: none }
@media screen and (max-width: 1024px) {
.detailed-business__nav li a::before { height: 1.2rem }
.detailed-business__nav li.active a { gap:.6rem
}
.detailed-business__nav li.active a::before { width:.2rem
}
.detailed-business__info .info { width: auto }
.detailed-business__info .info__tit { margin-right: .5555555556em }
.detailed-business__info .btn-contact-us { position: relative; margin-top: 2rem; right: 0; bottom: 0 }
.detailed-business__info.no-info { padding-bottom: calc(3.59375vw - 1em) }
.detailed-business__info.no-info .btn-contact-us { right: auto; left: 0 }
.detailed-business .img-wrap { margin-top: 2.4rem; margin-bottom: 1.2rem }
.detailed-business .features { flex-direction: column; gap:.625vw
}
.detailed-business .features .feature { display: flex; gap: 3.2rem; padding: 2.4rem 2rem }
.detailed-business .features .feature__tit { margin-top: 0 }
}
@media screen and (max-width: 767px) {
.detailed-business .img-wrap { position: relative; aspect-ratio: 358/240 }
.detailed-business .img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover }
}
[lang=en] .detailed-business__nav-wrapper { padding-right: 1.0417vw }
@media screen and (min-width: 768px)and (max-width: 1024px) {
[lang=en] .detailed-business__nav-wrapper { padding-right: 1.9531vw; width: calc(100% - 3.125vw) }
}
@media screen and (max-width: 767px) {
.detailed-business .is-mobile-zero { padding: 0 }
.detailed-business__tit { padding-left: 4.1026vw; margin-bottom: 0 }
.detailed-business__wrap { position: relative; border-top: 0 }
.detailed-business__nav { position: relative; background-color: #fff; padding: 0; z-index: 1; border-bottom: 1px solid #e0e0e0; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none }
.detailed-business__nav::-webkit-scrollbar {
display:none
}
.detailed-business__nav-wrapper { position: relative; width: 100%; padding-top: 0; border-right: 0; z-index: 11 }
.detailed-business__nav ul { display: flex; gap: 1.875em; white-space: nowrap }
.detailed-business__nav li { margin-bottom: 0 }
.detailed-business__nav li:first-child { padding-left: 4.1026vw }
.detailed-business__nav li:last-child { padding-right: 4.1026vw }
.detailed-business__nav li a { position: relative; padding-top: 5.2151238592vw; padding-bottom: .3125em }
.detailed-business__nav li a::before { position: absolute; width: 100%; height: 0; top: auto; bottom: 0; left: 0 }
.detailed-business__nav li.active { z-index: 1 }
.detailed-business__nav li.active a::before { width: 100%; height: 2px }
.detailed-business .desc { margin-top: .9411764706em; margin-bottom: 1.6rem }
.detailed-business__items { padding-top: 0; padding-left: 4.1026vw; padding-right: 4.1026vw }
.detailed-business .features { gap: 1.2rem }
.detailed-business .features .feature { gap: 2.4rem; padding: 2rem }
.detailed-business .features .feature__tit { margin-bottom: .75em }
}
body[direction=up] .detailed-business__nav.is-pin { transform: translateY(calc(var(--header-height) + var(--header-top-height))) }
@media screen and (max-width: 1024px) {
body[direction=up] .detailed-business__nav.is-pin { transform: translateY(calc(var(--header-height) + var(--header-top-height))) }
}
.contact-us-form { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10002; pointer-events: none }
.contact-us-form.active { pointer-events: initial }
.contact-us-form .dimmed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.4); opacity: 0 }
.contact-us-form__container { position: absolute; right: 0; top: 0; width: max(28.125vw, 42rem); height: 100%; transform: translate3d(100%, 0, 0) }
.contact-us-form__content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; height: 100%; color: #fff; padding: 4.1666666667vw 3.6458333333vw 0; border-top-left-radius: var(--br-2); border-bottom-left-radius: var(--br-2); overflow-y: auto; overflow-x: hidden; background-color: #004098; display: flex; flex-direction: column }
.contact-us-form .btn-close { display: inline-flex; justify-content: center; align-items: center; position: absolute; top: 1.25vw; right: 1.25vw; width: max(2.0833333333vw, 4rem); height: max(2.0833333333vw, 4rem); border-radius: 50%; background-color: #002f70; padding: 0; z-index: 1; cursor: pointer }
.contact-us-form .btn-close svg { width:max(.625vw, 1.2rem);
height:max(.625vw, 1.2rem)
}
.contact-us-form .form-content { position: relative; display: flex; flex: 1 }
.contact-us-form .form-content .step--2 { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.contact-us-form .form-content .step--2 .form { height: 100% }
.contact-us-form__tit { margin-bottom: 1em }
.contact-us-form .business-form-label { display: block; font-size:max(.78125vw, 1.4rem);
margin-bottom: .5em }
.contact-us-form .business-form-label .star { color: #ff6258; margin-left: .2em }
.contact-us-form input[type=number], .contact-us-form input[type=text], .contact-us-form input[type=email] { width: 100%; background-color: rgba(255,255,255,.1); border-color: rgba(0,0,0,0); color: #fff }
.contact-us-form input[type=number]::placeholder, .contact-us-form input[type=text]::placeholder, .contact-us-form input[type=email]::placeholder {
color:rgba(255,255,255,.4)
}
.contact-us-form input[type=number]:disabled, .contact-us-form input[type=text]:disabled, .contact-us-form input[type=email]:disabled { background: rgba(0,47,112,.5); color: rgba(255,255,255,.4) }
.contact-us-form select { width: 100%; color: #fff; background: rgba(255,255,255,.1) url("/images/ksob_arrow_under_invert.svg") calc(100% - 16px) center/16px no-repeat }
.contact-us-form select option { background: #fff; color: #000; padding: 3px 0 }
.contact-us-form select:disabled { background: rgba(0,47,112,.5); color: rgba(255,255,255,.4); opacity: 1 }
.contact-us-form input[type=text], .contact-us-form input[type=email], .contact-us-form textarea, .contact-us-form select { border: 0 }
.contact-us-form li { position: relative }
.contact-us-form li+li { margin-top: max(1.25vw, 2rem) }
.contact-us-form form { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 2.7083333333vw }
.contact-us-form small { display: block; font-size:max(.6770833333vw, 1.2rem);
margin-top: .9230769231em; line-height: 1.4; color: #ddd }
.contact-us-form .textbox {
margin-top:.5208333333vw; padding: 1.25vw; background-color: rgba(255,255,255,.1); border-radius:.5208333333vw;
line-height: 1.4; max-height: max(8.75vw, 18rem); overflow-y: auto; color: #ddd }
.contact-us-form .textbox p+h3 { margin-top: .8571428571em }
.contact-us-form .textarea-wrap { position: relative; width: 100%; align-items: flex-start }
.contact-us-form .textarea-wrap textarea { width: 100%; padding: 1.25em 1.25em 4.125em 1.25em; height: 11.5em; background-color: rgba(255,255,255,.1); color: #fff }
.contact-us-form .textarea-wrap textarea::placeholder {
color:rgba(255,255,255,.4)
}
@media screen and (max-width: 767px) {
.contact-us-form .textarea-wrap textarea { height: 18em }
}
.contact-us-form .textarea-wrap .count { display: block; position: absolute; right: 1.25em; bottom: 1.25em; color: rgba(255,255,255,.4) }
.contact-us-form .textarea-wrap .count em { color: #fff }
@media screen and (max-width: 767px) {
.contact-us-form__container { width: 100% }
.contact-us-form__content { border-radius: 0; padding: 4rem 2rem 0 }
.contact-us-form .btn-close { top: 3rem; right: 3rem; width: 3.2rem; height: 3.2rem }
.contact-us-form .btn-close svg { width: 1rem; height: 1rem }
.contact-us-form .form { gap: 3.8rem; padding-bottom: 4rem }
.contact-us-form .textbox {
margin-top:.8rem; padding: 2rem; border-radius: 10px; color: #ddd }
}
.func { position: relative; padding-bottom: 4.1666666667vw }
.func--2 { position: absolute; padding-bottom: 0; bottom: 4.1666666667vw; left: 0; width: 100% }
.func .btn-wrap { width: 100%; display: flex; gap: 10px }
.func .btn-wrap .btn-form { flex: 1; color: #fff; height: max(3.125vw, 4.8rem); display: flex; justify-content: center; align-items: center; background-color: #002f70; border-radius: var(--br-1); font-size:max(.9375vw, 15px);
cursor: pointer }
.sector-dummy { height: 100vh; width: 100%; position: relative }
.sector-dummy::before { content: "DUMMY"; font-size: 105px; font-weight: 600; color: rgba(0,0,0,.2); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
.sector-dummy:nth-child(6n+1) { background: #66f }
.sector-dummy:nth-child(6n+2) { background: #e600e6 }
.sector-dummy:nth-child(6n+3) { background: #ff6 }
.sector-dummy:nth-child(6n+4) { background: #ff6 }
.sector-dummy:nth-child(6n+5) { background: #f66 }
.sector-dummy:nth-child(6n+6) { background: #ff6 }
.sector-dummy:nth-child(6n+7) { background: #66f }
.sector-dummy:nth-child(6n+8) { background: #00e600 }
.sector-dummy:nth-child(6n+9) { background: #f66 }
.sector-dummy:nth-child(6n+10) { background: #e600e6 }
.sector-dummy:nth-child(6n+11) { background: #e600e6 }
.sector-dummy:nth-child(6n+12) { background: #00e600 }
.sector-dummy:nth-child(6n+13) { background: #ffc966 }
.sector-dummy:nth-child(6n+14) { background: #f66 }
.sector-dummy:nth-child(6n+15) { background: #ffc966 }
.sector-dummy:nth-child(6n+16) { background: #ffc966 }
.sector-dummy:nth-child(6n+17) { background: #ff6 }
.sector-dummy:nth-child(6n+18) { background: #66f }
.sector-dummy:nth-child(6n+19) { background: #ffc966 }
.sector-dummy:nth-child(6n+20) { background: #66f }
.sector-dummy:nth-child(1) { background: #fff }
.sector-dummy--main::before { content: "MAIN DUMMY" }
body.is-init { position: fixed; overflow: hidden; width: 100%; height: 100% }
.wrapper { --cm-margin: max(1.5625vw, 20px);
--sat: env(safe-area-inset-top);
--sab: env(safe-area-inset-bottom)
}
@media screen and (max-width: 767px) {
.wrapper { --cm-margin: 4.1026vw
}
}
.main-intro { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999 }
.main-intro-tit { position: relative }
.main-intro-tit span { display: block; position: relative; overflow: hidden; text-align: center }
.main-intro-tit span::before { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; z-index: 2; background-color: #fff }
.main-intro-tit span em { display: inline-block }
.main-intro-tit[pc-ver] img { width: min(46.3542vw, 890px) }
.main-intro-tit[m-ver] { display: none }
.main-intro-tit[m-ver] img { width: max(27.3794vw, 210px) }
.main-intro-tit[m-ver] span:last-child { margin-top: 1.1rem }
.main-intro-tit[m-ver] span:last-child img { width: max(26.4668vw, 203px) }
@media screen and (max-width: 1024px) {
.main-intro-tit[pc-ver] { display: none }
.main-intro-tit[m-ver] { display: block }
}
.main-intro[hide] { display: none }
.main-kv-container { position: relative; height: calc(100vh - var(--sab) - var(--header-total-height) - var(--cm-margin)); height:calc(var(--vh, 1vh)*100 - var(--sab) - var(--header-total-height) - var(--cm-margin));
background-color: #fff; margin: var(--header-total-height) auto var(--cm-margin) }
.main-kv-container[active] { height: calc(var(--height) - var(--sab) - var(--header-total-height) - var(--cm-margin)) }
.main-kv-container #mainKv { position: relative; width: 100%; height: 100%; box-sizing: border-box; background-color: #fff; clip-path: inset(100% var(--cm-margin) 0% var(--cm-margin) round var(--br-2)); z-index: 2; transition: clip-path cubic-bezier(0.23, 1, 0.32, 1) 1750ms 1000ms; -webkit-transition: clip-path cubic-bezier(0.23, 1, 0.32, 1) 1750ms 1000ms; will-change: clip-path; -webkit-will-change: clip-path; isolation: isolate; -webkit-isolation: isolate }
.main-kv-container #mainKv .swiper-slide { position: relative; overflow: hidden }
.main-kv-container #mainKv .swiper-slide .kv-txt-motion .motion-wrap { display: block; overflow: hidden }
.main-kv-container #mainKv .swiper-slide .kv-txt-motion .motion-wrap span { display: block; will-change: transform; transform: translateY(105%); transition: transform cubic-bezier(0.23, 1, 0.32, 1) 3000ms 600ms }
.main-kv-container #mainKv .swiper-slide a[href="javascript:void(0);"] { cursor: initial }
.main-kv-container #mainKv .main-kv-swiper { height: 100%; transition: border-radius cubic-bezier(0.23, 1, 0.32, 1) 1750ms }
.main-kv-container #mainKv .main-kv-swiper .main-kv-item { position: relative; height: 100% }
.main-kv-container #mainKv .main-kv-swiper .main-kv-item .item-inner { position: relative; overflow: hidden; height: 100% }
.main-kv-container #mainKv .main-kv-swiper .main-kv-item .bg { position: relative; height: 100% }
.main-kv-container #mainKv .main-kv-swiper .main-kv-item .bg:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.25) }
.main-kv-container #mainKv .main-kv-swiper .main-kv-item .bg .bg-inner { height: 100%; will-change: transform; transition: transform cubic-bezier(0.23, 1, 0.32, 1) 3500ms; transform: scale(1.4) }
.main-kv-container #mainKv .main-kv-swiper .main-kv-item .bg img, .main-kv-container #mainKv .main-kv-swiper .main-kv-item .bg video { display: block; width: 100%; height: 100%; object-fit: cover }
.main-kv-container #mainKv .main-kv-swiper .main-kv-item .bg video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
.main-kv-container #mainKv .main-kv-swiper .main-kv-item .tit-box { position: absolute; bottom: calc(2.3958333333vw + 4.2rem); left: var(--cm-margin); right: var(--cm-margin); margin: 0 3.3333333333vw; color: #fff }
.main-kv-container #mainKv .main-kv-swiper .main-kv-item .tit-box .main-kv-tit { margin: .2857142857em 0 .7142857143em 0; max-width: 58.0208vw }
@media screen and (max-width: 1024px) {
.main-kv-container #mainKv .main-kv-swiper .main-kv-item .tit-box .main-kv-tit { max-width: 65.332vw }
}
@media screen and (max-width: 767px) {
.main-kv-container #mainKv .main-kv-swiper .main-kv-item .tit-box .main-kv-tit { max-width: unset }
}
@media screen and (max-width: 1024px) {
.main-kv-container #mainKv .main-kv-swiper .main-kv-item .tit-box { bottom: auto; top: 12.4rem; margin: 0 4rem }
}
@media screen and (max-width: 767px) {
.main-kv-container #mainKv .main-kv-swiper .main-kv-item .tit-box { top: 7.2rem; margin: 0 2.4rem }
.main-kv-container #mainKv .main-kv-swiper .main-kv-item .tit-box .main-kv-sub-tit { margin-top: 1.4666666667em }
}
.main-kv-container #mainKv .main-kv-pagination { position: absolute; bottom: 2.3958333333vw; left: var(--cm-margin); margin: 0 3.3333333333vw; display: flex; align-items: center; box-sizing: border-box; z-index: 9 }
.main-kv-container #mainKv .main-kv-pagination .circle-box { position: relative; padding: .7333333333em .8em .6666666667em .8666666667em; width: auto; height: auto; background: none; margin: 0; font-size:max(.7813vw, 12px);
font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; color: #fff; opacity: 1 }
.main-kv-container #mainKv .main-kv-pagination .circle-box svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; opacity: 0 }
.main-kv-container #mainKv .main-kv-pagination .circle-box svg .circle { transform: rotate(-90deg); transform-origin: center; stroke-dasharray: var(--stroke-dasharray); stroke-dashoffset: var(--stroke-dashoffset) }
.main-kv-container #mainKv .main-kv-pagination .circle-box .num { display: block; text-align: center }
.main-kv-container #mainKv .main-kv-pagination .circle-box.swiper-pagination-bullet-active svg { opacity: 1 }
.main-kv-container #mainKv .main-kv-pagination .circle-box.swiper-pagination-bullet-active svg .circle { animation: identifier var(--animation-time) ease-in-out forwards }
.main-kv-container #mainKv .main-kv-pagination .circle-box:first-child { margin-left:.4rem
}
@keyframes identifier { 100% {
stroke-dashoffset:0
}
}
@media screen and (min-width: 1025px) {
.main-kv-container #mainKv .main-kv-pagination .circle-box { margin-right: .4em }
}
@media screen and (max-width: 1024px) {
.main-kv-container #mainKv .main-kv-pagination { bottom: auto; top: 6rem; margin: 0 4rem }
.main-kv-container #mainKv .main-kv-pagination .circle-box { font-size: 1.2rem; padding: .8333333333em .9166666667em .75em 1em }
}
@media screen and (max-width: 767px) {
.main-kv-container #mainKv .main-kv-pagination { top: 3.6rem; margin: 0 2.4rem }
}
.main-kv-container #mainKv .main-kv-arrow { display: none }
@media screen and (max-width: 767px) {
.main-kv-container #mainKv .main-kv-arrow { opacity: 0; visibility: hidden; transition-delay: 1500ms; display: block; width: 24px; height: 42px; left: 40px; bottom: 18px; position: absolute; z-index: 100; transition: all cubic-bezier(0.23, 1, 0.32, 1) 700ms 2000ms }
.main-kv-container #mainKv .main-kv-arrow svg { width: 100%; display: block }
}
.main-kv-container #mainKv[active] { clip-path: inset(0% var(--cm-margin) round var(--br-2)); -webkit-clip-path: inset(0% var(--cm-margin) round var(--br-2)) }
.main-kv-container #mainKv[active] .main-kv-arrow { opacity: 1; visibility: visible }
.main-kv-container #mainKv[active] .swiper-slide-active .kv-txt-motion .motion-wrap span { transform: translateY(0) }
.main-kv-container #mainKv[active] .swiper-slide-active .bg .bg-inner { transition-delay: 0s; transform: scale(1) }
.main-kv-container #mainKv[data-nodelay=true] { transition-delay: 0s; -webkit-transition-delay: 0s; transition-timing-function: 1s; -webkit-transition-timing-function: 1s }
.main-kv-container #mainKv[data-wide=true] { clip-path: inset(0% round 0%); -webkit-clip-path: inset(0% round 0%) }
.main-kv-container #mainKv[data-wide=false] { clip-path: inset(0% var(--cm-margin) round var(--br-2)); -webkit-clip-path: inset(0% var(--cm-margin) round var(--br-2)) }
.main-kv-container #mainKv.has-item-only-one .main-kv-swiper .tit-box { margin: 0 4.1666666667vw; bottom: 3.125vw }
.main-kv-container #mainKv.has-item-only-one .main-kv-swiper .tit-box .main-kv-tit { margin-bottom: 0 }
@media screen and (max-width: 1024px) {
.main-kv-container #mainKv.has-item-only-one .main-kv-swiper .tit-box { top: 8rem; margin: 0 4rem }
}
@media screen and (max-width: 767px) {
.main-kv-container #mainKv.has-item-only-one .main-kv-swiper .tit-box { top: 4.6rem; margin: 0 2.4rem }
.main-kv-container #mainKv.has-item-only-one .main-kv-swiper .tit-box .main-kv-sub-tit { margin-top: 0 }
}
.main-kv-container .main-kv-news { display: flex; background-color: rgba(0,64,152,.2); position: relative }
.main-kv-container .main-kv-news-container { position: absolute; margin-right: 1.5625vw; right: var(--cm-margin); bottom: 1.5625vw; width: 22.5520833333vw; z-index: 2; pointer-events: none }
.main-kv-container .main-kv-news-container .main-kv-news-wrap { position: relative }
.main-kv-container .main-kv-news-container .main-kv-news-wrap .go-to-news-btn { position: absolute; right: calc(100% - 35px); bottom: calc(3.125vw + 35px); visibility: hidden; width: 107.042px }
.main-kv-container .main-kv-news-container .main-kv-news-wrap .go-to-news-btn span { display: inline-block; background-color: #004098; color: #fff; padding: 1.2rem 1.6rem; border-radius:.7rem .7rem 0rem 0rem;
font-size: 1.4rem; letter-spacing: -0.01em; font-weight: 500; text-wrap: nowrap }
.main-kv-container .main-kv-news-container .main-kv-news-wrap .open-btn { pointer-events: initial; position: absolute; bottom: 0; right: 0; display: inline-flex; padding: 1.3020833333vw 2.0833333333vw 1.3020833333vw 1.7708333333vw; align-items: center; gap: 2rem; border-radius: 5rem; background-color: #004098; color: #fff; font-size:max(.8333vw, 1.4rem);
font-weight: 600; cursor: pointer; visibility: hidden; opacity: 0 }
.main-kv-container .main-kv-news-container .main-kv-news-wrap .open-btn svg { width: 1.25vw; height: 1.25vw }
.main-kv-container .main-kv-news-container .main-kv-news-wrap[active] { pointer-events: initial }
.main-kv-container .main-kv-news .close-box { width: 2.7604166667vw; border-right: 1px solid #e0e0e0 }
.main-kv-container .main-kv-news .close-box .close-btn {
margin:1.25vw 0 0 .7291666667vw; padding: 0; cursor: pointer }
.main-kv-container .main-kv-news .close-box .close-btn svg { width: 1.25vw; height: 1.25vw }
.main-kv-container .main-kv-news .close-box .close-btn svg.mobile { display: none }
.main-kv-container .main-kv-news-swiper-wrap { width: calc(100% - 2.7604166667vw) }
.main-kv-container .main-kv-news-swiper-wrap .inner-box { padding: 1.0416666667vw 1.0416666667vw 1.4583333333vw; box-sizing: border-box }
.main-kv-container .main-kv-news-swiper, .main-kv-container .main-kv-news-swiper .img-wrap {
border-radius:.8rem; overflow: hidden }
.main-kv-container .main-kv-news-swiper .swiper-slide .img-item { overflow: hidden }
.main-kv-container .main-kv-news-swiper .swiper-slide .img-wrap { position: relative; aspect-ratio: 340/230 }
.main-kv-container .main-kv-news-swiper .swiper-slide .img-wrap img { width: 100%; height: 100%; object-fit: cover }
.main-kv-container .main-kv-news-txt-swiper .txt-box { padding: 1.4583333333vw 1rem 1.4583333333vw 0; box-sizing: border-box; color: #000 }
.main-kv-container .main-kv-news-txt-swiper .txt-box .tit { display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.main-kv-container .main-kv-news-txt-swiper .txt-box .txt { display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-top: .7142857143em; max-height: 5em; color: #333 }
.main-kv-container .main-kv-news .main-kv-news-arrow { display: flex; border-top: 1px solid #e0e0e0 }
.main-kv-container .main-kv-news .main-kv-news-arrow button { width: 50%; height: 3.125vw; padding: 0; cursor: pointer }
.main-kv-container .main-kv-news .main-kv-news-arrow button:last-child { border-left: 1px solid #e0e0e0 }
.main-kv-container .main-kv-news .main-kv-news-arrow button svg { width: 1.4583333333vw; height:.8333333333vw
}
.main-kv-container .main-kv-news .main-kv-news-arrow button svg.mobile { display: none }
@media screen and (max-width: 1366px) {
.main-kv-container .main-kv-news-container { width: 31.2rem }
.main-kv-container .main-kv-news-container .main-kv-news-wrap .go-to-news-btn { right: calc(100% - 2.6rem); bottom: 7.1rem; width: 78.958px }
.main-kv-container .main-kv-news-container .main-kv-news-wrap .go-to-news-btn span { font-size: 1.1rem; padding:.7rem 1rem
}
.main-kv-container .main-kv-news-container .main-kv-news-wrap .open-btn { padding: 2rem 2.8rem 2rem 2.4rem; gap: 1.6rem; font-size: 1.4rem }
.main-kv-container .main-kv-news-container .main-kv-news-wrap .open-btn svg { width: 1.8rem; height: 1.8rem }
.main-kv-container .main-kv-news-swiper-wrap { width: calc(100% - 4rem) }
.main-kv-container .main-kv-news-swiper-wrap .inner-box { padding: 1.6rem 1.6rem 2rem }
.main-kv-container .main-kv-news .close-box { width: 4rem }
.main-kv-container .main-kv-news .close-box .close-btn { margin: 2rem 0 0 1rem }
.main-kv-container .main-kv-news .close-box .close-btn svg { width: 2rem; height: 2rem }
.main-kv-container .main-kv-news .main-kv-news-arrow button { height: 4.6rem }
.main-kv-container .main-kv-news .main-kv-news-arrow button svg { width: max(1.25vw, 2.4rem); height:max(.7291666667vw, 1.4rem)
}
}
@media screen and (max-width: 1024px) {
.main-kv-container .main-kv-news-container { width: 39.2rem; margin-right: 2rem; bottom: 2rem }
.main-kv-container .main-kv-news-container .main-kv-news-wrap .open-btn { padding: 2.2rem 3rem 2.2rem 2.6rem }
.main-kv-container .main-kv-news-container .main-kv-news-arrow button svg { width: max(1.1458333333vw, 2.2rem); height:max(.7291666667vw, 1.4rem)
}
.main-kv-container .main-kv-news-container .main-kv-news-arrow button svg .mobile { display: block }
.main-kv-container .main-kv-news-container .main-kv-news-arrow button svg .desktop { display: none }
.main-kv-container .main-kv-news-txt-swiper .txt-box { padding: 2rem 0 }
}
@media screen and (max-width: 767px) {
.main-kv-container .main-kv-news-container { width: 27.6rem; margin-right: 1rem; bottom: 1rem }
.main-kv-container .main-kv-news-container .main-kv-news-wrap .go-to-news-btn { right: calc(100% - 3.1rem); bottom: 6.8rem; width: 82.958px }
.main-kv-container .main-kv-news-container .main-kv-news-wrap .go-to-news-btn span { padding:.5rem 1.2rem
}
.main-kv-container .main-kv-news-container .main-kv-news-wrap .open-btn { padding: 1.8rem 2.6rem 1.8rem 2.2rem; gap: 1.4rem; border-radius: 3rem; font-size: 1.4rem }
.main-kv-container .main-kv-news-swiper-wrap { width: calc(100% - 3.6rem) }
.main-kv-container .main-kv-news-swiper-wrap .inner-box { padding: 1.2rem 1.2rem 1.4rem }
.main-kv-container .main-kv-news .close-box { width: 3.6rem }
.main-kv-container .main-kv-news .close-box .close-btn { margin: 2rem 0 0 1.1rem }
.main-kv-container .main-kv-news .close-box .close-btn svg { width: 1.8rem; height: 1.8rem }
.main-kv-container .main-kv-news .close-box .close-btn svg.desktop { display: none }
.main-kv-container .main-kv-news .close-box .close-btn svg.mobile { display: block }
.main-kv-container .main-kv-news-txt-swiper .txt-box { padding: 1.4rem 0 }
.main-kv-container .main-kv-news .main-kv-news-arrow button { height: 3.7rem }
}
@keyframes markMove { 0% {
transform:translateY(0)
}
75% {
transform:translateY(-30%)
}
100% {
transform:translateY(0)
}
}
.main-kv-news-container .main-kv-news-wrap .go-to-news-btn { transform: rotate(-90deg) translateY(100%); -webkit-transform: rotate(-90deg) translateY(100%); will-change: transform; isolation: isolate; opacity: 0; visibility: hidden; transition: all cubic-bezier(0.23, 1, 0.32, 1) 0s 0ms }
.main-kv-news-container .main-kv-news-wrap .open-btn { transition: all cubic-bezier(0.23, 1, 0.32, 1) 700ms 2000ms }
.main-kv-news-container .main-kv-news-wrap .main-kv-news { transition: all cubic-bezier(0.23, 1, 0.32, 1) 1250ms; opacity: 0; visibility: hidden; clip-path: inset(var(--btn-h) 0% 0% var(--btn-w) round 50px) }
.main-kv-news-container .main-kv-news-wrap .main-kv-news-swiper { clip-path: inset(0% 0% 0% 30% round 0.8rem); opacity: 0; transition: all cubic-bezier(0.23, 1, 0.32, 1) 1000ms 700ms; will-change: clip-path, opacity }
.main-kv-news-container .main-kv-news-wrap .main-kv-news-txt-swiper { transform: translateX(20%); opacity: 0; transition: all cubic-bezier(0.23, 1, 0.32, 1) 1000ms 900ms; will-change: transform, opacity }
.main-kv-news-container .main-kv-news-wrap[active] .go-to-news-btn { transform: rotate(-90deg) translateY(0%); -webkit-transform: rotate(-90deg) translateY(0%); opacity: 1; visibility: visible; transition-delay: 1200ms; transition-duration: 700ms }
.main-kv-news-container .main-kv-news-wrap[active] .open-btn { opacity: 0; visibility: hidden }
.main-kv-news-container .main-kv-news-wrap[active] .main-kv-news { clip-path: inset(0% 0% 0% 0% round var(--br-4)); background-color: #fff; opacity: 1; visibility: visible }
.main-kv-news-container .main-kv-news-wrap[active] .main-kv-news-swiper { clip-path: inset(0% 0% 0% 0% round 0.8rem); opacity: 1; visibility: visible }
.main-kv-news-container .main-kv-news-wrap[active] .main-kv-news-txt-swiper { transform: translateX(0); opacity: 1; visibility: visible }
.main-kv-news-container .main-kv-news-wrap[intro] .main-kv-news { transition-delay: 1000ms }
.main-kv-news-container .main-kv-news-wrap[intro] .go-to-news-btn { transition-delay: 1500ms }
.main-kv-news-container .main-kv-news-wrap[intro] .open-btn { opacity: 0; visibility: hidden; transition-delay: 1500ms }
#mainKv:not([active])+.main-kv-news-container .open-btn { opacity: 0; visibility: hidden }
#mainKv[active]+.main-kv-news-container .open-btn { opacity: 1; visibility: visible }
.main-cm-tit-box .txt-motion .motion-wrap { overflow: hidden }
.main-cm-category { overflow: hidden; font-size: 1.0416666667vw; margin-bottom: 1em }
@media screen and (max-width: 1024px) {
.main-cm-category { font-size: 1.2rem }
}
#mainAboutCon { margin-bottom: min(3.0208333333vw, 5.8rem) }
#mainAboutCon .main-about-feature { margin-top: min(8.0208333333vw, 15.4rem) }
#mainAboutCon .main-about-feature-list { display: flex; gap: 1.6666666667vw }
#mainAboutCon .main-about-feature-list.mobile { display: none }
#mainAboutCon .main-about-feature-list li { height: 100% }
#mainAboutCon .main-about-feature-list li .item { position: relative; border-radius: var(--br-3); overflow: hidden }
#mainAboutCon .main-about-feature-list li .item .bg { position: relative; z-index: 1 }
#mainAboutCon .main-about-feature-list li .item .bg img { width: 100%; height: 100%; object-fit: cover; display: block }
#mainAboutCon .main-about-feature-list li .item .txt-box { position: absolute; left: 1.5625vw; bottom: 1.875vw; z-index: 2 }
#mainAboutCon .main-about-feature-list li .item .txt-box .txt { color: #fff; word-break: keep-all }
@media screen and (max-width: 767px) {
#mainAboutCon .main-about-feature-list li .item .txt-box { left: 16px; right: 16px; bottom: 20px }
}
@media screen and (min-width: 768px) {
#mainAboutCon .main-about-feature-list li:nth-child(1) { margin-top:calc(-1*min(9.7395833333vw, 18.7rem))
}
#mainAboutCon .main-about-feature-list li:nth-child(2) { margin-top:calc(-1*min(4.9479166667vw, 9.5em))
}
#mainAboutCon .main-about-feature-list li:nth-child(1) { order: 2 }
#mainAboutCon .main-about-feature-list li:nth-child(2) { order: 3 }
#mainAboutCon .main-about-feature-list li:nth-child(3) { order: 1 }
}
@media screen and (max-width: 1024px) {
#mainAboutCon .main-about-feature { margin-top: 13.8rem }
#mainAboutCon .main-about-feature-list { gap: 1.2rem }
#mainAboutCon .main-about-feature-list li:nth-child(1) { margin-top: -12rem }
#mainAboutCon .main-about-feature-list li:nth-child(2) { margin-top: -6.8rem }
}
@media screen and (max-width: 767px) {
#mainAboutCon .main-about-feature { margin-top: 0 }
#mainAboutCon .main-about-feature-list { flex-wrap: wrap; flex-direction: row-reverse }
#mainAboutCon .main-about-feature-list.desktop { display: none }
#mainAboutCon .main-about-feature-list.mobile { display: flex }
#mainAboutCon .main-about-feature-list li {
width:calc(50% - .6rem); margin-top: 0 !important }
#mainAboutCon .main-about-feature-list li:nth-child(1) { order: 2; transform: translateY(50%) }
#mainAboutCon .main-about-feature-list li:nth-child(2) { order: 1 }
#mainAboutCon .main-about-feature-list li:nth-child(3) { order: 3 }
}
@media screen and (max-width: 1024px) {
#mainAboutCon { margin-bottom: 0 }
#mainAboutCon .main-about-con { justify-content: flex-end }
}
#mainGlobalCon { position: relative; background-color: #004098; overflow: hidden; z-index: 3000 }
#mainGlobalCon .container-main { position: relative }
#mainGlobalCon .main-cm-tit-box .category { background-color: #003277 }
#mainGlobalCon .main-cm-tit-box .main-cm-tit { color: #fff }
#mainGlobalCon .main-cm-tit-box .main-cm-tit[m-ver] { display: none }
@media screen and (max-width: 767px) {
#mainGlobalCon .main-cm-tit-box .main-cm-tit[pc-ver] { display: none }
#mainGlobalCon .main-cm-tit-box .main-cm-tit[m-ver] { display: block }
}
#mainGlobalCon .main-global-top { position: absolute; left: 0; width: 100%; z-index: 10 }
#mainGlobalCon .main-global-count-list { display: flex }
#mainGlobalCon .main-global-count-list li { position: relative; padding: 0 .3125em 0 .3125em }
[lang=en] #mainGlobalCon .main-global-count-list li { display: flex; flex-direction: column; justify-content: space-between }
#mainGlobalCon .main-global-count-list li .line { position: absolute; top: 50%; left: 0; width: 1px; height: 9rem; transform: translateY(-50%); background-color: rgba(255,255,255,.5) }
#mainGlobalCon .main-global-count-list li:first-child .line { display: none }
#mainGlobalCon .main-global-count-list li:first-child, #mainGlobalCon .main-global-count-list li:first-child .number { padding-left: 0 }
#mainGlobalCon .main-global-count-list .motion-wrap { overflow: hidden }
#mainGlobalCon .main-global-count-list .motion-wrap .txt-motion-inner { display: block }
#mainGlobalCon .main-global-count-list .tit { color: rgba(255,255,255,.85); text-transform: uppercase }
#mainGlobalCon .main-global-count-list .tit span { display: block }
[lang=en] #mainGlobalCon .main-global-count-list .tit { white-space: pre-line }
@media screen and (max-width: 767px) {
[lang=en] #mainGlobalCon .main-global-count-list .tit { white-space: initial }
}
#mainGlobalCon .main-global-count-list .num { position: relative; color: #fff }
#mainGlobalCon .main-global-count-list .num-box { position: relative; margin-top: .0625em }
#mainGlobalCon .main-global-count-list .num-box .motion-wrap { position: absolute; top: 0; left: 0; width: 1.2em; height: 100%; overflow: hidden }
#mainGlobalCon .main-global-count-list .num-box[no-motion] .motion-wrap { position: relative; width: 100% }
#mainGlobalCon .main-global-count-list .num-box[no-motion] .motion-wrap .num { position: relative; display: block }
#mainGlobalCon .main-global-count-list .num-hidden { opacity: 0 }
#mainGlobalCon .main-global-count-list .num:not(.num-hidden) { position: absolute; top: 0 }
@media screen and (max-width: 1366px) {
#mainGlobalCon .main-global-count-list li { padding: 0 .4545454545em 0 .4545454545em }
#mainGlobalCon .main-global-count-list li .line { height: 6.4rem }
}
@media screen and (max-width: 767px) {
#mainGlobalCon .main-global-count-list li .num-box { margin-top: .0666666667em }
}
#mainGlobalCon .main-global-bg .bg-box { position: relative; width: 100%; height: 100% }
@media screen and (max-width: 767px) {
[lang=en] #mainGlobalCon .main-global-bg .bg-box { margin-top: -8rem }
}
#mainGlobalCon .main-global-bg #seq-canvas { position: relative; aspect-ratio: 3840/2560; left: 50%; transform: translateX(-50%); height: 100vh; width: auto }
#mainGlobalCon .main-global-bg #seq-canvas::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0) }
#mainGlobalCon .main-global-slide-box { position: absolute; bottom: 240px; left: 0; width: 100% }
#mainGlobalCon .main-global-slide-box .main-list-top-tit-box { margin-bottom: 2.0833333333vw }
#mainGlobalCon .main-global-slide-box .main-list-top-tit-box .tit { color: #fff }
#mainGlobalCon .main-global-slide-box .main-list-top-tit-box .unit { display: flex; align-items: center }
@media screen and (max-width: 1366px) {
#mainGlobalCon .main-global-slide-box .main-list-top-tit-box { margin-bottom: 2.8rem }
}
@media screen and (max-width: 767px) {
#mainGlobalCon .main-global-slide-box .main-list-top-tit-box { display: flex; margin-bottom: 2.4rem }
#mainGlobalCon .main-global-slide-box .main-list-top-tit-box .unit .btn { display: none }
}
#mainGlobalCon .main-global-slide-box .main-global-swiper { overflow: visible }
#mainGlobalCon .main-global-slide-box .main-global-swiper-arrow { margin-left: 2rem }
#mainGlobalCon .main-global-slide-box .main-global-swiper .swiper-slide { height: auto }
@media screen and (max-width: 767px) {
#mainGlobalCon .main-global-slide-box .main-global-swiper .swiper-slide { max-width: 25.6rem }
}
@media screen and (min-width: 768px) {
#mainGlobalCon .main-global-slide-box .main-global-swiper .swiper-slide:nth-child(1) .main-global-slide-item { transition-delay:calc(0.1s * 1)
}
#mainGlobalCon .main-global-slide-box .main-global-swiper .swiper-slide:nth-child(2) .main-global-slide-item { transition-delay:calc(0.1s * 2)
}
#mainGlobalCon .main-global-slide-box .main-global-swiper .swiper-slide:nth-child(3) .main-global-slide-item { transition-delay:calc(0.1s * 3)
}
#mainGlobalCon .main-global-slide-box .main-global-swiper .swiper-slide:nth-child(4) .main-global-slide-item { transition-delay:calc(0.1s * 4)
}
#mainGlobalCon .main-global-slide-box .main-global-swiper .swiper-slide:nth-child(5) .main-global-slide-item { transition-delay:calc(0.1s * 5)
}
#mainGlobalCon .main-global-slide-box .main-global-slide-item { transform: translateX(150%); visibility: hidden; opacity: 0; transition: cubic-bezier(0.23, 1, 0.32, 1) 1s; transition-property: transform, opacity }
#mainGlobalCon .main-global-slide-box.active .main-global-slide-item { transform: translateX(0%); visibility: visible; opacity: 1 }
}
#mainGlobalCon .main-global-slide-item { overflow: hidden; height: 100% }
#mainGlobalCon .main-global-slide-item a { display: block; height: 100%; background: #003580; padding: 1.6666666667vw; backdrop-filter: blur(15px); transition: 600ms ease }
#mainGlobalCon .main-global-slide-item a:hover { background: #002e6d }
#mainGlobalCon .main-global-slide-item a:hover .img-wrap img { transform: scale(1.1) }
@media screen and (max-width: 1366px) {
#mainGlobalCon .main-global-slide-item { border-radius: 1.2rem }
#mainGlobalCon .main-global-slide-item a { padding: 1.09375vw }
}
@media screen and (max-width: 1024px) {
#mainGlobalCon .main-global-slide-item { border-radius: 1.0411458333vw }
#mainGlobalCon .main-global-slide-item a { padding: 2.4rem }
}
@media screen and (max-width: 767px) {
#mainGlobalCon .main-global-slide-item { border-radius: 1.2rem }
#mainGlobalCon .main-global-slide-item a { padding: 2rem }
}
#mainGlobalCon .main-global-slide-item .inner-box { height: 100% }
#mainGlobalCon .main-global-slide-item .inner-box dl { display: flex; gap: 2.4rem }
#mainGlobalCon .main-global-slide-item .inner-box dl dt { width: 8.8541666667vw }
#mainGlobalCon .main-global-slide-item .inner-box dl dt .img-wrap { display: block; aspect-ratio: 170/170; border-radius:.5208333333vw;
overflow: hidden }
#mainGlobalCon .main-global-slide-item .inner-box dl dt .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: 600ms ease }
#mainGlobalCon .main-global-slide-item .inner-box dl dd { display: flex; flex-direction: column; justify-content: space-between; width: calc(100% - 8.8541666667vw - 2.4rem) }
#mainGlobalCon .main-global-slide-item .inner-box dl dd .tit { color: #fff; margin-bottom: .3333333333em }
#mainGlobalCon .main-global-slide-item .inner-box dl dd .txt { color: #ddd; word-break: keep-all; display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
@media screen and (max-width: 1366px) {
#mainGlobalCon .main-global-slide-item .inner-box dl { gap: 1.6rem }
#mainGlobalCon .main-global-slide-item .inner-box dl dd { width: calc(100% - 8.8541666667vw - 1.6rem) }
#mainGlobalCon .main-global-slide-item .inner-box dl dd .tit { margin-bottom:.5rem
}
}
@media screen and (max-width: 1024px) {
#mainGlobalCon .main-global-slide-item .inner-box dl dt { width: 14.7rem }
#mainGlobalCon .main-global-slide-item .inner-box dl dd { width: calc(100% - 14.7rem - 2.4rem) }
}
@media screen and (max-width: 767px) {
#mainGlobalCon .main-global-slide-item .inner-box dl { flex-direction: column; align-items: flex-start; gap: 1.4rem; height: 100% }
#mainGlobalCon .main-global-slide-item .inner-box dl dt { width: 100% }
#mainGlobalCon .main-global-slide-item .inner-box dl dt .img-wrap { aspect-ratio: 216/164; border-radius:.8rem
}
#mainGlobalCon .main-global-slide-item .inner-box dl dd { width: 100%; height: 100% }
#mainGlobalCon .main-global-slide-item .inner-box dl dd .tit { margin-bottom:.4rem
}
}
#mainGlobalCon .main-global-slide-item .contact-box { display: flex; gap: 1rem }
#mainGlobalCon .main-global-slide-item .contact-btn { display: flex; align-items: center; padding: 0; width: min(1.875vw, 3.6rem); height: min(1.875vw, 3.6rem); cursor: pointer }
@media screen and (max-width: 1024px) {
#mainGlobalCon .main-global-slide-item .contact-box { gap:.87rem
}
#mainGlobalCon .main-global-slide-item .contact-btn { width: 3.2rem; height: 3.2rem }
}
@media screen and (max-width: 767px) {
#mainGlobalCon .main-global-slide-item .contact-box {
gap:.6rem; margin-top: 1.2rem }
#mainGlobalCon .main-global-slide-item .contact-btn { width: 2.4rem; height: 2.4rem }
}
@media screen and (max-width: 1366px) {
#mainGlobalCon .main-global-slide-box { bottom: 160px }
}
@media screen and (max-width: 767px) {
#mainGlobalCon .main-global-top { position: relative }
#mainGlobalCon .main-global-bg #seq-canvas { height: 60vh }
#mainGlobalCon .main-global-slide-box { position: relative; bottom: auto }
[lang=en] #mainGlobalCon .main-global-count-list { display: block }
[lang=en] #mainGlobalCon .main-global-count-list li { padding-left: 0; padding-right: 0 }
[lang=en] #mainGlobalCon .main-global-count-list li:nth-child(n+2) { padding-top: 1.6rem }
[lang=en] #mainGlobalCon .main-global-count-list li .line { display: none }
}
#mainNewsRoomCon { position: relative; background-color: #fff; z-index: 3000 }
#mainOthersCon { padding-bottom: 2.0833333333vw }
@media screen and (max-width: 1024px) {
#mainOthersCon { padding-bottom: 6.4rem }
}
#mainOthersCon .main-cm-tit-box { text-align: center }
#mainOthersCon .main-others-con { position: relative }
@media screen and (min-width: 1025px) {
#mainOthersCon .main-others-con { clip-path: inset(0% 0% 0% 0% round var(--br-2)); padding: 0; margin: 0 var(--cm-margin) }
}
@media screen and (max-width: 1024px) {
#mainOthersCon .main-others-con { clip-path: none !important }
}
#mainOthersCon .main-others-con .bg-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1 }
#mainOthersCon .main-others-con .bg-box .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transition: 600ms ease }
#mainOthersCon .main-others-con .bg-box .bg.hide { opacity: 0 }
#mainOthersCon .main-others-con .bg-box .bg.change-bg { opacity: 0 }
#mainOthersCon .main-others-con .bg-box .bg.change-bg.show { opacity: 1 }
@media screen and (max-width: 1024px) {
#mainOthersCon .main-others-con .bg-box { display: none }
}
#mainOthersCon .main-others-con .bg-box::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2) }
#mainOthersCon .main-others-con .main-others-list { display: flex; text-align: center }
#mainOthersCon .main-others-con .main-others-list-box { position: relative; z-index: 2 }
#mainOthersCon .main-others-con .main-others-list li { position: relative; flex: 1 }
@media screen and (min-width: 1025px) {
#mainOthersCon .main-others-con .main-others-list li .main-others-item { background: none !important }
#mainOthersCon .main-others-con .main-others-list li:first-child::before { display: none }
#mainOthersCon .main-others-con .main-others-list li:hover[on] .main-others-item .inner { opacity: 1 }
#mainOthersCon .main-others-con .main-others-list li:hover[on] .main-others-item .inner .txt-box { transform: translateY(0) }
#mainOthersCon .main-others-con .main-others-list li:hover[on] .main-others-item .more-btn-wrap { visibility: visible; opacity: 1; transform: translateY(0) }
#mainOthersCon .main-others-con .main-others-list li::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: 14.5833333333vw; background-color: rgba(255,255,255,.4) }
}
@media screen and (min-width: 1025px) {
#mainOthersCon .main-others-con .main-others-list[on] .main-others-item .inner { opacity: .5 }
}
@media screen and (min-width: 1025px)and (hover: hover)and (pointer: fine) {
#mainOthersCon .main-others-con .main-others-list .main-others-item .inner:hover .btn--white, #mainOthersCon .main-others-con .main-others-list .main-others-item .inner:focus .btn--white { color: #000 }
#mainOthersCon .main-others-con .main-others-list .main-others-item .inner:hover .btn--white svg path, #mainOthersCon .main-others-con .main-others-list .main-others-item .inner:focus .btn--white svg path { stroke: #000 }
#mainOthersCon .main-others-con .main-others-list .main-others-item .inner:hover .btn--white::after, #mainOthersCon .main-others-con .main-others-list .main-others-item .inner:focus .btn--white::after { transform: translateX(0); left: 0 }
}
#mainOthersCon .main-others-con .main-others-item { position: relative; display: flex; width: 100%; height: 30.2083vw; align-items: center; justify-content: center; color: #fff }
#mainOthersCon .main-others-con .main-others-item .inner { position: relative }
#mainOthersCon .main-others-con .main-others-item .inner .txt-box { transform: translateY(25%); transition: 600ms ease }
#mainOthersCon .main-others-con .main-others-item .inner .tit { display: flex; align-items: center; justify-content: center; gap:.7rem;
margin-bottom: .4444444444em }
#mainOthersCon .main-others-con .main-others-item .inner .tit img { width: auto; height: 2.8rem }
#mainOthersCon .main-others-con .main-others-item .more-btn-wrap { margin-top: min(1.7708333333vw, 3.4rem); transition: 600ms ease; visibility: hidden; opacity: 0; transform: translateY(100%) }
#mainOthersCon .main-others-con .main-others-item .more-btn-wrap .more-btn { margin: 0 auto }
@media screen and (max-width: 1366px) {
#mainOthersCon .main-others-con .main-others-item { height: max(20.2083333333vw, 38.8rem) }
}
@media screen and (max-width: 1024px) {
#mainOthersCon .main-others-con .main-others-list { flex-wrap: wrap; gap: 1.2rem }
#mainOthersCon .main-others-con .main-others-list li { position: relative; width:calc(50% - .6rem);
flex: auto; aspect-ratio: 442/198 }
#mainOthersCon .main-others-con .main-others-item { position: relative; align-items: flex-end; justify-content: flex-start; height: 100%; text-align: left; padding: 2.4rem; border-radius: 1.2rem; overflow: hidden; background: no-repeat center/cover }
#mainOthersCon .main-others-con .main-others-item .inner .txt-box { transform: none }
#mainOthersCon .main-others-con .main-others-item .inner .tit { justify-content: flex-start }
#mainOthersCon .main-others-con .main-others-item .more-btn-wrap { display: none }
#mainOthersCon .main-others-con .main-others-item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2) }
}
@media screen and (min-width: 768px)and (max-width: 1024px) {
[lang=en] #mainOthersCon .main-others-con .main-others-list li:first-child { width: 100%; aspect-ratio: 4.4646464646 }
[lang=en] #mainOthersCon .main-others-con .main-others-list li .main-others-item { align-items: center; justify-content: center }
[lang=en] #mainOthersCon .main-others-con .main-others-list li .tit, [lang=en] #mainOthersCon .main-others-con .main-others-list li .txt { justify-content: center; text-align: center }
}
@media screen and (max-width: 767px) {
#mainOthersCon .main-others-con .main-others-list li { width: 100%; aspect-ratio: 358/160 }
#mainOthersCon .main-others-con .main-others-item { padding: 2rem }
}
[data-split-text=word], [data-kv-text=word] {
overflow:hidden
}
[data-split-text=word] .split-text-inner, [data-kv-text=word] .split-text-inner { display: inline-flex; overflow: hidden }
[data-split-text=word] .split-text-inner span, [data-kv-text=word] .split-text-inner span { display: inline-block }
[data-txt-motion=category] {
display:inline-flex;
overflow:hidden
}