@color : #000000; * { margin: 0; padding: 0; } html { height: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } body { font: 12px/18px Arial, sans-serif; width: 100%; height: 100%; -webkit-text-size-adjust: none; min-width: 1003px; } .wrapper { width: 100%; min-height: 100%; height: auto !important; height: 100%; } .bl{ float: left; width: 100%; overflow-x: hidden; } .bl_center{ width: 1003px; margin: 0 auto; } input{ outline: none; -webkit-appearance: none; } /* Header -----------------------------------------------------------------------------*/ .header { height: 705px; background: url(../img/top.jpg) no-repeat center 0; .top{ float: left; width: 100%; height: 135px; color: @color; .logo{ float: left; width: 220px; margin-top: 14px; } .cent{ display: inline-block; width: 560px; text-align: center; font: 300 13px/14px ubuntu; margin-top: 26px; } .right{ float: right; width: 220px; margin-top: 20px; .phone{ float: right; font: 24px/24px ubuntu; } .t{ float: right; clear: right; font: 300 12px/12px ubuntu; position: relative; right: 2px; } } } .hea_info{ float: left; width: 100%; text-align: center; color: @color; & > span{ float: left; width: 100%; } .t1{ font: 42px/45px open sans; .b{ font: 700 42px/45px open sans; } } .t2{ margin: 20px 0 80px; font: 300 19px/24px ubuntu; .b{ font: 500 19px/24px ubuntu; } } } .thank{ float: left; width: 100%; text-align: center; .s1{ float: left; width: 100%; margin: 100px 0 20px; color: #f26500; font: 39px ubuntu; } .s2{ float: left; width: 100%; font: 300 30px ubuntu; color: @color; } } } .copy_form{ float: left; padding: 30px; width: 770px; border-radius:10px; background: #e4e4e4; margin: 0 85px; .t1{ float: left; width: 100%; text-align: center; margin-bottom: 25px; color: @color; font: 300 30px/28px ubuntu; } .lock{ float: left; width: 100%; text-align: center; color: @color; font: 300 12px/14px ubuntu; margin-top: 20px; } .inp{ float: left; width: 259px; height: 56px; margin-right: 4px; input{ float: left; padding: 20px 33px 20px 20px; color: #585858; font: 13px arial; border: none; width: 206px; &.mail{ background: url(../img/ico_mail.png) no-repeat 92% center #fff; } &.phone{ background: url(../img/ico_phone.png) no-repeat 92% center #fff; } } } .sub{ float: right; width: 244px; input{ float: left; width: 100%; height: 56px; background: #f26500; border: none; cursor: pointer; color: #fff; font: 300 18px ubuntu; text-transform: uppercase; text-align: center; transition: background 0.5s ease; &:hover{ background: #e74d02; } } } } form ::-webkit-input-placeholder { color: #585858; } form :-moz-placeholder { color: #585858; opacity: 1; } form ::-moz-placeholder { color: #585858; opacity: 1; } form :-ms-input-placeholder { color: #585858; } form :placeholder-shown { color: #585858; } /* Middle -----------------------------------------------------------------------------*/ .content { padding: 0 0 88px; } #triple{ padding: 0 0 80px; .title{ float: left; width: 100%; text-align: center; color: @color; font: 36px/36px ubuntu; margin: 65px 0 75px; } .b_text{ float: left; width: 100%; text-align: center; color: @color; font: 600 22px open sans; margin-top: 60px; .color{ color: #f26500; } } .row{ float: left; width: 310px; &.cent{ margin: 0 35px; } .im{ float: left; width: 90px; } .r{ display: block; padding-left: 90px; width: 100%; } .name{ float: left; width: 100%; color: @color; font: 600 18px open sans; } .text{ float: left; width: 100%; margin-top: 20px; color: @color; font: 14px/18px ubuntu; } } } #big{ padding: 70px 0 90px; background: url(../img/big_bg.png) repeat center bottom #343e4b; .big_title{ float: left; width: 100%; color: #fff; text-align: center; font: 36px ubuntu; margin-bottom: 60px; } .table{ float: left; margin: 0 138px; width: 718px; table{ width: 100%; border-collapse: collapse; th, td{ border: 2px solid #353e4c; padding: 13px 35px; } th{ background: #f26500; color: #fff; font: 500 15px ubuntu; text-align: left; } td{ background: #d1d2d3; font: 300 15px ubuntu; color: @color; .old{ text-decoration: line-through; display: inline-block; margin-right: 10px; } .new{ font: 500 18px ubuntu; } } } } .t2{ float: left; width: 100%; text-align: center; color: #fff; margin: 60px 0 20px; font: 21px/24px ubuntu; } .t3{ float: left; width: 100%; text-align: center; color: #fff; font: 300 16px open sans; } } .copy_rows{ padding-top: 70px; color: @color; .title{ float: left; width: 100%; text-align: center; font: 36px ubuntu; margin-bottom: 55px; } .rows{ float: left; width: 100%; margin-bottom: 65px; .row{ float: left; width: 334px; .im{ float: left; width: 96px; } .r{ width: 238px; display: block; padding-left: 96px; .name{ float: left; width: 100%; font: 21px/21px ubuntu; margin-bottom: 20px; } .text{ float: left; width: 100%; font: 300 15px/21px open sans; } } } } } #five{ padding: 80px 0 95px; background: url(../img/big_bg.png) repeat; color: #fff; text-align: center; .title{ float: left; width: 100%; font: 40px ubuntu; } .des{ float: left; width: 100%; color: #e9e9e9; font: 300 14px ubuntu; margin-bottom: 60px; } .rows{ float: left; width: 100%; .row{ float: left; width: 19%; position: relative; &.big{ width: 24%; } .im{ float: left; width: 100%; } .st{ position: absolute; right: 0; top: 29px; width: 13px; height: 27px; background: url(../img/st.png) no-repeat; } .text{ float: left; width: 100%; margin-top: 30px; font: 300 14px/20px open sans; a{ text-decoration: none; color: #fff; font: 300 14px open sans; border-bottom: 1px dotted #fff; &:hover{ border-bottom: 1px dotted #343e4b; } } } } } } #free{ background: #ededed; height: 505px; color: @color; overflow: hidden; position: relative; .block{ float: right; width: 530px; margin-top: 65px; .t1{ float: left; width: 100%; font: 24px ubuntu; margin-bottom: 18px; } .t2{ float: left; width: 100%; font: 300 15px/21px open sans; margin-bottom: 18px; } .last{ float: left; width: 100%; font: 24px ubuntu; color: @color; .count{ padding: 8px 12px; display: inline-block; color: #fff; background: #f26500; } } } .abs_im{ height: 505px; right: 52%; position: absolute; top: 0; width: auto; z-index: 100; .h{ display: block; } .h2{ display: none; } &:hover .h{ display: none; } &:hover .h2{ display: block; } } } #a_company{ padding: 65px 0 60px; color: @color; background: #ededed; .title{ float: left; width: 100%; text-align: center; font: 40px ubuntu; margin-bottom: 60px; } .info{ float: left; width: 750px; .block{ float: left; width: 100%; font: 300 15px/21px open sans; .b{ font: 700 15px/21px open sans; } p{ float: left; width: 100%; margin-bottom: 22px; &.b{ width: 105%; } } .list{ float: left; width: 100%; margin-bottom: 18px; span{ float: left; clear: left; background: url(../img/list.png) no-repeat 0 5px; margin-left: 23px; padding-left: 12px; } } } } .right{ float: right; width: 214px; .bs{ float: left; width: 100%; padding: 27px 0 17px; background: #dad7d7; margin-top: 5px; & > span{ float: left; width: 100%; text-align: center; } .i1{ margin: 0 0 9px;} .t1{ margin: 9px 0 13px; color: #353e4c; font: 48px/24px ubuntu; } .t2{ font: 300 14px/19px open sans; color: #353e4c; } &.bs3{ padding-top: 25px; } &.bs4{ padding-top: 22px; } &.bs5{ padding-top: 22px; } } } } #docs{ background: url(../img/bot.jpg) no-repeat center bottom #f1f1f1; padding: 65px 0; .title{ float: left; width: 100%; text-align: center; margin-bottom: 40px; font: 40px ubuntu; } .docs{ float: left; width: 100%; text-align: center; margin-bottom: 70px; a{ display: inline-block; margin: 0 8px; } } .copy_form{ background: rgba(223,229,232,0.9); } } #bot{ background: #353e4c; padding: 45px 0 48px; color: #b5b7c4; .map{ float: left; width: 336px; height: 181px; background: #ccc; } .texts{ float: left; margin: 30px 0 0 63px; width: 315px; span{ float: left; width: 100%; padding: 9px 0; border-bottom: 1px solid #4a525e; font: 300 14px/17px ubuntu; &:last-child{ border-bottom: none; } } } .right{ float: right; width: 238px; margin-top: 46px; .block{ float: left; & > span{ float: left; width: 100%; } } .phone{ padding-left: 22px; background: url(../img/ico_phone2.png) no-repeat 0 12px; .q1{ font: 700 23px/23px open sans; } .q2{ font: 300 12px open sans; color: #fff; padding-bottom: 11px; border-bottom: 1px solid #4a525e; margin-bottom: 7px; } } .mail{ padding-left: 22px; background: url(../img/ico_mail2.png) no-repeat 0 13px; .q3{ font: 700 14px open sans; } .q4{ a{ font: 300 13px open sans; text-decoration: none; border-bottom: 1px dotted #fff; color: #fff; &:hover{ border-bottom: inherit; } } } } } } /* Footer -----------------------------------------------------------------------------*/ .footer { width: 100%; height: 88px; overflow: hidden; clear: both; background: #262e3a; position: relative; .logo{ float: left; width: 220px; margin-top: 24px; color: #fff; font: 300 18px/14px open sans; } .c_text{ float: left; width: 560px; text-align: center; margin-top: 23px; font: 300 12px/14px open sans; color: #8a8a8a; } .r{ float: right; width: 220px; margin-top: 24px; .polit{ float: right; color:#8a8a8a; font: 300 12px/18px open sans; text-decoration: none; border-bottom: 1px dotted #8a8a8a; &:hover{ border-bottom: 1px solid #262e3a; } } .dew{ float: right; clear: right; margin-top: 5px; color: #8a8a8a; font: 300 12px/18px open sans; a{ font: 700 12px open sans; text-decoration: none; color: #8a8a8a; text-transform: uppercase; border-bottom: 1px dotted #fff; &:hover{ border-bottom: 1px solid #262e3a; } } } } } #agree { padding: 0 5%; text-align: center; font: 16px ubuntu; width: 90%; h1{ float: left; width: 100%; text-align: center; font: 500 36px ubuntu; margin-bottom: 20px; } } .rotate img{ border-radius: 50%; margin: 0 auto; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; &:hover{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); } } .over{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 300; background: rgba(0,0,0,0.7); display: none; .over_center{ width: 960px; position: absolute; left: 50%; margin-left: -500px; top: 100px; padding: 20px; background: #fff; border-radius: 10px; } } #big2 { padding:75px 0 85px; color: @color; background: url(../img/big2.jpg) no-repeat center bottom #fcfdfe; .title{ float:left; font:36px ubuntu; text-align:center; width:100%; margin-bottom: 70px } .lic_slider{ float:left; width:100%; margin-bottom: 90px; position:relative;} .bx-prev{ width:42px; height:137px; background:url(../img/arrows.png) no-repeat; text-indent:-9999px; position:absolute; left:0; cursor:pointer; top:130px;} .bx-next{ width:42px; height:137px; background:url(../img/arrows.png) no-repeat right 0; text-indent:-9999px; position:absolute; right:0; cursor:pointer; top:130px; } .copy_form{ background: rgba(223,229,232,0.9); } } @media (min-width: 768px) and (max-width: 991px) { #text .abs_im, #suprize .abs_im{ left: 80%; } #free .abs_im{ right: 80%; } }