.agile-config { font-weight:300; font-size:16px; font-weight:300; max-width:1920px; margin:0 auto; overflow-x:hidden; }
.agile-config .w1200 { margin: 0 auto; position: relative; width: 75em; } 
.agile-config .w1440 { margin: 0 auto; position: relative; width: 85.375em; } 
.agile-config .m-show { display: none; }
.agile-config .nowrap { white-space: nowrap; }
.agile-config .regular { font-weight: 400; }
.agile-config .medium { font-weight: 500; }
.agile-config .text>h2 { font-size:2.1825em; line-height:1.2;font-weight: 500;color: #004e59; }
.agile-config .text>p { font-size:1.25em; line-height:1.5; padding-top:1.5em; }
@media (max-width:1600px){
  .agile-config { font-size:1.11111vw; }
}
@media screen and (max-width:768px){
  html { font-size:10.35px; }
  .agile-config .w1200 { width:auto; }
  .agile-config .text h2 { font-size:2rem; padding:1.5rem 6% 0;font-weight: 700; }
  .agile-config .text p { font-size:1.5rem; padding:1rem 6% 0;font-weight: 400; }
  .agile-config .m-hide{display: none;}
  .agile-config .text p:last-of-type{padding-top: 0.8rem;}
}
/**************************************************************************/
.agile-config .line{display: inline-block;width: 4em;height: 0.25em;background: #004e59;}
.agile-config .a{background: url(a.jpg) center / 120em auto no-repeat;height: 48em;}
.agile-config .a .text{padding-top: 8em;color: #fff;}
.agile-config .a .text h1{font-size: 4.375em;line-height: 1.2;}
.agile-config .a .text h2{font-size: 2.8125em;line-height: 1.2;padding-top: 0.45em;color: #fff;font-weight: 500;}
.agile-config .a .text p{font-size: 1.1em;}
.agile-config .a .download{display: inline-block;font-size: 1.2em;padding: 0.5em 0.75em;margin-top: 2em;background: #a6bdc3;}
.agile-config .a .download a{color: #2b3841;font-weight: 500;text-decoration: none;}
.agile-config .a .download img{vertical-align: baseline;width: 0.85em;height: auto;margin-left: 0.5em;}
.agile-config .b .text{float: right;width: 22em;padding: 12em 0}
.agile-config .b .line-box{text-align: right;padding-bottom: 6em;}
.agile-config .b .img{background: url(b.png) 0 50% / 100% no-repeat;width: 48em;padding-bottom: 54%;}
.agile-config .c .text{padding: 2em 0 4em;}
.agile-config .c .descs{text-align: justify}
.agile-config .c .descs::after{content: '';display: inline-block;width: 100%;height: 100%;}
.agile-config .c .descs li{position: relative;display: inline-block;vertical-align: top;text-align: center;color: #fff;;width: 35%;min-height: 22em;margin-bottom: 5em;background: #004e59;;padding: 5em 2em 3em;}
.agile-config .c .icon{display: block;margin: 0 auto;width: 8em;height: 8em;background-position: center;background-repeat: no-repeat;background-size: contain;}
.agile-config .c .li1 .icon{background-image: url(c-icon-1.png)}
.agile-config .c .li2 .icon{background-image: url(c-icon-2.png)}
.agile-config .c .li3 .icon{background-image: url(c-icon-3.png)}
.agile-config .c .li4 .icon{background-image: url(c-icon-4.png)}
.agile-config .c .descs h3{font-size: 1.625em;color: #46bbc7;padding: 1.75em 0 0.5em;}
.agile-config .d{background: #f7f7fb}
.agile-config .d .text{text-align: center;padding: 4em 0 2em;}
.agile-config .d .line{margin-top: 1em;}
.agile-config .d .icons{text-align: justify;padding-bottom: 5em;}
.agile-config .d .icons::after{content: '';display: inline-block;width: 100%;}
.agile-config .d .icons li{position: relative;display:inline-block;width: 25%;text-align: center;color: #2b3841}
.agile-config .d .icons .icon{display: block;width:15em;height: 15em;margin: 0 auto;background-position: center;background-size: contain;background-repeat: no-repeat;}
.agile-config .d .li1 .icon{background-image: url(d-img-1.png)}
.agile-config .d .li2 .icon{background-image: url(d-img-2.png)}
.agile-config .d .li3 .icon{background-image: url(d-img-3.png)}
.agile-config .d li+li::before{content: '';display: block;width: 11em;height: 2em;position: absolute;top: 40%;left: -10.5em;background: url(d-arrow-ver.png) center / contain no-repeat;}
.agile-config .d .icons p{font-size: 1.625em;color: #004e59;font-weight: 700;}
@media screen and (max-width: 768px){
  .agile-config .line{width: 5rem;height: 0.15rem;}
  .agile-config .a{background: url(m-a.jpg) center / 100% no-repeat;height: 0;padding-bottom: 142%;}
  .agile-config .a .text{padding: 0;}
  .agile-config .a .text h1{font-size: 8vw;padding: 20vw 6% 3vw;}
  .agile-config .a .text h2{font-size: 5.5vw;padding: 0 6% 5vw;}
  .agile-config .a .text p{font-size: 4vw;padding: 0 6% 5vw;}
  .agile-config .a .download{font-size: 4vw;margin: 0 6% 0;padding: 1vw 3vw;background: #dceaed;}
  .agile-config .b .text{float: none;padding: 0;width: auto;text-align: center;}
  .agile-config .b .line-box{text-align: center;padding: 5rem 0 0;}
  .agile-config .b .img{width: auto;}
  .agile-config .c .text{padding: 4rem 0 2rem}
  .agile-config .c .line{margin: 0 6%;}
  .agile-config .c .descs{background: #004e59}
  .agile-config .c .descs li{width: 100%;min-height: auto;box-sizing: border-box;text-align: left;margin: 0;padding: 1.5rem 6% 1.5rem 7rem;}
  .agile-config .c .descs .icon{position: absolute;top: 50%;left: 1.5rem;margin-top: -2rem;width: 4rem;height: 4rem;}
  .agile-config .c .descs h3{padding: 0;font-size: 1.5rem;}
  .agile-config .c .descs p{font-size: 1.35rem;}
  .agile-config .d {background: #fff;}
  .agile-config .d .text{padding: 6rem 0 2rem;}
  .agile-config .d .line{position: absolute;margin: 0;top: 6rem;left: 50%;margin-left: -2.5rem;}
  .agile-config .d .icons{background: #f7f7fb;padding: 2rem 0 3rem}
  .agile-config .d .icons li{width: 100%;}
  .agile-config .d .icons li+li{margin-top: 5rem;}
  .agile-config .d li+li::before{background-image: url(d-arrow.png);top: -5rem;left: 49%;width: 0.65rem;height: 6rem;}
  .agile-config .d .icons .icon{width: 15rem;height: 12rem;}
  .agile-config .d .icons p{font-size: 1.4rem;}

}