/************************************************** 公用 **************************************************/ .wrap{ position:relative; overflow:hidden; width:calc(100vw - 108px); /*height:calc(100vh - 120px);*/ height:auto; margin:0 54px;} .content-window-card { position: relative; box-shadow: none; bottom: 0; left: 0; width: auto; padding: 0;} .content-window-card p { height: 2rem;} .custom-info {border: solid 1px silver;} div.info-top { position: relative; background: none repeat scroll 0 0 #F9F9F9; border-bottom: 1px solid #CCC; border-radius: 5px 5px 0 0;} div.info-top div { display: inline-block; color: #333333; font-size: 14px; font-weight: bold; line-height: 31px; padding: 0 10px;} div.info-top img { position: absolute; top: 10px; right: 10px; transition-duration: 0.25s;} div.info-top img:hover { box-shadow: 0px 0px 5px #000;} div.info-middle { font-size: 12px; padding: 10px 6px; line-height: 20px;} div.info-bottom {height: 0px; width: 100%; clear: both; text-align: center;} div.info-bottom img { position: relative; z-index: 104;} #map span { margin-left: 5px; font-size: 11px;} .info-middle img { float: left; margin-right: 6px;} /********** 头部 **********/ .headerWrap{ width:100%; height:60px; position:fixed; z-index:1000;} .header{ height:60px; padding:0 54px; line-height:60px; color:#4E4E4E; background-color:#FFF; text-align:center;} .logo{ float:left; display:block; width:20%; height:60px; text-align:left; position:relative; z-index:3;} .logo img{ height:38px; margin-top:11px;} .header h2{ position:absolute; left:0; top:0; width:100%; height:60px; font-family:Century Gothic,Arial; font-weight:bold; font-size:0.875em; line-height:60px; color:#AFAFAF; text-align:center; text-transform:uppercase; z-index:1;} .hd-r{ float:right; width:30%; height:60px; text-align:right; position:relative; z-index:3;} .hd-r a.tositenav{ position:relative; display:inline-block; height:28px; padding:0 22px; border-radius:20px; margin-right:8px; background-color:#8EC31E; color:#FFF; font-size:0.875em; line-height:28px;} .hd-r a.tositenav:hover{ background-color:#4E4E4E; color:#FFF; transition:all 0.5s; } .hd-r span.tel{ position: relative; display: inline-block; height:60px; padding-left:22px; background: url(../images/imgsign/hd_sign01.png) no-repeat left center; display:none;} .hd-r b{ display: inline-block; margin:0 6px 0 -6px; font-size:12px; color: #767676;} .hd-r a.hdwechat{ position:relative; padding-left:24px; background: url(../images/imgsign/hd_sign03.png) no-repeat left center; overflow:hidden; font-size:0.875em; color:#4E4E4E; display:none;} .hd-r a.hdwechat img{ position:absolute; top:39px; left:50%; width:120px; margin-left:-60px; max-width:120px; opacity:0; transform:translateY(-20px); -o-transform:translateY(-20px); -ms-transform:translateY(-20px); -moz-transform:translateY(-20px); -webkit-transform:translateY(-20px);} .hd-r a.hdwechat:hover{ overflow:inherit;} .hd-r a.hdwechat:hover img{ opacity:1; transform:translateY(0px); -o-transform:translateY(0px); -ms-transform:translateY(0px); -moz-transform:translateY(0px); -webkit-transform:translateY(0px); transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; -ms-transition:all 0.2s ease-out;} .hd-r a.hdwechat2{ display: inline-block; height:24px; padding:0 24px; margin-bottom:-7px; position:relative; background: url(../images/qrcode_s.jpg) no-repeat center center; overflow:hidden;} .hd-r a.hdwechat2 img{ position:absolute; top:39px; left:50%; width:120px; margin-left:-60px; max-width:120px; opacity:0; transform:translateY(-20px); -o-transform:translateY(-20px); -ms-transform:translateY(-20px); -moz-transform:translateY(-20px); -webkit-transform:translateY(-20px);} .hd-r a.hdwechat2:hover{ overflow:inherit;} .hd-r a.hdwechat2:hover img{ opacity:1; transform:translateY(0px); -o-transform:translateY(0px); -ms-transform:translateY(0px); -moz-transform:translateY(0px); -webkit-transform:translateY(0px); transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; -ms-transition:all 0.2s ease-out;} .hd-r a.tolocation{ position:relative; display:inline-block; padding-left:22px; background: url(../images/imgsign/hd_sign02.png) no-repeat left center; margin-right:0; font-size:0.875em; color:#4E4E4E; } .hd-r a.tolocation:hover{ color:#8EC31E; } .hd-r a.language{ display:inline-block; width:72px; height:26px; border:1px solid #4E4E4E; border-radius:30px; font-size:0.75em; line-height:26px; color:4E4E4E; text-align:center;} .hd-r a.language:hover{ background-color:#8EC31E; border-color:#8EC31E; color:#FFF; transition:all 0.5s;} @media screen and (max-width:1440px) { .logo{ width:24%;} .hd-r{ width:28%;} .hd-r b{ margin:0 4px 0 -4px;} .hd-r a.hdwechat2{ padding:0 20px;} } @media screen and (max-width:1280px) { .logo{ width:30%;} .hd-r{ width:28%;} .hd-r b{ display:none;} .hd-r a.hdwechat2{ padding:0 16px;} .hd-r a.tolocation{ display:none;} .hd-r a.tositenav{ margin-right:4px;} } @media screen and (max-width:1100px) { .logo{ width:30%;} .hd-r{ width:30%;} .hd-r a.hdwechat2{ display:none;} } @media screen and (max-width:980px) { .header{ padding:0 20px;} .header h2{ display:none;} .hd-r b{ display:none;} .hd-r a.hdwechat{ display:none;} .hd-r a.hdwechat2{ display:none;} .hd-r a.tolocation{ display:none;} .hd-r a.language{ display:none;} .hd-r a.tositenav{ margin-right:0px; margin-top:16px;} } @media screen and (max-width:400px) { .header{ padding:0 10px;} .logo img{ height:30px; margin-top:15px;} .hd-r a.tositenav{ padding: 0 18px;} } /*-- 内页导航 --*/ .sitenav{ position:absolute; left:50%; top:0; margin-left:-40%; width:80%; height:60px; background-color:#FFF; font-weight:bold; font-size:0.875em; line-height:60px; color:#AFAFAF; text-align:center; text-transform:uppercase; z-index:2;} #pgindex .sitenav{ display:none !important;} .sitenav .navigation-inner{ position:relative;} /*.navigation-up{}*/ .navigation-up .navigation-v3{ _margin-left:10px;} .navigation-up .navigation-v3 ul{ width:100%; margin:0 auto;} .navigation-up .navigation-v3 li{ display:inline-block;} .navigation-up .navigation-v3 li a{ padding:0 24px; color:#AFAFAF;} .navigation-up .navigation-v3 li:hover a{ color:#8EC31E;} #pg11 #n1 a, #pg21 #n2 a, #pg31 #n3 a, #pg32 #n3 a, #pg41 #n4 a, #pg42 #n4 a, #pg51 #n5 a{ color:#8EC31E;} #pd1 #n2 a, #pd2 #n2 a, #pd3 #n2 a, #pd4 #n2 a, #pd5 #n2 a, #pd6 #n2 a, #pd7 #n2 a, #pd8 #n2 a, #pgswj #n2 a{ color:#8EC31E;} .navigation-down{ position:absolute; top:60px; left:0px; width:100%; z-index:100;} .navigation-down .nav-down-menu{ width:100%; margin:0; /*background:url(../images/downmenubg.png) top center repeat;*/ background:rgba(0,0,0,0.6); position:absolute; top:0px;} .navigation-down .nav-down-menu .navigation-down-inner{ margin:auto; width:80%; /*width:100%;*/ position:relative;} .navigation-down .nav-down-menu dl{ float:left; margin:10px 30px 10px 0;} .navigation-down .nav-down-menu dl:after{ margin-right:0;} .navigation-down .menu-1 dl{ margin:14px 1% 14px 1%; width:9.1%;} .navigation-down .menu-1 dt{ font-size:14px; color:#8EC31E; padding-bottom:10px; border-bottom:1px solid #61789E; margin-bottom:10px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .navigation-down .menu-1 dd a{ display:block; font-size:0.875em; line-height:24px; color:#FFF; max-width:100%; /*overflow:hidden; text-overflow:ellipsis; white-space:nowrap;*/ text-align:center;} .navigation-down .menu-1 dd a:hover{ color:#8EC31E; font-weight:bold; text-decoration:underline;} .navigation-down .menu-2 dd a,.navigation-down .menu-3 dd a{ font-size:0.875em; color:#FFF; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .navigation-down .nav-down-menu .nav-dl1{ /*margin-left:20%;*/ margin-left:0px;} .navigation-down .nav-down-menu .nav-dl2{ margin-left:0px;} @media screen and (min-width:1921px) { .navigation-down .menu-1 dl{ margin:24px 0% 24px 0%;} } @media screen and (max-width:1440px) { .navigation-up .navigation-v3 li a{ padding:0 18px;} } @media screen and (max-width:1280px) { .sitenav{ margin-left:-35%;} .sitenav #n0{ display:none;} } @media screen and (max-width:1100px) { .navigation-up .navigation-v3 li a{ padding:0 14px;} } @media screen and (max-width:980px) { .sitenav{ display:none;} } /*-- //内页导航 --*/ /*-- 弹出菜单导航 --*/ .cd-section { padding: 2em; margin-top: 5em; text-align: center; } .cd-bouncy-nav-trigger { /* button style */ /*background: #DC965A; color: #ffffff; padding: 1.2em 2em; border-radius: 10em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 10px #171718; */} .no-touch .cd-bouncy-nav-trigger:hover { background: #e0a36f; } .cd-bouncy-nav-modal { position: fixed; z-index:10000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(36, 35, 37, 0.9); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0.6s, visibility 0s 0.9s; -moz-transition: opacity 0.3s 0.6s, visibility 0s 0.9s; transition: opacity 0.3s 0.6s, visibility 0s 0.9s;} .cd-bouncy-nav-modal.cd-fade-in { visibility: visible; opacity: 1; -webkit-transition: opacity 0.1s 0s, visibility 0s 0s; -moz-transition: opacity 0.1s 0s, visibility 0s 0s; transition: opacity 0.1s 0s, visibility 0s 0s; } .cd-bouncy-nav-modal .cd-close { display: block; position: fixed; top: 20px; right: 5%; width: 44px; height: 44px; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: url("../images/cd-icon-close.svg") no-repeat center center; -webkit-transform: scale(0) translateZ(0); -moz-transform: scale(0) translateZ(0); -ms-transform: scale(0) translateZ(0); -o-transform: scale(0) translateZ(0); transform: scale(0) translateZ(0); -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s; -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s; transition: transform 0.3s 0s, visibility 0s 0.3s; } .cd-bouncy-nav-modal.cd-fade-in .cd-close { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.3s 0s, visibility 0.3s 0s; -moz-transition: -moz-transform 0.3s 0s, visibility 0.3s 0s; transition: transform 0.3s 0s, visibility 0.3s 0s; } @media only screen and (min-width: 1170px) { .cd-bouncy-nav-modal .cd-close { top: 60px; } } .cd-bouncy-nav { position: absolute; left: 50%; top: 50vh; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 90%; max-width: 300px; } .cd-bouncy-nav li { width: 50%; float: left; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translateY(100vh); -moz-transform: translateY(100vh); -ms-transform: translateY(100vh); -o-transform: translateY(100vh); transform: translateY(100vh); text-align: center; } .is-visible .cd-bouncy-nav li { /* used to assign a tranlsateY value when the animation is over */ -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .cd-fade-in .cd-bouncy-nav li { -webkit-animation: cd-move-in 0.4s; -moz-animation: cd-move-in 0.4s; animation: cd-move-in 0.4s; } .cd-fade-out .cd-bouncy-nav li { -webkit-animation: cd-move-out 0.4s; -moz-animation: cd-move-out 0.4s; animation: cd-move-out 0.4s; } .cd-fade-in .cd-bouncy-nav li, .cd-fade-out .cd-bouncy-nav li { -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } .cd-fade-in .cd-bouncy-nav li:nth-of-type(2), .cd-fade-out .cd-bouncy-nav li:nth-of-type(2) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s; } .cd-fade-in .cd-bouncy-nav li:nth-of-type(3), .cd-fade-out .cd-bouncy-nav li:nth-of-type(3) { -webkit-animation-delay: 0.15s; -moz-animation-delay: 0.15s; animation-delay: 0.15s; } .cd-fade-in .cd-bouncy-nav li:nth-of-type(4), .cd-fade-out .cd-bouncy-nav li:nth-of-type(4) { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; animation-delay: 0.25s; } .cd-fade-in .cd-bouncy-nav li:nth-of-type(5), .cd-fade-out .cd-bouncy-nav li:nth-of-type(5) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .cd-fade-in .cd-bouncy-nav li:nth-of-type(6), .cd-fade-out .cd-bouncy-nav li:nth-of-type(6) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; } .cd-bouncy-nav a { display: inline-block; min-width: 80px; position: relative; padding: 90px 20px 0; margin-bottom: 30px; color: #ffffff; } .cd-bouncy-nav a::before { /* icons */ content: ''; display: block; position: absolute; top: 0; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); height: 80px; width: 80px; border-radius: 50%; background-color: #8EC31E; background-image: url("../images/cd-category-icons.svg"); background-repeat: no-repeat; background-position: 0 0; -webkit-box-shadow:0 0 30px rgba(255, 255,255, 0.3); -moz-box-shadow:0 0 30px rgba(255, 255,255, 0.3); box-shadow:0 0 30px rgba(255, 255,255, 0.3);} .cd-bouncy-nav .navli1 a::before{ background:url("../images/cd-category-icons.svg") 0 0 no-repeat, -webkit-linear-gradient(top, rgba(252,176,64,0.3),rgba(243,155,25,0.8));} .cd-bouncy-nav .navli2 a::before{ background:url("../images/cd-category-icons.svg") -80px 0 no-repeat, -webkit-linear-gradient(top, rgba(243,111,66,0.3),rgba(233,86,36,0.8));} .cd-bouncy-nav .navli3 a::before{ background:url("../images/cd-category-icons.svg") -320px 0 no-repeat, -webkit-linear-gradient(top, rgba(22,193,243,0.3),rgba(41,167,225,0.8));} .cd-bouncy-nav .navli4 a::before{ background:url("../images/cd-category-icons.svg") -400px 0 no-repeat, -webkit-linear-gradient(top, rgba(56,181,74,0.3),rgba(27,165,49,0.8));} .cd-bouncy-nav .navli5 a::before{ background:url("../images/cd-category-icons.svg") -240px 0 no-repeat, -webkit-linear-gradient(top, rgba(141,198,62,0.3),rgba(125,188,38,0.8));} .cd-bouncy-nav .navli6 a::before{ background:url("../images/cd-category-icons.svg") -160px 0 no-repeat, -webkit-linear-gradient(top, rgba(175,70,122,0.3),rgba(159,72,115,0.8));} .no-touch .cd-bouncy-nav a:hover::before { background-color: #DC965A; } .cd-bouncy-nav li:nth-of-type(2) a::before { background-position: -80px 0; } .cd-bouncy-nav li:nth-of-type(3) a::before { background-position: -320px 0; } .cd-bouncy-nav li:nth-of-type(4) a::before { background-position: -400px 0; } .cd-bouncy-nav li:nth-of-type(5) a::before { background-position: -240px 0; } .cd-bouncy-nav li:nth-of-type(6) a::before { background-position: -160px 0; } @media only screen and (min-width: 768px) { .cd-bouncy-nav { max-width: 450px; } .cd-bouncy-nav li { width: 33.33%; float: left; } .cd-fade-in .cd-bouncy-nav li:nth-of-type(1), .cd-fade-out .cd-bouncy-nav li:nth-of-type(1) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s; } .cd-fade-in .cd-bouncy-nav li:nth-of-type(2), .cd-fade-out .cd-bouncy-nav li:nth-of-type(2) { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; animation-delay: 0s; } .cd-fade-in .cd-bouncy-nav li:nth-of-type(4), .cd-fade-out .cd-bouncy-nav li:nth-of-type(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .cd-fade-in .cd-bouncy-nav li:nth-of-type(5), .cd-fade-out .cd-bouncy-nav li:nth-of-type(5) { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; animation-delay: 0.25s; } .cd-bouncy-nav a { margin-bottom: 50px; } } @media only screen and (min-width: 980px) { .cd-bouncy-nav { max-width:800px;} } @media only screen and (min-width:1280px) { .cd-bouncy-nav { max-width:1000px;} } @media only screen and (min-width:1440px) { .cd-bouncy-nav { max-width:1280px;} .cd-bouncy-nav a { display: inline-block; min-width: 80px; position: relative; padding: 130px 20px 0; margin-bottom: 60px; color: #ffffff; } .cd-bouncy-nav a::before { /* icons */ content: ''; display: block; position: absolute; top: 0; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); height: 120px; width:120px; border-radius: 50%; background-color: #8EC31E; background-image: url("../images/cd-category-icons2.svg"); background-repeat: no-repeat; background-position: 0 0;} .cd-bouncy-nav .navli1 a::before{ background:url("../images/cd-category-icons2.svg") 0 0 no-repeat, -webkit-linear-gradient(top, rgba(252,176,64,0.3),rgba(243,155,25,0.8));} .cd-bouncy-nav .navli2 a::before{ background:url("../images/cd-category-icons2.svg") -80px 0 no-repeat, -webkit-linear-gradient(top, rgba(243,111,66,0.3),rgba(233,86,36,0.8));} .cd-bouncy-nav .navli3 a::before{ background:url("../images/cd-category-icons2.svg") -320px 0 no-repeat, -webkit-linear-gradient(top, rgba(22,193,243,0.3),rgba(41,167,225,0.8));} .cd-bouncy-nav .navli4 a::before{ background:url("../images/cd-category-icons2.svg") -400px 0 no-repeat, -webkit-linear-gradient(top, rgba(56,181,74,0.3),rgba(27,165,49,0.8));} .cd-bouncy-nav .navli5 a::before{ background:url("../images/cd-category-icons2.svg") -240px 0 no-repeat, -webkit-linear-gradient(top, rgba(141,198,62,0.3),rgba(125,188,38,0.8));} .cd-bouncy-nav .navli6 a::before{ background:url("../images/cd-category-icons2.svg") -160px 0 no-repeat, -webkit-linear-gradient(top, rgba(175,70,122,0.3),rgba(159,72,115,0.8));} .no-touch .cd-bouncy-nav a:hover::before { background-color: #DC965A; } .cd-bouncy-nav li:nth-of-type(1) a::before { background-position: 0 0; } .cd-bouncy-nav li:nth-of-type(2) a::before { background-position: -80px 0; } .cd-bouncy-nav li:nth-of-type(3) a::before { background-position: -320px 0; } .cd-bouncy-nav li:nth-of-type(4) a::before { background-position: -400px 0; } .cd-bouncy-nav li:nth-of-type(5) a::before { background-position: -240px 0; } .cd-bouncy-nav li:nth-of-type(6) a::before { background-position: -160px 0; } } @-webkit-keyframes cd-move-in { 0% { -webkit-transform: translateY(100vh); } 65% { -webkit-transform: translateY(-1.5vh); } 100% { -webkit-transform: translateY(0vh); } } @-moz-keyframes cd-move-in { 0% { -moz-transform: translateY(100vh); } 65% { -moz-transform: translateY(-1.5vh); } 100% { -moz-transform: translateY(0vh); } } @keyframes cd-move-in { 0% { -webkit-transform: translateY(100vh); -moz-transform: translateY(100vh); -ms-transform: translateY(100vh); -o-transform: translateY(100vh); transform: translateY(100vh); } 65% { -webkit-transform: translateY(-1.5vh); -moz-transform: translateY(-1.5vh); -ms-transform: translateY(-1.5vh); -o-transform: translateY(-1.5vh); transform: translateY(-1.5vh); } 100% { -webkit-transform: translateY(0vh); -moz-transform: translateY(0vh); -ms-transform: translateY(0vh); -o-transform: translateY(0vh); transform: translateY(0vh); } } @-webkit-keyframes cd-move-out { 0% { -webkit-transform: translateY(0vh); } 100% { -webkit-transform: translateY(-100vh); } } @-moz-keyframes cd-move-out { 0% { -moz-transform: translateY(0vh); } 100% { -moz-transform: translateY(-100vh); } } @keyframes cd-move-out { 0% { -webkit-transform: translateY(0vh); -moz-transform: translateY(0vh); -ms-transform: translateY(0vh); -o-transform: translateY(0vh); transform: translateY(0vh); } 100% { -webkit-transform: translateY(-100vh); -moz-transform: translateY(-100vh); -ms-transform: translateY(-100vh); -o-transform: translateY(-100vh); transform: translateY(-100vh); } } /*-- //弹出菜单导航 --*/ /********** 底部 **********/ .footer{ width:100%; height:60px; /*padding:0 54px; width: calc(100% - 108px);*/ position:fixed; bottom:0; left:50%; margin-left:-50%; background-color:#FFF; z-index:1000;} .copyright{ float:left; width:50%; margin-left:54px; font-size:0.875em; color:#999; line-height:60px;} .copyright-phone{ display:none;} .copyright span{ margin-right:24px;} .copyright label{ font-family:HelveticaNeue, Arial, Tahoma, Helvetica, sans-serif;} .copyright a{ color:#999;} .copyright a:hover{ color:#8EC31E; text-decoration:underline;} .ft-share{ float:right; width:40%; height:24px; margin-top:18px; margin-right:54px; text-align:right;} .ft-share a{ display:inline-block; width:24px; height:24px; margin-left:8px; cursor:pointer;} .s-icon{ width:24px; height:24px; background-image:url(../images/imgsign/share_icons.png); background-repeat:no-repeat;} .share-tsina{ background-position:0 0;} .share-weixin{ background-position:-24px 0;} .share-qzone{ background-position:-48px 0;} .share-tqq{ background-position:-72px 0;} .share-renren{ background-position:-96px 0;} .share-tsina:hover{ background-position:0 -24px;} .share-weixin:hover{ background-position:-24px -24px;} .share-qzone:hover{ background-position:-48px -24px;} .share-tqq:hover{ background-position:-72px -24px;} .share-renren:hover{ background-position:-96px -24px;} @media screen and (max-width:1280px) { .copyright{ width:48%;} .ft-share{ width:36%;} } @media screen and (max-width:980px) { /*.footer{ height:auto; padding:12px 0 18px;} .copyright{ width:100%; margin-left:0; line-height:48px; text-align:center;} .ft-share{ float:left; width:100%; height:24px; margin-top:0; margin-right:0; text-align:center;}*/ .footer{ height:auto; padding:0; margin-bottom:60px;} .copyright{ width:100%; margin-left:0; line-height:48px; text-align:center;} .ft-share{ display:none;} } @media screen and (max-width:640px) { .footer{ display:none;} .copyright{ display:none;} .copyright-phone{ display:block;} .copyright-phone label{ display:none;} } /*-- 返回顶部 --*/ #topcontrol{ z-index:1000;} @media screen and (max-width:980px) { #topcontrol{ right:0 !important;} #topcontrol img{ width:40px !important; height:40px !important;} } /*-- //返回顶部 --*/ /*-- 手机底部快速链接 --*/ .botnav{ width:100%; height:60px; background:-moz-linear-gradient(top, #8EC31E, #8EC31E); background:-webkit-linear-gradient(top, #8EC31E, #8EC31E); background:-ms-linear-gradient(top, #8EC31E, #8EC31E); /*border-top:1px solid #DDD;*/ position:fixed; bottom:0; z-index:10000; display:none;} .botnav li{ float:left; width:20%; height:60px;} .botnav li a{ display: block; width:100%; text-align:center; font-size:0.75em; color:#FFF; line-height:26px;} .botnav li .home{ height:26px; padding-top:34px; background:url(../images/ftsign_home.png) no-repeat center 10px; /*background-size:40%;*/ /*border-right:1px solid #EEFFBE;*/} .botnav li .share{ height:26px; padding-top:34px; background:url(../images/ftsign_share.png) no-repeat center 10px; /*background-size:40%;*/ /*border-right:1px solid #EEFFBE;*/} .shareBox{ position:absolute; left:0; bottom:61px; width:100%; z-index:3000; overflow:hidden; display:none; background:#FFF; padding:12px 0px; box-shadow:0px 2px 7px rgba(0,0,0,0.75);} .shareBox img{ float:left; margin-left:12px; width:40px;} .botnav li .email{ height:26px; padding-top:34px; background:url(../images/ftsign_email.png) no-repeat center 10px; /*background-size:36%;*/ /*border-right:1px solid #EEFFBE;*/} .botnav li .phone{ height:26px; padding-top:34px; background:url(../images/ftsign_phone.png) no-repeat center 10px; /*background-size:36%;*/ /*border-right:1px solid #EEFFBE;*/} .botnav li .tel{ height:26px; padding-top:34px; background:url(../images/ftsign_tel.png) no-repeat center 10px; /*background-size:36%;*/ /*border-right:1px solid #EEFFBE;*/} .botnav li .map{ height:26px; padding-top:34px; background:url(../images/ftsign_map.png) no-repeat center 10px; /*background-size:36%;*/ /*border-right:1px solid #EEFFBE;*/} .botnav li .english{ height:26px; padding-top:34px; background:url(../images/ftsign_en.png) no-repeat center 10px; /*background-size:36%;*/ /*border-right:1px solid #EEFFBE;*/} @media screen and (max-width:980px) { .botnav{ display:block;} } /*-- //手机底部快速链接 --*/ /************************************************** 首页 **************************************************/ /*-- 首页banner --*/ .banner{ position:relative; width:100%; height:auto; overflow:hidden; text-align:center; vertical-align:middle; margin-bottom:60px;} .banner .bannerlogo{ position:absolute; top:50%; left:50%; margin-top:-157px; margin-left:-101px; z-index:2; text-align:center; display:none;} .banner .bannerlogo img{ width:202px;} .banner .banner-pc{ display:block; width:100%; position:relative; z-index:1;} .banner .banner-phone{ display:none; width:100%; position:relative; z-index:2;} .banner img{ width:100%;} .banner-container{ margin-left:auto; margin-right:auto;} .banner-slide{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;} .banner-container .swiper-button-prev, .banner-container .swiper-container-rtl .swiper-button-next { left:20px; right:auto;} .banner-container .swiper-button-next{ left:auto; right:20px;} .banner-container .swiper-pagination-bullet { background:#FFFFFF; opacity:.4 } .banner-container .swiper-pagination-bullet-active { background:#8EC31E; opacity:1;} .banner-phone{ display:none;} @media screen and (max-width:1280px) { .banner{ margin-bottom:40px;} } @media screen and (max-width:980px) { .banner .bannerlogo{ display:none;} .banner .banner-pc{ display:none;} .banner .banner-phone{ display:block;} } @media screen and (max-width:640px) { .banner{ margin-bottom:20px;} .banner .bannerlogo{ margin-top:-140px; margin-left:-90px;} .banner .bannerlogo img{ width:180px;} } @media screen and (max-width:480px) { .banner .bannerlogo{ margin-top:-109px; margin-left:-70px;} .banner .bannerlogo img{ width:140px;} } @media screen and (max-width:375px) { .banner{ margin-bottom:10px;} .banner .bannerlogo{ margin-top:-84px; margin-left:-54px;} .banner .bannerlogo img{ width:108px;} } /*-- //首页banner --*/ /*-- 首页关于苏达山 --*/ .indab{ width:100%; height:0; padding-bottom:44%; margin-bottom:60px; position:relative; overflow:hidden;} .indab .indabbg{ position:absolute; z-index:1; width:100%; height:100%; background:url(../images/imgindex/indabbg.jpg) center no-repeat; background-size:cover;} .indab .indabmask{ position:absolute; z-index:2; width:100%; height:100%; background:url(../images/imgindex/abmask.png) center no-repeat; background-size:cover;} .indab .indabtxt{ position:absolute; z-index:3; box-sizing:border-box; left:50%; top:7.5%; width:22%; height:85%; padding:3.5% 3.5%; background-color:#FFF; margin-left:-11%; font-size:0.875em; line-height:30px; color:#000; text-align:center; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); opacity:0; -webkit-transition:all 0.8s; transition:all 0.8s;} .indab .indabtxt.show{ -webkit-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0); opacity:1;} .indab .indabtxt img{ display:block; margin:0 auto 16%;} .indab .indabtxt h2{ margin:43.4% 0 4%; font-size:38px; line-height:40px; color:#545454; font-family:Georgia, Arial; text-transform:uppercase;} .indab .indabtxt .txt{ display:block; font-size:14px; color:#000; -webkit-transition:all 0.5s; transition:all 0.5s;} .indab .indabtxt .more{ display:inline-block; padding:0 11.25%; border:1px solid #000; border-radius:23px; margin-top:17.5%; font-family:Century Gothic, Arial; font-size:14px; line-height:46px; color:#000;} .indab .indabtxt .more:hover{ border-color:#8EC31E; color:#8EC31E; transition:all 0.5s;} .indab .indabtxt span{ display:inline-block; position:absolute; left:50%; bottom:7%; width:8px; height:25px; background:url(../images/imgsign/bg_sign01.png) no-repeat center; margin-left: 4px; -webkit-animation:arrowDown 1s ease-in infinite; animation:arrowDown 1s ease-in infinite;} @-webkit-keyframes arrowDown { 0% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 50% { -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes arrowDown { 0% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 50% { -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @media screen and (max-width:1600px) { .indab .indabtxt{ width:26%; margin-left:-13%;} .indab .indabtxt img{ width:136px; margin-bottom:10%;} .indab .indabtxt .more{ margin-top:10%;} } @media screen and (max-width:1440px) { .indab .indabtxt{ width:30%; margin-left:-15%;} .indab .indabtxt img{ width:128px; margin-bottom:7%;} .indab .indabtxt .more{ margin-top:7%;} } @media screen and (max-width:1280px) { .indab{ margin-bottom:40px;} .indab .indabtxt{ width:36%; margin-left:-18%;} .indab .indabtxt img{ width:116x; margin-bottom:4%;} .indab .indabtxt .txt{ line-height:24px;} .indab .indabtxt .more{ padding:0 10%; line-height:34px; margin-top:4%;} } @media screen and (max-width:1100px) { .indab .indabtxt{ width:40%; margin-left:-20%;} .indab .indabtxt img{ width:100px; margin-bottom:4%;} .indab .indabtxt .more{ margin-top:4%;} } @media screen and (max-width:980px) { .indab{ padding-bottom:50%;} .indab .indabtxt{ width:44%; margin-left:-22%;} .indab .indabtxt img{ margin-bottom:6%;} .indab .indabtxt .more{ margin-top:6%;} } @media screen and (max-width:860px) { .indab{ padding-bottom:56%;} .indab .indabtxt img{ margin-bottom:4%;} .indab .indabtxt .more{ margin-top:4%;} } @media screen and (max-width:768px) { .indab{ padding-bottom:60%;} .indab .indabtxt{ width:50%; margin-left:-25%;} .indab .indabtxt img{ width:80px;} } @media screen and (max-width:640px) { .indab{ margin-bottom:20px;} } @media screen and (max-width:576px) { .indab{ padding-bottom:66%;} .indab .indabtxt{ width:60%; margin-left:-30%;} .indab .indabtxt img{ margin-bottom:4%;} .indab .indabtxt .more{ margin-top:4%;} } @media screen and (max-width:480px) { .indab{ padding-bottom:60%;} .indab .indabtxt{ width:68%; margin-left:-34%; padding:5% 5%;} .indab .indabtxt img{ width:60px; margin-bottom:6%;} .indab .indabtxt .txt{ font-size:12px; line-height:1.5;} .indab .indabtxt .more{ margin-top:6%; font-size:12px; display:none;} .indab .indabtxt span{ display:none;} } @media screen and (max-width:375px) { .indab{ margin-bottom:10px;} .indab .indabtxt{ width:70%; margin-left:-35%;} } @media screen and (max-width:320px) { .indab .indabtxt{ width:80%; margin-left:-40%;} .indab .indabtxt img{ margin-bottom:4%;} .indab .indabtxt .more{ margin-top:6%;} } /*-- //首页关于苏达山 --*/ /*-- 首页产品 --*/ .indprod{ width:100%; height:auto; margin-bottom:60px; overflow:hidden; position:relative;} .indprod-container{ width:100%; height:auto;} .indprod-slide{ text-align:center; background:#FFF; /* Center slide text vertically */ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; position:relative;} .cpseries{ float:left; width:100%; height:auto; overflow:hidden; position:relative;} .cpseries1{ background-color:#16C1F3;} .cpseries2{ background-color:#2B8F8E;} .cpseries3{ background-color:#38B54A;} .cpseries4{ background-color:#8DC63E;} .cpseries5{ background-color:#F6EE30;} .cpseries6{ background-color:#FCB040;} .cpseries7{ background-color:#F36F42;} .cpseries8{ background-color:#AF467A;} .cpseries9{ background-color:#908CD1;} .cpseries10{ background-color:#AF467A;} .cpseries1:hover{ background-color:#29A7E1; -webkit-transition:all 0.5s; transition:all 0.5s;} .cpseries2:hover{ background-color:#0B7574; -webkit-transition:all 0.5s; transition:all 0.5s;} .cpseries3:hover{ background-color:#1BA531; -webkit-transition:all 0.5s; transition:all 0.5s;} .cpseries4:hover{ background-color:#7DBC26; -webkit-transition:all 0.5s; transition:all 0.5s;} .cpseries5:hover{ background-color:#ECE30E; -webkit-transition:all 0.5s; transition:all 0.5s;} .cpseries6:hover{ background-color:#F39B19; -webkit-transition:all 0.5s; transition:all 0.5s;} .cpseries7:hover{ background-color:#E95624; -webkit-transition:all 0.5s; transition:all 0.5s;} .cpseries8:hover{ background-color:#9F4873; -webkit-transition:all 0.5s; transition:all 0.5s;} .cpseries9:hover{ background-color:#8D6EBE; -webkit-transition:all 0.5s; transition:all 0.5s;} .cpseries10:hover{ background-color:#9F4873; -webkit-transition:all 0.5s; transition:all 0.5s;} .cpseries a{ display:block; width:100%;} .cpseries .prodimg{ width:100%; height:0; padding-bottom:189%; position:relative; overflow:hidden; background-color:#000;} .prodimg img{ width:100%; filter:alpha(opacity=60); opacity:0.6; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.8s linear; -moz-transition: all 0.8s linear; -ms-transition: all 0.8s linear; -o-transition: all 0.8s linear; transition: all 0.8s linear;} .cpseries:hover .prodimg img{ filter:alpha(opacity=100); opacity:1.0; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);} .prodname{ width:100%; height:auto; padding:36% 0; text-align:center;} .prodname h3{ font-weight:normal; font-size:1.875em; line-height:1em; color:#333; text-align:center; margin-bottom:6%; -webkit-transition:all 0.5s; transition:all 0.5s;} .prodname span{ display:inline-block; padding:0 5%; margin:0 auto; border:1px solid #333; border-radius:16px; margin-top:5.4%; font-size:0.875em; line-height:30px; color:#333; -webkit-transition:all 0.5s; transition:all 0.5s;} .cpseries:hover .prodname h3{ transform:translateY(-10px); color:#FFF;} .cpseries:hover .prodname span{ transform:translateY(10px); border-color:#FFF; background-color:#FFF; color:#666;} @media screen and (max-width:1440px) { .prodname h3{ font-size:1.5em;} } @media screen and (max-width:1280px) { .indprod{ margin-bottom:40px;} .prodname{ padding:20% 0;} .prodname h3{ font-size:1.125em;} .prodname span{ line-height:24px;} } @media screen and (max-width:980px) { .prodimg img{ filter:alpha(opacity=100); opacity:1.0;} } @media screen and (max-width:640px) { .indprod{ margin-bottom:20px;} } @media screen and (max-width:375px) { .indprod{ margin-bottom:10px;} /*.cpseries .prodimg{ padding-bottom:140%;} .prodimg img{ margin-top:-24.5%;}*/ .prodname h3{ margin-bottom:4%;} } /*-- //首页产品--*/ /*-- 首页新闻 --*/ .indnews{ width:100%; height:auto; overflow:hidden; text-align:left; margin-bottom:60px; position:relative;} .indnews .left{ float:left; width:57%; height:auto; position:relative;} .newstop{ width:80%; height:50%; padding:0 10%; background-color:#908CD1; position:relative;} .newstop a{ display:inline-block; font-size:14px; line-height:24px; color:#FFF;} .newstop a.tit{ padding-top:7%; font-size:30px; line-height:44px; color:#FFF;} .newstop a.sign{ display:inline-block; position:absolute; right:8%; bottom:12.4%; width:40px; height:40px; border:1px solid #FFF; border-radius:20px; -webkit-transition:all 0.5s; transition:all 0.5s;} .newstop a.sign::after{ content:""; display:inline-block; position:absolute; left:1px; top:1px; width:40px; height:40px; background:url(../images/imgsign/bg_sign03.png) no-repeat center;} .newstop a.sign:hover{ -webkit-transform:translateX(10px); -ms-transform:translateX(10px); transform:translateX(10px);} .newstop a:hover{ color:#333;} .newstop p{ margin-bottom:2.5%; font-size:16px; line-height:30px; color:rgba(255, 255, 255, 0.6); font-family:Century Gothic, Arial;} .indvideo{ width:100%; height:0; padding-bottom:35%; position:relative; overflow:hidden;} .indvideo1{ background-color:#908CD1;} .indvideo2{ background-color:#E2534D;} .indvideo a{ display:block; width:100%; height:100%;} .indvideo img{ width:100%; filter:alpha(opacity=40); opacity: 0.4;} .indvideo img{ width:100%; min-width:100%; min-height:100%; object-fit:cover; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.8s linear; -moz-transition: all 0.8s linear; -ms-transition: all 0.8s linear; -o-transition: all 0.8s linear; transition: all 0.8s linear;} .indvideo:hover img{ opacity:0.6; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);} .indvideo span{ display:block; width:84px; height:84px; background:url(../images/imgsign/btnplay01.png) center no-repeat; position:absolute; top:50%; left:50%; margin-top:-42px; margin-left:-42px; z-index:2;} .indvideo:hover span{ background-image:url(../images/imgsign/btnplay01_h.png); transition:all 0.5s; filter:alpha(opacity=40); opacity: 0.4;} .indnews .right{ float:right; width:43%; position:relative; overflow:hidden;} .newsone{ width:100%; height:0; padding-bottom:30.94%; position:relative;} .newsone1{ background-color:#FAFAFA;} .newsone2{ background-color:#F2F2F2;} .newsone3{ background-color:#FAFAFA;} .indnews-txt{ float:left; width:56.66%; padding:0% 5% 0 5%;} .newsone1 .indnews-txt{ background-color:#FAFAFA;} .newsone2 .indnews-txt{ background-color:#F2F2F2;} .newsone3 .indnews-txt{ background-color:#FAFAFA;} .newsone1 .indnews-img{ background-color:#86C3DF;} .newsone2 .indnews-img{ background-color:#FCC509;} .newsone3 .indnews-img{ background-color:#232323;} .indnews-txt a{ font-size:14px; color:#666;} .indnews-txt a.tit{ font-size:18px; color:#333; display:inline-block; padding-top:5%;} .indnews-txt a:hover{ color:#8EC31E;} .indnews-txt p{ font-size:14px; color:#FFF; line-height:30px; color:rgba(255, 255, 255, 0.6); font-family:Century Gothic, Arial;} .indnews-txt span{ display:block; width:30px; height:2px; background-color:#6D6D6D; margin:4% 0 4%;} .indnews-img{ float:right; width:33.3333%; height:0; padding-bottom:30.94%; overflow:hidden; position:relative; background-position:center center; background-repeat:no-repeat; background-size:cover;} .indnews-img img{ width:100%; height:100%; filter:alpha(opacity=40); opacity:0.4; position:relative; z-index:1; object-fit:cover;} .indnews-img span{ display:block; width:40%; border:3px solid #FFF; text-align:center; font-family:Arial, Tahoma, Helvetica, sans-serif; position:absolute; top:50%; left:50%; margin-top:-53px; margin-left:-20%; z-index:2;} .indnews-img span h3{ font-weight:normal; font-size:60px; line-height:60px; color:#FFF; padding-top:10px;} .indnews-img span p{ font-size:20px; line-height:24px; color:#FFF; padding-bottom:10px;} .indnews-img .indnews-mask{ display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; filter:alpha(opacity=40); opacity:0.4;} .newsone1 .indnews-img .indnews-mask{ background-color:#86C3DF;} .newsone2 .indnews-img .indnews-mask{ background-color:#FCC509;} .newsone3 .indnews-img .indnews-mask{ background-color:#232323;} /*@media screen and (max-width:1600px) { .newstop{ width:80%; padding:8% 10% 32%;} .indvideo{ padding-bottom:40%;} .newsone{ padding-bottom:35.4%;} .indnews-img{ padding-bottom:35.4%;} } @media screen and (max-width:1440px) { .indnews .left{ width:50%;} .newstop{ width:80%; padding:10% 10% 66%;} .indvideo{ padding-bottom:38%;} .indnews .right{ width:50%;} .newsone{ padding-bottom:38%;} .indnews-img{ padding-bottom:38%;} } @media screen and (max-width:1280px) { .newstop{ width:80%; padding:10% 10% 70%;} .indvideo{ padding-bottom:40%;} .newsone{ padding-bottom:40%;} .indnews-txt{ width:52%; padding:5% 5% 0 5%;} .indnews-img{ width:38%; padding-bottom:40%;} } @media screen and (max-width:1100px) { .newstop{ width:80%; padding:10% 10% 82%;} .indvideo{ padding-bottom:46%;} .newsone{ padding-bottom:46%;} .indnews-txt{ width:52%; padding:5% 5% 0 5%;} .indnews-img{ width:38%; padding-bottom:46%;} } @media screen and (max-width:1020px) { .newstop{ width:80%; padding:10% 10% 90%;} .indvideo{ padding-bottom:50%;} .newsone{ padding-bottom:50%;} .indnews-txt{ width:43%; padding:5% 5% 0 5%;} .indnews-txt a{ display:none;} .indnews-txt a.tit{ display:block;} .indnews-img{ width:47%; padding-bottom:50%;} }*/ @media screen and (max-width:1440px) { .indnews .left{ width:50%;} .indnews .right{ width:50%;} .indvideo{ padding-bottom:46.5%;} } @media screen and (max-width:1280px) { .indvideo{ padding-bottom:50%;} .indnews-img{ padding-bottom:33.3333%;} } @media screen and (max-width:1100px) { .indnews-txt{ width:90%;} .indnews-img{ display:none;} } @media screen and (max-width:1020px) { /*.indnews-txt a{ display:none;} .indnews-txt a.tit{ display:block;} .indnews-txt{ width:40%; padding:5% 5% 0 5%;} .indnews-img{ width:50%;}*/ } @media screen and (max-width:980px) { .indnews .left{ width:100%;} .indnews .right{ float:left; width:100%;} .indvideo{ float:left; width:50%; padding-bottom:28%;} .newsone{ height:auto; padding-bottom:5%;} .newsone:after{ content:''; display:block; clear:both; height:0; font-size:0; overflow:hidden; visibility:hidden;} } @media screen and (max-width:480px) { .indvideo{ width:100%; padding-bottom:56%;} } /*-- //首页新闻 --*/ /************************************************** 内页 **************************************************/ /********** 内页公用 **********/ .main{ width:100%; background-color:#FFF; margin-bottom:60px;} .container{ width:1280px; margin:0 auto; clear:both; position:relative;} @media screen and (max-width:1440px) { .container{ width:1280px;} } @media screen and (max-width:1320px) { .container{ width:1180px;} } @media screen and (max-width:1280px) { .container{ width:1000px;} } @media screen and (max-width:1100px) { .container{ width:960px;} } @media screen and (max-width:980px) { .main{ margin-bottom:108px;} .container{ width:90%; margin-left:5%; margin-right:5%;} } @media screen and (max-width:640px) { .main{ margin-bottom:60px;} } .inner-mt{ width:100%; height:60px;} /********** 内页其他公用 **********/ .do-more{ display:none; width:100%; text-align:center; margin:24px auto;} .do-more a{ display:block; width:40%; height:44px; margin:0 auto; background-color:#8EC31E; border-radius:10px; font-size:1.25em; line-height:44px; color:#FFF;} .do-more:hover a{ text-decoration:underline;} .to-close{ width:100%; height:36px; margin:0px 20px 30px 0; line-height:36px; color:#8EC31E; text-align:right;} .to-close a{ padding:0 4px; color:#8EC31E;} .to-close:hover a{ color:#8EC31E; text-decoration:underline;} .go-back{ width:100%; height:36px; margin:0px 20px 30px 0; line-height:36px; color:#666; text-align:right;} .go-back a{ padding:0 4px; color:#8EC31E;} .go-back:hover a{ color:#8EC31E; text-decoration:underline;} .go-jump{ position:relative; padding-top:0px;} .go-jump div{ line-height:42px; margin-top:10px; padding-left:20px; background:#F5F5F5; font-size:14px; color:#333;} /*-- 内页banner --*/ /*.banner-inside{ width:100%; height:300px; background-color:#000; overflow:hidden; text-align:center;} .banner-ab{ background:url(../images/banner/banner_ab.jpg) top center no-repeat;} .banner-news{ background:url(../images/banner/banner_news.jpg) top center no-repeat;} .banner-prod{ background:url(../images/banner/banner_prod.jpg) top center no-repeat;} .banner-case{ background:url(../images/banner/banner_case.jpg) top center no-repeat;} .banner-brand{ background:url(../images/banner/banner_brand.jpg) top center no-repeat;} .banner-ctc{ background:url(../images/banner/banner_ctc.jpg) top center no-repeat;} .banner-inside-phone{ position:relative; width:100%; overflow:hidden; text-align:center; vertical-align:middle; display:none;} .banner-inside-phone img{ width:100%;} @media screen and (max-width:980px) { .banner-inside{ display:none;} .banner-inside-phone{ display:block;} }*/ /*内页*/ .inner_banner{ position:relative; text-align:center; color:#fff; overflow:hidden;} .inner_banner .bannerpic{ display:block;} .inner_banner .bannerpic-s{ display:none;} .inner_banner img{ width:100%; display:block; -webkit-transform:scale(1.08); -moz-transform:scale(1.08); -o-transform:scale(1.08); -ms-transform:scale(1.08); transform:scale(1.08); transition:all 5s ease-out; -webkit-transition:all 5s ease-out; -o-transition:all 5s ease-out; -moz-transition:all 5s ease-out; -ms-transition:all 5s ease-out;} .inner_banner .txt{ position:absolute; top:0; left:0; width:100%; height:100%;} .inner_banner .tb{ display:table; height:100%; width:100%;} .inner_banner .tb_c{ display:table-cell; vertical-align:middle;} .inner_banner h3{ font-size:3em; line-height:1.6; font-weight:normal;} .inner_banner p{ font-size:1.5em; text-transform:uppercase;} .inner_banner img.animated{ -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); transform:scale(1);} @media screen and (max-width:1280px) { .inner_banner h3{ font-size:3em;} .inner_banner p{ font-size:1.5em;} } @media screen and (max-width:1200px) { .inner_banner h3{ font-size:2em;} .inner_banner p{ font-size:1.5em;} } @media screen and (max-width:980px) { .inner_banner .bannerpic{ display:none;} .inner_banner .bannerpic-s{ display:block;} } @media screen and (max-width:768px) { } @media screen and (max-width:640px) { .inner_banner h3{ font-size:2em;} .inner_banner p{ font-size:1.5em;} } @media screen and (max-width:640px) { .inner_banner h3{ font-size:1.5em;} .inner_banner p{ font-size:1em;} } /*-- //内页banner --*/ /********** 365wm完美体育官网app **********/ /***** 关于苏达山 *****/ .abbox{ width:100%; padding-bottom:0; background-color:#FFF; overflow:hidden;} .abimg{ float:right; width:50%; height:0; padding-bottom:40%;} .abimg img{ width:100%;} .abimg2{ display:none;} .abtxtbox{ float:left; width:50%; height:0; padding-bottom:40%; position:relative;} .abtit{ padding:9% 0 7% 20%;} .abtit h3{ font-size:1.875em; font-weight:normal; line-height:1.5; color:#333; text-transform:uppercase;} .abtit h3{ color:#298FAD; background-image:-webkit-linear-gradient(left, #298FAD, #79A864); background-image:-moz-linear-gradient(left, #298FAD, #79A864); background-image:-0-linear-gradient(left, #298FAD, #79A864); background-image:linear-gradient(left, #298FAD, #79A864); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .abtit p{ font-size:1.25em; line-height:1.3; color:#999;} .abtxt{ padding:0 5% 0 20%;} .abtxt p{ font-size:0.875em; line-height:2.6; color:#333; margin-bottom:4%;} .abtxt p strong{ font-weight:bold; color:#8EC31E;} .abtxtbox2{display:none;} .abtxtbox3{ display:none;} @media screen and (max-width:1680px) { .abtit{ padding:5% 0 3% 6%;} .abtxt{ padding-left:6%;} .abtxt p{ line-height:2.4;} } @media screen and (max-width:1440px) { .abtit{ padding:4% 0 2% 6%;} .abtxt{ padding-left:6%;} .abtxt p{ line-height:1.8;} } @media screen and (max-width:1280px) { .abtxtbox{ width:60%; height:0; padding-bottom:54%;} .abimg{ width:40%; padding-bottom:32%; padding-top:11%;} .abtit{ padding:5% 0 3% 6%;} .abtxt{ padding-left:6%;} .abtxt p{ line-height:2.2;} } @media screen and (max-width:1100px) { .abtxtbox{ width:65%; height:0; padding-bottom:60%;} .abimg{ width:35%; padding-bottom:30%; padding-top:15%;} .abtit{ padding:5% 0 3% 6%;} .abtxt{ padding-left:6%;} .abtxt{ padding-right:4%;} .abtxt p{ line-height:2;} } @media screen and (max-width:980px) { .abimg1{ display:none;} .abimg2{ display:block;} .abimg{ float:left; width:100%; padding-bottom:80%; padding-top:0%;} .abtxtbox1{ display:none;} .abtxtbox2{ display:block;} .abtxtbox{ width:100%; height:auto; padding:8% 0 6%;} .abtit{ padding:0 0 4% 0; text-align:center;} .abtxt{ width:90%; padding:0 5%; text-align:center;} } @media screen and (max-width:640px) { .abtxtbox2{ display:none;} .abtxtbox3{ display:block;} .abtxtbox{ width:90%; padding-left:5%; padding-right:5%;} .abtit h3{ font-size:1.5em;} .abtit p{ font-size:1em;} .abtxt{ width:100%; padding:0%;} .abtxt p{ text-indent:2em; text-align:left; margin-bottom:3%;} } @media screen and (max-width:480px) { .abtxtbox{ padding-top:8%; padding-bottom:4%;} } /***** 厂房环境 *****/ .envbox{ width:100%; height:600px; background-size:cover; background-position:center; background-attachment:fixed; background-image:url(../images/imginside/envbg.jpg); position:relative; /*padding:140px 0 136px 0;*/ overflow:hidden;} /*.envbox:after,.envbox:before{content: "";position: absolute;top: 0;width: 1px;height: 100%;background: #fff;opacity: 0.1;} .envbox:before{left: 35.42%;} .envbox:after{left: 64.79%;}*/ .env-container{ width:100%; height:auto !important; padding-bottom:60px;} .env-container .swiper-wrapper{ height:auto !important;} .env-container .swiper-pagination{ bottom:0;} .env-slide{ height:auto; text-align:center; background:#FFF; /* Center slide text vertically */ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; position:relative;} .env-slide a{ display:block; width:100%; height:auto;} .envimg{ width:100%; height:0; padding-bottom:58%; position:relative; overflow:hidden; background-color:#000;} .envimg img{ width:100%;} .envname{ width:100%; height:60px; text-align:center;} .envname h3{ font-weight:normal; font-size:1em; line-height:60px; color:#333; text-align:center;} @media screen and (max-width:1440px) { .envbox{ height:500px;} } @media screen and (max-width:980px) { .envbox{ background-attachment:scroll; /*padding:10% 0 10% 0;*/ width:100%; height:0; padding-bottom:56%;} } @media screen and (max-width:480px) { /*.envbox{ padding:12% 0 12% 0;}*/ } /***** 技术服务 *****/ .techservbox{ width:100%; background-color:#E9EAEE; padding-top:60px; padding-bottom:40px;} @media screen and (max-width:480px) { .techservbox{ padding-top:40px; padding-bottom:20px;} } /*.abitem{ width:92%; padding:30px 4%; background-color:#FFF; margin-bottom:20px;} .abitem h3{ display:inline-block; font-size:1.25em; font-weight:normal; line-height:1.5;} .abitem p{ font-size:0.875em; line-height:1.5; color:#999;}*/ .abitem1 h3{ color:#4B377B; background-image:-webkit-linear-gradient(left, #4B377B, #AF467A); background-image:-moz-linear-gradient(left, #4B377B, #AF467A); background-image:-0-linear-gradient(left, #4B377B, #AF467A); background-image:linear-gradient(left, #4B377B, #AF467A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .abitem2 h3{ color:#45959C; background-image:-webkit-linear-gradient(left, #45959C, #94B52D); background-image:-moz-linear-gradient(left, #45959C, #94B52D); background-image:-0-linear-gradient(left, #45959C, #94B52D); background-image:linear-gradient(left, #45959C, #94B52D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .abitem3 h3{ color:#025B8C; background-image:-webkit-linear-gradient(left, #025B8C, #0B7BA4); background-image:-moz-linear-gradient(left, #025B8C, #0B7BA4); background-image:-0-linear-gradient(left, #025B8C, #0B7BA4); background-image:linear-gradient(left, #025B8C, #0B7BA4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .abitem4 h3{ color:#63387C; background-image:-webkit-linear-gradient(left, #63387C, #B9427D); background-image:-moz-linear-gradient(left, #63387C, #B9427D); background-image:-0-linear-gradient(left, #63387C, #B9427D); background-image:linear-gradient(left, #63387C, #B9427D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .abitem5 h3{ color:#7D331F; background-image:-webkit-linear-gradient(left, #7D331F, #AC3523); background-image:-moz-linear-gradient(left, #7D331F, #AC3523); background-image:-0-linear-gradient(left, #7D331F, #AC3523); background-image:linear-gradient(left, #7D331F, #AC3523); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .abitem6 h3{ color:#B03523; background-image:-webkit-linear-gradient(left, #B03523, #BD7E18); background-image:-moz-linear-gradient(left, #B03523, #BD7E18); background-image:-0-linear-gradient(left, #B03523, #BD7E18); background-image:linear-gradient(left, #B03523, #BD7E18); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .abitem7 h3{ color:#158DB2; background-image:-webkit-linear-gradient(left, #158DB2, #8BB143); background-image:-moz-linear-gradient(left, #158DB2, #8BB143); background-image:-0-linear-gradient(left, #158DB2, #8BB143); background-image:linear-gradient(left, #158DB2, #8BB143); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /***** 品牌故事 共享未来 品质服务 匠心智造 技术检测 色彩与技术 造就梦想 *****/ .abitem{ width:100%;} .abitem a::after{ content:""; clear:both; display:block;} /*图片当背景*/ .abitem-img{ width:66%; height:400px; overflow:hidden; position:relative; background-color:#8EC31E;} .abitem-img .img{ -webkit-transition: all 0.6s 0s ease; transition: all 0.6s 0s ease; background-position:center; background-size:cover; opacity:1; visibility:visible; width:100%; height:100%;} .abitem:hover .abitem-img .img{ -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); opacity:1;} /*图片不当背景.abitem-img{ width:50%; height:0; padding-bottom:28%; overflow:hidden; position:relative;} .abitem-img img{ width:100%; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.6s linear; -moz-transition: all 0.6s linear; -ms-transition: all 0.6s linear; -o-transition: all 0.6s linear; transition: all 0.6s linear;} .abitem:hover .abitem-img img{ -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05);} */ .abitem .abitem-img img{ width:100%; opacity:0;} .abitem-txt{ width:34%; height:400px; background-color:#FFF; text-align:center; position:relative;} .abitem1 .abitem-img{ float:left;} .abitem1 .abitem-txt{ float:right;} .abitem2 .abitem-img{ float:right;} .abitem2 .abitem-txt{ float:left;} .abitem3 .abitem-img{ float:left;} .abitem3 .abitem-txt{ float:right;} .abitem4 .abitem-img{ float:right;} .abitem4 .abitem-txt{ float:left;} .abitem5 .abitem-img{ float:left;} .abitem5 .abitem-txt{ float:right;} .abitem6 .abitem-img{ float:right;} .abitem6 .abitem-txt{ float:left;} .abitem7 .abitem-img{ float:left;} .abitem7 .abitem-txt{ float:right;} .abitem:hover .abitem-txt{ transition:all 0.5s;} .abitem1:hover .abitem-txt{ background-color:#16C1F3;} .abitem2:hover .abitem-txt{ background-color:#F36F42;} .abitem3:hover .abitem-txt{ background-color:#AF467A;} .abitem4:hover .abitem-txt{ background-color:#8DC63E;} .abitem5:hover .abitem-txt{ background-color:#F6EE30;} .abitem6:hover .abitem-txt{ background-color:#2B8F8E;} .abitem7:hover .abitem-txt{ background-color:#FCB040;} .abitem-txt span{ display:block; width:80px; height:80px; border-radius:50%; background-color:#21AB38; font-size:36px; font-family:'PlumbC_Bold'; color:#EEF1EB; line-height:80px; margin:100px auto 0; display:none;} /*.abitem-txt h3{ display:block; font-size:36px; line-height:48px; margin:40px 0; padding:0;} */ .abitem h3{ display:inline-block; font-size:2.25em; font-weight:normal; line-height:1.5; margin:100px 0 40px;} .abitem p{ font-size:0.875em; line-height:1.5; color:#999; padding:0 10%; text-align:left;} .abitem:hover p{ color:#DDD;} .abitem5:hover p{ color:#333;} @media(max-width:1920px) { .abitem h3{ margin-top:80px;} } @media(max-width:980px) { .abitem-img{ width:100%; height:auto;} .abitem .abitem-img .img{ background:none; display:none;} .abitem:hover .abitem-img .img{ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity:0;} .abitem .abitem-img img{ opacity:1;} .abitem-txt{ width:100%; height:auto; padding-top:30px; padding-bottom:40px;} .abitem h3{ font-size:1.875em; margin:0 0 10px;} .abitem:hover .abitem-txt{ background:#FFF !important;} .abitem:hover p{ color:#999;} } /***** 营销模式 *****/ .networkbox{ width:100%; background-size:cover; background-position:center; background-attachment:fixed; background-image:url(../images/imginside/netbg.jpg); position:relative; padding:100px 0 100px; overflow:hidden; display:none;} .network{ width:100%; padding:4% 0;} .netmapbox{ float:left; width:46%; position:relative;} .netmap{ float:left; width:100%; position:relative; z-index:1;} .netmap img{ width:100%; height:auto;} .nettxtbox{ float:right; width:46%; position:relative; z-index:2;} .netintro{ margin-top:10%;} .netintro h3{ font-weight:normal; font-size:2.375em; line-height:1; color:#FFF; margin-bottom:70px;} .netintro p{ display:block; padding-bottom:70px; margin-bottom:40px; border-bottom:1px solid #FFF; font-size:1.125em; line-height:2; color:#FFF;} .nettxtbox-phone{ width:100%; text-align:center; font-size:1.125em; line-height:2; color:#FFF; display:none;} .peopleinfo{ font-size:1.125em; line-height:1.8; color:#FFF;} .peopleinfo span{ white-space:normal;} @media screen and (max-width:980px) { .networkbox{ padding:60px 0;} .netmapbox{ width:100%; margin-bottom:40px;} .nettxtbox{ float:left; width:100%; display:none;} .netintro h3{ font-size:2em; margin-bottom:40px;} .netintro p{ padding-bottom:40px; margin-bottom:40px;} .nettxtbox-phone{ display:block;} .addpin{ display:none;} } @media screen and (max-width:640px) { .networkbox{ padding:40px 0;} .netmapbox{ margin-bottom:30px;} .netintro h3{ font-size:1.875em; margin-bottom:30px;} .netintro p{ padding-bottom:30px; margin-bottom:30px;} } @media screen and (max-width:375px) { .nettxtbox-phone{ font-size:1em;} } .addpin{ width:100%;} .addpin i{ display:block; width:14px; height:18px; background-image:url(../images/imgsign/pin.png); background-repeat:no-repeat; position:absolute; z-index:2;} .addpin i.active{ background-image:url(../images/imgsign/pin2.png);;} .addpin i.jing{ top:34%; left:73.5%;} .addpin i.hu{ top:62%; left:85%;} .addpin i.zhe{ top:66%; left:85%;} .addpin i.yue{ top:82%; left:71%;} .addpin i.chuan{ top:62%; left:48%;} /***** 营销模式2 *****/ .networkbox2{ width:100%; background-size:cover; background-position:center; background-attachment:fixed; background-image:url(../images/imginside/netbg.jpg); position:relative; padding:60px 0; overflow:hidden;} .network2{ width:100%; padding:2% 0;} .netmapbox2{ float:left; width:56%; position:relative;} .netmap2{ float:left; width:100%; position:relative; z-index:1;} .netmap2 img{ width:100%; height:auto;} .nettxtbox2{ float:right; width:36%; position:relative; z-index:2;} .netintro2{ margin-top:5%;} .netintro2 h3{ font-weight:normal; font-size:2.375em; line-height:1; color:#FFF; margin-bottom:60px;} .netintro2 p{ display:block; padding-bottom:70px; margin-bottom:40px; border-bottom:1px solid #FFF; font-size:1.125em; line-height:2; color:#FFF;} .nettxtbox2-phone{ width:100%; text-align:center; font-size:1.125em; line-height:2; color:#FFF; display:none;} .peopleinfo2{ font-size:1.125em; line-height:1.8; color:#FFF;} .peopleinfo2 span{ white-space:normal;} @media screen and (max-width:1280px) { .networkbox2{ padding:40px 0;} .netintro2 h3{ font-size:2em; margin-bottom:40px;} .netintro2 p{ padding-bottom:40px; margin-bottom:40px;} } @media screen and (max-width:1100px) { .netintro2 h3{ font-size:2em; margin-bottom:30px;} .netintro2 p{ padding-bottom:30px; margin-bottom:30px;} } @media screen and (max-width:980px) { .networkbox2{ padding:40px 0;} .netmapbox2{ width:100%; margin-bottom:40px;} .nettxtbox2{ float:left; width:100%; display:none;} .netintro2 h3{ font-size:2em; margin-bottom:40px;} .netintro2 p{ padding-bottom:40px; margin-bottom:40px;} .nettxtbox2-phone{ display:block;} } @media screen and (max-width:640px) { .networkbox2{ padding:40px 0;} .netmapbox2{ margin-bottom:30px;} .netintro2 h3{ font-size:1.875em; margin-bottom:30px;} .netintro2 p{ padding-bottom:30px; margin-bottom:30px;} } @media screen and (max-width:375px) { .nettxtbox2-phone{ font-size:1em;} } /********** 产品展览 **********/ /***** 产品总页面 *****/ .pdbox{ width:100%; height:auto; position:relative;} .pd1box{ background:#ED6D35 url(../images/imginside/pd1boxbg.png) left bottom no-repeat; padding-top:100px; padding-bottom:60px;} .pd2box{ background:#F8B62C url(../images/imginside/pd2boxbg.png) 53vw bottom no-repeat; padding-top:0px; padding-bottom:40px;} .pd3box{ background:#F7EE13 url(../images/imginside/pd3boxbg.png) 6vw bottom no-repeat; padding-top:0px; padding-bottom:160px;} .pd4box{ background:#90C31F url(../images/imginside/pd4boxbg.png) 53vw bottom no-repeat; padding-top:0px; padding-bottom:40px;} .pd5box{ background:#23AC39 url(../images/imginside/pd5boxbg.png) left bottom no-repeat; padding-top:0px; padding-bottom:80px;} .pd6box{ background:#006935 url(../images/imginside/pd6boxbg.png) 53vw bottom no-repeat; padding-top:0px; padding-bottom:4px;} .pd7box{ background:#29A7E1 url(../images/imginside/pd7boxbg.png) left bottom no-repeat; padding-top:0px; padding-bottom:60px;} .pd8box{ background:#AF467A url(../images/imginside/pd8boxbg.png) 53vw bottom no-repeat; padding-top:20px; padding-bottom:40px;} .pd9box{ background:#908CD1 url(../images/imginside/pd9boxbg.png) left bottom no-repeat; padding-top:0px; padding-bottom:80px;} @media screen and (min-width:1921px) { .pd1box{ padding-top:100px; padding-bottom:60px;} .pd2box{ padding-top:0px; padding-bottom:100px;} .pd3box{ padding-top:0px; padding-bottom:200px;} .pd4box{ padding-top:0px; padding-bottom:60px;} .pd5box{ padding-top:0px; padding-bottom:120px;} .pd6box{ padding-top:0px; padding-bottom:40px;} .pd7box{ padding-top:0px; padding-bottom:80px;} .pd8box{ padding-top:20px; padding-bottom:80px;} .pd9box{ padding-top:0px; padding-bottom:80px;} .pd10box{ padding-top:20px; padding-bottom:80px;} } .pd1, .pd2, .pd3, .pd4, .pd5, .pd6, .pd7, .pd8, .pd9, .pd10{ position:relative; z-index:2;} .pd1box .pdbg, .pd3box .pdbg, .pd5box .pdbg, .pd7box .pdbg, .pd9box .pdbg{ content: " "; position: absolute; width: 100%; height: 250px; bottom: 0; left: 0; z-index: 1 } .pd2box .pdbg, .pd4box .pdbg, .pd6box .pdbg, .pd8box .pdbg, .pd10box .pdbg{ content: " "; position: absolute; width: 100%; height: 250px; bottom: 0; right: 0; z-index: 1 } .pd1box .pdbg{ background:url(../images/imginside/pd2bg.svg) 0 0 no-repeat; background-size:cover;} .pd2box .pdbg{ background:url(../images/imginside/pd3bg2.svg) 0 0 no-repeat; background-size:cover;} .pd3box .pdbg{ background:url(../images/imginside/pd4bg.svg) 0 0 no-repeat; background-size:cover;} .pd4box .pdbg{ background:url(../images/imginside/pd5bg2.svg) 0 0 no-repeat; background-size:cover;} .pd5box .pdbg{ background:url(../images/imginside/pd6bg.svg) 0 0 no-repeat; background-size:cover;} .pd6box .pdbg{ background:url(../images/imginside/pd7bg2.svg) 0 0 no-repeat; background-size:cover;} .pd7box .pdbg{ background:url(../images/imginside/pd8bg.svg) 0 0 no-repeat; background-size:cover;} .pd8box .pdbg{ background:url(../images/imginside/pd9bg2.svg) 0 0 no-repeat; background-size:cover;} @media screen and (min-width:1921px) { .pd1box .pdbg, .pd2box .pdbg, .pd3box .pdbg, .pd4box .pdbg, .pd5box .pdbg, .pd6box .pdbg, .pd7box .pdbg, .pd8box .pdbg, .pd9box .pdbg, .pd10box .pdbg{ height: 350px; } } .pd1 .pdtxtbox{ float:right; width:60%;} .pd2 .pdtxtbox{ float:left; width:60%;} .pd3 .pdtxtbox{ float:right; width:60%;} .pd4 .pdtxtbox{ float:left; width:60%;} .pd5 .pdtxtbox{ float:right; width:60%;} .pd6 .pdtxtbox{ float:left; width:60%;} .pd7 .pdtxtbox{ float:right; width:60%;} .pd8 .pdtxtbox{ float:left; width:60%;} .pd9 .pdtxtbox{ float:right; width:60%;} .pd10 .pdtxtbox{ float:left; width:60%;} .pdimg{ position:relative; text-align:center;} .pdimg img{ max-width:100%; margin:0 auto;} .pd1 .pdimg{ float:left; width:37%;} .pd2 .pdimg{ float:right; width:37%;} .pd3 .pdimg{ float:left; width:37%;} .pd4 .pdimg{ float:right; width:37%;} .pd5 .pdimg{ float:left; width:37%;} .pd6 .pdimg{ float:right; width:37%;} .pd7 .pdimg{ float:left; width:37%;} .pd8 .pdimg{ float:right; width:37%;} .pd9 .pdimg{ float:left; width:37%;} .pd10 .pdimg{ float:right; width:37%;} .pdtxtbox .pdtitle{ font-size:3.75em; line-height:1; color:#FFF; padding-bottom:35px;} .pdtxtbox .pdintro{ font-size:0.875em; line-height:2; color:#EEE; padding-bottom:25px;} .pd3 .pdtxtbox .pdtitle{ color:#666;} .pd3 .pdtxtbox .pdintro{ color:#888;} .pdintro, .pdtitle, .pdimg, .pdtxtbox:before { -webkit-transition: All .5s linear; -moz-transition: All .5s linear; -o-transition: All .5s linear; transition: All .5s linear } @media screen and (max-width:1280px) { .pd1box{ padding-bottom:100px;} .pd2box{ padding-bottom:200px;} .pd3box{ padding-bottom:140px;} .pd4box{ padding-bottom:160px;} .pd5box{ padding-bottom:150px;} .pd6box{ padding-bottom:140px;} .pd7box{ padding-bottom:120px;} .pd8box{ padding-bottom:160px;} .pd9box{ padding-bottom:80px;} } @media screen and (max-width:980px) { .pd1box, .pd2box, .pd3box, .pd4box, .pd5box, .pd6box, .pd7box, .pd8box{ background-position:center bottom;} .pd1box{ padding-top:60px; padding-bottom:20px;} .pd2box{ padding-top:40px; padding-bottom:60px;} .pd3box{ padding-top:20px; padding-bottom:20px;} .pd4box{ padding-top:40px; padding-bottom:40px;} .pd5box{ padding-top:0px; padding-bottom:20px;} .pd6box{ padding-top:40px; padding-bottom:40px;} .pd7box{ padding-top:20px; padding-bottom:40px;} .pd8box{ padding-top:40px; padding-bottom:40px;} .pd9box{ padding-top:40px; padding-bottom:80px;} .pdimg, .pdtxtbox{ float:left !important; width:100% !important;} .pdimg img{ max-width:80%;} .pdtxtbox{ margin-bottom:30px;} .pdtxtbox .pdtitle{ font-size:3em;} } @media screen and (max-width:480px) { .pd1box{ padding-top:40px; padding-bottom:20px;} .pd2box{ padding-top:20px; padding-bottom:60px;} .pd3box{ padding-top:0px; padding-bottom:20px;} .pd4box{ padding-top:20px; padding-bottom:40px;} .pd5box{ padding-top:0px; padding-bottom:20px;} .pd6box{ padding-top:40px; padding-bottom:60px;} .pd7box{ padding-top:4px; padding-bottom:40px;} .pd8box{ padding-top:40px; padding-bottom:40px;} .pd9box{ padding-top:40px; padding-bottom:80px;} .pdimg img{ max-width:100%;} .pdtxtbox .pdtitle{ font-size:2.25em; padding-bottom:20px;} .pdtxtbox .pdintro{ line-height:1.6;} } /*-- btn-more --*/ .btn-more { background-color: #8EC31E; font-size: 1rem; color: #fff; text-align: center; display: inline-block; padding: 17px 25px 16px 30px; height: 50px; position: relative; line-height: 100% } .btn-more:after { position: absolute; top: 0; right: -20px; content: " "; width: 0; height: 0; border-top: 50px solid #8EC31E; border-right: 20px solid transparent; -webkit-transition: border-color .3s; transition: border-color .3s } .pd4 .btn-more{ background-color:#23AC39;} .pd4 .btn-more:after { position: absolute; top: 0; right: -20px; content: " "; width: 0; height: 0; border-top: 50px solid #23AC39; border-right: 20px solid transparent; -webkit-transition: border-color .3s; transition: border-color .3s } .btn-more.btn-moreW { background-color: #fff; color: #FFF } .btn-more.btn-moreW:after { border-top: 50px solid #fff; border-right: 20px solid transparent } .btn-primary { background-color: #aaa; font-size:.8125rem; color: #fff; text-align: center } .btn-more { padding: 2px 2em 0 2em; -webkit-transition: background-color .3s; transition: background-color .3s } .btn-more>span { display: inline-block; padding: 1em 0 } .btn-more:hover { background-color: #FFF } .btn-more:hover:after { border-top: 50px solid #FFF } .btn-moreW:hover { background-color: #156c57 } .btn-moreW:hover:after { border-top: 50px solid #156c57 } .btn-more:hover>span:nth-child(odd) { -webkit-animation: anim-nanuk-1 .5s forwards; animation: anim-nanuk-1 .5s forwards } .btn-more:hover>span:nth-child(even) { -webkit-animation: anim-nanuk-2 .5s forwards; animation: anim-nanuk-2 .5s forwards } .btn-more:hover>span:nth-child(even), .btn-more:hover>span:nth-child(odd) { -webkit-animation-timing-function: cubic-bezier(.75, 0, .125, 1); transition-animation-function: cubic-bezier(.75, 0, .125, 1) } a.btn-more{ color:#FFF;} a.btn-more:hover{ color:#8EC31E;} @-webkit-keyframes anim-nanuk-1 { 0%, 100% { opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 49% { opacity:1; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0) } 50% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0); color:inherit } 51% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0); color:#fff } 100% { color:#fff } } @keyframes anim-nanuk-1 { 0%, 100% { opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 49% { opacity:1; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0) } 50% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0); color:inherit } 51% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0); color:#fff } 100% { color:#fff } } @-webkit-keyframes anim-nanuk-2 { 0%, 100% { opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 49% { opacity:1; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0) } 50% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0); color:inherit } 51% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0); color:#fff } 100% { color:#fff } } @keyframes anim-nanuk-2 { 0%, 100% { opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 49% { opacity:1; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0) } 50% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0); color:inherit } 51% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0); color:#fff } 100% { color:#fff } } .btn-more:hover>span:nth-child(1), .btn-more:hover>span:nth-child(12) { -webkit-animation-delay: 0s; animation-delay: 0s } .btn-more:hover>span:nth-child(13), .btn-more:hover>span:nth-child(2) { -webkit-animation-delay: 50ms; animation-delay: 50ms } .btn-more:hover>span:nth-child(14), .btn-more:hover>span:nth-child(3) { -webkit-animation-delay: .1s; animation-delay: .1s } .btn-more:hover>span:nth-child(15), .btn-more:hover>span:nth-child(4) { -webkit-animation-delay: .15s; animation-delay: .15s } .btn-more:hover>span:nth-child(16), .btn-more:hover>span:nth-child(5) { -webkit-animation-delay: .2s; animation-delay: .2s } .btn-more:hover>span:nth-child(17), .btn-more:hover>span:nth-child(6) { -webkit-animation-delay: .25s; animation-delay: .25s } .btn-more:hover>span:nth-child(18), .btn-more:hover>span:nth-child(7) { -webkit-animation-delay: .3s; animation-delay: .3s } .btn-more:hover>span:nth-child(19), .btn-more:hover>span:nth-child(8) { -webkit-animation-delay: .35s; animation-delay: .35s } .btn-more:hover>span:nth-child(20), .btn-more:hover>span:nth-child(9) { -webkit-animation-delay: .4s; animation-delay: .4s } .btn-more:hover>span:nth-child(10), .btn-more:hover>span:nth-child(21) { -webkit-animation-delay: .45s; animation-delay: .45s } .btn-more:hover>span:nth-child(11), .btn-more:hover>span:nth-child(22) { -webkit-animation-delay: .5s; animation-delay: .5s } /*-- //btn-more --*/ /*@media (min-width:992px) { .index-pd-content { font-size: 1rem; line-height: 200% } } .index-pd1 .bg-dotted, .index-pd2 .bg-dotted { content: " "; position: absolute; width: 100%; height: 250px; bottom: 0; left: 0; z-index: 1 } .index-pd1 { position: relative; background: url(../img/index/index-pd1bg.png) 6vw bottom no-repeat } @media (min-width:768px) { .index-pd1 .index-pd-img { width: 37%; float: left } } .index-pd1 .bg-dotted { background: url(../img/index/index-pd1bg.svg) 0 0 no-repeat } .index-pd2 { position: relative; background: #1d1d1d url(../img/index/index-pd2bg.png) 53vw bottom no-repeat } @media (min-width:992px) { .index-pd2 .index-pd-img { margin-top: -45px } }*/ /***** 产品详情页 *****/ .snprodbox{ width:100%; height:auto; padding:30px 0 10px 0; background-color:#EEE;} .snprod{ width:100%;} .snprod a{ float:left; display:block; height:48px; padding:0 17px; background-color:#DDD; margin-right:20px; margin-bottom:20px; font-size:1.125em; line-height:48px; transition:all 0.5s;} .snprod a.last{ margin-right:0;} .snprod a:hover, .snprod a.current{ background-color:#8EC31E; color:#FFF;} #pd1 #s1, #pd2 #s2, #pd3 #s3, #pd4 #s4, #pd5 #s5, #pd6 #s6, #pd7 #s7, #pd8 #s8, #pgswj #s9, #pgptsk #s10{ background-color:#8EC31E; color:#FFF;} @media screen and (max-width:980px) { .snprodbox{ display:none;} } .pgname-wrap{ width:100%; height:48px; background-color:#21AB38; position:relative; display:none;} .pgname{ width:100%; height:48px; background:-webkit-linear-gradient(left, #8EC31E, #8EC31E); background:-moz-linear-gradient(left, #8EC31E, #8EC31E); background:-0-linear-gradient(left, #8EC31E, #8EC31E); background:linear-gradient(left, #8EC31E, #8EC31E); font-size:1.125em; line-height:48px; color:#FFF; position:relative; clear:both; margin-top:-6px; z-index:1;} .pgname span{ display:block; width:90%; margin:0 auto; position:relative;} .subnavmp-sign{ position:absolute; top:15px; right:5%; z-index:2;} .subnavmp-btn{ width:20%; height:48; position:absolute; right:0; top:0; display:none;} .subnavmp-list{ width:100%; text-align:left; position:absolute; right:0; top:48px; border-top:1px solid #DDD; z-index:9999; display:none;} .subnavmp-list li a{ display:inline-block; width:100%; font-weight:normal; font-size:1.125em; line-height:48px; color:#333; text-align:center; border-bottom:1px solid #DDD; background-color:#EEF1EB; cursor:pointer;} .subnavmp-list li a:hover{ background-color:#8EC31E; color:#FFF;} @media screen and (max-width:980px) { .pgname-wrap{ display:block;} } .prodshow{ width:100%; padding:30px 0;} @media screen and (max-width:980px) { .prodshow{ padding:4% 0 8%;} } .prodshow h1{ display:inline-block; font-size:2em; line-height:2; margin-bottom:10px;} @media screen and (max-width:980px) { .prodshow h1{ text-align:center;} } @media screen and (max-width:640px) { .prodshow h1{ margin-bottom:0px;} } .prodshow1 h1{ color:#4B377B; background-image:-webkit-linear-gradient(left, #4B377B, #AF467A); background-image:-moz-linear-gradient(left, #4B377B, #AF467A); background-image:-0-linear-gradient(left, #4B377B, #AF467A); background-image:linear-gradient(left, #4B377B, #AF467A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .prodshow2 h1{ color:#B03623; background-image:-webkit-linear-gradient(left, #B03623, #BD7F17); background-image:-moz-linear-gradient(left, #B03623, #BD7F17); background-image:-0-linear-gradient(left, #B03623, #BD7F17); background-image:linear-gradient(left, #B03623, #BD7F17); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .prodshow3 h1{ color:#3993A2; background-image:-webkit-linear-gradient(left, #3993A2, #8EB23C); background-image:-moz-linear-gradient(left, #3993A2, #8EB23C); background-image:-0-linear-gradient(left, #3993A2, #8EB23C); background-image:linear-gradient(left, #3993A2, #8EB23C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .prodshow4 h1{ color:#7C341F; background-image:-webkit-linear-gradient(left, #7C341F, #A63423); background-image:-moz-linear-gradient(left, #7C341F, #A63423); background-image:-0-linear-gradient(left, #7C341F, #A63423); background-image:linear-gradient(left, #7C341F, #A63423); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .prodshow5 h1{ color:#983622; background-image:-webkit-linear-gradient(left, #983622, #AF3423); background-image:-moz-linear-gradient(left, #983622, #AF3423); background-image:-0-linear-gradient(left, #983622, #AF3423); background-image:linear-gradient(left, #983622, #AF3423); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .prodshow6 h1{ color:#B24622; background-image:-webkit-linear-gradient(left, #B24622, #bd7f17); background-image:-moz-linear-gradient(left, #B24622, #AF467A); background-image:-0-linear-gradient(left, #B24622, #AF467A); background-image:linear-gradient(left, #B24622, #AF467A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .prodshow7 h1{ color:#167C8D; background-image:-webkit-linear-gradient(left, #167C8D, #698a4d); background-image:-moz-linear-gradient(left, #167C8D, #AF467A); background-image:-0-linear-gradient(left, #167C8D, #AF467A); background-image:linear-gradient(left, #167C8D, #AF467A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .prodshow8 h1{ color:#763C7A; background-image:-webkit-linear-gradient(left, #763C7A, #AF467A); background-image:-moz-linear-gradient(left, #763C7A, #AF467A); background-image:-0-linear-gradient(left, #763C7A, #AF467A); background-image:linear-gradient(left, #763C7A, #AF467A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .prodshow-txt{ text-indent:2em; margin-bottom:20px; font-size:0.875em; line-height:1.8;} .prodshow-img{ width:100%; height:auto; clear:both; text-align:center; margin-bottom:20px;} .prodshow-img img{ max-width:100%;} .pd1-img01{ float:left; width:31.25%; margin-right:3.125%;} .pd1-img02{ float:left; width:31.25%; margin-right:3.125%; margin-bottom:3.125%;} .pd1-img03{ float:left; width:31.25%; margin-bottom:3.125%;} .pd1-img04{ float:left; width:31.25%; margin-right:3.125%;} .pd1-img05{ float:left; width:31.25%;} @media screen and (max-width:980px) { .pd1-img01{ width:48%; margin-right:4%; margin-bottom:4%;} .pd1-img02{ width:48%; margin-right:0%; margin-bottom:4%;} .pd1-img03{ width:48%; margin-bottom:4%;} .pd1-img04{ width:48%; margin-right:4%;} .pd1-img05{ width:48%;} } /*@media screen and (max-width:640px) { .pd1-img01{ width:100%; margin-right:0%; margin-bottom:4%;} .pd1-img02{ width:100%; margin-right:0%; margin-bottom:4%;} .pd1-img03{ width:100%; margin-bottom:4%;} .pd1-img04{ width:100%; margin-right:0%; margin-bottom:4%;} .pd1-img05{ width:100%;} }*/ .pd2-img01{ float:left; width:48.4375%; margin-right:3.125%;} .pd2-img02{ float:left; width:48.4375%;} @media screen and (max-width:480px) { .pd2-img01{ width:100%; margin-right:0%; margin-bottom:4%;} .pd2-img02{ width:100%;} } .pd3-img01{ float:left; width:48.4375%; margin-right:3.125%;} .pd3-img02{ float:left; width:48.4375%;} @media screen and (max-width:480px) { .pd3-img01{ width:100%; margin-right:0%; margin-bottom:4%;} .pd3-img02{ width:100%;} } .pd4-img01{ float:left; width:31.25%; margin-right:3.125%;} .pd4-img02{ float:left; width:31.25%; margin-right:3.125%;} .pd4-img03{ float:left; width:31.25%; margin-bottom:3.125%;} @media screen and (max-width:480px) { .pd4-img01{ width:100%; margin-right:0%; margin-bottom:4%;} .pd4-img02{ width:100%; margin-right:0%; margin-bottom:4%;} .pd4-img03{ width:100%; margin-bottom:0%;} } .pd5-img01{ float:left; width:31.25%; margin-right:3.125%;} .pd5-img02{ float:left; width:31.25%; margin-right:3.125%;} .pd5-img03{ float:left; width:31.25%; margin-bottom:3.125%;} @media screen and (max-width:480px) { .pd5-img01{ width:100%; margin-right:0%; margin-bottom:4%;} .pd5-img02{ width:100%; margin-right:0%; margin-bottom:4%;} .pd5-img03{ width:100%; margin-bottom:0%;} } .pd6-img01{ float:left; width:48.4375%; margin-right:3.125%;} .pd6-img02{ float:left; width:48.4375%;} @media screen and (max-width:480px) { .pd6-img01{ width:100%; margin-right:0%; margin-bottom:4%;} .pd6-img02{ width:100%;} } .pd7-img01{ float:left; width:100%;} .pd8-img01{ float:left; width:48.4375%; margin-right:3.125%;} .pd8-img02{ float:left; width:48.4375%;} @media screen and (max-width:480px) { .pd8-img01{ width:100%; margin-right:0%; margin-bottom:4%;} .pd8-img02{ width:100%;} } .pshowtb{ width:100%; height:auto; text-align:center; display:none;} .pshowtb .rows{ width:100%; height:auto;} .pshowtb .row:after{ content:''; display:block; clear:both; height:0; font-size:0; overflow:hidden; visibility:hidden;} .pshowtb .colspan10{ width:100%; height:200px; display:inline-table; text-align:center; vertical-align:middle; background-color:#A77883;} .pshowtb .colspan10 span{ display:block;} .pshowtb .col{ float:left; width:10%;} .pshowtb .colspan9{ width:90%; text-align:left;} .prodshow-table{ width:100%; height:auto; text-align:center; margin-bottom:20px;} .prodshow-table table{ border:0px solid #D3C3C2; font-size:0.875em; text-align:center; vertical-align:middle;} .pshow-tb1 .row1{ height:48px; background-color:#A77883; color:#FFF;} .pshow-tb1 td{ padding:8px 0;} .pshow-tb1 td.colspan9{ text-align:left; padding-left:1em; padding-right:1em;} .prodshow-table .pshow-tb2{ display:none;} .pshow-tb2 .row1{ height:48px; background-color:#A77883; color:#FFF;} .pshow-tb2 td{ padding:8px 0;} .pshow-tb2 td.colspan2{ text-align:left; padding-left:1em; padding-right:1em;} @media screen and (max-width:980px) { .prodshow-table .pshow-tb1{ display:none;} .prodshow-table .pshow-tb2{ display:block;} } /***** 生物基秸秆 *****/ .swjclbox{ width:100%; padding:5% 0;} .swjclbox img{ max-width:100%;} .jiegan{ width:100%;} .jiegan h1{ text-align:center; font-weight:bold; font-size:1.875em; line-height:2; color:#A77883; margin-bottom:2%;} .jgimg01{ float:left; width:55%; text-align:center; margin-bottom:20px;} .jgimg02{ float:right; width:45%; text-align:center; margin-bottom:20px;} .jgadv{ width:103%; margin-left:-1.5%;} .jgadv li{ float:left; width:30.33%; height:48px; margin:0 1.5% 20px; background-color:#A77883; font-size:0.875em; line-height:48px; color:#FFF; text-indent:14px;} .jgadv li i{ display:inline-block; width:6px; height:6px; background-color:#FFF; border-radius:5px; margin-right:8px;} .jgtbbox{ margin-bottom:20px;} .jgtbbox h6{ width:100%; height:48px; font-size:1.125em; line-height:48px; color:#333; padding-top:8px;} .jgtb .tbcol{ float:left;} .jgtb .tbcol1{ width:24%;} .jgtb .tbcol2{ width:19%;} .jgtb .tbcol div{ width:98%; height:auto; padding:12px 1%; background-color:#E7DFDE; border-bottom:2px solid #D3C3C2; font-size:0.875em; line-height:2; color:#333; text-align:center; word-wrap:break-word;} .jgtb .tbcol1 div{ background-color:#A77883; color:#FFF;} .jgtb .tbcol div:first-child{ border-top:2px solid #D3C3C2;} .jgapp{ width:100%;} .jgapp h3{ display:block; width:100%; height:48px; background-color:#A77883; font-size:1.125em; line-height:48px; color:#FFF; text-indent:2em; margin-bottom:20px;} .jgapp p{ text-indent:2em; font-size:0.875em; margin-bottom:20px;} .jgappimg img{ float:left; width:25%;} @media screen and (max-width:980px) { .jgadv{ width:104%; margin-left:-2%;} .jgadv li{ float:left; width:46%; margin:0 2% 20px;} .jgappimg img{ width:50%;} } @media screen and (max-width:780px) { .jgtb .tbcol div.row1{ min-height:56px; vertical-align:middle;} } @media screen and (max-width:640px) { .jgimg01{ width:100%;} .jgimg02{ float:left; width:100%;} .jgadv{ width:100%; margin-left:0%;} .jgadv li{ float:left; width:100%; margin:0 0% 20px;} .jgtb .tbcol div.row2{ min-height:56px; vertical-align:middle;} } @media screen and (max-width:510px) { .jgimg01{ width:100%;} .jgimg02{ float:left; width:100%;} .jgadv{ width:100%; margin-left:0%;} .jgadv li{ float:left; width:100%; margin:0 0% 20px;} .jgtb .tbcol div.row1{ min-height:84px; vertical-align:middle;} .jgtb .tbcol div.row3{ min-height:56px; vertical-align:middle;} .jgtb .tbcol div.row4{ min-height:56px; vertical-align:middle;} } @media screen and (max-width:325px) { .jgtb .tbcol div{ min-height:56px; vertical-align:middle;} .jgtb .tbcol div.row2{ min-height:84px; vertical-align:middle;} } /***** 潘通色卡 *****/ .ptsk{ width:100%; padding:5% 0;} .ptsk img{ max-width:100%;} .ptsk h1{ text-align:center; font-weight:bold; font-size:1.875em; line-height:2; color:#A77883; margin-bottom:2%;} .ptimg01{ float:left; width:50%; text-align:center; margin-bottom:20px;} .ptimg02{ float:right; width:50%; text-align:center; margin-bottom:20px;} .ptsk p{ text-indent:2em; margin-bottom:20px; font-size:0.875em; line-height:1.8;} @media screen and (max-width:980px) { .ptimg01{ width:100%;} .ptimg02{ float:left; width:100%;} } /********** 内页视频 **********/ .videobox{ padding-top:6%;} .vitem{ width:48%; height:0; padding-bottom:28%; position:relative; overflow:hidden;} .vitem.left{ background-color:#908CD1;} .vitem.right{ background-color:#E2534D;} .vitem a{ display:block; width:100%; height:100%;} .vitem img{ width:100%; filter:alpha(opacity=40); opacity: 0.4;} .vitem img{ width:100%; min-width:100%; min-height:100%; object-fit:cover; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.8s linear; -moz-transition: all 0.8s linear; -ms-transition: all 0.8s linear; -o-transition: all 0.8s linear; transition: all 0.8s linear;} .vitem:hover img{ opacity:0.6; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);} .vitem span{ display:block; width:84px; height:84px; background:url(../images/imgsign/btnplay01.png) center no-repeat; position:absolute; top:50%; left:50%; margin-top:-42px; margin-left:-42px; z-index:2;} .vitem:hover span{ background-image:url(../images/imgsign/btnplay01_h.png); transition:all 0.5s; filter:alpha(opacity=40); opacity: 0.4;} @media screen and (max-width:640px) { .vitem{ width:100%; padding-bottom:56%;} .vitem.left{ margin-bottom:6%;} .vitem.right{ float:left !important;} } /********** 新闻资讯 **********/ .newsbox{ padding-top:6%; padding-bottom:6%;} /** 最新三条 **/ .newnews{ width:100%; height:auto; overflow:hidden; padding-bottom:4%; border-bottom:1px solid #DDD;} .newnews ul{ width:103%; margin-left:-1.5%;} .newnews ul li{ float:left; width:30.33%; height:auto; margin:0 1.5%;} .nnews-img{ width:100%; height:0; padding-bottom:68%; position:relative; overflow:hidden; margin-bottom:24px;} .nnews-img img{ width:100%; margin-top:-16.25%; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear;} .newnews ul li:hover .nnews-img img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);} .newnews ul li h3{ display:block; width:100%; height:28px; font-size:1em; font-weight:bold; color:#333; line-height:28px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-bottom:8px;} .newnews ul li h3 a{ color:#333;} .newnews ul li h3 a:hover{ color:#8EC31E;} .newnews ul li p{ display:block; width:100%; height:48px; font-size:0.875em; line-height:24px; color:#666; line-height:24px; overflow:hidden; text-overflow:ellipsis; display:block; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .newnews ul li p a{ color:#666;} .newnews ul li p a:hover{ color:#8EC31E;} /** 新闻列表 **/ .newslist{ width:100%; overflow:hidden;} .newslist ul li{ width:100%; padding:30px 0; border-bottom:1px solid #EEE; position:relative; margin:0 auto;} .newslist ul li:hover{ border-bottom-color:#8EC31E;} .news-img{ float:left; width:21%; height:0; padding-bottom:14.2%; overflow:hidden;} .news-img img{ width:100%; margin-top:-16.25%;} .news-txt{ float:left; width:75%; margin-left:4%; position:relative;} .news-txt h6{ width:60%; font-size:1em; font-weight:normal; line-height:3em; color:#000; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .news-txt p{ font-size:0.875em; line-height:1.5em; color:#666; overflow:hidden; text-overflow:ellipsis; display:block; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-bottom:2.5%;} .news-txt span{ display:block; background:url(../images/imgsign/news_date.png) left center no-repeat; padding-left:24px; font-size:0.875em; line-height:24px; color:#999; font-family:Arial,Tahoma,Helvetica,sans-serif;} .news-txt:hover h6{ color:#8EC31E;} .news-txt:hover p{ color:#000;} .news-txt .todetail a{ display:block; font-size:0.875em; line-height:48px; color:#333; position:absolute; right:0; top:0;} .news-txt .todetail a:hover{ color:#8EC31E; text-decoration:underline;} /***** 新闻正文 *****/ .newsdetail{ width:94%; padding:4% 3%;} .newsdetail-title{ margin:0px 0 20px; text-align:center; font-size:1.25em; font-weight:bold; line-height:3em; color:#333;} .newsdetail-time{ text-align:center; height:30px; line-height:30px; font-size:0.875em; color:#666; border-bottom:1px dotted #CCC; padding-bottom:20px;} .newsdetail-time label{ margin-right:2em;} .newsdetail-cont{ margin-top:30px; font-size:0.95em; line-height:2;} .newsdetail-cont img{ max-width:100%;} @media screen and (max-width:980px) { .newnews ul{ padding-bottom:6%;} .news-img{ width:30%; padding-bottom:20.3%;} .news-txt{ width:66%; margin-left:4%;} .newsdetail{ padding-top:8%;} } @media screen and (max-width:640px) { .newnews{ padding-bottom:0%;} .newnews ul{ width:100%; margin-left:0; padding-bottom:0%;} .newnews ul li{ float:left; width:100%; height:auto; margin:0 0 10% 0;} .news-img{ width:100%; padding-bottom:67.62%;} .news-txt{ width:100%; margin-left:0%;} .news-txt .todetail a{ line-height:2em; color:#8EC31E; position:absolute; right:0; top:auto; bottom:0%;} .newsdetail{ padding-top:4%;} .newsdetail-time label{ display:none;} } /********** 加入我们 **********/ /***** 人才理念 *****/ .talentbox{ width:100%;} .talent{ width:100%; padding:6% 0;} .talenttit{ width:100%; text-align:center; margin-bottom:6%;} .talenttit h3{ font-size:1.875em; font-weight:normal; line-height:1.5; color:#333; text-transform:uppercase; margin-bottom:14px;} .talenttit p{ font-size:1.25em; line-height:1.3; color:#999;} .talentcont{ text-align:center;} .talentcont img{ max-width:100%; margin-left:auto; margin-right:auto;} .talentimg01_2{ display:none;} .talentimg01_3{ display:none;} @media screen and (max-width:980px) { .talentcont{ padding:6% 0;} .talentimg01_1{ display:none;} .talentimg01_2{ display:block;} } @media screen and (max-width:640px) { .talent{ padding:8% 0;} .talenttit h3{ font-size:1.625em; line-height:1.5; margin-bottom:0px;} .talenttit p{ font-size:1em; line-height:1.5;} .talentimg01_2{ display:none;} .talentimg01_3{ display:block;} } /***** 人才招聘*****/ .jobtit{ width:100%; padding:50px 0; background:url(../images/imginside/jobtitbg.png) center center #8EC31E no-repeat; text-align:center;} .jobtit h3{ font-size:1.875em; font-weight:normal; line-height:1.5; color:#FFF; text-transform:uppercase; margin-bottom:14px;} .jobtit p{ font-size:1.25em; line-height:1.5; color:#EEE;} .jobbox{ width:100%;} .joblist{ width:100%; padding:6% 0 0;} .jobitem{ float:left; width:20%; height:0; padding:0 2.5% 32% 2.5%; text-align:center; margin-bottom:2%;} .jobitem:hover{ -webkit-box-shadow:0 15px 15px rgba(0, 0, 0, 0.1); -moz-box-shadow:0 15px 30px rgba(0, 0, 0, 0.1); box-shadow:0 15px 30px rgba(0, 0, 0, 0.1); transition:all 0.5s;} .jobimg{ width:100%; text-align:center; margin-bottom:30px;} .jobimg img{ max-width:100%; margin:0 auto;} .jobname{ width:100%; font-size:1.25em; font-weight:bold; color:#333; line-height:1.5; text-align:center; margin-bottom:14px;} .jobnote{ width:100%; font-size:1em; color:#333; line-height:1.5; text-align:center;} .jobnum{ width:100%; font-size:1em; color:#333; line-height:1.5; text-align:center;} @media screen and (max-width:1440px) { .jobitem{ padding-bottom:32%; margin-bottom:4%;} } @media screen and (max-width:1280px) { .jobitem{ padding-bottom:40%;} } @media screen and (max-width:1100px) { .joblist{ padding-top:8%;} .jobitem{ padding-bottom:42%;} } @media screen and (max-width:980px) { .jobitem{ padding-bottom:46%;} } @media screen and (max-width:824px) { .jobitem{ padding-bottom:50%;} } @media screen and (max-width:768px) { .jobitem{ width:45%; padding-bottom:68%;} } @media screen and (max-width:640px) { .jobtit{ padding:40px 0; background-size:90%;} .jobtit h3{ font-size:1.625em; line-height:1.5; margin-bottom:0px;} .jobtit p{ font-size:1em; line-height:1.5;} .jobitem{ padding-bottom:80%; margin-bottom:6%;} } @media screen and (max-width:480px) { .joblist{ padding-top:12%;} .jobitem{ padding-bottom:96%;} } @media screen and (max-width:375px) { .jobtit{ padding:30px 0;} .joblist{ padding-top:16%;} .jobitem{ padding-bottom:106%;} } /***** 岗位介绍*****/ .jobdetailbox{ width:100%; padding:60px 0; background-color:#FFF;} .jobdetailbox h1{ font-weight:normal; font-size:0.875em; line-height:1.6; color:#666; text-indent:2em; margin-bottom:20px; display:none;} .jobdetail{ width:100%;} .jobdetail-name{ width:96%; padding:0 2%; height:60px; background-color:#8EC31E; margin-bottom:30px; position:relative;} .jobdetail-name h3{ float:left; width:60%; font-size:1.375em; font-weight:normal; line-height:60px; color:#FFF;} .jobdetail-name span{ float:right; width:40%; font-size:1em; line-height:60px; color:#FFF; text-align:right;} .jobzz{ width:96%; padding:20px 2%; background-color:#EEE; margin-bottom:30px; background:url(../images/imginside/jobbg.png) center repeat #EEE;} .jobzz h6{ font-size:1em; line-height:1.5; color:#333; margin-bottom:10px;} .jobzzcont{ font-size:0.875em; line-height:1.8; color:#666;} .jobyq{ width:96%; padding:20px 2%; background-color:#EEE; margin-bottom:30px; background:url(../images/imginside/jobbg.png) center repeat #EEE;} .jobyq h6{ font-size:1em; line-height:1.5; color:#333; margin-bottom:10px;} .jobyqcont{ font-size:0.875em; line-height:1.8; color:#666;} .jobctc{ width:100%; height:48px; background-color:#EEE; text-align:center; position:relative;} .jobctc span{ display:inline-block; padding:0 14px; font-size:0.875em; line-height:48px; color:#333; font-weight:bold;} .jobctc span a{ color:#333;} .jobctc span a:hover{ color:#8EC31E;} @media screen and (max-width:980px) { .jobdetail-name{ width:90%; padding:0 5%;} .jobzz{ width:90%; padding:20px 5%;} .jobyq{ width:90%; padding:20px 5%;} } @media screen and (max-width:768px) { /*.jobdetail-name{ height:auto; padding-top:20px; padding-bottom:20px;} .jobdetail-name h3{ width:100%; line-height:1.5;} .jobdetail-name span{ float:left; width:100%; text-align:left; line-height:1.5;}*/ .jobdetail-name h3{ width:80%; font-size:1.125em;} .jobdetail-name span{ width:20%; font-size:0.875em;} .jobctc{ height:auto; padding-top:20px; padding-bottom:20px; line-height:1.5;} .jobctc span{ display:block; width:100%; height:auto; line-height:1.8;} } /********** 联系我们 **********/ /***** 联系方式 *****/ .ctcbox{ padding:8% 0% 0; margin-bottom:6%;} .ctcbox-phone{ display:none;} .ctcqrcode{ float:left; width:24%;} .ctcqrcode p{ display:block; font-size:0.875em; color:#666; line-height:1.5; margin-bottom:20px;} .ctcqrcode span{ display:block;} .ctcqrcode span img{ width:160px;} .ctcinfo{ float:right; width:70%;} .ctcinfo h1{ font-size:1.5em; font-weight:bold; line-height:1; color:#8EC31E; margin-bottom:30px;} .ctcinfo-l{ float:left; width:54%;} .ctcinfo-r{ float:left; width:46%;} .ctcinfo p{ height:32px; font-size:0.875em; line-height:32px; color:#666; margin-bottom:20px;} .ctcinfo i{ float:left; display:block; width:32px; height:32px; background-image:url(../images/imgsign/sign_ctc.png); background-repeat:no-repeat; margin-right:10px;} .ctcinfo label{ font-family:Arial, Tahoma, Helvetica, sans-serif;} .ctcinfo a{ color:#666;} .ctcinfo a:hover{ color:#8EC31E;} i.icon-add{ background-position:0 0;} i.icon-zip{ background-position:-32px 0;} i.icon-url{ background-position:-64px 0;} i.icon-tel{ background-position:-96px 0;} i.icon-phone{ background-position:-128px 0;} i.icon-email{ background-position:-160px 0;} @media screen and (max-width:1280px) { .ctcqrcode{ width:20%;} .ctcinfo{ width:74%;} } @media screen and (max-width:980px) { .ctcbox{ display:none; padding:12% 0 0;} .ctcbox-phone{ display:block;} .ctcinfo{ float:left; width:100%; margin-bottom:4%;} .ctcinfo h1{ text-align:center; margin-bottom:48px;} .ctcinfo-l{ width:60%;} .ctcinfo-r{ width:40%;} .ctcqrcode{ width:100%; text-align:center;} .ctcqrcode p{ display:none;} .ctcqrcode img{ margin:0 auto; width:auto !important; max-width:80%;} } @media screen and (max-width:768px) { .ctcinfo-l{ width:100%;} .ctcinfo-r{ width:100%;} .ctcinfo p{ height:auto; text-align:center; margin-bottom:4%;} .ctcinfo i{ float:none; margin:0 auto 10px;} } @media screen and (max-width:640px) { .ctcbox{ padding:18% 0 0; margin-bottom:10%;} .ctcinfo h1{ font-size:1.125em;} } /***** 地图 *****/ .my-map { margin:0 auto; width:100%; height:400px;} .my-map .icon { background: url(http://lbs.amap.com/console/public/show/marker.png) no-repeat; } .my-map .icon-cir { height: 31px; width: 28px; } .my-map .icon-cir-red { background-position: -11px -5px; } .amap-container{height: 100%;} .ctcmap-phone{ width:100%; height:auto; display:none; overflow:hidden;} .ctcmap-phone img{ max-width:100%;} @media screen and (max-width:980px) { .my-map { display:none;} .ctcmap-phone{ display:block;} } @media screen and (max-width:768px) { .ctcmap-phone img{ -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5);} } @media screen and (max-width:480px) { .ctcmap-phone img{ -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2);} } /***** 留言 *****/ .msgbox{ padding-top:6%; padding-bottom:6%;} .msgitem{ float:left; width:30%; height:64px; position:relative; margin-bottom:2%;} .msgitem.msgitem2{ margin:0 5%;} .msgitem label{ width:20%; height:64px; position:absolute; left:0; top:0; font-size:0.875em; color:#666; line-height:64px;} .msgitem input{ width:82%; height:64px; padding:0px 4% 0 14%; background-color:none; border:medium none; border-bottom:1px solid rgba(200,200,200,1); font-size:0.875em; color:#666; line-height:64px;} .msgitem input:hover{ border-color:#8EC31E;} .msgitem-last{ width:100%; height:auto; position:relative; margin-bottom:2%;} .msgitem-last label{ height:64px; position:relative; width:100%; font-size:0.875em; color:#666; line-height:64px;} .msgitem-last textarea{ width:100%; min-height:140px; background-color:none; border:medium none; border-bottom:1px solid rgba(200,200,200,1); font-size:0.875em; color:#666; line-height:36px; /*resize:none; overflow-y:scroll;*/} .msgitem-last textarea:hover{ border-color:#8EC31E;} .inputsub{ width:100%; padding-top:30px; text-align:center;} .inputsub input{ display:block; width:140px; height:40px; margin:0 auto; background:none; border:1px solid #8EC31E; border-radius:5px; cursor:pointer; font-size:0.875em; line-height:40px; color:#8EC31E; text-align:center;} .inputsub input:hover{ background-color:#8EC31E; color:#FFF; transition:all 0.5s;} @media screen and (max-width:980px) { .msgbox{ padding-bottom:12%;} .msgitem{ width:100%; height:128px; margin-bottom:0;} .msgitem.msgitem2{ margin:0;} .msgitem label{ width:100%; position:relative; height:36px; line-height:36px;} .msgitem input{ width:100%; height:64px; padding:0;} .msgitem-last textarea{ min-height:216px;} } @media screen and (max-width:640px) { .msgbox{ padding-bottom:18%;} }