@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/leetaewook/gmarket-sans-dynamic-subset/GmarketSans.css");

@font-face {
    font-family: "SUITE";
    font-weight: 300;
    src: url("./font/SUITE-Light.woff2") format("woff2");
}
@font-face {
    font-family: "SUITE";
    font-weight: 400;
    src: url("./font/SUITE-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "SUITE";
    font-weight: 500;
    src: url("./font/SUITE-Medium.woff2") format("woff2");
}
@font-face {
    font-family: "SUITE";
    font-weight: 600;
    src: url("./font/SUITE-SemiBold.woff2") format("woff2");
}
@font-face {
    font-family: "SUITE";
    font-weight: 700;
    src: url("./font/SUITE-Bold.woff2") format("woff2");
}
@font-face {
    font-family: "SUITE";
    font-weight: 800;
    src: url("./font/SUITE-ExtraBold.woff2") format("woff2");
}
@font-face {
    font-family: "SUITE";
    font-weight: 900;
    src: url("./font/SUITE-Heavy.woff2") format("woff2");
}

@font-face {
    font-family: "GmarketSansMedium";
    font-weight: normal;
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
    font-style: normal;
}

@media all and (min-width: 1025px) {
    .condor-top-section {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 91.5%;
        background: #000;
    }
    .condor-top-section .box {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0 20px;
        align-items: center;
        justify-content: flex-start;
        z-index: 10;
        box-sizing: border-box;
    }
}

@media all and (min-width: 1921px) {
    .condor-top-section {
        height: 1800px;
        max-height: 1800px;
        padding-bottom: 0;
    }
    .condor-top-section .box {
        position: relative;
        height: auto;
    }
    .condor-top-section.active .bg {
        background-size: cover;
    }
}

br.__m {
    display: none;
}
.main-title {
    text-align: center;
}

/* .condor-top-section .bg { background-position:center top; background-repeat: no-repeat; background-image:url(../img/sub/condor/condor-top-bg01.jpg); transition:0.4s cubic-bezier(0.4, 0, 1, 1); mask-image: radial-gradient(circle at 0% 0%, #000 0%, #000 25%, transparent 50%, transparent 100%); mask-repeat: no-repeat; mask-size: 0vw; width: 100%; height: 100%; display: block; position: absolute; z-index: 0; left: 0; top: 0; } 
    .condor-top-section.active .bg { transition-delay:0.3s; mask-size: 400vw; } */
.condor-section {
    background: #000;
}
.condor-top-section {
    overflow: hidden;
}
.condor-top-section .bg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/sub/condor/condor-top-bg01.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    transition: 2s;
    z-index: 0;
    mix-blend-mode: lighten;
    opacity: 0;
    transform: scale(1.25);
}
.condor-top-section.active .bg {
    transition-delay: 0s;
    opacity: 1;
    transform: none;
}
.condor-top-section .bg2 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/sub/condor/condor-top-bg02.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    transition: 1s;
    z-index: 0;
    mix-blend-mode: lighten;
    opacity: 0;
    filter: blur(36px);
}
.condor-top-section.active .bg2 {
    transition-delay: 0.5s;
    opacity: 0.35;
    transform: none;
    filter: none;
}

.condor-top-section .slo {
    margin-top: 200px;
    margin-bottom: 80px;
    color: #fff;
    font-family: "GmarketSansMedium";
    font-weight: 900;
    font-size: 66px;
    line-height: 82px;
    font-style: italic;
}
.condor-top-section .slo img {
    object-fit: contain;
}
.condor-top-section .red {
    background: linear-gradient(to right, #ff7a8d, #ea1836);
    -webkit-background-clip: text;
    color: transparent;
    color: transparent;
}
.condor-top-section .blue {
    background: linear-gradient(to bottom, #88c4ff, #0e87ff);
    -webkit-background-clip: text;
    color: transparent;
}
.condor-item {
    display: flex;
    gap: 120px;
    width: 100%;
    max-width: 1080px;
    margin-bottom: 150px;
    justify-content: space-between;
}
.condor-item .balls {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}
.condor-item .balls img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.condor-top-section * {
    color: #fff;
    font-family: "SUITE";
    text-align: center;
}
.condor-top-section .bottom {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}
.condor-top-section .label {
    display: flex;
    width: 180px;
    height: 40px;
    background: url(../img/sub/condor/condor-label.png) no-repeat center;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}

.header-titles {
    font-family: "Gmarket Sans";
    font-weight: 700;
    font-size: 60px;
    line-height: 1.4;
    text-wrap: nowrap;
}
.header-titles span {
    font-family: "Gmarket Sans";
    font-weight: 700;
    font-size: 60px;
    line-height: 1.4;
}

@media (min-width: 1024px) and (max-width: 1480px) {
    .condor-top-section .slo {
        flex-direction: column;
    }
    .header-titles {
        flex-direction: column;
        font-weight: 700;
        font-size: 40px;
        line-height: 1.4;
        text-wrap: nowrap;
    }
    .header-titles span {
        font-weight: 700;
        font-size: 40px;
        line-height: 1.4;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .condor-top-section .slo {
        flex-direction: column;
    }
    .header-titles {
        flex-direction: column;
        font-weight: 700;
        font-size: 26px;
        line-height: 1.4;
        text-wrap: nowrap;
    }
    .header-titles span {
        font-weight: 700;
        font-size: 26px;
        line-height: 1.4;
    }
}

.condor-top-section .gradi {
    background: linear-gradient(to top, #b7b7b7, #fff);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 800;
}
.condor-top-section .logo {
    margin-top: 65px;
}
.condor-top-section .logo img {
    width: auto;
    height: auto;
    mix-blend-mode: lighten;
}
.condor-top-section .logo img:first-child {
    max-width: 246px;
}
.condor-top-section .logo .mainslo {
    margin-top: 30px;
    color: #fff;
    font-family: "SUITE";
    font-size: 11px;
    opacity: 0.5;
}
.condor-top-section .logo .line {
    width: 1px;
    height: 50px;
    margin: 30px auto;
    background: #fff;
    opacity: 0.2;
}
.condor-02-section .trigger {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;
}

#balls01 {
    top: 0%;
}
#balls02 {
    top: 5vh;
}
#balls03 {
    top: 25vh;
}
#balls04 {
    top: 100vh;
}

.condor-02-section.scroll {
    position: relative;
    width: 100%;
    height: 450vh;
    background: #000;
}
.animaion-container {
    position: relative;
    width: 100%;
    height: 100vh;
}
.condor-02-section .bg {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: url(../img/sub/condor/condor-02-bg.jpg) no-repeat center;
    background-size: cover;
    justify-content: center;
    align-items: center;
    opacity: 0;
    z-index: 1;
}
.condor-02-section .bg2 {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: url(../img/sub/condor/condor-02-bg.jpg) no-repeat center;
    background-size: cover;
    justify-content: center;
    align-items: center;
    filter: brightness(0.45);
    z-index: 0;
}
.condor-02-section .before {
    display: flex;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.ball01 {
    display: flex;
    position: relative;
    position: relative;
    top: -100%;
    width: 260px;
    height: 260px;
    justify-content: center;
    align-items: center;
}
.ball01 .main-ball {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
}
.ball01 .ball-shadow {
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 260px;
    height: 444px;
    z-index: 8;
    opacity: 0;
}
.ball01 .ball-flame {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1552px;
    height: 7450px;
    transform: translateX(-50%);
    opacity: 1;
}

.animation-container {
    position: relative;
}
.animation-container .after {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 10;
    opacity: 0;
}
.animation-container .after-box {
    display: flex;
    position: relative;
    width: 680px;
    align-items: center;
}
.animation-container .after-box img:last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    object-fit: contain;
    opacity: 0;
}

.condor-information {
    padding: 200px 0 300px;
}
.condor-information * {
    color: #fff;
    font-family: "SUITE";
}
.condor-information > div ~ div {
    margin-top: 200px;
}
.condor-information .top {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    align-items: center;
}

.condor-information > div {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1240px;
    padding: 0 20px;
    margin: 0 auto;
    align-items: center;
}

.condor-information .white-carbon .img {
    max-width: 580px;
    margin: 0 auto;
}
.condor-information .title {
    display: flex;
    width: 170px;
    height: 50px;
    background: url(../img/sub/condor/condor-title-label.png) no-repeat center;
    font-size: 18px;
    justify-content: center;
    align-items: center;
}
.condor-information .mo_info.__m {
    display: none;
}

.condor-information .main-title {
    margin: 25px auto 55px;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    text-align: center;
}
.condor-information .white-carbon .obj .info {
    max-width: 420px;
    margin: 40px auto 0;
}
.condor-information .spin .obj {
    display: flex;
    gap: 105px;
    width: 100%;
    background: url(../img/sub/condor/condor-03-bg.png) no-repeat center;
    justify-content: center;
}
.condor-information .spin .obj > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.condor-information .spin .name {
    margin: 25px auto 20px;
    font-size: 16px;
}
.condor-information .spin .detial {
    font-weight: 700;
    font-size: 30px;
}
.condor-information .spin .info {
    display: flex;
    position: relative;
    max-width: 920px;
    margin-top: 120px;
    justify-content: center;
}
.condor-information .spin .info > div:not(.line) {
    position: relative;
    width: 234px;
    z-index: 10;
}
.condor-information .spin .info .line {
    position: absolute;
    top: 50%;
    width: 900px;
    height: 8px;
    background-color: #8c0e20;
    z-index: 0;
    transform: translateY(-50%);
}
.condor-information .spin .info .line::after {
    display: block;
    position: absolute;
    top: 50%;
    right: -20px;
    width: 20px;
    height: 16px;
    background: url(../img/sub/condor/condor-03-arr.png) no-repeat center;
    content: "";
    transform: translateY(-50%);
}

.condor-graph {
    position: relative;
    padding: 200px 0 230px;
    background: url(../img/sub/condor/condor-04-bg.jpg) no-repeat center;
    background-size: cover;
}
.condor-graph * {
    color: #fff;
    font-family: "SUITE";
}
.condor-graph .white-carbon .obj {
    max-width: 580px;
}
.mo_info.__p {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.mo_info.__p p {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: auto;
    min-width: 420px;
    height: 60px;
    padding: 0 30px 0 60px;
    border: 1px solid rgba(255, 0, 0, 0.6);
    line-height: 58px;
    align-items: center;
    border-radius: 30px;
}
.mo_info p::before {
    display: block;
    position: absolute;
    top: 0;
    left: 18px;
    width: 20px;
    height: 100%;
    background: url(../img/sub/condor/condor-img02-chk.png) no-repeat center;
    background-size: contain;
    content: "";
    z-index: 5;
}
.mo_info p::after {
    display: block;
    position: absolute;
    top: -50px;
    left: -50px;
    width: 100px;
    height: 100px;
    background: #8c0e20;
    content: "";
    filter: blur(30px);
    z-index: 0;
}
.mo_info p ~ p {
    margin-top: 15px;
}
.mo_info p span {
    position: relative;
    font-size: 20px;
    z-index: 10;
}

.condor-graph .title {
    display: flex;
    width: 118px;
    height: 50px;
    background: url(../img/sub/condor/condor-title-label2.png) no-repeat center;
    font-size: 18px;
    justify-content: center;
    align-items: center;
}
.condor-graph .main-title {
    margin: 25px auto 55px;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
}
.condor-graph .top {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.condor-graph .graph {
    position: relative;
    width: 100%;
    max-width: 1080px;
    height: 360px;
    margin: 0 auto;
}
.condor-graph .graph.__m {
    display: none;
}
.condor-graph .graph-legend {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.condor-graph .graph .line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    opacity: 0.2;
}
.condor-graph .graph .line.line01 {
    bottom: 0;
}
.condor-graph .graph .line.line02 {
    bottom: 60px;
}
.condor-graph .graph .line.line03 {
    bottom: 120px;
}
.condor-graph .graph .line.line04 {
    bottom: 180px;
}
.condor-graph .graph .line.line05 {
    bottom: 240px;
}

.graph-item {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 45px;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}
.graph-item .progress {
    display: flex;
    gap: 0px;
    position: relative;
    width: 140px;
    height: 100%;
}
.graph-item .nametag {
    position: absolute;
    bottom: -80px;
    left: 0;
    width: 100%;
}
.graph-item .progress .bar01,
.graph-item .progress .bar02 {
    position: relative;
    width: 70px;
    height: 100%;
}
.graph-item .progress p {
    position: absolute;
    top: -36px;
    left: 50%;
    width: calc(100% + 20px);
    text-align: center;
    text-wrap: nowrap;
    transform: translateX(-50%);
}
.graph-item .progress p img {
    height: 13px;
}
.condor-graph .progress .bar01 div,
.condor-graph .progress .bar02 div {
    display: block;
    position: absolute;
    bottom: 0;
    left: 10px;
    width: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: none;
    background: linear-gradient(to top, #6c6c6c, #c5c5c5);
    border-radius: 8px 8px 0 0;
    box-sizing: border-box;
}
.condor-graph .progress.volvik .bar01 div {
    height: 100%;
    background: linear-gradient(to top, #d6232f, #ff3644);
}
.condor-graph .progress.volvik .bar02 div {
    height: 100%;
    background: linear-gradient(to top, #006cd7, #0e87ff);
}
.progress.item01 .bar01 div {
    height: 63.35%;
}
.progress.item01 .bar02 div {
    height: 62%;
}
.progress.item02 .bar01 div {
    height: 61.38%;
}
.progress.item02 .bar02 div {
    height: 61.38%;
}
.progress.item03 .bar01 div {
    height: 62.28%;
}
.progress.item03 .bar02 div {
    height: 60.8%;
}
.progress.item04 .bar01 div {
    height: 62.5%;
}
.progress.item04 .bar02 div {
    height: 61.95%;
}
.progress.item05 .bar01 div {
    height: 64.15%;
}
.progress.item05 .bar02 div {
    height: 61.62%;
}
.condor-graph .bottom {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 101px;
    background: url(../img/sub/condor/condor-04-notice-bg.png) no-repeat center;
    justify-content: center;
    align-items: center;
}
.condor-graph .bottom .notice {
    display: flex;
    gap: 20px;
    font-size: 14px;
    justify-content: center;
    align-items: center;
}
.condor-graph .bottom img {
    width: auto;
    height: 30px;
}

/* soft cast */
.condor-cast {
    position: relative;
    padding-bottom: 230px;
    margin: 180px auto 0;
}
.condor-cast .top {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.condor-cast * {
    color: #fff;
    font-family: "SUITE";
}
.condor-cast img {
    object-fit: contain;
}

.condor-cast .white-carbon .obj {
    max-width: 580px;
}
.condor-cast .title {
    display: flex;
    width: 138px;
    height: 50px;
    background: url(../img/sub/condor/condor-title-label3.png) no-repeat center;
    font-size: 18px;
    justify-content: center;
    align-items: center;
}
.condor-cast .main-title {
    margin: 25px auto 55px;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
}

.condor-cast .obj {
    position: relative;
    max-width: 756px;
    margin: 90px auto 0;
    z-index: 10;
}
.condor-cast .obj > div:not(.main) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.condor-cast .bg {
    position: absolute;
    top: 12%;
    left: 50%;
    width: 100%;
    max-width: 1415px;
    height: 741px;
    background: url(../img/sub/condor/spark-bg.png) no-repeat center;
    background-size: cover;
    z-index: 0;
    transform: translateX(-50%);
    z-index: 0;
}
.condor-cast .detail .desc {
    display: none;
}

/* 콘도르 상세 */
.condor-spec * {
    color: #fff;
    font-family: "SUITE";
}
.condor-spec {
    padding: 150px 0;
    background: #fff;
}
.condor-spec .wrap {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.condor-spec .item-name {
    margin-bottom: 40px;
    color: #000;
    font-weight: 800;
    font-size: 32px;
    letter-spacing: -0.025em;
    text-align: center;
    text-wrap: nowrap;
}

.condor-spec .img-wrap {
    display: flex;
    padding: 0 105px;
    margin-bottom: 50px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: flex-end;
}
.condor-spec .img-wrap .lef {
    position: relative;
}
.condor-spec .img-wrap .cen span {
    display: block;
    width: 1px;
    height: 165px;
    background-color: #ccc;
    background-image: radial-gradient(white 20%, transparent 20%), radial-gradient(white 20%, transparent 20%);
    background-position: 0 0, 5px 5px;
    background-size: 10px 10px;
}

.condor-spec .img-wrap img {
    width: 100%;
    max-width: 260px;
    object-fit: contain;
}

.condor-spec .table table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}
.condor-spec .table th {
    background: #000;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    line-height: 58px;
}
.condor-spec .table td {
    border-bottom: 1px solid #d3d3d3;
    color: #000;
    font-weight: 400;
    font-size: 18px;
    line-height: 58px;
}

.condor-spec .legend {
    width: 100%;
    background: #000;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    line-height: 58px;
}
.condor-spec ul {
    display: flex;
    text-align: center;
}
.condor-spec ul > li {
    width: 100%;
    font-size: 18px;
}
.condor-spec .item > ul {
    height: 58px;
    border-bottom: 1px solid #d3d3d3;
    color: #000;
    box-sizing: border-box;
}
.condor-spec .item > ul > li {
    display: flex;
    width: 100%;
    height: 100%;
    color: #000;
    justify-content: center;
    align-items: center;
}
.condor-spec .legend.line2 {
    color: #000;
    line-height: 60px;
}
.condor-spec .line2 {
    color: #000;
    line-height: 1.25;
}

.condor-spec .axia-ball li:first-of-type {
    width: 35%;
}

/* 하단 제품링크 */
.condor-link {
    padding: 200px 0 235px;
    background: #f1f1f1;
}
.condor-link * {
    font-family: "SUITE";
}
.condor-link .item-wrap {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    text-align: center;
    justify-content: space-around;
}
.condor-link .condor-title {
    color: #000;
    font-family: "SUITE";
    font-weight: 800;
    font-size: 40px;
}
.condor-link .item-wrap > div {
    display: flex;
    flex-direction: column;
    gap: 65px;
    width: 100%;
    align-items: center;
}
.condor-link .item-wrap > div:first-of-type {
    position: relative;
}
.condor-link .images {
    max-width: 556px;
}
.condor-link .images img {
    object-fit: contain;
}
.condor-link .rig .images {
    max-width: 390px;
    height: 311px;
}
.condor-link .link-btn {
    display: flex;
    width: 210px;
    height: 70px;
    background-color: #000;
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    justify-content: center;
    align-items: center;
}

.condor-link .item-wrap .cen {
    display: block;
    flex-shrink: 0;
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
}
.condor-link .item-wrap .cen .line {
    display: block;
    position: absolute;
    top: 0;
    right: 0px;
    width: 1px;
    height: 100%;
    background: #d3d3d3;
}

/* 반응형 */
@media all and (max-width: 1024px) {
    @media all and (max-width: 400px) {
        .condor-spec .item > ul.line2 {
            height: 60px;
        }
    }
    br.__m {
        display: block;
    }
    .condor-section {
        overflow: hidden;
        margin-top: 50px;
    }
    .condor-top-section .bg,
    .condor-top-section .bg2 {
        background-size: cover;
    }
    .condor-top-section {
        position: relative;
    }
    .condor-top-section .slo {
        display: flex;
        margin-top: 0;
        margin-bottom: 40px;
        align-items: center;
    }

    .condor-spec .item-name {
        margin-bottom: 25px;
        font-size: 28px;
    }

    .condor-top-section .box {
        padding: 50px 20px;
    }
    .condor-item {
        gap: 20px;
        margin-bottom: 60px;
    }
    .condor-top-section .bottom {
        gap: 20px;
    }
    .condor-top-section .label {
        width: 144px;
        height: 32px;
        background-size: contain;
        font-size: 14px;
    }
    .condor-top-section p {
        font-weight: 600;
        font-size: 32px;
    }
    .condor-top-section .gradi {
        background: linear-gradient(to top, #b7b7b7, #fff);
        -webkit-background-clip: text;
        color: transparent;
        font-weight: 800;
    }

    .condor-top-section .bottom {
        width: 55%;
        margin: 0 auto;
    }

    .condor-top-section .bottom img {
        width: auto;
        height: auto;
        max-width: 100%;
    }

    .condor-top-section .logo {
        margin-top: 45px;
    }
    .condor-top-section .logo img {
        width: 50%;
        max-width: 100%;
        height: auto;
        mix-blend-mode: lighten;
    }
    .condor-top-section .logo img:last-child {
        width: 25%;
    }
    .condor-top-section .logo .mainslo {
        margin-top: 15px;
        color: #fff;
        font-family: "SUITE";
        font-size: 10px;
        opacity: 0.5;
    }
    .condor-top-section .logo .line {
        width: 1px;
        height: 30px;
        margin: 15px auto;
        background: #fff;
        opacity: 0.2;
    }
    .condor-information {
        padding: 60px 0 100px;
    }
    .condor-information > div ~ div {
        margin-top: 100px;
    }
    .condor-information .white-carbon .obj {
        max-width: 620px;
        padding: 0 20px;
    }
    .condor-information .title {
        width: 136px;
        height: 32px;
        background-size: contain;
        font-size: 14px;
    }
    .condor-information .main-title {
        margin: 25px auto 55px;
        font-weight: 700;
        font-size: 32px;
        line-height: 1.2;
    }
    .condor-information .white-carbon .obj .info {
        max-width: 600px;
        margin: 40px auto 0;
    }
    .condor-information .white-carbon .obj .info {
        width: 100%;
    }
    .condor-information .spin .detial {
        font-size: 28px;
    }
    .condor-information .spin .obj {
        gap: 30px;
        padding: 0 20px;
        background-size: cover;
    }
    .condor-information .spin .name {
        margin: 15px auto;
        font-size: 14px;
    }
    .condor-information .spin .info {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0 40px;
        margin-top: 60px;
    }
    .condor-information .spin .info > div:not(.line) {
        position: relative;
        width: 100%;
    }
    .condor-information .info > div img {
        position: relative;
        z-index: 10;
    }
    .condor-information .info > div:first-of-type::after {
        display: block;
        position: absolute;
        bottom: 50%;
        left: 50%;
        width: 100%;
        height: 4px;
        background-color: #8c0e20;
        content: "";
        z-index: 0;
    }
    .condor-information .info > div:nth-of-type(2)::after {
        display: block;
        position: absolute;
        bottom: -50%;
        left: 50%;
        width: 4px;
        height: 100%;
        background-color: #8c0e20;
        content: "";
        z-index: 0;
    }
    .condor-information .info > div:nth-of-type(3) {
        grid-column: 2/3;
        grid-row: 2/3;
    }
    .condor-information .info > div:nth-of-type(4) {
        grid-column: 1/2;
        grid-row: 2/3;
    }
    .condor-information .info > div:nth-of-type(3)::after {
        display: block;
        position: absolute;
        bottom: 50%;
        left: -50%;
        width: 100%;
        height: 4px;
        background-color: #8c0e20;
        content: "";
        z-index: 0;
    }
    .condor-information .spin .info .line {
        display: block;
        top: 75%;
        left: 14%;
        width: 40px;
        height: 4px;
        background-size: 32px 4px;
        transform: rotate(-180deg);
    }
    .condor-information .spin .info .line::after {
        right: -14px;
        width: 20px;
        height: 10px;
        background-size: contain;
    }
    .condor-graph .title {
        width: 118px;
        height: 32px;
        background-size: contain;
        font-size: 14px;
        text-align: center;
    }
    .condor-graph .main-title {
        margin: 25px auto 55px;
        font-weight: 700;
        font-size: 32px;
        line-height: 1.2;
    }
    .condor-graph {
        padding: 60px 20px 100px;
    }
    .condor-graph .graph.__p {
        display: none;
    }
    .condor-graph .graph.__m {
        display: block;
        height: auto;
        margin-bottom: 60px;
    }
    .condor-graph .graph.__m img {
        object-fit: contain;
    }
    .condor-graph .bottom .notice {
        padding: 0 40px;
        font-size: 12px;
        box-sizing: border-box;
    }
    .condor-cast .top {
        position: relative;
        z-index: 10;
    }

    .condor-cast {
        padding: 60px 20px 100px;
        margin: 0 auto;
    }
    .condor-cast .title {
        width: 118px;
        height: 32px;
        background-size: contain;
        font-size: 14px;
    }
    .condor-cast .main-title {
        margin: 25px auto 55px;
        font-weight: 700;
        font-size: 32px;
        line-height: 1.2;
    }

    .condor-cast .obj {
        margin: 0 auto 0;
    }

    .condor-cast .bg {
        height: 80%;
        background-size: contain;
    }

    /* 콘도르 상세 */
    .condor-spec {
        padding: 70px 0;
        background: #fff;
    }
    .condor-spec .img-wrap {
        display: flex;
        gap: 12%;
        padding: 0 20px;
        margin-bottom: 30px;
    }

    .condor-spec .img-wrap .cen span {
        height: 22.5vw;
    }

    .condor-spec .img-wrap img {
        max-width: 260px;
        object-fit: contain;
    }
    .condor-spec .table {
        padding: 0 20px;
    }
    .condor-spec .table th {
        min-height: 42px;
        padding: 12px 0;
        font-size: 14px;
        line-height: 1.2;
    }
    .condor-spec .table td {
        min-height: 42px;
        padding: 12px 0;
        font-size: 14px;
        line-height: 1.2;
    }

    .condor-spec .legend {
        width: 100%;
        background: #000;
        color: #fff;
        font-weight: 800;
        font-size: 14px;
        line-height: 42px;
    }
    .condor-spec ul {
        display: flex;
        text-align: center;
    }
    .condor-spec ul > li {
        width: 100%;
        font-size: 14px;
    }
    .condor-spec .item > ul {
        height: 45px;
        border-bottom: 1px solid #d3d3d3;
        color: #000;
        box-sizing: border-box;
    }
    .condor-spec .item > ul > li {
        display: flex;
        width: 100%;
        height: 100%;
        color: #000;
        justify-content: center;
        align-items: center;
    }
    .condor-spec .line2 {
        color: #000;
        line-height: 1.25;
    }

    /* 콘도르 링크 */
    .condor-link {
        padding: 60px 0 120px;
        background: #f1f1f1;
    }
    .condor-link .item-wrap {
        flex-direction: column;
        gap: 60px;
    }
    .condor-link .condor-title {
        font-family: "SUITE";
        font-weight: 800;
        font-size: 24px;
    }
    .condor-link .item-wrap > div {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        align-items: center;
    }
    .condor-link .item-wrap > div:first-of-type {
        position: relative;
    }
    .condor-link .images img {
        object-fit: contain;
    }
    .condor-link .rig .images,
    .condor-link .images {
        position: relative;
        width: 75%;
        height: 0;
        padding-bottom: 50%;
    }
    .condor-link .images img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .condor-link .link-btn {
        display: flex;
        width: 75%;
        height: 40px;
        background-color: #000;
        color: #fff;
        font-size: 14px;
        justify-content: center;
        align-items: center;
    }
    .condor-link .item-wrap .cen {
        display: block;
        flex-shrink: 0;
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
    }
    .condor-link .item-wrap .cen .line {
        display: block;
        position: absolute;
        top: 0;
        right: 0px;
        width: 100%;
        height: 1px;
        background: #d3d3d3;
    }
    .condor-information .mo_info.__m {
        display: none;
    }
}

.condor-cast .detail .__m {
    display: none;
}
.condor-top-section .slo.__m {
    display: none;
}

@media all and (max-width: 767px) {
    .condor-top-section .slo.__p {
        display: none;
    }
    .condor-top-section .slo.__m {
        display: flex;
        flex-direction: column;
        gap: 0px;
        width: 80%;
        margin: 0 auto 30px;
    }

    .ball01 {
        position: relative;
        width: 45%;
        height: auto;
    }
    .ball01 .main-ball {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
    }
    .ball01 .main-ball img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .ball01 img {
        object-fit: contain;
    }
    .ball01 .ball-shadow {
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    .ball01 .ball-shadow img {
        position: absolute;
        bottom: -10%;
        width: 100%;
        height: auto;
    }
    .ball01 .ball-flame {
        transform-origin: bottom;
    }

    .animation-container .after {
        padding: 0 20px;
    }

    .condor-information .white-carbon .info {
        display: none;
    }
    .condor-information .mo_info.__p {
        display: none;
    }
    .condor-information .mo_info.__m {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 35px;
        align-items: center;
    }

    .condor-information .white-carbon .obj {
        max-width: none;
        padding: 0;
    }

    .condor-information .white-carbon .obj img {
        width: auto;
        height: auto;
        max-width: 100%;
    }

    .mo_info p {
        display: flex;
        position: relative;
        overflow: hidden;
        width: 90%;
        height: 48px;
        padding: 0 15px 0 40px;
        border: 1px solid rgba(255, 0, 0, 0.6);
        line-height: 1.25;
        align-items: center;
        border-radius: 24px;
    }
    .mo_info p::before {
        display: block;
        position: absolute;
        top: 0;
        left: 18px;
        width: 10px;
        height: 100%;
        background: url(../img/sub/condor/condor-img02-chk.png) no-repeat center;
        background-size: contain;
        content: "";
        z-index: 5;
    }
    .mo_info p::after {
        display: block;
        position: absolute;
        top: -30px;
        left: -30px;
        width: 60px;
        height: 60px;
        background: #8c0e20;
        content: "";
        filter: blur(16px);
        z-index: 0;
    }
    .mo_info p span {
        position: relative;
        font-size: 14px;
        z-index: 10;
    }

    .condor-cast .detail .__p {
        display: none;
    }

    .condor-cast .detail .__m {
        display: block;
    }

    .condor-cast .detail .desc {
        display: flex;
        gap: 10%;
        position: absolute;
        bottom: -2.5%;
        left: 2%;
        width: 100%;
        padding: 0 10px;
        font-size: 13px;
        text-align: center;
        text-align: center;
        justify-content: space-between;
    }

    .condor-cast .detail .desc span {
        display: block;
        width: 100%;
    }

    .condor-spec .item-name {
        margin-bottom: 20px;
        font-size: 22px;
    }

    .condor-spec .img-wrap {
        width: 100%;
    }

    .condor-spec .img-wrap .lef {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .condor-spec .img-wrap .rig {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .condor-spec .img-wrap img {
        min-width: 120px;
    }
}

/* motion */
.condor-top-section .slo {
    opacity: 0;
    transition: 1s;
}
.condor-top-section .bottom {
    opacity: 0;
    transition: 1s;
}
.condor-top-section .logo {
    opacity: 0;
    transition: 1s;
}
.condor-top-section .condor-item .balls {
    transition: 1s;
    opacity: 0;
}
.condor-top-section .condor-item .balls:first-of-type {
    transform: translateX(-15%);
}
.condor-top-section .condor-item .balls:last-of-type {
    transform: translateX(15%);
}
.condor-top-section.active .slo {
    opacity: 1;
    transition-delay: 0.5s;
}
.logo.active {
    opacity: 1;
}

.condor-top-section.active .condor-item .balls {
    opacity: 1;
    transform: none;
    transition-delay: 0.5s;
}
.top .title {
    opacity: 0;
    transition: 0.8s;
    transform: translateY(-30px);
}
.main-title {
    opacity: 0;
    transition: 0.8s;
    transform: translateY(30px);
}
.active .top .title {
    opacity: 1;
    transform: none;
}

.s4-section08 .top.active .title {
    opacity: 1;
    transform: none;
}

.active .main-title {
    opacity: 1;
    transform: none;
}
.condor-information .white-carbon .obj .img,
.condor-information .white-carbon .obj .mo_info p,
.condor-information .white-carbon .obj .info {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s;
}

.condor-information .white-carbon .obj .img {
    transition-delay: 0.5s;
}
.condor-information .white-carbon .obj .info {
    transition-delay: 0.7s;
}
.condor-information .white-carbon .obj.active .img,
.condor-information .white-carbon .obj.active .info {
    opacity: 1;
    transform: none;
}

.condor-information .white-carbon .obj .mo_info.active p {
    opacity: 1;
    transform: none;
}

.condor-information .spin .obj {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s;
}
.condor-information .spin .obj {
    transition-delay: 0.5s;
}
.condor-information .spin .obj.active {
    opacity: 1;
    transform: none;
}
.condor-information .spin .info > div {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s;
}
.condor-information .spin .info.active > div:first-of-type {
    transition-delay: 0s;
}
.condor-information .spin .info.active > div:nth-of-type(2) {
    transition-delay: 0.2s;
}
.condor-information .spin .info.active > div:nth-of-type(3) {
    transition-delay: 0.4s;
}
.condor-information .spin .info.active > div:nth-of-type(4) {
    transition-delay: 0.6s;
}
.condor-information .spin .info.active > div:not(.line) {
    opacity: 1;
    transform: none;
}
.condor-information .spin .info.active > div:last-of-type {
    opacity: 1;
}

@media all and (max-width: 1024px) {
    .condor-information .spin .info > div:last-of-type {
        transition: 0.8s;
        transition-delay: 0.8s;
    }
    .condor-top-section.active .bottom {
        transition-delay: 0.5s;
        opacity: 1;
    }
}
@media all and (min-width: 1025px) {
    .bottom.active {
        opacity: 1;
    }
}

.condor-graph .graph {
    opacity: 0;
    transition: 0.5s;
}
.condor-graph .progress {
    opacity: 0;
    transition: 0.8s;
}
.condor-graph.active .graph {
    opacity: 1;
}
.condor-graph.active .progress.volvik {
    opacity: 1;
    transition-delay: 0.5s;
}
.condor-graph.active .progress:not(.volvik) {
    opacity: 1;
    transition-delay: 1s;
}
.condor-cast .main,
.condor-cast .bg,
.condor-cast .detail,
.condor-cast .point {
    opacity: 0;
    transition: 0.8s;
}
.condor-cast .main {
    transition-delay: 0.5s;
}
.condor-cast .detail,
.condor-cast .point {
    transition-delay: 1s;
}
.condor-cast .active .main,
.condor-cast .active .detail,
.condor-cast .active .point {
    opacity: 1;
    transform: none;
}
.condor-cast .bg.active {
    opacity: 1;
}
.condor-spec .wrap .img-wrap,
.condor-spec .wrap .table {
    opacity: 0;
    transform: translateY(60px);
    transition: 0.8s;
}
.condor-spec .wrap .img-wrap {
    transition-delay: 0s;
}
.condor-spec .wrap .table {
    transition-delay: 0.4s;
}
.condor-spec.active .wrap .img-wrap,
.condor-spec.active .wrap .table {
    opacity: 1;
    transform: none;
}
.condor-link .lef {
    opacity: 0;
    transform: translateX(-60px);
    transition: 0.8s;
}
.condor-link .rig {
    opacity: 0;
    transform: translateX(60px);
    transition: 0.8s;
}

.condor-spec.active .wrap .img-wrap.axia-ball .rig{
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.condor-spec.active .wrap .img-wrap.axia-ball .rig span{
    color: #000;
}

.condor-link .lef.active,
.condor-link .rig.active {
    opacity: 1;
    transform: none;
}

/* condorS4 */
.s3s4 {
    overflow: hidden;
}
.s3s4 * {
    color: #fff;
    font-family: "SUITE";
}
.s3s4 img {
    object-fit: contain;
}

.s4-top {
    position: relative;
    padding: 200px 0 120px;
    background: #f1f1f1;
}
.s4-top .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sub/s4/s4-bg.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 0;
}
.s4-top .item-wrap {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 1210px;
    margin: 0 auto;
    justify-content: space-between;
    z-index: 10;
}
.s4-top .item-wrap img {
    object-fit: contain;
}
.s4-top .s4-header {
    position: relative;
    max-width: 812px;
    margin: 0 auto 50px;
    z-index: 5;
}
.s4-top .logo {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
    width: 100%;
    max-width: 246px;
    margin: 120px auto 0;
    align-items: center;
    z-index: 10;
}
.s4-top .logo .line em {
    display: block;
    width: 1px;
    height: 50px;
    margin: 0 auto;
    background-color: #fff;
    opacity: 0.2;
}

.s4-section02 {
    padding: 120px 0 280px;
    background: url(../img/sub/s4/s4-bg02.jpg) #000 no-repeat center;
}
.s3s4 .top .title {
    display: flex;
    width: 100%;
    height: 40px;
    margin: 0 auto;
    background: url(../img/sub/s4/s4-label01.png) no-repeat center;
    font-size: 18px;
    justify-content: center;
    align-items: center;
}
.s3s4 .main-title {
    margin: 25px auto 55px;
    color: #fff;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
}
.s3s4 .gradi {
    background: linear-gradient(to top, #b7b7b7, #fff);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 800;
}

.s4-section02 .obj {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}
.s4-section02 .img-wrap {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.s4-section02 .img-wrap > img {
    display: block;
    max-width: 366px;
}

.s4-section02 .arr {
    position: relative;
    width: 100%;
    height: 28px;
    margin: 50px auto 30px;
}

.s4-section02 .arr .line {
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(100% - 10px);
    height: 4px;
    background-color: #d61531;
    transform: translateY(-50%);
}
.s4-section02 .arr .line::after {
    display: block;
    position: absolute;
    top: 50%;
    right: -10px;
    width: 21px;
    height: 16px;
    background: url(../img/sub/s4/s4-arr.png) no-repeat center;
    content: "";
    transform: translateY(-50%);
}

.s4-section02 .point {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.s4-section02 .point .item {
    display: flex;
    width: 100%;
    justify-content: center;
}
.s4-section02 .point .item span {
    display: block;
    position: relative;
    width: 28px;
    height: 28px;
    background: #d61531;
    border-radius: 50%;
}
.s4-section02 .point .item span::after {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: #fff;
    content: "";
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.s4-section02 .desc {
    display: flex;
    width: 100%;
    justify-content: space-around;
}
.s4-section02 .desc p {
    display: block;
    width: 100%;
    font-weight: 500;
    font-size: 22px;
    text-align: center;
}

.s4-banner {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
}
.s4-banner .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 5;
}
.s4-banner .bg.main {
    background-image: url(../img/sub/s4/s4-bg03.jpg);
}
.s4-banner .bg01 {
    background-image: url(../img/sub/s4/s4-bg03-01.png?ver=5);
}
.s4-banner .bg02 {
    background-image: url(../img/sub/s4/s4-bg03-02.png?ver=5);
}

.s4-section03 {
    padding: 200px 0 50px;
    background: #000;
}
.s4-section03 .top {
    position: relative;
    z-index: 10;
}
.s4-section03 .top .title {
    width: 222px;
    background: url(../img/sub/s4/s4-label02.png) no-repeat;
}
.s4-section03 .obj {
    position: relative;
    max-width: 1080px;
    margin: -200px auto 0;
}
.s4-section03 .obj.__m {
    display: none;
}
.s4-section03 .obj .desc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.s4-section03 .obj img {
    object-fit: contain;
}
.s4-section04 .obj .desc.__m {
    display: none;
}

.s4-section04 .top .title {
    background: url(../img/sub/s4/s4-label08.png) no-repeat center;
}
.s4-section04 {
    padding: 190px 0 340px;
    background: #000;
}
.s4-section04 .obj {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: -30px auto 0;
    justify-content: center;
}
.s4-section04 .obj .lef {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 20px;
    left: 0;
    width: 200px;
}
.s4-section04 .obj .main {
    position: relative;
    max-width: 645px;
}
.s4-section04 .obj .desc {
    position: absolute;
    top: 300px;
    right: -270px;
    width: 100%;
    max-width: 450px;
}

.s4-section05 {
    position: relative;
    padding: 190px 0 400px;
    background: url(../img/sub/s4/s4-bg04.jpg) no-repeat center;
    background-size: cover;
}
.s4-section05 .top .title {
    background: url(../img/sub/s4/s4-label03.png) no-repeat center;
}
.s4-section05 .main-title {
    margin-bottom: 35px;
}
.s4-section05 .bg {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 100%;
    max-width: 562px;
    height: 100%;
    max-height: 562px;
    background: url(../img/sub/s4/s4-bg04-01.png?ver=1) no-repeat center;
    background-size: contain;
    transform: translate(-50%, -50%);
    mix-blend-mode: color;
}

.s4-section05 .obj {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 70px auto 0;
    justify-content: center;
}

.s4-section05 .catch {
    display: flex;
    gap: 12px;
    position: relative;
    top: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.s4-section05 .catch img {
    width: auto;
    max-width: 114px;
}
.s4-section05 .catch span {
    color: #fff;
    font-size: 16px;
    letter-spacing: -0.025em;
}

.s4-section05 .obj .lef {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: -20px;
    right: 0;
    width: 200px;
}
.s4-section05 .obj .main {
    position: relative;
    max-width: 621px;
}
.s4-section05 .obj .desc {
    position: absolute;
    top: 370px;
    right: 90px;
    width: 795px;
}

.s4-section06 {
    max-height: 910px;
    padding: 160px 0 60px;
    background: url(../img/sub/s4/s4-bg05.jpg) no-repeat center top;
    background-size: cover;
}
.s4-section06 .top .title {
    width: 258px;
    background: url(../img/sub/s4/s4-label04.png?ver=2) no-repeat center;
}

.s4-section06 .obj {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}
.s4-section06 .obj.type01 {
    display: flex;
    justify-content: space-between;
}
.s4-section06 .obj.type01 > div {
    position: relative;
    max-width: 560px;
}
.s4-section06 .obj.type01 img {
    object-fit: contain;
}
.s4-section06 .obj.type01 .__m {
    display: none;
}

.s4-section06 .obj.type01 .label {
    position: absolute;
    top: -7px;
    left: -10px;
    max-width: 105px;
    max-height: 76px;
}

.s4-section07 {
    display: flex;
    height: 910px;
    background: url(../img/sub/s4/s4-bg06.jpg) no-repeat center bottom;
    background-size: cover;
    align-items: flex-start;
}
.s4-section07 .item-bot {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: 1180px;
    height: 720px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}
.s4-section07 .item-bot .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-bottom: 61%;
    margin: 0 auto;
    background: url(../img/sub/s4/s4-bg05-01.png) no-repeat center;
    background-size: contain;
    z-index: 0;
}

.s4-section07 .top .title {
    width: 234px;
    background: url(../img/sub/s4/s4-label05.png?ver=2) no-repeat center;
}
.s4-section07 .main-title {
    margin-bottom: 0;
}
.s4-section07 .desc {
    margin: 40px auto 40px;
    font-size: 16px;
    text-align: center;
}
.s4-section07 .item-bot .top,
.s4-section07 .item-bot .desc,
.s4-section07 .item-bot .obj {
    position: relative;
    z-index: 10;
}
.s4-section07 .item-bot .obj {
    max-width: 560px;
}

.s4-section07 .item-bot .obj.type02 {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.s4-section07 .item-bot .obj.type02 > div {
    width: 100%;
    max-width: 240px;
}
.s4-section07 .item-bot .obj.type02 img {
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.s4-section08 {
    position: relative;
    padding: 100px 20px 300px;
    background-color: #000;
}
.s4-section08 .top {
    position: relative;
    z-index: 15;
}
.s4-section08 .top .title {
    width: 424px;
    background: url(../img/sub/s4/s4-label07.png?ver=2) no-repeat center;
    font-size: 16px;
}
.s4-section08 .balls {
    display: flex;
    flex-direction: column;
    max-width: 620px;
    margin: 0 auto;
}
.s4-section08 .balls > div {
    position: relative;
    max-width: 469px;
}
.s4-section08 .balls .top {
    align-self: flex-start;
    z-index: 10;
}
.s4-section08 .balls .bot {
    margin-top: -170px;
    align-self: flex-end;
    z-index: 5;
}
.s4-section08 .ball-line {
    position: relative;
    max-width: 800px;
    margin: 240px auto 0;
    z-index: 5;
}
.s4-section08 .line-wrap {
    display: flex;
    position: relative;
    max-width: 822px;
    margin: -58px auto 0;
    justify-content: space-between;
    z-index: 5;
}

.s4-section08 .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sub/s4/s4-bg07.jpg) no-repeat center;
    object-fit: contain;
    z-index: 0;
    opacity: 0.3;
    transform: translateY(-60px);
}

.s3s4 .ball-compare * {
    color: #000;
}

.condor-link.s4 .rig .images {
    max-width: 556px;
}

@media all and (max-width: 1024px) {
    @media screen and (min-width: 768px) {
        .s4-section02 .arr {
            height: 1450px;
        }
    }

    @media all and (max-width: 767px) {
        .s4-section03 .item1 {
            top: 7%;
        }
        .s4-section03 .item2 {
            top: 33%;
        }
        .s4-section03 .item3 {
            top: 55%;
        }
        .s4-section03 .item4 {
            top: 74.25%;
        }
        .s4-section03 .item5 {
            top: 90%;
        }
    }

    @media screen and (min-width: 548px) {
        .s4-section04 .obj.active .main {
            margin-bottom: 150px;
        }
        .s4-section03 .item1 {
            top: 8.25%;
        }
        .s4-section03 .item2 {
            top: 34.25%;
        }
        .s4-section03 .item3 {
            top: 56.5%;
        }
        .s4-section03 .item4 {
            top: 75.75%;
        }
        .s4-section03 .item5 {
            top: 90%;
        }
    }
    .s3s4 .top .title {
        height: 34px;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        font-size: 14px;
        text-align: center;
    }
    .s3s4 .main-title {
        font-size: 32px;
        line-height: 1.2;
    }

    .s4-top {
        padding: 140px 30px 20px;
        margin-top: 50px;
    }
    .s4-top .item-wrap {
        flex-direction: column;
        align-items: center;
    }
    .s4-top .item-wrap > div {
        max-width: 605px;
    }

    .s4-top .logo {
        gap: 15px;
        width: 50%;
        margin-top: 40px;
    }
    .s4-top .logo .line em {
        height: 30px;
    }
    .s4-top .logo img:last-of-type {
        width: 70%;
    }

    .s4-section02 {
        padding: 80px 20px 100px;
    }
    .s4-section02 .obj {
        display: flex;
        gap: 8px;
        max-width: 760px;
    }
    .s4-section02 .img-wrap,
    .s4-section02 .desc {
        flex-direction: column;
        gap: 16px;
    }

    .s4-section02 .arr {
        flex-shrink: 0;
        width: 18px;
        height: 175vw;
        margin: 0;
    }

    .s4-section02 .arr .line {
        top: 0;
        left: 50%;
        width: 2px;
        height: calc(100% - 10px);
        transform: translateX(-50%);
    }
    .s4-section02 .arr .line::after {
        position: absolute;
        top: auto;
        bottom: -15px;
        left: -3px;
        width: 8px;
        height: 11px;
        background: url(../img/sub/s4/s4-arr-m.png) no-repeat center;
        background-size: contain;
    }

    .s4-section02 .point {
        flex-direction: column;
        gap: 16px;
        height: 100%;
    }
    .s4-section02 .point .item {
        height: 100%;
        align-items: center;
    }
    .s4-section02 .point .item span {
        width: 18px;
        height: 18px;
    }
    .s4-section02 .point .item span::after {
        width: 6px;
        height: 6px;
    }

    .s4-section02 .desc p {
        display: flex;
        height: 100%;
        font-size: 16px;
        text-align: left;
        align-items: center;
    }

    .s4-banner {
        height: 0;
        padding-bottom: 65%;
    }
    .s4-banner * {
        background-position: center;
    }

    .s4-section03 {
        padding: 80px 20px;
    }

    .s4-section03 .obj.__p {
        display: none;
    }
    .s4-section03 .obj.__m {
        display: block;
        width: 100%;
        max-width: 480px;
        margin: 0% auto;
        transform: translateX(11%);
    }
    .s4-section03 .desc_info {
        position: absolute;
        top: 0;
        left: 0%;
        width: 100%;
        height: 100%;
    }
    .s4-section03 .desc_info span {
        position: absolute;
        left: 0;
        font-size: 13px;
        line-height: 1.2;
    }
    .s4-section03 .desc_info span br {
        display: block;
    }
    

    .s4-section04 {
        padding: 80px 20px 120px;
    }
    .s4-section04 .obj {
        display: flex;
        flex-direction: column;
    }
    .s4-section04 .obj .lef {
        flex-direction: row;
        position: relative;
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        order: 2;
        justify-content: center;
    }
    .s4-section04 .obj .lef img {
        width: 33%;
    }

    .s4-section04 .obj.active .main {
        margin-bottom: 38%;
    }

    .s4-section04 .obj .desc.__p {
        display: none;
    }
    .s4-section04 .obj .desc.__m {
        display: block;
        top: 65%;
        right: 10%;
        width: 80%;
        max-width: 366px;
    }

    .s4-section05 {
        padding: 80px 20px;
    }
    .s4-section05 .obj {
        display: flex;
        flex-direction: column;
    }
    .s4-section05 .obj .catch {
        width: 80%;
        max-width: 400px;
    }
    .s4-section05 .obj .main {
        margin: 14% auto 28%;
    }
    .s4-section05 .obj .lef {
        flex-direction: row;
        position: relative;
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        order: 2;
        justify-content: center;
    }
    .s4-section05 .obj .lef img {
        width: 33%;
    }
    .s4-section05 .obj .desc {
        top: 75%;
        right: 3%;
        width: 100%;
        max-width: 795px;
    }

    .s4-section06 {
        height: auto;
        max-height: none;
        padding: 80px 20px 40px;
    }
    .s4-section06 .obj.type01 {
        flex-direction: row;
        gap: 20px;
    }
    .s4-section06 .obj.type01 .label {
        position: absolute;
        top: -2.5%;
        left: -2%;
        width: 20%;
    }
    .s4-section06 .obj.type01 .__p {
        display: none;
    }
    .s4-section06 .obj.type01 .__m {
        display: block;
    }

    .s4-section07 {
        height: auto;
        padding: 0 20px 100px;
        background: url(../img/sub/s4/s4-bg06.jpg) no-repeat center;
        background-size: cover;
    }

    .s4-section07 .item-bot {
        height: auto;
        padding: 40px 20px;
        background-position: top;
    }

    .s4-section07 .item-bot .obj.type02 {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .s4-section07 .item-bot .obj.type02 > div {
        width: 48%;
        opacity: 0;
        transform: translateY(30px);
        transition: 0.8s;
    }

    .s4-section07 .item-bot .obj.type02 > .active {
        opacity: 1;
        transform: none;
    }

    .s4-section07 .item-bot .bg {
        height: 100%;
        padding-bottom: 0;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(20px);
        border-radius: 8px;
    }
    .s4-section07 .desc {
        font-size: 14px;
        line-height: 1.4;
        text-align: center;
    }

    .s4-section08 {
        padding: 40px 20px 80px;
    }
    .s4-section08 .balls {
        width: 80%;
        margin-top: -15%;
    }
    .s4-section08 .balls .bot {
        margin-top: -30%;
    }
    .s4-section08 .bg {
        height: 100%;
        background-position: center 60%;
        background-size: 180%;
    }
    .s4-section08 .ball-line {
        margin-top: 60px;
    }
    .s4-section08 .line-wrap {
        gap: 20px;
        margin-top: 0%;
    }
}

@media all and (max-width: 500px) {
    .s4-section05 .catch {
        flex-direction: column;
        text-align: center;
    }

    .s4-section05 .catch img {
        width: 30% !important;
    }

    .s4-section05 .catch span {
        font-size: 13px;
    }

    .s4-section05 .obj {
        margin: 15% auto 0;
    }

    .s4-section05 .obj .main {
        margin: 0 auto 40%;
    }

    .s4-section06 .obj.type01 {
        flex-direction: column;
        gap: 40px;
    }
    .s4-section06 .obj.type01 .label {
        position: absolute;
        top: -9.5%;
        left: -2%;
        width: 20%;
    }
    .s4-section08 .balls {
        width: 80%;
        margin-top: -25%;
    }

    .s4-section08 .top .title {
        width: 100%;
        background: none;
        background: url(../img/sub/s4/s4-label07.png) no-repeat center;
        font-size: 14px;
        text-align: center;
    }

    .condor-spec .img-wrap.axia-ball{
        padding: 0 40px;
        gap: 10%;
    }

    .condor-spec .img-wrap.axia-ball .item-name{
        font-size: 19px;        
    }

    .condor-spec.active .wrap .img-wrap.axia-ball > div{
        width: 120px;
    }
}

/* 모션 */
.s4-top .s4-header {
    opacity: 0;
    transform: translateY(40px);
    transition: 1s;
}
.s4-top.active .s4-header {
    opacity: 1;
    transform: none;
}
.s4-top .item-wrap > div {
    opacity: 0;
    transition: 1s;
}
.s4-top .lef {
    transform: translateX(-40px);
}
.s4-top .rig {
    transform: translateX(40px);
}

.s4-top.active .item-wrap > div {
    opacity: 1;
    transform: none;
    transition-delay: 0.5s;
}

.s4-top .logo {
    opacity: 0;
    transition: 1s;
}
.s4-top .logo.active {
    opacity: 1;
}

.s4-section02 .obj .img-wrap > img,
.s4-section02 .obj .desc > p {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.6s;
}
.s4-section02 .obj .point > .item {
    opacity: 0;
    transition: 0.6s;
}

.s4-section02 .line {
    opacity: 0;
    transform: translateX(-30px);
    transition: 1s;
}
.s4-section02 .active .line {
    opacity: 1;
    transform: none;
}

@media all and (min-width: 1024px) {
    .s4-section02 .obj.__m {
        display: none;
    }

    .s4-section02 .obj.active .img-wrap > img,
    .s4-section02 .obj.active .point > .item,
    .s4-section02 .obj.active .desc > p {
        opacity: 1;
        transform: none;
    }

    .s4-section02 .obj.active .img-wrap > img:first-of-type,
    .s4-section02 .obj.active .point > .item:first-of-type,
    .s4-section02 .obj.active .desc > p:first-of-type {
        transition-delay: 0.5s;
    }
    .s4-section02 .obj.active .img-wrap > img:nth-of-type(2),
    .s4-section02 .obj.active .point > .item:nth-of-type(2),
    .s4-section02 .obj.active .desc > p:nth-of-type(2) {
        transition-delay: 0.7s;
    }
    .s4-section02 .obj.active .img-wrap > img:last-of-type,
    .s4-section02 .obj.active .point > .item:last-of-type,
    .s4-section02 .obj.active .desc > p:last-of-type {
        transition-delay: 0.9s;
    }
}
@media all and (max-width: 1024px) {
    .s4-section02 .obj.__p {
        display: none;
    }
    .s4-section02 .obj.__m {
        display: flex;
        gap: 10%;
    }

    .s4-section02 .obj .img-wrap .box {
        display: flex;
        flex-direction: column;
        gap: 5px;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    .s4-section02 .box .img {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }
    .s4-section02 .box .img::after {
        display: block;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        border: 1px solid rgba(255, 255, 255, 0.6);
        content: "";
        border-radius: 8px;
        box-sizing: border-box;
    }

    .s4-section02 .box .img,
    .s4-section02 .box .desc {
        font-size: 16px;
        opacity: 0;
        transform: translateY(30px);
        transition: 0.8s;
    }
    .s4-section02 .box.active .img {
        opacity: 1;
        transform: none;
    }
    .s4-section02 .box.active .desc {
        opacity: 1;
        transform: none;
        transition-delay: 0.4s;
    }

    .s4-section02 .obj .img-wrap {
        width: 80%;
    }
    .s4-section02 .obj img {
        display: block;
    }

    .s4-section02 .arr .item.active {
        opacity: 1;
        transition-delay: 0.6s;
    }
}

.s4-banner {
    overflow: hidden;
    background: #000;
}
.s4-banner.active {
    opacity: 1;
}
.s4-banner .bg.main {
    transform: scale(1.3);
    transition: 3s;
    opacity: 0;
}
.s4-banner .bg.bg01 {
    opacity: 0;
    transform: translateX(-50px);
    transition: 1s;
    transition-delay: 0.5s;
}
.s4-banner .bg.bg02 {
    opacity: 0;
    transform: translateX(50px);
    transition: 1s;
    transition-delay: 0.5s;
}
.s4-banner.active .bg {
    opacity: 1;
    transform: none;
}

.s4-section03 .obj .main {
    transform: scale(1.1);
    opacity: 0;
    transition: 1s;
}
.s4-section03 .obj .desc {
    transform: translateY(30px);
    opacity: 0;
    transition: 1s;
    transition-delay: 0.5s;
}

.s4-section03 .obj.active > div {
    opacity: 1;
    transform: none;
}

.s4-section04 .obj .main,
.s4-section05 .obj .main {
    transform: scale(1.1);
    opacity: 0;
    transition: 1s;
}
.s4-section04 .obj .desc,
.s4-section05 .catch,
.s4-section05 .obj .desc {
    transform: translateY(30px);
    opacity: 0;
    transition: 1s;
    transition-delay: 0.5s;
}

.s4-section04 .obj.active .main,
.s4-section04 .obj.active .desc,
.s4-section05 .obj.active .main,
.s4-section05 .catch.active,
.s4-section05 .obj.active .desc {
    opacity: 1;
    transform: none;
}

.desc-box.lef > img {
    opacity: 0;
    transform: translateY(25px);
    transition: 0.8s;
}
.desc-box.lef > img:first-of-type {
    transition-delay: 0s;
}
.desc-box.lef > img:nth-of-type(2) {
    transition-delay: 0.2s;
}
.desc-box.lef > img:last-of-type {
    transition-delay: 0.4s;
}
.desc-box.active > img {
    opacity: 1;
    transform: none;
}

.obj.type01 .lef {
    opacity: 0;
    transform: translateX(-30px);
    transition: 1s;
}
.obj.type01 .rig {
    opacity: 0;
    transform: translateX(30px);
    transition: 1s;
}
.obj.type01 > div.active {
    opacity: 1;
    transform: none;
}

.s4-header.__m {
    display: none;
}

.ball-intro-title {
    color: #fff;
    font-family: "Gmarket Sans";
    font-weight: 700;
    font-size: 60px;
    line-height: 1.35;
    text-align: center;
    font-style: italic;
}
.ball-intro-title span {
    margin-right: -0.3em;
    background: linear-gradient(to bottom, #00ffae, #9cffe0);
    -webkit-background-clip: text;
    color: transparent;
    font-family: "Gmarket Sans";
    font-weight: 700;
    font-size: 60px;
}

.blue_condor {
    margin-right: -0.3em;
}

@media (min-width: 768px) and (max-width: 1480px) {
    .s4-header.__p {
        flex-direction: column;
    }
    .ball-intro-title {
        font-size: 40px;
    }
    .ball-intro-title span {
        font-size: 40px;
    }
}

.condor-section img {
    object-fit: contain;
}

@media all and (max-width: 1500px) and (min-width: 1025px) {
    .condor-section {
        margin-top: 50px;
    }

    .s4-top {
        margin-top: 50px;
    }
}

/* 반응형 모션 1 */
@media all and (min-width: 1025px) {
    .s4-section04 .obj .main {
        opacity: 0;
        transform: translateY(60px);
        transition: 0.6s;
    }
    .s4-section04 .obj .desc {
        opacity: 0;
        transform: translateX(-60px);
        transition: 1s;
        transition-delay: 0.6s;
    }

    .s4-section04 .obj.active .main,
    .s4-section04 .obj.active .desc {
        opacity: 1;
        transform: none;
    }

    .s4-section04 .lef > img {
        opacity: 0;
        transform: translateY(40px);
        transition: 0.8s;
    }
    .s4-section04 .active .lef > img {
        opacity: 1;
        transform: none;
    }

    .desc-box.lef > img:first-of-type {
        transition-delay: 0.5s;
    }
    .desc-box.lef > img:nth-of-type(2) {
        transition-delay: 0.7s;
    }
    .desc-box.lef > img:last-of-type {
        transition-delay: 0.9s;
    }
}

@media all and (max-width: 1024px) {
    .s4-header {
        padding-top: 80px;
    }
}

@media all and (max-width: 767px) {

    @media all and (max-width: 480px) {
        .s4-header {
            padding-top: 0;
        }
    }
    .s4-top {
        padding: 140px 20px 20px;
    }

    .s4-top .wrap {
        transform: translateY(-12%);
    }
    .s4-header.__p {
        display: none;
    }
    .s4-header.__m {
        display: flex;
        flex-direction: column;
        gap: 0px;
        width: 90%;
        margin: 0 auto 30px;
    }

    .ball-intro-title {
        color: #fff;
        font-family: "Gmarket Sans";
        font-weight: 700;
        font-size: 32px;
        line-height: 1.35;
        text-align: center;
        font-style: italic;
    }
    .ball-intro-title br {
        display: block;
    }
    .ball-intro-title span {
        background: linear-gradient(to bottom, #00ffae, #9cffe0);
        -webkit-background-clip: text;
        color: transparent;
        font-family: "Gmarket Sans";
        font-weight: 700;
        font-size: 32px;
    }
    .ball-intro-title span.red {
        background: linear-gradient(to right, #ff7a8d, #ea1836);
        -webkit-background-clip: text;
        color: transparent;
    }
    .ball-intro-title span.blue {
        background: linear-gradient(to bottom, #88c4ff, #0e87ff);
        -webkit-background-clip: text;
        color: transparent;
    }
}

.s4-section07 .bg,
.s4-section07 .desc,
.s4-section07 .obj {
    opacity: 0;
    transform: translateY(30px);
    transition: 1s;
}
.s4-section07.active .bg,
.s4-section07.active .desc,
.s4-section07.active .obj {
    opacity: 1;
    transform: none;
}

.s4-section08 .balls .top {
    transform: translate(30px, -30px);
    transition: 0.8s;
    opacity: 0;
}
.s4-section08 .balls .bot {
    transform: translate(-30px, -30px);
    transition: 0.8s;
    opacity: 0;
}

.s4-section08 .item-bot > .active,
.s4-section08 .balls > .active {
    opacity: 1;
    transform: none;
}

.s4-section08 .ball-line,
.s4-section08 .line-wrap {
    opacity: 0;
    transition: 1s;
    transform: translateY(40px);
}

/* axia */
.axia {
    background: #000;
}
.axia img {
    object-fit: contain;
}
.axia * {
    color: #fff;
    font-family: "SUITE";
}

/* 상단 */
.axia-top {
    display: block;
    position: relative;
    width: 100%;
}
.axia-top img {
    display: block;
    position: relative;
    z-index: -1;
    width: auto;
    height: auto;
}
.axia .axia-top .slo {
    position: absolute;
    top: 160px;
    left: 50%;
    max-width: 904px;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.axia .header-titles{
    font-family: "Gmarket Sans";
    font-style: italic;
    filter: drop-shadow(0px 4px 1px rgba(0,0,0,0.4));
}

.axia .header-titles .yellow{
    background: linear-gradient(to left, #ffe400, #fff5a1);
    -webkit-background-clip: text;
    color: transparent;
}

.axia .header-titles .orange{
    background: linear-gradient(to right, #ffc791, #ff7e00);
    -webkit-background-clip: text;
    color: transparent;
}

.axia .axia-top .bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: url(../img/sub/axia/axia-main-bg.jpg) no-repeat center;
    background-size: cover;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* axia 라인업 */
.axia-lineup {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1784px;
    margin: 0 auto;
    align-items: center;
}
.axia-lineup > div {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 840px;
    align-items: center;
}

/* 상단 라인업 타이틀 */
.axia-lineup .title {
    display: flex;
    width: 170px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: #fff;
    font-size: 18px;
    justify-content: center;
    align-items: center;
}
.axia-lineup .title span {
    color: #fff;
    font-size: 18px;
    line-height: 18px;
}
.axia-lineup .lef .title {
    background-image: url(../img/sub/axia/axia-label01.png);
}
.axia-lineup .rig .title {
    background-image: url(../img/sub/axia/axia-label02.png);
}

/* 중간 이미지 */
.axia-lineup .mid {
    display: flex;
    position: relative;
    position: relative;
    width: 100%;
    height: 400px;
    padding: 25px 0;
    justify-content: center;
    z-index: 15;
}
.axia-lineup .mid .mid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.axia-lineup .lef .mid img {
    position: relative;
    max-width: 253px;
    z-index: 5;
    object-fit: contain;
}
.axia-lineup .rig .mid img {
    position: relative;
    max-width: 290px;
    z-index: 5;
    object-fit: contain;
}

.axia-lineup .lef .mid .mid-bg {
    background: url(../img/sub/axia/axia-lef-bg01.png) no-repeat center 20%;
    z-index: 0;
    mix-blend-mode: screen;
    opacity: 0.7;
}
.axia-lineup .rig .mid .mid-bg {
    background: url(../img/sub/axia/axia-rig-bg01.png) no-repeat center;
    background-size: contain;
    z-index: 0;
}

/* 하단 설명 + 박스 */
.axia-lineup {
    padding: 180px 0 0;
}

.axia-lineup .bot {
    display: flex;
    gap: 60px;
    position: relative;
    width: 100%;
    max-width: 700px;
    height: 540px;
    padding: 25px 0;
    margin-top: -100px;
    color: #fff;
    justify-content: center;
    align-items: center;
}

.axia-lineup .bot > div {
    display: flex;
    flex-direction: column;
}
.axia-lineup .bot > .item {
    flex-shrink: 0;
    height: 200px;
    justify-content: flex-end;
}
.axia-lineup .box {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    max-width: 264px;
    z-index: 5;
}
.axia-lineup .info {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 380px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.025em;
    z-index: 5;
}

/* 설명문 */
.axia-lineup .lef .bot .info {
    text-align: left;
    align-items: flex-start;
}
.axia-lineup .rig .bot .info {
    text-align: right;
    align-items: flex-end;
}

.axia-lineup .bot .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
}
.axia-lineup .lef .bot .bg {
    top: 0;
    left: -50%;
    background-image: url(../img/sub/axia/axia-lef-bg02.png);
    background-position: left center;
    transform: translateX(30%);
}
.axia-lineup .rig .bot .bg {
    top: 0;
    right: -50%;
    background-image: url(../img/sub/axia/axia-rig-bg02.png);
    background-position: left center;
    transform: translateX(-35%);
}

.axia-lineup .bot .logo {
    display: flex;
    flex-direction: column;
    height: 111px;
    margin-bottom: 30px;
    justify-content: center;
}
.axia-lineup .lef .bot .logo > img {
    width: 190px;
    height: 82px;
    object-fit: contain;
}
.axia-lineup .rig .bot .logo > img {
    width: 190px;
    height: 111px;
    object-fit: contain;
}

/* all new volvik */
.all-new {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1783px;
    height: auto;
    margin: 0 auto;
    clip-path: inset(45% 50% round 20px);
    transition: clip-path 0.8s;
}
.all-new.active {
    clip-path: inset(0% 0% round 0px);
}

/* 정보 */
.axia-info {
    position: relative;
    padding: 180px 0 80px;
    background: url(../img/sub/axia/axia-bg03.png) no-repeat center 100px;
    background-size: contain;
}
.axia-info .top {
    position: relative;
    z-index: 5;
}
.axia .title {
    display: flex;
    width: 80vw;
    height: 40px;
    margin: 0 auto;
    background: url(../img/sub/s4/s4-label01.png) no-repeat center;
    font-size: 18px;
    justify-content: center;
    align-items: center;
}
.axia .main-title {
    margin: 25px auto 55px;
    color: #fff;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
}

.axia-info .img-wrap {
    max-width: 575px;
    margin: 0 auto 80px;
}

.axia .desc.type01 {
    color: #fff;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: -0.025em;
    text-align: center;
}
.axia .desc.type01 span {
    display: inline-block;
    position: relative;
    font-weight: 400;
}
.axia .desc.type01 b {
    color: #ff3737;
    font-weight: 800;
}

.axia .desc.type01 .border::after {
    display: block;
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    content: "";
}

/* 아래 이미지 + 설명 */
.axia-obj2 {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.axia-obj2 .core {
    position: absolute;
    top: 372px;
    right: 461px;
    max-width: 160px;
    height: 160px;
    mix-blend-mode: multiply;
}
.axia-obj2 .__m {
    display: none;
}

.axia-obj2 .desc.__m {
    display: none;
}
.axia-obj2 .desc {
    display: block;
    position: absolute;
    top: 184px;
    right: 106px;
    max-width: 453px;
}

/* 아래 그래프 + 설명 */
.axia-obj3 {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 120px 0 180px;
    background: url(../img/sub/axia/axia-bg04.jpg) no-repeat center 90px;
    background-size: cover;
    align-items: center;
}
.axia-obj3 .obj-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: 1180px;
    height: 1280px;
    align-items: center;
}

.axia-obj3 .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-bottom: 108.5%;
    background: url(../img/sub/axia/axia-bg04-01.png) no-repeat center;
    background-size: contain;
}
.axia-obj3 .item-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 1280px;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.axia-obj3 .graph {
    max-width: 588px;
}

.axia-obj3 .mid {
    margin: 100px auto 80px;
    font-size: 40px;
    line-height: 56px;
    letter-spacing: -0.025em;
    text-align: center;
}

.axia-obj3 .bot {
    max-width: 606px;
}
.axia-obj3 .info {
    display: flex;
    gap: 15px;
    height: 31px;
    margin-top: 80px;
    font-size: 14px;
    justify-content: center;
    align-items: center;
}
.axia-obj3 .info img {
    width: auto;
}

.axia-model {
    display: flex;
    max-width: 1784px;
    height: 960px;
    margin: 120px auto 0;
    justify-content: space-between;
}

/* 상세 */
.axia-info .title {
    background: url(../img/sub/axia/axia-label03.png) no-repeat center;
}

.axia-info .img-wrap02 {
    max-width: 548px;
    margin: 0 auto 35px;
}
.axia-info .img-wrap03 {
    position: relative;
    max-width: 522px;
    margin: 90px auto 110px;
}

.axia-info .img-wrap03 .balls {
    position: relative;
    z-index: 5;
}
.axia-info .img-wrap03 .bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 470px;
    transform: translate(-50%, -50%);
    mix-blend-mode: color-dodge;
}
.axia-info .img-wrap03 .desc {
    display: flex;
    position: absolute;
    right: -334px;
    bottom: -100px;
    height: 234px;
    z-index: 11;
}

.axia-info .coat-info {
    display: flex;
    flex-direction: column;
    margin-top: 120px;
    align-items: center;
}
.axia-info .box-top {
    max-width: 640px;
    margin-bottom: -100px;
}
.axia-info .box-bot {
    max-width: 774px;
}

.axia-info.coat {
    padding: 100px 0 200px;
    background: url(../img/sub/axia/axia-bg06.jpg) no-repeat center 110px;
    background-size: cover;
}
.axia-info .desc.__m {
    display: none;
}

.axia-ball .images {
    max-height: 311px;
}
.axia-ball .lef .images {
    max-width: 475px;
}
.axia-ball .rig .images {
    max-width: 454px;
}

@media all and (max-width: 1250px) {
    .axia {
        margin-top: 50px;
    }
}

/* axia 반응형 */
@media all and (max-width: 1024px) {
    .axia {
        overflow: hidden;
    }
    .axia-top {
        height: 145vw;
    }
    .axia-top img {
        width: 50%;
        margin-bottom: 15px;
    }
    .axia .header-titles{
        font-family: 'Gmarket Sans';
        font-weight: 700;
        color: #fff;
        font-size: 32px;
        text-align: center;
        line-height: 1.35;
        font-style: italic;
    }
    .axia .header-titles span{
        font-size: 32px;
        line-height: 1.35;
    }

    .axia .axia-top .bg{
        background: url(../img/sub/axia/axia-main-bg-m.jpg) no-repeat bottom center;
        background-size: cover;
    }
    .axia .title {
        height: 32px;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        font-size: 14px;
    }
    .axia .axia-top .slo {
        position: absolute;
        top: 5%;
        width: 80%;
    }
    .axia .main-title {
        font-size: 32px;
        line-height: 1.2;
    }
    .axia-lineup .lef .bot .bg,
    .axia-lineup .rig .bot .bg {
        top: 50%;
        left: 50%;
        background-position: center;
        background-size: cover;
        transform: translate(-50%, -50%);
    }
    .axia-lineup {
        flex-direction: column;
        gap: 40px;
        padding: 80px 0;
    }
    .axia-lineup .title {
        margin-bottom: 30px;
    }
    .axia-lineup .mid {
        height: 0;
        padding-bottom: 45%;
        margin-bottom: 40px;
    }
    .axia-lineup .lef .mid img,
    .axia-lineup .rig .mid .box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
    }
    /* .axia-lineup .lef .mid .mid-bg {
        background: url(../img/sub/axia/axia-lef-bg01.png) no-repeat center 500%;
    } */
    .axia-lineup .bot {
        flex-direction: column;
        gap: 0px;
    }
    .axia-lineup .bot .logo {
        margin-bottom: 15px;
    }
    .axia-lineup .rig .bot .info,
    .axia-lineup .lef .bot .info {
        font-size: 14px;
        line-height: 1.5;
        text-align: center;
        align-items: center;
        order: 1;
    }
    .axia-lineup .bot > .item {
        order: 2;
    }
    .axia-info {
        padding: 80px 0;
    }
    .axia .desc.type01 {
        font-size: 18px;
        line-height: 1.45;
    }
    .axia-obj3 .mid {
        font-size: 18px;
        line-height: 1.45;
    }
    .axia-info .img-wrap {
        width: 65%;
        margin-bottom: 10%;
    }
    .axia-obj2 {
        position: relative;
        max-width: 1400px;
        margin: 0 auto;
    }
    .axia-obj2 .__p {
        display: none;
    }
    .axia-obj2 .__m {
        display: block;
    }
    .axia-obj2 .core {
        position: absolute;
        top: 51%;
        right: 21.5%;
        max-width: 20vw;
        height: 20vw;
        mix-blend-mode: multiply;
    }
    .axia-obj2 .desc.__p {
        display: none;
    }
    .axia-obj2 .desc.__m {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        max-width: none;
        height: 100%;
    }
    .axia-obj2 .desc.__m .top {
        position: absolute;
        top: 14%;
        right: 29%;
        width: 60%;
    }
    .axia-obj2 .desc.__m .bot {
        position: absolute;
        right: 29%;
        bottom: -19%;
        width: 60%;
    }
    .axia-obj3 {
        padding: 80px 20px;
    }
    .axia-obj3 .bg {
        height: 100%;
        padding-bottom: 0;
        border: 2px solid rgba(255, 255, 255, 0.2);
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(20px);
        border-radius: 10px;
    }
    .axia-obj3 .obj-wrap {
        height: auto;
    }
    .axia-obj3 .item-wrap {
        height: auto;
        padding: 30px 20px;
    }
    .axia-obj3 .mid {
        margin: 30px auto;
    }
    .axia-obj3 .info img {
        height: 32px;
    }
    .axia-obj3 .info {
        height: auto;
        margin-top: 40px;
        font-size: 12px;
        line-height: 1.4;
        text-align: center;
    }
    .axia-model {
        gap: 6px;
        width: 100%;
        height: auto;
        padding: 0 20px;
        margin: 30px auto 40px;
        flex-direction: column;
    }
    .axia-info .img-wrap02 {
        width: 60%;
        max-width: 20px auto;
    }
    .axia-info .img-wrap03 {
        width: 60%;
        margin: 40px auto;
    }
    .axia-info .img-wrap03 .desc.__p {
        display: none;
    }
    .axia-info .desc.__m {
        display: block;
        width: 65%;
        margin: 20px auto 0;
    }
    .axia-info.coat {
        padding: 40px 0 80px;
    }
    .axia-info .coat-info {
        padding: 0 20px;
        margin-top: 60px;
    }
    .axia-info .coat-info .box-top {
        width: 80%;
    }
    .axia-info .coat-info .box-bot {
        margin-top: 19%;
    }
    .condor-spec .axia-ball .legend.line2 li {
        height: 54px;
    }
    .condor-spec .legend.line2 li {
        display: flex;
        height: 45px;
        line-height: 1.25;
        align-items: center;
        justify-content: center;
    }
    .condoer-spec .axia li:last-of-type {
        width: 100%;
    }
}
@media all and (max-width: 500px) {
    .axia-lineup .lef .mid .mid-bg {
        background: url(../img/sub/axia/axia-lef-bg01m.jpg) no-repeat center 20px;
        background-size: 150%;
    }
}

/* axia 모션 */
.axia-top {
    overflow: hidden;
}

.axia .axia-top .slo{
    opacity: 0  ;
    transition: 1s;
}

.axia .axia-top.active .slo{
    opacity: 1;
}

.axia-top .bg {
    transform: translate(-50%, -50%) scale(1.3) !important;
    transition: 2s;
}
.axia-top.active .bg {
    transform: translate(-50%, -50%) scale(1) !important;
}

/* pc */
.lef .mid {
    opacity: 0;
    transition: 1s;
}
.lef.active .mid {
    opacity: 1;
}

.rig .mid {
    opacity: 0;
    transition: 1s;
}
.rig.active .mid {
    opacity: 1;
}

.lef .bot {
    opacity: 0;
    transition: 1s;
    transform: translateX(-30px);
}
.rig .bot {
    opacity: 0;
    transition: 1s;
    transform: translateX(30px);
}

.lef.active .bot,
.rig.active .bot {
    opacity: 1;
    transform: none;
    transition-delay: 0.5s;
}

.axia-info .desc,
.axia-info .img-wrap {
    opacity: 0;
    transform: translateY(40px);
    transition: 1s;
}

.axia-info .desc.active,
.axia-info .img-wrap.active {
    opacity: 1;
    transform: none;
}

.axia-obj2 .img-wrap {
    opacity: 0;
    transform: translateY(40px);
    transition: 1s;
}
.axia-obj2 .desc {
    opacity: 0;
    transform: translateX(-30px);
    transition: 1s;
    transition-delay: 0.5s;
}

.axia-obj2.active .img-wrap,
.axia-obj2.active .desc {
    opacity: 1;
    transform: none;
}

.axia-info .img-wrap03 {
    opacity: 0;
    transform: translateY(40px);
    transition: 1s;
}
.axia-info .img-wrap03.active {
    opacity: 1;
    transform: none;
}

.axia-info .img-wrap03.active .desc {
    opacity: 1;
    transform: none;
    transition-delay: 0.2s;
}

.axia-obj3 .bg,
.axia-obj3 .graph,
.axia-obj3 .mid,
.axia-obj3 .bot,
.axia-obj3 .info {
    opacity: 0;
    transform: translateY(40px);
    transition: 1s;
}

.axia-obj3 .bg.active,
.axia-obj3 .graph.active,
.axia-obj3 .mid.active,
.axia-obj3 .bot.active,
.axia-obj3 .info.active {
    opacity: 1;
    transform: none;
}

.axia-model > div {
    opacity: 0;
    transform: translateY(30px);
    transition: 1s;
}
.axia-model.active > div {
    opacity: 1;
    transform: none;
}
.axia-model.active .lef {
    transition-delay: 0;
}
.axia-model.active .rig {
    transition-delay: 0.2s;
}

.coat-info > div {
    opacity: 0;
    transform: translateY(60px);
    transition: 1s;
}
.coat-info.active > div {
    opacity: 1;
    transform: none;
}
.coat-info.active .box-top {
    transition-delay: 0;
}
.coat-info.active .box-bot {
    transition-delay: 0.2s;
}

/* 영문판 비교 */
.ball-compare {
    padding-bottom: 110px;
    background: #fff;
}

.ball-compare * {
    font-family: "SUITE";
}

.ball-compare select:focus {
    outline: none;
}

.compare-wrap {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    justify-content: space-between;
}
.compare-wrap .product {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.compare-wrap .select-wrap {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 56px;
    background: url(../img/sub/condor/compare-arr.png) #000 no-repeat right 24px center;
    background-size: 15px 9px;
    border-radius: 6px 6px 0 0;
}

.compare-wrap .select-wrap select {
    width: 100%;
    height: 100%;
    background: transparent;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.compare-wrap .select-item {
    width: 100%;
    padding: 0 36px;
    border: 1px solid #e6e6e6;
    border-top: none;
    box-sizing: border-box;
    border-radius: 0 0 6px 6px;
}

.compare-wrap .select-item .item {
    display: flex;
    flex-direction: column;
    height: 110px;
    border-bottom: 1px solid #e6e6e6;
    align-items: flex-start;
    justify-content: center;
}
.compare-wrap .select-item .item:last-of-type {
    border-bottom: none;
}

.compare-wrap .item:first-of-type .title {
    margin-bottom: 8px;
}

.compare-wrap .info-type2 {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
}
.compare-wrap .info-type2 li {
    position: relative;
    width: 100%;
    color: #bfbfbf;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}
.compare-wrap .info-type2 li.active {
    color: #ee142f;
}

.compare-wrap .info-type2 li:first-of-type::after,
.compare-wrap .info-type2 li:last-of-type::after {
    display: block;
    position: absolute;
    top: 50%;
    width: 1px;
    height: 14px;
    background: #b0b0b0;
    content: "";
    transform: translateY(-50%);
}

.compare-wrap .info-type2 li:first-of-type::after {
    right: 0;
}

.compare-wrap .info-type2 li:last-of-type::after {
    left: 0;
}

.compare-wrap .item .title {
    margin-bottom: 18px;
    color: #000;
    font-weight: 800;
    font-size: 18px;
    line-height: 1em;
}
.compare-wrap .item .info {
    color: #000;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4em;
}

.compare .select-item {
    display: none;
}
.compare .select-item.active {
    display: block;
}
.compare .select-item.disabled.active {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-bottom: 110%;
}

.compare .box {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fcfcfc;
    align-items: center;
    justify-content: center;
}

.compare .disable-ball {
    width: 80px;
    height: 80px;
    margin-bottom: 42px;
    border-radius: 50%;
    box-shadow: 0 30px 15px rgba(0, 0, 0, 0.11);
}

.compare .disable-txt {
    color: #000;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
}

.product .box-img {
    width: 100%;
    height: 190px;
}
.product .box-img img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* contact us */
.ball-contact-us {
    width: 100%;
    padding: 0 20px 200px;
    background: #fff;
}

.ball-contact-us * {
    font-family: "SUITE";
}

.ball-contact-us .box {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    max-width: 1080px;
    height: 540px;
    margin: 0 auto;
    background: url(../img/sub/condor/contact-us-bg.jpg) no-repeat center;
    background-size: cover;
    border-radius: 24px;
    align-items: center;
    justify-content: center;
}

.ball-contact-us .box p {
    margin-bottom: 45px;
    color: #fff;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.35;
    letter-spacing: -0.025em;
    text-align: center;
}

.ball-contact-us .ball-contact-btn {
    display: flex;
    width: 210px;
    height: 70px;
    background: #ea1836;
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    align-items: center;
    justify-content: center;
}

@media all and (max-width: 1024px) {
    .compare-wrap {
        gap: 12px;
        padding: 0 20px;
    }

    .compare .select-item.disabled.active {
        height: 550px;
        padding-bottom: 0;
    }

    .ball-contact-us .ball-contact-btn {
        width: 180px;
        height: 52px;
        font-size: 18px;
    }
}

@media all and (max-width: 767px) {
    .ball-compare {
        padding-bottom: 70px;
    }

    .compare-wrap {
        flex-direction: column;
        gap: 30px;
        padding: 0 20px;
        align-items: center;
    }

    .compare-wrap .origin .select-item:not(.disabled) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 10px;
    }

    .compare .select-item.disabled.active {
        position: relative;
        height: 200px;
        padding: 0 20px;
    }
    .compare .box {
        padding: 0 20px;
        box-sizing: border-box;
    }
    .compare .disable-ball {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
        box-shadow: 0 15px 10px rgba(0, 0, 0, 0.11);
    }
    .compare .disable-txt {
        font-size: 13px;
    }

    .compare-wrap .select-wrap {
        width: 100%;
        height: 40px;
        background: url(../img/sub/condor/compare-arr.png) #000 no-repeat right 10px center;
        background-size: 6px auto;
        border-radius: 6px 6px 0 0;
    }

    .compare-wrap .select-wrap select {
        padding-left: 12px;
        font-size: 14px;
        letter-spacing: -0.05em;
        text-align: left;
    }
    .product .box-img {
        width: 100%;
        height: 90px;
        margin: 0 auto 10px;
    }

    .product .box-img img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .compare-wrap .select-item {
        padding: 0 12px;
        border-radius: 0 0 6px 6px;
    }

    .compare-wrap .select-item .item {
        height: 65px;
    }

    .compare-wrap .select-item .item:first-of-type {
        height: 100%;
        padding: 15px 0;
        grid-column: 1 / 3;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    .compare-wrap .item .title {
        margin-bottom: 6px;
        font-size: 12px;
    }
    .compare-wrap .item .info {
        font-size: 12px;
    }

    .compare-wrap .info-type2 li {
        font-size: 11px;
        letter-spacing: -0.05em;
        text-wrap: wrap;
    }

    .ball-contact-us {
        width: 100%;
        padding: 0 20px 120px;
    }

    .ball-contact-us .wrap {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 85.25%;
    }
    .ball-contact-us .box {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    .ball-contact-us .box p {
        margin-bottom: 20px;
        font-size: 14px;
    }

    .ball-contact-us .box p br {
        display: block;
    }
    .ball-contact-us .ball-contact-btn {
        width: 38%;
        height: 38px;
        font-size: 13px;
    }

    .compare-wrap .feel-list{
        justify-content: space-between;
    }
    @media all and (max-width: 400px){
        .compare-wrap .feel-list li{
            width: auto;
        }
    }
    @media all and (min-width:401px){
        .compare-wrap .feel-list li{
            width: 100%;
        }
    }

    .product .select-item {
        display: none;
    }
    .product .select-item.active:not(.disabled) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 10px;
    }

    .compare-wrap .info-type2 li:first-of-type::after,
    .compare-wrap .info-type2 li:last-of-type::after {
        /* content: "";
        display: block;
        width: 1px;
        height: 6px;
        background: #b0b0b0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%); */
        display: none;
    }

    .compare-wrap .select-item .item:nth-of-type(4){
        border-bottom: none;
    }
}

.ball-compare {
    overflow: hidden;
}

.ball-compare .compare-wrap > .origin {
    opacity: 0;
    transform: translateX(-60px);
    transition: 1s;
}
.ball-compare .compare-wrap > .compare {
    opacity: 0;
    transform: translateX(60px);
    transition: 1s;
}
.ball-compare.active .compare-wrap > .origin,
.ball-compare.active .compare-wrap > .compare {
    opacity: 1;
    transform: none;
}

.ball-contact-us .box {
    opacity: 0;
    transform: translateY(60px);
    transition: 1s;
}
.ball-contact-us.active .box {
    opacity: 1;
    transform: none;
}

header.scroll.active .header-wrap::after {
    opacity: 0;
}
@media all and (min-width: 1025px) {
    header.scroll.active:hover .header-wrap::after {
        opacity: 1;
    }
}

/* vivid */
.vivid {overflow-x: hidden;}
.vivid img{object-fit: contain;}
.vivid-logo{display: flex; flex-direction: column; padding: 160px 0 200px; margin-bottom: 200px;
background: url(../img/sub/vivid/vivid-bg01.jpg) no-repeat center bottom; align-items: center;}
.vivid-logo img{width: auto; max-width: 100%; height: auto;}
.vivid-logo .logo-txt{
    display: block;
    margin: 25px auto 40px;
    color: #ffb453;
    font-family: 'SUITE';
    font-weight: 500;
    font-size: 24px;
    font-style: italic;
}
.vivid-logo .color-info .__m{
    display: none;
}
.vivid-logo .vivid-item{
    margin: 120px auto 0;
}

.vivid-top .gradient-line{
    display: block;
    width: 100%; height: 10px;
    background: linear-gradient(to right, #da2433, #edab4d, #ebd956, #dfe2cb, #85c47d, #2ca658, #3d7f92);
}

.vivid-top .top-banner{
    height: 280px;
}
.vivid-top .__p{
    display: block;
}
.vivid-top .__m{
    display: none;
}


.vivid-top .top-banner img{
    height: 100%;
    object-fit: cover;
}

.vivid *{
    font-family: 'SUITE';
}

.vivid .top{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vivid .title {
    display: flex;
    width: 100%;
    height: 40px;
    background-image: url(../img/sub/vivid/vivid-label01.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-size: 18px;
    justify-content: center;
    align-items: center;
}
.vivid .title b{
    color: #ff3737;
    font-weight: 800;
}
.vivid .main-title {
    margin: 28px auto 55px;
    font-family: 'SUITE';
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
}
.vivid .main-title b{
    font-weight: 900;
}

.vivid-info-wrap{
    background: url(../img/sub/vivid/vivid-bg02.jpg) #f6f6f6 no-repeat bottom center;
    background-size: 2100px auto;
}

.vivid-info{
    padding: 200px 0;
}

.vivid-info .obj{
    position: relative;
    max-width: 860px;
    margin: 0 auto;
}

.vivid-info .obj .ball{
    position: absolute;
    top: -5%;
    left: 50%;
    max-width: 354px;
    margin: 0 auto;
    transform: translateX(-50%);
    object-fit: contain;
    z-index: 10;
}
.vivid .desc.type01 {
    margin-top: 80px;
    color: #fff;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: -0.025em;
    text-align: center;
}
.vivid .desc.type01 span {
    display: inline-block;
    position: relative;
    font-weight: 400;
}
.vivid .desc.type01 b {
    position: relative;
    color: #ff3737;
    font-weight: 800;
}
.vivid .desc.type01 .border::after {
    display: block;
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    content: "";
}
.vivid .desc.type01 .border b::after {
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ff3737;
    content: "";
    z-index: 5;
}
.vivid-map{
    padding-bottom: 200px;
}
.vivid-map .obj{
    position: relative;
    max-width: 538px;
    margin: 0 auto;
}
.vivid-map .obj .location{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.vivid-matt{
    padding: 200px 0;
}
.vivid-matt .obj{
    position: relative;
    max-width: 1180px;
    margin: -58px auto;
}
.vivid-matt .obj .__p{
    display: block;
}
.vivid-matt .obj .__m{
    display: none;
}
.vivid-matt .obj img:last-of-type{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.vivid-matt .info{
    display: none;
}
.vivid-coat{
    padding: 200px 0;
    background: url(../img/sub/vivid/vivid-bg03.jpg) no-repeat center;
    background-size: cover;
}
.vivid-coat .obj{
    display: flex;
    position: relative;
    max-width: 772px;
    padding-bottom: 440px;
    margin: 0 auto;
    justify-content: center;
}
.vivid-coat .obj img:first-child{
    display: block;
    width: auto;
    max-width: 100%; height: auto;
}
.vivid-coat .obj img:last-child{
    position: absolute;
    top: 200px; left: 0; width: 100%; height: 546px;
}

.vivid-putting {
    overflow: hidden;
    width: 100%;
    padding: 200px 0;
}

.vivid-putting .obj{
    display: flex;
    position: relative;
    width: 1628px;
    margin: 0 auto;
}

.vivid-putting .obj img:last-child{
    position: absolute;
    top: 46px;
    right: 276px;
    width: 442px;
    height: 253px;
}
.vivid-putting .obj .__p{
    display: block;
}
.vivid-putting .obj .__m{
    display: none;
}
.vivid-new{
    padding: 0 20px 280px;
    background: url(../img/sub/vivid/vivid-bg04.jpg) no-repeat center;
    background-size: cover;
}
.vivid-new .title{
    background-image: url(../img/sub/vivid/vivid-label02.png);
}
.vivid-new .upper{
    width: 100%; max-width: 656px;
    padding: 200px 0 180px;
    margin: 0 auto;
}
.vivid-new .upper .obj{
    position: relative;
}

.vivid-new .upper .obj img{
    display: block;
}

.vivid-new .upper .obj img:first-of-type{
    position: relative;
    z-index: 5;
}

.vivid-new .upper .obj img:last-of-type{
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 3;
}

.vivid-new .upper .info{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 60px auto 0;
    align-items: center;
    justify-content: center;
}

.vivid-new .upper .info p{
    display: flex;
    position: relative;
    width: 100%;
    max-width: 340px;
    height: 60px;
    padding: 0 0 0 60px;
    background: linear-gradient(to right, #ff8400, #ea1836);
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    align-items: center;
    border-radius: 30px;
}

.vivid-new .upper .info p::before{
    display: block;
    position: absolute;
    top: 0;
    left: 25px;
    width: 20px;
    height: 100%;
    background: url(../img/sub/vivid/vivid-chk.png) no-repeat center;
    background-size: contain;
    content: '';
}

.vivid-new .lower{
    position: relative;
    width: 100%;
    max-width: 1080px;
    padding: 120px 0 80px;
    margin: 0 auto;
    filter: drop-shadow(0px 24px 24px rgba(0, 0, 0, 0.1));
}

.vivid-new .lower::before{
    display: block;
    position: absolute; top: 1px; left: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    background: #fff;
    content: '';
    border-radius: 12px;
    z-index: 2;
}

.vivid-new .lower::after{
    display: block;
    position: absolute; top: 0px; left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #ff8400, #ea1836);
    content: '';
    border-radius: 12px;
    z-index: 0;
    opacity: 0.2;
}

.vivid-new .lower .arr{
    display: flex;
    position: absolute;
    top: -71px;
    left: 0;
    width: 100%;
    height: 152px;
    justify-content: center;
    align-items: center;
}

.vivid-new .lower > div{
    position: relative;
    z-index: 10;
}
/* 
.vivid-new .main-title{
    margin-bottom: 0;
} */

.vivid-new .obj-top{
    max-width: 618px;
    padding: 40px 0;
    margin: 0 auto;
}

.vivid-new .obj-bot{
    max-width: 468px;
    padding: 40px 0;
    margin: 0 auto;
}


.vivid-new .desc{
    display: flex;
    gap: 12px;
    font-size: 14px;
    justify-content: center;
    align-items: center;
}
.vivid-new .desc img{
    max-width: 78px;
}

.vivid-performance {
    padding: 160px 0 300px;
}

.vivid-performance .title{
    background-image: url(../img/sub/vivid/vivid-label03.png);
}

.vivid-performance .icon-wrap{
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;
}
.vivid-performance .icon-img{
    display: flex;
    width: 155px;
    height: 155px;
    border: 1px solid #e7e7e7;
    background: #f6f6f6;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}   

.vivid-performance .icon-wrap img{
    display: block;
    width: auto;
}
.vivid-performance .icon01 img{
    height: 45px;
}
.vivid-performance .icon02 img{
    height: 58px;
}
.vivid-performance .icon03 img{
    height: 61px;
}
.vivid-performance .icon04 img{
    height: 58px;
}
.vivid-performance .icon05 img{
    height: 68px;
}
.vivid-performance .icon06 img{
    height: 54px;
}

.vivid-performance .icon p strong{
    display: block;
    margin-top: 15px;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.025em;
    text-align: center;
}

.vivid-performance .icon p span{
    display: block;
    margin-top: 4px;
    color: #777;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.025em;
    text-align: center;
}


.vivid-performance .obj{
    width: 100%;
    max-width: 1080px;
    margin: 125px auto 0;
}

.vivid-performance .obj .__p{
    display: block;
}
.vivid-performance .obj .__m{
    display: none;
}
.vivid-model{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}

.vivid-model img{
    display: block;
}

.condor-spec .img-wrap.cen{
    justify-content: center;
}
.condor-spec .img-wrap.cen .item-name{
    font-size: 48px;
}
.condor-spec .img-wrap.cen img{
    max-width: 480px;
}

.condor-spec .table.type2 {
    border-top: 1px solid #000;
}

.condor-spec .table.type2 ul > li:first-of-type{
    display: flex;
    width: 190px;
    background: #000 !important;
    color: #fff !important;
    font-weight: 800;
    font-size: 18px;
    justify-content: center;
}

.condor-spec .table.type2 ul > li:first-of-type span{
    display: flex;
    width: 48px;
    justify-content: space-between;
}
.condor-spec .table.type2 .item > ul > li:last-of-type{
    padding-left: 55px;
    text-align: left;
    justify-content:flex-start;
}

.condor-link.vivid-ball img{
    width: auto;
    max-width: 100%;
    height: 311px;
}
.condor-link.vivid-ball .lef .images,
.condor-link.vivid-ball .rig .images{
    width: 100%;
    max-width: none;
}

@media all and (max-width: 1450px){
    .vivid{margin-top:50px;}
}

@media (min-width: 280px) and (max-width: 1024px){
    .vivid-logo .color-info .__p{
        display: none !important;
    }
    .vivid-logo .color-info .__m{
        display: block !important;
    }
    .condor-spec .img-wrap.cen .item-name{
        font-size: 30px;
    }

    .vivid-top .top-banner{
        height: 180px;
    }
    .vivid-top .top-banner img{
        object-fit: contain;
    }
    .vivid-top .__p{
        display: none;
    }
    .vivid-top .__m{
        display: block;
    }

    .vivid-logo{
        padding: 100px 40px 40px;
        margin-bottom:60px;
        background-size: 200vw;
    }

    .vivid-logo > img{
        width: 80%;
    }

    .vivid-logo .logo-txt{
        margin: 15px auto 30px;
        font-size: 16px;
        text-align: center;
        text-wrap:nowrap;
    }
    .vivid-logo .vivid-item{
        margin: 40px auto;
    }

    .vivid .main-title{
        font-size: 32px;
        line-height: 1.2;
    }
    .vivid .title {
        width: 136px;
        height: 32px;
        background-size: contain;
        font-size: 14px;
    }

    .vivid-info{
        padding: 80px 20px 120px;
    }

    .vivid .desc.type01 span{
        font-size: 18px;
        line-height: 1.6em;
    }

    .vivid .desc.type01{
        margin-top: 40px;
        font-size: 18px;
        line-height: 1.6em;
    }

    .vivid .desc.type01 br{
        display: none;
    }
    .vivid .desc.type01 br.__m{
        display: block;
    }
    .vivid .desc.type01 b{
        border-bottom: none;
    }
    .vivid .desc.type01 .border b::after {
        bottom: -1px;
    }
    .vivid-info-wrap{
        background-position: center;
        background-size: 125vw;
    }
    .vivid-map{
        padding: 0 20px 120px;
    }
    .vivid-map .obj{
        width: 80%;
    }
    .vivid-matt{
        padding: 100px 0px;
    }
    .vivid-matt .obj{
        margin: -5% auto 0;
    }
    .vivid-matt .obj .__p{
        display: none;
    }
    .vivid-matt .obj .__m{
        display: block;
        position: relative;
    }
    .vivid-matt .obj img:last-of-type{
        top: auto;
        bottom: -55%;
        left: 50%;
        width: calc(100% - 40px);
        transform: translateX(-50%);
    }

    .vivid-coat{
        padding: 100px 20px;
    }
    .vivid-coat .obj{
        padding-bottom: 55%;
    }
    .vivid-coat .obj > div{
        display: flex;
        justify-content: center;
    }
    .vivid-coat .obj img:first-child{
        width: 85%;
    }
    .vivid-coat .obj img:last-child{
        top: 27.5%;
        height: auto;
    }
    .vivid-putting{
        padding: 100px 0;
    }
    .vivid-putting .obj{
        width: 100%;
        padding-bottom: 22%;
        margin-top: -10%;
    }
    .vivid-putting .obj .__p{
        display: none;
    }
    .vivid-putting .obj .__m{
        display: block;
    }
    .vivid-putting .obj img:last-child{
        top: auto;
        right: 20px;
        bottom: 0%;
        width: 87%;
        height: auto;
    }
    .vivid-new{
        padding: 80px 20px 140px;
    }
    .vivid-new .upper{
        padding: 80px 0 120px;
    }
    .vivid-new .main-title{
        margin-bottom: 40px;
    }
    .vivid-new .upper .info{
        margin-top: 30px;
    }
    .vivid-new .upper .info p{
        max-width: 280px;
        height: 48px;
        padding-left: 52px;
        font-size: 14px;
        border-radius: 24px;
    }
    .vivid-new .upper .info p::before{
        left: 20px;
        width: 16px;
    }
    .vivid-new .lower{
        padding: 60px 20px 60px; 
    }
    .vivid-new .lower .main-title{
        margin: 0 auto;
    }
    .vivid-new .lower .arr{
        top: -35px;
        height: 70px;
    }
    .vivid-new .obj-top{
        padding: 35px 0 25px;
    }
    .vivid-new .obj-bot{
        width: 75%;
    }
    .vivid-new .desc{
        font-size: 10px;
    }
    .vivid-new .desc img{
        max-width: 50px;
    }
    .vivid-new .desc p{
        width: auto;
        display: inline-block;
        text-wrap: nowrap;
    }

    .vivid-performance{
        padding: 100px 20px;
    }
    .vivid-performance .icon-wrap{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 10px;
    }
    .vivid-performance .icon{ display: flex; flex-direction: column;
        width: 100%; align-items: center;
        justify-content: center;
    }
    .vivid-performance .icon-img{
        width: 100px;
        height: 100px;
    }
    .vivid-performance .icon01 img{
        height: 30px;
    }
    .vivid-performance .icon02 img{
        height: 38px;
    }
    .vivid-performance .icon03 img{
        height: 40px;
    }
    .vivid-performance .icon04 img{
        height: 38px;
    }
    .vivid-performance .icon05 img{
        height: 45px;
    }
    .vivid-performance .icon06 img{
        height: 35px;
    }
    .vivid-performance .icon p strong{
        margin-top: 12px;
        font-size: 14px;
        text-wrap: nowrap;
    }
    
    .vivid-performance .icon p span{
        margin-top: 2px;
        font-size: 12px;
    }
    .vivid-performance .obj{
        margin-top: 60px;
    }

    .vivid-performance .obj .__p{
        display: none;
    }
    .vivid-performance .obj .__m{
        display: block;
        position: relative;
    }
    .vivid-performance .obj img:last-child{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .vivid-model{
        grid-template-columns: repeat(1, 1fr);
        padding: 0 20px;
    }

    .condor-spec .img-wrap.cen img{
        width: 60%;
    }
    .condor-spec .table.type2{
        border-top: none;
    }
    .condor-spec .table.type2 .item > ul:first-of-type{
        border-top: 1px solid #000;
    }
    .condor-spec .table.type2 ul > li:first-of-type{
        width: 25%;
        font-size: 14px;
    }
    .condor-spec .table.type2 ul > li:first-of-type span{
        width: 36px;
    }
    .condor-spec .table.type2 .item > ul > li:last-of-type{
        padding-left: 30px;
    }

    .condor-link.vivid-ball .images img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .vivid-matt .info{
        margin-top: 45%;
        width: 100%;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .vivid-matt .info p{
        display: flex;
        position: relative;
        width: 100%;
        max-width: 280px;
        height: 48px;
        padding: 0 0 0 52px;
        padding-left: 52px;
        background: linear-gradient(to right, #ff8400, #ea1836);
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        align-items: center;
        border-radius: 24px;
    }
    .vivid-matt .info p::before{
        display: block;
        content: '';
        position: absolute;
        top: 0;
        left: 20px;
        width: 16px;
        height: 100%;
        background: url(../img/sub/vivid/vivid-chk.png) no-repeat center;
        background-size: contain;
    }
}

/* vivid motion */
.vivid-top .top-banner{overflow: hidden; background: #feffde;}

.vivid-top .top-banner img{
    transform: translateY(110%);
    transition: 0.6s;
}
.vivid-top .top-banner.active img{
    transform: translateY(0);
}

.vivid-logo > img {
    opacity: 0;
    transition: 1s;
    transform: translateX(80px);
}

.vivid-logo > .logo-txt {
    opacity: 0;
    transition: 1s;
    transform: translateX(-80px);
}
.vivid-logo > .color-info {
    opacity: 0;
    transition: 1s;
    transform: translateX(80px);
}

.vivid-logo .vivid-item{
    opacity: 0;
    transition: 1s;
    transform: translateY(60px);
}

.vivid-logo.active *{
    opacity: 1;
    transform: none;
}

.vivid-info .obj img:first-of-type{
    opacity: 0;
    transition: 1s;
    transition-delay: 0.8s;
}
.vivid-info .obj img:last-of-type{
    opacity: 0;
    transition: 1s;
    transform: translateX(-40%);
}

.vivid-info .obj.active img:last-of-type{
    opacity: 1;
    transform: none;
}

.vivid-info .obj.active img:first-of-type{
    opacity: 1;
}

.vivid .desc{
    opacity: 0;
    transform: translateY(60px);
    transition: 1s;
}
.vivid .desc.active{
    opacity: 1;
    transform: none;
}
.vivid-map img{
    opacity: 0;
    transition: 1s;
    z-index: 10;
    transition-delay: 0.5s;
}
.vivid-map img:not(.location){
    position: relative;
    opacity: 0;
    transform: scale(1.15);
    transition: 0.8s;
    z-index: 5;
}
.vivid-map .obj.active img{
    opacity: 1;
    transform: none;
}

@media all and (min-width: 1025px){

    .vivid-matt .obj img:first-child{
        opacity: 0;
        transition: 1s;
    }
    .vivid-matt .obj img:last-of-type{
        opacity: 0;
        transition: 1s;
        transition-delay: 0.6s;
    }
    .vivid-matt .obj.active img:first-of-type{
        opacity: 1;
    }
    .vivid-matt .obj.active img:last-of-type{
        opacity: 1;
    }
}

@media all and (max-width: 1024px){

    .vivid-matt .obj img:first-child{
        opacity: 0;
        transition: 1s;
    }
    .vivid-matt .obj img:last-of-type{
        opacity: 0;
        transform: translate(-50%, 80px);
        transition: 1s;
        transition-delay: 0.6s;
    }
    .vivid-matt .obj.active img:first-of-type{
        opacity: 1;
    }
    .vivid-matt .obj.active img:last-of-type{
        opacity: 1;
        transform: translate(-50%, 0px);
    }

    .vivid-matt .info p:first-of-type {
        opacity: 0;
        transition: 1s;
        transform: translateX(-80px);
    }
    .vivid-matt .info p:last-of-type {
        opacity: 0;
        transition: 1s;
        transform: translateX(80px);
    }
    .vivid-matt .info.active p{
        opacity: 1;
        transform: none;
    }
}

.vivid-coat .obj img{
    opacity: 0;
    transform: translateY(60px);
    transition: 1s;
}
.vivid-coat .obj.active img{
    opacity: 1;
    transform: none;
}
.vivid-coat .obj.active img:last-of-type{
    transition-delay: 0.2s;
}

.vivid-putting .obj img{
    opacity: 0;
    transition: 1s;
}
.vivid-putting .obj.active img{
    opacity: 1;
}
.vivid-putting .obj.active img:last-of-type{
    transition-delay: 0.6s;
}

.vivid-new .upper .obj img{
    opacity: 0;
    transition: 1s;
}
.vivid-new .upper .obj.active img{
    opacity: 1;
}
.vivid-new .upper .obj.active img:last-of-type{
    transition-delay: 0.6s;
}
.vivid-new .info p:first-of-type {
    opacity: 0;
    transition: 1s;
    transform: translateX(-80px);
}
.vivid-new .info p:last-of-type {
    opacity: 0;
    transition: 1s;
    transform: translateX(80px);
}
.vivid-new .info.active p{
    opacity: 1;
    transform: none;
}

.vivid-new .arr{
    opacity: 0;
    transform: translateY(-60px);
    transition: 1s;
}

.vivid-new .arr.active{
    opacity: 1;
    transform: none;
}

.vivid-new .obj-top{
    opacity: 0;
    transition: 1s;
    transform: translateX(80px);
}
.vivid-new .obj-bot{
    opacity: 0;
    transition: 1s;
    transform: translateX(-80px);
}

.vivid-new .obj-top.active,
.vivid-new .obj-bot.active{
    opacity: 1;
    transform: none;
}

.vivid-performance .icon-wrap li{
    opacity: 0;
    transition: 0.6s;
}

.vivid-performance .icon-wrap.active li{
    opacity: 1;
}

.vivid-performance .icon-wrap.active .icon01{
    transition-delay: 0.4s;
}
.vivid-performance .icon-wrap.active .icon02{
    transition-delay: 0.6s;
}
.vivid-performance .icon-wrap.active .icon03{
    transition-delay: 0.8s;
}
.vivid-performance .icon-wrap.active .icon04{
    transition-delay: 1s;
}
.vivid-performance .icon-wrap.active .icon05{
    transition-delay: 1.2s;
}
.vivid-performance .icon-wrap.active .icon06{
    transition-delay: 1.4s;
}

.vivid-performance .obj img{
    opacity: 0;
    transition: 1s;
}
.vivid-performance .obj.active img{
    opacity: 1;
}
.vivid-performance .obj.active img:last-of-type{
    transition-delay: 0.6s;
}

@media all and (min-width: 1025px){
    .vivid-model .img-wrap{
        opacity: 0;
        transition: 1s;
        transform: translateY(60px);
    }
    .vivid-model .img-wrap.active{
        opacity: 1;
        transform: none;
    }
    .vivid-model .img-wrap:nth-of-type(2n) {
        transition-delay: 0.2s;
    }
}

@media all and (max-width: 1024px){
    .vivid-model .img-wrap{
        opacity: 0;
        transition: 1s;
        transform: translateX(60px);
    }
    .vivid-model .img-wrap:nth-of-type(2n) {
        transform: translateX(-60px);
    }
    .vivid-model .img-wrap.active{
        opacity: 1;
        transform: none;
    }
}