/* rotate */ /* transform */ /* transition */ /* transform-transition */ /* css-transition */ /* transform-css-transition */ /* keyframes */ /*@include keyframes(scroll-loop) { 0% { @include transform(translateY(0)); } 50% { @include transform(translateY(0)); } 100% { @include transform(translateY(0)); } }*/ @-webkit-keyframes toNextAniOut { 0% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 0.5; filter: alpha(opacity=50); } 100% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes toNextAniOut { 0% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 0.5; filter: alpha(opacity=50); } 100% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes toNextAniOut { 0% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 0.5; filter: alpha(opacity=50); } 100% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes toNextAniOut { 0% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 0.5; filter: alpha(opacity=50); } 100% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 0; filter: alpha(opacity=0); } } @keyframes toNextAniOut { 0% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 0.5; filter: alpha(opacity=50); } 100% { -webkit-transform: translateZ(0) rotateX(0) scale(1, 1); -moz-transform: translateZ(0) rotateX(0) scale(1, 1); -ms-transform: translateZ(0) rotateX(0) scale(1, 1); -o-transform: translateZ(0) rotateX(0) scale(1, 1); transform: translateZ(0) rotateX(0) scale(1, 1); opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-ms-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-o-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes toNextAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* line */ body { overflow: auto; background: #fff; min-width: 1280px; } .footer_wrap { position: relative; z-index: 100; } .section { overflow: hidden; position: relative; width: 100%; } .btn_download { display: inline-block; width: 210px; height: 45px; font-size: 0; text-indent: -9999px; vertical-align: top; background: url(../img/btn_download.png) no-repeat 0 0; } .btn_download:hover { background-position: 0 -55px; } #content h1 { font-family: 'samsungonekorean600'; font-size: 50px; letter-spacing: -0.05em; line-height: 66px; font-weight: 100; color: inherit; } #content h1 .en { letter-spacing: 0em; } #content h2 { font-family: 'samsungonekorean700'; font-size: 80px; letter-spacing: 0em; line-height: 60px; font-weight: 100; color: inherit; text-align: inherit; } #content h3 { font-family: 'samsungonekorean600'; font-size: 32px; letter-spacing: -0.045em; line-height: 46px; font-weight: 100; color: inherit; text-align: inherit; } #content h4 { font-family: 'samsungonekorean400'; font-size: 28px; letter-spacing: 0em; line-height: 1.3em; font-weight: 100; } #content h5 { font-family: 'samsungonekorean500'; font-size: 17.98px; letter-spacing: 0em; line-height: 1em; } #content p { font-family: 'samsungonekorean400'; font-size: 18px; letter-spacing: -0.045em; line-height: 34px; font-weight: 100; color: inherit; text-align: inherit; } .inner-cont-wrap { position: relative; width: 1280px; height: 100%; margin: 0 auto; text-align: center; } .alt-txt-hide { text-indent: -9999px; font-size: 0; position: absolute; top: -9999px; } /*common*/ .origin .inner-cont-wrap .txt-holder.type-1 .txt-l { display: block; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; filter: alpha(opacity=0); } .origin .inner-cont-wrap .txt-holder.type-1 .txt-r { display: block; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); opacity: 0; filter: alpha(opacity=0); } .origin .inner-cont-wrap .txt-holder.type-1 p { -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); opacity: 0; filter: alpha(opacity=0); } .origin.onTrans .inner-cont-wrap .txt-holder.type-1 h3 span { -webkit-transition: -webkit-transform 0.8s 1s ease-out, opacity 0.8s 1s; -moz-transition: -moz-transform 0.8s 1s ease-out, opacity 0.8s 1s; -ms-transition: -ms-transform 0.8s 1s ease-out, opacity 0.8s 1s; -o-transition: -o-transform 0.8s 1s ease-out, opacity 0.8s 1s; transition: transform 0.8s 1s ease-out, opacity 0.8s 1s; } .origin.onTrans .inner-cont-wrap .txt-holder.type-1 .txt-l { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; filter: alpha(opacity=100); } .origin.onTrans .inner-cont-wrap .txt-holder.type-1 .txt-r { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; filter: alpha(opacity=100); } .origin.onTrans .inner-cont-wrap .txt-holder.type-1 p { -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.7s 1.4s ease-out, opacity 0.7s 1.4s; -moz-transition: -moz-transform 0.7s 1.4s ease-out, opacity 0.7s 1.4s; -ms-transition: -ms-transform 0.7s 1.4s ease-out, opacity 0.7s 1.4s; -o-transition: -o-transform 0.7s 1.4s ease-out, opacity 0.7s 1.4s; transition: transform 0.7s 1.4s ease-out, opacity 0.7s 1.4s; } .clone .inner-cont-wrap .txt-holder.type-1 .txt-l { display: block; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 0; filter: alpha(opacity=0); } .clone .inner-cont-wrap .txt-holder.type-1 .txt-r { display: block; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 0; filter: alpha(opacity=0); } .clone .inner-cont-wrap .txt-holder.type-1 p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 0; filter: alpha(opacity=0); } .clone.onTrans .inner-cont-wrap .txt-holder.type-1 h3 span { -webkit-transition: -webkit-transform 0.8s 1s ease-out, opacity 0.8s 1s; -moz-transition: -moz-transform 0.8s 1s ease-out, opacity 0.8s 1s; -ms-transition: -ms-transform 0.8s 1s ease-out, opacity 0.8s 1s; -o-transition: -o-transform 0.8s 1s ease-out, opacity 0.8s 1s; transition: transform 0.8s 1s ease-out, opacity 0.8s 1s; } .clone.onTrans .inner-cont-wrap .txt-holder.type-1 .txt-l { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; filter: alpha(opacity=100); } .clone.onTrans .inner-cont-wrap .txt-holder.type-1 .txt-r { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; filter: alpha(opacity=100); } .clone.onTrans .inner-cont-wrap .txt-holder.type-1 p { -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.7s 1.4s ease-out, opacity 0.7s 1.4s; -moz-transition: -moz-transform 0.7s 1.4s ease-out, opacity 0.7s 1.4s; -ms-transition: -ms-transform 0.7s 1.4s ease-out, opacity 0.7s 1.4s; -o-transition: -o-transform 0.7s 1.4s ease-out, opacity 0.7s 1.4s; transition: transform 0.7s 1.4s ease-out, opacity 0.7s 1.4s; } .origin { position: absolute; top: 0; left: 0; width: 100%; height: inherit; opacity: 1; filter: alpha(opacity=100); } .origin.onHide { opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0s; -moz-transition: opacity 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0s; -ms-transition: opacity 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0s; -o-transition: opacity 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0s; transition: opacity 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0s; } .clone { position: absolute; top: 0; left: 0; width: 100%; height: inherit; opacity: 0; filter: alpha(opacity=0); } .clone.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.6s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0s; -moz-transition: opacity 0.6s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0s; -ms-transition: opacity 0.6s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0s; -o-transition: opacity 0.6s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0s; transition: opacity 0.6s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0s; } #container { margin: 0 auto; background-color: #000; } #content { position: absolute; width: 100%; height: 1024px; overflow: hidden; -webkit-perspective: 1200px; -moz-perspective: 1200px; -ms-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; } .close-btn { position: fixed; top: 70px; right: 0; padding: 30px; z-index: 100; } .close-btn.color-black a ul li { width: 50px; border-top: 1px solid #222; } .close-btn a { display: block; } .close-btn a ul { position: relative; width: 80px; height: 80px; } .close-btn a ul li { position: absolute; width: 50px; border-top: 1px solid #fff; left: 40px; top: 40px; -webkit-transform-origin: 0 0.5px; -moz-transform-origin: 0 0.5px; -ms-transform-origin: 0 0.5px; -o-transform-origin: 0 0.5px; transform-origin: 0 0.5px; -webkit-transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 0s; -moz-transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 0s; -ms-transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 0s; -o-transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 0s; transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 0s; } .close-btn a ul li.line0 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .close-btn a ul li.line1 { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .close-btn a ul li.line2 { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); } .close-btn a ul li.line3 { -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -ms-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg); } .dim-holder { position: absolute; background-color: #000; opacity: 1; filter: alpha(opacity=100); visibility: visible; width: 100%; height: 100%; top: 0; left: 0; } /*content*/ .content { position: absolute; top: 0; left: 0; width: 100%; height: 1280px; visibility: hidden; overflow: hidden; } .content.onCurrentPage { visibility: visible; z-index: 50; } .content.onNextTransOut { -webkit-animation-name: toNextAniOut; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.75s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: ease-in; -webkit-animation-direction: normal; -moz-animation-name: toNextAniOut; -moz-animation-iteration-count: 1; -moz-animation-duration: 0.75s; -moz-animation-delay: 0s; -moz-animation-timing-function: ease-in; -moz-animation-direction: normal; -ms-animation-name: toNextAniOut; -ms-animation-iteration-count: 1; -ms-animation-duration: 0.75s; -ms-animation-delay: 0s; -ms-animation-timing-function: ease-in; -ms-animation-direction: normal; -o-animation-name: toNextAniOut; -o-animation-iteration-count: 1; -o-animation-duration: 0.75s; -o-animation-delay: 0s; -o-animation-timing-function: ease-in; -o-animation-direction: normal; animation-name: toNextAniOut; animation-iteration-count: 1; animation-duration: 0.75s; animation-delay: 0s; animation-timing-function: ease-in; animation-direction: normal; } .content.onNextTransIn { -webkit-animation-name: toNextAniIn; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.7s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -webkit-animation-direction: normal; -moz-animation-name: toNextAniIn; -moz-animation-iteration-count: 1; -moz-animation-duration: 0.7s; -moz-animation-delay: 0s; -moz-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -moz-animation-direction: normal; -ms-animation-name: toNextAniIn; -ms-animation-iteration-count: 1; -ms-animation-duration: 0.7s; -ms-animation-delay: 0s; -ms-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -ms-animation-direction: normal; -o-animation-name: toNextAniIn; -o-animation-iteration-count: 1; -o-animation-duration: 0.7s; -o-animation-delay: 0s; -o-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -o-animation-direction: normal; animation-name: toNextAniIn; animation-iteration-count: 1; animation-duration: 0.7s; animation-delay: 0s; animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); animation-direction: normal; } .content.onPrevTransOut { -webkit-animation-name: toNextAniIn; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.75s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -webkit-animation-direction: reverse; -moz-animation-name: toNextAniIn; -moz-animation-iteration-count: 1; -moz-animation-duration: 0.75s; -moz-animation-delay: 0s; -moz-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -moz-animation-direction: reverse; -ms-animation-name: toNextAniIn; -ms-animation-iteration-count: 1; -ms-animation-duration: 0.75s; -ms-animation-delay: 0s; -ms-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -ms-animation-direction: reverse; -o-animation-name: toNextAniIn; -o-animation-iteration-count: 1; -o-animation-duration: 0.75s; -o-animation-delay: 0s; -o-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -o-animation-direction: reverse; animation-name: toNextAniIn; animation-iteration-count: 1; animation-duration: 0.75s; animation-delay: 0s; animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); animation-direction: reverse; } .content.onPrevTransIn { -webkit-animation-name: toNextAniOut; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.7s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: ease-in; -webkit-animation-direction: reverse; -moz-animation-name: toNextAniOut; -moz-animation-iteration-count: 1; -moz-animation-duration: 0.7s; -moz-animation-delay: 0s; -moz-animation-timing-function: ease-in; -moz-animation-direction: reverse; -ms-animation-name: toNextAniOut; -ms-animation-iteration-count: 1; -ms-animation-duration: 0.7s; -ms-animation-delay: 0s; -ms-animation-timing-function: ease-in; -ms-animation-direction: reverse; -o-animation-name: toNextAniOut; -o-animation-iteration-count: 1; -o-animation-duration: 0.7s; -o-animation-delay: 0s; -o-animation-timing-function: ease-in; -o-animation-direction: reverse; animation-name: toNextAniOut; animation-iteration-count: 1; animation-duration: 0.7s; animation-delay: 0s; animation-timing-function: ease-in; animation-direction: reverse; } .content .bg-wrap { position: absolute; image-rendering: auto; width: 100%; height: 100%; } .content .inner-cont-wrap { position: relative; width: 1280px; height: 100%; margin: 0 auto; text-align: center; } .content .txt-holder h3 { margin-bottom: 32px; } .bg-section { position: relative; width: 100%; height: 100%; } /*part section*/ #section-1 { width: 100%; height: calc(100vh - 131px); } #section-1 .origin .bg-wrap { background-image: url("../img/sec1_bg.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #section-1 .origin .inner-cont-wrap .txt-holder { position: absolute; width: 50vw; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; } #section-1 .origin .inner-cont-wrap .txt-holder h1 { margin-bottom: 30px; opacity: 0; filter: alpha(opacity=0); } #section-1 .origin .inner-cont-wrap .txt-holder p span { display: inline-block; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); } #section-1 .origin.onTrans .bg-wrap { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 2.4s ease-out; -webkit-transition-delay: 0s; -moz-transition: -moz-transform 2.4s ease-out; -moz-transition-delay: 0s; -ms-transition: -ms-transform 2.4s ease-out; -ms-transition-delay: 0s; -o-transition: -o-transform 2.4s ease-out; -o-transition-delay: 0s; transition: transform 2.4s ease-out; transition-delay: 0s; } #section-1 .origin.onTrans .bg-wrap .dim-holder { opacity: 0; filter: alpha(opacity=0); visibility: hidden; -webkit-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0s; -moz-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0s; -ms-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0s; -o-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0s; transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0s; } #section-1 .origin.onTrans .inner-cont-wrap .txt-holder h1 { opacity: 1; filter: alpha(opacity=100); -webkit-transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0.4s; -moz-transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0.4s; -ms-transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0.4s; -o-transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0.4s; transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0.4s; } #section-1 .origin.onTrans .inner-cont-wrap .txt-holder p span { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1.0s ease-out, opacity 1.0s ease-out; -moz-transition: -moz-transform 1.0s ease-out, opacity 1.0s ease-out; -ms-transition: -ms-transform 1.0s ease-out, opacity 1.0s ease-out; -o-transition: -o-transform 1.0s ease-out, opacity 1.0s ease-out; transition: transform 1.0s ease-out, opacity 1.0s ease-out; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } #section-1 .origin.onTrans .inner-cont-wrap .txt-holder p .txt-1 { -webkit-transition: -webkit-transform 0.6s ease-out 0.8s, opacity 0.6s ease-out 0.8s; -moz-transition: -moz-transform 0.6s ease-out 0.8s, opacity 0.6s ease-out 0.8s; -ms-transition: -ms-transform 0.6s ease-out 0.8s, opacity 0.6s ease-out 0.8s; -o-transition: -o-transform 0.6s ease-out 0.8s, opacity 0.6s ease-out 0.8s; transition: transform 0.6s ease-out 0.8s, opacity 0.6s ease-out 0.8s; } #section-1 .origin.onTrans .inner-cont-wrap .txt-holder p .txt-2 { -webkit-transition: -webkit-transform 0.6s ease-out 1s, opacity 0.6s ease-out 1s; -moz-transition: -moz-transform 0.6s ease-out 1s, opacity 0.6s ease-out 1s; -ms-transition: -ms-transform 0.6s ease-out 1s, opacity 0.6s ease-out 1s; -o-transition: -o-transform 0.6s ease-out 1s, opacity 0.6s ease-out 1s; transition: transform 0.6s ease-out 1s, opacity 0.6s ease-out 1s; } #section-1 .origin.onTrans .inner-cont-wrap .txt-holder p .txt-3 { -webkit-transition: -webkit-transform 0.6s ease-out 1.2s, opacity 0.6s ease-out 1.2s; -moz-transition: -moz-transform 0.6s ease-out 1.2s, opacity 0.6s ease-out 1.2s; -ms-transition: -ms-transform 0.6s ease-out 1.2s, opacity 0.6s ease-out 1.2s; -o-transition: -o-transform 0.6s ease-out 1.2s, opacity 0.6s ease-out 1.2s; transition: transform 0.6s ease-out 1.2s, opacity 0.6s ease-out 1.2s; } #section-2 { width: 100%; height: calc(100vh - 131px); } #section-2 .origin .bg-wrap { background-color: #000; } #section-2 .origin .bg-wrap .obj-holder { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(1) rotate(0deg); -moz-transform: translate(-50%, -50%) scale(1) rotate(0deg); -ms-transform: translate(-50%, -50%) scale(1) rotate(0deg); -o-transform: translate(-50%, -50%) scale(1) rotate(0deg); transform: translate(-50%, -50%) scale(1) rotate(0deg); -webkit-transform-origin: 73% 47.7%; -moz-transform-origin: 73% 47.7%; -ms-transform-origin: 73% 47.7%; -o-transform-origin: 73% 47.7%; transform-origin: 73% 47.7%; } #section-2 .origin .bg-wrap .obj-holder .obj-box-1 { -webkit-transform: translate(-0.6%, 64%); -moz-transform: translate(-0.6%, 64%); -ms-transform: translate(-0.6%, 64%); -o-transform: translate(-0.6%, 64%); transform: translate(-0.6%, 64%); } #section-2 .origin .bg-wrap .obj-holder .obj-box-2 { -webkit-transform: translate(25.6%, -18.7%); -moz-transform: translate(25.6%, -18.7%); -ms-transform: translate(25.6%, -18.7%); -o-transform: translate(25.6%, -18.7%); transform: translate(25.6%, -18.7%); } #section-2 .origin .bg-wrap .shadow-holder { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 10; opacity: 1; filter: alpha(opacity=100); } #section-2 .origin .bg-wrap .shadow-holder img { width: 100%; height: auto; } #section-2 .origin .bg-wrap .dim-holder { opacity: 0.3; filter: alpha(opacity=30); } #section-2 .origin .inner-cont-wrap { position: relative; } #section-2 .origin .inner-cont-wrap .title-holder { position: absolute; width: 100%; top: 50%; left: 50%; z-index: 999; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; margin-left: 333px; } #section-2 .origin .inner-cont-wrap .title-holder h2 { width: 613px; height: 68px; } #section-2 .origin .inner-cont-wrap .title-holder h2 span { opacity: 1; filter: alpha(opacity=100); } #section-2 .origin .inner-cont-wrap .title-holder h2 span { display: block; } #section-2 .origin .inner-cont-wrap .title-holder h2 span em { position: absolute; display: block; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-1-letter { left: 0px; top: 2px; width: 39px; height: 47px; background-image: url("../img/letters_0/txt_1.png"); background-size: 39px 47px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-2-letter { left: 44px; top: 11px; width: 39px; height: 38px; background-image: url("../img/letters_0/txt_2.png"); background-size: 39px 38px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-3-letter { left: 84px; top: 0px; width: 23px; height: 50px; background-image: url("../img/letters_0/txt_3.png"); background-size: 23px 50px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-4-letter { left: 109px; top: 11px; width: 39px; height: 38px; background-image: url("../img/letters_0/txt_4.png"); background-size: 39px 38px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-5-letter { left: 152px; top: 1px; width: 39px; height: 48px; background-image: url("../img/letters_0/txt_5.png"); background-size: 39px 48px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-6-letter { left: 195px; top: 11px; width: 39px; height: 38px; background-image: url("../img/letters_0/txt_6.png"); background-size: 39px 38px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-7-letter { left: 237px; top: 11px; width: 39px; height: 39px; background-image: url("../img/letters_0/txt_7.png"); background-size: 39px 39px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-8-letter { left: 281px; top: 1px; width: 36px; height: 48px; background-image: url("../img/letters_0/txt_8.png"); background-size: 36px 48px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-9-letter { left: 331px; top: 1px; width: 48px; height: 48px; background-image: url("../img/letters_0/txt_9.png"); background-size: 48px 48px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-10-letter { left: 383px; top: 1px; width: 40px; height: 49px; background-image: url("../img/letters_0/txt_10.png"); background-size: 40px 49px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-11-letter { left: 426px; top: 12px; width: 39px; height: 55px; background-image: url("../img/letters_0/txt_11.png"); background-size: 39px 55px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-12-letter { left: 464px; top: 11px; width: 32px; height: 39px; background-image: url("../img/letters_0/txt_12.png"); background-size: 32px 39px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-13-letter { left: 499px; top: 11px; width: 32px; height: 39px; background-image: url("../img/letters_0/txt_13.png"); background-size: 32px 39px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-14-letter { left: 534px; top: 11px; width: 39px; height: 39px; background-image: url("../img/letters_0/txt_14.png"); background-size: 39px 39px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .title-holder h2 .txt-15-letter { left: 573px; top: 12px; width: 39px; height: 55px; background-image: url("../img/letters_0/txt_15.png"); background-size: 39px 55px; background-repeat: no-repeat; } #section-2 .origin .inner-cont-wrap .txt-holder { position: absolute; top: 50%; width: 50vw; z-index: 999; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 80px; color: #fff; text-align: left; } #section-2 .origin.onTrans .bg-wrap .obj-holder { -webkit-transform: translate(-50%, -50%) scale(0.31) rotate(25deg); -moz-transform: translate(-50%, -50%) scale(0.31) rotate(25deg); -ms-transform: translate(-50%, -50%) scale(0.31) rotate(25deg); -o-transform: translate(-50%, -50%) scale(0.31) rotate(25deg); transform: translate(-50%, -50%) scale(0.31) rotate(25deg); -webkit-transition: -webkit-transform 2s cubic-bezier(0.645, 0.045, 0.355, 1.000); -webkit-transition-delay: 0s; -moz-transition: -moz-transform 2s cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition-delay: 0s; -ms-transition: -ms-transform 2s cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition-delay: 0s; -o-transition: -o-transform 2s cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition-delay: 0s; transition: transform 2s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition-delay: 0s; } #section-2 .origin.onTrans .bg-wrap .obj-holder .obj-box-1 { -webkit-transform: translate(2.4%, 56%); -moz-transform: translate(2.4%, 56%); -ms-transform: translate(2.4%, 56%); -o-transform: translate(2.4%, 56%); transform: translate(2.4%, 56%); -webkit-transition: -webkit-transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); -webkit-transition-delay: 0.45s; -moz-transition: -moz-transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition-delay: 0.45s; -ms-transition: -ms-transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition-delay: 0.45s; -o-transition: -o-transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition-delay: 0.45s; transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition-delay: 0.45s; } #section-2 .origin.onTrans .bg-wrap .obj-holder .obj-box-2 { -webkit-transform: translate(16.6%, -12.7%); -moz-transform: translate(16.6%, -12.7%); -ms-transform: translate(16.6%, -12.7%); -o-transform: translate(16.6%, -12.7%); transform: translate(16.6%, -12.7%); -webkit-transition: -webkit-transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); -webkit-transition-delay: 0.45s; -moz-transition: -moz-transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition-delay: 0.45s; -ms-transition: -ms-transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition-delay: 0.45s; -o-transition: -o-transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition-delay: 0.45s; transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition-delay: 0.45s; } #section-2 .origin.onTrans .bg-wrap .shadow-holder { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0s; -moz-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0s; -ms-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0s; -o-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0s; transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0s; } #section-2 .origin.onTrans .bg-wrap .dim-holder { opacity: 0; filter: alpha(opacity=0); visibility: hidden; -webkit-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0s; -moz-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0s; -ms-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0s; -o-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0s; transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder { /*h2{@include opacity(0);@include transform(translateX(-120px));@include transform-css-transition('0.6s 2s ease-out, opacity 0.6s 2s');}*/ } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(1) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.1s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 2s; -moz-transition: all 0.1s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 2s; -ms-transition: all 0.1s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 2s; -o-transition: all 0.1s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 2s; transition: all 0.1s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 2s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(2) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.8s; -moz-transition: all 0.2s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.8s; -ms-transition: all 0.2s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.8s; -o-transition: all 0.2s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.8s; transition: all 0.2s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.8s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(3) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 2s; -moz-transition: all 0.3s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 2s; -ms-transition: all 0.3s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 2s; -o-transition: all 0.3s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 2s; transition: all 0.3s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 2s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(4) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.4s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.8s; -moz-transition: all 0.4s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.8s; -ms-transition: all 0.4s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.8s; -o-transition: all 0.4s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.8s; transition: all 0.4s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.8s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(5) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.6s; -moz-transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.6s; -ms-transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.6s; -o-transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.6s; transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.6s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(6) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.9s; -moz-transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.9s; -ms-transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.9s; -o-transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.9s; transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.9s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(7) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.7s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.7s; -moz-transition: all 0.7s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.7s; -ms-transition: all 0.7s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.7s; -o-transition: all 0.7s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.7s; transition: all 0.7s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.7s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(8) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.8s; -moz-transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.8s; -ms-transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.8s; -o-transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.8s; transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.8s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(9) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.7s; -moz-transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.7s; -ms-transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.7s; -o-transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.7s; transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.7s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(10) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.7s; -moz-transition: all 1s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.7s; -ms-transition: all 1s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.7s; -o-transition: all 1s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.7s; transition: all 1s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.7s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(11) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1.1s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.7s; -moz-transition: all 1.1s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.7s; -ms-transition: all 1.1s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.7s; -o-transition: all 1.1s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.7s; transition: all 1.1s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.7s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(12) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1.2s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.8s; -moz-transition: all 1.2s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.8s; -ms-transition: all 1.2s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.8s; -o-transition: all 1.2s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.8s; transition: all 1.2s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.8s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(13) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1.3s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.8s; -moz-transition: all 1.3s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.8s; -ms-transition: all 1.3s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.8s; -o-transition: all 1.3s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.8s; transition: all 1.3s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.8s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(14) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1.4s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 2.1s; -moz-transition: all 1.4s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 2.1s; -ms-transition: all 1.4s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 2.1s; -o-transition: all 1.4s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 2.1s; transition: all 1.4s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 2.1s; } #section-2 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(15) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1.5s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 2s; -moz-transition: all 1.5s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 2s; -ms-transition: all 1.5s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 2s; -o-transition: all 1.5s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 2s; transition: all 1.5s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 2s; } #section-2 .origin.onTrans .inner-cont-wrap .txt-holder span { -webkit-transition-delay: 2.6s; -moz-transition-delay: 2.6s; -o-transition-delay: 2.6s; transition-delay: 2.6s; } #section-2 .origin.onTrans .inner-cont-wrap .txt-holder p { -webkit-transition-delay: 3s; -moz-transition-delay: 3s; -o-transition-delay: 3s; transition-delay: 3s; } #section-2 .clone .inner-cont-wrap .txt-holder { position: absolute; top: 50%; width: 50vw; z-index: 999; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 80px; color: #fff; text-align: left; } #section-2 .clone.onTrans .bg-wrap { background-color: #000; } #section-2 .clone.onTrans .bg-wrap .obj-holder { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.31) rotate(25deg); -moz-transform: translate(-50%, -50%) scale(0.31) rotate(25deg); -ms-transform: translate(-50%, -50%) scale(0.31) rotate(25deg); -o-transform: translate(-50%, -50%) scale(0.31) rotate(25deg); transform: translate(-50%, -50%) scale(0.31) rotate(25deg); -webkit-transform-origin: 73% 47.7%; -moz-transform-origin: 73% 47.7%; -ms-transform-origin: 73% 47.7%; -o-transform-origin: 73% 47.7%; transform-origin: 73% 47.7%; } #section-2 .clone.onTrans .bg-wrap .obj-holder .obj-box-1 { -webkit-transform: translate(2.4%, 56%); -moz-transform: translate(2.4%, 56%); -ms-transform: translate(2.4%, 56%); -o-transform: translate(2.4%, 56%); transform: translate(2.4%, 56%); } #section-2 .clone.onTrans .bg-wrap .obj-holder .obj-box-2 { -webkit-transform: translate(16.6%, -12.7%); -moz-transform: translate(16.6%, -12.7%); -ms-transform: translate(16.6%, -12.7%); -o-transform: translate(16.6%, -12.7%); transform: translate(16.6%, -12.7%); } #section-2 .clone.onTrans .inner-cont-wrap .txt-holder span { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } #section-2 .clone.onTrans .inner-cont-wrap .txt-holder p { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } #section-3 { width: 100%; height: calc(100vh - 131px); } #section-3 .origin .bg-wrap { background-color: #000; } #section-3 .origin .bg-wrap .obj-holder { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: -150px; margin-left: -63px; } #section-3 .origin .bg-wrap .obj-holder.before { opacity: 1; filter: alpha(opacity=100); } #section-3 .origin .bg-wrap .obj-holder.after { opacity: 1; filter: alpha(opacity=100); } #section-3 .origin .inner-cont-wrap { position: relative; } #section-3 .origin .inner-cont-wrap .txt-holder { position: absolute; width: 50vw; top: 50%; left: 50%; margin-left: 112px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); text-align: left; color: #fff; } #section-3 .origin.onTrans .bg-wrap .obj-holder.after { opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0s; -moz-transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0s; -ms-transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0s; -o-transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0s; transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0s; } #section-3 .origin.onTrans .inner-cont-wrap .txt-holder span { -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; } #section-3 .origin.onTrans .inner-cont-wrap .txt-holder p { -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; } #section-4 { width: 100%; height: calc(100vh - 131px); background-color: #000; } #section-4 .origin .bg-wrap { -webkit-transform: scale(0.64); -moz-transform: scale(0.64); -ms-transform: scale(0.64); -o-transform: scale(0.64); transform: scale(0.64); -webkit-transform-origin: 74% 15%; -moz-transform-origin: 74% 15%; -ms-transform-origin: 74% 15%; -o-transform-origin: 74% 15%; transform-origin: 74% 15%; } #section-4 .origin .bg-wrap .obj-holder { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 64px; margin-left: 84px; } #section-4 .origin .bg-wrap .obj-holder.before { opacity: 1; filter: alpha(opacity=100); } #section-4 .origin .bg-wrap .obj-holder.after { opacity: 0; filter: alpha(opacity=0); } #section-4 .origin .inner-cont-wrap { position: relative; } #section-4 .origin .inner-cont-wrap .txt-holder { position: absolute; top: 50%; width: 50vw; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); margin-top: 188px; left: 80px; color: #fff; text-align: left; } #section-4 .origin.onTrans .bg-wrap { -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 cubic-bezier(0.130, 0.115, 0.425, 0.720); -webkit-transition-delay: 0.2s; -moz-transition: -moz-transform 1.4s cubic-bezier(0.130, 0.115, 0.425, 0.720); -moz-transition-delay: 0.2s; -ms-transition: -ms-transform 1.4s cubic-bezier(0.130, 0.115, 0.425, 0.720); -ms-transition-delay: 0.2s; -o-transition: -o-transform 1.4s cubic-bezier(0.130, 0.115, 0.425, 0.720); -o-transition-delay: 0.2s; transition: transform 1.4s cubic-bezier(0.130, 0.115, 0.425, 0.720); transition-delay: 0.2s; } #section-4 .origin.onTrans .bg-wrap .obj-holder.before { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -webkit-transition-delay: 0.8s; -moz-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -moz-transition-delay: 0.8s; -ms-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -ms-transition-delay: 0.8s; -o-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -o-transition-delay: 0.8s; transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); transition-delay: 0.8s; font-size: 0; } #section-4 .origin.onTrans .bg-wrap .obj-holder.after { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -webkit-transition-delay: 0.2s; -moz-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -moz-transition-delay: 0.2s; -ms-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -ms-transition-delay: 0.2s; -o-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -o-transition-delay: 0.2s; transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); transition-delay: 0.2s; font-size: 0; } #section-4 .origin.onTrans .inner-cont-wrap .txt-holder span { -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; } #section-4 .origin.onTrans .inner-cont-wrap .txt-holder p { -webkit-transition-delay: 1.6s; -moz-transition-delay: 1.6s; -o-transition-delay: 1.6s; transition-delay: 1.6s; } #section-5 { width: 100%; height: calc(100vh - 131px); background-color: #000; overflow: visible; } #section-5 .origin .bg-wrap .obj-holder .slider-box .obj-1 { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 13.5%; margin-left: -6%; } #section-5 .origin .bg-wrap .obj-holder .slider-box .obj-1 .prd-clip { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transform-origin: 30% 30%; -moz-transform-origin: 30% 30%; -ms-transform-origin: 30% 30%; -o-transform-origin: 30% 30%; transform-origin: 30% 30%; } #section-5 .origin .bg-wrap .obj-holder .slider-box .obj-1 .prd-clip .shadow { position: absolute; bottom: 0; left: 0; opacity: 0; filter: alpha(opacity=0); } #section-5 .origin .bg-wrap .obj-holder .slider-box .obj-2 { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 5.3%; margin-left: -7.1%; } #section-5 .origin .bg-wrap .shadow-holder { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 999; opacity: 1; filter: alpha(opacity=100); text-align: right; } #section-5 .origin .bg-wrap .shadow-holder img { width: 100%; height: 100%; } #section-5 .origin .inner-cont-wrap { position: relative; } #section-5 .origin .inner-cont-wrap .title-holder { position: absolute; top: 50%; left: 50%; width: 100%; z-index: 999; -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: 1; filter: alpha(opacity=100); margin-left: 364px; } #section-5 .origin .inner-cont-wrap .title-holder h2 span { display: block; } #section-5 .origin .inner-cont-wrap .title-holder h2 span em { position: absolute; display: block; } #section-5 .origin .inner-cont-wrap .title-holder h2 .txt-1-letter { left: 0px; top: 2px; width: 37px; height: 47px; background-image: url("../img/letters_1/txt_1.png"); background-size: 37px 47px; background-repeat: no-repeat; } #section-5 .origin .inner-cont-wrap .title-holder h2 .txt-2-letter { left: 40px; top: 12px; width: 38px; height: 37px; background-image: url("../img/letters_1/txt_2.png"); background-size: 38px 37px; background-repeat: no-repeat; } #section-5 .origin .inner-cont-wrap .title-holder h2 .txt-3-letter { left: 81px; top: 12px; width: 32px; height: 37px; background-image: url("../img/letters_1/txt_3.png"); background-size: 32px 37px; background-repeat: no-repeat; } #section-5 .origin .inner-cont-wrap .title-holder h2 .txt-4-letter { left: 117px; top: 2px; width: 35px; height: 47px; background-image: url("../img/letters_1/txt_4.png"); background-size: 35px 47px; background-repeat: no-repeat; } #section-5 .origin .inner-cont-wrap .title-holder h2 .txt-5-letter { left: 152px; top: 0px; width: 22px; height: 49px; background-image: url("../img/letters_1/txt_5.png"); background-size: 22px 49px; background-repeat: no-repeat; } #section-5 .origin .inner-cont-wrap .title-holder h2 .txt-6-letter { left: 177px; top: 12px; width: 39px; height: 37px; background-image: url("../img/letters_1/txt_6.png"); background-size: 39px 37px; background-repeat: no-repeat; } #section-5 .origin .inner-cont-wrap .title-holder h2 .txt-7-letter { left: 220px; top: 12px; width: 39px; height: 55px; background-image: url("../img/letters_1/txt_7.png"); background-size: 39px 55px; background-repeat: no-repeat; } #section-5 .origin .inner-cont-wrap .title-holder h2 .txt-8-letter { left: 274px; top: 2px; width: 48px; height: 47px; background-image: url("../img/letters_1/txt_8.png"); background-size: 48px 47px; background-repeat: no-repeat; } #section-5 .origin .inner-cont-wrap .title-holder h2 .txt-9-letter { left: 325px; top: 2px; width: 39px; height: 47px; background-image: url("../img/letters_1/txt_9.png"); background-size: 39px 47px; background-repeat: no-repeat; } #section-5 .origin .inner-cont-wrap .title-holder h2 .txt-10-letter { left: 367px; top: 12px; width: 38px; height: 55px; background-image: url("../img/letters_1/txt_10.png"); background-size: 38px 55px; background-repeat: no-repeat; } #section-5 .origin .inner-cont-wrap .title-holder h2 .txt-11-letter { left: 405px; top: 12px; width: 32px; height: 37px; background-image: url("../img/letters_1/txt_11.png"); background-size: 32px 37px; background-repeat: no-repeat; } #section-5 .origin .inner-cont-wrap .title-holder h2 .txt-12-letter { left: 439px; top: 12px; width: 32px; height: 37px; background-image: url("../img/letters_1/txt_12.png"); background-size: 32px 37px; background-repeat: no-repeat; } #section-5 .origin .inner-cont-wrap .title-holder h2 .txt-13-letter { left: 474px; top: 12px; width: 38px; height: 37px; background-image: url("../img/letters_1/txt_13.png"); background-size: 38px 37px; background-repeat: no-repeat; } #section-5 .origin .inner-cont-wrap .title-holder h2 .txt-14-letter { left: 512px; top: 12px; width: 39px; height: 55px; background-image: url("../img/letters_1/txt_14.png"); background-size: 39px 55px; background-repeat: no-repeat; } #section-5 .origin .inner-cont-wrap .txt-holder { position: absolute; top: 70.5%; left: 59%; width: 50vw; z-index: 999; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #fff; text-align: left; } #section-5 .origin.onTrans .bg-wrap .obj-holder .slider-box .obj-1 .prd-clip { -webkit-transform: scale(0.45); -moz-transform: scale(0.45); -ms-transform: scale(0.45); -o-transform: scale(0.45); transform: scale(0.45); -webkit-transition: -webkit-transform 2s cubic-bezier(0.65, 0.05, 0.18, 0.91); -webkit-transition-delay: 0s; -moz-transition: -moz-transform 2s cubic-bezier(0.65, 0.05, 0.18, 0.91); -moz-transition-delay: 0s; -ms-transition: -ms-transform 2s cubic-bezier(0.65, 0.05, 0.18, 0.91); -ms-transition-delay: 0s; -o-transition: -o-transform 2s cubic-bezier(0.65, 0.05, 0.18, 0.91); -o-transition-delay: 0s; transition: transform 2s cubic-bezier(0.65, 0.05, 0.18, 0.91); transition-delay: 0s; } #section-5 .origin.onTrans .bg-wrap .obj-holder .slider-box .obj-1 .prd-clip .shadow { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 1.2s; -moz-transition: opacity 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 1.2s; -ms-transition: opacity 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 1.2s; -o-transition: opacity 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 1.2s; transition: opacity 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 1.2s; } #section-5 .origin.onTrans .bg-wrap .shadow-holder { opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0.6s; -moz-transition: opacity 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0.6s; -ms-transition: opacity 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0.6s; -o-transition: opacity 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0.6s; transition: opacity 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0.6s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(1) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.1s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.9s; -moz-transition: all 0.1s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.9s; -ms-transition: all 0.1s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.9s; -o-transition: all 0.1s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.9s; transition: all 0.1s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.9s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(2) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.9s; -moz-transition: all 0.2s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.9s; -ms-transition: all 0.2s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.9s; -o-transition: all 0.2s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.9s; transition: all 0.2s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.9s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(3) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.6s; -moz-transition: all 0.3s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.6s; -ms-transition: all 0.3s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.6s; -o-transition: all 0.3s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.6s; transition: all 0.3s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.6s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(4) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.4s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 2s; -moz-transition: all 0.4s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 2s; -ms-transition: all 0.4s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 2s; -o-transition: all 0.4s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 2s; transition: all 0.4s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 2s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(5) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 2.1s; -moz-transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 2.1s; -ms-transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 2.1s; -o-transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 2.1s; transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 2.1s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(6) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.8s; -moz-transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.8s; -ms-transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.8s; -o-transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.8s; transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.8s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(7) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.7s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.9s; -moz-transition: all 0.7s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.9s; -ms-transition: all 0.7s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.9s; -o-transition: all 0.7s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.9s; transition: all 0.7s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.9s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(8) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.7s; -moz-transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.7s; -ms-transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.7s; -o-transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.7s; transition: all 0.8s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.7s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(9) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 2s; -moz-transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 2s; -ms-transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 2s; -o-transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 2s; transition: all 0.9s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 2s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(10) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.7s; -moz-transition: all 1s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.7s; -ms-transition: all 1s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.7s; -o-transition: all 1s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.7s; transition: all 1s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.7s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(11) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1.1s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.9s; -moz-transition: all 1.1s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.9s; -ms-transition: all 1.1s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.9s; -o-transition: all 1.1s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.9s; transition: all 1.1s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.9s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(12) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1.2s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.7s; -moz-transition: all 1.2s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.7s; -ms-transition: all 1.2s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.7s; -o-transition: all 1.2s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.7s; transition: all 1.2s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.7s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(13) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1.3s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 2s; -moz-transition: all 1.3s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 2s; -ms-transition: all 1.3s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 2s; -o-transition: all 1.3s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 2s; transition: all 1.3s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 2s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(14) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1.4s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 1.8s; -moz-transition: all 1.4s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 1.8s; -ms-transition: all 1.4s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 1.8s; -o-transition: all 1.4s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 1.8s; transition: all 1.4s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 1.8s; } #section-5 .origin.onTrans .inner-cont-wrap .title-holder h2 em:nth-child(15) { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1.5s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transition-delay: 2s; -moz-transition: all 1.5s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition-delay: 2s; -ms-transition: all 1.5s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition-delay: 2s; -o-transition: all 1.5s cubic-bezier(0.5, 0, 0.5, 1); -o-transition-delay: 2s; transition: all 1.5s cubic-bezier(0.5, 0, 0.5, 1); transition-delay: 2s; } #section-5 .origin.onTrans .inner-cont-wrap .txt-holder span { -webkit-transition-delay: 2.4s; -moz-transition-delay: 2.4s; -o-transition-delay: 2.4s; transition-delay: 2.4s; } #section-5 .origin.onTrans .inner-cont-wrap .txt-holder p { -webkit-transition-delay: 2.8s; -moz-transition-delay: 2.8s; -o-transition-delay: 2.8s; transition-delay: 2.8s; } #section-5 .clone .bg-wrap .obj-holder .slider-box .obj-1 { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 13.5%; margin-left: -6%; } #section-5 .clone .bg-wrap .obj-holder .slider-box .obj-1 .prd-clip { -webkit-transform: scale(0.45); -moz-transform: scale(0.45); -ms-transform: scale(0.45); -o-transform: scale(0.45); transform: scale(0.45); -webkit-transform-origin: 30% 30%; -moz-transform-origin: 30% 30%; -ms-transform-origin: 30% 30%; -o-transform-origin: 30% 30%; transform-origin: 30% 30%; } #section-5 .clone .bg-wrap .obj-holder .slider-box .obj-1 .prd-clip .shadow { position: absolute; bottom: 0; left: 0; opacity: 1; filter: alpha(opacity=100); } #section-5 .clone .bg-wrap .obj-holder .slider-box .obj-2 { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 5.3%; margin-left: -7.1%; } #section-5 .clone .inner-cont-wrap .txt-holder { position: absolute; top: 70.5%; left: 59%; width: 50vw; z-index: 999; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #fff; text-align: left; } #section-5 .clone .inner-cont-wrap .txt-holder span { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } #section-5 .clone .inner-cont-wrap .txt-holder p { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } #section-6 { width: 100%; height: calc(100vh - 131px); } #section-6 .origin .bg-wrap { background-color: #000; } #section-6 .origin .bg-wrap .obj-holder { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-47%, -47%); -moz-transform: translate(-47%, -47%); -ms-transform: translate(-47%, -47%); -o-transform: translate(-47%, -47%); transform: translate(-47%, -47%); margin-left: 722px; margin-top: 195px; opacity: 0.2; filter: alpha(opacity=20); } #section-6 .origin .bg-wrap .shadow-holder { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 10; opacity: 1; filter: alpha(opacity=100); text-align: right; } #section-6 .origin .bg-wrap .shadow-holder img { width: auto; height: 100%; } #section-6 .origin .bg-wrap .light-holder { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-left: 722px; margin-top: 195px; opacity: 0; filter: alpha(opacity=0); } #section-6 .origin .inner-cont-wrap { position: relative; } #section-6 .origin .inner-cont-wrap .txt-holder { position: absolute; width: 50vw; top: 50%; left: 80px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #fff; text-align: left; } #section-6 .origin.onTrans .bg-wrap .obj-holder { -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: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1s 0s ease-out, opacity 1s 0s; -moz-transition: -moz-transform 1s 0s ease-out, opacity 1s 0s; -ms-transition: -ms-transform 1s 0s ease-out, opacity 1s 0s; -o-transition: -o-transform 1s 0s ease-out, opacity 1s 0s; transition: transform 1s 0s ease-out, opacity 1s 0s; } #section-6 .origin.onTrans .bg-wrap .light-holder { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0.75s; -moz-transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0.75s; -ms-transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0.75s; -o-transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0.75s; transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0.75s; } #section-6 .origin.onTrans .inner-cont-wrap .txt-holder span { -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } #section-6 .origin.onTrans .inner-cont-wrap .txt-holder p { -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; -o-transition-delay: 0.9s; transition-delay: 0.9s; } #section-7 { width: 100%; height: calc(100vh - 131px); background-color: #000; } #section-7 .origin .bg-wrap { -webkit-transform: scale(0.58); -moz-transform: scale(0.58); -ms-transform: scale(0.58); -o-transform: scale(0.58); transform: scale(0.58); -webkit-transform-origin: 35.5% 15%; -moz-transform-origin: 35.5% 15%; -ms-transform-origin: 35.5% 15%; -o-transform-origin: 35.5% 15%; transform-origin: 35.5% 15%; } #section-7 .origin .bg-wrap .obj-holder { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 115px; margin-left: -493px; } #section-7 .origin .bg-wrap .obj-holder.before { opacity: 1; filter: alpha(opacity=100); } #section-7 .origin .bg-wrap .obj-holder.after { opacity: 0; filter: alpha(opacity=0); } #section-7 .origin .inner-cont-wrap { position: relative; } #section-7 .origin .inner-cont-wrap .txt-holder { position: absolute; top: 50%; left: 50%; margin-left: 0; margin-top: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 50vw; color: #fff; text-align: left; } #section-7 .origin.onTrans .bg-wrap { -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 cubic-bezier(0.130, 0.115, 0.425, 0.720); -webkit-transition-delay: 0s; -moz-transition: -moz-transform 1.4s cubic-bezier(0.130, 0.115, 0.425, 0.720); -moz-transition-delay: 0s; -ms-transition: -ms-transform 1.4s cubic-bezier(0.130, 0.115, 0.425, 0.720); -ms-transition-delay: 0s; -o-transition: -o-transform 1.4s cubic-bezier(0.130, 0.115, 0.425, 0.720); -o-transition-delay: 0s; transition: transform 1.4s cubic-bezier(0.130, 0.115, 0.425, 0.720); transition-delay: 0s; } #section-7 .origin.onTrans .bg-wrap .obj-holder.before { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -webkit-transition-delay: 0.6s; -moz-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -moz-transition-delay: 0.6s; -ms-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -ms-transition-delay: 0.6s; -o-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -o-transition-delay: 0.6s; transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); transition-delay: 0.6s; } #section-7 .origin.onTrans .bg-wrap .obj-holder.after { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -webkit-transition-delay: 0s; -moz-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -moz-transition-delay: 0s; -ms-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -ms-transition-delay: 0s; -o-transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); -o-transition-delay: 0s; transition: opacity 1.2s cubic-bezier(0.130, 0.115, 0.425, 0.720); transition-delay: 0s; } #section-7 .origin.onTrans .inner-cont-wrap .txt-holder span { -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } #section-7 .origin.onTrans .inner-cont-wrap .txt-holder p { -webkit-transition-delay: 1.4s; -moz-transition-delay: 1.4s; -o-transition-delay: 1.4s; transition-delay: 1.4s; } #section-8 { width: 100%; height: calc(100vh - 131px); } #section-8 .origin .bg-wrap .bg-1-holder { position: absolute; top: 0; left: 0; width: 100%; height: inherit; background-image: url("../img/sec8_bg_1.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: 1; filter: alpha(opacity=100); } #section-8 .origin .bg-wrap .bg-2-holder { position: absolute; top: 0; left: 0; width: 100%; height: inherit; background-image: url("../img/sec8_bg_2.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: 0; filter: alpha(opacity=0); } #section-8 .origin.onTrans .bg-wrap .bg-1-holder { opacity: 1; filter: alpha(opacity=100); -webkit-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0s; -moz-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0s; -ms-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0s; -o-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0s; transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0s; } #section-8 .origin.onTrans .bg-wrap .bg-2-holder { opacity: 1; filter: alpha(opacity=100); -webkit-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0.2s; -moz-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0.2s; -ms-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0.2s; -o-transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0.2s; transition: all 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0.2s; } .indicator { position: fixed; top: 50%; left: 120px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 200; opacity: 0; filter: alpha(opacity=0); } .indicator.onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transition: all 0s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0s; -moz-transition: all 0s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0s; -ms-transition: all 0s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0s; -o-transition: all 0s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0s; transition: all 0s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0s; } .indicator ul li { position: relative; height: 20px; margin-bottom: 4px; } .indicator ul li a { display: block; width: 27px; background-image: url("../img/indicator.png"); background-size: 27px 30px; } .indicator ul li a.show { height: 20px; background-position: center bottom; opacity: 0; filter: alpha(opacity=0); } .indicator ul li a.hide { position: absolute; top: 5px; left: 0; height: 10px; background-position: center top; opacity: 1; filter: alpha(opacity=100); } .indicator ul li.select .show { height: 20px; background-position: center bottom; opacity: 1; filter: alpha(opacity=100); -webkit-transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0s; -moz-transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0s; -ms-transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0s; -o-transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0s; transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0s; } .indicator ul li.select .hide { position: absolute; top: 5px; left: 0; height: 10px; background-position: center top; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); opacity: 0; filter: alpha(opacity=0); -webkit-transition: -webkit-transform 0.8s 0s ease-out, opacity 0.4s 0.2s; -moz-transition: -moz-transform 0.8s 0s ease-out, opacity 0.4s 0.2s; -ms-transition: -ms-transform 0.8s 0s ease-out, opacity 0.4s 0.2s; -o-transition: -o-transform 0.8s 0s ease-out, opacity 0.4s 0.2s; transition: transform 0.8s 0s ease-out, opacity 0.4s 0.2s; } .indicator ul li.onHide .show { height: 20px; background-position: center bottom; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); opacity: 0; filter: alpha(opacity=0); -webkit-transition: -webkit-transform 0.8s 0s ease-out, opacity 0.4s 0.2s; -moz-transition: -moz-transform 0.8s 0s ease-out, opacity 0.4s 0.2s; -ms-transition: -ms-transform 0.8s 0s ease-out, opacity 0.4s 0.2s; -o-transition: -o-transform 0.8s 0s ease-out, opacity 0.4s 0.2s; transition: transform 0.8s 0s ease-out, opacity 0.4s 0.2s; } .indicator ul li.onHide .hide { position: absolute; top: 5px; left: 0; height: 10px; background-position: center top; opacity: 1; filter: alpha(opacity=100); -webkit-transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0s; -moz-transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0s; -ms-transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0s; -o-transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0s; transition: all 0.8s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0s; } /*# sourceMappingURL=page.css.map */