@charset "utf-8";
/* https://www.walterz.net/2017/07/25/jquery-%EB%AF%B8%EB%94%94%EC%96%B4-%EC%BF%BC%EB%A6%AC-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-%EA%B0%9C%EB%B0%9C/ */
#m-360 {
    display: none;
    height: 0;
    overflow: hidden;
}

@media (max-width: 1370px) {
    .gnb {
        width: 384px;
        left: 45%;
    }
    .cbox {
        width: 64vw;
    }
    @keyframes acani {
        to {
            left: -64vw;
        }
    }
}

@media (max-width: 1280px) {

    .sin_s {
        font-size: 5rem;
        letter-spacing: 6px;
        line-height: 95px;
    }

    .bbox:first-child {
        font-size: 15px;
    }
    .box3 {
        font-weight: bold;
        font-size: 15px;
    }
}

@media (max-width: 1168px) {
    .gnb {
        left: 30%;
    }
    .bbox:first-child {
        font-size: 12px;
    }
    .box3 {
        font-weight: bold;
        font-size: 12px;
    }
}

@media (max-width: 1000px) {
    .cbox {
        width: 90vw;
    }
    @keyframes acani {
        to {
            left: -90vw;
        }
    }
}

@media (max-width: 830px) {
    .nav-up {
        top: -100px;
    }
    .gnb {
        left: 50%;
    }
    .navbar {
        top: 20px;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .nbtn {
        margin-top: 10px;
        margin-left: 0;
    }
    .sin_s {
        font-size: 4rem;
        letter-spacing: 4px;
        line-height: 77px;
    }
    
    .intro_list_box {
        flex-direction: column;
    }
    .intro_list_text1 {
        width: 64vw;
        text-align: center;
        position: relative;
        left: 18%;
    }
    .intro_list_tbox1-2 {
        justify-content: space-around;
        margin-bottom: 28px;
    }
    .intro_list_text2 {
        width: 50vw;
        display: flex;
        align-items: center;
    }

    .cbox {
        width: 110vw;
    }
    @keyframes acani {
        to {
            left: -110vw;
        }
    }
}

@media (max-width: 500px) {
    body {
        padding-top: 70px;
    }
    header {
        /* position: relative; */
        width: 100%;
        background-color: gray;
        transition: none;
        padding: 10px;
        box-sizing: border-box;
    }
    .ham {
        right: 10px;
    }
    .mgnb-nav.mon {
        /* height: 100%; */
        top: 0;
        transition: top .5s ease-out;
    }
    /* 햄버거버튼 눌렀을때 보이는 화면 */
    .mgnb-nav {
        position: fixed;
        width: 100%;
        height: 100%;
        top: -100%;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 1;
        transition: top .5s ease-out;
        display: block;
    }
    .mbox {
        width: 100%;
        height: 100%;
        position: relative;
        color: #fff;
        font-size: 40px;
        text-align: center;
    }
    
    .mbox ul {
        position: absolute;
        text-decoration: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .mbox ul li {
        position: relative;
        margin: 70px 0;
    }


    /* 메인컨텐츠 */

    /* h1 */
    .sin {
        width: 100%;
    }
    .sin_s {
        font-size: 3rem;
        letter-spacing: 2px;
        line-height: 53px;
    }

    /* h1 밑 사진 */
    .intro_icon_box {
        margin-top: 30px;
    }
    .intro_icon img {
        width: 100px;
    }

    .intro_list_text1 {
        padding-bottom: 5px;
    }
    
    .intro_list_tbox1 {
        font-size: 13px;
    }

    .intro_list_text1 {
        left: 50%;
        transform: translateX(-50%);
    }
    .intro_list_tbox_img {
        width: 160px;
        height: 200px;
    }

    .intro_list_tbox1 {
        line-height: 19px;
    }

    .abox_iimg {
        width: 387px;
    }

    .mabox:hover .cbox {
        transform: translateY(-20%);
    }
    
    .intro_list_tbox2_box li .abox .box1 {
        line-height: calc(1px * var(--h));
    }

    /* counter_box */
    .counter_box {
        height: 42vh;
    }

    /* itpgWrap 옆으로 스크롤하게 */
    .itpgWrap {
        position: relative;
        top: 0;
        height: 600px;
        z-index: 0;
        transform-style: preserve-3d;
        perspective: 10000px;
        background-color: transparent;
    }
    .itpg2 {
        width: 290px;
        height: 500px;
        position: relative;
        transform-style: preserve-3d;
        /* animation: spin 20s  linear infinite; */
        transition: .5s linear;
    }
    @keyframes spin {
        from {
            transform: rotateY(0deg);
        }

        to {
            transform: rotateY(360deg);
        }
    }
    
    .itpg2_box {
        /* display: none; */
        transform: rotateY(calc(36deg * var(--d))) translateZ(500px);
        width: 290px;
    }
    .itpg2_box:nth-child(10) {
        /* display: block; */
    }

    .itpg2_box {
        margin: 0;
    }
    .i2b {
        height: 500px;
        /* top: 9%; */
    }
    .i2b_top {
        height: 56px;
    }
    .i2b_top span {
        font-size: 15px;
    }
    .i2b_top span:first-of-type {
        left: calc(100% - 80vw);
    }
    .i2b_top span:last-of-type {
        right: calc(100% - 83vw);
    }
    .i2bimg .i2blo {
        top: -15px;
        width: 162px;
        height: 78px;
    }

    .i2b_cb {
        height: calc(100% - 143px);
    }
    .i2btb {
        top: calc(100% - 7vh);
    }

    .watch_box img {
        width: 309px;
        height: 306px;
    }

    .buy {
        font-size: 20px;
    }

    /* 5개의 글자애니 */
    .i2bi3 {
        width: 78px;
        height: 78px;
    }
    .itpg2_box:nth-child(3) .i2btb {
        top: calc(100% - 59vh);
    }
    .i2btbR {
        justify-content: space-around;
    }
    .itpg2_box:nth-child(9) .i2btb {
        top: calc(100% - 59vh);
    }
    .rbtn img {
        width: 40px;
        height: 100px;
    }
    .lbtn img {
        width: 40px;
        height: 100px;
    }

    .rbtn {
        position: absolute;
        width: 40px;
        height: 100px;
        margin: 0;
        padding: 0;
        bottom: 0;
        right: 70px;
    }
    .lbtn {
        width: 40px;
        position: absolute;
        height: 100px;
        margin: 0;
        padding: 0;
        bottom: 0;
        left: 70px;
    }


    footer {
        position: relative;
        top: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
    }
    .footer_box {
        position: relative;
    }
    .fbox {
        display: block;
    }
    .fbs1 {
        height: 110px;
    }




}

/* 할것: 마지막을 옆슬라이드로 바꾸기 */



/* _______________________________________ */

/* @media all and (max-width: 360px) {
    #m-360 {
        display: block;
    }
} */