/* BASIC css start */
/* ========================================
   기본
======================================== */

.landing_m {
    width:100%;
    max-width:850px;
    margin:0 auto;
    overflow:hidden;
}

.landing_m img {
    display:block;
    max-width:100%;
}

.landing_m p {
    margin:0;
    padding:0;
}


/* ========================================
   상단 FAMILY SALE 롤링
======================================== */

.landing_m .marquee_top {
    position:relative;

    display:flex;
    align-items:center;

    width:100%;
    height:5rem;

    overflow:hidden;

    background:#e6e1b5;

    user-select:none;
}


/* 롤링 묶음 */

.landing_m .marquee_top .marquee__cont {
    display:flex;
    align-items:center;

    flex:none;

    width:max-content;

    animation:db_marquee 12s linear infinite;
}


/* 이미지 간격 */

.landing_m .marquee_top span {
    display:flex;
    align-items:center;

    flex:none;

    margin:0;
    padding:0 2px;
}


/* FAMILY SALE 이미지 */

.landing_m .marquee_top img {
    display:block;

    width:auto;
    max-width:none;

    height:32px;
}


/*
기존 방향 유지

왼쪽에 있던 글자가
오른쪽 방향으로 이동
*/

@keyframes db_marquee {

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

    to {
        transform:translateX(0);
    }

}


/* ========================================
   FAMILY SALE 메인
======================================== */

.landing_m .family_sale {
    position:relative;

    width:100%;
}


.landing_m .family_sale .-img1 {
    position:relative;

    width:100%;
}


.landing_m .family_sale .-img1 img {
    display:block;

    width:100%;
}


/* ========================================
   코드 입력창 위치
======================================== */

.landing_m .family_sale .codeBox {
    position:absolute;

    left:0;
    top:72%;

    width:100%;

    z-index:10;

    background:none;
}


/* ========================================
   흰색 코드 입력 영역
======================================== */

.landing_m .family_sale .codeArea {
    position:relative;

    width:70%;
    max-width:522px;

    margin:0 auto;

    padding:15px;

    background:#fff;

    border-radius:5px;

    box-sizing:border-box;
}


/* ========================================
   INPUT
======================================== */

.landing_m .family_sale .secret_code input {
    display:block;

    width:100%;

    height:65px;

    padding:0 170px 0 15px;

    border:0;

    outline:none;

    background:transparent;

    color:#222;

    font-size:27px;
    font-weight:500;

    line-height:65px;

    box-sizing:border-box;
}


.landing_m .family_sale .secret_code input::placeholder {
    color:#555;

    font-weight:400;
}


/* ========================================
   입장하기 버튼
======================================== */

.landing_m .family_sale .secret_btn {
    position:absolute;

    top:15px;
    right:15px;

    width:155px;
    height:65px;

    background:#000;

    border-radius:5px;

    color:#fff;

    line-height:65px;

    text-align:center;

    cursor:pointer;
}


.landing_m .family_sale .secret_btn span {
    color:#fff;

    font-size:27px;
    font-weight:500;
}


/* ========================================
   MOBILE 460 이하
======================================== */

@media only screen and (max-width:460px) {

    /* 상단 롤링 */

    .landing_m .marquee_top {
        height:3.6rem;
    }


    .landing_m .marquee_top img {
        height:24px;
    }


    .landing_m .marquee_top span {
        padding:0 1px;
    }


    /* 입력창 위치 */

    .landing_m .family_sale .codeBox {
        top:63%;
    }


    .landing_m .family_sale .codeArea {
        width:72%;

        padding:10px;
    }


    .landing_m .family_sale .secret_code input {
        height:40px;

        padding:0 90px 0 10px;

        font-size:14px;

        line-height:40px;
    }


    .landing_m .family_sale .secret_btn {
        top:10px;
        right:10px;

        width:80px;
        height:40px;

        line-height:40px;
    }


    .landing_m .family_sale .secret_btn span {
        font-size:14px;
    }

}


/* ========================================
   461 ~ 580
======================================== */

@media all and (min-width:461px) and (max-width:580px) {

    .landing_m .marquee_top {
        height:3.6rem;
    }


    .landing_m .marquee_top img {
        height:27px;
    }


    .landing_m .family_sale .codeBox {
        top:72%;
    }


    .landing_m .family_sale .codeArea {
        padding:10px;
    }


    .landing_m .family_sale .secret_code input {
        height:55px;

        padding:0 110px 0 10px;

        font-size:16px;

        line-height:55px;
    }


    .landing_m .family_sale .secret_btn {
        top:10px;
        right:10px;

        width:100px;
        height:55px;

        line-height:55px;
    }


    .landing_m .family_sale .secret_btn span {
        font-size:16px;
    }

}


/* ========================================
   581 ~ 640
======================================== */

@media all and (min-width:581px) and (max-width:640px) {

    .landing_m .marquee_top {
        height:4rem;
    }


    .landing_m .marquee_top img {
        height:30px;
    }


    .landing_m .family_sale .codeBox {
        top:72%;
    }


    .landing_m .family_sale .codeArea {
        padding:12px;
    }


    .landing_m .family_sale .secret_code input {
        height:60px;

        padding:0 112px 0 12px;

        font-size:20px;

        line-height:60px;
    }


    .landing_m .family_sale .secret_btn {
        top:12px;
        right:12px;

        width:100px;
        height:60px;

        line-height:60px;
    }


    .landing_m .family_sale .secret_btn span {
        font-size:20px;
    }

}
/* BASIC css end */