/* Sub Visual */
.sub-visual {
  height:500px;
  padding-top:100px;
  overflow:hidden;
  position:relative;
  background-repeat:no-repeat;
  background-position:center;
  background-size: cover;
}

.sub-visual__container {
  max-width:1310px;
  width:100%;
  height:100%;
  margin:auto;
  padding:0px 15px 50px;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.sv1 {
  background-image: url('/img/sub/sv1.png');
}

.sv2 {
  background-image: url('/img/sub/sv2.png');
}

.sv3 {
  background-image: url('/img/sub/sv3.png');
}

.sv4 {
  background-image: url('/img/sub/sv4.png');
}

.sub-visual p {
  color:#fff;
  font-size:5.6rem;
  font-weight:400;
  line-height:1.3;
}

.sub-visual .title {
  font-size:5.6rem;
  font-weight:700;
  line-height:1.3;
  color:#1fb8df;
}

/* Large devices (desktops, less than 1200px) - lg */
@media (max-width: 1200px) {

  .sub-visual {
    height:360px;
    padding-top:60px;
  }

  .sub-visual__container {
    padding:0px 15px 41px;
  }

  .sub-visual p {
    font-size:3.2rem;
  }

  .sub-visual .title {
    font-size:3.2rem;
  }


}
/* Medium devices (tablets, less than 1024px) - md */
@media (max-width: 1024px) {

}
/* Small devices (landscape phones, less than 767px) - sm */
@media (max-width: 767px) {

  .sub-visual {
    height:260px;
  }

  .sub-visual__container {
    padding:0px 10px;
  }

  .sub-visual p {
    font-size:2.2rem;
  }

  .sub-visual .title {
    font-size:2.2rem;
  }

}
/* Extra small devices (portrait phones, less than 500px) - xl */
@media (max-width: 500px) {

}


/* Sub Nav */
.sub-nav {
  width:100%;
  border-top: 1px solid #7f7f7f;
  background-color: transparent;
  margin-top:-51px;
  position: relative;
  z-index:10;
}

.sub-nav__container {
  max-width:1310px;
  width:100%;
  margin:auto;
  padding:0px 15px;
}

.sub-nav__container p {
  height:50px;
  display: flex;
  align-items: center;
}

.sub-nav__container span {
  font-size:2rem;
  line-height:1;
  color:#dedede;
  display: block;
}

.sub-nav__container span.pin {
  font-weight:700;
  position: relative;
}

.sub-nav__container span.arrow {
  padding:0px 18px;
}

/* Large devices (desktops, less than 1200px) - lg */
@media (max-width: 1200px) {

  .sub-nav {
    margin-top:-41px;
  }

  .sub-nav__container p {
    height:40px;
  }

  .sub-nav__container span {
    font-size:1.8rem;
  }


}
/* Medium devices (tablets, less than 1024px) - md */
@media (max-width: 1024px) {

}
/* Small devices (landscape phones, less than 767px) - sm */
@media (max-width: 767px) {

  .sub-nav {
    display: none;
  }

}
/* Extra small devices (portrait phones, less than 500px) - xl */
@media (max-width: 500px) {

}


/* Sub Common */
.sub-primary {
  padding:120px 0px;
}

/* Large devices (desktops, less than 1200px) - lg */
@media (max-width: 1200px) {

  .sub-primary {
    padding:80px 0px;
  }


}
/* Medium devices (tablets, less than 1024px) - md */
@media (max-width: 1024px) {

}
/* Small devices (landscape phones, less than 767px) - sm */
@media (max-width: 767px) {

  .sub-primary {
    padding:60px 0px;
  }



}
/* Extra small devices (portrait phones, less than 500px) - xl */
@media (max-width: 500px) {

}


/* About */
.about-intro .intro {
  display: flex;
  align-items: center;
}

.about-intro .intro .left {
  flex: 1 0 50%;
  padding-right:100px;
}

.about-intro .intro .right {
  flex: 1 0 50%;
}

.about-intro .intro p {
  font-size:4rem;
  color:#333333;
  line-height:1.4;
  font-weight:700;
}

.about-intro .intro p.black {
  font-weight:900;
}

.about-intro .intro .image {
  overflow: hidden;
  width: 0%;
  box-shadow: 0px 8px 24px 0px rgba(0,0,0,.08);
}

.about-intro .intro .image img {
  display: block;
}

.about-intro .intro .image.full img {
  max-width: none;
}

.about-intro .intro .image.aos-animate {
  animation: feature-image 1s cubic-bezier(0.4, 0.38, 0.26, 0.93) .15s both;
}

@keyframes feature-image {
  from { width: 0%; }
  to { width: 100%; }
}

.about-greeting {
  background-color:#dedede;
}

.about-greeting p {
  font-size:2rem;
  font-weight:300;
  line-height:1.8;
  color:#333333;
  margin-top:38px;
}

.about-greeting p:first-child {
  margin-top:0px;
}

.about-greeting p span {
  font-weight:400;
}

/* Large devices (desktops, less than 1200px) - lg */
@media (max-width: 1200px) {

  .about-intro .intro .left {
    padding-right:60px;
  }

  .about-intro .intro p {
    font-size:2.6rem;
  }

  .about-intro .intro .image.full img {
    height:400px;
  }

  .about-greeting p {
    font-size:1.8rem;
    margin-top:24px;
  }

}
/* Medium devices (tablets, less than 1024px) - md */
@media (max-width: 1024px) {

  .about-intro .intro {
    flex-wrap: wrap;
  }

  .about-intro .intro .left {
    flex: 1 1 100%;
    padding:0px;
    order:1;
  }

  .about-intro .intro .right {
    flex:1 1 100%;
    order:2;
    padding-top:30px;
  }

  .about-intro .intro .image {
    width: 100%;
    opacity: 0;
  }

  .about-intro .intro .image.full img {
    height:auto;
    width:100%;
  }

  .about-intro .intro .image.aos-animate {
    animation: none;
    opacity: 1;
  }

}
/* Small devices (landscape phones, less than 767px) - sm */
@media (max-width: 767px) {

  .about-intro .intro p {
    font-size:2rem;
  }

  .about-greeting p {
    font-size:1.6rem;
    margin-top:14px;
  }

}
/* Extra small devices (portrait phones, less than 500px) - xl */
@media (max-width: 500px) {

}


/* Buiness */
.business-intro .intro {
  display: flex;
  align-items: center;
}

.business-intro .intro .left {
  flex: 1 0 50%;
  padding-right:40px;
}

.business-intro .intro .right {
  flex: 1 0 50%;
}

.business-intro p {
  font-size:2rem;
  color:#333333;
  line-height:1.8;
}

.business-intro .title {
  font-size:2.8rem;
  font-weight:700;
  margin-bottom:38px;
  line-height:1.4;
}

.business-intro .intro .image {
  overflow: hidden;
  width: 0%;
  box-shadow: 0px 8px 24px 0px rgba(0,0,0,.08);
}

.business-intro .intro .image.aos-animate {
  animation: feature-image 1s cubic-bezier(0.4, 0.38, 0.26, 0.93) .15s both;
}

.business-intro .intro .image img {
  display: block;
}

.business-intro .intro .image.full img {
  max-width: none;
}

.business-technology {
  background-color: #e8e8e8;
}

.business-technology .technology {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.business-technology .technology .left {
  flex: 1 0 50%;
}

.business-technology .technology .right {
  flex: 1 0 50%;
  padding-left:40px;
}

.business-technology p {
  font-size:2rem;
  color:#333333;
  line-height:1.8;
}

.business-technology .title {
  font-size:2.8rem;
  font-weight:700;
  margin-bottom:38px;
  line-height:1.4;
}

.business-technology .technology .image {
  overflow: hidden;
  width: 0%;
  box-shadow: 0px 8px 24px 0px rgba(0,0,0,.08);
}

.business-technology .technology .image.aos-animate {
  animation: feature-image 1s cubic-bezier(0.4, 0.38, 0.26, 0.93) .15s both;
}

.business-technology .technology .image img {
  display: block;
}

.business-technology .technology .image.full img {
  max-width: none;
}

.business-creating .creating {
  display: flex;
  align-items: center;
}

.business-creating .creating .left {
  flex: 1 0 50%;
  padding-right:40px;
}

.business-creating .creating .right {
  flex: 1 0 50%;
}

.business-creating p {
  font-size:2rem;
  color:#333333;
  line-height:1.8;
}

.business-creating .title {
  font-size:2.8rem;
  font-weight:700;
  margin-bottom:38px;
  line-height:1.4;
}

.business-creating .creating .image {
  overflow: hidden;
  width: 0%;
  box-shadow: 0px 8px 24px 0px rgba(0,0,0,.08);
}

.business-creating .creating .image.aos-animate {
  animation: feature-image 1s cubic-bezier(0.4, 0.38, 0.26, 0.93) .15s both;
}

.business-creating .creating .image img {
  display: block;
}

.business-creating .creating .image.full img {
  max-width: none;
}

@keyframes feature-image {
  from { width: 0%; }
  to { width: 100%; }
}


/* Large devices (desktops, less than 1200px) - lg */
@media (max-width: 1200px) {

  .business-intro p {
    font-size:1.8rem;
  }

  .business-intro .title {
    font-size:2.2rem;
    margin-bottom:20px;
  }

  .business-intro .intro .image.full img {
    height:400px;
  }

  .business-technology p {
    font-size:1.8rem;
  }

  .business-technology .title {
    font-size:2.2rem;
    margin-bottom:20px;
  }

  .business-technology .technology .image.full img {
    height:400px;
  }

  .business-creating p {
    font-size:1.8rem;
  }

  .business-creating .title {
    font-size:2.2rem;
    margin-bottom:20px;
  }

  .business-creating .creating .image.full img {
    height:400px;
  }


}
/* Medium devices (tablets, less than 1024px) - md */
@media (max-width: 1024px) {

  .business-intro .intro {
    flex-wrap:wrap;
  }

  .business-intro .intro .left {
    flex: 1 1 100%;
    padding:0px;
    order:1;
  }

  .business-intro .intro .right {
    flex: 1 1 100%;
    padding-top:30px;
    order:2;
  }

  .business-intro .intro .image {
    width: 100%;
    opacity: 0;
  }

  .business-intro .intro .image.aos-animate {
    animation: none;
    opacity: 1;
  }

  .business-intro .intro .image.full img {
    width:100%;
    height:auto;
  }

  .business-technology .technology {
    flex-wrap:wrap;
  }

  .business-technology .technology .left {
    flex: 1 1 100%;
    padding-bottom:30px;
    order:1;
  }

  .business-technology .technology .right {
    flex: 1 1 100%;
    padding:0px;
    order:2;
  }

  .business-technology .technology .image {
    width: 100%;
    opacity: 0;
  }

  .business-technology .technology .image.aos-animate {
    animation: none;
    opacity: 1;
  }

  .business-technology .technology .image.full img {
    width:100%;
    height:auto;
  }

  .business-creating .creating {
    flex-wrap:wrap;
  }

  .business-creating .creating .left {
    flex: 1 1 100%;
    padding:0px;
    order:1;
  }

  .business-creating .creating .right {
    flex: 1 1 100%;
    padding-top:30px;
    order:2;
  }

  .business-creating .creating .image {
    width: 100%;
    opacity: 0;
  }

  .business-creating .creating .image.aos-animate {
    animation: none;
    opacity: 1;
  }

  .business-creating .creating .image.full img {
    width:100%;
    height:auto;
  }

}
/* Small devices (landscape phones, less than 767px) - sm */
@media (max-width: 767px) {

  .business-intro p {
    font-size:1.6rem;
  }

  .business-intro .title {
    font-size:1.8rem;
    margin-bottom:12px;
  }

  .business-technology p {
    font-size:1.6rem;
  }

  .business-technology .title {
    font-size:1.8rem;
    margin-bottom:12px;
  }

  .business-creating p {
    font-size:1.6rem;
  }

  .business-creating .title {
    font-size:1.8rem;
    margin-bottom:12px;
  }

}
/* Extra small devices (portrait phones, less than 500px) - xl */
@media (max-width: 500px) {

}


/* CCM */
.ccm-intro .intro {
  display: flex;
  align-items: center;
}

.ccm-intro .intro .left {
  flex: 1 0 50%;
  padding-right:100px;
}

.ccm-intro .intro .right {
  flex: 1 0 50%;
}

.ccm-intro .intro p {
  font-size:4rem;
  color:#333333;
  line-height:1.4;
  font-weight:700;
}

.ccm-intro .intro p.black {
  font-weight:900;
}

.ccm-intro .intro .image {
  overflow: hidden;
  width: 0%;
  box-shadow: 0px 8px 24px 0px rgba(0,0,0,.08);
}

.ccm-intro .intro .image img {
  display: block;
}

.ccm-intro .intro .image.full img {
  max-width: none;
}

.ccm-intro .intro .image.aos-animate {
  animation: feature-image 1s cubic-bezier(0.4, 0.38, 0.26, 0.93) .15s both;
}

.ccm-greeting {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('/img/sub/ccm/greeting-bg.png');
}

.ccm-greeting .din {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ccm-greeting .left {
  width:calc(100% - 210px);
  padding-right:70px;
}

.ccm-greeting .right {
  width:210px;
}

.ccm-greeting .right .image {
  overflow: hidden;
  width: 0%;
  box-shadow: 0px 8px 24px 0px rgba(0,0,0,.08);
}

.ccm-greeting .right .image.aos-animate {
  animation: feature-image 1s cubic-bezier(0.4, 0.38, 0.26, 0.93) .15s both;
}

.ccm-greeting .right .image img {
  display: block;
}

.ccm-greeting .right .image.full img {
  max-width: none;
}

.ccm-greeting p {
  font-size:2rem;
  font-weight:300;
  line-height:1.8;
  color:#333333;
  margin-top:38px;
}

.ccm-greeting p:first-child {
  margin-top:0px;
}

.ccm-greeting p span {
  font-weight:400;
}

.ccm-process p {
  font-size:4rem;
  color:#333333;
  line-height:1.4;
  font-weight:700;
}

.ccm-process .process-inner {
  margin-top:40px;
  border:1px solid #e2e2e2;
}

@keyframes feature-image {
  from { width: 0%; }
  to { width: 100%; }
}

/* Large devices (desktops, less than 1200px) - lg */
@media (max-width: 1200px) {

  .ccm-intro .intro .left {
    padding-right:60px;
  }

  .ccm-intro .intro p {
    font-size:2.6rem;
  }

  .ccm-intro .intro .image.full img {
    height:400px;
  }

  .ccm-greeting p {
    font-size:1.8rem;
    margin-top:24px;
  }

  .ccm-process p {
    font-size:2.6rem;
  }

}
/* Medium devices (tablets, less than 1024px) - md */
@media (max-width: 1024px) {

  .ccm-intro .intro {
    flex-wrap: wrap;
  }

  .ccm-intro .intro .left {
    flex: 1 1 100%;
    padding:0px;
    order:1;
  }

  .ccm-intro .intro .right {
    flex:1 1 100%;
    order:2;
    padding-top:30px;
  }

  .ccm-intro .intro .image {
    width: 100%;
    opacity: 0;
  }

  .ccm-intro .intro .image.full img {
    height:auto;
    width:100%;
  }

  .ccm-intro .intro .image.aos-animate {
    animation: none;
    opacity: 1;
  }

  .ccm-process .process-inner {
    margin-top:28px;
  }

}
/* Small devices (landscape phones, less than 767px) - sm */
@media (max-width: 767px) {

  .ccm-intro .intro p {
    font-size:2rem;
  }

  .ccm-greeting p {
    font-size:1.6rem;
    margin-top:14px;
  }

  .ccm-greeting .left {
    width:calc(100% - 140px);
    padding-right:40px;
  }

  .ccm-greeting .right {
    width:140px;
  }

  .ccm-greeting .right .image {
    width: 100%;
    opacity: 0;
  }

  .ccm-greeting .right .image.full img {
    height:auto;
    width:100%;
  }

  .ccm-greeting .right .image.aos-animate {
    animation: none;
    opacity: 1;
  }

  .ccm-process p {
    font-size:2rem;
  }

  .ccm-process .process-inner {
    margin-top:20px;
  }


}
/* Extra small devices (portrait phones, less than 500px) - xl */
@media (max-width: 500px) {


  .ccm-greeting .din {
    -webkit-box-lines: multiple;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .ccm-greeting .left {
    width:100%;
    padding:0px;
  }

  .ccm-greeting .right {
    margin-top:24px;
  }

}


/* Contact */
.contact-location .location__head {
  padding-bottom:30px;
  margin-bottom:30px;
  border-bottom:2px solid #1fb8df;
}
.contact-location .title {
  font-size:2.8rem;
  font-weight:700;
  color:#1e1e1e;
  line-height:1.4;
}

.location__body {
  display:flex;
  align-items: center;
}

.location__body .left {
  flex:1 0 57%;
}

.location__body .right {
  flex:1 0 43%;
  position: relative;
}

.location__body .map {
  width:100%;
  height:450px;
  overflow: hidden;
  border:1px solid #c8c8c8;
}

.location__body .map iframe {
  width:100%;
  height:800px;
  margin-top:-150px;
}

.location__body .info {
  height:450px;
  padding:0px 40px;
  display:flex;
  flex-direction:column;
  justify-content: center;
  background-color: #f4f4f4;
}

.location__body .info h2 {
  margin-bottom:40px;
  font-size:2.8rem;
  font-weight:700;
}

.location__body .info ul {
  margin:-30px 0px 0px;
}

.location__body .info li {
  display: flex;
  align-items: center;
  font-size:0px;
  padding:10px 0px 0px;
}

.location__body .info span {
  font-size:1.8rem;
  font-weight:300;
  color:#292929;
  display: block;
}

.location__body .info span.info__pin {
  font-weight:400;
}

.location__body .info span.relative {
  position: relative;
  display:flex;
  align-items:center;
}

.location__body .info-link {
  display:block;
}

.location__body .info-link img {
  width:35px;
  height:30px;
  display:block;
  margin-left:10px;
}

/* Large devices (desktops, less than 1200px) - lg */
@media (max-width: 1200px) {

  .location__body .left {
    flex:1 0 50%;
  }

  .location__body .right {
    flex:1 0 50%;
  }

  .contact-location .location__head {
    padding-bottom:20px;
    margin-bottom:20px;
  }

  .contact-location .title {
    font-size:2.2rem;
  }

  .location__body .info {
    padding:0px 30px;
  }

  .location__body .info h2 {
    font-size:2.2rem;
    margin-bottom:24px;
  }

  .location__body .info ul {
    margin:-20px 0px 0px;
  }

  .location__body .info li {
    padding:20px 0px 0px;
  }

  .location__body .info span {
    font-size:1.8rem;
  }


}
/* Medium devices (tablets, less than 1024px) - md */
@media (max-width: 1024px) {

  .location__body {
    flex-wrap:wrap;
  }

  .location__body .left {
    flex:1 1 100%;
  }

  .location__body .right {
    flex:1 1 100%;
  }

  .location__body .map {
    height:340px;
  }

  .location__body .map iframe {
    height:690px;
  }

  .location__body .info {
    height:400px;
  }

  .location__body .info li {
    flex-wrap:wrap;
  }

  .location__body .info span.info__pin {
    display: block;
    width:100%;
  }

}
/* Small devices (landscape phones, less than 767px) - sm */
@media (max-width: 767px) {

  .contact-location .location__head {
    padding-bottom:12px;
    margin-bottom:12px;
  }

  .contact-location .title {
    font-size:2rem;
  }

  .location__body .info {
    height: auto;
    padding:40px 20px;
  }

  .location__body .info h2 {
    font-size:2rem;
    margin-bottom:12px;
  }


  .location__body .info span {
    font-size:1.6rem;
  }

  .location__body .info-link {
  }

  .location__body .info-link img {
    width:28px;
    height:24px;
  }


}
/* Extra small devices (portrait phones, less than 500px) - xl */
@media (max-width: 500px) {

}



.greeting-text li.tit-li{font-size: 2.8rem; margin-bottom: 20px;}
.greeting-text li{font-size: 2rem; line-height: 1.625em;}

@media all and (max-width:768px){
  .greeting-text li.tit-li{font-size: 2rem; margin-bottom: 15px;}
  .greeting-text li{font-size: 1.6rem; }
}



/* History */

.history .sec-title h5{
  font-size: 4.8rem;
  font-weight: 600;
}

.history .bd {
  position: relative;
  padding:40px 0px 0px;
  overflow: hidden;
  margin-top: 100px;
}

.history .bd::before {
  content: "";
  display: block;
  position: absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  width: 2px;
  height:60px;
  background-color: #227fc4;
  z-index:2;
}

.history .bd::after {
  content: "";
  display: block;
  position: absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  width: 2px;
  height:100%;
  background-color: #c9c9c9;
}

.history .line {
  display: block;
  position: absolute;
  top:60px;
  left:50%;
  transform: translateX(-50%);
  width: 2px;
  height:0;
  background-color: #227fc4;
  z-index:2;
  transition: all .6s ease;
}

.history .item {
  position: relative;
  padding-left: 56.6667%;
}

.history .his-year {
  position: absolute;
  top:-20px;
  left:0;
  width: 43.333%;
  text-align:right;
}

.history .his-year h5 {
  font-size: 9rem;
  font-weight:700;
  line-height:.8;
  color:#d9d9d9;
  transition: all .8s ease;
}

.history .his-con dl:not(:last-child) {
  padding-bottom:100px;
}

.history .his-con dl:last-child {
  padding-bottom: 100px;
}

.history .his-con dt {
  position: relative;
  padding-bottom:20px;
  margin-bottom:40px;
  border-bottom: 2px solid #d2d2d2;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

.history .his-con dt .dot {
  display: block;
  position: absolute;
  top:10px;
  left: -16.2%;
  width:10px;
  height:10px;
  background-color: #c9c9c9;
  border-radius:50%;
  z-index:2;
  transition: all .6s ease;
}

.history .his-con dt .dot::before {
  content: "";
  display: block;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%) scale(0);
  width: 28px;
  height:28px;
  border-radius:50%;
  background-color: rgba(34,127,1946,.3);
  opacity:0;
  transition: all .6s ease;
}

.history .his-con dd {
  position: relative;
  padding-left:14px;
  font-size:2rem;
  line-height:1.7;
}

.history .his-con dd:not(:last-child) {
  margin-bottom:10px;
}

.history .his-con dd::before {
  content: "";
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #191919;
  border-radius: 50%;
  top:15px;
  left:2px;
}

.history .item.active .his-year h5 {
  color:#227fc4;
}

.history .his-con dl.active dt .dot {
  background-color: #227fc4;
}

.history .his-con dl.active dt .dot::before {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}

@media screen and (max-width:1200px) {
  .history .his-year {
    top:10px;
  }

  .history .his-year h5 {
    font-size: 6.2rem;
  }

  .history .his-con dd {
    font-size:1.8rem;
  }

  .history .his-con dd::before {
    font-size:1.6rem;
  }
}
@media screen and (max-width:1024px) {
  .history .bd {
    padding: 28px 0px 0px;
  }

  .history .bd::before {
    height: 40px;
  }

  .history .line {
    top:40px;
  }

  .history .item {
    padding-left: 54%;
  }

  .history .his-year {
    top:-8px;
  }

  .history .his-year h5 {
    font-size:5rem;
  }

  .history .his-con dl:last-child {
    padding-bottom: 80px;
  }

  .history .his-con dl:not(:last-child) {
    padding-bottom: 80px;
  }

  .history .his-con dt {
    padding-bottom:16px;
    margin-bottom:28px;
  }

  .history .his-con dt .dot {
    left: -9.5%;
    width: 8px;
    height:8px;
  }

  .history .his-con dt .dot::before {
    width: 20px;
    height:20px;
  }

  .history .his-con dd {
    padding-left:12px;
  }

  .history .his-con dd::before {
    top: 12px;
  }
}
@media screen and (max-width:768px) {
  .history .sec-title h5{
    font-size: 2.4rem;
  }
  .history .bd {
    margin-top: 40px;
    padding: 0px;
  }

  .history .bd::after {
    left:20px;
    transform: none;
  }

  .history .bd::before {
    left: 20px;
    transform: none;
    height: 70px;
  }

  .history .line {
    top:70px;
    left: 20px;
    transform: none;
  }

  .history .item {
    padding-left:50px;
  }
  
  .history .his-year {
    top:0px;
    left:50px;
    width: 100%;
    text-align: left;
  }

  .history .his-year h5 {
    font-size:4rem;
  }

  .history .his-con dl {
    padding-top: 60px;
  }

  .history .his-con dl:not(:last-child) {
    padding-bottom: 0px;
  }

  .history .his-con dl:last-child {
    padding-bottom:60px;
  }

  .history .his-con dt {
    
    font-size: 1.8rem;
  }
  .history .his-con dt .dot {
    top:6px;
    left: -33px;
  }

  .history .his-con dd {
    font-size:1.6rem;
  }

  .history .his-con dd:not(:last-child) {
    margin-bottom:6px;
  }

  .history .his-con dd::before {
    width: 3px;
    height: 3px;
  }
}
@media screen and (max-width:576px) {
  .history .bd::before {
    width: 1px;
    left: 12px;
    height: 60px;
  }

  .history .bd::after {
    width:1px;
    left:12px;
  }

  .history .line {
    top:60px;
    left: 12px;
    width: 1px;
  }

  .history .item {
    padding-left:30px;
  }

  .history .his-year {
    left:30px;
  }

  .history .his-con dl {
    padding-top: 50px;
  }

  .history .his-con dl:last-child {
    padding-bottom:50px;
  }

  .history .his-con dt {
    padding-bottom:10px;
    margin-bottom:16px;
  }

  .history .his-con dt .dot {
    left: -20px;
    width: 6px;
    height:6px;
  }

  .history .his-con dt .dot::before {
    width: 14px;
    height:14px;
  }

  .history .his-con dd {
    padding-left:10px;
    font-size:1.4rem;
    line-height:1.5;
  }

  .history .his-con dd::before {
    top:9px;
    font-size: 1.2rem;
  }

  .history .his-con dd:not(:last-child) {
    margin-bottom: 4px;
  }
}