@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.5/dist/web/static/pretendard.css");

* {
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    -ms-overflow-style:none;/* IE and Edge */
    scrollbar-width:none;/* Firefox */
}
html::-webkit-scrollbar, body::-webkit-scrollbar {display:none;/* Chrome, Safari, Opera*/}

body {
    background-color: #ffffff;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    font-family: "Pretendard";
    overscroll-behavior-y: none;
}

header {
    width: 100%;
    height: 9.25925925925926vh;
    padding-right: 2.6041666666666665vw;
    position: absolute;
    z-index: 5999;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #ffffff;
}

h1, h2 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

img#logo {
    width: 7.395833333333333vw;
    height: auto;
}

#MsMmSlider {
    position: absolute;
    display: flex;
    flex-direction: row-reverse;
    transition: 0.8s;
    top: 0;
    width: 100%;
    height: 100%;
}

#MsMmSlider .col {
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    position: relative;
    background: #ffffff;
}

#preview {width: 62.5vw;}
#items {width: 37.5vw;}

#items .tabletImage {
    width: 100%;
    height: auto;
    display: none;
}

#items .mobileImage {
    width: 100%;
    height: 37.5vh;
    display: none;
}

#preview img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#MsMmSlider .col>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#MsMmSlider .col>div>div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.textItem {
    justify-content: center;
    padding-left: 6.770833333333333vw;
}

.textItem .smallTitle {
    color: #7f7f7f;
    display: flex;
    flex-direction: column;
    row-gap: 0.7407407407407407vh;
    font-size: 0.9375vw;
    font-weight: normal;
}

.textItem .divider {
    width: 0.9375vw;
    height: 0.2777777777777778vh;
    background-color: #e4e4e4;
    margin-top: 2.7777777777777777vh;
    margin-bottom: 5.555555555555555vh;
}

.textItem .bigTitleWrap {
    display: flex;
    color: #333;
    flex-direction: column;
    font-size: 2.5vw;
    line-height: 1.25;
    row-gap: 1.1111111111111112vh;
}

.textItem .bigTitle.thin {font-weight: 100;}
.textItem .bigTitle.normal {font-weight: 400;}
.textItem .bigTitle.bold {font-weight: 600;}
.textItem .bigTitle.big {font-size: 3.125vw;}

.textItem .btnWrap {
    display: flex;
    column-gap: 0.8333333333333334vw;
    margin-top: 3.7037037037037037vh;
}

.textItem .btnWrap img {
    cursor: pointer;
    height: auto;
    width: 9.895833333333334vw;
}

#Indic {
    position: absolute;
    overflow-y: hidden;
    z-index: 6000;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#naviBar {
    position: relative;
    background: #333333;
    width: 0.2604167vw;
    height: 0;
    left: calc(100% - 0.2604167vw);
}

#naviText {
    position: absolute;
    width: 3.125vw;
    white-space: nowrap;
    justify-content: center;
    left: -3.125vw;
    bottom: 0;
    font-style: normal;
    font-size: 12px;
    color: #cccccc;
    display: none;
}

dialog {
    position: fixed;
    border: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

dialog[open] {
    display: flex;
}

dialog::backdrop {
    background-color: rgba(51, 51, 51, 0.4);
}

/* 노트북 */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
    header {
        height: 13.020833333333334vh;
        padding-right: 0.4166666666666667vw;
    }

    img#logo {
        width: 12.890625vw;
    }

    #items {
        width: 39.453125vw;
    }

    #preview {
        width: 60.546875vw;
    }

    .textItem {
        padding-top: 24.088541666666668vh;
        padding-left: 4.8828125vw;
    }

    .textItem .smallTitle {
        row-gap: 0.78125vh;
        font-size: 1.3671875vw;
    }

    .textItem .divider {
        width: 1.26953125vw;
        height: 0.2604166666666667vh;
        margin-top: 2.6041666666666665vh;
        margin-bottom: 5.208333333333333vh;
    }
    
    .textItem .bigTitleWrap {
        font-size: 3.515625vw;
        line-height: 1.24;
        row-gap: 0.37037037037037035vh;
    }
    
    .textItem .bigTitle.big {
        font-size: 5.2734375vw;
        margin-top: 0.09259259259259259vh;
    }

    .textItem .btnWrap {column-gap: 1.46484375vw;}
    .textItem:nth-child(1) .btnWrap {margin-top: 5.208333333333333vh;}
    .textItem:nth-child(2) .btnWrap {margin-top: 9.375vh;}
    .textItem:nth-child(3) .btnWrap {margin-top: 9.375vh;}
    .textItem:nth-child(4) .btnWrap {margin-top: 8.333333333333334vh;}
    .textItem .btnWrap img {width: 14.6484375vw;}
}

/* 타블렛 */
@media screen and (min-width: 768px) and (max-width:1023px) {
    header {
        width: 100% !important;
        left: 0 !important;
        height: 8.3752vh;
        padding: 0;
        justify-content: center;
        z-index: 6001;
    }

    img#logo {
        width: 16.786570743405274vw;
    }

    #MsMmSlider {
        flex-direction: column-reverse;
    }

    #MsMmSlider .col {
        width: 100%;
    }

    #preview {
        display: none !important;
    }

    #items {
        width: 100%;
        height: 42.71356vh;
    }

    #items .tabletImage {
        display: initial;
    }

    #items .mobileImage {
        display: none !important;
    }

    .textItem {
        padding-top: 8.3752vh;
        padding-left: 0;
    }

    .textItem .smallTitle {
        font-size: 2.1582vw;
        margin-top: 4.1876vh;
        margin-left: 11.990407673860911vw;
    }

    .textItem .divider {
        width: 2.158273381294964vw;
        height: 0.25125628140703515vh;
        margin-top: 1.6750418760469012vh;
        margin-left: 11.990407673860911vw;
        margin-bottom: 2.512562814070352vh;
    }

    .textItem .bigTitleWrap {
        font-size: 4.316546762589928vw;
        margin-left: 11.990407673860911vw;
    }

    .textItem .bigTitle.big {
        font-size: 5.995203836930456vw;
        margin-top: 0.09259259259259259vh;
    }

    .textItem .btnWrap {
        column-gap: 1.7985611510791366vw;
        margin-left: 11.990407673860911vw;
    }
    .textItem:nth-child(1) .btnWrap {margin-top: 3.5175879396984926vh;}
    .textItem:nth-child(2) .btnWrap {margin-top: 5.108877721943049vh;}
    .textItem:nth-child(3) .btnWrap {margin-top: 5.108877721943049vh;}
    .textItem:nth-child(4) .btnWrap {margin-top: 5.108877721943049vh;}
    .textItem .btnWrap img {width: 21.5827vw;}
}

@media screen and (max-width:767px) {
    /* 모바일 */
    header {
        width: 100% !important;
        left: 0 !important;
        height: 7.8125vh;
        padding: 0;
        justify-content: center;
        z-index: 6001;
    }

    img#logo {
        width: 25vw;
    }

    #MsMmSlider {
        flex-direction: column-reverse;
    }

    #MsMmSlider .col {
        width: 100%;
    }

    #preview {
        display: none !important;
    }

    #items.tabletImage {
        display: none !important;
    }

    #items .mobileImage {
        display: initial;
    }

    .textItem {
        padding-top: 7.8125vh;
        padding-left: 0;
    }

    .textItem .smallTitle {
        font-size: 3.3333333333333335vw;
        margin-top: 3.125vh;
        margin-left: 8.333333333333334vw;
        row-gap: 0.625vh;
    }

    .textItem .divider {
        margin: 1.875vh 0 1.875vh 8.333333333333334vw;
        height: 0.3125vh;
        width: 2.7777777777777777vw;
    }

    .textItem .bigTitleWrap {
        font-size: 7.222222222222222vw;
        margin-left: 8.333333333333334vw;
    }

    .textItem .bigTitle.big {
        font-size: 9.444444444444445vw;
        margin-top: 0.15625vh;
    }

    .textItem .btnWrap {
        margin-left: 8.333333333333334vw;
        column-gap: 2.5vw;
    }
    .textItem:nth-child(1) .btnWrap {margin-top: 1.25vh;}
    .textItem:nth-child(2) .btnWrap {margin-top: 3.125vh;}
    .textItem:nth-child(3) .btnWrap {margin-top: 3.125vh;}
    .textItem:nth-child(4) .btnWrap {margin-top: 3.125vh;}
    .textItem .btnWrap img {width: 31.11111111111111vw;}
}