.hcore-more span, .hcore-more span:before, .hcore-content .swiper-button-prev, .hcore-content .hpro-nav span, .hpro-more a em, .hpro-content .swiper-button-prev, .hpro-content .swiper-button-next, .hnews-content .swiper-button-prev, .hnews-content .swiper-button-next, .hnews-more a em, .habout-more a, .habout-more a:before, .bread ul li:before, .news-cont span, .detail-right ul li:before, .core-2center ul li span, .about-1pic.video-click:before, .about-4nav span, .about-4button .swiper-button-prev, .about-4button .swiper-button-prev:before, .about-4button .swiper-button-prev:after, .about-4button .swiper-button-next, .about-4button .swiper-button-next:before, .about-4button .swiper-button-next:after, .tz-1left:before, .tz-1left span, .tz-1left p, .tz-1right, .tz-1content .swiper-pagination span:after, .tz-2nav span, .tz-2nav p, .tz-3bottom span, .tz-3bottom p, .tz-3content .swiper-pagination span:after, .contact-2input input, .contact-2input select, .contact-2text textarea, .join-1cont em, .join-1content .swiper-pagination span:after, .join-2input, .join-2sub, .join-3head span, .join-3head span:last-child:before, .join-3head span:last-child:after, .prop .swiper-button-prev, .prop .swiper-button-next { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s }
.hpro { width: 100%; overflow: hidden; height: 100vh; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; align-content: center; color: #fff; box-sizing: border-box; padding-top: 110px }
.hpro-bg { width: 100%; height: 100%; overflow: hidden; position: absolute; left: 0px; top: 0px; z-index: 1; background: #000 }
.hpro-bg span { width: 100%; height: 100%; display: block; overflow: hidden; position: absolute; left: 0px; top: 0px; -webkit-transition: all 0.8s ease 0.1s; -moz-transition: all 0.8s ease 0.1s; -ms-transition: all 0.8s ease 0.1s; -o-transition: all 0.8s ease 0.1s; transition: all 0.8s ease 0.1s; opacity: 0; z-index: 1 }
.hpro-bg span img { width: 100%; height: 100%; object-fit: cover; -webkit-filter: blur(10px); filter: blur(10px); opacity: 0.3; animation: suofang 40s linear infinite alternate }
.hpro-bg span.active { opacity: 1 }
.hpro-head { width: 81.25%; overflow: hidden; margin: 0px auto; position: relative; z-index: 12 }
.hpro-head .h3 { float: left; width: 100%; overflow: hidden; font-size: 44px; font-family: "misbold"; text-align: center; transform: translateY(60px); -webkit-transition: all 0.7s ease 0.5s; -moz-transition: all 0.7s ease 0.5s; -ms-transition: all 0.7s ease 0.5s; -o-transition: all 0.7s ease 0.5s; transition: all 0.7s ease 0.5s; opacity: 0 }
.hpro-head p { float: left; width: 100%; overflow: hidden; font-size: 26px; font-family: "misreg"; text-align: center; margin-top: 8px; transform: translateY(60px); -webkit-transition: all 0.7s ease 0.6s; -moz-transition: all 0.7s ease 0.6s; -ms-transition: all 0.7s ease 0.6s; -o-transition: all 0.7s ease 0.6s; transition: all 0.7s ease 0.6s; opacity: 0 }
.hpro ul { width: 100%; overflow: hidden; margin-top: 40px; position: relative; z-index: 12; display: flex; justify-content: center; transform: translateY(60px); -webkit-transition: all 0.7s ease 0.7s; -moz-transition: all 0.7s ease 0.7s; -ms-transition: all 0.7s ease 0.7s; -o-transition: all 0.7s ease 0.7s; transition: all 0.7s ease 0.7s; opacity: 0 }
.hpro ul li { width: auto; overflow: hidden; display: flex; align-items: flex-end; margin: 0px 15px; cursor: pointer }
.hpro-nav { width: auto; overflow: hidden }
.hpro-nav samp { width: 41px; height: 41px; display: block; margin: 0px auto; position: relative }
.hpro-nav samp img { width: auto; height: auto; max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }
.hpro-nav samp img:last-child { opacity: 0 }
.hpro-nav span { width: 100%; display: block; margin: 10px auto 0px; text-align: center; font-size: 20px; font-family: "misreg" }
.hpro-line { width: 54px; height: 14px; background: url("../images/icon-12.png") no-repeat; background-size: 100%; margin-left: 26px; margin-bottom: 5px }
.hpro ul li:last-child .hpro-line { display: none }
.hpro ul li.active .hpro-nav samp img { opacity: 0 }
.hpro ul li.active .hpro-nav samp img:last-child { opacity: 1 }
.hpro ul li.active .hpro-nav span { color: #bd192e }
.hpro-content { width: 100%; overflow: hidden; margin-top: 50px; position: relative; z-index: 12; transform: translateY(60px); -webkit-transition: all 0.7s ease 0.8s; -moz-transition: all 0.7s ease 0.8s; -ms-transition: all 0.7s ease 0.8s; -o-transition: all 0.7s ease 0.8s; transition: all 0.7s ease 0.8s; opacity: 0 }
.hpro-content .swiper-slide { overflow: hidden; flex-wrap: wrap }
.hpro-content .swiper { width: 142%; overflow: hidden; margin-left: -21% }
.hpro-model { width: 100%; overflow: hidden; border-radius: 12px; height: 24vw; position: relative }
.hpro-model img { width: 100%; height: 100%; object-fit: cover }
.hpro-model:hover img { transform: scale(1.03) }
.hpro-item { width: 50%; position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.9); z-index: 12; border-radius: 10px; left: 9.5%; height: 64%; display: flex; justify-content: space-between; flex-wrap: wrap; align-content: center; -webkit-transition: all 0.7s ease 0.1s; -moz-transition: all 0.7s ease 0.1s; -ms-transition: all 0.7s ease 0.1s; -o-transition: all 0.7s ease 0.1s; transition: all 0.7s ease 0.1s; opacity: 0; margin-left: 40px }
.hpro-item:before { width: 11px; height: 95%; content: ""; position: absolute; left: -11px; position: absolute; top: 50%; transform: translateY(-50%); background: #bd192e; border-radius: 11px 0px 0px 11px }
.hpro-item span { width: 80%; display: block; margin: 0px auto; font-size: 32px; color: #333; font-family: "misbold" }
.hpro-item p { width: 80%; display: block; margin: 0px auto; font-size: 18px; color: #777; font-family: "misreg"; line-height: 28px; margin-top: 10px }
.hpro-more { width: 100%; overflow: hidden; margin-top: 40px; -webkit-transition: all 0.7s ease 0.5s; -moz-transition: all 0.7s ease 0.5s; -ms-transition: all 0.7s ease 0.5s; -o-transition: all 0.7s ease 0.5s; transition: all 0.7s ease 0.5s; opacity: 0; transform: translateY(20px) }
.hpro-more a { width: 160px; height: 50px; line-height: 50px; display: block; overflow: hidden; border-radius: 25px; background: #bd192e; text-align: center; font-size: 16px; color: #fff; font-family: "misreg"; margin: 0px auto }
.hpro-more a em { margin-right: 15px }
.hpro-more a:hover em { margin-right: 25px }
.hpro-content .swiper-slide-active .hpro-item { opacity: 1; margin-left: 0px }
.hpro-content .swiper-slide-active .hpro-more { opacity: 1; transform: translateY(0px) }
.hpro-content .swiper-button-prev { width: 53px; height: 53px; background: url("../images/icon-11.png") no-repeat center; background-size: 100%; left: 24%; opacity: 0.7; top: 43% }
.hpro-content .swiper-button-next { width: 53px; height: 53px; background: url("../images/icon-11.png") no-repeat center; background-size: 100%; right: 24%; opacity: 0.7; transform: rotate(180deg); top: 43% }
.hpro-content .swiper-button-prev:hover, .hpro-content .swiper-button-next:hover { opacity: 1 }
.section.active .hpro-head .h3, .section.active .hpro-head p, .section.active .hpro ul, .section.active .hpro-content { transform: translateY(0px); opacity: 1 }
.hcore { width: 100%; height: 100vh; overflow: hidden; position: relative;display: flex; justify-content: space-between; flex-wrap: wrap; align-content: center; box-sizing: border-box; padding-top: 110px }
.hcore-head { width: 81.25%; overflow: hidden; margin: 0px auto }
.hcore-head .h3 { float: left; width: 100%; overflow: hidden; font-size: 44px; color: #fff; font-family: "misbold"; transform: translateY(60px); -webkit-transition: all 0.7s ease 0.5s; -moz-transition: all 0.7s ease 0.5s; -ms-transition: all 0.7s ease 0.5s; -o-transition: all 0.7s ease 0.5s; transition: all 0.7s ease 0.5s; opacity: 0; text-align:center;}
.hcore-head em { float: left; width: 100%; overflow: hidden; font-size: 40px; color: #333; font-family: "misreg"; transform: translateY(60px); -webkit-transition: all 0.7s ease 0.6s; -moz-transition: all 0.7s ease 0.6s; -ms-transition: all 0.7s ease 0.6s; -o-transition: all 0.7s ease 0.6s; transition: all 0.7s ease 0.6s; opacity: 0 }
.hcore-head p { float: left; width: 100%; overflow: hidden; font-size: 22px; color: #88898d; font-family: "misreg"; line-height: 40px; margin-top: 20px; transform: translateY(60px); -webkit-transition: all 0.7s ease 0.7s; -moz-transition: all 0.7s ease 0.7s; -ms-transition: all 0.7s ease 0.7s; -o-transition: all 0.7s ease 0.7s; transition: all 0.7s ease 0.7s; opacity: 0 }
.hcore-content { width: 100%; overflow: hidden; margin-top: 50px; box-sizing: border-box; position: relative; transform: translateY(60px); -webkit-transition: all 0.7s ease 0.8s; -moz-transition: all 0.7s ease 0.8s; -ms-transition: all 0.7s ease 0.8s; -o-transition: all 0.7s ease 0.8s; transition: all 0.7s ease 0.8s; opacity: 0 }
.hcore-content .swiper { box-sizing: border-box;width:85%; overflow:hidden; margin:0 auto; }
.hcore-content .swiper-slide { overflow: hidden; position: relative; height: 25.4vw; border-radius: 20px }
.hcore-content .swiper-slide a { width: 100%; display: block; overflow: hidden; height: 100%; position: relative }
.hcore-content .swiper-slide a:before { width: 100%; height: 100%; content: ""; position: absolute; left: 0px; top: 0px; background: -webkit-linear-gradient(left, rgba(0,0,0,0.8), transparent); background: -moz-linear-gradient(left, rgba(0,0,0,0.8), transparent); background: -ms-linear-gradient(left, rgba(0,0,0,0.8), transparent); background: -o-linear-gradient(left, rgba(0,0,0,0.8), transparent); z-index: 1 }
.hcore-content .swiper-slide img { width: 100%; height: 100%; object-fit: cover }
.hcore-content .swiper-slide:hover img { transform: scale(1.03) }
.hcore-item {width: 100%;position: absolute;background: #ffffffb5;left: 50%;padding: 20px;top: 93%;transform: translate(-50%, -50%);z-index: 12;color: #333;transition: all ease 0.8s;}
.swiper-slide>a:hover .hcore-item{background: rgb(255 255 255 / 69%);height: 87%;color: #333;padding: 15px;width: 87%;height: 87%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);border-radius: 20px;transition: all ease 0.8s;}
.hcore-item .h4 { float: left; width: 100%; overflow: hidden; font-size: 30px; font-family: "misbold" }
.hcore-item p { float: left; overflow: hidden; font-size: 18px; font-family: "misl"; line-height: 36px; margin-top: 20px; min-height: 108px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3 }
.hcore-more { float: left; width: 100%; margin-top: 40px }
.hcore-more span { float: left; width: 160px; height: 50px; line-height: 50px; display: block; overflow: hidden; color: #bd192e; font-size: 16px; font-family: "misreg"; text-align: center; position: relative; cursor: pointer;border-radius: 12px;border: 2px #bd192e solid;}
.hcore-more span em { margin-right: 20px }
.hcore-content .swiper-button-prev { width: 53px; height: 53px; background: url("../images/icon-11.png") no-repeat center; background-size: 100%; left: 8%; opacity: 0.7 }
.hcore-content .swiper-button-next { width: 53px; height: 53px; background: url("../images/icon-11.png") no-repeat center; background-size: 100%; right: 8%; opacity: 0.7; transform: rotate(180deg) }
.hcore-content .swiper-button-prev:hover, .hcore-content .swiper-button-next:hover { opacity: 1 }
.section.active .hcore-head .h3, .section.active .hcore-head em, .section.active .hcore-head p, .section.active .hcore-content { transform: translateY(0px); opacity: 1 }
@media screen and (max-width: 1660px) {
.hpro { padding-top: 80px }
.hpro-head .h3 { font-size: 36px }
.hpro-head p { font-size: 22px }
.hpro ul { margin-top: 30px }
.hpro ul li { margin: 0px 12px }
.hpro-nav samp { width: 32px; height: 32px }
.hpro-nav span { margin: 8px auto 0px; font-size: 16px }
.hpro-line { width: 46px; height: 12px; margin-left: 22px; margin-bottom: 4px }
.hpro-content { margin-top: 40px }
.hpro-model { height: 20vw }
.hpro-item { margin-left: 36px }
.hpro-item:before { width: 10px; left: -10px }
.hpro-item span { font-size: 26px }
.hpro-item p { font-size: 16px; line-height: 26px; margin-top: 8px }
.hpro-more { margin-top: 30px }
.hpro-more a { width: 150px; height: 44px; line-height: 44px; font-size: 14px }
.hpro-content .swiper-button-prev { width: 50px; height: 50px; left: 23.5% }
.hpro-content .swiper-button-next { width: 50px; height: 50px; right: 23.5% }
.hcore { padding-top: 80px }
.hcore-head .h3 { font-size: 36px }
.hcore-head em { font-size: 32px }
.hcore-head p { font-size: 20px; line-height: 34px; margin-top: 18px }
.hcore-content { margin-top:40px }
.hcore-content .swiper-slide { height: 24vw }
.hcore-item em{font-style: inherit; line-height:30px;}
.hcore-item .h4 { font-size:22px;font-weight: 600;}
.hcore-item p { font-size: 16px; line-height: 30px; margin-top: 16px; min-height: 90px }
.hcore-more { margin-top: 30px }
.hcore-more span { width: 150px; height: 44px; line-height: 44px; font-size: 14px }
.hcore-content .swiper-button-prev { width: 50px; height: 50px; left: 7% }
.hcore-content .swiper-button-next { width: 50px; height: 50px; right: 7% }
}
@media screen and (max-width: 1440px) {
.hpro { padding-top: 70px }
.hpro-head .h3 { font-size: 32px }
.hpro-head p { font-size: 18px }
.hpro ul { margin-top: 26px }
.hpro ul li { margin: 0px 10px }
.hpro-nav samp { width: 26px; height: 26px }
.hpro-nav span { margin: 7px auto 0px; font-size: 14px }
.hpro-line { width: 40px; height: 10px; margin-left: 22px }
.hpro-content { margin-top: 30px }
.hpro-model { height: 19.6vw }
.hpro-item { width: 60% }
.hpro-item span { font-size: 22px; width: 84% }
.hpro-item p { font-size: 14px; line-height: 24px; margin-top: 6px; width: 84% }
.hpro-more { margin-top: 26px }
.hpro-more a { width: 140px; height: 40px; line-height: 40px }
.hcore { padding-top: 70px }
.hcore-head .h3 { font-size: 32px }
.hcore-head em { font-size: 26px }
.hcore-head p { font-size: 18px; line-height: 30px; margin-top: 12px }
.hcore-content { margin-top: 26px }
.hcore-content .swiper-slide { height: 22vw }
.hcore-item .h4 { font-size: 26px }
.hcore-item p { font-size: 15px; line-height: 28px; margin-top: 12px; min-height: 84px }
.hcore-more { margin-top: 20px }
.hcore-more span { width: 140px; height: 40px; line-height: 40px }
.hcore-more span::before { border-width: 1px }
.hcore-content .swiper-button-prev { width: 48px; height: 48px; left: 7.2% }
.hcore-content .swiper-button-next { width: 48px; height: 48px; right: 7.2% }
}
@media screen and (max-width: 1280px) {
.hpro { padding-top: 60px }
.hpro-head .h3 { font-size: 28px }
.hpro-head p { font-size: 16px }
.hpro ul { margin-top: 22px }
.hpro ul li { margin: 0px 8px }
.hpro-nav samp { width: 22px; height: 22px }
.hpro-line { width: 30px; margin-left: 20px }
.hpro-content { margin-top: 26px }
.hpro-model { height: 19.4vw }
.hpro-item span { font-size: 20px }
.hpro-more { margin-top: 22px }
.hpro-more a { width: 130px; height: 38px; line-height: 38px }
.hcore { padding-top: 60px }
.hcore-head .h3 { font-size: 28px }
.hcore-head em { font-size: 22px }
.hcore-head p { font-size: 16px; line-height: 26px; margin-top: 10px }
.hcore-content { margin-top: 22px }
.hcore-content .swiper-slide { height: 21vw }
.hcore-item .h4 { font-size: 22px }
.hcore-item p { font-size: 14px; line-height: 24px; margin-top: 10px; min-height: 72px }
.hcore-more { margin-top: 16px }
.hcore-more span { width: 130px; height: 38px; line-height: 38px }
.hcore-content .swiper-button-prev { width: 44px; height: 44px; left: 7.2% }
.hcore-content .swiper-button-next { width: 44px; height: 44px; right: 7.2% }
}
@media screen and (max-width: 1000px) {
.hpro { padding: 50px 0px; height: auto }
.hpro-head { width: 86% }
.hpro-head .h3 { font-size: 22px }
.hpro-head p { font-size: 14px }
.hpro ul { display: none }
.hpro-content { margin-top: 24px }
.hpro-content .swiper { width: 86%; margin: 0px auto }
.hpro-model { height: 23vw }
.hpro-item { width: 72% }
.hpro-item span { font-size: 18px }
.hpro-more { margin-top: 20px; opacity: 1; transform: translateY(0px) }
.hpro-more a { width: 120px; height: 34px; line-height: 34px }
.hpro-content .swiper-button-prev { width: 32px; height: 32px; left: 2% }
.hpro-content .swiper-button-next { width: 32px; height: 32px; right: 2% }
.hcore { padding: 50px 0px; height: auto }
.hcore-head { width: 86% }
.hcore-head .h3 { font-size: 22px }
.hcore-head em { font-size: 18px }
.hcore-head p { font-size: 14px; line-height: 24px }
.hcore-content .swiper { padding: 0px; width: 86% }
.hcore-content .swiper-slide { height: 24vw }
.hcore-item .h4 { font-size: 18px }
.hcore-item p { font-size: 13px; line-height: 22px; margin-top: 8px; min-height: 66px; width: 56% }
.hcore-more { margin-top: 12px }
.hcore-more span { width: 120px; height: 36px; line-height: 36px }
.hcore-content .swiper-button-prev { width: 40px; height: 40px; left: 4.2% }
.hcore-content .swiper-button-next { width: 40px; height: 40px; right: 4.2% }
}
@media screen and (max-width: 768px) {
.hpro { padding: 30px 0px }
.hpro-head { width: 86% }
.hpro-head .h3 { font-size: 20px }
.hpro-head p { font-size: 14px }
.hpro-model { height: 56vw }
.hpro-item { width: 83% }
.hpro-item span { font-size: 17px }
.hpro-item p { font-size: 13px; line-height: 22px }
.hcore { padding: 30px 0px }
.hcore-head .h3 { font-size: 20px }
.hcore-head em { font-size: 16px }
.hcore-head p { font-size: 14px }
.hcore-content .swiper { padding: 0px; width: 86% }
.hcore-content .swiper-slide { height: 62vw }
.hcore-item p { width: 62% }
.hcore-content .swiper-button-prev { width: 35px; height: 35px; left: 2.2% }
.hcore-content .swiper-button-next { width: 35px; height: 35px; right: 2.2% }
}