*,
 *::before,
 *::after {
     box-sizing: border-box;
     outline: none;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p {
     margin: 5px 0;
 }

 body {
     margin: 0;
     padding: 0;
     background-color: #fff;
     color: #282828;
     font-family: 'Titillium Web', sans-serif;
 }

 .intro {

     width: 100%;
     height: 100vh;
     /* Use vh as a fallback for browsers that do not support Custom Properties */
     height: calc(var(--vh, 1vh) * 100);
     position: relative;
     margin: 0 auto;
     overflow: hidden;
 }

 @media(min-width:480px) {
     .intro {
         width: 480px;
     }
 }

 .intro .slide {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     top: 0;
     left: 0;
     padding: 0 20px;
     overflow: hidden;
 }
 .intro .slide .slide-content {
     color: #282828;
 }
 .intro .slide .slide-content h2 {
     line-height: .9;
     font-size: 60px;
 }

 /*A*/

 .intro .slide.slide-a {
     background: url(images/grey-bg.png) repeat 0 0;
     z-index: 1000;
 }

 .intro .slide.slide-a .subhead {
     font-size: 42px;
     margin-bottom: 0;
     line-height: 1;
 }

 .intro .slide.slide-a .what-we-do {
     position: relative;
     display: inline-block
 }

 .intro .slide.slide-a .head {
     font-size: 80px;
     font-weight: 600;
     line-height: .9
 }

 .intro .slide.slide-a .slide-a-child {
     transform: translateY(50px);
     opacity: 0;
     transition: all 1s;
 }

 .intro .slide.slide-a .slide-a-child.is-visible {
     transform: translateY(0);
     opacity: 1;
 }

 .intro .slide.slide-a p {
     font-size: 25px;
 }

 .intro .slide.slide-a .div1 {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     opacity: 0;
     transform: translateY(0px);
 }

 .intro .slide.slide-a .div1 img {
     transform: scale(0);
     transition: all 1s;
 }

 .intro .slide.slide-a .div1.is-visible img {
     width: 100%;
     height: 100%;
     transform: scale(1.4);
 }

 /*B*/

 .intro .slide.slide-b {
     background: url(images/grey-bg.png) repeat 0 0;
     background-size: 200px;
     z-index: 900;
 }
 .intro .slide.slide-b h2 {
     font-size: 80px;
     font-weight: 600;

 }
 .intro .slide.slide-b p {
     font-size: 42px;
 }
 .intro .slide.slide-b p,
 .intro .slide.slide-b h2 {
     transform: translateY(50px);
     opacity: 0;
     transition: all 1s;
 }

 .intro .slide.slide-b p.is-visible,
 .intro .slide.slide-b h2.is-visible {
     transform: translateY(0);
     opacity: 1;
 }
 .intro .slide.slide-b .element-box {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
 }

 .intro .slide.slide-b .element-box img {
     width: 150px;
     transition: all 1s;
 }

 .intro .slide.slide-b .element-box.is-visible img.img-1 {
     transform: translateY(0);
 }

 .intro .slide.slide-b .element-box img.img-1 {
     transform: translateY(-180px);
 }

 .intro .slide.slide-b .element-box img.img-2 {
     position: absolute;
     bottom: 0;
     right: 0;
     transform: rotate(-180deg) translateY(-180px);
 }

 .intro .slide.slide-b .element-box.is-visible img.img-2 {
     transform: rotate(-180deg) translateY(0);

 }

 /*C*/

 .intro .slide.slide-c {
     background: url(images/grey-bg.png) repeat 0 0;
     z-index: 800;
 }
 .intro .slide.slide-c p {
     font-size: 42px;
     text-align: left;
     line-height: 1.20;
 }

 .sound-value {
     font-size: 56px;
 }
 .intro .slide.slide-c .slide-c-child {
     transition: all 1s;
     transform: translateY(-50px);
     opacity: 0;
 }
 .intro .slide.slide-c .slide-c-child.is-visible {
     transform: translateY(0);
     opacity: 1;
 }

 .intro .slide.slide-c .element-box {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
 }

 .intro .slide.slide-c .element-box img {
     width: 150px;
     transition: all 1s;
 }

 .intro .slide.slide-c .element-box.is-visible img.slideC-corner-top {
     transform: translateY(0);
 }

 .intro .slide.slide-c .element-box img.slideC-corner-top {
     transform: translateY(-180px);
 }

 .intro .slide.slide-c .element-box img.slideC-corner-bottom {
     position: absolute;
     bottom: 0;
     right: 0;
     transform: translateY(180px);
     width: 200px;
 }

 .intro .slide.slide-c .element-box.is-visible img.slideC-corner-bottom {
     transform: translateY(0);

 }


 /*D*/

 :root {
     --slide: 70%;
     --stime: 8s;
     --runtxt: 29px;
     --runtxtLH: 1.3;
     --head: 60px;
 }

 .intro .slide.slide-d {
     background: #00b5c2;
     z-index: 700;
 }

 .intro .slide.slide-d .slide-d-child {
     transform: translateY(50px);
     opacity: 0;
     transition: all 1s;
 }

 .intro .slide.slide-d p {
     font-size: 42px;
     text-align: left;
     color: #fff;
     line-height: 1.20;
 }

 .intro .slide.slide-d .slide-d-child.is-visible {
     transform: translateY(0);
     opacity: 1;

 }

 .intro .slide.slide-d .element-box {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
 }

 .intro .slide.slide-d .element-box img {
     width: 280px;
     transform: translateY(-180px);
     transition: all 1s;
 }

 .intro .slide.slide-d .element-box.is-visible img.slideD-corner-top {
     transform: translateY(0);
 }

 .intro .slide.slide-d .color-slide {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 0;
     height: 10px;
     background: #f14682;
     transition: width var(--stime);
 }

 .intro .slide.slide-d .color-slide.is-visible {
     width: var(--slide);
 }

 /*E Excellence*/

 .intro .slide.slide-e {
     background: url(images/grey-bg.png) repeat 0 0;
     z-index: 600;
 }

 .intro .slide.slide-e h2 {
     font-size: var(--head);
 }

 .intro .slide.slide-e .slide-e-child {
     transform: translateY(50px);
     opacity: 0;
     transition: all 1s;
 }

 .intro .slide.slide-e p {
     text-align: left;
     font-size: var(--runtxt);
     line-height: var(--runtxtLH);
     display: inline;
 }

 .intro .slide.slide-e .slide-e-child.is-visible {
     transform: translateY(0);
     opacity: 1;
 }

 .intro .slide.slide-e .element-box {
     opacity: 0;
     transform: translateY(-180px);
     transition: all 1s;
 }

 .intro .slide.slide-e .element-box.is-visible {
     opacity: 1;
     transform: translateY(0);
 }

 .intro .slide.slide-e .element-box img.slide-icon {
     width: 120px;
     height: 120px;
 }

 .intro .slide.slide-e .color-slide {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 10px;
     background: #ad6ea9;
     transition: width var(--stime);
 }

 .intro .slide.slide-e .color-slide.is-visible {
     width: var(--slide);
 }

 /*F Intigrity*/

 .intro .slide.slide-f {
     background: #ad6ea9;
     z-index: 500;
 }

 .intro .slide.slide-f h2 {
     font-size: var(--head);
     color: #fff;
 }

 .intro .slide.slide-f .slide-f-child {
     transform: translateY(50px);
     opacity: 0;
     transition: all 1s;
 }

 .intro .slide.slide-f p {
     text-align: left;
     color: #fff;
     font-size: var(--runtxt);
     line-height: var(--runtxtLH);
     display: inline;
 }


 .intro .slide.slide-f .element-box img {
     opacity: 0;
     transform: translateY(-180px);
     transition: all 1s;
     width: 120px;
     height: 120px;

 }

 .intro .slide.slide-f .element-box.is-visible img.slide-icon {
     opacity: 1;
     transform: translateY(0);
 }

 .intro .slide.slide-f .slide-f-child.is-visible {
     transform: translateY(0);
     opacity: 1;
 }

 .intro .slide.slide-f .color-slide {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 0;
     height: 10px;
     background: #ddd;
     transition: width var(--stime);
 }

 .intro .slide.slide-f .color-slide.is-visible {
     width: var(--slide);
 }

 /*G RESPECT*/

 .intro .slide.slide-g {
     background: url(images/grey-bg.png) repeat 0 0;
     z-index: 400;
 }

 .intro .slide.slide-g .slide-g-child {
     transform: translateY(50px);
     opacity: 0;
     transition: all 1s;
 }

 .intro .slide.slide-g p {
     text-align: left;
     font-size: var(--runtxt);
     line-height: var(--runtxtLH);
     display: inline;
 }

 .intro .slide.slide-g .slide-g-child.is-visible {
     transform: translateY(0);
     opacity: 1;
 }

 .intro .slide.slide-g .element-box img.slide-icon {
     opacity: 0;
     transform: translateY(-180px);
     transition: all 1s;
     width: 120px;
     height: 120px;

 }

 .intro .slide.slide-g .element-box.is-visible img.slide-icon {
     opacity: 1;
     transform: translateY(0);
 }

 .intro .slide.slide-g .color-slide {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 10px;
     background: #1db5a3;
     transition: width var(--stime);
 }

 .intro .slide.slide-g .color-slide.is-visible {
     width: var(--slide);
 }

 /*H GROWTH*/

 .intro .slide.slide-h {
     background: #1db5a3;
     z-index: 300;
 }

 .intro .slide.slide-h .slide-h-child {
     transform: translateY(50px);
     opacity: 0;
     transition: all 1s;
 }

 .intro .slide.slide-h h2 {
     color: #fff;
     font-size: var(--head);
 }

 .intro .slide.slide-h p {
     text-align: left;
     font-size: var(--runtxt);
     line-height: var(--runtxtLH);
     display: inline;
     color: #fff;
 }

 .intro .slide.slide-h .element-box img.slide-icon {
     width: 120px;
     height: 120px;
     opacity: 0;
     transform: translateY(-180px);
     transition: all 1s;
 }

 .intro .slide.slide-h .element-box.is-visible img.slide-icon {
     opacity: 1;
     transform: translateY(0);
 }

 .intro .slide.slide-h .slide-h-child.is-visible {
     transform: translateY(0);
     opacity: 1;
 }

 .intro .slide.slide-h .color-slide {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 0;
     height: 10px;
     background: #ddd;
     transition: width var(--stime);
 }

 .intro .slide.slide-h .color-slide.is-visible {
     width: var(--slide);
 }

 /*J HAPPINESS*/

 .intro .slide.slide-j {
     background: url(images/grey-bg.png) repeat 0 0;
     z-index: 200;
 }

 .intro .slide.slide-j .slide-j-child {
     transform: translateY(50px);
     opacity: 0;
     transition: all 1s;
 }

 .intro .slide.slide-j p {
     text-align: left;
     font-size: var(--runtxt);
     line-height: var(--runtxtLH);
     display: inline;
 }

 .intro .slide.slide-j .slide-j-child.is-visible {
     transform: translateY(0);
     opacity: 1;
 }

 .intro .slide.slide-j .element-box img.slide-icon {
     opacity: 0;
     transform: translateY(-180px);
     transition: all 1s;
     width: 120px;
     height: 120px;
 }

 .intro .slide.slide-j .element-box.is-visible img.slide-icon {
     opacity: 1;
     transform: translateY(0);
 }

 /*K   wish to us*/

 .intro .slide.slide-k {
     background: url(images/grey-bg.png) repeat 0 0;
     z-index: 100;
     display: block;
 }

 .wish {
     display: flex;
     flex-wrap: wrap;
     height: 100%
 }

 .meet-us {
     width: 100%;
     align-self: self-end;
 }

 .intro .slide.slide-k .slide-k-child {
     transition: all 1s;
     opacity: 0;
     transform: translateY(-50px);
 }

 .intro .slide.slide-k h2 {
     font-size: 84px;
     text-align: center;
 }

 .intro .slide.slide-k p {
     text-align: center;
     font-size: 36px;
     line-height: 1.2;
 }
.intro .slide.slide-k p a{
    color:#282828;
}

 .intro .slide.slide-k button.slide-k-child {
     transform: translateY(50px);
 }

 .intro .slide.slide-k .slide-k-child.is-visible {
     opacity: 1;
     transform: translateY(0);
 }

 .intro .slide.slide-k .mercury {
     width: 100%;
     align-self: flex-end;
     padding-bottom: 50px;
     opacity: 0;
     transform: translateY(180px);
     transition: all 1s;
     transition-delay: 1.5s;
     text-align: center;
 }

 .intro .slide.slide-k .mercury img.img-2 {
     width: 180px;
 }

 .intro .slide.slide-k .mercury.is-visible {
     transform: translateY(0);

 }
 .intro .slide .slide-content p a {
     color: #282828;
     text-decoration: none;
     position: relative;
 }
.intro .slide .slide-content p a:hover::after {
     width: 180px;
 }

 .intro .slide .slide-content p a::after {
     content: "";
     width: 0;
     height: 2px;
     background: #282828;
     display: block;
     position: absolute;
     bottom: -3px;
     left: 0;
     transition: all 0.5s;
 }