body,
html {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
body {
background-image: url('../images/bodybg.jpg');
}
p{
font-size: 0.875em;
line-height: 2em;
}
a:hover {
text-decoration: none;
}
.sm-text{
font-size: 0.875em;
font-weight: 400;
}
.wrap {
position: relative;
}
h2{
color:#8b7d7a;
font-weight: 700;
}
h5{
color:#8b7d7a;
font-weight: 700;
}
ul {
list-style: none;
padding: 0;
}
header{
position: absolute;
top:0;
left:0;
z-index: 2
}
header .logo {
float: left;
color: #fff;
}
header .logo a{
color: #fff;
text-decoration: none;
}
header.home {
width: 100%;
background: rgba(0, 0, 0, 0.3);
}
header.home.affix{
top:0;
height: 3.57em;
line-height: 50px;
z-index: 99;
width: 100%;
}
header nav {
display: inline-block;
float: right;
height: 118px;
}
header .hidden-sm ul li {
height: 30px;
line-height: 30px;
display: inline-block;
}
header .dropdown-menu{
left:-50px;
margin: 0;
}
header ul li a {
color: #fff;
font-weight: 700;
letter-spacing: 1px;
font-size: 1em;
text-transform: uppercase;
padding: 0 5px 0 3px;
border-right: 1px solid #fff;
}
header ul li:last-child a {
border-right: none;
}
header ul li i {
color: #fff;
padding-right: 5px;
}
header ul li:hover a,header ul li a.active {
text-decoration: underline;
color: #fff;
}
.click-in.btn {
background: none;
border-width: 2px;
border-color: #fff;
color: #fff;
}
.click-in.btn:hover {
background: #fff;
color: #81796f;
}
.banner{
position: absolute;
width: 100%;
}
.banner ul li a{
color:#8b7d7a;
}
.homemain{
position: relative;
}
.home-main .more{
font-size: 0.875em;
color: #dd9450;
display: block;
}
.home-main .more i{
font-size: 0.875em;
-webkit-transform: scale(0.6) translate(-3px, 0px);
-o-transform: scale(1);
padding-left: 5px;
display:inline-block;
line-height: 1.25em;
}
.desc{
color: #999491;
}
.footer{
height: 118px;
background: #e5e5e5;
padding:20px 0;
font-weight: 400;
font-size: 0.875em;
color:#999;
}
.footer a{
color:#999;
}
.footer .social i{
padding: 5px;
display: inline-block;
}
.footer .social i{
border-radius: 50px;
}
@media(min-width: 320px) {
h1 {
font-size: 1em
}
h2{
font-size: 1.25em;
}
header {
height: 30px;
line-height: 30px;
}
header ul li a {
font-size: 0.875em;
}
header.affix i.menu {
color: #fff;
height: 3.57em;
line-height: 3.57em !important;
display: inline-block;
}
header i.menu {
color: #fff;
height: 30px;
line-height: 30px !important;
display: inline-block;
}
.backwrap {
height: 240px;
z-index: 1;
}
.intro {
width: 300px;
padding-top:60px;
margin: 0 auto;
text-align: center;
font-weight: 700;
color: #fff;
}
.intro h1 {
line-height: 20px;
}
.click-in.btn {
position: absolute;
top: 170px;
left: 30%;
font-size: 0.875em;
}
.banner{
left: 0;
}
.banner ul{
display: inline-block;
margin: 0 auto;
}
.banner li{
display: inline-block;
float: left;
position: relative;
}
.banner li span{
position: absolute;
left:0;
bottom: 0;
background: #fff;
height: 30px;
line-height: 30px;
width: 100%;
display: block;
text-align: center;
}
.home-main{
width: 300px;
margin: 10px auto;
}
.home-main .left{
width:300px;
padding-right: 10px;
float: left;
}
.home-main .left .column1{
width: inherit;
border-bottom: 1px solid #ccc;
position: relative;
height: 180px;
}
.home-main .left .column1 img{
width: 140px;
height: 140px;
display: none;
}
.home-main .left .column1 .text{
width: 300px;
height: 140px;
}
.home-main h2{
letter-spacing: 1px
}
.home-main .desc{
font-size: 0.875em;
font-weight: 400;
line-height: 1.8em;
}
.home-main .more{
margin-top: 8px;
}
.home-main .left .column2 .left{
position: relative;
width: 300px;
height: 150px;
float: left;
border-bottom: 1px solid #ccc;
}
.home-main .left .column2 > .right{
width: 300px;
height: 130px;
float: left;
border-bottom: 1px solid #ccc;
}
.home-main .left .column2 > .right img{
display: none;
}
.home-main .left .column2 > .right .text{
float: left;
width: 300px;
}
.home-main > .right{
margin-top: 30px;
float: left;
clear: left;
}
.home-main > .right img{
display: block;
float: left;
}
.home-main > .right h2,.home-main > .right .desc{
width: 300px;
float: right;
margin-right: 20px;
}
.home-main > .right .more{
margin-top:8px;
display: block;
float: left;
}
.footer{
margin-top: 30px;
}
.footer .container{
position: relative;
}
.footer .copy,.footer .link{
float: none !important;
margin: 0 auto;
width: 300px;
text-align: center;
}
.footer .social{
width: 300px;
margin: 0 auto;
clear: left;
height: 30px;
line-height: 30px;
font-size: 2.5em;
text-align: center;
}
}
@media(min-width: 768px) {
header {
height: 60px;
line-height: 60px;
}
h1 {
font-size: 2.25em
}
h2 {
font-size: 1.571em
}
header ul li a {
font-size: 0.875em;
}
header i.menu {
color: #fff;
height: 60px;
line-height: 60px !important;
display: inline-block;
}
header .dropdown-menu{
width: 200px;
right:0;
margin: 0;
}
.backwrap {
height: 560px;
}
.intro {
width: 680px;
padding-top: 180px;
text-align: center;
font-weight: 700;
color: #fff;
}
.intro h1 {
line-height: 50px;
}
.click-in.btn {
position: absolute;
top: 400px;
left: 42%;
font-size: 1.25em;
}
.banner{
bottom:-150px;
}
.banner ul{
display: block;
width: 768px;
margin: 0 auto;
}
.banner ul li{
width: 256px;
}
.home-main{
width: 768px;
margin: 158px auto 0 auto;
}
.home-main .left{
width:768px;
height: 295px;
padding-right: 10px;
float: left;
}
.home-main .left .column1{
border-bottom: 1px solid #ccc;
position: relative;
height: 155px;
}
.home-main .left .column1 img{
width: 200px;
height: 140px;
padding: 0 30px;
display: block;
}
.home-main .left .column1 .text{
width: 555px;
height: 140px;
padding-right: -20px;
}
.home-main h2{
letter-spacing: 1px
}
.home-main .desc{
font-size: 0.875em;
font-weight: 400;
line-height: 1.8em;
}
.home-main .more{
margin-top: 8px;
}
.home-main .left .column2 .left{
position: relative;
width: 343px;
height: 130px;
border-right: 1px solid #ccc;
padding-right:10px;
float: left;
margin-top: 10px;
border-bottom:none;
}
.home-main .left .column2 > .right{
width: 400px;
float: right;
margin-top: 10px;
border-bottom: none;
}
.home-main .left .column2 > .right img{
float: left;
margin-top: 10px;
display: block;
}
.home-main .left .column2 > .right .text{
float: right;
width: 280px;
}
.home-main > .right{
margin-top: 40px;
float: left;
clear: left;
}
.home-main > .right img{
display: block;
float: left;
}
.home-main > .right h2,.home-main > .right .desc{
width: 440px;
float: right;
margin-right: 20px;
}
.home-main > .right .more{
margin:20px 0 0 20px;
display: block;
float: left;
}
.footer{
margin-top: 40px;
}
.footer .container{
position: relative;
}
.footer .copy,.footer .link{
width: 50%;
}
.footer .link{
position:absolute;
top:0;
right: 0;
text-align: right;
}
.footer .copy{
position:absolute;
top:0;
left: 0;
text-align: left;
}
.footer .social{
position:absolute;
top:30px;
right: 0;
height: 30px;
line-height: 30px;
font-size: 2.5em;
text-align: right;
}
}
@media(min-width: 1024px) {
header {
height: 60px;
line-height: 60px;
}
h1 {
font-size: 2.571em
}
h2 {
font-size: 1.571em
}
header ul li a {
font-size: 0.875em;
}
.backwrap {
height: 560px;
}
.intro {
width: 900px;
padding-top: 180px;
text-align: center;
font-weight: 700;
color: #fff;
}
.intro h1 {
line-height: 50px;
}
.click-in.btn {
position: absolute;
top: 400px;
left: 42%;
font-size: 1.25em;
}
.banner{
bottom:-150px;
}
.banner ul{
display: block;
width: 1002px;
margin: 0 auto;
}
.banner ul li{
width: 334px;
}
.home-main{
width: 1000px;
margin: 158px auto 0 auto;
}
.home-main .left{
width:663px;
height: 295px;
padding-right: 10px;
float: left;
}
.home-main .right{
float: right;
width: 322px;
}
.home-main .left .column1{
border-bottom: 1px solid #ccc;
position: relative;
height: 155px;
}
.home-main .left .column1 img{
width: 200px;
height: 140px;
padding: 0 30px;
}
.home-main .left .column1 .text{
width: 445px;
height: 140px;
padding-right: -20px;
}
.home-main h2{
letter-spacing: 1px
}
.home-main .desc{
width: inherit;
font-size: 0.875em;
font-weight: 400;
line-height: 1.8em;
}
.home-main .more{
margin-top: 8px;
}
.home-main .left .column2 .left{
position: relative;
width: 333px;
height: 130px;
border-right: 1px solid #ccc;
padding-right:10px;
float: left;
margin-top: 10px;
border-bottom:none;
}
.home-main .left .column2 .right{
width: 300px;
float: right;
margin-top: 10px;
}
.home-main .left .column2 .right img{
float: left;
margin-top: 10px;
}
.home-main .left .column2 .right .text{
float: right;
width: 170px;
}
.home-main > .right{
clear: none;
margin-top: 10px;
}
.home-main > .right h2,.home-main > .right .desc{
width: 318px;
float: none;
margin-right: 0;
}
.home-main > .right img{
margin-bottom:32px;
display: block;
}
.home-main > .right .more {
margin:20px 0 0 0;
display: block;
float: left;
}
.footer{
margin-top: 40px;
}
.footer .container{
position: relative;
}
.footer .copy,.footer .link{
width: 50%;
}
.footer .copy{
margin-left: -30px;
text-align: left;
}
.footer .link{
position:absolute;
top:0;
right: -17px;
text-align: right;
}
.footer .social{
position:absolute;
top:30px;
right: -20px;
height: 30px;
line-height: 30px;
font-size: 2.5em;
text-align: right;
}
}
@media(min-width: 1200px) {
h1 {
font-size: 5em
}
h2 {
font-size: 1.786em
}
h5{
font-size: 1.25em;
}
label{
font-size: 0.875em;
font-weight: 300;
color: #999491;
}
header {
height: 118px;
line-height: 118px;
}
header ul li a {
font-size: 1em;
}
header .logo {
font-size: 2em;
}
.backwrap {
height: 768px;
}
.aboutwrap ul{
list-style: inside;
padding-left: 20px;
}
.aboutwrap ul li{
font-size: 0.875em;
}
.intro {
width: 1100px;
padding-top:300px;
text-align: center;
font-weight: 900;
color: #fff;
}
.intro h1 {
line-height: 80px;
}
.click-in.btn {
position: absolute;
top: 540px;
left: 42%;
font-size: 1.5em;
}
.banner{
width: 100%;
bottom:-155px;
}
.banner ul{
display: block;
width: 1200px;
position: relative;
margin: 0 auto;
}
.banner ul li{
width: 400px;
height: 250px;
overflow: hidden;
}
.home-main{
width: 1200px;
margin: 188px auto 0 auto;
}
.home-main .left{
width:863px;
height: 295px;
padding-right: 10px;
float: left;
}
.home-main .right{
float: right;
width: 322px;
}
.home-main .left .column1{
border-bottom: 1px solid #ccc;
position: relative;
height: 155px;
}
.home-main .left .column1 img{
width: 200px;
height: 140px;
padding: 0 30px;
}
.home-main .left .column1 .text{
width: 632px;
height: 140px;
padding-right: -20px;
}
.home-main h2{
letter-spacing: 3px
}
.home-main .desc{
font-size: 0.875em;
font-weight: 400;
line-height: 1.8em;
}
.home-main .more{
margin-top: 8px;
}
.home-main .left .column2 .left{
position: relative;
width: 482px;
height: 130px;
border-right: 1px solid #ccc;
padding-right:10px;
float: left;
margin-top: 10px;
border-bottom:none;
}
.home-main .left .column2 .right{
width: 353px;
float: right;
margin-top: 10px;
}
.home-main .left .column2 .right img{
float: left;
margin-top: 10px;
}
.home-main .left .column2 .right .text{
float: right;
width: 231px;
}
.home-main > .right{
margin-top: 0;
}
.home-main > .right h2{
width:322px;
}
.home-main .right img{
margin-bottom:32px;
display: block;
}
.home-main > .right .more {
margin:8px 0 0 0;
display: block;
float: left;
}
.footer{
margin-top: 40px;
}
.footer .container{
position: relative;
}
.footer .copy,.footer .link{
width: 50%;
}
.footer .copy{
margin-left: -30px;
text-align:left;
}
.footer .link{
position:absolute;
top:0;
right: -17px;
text-align: right;
}
.footer .social{
position:absolute;
top:30px;
right: -20px;
height: 30px;
line-height: 30px;
font-size: 2.5em;
text-align: right;
}
}