/* rotate */ /* transform */ /* transition */ /* transform-transition */ /* css-transition */ /* transform-css-transition */ /* keyframes */ /*@include keyframes(scroll-loop) { 0% { @include transform(translateY(0)); } 50% { @include transform(translateY(0)); } 100% { @include transform(translateY(0)); } }*/ @-webkit-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-moz-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-ms-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-o-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-webkit-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-moz-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-ms-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-o-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-webkit-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-ms-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-o-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-moz-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-ms-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-o-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-webkit-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @keyframes content-1-c1 { 0% { -webkit-transform: translate(-200px, -200px); -moz-transform: translate(-200px, -200px); -ms-transform: translate(-200px, -200px); -o-transform: translate(-200px, -200px); transform: translate(-200px, -200px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 85% { -webkit-transform: translate(5px, 5px); -moz-transform: translate(5px, 5px); -ms-transform: translate(5px, 5px); -o-transform: translate(5px, 5px); transform: translate(5px, 5px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c2 { 0% { -webkit-transform: translate(200px, -300px); -moz-transform: translate(200px, -300px); -ms-transform: translate(200px, -300px); -o-transform: translate(200px, -300px); transform: translate(200px, -300px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(5px, 8px); -moz-transform: translate(5px, 8px); -ms-transform: translate(5px, 8px); -o-transform: translate(5px, 8px); transform: translate(5px, 8px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c3 { 0% { -webkit-transform: translate(-300px, 300px); -moz-transform: translate(-300px, 300px); -ms-transform: translate(-300px, 300px); -o-transform: translate(-300px, 300px); transform: translate(-300px, 300px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(-5px, 3px); -moz-transform: translate(-5px, 3px); -ms-transform: translate(-5px, 3px); -o-transform: translate(-5px, 3px); transform: translate(-5px, 3px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c4 { 0% { -webkit-transform: translate(300px, 400px); -moz-transform: translate(300px, 400px); -ms-transform: translate(300px, 400px); -o-transform: translate(300px, 400px); transform: translate(300px, 400px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(3px, 5px); -moz-transform: translate(3px, 5px); -ms-transform: translate(3px, 5px); -o-transform: translate(3px, 5px); transform: translate(3px, 5px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-circle-rotate { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 25% { -webkit-transform: translate(-30px, 20px) rotate(180deg); -moz-transform: translate(-30px, 20px) rotate(180deg); -ms-transform: translate(-30px, 20px) rotate(180deg); -o-transform: translate(-30px, 20px) rotate(180deg); transform: translate(-30px, 20px) rotate(180deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 50% { -webkit-transform: translate(60px, -50px) rotate(360deg); -moz-transform: translate(60px, -50px) rotate(360deg); -ms-transform: translate(60px, -50px) rotate(360deg); -o-transform: translate(60px, -50px) rotate(360deg); transform: translate(60px, -50px) rotate(360deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 75% { -webkit-transform: translate(40px, 50px) rotate(540deg); -moz-transform: translate(40px, 50px) rotate(540deg); -ms-transform: translate(40px, 50px) rotate(540deg); -o-transform: translate(40px, 50px) rotate(540deg); transform: translate(40px, 50px) rotate(540deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: translate(0px, 0px) rotate(720deg); -moz-transform: translate(0px, 0px) rotate(720deg); -ms-transform: translate(0px, 0px) rotate(720deg); -o-transform: translate(0px, 0px) rotate(720deg); transform: translate(0px, 0px) rotate(720deg); } } @keyframes content-1-circle-rotate2 { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 25% { -webkit-transform: translate(-60px, 20px) rotate(-180deg); -moz-transform: translate(-60px, 20px) rotate(-180deg); -ms-transform: translate(-60px, 20px) rotate(-180deg); -o-transform: translate(-60px, 20px) rotate(-180deg); transform: translate(-60px, 20px) rotate(-180deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 50% { -webkit-transform: translate(60px, -50px) rotate(-360deg); -moz-transform: translate(60px, -50px) rotate(-360deg); -ms-transform: translate(60px, -50px) rotate(-360deg); -o-transform: translate(60px, -50px) rotate(-360deg); transform: translate(60px, -50px) rotate(-360deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 75% { -webkit-transform: translate(20px, 50px) rotate(-540deg); -moz-transform: translate(20px, 50px) rotate(-540deg); -ms-transform: translate(20px, 50px) rotate(-540deg); -o-transform: translate(20px, 50px) rotate(-540deg); transform: translate(20px, 50px) rotate(-540deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: translate(0px, 0px) rotate(-720deg); -moz-transform: translate(0px, 0px) rotate(-720deg); -ms-transform: translate(0px, 0px) rotate(-720deg); -o-transform: translate(0px, 0px) rotate(-720deg); transform: translate(0px, 0px) rotate(-720deg); } } @keyframes content-2-circle { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.3; filter: alpha(opacity=30); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1.5, 1.5); -moz-transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); -o-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); opacity: 0; filter: alpha(opacity=0); } } @keyframes content-2-circle-rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: rotate(-720deg); -moz-transform: rotate(-720deg); -ms-transform: rotate(-720deg); -o-transform: rotate(-720deg); transform: rotate(-720deg); } } /* line */ /* font setting */ body { overflow-x: auto; background: #fff; } .footer_wrap { position: relative; z-index: 100; display: none; } .footer_wrap.onShow { display: block; } #content { position: relative; min-width: 1280px; margin: 0 auto; overflow: hidden; } #content *, #content *:before, #content *:after { box-sizing: border-box; } .section { overflow: hidden; position: relative; width: 100%; } .btn_download { display: inline-block; width: 210px; height: 45px; font-size: 0; text-indent: -9999px; vertical-align: top; background: url(../img/btn_download.png) no-repeat 0 0; } .btn_download:hover { background-position: 0 -55px; } .alt-txt-hide { text-indent: -9999px; font-size: 0; position: absolute; top: -9999px; } img { vertical-align: top; } .inner-cont-wrap { position: relative; width: 100%; min-width: 1280px; height: 100%; } .bg-holder { position: absolute; width: 100%; height: 100%; } .txt-holder { position: relative; width: 1280px; height: 100%; margin: 0 auto; } .noTransition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .tap-holder .tap-type p, .tab-holder .tap-type p { font-family: 'samsungonelatin600'; font-size: 18px; letter-spacing: -0.015em; line-height: 33px; } @keyframes wave-circle-width { 0% { width: 0; height: 0; } 100% { width: 100%; height: 100%; } } @keyframes wave-circle-opacity { 0% { opacity: 0.25; filter: alpha(opacity=25); } 100% { opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes cursor-click { 0% { -webkit-transform: translate(0px, 0px) scale(1); -moz-transform: translate(0px, 0px) scale(1); -ms-transform: translate(0px, 0px) scale(1); -o-transform: translate(0px, 0px) scale(1); transform: translate(0px, 0px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 2% { -webkit-transform: translate(0px, 0px) scale(1); -moz-transform: translate(0px, 0px) scale(1); -ms-transform: translate(0px, 0px) scale(1); -o-transform: translate(0px, 0px) scale(1); transform: translate(0px, 0px) scale(1); opacity: 0.6; filter: alpha(opacity=60); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 10% { -webkit-transform: translate(-77px, 68px) scale(1); -moz-transform: translate(-77px, 68px) scale(1); -ms-transform: translate(-77px, 68px) scale(1); -o-transform: translate(-77px, 68px) scale(1); transform: translate(-77px, 68px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 12% { -webkit-transform: translate(-77px, 68px) scale(1); -moz-transform: translate(-77px, 68px) scale(1); -ms-transform: translate(-77px, 68px) scale(1); -o-transform: translate(-77px, 68px) scale(1); transform: translate(-77px, 68px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 15% { -webkit-transform: translate(-77px, 68px) scale(0.8); -moz-transform: translate(-77px, 68px) scale(0.8); -ms-transform: translate(-77px, 68px) scale(0.8); -o-transform: translate(-77px, 68px) scale(0.8); transform: translate(-77px, 68px) scale(0.8); opacity: 1; filter: alpha(opacity=100); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20% { -webkit-transform: translate(-77px, 68px) scale(1.5); -moz-transform: translate(-77px, 68px) scale(1.5); -ms-transform: translate(-77px, 68px) scale(1.5); -o-transform: translate(-77px, 68px) scale(1.5); transform: translate(-77px, 68px) scale(1.5); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate(-77px, 68px) scale(1.5); -moz-transform: translate(-77px, 68px) scale(1.5); -ms-transform: translate(-77px, 68px) scale(1.5); -o-transform: translate(-77px, 68px) scale(1.5); transform: translate(-77px, 68px) scale(1.5); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes cursor-click { 0% { -webkit-transform: translate(0px, 0px) scale(1); -moz-transform: translate(0px, 0px) scale(1); -ms-transform: translate(0px, 0px) scale(1); -o-transform: translate(0px, 0px) scale(1); transform: translate(0px, 0px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 2% { -webkit-transform: translate(0px, 0px) scale(1); -moz-transform: translate(0px, 0px) scale(1); -ms-transform: translate(0px, 0px) scale(1); -o-transform: translate(0px, 0px) scale(1); transform: translate(0px, 0px) scale(1); opacity: 0.6; filter: alpha(opacity=60); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 10% { -webkit-transform: translate(-77px, 68px) scale(1); -moz-transform: translate(-77px, 68px) scale(1); -ms-transform: translate(-77px, 68px) scale(1); -o-transform: translate(-77px, 68px) scale(1); transform: translate(-77px, 68px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 12% { -webkit-transform: translate(-77px, 68px) scale(1); -moz-transform: translate(-77px, 68px) scale(1); -ms-transform: translate(-77px, 68px) scale(1); -o-transform: translate(-77px, 68px) scale(1); transform: translate(-77px, 68px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 15% { -webkit-transform: translate(-77px, 68px) scale(0.8); -moz-transform: translate(-77px, 68px) scale(0.8); -ms-transform: translate(-77px, 68px) scale(0.8); -o-transform: translate(-77px, 68px) scale(0.8); transform: translate(-77px, 68px) scale(0.8); opacity: 1; filter: alpha(opacity=100); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20% { -webkit-transform: translate(-77px, 68px) scale(1.5); -moz-transform: translate(-77px, 68px) scale(1.5); -ms-transform: translate(-77px, 68px) scale(1.5); -o-transform: translate(-77px, 68px) scale(1.5); transform: translate(-77px, 68px) scale(1.5); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate(-77px, 68px) scale(1.5); -moz-transform: translate(-77px, 68px) scale(1.5); -ms-transform: translate(-77px, 68px) scale(1.5); -o-transform: translate(-77px, 68px) scale(1.5); transform: translate(-77px, 68px) scale(1.5); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes cursor-click { 0% { -webkit-transform: translate(0px, 0px) scale(1); -moz-transform: translate(0px, 0px) scale(1); -ms-transform: translate(0px, 0px) scale(1); -o-transform: translate(0px, 0px) scale(1); transform: translate(0px, 0px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 2% { -webkit-transform: translate(0px, 0px) scale(1); -moz-transform: translate(0px, 0px) scale(1); -ms-transform: translate(0px, 0px) scale(1); -o-transform: translate(0px, 0px) scale(1); transform: translate(0px, 0px) scale(1); opacity: 0.6; filter: alpha(opacity=60); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 10% { -webkit-transform: translate(-77px, 68px) scale(1); -moz-transform: translate(-77px, 68px) scale(1); -ms-transform: translate(-77px, 68px) scale(1); -o-transform: translate(-77px, 68px) scale(1); transform: translate(-77px, 68px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 12% { -webkit-transform: translate(-77px, 68px) scale(1); -moz-transform: translate(-77px, 68px) scale(1); -ms-transform: translate(-77px, 68px) scale(1); -o-transform: translate(-77px, 68px) scale(1); transform: translate(-77px, 68px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 15% { -webkit-transform: translate(-77px, 68px) scale(0.8); -moz-transform: translate(-77px, 68px) scale(0.8); -ms-transform: translate(-77px, 68px) scale(0.8); -o-transform: translate(-77px, 68px) scale(0.8); transform: translate(-77px, 68px) scale(0.8); opacity: 1; filter: alpha(opacity=100); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20% { -webkit-transform: translate(-77px, 68px) scale(1.5); -moz-transform: translate(-77px, 68px) scale(1.5); -ms-transform: translate(-77px, 68px) scale(1.5); -o-transform: translate(-77px, 68px) scale(1.5); transform: translate(-77px, 68px) scale(1.5); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate(-77px, 68px) scale(1.5); -moz-transform: translate(-77px, 68px) scale(1.5); -ms-transform: translate(-77px, 68px) scale(1.5); -o-transform: translate(-77px, 68px) scale(1.5); transform: translate(-77px, 68px) scale(1.5); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes cursor-click { 0% { -webkit-transform: translate(0px, 0px) scale(1); -moz-transform: translate(0px, 0px) scale(1); -ms-transform: translate(0px, 0px) scale(1); -o-transform: translate(0px, 0px) scale(1); transform: translate(0px, 0px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 2% { -webkit-transform: translate(0px, 0px) scale(1); -moz-transform: translate(0px, 0px) scale(1); -ms-transform: translate(0px, 0px) scale(1); -o-transform: translate(0px, 0px) scale(1); transform: translate(0px, 0px) scale(1); opacity: 0.6; filter: alpha(opacity=60); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 10% { -webkit-transform: translate(-77px, 68px) scale(1); -moz-transform: translate(-77px, 68px) scale(1); -ms-transform: translate(-77px, 68px) scale(1); -o-transform: translate(-77px, 68px) scale(1); transform: translate(-77px, 68px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 12% { -webkit-transform: translate(-77px, 68px) scale(1); -moz-transform: translate(-77px, 68px) scale(1); -ms-transform: translate(-77px, 68px) scale(1); -o-transform: translate(-77px, 68px) scale(1); transform: translate(-77px, 68px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 15% { -webkit-transform: translate(-77px, 68px) scale(0.8); -moz-transform: translate(-77px, 68px) scale(0.8); -ms-transform: translate(-77px, 68px) scale(0.8); -o-transform: translate(-77px, 68px) scale(0.8); transform: translate(-77px, 68px) scale(0.8); opacity: 1; filter: alpha(opacity=100); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20% { -webkit-transform: translate(-77px, 68px) scale(1.5); -moz-transform: translate(-77px, 68px) scale(1.5); -ms-transform: translate(-77px, 68px) scale(1.5); -o-transform: translate(-77px, 68px) scale(1.5); transform: translate(-77px, 68px) scale(1.5); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate(-77px, 68px) scale(1.5); -moz-transform: translate(-77px, 68px) scale(1.5); -ms-transform: translate(-77px, 68px) scale(1.5); -o-transform: translate(-77px, 68px) scale(1.5); transform: translate(-77px, 68px) scale(1.5); opacity: 0; filter: alpha(opacity=0); } } @keyframes cursor-click { 0% { -webkit-transform: translate(0px, 0px) scale(1); -moz-transform: translate(0px, 0px) scale(1); -ms-transform: translate(0px, 0px) scale(1); -o-transform: translate(0px, 0px) scale(1); transform: translate(0px, 0px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 2% { -webkit-transform: translate(0px, 0px) scale(1); -moz-transform: translate(0px, 0px) scale(1); -ms-transform: translate(0px, 0px) scale(1); -o-transform: translate(0px, 0px) scale(1); transform: translate(0px, 0px) scale(1); opacity: 0.6; filter: alpha(opacity=60); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 10% { -webkit-transform: translate(-77px, 68px) scale(1); -moz-transform: translate(-77px, 68px) scale(1); -ms-transform: translate(-77px, 68px) scale(1); -o-transform: translate(-77px, 68px) scale(1); transform: translate(-77px, 68px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 12% { -webkit-transform: translate(-77px, 68px) scale(1); -moz-transform: translate(-77px, 68px) scale(1); -ms-transform: translate(-77px, 68px) scale(1); -o-transform: translate(-77px, 68px) scale(1); transform: translate(-77px, 68px) scale(1); opacity: 0.6; filter: alpha(opacity=60); } 15% { -webkit-transform: translate(-77px, 68px) scale(0.8); -moz-transform: translate(-77px, 68px) scale(0.8); -ms-transform: translate(-77px, 68px) scale(0.8); -o-transform: translate(-77px, 68px) scale(0.8); transform: translate(-77px, 68px) scale(0.8); opacity: 1; filter: alpha(opacity=100); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20% { -webkit-transform: translate(-77px, 68px) scale(1.5); -moz-transform: translate(-77px, 68px) scale(1.5); -ms-transform: translate(-77px, 68px) scale(1.5); -o-transform: translate(-77px, 68px) scale(1.5); transform: translate(-77px, 68px) scale(1.5); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate(-77px, 68px) scale(1.5); -moz-transform: translate(-77px, 68px) scale(1.5); -ms-transform: translate(-77px, 68px) scale(1.5); -o-transform: translate(-77px, 68px) scale(1.5); transform: translate(-77px, 68px) scale(1.5); opacity: 0; filter: alpha(opacity=0); } } .bx-wrapper .bx-pager { text-align: right; font-size: 16px; letter-spacing: -0.08em; font-family: 'samsungonelatin600'; font-weight: 100; color: #28376e; } .bx-wrapper .bx-pager.bx-default-pager a { background: #666; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus { /*background: #000;*/ } .bx-wrapper .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; vertical-align: bottom; *zoom: 1; *display: inline; } .bx-wrapper .bx-pager-item { font-size: 0; line-height: 0; } .intro-holder.onDownTransOut { -webkit-animation-name: toDownAniOut; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.5s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: ease-out; -webkit-animation-direction: normal; -moz-animation-name: toDownAniOut; -moz-animation-iteration-count: 1; -moz-animation-duration: 0.5s; -moz-animation-delay: 0s; -moz-animation-timing-function: ease-out; -moz-animation-direction: normal; -ms-animation-name: toDownAniOut; -ms-animation-iteration-count: 1; -ms-animation-duration: 0.5s; -ms-animation-delay: 0s; -ms-animation-timing-function: ease-out; -ms-animation-direction: normal; -o-animation-name: toDownAniOut; -o-animation-iteration-count: 1; -o-animation-duration: 0.5s; -o-animation-delay: 0s; -o-animation-timing-function: ease-out; -o-animation-direction: normal; animation-name: toDownAniOut; animation-iteration-count: 1; animation-duration: 0.5s; animation-delay: 0s; animation-timing-function: ease-out; animation-direction: normal; } .intro-holder.onUpTransIn { -webkit-animation-name: toDownAniOut; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.5s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: ease-out; -webkit-animation-direction: reverse; -moz-animation-name: toDownAniOut; -moz-animation-iteration-count: 1; -moz-animation-duration: 0.5s; -moz-animation-delay: 0s; -moz-animation-timing-function: ease-out; -moz-animation-direction: reverse; -ms-animation-name: toDownAniOut; -ms-animation-iteration-count: 1; -ms-animation-duration: 0.5s; -ms-animation-delay: 0s; -ms-animation-timing-function: ease-out; -ms-animation-direction: reverse; -o-animation-name: toDownAniOut; -o-animation-iteration-count: 1; -o-animation-duration: 0.5s; -o-animation-delay: 0s; -o-animation-timing-function: ease-out; -o-animation-direction: reverse; animation-name: toDownAniOut; animation-iteration-count: 1; animation-duration: 0.5s; animation-delay: 0s; animation-timing-function: ease-out; animation-direction: reverse; } .section-holder.onCurrentPage { z-index: 50; } .section-holder.onDownTransOut { -webkit-animation-name: toDownAniOut; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.5s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: ease-out; -webkit-animation-direction: normal; -moz-animation-name: toDownAniOut; -moz-animation-iteration-count: 1; -moz-animation-duration: 0.5s; -moz-animation-delay: 0s; -moz-animation-timing-function: ease-out; -moz-animation-direction: normal; -ms-animation-name: toDownAniOut; -ms-animation-iteration-count: 1; -ms-animation-duration: 0.5s; -ms-animation-delay: 0s; -ms-animation-timing-function: ease-out; -ms-animation-direction: normal; -o-animation-name: toDownAniOut; -o-animation-iteration-count: 1; -o-animation-duration: 0.5s; -o-animation-delay: 0s; -o-animation-timing-function: ease-out; -o-animation-direction: normal; animation-name: toDownAniOut; animation-iteration-count: 1; animation-duration: 0.5s; animation-delay: 0s; animation-timing-function: ease-out; animation-direction: normal; } .section-holder.onDownTransIn { -webkit-animation-name: toDownAniIn; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.5s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: ease-out; -webkit-animation-direction: normal; -moz-animation-name: toDownAniIn; -moz-animation-iteration-count: 1; -moz-animation-duration: 0.5s; -moz-animation-delay: 0s; -moz-animation-timing-function: ease-out; -moz-animation-direction: normal; -ms-animation-name: toDownAniIn; -ms-animation-iteration-count: 1; -ms-animation-duration: 0.5s; -ms-animation-delay: 0s; -ms-animation-timing-function: ease-out; -ms-animation-direction: normal; -o-animation-name: toDownAniIn; -o-animation-iteration-count: 1; -o-animation-duration: 0.5s; -o-animation-delay: 0s; -o-animation-timing-function: ease-out; -o-animation-direction: normal; animation-name: toDownAniIn; animation-iteration-count: 1; animation-duration: 0.5s; animation-delay: 0s; animation-timing-function: ease-out; animation-direction: normal; } .section-holder.onUpTransOut { -webkit-animation-name: toDownAniIn; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.5s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: ease-out; -webkit-animation-direction: reverse; -moz-animation-name: toDownAniIn; -moz-animation-iteration-count: 1; -moz-animation-duration: 0.5s; -moz-animation-delay: 0s; -moz-animation-timing-function: ease-out; -moz-animation-direction: reverse; -ms-animation-name: toDownAniIn; -ms-animation-iteration-count: 1; -ms-animation-duration: 0.5s; -ms-animation-delay: 0s; -ms-animation-timing-function: ease-out; -ms-animation-direction: reverse; -o-animation-name: toDownAniIn; -o-animation-iteration-count: 1; -o-animation-duration: 0.5s; -o-animation-delay: 0s; -o-animation-timing-function: ease-out; -o-animation-direction: reverse; animation-name: toDownAniIn; animation-iteration-count: 1; animation-duration: 0.5s; animation-delay: 0s; animation-timing-function: ease-out; animation-direction: reverse; } .section-holder.onUpTransIn { -webkit-animation-name: toDownAniOut; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.5s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: ease-out; -webkit-animation-direction: reverse; -moz-animation-name: toDownAniOut; -moz-animation-iteration-count: 1; -moz-animation-duration: 0.5s; -moz-animation-delay: 0s; -moz-animation-timing-function: ease-out; -moz-animation-direction: reverse; -ms-animation-name: toDownAniOut; -ms-animation-iteration-count: 1; -ms-animation-duration: 0.5s; -ms-animation-delay: 0s; -ms-animation-timing-function: ease-out; -ms-animation-direction: reverse; -o-animation-name: toDownAniOut; -o-animation-iteration-count: 1; -o-animation-duration: 0.5s; -o-animation-delay: 0s; -o-animation-timing-function: ease-out; -o-animation-direction: reverse; animation-name: toDownAniOut; animation-iteration-count: 1; animation-duration: 0.5s; animation-delay: 0s; animation-timing-function: ease-out; animation-direction: reverse; } .section-holder .inner-cont-wrap.onNextTransOut { -webkit-animation-name: toNextAniOut; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.8s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: ease-out; -webkit-animation-direction: normal; -moz-animation-name: toNextAniOut; -moz-animation-iteration-count: 1; -moz-animation-duration: 0.8s; -moz-animation-delay: 0s; -moz-animation-timing-function: ease-out; -moz-animation-direction: normal; -ms-animation-name: toNextAniOut; -ms-animation-iteration-count: 1; -ms-animation-duration: 0.8s; -ms-animation-delay: 0s; -ms-animation-timing-function: ease-out; -ms-animation-direction: normal; -o-animation-name: toNextAniOut; -o-animation-iteration-count: 1; -o-animation-duration: 0.8s; -o-animation-delay: 0s; -o-animation-timing-function: ease-out; -o-animation-direction: normal; animation-name: toNextAniOut; animation-iteration-count: 1; animation-duration: 0.8s; animation-delay: 0s; animation-timing-function: ease-out; animation-direction: normal; } .section-holder .inner-cont-wrap.onNextTransIn { -webkit-animation-name: toNextAniOut; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.8s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -webkit-animation-direction: reverse; -moz-animation-name: toNextAniOut; -moz-animation-iteration-count: 1; -moz-animation-duration: 0.8s; -moz-animation-delay: 0s; -moz-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -moz-animation-direction: reverse; -ms-animation-name: toNextAniOut; -ms-animation-iteration-count: 1; -ms-animation-duration: 0.8s; -ms-animation-delay: 0s; -ms-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -ms-animation-direction: reverse; -o-animation-name: toNextAniOut; -o-animation-iteration-count: 1; -o-animation-duration: 0.8s; -o-animation-delay: 0s; -o-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -o-animation-direction: reverse; animation-name: toNextAniOut; animation-iteration-count: 1; animation-duration: 0.8s; animation-delay: 0s; animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); animation-direction: reverse; } #content-wrapper.onNextTransOut { -webkit-animation-name: toNextAniIn; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.8s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: ease-out; -webkit-animation-direction: normal; -moz-animation-name: toNextAniIn; -moz-animation-iteration-count: 1; -moz-animation-duration: 0.8s; -moz-animation-delay: 0s; -moz-animation-timing-function: ease-out; -moz-animation-direction: normal; -ms-animation-name: toNextAniIn; -ms-animation-iteration-count: 1; -ms-animation-duration: 0.8s; -ms-animation-delay: 0s; -ms-animation-timing-function: ease-out; -ms-animation-direction: normal; -o-animation-name: toNextAniIn; -o-animation-iteration-count: 1; -o-animation-duration: 0.8s; -o-animation-delay: 0s; -o-animation-timing-function: ease-out; -o-animation-direction: normal; animation-name: toNextAniIn; animation-iteration-count: 1; animation-duration: 0.8s; animation-delay: 0s; animation-timing-function: ease-out; animation-direction: normal; } #content-wrapper.onNextTransIn { -webkit-animation-name: toNextAniIn; -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.8s; -webkit-animation-delay: 0s; -webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -webkit-animation-direction: reverse; -moz-animation-name: toNextAniIn; -moz-animation-iteration-count: 1; -moz-animation-duration: 0.8s; -moz-animation-delay: 0s; -moz-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -moz-animation-direction: reverse; -ms-animation-name: toNextAniIn; -ms-animation-iteration-count: 1; -ms-animation-duration: 0.8s; -ms-animation-delay: 0s; -ms-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -ms-animation-direction: reverse; -o-animation-name: toNextAniIn; -o-animation-iteration-count: 1; -o-animation-duration: 0.8s; -o-animation-delay: 0s; -o-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -o-animation-direction: reverse; animation-name: toNextAniIn; animation-iteration-count: 1; animation-duration: 0.8s; animation-delay: 0s; animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); animation-direction: reverse; } #container { margin: 0 auto; -webkit-text-size-adjust: 100%; } #content { position: relative; width: 100%; height: 100%; } .section-wrapper .section-holder .inner-cont-wrap .txt-holder h3 { font-family: 'samsungonekorean600'; font-size: 74px; letter-spacing: -0.008em; line-height: 73px; } .cont-wrapper .inner-cont-holder .content-loader .content-area .content .txt-holder h3 { font-family: 'samsungonelatin600'; font-size: 42px; letter-spacing: -0.015em; line-height: 48px; } .section-wrapper .section-holder .inner-cont-wrap .txt-holder h4 { font-family: 'samsungonekorean600'; font-size: 26px; letter-spacing: -0.027em; line-height: 74px; } .cont-wrapper .inner-cont-holder .content-loader .content-area .content .txt-holder p { font-family: 'samsungonelatin600'; font-size: 18px; letter-spacing: -0.015em; line-height: 33px; } .section-wrapper .section-holder .inner-cont-wrap .txt-holder p { font-family: 'samsungonelatin600'; font-size: 18px; letter-spacing: -0.015em; line-height: 32px; } .section-wrapper .section-holder .inner-cont-wrap, .intro-wrapper .intro-holder .inner-cont-wrap { width: 1280px; height: 800px; margin-left: -640px; margin-top: -400px; } .cont-wrapper .inner-cont-holder .content-loader, .cont-wrapper .inner-cont-holder .inner-ui-area { width: 1223px; height: 800px; margin-left: -611.5px; margin-top: -400px; } .full-screen, .section-wrapper, .section-wrapper .section-holder, .cont-wrapper, .cont-wrapper .inner-cont-holder, .intro-wrapper, .intro-wrapper .intro-holder { position: absolute; display: block; width: 100%; height: 100%; } .section-wrapper .section-holder { overflow: hidden; visibility: hidden; } .section-wrapper .section-holder.onCurrentPage { visibility: visible; } .section-wrapper .section-holder .bg-holder { position: absolute; left: 0; top: 0; width: 5000px; height: 100%; } .section-wrapper .section-holder .inner-cont-wrap { display: block; position: absolute; left: 50%; top: 50%; } .section-wrapper .section-holder .inner-cont-wrap .txt-holder { opacity: 0; filter: alpha(opacity=0); position: absolute; height: auto; } .section-wrapper .section-holder .inner-cont-wrap .txt-holder h3 span { display: block; } .section-wrapper .section-holder .inner-cont-wrap .txt-holder h4 { margin-left: 3px; margin-top: 2px; } .section-wrapper .section-holder .inner-cont-wrap .txt-holder h4 span { display: block; } .section-wrapper .section-holder .inner-cont-wrap .txt-holder p { margin-left: 3px; margin-top: 0px; } .section-wrapper .section-holder .inner-cont-wrap .txt-holder .btn-next { margin-top: 40px; margin-left: 3px; } .section-wrapper .section-holder .inner-cont-wrap .cont-holder { position: absolute; top: 0px; left: 0px; } .section-wrapper .section-holder .inner-cont-wrap .cont-holder .phone-line { position: absolute; top: 0; left: 0; width: 261px; height: 560px; /*background-color: #2f7daf;*/ overflow: hidden; -webkit-border-radius: 32px; -webkit-mask-image: -webkit-radial-gradient(white, black); -moz-border-radius: 32px; -webkit-mask-image: -webkit-radial-gradient(white, black); -ms-border-radius: 32px; -webkit-mask-image: -webkit-radial-gradient(white, black); -o-border-radius: 32px; -webkit-mask-image: -webkit-radial-gradient(white, black); border-radius: 32px; -webkit-mask-image: -webkit-radial-gradient(white, black); /*@include transform(scale(0.7,0.7)); */ -webkit-transition: -webkit-transform 1s 0s cubic-bezier(0, 0.5, 0.5, 1); -moz-transition: -moz-transform 1s 0s cubic-bezier(0, 0.5, 0.5, 1); -ms-transition: -ms-transform 1s 0s cubic-bezier(0, 0.5, 0.5, 1); -o-transition: -o-transform 1s 0s cubic-bezier(0, 0.5, 0.5, 1); transition: transform 1s 0s cubic-bezier(0, 0.5, 0.5, 1); } .section-wrapper .section-holder .inner-cont-wrap .cont-holder .phone-line img { -webkit-transform: scale(1.05, 1.02); -moz-transform: scale(1.05, 1.02); -ms-transform: scale(1.05, 1.02); -o-transform: scale(1.05, 1.02); transform: scale(1.05, 1.02); } .scroll-wrapper .btn-scroll { position: absolute; left: 50%; z-index: 60; margin-left: -40.5px; margin-top: -25.5px; width: 81px; height: 51px; } .scroll-wrapper .btn-scroll.up { top: 53px; } .scroll-wrapper .btn-scroll.down { bottom: 28px; } .scroll-wrapper .btn-scroll .white { position: absolute; left: 0; top: 0; } .scroll-wrapper .btn-scroll .black { position: absolute; left: 0; top: 0; } .scroll-wrapper .indicator-holder { position: absolute; left: 80px; top: 50%; z-index: 60; margin-top: -40px; margin-left: -40px; opacity: 0; display: block; -webkit-transition: opacity 0.3s,margin-left 0.3s; -moz-transition: opacity 0.3s,margin-left 0.3s; -ms-transition: opacity 0.3s,margin-left 0.3s; -o-transition: opacity 0.3s,margin-left 0.3s; transition: opacity 0.3s,margin-left 0.3s; } .scroll-wrapper .indicator-holder div { display: block; left: 0; top: 0; width: 14px; height: 3px; background-color: #001966; margin-bottom: 20px; opacity: 0.2; filter: alpha(opacity=20); -webkit-transition: opacity 0.3s,background-color 0.3s; -moz-transition: opacity 0.3s,background-color 0.3s; -ms-transition: opacity 0.3s,background-color 0.3s; -o-transition: opacity 0.3s,background-color 0.3s; transition: opacity 0.3s,background-color 0.3s; } .scroll-wrapper .indicator-holder div.focus { opacity: 0.8; filter: alpha(opacity=80); } .scroll-wrapper .indicator-holder.show { margin-left: 0; opacity: 1; filter: alpha(opacity=100); } .cont-wrapper { left: 0; z-index: 100; visibility: visible; } .cont-wrapper .inner-cont-holder { width: 100%; overflow: hidden; } .cont-wrapper .inner-cont-holder .content-loader { position: absolute; top: 50%; left: 50%; } .cont-wrapper .inner-cont-holder .content-loader .content-area { position: absolute; } .cont-wrapper .inner-cont-holder .content-loader .content-area .content { display: block; height: 800px; position: absolute; } .cont-wrapper .inner-cont-holder .content-loader .content-area .content .img-holder { position: absolute; } .cont-wrapper .inner-cont-holder .content-loader .content-area .content .txt-holder { position: absolute; } .cont-wrapper .inner-cont-holder .content-loader .content-area .content .txt-holder h3 span { display: block; } .cont-wrapper .inner-cont-holder .content-loader .content-area .content .txt-holder p { margin-top: 20px; /*margin-left : 2px;*/ } .cont-wrapper .inner-cont-holder .content-loader .content-area .content .guide-area { display: none; position: absolute; left: 0; top: 0; border: 1px #000 solid; width: 100%; height: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; opacity: 0.1; } .cont-wrapper .inner-cont-holder .btn-prev { position: absolute; left: 75px; top: 50px; } .cont-wrapper .inner-cont-holder .btn-prev .ui-section-3 { display: none; } .cont-wrapper .inner-cont-holder .btn-prev .ui-section-4 { display: none; } .cont-wrapper .inner-cont-holder .btn-prev .ui-section-5 { display: none; } .cont-wrapper .inner-cont-holder .btn-prev .ui-section-6 { display: none; } .cont-wrapper .inner-cont-holder .btn-prev .show { display: block !important; } .cont-wrapper .inner-cont-holder .inner-ui-area { position: absolute; left: 50%; top: 50%; width: auto; } .cont-wrapper .inner-cont-holder .inner-ui-area .show { display: block !important; } .cont-wrapper .inner-cont-holder .inner-ui-area .ui { position: absolute; left: 0; top: 0; } .cont-wrapper .inner-cont-holder .inner-ui-area .btn-prev { position: absolute; left: -30px; top: -31px; } .cont-wrapper .inner-cont-holder .inner-ui-area .btn-prev .ui-section-3 { display: none; } .cont-wrapper .inner-cont-holder .inner-ui-area .btn-prev .ui-section-4 { display: none; } .cont-wrapper .inner-cont-holder .inner-ui-area .btn-prev .ui-section-5 { display: none; } .cont-wrapper .inner-cont-holder .inner-ui-area .btn-prev .ui-section-6 { display: none; } .cont-wrapper .inner-cont-holder .inner-ui-area .scroll-area { position: absolute; left: 52px; top: 780px; width: 1120px; height: 20px; } .cont-wrapper .inner-cont-holder .inner-ui-area .scroll-area .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .cont-wrapper .inner-cont-holder .inner-ui-area .scroll-area .bg .ui-section-3 { display: none; width: 100%; height: 100%; background: url("../img/section3_scroll_bg.png") 0 0; } .cont-wrapper .inner-cont-holder .inner-ui-area .scroll-area .bg .ui-section-4 { display: none; width: 100%; height: 100%; background: url("../img/section4_scroll_bg.png") 0 0; } .cont-wrapper .inner-cont-holder .inner-ui-area .scroll-area .bg .ui-section-5 { display: none; width: 100%; height: 100%; background: url("../img/section5_scroll_bg.png") 0 0; } .cont-wrapper .inner-cont-holder .inner-ui-area .scroll-area .bg .ui-section-6 { display: none; width: 100%; height: 100%; background: url("../img/section6_scroll_bg.png") 0 0; } .cont-wrapper .inner-cont-holder .inner-ui-area .scroll-area .btn { cursor: pointer; position: absolute; left: 0; top: 0; width: 57px; height: 20px; } .cont-wrapper .inner-cont-holder .inner-ui-area .scroll-area .btn .ui-section-3 { display: none; width: 100%; height: 100%; background: url("../img/section3_scroll_btn.png") 0 0; } .cont-wrapper .inner-cont-holder .inner-ui-area .scroll-area .btn .ui-section-4 { display: none; width: 100%; height: 100%; background: url("../img/section4_scroll_btn.png") 0 0; } .cont-wrapper .inner-cont-holder .inner-ui-area .scroll-area .btn .ui-section-5 { display: none; width: 100%; height: 100%; background: url("../img/section5_scroll_btn.png") 0 0; } .cont-wrapper .inner-cont-holder .inner-ui-area .scroll-area .btn .ui-section-6 { display: none; width: 100%; height: 100%; background: url("../img/section6_scroll_btn.png") 0 0; } .scroll-transition, .section-wrapper .section-holder .bg-holder, .cont-wrapper .inner-cont-holder .content-loader .content-area { -webkit-transition: left 0.3s ease-out; -moz-transition: left 0.3s ease-out; -ms-transition: left 0.3s ease-out; transition: left 0.3s ease-out; } #bg-3 { background: url("../img/section3_bg.png") repeat-y 0 0; } #bg-4 { background: url("../img/section4_bg.png") repeat-y 0 0; } #bg-5 { background: url("../img/section5_bg.png") repeat-y 0 0; } #bg-6 { background: url("../img/section6_bg.png") repeat-y 0 0; } #bg-7 { background: #fff; } #bg-8 { background: #fff; } #section-3 { background: #fad3e9; } #section-3 .inner-cont-wrap .txt-holder { left: 35px; top: 154px; color: #454853; } #section-3 .inner-cont-wrap .cont-holder { top: 118px; left: 839px; /*@include transform(translateX(-323px));*/ } #section-3 .inner-cont-wrap .cont-holder ul.circle-list li { position: absolute; width: 392px; height: 392px; -webkit-border-radius: 196px; -webkit-mask-image: -webkit-radial-gradient(white, black); -moz-border-radius: 196px; -webkit-mask-image: -webkit-radial-gradient(white, black); -ms-border-radius: 196px; -webkit-mask-image: -webkit-radial-gradient(white, black); -o-border-radius: 196px; -webkit-mask-image: -webkit-radial-gradient(white, black); border-radius: 196px; -webkit-mask-image: -webkit-radial-gradient(white, black); overflow: hidden; opacity: 0; filter: alpha(opacity=0); } #section-3 .inner-cont-wrap .cont-holder ul.circle-list li.c1 { top: -90px; left: -360px; } #section-3 .inner-cont-wrap .cont-holder ul.circle-list li.c1 img { margin: -160px 0 0 -210px; } #section-3 .inner-cont-wrap .cont-holder ul.circle-list li.c2 { top: -90px; left: 31px; } #section-3 .inner-cont-wrap .cont-holder ul.circle-list li.c2 img { margin: -100px 0 0 -70px; } #section-3 .inner-cont-wrap .cont-holder ul.circle-list li.c3 { top: 248px; left: -163px; } #section-3 .inner-cont-wrap .cont-holder ul.circle-list li.c3 img { margin: -240px 0 0 -170px; } #section-3 .inner-cont-wrap .cont-holder ul.circle-list li.c4 { top: 248px; left: 229px; } #section-3 .inner-cont-wrap .cont-holder ul.circle-list li.c4 img { margin: -320px 0 0 -270px; } #section-3.onShow .inner-cont-wrap .txt-holder { -webkit-transition: -webkit-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; -moz-transition: -moz-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; -ms-transition: -ms-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; -o-transition: -o-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; transition: transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; 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-3.onShow .inner-cont-wrap .cont-holder { /*@include transform-transition-inout(0.8,1.5);transform: translateX(0);*/ } #section-3.onShow .inner-cont-wrap .cont-holder ul.circle-list li.c1 { -webkit-animation: content-1-c1 0.8s forwards; -moz-animation: content-1-c1 0.8s forwards; -ms-animation: content-1-c1 0.8s forwards; -o-animation: content-1-c1 0.8s forwards; animation: content-1-c1 0.8s forwards; } #section-3.onShow .inner-cont-wrap .cont-holder ul.circle-list li.c1 img { -webkit-animation: content-1-circle-rotate 8s infinite; -moz-animation: content-1-circle-rotate 8s infinite; -ms-animation: content-1-circle-rotate 8s infinite; -o-animation: content-1-circle-rotate 8s infinite; animation: content-1-circle-rotate 8s infinite; } #section-3.onShow .inner-cont-wrap .cont-holder ul.circle-list li.c2 { -webkit-animation: content-1-c2 1.2s forwards; -moz-animation: content-1-c2 1.2s forwards; -ms-animation: content-1-c2 1.2s forwards; -o-animation: content-1-c2 1.2s forwards; animation: content-1-c2 1.2s forwards; } #section-3.onShow .inner-cont-wrap .cont-holder ul.circle-list li.c2 img { -webkit-animation: content-1-circle-rotate2 6s infinite; -moz-animation: content-1-circle-rotate2 6s infinite; -ms-animation: content-1-circle-rotate2 6s infinite; -o-animation: content-1-circle-rotate2 6s infinite; animation: content-1-circle-rotate2 6s infinite; } #section-3.onShow .inner-cont-wrap .cont-holder ul.circle-list li.c3 { -webkit-animation: content-1-c3 1.4s forwards; -moz-animation: content-1-c3 1.4s forwards; -ms-animation: content-1-c3 1.4s forwards; -o-animation: content-1-c3 1.4s forwards; animation: content-1-c3 1.4s forwards; } #section-3.onShow .inner-cont-wrap .cont-holder ul.circle-list li.c3 img { -webkit-animation: content-1-circle-rotate2 12s infinite; -moz-animation: content-1-circle-rotate2 12s infinite; -ms-animation: content-1-circle-rotate2 12s infinite; -o-animation: content-1-circle-rotate2 12s infinite; animation: content-1-circle-rotate2 12s infinite; } #section-3.onShow .inner-cont-wrap .cont-holder ul.circle-list li.c4 { -webkit-animation: content-1-c4 1.55s forwards; -moz-animation: content-1-c4 1.55s forwards; -ms-animation: content-1-c4 1.55s forwards; -o-animation: content-1-c4 1.55s forwards; animation: content-1-c4 1.55s forwards; } #section-3.onShow .inner-cont-wrap .cont-holder ul.circle-list li.c4 img { -webkit-animation: content-1-circle-rotate 15s infinite; -moz-animation: content-1-circle-rotate 15s infinite; -ms-animation: content-1-circle-rotate 15s infinite; -o-animation: content-1-circle-rotate 15s infinite; animation: content-1-circle-rotate 15s infinite; } #section-3.onShow .inner-cont-wrap .cont-holder .phone-line { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } #section-3.onShow .inner-cont-wrap .cont-holder .phone-line img { -webkit-transition: -webkit-transform 0.5s 1s cubic-bezier(0, 0.5, 0.5, 1); -moz-transition: -moz-transform 0.5s 1s cubic-bezier(0, 0.5, 0.5, 1); -ms-transition: -ms-transform 0.5s 1s cubic-bezier(0, 0.5, 0.5, 1); -o-transition: -o-transform 0.5s 1s cubic-bezier(0, 0.5, 0.5, 1); transition: transform 0.5s 1s cubic-bezier(0, 0.5, 0.5, 1); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } #section-4 { background: #5d6272; } #section-4 .inner-cont-wrap .txt-holder { left: 752px; top: 174px; color: #fff; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } #section-4 .inner-cont-wrap .cont-holder { top: 7px; left: -82px; /*transform: translateX(340px);*/ } #section-4 .inner-cont-wrap .cont-holder .circle { position: absolute; top: 0; left: 0; width: 778px; height: 778px; overflow: hidden; -webkit-border-radius: 389px; -webkit-mask-image: -webkit-radial-gradient(white, black); -moz-border-radius: 389px; -webkit-mask-image: -webkit-radial-gradient(white, black); -ms-border-radius: 389px; -webkit-mask-image: -webkit-radial-gradient(white, black); -o-border-radius: 389px; -webkit-mask-image: -webkit-radial-gradient(white, black); border-radius: 389px; -webkit-mask-image: -webkit-radial-gradient(white, black); } #section-4 .inner-cont-wrap .cont-holder .circle img { margin: -229px 0 0 -229px; } #section-4 .inner-cont-wrap .cont-holder .circle.c1 { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; filter: alpha(opacity=0); } #section-4 .inner-cont-wrap .cont-holder .circle.c2 { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; filter: alpha(opacity=0); } #section-4 .inner-cont-wrap .cont-holder .circle.c3 { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; filter: alpha(opacity=0); } #section-4 .inner-cont-wrap .cont-holder .phone-line { top: 110px; left: 260px; } #section-4.onShow .inner-cont-wrap .txt-holder { -webkit-transition: -webkit-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; -moz-transition: -moz-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; -ms-transition: -ms-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; -o-transition: -o-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; transition: transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; 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-4.onShow .inner-cont-wrap .cont-holder { /*@include transform-transition-inout(1.2,2);transform: translateX(0);*/ } #section-4.onShow .inner-cont-wrap .cont-holder .circle.c1 { -webkit-animation: content-2-circle 3s infinite; -moz-animation: content-2-circle 3s infinite; -ms-animation: content-2-circle 3s infinite; -o-animation: content-2-circle 3s infinite; animation: content-2-circle 3s infinite; } #section-4.onShow .inner-cont-wrap .cont-holder .circle.c2 { -webkit-animation: content-2-circle 3s 1s infinite; -moz-animation: content-2-circle 3s 1s infinite; -ms-animation: content-2-circle 3s 1s infinite; -o-animation: content-2-circle 3s 1s infinite; animation: content-2-circle 3s 1s infinite; } #section-4.onShow .inner-cont-wrap .cont-holder .circle.c3 { -webkit-animation: content-2-circle 3s 2s infinite; -moz-animation: content-2-circle 3s 2s infinite; -ms-animation: content-2-circle 3s 2s infinite; -o-animation: content-2-circle 3s 2s infinite; animation: content-2-circle 3s 2s infinite; } #section-4.onShow .inner-cont-wrap .cont-holder .circle.c4 img { -webkit-animation: content-2-circle-rotate 3s infinite; -moz-animation: content-2-circle-rotate 3s infinite; -ms-animation: content-2-circle-rotate 3s infinite; -o-animation: content-2-circle-rotate 3s infinite; animation: content-2-circle-rotate 3s infinite; } #section-4.onShow .inner-cont-wrap .cont-holder .phone-line { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } #section-4.onShow .inner-cont-wrap .cont-holder .phone-line img { -webkit-transition: -webkit-transform 0.5s 0.8s cubic-bezier(0, 0.5, 0.5, 1); -moz-transition: -moz-transform 0.5s 0.8s cubic-bezier(0, 0.5, 0.5, 1); -ms-transition: -ms-transform 0.5s 0.8s cubic-bezier(0, 0.5, 0.5, 1); -o-transition: -o-transform 0.5s 0.8s cubic-bezier(0, 0.5, 0.5, 1); transition: transform 0.5s 0.8s cubic-bezier(0, 0.5, 0.5, 1); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } #section-5 { background: #fff; } #section-5 .inner-cont-wrap .txt-holder { left: 36px; top: 172px; color: #223a65; } #section-5 .inner-cont-wrap .cont-holder { top: 118px; left: 839px; /*transform: translateX(-320px);*/ } #section-5 .inner-cont-wrap .cont-holder ul.circle-list li { position: absolute; width: 556px; height: 556px; -webkit-border-radius: 278px; -webkit-mask-image: -webkit-radial-gradient(white, black); -moz-border-radius: 278px; -webkit-mask-image: -webkit-radial-gradient(white, black); -ms-border-radius: 278px; -webkit-mask-image: -webkit-radial-gradient(white, black); -o-border-radius: 278px; -webkit-mask-image: -webkit-radial-gradient(white, black); border-radius: 278px; -webkit-mask-image: -webkit-radial-gradient(white, black); overflow: hidden; } #section-5 .inner-cont-wrap .cont-holder ul.circle-list li.c1 { top: -184px; left: -145px; -webkit-transform: translateY(184px); -moz-transform: translateY(184px); -ms-transform: translateY(184px); -o-transform: translateY(184px); transform: translateY(184px); } #section-5 .inner-cont-wrap .cont-holder ul.circle-list li.c1 img { margin: -160px 0 0 -122px; } #section-5 .inner-cont-wrap .cont-holder ul.circle-list li.c2 { top: 184px; left: -145px; -webkit-transform: translateY(-184px); -moz-transform: translateY(-184px); -ms-transform: translateY(-184px); -o-transform: translateY(-184px); transform: translateY(-184px); } #section-5 .inner-cont-wrap .cont-holder ul.circle-list li.c2 img { margin: -100px 0 0 -122px; } #section-5.onShow .inner-cont-wrap .txt-holder { -webkit-transition: -webkit-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; -moz-transition: -moz-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; -ms-transition: -ms-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; -o-transition: -o-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; transition: transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; 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-5.onShow .inner-cont-wrap .cont-holder { /*@include transform-transition-inout(1.2,2);transform: translateX(0);*/ } #section-5.onShow .inner-cont-wrap .cont-holder ul.circle-list li { -webkit-transition: -webkit-transform 1.2s 0s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition: -moz-transform 1.2s 0s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition: -ms-transform 1.2s 0s cubic-bezier(0.5, 0, 0.5, 1); -o-transition: -o-transform 1.2s 0s cubic-bezier(0.5, 0, 0.5, 1); transition: transform 1.2s 0s cubic-bezier(0.5, 0, 0.5, 1); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } #section-5.onShow .inner-cont-wrap .cont-holder .phone-line { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } #section-5.onShow .inner-cont-wrap .cont-holder .phone-line img { -webkit-transition: -webkit-transform 0.5s 1s cubic-bezier(0, 0.5, 0.5, 1); -moz-transition: -moz-transform 0.5s 1s cubic-bezier(0, 0.5, 0.5, 1); -ms-transition: -ms-transform 0.5s 1s cubic-bezier(0, 0.5, 0.5, 1); -o-transition: -o-transform 0.5s 1s cubic-bezier(0, 0.5, 0.5, 1); transition: transform 0.5s 1s cubic-bezier(0, 0.5, 0.5, 1); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } #section-6 { background: #a3b2d3; } #section-6 .inner-cont-wrap .txt-holder { left: 698px; top: 162px; color: #28376e; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } #section-6 .inner-cont-wrap .cont-holder { top: 118px; left: 175px; } #section-6 .inner-cont-wrap .cont-holder ul.circle-list li { position: absolute; width: 800px; height: 800px; background: url("../img/content_4/main/c_bg.png") no-repeat 0 0; top: -118px; } #section-6 .inner-cont-wrap .cont-holder ul.circle-list li.c1 { left: -592px; opacity: 0; filter: alpha(opacity=0); } #section-6 .inner-cont-wrap .cont-holder ul.circle-list li.c2 { left: -269px; opacity: 0; filter: alpha(opacity=0); } #section-6 .inner-cont-wrap .cont-holder ul.circle-list li.c3 { left: 56px; opacity: 0; filter: alpha(opacity=0); } #section-6 .inner-cont-wrap .cont-holder ul.circle-list li.c4 { left: 378px; opacity: 0; filter: alpha(opacity=0); } #section-6 .inner-cont-wrap .cont-holder ul.circle-list li.c5 { left: 700px; opacity: 0.9; filter: alpha(opacity=90); -webkit-transform: translateX(-1292px); -moz-transform: translateX(-1292px); -ms-transform: translateX(-1292px); -o-transform: translateX(-1292px); transform: translateX(-1292px); } #section-6 .inner-cont-wrap .cont-holder .phone-line { transform: translateX(0px); } #section-6.onShow .inner-cont-wrap .txt-holder { -webkit-transition: -webkit-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; -moz-transition: -moz-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; -ms-transition: -ms-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; -o-transition: -o-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; transition: transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s ease-in; 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-6.onShow .inner-cont-wrap .cont-holder ul.circle-list li.c1 { -webkit-transition: opacity 0.15s cubic-bezier(0,0,1,1); -webkit-transition-delay: 0.15s; -moz-transition: opacity 0.15s cubic-bezier(0,0,1,1); -moz-transition-delay: 0.15s; -ms-transition: opacity 0.15s cubic-bezier(0,0,1,1); -ms-transition-delay: 0.15s; -o-transition: opacity 0.15s cubic-bezier(0,0,1,1); -o-transition-delay: 0.15s; transition: opacity 0.15s cubic-bezier(0,0,1,1); transition-delay: 0.15s; opacity: 0.1; filter: alpha(opacity=10); } #section-6.onShow .inner-cont-wrap .cont-holder ul.circle-list li.c2 { -webkit-transition: opacity 0.15s cubic-bezier(0,0,1,1); -webkit-transition-delay: 0.5s; -moz-transition: opacity 0.15s cubic-bezier(0,0,1,1); -moz-transition-delay: 0.5s; -ms-transition: opacity 0.15s cubic-bezier(0,0,1,1); -ms-transition-delay: 0.5s; -o-transition: opacity 0.15s cubic-bezier(0,0,1,1); -o-transition-delay: 0.5s; transition: opacity 0.15s cubic-bezier(0,0,1,1); transition-delay: 0.5s; opacity: 0.2; filter: alpha(opacity=20); } #section-6.onShow .inner-cont-wrap .cont-holder ul.circle-list li.c3 { -webkit-transition: opacity 0.15s cubic-bezier(0,0,1,1); -webkit-transition-delay: 0.75s; -moz-transition: opacity 0.15s cubic-bezier(0,0,1,1); -moz-transition-delay: 0.75s; -ms-transition: opacity 0.15s cubic-bezier(0,0,1,1); -ms-transition-delay: 0.75s; -o-transition: opacity 0.15s cubic-bezier(0,0,1,1); -o-transition-delay: 0.75s; transition: opacity 0.15s cubic-bezier(0,0,1,1); transition-delay: 0.75s; opacity: 0.3; filter: alpha(opacity=30); } #section-6.onShow .inner-cont-wrap .cont-holder ul.circle-list li.c4 { -webkit-transition: opacity 0.15s cubic-bezier(0,0,1,1); -webkit-transition-delay: 1s; -moz-transition: opacity 0.15s cubic-bezier(0,0,1,1); -moz-transition-delay: 1s; -ms-transition: opacity 0.15s cubic-bezier(0,0,1,1); -ms-transition-delay: 1s; -o-transition: opacity 0.15s cubic-bezier(0,0,1,1); -o-transition-delay: 1s; transition: opacity 0.15s cubic-bezier(0,0,1,1); transition-delay: 1s; opacity: 0.4; filter: alpha(opacity=40); } #section-6.onShow .inner-cont-wrap .cont-holder ul.circle-list li.c5 { -webkit-transition: -webkit-transform 1.7s ease-in-out; -moz-transition: -moz-transform 1.7s ease-in-out; -ms-transition: -ms-transform 1.7s ease-in-out; -o-transition: -o-transform 1.7s ease-in-out; transition: transform 1.7s ease-in-out; opacity: 0.9; filter: alpha(opacity=90); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } #section-6.onShow .inner-cont-wrap .cont-holder .phone-line { -webkit-transition: -webkit-transform 0.7s 1s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition: -moz-transform 0.7s 1s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition: -ms-transform 0.7s 1s cubic-bezier(0.5, 0, 0.5, 1); -o-transition: -o-transform 0.7s 1s cubic-bezier(0.5, 0, 0.5, 1); transition: transform 0.7s 1s cubic-bezier(0.5, 0, 0.5, 1); transform: translateX(0); } #section-6.onShow .inner-cont-wrap .cont-holder .phone-line img { -webkit-transition: -webkit-transform 0.5s 0.8s cubic-bezier(0, 0.5, 0.5, 1); -moz-transition: -moz-transform 0.5s 0.8s cubic-bezier(0, 0.5, 0.5, 1); -ms-transition: -ms-transform 0.5s 0.8s cubic-bezier(0, 0.5, 0.5, 1); -o-transition: -o-transform 0.5s 0.8s cubic-bezier(0, 0.5, 0.5, 1); transition: transform 0.5s 0.8s cubic-bezier(0, 0.5, 0.5, 1); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } #section-8 .related-stories-wrap { position: relative; width: 100%; height: 616px; background-color: #fff; top: 50%; margin-top: -308px; } .hide { visibility: hidden; } .video-popup { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999999; background-color: #000; opacity: 0; filter: alpha(opacity=0); } .video-popup iframe { width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; } .video-popup .btn-close { position: absolute; top: 30px; right: 30px; width: 92px; height: 92px; background: url(../img/btn_close_w.png) no-repeat; text-indent: -999em; font-size: 0; } /* rotate */ /* transform */ /* transition */ /* transform-transition */ /* css-transition */ /* transform-css-transition */ /* keyframes */ /*@include keyframes(scroll-loop) { 0% { @include transform(translateY(0)); } 50% { @include transform(translateY(0)); } 100% { @include transform(translateY(0)); } }*/ @-webkit-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-moz-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-ms-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-o-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-webkit-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-moz-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-ms-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-o-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-webkit-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-ms-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-o-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-moz-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-ms-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-o-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-webkit-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @keyframes content-1-c1 { 0% { -webkit-transform: translate(-200px, -200px); -moz-transform: translate(-200px, -200px); -ms-transform: translate(-200px, -200px); -o-transform: translate(-200px, -200px); transform: translate(-200px, -200px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 85% { -webkit-transform: translate(5px, 5px); -moz-transform: translate(5px, 5px); -ms-transform: translate(5px, 5px); -o-transform: translate(5px, 5px); transform: translate(5px, 5px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c2 { 0% { -webkit-transform: translate(200px, -300px); -moz-transform: translate(200px, -300px); -ms-transform: translate(200px, -300px); -o-transform: translate(200px, -300px); transform: translate(200px, -300px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(5px, 8px); -moz-transform: translate(5px, 8px); -ms-transform: translate(5px, 8px); -o-transform: translate(5px, 8px); transform: translate(5px, 8px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c3 { 0% { -webkit-transform: translate(-300px, 300px); -moz-transform: translate(-300px, 300px); -ms-transform: translate(-300px, 300px); -o-transform: translate(-300px, 300px); transform: translate(-300px, 300px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(-5px, 3px); -moz-transform: translate(-5px, 3px); -ms-transform: translate(-5px, 3px); -o-transform: translate(-5px, 3px); transform: translate(-5px, 3px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c4 { 0% { -webkit-transform: translate(300px, 400px); -moz-transform: translate(300px, 400px); -ms-transform: translate(300px, 400px); -o-transform: translate(300px, 400px); transform: translate(300px, 400px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(3px, 5px); -moz-transform: translate(3px, 5px); -ms-transform: translate(3px, 5px); -o-transform: translate(3px, 5px); transform: translate(3px, 5px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-circle-rotate { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 25% { -webkit-transform: translate(-30px, 20px) rotate(180deg); -moz-transform: translate(-30px, 20px) rotate(180deg); -ms-transform: translate(-30px, 20px) rotate(180deg); -o-transform: translate(-30px, 20px) rotate(180deg); transform: translate(-30px, 20px) rotate(180deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 50% { -webkit-transform: translate(60px, -50px) rotate(360deg); -moz-transform: translate(60px, -50px) rotate(360deg); -ms-transform: translate(60px, -50px) rotate(360deg); -o-transform: translate(60px, -50px) rotate(360deg); transform: translate(60px, -50px) rotate(360deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 75% { -webkit-transform: translate(40px, 50px) rotate(540deg); -moz-transform: translate(40px, 50px) rotate(540deg); -ms-transform: translate(40px, 50px) rotate(540deg); -o-transform: translate(40px, 50px) rotate(540deg); transform: translate(40px, 50px) rotate(540deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: translate(0px, 0px) rotate(720deg); -moz-transform: translate(0px, 0px) rotate(720deg); -ms-transform: translate(0px, 0px) rotate(720deg); -o-transform: translate(0px, 0px) rotate(720deg); transform: translate(0px, 0px) rotate(720deg); } } @keyframes content-1-circle-rotate2 { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 25% { -webkit-transform: translate(-60px, 20px) rotate(-180deg); -moz-transform: translate(-60px, 20px) rotate(-180deg); -ms-transform: translate(-60px, 20px) rotate(-180deg); -o-transform: translate(-60px, 20px) rotate(-180deg); transform: translate(-60px, 20px) rotate(-180deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 50% { -webkit-transform: translate(60px, -50px) rotate(-360deg); -moz-transform: translate(60px, -50px) rotate(-360deg); -ms-transform: translate(60px, -50px) rotate(-360deg); -o-transform: translate(60px, -50px) rotate(-360deg); transform: translate(60px, -50px) rotate(-360deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 75% { -webkit-transform: translate(20px, 50px) rotate(-540deg); -moz-transform: translate(20px, 50px) rotate(-540deg); -ms-transform: translate(20px, 50px) rotate(-540deg); -o-transform: translate(20px, 50px) rotate(-540deg); transform: translate(20px, 50px) rotate(-540deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: translate(0px, 0px) rotate(-720deg); -moz-transform: translate(0px, 0px) rotate(-720deg); -ms-transform: translate(0px, 0px) rotate(-720deg); -o-transform: translate(0px, 0px) rotate(-720deg); transform: translate(0px, 0px) rotate(-720deg); } } @keyframes content-2-circle { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.3; filter: alpha(opacity=30); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1.5, 1.5); -moz-transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); -o-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); opacity: 0; filter: alpha(opacity=0); } } @keyframes content-2-circle-rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: rotate(-720deg); -moz-transform: rotate(-720deg); -ms-transform: rotate(-720deg); -o-transform: rotate(-720deg); transform: rotate(-720deg); } } /* line */ /* font setting */ .content-1-area .content-1 { left: 0; width: 1688px; } .content-1-area .content-1 .img-holder { left: -5px; top: 49px; } .content-1-area .content-1 .txt-holder { left: 688px; top: 86px; width: auto; height: auto; } .content-1-area .content-2 { left: 1688px; width: 2130px; } .content-1-area .content-2 .img-holder { left: 706px; top: 50px; } .content-1-area .content-2 .txt-holder { left: 0; top: 88px; width: auto; height: auto; } .content-1-area .content-3 { left: 3823px; width: 2363px; } .content-1-area .content-3 .img-holder { left: 601px; top: 94px; } .content-1-area .content-3 .txt-holder { left: 0; top: 88px; width: auto; height: auto; } .content-1-area .guide { position: absolute; left: 0; top: 0; margin-left: -175px; margin-top: -138px; opacity: 1.0; } .tab-content-holder > div { visibility: hidden; position: absolute; top: 0; left: 0; } .tab-content-holder > div.onShow { visibility: visible; } .tab-content-holder > div:first-child { position: relative; top: auto; left: auto; } .content-1-area { color: #454853; } .content-1-area .content-1 .img-holder { width: 556px; height: 670px; } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-1 { position: absolute; left: 0; top: 0; } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-1 .fix-sticker { position: absolute; left: 119px; top: 45px; } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-1 ol.sticker-list li { position: absolute; left: 119px; top: 45px; opacity: 0; filter: alpha(opacity=0); } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-1 ol.sticker-list li.active { z-index: 10; -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -ms-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; transition: opacity 0.5s linear; opacity: 1; filter: alpha(opacity=100); } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-1 ol.sticker-list li.on { z-index: 5; opacity: 1; filter: alpha(opacity=100); } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-1 .fix-obj div { position: absolute; } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-1 .fix-obj .phcover { z-index: 10; left: 92px; } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-1 .fix-obj .ux-dp { position: absolute; left: 326px; top: 32px; -webkit-transform: translateX(-225px); -moz-transform: translateX(-225px); -ms-transform: translateX(-225px); -o-transform: translateX(-225px); transform: translateX(-225px); } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-1 .fix-obj .ux-dp.onTrans { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.7s 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) ; -moz-transition: -moz-transform 0.7s 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) ; -ms-transition: -ms-transform 0.7s 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) ; -o-transition: -o-transform 0.7s 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) ; transition: transform 0.7s 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) ; } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-2 .fix-emoji { position: absolute; left: 119px; top: 43px; } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-2 .emoji-list { position: absolute; left: 119px; top: 43px; } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-2 .emoji-list li { position: absolute; top: 0; left: 0; opacity: 0; filter: alpha(opacity=0); } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-2 .emoji-list li.active { z-index: 10; -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -ms-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; transition: opacity 0.5s linear; opacity: 1; filter: alpha(opacity=100); } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-2 .emoji-list li.on { z-index: 5; opacity: 1; filter: alpha(opacity=100); } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-2 .fix-obj { z-index: 10; position: absolute; top: 0; left: 92px; } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-2 .emoji-icon { position: absolute; top: 0px; left: 0px; z-index: 10; } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-2 .emoji-icon li { border-radius: 50%; overflow: hidden; -webkit-box-shadow: 8px 10px 18px 0px rgba(62, 19, 39, 0.15); -moz-box-shadow: 8px 10px 18px 0px rgba(62, 19, 39, 0.15); box-shadow: 8px 10px 18px 0px rgba(62, 19, 39, 0.15); } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-2 .emoji-icon li img { width: 100%; } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-2 .emoji-icon .icon-1 { position: absolute; top: 352px; left: 352px; width: 228px; height: 228px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-2 .emoji-icon .icon-1 img { display: block; position: absolute; left: 50%; top: 50%; width: 107%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-2 .emoji-icon .icon-2 { position: absolute; top: 331px; left: 6px; width: 126px; height: 126px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-2 .emoji-icon.onTrans .icon-1 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.8s 0s ease-out, opacity 0.8s 0s; -moz-transition: -moz-transform 0.8s 0s ease-out, opacity 0.8s 0s; -ms-transition: -ms-transform 0.8s 0s ease-out, opacity 0.8s 0s; -o-transition: -o-transform 0.8s 0s ease-out, opacity 0.8s 0s; transition: transform 0.8s 0s ease-out, opacity 0.8s 0s; } .content-1-area .content-1 .img-holder .tab-content-holder .tab-content-2 .emoji-icon.onTrans .icon-2 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s; -moz-transition: -moz-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s; -ms-transition: -ms-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s; -o-transition: -o-transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s; transition: transform 0.7s 0.5s ease-out, opacity 0.7s 0.5s; } .content-1-area .content-1 .txt-holder { width: 650px; color: #454853; } .content-1-area .content-1 .txt-holder .tap-type { position: relative; margin-top: 138px; } .content-1-area .content-1 .txt-holder .tap-type li { float: left; } .content-1-area .content-1 .txt-holder .tap-type li a { margin-right: 10px; padding: 0 10px 5px 10px; color: #454853; opacity: 0.25; filter: alpha(opacity=25); font-family: samsungonelatin1000; font-size: 20px; } .content-1-area .content-1 .txt-holder .tap-type li p { position: absolute; left: 0; top: 0; visibility: hidden; margin: 0; margin-top: 56px !important; } .content-1-area .content-1 .txt-holder .tap-type li.on a { border-bottom: 3px solid #454853; opacity: 1; filter: alpha(opacity=100); } .content-1-area .content-1 .txt-holder .tap-type li.on p { visibility: visible; } .content-1-area .content-1 .txt-holder .tap-type .part1 { margin-right: 19px; } .content-1-area .content-1 .txt-holder .tap-type .part2 span.refer { position: absolute; left: 0; top: 109px; display: block; width: 100%; color: #aeacaa; font-family: 'samsungonelatin600'; font-size: 16px; line-height: 22px; letter-spacing: -0.015em; } .content-1-area .content-1 .txt-holder .tap-type .part2 span.refer em { margin-left: -9px; } .content-1-area .content-2 .img-holder .ph-bg { background-color: #1a1a1a; position: absolute; top: 45px; left: 26px; width: 271px; height: 557px; } .content-1-area .content-2 .img-holder .fixed-txt { position: absolute; top: 45px; left: 26px; z-index: 999; } .content-1-area .content-2 .img-holder .ph-icon li { position: absolute; top: 70px; left: 95px; z-index: 999; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); -webkit-transition-delay: 0s; -moz-transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); -moz-transition-delay: 0s; -ms-transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); -ms-transition-delay: 0s; -o-transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); -o-transition-delay: 0s; transition: opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-delay: 0s; } .content-1-area .content-2 .img-holder .ph-icon li.on { opacity: 1; filter: alpha(opacity=100); } .content-1-area .content-2 .img-holder .edge-name li { position: absolute; bottom: -16px; left: 48%; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translate(-50%); -moz-transform: translate(-50%); -ms-transform: translate(-50%); -o-transform: translate(-50%); transform: translate(-50%); -webkit-transition: opacity 0.25s cubic-bezier(0, 0.5, 0.5, 1); -webkit-transition-delay: 0s; -moz-transition: opacity 0.25s cubic-bezier(0, 0.5, 0.5, 1); -moz-transition-delay: 0s; -ms-transition: opacity 0.25s cubic-bezier(0, 0.5, 0.5, 1); -ms-transition-delay: 0s; -o-transition: opacity 0.25s cubic-bezier(0, 0.5, 0.5, 1); -o-transition-delay: 0s; transition: opacity 0.25s cubic-bezier(0, 0.5, 0.5, 1); transition-delay: 0s; font-family: 'samsungonelatin600'; font-size: 18px; color: #454853; letter-spacing: 0; } .content-1-area .content-2 .img-holder .edge-name li.on { opacity: 1; filter: alpha(opacity=100); } .content-1-area .content-2 .img-holder .bx-wrapper { position: absolute; left: 0; top: 0; width: 334px; height: 662px; } .content-1-area .content-2 .img-holder .bx-wrapper .bx-pager { position: absolute; right: 59px; top: -18px; font-size: 16px; font-family: 'samsungonelatin600'; color: #454853; letter-spacing: -0.065em; } .content-1-area .content-2 .img-holder .bx-wrapper .bx-viewport { height: 100% !important; } .content-1-area .content-2 .img-holder .bx-wrapper .bx-pager.bx-default-pager a { background: rgba(124, 65, 96, 0.2); width: 12px; height: 12px; margin: 0 12px 0 0; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } .content-1-area .content-2 .img-holder .bx-wrapper .bx-pager.bx-default-pager a.active { background-color: #454853; } .content-1-area .content-2 .img-holder ol.wallpaper-slider { position: absolute; } .content-1-area .content-2 .img-holder ol.wallpaper-slider li { position: absolute; top: 45px; left: 27px; } .content-1-area .content-2 .img-holder ol.edge-slider { position: absolute; } .content-1-area .content-2 .img-holder ol.edge-slider li { position: absolute; top: 45px; left: 26px; } .content-1-area .content-2 .img-holder .tab-content-holder .ph-cover { position: relative; z-index: 999; } .content-1-area .content-2 .img-holder .btn { position: absolute; width: 460px; top: 50%; left: -67px; margin-top: -31px; clear: both; } .content-1-area .content-2 .img-holder .btn li a { display: block; width: 50px; height: 50px; } .content-1-area .content-2 .img-holder .btn li.left { float: left; } .content-1-area .content-2 .img-holder .btn li.left a { background: url("../img/btn_left.png") no-repeat 13px 1px; } .content-1-area .content-2 .img-holder .btn li.right { float: right; } .content-1-area .content-2 .img-holder .btn li.right a { background: url("../img/btn_right.png") no-repeat 13px 1px; } .content-1-area .content-2 .txt-holder { color: #454853; } .content-1-area .content-2 .tap-holder { position: absolute; left: 1166px; top: 439px; color: #454853; } .content-1-area .content-2 .tap-holder .tap-type { position: relative; width: 630px; } .content-1-area .content-2 .tap-holder .tap-type li { float: left; } .content-1-area .content-2 .tap-holder .tap-type li a { margin-right: 10px; padding: 0 10px 5px 10px; color: #454853; opacity: 0.25; filter: alpha(opacity=25); font-family: samsungonelatin1000; font-size: 20px; } .content-1-area .content-2 .tap-holder .tap-type li p { position: absolute; left: 0; top: 0; visibility: hidden; margin: 0; margin-top: 58px !important; font-family: 'samsungonelatin600'; font-size: 18px; letter-spacing: -0.015em; line-height: 33px; } .content-1-area .content-2 .tap-holder .tap-type li.on a { border-bottom: 3px solid #454853; opacity: 1; filter: alpha(opacity=100); } .content-1-area .content-2 .tap-holder .tap-type li.on p { visibility: visible; } .content-1-area .content-2 .tap-holder .tap-type .part1 { margin-right: 30px; } .content-1-area .content-3 .img-holder .bubble-area .bubbles { position: absolute; left: 0px; top: 0px; width: 1817px; height: 800px; } .content-1-area .content-3 .img-holder .bubble-area .bubbles .left-bubble-box { background-image: url("../img/content_1/content_1_3/left_bubble.png"); position: absolute; left: 125px; top: 128px; width: 370px; height: 456px; } .content-1-area .content-3 .img-holder .bubble-area .bubbles .left-bubble-box .txt-interest { background-image: url("../img/content_1/content_1_3/txt_interest.png"); position: absolute; left: 50px; top: 58px; width: 121px; height: 49px; } .content-1-area .content-3 .img-holder .bubble-area .bubbles .left-bubble-box .txt-anticipation { background-image: url("../img/content_1/content_1_3/txt_anticipation.png"); position: absolute; left: 88px; top: 176px; width: 171px; height: 56px; } .content-1-area .content-3 .img-holder .bubble-area .bubbles .left-bubble-box .txt-vigilance { background-image: url("../img/content_1/content_1_3/txt_vigilance.png"); position: absolute; left: 167px; top: 320px; width: 136px; height: 56px; } .content-1-area .content-3 .img-holder .bubble-area .bubbles .middle-bubble-box { background-image: url("../img/content_1/content_1_3/middle_bubble.png"); position: absolute; left: 440px; top: 46px; width: 254px; height: 487px; } .content-1-area .content-3 .img-holder .bubble-area .bubbles .middle-bubble-box .txt-ecstasy { background-image: url("../img/content_1/content_1_3/txt_ecstasy.png"); position: absolute; left: 66px; top: 50px; width: 126px; height: 56px; } .content-1-area .content-3 .img-holder .bubble-area .bubbles .middle-bubble-box .txt-joy { background-image: url("../img/content_1/content_1_3/txt_joy.png"); position: absolute; left: 96px; top: 182px; width: 67px; height: 56px; } .content-1-area .content-3 .img-holder .bubble-area .bubbles .middle-bubble-box .txt-serenity { background-image: url("../img/content_1/content_1_3/txt_serenity.png"); position: absolute; left: 70px; top: 355px; width: 117px; height: 53px; } .content-1-area .content-3 .img-holder .bubble-area .bubbles .right-bubble-box { background-image: url("../img/content_1/content_1_3/right_bubble.png"); position: absolute; left: 635px; top: 130px; width: 370px; height: 456px; } .content-1-area .content-3 .img-holder .bubble-area .bubbles .right-bubble-box .txt-admiration { background-image: url("../img/content_1/content_1_3/txt_admiration.png"); position: absolute; left: 48px; top: 323px; width: 160px; height: 51px; } .content-1-area .content-3 .img-holder .bubble-area .bubbles .right-bubble-box .txt-trust { background-image: url("../img/content_1/content_1_3/txt_trust.png"); position: absolute; left: 160px; top: 182px; width: 89px; height: 49px; } .content-1-area .content-3 .img-holder .bubble-area .bubbles .right-bubble-box .txt-acceptance { background-image: url("../img/content_1/content_1_3/txt_acceptance.png"); position: absolute; left: 178px; top: 53px; width: 162px; height: 53px; } .content-1-area .content-3 .img-holder .bubble-area .word .txt { position: absolute; font-family: 'samsungonelatin800'; font-size: 26px; letter-spacing: -0.015em; color: rgba(69, 72, 83, 0.6); } .content-1-area .content-3 .img-holder .bubble-area .word .txt-0 { left: 0; top: 83px; } .content-1-area .content-3 .img-holder .bubble-area .word .txt-1 { left: 307px; top: -4px; } .content-1-area .content-3 .img-holder .bubble-area .word .txt-2 { left: 741px; top: -4px; } .content-1-area .content-3 .img-holder .bubble-area .word .txt-3 { left: 988px; top: 82px; } .content-1-area .content-3 .img-holder .bubble-area span.refer { position: absolute; left: 88px; top: 517px; display: block; width: 270px; color: #aeacaa; font-family: 'samsungonelatin600'; font-size: 16px; line-height: 22px; letter-spacing: -0.015em; } .content-1-area .content-3 .img-holder .bubble-area span.refer em { margin-left: -9px; } .content-1-area .content-3 .img-holder .sound-wave-area { position: absolute; left: -195px; top: 44px; } .content-1-area .content-3 .des-holder { position: absolute; left: 0px; top: 202px; } .content-1-area .content-3 .des-holder p { font-family: 'samsungonelatin600'; font-size: 18px; letter-spacing: -0.015em; line-height: 33px; } .content-1-area .content-3 .des-holder p a { display: block; color: #454853; margin-top: 60px; } .content-1-area .content-3 .des-holder p a span { display: inline; margin-left: 8px; } .content-1-area .content-3 .des-holder p a em { font-size: 16px; line-height: 36px; letter-spacing: -0.01em; font-family: 'samsungonelatin600'; font-size: 16px; color: #454853; } .content-1-area .content-3 .des-holder p:last-child { margin-top: 14px; } .content-1-area .content-3 .tap-holder { position: absolute; left: 1795px; top: 297px; width: 100%; } .content-1-area .content-3 .tap-holder .tap-type { position: relative; } .content-1-area .content-3 .tap-holder .tap-type li { float: left; } .content-1-area .content-3 .tap-holder .tap-type li a { margin-right: 10px; padding: 0 10px 5px 10px; color: #454853; opacity: 0.25; filter: alpha(opacity=25); font-family: samsungonelatin1000; font-size: 20px; } .content-1-area .content-3 .tap-holder .tap-type li ul { position: absolute; left: 0; top: 0; visibility: hidden; margin: 0; margin-top: 87px !important; } .content-1-area .content-3 .tap-holder .tap-type li ul.sounds li.inner-depth { float: left; padding-right: 58px; } .content-1-area .content-3 .tap-holder .tap-type li ul.sounds li.inner-depth .sub-title { display: inline-block; font-family: 'samsungonelatin600'; font-size: 14px; color: #454853; padding-bottom: 4px; border-bottom: 1px solid #454853; } .content-1-area .content-3 .tap-holder .tap-type li ul.sounds li.inner-depth ol.list-con { padding-top: 16px; color: #454853; } .content-1-area .content-3 .tap-holder .tap-type li ul.sounds li.inner-depth ol.list-con li { float: none; padding-bottom: 5px; } .content-1-area .content-3 .tap-holder .tap-type li ul.sounds li.inner-depth ol.list-con li div { width: 165px; } .content-1-area .content-3 .tap-holder .tap-type li ul.sounds li.inner-depth ol.list-con li div span { float: left; font-family: 'samsungonelatin600'; font-size: 18px; letter-spacing: -0.015em; line-height: 40px; } .content-1-area .content-3 .tap-holder .tap-type li ul.sounds li.inner-depth ol.list-con li div a { display: block; width: 36px; height: 36px; float: right; line-height: 36px; margin-right: 0; background-image: url("../img/content_1/content_1_3/aodBtns.png"); background-position-y: top; background-repeat: no-repeat; margin-top: 5px; padding: 0; } .content-1-area .content-3 .tap-holder .tap-type li ul.sounds li.inner-depth ol.list-con li div.onShow span { font-family: 'samsungonelatin800'; } .content-1-area .content-3 .tap-holder .tap-type li ul.sounds li.inner-depth ol.list-con li div.onShow a { font-family: 'samsungonelatin800'; background-position-y: bottom; } .content-1-area .content-3 .tap-holder .tap-type li ul.sounds li.inner-depth ol.list-con li:last-child { padding-bottom: 0; } .content-1-area .content-3 .tap-holder .tap-type li ul.sounds li.inner-depth:last-child { padding-right: 0; } .content-1-area .content-3 .tap-holder .tap-type li ul.sounds a { border-bottom: none; } .content-1-area .content-3 .tap-holder .tap-type li.on a { border-bottom: 3px solid #454853; opacity: 1; filter: alpha(opacity=100); } .content-1-area .content-3 .tap-holder .tap-type li.on ul { visibility: visible; } .content-1-area .content-3 .tap-holder .tap-type .part1 { margin-right: 20px; } .content-1-area .content-3 .tap-holder .tap-type .part2 { margin-right: 20px; } .content-1-area .content-3 .tap-holder .tap-type .part3 { margin-right: 20px; } /* rotate */ /* transform */ /* transition */ /* transform-transition */ /* css-transition */ /* transform-css-transition */ /* keyframes */ /*@include keyframes(scroll-loop) { 0% { @include transform(translateY(0)); } 50% { @include transform(translateY(0)); } 100% { @include transform(translateY(0)); } }*/ @-webkit-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-moz-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-ms-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-o-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-webkit-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-moz-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-ms-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-o-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-webkit-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-ms-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-o-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-moz-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-ms-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-o-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-webkit-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @keyframes content-1-c1 { 0% { -webkit-transform: translate(-200px, -200px); -moz-transform: translate(-200px, -200px); -ms-transform: translate(-200px, -200px); -o-transform: translate(-200px, -200px); transform: translate(-200px, -200px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 85% { -webkit-transform: translate(5px, 5px); -moz-transform: translate(5px, 5px); -ms-transform: translate(5px, 5px); -o-transform: translate(5px, 5px); transform: translate(5px, 5px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c2 { 0% { -webkit-transform: translate(200px, -300px); -moz-transform: translate(200px, -300px); -ms-transform: translate(200px, -300px); -o-transform: translate(200px, -300px); transform: translate(200px, -300px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(5px, 8px); -moz-transform: translate(5px, 8px); -ms-transform: translate(5px, 8px); -o-transform: translate(5px, 8px); transform: translate(5px, 8px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c3 { 0% { -webkit-transform: translate(-300px, 300px); -moz-transform: translate(-300px, 300px); -ms-transform: translate(-300px, 300px); -o-transform: translate(-300px, 300px); transform: translate(-300px, 300px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(-5px, 3px); -moz-transform: translate(-5px, 3px); -ms-transform: translate(-5px, 3px); -o-transform: translate(-5px, 3px); transform: translate(-5px, 3px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c4 { 0% { -webkit-transform: translate(300px, 400px); -moz-transform: translate(300px, 400px); -ms-transform: translate(300px, 400px); -o-transform: translate(300px, 400px); transform: translate(300px, 400px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(3px, 5px); -moz-transform: translate(3px, 5px); -ms-transform: translate(3px, 5px); -o-transform: translate(3px, 5px); transform: translate(3px, 5px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-circle-rotate { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 25% { -webkit-transform: translate(-30px, 20px) rotate(180deg); -moz-transform: translate(-30px, 20px) rotate(180deg); -ms-transform: translate(-30px, 20px) rotate(180deg); -o-transform: translate(-30px, 20px) rotate(180deg); transform: translate(-30px, 20px) rotate(180deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 50% { -webkit-transform: translate(60px, -50px) rotate(360deg); -moz-transform: translate(60px, -50px) rotate(360deg); -ms-transform: translate(60px, -50px) rotate(360deg); -o-transform: translate(60px, -50px) rotate(360deg); transform: translate(60px, -50px) rotate(360deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 75% { -webkit-transform: translate(40px, 50px) rotate(540deg); -moz-transform: translate(40px, 50px) rotate(540deg); -ms-transform: translate(40px, 50px) rotate(540deg); -o-transform: translate(40px, 50px) rotate(540deg); transform: translate(40px, 50px) rotate(540deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: translate(0px, 0px) rotate(720deg); -moz-transform: translate(0px, 0px) rotate(720deg); -ms-transform: translate(0px, 0px) rotate(720deg); -o-transform: translate(0px, 0px) rotate(720deg); transform: translate(0px, 0px) rotate(720deg); } } @keyframes content-1-circle-rotate2 { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 25% { -webkit-transform: translate(-60px, 20px) rotate(-180deg); -moz-transform: translate(-60px, 20px) rotate(-180deg); -ms-transform: translate(-60px, 20px) rotate(-180deg); -o-transform: translate(-60px, 20px) rotate(-180deg); transform: translate(-60px, 20px) rotate(-180deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 50% { -webkit-transform: translate(60px, -50px) rotate(-360deg); -moz-transform: translate(60px, -50px) rotate(-360deg); -ms-transform: translate(60px, -50px) rotate(-360deg); -o-transform: translate(60px, -50px) rotate(-360deg); transform: translate(60px, -50px) rotate(-360deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 75% { -webkit-transform: translate(20px, 50px) rotate(-540deg); -moz-transform: translate(20px, 50px) rotate(-540deg); -ms-transform: translate(20px, 50px) rotate(-540deg); -o-transform: translate(20px, 50px) rotate(-540deg); transform: translate(20px, 50px) rotate(-540deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: translate(0px, 0px) rotate(-720deg); -moz-transform: translate(0px, 0px) rotate(-720deg); -ms-transform: translate(0px, 0px) rotate(-720deg); -o-transform: translate(0px, 0px) rotate(-720deg); transform: translate(0px, 0px) rotate(-720deg); } } @keyframes content-2-circle { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.3; filter: alpha(opacity=30); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1.5, 1.5); -moz-transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); -o-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); opacity: 0; filter: alpha(opacity=0); } } @keyframes content-2-circle-rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: rotate(-720deg); -moz-transform: rotate(-720deg); -ms-transform: rotate(-720deg); -o-transform: rotate(-720deg); transform: rotate(-720deg); } } /* line */ /* font setting */ .content-2-area { color: #fff; } .content-2-area .content-1 { left: 0; width: 1720px; } .content-2-area .content-1 .img-holder { left: 716px; top: 79px; } .content-2-area .content-1 .txt-holder { left: 102px; top: 84px; } .content-2-area .content-2 { left: 1718px; width: 2040px; } .content-2-area .content-2 .txt-holder { left: 0px; top: 227px; } .content-2-area .content-2 .phone-frame-holder { position: absolute; left: 665px; top: 48px; } .content-2-area .content-2 .tab-content-holder { left: 660px; top: 52px; } .content-2-area .content-3 { left: 3769px; width: 1997px; } .content-2-area .content-3 .tab-content-holder { position: absolute; left: 547px; top: 40px; } .content-2-area .content-3 .txt-holder { left: 0; top: 84px; } .content-2-area .guide { position: absolute; left: 0; top: 0; margin-left: -175px; margin-top: -138px; opacity: 0.5; } .content-2-area .content-1 .txt-holder .sub-title-box { margin-top: 109px; } .content-2-area .content-1 .txt-holder .sub-title-box .sub-title { padding: 0 10px 5px 10px; border-bottom: 3px solid #fff; font-family: samsungonelatin1000; font-size: 20px; color: #fff; } .content-2-area .content-1 .txt-holder .sub-title-box p { margin-top: 25px !important; } .content-2-area .content-1 .txt-holder .sub-title-box p span { display: block; } .content-2-area .content-1 .txt-holder .sub-title-box p span:first-child { margin-bottom: 15px; } .content-2-area .content-1 .img-holder { width: 666px; height: 606px; } .content-2-area .content-1 .img-holder div { position: absolute; } .content-2-area .content-1 .img-holder .ph-1 { left: 49px; top: 0; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .content-2-area .content-1 .img-holder .ph-2 { left: 347px; top: 0; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .content-2-area .content-1 .img-holder .finger-print { left: 266px; top: 210px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.85); -moz-transform: scale(0.85); -ms-transform: scale(0.85); -o-transform: scale(0.85); transform: scale(0.85); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .content-2-area .content-1 .img-holder.onTrans .ph-1 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.8s 0s ease-out, opacity 0.8s 0s; -moz-transition: -moz-transform 0.8s 0s ease-out, opacity 0.8s 0s; -ms-transition: -ms-transform 0.8s 0s ease-out, opacity 0.8s 0s; -o-transition: -o-transform 0.8s 0s ease-out, opacity 0.8s 0s; transition: transform 0.8s 0s ease-out, opacity 0.8s 0s; } .content-2-area .content-1 .img-holder.onTrans .ph-2 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.7s 0.4s ease-out, opacity 0.7s 0.4s; -moz-transition: -moz-transform 0.7s 0.4s ease-out, opacity 0.7s 0.4s; -ms-transition: -ms-transform 0.7s 0.4s ease-out, opacity 0.7s 0.4s; -o-transition: -o-transform 0.7s 0.4s ease-out, opacity 0.7s 0.4s; transition: transform 0.7s 0.4s ease-out, opacity 0.7s 0.4s; } .content-2-area .content-1 .img-holder.onTrans .finger-print { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.3s 1.0s ease-out, opacity 0.6s 1s; -moz-transition: -moz-transform 1.3s 1.0s ease-out, opacity 0.6s 1s; -ms-transition: -ms-transform 1.3s 1.0s ease-out, opacity 0.6s 1s; -o-transition: -o-transform 1.3s 1.0s ease-out, opacity 0.6s 1s; transition: transform 1.3s 1.0s ease-out, opacity 0.6s 1s; } .content-2-area .content-2 .txt-holder { width: auto; height: auto; } .content-2-area .content-2 .tab-content-holder { position: absolute; } .content-2-area .content-2 .tab-content-holder .tab-content-1 { visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .content-2-area .content-2 .tab-content-holder .tab-content-1 ul.thumb li { position: absolute; left: 30px; top: 38px; opacity: 0; filter: alpha(opacity=0); } .content-2-area .content-2 .tab-content-holder .tab-content-1 ul.thumb li.onShow { opacity: 1; filter: alpha(opacity=100); } .content-2-area .content-2 .tab-content-holder .tab-content-1 .link-tab-menu { position: absolute; top: 16px; left: 391px; } .content-2-area .content-2 .tab-content-holder .tab-content-1 .link-tab-menu ul { display: block; position: absolute; width: 310px; height: 30px; } .content-2-area .content-2 .tab-content-holder .tab-content-1 .link-tab-menu ul li { display: inline-block; position: relative; float: left; width: 118px; height: 30px; text-align: center; margin-right: 11px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); } .content-2-area .content-2 .tab-content-holder .tab-content-1 .link-tab-menu ul li a { display: block; height: 30px; font-family: samsungonelatin600; font-size: 14px; line-height: 30px; color: rgba(255, 255, 255, 0.4); border-radius: 100px; background-color: #4a4c5c; } .content-2-area .content-2 .tab-content-holder .tab-content-1 .link-tab-menu ul li.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.5s 0s ease-out,opacity 0.3s 0s linear; -moz-transition: -moz-transform 0.5s 0s ease-out,opacity 0.3s 0s linear; -ms-transition: -ms-transform 0.5s 0s ease-out,opacity 0.3s 0s linear; -o-transition: -o-transform 0.5s 0s ease-out,opacity 0.3s 0s linear; transition: transform 0.5s 0s ease-out,opacity 0.3s 0s linear; } .content-2-area .content-2 .tab-content-holder .tab-content-1 .link-tab-menu ul li.on a { color: #3a3d4d; background-color: #fff; border-radius: 100px; } .content-2-area .content-2 .tab-content-holder .tab-content-1 .link-tab-menu ul li:last-child { margin-right: 0; } .content-2-area .content-2 .tab-content-holder .tab-content-1 .lists-box { position: absolute; width: 430px; height: 280px; left: 391px; top: 75px; } .content-2-area .content-2 .tab-content-holder .tab-content-1 .lists-box ol.clock { position: absolute; width: 100%; height: 100%; } .content-2-area .content-2 .tab-content-holder .tab-content-1 .lists-box ol.clock.onShow li:nth-child(1) { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 1s 0.1s ease-out, opacity 0.6s 0.1s linear ; -moz-transition: -moz-transform 1s 0.1s ease-out, opacity 0.6s 0.1s linear ; -ms-transition: -ms-transform 1s 0.1s ease-out, opacity 0.6s 0.1s linear ; -o-transition: -o-transform 1s 0.1s ease-out, opacity 0.6s 0.1s linear ; transition: transform 1s 0.1s ease-out, opacity 0.6s 0.1s linear ; } .content-2-area .content-2 .tab-content-holder .tab-content-1 .lists-box ol.clock.onShow li:nth-child(2) { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.8s 0.3s ease-out, opacity 0.6s 0.3s linear ; -moz-transition: -moz-transform 0.8s 0.3s ease-out, opacity 0.6s 0.3s linear ; -ms-transition: -ms-transform 0.8s 0.3s ease-out, opacity 0.6s 0.3s linear ; -o-transition: -o-transform 0.8s 0.3s ease-out, opacity 0.6s 0.3s linear ; transition: transform 0.8s 0.3s ease-out, opacity 0.6s 0.3s linear ; } .content-2-area .content-2 .tab-content-holder .tab-content-1 .lists-box ol.clock.onShow li:nth-child(3) { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear ; -moz-transition: -moz-transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear ; -ms-transition: -ms-transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear ; -o-transition: -o-transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear ; transition: transform 0.6s 0.5s ease-out, opacity 0.6s 0.5s linear ; } .content-2-area .content-2 .tab-content-holder .tab-content-1 .lists-box ol.clock.onShow li:nth-child(4) { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.4s 0.7s ease-out, opacity 0.6s 0.7s linear ; -moz-transition: -moz-transform 0.4s 0.7s ease-out, opacity 0.6s 0.7s linear ; -ms-transition: -ms-transform 0.4s 0.7s ease-out, opacity 0.6s 0.7s linear ; -o-transition: -o-transform 0.4s 0.7s ease-out, opacity 0.6s 0.7s linear ; transition: transform 0.4s 0.7s ease-out, opacity 0.6s 0.7s linear ; } .content-2-area .content-2 .tab-content-holder .tab-content-1 .lists-box ol.clock.onShow li:nth-child(5) { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.2s 0.9s ease-out, opacity 0.6s 0.9s linear ; -moz-transition: -moz-transform 0.2s 0.9s ease-out, opacity 0.6s 0.9s linear ; -ms-transition: -ms-transform 0.2s 0.9s ease-out, opacity 0.6s 0.9s linear ; -o-transition: -o-transform 0.2s 0.9s ease-out, opacity 0.6s 0.9s linear ; transition: transform 0.2s 0.9s ease-out, opacity 0.6s 0.9s linear ; } .content-2-area .content-2 .tab-content-holder .tab-content-1 .lists-box ol.clock.onTrans li { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0px) !important; -moz-transform: translateY(0px) !important; -ms-transform: translateY(0px) !important; -o-transform: translateY(0px) !important; transform: translateY(0px) !important; } .content-2-area .content-2 .tab-content-holder .tab-content-1 .lists-box ol.clock li { position: absolute; left: 0; top: 0; opacity: 0; filter: alpha(opacity=0); } .content-2-area .content-2 .tab-content-holder .tab-content-1 .lists-box ol.clock li.list-1 { -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .content-2-area .content-2 .tab-content-holder .tab-content-1 .lists-box ol.clock li.list-2 { left: 130px; top: 0px; -webkit-transform: translateY(26px); -moz-transform: translateY(26px); -ms-transform: translateY(26px); -o-transform: translateY(26px); transform: translateY(26px); } .content-2-area .content-2 .tab-content-holder .tab-content-1 .lists-box ol.clock li.list-3 { left: 260px; top: 0px; -webkit-transform: translateY(22px); -moz-transform: translateY(22px); -ms-transform: translateY(22px); -o-transform: translateY(22px); transform: translateY(22px); } .content-2-area .content-2 .tab-content-holder .tab-content-1 .lists-box ol.clock li.list-4 { left: 0; top: 130px; -webkit-transform: translateY(18px); -moz-transform: translateY(18px); -ms-transform: translateY(18px); -o-transform: translateY(18px); transform: translateY(18px); } .content-2-area .content-2 .tab-content-holder .tab-content-1 .lists-box ol.clock li.list-5 { left: 130px; top: 130px; -webkit-transform: translateY(14px); -moz-transform: translateY(14px); -ms-transform: translateY(14px); -o-transform: translateY(14px); transform: translateY(14px); } .content-2-area .content-2 .tab-content-holder .tab-content-1.onShow { visibility: visible; } .content-2-area .content-2 .tab-content-holder .tab-content-2 { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .content-2-area .content-2 .tab-content-holder .tab-content-2 .thumb { position: absolute; left: 32px; top: 41px; /*.transparent-box{position: absolute;left:-25px; top: -43px; @include opacity(0);}*/ } .content-2-area .content-2 .tab-content-holder .tab-content-2 .thumb .background { position: absolute; left: 0; top: 0; } .content-2-area .content-2 .tab-content-holder .tab-content-2 .thumb .background .lockscreen-txt { position: absolute; left: 0px; top: 163px; } .content-2-area .content-2 .tab-content-holder .tab-content-2 .thumb .background .lockscreen-txt div { position: absolute; -webkit-transition: opacity 0.1s linear; -moz-transition: opacity 0.1s linear; -ms-transition: opacity 0.1s linear; -o-transition: opacity 0.1s linear; transition: opacity 0.1s linear; } .content-2-area .content-2 .tab-content-holder .tab-content-2 .thumb .background .lockscreen-txt div img { image-rendering: -webkit-optimize-contrast; } .content-2-area .content-2 .tab-content-holder .tab-content-2 .thumb .background .lockscreen-txt div.on { opacity: 1; filter: alpha(opacity=100); } .content-2-area .content-2 .tab-content-holder .tab-content-2 .thumb .background .lockscreen-txt .low { opacity: 0; filter: alpha(opacity=0); } .content-2-area .content-2 .tab-content-holder .tab-content-2 .thumb .background .lockscreen-txt .max { opacity: 0; filter: alpha(opacity=0); } .content-2-area .content-2 .tab-content-holder .tab-content-2 .thumb .background .transparent-box { position: absolute; left: 0; top: 163px; width: 270px; height: 176px; background-image: url("../img/content_2/content_2_2/ph2_lockscreen_back.png"); background-size: cover; opacity: 0.5; filter: alpha(opacity=50); } .content-2-area .content-2 .tab-content-holder .tab-content-2 .bar-box { position: absolute; left: 400px; top: 44px; } .content-2-area .content-2 .tab-content-holder .tab-content-2 .bar-box span { display: block; margin-bottom: 28px; font-family: 'samsungonelatin600'; font-size: 16px; color: #fff; } .content-2-area .content-2 .tab-content-holder .tab-content-2 .bar-box > div { width: 398px; height: 71px; } .content-2-area .content-2 .tab-content-holder .tab-content-2 .bar-box > div .txt { position: absolute; font-family: 'samsungonelatin600'; font-size: 14px; color: #fff; left: 0; top: 42px; } .content-2-area .content-2 .tab-content-holder .tab-content-2 .bar-box > div .bar { position: absolute; left: 37px; top: 48px; width: 324px; height: 4px; } .content-2-area .content-2 .tab-content-holder .tab-content-2 .bar-box > div .bar .pointer { position: absolute; left: 50%; top: -13px; width: 28px; height: 28px; border-radius: 14px; background-color: #fff; z-index: 100; cursor: pointer; margin-left: -14px; } .content-2-area .content-2 .tab-content-holder .tab-content-2 .bar-box > div .track .track-progress { position: absolute; overflow: hidden; width: 50%; } .content-2-area .content-2 .tab-content-holder .tab-content-2 .bar-box > div .track .back { opacity: 0.2; filter: alpha(opacity=20); } .content-2-area .content-2 .tab-content-holder .tab-content-2 .bar-box > div .txt.txt-max { right: 0; left: auto; } .content-2-area .content-2 .tab-content-holder .tab-content-2.onShow { display: block; } .content-2-area .content-2 .tab-content-holder .tab-content-3 { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .content-2-area .content-2 .tab-content-holder .tab-content-3.onShow { display: block; } .content-2-area .content-2 .tab-content-holder .tab-content-3 .phone-video { position: relative; } .content-2-area .content-2 .tab-content-holder .tab-content-3 .phone-video .phone-vd { position: absolute; left: 32px; top: 40px; width: 272px; height: 559px; } .content-2-area .content-2 .tab-content-holder .tab-content-3 .phone-video .phone-vd video { width: 100%; height: 100%; } .content-2-area .content-2 .tab-content-holder .tab-content-3 .phone-video .phone-vd .ui { position: absolute; top: 5px; left: 18px; width: 100%; height: 100%; background: url("../img/content_2/content_2_2/tab3_ui.png") no-repeat 0 0; } .content-2-area .content-2 .tap-holder { position: absolute; left: 1052px; top: 67px; width: 100%; } .content-2-area .content-2 .tap-holder .tap-type { position: relative; margin-top: 348px; } .content-2-area .content-2 .tap-holder .tap-type li { float: left; } .content-2-area .content-2 .tap-holder .tap-type li a { margin-right: 10px; padding: 0 10px 5px 10px; color: #fff; opacity: 0.25; filter: alpha(opacity=25); font-family: samsungonelatin1000; font-size: 20px; } .content-2-area .content-2 .tap-holder .tap-type li p { position: absolute; left: 0; top: 0; visibility: hidden; margin: 0; margin-top: 52px !important; } .content-2-area .content-2 .tap-holder .tap-type li.on a { border-bottom: 3px solid #fff; opacity: 1; filter: alpha(opacity=100); } .content-2-area .content-2 .tap-holder .tap-type li.on p { visibility: visible; } .content-2-area .content-2 .tap-holder .tap-type .part1 { margin-right: 20px; } .content-2-area .content-2 .tap-holder .tap-type .part2 { margin-right: 20px; } .content-2-area .content-2 .phone-frame-holder { width: 270px; height: 193px; } .content-2-area .content-3 .txt-holder { color: #fff; } .content-2-area .content-3 .tab-content-holder { width: 730px; height: 753px; } .content-2-area .content-3 .tab-content-holder > div { visibility: hidden; } .content-2-area .content-3 .tab-content-holder > div.onShow { visibility: visible; } .content-2-area .content-3 .tab-content-holder .tab-content-1 { position: absolute; top: 0; left: 65px; width: 100%; height: 100%; } .content-2-area .content-3 .tab-content-holder .tab-content-1 .my-files .files-1 { position: absolute; left: 50px; top: 38px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .content-2-area .content-3 .tab-content-holder .tab-content-1 .my-files .files-2 { position: absolute; left: 347px; top: 38px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-85px); -moz-transform: translateX(-85px); -ms-transform: translateX(-85px); -o-transform: translateX(-85px); transform: translateX(-85px); } .content-2-area .content-3 .tab-content-holder .tab-content-1 .my-files .files-2 .menu { position: absolute; top: 46px; left: 155px; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; } .content-2-area .content-3 .tab-content-holder .tab-content-1 .my-files .files-2 .menu img { image-rendering: -webkit-optimize-contrast; } .content-2-area .content-3 .tab-content-holder .tab-content-1 .my-files .files-3 { position: absolute; left: 547px; top: 63px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; } .content-2-area .content-3 .tab-content-holder .tab-content-1 .my-files.onTrans .files-1 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.7s 0s ease-out, opacity 0.7s 0s; -moz-transition: -moz-transform 0.7s 0s ease-out, opacity 0.7s 0s; -ms-transition: -ms-transform 0.7s 0s ease-out, opacity 0.7s 0s; -o-transition: -o-transform 0.7s 0s ease-out, opacity 0.7s 0s; transition: transform 0.7s 0s ease-out, opacity 0.7s 0s; } .content-2-area .content-3 .tab-content-holder .tab-content-1 .my-files.onTrans .files-2 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.7s 0.7s ease-out, opacity 0.7s 0.7s; -moz-transition: -moz-transform 0.7s 0.7s ease-out, opacity 0.7s 0.7s; -ms-transition: -ms-transform 0.7s 0.7s ease-out, opacity 0.7s 0.7s; -o-transition: -o-transform 0.7s 0.7s ease-out, opacity 0.7s 0.7s; transition: transform 0.7s 0.7s ease-out, opacity 0.7s 0.7s; } .content-2-area .content-3 .tab-content-holder .tab-content-1 .my-files.onTrans .files-2 .menu { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); box-shadow: 11px 11px 27px 0px rgba(0, 0, 0, 0.4); -webkit-transition: -webkit-transform 0.7s 1.4s cubic-bezier(0.675, 0.000, 0.525, 0.990), box-shadow 0.7s 1.4s; -moz-transition: -moz-transform 0.7s 1.4s cubic-bezier(0.675, 0.000, 0.525, 0.990), box-shadow 0.7s 1.4s; -ms-transition: -ms-transform 0.7s 1.4s cubic-bezier(0.675, 0.000, 0.525, 0.990), box-shadow 0.7s 1.4s; -o-transition: -o-transform 0.7s 1.4s cubic-bezier(0.675, 0.000, 0.525, 0.990), box-shadow 0.7s 1.4s; transition: transform 0.7s 1.4s cubic-bezier(0.675, 0.000, 0.525, 0.990), box-shadow 0.7s 1.4s; } .content-2-area .content-3 .tab-content-holder .tab-content-1 .my-files.onTrans .files-3 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.6s 1s cubic-bezier(0.645, 0.045, 0.355, 1.000), opacity 0.6s 0.8s; -moz-transition: -moz-transform 0.6s 1s cubic-bezier(0.645, 0.045, 0.355, 1.000), opacity 0.6s 0.8s; -ms-transition: -ms-transform 0.6s 1s cubic-bezier(0.645, 0.045, 0.355, 1.000), opacity 0.6s 0.8s; -o-transition: -o-transform 0.6s 1s cubic-bezier(0.645, 0.045, 0.355, 1.000), opacity 0.6s 0.8s; transition: transform 0.6s 1s cubic-bezier(0.645, 0.045, 0.355, 1.000), opacity 0.6s 0.8s; } .content-2-area .content-3 .tab-content-holder .tab-content-2 { position: absolute; top: 0; left: 10px; width: 100%; height: 100%; } .content-2-area .content-3 .tab-content-holder .tab-content-2 .multi-window .window-1 { position: absolute; left: 105px; top: 39px; width: 319px; height: 606px; } .content-2-area .content-3 .tab-content-holder .tab-content-2 .multi-window .window-1 .dot { position: absolute; left: 137px; top: 190px; display: block; width: 31px; height: 31px; background-color: #262537; border-radius: 50%; opacity: 0.6; filter: alpha(opacity=60); } .content-2-area .content-3 .tab-content-holder .tab-content-2 .multi-window .window-2 { position: absolute; left: 403px; top: 39px; width: 320px; height: 606px; } .content-2-area .content-3 .tab-content-holder .tab-content-2 .multi-window .window-2 .app-pair { position: absolute; top: 373px; left: 31px; opacity: 0; filter: alpha(opacity=0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } .content-2-area .content-3 .tab-content-holder .tab-content-2 .multi-window.onTrans .window-1 .dot { -webkit-animation: cursor-click 10s forwards; -moz-animation: cursor-click 10s forwards; -ms-animation: cursor-click 10s forwards; -o-animation: cursor-click 10s forwards; animation: cursor-click 10s forwards; } .content-2-area .content-3 .tab-content-holder .tab-content-2 .multi-window.onTrans .window-1 .dot.removeAni { -webkit-animation: none !important; -moz-animation: none !important; -ms-animation: none !important; -o-animation: none !important; animation: none !important; } .content-2-area .content-3 .tab-content-holder .tab-content-2 .multi-window.onTrans .window-2 .app-pair { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s 2s ease-out, opacity 0.4s 2s; -moz-transition: -moz-transform 0.4s 2s ease-out, opacity 0.4s 2s; -ms-transition: -ms-transform 0.4s 2s ease-out, opacity 0.4s 2s; -o-transition: -o-transform 0.4s 2s ease-out, opacity 0.4s 2s; transition: transform 0.4s 2s ease-out, opacity 0.4s 2s; } .content-2-area .content-3 .tab-holder { position: absolute; top: 283px; left: 1375px; color: #fff; width: 620px; } .content-2-area .content-3 .tab-holder .tap-type li { float: left; } .content-2-area .content-3 .tab-holder .tap-type li a { padding: 0 10px 5px 10px; color: #fff; opacity: 0.25; filter: alpha(opacity=25); font-family: samsungonelatin1000; font-size: 20px; } .content-2-area .content-3 .tab-holder .tap-type li p { position: absolute; left: 0; top: 0; visibility: hidden; margin: 0; margin-top: 52px !important; } .content-2-area .content-3 .tab-holder .tap-type li p span { display: block; } .content-2-area .content-3 .tab-holder .tap-type li p span:last-child { margin-top: 12px; } .content-2-area .content-3 .tab-holder .tap-type li p span em { display: block; margin-top: 15px; opacity: 0.5; filter: alpha(opacity=50); font-family: samsungonelatin600; font-size: 14px; } .content-2-area .content-3 .tab-holder .tap-type li.on a { border-bottom: 3px solid #fff; opacity: 1; filter: alpha(opacity=100); } .content-2-area .content-3 .tab-holder .tap-type li.on p { visibility: visible; } .content-2-area .content-3 .tab-holder .tap-type .part1 { margin-right: 30px; } /* rotate */ /* transform */ /* transition */ /* transform-transition */ /* css-transition */ /* transform-css-transition */ /* keyframes */ /*@include keyframes(scroll-loop) { 0% { @include transform(translateY(0)); } 50% { @include transform(translateY(0)); } 100% { @include transform(translateY(0)); } }*/ @-webkit-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-moz-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-ms-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-o-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-webkit-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-moz-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-ms-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-o-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-webkit-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-ms-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-o-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-moz-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-ms-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-o-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-webkit-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @keyframes content-1-c1 { 0% { -webkit-transform: translate(-200px, -200px); -moz-transform: translate(-200px, -200px); -ms-transform: translate(-200px, -200px); -o-transform: translate(-200px, -200px); transform: translate(-200px, -200px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 85% { -webkit-transform: translate(5px, 5px); -moz-transform: translate(5px, 5px); -ms-transform: translate(5px, 5px); -o-transform: translate(5px, 5px); transform: translate(5px, 5px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c2 { 0% { -webkit-transform: translate(200px, -300px); -moz-transform: translate(200px, -300px); -ms-transform: translate(200px, -300px); -o-transform: translate(200px, -300px); transform: translate(200px, -300px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(5px, 8px); -moz-transform: translate(5px, 8px); -ms-transform: translate(5px, 8px); -o-transform: translate(5px, 8px); transform: translate(5px, 8px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c3 { 0% { -webkit-transform: translate(-300px, 300px); -moz-transform: translate(-300px, 300px); -ms-transform: translate(-300px, 300px); -o-transform: translate(-300px, 300px); transform: translate(-300px, 300px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(-5px, 3px); -moz-transform: translate(-5px, 3px); -ms-transform: translate(-5px, 3px); -o-transform: translate(-5px, 3px); transform: translate(-5px, 3px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c4 { 0% { -webkit-transform: translate(300px, 400px); -moz-transform: translate(300px, 400px); -ms-transform: translate(300px, 400px); -o-transform: translate(300px, 400px); transform: translate(300px, 400px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(3px, 5px); -moz-transform: translate(3px, 5px); -ms-transform: translate(3px, 5px); -o-transform: translate(3px, 5px); transform: translate(3px, 5px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-circle-rotate { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 25% { -webkit-transform: translate(-30px, 20px) rotate(180deg); -moz-transform: translate(-30px, 20px) rotate(180deg); -ms-transform: translate(-30px, 20px) rotate(180deg); -o-transform: translate(-30px, 20px) rotate(180deg); transform: translate(-30px, 20px) rotate(180deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 50% { -webkit-transform: translate(60px, -50px) rotate(360deg); -moz-transform: translate(60px, -50px) rotate(360deg); -ms-transform: translate(60px, -50px) rotate(360deg); -o-transform: translate(60px, -50px) rotate(360deg); transform: translate(60px, -50px) rotate(360deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 75% { -webkit-transform: translate(40px, 50px) rotate(540deg); -moz-transform: translate(40px, 50px) rotate(540deg); -ms-transform: translate(40px, 50px) rotate(540deg); -o-transform: translate(40px, 50px) rotate(540deg); transform: translate(40px, 50px) rotate(540deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: translate(0px, 0px) rotate(720deg); -moz-transform: translate(0px, 0px) rotate(720deg); -ms-transform: translate(0px, 0px) rotate(720deg); -o-transform: translate(0px, 0px) rotate(720deg); transform: translate(0px, 0px) rotate(720deg); } } @keyframes content-1-circle-rotate2 { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 25% { -webkit-transform: translate(-60px, 20px) rotate(-180deg); -moz-transform: translate(-60px, 20px) rotate(-180deg); -ms-transform: translate(-60px, 20px) rotate(-180deg); -o-transform: translate(-60px, 20px) rotate(-180deg); transform: translate(-60px, 20px) rotate(-180deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 50% { -webkit-transform: translate(60px, -50px) rotate(-360deg); -moz-transform: translate(60px, -50px) rotate(-360deg); -ms-transform: translate(60px, -50px) rotate(-360deg); -o-transform: translate(60px, -50px) rotate(-360deg); transform: translate(60px, -50px) rotate(-360deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 75% { -webkit-transform: translate(20px, 50px) rotate(-540deg); -moz-transform: translate(20px, 50px) rotate(-540deg); -ms-transform: translate(20px, 50px) rotate(-540deg); -o-transform: translate(20px, 50px) rotate(-540deg); transform: translate(20px, 50px) rotate(-540deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: translate(0px, 0px) rotate(-720deg); -moz-transform: translate(0px, 0px) rotate(-720deg); -ms-transform: translate(0px, 0px) rotate(-720deg); -o-transform: translate(0px, 0px) rotate(-720deg); transform: translate(0px, 0px) rotate(-720deg); } } @keyframes content-2-circle { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.3; filter: alpha(opacity=30); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1.5, 1.5); -moz-transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); -o-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); opacity: 0; filter: alpha(opacity=0); } } @keyframes content-2-circle-rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: rotate(-720deg); -moz-transform: rotate(-720deg); -ms-transform: rotate(-720deg); -o-transform: rotate(-720deg); transform: rotate(-720deg); } } /* line */ /* font setting */ .content-3-area { color: #223a65; } .content-3-area .content-1 { left: 0; width: 1680px; } .content-3-area .content-1 .img-holder { left: 88px; top: 49px; } .content-3-area .content-1 .txt-holder { left: 761px; top: 37px; } .content-3-area .content-2 { left: 1679px; width: 2029px; } .content-3-area .content-2 .img-holder { left: 0; top: 0; } .content-3-area .content-2 .txt-holder { left: 607px; top: 185px; } .content-3-area .content-3 { left: 3716px; width: 1270px; } .content-3-area .content-3 .img-holder { left: 699px; top: 48px; } .content-3-area .content-3 .txt-holder { left: 0; top: 58px; } .content-3-area .guide { position: absolute; left: 0; top: 0; margin-left: -175px; margin-top: -138px; opacity: 0.0; } .content-3-area .content-1 .img-holder { width: 633px; height: 666px; } .content-3-area .content-1 .img-holder .account { position: relative; } .content-3-area .content-1 .img-holder .account .screen-1 { position: relative; top: 33px; } .content-3-area .content-1 .img-holder .account .screen-1 .cursor { position: absolute; top: 35px; left: 244px; width: 31px; height: 31px; background-color: #223a65; opacity: 0.6; filter: alpha(opacity=60); border-radius: 50%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(1) translate(28px, 70px); -moz-transform: scale(1) translate(28px, 70px); -ms-transform: scale(1) translate(28px, 70px); -o-transform: scale(1) translate(28px, 70px); transform: scale(1) translate(28px, 70px); } .content-3-area .content-1 .img-holder .account .screen-1 .right-arrow { position: absolute; top: 49px; left: 255px; z-index: 2; } .content-3-area .content-1 .img-holder .account .screen-1 .right-arrow li { float: left; margin-left: 5px; opacity: 0; filter: alpha(opacity=0); } .content-3-area .content-1 .img-holder .account .screen-1 .right-arrow li .dot { display: block; width: 3px; height: 3px; background-color: #223a65; border-radius: 50%; } .content-3-area .content-1 .img-holder .account .screen-2 { position: absolute; left: 304px; top: 33px; opacity: 0; filter: alpha(opacity=0); } .content-3-area .content-1 .img-holder.onTrans .account .screen-1 .cursor { -webkit-transform: scale(1, 1) translate(0); -moz-transform: scale(1, 1) translate(0); -ms-transform: scale(1, 1) translate(0); -o-transform: scale(1, 1) translate(0); transform: scale(1, 1) translate(0); -webkit-transition: -webkit-transform 0.8s 0.2s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition: -moz-transform 0.8s 0.2s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition: -ms-transform 0.8s 0.2s cubic-bezier(0.5, 0, 0.5, 1); -o-transition: -o-transform 0.8s 0.2s cubic-bezier(0.5, 0, 0.5, 1); transition: transform 0.8s 0.2s cubic-bezier(0.5, 0, 0.5, 1); } .content-3-area .content-1 .img-holder.onTrans .account .screen-1 .cursor.onTrans { -webkit-transform: scale(0.6, 0.6) translate(0); -moz-transform: scale(0.6, 0.6) translate(0); -ms-transform: scale(0.6, 0.6) translate(0); -o-transform: scale(0.6, 0.6) translate(0); transform: scale(0.6, 0.6) translate(0); opacity: 0.6; filter: alpha(opacity=60); -webkit-transition: -webkit-transform 0.2s 0s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition: -moz-transform 0.2s 0s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition: -ms-transform 0.2s 0s cubic-bezier(0.5, 0, 0.5, 1); -o-transition: -o-transform 0.2s 0s cubic-bezier(0.5, 0, 0.5, 1); transition: transform 0.2s 0s cubic-bezier(0.5, 0, 0.5, 1); } .content-3-area .content-1 .img-holder.onTrans .account .screen-1 .cursor.onHide { -webkit-transform: scale(2, 2) translate(0); -moz-transform: scale(2, 2) translate(0); -ms-transform: scale(2, 2) translate(0); -o-transform: scale(2, 2) translate(0); transform: scale(2, 2) translate(0); opacity: 0; filter: alpha(opacity=0); -webkit-transition: -webkit-transform 0.5s 0s ease-in, opacity 0.5s 0s linear; -moz-transition: -moz-transform 0.5s 0s ease-in, opacity 0.5s 0s linear; -ms-transition: -ms-transform 0.5s 0s ease-in, opacity 0.5s 0s linear; -o-transition: -o-transform 0.5s 0s ease-in, opacity 0.5s 0s linear; transition: transform 0.5s 0s ease-in, opacity 0.5s 0s linear; } .content-3-area .content-1 .img-holder.onTrans .account .screen-2 { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.5s 1.3s linear; -moz-transition: opacity 0.5s 1.3s linear; -ms-transition: opacity 0.5s 1.3s linear; -o-transition: opacity 0.5s 1.3s linear; transition: opacity 0.5s 1.3s linear; } .content-3-area .content-1 .txt-holder .sub-title-box { margin-top: 52px; } .content-3-area .content-1 .txt-holder .sub-title-box .sub-title { padding: 0 10px 5px 10px; border-bottom: 3px solid #223a65; font-family: samsungonelatin1000; font-size: 20px; } .content-3-area .content-1 .txt-holder .sub-title-box p { margin-top: 26px !important; } .content-3-area .content-1 .txt-holder .sub-title-box p span { display: block; } .content-3-area .content-1 .txt-holder .sub-title-box p span:first-child { margin-bottom: 15px; } .content-3-area .content-2 .img-holder .edge-box .edge-1 { position: absolute; left: 0; top: 47px; width: 556px; height: 664px; } .content-3-area .content-2 .img-holder .edge-box .edge-1 .screen-1 { position: absolute; top: 32px; left: 0; -webkit-transform: translateX(225px); -moz-transform: translateX(225px); -ms-transform: translateX(225px); -o-transform: translateX(225px); transform: translateX(225px); opacity: 0; filter: alpha(opacity=0); } .content-3-area .content-2 .img-holder .edge-box .edge-1 .screen-2 { position: relative; } .content-3-area .content-2 .img-holder .edge-box .edge-2 { position: absolute; left: 1151px; top: 47px; width: 548px; height: 666px; } .content-3-area .content-2 .img-holder .edge-box .edge-2 .screen-1 { position: absolute; top: 32px; right: 0; -webkit-transform: translateX(-218px); -moz-transform: translateX(-218px); -ms-transform: translateX(-218px); -o-transform: translateX(-218px); transform: translateX(-218px); opacity: 0; filter: alpha(opacity=0); } .content-3-area .content-2 .img-holder .edge-box .edge-2 .screen-2 { position: relative; } .content-3-area .content-2 .img-holder.onTrans .edge-box .edge-1 .screen-1 { -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: -webkit-transform 0.9s 0s cubic-bezier(0.215, 0.61, 0.355, 1) , opacity 0.9s 0.2s; -moz-transition: -moz-transform 0.9s 0s cubic-bezier(0.215, 0.61, 0.355, 1) , opacity 0.9s 0.2s; -ms-transition: -ms-transform 0.9s 0s cubic-bezier(0.215, 0.61, 0.355, 1) , opacity 0.9s 0.2s; -o-transition: -o-transform 0.9s 0s cubic-bezier(0.215, 0.61, 0.355, 1) , opacity 0.9s 0.2s; transition: transform 0.9s 0s cubic-bezier(0.215, 0.61, 0.355, 1) , opacity 0.9s 0.2s; } .content-3-area .content-2 .img-holder.onTrans .edge-box .edge-2 .screen-1 { -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: -webkit-transform 0.9s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) , opacity 0.9s 0.6s; -moz-transition: -moz-transform 0.9s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) , opacity 0.9s 0.6s; -ms-transition: -ms-transform 0.9s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) , opacity 0.9s 0.6s; -o-transition: -o-transform 0.9s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) , opacity 0.9s 0.6s; transition: transform 0.9s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) , opacity 0.9s 0.6s; } .content-3-area .content-2 .txt-holder .sub-title-box { margin-top: 52px; } .content-3-area .content-2 .txt-holder .sub-title-box .sub-title { padding: 0 10px 5px 10px; border-bottom: 3px solid #223a65; font-family: samsungonelatin1000; font-size: 20px; } .content-3-area .content-2 .txt-holder .sub-title-box p { margin-top: 25px !important; } .content-3-area .content-2 .txt-holder .sub-title-box p span { display: block; } .content-3-area .content-2 .txt-holder .sub-title-box p span:first-child { margin-bottom: 15px; } .content-3-area .content-3 .txt-holder .img-box { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); opacity: 0; filter: alpha(opacity=0); margin-left: -5px; } .content-3-area .content-3 .txt-holder .img-box.onTrans { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.6s 0s ease-out, opacity 0.6s 0s; -moz-transition: -moz-transform 0.6s 0s ease-out, opacity 0.6s 0s; -ms-transition: -ms-transform 0.6s 0s ease-out, opacity 0.6s 0s; -o-transition: -o-transform 0.6s 0s ease-out, opacity 0.6s 0s; transition: transform 0.6s 0s ease-out, opacity 0.6s 0s; opacity: 1; filter: alpha(opacity=100); } .content-3-area .content-3 .txt-holder .sub-title-box { margin-top: 45px; } .content-3-area .content-3 .txt-holder .sub-title-box .sub-title { padding: 0 10px 5px 10px; border-bottom: 3px solid #223a65; font-family: samsungonelatin1000; font-size: 20px; } .content-3-area .content-3 .txt-holder .sub-title-box p { margin-top: 31px !important; } .content-3-area .content-3 .txt-holder .sub-title-box p span { display: block; } .content-3-area .content-3 .txt-holder .sub-title-box p span:first-child { margin-bottom: 12px; } .content-3-area .content-3 .img-holder { position: relative !important; width: 347px; height: 664px; } .content-3-area .content-3 .img-holder .display-box { position: absolute; top: 46px; left: 40px; width: 270px; height: 556px; overflow: hidden; } .content-3-area .content-3 .img-holder .display-box img { position: absolute; top: 0; left: 0; } .content-3-area .content-3 .img-holder .phone-box { position: relative; } .content-3-area .content-3 .img-holder.onTrans .display-box img { -webkit-transform: translateY(-656px); -moz-transform: translateY(-656px); -ms-transform: translateY(-656px); -o-transform: translateY(-656px); transform: translateY(-656px); -webkit-transition: -webkit-transform 3s 0.5s cubic-bezier(0.680, 0, 0.355, 1.000); -moz-transition: -moz-transform 3s 0.5s cubic-bezier(0.680, 0, 0.355, 1.000); -ms-transition: -ms-transform 3s 0.5s cubic-bezier(0.680, 0, 0.355, 1.000); -o-transition: -o-transform 3s 0.5s cubic-bezier(0.680, 0, 0.355, 1.000); transition: transform 3s 0.5s cubic-bezier(0.680, 0, 0.355, 1.000); } .content-3-area .content-3 .img-holder.onTrans .display-box.onTrans img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 2s 2s cubic-bezier(0.680, 0, 0.355, 1.000); -moz-transition: -moz-transform 2s 2s cubic-bezier(0.680, 0, 0.355, 1.000); -ms-transition: -ms-transform 2s 2s cubic-bezier(0.680, 0, 0.355, 1.000); -o-transition: -o-transform 2s 2s cubic-bezier(0.680, 0, 0.355, 1.000); transition: transform 2s 2s cubic-bezier(0.680, 0, 0.355, 1.000); } /* rotate */ /* transform */ /* transition */ /* transform-transition */ /* css-transition */ /* transform-css-transition */ /* keyframes */ /*@include keyframes(scroll-loop) { 0% { @include transform(translateY(0)); } 50% { @include transform(translateY(0)); } 100% { @include transform(translateY(0)); } }*/ @-webkit-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @keyframes waveMotion_inner { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.6, 1.6); -moz-transform: scale(1.6, 1.6); -ms-transform: scale(1.6, 1.6); -o-transform: scale(1.6, 1.6); transform: scale(1.6, 1.6); opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @keyframes waveMotion_outer { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 0.8; filter: alpha(opacity=80); } 100% { -webkit-transform: scale(1.8, 1.8); -moz-transform: scale(1.8, 1.8); -ms-transform: scale(1.8, 1.8); -o-transform: scale(1.8, 1.8); transform: scale(1.8, 1.8); opacity: 0; filter: alpha(opacity=0); } } @-webkit-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-moz-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-ms-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-o-keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @keyframes trans_backgroundColor { 0% { background-color: rgba(0, 0, 0, 0.1); } 100% { background-color: rgba(0, 0, 0, 0); } } @-webkit-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-moz-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-ms-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-o-keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @keyframes toDownAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -70%, 0); -moz-transform: translate3d(0, -70%, 0); -ms-transform: translate3d(0, -70%, 0); -o-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); } } @-webkit-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-ms-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-o-keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes toDownAniIn { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-moz-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-ms-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-o-keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @keyframes toNextAniIn { 0% { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @-webkit-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-moz-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-ms-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @-o-keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @keyframes toNextAniOut { 0% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } 100% { -webkit-transform: translate3d(-200%, 0, 0); -moz-transform: translate3d(-200%, 0, 0); -ms-transform: translate3d(-200%, 0, 0); -o-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); opacity: 0; filter: alpha(opacity=0); } } @keyframes content-1-c1 { 0% { -webkit-transform: translate(-200px, -200px); -moz-transform: translate(-200px, -200px); -ms-transform: translate(-200px, -200px); -o-transform: translate(-200px, -200px); transform: translate(-200px, -200px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 85% { -webkit-transform: translate(5px, 5px); -moz-transform: translate(5px, 5px); -ms-transform: translate(5px, 5px); -o-transform: translate(5px, 5px); transform: translate(5px, 5px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c2 { 0% { -webkit-transform: translate(200px, -300px); -moz-transform: translate(200px, -300px); -ms-transform: translate(200px, -300px); -o-transform: translate(200px, -300px); transform: translate(200px, -300px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(5px, 8px); -moz-transform: translate(5px, 8px); -ms-transform: translate(5px, 8px); -o-transform: translate(5px, 8px); transform: translate(5px, 8px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c3 { 0% { -webkit-transform: translate(-300px, 300px); -moz-transform: translate(-300px, 300px); -ms-transform: translate(-300px, 300px); -o-transform: translate(-300px, 300px); transform: translate(-300px, 300px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(-5px, 3px); -moz-transform: translate(-5px, 3px); -ms-transform: translate(-5px, 3px); -o-transform: translate(-5px, 3px); transform: translate(-5px, 3px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-c4 { 0% { -webkit-transform: translate(300px, 400px); -moz-transform: translate(300px, 400px); -ms-transform: translate(300px, 400px); -o-transform: translate(300px, 400px); transform: translate(300px, 400px); opacity: 0; filter: alpha(opacity=0); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 20% { opacity: 1; filter: alpha(opacity=100); } 70% { -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); } 85% { -webkit-transform: translate(3px, 5px); -moz-transform: translate(3px, 5px); -ms-transform: translate(3px, 5px); -o-transform: translate(3px, 5px); transform: translate(3px, 5px); opacity: 1; filter: alpha(opacity=100); } 100% { -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-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; } } @keyframes content-1-circle-rotate { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 25% { -webkit-transform: translate(-30px, 20px) rotate(180deg); -moz-transform: translate(-30px, 20px) rotate(180deg); -ms-transform: translate(-30px, 20px) rotate(180deg); -o-transform: translate(-30px, 20px) rotate(180deg); transform: translate(-30px, 20px) rotate(180deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 50% { -webkit-transform: translate(60px, -50px) rotate(360deg); -moz-transform: translate(60px, -50px) rotate(360deg); -ms-transform: translate(60px, -50px) rotate(360deg); -o-transform: translate(60px, -50px) rotate(360deg); transform: translate(60px, -50px) rotate(360deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 75% { -webkit-transform: translate(40px, 50px) rotate(540deg); -moz-transform: translate(40px, 50px) rotate(540deg); -ms-transform: translate(40px, 50px) rotate(540deg); -o-transform: translate(40px, 50px) rotate(540deg); transform: translate(40px, 50px) rotate(540deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: translate(0px, 0px) rotate(720deg); -moz-transform: translate(0px, 0px) rotate(720deg); -ms-transform: translate(0px, 0px) rotate(720deg); -o-transform: translate(0px, 0px) rotate(720deg); transform: translate(0px, 0px) rotate(720deg); } } @keyframes content-1-circle-rotate2 { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 25% { -webkit-transform: translate(-60px, 20px) rotate(-180deg); -moz-transform: translate(-60px, 20px) rotate(-180deg); -ms-transform: translate(-60px, 20px) rotate(-180deg); -o-transform: translate(-60px, 20px) rotate(-180deg); transform: translate(-60px, 20px) rotate(-180deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 50% { -webkit-transform: translate(60px, -50px) rotate(-360deg); -moz-transform: translate(60px, -50px) rotate(-360deg); -ms-transform: translate(60px, -50px) rotate(-360deg); -o-transform: translate(60px, -50px) rotate(-360deg); transform: translate(60px, -50px) rotate(-360deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 75% { -webkit-transform: translate(20px, 50px) rotate(-540deg); -moz-transform: translate(20px, 50px) rotate(-540deg); -ms-transform: translate(20px, 50px) rotate(-540deg); -o-transform: translate(20px, 50px) rotate(-540deg); transform: translate(20px, 50px) rotate(-540deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: translate(0px, 0px) rotate(-720deg); -moz-transform: translate(0px, 0px) rotate(-720deg); -ms-transform: translate(0px, 0px) rotate(-720deg); -o-transform: translate(0px, 0px) rotate(-720deg); transform: translate(0px, 0px) rotate(-720deg); } } @keyframes content-2-circle { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 0.3; filter: alpha(opacity=30); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1.5, 1.5); -moz-transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); -o-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); opacity: 0; filter: alpha(opacity=0); } } @keyframes content-2-circle-rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { -webkit-transform: rotate(-720deg); -moz-transform: rotate(-720deg); -ms-transform: rotate(-720deg); -o-transform: rotate(-720deg); transform: rotate(-720deg); } } /* line */ /* font setting */ .content-4-area .content-1 { left: 0; width: 2100px; } .content-4-area .content-1 .img-holder { left: 84px; top: 47px; } .content-4-area .content-1 .txt-holder { left: 0px; top: 249px; width: auto; height: auto; } .content-4-area .content-2 { left: 2298px; width: 1380px; } .content-4-area .content-2 .img-holder { left: 104px; top: 73px; } .content-4-area .content-2 .txt-holder { left: 759px; top: 84px; width: auto; height: auto; } .content-4-area .guide { position: absolute; left: 0; top: 0; margin-left: -175px; margin-top: -138px; opacity: 1.0; } .content-4-area .content-1 .img-holder { overflow: hidden; } .content-4-area .content-1 .txt-holder { color: #28376e; } .content-4-area .content-1 .tab-content-holder { position: absolute; left: 710px; top: 93px; width: 618px; height: 558px; } .content-4-area .content-1 .tab-content-holder > div { visibility: hidden; } .content-4-area .content-1 .tab-content-holder > div.onShow { visibility: visible; } .content-4-area .content-1 .tab-content-holder .tab-content-1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .content-4-area .content-1 .tab-content-holder .tab-content-1 .bx-wrapper { position: absolute; left: 61px; top: 75px; width: 506px; height: 439px; } .content-4-area .content-1 .tab-content-holder .tab-content-1 .bx-wrapper .bx-pager { position: absolute; top: -32px; right: 59px; } .content-4-area .content-1 .tab-content-holder .tab-content-1 .bx-wrapper .bx-pager.bx-default-pager a { background: rgba(75, 71, 138, 0.2); width: 12px; height: 12px; margin: 0 12px 0 0; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } .content-4-area .content-1 .tab-content-holder .tab-content-1 .bx-wrapper .bx-pager.bx-default-pager a.active { background-color: #4b478a; } .content-4-area .content-1 .tab-content-holder .tab-content-1 .btn { position: absolute; width: 644px; top: 50%; left: -12px; margin-top: -18px; clear: both; } .content-4-area .content-1 .tab-content-holder .tab-content-1 .btn li a { display: block; width: 50px; height: 50px; } .content-4-area .content-1 .tab-content-holder .tab-content-1 .btn li.left { float: left; } .content-4-area .content-1 .tab-content-holder .tab-content-1 .btn li.left a { background: url("../img/btn_left.png") no-repeat 13px 1px; } .content-4-area .content-1 .tab-content-holder .tab-content-1 .btn li.right { float: right; } .content-4-area .content-1 .tab-content-holder .tab-content-1 .btn li.right a { background: url("../img/btn_right.png") no-repeat 13px 1px; } .content-4-area .content-1 .tab-content-holder .tab-content-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .content-4-area .content-1 .tab-content-holder .tab-content-2 .tab-type-2 { margin-top: 92px; } .content-4-area .content-1 .tab-content-holder .tab-content-2 .tab-type-2 .tab-menu { padding: 0 181px 0 183px; } .content-4-area .content-1 .tab-content-holder .tab-content-2 .tab-type-2 .tab-menu ul { width: 100%; font-size: 0; } .content-4-area .content-1 .tab-content-holder .tab-content-2 .tab-type-2 .tab-menu ul li { display: inline-block; width: 120px; text-align: center; margin-right: 14px; } .content-4-area .content-1 .tab-content-holder .tab-content-2 .tab-type-2 .tab-menu ul li a { display: block; padding: 0; width: 120px; height: 30px; font-family: samsungonelatin600; font-size: 14px; color: #7f8cab; border-radius: 100px; line-height: 30px; background-color: #b4c4db; } .content-4-area .content-1 .tab-content-holder .tab-content-2 .tab-type-2 .tab-menu ul li.on a { color: #cbdaeb; background-color: #28376e; border-radius: 100px; } .content-4-area .content-1 .tab-content-holder .tab-content-2 .tab-type-2 .tab-menu ul li:last-child { margin-right: 0; } .content-4-area .content-1 .tab-content-holder .tab-content-2 .tab-type-2 .tab-content { margin-top: 17px; margin-left: -15px; } .content-4-area .content-1 .tab-content-holder .tab-content-2 .tab-type-2 .tab-content ul { position: relative; } .content-4-area .content-1 .tab-content-holder .tab-content-2 .tab-type-2 .tab-content ul li { position: absolute; left: 0; top: 0; display: none; } .content-4-area .content-1 .tab-content-holder .tab-content-2 .tab-type-2 .tab-content ul li.on { display: block; } .content-4-area .content-1 .tab-holder { position: absolute; left: 1408px; top: 230px; width: 650px; height: 287px; color: #28376e; } .content-4-area .content-1 .tab-holder .tap-type li { float: left; } .content-4-area .content-1 .tab-holder .tap-type li a { margin-right: 10px; padding: 0 10px 5px 10px; color: #28376e; opacity: 0.25; filter: alpha(opacity=25); font-family: samsungonelatin1000; font-size: 20px; } .content-4-area .content-1 .tab-holder .tap-type li p { position: absolute; left: 0; top: 0; visibility: hidden; margin: 0; margin-top: 58px !important; } .content-4-area .content-1 .tab-holder .tap-type li p span { display: block; margin-top: 15px; } .content-4-area .content-1 .tab-holder .tap-type li.on a { border-bottom: 3px solid #28376e; opacity: 1; filter: alpha(opacity=100); } .content-4-area .content-1 .tab-holder .tap-type li.on p { visibility: visible; } .content-4-area .content-1 .tab-holder .tap-type .part1 { margin-right: 20px; } .content-4-area .content-2 .img-holder .circle-bg { position: absolute; top: 35px; left: 30px; background: url("../img/content_4/content_4_2/bg_circle.png") no-repeat 0 0; width: 522px; height: 522px; } .content-4-area .content-2 .img-holder .tab-content-1 { position: absolute; top: 0; left: 0; opacity: 0; filter: alpha(opacity=0); } .content-4-area .content-2 .img-holder .tab-content-1 li.video-1 { position: absolute; top: 19px; left: 155px; width: 274px; display: none; } .content-4-area .content-2 .img-holder .tab-content-1 li.video-1 img { width: 100%; } .content-4-area .content-2 .img-holder .tab-content-1 li.video-1 video { position: absolute; top: 0; left: 0; width: 100%; } .content-4-area .content-2 .img-holder .tab-content-1 li.video-1.onShow { display: block; } .content-4-area .content-2 .img-holder .tab-content-1 li.video-2 { position: absolute; top: 174px; left: 10px; width: 562px; display: none; } .content-4-area .content-2 .img-holder .tab-content-1 li.video-2 img { width: 100%; } .content-4-area .content-2 .img-holder .tab-content-1 li.video-2 video { position: absolute; top: 0; left: 0; width: 100%; } .content-4-area .content-2 .img-holder .tab-content-1 li.video-2.onShow { display: block; } .content-4-area .content-2 .img-holder .tab-content-1.onShow { opacity: 1; filter: alpha(opacity=100); } .content-4-area .content-2 .img-holder .tab-content-2 { position: absolute; top: 0; left: 0; opacity: 0; filter: alpha(opacity=0); } .content-4-area .content-2 .img-holder .tab-content-2 ul li { position: absolute; top: 21px; left: 155px; width: 271px; height: 555px; opacity: 0; filter: alpha(opacity=0); } .content-4-area .content-2 .img-holder .tab-content-2 ul li.active { z-index: 10; -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -ms-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; transition: opacity 0.5s linear; opacity: 1; filter: alpha(opacity=100); } .content-4-area .content-2 .img-holder .tab-content-2 ul li.on { z-index: 5; opacity: 1; filter: alpha(opacity=100); } .content-4-area .content-2 .img-holder .tab-content-2 ul li.t-1 { background: url("../img/content_4/content_4_2/tab2_1.png") no-repeat 0 0; } .content-4-area .content-2 .img-holder .tab-content-2 ul li.t-2 { background: url("../img/content_4/content_4_2/tab2_2.png") no-repeat 0 0; } .content-4-area .content-2 .img-holder .tab-content-2.onShow { opacity: 1; filter: alpha(opacity=100); } .content-4-area .content-2 .img-holder .tab-content-3 { position: absolute; top: 0; left: 0; opacity: 0; filter: alpha(opacity=0); } .content-4-area .content-2 .img-holder .tab-content-3 ul li { position: absolute; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } .content-4-area .content-2 .img-holder .tab-content-3 ul li.t-1 { top: 7px; left: -10px; } .content-4-area .content-2 .img-holder .tab-content-3 ul li.t-2 { top: 7px; left: 290px; } .content-4-area .content-2 .img-holder .tab-content-3.onShow { opacity: 1; filter: alpha(opacity=100); } .content-4-area .content-2 .img-holder .tab-content-3.onShow ul li { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .content-4-area .content-2 .img-holder .tab-content-3.onShow ul li.t-1 { -webkit-transition: -webkit-transform 0.5s ease-in-out,opacity 0.5s; -moz-transition: -moz-transform 0.5s ease-in-out,opacity 0.5s; -ms-transition: -ms-transform 0.5s ease-in-out,opacity 0.5s; -o-transition: -o-transform 0.5s ease-in-out,opacity 0.5s; transition: transform 0.5s ease-in-out,opacity 0.5s; } .content-4-area .content-2 .img-holder .tab-content-3.onShow ul li.t-2 { -webkit-transition: -webkit-transform 0.5s 0.4s ease-in-out,opacity 0.5s 0.4s; -moz-transition: -moz-transform 0.5s 0.4s ease-in-out,opacity 0.5s 0.4s; -ms-transition: -ms-transform 0.5s 0.4s ease-in-out,opacity 0.5s 0.4s; -o-transition: -o-transform 0.5s 0.4s ease-in-out,opacity 0.5s 0.4s; transition: transform 0.5s 0.4s ease-in-out,opacity 0.5s 0.4s; } .content-4-area .content-2 .img-holder .phone-outline { position: absolute; top: -24px; left: 130px; opacity: 0; filter: alpha(opacity=0); z-index: 20; } .content-4-area .content-2 .img-holder .phone-outline .dim { position: absolute; top: 43px; left: 25px; width: 274px; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.3s cubic-bezier(0,0,1,1); -webkit-transition-delay: 0s; -moz-transition: opacity 0.3s cubic-bezier(0,0,1,1); -moz-transition-delay: 0s; -ms-transition: opacity 0.3s cubic-bezier(0,0,1,1); -ms-transition-delay: 0s; -o-transition: opacity 0.3s cubic-bezier(0,0,1,1); -o-transition-delay: 0s; transition: opacity 0.3s cubic-bezier(0,0,1,1); transition-delay: 0s; } .content-4-area .content-2 .img-holder .phone-outline .dim ul li.dim-1 { display: block; } .content-4-area .content-2 .img-holder .phone-outline .dim ul li.dim-2 { display: none; } .content-4-area .content-2 .img-holder .phone-outline .dim ul li img { width: 100%; } .content-4-area .content-2 .img-holder .phone-outline .dim.onShow { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0s cubic-bezier(0,0,1,1); -webkit-transition-delay: 0s; -moz-transition: opacity 0s cubic-bezier(0,0,1,1); -moz-transition-delay: 0s; -ms-transition: opacity 0s cubic-bezier(0,0,1,1); -ms-transition-delay: 0s; -o-transition: opacity 0s cubic-bezier(0,0,1,1); -o-transition-delay: 0s; transition: opacity 0s cubic-bezier(0,0,1,1); transition-delay: 0s; } .content-4-area .content-2 .img-holder .phone-outline .dim.onTrans_vertical ul li.dim-1 { display: none; } .content-4-area .content-2 .img-holder .phone-outline .dim.onTrans_vertical ul li.dim-2 { display: block; } .content-4-area .content-2 .img-holder .phone-outline .ph { position: relative; } .content-4-area .content-2 .img-holder .phone-outline.addTransition { -webkit-transition: -webkit-transform 0.8s 0s cubic-bezier(0.5, 0, 0.5, 1); -moz-transition: -moz-transform 0.8s 0s cubic-bezier(0.5, 0, 0.5, 1); -ms-transition: -ms-transform 0.8s 0s cubic-bezier(0.5, 0, 0.5, 1); -o-transition: -o-transform 0.8s 0s cubic-bezier(0.5, 0, 0.5, 1); transition: transform 0.8s 0s cubic-bezier(0.5, 0, 0.5, 1); } .content-4-area .content-2 .img-holder .phone-outline.onTrans { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .content-4-area .content-2 .img-holder .phone-outline.onShow { opacity: 1; filter: alpha(opacity=100); } .content-4-area .content-2 .txt-holder { color: #4b478a; } .content-4-area .content-2 .txt-holder .tap-type { margin-top: 75px; position: relative; width: 600px; height: 165px; } .content-4-area .content-2 .txt-holder .tap-type li { float: left; } .content-4-area .content-2 .txt-holder .tap-type li span.refer { display: block; width: 100%; margin-top: 8px; color: #aeacaa; font-family: 'samsungonelatin600'; font-size: 16px; line-height: 22px; letter-spacing: -0.015em; } .content-4-area .content-2 .txt-holder .tap-type li span.refer em { margin-left: -9px; } .content-4-area .content-2 .txt-holder .tap-type li a { margin-right: 10px; padding: 0 10px 5px 10px; color: #4b478a; opacity: 0.25; filter: alpha(opacity=25); font-family: samsungonelatin1000; font-size: 20px; } .content-4-area .content-2 .txt-holder .tap-type li p { position: absolute; left: 0; top: 33px; visibility: hidden; margin: 0; } .content-4-area .content-2 .txt-holder .tap-type li.on a { border-bottom: 3px solid #4b478a; opacity: 1; filter: alpha(opacity=100); } .content-4-area .content-2 .txt-holder .tap-type li.on p { visibility: visible; } .content-4-area .guide { position: absolute; left: 0; top: 0; margin-left: -175px; margin-top: -138px; opacity: 1.0; } #section-1 .inner-cont-wrap .txt-holder-1 h1 { font-family: 'samsungonelatin600'; font-size: 110px; letter-spacing: 0.008em; line-height: 73px; } #section-1 .inner-cont-wrap .txt-holder-1 .txt-area h2 { font-family: 'samsungonelatin600'; font-size: 28px; letter-spacing: -0.02em; line-height: 60px; } #section-1 .inner-cont-wrap .txt-holder-1 .txt-area p { font-family: 'samsungonelatin600'; font-size: 18px; letter-spacing: -0.02em; line-height: 32px; } #section-2 .inner-cont-wrap .txt-holder p { font-family: 'samsungonelatin600'; font-size: 18px; letter-spacing: -0.015em; line-height: 34px; } #section-7 .inner-cont-wrap .txt-holder-7 p { font-family: 'samsungonelatin600'; font-size: 18px; letter-spacing: -0.015em; line-height: 34px; } .intro-wrapper { overflow: hidden; } .intro-wrapper .intro-holder .inner-cont-wrap { display: block; position: absolute; left: 50%; top: 50%; } .intro-wrapper .intro-holder .inner-cont-wrap .intro-box { -webkit-transition: width 0.8s cubic-bezier(.6,0,.4,1), height 0.8s cubic-bezier(.6,0,.4,1), top 0.8s cubic-bezier(.6,0,.4,1), border-radius 0.8s cubic-bezier(.6,0,.4,1) ; -moz-transition: width 0.8s cubic-bezier(.6,0,.4,1), height 0.8s cubic-bezier(.6,0,.4,1), top 0.8s cubic-bezier(.6,0,.4,1), border-radius 0.8s cubic-bezier(.6,0,.4,1) ; -ms-transition: width 0.8s cubic-bezier(.6,0,.4,1), height 0.8s cubic-bezier(.6,0,.4,1), top 0.8s cubic-bezier(.6,0,.4,1), border-radius 0.8s cubic-bezier(.6,0,.4,1) ; -o-transition: width 0.8s cubic-bezier(.6,0,.4,1), height 0.8s cubic-bezier(.6,0,.4,1), top 0.8s cubic-bezier(.6,0,.4,1), border-radius 0.8s cubic-bezier(.6,0,.4,1) ; transition: width 0.8s cubic-bezier(.6,0,.4,1), height 0.8s cubic-bezier(.6,0,.4,1), top 0.8s cubic-bezier(.6,0,.4,1), border-radius 0.8s cubic-bezier(.6,0,.4,1) ; position: absolute; left: 50%; top: 280px; background: #f00; overflow: hidden; width: 1640px; height: 1159px; border-radius: 159px; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: url("../img/intro_background.jpg"); } .intro-wrapper .intro-holder .inner-cont-wrap .intro-box .line-area { -webkit-transition: -webkit-transform 1.2s cubic-bezier(.6,0,.4,1), top 1.2s cubic-bezier(.6,0,.4,1) ; -moz-transition: -moz-transform 1.2s cubic-bezier(.6,0,.4,1), top 1.2s cubic-bezier(.6,0,.4,1) ; -ms-transition: -ms-transform 1.2s cubic-bezier(.6,0,.4,1), top 1.2s cubic-bezier(.6,0,.4,1) ; -o-transition: -o-transform 1.2s cubic-bezier(.6,0,.4,1), top 1.2s cubic-bezier(.6,0,.4,1) ; transition: transform 1.2s cubic-bezier(.6,0,.4,1), top 1.2s cubic-bezier(.6,0,.4,1) ; position: absolute; left: 50%; top: 1173px; } .intro-wrapper .intro-holder .inner-cont-wrap .intro-box .line-area .line { position: absolute; left: 0; top: 0; margin-left: -370.5px; margin-top: -839px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } .intro-wrapper .intro-holder .inner-cont-wrap .intro-box .line-area .line.line-5 { -webkit-transition: -webkit-transform 0.8s linear 0.2s, opacity 0.8s linear 0.2s ; -moz-transition: -moz-transform 0.8s linear 0.2s, opacity 0.8s linear 0.2s ; -ms-transition: -ms-transform 0.8s linear 0.2s, opacity 0.8s linear 0.2s ; -o-transition: -o-transform 0.8s linear 0.2s, opacity 0.8s linear 0.2s ; transition: transform 0.8s linear 0.2s, opacity 0.8s linear 0.2s ; } .intro-wrapper .intro-holder .inner-cont-wrap .intro-box .line-area .line.line-4 { -webkit-transition: -webkit-transform 1.0s linear 0.6s, opacity 1.0s linear 0.6s ; -moz-transition: -moz-transform 1.0s linear 0.6s, opacity 1.0s linear 0.6s ; -ms-transition: -ms-transform 1.0s linear 0.6s, opacity 1.0s linear 0.6s ; -o-transition: -o-transform 1.0s linear 0.6s, opacity 1.0s linear 0.6s ; transition: transform 1.0s linear 0.6s, opacity 1.0s linear 0.6s ; } .intro-wrapper .intro-holder .inner-cont-wrap .intro-box .line-area .line.line-3 { -webkit-transition: -webkit-transform 1.2s linear 1.0s, opacity 1.2s linear 1.0s ; -moz-transition: -moz-transform 1.2s linear 1.0s, opacity 1.2s linear 1.0s ; -ms-transition: -ms-transform 1.2s linear 1.0s, opacity 1.2s linear 1.0s ; -o-transition: -o-transform 1.2s linear 1.0s, opacity 1.2s linear 1.0s ; transition: transform 1.2s linear 1.0s, opacity 1.2s linear 1.0s ; } .intro-wrapper .intro-holder .inner-cont-wrap .intro-box .line-area .line.line-2 { -webkit-transition: -webkit-transform 1.4s linear 1.4s, opacity 1.4s linear 1.4s ; -moz-transition: -moz-transform 1.4s linear 1.4s, opacity 1.4s linear 1.4s ; -ms-transition: -ms-transform 1.4s linear 1.4s, opacity 1.4s linear 1.4s ; -o-transition: -o-transform 1.4s linear 1.4s, opacity 1.4s linear 1.4s ; transition: transform 1.4s linear 1.4s, opacity 1.4s linear 1.4s ; } .intro-wrapper .intro-holder .inner-cont-wrap .intro-box .line-area .line.line-1 { -webkit-transition: -webkit-transform 1.6s linear 1.6s, opacity 1.6s linear 1.6s ; -moz-transition: -moz-transform 1.6s linear 1.6s, opacity 1.6s linear 1.6s ; -ms-transition: -ms-transform 1.6s linear 1.6s, opacity 1.6s linear 1.6s ; -o-transition: -o-transform 1.6s linear 1.6s, opacity 1.6s linear 1.6s ; transition: transform 1.6s linear 1.6s, opacity 1.6s linear 1.6s ; } .intro-wrapper .intro-holder .inner-cont-wrap .intro-box.show .line-area .line { 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); } .intro-wrapper .intro-holder .inner-cont-wrap .intro-box.out { width: 430px; height: 430px; border-radius: 215px; top: 402px; } .intro-wrapper .intro-holder .inner-cont-wrap .intro-box.out .line-area .line { -webkit-transition: -webkit-transform 0.6s linear, opacity 0.6s linear ; -moz-transition: -moz-transform 0.6s linear, opacity 0.6s linear ; -ms-transition: -ms-transform 0.6s linear, opacity 0.6s linear ; -o-transition: -o-transform 0.6s linear, opacity 0.6s linear ; transition: transform 0.6s linear, opacity 0.6s linear ; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } #section-1 .inner-cont-wrap { color: #001966; } #section-1 .inner-cont-wrap .txt-holder-1 { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; 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); margin-top: -16px; } #section-1 .inner-cont-wrap .txt-holder-1 h1 { opacity: 0; position: absolute; top: -57px; width: 100%; text-align: center; } #section-1 .inner-cont-wrap .txt-holder-1 .txt-area { position: absolute; width: 100%; top: 88px; } #section-1 .inner-cont-wrap .txt-holder-1 .txt-area h2 { opacity: 0; } #section-1 .inner-cont-wrap .txt-holder-1 .txt-area p { margin-top: 10px; } #section-1 .inner-cont-wrap .txt-holder-1 .txt-area p span { display: block; opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } #section-1.onShow .inner-cont-wrap .txt-holder-1 h1 { -webkit-transition: opacity 2.4s ease-out 0.5s ; -moz-transition: opacity 2.4s ease-out 0.5s ; -ms-transition: opacity 2.4s ease-out 0.5s ; -o-transition: opacity 2.4s ease-out 0.5s ; transition: opacity 2.4s ease-out 0.5s ; opacity: 1; filter: alpha(opacity=100); } #section-1.onShow .inner-cont-wrap .txt-holder-1 .txt-area h2 { -webkit-transition: opacity 1.8s ease-out 0.8s ; -moz-transition: opacity 1.8s ease-out 0.8s ; -ms-transition: opacity 1.8s ease-out 0.8s ; -o-transition: opacity 1.8s ease-out 0.8s ; transition: opacity 1.8s ease-out 0.8s ; opacity: 1; filter: alpha(opacity=100); } #section-1.onShow .inner-cont-wrap .txt-holder-1 .txt-area p span { 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); } #section-1.onShow .inner-cont-wrap .txt-holder-1 .txt-area p span.txt-1 { -webkit-transition: -webkit-transform 0.8s ease-out 1.2s, opacity 0.8s ease-out 1.2s ; -moz-transition: -moz-transform 0.8s ease-out 1.2s, opacity 0.8s ease-out 1.2s ; -ms-transition: -ms-transform 0.8s ease-out 1.2s, opacity 0.8s ease-out 1.2s ; -o-transition: -o-transform 0.8s ease-out 1.2s, opacity 0.8s ease-out 1.2s ; transition: transform 0.8s ease-out 1.2s, opacity 0.8s ease-out 1.2s ; } #section-1.onShow .inner-cont-wrap .txt-holder-1 .txt-area p span.txt-2 { -webkit-transition: -webkit-transform 0.8s ease-out 1.4s, opacity 0.8s ease-out 1.4s ; -moz-transition: -moz-transform 0.8s ease-out 1.4s, opacity 0.8s ease-out 1.4s ; -ms-transition: -ms-transform 0.8s ease-out 1.4s, opacity 0.8s ease-out 1.4s ; -o-transition: -o-transform 0.8s ease-out 1.4s, opacity 0.8s ease-out 1.4s ; transition: transform 0.8s ease-out 1.4s, opacity 0.8s ease-out 1.4s ; } #section-1.onShow .inner-cont-wrap .txt-holder-1 .txt-area p span.txt-3 { -webkit-transition: -webkit-transform 0.8s ease-out 1.6S, opacity 0.8s ease-out 1.6s ; -moz-transition: -moz-transform 0.8s ease-out 1.6S, opacity 0.8s ease-out 1.6s ; -ms-transition: -ms-transform 0.8s ease-out 1.6S, opacity 0.8s ease-out 1.6s ; -o-transition: -o-transform 0.8s ease-out 1.6S, opacity 0.8s ease-out 1.6s ; transition: transform 0.8s ease-out 1.6S, opacity 0.8s ease-out 1.6s ; } #section-1.onHide .inner-cont-wrap { -webkit-transition: -webkit-transform 0.3s ease-in, opacity 0.3s ease-in, ; -moz-transition: -moz-transform 0.3s ease-in, opacity 0.3s ease-in, ; -ms-transition: -ms-transform 0.3s ease-in, opacity 0.3s ease-in, ; -o-transition: -o-transform 0.3s ease-in, opacity 0.3s ease-in, ; transition: transform 0.3s ease-in, opacity 0.3s ease-in, ; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -ms-transform: translateY(-200px); -o-transform: translateY(-200px); transform: translateY(-200px); } #section-2 .inner-cont-wrap { color: #001966; } #section-2 .inner-cont-wrap .txt-holder { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; opacity: 0; filter: alpha(opacity=0); } #section-2 .inner-cont-wrap .txt-holder p { position: absolute; width: 100%; top: -84px; } #section-2 .inner-cont-wrap .txt-holder p span { display: block; } #section-2 .inner-cont-wrap .txt-holder p .margin { margin-top: 13px; } #section-2 .inner-cont-wrap .img-holder { posiiton: absolute; left: 0; top: 50%; width: 100%; } #section-2 .inner-cont-wrap .img-holder .phone { position: absolute; left: 50%; top: 305px; margin-left: -132.5px; margin-top: -265.5px; } #section-2 .inner-cont-wrap .img-holder .icon-group .icon { position: absolute; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); -moz-transform: translateX(-50%) translateY(-50%) scale(0.8); -ms-transform: translateX(-50%) translateY(-50%) scale(0.8); -o-transform: translateX(-50%) translateY(-50%) scale(0.8); transform: translateX(-50%) translateY(-50%) scale(0.8); } #section-2 .inner-cont-wrap .img-holder .icon-group .icon-1 { left: 974px; top: 598px; } #section-2 .inner-cont-wrap .img-holder .icon-group .icon-2 { left: 389px; top: 676px; } #section-2 .inner-cont-wrap .img-holder .icon-group .icon-3 { left: 802px; top: 238px; } #section-2 .inner-cont-wrap .img-holder .icon-group .icon-4 { left: 347px; top: 160px; } #section-2 .inner-cont-wrap .img-holder .icon-group .icon-5 { left: 1070px; top: 188px; } #section-2 .inner-cont-wrap .img-holder .icon-group .icon-6 { left: 139px; top: 496px; } #section-2 .inner-cont-wrap .img-holder .icon-group .icon-7 { left: 768px; top: 710px; } #section-2.onShow .txt-holder { -webkit-transition: opacity 1.2s ease-in; -moz-transition: opacity 1.2s ease-in; -ms-transition: opacity 1.2s ease-in; -o-transition: opacity 1.2s ease-in; transition: opacity 1.2s ease-in; opacity: 1; filter: alpha(opacity=100); } #section-2.onShow .img-holder .icon-group .icon { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(-50%) translateY(-50%) scale(1); -moz-transform: translateX(-50%) translateY(-50%) scale(1); -ms-transform: translateX(-50%) translateY(-50%) scale(1); -o-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); } #section-2.onShow .img-holder .icon-group .icon-1 { -webkit-transition: -webkit-transform 0.8s linear 0.6s, opacity 0.8s linear 0.6s ; -moz-transition: -moz-transform 0.8s linear 0.6s, opacity 0.8s linear 0.6s ; -ms-transition: -ms-transform 0.8s linear 0.6s, opacity 0.8s linear 0.6s ; -o-transition: -o-transform 0.8s linear 0.6s, opacity 0.8s linear 0.6s ; transition: transform 0.8s linear 0.6s, opacity 0.8s linear 0.6s ; } #section-2.onShow .img-holder .icon-group .icon-2 { -webkit-transition: -webkit-transform 0.9s linear 0.4s, opacity 0.9s linear 0.4s ; -moz-transition: -moz-transform 0.9s linear 0.4s, opacity 0.9s linear 0.4s ; -ms-transition: -ms-transform 0.9s linear 0.4s, opacity 0.9s linear 0.4s ; -o-transition: -o-transform 0.9s linear 0.4s, opacity 0.9s linear 0.4s ; transition: transform 0.9s linear 0.4s, opacity 0.9s linear 0.4s ; } #section-2.onShow .img-holder .icon-group .icon-3 { -webkit-transition: -webkit-transform 0.6s linear 1.0s, opacity 0.6s linear 1.0s ; -moz-transition: -moz-transform 0.6s linear 1.0s, opacity 0.6s linear 1.0s ; -ms-transition: -ms-transform 0.6s linear 1.0s, opacity 0.6s linear 1.0s ; -o-transition: -o-transform 0.6s linear 1.0s, opacity 0.6s linear 1.0s ; transition: transform 0.6s linear 1.0s, opacity 0.6s linear 1.0s ; } #section-2.onShow .img-holder .icon-group .icon-4 { -webkit-transition: -webkit-transform 0.6s linear 1.4s, opacity 0.6s linear 1.4s ; -moz-transition: -moz-transform 0.6s linear 1.4s, opacity 0.6s linear 1.4s ; -ms-transition: -ms-transform 0.6s linear 1.4s, opacity 0.6s linear 1.4s ; -o-transition: -o-transform 0.6s linear 1.4s, opacity 0.6s linear 1.4s ; transition: transform 0.6s linear 1.4s, opacity 0.6s linear 1.4s ; } #section-2.onShow .img-holder .icon-group .icon-5 { -webkit-transition: -webkit-transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; -moz-transition: -moz-transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; -ms-transition: -ms-transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; -o-transition: -o-transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; transition: transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; } #section-2.onShow .img-holder .icon-group .icon-6 { -webkit-transition: -webkit-transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; -moz-transition: -moz-transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; -ms-transition: -ms-transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; -o-transition: -o-transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; transition: transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; } #section-2.onShow .img-holder .icon-group .icon-7 { -webkit-transition: -webkit-transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; -moz-transition: -moz-transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; -ms-transition: -ms-transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; -o-transition: -o-transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; transition: transform 0.6s linear 1.6s, opacity 0.6s linear 1.6s ; } #section-7 .inner-cont-wrap .bg-holder-7 { position: absolute; left: 50%; top: 80px; width: 1640px; height: 960px; background: url("../img/section7_bg.jpg"); border-radius: 159px; margin-left: -820px; 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-7 .inner-cont-wrap .img-holder-7 { position: absolute; left: 729px; top: -16px; -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); opacity: 0; filter: alpha(opacity=0); } #section-7 .inner-cont-wrap .img-holder-7 video { position: absolute; left: 60px; top: 26px; width: 308px; height: 632px; } #section-7 .inner-cont-wrap .img-holder-7 .hand-ph { position: relative; } #section-7 .inner-cont-wrap .img-holder-7 .vid-cover { position: absolute; left: 60px; top: 26px; width: 308px; height: 632px; background-color: #000; } #section-7 .inner-cont-wrap .txt-holder-7 { color: #454853; position: absolute; left: 183px; top: 230px; } #section-7 .inner-cont-wrap .txt-holder-7 p { 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-7 .inner-cont-wrap .txt-holder-7 .btn_download { opacity: 0; filter: alpha(opacity=0); margin-top: 40px; display: inline-block; width: 210px; height: 45px; margin-right: 15px; font-size: 0; text-indent: -9999px; vertical-align: top; background: url(../img/btn_download.png) no-repeat 0 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } #section-7 .inner-cont-wrap .txt-holder-7 .btn_download:hover { background-position: 0 -55px; } #section-7.onShow .bg-holder-7 { -webkit-transition: -webkit-transform 0.4s linear 0.2s, opacity 0.4s linear 0.2s ; -moz-transition: -moz-transform 0.4s linear 0.2s, opacity 0.4s linear 0.2s ; -ms-transition: -ms-transform 0.4s linear 0.2s, opacity 0.4s linear 0.2s ; -o-transition: -o-transform 0.4s linear 0.2s, opacity 0.4s linear 0.2s ; transition: transform 0.4s linear 0.2s, opacity 0.4s linear 0.2s ; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100); } #section-7.onShow .img-holder-7 { -webkit-transition: -webkit-transform 0.4s linear 0.4s, opacity 0.4s linear 0.4s ; -moz-transition: -moz-transform 0.4s linear 0.4s, opacity 0.4s linear 0.4s ; -ms-transition: -ms-transform 0.4s linear 0.4s, opacity 0.4s linear 0.4s ; -o-transition: -o-transform 0.4s linear 0.4s, opacity 0.4s linear 0.4s ; transition: transform 0.4s linear 0.4s, opacity 0.4s linear 0.4s ; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100); } #section-7.onShow .txt-holder-7 p { -webkit-transition: -webkit-transform 0.4s linear 0.6s, opacity 0.4s linear 0.6s ; -moz-transition: -moz-transform 0.4s linear 0.6s, opacity 0.4s linear 0.6s ; -ms-transition: -ms-transform 0.4s linear 0.6s, opacity 0.4s linear 0.6s ; -o-transition: -o-transform 0.4s linear 0.6s, opacity 0.4s linear 0.6s ; transition: transform 0.4s linear 0.6s, opacity 0.4s linear 0.6s ; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100); } #section-7.onShow .txt-holder-7 .btn_download { -webkit-transition: -webkit-transform 0.4s linear 0.8s, opacity 0.4s linear 0.8s ; -moz-transition: -moz-transform 0.4s linear 0.8s, opacity 0.4s linear 0.8s ; -ms-transition: -ms-transform 0.4s linear 0.8s, opacity 0.4s linear 0.8s ; -o-transition: -o-transform 0.4s linear 0.8s, opacity 0.4s linear 0.8s ; transition: transform 0.4s linear 0.8s, opacity 0.4s linear 0.8s ; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100); } /*# sourceMappingURL=page.css.map */