@charset "utf-8";
*{
    margin: 0 ;
    padding: 0;
}
ol, ul, li{
    list-style: none;
}
.mo{
    display: none;
}
/* ===============================================  LCK  ===================================*/
#play{
    overflow-x: hidden;
    padding: 190px 0 157px;
}
#play .inner{
    width: 1427px;
    margin: 0 auto;
    padding: 204px 0 108px;
    background: #282827;
    /* border: 1px solid red; */
}
/* ===============================================  배너  ===================================*/
#banner{
    width: 1175px;
    margin: 0 auto;
}
#banner .haeding .mo{
    display: none;
}
#banner .grid_con{
    margin-top: 54px;
    display: grid;
    grid-template-columns: repeat(3, 362px);
    width: 100%;
    justify-content: space-between;
}
#banner .grid_con .con .mask{
    margin-bottom: 43px;
}
#banner .grid_con .con .mask img{}
#banner .grid_con .con .txt {}
#banner .grid_con .con .txt img{}
/* ===============================================  월드플레이그라운드 x 하이커그라운드  ===================================*/
#article{
    padding: 175px 0 180px;
}
#article .container{
    width: 803px;
    margin:  0 auto;
}
#article .heading{
    width: 436px;
    margin-bottom: 84px;
}
#article .area{}
#article .area .tt{
    width: 803px;
}
#article .area .tt.ko{
    margin-bottom: 27px;
}

#video .video-container{
    width: 1166px;
    margin: 0 auto;
}
/* ===============================================  스탬프  ===================================*/
#stamp{
    width: 100%;
    overflow-x: hidden;
    padding: 130px 0;
}
#stamp .slider_wrap{
    position: relative;
    width: 100%;
    height: auto;
}
#stamp .heading{
    width: 344px;
    margin: 0 auto 84px;
}
#stamp .stamp_slider {
    height: 603px;
}
#stamp  .slick-slide {
    margin: 0 40px;
}
#stamp .slick-list {
    margin: 0 -40px;
}
#stamp .arrows > div{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    cursor: pointer;
}
#stamp .arrows .prev{
    left: 16.398%;
}
#stamp .arrows .next{
    right: 16.398%;
}
#stamp .stamp_dots{
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
}
#stamp .slick-dots{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    
}
#stamp .slick-dots li button{
    border: none;
    background: #e0d3f4;
    font-size: 0;
    width: 10px;
    height: 10px;
    border-radius: 100%;
}
#stamp .slick-dots li.slick-active button{
    background: #773dbd;
}
#worlds{
    padding: 220px 0 ;
}
#worlds .worlds_head{
    width: 1017px;
    margin: 0 auto 150px;
}
#worlds .worlds_txt{
    width: 792px;
    margin: 0 auto;
}

/* ===============================================  층별안내  ===================================*/
section.floor .container{
    width: 1305px;
    margin: 0 auto;
    padding: 86px 0;
}
section.floor .heading{
    margin: 0 auto 43px;
}
section.floor .txt{
    margin: 0 auto;
}
section.floor .grid_slider{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 54px;
    row-gap: 54px;

}
section.floor.f1 .heading{width: 428px;}
section.floor.f2 .heading{width: 337px;}
section.floor.f3 .heading{width: 312px;}
section.floor.f4 .heading{width: 379px;}
section.floor.f5 .heading{width: 480px;}

section.floor.f1 .txt{width: 934px; margin-bottom: 41px;}
section.floor.f2 .txt{width: 940px; margin-bottom: 70px;}
section.floor.f3 .txt{width: 905px; margin-bottom: 37px;}
section.floor.f4 .txt{width: 1148px; margin-bottom: 80px;}
section.floor.f5 .txt{width: 973px; margin-bottom:80px;}

@media (max-width:1430px) {
    #play{
        padding: 0;
        padding-top: 103px;
    }
    #play .inner{
        width: 100%;
    }
    section.floor .container{
        width: 90%;
    }
    #stamp .stamp_slider{
        height: auto;
    }
    #stamp .arrows > div{
        width: 30px;
    }
    #stamp .arrows .prev {
        left: 18.398%;
    }
    #stamp .arrows .next {
        right: 18.398%;
    }
}
@media (max-width:1180px) {
    #banner{
        width: 90%;
    }
    #banner .grid_con{
        grid-template-columns: repeat(3, 1fr);
        column-gap: 20px;
    }
    #video .video-container{
        width: 100%;
    }
    #worlds .worlds_head{
        width: 90%;
    }
    section.floor .grid_slider{
        column-gap: 24px;
        row-gap: 24px;
    }
    section.floor .txt{
        width: auto !important;
    }
    #stamp .arrows{
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #stamp .arrows > div{
        position: static;
        left: auto;
        right: auto;
    }
}
@media (max-width:991px) {
    #banner .haeding img{
        display: none;
    }
    #banner .haeding .mo{
        display: block;
    }
    #play{
        padding-top: 50px;
    }
    #stamp .arrows{
        width: 70%;
    }
    #article .container{
        width: 90%;
    }
    #article .area .tt{
        width: auto;
    }
    #worlds .worlds_txt{
        width: 90%;
    }
    #worlds .worlds_head {
        margin: 0 auto 60px;
    }
}
/* 모바일 */
@media (max-width:768px) {
    .mo{
        display: block;
    }
    .pc{
        display: none;
    }
    #play .inner{
        padding: 60px 0;
    }
    #banner {
        width: 85%;
    }
    #banner .grid_con{
        grid-template-columns: repeat(1, 1fr);
        column-gap: normal;
        row-gap: 57px;
    }
    #article .container {
        width: 80%;
    }
    #article .heading{
        width: auto;
    }
    #stamp .arrows{
        width: 80%;
    }
    #stamp .arrows > div{
        width: 20px;
    }
    #worlds{
        padding: 120px 0;
    }
    section.floor .container {
        width: 85%;
    }
    section.floor .grid_slider{
        display: block;
        grid-template-columns: auto;
        column-gap:0;
        row-gap:0;
    }
    section.floor.f1 .heading{width: 359px;}
    section.floor.f2 .heading{width: 289px;}
    section.floor.f3 .heading{width: 272px;}
    section.floor.f4 .heading{width: 313px;}
    section.floor.f5 .heading{width: 393px;}
}
@media (max-width:527px) {
    #banner {
        width: 75%;
    }
    section.floor.f5 .heading {
        width: auto;
    }
    section.floor .container{
        padding: 55px 0;
    }
    #stamp .heading {
        width: 70%;
    }
    #stamp .arrows{
        width: 90%;
    }
    #stamp .stamp_slider .stamp .mask{
        width: 75%;
        margin: 0 auto;
    }
    #worlds{
        padding: 60px 0;
    }
}

@media (max-width:425px) {
    section.floor.f1 .heading {width: 327px;}
    section.floor.f4 .heading {width: 281px;}
    section.floor.f3 .heading {width: 240px;}
    section.floor.f2 .heading {width: 257px;}

}