@charset "utf-8";
/* CSS Document */



*{ padding:0; margin:0;}

.section{ width:100%; height:100%; position:relative; overflow:hidden;}
.splitting-image {

    background-size: 0% 0%;

    position: relative;

    overflow: hidden;

}



.splitting-image img {

    display: block;

}



@supports (--row-size: calc( 100% / 2 )) {

    .splitting-image {

        background-size: cover;

        visibility: hidden;

        --row-size: calc(100% / var(--row-total));

        --col-size: calc(100% / var(--col-total));

    }



    .split-cell {

        background: inherit;

        position: absolute;

        overflow: hidden;

        top: calc(var(--row-size) * var(--row-index));

        left: calc(var(--col-size) * var(--col-index));

        width: calc(0.5px + var(--col-size));

        height: calc(0.5px + var(--row-size));

    }



    .split-cell__inner {

        position: absolute;

        visibility: visible;

        background: inherit;

        width: calc(100% * var(--col-total));

        height: calc(100% * var(--row-total));

        transform: translate(

                calc(-1 * var(--col-size) * var(--col-index)),

                calc(-1 * var(--row-size) * var(--row-index))

        );

    }

}

.tiler {

    position: relative;

    display: inline-block;

    cursor: pointer;

    visibility: hidden;

    width: 33.3%;

    margin: auto;

}



.tiler img {

    display: block;

    margin: auto;

    max-width: 100%;

    visibility: visible;

}



.tiler-overlay {

    background-position: center center;

    margin: auto;

    position: fixed;

    top: 0px;

    bottom: 0px;

    left: 0px;

    right: 0px;

    max-width: 100%;

    max-height: 100%;

    -webkit-perspective: 0px;

    perspective: 0px;

}



.tiler-overlay .split-cell {

    pointer-events: none;

    opacity: 0;

    -webkit-transform: translateZ(-15px);

    transform: translateZ(-15px);

    -webkit-transform-style: preserve-3d;

    transform-style: preserve-3d;

    transition-property: opacity, -webkit-transform;

    transition-property: transform, opacity;

    transition-property: transform, opacity, -webkit-transform;

    transition-duration: 0.8s, 0.7s;

    transition-timing-function: cubic-bezier(0.65, 0.01, 0.15, 1.33);

    /* The center character index */

    --center-x: calc((var(--col-total) - 1) / 2);

    --center-y: calc((var(--row-total) - 1) / 2);

    /* Offset from center, positive & negative */

    --offset-x: calc(var(--col-index) - var(--center-x));

    --offset-y: calc(var(--row-index) - var(--center-y));

    /* Absolute distance from center, only positive */

    --distance-x: calc(

            (var(--offset-x) * var(--offset-x)) / var(--center-x)

    );

    /* Absolute distance from center, only positive */

    --distance-y: calc(

            (var(--offset-y) * var(--offset-y)) / var(--center-y)

    );

    transition-delay: calc( 0.1s * var(--distance-y) + 0.1s * var(--distance-x) );

}



.tiler-overlay {

    z-index: 1;

}



.active .tiler .split-cell {

    -webkit-transform: scale(1);

    transform: scale(1);

    opacity: 1;

}



/*侧面导航*/
#fp-nav {z-index:99999999}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
    height: 1px;
    width: 40px;
    margin: -2px 0 0 -2px;
    border-radius: 0;
 }
 
 
#fp-nav ul li, .fp-slidesNav ul li {
    display: block;
    width: 40px;
    height: 13px;
    margin: 7px;
    position: relative;
}
 #fp-nav ul li a, .fp-slidesNav ul li a {
   display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span {
   border-radius: 0;
    position: absolute;
    z-index: 1;
    height: 1px;
    width: 20px;
    border: 0;
    background: #fff;
    right:0;
    top: 50%;
    margin:0;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
    height: 1px;
    width: 40px;
    border-radius: 0;
	margin: -2px 0 0 -2px;
	left:0;
	
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
    height: 1px;
    width: 40px;
    border-radius: 0;
	margin: -2px 0 0 -2px;
	left:0;
}
.mycon{

    clear: both;
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 1;
}
.slogan{ display: flex; max-width: 1200px; margin: 0 auto; align-items: center; justify-content: center; font-size: 50px; color: #fff; line-height: 80px; height: 100vh;}