@charset "utf-8";

/* #################################### Header #################################### */
header {
    position: fixed;
    left: 0;
    top: var(--header-wrap-init-pos);
    width: 100vw;
    height: var(--header-wrap-height);
    z-index: 10;
    filter: var(--main-effect-filter-blur);
    background: var(--header-wrap-bgColor-basic);
}

nav {
    position: fixed;
    left: -100vw;
    top: 0;
    width: 100vw;
    height: 100svh;
    background: var(--header-gnb-full-bgColor);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    overflow: hidden;
    z-index: 11;
    opacity: var(--main-effect-opacity);
    backdrop-filter: var(--main-effect-filter-blur);
}

aside {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #fff;
    opacity: var(--main-effect-opacity);
    z-index: 11;
}


/* #################################### Loading #################################### */
.sub-loading-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    z-index: 101;
    backdrop-filter: var(--loading-bg-filter-set);
}

.sub-loading-mark {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: var(--loading-mark-size);
    height: var(--loading-mark-size);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    border: var(--loading-mark-border);
    border-radius: 500px;
}

.sub-loading-logo {
    width: var(--loading-mark-logo-size);
    height: auto;
}

.sub-loading-text {
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: var(--loading-mark-text-marginTop);
}

.sub-loading-text h1 {
    font-size: var(--loading-mark-text-size);
    text-transform: uppercase;
    color: var(--loading-mark-text-color);
    font-weight: var(--loading-mark-text-weight);
    letter-spacing: var(--loading-mark-text-spacing);
}

.sub-loading-line-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--loading-line-weight);
    height: var(--loading-line-bg-height);
    background: var(--loading-line-bg-color);
    border-radius: 500px;
    transform: translate(-50%, 10%);
    -webkit-transform: translate(-50%, 10%);
    overflow: hidden;
}

.sub-loading-line-wrap::before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: var(--loading-line-active-height);
    background: var(--loading-line-active-color);
}


/* #################################### Sub Header #################################### */
.sub-header-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 3;
}

.sub-header-bg-common {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100svh;
    z-index: -1;
    overflow: hidden;
}

.sub-header-bg-overview {
    background: var(--sub-header-fixedBg-overview);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-mission {
    background: var(--sub-header-fixedBg-mission);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-history {
    background: var(--sub-header-fixedBg-history);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-brand {
    background: var(--sub-header-fixedBg-brand);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-location {
    background: var(--sub-header-fixedBg-location);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-applications_home {
    background: var(--sub-header-fixedBg-applications_home);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-applications_car {
    background: var(--sub-header-fixedBg-applications_car);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-ir_receiver {
    background: var(--sub-header-fixedBg-ir_receiver);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-optical_sensor {
    background: var(--sub-header-fixedBg-optical_sensor);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-fiber_optic {
    background: var(--sub-header-fixedBg-fiber_optic);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-car_led {
    background: var(--sub-header-fixedBg-car_led);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-car_pressure {
    background: var(--sub-header-fixedBg-car_pressure);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-finance {
    background: var(--sub-header-fixedBg-finance);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-announcement {
    background: var(--sub-header-fixedBg-announcement);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-technology {
    background: var(--sub-header-fixedBg-technology);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-quality {
    background: var(--sub-header-fixedBg-quality);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-certificate {
    background: var(--sub-header-fixedBg-qna);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-visit {
    background: var(--sub-header-fixedBg-visit);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-bg-search {
    background: var(--sub-header-fixedBg-search);
    background-size: cover;
    background-attachment: fixed;
}

.sub-header-visual-top {
    position: relative;
    width: 100%;
    height: var(--sub-header-visual-common-height);
    background: var(--sub-header-visual-Bg-color);
    overflow: hidden;
}

.sub-header-img-common {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: var(--sub-header-visual-Bg-init-scale);
    opacity: var(--sub-header-visual-Bg-init-opacity);
}

.sub-header-img-overview {
    background: var(--sub-header-visual-Bg-img-overview);
    background-size: cover;
}

.sub-header-img-mission {
    background: var(--sub-header-visual-Bg-img-mission);
    background-size: cover;
}

.sub-header-img-history {
    background: var(--sub-header-visual-Bg-img-history);
    background-size: cover;
}

.sub-header-img-brand {
    background: var(--sub-header-visual-Bg-img-brand);
    background-size: cover;
}

.sub-header-img-location {
    background: var(--sub-header-visual-Bg-img-location);
    background-size: cover;
}

.sub-header-img-applications_home {
    background: var(--sub-header-visual-Bg-img-applications_home);
    background-size: cover;
}

.sub-header-img-applications_car {
    background: var(--sub-header-visual-Bg-img-applications_car);
    background-size: cover;
}

.sub-header-img-ir_receiver,
.sub-header-img-optical_sensor,
.sub-header-img-fiber_optic,
.sub-header-img-car_led,
.sub-header-img-car_pressure {
    background: var(--sub-header-visual-Bg-img-product);
    background-size: cover;

}

.sub-header-img-finance {
    background: var(--sub-header-visual-Bg-img-finance);
    background-size: cover;
}

.sub-header-img-announcement {
    background: var(--sub-header-visual-Bg-img-announcement);
    background-size: cover;
}

.sub-header-img-technology {
    background: var(--sub-header-visual-Bg-img-technology);
    background-size: cover;
}

.sub-header-img-quality {
    background: var(--sub-header-visual-Bg-img-quality);
    background-size: cover;
}

.sub-header-img-certificate {
    background: var(--sub-header-visual-Bg-img-qna);
    background-size: cover;
}

.sub-header-img-visit {
    background: var(--sub-header-visual-Bg-img-visit);
    background-size: cover;
}

.sub-header-img-search {
    background: var(--sub-header-visual-Bg-img-search);
    background-size: cover;
}

.sub-video-common {
    position: fixed;
    left: 0;
    top: 0;
    height: var(--sub-header-visual-common-height);
    filter: var(--main-effect-filter-blur);
    opacity: var(--main-effect-opacity);
}

.sub-header-video-top {
    background: var(--sub-header-video-scroll-bg);
    opacity: var(--sub-header-video-scroll-opacity);
}

.sub-video-1 {
    opacity: var(--sub-header-video-basic-1);
}

.sub-video-2 {
    opacity: var(--sub-header-video-basic-2);
}

.sub-video-3 {
    opacity: var(--sub-header-video-basic-3);
}

.sub-video-4 {
    opacity: var(--sub-header-video-basic-4);
}

.sub-header-common-black {
    background: var(--sub-header-video-basic-bs-color);
    opacity: var(--sub-header-video-basic-bs-opacity);
}

.sub-header-bg-common h1,
.sub-header-common-logo {
    position: absolute;
    top: 50%;
    z-index: 1;
}

.sub-header-bg-common h1 {
    right: var(--sub-header-fixedBg-title-pos);
    color: var(--sub-header-fixedBg-title-color);
    font-size: var(--sub-header-fixedBg-title-size);
    font-weight: var(--sub-header-fixedBg-title-weight);
    transform: translateY(-90%);
    -webkit-transform: translateY(-90%);
    text-align: right;
}

.sub-header-common-logo {
    right: var(--sub-header-fixedBg-logo-pos);
    width: var(--sub-header-fixedBg-logo-size);
    transform: translateY(32%);
    -webkit-transform: translateY(32%);
}

.sub-header-visual-top h1 {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    font-size: var(--sub-header-title-size);
    font-weight: var(--sub-header-title-weight);
    font-family: var(--font-KR-base-2);
    color: var(--sub-header-title-color);
    text-align: center;
    letter-spacing: var(--sub-header-title-spacing);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    filter: var(--main-effect-filter-blur);
    opacity: var(--main-effect-opacity);
    padding: 0 10%;
}

.sub-header-visual-bottom {
    width: 100%;
    height: var(--sub-header-bottom-height);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    background: var(--sub-header-bottom-bgColor);
}

.sub-header-visual-bottom::before {
    display: block;
    content: "";
    width: 100%;
    height: var(--sub-header-scroll-height);
    position: absolute;
    left: 0;
    top: var(--header-wrap-sub-scroll-top-height);
    background: var(--sub-header-scroll-bgColor);
    opacity: var(--main-effect-opacity);
}

.sub-location-wrap {
    position: relative;
    width: auto;
    max-width: var(--sub-header-location-width);
    height: var(--sub-header-location-height);
    margin-top: var(--sub-header-location-marginTop);
    opacity: var(--main-effect-opacity);
    overflow: hidden;
    cursor: grab;
}

.sub-location-wrap::before,
.sub-location-wrap::after {
    display: block;
    content: "";
    height: var(--sub-header-location-weight);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 100px;
}

.sub-location-wrap::before {
    width: 100%;
    background: var(--sub-header-location-bg-color);
}

.sub-location-wrap::after {
    width: 100%;
    background: var(--signature-color);
    opacity: var(--main-effect-opacity);
    z-index: 1;
}

.sub-location-wrap ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--sub-header-location-gap);
    overflow-x: auto;
}

.sub-location-wrap li {
    padding: var(--sub-header-location-menu-padding);
}

.sub-location-wrap a {
    font-size: var(--sub-header-location-menu-font-size);
    font-weight: var(--sub-header-location-menu-font-weight);
    white-space: nowrap;
}

.sub-header-marker-wrap {
    position: relative;
    width: 100%;
    height: var(--sub-header-marker-height);
    filter: var(--main-effect-filter-blur);
    opacity: var(--main-effect-opacity);
    display: block;
}

.sub-header-marker-wrap h2 {
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: var(--sub-header-marker-title-marginTop);
    font-size: var(--sub-header-marker-title-font-size);
    font-weight: var(--sub-header-marker-title-font-weight);
}

.sub-header-marker-graphic {
    position: relative;
    width: var(--sub-header-marker-graphic-size);
    height: var(--sub-header-marker-graphic-size);
    margin: var(--sub-header-marker-graphic-marginTop);
}

.sub-header-marker-icon-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
}

.sub-header-marker-wrap svg {
    width: 100%;
    height: 100%;
}

.sub-header-marker-wrap circle {
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke: url(#gradient_sub_top);
    stroke-width: var(--sub-header-marker-circle-stroke-width);
    r: var(--sub-header-marker-circle-r-size);
}

.sub-header-marker-icon-wrap i {
    position: relative;
    font-size: var(--sub-header-marker-icon-size);
    top: var(--sub-header-marker-icon-pos);
    color: var(--base-color-darkGrey);
}

.sub-header-marker-icon-wrap::before,
.sub-header-marker-icon-wrap::after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    margin: 0 auto;
}

.sub-header-marker-icon-wrap::before {
    width: var(--sub-header-marker-line-width);
    height: 0;
    background: var(--sub-header-marker-line-color);
}

.sub-header-marker-icon-wrap::after {
    width: var(--sub-header-marker-point-size);
    height: var(--sub-header-marker-point-size);
    border-radius: 100px;
    background: var(--sub-header-marker-point-color)
}


/* #################################### Content #################################### */
.sub-contents-wrap {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    margin: 0 auto;
    margin-top: var(--sub-contents-wrap-setPOS);
    padding-top: var(--sub-contents-wrap-paddingTop);
    background: var(--sub-contents-wrap-color);
}

.sub-contents-mission,
.sub-contents-quality, 
.sub-contents-location,
.sub-contents-brand,
.sub-contents-business,
.sub-contents-applications_home,
.sub-contents-applications_car,
.sub-contents-ir_receiver,
.sub-contents-optical_sensor,
.sub-contents-fiber_optic,
.sub-contents-car_led,
.sub-contents-car_pressure,
.sub-contents-announcement,
.sub-contents-finance,
.sub-contents-technology,
.sub-contents-search {
    border-bottom: var( --sub-contents-divide-last-line);
}

.sub-contents-certificate,
.sub-contents-visit {
    position: relative;
    padding-bottom: var(--sub-contents-wrap-paddingBottom);
}

.sub-contents-visit {
    background: var(--sub-visit-tab-bg);
    background-size: cover;
    background-attachment: fixed;
}


/* #################################### Footer #################################### */
footer {
    position: relative;
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 100px 7.5%;
    background: var(--footer-bgColor);
}


/* **************************************************************
    ### Responsive Area
************************************************************** */
@media all and (max-width: 1600px) {
    /* #################################### Footer #################################### */
    footer {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: var(--footer-wrap-gap);
    }
}