@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400
}

a,
body {
    color: #2e2425
}

blockquote,
body,
button,
dd,
div,
dl,
dt,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent
}

a:active,
a:hover {
    outline: 0
}

img {
    border: none;
    max-width: 100%;
}

li {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

h4,
h5,
h6 {
    font-size: 100%
}

button,
input,
optgroup,
option,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    outline: 0
}

pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word
}

@font-face {
    font-family: "Avant_M";
    src: url("../fonts/Avant_M.eot"); /* IE9 */
    src: url("../fonts/Avant_M.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    
    url("../fonts/Avant_M.woff") format("woff"), /* chrome、firefox */
    url("../fonts/Avant_M.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    
    url("../fonts/Avant_M.svg#Avant_M") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}


body {
    line-height: 1.6;
    color: rgba(0, 0, 0, .85);
    font-family: "Avant_M"
}

hr {
    line-height: 0;
    margin: 10px 0;
    padding: 0;
    border: none !important;
    border-bottom: 1px solid #eee !important;
    clear: both;
    background: 0 0
}

a cite {
    font-style: normal
}

.clearfix {
    zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}

.clearfix:after {
    clear: both;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: 0 0
}

::-webkit-scrollbar-track {
    background: 0 0
}

::-webkit-scrollbar-thumb {
    background-color: #c1c1c1
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8
}

@media screen and (max-width:768px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 0
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.jt-ct {
    justify-content: space-between;
}

.jt-cn {
    justify-content: center;
}

.an-tm {
    align-items: center;
}

.header {
    padding: 0 1.875em;
    position: fixed;
    height: 6.25em;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, .95);
    justify-content: right;
}

.hg {
    height: 6.25em
}

.header .logo {
    position: absolute;
    left: 1.875rem;
}

.header .logo a {
    width: 12.75em;
    display: block;
    font-size: 2.5rem;
    color: #000;
}

.header .nav {
    margin: 0 auto;
    width: 40%;
    height: 100%;
}
.header .nav .n1{
    position: relative;
    height: 100%;
}
.header .nav .n1>a {
    text-transform: uppercase;
    color: rgba(7, 7, 7, .9);
    font-size: 1.625em;
    height: 100%;
}

.header .nav .n1>a.active {
    opacity: .4
}
.header .nav .n2{
    position: absolute;
    top: 110%;
    width: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: #f5f5f5;
    padding: 0 10px;
    transition: .3s;
    opacity: 0;
}
.header .nav .n2 a{
    display: block;
    margin: 10px 0;
    text-align: center;
    text-transform: capitalize;
}
.header .nav .n2 a:hover{
    opacity: .8;
}
.header .nav .n1:hover .n2{
    opacity: 1;
    top: 100%;
}


.header .nav-btn{width:30px; height:22px; display:none; position:relative;}
.header .nav-btn span{width:30px; height:3px; background-color:#333; display:block; position:absolute;
transition:all .5s;
-o-transition:all .5s;
-ms-transition:all .5s;
-moz-transition:all .5s;
-webkit-transition:all .5s;}
.header .nav-btn span.a1{top:0; left:0;}
.header .nav-btn span.a2{top:10px; left:0;}
.header .nav-btn span.a3{top:20px; left:0;}
.header .nav-btn.n span.a2{display:none;}
.header .nav-btn.n span.a1{top:10px;
transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);}
.header .nav-btn.n span.a3{top:10px;
transform:rotate(135deg);
-o-transform:rotate(135deg);
-ms-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-webkit-transform:rotate(135deg);}

.wrap {
    padding: 1em;
}

.foot {
    text-align: center;
    font-size: 12px;
    color: #000;
    padding: 3% 1.875rem 2rem;
}

.foot .box {
    display: flex;
    text-align: left;
    justify-content: space-between;
}
.foot .box .power {
    width: 30%;
}
.foot .box .copyright {
    width: 30%;
}

.foot .box .flinks{
    width: 30%;
}
.foot .flinks a {
    color: inherit;
    margin: 0 10px;
}

.about {
    padding: 0 1.875rem;
    color: #000;
}

.about .content {
    border-top: 1px solid #999;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;

}
.about .title {
    font-size: 1.375em;
    width: 25%;
    line-height: 1.2;
    border-bottom: 2px solid #000;
}

.about .text {
    width: 70%;
    border-bottom: 2px solid #000;
}

.about .text p{
    margin-bottom: 1.5rem;
}

.about .content .text p:last-child {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 3rem;
    font-weight: normal;
}

.about .contact {
    padding: 3rem 0;
    display: flex;
    justify-content: space-between;
}

.about .contact p {
   margin-bottom: 0;
}

.about .contact .addr{
    margin-bottom: 3rem;
}

.about .contact .item {
    display: flex;
    margin-bottom: 3em;
}
.about .contact .item .txt:first-child {
    margin-right: 10%;
}

.prodetail {
    padding: 1.875em 6.6875rem;
}

.prodetail .text {
    width: 100%;
    align-items: flex-start;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.prodetail .text .p1 {
    width: 25%;
}

.prodetail .text .p1 h2{
    font-size: 3em;
    line-height: 1.1;
}
.prodetail .text .p1 h3{
    font-size: 1em;
    margin-top: 1em;
}
.prodetail .text .p1 p {
    font-size: .8em;
    margin-top: 2em;
}

.prodetail .text .p2 {
    width: 41.66667%;
    padding: 0 2rem;
}

.prodetail .text .p3 {
    width: 33.33333%;
}

.prodetail .pics,
.prodetail .pics table,
.prodetail .pics img {
    width: 100%!important;
}

.prodetail .pics {
    margin-top: 5%;
}

.prodetail .pics img {
    /*display: block;*/
}

.page {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5%;
}

.page a,
.page span {
    font-size: 14px;
    display: block;
    line-height: 1;
}

.page a svg {
    fill: #000;
}

.page span {
    margin: 0 20px;
}

.newsdetail {
    padding: 1.875em;
    max-width: 80%;
    margin: 0 auto;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.newsdetail .left {
    width: 30%;
    text-align: right;
}

.newsdetail .left h2 {
    margin-bottom: 1em;
}

.newsdetail .left p {
    font-size: 12px;
    color: #666;
}

.newsdetail .right {
    width: 60%;
}

.projects-list{
    display: flex;
    flex-wrap: wrap;
}
.projects-list .item{
    width: 25%;
}
.projects-list .item a{
    display: block;
    color: #000;
}
.projects-list .item a .image{
    height: 0;
    padding-bottom: 76.6666%;
    position: relative;
}
.projects-list .item a .image .cover{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}
.projects-list .item a .image .cover:not(.-active) {
    opacity: 0;
}
.projects-list .item a .image .cover .image-wrap{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.projects-list .item a .image .cover .image-wrap img {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: cover;
    max-width: calc(100% + 2px);
}
.projects-list .item a .info{
    overflow: hidden;
    height: 140px;
    font-size: 12px;
    font-family: auto;
}
.projects-list .item:nth-child(4n-3) a .info {
    padding-left: 3px;
}

.projects-list .item a .info .basic{
    height: 40px;
}
.projects-list .item a .info .basic .title{
    float: left;
    width: 66.6666%;
}
.projects-list .item a .info .basic .client {
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.projects-list .item a .info .extra{
    margin-top: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 80px;
    line-height: 20px;
}

.projects-list.news-list .item a .info .extra{
    text-overflow:unset;
    white-space: normal;
}
@media screen and (max-width:1024px){
    .projects-list .item{width:33.333%;}
}
@media screen and (max-width:768px){
    html.on{width:100%; height:100vh; overflow:hidden;}
    .header .logo{margin:20px 0;}
    .header .nav-btn{display:block;}
    .header .nav{width:100%; height:calc(100% - 6.25em); padding:10px 5% 20px; margin:0; background-color:rgba(255, 255, 255, .95); position:fixed; bottom:0; right:-100%; z-index:9999; overflow:auto; display:block;
    transition:all .5s;
    -o-transition:all .5s;
    -ms-transition:all .5s;
    -moz-transition:all .5s;
    -webkit-transition:all .5s;}
    .header .nav.on{right:0;}
    .header .nav .n1{height: auto;margin: 2em 0;}
    .header .nav .n1>a{font-size:3em;display: block;text-align: center;}
    .header .nav .n1>a.active{opacity: unset;}
    .header .nav .n2{display: block;position: unset;opacity: 1;transform: unset;width: 100%;background: unset;}
    .header .nav .n2 a{font-size:1.5em;display: block;text-align: center;margin: .5em 0;opacity: .8;}
    .prodetail .text .p1,.prodetail .text .p2,.prodetail .text .p3{width: 100%;font-size: 1.2em;}
    .prodetail .text .p2{padding: 2em 0;}
    .newsdetail{max-width: unset;}
    .newsdetail .left,.newsdetail .right{width: 100%;}
    .newsdetail .left{text-align: center;margin-bottom: 5%;}
    .about .content p{font-size: .8em;}
    .prodetail .pics tr,.prodetail .pics td{width: 100%;display: block;}
    .projects-list .item{width: 50%;}
}
@media screen and (max-width:425px){
    .wrap{padding: 5px;}
    .prodetail,.newsdetail{padding: 2em 10px;}
    .header,.about{padding: 0 10px;}
    .header .logo{left: 10px;}
    .projects-list .item{width: 100%;}

    .about .content{flex-direction: column;}
    .about .title{width: 100%;padding-bottom: 2rem;margin-bottom: 2rem;}
    .about .text{width: 100%;}
    .about .content .text p:last-child{font-size: 3rem;}
    .about .contact{flex-direction: column;}
    .about .contact .item{margin-bottom: 2rem;}

    .flinks{display: none;}
    .foot{padding: 3% 10px;}
    .foot .box{display: block;}
    .foot .box .power,.foot .box .copyright{
        width: 100%;
        margin-bottom: 5px;
    }
}