@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Light.ttf');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Medium.ttf');
    font-weight: normal;
    font-style: normal;
}

html {height:100%;width:100%;margin:0;}

body {margin: 0; /*height: 100vh;*/ font-family:'Roboto',sans-serif; font-size: 14px; line-height: 20px; color: #000;}
.clear {clear:both;height:1px;line-height:1px;font-size:1px;}

.for-top {width: 100%;height: 48vh; background: #fff url(images/ornament3.png); position: relative;}
.for-top .logo{/*background: url(images/logo.png) 50% 86% no-repeat;*/ height: 100%;}
.for-top .logo img{width: 500px;position: absolute;left: 50%; bottom: 10%; margin-left: -250px;}
.for-top .stripe{height: 9px; /*opacity: 0.5;*/ width: 100%; position: absolute; bottom: 0;}
.for-top .stripe .left{width: calc((100% - 480px) / 2 + 177px); background: #CCC 0 100% no-repeat; float: left; height: 100%;}
.for-top .stripe .right{width: calc((100% - 480px) / 2 + 303px); background: #DDD 0 100% no-repeat; float: right; height: 100%;}

.for-foot {width: 100%;height: 52vh;}
.for-foot .left{min-height: 315px;height: 100%;width: calc((100% - 480px) / 2 + 177px); background: #ED1C24; float: left;}
.for-foot .left .text {color: #fff;}
.for-foot .left .text .t1{font-size: 16px; text-transform: uppercase; font-weight: 200; float: right; padding-top: 40px; padding-right: 50px;}
.for-foot .left .text .t2{font-weight: 500; float: right; padding-top: 125px; padding-right: 105px; /*background: url(images/file.png) 0 70px no-repeat;*/ position: relative;}
.for-foot .left .text .t2 img{position: absolute; top: 70px;width: 81px;left: -23px;}
.for-foot .left .text .t2 a{color: #fff;}
.for-foot .left .text .t2 a:hover {text-decoration: none;}
.for-foot .right{min-height: 315px;height: 100%;width: calc((100% - 480px) / 2 + 303px); background: #E0E0E0; float: right;}
.for-foot .right .text{}
.for-foot .right .text div {padding-left: 80px; line-height: 18px; padding-bottom: 20px; position: relative;}
.for-foot .right .text div img {position: absolute;}
.for-foot .right .text div span {color: #666766; font-weight: 200; display: block; padding-bottom: 7px;}
.for-foot .right .text .t1 {padding-top: 40px; /*background: url(images/location.png) 24px 40px no-repeat;*/}
.for-foot .right .text .t1 img{top: 39px;left: 5px;width: 73px;}
.for-foot .right .text .t2 {/*background: url(images/phone.png) 24px 0px no-repeat;*/}
.for-foot .right .text .t2 img{width: 68px; left: 7px;}
.for-foot .right .text .t3 {}
.for-foot .right .text .t4 {/*background: url(images/email.png) 24px 0px no-repeat;*/}
.for-foot .right .text .t4 img{width: 68px;left: 7px;top: -5px;}

@media only screen and (max-width: 520px) {
    /*.for-top .logo {background-size: 95%;}*/
    .for-top .logo img {width: 90%;left: 5%; margin-left: auto;}
    .for-top .stripe {display: none;}

    .for-foot .left {display: block; float: none; width: 100%;}
    .for-foot .left .text .t1 {float: left; padding-left: 80px;}
    .for-foot .left .text .t2 {float: left; padding-left: 80px; background-position-x: 80px;}
    .for-foot .left .text .t2 img {left:56px;}
    .for-foot .right {display: block; float: none; width: 100%;}
}