/*全局样式*/
@charset "utf-8";

html {
    overflow-x: hidden;
}

body,
ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
td,
dl,
dd,
form,
fieldset,
legend,
input,
textarea,
select {
    margin: 0;
    padding: 0
}
body {
    font: 14px "微软雅黑", "Arial Narrow", HELVETICA;
    color: #000;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    min-width: 320px;
    background-color:#000;
}
input:required,
textarea:required {
    outline: 0 none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none !important;
}
a {
    text-decoration: none !important;
    cursor: pointer !important;
    color: #000;
}
a:focus {
    outline: none;
}
ul {
    margin: 0;
}
li {
    list-style: none;
}
.tr {
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s
}
.tr2 {
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.container-fluid {
    max-width: 1230px !important;
}
.container-box{
    max-width:1200px;
    margin:0 auto;
    position:relative;
}

nav{
    margin-top:30px;
}
nav ul li{
  margin-right:50px;
}
nav ul li a{
    display:block;
    font-size:18px;
    color:rgba(255, 255, 255, .8) !important;
    line-height:50px;
    transition:all .3s;
}
nav ul li a:hover{
    color:#ec8325 !important;
}

.sjdnav {
    display: none;
    width: 200px;
    height: auto;
    position: absolute;
    right: 0;
    top: 70px;
    z-index: 2000;
}
.sjdnav ul {
    padding: 0;
    margin: 0;
}
.sjdnav li {
    display: block;
    padding: 0;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(194, 0, 0, 1);
}
.sjdnav li:last-child {
    border: none;
}
.sjdnav li a {
    display: block;
    color: #fff;
    line-height: 25px;
    font-size: 16px;
    padding:10px 5px;
}
.ydd_btn {
    width: 40px;
    cursor: pointer;
    position: absolute;
    z-index: 2000;
    top:25px;
    right: 15px;
}

.ydd_btn span {
    display: block;
    width: 100%;
    height: 4px;
    background: #c20000;
}
.ydd_btn span.span02 {
    margin: 5px 0;
}
.ydd_btn.click span {
    background: #c20000;
}
.ydd_btn.click span.span01 {
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: relative;
    top: 8px;
    margin-top: 0px;
}
.ydd_btn.click span.span02 {
    margin: 4px 0;
}
.ydd_btn.click span.span03 {
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: relative;
    top: -8px;
    margin-top: 0px;
}

.ydd_btn.click span.span02 {
    width: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}



.main1{
    width:100%;
    height:500px;
    position:relative;
}
.main1 canvas{
    position:absolute;
    top:0;
    left:0;
}
.main1 .title{
    width:100%;
    font-size:50px;
    color:#ec8325;
    color:rgba(255, 255, 255, .9);
    text-align:center;
    position:absolute;
    top:35%;
    left:0;
    letter-spacing:10px;
    overflow: hidden;
    font-style: italic;
}
.main1 .title .text-box{
    display:inline-block;
    text-align:left;
}
.main1 .title p{
    position:relative;
    margin:20px 0;
    line-height:1;
}
.main1 .title p.p-1{
    left:-1em;
}
.main1 .title p.p-2{
    left:1em;
}

.title1{
    margin:100px 0 60px;
    text-align:center;
}
.title1 h5{
    font-size:30px;
    color:rgba(255, 255, 255, .6);
    letter-spacing:5px;
}
.title1 p{
    font-size:16px;
    color:rgba(255, 255, 255, .5);
    margin-top:10px;
}
.title1 i{
    display:block;
    width:8px;
    height:8px;
    background-color:rgba(255, 255, 255, .4);
    border-radius:50%;
    margin:20px auto 0;
    position:relative;
    animation: dh 1s alternate ease-in infinite;
}
.title1 i span{
    content:"";
    width:8px;
    height:8px;
    background-color:rgba(255, 255, 255, .4);
    position:absolute;
    top:0;
    border-radius:50%;
    animation: dh 1s alternate ease-in infinite;
}
.title1 i .span-1{
    left:-16px;
}
.title1 i .span-2{
    left:16px;
}
/* @keyframes dh {
    0% {
        background-color:rgba(255, 255, 255, .4);
    }
    100% {
        background-color:rgba(255, 255, 255, .8);
    }
} */


 /* @keyframes left {
    0% {
        left:-16px;
    }
    50% {
        left:-8px;
    }
  }
 @keyframes right {
    50% {
        left:8px;
    }
    100% {
        left:16px;
    }
  } */

.chilun-box{
    width:150px;
    height:150px;
    position:absolute;
    top:30%;
    left:-260px;
}
.chilun{
    width:100px;
    height:100px;
    border-radius:50%;
    background-color:#ff0000;
    opacity:.6;
    position:absolute;
}
.chilun::before{
    content:"";
    width:30%;
    height:30%;
    background-color:#000;
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate3d(-50%,-50%,0);
    z-index:10;
}
.chilun span{
    width:120%;
    height:12px;
    background-color:#ff0000;
    position:absolute;
    top:50%;
    left:-10%;
    transform:translateY(-50%);
}
.chilun span.span-2{
    transform:translateY(-50%) rotate(60deg);
}
.chilun span.span-3{
    transform:translateY(-50%) rotate(-60deg);
}
.chilun span::before{
    content:"";
    width:100%;
    height:100%;
    background-color:#ff0000;
    position:absolute;
    top:0;
    left:0;
    transform:rotate(30deg);
}
.chilun-1{
    top:50%;
    left:50%;
    transform:translate3d(-50%,-50%,0);
    animation: chilun1 10s linear infinite;
}
.chilun-2{
    top: 111px;
    left: -44px;
    animation: chilun2 10s linear infinite;
}
.chilun-2,
.chilun-2 span,
.chilun-2 span::before{
    background-color:green;
}

.chilun-3{
    top:111px;
    right:-44px;
    animation: chilun2 10s linear infinite;
}
.chilun-3,
.chilun-3 span,
.chilun-3 span::before{
    background-color:blue;
}
@keyframes chilun1{
    0%{
        transform:translate3d(-50%,-50%,0) rotateZ(0deg);
    }
    100%{
        transform:translate3d(-50%,-50%,0) rotateZ(360deg);
    }
}
@keyframes chilun2{
    0%{
        transform:rotateZ(360deg);
    }
    100%{
        transform:rotateZ(0deg);
    }
}

.daima{
    width:380px;
    height:360px;
    position:absolute;
    top:90%;
    right:-430px;
    white-space: nowrap;
}
/* .daima::before{
    content:"";
    width:100%;
    height:100%;
    background-color:#000;
    position:absolute;
    top:0;
    left:0;
    animation:code1 8s linear infinite;
}

@keyframes code1 {
    0%{
        top:0;
    }
    100%{
        top:100%;
    }
} */

.daima code{
    display:block;
    color:rgba(255, 255, 255, .6);
    background:none;
    font-size:16px;
    line-height:2;
    position:relative;
    overflow: hidden;
}
.daima code::before{
    content: "";
    width:100%;
    height:100%;
    background-color:#000;
    position:absolute;
    top:0;
    left:0;
}
.daima code.code-2::before{
    animation:code1 10s linear infinite;
}
.daima code.code-3::before{
    animation:code2 10s linear infinite;
}
.daima code.code-4::before{
    animation:code3 10s linear infinite;
}
.daima code.code-5::before{
    animation:code4 10s linear infinite;
}
.daima code.code-6::before{
    animation:code5 10s linear infinite;
}
.daima code.code-7::before{
    animation:code6 10s linear infinite;
}
.daima code.code-8::before{
    animation:code7 10s linear infinite;
}
.daima code.code-9::before{
    animation:code8 10s linear infinite;
}
.daima code.code-10::before{
    animation:code9 10s linear infinite;
}
.daima code.code-11::before{
    animation:code10 10s linear infinite;
}
@keyframes code1 {
    0%{
        left:0;
    }
    10%{
        left:100%;
    }
    100%{
        left:100%;
    }
}
@keyframes code2 {
    10%{
        left:0;
    }
    20%{
        left:100%;
    }
    100%{
        left:100%;
    }
}
@keyframes code3 {
    20%{
        left:0;
    }
    30%{
        left:100%;
    }
    100%{
        left:100%;
    }
}
@keyframes code4 {
    30%{
        left:0;
    }
    40%{
        left:100%;
    }
    100%{
        left:100%;
    }
}
@keyframes code5{
    40%{
        left:0;
    }
    50%{
        left:100%;
    }
    100%{
        left:100%;
    }
}
@keyframes code6 {
    50%{
        left:0;
    }
    60%{
        left:100%;
    }
    100%{
        left:100%;
    }
}
@keyframes code7 {
    60%{
        left:0;
    }
    70%{
        left:100%;
    }
    100%{
        left:100%;
    }
}
@keyframes code8 {
    70%{
        left:0;
    }
    80%{
        left:100%;
    }
    100%{
        left:100%;
    }
}
@keyframes code9 {
    80%{
        left:0;
    }
    90%{
        left:100%;
    }
    100%{
        left:100%;
    }
}
@keyframes code10 {
    90%{
        left:0;
    }
    100%{
        left:100%;
    }
}
.daima code.code-3,
.daima code.code-6,
.daima code.code-9,
.daima code.code-10{
    padding-left:2em;
}
.daima code.code-4,
.daima code.code-5,
.daima code.code-7,
.daima code.code-8{
    padding-left:4em;
}

.main2{
    position:relative;
}

.main2 ul{
    margin:0 -15px;
    display:flex;
    justify-content:center;
    flex-wrap: wrap;
}
.main2 ul li{
    width:25%;
}
.news1{
    display:block;
    margin:0 15px 30px;
}
.news1 .imgbox{
    overflow: hidden;
    position:relative;
}
.news1 .imgbox:before,.news1 .imgbox:after{
    content:"";
    border-color:rgba(255, 255, 255, .3);
    border-style:solid;
    border-width:1px 1px 1px 1px;
    position:absolute;
    animation:donghua 5s infinite;
}
.news1 .imgbox:after{
    animation:donghua 5s -2.5s infinite;
}
@keyframes donghua{
    0%{
        width:100%;
        height:0;
        top:0;
        left:0;
        border-width:1px 0 0 1px;
    }
    25%{
        width:0;
        height:100%;
        top:0;
        left:0;
        border-width:0 0 0 1px;
    }
    50%{
        width:100%;
        height:0;
        top:100%;
        left:0;
        border-width:0 0 1px 0;
    }
    75%{
        width:0;
        height:100%;
        top:0;
        left:100%;
        border-width:0 1px 0 0;
    }
    100%{
        width:100%;
        height:0;
        top:0;
        left:0;
        border-width:1px 1px 0 0;
    }
    
}

.news1 .imgbox .img{
    transition:1s;
    position:relative;
}
.news1 .imgbox .yuan {
    position:absolute;
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    animation-delay: 1s;
}
.news1 .imgbox .yuan .item{
    width: 15px;
    height: 15px;
    background: #f583a1;
    border-radius: 50%;
    margin: 7px;
    position:relative;
    transition:all .3s;
    opacity:.8;
}
.news1 .imgbox .yuan .item::before{
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eed968;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    transition: 0.5s all ease;
    transform: scale(1);
    position:absolute;
    top:0;
    left:0;
}
.news1 .imgbox .yuan .item-1 {
    background-color: #eed968;
    top:0;
    left:0;
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%,
    75% {
        transform: scale(2.5);
    }
    78%, 100% {
        opacity: 0;
    }
}
.news1 .imgbox .yuan .item-1:before {
    background-color: #eed968;
    animation-delay: 200ms;
}

.news1 .imgbox .yuan .item-2 {
    background-color: #eece68;
    top:0;
    left:0;
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%,
    75% {
        transform: scale(2.5);
    }
    78%, 100% {
        opacity: 0;
    }
}
.news1 .imgbox .yuan .item-2:before {
    background-color: #eece68;
    animation-delay: 400ms;
}

.news1 .imgbox .yuan .item-3 {
    background-color: #eec368;
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%,
    75% {
        transform: scale(2.5);
    }
    78%, 100% {
        opacity: 0;
    }
}
.news1 .imgbox .yuan .item-3:before {
    background-color: #eec368;
    animation-delay: 600ms;
}
.news1 .imgbox .yuan .item-4 {
    background-color: #eead68;
    top:0;
    left:0;
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%,
    75% {
        transform: scale(2.5);
    }
    78%, 100% {
        opacity: 0;
    }
}
.news1 .imgbox .yuan .item-4:before {
    background-color: #eead68;
    animation-delay: 800ms;
}

.news1 .imgbox .yuan .item-5 {
    background-color: #ee8c68;
    top:0;
    left:0;
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%,
    75% {
        transform: scale(2.5);
    }
    78%, 100% {
        opacity: 0;
    }
}
.news1 .imgbox .yuan .item-5:before {
    background-color: #ee8c68;
    animation-delay: 1000ms;
}
.news1 h5{
    font-size:16px;
    color:#fff;
    text-align:center;
    line-height:35px;
    margin-top:5px;
    opacity:.5;
}

.main3 .title1{
    margin-top:50px;
}
.main3-con ul li {
    width: 33.33%;
    text-align: center;
}
.main3-con ul li i {
    font-size: 80px;
    line-height: 1;
}
.main3-con ul li:nth-child(1) i {
    color: #5194d0;
}
.main3-con ul li:nth-child(2) i {
    color: #9ed12a;
}
.main3-con ul li:nth-child(3) i {
    color: rgba(255, 255, 255, .8);
}
.main3-con ul li p {
    font-size: 18px;
    margin-top: 20px;
}
.main3-con ul li .box {
    display: inline-block;
    cursor: pointer;
}
.main3-con ul li .box:hover {
    transform: scale(1.2)
}
.main3-con form {
    position: relative;
}
.main3-con form h5 {
    font-size: 20px;
    text-align: center;
    margin: 60px 0 30px;
    color: rgba(255, 255, 255, .8)
}
.main3-con form input,
.main3-con form textarea {
    width: 100%;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, .6);
    padding: 0 10px;
    margin-bottom: 10px;
    font-size: 14px;
    outline: none;
    background:none;
    color:rgba(255, 255, 255, .8);
    font-size:16px;
    border-radius:0;
}
.main3-con form textarea {
    height: 150px;
    resize: none;
    padding: 10px;
    margin-bottom:6px;
}
.main3-con form button {
    width: 100%;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, .6);
    background: none;
    color: rgba(255, 255, 255, .8);
    font-size: 18px;
    transition-duration: .3s;
    outline: none;
}
.main3-con form button:hover {
    border-color:#c28a12;
    background: #c28a12;
}
.main3-con.run ul li {
    transform: scale(1);
    transition-duration: .3s;
    transition-delay: .6s;
}
.main3-con.run form {
    top: 0;
    opacity: 1;
    transition-duration: .3s;
    transition-delay: .9s;
}
#bd_msg {
    width: 200px;
    height: 100px;
    line-height: 30px;
    background: #fff;
    color: #c28a12;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -100px;
    z-index: 1000;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    transform: scale(0);
    transition: all .3s;
    opacity: 0;
    border-radius:5px;
}
#bd_msg.active {
    transform: scale(1);
    opacity: 1;
}

footer{
    font-size:14px;
    text-align:center;
    color:rgba(255, 255, 255, .5);
    margin:80px 0 50px;
    line-height:25px;
}
footer a{
    color:rgba(255, 255, 255, .5) !important;
    transition:all .3s;
}
footer a:hover{
    color:#fff !important;
}
footer p span{
    display:inline-block;
    margin:0 5px;
}
footer p span img{
    margin-right:5px;
    position:relative;
    top:-1px;
}

/*移动端底部热点*/
.bottom_link {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #000;
    text-align: center;
    z-index: 5000;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
  }
  .bottom_link ul li {
    width: 33.33%;
    height: 50px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
  }
  .bottom_link ul li:last-child {
    border: none;
  }
  .bottom_link ul li a {
    display: block;
    color: rgba(255, 255, 255, .8);
    font-size: 16px;
    padding-top: 5px;
    position: relative;
  }
  .bottom_link ul li a i {
    display: block;
    height: 20px;
  }
  .bottom_link ul li:last-child a i {
    font-size: 20px;
    position: relative;
    top: -1px;
  }

/*微信弹窗*/
.weixin_popup_box {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s;
    z-index: 5000;
    background: rgba(90, 8, 8, 0.6);
    opacity: 0;
    visibility: hidden;
}
.weixin_popup {
    border: 1px solid #ccc;
    padding: 30px 30px 0 30px;
    text-align: center;
    background: #fff;
    position: relative;
}
.weixin_popup_box.active {
    opacity: 1;
    visibility: initial;
}
.weixin_popup_box .weixin_popup {
    transform: scale(0) rotate(0);
    transition: all .3s;
}
.weixin_popup_box.active .weixin_popup {
    transform: scale(1) rotate(360deg);
}
.weixin_popup .con {
    display: none;
}
.weixin_popup .con.active {
    display: block;
}
.weixin_popup i {
    color: #999;
    position: absolute;
    top: 5px;
    right: 5px;
    transform: rotate(45deg);
    font-size: 20px;
    cursor: pointer;
}
.weixin_popup i:hover {
    color: red;
}
.weixin_popup img {
    width: 150px;
}
.weixin_popup p{
    line-height: 20px;
    margin:10px 0;
}

@media(min-width:992px){
    .news1:hover .imgbox .yuan .item-1{
        top: -16px;
        left: 29px;
    }
    .news1:hover .imgbox .yuan .item-2{
        top: 16px;
        left: 0;
    }
    .news1:hover .imgbox .yuan .item-3{
        transform:scale(1.3);
    }
    .news1:hover .imgbox .yuan .item-4{
        top: -16px;
        left: 0;
    }
    .news1:hover .imgbox .yuan .item-5{
        top: 16px;
        left: -29px;
    }
    .news1:hover h5{
        opacity:.9;
    }
}
@media(max-width:1920px){
    .chilun-box{
        left:-220px;
    }
    .daima{
        right:-390px;
    }
    .daima code{
        font-size:14px;
    }
}
@media(max-width:1440px) {
    .main1{
        height:400px;
    }
    .main1 .title{
        font-size:40px;
    }
    .chilun-box,
    .daima{
        display:none;
    }
}
@media(max-width:1230px) {
    .container-box {
        padding:0 15px;
    }
}
@media(max-width:991px) {
    .main1{
        height:300px;
    }
    .main1 .title{
        font-size:30px;
    }
    .main2 ul li{
        width:33.33%;
    }
}
@media(max-width:767px) {
    body{
        padding-bottom:50px;
    }
    .main1{
        height:260px;
    }
    .main1 .title{
        font-size:25px;
        top:40%;
        letter-spacing:6px;
    }
    .main1 .title p{
        margin:10px 0;
    }
    .main2 ul li{
        width:33.33%;
    }
    .title1{
        margin:50px 0 30px;
    }
    .title1 h5{
        font-size:20px;
        letter-spacing:1px;
    }
    .title1 p{
        font-size:13px;
    }
    .title1 i{
        margin-top:10px;
    }
    .main2 ul{
        margin:0 -5px;
    }
    .main2 ul li{
        width:50%;
    }
    .news1{
        margin:0 5px 10px;
    }
    .news1 h5{
        line-height:30px;
        margin-top:0;
    }
    .news1 .imgbox .yuan .item{
        width:10px;
        height:10px;
        margin:3px;
    }
    .main3 .title1{
        margin-top:20px;
    }
    .main3-con ul li i{
        font-size:40px;
    }
    .main3-con form h5{
        font-size:16px;
    }
    .main3-con form input, 
    .main3-con form textarea,
    .main3-con form button{
        font-size:14px;
    }
    .main3-con form h5{
        margin:30px 0;
    }
    footer{
        margin:50px 0 30px;
        line-height:20px;
        font-size:13px;
    }
}
@media(max-width:640px) {
    .weixin_popup p {
        font-size: 14px;
    }
}