.about-top{width:100%;height:65vh;position: relative}
.abouttop-images{position:relative;width:100%;height:100%;overflow:hidden;background-size: cover;background-position: center center;background-repeat: no-repeat}
.colorbg{width:100%; height:100%;position:absolute; left:0; top:0; background-color:rgba(0,0,0,0.1); display:block;z-index: 98}
.slogan{width: 80%; position: absolute;bottom:12%;left: 8%;z-index: 99; color: #fff;}
.slogan h2{font-size: 66px;margin-bottom: 15px; line-height: 1.1em;font-family: "Times","Arial",sans-serif;}
.slogan h1{font-size: 18px;letter-spacing: 0.15em;}
.about-wrapper{width:100%; float: left; margin:120px 0}
.about-content{width:1200px; margin:0 auto;}
.idea-right{width:50%;float: left;}
.c-bg{width:100%;float: left; margin:0;text-align:center; background:linear-gradient(#111111,#444444 );}
.cpic{ width:40%;float: left; margin:0 10% 0 0;}
.cpic img{max-width:100%; height: auto;display: block}
.ideatx{width:100%;float:left;margin: 20px 0 60px}
.ideatx{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.ideatx.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.ideatx h2{font-size:15px; margin-bottom: 10px;color: #666}
.ideatx h3{color: #9d6e3c;font-size: 30px;font-family: "Times","Arial",sans-serif;letter-spacing: 0.05em}
.about-tx{ width:75%; float:left;margin: 0 15% 0 10%}
.about-tx p{margin-bottom: 15px; line-height: 1.7em;font-size:16px;text-align:justify;}

@media screen and (max-width: 1280px) {
.about-wrapper{margin:100px 0}	
.about-content{width:88%;}
.slogan h2{font-size: 60px;}
}
@media screen and (max-width: 980px) {
.about-wrapper{margin:80px 0}	
.about-top{height:40vh;}
.about-content{width:90%;}
.cpic{ width:46%;margin:0 4% 0 0;}
.about-tx{ width:94%; margin: 0 0 0 6%}
.about-tx p{margin-bottom: 10px;}
.ideatx{margin: 0 0 30px}
}
@media screen and (max-width: 767px) {
.about-wrapper{margin:60px 0 30px}	
.about-top{height:35vh;}
.slogan h2{font-size: 40px;}
.cpic{ width:100%;margin:0 0 30px 0;}	
.idea-right{width:100%;}
}

.about-middle{width:100%;float: left; margin:0;}
.middle-content{width:1400px;height: 650px; margin:0 auto 50px;background-position: center center;background-repeat: no-repeat;background-size: cover}
.middle-tx{width:50%;float: left;margin: 0 25% 100px; letter-spacing: 0.1em;text-indent: 0.1em;text-align: center;}
.middle-tx{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.middle-tx.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
@media screen and (max-width: 1600px) {
.middle-content{width:1300px;height: 600px; }
.middle-tx{width:60%;margin: 0 20% 80px}
}
@media screen and (max-width: 1280px) {
.middle-content{width:95%;height: 500px; margin:0 auto 45px;}
.middle-tx{width:70%;margin: 0 15% 60px}
}
@media screen and (max-width: 980px) {
.middle-content{height: 400px; margin:0 auto 35px;}
.middle-tx{width:80%;margin: 0 10% 50px}
}
@media screen and (max-width: 767px) {
.middle-content{width:90%;height: 280px; margin:0 auto 20px;}
.middle-tx{width:85%;margin: 0 7.5% 30px}
}
.about-bottom{width:100%; float: left; padding:120px 0;background-color: #f5f3f1}
.bottom-content{width:1200px; margin:0 auto;position: relative}
.hmin_content{width: 35%; position: absolute;top:55%;left:52.5%;transform: translate(0, -50%);text-align: center}
.bottom-tx{width:100%; float: left;padding: 100px 0;position: relative}
.bottom-tx h2{margin-bottom: 50px; color: #9d6e3c;font-size: 30px;font-family: "Times","Arial",sans-serif;letter-spacing: 0.05em}
.bottom-tx h2{opacity: 0;-moz-transform: translateX(30px);-ms-transform: translateX(30px);-webkit-transform: translateX(30px);transform: translateX(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.bottom-tx h2.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.bottom-tx p{font-size: 22px;letter-spacing: 0.05em}
.bottom-tx p{opacity: 0;-moz-transform: translateX(-30px);-ms-transform: translateX(-30px);-webkit-transform: translateX(-30px);transform: translateX(-30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.bottom-tx p.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.bottom-btn{position: absolute;top:0;left: 0;width: 30px;height: 30px;border-top: 1px solid #9d6e3c;border-left: 1px solid #9d6e3c;}
.bottom-rightbtn{position: absolute;top:bottom;right: 0;width: 30px;height: 30px;border-bottom: 1px solid #9d6e3c;border-right: 1px solid #9d6e3c;}

@media screen and (max-width: 1200px) {
.bottom-content{width:88%;}
.about-bottom{padding:90px 0;}
.hmin_content{width: 45%; }
}
@media screen and (max-width: 980px) {
.bottom-content{width:90%;}	
.about-bottom{padding:80px 0;}
.bottom-tx{padding: 80px 0;}
.bottom-tx h2{margin-bottom: 40px; font-size: 26px;}
}
@media screen and (max-width: 767px) {
.about-bottom{padding:60px 0 25px;}
.bottom-tx{padding: 45px 0;}
.hmin_content{width: 75%;margin: 0 12.5%; position: static;transform: translate(0, 0);}
.bottom-tx h2{opacity: 0;-moz-transform: translateX(15px);-ms-transform: translateX(15px);-webkit-transform: translateX(15px);transform: translateX(15px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.bottom-tx h2.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.bottom-tx p{opacity: 0;-moz-transform: translateX(-15px);-ms-transform: translateX(-15px);-webkit-transform: translateX(-15px);transform: translateX(-15px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.bottom-tx p.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
}