@media (max-width:1920px){html{font-size:16px;}}
@media (min-width:1400px) and (max-width:1600px){html{font-size:15px;}}
@media (min-width:640px) and (max-width:1399px){html{font-size:14px;}}
@media (min-width:471px) and (max-width:639px){html{font-size:13px;}}
@media (min-width:329px) and (max-width:470px){html{font-size:12px;}}
@media (max-width:328px){html{font-size:12px;}}


/*banner*/
.banner_box{position:relative;overflow:hidden;margin-top: 6.25rem; height:100vh}
.banner_box01{ height:600px;}
.banner_box .banner{height: 600% !important;}
.banner_box .banner ul,
.banner_box .banner li { height: 100%; overflow: hidden; position: relative; background:#000}
.banner_box .banner li {position: absolute;top: 0;left: 0;width: 100%;height: 600px;overflow: hidden;z-index: 1;display: none;}
.banner_box .banner li .fullbg {-webkit-transition: transform 3.2s;-moz-transition: transform 3.2s;-ms-transition: transform 3.2s;transition: transform 3.2s;-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);transform: scale(1.2);width: 100% !important;height: 100% !important;margin-left: 0 !important;}
.banner_box .banner li:nth-child(1){ display:block;}
.banner_box .banner li:nth-child(1) .fullbg{ display:block; -webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
.banner_box .banner li .misu { opacity: 0; -webkit-transform: translate(0, 50px); -moz-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); -webkit-transition: 0.8s ease-out; -moz-transition: 0.8s ease-out; -ms-transition: 0.8s ease-out; transition: 0.8s ease-out; }
.banner_box .banner li:first-child .misu{ opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; transition: 0.3s ease-out; }
.banner_box .banner li.current { z-index: 2; }
.banner_box .banner li.current .fullbg { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
.banner_box .banner li.current .misu { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }
.banner_box .banner .cont {position: absolute;top: 0;left: 0;width: 100%;color: #fff;text-align: center;height: 600px;}
.banner_box .banner .cont h1 {font-size: 5.3125rem;-webkit-transition-delay: 0s;-moz-transition-delay: 0s;-ms-transition-delay: 0s;transition-delay: 0s;font-family: MISTRAL;}
.banner_box .banner .cont .intro {letter-spacing: 10px;font-size: 1.5rem;padding: 0;-webkit-transition-delay: 0.6s;-moz-transition-delay: 0.6s;-ms-transition-delay: 0.6s;transition-delay: 0.6s;font-family: qy;}
.banner_box .banner .cont .intro img{max-width:90%;margin-top: -30px;}
.banner_box .banner .cont .view { -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -ms-transition-delay: 0.8s; transition-delay: 0.8s; }
.banner_box .banner .cont .view a { background-color: #090604; color: #fff; width: 132px; height: 34px; line-height: 34px; text-align: center; display: inline-block; margin: 0 auto; overflow: hidden; border-top: solid #634d3a 1px; border-bottom: solid #634d3a 1px; }
.banner_box .banner .cont .view a:after { content: ""; position: absolute; background-color: #c30d0c; top: 0; left: 0; width: 100%; height: 100%; left: -100%; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; }
.banner_box .banner .cont .view a:hover:after { left: 0; }
.banner_box .banner .cont .view span { position: relative; z-index: 1; }
.banner_box .banner .scrolltips { position: absolute; bottom: 20px; left: 0; text-align: center; width: 100%; color: #fff; z-index: 20; }
.banner_box .banner .scrolltips .pic .icon { width: 24px; height: 43px; background-image: url(https://www.fgkj.cc/images/icon-mouse.png); }
.banner_box .banner .scrolltips .pic .icon:after { content: ""; position: absolute; width: 1px; height: 10px; background-color: #fff; left: 50%; top: 10px; -webkit-animation: sc 1s infinite; -moz-animation: sc 1s infinite; -ms-animation: sc 1s infinite; animation: sc 1s infinite; }
.mouseIco{width: 21px;height: 36px;display: block;margin: 0px auto;border-radius: 6px;position: absolute;left: 50%;margin-left: -11px;bottom: 15px;z-index:900;}
.mouseIco i{width: 1px;height: 36px;border-radius: 1px;display: block;background-color: #fff;position: absolute;left: 50%;margin-left: -1px;-webkit-animation: mouse-dot 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;animation: mouse-dot 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;}
@keyframes mouse-dot {
from { opacity: 0; }
33% { opacity: 1; }
to { transform: translateY(15px); -webkit-transform: translateY(15px); opacity: 0; }
}
@-webkit-keyframes mouse-dot {
from { opacity: 0; }
33% { opacity: 1; }
to { transform: translateY(15px); -webkit-transform: translateY(15px); opacity: 0; }
}
.scrool{height: 28px;width:150px;position:absolute;left:50%;margin-left:-75px;bottom:30px;text-align:center;z-index:1000;text-transform:uppercase;}
.scrool a{ font-size:12px; color:#fff}


.container06 .con.right .h5{ line-height:2rem}
.banner_box .banner li{ height:100%}
.banner_box .banner .cont{ height:100%}

footer .layui-col-xs12>a{ display:block; text-align:center; margin:0 0 10px}
.container08 .con.right p{padding:0 0;line-height: 1.75;}
}
@media(max-width: 640px){
.container01 .fl01 ul li .box span.y1{border: #dbdbdb 1px solid;}
.container01 .fl01 ul li .box, .container01 .fl01 ul li .box span.y1, .container01 .fl01 ul li .icon{width:6rem; height:6rem; line-height:6rem}
.container01 .fl01 ul li .icon .con img{ height:2.2rem}
.container01 .fl01 ul li .h5{ margin-bottom:0.5rem; margin-top:1.25rem}
.container01 .fl01 ul li .h6{ font-size:10px;}
.container01 .fl01 ul li .h6{ line-height:1.5rem; height:3rem}
.container04 .slider-for ul li .box .fr .h6 img{ width:2.4rem}
.container06{padding: 3rem 0;}
.container06 .con.left{ width:100%; text-align:center; margin-bottom:2rem}
.container06 .con.left .h3{ margin-bottom:1rem}
.container06 .con.right{ width:100%; text-align:center; margin-left:0}
.container08 .con.left,.container08 .con.center,.container08 .con.right,.container08 .con.right .box{ width:100%; padding:0; text-align:center}
.container08 .con.center{ margin-bottom:2rem}
.container08 .con.left{ padding:0 3rem}
.n_banner01 .fl h2{ font-size:1.75rem}
.n_banner01 .fl .h4{font-size:1.25rem;margin: 3rem 0 1.5rem;}
.n_banner01 .fr ul{ height:80px;}
.n_banner01 .fr ul li .h4{ height:2rem; overflow:hidden;}
.n_banner01 .fr ul li .h4 span.counter{ font-size:2rem}
.n_banner01 .fr ul li .h4 span{ font-size:1rem}
.n_banner01 .fl h2:before{ bottom:-1.25rem; height:2px}
.n_banner01 .fr ul li .h5{ padding-right:0.75rem; font-size:1rem}
.n_banner01 .fr ul li .h6{ padding-right:0.5rem; font-size:1rem}
.n_case ul{ margin:0 -0.5rem}
.n_case ul li .con .h5, .n_case ul li .con .h5 a{ font-size:1.125rem}
.n_case ul li{ width:50%; padding:0 0.5rem; margin-bottom:1.5rem}
.n_case ul li .con{ padding:1.55rem 1rem 1.75rem 1rem}
.n_join .title .h4{ font-size:0.875rem}
.n_join .title .h3{ font-size:1.25rem}
.n_join ul>li{ margin-bottom:1.5rem}
.n_join ul>li .box .left{width:100%;display:block;border:none;border-bottom:#dcdee0 2px solid;padding:2rem 0;position: relative;}
.n_join ul>li .box .left .con{position:relative;min-height: auto;padding: 00.5rem;}
.n_join ul>li .box .left .con .h3 img{ width:5rem}
.n_join ul>li .box .right{ width:100%; display:block}
.n_join ul>li .box .right .con{ padding:0 1rem}
.n_news .left{ padding:4rem 0 3rem}
.n_news .left ul li.li .top{ padding:2rem 2rem 0}
.n_banner04 h2{ font-size:1.75rem}
.n_case01 ul{ margin:0 -0.5rem}
.n_case01 ul li .con .h5, .n_case01 ul li .con .h5 a{ font-size:1.125rem}
.n_case01 ul li{ width:50%; padding:0 0.5rem; margin-bottom:1.5rem}
.n_case01 ul li .con{ padding:1.55rem 1rem 1.75rem 1rem}
.n_news_detail .left .box{ padding:4rem 1rem}
.n_news_detail .left .box .ar_title .h6 span img{ height:11px;}
.b_nav .con.center img{ height:14px;}
.b_nav .con.fl img,.b_nav .con.fr img{ width:14px;}
.ar_article p{ font-size:1rem}
.container08 .con.right p .ar_wap{ display:inline-block}
.n_case_x ul li .img .top .table_cell .sj_top img{ height:0.5rem}
.n_small .fl04 .left .box .title .h4{ padding:0.5rem 0 0}
.n_small .fl04 .left .box .title{ margin-bottom:2rem}
.n_small .fl04{ padding:3rem 0 4rem}
.n_small .fl04 .left .box ul li .con .h3{ font-size:0.875rem}
.n_small .fl06 ul{ font-size:0; margin:0 -5px;}
.n_small .fl06 ul li{ display:inline-block; width:50%; padding:0 5px; margin-bottom:1rem}
.hi-icon{ width:6rem; height:6rem; line-height:6rem}
.n_small .fl05 ul li .box .con img{ max-height:2rem}
.n_case ul{ margin:0 -0.35rem }
.n_case ul li{ padding:0 0.35rem; margin-bottom:1.25rem}
.container04 .slider-nav .btn_c3 .h5{ padding:0 8px;}
.container04 .slider-nav{ margin-bottom:2rem}
.container04 .title h2, .container05 .title h2, .container01 .title h2, .container02 .title h2{ font-size:1.5rem}
.container04 .title .h4, .container02 .title .h4, .container03 .title .h4{ font-size:1rem}
.container01 .fl01{ margin-bottom:1rem}
}
@media(max-width: 456px){
.container01 .fl01 ul li .box, .container01 .fl01 ul li .box span.y1, .container01 .fl01 ul li .icon{width:5rem; height:5rem; line-height:5rem}
.container01 .fl01 ul li .icon .con img{ height:2rem}
.container01 .fl01 ul li .h6{line-height: 1.5rem;height: 3rem;}
.n_case ul li{ }
.n_news .left ul li{ width:100%; margin-bottom:1.5rem}
.n_case01 ul li{ width:100%;}
}
/* animated */
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1
}
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
}
@-webkit-keyframes fadeInDown {
0% {

opacity: 0;
-webkit-transform: translateY(-50px);
transform: translateY(-50px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-50px);
-ms-transform: translateY(-50px);
transform: translateY(-50px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-50px);
transform: translateX(-50px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-50px);
-ms-transform: translateX(-50px);
transform: translateX(-50px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
}
@-webkit-keyframes fadeInLefts {
0% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes fadeInLefts {
0% {
opacity: 0;
-webkit-transform: translateX(-400px);
-ms-transform: translateX(-400px);
transform: translateX(-400px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(50px);
transform: translateX(50px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(50px);
-ms-transform: translateX(50px);
transform: translateX(50px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
}
@-webkit-keyframes fadeInRights {
0% {
opacity: 0;
-webkit-transform: translateX(400px);
transform: translateX(400px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes fadeInRights {
0% {
opacity: 0;
-webkit-transform: translateX(400px);
-ms-transform: translateX(400px);
transform: translateX(400px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
}
@-webkit-keyframes scale_img {
0%{
-webkit-transform: scale(1) translateX(0px);
transform: scale(1) translateX(0px);
}
50%{
-webkit-transform: scale(1.1) translateX(30px);
transform: scale(1.1) translateX(30px);

}
100% {
-webkit-transform: scale(1.2) translateX(30px);
transform: scale(1.2) translateX(30px);
}
}
@keyframes scale_img {
0%{
-webkit-transform: scale(1) translateX(0px);
transform: scale(1) translateX(0px);
}
50%{
-webkit-transform: scale(1.1) translateX(30px);
transform: scale(1.1) translateX(30px);
}
100% {
-webkit-transform: scale(1.2) translateX(30px);
transform: scale(1.2) translateX(30px);
}
}
@-webkit-keyframes slideBg_fn {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
} 
@keyframes slideBg_fn {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
}
@-webkit-keyframes slideBg_fny {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(50px);
transform: translateX(50px);
}
} 
@keyframes slideBg_fny {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(50px);
transform: translateX(50px);
}
}
@-webkit-keyframes h_ani {
0% {
clip: rect(0px, 0px, 1100px, 0px);
}
100% {
clip: rect(0px, 2920px, 1100px, 0px);
}
}
@keyframes h_ani {
0% {
clip: rect(0px, 0px, 1100px, 0px);
}
100% {
clip: rect(0px, 2920px, 1100px, 0px);
}
}
@-webkit-keyframes side-in-out {
50% {
transform: scaleX(1);
-webkit-transform: scaleX(1);
transform-origin: left;
-webkit-transform-origin: left;
}
50.1% {
transform-origin: right;
-webkit-transform-origin: right;
}
100% {
transform: scaleX(0);
-webkit-transform: scaleX(0);
transform-origin: right;
-webkit-transform-origin: right;
}
}
@keyframes side-in-out {
50% {
transform: scaleX(1);
-webkit-transform: scaleX(1);
transform-origin: left;
-webkit-transform-origin: left;
}
50.1% {
transform-origin: right;
-webkit-transform-origin: right;
}
100% {
transform: scaleX(0);
-webkit-transform: scaleX(0);
transform-origin: right;
-webkit-transform-origin: right;
}
}
@-webkit-keyframes side-in-outy {
50% {
transform: scaleX(1);
-webkit-transform: scaleX(1);
transform-origin: left;
-webkit-transform-origin: left;
}
50.1% {
transform-origin: right;
-webkit-transform-origin: right;
}
100% {
transform: scaleX(1);
-webkit-transform: scaleX(1);
transform-origin: right;
-webkit-transform-origin: right;
}
}
@keyframes side-in-outy {
50% {
transform: scaleX(1);
-webkit-transform: scaleX(1);
transform-origin: left;
-webkit-transform-origin: left;
}
50.1% {
transform-origin: right;
-webkit-transform-origin: right;
}
100% {
transform: scaleX(1);
-webkit-transform: scaleX(1);
transform-origin: right;
-webkit-transform-origin: right;
}
}
@-webkit-keyframes con02 {
0% {
transform: translate(-392px,0px);
-webkit-transform: translate(-392px,0px);
opacity: 0;
}
100% {
transform: translate(0px,0px);
-webkit-transform: translate(0px,0px);
opacity: 1;
}
}
@keyframes con02 {
0% {
transform: translate(-392px,0px);
-webkit-transform: translate(-392px,0px);
opacity: 0;
}
100% {
transform: translate(0px,0px);
-webkit-transform: translate(0px,0px);
opacity: 1;
}
}
@-webkit-keyframes height {
0% {
min-height: 0;
}
100% {
min-height: 630px;
}
}
@keyframes height {
0% {
min-height: 0;
}
100% {
min-height: 630px;
}
}
@-webkit-keyframes height3 {
0% {
min-height: 0;
}
100% {
min-height: 479px;
}
}
@keyframes height3 {
0% {
min-height: 0;
}
100% {
min-height: 479px;
}
}
@-webkit-keyframes width {
0% {
width: 0;
}
100% {
max-width: 852px;
width: 100%;
}
}
@keyframes width {
0% {
width: 0;
}
100% {
max-width: 852px;
width: 100%;
}
}
@-webkit-keyframes width02 {
0% {
width: 0;
}
100% {
max-width: 1200px;
width: 100%;
}
}
@keyframes width02 {
0% {
width: 0;
}
100% {
max-width: 1200px;
width: 100%;
}
}
@-webkit-keyframes con04 {
0% {
transform: translate(-406px,0px);
-webkit-transform: translate(-406px,0px);
opacity: 0;
}
100% {
transform: translate(0px,0px);
-webkit-transform: translate(0px,0px);
opacity: 1;
}
}
@keyframes con04 {
0% {
transform: translate(-406px,0px);
-webkit-transform: translate(-406px,0px);
opacity: 0;
}
100% {
transform: translate(0px,0px);
-webkit-transform: translate(0px,0px);
opacity: 1;
}
}
@-webkit-keyframes pageRight {
0% {
-webkit-transform:none;
transform:none;
}
100% {
-webkit-transform:translate(-30px,20px);
transform:translate(-30px,20px);
}
}
@keyframes pageRight {
0% {
-webkit-transform:none;
transform:none;
}
100% {
-webkit-transform:translate(-30px,20px);
transform:translate(-30px,20px);
}
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(.7);
transform: scale(.7)
}
100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes pulse {
0% {
-webkit-transform: scale(.7);
transform: scale(.7)
}
100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes property_cooperation03 {
0% {
transform: translate(-278px,0px);
-webkit-transform: translate(-278px,0px);
opacity: 0;
}
100% {
transform: translate(0px,0px);
-webkit-transform: translate(0px,0px);
opacity: 1;
}
}
@keyframes property_cooperation03 {
0% {
transform: translate(-278px,0px);
-webkit-transform: translate(-278px,0px);
opacity: 0;
}
100% {
transform: translate(0px,0px);
-webkit-transform: translate(0px,0px);
opacity: 1;
}
}
@-webkit-keyframes circle {
0% {
transform: scale(1);

-webkit-transform: scale(1);
opacity: 0.0;
}
100% {
transform: scale(1.1);
-webkit-transform: scale(1.1);
opacity: 0.5;
}
}
@keyframes circle {
0% {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 0.0;
}
100% {
transform: scale(1.1);
-webkit-transform: scale(1.1);
opacity: 0.5;
}
}
@-webkit-keyframes h_circle {
0%{
transform: translate(0,0) rotate(45deg);
-webkit-transform: translate(0,0) rotate(45deg);
}
15%{
transform: translate(403px,0) rotate(90deg);
-webkit-transform: translate(403px,0) rotate(90deg);
}
50%{
transform: translate(200px,-206px) rotate(135deg);
-webkit-transform: translate(200px,-206px) rotate(135deg);
}
75%{
transform: translate(0px,-206px) rotate(235deg);
-webkit-transform: translate(0px,-206px) rotate(235deg);
}
100%{
transform: translate(0px,0) rotate(360deg);
-webkit-transform: translate(0px,0) rotate(360deg);
}
}
@keyframes h_circle {
0%{
transform: translate(0,0) rotate(45deg);
-webkit-transform: translate(0,0) rotate(45deg);
}
15%{
transform: translate(403px,0) rotate(90deg);
-webkit-transform: translate(403px,0) rotate(90deg);
}
50%{
transform: translate(200px,-206px) rotate(135deg);
-webkit-transform: translate(200px,-206px) rotate(135deg);
}
75%{
transform: translate(0px,-206px) rotate(235deg);
-webkit-transform: translate(0px,-206px) rotate(235deg);
}
100%{
transform: translate(0px,0) rotate(360deg);
-webkit-transform: translate(0px,0) rotate(360deg);
}
}
@-webkit-keyframes h_circle02 {
0%{
transform: translate(0,0) rotate(45deg);
-webkit-transform: translate(0,0) rotate(45deg);
}
15%{
transform: translate(77px,280px) rotate(90deg);
-webkit-transform: translate(77px,280px) rotate(90deg);
}
50%{
transform: translate(-15px,95px) rotate(135deg);
-webkit-transform: translate(-15px,95px) rotate(135deg);
}
75%{
transform: translate(55px,50px) rotate(235deg);
-webkit-transform: translate(55px,50px) rotate(235deg);
}
100%{
transform: translate(0,0) rotate(360deg);
-webkit-transform: translate(0,0) rotate(360deg);
}
}
@keyframes h_circle02 {
0%{
transform: translate(0,0) rotate(45deg);
-webkit-transform: translate(0,0) rotate(45deg);
}
15%{
transform: translate(77px,280px) rotate(90deg);
-webkit-transform: translate(77px,280px) rotate(90deg);
}
50%{
transform: translate(-15px,95px) rotate(135deg);
-webkit-transform: translate(-15px,95px) rotate(135deg);
}
75%{
transform: translate(55px,50px) rotate(235deg);
-webkit-transform: translate(55px,50px) rotate(235deg);
}
100%{
transform: translate(0,0) rotate(360deg);
-webkit-transform: translate(0,0) rotate(360deg);
}
}
@-webkit-keyframes popBody {
0% {
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
}
}
@keyframes popBody {
0% {
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
}
}
@-webkit-keyframes icon_video {
0% {
-webkit-transform: scale(0.85);
transform: scale(0.85);
opacity: 1;
}
25% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
opacity: 0.8;
}      
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0.55;
}
75% {
-webkit-transform: scale(1.32);
transform: scale(1.32);
opacity: 0.3;
} 
100% {
-webkit-transform: scale(1.4);
transform: scale(1.4);
opacity: 0;
} 
}
@keyframes icon_video {
0% {
-webkit-transform: scale(0.85);
transform: scale(0.85);
opacity: 1;
}
25% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
opacity: 0.8;
}      
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0.55;
}
75% {
-webkit-transform: scale(1.32);
transform: scale(1.32);
opacity: 0.3;
} 
100% {
-webkit-transform: scale(1.4);
transform: scale(1.4);
opacity: 0;
}   
}
@-webkit-keyframes icon_video02 {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes icon_video02 {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@-webkit-keyframes joint_map {
0% {
-webkit-transform:scale(.6);
transform:scale(.6); 
opacity: .6;
}
100% {
-webkit-transform:scale(1.2);
transform:scale(1.2); 
opacity: .2;
}
}
@keyframes joint_map {
0% {
-webkit-transform:scale(.6);
transform:scale(.6); 
opacity: .6;
}
100% {
-webkit-transform:scale(1.2);
transform:scale(1.2); 
opacity: .2;
}
}
@-webkit-keyframes zoom-in {
0% {
-webkit-transform:scale(.9);
transform:scale(.9); 
opacity: 0;
}
100% {
-webkit-transform:scale(1);
transform:scale(1); 
opacity: 1;
}
}
@keyframes zoom-in {
0% {
-webkit-transform:scale(.9);
transform:scale(.9); 
opacity: 0;
}
100% {
-webkit-transform:scale(1);
transform:scale(1); 
opacity: 1;
}
}
@-webkit-keyframes fadeInscrollx {
0% {
-webkit-transform:scaleX(.8);
transform:scaleX(.8); 
opacity: 0;
}
100% {
-webkit-transform:scaleX(1);
transform:scaleX(1); 
opacity: 1;
}
}
@keyframes fadeInscrollx {
0% {
-webkit-transform:scaleX(0);
transform:scaleX(0); 
opacity: 0;
visibility:hidden
}
100% {
-webkit-transform:scaleX(1);
transform:scaleX(1); 
opacity: 1;
visibility:visible
}
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
.animated.flip {
-webkit-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s
}
.scale_img {
-webkit-animation-name: scale_img;
animation-name: scale_img;
}
.slideBg_fn {
-webkit-animation-name: slideBg_fn;
animation-name: slideBg_fn;
}
.slideBg_fny {
-webkit-animation-name: slideBg_fny;
animation-name: slideBg_fny;
}
.h_ani {
-webkit-animation-name: h_ani;
animation-name: h_ani;
}
.side-in-out {
-webkit-animation-name: side-in-out;
animation-name: side-in-out;
}
.side-in-outy {
-webkit-animation-name: side-in-outy;
animation-name: side-in-outy;
}
.con02 {
-webkit-animation-name: con02;
animation-name: con02;
}
.height {
-webkit-animation-name: height;
animation-name: height;
}
.height3 {
-webkit-animation-name: height3;
animation-name: height3;
}
.width {
-webkit-animation-name: width;
animation-name: width;
}
.width02 {
-webkit-animation-name: width02;
animation-name: width02;
}
.con04 {
-webkit-animation-name: con04;
animation-name: con04;
}
.property_cooperation03 {
-webkit-animation-name: property_cooperation03;
animation-name: property_cooperation03;
}
.circle {
-webkit-animation-name: circle;
animation-name: circle;
}
.h_circle {
-webkit-animation-name: h_circle;
animation-name: h_circle;
}
.popBody {
-webkit-animation-name: popBody;
animation-name: popBody;
}
.pageRight {
-webkit-animation-name: pageRight;
animation-name: pageRight;
}
.icon_video {
-webkit-animation-name: icon_video;
animation-name: icon_video;
}
.icon_video02 {
-webkit-animation-name: icon_video02;
animation-name: icon_video02;
}
.joint_map {
-webkit-animation-name: joint_map;
animation-name: joint_map;
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight
}
.fadeInLefts {
-webkit-animation-name: fadeInLefts;
animation-name: fadeInLefts
}
.fadeInRights {
-webkit-animation-name: fadeInRights;

animation-name: fadeInRights
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}
.zoom-in{
-webkit-animation-name: zoom-in;
animation-name: zoom-in
}
.fadeInscrollx{
-webkit-animation-name: fadeInscrollx;
animation-name: fadeInscrollx
}
@media (min-width: 1360px){
.layui-container01 {
max-width: 1730px;
}
.layui-container01,.layui-container04{
padding: 0 80px;
}
.n_news .right.fixed{ right:80px;}
}
.s_search{margin-top: 4rem;text-align: center;}
.s_search .box{ display: inline-block;}
.s_news_search{ float: left; color: #fff; margin-right: 50px; width: 320px; background: #fff; padding: 5px;}
.s_news_search .input{ height: 2.5rem; width: calc(100% - 70px); float:left;    font-size: 14px; color: #666; padding: 0 15px; border: 2px solid #d4042c;}
.s_news_search .button{height: 2.5rem; width:70px; float: left;border: 0; background: #d4042c;cursor: pointer;color: #fff;font-family: arial;font-size: .875rem;text-transform: uppercase;}
.s_news_keyword{ float: left; color: #fff; color: rgba(255,255,255,.7); line-height: 2.5rem; padding-top: 5px;}
.s_news_keyword a{ color: #fff;color: rgba(255,255,255,.8);  display: inline-block; margin: 0 5px; transition: .3s;}
.s_news_keyword a:hover{color: #fff;}
.s_news_search{ padding: 2px !important; margin-right: 3rem !important;}
.s_news_search .input{ height: 40px !important;}
.s_news_search .button{ border-radius: 0;
line-height: 2.5rem;}
.s_news_search .button{ position:relative; overflow:hidden; height: 40px !important; line-height: 40px !important; }
.s_news_search .button:before{
content: "";
position: absolute;
top: -30px;
left: -100px;
height: 110px;
width: 70px;
background: rgba(255, 255, 255, .6);
transform: rotate(20deg);
}
.s_news_search .button:hover:before{
left: 250px;
transition: all 0.6s;
}
.s_news_keyword{ padding-top: 2px; line-height: 40px !important;}
@media(max-width: 640px){
.s_news_search{ width:100% !important; margin-right: 0 !important;}
.s_news_keyword{ line-height: 30px !important; padding-top: 15px !important;}
}
.btn_more2{width: 10rem;height:2.5rem;line-height:2.5rem;margin: 0 auto;display:block;text-align:center;font-size:.875rem;color:#242424;border-radius:1.25rem;position:relative;z-index:0;overflow:hidden;transition:all ease 600ms;}
.btn_more2:before{ content:""; position: absolute; right: 0; top: 0; display: block; height:100%; width:100%; border-radius:1.25rem;box-sizing:border-box; border:1px solid #d7dddf; transition:all ease 600ms; z-index:-1;}
.btn_more2:hover:before{ border:1px solid #d4042c;}
.btn_more2:after{ content:""; position: absolute; right: 0; top: 0; display: block; height:100%; width:0; background:#d4042c; transition:all ease 600ms; z-index:-1;}
.btn_more2:hover:after{ width:100%; left:0; right:auto;}
.btn_more2:hover{ color:#fff;  }
@media(min-width: 768px){
.container03 ul li:hover{ top: -12px; }
.container03 ul li:hover .img img{ }
}
@media(max-width: 1200px){
}
@media(max-width: 967px){
.container03 ul .miso-slide li, .container03 ul li.wow{ width:25%;}
}
@media(max-width: 767px){
    .container06 .con.right h2{padding: 0 5%;}
    .container06 .con.right p{padding: 0;}
}
@media(max-width: 480px){
.container03 ul .miso-slide li, .container03 ul li.wow{ width:33.333%; margin-bottom: 1rem;}
.container03 ul .miso-slide li .h5, .container03 ul li.wow .h5{padding: 0 15px; height: 26px;}
.container03 ul{ padding-bottom: 1rem;}
}
.tc1 .tc{pointer-events: none;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; position:  fixed;width:  100%;height:  100%;top: 0;z-index: 99999;}
.tc1 .tc.act{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;  pointer-events: auto; }
.tc1 .close:hover{ transform:rotate(180deg);}
.tc1 .close,.tc{ transition:all ease 400ms; -moz-transition:all ease 400ms; -ms-transition:all ease 400ms; -o-transition:all ease 400ms; -webkit-transition:all ease 400ms; } 
.tc1 .tc-box{position:absolute;background: #d9d9d9;overflow: hidden;top:50%;z-index:9999;width: 11rem;left:50%;margin-left: -5.5rem;margin-top: -5.5rem;padding: .5rem;}
.tc1 .tc.act .tc-box{  transform:scale(1);}
.tc1 .tc.act{display: block;  }
.tc1 .close{position: absolute; cursor:pointer;font-size: 20px;right: 30px;top: 30px; }
.tc1 .tc_bg {height: 100%;background: rgba(0,0,0,.7);position: absolute;top: 0;left: 0;width: 100%;z-index: 0;}
.tc1 .tc-box .h3 img{width:100%; margin: 0 auto;display: block;}
.tc1 .tc-box .h5{ height: 2rem;line-height: 2rem;font-size: 13px;color: #6c6c6c;text-align:center;}

.list_box1 li a{display:block;position:relative;height: 3rem;line-height: 3rem;background:url(../image/line_dot.png) center bottom repeat-x;}
.list_box1 li a h2{display:inline-block;width: calc(100% - 5.5rem);font-size: 1rem;color:#000;transition:.5s;position:relative;padding-left: 1rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.list_box1 li a h2:before{content:"";position:absolute;width: .375rem;height: .375rem;background:#d4042c;top:50%;margin-top: -.175rem;left:0;border-radius: 50%;}
.list_box1 li a span{float:right;font-size: .875rem;color:#d1d1d1;}

.container04 .content .box .con .title1 h2 a:hover, .list_box1 li a:hover h2{ color:#d4042c; padding-left:1.25rem}
.draw_h{ width: 4.125rem !important; height: 4.125rem !important; line-height: 4rem !important; display:block; border-radius: 50%; text-align: center; position:relative;}
.draw_h:before{ content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; border: 1px solid rgba(100%,100%,100%,.5); border-radius: 50%;}
svg.drawcircle{position:absolute;top:0;left:0;overflow: inherit;display: block;pointer-events: none;}
svg.drawcircle circle {
	fill: none; box-sizing:border-box;
	stroke-width: 2;
	stroke: none;
	stroke-dasharray: 0 , 188.49;
	stroke-dashoffset:188.49;
	transition: all .3s linear 0s;	
}
.draw_h .icon { fill: #626262; vertical-align: middle; transition:.3s;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.draw_h:hover svg.drawcircle circle { 
    stroke:#fff;
	stroke-dasharray:188.49 , 0;
	stroke-dashoffset:188.49;
	-webkit-transition: all .7s cubic-bezier(0.11, 0.57, 0.58, 1);
	transition: all .7s cubic-bezier(0.11, 0.57, 0.58, 1);
}
.draw_h:hover .icon{ fill:#0081cc;}

.m{ max-width: 1310px;}
@font-face{ font-family: DINCond-Medium; src: url(../font/DINCOND-MEDIUM-WEBFONT.TTF);}
#banner{position: relative;width: 100%;overflow: hidden;}
#canvas{
 position: absolute;
 width: 100vw;
 bottom: 0;
 left: 0;
 margin: 0;
 height: 15rem;
 z-index: 4;
 transform: none;
 -webkit-transform: none;
 -moz-transform: none;
 -o-transform: none;
 -ms-transform: none;
 opacity: 0.8;
}

.banner_wave{ position: absolute; left: 0; bottom: 0; width: 100%; pointer-events: none; height: 303px; background: url(../images/banner_wave.png) center top no-repeat; z-index: 9;}
#banner .swiper-container { height:37.5rem;  }
#banner .swiper-slide { overflow: hidden;}
#banner .slide-inner { position: absolute;  width: 100%; height: 100%;left: 0; top: 0; background-size: cover; background-position: center; background-repeat: no-repeat !important;}
#banner .m.between{ justify-content: space-between; display: flex; align-items: center;}
#banner .txt{ flex-shrink: 0;}

#banner .txt01{ color: #fff; height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center;  padding-bottom:4rem;}
#banner .txt01 h4{ font-size: 3rem; color: #fff; font-weight: bold; margin-bottom: 1rem; }
#banner .txt01 h3{ font-size: 1.375rem; color: #fff; line-height: 2.5rem; margin-top: 1rem; margin-bottom: 1.5rem;  }
#banner .txt01 p{ font-size: 1.125rem; line-height: 1.375rem; color: rgba(255, 255, 255, 1); text-transform: uppercase; display: block; font-family: ROBOTO-REGULAR;}

#banner .txt02{ color: #fff; height: 100%; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; text-align: left;  padding-bottom:3rem;}
#banner .txt02 h4{ font-size: 3rem; color: #fff; font-weight: bold; margin-bottom: 1rem; position: relative; }
#banner .txt02 h3{ font-size: 1.375rem; color: #fff; line-height: 2.5rem; margin-top: 1rem; margin-bottom: 1.5rem;  }
#banner .txt02 p{ font-size: 1.375rem; line-height: 1.375rem; color: #ee0632; text-transform: uppercase; display: block; font-family: ROBOTO-REGULAR;}
#banner .txt02 h4:before{ content: ""; display: block; position: absolute; left: -2.25rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; border-radius: 50%; box-sizing:border-box; border: 2px solid #e90632;}

#banner .txt03{ color: #fff; height: 100%; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; text-align: left;  padding-bottom:3rem;}
#banner .txt03 h4{ font-size: 3rem; color: #fff; font-weight: bold; margin-bottom: 1rem; position: relative; }
#banner .txt03 h3{ font-size: 1.375rem; color: #fff; line-height: 2.5rem; margin-top: 1rem; margin-bottom: 1.5rem;  }
#banner .txt03 p{ font-size: 1.125rem; line-height: 1.375rem; color: #fff; text-transform: uppercase; display: block; font-family: ROBOTO-REGULAR;}
#banner .txt03 h4:before{ content: ""; display: block; position: absolute; box-sizing:border-box; left: -2.25rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid #e90632;}

#banner .swiper-button-prev{ position:absolute; background:url(../images/banner_left.png) center no-repeat !important; background-size:1.5rem !important; opacity:.8; left:4%;}
#banner .swiper-button-next{  position:absolute; background:url(../images/banner_right.png) center no-repeat !important; background-size:1.5rem !important; opacity:.8; right:4%;}
#banner .pic{ margin-bottom: 4rem; min-width:60%; height: calc(100% - 4rem); display: flex; justify-content: center; align-items: center;}
#banner .pic img{ max-height: 70%;}
#banner .txtanim01{ opacity: 0;}
#banner .txtanim02{ opacity: 0;}
#banner .txtanim03{ opacity: 0;}
#banner .swiper-slide.swiper-slide-active .txtanim01{ animation: enter 1.2s forwards .2s;}
#banner .swiper-slide.swiper-slide-active .txtanim02{ animation: enter 1.2s forwards .3s;}
#banner .swiper-slide.swiper-slide-active .txtanim03{ animation: enter 1.2s forwards .4s;}

.colorfont{ color: #ee0632; font-size: 3.125rem; font-family: DINCond-Medium; margin: 0 3px 0 3px; position: relative; bottom: -3px;}

.dotbox{ position: absolute; left: 0; bottom: 2rem; width: 100%; height: 20px; z-index: 111;}
.swiper-pagination{ width: 100%;}
.dotbox .dots{ width: 1.25rem !important; height: 1.25rem !important; display: inline-block; background: none; opacity: 1; margin-right: 7px; }
.dotbox .dots:before{ border: 0; background: #fff; transform: scale(.4);}
.dotbox .dots svg.drawcircle circle {
	fill: none; box-sizing:border-box;
	stroke-width: 1.5;    
	stroke-dasharray: 0 , 62.8;
	stroke-dashoffset:62.8;
}
.dots.swiper-pagination-bullet-active svg.drawcircle circle { 
    animation: svgrotate 6.2s forwards;
}
@-webkit-keyframes svgrotate {
    0% { stroke:rgba(255, 255, 255, 1);
        stroke-dasharray: 0 , 62.8;
        stroke-dashoffset:62.8;}
    100% { stroke:rgba(255, 255, 255, 1);
        stroke-dasharray:62.8 , 0;
        stroke-dashoffset:62.8; }
 }
@keyframes enter {
 }
 
@-webkit-keyframes enter {
    0% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    20% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); }
}
@keyframes enter {
    0% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    20% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); }
}
 

@media (max-width: 1440px)
{
    #banner .swiper-button-prev{ left: 1%;}
    #banner .swiper-button-next{ right: 1%;}
    #banner .m.between{ padding: 0 7rem;}  
}
@media (max-width: 768px)
{
    #banner .m{ display: flex; flex-direction: column !important; justify-content: center !important; align-items: center !important;}
    #banner .txt{ height: auto !important;}
    #banner .swiper-container{ height: 56rem;}
    #banner .pic{ height: 20rem; width: 100%;}
    #banner .pic img{ max-height: 100%;}
}
@media (max-width: 480px)
{
    #banner .m{ padding: 0 2rem !important;}
    #banner .swiper-button-prev,
    #banner .swiper-button-next{ display: none;}
    #banner .txt h4{ font-size: 2rem !important;}
    #banner .txt h3{ font-size: 1.25rem !important; line-height: 2rem !important;}
    #banner .pic{ max-height: 14rem; height: auto;}
    #banner .swiper-container{ height: 40rem;}
}


.m{ height:100%;}