@charset "utf-8";

#sub-main.saver.ft {background-image:url("../image/saver/bg_features.jpg");}
#sub-main.saver.specs {background-image:url("../image/saver/bg_specs.jpg");}
#sub-main.saver .inner nav {position:static;}
#sub-main.saver .inner nav a {background-color:#fff; color:#111; width:12rem; padding:1.25rem 0; margin-bottom:0 !important ; margin-top:4rem; border-radius:50px;}
#sub-main.saver .inner nav a span {letter-spacing: 0;}
#sub-main.saver .inner nav .current, #sub-main.saver .inner nav a:hover {background-color:var(--main-color); color:#fff;}

@media screen and (orientation:portrait) {
	#sub-main.saver.ft, #sub-main.saver.specs {background-size:150%; background-color:#181818; background-position:bottom center;}
}
@media screen and (orientation:landscape) {
	#sub-main.saver.ft, #sub-main.saver.specs {background-size:cover;}
}
@media screen and (max-width: 926px) {
	#sub-main.saver .inner nav {display:block;}
	#sub-main.saver .inner nav a {width:12rem;}
}
@media screen and (max-width: 568px) and (orientation:portrait) {
	#sub-main.saver .inner p {white-space:pre-line;}
	#sub-main.saver .inner nav a {width:8rem;}
}

/* saver */
.sv-wrap .swiper-wrapper {height:100vh;}
.sv-wrap .sv-sec {height:100vh; display:flex; justify-content:center; color:#fff; font-weight:300; font-size:20px; background-size:cover; background-position:center;}
.sv-wrap .sv-sec img {max-width:100%;}
.sv-wrap .sv-sec .inner {width:100%; max-width:1280px; display:flex; align-items:center;}
.sv-wrap .sv-sec .inner .picture, .sv-wrap .sv-sec .inner .tt-box {width:50%;}
.sv-wrap .sv-sec .tt-box h3 {font-weight:200; font-size:28px; text-transform:uppercase; letter-spacing:0;}
.sv-wrap .sv-sec .tt-box h3 mark {display:block; font-weight:400; font-size:56px; margin-top:24px; letter-spacing:-0.06em;}
.sv-wrap .sv-sec .tt-box h4 {white-space:pre-line; font-weight:400; font-size:28px; margin:48px 0; line-height:1.4;}
.sv-wrap .sv-sec .tt-box p {white-space:pre-line; line-height:1.5; color:#888;}
.sv-wrap .sv-sec .tt-box span {display:block; width:128px; margin-top:64px;}
.sv-wrap .sv-sec .col-1-fe {justify-content:flex-end;}
.sv-wrap .sv-sec .col-1-fe .tt-box {padding-left:5vw;}
.sv-wrap .sv-sec .bg-video {width:100%; height:100vh; position:absolute; top:0; left:0; z-index:-1;}
.sv-wrap .sv-sec .bg-video video {width:100%;}
.sv-wrap .sv-sec .bg-video:before {content:''; display:block; width:100%; height:100%; background-color:rgba(0,0,0,.38); position:absolute; top:0; left:0; z-index:1;}
.sv-wrap .row-2 {flex-direction:column; justify-content:space-between; text-align:center; color:#111;}
.sv-wrap .row-2 .tt-box {width:100%; padding:0 2rem;}
.sv-wrap .row-2 .tt-box p {margin-top:3.5rem;}
.sv-wrap .row-2 .tt-box {width:100%;}
/* active */
.sv-effect-le.swiper-slide-active .tt-box h3 {animation:fadeInLeft .8s cubic-bezier(.28,.06,.36,.86) forwards;}
.sv-effect-le.swiper-slide-active .tt-box h4 {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) .3s forwards;}
.sv-effect-le.swiper-slide-active .tt-box p, .sv-effect-le.swiper-slide-active .tt-box span {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) .5s forwards;}
.sv-effect-rg.swiper-slide-active .tt-box h3 {animation:fadeInRight .8s cubic-bezier(.28,.06,.36,.86) forwards;}
.sv-effect-rg.swiper-slide-active .tt-box h4 {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) .3s forwards;}
.sv-effect-rg.swiper-slide-active .tt-box p, .sv-effect-rg.swiper-slide-active .tt-box span {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) .5s forwards;}
.sv-effect-ct.swiper-slide-active .tt-box h3 {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) forwards;}
.sv-effect-ct.swiper-slide-active .tt-box p {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) .3s forwards;}
/* section - 1 */
.sv-wrap .sv-sec1 {background-image:url("../image/saver/bg_sec1.jpg");}
.sv-wrap .sv-sec1 .inner .picture {order:2; text-align:right;}
.sv-wrap .sv-sec1 .inner .tt-box h3 {font-size:64px; text-transform:none;}
.sv-wrap .sv-sec1 .inner .tt-box h3 mark {font-weight:700; font-size:inherit !important; letter-spacing:0;}
/* section - 1 : active */
.sv-sec1.swiper-slide-active .picture img {animation:fadeInRight .8s cubic-bezier(.28,.06,.36,.86) .3s forwards;}
/* section - 2 */
.sv-wrap .sv-sec2 .inner .tt-box span {width:auto;}
.sv-wrap .sv-sec2 .tt-box p {color:#fff; opacity:.5;}
/* section - 3 */
.sv-wrap .sv-sec3 {background-image:url("../image/saver/bg_sec3.jpg");}
.sv-wrap .sv-sec3 .picture {display:none;}
.sv-wrap .sv-sec3 .inner .tt-box h3 mark em {font-size:32px;margin-left:10px;}
/* section - 4 */
.sv-wrap .sv-sec4 .bg-video:before {display:none;}
.sv-wrap .sv-sec4 .inner {}
.sv-wrap .sv-sec4 .inner .tt-box {}
.sv-wrap .sv-sec4 .inner .tt-box > p {color:#fff; opacity:.5;}
.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap {width:100%; height:auto; display:flex; align-items:center; margin-top:24px;}
.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap p {width:128px; height:128px; background:url("../image/saver/ico_sec4.png") 0 0 / cover; position:relative;}
.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap p:before {content:''; display:block; width:40px; height:40px; border-radius:100%; border:7px solid #f3f3f3;  position:absolute; bottom:32px; right:11px; background-color:#66cd0a; animation:color-change 4s cubic-bezier(.28,.06,.36,.86) infinite;}
.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap div {width:calc(100% - 128px); padding-left:24px;}
.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap h5 {font-weight:500; font-size:18px;}
.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap ul {width:100%; height:auto; font-weight:400; font-size:15px; margin-top:8px;}
.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap ul li {display:inline-block; padding:8px; margin-top:8px; border-radius:6px; background-color:#66cd0a;}
.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap ul li:nth-child(2) {background-color:#1f68f0; margin:0 4px;}
.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap ul li:nth-child(3) {background-color:#de3951;}
/* active */
.sv-sec4.swiper-slide-active .tt-box .ico-wrap {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) .5s forwards;}
/* section - 5 */
.sv-wrap .sv-sec5 {background-image:url("../image/saver/bg_sec5.jpg");}
.sv-wrap .sv-sec5 .picture {display:none;}
/* section - 6 */
.sv-wrap .sv-sec6 {color:#111;}
.sv-wrap .sv-sec6 .bg-video:before {background-color:rgba(255,255,255,.1);}
.sv-wrap .sv-sec6 .inner {padding:6rem 0; align-items:flex-end;}
.sv-wrap .sv-sec6 .inner .tt-box {}
.sv-wrap .sv-sec6 .inner .tt-box p {color:inherit;}
/* section - 7 */
.sv-wrap .sv-sec7 {background-image:url("../image/saver/bg_sec7.jpg");}
.sv-wrap .sv-sec7 .inner {max-width:initial;}
.sv-wrap .sv-sec7 .inner .picture {text-align:right;}
.sv-wrap .sv-sec7 .inner .picture img {width:80%;}
.sv-wrap .sv-sec7 .inner .tt-box {padding-left:5vw;}
.sv-wrap .sv-sec7 .inner .tt-box p {color:#fff;}
/* active */
.sv-sec7.swiper-slide-active .picture img {animation:fadeInLeft .8s cubic-bezier(.28,.06,.36,.86) .3s forwards;}
/* section - 8 */
.sv-wrap .sv-sec8 {}
.sv-wrap .sv-sec8 .tt-box {height:45vh; text-align:center; display:flex; justify-content:center; flex-direction:column;}
.sv-wrap .sv-sec8 .picture {height:55vh; display:flex;}
.sv-wrap .sv-sec8 .picture p {opacity:1; width:50%; height:100%; display:flex; align-items:center; justify-content:center}
.sv-wrap .sv-sec8 .picture p:nth-child(1) {background-color:#272729;}
.sv-wrap .sv-sec8 .picture p:nth-child(2) {background-color:#989898;}
/* section - 9 */
.sv-wrap .sv-sec9 {background-color:#ebebeb; overflow:hidden;}
.sv-wrap .sv-sec9 .tt-box {padding-top:6rem;}
.sv-wrap .sv-sec9 .picture {line-height:0;}
.sv-wrap .sv-sec9 .picture img {width:75%;}
/* section - 10 */
.sv-wrap .sv-sec10 {justify-content:center;}
.sv-wrap .sv-sec10 .gallery {width:100%; height:auto; margin-top:8rem;}
.sv-wrap .sv-sec10 .gallery .gall-lst {width:100%; height:auto;}
.sv-wrap .sv-sec10 .gallery .gall-lst .slick-slide {width:25%; line-height:0; padding:0 1rem;}
.sv-wrap .sv-sec10 .gallery .gall-lst .slick-slide img {display:inline-block;}
.sv-wrap .sv-sec10 .gallery .slick-dots {width:100%; height:auto; margin-top:2rem;}
.sv-wrap .sv-sec10 .gallery .slick-dots li {display:inline-block; margin:0 8px;}
.sv-wrap .sv-sec10 .gallery .slick-dots button {display:inline-block; vertical-align:middle; width:8px; height:8px; border-radius:100%; margin-top:-4px; background-color:rgba(0,0,0,.5); font-size:0;}
.sv-wrap .sv-sec10 .gallery .slick-dots .slick-active button {width:0; height:0; border:12px transparent solid; border-top-width:0; border-bottom-color:var(--main-color); transform:rotateY(45deg); border-radius:0; background-color:transparent;}
/* section - 11 */
.sv-wrap .sv-sec11 {background-color:#e9e9e9;}
.sv-wrap .sv-sec11 ul {width:100%; height:auto; display:flex; align-items:center; text-align:center;}
.sv-wrap .sv-sec11 ul li {width:50%;}
.sv-wrap .sv-sec11 ul li a {display:block; width:100%; height:100%; color:#111 !important;}
.sv-wrap .sv-sec11 ul li h3 {display:block; font-size:1.375rem; letter-spacing:0;}
.sv-wrap .sv-sec11 ul li mark {display:inline-block; padding:1.25rem 4.5rem; margin-top:1.5rem; background-color:#fff; border-radius:50px; text-transform:uppercase; font-weight:600; position:relative; overflow:hidden; transition:all .3s ease-in-out; z-index:10;}
.sv-wrap .sv-sec11 ul li mark:before,
.sv-wrap .sv-sec11 ul li mark:after {content:''; display:block; width:0; height:100%; position:absolute; top:0; left:-10%; transform:skewX(-20deg); transition:all .7s cubic-bezier(0.77,0,0.175,1); box-shadow:2px 0 14px rgba(0,0,0,.6);}
.sv-wrap .sv-sec11 ul li mark:before {background-color:var(--main-color); opacity:1; z-index:-12;}
.sv-wrap .sv-sec11 ul li mark:after {background-color:#fff; opacity:0; z-index:-15; transition-duration:.4s;}
/* hover */
.sv-wrap .sv-sec11 ul li a:hover h3 {font-weight:700;}
.sv-wrap .sv-sec11 ul li a:hover mark {color:#fff;}
.sv-wrap .sv-sec11 ul li a:hover mark:before {opacity:1; width:116%;}
.sv-wrap .sv-sec11 ul li a:hover mark:after {opacity:1; width:120%;}
/* active */
.sv-sec11.swiper-slide-active ul li h3 {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) .5s forwards;}
.sv-sec11.swiper-slide-active ul li mark {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) .7s forwards;}
@media screen and (max-width: 1366px) {
	/* saver */
	.sv-wrap .sv-sec {font-size:18px;}
	.sv-wrap .sv-sec .inner {max-width:initial; padding:0 6rem;}
	.sv-wrap .sv-sec .tt-box h3 mark {font-size:48px; margin-top:1rem;}
	.sv-wrap .sv-sec .tt-box h4 {font-size:24px; margin:2.6rem 0;}
	.sv-wrap .sv-sec .tt-box span {margin-top:3.2rem;}
	/* section - 1 */
	.sv-wrap .sv-sec1 .inner .picture img {width:90%;}
	.sv-wrap .sv-sec1 .inner .tt-box h3 {font-size:56px;}
	/* section - 3 */
	.sv-wrap .sv-sec3 .inner .tt-box h3 mark em {font-size:24px; letter-spacing:-0.04em;}
	/* section - 5 */
	.sv-wrap .sv-sec5 .inner .tt-box {width:70%;}
	/* section - 6 */
	.sv-wrap .sv-sec6 .inner {padding-left:6rem;}
	/* section - 7 */
	.sv-wrap .sv-sec7 .inner .picture {text-align:center;}
	.sv-wrap .sv-sec7 .inner .picture img {width:100%;}
	/* section - 9 */
	.sv-wrap .sv-sec9 .picture img {width:90%;}
	/* section - 10 */
	.sv-wrap .sv-sec10 .gallery .gall-lst .slick-slide {width:33.33%;}
}
@media screen and (max-width: 1194px) {
	/* section - 4 */
	.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap p {width:96px; height:96px;}
	.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap p:before {width:30px; height:30px; border:5px solid #f3f3f3; bottom:25px; right:9px;}
	.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap h5 {font-size:15px;}
	.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap ul {font-size:13px; color:#fff;}
	/* section - 9 */
	.sv-wrap .sv-sec9 .picture img {width:100%;}
}
@media screen and (max-width: 926px) {
	/* saver */
	.sv-wrap .swiper-wrapper {height:auto; flex-direction:column; overflow:hidden;}
	.sv-wrap .sv-sec .inner {padding:0; flex-direction:column;}
	.sv-wrap .sv-sec .inner .picture, .sv-wrap .sv-sec .inner .tt-box {width:100%;}
	.sv-wrap .sv-sec .inner .tt-box {padding:6rem 1rem;}
	.sv-wrap .sv-sec {height:auto; font-size:15px; color:#111;}
	.sv-wrap .sv-sec .tt-box h3 {font-size:20px;}
	.sv-wrap .sv-sec .tt-box h3 mark {font-size:28px; margin-top:1rem;}
	.sv-wrap .sv-sec .tt-box h4 {font-size:20px; margin:32px 0;}
	.sv-wrap .sv-sec .tt-box span {display:none;}
	.sv-wrap .sv-sec .col-1-fe .tt-box {padding-left:2rem;}
	.sv-wrap .sv-sec .bg-video {position:static; height:auto; overflow:hidden;}
	.sv-wrap .sv-sec .bg-video video {width:120%; height:auto;}
	.sv-wrap .row-2 .tt-box {padding:6rem 2rem;}
	.sv-wrap .row-2 .tt-box p {margin-top:2rem;}
	/* section - 1 */
	.sv-wrap .sv-sec1 {background-image:none; color:#fff;}
	.sv-wrap .sv-sec1 .inner .picture {padding:6rem 0 4rem; background:url("../image/saver/bg_sec1.jpg") center / cover no-repeat; text-align:center;}
	.sv-wrap .sv-sec1 .inner .picture img {width:40%;}
	.sv-wrap .sv-sec1 .inner .tt-box {padding-top:0; order:2; background-color:#272729; text-align:center;}
	.sv-wrap .sv-sec1 .inner .tt-box h3 {font-size:40px; line-height:.8;}
	/* section - 2 */
	.sv-wrap .sv-sec2 {flex-direction:column;}
	.sv-wrap .sv-sec2 .bg-video:before {display:none;}
	.sv-wrap .sv-sec2 .tt-box p {color:#888; opacity:1;}
	/* section - 3 */
	.sv-wrap .sv-sec3 {flex-direction:column; background-image:none;}
	.sv-wrap .sv-sec3 .picture {display:block; position:relative; padding:25% 0; overflow:hidden;}
	.sv-wrap .sv-sec3 .picture img {width:128%; max-width:initial; position:absolute; top:-22%; left:-28%;}
	.sv-wrap .sv-sec3 .inner .tt-box h3 mark em {font-size:20px;}
	/* section - 4 */
	.sv-wrap .sv-sec4 {flex-direction:column;}
	.sv-wrap .sv-sec4 .inner .tt-box > p {color:#888; opacity:1;}
	.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap {display:block;}
	.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap p {background-image:url("../image/saver/ico_sec4_1.png");}
	.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap p:before {border:5px solid #fff;}
	.sv-wrap .sv-sec4 .inner .tt-box .ico-wrap div {width:100%; padding-left:0; padding-top:0;}
	/* section - 5 */
	.sv-wrap .sv-sec5 {flex-direction:column; background-image:none;}
	.sv-wrap .sv-sec5 .picture {display:block; position:relative; padding:25% 0; overflow:hidden;}
	.sv-wrap .sv-sec5 .picture img {width:128%; max-width:initial; position:absolute; top:-22%; left:-28%;}
	.sv-wrap .sv-sec5 .inner .tt-box {width:100%;}
	/* section - 6 */
	.sv-wrap .sv-sec6 {flex-direction:column;}
	.sv-wrap .sv-sec6 .inner {padding:0 0 0 1rem;}
	.sv-wrap .sv-sec6 .inner .tt-box p {color:#888;}
	/* section - 7 */
	.sv-wrap .sv-sec7 {background-image:none; color:#fff;}
	.sv-wrap .sv-sec7 .inner .picture {padding:6rem 0 4rem; background:url("../image/saver/bg_sec7.jpg") center / cover no-repeat; text-align:center;}
	.sv-wrap .sv-sec7 .inner .picture img {width:50%;}
	.sv-wrap .sv-sec7 .inner .tt-box {padding:0; padding-bottom:6rem; background-color:#101010; text-align:center;}
	.sv-wrap .sv-sec7 .inner .tt-box p {color:#888;}
	/* section - 8 */
	.sv-wrap .sv-sec8 .tt-box {height:auto; padding:6rem 2rem;}
	.sv-wrap .sv-sec8 .tt-box p {white-space:normal;}
	.sv-wrap .sv-sec8 .picture {height:auto; flex-direction:column;}
	.sv-wrap .sv-sec8 .picture p {width:100%; padding:4rem;}
	/* section - 9 */
	.sv-wrap .sv-sec9 .tt-box {padding-bottom:2rem;}
	.sv-wrap .sv-sec9 .picture {position:relative; padding:36% 0;}
	.sv-wrap .sv-sec9 .picture img {width:120%; max-width:initial; position:absolute; bottom:0; left:0;}
	/* section - 10 */
	.sv-wrap .sv-sec10 .tt-box h3 mark {margin-top:0;}
	.sv-wrap .sv-sec10 .gallery {margin-top:0; padding-bottom:6rem;}
	/* section - 11 */
	.sv-wrap .sv-sec11 {padding:2.4rem 0 6rem;}
	.sv-wrap .sv-sec11 ul {padding:0 1.25rem;}
	.sv-wrap .sv-sec11 ul li h3 {font-size:16px;}
}
@media screen and (max-width: 568px) {
	/* section - 1 */
	.sv-wrap .sv-sec1 .inner .picture img {width:60%;}
	.sv-wrap .sv-sec1 .inner .tt-box h3 {font-size:36px; line-height:.8;}
	/* section - 3 */
	.sv-wrap .sv-sec3 .picture {padding:42% 0;}
	.sv-wrap .sv-sec3 .picture img {width:150%; top:0; left:-50%;}
	/* section - 5 */
	.sv-wrap .sv-sec5 .picture {padding:36% 0;}
	.sv-wrap .sv-sec5 .picture img {width:150%; top:0; left:-50%;}
	.sv-wrap .sv-sec5 .tt-box p {white-space:normal;}
	/* section - 6 */
	.sv-wrap .sv-sec6 .inner .tt-box h4 {white-space:normal;}
	/* section - 7 */
	.sv-wrap .sv-sec7 .inner .picture img {width:80%;}
	/* section - 10 */
	.sv-wrap .sv-sec10 .gallery .gall-lst .slick-slide {width:50%; padding:0 8px;}
	/* section - 11 */
	.sv-wrap .sv-sec11 ul {flex-direction:column;}
	.sv-wrap .sv-sec11 ul li {width:80%;}
}


/* specs */
.specs-wrap {width:100%; height:auto; max-width:1280px; padding:8rem 0 2rem; margin:0 auto; text-align:center;}
.specs-wrap h3 {font-weight:500; font-size:3.5rem; text-transform:uppercase;}
.specs-wrap img {max-width:100%;}
.specs-wrap > ul {width:100%; height:auto; border-top:2px solid var(--main-color); margin-top:4rem; text-align:left; font-weight:300; font-size:1.25rem;}
.specs-wrap > ul li {width:inherit; height:auto; display:table; border-bottom:1px solid #d7d7d7; padding:4rem 0;}
.specs-wrap > ul li h4, .specs-wrap > ul li div, .specs-wrap > ul li p, .specs-wrap > ul li ul {display:table-cell; vertical-align:middle; line-height:1.6;}
.specs-wrap > ul li h4 {color:#aaa; width:25%;}
.specs-wrap > ul li p {padding:0 2rem;}
.specs-wrap > ul li div, .specs-wrap > ul li ul {width:100%; display:table;}
.specs-wrap > ul li div p, .specs-wrap > ul li ul li p {width:50%;}
.specs-wrap > ul li ul li {padding-top:0;}
.specs-wrap > ul li ul li:nth-child(2) {padding:4rem 2rem 0; border-bottom:0;}
.specs-wrap > ul li:nth-child(3) div p {vertical-align:top;}

@media screen and (max-width: 1366px) {
	.specs-wrap {padding:8rem 2rem 2rem;}
	.specs-wrap > ul {font-size:18px;}
}
@media screen and (max-width: 926px) {
	.specs-wrap {padding:6rem 1.25rem;}
	.specs-wrap h3 {font-size:2.5rem;}
	.specs-wrap > ul {font-size:15px; margin-top:2rem;}
}
@media screen and (max-width: 568px) {
	.specs-wrap > ul li {display:block; padding:3rem 0;}
	.specs-wrap > ul li h4 {display:block; width:100%; margin-bottom:1rem; font-size:1.25rem;}
	.specs-wrap > ul li p {padding:0;}
	.specs-wrap > ul li ul li:nth-child(1) {display:table;}
	.specs-wrap > ul li ul li:nth-child(2) {padding:3rem 0 0;}
}

/* effect */
@keyframes fadeInUp { from {opacity:0; -webkit-transform:translate3d(0, 40px, 0); transform:translate3d(0, 40px, 0);} to {opacity:1; -webkit-transform:none; transform:none; } } 
@keyframes fadeInLeft { from {opacity:0; -webkit-transform:translate3d(-40px, 0, 0); transform:translate3d(-40px, 0, 0);} to {opacity:1; -webkit-transform:none; transform:none; } } 
@keyframes fadeInRight { from {opacity:0; -webkit-transform:translate3d(40px, 0, 0); transform:translate3d(40px, 0, 0);} to {opacity:1; -webkit-transform:none; transform:none; } }
@keyframes color-change { 0% { background-color:#66cd0a;} 35% {background-color:#1f68f0;} 75% { background-color:#de3951;} 95% { background-color:#66cd0a;}}