/* ============ Base / Reset ============ */
*,
*::before,
*::after {
    box-sizing: unset;
    /* 성능·안정성 */
    margin: 0;
}

button {
    outline: none;
}

button {
    border: none;
}

.main1 {
    top: 0;
    opacity: 0;
    width: 100%;
    z-index: 5;
    margin-top: -337%;
    pointer-events: none;
}

.leftflex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
}

.rightflex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
}

html,
body {
    padding: 0;
    margin: 0;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

html {
    scroll-behavior: smooth;
}

.fwrap {
    flex-wrap: wrap;
}

.swiper-wrapper.flow {
    pointer-events: none;
    transition-timing-function: linear;
}

@keyframes blk {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    31% {
        opacity: 1;
    }

    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes blk2 {
    0% {
        opacity: 0;
    }

    49% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes blk3 {
    0% {
        opacity: 1;
    }

    24% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    99% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes light {

    0%,
    31%,
    34%,
    39%,
    42%,
    47% {
        opacity: 0;
    }

    5%,
    30%,
    35%,
    38%,
    43%,
    46% {
        opacity: 0.4;
    }

    50%,
    55%,
    60%,
    67%,
    51%,
    54%,
    68%,
    100% {
        opacity: 1;
    }

    70% {
        opacity: 0.2;
    }
}

@keyframes marqueeX {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes marqueeX_r {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes rotate_image {
    100% {
        transform: rotate(360deg);
    }
}

/* image_sd */
.image_sd_wrap {
    overflow: hidden;
}

.image_sd {
    animation: marqueeX 20s infinite linear;
}

.image_sd2 {
    animation: marqueeX 7s infinite linear;
}

.image_sd .absol {
    left: 100%;
}

.image_sd2 .absol {
    left: 100%;
}

.image_sd_r {
    animation: marqueeX_r 20s infinite linear;
}

.image_sd_r2 {
    animation: marqueeX_r 7s infinite linear;
}

.image_sd_r .absol {
    right: 100%;
}

.image_sd_r2 .absol {
    right: 100%;
}

/* image_sd end */
/* y_slide start */
.slide_y_wrap {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0%;
    overflow: hidden;
}

.slide_y {
    animation: marqueeY 20s infinite linear;
}

.slide_y img.absol {
    top: 100%;
}

.slide_y_r {
    animation: marqueeY_r 20s infinite linear;
}

.slide_y_r img.absol {
    bottom: 100%;
}

/* 접근성 유틸 (화면에서 숨기기) */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============ Layout Helpers ============ */
section {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
}

.pc-mobile {
    display: flex;
}

.mobile-pc {
    display: none;
}

.pc {
    display: flex;
}

.pc-inline {
    display: inline;
}

.tablet {
    display: none;
}

.mobile {
    display: none;
}

.clearfix::before,
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.flowhid {
    overflow: hidden;
}

.hide {
    display: none !important;
}

.hideopa {
    opacity: 0 !important;
}

.show {
    opacity: 1 !important;
}

.absol {
    position: absolute;
}

.rltv {
    position: relative;
}

.scrX {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scrX .scrX_item {
    animation: marqueeX 20s linear infinite;
    width: 100%;
}

.scrX .scrX_item_absol {
    right: -100%;
    width: 100%;
}

.scrY {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scrY .scrY_item {
    animation: marqueeY 20s linear infinite;
    height: 100%;
}

.scrY .scrY_item_absol {
    bottom: -100%;
    width: 100%;
}

.flexrow {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.flexcol {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* ============ Fonts ============ */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap");

/* Pretendard – 각 굵기 분리 선언 (font-display: swap으로 FOUT 최소화) */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TTTtangsbudaejjigaeB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/TTTtangsbudaejjigaeB.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    /* fluid type 기본값 – 기존 계산식 유지 */
    font-family: 'Pretendard', 'Noto Sans KR', system-ui, -apple-system, Segoe UI, Roboto, Apple SD Gothic Neo, 'Noto Serif KR', sans-serif;
}

/* ============ Preload holder ============ */


/* ============ Animations / Keyframes ============ */
/* 기존 이름 유지 + 문법 오류 제거 */


@keyframes headlightBlink {
    0% {
        opacity: 0.2;
    }

    15% {
        opacity: 0.8;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: 0.7;
    }

    55% {
        opacity: 1;
    }

    70% {
        opacity: 0.6;
    }

    85% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

@keyframes sway4 {
    50% {
        transform: rotate(2deg) scale(1.06);

    }
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes marquee2 {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes marqueeX {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes marqueeY {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}

@keyframes slick-circle {
    0% {
        left: 0;
    }

    100% {
        left: 99%;
    }
}

@keyframes soul_out {
    0% {
        opacity: 0.7;
    }

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

@keyframes ddm3 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: rotate(-2deg);
    }

    100% {
        transform: scale(1.05);
    }
}

@keyframes ddm4 {
    0% {
        transform: scale(1);
    }

    25% {
        transform: rotate(-2deg);
    }

    50% {
        transform: scale(1.05);
    }

    75% {
        transform: rotate(2deg);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes rotate360 {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate_img10deg {

    0%,
    49% {
        transform: rotate(10deg);
    }

    50%,
    99% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(10deg);
    }
}


@keyframes rotate_img5deg {

    0%,
    49% {
        transform: rotate(5deg);
    }

    50%,
    99% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(5deg);
    }
}

@keyframes opazoom {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.02);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.opazoom {
    animation: opazoom 1.5s infinite;
}

@keyframes ani_scale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: matrix(1.1, 0.01, 0.01, 1.2, 0, 0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes zoom {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes blk {

    0%,
    30% {
        opacity: 0;
    }

    31%,
    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes blk2 {

    0%,
    49% {
        opacity: 0;
    }

    50%,
    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes blk3 {

    0%,
    24% {
        opacity: 1;
    }

    25%,
    99% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes scaleOpa {
    100% {
        transform: scale(1.1);
        opacity: 0;
    }
}

@keyframes scaleOpa2 {
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes scaleOpa3 {
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes ball {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 20px;
    }
}

@keyframes ddm {
    0% {
        transform: scale(1);
    }

    50% {
        transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -30);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ddm_m {
    0% {
        transform: scale(1);
    }

    50% {
        transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -15);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ddm_m2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: matrix(1.15, 0.01, 0.01, 1.15, 0, 30);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes zoom2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes rotate_imageY {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes ddm2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: translateY(20px);
    }

    100% {
        transform: scale(1.02);
    }
}

@keyframes ddm2X {
    0% {
        transform: scale(1);
    }

    50% {
        transform: translateX(-100%);
    }

    100% {
        transform: scale(1.02);
    }
}

@keyframes ddm2Xhalf {
    0% {
        transform: scale(1);
    }

    50% {
        transform: translateX(-50%);
    }

    100% {
        transform: scale(1.02);
    }
}

@keyframes uitLineMove {
    0% {
        stroke-dashoffset: 300.292;
    }

    100% {
        stroke-dashoffset: 110;
    }
}

@keyframes rotate_img10deg {
    0% {
        transform: rotate(10deg);
    }

    49% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(-10deg);
    }

    99% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(10deg);
    }
}

@keyframes hand {
    0% {
        transform: translateY(-0.5%);
    }

    25% {
        transform: translateY(1%);
    }

    50% {
        transform: translate(0.5%, -1%);
    }

    75% {
        transform: translate(1%, 0.5%);
    }

    100% {
        transform: translate(1%, -1%);
    }
}

@keyframes hand2 {
    0% {
        transform: translateY(2%);
    }

    25% {
        transform: translateY(-1%);
    }

    50% {
        transform: translate(-1%, 2%);
    }

    75% {
        transform: translate(2%, 1%);
    }

    100% {
        transform: translateY(2%);
    }
}

@keyframes bg-position {
    0% {
        background-position: bottom;
    }

    25% {
        background-position: center;
    }

    50% {
        background-position: inherit;
    }

    75% {
        background-position: center;
    }

    100% {
        background-position: bottom;
    }
}

/* ❗️기존 smoke에 있던 random()은 CSS 문법이 아니므로 제거/치환 */
@keyframes smoke {
    0% {
        transform: translate(0, 30%) rotate(0);
        opacity: 0.2;
    }

    25% {
        transform: translate(calc(random() * 100vw), 100vh) rotate(50deg) translateX(10px);
        opacity: 1;
    }

    50% {
        transform: translate(calc(random() * 100vw), 100vh) rotate(50deg) translateX(50px);
        opacity: 1;
    }

    75% {
        transform: translate(calc(random() * 100vw), 100vh) rotate(50deg) translateX(50px);
        opacity: 1;
    }

    100% {
        transform: translate(calc(random() * 100vw), 200vh) rotate(0) translateX(70px);
        opacity: 0.2;
    }
}

@keyframes smoke2 {
    0% {
        transform: translate(0, 30%) rotate(0);
        opacity: 0.2;
    }

    25% {
        transform: translate(calc(random() * 100vw), 100vh) rotate(50deg) translateX(10px);
        opacity: 1;
    }

    50% {
        transform: translate(calc(random() * 100vw), 100vh) rotate(50deg) translateX(30px);
        opacity: 1;
    }

    75% {
        transform: translate(calc(random() * 100vw), 100vh) rotate(50deg) translateX(30px);
        opacity: 1;
    }

    100% {
        transform: translate(calc(random() * 100vw), 200vh) rotate(0) translateX(50px);
        opacity: 0.2;
    }
}

@keyframes light {

    0%,
    31%,
    34%,
    39%,
    42%,
    47% {
        opacity: 0;
    }

    5%,
    30%,
    35%,
    38%,
    43%,
    46% {
        opacity: 0.4;
    }

    50%,
    55%,
    60%,
    67%,
    51%,
    54%,
    68%,
    100% {
        opacity: 1;
    }

    70% {
        opacity: 0.2;
    }
}

@keyframes shakeAndFall {
    0% {
        transform: translate(0, -100%) rotate(0);
        opacity: 0;
    }
}

/* 떨어지는 효과 – 잘못된 transform 토큰 제거 */
@keyframes fall {
    0% {
        top: 0;
        opacity: 1;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform-origin: center center;
    }

    100% {
        transform: rotateX(240deg) rotateY(400deg) rotateZ(310deg);
        transform-origin: center center;
        top: 100%;
        opacity: 0;
    }
}

@keyframes fall2 {
    0% {
        top: 0;
        opacity: 1;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform-origin: center center;
    }

    100% {
        transform: rotateX(-240deg) rotateY(-400deg) rotateZ(-310deg);
        transform-origin: center center;
        top: 100%;
        opacity: 0;
    }
}

@keyframes backgroundchange {
    0% {
        background: url(/images/con11_07.png) no-repeat center / contain;
    }

    25% {
        background: url(/images/con11_08.png) no-repeat center / contain;
    }

    50% {
        background: url(/images/con11_09.png) no-repeat center / contain;
    }

    75% {
        background: url(/images/con11_10.png) no-repeat center / contain;
    }

    100% {
        background: url(/images/con11_07.png) no-repeat center / contain;
    }
}

@keyframes opa {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes backgroundchange_2 {
    0% {
        background: url(/images/con08_07.png) no-repeat center / contain;
    }

    20% {
        background: url(/images/con08_08.png) no-repeat center / contain;
    }

    40% {
        background: url(/images/con08_09.png) no-repeat center / contain;
    }

    60% {
        background: url(/images/con08_10.png) no-repeat center / contain;
    }

    80% {
        background: url(/images/con08_11.png) no-repeat center / contain;
    }

    100% {
        background: url(/images/con08_07.png) no-repeat center / contain;
    }
}

@keyframes rotateAnimation {
    0% {
        transform: rotate(-1deg);
    }

    40% {
        transform: rotate(1deg);
    }

    60% {
        transform: rotate(2deg);
    }

    80% {
        transform: rotate(-1deg);
    }

    100% {
        transform: rotate(1deg);
    }
}

@keyframes ddm {
    0% {
        transform: scale(1);
    }

    50% {
        transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -30);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ddm_m {
    0% {
        transform: scale(1);
    }

    50% {
        transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -15);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ddm_m2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: matrix(1.15, 0.01, 0.01, 1.15, 0, 30);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes zoom2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes rotate_imageY {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes ddm2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: translateY(20px);
    }

    75% {
        transform: scale(1.02);
        transform: translateY(10px);
    }

    100% {
        transform: scale(1);
        transform: translateY(0px);
    }
}

@keyframes ddm2X {
    0% {
        transform: scale(1);
    }

    50% {
        transform: translateX(-100%);
    }

    100% {
        transform: scale(1.02);
    }
}

@keyframes ddm2Xhalf {
    0% {
        transform: scale(1);
    }

    50% {
        transform: translateX(-50%);
    }

    100% {
        transform: scale(1.02);
    }
}

/* ============ Helpers ============ */
.rotate {
    animation: rotate360 20s linear infinite;
}

.pointer {
    cursor: pointer;
}

.blk {
    animation: blk 1s infinite;
}

.scaleopa1 {
    animation: scaleOpa 2s infinite;
}

.scaleopa2 {
    animation: scaleOpa2 2s infinite;
}



.intro {
    width: 100%;
    height: 100vh;
    background: black;
}

.intro_top_con {
    white-space: nowrap;
    font-size: 7.5vw;
}

.intro_top_con {
    white-space: nowrap;
    font-size: 7.5vw;
    position: absolute;
    top: 45%;
    width: 130%;
    transition: 0.5s all;
    left: -15%;
    justify-content: space-around;
    /* opacity: 0; */
}

.intro_top_con_on1 {
    left: 28.4%;
}

.intro_top_con_on2 {
    left: -15%;
}

.intro_top_con_on3 {
    left: -58%;
}

.intro_top_con_on1 .intro_top_item1 {
    opacity: 1;
}

.intro_top_con_on2 .intro_top_item2 {
    opacity: 1;
}

.intro_top_con_on3 .intro_top_item3 {
    opacity: 1;
}

.intro_top_item {
    transition: 0.6s all;
    opacity: 0.3;
}

.intro_top_con_3rd img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.intro_top_con_2nd {
    margin-top: 0%;
    margin-left: 0%;
    font-size: 3vw;
    opacity: 0;
}

.intro_top_con_3rd4 {
    width: 2.88714%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0.8%;
}

.intro_top_con_3rd6 {
    width: 2.83465%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0.8%;
}

.intro_top_con_3rd {
    width: 100%;
    height: 100%;
    align-items: flex-start;
    top: 47%;
    top: 0%;
    left: -0.9%;
    opacity: 0;
    display: none;
}

.intro_top_con_3rd.intro_top_con_3rd_on {
    opacity: 1;
}

.intro_top_con_3rd>div {
    display: inline-flex;
    position: relative;
    align-items: center;
}

.intro_top_con_3rd img {
    display: block;
    transition: all 0.5s ease;
}

.intro_top_con_3rd1 {
    width: 2.78215%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.intro_top_con_3rd1ab1 {
    width: 67.9245%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: 0;
    right: 11%;
}

.intro_top_con_3rd2 {
    width: 2.72966%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.intro_top_con_3rd1ab2 {
    width: 67.3077%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 0;
    left: 2%;
}

.intro_top_con_3rd3 {
    width: 2.88714%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.intro_top_con_3rd1ab3 {
    width: 70.9091%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: 0%;
    right: 7%;
}

.intro_top_con_3rd4 {
    width: 2.88714%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0.8%;
}

.intro_top_con_3rd1ab4 {
    width: 50.9091%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 0%;
    left: 2%;
}

.intro_top_con_3rd5 {
    width: 2.78215%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.intro_top_con_3rd1ab5 {
    width: 86.7925%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: 0%;
    right: 0%;
}

.intro_top_con_3rd6 {}

.intro_top_con_3rd6 {}

.intro_top_con_3rd1ab6 {
    width: 29.6296%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 4%;
    top: 21%;
}

.intro_top_con_3rd7 {
    width: 2.62467%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.intro_top_con_3rd1ab7 {
    width: 22%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 0;
    right: 0;
}

.intro_top_con_3rd8 {
    width: 2.83465%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0.2%;
}

.intro_top_con_3rd1ab8 {
    width: 88.8889%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: -55%;
    left: 0px;
}

.intro_top_con_3rd9 {
    width: 2.78215%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.intro_top_con_3rd1ab9 {
    width: 45.283%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 0;
    top: 0%;
}

.intro_top_con_3rd10 {
    width: 3.51706%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.intro_top_con_3rd10 {
    width: 3.51706%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0.2%;
}

.intro_top_con_3rd1ab10 {
    width: 20.8955%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 0;
    bottom: 3%;
}


.main {
    background: black;
    opacity: 0;
    left: 0;
    top: 0;
    position: absolute;
}

.main_top {
    margin-top: 12.3%;
}

.main_top2 {
    width: 4.88189%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 1.5%;
}

.main_top1 {
    width: 14.2257%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.main_top1ab {
    width: 110.701%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.main_top1ab2 {
    width: 87.0849%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.main_top3 {
    width: 14.2257%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.main_top3ab {
    width: 110.701%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.main_top3ab2 {
    width: 86.3469%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.main_top2nd {
    margin-top: 1.2%;
    margin-left: 0%;
}

.main_top3rd {
    margin-top: 0.3%;
    margin-left: 0%;
}

.main_top4th {
    width: 95.4856%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4%;
    margin-left: 0%;
    margin-bottom: 2.5%;
}

.main_top4thabitem {
    width: 18.4167%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.main_top4thab2 {
    width: 18.4167%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    margin: 0 1%;
}

.mainab {
    width: 45.7743%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: -23%;
    top: 21%;
    z-index: 2;
}

.mainabab {
    width: 121.445%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: -10%;
    bottom: 40%;
    animation: smoke2 3s infinite;
}

.mainab2 {
    width: 42.9921%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: -20%;
    top: 20%;
    z-index: 2;
}

.main_top4thabitemab {
    opacity: 0;
    transition: opacity .4s;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.main_top4thabitem_on .main_top4thabitemab {
    opacity: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.mainvd {
    filter: grayscale(1) brightness(0.4);
}

.maindoor {
    z-index: 10;
}

.maindoorleft {
    width: 27.569%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 50%;
    bottom: 0;
}

.maindoorright {
    width: 27.569%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 50%;
    bottom: 0;

}

.con1 {
    background: url(/images/con01_9.jpg) no-repeat center / cover;

}

.con1top {
    margin-top: 5.5%;
    margin-left: 0%;
}

.con1top2nd {
    margin-top: 0.5%;
    margin-left: 0%;
}

.con1top4th {
    width: 48.8714%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3.2%;
    margin-left: 0%;
}

.con1top4thab2 {
    width: 20.4082%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: -16%;
}

.con1top5th {
    width: 31.4436%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2%;
    margin-left: 0%;
    margin-bottom: -11.3%;
}

.con1top5thab {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con1ab2 {
    width: 100.787%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: 0;
}

.con1top5thab3 {
    width: 44.2404%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 110%;
    top: 8%;
}

.con1top5thab2 {
    width: 44.2404%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 1%;
    right: 108%;
}

.con1top5thab2ab {
    margin-top: 0%;
    margin-left: 0%;
    top: 27%;
    left: 15%;
    font-size: 1.3021vw;
}

.con1top5thab2ab2 {
    margin-top: 15%;
    margin-left: -6%;
    font-size: 1.8229vw;
}

.con1top5thab2ab2 span {
    font-size: 3.1250vw;
}

.con1top5thab3 .con1top5thab2ab {
    left: 28%;
}

.con1top5thab3 .con1top5thab2ab2 {
    margin-top: 15%;
    margin-left: 7%;
}

.con1top4thab {
    margin-top: 0%;
    margin-left: 0%;
    right: 81%;
    text-align: right;
    top: 43%;
}








/* rolling counter */
@keyframes rollingNumber {
    100% {
        top: 0px;
    }
}

@-webkit-keyframes rollingNumber {
    100% {
        top: 0px;
    }
}

#section04 {
    position: relative;
}

#section04 .background_img {
    position: absolute;
    inset: 0;
    z-index: 0;
}

#section04 .ani_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 77px;
}

#section04 .ani_wrap>div {
    position: relative;
}

#section04 .char_cn {
    position: absolute;
    top: 25px;
}

#section04 .char_cn img {
    width: auto;
}

#section04 .char_cn:nth-child(1) {
    right: 440px;
}

#section04 .char_cn:nth-child(2) {
    left: 440px;
}

#section04 .logo_circle img {
    width: auto;
    max-width: 100%;
}

#section04 .section_inner {
    position: relative;
    z-index: 1;
    padding: 290px 0 180px;
}

#section04 .rolling-counter-wrap {
    margin-top: 43px;
}

#section04 .rolling-counter-wrap .rolling-number {
    background: #000;
}

#section04 .rolling-counter-wrap .rolling-number+.rolling-number {
    margin-left: 11px;
}

#section04 .rolling-counter-wrap .rolling-number .numbers {
    animation-name: none;
}

#section04 .rolling-counter-wrap.aos-animate .rolling-number .numbers {
    animation-name: rollingNumber;
    animation-duration: 2000ms;
    animation-timing-function: ease-out;
    animation-fill-mode: inherit;
    animation-fill-mode: forwards;
    animation-delay: 500ms;

}

#section04 .rolling-counter-wrap+.caption {
    color: #fff;
    text-align: center;
    font-size: 16px;
    margin-top: 1em;
    opacity: 0.5;
}

#section04 .section_title {
    margin-top: 60px;
}

#section04 .text_warp {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #fff;
    max-width: 1050px;
    margin: 0 auto;
}

#section04 .text_warp .left {
    font-size: 40px;
    line-height: 1.2em;
}

#section04 .text_warp .right {
    font-size: 19px;
    font-weight: 300;
    line-height: 1.5em;
}

#section04 .flow_inner {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    width: 1920px;
    height: 100%;
}

#section04 .flow-ani-wrap {
    position: absolute;
    top: 0;
    height: 100%;
}

#section04 .flow-ani-wrap:before,
#section04 .flow-ani-wrap:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 10;
}

#section04 .flow-ani-wrap:before {
    top: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

#section04 .flow-ani-wrap:after {
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

#section04 .flow-ani-wrap ul {
    padding-top: 32px;
}

#section04 .flow-left {
    left: 105px;
}

#section04 .flow-right {
    right: 105px;
}

/* rolling count */
.rolling-counter-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rolling-counter-wrap * {
    font-family: var(--font-family-title);
    font-size: 120px;
}

.rolling-counter-wrap .row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.rolling-number {
    position: relative;
    width: 120px;
    height: 1.2em;
    overflow: hidden;
    color: #fff;
    text-align: center;
    outline: 2px solid #d70315;
}

.rolling-number+.rolling-number {}

.rolling-number .numbers {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
}

.rolling-number .numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.2em;
    line-height: normal;
    letter-spacing: -0.05em;
    font-weight: 900;
}

@media (max-width:768px) {
    .mobileView {
        display: block;
    }

    .rolling-number .numbers span {
        height: 17rem;
    }
}

.rolling-dot,
.rolling-unit {
    line-height: 1em;
    font-size: 42px;
    font-weight: 700;
    padding-bottom: 1.4em;
    color: #fff;
}

.rolling-dot {
    margin: 0 5px;
}

.rolling-unit {
    margin: 0 10px;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
}

.rolling-number[data-number="0"] .numbers {
    top: -1000%;
}

.rolling-number[data-number="1"] .numbers {
    top: -1100%;
}

.rolling-number[data-number="2"] .numbers {
    top: -1200%;
}

.rolling-number[data-number="3"] .numbers {
    top: -1300%;
}

.rolling-number[data-number="4"] .numbers {
    top: -1400%;
}

.rolling-number[data-number="5"] .numbers {
    top: -1500%;
}

.rolling-number[data-number="6"] .numbers {
    top: -1600%;
}

.rolling-number[data-number="7"] .numbers {
    top: -1700%;
}

.rolling-number[data-number="8"] .numbers {
    top: -1800%;
}

.rolling-number[data-number="9"] .numbers {
    top: -1900%;
}

.rolling-number[data-number="10"] .numbers {
    top: -1000%;
}

.rolling-number .numbers {
    animation-name: rollingNumber;
    animation-duration: 1500ms;
    animation-timing-function: ease-out;
    animation-fill-mode: inherit;
    animation-fill-mode: forwards;
}

.rolling-number {
    outline: 2px solid #ffffff29;
    border-radius: 20px;
}

.rolling-number {
    position: relative;
    width: 120px;
    height: 1.2em;
    overflow: hidden;
    color: #ed1c24;
    text-align: center;
    font-family: pretendard-bold;
}

.rolling-number {
    position: relative;
    width: 6vw;
    height: 7vw;
    overflow: hidden;
    text-align: center;
}

.rolling-number .numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    letter-spacing: -0.05em;
    font-weight: 900;
    font-size: 6vw;
}

.rolling-unit {
    margin: 0 10px;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    padding: 0;
    margin: 0;
    font-size: 7vw;
    margin-bottom: -2%;
    margin-left: 2%;
    margin-right: 2%;
    color: #ed1c24;

}

.rolling-number .numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    letter-spacing: -0.05em;
    font-weight: 900;
    font-size: 6vw;
    width: 100%;
    height: 7vw;
}

.rolling-number[data-number="9"] .numbers {
    top: -1200%;
}

.rolling-number[data-number="6"] .numbers {
    top: -1400%;
}

#section04 .rolling-counter-wrap {
    margin-top: 43px;
    margin-left: -3%;
    margin-bottom: 7%;
}

#section04 .rolling-counter-wrap .rolling-number {
    background: #ff1616;
    color: white;
    border-radius: 0;
}

#section04 .rolling-counter-wrap {
    margin-top: 3%;
    margin-left: 0;
    margin-bottom: 7%;
}

#section04 .rolling-counter-wrap {
    margin-top: 3%;
    margin-left: 0;
    margin-bottom: 4%;
}


#section04 .rolling-counter-wrap {
    margin-top: 3%;
    margin-left: 0;
    margin-bottom: 4%;
    width: 78%;
}

.rolling-counter-wrap .row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
}

#section04 .rolling-counter-wrap {
    margin-top: 3%;
    margin-left: 0;
    margin-bottom: 4%;
    width: 78%;
    left: 15%;
}

.rolling-unit {
    margin: 0 10px;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    padding: 0;
    margin: 0;
    font-size: 3vw;
    margin-bottom: -2%;
    margin-left: 2%;
    margin-right: 2%;
    color: black;
    font-family: var(--sf);
}

.con1top4thab {
    margin-top: 0%;
    margin-left: 0%;
    right: 86%;
    text-align: right;
    top: 43%;
}

.rolling-number {
    position: relative;
    width: 8vw;
    height: 4.5vw;
    overflow: hidden;
    text-align: center;
}

#section04 .rolling-counter-wrap .rolling-number {
    background: var(--mc);
    color: white;
    border-radius: 0;
    border-radius: 0.5vw;
}

.rolling-number {
    position: relative;
    width: 8vw;
    height: 4.5vw;
    overflow: hidden;
    text-align: center;
}

.rolling-number .numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    letter-spacing: -0.05em;
    font-weight: 900;
    font-size: 4vw;
    width: 100%;
    height: 4.5vw;

}

#section04 .rolling-counter-wrap {
    margin-top: 3%;
    margin-left: 0;
    margin-bottom: 4%;
    width: 78%;
    left: 15%;
    top: 9%;
}

.con1top4thab3 {
    right: 3%;
    bottom: 17%;
    font-weight: bold;
}

/* con2 */
.con2 {
    background: url(/images/con02_8.jpg) no-repeat center / cover;
}

.con2_item1stbd {
    border-radius: 1vw;
    width: 99%;
    height: 98%;
    position: absolute;
    border: 1px solid var(--mc);
}

.con2_item1st {
    background: white;
    width: 75.5%;
    border-radius: 1vw;
    margin-top: 7%;
    top: 0vw;
}

.con2_item1sttop {
    margin-top: 4.8%;
    margin-left: 0%;
    width: 57%;
    text-align: center;
}

.con2_item1stab {
    width: 12.0306%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: -1vw;
}

.con2_item1sttopab {
    width: 28.445%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: 23%;
    right: 1%;
}

.con2_item1sttop p {
    z-index: 2;
    position: relative;
}

.con2_item1sttop3rd {
    margin-top: 2.3%;
}

.con2_item1sttop3rd1 {
    margin: 0 0.1%;
    width: 45.2017%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.con2_item1stbot3rd1 {
    margin: 0 0.1%;
    width: 45.2017%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.con2_item1sttop3rd1ab {
    text-align: center;
}

.con2_item1sttop3rdab {
    width: 15.9249%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    z-index: 1;
}

.con2_item1sttop3rd {
    margin-top: 2.3%;
    margin-bottom: 3.4%;
}

.con2_item1st2 {
    margin-top: 4%;
    margin-bottom: 5%;
}

.con2_item1stbot3rdab {
    width: 15.9249%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    z-index: 1;
}

/* con3 */
.con3 {
    background-color: #f8f4f0;
}

.con3ab {
    width: 80.9449%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -23%;
    margin-left: 0%;
}

.con3ab2 {
    width: 3.62205%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 16vw;
    top: 7vw;
}

.con3ab3 {
    width: 2.83465%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 28vw;
    top: 2vw;
}

.con3ab4 {
    width: 3.41207%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 19vw;
    top: 8vw;
}

.con3ab5 {
    width: 2.51968%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 16vw;
    top: 5vw;
}

.con3_top {
    margin-top: 5.5%;
    margin-left: 0%;
}

.con3_top2nd {}

.con3_top3rd {
    margin-top: 0.3%;
    margin-left: 0%;
}

.con3_top4th {
    width: 15.4856%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2vw;
    margin-left: -0.7%;
}

.con3_top4thab2 {
    width: 90.1695%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 100%;
    top: 0;
}

.con3_top4thab {
    width: 22.3729%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 56%;
    right: 9%;
}

.con3_top5th {
    width: 100%;
    height: 26.5vw;
    margin-top: 0%;
    margin-left: 0%;
    background-color: var(--mc);
    /* justify-content: start; */
}

.con3_top5th_top {
    width: 100%;
    height: 100%;
}

.con3_top5th_bottom {
    width: 100%;
    height: 100%;
}

.con6_mid_swiper_1_slide_p_con2 {
    width: 94.5055%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    margin-top: 0%;
    margin-left: 0%;
}

.con6_mid_swiper_2 {
    margin-left: 0%;
    top: 2.3vw;
}

.con6_mid_swiper_1_slide_p_con2ab {
    width: 71.5116%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 15%;
}

.con6_mid_swiper_1_slide_p_con2abab {
    width: 27.6423%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 8%;
}

.con6_mid_swiper_1_slide_p_con2ab2 {
    margin-top: 0%;
    margin-left: 0%;
    left: 9%;
}

.con6_mid_swiper_1_slide_p_con2ab2>p {
    margin-top: 6%;
}

.con6_mid_swiper_1_slide_p_con2ab2 {
    margin-top: 0%;
    margin-left: 0%;
    left: 9%;
    display: inline-block;
    width: 53%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.con6_mid_swiper_1_slide_p_con2ab2 p {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.con6_mid_swiper_1_slide_p_con2ab3rd {
    margin-top: 0%;
    margin-left: 0%;
    top: 58%;
}

.con6_mid_swiper_1_slide_p_con2ab2nd {
    margin-top: 0%;
    margin-left: 0%;
    top: 46%;
}

.con6_mid_swiper_3 {
    margin-top: 1%;
    width: 105%;
    margin-left: 0%;
    bottom: 2.3vw;
}

/* con4 */
.con4 {
    background: #F8F4F0;
}

.con4top {
    width: 2.09974%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5.6%;
    margin-left: 0%;
}

.con4top2nd {
    margin-top: 0.5%;
    margin-left: 0%;
}

.con4top5th {
    margin-top: 16%;
    margin-bottom: 21%;
}

.con4top5thitem {
    margin-top: 2.5%;
    margin-top: 0%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}



.con4top5thitem2 {
    transform: translateY(130%);
}

.con4top5thitem3 {
    transform: translateY(130%);
}

.con4top5thitem4 {
    transform: translateY(130%);
}

.con04_18 {
    width: 75vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.con4item1 {
    width: 44.0972%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 4vw;
}

.con4item2 {
    width: 33.0729vw;
    height: 20.7292vw;
    right: 4vw;
    border-radius: 1.0417vw;
    border: 1px solid #83283b;
}

.con4top5thitem2top {
    width: 90.3937%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -4%;
    margin-left: 3%;
}

.con4top5thitem2top2nd {
    width: 42.2047%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    margin-left: 6%;
}

.con4top5thitem2top3rd {
    width: 62.8346%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    position: absolute;
    right: 0;
    overflow: hidden;
    bottom: 0;
}

.con04_5,
.con04_9,
.con04_13 {
    width: 11.9792vw;
    margin-right: 2vw;
}

.con04_17 {
    width: 14.7917vw;
}

/* .con4top5thitem2top3rd img {
    margin-bottom: -25%;
    margin-right: -47%;
} */


.con5_con {
    background: black;
    width: 98%;
    margin: 1.5% 0;
    border-radius: 1vw;
}

.con5_bd {
    height: 96%;
    width: 98.6%;
    border: 1px solid var(--mc);
    border-radius: 1vw;
}

.con5_top {
    margin-top: 5.4%;
    margin-left: 0%;
}

.con5_top3rd {}


.con7_prev:after,
.con7_next:after {
    content: unset !important;
}

.con7_prev {
    top: unset !important;
    width: 3.3vw !important;
    height: 3.3vw !important;
    border-radius: unset;
    overflow: hidden;
    left: 32% !important;
    bottom: 43%;
    transition: 0.4s background;
}

.con7_next {
    top: unset !important;
    width: 3.3vw !important;
    height: 3.3vw !important;
    border-radius: unset;
    overflow: hidden;
    right: 32% !important;
    bottom: 43%;
    transition: 0.4s background;
}


.con6_mid_swiper_4 {
    margin-top: 3%;
    margin-left: 0%;
    width: 150%;
}

.con6_mid_swiper_1_slide {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.con6_mid_swiper_1_slide_p_con4 {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.con6_mid_swiper_1_slide_p_con4ab {
    width: 22%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 73%;
    left: 88%;
    cursor: pointer;
    z-index: 2;
}

.vid01,
.vid02 {
    width: 100%;
    height: 100%;
    border-radius: 1.0417vw;
    object-fit: cover;
}

.vid01,
.vid02 {
    width: 44vw;
    object-fit: cover;
}

.con6_mid_swiper_4 {
    margin-top: 3%;
    margin-left: 0%;
    width: 150%;
    margin-bottom: 5.3%;
}


.con6 {
    background: url(/images/con06_7.jpg) no-repeat center / cover;
}

.con6_top {
    width: 13.9633%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5.4%;
    margin-left: 0%;
}

.con6_top2nd {
    margin-top: 1%;
    margin-left: 0%;
}

.con6_top4th {
    margin-top: 1.4%;
    margin-bottom: 5%;
}

.con6_top4thitem {
    width: 22.5722%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 1%;
}

.con6_txt {
    font-size: 1.0417vw;
    letter-spacing: -0.0521vw;
    color: #000000;
    font-weight: 400;
    font-family: 'Pretendard Variable';
    text-align: center;
    bottom: 1.3vw;
}

.con6ab {
    width: 100.787%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: 0;
}

.con6_top {
    width: 13.9633%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5.4%;
    margin-left: 0%;
}

.con6ab2 {
    width: 5.24934%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 3.7%;
    left: 1.1%;
}

.con6ab3 {
    width: 5.24934%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 3.7%;
    right: 1.1%;
}

.con2_item1sttopab2 {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: 20%;
    right: 21%;
}


.con2_item1sttopab2 {
    width: 20%;
    margin-top: 0%;
    margin-left: 0%;
    bottom: 20%;
    right: 21%;
}

.con7 {
    background: url(/images/con07_24.png) no-repeat center / cover;
}

.con7_light {
    width: 46.4042%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    animation: light 10s linear infinite;
}

.con6_mid_swiper_1_slide_p_con5 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.con6_mid_swiper_1_slide_p_con51 {
    width: 10.8333vw !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con6_mid_swiper_1_slide_p_con52 {
    width: 8.8021vw !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con6_mid_swiper_1_slide_p_con53 {
    width: 8.6458vw !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con6_mid_swiper_1_slide_p_con54 {
    width: 9.5833vw !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con6_mid_swiper_1_slide_p_con55 {
    width: 9.6875vw !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con7_top {
    margin-top: 5.5%;
    margin-left: 0%;
}

.con7_top2nd {}

.con7_top2ndab1 {
    width: 4.40945%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 33%;
    bottom: -18%;
}


.con7_top2ndab2 {
    width: 4.40945%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 33%;
    bottom: -18%;
}

.con6_mid_swiper_1_slide_p_con5ab {
    opacity: 0;
    width: 112.632%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con6_mid_swiper_1_slide_p_con5,
.con6_mid_swiper_1_slide_p_con5ab {
    transition: 0.3s all;
}

.con6_mid_swiper_1_slide_p_con5a {
    width: 54.7368%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con6_mid_swiper_1_slide.swiper-slide-next+.con6_mid_swiper_1_slide .con6_mid_swiper_1_slide_p_con5ab {
    opacity: 1;
    scale: 1.05;
}

.con6_mid_swiper_1_slide_p_con5 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    opacity: 0.4;

    border-right: 1px solid #8b702c;
}

.con6_mid_swiper_1_slide.swiper-slide-next+.con6_mid_swiper_1_slide .con6_mid_swiper_1_slide_p_con5 {
    opacity: 1;
}

.con6_mid_swiper_5 {
    margin-top: 0%;
    margin-left: 0%;
    background: #00000059;
    padding: 3.3% 0;
    margin-top: 3.4%;
    border: 1px solid #8b702c;
    opacity: 1 !important;
}

.con7_top3rd {
    width: 53.3333%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -6%;
    margin-left: 0%;
    margin-bottom: -4%;
}

.con7ab1 {
    width: 2.93963%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 5%;
    left: 10%;
}

.con7ab2 {
    width: 17.9003%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 3%;
    top: 12%;
}

.con7ab3 {
    width: 4.46194%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 0;
    top: 36%;
}

.con7ab4 {
    width: 10.7612%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 75%;
    left: 10%;
}

.con7ab5 {
    width: 23.0971%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 3%;
    top: 7%;
}

.con7ab6 {
    width: 6.14173%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 6%;
    top: 13%;
}

.con7ab7 {
    width: 2.20472%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 0;
    top: 44%;
}

.con7ab8 {
    width: 2.51968%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 12%;
    top: 66%;
}

.con7ab9 {
    width: 3.25459%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 6%;
    top: 86%;
}

.con7ab10 {
    width: 99.9475%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con8 {
    background: url(/images/con08_10.jpg) no-repeat center / cover;
}

.con8top {
    margin-top: 6.4%;
    margin-left: 0%;
}

.con8topab {
    width: 10.8136%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: 11%;
    left: 51.5%;
}

.con8_top3rditem {
    width: 39.8671%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    margin: 0.6%;
}

.con8_top3rd {
    width: 79% !important;
    margin-top: 2%;
    margin-bottom: 6.22%;
}

.con8ab {
    height: 100%;
    width: 1.8vw;
    left: 0;
}

.con8ab2 {
    right: 0 !important;
    left: unset;

}

.con8_top3rditemab {
    width: 12.8239%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con8_top3rditemab1 {
    bottom: 109%;
    left: 1%;
    animation: ddm 3s linear infinite;
}

.con8_top3rditemab2 {
    bottom: 121%;
    left: 17%;
    animation: ddm2 3s linear infinite;
}

.con8_top3rditemab3 {
    bottom: 115%;
    right: 15%;
    animation: ddm 3s linear infinite;
}

.con8_top3rditemab4 {
    bottom: 101%;
    right: -3%;
    animation: ddm2 3s linear infinite;
}

.con9 {
    background: url(/images/con10_10.jpg) no-repeat center / cover;
}

.con9_top {
    margin-top: 5.5%;
    margin-left: 0%;
}

.con9_top3rd {
    margin-top: 0.5%;
}

.con9_top4th {
    margin-top: 2.2%;
}

.con9_top4thitem1 {
    width: 8.18898%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    cursor: pointer;
}

.con9_top4thitem2 {
    width: 6.82415%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 1%;
    cursor: pointer;
}

.con9_top4thitemab {
    opacity: 0;
    transition: 0.3s all;
    width: 100%;
}

.con9_top4thitemon .con9_top4thitemab {
    opacity: 1;
}

.con9_txt {
    font-size: 1.1979vw;
    letter-spacing: -0.0521vw;
    color: #000000;
    font-weight: 400;
    font-family: 'Pretendard Variable';
    text-align: center;
}

.con9_top4thitemon .con9_txt {
    color: #ffffff;
}

.con9_top5th {
    margin-top: 2%;
    margin-left: 0%;
}

.con9_top5thitem {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    width: 65%;
    padding: 2% 0;
    border-radius: 1vw;
    transition: opacity 0.3s ease;
}

.con9_top5thitem2 {
    opacity: 0;
}

.con9_top5thab {
    cursor: pointer;
    width: 3.56955%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 12%;
}

.con9_top5thab2 {
    cursor: pointer;
    width: 3.56955%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 12%;
}

.con9_top5th2 {
    width: 37.3183%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -2%;
    margin-left: 2%;
}

.con9_top5th1 {
    width: 52.9079%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con9_top5th2ab {
    margin-top: 0%;
    margin-left: 0%;
    top: 51%;
}

.con9_txt5_1 {
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    color: #ffffff;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    right: 3vw;
    top: 7.5vw;
}

.con9_txt5_1 span {
    font-size: 1.3021vw;
    font-weight: 500;
}

.con9_txt5_2 {
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    color: #ffffff;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    right: 4.5vw;
    bottom: 4vw;

}

.con9_txt5_2 span {
    font-size: 1.3021vw;
    font-weight: 500;
}

.con9_txt5_3 {
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    color: #ffffff;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    left: 6vw;
    bottom: 3vw;
}

.con9_txt5_3 span {
    font-size: 1.3021vw;
    font-weight: 500;
}

.con9_txt5_4 {
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    color: #ffffff;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    left: 1.7vw;
    bottom: 9.5vw;
}

.con9_txt5_4 span {
    font-size: 1.3021vw;
    font-weight: 500;
}

.con9_txt5_5 {
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    color: #ffffff;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    left: 3.5vw;
    top: 6.5vw;
}

.con9_txt5_5 span {
    font-size: 1.3021vw;
    font-weight: 500;
}

.con9_txt5_6 {
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    color: #000000;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    left: 1.5vw;
    top: 0vw;
}

.con9_txt5_6 span {
    font-size: 1.3021vw;
    font-weight: 500;
}

.con9_txt5_7 {
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    color: #000000;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    left: 12.5vw;
    top: 0vw;
}

.con9_txt5_7 span {
    font-size: 1.3021vw;
    font-weight: 500;
}

.con9_txt5_8 {
    font-size: 1.3021vw;
    letter-spacing: -0.0521vw;
    color: #ffffff;
    font-weight: 800;
    font-family: 'Pretendard Variable';
    text-align: center;
    top: 11vw;
}

.con9_txt5_8 span {
    color: #83283B;
    background-color: #ffffff;
}

.con9_txt5_9 {
    font-size: 1.0417vw;
    letter-spacing: -0.0521vw;
    color: #ffffff;
    font-weight: 500;
    font-family: 'Pretendard Variable';
    text-align: center;
    bottom: 7.8vw;
}

.con9_txt5_1_2 {
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    color: #ffffff;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    right: 2.5vw;
    top: 7.5vw;
}

.con9_txt5_1_2 span {
    font-size: 1.3021vw;
    font-weight: 500;
}

.con9_txt5_2_2 {
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    color: #ffffff;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    right: 5.5vw;
    bottom: 3.5vw;

}

.con9_txt5_2_2 span {
    font-size: 1.3021vw;
    font-weight: 500;
}

.con9_txt5_3_2 {
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    color: #ffffff;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    left: 5vw;
    bottom: 3.5vw;
}

.con9_txt5_3_2 span {
    font-size: 1.3021vw;
    font-weight: 500;
}

.con9_txt5_4_2 {
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    color: #ffffff;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    left: 1.7vw;
    bottom: 11.5vw;
}

.con9_txt5_4_2 span {
    font-size: 1.3021vw;
    font-weight: 500;
}

.con9_txt5_5_2 {
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    color: #ffffff;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    left: 5.5vw;
    top: 4.5vw;
}

.con9_txt5_5_2 span {
    font-size: 1.3021vw;
    font-weight: 500;
}

.con9_txt5_7_2 {
    font-size: 1.0417vw;
    line-height: 1.5625vw;
    color: #000000;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    left: 12.5vw;
    top: 0vw;
}

.con9_txt5_7_2 span {
    font-size: 1.3021vw;
    font-weight: 500;
}

.con9_top5th1ab {
    font-size: 1.0417vw;
    letter-spacing: -0.0521vw;
    color: #ffffff;
    font-weight: bold;
    font-family: 'Pretendard Variable';
    text-align: center;
    bottom: 3.4%;
    right: 4%;
    animation: blk 1.5s linear infinite;
}

.con9_top5th1ab span {
    font-size: 1.3021vw;
}

.con9_top5th1ab2 {
    right: 4.5%;
}

.con9_top5th1ab2 {
    right: 4.5%;
}

.con9_txt2 {
    width: 56% !important;
    top: 0;
    left: 0;
}

.con9_txt2_title {
    font-size: 1.1458vw;
    letter-spacing: -0.1042vw;
    color: #000000;
    font-weight: 500;
    font-family: 'Pretendard Variable';
    text-align: center;
    margin: 0.7vw 0;
}

.con9_txt2_sub {
    font-size: 1.1458vw;
    letter-spacing: -0.0521vw;
    color: #000000;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    margin: 0.62vw 0;
}

.con9_txt3 {
    width: 44% !important;
    top: 0;
    right: 0;
}

.con9_txt3_title {
    font-size: 1.1458vw;
    letter-spacing: -0.1042vw;
    color: #000000;
    font-weight: 500;
    font-family: 'Pretendard Variable';
    text-align: center;
    margin: 0.7vw 0;
}

.con9_txt3_sub {
    font-size: 1.1458vw;
    letter-spacing: -0.0521vw;
    color: #000000;
    font-weight: 300;
    font-family: 'Pretendard Variable';
    text-align: center;
    margin: 0.62vw 0;
}

.con9_txt4 {
    font-size: 1.3021vw;
    letter-spacing: -0.0521vw;
    color: #ffffff;
    font-weight: bold;
    font-family: 'Pretendard Variable';
    text-align: center;
    left: 7.9vw;
    bottom: 0.8vw;
}

.con10_top {
    margin-top: 7.2%;
    margin-left: 0%;
}

.con10_top3rdab {
    width: 8.71391%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con10_top3rditem {
    width: 27.2966%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    flex-direction: column;
    background: white;
    border-radius: 1vw;
}

.con10_top3rd {
    margin-top: 2.5%;
    margin-left: 0%;
}

.gray {
    color: #5d5d5d;
}

.con10_top3rditem_top {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con10_top3rditem_top2nd {
    width: 9.80769%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12%;
    margin-left: 16%;
}

.con10_top3rditem_top2ndab {
    right: 78%;
    bottom: -22%;
}

.con10_top3rditem_top3rd {
    width: 80%;
    height: 1px;
    background: #5d5d5d;
    margin-top: 6%;
}

.con10_top3rditem_top4th {
    margin-top: 4%;
    margin-left: 0%;
    color: #000000;
}

.con10_top3rditem_top5th {
    width: 55.1923%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.2%;
    margin-left: 0%;
    margin-bottom: 7%;
}

.con10_top4thitem2 {
    margin-left: 11%;
}

.con10_top4th {
    width: 65.4593%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1%;
    margin-left: 0%;
    margin-bottom: 7%;
}

.con10_top3rdab2 {
    width: 9.23885%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 13%;
    z-index: 2;
    top: -14%;
}

.con11 {
    background: url(/images/con11_12.jpg) no-repeat center / cover;
}

.con11_top {
    margin-top: 7%;
    margin-left: 0%;
}

.con11_top3rd {
    margin-top: 0.5%;
    margin-left: 0%;
}

.con11_top4th_item {
    width: 15.5381%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    flex-direction: column;
    margin-left: unset !important;
    margin: 0 1% !important;
}

.con11_top4th_itemtop {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con11_top4th {
    margin-top: 3%;
}

.con11_top4th_itemtop2nd {
    width: 96.9595%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -4%;
    margin-left: 0%;
}

.con11_top4th_itemtop2ndab {
    width: 77.0035%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 10%;
}

.con11_top4th_itemtop2ndab2 {
    width: 64.8084%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 60%;
}

.con11_top4th_itemtop2ndab2nd {
    width: 83.2753%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 60%;
}

.con11_top5th {
    width: 68.5039%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3%;
    margin-left: 0%;
    margin-bottom: 6.6%;
}

.con11_top5th_txt {
    color: #fff;
    font-family: 'Pretendard';
    font-weight: 400;
    right: 0vw;
    bottom: -1.5vw;
    font-size: 0.9375vw;
}

.con11_top5thab {
    width: 12.4904%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 108%;
}

.con11_top5thab1 {
    left: 94%;
    top: 10%;
}

.con11_top5thab2 {
    left: 94%;
    top: 20%;
}

.con11_top5thab3 {
    left: 94%;
    top: 30%;
}

.con11_top5thab7 {
    width: 11.1111%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: -13vw;
    top: 4vw;
}

.con12 {
    background: url(/images/con12_15.jpg) no-repeat center / cover;
}

.con12_top {
    margin-top: 6%;
    margin-left: 0%;
}

.con12_top4th {
    margin-top: 3%;
    margin-bottom: 8.33%;
}

.con12_top4th1 {
    width: 37.7428%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    border-bottom-left-radius: 1vw;
    border-top-left-radius: 1vw;
    border-left: 1px solid var(--mc);
    border-top: 1px solid var(--mc);
    border-bottom: 1px solid var(--mc);
}

.con12_top4th2 {
    width: 37.8478%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    border-bottom-right-radius: 1vw;
    border-top-right-radius: 1vw;
    border-right: 1px solid var(--mc);
    border-top: 1px solid var(--mc);
    border-bottom: 1px solid var(--mc);
    overflow: hidden;
}

.con12_top4th1>img {
    border-radius: 1vw 0 0 1vw;
}

.con12_top4th2>img {
    border-radius: 0 1vw 1vw 0;
}

.con12_top4th1ab1 {
    width: 53.6857%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 7%;
}

.con12_top4th1ab2 {
    width: 18.2197%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 23%;
    left: 37%;
}

.con12_top4th1ab3 {
    width: 18.2197%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 20%;
    left: 59%;
}

.con12_top4th1ab4 {
    width: 18.2197%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 56%;
    left: 40%;
}

.con12_top4th1ab5 {
    width: 16.2726%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 49%;
    left: 61%;
}

.con12_top4th1ab6 {
    width: 15.0209%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 19%;
    top: 35%;
}

.con12_top4th1ab7 {
    width: 15.0209%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 71%;
    left: 25%;
}

.con12_top4th2ab {
    width: 53.5368%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 8%;
}

.con12_top4th2ab2 {
    width: 27.0458%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 16%;
}

.con12_top4th2ab22 {
    width: 27.0458%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 13%;
}

.con12_top4th2ab23 {
    width: 27.0458%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 68%;
}

.con12_top4th2ab2ab2 {
    width: 73.3333%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    z-index: 2;
    margin-left: 0%;
    left: 96%;
    top: 73%;
}

.con12ab {
    width: 26.1942%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: -28%;
    left: 0;
}

.con12ab2 {
    width: 26.1942%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 0;
    top: -28%;
}

.con13 {
    cursor: url("/images/con13_6.png") 16 16, auto;
    background: url(/images/con13_14.jpg) no-repeat center / cover;

}

.con13_top {
    margin-top: 6%;
    margin-left: 0%;
}

.con13_top2nd {
    margin-top: 1%;
    margin-left: 0%;
}

.con13_top2ndab {
    width: 3.51706%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 36.8%;
    bottom: 10%;
}

.con13_top2ndab2 {
    width: 3.51706%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 40.5%;
    bottom: 10%;
}

.con13_top4th {
    margin-top: 3.3%;
    margin-bottom: 7%;
}

.con13_top4thitem {
    width: 23.3854vw;
    height: 23.3854vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    /* clip-path: ellipse(44% 49% at 50% 50%); */
    border-radius: 50%;
    overflow: hidden;
    rotate: 21deg;
}

.con13_top2ndab3 {
    width: 5.5643%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 32%;
    top: -115%;
}

.con13_title span {
    letter-spacing: 0.2vw;
}

.con13_top4thitemab {
    margin-top: 0%;
    margin-left: 0%;
    /* rotate: -21deg; */
    width: 210%;
}

.con13_top4thitemab1_1 {
    left: -10.5vw;
    top: -2vw;
}

.con13_top4thitemab1_2 {
    left: -11vw;
    top: -2vw;
}

.con13_top4thitemab1_3 {
    left: -12.5vw;
    top: -0.5vw;
}

.con13_top4thitemab21 {
    width: 6.5625vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 8.2vw;
    top: 9.2vw;
}

.con13_top4thitemab22 {
    width: 11.7708vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 6.2vw;
    top: 9.2vw;
}

.con13_top4thitemab23 {
    width: 11.4063vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 6.2vw;
    top: 9.2vw;
}

.con13_top4thitemab2 {
    rotate: -21deg;
    transform: translateY(0);
}

.con13_top4thitem:hover .con13_top4thitemab2 {
    opacity: 0;
    transform: translateY(-20%);
}

.con13_top4thitemab {
    filter: brightness(0.4);
}

.con13_top4thitemab,
.con13_top4thitemab2 {
    transition: 0.3s all;
}

.con13_top4thitem:hover .con13_top4thitemab {
    filter: brightness(1);
}




.con13_top4thitem_on .con13_top4thitemab2 {
    opacity: 0;
    transform: translateY(-20%);
}

.con13_top4thitem_on .con13_top4thitemab {
    filter: brightness(1);
}

.con13_top4th {
    margin-top: 2.3%;
    margin-bottom: 6%;
}

.con13ab {
    width: 15.2231%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: -14%;
    right: 25%;
}

.con13ab2 {
    width: 9.71129%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 5%;
    opacity: 0.4 !important;
}

.con13ab3 {
    width: 9.71129%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 5%;
    opacity: 0.4 !important;
}

.con14_top5th {
    width: 44.1995%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con14_top {
    width: 16.4829%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4.4%;
    margin-left: 0%;
}

.con14_top2nd {
    margin-top: 1%;
    margin-left: 0%;
}


.con6_mid_swiper_32nd {
    margin-top: 0%;
    margin-left: 0%;
    pointer-events: none;
    height: 100%;
    top: 0;
    overflow: hidden;
    width: unset !important;
    z-index: 2;
    left: 0%;
    opacity: 0;
    transform: translateX(-31%);
}

.con6_mid_swiper_33rd {
    margin-top: 0%;
    margin-left: 0%;
    pointer-events: none;
    height: 100%;
    top: 0;
    overflow: hidden;
    z-index: 2;
    right: 0%;
    width: unset !important;
    opacity: 0;
    transform: translateX(31%);
}

.con14_top5th {
    margin-top: 0%;
    margin-left: 0%;
    margin-bottom: -13%;
}

.con6_mid_swiper_1_slide_p_con32nd {
    width: 70% !important;
}

.con14ab {
    width: 19.3727%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 1.7%;
}

.con14ab2 {
    width: 19.3727%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 1.7%;
}

.con14_top5thab2 {
    width: 107.838%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    animation: smoke 2s infinite;
    bottom: 15%;
    z-index: 2;
}

.con14_top5thab3 {
    width: 37.5297%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: 86%;
    z-index: 2;
    left: -4%;
    animation: ddm 3s linear infinite;
}

.con14_top5thab4 {
    width: 37.5297%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: -6%;
    top: 10%;
    z-index: 2;
    animation: ddm_m2 3s linear infinite;
}

.con14_top5thab5 {
    width: 37.5297%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    z-index: 2;
    top: 23%;
    left: 21%;
    animation: ddm 3s linear infinite;
}

.con14_top5thitem {
    width: 99.9923%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con15 {
    background: url(/images/con15_10.jpg) no-repeat center / cover;
}

.con15_top {
    width: 23.622%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 6%;
    margin-left: 0%;
}

.con15_top2nd {
    margin-top: 1%;
    margin-left: 0%;
}

.con15_top4th {
    margin-top: 0%;
    margin-left: 0%;
    text-align: center;
}

.con15_top3rdab {
    width: 12.1286%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5%;
    margin-left: -14.5%;
}

.con15_top5th {
    width: 75.5381%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3.2%;
    margin-left: 0%;
    margin-bottom: 6.3%;
}

.con15_top5th_item {
    height: 25%;
    border-bottom: 1px solid #ffffff;
}

.con15_top5th_item1 {
    border-radius: 1vw 1vw 0 0;
    top: 0;
}

.con15_top5th_item2 {
    top: 25%;
}

.con15_top5th_item3 {
    top: 50%;
}

.con15_top5th_item4 {
    border-radius: 0 0 1vw 1vw;
    bottom: 0%;
}

.con15_top5th_item_on {
    background: var(--mc);
    transition: 0.3s all;
}

.con15_top5th_item_leftab {
    transition: 0.3s all;
    transform: translateX(-50%);
    opacity: 0;
}

.con15_top5th_item_on .con15_top5th_item_leftab {
    transform: translateX(0%);
    opacity: 1;
}

.con15_top5th_item_left {
    margin-top: 0%;
    margin-left: 0%;
    width: 6%;
    font-size: 2.2vw;
    justify-content: flex-start;
    white-space: nowrap;
    left: 14%;
}

.con15_top5th_item_leftab {
    width: 72.093%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 100%;
}

.con15_top5th_item_right {
    margin-top: 0%;
    margin-left: 0%;
    right: 11%;
    font-size: 1.2vw;
}

.con15_top5thab {
    width: 33.3565%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    z-index: 2;
}

.con15_top5thabitem {
    width: 100.031%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    /* transition: opacity 0.5s; */
    opacity: 0;
}

.con15_top5thabitem_change {
    opacity: 1;
}

.con15ab {
    width: 4.46194%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 1.2%;
    top: 3%;
}

.con15ab2 {
    width: 4.46194%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 1.2%;
    top: 3%;
}

.con15ab3 {
    width: 4.46194%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 1.2%;
    bottom: 3%;
}

.con15ab4 {
    width: 4.46194%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 1.2%;
    bottom: 3%;
}

.time-pachi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}

/* 숫자가 들어가는 공통 동그라미 */
.circle {
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5vw;
    height: 5vw;
    min-width: 28px;
    min-height: 28px;
    max-width: 48px;
    max-height: 48px;
}

/* 휠: 안의 리스트가 위아래로 움직이고, 바깥에서 잘라줌 */
.wheel {
    overflow: hidden;
    /* 여기서 overflow hidden */
    position: relative;
}

/* 세로로 쌓여 있는 00~25, 00~59 리스트 */
.wheel-list {
    display: flex;
    flex-direction: column;
}

/* 각 숫자 칸의 높이 = 바깥 동그라미와 동일하게 */
.wheel-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5vw;
    min-height: 28px;
    max-height: 48px;
}

/* :, ~ 같이 움직이지 않는 기호용 */
.symbol-circle {
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5vw;
    height: 3.5vw;
    min-width: 22px;
    min-height: 22px;
    max-width: 40px;
    max-height: 40px;
}

.con16 {
    background: url(/images/con16_6.jpg) no-repeat center / cover;
}

.con17 {
    background: #f9f4f1;
}

.con17_top {
    margin-top: 2.2%;
    margin-left: 0%;
}

.con17_2nd {
    background: #f9f4f1;
    padding-bottom: 2%;
}

.con17_top4th {
    width: 43.0446%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.6%;
    margin-left: 0%;
    z-index: 10;
}

.con17_top4thab {
    margin-top: 0%;
    margin-left: 0%;
    width: 86%;
    bottom: unset;
    top: 8%;
}

.con17_top4thab1item {
    width: 100% !important;
}

.con17_top4thab2 {
    width: 21.8293%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 109%;
    top: 48%;
}

.con17_top4thab2abab {
    margin-top: 0%;
    margin-left: 0%;
    top: 166%;
    font-size: 3.9vw;
    font-weight: 700;
    left: -8%;
}

.con17_top4thab2ab {
    width: 59.2179%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 235%;
    right: -13%;
}

.con17_top4thab3 {
    width: 21.8293%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 109%;
    top: 48%;
}

.con17_top4thab3 .con17_top4thab2abab {
    left: 5%;
}

.con17_top4thab3ab {
    width: 31.8436%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 230%;
    /* left: 57%; */
    left: 66%;
}

.con17ab3 {
    width: 12.5984%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 28%;
    top: 30%;
}

/* .con17ab3 {
    width: 12.5984%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 59%;
    top: 30%;
    transform: rotate(90deg);
} */

.con17ab4 {
    width: 2.4147%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    z-index: 11;
    left: 36.7%;
    top: 40%;
}

/* .con17ab4 {
    width: 2.4147%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    z-index: 2;
    left: 65.7%;
    top: 53%;
    transform: rotate(90deg);
} */

.con17ab {
    width: 10.4987%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 14%;
    top: 13%;
}

.con17ab2 {
    width: 15.958%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 62%;
    left: 72%;
    z-index: 2;
}

.con17bt {
    bottom: 0;
    padding: 0.7% 0;
}



.con08_tab_wrap {
    gap: 1vw;
    margin-bottom: 3vw;
}

.con08_tab {
    width: 11.706%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1.2vw;
}

.con08_tab>img.rltv {
    opacity: 1;
    transition: all 0.3s;
}

.con08_tab img.absol {
    opacity: 0;
    transition: all 0.3s;
}

.con08_tab:hover {
    color: #C2A381;
}

.con08_tab:hover>img.rltv {
    opacity: 0;
}

.con08_tab:hover img.absol {
    opacity: 1;
}

.con08_tab.con08_change {
    color: #C2A381;
}

.con08_tab.con08_change>img.rltv {
    opacity: 0;
}

.con08_tab.con08_change img.absol {
    opacity: 1;
}

div.con08_menu {
    width: 70%;
    height: 35vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.con08_menu .swiper-slide {
    flex-direction: column;
}

.con08_menu_img {
    width: auto;
    height: 13vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1vw;
}

.con08_menu_img img {
    width: auto;
    height: 100%;
    object-fit: cover;
}

.con08_arr {
    width: 4.51444%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

.con08_arr.con08_change {
    z-index: 1;
    opacity: 1;
    pointer-events: all;
}

.con08_prev {
    left: 10%;
}

.con08_next {
    right: 10%;
}

.con08_menu {
    opacity: 0;
}

.con08_menu.con08_change {
    opacity: 1;
    z-index: 2;
}

.con08_tab {
    width: 6.706%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1.2vw;
}

.con08_tab.con08_change {
    color: white;
}

.con08_menu_img img {
    width: auto !important;
    height: 100%;
    object-fit: cover;
}

.con08_menu_img {
    width: auto;
    height: 14.011vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1vw;
}

.con08_menu_tt {
    margin-top: 0%;
    margin-left: 0%;
    font-family: var(--sf);
    text-align: center;
    font-size: 1.3vw;
    font-weight: 700;
}

.con08_menu_desc {
    margin-top: 0%;
    margin-left: 0%;
    text-align: center;
    font-size: 1vw;
    margin-top: 1%;
    font-family: var(--mf);
}

div.con08_menu {
    width: 70%;
    height: 44vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.con08_tab_wrap {
    gap: 1vw;
    margin-bottom: 3vw;
    margin-top: 3.6%;
}

.con18 {
    background: url(/images/con18_8.png) no-repeat center / cover;

}

.con18top {
    z-index: 5;
}

.con18topab {
    width: 2.86458%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 72%;
    right: 10%;
    z-index: -1;
}

.con18top2nd {
    width: 10.4987%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3%;
    margin-left: 0%;
}

.con18top3rd {
    margin-top: 1%;
    margin-left: 0%;
}

.con18top5th {
    margin-top: 2%;
    margin-bottom: 5.3%;
}

.con18top5thitem {
    width: 22.5722%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    margin: 0 1%;
}

.con18top5thitemab {
    opacity: 0;
    transition: 0.3s all;
}

.con18top5thitem_on .con18top5thitemab {
    opacity: 1;
}

.con18_txt {
    font-size: 1.0417vw;
    letter-spacing: -0.0521vw;
    color: #000000;
    font-weight: 400;
    font-family: 'Pretendard Variable';
    text-align: center;
    bottom: 1.3vw;
}

.con18top5thitem_on .con18_txt {
    color: #ffffff;
}

.con19 {
    background: url(/images/con19_12.jpg) no-repeat center / cover;
}

.con19top {
    margin-top: 6.5%;
    margin-left: 0%;
}

.con19top3rd {
    margin-bottom: 30vw;
}

.con19top4th_item1 {
    width: 33.0709%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -42%;
}

.con19top4th_item_1 {
    margin-top: -60vw;
}

.con19top4th_item_2 {
    margin-top: -45vw;
}

.con19top4th_item_3 {
    margin-top: -30vw;
}

.con19top4th_item_4 {
    margin-top: -15vw;
}

.con19top4th_item_5 {
    margin-top: 0vw;
}

.con19top4th_item {
    perspective: 1000px;
}

.flip-card-inner {
    width: 100%;
    /* transition: transform 0.6s; */
    transition: all 0.3s;
    transform-style: preserve-3d;
}

.flip-card-back {
    opacity: 1;
}

/* .con19top4th_item_1 .flip-card-back {
    opacity: 1;
} */

.flip-card-front,
.flip-card-back {
    /* position: absolute;
    width: 100%;
    height: 100%; */
    backface-visibility: hidden;
    /* 뒤집힐 때 뒷면 감춤 */
    /* display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white; */
}

.flip-card-front {
    /* background: #4CAF50; */
}

.flip-card-back {
    /* background: #2196F3; */
    transform: rotateY(180deg);
    /* 뒷면을 미리 반전 */
}

.con19top4th_item2 {
    width: 33.0709%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 42%;
}

.con19top4th {
    margin-top: 3.5%;
}

.con19top4th_item2 {
    width: 33.0709%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 42%;
    /* margin-bottom: -3%;
    margin-top: 16%; */
}

.con19top4th {
    margin-top: 3.5%;
    margin-bottom: 16.3%;
}

.con19ab {
    width: 1.20735%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 2%;
}

.con19ab2 {
    width: 1.20735%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    right: 2%;
}

.con19top4th_item1ab {
    /* opacity: 0; */

    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    transform: rotateY(180deg);
}

.con19top4thab {
    display: flex;
    width: 0.1vw;
    height: 38vw;
    background: white;
    justify-content: center;
    align-items: flex-start;
    top: -29vw;
}

.con19top4thabitem_main {
    width: 5.5vw;
    height: 100%;
    z-index: 10;
}

.con19top4thabitem {
    top: 4%;
    opacity: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}

.con19top4thabitem_on {
    opacity: 1;
}

.con19top4thaab1 {
    opacity: 1;
}

.con20top {
    margin-top: 5%;
    margin-left: 0%;
}

.con21 {
    background: url(/images/con21_7.jpg) no-repeat center / cover;
}

.con21top {
    margin-top: 10%;
    margin-left: 0%;
    width: 76%;
    font-size: 2.5vw;
}

.con21top2nd {
    margin-top: 0%;
    margin-left: 0%;
    width: 76%;
}

.con21top3rd {
    margin-top: 0.5%;
    margin-left: 0%;
    width: 76%;
}

.con21top4th {
    width: 41.3648%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4%;
    margin-left: -46%;
    margin-bottom: -17.9%;
}

.con21top4th>img {
    animation: rotate_image 10s linear infinite;
}

.con20ab2 {
    width: 100.787%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: 0;
}

.con21ab {
    width: 100.787%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 0;
}

.con21abab {
    width: 2.86458%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 9%;
    top: 95%;
}

.con21ab2 {
    bottom: 0;
    width: 100.787%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}


















.form {
    margin-top: 2%;
    width: 46%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid white;
    padding-top: 10vw;
    background: white;
    z-index: 1;
    margin-bottom: 7%;
}

.form_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 75%;
    padding-bottom: 0%;
    padding-left: 3%;
    padding-top: 1%;
    margin-top: 1%;
    border-bottom: 1px solid black;
}

.form_agree {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 78%;
    margin-top: 5%;
    margin-bottom: 4%;
}

.form_row_label {
    font-family: Pretendard-regular;
    color: black;
    white-space: nowrap;
    font-size: 1.2vw;
}

.form_row_imput {
    width: 70%;
    height: 2.8vw;
    background: transparent;
    border: none;
    font-size: 1.2vw;
    font-family: 'Pretendard-Regular';
    outline: none;
    cursor: pointer;
}

.form_agree_span {
    font-size: 1.1vw;
    font-family: Pretendard-regular;
    color: black;
}

.form_agree_check {
    margin-right: 2%;
    width: 1vw;
    height: 1vw;
    overflow: hidden;
    outline: 0;
    background: #f2f2f2;
    color: transparent;
    border: none;
    appearance: none;
}

.form_agree_check:checked {
    background: #f2f2f2;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;

}

.form_agree_check:checked::after {
    content: "";
    width: 1vw;
    height: 1vw;
    position: absolute;
    background: #bf2121;
    color: unset !important;
}

.form_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FF4206;
    padding: 1.5%;
    width: 48%;
    color: white;
    margin-bottom: 5%;
    font-size: 1.6vw;
    font-family: GmarketSansBold;
    border-radius: 0;
    padding-top: 2.5%;
    padding-bottom: 2%;
    cursor: pointer;
}

.form_row_imput_radio {
    margin-right: 1%;
    width: 1.5vw;
    height: 1.5vw;
    overflow: hidden;
    outline: 0;
    background: #ffffff;
    color: white;
    border: none;
    appearance: none;
    border-radius: 50%;
    margin-right: 20%;
    left: 3%;
    border: 1px solid black;
}

.form_row>span {
    font-size: 1.3vw;
    margin-right: -18%;
    color: black;
    font-family: GmarketSansMedium !important;
}

.form_agree_span {
    font-family: GmarketSansMedium !important;

}

.form_row_imput_radio_1 {
    margin-right: -6%;
}

.form_row_imput_text {
    padding-left: 3%;
    box-sizing: border-box;
}

.form_row_radio {
    padding-top: 2%;
    padding-bottom: 2%;
}

.form_row_imput_radio {
    display: flex;
    justify-content: center;
    align-items: center;
}

.form_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #bf2121;
    padding: 1.5%;
    width: 48%;
    color: white;
    margin-bottom: 5%;
    font-size: 1.6vw;
    font-family: pretendard-bold;
    border-radius: 0;
    padding-top: 2.5%;
    padding-bottom: 2%;
    cursor: pointer;
}

.form {
    margin-top: 2%;
    width: 46%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid transparent;
    padding-top: 1.7%;
    background: transparent;
    z-index: 1;
    margin-bottom: 7%;
    right: 20%;
}

.form_row_label {
    font-family: Pretendard-regular;
    color: white;
    white-space: nowrap;
    font-size: 1.2vw;
}

.form_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 75%;
    padding-bottom: 0%;
    padding-left: 3%;
    padding-top: 1%;
    margin-top: 1%;
    border-bottom: 1px solid white;
}

.form_row>span {
    font-size: 1.3vw;
    margin-right: -18%;
    color: white;
}

.form_agree_span {
    font-size: 1.1vw;
    font-family: Pretendard-regular;
    color: white;
}

.form_agree_check:checked::after {
    content: "";
    width: 0.8vw;
    height: 0.8vw;
    position: absolute;
    background: #bf2121;
    color: unset !important;
}

.form_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #bf2121;
    padding: 1.5%;
    width: 75%;
    color: white;
    margin-bottom: 5%;
    font-size: 1.6vw;
    font-family: pretendard-bold;
    border-radius: 0;
    padding-top: 2.5%;
    padding-bottom: 2%;
    cursor: pointer;
}

.form {
    margin-top: 2%;
    width: 46%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid transparent;
    padding-top: 1.7%;
    background: transparent;
    z-index: 1;
    margin-bottom: 7%;
    right: 3%;
    top: 15%;
}

.form_row_radio {
    padding-top: 2%;
    padding-bottom: 2%;
}

.form_agree {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 78%;
    margin-top: 5%;
    margin-bottom: 4%;
}

.form_row_label {
    font-family: Pretendard-regular;
    color: white;
    white-space: nowrap;
    font-size: 1.2vw;
    width: 22% !important;
}

.form_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    padding: 1.5%;
    width: 33%;
    color: white;
    position: relative !important;
    margin-bottom: 17%;
    font-size: 1.6vw;
    font-family: pretendard-bold;
    border-radius: 0;
    padding-top: 0.5%;
    padding-bottom: 2%;
    cursor: pointer;
}

.form {
    margin-top: 2%;
    width: 42%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid transparent;
    padding-top: 1.7%;
    background: transparent;
    z-index: 1;
    margin-bottom: 7%;
    right: 7%;
    top: 13%;
}

.form_row {
    border-bottom: unset;
}



.form_row_imput_radio {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fe0908;
    background: transparent;
}

.form_agree_check {
    margin-right: 2%;
    width: 1vw;
    height: 1vw;
    overflow: hidden;
    outline: 0;
    background: #f2f2f2;
    color: transparent;
    border: none;
    appearance: none;
    border: 1px solid #fe0908;
    background: transparent;
}

.form_agree_check:checked {
    background: transparent;
    border: 1px solid #fe0908;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form_agree_check:checked::after {
    content: "";
    width: 0.8vw;
    height: 0.8vw;
    position: absolute;
    background: #fe0908;
    color: unset !important;
}


.form_row {
    border-bottom: 1px solid white !important;
}

.form_row_imput_radio {
    border: 1px solid #a84e1d;
    background: transparent;
}


.form_agree_check {
    border: 1px solid #a84e1d;
}


.form {
    margin-top: 2%;
    width: 42%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid transparent;
    padding-top: 1.7%;
    background: transparent;
    z-index: 1;
    margin-bottom: 7%;
    right: 6%;
    top: 28%;
}

.form_agree_check:checked {
    border: 1px solid #a84e1d;
}

.form_row>span {
    font-family: Pretendard-regular !important;
}

.form {
    margin-top: 2%;
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid transparent;
    padding-top: 1.7%;
    background: white;
    z-index: 1;
    margin-bottom: 7%;
    right: 13%;
    top: 7%;
}

.form_row_label {
    font-family: Pretendard-regular;
    color: black;
    white-space: nowrap;
    font-size: 1.2vw;
    width: 22% !important;
}

.form_row_imput_radio {
    border: 1px solid black;
    background: transparent;
}



.form_row {
    border-bottom: 1px solid black !important;
}

.form_agree {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 78%;
    margin-top: 5%;
    margin-bottom: 4%;
}

.form_agree_span {
    font-size: 1vw;
    font-family: Pretendard-regular;
    color: black;
}

.form_agree_check {
    border: 1px solid #002c46;
}

.form_agree_check:checked::after {
    content: "";
    width: 0.8vw;
    height: 0.8vw;
    position: absolute;
    background: #002c46;
    color: unset !important;
}

.form_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #002c46;
    padding: 1.5%;
    width: 76%;
    color: white;
    position: relative !important;
    margin-bottom: 17%;
    font-size: 1.6vw;
    font-family: pretendard-bold;
    border-radius: 0;
    padding-top: 0.5%;
    padding-bottom: 2%;
    cursor: pointer;
    text-align: center;
}

.form_agree_check:checked {
    border: 1px solid #002c46;
}

.form_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #002c46;
    padding: 1.5%;
    width: 76%;
    color: white;
    position: relative !important;
    margin-bottom: 3%;
    font-size: 1.6vw;
    font-family: pretendard-bold;
    border-radius: 0;
    padding-top: 1.5%;
    padding-bottom: 2%;
    cursor: pointer;
    text-align: center;
}

.form_row>span {
    font-size: 1.3vw;
    margin-right: -18%;
    color: black;
}

.form_row_radio {
    padding-top: 2%;
    padding-bottom: 2%;
    justify-content: flex-start;
}

.form_row_imput_radio_1 {
    margin-right: 0;
}

.form_row>span {
    font-size: 1.1vw;
    margin-right: 0;
    color: black;
    white-space: nowrap;
}

.form_row>span {
    margin-right: 3% !important;
    margin-left: 3%;
}

.form_row_imput_radio {
    margin-right: 0;
}

.form_submit {
    background: transparent;
}

.form_agree_check {
    border: 1px solid black;
    cursor: pointer;
}

.form_agree_check:checked::after {
    content: "";
    width: 0.8vw;
    height: 0.8vw;
    position: absolute;
    background: black;
    color: unset !important;
}

.form_agree_check:checked {
    border: 1px solid black;
}

.form_agree_span {
    font-size: 1vw;
    font-family: Pretendard-regular !important;
    color: black;
    cursor: pointer;
}

.form_row_label {
    font-family: GmarketSansMedium !important;
}

.form_row_label_required::after {
    content: '*';
    font-family: Pretendard-regular;
    color: #cb1f39;
    white-space: nowrap;
    font-size: 1.1vw;
    position: absolute;
    right: 100%;
    width: 0%;
    bottom: 40%;
}

.form_row_label {
    width: 37% !important;
}


.form {
    margin-top: 2%;
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid transparent;
    padding-top: 1.7%;
    background: transparent;
    z-index: 1;
    margin-bottom: 7%;
    right: 13%;
    top: 7%;
}


.form {
    margin-top: 2%;
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid transparent;
    padding-top: 2.7%;
    background: transparent;
    z-index: 1;
    margin-bottom: 7%;
    right: 15%;
    top: 16%;
}

.form_row_label_3lettters {
    letter-spacing: 1.5vw;
}

.form_row_label_4lettters {
    letter-spacing: 0.67vw;
}

.form {
    background: white;
    top: 3%;
    left: 59%;
    width: 32%;
}


.form_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #002c46;
    padding: 1.5%;
    width: 100%;
    color: white;
    position: relative !important;
    margin-bottom: 0;
    font-size: 1.6vw;
    font-family: pretendard-bold;
    border-radius: 0;
    padding-top: 1.5%;
    padding-bottom: 0;
    cursor: pointer;
    text-align: center;
}

.form_row>span {
    margin-right: 3% !important;
    margin-left: 3%;
    display: none;
}

.form_row_imput_radio {
    width: 27%;
    border-radius: unset;
    height: 2vw;
    border: unset;
    background: #fffced;
}

.form_row_imput_radio_2 {
    margin-left: 1%;
}

.form_row_imput_radio_1::before {
    content: '유';
    font-family: GmarketSansMedium;
    position: absolute;
    color: black;
    font-size: 1vw;
}

.form_row_imput_radio_2::before {
    content: '무';
    font-family: GmarketSansMedium;
    position: absolute;
    color: black;
    font-size: 1vw;
}

.form_row_imput_radio:checked {
    background: #f4a81c;
}

.form_agree_check:checked::after {
    background: #f4a81c;
}


.form {
    background: white;
    top: 3%;
    left: unset;
    width: 32%;
    position: relative !important;
    margin: 0;
    transform: unset;
    right: unset;
    margin-top: 2%;
    margin-bottom: 6%;
}

.form_row {
    border-bottom: unset;
}

.form_row_imput_text {
    padding-left: 3%;
    box-sizing: border-box;
    background: #80808026;
    border-radius: 0.5vw;
}

.form_row_imput_radio {
    width: 34%;
    border-radius: unset;
    height: 2.8vw;
    border: unset;
    background: #fffced;
    border-radius: 0.5vw;
}

.form_row_imput_radio:checked {
    background: var(--mc);
}

.form_row_imput_radio {
    width: 34%;
    border-radius: unset;
    height: 2.8vw;
    border: unset;
    background: #80808026;
    border-radius: 0.5vw;
}

.form_row_imput_radio:checked::before {
    color: white;
}

.form_row {
    border-bottom: unset !important;
}

.form_agree_check:checked::after {
    background: var(--mc);
}

.form_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    background: unset;
    padding: 1.5%;
    width: 71%;
    color: white;
    position: relative !important;
    margin-bottom: 0;
    font-size: 1.6vw;
    font-family: pretendard-bold;
    border-radius: 0;
    padding-top: 1.5%;
    padding-bottom: 0;
    cursor: pointer;
    text-align: center;
    margin-top: -3%;
    margin-bottom: 5%;
}

.form {
    border-radius: 1vw;
}

.form_agree {
    justify-content: center;
    align-items: center;
}

.form {
    border-radius: unset;
    border: 1px solid var(--mc);
    width: 37%;
    top: 10%;
    position: absolute !important;
    right: 12%;
}

.form_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    background: unset;
    padding: 0;
    width: 100%;
    height: 3.5vw;
    background: var(--mc);
    color: white;
    position: relative !important;
    margin-bottom: 0;
    font-size: 1.6vw;
    font-family: pretendard-bold;
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
    cursor: pointer;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    top: 104%;
    position: absolute !important;
}

.form_row_imput_text {
    padding-left: 3%;
    box-sizing: border-box;
    border: 1px solid #80808026;
    border-radius: 0.5vw;
    background: white;
}

.form_agree {
    display: flex;
    align-items: center;
    width: 78%;
    margin-top: 4%;
    margin-bottom: 8%;
}


.form {
    border-radius: 1vw;
}

.form_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    background: unset;
    padding: 0;
    width: 100%;
    height: 3.5vw;
    background: var(--mc);
    color: white;
    position: relative !important;
    margin-bottom: 0;
    font-size: 1.6vw;
    font-family: var(--sf);
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
    cursor: pointer;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 400;
    top: 104%;
    position: relative !important;
    width: 85%;
    border-radius: 1vw;
    margin-bottom: 10%;
}

.form_agree {
    display: flex;
    align-items: center;
    width: 78%;
    margin-top: 8%;
    margin-bottom: 5%;
    justify-content: flex-end;
}

.form_row_label {
    font-family: var(--sf) !important;
}

.form_row_imput_radio::before {
    font-family: var(--sf) !important;
}

.con21top4thab2 {
    width: 21.1929%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: 84%;
    left: 64%;
}

.con21top4thab3 {
    width: 5.20305%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: 88%;
    right: 20%;
}

.con21top4thab {
    width: 118.528%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    z-index: 4;
    animation: smoke 2s infinite;
    bottom: 20%;
}

.con10_top4thab {
    width: 17.0008%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    left: 54.8%;
    top: 37%;
}

.con10_top4thab>img {
    animation: blk 1.5s linear infinite;
}

.con10_top4thabab {
    width: 98.1132%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
}


/* 레이아웃 */
.time-widget-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px 0;
}

.slot-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
}

/* 숫자 들어가는 원형 박스 */
.digit-box {
    width: 1.6em;
    height: 1.6em;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
    /* 넘치는 숫자 숨김 */
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    /* 텍스트 정렬 핵심 */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* strip이 위에서부터 내려오도록 */
}

/* 움직이는 숫자 띠 */
.digit-strip {
    display: flex;
    flex-direction: column;
    will-change: transform;
    /* 초기에는 transition 없이, JS로 이동시킬 때만 transition 적용 */
}

/* 숫자 하나하나의 스타일 */
.digit-strip span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.6em;
    /* digit-box 높이와 100% 일치시켜야 함 */
    width: 100%;
    line-height: 1;
    /* 높이 왜곡 방지 */
}

/* 콜론(:)과 물결(~) */
.separator {
    color: #333;
    /* 잘 보이게 일단 어두운 색, 필요시 #fff로 변경 */
    font-size: 0.8em;
    padding: 0 0.1em;
    display: flex;
    align-items: center;
    height: 1.6em;
}

.separator {
    color: white;
    font-size: 0.8em;
    padding: 0 0.1em;
    display: flex;
    align-items: center;
    height: 1.6em;
}


.digit-box {
    width: 3.3vw;
    height: 4vw;
    background-color: #fff;
    border-radius: 2vw;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-weight: 600;
}

.time-widget-container {
    margin-top: 5%;
    margin-left: 0%;
}

.separator {
    color: white;
    font-size: 0.8em;
    padding: 0 0.1em;
    display: flex;
    align-items: center;
    height: 1.6em;
    font-weight: 400;
}

.con16_top {
    width: 100.787%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -11%;
    margin-left: 0%;
}

.con16_top_img {
    width: 43.4583vw !important;
    bottom: -9vw;
    right: 28.5vw;
    opacity: 0;
}

.con16_top_img_change {
    opacity: 1;
}

.con16_topabitem {
    width: 61.6146%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 26%;
    rotate: 0deg;
    filter: brightness(0.3);
    transition: 0.5s all;
}


.con16_topab {
    width: 27.9167%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    top: 62%;
}


.con16_topab1_on.con16_topab1 {
    filter: brightness(1);
}

.con16_topab1_on.con16_topab2 {
    rotate: 70deg;
}

.con16_topab1_on.con16_topab3 {
    rotate: -120deg;

}

.con16_topab1_on.con16_topab4 {
    rotate: -70deg;

}




.con16_topab2_on.con16_topab1 {
    rotate: -70deg;

}

.con16_topab2_on.con16_topab2 {
    filter: brightness(1);

}

.con16_topab2_on.con16_topab3 {
    rotate: 70deg;


}

.con16_topab2_on.con16_topab4 {
    rotate: -120deg;

}



.con16_topab3_on.con16_topab1 {
    rotate: -120deg;
}

.con16_topab3_on.con16_topab2 {
    rotate: -70deg;
}

.con16_topab3_on.con16_topab3 {
    filter: brightness(1);

}

.con16_topab3_on.con16_topab4 {
    rotate: 70deg;

}



.con16_topab4_on.con16_topab1 {
    rotate: 70deg;
}

.con16_topab4_on.con16_topab2 {
    rotate: -120deg;
}

.con16_topab4_on.con16_topab3 {
    rotate: -70deg;

}

.con16_topab4_on.con16_topab4 {
    filter: brightness(1);
}

.con17bt {
    width: 100.787%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0%;
    margin-left: 0%;
    bottom: -12%;
}

.con17_slide {
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: var(--mc);
    padding: 0.8vw 0;
}



.separator.tilde {
    margin: 0 0.3em;
}






/* map */
.map_mid_map_search_top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.map_mid_map_search_top>div {
    color: #000;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 4%;
    padding-bottom: 3%;
    font-size: 1vw;
    font-weight: 500;
    cursor: pointer;
    background-color: #fff;
}

.on2 {
    background: #000 !important;
    color: white !important;
    font-weight: 500 !important;
}

.off2 {
    font-weight: 500 !important;
}

.map_mid_map_search_mid {
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #83283B;
    box-sizing: border-box;
}

.map_mid_map_search_mid_title {
    font-family: var(--sf);
    font-size: 1.2vw;
    font-weight: 700;
    margin-bottom: 0.4vw;
}

.map_mid_map_search_mid input {
    appearance: none;
    border: none;
    outline: none;
    width: 86.7403%;
    height: 2.3vw;
    padding-left: 9%;
    font-weight: 400;
    font-size: 1vw;
    border-radius: 0vw;
    box-sizing: border-box;
}

.map_sido_wrap {
    width: 86.7403%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5vw;
}

.map_mid_map_search_mid input::placeholder {
    color: #00000054;
}

/* 시도 */
.form-control {
    width: 48%;
    height: 2.3vw;
    font-family: 'pretendard Variable';
    font-size: 0.9vw;
}


.map_search_left_img {
    width: 27.942%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0%;
    top: 50%;
    transform: translateY(-50%);
}

.map_mid_map_search_bottom {
    overflow-y: scroll;
    height: 69%;
    width: 100%;
    box-sizing: border-box;
    /* margin: auto; */
    padding: 0vw 0;
}

.map_mid_map_search_item_address {
    width: 85%;
    margin-top: 4%;
    margin-bottom: 4%;
}

.map_mid_map_search_item_tel {
    width: 85%;
}

.map {
    width: 100%;
    height: 30.3125vw;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 1.5vw;
    overflow: hidden !important;
    border: 1px solid var(--mc);
}

.map_mid_2nd {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 78%;
    font-family: 'pretendard Variable';
    /* border: 1px solid #000; */
    margin-bottom: 10vw;
    margin-top: 1vw;
    border-radius: 1.5vw
}

.map_search {
    width: 0.9375vw !important;
    right: 11%;
    bottom: 15%;
    cursor: pointer;
}

.con7_bottom_2 {
    width: 26.4943%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.map_mid_map_search_item_title {
    font-size: 1vw;
    font-weight: 700;
    width: 85%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.map_mid_map_search_item {
    width: 77%;
    margin: 0% auto;
    border-bottom: 1px solid #00000054;
    padding: 10% 0%;
    font-size: 0.8vw;
    font-weight: 400;
    box-sizing: border-box;
    position: relative;
    color: #000;
    /* padding-left: 6vw; */

}

.map_mid_map_search {
    width: 28.2084%;
    background: white;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    left: 0%;
    top: 0%;
    /* border-right: 1px solid #9c151c4d; */
    /* border-radius: 0vw 1vw 1vw 0vw; */
    /* border-right: 1px solid black; */
    box-sizing: border-box;
    /* border-radius: 0.5vw 0vw 0vw 0.5vw; */
    border-top-left-radius: 1.5vw;
    border-bottom-left-radius: 1.5vw;
    border: 1px solid var(--mc);
}

.map_mid_map_search_bottom::-webkit-scrollbar {
    display: none;
}

.map_plus {
    width: 8.255%;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0%;
    bottom: 27%;
    cursor: pointer;
}

.sido1 {
    width: 16%;
    height: 48%;
    border: none;
    border-right: 1px solid #b5b5b5;
    outline: none;
}

.map_link {
    width: 48%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1vw;
}

/* .map_mid_map_search_item_plus_con {
    top: 1vw;
    right: 0%;
    color: #000;
    padding: 0.1vw 0.6vw;
    border: 0.15vw solid #000;
    border-radius: 50vw;
    font-weight: 600;
    cursor: pointer;
} */



/* map 추가 css */