* {
    padding: 0;
    margin: 0;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "pretendard";

}

.wrap {
    width: 1820px;
    margin: 0 auto;
    background: rgb(234, 234, 234);
    overflow-x: hidden;
}

/*1*/
.visual {
    background: rgb(234, 234, 234);
    width: 910px;
    height: 60px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    background: rgb(234, 234, 234);
    width: 500px;
    height: 60px;
    font-family: "droid sans fallback";
    cursor: pointer;
    /* 클릭 가능한 느낌 */
    text-decoration: none;
}

.logo img {
    transform: translate(160px, 0px);
    width: 50px;
}

.logo span {
    font-size: 50px;
    margin-left: 174px;
    text-decoration: none;
    color: rgb(229 0 25);
}



/*2*/
.menu {
    background: rgb(234, 234, 234);
    width: 600px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* ⬅️ 이거 추가 */
    gap: 10px;
    position: relative;
    overflow: visible;
    font-size: 20px;
    transform: translate(0px, 0px);
}

.menu-item {
    position: relative;
    padding: 10px 5px;
}

.menu-1 {
    color: rgb(0, 0, 0);
    text-decoration: none;
    padding: 7px;
    display: block;
    position: relative;
    display: inline-block;
    min-width: 100px;
    /* 항목 폭 고정! */
    transition: font-weight 0.3s ease;
    /* 부드럽게 */
}

.menu-1::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* ⬅️ 좌우 기준 잡기 */
    bottom: -5px;
    /* 글자와 밑줄 사이 간격 조절 */
    width: 100%;
    height: 2px;
    /* 밑줄 두께 */
    background-color: rgb(186, 43, 43);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.menu-1:hover::after {
    transform: scaleX(1);
}

.menu-1:hover {
    cursor: pointer;
    font-weight: 600;
    /* 마우스 올리면 굵게 */
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgb(0, 0, 0);
    width: 150px;
    height: 50px;
    z-index: 100;
    flex-direction: column;
    padding: 10px;

}

.submenu a {
    margin-left: 10px;
    margin-top: 10px;
    text-decoration: none;
    color: white;
}

.menu-item:hover .submenu {
    display: flex;

}

.submenu a:hover {
    color: red;
    cursor: pointer;
    font-weight: 500;
}

/*3*/
.visual-3 {
    width: 1280px;
    height: 540px;
    margin: 0 auto;
    background-color: #1e1e1e;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kt-robot-wrapper {
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background: #fff;
    border-radius: 12px;
    border: 4px solid #2c2323;
    box-sizing: border-box;
    width: 1000px;
    margin: auto;
    font-family: Pretendard, sans-serif;
    position: relative;
    margin-top: 55px;
}

.kt-robot-textbox {
    text-align: left;
}

.kt-robot-title {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 16px;
    gap: 0px;
}

.kt-robot-title strong {
    font-size: 60px;
    font-weight: 800;
    display: block;
}

.kt-robot-tags {
    display: flex;
    gap: 0px;
    margin-bottom: 12px;
}

.kt-robot-tag {
    background: #e6b8af;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 25px;
}

.kt-robot-tag1 {
    background: #de7c68;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 25px;
}


.kt-robot-tag.up {
    background: #b9452c;
    width: 165px;
}

.kt-robot-sub {
    font-size: 20px;
    color: #999;
    margin-top: 8px;
    text-align: right;
    transform: translate(-40px, 0px);
}

.kt-robot-imagebox {
    position: relative;
    width: 200px;
    height: auto;
}

.kt-robot-circle {
    position: absolute;
    background: #b9452c;
    width: 118%;
    height: 79%;
    border-radius: 50%;
    z-index: 1;
    transform: translate(-18px, 42px);
}

.kt-robot-image {
    position: relative;
    z-index: 2;
    width: 181%;
    height: auto;
    transform: translate(-84px, 34px);
}


/*4*/
.visual-4 {
    width: 1280px;
    height: 667px;
    margin: 0 auto;
    background-color: #1e1e1e;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

._4-kt-features {

    color: #fff;
    padding: 30px 20px;
    font-family: 'Pretendard', sans-serif;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    text-align: center;
    font-weight: 600;
    box-sizing: border-box;
    border-radius: 20px;
}

._4-title {
    font-size: 35px;
    color: #c0c0c0;
    margin-bottom: 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    word-spacing: -2px;
    gap: 6px;
}



._4-title .highlight {
    color: #ff5454;
    font-weight: 600;
    /* 강조 부분만 살짝 굵게 */
}

._4-title b {
    font-weight: 550;
    /* 고품질 다기능 → 기본 bold보다 덜 굵게 */
}


._4-title span {
    color: #ff5454;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

._4-item-all {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 185px;
}

._4-up {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding-bottom: 5px;
}

._4-imgimg {
    display: flex;
    flex-direction: row;
    gap: 177px;
}

._4-kt-item-img img {
    height: auto;
    width: 150px;
}

._4-kt-item-img {
    height: auto;
    width: 163px;
    padding-bottom: 50px;
    padding-top: 10px;
}


._4-imgimg2 {
    display: flex;
    flex-direction: row;
    gap: 177px;
}

._4-kt-item-img2 img {
    height: auto;
    width: 135px;
}

._4-kt-item-img2 {
    height: auto;
    width: 163px;
    padding-bottom: 50px;
    padding-top: 10px;
}

._4-down {
    display: flex;
    flex-direction: row;
    gap: 20px;
}


.dd7293 {
    transform: translate(40px, 20px);
}

.dd7294 {
    transform: translate(0px, 3px);
}

.dd7295 {
    transform: translate(-40px, 0px);
}

.dd7293-2 {
    transform: translate(53px, 33px);
}

.dd7294-2 {
    transform: translate(0px, 3px);
}

.dd7295-2 {
    transform: translate(-46px, 29px);
}

._4-kt-item {
    background-color: #a63520;
    border-radius: 999px;
    padding: 10px 15px;
    font-size: 28px;
    color: #000000;
    display: flex;
    width: 270px;
    align-items: center;
    height: 65px;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
    font-weight: 300;

}

._4-kt-item img {
    max-height: 40px;
}



._4-icon-label {
    font-size: 14px;
    margin-top: 5px;
    color: #ff6a50;
}

._4-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

._4-icon svg {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
    fill: #d7462b;
}

/*5*/
.visual-5 {
    width: 1280px;
    margin: 0 auto;
    background: #1e1e1e;
    box-sizing: border-box;

}

.robot-section {
    background: #1e1e1e;
    background: linear-gradient(to bottom, #1e1e1e 48%, white 0%);
    color: white;
    text-align: center;
    padding: 40px 20px;
}

.robot-section h2 {
    font-size: 45px;
    font-weight: 300;
    margin-bottom: 30px;
}

.robot-cards {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.robot-card {
    background: white;
    color: #1c1c1c;
    border-radius: 24px;
    overflow: hidden;
    width: 320px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.robot-card img {
    width: 100%;
    height: 290px;
    object-fit: cover;
    display: block;
}

.robot-card p {
    padding: 16px 12px;
    font-size: 21px;
    line-height: 1.4;
}

/*7*/
.visual-7 {
    width: 1280px;
    margin: 0 auto;
    background: #ffffff;
    box-sizing: border-box;
}

._6-markerrr {
    display: flex;
    justify-content: flex-end;
}

._6-robot-section {
    padding: 20px;
    box-sizing: border-box;
}

._6-text-box {
    text-align: center;
    margin-bottom: 30px;

}

._6-headline {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.5;
    text-align: right;
    transform: translate(-122px, 20px);
}

._6-markerr {
    display: flex;
    flex-direction: column
}

._6-marker-box {
    background: #fff;
    border: 2px solid #ddd;
    display: inline-flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 12px;
    margin: 15px auto;
    margin-left: 30px;
    gap: 10px;
    font-size: 26px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

._6-marker-icon {
    font-size: 20px;
}

._6-speech-bubble {
    background: #222;
    color: #fff;
    display: inline-block;
    padding: 12px 15px;
    border-radius: 8px;
    text-align: left;
    position: relative;
    max-width: 373px;
    margin-left: 74px;
    font-size: 21px;
    margin-left: 31px;
}

._6-img-box {
    display: flex;
}

._6-speech-bubble::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 100%;
    border-width: 8px;
    border-style: solid;
    border-color: #222 transparent transparent transparent;
}

._6-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 20px;
    margin-left: -95px;
}

.img-boxx {
    width: 373px;
    height: 225px;
    transform: translate(5px, 166px);
}

.angry {
    margin: 0px
}

s ._6-store-img {
    width: 48%;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

._6-kt-logo {
    font-size: 32px;
    font-weight: bold;
    color: #ff4800;
}

._6-kt-map {
    position: relative;
    width: 399px;
    height: 518px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 auto;
}

._6-map-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0.15;
    object-fit: cover;
    transform: translate(0px, 45px);
}


._6-kt-logo {
    position: absolute;
    color: #ff4a00;
    font-size: 32px;
    font-weight: 800;
    pointer-events: none;
}

._6-map-note {
    position: absolute;
    bottom: 51px;
    right: 10px;
    font-size: 17px;
    color: #ccc;
}

/*8*/
.visual-8 {
    width: 1280px;
    margin: 0 auto;
    background: #ffffff;
    box-sizing: border-box;
}

._7-robot-container {
    display: flex;
    /* justify-content: space-between; */
    background: #1b1b1b;
    color: white;
    font-family: sans-serif;
    padding: 22px;
    height: 700px;
    box-sizing: border-box;
}

._7-left-area,
._7-center-area {
    position: relative;
    width: 42%;
}

._7-right-panel {
    background: #1b1b1b;
    width: 29%;
    /* padding: 30px; */
    box-sizing: border-box;
    border-radius: 8px;
    margin-right: 30px;
}

._7-right-panel h3 {
    margin-bottom: 35px;
    font-size: 30px;
    text-align: left;
    margin-top: 25px;
}

._7-robot {
    width: 193%;
    border-radius: 12px;
}

._7robot-left {
    width: 300px;
    height: auto;
}

._7-speech {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    color: black;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 14px;
    white-space: nowrap;
    font-weight: bold;
}

._7-left {
    top: 40%;
    left: 0;
    text-align: center;
    width: 165px;
    border-radius: 100px;
    transform: translate(129px, -95px);
    font-size: 30px;
    font-weight: 300;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

._7-main-menu {
    top: 40%;
    left: -13px;
    text-align: center;
    width: 210px;
    border-radius: 100px;
    transform: translate(-48px, -187px);
    font-size: 30px;
    font-weight: 300;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

._7-side-menu {
    top: 20%;
    left: 50%;
    text-align: center;
    width: 203px;
    border-radius: 100px;
    transform: translate(-286px, 8px);
    font-size: 30px;
    font-weight: 300;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

._7-refill {
    top: 35%;
    left: 50%;
    text-align: center;
    width: 202px;
    border-radius: 100px;
    transform: translate(-288px, -27px);
    font-size: 30px;
    font-weight: 300;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

._7-cleanup {
    top: 46%;
    left: 85%;
    text-align: center;
    width: 165px;
    border-radius: 100px;
    transform: translate(-169px, 41px);
    font-size: 30px;
    font-weight: 300;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

._7-panel-block {
    background: #2b2b2b;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}

._7-panel-block strong {
    font-size: 30px;
    display: block;
    margin-bottom: 6px;
}

._7-panel-block span {
    font-size: 21px;
    color: #ccc;
}

._7-arrow {
    text-align: center;
    font-size: 20px;
    color: #b32b2b;
    margin: 15px 0px;
}


/*9*/

.visual-9 {
    width: 1280px;
    margin: 0 auto;
    background: #ffffff;
    box-sizing: border-box;
}

._9-container {
    display: flex;
    gap: 30px;
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    align-items: flex-end;
}



._9-left,
._9-right {
    flex: 1;
    border: 1px solid #ccc;
}


._9-left h2 {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 20px;
    margin-top: 40px;
}

._9-check-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

._9-check-icon {
    font-size: 24px;
    color: #ff5722;
}

._9-alltogether {
    display: flex;
}

._9-check-itemss {
    margin-left: 43px;
    margin-top: 24px;

}

._9-check-content {
    font-size: 23px;
    line-height: 1.4;
    background-color: #0000001a;
    border-radius: 20px;
    padding: 12px 14px;
}

._9-divider {
    border-top: 1px solid #ddd;
    margin: 20px 0;
}

._9-left {
    flex: 7;
    text-align: center;

    border-radius: 12px;
}

._9-right {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 12px;
    font-size: 25px;
    flex: 3;
    height: 390px;
}

._9-checkgath {
    display: flex;
    flex-direction: column;
    align-items: center;
}

._9-right h3 {
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 32px;
}

._9-right ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

._9-right li {
    background: #eee;
    border-radius: 20px;
    padding: 12px 14px;
    display: inline-block;
    text-align: center;
}

._9-img-box {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

._9-img-box img {
    width: 380px;
    height: auto;
    border-radius: 8px;
    margin-left: 50px;
    margin-bottom: 30px;
    padding-left: 10px;
    padding-right: 34px;
}

._9-flags {
    display: flex;
    align-items: center;
    gap: 10px;
}

._9-flags img {
    width: 32px;
    height: auto;
}

/*10*/
.visual-10 {
    all: unset;
    /* 상속된 모든 속성 초기화 */
    width: 1820px;
    margin: 0 auto;
    background: #eaeaea;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

._10-section {
    background: #2B2B2B;
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
    padding: 40px 0 60px;
    text-align: center;
    color: white;
    width: 100%;
}

._10-title {
    font-size: 40px;
    margin-bottom: 40px;
}

._10-product-wrap {
    display: flex;
    justify-content: center;
    gap: 40px;
}

._10-product {
    background: white;
    border-radius: 20px;
    padding: 20px;
    width: 310px;
    box-sizing: border-box;
    height: 495px;
}

._10-product img {
    width: 297px;
    height: 291px;
    margin-left: -8px;
    margin-top: 31px;
}

._10-label {
    color: #999;
    font-size: 31px;
    margin-top: 25px;

}

._10-label h1 {
    font-size: 20px;
    font-weight: 300;
    color: white;
    margin-top: 10px;
    background-color: #000000;
    border-radius: 30px;
    padding: 10px;
}

/*6*/
.visual-6 {
    width: 1820px;
    height: 525px;
    /* 영상 커지니까 높이 늘림 */
    background: rgba(0, 0, 0, 0.822);
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* ✅ 이거 추가 */
    /* 부드러운 스크롤 */
}

.video-track {
    display: inline-flex;
    padding: 60px;
    gap: 80px;
    overflow-x: hidden;
}

.video-item {
    display: flex;
    align-items: center;
    width: 1300px;
    /* 영상+텍스트 박스 넓이 키움 */
    flex-shrink: 0;
    gap: 50px;
}

.video-item iframe {
    width: 700px;
    height: 400px;
}

.video-info {
    color: white;
    user-select: none;
}

.video-info h3 {
    margin: 0 0 20px 0;
    font-size: 32px;
}

.video-info p {
    margin: 0;
    font-size: 22px;
}

.visual-6,
.video-track,
.video-item,
.video-wrapper,
.video-info,
.video-info h3,
.video-info p {
    user-select: none;
}

/*footer*/
.footer {
    background: black;
    width: 1622px;
    height: 150px;
    padding: 100px;
}

.logo-1 {
    color: red;
    gap: 10px;
    font-size: 50px;
    font-weight: 600;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-name {
    font-family: "droid sans fallback";
    font-size: 50px;
    font-weight: 500;
}

.phone-number {
    margin-top: 5px;
    font-size: 0.9rem;
}


.footer-word {
    color: #d2dde0;
    font-size: 20px;
    float: right;
    margin-top: 0px;
}


@media (max-width: 1820px) {
    * {
        margin: 0;
        padding: 0;
    }

    .wrap {
        width: 1280px;
        margin: 0 auto;
    }

    .visual {
        width: 500px;
    }


    .visual-3 {
        width: 1280px;
    }

    .menu {
        transform: translate(0px, 0px);
    }

    .visual-4 {
        width: 1280px;
    }

    .visual-5 {
        width: 1280px;
    }

    .visual-6 {
        width: 1280px;
    }

    .visual-10 {
        width: 1280px;
       background: #ffffff;
    }

    .footer {
        width: 1145px;
        padding: 68px;
    }
}

@media (max-width: 1199px) {
    * {
        margin: 0;
        padding: 0;
    }

    .wrap {
        width: 1200px;
        margin: 0 auto;
    }

    .visual {
        width: 500px;
    }


    .visual-3 {
        width: 1200px;
    }

    .menu {
        transform: translate(0px, 0px);
    }

    .visual-4 {
        width: 1200px;
    }

    .visual-5 {
        width: 1200px;
    }

    .visual-6 {
        width: 1200px;
    }

    .logo-1 {
        font-size: 45px;
    }

    .footer {
        width: 1065px;
        padding: 68px;
    }

    .footer-word {
        font-size: 18px;
    }

}

@media (max-width: 1115px) {

    * {
        margin: 0;
        padding: 0;
    }

    .wrap {
        width: 1114px;
        margin: 0 auto;
    }

    .visual {
        width: 500px;
    }

    .main-sbj {
        font-size: 35px;
    }

    .visual-3 {
        width: 1114px;
    }

    .menu {
        transform: translate(0px, 0px);
    }

    .visual-4 {
        width: 1114px;
    }

    .visual-5 {
        width: 1114px;
    }

    .visual-6 {
        width: 1114px;
    }

    .logo-1 {
        font-size: 40px;
    }

    .footer {
        width: 1000px;
        padding: 68px;
    }

    .footer-word {
        font-size: 15px;
    }

}

@media (max-width: 991px) {
    * {
        margin: 0;
        padding: 0;
    }

    .wrap {
        width: 991px;
        margin: 0 auto;
    }

    .visual {
        width: 991px;
    }

    .visual-2 {
        height: 150px;
    }

    .main-sbj {
        font-size: 29px;
    }

    .visual-3 {
        width: 991px;
    }

    .menu {
        transform: translate(205px, 30px);
    }

    .visual-4 {
        width: 991px;
    }

    .visual-5 {
        width: 991px;
    }

    .visual-6 {
        width: 991px;
    }


    .logo-1 {
        font-size: 40px;
    }

    .footer {
        width: 900px;
        padding: 68px;
    }

    .footer-word {
        font-size: 15px;
    }

}

@media (max-width: 800px) {

    * {
        margin: 0;
        padding: 0;
    }

    .wrap {
        width: 768px;
        margin: 0 auto;
    }

    .visual {
        width: 768px;
    }

    .main-sbj {
        font-size: 29px;
    }

    .visual-3 {
        width: 768px;
    }

    .menu {
        transform: translate(100px, 30px);
    }

    .visual-4 {
        width: 768px;
    }

    .visual-5 {
        width: 768px;
    }

    .visual-6 {
        width: 768px;
    }

    .logo-1 {
        font-size: 40px;
    }

    .footer {
        width: 600px;
        padding: 68px;
    }

    .footer-word {
        font-size: 15px;
    }


}

@media (max-width: 767px) {
    * {
        margin: 0;
        padding: 0;
    }

    .wrap {
        width: 767px;
        margin: 0 auto;
    }

    .visual {
        width: 767px;
    }

    .main-sbj {
        font-size: 29px;
    }

    .visual-3 {
        width: 767px;
    }

    .menu {
        transform: translate(100px, 30px);
    }

    .visual-4 {
        width: 767px;
    }

    .visual-5 {
        width: 767px;
    }

    .visual-6 {
        width: 767px;
    }


    .video-item iframe {
        width: 480px;
        height: 270px;
        /* 16:9 비율 유지 */
    }



    .logo-1 {
        font-size: 40px;
    }

    .footer {
        width: 500px;
        padding: 68px;
    }

    .footer-word {
        font-size: 15px;
    }

    .logo-1 {
        font-size: 40px;
    }

    .footer {
        width: 600px;
        padding: 68px;
    }

    .footer-word {
        font-size: 15px;
    }

}


@media (max-width: 575px) {

    * {
        margin: 0;
        padding: 0;
    }

    .wrap {
        width: 575px;
        margin: 0 auto;
    }

    .visual {
        width: 575px;
    }

    .main-sbj {
        font-size: 29px;
    }

    .visual-3 {
        width: 575px;
    }

    .menu {
        transform: translate(100px, 30px);
    }

    .visual-4 {
        width: 575px;
    }

    .visual-5 {
        width: 575px;
    }

    .visual-6 {
        width: 575px;
    }

    .video-track {
        display: flex;
        gap: 210px;
        padding: 20px;
        overflow-x: auto;
    }

    .video-item {
        flex-direction: column;
        width: 300px;
        gap: 10px;
    }

    .video-item iframe {
        width: 480px;
        height: 270px;
        /* 16:9 비율 유지 */
    }

    .video-info {
        color: white;
        user-select: none;
    }

    .video-info h3 {
        margin: 0 0 20px 0;
        font-size: 35px;
    }


    .video-info p {
        margin: 0;
        font-size: 18px;
    }

    .logo-1 {
        font-size: 40px;
    }

    .footer {
        width: 500px;
        padding: 68px;
    }

    .footer-word {
        font-size: 15px;
    }

}

@media (max-width:441px) {

    * {
        margin: 0;
        padding: 0;
    }

    .wrap {
        width: 360px;
        margin: 0 auto;
    }

    .visual {
        width: 360px;
    }

    .submenu {
        left: 4px;
        width: 93px;
        height: 36px;
        padding: 1px;
    }

    .main-sbj {
        font-size: 18px;
    }

    .logo img {
        transform: translate(120px, 0px);
        width: 33px;
    }

    .logo span {
        font-size: 36px;
        margin-left: 128px;
    }

    .visual-3 {
        width: 360px;
        height: 287px;
    }

    .picture img {
        width: 160%;
        max-width: 200%;
    }

    .menu {
        transform: translate(10px, 30px);
        width: 332px;
        font-size: 12px;
    }

    .menu-1 {
        min-width: 0px;
        padding: 0px;
    }

    .visual-4 {
        width: 360px;
        height: 325px;
    }

    .visual-5 {
        width: 360px;
        padding: 55px 11px
    }

    .product-info {
        padding: 9px;
    }

    .product-desc {
        font-size: 14px;
    }

    .product-name {
        font-size: 17px;
    }

    .product-img {
        height: 180px;
    }

    .brand-name {
        font-size: 46px;
    }

    .visual-5 h1 {
        font-size: 27px;
        margin-left: 59px;
    }

    .track {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .visual-6 {
        width: 360px;
        height: 345px;
    }

    .video-item iframe {
        width: 300px;
        height: 169px;
        /* 16:9 비율 유지 */
    }

    .video-track {
        display: flex;
        gap: 100px;
        padding: 20px;
        overflow-x: auto;
    }

    .video-item {
        flex-direction: column;
        width: 300px;
        gap: 10px;
    }

    .video-info {
        color: white;
        user-select: none;
    }

    .video-info h3 {
        margin: 0 0 20px 0;
        font-size: 22px;
    }

    .video-info p {
        margin: 0;
        font-size: 14px;
    }

    .footer {
        width: 342px;
        padding: 9px;
        height: 200px;
    }

    .logo span {
        font-size: 38px;
    }

    .logo-1 {
        font-size: 26px;
    }

    .footer-word {
        font-size: 10px;
        margin-top: 29px;
    }

}