/* About Us ===================================================================== */
.wrap-about, .wrap-about li {
  line-height: 2rem;
}
.wrap-about ul, .wrap-about ol {
  padding-left: 20px;
}
.content-box {
  margin: 5% auto;
  line-height: 2rem;
}
.content-box a:hover {
  color: #007bff;
}
.content-box h3 {
  margin-bottom: 17px;
  font-size: 1.5rem;
  font-weight: 700;
}
.content-box p {
  line-height: 2rem;
}
.content-box .line {
  border-right: 1px solid #e4e8e7;
}

.gray-bg {
  background: #f7f7f7;
}

.services-item {
  margin-bottom: 20px;
  text-align: center;
}
.services-item .services-icon {
  margin-bottom: 32px;
}
.services-item .services-title {
  margin-bottom: 20px;
}

.layout-48 { display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.layout-48 > div { width: 48%; padding-bottom: 20px;}
.layout-48-2 > div { padding-bottom: 50px;}

.about-title-1 { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.5; position:relative; padding:5px 15px; margin-bottom: 15px; color: #00659e; display: inline-block;}
.about-title-1 b { font-size: clamp(24px, 2.5vw, 30px);}
.about-title-1:before { position: absolute; content: ""; width: 20px; height: 20px; border-color: #00659e; border-style: solid; border-width: 1px 0 0 1px; top: 0; left: 0;}
.about-title-1:after { position: absolute; content: ""; width: 20px; height: 20px; border-color: #00659e; border-style: solid; border-width: 0 1px 1px 0; bottom: 0; right: 0;}


.layout-33 { display:flex; flex-direction: row; flex-wrap: wrap; }
.layout-33 > div { width: 33%; padding:0 10px 25px 10px;}

.about-title-2 { font-size: clamp(18px, 1.5vw, 20px); font-weight: bold; padding-bottom: 7px; position: relative;}
.about-title-2:before { position: absolute; content:""; width: 35px;height: 35px; border-radius: 100%; left: -15px; top:-3px; background: #00659e; z-index: -1; opacity: 0.15;}

.data-type-1 { line-height: 1.5; padding: 10px 0;}

.about-title-3 { background: #40488d; position: relative; padding:24px 5px 7px 5px; line-height: 1.4; margin-bottom: 10px; font-size: clamp(18px, 1.5vw, 20px); font-weight: bold; color: #fff; text-align: center; border-radius: 20px 0;}
.about-title-3:before { content: "STEP"; position: absolute; z-index: 2; color: #40488d; font-weight: bold; font-size: 3rem; opacity: 0.15; left: 50%; transform: translateX(-50%); top:-40px; line-height: 1;}
.about-title-3 > span { position: absolute; z-index: 3; width: 44px; height: 44px;  background: #00659e; left:50%; top:-25px; transform: translateX(-50%); border-radius: 100%; display:flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; border: 3px solid #fff;}

.service-flow { padding-top:40px }
.service-flow .about-title-3 img { width: 60px; margin: 10px auto;}

@media only screen and (max-width: 980px) {
	.layout-48 > div { width: 100%;}
	
	.layout-33 > div { width: 50%;}
}

@media only screen and (max-width: 570px) {
	.layout-33 > div { width: 100%;padding:0 0px 25px 0px;}
}

.about-list-section{padding: 30px 0 0;}
.ab-p{font-size: 1rem; line-height: 2;}
.about-list-section .ab-r2 { display: flex;flex-wrap: wrap; align-items: flex-end;margin-bottom: 50px;}
.about-list-section .ab-r2 .pic{ width: 256px; border-radius: 0 20px 20px 0; text-align: center; margin-right: 20px; overflow: hidden; }
.about-list-section .ab-r2 .txt{ width: calc(100% - 20px - 256px); line-height: 2; }
.about-list-section .ab-r2 .s-tit{ font-size: 24px; font-weight: 600; color: #656768; margin-bottom: 20px; }
.about-list-section .ab-r2 .s-tit span{ display: inline-block; margin-right: 16px; color: #00659e; }
.about-list-section .ab-r2 .s-tit div{ font-size: 18px; }

@media only screen and (max-width: 768px) {
    .about-list-section .ab-r2 { margin-bottom: 30px;}
	.about-list-section .ab-r2 .pic{ width: 100%; border-radius:  0; margin-right: 0px; max-height: 400px;  }
    .about-list-section .ab-r2 .txt{ width: 100%; padding: 20px 0 0; }
    .about-list-section .ab-r2 .s-tit{ text-align: center; }
}
@media only screen and (max-width: 570px) {
	.about-list-section .ab-r2 .s-tit span{ display: block; margin-right: 0; }
}
.his-section{ display: flex;flex-wrap: wrap; padding: 30px 0; }
.his-section .his-txt { width: 50%; }
.his-section .his-txt p{ margin: 0 0 16px;}
.his-section .his-pic { width: 50%; padding-left: 25px; }
.his-timeline{padding: 50px 0;overflow: hidden;position: relative;}
.his-timeline::after{content: "";width: 26px; height: 100%; background: url("../images/timeline.svg") center bottom; background-repeat: no-repeat;background-size: cover; position: absolute; top: 0; left: 100px;  z-index: -1;transform: scaleY(-1);}
.his-timeline .timeline-item{margin-bottom: 50px; display: flex;}
.his-timeline .timeline-item .year{ font-size: 28px; color: #FFF; background: #40488d; border-radius: 20px 0 20px 0; padding: 10px 45px; margin: 0 40px;}
.his-timeline .timeline-item .his-con{ font-size: 16px;line-height: 1.5;}
@media only screen and (max-width: 768px) {
    .his-section .his-txt { width: 100%; }
    .his-section .his-pic { width: 100%; padding-left: 0px; text-align: center;}
    .his-timeline .timeline-item{ flex-wrap: wrap;}
    .his-timeline .timeline-item .year{ font-size: 24px;  padding: 10px 30px; margin: 0 20px 0 0;}
    .his-timeline .timeline-item .his-con{ width: 100%; padding: 16px 0  16px 30px; background: #FFF; }
    .his-timeline::after{  left: 43px; }
}