@charset "UTF-8";

.right {float: right;}
.clearfix::after {
    display: block;
    content: '';
    clear: both;
}
video {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

.inmotion {transform:translate(0, 50px); opacity: 0;}
.play-inmotion.inmotion { transform:translate(0, 0); opacity: 1; transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; -webkit-transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; -moz-transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; -ms-transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; -o-transition:transform 0.6s 0.1s, opacity 0.6s 0.1s; }


/* design-guide */
.inner {
    max-width:375px;
    padding: 0 35px;
    margin:0 auto;
    box-sizing: border-box;
    overflow: hidden;
}
#eventInfo .inner {
    padding: 0 30px;
}


/** 플로팅 버튼 **/
#btnApply {
    position: fixed;
    bottom: -68px;
    width: 100%;
    text-align: center;
}
#btnApply.is-active {
    bottom: 24px;
}

#btnApply .btn {
    display: inline-block;
    max-width: 325px;
    width: 100%;
    height: 66px;
    margin: 0 auto;
    line-height: 66px;
    text-align: center;
    background: #FFD600;
    color: #000;
    font-size: 20px;
    font-weight: 700;
    border-radius: 25px;
}
#btnApply[data-state='joined'] .btn {
    background:#B8BBBF;
    color:#fff;
}
#btnApply[data-state='end_event'] .btn {
    background:#B8BBBF;
    color:#fff;
    pointer-events: none;
}



/* 유의사항 */
#eventInfo .info-title {
    padding-top:80px;
    font-weight: 700;
    font-size: 24px;
    line-height: 38px;
}
#eventInfo .info-cont {
    margin-top:40px;
    margin-bottom:30px;
}
#eventInfo .info-li {
    margin-top: 20px;
    word-break: keep-all;
}
#eventInfo .noline .info-li {
    margin-top: 0;
}
#eventInfo .info-li li {
    position:relative;
    padding-left:10px;
    font-size: 15px;
    line-height: 26px;
}
#eventInfo .info-li li::before {
    /*content: "・";*/
    content: "";
    position: absolute;
    top: 11px;
    left: 1px;
    display: inline-block;
    width:2px;
    height:2px;
    background:#333333;
    border-radius: 50%;
}
.accordion-block {
    padding: 20px 0;
    overflow: hidden;
}
.accordion-block.noline  {
    padding:40px 0 30px;
}
.accordion-block .accordion-btn {
    position: relative;
    width:100%;
    text-align: left;
    font-weight: 700;
    font-size: 18px;
    /*line-height: 21px;*/
    line-height: 28px;
}
.accordion-block .accordion-btn span {
    vertical-align: middle;
}
.accordion-block .accordion-btn .title {
    display: inline-block;
    width: calc(100% - 25px);
}
.accordion-block .accordion-btn .icon-plus {
    position: absolute;
    top:2px; right:0;
}
.accordion-block .accordion-btn .icon-plus svg {
    transform: rotate(0deg);
    transition: transform 0.3s;
}
.accordion-block .accordion-btn.is-active .icon-plus svg {
    transform: rotate(225deg);
    transform-origin: center;
    transition: transform 0.3s;
}
.accordion-block .accordion-content {
    display: none;
}
.accordion-block.unfold .accordion-content {
    display: block;
}
.accordion-block.unfold .accordion-btn {
    pointer-events: none;
}
.accordion-block.unfold .icon-plus {
    display: none;
}

.serial {
    padding-top:30px;
    padding-bottom:140px;
    font-size:15px;
    font-weight:700;
    line-height:26px;
}
#eventInfo .serial .info-li li::before {
    width:4px;
    height:4px;
}



/* theme color */
.theme-light #eventInfo {background: #F1F1F1;}
.theme-light #eventInfo * {color: #333333;}
.theme-dark #eventInfo {background:#444444;}
.theme-dark #eventInfo * {color:#F1F1F1;}
.theme-light .accordion-block {border-top: 2px solid #333333;}
.theme-dark .accordion-block {border-top: 2px solid #F1F1F1;}
.accordion-block.noline {border-top:none;}
.theme-light .accordion-block .accordion-btn .icon-plus svg {stroke: #333333;}
.theme-dark .accordion-block .accordion-btn .icon-plus svg {stroke: #F1F1F1;}
.theme-light #eventInfo #btnStop {color:#005A96; text-decoration: underline;}






@media screen and (max-width: 375px) {
    .inner.no-wrap {
        overflow: hidden;
    }
}

@media screen and (max-width: 340px) {

}