@charset "UTF-8";

/* Table of Content
==================================================
1.  Mission page

*/

/* Mission page
=====================================*/
#mission {
  width: 100%;
  margin-top: 66px;
  padding: 80px 0 280px;
  background-image: url(/common/img/mission/bg-sky.jpg), url(/common/img/mission/bg-load.jpg);
  background-position:center top, center bottom;
  background-repeat: no-repeat; 
  background-size: contain;  
}

.mission-container {
  background: rgba(255,255,255,0.5);
}

.change-btn {
  margin: 0;
  margin-left: -15px;
  margin-right: -15px;
  padding: 0;
}

.change-btn-item {
  position: relative;
  display: block;
  float: left;
  width: 50%;
  height: 62px;
  margin: 0;
  font-weight: 700;
  font-size: 22px;
  text-align: center;  
}

.change-btn-item a {
  display: block;
  padding: 20px 0;
  border: 1px solid #004679; 
  color: #004679;     
}

.change-btn-item a:hover {
  color: #004679;  
}

.change-btn-item.current a{
  border-color: #14C28C;
  background: #14C28C;
  color: #fff;
}

.change-btn-item.current a:after{
  content: "";
  border-top: 20px solid #14C28C;
  border-left: 10px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 10px solid transparent;
  position: absolute;
  left: 50%;
  top: 76px;
  margin-left: -5px;    
}

#mission-area {

}


.mission-section {
  max-width: 747px;
  margin: 50px auto 100px;
  text-align: center;
}

.missionvision-box {
  margin: 50px 0 100px;
}

.credo-box {
  margin: 40px 0;
  border-bottom: 1px dotted #cccccc;
}

.credo-title-box {
  display: table;
  width: 100%;
}

.credo-number-box,
.credo-title
{
  display: table-cell;
}

.credo-number-box {
  width: 100px;
}

.credo-number {
  display: block;
  font-size: 40px;
  font-weight: 100;
  width: 70px;
  height: 70px;
  background: #40afff;
  border-radius: 100%;
  color: #fff;
  line-height: 62px;
  text-align: center;
  vertical-align: bottom;
  border: 3px solid #fff;
  -webkit-box-shadow: 0px 0px 0px 2px #40afff;
  box-shadow: 0px 0px 0px 2px #40afff;
}

.credo-title {
  height: 40px;
  /* padding-left: 35px; */
  text-align: left;
  vertical-align: middle;
  font-size: 25px;
  line-height: 40px;
  font-weight: 700;
  color: #004679;  
}

.credo-text {
  margin: 20px 0;
  text-align: left;
}



/* Responsive styles
================================================== */
/* Large Devices, Wide Screens */
@media (min-width : 1200px) {
  

}/* End Large Devices, Wide Screens */


/* Medium Devices, Desktops */
@media (min-width : 992px) and (max-width: 1200px) {


}/* End Medium Devices, Desktops */


/* Small Devices, Tablets */
@media (min-width : 768px) and (max-width: 991px) {
 



}/* End Small Devices, Tablets */



/* Custom, iPhone Retina */ 
@media (min-width : 320px) and (max-width: 767px)  {

.change-btn-item {
  font-size: 16px;
}

.change-btn-item.current a:after{
  top: 70px;  
}
 

.credo-number-box {
  width: 80px;
}


}/* End Custom, iPhone Retina */