www.gusucode.com > 【dema24】响应式绿色果蔬田园网站织梦模板(自适应手机端) > 【dema24】响应式绿色果蔬田园网站织梦模板(自适应手机端)/skin/css/style.css
/* 织梦58(dede58.com)做最好的织梦整站模板下载网站 */ html, body { font-family: "Microsoft Yahei"; background: white; } li { list-style: none; } a { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; color: #333; text-decoration: none; } a:hover { text-decoration: none; } /* 划过图片放大 */ .img-auto { display: block; overflow: hidden; } .img-auto img { width: auto; height: auto; margin: 0px auto; transition: 600ms; } .img-auto img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } /* 导航 */ .navbar-default { padding: 15px 0px; background: white; opacity: 0.9; -moz-box-shadow: 0px 0px 15px #888; -webkit-box-shadow: 0px 0px 15px #888; box-shadow: 0px 0px 15px #888; } @media (max-width: 768px) { .navbar-default { padding: 5px 0px; } } .navbar-default .navbar-nav>li> a { color: #000; } /* logo */ a.navbar-brand { width: 210px; max-height: 48px; margin: 5px; padding: 0px; overflow: hidden; } a.navbar-brand img { max-width: 210px; max-height: 48px; margin: 0px auto; } @media (max-width: 768px) { a.navbar-brand { margin-left: 10px; max-width: 180px; } a.navbar-brand img { max-width: 180px; max-height: 35px; } } /* 导航右侧 */ @media (min-width: 768px) { #navbar { float: right; } } /*导航用户注册*/ .user-panel { margin: 10px 20px 0 0px; } .user-panel a, .user-panel a:visited, .user-panel a:link { color: #198DDD; font-size: 14px; padding: 5px 10px; text-align: center; text-decoration: none; border: 1px solid #198DDD; } .user-panel a:hover { color: #198DDD; } .user-panel a.top-login { color: white; background: #198DDD; } .user-panel a:hover { background: #26c79d; color: white; border: 1px solid #26c79d; } } @media (min-width: 768px) { ul.navbar-nav li.oen { height: 70px; padding: 10px 0px; } } .top-nav-right { position: absolute; top: 20px; right: 0px; width: 110px; margin: 0px; padding: 0px; } @media all and (min-width:1024px) and (max-width:1024px) { .top-nav-right { top: 5px; } .user-panel { margin: 30px 0px 0px 0px; } } @media all and (min-width:1156px) and (max-width:1280px) { .user-panel { margin: 10px 60px 0 0px; } } .top-nav-right ul { margin: 0px; padding: 0px; } .top-nav-right ul li { float: left; width: 30px; line-height: 30px; margin: 2px; } .top-nav-right ul li.nav-shopping a { position: absolute; top: 0px; right: 0px; display: block; width: 30px; height: 30px; } .shopping-box { margin: 0px auto; padding: 20px; } .shopping-box li { margin: 10px; } @media (max-width: 768px) { .user-panel { margin: 10px 0px 0px 0px; } .top-nav-right { margin-top: 10px; } .top-nav-right ul li.nav-shopping, .top-nav-right ul li.glyphicon-search { display: none; } .navbar-toggle { z-index: 999; } .top-nav-right { width: 30px; position: relative; top: 0px; left: 5px; z-index: 99; font-size: 26px; } } #fat-menu { margin-top: 3px; } /* 幻灯文字 */ .carousel-caption { bottom: 10%; } .carousel-caption h3 { margin-bottom: 30px; font-size: 3.2em; } .carousel-caption p { line-height: 200%; font-size: 1.2em; } .carousel-caption .btn { margin-top: 20px; font-size: 1.0em; } @media (max-width: 1280px) { .carousel-caption h3 { font-size: 2.0em; } .carousel-caption p { line-height: 180%; font-size: 1.0em; } } @media (max-width: 768px) { .carousel-caption h3 { margin-bottom: 30px; font-size: 1.2em; } .carousel-caption p { display: none; } .carousel-caption .btn { display: none; } } .modal { top: 20%; } .bs-example-modal-lg-search .row { padding: 20px; } /* 通用 */ .blank5, .blank10, .blank20, .blank30, .blank50, .blank60 { clear: both; height: 5px; overflow: hidden; } .blank10 { height: 10px; } .blank20 { height: 20px; } .blank30 { height: 30px; } .blank50 { height: 50px; } .blank60 { height: 60px; } .title, .title-2 { padding: 50px 0px 60px 0px; text-align: center; text-transform: uppercase; } .title h1, .title h3 a { color: #038A03; line-height: 45px; height: 45px; font-size: 40px; font-weight: normal; text-decoration: none; } .title h3 small { display: block; clear: both; margin: 20px 0px 10px 0px; color: #a1a1a1; font-size: 10px; } .title p, .title-index-1 p { margin: 10px auto 30px auto; line-height: 20px; color: #333; font-size: 16px; } .title span { } @media (min-width: 768px) { .title p, .title-index-1 p { width: 600px; } } .title-2 a { font-size: 30px; } .title-2 h3 a small { display: block; clear: both; margin: 10px 0px 10px 0px; color: #a1a1a1; font-size: 8px; } /* 页底 */ .sub_menu { margin-top: 30px; } @media (max-width: 768px) { .sub_menu { height: 0px; overflow: hidden; } } /* 面包屑导航 */ .breadcrumb { margin-bottom: 50px; } .breadcrumb span { padding-right: 15px; color: #ccc; } /* 内页文字大小按钮 */ .content_tools { float: right; margin: 30px 0px; padding: 5px 15px; background: #eee; text-align: right; font-size: 14px; } /************* 分页 */ .pages { clear: both; margin: 0px 10px; font-size: 0.8em; color: #888; } .pages strong, .pages span { color: #FFFFFF; display: block; float: left; height: 26px; line-height: 26px; float: left; padding: 0px 8px; background: #337ab7; margin: 0px 3px 0px 0px; font-size: 0.8em; border-radius: 3px 3px 3px 3px; } .pages a, .pages a { display: block; float: left; height: 24px; line-height: 24px; float: left; padding: 0px 8px; border: 1px solid #337ab7; border-radius: 3px 3px 3px 3px; text-decoration: none; margin: 0px 3px 0px 0px; color: #337ab7; font-size: 0.8em; } .pages strong { color: white; } .pages span { float: right; } #page { font-size: 0.8em; } #page .blank10 { height: 20px; } #page strong { padding: 5px 8px; background: #337ab7; border-radius: 5px; color: white; margin-right: 15px; font-size: 0.8em; } .pagination { margin: 50px 0px; } /* 分页 */ .page-number { position: relative; right: 0px; top: 5px; color: #FFFFFF; height: 26px; line-height: 26px; padding: 9px 20px; background: #337ab7; margin: 0px 3px 0px 0px; font-size: 0.8em; border-radius: 3px 3px 3px 3px; } /* 正文 */ #content_text { line-height: 180%; font-size: 1.2em; } /* 首页 */ .index-1, .index-3 { padding-bottom: 100px; background: #f8f8f8; } .index-1 ul { overflow: hidden; } .index-1 li { height: 350px; overflow: hidden; text-align: center; float: left; border: 1px solid transparent; position: relative; transition: 400ms; } .index-1 li:hover { background: white; border: 1px solid #ccc; } .index-1 .t1 { width: 100%; height: 140px; padding: 70px 0 0 0; font-size: 14px; color: #9b9797; transition: 400ms; } .index-1 .t1 .img-auto { height: 176px; margin: 0px 0px 10px 0px; overflow: hidden; } .index-1 .t1 a { margin: 0 0 5px 0; font-size: 18px; color: #3a3a3a; transition: 400ms; } .index-1 .t2 { width: 100%; padding: 20px 10px 0px 10px; height: 80px; line-height: 24px; font-size: 14px; color: #fff; background: #7bc91e; position: absolute; left: 0; bottom: -80px; transition: 400ms; } .index-1 li:hover .t1 { margin-top: -50px; } .index-1 li:hover .t2 { bottom: 0px; } @media (max-width: 768px) { .index-1 li { margin-bottom: 30px; background: white; border: 1px solid #ccc; } .index-1 li .t1 { margin-top: -50px; } .index-1 li .t2 { bottom: 0px; } } .index-2 { padding-bottom: 80px; } .index-2 div div { padding: 20px 30px; border: 1px solid #eee; -moz-box-shadow: 0px 0px 10px #eee; -webkit-box-shadow: 0px 0px 10px #eee; box-shadow: 0px 0px 10px #eee; border-radius: 3px; } @media (max-width: 768px) { .index-2 div div { margin-bottom: 20px; } } .index-2 div div.img-auto a { display: block; height: 100px; margin: 20px 0px; overflow: hidden; } .index-2 div div.img-auto h4 a { height: 16px; font-size: 14px; } .index-2 div div:hover { background: #eee; } .index-2 div div p { font-size: 12px; color: #555; } .index-2 div div p.date { color: #999; } .index-3 .btn { padding: 10px 40px; border-radius: 50px; } .index-3-left { height: 240px; overflow: auto; } .index-3-left p { text-indent: 2em; } @media (max-width: 768px) { .index-3-left { margin-bottom: 30px; } } .index-6 { padding: 0px 0px 100px 0px; } .index-6 ul li { height: 124px; padding: 0px; border: 1px solid #eee; overflow: hidden; } .index-6 ul li .img-auto { width: 89px; height: 68px; margin: 28px 50px; overflow: hidden; } /* 友情链接 */ .home-links { padding: 50px 0px 0px 0px; background: #333; color: #666; } .home-links .hr { padding: 15px 0px 0px 0px; border-top: 1px dotted #555; } .home-links-left { padding: 0px; } .home-links .links-logo img { float: left; margin: 10px; opacity: 0.2; } .home-links .links-logo img:hover { opacity: 1; transition: 400ms; } .home-links .links-a { clear: both; margin: 0 auto; font-size: 14px; padding-bottom: 60px; } .home-links .links-a a { color: #666; padding: 10px; line-height: 300%; } /**/ /*列表页 -文字列表*/ /**/ .list-container a { color: #333; } .list-container p { color: #888; } .list-container h4 { color: #000; font-weight: bold; } .list-container .row { margin-bottom: 15px; } .list-container .news-list { margin-bottom: 0; } .list-border { padding: 15px; clear: both; border: 1px dotted transparent; border-bottom-color: #BBBBBB; min-height: 115px; } .list-border-w { border: 1px dotted #BBBBBB; margin: 15px 0px; } .list-border:hover { background: #F5F5F5; border-color: #ccc; border-radius: 5px 5px 5px 5px; } .list-date { width: 5em; float: left; margin-right: 20px; text-align: center; } .list-date span { display: block; width: 1em; line-height: 1em; padding-top: .1em; white-space: nowrap; font-size: 4em; color: #555; overflow: hidden; font-family: 'Times New Roman', Times, serif; } .list-date p { clear: both; display: block; width: 5em; overflow: hidden; margin-bottom: 0; } .news-list p, .news-list-text-pic p, .list-down p { line-height: 1.6 } .list-down .img-auto { height: 170px; overflow: hidden; } #projectlist.masonry { margin: 0 auto; } #projectlist { } .wrapper { margin: 0px auto; } .projectitem { margin: 0px 0px 30px 0px; width: 380px; float: none; -webkit-backface-visibility: hidden;/*谷歌图片闪烁*/ -webkit-transform-style: preserve-3d; } .projectitem a { position: relative; display: block; } .projectitem a:hover { text-decoration: none; overflow: hidden; } .projectitem a h4 { display: none; cursor: hand; text-align: center; } .projectitem a:hover h4 { width: 100%; line-height: 30px; margin: 0; padding: 15px 0px; background: #333; display: block; position: absolute; bottom: 0; left: 0; color: #fff; filter: alpha(opacity=56); -moz-opacity: 0.8; opacity: 0.8; } .projectitem img, .index-1 img, .index-2 img, .index-3 img, #projectlist .owl-item img { -moz-box-shadow: 0px 0px 10px #888; -webkit-box-shadow: 0px 0px 10px #888; } .projectitem p { line-height: 200%; font-size: 1.2em; } .post-masonry { margin: 0px 0px 30px 0px; } .post-masonry a { position: relative; display: block; } .post-masonry a:hover { text-decoration: none; overflow: hidden; } .post-masonry a h4 { display: none; cursor: hand; text-align: center; } .post-masonry a:hover h4 { width: 100%; line-height: 30px; margin: 0; padding: 15px 0px; background: #333; display: block; position: absolute; bottom: 0; left: 0; color: #fff; filter: alpha(opacity=56); -moz-opacity: 0.8; opacity: 0.8; } .post-masonry img, .index-1 img, .index-2 img, .index-3 img, #projectlist .owl-item img { -moz-box-shadow: 0px 0px 10px #888; -webkit-box-shadow: 0px 0px 10px #888; } /*列表页 - 右侧*/ .content-right-list h3 { font-size: 16px; } .content-right-list ol { margin-bottom: 60px; } .content-right-list ol li { list-style-type: decimal; font-size: 14px; line-height: 1.8 } @media (max-width: 768px) { .content-right-list { margin-top: 60px; } } /* 联系我们地图页 */ .contact-us { background: #242625; } .contact-us h3 { font-size: 60px; line-height: 120%; color: #CCCCCC; text-align: center; padding: 50px 0; } .contact-us h3 span { font-weight: bold; color: #C22C45; } .contact-us h4 { clear: both; margin: 50px auto 0; padding: 0 0 50px } .contact-us dl { } .contact-us dl dt { line-height: 40px; color: #CACACA; font-size: 26px; margin-bottom: 10px; } .contact-us dl dd { color: #AEAEAE; font-size: 1.0em; } .content-ditu { height: 50.8em; overflow: hidden; } .contact-us .glyphicon { font-size: 50px; } /* 产品页面右侧文字信息 */ .product_info { overflow: hidden } .product_info table { color: #535353; width: 100%; } .product_info table th { text-align: right; padding: 7px 5px; width: 120px; font-weight: normal; color: #888; } .product_info table td { padding: 5px; color: #535353; font-size: 0.9em; } .product_info table tr { } .product_info strong { color: #E53F40; font-size: 30px; } #dialog_link { margin-left: 20px; background: #236298; } @media (max-width: 768px) { #dialog_link { margin: 20px 0px 0px 0px; } } /* 滚动图片 */ #projectlist .owl-carousel { display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } #projectlist .owl-carousel .owl-wrapper { display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } #projectlist .owl-carousel .owl-wrapper-outer { overflow: hidden; position: relative; width: 100%; } #projectlist .owl-carousel .owl-wrapper-outer.autoHeight { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } #projectlist .owl-carousel .owl-item { float: left; padding: 0px 50px; overflow: hidden; text-align: center; } #projectlist .owl-carousel .owl-item a.img-auto { height: 350px; overflow: hidden; } #projectlist .owl-carousel .owl-item h4 { margin: 30px 0px; font-size: 16px; } #projectlist .owl-carousel .owl-item h4 small { padding-left: 20px; font-style : oblique; } #projectlist .owl-controls .owl-page, #projectlist .owl-controls .owl-buttons div { cursor: pointer; } #projectlist .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* mouse grab icon*/ #projectlist .grabbing { cursor: url(../images/index/grabbing.png) 8 8, move; } /* fix*/ #projectlist .owl-carousel .owl-wrapper, #projectlist .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } #projectlist .owl-theme .owl-controls { margin-top: 20px; text-align: center; } /* Styling Next and Prev buttons*/ #projectlist .owl-theme .owl-controls .owl-buttons div { color: #333; display: inline-block; zoom: 1; *display: inline;/*IE7 life-saver*/ margin: 5px; padding: 5px 15px; font-size: 20px; font-weight: bold; background: #eee; } #projectlist .owl-theme .owl-controls .owl-buttons div:hover { background: #333; color: white; } /* Clickable class fix problem with hover on touch devices*//* Use it for non-touch hover action*/ #projectlist .owl-theme .owl-controls.clickable .owl-buttons div:hover { filter: Alpha(Opacity=100);/*IE7 fix*/ opacity: 1; text-decoration: none; } /* Styling Pagination*/ #projectlist .owl-theme .owl-controls .owl-page { display: inline-block; zoom: 1; *display: inline;/*IE7 life-saver*/ } #projectlist .owl-theme .owl-controls .owl-page span { display: block; width: 12px; height: 12px; margin: 5px 7px; filter: Alpha(Opacity=30);/*IE7 fix*/ opacity: 0.3; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #999; } #projectlist .owl-theme .owl-controls .owl-page.active span, #projectlist .owl-theme .owl-controls.clickable .owl-page:hover span { filter: Alpha(Opacity=100);/*IE7 fix*/ opacity: 1; } /* If PaginationNumbers is true*/ #projectlist .owl-theme .owl-controls .owl-page span.owl-numbers { height: auto; width: auto; color: #FFF; padding: 2px 10px; font-size: 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } /* preloading images*/ #projectlist .owl-item.loading { min-height: 150px; background: url(../images/ajaxloader.gif) no-repeat center center } #projectlist .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .content-bottom-list-more { padding: 8px 15px; background: #eee; color: #888; } @media (min-width: 768px) { .servers-wap { display: none; } .dropdown-menu>li>a { padding: 10px 20px; } .navbar .nav > li.oen ul.two { margin: 0; } .navbar .nav > li.oen:hover ul.two { display: block; } } @media (max-width: 768px) { /* 手机菜单圆形按钮颜色 */ .plug-menu { background: #ccc; } /* 手机菜单弹出按钮颜色 */ .top_menu>li { background: #ccc; } /* 手机菜单平铺背景颜色 */ .foot_mp { background: #ccc; } .servers, .foot-share, .content_tools_box { display: none; } ul.nav-pills li.active { clear: both; display: block; } .content-bottom-list-more { display: block; width: 110px; margin-bottom: 30px; } } .navbar-right { padding: 0px; } .top-nav-right .dropdown-menu li { clear: both; width: 98%; } .lead { font-size: 1.0em; line-height: 1.8; } .index-1 ul, .index-6 ul { margin: 0px; padding: 0px; } .lead img { max-width: 100%; } .child { display: none; } .left-menu { line-height: 42px; border: 1px solid #ccc; border-radius: 5px; } .left-menu ul { margin: 0px; padding: 0px; } .left-menu ul li a { display: block; padding: 0px 0px 0px 40px; } .left-menu ul li.two { padding-left: 10px; } .left-menu ul li.three { padding-left: 10px; } .left-menu ul li.four { padding-left: 10px; } .left-menu ul li.five { padding-left: 10px; } .top-login { padding-left: 5px; } .btn-primary { background-color: #038A03; border-color: #038A03; } .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { z-index: 2; color: #fff; cursor: default; background-color: #038A03; border-color: #038A03; } .pagination>li>a, .pagination>li>span { color: #038A03; } .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover { color: #038A03; } #page strong { background: #038A03; } .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { color: #fff; background-color: #038A03; } #dialog_link { background: #038A03; } .list-group-item.active>.badge, .nav-pills>.active>a>.badge { color: #038A03; background-color: #fff; } .comm input.btn { background: #038A03; color: #fff; } .pages strong, .pages span { color: #FFFFFF; background: #038A03; } .btn-primary .badge { color: #038A03; background-color: #fff; } body { font-family: Microsoft Yahei; background: #212121; overflow-x: hidden; } ul, ol, li { list-style: none; } .blank5 { clear: both; height: 5px; } .blank10 { clear: both; height: 10px; } .blank20 { clear: both; height: 20px; } .blank30 { clear: both; height: 30px; } .img-auto { display: block; overflow: hidden; } .img-auto img { width: 100%; height: auto; margin: 0px auto; transition: 600ms; } .img-auto:hover 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); } #nav { position: relative; background: #fff; position: fixed; z-index: 999; left: 0; right: 0; top: 0; transition: 300ms; } #nav ul { margin: 0; padding: 0; } #nav.mini { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); } .nav-btn { display: none; width: 40px; position: absolute; right: 15px; top: 50%; margin-top: -17px; cursor: pointer; padding: 9px 10px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; border-color: #ddd; cursor: pointer; } .nav-btn span { display: block; height: 2px; border-radius: 1px; background-color: #888 } .nav-btn span+span { margin-top: 4px } .nav-btn.open { border-color: #ccc; background: #ccc; } .nav-btn.open span { background-color: #fff } .logo-box { float: left; height: 70px; padding: 15px 0; transition: 300ms; } .logo-box img { height: 100%; width: auto; } .nav1 { float: right; } .nav1 > ul > li { float: left; position: relative; padding: 0px 20px; } .nav1 > ul > li > a { display: inline-block; position: relative; height: 70px; line-height: 70px; color: #8e8e8e; background: #FFF; text-decoration: none; transition: 300ms; } .nav1 > ul > li > a > span { padding-left: .5em; } .nav1 > ul > li > a.on { color: #038A03 } .nav1 > ul > li:hover > a { color: #038A03 } .subnav { display: none; background: #fff; z-index: 9999; } .subnav > ul > li > { position: relative; } .subnav > ul > li > a { display: block; padding: 0px 30px; text-align: left; line-height: 50px; color: #666; background: #FFF; border-bottom: 1px solid rgba(0, 0, 0, .08); text-decoration: none; } .subnav > ul > li > a > span { line-height: 50px; } .subnav > ul > li > a:hover { background: #eee; color: #333 } @media screen and (min-width: 768px) { .subnav { position: absolute; left: 100%; top: 0; width: 180px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); } .subnav > ul > li { position: relative; } .subnav > ul > li > a > span.fa-angle-right { float: right; } .subnav > ul > li > a > span.fa-angle-down { display: none; } .nav1 > ul > li > a:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #038A03; opacity: 0; } .nav1 > ul > li > a.on:before, .nav1 > ul > li:hover > a:before { opacity: 1; } .nav2 { top: 100%; left: 0; } } @media screen and (min-width: 0) and (max-width: 767px) { .nav-btn { display: block; } .nav1 { display: none; float: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; } .nav1-oh { height: 315px; max-height: calc(100vh - 60px); overflow: auto; } .nav1 > ul > li { float: none; padding: 0; } .nav1 > ul > li > a.aa { display: block; height: 45px; line-height: 45px; padding: 0 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .nav1 > ul > li > a.aa:hover { background: #eee; } .nav3 ul li.tree a.cc { padding-left: 40px; } .nav4 ul li.four a.dd { padding-left: 50px; } .nav5 ul li.five a.ee { padding-left: 60px; } .subnav > ul > li > a > span.fa-angle-right { display: none; } .subnav > ul > li > a > span.fa-angle-down { padding-left: 10px; } } @media screen and (min-width: 768px) and (max-width: 991px) { .nav1 > ul > li { float: left; position: relative; padding: 0px 5px; } } .banner { } .title10 { text-align: center; margin-bottom: 40px; } .title10 h4 { color: #444; margin: 0; font-size: 26px } .title10 h4 a { color: #444 } .title10 p { font-size: 12px; color: #8F8F8F; line-height: 30px } .title10 ul { padding: 0; margin: 20px 0 } .title10 ul li { display: inline-block; border-right: 1px solid #EEE } .title10 ul li a { color: #616161; margin-right: 2px; display: inline-block; transition: all .3s ease-out 0s; padding: 5px 20px } .title10 ul li a:hover, .title10 ul li.active a { background: #038A03; color: #fff } .index { position: relative; z-index: 2; background: #fff; } .seciton1 { padding: 80px 0; background: #F2F2F2; } .s1-item { margin: 20px 0; } .s1-item a { display: block; position: relative; overflow: hidden; text-decoration: none; } .s1-img { height: 120px; width: 120px; margin: 0 auto; text-align: center; } .s1-img img { max-width: 100%; height: auto; } .s1-text h4 { text-align: center; color: #595959; font-size: 16px; height: 40px; line-height: 40px; transition: all ease-out .2s; font-weight: 400 } .s1-item:hover .s1-text h4 { color: #038A03 } .s1-text h4:after { content: ""; display: block; background-color: #DADADA; width: 98px; height: 1px; position: absolute; left: 35%; font-size: 12px; transition: all .6s ease 0s } .s1-item:hover .s1-text h4:after { background-color: #DADADA; width: 20px; left: 47.2% } .s1-text span { display: block; width: 40px; height: 40px; margin: 0 auto; font-size: 12px; border-radius: 50%; text-align: center; line-height: 40px; transition: all .6s ease 0s } .s1-item:hover span { background: #fff; background-color: #fff; color: #9f9f9f; box-shadow: 0 2px 6px rgba(0,0,0,.1) } .s1-text p { text-align: center; color: #848484; font-size: 13px; line-height: 24px; height: 50px; overflow: hidden; margin-top: 10px } .section2 { padding: 80px 0; } .s2-item { margin: 20px 0; } .s2-item a { display: block; position: relative; text-decoration: none; overflow: hidden; } .s2-img { display: block; overflow: hidden; } .s2-img img { width: 100%; height: auto; margin: 0px auto; transition: 600ms; } .s2-item:hover .s2-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); } .s2-text { padding-bottom: 15px } .s2-text h4 { margin-top: 24px; height: 24px; margin-bottom: 0; font-size: 14px; transition: all .6s cubic-bezier(.215, .61, .355, 1) 0s; color: #666; text-align: left; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .s2-item:hover .s2-text h4 { color: #2A9C2A; } .s2-text p { color: #999; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .s2-text:before { content: ''; width: 0; height: 2px; background: #038A03; transition: all .6s cubic-bezier(.215, .61, .355, 1) 0s; display: block; position: absolute; left: 0; bottom: 0; z-index: 2 } .s2-text::after { content: ''; height: 1px; background: #e3e3e3; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 2 } .s2-item:hover .s2-text:before { width: 100% } .index-more { color: #9f9f9f; display: block; font-size: 14px; height: 50px; line-height: 50px; text-indent: 0; transition: all .3s ease-out 0s; width: 300px; max-width: 100%; margin: 40px auto } .index-more a { display: block; position: relative; z-index: 1; text-align: center; text-transform: uppercase; color: #999; border: 1px solid #dfdfdf } .index-more a:before { position: absolute; left: 0; top: 0; z-index: -1; height: 100%; width: 0; content: ""; display: block; transition: all .3s ease-out 0s } .index-more a:hover { color: #fff; border: 1px solid #2A9C2A } .index-more a:hover:before { width: 100%; background: #2A9C2A } .section3 { border-top: 1px solid #eee; padding: 80px 0 0; } .s3-text { margin: 0 auto; text-align: center; font-size: 12px; max-width: 700px; color: #848484; line-height: 24px; overflow: hidden } .s3-more a { display: block; width: 160px; height: 34px; margin: 50px auto 60px; border: 1px solid #ccc; position: relative; transition: all .5s ease 0s; text-indent: -9999px; } .s3-more a:before { content: ""; display: block; width: 160px; height: 32px; line-height: 32px; background: url(../images/jiantou.png) no-repeat 32px -97px; transition: all .3s ease-out 0s } .s3-more a:hover:before { background: url(../images/jiantou.png) no-repeat 32px -126px } .s3-more a:after { content: ""; display: block; height: 32px; width: 160px; position: absolute; left: 0; top: 0; opacity: 0; transition: all .3s ease-out 0s; border: 3px solid #2A9C2A } .s3-more a:hover:after { opacity: 1; transform: scale(1.03, 1.1); left: -1px } .s3-img-bg { background: #149E13; position: relative; margin-top: 100px; margin-bottom: -30px } .s3-img { max-width: 700px; margin: 20px auto 0; padding: 20px; border: 1px solid rgba(255,255,255,.3); transition: .6s; -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.3); -moz-box-shadow: 1px 1px 5px rgba(0,0,0,.3); box-shadow: 1px 1px 5px rgba(0,0,0,.3) } .s3-img img { width: 100%; height: auto } .s3-img0 { position: absolute; top: -50%; width: 100% } .s3-img2 { opacity: 0 } .s3-text-bg { background: #149E13; padding: 0 0 50px } .s3-text-bg .container { max-width: 700px } .s3-item { margin: 20px 0; color: #fff; position: relative } .s3-item a { text-decoration: none; display: block; text-align: center } .s3-item h4 { font-size: 56px; color: #FFF } .s3-item p { font-size: 12px; color: #fff; color: rgba(255,255,255,.5) } @media screen and (min-width:768px) { .col-sm-4+.col-sm-4 .s3-item:before { content: ""; display: block; height: 88px; position: absolute; left: -8px; top: 0; width: 1px; background: rgba(255,255,255,.5) } } .section4 { padding: 100px 0; background: #F6F6F6; border-bottom: 1px solid #e7e7e7 } /* 外部层 */ #owl-demo4 { position: relative; padding: 0 60px; margin: 0px } #owl-demo4 .owl-stage-outer { overflow: hidden; position: relative; z-index: 10; } #owl-demo4 * { box-sizing: border-box; } /* 导航层 */ #owl-demo4 .owl-item { float: left; } #owl-demo4 .owl-controls { margin-top: 0px; text-align: center; } /* 左右按钮 */ #owl-demo4 .owl-controls .owl-nav { } #owl-demo4 .owl-controls .owl-nav [class*=owl-] { position: absolute; width: 40px; height: 20px; display: block; cursor: pointer; text-indent: -99999px; overflow: hidden; top: 50%; margin-top: -10px; transition: .3s } #owl-demo4 .owl-controls .owl-nav .owl-prev { left: 0; background: url(../images/jiantou.png)no-repeat 0px -50px; } #owl-demo4 .owl-controls .owl-nav .owl-next { right: 0; background: url(../images/jiantou.png)no-repeat -37px -50px; } #owl-demo4 .owl-controls .owl-nav .owl-prev:hover { background: url(../images/jiantou.png)no-repeat 0px -70px; } #owl-demo4 .owl-controls .owl-nav .owl-next:hover { background: url(../images/jiantou.png)no-repeat -37px -70px; } .s4-item { } .s4-item a { text-decoration: none; position: relative; overflow: hidden; display: block } .s4-item p { line-height: 20px; font-size: 12px; overflow: hidden; height: 40px; color: #a5a5a5 } .s4-img { height: 120px; width: 120px; float: left; margin-right: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50% } .s4-img img { height: 100%; width: 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50% } .s4-text { overflow: hidden; padding-top: 30px } .s4-text h4 { height: 32px; line-height: 32px; margin: 0; color: #333; position: relative; transition: .6s; font-size: 24px } .s4-text span { color: #a5a5a5; display: block; margin-top: 8px; font-size: 12px; line-height: 20px; height: 40px; overflow: hidden; transition: .6s } .s4-text h4:before { content: ""; display: block; position: absolute; left: -60px; top: 50%; margin-top: -1px; height: 3px; width: 60px; background: #2A9C2A; transition: .6s } .s4-item:hover .s4-text h4 { padding-left: 70px } .s4-item:hover .s4-text h4:before { left: 0 } .s4-item:hover .s4-text span { padding-left: 70px } @media screen and (min-width:320px) and (max-width:479px) { .s4-item p { position: relative; top: 200px } .s4-item hr { display: none } .s4-img { margin: 20px auto 0; float: none; display: block; position: relative; top: -70px } .s4-text { text-align: center; padding-top: 10px; position: relative; top: -70px } } .section5 { padding: 80px 0 40px; } .s5-item { margin: 20px 0; position: relative; top: 0; transition: 600ms; } .s5-item:hover { top: -20px; } .s5-item a { display: block; position: relative; text-decoration: none; overflow: hidden; } .s5-img { display: block; overflow: hidden } .s5-img img { width: 100%; height: auto; margin: 0 auto; transition: .6s } .s5-text { padding-top: 20px } .s5-text h4 { margin: 0; color: #333; font-size: 16px; height: 20px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .s5-item:hover .s5-text h4 { color: #038A03 } .s5-text span { color: #8a8a8a; display: block; font-size: 13px } .s5-text p { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; font-size: 12px; color: #777; line-height: 20px; height: 60px; overflow: hidden } .section6 { padding: 20px 0 60px; } /* 外部层 */ #owl-demo6 { position: relative; padding: 0 60px; margin: 0px } #owl-demo6 .owl-stage-outer { overflow: hidden; position: relative; z-index: 10; } #owl-demo6 * { box-sizing: border-box; } /* 导航层 */ #owl-demo6 .owl-item { float: left; } #owl-demo6 .owl-controls { margin-top: 0px; text-align: center; } /* 左右按钮 */ #owl-demo6 .owl-controls .owl-nav { } #owl-demo6 .owl-controls .owl-nav [class*=owl-] { position: absolute; width: 40px; height: 20px; display: block; cursor: pointer; text-indent: -99999px; overflow: hidden; top: 50%; margin-top: -10px; transition: .3s } #owl-demo6 .owl-controls .owl-nav .owl-prev { left: 0; background: url(../images/jiantou.png)no-repeat 0px -50px; } #owl-demo6 .owl-controls .owl-nav .owl-next { right: 0; background: url(../images/jiantou.png)no-repeat -37px -50px; } #owl-demo6 .owl-controls .owl-nav .owl-prev:hover { background: url(../images/jiantou.png)no-repeat 0px -70px; } #owl-demo6 .owl-controls .owl-nav .owl-next:hover { background: url(../images/jiantou.png)no-repeat -37px -70px; } .s6-item { } .s6-item img { width: 100%; height: auto; } .section7 { padding: 60px 0; background: #F0F0F0 } .section7 h4 { font-size: 16px; line-height: 24px; margin-bottom: 25px; font-weight: 100; color: #666 } .section7 p { line-height: 24px; font-size: 13px; color: #989898 } .section7 p span { margin-right: 30px } .fenxiang a { float: left; margin: 20px 5px; display: block; height: 30px; width: 30px; line-height: 30px; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #fff; background: #aaa; cursor: pointer; } .fenxiang a:hover { background: #058B05; color: #FFF; } #outer-w { width: 100%; height: 100%; display: none; position: fixed; left: 0; top: 0; z-index: 99999; } #outer { height: 100%; ; position: relative; width: 100%; } #outer[id] { display: table; position: static; } #middle { position: absolute; top: 50%; } /* for explorer only*/ #middle[id] { display: table-cell; vertical-align: middle; position: static; } #inner { position: relative; top: -50%; width: 300px; padding: 30px 0; margin: 0 auto; text-align: center; } /* for explorer only */ *+html #outer[id] { position: relative; } *+html #middle[id] { position: absolute; } #bg-black { position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0,0,0,.6); } .inner { position: relative; z-index: 2; background: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #close { position: absolute; right: -10px; top: -10px; height: 30px; width: 30px; cursor: pointer; background: #FFF url(../images/del_on.gif) left top no-repeat; border: 1px solid #CCC; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #close:hover { background: #DDD url(../images/del_hover.gif) -1px -1px no-repeat; } .foot { background: #F0F0F0; font-size: 12px; } .foot p { border-top: 1px solid #e4e4e4; margin: 0; padding: 20px 0; line-height: 20px; } .foot p { color: #6c6e75; } .foot p a { color: #6c6e75; } .box2 { padding: 80px 0; } #banner2 { width: 100%; height: 380px; position: relative } #banner2 div { background-color: #39383E; background-repeat: no-repeat; background-position: center; background-size: cover; position: fixed; width: 100%; height: 380px; animation: mymove 20s } @keyframes mymove { 0% { transform:scale(1.2, 1.2) } 100% { transform:scale(1, 1) } } .s8-item { margin: 20px 0; position: relative; top: 0; transition: 600ms; } .s8-item:hover { top: -20px; } .s8-item a { display: block; position: relative; text-decoration: none; overflow: hidden; } .s8-img { display: block; overflow: hidden } .s8-img img { width: 100%; height: auto; margin: 0 auto; transition: .6s } .s8-text { padding-top: 20px } .s8-text h4 { margin: 0; color: #5a5a5a; font-size: 16px; height: 20px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .s8-item:hover .s8-text h4 { color: #333 } .s8-text p { font-size: 12px; color: #9a9a9a; line-height: 20px; height: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .s8-text .more { line-height: 20px; color: #6B6B6B; } .s8-text .more span { opacity: 0; transition: 600ms; } .s8-item:hover .s8-text .more span { opacity: 1; margin-left: 10px; } .s8-text .more:after { content: ""; display: block; height: 1px; width: 36px; margin-top: 5px; background: #ccc; transition: 600ms; } .s8-item:hover .s8-text .more:after { width: 100%; background: #eee; } .fazhan { border-top: 1px dotted rgb(211, 211, 211); ; } .fazhan-item { padding: 19px 0; line-height: 22px; border-bottom: 1px dotted rgb(211, 211, 211); vertical-align: middle; } .fazhan-date { font-size: 18px; float: left; } .fazhan-ico { float: left; color: rgb(165, 165, 165); line-height: 24px; font-size: 13px; word-wrap: break-word; vertical-align: middle; padding: 0 20px; word-break: normal; font: 12px Arial, "微软雅黑"; } .fazhan-ico i { position: relative; top: 1px; } .fazhan-item p { margin: 0; overflow: hidden; color: #6a6a6a; } .row img { width: 100%; }