@charset "UTF-8";

._fnctWrap {line-height:1.5;}

/* User Service */
.wrap-user {position: fixed; left: -99999999px; top: 0; z-index: 10; width: 100%; height: 100%; background: rgba(0,0,0,.6); opacity: 0; transition: opacity 1s;}
.wrap-user.on {left: 0; opacity: 1; transition: opacity 1s;}
.wrap-user .container {display: table; width: 100%; height: 100%; table-layout: fixed;}
.wrap-user .box-user {display: table-cell; vertical-align: middle;}
.wrap-user .con-user {position: relative; top: -100%; transition: 1s;}
.wrap-user.on .con-user {top: 0%;}
.wrap-user .slider {padding: 0 12%;}
.wrap-user .slider li {padding: 0 25px; text-align: center;}
.wrap-user .slider li.ani {top: -100px;}
.ani-on.wrap-user .slider li.ani {top: 0;}
.ani-on.wrap-user .slider li.ani1 {transition-delay: .4s;}
.ani-on.wrap-user .slider li.ani2 {transition-delay: .6s;}
.ani-on.wrap-user .slider li.ani3 {transition-delay: .8s;}
.ani-on.wrap-user .slider li.ani4 {transition-delay: 1s;}
.ani-on.wrap-user .slider li.ani5 {transition-delay: 1.2s;}
.ani-on.wrap-user .slider li.ani6 {transition-delay: 1.4s;}
.ani-on.wrap-user .slider li.ani7 {transition-delay: 1.6s;}
.ani-on.wrap-user .slider li.ani8 {transition-delay: 1.8s;}
.ani-on.wrap-user .slider li.ani9 {transition-delay: 2s;}
.ani-on.wrap-user .slider li.ani10 {transition-delay: 2.2s;}
.wrap-user .slider li img {display: inline-block;}
.wrap-user .prev,
.wrap-user .next {position: absolute; top: 35.5%; z-index: 10; display: inline-block; width: 30px; height: 50px; vertical-align: middle; text-indent: -99999px;}
.wrap-user .prev {left: 8%; background: url('../images/btn-user-prev.png') no-repeat left center; transition: 1s;}
.wrap-user .prev:hover {background-position: right center;}
.wrap-user .next {right: 8%; background: url('../images/btn-user-next.png') no-repeat right center; transition: 1s;}
.wrap-user .next:hover {background-position: left center;}
.wrap-user .control {margin-top: 40px; text-align: center; font-size: 0;}
.wrap-user .control > div {display: inline-block; vertical-align: middle;}
.wrap-user .control .state {padding: 8px 30px; background: #0065d7; border-radius: 100px; font-family: 'Dream Regular'; font-size: 18px; color: #fff;}
.wrap-user .control .state .total {display: inline-block; margin-top: -4px; font-size: 20px; color: #72bdda; vertical-align: middle;}
.wrap-user .control .close,
.wrap-user .control .today {padding: 8px 30px; background: #101213; border-radius: 100px; cursor: pointer;}
.wrap-user .control .close {margin: 0 40px;}
.wrap-user .control .today {display: none; background: #060606;}
.wrap-user .control .close button,
.wrap-user .control .today button {display: inline-block; font-family: 'Dream Regular'; font-size: 18px; vertical-align: middle; color: #fff;}
.wrap-user .control .close::after,
.wrap-user .control .today::after {content: ''; display: inline-block; width: 14px; height: 13px; margin-left: 15px; background: url('../images/btn-user-close.png') no-repeat center center; vertical-align: middle; transform: rotate(0deg); transition: 1s;}
.wrap-user .control .close:hover::after,
.wrap-user .control .today:hover::after {transform: rotate(180deg);}

.edit .wrap-user {position: static; left: 0; padding: 150px 0; opacity: 1;}

@media all and (max-width: 1800px) {
    .wrap-user .slider {padding: 0 5%;}
    .wrap-user .prev {left: 2%;}
    .wrap-user .next {right: 2%;}
    .ani-on.wrap-user .slider li.ani {transition: 0s;}
    .wrap-user .control .close {margin: 0 13px;}
}

@media all and (max-width: 500px) {
    .wrap-user .slider {padding: 0 7%;}
    .wrap-user .prev {left: 0%;}
    .wrap-user .next {right: 0%;}
}