/* 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)); } }*/ /* line */ body { overflow-x: auto; background: #fff; } .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; } .btn_go_sec { display: inline-block; width: 210px; height: 45px; margin-right: 5px; font-size: 0; text-indent: -9999px; vertical-align: top; background: url(../img/btn_sec.png) no-repeat 0 0; } .btn_go_sec:hover { background-position: 0 -55px; } #content h1 { font-family: 'samsungonelatin1100'; font-size: 66px; text-transform: uppercase; letter-spacing: 0.15em; line-height: 1.57; } #content h3 { font-family: 'samsungonekorean600'; font-size: 32px; letter-spacing: -0.04em; color: #fff; line-height: 1.4; } #content h4 { font-family: 'samsungonekorean600'; font-size: 26px; letter-spacing: -0.015em; } #content p { color: #fff; font-family: 'samsungonekorean400'; font-size: 18px; letter-spacing: -0.04em; line-height: 1.8; } .alt-txt-hide { text-indent: -9999px; font-size: 0; position: absolute; top: -9999px; } .inner-cont-wrap { position: relative; width: 1280px; height: 100%; margin: 0 auto; text-align: center; } body { height: 100vh; } body > img { height: 0 !important; display: none; } #wrap { height: calc( 100vh ); overflow: hidden; } .content { overflow: hidden; z-index: 10; visibility: hidden; min-width: 1280px; } .content .inner-cont-wrap { min-width: 1280px; } .content .inner-cont-wrap .dim-holder { position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); background-color: #000; } .content .inner-cont-wrap .cont-holder { width: 1280px; margin: 0 auto; min-width: 1280px; } .content .inner-cont-wrap .cont-holder .text-box.type-lr h3 { padding-bottom: 42px; } .content .inner-cont-wrap .cont-holder .text-box.type-lr h3 span { display: block; opacity: 0; filter: alpha(opacity=0); } .content .inner-cont-wrap .cont-holder .text-box.type-lr h3 span:nth-child(1) { -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } .content .inner-cont-wrap .cont-holder .text-box.type-lr h3 span:nth-child(2) { -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } .content .inner-cont-wrap .cont-holder .text-box.type-lr p { -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); -o-transform: translateY(25px); transform: translateY(25px); opacity: 0; filter: alpha(opacity=0); } .content .inner-cont-wrap .cont-holder .text-box.type-lr .btn-clip { -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); -o-transform: translateY(25px); transform: translateY(25px); opacity: 0; filter: alpha(opacity=0); } .content .inner-cont-wrap .cont-holder .text-box.type-lr.onTrans h3 span { -webkit-transition: transform 0.5s ease-out, opacity 0.4s linear; -moz-transition: transform 0.5s ease-out, opacity 0.4s linear; -ms-transition: transform 0.5s ease-out, opacity 0.4s linear; -o-transition: transform 0.5s ease-out, opacity 0.4s linear; transition: transform 0.5s ease-out, opacity 0.4s linear; opacity: 1; filter: alpha(opacity=100); } .content .inner-cont-wrap .cont-holder .text-box.type-lr.onTrans h3 span:nth-child(1) { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .content .inner-cont-wrap .cont-holder .text-box.type-lr.onTrans h3 span:nth-child(2) { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .content .inner-cont-wrap .cont-holder .text-box.type-lr.onTrans p { -webkit-transition: transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear; -moz-transition: transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear; -ms-transition: transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear; -o-transition: transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear; transition: transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 1; filter: alpha(opacity=100); } .content .inner-cont-wrap .cont-holder .text-box.type-lr.onTrans .btn-clip { -webkit-transition: transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear; -moz-transition: transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear; -ms-transition: transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear; -o-transition: transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear; transition: transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 1; filter: alpha(opacity=100); } .content .inner-cont-wrap .cont-holder .text-box.type-l h3 { padding-bottom: 42px; } .content .inner-cont-wrap .cont-holder .text-box.type-l h3 span { display: block; opacity: 0; filter: alpha(opacity=0); -webkit-transition: transform 0.5s ease-out, opacity 0.4s linear; -moz-transition: transform 0.5s ease-out, opacity 0.4s linear; -ms-transition: transform 0.5s ease-out, opacity 0.4s linear; -o-transition: transform 0.5s ease-out, opacity 0.4s linear; transition: transform 0.5s ease-out, opacity 0.4s linear; } .content .inner-cont-wrap .cont-holder .text-box.type-l h3 span:nth-child(1) { -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } .content .inner-cont-wrap .cont-holder .text-box.type-l p { -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); opacity: 0; filter: alpha(opacity=0); -webkit-transition: transform 0.5s ease-out, opacity 0.4s linear; -moz-transition: transform 0.5s ease-out, opacity 0.4s linear; -ms-transition: transform 0.5s ease-out, opacity 0.4s linear; -o-transition: transform 0.5s ease-out, opacity 0.4s linear; transition: transform 0.5s ease-out, opacity 0.4s linear; } .content .inner-cont-wrap .cont-holder .text-box.type-l.onTrans h3 span { opacity: 1; filter: alpha(opacity=100); } .content .inner-cont-wrap .cont-holder .text-box.type-l.onTrans h3 span:nth-child(1) { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .content .inner-cont-wrap .cont-holder .text-box.type-l.onTrans p { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); opacity: 1; filter: alpha(opacity=100); } .content .inner-cont-wrap .scroll-box { position: absolute; overflow: hidden; height: 0px; bottom: 48vh; left: 50%; width: 100px; margin-left: -50px; font-size: 12px; text-align: center; -webkit-transition: height 0.6s linear; -moz-transition: height 0.6s linear; -ms-transition: height 0.6s linear; -o-transition: height 0.6s linear; transition: height 0.6s linear; } .content .inner-cont-wrap .scroll-box .txt { color: #fff; font-family: 'samsungonelatin800c'; letter-spacing: 0.1em; text-align: center; } .content .inner-cont-wrap .scroll-box .line { display: block; width: 1px; height: 55px; background-color: #fff; margin: 10px auto 0; } .content .inner-cont-wrap .scroll-box.onHide { height: 0; -webkit-transition: height 0.9s 0s cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: height 0.9s 0s cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: height 0.9s 0s cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: height 0.9s 0s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: height 0.9s 0s cubic-bezier(0.645, 0.045, 0.355, 1.000); } .content .inner-cont-wrap .scroll-box.onTrans { -webkit-transition: height 0.9s 4s cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: height 0.9s 4s cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: height 0.9s 4s cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: height 0.9s 4s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: height 0.9s 4s cubic-bezier(0.645, 0.045, 0.355, 1.000); height: 82px; } .content.onShow { visibility: visible; } /*part section*/ #section-1 { height: calc(100vh - 70px); position: relative; z-index: 30; } #section-1 .inner-cont-wrap { position: fixed; width: 100%; height: 100%; top: 70px; } #section-1 .inner-cont-wrap .cont-holder { position: relative; width: 1280px; height: 100%; margin: 0 auto; } #section-1 .inner-cont-wrap .cont-holder > div { height: 100%; } #section-1 .inner-cont-wrap .cont-holder .text-box { position: relative; top: 50%; margin-top: -114px; color: #fff; } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text { -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.6); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text span { display: inline-block; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 0; filter: alpha(opacity=0); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans { -webkit-transition: transform 1.4s 2.8s cubic-bezier(0.165, 0.345, 0.545, 0.780); -moz-transition: transform 1.4s 2.8s cubic-bezier(0.165, 0.345, 0.545, 0.780); -ms-transition: transform 1.4s 2.8s cubic-bezier(0.165, 0.345, 0.545, 0.780); -o-transition: transform 1.4s 2.8s cubic-bezier(0.165, 0.345, 0.545, 0.780); transition: transform 1.4s 2.8s cubic-bezier(0.165, 0.345, 0.545, 0.780); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(1) { -webkit-transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(2) { -webkit-transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(3) { -webkit-transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(4) { -webkit-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(5) { -webkit-transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(6) { -webkit-transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.5s 3.1s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(7) { -webkit-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(8) { -webkit-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(9) { -webkit-transition: transform 1.7s 3.3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.7s 3.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.7s 3.3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.7s 3.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.7s 3.3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.7s 3.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.7s 3.3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.7s 3.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.7s 3.3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.7s 3.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(10) { -webkit-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(11) { -webkit-transition: transform 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(12) { -webkit-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(13) { -webkit-transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.6s 3.2s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(14) { -webkit-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(15) { -webkit-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(16) { -webkit-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(17) { -webkit-transition: transform 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.4s 3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(18) { -webkit-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.3s 2.9s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(19) { -webkit-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .main-text.onTrans span:nth-child(20) { -webkit-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: transform 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),opacity 1.8s 3.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -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); } #section-1 .inner-cont-wrap .cont-holder .text-box .sub-text { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } #section-1 .inner-cont-wrap .cont-holder .text-box .sub-text.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: transform, 1s 3.3s cubic-bezier(0.165, 0.345, 0.545, 0.780); -moz-transition: transform, 1s 3.3s cubic-bezier(0.165, 0.345, 0.545, 0.780); -ms-transition: transform, 1s 3.3s cubic-bezier(0.165, 0.345, 0.545, 0.780); -o-transition: transform, 1s 3.3s cubic-bezier(0.165, 0.345, 0.545, 0.780); transition: transform, 1s 3.3s cubic-bezier(0.165, 0.345, 0.545, 0.780); } #section-1 .inner-cont-wrap .cont-holder .text-box.onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.75s 0.1s ease-out; -moz-transition: opacity 0.75s 0.1s ease-out; -ms-transition: opacity 0.75s 0.1s ease-out; -o-transition: opacity 0.75s 0.1s ease-out; transition: opacity 0.75s 0.1s ease-out; } #section-1 .inner-cont-wrap .cont-holder .text-box.onHide { opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.375s ease-out; -moz-transition: opacity 0.375s ease-out; -ms-transition: opacity 0.375s ease-out; -o-transition: opacity 0.375s ease-out; transition: opacity 0.375s ease-out; } #section-2 { height: calc(100vh - 70px); } #section-2 .inner-cont-wrap { position: fixed; width: 100%; height: 100%; bottom: 0; top: 70px; } #section-2 .inner-cont-wrap .bg-holder { position: absolute; width: 100%; height: 100%; -webkit-transform: scale(2.5); -moz-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); transform: scale(2.5); visibility: hidden; } #section-2 .inner-cont-wrap .bg-holder img { width: 100%; } #section-2 .inner-cont-wrap .bg-holder.onShow { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: transform 5s cubic-bezier(0.785, 0.135, 0.150, 0.860); -moz-transition: transform 5s cubic-bezier(0.785, 0.135, 0.150, 0.860); -ms-transition: transform 5s cubic-bezier(0.785, 0.135, 0.150, 0.860); -o-transition: transform 5s cubic-bezier(0.785, 0.135, 0.150, 0.860); transition: transform 5s cubic-bezier(0.785, 0.135, 0.150, 0.860); visibility: visible; } #section-2 .inner-cont-wrap .video-holder { position: absolute; width: 100%; visibility: hidden; } #section-2 .inner-cont-wrap .video-holder video { width: 100%; position: absolute; } #section-2 .inner-cont-wrap .video-holder.onShow { visibility: visible; } #section-2 .inner-cont-wrap .dim-holder { opacity: 0; filter: alpha(opacity=0); } #section-2 .inner-cont-wrap .dim-holder.onShow { opacity: 0.3; filter: alpha(opacity=30); -webkit-transition: opacity 0.4s 2.5s linear; -moz-transition: opacity 0.4s 2.5s linear; -ms-transition: opacity 0.4s 2.5s linear; -o-transition: opacity 0.4s 2.5s linear; transition: opacity 0.4s 2.5s linear; } #section-2 .inner-cont-wrap .dim-holder.idle { opacity: 0.3; filter: alpha(opacity=30); } #section-2 .inner-cont-wrap .cont-holder { position: relative; width: 1280px; height: 100%; margin: 0 auto; } #section-2 .inner-cont-wrap .cont-holder .text-box { position: relative; opacity: 0; filter: alpha(opacity=0); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } #section-2 .inner-cont-wrap .cont-holder .text-box.onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.75s 0.375s ease-out; -moz-transition: opacity 0.75s 0.375s ease-out; -ms-transition: opacity 0.75s 0.375s ease-out; -o-transition: opacity 0.75s 0.375s ease-out; transition: opacity 0.75s 0.375s ease-out; } #section-2 .inner-cont-wrap .cont-holder .text-box.onHide { opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.375s ease-out; -moz-transition: opacity 0.375s ease-out; -ms-transition: opacity 0.375s ease-out; -o-transition: opacity 0.375s ease-out; transition: opacity 0.375s ease-out; } #section-3 { position: relative; background-color: #000; height: 300vh; } #section-3 .inner-cont-wrap { width: 100%; height: inherit; } #section-3 .inner-cont-wrap .bg-holder { height: 100%; background-image: url("../img/sec3_bg.jpg"); background-repeat: no-repeat; background-position: center 0; background-size: auto; background-color: #000; -webkit-transition: opacity 3s 0s; -moz-transition: opacity 3s 0s; -ms-transition: opacity 3s 0s; -o-transition: opacity 3s 0s; transition: opacity 3s 0s; opacity: 0; filter: alpha(opacity=0); } #section-3 .inner-cont-wrap .bg-holder .star { position: relative; width: 1920px; height: 100%; margin: 0 auto; } #section-3 .inner-cont-wrap .bg-holder .star .particles-js-canvas-el { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } #section-3 .inner-cont-wrap .bg-holder.onTrans { opacity: 1; filter: alpha(opacity=100); } #section-3 .inner-cont-wrap .bg-holder.onTrans .particles-js-canvas-el { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transition: transform 40s ease-out; -moz-transition: transform 40s ease-out; -ms-transition: transform 40s ease-out; -o-transition: transform 40s ease-out; transition: transform 40s ease-out; } #section-3 .inner-cont-wrap .dim-holder { z-index: 11; -webkit-transition: opacity 0.5s 0s ease-out; -moz-transition: opacity 0.5s 0s ease-out; -ms-transition: opacity 0.5s 0s ease-out; -o-transition: opacity 0.5s 0s ease-out; transition: opacity 0.5s 0s ease-out; } #section-3 .inner-cont-wrap .dim-holder.onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.55s 0s ease-out; -moz-transition: opacity 0.55s 0s ease-out; -ms-transition: opacity 0.55s 0s ease-out; -o-transition: opacity 0.55s 0s ease-out; transition: opacity 0.55s 0s ease-out; } #section-3 .inner-cont-wrap .dim-holder.onHide { opacity: 0; filter: alpha(opacity=0); } #section-3 .inner-cont-wrap .flag { position: absolute; left: 50%; top: 50%; margin-left: -980px; margin-top: -490px; z-index: 20; opacity: 0; filter: alpha(opacity=0); } #section-3 .inner-cont-wrap .flag.onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.6s 0.3s; -moz-transition: opacity 0.6s 0.3s; -ms-transition: opacity 0.6s 0.3s; -o-transition: opacity 0.6s 0.3s; transition: opacity 0.6s 0.3s; } #section-3 .inner-cont-wrap .cont-holder { position: absolute; left: 50%; top: 0; height: inherit; margin-left: -640px; } #section-3 .inner-cont-wrap .cont-holder > div { height: 1010px; } #section-3 .inner-cont-wrap .cont-holder .content-1 .text-box { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } #section-3 .inner-cont-wrap .cont-holder .content-1 .text-box h3 { font-size: 50px; } #section-3 .inner-cont-wrap .cont-holder .content-2 { position: relative; /*position: fixed; bottom: 0; width: 100%; left: 0; height: 1010px; z-index:20;*/ } #section-3 .inner-cont-wrap .cont-holder .content-2 .canvas-box { position: absolute; width: 800px; height: 600px; left: 50%; top: 50%; margin-left: -530px; margin-top: -210px; z-index: 20; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.4s linear; -moz-transition: opacity 0.4s linear; -ms-transition: opacity 0.4s linear; -o-transition: opacity 0.4s linear; transition: opacity 0.4s linear; } #section-3 .inner-cont-wrap .cont-holder .content-2 .canvas-box.onShow { opacity: 1; filter: alpha(opacity=100); } #section-3 .inner-cont-wrap .cont-holder .content-2 .img-box { position: absolute; left: 50%; top: 50%; margin-left: -1341px; margin-top: -280px; } #section-3 .inner-cont-wrap .cont-holder .content-2 .text-1 .text-box h3 span { opacity: 0; filter: alpha(opacity=0); } #section-3 .inner-cont-wrap .cont-holder .content-2 .text-box { position: absolute; width: 100%; left: 50%; top: 50%; z-index: 20; text-align: left; margin-top: -110px; margin-left: 156px; } #section-4 { position: relative; height: calc(100vh - 70px); } #section-4 .inner-cont-wrap { width: 100%; height: inherit; } #section-4 .inner-cont-wrap .cont-holder { width: 100%; height: inherit; display: block; font-size: 0; } #section-4 .inner-cont-wrap .cont-holder div { width: 50%; height: 100%; } #section-4 .inner-cont-wrap .cont-holder div a { position: relative; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); -webkit-transition: background-color 0.4s linear; -moz-transition: background-color 0.4s linear; -ms-transition: background-color 0.4s linear; -o-transition: background-color 0.4s linear; transition: background-color 0.4s linear; } #section-4 .inner-cont-wrap .cont-holder div a span { position: absolute; left: 50%; top: 50%; margin-top: -101px; margin-left: -210px; } #section-4 .inner-cont-wrap .cont-holder div a span em { position: absolute; left: 50%; bottom: 0; margin-left: -37.5px; -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -ms-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } #section-4 .inner-cont-wrap .cont-holder div a span em.idle { opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder div a span em.hover { opacity: 0; filter: alpha(opacity=0); } #section-4 .inner-cont-wrap .cont-holder div a:hover { background-color: rgba(0, 0, 0, 0.6); } #section-4 .inner-cont-wrap .cont-holder div a:hover span em.idle { opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -ms-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } #section-4 .inner-cont-wrap .cont-holder div a:hover span em.hover { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } #section-4 .inner-cont-wrap .cont-holder .odyssey-box-1 { display: inline-block; background-image: url("../img/sec4_btn0_back.jpg"); background-repeat: no-repeat; background-position: center 0; background-size: cover; background-color: #000; } #section-4 .inner-cont-wrap .cont-holder .odyssey-box-2 { display: inline-block; background-image: url("../img/sec4_btn1_back.jpg"); background-repeat: no-repeat; background-position: center 0; background-size: cover; background-color: #000; } #section-5 { position: relative; height: calc(100vh - 70px); } #section-5 .inner-cont-wrap { width: 100%; height: inherit; } #section-5 .inner-cont-wrap .bg-holder { position: absolute; width: 100%; height: 100%; background-image: url("../img/sec5_bg.jpg"); background-repeat: no-repeat; background-position: center 0; background-size: cover; background-color: #000; } #section-5 .inner-cont-wrap .cont-holder { position: relative; height: inherit; display: block; } #section-5 .inner-cont-wrap .cont-holder .text-box { position: relative; left: 50%; top: 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%); } #section-5 .inner-cont-wrap .cont-holder .text-box p { padding-bottom: 60px; } .related-stories-wrap { z-index: 20; } /*# sourceMappingURL=page.css.map */