@charset "utf-8";
/* CSS Document */ 
*{padding: 0; margin: 0}
body,html {margin: 0px; padding: 0px; -webkit-text-size-adjust: none}
body {margin: 0 auto;font-size: 12px; line-height: 1.6;}
@font-face {
    font-family: 'MTLt';
    src: url('fonts/MTLt.woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MTRg';
    src: url('fonts/MTRg.woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'HThin';
    src: url('fonts/HThin.woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'HRegular';
    src: url('fonts/HRegular.woff');
    font-weight: normal;
    font-style: normal;
}
.fl{display:inline;float:left}
.fr{display:inline;float:right}
.clearfix:after{display:block;clear:both;width:100%;height:0px;line-height:0px;font-size:0px;margin:0;padding:0; content: ""}
a{text-decoration: none;}
ul,li{list-style: none;}
.fw600{font-weight: 600}
.fs12{font-size: 12px}
.fs13{font-size: 13px}
.fs14{font-size: 14px}
.fs15{font-size: 15px}
.fs16{font-size: 16px!important}
.fs20{font-size: 20px!important}

.fl{float: left;}
.fr{float: right;}
.pdl30{padding-left: 30px}
.pdl20{padding-left: 20px}

.c499{color: #499a97}
.red{color: #cd4619}
.cd60{color: #d60d17!important}
.textc{text-align: center;}
.textl{text-align: left!important;}
.textr{text-align: right!important;}
.container{width: 1180px; margin: 0 auto; position: relative;}
.m{display: none;}
.pc{display: block;}
.dn{display: none;}
input:focus { outline: none; } 


.container {width: 1100px;margin: 0 auto;padding: 0;}
.header{height: 65px;width: 100%;left: 0;top: 0;z-index: 99;position: fixed;}
.header a{width: 140px; margin: 18px 0 10px 0; display: inline-block; padding-left: 3rem}
.header .meun-off{position: absolute; top: 22px; right: 3rem; cursor: pointer; }
.header .meun-off img{width: 25px}
.header .nav-box{position: absolute; color: #000; right: 90px; top: 16px}
.header .nav-box .link{color: #000;padding-left: 10px;font-family: 'MTRg';margin: 7px 0;font-size: 14px;display: inline-block;}
.header .nav-box .link:hover{color: #fa6b0d}
.header-vd .nav-box .link{color: #FFF}

.header.transition{background-color: #FFF;transition: transform .3s cubic-bezier(0.35, 0, 0.25, 1), -webkit-transform .3s cubic-bezier(0.35, 0, 0.25, 1);box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);top: 0;z-index: 999;}
.header.transition .link{color: #000}
.ohidden{overflow: hidden;}

.ohidden .header.transition{background-color: inherit;}
.ohidden .header.transition .link{color: #FFF}

.hide-nav {top: 0;left: 0;z-index: 98;position: fixed;overflow: hidden;display: none;width: 100%;height: 100%;background: #000;-moz-transform: scale(1.4);-ms-transform: scale(1.4);-webkit-transform: scale(1.4);transform: scale(1.4);-moz-transition-property: -moz-transform;-o-transition-property: -o-transform;-webkit-transition-property: -webkit-transform;transition-property: transform;-moz-transition-duration: 0.4s;-o-transition-duration: 0.4s;-webkit-transition-duration: 0.4s;transition-duration: 0.4s;}
.hide-nav-wrap {width: 100%;height: 100%;display: table;table-layout: fixed}
.hide-nav.active {-moz-transform: scale(1);-ms-transform: scale(1);-webkit-transform: scale(1);transform: scale(1)}
.menus-box{display: flex; justify-content: space-between;}
.menus-box .mb01{width: 45%; padding-top: 15%}
.menus-box .mb01 .mbb-list{padding-left: 3rem}
.menus-box .mb01 .link{font-size: 4.8em; color: #808080; font-family: 'MTRg'; display:block; line-height: 75px;-webkit-transition: all .5s;transition: all .5s;}
.menus-box .mb01 .link.actvie{color: #fa6b0d}
.menus-box .mb01 .link:hover{color: #fa6b0d}
.menus-box .mb02{width: 15%; padding-top: 15%}
.menus-box .mb02 p{color: #FFF; font-family: "MTRg"; font-size: 14px; padding-bottom: 10px}
.menus-box .mb02 img{width: 120px}
.menus-box .mb03{width: 38%; padding: 15% 2% 0 0}
.menus-box .mb03 img{width: 100%}

.banner-wrap{width: 100%; position: relative; font-size: 0}
.banner-wrap img{width: 100%; height: 100%; object-fit: cover;}
.banner-down{position: absolute; bottom: 30px; left: 50%; margin-left: -15px; z-index: 99; cursor: pointer; animation: arrow_down 4.0s infinite ease-in-out;}

.i-about{background-color: #ffeddf; padding: 4rem 0}
.i-about-box{padding: 0 3rem;}
.i-about-box .i-about-con{display: flex; justify-content: space-between;}
.i-about-box .i-about-con .left{width: 45%; padding: 3rem 0; position: relative;}
.i-about-box .i-about-con .left:before{width: 70px; height: 1px; background-color: #000; content: ""; position: absolute; left: 0; top: 0; font-size: 0}
.i-about-box .i-about-con .left:after{width: 70px; height: 1px; background-color: #000; content: ""; position: absolute; left: 0; bottom: 0; font-size: 0}
.i-about-box .i-about-con .left p{font-size: 20px; font-family: 'MTRg'; padding-right: 4rem}
.i-about-box .i-about-con .right{width: 50%;padding: 3rem 0;}
.i-about-box .i-about-con .right p{font-size: 18px}
.i-more{padding: 2rem 0 0 0;}
.i-more a{font-size: 14px; font-family: 'MTLt'; color: #000}
.i-more a:hover{color: #fa6b0d}

.i-products{}
.i-pbox{width: 100%; background-color: #f2f2f2}
.i-pbox .i-pone{width: 100%; margin-bottom: 10px}
.i-pbox .i-pone a {display: block;overflow: hidden;width: 100%; height: 100%; position: relative;}
.i-pbox .i-pone a .thumb{font-size: 0}
.i-pbox .i-pone a img {width: 100%;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s;transition: all 1s; height: 100%}
.i-pbox .i-pone:hover img {-webkit-transform: scale(1.1, 1.1);-moz-transform: scale(1.1, 1.1);-o-transform: scale(1.1, 1.1);transform: scale(1.1, 1.1)}
.i-pbox .i-pone .txt {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1);-webkit-transition: all .5s;transition: all .5s;}
.i-pbox .i-pone:hover .txt{opacity: 1; background-color: rgba(0,0,0, .4);}

.i-pbox .i-pone .txt .mtxt{position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex: 1}
.i-pbox .i-pone .txt .mtxt .mt-box{width: 100%; font-family: "MTLt";text-align: center;}
.i-pbox .i-pone .txt .mtxt .mtitle{color: #FFF; font-size: 3rem;line-height: 45px}
.i-pbox .i-pone .txt .mtxt .mkeyword{color: #FFF; font-size: 14px;}



.i-pbox .i-ptwo{width: 100%; display: flex; justify-content: space-between;margin-bottom: 10px}
.i-pbox .i-ptwo .i-ptwobox{font-size: 0; width: calc(100% / 2 - 5px);}
.i-pbox .i-ptwo .i-ptwobox:first-child{margin-right: 10px}
.i-pbox .i-ptwo .i-ptwobox a {display: block;overflow: hidden;width: 100%; height: 100%; position: relative; font-size: 0}
.i-pbox .i-ptwo .i-ptwobox a .thumb{font-size: 0}
.i-pbox .i-ptwo .i-ptwobox a img {width: 100%;-webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s;transition: all 1s; height: 100%}
.i-pbox .i-ptwo .i-ptwobox:hover img {-webkit-transform: scale(1.1, 1.1);-moz-transform: scale(1.1, 1.1);-o-transform: scale(1.1, 1.1);transform: scale(1.1, 1.1)}
.i-pbox .i-ptwo .i-ptwobox .txt {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1);-webkit-transition: all .5s;transition: all .5s;}
.i-pbox .i-ptwo .i-ptwobox:hover .txt{opacity: 1; background-color: rgba(0,0,0, .4);}

.i-pbox .i-ptwo .i-ptwobox .txt .mtxt{position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex: 1}
.i-pbox .i-ptwo .i-ptwobox .txt .mtxt .mt-box{width: 100%; font-family: "MTLt";text-align: center;}
.i-pbox .i-ptwo .i-ptwobox .txt .mtxt .mtitle{color: #FFF; font-size: 3rem; line-height: 45px}
.i-pbox .i-ptwo .i-ptwobox .txt .mtxt .mkeyword{color: #FFF; font-size: 14px;}


.zbanner{background-color: #ffeddf; height: 280px; width: 100%}
.zbanner .zcase-tit{padding: 12.5rem 3rem 0 3rem}
.zbanner .zcase-tit .tit{font-size: 4em; font-family: 'MTLt'}

.zcase-bg{width: 100%}
.zcase-bg img{width: 100%}

.zcases{width: 100%}


.card-project { position: relative; }
.card-project.is-landscape { grid-column: span 2; }
.card-project-overlay { position: absolute; top:0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; padding: 16px; opacity: 0; visibility: hidden; transition: opacity 0.3s cubic-bezier(.77,0,.175,1), visibility 0.3s cubic-bezier(.77,0,.175,1); pointer-events: none; background: rgba(0, 0, 0, 0.15); }
.card-project h3 {overflow-wrap: break-word; color: #FFF; font-family: 'MTLT'; font-size: 30px}
.card-project h4 { margin-bottom: 10px; font-size: 20px; color: #FFF; font-weight: 300; line-height: 20px}
.card-project p { max-width: 410px; width: 100%; margin: 0 auto; }
.card-project img { height: 100%; object-fit: cover; width: 100%}
.card-project:hover .card-project-overlay { opacity: 1; visibility: visible;}


.filterable {position: relative; background-color: #f2f2f2; display: flex; flex-wrap: wrap;}
.filterable .card-project { width: 33.33%;margin-bottom: 10px}
.filterable .card-project.is-landscape { width: 66.66%; }
.filterable .card-project.is-landscape-large { width: 100%; }
.filterable .card-project-image { width: 100%; display: block; height: 32vw; overflow: hidden; }
.filterable .card-project-image .image{font-size: 0; height: 100%}
.filterable .card-project-image .image picture{font-size: 0}
.filterable .card-project-image img { height: 100%; object-fit: cover;object-position: center;width: 100%}
.filterable .card-project:nth-child(1) .card-project-image .image{margin-right:10px }
.filterable .card-project:nth-child(3) .card-project-image .image{margin-right:10px }
.filterable .card-project:nth-child(3) .card-project-image .image{margin-right:10px }
.filterable .card-project:nth-child(5) .card-project-image .image{margin-right:10px }
.filterable .card-project:nth-child(6) .card-project-image .image{margin-right:10px }
.filterable .card-project:nth-child(9) .card-project-image .image{margin-right:10px }
.filterable .card-project:nth-child(10) .card-project-image .image{margin-right:10px }
.filterable .card-project:nth-child(12) .card-project-image .image{margin-right:10px }


.zabout{width: 100%; padding: 3rem 0}
.zabout-box{padding: 0 3rem}
.zabout-box .zabout-con{display: flex; justify-content: space-between;}
.zabout-box .zabout-con .left{width: 45%; padding: 3rem 0; position: relative;}
.zabout-box .zabout-con .left p{font-size: 16px; font-family: 'MTLt'; padding:15px 2rem 0 0}
.zabout-box .zabout-con .left p:first-child{padding-top: 0}
.zabout-box .zabout-con .right{width: 50%;padding: 3rem 0;}
.zabout-box .zabout-con .right img{width: 100%}

.zab-space{width: 100%; padding: 5rem 0}
.zab-space .swiper-slide{width: auto!important; font-size: 0}
.zab-space img{max-width: 100%; max-height: 480px}

.zab-p-list {padding: 0 3rem}
.zab-p-list ul{padding: 1rem 0 2rem 0;}
.zab-p-list ul li{width: calc(100% / 6 - 45px); padding: 4px 15px; border: 1px solid #ddd; margin-left: 10px; font-size: 0; display: inline-block; margin-bottom: 20px;}
.zab-p-list ul li:nth-child(6n+1){margin-left: 0;}
.zab-p-list ul li img{width: 100%;}



.znews-box{padding: 4rem 3rem}
.znews-wrap{display: flex; flex-wrap: wrap;}
.znews-wrap a{width: calc(100% / 3 - 20px); background-color: #FFF; display: inline-block; margin-right: 27px; margin-bottom: 30px; transition: .5s; -webkit-transition: .5s;}
.znews-wrap a:nth-child(3n){margin-right: 0;}
.znews-wrap .time{font-size: 1em; font-family: "MTRg"; color: #000; padding-bottom: 5px}
.znews-wrap .thumb{position: relative; overflow: hidden;}
.znews-wrap .thumb .thumb-box{position: relative; overflow: hidden;}

.znews-wrap .img{width: 100%; font-size: 0;height: auto;overflow: hidden;background: center center no-repeat; background-size: cover;-webkit-transition: all .5s;}
.znews-wrap .img img{width: 100%;}
.znews-wrap .thumb:hover .img{-webkit-transform: scale(1.1, 1.1);-moz-transform: scale(1.1, 1.1);-o-transform: scale(1.1, 1.1);transform: scale(1.1, 1.1)}
.znews-wrap .txt h3{color: #000; font-size: 14px; padding-top: 10px; font-weight:500}


.znews-tit{padding: 12rem 3rem 0 3rem}
.newstit{font-size: 2.5em; font-family: 'MTLt'; width: 60%; line-height: 45px}
.news-detail{padding: 4rem 3rem}
.news-detail .news-d-box .ztime{text-align: right; font-size: 13px; font-family: 'MTRg'; font-weight: 600; padding-bottom: 5px}
.news-detail .news-d-box .thumb{width: 100%}
.news-detail .news-d-box .thumb img{width: 100%}
.news-detail .news-d-box .detail{max-width: 800px; margin:0 auto; margin-bottom: 3rem}

.contact{background-color: #FFF; padding: 7rem 0 4rem 0}
.service-box{padding: 4rem 0}

.service-box{padding: 4rem 3rem}
.service-b-wrap{display: flex; flex-wrap: wrap;}
.service-b-wrap .ser-list{width: calc(100% / 3 - 20px); background-color: #FFF; display: inline-block; margin-right: 27px; margin-bottom: 30px; transition: .5s; -webkit-transition: .5s;}
.service-b-wrap .ser-list:nth-child(3n){margin-right: 0;}
.service-b-wrap .time{font-size: 1em; font-family: "MTRg"; color: #000; padding-bottom: 5px}
.service-b-wrap .thumb{width: 100%; font-size: 0;position: relative; overflow: hidden;}
.service-b-wrap .thumb img{width: 100%;}

.service-b-wrap .txt{padding-bottom: 15px}
.service-b-wrap .txt h3{font-family: 'MTRg'; font-size: 2em}
.service-b-wrap .txt .desc{font-size: 16px; line-height: 16px}

.zcase-intro{width: 100%; background-color: #ffeddf; padding: 3rem 0 4rem 0;}
.zcase-intro-box{display: flex; color: #606060; padding: 0 3rem}
.zcase-intro-box .left{width: 50%;}
.zcase-intro-box .time{font-size: 22px;}
.zcase-intro-box .left .nav{font-size:14px;}

.zcase-intro-box .right{color: #000; width: 40%;}
.zcase-intro-box .right h2{font-weight: inherit; font-size: 20px; padding-bottom: 20px; border-bottom: 1px solid #ddd;}
.zcase-intro-box .right .detail{font-size: 14px; padding: 2rem 0; color: #666;}
.zcase-intro-box .right .detail p{padding: 15px 0; line-height: 1.7;}
.zcase-intro-box .right .detail img{width: 100%;}
.zcase-intro-box .right .detail p img{width: 100%;}

.c-line{padding: 2rem 0; position: relative;}
.c-line:before{position: absolute; width:60px; background-color: #000; content: ""; height: 1px; left: 0; top: 1rem}
.c-txtbox{padding: 1rem 0 5rem 0; display: flex; justify-content: space-between;}
.c-txtbox .c-tit{width: 30%}
.c-txtbox .c-tit .btit{font-size: 12px; color: #000}
.c-txtbox .c-tit .ncon{font-size: 20px; font-family: 'MTRg'; padding-bottom: 10px;color: #000}
.c-txtbox .c-desc{width: 65%}
.c-txtbox .c-desc .desc-txt{font-size: 14px; color: #333}
.zc-detail-box{width: 100%;}
.zc-detail-box .detail{overflow: hidden; font-size: 0; background-color: #f2f2f2}
.zc-detail-box .detail img{width: 100%; margin-bottom: 10px}
.zcp{padding-top: 5rem}
.zcp img{width: 70px}

.footer{background-color: #ffeddf; padding: 6rem 0 4rem 0}
.footer-box{display: flex; justify-content: space-between; padding: 0 3rem}
.footer-box .footer-list{width: 50%;}
.footer-box .footer-list .footer-list-ico{margin-top: 12rem; padding-top: 4rem; position: relative;}
.footer-box .footer-list .footer-list-ico:before{width: 60px; height: 1px; background-color: #000; content: ""; top: 0; left: 0; position: absolute;}
.footer-box .footer-list .footer-list-ico img{width: 130px}
.footer-box .footer-copy{padding-top: 5rem; font-family: "MTRg"}
.footer-box .footer-copy a{color: #000}

.footer-box .footer-list .tit{font-size: 14px; font-family: "MTRg"}
.footer-box .footer-list .desc{font-size: 3.8rem; font-family: "MTLt"}
.footer-box .footer-txt{display: flex; justify-content: space-between; padding-top: 4rem}
.footer-box .footer-txt .f-txt-box{width: 46%; font-family: "MTRg"}
.footer-box .footer-txt .f-txt-box .find{padding-bottom: 1.5rem}
.footer-box .footer-txt .f-txt-box .txt{font-size: 14px}
.footer-box .footer-txt .f-txt-box .addr{padding-top: 2rem}
.footer-box .footer-txt .f-txt-box .code{width: 100px; padding-top: 6rem}


@media (min-width:1680px) {
    .i-about-box .i-about-con .left{width: 40%;}
    .zabout-box .zabout-con .left p:first-child{padding-top: 50px}
    .zabout-box .zabout-con .left p{padding:38px 2rem 0 0}
    .contact{padding: 23rem 0 4rem 0}
}

@media (max-width:767px) {

    .pc{display: none!important;}
    .m{display: block;}

    .header .meun-off{right: 1rem; top: 17px}
    .header a{padding-left: 1rem}
    .menus-box .mb01{width: 100%;padding-top:50%}
    .menus-box .mb01 .mbb-list{padding-left: 0; text-align: center;}
    .menus-box .mb01 .link{font-size: 3.5em; line-height: 60px}

    .i-about-box{padding: 0 1rem}
    .i-about-box .i-about-con{display: block;}
    .i-about-box .i-about-con .left{width: 100%}
    .i-about-box .i-about-con .right{width: 100%}
    .i-pbox .i-pone .txt .mtxt .mtitle{font-size: 2.2rem}
    .i-pbox .i-pone .txt{opacity: 1}
    .i-pbox .i-ptwo{display: block;}
    .i-pbox .i-ptwo .i-ptwobox{width: 100%}
    .i-pbox .i-ptwo .i-ptwobox .txt{opacity: 1}
    .i-pbox .i-ptwo .i-ptwobox .txt .mtxt .mtitle{font-size: 2rem}

    .zbanner .zcase-tit{padding-left: 1rem}
    .zbanner .zcase-tit .tit{font-size: 4em;}
    .filterable .card-project, .grid-spacer{width: 100%}
    .filterable .card-project.is-landscape{width: 100%}
    .filterable .card-project-image{height: auto;}

    .zabout-box{padding: 0 1rem}
    .zabout-box .zabout-con{display: block;}
    .zabout-box .zabout-con .left{width: 100%}
    .zabout-box .zabout-con .left p{padding-right: 0}
    .zabout-box .zabout-con .right{width: 100%; padding: 1rem 0}

    .zab-p-list{padding: 0}
    .zab-p-list ul{padding: 1rem 12px 1rem 12px;}
    .zab-p-list ul li{width: calc(100% / 2 - 20px); padding: 0 5px; margin-left: 10px; margin-bottom: 15px; border: 1px solid #ddd;}
    .zab-p-list ul li:nth-child(6n+1){margin-left: 10px;}
    .zab-p-list ul li:nth-child(2n+1){margin-left: 0;}

    .zbanner .zcase-tit .tit.nlist{font-size: 3.5em}
    .znews-box{padding: 4rem 1rem}
    .znews-wrap a{width: 100%; margin-right: 0}

    .service-box{padding: 4rem 1rem}
    .service-b-wrap .ser-list{margin-right: 0; width: 100%}

    .znews-tit{padding: 14rem 1rem 0 1rem}
    .newstit{font-size: 18px; width: 100%; line-height: 30px}
    .news-detail{padding: 4rem 1rem}

    .footer{padding: 3rem 0 2rem 0}
    .footer-box{padding: 0 1rem; display: block;}
    .footer-box .footer-list{width: 100%}
    .footer-box .footer-list .footer-list-ico{padding-top: 3rem; margin-top: 0}
    .footer-box .footer-copy{padding-top: 3rem; text-align: center;}
    .footer-box .footer-txt .f-txt-box{width: 48%}
    .footer-box .footer-txt .f-txt-box .code{padding: 9rem 0 0 3rem}

    .footer-box .footer-list .tit{padding-top: 3rem}
    .footer-box .footer-txt{padding-top: 1rem}


}