/* PC 适配 */

/*anim*/
@-webkit-keyframes changeOpacity {
    0% { opacity: 0; filter: Alpha(opacity=0); }
    100% { opacity: 1; filter: Alpha(opacity=100); }
}

@-webkit-keyframes slideText {
    0% { -webkit-transform: translateX(-900px); -moz-transform: translateX(-900px); -ms-transform: translateX(-900px); -o-transform: translateX(-900px); transform: translateX(-900px); }
    100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}

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

@-webkit-keyframes actionHint {
    0% { height: 0; transform: translateY(-50px); }
    50% { height: 50px; transform: translateY(0px); }
    100% { transform: translateY(50px); }
}

#server .server { width: 100%; overflow: hidden; }
#fullscreen-video { display: block; width: 100%; height: 100%; }
#fullscreen-video img { width: 100%; }
#server #home-intro { position: absolute; width: 50%; height: 100%; }
#server #home-svg { position: absolute; overflow: hidden; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; filter: Alpha(opacity=0); -webkit-animation: changeOpacity .5s ease forwards; -moz-animation: changeOpacity .5s ease forwards; -ms-animation: changeOpacity .5s ease forwards; -o-animation: changeOpacity .5s ease forwards; animation: changeOpacity .5s ease forwards; -webkit-animation-delay: .4s; -moz-animation-delay: .4s; -ms-animation-delay: .4s; -o-animation-delay: .4s; animation-delay: .4s; }
#server #home-svg .rect { width: 60%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-55%); }
#server #home-svg .bg { width: 50%; display: inline-block; border: 600px solid #d4d4d4; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#server #home-svg .before, #server #home-svg .after { background-color: #d4d4d4; }
#server #home-intro h2 { position: absolute; top: 54%; left: 94%; z-index: 3; width: 100%; -webkit-transform: translateY(-58%); -moz-transform: translateY(-58%); -ms-transform: translateY(-58%); -o-transform: translateY(-58%); transform: translateY(-58%); }
#server #home-intro h2.h2 { top: 74%;color: #fff;font-size: 16px;opacity: 0; }
#server #home-intro h2.h2 p:nth-of-type(1) { font-size: 20px;font-weight: bold;margin-bottom: 35px; }
#server #home-intro h2.h2 p:nth-of-type(2) { font-size: 16px;margin-bottom: 100px;line-height: 1.5; }
#server #home-intro p { width: 100%; }
#server #home-intro h2 span { transform: translateY(-50px); -webkit-transform: translateY(-50%); opacity: 0; display: inline-block; margin-bottom: 20px; padding: 25px 25px 25px 20px; background: #d4d4d4; font-weight: 700; font-size: 2.8rem; line-height: .9em; word-break: keep-all;cursor: pointer; }
#server .anmtop1 { animation: anmtop1 .7s ease forwards; animation-delay: 0.4s; -webkit-animation: anmtop1 .7s ease forwards; -webkit-animation-delay: 0.4s; }
#server .anmtop2 { animation: anmtop1 .7s ease forwards; animation-delay: 0.6s; -webkit-animation: anmtop1 .7s ease forwards; -webkit-animation-delay: 0.6s; }
#server .anmtop3 { animation: anmtop1 .7s ease forwards; animation-delay: 0.8s; -webkit-animation: anmtop1 .7s ease forwards; -webkit-animation-delay: 0.8s; }
#server .anmtop4 { animation: anmtop1 .7s ease forwards; animation-delay: 1s; -webkit-animation: anmtop1 .7s ease forwards; -webkit-animation-delay: 1s; }
#server .anmtop5 { animation: anmtop1 .7s ease forwards; animation-delay: 1.2s; -webkit-animation: anmtop1 .7s ease forwards; -webkit-animation-delay: 1.2s; }
#server .anmtop6 { animation: anmtop1 .7s ease forwards; animation-delay: 1.4s; -webkit-animation: anmtop1 .7s ease forwards; -webkit-animation-delay: 1.4s; }
#server .anmtop7 { animation: anmtop1 .7s ease forwards; animation-delay: 1.4s; -webkit-animation: anmtop1 .7s ease forwards; -webkit-animation-delay: 1.6s; }

/* 2K屏 适配 */
@media only screen and (min-width:1920px ) {
    #server #home-intro h2 span { font-size: 2.8rem; }
}

/* 低分屏 适配 */
@media only screen and (max-width:1600px ) {
}

/* iPad 适配 */
@media only screen and (max-width:1200px ) {
    #server #home-intro h2 { right: 51%; }
    #server #home-intro h2 span { font-size: 28px; padding: 10px 10px 10px 20px; margin-bottom: 10px; }
}

/* iPad 低分屏 适配 */
@media only screen and (max-width:1000px ) {
    #server #home-intro h2 span { font-size: 28px; margin-bottom: 10px; }
}

/* iPad 低分屏 适配 */
@media only screen and (max-width:910px ) {
    #server #home-svg .bg { width: 65%; }
    #server #home-svg .rect { width: 75% }
}


/* Mobile 适配 */
@media screen and (max-width:720px) {
    #server #home-intro { width: 100%; }
    #server #home-intro h2 { left: 0; top: 10%; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
    #server #home-intro h2 span { padding: 15px; font-size: 28px; padding: 10px 10px 10px 20px; margin-bottom: 10px; }
    /* #fullscreen-video { background-image: url(../images/server/bg_mb.gif); } */
    .h-0324 { margin-left: 20px; }
    .h-0324 p:nth-of-type(1) { font-size: 12px!important;font-weight: bold!important; }
    .h-0324 p:nth-of-type(2) { font-size: 10px!important; }
}