@charset "utf-8"; /* 공통
 ========================================================================== */
.main2023 {
    position: relative;
    overflow: hidden;
    font-family: "Gellix","Pretendard",sans-serif;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: -0.025em
}

.main2023 p {
    margin-top: 0;
    margin-bottom: 0
}

.main2023 .inner {
    position: relative;
    max-width: 100%;
    padding-left: 10.000em;
    padding-right: 2.500em;
    font-size: 1rem
}

.main2023 .section-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-bottom: 4.063em;
    font-size: 1rem;
    opacity: 0;
    transform: translateY(3.125em);
    -webkit-transform: translateY(3.125em);
    -moz-transform: translateY(3.125em);
    -ms-transform: translateY(3.125em);
    -o-transform: translateY(3.125em);
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s
}

.main2023 .section-top h2 {
    font-family: inherit;
    font-size: 4.000rem;
    font-weight: bold;
    line-height: 0.875em;
    letter-spacing: 0.04em;
    color: #222
}

.main2023 .section-top h2 a {
    color: inherit
}

.main2023 .view-more-btn {
    position: relative;
    display: inline-block;
    width: 7.833em;
    padding: 0.778em 0;
    border-radius: 1.333em;
    border: 1px solid #fff;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    color: #fff;
    text-align: center;
    transition: border 300ms,color 300ms,background-color 300ms,background-image 300ms;
    box-sizing: border-box
}

.main2023 .view-more.large .view-more-btn {
    width: 12.222em;
    padding: 1.111em 0;
    border-radius: 1.667em;
    color: #222
}

.main2023 .view-more-btn span {
    display: inline-block;
    padding-right: 1em;
    background-image: url('https://amc.apglobal.com/asset/384224417642/image_5q3d84b2qd0if8jcfbs7s0kc6g?content-disposition=inline/button_arrow_w_kr_230118.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 0.444em 0.722em
}

.main2023 .view-more.large .view-more-btn span {
    display: inline-block;
    padding-right: 1em;
    background-image: url('https://amc.apglobal.com/asset/384224417642/image_6jfkktpm295lh0g3b55qs6ln5p?content-disposition=inline/button_arrow_b_kr_230118.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 0.444em 0.722em
}

.main2023 a.view-more-btn:hover,.main2023 a .view-more-btn:hover {
    border: 1px solid #fff;
    background-color: #fff;
    color: #222;
    transition: border 300ms,color 300ms,background-color 300ms,background-image 300ms
}

.main2023 a.view-more-btn:hover span,.main2023 a .view-more-btn:hover span {
    background-image: url('https://amc.apglobal.com/asset/384224417642/image_6jfkktpm295lh0g3b55qs6ln5p?content-disposition=inline/button_arrow_b_kr_230118.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 0.444em 0.722em
}

.main2023 .btn-more {
    width: 2.500rem;
    height: 2.500rem;
    background-image: url('https://amc.apglobal.com/asset/384224417642/image_vf4larv7cd1op471a6iglq1t5g?content-disposition=inline/button_more_kr_230118.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
    text-indent: -9999px;
    transition: background-image 300ms
}

.main2023 .btn-more:hover {
    background-image: url('https://amc.apglobal.com/asset/384224417642/image_s4oqlegjap56hafjhuiut8j14p?content-disposition=inline/button_more_hover_kr_230118.svg');
    transition: background-image 300ms
}

.common-slide-arrow.swiper-button-next.swiper-button-disabled,.common-slide-arrow.swiper-button-prev.swiper-button-disabled {
    opacity: 0.2
}

.common-slide-arrow.swiper-button-next,.common-slide-arrow.swiper-button-prev {
    top: 50%;
    width: 2.063em;
    height: 4.000em;
    background-size: 100% auto;
    background-position: center;
    opacity: 0.8;
    transition: opacity 300ms;
    font-size: 1rem
}

.common-slide-arrow.swiper-button-next {
    right: 2.500em;
    background: url('https://amc.apglobal.com/asset/384224417642/image_iemjnk2m4l4rtbrkpe1uh5d95o?content-disposition=inline/slide_next_w_kr_230118.svg') no-repeat
}

.common-slide-arrow.swiper-button-prev {
    left: 2.500em;
    background: url('https://amc.apglobal.com/asset/384224417642/image_d1k2b670ap7fddirn20evp0472?content-disposition=inline/slide_prev_w_kr_230118.svg') no-repeat
}

.common-slide-arrow.swiper-button-next:hover,.common-slide-arrow.swiper-button-prev:hover {
    opacity: 1
}

.common-slide-arrow.swiper-button-next::before,.common-slide-arrow.swiper-button-prev::before,.common-slide-arrow.swiper-button-next::after,.common-slide-arrow.swiper-button-prev::after {
    display: none
}

/* bullet pagination */
.main2023 .swiper-pagination.common-bullet {
    position: initial;
    display: flex;
    align-items: center;
    width: auto
}

.main2023 .swiper-pagination.common-bullet .swiper-pagination-bullet {
    background: transparent;
    width: 1.688em;
    height: 1.688em;
    margin: 0 0.750em 0 0;
    font-size: 1rem;
    opacity: 1;
    border: none
}

.main2023 .swiper-pagination.common-bullet .swiper-pagination-bullet svg {
    display: inline-block;
    width: 1.688em;
    height: 1.688em;
    border-radius: 50%
}

.main2023 .swiper-pagination.common-bullet .swiper-pagination-bullet svg .path {
    display: none;
    opacity: .5
}

/* .main2023 .swiper-pagination.common-bullet .swiper-pagination-bullet-active .path.pause {
    animation-play-state:paused;
} */
.main2023 .swiper-pagination.common-bullet .swiper-pagination-bullet .path,.main2023 .swiper-pagination.common-bullet .swiper-pagination-bullet .path2 {
    transition: all 1s
}

.main2023 .is-active-color--black .swiper-pagination.common-bullet .swiper-pagination-bullet .path {
    stroke: #444
}

.main2023 .is-active-color--black .swiper-pagination.common-bullet .swiper-pagination-bullet .path2 {
    fill: #444
}

.main2023 .playPause {
    position: relative;
    z-index: 1;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    border: 0;
    font-size: 0;
    box-sizing: border-box;
    cursor: pointer
}

.main2023 .playPause svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.875rem;
    height: 0.875rem;
    transform: translate(-50%,-50%)
}

.main2023 .playPause path {
    transition: all 1s
}

.main2023 .playPause.play path:not(.path-play) {
    fill: none !important
}

.main2023 .playPause.pause path:not(.path-pause) {
    fill: none !important
}

.main2023 .is-active-color--black .playPause path {
    fill: #444
}

@media screen and (max-width: 1920px) {
    .main2023 .inner {
        font-size:0.833vw
    }

    .main2023 .section-top {
        font-size: 0.833vw
    }

    .main2023 .section-top h2 {
        font-size: 3.333vw
    }

    .main2023 .view-more-btn {
        font-size: 0.938vw
    }

    .main2023 .btn-more {
        width: 2.083vw;
        height: 2.083vw
    }

    .common-slide-arrow.swiper-button-next,.common-slide-arrow.swiper-button-prev {
        font-size: 0.833vw
    }

    .main2023 .swiper-pagination.common-bullet .swiper-pagination-bullet {
        font-size: 0.833vw
    }

    .main2023 .playPause {
        width: 1.563vw;
        height: 1.563vw
    }

    .main2023 .playPause svg {
        width: 0.729vw;
        height: 0.729vw
    }
}

@media screen and (max-width: 1440px) {
    .main2023 .inner {
        padding:0 2.500em;
        font-size: 1rem
    }

    .main2023 .section-top {
        margin-bottom: 2.188em;
        font-size: 1rem
    }

    .main2023 .section-top h2 {
        font-size: 2.375rem;
        line-height: 1;
        letter-spacing: 1.2px
    }

    .main2023 .view-more-btn {
        width: 8.357em;
        padding: 0.714em 0;
        border-radius: 30px;
        font-size: 0.875rem;
        letter-spacing: -0.01em
    }

    .main2023 .view-more.large .view-more-btn {
        width: 9.857em;
        padding: 1em 0;
        font-size: 0.875rem;
        letter-spacing: -0.01em
    }

    .main2023 .view-more-btn span,.main2023 .view-more.large .view-more-btn span {
        padding-right: 15px;
        background-size: 6px 10px
    }

    .main2023 a.view-more-btn:hover span,.main2023 .view-more.large a.view-more-btn:hover span,.main2023 a .view-more-btn:hover span,.main2023 a .view-more.large .view-more-btn:hover span {
        background-size: 6px 10px
    }

    .main2023 .btn-more {
        width: 24px;
        height: 24px
    }

    .common-slide-arrow.swiper-button-next,.common-slide-arrow.swiper-button-prev {
        display: none;
        font-size: 1rem
    }

    .main2023 .swiper-pagination.common-bullet .swiper-pagination-bullet {
        width: 1.250em;
        height: 1.250em;
        margin: 0 8px 0 0;
        font-size: 1rem
    }

    .main2023 .swiper-pagination.common-bullet .swiper-pagination-bullet:last-child {
        margin-right: 4px
    }

    .main2023 .swiper-pagination.common-bullet .swiper-pagination-bullet {
        font-size: 1rem
    }

    .main2023 .swiper-pagination.common-bullet .swiper-pagination-bullet svg {
        width: 1.250em;
        height: 1.250em
    }

    .main2023 .playPause {
        width: 30px;
        height: 30px
    }

    .main2023 .playPause svg {
        width: 12px;
        height: 12px
    }
}

@media screen and (max-width: 720px) {
    .main2023 .inner {
        padding:0 1.250em
    }

    .main2023 .section-top {
        margin-bottom: 1.563em
    }

    .main2023 .section-top h2 {
        font-size: 1.875rem;
        line-height: 0.93;
        letter-spacing: 0.01em
    }

    .main2023 .view-more-btn,.main2023 .view-more.large .view-more-btn {
        width: 7.500em;
        padding: 0.571em 0;
        font-size: 0.875rem
    }

    .main2023 .view-more-btn span,.main2023 .view-more.large .view-more-btn span {
        padding-right: 14px;
        background-size: 4.5px 7.5px
    }

    .main2023 a.view-more-btn:hover span,.main2023 .view-more.large a.view-more-btn:hover span,.main2023 a .view-more-btn:hover span,.main2023 a .view-more.large .view-more-btn:hover span {
        background-size: 4.5px 7.5px
    }

    .main2023 .btn-more {
        width: 20px;
        height: 20px
    }

    .main2023 .swiper-pagination.common-bullet .swiper-pagination-bullet {
        margin: 0 10px 0 0
    }

    .main2023 .swiper-pagination.common-bullet .swiper-pagination-bullet:last-child {
        margin-right: 6px
    }

    .main2023 .playPause {
        width: 30px;
        height: 30px
    }

    .main2023 .playPause svg {
        width: 12px;
        height: 12px
    }
}

@keyframes slideUp {
    0% {
        opacity: 1;
        transform: translateY(100%);
        -moz-transform: translateY(100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
        -moz-transform: translateY(0%)
    }
}

@keyframes slideUpOpt {
    0% {
        opacity: 0;
        transform: translateY(100%);
        filter: blur(5px);
        -moz-transform: translateY(100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
        filter: blur(0px);
        -moz-transform: translateY(0%)
    }
}

@keyframes dash {
    from {
        stroke-dashoffset: 1000
    }

    to {
        stroke-dashoffset: 0
    }
}

/* aos */
.main2023 .sec.scroll .section-top {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0)
}

.main2023 .campagin-sec.scroll .campagin-sec-sub-top {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0)
}

.main2023 .campagin-sec.scroll .campagin-main-area {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0)
}

.main2023 .campagin-sec.scroll .campagin-view-more-box {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0)
}

.main2023 .best-sec.scroll .section-cont {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0)
}

.main2023 .new-sec.scroll .section-cont {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0)
}

.main2023 .branding-sec.scroll {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0)
}

/* 1. key-visual section
========================================================================== */
.key-visual-sec {
    background-color: #fff
}

.key-visual-swiper {
    width: 100%;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    height: calc(var(--vh, 1vh) * 100 - 60px);
    min-height: 45vw
}

.key-visual-slide {
    overflow: hidden
}

.key-visual-slide .key-visual-con {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    cursor: pointer
}

.key-visual-slide .key-visual-con::after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    content: '';
    width: 100%;
    height: 21.77%;
    background-image: linear-gradient(to top, #000, #0000);
    opacity: 0.1
}

.key-visual-slide .key-img-box {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 69.5vh;
    height: 69.5dvh;
    height: calc(var(--vh, 1vh) * 69.5);
    min-height: 34vw;
    transform-origin: center bottom;
    overflow: hidden
}

.key-visual-swiper.init .key-visual-slide .key-img-box {
    transform: scale(var(--main-kv-scale, 1.43));
    -webkit-transform: scale(var(--main-kv-scale, 1.43));
    -moz-transform: scale(var(--main-kv-scale, 1.43));
    -ms-transform: scale(var(--main-kv-scale, 1.43));
    -o-transform: scale(var(--main-kv-scale, 1.43))
}

.key-visual-swiper.start .key-visual-slide .key-img-box {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transition: 1.5s;
    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;
    -ms-transition: 1.5s;
    -o-transition: 1.5s
}

.key-visual-swiper .key-visual-slide .key-img-box.change img {
    transform: scale(1.04);
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    -o-transform: scale(1.04)
}

.key-visual-slide .key-img-box::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 20vh;
    height: 20dvh;
    height: calc(var(--vh, 1vh) * 20);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0),#000);
    opacity: 0.1
}

.key-visual-slide .key-img-box img {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center bottom;
    object-position: center bottom;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s
}

.key-slide-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    text-align: left
}

.key-slide-content .key-text-wrap {
    max-width: inherit;
    margin: 0 10.000em;
    font-size: 1rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.key-slide-content .key-text-wrap:focus {
    outline: 1px solid #000;
    outline-offset: -2px;
}

.key-slide-content .key-title {
    position: absolute
}

.key-slide-content .key-title strong {
    display: block;
    font-family: inherit;
    font-size: 6.250rem;
    font-weight: bold;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #222;
    opacity: 0
}

.key-slide-content .key-title.three strong {
    font-size: 5.625rem
}

.key-slide-content .key-title strong .ko {
    display: inline-block;
    font-family: "Pretendard",sans-serif;
    font-size: 5.313rem;
    font-weight: 700;
    transform: translateY(-2px)
}

.key-slide-content .key-title.three strong .ko {
    font-size: 76px;
    font-size: 4.750rem
}

.key-slide-content .split-parent {
    overflow: hidden
}

.swiper-slide-active .key-slide-content .key-title .split-parent:nth-of-type(1) strong {
    animation: slideUp 1s 1s ease forwards;
    -webkit-animation: slideUp 1s 1s ease forwards
}

.swiper-slide-active .key-slide-content .key-title .split-parent:nth-of-type(2) strong {
    animation: slideUp 1s 1.8s ease forwards;
    -webkit-animation: slideUp 1s 1.8s ease forwards
}

.swiper-slide-active .key-slide-content .key-title.three .split-parent:nth-of-type(1) strong {
    animation: slideUp 1s 0.8s ease forwards;
    -webkit-animation: slideUp 1s 0.8s ease forwards
}

.swiper-slide-active .key-slide-content .key-title.three .split-parent:nth-of-type(2) strong {
    animation: slideUp 1s 1.3s ease forwards;
    -webkit-animation: slideUp 1s 1.3s ease forwards
}

.swiper-slide-active .key-slide-content .key-title.three .split-parent:nth-of-type(3) strong {
    animation: slideUp 1s 1.8s ease forwards;
    -webkit-animation: slideUp 1s 1.8s ease forwards
}

.key-slide-content .key-text {
    position: absolute;
    bottom: 20.313em;
    left: 0;
    width: 100%;
    /*padding: 0 10.000em;*/
    font-size: 1rem;
    overflow: hidden;
    box-sizing: border-box
}

.key-slide-content .key-text .split-parent {
    transition: opacity 2s,transform 2s;
    will-change: transform;
    transition-delay: 0.2s
}

.key-slide-content .key-text .split-parent p {
    font-size: 2.000em;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: #fff;
    opacity: 0
}

.key-slide-content .key-text-wrap.black .key-text .split-parent p {
    color: #222
}

.key-visual-swiper .swiper-slide-active .key-text .split-parent p {
    animation: slideUp 1s 2.5s ease forwards;
    -webkit-animation: slideUp 1s 2.5s ease forwards
}

.key-slide-content .key-view-more {
    position: absolute;
    z-index: 2;
    bottom: 15.000em;
    /*left: 10.000em;*/
    left: 0;
    padding: 0.500em 0;
    font-size: 1rem;
    overflow: hidden
}

.key-visual-swiper .key-view-more .view-more-btn {
    opacity: 0
}

.key-visual-swiper .swiper-slide-active .key-view-more .view-more-btn {
    animation: slideUp 1s 3.3s ease forwards;
    -webkit-animation: slideUp 1s 3.3s ease forwards
}

.key-visual-swiper .key-text-wrap.black .key-view-more .view-more-btn {
    border: 1px solid #666;
    color: #222
}

.key-visual-swiper .key-text-wrap.black .key-view-more .view-more-btn span {
    background-image: url('https://amc.apglobal.com/asset/384224417642/image_6jfkktpm295lh0g3b55qs6ln5p?content-disposition=inline/button_arrow_b_kr_230118.svg')
}

.key-visual-swiper .key-text-wrap.black .key-view-more a.view-more-btn:hover,.key-visual-swiper a .key-text-wrap.black .key-view-more .view-more-btn:hover {
    border: 1px solid #fff;
    background-color: #fff
}

.key-swiper-control-wrap {
    position: relative;
    left: 10.000em;
    bottom: 150px;
    z-index: 2;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 1rem
}

.key-swiper-control-wrap .swiper-pagination-bullet-active .path.on {
    display: inline-block !important;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    animation: dash linear 95s;
    animation-iteration-count: unset;
    -webkit-animation: dash linear 95s
}

.key-visual-swiper .swiper-button-next,.key-visual-swiper .swiper-button-prev {
    display: none;
    top: 63%
}

@media screen and (max-width: 1920px) {
    .key-slide-content .key-text-wrap {
        font-size:0.833vw
    }

    .key-slide-content .key-title strong {
        font-size: 5.208vw
    }

    .key-slide-content .key-title.three strong {
        font-size: 4.688vw
    }

    .key-slide-content .key-title strong .ko {
        font-size: 4.427vw
    }

    .key-slide-content .key-title.three strong .ko {
        font-size: 3.958vw
    }

    .key-slide-content .key-text {
        font-size: 0.833vw
    }

    .key-slide-content .key-text .split-parent p {
        font-size: 1.667vw
    }

    .key-slide-content .key-view-more {
        font-size: 0.833vw
    }

    .key-swiper-control-wrap {
        font-size: 0.833vw
    }
}

@media screen and (max-width: 1440px) {
    .key-visual-swiper {
        height:564px;
        min-height: 0
    }

    .key-visual-slide .key-img-box {
        height: 400px;
        min-height: 0
    }

    .key-slide-content .key-text-wrap {
        margin: 0 2.500em;
        font-size: 1rem
    }

    .key-slide-content .key-title {
        transform: translateY(75px)
    }

    .key-slide-content .key-title strong {
        font-size: 3.750rem;
        letter-spacing: -0.01em
    }

    .key-slide-content .key-title.three strong {
        font-size: 3.375rem
    }

    .key-slide-content .key-title strong .ko {
        font-size: 3.250rem
    }

    .key-slide-content .key-title.three strong .ko {
        font-size: 3.000rem
    }

    .key-slide-content .key-text {
        bottom: 170px;
        /*padding: 0 2.500em;*/
        font-size: 1rem
    }

    .key-slide-content .key-text .split-parent p {
        font-size: 1.250rem;
        line-height: 1.4;
        letter-spacing: -0.01em
    }

    .key-slide-content .key-view-more {
        bottom: 111px;
        /*left: 2.500em;*/
        font-size: 1rem
    }

    .key-swiper-control-wrap {
        left: 2.500em;
        bottom: 85px;
        font-size: 1rem
    }
}

@media screen and (max-width: 720px) {
    .key-visual-swiper {
        height:calc(100vh - 60px);
        height: calc(100dvh - 60px);
        height: calc(var(--vh, 1vh) * 100 - 60px);
        min-height: 148vw
    }

    .key-visual-slide .key-img-box {
        height: 73.03vh;
        height: 73.03dvh;
        height: calc(var(--vh, 1vh) * 73.03);
        min-height: 120vw
    }

    .key-slide-content .key-text-wrap {
        margin: 0 1.250em
    }

    .key-slide-content .key-title {
        transform: translateY(125%)
    }

    .key-slide-content .key-title strong {
        font-size: 2.375rem;
        letter-spacing: -0.03em
    }

    .key-slide-content .key-title.three strong {
        font-size: 2.188rem;
        line-height: 1
    }

    .key-slide-content .key-title strong .ko {
        font-size: 1.875rem
    }

    .key-slide-content .key-title.three strong .ko {
        font-size: 1.875rem
    }

    .key-slide-content .key-text {
        bottom: 8.250em;
        /*padding: 0 1.250em*/
    }

    .key-slide-content .key-view-more {
        bottom: 4.875em;
        /*left: 1.250em*/
    }

    .key-swiper-control-wrap {
        left: 1.250em;
        bottom: 3.750em
    }
}

/* 2. campagin section
========================================================================== */
.main2023 .campagin-sec {
    padding-top: 12.500em;
    font-size: 1rem
}

.main2023 .section-top.campagin-sec-top {
    margin-bottom: 3.000em
}

.campagin-sec-sub-top {
    width: 100%;
    margin-bottom: 2.250em;
    font-size: 1rem;
    text-align: center;
    opacity: 0;
    transform: translateY(3.125em);
    -webkit-transform: translateY(3.125em);
    -moz-transform: translateY(3.125em);
    -ms-transform: translateY(3.125em);
    -o-transform: translateY(3.125em);
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition-delay: .4s
}

.campagin-sec-sub-top .campagin-tit {
    font-size: 2.750rem;
    font-weight: 600;
    line-height: 1.273em;
    letter-spacing: 0;
    color: #222
}

.campagin-sec-sub-top .campagin-txt {
    margin-top: 0.364em;
    font-size: 1.375rem;
    line-height: 1.455em;
    letter-spacing: 0;
    color: #000
}

.campagin-main-area .campagin-main-inner {
    display: flex;
    justify-content: center;
    align-items: center
}

.campagin-main-area .video-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50vw
}

.campagin-main-area .video-wrap .campagin-video {
    width: 100%;
    height: 100%;
    vertical-align: baseline;
    -o-object-fit: cover !important;
    object-fit: cover !important;
    -o-object-position: center center;
    object-position: center center;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden
}

.campagin-video.mo {
    display: none
}

.campagin-view-more-box {
    display: block;
    width: 100%;
    padding: 3.750em 0 0;
    font-size: 1rem;
    text-align: center;
    opacity: 0;
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition-delay: 1s
}

.main2023 .campagin-view-more .view-more-btn {
    border: 1px solid #666
}

.main2023 .campagin-view-more a.view-more-btn:hover {
    border: 1px solid #6691FF;
    background-color: #6691FF;
    color: #fff
}

.main2023 .campagin-view-more a.view-more-btn:hover span {
    background: url('https://amc.apglobal.com/asset/384224417642/image_5q3d84b2qd0if8jcfbs7s0kc6g?content-disposition=inline/button_arrow_w_kr_230118.svg') no-repeat center right;
    background-size: 0.444em 0.722em
}

@media screen and (max-width: 1920px) {
    .main2023 .campagin-sec {
        font-size:0.833vw
    }

    .campagin-sec-sub-top {
        font-size: 0.833vw
    }

    .campagin-sec-sub-top .campagin-tit {
        font-size: 2.292vw
    }

    .campagin-sec-sub-top .campagin-txt {
        font-size: 1.146vw
    }

    .campagin-view-more-box {
        font-size: 0.833vw
    }
}

@media screen and (max-width: 1440px) {
    .main2023 .campagin-sec {
        padding-top:6.250em;
        font-size: 1rem
    }

    .main2023 .section-top.campagin-sec-top {
        margin-bottom: 1.250em
    }

    .campagin-sec-sub-top {
        margin-bottom: 1.250em;
        font-size: 1rem
    }

    .campagin-sec-sub-top .campagin-tit {
        font-size: 1.625rem;
        line-height: 1
    }

    .campagin-sec-sub-top .campagin-txt {
        margin-top: 1.429em;
        font-size: 0.875rem;
        line-height: 1
    }

    .campagin-main-area {
        opacity: 0;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
        transition-delay: .8s
    }

    .campagin-view-more-box {
        padding: 2.500em 0 0;
        font-size: 1rem
    }

    .main2023 .campagin-view-more a.view-more-btn:hover span {
        background-size: 0.429em 0.714em
    }
}

@media screen and (max-width: 720px) {
    .main2023 .campagin-sec {
        padding-top:5.625em
    }

    .campagin-sec-sub-top {
        margin-bottom: 1.250em
    }

    .campagin-sec-sub-top .campagin-tit {
        font-size: 1.375rem
    }

    .campagin-sec-sub-top .campagin-txt {
        margin-top: 0.769em;
        font-size: 0.813em
    }

    .campagin-video.pc {
        display: none
    }

    .campagin-video.mo {
        display: block
    }

    .campagin-main-area {
        opacity: 1
    }

    .campagin-main-area .video-wrap.mo16-9 {
        position: relative
    }

    .campagin-main-area .video-wrap.mo16-9 .campagin-video.pc {
        display: block
    }

    .campagin-main-area .video-wrap.mo16-9 .campagin-video.mo {
        display: none
    }

    .campagin-view-more-box {
        padding: 1.250em 0 0
    }

    .main2023 .campagin-view-more a.view-more-btn:hover span {
        background-size: 0.321em 0.536em
    }
}

/* 3. best section
========================================================================== */
.best-sec {
    padding-top: 15.625em;
    font-size: 1rem
}

.best-sec .section-cont {
    display: flex;
    position: relative;
    width: 100%;
    font-size: 1rem;
    overflow: hidden;
    opacity: 0;
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition-delay: .5s
}

/*왼쪽 visual*/
.best-visual-slider {
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden
}

.best-visual-slider .swiper-slide {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: 45vw;
}
.best-visual-slider .swiper-slide a:focus-visible  {
    outline: 2px solid #000;
    outline-offset: -3px;
    display: block;
    width: 100%;
    height: 100%;
}

.best-visual-slider .best-visual-img {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: -8;
}

.best-visual-slider .best-visual-img img,.best-visual-slider .best-visual-img video {
    width: 101%;
    height: 101%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top center;
    object-position: top center
}

/*비주얼 딤드 처리*/
.best-visual-slider .best-visual-img::before,.best-visual-slider .best-visual-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
}

.best-visual-slider .best-visual-img::before {
    background-color: rgba(0,0,0,0.05)
}

.best-visual-slider .best-visual-img::after {
    background: linear-gradient(180deg, rgba(0,0,0,0),rgba(0,0,0,1));
    opacity: .5
}

.best-visual-slider .best-visual-title {
    position: absolute;
    bottom: 7.500em;
    left: 10em;
    width: calc(100% - 10em);
    font-size: 1rem;
    color: #f8f5fc;
    font-family: inherit;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    box-sizing: border-box
}

.best-visual-slider .best-visual-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    opacity: 0;
    z-index: 1;
    transition-duration: 1s;
    transition-delay: 1.2s
}

.best-visual-slider .best-visual-title .best-num {
    display: block;
    margin-bottom: 0.682em;
    font-size: 1.375rem;
    letter-spacing: 0;
    overflow: hidden
}

.best-visual-slider .best-visual-title .best-tit {
    margin-bottom: 0.300em;
    font-size: 5rem;
    line-height: 1.08;
    letter-spacing: 0.05px;
    overflow: hidden
}

.best-visual-slider .swiper-slide-active .best-visual-title .best-num .slide-txt,.best-visual-slider .swiper-slide-duplicate-active .best-visual-title .best-num .slide-txt {
    opacity: 0;
    animation: slideUpOpt 1s 0.8s ease forwards;
    -webkit-animation: slideUpOpt 1s 0.8s ease forwards
}

.best-visual-slider .swiper-slide-active .best-visual-title .best-tit .slide-txt,.best-visual-slider .swiper-slide-duplicate-active .best-visual-title .best-tit .slide-txt {
    opacity: 0;
    animation: slideUpOpt 1s 1.2s ease forwards;
    -webkit-animation: slideUpOpt 1s 1.2s ease forwards
}

.best-visual-slider .swiper-slide-active .best-visual-title::after,.best-visual-slider .swiper-slide-duplicate-active .best-visual-title::after {
    opacity: 0.5;
    transition-duration: 1s
}

/*오른쪽 info*/
.best-info-slider {
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden
}

.best-info-slider .swiper-slide {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: 45vw;
    background-color: #fff
}

.best-info-slider .best-info-cont {
    width: 100%;
    height: 100%
}

.best-info-slider .best-info-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding-top: 7.500em;
    padding-bottom: 7.500em;
    box-sizing: border-box
}
.best-info-slider .best-info-wrap:focus-visible {
    outline:2px solid #000;
    outline-offset:-2px
}
.best-info-slider .best-info-top {
    width: 100%;
    text-align: center
}

.best-info-slider .best-info-top .best-info-title {
    height: auto;
    min-height: 2.159em;
    margin-bottom: 0.682em;
    font-size: 2.750rem;
    line-height: 1.13;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    word-break: keep-all
}

.best-info-slider .best-info-top .best-info-desc {
    height: 2.364em;
    font-size: 1.375rem;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #444;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    word-break: keep-all
}

.best-info-slider .best-info-top .best-info-desc .desc {
    display: block
}

.best-info-slider .best-info-top .best-info-desc .tag {
    display: none
}

.best-info-slider .best-info-top .best-info-desc .tag li {
    margin-right: 0.625em;
    font-size: 1rem;
    opacity: .7
}

.best-info-slider .best-info-top .best-info-desc .tag li:last-of-type {
    margin-right: 0
}

.best-info-slider .swiper-slide-active .best-info-top .best-info-title .slide-txt,.best-info-slider .swiper-slide-duplicate-active .best-info-top .best-info-title .slide-txt {
    opacity: 0;
    animation: slideUpOpt 1s 0.8s ease forwards;
    -webkit-animation: slideUpOpt 1s 0.8s ease forwards
}

.best-info-slider .swiper-slide-active .best-info-top .best-info-desc .slide-txt,.best-info-slider .swiper-slide-duplicate-active .best-info-top .best-info-desc .slide-txt {
    opacity: 0;
    animation: slideUpOpt 1s 1.2s ease forwards;
    -webkit-animation: slideUpOpt 1s 1.2s ease forwards
}

.best-info-slider .best-info-img {
    position: relative;
    flex: 2;
    width: 100%;
    height: 0;
    margin: 0 auto;
    padding-bottom: 1.688em;
    font-size: 1rem;
    box-sizing: border-box
}

.best-info-slider .best-info-img-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-top: 0.625em;
    padding-bottom: 1.563em;
    font-size: 1rem;
    box-sizing: border-box
}

.best-info-slider .best-info-img-wrap img {
    height: 100%;
    aspect-ratio: 5/6;
    -o-object-fit: contain;
    object-fit: contain
}

.best-info-slider .view-more {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.best-info-slider .view-more-btn,.best-info-slider a.best-info-wrap .view-more-btn {
    border: none;
    background-color: rgba(255,255,255,.7);
    color: #222;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 1.667em;
    box-shadow: 1.325em 1.325em 2.500em 0 rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    opacity: 0;
    transition: 300ms linear
}

.best-info-slider .view-more-btn span,.best-info-slider a.best-info-wrap .view-more-btn span {
    background-image: url('https://amc.apglobal.com/asset/384224417642/image_6jfkktpm295lh0g3b55qs6ln5p?content-disposition=inline/button_arrow_b_kr_230118.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 0.625em 0.750em;
    font-size: 1.125em
}

.best-info-slider a.best-info-wrap:hover .view-more-btn,.best-info-slider a.best-info-wrap:focus .view-more-btn {
    opacity: 1
}

/*swiper 버튼 */
.best-sec .swiper-main-btn-wrap {
    position: absolute;
    top: 0;
    width: 11.250em;
    height: 100%;
    z-index: 5;
    cursor: none;
    font-size: 1rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.best-sec .swiper-btn-next {
    right: 0
}

.best-sec .swiper-btn-prev {
    left: 0
}

.best-sec .swiper-main-btn-wrap > a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: none
}

.best-sec .common-bullet .swiper-pagination-bullet-active .path.on {
    display: inline-block !important;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    animation: dash linear 81s;
    animation-iteration-count: unset;
    -webkit-animation: dash linear 81s
}

/* hover 커서 커스텀 */
#best-cursor {
    position: fixed;
    z-index: 11;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    will-change: transform
}

#best-cursor > div {
    opacity: 0
}

#best-cursor .arrow-cursor {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.125em;
    height: 4.000em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate3d(-50%, -50%, 0);
    pointer-events: none;
    opacity: 0;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    font-size: 1rem
}

#best-cursor .arrow-cursor.left-cursor {
    background-image: url('https://amc.apglobal.com/asset/384224417642/image_03nu8m92e16bh60nd6klf15j6i?content-disposition=inline/slide_prev_b_kr_230118.svg')
}

#best-cursor .arrow-cursor.right-cursor {
    background-image: url('https://amc.apglobal.com/asset/384224417642/image_544g92uc910dv9r522j3079g21?content-disposition=inline/slide_next_b_kr_230118.svg')
}

/*인디케이터*/
.best-sec .swiper-pagination-btn2-wrap {
    position: absolute;
    bottom: 7.500em;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    z-index: 1;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%)
}

.best-sec .swiper-btn-center {
    display: flex;
    justify-content: center;
    height: 100%
}

@media (pointer: coarse) {
    #best-cursor {
        opacity:0 !important
    }

    .best-sec .swiper-main-btn-wrap {
        cursor: pointer
    }

    .best-sec .swiper-main-btn-wrap > a {
        cursor: pointer
    }
}

@media screen and (max-width: 1920px) {
    .best-sec {
        font-size:0.833vw
    }

    .best-sec .section-cont {
        font-size: 0.833vw
    }

    .best-visual-slider .best-visual-title {
        font-size: 0.833vw
    }

    .best-visual-slider .best-visual-title .best-num {
        font-size: 1.146vw
    }

    .best-visual-slider .best-visual-title .best-tit {
        font-size: 4.167vw
    }

    /*오른쪽 info*/
    .best-info-slider .best-info-top .best-info-title {
        font-size: 2.292vw
    }

    .best-info-slider .best-info-top .best-info-desc {
        font-size: 1.146vw
    }

    .best-info-slider .best-info-top .best-info-desc .tag li {
        font-size: 0.833vw
    }

    .best-info-slider .best-info-img {
        font-size: 0.833vw
    }

    .best-info-slider .best-info-img-wrap {
        font-size: 0.833vw
    }

    .best-info-slider .view-more {
        font-size: 0.833vw
    }

    .best-info-slider .view-more-btn span {
        font-size: 0.938vw
    }

    /*swiper 버튼, 페이지네이션*/
    .best-sec .swiper-main-btn-wrap {
        font-size: 0.833vw
    }

    /* hover 커서 커스텀 */
    #best-cursor .arrow-cursor {
        font-size: 0.833vw
    }
}

@media screen and (max-width: 1440px) {
    .best-sec {
        padding-top:150px;
        font-size: 16px
    }

    .best-sec .section-cont {
        font-size: 16px
    }

    /* 왼쪽 visual */
    .best-visual-slider .swiper-slide {
        height: 576px
    }

    .best-visual-slider .best-visual-title {
        bottom: 60px;
        left: 40px;
        width: calc(100% - 40px);
        padding-right: 40px;
        font-size: 16px
    }

    .best-visual-slider .best-visual-title .best-num {
        font-size: 14px;
        margin-bottom: 13px
    }

    .best-visual-slider .best-visual-title .best-tit {
        margin-bottom: 16px;
        font-size: 48px;
        line-height: 1.04
    }

    /*오른쪽 info*/
    .best-info-slider .swiper-slide {
        height: 576px
    }

    .best-info-slider .best-info-wrap {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .best-info-slider .best-info-top .best-info-title {
        height: auto;
        min-height: 60px;
        margin-bottom: 10px;
        font-size: 26px;
        line-height: 1.15
    }

    .best-info-slider .best-info-top .best-info-desc .tag li {
        font-size: 16px
    }

    .best-info-slider .best-info-top .best-info-desc {
        height: 34px;
        font-size: 14px;
        line-height: 1.43
    }

    .best-info-slider .best-info-img {
        width: 100%;
        font-size: 16px
    }

    .best-info-slider .best-info-img-wrap {
        padding-top: 15px;
        padding-bottom: 20px;
        font-size: 16px
    }

    .best-info-slider .view-more {
        font-size: 16px
    }

    .best-info-slider .view-more-btn span {
        font-size: 14px
    }

    /*swiper 버튼, 페이지네이션*/
    .best-sec .swiper-main-btn-wrap {
        width: 22%;
        font-size: 16px
    }

    /* hover 커서 커스텀 */
    #best-cursor .arrow-cursor {
        font-size: 0.75rem
    }

    /*인디케이터*/
    .best-sec .swiper-pagination-btn2-wrap {
        bottom: 60px
    }
}

@media screen and (max-width: 720px) {
    .best-sec {
        padding-top:100px
    }

    .best-sec .section-cont {
        flex-direction: column;
        font-size: 16px
    }

    /*왼쪽 visual*/
    .best-visual-slider {
        width: 100%
    }

    .best-visual-slider .swiper-slide {
        height: 50vh;
        height: 50dvh;
        height: calc(var(--vh, 1vh) * 50);
        min-height: 95vw
    }

    .best-visual-slider .best-visual-title {
        bottom: 20px;
        left: 20px;
        width: calc(100% - 20px);
        padding-right: 20px;
        font-size: 16px
    }

    .best-visual-slider .best-visual-title .best-num {
        font-size: 14px;
        margin-bottom: 8px
    }

    .best-visual-slider .best-visual-title .best-tit {
        margin-bottom: 14px;
        font-size: 32px;
        line-height: 1.09
    }

    /*오른쪽 info*/
    .best-info-slider {
        width: 100%
    }

    .best-info-slider .best-info-wrap {
        padding-top: 30px;
        padding-bottom: 30px;
        font-size: 16px
    }

    .best-info-slider .swiper-slide {
        height: 50vh;
        height: 50dvh;
        height: calc(var(--vh, 1vh) * 50);
        min-height: 95vw
    }

    .best-info-slider .best-info-top .best-info-title {
        min-height: 50px;
        margin-bottom: 10px;
        font-size: 22px;
        line-height: 1.27
    }

    .best-info-slider .best-info-top .best-info-desc {
        height: auto;
        font-size: 12px;
        line-height: 1.67
    }

    .best-info-slider .best-info-top .best-info-desc .desc {
        display: none
    }

    .best-info-slider .best-info-top .best-info-desc .tag {
        display: flex;
        flex-wrap: wrap;
        justify-content: center
    }

    .best-info-slider .best-info-top .best-info-desc .tag li {
        font-size: 12px
    }

    .best-info-slider .best-info-img {
        width: 100%;
        font-size: 16px
    }

    .best-info-slider .best-info-img-wrap {
        padding-top: 10px;
        padding-bottom: 10px
    }

    .best-info-slider a.best-info-wrap:hover .view-more-btn,.best-info-slider a.best-info-wrap:focus .view-more-btn {
        opacity: 0
    }

    /*swiper 버튼, 페이지네이션*/
    .best-sec .swiper-main-btn-wrap {
        width: 93px;
        font-size: 16px;
        display: none
    }

    /* hover 커서 커스텀 */
    #best-cursor .arrow-cursor {
        font-size: 16px
    }

    #best-cursor {
        opacity: 0 !important
    }

    .best-sec .swiper-main-btn-wrap {
        cursor: pointer
    }

    .best-sec .swiper-main-btn-wrap > a {
        cursor: pointer
    }

    /*인디케이터*/
    .best-sec .swiper-pagination-btn2-wrap {
        bottom: 25px
    }
}

/* 4. new section
========================================================================== */
.new-sec {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 15.625em;
    overflow: hidden;
    font-size: 1rem
}

.new-sec .section-cont {
    position: relative;
    padding-left: 10.000em;
    opacity: 0;
    font-size: 1rem;
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition-delay: 0.5s;
    box-sizing: border-box
}

.new-sec .section-cont .new-slider {
    cursor: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.new-sec .swiper-slide {
    height: auto;
    padding-right: 3.750em;
    font-size: 1rem;
    box-sizing: content-box;
    scale: 1;
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s
}

.new-sec .swiper-slide a {
    display: block;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    cursor: none;
}
.new-sec .swiper-slide a:focus-visible {outline-offset: -2px;}
.new-sec .swiper-slide .new-item {
    position: relative;
    transition: 300ms;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    -o-transition: 300ms
}

.new-sec .swiper-slide .new-item .item-thumbnail-img {
    position: relative;
    background-color: #efefef;
    transition: 300ms;
    overflow: hidden;
    z-index: -1;
}

.new-sec .swiper-slide.slide-type-a {
    width: 420px
}

.new-sec .swiper-slide.slide-type-b {
    width: 598px
}

.new-sec .swiper-slide.slide-type-a .new-item .item-thumbnail-img {
    height: 594px
}

.new-sec .swiper-slide.slide-type-b .new-item .item-thumbnail-img {
    height: 397px
}

.new-sec .swiper-slide:last-of-type.slide-type-a {
    padding-right: calc(100% - 420px)
}

.new-sec .swiper-slide:last-of-type.slide-type-b {
    padding-right: calc(100% - 598px)
}

.new-sec.on .swiper-slide .new-item .item-thumbnail-img {
    -webkit-mask-image: linear-gradient(to top, #0000 0%, #fff 25%, #fff 50%, #fff 100%);
    mask-image: linear-gradient(to top, #0000 0%, #fff 25%, #fff 50%, #fff 100%);
    -webkit-mask-size: 100% 200%;
    mask-size: 100% 200%;
    animation: maskUp 1s ease forwards;
    -webkit-animation: maskUp 1s ease forwards
}

@keyframes maskUp {
    0% {
        -webkit-mask-position: 0% 0%;
        mask-position: 0% 0%
    }

    100% {
        -webkit-mask-position: 0% 99%;
        mask-position: 0% 99%
    }
}

.new-sec .item-thumbnail-img img,.new-sec .item-thumbnail-img video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    transition: 300ms;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    -o-transition: 300ms;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none
}

.new-sec .swiper-slide > a:hover .item-thumbnail-img img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1)
}

.new-sec .swiper-slide .new-item .item-txt {
    position: relative;
    width: 100%;
    padding-left: 0.625em;
    padding-right: 0.625em;
    z-index: 2;
    font-size: 1rem;
    box-sizing: border-box;
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px)
}

.new-sec .swiper-slide .new-item .item-tit {
    margin-bottom: 0.375em;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.010em;
    color: #222;
    word-break: keep-all
}

.new-sec .swiper-slide .new-item .item-tit-en {
    margin-bottom: 1.500em;
    font-size: 1.125rem;
    line-height: 1.25;
    font-weight: 300;
    letter-spacing: 0;
    color: #222;
    word-break: keep-all
}

.new-sec .swiper-slide .new-item .item-tag {
    display: flex;
    flex-wrap: wrap
}

.new-sec .swiper-slide .new-item .item-tag li {
    margin-right: 0.278em;
    padding: 0.444em 0.556em;
    background-color: rgba(180,205,255,0.2);
    font-size: 1.125rem;
    color: #4076FF;
    letter-spacing: -0.01em;
    border-radius: 200px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    -ms-border-radius: 200px;
    -o-border-radius: 200px
}

.new-sec .swiper-slide .new-item .item-tag li:last-of-type {
    margin-right: 0
}

.new-sec .swiper-slide .new-item .item-tit,.new-sec .swiper-slide .new-item .item-tit-en,.new-sec .swiper-slide .new-item .item-tag {
    overflow: hidden
}

.new-sec .swiper-slide .new-item .item-tit .slide-txt,.new-sec .swiper-slide .new-item .item-tit-en .slide-txt,.new-sec .swiper-slide .new-item .item-tag li {
    opacity: 0
}

.new-sec.on .swiper-slide .new-item .item-tit .slide-txt,.new-sec.on .swiper-slide .new-item .item-tit-en .slide-txt,.new-sec.on .swiper-slide .new-item .item-tag li {
    animation: slideUp 1s .6s ease forwards;
    -webkit-animation: slideUp 1s .6s ease forwards
}

/*인디케이터*/
.new-sec .swiper-control-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 5.625em;
    font-size: 1rem;
    opacity: 0
}

.new-sec.on .swiper-control-wrap {
    animation: slideUp 0.5s 1s ease forwards;
    -webkit-animation: slideUp 0.5s 1s ease forwards
}

.new-sec .common-bullet .swiper-pagination-bullet-active .path.on {
    display: inline-block !important;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    animation: dash linear 65s;
    animation-iteration-count: unset;
    -webkit-animation: dash linear 65s
}

/*커서*/
#new-cursor {
    position: fixed;
    z-index: 11;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    will-change: transform;
    mix-blend-mode: multiply;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#new-cursor .circle {
    display: block;
    position: relative;
    top: 50%;
    left: 50%;
    width: 7.250em;
    height: 7.250em;
    box-sizing: border-box;
    background-color: #6691FF;
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0);
    transition: all .3s;
    pointer-events: none;
    opacity: 0.7;
    font-size: 1rem
}

#new-cursor.on {
    opacity: 1
}

#new-cursor.on .circle {
    animation: newCursorOn 0.3s ease forwards;
    -webkit-animation: newCursorOn 0.3s ease forwards
}

#new-cursor.off {
    opacity: 0;
    transition-property: opacity;
    transition-delay: 0.3s
}

#new-cursor.off .circle {
    animation: newCursorOff 0.3s ease forwards;
    -webkit-animation: newCursorOff 0.3s ease forwards
}

@keyframes newCursorOn {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(0);
        -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
        -moz-transform: translate3d(-50%, -50%, 0) scale(0);
        -ms-transform: translate3d(-50%, -50%, 0) scale(0);
        -o-transform: translate3d(-50%, -50%, 0) scale(0)
    }

    100% {
        opacity: 0.8;
        transform: translate3d(-50%, -50%, 0) scale(1);
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1);
        -o-transform: translate3d(-50%, -50%, 0) scale(1)
    }
}

@keyframes newCursorOff {
    0% {
        opacity: 0.8;
        transform: translate3d(-50%, -50%, 0) scale(1);
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1);
        -o-transform: translate3d(-50%, -50%, 0) scale(1)
    }

    100% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(0);
        -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
        -moz-transform: translate3d(-50%, -50%, 0) scale(0);
        -ms-transform: translate3d(-50%, -50%, 0) scale(0);
        -o-transform: translate3d(-50%, -50%, 0) scale(0)
    }
}

#new-cursor .circle .arrow {
    position: absolute;
    top: 50%;
    width: 0.625em;
    height: 0.875em;
    margin-top: -0.438em;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    font-size: 1rem
}

#new-cursor .circle .arrow.left-arrow {
    left: -1.125em;
    font-size: 1rem
}

#new-cursor .circle .arrow.right-arrow {
    right: -1.125em;
    font-size: 1rem
}

#new-cursor .circle .arrow::before,#new-cursor .circle .arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -1px;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #79a3dd;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s
}

#new-cursor .circle .arrow.left-arrow::before {
    transform-origin: left center;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg)
}

#new-cursor .circle .arrow.left-arrow::after {
    transform-origin: left center;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg)
}

#new-cursor .circle .arrow.right-arrow::before {
    transform-origin: right center;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg)
}

#new-cursor .circle .arrow.right-arrow::after {
    transform-origin: right center;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg)
}

#new-cursor .circle .circle-txt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

#new-cursor .circle span {
    font-size: 1.250rem;
    color: #fff;
    transform: scale(1) rotate(-30deg);
    -webkit-transform: scale(1) rotate(-30deg);
    -moz-transform: scale(1) rotate(-30deg);
    -ms-transform: scale(1) rotate(-30deg);
    -o-transform: scale(1) rotate(-30deg);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s
}

/*그랩시*/
.new-sec .swiper-container.grab-on .swiper-slide .new-item {
    transform: scale(.9);
    transform-origin: top
}

.new-sec .swiper-container.grab-on .swiper-slide.slide-type-b .new-item {
    transform-origin: center 50%
}

#new-cursor.grab-on .circle {
    width: 3.875em;
    height: 3.875em;
    font-size: 1rem
}

#new-cursor .circle .arrow.left-arrow {
    left: -1.125em;
    font-size: 1rem
}

#new-cursor .circle .arrow.right-arrow {
    right: -1.125em;
    font-size: 1rem
}

#new-cursor.grab-on .arrow.left-arrow {
    left: 0.938em;
    font-size: 1rem
}

#new-cursor.grab-on .arrow.right-arrow {
    right: 0.938em;
    font-size: 1rem
}

#new-cursor.grab-on .arrow::before,#new-cursor.grab-on .arrow::after {
    background-color: #fff
}

#new-cursor.grab-on .circle span {
    transform: scale(0) rotate(-30deg);
    -webkit-transform: scale(0) rotate(-30deg);
    -moz-transform: scale(0) rotate(-30deg);
    -ms-transform: scale(0) rotate(-30deg);
    -o-transform: scale(0) rotate(-30deg)
}

@media (pointer: coarse) {
    .new-sec .swiper-slide > a:hover .item-thumbnail-img img {
        transform:scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1)
    }

    #new-cursor {
        opacity: 0 !important
    }
}

@media screen and (max-width: 1920px) {
    .new-sec {
        font-size:0.833vw
    }

    .new-sec .section-cont {
        font-size: 0.833vw
    }

    .new-sec .swiper-slide {
        font-size: 0.833vw
    }

    .new-sec .swiper-slide .new-item .item-txt {
        font-size: 0.833vw
    }

    .new-sec .swiper-slide .new-item .item-tit {
        font-size: 1.667vw
    }

    .new-sec .swiper-slide .new-item .item-tit-en {
        font-size: 0.938vw
    }

    .new-sec .swiper-slide .new-item .item-tag li {
        font-size: 0.938vw
    }

    /*인디케이터*/
    .new-sec .swiper-control-wrap {
        font-size: 0.833vw
    }

    /*커서*/
    #new-cursor .circle {
        font-size: 0.833vw
    }

    #new-cursor .circle .arrow {
        font-size: 0.833vw
    }

    #new-cursor .circle .arrow.left-arrow {
        font-size: 0.833vw
    }

    #new-cursor .circle .arrow.right-arrow {
        font-size: 0.833vw
    }

    #new-cursor .circle span {
        font-size: 1.042vw
    }

    /*그랩시*/
    #new-cursor.grab-on .circle {
        font-size: 0.833vw
    }

    #new-cursor .circle .arrow.left-arrow {
        font-size: 0.833vw
    }

    #new-cursor .circle .arrow.right-arrow {
        font-size: 0.833vw
    }

    #new-cursor.grab-on .arrow.left-arrow {
        font-size: 0.833vw
    }

    #new-cursor.grab-on .arrow.right-arrow {
        font-size: 0.833vw
    }
}

@media screen and (max-width: 1440px) {
    .new-sec {
        padding-top:150px;
        font-size: 16px
    }

    .new-sec .section-cont {
        padding-left: 40px;
        font-size: 16px
    }

    .new-sec .swiper-slide {
        padding-right: 30px;
        font-size: 16px
    }

    .new-sec .swiper-slide.slide-type-a {
        width: 223px
    }

    .new-sec .swiper-slide.slide-type-b {
        width: 280px
    }

    .new-sec .swiper-slide.slide-type-a .new-item .item-thumbnail-img {
        height: 295px
    }

    .new-sec .swiper-slide.slide-type-b .new-item .item-thumbnail-img {
        height: 184px
    }

    .new-sec .swiper-slide:last-of-type.slide-type-a {
        padding-right: calc(100% - 223px)
    }

    .new-sec .swiper-slide:last-of-type.slide-type-b {
        padding-right: calc(100% - 280px)
    }

    .new-sec .swiper-slide .new-item .item-txt {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 16px
    }

    .new-sec .swiper-slide .new-item .item-tit {
        font-size: 20px;
        line-height: 1.2;
        margin-bottom: 6px
    }

    .new-sec .swiper-slide .new-item .item-tit-en {
        margin-bottom: 13px;
        font-size: 12px;
        line-height: 1.2;
        letter-spacing: -0.010em
    }

    .new-sec .swiper-slide .new-item .item-tag li {
        margin-right: 5px;
        padding: 6px;
        font-size: 11px;
        letter-spacing: -0.11px
    }

    /*인디케이터*/
    .new-sec .swiper-control-wrap {
        margin-top: 50px;
        font-size: 16px
    }

    /*커서*/
    #new-cursor .circle {
        font-size: 0.750rem
    }

    #new-cursor .circle .arrow {
        font-size: 0.750rem
    }

    #new-cursor .circle .arrow.left-arrow {
        font-size: 0.750rem
    }

    #new-cursor .circle .arrow.right-arrow {
        font-size: 0.750rem
    }

    #new-cursor .circle span {
        font-size: 0.875rem
    }

    /*그랩시*/
    #new-cursor.grab-on .circle {
        font-size: 0.750rem
    }

    #new-cursor .circle .arrow.left-arrow {
        font-size: 0.750rem
    }

    #new-cursor .circle .arrow.right-arrow {
        font-size: 0.750rem
    }

    #new-cursor.grab-on .arrow.left-arrow {
        font-size: 0.750rem
    }

    #new-cursor.grab-on .arrow.right-arrow {
        font-size: 0.750rem
    }
}

@media screen and (max-width: 720px) {
    .new-sec {
        padding-top:100px
    }

    .new-sec .section-cont {
        padding-left: 20px;
        cursor: default
    }

    .new-sec .swiper-slide {
        padding-right: 14px
    }

    .new-sec .swiper-slide a {
        cursor: pointer
    }

    .new-sec .swiper-slide.slide-type-a {
        width: 240px
    }

    .new-sec .swiper-slide.slide-type-b {
        width: 300px
    }

    .new-sec .swiper-slide.slide-type-a .new-item .item-thumbnail-img {
        height: 310px
    }

    .new-sec .swiper-slide.slide-type-b .new-item .item-thumbnail-img {
        height: 220px
    }

    .new-sec .swiper-slide:last-of-type.slide-type-a {
        padding-right: calc(100% - 240px)
    }

    .new-sec .swiper-slide:last-of-type.slide-type-b {
        padding-right: calc(100% - 300px)
    }

    .new-sec .swiper-slide .new-item .item-tit {
        font-size: 18px;
        line-height: 1.11
    }

    .new-sec .swiper-slide .new-item .item-tit-en {
        font-size: 14px;
        line-height: 1.11
    }

    .new-sec .swiper-slide .new-item .item-tag li {
        font-size: 12px
    }

    /*인디케이터*/
    .new-sec .swiper-control-wrap {
        margin-top: 40px
    }

    #new-cursor {
        visibility: hidden
    }

    .new-sec .section-cont .new-slider {
        cursor: grab
    }

    .new-sec .swiper-slide a {
        cursor: pointer
    }
}

/* 5. branding section
========================================================================== */
.main2023 .branding-sec {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 15.625em;
    font-size: 1rem;
    opacity: 0;
    transform: translateY(3.125em);
    -webkit-transform: translateY(3.125em);
    -moz-transform: translateY(3.125em);
    -ms-transform: translateY(3.125em);
    -o-transform: translateY(3.125em);
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s
}

.main2023 .branding-sec .swiper {
    width: 100%;
    height: 100%
}

.main2023 .branding-sec .branding-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    !i;!;
}

.main2023 .branding-sec .branding-slide-inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.main2023 .branding-sec .branding-slide-inner:focus {
    outline: 2px solid #000;
    outline-offset: -2px;
}

.branding-swiper-container {
    position: relative;
    width: 100%;
    height: 85.1856vh;
    height: 85.1856dvh;
    height: calc(var(--vh, 1vh) * 85.1856);
    min-height: 41.302vw;
    overflow: hidden
}

.branding-swiper-container .branding-slide::after {
    position: absolute;
    top: 30%;
    left: 0;
    content: '';
    width: 100%;
    height: 70%;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0),#000 30%);
    opacity: 0.6;
    pointer-events: none
}

.branding-swiper-container .branding-text-wrap {
    position: absolute;
    bottom: 11.063em;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    font-size: 1rem;
    box-sizing: border-box
}

.branding-swiper-container .branding-text-wrap::before {
    position: absolute;
    top: -50%;
    left: 0;
    right: 0;
    z-index: 0;
    content: '';
    width: 50%;
    height: 200%;
    min-height: 25.000em;
    margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    font-size: 1rem;
    opacity: 0.2;
    filter: blur(2.500em)
}

.branding-swiper-container .branding-text-wrap .branding-title strong {
    position: relative;
    font-size: 2.750rem;
    font-weight: 600;
    line-height: 0.8;
    color: #fff;
    opacity: 0;
    text-shadow: 0 0 0.825em rgba(0, 0, 0, 0.08)
}

.branding-swiper-container .branding-text-wrap .branding-text p {
    position: relative;
    margin-top: 0.818em;
    font-size: 1.375rem;
    line-height: 1.3;
    color: #fff;
    opacity: 0
}

.branding-text-wrap .branding-view-more {
    min-height: 5.375em;
    font-size: 1rem
}

.branding-text-wrap .branding-view-more .view-more-btn {
    margin-top: 2.222em;
    opacity: 0
}

.branding-swiper-container .swiper-slide-active .branding-text-wrap .branding-title strong {
    animation: brandTextUp 1.5s;
    animation-fill-mode: forwards
}

.branding-swiper-container .swiper-slide-active .branding-text-wrap .branding-text p {
    animation: brandTextUp 1.5s 0.3s;
    animation-fill-mode: forwards
}

.branding-swiper-container .swiper-slide-active .branding-text-wrap .view-more-btn {
    animation: brandTextUp 1.5s 0.6s;
    animation-fill-mode: forwards
}

/* brandTextUp */
@keyframes brandTextUp {
    0% {
        opacity: 0;
        top: 30px;
        filter: blur(10px)
    }

    60% {
        opacity: 0;
        top: 25px
    }

    100% {
        opacity: 1;
        filter: blur(0);
        top: 0
    }
}

.branding-swiper-container.active .swiper-slide-active .branding-title {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0)
}

.branding-swiper-container.active .swiper-slide-active .branding-text {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0)
}

.branding-swiper-container .branding-img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #000;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transition: transform 2s linear;
    overflow: hidden
}

.branding-swiper-container.active .swiper-slide-active .branding-img-wrap {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transition: transform 2s linear
}

.branding-swiper-container .branding-img-wrap > .branding-img-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.branding-swiper-container .branding-img-wrap > .branding-img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

.branding-swiper-container .branding-img-wrap > .branding-img-box img.mo {
    display: none
}

.branding-swiper-container .pagination-wrap {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    font-size: 1rem
}

.branding-swiper-container .pagination {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    padding: 0 4.063em;
    font-size: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s linear;
    -webkit-transition: all 0.35s linear;
    -moz-transition: all 0.35s linear;
    -ms-transition: all 0.35s linear;
    -o-transition: all 0.35s linear
}

/* playPause */
.branding-swiper-container .pagination .playPause {
    transform: translateY(-0.750rem);
    -webkit-transform: translateY(-0.750rem);
    -moz-transform: translateY(-0.750rem);
    -ms-transform: translateY(-0.750rem);
    -o-transform: translateY(-0.750rem)
}

.branding-swiper-container .swiper-pagination {
    position: static;
    display: flex;
    justify-content: center
}

.branding-swiper-container .swiper-pagination li {
    width: 25%;
    margin: 0 2.500em 0 0;
    font-size: 1rem;
    text-align: left
}

.branding-swiper-container .swiper-pagination li a {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    padding-top: 0.733em;
    font-size: 1.375rem;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 300;
    color: #fff
}

.branding-swiper-container .swiper-pagination li a:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    content: '';
    width: 100%;
    height: 2px;
/*    background-color: rgba(255, 255, 255, 0.5);*/
border:1px solid;
    opacity: 0.3
}

.branding-swiper-container .swiper-pagination li a:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: block;
    content: '';
    height: 3px;
    background-color: #fff;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform-origin: left;
    opacity: 1
}

.branding-swiper-container .swiper-pagination li.active a{
font-weight:600
}
.branding-swiper-container .swiper-pagination li.active a:after {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transition: transform 5s linear;
    -webkit-transition: transform 5s linear;
    -moz-transition: transform 5s linear;
    -ms-transition: transform 5s linear;
    -o-transition: transform 5s linear
}

.branding-swiper-container .swiper-pagination li a span {
    display: inline-block;
    height: 3.000em;
    opacity: 0.5;
    transition: opacity 300ms linear;
    -webkit-transition: opacity 300ms linear;
    -moz-transition: opacity 300ms linear;
    -ms-transition: opacity 300ms linear;
    -o-transition: opacity 300ms linear
}

.branding-swiper-container .swiper-pagination li.active a span {
    opacity: 1;
    transition: opacity 300ms linear;
    -webkit-transition: opacity 300ms linear;
    -moz-transition: opacity 300ms linear;
    -ms-transition: opacity 300ms linear;
    -o-transition: opacity 300ms linear
}

.branding-swiper-container .swiper-pagination li a .dot {
    display: inline-block;
    margin-right: 4px
}

.branding-swiper-container.active .pagination {
    visibility: visible;
    opacity: 1;
    transition-delay: 2s;
    transition: all 0.35s linear
}

@media screen and (max-width: 1920px) {
    .main2023 .branding-sec {
        font-size:0.833vw
    }

    .branding-swiper-container .branding-text-wrap {
        font-size: 0.833vw
    }

    .branding-swiper-container .branding-text-wrap::before {
        font-size: 0.833vw
    }

    .branding-swiper-container .branding-text-wrap .branding-title strong {
        font-size: 2.292vw
    }

    .branding-swiper-container .branding-text-wrap .branding-text p {
        font-size: 1.146vw
    }

    .branding-text-wrap .branding-view-more {
        font-size: 0.833vw
    }

    .branding-swiper-container .pagination-wrap {
        font-size: 0.833vw
    }

    .branding-swiper-container .pagination {
        font-size: 0.833vw
    }

    .branding-swiper-container .swiper-pagination li {
        font-size: 0.833vw
    }

    .branding-swiper-container .swiper-pagination li a {
        font-size: 1.146vw
    }
}

@media screen and (max-width: 1440px) {
    .main2023 .branding-sec {
        padding-top:9.375em;
        font-size: 1rem
    }

    .branding-swiper-container {
        height: auto;
        aspect-ratio: 1/0.48
    }

    .branding-swiper-container .branding-text-wrap {
        bottom: 96px;
        font-size: 1rem
    }

    .branding-swiper-container .branding-text-wrap::before {
        font-size: 1rem
    }

    .branding-swiper-container .branding-text-wrap .branding-title strong {
        font-size: 1.625rem;
        line-height: 1.15
    }

    .branding-swiper-container .branding-text-wrap .branding-text p {
        margin-top: 10px;
        font-size: 0.875rem;
        line-height: 1.43
    }

    .branding-text-wrap .branding-view-more {
        min-height: 4.625em;
        font-size: 1rem
    }

    .branding-text-wrap .branding-view-more .view-more-btn {
        margin-top: 2.143em
    }

    .branding-swiper-container .pagination-wrap {
        bottom: 8px;
        font-size: 1rem
    }

    .branding-swiper-container .pagination {
        padding: 0 2.500em;
        font-size: 1rem
    }

    .branding-swiper-container .swiper-pagination li {
        margin: 0 1.250em 0 0;
        font-size: 1rem
    }

    .branding-swiper-container .swiper-pagination li:last-child {
        margin: 0 2.500em 0 0
    }

    .branding-swiper-container .swiper-pagination li a {
        padding-top: 8px;
        font-size: 0.875rem;
        line-height: 1.43
    }
}

@media screen and (max-width: 720px) {
    .main2023 .branding-sec {
        padding-top:6.250em;
        aspect-ratio: inherit
    }

    .branding-swiper-container {
        height: 90vh;
        height: 90dvh;
        height: calc(var(--vh, 1vh) * 90);
        min-height: 161.1111vw
    }

    .branding-swiper-container .branding-text-wrap {
        bottom: 104px
    }

    .branding-swiper-container .branding-text-wrap .branding-title strong {
        font-size: 1.500rem
    }

    .branding-swiper-container .branding-text-wrap .branding-text {
        display: none
    }

    .branding-text-wrap .branding-view-more {
        display: none;
        min-height: 3.188em
    }

    .branding-text-wrap .branding-view-more .view-more-btn {
        margin-top: 1.429em
    }

    .branding-swiper-container .pagination-wrap {
        bottom: 1em
    }

    .branding-swiper-container.active .pagination {
        padding: 0 1.250em
    }

    .branding-swiper-container .swiper-pagination li {
        width: 1.250em;
        min-height: 2.625em
    }

    .branding-swiper-container .swiper-pagination li:last-child {
        margin-right: 1.250em
    }

    .branding-swiper-container .swiper-pagination li.active {
        width: 70%
    }

    .branding-swiper-container .swiper-pagination li a {
        width: 100%;
        font-size: 0.813rem;
        line-height: 1.23
    }

    .branding-swiper-container .swiper-pagination li a .slide-num {
        width: 100%;
        text-align: center
    }

    .branding-swiper-container .swiper-pagination li.active a .slide-num {
        width: auto;
        text-align: left
    }

    .branding-swiper-container .swiper-pagination li a .dot {
        display: none
    }

    .branding-swiper-container .swiper-pagination li.active a .dot {
        display: inline-block
    }

    .branding-swiper-container .swiper-pagination li a span {
        height: 2.308em
    }

    .branding-swiper-container .swiper-pagination li a .slide-txt {
        display: none
    }

    .branding-swiper-container .swiper-pagination li.active a .slide-txt {
        display: inline-block
    }
}

/* 20230918 추가 - landscape 대응 */
@media screen and (max-width: 720px) and (orientation: landscape) {
    .key-visual-swiper {
        min-height:136.5vw
    }

    .key-slide-content .key-title {
        transform: translateY(56%) !important
    }
}

:root {
    --blur-1-size: clamp(300px, 30vw, 30vw);
    --blur-2-size: clamp(200px, 25vw, 25vw);
    --blur-3-size: clamp(100px, 10vw, 10vw);
    --blur-amount: 60px
}

.main2023-bg {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100vh
}

.main2023-bg .blur {
    position: absolute;
    z-index: 1;
    border-radius: 900px;
    filter: blur(var(--blur-amount))
}

.main2023-bg .blur:nth-child(1) {
    top: 2vh;
    right: -2vw;
    animation: bgColor01 15s infinite linear,bgScale01 20s infinite linear
}

.main2023-bg .blur:nth-child(2) {
    top: 40vh;
    right: -5vh;
    animation: bgColor2 15s infinite linear,bgScale02 10s infinite linear
}

.main2023-bg .blur:nth-child(3) {
    top: 60vh;
    left: -5vw;
    animation: bgColor3 15s infinite linear,bgScale01 10s infinite linear
}

.main2023-bg .blur:nth-child(4) {
    top: 80vh;
    right: -8vw;
    animation: bgColor4 20s infinite linear,bgScale02 15s infinite linear
}

@keyframes bgColor01 {
    0% {
        background: rgb(243 151 137 / 30%)
    }

    20% {
        background: rgb(243 151 137 / 30%)
    }

    25% {
        background: rgb(187 227 179 / 30%)
    }

    55% {
        background: rgb(187 227 179 / 30%)
    }

    60% {
        background: rgb(136 191 240 / 30%)
    }

    85% {
        background: rgb(136 191 240 / 30%)
    }

    90% {
        background: rgb(243 151 137 / 30%)
    }

    100% {
        background: rgb(243 151 137 / 30%)
    }
}

@keyframes bgColor2 {
    0% {
        background: rgb(187 227 179 / 30%)
    }

    20% {
        background: rgb(187 227 179 / 30%)
    }

    25% {
        background: rgb(136 191 240 / 30%)
    }

    55% {
        background: rgb(136 191 240 / 30%)
    }

    60% {
        background: rgb(243 151 137 / 30%)
    }

    85% {
        background: rgb(243 151 137 / 30%)
    }

    90% {
        background: rgb(187 227 179 / 30%)
    }

    100% {
        background: rgb(187 227 179 / 30%)
    }
}

@keyframes bgColor3 {
    0% {
        background: rgb(136 191 240 / 30%)
    }

    20% {
        background: rgb(136 191 240 / 30%)
    }

    25% {
        background: rgb(243 151 137 / 30%)
    }

    55% {
        background: rgb(243 151 137 / 30%)
    }

    60% {
        background: rgb(187 227 179 / 30%)
    }

    85% {
        background: rgb(187 227 179 / 30%)
    }

    90% {
        background: rgb(136 191 240 / 30%)
    }

    100% {
        background: rgb(136 191 240 / 30%)
    }
}

@keyframes bgColor4 {
    0% {
        background: rgb(243 151 137 / 30%)
    }

    20% {
        background: rgb(243 151 137 / 30%)
    }

    25% {
        background: rgb(187 227 179 / 30%)
    }

    55% {
        background: rgb(187 227 179 / 30%)
    }

    60% {
        background: rgb(136 191 240 / 30%)
    }

    85% {
        background: rgb(136 191 240 / 30%)
    }

    90% {
        background: rgb(243 151 137 / 30%)
    }

    100% {
        background: rgb(243 151 137 / 30%)
    }
}

@keyframes bgScale01 {
    0% {
        width: calc(var(--blur-1-size) * 1);
        height: calc(var(--blur-1-size) * 1)
    }

    40% {
        width: calc(var(--blur-1-size) * 1.2);
        height: calc(var(--blur-1-size) * 1.2)
    }

    80% {
        width: calc(var(--blur-1-size) * 0.7);
        height: calc(var(--blur-1-size) * 0.7)
    }

    100% {
        width: calc(var(--blur-1-size) * 1);
        height: calc(var(--blur-1-size) * 1)
    }
}

@keyframes bgScale02 {
    0% {
        width: calc(var(--blur-2-size) * 1);
        height: calc(var(--blur-2-size) * 1)
    }

    40% {
        width: calc(var(--blur-2-size) * 0.75);
        height: calc(var(--blur-2-size) * 0.75)
    }

    80% {
        width: calc(var(--blur-2-size) * 1.3);
        height: calc(var(--blur-2-size) * 1.3)
    }

    100% {
        width: calc(var(--blur-2-size) * 1);
        height: calc(var(--blur-2-size) * 1)
    }
}

.swiper-lazy-preloader {
    border-color: rgba(255,255,255,0)
}

/*250630배포테스트*/