/* Fonts */

/* Global styles */
* {
    margin: 0;
    padding: 0;
}

body {
    background: #fff;
    font: 1em/1.5 'Microsoft Yahei', sans-serif;
}

/* Rotating Slideshow styles */
.rotating-slideshow {
    width: 100%;
    height: auto;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
    /*box-shadow:0px 10px 20px rgba(0,0,0,.5)*/ /*, inset 0 0 200px rgba(0,0,0,.5)*/;
    /*margin-bottom:20px;*/
    background: #e0e0e6;
}

.rotating-slideshow .back {
    height: 0;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
}

.rotating-slideshow .button {
    position: absolute;
    top: 22%;
    /*left: 1175px;*/
    width: 300px;
    height: 55%;
    /*background: #fff;*/
    z-index: 17;
    opacity: .75;
    /* overflow: hidden;*/
}

.rotating-slideshow .button {
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    left: 1175px;
    right: initial;
}

.rotating-slideshow .button a {
    display: block;
    /*position:absolute;*/
    position: fixed;
    width: 360px;
    height: 360px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    outline: none;
    z-index: 17;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rotating-slideshow .button a.pos1 {
    top: 25%;
    top: calc(50% - 366px);
    left: -90%;
    /*display:none;*/
}

.rotating-slideshow .button a.pos2 {
    top: -87%;
    left: 50%;
    left: calc(50% - 224px);
    width: 450px;
    height: 450px;
}

.rotating-slideshow .button a.pos3 {
    top: 25%;
    top: calc(50% - 495px);
    left: 65%;
    left: calc(50% + 135px);
    width: 620px;
    height: 620px;
}

.rotating-slideshow .button a.pos4 {
    top: 34%;
    left: 50%;
    left: calc(50% - 226px);
    width: 450px;
    height: 450px;
}

@media (max-width: 1600px) {

    .rotating-slideshow .button a.pos1 {
        top: calc(50% - 266px);
        left: -90%;
    }

    .rotating-slideshow .button a.pos2 {
        top: -97%;
    }

    .rotating-slideshow .button a.pos3 {
        top: calc(50% - 405px);
    }

    .rotating-slideshow .button a.pos4 {
        top: 50%;
    }
}

@media (min-width: 1600px) {

    .rotating-slideshow .button a.pos1 {
        top: calc(50% - 266px);
        left: -90%;
    }

    .rotating-slideshow .button a.pos2 {
        top: -97%;
    }

    .rotating-slideshow .button a.pos3 {
        top: calc(50% - 405px);
    }

    .rotating-slideshow .button a.pos4 {
        top: 50%;
    }
}


.rotating-slideshow #slider-main {
    width: 100%;
    height: 100vh;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.rotating-slideshow #slider-main img {
    max-width: none;
}

.rotating-slideshow #slider-main .spinner {
    position: absolute;
    top: -172%;
    top: -1030px;
    left: 0;
    right: initial;
    min-width: 100%;
    transition: all .5s ease, opacity .3s ease;
    opacity: .6;
    z-index: 11;
}

.rotating-slideshow #slider-main .spinner-btn-top,
.rotating-slideshow #slider-main .spinner-btn {
    position: absolute;
    top: -172%;
    top: -1030px;
    left: 0;
    min-width: 100%;
    transition: all .5s ease, opacity .3s ease;
    z-index: 15;
}

.rotating-slideshow #slider-main .slides {
    position: relative;
    margin: -100vh auto;
    width: 100%;
    max-width: 1920px;
    height: 100vh;
    display: none;
}

.rotating-slideshow #slider-main .slides img {
    position: absolute;

    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1.5s ease-out;
    z-index: 9;
}

.rotating-slideshow #slider-main .slides img.active {
    opacity: 1;
}

.rotating-slideshow #slider-main .slider-overlay {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    height: 100%;
    position: relative;
}

.rotating-slideshow #slider-main .slider-overlay div {
    position: absolute;
    top: 20%;
    left: -100%;
    opacity: 0;
    transition: all .4s ease, opacity .4s ease;
    z-index: 13;
    color: #fff;
    padding: 0 20px;
    width: 60%;
    text-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

.rotating-slideshow #slider-main .slider-overlay div.active {
    left: 0;
    opacity: 1;
}

#slider-main .slider-overlay h3 {
    text-align: center;
    font-size: 6em;
    color: #FFF;
}

#slider-main .slider-overlay ul {
    display: flex;
    font-family: myFirstFont;
    width: 100%;
    padding-left: 0;
    padding-top: 50px;
}

#slider-main .slider-overlay ul li {
    list-style: none;
    font-size: 1.8em;
    flex: 1;
    text-align: center;
}


#slider-main .slider-overlay ul li i.icon {
    width: 64px;
    height: 64px;
    display: block;
    margin: 0 auto 10px;
}

.jc-system ul li i.icon {
    background: url("../Image/jc_1.png") no-repeat;
}

.jc-platform ul li i.icon {
    background: url("../Image/jc_2.png") no-repeat;
}
.jc-comm ul li i.icon {
    background: url("../Image/jc_3.png") no-repeat;
}
.jc-api ul li i.icon {
    background: url("../Image/jc_4.png") no-repeat;
}
.jc-system ul li.jc1 .icon,
.jc-platform ul li.jc1 .icon,
.jc-comm ul li.jc1 .icon,
.jc-api ul li.jc1 .icon {
    background-position: 0 0;
}

.jc-system ul li.jc2 .icon,
.jc-platform ul li.jc2 .icon, .jc-comm ul li.jc2 .icon, .jc-api ul li.jc2 .icon {
    background-position: -65px 0;
}

.jc-system ul li.jc3 .icon,
.jc-platform ul li.jc3 .icon, .jc-comm ul li.jc3 .icon, .jc-api ul li.jc3 .icon {
    background-position: -130px 0;
}

.jc-system ul li.jc4 .icon,
.jc-platform ul li.jc4 .icon, .jc-comm ul li.jc4 .icon, .jc-api ul li.jc4 .icon {
    background-position: -195px 0;
}

.jc-system ul li.jc5 .icon,
.jc-api ul li.jc5 .icon {
    background-position: -260px 0;
}

.rotating-slideshow #slider-sound {
    display: none;
}

@media only screen and (max-width: 1520px) {
    .rotating-slideshow .button {
        left: initial;
        right: 45px;
    }
}