/*ul*/
.about h1 {  margin-bottom:5%; font-size:2.5rem; font-weight: 400;  display: block;}
.about h2 { margin-bottom:5%; font-size: 2rem; font-weight: 400;  }
.about h3 { font-size: 1.65rem; font-weight: 700;  margin:5% auto 2% auto; display: block;  }
.about p { font-size: .9rem; font-weight: 300; margin-bottom: 2%; color: #424546; line-height: 1.5rem;}
.about h1 span{  display: block;  font-size:.75em; }

.about-wrap .edit{ display: block; margin:auto auto 15% auto; width:60%; padding:2vh 0 10vh 0; }
.about-wrap .edit-half{display: inline-block; width:48%; margin:0 auto; padding: 2em; vertical-align: top; }
.edit-half img{width:90%; height: auto; max-width:90%;  }
.text:after { content: '';  width: 35px;  height: 3px; background: #a09a8e; position: absolute;  bottom: 0;  left: 0;} 
.text { position: relative; width:100%;  margin-bottom:40px; padding-bottom: 25px;}


/* wrp-top-about
======================*/
.wrp-top-about { position: relative; }
.img-top-about { margin:0px 10px;}
.box-top-about { position: relative; padding: 0 25px 70px; margin-top: -20px;  }
.box-top-about h1{ font-size:1.45rem; margin-bottom: 20px; color:#007acc;   text-shadow: 0px 1px 0px rgba(255,255,255,1);   }
.box-top-about h2{ font-size:1.75rem; margin-bottom: 20px;  text-shadow: 0px 1px 0px rgba(255,255,255,1);   }
.about-box-5{width: 90%; display:  block; margin: auto; vertical-align: top;}

/*about us*/
.about-wrap{ display: -ms-flexbox; display: none;  -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px;  margin-left: -15px; }
.box-7{  -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; vertical-align: top;  }
.box-5 { -ms-flex: 0 0 41.666667%;  flex: 0 0 41.666667%;  max-width: 41.666667%;vertical-align: top; }
.box-6 {  -ms-flex: 0 0 50%; flex: 0 0 50%;  max-width: 50%;vertical-align: top;  }
.about-bg-01{padding-top: 10px; background: url(../images/about/about-03.jpg)  no-repeat left top ;  background-size: 100% auto;}
.about-bg-02{ background: url(../images/about/about-05.jpg) no-repeat right top;  background-size:100% auto ;}
.about-bg-02{display: block;}
.bg-light{ background:#e8e8e9; }
/*---------------------------------------------------------------------
h1 Title
-----------------------------------------------------------------------*/
.page-title { font-size: 3.1rem; text-align: center; margin: 15px auto; font-weight: 700!important; background: url(../images/index/v-line-2.png) no-repeat center bottom;background-size: 86px 4px;}
.page-title em{ font-size: 1.1rem;  font-weight: bold;  letter-spacing: 2px;   color: #7abe57;   display: block; }
.cate-wrap { text-align: center; width: 100%; }

/*---------------------------------------------------------------------
Title
-----------------------------------------------------------------------*/
.title-box { position: relative; width: 100%; margin-bottom: 30px;  }
.title-box:before {    position: absolute;left: 0px;top: 45px;background: #f5821e; width: 61px;height: 4px;content: "";z-index: -1;margin-left: -10px;}
.title-3 { font-weight: bold; font-size: 1.75rem; line-height: 46px; text-align: left; position: relative; margin-bottom: 30px;  vertical-align: top; background-image:-webkit-linear-gradient(left, #ffbe08, #f34300);color: #00afb9;   -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  }
.title-3:before { position: absolute; left:0%; top: 45px; background-image:-webkit-linear-gradient(left, #ffbe08, #f34300); width: 100%; height: 2px; content: ""; z-index: -1; margin-left: -10px; }
.title-box .v-text { display: inline-block; position: absolute; left: 0; font-weight: 600; top: 20px; font-size: 20px; color: #dddddd; z-index: 9; border: 1px solid #dddddd; height: 50px; width: 50px; line-height: 50px; text-align: center; background: #ffffff; transform: rotate(135deg);}
.title-box .v-text span { position: absolute; left: 12px; top: 0; transform: rotate(-135deg);}
.title-box.white .title-3 { color: #fff; }
.title-box.white .title-3:before { background: rgba(255, 255, 255, 0.2); }
.title-box.white .v-text { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0); }
.hight-text { position: relative; }
.hight-text:before { position: absolute; background:#78bd59; content: ""; left: 0; bottom: 5px; height: 2px; width: 100%; z-index:4; }
.about-box-01 { padding:50px 60px 40px 60px; position: relative; }
.about-box { display: flex; flex-wrap: wrap; justify-content: center;  align-content: center; align-items: center; }
.about-box div{display: flex; width: 80%; margin:10vh auto; flex-direction: column; }
.about-box h3 { width: 100%; display: block; font-size: 1.75rem; line-height: 50px;  margin-bottom:5%;  position: relative; }
.about-box p { width: 100%;display: block; margin: 0;  color: #333;}
.about-box strong { margin:5% auto; padding-top:20px;   font-size:2rem; line-height: 2rem;  font-weight: 700; font-style: italic; color: #1f328c; }
.about-box:before { position: absolute; top: 50%; left: -20px; content: ""; width: 0; height: 0; border-top: 20px solid transparent; border-right: 20px solid #e8e8e9; border-bottom: 20px solid transparent; margin-top: -10px; }
.about-box.left:after { position: absolute; top: 50%; right: -20px; content: ""; width: 0; height: 0; border-top: 20px solid transparent; border-left: 20px solid #ffffff; border-bottom: 20px solid transparent; margin-top: -10px; z-index: 9; }
.about-box.left:before { content: none; }
.about-box .txt {  width: 60%;  margin: 0 auto 20px;}



@media(max-width:980px) {
.about-wrap{  margin-right: 0;  margin-left: 0;}
.about-box { padding:60px; position: relative; }
.about-box h2 { font-size: 1.5rem; line-height: 50px;  margin-bottom:5%;  }
.about-box:before, .about-box.left:after { position: absolute; top: -23px; left: 50%; content: ""; width: 0; height: 0; border-left: 20px solid transparent; border-bottom: 20px solid #ffffff; border-right: 20px solid transparent; margin-top: 3px; margin-left: -10px; border-top: inherit; }
.box-7,.box-6,.box-5 {  -ms-flex: 0 0 100%; flex: 0 0 100%;max-width: 100%;   min-height: 1px; }
.about-bg-03{ background-size: 50% auto;}
.about-box .txt {  width: 90%;  margin: 0 auto;}
.features{margin-right: 0px;  margin-left: 0px;}
.about-box div{ width:96%; }
	
}

/*--------------------------------------------------------------------- 
Features
-----------------------------------------------------------------------*/
.features{ display: -ms-flexbox; display: flex;  -ms-flex-wrap: wrap; flex-wrap: wrap; align-content: center; justify-content: flex-start; margin-top: 10%;   margin-right: -15px;  margin-left: -15px; padding:30px 0 150px 0px;
 background: url(../images/about/about-03.jpg) no-repeat right bottom #000; background-size:100% auto;}
.features  .title-box h3 { font-size: 1.75rem;   margin-top: 50px;    }
.features ul { padding: 0; margin: 0 auto; margin-top: 80px; width: 100%; max-width:1160px; display: flex; flex-wrap: wrap;  }
.features ul li {  width: 100%;   padding: 40px 30px;  border-bottom: 1px solid #e2e2e2; }
.features ul li h4{ font-size: 1.5rem; font-weight: 700; color: #f5821e; background-image: -webkit-linear-gradient(-45deg, #ffc600, #ff7a00) ; -webkit-background-clip: text;  -webkit-text-fill-color: transparent; }
.features ul li p{color: #fff;}
 .features .wrapper{ width:96%; margin: auto; }


@media screen and (min-width: 769px){
.content-top .txt-01{ margin-bottom: 30px;}
.box-top-h2 { width: 100%; margin-bottom: 30px;}
.box-top-h2 h3 {  font-size:1.75rem; line-height:2.75rem;  }
.box-top-h2 h3 strong{font-size:1.5rem; line-height:2.75rem; }
.box-top-h2 .number {  font-size: 12px; padding-left: 5px;}
.bd-sub {  font-size: 15px;  padding-top: 70px;  -webkit-transform: translateX(-5px);   transform: translateX(-5px);}
.bd-sub:before { width: 2px;   top: 0; left: 5px;}
.bd-sub.scrollin:before {  height: 60px;}
.title-style{ margin:15px auto;   font-size:3rem;   }
.title-box { margin-bottom: 80px;  }

/*wrp-top-about
=================================*/
 .img-top-about { margin-left: 0; position: absolute; right:-10px; top:0px; width:50%;}
.box-top-about {width: 96%;  max-width: 1140px;margin: 0 auto; padding: 120px 10px 100px 0px;}
.box-top-about .txt-01 { max-width: 480px;  margin:20px 0 40px 0; text-shadow: 0px 1px 0px rgba(255,255,255,1);  }
.img-top-about-left { display: inline-block; width:50%;}
.features ul li {  width: 48%; margin:0px 1%;  padding: 40px; }	
.section { width: 100%; display: flex; flex-wrap:wrap;}
.about-box-5{width: 45%;  margin: auto 25px; vertical-align: top; text-align: center;}
.about-box-5 p{  text-align: left;}
 }

@media (min-width:1680px) {
.about-bg-04{ padding-bottom:350px; }

}