.mainTitle {
    opacity:0;
    position:absolute;
    top:50%;
    left:50%;
    z-index:10;
    height:134px;
    margin-top:-25px;
    color:#fff;
    font-weight:700;
    font-size:60px;
    transform:scale(0.8) translateY(-50%);
    transition:all 6s ease;
}
.mainTitle span {
    display:block;
    position:absolute;
}
.mainTitle span:nth-child(1) {
    left:-490px;
    width:540px;
}
.mainTitle span:nth-child(2) {
    left:20px;
    width:540px;
}
.mainTitle span:nth-child(3) {
    left:-400px;
    width:910px;
    margin-top:100px;
}


/* main visual */
.wrap {
    overflow:hidden;
}
.main_viwual {
    overflow:hidden;
    position:relative;
    height:100vh;
    background:#000;
    background-size:cover;
}
.mv_inner {
    opacity:0;
    position:relative;
    width:100%;
    height:100%;
    transition:opacity 1s ease;
}
.mv_inner.ready {
    opacity:1;
}
.ri {
    opacity:0;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transition:opacity 0.6s ease;
    aspect-ratio:1920 / 1080;
}
.ri.active {
    opacity:1;
}
.ri video {
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:100%;
    transform:translate(-50%, -50%);
    object-fit:cover;
}
.ri:has(video)::after {
    content:"";
    position:absolute;
    z-index:1;
    background:rgba(0,0,0,0.2);
    pointer-events:none;
    inset:0;
}
.main_viwual .ri1 {
    background:url("../images/img-6.png") no-repeat center right;
    background-size:cover;
}
.main_viwual .ri2 {
    background:url("../images/img-5.png") no-repeat center right;
    background-size:cover;
}
.main_viwual .ri3 {
    background:url("../images/img-7.png") no-repeat center right;
    background-size:cover;
}
.mainV_L_wrap {
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
}
.mainV_R_wrap {
    overflow:hidden;
    position:absolute;
    top:0;
    right:0;
    width:50%;
    height:100%;
}
.mainV_L {
    opacity:0;
    position:relative;
    width:100%;
    height:100%;
    transition:transform, opacity  6s ease;
}
.mainV_L .li {
    opacity:0;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transition:opacity 0.6s ease;
    aspect-ratio:1920 / 1080;
}
.mainV_L .li.active {
    opacity:1;
}
.mainV_L .li video {
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:100%;
    transform:translate(-50%, -50%);
    object-fit:cover;
}
.mainV_L .li:has(video)::after {
    content:"";
    position:absolute;
    z-index:1;
    background:rgba(0,0,0,0.2);
    pointer-events:none;
    inset:0;
}
.mainV_L .li1 {
    background:url("../images/img-2.png") no-repeat center left;
    background-size:cover;
}
.mainV_L .li2 {
    background:url("../images/img-1.png") no-repeat center left;
    background-size:cover;
}
.mainV_L .li3 {
    background:url("../images/img-4.png") no-repeat center left;
    background-size:cover;
}
.mainV_L .li4 {
    background:url("../images/img-3.png") no-repeat center left;
    background-size:cover;
}
.mainV_L::after {
    content:"";
    position:absolute;
    background:rgba(0,0,0,0.2);
    pointer-events:none;
    inset:0;
}
.mainV_R {
    opacity:0;
    width:100%;
    height:100%;
    transition:transform, opacity 6s ease;
}
.mainV_Ltitle {
    position:absolute;
    top:50%;
    left:0;
    z-index:11;
    width:100%;
    text-align:center;
    pointer-events:none;
    transform:translateY(-50%);
    transform-origin:center;
    transition:all 1.3s ease;
}
.mainV_Rtitle {
    position:absolute;
    top:50%;
    left:0;
    z-index:11;
    width:100%;
    text-align:center;
    pointer-events:none;
    transform:translateY(-50%);
    transform-origin:center;
    transition:all 1.3s ease;
}
.main_viwual .t1 {
    opacity:0;
    color:#fff;
    font-weight:700;
    font-size:40px;
    text-shadow:0 0 10px rgba(0, 0, 0, 0.5);
    transform:translateY(-20px);
    transition:all 2s ease;
}
.main_viwual .t2 {
    opacity:0;
    margin-top:30px;
    color:#fff;
    font-weight:700;
    font-size:60px;
    text-shadow:0 0 10px rgba(0, 0, 0, 0.5);
    transform:translateY(-20px);
    transition:all 2s 0.2s ease;
}
.main_viwual .t3 {
    opacity:0;
    margin-top:30px;
    color:#fff;
    font-weight:700;
    font-size:26px;
    white-space:nowrap;
    text-shadow:0 0 10px rgba(0, 0, 0, 0.5);
    transform:translateY(-20px);
    transition:all 2s 0.4s ease;
}
.mainV_C {
    overflow:hidden;
    position:absolute;
    top:0;
    left:0%;
    z-index:9;
    width:100%;
    height:100%;
    transition:all 3s 3s ease;
}
.mainV_C video {
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:100%;
    transform:translate(-50%, -50%);
    object-fit:cover;
}
.mainV_C::after {
    content:"";
    opacity:0;
    position:absolute;
    background:rgba(0,0,0,0.5);
    pointer-events:none;
    transition:opacity 1s ease;
    inset:0;
}
.mainV_C .mainV_CL {
    position:absolute;
    top:0;
    left:0;
    width:70%;
    height:100%;
    transform:scale(1.2);
    transition:transform 5.5s ease;
    -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 65%);
    mask-image:linear-gradient(to right, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 65%);
}
.mainV_C .mainV_CR {
    position:absolute;
    top:0;
    right:0;
    width:70%;
    height:100%;
    transform:scale(1.2);
    transition:transform 5.5s ease;
    -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 65%);
    mask-image:linear-gradient(to left, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 65%);
}

/* on state */
body.on .mainV_C::after {
    opacity:1;
}
body.on .mainTitle {
    opacity:1;
    transform:scale(1) translateY(-50%);
}
body.on .mainV_L {
    opacity:1;
    transform:scale(1);
}
body.on .mainV_R {
    opacity:1;
    transform:scale(1)  translateX(-50%);
}
body.on .mainV_C {
    opacity:0;
}
body.on .mainV_CL {
    transform:scale(1);
}
body.on .mainV_CR {
    transform:scale(1);
}

/* mainTitle span animation */
.mainTitle span {
    opacity:1;
    filter:blur(0);
    transition:transform 3s ease, filter 3s ease, opacity 3s ease;
}
body.on .mainTitle span:nth-child(1) {
    opacity:0;
    filter:blur(10px);
    transform:translateX(-80px) scale(1.1);
    transition:transform 1.5s ease-in-out 3s, filter 1.5s ease 4.5s, opacity 1.5s ease 4.5s;
}
body.on .mainTitle span:nth-child(2) {
    opacity:0;
    filter:blur(10px);
    transform:translateX(80px) scale(1.1);
    transition:transform 1.5s ease-in-out 3s, filter 1.5s ease 4.5s, opacity 1.5s ease 4.5s;
}
body.on .mainTitle span:nth-child(3) {
    opacity:0;
    transition-delay:2s;
}
body.on2 .mainV_C {
    display:none;
}
body.on2 .mainTitle {
    pointer-events:none;
}
body.on2 .main_viwual .t1 {
    opacity:1;
    transform:translateY(0);
}
body.on2 .main_viwual .t2 {
    opacity:1;
    transform:translateY(0);
}
body.on2 .main_viwual .t3 {
    opacity:1;
    transform:translateY(0);
}

/* on2 hover 비율 전환 */
body.on2 .mainV_L_wrap,
body.on2 .mainV_R_wrap {
    cursor:pointer;
    transition:width 1s ease;
}
body.on2 .main_viwual.hover-left .mainV_L_wrap {
    width:60%;
}
body.on2 .main_viwual.hover-left .mainV_R_wrap {
    width:40%;
}
body.on2 .main_viwual.hover-left .mainV_Rtitle {
    opacity:0.3;
    transform:translateY(-50%) scale(0.6);
    transition:all 1s ease;
}
body.on2 .main_viwual.hover-right .mainV_R_wrap {
    width:60%;
}
body.on2 .main_viwual.hover-right .mainV_L_wrap {
    width:40%;
}
body.on2 .main_viwual.hover-right .mainV_Ltitle {
    opacity:0.3;
    transform:translateY(-50%) scale(0.6);
    transition:all 1s ease;
}

/* on2 click: 전체 확장 */
body.on2 .main_viwual.expand-left  .mainV_L_wrap {
    width:100%;
}
body.on2 .main_viwual.expand-left  .mainV_R_wrap {
    width:0%;
}
body.on2 .main_viwual.expand-right .mainV_R_wrap {
    overflow:visible;
    width:100%;
}
body.on2 .main_viwual.expand-right .mainV_L_wrap {
    width:0%;
}
body.on2 .main_viwual.expand-left .mainV_Rtitle {
    opacity:0;
    transition:opacity 0.25s ease;
}
body.on2 .main_viwual.expand-right .mainV_Ltitle {
    opacity:0;
    transition:opacity 0.25s ease;
}
body.on2 .main_viwual:not(.expand-left, .expand-right, .hover-left, .hover-right) .mainV_Rtitle,
body.on2 .main_viwual:not(.expand-left, .expand-right, .hover-left, .hover-right) .mainV_Ltitle {
    transition:opacity 0.35s ease 1s;
}

/* mainV_R_nav */
.mainV_R_nav {
    display:flex;
    flex-direction:column;
    gap:10px;
    opacity:0;
    position:absolute;
    top:50%;
    right:0;
    z-index:20;
    margin:0;
    padding:0;
    text-align:right;
    list-style:none;
    pointer-events:none;
    transform:translateY(-50%);
    transition:opacity 0.4s ease;
}
.mainV_R_nav li {
    display:flex;
    justify-content:flex-end;
}
.mainV_R_nav li a {
    display:flex;
    align-items:center;
    gap:10px;
    width:232px;
    height:80px;
    padding:24px;
    border:1px solid rgba(255,255,255,0.5);
    border-right:none;
    border-radius:20px 0 0 20px;
    background:rgba(0,0,0,0);
    color:#fff;
    font-weight:300;
    font-size:22px;
    text-decoration:none;
    white-space:nowrap;
    transition:all 0.3s ease;
    box-sizing:border-box;
}
.mainV_R_nav li .dot {
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    width:2em;
    height:2em;
    border-radius:.8rem;
    background-color:#f37321;
    color:#fff;
}
.mainV_R_nav li a:hover, .mainV_R_nav li a.active {
    justify-content:space-between;
    width:307px;
    border-color:transparent;
    background:#fff;
    background:rgba(255, 255, 255, 0.97);
    box-shadow:0 7px 14px 0 rgba(0, 0, 0, 0.19);
    color:#222;
}
.mainV_R_nav li a:hover .dot, .mainV_R_nav li a.active .dot {
    opacity:1;
    transition:all 0.6s ease;
}
body.on2 .main_viwual.expand-right .mainV_R_nav {
    opacity:1;
    pointer-events:auto;
    transition:opacity 0.5s ease 0.8s;
}

/* mainV_L_nav */
.mainV_L_nav {
    display:flex;
    flex-direction:column;
    gap:10px;
    opacity:0;
    position:absolute;
    top:50%;
    right:0;
    z-index:20;
    margin:0;
    padding:0;
    text-align:right;
    list-style:none;
    pointer-events:none;
    transform:translateY(-50%);
    transition:opacity 0.4s ease;
}
.mainV_L_nav li {
    display:flex;
    justify-content:flex-end;
}
.mainV_L_nav li a {
    display:flex;
    align-items:center;
    gap:10px;
    width:232px;
    height:80px;
    padding:24px 24px 24px 40px;
    border:1px solid rgba(255,255,255,0.5);
    border-right:none;
    border-radius:20px 0 0 20px;
    background:rgba(0,0,0,0);
    color:#fff;
    font-weight:300;
    font-size:22px;
    text-decoration:none;
    white-space:nowrap;
    transition:all 0.3s ease;
    box-sizing:border-box;
}
.mainV_L_nav li .dot {
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    width:2em;
    height:2em;
    border-radius:.8rem;
    background-color:#f37321;
    color:#fff;
}
.mainV_L_nav li a:hover, .mainV_L_nav li a.active {
    justify-content:space-between;
    width:307px;
    border-color:transparent;
    background:#fff;
    background:rgba(255, 255, 255, 0.97);
    box-shadow:0 7px 14px 0 rgba(0, 0, 0, 0.19);
    color:#222;
}
.mainV_L_nav li a:hover .dot, .mainV_L_nav li a.active .dot {
    opacity:1;
    transition:all 0.6s ease;
}
body.on2 .main_viwual.expand-left .mainV_L_nav {
    opacity:1;
    pointer-events:auto;
    transition:opacity 0.5s ease 0.8s;
}


/* ===================== Newsroom ===================== */
.newsroom {
    padding:100px 0 80px;
    background:#fff;
}
.newsroom .btnWrap {
    justify-content:center;
    margin-top:60px;
    
}
.nr_inner {
    max-width:1760px;
    margin:0 auto;
    padding:0 40px;
}
.nr_head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}
.nr_label {
    color:#F37321;
    font-style:normal;
    font-weight:400;
    font-size:20px;
    line-height:120%; /* 24px */
}
.nr_title {
    margin-top:30px;
    color:#111;
    font-weight:700;
    font-size:50px;
    line-height:1.4;
}
.nr_nav {
    display:flex;
    gap:10px;
    padding-bottom:6px;
}
.nr_btn {
    display:flex;
    justify-content:center;
    align-items:center;
    width:64px;
    height:64px;
    border:1px solid rgba(0,0,0,0);
    border-radius:50%;
    background:#fff;
    color:#888;
    cursor:pointer;
    transition:background 0.2s, color 0.2s, border-color 0.2s;
}
.nr_btn:hover {
    border-color:#FF6000;
    background:#FF6000;
    color:#fff;
}
.nr_btn.swiper-button-disabled {
    opacity:0.4;
    cursor:default;
    pointer-events:none;
}
.nr_cards {
    overflow:hidden;
    width:calc(100vw - max(40px, (100vw - 1760px) / 2 + 40px));
    margin-top:50px;
}
.nr_cards.swiper {
    cursor:none;
}
.nr_drag_cursor {
    display:none;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    opacity:0;
    position:fixed;
    top:0;
    left:0;
    z-index:999;
    width:120px;
    height:120px;
    border-radius:50%;
    background:#FF6000;
    color:#fff;
    font-weight:700;
    font-size:14px;
    text-align:center;
    pointer-events:none;
    transform:translate(-50%, -50%) scale(0.4);
    transition:opacity 0.25s ease, transform 0.25s ease;
}
.nr_drag_cursor .drag_cursor_prev svg:nth-child(1) {
    animation:drag-cursor-arrow-x-reverse 1.2s ease infinite;
}
.nr_drag_cursor .drag_cursor_prev svg:nth-child(2) {
    margin-left:-6px;
    animation:drag-cursor-arrow-x-reverse 1.2s ease infinite 0.2s;
}
.nr_drag_cursor .drag_cursor_next svg:nth-child(1) {
    animation:drag-cursor-arrow-x 1.2s ease infinite  0.2s;
}
.nr_drag_cursor .drag_cursor_next svg:nth-child(2) {
    margin-left:-6px;
    animation:drag-cursor-arrow-x 1.2s ease infinite;
}


@keyframes drag-cursor-arrow-x {
    0% {
        opacity:0;
        transform:translateX(-50%);
    }
    25%, 75% {
        opacity:1;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
        transform:translateX(50%);
    }
}
@keyframes drag-cursor-arrow-x-reverse {
    0% {
        opacity:0;
        transform:translateX(50%);
    }
    25%, 75% {
        opacity:1;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
        transform:translateX(-50%);
    }
}
.nr_drag_cursor.is_active {
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
}
.nr_cards .swiper-slide {
    height:auto;
}
.nr_card {
    display:flex;
    flex-direction:column;
    overflow:hidden;
    height:100%;
    padding:30px;
    border-radius:20px;
    background:#F5F5F5;
    cursor:pointer;
    transition:all ease 0.2s;
    box-sizing:border-box;
}
.nr_card:hover {
    background:#FFF8F4;
}
.nr_card:hover .card_thumb::before {
    transform:scale(1.1);
}
.card_meta {
    display:flex;
    justify-content:space-between;
    align-items:center;

}
.card_cat {
    color:#111;
    font-weight:400;
    font-size:14px;
}
.card_tag {
    color:#111;
    font-weight:400;
    font-size:14px;
}
.card_title {
    display:-webkit-box;
    flex:1;
    overflow:hidden;
    margin-top:80px;
    color:#111;
    font-weight:500;
    font-size:22px;
    line-height:1.55;
    text-overflow:ellipsis;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.card_date {
    margin-top:10px;
    color:#9A9A9A;
    font-size:14px;
}
.card_thumb {
    overflow:hidden;
    position:relative;
    width:100%;
    margin-top:24px;
    background:#e0e0e0;
    aspect-ratio:16/9;
}
.card_thumb::before {
    content:"";
    position:absolute;
    background-image:inherit;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    transition:transform 0.4s ease;
    inset:0;
}
.nr_more_wrap {
    margin-top:60px;
    text-align:center;
}
.nr_more {
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:18px 36px;
    border:1px solid #ccc;
    border-radius:50px;
    color:#111;
    font-weight:600;
    font-size:15px;
    text-decoration:none;
    transition:border-color 0.2s;
}
.nr_more:hover {
    border-color:#111;
}
.nr_more_icon {
    display:flex;
    flex-shrink:0;
    justify-content:center;
    align-items:center;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#FF6000;
    color:#fff;
}

@media (width <=1400px) {
    .main_viwual .t1 {
        font-size:32px;
    }
    .main_viwual .t2 {
        font-size:40px;
    }
    .main_viwual .t3 {
        font-size:24px;
    }
}
@media (width <=1024px) {
    .mainTitle {
        transform:scale(0.5) translateY(-50%);
    }
    body.on .mainTitle {
        transform:scale(0.65) translateY(-50%);
    }
    .main_viwual .t1 {
        font-size:22px;
    }
    .main_viwual .t2 {
        margin-top:24px;
        font-size:28px;
    }
    .main_viwual .t3 {
        font-size:18px;
    }
    .newsroom {
        padding:70px 0 60px;
    }
    .newsroom .btnWrap {
        margin-top:40px;
    }
    .nr_inner {
        padding:0 30px;
    }
    .nr_title {
        margin-top:20px;
        font-size:36px;
    }
    .nr_cards {
        width:100%;
        margin-top:35px;
    }
    .nr_card {
        padding:24px;
    }
    .card_title {
        margin-top:50px;
    }
    .nr_btn {
        width:52px;
        height:52px;
    }
    .mainV_R_nav {display:none;}
    .mainV_L_nav {display:none;}
}
@media (width <=768px) {
    .main_viwual {
        height:400px;
    }
    .mainTitle {transform:scale(.1) translateY(-50%);}
    body.on .mainTitle {transform:scale(.3) translateY(-50%);}
    .main_viwual .t1 {
        font-size:10px;
    }
    .main_viwual .t2 {
        margin-top:20px;
        font-size:16px;
        line-height:130%;
    }
    .main_viwual .t3 {
        display:none;
    }
    .mainV_Ltitle, .mainV_Rtitle {padding:0 30px;}
    .newsroom {padding:40px 0;}
    .nr_title {margin-top:10px; font-size:22px;}
    .nr_inner {padding:0 20px;}
    .nr_cards {margin-top:20px;}
    .nr_card {padding:20px;}
    .card_title {margin-top:20px; font-size:20px;}
    .newsroom .btnWrap {margin-top:20px;}
    .mainV_R_nav li a:hover, .mainV_R_nav li a.active {width:200px;}
    .nr_btn {width:40px; height:40px;}
}