/* css-transition */ /* transition-delay */ .noTransition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; } @media only screen and (max-width: 767.7px) { section .title { margin: 20vw 0vw; } } @media only screen and (min-width: 768px) and (max-width: 1280px) { section .title { margin: 150px 0px; margin: 11.71875vw 0vw; } } @media only screen and (min-width: 1281px) { section .title { margin: 150px 0px; } } video { width: 100%; height: 100%; } .sec-kv { position: relative; background-color: #efefef; overflow: hidden; } .sec-kv .vertical-mid-con { overflow: visible; } .sec-kv .vertical-mid-con .vertical-mid-txt { width: 100%; } .sec-kv .vertical-mid-con .vertical-mid-txt h1 { letter-spacing: -0.02em; overflow: hidden; -webkit-transform: scale(0.82); -moz-transform: scale(0.82); -ms-transform: scale(0.82); -o-transform: scale(0.82); transform: scale(0.82); opacity: 0; filter: alpha(opacity=0); -webkit-transform-origin: center bottom top; -moz-transform-origin: center bottom top; -ms-transform-origin: center bottom top; -o-transform-origin: center bottom top; transform-origin: center bottom top; } .sec-kv .vertical-mid-con .vertical-mid-txt .txt-kv-sub-tit { display: block; text-align: center; letter-spacing: -0.02em; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); opacity: 0; filter: alpha(opacity=0); } .sec-kv .vertical-mid-con .vertical-mid-txt.onTrans h1 { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.8s; -moz-transition: -moz-transform 1.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.8s; -ms-transition: -ms-transform 1.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.8s; -o-transition: -o-transform 1.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.8s; transition: transform 1.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.8s; } .sec-kv .vertical-mid-con .vertical-mid-txt.onTrans .txt-kv-sub-tit { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 0.8s 0.5s ease-out, opacity 1s 0.5s linear; -moz-transition: -moz-transform 0.8s 0.5s ease-out, opacity 1s 0.5s linear; -ms-transition: -ms-transform 0.8s 0.5s ease-out, opacity 1s 0.5s linear; -o-transition: -o-transform 0.8s 0.5s ease-out, opacity 1s 0.5s linear; transition: transform 0.8s 0.5s ease-out, opacity 1s 0.5s linear; } .sec-kv .vertical-mid-con .video-container { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .sec-kv .vertical-mid-con .video-container .video-keyvisual { position: absolute; top: 50%; left: 50%; width: 100%; height: auto; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; filter: alpha(opacity=0); } .sec-kv .vertical-mid-con .video-container .video-keyvisual.vertical { width: auto; height: 100%; } .sec-kv .vertical-mid-con .video-container.onTrans { animation: Keyvisual 8s 1s linear infinite; } .sec-kv .vertical-mid-con .onShow .video-keyvisual { opacity: 1; } @media only screen and (min-width: 768px) { .sec-kv .vertical-mid-con .video-container { height: 100%; background-image: url("../img/kv_bg.jpg"); } .sec-kv .vertical-mid-con .video-container .video-keyvisual.onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1s 0s ease-in-out, opacity 1s; -moz-transition: -moz-transform 1s 0s ease-in-out, opacity 1s; -ms-transition: -ms-transform 1s 0s ease-in-out, opacity 1s; -o-transition: -o-transform 1s 0s ease-in-out, opacity 1s; transition: transform 1s 0s ease-in-out, opacity 1s; } } @media only screen and (min-width: 1281px) { .sec-kv { height: calc(100vh - 70px); } } @media only screen and (min-width: 768px) and (max-width: 1280px) { .sec-kv { height: calc(100vh - 5.46875vw); } } @media only screen and (max-width: 767.7px) { .sec-kv { height: 133.33vw; } .sec-kv .vertical-mid-con .vertical-mid-txt { margin-top: 4vw; } .sec-kv .vertical-mid-con .vertical-mid-txt .txt-kv-sub-tit { font-size: 3.733333vw; line-height: 1.857143; } .sec-kv .vertical-mid-con .video-container { height: 100%; background-image: url("../img/m_kv_bg.jpg"); } .sec-kv .vertical-mid-con .video-container .video-keyvisual.onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1s 0s ease-in-out, opacity 1s; -moz-transition: -moz-transform 1s 0s ease-in-out, opacity 1s; -ms-transition: -ms-transform 1s 0s ease-in-out, opacity 1s; -o-transition: -o-transform 1s 0s ease-in-out, opacity 1s; transition: transform 1s 0s ease-in-out, opacity 1s; } } @media only screen and (max-width: 767.7px) { .outer-sec { display: flex; flex-direction: column; overflow: hidden; } .outer-sec .sec-1 { order: 2; } .outer-sec .sec-2 { order: 1; z-index: 3; } } .sec-1 .has-bg-con { height: 100%; } .sec-1 .vertical-mid-con { overflow: visible; color: #000; } .sec-1 .vertical-mid-con p { letter-spacing: -0.045em; text-align: center; } .sec-1 .vertical-mid-con span { display: block; letter-spacing: -0.045em; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .sec-1 .vertical-mid-con span:first-child { margin-top: 0; } .sec-1 .vertical-mid-con.onTrans .txt-1 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.85s 0.28s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.28s linear; -moz-transition: -moz-transform 0.85s 0.28s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.28s linear; -ms-transition: -ms-transform 0.85s 0.28s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.28s linear; -o-transition: -o-transform 0.85s 0.28s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.28s linear; transition: transform 0.85s 0.28s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.28s linear; } .sec-1 .vertical-mid-con.onTrans .txt-2 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.85s 0.36s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.36s linear; -moz-transition: -moz-transform 0.85s 0.36s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.36s linear; -ms-transition: -ms-transform 0.85s 0.36s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.36s linear; -o-transition: -o-transform 0.85s 0.36s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.36s linear; transition: transform 0.85s 0.36s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.36s linear; } .sec-1 .vertical-mid-con.onTrans .txt-3 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.85s 0.44s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.44s linear; -moz-transition: -moz-transform 0.85s 0.44s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.44s linear; -ms-transition: -ms-transform 0.85s 0.44s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.44s linear; -o-transition: -o-transform 0.85s 0.44s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.44s linear; transition: transform 0.85s 0.44s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.44s linear; } .sec-1 .vertical-mid-con.onTrans .txt-4 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.85s 0.52s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.52s linear; -moz-transition: -moz-transform 0.85s 0.52s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.52s linear; -ms-transition: -ms-transform 0.85s 0.52s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.52s linear; -o-transition: -o-transform 0.85s 0.52s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.52s linear; transition: transform 0.85s 0.52s cubic-bezier(0.06, 0.5, 0.41, 1), opacity 0.85s 0.52s linear; } @media only screen and (min-width: 768px) { .sec-1 .has-bg-con { height: 100%; } .sec-1 .has-bg-con .img-container { display: none; } .sec-1 .has-bg-con .img-container .img-box figure { position: absolute; width: 103.75%; height: 191.6%; top: auto; bottom: 0; right: 50%; left: auto; background-repeat: no-repeat; background-size: contain; background-position: right center; opacity: 0; filter: alpha(opacity=0); } .sec-1 .has-bg-con .img-container .img-box figure.bg { background-image: url("../img/sec1_img1.jpg"); } .sec-1 .has-bg-con .img-container .img-box figure.txt { background-image: url("../img/sec1_img2.png"); } .sec-1 .has-bg-con .img-container .img-box figure.bg { -webkit-transform-origin: 30% 30%; -moz-transform-origin: 30% 30%; -ms-transform-origin: 30% 30%; -o-transform-origin: 30% 30%; transform-origin: 30% 30%; -webkit-transform: translate3d(2%, -8%, 0) rotate(-6deg); -moz-transform: translate3d(2%, -8%, 0) rotate(-6deg); -ms-transform: translate3d(2%, -8%, 0) rotate(-6deg); -o-transform: translate3d(2%, -8%, 0) rotate(-6deg); transform: translate3d(2%, -8%, 0) rotate(-6deg); } .sec-1 .has-bg-con .img-container .img-box figure.txt { -webkit-filter: blur(0.6rem); filter: blur(0.6rem); } .sec-1 .has-bg-con .img-container .img-box.onTrans figure { opacity: 1; filter: alpha(opacity=100); } .sec-1 .has-bg-con .img-container .img-box.onTrans figure.bg { -webkit-transform: translate3d(0, 0, 0) rotate(0deg); -moz-transform: translate3d(0, 0, 0) rotate(0deg); -ms-transform: translate3d(0, 0, 0) rotate(0deg); -o-transform: translate3d(0, 0, 0) rotate(0deg); transform: translate3d(0, 0, 0) rotate(0deg); -webkit-transition: -webkit-transform 1.6s 0s ease-in-out, opacity 1.6s; -moz-transition: -moz-transform 1.6s 0s ease-in-out, opacity 1.6s; -ms-transition: -ms-transform 1.6s 0s ease-in-out, opacity 1.6s; -o-transition: -o-transform 1.6s 0s ease-in-out, opacity 1.6s; transition: transform 1.6s 0s ease-in-out, opacity 1.6s; } .sec-1 .has-bg-con .img-container .img-box.onTrans figure.txt { -webkit-filter: blur(0); filter: blur(0); -webkit-transition: filter 2s 0.4s ease-out, opacity 1s 0.4s; -webkit-transition: filter 2s 0.4s ease-out, opacity 1s 0.4s; -moz-transition: filter 2s 0.4s ease-out, opacity 1s 0.4s; -moz-transition: filter 2s 0.4s ease-out, opacity 1s 0.4s; -ms-transition: filter 2s 0.4s ease-out, opacity 1s 0.4s; -ms-transition: filter 2s 0.4s ease-out, opacity 1s 0.4s; -o-transition: filter 2s 0.4s ease-out, opacity 1s 0.4s; -o-transition: filter 2s 0.4s ease-out, opacity 1s 0.4s; transition: filter 2s 0.4s ease-out, opacity 1s 0.4s; transition: filter 2s 0.4s ease-out, opacity 1s 0.4s; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { .sec-1 .vertical-mid-con span { font-family: "samsungonelatin400", "samsungonekorean400"; font-size: 2.4vw; line-height: 1.666667; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { .sec-1 .vertical-mid-con span { font-family: "samsungonelatin400", "samsungonekorean400"; font-size: 18px; font-size: 1.40625vw; line-height: 1.666667; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { .sec-1 .vertical-mid-con span { font-family: "samsungonelatin400", "samsungonekorean400"; font-size: 18px; line-height: 1.666667; } } @media only screen and (min-width: 768px) and (min-width: 2561px) { .sec-1 .vertical-mid-con span { font-family: "samsungonelatin400", "samsungonekorean400"; font-size: 18px; line-height: 1.666667; } } @media only screen and (max-width: 767.7px) { .sec-1 .cols-container { margin-top: 17.866667vw; } .sec-1 .cols-container .is-full { margin-top: -93.333333vw; overflow: visible; } .sec-1 .has-bg-con { height: 100%; overflow: visible; } .sec-1 .has-bg-con .img-container { overflow: visible; } .sec-1 .has-bg-con .img-container .img-box { top: 33.333333vw; } .sec-1 .has-bg-con .img-container .img-box figure { background-repeat: no-repeat; background-size: 100% auto; background-position: left center; } .sec-1 .has-bg-con .img-container .img-box figure.bg { height: 173.333333vw; background-image: url("../img/m_sec1_img1.jpg"); } .sec-1 .vertical-mid-con:before { display: none; } .sec-1 .vertical-mid-con p { display: block; } .sec-1 .vertical-mid-con span { font-family: "samsungonelatin400", "samsungonekorean400"; font-size: 3.733333vw; line-height: 1.857143; } } .sec-2 { position: relative; z-index: 2; } .sec-2 .video-con .img-container { padding-top: 56.25%; } .sec-2 .video-con .img-box figure { background-image: url("../img/sec2_vid_thumb.jpg"); } @media only screen and (min-width: 768px) and (max-width: 767.7px) { .sec-2 .cols-container { padding: 0vw 0vw 40vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { .sec-2 .cols-container { padding: 0px 0px 300px; padding: 0vw 0vw 23.4375vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { .sec-2 .cols-container { padding: 0px 0px 300px; } } @media only screen and (max-width: 767.7px) { .sec-2 .video-con { width: 100%; padding: 0 4%; } .sec-2 .video-con .btn-play { width: 18.666667vw; height: 18.666667vw; } .sec-2 .video-con .btn-play:before { border-width: 3.733333vw 0vw 3.733333vw 5.333333vw; } } .visible { overflow: visible !important; } #content { visibility: hidden; } #content.onShow { visibility: visible; } @media only screen and (min-width: 768px) { .motion.zoom-out { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .motion.zoom-out.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1s; transition: transform 1.4s 0s ease-out, opacity 1s; } .motion.zoom-in { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .motion.zoom-in.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1.4s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1.4s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1.4s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1.4s; transition: transform 1.4s 0s ease-out, opacity 1.4s; } .motion.move-to-left { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } .motion.move-to-left.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.move-to-left-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } .motion.move-to-left-2.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -moz-transition: -moz-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -ms-transition: -ms-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -o-transition: -o-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; transition: transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; } .motion.fade-in { opacity: 0; filter: alpha(opacity=0); } .motion.fade-in.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1s 0s linear, opacity 1s 0.2s linear; -moz-transition: -moz-transform 1s 0s linear, opacity 1s 0.2s linear; -ms-transition: -ms-transform 1s 0s linear, opacity 1s 0.2s linear; -o-transition: -o-transform 1s 0s linear, opacity 1s 0.2s linear; transition: transform 1s 0s linear, opacity 1s 0.2s linear; } .motion.slide-in-up { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .motion.slide-in-up.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -moz-transition: -moz-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -ms-transition: -ms-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -o-transition: -o-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; transition: transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; } .motion.slide-in-up-1 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(60px); -moz-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); transform: translateY(60px); } .motion.slide-in-up-1.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -moz-transition: -moz-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -ms-transition: -ms-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -o-transition: -o-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; transition: transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; } .motion.slide-in-up-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .motion.slide-in-up-2.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -moz-transition: -moz-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -ms-transition: -ms-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -o-transition: -o-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; transition: transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; } .motion .zoom-out { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .motion .zoom-in { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .motion .move-to-left { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } .motion .move-to-left-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } .motion .fade-in { opacity: 0; filter: alpha(opacity=0); } .motion .slide-in-up { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .motion .slide-in-up-1 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(60px); -moz-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); transform: translateY(60px); } .motion .slide-in-up-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .motion.onTrans .zoom-out { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1s; transition: transform 1.4s 0s ease-out, opacity 1s; } .motion.onTrans .zoom-in { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1.4s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1.4s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1.4s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1.4s; transition: transform 1.4s 0s ease-out, opacity 1.4s; } .motion.onTrans .move-to-left { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.onTrans .move-to-left-2 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -moz-transition: -moz-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -ms-transition: -ms-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -o-transition: -o-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; transition: transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; } .motion.onTrans .fade-in { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1s 0s linear, opacity 1s 0.2s linear; -moz-transition: -moz-transform 1s 0s linear, opacity 1s 0.2s linear; -ms-transition: -ms-transform 1s 0s linear, opacity 1s 0.2s linear; -o-transition: -o-transform 1s 0s linear, opacity 1s 0.2s linear; transition: transform 1s 0s linear, opacity 1s 0.2s linear; } .motion.onTrans .slide-in-up { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -moz-transition: -moz-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -ms-transition: -ms-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -o-transition: -o-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; transition: transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; } .motion.onTrans .slide-in-up-1 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -moz-transition: -moz-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -ms-transition: -ms-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -o-transition: -o-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; transition: transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; } .motion.onTrans .slide-in-up-2 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -moz-transition: -moz-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -ms-transition: -ms-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -o-transition: -o-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; transition: transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; } .motion.onTrans.set-1 .step-1 { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .motion.onTrans.set-1 .step-2 { -webkit-transition-delay: 0.45s; -moz-transition-delay: 0.45s; -ms-transition-delay: 0.45s; -o-transition-delay: 0.45s; transition-delay: 0.45s; } .motion.onTrans.set-1 .step-2.move-to-left-2 { -webkit-transition-duration: 0.65s; -webkit-transition-delay: 0.65s; -moz-transition-duration: 0.65s; -moz-transition-delay: 0.65s; -ms-transition-duration: 0.65s; -ms-transition-delay: 0.65s; -o-transition-duration: 0.65s; -o-transition-delay: 0.65s; transition-duration: 0.65s; transition-delay: 0.65s; } .motion.onTrans.set-1 .step-3 { -webkit-transition-duration: 0.7s; -webkit-transition-delay: 0.95s; -moz-transition-duration: 0.7s; -moz-transition-delay: 0.95s; -ms-transition-duration: 0.7s; -ms-transition-delay: 0.95s; -o-transition-duration: 0.7s; -o-transition-delay: 0.95s; transition-duration: 0.7s; transition-delay: 0.95s; } .motion.onTrans.set-1 .step-3.move-to-left-2 { -webkit-transition-duration: 0.65s; -webkit-transition-delay: 1.15s; -moz-transition-duration: 0.65s; -moz-transition-delay: 1.15s; -ms-transition-duration: 0.65s; -ms-transition-delay: 1.15s; -o-transition-duration: 0.65s; -o-transition-delay: 1.15s; transition-duration: 0.65s; transition-delay: 1.15s; } .motion.onTrans.set-1 .step-4 { -webkit-transition-duration: 0.4s; -webkit-transition-delay: 1.25s; -moz-transition-duration: 0.4s; -moz-transition-delay: 1.25s; -ms-transition-duration: 0.4s; -ms-transition-delay: 1.25s; -o-transition-duration: 0.4s; -o-transition-delay: 1.25s; transition-duration: 0.4s; transition-delay: 1.25s; } .motion.onTrans.set-1 .step-5 { -webkit-transition-duration: 0.7s; -webkit-transition-delay: 1.55s; -moz-transition-duration: 0.7s; -moz-transition-delay: 1.55s; -ms-transition-duration: 0.7s; -ms-transition-delay: 1.55s; -o-transition-duration: 0.7s; -o-transition-delay: 1.55s; transition-duration: 0.7s; transition-delay: 1.55s; } .motion.onTrans.set-2 .step-1 { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .motion.onTrans.set-2 .step-2 { -webkit-transition-duration: 0.7s; -webkit-transition-delay: 0.45s; -moz-transition-duration: 0.7s; -moz-transition-delay: 0.45s; -ms-transition-duration: 0.7s; -ms-transition-delay: 0.45s; -o-transition-duration: 0.7s; -o-transition-delay: 0.45s; transition-duration: 0.7s; transition-delay: 0.45s; } } @media only screen and (max-width: 767.7px) { #content { overflow: hidden; } .motion.zoom-out { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .motion.zoom-out.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1s; transition: transform 1.4s 0s ease-out, opacity 1s; } .motion.zoom-in { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .motion.zoom-in.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1.4s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1.4s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1.4s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1.4s; transition: transform 1.4s 0s ease-out, opacity 1.4s; } .motion.move-to-left { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(0.5em); -moz-transform: translateX(0.5em); -ms-transform: translateX(0.5em); -o-transform: translateX(0.5em); transform: translateX(0.5em); } .motion.move-to-left.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.move-to-left-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(0.5em); -moz-transform: translateX(0.5em); -ms-transform: translateX(0.5em); -o-transform: translateX(0.5em); transform: translateX(0.5em); } .motion.move-to-left-2.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -moz-transition: -moz-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -ms-transition: -ms-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -o-transition: -o-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; transition: transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; } .motion.fade-in { opacity: 0; filter: alpha(opacity=0); } .motion.fade-in.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1s 0s linear, opacity 1s 0.2s linear; -moz-transition: -moz-transform 1s 0s linear, opacity 1s 0.2s linear; -ms-transition: -ms-transform 1s 0s linear, opacity 1s 0.2s linear; -o-transition: -o-transform 1s 0s linear, opacity 1s 0.2s linear; transition: transform 1s 0s linear, opacity 1s 0.2s linear; } .motion.slide-in-up { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(0.5em); -moz-transform: translateY(0.5em); -ms-transform: translateY(0.5em); -o-transform: translateY(0.5em); transform: translateY(0.5em); } .motion.slide-in-up.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -moz-transition: -moz-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -ms-transition: -ms-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -o-transition: -o-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; transition: transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; } .motion.slide-in-up-1 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(1em); -moz-transform: translateY(1em); -ms-transform: translateY(1em); -o-transform: translateY(1em); transform: translateY(1em); } .motion.slide-in-up-1.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -moz-transition: -moz-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -ms-transition: -ms-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -o-transition: -o-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; transition: transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; } .motion.slide-in-up-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(0.5em); -moz-transform: translateY(0.5em); -ms-transform: translateY(0.5em); -o-transform: translateY(0.5em); transform: translateY(0.5em); } .motion.slide-in-up-2.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -moz-transition: -moz-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -ms-transition: -ms-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -o-transition: -o-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; transition: transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; } .motion .zoom-out { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .motion .zoom-in { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .motion .move-to-left { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(0.5em); -moz-transform: translateX(0.5em); -ms-transform: translateX(0.5em); -o-transform: translateX(0.5em); transform: translateX(0.5em); } .motion .move-to-left-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(0.5em); -moz-transform: translateX(0.5em); -ms-transform: translateX(0.5em); -o-transform: translateX(0.5em); transform: translateX(0.5em); } .motion .fade-in { opacity: 0; filter: alpha(opacity=0); } .motion .slide-in-up { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(0.5em); -moz-transform: translateY(0.5em); -ms-transform: translateY(0.5em); -o-transform: translateY(0.5em); transform: translateY(0.5em); } .motion .slide-in-up-1 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(1em); -moz-transform: translateY(1em); -ms-transform: translateY(1em); -o-transform: translateY(1em); transform: translateY(1em); } .motion .slide-in-up-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(0.5em); -moz-transform: translateY(0.5em); -ms-transform: translateY(0.5em); -o-transform: translateY(0.5em); transform: translateY(0.5em); } .motion.onTrans .zoom-out { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1s; transition: transform 1.4s 0s ease-out, opacity 1s; } .motion.onTrans .zoom-in { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1.4s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1.4s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1.4s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1.4s; transition: transform 1.4s 0s ease-out, opacity 1.4s; } .motion.onTrans .move-to-left { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.onTrans .move-to-left-2 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -moz-transition: -moz-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -ms-transition: -ms-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -o-transition: -o-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; transition: transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; } .motion.onTrans .fade-in { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1s 0s linear, opacity 1s 0.2s linear; -moz-transition: -moz-transform 1s 0s linear, opacity 1s 0.2s linear; -ms-transition: -ms-transform 1s 0s linear, opacity 1s 0.2s linear; -o-transition: -o-transform 1s 0s linear, opacity 1s 0.2s linear; transition: transform 1s 0s linear, opacity 1s 0.2s linear; } .motion.onTrans .slide-in-up { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -moz-transition: -moz-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -ms-transition: -ms-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -o-transition: -o-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; transition: transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; } .motion.onTrans .slide-in-up-1 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -moz-transition: -moz-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -ms-transition: -ms-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -o-transition: -o-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; transition: transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; } .motion.onTrans .slide-in-up-2 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -moz-transition: -moz-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -ms-transition: -ms-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -o-transition: -o-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; transition: transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; } .motion.onTrans.set-1 .step-1 { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .motion.onTrans.set-1 .step-2 { -webkit-transition-delay: 0.45s; -moz-transition-delay: 0.45s; -ms-transition-delay: 0.45s; -o-transition-delay: 0.45s; transition-delay: 0.45s; } .motion.onTrans.set-1 .step-2.move-to-left-2 { -webkit-transition-duration: 0.65s; -webkit-transition-delay: 0.65s; -moz-transition-duration: 0.65s; -moz-transition-delay: 0.65s; -ms-transition-duration: 0.65s; -ms-transition-delay: 0.65s; -o-transition-duration: 0.65s; -o-transition-delay: 0.65s; transition-duration: 0.65s; transition-delay: 0.65s; } .motion.onTrans.set-1 .step-3 { -webkit-transition-duration: 0.7s; -webkit-transition-delay: 0.95s; -moz-transition-duration: 0.7s; -moz-transition-delay: 0.95s; -ms-transition-duration: 0.7s; -ms-transition-delay: 0.95s; -o-transition-duration: 0.7s; -o-transition-delay: 0.95s; transition-duration: 0.7s; transition-delay: 0.95s; } .motion.onTrans.set-1 .step-3.move-to-left-2 { -webkit-transition-duration: 0.65s; -webkit-transition-delay: 1.15s; -moz-transition-duration: 0.65s; -moz-transition-delay: 1.15s; -ms-transition-duration: 0.65s; -ms-transition-delay: 1.15s; -o-transition-duration: 0.65s; -o-transition-delay: 1.15s; transition-duration: 0.65s; transition-delay: 1.15s; } .motion.onTrans.set-1 .step-4 { -webkit-transition-duration: 0.4s; -webkit-transition-delay: 1.25s; -moz-transition-duration: 0.4s; -moz-transition-delay: 1.25s; -ms-transition-duration: 0.4s; -ms-transition-delay: 1.25s; -o-transition-duration: 0.4s; -o-transition-delay: 1.25s; transition-duration: 0.4s; transition-delay: 1.25s; } .motion.onTrans.set-1 .step-5 { -webkit-transition-duration: 0.7s; -webkit-transition-delay: 1.55s; -moz-transition-duration: 0.7s; -moz-transition-delay: 1.55s; -ms-transition-duration: 0.7s; -ms-transition-delay: 1.55s; -o-transition-duration: 0.7s; -o-transition-delay: 1.55s; transition-duration: 0.7s; transition-delay: 1.55s; } .motion.onTrans.set-2 .step-1 { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .motion.onTrans.set-2 .step-2 { -webkit-transition-duration: 0.7s; -webkit-transition-delay: 0.45s; -moz-transition-duration: 0.7s; -moz-transition-delay: 0.45s; -ms-transition-duration: 0.7s; -ms-transition-delay: 0.45s; -o-transition-duration: 0.7s; -o-transition-delay: 0.45s; transition-duration: 0.7s; transition-delay: 0.45s; } } .related-stories-wrap.onShow .component-list li .title, .related-stories-wrap.onShow .component-list li .desc, .related-stories-wrap.onShow .component-list li .date { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1.2s 0.4s ease-in-out, opacity 1.2s 0.4s; -moz-transition: -moz-transform 1.2s 0.4s ease-in-out, opacity 1.2s 0.4s; -ms-transition: -ms-transform 1.2s 0.4s ease-in-out, opacity 1.2s 0.4s; -o-transition: -o-transform 1.2s 0.4s ease-in-out, opacity 1.2s 0.4s; transition: transform 1.2s 0.4s ease-in-out, opacity 1.2s 0.4s; } .related-stories-wrap.onShow .component-list li .img .item { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1.2s 0s ease-in-out, opacity 1.2s; -moz-transition: -moz-transform 1.2s 0s ease-in-out, opacity 1.2s; -ms-transition: -ms-transform 1.2s 0s ease-in-out, opacity 1.2s; -o-transition: -o-transform 1.2s 0s ease-in-out, opacity 1.2s; transition: transform 1.2s 0s ease-in-out, opacity 1.2s; } @media only screen and (min-width: 768px) { .related-stories-wrap .dline { padding-top: 0; } } @media only screen and (max-width: 767.7px) { .related-stories-wrap .dline { padding-top: 40vw; } } /*# sourceMappingURL=page.css.map */