/*end*/ /*鍏ュ満鍔ㄧ敾鏍峰紡*/ .cssanimations .anim_emt, .cssanimations .anim_group .anim_item { visibility: hidden; } .cssanimations .anim_emt.visb, .cssanimations .anim_group .anim_item.visb { visibility: inherit; } .anim_emt.start { -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .anim_emt.start.scale_up { -webkit-animation-name: mk_scale; animation-name: mk_scale; } .anim_emt.start.fade_in { -webkit-animation-name: mk_fade; animation-name: mk_fade; } .anim_emt.start.r_to_l { -webkit-animation-name: mk_right_to_left; animation-name: mk_right_to_left; } .anim_emt.start.l_to_r { -webkit-animation-name: mk_left_to_right; animation-name: mk_left_to_right; } .anim_emt.start.t_to_b { -webkit-animation-name: mk_top_to_bottom; animation-name: mk_top_to_bottom; } .anim_emt.start.b_to_t { -webkit-animation-name: mk_bottom_to_top; animation-name: mk_bottom_to_top; } .slide_anim { visibility: hidden; } .slide_anim.start { visibility: visible; } .slide_anim.b_to_t.start { -webkit-animation: mk_bottom_to_top .6s; animation: mk_bottom_to_top 0.6s; } .anim_emt.palx_img.start { overflow: hidden; -webkit-animation-name: tt_palx_wrap; animation-name: tt_palx_wrap; } .anim_emt.palx_img.start .img-wrap { -webkit-animation: tt_palx_img .6s; animation: tt_palx_img 0.6s; } @keyframes tt_palx_wrap { 0% { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes tt_palx_img { 0% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes loader { to { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } } @keyframes loader_dash { from { stroke-dasharray: 0 150; stroke-dashoffset: 0; } to { stroke-dasharray: 100 150; stroke-dashoffset: -140; } } @keyframes line_w100 { to { left: 100%; } } @keyframes rotate_360 { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes fade_out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade_in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade_out_in { 0%,100% { opacity: 1; } 50% { opacity: 0; } } @keyframes mk_scale { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes mk_fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes mk_left_to_right { 0% { -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes mk_right_to_left { 0% { -webkit-transform: translateX(30px); transform: translateX(30px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes mk_bottom_to_top { 0% { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes mk_top_to_bottom { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes mk_spt { 0% { -webkit-transform: translateY(10%); transform: translateY(10%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .js-m { opacity: 0; transform: translate(0, 30px); transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82); } .js-m.animate { opacity: 1; transform: translate(0, 0); } .js-m-2-1 { opacity: 0; transform: translate(0, 30px); transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82); } .js-m-2-1.animate { opacity: 1; transform: translate(0, 0); } .a-del1 { animation-delay: 0.1s; } .a-del2 { animation-delay: 0.2s; } .a-del3 { animation-delay: 0.3s; } .a-del4 { animation-delay: 0.4s; } .a-del5 { animation-delay: 0.5s; } .a-del6 { animation-delay: 0.6s; } .a-del7 { animation-delay: 0.7s; } .a-del8 { animation-delay: 0.8s; } .a-del9 { animation-delay: 0.9s; } .a-del10 { animation-delay: 1s; } .a-dur1 { animation-duration: 0.3s; } .a-dur2 { animation-duration: 0.4s; } .a-dur3 { animation-duration: 0.5s; } .a-dur4 { animation-duration: 0.6s; } .a-dur5 { animation-duration: 0.7s; } .a-dur6 { animation-duration: 0.8s; } .a-dur7 { animation-duration: 0.9s; } .a-dur8 { animation-duration: 1s; } .a-dur9 { animation-duration: 1.1s; } .a-dur10 { animation-duration: 1.2s; } .a-dur11 { animation-duration: 1.3s; } .a-dur12 { animation-duration: 1.4s; } .a-dur13 { animation-duration: 1.5s; } .a-dur14 { animation-duration: 1.6s; } .a-dur15 { animation-duration: 1.7s; } .a-dur16 { animation-duration: 1.8s; } .a-dur17 { animation-duration: 1.9s; } .a-dur18 { animation-duration: 2s; } .t-del1 { transition-delay: 0.1s; } .t-del2 { transition-delay: 0.2s; } .t-del3 { transition-delay: 0.3s; } .t-del4 { transition-delay: 0.4s; } .t-del5 { transition-delay: 0.5s; } .t-del6 { transition-delay: 0.6s; } .t-del7 { transition-delay: 0.7s; } .t-del8 { transition-delay: 0.8s; } .t-del9 { transition-delay: 0.9s; } .t-del10 { transition-delay: 1s; } /*鍝嶅簲闅愯棌鏍峰紡*/ .pc-block{ display:block; } .pc-block-768{ display:block; } .pc-block-767{ display:block; } .m-block{ display:none; } .m-block-767{ display:none; } .m-block-768{ display:none; } @media (max-width:1024px){ .pc-block{ display:none; } .m-block{ display:block; } } @media (max-width:768px){ .pc-block-768{ display:none; } .m-block-768{ display:block; } } @media (max-width:767px){ .pc-block-767{ display:none; } .m-block-767{ display:block; } } /*鍒嗛〉鏍峰紡*/ .wpage{ text-align: center; } .pagination{ padding:40px 0 0; font-size:14px; font-weight:bold; line-height:22px; text-align:center; clear:both; display: inline-block; } .pagination a{ text-decoration:none; color:#d2d2d2; width: auto; padding:0 15px; height: 38px; line-height:38px; margin:0 2px; background:#212121; display: block; float: left; transition: .5s cubic-bezier(0.6, 0.2, 0.1, 1); } .pagination a.active{ background:#fbed4e; color:#333; transition: .5s cubic-bezier(0.6, 0.2, 0.1, 1); } .pagination span.laypage_curr{ width: auto; height: 38px; line-height:38px; margin:0 2px; display: inline-block; background:#fbed4e; color:#333; transition: .5s cubic-bezier(0.6, 0.2, 0.1, 1); } .pagination a:hover{ text-decoration:none; color:#333; background:#fbed4e; transition: .5s cubic-bezier(0.6, 0.2, 0.1, 1); } /*鍒嗛〉鏍峰紡end*/ @media (max-width:767px) { .wrap { padding: 30px } } .tran-middle{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } /*寮规€х洅鏍峰紡*/ .f-no { display: flex; flex-flow: row wrap; } .f-no-b-center { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } .f-no-b-start { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; } .f-no-b-stretch { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: stretch; } .f-no-c-center { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } .f-no-c-start { display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; } .f-no-c-stretch { display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; } .f-no-s-center { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; } .f-no-s-end { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-end; } .f-no-s-stretch { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: stretch; } .f-no-end-start { display: flex; flex-flow: row wrap; justify-content: flex-end; } .f-no-col { display: flex; flex-flow: column wrap; } .f-no-col-b-center { display: flex; flex-flow: column wrap; justify-content: space-between; align-items: center; } .f-no-col-c-center { display: flex; flex-flow: column wrap; justify-content: center; align-items: center; } .f-no-col-s-center { display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: center; } .f-no-col-s-end { display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: flex-end; } .f-no-col-c-start { display: flex; flex-flow: column wrap; justify-content: center; align-items: flex-start; } .f-no-col-b-start { display: flex; flex-flow: column wrap; justify-content: space-between; align-items: flex-start; } .f-no-col-end-start { display: flex; flex-flow: column wrap; justify-content: flex-end; align-items: flex-start; } @media (min-width:320px){ .footer { background-color: #121212; padding: 0.6rem 4% 1.1rem; } .footer .content{ position: relative; } .footer .content .logo-module{ width: 100% } .footer .content .logo-module img{ display: block; /*width: 2.6rem;*/ margin-bottom: 0.5rem; } .footer .content .logo-module .share a{ display: block; width: 0.6rem; height: 0.6rem; float: left; border-radius: 50%; border:1px solid #eedb31; margin-right: 0.1rem; padding-left:0; } .footer .content .logo-module .share a.wx{ background: url(../img/img-9.png) center no-repeat; } .footer .content .logo-module .share a.wb{ background: url(../img/img-10.png) center no-repeat; } .footer .content .logo-module .share a.qq{ background: url(../img/img-11.png) center no-repeat; } .footer .content .nav-module{ display: none; } .footer .content .tel-module .tel-box{ padding: 0.68rem 0; border-top:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(255,255,255,0.2); } .footer .content .tel-module .tel-box .box{ width: 3.4rem; } .footer .content .tel-module{ width: 100%; margin-top: 0.45rem; } .footer .content .tel-module .ewm{ /*position: absolute; right: 0%; top: 0;*/ width: 1.43rem; text-align: center; } .footer .content .tel-module .ewm img{ display: block; width: 100%; margin-bottom: 0.15rem; } .footer .content .tel-module .ewm .title{ font-size: 0.26rem; color: #fefeff; line-height: 1; } .footer .content .tel-module .icon{ width: 0.6rem; height: 0.6rem; border-radius: 50%; border:1px solid #eedb31; float: left; box-sizing:border-box; } .footer .content .tel-module .icon.domestic{ background: url(../img/img-12.png) center no-repeat; } .footer .content .tel-module .icon.exit{ background: url(../img/img-13.png) center no-repeat; } .footer .content .tel-module .mbox{ display: inline-block; float: left; margin-left: 0.2rem; } .footer .content .tel-module .mbox .title{ font-size: 0.26rem; color: #ffffff; line-height: 1.2; margin-bottom: 0.05rem; } .footer .content .tel-module .mbox .tel{ color: #eedb31; font-size: 0.2rem; line-height: 1; } .footer .bottom{ padding-top: 0.56rem; } .footer .bottom .box{ font-size: 0.24rem; color: #939393; line-height: 1.2; padding-bottom: 0.56rem; border-bottom: 1px solid rgba(255,255,255,0.2) } .footer .bottom .box span{ display: block; width:100%; margin-bottom: 0.2rem; } .footer .bottom .box a{ color: #939393; float: left; margin:0 0.6rem 0.08rem 0; } .footer .bottom .info{ font-size: 0.24rem; color: #939393; line-height: 1.4; padding-top: 0.5rem; } .footer .bottom .info span{ margin-left: 0.4rem; } .base_page .banner{ width: 100%; position: relative; overflow: hidden; margin-top: 1.3rem; } .base_page .banner img{ display: block; width: 100%; height: 4.5rem; object-fit:cover; } .base_page .banner .warp{ position: absolute; width: 92%; max-width: 1560px; left: 50%; transform:translate(-50%,-45%); z-index: 3; top: 50%; } .base_page .banner .en{ font-size: 0.4rem; color: #ffffff; line-height: 1.2; margin-bottom: 0.05rem; } .base_page .banner .title{ font-size: 0.5rem; color: #ffffff; line-height: 1.2; } .header{display: none;} header{ display: block; /*padding-top: .6rem;*/ padding:.35rem 0; height: 1.3rem; box-sizing:border-box; background-color: #151515; position: fixed; left: 0; width: 100%; top: 0; z-index: 10; } header .logo{ /*width: 2.3rem;*/ width:3rem; margin-left: 4%; } header .logo img{ display: block; width: 100%; } header .lines{ width:.52rem; height:.52rem; margin-right:4%; position: relative; cursor: pointer; } header .lines p { width:.52rem; height: 2px; background-color: #fff; position: absolute; left: 0; -webkit-transition: all 0.8s; transition: all 0.8s; } header .lines p:nth-child(1) { top:0px; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } header .lines.cur p:nth-child(1) { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } header .lines p:nth-child(2) { top: .18rem; -webkit-transition: all 0.5s; transition: all 0.5s; } header .lines.cur p:nth-child(2) { opacity: 0; } header .lines p:nth-child(3) { top: .36rem; -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } header .lines.cur p:nth-child(3) { -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } header .tel{ width: .45rem; height:.45rem; margin-right: .33rem; background: url(../img/img-44.png) center top/.45rem no-repeat; } .search-box { width: 100%; position: fixed; z-index: 25; overflow: hidden; top: 0%; left: 0%; display: none; height: 100%; background-color: rgba(0,0,0,0.9); } .search-box .point { display: block; width: .4rem; height: .4rem; position: fixed; right: 10%; top: 5%; } .search-box .point:before{ content: "\2715"; color: #fff; font-size: 0.5rem; } .search-box .box { width: 80%; height: 0.8rem; line-height: .8rem; border-bottom: 1px solid rgba(255,255,255,0.3); position: absolute; left: 10%; top: 25%; } .search-box .box .txt { width: 75%; float: left; height: 0.8rem; line-height: 0.8rem; color: #fff; border: 0; font-size: 0.26rem; padding: 0 .2rem; font-size: .26rem; background-color: transparent; } .search-box .box .btn { width: 0.8rem; height: 0.8rem; float: right; border: 0; background: url(../img/img-44.png) center/0.3rem no-repeat; } .headerbg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; display: none; background-color: rgba(0,0,0,0.7); } header .nav { width: 100%; background-color: #333333; position: absolute; top: 1.3rem; z-index: 2; display: none; box-sizing: border-box; left: 0; padding: 3% 4% 5%; } header .nav li .tit { font-size: 16px; line-height: 30px; height: 30px; display: block; width: 100%; color: #f1f1f1; padding: 10px 0; border-bottom: 1px solid rgba(106,94,68,0.2); } } @media (min-width:768px){ html{ font-size: 76px !important; } } @media (min-width:992px){ } @media (min-width:1025px){ .base_page .banner img{ height: auto; } .base_page .banner .en { font-size: 40px; margin-bottom: 0; } .base_page .banner .title { font-size: 50px; } .footer { padding: 55px 0 35px; } .w1560{ max-width: 1560px; width: 92%; margin: 0 auto; } .footer .w1560{ max-width: 1560px; width: 92%; margin: 0 auto; } .footer .content .logo-module{ width: 220px; } .footer .content .logo-module img{ display: block; max-width: 100%; margin-bottom: 20px; } .footer .content .logo-module .share a{ width: 40px; height: 40px; margin-right: 10px; } .footer .content .nav-module{ display: block; width: calc(100% - 540px); position: absolute; left: 24.5%; max-width: 738px; } .footer .content .nav-module li{ width: 25%; float: left; } .footer .content .nav-module li .tit{ font-size: 15px; color: #ffffff; line-height: 1.2; margin-bottom: 12px; } .footer .content .nav-module li p{ margin-top: 8px; line-height: 1; font-size: 15px; } .footer .content .nav-module li p a{ color: #666; } .footer .content .nav-module li p a:hover, .footer .bottom .box a:hover{ color: #eedb31 } .footer .content .tel-module{ width: 360px; float: right; margin-top: 0; } .footer .content .tel-module .tel-box{ padding: 0; border:0; } .footer .content .tel-module .tel-box .box{ width:50%; } .footer .content .tel-module .mbox{ margin-left: 0; width:100%; } .footer .content .tel-module .icon { width: 30px; height: 30px; margin-bottom: 10px; } .footer .content .tel-module .mbox .title { font-size: 15px; margin-bottom: 10px; } .footer .content .tel-module .mbox .tel { font-size: 18px; font-family: arial; } .footer .content .tel-module .ewm{ position: relative; margin-top: 35px; width: 80px; } .footer .content .tel-module .ewm .title { font-size: 15px; } .footer .bottom { padding-top: 90px; } .footer .bottom .box { font-size: 14px; line-height: 1.2; padding-bottom: 0; border-bottom: none; } .footer .bottom .box span { display: inline-block; width: auto; margin: 0 0px 5px 0; } .footer .bottom .box a { color: #939393; margin: 0 20px 5px 0; } .footer .bottom .info { font-size: 14px; line-height: 1.4; padding-top: 5px; } .footer .bottom .info span { margin-left: 40px; } header{ display: none; } .base_page .banner{ margin-top: 0; } .header{ position: fixed; top: 0; left: 0; z-index: 11; display: block; /*background-color: #101010;*/ /*background-color: #212121;*/ width: 100%; height: 150px; } .header.on{ background-color: #212121; } .header .box{ width: 92%; max-width: 1560px; margin: 0 auto; } .header .box .fa{ line-height: 60px; font-size:14px; color: #fff; display: inline-block; } .header .box .seach{ width: 120px; height: 26px; background-color: #7e7e7e; border-radius: 30px; margin-top: 17px; } .header .box .seach .btn{ display: block; width: 26px; float: right; height: 26px; border-radius: 50%; background:#fbed4e url(../img/img-43.png) center no-repeat; margin:0; } .header .box .seach input{ display: block; width: 83px; height: 16px; line-height: 16px; border:0; padding: 0; color: #fff; font-size: 14px; float: left; background-color: #7e7e7e; margin: 5px 0 0 8px; } .header .box .tel{ height: 26px; line-height: 26px; margin: 17px 50px 0 0 ; background: url(../img/img-42.png) left center no-repeat; padding-left: 30px; font-size: 14px; color: #fff; } .header .mians{ width: 92%; margin: 0 auto; max-width: 1560px; height: 90px; background-color: #1d1d1d; } .header .mians .logo{ display: block; /*width: 200px;*/ width:260px; margin: 0 0 0 20px; } .header .mians .logo img{ display: block; max-width: 100%; } .header .mians ul{ display: block; line-height: 90px; } .header .mians ul li{ float: left; line-height: 90px; box-sizing:border-box; /*margin-right:2.3vw;*/ padding: 0 1vw; position: relative; } .header .mians ul li:before{ display: block; width: 0%; height: 2px; background-color:transparent; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transition: all 0.3s; transition: all 0.3s; } .header .mians ul li.on:before, .header .mians ul li:hover:before{ background-color: #fcce01; left: 0; width: 100%; } .header .mians ul li a{ display: inline-block; color: #fff; font-size: 16px; } .header .mians .box .tel{ margin-top:0; } .header .mians .box .seach{ margin-top:0; } } @media (min-width:1200px){ .footer .content .nav-module{ left: 23%; } .header .mians ul li a{ font-size: 18px; } } .nav-box .box{ position: relative; } .nav-box .box:before{ content:""; position: absolute; height:2px; width:100%; left:0; background:#ffec40; bottom:0; opacity:0; transition: all .3s; } .nav-box .box.on:before, .nav-box .box:hover:before{ opacity:1; } .mian .nav .en{ font-weight:bold; font-style: italic; } .mian .nav .title{ font-weight:bold; font-style: italic; } .introduction .fa,.introduction .centent .tit,.introduction .character .tit,.introduction .character .sub-tt,.introduction .character .detailes,.introduction .character .honor .tt,.introduction .character .honor .list li,.culture ul li .mbox .fa,.pro_info .centent .box .fa,.pro_info .parameter .table .sub-tit,.products .mian .list li .box .title, .pro_info .mian .list li .box .title{ font-weight:bold; } .base_page .banner .en,.base_page .banner .title,.about .history .mbox .en, .introduction .en, .culture .en,.about .history .mbox .title, .introduction .title, .culture .title,.pro_info .centent .box .title,.pro_info .centent .box .tit{ font-weight:bold; font-style: italic; } .footer .bottom .info a{ color:#939393; } .about .history #yaer_list .swiper-slide .year{ display:inline-block; } .pro-list .warp .right .btn, .new .btn{ transition: all .4s; } .pro-list .warp .right .btn:hover, .new .btn:hover{ background-color:#eedb31; color:#333; } .exhibis .mian .list ol li .pic{ transition: all .4s; } .exhibis .mian .list ol li:hover .pic{ transform:translate(0,-20px); } input{ -webkit-tap-highlight-color:rgba(255,0,0,0) !important; } .exhibis .mian .list ul li .pic:hover .tip{ opacity:1; } .pro-list .warp .pic .img,.new ul li .pic img{ transition: all .4s; } .pro-list .warp:hover .pic .img{ transform:scale3d(1.1, 1.1, 1.0); } .new ul li .pic{ overflow: hidden; } .new ul li:hover .pic img{ transform:scale3d(1.1, 1.1, 1.0); } .exhibis .new_list li .img img, .new_info .new_list li .img img{ transition: all .4s; } .exhibis .new_list li:hover .img img, .new_info .new_list li:hover .img img{ transform:scale3d(1.1, 1.1, 1.0); } .indexs{ position: relative; z-index:2; } #cs{ position: absolute; left:0; top:50vh; z-index:1; } .header .rightbox{ display:none; } .header.active .mians ul li:last-child{ margin-right:0; } .header.active .rightbox{ display:flex; } .header{ transition: all .3s; } .header .mians{ transition: all .3s; } /*.header.active .mians ul li{ padding-right:0; }*/ .header.active .mians{ width:100%; max-width: 100%; padding:0 3%; box-sizing: border-box; } .header.active{ transform:translate(0,-60px); } .search-page .product_list li .box .tit{ height:60px; line-height:30px; overflow: hidden; } .header .box .languagebtn{ height: 26px; line-height: 26px; margin: 17px 20px 0 0; font-size:14px; color:#fff; } .header .box .languagebtn a{ color:#fff; }