html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

body{
    position: relative;
    background-image: url(../images/cover.jpg);
    background-color: #15193f;
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 2000px;    
}

.main-title{
    position: absolute;
    left: 50%;
    top: 20vw;
    width: 295px;
    height: 152px;
    transform: translateX(-50%);
    background-image: url(../images/main-title.png);
    background-size: contain;
}

.m-dl{
    position: absolute;
    left: 50%;
    top: 120vw;
    width: 205px;
    height: 65px;
    transform: translateX(-50%);
    background-image: url(../images/btn-dl.png);
    background-size: contain;    
}

.i-pic{
    width: 46px;
    height: 46px;
    background-image: url(../images/sprite-item.png);
    background-size: 277px auto;   
}

.i-empty{
    width: 46px;
    height: 46px;    
}

/* head */
.u-nav{
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: transparent;
    font-size: 0;
    justify-content: flex-end;
    background-color: #242429;

    z-index: 20;   
}

h1.logo{
    flex-grow: 1;
    height: 50px;
    width: 40px;
    background-image: url(../images/logo.png);
    background-size: auto 40px;
    background-position: center;
    background-repeat: no-repeat;     
}

.u-nav a{
    display: block;
    width: 75px;
    height: 50px;
    background-image: url(../images/sprite-nav.png);
    background-size: auto 100px;    
}

.nav-item{
    width: 75px;
    height: 50px;
    background-image: url(../images/sprite-nav.png);
    background-size: auto 100px; 
}

.i-md {
    position: absolute;
    top: 150vw;
    left: 50%;
    width: 35px;
    height: 44px;
    margin-left: -17.5px;
    background-image: url(../images/icon-md.png);
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-animation: moveUp 2.2s infinite cubic-bezier(.65, .05, .36, 1);
    animation: moveUp 2.2s infinite cubic-bezier(.65, .05, .36, 1);
}

.gotop {
    position: relative;
    left: 50%;
    width: 35px;
    height: 37px;
    margin-top: 15vw;
    margin-left: -17.5px;
    background-image: url(../images/icon-gotop.png);
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-animation: moveUp 2.2s infinite cubic-bezier(.65, .05, .36, 1);
    animation: moveUp 2.2s infinite cubic-bezier(.65, .05, .36, 1);
}

@-webkit-keyframes moveUp {
    0% {
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%);
        opacity: 0;
    }
    50% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(20%);
        transform: translateY(20%);
        opacity: 0;
    }
}

/* viewport */
.m-viewport{
    padding-top: 180vw;
    padding-bottom: 150px;
    width: 92vw;
    margin: 0 auto;
}

.evt-item{
    margin-top: 3.75rem;
}

.evt-title{
    width: 100%;
    height: 4.5313rem;
    margin-bottom: .5em;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.evt-title.title-1{
    background-image: url(../images/title-1.png);
}

.evt-title.title-2{
    background-image: url(../images/title-2.png);
}

.evt-title.title-3{
    background-image: url(../images/title-3.png);
}

.tag-title{
    width: 275px;
    height: 44px;
    line-height: 44px;
    margin: 0 auto;
    font-size: 1.4em;
    font-weight: 700;
    color: #e0c58b;
    text-align: center;
    background-image: url(../images/title-name.png);
    background-size: contain;
}

p.time{
    width: 22rem;
    height: 1.5rem;
    line-height: 1.5rem;
    margin: 0.5em auto 0;
    text-align: center;
    color: #ffc246;
    background-image: url(../images/bg-time.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

p.intro{
    margin-top: .5rem;
    color: #acacac;
    text-align: center;
}

/* HERO */
.hero-item{
    margin-top: 2.1875rem;
}

.m-skill{
    margin-top: 1.25rem;
}

.skill-view{
    position: relative;
    width: 100%;
    height: 51vw;
    margin: 0 auto;
    background-image: url(../images/bg-gif.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.skill-view .tag{
    position: absolute;
    top: 50%;
    left: 5%;
    width: 25px;
    height: 100%;
    transform: translate(-5%,-50%);
    background-size: 25px auto;
    background-position: center;
    background-repeat: no-repeat;
}

.skill-view .tag.h-1{
    background-image: url(../images/hero-tag-1.png);
}

.skill-view .tag.h-2{
    background-image: url(../images/hero-tag-2.png);
}

.skill-view .view-container{
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 72vw;
    height: 40vw;
    padding: 5px;
    background-color: #350100;
}

.skill-view .u-loading{
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%,-50%);
    background-image: url(../images/loading.gif);
    background-size: contain;
}

.view-container .img,
.view-container img{
    width: 100%;
    height: 100%;
}

.skill-bd{
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.skill-bd .i-skill{
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 .5em;
    background-image: url(../images/sprite-skill.png);
    background-size: auto 100%;
    background-position: 100% 0;
}

.skill-bd .pic-skill{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 47px;
    height: 47px;
    transform: translate(-50% ,-50%);
    background-image: url(../images/sprite-skill-list.png);
    background-size: 100% auto;    
}

.skill-bd .active .i-skill{
    background-position: 0 0;
}

.skill-name{
    position: relative;
    margin-top: .5rem;
    text-align: center;
    color: #a9190b;
    vertical-align: middle;
}

.skill-name i{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 1px;
    vertical-align: middle;
    background-image: url(../images/dec-skill.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.tag-name i{
    display: inline-block;
    width: 8px;
    height: 8px;
    vertical-align: middle;
    background-image: url(../images/dec-a.png);
    background-size: contain;
    background-repeat: no-repeat;    
}

.active .skill-name{
    color: #dfc58c;
}

.active .skill-name i{
    background-image: url(../images/dec-a.png);
}

.skill-text{
    position: relative;
    margin-top: 1rem;
    padding: 9px 6px;
    color: #acacac;
    border: .5px solid #54464d;
}

.skill-text .icon{
    position: absolute;
    display: block;
    content: '';
    top: -6px;
    left: 5%;
    width: 6px;
    height: 6px;
    background-image: url(../images/icon-top.png);
    background-size: contain;
    transition: all .4s ease-in-out;
    z-index: 2;
}

.skill-text b{
    color: #dfc58c;
}

.item-view{
    display: flex;
    justify-content: space-between;
    align-items:center;
    margin-top: 2em;
    padding: 1em 1em;
    background-color: #232749;
    background-image: url(../images/bg-show.png);
    background-size: 100% 100%;
}

.item-view .item-icon{
    height: 62px;
    padding: 8px 12px;
    box-sizing: border-box;
    background-color: #15193f;
}

.item-view .i-arrow{
    width: 21px;
    height: 42px;
    background-image: url(../images/arrow.png);
    background-size: cover;
}

.item-detail{
    width: 17em;
}

.item-detail .item-name{
    width: 100%;
    height: 1.6em;
    line-height: 1.6em;
    text-align: center;
    color: #dfc58c;
    background-image: url(../images/bg-itemname.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.item-detail .item-text{
    margin-top: .5em;
    color: #acacac;
}

.status-view p{
    color: #acacac;
}

.status-view p.tag-name{
    margin-top: .5em;
    margin-bottom: .5em;
    color: #dfc58c;
}

.status-list{
    display: flex;
    margin-top: 1em;
}

.status-list li{
    width: 50%;
}

.status-detail{
    padding-left: 1.3em;
    background-image: url(../images/bg-side.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

.status-detail p{
    margin-bottom: .5em;
}

.apply-detail{
    display: flex;
    justify-content: center;
    align-items: center;
}

.apply-detail .item-icon{
    padding: 8px 7px;
    background-color: #232749;
}

.apply-detail .item-name{
    margin-top: 7px;
    text-align: center;
}

.apply-detail .i-arrow{
    min-width: 31px;
    height: 28px;
    line-height: 28px;
    margin: 0 .5em;
    text-align: center;
    color: #0b0d22;
    background-image: url(../images/i-arrow-3.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.apply-detail .item-list{
    position: relative;
    width: 10em;
    height: 86px;
    box-sizing: border-box;
    text-align: center;
    border: 5px solid #232749;
    border-bottom: none;
}

.apply-detail .item-list p{
    line-height: 1.5em;
    margin: 0 2px;
    border-bottom: .5px dashed #232749;
}

.apply-detail .item-list b{
    font-weight: normal;
    color: #dfc58c;
}

.apply-detail .item-list p:last-child{
    border: none;
}

.apply-detail .item-list h6{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2em;
    line-height: 2em;
    font-size: 1em;
    color: #acacac;
    background: #232749;
}

.map-item,
.act-item{
    margin-top: 3em;
}

.map-item-list{
    display: flex;
    margin-top: 2em;
    padding: 1em 1.5em;
    text-align: center;
    background-color: #232749;
    background-image: url(../images/bg-itemlist.png);
    background-size: 100% 100%;
}

.map-item-list .item-icon{
    display: inline-block;
    padding: 5px;
    margin: 0 .5em;
    background-color: #15193f;
}

.act-time-view{
    margin-top: 1.5em;
}

.act-time-view li{
    display: inline-block;
    width: 48%;
    margin-bottom: .7em;
    box-sizing: border-box;
    border: 5px solid #232749;
    border-top: none;
}

.act-time-view h6{
    height: 27px;
    line-height: 27px;
    font-size: 1em;
    text-align: center;
    color: #dfc58c;
    background-color: #232749;
}

.act-time-view .reward-view{
    display: flex;
    justify-content: center;
    margin: 7px 0;
}

.reward-view .item-icon{
    padding: 5px;
    margin: 0 5px;
    background-color: #232749;  
}

/* TIPS */
.u-tips{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 21;
}

.u-tips .u-mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .75); 
}


.u-tips .tip-container{
    position: relative;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.u-tips .tip-container img{
    width: 100%;
    max-height: 100%;
}