@mcolor:#116aa6;
@vcolor:#f25d00;
.header{ .header-hd{ height: 30px; line-height: 30px; background-color: #f0f0f0; color: #4c4c4c; font-size: 12px; a{ color: #4c4c4c; } } .header-bd{ height: 120px; .logo{ height: 120px; a{ display: block; img{ display: block; max-width: 100%; max-height: 100%; } } } .tel{ font-size: 16px; color: #333; padding-top: 24px; line-height: 1; p{ color: @mcolor; font-size: 26px; font-weight: bold; font-family: 'impact'; margin-top: 10px; span{ font-size: 22px; font-weight: normal; } } } }
}
.nav{ height: 60px; line-height: 60px; background-color: @mcolor; ul{ display: flex; li{ flex: 1 1 auto; position: relative; text-align: center; a{ font-size: 16px; color: #fff; } a:hover{ border-bottom: 2px solid #fff; padding-bottom: 6px; } ul{ position: absolute; top: 60px !important; width: 100%; left: 0; display: none; z-index: 999; background-color: @mcolor; li{ a{ display: block; font-size: 14px; height: 40px; line-height: 40px; } a:hover{ background: rgba(0, 0, 0, .2); padding: 0; border: none; } } } } li:hover{ ul{ display: block; } } li.on>a{ border-bottom: 2px solid #fff; padding-bottom: 6px; } }
}
/*box-tit*/
.box-tit{ text-align: center; background: url('../image/box_titbg.png') no-repeat center 54px; h3{ font-size: 24px; color: #1a0b08; font-weight: normal; } span{ display: block; text-transform: uppercase; font-size: 12px; margin: 10px 0 30px; color: #999; } p{ font-size: 14px; color: #999; }
}
/*product*/
.i-product{ .i-pro-tit{ margin: 40px 0 30px; } .i-pro-con{ .i-pro-hd{ height: 718px; width: 286px; .tit{ height: 46px; line-height: 46px; background-color: @mcolor; font-size: 18px; color: #fff; padding-left: 20px; } .i-pro-list{ padding: 20px; height: 672px; background-color: #f5f5f5; h3{ height: 36px; line-height: 36px; background-color: #e6e6e6; margin-bottom: 10px; a{ display: block; padding-left: 25px; font-size: 16px; color: #333; border-left: 2px solid @mcolor; } } h3.on{ margin-bottom: 0; } ul{ margin-bottom: 12px; li{ a{ display: block; padding-left: 42px; height: 32px; font-size: 12px; color: #666; line-height: 32px; background: url('../image/pro_ico.png') repeat-x left bottom; } a:hover{ color: @mcolor; } } } } } .i-pro-bd{ width: 850px; .tit{ height: 46px; border: 1px solid #ccc; line-height: 44px; background-color: #f3f3f3; span{ display: inline-block; margin-left: 13px; height: 20px; line-height: 20px; padding-left: 19px; border-left: 6px solid @mcolor; font-size: 18px; color: @mcolor; margin-top: 13px; } a{ color: #808080; font-size: 16px; text-transform: uppercase; margin-right: 18px; } a:hover{ color: @mcolor; } } ul{ li{ width: 260px; margin-right: 35px; margin-top: 18px; .img{ border: 1px solid #bfbfbf; border-bottom: none; width: 260px; overflow: hidden; img{ transition: all .6s; } } h5{ font-size: 12px; color: #fff; text-align: center; height: 20px; line-height: 20px; background-color: #bfbfbf; font-weight: normal; } a{ width: 120px; height: 24px; line-height: 24px; text-align: center; background-color: #3fa8f0; font-size: 12px; display: inline-block; color: #fff; margin-top: 3px; } a:hover{ background-color: @vcolor; } a.a2{ float: right; } } li:nth-of-type(3n){ margin-right: 0; } li:hover{ img{ transform: scale(1.1); } } } } }
}
/*mid*/
.i-mid{ height: 186px; margin: 90px 0 45px; background: url('../image/mid.jpg') no-repeat center; .i-mid-hd{ padding: 40px 0 0 40px; h5{ font-size: 22px; color: rgba(255, 255, 255, .74); font-weight: normal; } h3{ font-size: 30px; color: #fff; font-weight: normal; padding: 14px 0; } p{ font-size: 18px; color: rgba(255, 255, 255, .6); text-transform: uppercase; } } .i-mid-bd{ font-size: 18px; color: #333; padding-top: 44px; margin-right: -80px; padding-left: 85px; background: url('../image/mid_tel.png') no-repeat left 35px; p{ color: @vcolor; font-size: 36px; font-weight: bold; font-family: 'impact'; margin-top: 10px; span{ color: #666; font-weight: normal; } } }
}
/*superiority*/
.i-superiority{ margin-bottom: 60px; .i-sup-tit{ padding-top: 14px; text-align: center; background: url('../image/sup_tit.png') no-repeat center top; h3{ font-size: 44px; color: @mcolor; letter-spacing: 10px; } p{ color: #a3a3a3; font-size: 26px; padding: 18px 0 12px; } span{ font-size: 18px; color: #a3a3a3; } } .i-sup-con{ padding: 40px 50px 0 12px; ul{ li{ margin-bottom: 40px; .item-hd{ width: 550px; padding-left: 100px; background: url('../image/sup_ico.png') no-repeat left top; dl{ dt{ width: 347px; border-bottom: 1px dashed #bfbfbf; h4{ font-size: 20px; color: @mcolor; } p{ font-size: 12px; color: #666; padding: 14px 0; text-transform: uppercase; } } dd{ padding-left: 35px; width: 430px; margin-top: 17px; font-size: 12px; color: #666; line-height: 1.2; background: url('../image/sup_ico2.png') no-repeat left top; } } dl:nth-child(even){ margin-top: 30px; } a{ display: block; float: right; margin-top: 30px; width: 108px; height: 38px; line-height: 38px; text-align: center; font-size: 18px; border-radius: 13px; color: #fff; background-color: @vcolor; } a:hover{ background-color: @mcolor; } } } } }
}