@charset "utf-8";

/* 웹폰트 CSS */
@font-face {
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('//web-cdn.xiyouxi.com/r2/events/common/fonts/NotoSansSC-Regular.woff2')
    format("woff2");
}

@font-face {
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('//web-cdn.xiyouxi.com/r2/events/common/fonts/NotoSansSC-Medium.woff2')
    format("woff2");
}

@font-face {
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('//web-cdn.xiyouxi.com/r2/events/common/fonts/NotoSansSC-Bold.woff2')
    format("woff2");
}

/*  Reset CSS  */
html{scroll-behavior: smooth;}
* {
    font-family: "Noto Sans SC", "Arial", "M PLUS 1p", "Helvetica Neue",
    "Malgun Gothic", Apple SD Gothic Neo, "애플 SD 산돌고딕 Neo", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.2px;
    box-sizing:border-box;
}
html{scroll-behavior:smooth;}
body { font-size:16px; color:#868d91; min-width:1280px; margin:0; padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:inherit; }
img { border:0;}
input, button {line-height: normal;}
input,select,textarea,button {font-size: 100%; margin: 0; vertical-align: middle;cursor: pointer;}

/* 공통 */
.hidden{visibility:hidden;position:absolute;}
.text-indent{text-indent:-9999px;}
.clearfix{clear:both;}
.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}

/************************************************************/
/* ///////////////////////// 레이아웃 ///////////////////////// */

#wrapper{position:relative;width:100%; height: 100%;overflow:hidden;background:#211212;}
.section {padding: 100px 0 74px;min-height: 100vh;}
#main{background:url('//web-cdn.xiyouxi.com/r2/events/attend/20251120/images/bg-min.jpg') no-repeat top center/100% auto;}
#main .row-w{overflow: unset;}

/* title */
#main .logo {position: relative; z-index: 1; margin-left: 0;margin-bottom: -4rem;}
.title-wrap {text-align: center;}
.title-wrap h2 {filter: drop-shadow(0px 0px 0px black);}
.title-wrap p {margin: -0.6rem 0 2rem;}
.btn-wrap a {text-indent: -9999px;display: inline-block;width: 5.625rem;}
.btn-wrap a:hover {filter: brightness(1.4);}
.btn-home {background:url('//web-cdn.xiyouxi.com/r2/events/attend/images/main/btn-home-min.png') no-repeat center/100% 100%;margin-right: 0.75rem;}
.btn-down {background:url('//web-cdn.xiyouxi.com/r2/events/attend/images/main/btn-down-min.png') no-repeat center/100% 100%;}

.cont-wrap {
    position: relative;
    background:url('//web-cdn.xiyouxi.com/r2/events/attend/20251120/images/cont-bg-min.png') no-repeat center/100% 100%;
    padding: 4rem 5rem;
    width: 104%;
    margin-left: -2%;
    margin-top: 2rem;
    -webkit-animation: f 4s both;animation: f 4s both;
}

.pt {
    background: linear-gradient(to bottom, #eedc77 0, #876221 50%, #6d4d16 70%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 1rem;
    font-weight: 500;
    filter: drop-shadow(0px 0px 1px #000) brightness(2.5);
}

/* effect */
.cont-wrap:after {
    content: "";
    display: block;
    position: absolute;
    width: 97.6%;
    height: 100%;
    background: url('//web-cdn.xiyouxi.com/r2/events/attend/20251120/images/cont-bg2-min.png') no-repeat center/100% 100%;
    top: 0%;
    left: 98.8%;
    rotate: -180deg;
    z-index: 99;
}
.cont-wrap::after {-webkit-animation: g 4s both;animation: g 4s both;}

@keyframes f {
    from {
        -webkit-clip-path: inset(0 0 80% 0);
        clip-path: inset(0 0 80% 0);
    }
    50%, to {
        -webkit-clip-path: inset(0 0 0% 0);
        clip-path: inset(0 0 0% 0);
    }
}
@keyframes g {
    from {
        -webkit-clip-path: inset(80% 0 0 0);
        clip-path: inset(80% 0 0 0);
        transform-origin: 0 50%;
    }
    50%, to {
        -webkit-clip-path: inset(100% 0 0 0);
        clip-path: inset(100% 0 0 0 );
        transform-origin: 0 100%;
    }
}
@keyframes fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/* ///////////////////////// custom select ///////////////////////// */
.sel-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 0.875rem;
}

    /* select box */
.sel-box {
    position: relative;
    width: 216px;
    background: url("//web-cdn.xiyouxi.com/r2/events/attend/20251120/images/sel-bg-min.png") no-repeat top center/100% auto;
    color: #707679;
     padding: 3px 0.875rem;
}
.sel-box .val-box {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    font-size: 0.75rem;
    padding: 5px 1.125rem 5px 10px;
}
.sel-box .ico {
    position: absolute;
    right: 5px;
    top: calc(50% - 8px);
    width: 1.125rem;
    height: 1rem;
    background: url("//web-cdn.xiyouxi.com/r2/events/attend/20251120/images/arw-min.png") no-repeat center/cover;
    transition: transform 0.25s;
}
.sel-box .options {
    cursor: pointer;
    background: #fff;
    background: url("//web-cdn.xiyouxi.com/r2/events/attend/20251120/images/sel-bg-btn-min.png") no-repeat bottom center/100% auto;
    position: absolute;
    right: 0;
    top: 27px;
    width: 100%;
    opacity: 0;
    height: 0;
    /*overflow-y: scroll;*/
    overflow: hidden;
    padding: 0px 0.875rem 4px;
    transition: height .25s, opacity .25s;
    z-index: 10;
}
.sel-box .options .option {
    width: 100%;
    padding: 5px 10px;
    font-size: 0.875rem;
    transition: background .25s, color .25s;
}
.sel-box .options .option:hover {
    background: #53482e;
    color: #ccc;
}

    /* show */
.sel-box.show .val-box {
    background: #1a212c;
    color: #707679;
}
.sel-box.show .options {
    opacity: 1;
    /*height: 150px;*/
    height: auto;
}
.sel-box.show .ico {
    rotate: 180deg;
}

/* ///////////////////////// attend list ///////////////////////// */
.attend-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.125rem;
    margin: 1rem 0 2rem;
    animation: fade .4s 1s both;
}
.attend-list li {
    width: calc(((100% - 6.75rem)/7));
    text-align: center;
    font-size: 0.75rem;
    color: #868d91;
    font-weight: 500;
    border: 1px solid #37534b;
    box-shadow: 0px 0px 0 1px #000;
    background: radial-gradient(#37534b, #252c2e);
}
.attend-list .tit {background:url('//web-cdn.xiyouxi.com/r2/events/attend/20251120/images/item-deco-min.jpg') no-repeat center/100% 100%;}
.attend-list strong {
    font-size: 1rem;
    line-height: 1.6;
    background-image: radial-gradient(#fffdbd, #eed570);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 4px rgb(0 0 0 / 70%));
}

.attend-list .img {margin: 1rem 0 0.5rem;}
.attend-list li .btn {
    text-indent: -9999px;
    display: inline-block;
    width: 50px;
    height: 22px;
    margin: 0.75rem 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image:url('//web-cdn.xiyouxi.com/r2/events/attend/20251120/images/btn-normal-min.png');
}
.attend-list li.get-ok {cursor: pointer;}
.attend-list li.get-end .btn {background-image:url('//web-cdn.xiyouxi.com/r2/events/attend/20251120/images/btn-end-min.png');}
.attend-list li.get-ok .btn {background-image:url('//web-cdn.xiyouxi.com/r2/events/attend/20251120/images/btn-get-min.png');}

/* ////////////////////// check desc ////////////////////// */
.check-wrap {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    font-size: 0.75rem;
    line-height: 1.8;
}
.check-wrap dt {grid-row: 1 / 4;line-height: normal;}

/**********************************************************/
/* ////////////////////// popup ////////////////////// */
.shadow{display:none;opacity:1;width:100%; height:100%; position:fixed; padding-bottom:0;top:0; left:0; z-index:-1; background-size:cover;background:rgba(0,0,0,0.50);}
.layer-wrap{display: none;position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 9998;text-align: center;}
.layer-wrap:before {content: "";display: inline-block;height: 100%;vertical-align: middle;margin-right: -.25em;}
.pop-layer {
    z-index: 9999;
    position:relative;;
    display: inline-block;
    vertical-align: middle;
    width: 430px;
    background: linear-gradient(0deg, #fffef8 0%, #f1eec7 76%, #dedbc3 100%);
    border-radius: 6px;
    border: 1px solid #fff;
    box-shadow: inset 0 0 0 2px #f1eec7, inset 0 0 10px #b0ae9b;
}

.pop-layer .btn-x {
    text-indent: -9999px;
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    background: url('//web-cdn.xiyouxi.com/r2/events/attend/20251120/images/btn-close-min.png') no-repeat center/cover;
    z-index:2;
}

    /* popup contents */
.pop-layer .cont {
    position: relative;
    padding: 6rem 1.5rem 3.75rem;
}

.pop-layer .msg {
    color: #5a4e3e;
    font-size: 1.25rem;
    line-height: 1.6;
}
.pop-layer .msg .db-text{
    font-weight:bold;
    font-size: 1.125rem;
    display: block;
}

    /* ok btn */
.pop-layer .btn-confirm{
    width: 90px;
    height: 34px;
    background:url('//web-cdn.xiyouxi.com/r2/events/attend/images/common/btn-ok-min.png')no-repeat center/cover;
    outline:none;
    border:none;
    text-indent: -9999px;
    margin-bottom:2rem;
}

/******************** 미디어쿼리 ********************/
@media screen and (max-width: 1440px) {

}

#footer, #xyx-footer{
    background: #211212 !important;
}