/*-------------------------------------
 *
 *  EverMC SkyBlock prop
 *
 *  (c) 2020 EverMC Server. All rights reserved.
 *  (c) 2020 djytw.
 *
 *------------------------------------/

/* common */
*{
    margin:0;
    padding:0;
    font-family:'Segoe UI', "Microsoft YaHei", Verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
}
@media (max-width: 2400px) {
    html {
        font-size:95%
    }
}

@media (max-width: 2200px) {
    html {
        font-size:90%
    }
}

@media (max-width: 1920px) {
    html {
        font-size:85%
    }
}

@media (max-width: 1600px) {
    html {
        font-size:80%
    }
}

@media (max-width: 1480px) {
    html {
        font-size:62.5%
    }
}

@media (max-width: 1280px) {
    html {
        font-size:50%
    }
}
@media (max-width: 992px) {
    html {
        font-size:45%
    }
}

@media (max-width: 799px) {
    html {
        font-size:37.5%
    }
}

sup{
    font-size: 16px;
    background: #d66;
    border-radius: 3px;
    font-family: sans-serif;
    transform: translate3d(0, -10px, 0);
    letter-spacing: 0;
    color:white;
    display: inline-block;
}
.c-t{
    color: #04dda8;
    background: transparent;
}
@supports (-webkit-text-fill-color:transparent){
    .c-t{
        background:linear-gradient(0deg,#04dda8,#5cc6ce,#fff);
        background-size: 600px 600px;
        -webkit-text-fill-color:transparent;
        -webkit-background-clip:text;
        -webkit-animation-name:masked-animation;
        -webkit-animation-duration:5s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:linear;
        /*noinspection CssInvalidPropertyValue*/
        background-clip:text;
        animation-name:masked-animation;
        animation-duration:5s;
        animation-iteration-count:infinite;
        animation-timing-function:linear;
        color:#fff;
        font-weight: 400;
        text-shadow: none;
    }

    @keyframes masked-animation {
        0% {background-position:100px 500px;}
        50% {background-position:500px 100px;}
        100% {background-position:100px 500px;}
    }
}


#f-f1{
    width:100%;
    position:relative;
    align-items: center;
    display: flex;
    background-color: #ccc;
    text-align: center;
    /*noinspection CssUnknownTarget*/
    background:url('../skyland/img/p1.jpg');
    height:100vh;
    z-index: 10;
    background-position: center;
    background-size: cover;
}
#f-p1{
    width:auto;
    margin: calc(-2rem + 100px) 0 0 calc(50% - 100px);
}
#f-p1 h2{
    font-weight: 200;
    font-family: "Segoe UI", "Microsoft YaHei", serif;
    font-size: calc(4rem + 10px);
    line-height: 0.9;
    text-align: left;
    color:white;
    margin-bottom: 100px;
}
#f-p1 h2 small img{
    height: 1.5rem;
    float: left;
}
#f-p1 h2 small p{
    height: 1.5rem;
    float: left;
}
#f-p1 h2 small{
    font-size: 1.5rem;
    line-height: 1px;
}
#f-p1 h2 span{
    font-weight: 400;
    font-size: calc(1.5rem + 10px);
    line-height: 5rem;
    letter-spacing: .2rem;
    text-align: center;
    width: inherit;
}
footer{
    display:flex;
    align-items: center;
    padding:1rem 2rem;
}
footer a{
    display:inline;
    color:#1e88e5;
    text-decoration: none;
    padding: 0 .5rem;
}
footer *{
    text-shadow: none;
}

@media only screen and (min-width: 800px){
    footer>span:not(:last-child)::after{
        content: "|"
    }
}
/* title bar */
.titlebar{
    text-align: left;
    width:calc(75% + 170px);
    position:relative;
    display: flex;
    background: linear-gradient(-55deg,#58cecb,#04dda8);
    font-family: "Segoe UI","Microsoft YaHei";
    overflow:hidden;
    flex-direction:column;
    z-index:20;
    padding: 6rem 0 6rem calc(25% - 170px);
    text-shadow: none;
}
.titlebar p{
    font-size: 4rem;
    font-weight: 200;
    color:white;
    text-shadow: none;
}
.titlebar div, .titlebar p{
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    -webkit-transform: translate3d(0, 30px, 0);
    -webkit-transition: -webkit-transform 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98),opacity 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98);
    transition: transform 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98),opacity 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98);
}
.titlebar div.show, .titlebar p.show{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.titlebar p:nth-child(2),.titlebar div{
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
}
div.footnote{
    position:absolute;
    bottom:0px;
    font-size: 1rem;
    color:white;
}
div.footnote a{
    color:white;
}

/* section */
.section{
    position:relative;
    justify-content: center;
    display: flex;
    background: #ccc;
    text-align: left;
    height:100vh;
    flex-direction:column;
    overflow: hidden;
}
.section>p, .section>h2{
    font-size: 4rem;
    padding: 0;
    font-weight: 200;
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    -webkit-transform: translate3d(0, 30px, 0);
    -webkit-transition: -webkit-transform 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98),opacity 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98);
    transition: transform 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98),opacity 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98);
    z-index:10;
    color:white;
}
.section>*:first-child{
    font-size: 6rem;
    font-weight: 600;
    padding:3rem 0;
}
.section>*.show:nth-child(2){
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
}
.section>*.show:nth-child(3){
    -webkit-transition-delay: .6s;
    transition-delay: .6s;
}
.section>p.show, .section p span.show, .section h2.show{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.section>p span{
    display: inline-block;
    transform: translate3d(-30px, 0, 0);
    -webkit-transform: translate3d(-30px, 0, 0);
    opacity: 0;
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.25, 0.46, 0.33, 0.98),opacity 400ms cubic-bezier(0.25, 0.46, 0.33, 0.98);
    transition: transform 400ms cubic-bezier(0.25, 0.46, 0.33, 0.98),opacity 400ms cubic-bezier(0.25, 0.46, 0.33, 0.98);
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    margin-left: 30px;
}
.section img{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:0
}
.section video{
    position:absolute;
    top:0px;
    left:0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index:0
}
.section.nospan>*.show:nth-child(2){
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
}
.section.nospan>*.show:nth-child(3){
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
}

#f-f3{
    width: 55%;
    padding-left:45%;
    background-size:auto;
    background-repeat: no-repeat;
    background-position: 50%;
    /*noinspection CssUnknownTarget*/
    background: url("../skyland/img/p2.jpg");
    z-index:1;
}
#f-f4{
    align-items: center;
    text-align: center;
    width:100%;
    /*noinspection CssUnknownTarget*/
    background: url("../skyland/img/p3.jpg");
    background-size:cover;
    background-position:center;
}
#f-f5{
    align-items: center;
    text-align: center;
    width:100%;
    /*noinspection CssUnknownTarget*/
    background: url("../skyland/img/p5.jpg");
    background-size:cover;
    background-position:center;
}
#f-f8{
    padding-left: 20%;
    width:80%;
    /*noinspection CssUnknownTarget*/
    background: url("../skyland/img/p8.jpg");
    background-size:cover;
    background-position:center;
}
#f-f9{
    padding-left: 50%;
    width:50%;
    /*noinspection CssUnknownTarget*/
    background: url("../skyland/img/p9.jpg");
    background-size:cover;
    background-position:center;
}
#f-f11{
    padding-left: 20%;
    width:80%;
    /*noinspection CssUnknownTarget*/
    background: url("../skyland/img/p11.png");
    background-size: auto 100%;
    background-position:70% 50%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
#f-f11 *{
    color:black !important;
}
#f-f12{
    padding-left: 20%;
    width:80%;
    /*noinspection CssUnknownTarget*/
    background: url("../skyland/img/p12.png") #000;
    background-size:auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position:center;
}
#f-f13{
    padding-left: 20%;
    width:80%;
    /*noinspection CssUnknownTarget*/
    background: url("../skyland/img/p13.jpg");
    background-size:cover;
    background-position:center;
}
#f-f13>*:nth-child(3){
    padding-top: 2rem;
}
/* showcase */

@media only screen and (min-width: 800px){
    .showcase{
        position:relative;
        display: flex;
        background-color: #0a0a14;
        text-align: center;
        height:25vw;
        max-height:400px;
        flex-direction:row;
        width:100%;
    }
    .showcase>div{
        width: 33.33%;
        position:relative;
        opacity: 0;
        transform: translate3d(0, 30px, 0);
        -webkit-transform: translate3d(0, 30px, 0);
        -webkit-transition: -webkit-transform 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98),opacity 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98);
        transition: transform 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98),opacity 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98);
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        background:inherit;
        flex-direction:column;
    }
    .showcase>div.show:nth-child(2){
        -webkit-transition-delay: .5s;
        transition-delay: .5s;
    }
    .showcase>div.show:nth-child(3){
        -webkit-transition-delay: 1s;
        transition-delay: 1s;
    }
    .showcase>div.show:nth-child(4){
        -webkit-transition-delay: 1.5s;
        transition-delay: 1.5s;
    }
    .showcase>div.show{
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .showcase>div.show>*{
        -webkit-transition: -webkit-transform 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98),opacity 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98);
        transition: transform 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98),opacity 700ms cubic-bezier(0.25, 0.46, 0.33, 0.98);
    }
    .showcase>div.show>div{
        background:#fff;
        height:1px;
        width:0px;
        margin-top:10px;
    }
    .showcase>div.show:hover>div{
        width:20%;
        -webkit-transition: width 200ms cubic-bezier(0.25, 0.46, 0.33, 0.98);
        transition: width 200ms cubic-bezier(0.25, 0.46, 0.33, 0.98);
        -webkit-transition-delay: .1s;
        transition-delay: .1s;
    }
    .showcase>div.show:hover>*{
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    .showcase>div>img{
        height:40%;
    }
    .showcase>div>p{
        color:white;
        font-weight: 200;
        font-size: 3.5rem;
    }
    .showcase>div>p:last-child{
        position:absolute;
        top: calc(70% + 3.5rem);
        width:100%;
        left:0;
        opacity:0;
        font-size: 2rem;
    }
    .showcase>div.show:hover>p:last-child{
        -webkit-transition-delay: .3s;
        transition-delay: .3s;
        opacity:1;
    }
    .showcase>p{
        position:absolute;
        left: 0px;
        top: 0px;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        color:white;
        width:100%;
        height:100%;
        font-weight: 200;
        font-size:4rem;
    }
    .showcase>div.show>p:last-child>br{
        display: none;
    }
}

/*btn*/
a.btn{
    display: block;
    -webkit-transition: .7s cubic-bezier(0,.8,.26,.99);
    -o-transition: .7s cubic-bezier(0,.8,.26,.99);
    transition: .7s cubic-bezier(0,.8,.26,.99);
    background-color: #36b030;
    background-repeat: no-repeat;
    margin-top:1rem;
    width: 300px;
    height: 60px;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
    -webkit-box-shadow: 0 -4px rgba(0,0,0,.3) inset, 0 4px rgba(255,255,255,.5) inset, -4px 0 rgba(255,255,255,.5) inset, 4px 0 rgba(0,0,0,.3) inset;
    box-shadow: 0 -4px rgba(0,0,0,.3) inset, 0 4px rgba(255,255,255,.5) inset, -4px 0 rgba(255,255,255,.5) inset, 4px 0 rgba(0,0,0,.3) inset;
    z-index: -1;
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 200;
}
a.btn:hover{
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    background-color: #313131;
    -webkit-box-shadow: 0 -4px rgba(0,0,0,.5) inset, 0 4px rgba(255,255,255,.2) inset, -4px 0 rgba(255,255,255,.2) inset, 4px 0 rgba(0,0,0,.5) inset;
    box-shadow: 0 -4px rgba(0,0,0,.5) inset, 0 4px rgba(255,255,255,.2) inset, -4px 0 rgba(255,255,255,.2) inset, 4px 0 rgba(0,0,0,.5) inset;
}
a.btn.btn-qq{
    /*noinspection CssUnknownTarget*/
    background: url("../skyland/img/qq.png") #31b0d5;
    background-size:auto 100%;
    background-repeat: no-repeat;
    background-position:center;
}
a.btn.btn-qq:hover{
    /*noinspection CssUnknownTarget*/
    background: url("../skyland/img/qq.png") #313131;
    background-size:auto 100%;
    background-repeat: no-repeat;
    background-position:center;
}
a.btn.btn-sign{
    /*noinspection CssUnknownTarget*/
    background: url("../skyland/img/sign.png") #36b030;
    background-size:auto 100%;
    background-repeat: no-repeat;
    background-position:center;
}
a.btn.btn-sign:hover{
    /*noinspection CssUnknownTarget*/
    background: url("../skyland/img/sign.png") #313131;
    background-size:auto 100%;
    background-repeat: no-repeat;
    background-position:center;
}
a.btn.head-btn{
    width: calc(7.5rem + 20px);
    height: calc(1.5rem + 4px);
    float: left;
    padding: 1rem 0 calc(1rem + 4px) 0;
    margin-right: 2rem;
    font-weight: 500;
    background-color: #888;
    text-shadow: 1px 1px 0px black;
}

a.btn.head-btn:hover{
    background-color: #313131;
}
a.btn.btn-qqcopy{
    background: #31b0d5;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}
a.btn.btn-qqcopy:hover{
    background: #313131;
}
a.btn.btn-qqcopy span{
    margin: 0;
}

@media only screen and (max-width: 799px){
    .section{
        padding-left: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }
    .section>*:first-child{
        font-size: 7rem !important;
    }
    #f-f8>*:first-child{
        font-size: 5.5rem !important;
    }
    .titlebar{
        width:calc(100% - 2rem);
        padding: 6rem 0 6rem 2rem;
    }
    #f-f4>*:nth-child(2){
        margin-left:0px;
    }
    .section sup{
        display: block;
        transform: none;
    }
    #f-f13>*:nth-child(3){
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction:column;
    }
    .showcase{
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction:column;
        background-color: #0a0a14;
        padding: 10% 5%;
    }
    .showcase>div{
        width:70%;
        display:flex;
        flex-direction:column;
        padding-left: 30%;
        position: relative;
        height:30vw;
    }
    .showcase>div>img{
        width:30%;
        position:absolute;
        left:0;
        top:0;
    }
    .showcase>div>p{
        color:white;
        font-weight: 200;
        font-size: 3.5rem;
    }
    .showcase>div>div{
        width:80%;
        background: #666;
        height:1px;
        margin-left:10%;
    }
    .showcase>div>p:first-of-type{
        margin: 1rem 0;
    }
    .showcase>div>p:last-of-type{
        font-size: 2.5rem;
        margin: 1rem 0;
        width:90%;
        padding:0 5%;
    }
    footer{
        flex-direction:column;
        padding:2rem
    }
    footer>span{
        display: block;
        padding:.5rem;
        font-size:2.5rem;
    }
    #f-p1{
        margin:auto;
        line-height: 1rem;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-direction:column;
    }
    #f-f1{
        background-position: 30% 80%;
        /*noinspection CssUnknownTarget*/
        background-image: url("../skyland/img/p1m.jpg");
    }
    #f-p1 h2{
        font-size: calc(8rem - 10px);
    }
    #f-p1 h2 br{
        display: none;
    }
    #f-p1 h2 span{
        font-size: calc(3rem + 10px);
        margin-bottom: 10px;
        display: block;
        text-align: center;
    }
    a.btn.head-btn{
        width: calc(20rem + 30px);
        font-size: calc(2rem + 10px);
        padding: 2.5rem 0;
        margin:5px 0;
        z-index: 100;
    }
    #f-f11{
        /*noinspection CssUnknownTarget*/
        background: url("../skyland/img/p11.png");
        background-size:cover;
        background-position:center;
    }
    #f-f12{
        background-size: 100%;
    }
    #f-f12>*:first-child{
        font-size:6.5rem !important;
    }
}