@charset "utf-8";
/* #################################### Intro #################################### */
.intro-wrap {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100dvh;
padding: 0 5%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
background: var(--intro-bgColor);
z-index: 99;
}
.intro-circle-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: var(--intro-circle-size);
height: var(--intro-circle-size);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-end;
justify-content: center;
}
.intro-circle-wrap svg {
width: 100%;
height: 100%;
}
.intro-circle-wrap circle {
fill: none;
stroke: url(#gradient_intro);
stroke-width: var(--intro-circle-stroke-width);
r: calc((var(--intro-circle-size) / 2) - (var(--intro-circle-stroke-width) / 2) - var(--intro-circle-gap));
}
.intro-cicle-symbol {
position: absolute;
top: var(--intro-circle-symbol-pos);
width: var(--intro-circle-symbol-size);
opacity: var(--main-effect-opacity);
}
.intro-text-wrap {
position: relative;
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.intro-text-wrap::before,
.intro-text-wrap::after {
display: block;
content: "";
position: absolute;
top: 0;
height: 100%;
z-index: 1;
}
.intro-text-wrap::before {
left: 0;
width: 0;
background: var(--intro-text-effect-color);
}
.intro-text-wrap::after {
left: -70%;
width: 70%;
background: linear-gradient(to right, var(--intro-text-effect-color) 30%, transparent);
}
.intro-text-wrap h1,
.intro-text-wrap h2 {
width: 100%;
height: auto;
font-size: var(--intro-text-size);
font-family: var(--font-KR-base-2);
text-align: center;
text-transform: uppercase;
opacity: var(--main-effect-opacity);
}
.intro-text-wrap h1 {
margin-top: var(--intro-text-1-pos);
}
.intro-text-wrap h2 {
letter-spacing: var(--intro-text-2-spacing);
display: none;
}
/* #################################### Header #################################### */
header.basic .header-gnb-wrap span:nth-child(2),
header.basic .header-gnb-wrap span:nth-child(5) {
background: var(--header-gnb-color-base-basic);
}
header.basic .header-right-search i,
header.basic .header-right-language-icon i {
color: var(--header-right-search-color-basic);
}
header.basic .header-right-language li {
border-top: var(--header-right-language-list-border-basic);
}
header.basic .header-right-language a {
color: var(--header-right-language-font-color-basic);
}
header.scroll .header-gnb-wrap span:nth-child(2),
header.scroll .header-gnb-wrap span:nth-child(5) {
background: var(--header-gnb-color-base-scroll);
}
header.scroll .header-right-search i {
color: var(--header-right-search-color-scroll);
}
.header-gnb-wrap {
position: relative;
width: var(--header-gnb-wrap-size);
height: calc(var(--header-gnb-wrap-size) - 6px);
left: var(--header-wrap-gap);
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
cursor: pointer;
}
.header-gnb-wrap span {
position: absolute;
left: 0;
height: var(--header-gnb-size);
border-radius: var(--header-gnb-borderRadius);
}
.header-gnb-wrap span:nth-child(2),
.header-gnb-wrap span:nth-child(5) {
width: var(--header-gnb-width-base);
}
.header-gnb-wrap span:nth-child(2) {
top: 0;
}
.header-gnb-wrap span:nth-child(3),
.header-gnb-wrap span:nth-child(4) {
width: var(--header-gnb-width-point);
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
background: var(--header-gnb-color-point);
}
.header-gnb-wrap span:nth-child(5) {
bottom: 0;
}
.header-logo-wrap {
position: absolute;
left: 0;
top: 50%;
right: 0;
bottom: auto;
margin: 0 auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
width: var(--header-logo-wrap-width);
height: auto;
}
.header-logo-wrap a {
position: relative;
display: block;
width: 100%;
height: auto;
margin: 0 auto;
overflow: hidden;
}
.header-logo-wrap img:nth-child(2) {
opacity: var(--main-effect-opacity);
display: none;
}
.header-right-wrap {
position: absolute;
right: var(--header-wrap-gap);
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
width: var(--header-right-wrap-width);
height: var(--header-right-wrap-height);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
.header-right-search {
display: flex;
width: auto;
height: 100%;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.header-right-search i,
.header-right-language-icon i {
cursor: pointer;
transition: all 0.3s;
}
.header-right-search i {
font-size: var(--header-right-search-size);
}
.header-right-language-icon i {
font-size: var(--header-right-global-size);
}
.header-right-search i.hover,
.header-right-language-icon i.hover {
color: var(--signature-color) !important;
}
.header-right-language {
position: absolute;
top: var(--header-right-language-pos);
right: 0;
width: var(--header-right-language-width);
height: var(--header-right-language-height);
padding: var(--header-right-language-padding);
border-radius: var(--header-right-language-borderRadius);
background: var(--header-right-language-bgColor);
overflow: hidden;
box-shadow: var(--header-right-language-boxShadow);
opacity: var(--main-effect-opacity);
display: none;
}
.header-right-language ul {
width: 100%;
height: 100%;
}
.header-right-language li {
width: 100%;
height: 50%;
}
.header-right-language li:nth-child(1) {
border: 0 !important;
}
.header-right-language a {
display: block;
width: 100%;
height: 100%;
font-size: var(--header-right-language-font-size);
font-weight: var(--header-right-language-font-weight);
letter-spacing: var(--header-right-language-font-spacing);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.header-right-language a.hover {
color: var(--signature-color);
}
nav::before {
display: block;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--header-gnb-full-bgPoint-color);
opacity: var(--main-effect-opacity);
z-index: -1;
}
.gnb-full-left-top {
position: absolute;
left: -100%;
top: var(--header-gnb-full-top-pos);
width: var(--header-gnb-full-logo-size);
height: auto;
opacity: var(--main-effect-opacity);
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.gnb-full-left-middle {
position: absolute;
left: -100%;
top: var(--header-gnb-full-middle-pos);
width: var(--header-gnb-full-middle-width);
height: var(--header-gnb-full-middle-height);
opacity: var(--main-effect-opacity);
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.gnb-full-video {
position: relative;
width: var(--header-gnb-full-video-width);
height: var(--header-gnb-full-video-height);
overflow: hidden;
}
.gnb-full-lang {
position: relative;
width: 100%;
height: calc(100% - var(--header-gnb-full-video-height));
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.gnb-full-lang ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--header-gnb-full-language-space);
}
.gnb-full-lang a {
font-size: var(--header-gnb-full-language-font-size);
font-weight: var(--header-gnb-full-language-font-weight);
letter-spacing: var(--header-gnb-full-language-font-spacing);
color: var(--header-gnb-full-language-font-color);
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.gnb-full-lang li:last-child {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.gnb-full-lang i {
font-size: var(--header-gnb-full-search-icon-size);
color: var(--header-gnb-full-search-icon-color);
cursor: pointer;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.gnb-full-lang i.hover {
color: var(--signature-color);
}
.gnb-full-lang li.on a {
font-weight: var(--header-gnb-full-language-active-weight);
color: var(--header-gnb-full-language-active-color);
}
.gnb-full-lang li.hover a {
color: var(--header-gnb-full-language-hover-color);
text-decoration: var(--header-gnb-full-language-hover-effect);
}
.gnb-full-left-bottom {
position: absolute;
left: -100%;
top: var(--header-gnb-full-bottom-pos);
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
opacity: var(--main-effect-opacity);
}
.gnb-full-left-bottom p {
color: var(--header-gnb-full-location-font-color);
}
.gnb-full-left-bottom p:nth-child(1) {
font-size: var(--header-gnb-full-location-font-size);
font-weight: var(--header-gnb-full-location-font-weight);
margin-bottom: var(--header-gnb-full-location-gap);
}
.gnb-full-left-bottom p:nth-child(1) span {
margin-top: var(--header-gnb-full-location-font-margin);
display: block;
}
.gnb-full-left-bottom p:nth-child(2) {
font-size: var(--header-gnb-full-number-font-size);
font-weight: var(--header-gnb-full-number-font-weight);
text-transform: uppercase;
}
.gnb-full-left-bottom p:nth-child(2) span {
color: var(--signature-color);
}
.gnb-full-right-wrap {
position: absolute;
left: var(--header-gnb-full-menu-wrap-pos);
top: 0;
width: var(--header-gnb-full-menu-wrap-width);
height: 100%;
z-index: 1;
}
.gnb-menu-pos {
display: flex;
width: 100%;
height: 100%;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.gnb-menu-frame {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--header-gnb-full-menu-gap);
}
.gnb-menu-frame::before {
display: block;
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: var(--signature-color);
z-index: -1;
}
.gnb-menu-common {
width: var(--header-gnb-full-menu-frame-width);
height: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--header-gnb-full-menu-frame-gap);
margin-left: var(--header-gnb-full-menu-frame-pos);
padding-right: var(--header-gnb-full-menu-frame-pos);
opacity: var(--main-effect-opacity);
white-space: nowrap;
}
.gnb-menu-common h1 {
position: relative;
width: auto;
height: auto;
padding-right: var(--header-gnb-full-menu-1depth-paddingRight);
}
.gnb-menu-common h1::after {
display: block;
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
width: var(--header-gnb-full-menu-1depth-circle-size);
height: var(--header-gnb-full-menu-1depth-circle-size);
border-radius: 300px;
border: var(--header-gnb-full-menu-1depth-circle-stroke);
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.gnb-menu-common h1 a {
display: block;
width: 100%;
height: 100%;
font-size: var(--header-gnb-full-menu-1depth-font-size);
font-weight: var(--header-gnb-full-menu-1depth-font-weight);
letter-spacing: var(--header-gnb-full-menu-1depth-font-spacing);
color: var(--header-gnb-full-menu-1depth-font-color);
border-bottom: var(--header-gnb-full-menu-1depth-border);
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.gnb-menu-common h1.hover a {
border-bottom: var(--header-gnb-full-menu-1depth-hover-border);
}
.gnb-menu-common h1.hover::after {
border: var(--header-gnb-full-menu-1depth-hover-circle);
}
.gnb-menu-common li a {
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.gnb-menu-common li.hover a {
color: var(--signature-color);
}
.gnb-menu-common ul {
width: calc(100% - var(--header-gnb-full-menu-1depth-width) - var(--header-gnb-full-menu-frame-gap));
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;
align-items: flex-start;
gap: var(--header-gnb-full-menu-2depth-gap);
}
.gnb-menu-common a {
font-size: var(--header-gnb-full-menu-2depth-font-size);
font-weight: var(--header-gnb-full-menu-2depth-font-weight);
color: var(--header-gnb-full-menu-2depth-font-color);
}
.search-full-close,
.gnb-full-close {
position: absolute;
right: var(--header-gnb-full-common-pos);
top: var(--header-gnb-full-common-pos);
width: var(--header-gnb-full-close-size);
height: var(--header-gnb-full-close-size);
cursor: pointer;
}
.search-full-close span,
.gnb-full-close span {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
display: block;
width: var(--header-gnb-full-close-thick);
height: 100%;
}
.gnb-full-close span {
background: var(--header-gnb-full-close-color);
opacity: var(--main-effect-opacity);
}
.search-full-close span {
opacity: var(--main-effect-opacity);
background: var(--header-search-full-close-color);
}
.search-video-wrap {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
.search-video-wrap video {
opacity: var(--main-effect-opacity);
}
.search-full-frame {
width: 100%;
height: 100%;
}
.search-full-top {
width: 100%;
text-align: center;
margin-top: var(--header-search-full-top-marginTop);
}
.search-logo-wrap {
width: var(--header-search-full-logo-size);
height: auto;
margin: var(--header-search-full-logo-margin);
opacity: var(--main-effect-opacity);
}
.search-logo-wrap a {
width: 100%;
height: 100%;
}
.search-title-wrap {
margin-top: var(--header-search-full-title-margin);
opacity: var(--main-effect-opacity);
}
.search-title-wrap h1 {
font-size: var(--header-search-full-title-font-size);
font-weight: var(--header-search-full-title-font-weight);
padding: var(--header-search-full-title-padding);
color: #fff;
text-transform: uppercase;
}
.search-title-wrap h1 span {
display: block;
}
.search-form-wrap {
position: absolute;
left: 50%;
top: var(--header-search-full-form-pos);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: var(--header-search-full-form-width);
opacity: var(--main-effect-opacity);
}
.search-form-wrap fieldset,
.search-form-wrap form,
.search-form-wrap input {
width: 100%;
}
.search-form-contents {
width: var(--header-search-full-form-width);
padding: var(--header-search-full-form-padding);
text-align: center;
background: transparent;
border-bottom: var(--header-search-full-form-border);
outline: none;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.search-form-contents,
.search-form-contents::placeholder {
font-family: var(--font-KR-base-2);
font-size: var(--header-search-full-form-placholder-size);
font-weight: var(--header-search-full-form-placholder-weight);
color: var(--header-search-full-form-placholder-color);
}
.search-form-contents:focus {
border-bottom: var(--header-search-full-form-hover-border);
}
.search-form-btn {
width: var(--header-search-full-btn-size);
height: var(--header-search-full-btn-size);
margin: var(--header-search-full-btn-margin);
background: var(--header-search-full-btn-color);
border-radius: 300px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
transition: all 0.5s;
-webkit-transition: all 0.5s;
cursor: pointer;
}
.search-form-btn.hover {
background: var(--signature-color);
}
.search-form-btn i {
font-size: var(--header-search-full-btn-icon-size);
color: var(--header-search-full-btn-icon-color);
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
/* #################################### Page #################################### */
/* Main */
.main-bridge-wrap {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
z-index: -1;
overflow: hidden;
}
.main-brdige-circle-color {
position: absolute;
left: calc(var(--main-visual-bridge-circle-color-size) - (var(--main-visual-bridge-circle-color-size) + (var(--main-visual-bridge-circle-color-size) / 3)));
top: calc(var(--main-visual-bridge-circle-color-size) - (var(--main-visual-bridge-circle-color-size) + (var(--main-visual-bridge-circle-color-size) / 3)));
width: var(--main-visual-bridge-circle-color-size);
height: var(--main-visual-bridge-circle-color-size);
}
.main-brdige-circle-color svg {
width: 100%;
height: 100%;
}
.main-brdige-circle-color circle {
width: 100%;
height: 100%;
fill: transparent;
stroke: url(#gradient_bridge);
stroke-width: var(--main-visual-bridge-stroke-size);
r: calc((100% / 2) - var(--main-visual-bridge-stroke-size));
}
.main-brdige-circle-grey {
position: absolute;
right: calc(var(--main-visual-bridge-circle-grey-size) - (var(--main-visual-bridge-circle-grey-size) + (var(--main-visual-bridge-circle-grey-size) / 3)));
bottom: calc(var(--main-visual-bridge-circle-grey-size) - (var(--main-visual-bridge-circle-grey-size) + (var(--main-visual-bridge-circle-grey-size) / 3)));
width: var(--main-visual-bridge-circle-grey-size);
height: var(--main-visual-bridge-circle-grey-size);
}
.main-brdige-circle-grey svg {
width: 100%;
height: 100%;
}
.main-brdige-circle-grey circle {
width: 100%;
height: 100%;
fill: transparent;
stroke: var(--main-visual-bridge-circle-grey-stroke-color);
stroke-width: var(--main-visual-bridge-stroke-size);
r: calc((100% / 2) - var(--main-visual-bridge-stroke-size));
}
.main-brdige-circle-fill {
position: absolute;
left: 22%;
right: auto;
top: 0;
bottom: 0;
margin: auto 0;
width: var(--main-visual-bridge-circle-fill-size);
height: var(--main-visual-bridge-circle-fill-size);
overflow: hidden;
border-radius: 1000px;
opacity: var(--main-effect-opacity);
filter: var(--main-effect-filter-blur);
}
.main-brdige-circle-fill svg {
width: 100%;
height: 100%;
opacity: var(--main-visual-bridge-circle-fill-opacity);
}
.main-brdige-circle-fill circle {
width: 100%;
height: 100%;
fill: var(--signature-color);
r: calc((100% / 2) - var(--main-visual-bridge-stroke-size));
}
.main-brdige-circle-fill-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--main-visual-bridge-circle-fill-img);
background-size: cover;
}
.main-bridge-text {
position: relative;
right: var(--main-visual-bridge-text-pos);
opacity: var(--main-effect-opacity);
filter: var(--main-effect-filter-blur);
z-index: 1;
}
.main-bridge-text h1 {
font-family: var(--font-KR-base-2);
font-size: var(--main-visual-bridge-text-title-size);
font-weight: var(--main-visual-bridge-text-title-weight);
}
.main-bridge-text h1 span {
display: block;
}
.main-bridge-link {
margin: var(--main-visual-bridge-link-margin);
}
.main-bridge-link a {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--main-visual-bridge-link-icon-gap);
}
.main-bridge-link span {
font-size: var(--main-visual-bridge-text-link-size);
text-transform: var(--main-visual-bridge-text-link-transform);
font-weight: var(--main-visual-bridge-text-link-weight);
letter-spacing: var(--main-visual-bridge-text-link-spacing);
color: var(--base-color-lightGrey);
}
.main-bridge-link i {
font-size: var(--main-visual-bridge-text-icon-size);
color: var(--signature-color);
}
.video-poster-main-1 {
background: var(--main-video-poster-1);
background-size: cover;
filter: grayscale(0);
}
.main-video-wrap {
opacity: var(--main-effect-opacity);
transform: scale(1.5);
}
.main-black-screen {
height: var(--main-video-screen-height);
background: var(--main-video-screen-color);
opacity: var(--main-video-screen-opacity);
}
.main-text-1,
.main-text-2 {
position: absolute;
left: var(--main-text-pos-left);
bottom: var(--main-text-pos-bottom);
width: var(--main-text-width);
z-index: 1;
}
.main-text-common {
width: 100%;
height: auto;
}
.main-text-common h1 {
font-size: var(--main-text-set-font-size);
font-family: var(--font-KR-base-2);
font-weight: var(--main-text-set-font-weight);
color: var(--main-text-set-font-color);
opacity: var(--main-effect-opacity);
}
.main-timeline-wrap {
position: absolute;
left: 0;
right: 0;
top: auto;
bottom: var(--main-timeline-wrap-pos);
margin: 0 auto;
width: var(--main-timeline-wrap-width);
height: var(--main-timeline-wrap-height);
}
.main-timeline-wrap::before {
display: block;
content: "";
position: absolute;
left: auto;
top: 0;
right: 0;
bottom: 0;
margin: auto 0;
width: 100%;
height: var(--main-timeline-line-size);
background: var(--main-timeline-line-color);
opacity: var(--main-timeline-line-opacity);
}
.main-timeline-mark {
position: relative;
left: 0;
top: 0;
width: var(--main-timeline-mark-size);
height: var(--main-timeline-mark-size);
}
.main-timeline-mark span {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
display: block;
border-radius: var(--main-timeline-mark-borderRadius);
}
.main-timeline-mark span:nth-child(1) {
width: 100%;
height: 100%;
background: var(--main-timeline-mark-outline-color);
border: var(--main-timeline-mark-border);
}
.main-timeline-mark span:nth-child(2) {
width: var(--main-timeline-mark-inner-size);
height: var(--main-timeline-mark-inner-size);
background: var(--main-timeline-mark-inner-color);
}
.main-scrollbox-wrap {
position: fixed;
right: var(--main-scrolldown-wrap-pos);
top: 0;
bottom: 0;
left: auto;
margin: auto 0;
width: var(--main-scrolldown-wrap-size);
height: 100%;
z-index: 1;
}
.main-scrollbox-wrap::before {
display: block;
content: "";
position: absolute;
left: 0;
top: var(--main-scrolldown-gradient-pos);
width: 100%;
height: var(--main-scrolldown-gradient-size);
background: var(--main-scrolldown-gradient-color);
opacity: var(--main-scrolldown-gradient-opacity);
z-index: 1;
}
.main-scrollbox-text-frame {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
z-index: 2;
}
.main-scrollbox-wrap p {
height: auto;
font-size: var(--main-scrolldown-text-size);
font-weight: var(--main-scrolldown-text-weight);
letter-spacing: var(--main-scrolldown-text-spacing);
color: var(--main-scrolldown-text-color);
writing-mode: vertical-lr;
text-transform: uppercase;
opacity: var(--main-effect-opacity);
}
.main-scrollbox-icon-frame {
position: absolute;
left: 0;
top: var(--main-scrolldown-icon-frame-pos);
width: 100%;
height: auto;
opacity: var(--main-scrolldown-icon-frame-opacity);
z-index: 3;
}
.main-scrollbox-common {
margin: 0 auto;
}
.main-scrollbox-body {
width: var(--main-scrolldown-icon-body-width);
height: var(--main-scrolldown-icon-body-height);
background: var(--main-scrolldown-icon-body-bg);
border-radius: var(--main-scrolldown-icon-borderRadius);
}
.main-scrollbox-point {
width: var(--main-scrolldown-icon-point-size);
height: var(--main-scrolldown-icon-point-size);
margin-top: var(--main-scrolldown-icon-space);
background: var(--main-scrolldown-icon-point-color);
border-radius: var(--main-scrolldown-icon-borderRadius);
}
.main-scrollbox-arrow {
width: var(--main-scrolldown-icon-arrow-size);
height: auto;
margin: 0 auto;
}
.main-visual-1-wrap {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 1;
}
.main-visual-1-wrap::after,
.main-visual-1-wrap::before {
display: block;
content: "";
position: absolute;
top: 0;
width: 0;
height: 100%;
z-index: -1;
}
.main-visual-1-wrap::after {
left: 0;
background: var(--main-visual-1-left-bgColor);
}
.main-visual-1-wrap::before {
right: 0;
background: var(--main-visual-1-right-bgColor);
}
.main-visual-1-img-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
overflow: hidden;
}
.main-visual-1-img-wrap {
height: 100%;
}
.main-visual-1-img-left,
.main-visual-1-img-right {
position: absolute;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
height: auto;
opacity: var(--main-effect-opacity);
}
.main-visual-1-img-left {
width: var(--main-visual-1-hand-left-width);
top: var(--main-visual-1-hand-left-pos-top);
left: var(--main-visual-1-hand-left-pos-left);
}
.main-visual-1-img-right {
width: var(--main-visual-1-hand-right-width);
top: var(--main-visual-1-hand-right-pos-top);
right: var(--main-visual-1-hand-right-pos-right);
}
.main-visual-1-circle {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: var(--main-visual-1-circle-size);
height: var(--main-visual-1-circle-size);
z-index: 0;
}
.main-visual-1-circle svg {
width: 100%;
height: 100%;
}
.main-visual-1-circle circle {
width: 100%;
height: auto;
fill: var(--main-visual-1-circle-fill-color);
stroke: var(--signature-color);
stroke-width: var(--main-visual-1-circle-stroke-size);
r: calc((var(--main-visual-1-circle-size) / 2) - (var(--main-visual-1-circle-stroke-size) / 2) - 1vw);
}
.main-visual-1-light-wrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.5);
width: var(--main-visual-1-circle-effect-size);
opacity: var(--main-effect-opacity);
}
.main-visual-connect-text-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: var(--main-visual-common-copy-wrap-size);
height: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
overflow: hidden;
}
.main-text-connect-line {
width: 0;
height: var(--main-visual-common-copy-connect-line-size);
background: var(--signature-color);
}
.main-visual-connect-text-wrap p {
font-size: var(--main-visual-common-copy-font-size);
font-family: var(--font-KR-base-2);
font-weight: var(--main-visual-common-copy-font-weight);
white-space: var(--main-visual-common-copy-font-whitespace);
}
.main-visual-connect-text-wrap span {
display: block;
margin-top: var(--main-visual-common-copy-second-marginTop);
}
.main-visual-1-text {
opacity: var(--main-effect-opacity);
}
.main-visual-1-text p:nth-child(1) {
color: var(--main-visual-1-copy-left-color);
}
.main-visual-1-text p:nth-child(2) {
color: var(--main-visual-1-copy-right-color);
}
.main-visual-2-wrap {
position: relative;
width: 100vw;
height: 100vh;
z-index: -2;
}
.main-visual-2-frame {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 0;
height: 0;
opacity: var(--main-effect-opacity);
filter: var(--main-effect-filter-blur);
overflow: hidden;
}
.main-visual-2-img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.main-visual-2-img,
.main-visual-2-img ul,
.main-visual-2-img li {
width: 100%;
height: 100%;
}
.main-visual-2-img li {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.main-visual-2-img-intro-top,
.main-visual-2-img-intro-bottom {
width: 100%;
height: var(--main-visual-2-intro-img-height);
}
.main-visual-2-img li:nth-child(1) .main-visual-2-img-intro-top {
background: var(--main-visual-2-intro-img-top-bg);
background-size: cover;
}
.main-visual-2-img li:nth-child(1) .main-visual-2-img-intro-bottom {
background: var(--main-visual-2-intro-img-bottom-bg);
background-size: cover;
}
.main-visual-2-img li:nth-child(2) {
background: var(--main-visual-2-intro-img-point-1);
background-size: cover;
filter: var(--main-effect-filter-blur);
opacity: var(--main-effect-opacity);
}
.main-visual-2-img li:nth-child(3) {
background: var(--main-visual-2-intro-img-point-2);
background-size: cover;
filter: var(--main-effect-filter-blur);
opacity: var(--main-effect-opacity);
}
.main-visual-2-img li:nth-child(4) {
background: var(--main-visual-2-intro-img-point-3);
background-size: cover;
filter: var(--main-effect-filter-blur);
opacity: var(--main-effect-opacity);
}
.main-visual-2-company-common {
position: absolute;
left: 0;
width: 100%;
height: auto;
text-align: var(--main-visual-2-text-company-align);
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.main-visual-2-company-common h1 {
font-family: var(--font-EN-base-1);
text-transform: uppercase;
font-size: var(--main-visual-2-text-company-font-size);
font-weight: var(--main-visual-2-text-company-font-weight);
white-space: var(--main-visual-2-text-company-whitespace);
-webkit-text-fill-color: var(--main-visual-2-text-company-font-fill-color);
-webkit-text-stroke: var(--main-visual-2-text-company-font-stroke);
}
.main-visual-2-company-left {
opacity: var(--main-effect-opacity);
filter: var(--main-effect-filter-blur);
top: var(--main-visual-2-text-company-left-pos-top);
}
.main-visual-2-company-right {
opacity: var(--main-effect-opacity);
filter: var(--main-effect-filter-blur);
top: var(--main-visual-2-text-company-right-pos-top);
}
.main-visual-2-company-complete {
opacity: var(--main-effect-opacity);
filter: var(--main-effect-filter-blur);
top: var(--main-visual-2-text-company-complete-pos-top);
}
.main-visual-2-company-complete h1 {
-webkit-text-fill-color: var(--main-visual-2-text-company-complete-font-fill-color);
-webkit-text-stroke: var(--main-visual-2-text-company-complete-font-stroke);
}
.main-visual-2-text {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.main-visual-2-text ul {
width: 85%;
height: auto;
}
.main-visual-2-text li {
font-family: var(--font-KR-base-2);
font-size: var(--main-visual-2-text-copy-font-size);
color: var(--main-visual-2-text-copy-font-color);
text-align: var(--main-visual-2-text-copy-align);
opacity: var(--main-effect-opacity);
word-break: keep-all;
}
.main-visual-2-text li:nth-child(2),
.main-visual-2-text li:nth-child(3) {
display: none;
}
.main-visual-2-text strong {
color: var(--signature-color);
font-weight: var(--main-visual-2-text-copy-font-weight);
}
.main-visual-3-wrap {
position: relative;
width: 100vw;
height: 100vh;
opacity: var(--main-effect-opacity);
cursor: move;
}
.main-visual-3-frame {
width: 100%;
height: 100%;
overflow: hidden;
background: var(--main-visual-3-bg);
background-size: cover;
}
.main-visual-3-list {
position: relative;
width: 100%;
height: 100%;
}
.main-visual-3-common {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.main-visual-3-title {
position: absolute;
top: var(--main-visual-3-slide-title-pos-top);
left: var(--main-visual-3-slide-title-pos-left);
width: var(--main-visual-3-slide-title-width);
height: var(--main-visual-3-slide-title-height);
margin: 0 auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.main-visual-3-title h2 {
font-size: var(--main-visual-3-slide-title-font-size);
font-weight: var(--main-visual-3-slide-title-font-weight);
}
.main-visual-3-title h2 span {
font-size: var(--main-visual-3-slide-title-second-font-size);
display: block;
font-weight: var(--main-visual-3-slide-title-second-font-weight);
}
.main-visual-3-title span:nth-child(1) {
color: var(--main-visual-3-slide-title-second-font-top-color);
margin-top: var(--main-visual-3-slide-title-second-marginTop);
}
.main-visual-3-title span:nth-child(2) {
color: var(--signature-color);
}
.main-visual-3-graphic-frame {
position: absolute;
height: auto;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
overflow: hidden;
}
.main-visual-3-graphic-frame-LED {
width: var(--main-visual-3-slide-graphic-LED-size);
top: var(--main-visual-3-slide-graphic-LED-pos-top);
}
.main-visual-3-graphic-frame-pressure {
width: var(--main-visual-3-slide-graphic-pressure-size);
top: var(--main-visual-3-slide-graphic-pressure-pos-top);
}
.main-visual-3-graphic-frame-home {
width: var(--main-visual-3-slide-graphic-home-size);
top: var(--main-visual-3-slide-graphic-home-pos-top);
}
.main-visual-3-graphic-LED,
.main-visual-3-graphic-pressure,
.main-visual-3-graphic-home {
width: 100%;
height: 100%;
}
.main-visual-3-graphic-marker {
position: absolute;
left: 50%;
top: 50%;
width: var(--main-visual-3-slide-graphic-marker-size);
height: var(--main-visual-3-slide-graphic-marker-size);
overflow: hidden;
border-radius: 300px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.main-visual-3-graphic-marker ul {
width: 100%;
height: 100%;
}
.main-visual-3-graphic-marker li {
width: 100%;
height: 100%;
}
.main-visual-3-graphic-common {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border-radius: 200px;
width: 0;
height: 0;
border: var(--main-visual-3-slide-graphic-marker-border);
}
.main-visual-3-graphic-marker-circle {
background: var(--main-visual-3-slide-graphic-marker-circle-bgColor);
border: 0;
}
.main-visual-3-graphic-marker-LED-1 {
left: var(--main-visual-3-slide-graphic-LED-marker-1-pos-left);
top: var(--main-visual-3-slide-graphic-LED-marker-1-pos-top);
}
.main-visual-3-graphic-marker-LED-2 {
left: var(--main-visual-3-slide-graphic-LED-marker-2-pos-left);
top: var(--main-visual-3-slide-graphic-LED-marker-2-pos-top);
}
.main-visual-3-graphic-marker-pressure-1 {
left: var(--main-visual-3-slide-graphic-pressure-marker-1-pos-left);
top: var(--main-visual-3-slide-graphic-pressure-marker-1-pos-top);
}
.main-visual-3-graphic-marker-pressure-2 {
left: var(--main-visual-3-slide-graphic-pressure-marker-2-pos-left);
top: var(--main-visual-3-slide-graphic-pressure-marker-2-pos-top);
}
.main-visual-3-graphic-marker-pressure-3 {
left: var(--main-visual-3-slide-graphic-pressure-marker-3-pos-left);
top: var(--main-visual-3-slide-graphic-pressure-marker-3-pos-top);
}
.main-visual-3-graphic-marker-pressure-4 {
left: var(--main-visual-3-slide-graphic-pressure-marker-4-pos-left);
top: var(--main-visual-3-slide-graphic-pressure-marker-4-pos-top);
}
.main-visual-3-graphic-marker-pressure-5 {
left: var(--main-visual-3-slide-graphic-pressure-marker-5-pos-left);
top: var(--main-visual-3-slide-graphic-pressure-marker-5-pos-top);
}
.main-visual-3-graphic-marker-home-1 {
left: var(--main-visual-3-slide-graphic-home-marker-1-pos-left);
top: var(--main-visual-3-slide-graphic-home-marker-1-pos-top);
}
.main-visual-3-graphic-marker-home-2 {
left: var(--main-visual-3-slide-graphic-home-marker-2-pos-left);
top: var(--main-visual-3-slide-graphic-home-marker-2-pos-top);
}
.main-visual-3-graphic-marker-home-3 {
left: var(--main-visual-3-slide-graphic-home-marker-3-pos-left);
top: var(--main-visual-3-slide-graphic-home-marker-3-pos-top);
}
.main-visual-3-graphic-marker-home-4 {
left: var(--main-visual-3-slide-graphic-home-marker-4-pos-left);
top: var(--main-visual-3-slide-graphic-home-marker-4-pos-top);
}
.main-visual-3-graphic-marker-home-5 {
left: var(--main-visual-3-slide-graphic-home-marker-5-pos-left);
top: var(--main-visual-3-slide-graphic-home-marker-5-pos-top);
}
.main-visual-3-graphic-marker-home-6 {
left: var(--main-visual-3-slide-graphic-home-marker-6-pos-left);
top: var(--main-visual-3-slide-graphic-home-marker-6-pos-top);
}
.main-visual-3-graphic-marker-home-7 {
left: var(--main-visual-3-slide-graphic-home-marker-7-pos-left);
top: var(--main-visual-3-slide-graphic-home-marker-7-pos-top);
}
.main-visual-3-graphic-marker-home-8 {
left: var(--main-visual-3-slide-graphic-home-marker-8-pos-left);
top: var(--main-visual-3-slide-graphic-home-marker-8-pos-top);
}
.main-visual-3-graphic-marker-home-9 {
left: var(--main-visual-3-slide-graphic-home-marker-9-pos-left);
top: var(--main-visual-3-slide-graphic-home-marker-9-pos-top);
}
.main-visual-3-product-wrap {
position: absolute;
right: var(--main-visual-3-slide-product-pos-right);
bottom: 0;
width: var(--main-visual-3-slide-product-width);
height: var(--main-visual-3-slide-product-height);
background: var(--main-visual-3-slide-product-bgColor);
padding: var(--main-visual-3-slide-product-padding);
cursor: grab;
}
.main-visual-3-mouse-wrap-vertical,
.main-visual-3-mouse-wrap-horizental {
position: absolute;
left: 0;
top: 0;
display: flex;
flex-wrap: nowrap;
align-items: center;
pointer-events: none;
justify-content: space-between;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
filter: var(--main-effect-filter-blur);
opacity: var(--main-effect-opacity);
}
.main-visual-3-mouse-wrap-vertical svg,
.main-visual-3-mouse-wrap-horizental svg {
width: 100%;
height: 100%;
}
.main-visual-3-mouse-left-horizental,
.main-visual-3-mouse-right-horizental,
.main-visual-3-mouse-up-vertical,
.main-visual-3-mouse-down-vertical {
position: relative;
}
.main-visual-3-mouse-wrap-vertical {
width: var(--main-visual-3-slide-mouse-product-vertical-width);
height: var(--main-visual-3-slide-mouse-product-vertical-height);
flex-direction: column;
gap: var(--main-visual-3-slide-mouse-product-vertical-space);
}
.main-visual-3-mouse-center-vertical {
border-radius: 500px;
width: 100%;
height: var(--main-visual-3-slide-mouse-main-horizental-width);
background: var(--main-visual-3-slide-mouse-product-vertical-bgColor);
}
.main-visual-3-mouse-up-vertical i,
.main-visual-3-mouse-down-vertical i {
font-size: var(--main-visual-3-slide-mouse-product-vertical-icon-size);
color: var(--main-visual-3-slide-mouse-product-vertical-icon-color);
}
.main-visual-3-mouse-wrap-horizental {
width: var(--main-visual-3-slide-mouse-main-horizental-width);
height: var(--main-visual-3-slide-mouse-main-horizental-height);
flex-direction: row;
}
.main-visual-3-mouse-svg-horizental {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: var(--main-visual-3-slide-mouse-main-horizental-stroke-size);
height: var(--main-visual-3-slide-mouse-main-horizental-stroke-size);
}
.main-visual-3-mouse-svg-horizental circle {
fill: none;
stroke: url(#gradient_mouse_marker);
stroke-width: var(--main-visual-3-slide-mouse-main-horizental-stroke-width);
r: calc((var(--main-visual-3-slide-mouse-main-horizental-stroke-size) / 2) - (var(--main-visual-3-slide-mouse-main-horizental-stroke-width) / 2) - var(--main-visual-3-slide-mouse-main-horizental-stroke-gap));
}
.main-visual-3-mouse-center-horizental {
border-radius: 500px;
width: var(--main-visual-3-slide-mouse-main-horizental-center-width);
height: 100%;
border: var(--main-visual-3-slide-mouse-main-horizental-center-border);
}
.main-visual-3-mouse-left-horizental i,
.main-visual-3-mouse-right-horizental i {
font-size: var(--main-visual-3-slide-mouse-main-horizental-icon-size);
color: var(--main-visual-3-slide-mouse-main-horizental-icon-color);
}
.main-visual-3-product-wrap ul {
width: 100%;
height: 100%;
overflow-y: auto;
}
.main-visual-3-product-wrap li {
font-size: var(--main-visual-3-slide-product-text-size);
font-weight: var(--main-visual-3-slide-product-text-weight);
border-bottom: var(--main-visual-3-slide-product-text-border-bottom);
width: auto;
padding: var(--main-visual-3-slide-product-text-padding);
margin-top: var(--main-visual-3-slide-product-text-margin-top);
text-align: var(--main-visual-3-slide-product-text-align);
}
.main-visual-3-product-wrap li:first-child {
margin-top: 0;
}
.main-visual-4-wrap {
width: 100vw;
height: 100vh;
overflow: hidden;
background: var(--main-visual-4-markColor);
}
.main-visual-4-frame {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 100%;
height: 100%;
opacity: var(--main-effect-opacity);
background: var(--main-visual-4-bgColor);
}
.video-poster-main-2 {
background: var(--main-video-poster-2);
background-size: cover;
transform: scale(1.5);
-webkit-transform: scale(1.5);
opacity: var(--main-effect-opacity);
}
.main-visual-4-video-wrap {
opacity: var(--main-effect-opacity);
filter: var(--main-effect-filter-blur);
}
.main-visual-4-screen {
background: var(--main-visual-4-video-screen-bgColor);
}
.main-visual-4-text {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
width: var(--main-visual-4-text-width);
height: auto;
}
.main-visual-4-text-common {
position: relative;
width: 100%;
height: auto;
top: var(--main-visual-4-text-pos);
opacity: var(--main-effect-opacity);
}
.main-visual-4-text-common p {
font-size: var(--main-visual-4-text-font-size);
font-family: var(--font-KR-base-2);
font-weight: var(--main-visual-4-text-font-weight);
color: var(--main-visual-4-text-font-color);
}
/* Overview */
.sub-contents-overview-common h1,
.sub-contents-overview-common h2,
.sub-contents-overview-common p {
position: relative;
}
.sub-contents-overview-common h1 {
font-size: var(--sub-overview-h1-size);
font-weight: var(--sub-overview-h1-weight);
}
.sub-contents-overview-common h2 {
font-size: var(--sub-overview-h2-size);
text-transform: uppercase;
letter-spacing: var(--sub-overview-h2-spacing);
margin-bottom: var(--sub-overview-h2-marginBottom);
}
.sub-contents-overview-common p {
font-size: var(--sub-overview-p-size);
line-height: var(--sub-overview-p-lineHeight);
font-weight: var(--sub-overview-p-weight);
margin-top: var(--sub-overview-p-marginTop);
}
.sub-contents-overview-common p span {
display: block;
}
.sub-contents-overview-common {
position: relative;
margin: 0 auto;
}
.sub-contents-overview-1 {
width: var(--sub-overview-1-width);
height: var(--sub-overview-1-height);
background: var(--sub-overview-1-bgColor);
z-index: 2;
}
.sub-contents-overview-1 p {
margin-top: 0;
}
.sub-contents-overview-2 {
width: var(--sub-overview-2-width);
height: auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: flex-start;
flex-direction: column;
gap: var(--sub-overview-2-wrap-gap);
background: var(--sub-overview-2-bgColor);
margin: var(--sub-overview-2-margin);
z-index: 1;
overflow: hidden;
}
.sub-contents-overview-3 {
width: 100%;
height: var(--sub-overview-3-height);
padding-top: var(--sub-overview-3-paddingTop);
z-index: 1;
}
.sub-contents-overview-2-common {
width: 100%;
height: var(--sub-overview-2-height);
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: flex-end;
gap: var(--sub-overview-2-gap);
}
.sub-contents-overview-2-1 {
flex-direction: row;
}
.sub-contents-overview-2-2 {
flex-direction: row-reverse;
}
.sub-contents-overview-3 h1,
.sub-contents-overview-3 h2,
.sub-contents-overview-3 p {
width: 100%;
text-align: center;
padding-left: var(--sub-overview-3-paddingSide);
padding-right: var(--sub-overview-3-paddingSide);
}
.sub-contents-overview-img-common {
width: var(--sub-overview-2-img-size);
height: 100%;
}
.sub-contents-overview-effect {
position: absolute;
border-radius: 1000px;
z-index: -1;
}
.sub-contents-overview-effect-1 {
width: var(--sub-overview-effect-1-size);
height: var(--sub-overview-effect-1-size);
left: var(--sub-overview-effect-1-init-left);
top: var(--sub-overview-effect-1-init-top);
border: var(--sub-overview-effect-1-border);
}
.sub-contents-overview-effect-2 {
width: var(--sub-overview-effect-2-size);
height: var(--sub-overview-effect-2-size);
right: var(--sub-overview-effect-2-init-right);
bottom: var(--sub-overview-effect-2-init-bottom);
background: var(--sub-overview-effect-2-bgColor);
}
.sub-contents-overview-1-img {
width: 100%;
height: 100%;
background: var(--sub-overview-1-img);
background-size: cover;
opacity: var(--sub-overview-1-img-opacity);
}
.sub-contents-overview-2-img {
background: var(--sub-overview-2-img-top);
background-size: cover;
}
.sub-contents-overview-3-img {
background: var(--sub-overview-2-img-bottom);
background-size: cover;
}
.sub-contents-overview-3 {
background: var(--sub-overview-3-img);
background-size: cover;
}
.sub-contents-overview-1 h1,
.sub-contents-overview-1 p {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: auto;
text-align: center;
color: var(--sub-overview-1-text-color);
padding: var(--sub-overview-1-text-padding);
}
.sub-contents-overview-1 h1 {
font-size: var(--sub-overview-1-h1-size);
letter-spacing: var(--sub-overview-1-h1-spacing);
font-weight: var(--sub-overview-1-h1-weight);
transform: var(--sub-overview-1-h1-pos);
-webkit-transform: var(--sub-overview-1-h1-pos);
mix-blend-mode: var(--sub-overview-1-h1-mix);
}
.sub-contents-overview-1 p {
font-size: var(--sub-overview-1-p-size);
font-weight: var(--sub-overview-1-p-weight);
transform: var(--sub-overview-1-p-pos);
-webkit-transform: var(--sub-overview-1-p-pos);
line-height: var(--sub-overview-1-p-lineHeight);
top: 52%;
}
.sub-contents-overview-3::before {
display: block;
content: "";
width: 100%;
height: var(--sub-overview-3-gradient-height);
position: absolute;
left: 0;
top: 0;
background: var(--sub-overview-3-gradient-color);
}
/* Misson&Vision */
.sub-contents-mv-1-wrap {
position: relative;
width: var(--sub-mv-wrap-width);
height: auto;
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
background: var(--sub-mv-wrap-bgColor);
}
.sub-contents-mv-1-left-wrap,
.sub-contents-mv-1-right-wrap {
width: 50%;
height: auto;
}
.sub-contents-mv-1-frame {
position: relative;
width: 100%;
height: var(--sub-mv-1-frame-height);
background-color: var(--sub-mv-1-frame-bgColor);
}
.sub-contents-mv-1-1-frame-bg,
.sub-contents-mv-1-2-frame-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.sub-contents-mv-1-1-frame-bg {
background: var(--sub-mv-1-left-bg);
background-size: cover;
opacity: var(--sub-mv-1-left-opacity);
}
.sub-contents-mv-1-2-frame-bg {
background: var(--sub-mv-1-right-bg);
background-size: cover;
opacity: var(--sub-mv-1-right-opacity);
}
.sub-contents-mv-1-text {
position: relative;
width: 100%;
height: 100%;
}
.sub-contents-mv-1-text h1,
.sub-contents-mv-1-text h2,
.sub-contents-mv-1-text h3,
.sub-contents-mv-1-text p {
color: var(--sub-mv-1-text-color);
padding: var(--sub-mv-1-text-padding);
}
.sub-contents-mv-1-left-wrap h1,
.sub-contents-mv-1-left-wrap h2 {
mix-blend-mode: var(--sub-mv-1-text-mixblend);
}
.sub-contents-mv-1-right-wrap h1,
.sub-contents-mv-1-right-wrap h2,
.sub-contents-mv-1-right-wrap h3,
.sub-contents-mv-1-right-wrap p {
text-align: right;
}
.sub-contents-mv-1-left-wrap h1 {
padding: var(--sub-mv-1-text-left-padding);
}
.sub-contents-mv-1-right-wrap h1 {
padding: var(--sub-mv-1-text-right-padding);
}
.sub-contents-mv-1-text h1 {
font-size: var(--sub-mv-1-text-h1-size);
font-weight: var(--sub-mv-1-text-h1-weight);
text-transform: uppercase;
letter-spacing: var(--sub-mv-1-text-h1-spacing);
}
.sub-contents-mv-1-text h2 {
font-size: var(--sub-mv-1-text-h2-size);
font-weight: var(--sub-mv-1-text-h2-weight);
letter-spacing: var(--sub-mv-1-text-h2-spacing);
}
.sub-contents-mv-1-text h3 {
font-size: var(--sub-mv-1-text-h3-size);
font-weight: var(--sub-mv-1-text-h3-weight);
margin-top: var(--sub-mv-1-text-h3-marginTop);
letter-spacing: var(--sub-mv-1-text-h3-spacing);
}
.sub-contents-mv-1-bottom {
padding: var(--sub-mv-1-bottom-wrap-padding);
}
.sub-contents-mv-1-bottom p {
font-size: var(--sub-mv-1-bottom-text-size);
font-weight: var(--sub-mv-1-bottom-text-weight);
color: var(--sub-mv-1-bottom-text-color);
line-height: var(--sub-mv-1-bottom-text-lineHeight);
}
.sub-contents-mv-1-bottom span {
display: block;
}
.sub-contents-mv-1-effect-wrap {
position: absolute;
left: 0;
right: 0;
top: auto;
bottom: var(--sub-mv-1-effect-pos-bottom);
width: var(--sub-mv-1-effect-size);
height: auto;
margin: 0 auto;
}
.sub-contents-mv-2-wrap {
width: var(--sub-mv-2-wrap-width);
height: auto;
margin: var(--sub-mv-2-wrap-margin);
}
.sub-contents-mv-2-wrap h1 {
font-size: var(--sub-mv-2-h1-size);
font-weight: var(--sub-mv-2-h1-weight);
margin-top: var(--sub-mv-2-h1-marginTop);
}
.sub-contents-mv-2-wrap h2 {
font-size: var(--sub-mv-2-h2-size);
font-weight: var(--sub-mv-2-h2-weight);
text-transform: uppercase;
letter-spacing: var(--sub-mv-2-h2-spacing);
}
.sub-contents-mv-2-wrap h3 {
font-size: var(--sub-mv-2-h3-size);
font-weight: var(--sub-mv-2-h3-weight);
margin-top: var(--sub-mv-2-h3-marginTop);
}
.sub-contents-mv-2-list > ul > li > p {
font-size: var(--sub-mv-2-p-size);
font-weight: var(--sub-mv-2-p-weight);
color: var(--sub-mv-2-p-color);
}
.sub-contents-mv-2-list {
width: 100%;
height: auto;
margin-top: var(--sub-mv-2-list-wrap-marginTop);
}
.sub-contents-mv-2-list ul {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
gap: var(--sub-mv-2-list-gap);
}
.sub-contents-mv-2-list li {
width: var(--sub-mv-2-list-contents-width);
height: auto;
}
.sub-contents-mv-2-img {
width: 100%;
height: var(--sub-mv-2-list-contents-img-size);
}
.sub-contents-mv-2-img-1 {
background: var(--sub-mv-2-list-contents-1-bg);
background-size: cover;
}
.sub-contents-mv-2-img-2 {
background: var(--sub-mv-2-list-contents-2-bg);
background-size: cover;
}
.sub-contents-mv-2-img-3 {
background: var(--sub-mv-2-list-contents-3-bg);
background-size: cover;
}
.sub-contents-mv-3-wrap {
position: relative;
margin-top: var(--sub-mv-3-wrap-marginTop);
width: 100%;
height: var(--sub-mv-3-wrap-height);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
background: var(--sub-mv-3-wrap-bg);
background-size: cover;
}
.sub-contents-mv-3-wrap::before {
display: block;
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: var(--sub-mv-3-wrap-screen-color);
opacity: var(--sub-mv-3-wrap-screen-opacity);
}
.sub-contents-mv-3-wrap h1,
.sub-contents-mv-3-wrap p {
position: relative;
}
.sub-contents-mv-3-wrap h1 {
font-size: var(--sub-mv-3-wrap-h1-size);
text-transform: uppercase;
letter-spacing: var(--sub-mv-3-wrap-h1-spacing);
text-align: center;
}
.sub-contents-mv-3-wrap p {
font-size: var(--sub-mv-3-wrap-p-size);
text-align: center;
margin-top: var(--sub-mv-3-wrap-p-marginTop);
}
/* History */
.sub-contents-history-wrap {
width: var(--sub-history-wrap-width);
height: auto;
}
.sub-contents-history-title {
width: 100%;
height: auto;
padding-left: var(--sub-history-title-paddingLeft);
}
.sub-contents-history-title h1 {
font-size: var(--sub-history-title-h1-size);
font-weight: var(--sub-history-title-h1-weight);
margin-top: var(--sub-history-title-h1-marginTop);
}
.sub-contents-history-title h2 {
font-size: var(--sub-history-title-h2-size);
font-weight: var(--sub-history-title-h2-weight);
text-transform: uppercase;
letter-spacing: var(--sub-history-title-h2-spacing);
color: var(--sub-history-title-h2-color);
}
.sub-contents-history-list-wrap {
position: relative;
width: 100%;
height: auto;
margin-top: var(--sub-history-list-h2-space);
padding-top: var(--sub-history-list-h2-space);
padding-bottom: var(--sub-history-list-h2-space);
}
.sub-contents-history-list-wrap::before {
display: block;
content: "";
position: absolute;
left: 0;
top: 0;
width: var(--sub-history-list-bg-width);
height: 100%;
background: var(--sub-history-list-bg-bgColor);
}
.sub-contents-history-list-common {
position: relative;
width: 100%;
height: auto;
padding-left: var(--sub-history-list-paddingLeft);
}
.sub-contents-history-list-growth {
margin-top: var(--sub-history-list-growth-wrap-space);
margin-bottom: var(--sub-history-list-growth-wrap-space);
}
.sub-contents-history-list-common h1 {
width: var(--sub-history-list-h1-width);
font-size: var(--sub-history-list-h1-size);
letter-spacing: var(--sub-history-list-h1-spacing);
text-transform: uppercase;
color: var(--signature-color);
border-bottom: var(--sub-history-list-h1-border);
padding-bottom: var(--sub-history-list-h1-padding);
}
.sub-contents-history-list-frame {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
margin-top: var(--sub-history-list-frame-marginTop);
}
.sub-contents-history-list-detail {
width: var(--sub-history-list-frame-detail-width);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
}
.sub-contents-history-list-title {
width: var(--sub-history-list-frame-detail-title);
}
.sub-contents-history-list-common h2 {
font-size: var(--sub-history-list-frame-detail-h2-size);
font-weight: var(--sub-history-list-frame-detail-h2-weight);
}
.sub-contents-history-list-common span {
display: block;
}
.sub-contents-history-list-contents li {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--sub-history-list-frame-detail-contents-gap);
margin-top: var(--sub-history-list-frame-detail-contents-marginTop);
}
.sub-contents-history-list-common h3 {
position: relative;
font-size: var(--sub-history-list-frame-detail-contents-title-size);
font-weight: var(--sub-history-list-frame-detail-contents-title-weight);
color: var(--signature-color);
padding-left: var(--sub-history-list-frame-detail-contents-title-paddingLeft);
width: var(--sub-history-list-frame-detail-contents-title-width);
}
.sub-contents-history-list-common h3::before {
display: block;
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
width: var(--sub-history-list-frame-detail-contents-bullet-size);
height: var(--sub-history-list-frame-detail-contents-bullet-size);
border-radius: 100px;
border: var(--sub-history-list-frame-detail-contents-bullet-color);
}
.sub-contents-history-list-contents > ul > li > p {
font-size: var(--sub-history-list-frame-detail-contents-info-size);
font-weight: var(--sub-history-list-frame-detail-contents-info-weight);
}
.sub-contents-history-list-icon {
margin-top: var(--sub-history-list-frame-detail-icon-wrap-marginTop);
width: var(--sub-history-list-frame-detail-icon-wrap-size);
height: var(--sub-history-list-frame-detail-icon-wrap-size);
background: var(--sub-history-list-frame-detail-icon-wrap-bgColor);
border-radius: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.sub-contents-history-list-icon i {
color: var(--sub-history-list-frame-detail-icon-color);
}
.sub-contents-history-list-icon-start i {
font-size: var(--sub-history-list-frame-detail-icon-start-size);
}
.sub-contents-history-list-icon-growth i {
font-size: var(--sub-history-list-frame-detail-icon-growth-size);
}
.sub-contents-history-list-icon-leaf i {
font-size: var(--sub-history-list-frame-detail-icon-leaf-size);
}
.sub-contents-history-list-img {
width: var(--sub-history-list-frame-detail-img-width);
height: var(--sub-history-list-frame-detail-img-height);
align-self: center;
}
.sub-contents-history-list-img-start {
background: var(--sub-history-list-frame-detail-img-start);
background-size: cover;
}
.sub-contents-history-list-img-growth {
background: var(--sub-history-list-frame-detail-img-growth);
background-size: cover;
}
.sub-contents-history-list-img-leaf {
background: var(--sub-history-list-frame-detail-img-leaf);
background-size: cover;
}
/* CI */
.sub-contents-brand-wrap {
width: var(--sub-ci-wrap-width);
margin: 0 auto;
}
.sub-contents-brand-title {
width: 100%;
height: var(--sub-ci-title-height);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.sub-contents-brand-title::before {
display: block;
content: "";
width: var(--sub-ci-title-logo-width);
height: 100%;
background: var(--sub-ci-title-logo-url);
background-size: contain;
}
.sub-contents-brand-title h1 {
font-size: var(--sub-ci-h1-size);
font-weight: 300;
padding-left: var(--sub-ci-h1-paddingLeft);
}
.sub-contents-brand-title span {
display: block;
}
.sub-contents-common-title {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
}
.sub-contents-common-title h2 {
font-size: var(--sub-ci-title-h2-size);
font-weight: var(--sub-ci-title-h2-weight);
width: var(--sub-ci-title-h2-width);
}
.sub-contents-common-title p {
width: var(--sub-ci-common-info-width);
font-size: var(--sub-ci-p-size);
font-weight: var(--sub-ci-p-weight);
padding-left: var(--sub-ci-p-paddingLeft);
border-left: var(--sub-ci-p-border);
}
.sub-contents-common-title span {
display: block;
margin-top: var(--sub-ci-title-span-marginTop);
}
.sub-contents-slogan-wrap {
width: 100%;
height: var(--sub-ci-slogan-wrap-height);
margin-top: var(--sub-ci-slogan-wrap-marginTop);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}
.sub-contents-common-title-slogan {
width: var(--sub-ci-slogan-frame-width);
}
.sub-contents-slogan-text {
width: var(--sub-ci-slogan-text-width);
padding-left: var(--sub-ci-slogan-text-paddingLeft);
border-left: var(--sub-ci-slogan-text-border);
}
.sub-contents-slogan-img {
position: relative;
width: var(--sub-ci-slogan-img-width);
height: 100%;
overflow: hidden;
border-radius: 500px;
}
.sub-contents-slogan-img img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.sub-contents-identi-wrap {
width: 100%;
height: auto;
margin-top: var(--sub-ci-identi-wrap-marginTop);
}
.sub-contents-identi-list-wrap {
width: var(--sub-ci-identi-list-wrap-width);
height: auto;
margin-top: var(--sub-ci-identi-list-wrap-marginTop);
margin-left: var(--sub-ci-identi-list-wrap-marginLeft);
}
.sub-contents-identi-list-frame {
width: 100%;
height: auto;
}
.sub-contents-identi-list {
width: 100%;
height: auto;
}
.sub-contents-identi-list ul {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}
.sub-contents-identi-list li {
width: var(--sub-ci-identi-list-contents-width);
height: var(--sub-ci-identi-list-contents-height);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.sub-contents-identi-list li img {
width: var(--sub-ci-identi-list-contents-img-width);
}
.sub-contents-identi-list li:nth-child(1) {
background: var(--sub-ci-identi-list-contents-1-bgColor);
border: var(--sub-ci-identi-list-contents-1-border);
}
.sub-contents-identi-list li:nth-child(2) {
background: var(--sub-ci-identi-list-contents-2-bg);
border: var(--sub-ci-identi-list-contents-2-border);
}
.sub-contents-identi-list li:nth-child(3) {
background: var(--sub-ci-identi-list-contents-3-bgColor);
}
.sub-contents-identi-list li:nth-child(4) {
background: var(--sub-ci-identi-list-contents-4-bg);
}
.sub-contents-identi-btn-wrap {
width: 100%;
height: auto;
margin-top: var(--sub-ci-identi-btn-wrap-marginTop);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: var(--sub-ci-identi-btn-wrap-gap);
}
.sub-contents-identi-btn {
width: var(--sub-ci-identi-btn-wrap-width);
height: var(--sub-ci-identi-btn-wrap-height);
border: var(--sub-ci-identi-btn-wrap-border);
border-radius: var(--sub-ci-identi-btn-wrap-borderRadius);
transition: all 0.5s;
}
.sub-contents-identi-btn.hover {
background: var(--sub-ci-identi-btn-hover-wrap-color);
border: 1px solid var(--sub-ci-identi-btn-hover-wrap-border);
}
.sub-contents-identi-btn a {
font-size: var(--sub-ci-identi-btn-font-size);
font-weight: var(--sub-ci-identi-btn-font-weight);
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
transition: all 0.5s;
}
.sub-contents-identi-btn.hover a {
color: var(--sub-ci-identi-btn-font-hover-color);
}
.sub-contents-color-wrap {
width: 100%;
height: auto;
margin-top: var(--sub-ci-color-wrap-marginTop);
padding-bottom: var(--sub-ci-color-wrap-paddingBottom);
}
.sub-contents-color-content-wrap {
width: 100%;
height: var(--sub-ci-color-contents-wrap-height);
margin-top: var(--sub-ci-color-contents-wrap-marginTop);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}
.sub-contents-color-content-pantone-wrap {
width: var(--sub-ci-color-contents-pantone-wrap-width);
height: 100%;
}
.sub-contents-color-content-pantone-frame {
display: flex;
width: 100%;
height: 100%;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}
.sub-contents-color-content-pantone-left {
width: var(--sub-ci-color-contents-pantone-left-width);
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
padding: var(--sub-ci-color-contents-pantone-left-padding);
background: var(--sub-ci-color-contents-pantone-left-bgColor);
}
.sub-contents-color-content-pantone-left h3 {
font-size: var(--sub-ci-color-contents-pantone-left-h3-size);
color: var(--sub-ci-color-contents-pantone-left-h3-color);
width: 100%;
height: auto;
}
.sub-contents-color-content-pantone-info {
width: 100%;
height: auto;
}
.sub-contents-color-content-pantone-info p {
font-size: var(--sub-ci-color-contents-pantone-left-p-size);
color: var(--sub-ci-color-contents-pantone-left-p-color);
}
.sub-contents-color-content-pantone-info p:nth-child(2) {
margin-top: var(--sub-ci-color-contents-pantone-left-info-vspace);
}
.sub-contents-color-content-pantone-info p span:nth-child(1) {
width: var(--sub-ci-color-contents-pantone-left-info-title-width);
font-weight: var(--sub-ci-color-contents-pantone-left-info-title-weight);
display: inline-block;
}
.sub-contents-color-content-pantone-info p span:nth-child(2) {
margin-left: var(--sub-ci-color-contents-pantone-left-info-hspace);
}
.sub-contents-color-content-pantone-right {
width: var(--sub-ci-color-contents-pantone-right-wrap-width);
height: 100%;
}
.sub-contents-color-content-pantone-right ul {
width: 100%;
height: 100%;
}
.sub-contents-color-content-pantone-right li {
font-size: var(--sub-ci-color-contents-pantone-right-font-size);
font-weight: var(--sub-ci-color-contents-pantone-right-font-weight);
color: var(--sub-ci-color-contents-pantone-right-font-color);
padding-right: var(--sub-ci-color-contents-pantone-right-info-paddingRight);
width: 100%;
height: var(--sub-ci-color-contents-pantone-right-info-height);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-end;
}
.sub-contents-color-content-pantone-right li:nth-child(1) {
background: var(--sub-ci-color-contents-pantone-right-info-1-bg);
}
.sub-contents-color-content-pantone-right li:nth-child(2) {
background: var(--sub-ci-color-contents-pantone-right-info-2-bg);
}
.sub-contents-color-content-pantone-right li:nth-child(3) {
background: var(--sub-ci-color-contents-pantone-right-info-3-bg);
}
.sub-contents-color-content-pantone-right li:nth-child(4) {
background: var(--sub-ci-color-contents-pantone-right-info-4-bg);
}
.sub-contents-color-content-pantone-right li:nth-child(5) {
background: var(--sub-ci-color-contents-pantone-right-info-5-bg);
}
.sub-contents-color-content-pantone-right li:nth-child(6) {
background: var(--sub-ci-color-contents-pantone-right-info-6-bg);
border-bottom: var(--sub-ci-color-contents-pantone-right-info-6-border-color);
}
.sub-contents-color-content-pantone-right li:nth-child(6) {
color: var(--sub-ci-color-contents-pantone-right-info-6-text-color);
}
.sub-contents-color-content-gradient-wrap {
width: var(--sub-ci-gradient-wrap-width);
height: 100%;
padding-left: var(--sub-ci-gradient-wrap-paddingLeft);
border-left: var(--sub-ci-gradient-wrap-border);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}
.sub-contents-color-content-gradient-top {
width: 100%;
height: var(--sub-ci-gradient-top-height);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}
.sub-contents-color-content-gradient-img {
position: relative;
width: var(--sub-ci-gradient-top-img-size);
height: auto;
border: var(--sub-ci-gradient-top-img-border);
}
.sub-contents-color-content-gradient-bar-wrap {
position: relative;
width: var(--sub-ci-gradient-top-bar-wrap-width);
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: var(--sub-ci-gradient-top-bar-wrap-gap);
}
.sub-contents-color-content-gradient-bar {
width: var(--sub-ci-gradient-top-bar-width);
height: var(--sub-ci-gradient-top-bar-height);
background: var(--sub-ci-gradient-top-bar-color);
}
.sub-contents-color-content-gradient-text {
position: relative;
width: var(--sub-ci-gradient-top-text-wrap-width);
height: auto;
}
.sub-contents-color-content-gradient-text ul {
width: 100%;
height: auto;
}
.sub-contents-color-content-gradient-text li {
position: absolute;
top: 0;
font-weight: var(--sub-ci-gradient-top-text-font-weight);
padding-top: var(--sub-ci-gradient-top-text-paddingTop);
background: var(--sub-ci-gradient-top-text-arrow);
}
.sub-contents-color-content-gradient-text li:nth-child(1) {
left: var(--sub-ci-gradient-top-text-1-pos);
}
.sub-contents-color-content-gradient-text li:nth-child(2) {
left: var(--sub-ci-gradient-top-text-2-pos);
}
.sub-contents-color-content-gradient-text li:nth-child(3) {
left: var(--sub-ci-gradient-top-text-3-pos);
}
.sub-contents-color-content-gradient-bottom {
width: 100%;
height: var(--sub-ci-gradient-bottom-wrap-height);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
gap: var(--sub-ci-gradient-bottom-wrap-gap);
}
.sub-contents-color-content-gradient-info-title h3 {
font-size: var(--sub-ci-gradient-bottom-h3-size);
font-weight: var(--sub-ci-gradient-bottom-h3-weight);
}
.sub-contents-color-content-gradient-info-title h4 {
font-size: var(--sub-ci-gradient-bottom-h4-size);
font-weight: var(--sub-ci-gradient-bottom-h4-weight);
text-transform: uppercase;
}
.sub-contents-color-content-gradient-info-list li {
position: relative;
margin-top: var(--sub-ci-gradient-bottom-info-marginTop);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.sub-contents-color-content-gradient-info-list li:first-child {
margin-top: 0;
}
.sub-contents-color-content-gradient-info-list h3 {
font-size: var(--sub-ci-gradient-bottom-info-h3-size);
font-weight: var(--sub-ci-gradient-bottom-info-h3-weight);
padding-left: var(--sub-ci-gradient-bottom-info-h3-paddingLeft);
width: var(--sub-ci-gradient-bottom-info-h3-width);
}
.sub-contents-color-content-gradient-info-list h3::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
width: var(--sub-ci-gradient-bottom-info-icon-size);
height: var(--sub-ci-gradient-bottom-info-icon-size);
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
border-radius: 100px;
}
.sub-contents-color-content-gradient-info-list li:nth-child(1) h3::before {
background: var(--sub-ci-gradient-bottom-info-icon-top-color);
border: var(--sub-ci-gradient-bottom-info-icon-top-border);
}
.sub-contents-color-content-gradient-info-list li:nth-child(2) h3::before {
background: var(--sub-ci-gradient-bottom-info-icon-bottom-color);
}
.sub-contents-color-content-gradient-info-list p {
font-size: var(--sub-ci-gradient-bottom-info-icon-bottom-text-size);
font-weight: var(--sub-ci-gradient-bottom-info-icon-bottom-text-weight);
}
.sub-contents-color-content-gradient-info-list p span {
margin-left: var(--sub-ci-gradient-bottom-info-icon-bottom-text-space);
}
.sub-contents-color-content-gradient-info-list li:nth-child(1) span:nth-child(3),
.sub-contents-color-content-gradient-info-list li:nth-child(2) span:nth-child(2),
.sub-contents-color-content-gradient-info-list li:nth-child(2) span:nth-child(4) {
font-weight: var(--sub-ci-gradient-bottom-info-icon-bottom-text-baseWeight);
}
/* Location */
.sub-contents-location-wrap {
width: var(--sub-location-wrap-width);
margin: 0 auto;
padding-bottom: var(--sub-location-wrap-paddingBottom);
}
.sub-contents-location-wrap h1 {
font-size: var(--sub-location-title-size);
font-weight: var(--sub-location-title-weight);
text-align: center;
color: var(--sub-location-title-color);
width: 100%;
height: auto;
}
.sub-contents-location-wrap h2 {
text-align: center;
font-size: var(--sub-location-sub-title-size);
font-weight: var(--sub-location-sub-title-weight);
}
.sub-contents-location-list {
width: 100%;
height: auto;
margin-top: var(--sub-location-list-wrap-marginTop);
}
.sub-contents-location-list-frame {
width: var(--sub-location-list-frame-width);
height: var(--sub-location-list-frame-height);
}
.sub-contents-location-list-frame:nth-child(1),
.sub-contents-location-list-frame:nth-child(2) {
margin-top: 0;
}
.sub-contents-location-list-top {
width: 100%;
height: var(--sub-location-list-frame-top-height);
}
.sub-contents-location-list-frame h3 {
position: relative;
font-size: var(--sub-location-list-frame-top-h3-size);
font-weight: var(--sub-location-list-frame-top-h3-weight);
text-align: center;
height: var(--sub-location-list-frame-top-h3-height);
z-index: 1;
}
.sub-contents-location-list-frame h3::before {
display: block;
content: "";
position: absolute;
left: 0;
right: 0;
top: auto;
bottom: var(--sub-location-list-frame-top-bar-pos);
width: var(--sub-location-list-frame-top-bar-width);
height: var(--sub-location-list-frame-top-bar-weight);
margin: 0 auto;
border-radius: 100px;
background: var(--sub-location-list-frame-top-bar-color);
}
.sub-contents-location-list-frame p {
width: 100%;
height: var(--sub-location-list-frame-text-height);
font-size: var(--sub-location-list-frame-text-size);
font-weight: var(--sub-location-list-frame-text-weight);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
margin-top: var(--sub-location-list-frame-text-marginTop);
text-align: center;
}
.sub-contents-location-list-map {
width: 100%;
height: var(--sub-location-list-frame-top-map-wrap-height);
}
.sub-contents-location-list-map iframe {
width: 100%;
height: 100%;
}
.sub-contents-location-list-empty {
width: var(--sub-location-list-frame-width);
height: var(--sub-location-list-frame-height);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
background: var(--sub-location-list-frame-empty-bgColor);
}
.sub-contents-location-empty-frame {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.sub-contents-location-list-empty-img {
width: var(--sub-location-list-frame-empty-logo-width);
height: auto;
}
.sub-contents-location-list-empty-icon {
margin-top: var(--sub-location-list-frame-empty-icon-marginTop);
}
.sub-contents-location-list-empty-icon i {
font-size: var(--sub-location-list-frame-empty-icon-size);
color: var(--sub-location-list-frame-empty-icon-color);
}
.sub-contents-location-list-empty-text {
font-size: var(--sub-location-list-frame-empty-text-size);
color: var(--sub-location-list-frame-empty-icon-color);
text-transform: uppercase;
letter-spacing: var(--sub-location-list-frame-empty-text-spacing);
margin-top: var(--sub-location-list-frame-empty-text-marginTop);
}
/* Business */
.sub-contents-business-wrap {
position: relative;
width: 85%;
height: auto;
margin: 0 auto;
padding-bottom: 190px;
}
.sub-contents-business-title-wrap {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}
.sub-contents-business-title {
width: var(--sub-business-title-wrap-width);
padding-top: var(--sub-business-title-wrap-paddingTop);
border-top: var(--sub-business-title-wrap-border);
}
.sub-contents-business-title h1 {
font-size: var(--sub-business-title-size);
font-weight: var(--sub-business-title-weight);
color: var(--sub-business-title-color);
white-space: nowrap;
}
.sub-contents-business-title span {
display: block;
margin-top: var(--sub-business-title-marginTop);
}
.sub-contents-business-title h2 {
font-size: var(--sub-business-subtitle-size);
font-weight: var(--sub-business-subtitle-weight);
margin-top: var(--sub-business-subtitle-marginTop);
}
.sub-contents-business-title-home {
width: calc(100% - 415px - 340px);
}
.sub-contents-business-title-car {
width: calc(100% - 415px - 70px);
}
/* Product */
.sub-contents-product-wrap {
position: relative;
width: var(--sub-product-wrap-width);
height: auto;
margin: 0 auto;
padding-bottom: var(--sub-product-wrap-paddingBottom);
}
.sub-product-title-top {
width: 100%;
height: var(--sub-product-title-top-wrap-height);
background: var(--sub-product-title-top-wrap-bgImg);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.sub-product-title-bottom {
width: 100%;
height: var(--sub-product-title-bottom-wrap-height);
margin-top: var(--sub-product-title-bottom-wrap-marginTop);
background: url(../img/sub_3_1_title_cover.jpg) center center no-repeat;
background-size: cover;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.sub-product-title-wrap h1 {
font-size: var(--sub-product-title-h1-size);
font-weight: var(--sub-product-title-h1-weight);
width: auto;
height: 100%;
background: var(--sub-product-title-h1-backBg);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
padding: var(--sub-product-title-h1-padding);
}
.sub-product-title-wrap h2 {
font-size: var(--sub-product-title-h2-size);
color: #fff;
}
/* Finance */
.sub-contents-finance-wrap {
position: relative;
width: var(--sub-finance-wrap-width);
height: auto;
margin: 0 auto;
padding-bottom: var(--sub-finance-wrap-paddingBottom);
}
/* Announcement&Technology */
.sub-contents-commonboard-wrap {
position: relative;
width: var(--sub-commonboard-wrap-width);
height: auto;
margin: 0 auto;
padding-bottom: var(--sub-commonboard-wrap-paddingBottom);
}
/* Quality */
.sub-quality-black-screen {
background: var(--sub-quality-video-screen);
}
.sub-contents-quality-title h1 {
font-size: var(--sub-quality-title-h1-size);
font-weight: var(--sub-quality-title-h1-weight);
text-align: center;
text-transform: uppercase;
letter-spacing: var(--sub-quality-title-h1-spacing);
}
.sub-contents-quality-title h2 {
position: relative;
font-size: var(--sub-quality-title-h2-size);
font-weight: var(--sub-quality-title-h2-weight);
margin-top: var(--sub-quality-title-h2-marginTop);
padding-top: var(--sub-quality-title-h2-paddingTop);
text-align: center;
}
.sub-contents-quality-title h2::after {
display: block;
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: auto;
margin: 0 auto;
width: var(--sub-quality-title-line-width);
height: var(--sub-quality-title-line-height);
background: var(--sub-quality-title-line-color);
}
.sub-contents-quality-video {
position: relative;
width: 100%;
height: var(--sub-quality-video-height);
margin-top: var(--sub-quality-video-marginTop);
overflow: hidden;
}
.sub-contents-quality-video-logo {
position: absolute;
left: var(--sub-quality-video-logo-pos);
top: var(--sub-quality-video-logo-pos);
width: var(--sub-quality-video-logo-size);
mix-blend-mode: var(--sub-quality-video-logo-blend);
}
.video-poster-quality {
background: var(--sub-quality-video-poster);
background-size: cover;
}
.sub-contents-quality-scroll-text {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: var(--sub-quality-video-scroll-text-height);
overflow: hidden;
}
.sub-contents-quality-scroll-text h1 {
position: absolute;
top: 0;
right: var(--sub-quality-video-scroll-text-init-pos);
font-size: var(--sub-quality-video-scroll-text-size);
font-weight: var(--sub-quality-video-scroll-text-weight);
font-family: var(--font-KR-base-2);
text-transform: uppercase;
color: var(--sub-quality-video-scroll-text-color);
letter-spacing: var(--sub-quality-video-scroll-text-spacing);
white-space: nowrap;
}
.sub-contents-quality-1-wrap,
.sub-contents-quality-2-wrap {
width: var(--sub-quality-contents-wrap-width);
height: auto;
margin: 0 auto;
margin-top: var(--sub-quality-contents-wrap-marginTop);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}
.sub-contents-quality-2-wrap {
padding-bottom: var(--sub-quality-contents-2-wrap-paddingBottom);
}
.sub-contents-quality-info-title {
width: var(--sub-quality-contents-title-width);
height: auto;
}
.sub-contents-quality-info-title h1 {
font-size: var(--sub-quality-contents-title-h1-size);
font-weight: var(--sub-quality-contents-title-h1-weight);
letter-spacing: var(--sub-quality-contents-title-h1-spacing);
text-transform: uppercase;
}
.sub-contents-quality-info-title h2 {
font-size: var(--sub-quality-contents-title-h2-size);
font-weight: var(--sub-quality-contents-title-h2-weight);
margin-top: var(--sub-quality-contents-title-h2-marginTop);
}
.sub-contents-quality-info {
width: var(--sub-quality-contents-info-wrap-width);
height: auto;
}
.sub-contents-quality-info p {
margin-top: var(--sub-quality-contents-info-text-marginTop);
padding-left: var(--sub-quality-contents-info-text-paddingLeft);
font-size: var(--sub-quality-contents-info-text-size);
font-weight: var(--sub-quality-contents-info-text-weight);
border-left: var(--sub-quality-contents-info-text-border);
}
.sub-contents-quality-info span {
display: block;
margin-top: var(--sub-quality-contents-info-text-span-marginTop);
}
.big-step {
margin-top: var(--sub-quality-contents-info-text-span-bigMargin) !important;
}
.sub-contents-quality-img {
width: 100%;
height: var(--sub-quality-contents-info-img-height);
}
.sub-contents-quality-img-1 {
background: var(--sub-quality-contents-info-img-1-bg);
background-size: cover;
}
.sub-contents-quality-img-2 {
background: var(--sub-quality-contents-info-img-2-bg);
background-size: cover;
}
/* Q&A */
.sub-contents-qna-wrap {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
.sub-contents-qna-video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.sub-quality-video-wrap {
position: absolute;
left: 0;
top: 0;
opacity: var(--sub-quality-video-wrap-opacity);
}
.sub-contents-qna-tab {
width: var(--sub-quality-tab-menu-wrap-width);
height: var(--sub-quality-tab-menu-wrap-height);
margin: 0 auto;
}
.sub-contents-qna-tab ul {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
flex-wrap: nowrap;
gap: var(--sub-quality-tab-menu-wrap-gap);
}
.sub-contents-qna-tab li {
width: var(--sub-quality-tab-menu-contents-width);
height: 100%;
margin: 0 auto;
background: var(--sub-quality-tab-menu-contents-bgColor);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.5s;
border-radius: 500px;
}
.sub-contents-qna-tab li.hover,
.sub-contents-qna-tab li.on {
background: var(--sub-quality-tab-menu-contents-hoverColor);
}
.sub-contents-qna-tab i {
font-size: var(--sub-quality-tab-menu-contents-icon-size);
color: var(--sub-quality-tab-menu-contents-icon-color);
}
.sub-contents-qna-tab li.hover i,
.sub-contents-qna-tab li.on i {
color: var(--sub-quality-tab-menu-contents-icon-hoverColor);
}
.sub-contents-qna-tab h1 {
font-size: var(--sub-quality-title-h1-size);
font-weight: var(--sub-quality-title-h1-weight);
margin-top: var(--sub-quality-title-h1-marginTop);
}
.sub-contents-qna-tab li.hover h1,
.sub-contents-qna-tab li.on h1 {
color: var(--sub-quality-title-h1-hoverColor);
}
.sub-contents-qna-tab-list-wrap {
position: relative;
width: 100%;
margin: 0 auto;
margin-top: var(--sub-quality-title-wrap-marginTop);
}
.sub-contents-qna-tab-list-common {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: auto;
margin: 0 auto;
width: var(--sub-quality-title-wrap-init-width);
height: auto;
opacity: 0;
visibility: hidden;
filter: var(--main-effect-filter-set);
}
.sub-contents-qna-tab-list-common:nth-child(1) {
width: var(--sub-quality-title-wrap-base-width);
visibility: visible;
opacity: 1;
filter: blur(0px) grayscale(0);
}
.sub-contents-qna-tab-common {
position: relative;
width: 100%;
height: var(--sub-quality-title-warp-height);
margin-top: var(--sub-quality-title-warp-marginTop);
margin-bottom: var(--sub-quality-title-warp-marginBottom);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.sub-contents-qna-tab-common::before {
display: block;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--sub-quality-title-img-screen-color);
opacity: var(--sub-quality-title-img-screen-opacity);
}
.sub-contents-qna-tab-product-img {
background: var(--sub-quality-title-img-product);
background-size: cover;
}
.sub-contents-qna-tab-gear-img {
background: var(--sub-quality-title-img-gear);
background-size: cover;
}
.sub-contents-qna-tab-note-img {
background: var(--sub-quality-title-img-note);
background-size: cover;
}
.sub-contents-qna-tab-person-img {
background: var(--sub-quality-title-img-person);
background-size: cover;
}
.sub-contents-qna-tab-common h1 {
font-size: var(--sub-quality-title-sub-h1-size);
font-weight: var(--sub-quality-title-sub-h1-weight);
color: var(--sub-quality-title-sub-h1-color);
text-transform: uppercase;
background: var(--sub-quality-title-sub-h1-background);
border-radius: 0;
width: var(--sub-quality-title-sub-h1-frameSize);
height: var(--sub-quality-title-sub-h1-frameSize);
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
border-radius: 537px;
mix-blend-mode: hard-light;
}
.sub-contents-qna-tab-common h2 {
position: absolute;
left: var(--sub-quality-title-sub-h2-pos-left);
top: var(--sub-quality-title-sub-h2-pos-top);
font-size: var(--sub-quality-title-sub-h2-size);
font-weight: var(--sub-quality-title-sub-h2-weight);
color: var(--sub-quality-title-sub-h2-color);
}
/* Visit */
.sub-contents-visit-wrap {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
.sub-contents-visit-video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.sub-contents-visit-title h1 {
font-size: var(--sub-visit-title-h1-size);
font-weight: var(--sub-visit-title-h1-weight);
text-align: center;
text-transform: uppercase;
letter-spacing: var(--sub-visit-title-h1-spacing);
color: var(--sub-visit-title-h1-color);
}
.sub-contents-visit-title h2 {
position: relative;
font-size: var(--sub-visit-title-h2-size);
font-weight: var(--sub-visit-title-h2-weight);
margin-top: var(--sub-visit-title-h2-marginTop);
padding-top: var(--sub-visit-title-h2-paddingTop);
text-align: center;
color: var(--sub-visit-title-h2-color);
}
.sub-contents-visit-title h2::after {
display: block;
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: auto;
margin: 0 auto;
width: var(--sub-visit-title-line-width);
height: var(--sub-visit-title-line-height);
background: var(--sub-visit-title-line-color);
}
/* 폼메일 */
.sub-contents-visit-formmail {
margin-top: var(--sub-formail-visit-marginTop);
}
.formmail-wrap-visit {
padding: var(--sub-formail-visit-padding);
backdrop-filter: blur(25px);
}
.formmail-wrap {
width: var(--sub-formail-wrap-width);
height: auto;
margin: 0 auto;
}
.formmail-frame {
width: 100%;
height: auto;
margin-top: var(--sub-formail-contents-frame-marginTop);
}
.formmail-frame:nth-child(1) {
margin-top: 0;
}
.formmail-line label {
display: none;
}
.formmail-frame h1 {
font-size: var(--sub-formail-contents-h1-size);
border-bottom: var(--sub-formail-contents-h1-border);
margin-bottom: var(--sub-formail-contents-h1-space);
padding-bottom: var(--sub-formail-contents-h1-space);
padding-left: var(--sub-formail-contents-h1-paddingLeft);
background: var(--sub-formail-contents-h1-backgroundURL);
background-size: var(--sub-formail-contents-h1-backgroundSize);
}
.formmail-wrap-visit .formmail-frame h1 {
color: var(--sub-formail-contents-h1-color);
}
.formmail-line {
position: relative;
width: 100%;
height: auto;
}
.formmail-line input,
.formmail-frame textarea {
font-size: var(--sub-formail-contents-inputTextarea-size);
font-family: var(--font-KR-base-2);
font-weight: var(--sub-formail-contents-inputTextarea-weight);
color: var(--sub-formail-contents-inputTextarea-color);
transition: all 0.5s;
}
.formmail-line input::placeholder,
.formmail-frame textarea::placeholder {
font-family: var(--font-KR-base-2);
font-weight: var(--sub-formail-contents-inputTextarea-placeholder-weight);
}
.formmail-wrap-visit .formmail-line input,
.formmail-wrap-visit .formmail-frame textarea,
.formmail-wrap-visit .formmail-line input::placeholder,
.formmail-wrap-visit .formmail-frame textarea::placeholder {
color: var(--sub-formail-visit-inputTextarea-placeholder-color);
}
.formmail-line input:focus,
.formmail-frame textarea:focus {
outline: none;
}
.formmail-line input {
width: 100%;
margin-top: var(--sub-formail-contents-input-marginTop);
border-bottom: var(--sub-formail-contents-input-border);
padding-bottom: var(--sub-formail-contents-input-padding);
padding-left: var(--sub-formail-contents-input-padding);
background: var(--sub-formail-contents-input-bg);
}
.formmail-line input:focus {
border-bottom: var(--sub-formail-contents-input-border-focus);
}
.formmail-frame textarea {
width: 100%;
padding: var(--sub-formail-contents-textarea-padding);
margin-top: var(--sub-formail-contents-textarea-marginTop);
border-top: var(--sub-formail-contents-textarea-border);
border-bottom: var(--sub-formail-contents-textarea-border);
background: var(--sub-formail-contents-textarea-bg);
}
.formmail-frame textarea:focus {
border-top: var(--sub-formail-contents-textarea-border-focus);
border-bottom: var(--sub-formail-contents-textarea-border-focus);
}
.formmail-btn {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
gap: var(--sub-formail-contents-btn-wrap-gap);
}
.formmail-btn input {
font-size: var(--sub-formail-contents-btn-input-font-size);
font-family: var(--font-KR-base-2);
font-weight: var(--sub-formail-contents-btn-input-font-weight);
color: var(--sub-formail-contents-btn-input-font-color);
padding: var(--sub-formail-contents-btn-input-font-padding);
cursor: pointer;
background: var(--sub-formail-contents-btn-input-font-bgColor);
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.formmail-wrap-visit .formmail-btn input {
color: var(--sub-formail-visit-btn-input-font-color);
background: var(--sub-formail-visit-btn-input-font-bgColor);
}
.formmail-btn input.hover {
background: var(--sub-formail-contents-btn-input-hover-bgColor);
}
.formmail-wrap-visit .formmail-btn input.hover {
color: var(--sub-formail-contents-btn-input-hover-textColor);
}
.input-alert {
position: absolute;
right: var(--sub-formail-contents-alert-pos-right);
bottom: var(--sub-formail-contents-alert-pos-bottom);
text-align: right;
z-index: 1;
font-size: var(--sub-formail-contents-alert-font-size);
font-weight: var(--sub-formail-contents-alert-font-weight);
color: var(--sub-formail-contents-alert-font-color);
}
.formmail-wrap-visit .input-alert {
color: var(--sub-formail-visit-alert-font-color);
}
.ui-datepicker-trigger {
position: absolute;
right: var(--sub-formail-contents-calendar-pos-right);
bottom: var(--sub-formail-contents-calendar-pos-bottom);
}
/* #################################### Footer #################################### */
.footer-logo-info-wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--footer-info-wrap-gap);
}
.footer-logo-wrap {
width: var(--footer-info-logo-size);
}
.footer-info-wrap h1,
.footer-info-wrap p,
.footer-menu-wrap ul li {
font-size: var(--footer-info-font-size);
font-weight: var(--footer-info-font-weight);
}
.footer-info-wrap h1 {
font-size: var(--footer-info-title-size);
font-weight: var(--footer-info-title-weight);
}
.footer-menu-wrap ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--footer-info-menu-gap);
}
.footer-menu-wrap li {
position: relative;
padding: var(--footer-info-menu-padding);
background: var(--footer-info-menu-bgColor);
border: var(--footer-info-menu-border);
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.footer-menu-wrap li::before,
.footer-menu-wrap li::after {
display: block;
content: "";
position: absolute;
}
.footer-menu-wrap li::before {
right: var(--footer-info-menu-pointBg-pos);
top: var(--footer-info-menu-pointBg-pos);
width: var(--footer-info-menu-pointBg-size);
height: var(--footer-info-menu-pointBg-size);
background: var(--footer-info-menu-pointBg-bgColor);
border-radius: 100px;
}
.footer-menu-wrap li::after {
right: var(--footer-info-menu-circle-pos);
top: var(--footer-info-menu-circle-pos);
width: var(--footer-info-menu-circle-size);
height: var(--footer-info-menu-circle-size);
border: var(--footer-info-menu-circle-border);
border-radius: 100px;
}
.footer-menu-wrap a {
font-weight: var(--footer-info-menu-font-weight);
color: var(--footer-info-menu-font-color);
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.footer-menu-wrap li.hover {
border: var(--footer-info-menu-hover-border);
background: var(--signature-color);
}
.footer-menu-wrap li.hover a {
color: var(--footer-info-menu-hover-text-color);
}
.footer-info-wrap h1 {
margin-top: var(--footer-info-company-margin);
}
.footer-info-wrap p {
margin-top: var(--footer-info-detail-margin);
}
.footer-info-wrap p:nth-child(5) span {
color: var(--signature-color);
}
.footer-gnb-wrap {
position: relative;
}
.footer-gnb-frame {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
gap: var(--footer-gnb-wrap-gap);
cursor: grab;
}
.footer-gnb-common {
width: var(--footer-gnb-wrap-width);
}
.footer-gnb-common h1 {
padding-bottom: var(--footer-gnb-1depth-padding);
border-bottom: var(--footer-gnb-1depth-border);
text-align: right;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.footer-gnb-common h1 a {
font-size: var(--footer-gnb-1depth-font-size);
font-weight: var(--footer-gnb-1depth-font-weight);
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.footer-gnb-common h1.hover {
border-bottom: var(--footer-gnb-1depth-hover-border);
}
.footer-gnb-common h1.hover a {
color: var(--signature-color);
}
.footer-gnb-common ul {
margin-top: var(--footer-gnb-2depth-wrap-margin);
}
.footer-gnb-common li {
margin-top: var(--footer-gnb-2depth-menu-margin);
}
.footer-gnb-common ul > li > a {
font-size: var(--footer-gnb-2depth-font-size);
font-weight: var(--footer-gnb-2depth-font-weight);
text-align: right;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.footer-gnb-common ul > li.hover > a {
color: var(--signature-color);
text-decoration: underline;
}
/* **************************************************************
### Responsive Area
************************************************************** */
@media all and (max-width: 1840px) {
/* #################################### Main #################################### */
.main-brdige-circle-fill {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
transform: translate(-100%, -66%);
-webkit-transform: translate(-100%, -66%);
}
.main-bridge-text {
position: absolute;
left: 0;
top: 50%;
right: auto;
transform: translateY(83%);
-webkit-transform: translateY(83%);
width: 90%;
padding-left: 5%;
text-align: right;
}
.main-bridge-link a {
justify-content: flex-end;
}
}
@media all and (max-width: 1600px) {
/* #################################### History #################################### */
.sub-contents-history-list-frame {
flex-wrap: wrap;
}
.sub-contents-history-list-contents {
width: var(--sub-history-list-frame-detail-list-width);
}
.sub-contents-history-list-img {
width: var(--sub-history-list-frame-detail-img-width);
margin-top: var(--sub-history-list-frame-detail-img-marginTop);
margin-left: var(--sub-history-list-frame-detail-img-marginLeft);
}
/* #################################### CI #################################### */
.sub-contents-identi-list ul {
flex-wrap: wrap;
}
.sub-contents-identi-list li:nth-child(3),
.sub-contents-identi-list li:nth-child(4) {
margin-top: 30px;
}
/* #################################### Footer #################################### */
.footer-gnb-wrap {
order: 1;
}
.footer-gnb-frame {
gap: var(--footer-gnb-wrap-gap);
}
.footer-logo-info-wrap {
width: 100%;
padding-top: var(--footer-logo-wrap-paddingTop);
border-top: var(--footer-logo-wrap-border);
order: 2;
}
.footer-info-wrap {
position: relative;
width: var(--footer-info-wrap-width);
}
.footer-info-wrap p:nth-child(6) {
margin-top: 0;
position: absolute;
right: 0;
bottom: 0;
font-size: var(--footer-info-copy-size);
}
}
@media all and (max-width: 1580px) {
/* #################################### CI #################################### */
.sub-contents-color-content-wrap {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.sub-contents-color-content-pantone-wrap {
width: 100%;
height: var(--sub-ci-color-contents-common-wrap-height);
}
.sub-contents-color-content-gradient-wrap {
height: var(--sub-ci-color-contents-common-wrap-height);
margin-top: var(--sub-ci-gradient-wrap-marginTop);
align-items: flex-end;
}
.sub-contents-color-content-gradient-bottom {
justify-content: space-between;
}
}
@media all and (max-width: 1526px) {
/* #################################### Full GNB #################################### */
.gnb-full-left-top {
left: var(--header-gnb-full-padding-common);
top: var(--header-gnb-full-logo-pos-top);
z-index: 2;
}
.gnb-full-left-bottom {
display: none;
}
.gnb-full-video {
display: none;
}
.gnb-full-left-middle {
left: 0;
top: auto;
bottom: var(--header-gnb-full-middle-pos-bottom);
right: 0;
margin: 0 auto;
transform: translateY(0);
-webkit-transform: translateY(0);
background: var(--header-gnb-full-middle-bgColor);
padding: var(--header-gnb-full-middle-padding);
border-radius: 300px;
z-index: 2;
}
.gnb-full-right-wrap {
left: 0;
top: 0;
bottom: 0;
margin: auto;
right: 0;
width: var(--header-gnb-full-menu-width);
height: var(--header-gnb-full-menu-height);
max-height: var(--header-gnb-full-menu-max-height);
padding: var(--header-gnb-full-menu-padding);
overflow-y: auto;
cursor: grab;
background: var(--header-gnb-full-menu-background);
border-radius: var(--header-gnb-full-menu-borderRadius);
}
.gnb-menu-pos {
align-items: flex-start;
}
.gnb-menu-common:last-child {
padding-bottom: var(--header-gnb-full-menu-last-padding);
}
.gnb-full-close,
.gnb-menu-frame::before {
position: fixed;
}
.gnb-full-close {
right: var(--header-gnb-full-padding-common);
top: var(--header-gnb-full-close-top-pos);
}
.gnb-menu-frame::before {
display: none;
}
}
@media all and (max-width: 1480px) {
/* #################################### Quality #################################### */
.sub-contents-quality-1-wrap,
.sub-contents-quality-2-wrap {
flex-direction: column;
align-items: flex-end;
}
.sub-contents-quality-info {
margin-top: var(--sub-quality-contents-info-wrap-marginTop);
}
}
@media all and (max-width: 1400px) {
/* #################################### Business #################################### */
.sub-contents-business-title-wrap {
flex-direction: column;
}
.sub-contents-business-title-img {
width: var(--sub-business-title-img-width);
margin-top: var(--sub-business-title-img-marginTop);
align-self: end;
}
}
@media all and (max-width: 1380px) {
/* #################################### CI #################################### */
.sub-contents-slogan-wrap {
flex-direction: column;
}
.sub-contents-slogan-img {
height: var(--sub-ci-slogan-img-height);
margin-top: var(--sub-ci-slogan-img-marginTop);
align-self: end;
}
}
@media all and (max-width: 1280px) {
/* #################################### Header #################################### */
.header-gnb-wrap {
position: absolute;
left: auto;
right: var(--header-wrap-gap);
}
.header-logo-wrap {
left: var(--header-wrap-gap);
right: auto;
}
.header-right-wrap {
right: calc(var(--header-wrap-gap) * 2);
display: none;
}
/* #################################### Overview #################################### */
.sub-contents-overview-2-1,
.sub-contents-overview-2-2 {
flex-direction: column;
}
.sub-contents-overview-text,
.sub-contents-overview-img-common {
width: 100%;
}
.sub-contents-overview-img-common {
height: 280px;
}
/* #################################### Mission&Vision #################################### */
.sub-contents-mv-1-wrap,
.sub-contents-mv-2-list ul {
flex-direction: column;
}
.sub-contents-mv-2-list ul {
align-items: flex-end;
}
.sub-contents-mv-1-left-wrap,
.sub-contents-mv-1-right-wrap {
width: 100%;
}
.sub-contents-mv-1-effect-wrap {
display: none;
}
/* #################################### Location #################################### */
.sub-contents-location-list {
flex-direction: column;
}
}
@media all and (max-width: 1230px) {
/* #################################### Main #################################### */
.main-brdige-circle-fill {
width: 80%;
height: 40%;
left: 10%;
top: 13vh;
transform: none;
-webkit-transform: none;
border-radius: 24px;
}
.main-bridge-text {
width: 100%;
padding: 0 10%;
left: 0;
top: 60vh;
transform: none;
-webkit-transform: none;
text-align: center;
}
.main-bridge-link a {
justify-content: center;
}
}
@media all and (max-width: 1200px) {
/* #################################### Main #################################### */
.main-visual-3-title {
width: var(--main-visual-3-slide-product-width);
right: 0;
margin: 0 auto;
transform: none;
-webkit-transform: none;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
border-bottom: var(--main-visual-3-slide-title-border);
padding: var(--main-visual-3-slide-title-padding);
}
.main-visual-3-title h2 span {
display: inline-block;
}
.main-visual-3-title span:nth-child(1) {
margin-left: 20px;
}
.main-visual-3-title span:nth-child(2) {
margin-left: 5px;
}
.main-visual-3-graphic-frame {
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.main-visual-3-product-wrap {
left: 0;
margin: 0 auto;
}
.main-visual-3-product-wrap li a {
color: #fff;
}
.main-visual-4-text-common p {
text-align: center;
}
}
@media all and (max-width: 1100px) {
/* #################################### Footer #################################### */
.intro-text-wrap span {
display: block;
}
}
@media all and (max-width: 1074px) {
/* #################################### Footer #################################### */
.footer-gnb-wrap {
width: 100%;
height: var(--footer-gnb-wrap-height);
cursor: pointer;
overflow-x: auto;
}
.footer-gnb-frame {
position: absolute;
left: 0;
top: 0;
width: auto;
gap: var(--footer-gnb-wrap-gap);
}
.footer-gnb-common {
width: var(--footer-gnb-wrap-width);
}
.footer-info-wrap {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-end;
}
.footer-info-wrap p:nth-child(6) {
margin-top: var(--footer-info-copy-margin);
position: relative;
right: auto;
bottom: auto;
font-size: var(--footer-info-copy-size);
}
}
@media all and (max-width: 1000px) {
/* #################################### Main #################################### */
.main-visual-1-img-left {
transform: rotate(53deg) translateX(-71%) translateY(-59%);
-webkit-transform: rotate(53deg) translateX(-71%) translateY(-59%);
}
.main-visual-1-img-right {
transform: rotate(13deg) translateX(33%) translateY(20%);
-webkit-transform: rotate(13deg) translateX(33%) translateY(20%);
}
/* #################################### Search #################################### */
.search-full-close {
right: 0;
left: 0;
top: auto;
bottom: 10%;
margin: auto;
width: var(--header-gnb-full-close-size);
height: var(--header-gnb-full-close-size);
cursor: pointer;
z-index: 1;
}
.search-full-close span {
height: var(--header-gnb-full-close-height);
}
.search-favorite-wrap li span {
display: block;
}
}
@media all and (max-width: 973px) {
/* #################################### CI #################################### */
.sub-contents-brand-title {
flex-direction: column;
}
.sub-contents-brand-title h1 {
width: 100%;
margin-top: var(--sub-ci-h1-marginTop);
text-align: center;
}
.sub-contents-brand-title::before {
height: var(--sub-ci-title-logo-height);
}
.sub-contents-slogan-img {
border-radius: 0;
}
.sub-contents-slogan-text {
width: var(--sub-ci-common-info-width);
}
.sub-contents-slogan-text img {
width: var(--sub-ci-slogan-img-size);
}
}
@media all and (max-width: 870px) {
/* #################################### History #################################### */
.sub-contents-history-list-detail {
flex-wrap: wrap;
}
.sub-contents-history-list-contents {
margin-left: var(--sub-history-list-frame-detail-list-marginLeft);
margin-top: var(--sub-history-list-frame-detail-list-marginTop);
}
}
@media all and (max-width: 850px) {
/* #################################### Sub Header #################################### */
.sub-header-visual-top h1 span {
display: block;
}
.sub-header-bg-common h1 span {
display: block;
}
}
@media all and (max-width: 790px) {
/* #################################### Qna #################################### */
.sub-contents-qna-tab ul {
height: auto;
flex-wrap: wrap;
}
.sub-contents-qna-tab li {
height: 150px;
border-radius: 0;
margin: 0;
}
}
@media all and (max-width: 786px) {
/* #################################### CI #################################### */
.sub-contents-identi-list li:nth-child(1),
.sub-contents-identi-list li:nth-child(2),
.sub-contents-identi-list li:nth-child(3),
.sub-contents-identi-list li:nth-child(4) {
margin-top: 20px;
}
}
@media all and (max-width: 710px) {
/* #################################### CI #################################### */
.sub-contents-color-content-gradient-bottom {
flex-direction: column;
align-items: flex-start;
margin-top: var(--sub-ci-gradient-bottom-wrap-marginTop);
}
}
@media all and (max-width: 829px) {
/* #################################### Intro #################################### */
.intro-text-wrap h1 span,
.intro-text-wrap h2 span {
display: block;
}
}
@media all and (max-width: 800px) {
/* #################################### Full GNB #################################### */
.gnb-menu-common ul {
flex-direction: column;
padding-left: var(--header-gnb-full-menu-common-padding);
}
.gnb-menu-common {
align-items: flex-start;
flex-direction: column;
}
}
@media all and (max-width: 650px) {
/* #################################### CI #################################### */
.sub-contents-color-content-pantone-wrap {
height: auto;
}
.sub-contents-color-content-pantone-frame {
height: auto;
flex-direction: column;
}
.sub-contents-color-content-pantone-left {
height: 190px;
}
.sub-contents-color-content-pantone-right ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}
.sub-contents-color-content-pantone-right li {
align-items: center;
padding: 14px 0;
border-bottom: var(--sub-ci-color-contents-pantone-right-info-6-border-color);
}
.sub-contents-color-content-gradient-top {
flex-direction: column;
}
.sub-contents-color-content-gradient-img {
margin: 0 auto;
}
.sub-contents-color-content-gradient-bar-wrap {
width: 100%;
height: auto;
margin-top: 42px;
}
.sub-contents-color-content-gradient-text {
margin-top: 10px;
}
.sub-contents-color-content-gradient-bottom {
margin-top: 70px;
}
}
@media all and (max-width: 630px) {
/* #################################### Main #################################### */
.main-visual-connect-text-wrap {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: space-around;
}
.main-visual-connect-text-wrap p {
padding: var(--main-visual-common-copy-font-padding);
text-align: center;
}
.main-visual-1-text p:nth-child(1) {
background: #212121;
}
.main-visual-1-text p:nth-child(3) {
background: #fff;
}
.main-text-connect-line {
width: 1px;
height: 0;
position: absolute;
left: 12%;
right: auto;
top: 0;
bottom: 0;
margin: auto 0;
}
.main-visual-1-wrap::before {
background: var(--main-visual-1-right-bgColor) url(../img/main_1_bg.jpg) center center no-repeat;
background-size: cover;
}
.main-visual-2-text li span {
display: block;
}
}
@media all and (max-width: 600px) {
/* #################################### Footer #################################### */
.footer-logo-info-wrap {
flex-direction: column;
}
.footer-info-wrap {
width: 100%;
align-items: flex-start;
}
}
@media all and (max-width: 540px) {
/* #################################### Qna #################################### */
.sub-contents-qna-tab-common h2 {
width: var(--sub-quality-title-sub-h2-width);
text-align: center;
}
}
@media all and (max-width: 500px) {
/* #################################### Main #################################### */
.main-visual-3-title h2 span:nth-child(1),
.main-visual-3-title h2 span:nth-child(2) {
display: block;
margin-left: 0;
}
.main-visual-3-title h2 span:nth-child(1) {
margin-top: 10px;
}
.main-visual-3-title h2 span {
text-align: center;
}
.main-visual-3-graphic-frame {
transform: translate(-50%, 6%);
-webkit-transform: translate(-50%, 6%);
}
/* #################################### Footer #################################### */
.footer-info-wrap p:nth-child(6) span {
display: block;
}
}
@media all and (max-width: 499px) {
/* #################################### Sub Header #################################### */
.sub-loading-line-wrap {
transform: translate(-50%, 17%);
-webkit-transform: translate(-50%, 15%);
}
/* #################################### Overview #################################### */
.sub-contents-overview-1 h1 {
word-break: break-all;
line-height: 0.8;
}
.sub-contents-overview-1 p {
top: 53%;
}
}