/* rotate */ /* transform-origin */ /* 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; } #content { position: relative; min-width: 1280px; margin: 0 auto; overflow: hidden; } .section { overflow: hidden; position: relative; width: 100%; } .alt-txt-hide { text-indent: -9999px; font-size: 0; position: absolute; top: -9999px; } .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; } h1, h2, h3, h4, h5 { text-align: left; } i { font-style: normal; } h1 { font-family: 'samsungonelatin200'; font-size: 150px; letter-spacing: 0em; line-height: 110px; font-weight: 100; } h2 { font-family: 'samsungonekorean700'; font-size: 80px; letter-spacing: -0.05em; line-height: 110px; font-weight: 100; } h3 { font-family: 'samsungonelatin200'; font-size: 80px; letter-spacing: 0; line-height: 1; font-weight: 100; } h4 { font-family: 'samsungonekorean700'; font-size: 34px; letter-spacing: -0.035em; line-height: 50px; font-weight: 100; } h5 { font-family: 'samsungonekorean400'; font-size: 22px; letter-spacing: -0.035em; line-height: 36px; font-weight: 100; } p { font-family: 'samsungonekorean400'; font-size: 18px; letter-spacing: -0.04em; line-height: 36px; font-weight: 100; } dt { font-family: 'samsungonekorean700'; font-size: 24px; letter-spacing: -0.035em; line-height: 60px; font-weight: 100; text-align: left; } dd { font-family: 'samsungonekorean400'; font-size: 18px; letter-spacing: -0.035em; line-height: 36px; font-weight: 100; text-align: left; } .inner-cont-wrap { position: relative; width: 100%; min-width: 1280px; height: 100%; } .bg-holder { position: absolute; width: 100%; height: 100%; } .cont-holder { position: relative; width: 1180px; height: 100%; margin: 0 auto; text-align: center; } .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } .columns-box { position: relative; } .columns-box .columns-title { position: absolute; } .columns-box .columns-title .title-txt { position: relative; font-family: 'samsungonekorean700'; font-size: 43px; letter-spacing: -0.035em; line-height: 56px; font-weight: 100; text-align: center; } .columns-box .columns-title .title-txt:before { position: absolute; top: -52px; left: 50%; margin-left: -24px; display: block; content: ''; width: 48px; height: 34px; background-image: url("../img/sec8_quote.png"); background-size: 100% 200%; background-position: 0 0; opacity: 0; filter: alpha(opacity=0); } .columns-box .columns-title .title-txt .title-inner { opacity: 0; filter: alpha(opacity=0); color: #000; } .columns-box .columns-title .title-txt:after { position: absolute; bottom: -52px; left: 50%; margin-left: -24px; display: block; content: ''; width: 48px; height: 34px; background-image: url("../img/sec8_quote.png"); background-size: 100% 200%; background-position: 0 100%; opacity: 0; filter: alpha(opacity=0); } .columns-box .columns-title .title-txt.onShow:before { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.6s 0s ease-out; -moz-transition: opacity 0.6s 0s ease-out; -ms-transition: opacity 0.6s 0s ease-out; -o-transition: opacity 0.6s 0s ease-out; transition: opacity 0.6s 0s ease-out; } .columns-box .columns-title .title-txt.onShow .title-inner { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.8s 0.3s linear; -moz-transition: opacity 0.8s 0.3s linear; -ms-transition: opacity 0.8s 0.3s linear; -o-transition: opacity 0.8s 0.3s linear; transition: opacity 0.8s 0.3s linear; } .columns-box .columns-title .title-txt.onShow:after { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.6s 0.6s ease-out; -moz-transition: opacity 0.6s 0.6s ease-out; -ms-transition: opacity 0.6s 0.6s ease-out; -o-transition: opacity 0.6s 0.6s ease-out; transition: opacity 0.6s 0.6s ease-out; } .columns-box .column { width: 360px; } .columns-box .column .column-title { position: relative; margin-bottom: 10px; } .columns-box .column .column-title .question { position: absolute; opacity: 0; filter: alpha(opacity=0); } .columns-box .column .column-title .question .title-img { position: absolute; top: 0; left: 0; font-size: 0; } .columns-box .column .column-title .question .title-img img { vertical-align: top; display: block; } .columns-box .column .column-title .question.onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.6s 0s linear; -moz-transition: opacity 0.6s 0s linear; -ms-transition: opacity 0.6s 0s linear; -o-transition: opacity 0.6s 0s linear; transition: opacity 0.6s 0s linear; } .columns-box .column .column-title h5 { position: relative; font-family: 'samsungonekorean700'; font-size: 24px; letter-spacing: -0.05em; line-height: 38px; font-weight: 100; text-align: justify; } .columns-box .column .column-content { text-align: justify; } .columns-box .column .column-content em { font-family: 'samsungonekorean700'; font-size: 14px; letter-spacing: -0.035em; line-height: 24px; font-weight: 100; color: #666; } .content { position: relative; visibility: hidden; } .content .inner-cont-wrap .cont-holder .title-box { color: #fff; text-align: center; } .content .inner-cont-wrap .cont-holder .title-box h1 { text-align: center; letter-spacing: -10px; } .content .inner-cont-wrap .cont-holder .title-box.onShow h1 { letter-spacing: -2.25px; } .content .inner-cont-wrap .cont-holder .sub-title-box h5 { text-align: justify; } #section-1 .inner-cont-wrap .cont-holder .title-box h1 { text-align: center; letter-spacing: -10px; } #section-1 .inner-cont-wrap .cont-holder .title-box p { font-size: 22px; } #section-1 .inner-cont-wrap .cont-holder .title-box .main-txt-txt { font-family: 'samsungonekorean700'; font-size: 80px; letter-spacing: -4px; color: #FEED0B; } #section-1 .inner-cont-wrap .cont-holder .title-box.onShow .main-txt-txt { letter-spacing: 0.5px; } #section-1 .inner-cont-wrap .btn-scroll span { font-family: 'samsungonelatin900'; letter-spacing: 0.13em; font-size: 18px; } #section-4 .inner-cont-wrap .cont-holder .txt-box .txts p { text-align: justify; letter-spacing: -0.05em; } #section-4 .inner-cont-wrap .cont-holder .txt-box .txts p.txt-1 span { letter-spacing: -0.02em; } #section-6 .inner-cont-wrap .cont-holder .des-box ul li dl dt { text-align: right; font-size: 22px; letter-spacing: -0.015em; line-height: 43px; } #section-6 .inner-cont-wrap .cont-holder .des-box ul li dl dd { text-align: justify; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-1 .column-title h5 { letter-spacing: -0.02em; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-1 .column-title h5 { letter-spacing: -0.02em; } #section-10 .inner-cont-wrap .cont-holder ul li figure figcaption p { text-align: justify; } #section-10 .inner-cont-wrap .cont-holder ul li figure figcaption p span { display: inline-block; font-family: samsungonekorean700; font-size: 14px; color: #666; letter-spacing: -0.035em; margin-top: 14px; line-height: 24px; position: relative; left: 16px; } #section-10 .inner-cont-wrap .cont-holder ul li figure figcaption p em { margin-left: -16px; margin-right: 8px; } #section-12 .txt-box span, #section-12 .txt-pod span { font-family: 'samsungonekorean700'; font-size: 18px; letter-spacing: -0.015em; line-height: 36px; font-weight: 100; text-align: left; display: block; } #section-12 .txt-pod-1 span { letter-spacing: -0.02em; text-align: justify; } #section-12 .txt-pod-2 span { letter-spacing: -0.02em; text-align: justify; } #section-12 p { text-align: left; } #section-13 .inner-cont-wrap .cont-holder .txt-box p { font-size: 22px; text-align: center; } .footer-btns.test-1 a, .footer-btns.test-3 a, #section-13 .inner-cont-wrap .cont-holder .txt-box .footer-btns a, .footer-btns.test-2 a, .footer-btns.test-4 a { display: inline-block; width: 210px; height: 45px; margin-right: 10px; } .footer-btns.test-1 a:hover, .footer-btns.test-3 a:hover, #section-13 .inner-cont-wrap .cont-holder .txt-box .footer-btns a:hover, .footer-btns.test-2 a:hover, .footer-btns.test-4 a:hover { background-position-y: bottom; background-repeat: no-repeat; } .footer-btns.test-1 a:nth-child(1) { background-image: url("../img/btn_download.png"); } .footer-btns.test-1 a:nth-child(2) { background-image: url("../img/btn_sec.png"); } .footer-btns.test-3 a:nth-child(1), #section-13 .inner-cont-wrap .cont-holder .txt-box .footer-btns a:nth-child(1) { background-image: url("../img/btn_download_b.png"); } .footer-btns.test-3 a:nth-child(2), #section-13 .inner-cont-wrap .cont-holder .txt-box .footer-btns a:nth-child(2) { background-image: url("../img/btn_sec_b.png"); } .footer-btns.test-2 a:nth-child(1) { background-image: url("../img/btn_download.png"); } .footer-btns.test-2 a:nth-child(2) { background-image: url("../img/btn_samsung.png"); } .footer-btns.test-4 a:nth-child(1) { background-image: url("../img/btn_download_b.png"); } .footer-btns.test-4 a:nth-child(2) { background-image: url("../img/btn_samsung_b.png"); } .footer-btns { font-size: 0; } #container { padding-top: 70px; } #wrap { min-width: 1280px; } .content { position: relative; visibility: hidden; } .content .inner-cont-wrap .bg-holder { background-position: center; } .content .inner-cont-wrap .bg-holder .bg { background-position: center; } .content .inner-cont-wrap .cont-holder .title-box { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .content .inner-cont-wrap .cont-holder .title-box h1 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.87); -moz-transform: scale(0.87); -ms-transform: scale(0.87); -o-transform: scale(0.87); transform: scale(0.87); } .content .inner-cont-wrap .cont-holder .title-box.onShow h1 { 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: letter-spacing 2s, opacity 2s,transform 2s ease-out ; -moz-transition: letter-spacing 2s, opacity 2s,transform 2s ease-out ; -ms-transition: letter-spacing 2s, opacity 2s,transform 2s ease-out ; -o-transition: letter-spacing 2s, opacity 2s,transform 2s ease-out ; transition: letter-spacing 2s, opacity 2s,transform 2s ease-out ; } .content .inner-cont-wrap .cont-holder .sub-title-box { width: 1180px; margin: 0 auto; padding-top: 130px; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 { margin-bottom: 70px; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 span { display: block; overflow: hidden; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 span em { opacity: 0; filter: alpha(opacity=0); display: inline-block; } .content .inner-cont-wrap .cont-holder .sub-title-box h5 { float: right; width: 770px; -webkit-transform: translateY(60px); -moz-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); transform: translateY(60px); opacity: 0; filter: alpha(opacity=0); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(1) { -webkit-transform: translateY(99px); -moz-transform: translateY(99px); -ms-transform: translateY(99px); -o-transform: translateY(99px); transform: translateY(99px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(1).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.79s 0.09s, transform 0.79s 0.09s; -moz-transition: opacity 0.79s 0.09s, transform 0.79s 0.09s; -ms-transition: opacity 0.79s 0.09s, transform 0.79s 0.09s; -o-transition: opacity 0.79s 0.09s, transform 0.79s 0.09s; transition: opacity 0.79s 0.09s, transform 0.79s 0.09s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(1) { -webkit-transform: translateY(99px); -moz-transform: translateY(99px); -ms-transform: translateY(99px); -o-transform: translateY(99px); transform: translateY(99px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(1).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.79s 0.49s, transform 0.79s 0.49s; -moz-transition: opacity 0.79s 0.49s, transform 0.79s 0.49s; -ms-transition: opacity 0.79s 0.49s, transform 0.79s 0.49s; -o-transition: opacity 0.79s 0.49s, transform 0.79s 0.49s; transition: opacity 0.79s 0.49s, transform 0.79s 0.49s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(2) { -webkit-transform: translateY(98px); -moz-transform: translateY(98px); -ms-transform: translateY(98px); -o-transform: translateY(98px); transform: translateY(98px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(2).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.78s 0.18s, transform 0.78s 0.18s; -moz-transition: opacity 0.78s 0.18s, transform 0.78s 0.18s; -ms-transition: opacity 0.78s 0.18s, transform 0.78s 0.18s; -o-transition: opacity 0.78s 0.18s, transform 0.78s 0.18s; transition: opacity 0.78s 0.18s, transform 0.78s 0.18s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(2) { -webkit-transform: translateY(98px); -moz-transform: translateY(98px); -ms-transform: translateY(98px); -o-transform: translateY(98px); transform: translateY(98px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(2).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.78s 0.58s, transform 0.78s 0.58s; -moz-transition: opacity 0.78s 0.58s, transform 0.78s 0.58s; -ms-transition: opacity 0.78s 0.58s, transform 0.78s 0.58s; -o-transition: opacity 0.78s 0.58s, transform 0.78s 0.58s; transition: opacity 0.78s 0.58s, transform 0.78s 0.58s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(3) { -webkit-transform: translateY(97px); -moz-transform: translateY(97px); -ms-transform: translateY(97px); -o-transform: translateY(97px); transform: translateY(97px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(3).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.77s 0.27s, transform 0.77s 0.27s; -moz-transition: opacity 0.77s 0.27s, transform 0.77s 0.27s; -ms-transition: opacity 0.77s 0.27s, transform 0.77s 0.27s; -o-transition: opacity 0.77s 0.27s, transform 0.77s 0.27s; transition: opacity 0.77s 0.27s, transform 0.77s 0.27s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(3) { -webkit-transform: translateY(97px); -moz-transform: translateY(97px); -ms-transform: translateY(97px); -o-transform: translateY(97px); transform: translateY(97px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(3).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.77s 0.67s, transform 0.77s 0.67s; -moz-transition: opacity 0.77s 0.67s, transform 0.77s 0.67s; -ms-transition: opacity 0.77s 0.67s, transform 0.77s 0.67s; -o-transition: opacity 0.77s 0.67s, transform 0.77s 0.67s; transition: opacity 0.77s 0.67s, transform 0.77s 0.67s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(4) { -webkit-transform: translateY(96px); -moz-transform: translateY(96px); -ms-transform: translateY(96px); -o-transform: translateY(96px); transform: translateY(96px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(4).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.76s 0.36s, transform 0.76s 0.36s; -moz-transition: opacity 0.76s 0.36s, transform 0.76s 0.36s; -ms-transition: opacity 0.76s 0.36s, transform 0.76s 0.36s; -o-transition: opacity 0.76s 0.36s, transform 0.76s 0.36s; transition: opacity 0.76s 0.36s, transform 0.76s 0.36s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(4) { -webkit-transform: translateY(96px); -moz-transform: translateY(96px); -ms-transform: translateY(96px); -o-transform: translateY(96px); transform: translateY(96px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(4).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.76s 0.76s, transform 0.76s 0.76s; -moz-transition: opacity 0.76s 0.76s, transform 0.76s 0.76s; -ms-transition: opacity 0.76s 0.76s, transform 0.76s 0.76s; -o-transition: opacity 0.76s 0.76s, transform 0.76s 0.76s; transition: opacity 0.76s 0.76s, transform 0.76s 0.76s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(5) { -webkit-transform: translateY(95px); -moz-transform: translateY(95px); -ms-transform: translateY(95px); -o-transform: translateY(95px); transform: translateY(95px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(5).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.75s 0.45s, transform 0.75s 0.45s; -moz-transition: opacity 0.75s 0.45s, transform 0.75s 0.45s; -ms-transition: opacity 0.75s 0.45s, transform 0.75s 0.45s; -o-transition: opacity 0.75s 0.45s, transform 0.75s 0.45s; transition: opacity 0.75s 0.45s, transform 0.75s 0.45s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(5) { -webkit-transform: translateY(95px); -moz-transform: translateY(95px); -ms-transform: translateY(95px); -o-transform: translateY(95px); transform: translateY(95px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(5).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.75s 0.85s, transform 0.75s 0.85s; -moz-transition: opacity 0.75s 0.85s, transform 0.75s 0.85s; -ms-transition: opacity 0.75s 0.85s, transform 0.75s 0.85s; -o-transition: opacity 0.75s 0.85s, transform 0.75s 0.85s; transition: opacity 0.75s 0.85s, transform 0.75s 0.85s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(6) { -webkit-transform: translateY(94px); -moz-transform: translateY(94px); -ms-transform: translateY(94px); -o-transform: translateY(94px); transform: translateY(94px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(6).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.74s 0.54s, transform 0.74s 0.54s; -moz-transition: opacity 0.74s 0.54s, transform 0.74s 0.54s; -ms-transition: opacity 0.74s 0.54s, transform 0.74s 0.54s; -o-transition: opacity 0.74s 0.54s, transform 0.74s 0.54s; transition: opacity 0.74s 0.54s, transform 0.74s 0.54s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(6) { -webkit-transform: translateY(94px); -moz-transform: translateY(94px); -ms-transform: translateY(94px); -o-transform: translateY(94px); transform: translateY(94px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(6).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.74s 0.94s, transform 0.74s 0.94s; -moz-transition: opacity 0.74s 0.94s, transform 0.74s 0.94s; -ms-transition: opacity 0.74s 0.94s, transform 0.74s 0.94s; -o-transition: opacity 0.74s 0.94s, transform 0.74s 0.94s; transition: opacity 0.74s 0.94s, transform 0.74s 0.94s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(7) { -webkit-transform: translateY(93px); -moz-transform: translateY(93px); -ms-transform: translateY(93px); -o-transform: translateY(93px); transform: translateY(93px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(7).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.73s 0.63s, transform 0.73s 0.63s; -moz-transition: opacity 0.73s 0.63s, transform 0.73s 0.63s; -ms-transition: opacity 0.73s 0.63s, transform 0.73s 0.63s; -o-transition: opacity 0.73s 0.63s, transform 0.73s 0.63s; transition: opacity 0.73s 0.63s, transform 0.73s 0.63s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(7) { -webkit-transform: translateY(93px); -moz-transform: translateY(93px); -ms-transform: translateY(93px); -o-transform: translateY(93px); transform: translateY(93px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(7).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.73s 1.03s, transform 0.73s 1.03s; -moz-transition: opacity 0.73s 1.03s, transform 0.73s 1.03s; -ms-transition: opacity 0.73s 1.03s, transform 0.73s 1.03s; -o-transition: opacity 0.73s 1.03s, transform 0.73s 1.03s; transition: opacity 0.73s 1.03s, transform 0.73s 1.03s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(8) { -webkit-transform: translateY(92px); -moz-transform: translateY(92px); -ms-transform: translateY(92px); -o-transform: translateY(92px); transform: translateY(92px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(8).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.72s 0.72s, transform 0.72s 0.72s; -moz-transition: opacity 0.72s 0.72s, transform 0.72s 0.72s; -ms-transition: opacity 0.72s 0.72s, transform 0.72s 0.72s; -o-transition: opacity 0.72s 0.72s, transform 0.72s 0.72s; transition: opacity 0.72s 0.72s, transform 0.72s 0.72s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(8) { -webkit-transform: translateY(92px); -moz-transform: translateY(92px); -ms-transform: translateY(92px); -o-transform: translateY(92px); transform: translateY(92px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(8).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.72s 1.12s, transform 0.72s 1.12s; -moz-transition: opacity 0.72s 1.12s, transform 0.72s 1.12s; -ms-transition: opacity 0.72s 1.12s, transform 0.72s 1.12s; -o-transition: opacity 0.72s 1.12s, transform 0.72s 1.12s; transition: opacity 0.72s 1.12s, transform 0.72s 1.12s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(9) { -webkit-transform: translateY(91px); -moz-transform: translateY(91px); -ms-transform: translateY(91px); -o-transform: translateY(91px); transform: translateY(91px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(9).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.71s 0.81s, transform 0.71s 0.81s; -moz-transition: opacity 0.71s 0.81s, transform 0.71s 0.81s; -ms-transition: opacity 0.71s 0.81s, transform 0.71s 0.81s; -o-transition: opacity 0.71s 0.81s, transform 0.71s 0.81s; transition: opacity 0.71s 0.81s, transform 0.71s 0.81s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(9) { -webkit-transform: translateY(91px); -moz-transform: translateY(91px); -ms-transform: translateY(91px); -o-transform: translateY(91px); transform: translateY(91px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(9).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.71s 1.21s, transform 0.71s 1.21s; -moz-transition: opacity 0.71s 1.21s, transform 0.71s 1.21s; -ms-transition: opacity 0.71s 1.21s, transform 0.71s 1.21s; -o-transition: opacity 0.71s 1.21s, transform 0.71s 1.21s; transition: opacity 0.71s 1.21s, transform 0.71s 1.21s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(10) { -webkit-transform: translateY(90px); -moz-transform: translateY(90px); -ms-transform: translateY(90px); -o-transform: translateY(90px); transform: translateY(90px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(10).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.7s 0.9s, transform 0.7s 0.9s; -moz-transition: opacity 0.7s 0.9s, transform 0.7s 0.9s; -ms-transition: opacity 0.7s 0.9s, transform 0.7s 0.9s; -o-transition: opacity 0.7s 0.9s, transform 0.7s 0.9s; transition: opacity 0.7s 0.9s, transform 0.7s 0.9s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(10) { -webkit-transform: translateY(90px); -moz-transform: translateY(90px); -ms-transform: translateY(90px); -o-transform: translateY(90px); transform: translateY(90px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(10).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.7s 1.3s, transform 0.7s 1.3s; -moz-transition: opacity 0.7s 1.3s, transform 0.7s 1.3s; -ms-transition: opacity 0.7s 1.3s, transform 0.7s 1.3s; -o-transition: opacity 0.7s 1.3s, transform 0.7s 1.3s; transition: opacity 0.7s 1.3s, transform 0.7s 1.3s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(11) { -webkit-transform: translateY(89px); -moz-transform: translateY(89px); -ms-transform: translateY(89px); -o-transform: translateY(89px); transform: translateY(89px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(11).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.69s 0.99s, transform 0.69s 0.99s; -moz-transition: opacity 0.69s 0.99s, transform 0.69s 0.99s; -ms-transition: opacity 0.69s 0.99s, transform 0.69s 0.99s; -o-transition: opacity 0.69s 0.99s, transform 0.69s 0.99s; transition: opacity 0.69s 0.99s, transform 0.69s 0.99s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(11) { -webkit-transform: translateY(89px); -moz-transform: translateY(89px); -ms-transform: translateY(89px); -o-transform: translateY(89px); transform: translateY(89px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(11).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.69s 1.39s, transform 0.69s 1.39s; -moz-transition: opacity 0.69s 1.39s, transform 0.69s 1.39s; -ms-transition: opacity 0.69s 1.39s, transform 0.69s 1.39s; -o-transition: opacity 0.69s 1.39s, transform 0.69s 1.39s; transition: opacity 0.69s 1.39s, transform 0.69s 1.39s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(12) { -webkit-transform: translateY(88px); -moz-transform: translateY(88px); -ms-transform: translateY(88px); -o-transform: translateY(88px); transform: translateY(88px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(12).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.68s 1.08s, transform 0.68s 1.08s; -moz-transition: opacity 0.68s 1.08s, transform 0.68s 1.08s; -ms-transition: opacity 0.68s 1.08s, transform 0.68s 1.08s; -o-transition: opacity 0.68s 1.08s, transform 0.68s 1.08s; transition: opacity 0.68s 1.08s, transform 0.68s 1.08s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(12) { -webkit-transform: translateY(88px); -moz-transform: translateY(88px); -ms-transform: translateY(88px); -o-transform: translateY(88px); transform: translateY(88px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(12).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.68s 1.48s, transform 0.68s 1.48s; -moz-transition: opacity 0.68s 1.48s, transform 0.68s 1.48s; -ms-transition: opacity 0.68s 1.48s, transform 0.68s 1.48s; -o-transition: opacity 0.68s 1.48s, transform 0.68s 1.48s; transition: opacity 0.68s 1.48s, transform 0.68s 1.48s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(13) { -webkit-transform: translateY(87px); -moz-transform: translateY(87px); -ms-transform: translateY(87px); -o-transform: translateY(87px); transform: translateY(87px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(13).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.67s 1.17s, transform 0.67s 1.17s; -moz-transition: opacity 0.67s 1.17s, transform 0.67s 1.17s; -ms-transition: opacity 0.67s 1.17s, transform 0.67s 1.17s; -o-transition: opacity 0.67s 1.17s, transform 0.67s 1.17s; transition: opacity 0.67s 1.17s, transform 0.67s 1.17s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(13) { -webkit-transform: translateY(87px); -moz-transform: translateY(87px); -ms-transform: translateY(87px); -o-transform: translateY(87px); transform: translateY(87px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(13).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.67s 1.57s, transform 0.67s 1.57s; -moz-transition: opacity 0.67s 1.57s, transform 0.67s 1.57s; -ms-transition: opacity 0.67s 1.57s, transform 0.67s 1.57s; -o-transition: opacity 0.67s 1.57s, transform 0.67s 1.57s; transition: opacity 0.67s 1.57s, transform 0.67s 1.57s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(14) { -webkit-transform: translateY(86px); -moz-transform: translateY(86px); -ms-transform: translateY(86px); -o-transform: translateY(86px); transform: translateY(86px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(14).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.66s 1.26s, transform 0.66s 1.26s; -moz-transition: opacity 0.66s 1.26s, transform 0.66s 1.26s; -ms-transition: opacity 0.66s 1.26s, transform 0.66s 1.26s; -o-transition: opacity 0.66s 1.26s, transform 0.66s 1.26s; transition: opacity 0.66s 1.26s, transform 0.66s 1.26s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(14) { -webkit-transform: translateY(86px); -moz-transform: translateY(86px); -ms-transform: translateY(86px); -o-transform: translateY(86px); transform: translateY(86px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(14).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.66s 1.66s, transform 0.66s 1.66s; -moz-transition: opacity 0.66s 1.66s, transform 0.66s 1.66s; -ms-transition: opacity 0.66s 1.66s, transform 0.66s 1.66s; -o-transition: opacity 0.66s 1.66s, transform 0.66s 1.66s; transition: opacity 0.66s 1.66s, transform 0.66s 1.66s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(15) { -webkit-transform: translateY(85px); -moz-transform: translateY(85px); -ms-transform: translateY(85px); -o-transform: translateY(85px); transform: translateY(85px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(15).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.65s 1.35s, transform 0.65s 1.35s; -moz-transition: opacity 0.65s 1.35s, transform 0.65s 1.35s; -ms-transition: opacity 0.65s 1.35s, transform 0.65s 1.35s; -o-transition: opacity 0.65s 1.35s, transform 0.65s 1.35s; transition: opacity 0.65s 1.35s, transform 0.65s 1.35s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(15) { -webkit-transform: translateY(85px); -moz-transform: translateY(85px); -ms-transform: translateY(85px); -o-transform: translateY(85px); transform: translateY(85px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(15).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.65s 1.75s, transform 0.65s 1.75s; -moz-transition: opacity 0.65s 1.75s, transform 0.65s 1.75s; -ms-transition: opacity 0.65s 1.75s, transform 0.65s 1.75s; -o-transition: opacity 0.65s 1.75s, transform 0.65s 1.75s; transition: opacity 0.65s 1.75s, transform 0.65s 1.75s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(16) { -webkit-transform: translateY(84px); -moz-transform: translateY(84px); -ms-transform: translateY(84px); -o-transform: translateY(84px); transform: translateY(84px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(16).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.64s 1.44s, transform 0.64s 1.44s; -moz-transition: opacity 0.64s 1.44s, transform 0.64s 1.44s; -ms-transition: opacity 0.64s 1.44s, transform 0.64s 1.44s; -o-transition: opacity 0.64s 1.44s, transform 0.64s 1.44s; transition: opacity 0.64s 1.44s, transform 0.64s 1.44s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(16) { -webkit-transform: translateY(84px); -moz-transform: translateY(84px); -ms-transform: translateY(84px); -o-transform: translateY(84px); transform: translateY(84px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(16).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.64s 1.84s, transform 0.64s 1.84s; -moz-transition: opacity 0.64s 1.84s, transform 0.64s 1.84s; -ms-transition: opacity 0.64s 1.84s, transform 0.64s 1.84s; -o-transition: opacity 0.64s 1.84s, transform 0.64s 1.84s; transition: opacity 0.64s 1.84s, transform 0.64s 1.84s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(17) { -webkit-transform: translateY(83px); -moz-transform: translateY(83px); -ms-transform: translateY(83px); -o-transform: translateY(83px); transform: translateY(83px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(17).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.63s 1.53s, transform 0.63s 1.53s; -moz-transition: opacity 0.63s 1.53s, transform 0.63s 1.53s; -ms-transition: opacity 0.63s 1.53s, transform 0.63s 1.53s; -o-transition: opacity 0.63s 1.53s, transform 0.63s 1.53s; transition: opacity 0.63s 1.53s, transform 0.63s 1.53s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(17) { -webkit-transform: translateY(83px); -moz-transform: translateY(83px); -ms-transform: translateY(83px); -o-transform: translateY(83px); transform: translateY(83px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(17).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.63s 1.93s, transform 0.63s 1.93s; -moz-transition: opacity 0.63s 1.93s, transform 0.63s 1.93s; -ms-transition: opacity 0.63s 1.93s, transform 0.63s 1.93s; -o-transition: opacity 0.63s 1.93s, transform 0.63s 1.93s; transition: opacity 0.63s 1.93s, transform 0.63s 1.93s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(18) { -webkit-transform: translateY(82px); -moz-transform: translateY(82px); -ms-transform: translateY(82px); -o-transform: translateY(82px); transform: translateY(82px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(18).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.62s 1.62s, transform 0.62s 1.62s; -moz-transition: opacity 0.62s 1.62s, transform 0.62s 1.62s; -ms-transition: opacity 0.62s 1.62s, transform 0.62s 1.62s; -o-transition: opacity 0.62s 1.62s, transform 0.62s 1.62s; transition: opacity 0.62s 1.62s, transform 0.62s 1.62s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(18) { -webkit-transform: translateY(82px); -moz-transform: translateY(82px); -ms-transform: translateY(82px); -o-transform: translateY(82px); transform: translateY(82px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(18).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.62s 2.02s, transform 0.62s 2.02s; -moz-transition: opacity 0.62s 2.02s, transform 0.62s 2.02s; -ms-transition: opacity 0.62s 2.02s, transform 0.62s 2.02s; -o-transition: opacity 0.62s 2.02s, transform 0.62s 2.02s; transition: opacity 0.62s 2.02s, transform 0.62s 2.02s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(19) { -webkit-transform: translateY(81px); -moz-transform: translateY(81px); -ms-transform: translateY(81px); -o-transform: translateY(81px); transform: translateY(81px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(19).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.61s 1.71s, transform 0.61s 1.71s; -moz-transition: opacity 0.61s 1.71s, transform 0.61s 1.71s; -ms-transition: opacity 0.61s 1.71s, transform 0.61s 1.71s; -o-transition: opacity 0.61s 1.71s, transform 0.61s 1.71s; transition: opacity 0.61s 1.71s, transform 0.61s 1.71s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(19) { -webkit-transform: translateY(81px); -moz-transform: translateY(81px); -ms-transform: translateY(81px); -o-transform: translateY(81px); transform: translateY(81px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(19).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.61s 2.11s, transform 0.61s 2.11s; -moz-transition: opacity 0.61s 2.11s, transform 0.61s 2.11s; -ms-transition: opacity 0.61s 2.11s, transform 0.61s 2.11s; -o-transition: opacity 0.61s 2.11s, transform 0.61s 2.11s; transition: opacity 0.61s 2.11s, transform 0.61s 2.11s; } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(20) { -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .content .inner-cont-wrap .cont-holder .sub-title-box h2 em:nth-child(20).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.6s 1.8s, transform 0.6s 1.8s; -moz-transition: opacity 0.6s 1.8s, transform 0.6s 1.8s; -ms-transition: opacity 0.6s 1.8s, transform 0.6s 1.8s; -o-transition: opacity 0.6s 1.8s, transform 0.6s 1.8s; transition: opacity 0.6s 1.8s, transform 0.6s 1.8s; } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(20) { -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .content .inner-cont-wrap .cont-holder .sub-title-box .txt-2 em:nth-child(20).onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.6s 2.2s, transform 0.6s 2.2s; -moz-transition: opacity 0.6s 2.2s, transform 0.6s 2.2s; -ms-transition: opacity 0.6s 2.2s, transform 0.6s 2.2s; -o-transition: opacity 0.6s 2.2s, transform 0.6s 2.2s; transition: opacity 0.6s 2.2s, transform 0.6s 2.2s; } .content .inner-cont-wrap .cont-holder .sub-title-box.onTrans h5 { -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); -webkit-transition: transform 0.7s 1.1s ease-out, opacity 0.7s 1.1s linear; -moz-transition: transform 0.7s 1.1s ease-out, opacity 0.7s 1.1s linear; -ms-transition: transform 0.7s 1.1s ease-out, opacity 0.7s 1.1s linear; -o-transition: transform 0.7s 1.1s ease-out, opacity 0.7s 1.1s linear; transition: transform 0.7s 1.1s ease-out, opacity 0.7s 1.1s linear; } .content .inner-cont-wrap .video-holder { position: absolute; left: 0; top: 0; } .content .inner-cont-wrap .video-holder video { position: absolute; width: 100vw; } .content .inner-cont-wrap .dim-holder { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: black; opacity: 0; filter: alpha(opacity=0); visibility: hidden; } .content.onShow { visibility: visible; } /*part section*/ #section-1 { height: calc( 100vh - 70px ); } #section-1 .inner-cont-wrap { position: fixed; height: inherit; background-color: #294994; } #section-1 .inner-cont-wrap .bg-holder { background-image: url("../img/sec1_bg.jpg"); background-size: cover; background-position: center; visibility: hidden; } #section-1 .inner-cont-wrap .cont-holder .title-box p { position: absolute; top: 50%; margin-top: -120px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); color: #feed0b; opacity: 0; filter: alpha(opacity=0); } #section-1 .inner-cont-wrap .cont-holder .title-box .svg-box { width: 179px; height: 58px; } #section-1 .inner-cont-wrap .cont-holder .title-box .main-txt-txt { margin-top: -118px; opacity: 0; filter: alpha(opacity=0); } #section-1 .inner-cont-wrap .cont-holder .title-box .main-txt-overap { position: absolute; left: 50%; top: 50%; width: 1143px; margin-top: -150px; margin-left: -571px; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity linear 0.7s; -moz-transition: opacity linear 0.7s; -ms-transition: opacity linear 0.7s; -o-transition: opacity linear 0.7s; transition: opacity linear 0.7s; } #section-1 .inner-cont-wrap .cont-holder .title-box .main-txt-overap .main-txt-obj { fill: #FEED0B; } #section-1 .inner-cont-wrap .cont-holder .title-box .main-txt { position: absolute; left: 50%; top: 50%; width: 1143px; margin-top: -150px; margin-left: -571px; } #section-1 .inner-cont-wrap .cont-holder .title-box .main-txt .main-txt-obj { opacity: 0; filter: alpha(opacity=0); } #section-1 .inner-cont-wrap .cont-holder .title-box.onShow p { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.8s linear 1s; -moz-transition: opacity 0.8s linear 1s; -ms-transition: opacity 0.8s linear 1s; -o-transition: opacity 0.8s linear 1s; transition: opacity 0.8s linear 1s; } #section-1 .inner-cont-wrap .cont-holder .title-box.onShow .main-txt-txt { opacity: 1; filter: alpha(opacity=100); -webkit-transition: letter-spacing 2.4s ease-in-out 1s, opacity 0.4s ease-out 1.2s; -moz-transition: letter-spacing 2.4s ease-in-out 1s, opacity 0.4s ease-out 1.2s; -ms-transition: letter-spacing 2.4s ease-in-out 1s, opacity 0.4s ease-out 1.2s; -o-transition: letter-spacing 2.4s ease-in-out 1s, opacity 0.4s ease-out 1.2s; transition: letter-spacing 2.4s ease-in-out 1s, opacity 0.4s ease-out 1.2s; } #section-1 .inner-cont-wrap .btn-scroll { display: block; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } #section-1 .inner-cont-wrap .btn-scroll span { display: block; margin-bottom: 10px; opacity: 0; filter: alpha(opacity=0); } #section-1 .inner-cont-wrap .btn-scroll em { position: relative; left: 50%; margin-left: -4px; display: block; width: 2px; height: 0; background-color: #000; } #section-1 .inner-cont-wrap .btn-scroll.onShow span { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.3s 0.2s linear; -moz-transition: opacity 0.3s 0.2s linear; -ms-transition: opacity 0.3s 0.2s linear; -o-transition: opacity 0.3s 0.2s linear; transition: opacity 0.3s 0.2s linear; } #section-1 .inner-cont-wrap .btn-scroll.onShow em { height: 67px; -webkit-transition: height 0.7s 0.2s ease-in-out; -moz-transition: height 0.7s 0.2s ease-in-out; -ms-transition: height 0.7s 0.2s ease-in-out; -o-transition: height 0.7s 0.2s ease-in-out; transition: height 0.7s 0.2s ease-in-out; } #section-2 { height: calc( 100vh - 70px ); } #section-2 .inner-cont-wrap { height: inherit; background-color: #fff; } #section-2 .inner-cont-wrap .obj-holder { position: absolute; width: 100%; height: 100%; } #section-2 .inner-cont-wrap .obj-holder span { display: block; width: 100%; } #section-2 .inner-cont-wrap .obj-holder .line { position: absolute; left: 50%; top: 50%; width: 977px; height: 12px; margin-left: -977px; margin-top: 265px; overflow: hidden; -webkit-transform-origin: right 0; -moz-transform-origin: right 0; -ms-transform-origin: right 0; -o-transform-origin: right 0; transform-origin: right 0; -webkit-transform: rotate(12.4deg); -moz-transform: rotate(12.4deg); -ms-transform: rotate(12.4deg); -o-transform: rotate(12.4deg); transform: rotate(12.4deg); } #section-2 .inner-cont-wrap .obj-holder .line span { position: absolute; left: 0; top: 0; width: 977px; height: 12px; overflow: hidden; transform: scaleX(0); -webkit-transform-origin: left 0; -moz-transform-origin: left 0; -ms-transform-origin: left 0; -o-transform-origin: left 0; transform-origin: left 0; opacity: 0; filter: alpha(opacity=0); } #section-2 .inner-cont-wrap .obj-holder .line img { position: absolute; left: 0; top: 0; width: 977px; height: 12px; } #section-2 .inner-cont-wrap .obj-holder .pen { position: absolute; left: 50%; top: 50%; margin-top: -333px; margin-left: -21px; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: translate(-952px, -206px) rotate(0deg); -moz-transform: translate(-952px, -206px) rotate(0deg); -ms-transform: translate(-952px, -206px) rotate(0deg); -o-transform: translate(-952px, -206px) rotate(0deg); transform: translate(-952px, -206px) rotate(0deg); opacity: 0; filter: alpha(opacity=0); } #section-2 .inner-cont-wrap .obj-holder .pen em { display: block; margin-top: 4px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; } #section-2 .inner-cont-wrap .obj-holder.onShow .line span { -webkit-transition: transform 1.2s ease-out, opacity 0.4s linear; -moz-transition: transform 1.2s ease-out, opacity 0.4s linear; -ms-transition: transform 1.2s ease-out, opacity 0.4s linear; -o-transition: transform 1.2s ease-out, opacity 0.4s linear; transition: transform 1.2s ease-out, opacity 0.4s linear; transform: scaleX(1); opacity: 1; filter: alpha(opacity=100); } #section-2 .inner-cont-wrap .obj-holder.onShow .pen { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: transform 1.2s ease-out, opacity 0.4s linear; -moz-transition: transform 1.2s ease-out, opacity 0.4s linear; -ms-transition: transform 1.2s ease-out, opacity 0.4s linear; -o-transition: transform 1.2s ease-out, opacity 0.4s linear; transition: transform 1.2s ease-out, opacity 0.4s linear; opacity: 1; filter: alpha(opacity=100); } #section-2 .inner-cont-wrap .obj-holder.onShow .pen em { -webkit-transition: transform 1.2s ease-out; -moz-transition: transform 1.2s ease-out; -ms-transition: transform 1.2s ease-out; -o-transition: transform 1.2s ease-out; transition: transform 1.2s ease-out; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } #section-2 .inner-cont-wrap .cont-holder .txt-box { position: relative; top: 50%; -webkit-transform: translateY(-35%); -moz-transform: translateY(-35%); -ms-transform: translateY(-35%); -o-transform: translateY(-35%); transform: translateY(-35%); opacity: 0; filter: alpha(opacity=0); } #section-2 .inner-cont-wrap .cont-holder .txt-box h5 { text-align: center; } #section-2 .inner-cont-wrap .cont-holder.onShow .txt-box { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 0.8s 1.3s linear,transform 0.6s ease-out 1.3s; -moz-transition: opacity 0.8s 1.3s linear,transform 0.6s ease-out 1.3s; -ms-transition: opacity 0.8s 1.3s linear,transform 0.6s ease-out 1.3s; -o-transition: opacity 0.8s 1.3s linear,transform 0.6s ease-out 1.3s; transition: opacity 0.8s 1.3s linear,transform 0.6s ease-out 1.3s; } #section-3 { height: calc( 100vh - 70px ); } #section-3 .inner-cont-wrap { height: inherit; background-color: #b0bec5; overflow: hidden; } #section-3 .inner-cont-wrap .bg-holder { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } #section-3 .inner-cont-wrap .bg-holder .bg { height: inherit; background-image: url("../img/sec3_bg.jpg"); background-size: cover; background-repeat: no-repeat; } #section-3 .inner-cont-wrap .bg-holder.onShow.bg-holder { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: transform 2s ease-out; -moz-transition: transform 2s ease-out; -ms-transition: transform 2s ease-out; -o-transition: transform 2s ease-out; transition: transform 2s ease-out; } #section-4 { height: calc( 2485px - 0px ); } #section-4 .inner-cont-wrap { height: calc( 2485px - 0px ); background-color: #fff; } #section-4 .inner-cont-wrap .dim-holder { height: 100%; } #section-4 .inner-cont-wrap .cont-holder .gallery { position: relative; margin: 90px 0 90px -200px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box { position: relative; width: 1580px; height: 871px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li { position: absolute; left: 0; top: 0; display: inline-block; opacity: 0; filter: alpha(opacity=0); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(1) { opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(1) { left: 0px; top: 0px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(2) { left: 556px; top: 162px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(3) { left: 0px; top: 247px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(4) { left: 0px; top: 0px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(5) { left: 564px; top: 0px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(6) { left: 431px; top: 298px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(7) { left: 0px; top: 0px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(8) { left: 103px; top: 0px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(9) { left: 0px; top: 247px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(10) { left: 0px; top: 0px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(11) { left: 556px; top: 162px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(12) { left: 152px; top: 76px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(13) { left: 0px; top: 0px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(14) { left: 564px; top: 0px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(15) { left: 431px; top: 298px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(16) { left: 0px; top: 52px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(17) { left: 564px; top: 162px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(18) { left: 0px; top: 247px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(19) { left: 0px; top: 0px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(20) { left: 104px; top: 0px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(21) { left: 431px; top: 298px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(22) { left: 0px; top: 0px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(23) { left: 564px; top: 0px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box li:nth-child(24) { left: 88px; top: 76px; } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(1) { -webkit-transition: -webkit-transform 0s 0s linear,opacity 0s 0s; -moz-transition: -moz-transform 0s 0s linear,opacity 0s 0s; -ms-transition: -ms-transform 0s 0s linear,opacity 0s 0s; -o-transition: -o-transform 0s 0s linear,opacity 0s 0s; transition: transform 0s 0s linear,opacity 0s 0s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(2) { -webkit-transition: -webkit-transform 0s 0.133s linear,opacity 0s 0.133s; -moz-transition: -moz-transform 0s 0.133s linear,opacity 0s 0.133s; -ms-transition: -ms-transform 0s 0.133s linear,opacity 0s 0.133s; -o-transition: -o-transform 0s 0.133s linear,opacity 0s 0.133s; transition: transform 0s 0.133s linear,opacity 0s 0.133s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(3) { -webkit-transition: -webkit-transform 0s 0.266s linear,opacity 0s 0.266s; -moz-transition: -moz-transform 0s 0.266s linear,opacity 0s 0.266s; -ms-transition: -ms-transform 0s 0.266s linear,opacity 0s 0.266s; -o-transition: -o-transform 0s 0.266s linear,opacity 0s 0.266s; transition: transform 0s 0.266s linear,opacity 0s 0.266s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(4) { -webkit-transition: -webkit-transform 0s 0.399s linear,opacity 0s 0.399s; -moz-transition: -moz-transform 0s 0.399s linear,opacity 0s 0.399s; -ms-transition: -ms-transform 0s 0.399s linear,opacity 0s 0.399s; -o-transition: -o-transform 0s 0.399s linear,opacity 0s 0.399s; transition: transform 0s 0.399s linear,opacity 0s 0.399s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(5) { -webkit-transition: -webkit-transform 0s 1.266s linear,opacity 0s 1.266s; -moz-transition: -moz-transform 0s 1.266s linear,opacity 0s 1.266s; -ms-transition: -ms-transform 0s 1.266s linear,opacity 0s 1.266s; -o-transition: -o-transform 0s 1.266s linear,opacity 0s 1.266s; transition: transform 0s 1.266s linear,opacity 0s 1.266s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(6) { -webkit-transition: -webkit-transform 0s 1.399s linear,opacity 0s 1.399s; -moz-transition: -moz-transform 0s 1.399s linear,opacity 0s 1.399s; -ms-transition: -ms-transform 0s 1.399s linear,opacity 0s 1.399s; -o-transition: -o-transform 0s 1.399s linear,opacity 0s 1.399s; transition: transform 0s 1.399s linear,opacity 0s 1.399s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(7) { -webkit-transition: -webkit-transform 0s 1.532s linear,opacity 0s 1.532s; -moz-transition: -moz-transform 0s 1.532s linear,opacity 0s 1.532s; -ms-transition: -ms-transform 0s 1.532s linear,opacity 0s 1.532s; -o-transition: -o-transform 0s 1.532s linear,opacity 0s 1.532s; transition: transform 0s 1.532s linear,opacity 0s 1.532s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(8) { -webkit-transition: -webkit-transform 0s 1.665s linear,opacity 0s 1.665s; -moz-transition: -moz-transform 0s 1.665s linear,opacity 0s 1.665s; -ms-transition: -ms-transform 0s 1.665s linear,opacity 0s 1.665s; -o-transition: -o-transform 0s 1.665s linear,opacity 0s 1.665s; transition: transform 0s 1.665s linear,opacity 0s 1.665s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(9) { -webkit-transition: -webkit-transform 0s 2.532s linear,opacity 0s 2.532s; -moz-transition: -moz-transform 0s 2.532s linear,opacity 0s 2.532s; -ms-transition: -ms-transform 0s 2.532s linear,opacity 0s 2.532s; -o-transition: -o-transform 0s 2.532s linear,opacity 0s 2.532s; transition: transform 0s 2.532s linear,opacity 0s 2.532s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(10) { -webkit-transition: -webkit-transform 0s 2.665s linear,opacity 0s 2.665s; -moz-transition: -moz-transform 0s 2.665s linear,opacity 0s 2.665s; -ms-transition: -ms-transform 0s 2.665s linear,opacity 0s 2.665s; -o-transition: -o-transform 0s 2.665s linear,opacity 0s 2.665s; transition: transform 0s 2.665s linear,opacity 0s 2.665s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(11) { -webkit-transition: -webkit-transform 0s 2.798s linear,opacity 0s 2.798s; -moz-transition: -moz-transform 0s 2.798s linear,opacity 0s 2.798s; -ms-transition: -ms-transform 0s 2.798s linear,opacity 0s 2.798s; -o-transition: -o-transform 0s 2.798s linear,opacity 0s 2.798s; transition: transform 0s 2.798s linear,opacity 0s 2.798s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(12) { -webkit-transition: -webkit-transform 0s 2.931s linear,opacity 0s 2.931s; -moz-transition: -moz-transform 0s 2.931s linear,opacity 0s 2.931s; -ms-transition: -ms-transform 0s 2.931s linear,opacity 0s 2.931s; -o-transition: -o-transform 0s 2.931s linear,opacity 0s 2.931s; transition: transform 0s 2.931s linear,opacity 0s 2.931s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(13) { -webkit-transition: -webkit-transform 0s 3.798s linear,opacity 0s 3.798s; -moz-transition: -moz-transform 0s 3.798s linear,opacity 0s 3.798s; -ms-transition: -ms-transform 0s 3.798s linear,opacity 0s 3.798s; -o-transition: -o-transform 0s 3.798s linear,opacity 0s 3.798s; transition: transform 0s 3.798s linear,opacity 0s 3.798s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(14) { -webkit-transition: -webkit-transform 0s 3.931s linear,opacity 0s 3.931s; -moz-transition: -moz-transform 0s 3.931s linear,opacity 0s 3.931s; -ms-transition: -ms-transform 0s 3.931s linear,opacity 0s 3.931s; -o-transition: -o-transform 0s 3.931s linear,opacity 0s 3.931s; transition: transform 0s 3.931s linear,opacity 0s 3.931s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(15) { -webkit-transition: -webkit-transform 0s 4.064s linear,opacity 0s 4.064s; -moz-transition: -moz-transform 0s 4.064s linear,opacity 0s 4.064s; -ms-transition: -ms-transform 0s 4.064s linear,opacity 0s 4.064s; -o-transition: -o-transform 0s 4.064s linear,opacity 0s 4.064s; transition: transform 0s 4.064s linear,opacity 0s 4.064s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(16) { -webkit-transition: -webkit-transform 0s 4.197s linear,opacity 0s 4.197s; -moz-transition: -moz-transform 0s 4.197s linear,opacity 0s 4.197s; -ms-transition: -ms-transform 0s 4.197s linear,opacity 0s 4.197s; -o-transition: -o-transform 0s 4.197s linear,opacity 0s 4.197s; transition: transform 0s 4.197s linear,opacity 0s 4.197s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(17) { -webkit-transition: -webkit-transform 0s 5.064s linear,opacity 0s 5.064s; -moz-transition: -moz-transform 0s 5.064s linear,opacity 0s 5.064s; -ms-transition: -ms-transform 0s 5.064s linear,opacity 0s 5.064s; -o-transition: -o-transform 0s 5.064s linear,opacity 0s 5.064s; transition: transform 0s 5.064s linear,opacity 0s 5.064s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(18) { -webkit-transition: -webkit-transform 0s 5.197s linear,opacity 0s 5.197s; -moz-transition: -moz-transform 0s 5.197s linear,opacity 0s 5.197s; -ms-transition: -ms-transform 0s 5.197s linear,opacity 0s 5.197s; -o-transition: -o-transform 0s 5.197s linear,opacity 0s 5.197s; transition: transform 0s 5.197s linear,opacity 0s 5.197s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(19) { -webkit-transition: -webkit-transform 0s 5.33s linear,opacity 0s 5.33s; -moz-transition: -moz-transform 0s 5.33s linear,opacity 0s 5.33s; -ms-transition: -ms-transform 0s 5.33s linear,opacity 0s 5.33s; -o-transition: -o-transform 0s 5.33s linear,opacity 0s 5.33s; transition: transform 0s 5.33s linear,opacity 0s 5.33s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(20) { -webkit-transition: -webkit-transform 0s 5.463s linear,opacity 0s 5.463s; -moz-transition: -moz-transform 0s 5.463s linear,opacity 0s 5.463s; -ms-transition: -ms-transform 0s 5.463s linear,opacity 0s 5.463s; -o-transition: -o-transform 0s 5.463s linear,opacity 0s 5.463s; transition: transform 0s 5.463s linear,opacity 0s 5.463s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(21) { -webkit-transition: -webkit-transform 0s 6.33s linear,opacity 0s 6.33s; -moz-transition: -moz-transform 0s 6.33s linear,opacity 0s 6.33s; -ms-transition: -ms-transform 0s 6.33s linear,opacity 0s 6.33s; -o-transition: -o-transform 0s 6.33s linear,opacity 0s 6.33s; transition: transform 0s 6.33s linear,opacity 0s 6.33s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(22) { -webkit-transition: -webkit-transform 0s 6.463s linear,opacity 0s 6.463s; -moz-transition: -moz-transform 0s 6.463s linear,opacity 0s 6.463s; -ms-transition: -ms-transform 0s 6.463s linear,opacity 0s 6.463s; -o-transition: -o-transform 0s 6.463s linear,opacity 0s 6.463s; transition: transform 0s 6.463s linear,opacity 0s 6.463s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(23) { -webkit-transition: -webkit-transform 0s 6.596s linear,opacity 0s 6.596s; -moz-transition: -moz-transform 0s 6.596s linear,opacity 0s 6.596s; -ms-transition: -ms-transform 0s 6.596s linear,opacity 0s 6.596s; -o-transition: -o-transform 0s 6.596s linear,opacity 0s 6.596s; transition: transform 0s 6.596s linear,opacity 0s 6.596s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onShow li:nth-child(24) { -webkit-transition: -webkit-transform 0s 6.729s linear,opacity 0s 6.729s; -moz-transition: -moz-transform 0s 6.729s linear,opacity 0s 6.729s; -ms-transition: -ms-transform 0s 6.729s linear,opacity 0s 6.729s; -o-transition: -o-transform 0s 6.729s linear,opacity 0s 6.729s; transition: transform 0s 6.729s linear,opacity 0s 6.729s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(2) { -webkit-transition: -webkit-transform 0s 0.033s linear,opacity 0s 0.033s; -moz-transition: -moz-transform 0s 0.033s linear,opacity 0s 0.033s; -ms-transition: -ms-transform 0s 0.033s linear,opacity 0s 0.033s; -o-transition: -o-transform 0s 0.033s linear,opacity 0s 0.033s; transition: transform 0s 0.033s linear,opacity 0s 0.033s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(3) { -webkit-transition: -webkit-transform 0s 0.166s linear,opacity 0s 0.166s; -moz-transition: -moz-transform 0s 0.166s linear,opacity 0s 0.166s; -ms-transition: -ms-transform 0s 0.166s linear,opacity 0s 0.166s; -o-transition: -o-transform 0s 0.166s linear,opacity 0s 0.166s; transition: transform 0s 0.166s linear,opacity 0s 0.166s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(4) { -webkit-transition: -webkit-transform 0s 0.299s linear,opacity 0s 0.299s; -moz-transition: -moz-transform 0s 0.299s linear,opacity 0s 0.299s; -ms-transition: -ms-transform 0s 0.299s linear,opacity 0s 0.299s; -o-transition: -o-transform 0s 0.299s linear,opacity 0s 0.299s; transition: transform 0s 0.299s linear,opacity 0s 0.299s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(5) { -webkit-transition: -webkit-transform 0s 1.166s linear,opacity 0s 1.166s; -moz-transition: -moz-transform 0s 1.166s linear,opacity 0s 1.166s; -ms-transition: -ms-transform 0s 1.166s linear,opacity 0s 1.166s; -o-transition: -o-transform 0s 1.166s linear,opacity 0s 1.166s; transition: transform 0s 1.166s linear,opacity 0s 1.166s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(6) { -webkit-transition: -webkit-transform 0s 1.299s linear,opacity 0s 1.299s; -moz-transition: -moz-transform 0s 1.299s linear,opacity 0s 1.299s; -ms-transition: -ms-transform 0s 1.299s linear,opacity 0s 1.299s; -o-transition: -o-transform 0s 1.299s linear,opacity 0s 1.299s; transition: transform 0s 1.299s linear,opacity 0s 1.299s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(7) { -webkit-transition: -webkit-transform 0s 1.432s linear,opacity 0s 1.432s; -moz-transition: -moz-transform 0s 1.432s linear,opacity 0s 1.432s; -ms-transition: -ms-transform 0s 1.432s linear,opacity 0s 1.432s; -o-transition: -o-transform 0s 1.432s linear,opacity 0s 1.432s; transition: transform 0s 1.432s linear,opacity 0s 1.432s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(8) { -webkit-transition: -webkit-transform 0s 1.565s linear,opacity 0s 1.565s; -moz-transition: -moz-transform 0s 1.565s linear,opacity 0s 1.565s; -ms-transition: -ms-transform 0s 1.565s linear,opacity 0s 1.565s; -o-transition: -o-transform 0s 1.565s linear,opacity 0s 1.565s; transition: transform 0s 1.565s linear,opacity 0s 1.565s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(9) { -webkit-transition: -webkit-transform 0s 2.432s linear,opacity 0s 2.432s; -moz-transition: -moz-transform 0s 2.432s linear,opacity 0s 2.432s; -ms-transition: -ms-transform 0s 2.432s linear,opacity 0s 2.432s; -o-transition: -o-transform 0s 2.432s linear,opacity 0s 2.432s; transition: transform 0s 2.432s linear,opacity 0s 2.432s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(10) { -webkit-transition: -webkit-transform 0s 2.565s linear,opacity 0s 2.565s; -moz-transition: -moz-transform 0s 2.565s linear,opacity 0s 2.565s; -ms-transition: -ms-transform 0s 2.565s linear,opacity 0s 2.565s; -o-transition: -o-transform 0s 2.565s linear,opacity 0s 2.565s; transition: transform 0s 2.565s linear,opacity 0s 2.565s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(11) { -webkit-transition: -webkit-transform 0s 2.698s linear,opacity 0s 2.698s; -moz-transition: -moz-transform 0s 2.698s linear,opacity 0s 2.698s; -ms-transition: -ms-transform 0s 2.698s linear,opacity 0s 2.698s; -o-transition: -o-transform 0s 2.698s linear,opacity 0s 2.698s; transition: transform 0s 2.698s linear,opacity 0s 2.698s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(12) { -webkit-transition: -webkit-transform 0s 2.831s linear,opacity 0s 2.831s; -moz-transition: -moz-transform 0s 2.831s linear,opacity 0s 2.831s; -ms-transition: -ms-transform 0s 2.831s linear,opacity 0s 2.831s; -o-transition: -o-transform 0s 2.831s linear,opacity 0s 2.831s; transition: transform 0s 2.831s linear,opacity 0s 2.831s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(13) { -webkit-transition: -webkit-transform 0s 3.698s linear,opacity 0s 3.698s; -moz-transition: -moz-transform 0s 3.698s linear,opacity 0s 3.698s; -ms-transition: -ms-transform 0s 3.698s linear,opacity 0s 3.698s; -o-transition: -o-transform 0s 3.698s linear,opacity 0s 3.698s; transition: transform 0s 3.698s linear,opacity 0s 3.698s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(14) { -webkit-transition: -webkit-transform 0s 3.831s linear,opacity 0s 3.831s; -moz-transition: -moz-transform 0s 3.831s linear,opacity 0s 3.831s; -ms-transition: -ms-transform 0s 3.831s linear,opacity 0s 3.831s; -o-transition: -o-transform 0s 3.831s linear,opacity 0s 3.831s; transition: transform 0s 3.831s linear,opacity 0s 3.831s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(15) { -webkit-transition: -webkit-transform 0s 3.964s linear,opacity 0s 3.964s; -moz-transition: -moz-transform 0s 3.964s linear,opacity 0s 3.964s; -ms-transition: -ms-transform 0s 3.964s linear,opacity 0s 3.964s; -o-transition: -o-transform 0s 3.964s linear,opacity 0s 3.964s; transition: transform 0s 3.964s linear,opacity 0s 3.964s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(16) { -webkit-transition: -webkit-transform 0s 4.097s linear,opacity 0s 4.097s; -moz-transition: -moz-transform 0s 4.097s linear,opacity 0s 4.097s; -ms-transition: -ms-transform 0s 4.097s linear,opacity 0s 4.097s; -o-transition: -o-transform 0s 4.097s linear,opacity 0s 4.097s; transition: transform 0s 4.097s linear,opacity 0s 4.097s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(17) { -webkit-transition: -webkit-transform 0s 4.964s linear,opacity 0s 4.964s; -moz-transition: -moz-transform 0s 4.964s linear,opacity 0s 4.964s; -ms-transition: -ms-transform 0s 4.964s linear,opacity 0s 4.964s; -o-transition: -o-transform 0s 4.964s linear,opacity 0s 4.964s; transition: transform 0s 4.964s linear,opacity 0s 4.964s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(18) { -webkit-transition: -webkit-transform 0s 5.097s linear,opacity 0s 5.097s; -moz-transition: -moz-transform 0s 5.097s linear,opacity 0s 5.097s; -ms-transition: -ms-transform 0s 5.097s linear,opacity 0s 5.097s; -o-transition: -o-transform 0s 5.097s linear,opacity 0s 5.097s; transition: transform 0s 5.097s linear,opacity 0s 5.097s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(19) { -webkit-transition: -webkit-transform 0s 5.23s linear,opacity 0s 5.23s; -moz-transition: -moz-transform 0s 5.23s linear,opacity 0s 5.23s; -ms-transition: -ms-transform 0s 5.23s linear,opacity 0s 5.23s; -o-transition: -o-transform 0s 5.23s linear,opacity 0s 5.23s; transition: transform 0s 5.23s linear,opacity 0s 5.23s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(20) { -webkit-transition: -webkit-transform 0s 5.363s linear,opacity 0s 5.363s; -moz-transition: -moz-transform 0s 5.363s linear,opacity 0s 5.363s; -ms-transition: -ms-transform 0s 5.363s linear,opacity 0s 5.363s; -o-transition: -o-transform 0s 5.363s linear,opacity 0s 5.363s; transition: transform 0s 5.363s linear,opacity 0s 5.363s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(21) { -webkit-transition: -webkit-transform 0s 6.23s linear,opacity 0s 6.23s; -moz-transition: -moz-transform 0s 6.23s linear,opacity 0s 6.23s; -ms-transition: -ms-transform 0s 6.23s linear,opacity 0s 6.23s; -o-transition: -o-transform 0s 6.23s linear,opacity 0s 6.23s; transition: transform 0s 6.23s linear,opacity 0s 6.23s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(22) { -webkit-transition: -webkit-transform 0s 6.363s linear,opacity 0s 6.363s; -moz-transition: -moz-transform 0s 6.363s linear,opacity 0s 6.363s; -ms-transition: -ms-transform 0s 6.363s linear,opacity 0s 6.363s; -o-transition: -o-transform 0s 6.363s linear,opacity 0s 6.363s; transition: transform 0s 6.363s linear,opacity 0s 6.363s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(23) { -webkit-transition: -webkit-transform 0s 6.496s linear,opacity 0s 6.496s; -moz-transition: -moz-transform 0s 6.496s linear,opacity 0s 6.496s; -ms-transition: -ms-transform 0s 6.496s linear,opacity 0s 6.496s; -o-transition: -o-transform 0s 6.496s linear,opacity 0s 6.496s; transition: transform 0s 6.496s linear,opacity 0s 6.496s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.onOnce li:nth-child(24) { -webkit-transition: -webkit-transform 0s 6.629s linear,opacity 0s 6.629s; -moz-transition: -moz-transform 0s 6.629s linear,opacity 0s 6.629s; -ms-transition: -ms-transform 0s 6.629s linear,opacity 0s 6.629s; -o-transition: -o-transform 0s 6.629s linear,opacity 0s 6.629s; transition: transform 0s 6.629s linear,opacity 0s 6.629s; opacity: 1; filter: alpha(opacity=100); } #section-4 .inner-cont-wrap .cont-holder .gallery .gallery-box.copy { position: absolute; top: 0; left: 0; } #section-4 .inner-cont-wrap .cont-holder .gallery .fixed-img { position: absolute; left: 0; top: 0; } #section-4 .inner-cont-wrap .cont-holder .txt-box { width: 1180px; margin: 0 auto; } #section-4 .inner-cont-wrap .cont-holder .txt-box .txts { float: right; } #section-4 .inner-cont-wrap .cont-holder .txt-box .txts p { width: 360px; display: block; float: left; } #section-4 .inner-cont-wrap .cont-holder .txt-box .txts p.txt-1 { margin-right: 50px; } #section-5 { height: calc( 100vh - 70px ); } #section-5 .inner-cont-wrap { height: inherit; background-color: #294994; overflow: hidden; } #section-5 .inner-cont-wrap .dim-holder { height: 100%; } #section-5 .inner-cont-wrap .bg-holder { transform: scale(1.15); } #section-5 .inner-cont-wrap .bg-holder .bg { height: inherit; background-image: url("../img/sec5_bg.jpg"); background-size: cover; background-repeat: no-repeat; } #section-5 .inner-cont-wrap .bg-holder.onShow.bg-holder { transform: scale(1); -webkit-transition: transform 2s ease-out; -moz-transition: transform 2s ease-out; -ms-transition: transform 2s ease-out; -o-transition: transform 2s ease-out; transition: transform 2s ease-out; } #section-6 { height: calc( 2061px - 0px ); } #section-6 .inner-cont-wrap { height: calc( 2061px - 0px ); background-color: #fff; } #section-6 .inner-cont-wrap .dim-holder { height: 100%; } #section-6 .inner-cont-wrap .cont-holder .gallery-box { position: relative; width: 1180px; height: 650px; margin: 90px auto 0; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li { overflow: hidden; display: block; position: absolute; left: 0; top: 0; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li .obj { overflow: hidden; position: absolute; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li .bg { overflow: hidden; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(1) { height: 0; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(1) .obj { width: 485px; right: 0; top: 0; height: 0; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(1) .obj img { position: absolute; top: 37px; right: 0; -webkit-transform: translate(-15px, 50px); -moz-transform: translate(-15px, 50px); -ms-transform: translate(-15px, 50px); -o-transform: translate(-15px, 50px); transform: translate(-15px, 50px); } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(1) .bg { height: 0; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(2) { height: 0; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(2) .obj { top: 0; right: 0; width: 722px; height: 0; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(2) .obj img { position: absolute; top: 0; right: 0; -webkit-transform: translateY(40px) scale(1.15); -moz-transform: translateY(40px) scale(1.15); -ms-transform: translateY(40px) scale(1.15); -o-transform: translateY(40px) scale(1.15); transform: translateY(40px) scale(1.15); -webkit-transform-origin: "center top" left; -moz-transform-origin: "center top" left; -ms-transform-origin: "center top" left; -o-transform-origin: "center top" left; transform-origin: "center top" left; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(2) .bg { width: 722px; height: 0; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(3) { width: 0; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(3) .obj { left: 0; bottom: 0; width: 0; height: 337px; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(3) .obj img { position: absolute; bottom: 0; left: 0; -webkit-transform: translate(20px, 40px); -moz-transform: translate(20px, 40px); -ms-transform: translate(20px, 40px); -o-transform: translate(20px, 40px); transform: translate(20px, 40px); } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(3) .bg { width: 0; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(4) { height: 0; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(4) .obj { right: 0; top: 0; height: 0; width: 361px; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(4) .obj img { position: absolute; top: 0; right: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol li:nth-child(4) .bg { height: 0; } #section-6 .inner-cont-wrap .cont-holder .gallery-box ol:after { content: ''; display: block; position: static; width: 1180px; height: 650px; } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li .obj { opacity: 1; filter: alpha(opacity=100); } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(1) { height: 650px; overflow: hidden; } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(1) .obj { height: 650px; -webkit-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005); -moz-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005); -ms-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005); -o-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005); transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005); } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(1) .obj img { -webkit-transform: translate(0px); -moz-transform: translate(0px); -ms-transform: translate(0px); -o-transform: translate(0px); transform: translate(0px); -webkit-transition: transform 0.6s 0.6s ease-out; -moz-transition: transform 0.6s 0.6s ease-out; -ms-transition: transform 0.6s 0.6s ease-out; -o-transition: transform 0.6s 0.6s ease-out; transition: transform 0.6s 0.6s ease-out; } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(1) .bg { height: 650px; -webkit-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005); -moz-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005); -ms-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005); -o-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005); transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005); } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(2) { height: 650px; } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(2) .obj { height: 650px; -webkit-transition: height 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 1.5s; -moz-transition: height 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 1.5s; -ms-transition: height 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 1.5s; -o-transition: height 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 1.5s; transition: height 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 1.5s; } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(2) .obj img { -webkit-transform: translateY(0px) scale(1); -moz-transform: translateY(0px) scale(1); -ms-transform: translateY(0px) scale(1); -o-transform: translateY(0px) scale(1); transform: translateY(0px) scale(1); -webkit-transition: transform 0.7s 2.25s ease-out; -moz-transition: transform 0.7s 2.25s ease-out; -ms-transition: transform 0.7s 2.25s ease-out; -o-transition: transform 0.7s 2.25s ease-out; transition: transform 0.7s 2.25s ease-out; } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(2) .bg { height: 650px; -webkit-transition: height 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 1.5s; -moz-transition: height 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 1.5s; -ms-transition: height 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 1.5s; -o-transition: height 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 1.5s; transition: height 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 1.5s; } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(3) { width: 722px; } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(3) .obj { width: 722px; -webkit-transition: width 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 3s; -moz-transition: width 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 3s; -ms-transition: width 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 3s; -o-transition: width 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 3s; transition: width 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 3s; } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(3) .obj img { -webkit-transform: translate(0px); -moz-transform: translate(0px); -ms-transform: translate(0px); -o-transform: translate(0px); transform: translate(0px); -webkit-transition: transform 0.6s 3.75s ease-out; -moz-transition: transform 0.6s 3.75s ease-out; -ms-transition: transform 0.6s 3.75s ease-out; -o-transition: transform 0.6s 3.75s ease-out; transition: transform 0.6s 3.75s ease-out; } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(3) .bg { width: 722px; -webkit-transition: width 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 3s; -moz-transition: width 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 3s; -ms-transition: width 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 3s; -o-transition: width 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 3s; transition: width 1.5s cubic-bezier(0.725, 0.01, 0.275, 1.005) 3s; } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(4) { height: 387px; } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(4) .obj { height: 387px; -webkit-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005) 4.4s; -moz-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005) 4.4s; -ms-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005) 4.4s; -o-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005) 4.4s; transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005) 4.4s; } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(4) .obj img { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); -webkit-transition: transform 0.5s 5s ease-out; -moz-transition: transform 0.5s 5s ease-out; -ms-transition: transform 0.5s 5s ease-out; -o-transition: transform 0.5s 5s ease-out; transition: transform 0.5s 5s ease-out; } #section-6 .inner-cont-wrap .cont-holder .gallery-box.onShow ol li:nth-child(4) .bg { height: 387px; -webkit-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005) 4.4s; -moz-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005) 4.4s; -ms-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005) 4.4s; -o-transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005) 4.4s; transition: height 1.2s cubic-bezier(0.725, 0.01, 0.275, 1.005) 4.4s; } #section-6 .inner-cont-wrap .cont-holder .des-box { margin-top: 88px; margin-left: 195px; } #section-6 .inner-cont-wrap .cont-holder .des-box ul li { margin-bottom: 30px; } #section-6 .inner-cont-wrap .cont-holder .des-box ul li dl { opacity: 0; filter: alpha(opacity=0); } #section-6 .inner-cont-wrap .cont-holder .des-box ul li dl dt { float: left; margin-right: 50px; width: 165px; } #section-6 .inner-cont-wrap .cont-holder .des-box ul li dl dd { float: left; width: 770px; } #section-6 .inner-cont-wrap .cont-holder .des-box.onShow ul li dl { opacity: 1; filter: alpha(opacity=100); } #section-6 .inner-cont-wrap .cont-holder .des-box.onShow ul li.des-0 dl { -webkit-transition: opacity 0.6s linear 0.4s; -moz-transition: opacity 0.6s linear 0.4s; -ms-transition: opacity 0.6s linear 0.4s; -o-transition: opacity 0.6s linear 0.4s; transition: opacity 0.6s linear 0.4s; } #section-6 .inner-cont-wrap .cont-holder .des-box.onShow ul li.des-1 dl { -webkit-transition: opacity 0.6s linear 1.9s; -moz-transition: opacity 0.6s linear 1.9s; -ms-transition: opacity 0.6s linear 1.9s; -o-transition: opacity 0.6s linear 1.9s; transition: opacity 0.6s linear 1.9s; } #section-6 .inner-cont-wrap .cont-holder .des-box.onShow ul li.des-2 dl { -webkit-transition: opacity 0.6s linear 3.2s; -moz-transition: opacity 0.6s linear 3.2s; -ms-transition: opacity 0.6s linear 3.2s; -o-transition: opacity 0.6s linear 3.2s; transition: opacity 0.6s linear 3.2s; } #section-6 .inner-cont-wrap .cont-holder .des-box.onShow ul li.des-3 dl { -webkit-transition: opacity 0.6s linear 5.1s; -moz-transition: opacity 0.6s linear 5.1s; -ms-transition: opacity 0.6s linear 5.1s; -o-transition: opacity 0.6s linear 5.1s; transition: opacity 0.6s linear 5.1s; } #section-7 { height: calc( 100vh - 70px ); } #section-7 .inner-cont-wrap { height: inherit; background-color: #294994; } #section-7 .inner-cont-wrap .dim-holder { height: 100%; } #section-7 .inner-cont-wrap .bg-holder { background-image: url("../img/sec7_bg.jpg"); background-size: cover; background-repeat: no-repeat; visibility: hidden; } #section-8 { height: calc( 5197px - 0px ); } #section-8 .inner-cont-wrap { height: calc( 5197px - 0px ); background-color: #fff; } #section-8 .inner-cont-wrap .dim-holder { height: 100%; } #section-8 .inner-cont-wrap .cont-holder .sub-title-box { padding-left: 410px; margin-bottom: 91px; } #section-8 .inner-cont-wrap .cont-holder .sub-title-box h5 { float: none; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 { margin-bottom: 162px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .columns-title { position: absolute; top: 119px; right: 72px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .columns-title .title-txt.onShow:before { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.6s 2s ease-out; -moz-transition: opacity 0.6s 2s ease-out; -ms-transition: opacity 0.6s 2s ease-out; -o-transition: opacity 0.6s 2s ease-out; transition: opacity 0.6s 2s ease-out; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .columns-title .title-txt.onShow .title-inner { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.8s 2.3s linear; -moz-transition: opacity 0.8s 2.3s linear; -ms-transition: opacity 0.8s 2.3s linear; -o-transition: opacity 0.8s 2.3s linear; transition: opacity 0.8s 2.3s linear; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .columns-title .title-txt.onShow:after { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.6s 2.6s ease-out; -moz-transition: opacity 0.6s 2.6s ease-out; -ms-transition: opacity 0.6s 2.6s ease-out; -o-transition: opacity 0.6s 2.6s ease-out; transition: opacity 0.6s 2.6s ease-out; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-1 { width: 360px; float: left; margin-right: 50px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-1 .column-title { margin-top: 30px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-1 .column-title .q1 { top: -89px; left: -96px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 { float: left; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj { position: relative; width: 770px; height: 820px; background-image: url("../img/sec8_q1_bg.png"); background-size: 100% auto; background-position: 50% 100%; background-repeat: no-repeat; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .line-list li { position: absolute; width: 0; overflow: hidden; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .line-list li img { position: absolute; left: 0; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .line-list li.line-1 { height: 87px; bottom: 34px; left: 177px; right: auto; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .line-list li.line-2 { height: 66px; bottom: 121px; left: 281px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .line-list li.line-3 { height: 52px; bottom: 176px; left: 363px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .line-list li.line-4 { height: 38px; bottom: 224px; left: 435px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .pen-list li { position: absolute; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .pen-list li > div { position: absolute; opacity: 0; filter: alpha(opacity=0); } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .pen-list li.pen-1 { -webkit-transform: scale(0.5555, 0.5555); -moz-transform: scale(0.5555, 0.5555); -ms-transform: scale(0.5555, 0.5555); -o-transform: scale(0.5555, 0.5555); transform: scale(0.5555, 0.5555); top: -318px; left: 143px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .pen-list li.pen-1 .pen { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .pen-list li.pen-1 .pen-reflect { position: relative; margin-top: 7px; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .pen-list li.pen-2 { top: 44px; left: 266px; width: 33px; height: 679px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .pen-list li.pen-2 .pen { width: 33px; height: 589px; background-image: url("../img/sec8_q1_pen2.png"); background-size: 100%; -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .pen-list li.pen-2 .pen-reflect { bottom: 0; left: 1px; width: 31px; height: 87px; background-image: url("../img/sec8_q1_pen2_reflect.png"); background-size: 100%; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .pen-list li.pen-3 { top: 81px; left: 350px; width: 29px; height: 615px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .pen-list li.pen-3 .pen { width: 29px; height: 512px; background-image: url("../img/sec8_q1_pen3.png"); background-size: 100%; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .pen-list li.pen-3 .pen-reflect { bottom: 0; width: 29px; height: 104px; background-image: url("../img/sec8_q1_pen3_reflect.png"); background-size: 100%; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .pen-list li.pen-4 { top: 113px; left: 423px; width: 26px; height: 525px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .pen-list li.pen-4 .pen { width: 25px; height: 444px; background-image: url("../img/sec8_q1_pen4.png"); background-size: 100%; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj .pen-list li.pen-4 .pen-reflect { bottom: 0; width: 25px; height: 79px; background-image: url("../img/sec8_q1_pen4_reflect.png"); background-size: 100%; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .line-list li.line-1 { width: 593px; -webkit-transition: width 0.6s 0.48s ease-out; -moz-transition: width 0.6s 0.48s ease-out; -ms-transition: width 0.6s 0.48s ease-out; -o-transition: width 0.6s 0.48s ease-out; transition: width 0.6s 0.48s ease-out; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .line-list li.line-1.onOut { width: 0; height: 87px; bottom: 34px; right: 0; left: auto; -webkit-transition: width 0.6s ease-out; -moz-transition: width 0.6s ease-out; -ms-transition: width 0.6s ease-out; -o-transition: width 0.6s ease-out; transition: width 0.6s ease-out; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .line-list li.line-1.onOut img { right: 0; left: auto; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .line-list li.line-2 { width: 489px; -webkit-transition: width 0.5s ease-out 1.384s; -moz-transition: width 0.5s ease-out 1.384s; -ms-transition: width 0.5s ease-out 1.384s; -o-transition: width 0.5s ease-out 1.384s; transition: width 0.5s ease-out 1.384s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .line-list li.line-3 { width: 407px; -webkit-transition: width 0.4s ease-out 1.8872s; -moz-transition: width 0.4s ease-out 1.8872s; -ms-transition: width 0.4s ease-out 1.8872s; -o-transition: width 0.4s ease-out 1.8872s; transition: width 0.4s ease-out 1.8872s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .line-list li.line-4 { width: 335px; -webkit-transition: width 0.3s ease-out 2.26848s; -moz-transition: width 0.3s ease-out 2.26848s; -ms-transition: width 0.3s ease-out 2.26848s; -o-transition: width 0.3s ease-out 2.26848s; transition: width 0.3s ease-out 2.26848s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .pen-list li > div { opacity: 1; filter: alpha(opacity=100); } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .pen-list li.pen-1 .pen { position: relative; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: transform 0.6s ease-out 0s, opacity 0.6s ease-out 0s; -moz-transition: transform 0.6s ease-out 0s, opacity 0.6s ease-out 0s; -ms-transition: transform 0.6s ease-out 0s, opacity 0.6s ease-out 0s; -o-transition: transform 0.6s ease-out 0s, opacity 0.6s ease-out 0s; transition: transform 0.6s ease-out 0s, opacity 0.6s ease-out 0s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .pen-list li.pen-1 .pen-reflect { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: transform 0.6s ease-out 0s, opacity 0.6s ease-out 0s; -moz-transition: transform 0.6s ease-out 0s, opacity 0.6s ease-out 0s; -ms-transition: transform 0.6s ease-out 0s, opacity 0.6s ease-out 0s; -o-transition: transform 0.6s ease-out 0s, opacity 0.6s ease-out 0s; transition: transform 0.6s ease-out 0s, opacity 0.6s ease-out 0s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .pen-list li.pen-1 .pen-reflect img { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.05s ease-out 0s; -moz-transition: opacity 0.05s ease-out 0s; -ms-transition: opacity 0.05s ease-out 0s; -o-transition: opacity 0.05s ease-out 0s; transition: opacity 0.05s ease-out 0s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .pen-list li.pen-1 .pen-reflect img.onOut { opacity: 0; filter: alpha(opacity=0); } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .pen-list li.pen-1.onTrans { position: fixed; top: 50%; /*margin-top: -673.5px*/ margin-top: -721.7px; left: 50%; margin-left: -37px; z-index: 1; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .pen-list li.pen-2 .pen { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: transform 0.5s ease-out 0.98s, opacity 0.55s ease-out 0.98s; -moz-transition: transform 0.5s ease-out 0.98s, opacity 0.55s ease-out 0.98s; -ms-transition: transform 0.5s ease-out 0.98s, opacity 0.55s ease-out 0.98s; -o-transition: transform 0.5s ease-out 0.98s, opacity 0.55s ease-out 0.98s; transition: transform 0.5s ease-out 0.98s, opacity 0.55s ease-out 0.98s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .pen-list li.pen-2 .pen-reflect { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: transform 0.5s ease-out 0.98s, opacity 0.5s ease-out 0.98s; -moz-transition: transform 0.5s ease-out 0.98s, opacity 0.5s ease-out 0.98s; -ms-transition: transform 0.5s ease-out 0.98s, opacity 0.5s ease-out 0.98s; -o-transition: transform 0.5s ease-out 0.98s, opacity 0.5s ease-out 0.98s; transition: transform 0.5s ease-out 0.98s, opacity 0.5s ease-out 0.98s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .pen-list li.pen-3 .pen { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: transform 0.4s ease-out 1.584s, opacity 0.5s ease-out 1.584s; -moz-transition: transform 0.4s ease-out 1.584s, opacity 0.5s ease-out 1.584s; -ms-transition: transform 0.4s ease-out 1.584s, opacity 0.5s ease-out 1.584s; -o-transition: transform 0.4s ease-out 1.584s, opacity 0.5s ease-out 1.584s; transition: transform 0.4s ease-out 1.584s, opacity 0.5s ease-out 1.584s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .pen-list li.pen-3 .pen-reflect { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: transform 0.4s ease-out 1.584s, opacity 0.4s ease-out 1.584s; -moz-transition: transform 0.4s ease-out 1.584s, opacity 0.4s ease-out 1.584s; -ms-transition: transform 0.4s ease-out 1.584s, opacity 0.4s ease-out 1.584s; -o-transition: transform 0.4s ease-out 1.584s, opacity 0.4s ease-out 1.584s; transition: transform 0.4s ease-out 1.584s, opacity 0.4s ease-out 1.584s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .pen-list li.pen-4 .pen { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: transform 0.3s ease-out 1.8872s, opacity 0.45s ease-out 1.8872s; -moz-transition: transform 0.3s ease-out 1.8872s, opacity 0.45s ease-out 1.8872s; -ms-transition: transform 0.3s ease-out 1.8872s, opacity 0.45s ease-out 1.8872s; -o-transition: transform 0.3s ease-out 1.8872s, opacity 0.45s ease-out 1.8872s; transition: transform 0.3s ease-out 1.8872s, opacity 0.45s ease-out 1.8872s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-1 .column-2 .column-obj.onShow .pen-list li.pen-4 .pen-reflect { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: transform 0.3s ease-out 1.8872s, opacity 0.3s ease-out 1.8872s; -moz-transition: transform 0.3s ease-out 1.8872s, opacity 0.3s ease-out 1.8872s; -ms-transition: transform 0.3s ease-out 1.8872s, opacity 0.3s ease-out 1.8872s; -o-transition: transform 0.3s ease-out 1.8872s, opacity 0.3s ease-out 1.8872s; transition: transform 0.3s ease-out 1.8872s, opacity 0.3s ease-out 1.8872s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 { padding-left: 410px; margin-bottom: 229px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .columns-title { position: absolute; top: 74px; left: 32px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .columns-title .title-txt.onShow:before { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.6s 0.5s ease-out; -moz-transition: opacity 0.6s 0.5s ease-out; -ms-transition: opacity 0.6s 0.5s ease-out; -o-transition: opacity 0.6s 0.5s ease-out; transition: opacity 0.6s 0.5s ease-out; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .columns-title .title-txt.onShow .title-inner { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.8s 0.8s linear; -moz-transition: opacity 0.8s 0.8s linear; -ms-transition: opacity 0.8s 0.8s linear; -o-transition: opacity 0.8s 0.8s linear; transition: opacity 0.8s 0.8s linear; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .columns-title .title-txt.onShow:after { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.6s 1.1s ease-out; -moz-transition: opacity 0.6s 1.1s ease-out; -ms-transition: opacity 0.6s 1.1s ease-out; -o-transition: opacity 0.6s 1.1s ease-out; transition: opacity 0.6s 1.1s ease-out; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 { float: left; margin-right: 50px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-title { margin-top: 76px; z-index: 10; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-title .q2 { top: -89px; left: -92px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-content { position: relative; z-index: 10; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-obj { overflow: hidden; position: relative; margin-top: 80px; margin-left: -411px; width: 770px; height: 461px; background-image: url("../img/sec8_q2_bg.jpg"); background-size: 100%; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-obj .camera { overflow: hidden; position: absolute; top: 29px; right: 0; width: 712px; height: 393px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-obj .camera img { position: absolute; top: 0; right: 0; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-obj .phone { overflow: hidden; position: absolute; top: 29px; right: 0; width: 712px; height: 393px; background-image: url("../img/sec8_q2_phone.png"); background-size: 100%; opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-obj .mask { position: absolute; top: 43px; /*left: 152px;width: 466px;*/ right: 0; width: 668px; height: 366px; background-color: #000; opacity: 0; filter: alpha(opacity=0); } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-obj .mask.onShutterFlicked { -webkit-animation: onShutterFlicked 0.35s steps(1) 0.8s; -moz-animation: onShutterFlicked 0.35s steps(1) 0.8s; -ms-animation: onShutterFlicked 0.35s steps(1) 0.8s; -o-animation: onShutterFlicked 0.35s steps(1) 0.8s; animation: onShutterFlicked 0.35s steps(1) 0.8s; } @keyframes onShutterFlicked { 0% { opacity: 0; filter: alpha(opacity=0); } 14% { opacity: 0.85; filter: alpha(opacity=85); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 86% { opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-obj .mask.onShow { opacity: 0.85; filter: alpha(opacity=85); -webkit-transition: opacity 0.05s 0.5s; -moz-transition: opacity 0.05s 0.5s; -ms-transition: opacity 0.05s 0.5s; -o-transition: opacity 0.05s 0.5s; transition: opacity 0.05s 0.5s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-obj .mask.onHide { opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.3s linear 0s; -moz-transition: opacity 0.3s linear 0s; -ms-transition: opacity 0.3s linear 0s; -o-transition: opacity 0.3s linear 0s; transition: opacity 0.3s linear 0s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-obj .pen { position: absolute; left: 547px; width: 91px; height: 461px; background-image: url("../img/sec8_q2_pen.png"); background-size: 100%; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-obj.onShow .camera { width: 712px; -webkit-transition: width 1.5s cubic-bezier(0.57, 0, 0.3, 0.99) 0.4s; -moz-transition: width 1.5s cubic-bezier(0.57, 0, 0.3, 0.99) 0.4s; -ms-transition: width 1.5s cubic-bezier(0.57, 0, 0.3, 0.99) 0.4s; -o-transition: width 1.5s cubic-bezier(0.57, 0, 0.3, 0.99) 0.4s; transition: width 1.5s cubic-bezier(0.57, 0, 0.3, 0.99) 0.4s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-obj.onShow .phone { -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); -webkit-transition: transform 1.5s cubic-bezier(0.57, 0, 0.3, 0.99) 0.4s, opacity 0.7s linear 0.4s; -moz-transition: transform 1.5s cubic-bezier(0.57, 0, 0.3, 0.99) 0.4s, opacity 0.7s linear 0.4s; -ms-transition: transform 1.5s cubic-bezier(0.57, 0, 0.3, 0.99) 0.4s, opacity 0.7s linear 0.4s; -o-transition: transform 1.5s cubic-bezier(0.57, 0, 0.3, 0.99) 0.4s, opacity 0.7s linear 0.4s; transition: transform 1.5s cubic-bezier(0.57, 0, 0.3, 0.99) 0.4s, opacity 0.7s linear 0.4s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-1 .column-obj.onShow .pen { opacity: 1; filter: alpha(opacity=100); -webkit-transition: transform 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.75s, opacity 0.5s ease-out 1.75s; -moz-transition: transform 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.75s, opacity 0.5s ease-out 1.75s; -ms-transition: transform 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.75s, opacity 0.5s ease-out 1.75s; -o-transition: transform 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.75s, opacity 0.5s ease-out 1.75s; transition: transform 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.75s, opacity 0.5s ease-out 1.75s; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-2 { padding-top: 73px; float: left; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-2 .column-content p { margin-bottom: 14px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-2 .column-content em { position: relative; left: 16px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-2 .column-2 .column-content em i { margin-left: -16px; margin-right: 8px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 { margin-bottom: 190px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .columns-title { position: absolute; top: 14px; right: 39px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .columns-title .title-txt.onShow:before { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.6s 0.5s ease-out; -moz-transition: opacity 0.6s 0.5s ease-out; -ms-transition: opacity 0.6s 0.5s ease-out; -o-transition: opacity 0.6s 0.5s ease-out; transition: opacity 0.6s 0.5s ease-out; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .columns-title .title-txt.onShow .title-inner { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.8s 0.8s linear; -moz-transition: opacity 0.8s 0.8s linear; -ms-transition: opacity 0.8s 0.8s linear; -o-transition: opacity 0.8s 0.8s linear; transition: opacity 0.8s 0.8s linear; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .columns-title .title-txt.onShow:after { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.6s 1.1s ease-out; -moz-transition: opacity 0.6s 1.1s ease-out; -ms-transition: opacity 0.6s 1.1s ease-out; -o-transition: opacity 0.6s 1.1s ease-out; transition: opacity 0.6s 1.1s ease-out; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-1 { float: left; margin-right: 40px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-1 .column-title { margin-top: 111px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-1 .column-title .q3 { top: -88px; left: -94px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-1 .column-obj { position: absolute; bottom: 0; left: 0; width: 770px; height: 460px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-2 { padding-top: 320px; float: left; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-2 .column-obj { position: relative; width: 770px; height: 500px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-2 .column-obj .pen-clip { position: absolute; top: -422px; left: 139px; width: 82px; height: 734px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-2 .column-obj .pen-clip .pen { position: absolute; width: 82px; height: 636px; background-image: url("../img/sec8_q3_pen.png"); background-size: 100%; background-repeat: no-repeat; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-2 .column-obj .pen-clip .pen-reflect { position: absolute; bottom: 0; left: 24px; width: 34px; height: 109px; background-image: url("../img/sec8_q3_pen_reflect.png"); background-size: 100%; background-repeat: no-repeat; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-2 .column-obj .pen-clip.onShow .pen, #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-2 .column-obj .pen-clip.onShow .pen-reflect { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: transform 0.6s ease-out, opacity 0.4s ease-out; -moz-transition: transform 0.6s ease-out, opacity 0.4s ease-out; -ms-transition: transform 0.6s ease-out, opacity 0.4s ease-out; -o-transition: transform 0.6s ease-out, opacity 0.4s ease-out; transition: transform 0.6s ease-out, opacity 0.4s ease-out; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-2 .column-obj .video-bg-clip { display: none; width: 773px; height: 500px; background-image: url("../img/sec8_vid_thum.jpg"); } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-2 .column-obj .video-bg-clip.onShow { display: block; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-2 .column-obj .video-clip { display: block; width: 773px; height: 500px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-2 .column-obj .video-clip.onHide { display: none; } #section-8 .inner-cont-wrap .cont-holder .columns-box-3 .column-2 .column-obj .video-clip iframe { width: 773px; height: 500px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 { overflow: visible; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-obj { position: relative; width: 1920px; height: 758px; margin-left: -372px; background-image: url("../img/sec8_q4_bg.png"); background-size: 100%; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-obj .box-list li { position: absolute; 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); } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-obj .box-list li.box-1 { top: 169px; left: 315px; /*@include transform-origin(150%,30%); @include transform(scale(0.98));*/ } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-obj .box-list li.box-2 { top: 104px; left: 455px; /*@include transform-origin(160%,33%); @include transform(scale(0.96));*/ } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-obj .box-list li.box-3 { left: 780px; /*left: 795px;*/ /*@include transform-origin(50%,52%); @include transform(scale(1));*/ z-index: 10; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-obj .box-list li.box-4 { top: 86px; left: 1234px; /*@include transform-origin(-150%,33%); @include transform(scale(0.96));*/ } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-obj.onShow .box-list li { 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); } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-obj.onShow .box-list li.box-1 { -webkit-transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; -moz-transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; -ms-transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; -o-transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-obj.onShow .box-list li.box-2 { -webkit-transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; -moz-transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; -ms-transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; -o-transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-obj.onShow .box-list li.box-3 { -webkit-transition: transform 1.1s ease-out, opacity 0.3s linear; -moz-transition: transform 1.1s ease-out, opacity 0.3s linear; -ms-transition: transform 1.1s ease-out, opacity 0.3s linear; -o-transition: transform 1.1s ease-out, opacity 0.3s linear; transition: transform 1.1s ease-out, opacity 0.3s linear; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-obj.onShow .box-list li.box-4 { -webkit-transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; -moz-transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; -ms-transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; -o-transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; transition: transform 0.7s ease-out 0.3s, opacity 0.3s linear 0.3s; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .columns-title { margin-top: 76px; margin-left: 24px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .columns-title .title-txt { line-height: 50px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .columns-title .title-txt:after { bottom: -56px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .columns-title .title-txt.onShow:before { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.6s 0.5s ease-out; -moz-transition: opacity 0.6s 0.5s ease-out; -ms-transition: opacity 0.6s 0.5s ease-out; -o-transition: opacity 0.6s 0.5s ease-out; transition: opacity 0.6s 0.5s ease-out; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .columns-title .title-txt.onShow .title-inner { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.8s 0.8s linear; -moz-transition: opacity 0.8s 0.8s linear; -ms-transition: opacity 0.8s 0.8s linear; -o-transition: opacity 0.8s 0.8s linear; transition: opacity 0.8s 0.8s linear; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .columns-title .title-txt.onShow:after { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.6s 1.1s ease-out; -moz-transition: opacity 0.6s 1.1s ease-out; -ms-transition: opacity 0.6s 1.1s ease-out; -o-transition: opacity 0.6s 1.1s ease-out; transition: opacity 0.6s 1.1s ease-out; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-1 { float: left; padding-left: 398px; width: 770px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-1 .column-title { margin-top: 78px; margin-bottom: 15px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-1 .column-title .q4 { top: -88px; left: -90px; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-2 { padding-top: 389px; float: left; } #section-8 .inner-cont-wrap .cont-holder .columns-box-4 .column-2 .column-obj { width: 770px; height: 500px; } #section-9 .inner-cont-wrap { height: calc( 100vh - 70px ); background-color: #294994; overflow: hidden; } #section-9 .inner-cont-wrap .dim-holder { height: 100%; } #section-9 .inner-cont-wrap .bg-holder { background-image: url("../img/sec9_bg.jpg"); background-size: cover; background-repeat: no-repeat; } #section-9 .inner-cont-wrap .cont-holder { height: inherit; } #section-9 .inner-cont-wrap .cont-holder .title-box h1 { padding-bottom: 46px; } #section-9 .inner-cont-wrap .cont-holder .title-box span { display: block; width: 0; height: 13px; position: relative; left: 226px; top: 0; overflow: hidden; opacity: 0; filter: alpha(opacity=0); } #section-9 .inner-cont-wrap .cont-holder .title-box span img { width: 729px; height: 13px; vertical-align: top; } #section-9 .inner-cont-wrap .cont-holder .title-box.onShow span { width: 729px; -webkit-transition: width 1.6s cubic-bezier(0.000, 0.075, 0.500, 0.995) 0.2s, opacity 1s linear; -moz-transition: width 1.6s cubic-bezier(0.000, 0.075, 0.500, 0.995) 0.2s, opacity 1s linear; -ms-transition: width 1.6s cubic-bezier(0.000, 0.075, 0.500, 0.995) 0.2s, opacity 1s linear; -o-transition: width 1.6s cubic-bezier(0.000, 0.075, 0.500, 0.995) 0.2s, opacity 1s linear; transition: width 1.6s cubic-bezier(0.000, 0.075, 0.500, 0.995) 0.2s, opacity 1s linear; opacity: 1; filter: alpha(opacity=100); } #section-9 .inner-cont-wrap .cont-holder .obj-box { position: absolute; width: 100%; height: inherit; left: 0; top: 0; } #section-9 .inner-cont-wrap .cont-holder .obj-box .pen { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-60%, -94%) rotate(-14deg); -moz-transform: translate(-60%, -94%) rotate(-14deg); -ms-transform: translate(-60%, -94%) rotate(-14deg); -o-transform: translate(-60%, -94%) rotate(-14deg); transform: translate(-60%, -94%) rotate(-14deg); margin-left: 357px; -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; opacity: 0; filter: alpha(opacity=0); } #section-9 .inner-cont-wrap .cont-holder .obj-box .pen .pen-ref { position: absolute; left: -678px; bottom: -635px; } #section-9 .inner-cont-wrap .cont-holder .obj-box.onTrans .pen { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(0, -94%) rotate(0deg); -moz-transform: translate(0, -94%) rotate(0deg); -ms-transform: translate(0, -94%) rotate(0deg); -o-transform: translate(0, -94%) rotate(0deg); transform: translate(0, -94%) rotate(0deg); -webkit-transition: transform 1.6s cubic-bezier(0.000, 0.075, 0.500, 0.995) 0.2s, opacity 0.6s; -moz-transition: transform 1.6s cubic-bezier(0.000, 0.075, 0.500, 0.995) 0.2s, opacity 0.6s; -ms-transition: transform 1.6s cubic-bezier(0.000, 0.075, 0.500, 0.995) 0.2s, opacity 0.6s; -o-transition: transform 1.6s cubic-bezier(0.000, 0.075, 0.500, 0.995) 0.2s, opacity 0.6s; transition: transform 1.6s cubic-bezier(0.000, 0.075, 0.500, 0.995) 0.2s, opacity 0.6s; } #section-10 { height: calc( 4524px - 0px ); } #section-10 .inner-cont-wrap { height: calc( 4524px - 0px ); background-color: #fff; } #section-10 .inner-cont-wrap .dim-holder { height: 100%; } #section-10 .inner-cont-wrap .cont-holder { width: 1180px; } #section-10 .inner-cont-wrap .cont-holder .sub-title-box { margin: 0; } #section-10 .inner-cont-wrap .cont-holder .oval { stroke-dashoffset: 2793.95px; stroke-dasharray: 2193.95px; } #section-10 .inner-cont-wrap .cont-holder .oval.onSvgShow { stroke-dashoffset: 0px; -webkit-transition: stroke-dashoffset 1.6s linear; -moz-transition: stroke-dashoffset 1.6s linear; -ms-transition: stroke-dashoffset 1.6s linear; -o-transition: stroke-dashoffset 1.6s linear; transition: stroke-dashoffset 1.6s linear; } #section-10 .inner-cont-wrap .cont-holder ul { position: relative; width: 1240px; } #section-10 .inner-cont-wrap .cont-holder ul li figure { position: relative; margin-top: 140px; margin-left: 0; } #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box { position: relative; float: right; width: 358px; height: 764px; } #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box .fill { opacity: 0; filter: alpha(opacity=0); } #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box .fill img { width: 101%; } #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box .fill, #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box .line { position: absolute; left: 0; top: 0; width: 358px; height: 764px; } #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box .fill svg, #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box .line svg { width: 101%; height: 772px; } #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box .ph-0 { position: absolute; left: 0; top: 0; opacity: 0; filter: alpha(opacity=0); } #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box .ph-0 > div { position: absolute; top: 0; left: 0; } #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box .ph-0 .back { position: absolute; top: 0; left: 0; } #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box .ph-0 .display-list li { position: absolute; top: 0; left: 0; opacity: 0; filter: alpha(opacity=0); } #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box .ph-0 .display-list li.on { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.25s 0.45s linear; -moz-transition: opacity 0.25s 0.45s linear; -ms-transition: opacity 0.25s 0.45s linear; -o-transition: opacity 0.25s 0.45s linear; transition: opacity 0.25s 0.45s linear; } #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box .ph-0 .display-list .display-1 { left: 12px; top: 40px; } #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box .ph-0 .display-list .display-1 img { position: absolute; left: -8px; top: -5px; } #section-10 .inner-cont-wrap .cont-holder ul li figure .drawing-box .ph-0 .display-list .display-2 { left: 12px; top: 38px; } #section-10 .inner-cont-wrap .cont-holder ul li figure.onShow .drawing-box { -webkit-transition: transform 1.6s ease-out,opacity 1s 0.3s linear; -moz-transition: transform 1.6s ease-out,opacity 1s 0.3s linear; -ms-transition: transform 1.6s ease-out,opacity 1s 0.3s linear; -o-transition: transform 1.6s ease-out,opacity 1s 0.3s linear; transition: transform 1.6s ease-out,opacity 1s 0.3s linear; } #section-10 .inner-cont-wrap .cont-holder ul li figure.onShow .fill { -webkit-transform: translate(10px, -10px); -moz-transform: translate(10px, -10px); -ms-transform: translate(10px, -10px); -o-transform: translate(10px, -10px); transform: translate(10px, -10px); opacity: 1; filter: alpha(opacity=100); } #section-10 .inner-cont-wrap .cont-holder ul li figure.onShow .line { -webkit-transform: translate(10px, -10px); -moz-transform: translate(10px, -10px); -ms-transform: translate(10px, -10px); -o-transform: translate(10px, -10px); transform: translate(10px, -10px); } #section-10 .inner-cont-wrap .cont-holder ul li figure.onShow .ph-0 { -webkit-transform: translate(-10px, 10px); -moz-transform: translate(-10px, 10px); -ms-transform: translate(-10px, 10px); -o-transform: translate(-10px, 10px); transform: translate(-10px, 10px); opacity: 1; filter: alpha(opacity=100); } #section-10 .inner-cont-wrap .cont-holder ul li figure.onShow .ph-0 .display-list { width: auto; } #section-10 .inner-cont-wrap .cont-holder ul li figure.onShow .fill, #section-10 .inner-cont-wrap .cont-holder ul li figure.onShow .line { -webkit-transition: transform ease-out 0.65s 1.65s, opacity ease-in-out 0.3s 1.65s; -moz-transition: transform ease-out 0.65s 1.65s, opacity ease-in-out 0.3s 1.65s; -ms-transition: transform ease-out 0.65s 1.65s, opacity ease-in-out 0.3s 1.65s; -o-transition: transform ease-out 0.65s 1.65s, opacity ease-in-out 0.3s 1.65s; transition: transform ease-out 0.65s 1.65s, opacity ease-in-out 0.3s 1.65s; } #section-10 .inner-cont-wrap .cont-holder ul li figure.onShow .fill.onHide, #section-10 .inner-cont-wrap .cont-holder ul li figure.onShow .line.onHide { visibility: hidden; } #section-10 .inner-cont-wrap .cont-holder ul li figure.onShow .ph-0 { -webkit-transition: transform ease-out 0.65s 1.6s, opacity ease-in-out 0.3s 1.6s; -moz-transition: transform ease-out 0.65s 1.6s, opacity ease-in-out 0.3s 1.6s; -ms-transition: transform ease-out 0.65s 1.6s, opacity ease-in-out 0.3s 1.6s; -o-transition: transform ease-out 0.65s 1.6s, opacity ease-in-out 0.3s 1.6s; transition: transform ease-out 0.65s 1.6s, opacity ease-in-out 0.3s 1.6s; } #section-10 .inner-cont-wrap .cont-holder ul li figure figcaption { display: block; position: absolute; top: 230px; } #section-10 .inner-cont-wrap .cont-holder ul li figure figcaption h3 { margin-bottom: 36px; } #section-10 .inner-cont-wrap .cont-holder ul li figure figcaption p { width: 774px; height: 215px; display: block; float: left; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 50px; -webkit-column-gap: 50px; column-gap: 50px; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(1) figure { margin-top: 256px; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(1) figure .drawing-box { right: 51px; top: -158px; -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); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(1) figure .drawing-box .pen { position: absolute; right: -158px; bottom: -52px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translate(25px, 40px); -moz-transform: translate(25px, 40px); -ms-transform: translate(25px, 40px); -o-transform: translate(25px, 40px); transform: translate(25px, 40px); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(1) figure .drawing-box .pen.onTrans { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.2s,transform 0.35s cubic-bezier(0.250, 0.460, 0.450, 0.940); -moz-transition: opacity 0.2s,transform 0.35s cubic-bezier(0.250, 0.460, 0.450, 0.940); -ms-transition: opacity 0.2s,transform 0.35s cubic-bezier(0.250, 0.460, 0.450, 0.940); -o-transition: opacity 0.2s,transform 0.35s cubic-bezier(0.250, 0.460, 0.450, 0.940); transition: opacity 0.2s,transform 0.35s cubic-bezier(0.250, 0.460, 0.450, 0.940); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(1) figure .drawing-box .ph-0 .display-list .display-1 { left: 8px; top: 36px; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(1) figure.onShow .drawing-box { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(2).al-l figure { margin-top: 13px; left: -8px; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(2).al-l figure .drawing-box { -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); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(2).al-l figure .drawing-box .ph-0 .video-clip { top: 104px; left: 28px; width: 307px; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(2).al-l figure .drawing-box .ph-0 .video-clip video { width: 100%; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(2).al-l figure .back { top: 106px; left: 22px; width: 322px; height: 483px; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(2).al-l figure.onShow .fill { -webkit-transform: translate(-10px, 10px); -moz-transform: translate(-10px, 10px); -ms-transform: translate(-10px, 10px); -o-transform: translate(-10px, 10px); transform: translate(-10px, 10px); opacity: 1; filter: alpha(opacity=100); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(2).al-l figure.onShow .line { -webkit-transform: translate(-10px, 10px); -moz-transform: translate(-10px, 10px); -ms-transform: translate(-10px, 10px); -o-transform: translate(-10px, 10px); transform: translate(-10px, 10px); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(2).al-l figure.onShow .ph-0 { -webkit-transform: translate(10px, -10px); -moz-transform: translate(10px, -10px); -ms-transform: translate(10px, -10px); -o-transform: translate(10px, -10px); transform: translate(10px, -10px); opacity: 1; filter: alpha(opacity=100); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(2).al-l figure.onShow .drawing-box { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(2).al-l figcaption { left: auto; right: 50px; top: 338px; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(2).al-l figcaption p { height: 250px; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(3) figure { margin-top: 167px; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(3) figure .drawing-box { right: 48px; -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); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(3) figure .drawing-box .ph-0 .display-list .display-1 { position: relative; width: 338px; height: 695px; opacity: 1; filter: alpha(opacity=100); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(3) figure .drawing-box .ph-0 .display-list .display-1 img { left: 0; top: 0; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(3) figure .drawing-box .ph-0 .back { top: 40px; left: 12px; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(3) figure.onShow .fill { -webkit-transform: translate(10px, 10px); -moz-transform: translate(10px, 10px); -ms-transform: translate(10px, 10px); -o-transform: translate(10px, 10px); transform: translate(10px, 10px); opacity: 1; filter: alpha(opacity=100); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(3) figure.onShow .line { -webkit-transform: translate(10px, 10px); -moz-transform: translate(10px, 10px); -ms-transform: translate(10px, 10px); -o-transform: translate(10px, 10px); transform: translate(10px, 10px); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(3) figure.onShow .ph-0 { -webkit-transform: translate(-10px, -10px); -moz-transform: translate(-10px, -10px); -ms-transform: translate(-10px, -10px); -o-transform: translate(-10px, -10px); transform: translate(-10px, -10px); opacity: 1; filter: alpha(opacity=100); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(3) figure.onShow .drawing-box { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(3) figure figcaption { top: 298px; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(3) p { height: 255px; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(4) figure { margin-top: 162px; left: -6px; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(4) figure .drawing-box { -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); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(4) figure .ph-0 .display { left: 12px; top: 40px; } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(4) figure.onShow .fill { -webkit-transform: translate(-10px, -10px); -moz-transform: translate(-10px, -10px); -ms-transform: translate(-10px, -10px); -o-transform: translate(-10px, -10px); transform: translate(-10px, -10px); opacity: 1; filter: alpha(opacity=100); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(4) figure.onShow .line { -webkit-transform: translate(-10px, -10px); -moz-transform: translate(-10px, -10px); -ms-transform: translate(-10px, -10px); -o-transform: translate(-10px, -10px); transform: translate(-10px, -10px); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(4) figure.onShow .ph-0 { -webkit-transform: translate(10px, 10px); -moz-transform: translate(10px, 10px); -ms-transform: translate(10px, 10px); -o-transform: translate(10px, 10px); transform: translate(10px, 10px); opacity: 1; filter: alpha(opacity=100); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(4) figure.onShow .drawing-box { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } #section-10 .inner-cont-wrap .cont-holder ul li:nth-child(4) figure figcaption { top: 496px; right: 50px; } #section-10 .inner-cont-wrap .cont-holder ul li.al-l figure .drawing-box { float: left; } #section-10 .inner-cont-wrap .cont-holder ul li.al-l figcaption { left: auto; right: 0; } #section-11 { height: calc( 100vh - 70px ); } #section-11 .inner-cont-wrap { height: calc( 100vh - 70px ); background-color: #294994; } #section-11 .inner-cont-wrap .dim-holder { height: 100%; } #section-11 .inner-cont-wrap .bg-holder { background-image: url("../img/sec11_bg.jpg"); background-size: cover; background-repeat: no-repeat; background-position-y: center; } #section-12 { height: calc( 4070px ); } #section-12 .inner-cont-wrap { height: calc( 4070px ); background-color: #fff; } #section-12 .inner-cont-wrap .dim-holder { height: 100%; } #section-12 .inner-cont-wrap .cont-holder .sub-title-box { margin-left: 410px; } #section-12 .inner-cont-wrap .cont-holder .sub-title-box h5 { float: none; } #section-12 .inner-cont-wrap .cont-holder .obj-box { margin-left: 415px; margin-top: 143px; } #section-12 .inner-cont-wrap .cont-holder .obj-box .ph-0 { width: 992px; height: 993px; overflow: hidden; background-image: url("../img/sec12_thumb0_bg.jpg"); background-repeat: no-repeat; } #section-12 .inner-cont-wrap .cont-holder .obj-box .ph-0 .ph-0-obj { display: block; -webkit-transform: translateY(300px); -moz-transform: translateY(300px); -ms-transform: translateY(300px); -o-transform: translateY(300px); transform: translateY(300px); opacity: 0; filter: alpha(opacity=0); } #section-12 .inner-cont-wrap .cont-holder .obj-box .ph-0 img { display: block; } #section-12 .inner-cont-wrap .cont-holder .obj-box .ph-0.onTrans .ph-0-obj { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: transform 1.5s cubic-bezier(0.000, 0.000, 0.405, 1.000), opacity 0.8s ease-out; -moz-transition: transform 1.5s cubic-bezier(0.000, 0.000, 0.405, 1.000), opacity 0.8s ease-out; -ms-transition: transform 1.5s cubic-bezier(0.000, 0.000, 0.405, 1.000), opacity 0.8s ease-out; -o-transition: transform 1.5s cubic-bezier(0.000, 0.000, 0.405, 1.000), opacity 0.8s ease-out; transition: transform 1.5s cubic-bezier(0.000, 0.000, 0.405, 1.000), opacity 0.8s ease-out; } #section-12 .inner-cont-wrap .cont-holder .obj-box .obj-pod .ph-1 { position: relative; width: 681px; height: 1169px; overflow: hidden; margin-left: -780px; margin-top: -366px; background-image: url("../img/sec12_thumb1_bg.png"); background-repeat: no-repeat; } #section-12 .inner-cont-wrap .cont-holder .obj-box .obj-pod .ph-1 .ph-1-obj { display: block; -webkit-transform: translate(60px, 120px); -moz-transform: translate(60px, 120px); -ms-transform: translate(60px, 120px); -o-transform: translate(60px, 120px); transform: translate(60px, 120px); opacity: 0; filter: alpha(opacity=0); } #section-12 .inner-cont-wrap .cont-holder .obj-box .obj-pod .ph-1 .ph-1-obj img { display: block; } #section-12 .inner-cont-wrap .cont-holder .obj-box .obj-pod .ph-1 .ph-shadow { position: absolute; top: 0; left: 0; } #section-12 .inner-cont-wrap .cont-holder .obj-box .obj-pod .ph-1.onTrans .ph-1-obj { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0); -webkit-transition: transform 1.5s cubic-bezier(0.000, 0.000, 0.405, 1.000), opacity 0.8s ease-out; -moz-transition: transform 1.5s cubic-bezier(0.000, 0.000, 0.405, 1.000), opacity 0.8s ease-out; -ms-transition: transform 1.5s cubic-bezier(0.000, 0.000, 0.405, 1.000), opacity 0.8s ease-out; -o-transition: transform 1.5s cubic-bezier(0.000, 0.000, 0.405, 1.000), opacity 0.8s ease-out; transition: transform 1.5s cubic-bezier(0.000, 0.000, 0.405, 1.000), opacity 0.8s ease-out; } #section-12 .inner-cont-wrap .cont-holder .obj-box .txt-pod { overflow: hidden; } #section-12 .inner-cont-wrap .cont-holder .obj-box .txt-pod h4 { float: left; width: 360px; margin-right: 40px; } #section-12 .inner-cont-wrap .cont-holder .obj-box .txt-pod .txt { float: right; width: 360px; text-align: justify; } #section-12 .inner-cont-wrap .cont-holder .obj-box .txt-pod .txt p { margin-top: 10px; text-align: justify; } #section-12 .inner-cont-wrap .cont-holder .obj-box .txt-pod .txt .txt-2 { position: relative; top: -75px; } #section-12 .inner-cont-wrap .cont-holder .obj-box .txt-pod-1 { margin: -711px 0 55px 0; } #section-12 .inner-cont-wrap .cont-holder .canvas-box { position: relative; width: 1551px; height: 861px; margin-top: -213px; margin-left: -95px; } #section-12 .inner-cont-wrap .cont-holder .canvas-box canvas { position: absolute; left: 293px; top: auto; bottom: -382px; -webkit-transform: translateY(150px); -moz-transform: translateY(150px); -ms-transform: translateY(150px); -o-transform: translateY(150px); transform: translateY(150px); } #section-12 .inner-cont-wrap .cont-holder .canvas-box .ph { position: absolute; left: 146px; top: auto; bottom: -294px; -webkit-transform: translateY(150px); -moz-transform: translateY(150px); -ms-transform: translateY(150px); -o-transform: translateY(150px); transform: translateY(150px); } #section-12 .inner-cont-wrap .cont-holder .canvas-box .bg { position: absolute; left: 98px; top: 297px; width: inherit; height: inherit; background-image: url("../img/sec12_thumb2_bg.jpg"); background-repeat: no-repeat; } #section-12 .inner-cont-wrap .cont-holder .canvas-box .bg .move-bg { position: absolute; top: 0; left: 0; width: inherit; height: inherit; background-image: url("../img/sec12_move_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position-x: 0; } #section-12 .inner-cont-wrap .cont-holder .txt-box { margin: 224px 0px 0 416px; overflow: hidden; } #section-12 .inner-cont-wrap .cont-holder .txt-box h4 { float: left; width: 360px; padding-bottom: 13px; margin-right: 44px; } #section-12 .inner-cont-wrap .cont-holder .txt-box .txt { float: left; width: 360px; text-align: justify; } #section-12 .inner-cont-wrap .cont-holder .txt-box .txt span { line-height: 32px; text-align: justify; } #section-12 .inner-cont-wrap .cont-holder .txt-box .txt p { text-align: justify; line-height: 32px; } #section-12 .inner-cont-wrap .cont-holder .txt-box .txt .txt-1 { margin-top: 22px; line-height: 32px; } #section-13 .inner-cont-wrap { height: calc( 100vh - 70px ); background-color: #fff; } #section-13 .inner-cont-wrap .bg-holder { background-image: url("../img/sec13_bg.jpg"); background-size: cover; background-repeat: no-repeat; } #section-13 .inner-cont-wrap .cont-holder .txt-box { width: 100%; position: absolute; top: 50%; -webkit-transform: translateY(-43%); -moz-transform: translateY(-43%); -ms-transform: translateY(-43%); -o-transform: translateY(-43%); transform: translateY(-43%); opacity: 0; filter: alpha(opacity=0); } #section-13 .inner-cont-wrap .cont-holder .txt-box p { display: block; width: 100%; padding-bottom: 40px; } #section-13 .inner-cont-wrap .cont-holder .txt-box.onTrans { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: transform 0.7s ease-out,opacity 0.45s; -moz-transition: transform 0.7s ease-out,opacity 0.45s; -ms-transition: transform 0.7s ease-out,opacity 0.45s; -o-transition: transform 0.7s ease-out,opacity 0.45s; transition: transform 0.7s ease-out,opacity 0.45s; opacity: 1; filter: alpha(opacity=100); } /*# sourceMappingURL=page.css.map */