.inner_cont {font-size: 14px; color: #454545; width: calc(100% - 300px); float: right;} .inner_cont img{max-width: 100%;} .inner_left{width: 250px; float: left;} .content {padding:60px 0 40px 0;position: relative;min-height: 400px;} .sub-banner {height:338px;margin-top:120px;} @media only screen and (max-width: 767px) { .sub-banner {height: 150px;margin-top:0px;} } .breadcrumb-bar {height: 50px; line-height: 50px;text-align: right; margin-bottom:20px; overflow: hidden;} .breadcrumb-bar h2{float: left;color: #333;font: 700 36px/50px microsoft yahei;} .breadcrumb-bar .fa{color: #3b8d85;} .breadcrumb-bar a:last-child{color: #3b8d85;} .innertit{margin: 50px 0 80px 0;} .innertit h2{color: #333;font: 700 36px/50px microsoft yahei;margin-bottom: 10px;} .innertit p{color: #666;font: 300 16px/30px microsoft yahei;} /* ========================================================================== about ========================================================================== */ .innerabout01{background: url(../images/aboutbg01.jpg) center top no-repeat;padding:10px 0;} .innerabout01 img{max-width: 100%;} .innertit01{background: url(../images/tit.png) left bottom no-repeat;padding-bottom: 30px;} .innertit01 h3{font: 700 36px/50px microsoft yahei;} .innerabout01 .mode{font: 300 16px/36px microsoft yahei;margin-top: 20px;} .innerabout02{padding:60px 0;} .innerabout02 img{max-width: 100%;margin-top: 20px;} @media only screen and (max-width:767px) { .innerabout01{padding:20px 0;} .innerabout02{padding:0 0 20px 0;} } .innerabout03{padding:0 0 60px 0;} .hzzjgbox{margin-top: 40px;} .hzzjgbox .left{width:290px;float: left;} .zjgmenu{width:100%;} .zjgmenu li{width: 100%;height: 32px;margin-bottom:5px; line-height: 32px;} .zjgmenu li a{width: 250px;height: 32px;display: block; background: #3b8d85;text-indent: 10px;color: #fff;margin-left: 40px;text-align: right;} .zjgmenu li img{ display:none;} .zjgmenu li.active a{width: 290px;margin-left: 0;background: #9bc83a;} .zjgmenu li.active img { display:inline-block;} .hzzjgbox .right{width: calc(100% - 380px); float: right;} .hzzjgbox .right img{max-width: 100%;margin-top: 20px;} @media only screen and (max-width:767px) { .hzzjgbox .left{width:290px;float: none;} .hzzjgbox .right{width:100%; float: none; } } .innerabout04{padding:0 0 60px 0;} .ppwhbox{padding-top: 20px;} .ppwhbox .mode{width: 100%;height: 256px;overflow: hidden;margin-top: 20px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } .ppwhbox .mode .txtarea{width: 390px;height: 256px;overflow: hidden;color: #fff; text-align: center;} .ppwhbox .mode .txtarea h3{font: 300 36px/36px microsoft yahei;margin: 60px 0 20px 0;} .ppwhbox .mode .txtarea .desc{width: 70%;margin:0 auto;font:500 16px/24px microsoft yahei; } .ppwhbox .mode .pic{width: calc(100% - 400px);;height: 256px;overflow: hidden;} .ppwhbox .mode .pic img{height: 256px;transition: transform 2s;} .ppwhbox .mode .pic:hover img{ transform: scale(1.1);} .ppwhbox .mode01{background: #3b8d85;} .ppwhbox .mode01 .txtarea{float: left;} .ppwhbox .mode01 .pic{float: right;} .ppwhbox .mode02{background: #59bca7;} .ppwhbox .mode02 .txtarea{float: right;} .ppwhbox .mode02 .pic{float: left;} .ppwhbox .mode03{background: #9bc83a;} .ppwhbox .mode03 .txtarea{float: left;} .ppwhbox .mode03 .pic{float: right;} .qxqiyzs li.active{height: 200px;} @media only screen and (max-width:767px) { .ppwhbox .mode .txtarea{width: 100%;} } .down_table td{height:50px; line-height: 50px;border-bottom: 1px solid #e3e3e3;} .down_table td a{color:#9bc83a;} .down_table td a:hover{text-decoration: underline;} .down_table th{height:50px; line-height: 50px; font-size:15px;color:#666;background-color: #f2f2f2; border-bottom:1px solid #d7d7d7; } .down_table{font: 300 13px/50px microsoft yahei;} .down_table th .fa{margin-right: 10px;} @media only screen and (max-width:767px) { .down_table .mohid{display: none;} } .feedbacttit {color: #666;font: 700 18px/32px microsoft yahei;margin: 50px 0;} .feedbacttit span{color: #9bc83a;font-weight: bold;} .feedback{width: calc(100% - 300px); float: left;} .feedback input{width: calc(50% - 80px); float: left;margin-right:20px;} .feedback .mod01 input,.feedback textarea{padding: 12px 20px; font-size: 14px; font-family:microsoft yahei; margin-bottom: 20px;border:1px solid #e4e4e4; } .feedback textarea{height: 200px;width: calc(100% - 98px);} .feedback .ui-btn{display: inline; cursor: pointer;text-align: center; padding:15px 0;width:200px;font-size:14px; font-family:microsoft yahei; color: #fff; text-align: center; border:0 none; background: #3b8d85;} .feedback .mod02{text-align: center;} .contact .pic{width:275px; float: right;} .feedback .ui-btn02{background: #666;} @media only screen and (max-width:767px) { .feedbacttit {color: #666;font: 300 16px/24px microsoft yahei;margin:0 0 20px 0;} .feedback{width: 100%;float: none;} .feedback .mod01 input{width: calc(100% - 42px);float: none;margin-right:0;} .feedback textarea{width: calc(100% - 42px);} .feedback .innertit{margin: 10px 0 30px 0;} .feedback .ui-btn{width:130px;} .contact .pic{display: none;} } /* ========================================================================== careers ========================================================================== */ .careertit{text-align: center;font: 700 36px/50px microsoft yahei;margin:30px 0;} .careers_list li{width: 33.3%; overflow: hidden; float: left;margin-bottom: 20px;} .careers_list li .warp{margin-right: 10px;border:1px solid #e4e9ee;padding:30px;height: 220px; background:#ffffff; background-image: -webkit-linear-gradient(top,#ffffff 0%,#eff3f7 100%); background-image: -moz-linear-gradient(top,#ffffff 0%,#eff3f7 100%); background-image: linear-gradient(top,#ffffff 0%,#eff3f7 100%); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, EndColorStr='#ffffff', StartColorStr='#eff3f7'); } .careers_list li h3{font:700 24px/30px microsoft yahei; width: 100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:10px;} .careers_list li .line{background: #d4d4d4;width: 65px; height: 1px;margin-bottom: 10px;} .careers_list li .desc{font: 15px/30px microsoft yahei;color: #333;height: 120px; overflow: hidden;margin-bottom: 10px;} .careerbox .tit{font:700 24px/30px microsoft yahei;color: #6ab12e;border-bottom: 1px solid #b0b0b0;margin-bottom: 20px;padding-bottom: 20px;} @media only screen and (max-width:767px) { .careers_list li{width:100%;} .careers_list li .warp{margin-right: 0;} } .ppwhbox .mode{width: 100%;height: 256px;overflow: hidden;margin-top: 20px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } .rclnbox{width: 100%;height: 460px; background: #3b8d85;} .rclnbox .txtarea{width:55%;overflow: hidden;color: #fff;float: right;} .rclnbox .txtarea h3{font: 700 20px/24px microsoft yahei;margin: 20px 0;} .rclnbox .txtarea .desc{font:500 14px/36px microsoft yahei; } .rclnbox .txtarea .warp{padding:40px;} .rclnbox .pic{width:45%;height: 460px;overflow: hidden;float: left;} .rclnbox .pic img{height: 460px;transition: transform 2s;} .rclnbox .pic:hover img{ transform: scale(1.1);} @media only screen and (max-width:767px) { .rclnbox{width: 100%;height: auto;} .rclnbox .pic{width:100%;height: auto;float: none;} .rclnbox .pic img{height: auto;width: 100%;} .rclnbox .txtarea{width:100%;float: none;} .rclnbox .txtarea .warp{padding:20px;} .rclnbox .txtarea .desc{font:500 14px/24px microsoft yahei; } } .career_more a{width: 150px; height: 40px; margin: 30px auto 0 auto; background: #fff; border:1px solid #333; display: block; text-align: center;line-height: 40px;} .innerkjyf01{background: #f7f7f7;padding:60px 0;} .innerkjyf01 img{max-width: 100%;} .yftxmsbox{font:300 14px/32px microsoft yahei; } .yftxmsbox img{max-width: 100%;} .kyhz_list li{width:33.3%;float: left;margin-bottom: 20px;border-bottom: 1px solid #539a93;} .kyhz_list li .warp{padding-right: 10px;} .kyhz_list li .pic{width: 100%;height: 255px;overflow: hidden;background: #9bc83a;} .kyhz_list li .pic img{width: 100%;height: 100%;} .kyhz_list li .title{width: 100%;height: 70px;color: #539a93;} .kyhz_list li .title h3{padding-top: 15px;} .kyhz_list li .titen span{width: 9px; height: 16px;display: block;float: right;background:url(../images/arr07.png) no-repeat center ;margin-right: 50px;} @media only screen and (max-width:767px) { .kyhz_list li{width:100%;float: none;} } /* login */ .login_con{background: url(../images/loginbg.jpg) center top no-repeat;padding-bottom: 60px; padding-top:120px; } .login_con .breadcrumb-bar{ text-align: left;margin-bottom: 50px; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99FFFFFF', endColorstr='#99FFFFFF');background:rgba(255,255,255,0.6); } .loginmenu {text-align: center;} .loginmenu a{display: inline-block;font: 300 16px/48px microsoft yahei; color: #fff;margin:0 5px;} .loginmode01{padding-top:80px;padding-bottom: 40px; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CCFFFFFF', endColorstr='#CCFFFFFF');background:rgba(255,255,255,0.8); } .loginbox{width: 45%; background: #3b8d85; color: #fff; max-width: 480px;margin:0 auto;padding:30px;} .loginbox a{color: #fff;} .loginbox a:hover{text-decoration: underline;} .loginbox .ui-btn {width:200px; height: 38px; background: #9bc83a; color: #fff; margin-right: 20px; border: 1px solid #9bc83a; font: 300 16px microsoft yahei;} .loginbox .field { margin-bottom: 20px; line-height: 31px; padding-left: 98px; position: relative; } .loginbox .ui-label { float: left; text-align: right; width: 88px; margin-left: -98px;font-size: 14px; } .loginbox .ui-input{ border: 1px solid #ddd; padding: 6px 5px 6px 30px; line-height: 21px; height: 21px;width: calc(100% - 120px); } .ph-label { position: absolute; line-height: 31px; height: 31px; top: 1px; left: 110px; opacity: 1; } .ph-label .fa { line-height: 35px; font-size: 22px; color: #9a9a9a; } .ph-hide .ph-label { opacity: 0; visibility: hidden } .ph-focus .ph-label { color: #CCC; } @media only screen and (max-width: 767px) { .loginmode01{padding:0;} .login_con{margin-top:0;} .loginbox{float: none; width: 100%; margin:0 auto;padding:30px 0;} .loginmenu a{width: calc(50% - 20px); } .loginbox .ui-input{ width: calc(100% - 35px); } } /* reg */ .regbg{background: url(../images/regbg.jpg) center top no-repeat;background-size: cover;padding-top:120px; } .regmode01{padding-top: 80px; padding:40px; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CCFFFFFF', endColorstr='#CCFFFFFF');background:rgba(255,255,255,0.8); } .rightmode{width:354px; float: right; min-height: 600px; line-height: 600px; text-align:right;} .rightmode img{max-width: 100%;} .regbox{float: left; width: calc(100% - 400px);font-size:12px;} .ask{color: #e31210;} .regbox .mode01{margin-bottom: 20px;} .regbox .tit02{font: 300 24px/30px microsoft yahei;margin-bottom: 10px;color: #e31210;} .regbox p.ms{font: 300 16px/30px microsoft yahei;margin-bottom: 10px;} .regbox .ui-btn {width:100px; height: 38px; background: #d90f0d; color: #fff; margin-right: 20px; border: 1px solid #d90f0d; font: 300 16px microsoft yahei;} .regbox .ui-label {color: #333; font-size: 14px;display: block; margin-bottom: 10px;} .regbox .ui-input{ border: 1px solid #ddd; padding: 6px 10px; line-height: 21px; height: 21px;width: calc(100% - 270px); } @media only screen and (max-width:920px) { .rightmode{display: none;} .regbox{float: none; width: 100%; margin:0 auto;max-width: 80%} } @media only screen and (max-width:767px) { .regmode01{padding-top: 40px;} .regbox{max-width: 90%} .regbox .tips{display: block;margin-top: 10px;} .regbox .ui-input{ border: 1px solid #ddd; padding: 6px 10px; line-height: 21px; height: 21px;width: calc(100% - 25px);} } .regbg .breadcrumb-bar{ text-align: left;margin-bottom: 50px; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99FFFFFF', endColorstr='#99FFFFFF');background:rgba(255,255,255,0.6); } /**newsC**/ .newsctit{font: 600 30px/36px microsoft yahei;color: #000;margin-bottom: 30px;} .newsctit a{font: 300 14px/36px microsoft yahei;color: #666; float: right;} .newsctit a i{color: #d4100f;} .sectionnews01{padding:40px 0;} .newmode01 .pic{width:532px; height:411px;overflow: hidden;float: left;} .newmode01 .pic img{width:100%;height:100%;transition: transform 2s;} .newmode01 .pic:hover img{ transform: scale(1.1);} .newmode01 .hdlb{width: calc(100% - 560px); float: right;} .newslist04 li{margin-bottom: 18px;background: #f7f7f7;padding:20px; height:85px;} .newslist04 li .date{width:100px; height:80px;text-align: center; float: left;font: 300 14px/24px microsoft yahei;color: #848484;} .newslist04 li .date h2{font: 300 28px/48px microsoft yahei;color: #c7c7c7;} .newslist04 li .txtarea{width: calc(100% - 120px); float: right;} .newslist04 li .txtarea h3{font: 700 18px/30px microsoft yahei;width:100%;height: 30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .newslist04 li .txtarea h3 a{ color: #333333;} .newslist04 li .txtarea .desc{font: 300 14px/24px microsoft yahei;height:48px;overflow: hidden;} .newslist04 li:hover{background: #3b8d85;color: #fff;} .newslist04 li:hover .txtarea h3 a{ color: #fff;} .newslist04 li:hover .date{color: #fff;} .newslist04 li:hover .date h2{color: #fff;} @media only screen and (max-width: 920px) { .newmode01 .pic{width:100%;float: none;margin: 0 auto 20px auto; height: auto;max-width: 700px;} .newmode01 .hdlb{width:100%; float: none;} } .sectionnews02{padding:40px 0;background:#3b8d85;color: #fff; } .sectionnews02 .newsctit{color: #fff;} .sectionnews02 a{color: #fff;} .newmode02{margin-top: 50px;} .newmode02 li{width: 33.3%; float: left;margin-bottom: 10px;} .newmode02 li .warp{margin:0 15px; border-right: 1px dashed #fff;} .newmode02 li:last-child .warp {border-right: 0;} .newmode02 li .date{font: 300 14px/24px microsoft yahei;} .newmode02 li h3{font: 700 14px/30px microsoft yahei;width:100%;height: 30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .newmode02 li .desc{font: 300 12px/24px microsoft yahei;height:48px;overflow: hidden;margin:20px 0 10px 0;} @media only screen and (max-width: 767px) { .newmode02 li{width:100%;} .newmode02 li .warp{margin:0;border-right: 0;border-bottom: 1px dashed #fff;padding-bottom: 20px;} } .sectionnews03{padding:40px 0;} .newmode03 .pic{width:500px; height:380px;overflow: hidden;float: right;} .newmode03 .pic img{width:100%;height:100%;transition: transform 2s;} .newmode03 .pic:hover img{ transform: scale(1.1);} .newmode03 .xfhdleft{width: calc(100% - 530px); float: left;} .newslist03 li{width:100%;overflow: hidden; padding:25px 0; border-bottom: 1px dashed #e4e4e4;position: relative;} .newslist03 li .date{float: right;font-size: 12px; color: #848484; font-weight: normal;} .newslist03 li .txtarea{} .newslist03 li .txtarea h3{font: 700 18px/30px microsoft yahei; margin-bottom: 5px;height: 30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .newslist03 li .txtarea h3 a{ color: #333333;} .newslist03 li .txtarea .desc{font: 300 14px/24px microsoft yahei;height:48px;overflow: hidden;color: #6f6f6f;margin: 10px 0 0 0;} .newslist03 li .link{position: absolute;right: 0; top: 15px;} .newslist03 li .link .more{width: 41px;height: 41px;display: block; transition: background 0.5s;background: url(../images/inco06.png) left top no-repeat;} .newslist03 li:hover .link .more{background: url(../images/inco06.png) left bottom no-repeat;} .newslist03 li:hover {background: #3b8d85;} .newslist03 li:hover .txtarea .desc{color: #fff;} .newslist03 li:hover .txtarea a{color: #fff;} .newslist03 li:hover .txtarea h3{text-indent: 10px;} .newslist03 li:hover .date{color: #fff;margin-right: 5px;} @media only screen and (max-width:767px) { .newmode03 .pic{width:100%; height:auto;overflow: hidden;float: none;} .newmode03 .xfhdleft{width:100%; float: none;} } .newslist02 li{overflow: hidden;background: #f6f6f6;margin-bottom: 20px;} .newslist02 li .pic{width:515px; height: 340px;overflow: hidden;float: left;} .newslist02 li .pic img{width:100%; height: 100%; transition: transform 2s;} .newslist02 li:hover .pic img{ transform: scale(1.1);} .newslist02 li .txtarea{width: calc(100% - 540px); float: right;} .newslist02 li .txtarea .warp{margin:20px; background: #fff;padding:20px;height: 260px;} .newslist02 li .txtarea h3{font: 300 30px/35px microsoft yahei;color: #333;} .newslist02 li .txtarea h3 a{ color: #333333;} .newslist02 li .txtarea .date{font-size: 12px;color: #999;margin:20px 0 10px 0;} .newslist02 li .txtarea .desc{font: 300 14px/24px microsoft yahei;height:48px;overflow: hidden;color: #6f6f6f;margin: 10px 0 30px 0;} .newslist02 li .txtarea .more{padding:8px 30px; border:1px solid #666;color: #333; } /*.newslist02 li:hover{background: #3b8d85;}*/ .newslist02 li:hover .txtarea h3 a,.newslist02 li:hover .txtarea .date,.newslist02 li:hover .txtarea .desc{color: #3b8d85;} .newslist02 li:hover .txtarea .more{border:1px solid #3b8d85;color: #3b8d85; } @media only screen and (max-width:767px) { .newslist02 li .pic{width:100%; height: auto; float: none;margin:0 auto 20px auto; height: auto;max-width: 500px;} .newslist02 li .pic img{width:100%;} .newslist02 li .txtarea{width:100%; float: none;} .newslist02 li .txtarea .warp{padding:0;background: #f6f6f6;height: auto;} .newslist02 li .txtarea h3{font: 300 16px/24px microsoft yahei;color: #333;} } .newsh{width:100%;text-align: center; margin-top: 30px;} .newtitle {font: 18px/24px microsoft yahei;color:#666;} .newsh_cn {padding:20px 0;} .newsh_cn img{max-width: 90%;} .newsh_cn p{/*text-indent:20px;*/ font: 14px/24px microsoft yahei;margin-top: 15px;} .newsh .byline{height:50px;color:#999;line-height:50px;border-bottom:1px solid #e9e9e9;} .newsh .byline span{margin-right:20px;display: inline-block;} .newsh .byline .bdsharebuttonbox{display: inline-block;} .newsh .byline .bdshare-button-style0-16:after { display: inline-block;} .newsh .byline .bdshare-button-style0-16 a, .newsh .byline .bdshare-button-style0-16 .bds_more { float: left; line-height: 50px; height: 50px; margin:0; } .newsh .byline a{color: #999;} .toolbar{padding:30px 20px 0 20px; border-top:1px solid #d8d8d8; position:relative;font: 12px/24px microsoft yahei; margin-top:20px;} .fhshare{float: right;} .fhshare a{padding:8px 30px;border:1px solid #d8d8d8;color:#666;} .fhshare a:hover{border:1px solid #0160bd;color:#fff; background-color: #0160bd; text-decoration: none;} .fhshare .fa{margin-right:10px;} .toolbarleft{float: left;} @media only screen and (max-width:767px) { .toolbarleft{float: none;} .fhshare{float: none;margin-top:20px;} } .promenu{width:220px;float:left;border-top:1px solid #d1d1d1;border-bottom:1px solid #d1d1d1;height: 50px;margin-bottom: 30px;} .promenu a{width:100%;height: 50px;color: #666; display:block;font: 700 14px/50px microsoft yahei;border-bottom:1px solid #d1d1d1; text-indent: 30px; } .promenu a.active,.promenu a:hover{color: #3b8d85;} .pro_list{width: calc(100% - 250px); float: right;} .pro_list li{width:50%;float: left;margin-bottom: 20px;} .pro_list li .warp{padding-left:20px;} .pro_list li .pic{width: 100%;height:290px;overflow: hidden;background: #043530;position: relative;} .pro_list li .pic img{width: 100%;height: 100%;transition: transform 2s; } .pro_list li:hover .pic img{filter: alpha(opacity=40);opacity: 0.4;} .pro_list li .cover{width: 100%;height: 100%;position: absolute;left: 0; top:100%; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .pro_list li .cover .covercon{padding:20px;color: #fff;} .pro_list li:hover .cover{top: 0;} .pro_list li:hover .pic img{ transform: scale(1.1);} .pro_list li .title{width: 100%;height: 70px;color: #539a93;} .pro_list li .title h3{padding-top: 15px;} .pro_list li .titen span{width: 9px; height: 16px;display: block;float: right;background:url(../images/arr07.png) no-repeat center ;margin-right: 50px;} .innerpro{width: calc(100% - 250px); float: right;} .innerpro img{max-width: 100%;} @media only screen and (max-width:767px) { .promenu{display: none;filter: alpha(opacity=0);opacity: 0;height: 0;overflow: hidden;} .pro_list,.innerpro{width:100%; float: none;} .pro_list li{width:100%;float: none;} .pro_list li .pic {height: auto;} .breadcrumb-bar{text-align: left;} .pro_list li .warp{padding-left:0;} } .innerpro{width: calc(100% - 250px); float: right;} .innerpro img{max-width: 100%;} .contactleft{width: 48%;float: left;margin-bottom: 20px;} .contactmap{width: 48%;float: right;} @media only screen and (max-width:767px) { .contactleft,.contactmap{width: 100%;float: none;} } /* ========================================================================== Pagination ========================================================================== */ #Lb_pager { margin-top: 30px;margin-bottom:20px; text-align: center; font-family: microsoft yahei;} #Lb_pager .pages a { display: inline-block; margin: 0 3px; padding: 0 10px;color: #333; cursor: pointer; line-height: 30px; height: 30px;border:1px solid #e8e7e7; } #Lb_pager .pages .pgnext{padding: 0 15px; } #Lb_pager .pages .pgcurrent { color: #fff;cursor: default;background-color: #3b8d85;} #Lb_pager .pages .pgempty { cursor: not-allowed;} #Lb_pager .pages a:hover{color: #fff; text-decoration: none;background-color: #3b8d85;} /* ========================================================================== Sidebar ========================================================================== */ .sub_nav .wrapper{position: relative;} .overview { width: 180px; height: 120px; text-align: center; color: #fff; font: 700 30px/100px microsoft yahei; position: absolute;left: 0;background: #3b8d85 url(../images/line02.jpg) no-repeat center 85px; } .ln-menu{margin-left: 200px;} .sidenav{background:#fff;} .sidenav li { position: relative; display: inline-block; font-size: 18px; text-align: center; padding: 0 30px; } .sub_nav {background:#fff; border-bottom:1px solid #f0f0f0;} .sidenav li:hover, .sidenav .active {} .sidenav li a{background: url(../images/dian.jpg) no-repeat center bottom;position: relative;top:7px;} .sidenav li a:hover, .sidenav li.active a {background: url(../images/dian02.jpg) no-repeat center bottom;color: #3b8d85;font-weight: bold;} .sidenav li:last-of-type a {} .sidenav .level2{display: none;} .sidenav li .level2 a{ font-size: 14px;font-weight: normal;padding-top: 5px; padding-bottom:5px;} /* overview */ .ln-menu-link { display: block; font-size:16px; position: relative; *zoom: 1; font-family: microsoft yahei; line-height: 69px;} #ln-menustate { display: none; } @media only screen and (max-width: 767px) { .sidenav{background:#fff;} .sidenav li { width: 100%; text-align: center;border-right:0;padding:0; } .sidenav .level2{display: block;} .sub_nav {background:#fff;} .ln-menu-link .inco{width:30px; height: 30px;position: absolute;top: 10px; left: 30px;} .ln-menu-link { line-height: 20px; border-bottom: 1px solid #d7d7d7; border-right: none; border-left: none; border-top: none; margin: 0; } .overview.hidden { display: block; } .sidenav li.on { border-bottom: none; } .sub_nav li:first-child .ln-menu-link { border-left: none; } } .sidenav li.on a { color: #10924e; } } #ln-menustate { display: none; } .localnav { position: relative; top: 0; left: 0; width: 100%; z-index: 99; } .ln-wrapper { position: relative; top: 0; left: 0; width: 100%; height: auto; min-height: 100%; z-index: 1 } /* background */ .ln-background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(255, 255, 255, 0.95); -webkit-transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1); transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1) } /*.ln-background:after { background-color: rgba(153,153,153,0.4); content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; }*/ #ln-menustate:checked ~ .localnav .ln-background, #ln-menustate:target ~ .localnav .ln-background { background-color: rgba(255, 255, 255, 1); max-height: none; -webkit-transition: background-color 0.5s ease; transition: background-color 0.5s ease } #ln-menustate:checked ~ .localnav .ln-background:after, #ln-menustate:target ~ .localnav .ln-background:after { background-color: #d6d6d6 } .ln-content { margin: 0 auto; max-width: 1200px; position: relative; z-index: 2 } .ln-curtain { background: rgba(0, 0, 0, 0.3); opacity: 0; position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 9; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } #ln-menustate:checked ~ .localnav .ln-curtain, #ln-menustate:target ~ .localnav .ln-curtain { -webkit-transition: opacity 1s ease 0.1s; transition: opacity 1s ease 0.1s } .ln-actions { float: left; display: none; } .ln-action { float: left; margin-left: 24px } /* chevron */ .ln-menucta { cursor: pointer; display: block; margin-right: -11px; overflow: hidden; width: 40px; height: 48px; -webkit-tap-highlight-color: transparent; } .ln-menucta-chevron { display: block; position: relative; width: 100%; height: 100%; z-index: 1; -webkit-transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1); transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1); transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1), transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1); transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1), transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1), -ms-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1); -webkit-transform: translateY(10%); -ms-transform: translateY(10%); transform: translateY(10%) } .ln-menucta-chevron::before, .ln-menucta-chevron::after { content: ""; display: block; position: absolute; top: 50%; width: 12px; height: 1px; z-index: 1; -webkit-transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1); transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1); transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1), transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1); transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1), transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1), -ms-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1) } .ln-menucta-chevron::before, .ln-menucta-chevron::after { background: #333 } .ln-menucta-chevron::before { -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate(40deg) scaleY(1.5); -ms-transform: rotate(40deg) scaleY(1.5); transform: rotate(40deg) scaleY(1.5); right: 50% } .ln-menucta-chevron::after { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: rotate(-40deg) scaleY(1.5); -ms-transform: rotate(-40deg) scaleY(1.5); transform: rotate(-40deg) scaleY(1.5); left: 50% } #ln-menustate:checked ~ .localnav .ln-menucta-chevron, #ln-menustate:target ~ .localnav .ln-menucta-chevron { -webkit-transform: translateY(-10%); -ms-transform: translateY(-10%); transform: translateY(-10%) } #ln-menustate:checked ~ .localnav .ln-menucta-chevron::before, #ln-menustate:target ~ .localnav .ln-menucta-chevron::before { -webkit-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: rotate(-40deg) scaleY(1.5); -ms-transform: rotate(-40deg) scaleY(1.5); transform: rotate(-40deg) scaleY(1.5) } #ln-menustate:checked ~ .localnav .ln-menucta-chevron::after, #ln-menustate:target ~ .localnav .ln-menucta-chevron::after { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: rotate(40deg) scaleY(1.5); -ms-transform: rotate(40deg) scaleY(1.5); transform: rotate(40deg) scaleY(1.5) } .ln-menucta-anchor { display: none; position: absolute; top: 0; left: 0; width: 1px; height: 1px; z-index: 10 } .ln-menucta-anchor:focus { outline-offset: -6px; width: 100%; height: 100% } .ln-menucta-anchor-close { display: none } .ln-menucta-anchor-label { position: absolute; top: 0; left: 0; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0 } #ln-menustate:checked ~ .ln-menucta-anchor-open, #ln-menustate:target ~ .ln-menucta-anchor-open { display: none } #ln-menustate:checked ~ .ln-menucta-anchor-close, #ln-menustate:target ~ .ln-menucta-anchor-close { display: block } @media only screen and (max-width: 767px) { .content { position: relative; padding-top: 20px; } .col-main { margin: 0; } .col-left { float: left; width: 200px; margin-left: -100%; margin: 0; width: 100%; position: absolute; left: 0; top: 0; } .localnav { height: 48px } .overview { float: left; line-height: 48px; padding: 0; background: none; color: #333; } .sidenav { border-width: 0; } .ln-menu-link { border-bottom: 0 none; } .ln-background { min-height: 48px; -webkit-transition: background-color 0.5s ease 0.7s; transition: background-color 0.5s ease 0.7s } .ln-menu { line-height: 48px; padding-top: 0; width: 100% } .ln-menu-tray { overflow: hidden; pointer-events: none; visibility: hidden; width: 100%; max-height: 0; -webkit-transition: max-height 0.5s cubic-bezier(0.28, 0.11, 0.32, 1) 0.4s, visibility 0s linear 1s; transition: max-height 0.5s cubic-bezier(0.28, 0.11, 0.32, 1) 0.4s, visibility 0s linear 1s; } #ln-menustate:checked ~ .localnav .ln-menu-tray, #ln-menustate:target ~ .localnav .ln-menu-tray { max-height: 400px; max-height: -webkit-calc(100vh - 48px - 48px); max-height: calc(100vh - 48px - 48px); overflow-y: auto; -webkit-overflow-scrolling: touch; pointer-events: auto; visibility: visible; -webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s } #ln-menustate:checked ~ .localnav.ln-opening .ln-menu-tray, #ln-menustate:target ~ .localnav.ln-opening .ln-menu-tray { overflow-y: hidden } #ln-menustate:checked ~ .localnav.ln-sticking .ln-menu-tray, #ln-menustate:target ~ .localnav.ln-sticking .ln-menu-tray { max-height: -webkit-calc(100vh - 48px); max-height: calc(100vh - 48px) } .ln-curtain { -webkit-transition: opacity 1s ease 0.2s, width 0s ease 1.2s, height 0s ease 1.2s; transition: opacity 1s ease 0.2s, width 0s ease 1.2s, height 0s ease 1.2s } #ln-menustate:checked ~ .ln-curtain, #ln-menustate:target ~ .ln-curtain { opacity: 1; right: 0; bottom: 0; width: 100%; height: 100% } .ln-actions { display: block; margin-left: 0; padding: 0 16px; position: absolute; top: 0; right: 0; z-index: 1; left: 50% } .ln-action { margin-left: 16px } .ln-action-menucta { margin-left: -20px; position: absolute; left: 0; z-index: 1 } .ln-action-button { float: right; margin-left: 27px } .ln-content { padding: 0 20px; } .sidenav { opacity: 1; padding: 17px 10px 28px 10px; -webkit-transform: translate3d(0, -150px, 0); transform: translate3d(0, -150px, 0); -webkit-transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.2s, -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s; transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.2s, -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s; transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s, opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.2s; transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s, opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.2s, -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s } .sidenav .level2 li, .sidenav .level2 li a { line-height: 20px; } #ln-menustate:checked ~ .localnav .sidenav, #ln-menustate:target ~ .localnav .sidenav { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-delay: 0.2s, 0.4s; transition-delay: 0.2s, 0.4s } .ln-menu-item { display: block; line-height: 48px; margin-left: 0; width: 100%; padding:0; } .ln-menu-item:first-child .ln-menu-link { border-top: 0 } .ln-menu-item:nth-child(1) .ln-menu-link { -webkit-transition-delay: 0.07s; transition-delay: 0.07s } .ln-menu-item:nth-child(2) .ln-menu-link { -webkit-transition-delay: 0.14s; transition-delay: 0.14s } .ln-menu-item:nth-child(3) .ln-menu-link { -webkit-transition-delay: 0.21s; transition-delay: 0.21s } .ln-menu-item:nth-child(4) .ln-menu-link { -webkit-transition-delay: 0.28s; transition-delay: 0.28s } .ln-menu-item:nth-child(5) .ln-menu-link { -webkit-transition-delay: 0.35s; transition-delay: 0.35s } .ln-menu-item:nth-child(6) .ln-menu-link { -webkit-transition-delay: 0.42s; transition-delay: 0.42s } .ln-menu-item:nth-child(7) .ln-menu-link { -webkit-transition-delay: 0.49s; transition-delay: 0.49s } #ln-menustate:checked ~ .localnav .ln-menu-item:nth-child(1) .ln-menu-link, #ln-menustate:target ~ .ln-menu-item:nth-child(1) .ln-menu-link { -webkit-transition-delay: 0.56s; transition-delay: 0.56s } #ln-menustate:checked ~ .ln-menu-item:nth-child(2) .ln-menu-link, #ln-menustate:target ~ .ln-menu-item:nth-child(2) .ln-menu-link { -webkit-transition-delay: 0.49s; transition-delay: 0.49s } #ln-menustate:checked ~ .ln-menu-item:nth-child(3) .ln-menu-link, #ln-menustate:target ~ .ln-menu-item:nth-child(3) .ln-menu-link { -webkit-transition-delay: 0.42s; transition-delay: 0.42s } #ln-menustate:checked ~ .ln-menu-item:nth-child(4) .ln-menu-link, #ln-menustate:target ~ .ln-menu-item:nth-child(4) .ln-menu-link { -webkit-transition-delay: 0.35s; transition-delay: 0.35s } #ln-menustate:checked ~ .ln-menu-item:nth-child(5) .ln-menu-link, #ln-menustate:target ~ .ln-menu-item:nth-child(5) .ln-menu-link { -webkit-transition-delay: 0.28s; transition-delay: 0.28s } #ln-menustate:checked ~ .ln-menu-item:nth-child(6) .ln-menu-link, #ln-menustate:target ~ .ln-menu-item:nth-child(6) .ln-menu-link { -webkit-transition-delay: 0.21s; transition-delay: 0.21s } #ln-menustate:checked ~ .ln-menu-item:nth-child(7) .ln-menu-link, #ln-menustate:target ~ .ln-menu-item:nth-child(7) .ln-menu-link { -webkit-transition-delay: 0.14s; transition-delay: 0.14s } .ln-menu-link { border-top: 1px solid rgba(214, 214, 214, 0.5); display: block; padding-top: 14px; padding-bottom: 14px; opacity: 0; -webkit-transform: translate3d(0, -25px, 0); transform: translate3d(0, -25px, 0); -webkit-transition: 0.5s ease; transition: 0.5s ease; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform } #ln-menustate:checked ~ .localnav .ln-menu-link, #ln-menustate:target ~ .localnav .ln-menu-link { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .ln-menucta-anchor { display: block } } @media only screen and (max-width: 767px) and (orientation: landscape) { #ln-menustate:checked ~ .ln-menu-tray, #ln-menustate:target ~ .ln-menu-tray { max-height: 280px; max-height: -webkit-calc(100vh - 48px - 48px); max-height: calc(100vh - 48px - 48px) } } @media only screen and (max-width: 767px) { .ln-menu-link{ -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } .localnav {z-index: 99;} .overview { width: auto; height: auto; font-size: 24px;font-weight: normal;position: relative;} .ln-menu { margin-left: 0;} .sidenav li a { background-image: none;top:0;} .sidenav li a:hover, .sidenav li.active a { background-image: none;} }