.cs_w{width: 66%; margin: auto;}
.cs_w_90{width: 90%; margin: auto;}
.cs_w_80{width: 80%; margin: auto;}
.cs_w_70{width: 70%; margin: auto;}
.cs_w_60{width: 60%; margin: auto;}
.cs_w_50{width: 50%; margin: auto;}
.vh{min-height: 900px; height: 100vh}
.con01,.con02,.con03,.con04,.con05,.con06,.footer,.web_acme{padding: 120px 0; text-align: center}
.web_main{background: #fff; width: 100%; padding-top: 96px; overflow: hidden}
.pic img{max-width: 100%;}

/*logo web_banner*/
.web_banner{position: relative; background:#c3372d; position: relative; overflow: hidden; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d;}
.web_banner .ban01,.web_banner .ban02,.web_banner .ban03,.web_banner .ban04{position: absolute; transform: scale(1.2)}
.web_banner .ban01{animation: ban01 12s forwards linear; top: 0; right: 0}
.web_banner .ban02{animation: ban02 12s forwards linear; top: 0;}
.web_banner .ban03{animation: ban03 12s forwards linear; bottom: 0}
.web_banner .ban04{animation: ban04 12s forwards linear; top: 0; left: 0}
.web_banner h1{font-size: 56px; padding-bottom: 54px; letter-spacing: 15px; color: #fff; position: relative;animation: hh1 2s forwards linear; opacity: 0; animation-delay: .5s;}
.web_banner h2{font-size: 32px;}
.web_banner h3{line-height: 27px!important;}
.web_banner .lan{position: fixed; right: 20px; top: 20px; z-index: 999; margin: 20px 20px 0 0;}
.web_banner .lan a{border-width: 2px; opacity: 0.6}
.web_banner .lan a:hover{opacity: 1}
@keyframes hh1{
    from{opacity: 0; bottom: 100px;}
    to{opacity: 100; bottom: 0;}
}
@keyframes ban01{
    from{transform: scale(1.2)}
    to{transform: scale(1)}
}
@keyframes ban02{
    from{transform: scale(1.2)}
    to{transform: scale(1)}
}
@keyframes ban03{
    from{bottom: -120px;}
    to{bottom:0;}
}
@keyframes ban04{
    from{transform: scale(1.4);}
    to{transform: scale(1);}
}
@media (max-width:750px) {
    .web_banner .ban04{display: none}
}

.logo{top: -400px;background: url("../images/logo_back.png") center no-repeat; width: 338px; height: 179px; text-align: center;transition: all 2s ease-out; padding-top: 18px;position: fixed; z-index: 99; left: 50%; margin-left: -169px;}
.logo.a{top: 0;}
.web_banner .font{position: relative; z-index: 99; transition: all 2s ease; opacity: 0; top: -100px}
.web_banner .font.a{opacity: 1; top: 0;}

.web_banner h1{position: relative}
.font .row:first-child .cell:first-child{background: url("../images/banner_f_01.png") top center no-repeat; height: 47px; width: 48px;}
.font .row:first-child .cell:first-child+.cell{background: url("../images/banner_f_02.png") top center repeat-x; height: 47px;}
.font .row:first-child .cell:first-child+.cell+.cell{background: url("../images/banner_f_03.png") top center no-repeat; height: 47px; width: 48px;}
.font .row:first-child+.row .cell:first-child{background: url("../images/banner_f_04.png") left center repeat-y; height: 47px; width: 47px;}
.font .row:first-child+.row .cell:first-child+.cell{background: url("../images/banner_f_05.png") center;}
.font .row:first-child+.row .cell:first-child+.cell+.cell{background: url("../images/banner_f_06.png") right center repeat-y; height: 47px;}
.font .row:last-child .cell:first-child{background: url("../images/banner_f_07.png") bottom center no-repeat; height: 47px; width: 48px;}
.font .row:last-child .cell:first-child+.cell{background: url("../images/banner_f_08.png") bottom center repeat-x; height: 47px;}
.font .row:last-child .cell:first-child+.cell+.cell{background: url("../images/banner_f_09.png") bottom center no-repeat; height: 47px; width: 48px;}

@media (min-width:1640px) {
    .web_banner h1 i{width: 9px; height: 9px; display: block; background: #ff7976; border-radius: 30px; position: absolute; bottom: -15px;left: 50%; opacity: 0}
    .web_banner h1 i.a{margin-left: -131px;}
    .web_banner h1 i.b{margin-left: 229px;}
    .web_banner h1 i.c{margin-left: 266px;}
    .web_banner .font.a i{animation: ii 1s forwards; animation-delay: 2s;}
    @keyframes ii{
        from{opacity: 0; bottom: -45px;}
        to{opacity: 100; bottom: -15px;}
    }
}
@media (max-width:1380px) {
    .cs_w_90,.cs_w_80,.cs_w_70,.cs_w_60,.cs_w_50,.cs_w{width: 90%!important;}
}
@media (max-width:990px) {
    .web_banner .lan{margin-right: 0; z-index: 999}
    .web_banner .lan .btn{z-index: 999; position: relative; padding: 6px 10px!important;}
    .logo{background-position: top center; background-size: 324px; margin-left: -145px; width: 290px;}
    .cs_w_90,.cs_w_80,.cs_w_70,.cs_w_60,.cs_w_50,.cs_w{width: 76%!important;}
}

.ct{background: url("../images/ct/ct-back.jpg") center no-repeat; background-size: cover}
.ct .table{height: 82%}
.ct>h2{padding-top: 100px;}
.ct h2{font-size: 4.2rem;}
.ct .cell{position: relative;}
.ct .ct_line{background: url("../images/ct/ct-line.svg") center no-repeat; opacity: 0; width: 1254px; height: 436px; position: absolute; top: 50%; left: 50%; margin: -218px 0 0 -627px;}
.ct .ct_line .a,.ct .ct_line .b,.ct .ct_line .c,.ct .ct_line .d{position: absolute; opacity: 0; font-size: 2.4rem; filter: drop-shadow(0 3px 15px rgba(0,0,0,0.2));}
.ct .ct_line .a{top: -30px; left: 50px;}
.ct .ct_line .b{top: -30px; right: 50px;}
.ct .ct_line .c{bottom: -65px; left: 50px;}
.ct .ct_line .d{bottom: -65px; right: 50px;}
.ct .ct_line>div img{padding: 0 50px; margin-bottom: 15px;}
.ct .ct_earth{background: url("../images/ct/ct-earth.png") center no-repeat; height: 644px; width: 644px; position: absolute; top: 50%; left: 50%; margin: -322px 0 0 -322px;}
.ct .ct_earth p{color: #888;}
.ct a.btn{margin:0 10px 130px 10px;}
.ct.animation .ct_earth{animation: earth .8s 1 forwards linear; opacity: 0}
@media (max-width: 1380px) {
    .en.index .ct h2{width: 82%; margin: auto;}
}
@media (max-width: 750px) {
    .ct a.btn {margin:0 0 20px 0;}
    .ct a.btn:nth-child(3) {margin-bottom:70px;}
    .en.index .ct h2{width: 90vw;}
}
@keyframes earth {
    0%{opacity: 0; transform: rotate(300deg) scale(0.8);}
    100%{opacity: 1; transform: rotate(360deg) scale(1);}
}
.ct.animation .ct_line{animation: line .8s 1 forwards linear; animation-delay:.8s;}
.ct.animation .ct_line .a,.ct.animation .ct_line .c{animation: line1 .8s 1 forwards linear;}
.ct.animation .ct_line .b,.ct.animation .ct_line .d{animation: line2 .8s 1 forwards linear;}
.ct.animation .ct_line .a{animation-delay:1.8s;}
.ct.animation .ct_line .b{animation-delay:2.2s;}
.ct.animation .ct_line .c{animation-delay:2.6s;}
.ct.animation .ct_line .d{animation-delay:3s;}
@keyframes line {
    0%{opacity: 0; transform: scale(0.8);}
    100%{opacity: 1; transform: scale(1);}
}
@keyframes line1 {
    0%{left: 150px; opacity: 0}
    100%{left: 50px; opacity: 1}
}
@keyframes line2 {
    0%{right: 150px; opacity: 0}
    100%{right: 50px; opacity: 1}
}

.con01,.con04{filter: drop-shadow(0 3px 9px rgba(0,0,0,0.1));}
.con01{opacity: 0; position: relative; top: -100px;}
.con01.animation{animation: list 1s forwards; top: 100px;}

/*con02*/
.back01{background: url("../images/con02_back.jpg") bottom center no-repeat; background-size: cover;}
.con02 li{width: calc(20% - 30px); color: #222; position: relative; top: 0; transition: all .3s ease;}
.con02 li:hover{top: -20px; filter: drop-shadow(0 3px 12px rgba(0,0,0,0.3));}
.con02 li .list{height: 100%;}
.list .row:first-child .cell:first-child{background: url("../images/list_f_01.png") top left no-repeat; height: 40px; width: 40px;}
.list .row:first-child .cell:first-child+.cell{background: url("../images/list_f_02.png") top center repeat-x; height: 40px;}
.list .row:first-child .cell:first-child+.cell+.cell{background: url("../images/list_f_03.png") top right no-repeat; height: 40px; width: 40px;}
.list .row:first-child+.row .cell:first-child{background: url("../images/list_f_04.png") left center repeat-y; height: calc(100% - 100px); width: 40px;}
.list .row:first-child+.row .cell:first-child+.cell{background: #fff;}
.list .row:first-child+.row .cell:first-child+.cell+.cell{background: url("../images/list_f_06.png") right center repeat-y;}
.list .row:last-child .cell:first-child{background: url("../images/list_f_07.png") bottom left no-repeat; height: 40px; width: 40px;}
.list .row:last-child .cell:first-child+.cell{background: url("../images/list_f_08.png") bottom center repeat-x; height: 40px;}
.list .row:last-child .cell:first-child+.cell+.cell{background: url("../images/list_f_09.png") bottom right no-repeat; height: 40px; width: 40px;}
.con02 .cell{position: relative}
.con02 .con{min-height: 200px; padding-bottom: 80px;}
.con02 a.btn{position: absolute; bottom: 13px; left: 0; font-size: 1.8rem; line-height: 36px;}
.con02 h2{font-weight: bold}
.list p{text-align: justify;}
.con02 li{position: relative; opacity: 0}
.con02.animation li{animation: list .8s forwards; top: -100px;}
.con02.animation li:first-child+li{ animation-delay: .5s}
.con02.animation li:first-child+li+li{ animation-delay: 1s}
.con02.animation li:first-child+li+li+li{ animation-delay: 1.2s}
.con02.animation li:first-child+li+li+li+li{ animation-delay: 1.4s}
@keyframes list {
    0%{top: -100px; opacity: 0}
    100%{top: 0; opacity: 100}
}
@media (max-width:1650px){
    .con02 .con{min-height: auto;}
    .con02 li{width: calc(50% - 30px); margin:25px 0;}
}
.con03 h2{line-height:50px; padding-bottom: 45px; margin-bottom: 25px; background: url("../images/line.png") bottom center no-repeat;}
.con03 h2,.con03 p{position: relative; top: -100px; opacity: 0}
.con03.animation h2{animation: list 1s forwards;}
.con03.animation p{animation: list 1s forwards; top: -100px;}
.con04{position: relative; top: -100px; opacity: 0}
.con04.animation{animation: list 1s forwards; animation-delay: .6s}

.con05{background: url("../images/s_back.jpg") center no-repeat; background-size: cover; padding: 80px 0; animation: s_back 15s infinite ease;}
@media (min-width:1640px) {
    @keyframes s_back{
        0%{background-size: 120%}
        50%{background-size: 100%}
        100%{background-size: 120%}
    }
}

.con05 h2{padding-top: 20px; font-weight: lighter; font-size: 40px; position: relative; opacity: 0;}
.con05.animation h2{animation: con05 2s forwards;}
.con05 p{font-weight: lighter; position: relative; font-size: 20px; opacity: 0; padding: 3px 20px; color: #222; background: #fff; display: inline-block; border-radius: 6px; margin-right: -10px;}
.con05.animation p{animation: con05_p 2s forwards;}
@keyframes con05{
    0%{right: -200px; opacity: 0}
    100%{right: 0; opacity: 100}
}
@keyframes con05_p{
    0%{left: -200px; opacity: 0}
    100%{left: 0; opacity: 100}
}

.con06_b{background: url("../images/white_back.jpg") center no-repeat; background-size: cover}
.con06 li{padding: 10px; border: 1px solid #ddd; border-radius: 6px; display: inline-block; margin: 15px; background: #fff}
.con06 li img{height: 100px; max-width: 100%;}
.con06 h2{padding-bottom: 45px; margin-bottom: 50px; background: url("../images/line.png") bottom center no-repeat;}
.con06 h2,.con06 ul{position: relative; top: -100px; opacity: 0}
.con06.animation h2,.con06.animation ul{animation: list 1s forwards;}
.con06.animation ul{animation-delay: 1s}
@media (max-width:990px){
    .con06 li img{height: auto;}
}

.back02{background: url("../images/white_back.jpg") top center no-repeat; background-size: cover;}

/*footer*/
.footer{background: #111; padding: 50px; font-size: 1.4rem;}

.web_section{padding:100px 0;}
.blog_section_child .flex>div{position: relative; margin-bottom: 20px; border-radius: 20px; overflow: hidden}
.blog_section_child h2{font-size: 34px; margin-bottom: 50px; font-weight: bold}
.blog_section_child .flex>div h4{padding:18px 20px; background: #242733; color: #fff; width: 100%; transition: all .3s ease; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -24px; order: 1}
.blog_section_child .flex>div:hover h4{background: #323543;}
.blog_section_child .w_30 a{display: flex; flex-direction: column;}
.blog_section_child .w_30 a img{order: 0}