@charset "UTF-8";

/*==========
    font
    ==========*/
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: local('Pretendard Black'), url(../font/woff2/Pretendard-Black.woff2) format('woff2'), url(../font/woff/Pretendard-Black.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: local('Pretendard ExtraBold'), url(../font/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(../font/woff/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: local('Pretendard Bold'), url(../font/woff2/Pretendard-Bold.woff2) format('woff2'), url(../font/woff/Pretendard-Bold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: local('Pretendard SemiBold'), url(../font/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(../font/woff/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: local('Pretendard Medium'), url(../font/woff2/Pretendard-Medium.woff2) format('woff2'), url(../font/woff/Pretendard-Medium.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: local('Pretendard Regular'), url(../font/woff2/Pretendard-Regular.woff2) format('woff2'), url(../font/woff/Pretendard-Regular.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: local('Pretendard Light'), url(../font/woff2/Pretendard-Light.woff2) format('woff2'), url(../font/woff/Pretendard-Light.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-display: swap;
    src: local('Pretendard ExtraLight'), url(../font/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(../font/woff/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-display: swap;
    src: local('Pretendard Thin'), url(../font/woff2/Pretendard-Thin.woff2) format('woff2'), url(../font/woff/Pretendard-Thin.woff) format('woff');
}


/*=================
    reset
    =================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color:#000;
    font-family: 'Pretendard', Arial, sans-serif;
    word-break: keep-all;
}
a {
    display: block;
    text-decoration: none;
}
ul {
    list-style: none;
}
button {
    cursor: pointer;
    border:none;
    background:transparent;
}


/*=================
    common
    =================*/
.hid {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    width:100%;
    height:40px;
    background:#000;
    text-align: center;
    line-height:40px;
    z-index: 1000;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    color:#fff;
}
html.no-scroll {
    overflow: hidden;
}


/*=================
    layout
    =================*/
#wrap {
    position: relative;
    width:100%;
}


/*=================
    component
    =================*/
/*select*/
.selectWrap{
    position: relative;
    display: inline-block;
}
.selectWrap .selectBtn{
    display: inline-flex;
    align-items: center;
}
.selectWrap .list-select{
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 20;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: max-height 220ms ease, opacity 220ms ease, transform 220ms ease;
}
.selectWrap.active .list-select{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


/*slide*/
.slideWrap {
    position: relative;
    overflow: hidden;
}
.slideWrap .box-btn {
    position:absolute;
    right:24px;
    bottom:24px;
    display: flex;
    gap:8px;
    z-index: 2;
}
.slideWrap .box-btn .page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:5px;
    color: #1D1D1D;
    font-size: 17px;
    font-weight: 700;
    line-height: 150%;
    padding:8px 16px;
    border-radius: 40px;
    background: #fff;
}
.slideWrap .box-btn .cur {}
.slideWrap .box-btn .total {}
.slideWrap .box-btn button {
    width:40px;
    height:40px;
    border-radius: 40px;
    border: 1px solid #E4E4E4;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
}
.slideWrap .box-btn .btn-pause {
    background-image:url('../images/reb/ico-pause.png');
}
.slideWrap .box-btn .btn-pause[aria-pressed="true"]{
    background-image:url('../images/reb/ico-play.png');
}
.slideWrap .box-btn .btn-prev {
    background-image:url('../images/reb/ico-arrow-prev.svg');
}
.slideWrap .box-btn .btn-next {
    background-image:url('../images/reb/ico-arrow-prev.svg');
    transform:rotate(180deg);
}

.slideWrap .list-slide {
    display: flex;
    flex-wrap: nowrap;
    transition: transform .4s ease;
    will-change: transform;
    height:100%;
}
.slideWrap .list-slide .slide {
    flex: 0 0 100%;
}


/*bg shadow*/
#shadowWrap {
    position: absolute;
    width:100%;
    height:100%;
    background: rgba(0,0,0,.5);
    z-index: 4;
    opacity: 0;
    pointer-events: none;
}
#shadowWrap.active {
    opacity: 1;
    pointer-events: auto;
}

/* hidden일 때는 확실히 제거 */
#searchWrap[hidden],
#shadowWrap[hidden]{
    display: none;
}