.subcenter{ width: 90%; margin: 0 auto; position: relative; padding: 30px 0; /* -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; */ } .subcenter:after, .zaix_box .zaix_boxl ul.list:after, .zaix_box .zaix_boxl ul.list li:after, .zaix_box:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .zaix_box{ width: 100%; position: relative; } .zaix_box .zaix_boxl{ float: left; width: 48%; position: relative; } .zaix_box div.title{ width: 100%; padding-bottom: 20px; border-bottom: 1px solid #eeeeee; margin: 0 0 30px 0; } .zaix_box div.title h1{ font-size: 16px; color: #333333; font-weight: normal; line-height: 1em; padding-left: 15px; border-left: 2px solid #d12519; } .zaix_box .zaix_boxl ul.list{ width: 100%; } .zaix_box .zaix_boxl li{ width: 100%; position: relative; min-height: 50px; margin: 0 0 30px 0; padding: 0 0 0 100px; } .zaix_box .zaix_boxl li span{ display: block; width: 90px; height: 50px; line-height: 50px; font-size: 12px; color: #333333; position: absolute; left: 0; top: 0; text-align: right; } .zaix_box .zaix_boxl li input[type="text"]{ display: block; width: 100%; height: 50px; border: none; background: #eeeeee; outline: none; border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 1px solid #eeeeee; padding: 0 10px; -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; } .zaix_box .zaix_boxl li textarea{ display: block; width: 100%; height: 240px; border: none; background: #eeeeee; border: 1px solid #eeeeee; outline: none; resize: none; border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 10px; -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; } .zaix_box .zaix_boxl li input[type="text"]:focus, .zaix_box .zaix_boxl li textarea:focus{ background: #fff; border: 1px solid #ddd; box-shadow: 0 0 5px #ccc; } .zaix_box .zaix_boxl li a{ display: block; width: 130px; height: 50px; background: #bd2315; text-align: center; line-height: 50px; font-size: 16px; color: #fff; border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; } .zaix_box .zaix_boxl li a:hover{ background: #333; color: #fff; } /*right*/ .zaix_box .zaix_boxr{ float: right; width: 48%; position: relative; } .zaix_box .zaix_boxr:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .zaix_box .zaix_boxr .map{ width: 55%; height: 480px; position: relative; overflow: hidden; float: left; background: #ededed; border: 2px solid #ededed; display: none; } .zaix_box .zaix_boxr .right{ float: right; width: 100%; height: 480px; } .zaix_box .zaix_boxr .right h1{ font-size: 15px; color: #333333; height: 50px; line-height: 50px; font-weight: normal; background: url(../images/b15.png) no-repeat; background-position: left 3px; background-size: 46px 35px; -webkit-background-size: 46px 35px; padding: 0 0 0 60px; border-bottom: 1px solid #ededed; } .zaix_box .zaix_boxr .right ul{ width: 100%; padding-top: 30px; } .zaix_box .zaix_boxr .right ul li{ width: 100%; position: relative; } .zaix_box .zaix_boxr .right ul li.p1{ padding: 0 0 0 111px; } .zaix_box .zaix_boxr .right ul li.p2{ padding: 0 0 0 115px; } .zaix_box .zaix_boxr .right ul li.p3{ padding: 0 0 0 144px; } .zaix_box .zaix_boxr .right ul li.p4{ padding: 0 0 0 73px; } .zaix_box .zaix_boxr .right ul li.p5{ padding: 0 0 0 79px; } .zaix_box .zaix_boxr .right ul li.p6{ padding: 0 0 0 111px; } .zaix_box .zaix_boxr .right ul li:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .zaix_box .zaix_boxr .right ul li p{ font-size: 16px; color: #333333; width: 100%; line-height: 30px; height: 60px; overflow: hidden; position: absolute; left: 35px; top: 0; } .zaix_box .zaix_boxr .right ul li span{ font-size: 16px; color: #333333; width: 100%; line-height: 30px; height: 60px; display: block; overflow: hidden; text-overflow: ellipsis; -o-text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .zaix_box .zaix_boxr .right ul li i{ width: 30px; height: 30px; position: absolute; left: 0; top: 0; background-image: url(../images/b16.png); background-repeat: no-repeat; background-size: 30px 150px; -webkit-background-size: 30px 150px; } .zaix_box .zaix_boxr .right ul li.p1 i{background-position: 0 0} .zaix_box .zaix_boxr .right ul li.p2 i{background-position: 0 -30px} .zaix_box .zaix_boxr .right ul li.p3 i{background-position: 0 -60px} .zaix_box .zaix_boxr .right ul li.p4 i{background-position: 0 -60px} .zaix_box .zaix_boxr .right ul li.p5 i{background-position: 0 -90px} .zaix_box .zaix_boxr .right ul li.p6 i{background-position: 0 -120px} /*pc*/ @media screen and (min-width: 960px) and (max-width: 1400px){ .zaix_box .zaix_boxl{ width: 52%; } .zaix_box .zaix_boxr{ width: 45%; } .zaix_box .zaix_boxr .map{ display: none; } .zaix_box .zaix_boxr .right{ width: 100%; } } /*ipad*/ @media screen and (min-width: 769px) and (max-width: 960px){ .subcenter{ width: 96%; } .zaix_box .zaix_boxl, .zaix_box .zaix_boxr{ width: 100%; } } @media screen and (max-width: 968px){ .subcenter{ width: 96%; } .zaix_box .zaix_boxl, .zaix_box .zaix_boxr{ width: 100%; } .zaix_box .zaix_boxr .map, .zaix_box .zaix_boxr .right{ width: 100%; } .zaix_box .zaix_boxr .right{ /*margin: 30px 0 0 0;*/ } }