.banner ul{ width: 100%; max-width: 1120px; position: absolute; left: 8%; bottom: 0px;  background-color: transparent; display: flex;    }
.banner ul li { cursor: pointer; width: calc(33.3% - 3px); height: 50px;  margin-right: 3px; background-color: #1267b2;    color: #fff; display: flex; align-items: center; justify-content: center; z-index: 9999; }
.banner ul li a { width: 100%; height: 100%; padding: 0 15px;  display: flex; align-items: center; justify-content: center;color: #fff; }
.banner ul li.not-current { color: #8c8c8c;}
.banner ul li:last-child { margin-right: 0;}
.banner ul li:hover { }
.banner ul.fixed li:hover {  color: #c8c8c8;  }

.banner ul.fixed{ max-width: 100%; padding: 0;   position: fixed;  bottom: inherit; top:50px;  left: 0; justify-content: center; background: #1267b2!important; }
ul.fixed li.current,ul.fixed li.current a span { color: #fff;}
ul.fixed li { width: auto; color: #c8c8c8; }
ul.fixed li a span { color: #c8c8c8;}
ul.fixed li a:hover,ul.fixed li a:hover span {color: #fff;}
ul.fixed li:after {  content: ''; min-width: 1px; height: 11px; margin: 0 25px; background-color: rgba(255, 255, 255, 0.3); display: block;}
ul.fixed li:last-child:after { display: none;}
ul div.list-title { height: 50px; color: #fff; display: flex; align-items: center; justify-content: center;}
ul.fixed div.list-title { order: 0;}
ul.fixed li { order: 1; }
.banner .navfix{top: 50px;  }
.banner .navfix ul{background: #242424!important;}

@media (max-width:1023px) {
  .banner ul.fixed {  position: fixed;  bottom: inherit; top: 60px ; left: 0; }
  .banner ul { padding: 0; background-color: #0e416e; flex-direction: column; left: 0; }
  .banner ul>* { border-top: solid 1px #0e416e; }
  .banner ul li {  width: 100%; max-width: none; margin: 0; transition: none; }
  .banner ul.fixed li:after { display: none; }
}

.ul-fixed { height:auto;  }
@media (max-width:767px) {
.ul-fixed { height:auto;margin-top: 16px; }
 .banner ul{left:0;}	
.banner ul.fixed  {  top: 60px!important; }
}

/*b-lazy*/
.b-lazy {  opacity:0;}
.b-loaded { opacity:1;}
.board { display: flex;}
.board>* { width: 50%;}
.profile,.history { border-bottom: solid 5px #f4f4f4;}
.title { width: 33.3%; max-width: 360px; padding: 10px;}
.title h2 { margin-bottom: 10px;display: block; font-size: 2.8rem; font-weight: 700; color: #005bac; line-height: 1.1; }
.title h3 { font-size: 1.125rem; font-weight: 600; color: #010101;}
.intro { width: 66.6%; max-width: 720px; padding-top: 60px;}
.intro p { line-height: 1.6;}
.list-title {  width: 100%; height: 50px; background-color: #11538F; color: #fff; display: flex;  align-items: center; justify-content: center;}

/*========== profile==========*/
.profile { padding: 60px 0 70px 0;}
.profile .up { max-width: 1120px; margin: 0 auto; padding: 0 20px; margin-bottom: 150px; display: flex; flex-wrap: wrap;}
.profile .down { max-width: 1160px;  margin: 0 auto; padding: 0 20px;}

@media (max-width:767px){
  /*.profile {padding:220px 0 70px 0;}*/
  .profile .up { margin-bottom: 50px;}
  div.title, div.intro { width: 100%;}
}
.profile .down ul li { padding: 80px 60px; background-color: #f9f9f9; vertical-align: top; }
.profile .down ul li:nth-child(2n) { margin: 50px 0px 0px 30px;  }
.profile .down ul li div { margin-bottom: 30px; display: flex; align-items: flex-end;}
.profile .down ul li div h2 {  font-size: 1.25rem; font-weight: 700;  color: #121212; line-height: 1.6;}
.profile .down ul li div span { font-size: 2.8rem; font-weight: 600; color: #005bac; margin-right: 15px;}
.profile .down ul li p { line-height: 1.5; color: #000;}
.grid-sizer, .grid-item {  width: 50%; max-width: 540px; min-height: 360px; margin-bottom: 40px; display: inline-block;}

@media (max-width:1160px){
  .grid-sizer, .grid-item {  width: 48%; }
}

@media (max-width:1023px){
  .grid-sizer, .grid-item { width: 47%; }
}

@media (max-width:767px) {
  .grid-sizer, .grid-item { width: 100%; max-width: none; }
/*  .profile .down ul li:nth-child(3) { margin-top: 0; }*/ 
.profile .down ul li { padding: 60px 20px; margin: 10px auto; }
.profile .down ul li:nth-child(2n) { margin: 0px auto;  }
	
.profile .down ul li div { flex-wrap: wrap; }
}
/*========== principles==========*/
.principle { padding: 120px 0;}
.principle .up { width: 100%; max-width: 1120px; margin: 0 auto 120px auto; padding: 0 20px; display: flex;}
.principle .down {  width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px;}
.principle .down ul li {margin: 0 0 120px 0; position: relative; display: flex;}
.principle .down ul li div.text {  width: 50%; padding-right: 80px; align-self: flex-end;}
.principle .down ul li.reverse div.text { padding: 0 0 0 80px;}
.principle .down ul li div h2 { font-size: 1.125rem; font-weight: 600;  color: #010101;  margin-bottom: 22px; line-height: 1.5;}
.principle .down ul li div p { line-height: 1.5;}
.principle .down ul li div.img { overflow: hidden; width: 50%;  height: auto; position: relative;}
.principle .down ul li div.img img { width: 100%; height: auto; overflow: hidden; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease;}
.principle .down ul li div.img img:hover { transform: scale(1.1);}
.principle .down ul li:after { content: ''; width: 135px; height: 1px;  background-color: #005bac; position: absolute; left: calc(50% - 105px); top: 40px; display: block;}
.principle .down ul li.reverse:after { right: calc(50% - 105px); left: inherit;  top: 60px;  }
.principle .down ul li.reverse div.img { display: flex; justify-content: flex-end;}
.principle .down ul li:nth-child(3) div { align-self: center;}

@media (max-width:767px){
.principle { padding: 80px 0; }
.principle .up { margin: 0 auto 50px auto; flex-wrap: wrap; }
.principle .down ul li { margin: 0 0 70px 0; flex-direction: column-reverse; }
.principle .down ul li:last-child { margin: 0; }
.principle .down ul li.reverse { flex-direction: column; }
.principle .down ul li:after { display: none; }
.principle .down ul li div.text,.principle .down ul li div.img {width: 100%; height: auto!important; }
.principle .down ul li div.img img{ height: auto!important; }	
.principle .down ul li div.text,.principle .down ul li.reverse div.text {padding: 20px 0 0 0;}
}

/*========== history==========*/
.history {  width: 100%; max-width: 880px; margin: 0 auto; border-bottom: none; padding: 130px 0 145px 0;}
.history .board {padding: 0 20px;}
.history p span { font-weight: 600; color: #005bac;}
.about-banner02 { width: 100%; max-width: 1360px; min-height: 605px; max-height: 605px; text-align: center; color: #fff; display: flex; justify-content: center; align-content: center;  flex-wrap: wrap; margin: auto;  background: url(../images/about/company_history.jpg) no-repeat left top;}
.about-banner02 h2 { font-size: 3.75rem;}

@media (max-width:767px) {
.history { padding: 70px 0; }
.about-banner02{ background: url(../images/about/company_history.jpg) no-repeat center top;}	
}

.history .board { margin-bottom: 80px; position: relative;}
.frame { width: 100%;  border: solid 10px #f5f5f5; border-top: 0; padding: 65px 40px 55px 40px; position: relative;}
.history .board p.date { font-size: 2.8rem; position: absolute; left: 50%;top: -15px; display: flex; transform: translateX(-50%);}
.frame:before, .frame:after { content: ''; width: 40%; height: 10px; background-color: #f5f5f5; position: absolute; left: 0; top: 0; display: block;}
.frame:after { right: 0; left: inherit;}
.history .board p.date span.year {display: flex;align-items: baseline;}
.board p.date span.year:after {content: '';width: 7px;height: 7px;border-radius: 50%;background-color: #005bac;margin: 0 5px; display: block;}
.history .board p.narrative {line-height: 1.6;}
div.board-icon { display: none;}

@media (max-width:1400px) {
.history .board .frame:before,.history .board .frame:after {width: 37%;}
}

@media (max-width:1023px) {
.history .board .frame:before,.history .board .frame:after {width: 35%;}
}

@media (max-width:767px) {
.history .board .frame { padding: 55px 10px 45px 10px; border: none; }
.history .board .frame:before, .history .board .frame:after {  width: 20%; }
.history .board { margin-bottom: 20px; }
div.board-icon { font-size: 1.4rem;  position: absolute; bottom: 10px; left: 50%;  display: block; transform: translateX(-50%); }
}

@media (max-width:400px) {
.history .board .frame:before, .history .board .frame:after {width: 14%;}
}

.history .board-li ul li { margin-bottom: 100px;  display: flex;}
/*.history .board-li ul li:nth-child(2n) { transform: translateX(100px);  transition: all .8s ease .5s;  -webkit-transition: all .8s ease .5s;  -moz-transition: all .8s ease .5s; -o-transition: all .8s ease .5s;  -ms-transition: all .8s ease .5s;}
.history .board-li ul li:nth-child(2n+1) { transform: translateX(-100px);  transition: all .8s ease .5s; -webkit-transition: all .8s ease .5s;  -moz-transition: all .8s ease .5s;  -o-transition: all .8s ease .5s;  -ms-transition: all .8s ease .5s;}
.history .board-li ul li.show:nth-child(2n),.history .board-li ul li.show:nth-child(2n+1) { transform: translateX(0);}
*/
.history .board-li ul li p.date {width: 25%; max-width: 210px; position: relative;  display: flex; align-items: center;  justify-content: center;}
.history .board-li ul li p.date:before {  display: none;}
.history .board-li ul li p.date:after { content: '';  width: 100%; height: 1px; background-color: #cccccc; position: absolute; left: 0; bottom: -30px; display: block;}
.history .board-li ul li p.date span {  font-weight: 700;}
.history .board-li ul li p.date span.year { font-size: 1.6rem; display: flex; align-items: baseline;}
.history .board-li ul li p.date span.year:after {  content: ''; width: 5px;  height: 5px; border-radius: 50%; background-color: #005bac; margin: 0 3px; display: block;}
.history .board-li ul li p.date span.month { padding-top: 7px;}
.history .board-li ul li p.narrative {  width: calc(50% + 60px);  max-width: 500px; line-height: 1.6; transform: translateX(-30px);}
.history .board-li ul li:nth-child(2n) { flex-direction: row-reverse;}
.history .board-li ul li:nth-child(2n) p.narrative { transform: translateX(30px);}



@media (max-width:767px) {
.history .board-li ul{ width:88%; margin: auto; overflow: hidden; } 	
.history .board-li ul li {  margin-bottom: 50px;}
.history .board-li ul li:nth-child(2n),.history .board-li ul li:nth-child(2n+1) { transform: translateX(0px); }
.history .board-li ul li,.history .board-li ul li:nth-child(2n) { flex-direction: column; }
.history .board-li ul li p.narrative,.history .board-li ul li:nth-child(2n) p.narrative { transform: translateX(0); }
.history .board-li ul li p.date,.history .board-li ul li p.narrative { width: 100%; }
.history .board-li ul li p.date {  max-width: none; margin-bottom: 20px; position: relative; justify-content: flex-start; }
.history .board-li ul li p.date:before { font-size: 1.2rem; position: absolute; top: 5px; right: 15px; display: block}
.history .board-li ul li p.date:after { bottom: -10px; }
}