body {
    font-family: lan-ting-x-h;
    font-weight: 300;
    font-size: 14px !important;
    letter-spacing:1px;
}


.img,img{
    max-width:100%;
    transition:all .3s ease-out 0s
}
a,.button{
    -webkit-transition:all .3s ease-out 0s;
    -moz-transition:all .3s ease-out 0s;
    -ms-transition:all .3s ease-out 0s;
    -o-transition:all .3s ease-out 0s;
    transition:all .3s ease-out 0s
}
a:focus,.button:focus{
    text-decoration:none;
    outline:0
}
a:focus,a:hover,.portfolio-cat a:hover,.footer-menu li a:hover{
    color:#999;
    text-decoration:none
}
a,button{
    color:#444;
    outline:medium none
}
.uppercase{
    text-transform:uppercase
}
.capitalize{
    text-transform:capitalize
}
h1,h2,h3,h4,h5,h6{
    font-family:'Dosis',sans-serif;
    font-weight:normal;
    color:#232332;
    margin-top:0;
    font-style:normal;
    font-weight:300;
    letter-spacing:1px;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
    color:inherit
}
h1{
    font-size:40px;
    font-weight:500
}
h2{
    font-size:35px
}
h3{
    font-size:28px
}
h4{
    font-size:22px
}
h5{
    font-size:18px
}
h6{
    font-size:16px
}
ul{
    margin:0;
    padding:0
}
li{
    list-style:none
}
p{
    font-size:14px;
    font-weight:normal;
    line-height:24px;
    color:#555;
    margin-bottom:15px
}
hr{
    padding:0;
    border-bottom:1px solid #eceff8;
    border-top:0
}
label{
    color:#444;
    cursor:pointer;
    font-size:17px;
    font-weight:400;
    margin-bottom:10px;
    margin-top: 12px;
}
*::-moz-selection{
    background:#d6b161;
    color:#fff;
    text-shadow:none
}
::-moz-selection{
    background:#555;
    color:#fff;
    text-shadow:none
}
::selection{
    background:#555;
    color:#fff;
    text-shadow:none
}
*::-moz-placeholder{
    color:#555;
    font-size:14px;
    opacity:1
}
*::placeholder{
    color:#555;
    font-size:14px;
    opacity:1
}
.btn{
    -moz-user-select:none;
    background:#444 none repeat scroll 0 0;
    border:1px solid transparent;
    border-radius:2px;
    color:#fff;
    cursor:pointer;
    display:inline-block;
    font-family:dosis;
    font-size:14px;
    font-weight:400;
    letter-spacing:1px;
    line-height:1.42857;
    margin-bottom:0;
    padding:7px 20px;
    text-align:center;
    text-transform:uppercase;
    touch-action:manipulation;
    transition:all .3s ease 0s;
    vertical-align:middle;
    mehedi-space:nowrap
}
.btn:hover{
    background:transparent;
    border-color:#444
}
.btn.btn-large{
    padding:10px 25px
}
.btn-lg{
    font-weight:700;
    padding:13px 31px
}
.btn.mehedi-btn:hover{
    border-color:#ddd;
    color:#ddd
}
.bg-1{
    background:url(img/bg/bg-1.jpg)
}
.bg-2{
    background:url(img/bg/bg-2.jpg)
}
.bg-3{
    background:url(img/bg/bg-3.jpg)
}
.bg-4{
    background:url(img/bg/12.jpg)
}
.bg-5{
    background:url(img/bg/15.jpg)
}
.bg-6{
    background:url(img/bg/bg-video.jpg)
}
.color-mehedi{
    color:#fff!important
}
.mehedi-bg{
    background:#fff
}
.bg-1,.bg-2,.bg-3,.bg-4,.bg-5,.bg-6,.bg-7,.bg-8,.bg-9,.bg-10{
    background-attachment:fixed;
    background-clip:initial;
    background-color:rgba(0,0,0,0);
    background-origin:initial;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;
    z-index:0
}
.bg-black-alfa-5::before,.bg-black-alfa-10::before,.bg-black-alfa-15::before,.bg-black-alfa-20::before,.bg-black-alfa-25::before,.bg-black-alfa-30::before,.bg-black-alfa-35::before,.bg-black-alfa-40::before,.bg-black-alfa-45::before,.bg-black-alfa-50::before,.bg-black-alfa-55::before,.bg-black-alfa-60::before,.bg-black-alfa-65::before,.bg-black-alfa-70::before,.bg-black-alfa-75::before,.bg-black-alfa-80::before,.bg-black-alfa-85::before,.bg-black-alfa-90::before,.bg-black-alfa-95::before{
    content:"";
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:0
}
.bg-black-alfa-5::before,.bg-black-alfa-10::before,.bg-black-alfa-15::before,.bg-black-alfa-20::before,.bg-black-alfa-25::before,.bg-black-alfa-30::before,.bg-black-alfa-35::before,.bg-black-alfa-40::before,.bg-black-alfa-45::before,.bg-black-alfa-50::before,.bg-black-alfa-55::before,.bg-black-alfa-60::before,.bg-black-alfa-65::before,.bg-black-alfa-70::before,.bg-black-alfa-75::before,.bg-black-alfa-80::before,.bg-black-alfa-85::before,.bg-black-alfa-90::before,.bg-black-alfa-95::before{
    background:rgba(0,0,0,0.05) none repeat scroll 0 0
}
.bg-black-alfa-40::before{
    background:rgba(0,0,0,0.4) none repeat scroll 0 0
}
.owl-carousel .owl-nav div{
    background:rgba(255,255,255,0.8) none repeat scroll 0 0;
    height:40px;
    left:20px;
    line-height:40px;
    opacity:0;
    position:absolute;
    text-align:center;
    top:50%;
    transform:translateY(-50%);
    transition:all .3s ease 0s;
    visibility:hidden;
    width:40px
}
.owl-carousel .owl-nav div.owl-next{
    left:auto;
    right:20px
}
.owl-carousel:hover .owl-nav div{
    opacity:1;
    visibility:visible
}
.header-fixed{
    left:0;
    position:absolute;
    right:0;
    z-index:1030
}

.header-fixed .basic-menu>li>a{
    color: white;
    font-size: 18px;
}

.header-transparent{
    background:transparent none repeat scroll 0 0;
    box-shadow:0 -1px 0 rgba(255,255,255,0.1) inset;
    transition:height .3s ease-out 0s,background .3s ease-out 0s,box-shadow 0s ease-out 0s
}
.sticky{
    left:0;
    margin:auto;
    position:fixed;
    top:0;
    width:100%;
    background:#f8f6f5 none repeat scroll 0 0;
    /*box-shadow:0 -1px 0 #f5f5f5 inset;*/
    transition:height .3s ease-out 0s,background .3s ease-out 0s,box-shadow .3s ease-out 0s;
    z-index:1030
}

.breadcrumb-2-area{
    background-position:50% 0;
    height:70vh;
    overflow:hidden;
    padding:0
}
.hero-caption{
    display:table;
    height:100%;
    margin:0 auto;
    position:relative;
    width:80%;
    z-index:2
}
.hero-text{
    display:table-cell;
    height:100%;
    position:relative;
    vertical-align:middle
}
h1.breadcrumb-2{
    font-size:36px;
    font-weight:600;
    letter-spacing:5px
}
.logo{
    padding:40px 0 15px 0;
    transition:all .3s ease 0s
}
.logo img{
	height: 30px;
}

.daohang img{
	height: 15px;
}


.logo a{
    color: white;
}


.logo h4{
    font-weight:600;
    margin:0
}
.header-transparent .logo h4{
    color:#fff
}
.sticky .logo h4{
    color:#222
}
.sticky .logo{
    padding:40px 0 15px 0;
}
.sticky .logo a{
    color: black;
}
.basic-area{
    position:relative
}
.basic-menu{
    float:right
}
.basic-menu li{
    float:left;
    margin-left:60px;
    position:relative;
    transition:all .3s ease 0s
}
.basic-menu>li:last-child:after{
    display:none
}
.basic-menu a{
    /*color:#232332;*/
    display:inline-block;
    /*text-transform:uppercase;*/
    position:relative;
    font-size:16px;
    letter-spacing:1px;
    /*text-transform:uppercase*/
}

.basic-menu>li>a::before{
    background:#666 none repeat scroll 0 0;
    bottom:23px;
    content:"";
    height:1px;
    left:0;
    margin:auto;
    opacity:0;
    position:absolute;
    right:0;
    transition:all .3s ease 0s;
    width:0
}
.basic-menu>li>a{
    padding:50px 0
}
.basic-menu li a:hover{
    color:black;
}
.basic-menu li:hover>a:before{
    opacity:1;
    width:100%;

}
.current{
    color: #585656 !important;;
}
.basic-menu li ul{
    background:#222 none repeat scroll 0 0;
    box-shadow:0 6px 12px rgba(0,0,0,0.176);
    float:none;
    left:0;
    opacity:0;
    position:absolute;
    text-align:left;
    top:110%;
    transition:all .3s ease 0s;
    visibility:hidden;
    width:200px;
    z-index:11
}
.basic-menu li:hover>ul{
    opacity:1;
    top:100%;
    visibility:visible
}
.basic-menu li ul li{
    border-bottom:1px solid rgba(51,51,51,0.5);
    display:block;
    float:none;
    margin:0
}
.basic-menu li ul li:last-child{
    border-bottom:0 none;
    margin:0
}
.basic-menu li ul li a i{
    float:right
}
.basic-menu li ul li ul{
    left:100%;
    opacity:0;
    position:absolute;
    top:10%;
    visibility:hidden;
    z-index:999
}
.basic-menu li ul li:hover>ul{
    opacity:1;
    top:0;
    visibility:visible
}
.basic-menu li ul li a{
    color:rgba(255,255,255,0.7);
    display:block;
    font-size:11px;
    padding:10px 15px
}
.basic-menu li ul li:hover>a{
    background:rgba(51,51,51,0.5) none repeat scroll 0 0;
    color:#fff
}
.basic-menu li ul li a span{
    float:right
}
.member-img img{
    width:100%
}
.menu-area .menu-p-right ul{
    left:auto;
    right:0
}
.basic-menu .menu-p-right ul li ul{
    right:100%
}
.headroom{
    left:0;
    position:fixed;
    right:0;
    top:0;
    z-index:10
}
.headroom--pinned{
    background:#fff none repeat scroll 0 0;
    box-shadow:0 -1px 0 #f5f5f5 inset;
    transform:translateY(0px)
}
.headroom--unpinned{
    transform:translateY(-100%)
}
.headroom{
    transition:transform .25s ease-in-out 0s;
    will-change:transform
}
.basic-space{
    height:78px
}
.header-transparent .basic-menu li a{
    color:#fff
}
.header-transparent.sticky .basic-menu>li>a{
    color:#232332
}
.sticky .basic-menu>li>a{
    padding:50px 0 15px 0;
    color: #585656;
    font-size: 18px;
}
.sticky .basic-menu>li::after{
    top:25px
}
.header-transparent .basic-menu>li>a::before{
    background:#f6f6f6 none repeat scroll 0 0
}
.header-transparent.sticky .basic-menu>li>a::before{
    background:#666 none repeat scroll 0 0
}
.sticky .basic-menu>li>a::before{
    bottom:17px
}
.hamburger{
    float:right;
    /*margin-left:20px;*/
    margin-top:24px;
    padding:0;
    transition:all .3s ease 0s
}
.hamburger-inner,.hamburger-inner::after,.hamburger-inner::before{
    height:2px;
    width:30px
}
.hamburger-inner::before{
    top:-8px
}
.hamburger--collapse .hamburger-inner::after{
    top:-16px
}
.hamburger-menu{
    float:right;
    margin-right:-30px;
    opacity:0;
    transition:all .3s ease 0s;
    visibility:hidden
}


nav.nav-menu-show{
    margin-right:0;
    opacity:1;
    visibility:visible
}
.sticky .hamburger{
    margin-top:17px
}
.basic-slider{
    position:relative
}
.height-100-vh{
    height:100vh
}
.daohang{
    float: right;
    text-align: right;
    display:none;
    width: 10%;
}
.basic-slider{
    display:block;
}
.title-page-m{
    display:none;
}

.index-page-about{
    width: 85%;
    float: left;
    /*padding-left: 7.5%;*/
}
.display-bar{
    width: 7.5%;
    float: left;
    padding-left: 2.5%;
    margin-top: 350px;
}


#main {
    float: left;
    overflow: hidden;
    width: 100%;
    margin-top: 50px;
}

#main .main-outer {
    overflow: hidden;
}

/*
    5. Works Grid
*/

#works-grid {
    overflow: hidden;
}

#works-grid .gutter {
    width: 1px;
}

#works-grid .works-item {
    display: block;
    position: relative;
    overflow: hidden;
    border: none;
    width: 100%;
    height: auto;
/*    margin-bottom: 5.6%;*/
    margin-bottom:20px;
    padding-bottom: 0;
    z-index: 3;
}

#works-grid .works-item .picture {
    position: relative;
    width: 100%;
    padding-bottom: 80%;
    height: 0;
    overflow: hidden;
}

#works-grid .works-item .picture .content {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 2;
}

#works-grid .works-item .picture .content .text {
    padding: 0px;
    text-align: center;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
    -webkit-transition: opacity 100ms, -webkit-transform 250ms;
            transition: opacity 100ms, -webkit-transform 250ms;
            transition: transform 250ms, opacity 100ms;
            transition: transform 250ms, opacity 100ms, -webkit-transform 250ms;
}

#works-grid .works-item .picture .content .text h2 {
    color: #fff;
    /*margin: 0 0 5px;*/
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
}

#works-grid .works-item .picture .content .text ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#works-grid .works-item .picture .content .text ul li {
    display: inline;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: 400;
}

#works-grid .works-item .picture .content .text ul li:after {
    content: '—';
    margin-left: 3px;
}

#works-grid .works-item .picture .content .text ul li:last-child:after {
    content: '';
    margin: 0;
}

#works-grid .works-item .picture img {
    width: 100%;
}

#works-grid .works-item .picture:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 250ms;
            transition: opacity 250ms;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

#works-grid .works-item:hover .picture .content .text {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}

#works-grid .works-item:hover .picture:before {
    opacity: 1;
}

#works-grid.columns-2 .works-item {
    width: 48.825%;
}

#works-grid.columns-4 .works-item {
    width: 23.2375%;
}

.pic-title{
    margin-top: 5px;
    margin-left: 0px;
    /*font-size: 15px;*/
}

.pic-fenge-line{
    display:none;
    margin-top: 20px;
    /*margin-bottom: 20px;*/
    width: 18px;
    height: 2px;
    background-color: #585656 !important;
    overflow: hidden;
}
.connect{
    text-align: left;
    float: right;
}

.huanhang{
    display: none;
}
.company{
    display: block;
    margin-bottom: 100px;
}


#daohangModel{
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    text-align: center;
    padding-top: 25%;
    padding-bottom: 15%;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: white;
}

#daohangModel ul{
    list-style: none;
    padding: 0;
    /*font-size: 24px;*/
    /*padding-top: 11%;*/
}
#daohangModel ul li{
    /*padding-top: 13.25%;*/
}
#daohangModel ul li span{
   font-size: 20px;
   color: white;
}


#daohangModel ul li a.current{
    font-family: PingFangSC-Light, sans-serif;
    color: #808080;
}

.daohangModel-item{
    font-size: 44px;
    font-family: Franklin Gothic Demi Cond;
    color: #504D4C
}
.daohangModel-item-sec{
    font-family: three-zero-one-cai978;
    font-size: 16px;
    color: #504D4C
}

#myModalLabel{
    color: #000000;
    font-family: PingFangSC-Light, sans-serif;
    font-size: 18px;
    padding-top: 5px;
}
.pic-img{
    width: 100% !important;
    padding-bottom: 10px;
}
.related-p{
/*    margin-bottom: 5px;
    margin-left: 4%;*/
    padding-left: 0px;
    padding-right: 0px;
}

.fenlei li:hover>a{
    color:#585656;
}

.all-jiantou{
    display: none;
}
#main{
    margin-top: 30px;
}
.pc-fenlei{
    display: block;
}
.m-fenlei{
    display: none;
}
.contcat-page{
    margin-top: 100px;
    width: 70%;
    margin-left:15%;
}

.about-line-allin{
    marall-jiantougin:0;
    margin-bottom:30px; 
    width:30px;
    height:1px;
    background-color:black;
    overflow:hidden;
}

.left_scroll_fix{
    /*width: 1.5%;*/
    position: fixed;
    top: 350px;
}

.logo-pc{
    display: block;
}
.logo-m{
    display: none;
}
.logo-black{
    display: none;
}
.logo-white{
    display: block;
}

.fenlei-pc-a{
    font-family: lan-ting-x-h;
    color:#999
}

#top{
    margin-top: 100px;
    margin-bottom: 10px;
    font-family: lan-ting-z-h;
}


.project-item{
    float: left;
    width: 32.3%;
    height: auto;
    margin-right: 1%;

}

.slide-2{
    background:rgba(0,0,0,0) url("../img/index-show.gif") repeat scroll center center / cover
}


.contact-input{
    border:1px dotted #ccc;
    border-radius:0;
    background-color:#F8F6F5
}

.contact-label{
    font-weight: 100;
    color: #585656;
    font-family: lan-ting-z-h;
}


.munu-pc{
    /*padding-right: 15px;*/
}

.munu-fenlei{
    margin-top: 80px;
    padding-right: 5%;
    padding-left:15px;
}

.header-area-box{
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}

.project_name_en_font{
    font-family: lan-ting-z-c-h;
}

.project_name_font{
    font-family: lan-ting-z-h;
}

#pictures{
    padding: 0 5%;
}

.detail-about{
    margin-right: 0px;
    margin-left: -5%;
}


.fenlei-nane-en{
    font-family: Franklin Gothic Demi Cond;
}
.fenlei-nane-en{
    font-family: lan-ting-x-h;
}
.m-fenlei li a{
    font-size: 20px;
}

.about-page{
    /*padding-left: 7.5%*/
}


.project_detail{
    margin-top: 110px;
    width: 100%

}

.pingmian-c{
    display: none;
}

.pingmian-pic{
    position: relative;
    width: 100%;
    padding-bottom: 70%;
    height: 0;
    overflow: hidden;
}

.bg_hui{
    background-color: #f8f6f5;
}

.juzhong{
    justify-content:center;
    align-items:center;
    display:-webkit-flex;
}

.font123{
    font-size: 14px;
    letter-spacing:1px;
    line-height:18px;
}

.hide_duoyu{
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.to-top{
	vertical-align:top;
	padding-top: 2px;
	width: 1%;
}

.about_desc_en{
	margin-top: 20px;
	font-size: 14px;
	letter-spacing:1px;
}
.project_desc{
    color: #514E4D;
    padding-right: 6%;
    line-height:25px;
}
.foot-logo{
    height: 70px;
}
.height-a{
    height: 20px;
}
.height-b{
    height: 20px;
    width: 20px;
}
.height-c{
    height: 20px;
    padding-left: 4px;
}
.btn-a{
	border:1px dotted #ccc;
	border-radius:0;
	background-color:#F8F6F5;
	text-transform:none;
	color: #585656;
	height: 45px;
	font-family: lan-ting-z-h;
	font-size: 17px;
}
@media (max-width: 768px){

	.btn-a{
		border:1px dotted #ccc;
		border-radius:0;
		background-color:white;
		text-transform:none;
		color: #585656;
		height: 45px;
		font-family: lan-ting-z-h;
		font-size: 17px;
	}
	.contact-input{
	    border:1px dotted #ccc;
	    border-radius:0;
	    background-color: white;
	}

	.height-c{
	    height: 15px;
	    padding-left: 3px;
	}
	.height-a{
	    height: 15px;
	}
	.height-b{
	    height: 15px;
	    width: 15px;
	}
    .foot-logo{
        height: 50px;
    }
    #top{
        margin-top: 100px;
        margin-bottom: 10px;
        font-family: lan-ting-z-h;
        font-size: 12px;
    }
    .to-top{
        vertical-align:top;
        padding-top: 2px;
        width: 3%;
    }
    #pictures{
        padding: 15px;
    }
    .project_desc{
        color: #514E4D;
        line-height:25px;
    }
    .basic-menu>li>a{
        padding: 15px 0;
    }

    .sticky .logo{
        padding:20px 0 15px 0;
    }

	.about_desc_en{
		margin-top: 20px;
		font-family: one-zero-third-CAI978;
		font-size: 16px;
		letter-spacing:1px;
	}

	.logo{
		padding:20px 0 15px 0;
		width: 65%;
	}
	.logo img{
		height: auto;
	}
	.daohang img{
		height: auto;
	}


    .menu-area{
        display:none;
    }
    .daohang{
        display:block;
        float: right;
        text-align: right;
        padding:25px 0 15px 0
    }
    .basic-slider{
        display:none;
    }
    .title-page-m{
        display:block;
    }
    .display-bar{
        display:none;
    }
    .index-page-about{
        width: 100%;
        float: left;
        padding-left: 0px;
        padding-top:10px;
    }
    .about-line{
        margin:0;
        margin-bottom:30px; 
        width:9%;
        height:1px;
        background-color:black;
        overflow:hidden;
    }
    #works-grid .works-item {
        width: 100% !important;
    }

    .pic-fenge-line{
        display:block;
    }
    .pic-title{
        margin-top: 20px;
        margin-left: 10px;
        font-size: 15px;
        letter-spacing:1px;
    }
    .connect{
        text-align: left;
        float: left;
        font-size: 12px;
    }
    .connect img{
        height: 15px;
    }

    .huanhang{
        padding-bottom: 10px;
        display: block;
    }
    .company{
        display: none;
    }
    .related-p{
        margin-bottom: 5px;
        margin-left: 4%;
    }  
/*    .fenlei li {
        display: inline-block;
    } */
    .basic-menu{
        float: none;
    }
    .basic-menu li{
        float: none;
        margin-left: 0px;
    }
    .hamburger-menu{
        float: none;
    }
    .basic-menu>li>a{
        /*padding:;*/
    }

    .all-jiantou{
        display: block;
        text-align: right;
        position: absolute;
        right: 0px;
        top: 25px;
        color: #585656 !important;
    }
    .other-fenlei{
        display: none;
    }
    .all-fenlei a{
        color: black;
    }
    #main{
        margin-top: 0px;
    }
    .pc-fenlei{
      display: none;
    }
    .m-fenlei{
      display: block;
      padding-top: 10px;
    }
    .contcat-page{
        margin-top: 20px;
        width: 100%;
        /*padding-right: 15px;*/
        /*padding-left: 15px;*/
        margin-left: 0;
    }
    .left_scroll{
        display: none;
        }

    .logo-pc{
        display: none;
    }
    .logo-m{
        display: block;
    }

    .project-item{
        width: 100% !important;
    }


    .project_name_en_font{
        font-family: lan-ting-z-h;
    }

    .project_name_font{
        font-family: lan-ting-x-h;
    }

    .detail-about{
        margin-right: -15px;
        margin-left: -15px;
    }
    .project_name_zh{
        margin-top: 20px;
    }
    .m-fenlei-current  a{
        font-family: lan-ting-z-h;
        color: #585656 !important;
    }
    .about-page{
        padding-left: 0
    }

    .munu-fenlei{
        margin-top: 60px;
        padding-right: 5%;
        padding-left:15px;
    }
    .project_detail{
        margin-top: -50px;
        width: 100%

    }

}