@charset "UTF-8";

/*----------------------------------------

www.weinian.com.cn

------------------------------------------*/




------------------------------------------*/



@-webkit-keyframes stepOne {
    0.0% {
        opacity: 0;
        -webkit-transform: scale(0) rotateY(360deg);
        transform: scale(0) rotateY(360deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1) rotateY(0deg);
        transform: scale(1) rotateY(0deg);
    }
}

@keyframes stepOne {
    0.0% {
        opacity: 0;
        -webkit-transform: scale(0) rotateY(360deg);
        transform: scale(0) rotateY(360deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1) rotateY(0deg);
        transform: scale(1) rotateY(0deg);
    }
}

@-webkit-keyframes stepTwo {
    0.0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    25% {
        opacity: .5;
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }
    50% {
        opacity: 0;
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    75% {
        opacity: .5;
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes stepTwo {
    0.0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    25% {
        opacity: .5;
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }
    50% {
        opacity: 0;
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    75% {
        opacity: .5;
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}



@-webkit-keyframes labelLine {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotateY(90deg);
        transform: scale(0) rotateY(90deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1) rotateY(0deg);
        transform: scale(1) rotateY(0deg);
    }
}

@keyframes labelLine {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotateY(90deg);
        transform: scale(0) rotateY(90deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1) rotateY(0deg);
        transform: scale(1) rotateY(0deg);
    }
}

@-webkit-keyframes letterLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes letterLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


/*----------------------------------------

section global

------------------------------------------*/

section {
    padding-bottom: 60px;
}

section:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, .88);
    background-image: url(../images/oddbg.png);
    background-position: center center;
    background-size: cover;
}

section:nth-of-type(odd) nav {
    color: #fff;
}

section:nth-of-type(odd) nav h3:after {
    background-color: rgba(255, 255, 255, .22);
}

section:nth-of-type(even) {
    background-image: url(../images/simple.png);
}

section:nth-of-type(even) nav {
    color: #0f0f0f;
}

section:nth-of-type(even) nav h3:after {
    background-color: rgba(0, 0, 0, .22);
}

@-webkit-keyframes iconDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%);
    }
    25% {
        opacity: .1;
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }
    50% {
        opacity: .2;
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
    75% {
        opacity: .1;
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%);
    }
}

@keyframes iconDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%);
    }
    25% {
        opacity: .1;
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }
    50% {
        opacity: .2;
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
    75% {
        opacity: .1;
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%);
    }
}


/*----------------------------------------

IP

------------------------------------------*/

#section1 {
    text-align: center;
    background-color: #fff;
    background-image: url(../images/simple.png);
    background-position: auto;
    background-size: auto;
    /*
	border-bottom: 30px dashed rgba(255,255,255,.22);
	border-top: 30px dashed rgba(255,255,255,.22);
	*/
}

#section1 nav h3 {
    color: #0f0f0f;
}

#section1 nav svg {
    color: rgba(0, 0, 0, .5);
}

#section1 nav h3:after {
    background-color: rgba(0, 0, 0, 0.22);
}

#section1 ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 1080px;
    margin: 0 auto;
    overflow: hidden;
    font-size: 18px;
    list-style-type: none;
    padding-bottom: 80px;
}

#section1 .d-dan {
    padding: 20px 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    font-size: 18px;
    list-style-type: none;
    padding-bottom: 80px;
}

#section1 ul li {
    position: relative;
    visibility: hidden;
    width: 20%;
    /* = 100 / 5 */
    outline: 1px solid transparent;
}

#section1 ul li:after {
    content: '';
    display: block;
    padding-bottom: calc(100% / 1.7320508075689 * 1.5);
    /* =  100 / tan(60) * 1.5 */
}

#section1 ul li div {
    position: absolute;
    width: 96%;
    padding-bottom: calc(96% / 0.86602540378444);
    /* =  width / sin(60) */
    margin: 0 2%;
    overflow: hidden;
    visibility: hidden;
    outline: 1px solid transparent;
    -webkit-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
}

#section1 ul li div * {
    position: absolute;
    visibility: visible;
    outline: 1px solid transparent;
}

#section1 ul li div a {
    background-size: cover;
    background-position-x: -10px;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
}

#section1 ul li:nth-of-type(1) a {
    background-image: url(../images/a.jpg);
}

#section1 ul li:nth-of-type(2) a {
    background-image: url(../images/xkj.jpg);
}

#section1 ul li:nth-of-type(3) a {
    background-image: url(../images/xyw.jpg);
}

#section1 ul li:nth-of-type(4) a {
    background-image: url(../images/zn.jpg);
}

#section1 ul li:nth-of-type(5) a {
    background-image: url(../images/nicole.jpg);
}

#section1 ul li:nth-of-type(6) a {
    background-image: url(../images/zw.jpg);
}

#section1 ul li:nth-of-type(7) a {
    background-image: url(../images/kakakaoo.jpg);
}

#section1 ul li:nth-of-type(8) a {
    background-image: url(../images/yxx.jpg);
}

#section1 ul li:nth-of-type(9) a {
    background-image: url(../images/462.jpg);
}

#section1 ul li:nth-of-type(10) a {
    background-image: url(../images/shiyuan.jpg);
}

#section1 ul li:nth-of-type(11) a {
    background-image: url(../images/wcay.jpg);
}

#section1 ul li:nth-of-type(12) a {
    background-image: url(../images/fy.jpg);
}

#section1 ul li:nth-of-type(13) a {
    background-image: url(../images/sbt.jpg);
}

#section1 ul li:nth-of-type(14) a {
    background-image: url(../images/kln.jpg);
}

#section1 ul li:nth-of-type(15) a {
    background-image: url(../images/naomi.jpg);
}

#section1 ul li:nth-of-type(16) a {
    background-image: url(../images/xtt.jpg);
}

#section1 ul li:nth-of-type(17) a {
    background-image: url(../images/zuoyi.jpg);
}

#section1 ul li:nth-of-type(18) a {
    background-image: url(../images/462.jpg);
}

#section1 ul li h1,
#section1 ul li p {
    width: 100%;
    padding: 5%;
    box-sizing: border-box;
    background-color: rgba(10, 89, 207, 0.65);
    transition: transform .2s ease-out, opacity .3s ease-out;
}

#section1 ul li h1 {
    bottom: 50%;
    padding-top: 50%;
    font-size: 24px;
    z-index: 1;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
}

#section1 ul li h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    text-align: center;
    border-bottom: 1px solid #fff;
}

#section1 ul li p {
    top: 50%;
    padding-bottom: 50%;
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
}

#section1 ul li div a:hover h1,
#section1 ul li div a:hover p {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

#section1 ul li:nth-of-type(9n+1) {
    margin-left: 10%;
    /* li 宽度的一半 */
}


/*----------------------------------------




/*----------------------------------------

industry chain

------------------------------------------*/


/*----------------------------------------

partner

------------------------------------------*/


/*----------------------------------------

form

------------------------------------------*/


/*----------------------------------------

about

------------------------------------------*/


/*----------------------------------------

tips when the form is submitted successfully

------------------------------------------*/

@-webkit-keyframes scaleAnimation {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scaleAnimation {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes drawCircle {
    0% {
        stroke-dashoffset: 151px;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes drawCircle {
    0% {
        stroke-dashoffset: 151px;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes drawCheck {
    0% {
        stroke-dashoffset: 36px;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes drawCheck {
    0% {
        stroke-dashoffset: 36px;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#successAnimationCircle {
    stroke-dasharray: 151px 151px;
    stroke: #FFF;
}

#successAnimationCheck {
    stroke-dasharray: 36px 36px;
    stroke: #FFF;
}

#successAnimationResult {
    fill: #FFF;
    opacity: 0;
}

#successAnimation.animated {
    -webkit-animation: 1s ease-out 0s 1 both scaleAnimation;
    animation: 1s ease-out 0s 1 both scaleAnimation;
}

#successAnimation.animated #successAnimationCircle {
    -webkit-animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, 0.3s linear 0.9s 1 both fadeOut;
    animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, 0.3s linear 0.9s 1 both fadeOut;
}

#successAnimation.animated #successAnimationCheck {
    -webkit-animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, 0.3s linear 0.9s 1 both fadeOut;
    animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, 0.3s linear 0.9s 1 both fadeOut;
}

#successAnimation.animated #successAnimationResult {
    -webkit-animation: 0.3s linear 0.9s both fadeIn;
    animation: 0.3s linear 0.9s both fadeIn;
}