company.scss

.company{
@extend .layout;
width:100%;

h3{
display: block;
margin: 20px 0;
text-align: left;
}
.company-content{
width:100%;
background: $gray-f7f;
min-height: 460px;

.detail-view {
position: relative;
width: 1200px;
min-height: 400px;
margin: 0 auto;
padding: 20px 100px;
background: $light;
}
.park-exhibition{
position: relative;
min-height: 400px;
width: 1200px;
margin: 0 auto;
background: $light;
padding: 0 100px 30px;
.banner{
height: 300px;
.swiper-container {
width: 100%;
height: 300px;
}
.swiper-slide {
background-position: center;
/*background-size: cover;*/
background-repeat:no-repeat;
}
}

.banner img{
width: 1000px;
height: 300px;
}
h3{
font-size:16px;
line-height:40px;
font-weight:400;
margin: 20px 0;
background:url(../img/icon-intro.png) no-repeat left center;
padding-left:35px;
border-bottom:solid 1px #ccc;
}
h4{
font-size:18px;
height:40px;
line-height:40px;
font-weight:400;
margin: 20px 0;
background:url(../img/icon-phone-big.png) left 12px no-repeat;
padding-left:35px;
border-bottom:solid 1px #ccc;
}
.contact p{
padding: 10px 0;
color: #666;
}
.btn-box {
padding: 30px 0;
@extend .text-center;
}
.btn-submit{
width: 140px;
height: 48px;
background: #2577FF;
text-align: center;
font-size: 16px;
color: #fff;
cursor: pointer;
border: 1px solid #2577FF;
border-radius: 4px;
}
.btn-loading{
width: 140px;
height: 48px;
background: #999;
text-align: center;
font-size: 16px;
color: #fff;
border: 1px solid #999;
border-radius: 4px;
}

.apply{
margin: 30px auto 0;
width: 1000px;
postion: relative;
border:solid 1px #C6C6C6;
border-radius:8px;
h4{
text-align: center;
background:none;
border-bottom: 0;
font-size: 18px;
font-weight: 100;
letter-spacing: 5px;
}
.fields{
margin: 20px 0 0 0;
width: 100%;
line-height: 40px;
color: #999;
@extend .clearfix;

label{
float: left;
width: 260px;
font-size: 16px;
@extend .text-right;
em{
color: red;
width: 20px;
}
}
.text{
float: left;
padding: 0 10px;
width: 520px;
height: 40px;
border: 1px solid #e3e3e3;
border-radius: 4px;
}
select{
float: left;
width: 520px;
height: 40px;
text-indent: 10px;
border: 1px solid #e3e3e3;
border-radius: 4px;
background: #fff
}
textarea{
float: left;
padding: 10px;
width: 520px;
height: 200px;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-sizing: border-box;
}

.explanPlate{
float: left;
width: 520px;
.itemlist{
float: left;
.checkbox{
float: left;
margin: 14px 5px 0 0;
}
}
}
.selectTime{
width: 520px;
height: 40px;
float: left;
position: relative;

.hd {
width: 520px;
height: 40px;
cursor:pointer;
}
}
.inputError{
border: 1px solid red;
}
}

.timedialog{
width: 360px;
overflow: hidden;
background: #fff;
text-align: center;
position: absolute;
border: 1px solid #eee;
left: 0;
top: 40px;
right: 0;
z-index: 99999;
padding: 10px;
.time-header{
position: relative;
margin: 10px auto;
height: 30px;
.title{
font-size: 16px;
}
.timer-close{
position: absolute;
right: 10px;
top: 0;
width: 15px;
height: 15px;
border-radius: 15px;
border: 1px solid #ccc;
color: #fff;
}
}
.time-content{
width: 100%;
overflow: hidden;
color: $gray-333;
.choosedate {
text-align: center;
line-height: 18px;
border-bottom: 1px solid #f0f0f0;
color: #9b9b9b;
span {
display: block;
font-size: 12px;
}
.lh {
line-height: 60px;
}
.weekday{
float: left;
width: 20%;
cursor: pointer;
position: relative;
height: 50px;
padding: 5px 0;
font-size: 14px;
border-top: 1px solid #CACACA;
border-bottom: 1px solid #CACACA;
text-align: center;
font-weight: bold;
background: url(../img/icon-line.png) no-repeat right center;
}
span{
display: block;
font-size: 12px;
font-weight: normal;
}
.triangle{
position: absolute;
top: 0;
right: 0;
border-top: 25px solid #20ADFF;
border-left: 25px solid transparent;
}
.today{
position: absolute;
top: 0;
right: 1px;
width: 20%;
color: #fff;
font-size: 10px;
}
.datechked {
color: #20ADFF;
background: #DAF3FF;
border: 1px solid #20ADFF;
}
}
.datarow {
cursor: pointer;
text-align: center;
float: left;
width: 33.3%;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #f0f0f0;
.check {
background-color: #eefbf0;
color: #fff;
}
.checked {
background-color: #20adff;
color: #fff;
}
}
.checked {
height: 50px;
background-color: #20adff;
color: #fff;
border-radius: 6px;
}
.cgray {
color: #afafaf;
}
.cblue {
color: #20adff !important;
}
}
}
.showtips{
color: red;
padding-left: 260px;
}

}
}

.function-service{
position: relative;
min-height: 400px;
width: 100%;
background:#F7F7F7;
.list-view{
.pic{
overflow:hidden;
img{
width:100%;
height:240px;
transform: scale(1);
transition: all 1s ease 0s;
-webkit-transform: scale(1);
-webkit-transform: all 1s ease 0s;
}
img:hover{
cursor:pointer;
transform: scale(1.2);
transition: all 1s ease 0s;
-webkit-transform: scale(1.2);
-webkit-transform: all 1s ease 0s;
}
}
.tit2{
margin:0 20px;
}
}

}
.knowledge-category {
overflow:hidden;
padding:34px 0 0 100px;
width:1200px;
margin:0 auto;
padding-top:100px;
@extend .clearfix;
background:$light;

li{
margin: 0 56px 114px 0;
width: 122px;
height: 112px;
float: left;
@extend .text-center;
a{
display: block;
width: 122px;
height: 112px;
padding-top: 120px;
background-repeat: no-repeat;
background-image: url(../img/icon-company-name.png);
&:nth-child(6n) {
margin-right: 0;
}

&.zhuanli {
background-position: -132px 0;
}
&.zhuanli:hover {
background-position: 8px 0;
color:#297AFF;
}

&.zhuce {
background-position: -408px 0;
}
&.zhuce:hover {
background-position: -268px 0;
color:#297AFF;
}

&.xuzhan {
background-position: -688px 0;
}
&.xuzhan:hover {
background-position: -548px 0;
color:#297AFF;
}

&.fushen {
background-position: -968px 0;
}
&.fushen:hover {
background-position: -828px 0;
color:#297AFF;
}

&.biangeng {
background-position: -1251px 0;
}
&.biangeng:hover {
background-position: -1111px 0;
color:#297AFF;
}

&.xuke {
background-position: -1530px 0;
}
&.xuke:hover {
background-position: -1390px 0;
color:#297AFF;
}

&.market1 {
background-position: -2089px 0;
}
&.market1:hover {
background-position: -1949px 0;
color:#297AFF;
}

&.market2 {
background-position: -2368px 0;
}
&.market2:hover {
background-position: -2228px 0;
color:#297AFF;
}

&.market3 {
background-position: -2649px 0;
}
&.market3:hover {
background-position: -2509px 0;
color:#297AFF;
}

&.market4 {
background-position: -132px -140px;
}
&.market4:hover {
background-position: 8px -140px;
color:#297AFF;
}

&.market5 {
background-position: -408px -140px;
}
&.market5:hover {
background-position: -268px -140px;
color:#297AFF;
}

&.market6 {
background-position: -688px -140px;
}
&.market6:hover {
background-position: -548px -140px;
color:#297AFF;
}

&.market7 {
background-position: -968px -140px;
}
&.market7:hover {
background-position: -828px -140px;
color:#297AFF;
}

&.market8 {
background-position: -1251px -140px;
}
&.market8:hover {
background-position: -1111px -140px;
color:#297AFF;
}

&.market9 {
background-position: -1530px -140px;
}
&.market9:hover {
background-position: -1390px -140px;
color:#297AFF;
}

&.market10 {
background-position: -2089px -140px;
}
&.market10:hover {
background-position: -1949px -140px;
color:#297AFF;
}

&.market11 {
background-position: -2368px -140px;
}
&.market11:hover {
background-position: -2228px -140px;
color:#297AFF;
}
&.market12 {
background-position: -2649px -140px;
}
&.market12:hover {
background-position: -2509px -140px;
color:#297AFF;
}
&.market13 {
background-position: -2649px -560px;
}
&.market13:hover {
background-position: -2509px -560px;
color:#297AFF;
}
&.market14 {
background-position: -132px -700px;
}
&.market14:hover {
background-position: 8px -700px;
color:#297AFF;
}

&.market15 {
background-position: -408px -700px;
}
&.market15:hover {
background-position: -268px -700px;
color:#297AFF;
}
&.human1 {
background-position: -132px -280px;
}
&.human1:hover {
background-position: 8px -280px;
color:#297AFF;
}

&.human2 {
background-position: -408px -280px;
}
&.human2:hover {
background-position: -268px -280px;
color:#297AFF;
}

&.human3 {
background-position: -688px -280px;
}
&.human3:hover {
background-position: -548px -280px;
color:#297AFF;
}

&.human4 {
background-position: -968px -280px;
}
&.human4:hover {
background-position: -828px -280px;
color:#297AFF;
}

&.human5 {
background-position: -1251px -280px;
}
&.human5:hover {
background-position: -1111px -280px;
color:#297AFF;
}

&.human6 {
background-position: -1530px -280px;
}
&.human6:hover {
background-position: -1390px -280px;
color:#297AFF;
}

&.human7 {
background-position: -1810px -280px;
}
&.human7:hover {
background-position: -1670px -280px;
color:#297AFF;
}
&.human8 {
background-position: -2089px -280px;
}
&.human8:hover {
background-position: -1949px -280px;
color:#297AFF;
}
&.human9 {
background-position: -2368px -280px;
}
&.human9:hover {
background-position: -2228px -280px;
color:#297AFF;
}

&.human10 {
background-position: -2649px -280px;
}
&.human10:hover {
background-position: -2509px -280px;
color:#297AFF;
}
&.human11 {
background-position: -132px -420px;
}
&.human11:hover {
background-position: 8px -420px;
color:#297AFF;
}

&.legal1 {
background-position: -410px -420px;
}
&.legal1:hover {
background-position: -270px -420px;
color:#297AFF;
}

&.legal2 {
background-position: -410px -560px;
}
&.legal2:hover {
background-position: -270px -560px;
color:#297AFF;
}

&.legal3 {
background-position: -688px -560px;
}
&.legal3:hover {
background-position: -548px -560px;
color:#297AFF;
}
&.finance1 {
background-position: -1808px -420px;
}
&.finance1:hover {
background-position: -1668px -420px;
color:#297AFF;
}

&.finance2 {
background-position: -2089px -420px;
}
&.finance2:hover {
background-position: -1949px -420px;
color:#297AFF;
}

&.finance3 {
background-position: -2368px -420px;
}
&.finance3:hover {
background-position: -2228px -420px;
color:#297AFF;
}

&.finance4 {
background-position: -2649px -420px;
}
&.finance4:hover {
background-position: -2509px -420px;
color:#297AFF;
}
&.finance5 {
background-position: -130px -560px;
}
&.finance5:hover {
background-position: 10px -560px;
color:#297AFF;
}
&.finance6 {
background-position: -968px -840px;
}
&.finance6:hover {
background-position: -828px -840px;
color:#297AFF;
}
&.office1 {
background-position: -688px -420px;
}
&.office1:hover {
background-position: -548px -420px;
color:#297AFF;
}

&.office2 {
background-position: -2089px -420px;
}
&.office2:hover {
background-position: -1949px -420px;
color:#297AFF;
}

&.office3 {
background-position: -2368px -420px;
}
&.office3:hover {
background-position: -2228px -420px;
color:#297AFF;
}

&.office4 {
background-position: -2649px -420px;
}
&.office4:hover {
background-position: -2509px -420px;
color:#297AFF;
}
}
}
}
}
}