/* css-transition */ /* transition-delay */ /* transition-duration */ .noTransition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; } @media only screen and (min-width: 768px) { .motion.zoom-out { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .motion.zoom-out.x2 { -webkit-transform: scale(1.35); -moz-transform: scale(1.35); -ms-transform: scale(1.35); -o-transform: scale(1.35); transform: scale(1.35); } .motion.zoom-out.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1s; transition: transform 1.4s 0s ease-out, opacity 1s; } .motion.zoom-in { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .motion.zoom-in.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1.4s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1.4s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1.4s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1.4s; transition: transform 1.4s 0s ease-out, opacity 1.4s; } .motion.move-to-left { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } .motion.move-to-left.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.move-to-left-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } .motion.move-to-left-2.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -moz-transition: -moz-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -ms-transition: -ms-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -o-transition: -o-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; transition: transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; } .motion.fade-in { opacity: 0; filter: alpha(opacity=0); } .motion.fade-in.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1s 0s linear, opacity 1s 0.2s linear; -moz-transition: -moz-transform 1s 0s linear, opacity 1s 0.2s linear; -ms-transition: -ms-transform 1s 0s linear, opacity 1s 0.2s linear; -o-transition: -o-transform 1s 0s linear, opacity 1s 0.2s linear; transition: transform 1s 0s linear, opacity 1s 0.2s linear; } .motion.mask-off-up .img-box { -webkit-transform: translate3d(0, 25%, 0); -moz-transform: translate3d(0, 25%, 0); -ms-transform: translate3d(0, 25%, 0); -o-transform: translate3d(0, 25%, 0); transform: translate3d(0, 25%, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } .motion.mask-off-up:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion.mask-off-left .img-box { -webkit-transform: translate3d(-25%, 0, 0); -moz-transform: translate3d(-25%, 0, 0); -ms-transform: translate3d(-25%, 0, 0); -o-transform: translate3d(-25%, 0, 0); transform: translate3d(-25%, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .motion.mask-off-left:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion.mask-off-right .img-box { -webkit-transform: translate3d(25%, 0, 0); -moz-transform: translate3d(25%, 0, 0); -ms-transform: translate3d(25%, 0, 0); -o-transform: translate3d(25%, 0, 0); transform: translate3d(25%, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } .motion.mask-off-right:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion.mask-off-down .img-box { -webkit-transform: translate3d(0, -25%, 0); -moz-transform: translate3d(0, -25%, 0); -ms-transform: translate3d(0, -25%, 0); -o-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; } .motion.mask-off-down:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion.slide-in-left { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } .motion.slide-in-left.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.slide-in-right { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } .motion.slide-in-right.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.slide-in-up { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .motion.slide-in-up.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -moz-transition: -moz-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -ms-transition: -ms-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -o-transition: -o-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; transition: transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; } .motion.slide-in-up-1 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(60px); -moz-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); transform: translateY(60px); } .motion.slide-in-up-1.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -moz-transition: -moz-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -ms-transition: -ms-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -o-transition: -o-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; transition: transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; } .motion.slide-in-up-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .motion.slide-in-up-2.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -moz-transition: -moz-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -ms-transition: -ms-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -o-transition: -o-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; transition: transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; } .motion.slide-in-down { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } .motion.slide-in-down.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -moz-transition: -moz-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -ms-transition: -ms-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -o-transition: -o-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; transition: transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; } .motion.slide-in-down-1 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(-60px); -moz-transform: translateY(-60px); -ms-transform: translateY(-60px); -o-transform: translateY(-60px); transform: translateY(-60px); } .motion.slide-in-down-1.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -moz-transition: -moz-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -ms-transition: -ms-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -o-transition: -o-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; transition: transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; } .motion .zoom-out { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .motion .zoom-out.x2 { -webkit-transform: scale(1.35); -moz-transform: scale(1.35); -ms-transform: scale(1.35); -o-transform: scale(1.35); transform: scale(1.35); } .motion .zoom-in { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .motion .move-to-left { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } .motion .move-to-left-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } .motion .fade-in { opacity: 0; filter: alpha(opacity=0); } .motion .mask-off-up .img-box { -webkit-transform: translate3d(0, 25%, 0); -moz-transform: translate3d(0, 25%, 0); -ms-transform: translate3d(0, 25%, 0); -o-transform: translate3d(0, 25%, 0); transform: translate3d(0, 25%, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } .motion .mask-off-up:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion .mask-off-left .img-box { -webkit-transform: translate3d(-25%, 0, 0); -moz-transform: translate3d(-25%, 0, 0); -ms-transform: translate3d(-25%, 0, 0); -o-transform: translate3d(-25%, 0, 0); transform: translate3d(-25%, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .motion .mask-off-left:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion .mask-off-right .img-box { -webkit-transform: translate3d(25%, 0, 0); -moz-transform: translate3d(25%, 0, 0); -ms-transform: translate3d(25%, 0, 0); -o-transform: translate3d(25%, 0, 0); transform: translate3d(25%, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } .motion .mask-off-right:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion .mask-off-down .img-box { -webkit-transform: translate3d(0, -25%, 0); -moz-transform: translate3d(0, -25%, 0); -ms-transform: translate3d(0, -25%, 0); -o-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; } .motion .mask-off-down:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion .slide-in-left { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } .motion .slide-in-right { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } .motion .slide-in-up { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .motion .slide-in-up-1 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(60px); -moz-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); transform: translateY(60px); } .motion .slide-in-up-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .motion .slide-in-down { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } .motion .slide-in-down-1 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(-60px); -moz-transform: translateY(-60px); -ms-transform: translateY(-60px); -o-transform: translateY(-60px); transform: translateY(-60px); } .motion.mask-box-1 { padding-top: 18%; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .motion.mask-box-1 figure { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .motion.mask-box-2 { padding-top: 47%; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .motion.mask-box-2 figure { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .motion.onTrans .zoom-out { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1s; transition: transform 1.4s 0s ease-out, opacity 1s; } .motion.onTrans .zoom-in { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1.4s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1.4s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1.4s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1.4s; transition: transform 1.4s 0s ease-out, opacity 1.4s; } .motion.onTrans .move-to-left { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.onTrans .move-to-left-2 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -moz-transition: -moz-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -ms-transition: -ms-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -o-transition: -o-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; transition: transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; } .motion.onTrans .fade-in { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1s 0s linear, opacity 1s 0.2s linear; -moz-transition: -moz-transform 1s 0s linear, opacity 1s 0.2s linear; -ms-transition: -ms-transform 1s 0s linear, opacity 1s 0.2s linear; -o-transition: -o-transform 1s 0s linear, opacity 1s 0.2s linear; transition: transform 1s 0s linear, opacity 1s 0.2s linear; } .motion.onTrans.mask-off-up .img-box, .motion.onTrans .mask-off-up .img-box { -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-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans.mask-off-up:after, .motion.onTrans .mask-off-up:after { -webkit-transform: translate3d(0, -101%, 0); -moz-transform: translate3d(0, -101%, 0); -ms-transform: translate3d(0, -101%, 0); -o-transform: translate3d(0, -101%, 0); transform: translate3d(0, -101%, 0); -webkit-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans.mask-off-left .img-box, .motion.onTrans .mask-off-left .img-box { -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-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans.mask-off-left:after, .motion.onTrans .mask-off-left:after { -webkit-transform: translate3d(101%, 0, 0); -moz-transform: translate3d(101%, 0, 0); -ms-transform: translate3d(101%, 0, 0); -o-transform: translate3d(101%, 0, 0); transform: translate3d(101%, 0, 0); -webkit-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans.mask-off-right .img-box, .motion.onTrans .mask-off-right .img-box { -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-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans.mask-off-right:after, .motion.onTrans .mask-off-right:after { -webkit-transform: translate3d(-101%, 0, 0); -moz-transform: translate3d(-101%, 0, 0); -ms-transform: translate3d(-101%, 0, 0); -o-transform: translate3d(-101%, 0, 0); transform: translate3d(-101%, 0, 0); -webkit-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans.mask-off-down .img-box, .motion.onTrans .mask-off-down .img-box { -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-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans.mask-off-down:after, .motion.onTrans .mask-off-down:after { -webkit-transform: translate3d(0, 101%, 0); -moz-transform: translate3d(0, 101%, 0); -ms-transform: translate3d(0, 101%, 0); -o-transform: translate3d(0, 101%, 0); transform: translate3d(0, 101%, 0); -webkit-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans .slide-in-left { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.onTrans .slide-in-right { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.onTrans .slide-in-up { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -moz-transition: -moz-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -ms-transition: -ms-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -o-transition: -o-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; transition: transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; } .motion.onTrans .slide-in-up-1 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -moz-transition: -moz-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -ms-transition: -ms-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -o-transition: -o-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; transition: transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; } .motion.onTrans .slide-in-up-2 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -moz-transition: -moz-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -ms-transition: -ms-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -o-transition: -o-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; transition: transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; } .motion.onTrans .slide-in-down { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -moz-transition: -moz-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -ms-transition: -ms-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -o-transition: -o-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; transition: transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; } .motion.onTrans .slide-in-down-1 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -moz-transition: -moz-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -ms-transition: -ms-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -o-transition: -o-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; transition: transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; } .motion.onTrans .title-box:before { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transition: -webkit-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: -moz-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition: -ms-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: -o-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); } .motion.onTrans .title-box:after { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transition: -webkit-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: -moz-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition: -ms-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: -o-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); } .motion.onTrans.mask-box-1 { padding-top: 25%; -webkit-transform: translateY(-3.125vw); -moz-transform: translateY(-3.125vw); -ms-transform: translateY(-3.125vw); -o-transform: translateY(-3.125vw); transform: translateY(-3.125vw); opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -moz-transition: -moz-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -ms-transition: -ms-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -o-transition: -o-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); transition: transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); } .motion.onTrans.mask-box-1 figure { -webkit-transform: translateY(3.125vw); -moz-transform: translateY(3.125vw); -ms-transform: translateY(3.125vw); -o-transform: translateY(3.125vw); transform: translateY(3.125vw); -webkit-transition: -webkit-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -moz-transition: -moz-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -ms-transition: -ms-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -o-transition: -o-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); transition: transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); } .motion.onTrans.mask-box-2 { padding-top: 55.5555%; -webkit-transform: translateY(-3.125vw); -moz-transform: translateY(-3.125vw); -ms-transform: translateY(-3.125vw); -o-transform: translateY(-3.125vw); transform: translateY(-3.125vw); opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -moz-transition: -moz-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -ms-transition: -ms-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -o-transition: -o-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); transition: transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); } .motion.onTrans.mask-box-2 figure { -webkit-transform: translateY(3.125vw); -moz-transform: translateY(3.125vw); -ms-transform: translateY(3.125vw); -o-transform: translateY(3.125vw); transform: translateY(3.125vw); -webkit-transition: -webkit-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -moz-transition: -moz-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -ms-transition: -ms-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -o-transition: -o-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); transition: transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); } .motion.onTrans.set-1 .step-1 { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .motion.onTrans.set-1 .step-2 { -webkit-transition-delay: 0.45s; -moz-transition-delay: 0.45s; -ms-transition-delay: 0.45s; -o-transition-delay: 0.45s; transition-delay: 0.45s; } .motion.onTrans.set-1 .step-2.move-to-left-2 { -webkit-transition-duration: 0.65s; -webkit-transition-delay: 0.65s; -moz-transition-duration: 0.65s; -moz-transition-delay: 0.65s; -ms-transition-duration: 0.65s; -ms-transition-delay: 0.65s; -o-transition-duration: 0.65s; -o-transition-delay: 0.65s; transition-duration: 0.65s; transition-delay: 0.65s; } .motion.onTrans.set-1 .step-3 { -webkit-transition-delay: 0.95s; -moz-transition-delay: 0.95s; -ms-transition-delay: 0.95s; -o-transition-delay: 0.95s; transition-delay: 0.95s; } .motion.onTrans.set-1 .step-3.move-to-left-2 { -webkit-transition-duration: 0.65s; -webkit-transition-delay: 1.15s; -moz-transition-duration: 0.65s; -moz-transition-delay: 1.15s; -ms-transition-duration: 0.65s; -ms-transition-delay: 1.15s; -o-transition-duration: 0.65s; -o-transition-delay: 1.15s; transition-duration: 0.65s; transition-delay: 1.15s; } .motion.onTrans.set-1 .step-4 { -webkit-transition-delay: 1.25s; -moz-transition-delay: 1.25s; -ms-transition-delay: 1.25s; -o-transition-delay: 1.25s; transition-delay: 1.25s; } .motion.onTrans.set-1 .step-5 { -webkit-transition-delay: 1.55s; -moz-transition-delay: 1.55s; -ms-transition-delay: 1.55s; -o-transition-delay: 1.55s; transition-delay: 1.55s; } .motion.onTrans.set-2 .step-1 { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .motion.onTrans.set-2 .step-2 { -webkit-transition-duration: 0.7s; -webkit-transition-delay: 0.45s; -moz-transition-duration: 0.7s; -moz-transition-delay: 0.45s; -ms-transition-duration: 0.7s; -ms-transition-delay: 0.45s; -o-transition-duration: 0.7s; -o-transition-delay: 0.45s; transition-duration: 0.7s; transition-delay: 0.45s; } .motion.onTrans.set-3 .step-1 { -webkit-transition-duration: 0.05s; -webkit-transition-delay: 0.65s; -moz-transition-duration: 0.05s; -moz-transition-delay: 0.65s; -ms-transition-duration: 0.05s; -ms-transition-delay: 0.65s; -o-transition-duration: 0.05s; -o-transition-delay: 0.65s; transition-duration: 0.05s; transition-delay: 0.65s; } } @media only screen and (max-width: 767.7px) { #content { overflow: hidden; } .motion.zoom-out { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .motion.zoom-out.x2 { -webkit-transform: scale(1.35); -moz-transform: scale(1.35); -ms-transform: scale(1.35); -o-transform: scale(1.35); transform: scale(1.35); } .motion.zoom-out.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1s; transition: transform 1.4s 0s ease-out, opacity 1s; } .motion.zoom-in { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .motion.zoom-in.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1.4s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1.4s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1.4s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1.4s; transition: transform 1.4s 0s ease-out, opacity 1.4s; } .motion.move-to-left { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(10%); -moz-transform: translateX(10%); -ms-transform: translateX(10%); -o-transform: translateX(10%); transform: translateX(10%); } .motion.move-to-left.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.move-to-left-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(10%); -moz-transform: translateX(10%); -ms-transform: translateX(10%); -o-transform: translateX(10%); transform: translateX(10%); } .motion.move-to-left-2.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -moz-transition: -moz-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -ms-transition: -ms-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -o-transition: -o-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; transition: transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; } .motion.fade-in { opacity: 0; filter: alpha(opacity=0); } .motion.fade-in.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1s 0s linear, opacity 1s 0.2s linear; -moz-transition: -moz-transform 1s 0s linear, opacity 1s 0.2s linear; -ms-transition: -ms-transform 1s 0s linear, opacity 1s 0.2s linear; -o-transition: -o-transform 1s 0s linear, opacity 1s 0.2s linear; transition: transform 1s 0s linear, opacity 1s 0.2s linear; } .motion.mask-off-up .img-box { -webkit-transform: translate3d(0, 25%, 0); -moz-transform: translate3d(0, 25%, 0); -ms-transform: translate3d(0, 25%, 0); -o-transform: translate3d(0, 25%, 0); transform: translate3d(0, 25%, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } .motion.mask-off-up:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion.mask-off-left .img-box { -webkit-transform: translate3d(-25%, 0, 0); -moz-transform: translate3d(-25%, 0, 0); -ms-transform: translate3d(-25%, 0, 0); -o-transform: translate3d(-25%, 0, 0); transform: translate3d(-25%, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .motion.mask-off-left:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion.mask-off-right .img-box { -webkit-transform: translate3d(25%, 0, 0); -moz-transform: translate3d(25%, 0, 0); -ms-transform: translate3d(25%, 0, 0); -o-transform: translate3d(25%, 0, 0); transform: translate3d(25%, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } .motion.mask-off-right:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion.mask-off-down .img-box { -webkit-transform: translate3d(0, -25%, 0); -moz-transform: translate3d(0, -25%, 0); -ms-transform: translate3d(0, -25%, 0); -o-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; } .motion.mask-off-down:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion.slide-in-left { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(10%); -moz-transform: translateX(10%); -ms-transform: translateX(10%); -o-transform: translateX(10%); transform: translateX(10%); } .motion.slide-in-left.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.slide-in-right { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(10%); -moz-transform: translateX(10%); -ms-transform: translateX(10%); -o-transform: translateX(10%); transform: translateX(10%); } .motion.slide-in-right.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.slide-in-up { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(10%); -moz-transform: translateY(10%); -ms-transform: translateY(10%); -o-transform: translateY(10%); transform: translateY(10%); } .motion.slide-in-up.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -moz-transition: -moz-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -ms-transition: -ms-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -o-transition: -o-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; transition: transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; } .motion.slide-in-up-1 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(75%); -moz-transform: translateY(75%); -ms-transform: translateY(75%); -o-transform: translateY(75%); transform: translateY(75%); } .motion.slide-in-up-1.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -moz-transition: -moz-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -ms-transition: -ms-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -o-transition: -o-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; transition: transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; } .motion.slide-in-up-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(15%); -moz-transform: translateY(15%); -ms-transform: translateY(15%); -o-transform: translateY(15%); transform: translateY(15%); } .motion.slide-in-up-2.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -moz-transition: -moz-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -ms-transition: -ms-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -o-transition: -o-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; transition: transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; } .motion.slide-in-down { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(-10%); -moz-transform: translateY(-10%); -ms-transform: translateY(-10%); -o-transform: translateY(-10%); transform: translateY(-10%); } .motion.slide-in-down.onTrans { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -moz-transition: -moz-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -ms-transition: -ms-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -o-transition: -o-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; transition: transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; } .motion.mask-box-1 { padding-top: 23vw; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(7.8125vw); -moz-transform: translateY(7.8125vw); -ms-transform: translateY(7.8125vw); -o-transform: translateY(7.8125vw); transform: translateY(7.8125vw); } .motion.mask-box-1 figure { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .motion.mask-box-2 { padding-top: 53vw; opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(7.8125vw); -moz-transform: translateY(7.8125vw); -ms-transform: translateY(7.8125vw); -o-transform: translateY(7.8125vw); transform: translateY(7.8125vw); } .motion.mask-box-2 figure { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .motion .zoom-out { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .motion .zoom-out.x2 { -webkit-transform: scale(1.35); -moz-transform: scale(1.35); -ms-transform: scale(1.35); -o-transform: scale(1.35); transform: scale(1.35); } .motion .zoom-in { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } .motion .move-to-left { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(10%); -moz-transform: translateX(10%); -ms-transform: translateX(10%); -o-transform: translateX(10%); transform: translateX(10%); } .motion .move-to-left-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(10%); -moz-transform: translateX(10%); -ms-transform: translateX(10%); -o-transform: translateX(10%); transform: translateX(10%); } .motion .fade-in { opacity: 0; filter: alpha(opacity=0); } .motion .mask-off-up .img-box { -webkit-transform: translate3d(0, 25%, 0); -moz-transform: translate3d(0, 25%, 0); -ms-transform: translate3d(0, 25%, 0); -o-transform: translate3d(0, 25%, 0); transform: translate3d(0, 25%, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } .motion .mask-off-up:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion .mask-off-left .img-box { -webkit-transform: translate3d(-25%, 0, 0); -moz-transform: translate3d(-25%, 0, 0); -ms-transform: translate3d(-25%, 0, 0); -o-transform: translate3d(-25%, 0, 0); transform: translate3d(-25%, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .motion .mask-off-left:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion .mask-off-right .img-box { -webkit-transform: translate3d(25%, 0, 0); -moz-transform: translate3d(25%, 0, 0); -ms-transform: translate3d(25%, 0, 0); -o-transform: translate3d(25%, 0, 0); transform: translate3d(25%, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } .motion .mask-off-right:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion .mask-off-down .img-box { -webkit-transform: translate3d(0, -25%, 0); -moz-transform: translate3d(0, -25%, 0); -ms-transform: translate3d(0, -25%, 0); -o-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; } .motion .mask-off-down:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0c7c4; -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); } .motion .slide-in-left { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(10%); -moz-transform: translateX(10%); -ms-transform: translateX(10%); -o-transform: translateX(10%); transform: translateX(10%); } .motion .slide-in-right { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-10%); -moz-transform: translateX(-10%); -ms-transform: translateX(-10%); -o-transform: translateX(-10%); transform: translateX(-10%); } .motion .slide-in-up { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(10%); -moz-transform: translateY(10%); -ms-transform: translateY(10%); -o-transform: translateY(10%); transform: translateY(10%); } .motion .slide-in-up-1 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(75%); -moz-transform: translateY(75%); -ms-transform: translateY(75%); -o-transform: translateY(75%); transform: translateY(75%); } .motion .slide-in-up-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(15%); -moz-transform: translateY(15%); -ms-transform: translateY(15%); -o-transform: translateY(15%); transform: translateY(15%); } .motion .slide-in-down { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(-10%); -moz-transform: translateY(-10%); -ms-transform: translateY(-10%); -o-transform: translateY(-10%); transform: translateY(-10%); } .motion.onTrans .zoom-out { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1s; transition: transform 1.4s 0s ease-out, opacity 1s; } .motion.onTrans .zoom-in { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.4s 0s ease-out, opacity 1.4s; -moz-transition: -moz-transform 1.4s 0s ease-out, opacity 1.4s; -ms-transition: -ms-transform 1.4s 0s ease-out, opacity 1.4s; -o-transition: -o-transform 1.4s 0s ease-out, opacity 1.4s; transition: transform 1.4s 0s ease-out, opacity 1.4s; } .motion.onTrans .move-to-left { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.onTrans .move-to-left-2 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -moz-transition: -moz-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -ms-transition: -ms-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; -o-transition: -o-transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; transition: transform 0.65s 0.2s ease-out, opacity 0.65s 0.2s linear; } .motion.onTrans .fade-in { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1s 0s linear, opacity 1s 0.2s linear; -moz-transition: -moz-transform 1s 0s linear, opacity 1s 0.2s linear; -ms-transition: -ms-transform 1s 0s linear, opacity 1s 0.2s linear; -o-transition: -o-transform 1s 0s linear, opacity 1s 0.2s linear; transition: transform 1s 0s linear, opacity 1s 0.2s linear; } .motion.onTrans.mask-off-up .img-box, .motion.onTrans .mask-off-up .img-box { -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-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans.mask-off-up:after, .motion.onTrans .mask-off-up:after { -webkit-transform: translate3d(0, -101%, 0); -moz-transform: translate3d(0, -101%, 0); -ms-transform: translate3d(0, -101%, 0); -o-transform: translate3d(0, -101%, 0); transform: translate3d(0, -101%, 0); -webkit-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans.mask-off-left .img-box, .motion.onTrans .mask-off-left .img-box { -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-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans.mask-off-left:after, .motion.onTrans .mask-off-left:after { -webkit-transform: translate3d(101%, 0, 0); -moz-transform: translate3d(101%, 0, 0); -ms-transform: translate3d(101%, 0, 0); -o-transform: translate3d(101%, 0, 0); transform: translate3d(101%, 0, 0); -webkit-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans.mask-off-right .img-box, .motion.onTrans .mask-off-right .img-box { -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-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans.mask-off-right:after, .motion.onTrans .mask-off-right:after { -webkit-transform: translate3d(-101%, 0, 0); -moz-transform: translate3d(-101%, 0, 0); -ms-transform: translate3d(-101%, 0, 0); -o-transform: translate3d(-101%, 0, 0); transform: translate3d(-101%, 0, 0); -webkit-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans.mask-off-down .img-box, .motion.onTrans .mask-off-down .img-box { -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-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans.mask-off-down:after, .motion.onTrans .mask-off-down:after { -webkit-transform: translate3d(0, 101%, 0); -moz-transform: translate3d(0, 101%, 0); -ms-transform: translate3d(0, 101%, 0); -o-transform: translate3d(0, 101%, 0); transform: translate3d(0, 101%, 0); -webkit-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -webkit-transition-delay: 0s; -moz-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -moz-transition-delay: 0s; -ms-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -ms-transition-delay: 0s; -o-transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); -o-transition-delay: 0s; transition: transform 1.2s cubic-bezier(0.675, 0.005, 0.310, 1.005); transition-delay: 0s; } .motion.onTrans .slide-in-left { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.onTrans .slide-in-right { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -moz-transition: -moz-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -ms-transition: -ms-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; -o-transition: -o-transform 0.65s 0s ease-out, opacity 0.65s 0s linear; transition: transform 0.65s 0s ease-out, opacity 0.65s 0s linear; } .motion.onTrans .slide-in-up { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -moz-transition: -moz-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -ms-transition: -ms-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -o-transition: -o-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; transition: transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; } .motion.onTrans .slide-in-up-1 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -moz-transition: -moz-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -ms-transition: -ms-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -o-transition: -o-transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; transition: transform 0.8s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; } .motion.onTrans .slide-in-up-2 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -moz-transition: -moz-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -ms-transition: -ms-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -o-transition: -o-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; transition: transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; } .motion.onTrans .slide-in-down { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -moz-transition: -moz-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -ms-transition: -ms-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; -o-transition: -o-transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; transition: transform 0.55s 0.2s ease-out, opacity 0.55s 0.2s linear; } .motion.onTrans .title-box:before { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transition: -webkit-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: -moz-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition: -ms-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: -o-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); } .motion.onTrans .title-box:after { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transition: -webkit-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: -moz-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition: -ms-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: -o-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); } .motion.onTrans.mask-box-1 { padding-top: 30.9333vw; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -moz-transition: -moz-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -ms-transition: -ms-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -o-transition: -o-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); transition: transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); } .motion.onTrans.mask-box-1 figure { -webkit-transform: translateY(7.8125vw); -moz-transform: translateY(7.8125vw); -ms-transform: translateY(7.8125vw); -o-transform: translateY(7.8125vw); transform: translateY(7.8125vw); -webkit-transition: -webkit-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -moz-transition: -moz-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -ms-transition: -ms-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -o-transition: -o-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); transition: transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); } .motion.onTrans.mask-box-2 { padding-top: 61.3333vw; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -moz-transition: -moz-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -ms-transition: -ms-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -o-transition: -o-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); transition: transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); } .motion.onTrans.mask-box-2 figure { -webkit-transform: translateY(7.8125vw); -moz-transform: translateY(7.8125vw); -ms-transform: translateY(7.8125vw); -o-transform: translateY(7.8125vw); transform: translateY(7.8125vw); -webkit-transition: -webkit-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -moz-transition: -moz-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -ms-transition: -ms-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); -o-transition: -o-transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); transition: transform 1.3s 0.2s ease-in-out, all 1.8s 0s cubic-bezier(0.22, 0, 0.5, 1); } .motion.onTrans.set-1 .step-1 { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .motion.onTrans.set-1 .step-2 { -webkit-transition-delay: 0.45s; -moz-transition-delay: 0.45s; -ms-transition-delay: 0.45s; -o-transition-delay: 0.45s; transition-delay: 0.45s; } .motion.onTrans.set-1 .step-2.move-to-left-2 { -webkit-transition-duration: 0.65s; -webkit-transition-delay: 0.65s; -moz-transition-duration: 0.65s; -moz-transition-delay: 0.65s; -ms-transition-duration: 0.65s; -ms-transition-delay: 0.65s; -o-transition-duration: 0.65s; -o-transition-delay: 0.65s; transition-duration: 0.65s; transition-delay: 0.65s; } .motion.onTrans.set-1 .step-3 { -webkit-transition-delay: 0.95s; -moz-transition-delay: 0.95s; -ms-transition-delay: 0.95s; -o-transition-delay: 0.95s; transition-delay: 0.95s; } .motion.onTrans.set-1 .step-3.move-to-left-2 { -webkit-transition-duration: 0.65s; -webkit-transition-delay: 1.15s; -moz-transition-duration: 0.65s; -moz-transition-delay: 1.15s; -ms-transition-duration: 0.65s; -ms-transition-delay: 1.15s; -o-transition-duration: 0.65s; -o-transition-delay: 1.15s; transition-duration: 0.65s; transition-delay: 1.15s; } .motion.onTrans.set-1 .step-4 { -webkit-transition-delay: 1.25s; -moz-transition-delay: 1.25s; -ms-transition-delay: 1.25s; -o-transition-delay: 1.25s; transition-delay: 1.25s; } .motion.onTrans.set-1 .step-5 { -webkit-transition-delay: 1.55s; -moz-transition-delay: 1.55s; -ms-transition-delay: 1.55s; -o-transition-delay: 1.55s; transition-delay: 1.55s; } .motion.onTrans.set-2 .step-1 { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .motion.onTrans.set-2 .step-2 { -webkit-transition-duration: 0.7s; -webkit-transition-delay: 0.45s; -moz-transition-duration: 0.7s; -moz-transition-delay: 0.45s; -ms-transition-duration: 0.7s; -ms-transition-delay: 0.45s; -o-transition-duration: 0.7s; -o-transition-delay: 0.45s; transition-duration: 0.7s; transition-delay: 0.45s; } .motion.onTrans.set-3 .step-1 { -webkit-transition-duration: 0.05s; -webkit-transition-delay: 0.65s; -moz-transition-duration: 0.05s; -moz-transition-delay: 0.65s; -ms-transition-duration: 0.05s; -ms-transition-delay: 0.65s; -o-transition-duration: 0.05s; -o-transition-delay: 0.65s; transition-duration: 0.05s; transition-delay: 0.65s; } } body { overflow-x: hidden; } body #content { visibility: hidden; } body #content .txt-disclaimer { padding-left: 0; } body #content .txt-disclaimer:before { display: none !important; } body #content.onShow { visibility: visible; } body b { font-weight: normal; } body cite { display: inline-block; } body video, body img { width: 100%; height: 100%; } @media only screen and (min-width: 768px) { body .section-title .cols-container .txt-sub-tit { position: relative; padding-top: 180px; padding-top: 9.375%; } body .section-title .cols-container .txt-sub-tit span { display: block; overflow: hidden; } body .section-title .cols-container .txt-sub-tit span em { display: block; -webkit-transform: translateY(70%); -moz-transform: translateY(70%); -ms-transform: translateY(70%); -o-transform: translateY(70%); transform: translateY(70%); opacity: 0; filter: alpha(opacity=0); } body .section-title .cols-container .txt-sub-tit:before { position: absolute; display: block; content: ''; left: 50%; top: -4.5vw; width: 1px; height: 0; background-color: #000; } body .section-title .cols-container.onTrans .txt-sub-tit span em { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: -moz-transform 1s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition: -ms-transform 1s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: -o-transform 1s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 1s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); } body .section-title .cols-container.onTrans .txt-sub-tit:before { height: 9.0104vw; -webkit-transition: height 1s 0s cubic-bezier(.215,.61,.355,1); -moz-transition: height 1s 0s cubic-bezier(.215,.61,.355,1); -ms-transition: height 1s 0s cubic-bezier(.215,.61,.355,1); -o-transition: height 1s 0s cubic-bezier(.215,.61,.355,1); transition: height 1s 0s cubic-bezier(.215,.61,.355,1); } } @media only screen and (max-width: 767.7px) { body .section-title .cols-container .txt-sub-tit { position: relative; padding-top: 28vw; font-size: 10.66667vw; line-height: 1.15; } body .section-title .cols-container .txt-sub-tit span { display: block; overflow: hidden; } body .section-title .cols-container .txt-sub-tit span em { display: block; -webkit-transform: translateY(70%); -moz-transform: translateY(70%); -ms-transform: translateY(70%); -o-transform: translateY(70%); transform: translateY(70%); opacity: 0; filter: alpha(opacity=0); } body .section-title .cols-container .txt-sub-tit:before { position: absolute; display: block; content: ''; left: 50%; top: -8vw; width: 1px; height: 0vw; background-color: #000; } body .section-title .cols-container.onTrans .txt-sub-tit span em { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: -moz-transform 1s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition: -ms-transform 1s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: -o-transform 1s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 1s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); } body .section-title .cols-container.onTrans .txt-sub-tit:before { height: 24vw; -webkit-transition: height 1s 0s cubic-bezier(.215,.61,.355,1); -moz-transition: height 1s 0s cubic-bezier(.215,.61,.355,1); -ms-transition: height 1s 0s cubic-bezier(.215,.61,.355,1); -o-transition: height 1s 0s cubic-bezier(.215,.61,.355,1); transition: height 1s 0s cubic-bezier(.215,.61,.355,1); } } body .video-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } body .video-container { position: relative; overflow: hidden; } body .video-container .video-box, body .video-container .img-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } body .bx-container .bx-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: none; border: none; background: transparent; } body .bx-container .bx-wrapper .bx-viewport { height: 100% !important; } body .bx-container .bx-wrapper .bx-viewport { overflow: visible !important; } @media only screen and (min-width: 768px) { body .bx-container .bx-pager.bx-default-pager, body .bx-container .bx-wrapper .bx-prev, body .bx-container .bx-wrapper .bx-next { letter-spacing: -0.12em; color: #000; font-weight: normal; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { body .bx-container .bx-pager.bx-default-pager, body .bx-container .bx-wrapper .bx-prev, body .bx-container .bx-wrapper .bx-next { font-family: "samsungonelatin400", "samsungonekorean400"; font-size: 1.86667vw; line-height: 1.42857; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { body .bx-container .bx-pager.bx-default-pager, body .bx-container .bx-wrapper .bx-prev, body .bx-container .bx-wrapper .bx-next { font-family: "samsungonelatin400", "samsungonekorean400"; font-size: 14px; font-size: 1.09375vw; line-height: 1.42857; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { body .bx-container .bx-pager.bx-default-pager, body .bx-container .bx-wrapper .bx-prev, body .bx-container .bx-wrapper .bx-next { font-family: "samsungonelatin400", "samsungonekorean400"; font-size: 14px; line-height: 1.42857; } } @media only screen and (min-width: 768px) and (min-width: 2561px) { body .bx-container .bx-pager.bx-default-pager, body .bx-container .bx-wrapper .bx-prev, body .bx-container .bx-wrapper .bx-next { font-family: "samsungonelatin400", "samsungonekorean400"; font-size: 14px; line-height: 1.42857; } } @media only screen and (max-width: 767.7px) { body .bx-container .bx-pager.bx-default-pager, body .bx-container .bx-wrapper .bx-prev, body .bx-container .bx-wrapper .bx-next { letter-spacing: -0.12em; color: #666; font-weight: normal; } } @media only screen and (max-width: 767.7px) and (max-width: 767.7px) { body .bx-container .bx-pager.bx-default-pager, body .bx-container .bx-wrapper .bx-prev, body .bx-container .bx-wrapper .bx-next { font-family: "samsungonelatin400", "samsungonekorean400"; font-size: 3.2vw; line-height: 1.58333; } } @media only screen and (max-width: 767.7px) and (min-width: 768px) and (max-width: 1280px) { body .bx-container .bx-pager.bx-default-pager, body .bx-container .bx-wrapper .bx-prev, body .bx-container .bx-wrapper .bx-next { font-family: "samsungonelatin400", "samsungonekorean400"; font-size: 24px; font-size: 1.875vw; line-height: 1.58333; } } @media only screen and (max-width: 767.7px) and (min-width: 1281px) { body .bx-container .bx-pager.bx-default-pager, body .bx-container .bx-wrapper .bx-prev, body .bx-container .bx-wrapper .bx-next { font-family: "samsungonelatin400", "samsungonekorean400"; font-size: 24px; line-height: 1.58333; } } @media only screen and (max-width: 767.7px) and (min-width: 2561px) { body .bx-container .bx-pager.bx-default-pager, body .bx-container .bx-wrapper .bx-prev, body .bx-container .bx-wrapper .bx-next { font-family: "samsungonelatin400", "samsungonekorean400"; font-size: 24px; line-height: 1.58333; } } @media only screen and (max-width: 767.7px) { body .bx-container .bx-wrapper .bx-pager, body .bx-container .bx-wrapper .bx-controls-auto { bottom: -9.33333vw; } body .bx-container .bx-wrapper .bx-controls-direction a { top: 55%; width: 2.93333vw; height: 5.6vw; opacity: 0; filter: alpha(opacity=0); } body .bx-container .bx-wrapper .bx-controls-direction a.bx-prev { left: 4vw; -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%); background: none; background-image: url("../img/bx_prev_m.png"); background-size: cover; } body .bx-container .bx-wrapper .bx-controls-direction a.bx-next { right: 4vw; -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); background: none; background-image: url("../img/bx_next_m.png"); background-size: 100% 100%; } } @media only screen and (min-width: 768px) { body .for-mob { display: none !important; } body .for-slider-mob { height: 0 !important; overflow-y: hidden !important; visibility: hidden; } } @media only screen and (max-width: 767.7px) { body .for-web { display: none !important; } body .for-slider-web { height: 0 !important; overflow-y: hidden !important; visibility: hidden; } } body { background-color: #ffeeec; } section .slider-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background-position: 50% 50%; } section .slider-container .slider { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; } section .slider-container li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); } section .slider-container li.active { z-index: 10; opacity: 1; filter: alpha(opacity=100); } section .slider-container li.on { z-index: 5; opacity: 1; filter: alpha(opacity=100); } section .slider-container li.off { z-index: 10; } section .slider-container .txt-disclaimer { position: absolute; width: 100%; top: 100%; left: 0; background-color: #fff; } @media only screen and (max-width: 767.7px) { section .reset-mo-pd { padding: 0; } } @media only screen and (min-width: 768px) { section .d-block-m { display: none; } } @media only screen and (max-width: 767.7px) { section .d-block-pc { display: none; } } section .p-0 { padding: 0; } section .pl-0 { padding-left: 0; } @media only screen and (max-width: 767.7px) { section .p-0-mo { padding: 0; } } @media only screen and (min-width: 768px) { section .p-0-pc { padding: 0; } } @media only screen and (min-width: 768px) { section .pr-0-pc { padding-right: 0; } } @media only screen and (min-width: 768px) { section .pl-0-pc { padding-left: 0; } } @media only screen and (max-width: 767.7px) { section .pl-0-mo { padding-left: 0; } } section .w-925 { width: 92.5%; margin: 0 3.75%; } @media only screen and (min-width: 768px) { section .w-80-pc { width: 576px; width: 80%; margin-left: auto; } section .w-80-pc.mr-auto { margin-left: 0; margin-right: auto; } } @media only screen and (min-width: 768px) { section .w-86-pc { width: 624px; width: 86.66667%; margin-left: auto; } section .w-86-pc.mr-auto { margin-left: 0; margin-right: auto; } } @media only screen and (min-width: 768px) { section .w-925-pc { width: 92.5%; margin: 0 3.75%; } } @media only screen and (max-width: 767.7px) { section .w-925-mo { width: 92.5%; margin: 0 3.75%; padding: 0; } } @media only screen and (max-width: 767.7px) { section .w-92-mo { width: 92%; margin: 0 4%; padding: 0; } } @media only screen and (max-width: 767.7px) { section .w-84-mo { width: 84%; margin: 0 8%; padding: 0; } } @media only screen and (max-width: 767.7px) { section .talign-c-mo { text-align: center; } } section .vertical-bot-align { font-size: 0; } section .vertical-bot-align > div { display: inline-block; vertical-align: bottom; } section .vertical-mid-align { font-size: 0; } section .vertical-mid-align > div { display: inline-block; vertical-align: middle; } @media only screen and (max-width: 767.7px) { section .flex-container-mo { display: flex; flex-direction: column; } } @media only screen and (max-width: 767.7px) { section .order-0-mo { order: 0; } } @media only screen and (max-width: 767.7px) { section .order-1-mo { order: 1; } } section .txt-holder .txt-disclaimer { color: #666; } section .txt-holder h3.txt-paragraph-big-bold { display: block; color: #0031e1; } @media only screen and (min-width: 768px) { section .txt-holder h3.txt-paragraph-big-bold { display: inline-block; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .txt-holder h3.txt-paragraph-big-bold { margin-right: 1.86667vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .txt-holder h3.txt-paragraph-big-bold { margin-right: 14px; margin-right: 1.09375vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .txt-holder h3.txt-paragraph-big-bold { margin-right: 14px; } } @media only screen and (min-width: 768px) { section .txt-holder h3.txt-paragraph-big-bold + .txt-paragraph-small-bold { display: inline-block; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .txt-holder h3.txt-paragraph-big-bold + .txt-paragraph-small-bold { padding-left: 2.13333vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .txt-holder h3.txt-paragraph-big-bold + .txt-paragraph-small-bold { padding-left: 16px; padding-left: 1.25vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .txt-holder h3.txt-paragraph-big-bold + .txt-paragraph-small-bold { padding-left: 16px; } } @media only screen and (min-width: 768px) { section .txt-holder h3.txt-paragraph-big-bold + .txt-paragraph-small-bold:before { display: block; position: absolute; width: 2px; top: 50%; left: 0; background-color: #000; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .txt-holder h3.txt-paragraph-big-bold + .txt-paragraph-small-bold:before { height: 3.33333vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .txt-holder h3.txt-paragraph-big-bold + .txt-paragraph-small-bold:before { height: 25px; height: 1.95313vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .txt-holder h3.txt-paragraph-big-bold + .txt-paragraph-small-bold:before { height: 25px; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .txt-holder h3.txt-paragraph-big-bold + .txt-paragraph-small-bold:before { margin-top: -1.86667vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .txt-holder h3.txt-paragraph-big-bold + .txt-paragraph-small-bold:before { margin-top: -14px; margin-top: -1.09375vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .txt-holder h3.txt-paragraph-big-bold + .txt-paragraph-small-bold:before { margin-top: -14px; } } @media only screen and (max-width: 767.7px) { section .txt-holder .txt-paragraph-small-bold-mo { font-family: "samsungonelatin700", "samsungonekorean700"; font-size: 3.73333vw; line-height: 1.85714; } } section .img-container .img-rolling-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-repeat: no-repeat; background-size: cover; background-position: center center; } section .img-container .img-rolling-container:before { display: block; position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-repeat: no-repeat; background-size: cover; background-position: center center; } section .img-container.has-bot-blueline:after, section .img-box.has-bot-blueline:after { display: block; content: ''; position: absolute; width: 100%; height: 6px; left: 0; right: 0; bottom: 0; background-color: #142ba0; } section .img-container.has-top-blueline:after, section .img-box.has-top-blueline:after { display: block; content: ''; position: absolute; width: 100%; height: 6px; left: 0; right: 0; top: 0; background-color: #142ba0; } section div[class^='cover'] .video-container, section div[class^='content-'] .video-container { width: 100%; height: 100%; overflow: hidden; } section div[class^='cover'] .video-container .video-box, section div[class^='content-'] .video-container .video-box { opacity: 0.99; filter: alpha(opacity=99); background: transparent; } section div[class^='cover'] .video-container .video-box figure, section div[class^='content-'] .video-container .video-box figure { background-repeat: no-repeat; background-size: cover; } section div[class^='cover'] .video-container .video-box video, section div[class^='content-'] .video-container .video-box video { position: relative; } section div[class^='cover'] .video-container .video-box:after, section div[class^='content-'] .video-container .video-box:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } section div[class^='cover'] .video-container .img-box figure, section div[class^='content-'] .video-container .img-box figure { background-size: 100% 100%; } section div[class^='cover'] .onTrans.video-container .video-box, section div[class^='content-'] .onTrans.video-container .video-box { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s ease-out; -moz-transition: -moz-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s ease-out; -ms-transition: -ms-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s ease-out; -o-transition: -o-transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s ease-out; transition: transform 0.8s 0.4s ease-out, opacity 0.8s 0.4s ease-out; } section .img-cont-group { position: relative; } section .symbol-1 { position: relative; } section .symbol-1 .mask { position: absolute; width: 100%; height: 100%; border-radius: 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; opacity: 0; filter: alpha(opacity=0); overflow: hidden; } section .symbol-1 .mask figure { top: 50%; left: 50%; } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .symbol-1 { width: 113.33333vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .symbol-1 { width: 850px; width: 66.40625vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .symbol-1 { width: 850px; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .symbol-1 { height: 112.53333vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .symbol-1 { height: 844px; height: 65.9375vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .symbol-1 { height: 844px; } } @media only screen and (min-width: 768px) { section .symbol-1 figure { background-image: url("../img/svg_symbol_1.png"); } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .symbol-1 .mask figure { width: 113.33333vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .symbol-1 .mask figure { width: 850px; width: 66.40625vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .symbol-1 .mask figure { width: 850px; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .symbol-1 .mask figure { height: 112.53333vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .symbol-1 .mask figure { height: 844px; height: 65.9375vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .symbol-1 .mask figure { height: 844px; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .symbol-1 .mask figure { margin-left: -56.66667vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .symbol-1 .mask figure { margin-left: -425px; margin-left: -33.20313vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .symbol-1 .mask figure { margin-left: -425px; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .symbol-1 .mask figure { margin-top: -56.26667vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .symbol-1 .mask figure { margin-top: -422px; margin-top: -32.96875vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .symbol-1 .mask figure { margin-top: -422px; } } @media only screen and (max-width: 767.7px) { section .symbol-1 { width: 44.26667vw; height: 44.53333vw; } section .symbol-1 figure { background-image: url("../img/svg_symbol_1.png"); } section .symbol-1 .mask figure { width: 44.26667vw; height: 44.53333vw; margin-left: -22.13333vw; margin-top: -22.26667vw; } } section .symbol-2 { position: relative; } section .symbol-2 .mask { position: absolute; width: 100%; height: 100%; border-radius: 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; opacity: 0; filter: alpha(opacity=0); overflow: hidden; } section .symbol-2 .mask figure { top: 50%; left: 50%; } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .symbol-2 { width: 71.73333vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .symbol-2 { width: 538px; width: 42.03125vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .symbol-2 { width: 538px; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .symbol-2 { height: 71.73333vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .symbol-2 { height: 538px; height: 42.03125vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .symbol-2 { height: 538px; } } @media only screen and (min-width: 768px) { section .symbol-2 figure { background-image: url("../img/svg_symbol_2.png"); } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .symbol-2 .mask figure { width: 71.73333vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .symbol-2 .mask figure { width: 538px; width: 42.03125vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .symbol-2 .mask figure { width: 538px; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .symbol-2 .mask figure { height: 71.73333vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .symbol-2 .mask figure { height: 538px; height: 42.03125vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .symbol-2 .mask figure { height: 538px; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .symbol-2 .mask figure { margin-left: -35.86667vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .symbol-2 .mask figure { margin-left: -269px; margin-left: -21.01563vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .symbol-2 .mask figure { margin-left: -269px; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .symbol-2 .mask figure { margin-top: -35.86667vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .symbol-2 .mask figure { margin-top: -269px; margin-top: -21.01563vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .symbol-2 .mask figure { margin-top: -269px; } } @media only screen and (max-width: 767.7px) { section .symbol-2 { width: 64vw; height: 63.73333vw; } section .symbol-2 figure { background-image: url("../img/svg_symbol_2_2.png"); } section .symbol-2 .mask figure { width: 64vw; height: 63.73333vw; margin-left: -32vw; margin-top: -31.86667vw; } } section .onTrans .symbol-1 .mask, section .onTrans .symbol-2 .mask { -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1); -moz-transform: translate3d(0, 0, 0) rotate(0) scale(1); -ms-transform: translate3d(0, 0, 0) rotate(0) scale(1); -o-transform: translate3d(0, 0, 0) rotate(0) scale(1); transform: translate3d(0, 0, 0) rotate(0) scale(1); opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 2s 0.4s cubic-bezier(0.24, 0.21, 0.21, 1), opacity 0.6s 0.4s ease-in-out; -moz-transition: -moz-transform 2s 0.4s cubic-bezier(0.24, 0.21, 0.21, 1), opacity 0.6s 0.4s ease-in-out; -ms-transition: -ms-transform 2s 0.4s cubic-bezier(0.24, 0.21, 0.21, 1), opacity 0.6s 0.4s ease-in-out; -o-transition: -o-transform 2s 0.4s cubic-bezier(0.24, 0.21, 0.21, 1), opacity 0.6s 0.4s ease-in-out; transition: transform 2s 0.4s cubic-bezier(0.24, 0.21, 0.21, 1), opacity 0.6s 0.4s ease-in-out; } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section.sec-kv .symbol-1 { margin-top: -62.93333vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section.sec-kv .symbol-1 { margin-top: -472px; margin-top: -36.875vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section.sec-kv .symbol-1 { margin-top: -472px; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section.sec-kv .symbol-1 { margin-right: -20vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section.sec-kv .symbol-1 { margin-right: -150px; margin-right: -11.71875vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section.sec-kv .symbol-1 { margin-right: -150px; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section.sec-kv .symbol-2 { margin-left: -37.33333vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section.sec-kv .symbol-2 { margin-left: -280px; margin-left: -21.875vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section.sec-kv .symbol-2 { margin-left: -280px; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section.sec-kv .symbol-2 { margin-bottom: 11.2vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section.sec-kv .symbol-2 { margin-bottom: 84px; margin-bottom: 6.5625vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section.sec-kv .symbol-2 { margin-bottom: 84px; } } @media only screen and (max-width: 767.7px) and (max-width: 767.7px) { section.sec-kv .symbol-1 { margin-top: 5.33333vw; } } @media only screen and (max-width: 767.7px) and (min-width: 768px) and (max-width: 1280px) { section.sec-kv .symbol-1 { margin-top: 40px; margin-top: 3.125vw; } } @media only screen and (max-width: 767.7px) and (min-width: 1281px) { section.sec-kv .symbol-1 { margin-top: 40px; } } @media only screen and (max-width: 767.7px) and (max-width: 767.7px) { section.sec-kv .symbol-1 { margin-left: -22.26667vw; } } @media only screen and (max-width: 767.7px) and (min-width: 768px) and (max-width: 1280px) { section.sec-kv .symbol-1 { margin-left: -167px; margin-left: -13.04688vw; } } @media only screen and (max-width: 767.7px) and (min-width: 1281px) { section.sec-kv .symbol-1 { margin-left: -167px; } } @media only screen and (max-width: 767.7px) and (max-width: 767.7px) { section.sec-kv .symbol-2 { margin-right: -32.8vw; } } @media only screen and (max-width: 767.7px) and (min-width: 768px) and (max-width: 1280px) { section.sec-kv .symbol-2 { margin-right: -246px; margin-right: -19.21875vw; } } @media only screen and (max-width: 767.7px) and (min-width: 1281px) { section.sec-kv .symbol-2 { margin-right: -246px; } } @media only screen and (max-width: 767.7px) and (max-width: 767.7px) { section.sec-kv .symbol-2 { margin-bottom: 1.46667vw; } } @media only screen and (max-width: 767.7px) and (min-width: 768px) and (max-width: 1280px) { section.sec-kv .symbol-2 { margin-bottom: 11px; margin-bottom: 0.85938vw; } } @media only screen and (max-width: 767.7px) and (min-width: 1281px) { section.sec-kv .symbol-2 { margin-bottom: 11px; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section.sec-1 .symbol-1, section.sec-1 .symbol-2, section.sec-2 .symbol-1, section.sec-2 .symbol-2 { width: 8vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section.sec-1 .symbol-1, section.sec-1 .symbol-2, section.sec-2 .symbol-1, section.sec-2 .symbol-2 { width: 60px; width: 4.6875vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section.sec-1 .symbol-1, section.sec-1 .symbol-2, section.sec-2 .symbol-1, section.sec-2 .symbol-2 { width: 60px; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section.sec-1 .symbol-1, section.sec-1 .symbol-2, section.sec-2 .symbol-1, section.sec-2 .symbol-2 { height: 8vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section.sec-1 .symbol-1, section.sec-1 .symbol-2, section.sec-2 .symbol-1, section.sec-2 .symbol-2 { height: 60px; height: 4.6875vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section.sec-1 .symbol-1, section.sec-1 .symbol-2, section.sec-2 .symbol-1, section.sec-2 .symbol-2 { height: 60px; } } @media only screen and (min-width: 1921px) { section.sec-1 .symbol-1, section.sec-1 .symbol-2, section.sec-2 .symbol-1, section.sec-2 .symbol-2 { width: 60px; height: 60px; } } @media only screen and (max-width: 767.7px) { section.sec-1 .symbol-1, section.sec-1 .symbol-2, section.sec-2 .symbol-1, section.sec-2 .symbol-2 { width: 8vw; height: 8vw; } } section.sec-1 .symbol-1 figure, section.sec-2 .symbol-1 figure { background-image: url("../img/svg_symbol_1_sm.png"); } section.sec-1 .symbol-2 figure, section.sec-2 .symbol-2 figure { background-image: url("../img/svg_symbol_2_sm.png"); } section.sec-1 .symbol-3 figure, section.sec-2 .symbol-3 figure { background-image: url("../img/svg_symbol_3.png"); } section.sec-1 .symbol-4 figure, section.sec-2 .symbol-4 figure { background-image: url("../img/svg_symbol_4.png"); } section.sec-1 .symbol-5 figure, section.sec-2 .symbol-5 figure { background-image: url("../img/svg_symbol_5.png"); } section.sec-1 .symbol-5-2 figure, section.sec-2 .symbol-5-2 figure { background-image: url("../img/svg_symbol_5_2.png"); } section.sec-1 .motion .symbol-1, section.sec-1 .motion .symbol-2, section.sec-2 .motion .symbol-1, section.sec-2 .motion .symbol-2 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } section.sec-1 .motion .symbol-3, section.sec-2 .motion .symbol-3 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.95) rotate(-10deg); -moz-transform: scale(0.95) rotate(-10deg); -ms-transform: scale(0.95) rotate(-10deg); -o-transform: scale(0.95) rotate(-10deg); transform: scale(0.95) rotate(-10deg); } section.sec-1 .motion .symbol-4, section.sec-2 .motion .symbol-4 { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translate3d(50%, 0, 0); -moz-transform: translate3d(50%, 0, 0); -ms-transform: translate3d(50%, 0, 0); -o-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } section.sec-1 .motion .symbol-5, section.sec-2 .motion .symbol-5 { opacity: 0; filter: alpha(opacity=0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } section.sec-1 .motion .symbol-5-2, section.sec-2 .motion .symbol-5-2 { width: 200%; opacity: 0; filter: alpha(opacity=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); } section.sec-1 .onTrans .symbol-1, section.sec-1 .onTrans .symbol-2, section.sec-2 .onTrans .symbol-1, section.sec-2 .onTrans .symbol-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.5s 0s ease-in-out, opacity 0.5s 0s ease-in-out; -moz-transition: -moz-transform 0.5s 0s ease-in-out, opacity 0.5s 0s ease-in-out; -ms-transition: -ms-transform 0.5s 0s ease-in-out, opacity 0.5s 0s ease-in-out; -o-transition: -o-transform 0.5s 0s ease-in-out, opacity 0.5s 0s ease-in-out; transition: transform 0.5s 0s ease-in-out, opacity 0.5s 0s ease-in-out; } section.sec-1 .onTrans .symbol-3, section.sec-2 .onTrans .symbol-3 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); -webkit-transition: -webkit-transform 1s 0s ease-in-out, opacity 0.5s 0s ease-in-out; -moz-transition: -moz-transform 1s 0s ease-in-out, opacity 0.5s 0s ease-in-out; -ms-transition: -ms-transform 1s 0s ease-in-out, opacity 0.5s 0s ease-in-out; -o-transition: -o-transform 1s 0s ease-in-out, opacity 0.5s 0s ease-in-out; transition: transform 1s 0s ease-in-out, opacity 0.5s 0s ease-in-out; } section.sec-1 .onTrans .symbol-4, section.sec-1 .onTrans .symbol-5, section.sec-2 .onTrans .symbol-4, section.sec-2 .onTrans .symbol-5 { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translate3d(0, 0, 0) rotateY(0); -moz-transform: translate3d(0, 0, 0) rotateY(0); -ms-transform: translate3d(0, 0, 0) rotateY(0); -o-transform: translate3d(0, 0, 0) rotateY(0); transform: translate3d(0, 0, 0) rotateY(0); -webkit-transition: -webkit-transform 1.2s 0s ease-in-out, opacity 0.7s 0.5s ease-in-out; -moz-transition: -moz-transform 1.2s 0s ease-in-out, opacity 0.7s 0.5s ease-in-out; -ms-transition: -ms-transform 1.2s 0s ease-in-out, opacity 0.7s 0.5s ease-in-out; -o-transition: -o-transform 1.2s 0s ease-in-out, opacity 0.7s 0.5s ease-in-out; transition: transform 1.2s 0s ease-in-out, opacity 0.7s 0.5s ease-in-out; } section.sec-1 .onTrans .symbol-5-2, section.sec-2 .onTrans .symbol-5-2 { opacity: 1; filter: alpha(opacity=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-transition: -webkit-transform 2s 0s ease-in-out, opacity 1.2s 0s ease-in-out; -moz-transition: -moz-transform 2s 0s ease-in-out, opacity 1.2s 0s ease-in-out; -ms-transition: -ms-transform 2s 0s ease-in-out, opacity 1.2s 0s ease-in-out; -o-transition: -o-transform 2s 0s ease-in-out, opacity 1.2s 0s ease-in-out; transition: transform 2s 0s ease-in-out, opacity 1.2s 0s ease-in-out; } section .pos-top-left { position: absolute; top: 0; left: 0; } section .pos-top-right { position: absolute; top: 0; right: 0; left: auto; } section .pos-bot-left { position: absolute; top: auto; bottom: 0; left: 0; } section .pos-bot-left-half { position: absolute; top: auto; bottom: 0; left: 50%; } section .pos-bot-right { position: absolute; top: auto; bottom: 0; right: 0; left: auto; } section .img-container .pos-top-left { position: absolute; top: 0; left: 0; } section .img-container .pos-top-right { position: absolute; top: 0; right: 0; left: auto; } section .img-container .pos-bot-left { position: absolute; top: auto; bottom: 0; left: 0; } section .img-container .pos-bot-left-half { position: absolute; top: auto; bottom: 0; left: 50%; } section .img-container .pos-bot-right { position: absolute; top: auto; bottom: 0; right: 0; left: auto; } @media only screen and (max-width: 767.7px) { section .pos-top-left-mob-only { position: absolute; right: auto; bottom: auto; top: 0; left: 0; } section .pos-top-right-mob-only { position: absolute; left: auto; bottom: auto; top: 0; right: 0; } section .pos-bot-left-mob-only { position: absolute; top: auto; right: auto; bottom: 0; left: 0; } section .pos-bot-left-half-mob-only { position: absolute; top: auto; right: auto; bottom: 0; left: 50%; } section .pos-bot-right-mob-only { position: absolute; top: auto; left: auto; bottom: 0; right: 0; } section .pos-left-auto-mob-only { left: auto; } section .pos-right-auto-mob-only { right: auto; } section .pos-x-auto-mob-only { left: auto; right: auto; } section .pos-bot-mob-only { top: auto; bottom: 0; } } section .line-col { position: absolute; width: 2px; height: 560px; height: 51.85185%; max-height: 560px; bottom: 0; left: 50%; margin-left: -1px; overflow: hidden; } @media only screen and (max-width: 767.7px) { section .line-col { margin-bottom: -28.26667vw; } } @media only screen and (min-width: 768px) and (max-width: 1280px) { section .line-col { margin-bottom: -212px; margin-bottom: -16.5625vw; } } @media only screen and (min-width: 1281px) { section .line-col { margin-bottom: -212px; } } section .line-col .line { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #0031e1; } section .line-col.line-pos-bot-l { left: 0; margin-left: 0; } section .line-col.line-pos-top { bottom: auto; top: 0; } @media only screen and (max-width: 767.7px) { section .line-col { width: 0.26667vw; height: 66.66667vw; margin-bottom: -26.66667vw; } } section .line-row { position: absolute; width: 100%; left: 0; right: 0; bottom: 0; overflow: hidden; } section .line-row .line { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #fe5d4d; } section .line-row.line-pos-top { bottom: auto; top: 0; } @media only screen and (min-width: 768px) and (max-width: 767.7px) { section .line-row { height: 0.8vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { section .line-row { height: 6px; height: 0.46875vw; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { section .line-row { height: 6px; } } @media only screen and (max-width: 767.7px) { section .line-row { height: 0.66667vw; } } section .line-col.motion { -webkit-transform: translate3d(0, -5%, 0); -moz-transform: translate3d(0, -5%, 0); -ms-transform: translate3d(0, -5%, 0); -o-transform: translate3d(0, -5%, 0); transform: translate3d(0, -5%, 0); } section .line-col.motion .line { -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); } section .line-col.motion.onTrans { -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-transition: -webkit-transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; -moz-transition: -moz-transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; -ms-transition: -ms-transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; -o-transition: -o-transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; transition: transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; } section .line-col.motion.onTrans .line { -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-transition: -webkit-transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; -moz-transition: -moz-transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; -ms-transition: -ms-transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; -o-transition: -o-transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; transition: transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; } section .line-col.motion.onTrans .line.duration-2 { -webkit-transition-duration: 3s; -moz-transition-duration: 3s; -o-transition-duration: 3s; transition-duration: 3s; } section .line-row.motion .line { -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } section .line-row.motion.onTrans .line { -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-transition: -webkit-transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; -moz-transition: -moz-transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; -ms-transition: -ms-transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; -o-transition: -o-transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; transition: transform 1s 0.2s ease-out, opacity 1s 0.2s ease-out; } section .line-row.motion.onTrans.duration-2 .line { -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } @media only screen and (max-width: 767.7px) { section .line-row.motion.onTrans.duration-mo-2 .line { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } } section .cover { position: relative; } section .cover .cover-bg { background-color: #edd2cf; } section .cover .cover-bg .zoom-out { opacity: 0; filter: alpha(opacity=0); } section .cover .cover-bg.onTrans .zoom-out { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1.8s 0s ease-out, opacity 1.4s 0.2s; -moz-transition: -moz-transform 1.8s 0s ease-out, opacity 1.4s 0.2s; -ms-transition: -ms-transform 1.8s 0s ease-out, opacity 1.4s 0.2s; -o-transition: -o-transform 1.8s 0s ease-out, opacity 1.4s 0.2s; transition: transform 1.8s 0s ease-out, opacity 1.4s 0.2s; } section .cover .cover-txt h2 { font-size: 0; text-transform: uppercase; } section .cover .cover-txt h2 .txt { display: block; overflow: hidden; } section .cover .cover-txt h2 .txt em { display: inline-block; letter-spacing: 0.12em; opacity: 0; filter: alpha(opacity=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); } @media only screen and (max-width: 767.7px) { section .cover .cover-txt h2 .txt em { font-family: "samsungonelatin400"; font-size: 9.33333vw; line-height: 1.17143; } } @media only screen and (min-width: 768px) and (max-width: 1280px) { section .cover .cover-txt h2 .txt em { font-family: "samsungonelatin400"; font-size: 70px; font-size: 5.46875vw; line-height: 1.17143; } } @media only screen and (min-width: 1281px) { section .cover .cover-txt h2 .txt em { font-family: "samsungonelatin400"; font-size: 70px; line-height: 1.17143; } } @media only screen and (min-width: 2561px) { section .cover .cover-txt h2 .txt em { font-family: "samsungonelatin400"; font-size: 70px; line-height: 1.17143; } } @media only screen and (max-width: 767.7px) { section .cover .cover-txt h2 .txt em.d-block-pc { display: none; } } @media only screen and (min-width: 768px) { section .cover .cover-txt h2 .txt em.d-block-m { display: none; } } section .cover .cover-txt.onTrans h2 .txt em { opacity: 1; filter: alpha(opacity=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); } section .cover .cover-txt.onTrans h2 .txt .txt-1 { -webkit-transition: -webkit-transform 1s 0s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0s linear; -moz-transition: -moz-transform 1s 0s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0s linear; -ms-transition: -ms-transform 1s 0s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0s linear; -o-transition: -o-transform 1s 0s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0s linear; transition: transform 1s 0s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0s linear; } section .cover .cover-txt.onTrans h2 .txt .txt-2 { -webkit-transition: -webkit-transform 1s 0.25s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0.25s linear; -moz-transition: -moz-transform 1s 0.25s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0.25s linear; -ms-transition: -ms-transform 1s 0.25s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0.25s linear; -o-transition: -o-transform 1s 0.25s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0.25s linear; transition: transform 1s 0.25s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0.25s linear; } section .cover .cover-txt.onTrans h2 .txt .txt-3 { -webkit-transition: -webkit-transform 1s 0.5s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0.5s linear; -moz-transition: -moz-transform 1s 0.5s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0.5s linear; -ms-transition: -ms-transform 1s 0.5s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0.5s linear; -o-transition: -o-transform 1s 0.5s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0.5s linear; transition: transform 1s 0.5s cubic-bezier(0.22, 0.12, 0.38, 1), opacity 1s 0.5s linear; } section .cover .cover-txt.onTrans p { -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delaym: 1s; transition-delay: 1s; } @media only screen and (min-width: 768px) { section .cover .cover-bg { padding-top: 800px; padding-top: 41.66667%; } section .cover .cover-bg .img-box figure { background-image: url("../img/cover_sec_2.jpg"); } section .cover .cols-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; font-size: 0; } section .cover .cols-container:before { display: inline-block; width: 0; height: 100%; vertical-align: middle; } section .cover .cols-container .cover-txt { color: #fff; vertical-align: middle; } } @media only screen and (max-width: 767.7px) { section .cover .cover-bg { padding-top: 650px; padding-top: 86.66667%; } section .cover .cover-bg .img-box figure { background-image: url("../img/cover_sec_2.jpg"); } section .cover .cols-container { position: relative; } section .cover .cols-container > div { display: inline-block; } section .cover .cols-container .cover-txt { text-align: center; } section .cover .cols-container .line-col { height: 26.66667vw; margin-top: -13.33333vw; } section .cover .cols-container .line-col.motion.onTrans { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } section .cover .cols-container .line-col.motion.onTrans .line { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } } @media only screen and (min-width: 768px) { section .cover + div .cols-container { position: relative; } section .cover + div .cols-container .line-col { height: 470px; height: 335.71429%; margin-bottom: 0; margin-left: 10%; } } @media only screen and (min-width: 1921px) { section .cover + div .cols-container .line-col { height: 470px; height: 335.71429%; min-height: 470px; margin-bottom: 0; margin-left: 10%; } } .sec-kv { position: relative; overflow: visible; } .sec-kv .vertical-mid-con { overflow: hidden; text-align: center; } .sec-kv .vertical-mid-con .vertical-mid-txt h1 { letter-spacing: -0.02em; overflow: hidden; -webkit-transform: scale(0.82); -moz-transform: scale(0.82); -ms-transform: scale(0.82); -o-transform: scale(0.82); transform: scale(0.82); opacity: 0; filter: alpha(opacity=0); -webkit-transform-origin: center bottom top; -moz-transform-origin: center bottom top; -ms-transform-origin: center bottom top; -o-transform-origin: center bottom top; transform-origin: center bottom top; } .sec-kv .vertical-mid-con .vertical-mid-txt .txt-kv-sub-tit { display: block; text-align: center; letter-spacing: -0.02em; line-height: 1.5; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); opacity: 0; filter: alpha(opacity=0); } .sec-kv .vertical-mid-con .vertical-mid-txt.onTrans h1 { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1.8s 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.8s 1s; -moz-transition: -moz-transform 1.8s 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.8s 1s; -ms-transition: -ms-transform 1.8s 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.8s 1s; -o-transition: -o-transform 1.8s 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.8s 1s; transition: transform 1.8s 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.8s 1s; } .sec-kv .vertical-mid-con .vertical-mid-txt.onTrans .txt-kv-sub-tit { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 0.8s 1.5s ease-out, opacity 1s 1.5s linear; -moz-transition: -moz-transform 0.8s 1.5s ease-out, opacity 1s 1.5s linear; -ms-transition: -ms-transform 0.8s 1.5s ease-out, opacity 1s 1.5s linear; -o-transition: -o-transform 0.8s 1.5s ease-out, opacity 1s 1.5s linear; transition: transform 0.8s 1.5s ease-out, opacity 1s 1.5s linear; } .sec-kv .vertical-mid-con .img-container { position: absolute; width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; overflow: visible; } .sec-kv .vertical-mid-con .img-container .img-box { position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-position: center center; } .sec-kv .vertical-mid-con .img-container .img-box figure { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .sec-kv .vertical-mid-con .img-container .video-container { width: 100%; height: 100%; } .sec-kv .vertical-mid-con .img-container .video-container .video-keyvisual { position: absolute; width: 100%; height: auto; bottom: 0; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); -o-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); opacity: 0; filter: alpha(opacity=0); } .sec-kv .vertical-mid-con .img-container .video-container .video-keyvisual.vertical { width: auto; height: 100%; } .sec-kv .vertical-mid-con .img-container.onTrans .img-box figure { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 1.8s 0.2s cubic-bezier(0.29, 0.15, 0.57, 1), opacity 1s 0s ease-in-out; -moz-transition: -moz-transform 1.8s 0.2s cubic-bezier(0.29, 0.15, 0.57, 1), opacity 1s 0s ease-in-out; -ms-transition: -ms-transform 1.8s 0.2s cubic-bezier(0.29, 0.15, 0.57, 1), opacity 1s 0s ease-in-out; -o-transition: -o-transform 1.8s 0.2s cubic-bezier(0.29, 0.15, 0.57, 1), opacity 1s 0s ease-in-out; transition: transform 1.8s 0.2s cubic-bezier(0.29, 0.15, 0.57, 1), opacity 1s 0s ease-in-out; } .sec-kv .vertical-mid-con .img-container.onTrans .video-container .video-keyvisual { opacity: 1; filter: alpha(opacity=100); } .sec-kv .line-col.motion.onTrans { -webkit-transition-delay: 2.5s; -moz-transition-delay: 2.5s; -o-transition-delaym: 2.5s; transition-delay: 2.5s; } .sec-kv .line-col.motion.onTrans .line { -webkit-transition-delay: 2.5s; -moz-transition-delay: 2.5s; -o-transition-delaym: 2.5s; transition-delay: 2.5s; } @media only screen and (min-width: 1281px) { .sec-kv { height: calc(100vh - 70px); } .sec-kv .vertical-mid-con .video-container { height: calc(100vh - 70px); } } @media only screen and (min-width: 768px) and (max-width: 1280px) { .sec-kv { height: calc(100vh - 5.46875vw); } .sec-kv .vertical-mid-con .video-container { height: calc(100vh - 70px); } } @media only screen and (min-width: 768px) { .sec-kv .vertical-mid-con .img-container .img-box figure { background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url("../img/bg_kv.jpg"); } .sec-kv .vertical-mid-con .video-container figure { background-repeat: no-repeat; background-size: cover; background-position: center bottom; background-image: url("../img/poster_kv.jpg"); } } @media only screen and (max-width: 767.7px) { .sec-kv { height: 133.333vw; } .sec-kv .vertical-mid-con .vertical-mid-txt .txt-kv-sub-tit { display: block; text-align: center; -webkit-transform: translateY(10%); -moz-transform: translateY(10%); -ms-transform: translateY(10%); -o-transform: translateY(10%); transform: translateY(10%); opacity: 0; filter: alpha(opacity=0); } .sec-kv .vertical-mid-con .vertical-mid-txt .txt-kv-sub-tit { line-height: 1.5; } .sec-kv .vertical-mid-con .img-container .img-box figure { background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url("../img/bg_kv_m.jpg"); } .sec-kv .vertical-mid-con .video-container figure { background-repeat: no-repeat; background-size: cover; background-position: center bottom; background-image: url("../img/poster_kv_m.jpg"); } } .sec-1 .cover .cover-bg { background-color: #edc6c3; } .sec-1 .content-2 .img-container { background-color: #ffeeec; } .sec-1 .content-2 .img-1-2 .img-rolling-container .img-1 { position: absolute; padding-top: 0; opacity: 0; filter: alpha(opacity=0); } .sec-1 .content-2 .img-1-2 .img-rolling-container .img-2 { position: absolute; padding-top: 0; opacity: 0; filter: alpha(opacity=0); } .sec-1 .content-2 .img-1-2.onTrans .img-rolling-container .img-1 { -webkit-animation: img-rolling-1-2-loop-fade-type-2 7s 0s infinite linear; -moz-animation: img-rolling-1-2-loop-fade-type-2 7s 0s infinite linear; -ms-animation: img-rolling-1-2-loop-fade-type-2 7s 0s infinite linear; -o-animation: img-rolling-1-2-loop-fade-type-2 7s 0s infinite linear; animation: img-rolling-1-2-loop-fade-type-2 7s 0s infinite linear; } .sec-1 .content-2 .img-1-2.onTrans .img-rolling-container .img-2 { -webkit-animation: img-rolling-1-2-loop-fade-type-2 7s 3.5s infinite linear; -moz-animation: img-rolling-1-2-loop-fade-type-2 7s 3.5s infinite linear; -ms-animation: img-rolling-1-2-loop-fade-type-2 7s 3.5s infinite linear; -o-animation: img-rolling-1-2-loop-fade-type-2 7s 3.5s infinite linear; animation: img-rolling-1-2-loop-fade-type-2 7s 3.5s infinite linear; } @keyframes img-rolling-1-2-loop-fade-type-2 { 0% { opacity: 0; filter: alpha(opacity=0); } 7% { opacity: 1; filter: alpha(opacity=100); } 50% { opacity: 1; filter: alpha(opacity=100); } 57% { opacity: 0; filter: alpha(opacity=0); } 100% { opacity: 0; filter: alpha(opacity=0); } } .sec-1 .content-3 .line-row.motion.onTrans { -webkit-transition-delay: 0.65s; -moz-transition-delay: 0.65s; -o-transition-delaym: 0.65s; transition-delay: 0.65s; } .sec-1 .content-3 .line-row.motion.onTrans .line { -webkit-transition-delay: 0.65s; -moz-transition-delay: 0.65s; -o-transition-delaym: 0.65s; transition-delay: 0.65s; } .sec-1 .content-3 .img-1-3 .fade-in { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .sec-1 .content-3 .img-1-3:after { background-color: #1e2021; } .sec-1 .content-4 .img-1-4-1 { background-color: #c5a994; } .sec-1 .content-4 .img-1-4-2 { background-color: #c5a994; } .sec-1 .content-6 .img-cont-group { position: relative; } @media only screen and (min-width: 768px) { .sec-1 .cover .cover-bg .video-box figure { background-image: url("../img/cover_sec_1.jpg"); } .sec-1 .content-2 .img-container { padding-top: 740px; padding-top: 102.77778%; } .sec-1 .content-2 .img-container .img-1 figure { background-image: url("../img/img_sec_1_2_1.jpg"); } .sec-1 .content-2 .img-container .img-2 figure { background-image: url("../img/img_sec_1_2_2.jpg"); } .sec-1 .content-3 .img-container { padding-top: 615px; padding-top: 85.41667%; } .sec-1 .content-3 .img-container.img-1-3 figure { background-image: url("../img/img_sec_1_3.png"); } .sec-1 .content-3 .line-row { position: absolute; width: 900px; width: 46.875vw; top: 223px; top: 36.26016%; left: 50%; margin-left: -450px; margin-left: -23.4375vw; } .sec-1 .content-4 .img-cont-group { padding-top: 646px; padding-top: 89.72222%; } .sec-1 .content-4 .img-container.img-1-4-1 { width: 647px; width: 89.86111%; height: auto; padding-top: 494px; padding-top: 68.61111%; } .sec-1 .content-4 .img-container.img-1-4-1 figure { background-image: url("../img/img_sec_1_4_1.jpg"); } .sec-1 .content-4 .img-container.img-1-4-2 { width: 369px; width: 51.25%; height: auto; padding-top: 523px; padding-top: 72.63889%; } .sec-1 .content-4 .img-container.img-1-4-2 figure { background-image: url("../img/img_sec_1_4_2.jpg"); } .sec-1 .content-4 .img-container.img-1-4-obj { width: 286px; width: 39.72222%; height: auto; padding-top: 286px; padding-top: 39.72222%; margin-left: -153px; margin-left: -21.25%; margin-bottom: -113px; margin-bottom: -15.69444%; } .sec-1 .content-5 .img-container { padding-top: 166px; padding-top: 18.20175%; } .sec-1 .content-5 .img-container figure { background-image: url("../img/img_sec_1_5.png"); } .sec-1 .content-6 .img-container { padding-top: 658px; padding-top: 72.14912%; } .sec-1 .content-6 .img-container .img-box { width: 451px; width: 49.45175%; height: 0; padding-top: 325px; padding-top: 35.63596%; } .sec-1 .content-6 .img-container .img-1-6-1 figure { background-image: url("../img/img_sec_1_6_1.jpg"); } .sec-1 .content-6 .img-container .img-1-6-2 figure { background-image: url("../img/img_sec_1_6_2.jpg"); } .sec-1 .content-6 .img-container .img-1-6-3 figure { background-image: url("../img/img_sec_1_6_3.jpg"); } .sec-1 .content-6 .img-container .img-1-6-4 figure { background-image: url("../img/img_sec_1_6_4.jpg"); } .sec-1 .content-7 .img-container { padding-top: 720px; padding-top: 65.21739%; } .sec-1 .content-7 .img-container .img-1-7-1 figure { background-image: url("../img/img_sec_1_7_1.png"); } .sec-1 .content-7 .img-container .img-1-7-2 figure { background-image: url("../img/img_sec_1_7_2.png"); } } @media only screen and (max-width: 767.7px) { .sec-1 .cover .cover-bg .video-box figure { background-image: url("../img/cover_sec_1_m.jpg"); } .sec-1 .content-2 .img-container { padding-top: 648px; padding-top: 102.85714%; } .sec-1 .content-2 .img-container .img-1 figure { background-image: url("../img/img_sec_1_2_1_m.jpg"); } .sec-1 .content-2 .img-container .img-2 figure { background-image: url("../img/img_sec_1_2_2_m.jpg"); } .sec-1 .content-3 .img-container { padding-top: 470px; padding-top: 74.60317%; } .sec-1 .content-3 .img-container.img-1-3 figure { background-image: url("../img/img_sec_1_3_m.png"); } .sec-1 .content-3 .line-row { position: absolute; width: 100%; top: 194px; top: 41.2766%; left: 0; } .sec-1 .content-4 .img-cont-group { padding-top: 565px; padding-top: 89.68254%; } .sec-1 .content-4 .img-container.img-1-4-1 { width: 566px; width: 89.84127%; height: auto; padding-top: 432px; padding-top: 68.57143%; } .sec-1 .content-4 .img-container.img-1-4-1 figure { background-image: url("../img/img_sec_1_4_1_m.jpg"); } .sec-1 .content-4 .img-container.img-1-4-2 { width: 323px; width: 51.26984%; height: auto; padding-top: 458px; padding-top: 72.69841%; } .sec-1 .content-4 .img-container.img-1-4-2 figure { background-image: url("../img/img_sec_1_4_2_m.jpg"); } .sec-1 .content-4 .img-container.img-1-4-obj { width: 250px; width: 39.68254%; height: auto; padding-top: 256px; padding-top: 40.63492%; margin-left: -125px; margin-left: -19.84127%; margin-bottom: 74px; margin-bottom: 11.74603%; } .sec-1 .content-5 .img-container { padding-top: 118px; padding-top: 18.73016%; } .sec-1 .content-5 .img-container figure { background-image: url("../img/img_sec_1_5_m.png"); } .sec-1 .content-6 .img-container { padding-top: 470px; padding-top: 74.60317%; } .sec-1 .content-6 .img-container .img-box { width: 312px; width: 49.52381%; height: 0; padding-top: 232px; padding-top: 36.8254%; } .sec-1 .content-6 .img-container .img-1-6-1 figure { background-image: url("../img/img_sec_1_6_1_m.jpg"); } .sec-1 .content-6 .img-container .img-1-6-2 figure { background-image: url("../img/img_sec_1_6_2_m.jpg"); } .sec-1 .content-6 .img-container .img-1-6-3 figure { background-image: url("../img/img_sec_1_6_3_m.jpg"); } .sec-1 .content-6 .img-container .img-1-6-4 figure { background-image: url("../img/img_sec_1_6_4_m.jpg"); } .sec-1 .content-7 .img-container { padding-top: 518px; padding-top: 82.22222%; } .sec-1 .content-7 .img-container .img-1-7-1 figure { background-image: url("../img/img_sec_1_7_1_m.png"); } .sec-1 .content-7 .img-container .img-1-7-2 figure { background-image: url("../img/img_sec_1_7_2_m.png"); } } .sec-2 .cover .cover-bg { background-color: #e46855; } .sec-2 .content-2 .img-cont-group { position: relative; } .sec-2 .content-3 .img-cont-group { position: relative; } .sec-2 .content-4 .img-cont-group { position: relative; } .sec-2 .content-4 .img-cont-group .img-2-4 { background-color: #000; } .sec-2 .content-5 .img-cont-group { position: relative; } .sec-2 .content-5 .img-cont-group .img-container { background-color: #726864; } .sec-2 .content-5 .img-cont-group .line-row .line { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .sec-2 .content-6 .img-container .img-box { -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } .sec-2 .content-6 .img-container .zoom-in { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } @media only screen and (min-width: 768px) { .sec-2 .cover .cover-bg .video-box figure { background-image: url("../img/cover_sec_2.jpg"); } .sec-2 .content-2 .img-container.img-2-2 { padding-top: 740px; padding-top: 102.77778%; } .sec-2 .content-2 .img-container.img-2-2 figure { background-image: url("../img/img_sec_2_2.png"); } .sec-2 .content-2 .img-container.img-2-2-obj { width: 208px; width: 28.88889%; height: auto; padding-top: 502px; padding-top: 69.72222%; margin-top: -84px; margin-top: -11.66667%; margin-left: -10px; margin-left: -1.38889%; } .sec-2 .content-3 .img-container { padding-top: 382px; padding-top: 72.34848%; } .sec-2 .content-3 .img-container figure { background-image: url("../img/img_sec_2_3.png"); } .sec-2 .content-4 .img-container.img-2-4 { padding-top: 740px; padding-top: 102.77778%; } .sec-2 .content-4 .img-container.img-2-4 figure { background-image: url("../img/img_sec_2_4.jpg"); } .sec-2 .content-4 .img-container.img-2-4-obj { width: 166px; width: 23.05556%; height: auto; padding-top: 393px; padding-top: 54.58333%; margin-top: -103px; margin-top: -14.30556%; margin-left: -63px; margin-left: -8.75%; } .sec-2 .content-5 .img-container { padding-top: 720px; padding-top: 136.36364%; } .sec-2 .content-5 .img-container figure { background-image: url("../img/img_sec_2_5.jpg"); } .sec-2 .content-5 .line-row { width: 309px; width: 58.52273%; top: 0; left: auto; right: 0; margin-top: 238px; margin-top: 45.07576%; margin-right: -70px; margin-right: -13.25758%; } .sec-2 .content-6 .img-container { padding-top: 740px; padding-top: 102.77778%; } .sec-2 .content-6 .img-container figure { background-image: url("../img/img_sec_2_6.png"); } .sec-2 .content-7 .img-container { padding-top: 740px; padding-top: 49.93252%; } .sec-2 .content-7 .img-container .img-2-7-1 figure { background-image: url("../img/img_sec_2_7_1.png"); } } @media only screen and (max-width: 767.7px) { .sec-2 .cover .cover-bg .video-box figure { background-image: url("../img/cover_sec_2_m.jpg"); } .sec-2 .content-2 .img-container.img-2-2 { padding-top: 648px; padding-top: 102.85714%; } .sec-2 .content-2 .img-container.img-2-2 figure { background-image: url("../img/img_sec_2_2_m.png"); } .sec-2 .content-2 .img-container.img-2-2-obj { width: 190px; width: 30.15873%; height: auto; padding-top: 450px; padding-top: 71.42857%; margin-top: -72px; margin-top: -11.42857%; margin-left: -16px; margin-left: -2.53968%; } .sec-2 .content-3 .img-container { padding-top: 470px; padding-top: 74.60317%; } .sec-2 .content-3 .img-container figure { background-image: url("../img/img_sec_2_3_m.png"); } .sec-2 .content-4 .img-container.img-2-4 { padding-top: 648px; padding-top: 102.85714%; } .sec-2 .content-4 .img-container.img-2-4 figure { background-image: url("../img/img_sec_2_4_m.jpg"); } .sec-2 .content-4 .img-container.img-2-4-obj { width: 162px; width: 25.71429%; height: auto; padding-top: 392px; padding-top: 62.22222%; margin-top: -126px; margin-top: -20%; margin-left: -60px; margin-left: -9.52381%; } .sec-2 .content-5 .img-container { width: 555px; width: 88.09524%; padding-top: 756px; padding-top: 120%; } .sec-2 .content-5 .img-container figure { background-image: url("../img/img_sec_2_5_m.jpg"); } .sec-2 .content-5 .line-row { width: 324px; width: 43.2%; top: 0; left: auto; right: 0; margin-top: 175px; margin-top: 23.33333%; margin-right: 60px; margin-right: 8%; } .sec-2 .content-6 .img-container { padding-top: 648px; padding-top: 102.85714%; } .sec-2 .content-6 .img-container figure { background-image: url("../img/img_sec_2_6_m.png"); } .sec-2 .content-7 .img-container { padding-top: 364px; padding-top: 57.77778%; } .sec-2 .content-7 .img-container .img-2-7-1 figure { background-image: url("../img/img_sec_2_7_1_m.png"); } } .section-outro .txt-holder small { display: block; color: #fe5d4d; } @media only screen and (min-width: 768px) and (max-width: 767.7px) { .section-outro .vertical-mid-con { height: 126.37333vw; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { .section-outro .vertical-mid-con { height: 947.8px; height: 37.02344vw; /* @media (min-width:$psd-pc-width) { height: $pc-pixel*1px; }*/ } } @media only screen and (min-width: 768px) and (min-width: 1281px) and (max-width: 2560px) { .section-outro .vertical-mid-con { height: 947.8px; height: 37.02344vw; /* @media (min-width:$psd-pc-width) { height: $pc-pixel*1px; }*/ } } @media only screen and (min-width: 768px) and (min-width: 2561px) { .section-outro .vertical-mid-con { height: 947.8px; } } @media only screen and (min-width: 768px) { .section-outro .vertical-mid-con .img-container figure { background-image: url("../img/img_sec_outro.jpg"); } .section-outro .cols-container { position: relative; } .section-outro .txt-holder { color: #fff; } .section-outro .txt-holder p.txt-paragraph-small-bold { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(25%); -moz-transform: translateY(25%); -ms-transform: translateY(25%); -o-transform: translateY(25%); transform: translateY(25%); } .section-outro .txt-holder .btn-go-to-samsung { -webkit-transform: translateY(60%); -moz-transform: translateY(60%); -ms-transform: translateY(60%); -o-transform: translateY(60%); transform: translateY(60%); opacity: 0; filter: alpha(opacity=0); letter-spacing: -0.02em; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { .section-outro .txt-holder .btn-go-to-samsung { font-size: 3.2vw; line-height: 1; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { .section-outro .txt-holder .btn-go-to-samsung { font-size: 24px; font-size: 1.875vw; line-height: 1; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { .section-outro .txt-holder .btn-go-to-samsung { font-size: 24px; line-height: 1; } } @media only screen and (min-width: 768px) and (min-width: 2561px) { .section-outro .txt-holder .btn-go-to-samsung { font-size: 24px; line-height: 1; } } @media only screen and (min-width: 768px) { .section-outro .txt-holder .btn-go-to-samsung a { display: inline-block; color: #fff; border-bottom: 2px solid #fff; } } @media only screen and (min-width: 768px) and (max-width: 767.7px) { .section-outro .txt-holder .btn-go-to-samsung a { font-family: "samsungonelatin700"; font-size: 3.2vw; line-height: 1.16667; } } @media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1280px) { .section-outro .txt-holder .btn-go-to-samsung a { font-family: "samsungonelatin700"; font-size: 24px; font-size: 1.875vw; line-height: 1.16667; } } @media only screen and (min-width: 768px) and (min-width: 1281px) { .section-outro .txt-holder .btn-go-to-samsung a { font-family: "samsungonelatin700"; font-size: 24px; line-height: 1.16667; } } @media only screen and (min-width: 768px) and (min-width: 2561px) { .section-outro .txt-holder .btn-go-to-samsung a { font-family: "samsungonelatin700"; font-size: 24px; line-height: 1.16667; } } @media only screen and (min-width: 768px) { .section-outro .txt-holder.onTrans p.txt-paragraph-small-bold { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -moz-transition: -moz-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -ms-transition: -ms-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -o-transition: -o-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; transition: transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; } .section-outro .txt-holder.onTrans .btn-go-to-samsung { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -moz-transition: -moz-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -ms-transition: -ms-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; -o-transition: -o-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; transition: transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s linear; } } @media only screen and (max-width: 767.7px) { .section-outro .vertical-mid-con .img-container { position: relative; height: auto; padding-top: 400px; padding-top: 53.33333%; } .section-outro .vertical-mid-con .img-container figure { background-image: url("../img/img_sec_outro_m.jpg"); } .section-outro .cols-container { position: relative; } .section-outro .txt-holder { color: #000; text-align: center; } .section-outro .txt-holder p.txt-paragraph-small-bold { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } .section-outro .txt-holder .btn-go-to-samsung { -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); font-family: "samsungonelatin400"; font-size: 4.8vw; line-height: 1; letter-spacing: -0.02em; } .section-outro .txt-holder .btn-go-to-samsung a { font-family: "samsungonelatin700"; font-size: 4.8vw; line-height: 1; display: inline-block; color: #000; border-bottom: 2px solid #000; } .section-outro .txt-holder.onTrans p.txt-paragraph-small-bold { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -moz-transition: -moz-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -ms-transition: -ms-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; -o-transition: -o-transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; transition: transform 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s linear; } .section-outro .txt-holder.onTrans .btn-go-to-samsung { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s ease-out; -moz-transition: -moz-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s ease-out; -ms-transition: -ms-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s ease-out; -o-transition: -o-transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s ease-out; transition: transform 0.6s 0.2s ease-out, opacity 0.6s 0.2s ease-out; } } .related-stories-wrap.onShow .component-list li .title, .related-stories-wrap.onShow .component-list li .desc, .related-stories-wrap.onShow .component-list li .date { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1.2s 0.4s ease-in-out, opacity 1.2s 0.4s; -moz-transition: -moz-transform 1.2s 0.4s ease-in-out, opacity 1.2s 0.4s; -ms-transition: -ms-transform 1.2s 0.4s ease-in-out, opacity 1.2s 0.4s; -o-transition: -o-transform 1.2s 0.4s ease-in-out, opacity 1.2s 0.4s; transition: transform 1.2s 0.4s ease-in-out, opacity 1.2s 0.4s; } .related-stories-wrap.onShow .component-list li .img .item { opacity: 1; filter: alpha(opacity=100); -webkit-transition: -webkit-transform 1.2s 0s ease-in-out, opacity 1.2s; -moz-transition: -moz-transform 1.2s 0s ease-in-out, opacity 1.2s; -ms-transition: -ms-transform 1.2s 0s ease-in-out, opacity 1.2s; -o-transition: -o-transform 1.2s 0s ease-in-out, opacity 1.2s; transition: transform 1.2s 0s ease-in-out, opacity 1.2s; } @media only screen and (min-width: 768px) { .related-stories-wrap .dline { padding-top: 0; } } @media only screen and (max-width: 767.7px) { .related-stories-wrap .dline { padding-top: 0vw; margin-top: 40vw; } } @media only screen and (max-width: 767.7px) { .footer_wrap { background-color: #fff; } } /*# sourceMappingURL=page.css.map */