.opaque { opacity: 1; filter: alpha(opacity=100) } .opaque:hover { opacity: 1; filter: alpha(opacity=100) } .background-contain { -moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; -ms-background-size: contain; background-size: contain } .background-cover { -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-size: cover } .rld-loader { position: fixed; left: 0; top: 0; display: none; width: 100%; height: 100%; padding-bottom: 70px; background-color: #000; z-index: 10001 } .rld-loadstart .rld-loader { display: block } .rld-loadcomplete .rld-loader { opacity: 0; filter: alpha(opacity=0); transition-duration: 1.5s; -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; transition-delay: .8s; -webkit-transition-delay: .8s; -moz-transition-delay: .8s } .rld-progressbar { width: 0%; page-break-before: height: 5px; background-color: #00aaf9; transition-duration: .3s; -webkit-transition-duration: .3s; -moz-transition-duration: .3s } .modal-open { overflow: hidden } .modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: none; z-index: 101; overflow: auto; -webkit-overflow-scrolling: touch } .features img{max-width: 100%;} .modal-open .modal.active { display: block } .modal-backdrop { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: none; z-index: 100; background-color: #999; background-color: rgba(0,0,0,0.7) } .modal-open .modal-backdrop { display: block; opacity: 0; filter: alpha(opacity=0); transition-duration: .3s; -webkit-transition-duration: .3s; -moz-transition-duration: .3s } .modal-open .modal-backdrop.in { opacity: 1; filter: alpha(opacity=100); transition-duration: .5s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s } .modal-content { position: relative; margin: 0 auto; display: none; max-width: 1600px; min-width: 1024px; overflow: auto } .modal-content .rc-button-close { position: absolute; right: 30px; top: 30px; z-index: 3 } @media screen and (max-width:767px) { .modal-content { min-width: 0 } } .modal-open .modal-content { display: block; opacity: 0; filter: alpha(opacity=0); transition-duration: .3s; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px) } .modal-open .modal.in .modal-content { opacity: 1; filter: alpha(opacity=100); transition-duration: .5s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px) } .carousel-container { position: relative; margin: 0 auto } .carousel-slider { position: absolute; left: 0; top: 0; margin: 0; width: 100%; height: 100%; padding: 0; list-style: none } .carousel-transition .carousel-slider { transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s } @media screen and (max-width:767px) { .carousel-transition .carousel-slider { transition-duration: .5s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s } } .carousel-item { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .carousel-transition-skip.carousel-transition-next[enable-skip] .carousel-item-next { left: 100% !important; z-index: 1 } .carousel-transition-skip.carousel-transition-previous[enable-skip] .carousel-item-next { left: -100% !important; z-index: 1 } .modal-video-player { display: block; background-color: #000; z-index: 102 } .modal-video-player .button-close { display: none; width: 30px; height: 30px } .modal-video-player .button-close:before { font-size: 30px; line-height: 1; width: auto; height: auto } .modal-video-player .button-close:hover:before { color: #bbb; -webkit-text-stroke: .5px #bbb } .modal-video-player.mousemove .button-close { display: block } @media screen and (max-width:767px) { .modal-video-player .button-close { display: block } } .modal-video-player .video-container { position: absolute; left: 0; right: 0; top: 50%; margin: 0 auto; display: block; width: 100%; max-width: 1600px; padding-top: 56.12244898%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) } .modal-video-player .video-container>iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .modal-video-player-vertical .video-container { height: 100%; padding-top: 0 } .js:not(.android42) [show="on-scroll"] { opacity: 0; filter: alpha(opacity=0); filter:-; -webkit-transform: translateY(70px); -moz-transform: translateY(70px); -ms-transform: translateY(70px); transform: translateY(70px); transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out } .js:not(.android42) [show="on-scroll"].in-view { transition-duration: .7s; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100); filter:- } .rc-icon { text-decoration: none; position: relative; margin: 0 auto; display: inline-block; width: 38px; height: 38px; vertical-align: middle; overflow: hidden } .rc-icon:before { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 200%; background-repeat: no-repeat; background-position: center top; -moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; -ms-background-size: contain; background-size: contain } .rc-icon:hover:before { top: auto; bottom: 0 } .rc-icon-share { margin: 0 auto; display: block; width: 11px; height: 15px; background: url(../images/icon_share.svg) no-repeat left top } .rc-icon-remove { font-family: 'glyphicon'; font-size: 30px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; margin: 0 auto; display: block; width: 31px; height: 31px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .rc-icon-new-window:before { background-image: url(../images/icon_new_window.svg) } .rc-icon-play:before { background-image: url(../images/icon_play.svg) } .rc-icon-play-large, .rc-icon-play-ex-large { font-family: 'glyphicon'; font-size: 19px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; text-decoration: none; color: #fff; position: absolute; left: 50%; top: 50%; margin: 0 auto; display: block; width: 60px; height: 60px; overflow: hidden; cursor: pointer; border: 3px solid #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50% } .rc-icon-play-large:before, .rc-icon-play-ex-large:before { content: "\e60a"; position: absolute; left: 50%; top: 50%; margin-top: -0.05263158em; margin-left: .15789474em; -webkit-transform: translate(-50%, -50%) scale(.78, 1); -moz-transform: translate(-50%, -50%) scale(.78, 1); -ms-transform: translate(-50%, -50%) scale(.78, 1); transform: translate(-50%, -50%) scale(.78, 1) } .rc-icon-play-large:hover, .rc-icon-play-ex-large:hover { color: #919696; background-color: #fff; display: block } .rc-icon-play-ex-large { font-size: 23px; width: 76px; height: 76px; border-width: 4px } .rc-icon-replay { width: 38px; height: 44px; background: url(../images/icon_replay.svg) no-repeat center center; -moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; -ms-background-size: contain; background-size: contain } .rc-icon-replay:hover { opacity: .8; filter: alpha(opacity=80) } .rc-icon-arrow-right:before { background-image: url(../images/icon_arrow_right.svg) } .rc-icon-arrow-right-large { width: 76px; height: 76px } .rc-icon-arrow-right-large:before { background-image: url(../images/icon_arrow_right_large.svg) } .rc-icon-plus-circle { font-size: 32px; font-style: normal; font-weight: 400; line-height: 30px; text-align: center; color: #949999; border: 2px solid #949999; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50% } .rc-icon-plus-circle:before { content: "+"; position: absolute; left: -2px; top: 0; display: block; width: 38px; height: 76px; background-repeat: no-repeat; background-position: center top } .rc-icon-plus-circle:hover { color: #fff; background-color: #949999 } .rc-icon-plus-circle:hover:before { top: 0; bottom: auto } .ipad .rc-icon-plus-circle { line-height: 33px } .rc-icon-360-circle { font-size: 13px; font-style: normal; font-weight: 600; line-height: 34px; text-align: center; color: #949999; border: 2px solid #949999; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50% } .rc-icon-360-circle:before { content: "360"; position: absolute; left: -2px; top: 0; display: block; width: 38px; height: 76px; background-repeat: no-repeat; background-position: center top } .rc-icon-360-circle:hover { color: #fff; background-color: #949999 } .rc-icon-360-circle:hover:before { top: 0; bottom: auto } .rc-icon-colorchip { display: block; width: 43px; height: 43px; background: url(../images/gallery_color_chip.png) no-repeat left top } .rc-icon-colorchip:hover { background-position: left bottom } .color-indicator-active .rc-icon-colorchip { background-position: left bottom } .color-indicator-active .rc-icon-colorchip.rc-icon-colorchip-white { background-position: right bottom } .rc-icon-colorchip-white { background-position: right top } .rc-icon-colorchip-white:hover { background-position: right bottom } .color-indicator-active .rc-icon-colorchip-white { background-position: left bottom } .rc-button { padding: 0; background: none; border: none; -webkit-appearance: none; outline: none; cursor: pointer } .rc-button { font-size: 16px; font-size: .8rem; font-weight: 300; line-height: 1; letter-spacing: 0; text-transform: none; text-decoration: none; color: #fff; display: inline-block; padding: .8125em 1.25em; padding-right: 1.75em; transition-duration: .1s; -webkit-transition-duration: .1s; -moz-transition-duration: .1s } .rc-button>.rc-icon { margin-right: .71428571em } .rc-button:hover { background-color: #ccc } .rc-button-circle { border: 1px solid #fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50% } .rc-button-circle:hover { background-color: #949999; border-color: #949999 } .rc-button-close { color: #000; padding: 0 } .rc-button-close:hover { color: #919696; background-color: transparent } .rc-paddle { speak: none; font-family: 'glyphicon'; font-size: 65px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; color: #000; width: 30px; height: 65px; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-stroke: .2px #000 } .rc-paddle:before { margin-left: -0.3em; display: block; -webkit-transform: scale(1.15, 1); -moz-transform: scale(1.15, 1); -ms-transform: scale(1.15, 1); transform: scale(1.15, 1) } .rc-paddle:hover { color: #919696; background-color: transparent; -webkit-text-stroke-color: #919696 } .rc-cta { font-size: 16px; font-size: .8rem; font-weight: 300; line-height: 1; letter-spacing: 0; text-align: left; text-transform: none; text-decoration: none; white-space: nowrap; color: #000; display: inline-block; cursor: pointer; transition-duration: .1s; -webkit-transition-duration: .1s; -moz-transition-duration: .1s } .rc-cta>.rc-icon { margin-right: .64285714em } .rc-cta .rc-icon-plus-circle { margin-right: .28125em } .rc-cta .rc-icon-360-circle { margin-right: .69230769em } .rc-cta:hover>.rc-icon:before { top: auto; bottom: 0 } .rc-cta:hover .rc-icon-plus-circle, .rc-cta:hover .rc-icon-360-circle { color: #fff; background-color: #949999 } .rc-cta:hover .rc-icon-plus-circle:before, .rc-cta:hover .rc-icon-360-circle:before { top: 0; bottom: auto } @media screen and (max-width:767px) { .rc-cta { font-size: .75rem; width: 100%; padding: 10px 0; /* border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; */ padding-left: 25px; padding-right: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } } .rc-cta-text { display: inline-block; width: 100%; vertical-align: middle; overflow: hidden } .rc-cta.hidden .rc-cta-text { width: 0 } .rc-cta.in-view .rc-cta-text { width: 100%; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; -moz-transition-duration: 1.2s; transition-delay: .2s; -webkit-transition-delay: .2s; -moz-transition-delay: .2s } .rc-more-box .rc-cta { margin-left: 35px } .rc-more-box .rc-cta:first-child { margin-left: 0 } @media screen and (max-width:767px) { .rc-more-box .rc-cta { margin-left: 0 } .rc-more-box .rc-cta+.rc-cta { border-top: none } } .social-web { text-align: center; position: relative; display: none; overflow: hidden; border-top: 1px solid #e0e0e0; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-size: cover } .social-web .row { position: relative; max-width: 1180px; width: auto; padding: 200px 50px 80px; z-index: 1 } .social-web .cta { font-size: 14px; font-size: .7rem; font-weight: 400; letter-spacing: 0; line-height: 40px; text-decoration: none; text-align: center; color: #000; margin: 3.78571429em auto 0; display: inline-block; height: 40px; padding: 0 2.71428571em; -webkit-font-smoothing: subpixel-antialiased; border: 1px solid #ccc; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border-radius: .28571429em; -webkit-border-radius: .28571429em; -moz-border-radius: .28571429em } .social-web .cta:hover { color: #fff; background-color: #000; border-color: #000 } @media screen and (max-width:767px) { .social-web { padding-bottom: 80px } .social-web .row { margin: 90px auto 0; padding: 0 25px } .social-web .cta { position: static; font-size: 15px; font-size: .75rem; line-height: 52px; letter-spacing: 0; margin-top: 70px; margin-left: auto; margin-right: auto; height: 50px; padding: 0 37px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none } } .modal-timeline .social-web { border-top: none } .android42 .social-web { background-image: none } .js .social-web { display: block } .js .social-web .cta { margin-top: 2.85714286em } .social-web-copy { position: relative; padding-bottom: 100px; text-align: center; z-index: 1 } .social-web-copy:before, .social-web-copy:after { content: ""; position: absolute; left: 0; top: 0; margin-top: -1px; display: block; width: 35.2%; width: calc(50% - 175px); width: -webkit-calc(50% - 175px); height: 1px; background-color: #999 } .social-web-copy:after { left: auto; right: 0 } @media screen and (max-width:767px) { .social-web-copy { top: 0; padding-bottom: 60px; border-width: 1px } .social-web-copy:before, .social-web-copy:after { width: 17%; width: -webkit-calc(50% - 105px) } } .main .social-web-headline { font-size: 50px; font-size: 2.5rem; text-indent: 100%; white-space: nowrap; position: absolute; left: 0; right: 0; margin: -0.54em auto 0; display: block; width: 5em; height: 1.1em; background: url(../images/social_web.png) no-repeat center top; overflow: hidden; -moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; -ms-background-size: contain; background-size: contain } @media screen and (max-width:767px) { .main .social-web-headline { font-size: 1.6rem } } .social-web-background { position: absolute; left: 0; top: 0; width: 100% } .social-web-background img { position: relative; width: 100%; vertical-align: top } .social-web-background-full img { left: 50%; width: auto; height: 100%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } .social-web-background-full.social-web-background-fixed { position: fixed; height: 100% } .timeline-container { position: relative } .modal .timeline-container:after { content: ""; margin: 100px auto 0; display: none; width: 60px; height: 60px; -webkit-animation: timeline-progress 1.4s infinite linear; animation: timeline-progress 1.4s infinite linear; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0) } @-webkit-keyframes timeline-progress { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg) } } @keyframes timeline-progress { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg) } } .timeline-load-progress .timeline-container:after { background: url(../images/timeline_progress.svg) no-repeat center center } .timeline-load-complete .timeline-container:after { display: none } .social-timeline { position: relative; margin: -26px 0 0 -26px; padding: 0 } .social-timeline.hidden { visibility: hidden; min-height: 1000px } @media screen and (max-width:767px) { .social-timeline { margin-top: 0; margin-left: 0; width: auto !important; height: auto !important } } .js .social-timeline { margin-top: 0; margin-left: auto; margin-right: auto } .js .social-timeline-ready { visibility: visible } .sns-item { width: 33.33333333%; padding: 26px 0 0 26px; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; transition-property: transform, opacity; -webkit-transition-property: transform, opacity; -moz-transition-property: transform, opacity; transition-delay: 0s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s } .sns-item:nth-child(3n+2).in-view { transition-delay: .2s; -webkit-transition-delay: .2s; -moz-transition-delay: .2s } .sns-item:nth-child(3).in-view { transition-delay: .4s; -webkit-transition-delay: .4s; -moz-transition-delay: .4s } @media screen and (max-width:767px) { .sns-item { width: 100% !important; left: auto !important; top: auto !important } } .sns-item-inner { border: 1px solid #e0e0e0 } @media screen and (max-width:767px) { .content-social-timeline .sns-item:nth-child(4) { display: none } .content-social-timeline .sns-item:nth-child(5) { display: none } .content-social-timeline .sns-item:nth-child(6) { display: none } } .js .sns-item { max-width: 376px; position: absolute; padding: 0 } @media screen and (max-width:767px) { .js .sns-item { margin-top: 20px; max-width: none; position: relative } .js .sns-item:first-child { margin-top: 0 } } .sns-image { position: relative } .sns-image img { width: 100%; vertical-align: top } .sns-image:hover .rc-icon-play-large { color: #919696; background-color: #fff } .sns-item-youtube .sns-image { padding: 40px 0; background-color: #000; overflow: hidden } .sns-item>a>.sns-image img { width: 100% !important; height: auto !important } .sns-image-list { background-color: #fff } .sns-image-list-item { position: relative; width: 33.33333333%; height: 0; padding-top: 33.33333333%; float: left; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } .sns-image-list-item:first-child { width: 66.66666667%; padding-top: 100% } .sns-image-list-item:first-child .sns-image { border: none } .sns-image-list-item:first-child+.sns-image-list-item .sns-image { border-top: none } .sns-image-list-item .sns-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-left: 2px solid #fff; border-top: 2px solid #fff; overflow: hidden } .sns-image-list-item .sns-image.sns-image-panorama img { width: auto; height: 100% } .sns-image-list-item .sns-image img { position: absolute; left: 50%; top: 50%; left: 0 \9; top: 0 \9; width: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%) } .sns-image-list-item:not(:target) .sns-image img { left: 50% \9; top: 50% \9 } .sns-image-list-panorama .sns-image-list-item:first-child { width: 100%; padding-top: 66.66666667% } .sns-image-list-panorama .sns-image-list-item:first-child .sns-image { border: none } .sns-image-list-panorama .sns-image-list-item:first-child+.sns-image-list-item .sns-image { border-top: 2px solid #fff; border-left: none } .sns-image-list-3 .sns-image-list-item { width: 50%; padding-top: 50% } .sns-image-list-3 .sns-image-list-item:first-child { width: 50%; padding-top: 100% } .sns-image-list-3.sns-image-list-panorama .sns-image-list-item:first-child { width: 100%; padding-top: 50% } .sns-image-list-3.sns-image-list-panorama .sns-image-list-item:first-child .sns-image { border: none } .sns-image-list-3.sns-image-list-panorama .sns-image-list-item:first-child+.sns-image-list-item .sns-image { border-top: 2px solid #fff; border-left: none } .sns-image-list-2 .sns-image-list-item { width: 50%; padding-top: 100% } .sns-image-list-2 .sns-image-list-item .sns-image { border-left: 2px solid #fff } .sns-image-list-2 .sns-image-list-item:first-child { width: 50%; padding-top: 100% } .sns-image-list-2 .sns-image-list-item:first-child .sns-image { border: none } .sns-image-list-2.sns-image-list-panorama .sns-image-list-item { width: 100%; padding-top: 50% } .sns-image-list-2.sns-image-list-panorama .sns-image-list-item:first-child { width: 100%; padding-top: 50% } .sns-image-list-1 .sns-image-list-item:first-child { width: 100%; height: auto; padding-top: 0 } .sns-image-list-1 .sns-image-list-item .sns-image { position: static } .sns-image-list-1 .sns-image-list-item .sns-image img { position: static; width: 100% !important; height: auto !important; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -ms-transform: translate(0, 0) } .sns-post { margin: 0; padding: 30px; background-color: #fff } @media screen and (max-width:767px) { .sns-post { padding: 25px } } .main .sns-post-text { font-size: 14px; font-size: .7rem; font-weight: 300; line-height: 1.42857143; letter-spacing: 0; text-align: left; text-transform: none; color: #000; margin: -0.28571429em 0 -0.42857143em } .main .sns-post-text .url { word-break: break-all } @media screen and (max-width:767px) { .main .sns-post-text { font-size: 13px; font-size: .65rem } } .sns-post-info { margin-top: 40px; height: 30px; overflow: hidden } .sns-post-info a { text-decoration: none } .sns-post-info:before { content: ""; margin-right: 10px; display: block; width: 30px; height: 30px; background: url(../images/facebook.svg) no-repeat center center; background: url(../images/facebook.png) no-repeat center center\9; float: left } @media screen and (max-width:767px) { .sns-post-info { margin-top: 28px } } .sns-item-youtube .sns-post-info:before { background: url(../images/icon_youtube_alt.svg) no-repeat center center; background: url(../images/icon_youtube_alt.png) no-repeat center center\9 } .sns-post-category { font-size: 12px; font-size: .6rem; font-weight: 400; line-height: 1; letter-spacing: -0.005em; text-align: left; color: #000; display: block; margin: .16666667em 0 -0.3em } .sns-post-date { font-size: 12px; font-size: .6rem; font-weight: 300; line-height: 1; letter-spacing: 0em; text-align: left; color: #919696; margin: .58333333em 0 0; display: block } .social-web-background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-size: cover } .modal-timeline { overflow: hidden } .modal-timeline.timeline-full .cta { visibility: hidden } .modal-timeline .row { padding-bottom: 170px } .modal-timeline .cta { display: none; color: #fff } .modal-timeline .social-web-copy:before, .modal-timeline .social-web-copy:after { background-color: #fff; background-color: rgba(255,255,255,0.5) } .modal-timeline .social-web-headline { background-image: url(../images/social_web_white.png) } .modal-timeline .modal-content { z-index: 1; max-width: none; height: 100%; -webkit-overflow-scrolling: touch } .modal-timeline .sns-item-inner { border: none } .modal-timeline .social-web-background { opacity: 0; filter: alpha(opacity=0); transition-duration: .5s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; transition-timing-function: linear; -moz-transition-timing-function: linear; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; -ms-transition-timing-function: linear } .modal-timeline.in .social-web-background { opacity: 1; filter: alpha(opacity=100) } .modal-timeline .rc-button-close { color: #fff; right: 50px; top: 50px } .modal-timeline .rc-button-close:hover .rc-icon-remove { -webkit-text-stroke: .2px #fff } @media screen and (max-width:767px) { .modal-timeline .modal-content { min-width: 0 } .modal-timeline .rc-button-close { right: 25px; top: 25px } } #hero { padding-top: 41.66666667%; background-color: #000; overflow: hidden } #hero .hero-headline { font-size: 80px; font-size: 2.5rem; font-weight: 400; line-height: 1; letter-spacing: 0; text-align: center; color: #fff; margin: -0.125em auto -0.0625em } #hero .icon-chevron-down { vertical-align: top; display: inline-block; width: 32px; height: 17px; background: url(../images/chevron_down.svg) no-repeat center top; z-index: 1; overflow: hidden; -moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain; -ms-background-size: contain; background-size: contain } @media screen and (min-width:1600px) { #hero { padding-top: 667px } } @media screen and (max-width:1440px) { #hero { padding-top: 600px } } @media screen and (max-width:767px) { #hero { padding-top: 110% } #hero .hero-headline { font-size: 1.3rem } } .hero-copy { text-align: left; position: absolute; left: 0; right: 0; top: 50%; margin: auto; width: 980px; z-index: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) } @media screen and (max-width:767px) { .hero-copy { width: auto } } .hero-tagline { font-size: 24px; font-size: 1.2rem; font-weight: 300; line-height: 1; letter-spacing: 0; text-transform: none; margin: .5em auto 0; display: block } @media screen and (max-width:767px) { .hero-tagline { font-size: .65rem } } .hero-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; /* background-color: #000 */ } .hero-image img, .hero-image video { position: absolute; left: 50%; top: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: .85; filter: alpha(opacity=85) } .hero-image video { display: none } @media screen and (max-width:767px) { .hero-image img, .hero-image video { width: auto; height: 100% } } .video .hero-image[play="on-scroll"] img { display: none !important } .video .hero-image[play="on-scroll"] video { display: block } .hero-scroll-indicator { line-height: 0; text-align: center; position: absolute; left: 0; bottom: 30px; width: 100%; z-index: 1 } .hero-sharer { position: absolute; right: 30px; bottom: 30px; z-index: 2 } .hero-sharer .rc-button { width: 31px; height: 31px; vertical-align: top } .mbig #overview { background-color: #fff } .mbig #overview .row { position: relative; margin: 0 auto; width: 100%; max-width: 1280px; padding: 50px 30px; z-index: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } .mbig #overview .overview-title { font-size: 50px; font-size: 2.5rem; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-align: left; text-transform: none; color: #000; margin-top: -0.22em; margin-bottom: .72em; width: auto; max-width: 900px } .mbig #overview .overview-text { font-size: 16px; font-size: .8rem; font-weight: 300; line-height: 1.5; letter-spacing: 0; text-align: left; text-transform: none; color: #000; margin-top: -0.375em; margin-bottom: -0.4375em !important; width: auto } .mbig #overview .overview-text+.rc-more-box { margin-top: 41px } @media screen and (max-width:767px) { .mbig #overview { padding-bottom: 0 } .mbig #overview .row { padding: 0 25px } .mbig #overview .overview-title { font-size: 1.5rem } .mbig #overview .overview-text { font-size: .75rem } .mbig #overview .rc-cta { margin-left: -25px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box } } .product-gallery { padding: 100px 0 49px; border-top: 1px solid #e0e0e0 } @media screen and (max-width:767px) { .product-gallery { padding: 50px 0 0; border-top: none } } .product-gallery-container { position: relative; margin: 0 auto; max-width: 1080px; padding: 600px 0 0 } @media screen and (max-width:767px) { .product-gallery-container { padding-top: 58.59375%; padding-left: 0; padding-right: 0 } } .product-gallery-item { position: absolute; left: 0; top: 0; display: none; width: 100%; height: 100%; padding: 0 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } @media screen and (max-width:767px) { .product-gallery-item { padding: 0 20px } } .product-gallery-item-active { display: block; z-index: 1; opacity: 0; filter: alpha(opacity=0); transition-duration: .4s; -webkit-transition-duration: .4s; -moz-transition-duration: .4s; transition-timing-function: linear; -moz-transition-timing-function: linear; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; -ms-transition-timing-function: linear } .product-gallery-item-active.in { z-index: 2; opacity: 1; filter: alpha(opacity=100); transition-duration: .7s; -webkit-transition-duration: .7s; -moz-transition-duration: .7s } .product-gallery-image { position: relative; margin: 0 auto; height: 100% } .product-gallery-image img, .product-gallery-image video { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .product-gallery-image video { display: none } @media screen and (max-width:767px) { .product-gallery-image img { display: block; width: 100% } .product-gallery-image video { display: none } .product-gallery-image.autoplay-canplay img, .product-gallery-image.autoplay-playing img { display: block } .product-gallery-image.autoplay-canplay video, .product-gallery-image.autoplay-playing video { display: none } } .video .product-gallery-image.autoplay-canplay img, .video .product-gallery-image.autoplay-playing img { display: none } .video .product-gallery-image.autoplay-canplay video, .video .product-gallery-image.autoplay-playing video { display: block } .product-gallery-control { text-align: center; position: relative; margin: 99px auto 0; display: none; max-width: 1080px; padding: 0 50px; z-index: 3; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } .product-gallery-control .rc-more-box { margin: 0 auto; display: block } @media screen and (max-width:767px) { .product-gallery-control { margin-top: 50px; padding: 0 } .product-gallery-control .rc-more-box .rc-cta { padding-left: 25px; padding-right: 25px; float: none } .product-gallery-control .rc-more-box .rc-cta:first-child { margin-left: 0 } } .js .product-gallery-control { display: none } .color-indicators { position: absolute; right: 50px; top: 0; display: inline-block } @media screen and (max-width:767px) { .color-indicators { text-align: left; position: static; display: block; padding: 15px 25px; vertical-align: top; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0 } } .rc-more-box+.color-indicators { border-top: none } .color-indicator { position: relative; margin-left: 5px; width: 38px; height: 38px; float: left; cursor: pointer } .color-indicator:first-child { margin-left: 0 } .color-indicator:first-child .color-indicator-name { left: 70px } .color-indicator .rc-icon-colorchip { position: absolute; left: -2px; top: -2px } .color-indicator:hover .color-indicator-name { display: block } @media screen and (max-width:767px) { .color-indicator { margin-left: 10px } } .color-indicator-name { font-size: 13px; font-size: .65rem; font-weight: 300; line-height: 1; letter-spacing: 0; text-align: left; text-transform: capitalize; white-space: nowrap; color: #999; position: absolute; left: 35px; top: 50%; display: none; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) } .color-indicator-active .color-indicator-name { display: block } .photo-gallery { line-height: 0; text-align: center; padding: 50px 0 99px; border-top: 1px solid #e0e0e0 } .photo-gallery .carousel { position: relative; margin: 0 auto; max-width: 1080px; padding: 0 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } .photo-gallery .carousel-transition .carousel-slider { transition-duration: .7s; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; transition-delay: .5s; -webkit-transition-delay: .5s; -moz-transition-delay: .5s } .photo-gallery .rc-paddle { color: #666; position: absolute; top: 0; left: 50px; margin-top: 24.79591837%; z-index: 3; -webkit-text-stroke: .2px #666 } .photo-gallery .rc-paddle:hover { color: #000; -webkit-text-stroke: .2px #000 } .photo-gallery .rc-paddle-right { left: auto; right: 50px } .photo-gallery.photo-gallery-image-hover .rc-paddle { display: block } @media screen and (max-width:767px) { .photo-gallery { padding: 80px 0 0; border-top: none } .photo-gallery .carousel { padding: 0 } } .photo-gallery-container { position: relative; margin-left: -5px; padding: 56.2244898% 5px 310px } @media screen and (max-width:767px) { .photo-gallery-container { width: auto; padding-top: 62.5%; padding-bottom: 300px; overflow: hidden } } .photo-gallery-item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 5px; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } .photo-gallery-item.carousel-item-previous .photo-gallery-image { opacity: 1; filter: alpha(opacity=100) } .photo-gallery-item.carousel-item-current .photo-gallery-image { opacity: 1; filter: alpha(opacity=100); transition-duration: .5s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s } .photo-gallery-item.carousel-item-current .photo-gallery-item-copy { opacity: 1; filter: alpha(opacity=100) } .photo-gallery-item.left { left: -100% } .photo-gallery-item.right { left: 100% } .photo-gallery-item .photo-gallery-item-copy { opacity: 0; filter: alpha(opacity=0); transition-duration: .7s; -webkit-transition-duration: .7s; -moz-transition-duration: .7s } .photo-gallery-item .photo-gallery-image { opacity: .2; filter: alpha(opacity=20); transition-duration: .3s; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; transition-timing-function: linear; -moz-transition-timing-function: linear; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; -ms-transition-timing-function: linear } @media screen and (max-width:767px) { .photo-gallery-item { padding-left: 0; padding-right: 0 } .photo-gallery-item .rc-icon-play-large { display: block } } .photo-gallery-item-copy { margin: 0 auto; max-width: 650px; padding-top: 110px } @media screen and (max-width:767px) { .photo-gallery-item-copy { text-align: left; padding-top: 60px; padding-left: 25px; padding-right: 25px } } .photo-gallery .photo-gallery-item-headline { font-weight: 300; font-size: 20px; font-size: 1rem; line-height: 1.2; text-transform: none; color: #000; margin: -0.25em 0 .7em } @media screen and (max-width:767px) { .photo-gallery .photo-gallery-item-headline { font-size: 1rem; text-align: left; line-height: 1.3; margin: -0.2em 0 .75em } } .photo-gallery .photo-gallery-item-text { font-weight: 300; font-size: 14px; font-size: .7rem; line-height: 1.57142857; color: #000; margin-top: -0.35714286em; margin-bottom: -0.5em !important } .photo-gallery-image { position: relative; padding-top: 56.2244898%; overflow: hidden } .photo-gallery-image a { cursor: default } .photo-gallery-image img, .photo-gallery-image video { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden } .photo-gallery-image img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } @media screen and (max-width:767px) { .photo-gallery-image { padding-top: 56.25% } } .photo-gallery-indicators { position: absolute; left: 50%; bottom: 250px; margin: auto; display: inline-block; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } @media screen and (max-width:767px) { .photo-gallery-indicators { bottom: 285px; padding: 0 } } .photo-gallery-indicator { position: relative; margin-left: 21px; width: 11px; height: 11px; float: left; cursor: pointer } .photo-gallery-indicator:first-child { margin-left: 0 } .photo-gallery-indicator:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 10px; height: 10px; background-color: #919696; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } .photo-gallery-indicator:hover:before, .photo-gallery-indicator.active:before, .photo-gallery-indicator.carousel-current:before { background-color: transparent; border: 1px solid #000 } @media screen and (max-width:767px) { .photo-gallery-indicator { width: 8px; height: 8px } .photo-gallery-indicator:before { width: 100%; height: 100% } } .features { /* padding-top: 150px; border-top: 1px solid #e0e0e0 */ } @media screen and (max-width:767px) { .features { /* padding-top: 80px; border-top: none */ } } .features-column { margin: 0 auto; width: 100%; max-width: 1280px; padding: 0 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } .features-column .padder { content: ""; margin: 148px auto 150px; display: block; width: 200px; height: 1px; background-color: #000 } .features-column:last-child { padding-bottom: 0px } .features-column:last-child .padder { display: none } @media screen and (max-width:767px) { .features-column { padding-top: 80px; padding: 0 15px } .features-column .padder { margin: 58px auto 60px; width: 100px } .features-column:last-child { padding-bottom: 0px } } .js .features-column .padder[show="on-scroll"] { width: 0; opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px) } .js .features-column .padder[show="on-scroll"].in-view { width: 200px } @media screen and (max-width:767px) { .js .features-column .padder[show="on-scroll"].in-view { width: 100px } } .features-column-hero { position: relative; padding-top: 64.40677966%; overflow: hidden } .features-column-hero img, .features-column-hero video { position: absolute; left: 0; top: 0; width: 100% } .features-column-hero video { display: none } @media screen and (max-width:767px) { .features-column-hero { padding-top: 100% } .features-column-hero img { /* margin-left: -25%; width: 150% */ } } .video .features-column-hero[play="on-scroll"] img { display: none } .video .features-column-hero[play="on-scroll"] video { display: block } .features-column-copy { margin-left: 0; display: table; width: 100%; padding-top: 50px } @media screen and (max-width:767px) { .features-column-copy { display: block; width: auto; padding: 30px 15px 0 } } .features-column-copy-col { text-align: left; display: table-cell; /* width: 180px; */ vertical-align: top } .features-column-copy-col:first-child { width: auto; padding-right: 50px } .features-column-copy-col .rc-cta+.rc-cta { margin-top: 20px } @media screen and (max-width:767px) { .features-column-copy-col { text-align: left; display: block; width: auto } .features-column-copy-col:first-child { padding-right: 0 } .features-column-copy-col+.features-column-copy-col { margin-top: 30px } .features-column-copy-col .rc-cta { padding-left: 30px; padding-right: 30px; margin-left: -30px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box } .features-column-copy-col .rc-cta+.rc-cta { margin-top: 0; border-top: none } } .main .features-column .features-column-title { font-size: 35px; font-size: 1.75rem; font-weight: 400; line-height: 1.28571429; letter-spacing: 0; text-align: left; text-transform: none; color: #000; margin: 0.25714286em 0 .91428571em } #features{margin-bottom: 0;} @media screen and (max-width:767px) { .main .features-column .features-column-title { font-size: 1.25rem } #features{margin-bottom: 30px;} } .features-column-text+.features-column-title { margin-top: 2.6em } @media screen and (max-width:767px) { .features-column-text+.features-column-title { margin-top: 1em } } .main .features-column-text, .main .list-paddingleft-2 li p { font-size: 16px; font-size: .8rem; font-weight: 300; line-height: 1.5; letter-spacing: 0; text-align: left; text-transform: none; color: #000; margin-left: 0; margin-top: -0.4375em; margin-bottom: 1.3125em; max-width: 900px } @media screen and (max-width:767px) { .main .features-column-text, .main .list-paddingleft-2 li p { font-size: .75rem } } .features-column-text+.rc-cta { margin-top: 40px } .next-router { text-align: center; padding: 100px 0 91px; border-top: 1px solid #e0e0e0 } .next-router-cta { font-size: 16px; font-size: .8rem; font-weight: 300; line-height: 1; letter-spacing: 0.01em; text-decoration: none; color: #000; display: inline-block } .next-router-cta .rc-icon { display: block; margin-bottom: 10px } .next-router-experience { text-align: left; position: relative; padding-top: 600px; padding-bottom: 0; border: none } @media screen and (max-width:767px) { .next-router-experience { padding-top: 58.59375% } } .safari .next-router .next-router-title { font-weight: 200; -webkit-font-smoothing: antialiased } .safari .next-router .next-router-cta { font-weight: 400; -webkit-font-smoothing: antialiased } .next-router-copy { position: absolute; top: 50%; left: 0; right: 0; margin: 4px auto 0; max-width: 1180px; padding: 0 58px 0; z-index: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) } @media screen and (max-width:767px) { .next-router-copy { padding: 0 30px 0 } } .next-router-experience .next-router-title { font-size: 50px; font-size: 2.5rem; font-weight: 100; line-height: 1.2; letter-spacing: 0; text-align: left; text-transform: none; color: #fff; margin: -0.2em 0 .7em; max-width: 600px } @media screen and (max-width:767px) { .next-router-experience .next-router-title { font-size: 1.25rem } } .next-router-experience .next-router-cta { font-size: 14px; font-size: .7rem; font-weight: 400; line-height: 1; letter-spacing: 0.01em; text-align: center; text-transform: none; text-decoration: none; color: #fff; display: inline-block; padding: .85714286em 2em .85714286em 2.21428571em; border: 1px solid #fff; border-color: rgba(255,255,255,0.5); border-radius: .28571429em; -webkit-border-radius: .28571429em; -moz-border-radius: .28571429em } .next-router-experience .next-router-cta:hover { color: #000; background-color: #fff } @media screen and (max-width:767px) { .next-router-experience .next-router-cta { font-size: .6rem } } .next-router-hero { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; overflow: hidden } .next-router-hero img { position: absolute; left: 50%; top: 50%; width: 100%; vertical-align: top; opacity: .85; filter: alpha(opacity=85); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } @media screen and (max-width:767px) { .next-router-hero img { position: relative; top: 0; left: 50%; width: auto; height: 100%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } } .experience { padding: 150px 0 0 } @media screen and (max-width:767px) { .experience { padding-top: 80px } } .experience .experience-headline { font-weight: 300; font-size: 20px; font-size: 1rem; line-height: 1.2; letter-spacing: 0; text-transform: none; color: #000; margin: -0.25em 0 .7em } @media screen and (max-width:767px) { .experience .experience-headline { text-align: left; line-height: 1.4 } } .experience .experience-text { font-weight: 300; font-size: 14px; font-size: .7rem; line-height: 1.57142857; letter-spacing: 0; color: #000; margin-top: -0.35714286em; margin-bottom: -0.5em !important } @media screen and (max-width:767px) { .experience .experience-text { text-align: left } } .safari .experience .fp-cta { font-weight: 300; -webkit-font-smoothing: antialiased } .experience-section { margin: 0 auto 0; max-width: 1280px; padding: 0 50px 150px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } @media screen and (max-width:767px) { .experience-section { padding: 0 15px 80px } } .experience-copy { text-align: center; margin: 0 auto; max-width: 650px; padding-top: 50px } @media screen and (max-width:767px) { .experience-copy { padding: 40px 15px 0 } } .js .experience-copy[show="on-scroll"] { -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none } .experience-image { position: relative; padding-top: 56.18644068%; overflow: hidden } .experience-image a { cursor: default } .experience-image .rc-icon-play-large { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; z-index: 1; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .experience-image .rc-icon-play-large:before { width: 76px; height: 152px } .experience-image img { position: absolute; left: 0; top: 0; width: 100%; vertical-align: top; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .modal-gallery { opacity: 1; filter: alpha(opacity=100) } .modal-gallery.active { visibility: visible } .modal-gallery .modal-content { max-height: none } .modal-gallery .modal-content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; min-height: 600px; background-color: #fff; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } .modal-gallery .rc-button-close { right: 50px; top: 50px } .modal-gallery .dotnav { position: absolute; left: 50%; bottom: 43px; display: inline-block; z-index: 3; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } .modal-gallery .dotnav-item { position: relative; width: 11px; height: 11px; margin-left: 21px; float: left; cursor: pointer } .modal-gallery .dotnav-item:first-child { margin-left: 0 } .modal-gallery .dotnav-item:hover .dotnav-dot { width: 10px; height: 10px; background-color: transparent; border: 1px solid #000 } .modal-gallery .dotnav-dot { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 10px; height: 10px; background-color: #919696; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50% } .modal-gallery .rc-paddle { position: absolute; top: 50%; left: 50px; margin-top: -32.5px; z-index: 3 } .modal-gallery .rc-paddle-right { left: auto; right: 50px } @media screen and (max-width:767px) { .modal-gallery .rc-button-close { right: 25px; top: 25px } .modal-gallery .dotnav { text-align: center; left: 0; display: block; width: 100%; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none } .modal-gallery .dotnav-item { margin-left: 10px; display: inline-block; vertical-align: top; float: none } } .modal-gallery-container { position: relative; width: 100%; height: 100%; overflow: hidden } .modal-gallery-item { position: absolute; width: 100%; height: 100%; padding: 100px 130px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } @media screen and (max-width:767px) { .modal-gallery-item { padding: 80px 25px } } .modal-gallery-image { position: relative; width: 100%; height: 100% } .modal-gallery-image.modal-gallery-image-vertical img { width: auto; height: 100% } .modal-gallery-image img { position: absolute; left: 50%; top: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .carousel-current .dotnav-dot { width: 10px; height: 10px; background-color: transparent; border: 1px solid #000 } .modal-gallery-360 .modal-content { width: 100%; height: 100%; background-color: #fff; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none } .modal-gallery-360 video { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .modal-gallery-360 .rc-button-close { position: absolute; right: 50px; top: 50px; z-index: 3 } .modal-gallery-360 .rc-icon-replay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; display: none; cursor: pointer } .modal-gallery-360.modal-gallery-360-ended .rc-icon-replay { display: block } @media screen and (max-width:767px) { .modal-gallery-360 .rc-button-close { right: 30px; top: 30px } } .modal-standard-features .modal-content { margin: 0 auto; width: 980px; min-width: 0 } @media screen and (max-width:767px) { .modal-standard-features .modal-content { width: auto } } .standard-features { position: relative; margin: 0 auto; padding: 150px; background-color: #fff } @media screen and (max-width:767px) { .standard-features { padding: 100px 25px 80px } } .standard-features .standard-features-headline { font-size: 37px; font-size: 1.15rem; font-weight: 100; line-height: 1; letter-spacing: 0; text-align: left; text-transform: capitalize; color: #000; margin: -0.13513514em auto 1.02702703em } @media screen and (max-width:767px) { .standard-features .standard-features-headline { font-size: 1.5rem } } .standard-features .standard-features-list { border-bottom: 1px solid #ccc } .standard-features .standard-features-list-item { font-size: 16px; font-size: .8rem; font-weight: 300; line-height: 2.5; letter-spacing: 0; text-align: left; text-transform: none; color: #000; padding: 1.0625em 0 1.125em; /* border-top: 1px solid #ccc */ border-bottom: 1px solid #ccc; } @media screen and (max-width:767px) { .standard-features .standard-features-list-item { font-size: .7rem } } #promos { /* display: none */ } #specifications, #articles, #accessories, #downloads, #support { padding-bottom: 100px } @media screen and (max-width:767px) { #specifications, #articles, #accessories, #downloads, #support { padding-bottom: 0 } } @media screen and (max-width:1080px) { .product-gallery-container { padding-top: 55.55555556% } } .sound-system-cover { position: absolute; left: 0; top: 0; width: 100%; padding-top: 81.3559322% } @media screen and (max-width:767px) { .sound-system-cover { padding-top: 130% } } .rld-loader { background-color: #fff } .rld-progressbar { height: 1px; background-color: #000 } .sound-system-panel-top, .sound-system-panel-middle { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .sound-system-panel-top img, .sound-system-panel-middle img { width: 100% } @media screen and (max-width:767px) { .sound-system-panel-top img, .sound-system-panel-middle img { width: 150%; margin-left: -25% } } .social-web-background { background-image: url(../images/social_web_background.jpg) } #guide { top: 70px } /* 左右排版 css */ .u-ta-l { text-align: left !important } .u-ta-c { text-align: center !important } .u-ta-r { text-align: right !important } @media only screen and (max-width:767px) { .u-hide-sp { display: none } } @media print, only screen and (min-width:768px) { .u-hide-pc { display: none } } .u-ff-nova { font-family: proxima-nova sans-serif } .swiper-container { margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1 } .swiper-container-no-flexbox .swiper-slide { float: left } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; box-sizing: content-box } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .swiper-container-multirow > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto } .swiper-slide { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform } .swiper-invisible-blank-slide { visibility: hidden } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; transition-property: transform, height; transition-property: transform, height, -webkit-transform } .swiper-container-3d { -webkit-perspective: 1200px; perspective: 1200px } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { -webkit-transform-style: preserve-3d; transform-style: preserve-3d } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10 } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(transparent)); background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), transparent); background-image: linear-gradient(to left, rgba(0, 0, 0, .5), transparent) } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(transparent)); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), transparent); background-image: linear-gradient(to right, rgba(0, 0, 0, .5), transparent) } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(transparent)); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), transparent); background-image: linear-gradient(to top, rgba(0, 0, 0, .5), transparent) } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(transparent)); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), transparent); background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent) } .swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper { -ms-touch-action: pan-y; touch-action: pan-y } .swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper { -ms-touch-action: pan-x; touch-action: pan-x } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: .35; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; cursor: auto; pointer-events: none } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url(""); left: 10px; right: auto } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url(""); right: 10px; left: auto } .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white { background-image: url("") } .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image: url("") } .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black { background-image: url("") } .swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black { background-image: url("") } .swiper-button-lock { display: none } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms opacity; transition: 300ms opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10 } .swiper-pagination.swiper-pagination-hidden { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" } .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100% } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0 } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(.33); -ms-transform: scale(.33); transform: scale(.33); position: relative } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(.66); -ms-transform: scale(.66); transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(.33); -ms-transform: scale(.33); transform: scale(.33) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(.66); -ms-transform: scale(.66); transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(.33); -ms-transform: scale(.33); transform: scale(.33) } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: .2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer } .swiper-pagination-bullet-active { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; background: #007aff } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 8px } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: 200ms top, 200ms -webkit-transform; transition: 200ms top, 200ms -webkit-transform; transition: 200ms transform, 200ms top; transition: 200ms transform, 200ms top, 200ms -webkit-transform } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 200ms left, 200ms -webkit-transform; transition: 200ms left, 200ms -webkit-transform; transition: 200ms transform, 200ms left; transition: 200ms transform, 200ms left, 200ms -webkit-transform } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 200ms right, 200ms -webkit-transform; transition: 200ms right, 200ms -webkit-transform; transition: 200ms transform, 200ms right; transition: 200ms transform, 200ms right, 200ms -webkit-transform } .swiper-pagination-progressbar { background: rgba(0, 0, 0, .25); position: absolute } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0 } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0 } .swiper-pagination-white .swiper-pagination-bullet-active { background: #fff } .swiper-pagination-progressbar.swiper-pagination-white { background: rgba(255, 255, 255, .25) } .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { background: #fff } .swiper-pagination-black .swiper-pagination-bullet-active { background: #000 } .swiper-pagination-progressbar.swiper-pagination-black { background: rgba(0, 0, 0, .25) } .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { background: #000 } .swiper-pagination-lock { display: none } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, .1) } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98% } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98% } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, .5); border-radius: 10px; left: 0; top: 0 } .swiper-scrollbar-cursor-drag { cursor: move } .swiper-scrollbar-lock { display: none } .swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain } .swiper-slide-zoomed { cursor: move } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite } .swiper-lazy-preloader:after { display: block; content: ''; width: 100%; height: 100%; background-image: url(""); background-position: 50%; background-size: 100%; background-repeat: no-repeat } .swiper-lazy-preloader-white:after { background-image: url("") } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; z-index: -1000 } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; transition-property: opacity } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-container-cube { overflow: visible } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100% } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0 } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: .6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: url(''); filter: blur(50px); z-index: 0 } .swiper-container-flip { overflow: visible } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1 } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden } .swiper-container-coverflow .swiper-wrapper { -ms-perspective: 1200px } .rld-loader { position: fixed; left: 0; top: 0; display: none; width: 100%; height: 100%; padding-bottom: 70px; background-color: #000; z-index: 10001 } .rld-loadstart .rld-loader { display: block } .rld-loadcomplete .rld-loader { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition-duration: 1.5s; transition-duration: 1.5s; -webkit-transition-delay: .8s; transition-delay: .8s } .rld-progressbar { width: 0; height: 5px; background-color: #ff5a00; -webkit-transition-duration: .3s; transition-duration: .3s } #features img { max-width: 560px; width:100%; height: auto; vertical-align: top; max-height: 100%; } .main { background: none } @media only screen and (max-width:767px) { .main { background: none; background-attachment: inherit; position: relative } } .main a:hover { -webkit-backface-visibility: hidden; backface-visibility: hidden } .main a:hover img { -webkit-backface-visibility: hidden; backface-visibility: hidden } .main p { margin: 0 } .main .cmn-headline02 { /* color: #fff; */ font-size: 33.6px; font-size: 2.1rem; font-weight: 400; line-height: 1.14286; margin: 0 auto 28px; text-transform: none; letter-spacing: normal } @media only screen and (max-width:767px) { .main .cmn-headline02 { font-size: 1.3rem; margin-bottom: 15px } } .main .cmn-headline02 span { font-weight: 100; text-transform: lowercase } .main .cmn-headline03 { /* color: #fff; */ font-size: 32px; font-size: 2rem; font-weight: 300; line-height: 1.25; margin: 0 0 30px; text-transform: inherit; letter-spacing: normal } @media only screen and (max-width:767px) { .main .cmn-headline03 { font-size: 1.4rem; margin-bottom: 15px } } .main .cmn-headline04 { color: #fff; font-size: 25.6px; font-size: 1.6rem; font-weight: 400; line-height: 1.25; margin: 0 0 30px; text-transform: inherit; text-indent: inherit; letter-spacing: normal } @media only screen and (max-width:767px) { .main .cmn-headline04 { font-size: 1.3rem; margin-bottom: 10px } } .main .cmn-headline05 { color: #fff; font-size: 19.2px; font-size: 1.2rem; font-weight: 600; line-height: 1.25; margin: 30px 0 15px } @media only screen and (max-width:767px) { .main .cmn-headline05 { margin: 15px 0 5px } } .main .cmn-text { /* color: #d1d1d1; */ font-size: 14.4px; font-size: .9rem; font-weight: 300; line-height: 2 } @media only screen and (max-width:767px) { .main .cmn-text { font-size: .8rem; line-height: 1.4 } } .main .cmn-floating { background: #000; box-sizing: border-box; margin: 0 10px 10px; position: relative; overflow: hidden } @media only screen and (max-width:767px) { .main .cmn-floating { margin: 0 0 10px; padding-bottom: 30px } } .main .cmn-container { box-sizing: border-box; color: #0e0e0e; max-width: 1320px; margin: 0 auto; padding: 0 20px; position: relative; width: 100% } @media only screen and (max-width:767px) { .main .cmn-container { padding: 0 8% } } .main .cmn-inner { max-width: 1100px; margin: 0 auto } .main .cmn-italic { font-style: italic } .main .cmn-notes { color: rgba(255, 255, 255, .5); font-size: 9.6px; font-size: .6rem } .cmn-grid { padding: 40px 0; width: 100% } @media only screen and (max-width:767px) { .cmn-grid { padding: 20px 0 } } .cmn-grid:after { content: ""; display: table; clear: both } .cmn-grid__item:first-child { float: left; width: 58.75% } @media only screen and (max-width:767px) { .cmn-grid__item:first-child { float: none; width: 100% } } .cmn-grid__item:last-child { float: right; width: 38.125% } @media only screen and (max-width:767px) { .cmn-grid__item:last-child { float: none; margin-top: 15px; width: 100% } } .cmn-grid--rev .cmn-grid__item:first-child { float: right } @media only screen and (max-width:767px) { .cmn-grid--rev .cmn-grid__item:first-child { float: none } } .cmn-grid--rev .cmn-grid__item:last-child { float: left } @media only screen and (max-width:767px) { .cmn-grid--rev .cmn-grid__item:last-child { float: none } } @media only screen and (max-width:767px) { .cmn-grid__item .cmn-text { margin-bottom: 10px } } .cmn-grid__item img { width: 100% } .inview { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: all .6s ease-in-out 0s; transition: all .6s ease-in-out 0s; -webkit-transition-delay: .3s; transition-delay: .3s } @media only screen and (max-width:767px) { .inview { -webkit-transition-delay: .15s; transition-delay: .15s } } .inview--top { -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px) } @media only screen and (max-width:767px) { .inview--top { -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px) } } .inview--right { -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px) } @media only screen and (max-width:767px) { .inview--right { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px) } } .inview--bottom { -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px) } .inview--left { -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px) } @media only screen and (max-width:767px) { .inview--left { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px) } } .inview.view { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0) } .inview.inviewlate.view { -webkit-transition-delay: .7s; transition-delay: .7s } @media only screen and (max-width:767px) { .inview.inviewlate.view { -webkit-transition-delay: 0s; transition-delay: 0s } } .inview.inviewlate--top.view { -webkit-transition-delay: 1s; transition-delay: 1s } @media only screen and (max-width:767px) { .inview.inviewlate--top.view { -webkit-transition-delay: .8s; transition-delay: .8s } } .inview.inviewlate--middle.view { -webkit-transition-delay: 1.2s; transition-delay: 1.2s } @media only screen and (max-width:767px) { .inview.inviewlate--middle.view { -webkit-transition-delay: 0s; transition-delay: 0s } } .inview.inviewlate--bottom.view { -webkit-transition-delay: 1.4s; transition-delay: 1.4s } @media only screen and (max-width:767px) { .inview.inviewlate--bottom.view { -webkit-transition-delay: 0s; transition-delay: 0s } } .modal-video-player { padding: 0 5% } .movie-youtube { position: relative; -webkit-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s } .movie-youtube img { -webkit-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s } .cmn-modal { visibility: hidden; display: table; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .95); z-index: 100; overflow: hidden; -webkit-transition-duration: .5s; transition-duration: .5s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" } .cmn-modal.is-active { visibility: visible; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" } .cmn-modal__item { width: 100%; text-align: center; vertical-align: middle; display: table-cell } .cmn-modal__item .btn-close { width: 56px; height: 56px; display: block; position: absolute; top: 30px; right: 30px; z-index: 1; cursor: pointer } .cmn-modal__item .btn-close:before, .cmn-modal__item .btn-close:after { content: ""; width: 56px; height: 1px; margin-left: -28px; background-color: #fff; position: absolute; left: 50% } .cmn-modal__item .btn-close:before { margin-top: -1px; top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg) } .cmn-modal__item .btn-close:after { margin-bottom: -1px; bottom: 50%; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg) } .icon-play { font-style: normal; text-align: center; text-decoration: none; color: #fff; box-sizing: border-box; border-radius: 100%; display: block; z-index: 4; -webkit-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; width: 80px; height: 80px; border: 3px solid #fff; text-indent: .4em } .icon-play:before { content: "\e60a"; font-family: glyphicon; font-size: 1.5em; line-height: 74px } .icon-play:hover { opacity: .75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)" } .introduction { /* background: #111; */ /* padding: 160px 0 120px; */ position: relative } @media only screen and (max-width:767px) { .introduction { padding: 80px 0 60px; min-height: inherit; height: auto } } .introduction .cmn-container { display: table; height: 100% } .introduction-inner { display: table-cell; vertical-align: middle } .introduction .cmn-headline02 { text-align: center } .introduction .cmn-text { margin-bottom: 70px; text-align: center } @media only screen and (max-width:767px) { .introduction .cmn-text { margin-bottom: 35px } } .introduction .introduction-video { position: relative } .introduction .introduction-video__link { display: block } .introduction .introduction-video__link:hover .movie-youtube img { opacity: .75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)" } .introduction .introduction-video-text { text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .introduction .introduction-video-text__lead { color: #fff; font-size: 12.8px; font-size: .8rem; line-height: 1 } .introduction .introduction-video-text__title { color: #fff; font-size: 1, 96px; font-size: 1, 6rem; font-weight: 700; line-height: 1; margin: 15px 0; text-transform: none } .introduction .introduction-video-text__play { color: #0096ff; font-size: 16px; font-size: 1rem; line-height: 24px } /*.introduction .introduction-video-text__play:after { background: url(../images//icon_play.png) center center no-repeat; background-size: 24px 24px; content: ""; display: inline-block; height: 24px; width: 24px; margin-left: 10px; vertical-align: middle }*/ .contents-body { /* background: #111; */ position: relative; padding-top: 10px } .contents-body .products { /* background: #000; */ height: 750px; position: relative } @media only screen and (max-width:767px) { .contents-body .products { height: auto } } .contents-body .products .swiper-container { height: 100% } @media only screen and (max-width:767px) { .contents-body .products .swiper-container { height: auto } } @media only screen and (max-width:767px) { .contents-body .products .swiper-slide { padding-top: 61.25% } } .contents-body .products .swiper-slide img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 900px } @media only screen and (max-width:767px) { .contents-body .products .swiper-slide img { width: 60% } } .contents-body .products .swiper-pagination-bullet { background: #fff; width: 12px; height: 12px; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" } @media only screen and (max-width:767px) { .contents-body .products .swiper-pagination-bullet { width: 6px; height: 6px } } .contents-body .products .swiper-pagination-bullet-active { background: #00AC21; } .contents-body .products .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 7px } .contents-body .products .swiper-pagination-fraction, .contents-body .products .swiper-pagination-custom, .contents-body .products .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 31px } @media only screen and (max-width:767px) { .contents-body .products .swiper-pagination-fraction, .contents-body .products .swiper-pagination-custom, .contents-body .products .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 5px; line-height: 1 } } .contents-body .products .swiper-button-prev, .contents-body .products .swiper-button-next { width: 35px; height: 35px; background: #000; margin-top: -22.5px } .contents-body .products .swiper-button-prev { left: 0 } .contents-body .products .swiper-button-next { right: 0 } @media print, only screen and (min-width:768px) { .contents-body .products .products-slider01 img, .contents-body .products .products-slider02 img, .contents-body .products .products-slider03 img { width: 700px } } .round-button-arrow { margin-top: 1.5em; border-radius: 20px; border: 2px solid #FFF; color: #FFF; display: inline-block; font-size: 14px; font-weight: 900; height: 36px; line-height: 36px; padding: 0 25px; text-align: center; text-decoration: none; } .round-button-arrow::after { content: ""; background: url("../images/arrow-right.svg") no-repeat center; display: inline-block; height: 100%; margin: 0 0 0 10px; vertical-align: middle; width: 16px } /* 左右排版 css end*/ /* 列表排版 css */ .opaque { opacity:1; filter:alpha(opacity=100) } .opaque:hover { opacity:1; filter:alpha(opacity=100) } .background-contain { -moz-background-size:contain; -webkit-background-size:contain; -o-background-size:contain; -ms-background-size:contain; background-size:contain } .background-cover { -moz-background-size:cover; -webkit-background-size:cover; -o-background-size:cover; -ms-background-size:cover; background-size:cover } .rld-loader { position:absolute; left:0; top:0; display:block; width:100%; height:100%; padding-bottom:70px; background-color:#000; z-index:10001 } .rld-loadstart .rld-loader { display:block } .rld-loadcomplete .rld-loader { opacity:0; filter:alpha(opacity=0); transition-duration:1.5s; -webkit-transition-duration:1.5s; -moz-transition-duration:1.5s; transition-delay:.8s; -webkit-transition-delay:.8s; -moz-transition-delay:.8s } .rld-progressbar { width:0%; height:5px; background-color:#ff5a00; transition-duration:.3s; -webkit-transition-duration:.3s; -moz-transition-duration:.3s } .modal-open { overflow:hidden } .modal { position:relative; left:0; top:0; width:100%; height:600px; display:block; z-index:0; overflow:auto; -webkit-overflow-scrolling:touch } .modal-open .modal.active { display:block } .modal-backdrop { position:fixed; left:0; top:0; width:100%; height:100%; display:none; z-index:100; background-color:#999; background-color:rgba(0,0,0,0.7) } .modal-open .modal-backdrop { display:block; opacity:0; filter:alpha(opacity=0); transition-duration:.3s; -webkit-transition-duration:.3s; -moz-transition-duration:.3s } .modal-open .modal-backdrop.in { opacity:1; filter:alpha(opacity=100); transition-duration:.5s; -webkit-transition-duration:.5s; -moz-transition-duration:.5s } .modal-content { position:relative; margin:0 auto; display:block; max-width:1600px; min-width:1024px; overflow:auto } .modal-content .rc-button-close { position:absolute; right:30px; top:30px; z-index:3 } @media screen and (max-width:767px) { .modal-content { min-width:0 } } .modal-open .modal-content { display:block; opacity:0; filter:alpha(opacity=0); transition-duration:.3s; -webkit-transition-duration:.3s; -moz-transition-duration:.3s; -webkit-transform:translateY(-50px); -moz-transform:translateY(-50px); -ms-transform:translateY(-50px); transform:translateY(-50px) } .modal-open .modal.in .modal-content { opacity:1; filter:alpha(opacity=100); transition-duration:.5s; -webkit-transition-duration:.5s; -moz-transition-duration:.5s; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); transform:translateY(0px) } .carousel-container { position:relative; margin:0 auto } .carousel-slider { position:absolute; left:0; top:0; margin:0; width:100%; height:100%; padding:0; list-style:none } .carousel-transition .carousel-slider { transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s } @media screen and (max-width:767px) { .carousel-transition .carousel-slider { transition-duration:.5s; -webkit-transition-duration:.5s; -moz-transition-duration:.5s } } .carousel-item { position:absolute; left:0; top:0; width:100%; height:100% } .carousel-transition-skip.carousel-transition-next[data-enable-skip] .carousel-item-next { left:100% !important; z-index:1 } .carousel-transition-skip.carousel-transition-previous[data-enable-skip] .carousel-item-next { left:-100% !important; z-index:1 } .modal-video-player { display:block; background-color:#000; z-index:102 } .modal-video-player .button-close { display:none; width:30px; height:30px } .modal-video-player .button-close:before { font-size:30px; line-height:1; width:auto; height:auto } .modal-video-player .button-close:hover:before { color:#bbb; -webkit-text-stroke:.5px #bbb } .modal-video-player.mousemove .button-close { display:block } @media screen and (max-width:767px) { .modal-video-player .button-close { display:block } } .modal-video-player .video-container { position:absolute; left:0; right:0; top:50%; margin:0 auto; display:block; width:100%; max-width:1600px; padding-top:56.12244898%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%) } .modal-video-player .video-container>iframe { position:absolute; left:0; top:0; width:100%; height:100% } .modal-video-player-vertical .video-container { height:100%; padding-top:0 } .js:not(.android42) [data-show="on-scroll"] { opacity:0; filter:alpha(opacity=0); filter:-; -webkit-transform:translateY(70px); -moz-transform:translateY(70px); -ms-transform:translateY(70px); transform:translateY(70px); transition-timing-function:ease-out; -moz-transition-timing-function:ease-out; -webkit-transition-timing-function:ease-out; -o-transition-timing-function:ease-out; -ms-transition-timing-function:ease-out } .js:not(.android42) [data-show="on-scroll"].in-view { transition-duration:.7s; -webkit-transition-duration:.7s; -moz-transition-duration:.7s; -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity:1; filter:alpha(opacity=100); filter:- } .rc-icon { text-decoration:none; position:relative; margin:0 auto ; display:inline-block; width:38px; height:38px; vertical-align:middle; overflow:hidden } .rc-icon:before { content:""; position:absolute; left:0; top:0; display:block; width:100%; height:200%; background-repeat:no-repeat; background-position:center top; -moz-background-size:contain; -webkit-background-size:contain; -o-background-size:contain; -ms-background-size:contain; background-size:contain } .rc-icon:hover:before { top:auto; bottom:0 } .rc-icon-share { margin:0 auto; display:block; width:11px; height:15px; background:url(../images/icon_share.svg) no-repeat left top } .rc-icon-remove { font-size:30px; speak:none; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; margin:0 auto; display:block; width:31px; height:31px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; background: url(../images/hgb.svg) no-repeat center; } .rc-icon-new-window:before { background-image:url(../images/icon_new_window.svg) } .rc-icon-play:before { background-image:url(../images/icon_play.svg) } .rc-icon-play-large, .rc-icon-play-ex-large { font-size:19px; speak:none; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; text-decoration:none; color:#fff; position:absolute; left:50%; top:50%; margin:0 auto; display:block; width:60px; height:60px; overflow:hidden; cursor:pointer; border:3px solid #fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50% } .rc-icon-play-large:before, .rc-icon-play-ex-large:before { position:absolute; left:50%; top:50%; margin-top:-0.05263158em; margin-left:.15789474em; -webkit-transform:translate(-50%,-50%) scale(.78,1); -moz-transform:translate(-50%,-50%) scale(.78,1); -ms-transform:translate(-50%,-50%) scale(.78,1); transform:translate(-50%,-50%) scale(.78,1) } .rc-icon-play-large:hover, .rc-icon-play-ex-large:hover { color:#919696; background-color:#fff; display:block } .rc-icon-play-ex-large { font-size:23px; width:76px; height:76px; border-width:4px } .rc-icon-replay { width:38px; height:44px; background:url(../images/icon_replay.svg) no-repeat center center; -moz-background-size:contain; -webkit-background-size:contain; -o-background-size:contain; -ms-background-size:contain; background-size:contain } .rc-icon-replay:hover { opacity:.8; filter:alpha(opacity=80) } .rc-icon-arrow-right:before { background-image:url(../images/icon_arrow_right.svg) } .rc-icon-arrow-right-large { width:76px; height:76px } .rc-icon-arrow-right-large:before { background-image:url(../images/icon_arrow_right_large.svg) } .rc-icon-plus-circle { font-size:32px; font-style:normal; font-weight:400; line-height:36px; text-align:center; color:#949999; border:2px solid #949999; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50% } .rc-icon-plus-circle:before { content:"+"; position:absolute; left:-2px; top:0; display:block; width:38px; height:76px; background-repeat:no-repeat; background-position:center top } .rc-icon-plus-circle:hover { color:#fff; background-color:#949999 } .rc-icon-plus-circle:hover:before { top:0; bottom:auto } .ipad .rc-icon-plus-circle { line-height:33px } .rc-icon-360-circle { font-size:13px; font-style:normal; font-weight:600; line-height:34px; text-align:center; color:#949999; border:2px solid #949999; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50% } .rc-icon-360-circle:before { content:"360"; position:absolute; left:-2px; top:0; display:block; width:38px; height:76px; background-repeat:no-repeat; background-position:center top } .rc-icon-360-circle:hover { color:#fff; background-color:#949999 } .rc-icon-360-circle:hover:before { top:0; bottom:auto } .rc-icon-colorchip { display:block; width:43px; height:43px; background:url(../images/gallery_color_chip.png) no-repeat left top } .rc-icon-colorchip:hover { background-position:left bottom } .color-indicator-active .rc-icon-colorchip { background-position:left bottom } .color-indicator-active .rc-icon-colorchip.rc-icon-colorchip-white { background-position:right bottom } .rc-icon-colorchip-white { background-position:right top } .rc-icon-colorchip-white:hover { background-position:right bottom } .color-indicator-active .rc-icon-colorchip-white { background-position:left bottom } .rc-button { padding:0; background:none; border:none; -webkit-appearance:none; outline:none; cursor:pointer } .rc-button { font-size:16px; font-size:.8rem; font-weight:300; line-height:1; letter-spacing:0; text-transform:none; text-decoration:none; color:#fff; display:inline-block; padding:.8125em 1.25em; padding-right:1.75em; transition-duration:.1s; -webkit-transition-duration:.1s; -moz-transition-duration:.1s } .rc-button>.rc-icon { margin-right:.71428571em } .rc-button:hover { background-color:#ccc } .rc-button-circle { border:1px solid #fff; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50% } .rc-button-circle:hover { background-color:#949999; border-color:#949999 } .rc-button-close { color:#000; padding:0 } .rc-button-close:hover { color:#919696; background-color:transparent } .rc-paddle { speak:none; font-family:'glyphicon'; font-size:65px; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; color:#000; width:30px; height:65px; padding:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-text-stroke:.2px #000 } .rc-paddle:before { margin-left:-0.3em; display:block; -webkit-transform:scale(1.15,1); -moz-transform:scale(1.15,1); -ms-transform:scale(1.15,1); transform:scale(1.15,1) } .rc-paddle:hover { color:#919696; background-color:transparent; -webkit-text-stroke-color:#919696 } .rc-cta { font-size:16px; font-size:.8rem; font-weight:300; line-height:1; letter-spacing:0; text-align:left; text-transform:none; text-decoration:none; white-space:nowrap; color:#000; display:inline-block; cursor:pointer; transition-duration:.1s; -webkit-transition-duration:.1s; -moz-transition-duration:.1s } .rc-cta>.rc-icon { margin-right:.64285714em } .rc-cta .rc-icon-plus-circle { margin-right:.28125em } .rc-cta .rc-icon-360-circle { margin-right:.69230769em } .rc-cta:hover>.rc-icon:before { top:auto; bottom:0 } .rc-cta:hover .rc-icon-plus-circle, .rc-cta:hover .rc-icon-360-circle { color:#fff; background-color:#949999 } .rc-cta:hover .rc-icon-plus-circle:before, .rc-cta:hover .rc-icon-360-circle:before { top:0; bottom:auto } @media screen and (max-width:767px) { .rc-cta { font-size:.75rem; width:100%; padding:10px 0; border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; padding-left:25px; padding-right:25px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } } .rc-cta-text { display:inline-block; width:100%; vertical-align:middle; overflow:hidden } .rc-cta.hidden .rc-cta-text { width:0 } .rc-cta.in-view .rc-cta-text { width:100%; transition-duration:1.2s; -webkit-transition-duration:1.2s; -moz-transition-duration:1.2s; transition-delay:.2s; -webkit-transition-delay:.2s; -moz-transition-delay:.2s } .rc-more-box .rc-cta { margin-left:35px } .rc-more-box .rc-cta:first-child { margin-left:0 } @media screen and (max-width:767px) { .rc-more-box .rc-cta { margin-left:0 } .rc-more-box .rc-cta+.rc-cta { border-top:none } } .social-web { text-align:center; position:relative; display:none; overflow:hidden; border-top:1px solid #e0e0e0; -moz-background-size:cover; -webkit-background-size:cover; -o-background-size:cover; -ms-background-size:cover; background-size:cover } .social-web .row { position:relative; max-width:1180px; width:auto; padding:200px 50px 80px; z-index:1 } .social-web .cta { font-size:14px; font-size:.7rem; font-weight:400; letter-spacing:0; line-height:40px; text-decoration:none; text-align:center; color:#000; margin:3.78571429em auto 0; display:inline-block; height:40px; padding:0 2.71428571em; -webkit-font-smoothing:subpixel-antialiased; border:1px solid #ccc; cursor:pointer; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; border-radius:.28571429em; -webkit-border-radius:.28571429em; -moz-border-radius:.28571429em } .social-web .cta:hover { color:#fff; background-color:#000; border-color:#000 } @media screen and (max-width:767px) { .social-web { padding-bottom:80px } .social-web .row { margin:90px auto 0; padding:0 25px } .social-web .cta { position:static; font-size:15px; font-size:.75rem; line-height:52px; letter-spacing:0; margin-top:70px; margin-left:auto; margin-right:auto; height:50px; padding:0 37px; -webkit-transform:none; -moz-transform:none; -ms-transform:none; transform:none } } .modal-timeline .social-web { border-top:none } .android42 .social-web { background-image:none } .js .social-web { display:block } .js .social-web .cta { margin-top:2.85714286em } .social-web-copy { position:relative; padding-bottom:100px; text-align:center; z-index:1 } .social-web-copy:before, .social-web-copy:after { content:""; position:absolute; left:0; top:0; margin-top:-1px; display:block; width:35.2%; width:calc(50% - 175px); width:-webkit-calc(50% - 175px); height:1px; background-color:#999 } .social-web-copy:after { left:auto; right:0 } @media screen and (max-width:767px) { .social-web-copy { top:0; padding-bottom:60px; border-width:1px } .social-web-copy:before, .social-web-copy:after { width:17%; width:-webkit-calc(50% - 105px) } } .main .social-web-headline { font-size:50px; font-size:2.5rem; text-indent:100%; white-space:nowrap; position:absolute; left:0; right:0; margin:-0.54em auto 0; display:block; width:5em; height:1.1em; background:url(../images/social_web.png) no-repeat center top; overflow:hidden; -moz-background-size:contain; -webkit-background-size:contain; -o-background-size:contain; -ms-background-size:contain; background-size:contain } @media screen and (max-width:767px) { .main .social-web-headline { font-size:1.6rem } } .social-web-background { position:absolute; left:0; top:0; width:100% } .social-web-background img { position:relative; width:100%; vertical-align:top } .social-web-background-full img { left:50%; width:auto; height:100%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%) } .social-web-background-full.social-web-background-fixed { position:fixed; height:100% } .timeline-container { position:relative } .modal .timeline-container:after { content:""; margin:100px auto 0; display:none; width:60px; height:60px; -webkit-animation:timeline-progress 1.4s infinite linear; animation:timeline-progress 1.4s infinite linear; -webkit-transform:translateZ(0); -moz-transform:translateZ(0); -ms-transform:translateZ(0); transform:translateZ(0) } @-webkit-keyframes timeline-progress { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg) } } @keyframes timeline-progress { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg) } } .timeline-load-progress .timeline-container:after { background:url(../images/timeline_progress.svg) no-repeat center center } .timeline-load-complete .timeline-container:after { display:none } .social-timeline { position:relative; margin:-26px 0 0 -26px; padding:0 } .social-timeline.hidden { visibility:hidden; min-height:1000px } @media screen and (max-width:767px) { .social-timeline { margin-top:0; margin-left:0; width:auto !important; height:auto !important } } .js .social-timeline { margin-top:0; margin-left:auto; margin-right:auto } .js .social-timeline-ready { visibility:visible } .sns-item { width:33.33333333%; padding:26px 0 0 26px; float:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; transition-property:transform,opacity; -webkit-transition-property:transform,opacity; -moz-transition-property:transform,opacity; transition-delay:0s; -webkit-transition-delay:0s; -moz-transition-delay:0s } .sns-item:nth-child(3n+2).in-view { transition-delay:.2s; -webkit-transition-delay:.2s; -moz-transition-delay:.2s } .sns-item:nth-child(3).in-view { transition-delay:.4s; -webkit-transition-delay:.4s; -moz-transition-delay:.4s } @media screen and (max-width:767px) { .sns-item { width:100% !important; left:auto !important; top:auto !important } } .sns-item-inner { border:1px solid #e0e0e0 } @media screen and (max-width:767px) { .content-social-timeline .sns-item:nth-child(4) { display:none } .content-social-timeline .sns-item:nth-child(5) { display:none } .content-social-timeline .sns-item:nth-child(6) { display:none } } .js .sns-item { max-width:376px; position:absolute; padding:0 } @media screen and (max-width:767px) { .js .sns-item { margin-top:20px; max-width:none; position:relative } .js .sns-item:first-child { margin-top:0 } } .sns-image { position:relative } .sns-image img { width:100%; vertical-align:top } .sns-image:hover .rc-icon-play-large { color:#919696; background-color:#fff } .sns-item-youtube .sns-image { padding:40px 0; background-color:#000; overflow:hidden } .sns-item>a>.sns-image img { width:100% !important; height:auto !important } .sns-image-list { background-color:#fff } .sns-image-list-item { position:relative; width:33.33333333%; height:0; padding-top:33.33333333%; float:left; overflow:hidden; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } .sns-image-list-item:first-child { width:66.66666667%; padding-top:100% } .sns-image-list-item:first-child .sns-image { border:none } .sns-image-list-item:first-child+.sns-image-list-item .sns-image { border-top:none } .sns-image-list-item .sns-image { position:absolute; left:0; top:0; width:100%; height:100%; border-left:2px solid #fff; border-top:2px solid #fff; overflow:hidden } .sns-image-list-item .sns-image.sns-image-panorama img { width:auto; height:100% } .sns-image-list-item .sns-image img { position:absolute; left:50%; top:50%; left:0 \9; top:0 \9; width:100%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); -ms-transform:translate(-50%, -50%) } .sns-image-list-item:not(:target) .sns-image img { left:50% \9; top:50% \9 } .sns-image-list-panorama .sns-image-list-item:first-child { width:100%; padding-top:66.66666667% } .sns-image-list-panorama .sns-image-list-item:first-child .sns-image { border:none } .sns-image-list-panorama .sns-image-list-item:first-child+.sns-image-list-item .sns-image { border-top:2px solid #fff; border-left:none } .sns-image-list-3 .sns-image-list-item { width:50%; padding-top:50% } .sns-image-list-3 .sns-image-list-item:first-child { width:50%; padding-top:100% } .sns-image-list-3.sns-image-list-panorama .sns-image-list-item:first-child { width:100%; padding-top:50% } .sns-image-list-3.sns-image-list-panorama .sns-image-list-item:first-child .sns-image { border:none } .sns-image-list-3.sns-image-list-panorama .sns-image-list-item:first-child+.sns-image-list-item .sns-image { border-top:2px solid #fff; border-left:none } .sns-image-list-2 .sns-image-list-item { width:50%; padding-top:100% } .sns-image-list-2 .sns-image-list-item .sns-image { border-left:2px solid #fff } .sns-image-list-2 .sns-image-list-item:first-child { width:50%; padding-top:100% } .sns-image-list-2 .sns-image-list-item:first-child .sns-image { border:none } .sns-image-list-2.sns-image-list-panorama .sns-image-list-item { width:100%; padding-top:50% } .sns-image-list-2.sns-image-list-panorama .sns-image-list-item:first-child { width:100%; padding-top:50% } .sns-image-list-1 .sns-image-list-item:first-child { width:100%; height:auto; padding-top:0 } .sns-image-list-1 .sns-image-list-item .sns-image { position:static } .sns-image-list-1 .sns-image-list-item .sns-image img { position:static; width:100% !important; height:auto !important; -webkit-transform:translate(0,0); -moz-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0); -ms-transform:translate(0, 0) } .sns-post { margin:0; padding:30px; background-color:#fff } @media screen and (max-width:767px) { .sns-post { padding:25px } } .main .sns-post-text { font-size:14px; font-size:.7rem; font-weight:300; line-height:1.42857143; letter-spacing:0; text-align:left; text-transform:none; color:#000; margin:-0.28571429em 0 -0.42857143em } .main .sns-post-text .url { word-break:break-all } @media screen and (max-width:767px) { .main .sns-post-text { font-size:13px; font-size:.65rem } } .sns-post-info { margin-top:40px; height:30px; overflow:hidden } .sns-post-info a { text-decoration:none } .sns-post-info:before { content:""; margin-right:10px; display:block; width:30px; height:30px; background:url(../images/facebook.svg) no-repeat center center; background:url(../images/facebook.png) no-repeat center center\9; float:left } @media screen and (max-width:767px) { .sns-post-info { margin-top:28px } } .sns-item-youtube .sns-post-info:before { background:url(../images/icon_youtube_alt.svg) no-repeat center center; background:url(../images/icon_youtube_alt.png) no-repeat center center\9 } .sns-post-category { font-size:12px; font-size:.6rem; font-weight:400; line-height:1; letter-spacing:-0.005em; text-align:left; color:#000; display:block; margin:.16666667em 0 -0.3em } .sns-post-date { font-size:12px; font-size:.6rem; font-weight:300; line-height:1; letter-spacing:0em; text-align:left; color:#919696; margin:.58333333em 0 0; display:block } .social-web-background { position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; -moz-background-size:cover; -webkit-background-size:cover; -o-background-size:cover; -ms-background-size:cover; background-size:cover } .modal-timeline { overflow:hidden } .modal-timeline.timeline-full .cta { visibility:hidden } .modal-timeline .row { padding-bottom:170px } .modal-timeline .cta { display:none; color:#fff } .modal-timeline .social-web-copy:before, .modal-timeline .social-web-copy:after { background-color:#fff; background-color:rgba(255,255,255,0.5) } .modal-timeline .social-web-headline { background-image:url(../images/social_web_white.png) } .modal-timeline .modal-content { z-index:1; max-width:none; height:100%; -webkit-overflow-scrolling:touch } .modal-timeline .sns-item-inner { border:none } .modal-timeline .social-web-background { opacity:0; filter:alpha(opacity=0); transition-duration:.5s; -webkit-transition-duration:.5s; -moz-transition-duration:.5s; transition-timing-function:linear; -moz-transition-timing-function:linear; -webkit-transition-timing-function:linear; -o-transition-timing-function:linear; -ms-transition-timing-function:linear } .modal-timeline.in .social-web-background { opacity:1; filter:alpha(opacity=100) } .modal-timeline .rc-button-close { color:#fff; right:50px; top:50px } .modal-timeline .rc-button-close:hover .rc-icon-remove { -webkit-text-stroke:.2px #fff } @media screen and (max-width:767px) { .modal-timeline .modal-content { min-width:0 } .modal-timeline .rc-button-close { right:25px; top:25px } } .mbig #overview { background-color:#fff } .mbig #overview .row { position:relative; margin:0 auto; width:100%; max-width:1080px; padding:50px 50px; z-index:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } .mbig #overview .overview-title { font-size:50px; font-size:2.0rem; font-weight:400; line-height:1.2; letter-spacing:0; text-align:left; text-transform:none; color:#000; margin-top:-0.22em; margin-bottom:.72em; width:auto; max-width:900px } .mbig #overview .overview-text { font-size:16px; font-size:.8rem; font-weight:300; line-height:1.5; letter-spacing:0; text-align:left; text-transform:none; color:#000; margin-top:-0.375em; margin-bottom:-0.4375em !important; width:auto } .mbig #overview .overview-text+.rc-more-box { margin-top:41px } @media screen and (max-width:767px) { .mbig #overview { padding-bottom:0 } .mbig #overview .row { padding:0 25px } .mbig #overview .overview-title { font-size:1.5rem } .mbig #overview .overview-text { font-size:.75rem } .mbig #overview .rc-cta { margin-left:-25px; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; -o-box-sizing:content-box; -ms-box-sizing:content-box; box-sizing:content-box } } .product-gallery { padding:100px 0 49px; border-top:1px solid #e0e0e0 } @media screen and (max-width:767px) { .product-gallery { padding:50px 0 0; border-top:none } } .product-gallery-container { position:relative; margin:0 auto; max-width:1080px; padding:600px 0 0 } @media screen and (max-width:767px) { .product-gallery-container { padding-top:58.59375%; padding-left:0; padding-right:0 } } .product-gallery-item { position:absolute; left:0; top:0; display:none; width:100%; height:100%; padding:0 50px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } @media screen and (max-width:767px) { .product-gallery-item { padding:0 20px } } .product-gallery-item-active { display:block; z-index:1; opacity:0; filter:alpha(opacity=0); transition-duration:.4s; -webkit-transition-duration:.4s; -moz-transition-duration:.4s; transition-timing-function:linear; -moz-transition-timing-function:linear; -webkit-transition-timing-function:linear; -o-transition-timing-function:linear; -ms-transition-timing-function:linear } .product-gallery-item-active.in { z-index:2; opacity:1; filter:alpha(opacity=100); transition-duration:.7s; -webkit-transition-duration:.7s; -moz-transition-duration:.7s } .product-gallery-image { position:relative; margin:0 auto; height:100% } .product-gallery-image img, .product-gallery-image video { position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%) } .product-gallery-image video { display:none } @media screen and (max-width:767px) { .product-gallery-image img { display:block; width:100% } .product-gallery-image video { display:none } .product-gallery-image.autoplay-canplay img, .product-gallery-image.autoplay-playing img { display:block } .product-gallery-image.autoplay-canplay video, .product-gallery-image.autoplay-playing video { display:none } } .video .product-gallery-image.autoplay-canplay img, .video .product-gallery-image.autoplay-playing img { display:none } .video .product-gallery-image.autoplay-canplay video, .video .product-gallery-image.autoplay-playing video { display:block } .product-gallery-control { text-align:center; position:relative; margin:99px auto 0; display:none; max-width:1080px; padding:0 50px; z-index:3; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } .product-gallery-control .rc-more-box { margin:0 auto; display:block } @media screen and (max-width:767px) { .product-gallery-control { margin-top:50px; padding:0 } .product-gallery-control .rc-more-box .rc-cta { padding-left:25px; padding-right:25px; float:none } .product-gallery-control .rc-more-box .rc-cta:first-child { margin-left:0 } } .js .product-gallery-control { display:block } .color-indicators { position:absolute; right:50px; top:0; display:inline-block } @media screen and (max-width:767px) { .color-indicators { text-align:left; position:static; display:block; padding:15px 25px; vertical-align:top; border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0 } } .rc-more-box+.color-indicators { border-top:none } .color-indicator { position:relative; margin-left:5px; width:38px; height:38px; float:left; cursor:pointer } .color-indicator:first-child { margin-left:0 } .color-indicator:first-child .color-indicator-name { left:70px } .color-indicator .rc-icon-colorchip { position:absolute; left:-2px; top:-2px } .color-indicator:hover .color-indicator-name { display:block } @media screen and (max-width:767px) { .color-indicator { margin-left:10px } } .color-indicator-name { font-size:13px; font-size:.65rem; font-weight:300; line-height:1; letter-spacing:0; text-align:left; text-transform:capitalize; white-space:nowrap; color:#999; position:absolute; left:35px; top:50%; display:none; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%) } .color-indicator-active .color-indicator-name { display:block } .photo-gallery { line-height:0; text-align:center; padding:50px 0 99px; border-top:1px solid #e0e0e0 } .photo-gallery .carousel { position:relative; margin:0 auto; max-width:1080px; padding:0 50px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } .photo-gallery .carousel-transition .carousel-slider { transition-duration:.7s; -webkit-transition-duration:.7s; -moz-transition-duration:.7s; transition-delay:.5s; -webkit-transition-delay:.5s; -moz-transition-delay:.5s } .photo-gallery .rc-paddle { color:#666; position:absolute; top:0; left:50px; margin-top:24.79591837%; z-index:3; -webkit-text-stroke:.2px #666 } .photo-gallery .rc-paddle:hover { color:#000; -webkit-text-stroke:.2px #000 } .photo-gallery .rc-paddle-right { left:auto; right:50px } .photo-gallery.photo-gallery-image-hover .rc-paddle { display:block } @media screen and (max-width:767px) { .photo-gallery { padding:80px 0 0; border-top:none } .photo-gallery .carousel { padding:0 } } .photo-gallery-container { position:relative; margin-left:-5px; padding:56.2244898% 5px 310px } @media screen and (max-width:767px) { .photo-gallery-container { width:auto; padding-top:62.5%; padding-bottom:300px; overflow:hidden } } .photo-gallery-item { position:absolute; left:0; top:0; width:100%; height:100%; padding:0 5px; overflow:hidden; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } .photo-gallery-item.carousel-item-previous .photo-gallery-image { opacity:1; filter:alpha(opacity=100) } .photo-gallery-item.carousel-item-current .photo-gallery-image { opacity:1; filter:alpha(opacity=100); transition-duration:.5s; -webkit-transition-duration:.5s; -moz-transition-duration:.5s } .photo-gallery-item.carousel-item-current .photo-gallery-item-copy { opacity:1; filter:alpha(opacity=100) } .photo-gallery-item.left { left:-100% } .photo-gallery-item.right { left:100% } .photo-gallery-item .photo-gallery-item-copy { opacity:0; filter:alpha(opacity=0); transition-duration:.7s; -webkit-transition-duration:.7s; -moz-transition-duration:.7s } .photo-gallery-item .photo-gallery-image { opacity:.2; filter:alpha(opacity=20); transition-duration:.3s; -webkit-transition-duration:.3s; -moz-transition-duration:.3s; transition-timing-function:linear; -moz-transition-timing-function:linear; -webkit-transition-timing-function:linear; -o-transition-timing-function:linear; -ms-transition-timing-function:linear } @media screen and (max-width:767px) { .photo-gallery-item { padding-left:0; padding-right:0 } .photo-gallery-item .rc-icon-play-large { display:block } } .photo-gallery-item-copy { margin:0 auto; max-width:650px; padding-top:110px } @media screen and (max-width:767px) { .photo-gallery-item-copy { text-align:left; padding-top:60px; padding-left:25px; padding-right:25px } } .photo-gallery .photo-gallery-item-headline { font-weight:300; font-size:20px; font-size:1rem; line-height:1.2; text-transform:none; color:#000; margin:-0.25em 0 .7em } @media screen and (max-width:767px) { .photo-gallery .photo-gallery-item-headline { font-size:1rem; text-align:left; line-height:1.3; margin:-0.2em 0 .75em } } .photo-gallery .photo-gallery-item-text { font-weight:300; font-size:14px; font-size:.7rem; line-height:1.57142857; color:#000; margin-top:-0.35714286em; margin-bottom:-0.5em !important } .photo-gallery-image { position:relative; padding-top:56.2244898%; overflow:hidden } .photo-gallery-image a { cursor:default } .photo-gallery-image img, .photo-gallery-image video { position:absolute; left:0; top:0; width:100%; overflow:hidden } .photo-gallery-image img { -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0) } @media screen and (max-width:767px) { .photo-gallery-image { padding-top:56.25% } } .photo-gallery-indicators { position:absolute; left:50%; bottom:250px; margin:auto; display:inline-block; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%) } @media screen and (max-width:767px) { .photo-gallery-indicators { bottom:285px; padding:0 } } .photo-gallery-indicator { position:relative; margin-left:21px; width:11px; height:11px; float:left; cursor:pointer } .photo-gallery-indicator:first-child { margin-left:0 } .photo-gallery-indicator:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; width:10px; height:10px; background-color:#919696; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } .photo-gallery-indicator:hover:before, .photo-gallery-indicator.active:before, .photo-gallery-indicator.carousel-current:before { background-color:transparent; border:1px solid #000 } @media screen and (max-width:767px) { .photo-gallery-indicator { width:8px; height:8px } .photo-gallery-indicator:before { width:100%; height:100% } } /* .features { padding-top:150px; border-top:1px solid #e0e0e0 } */ @media screen and (max-width:767px) { .features { padding-top:30px; border-top:none } } .next-router { text-align:center; padding:100px 0 91px; border-top:1px solid #e0e0e0 } .next-router-cta { font-size:16px; font-size:.8rem; font-weight:300; line-height:1; letter-spacing:0.01em; text-decoration:none; color:#000; display:inline-block } .next-router-cta .rc-icon { display:block; margin-bottom:10px } .next-router-experience { text-align:left; position:relative; padding-top:600px; padding-bottom:0; border:none } @media screen and (max-width:767px) { .next-router-experience { padding-top:58.59375% } } .safari .next-router .next-router-title { font-weight:200; -webkit-font-smoothing:antialiased } .safari .next-router .next-router-cta { font-weight:400; -webkit-font-smoothing:antialiased } .next-router-copy { position:absolute; top:50%; left:0; right:0; margin:4px auto 0; max-width:1180px; padding:0 58px 0; z-index:1; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%) } @media screen and (max-width:767px) { .next-router-copy { padding:0 30px 0 } } .next-router-experience .next-router-title { font-size:50px; font-size:2.5rem; font-weight:100; line-height:1.2; letter-spacing:0; text-align:left; text-transform:none; color:#fff; margin:-0.2em 0 .7em; max-width:600px } @media screen and (max-width:767px) { .next-router-experience .next-router-title { font-size:1.25rem } } .next-router-experience .next-router-cta { font-size:14px; font-size:.7rem; font-weight:400; line-height:1; letter-spacing:0.01em; text-align:center; text-transform:none; text-decoration:none; color:#fff; display:inline-block; padding:.85714286em 2em .85714286em 2.21428571em; border:1px solid #fff; border-color:rgba(255,255,255,0.5); border-radius:.28571429em; -webkit-border-radius:.28571429em; -moz-border-radius:.28571429em } .next-router-experience .next-router-cta:hover { color:#000; background-color:#fff } @media screen and (max-width:767px) { .next-router-experience .next-router-cta { font-size:.6rem } } .next-router-hero { position:absolute; left:0; top:0; width:100%; height:100%; background-color:#000; overflow:hidden } .next-router-hero img { position:absolute; left:50%; top:50%; width:100%; vertical-align:top; opacity:.85; filter:alpha(opacity=85); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%) } @media screen and (max-width:767px) { .next-router-hero img { position:relative; top:0; left:50%; width:auto; height:100%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%) } } .experience { padding:150px 0 0 } @media screen and (max-width:767px) { .experience { padding-top:80px } } .experience .experience-headline { font-weight:300; font-size:20px; font-size:1rem; line-height:1.2; letter-spacing:0; text-transform:none; color:#000; margin:-0.25em 0 .7em } @media screen and (max-width:767px) { .experience .experience-headline { text-align:left; line-height:1.4 } } .experience .experience-text { font-weight:300; font-size:14px; font-size:.7rem; line-height:1.57142857; letter-spacing:0; color:#000; margin-top:-0.35714286em; margin-bottom:-0.5em !important } @media screen and (max-width:767px) { .experience .experience-text { text-align:left } } .safari .experience .fp-cta { font-weight:300; -webkit-font-smoothing:antialiased } .experience-section { margin:0 auto 0; max-width:1280px; padding:0 50px 150px; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } @media screen and (max-width:767px) { .experience-section { padding:0 15px 80px } } .experience-copy { text-align:center; margin:0 auto; max-width:650px; padding-top:50px } @media screen and (max-width:767px) { .experience-copy { padding:40px 15px 0 } } .js .experience-copy[data-show="on-scroll"] { -webkit-transform:none; -moz-transform:none; -ms-transform:none; transform:none } .experience-image { position:relative; padding-top:56.18644068%; overflow:hidden } .experience-image a { cursor:default } .experience-image .rc-icon-play-large { position:absolute; left:50%; top:50%; width:76px; height:76px; z-index:1; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%) } .experience-image .rc-icon-play-large:before { width:76px; height:152px } .experience-image img { position:absolute; left:0; top:0; width:100%; vertical-align:top; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0) } .modal-gallery { opacity:1; filter:alpha(opacity=100) } .modal-gallery.active { visibility:visible } .modal-gallery .modal-content { max-height:none } .modal-gallery .modal-content { position:relative; margin:auto; width:100%; height:100%; min-height:600px; background-color:#fff; -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0) } .modal-gallery .rc-button-close { right:50px; top:50px } .modal-gallery .dotnav { position:absolute; left:50%; bottom:43px; display:inline-block; z-index:3; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%) } .modal-gallery .dotnav-item { position:relative; width:11px; height:11px; margin-left:21px; float:left; cursor:pointer } .modal-gallery .dotnav-item:first-child { margin-left:0 } .modal-gallery .dotnav-item:hover .dotnav-dot { width:10px; height:10px; background-color:transparent; border:1px solid #000 } .modal-gallery .dotnav-dot { position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; width:10px; height:10px; background-color:#919696; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50% } .modal-gallery .rc-paddle { position:absolute; top:50%; left:50px; margin-top:-32.5px; z-index:3 } .modal-gallery .rc-paddle-right { left:auto; right:50px; background: url(../images/hright.svg) no-repeat center; } .modal-gallery .rc-paddle-left { background: url(../images/hleft.svg) no-repeat center; } @media screen and (max-width:767px) { .modal-gallery .rc-button-close { right:25px; top:25px } .modal-gallery .dotnav { text-align:center; left:0; display:block; width:100%; -webkit-transform:none; -moz-transform:none; -ms-transform:none; transform:none } .modal-gallery .dotnav-item { margin-left:10px; display:inline-block; vertical-align:top; float:none } } .modal-gallery-container { position:relative; width:100%; height:100%; overflow:hidden } .modal-gallery-item { position:absolute; width:100%; height:100%; padding:0 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } @media screen and (max-width:767px) { .modal-gallery-item { padding:80px 25px } } .modal-gallery-image { position:relative; width:100%; height:100% } .modal-gallery-image.modal-gallery-image-vertical img { width:auto; height:100% } .modal-gallery-image img { position:absolute; left:50%; top:50%; width:100%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%) } .carousel-current .dotnav-dot { width:10px; height:10px; background-color:transparent; border:1px solid #000 } .modal-gallery-360 .modal-content { width:100%; height:100%; background-color:#fff; -webkit-transform:none; -moz-transform:none; -ms-transform:none; transform:none } .modal-gallery-360 video { position:absolute; left:0; top:0; width:100%; height:100% } .modal-gallery-360 .rc-button-close { position:absolute; right:50px; top:50px; z-index:3 } .modal-gallery-360 .rc-icon-replay { position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; display:none; cursor:pointer } .modal-gallery-360.modal-gallery-360-ended .rc-icon-replay { display:block } @media screen and (max-width:767px) { .modal-gallery-360 .rc-button-close { right:30px; top:30px } } .modal-standard-features .modal-content { margin:0 auto; width:980px; min-width:0 } @media screen and (max-width:767px) { .modal-standard-features .modal-content { width:auto } } .standard-features { position:relative; margin:0 auto; padding:150px; background-color:#fff } .standard-featurescs { position:relative; margin:0 auto; padding:150px 40%; background-color:#fff } @media screen and (max-width:767px) { .standard-features { padding:100px 25px 80px } } .standard-features .standard-features-headline { font-size:37px; font-size:1.85rem; font-weight:100; line-height:1; letter-spacing:0; text-align:center; text-transform:capitalize; color:#000; margin:-0.13513514em auto 1.02702703em } @media screen and (max-width:767px) { .standard-features .standard-features-headline { font-size:1.5rem } } .standard-features .standard-features-list { border-bottom:1px solid #ccc } .standard-features .standard-features-list-item { font-size:16px; font-size:.8rem; font-weight:300; line-height:1.5; letter-spacing:0; text-align:left; text-transform:none; color:#000; padding:1.0625em 0 1.125em; border-top:1px solid #ccc; padding: 1.0625em 0 1.125em; } .standard-features .standard-features-list-item td{ padding: 1.0625em 0 1.125em; } @media screen and (max-width:767px) { .standard-features .standard-features-list-item { font-size:.7rem } } #promos { /* display:none */ } #specifications, #articles, #accessories, #downloads, #support { padding-bottom:100px } @media screen and (max-width:767px) { #specifications, #articles, #accessories, #downloads, #support { padding-bottom:0 } } #specifications, #accessories { padding-top:100px } #specifications { margin-top:0; padding-top:0 !important; padding-bottom:0 } .fixed+#content-container #specifications { padding-top:0 } .main { padding-top:0 } .rld-loader { background-color:#fff } .rld-progressbar { height:1px; background-color:#000 } .rld-curtain { position:fixed; left:0; top:0; width:100%; height:100%; z-index:5; background-color:#fff; opacity:0; filter:alpha(opacity=0); transition-duration:1.5s; -webkit-transition-duration:1.5s; -moz-transition-duration:1.5s; transition-delay:.3s; -webkit-transition-delay:.3s; -moz-transition-delay:.3s } .rld-curtain-transition .rld-curtain { transition-delay:0s; -webkit-transition-delay:0s; -moz-transition-delay:0s; transition-duration:.5s; -webkit-transition-duration:.5s; -moz-transition-duration:.5s; opacity:1; filter:alpha(opacity=100) } #rc-globalnav { position:relative; width:100%; z-index:7 } .rc-gn-header { position:relative; height:60px; background-color:#1a1a1a } .rc-globalnav-placeholder { height:60px } .rc-gn-item { position:absolute } .rc-gn-menuicon { left:30px; top:50%; width:20px; height:14px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%) } .rc-gn-menuicon-bar { position:absolute; left:0; top:50%; width:100%; height:1px; background-color:#fff } .rc-gn-menuicon-bar-top { -webkit-transform:translateY(-7px); -moz-transform:translateY(-7px); -ms-transform:translateY(-7px); transform:translateY(-7px) } .rc-gn-menuicon-bar-bottom { -webkit-transform:translateY(7px); -moz-transform:translateY(7px); -ms-transform:translateY(7px); transform:translateY(7px) } .rc-gn-roland { font-size:0; line-height:0; left:50%; top:19px; -webkit-transform:translateX(-50%) scale(1.03); -moz-transform:translateX(-50%) scale(1.03); -ms-transform:translateX(-50%) scale(1.03); transform:translateX(-50%) scale(1.03) } .rc-gn-roland .glyphicon-brand { font-size:21px; line-height:1 } .rc-gn-account { right:30px; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%) } .rc-gn-account-item { font-size:0; line-height:0; margin-left:25px; float:left } .rc-icon-user { display:inline-block; width:20px; height:20px; background:url(../images/rc_icon_user.svg) no-repeat center center; -moz-background-size:contain; -webkit-background-size:contain; -o-background-size:contain; -ms-background-size:contain; background-size:contain } .rc-icon-star { display:inline-block; width:21px; height:20px; background:url(../images/rc_icon_star.svg) no-repeat center center; -moz-background-size:contain; -webkit-background-size:contain; -o-background-size:contain; -ms-background-size:contain; background-size:contain } .rc-icon-bag { display:inline-block; width:18px; height:20px; background:url(../images/rc_icon_bag.svg) no-repeat center center; -moz-background-size:contain; -webkit-background-size:contain; -o-background-size:contain; -ms-background-size:contain; background-size:contain } .rc-icon-roupe { display:inline-block; width:20px; height:20px; background:url(../images/rc_icon_roupe_white.svg) no-repeat center center; -moz-background-size:contain; -webkit-background-size:contain; -o-background-size:contain; -ms-background-size:contain; background-size:contain } .rc-gn-link { text-decoration:none; color:#fff } .rc-icon { /* color:#333; */ border-width:1px; /* border-color:#333; */ border-style:solid; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50% } .rc-icon:hover, .rc-cta:hover .rc-icon { background-color:#333; border-color:#333 } .rc-more-box .rc-cta { margin-left:35px } .rc-icon-plus-circle { font-weight:300 } .rc-icon-plus-circle:before { left:1px; width:100%; height:200% } .card .rc-icon-plus-circle { font-weight:300; font-size:26px; line-height:1.15384615; color:#333; width:31px; height:31px; border-width:1px; border-color:#333; cursor:pointer; transition-duration:.2s; -webkit-transition-duration:.2s; -moz-transition-duration:.2s; transition-property:transform; -webkit-transition-property:transform; -moz-transition-property:transform } .card .rc-icon-plus-circle:before { left:.025em; width:100%; height:200%; -webkit-font-smoothing:antialiased } .card .rc-icon-plus-circle:hover { color:#fff; background-color:#000 } .rc-icon-new-window-circle:before { background-image:url(../images/icon_new_window.svg) } .accordion-active .rc-icon-plus-circle { color:#fff; background-color:#000; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg) } .accordion-active .rc-icon-plus-circle:hover { color:#000; background-color:transparent } .rc-icon-play-circle { display:inline-block; position:relative; width:24px; height:24px; overflow:hidden; vertical-align:middle } .rc-icon-play-circle:before { content:""; position:absolute; left:0; top:0; width:100%; height:200%; background-image:url(../images/images/icon_play.svg) } .rc-icon-chevron-down-circle:before { background-image:url(../images/icon_chevron_down.svg) } .rc-color-switcher { margin:0 auto } .spec-hero-image+.rc-color-switcher { margin-top:-50px } @media screen and (max-width:767px) { .spec-hero-image+.rc-color-switcher { margin-top:-25px } } .rc-color-palette { font-size:0; text-align:center; line-height:0 } .rc-color-chip { font-weight:100; font-size:18px; font-size:.9rem; line-height:1; text-align:center; white-space:nowrap; color:#000; position:relative; display:inline-block; width:40px; padding:0 4px; cursor:pointer } .rc-color-chip:before { content:""; display:block; margin:6px 6px; width:28px; height:28px; background-color:#f2f2f2; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50% } .rc-color-chip:after { content:""; position:absolute; left:50%; top:50%; margin:-20px auto auto -20px; display:none; width:38px; height:38px; border:1px solid #333; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50% } .rc-color-chip:hover:after, .rc-color-chip.active:after { display:block } .rc-color-chip.active .rc-color-chip-name { display:block } .rc-color-chip-black:before { background-color:#333 } .rc-color-chip-gray:before { background-color:#d9d9d9 } .rc-color-chip-name { font-weight:300; font-size:16px; font-size:.8rem; line-height:1; color:#333; position:absolute; top:50%; left:53px; margin-top:-0.5em; display:none } .rc-color-chip-black .rc-color-chip-name { left:101px } .rc-colored-images .rc-colored-image-0, .rc-colored-images .rc-colored-image-1, .rc-colored-images .rc-colored-image-2, .rc-colored-images .rc-colored-image-3, .rc-colored-images .rc-colored-image-4 { visibility:hidden; opacity:0; filter:alpha(opacity=0); transition-duration:0s; -webkit-transition-duration:0s; -moz-transition-duration:0s; transition-property:opacity; -webkit-transition-property:opacity; -moz-transition-property:opacity } .rc-colored-images.rc-color-switcher-0 .rc-colored-image-0 { visibility:visible; z-index:1; transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s; opacity:1; filter:alpha(opacity=100) } .rc-colored-images.rc-color-switcher-0 video.rc-colored-image-0 { opacity:0; filter:alpha(opacity=0); transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s } .rc-color-switcher-playing.rc-colored-images.rc-color-switcher-0 video.rc-colored-image-0 { opacity:1; filter:alpha(opacity=100) } .rc-colored-images.rc-color-switcher-transition-0 .rc-colored-image-0 { z-index:2 } .rc-colored-images.rc-color-switcher-1 .rc-colored-image-1 { visibility:visible; z-index:1; transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s; opacity:1; filter:alpha(opacity=100) } .rc-colored-images.rc-color-switcher-1 video.rc-colored-image-1 { opacity:0; filter:alpha(opacity=0); transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s } .rc-color-switcher-playing.rc-colored-images.rc-color-switcher-1 video.rc-colored-image-1 { opacity:1; filter:alpha(opacity=100) } .rc-colored-images.rc-color-switcher-transition-1 .rc-colored-image-1 { z-index:2 } .rc-colored-images.rc-color-switcher-2 .rc-colored-image-2 { visibility:visible; z-index:1; transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s; opacity:1; filter:alpha(opacity=100) } .rc-colored-images.rc-color-switcher-transition-2 .rc-colored-image-2 { z-index:2 } .rc-colored-images.rc-color-switcher-3 .rc-colored-image-3 { visibility:visible; z-index:1; transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s; opacity:1; filter:alpha(opacity=100) } .rc-colored-images.rc-color-switcher-transition-3 .rc-colored-image-3 { z-index:2 } .rc-colored-images.rc-color-switcher-4 .rc-colored-image-4 { visibility:visible; z-index:1; transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s; opacity:1; filter:alpha(opacity=100) } .rc-colored-images.rc-color-switcher-transition-4 .rc-colored-image-4 { z-index:2 } .dotnav { font-size:0; line-height:0; text-align:center } .dotnav-item { display:inline-block; padding:0 6px } .dotnav-dot { display:block; width:7px; height:7px; background-color:#a6a6a6; cursor:pointer; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50% } .dotnav-dot:hover, .current .dotnav-dot { border:1px solid #000; background-color:transparent } .section-content { margin:0 auto; width:984px } @media screen and (max-width:767px) { .section-content { width:auto; padding:0 15px } } .section-content .card-trigger-block { height:auto; margin-top:60px; padding:30px 0 40px } @media screen and (max-width:767px) { .section-content .card-trigger-block { margin-top:40px } } .section-header { text-align:center; max-width:750px; margin:0 auto; -webkit-font-smoothing:antialiased } .section-header-copy { text-align:center; position:absolute; left:0; right:0; bottom:150px; margin:auto; width:800px; z-index:1; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } @media screen and (max-width:767px) { .section-header-copy { position:relative; bottom:auto !important; width:auto; padding:0 30px 80px } } .main .section-header-title { font-weight:400; font-size:50px; font-size:2.5rem; line-height:1.1; letter-spacing:0; text-transform:none; color:#000; margin:-0.18em 0 .46em; -webkit-font-smoothing:antialiased } @media screen and (max-width:767px) { .main .section-header-title { font-size:38px; font-size:1.5rem } } .section-header-eyebrow { font-weight:100; font-size:20px; font-size:1rem; line-height:1; letter-spacing:0; margin:0 0 1.7em; display:block } @media screen and (max-width:767px) { .section-header-eyebrow { font-size:15px; font-size:.75rem } } .safari .section-header-eyebrow { font-weight:300; -webkit-font-smoothing:antialiased } .main .section-header-text { font-weight:400; font-size:19px; font-size:.95rem; line-height:1.47368421; letter-spacing:0; text-transform:none; color:#000; margin:-0.31578947em auto -0.47368421em } @media screen and (max-width:767px) { .main .section-header-text { font-size:17px; font-size:.85rem } } .safari .main .section-header-text { font-weight:400; -webkit-font-smoothing:antialiased } .section-header-image { position:absolute; top:0; left:0; width:100% } .section-header-image img { position:absolute; top:0; left:0; width:100% } @media screen and (max-width:1440px) { .section-header-image img { left:50%; margin-left:-720px; width:1440px } } @media screen and (max-width:767px) { .section-header-image img { left:-10%; margin-left:0; width:120% } } .masthead { height:0; padding-top:62.5% } .masthead .rc-icon-chevron-down-circle { position:absolute; left:0; right:0; bottom:50px; z-index:1; border-color:#fff } .masthead .rc-icon-chevron-down-circle:hover { background-color:transparent } .masthead-copy { text-align:center; position:absolute; left:0; right:0; top:50%; margin:0 auto; max-width:700px; z-index:1; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%) } @media screen and (max-width:767px) { .masthead-copy { margin-top:-20px } } .main .masthead-title { font-weight:600; font-size:60px; font-size:3rem; line-height:1; color:#fff; margin:-0.15em auto -0.16666667em; -webkit-font-smoothing:antialiased } @media screen and (max-width:767px) { .main .masthead-title { font-size:1.5rem } } .main .masthead-tagline { font-weight:400; font-size:24px; font-size:1.2rem; line-height:1; letter-spacing:0; text-transform:none; color:#fff; margin:-0.125em auto -0.20833333em; -webkit-font-smoothing:antialiased } .masthead-image { position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden; background-color:#000 } .masthead-image img, .masthead-image vieo { position:absolute; left:-100%; right:-100%; top:-100%; bottom:-100%; margin:auto; width:100%; vertical-align:top } .masthead-image video { display:none } .video .masthead-image video { display:block } .video .masthead-image img { display:none } .overview { text-align:center; position:relative; padding:130px 0 0; background-color:#fff } .overview .rc-more-box { font-size:0; line-height:0; margin-top:70px } .overview .rc-more-box .rc-button { margin:0 7px 0 8px; min-width:148px } .overview .rc-cta { font-weight:300; color:#333; -webkit-font-smoothing:antialiased } .overview .rc-button { font-weight:400; font-size:16px; font-size:.8rem; line-height:1; color:#b2b2b2; padding:.6875em .6875em; border:1px solid #b2b2b2; border-radius:1.25em; -webkit-border-radius:1.25em; -moz-border-radius:1.25em } .overview .rc-button:hover { color:#fff; background-color:#000; border-color:#000 } @media screen and (max-width:767px) { .overview { padding:60px 0 } .overview .rc-more-box { margin:50px -20px 0 } .overview .rc-more-box .rc-cta+.rc-cta { margin-left:0 } .overview .rc-more-box { text-align:center } .overview .rc-button { margin:0 auto !important; display:block; max-width:230px } .overview .rc-button+.rc-button { margin-top:15px !important } } .main .overview-title { font-weight:600; font-size:150px; font-size:7.5rem; line-height:1; letter-spacing:0; text-align:center; text-transform:none; color:#000; margin:-0.14666667em auto .33333333em; max-width:1080px; padding-bottom:.14666667em; /* border-bottom:1px solid #ccc; */ -webkit-font-smoothing:antialiased } @media screen and (max-width:1180px) { .main .overview-title { margin-left:50px; margin-right:50px } } @media screen and (max-width:767px) { .main .overview-title { font-size:2.83333333em } } .overview-copy { position:relative; margin:auto; max-width:850px; padding-bottom:80px; z-index:1 } @media screen and (max-width:767px) { .overview-copy { padding:0 20px 50px } } .main .overview-healine { font-weight:600; font-size:50px; font-size:2.5rem; line-height:1.1; letter-spacing:0; text-transform:none; color:#000; margin:-0.2em auto .45454545em; -webkit-font-smoothing:antialiased } @media screen and (max-width:767px) { .main .overview-healine { font-size:1.8rem; margin-bottom:.75em } } .main .overview-text { font-weight:400; font-size:19px; font-size:.95rem; line-height:1.47368421; letter-spacing:0; text-transform:none; color:#000; margin:-0.31578947em auto -0.47368421em; -webkit-font-smoothing:antialiased; backface-visibility:hidden } .main .overview-text.in-view { transition-delay:.1s; -webkit-transition-delay:.1s; -moz-transition-delay:.1s } @media screen and (max-width:767px) { .main .overview-text { font-size:.9rem } } .overview-image { position:relative; margin-top:80px; padding-top:785px; margin:0 auto } .overview-image img, .overview-image video { position:absolute; left:-100%; right:-100%; bottom:-100%; top:-100%; margin:auto; height:100% } @media screen and (max-width:767px) { .overview-image { margin-bottom:-20px; padding-top:83.94308943% } .overview-image img { width:100% } } .overview-gallery { padding:0 10px } .overview-gallery-container { position:relative; padding:70.42253521% 0 0 } .overview-gallery-inner { position:absolute; left:0; top:0; width:50%; height:100%; padding:0 10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } .overview-gallery-inner-frame, .overview-gallery-inner-casters { height:50%; left:auto; right:0; padding:10px } .overview-gallery-inner-frame { padding-top:0 } .overview-gallery-inner-casters { top:50%; padding-bottom:0 } .overview-gallery-image { position:relative; width:100%; height:100% } .overview-gallery-image img { position:absolute; left:0; top:0; width:100% } .td-contents { position:relative; background-color:#fff; z-index:1; display:none; } .card-hero { width:100%; position:relative; padding-top:97.22222222% } .card-hero .section-content { text-align:center; position:absolute; top:0; left:0; right:0; margin:auto; max-width:750px; padding:130px 0 0; z-index:5 } .card-hero .rc-more-box { margin-top:35px } .card-hero .rc-more-box.in-view { transition-delay:.2s; -webkit-transition-delay:.2s; -moz-transition-delay:.2s } @media screen and (max-width:1440px) { .card-hero { padding-top:1400px } } @media screen and (max-width:767px) { .card-hero { padding-top:97.22222222% !important; background-color:#000 } .card-hero .section-content { position:relative; left:auto; top:auto; margin:auto; width:auto; padding:60px 30px 160px; z-index:auto; -webkit-transform:none; -moz-transform:none; -ms-transform:none; transform:none } .card-hero .section-content:after { content:""; position:absolute; left:0; bottom:0; width:100%; height:0; background-color:#fff; z-index:2; transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s } .card-hero .rc-more-box { margin:35px -30px 0 } .card-hero .rc-cta { color:#fff } .card-hero .rc-icon { border-color:#fff } .card-hero .rc-icon:before { top:auto; bottom:0 } .card-hero .rc-cta-text { -webkit-font-smoothing:antialiased } } .card-expand .card-hero .section-content:after { height:100px } .card-transition .card-hero { position:fixed; z-index:5; transition-property:bottom; -webkit-transition-property:bottom; -moz-transition-property:bottom; transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s } .card-hero-placeholder { display:none; padding-top:97.22222222% } @media screen and (max-width:1440px) { .card-hero-placeholder { padding-top:1400px } } @media screen and (max-width:767px) { .card-hero-placeholder { padding-top:97.22222222% !important } } .card-transition .card-hero-placeholder { display:block } .main .card-hero-healine { font-weight:600; font-size:50px; font-size:2.5rem; line-height:1.1; letter-spacing:0; text-transform:none; color:#000; margin:-0.18em auto .5em; -webkit-font-smoothing:antialiased } .main .card-hero-healine.in-view { transition-delay:0s; -webkit-transition-delay:0s; -moz-transition-delay:0s } @media screen and (max-width:767px) { .main .card-hero-healine { font-size:1.8rem; color:#fff } .main .card-hero-healine br { display:none } } .main .card-hero-text { font-weight:400; font-size:19px; font-size:.95rem; line-height:1.47368421; letter-spacing:0; text-transform:none; color:#000; margin:-0.36842105em auto -0.42105263em; max-width:700px; -webkit-font-smoothing:antialiased } .main .card-hero-text.in-view { transition-delay:.1s; -webkit-transition-delay:.1s; -moz-transition-delay:.1s } .main .card-hero-text small { font-weight:inherit; font-size:14px; font-size:.7rem; line-height:1.71428571; color:inherit; display:block; margin:1.57142857em auto -0.35714286em } @media screen and (max-width:767px) { .main .card-hero-text { font-size:.8rem; color:#fff } } .card-hero-image { position:absolute; left:0; right:0; top:0; bottom:0; background-color:#000; overflow:hidden } .card-hero-image:before { content:""; position:absolute; left:0; bottom:0; width:100%; padding-top:200px; z-index:4; background-color:rgba(0,0,0,0); background:linear-gradient(BOTTOM, rgba(0,0,0,0.3), rgba(0,0,0,0)); background:-webkit-linear-gradient(BOTTOM, rgba(0,0,0,0.3), rgba(0,0,0,0)); background:-moz-linear-gradient(BOTTOM, rgba(0,0,0,0.3), rgba(0,0,0,0)); background:-ms-linear-gradient(BOTTOM, rgba(0,0,0,0.3), rgba(0,0,0,0)) } .card-hero-image:after { content:""; position:absolute; left:0; bottom:-1px; width:100%; height:0; background-color:#fff; z-index:4; transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s } .card-hero-image img, .card-hero-image video, .card-hero-image canvas { position:absolute; left:-100%; right:-100%; top:-100%; bottom:-100%; margin:auto; width:100% } .card-hero-image img.card-hero-image-display, .card-hero-image video.card-hero-image-display, .card-hero-image canvas.card-hero-image-display { position:absolute; top:48%; left:0; right:0; bottom:auto; margin:auto; width:31%; height:auto; z-index:1; -webkit-transform:none !important; -moz-transform:none !important; -ms-transform:none !important; transform:none !important } .card-hero-image img.card-hero-image-display.in-view, .card-hero-image video.card-hero-image-display.in-view, .card-hero-image canvas.card-hero-image-display.in-view { transition-delay:.2s; -webkit-transition-delay:.2s; -moz-transition-delay:.2s; transition-duration:1.5s !important; -webkit-transition-duration:1.5s !important; -moz-transition-duration:1.5s !important } .card-hero-image canvas { height:100% } .card-hero-image video { display:none } @media screen and (max-width:1440px) { .card-hero-image img, .card-hero-image canvas { width:1440px } .card-hero-image img.card-hero-image-display, .card-hero-image canvas.card-hero-image-display { width:446.4px } } @media screen and (max-width:767px) { .card-hero-image { right:auto; bottom:auto; width:100%; padding-top:104.16666667% !important } .card-hero-image img, .card-hero-image canvas { width:100% } .card-hero-image img.card-hero-image-display, .card-hero-image canvas.card-hero-image-display { width:31% } .card-hero-image:before, .card-hero-image:after { content:none } } .video .card-hero-image[data-play="on-scroll"] video { display:block } .video .card-hero-image[data-play="on-scroll"] img { visibility:hidden; opacity:0; filter:alpha(opacity=0) } .video .card-hero-image[data-play="on-scroll"] img.card-hero-image-display { visibility:visible } .video .card-hero-image[data-play="on-scroll"].autoplay-ended img { visibility:visible; z-index:1; transition-duration:.5s; -webkit-transition-duration:.5s; -moz-transition-duration:.5s; opacity:1; filter:alpha(opacity=100); transition-property:opacity; -webkit-transition-property:opacity; -moz-transition-property:opacity } .card-scene .card-hero-image:before { content:none } .card-expand .card-hero-image:after { height:100px } .card-transition .card-hero-image:after { height:0; transition-duration:0s; -webkit-transition-duration:0s; -moz-transition-duration:0s } .card-hero-overlay { position:absolute; left:0; top:0; width:100%; padding-top:48.61111111%; background:linear-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), color-stop(.7, rgba(255,255,255,0.5)), to(rgba(255,255,255,0))); background:-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.8)), color-stop(.7, rgba(255,255,255,0.5)), to(rgba(255,255,255,0))); z-index:4 } .card-hero-overlay.card-hero-overlay-black { background:linear-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.88)), color-stop(.6, rgba(0,0,0,0.7)), to(rgba(0,0,0,0))); background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.88)), color-stop(.6, rgba(0,0,0,0.7)), to(rgba(0,0,0,0))) } @media screen and (max-width:767px) { .card-hero-overlay { display:none } } .card-detail { position:relative; margin-top:-100px; z-index:4 } .card-detail .rc-icon-plus-circle { color:#fff; border-color:#fff; display:block; vertical-align:top } .card-detail .rc-icon-plus-circle:hover { color:#000; background-color:#fff } .card-detail .rc-icon-plus-circle.accordion-active { color:#fff; border-color:#ccc; background-color:#ccc; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg) } .card-detail .rc-icon-plus-circle.accordion-active:hover { border-color:#000; background-color:#000 } .card-trigger-block { line-height:0; text-align:center; position:relative; height:100px; padding:30px 0 40px; z-index:1; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; transition-duration:.7s; -webkit-transition-duration:.7s; -moz-transition-duration:.7s } .card-transition .card-trigger-block { opacity:0; filter:alpha(opacity=0) } .card-trigger-block .card-trigger-text { white-space:nowrap; position:absolute; left:50%; top:0; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%) } .card-trigger-text { font-weight:400; font-size:15px; font-size:.75rem; line-height:1; color:#fff; display:inline-block; margin:.06666667em auto .86666667em; vertical-align:top; -webkit-font-smoothing:antialiased; transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s } .card-expand .card-trigger-text { -webkit-transform:translate(-50%,-50px); -moz-transform:translate(-50%,-50px); -ms-transform:translate(-50%,-50px); transform:translate(-50%,-50px); opacity:0; filter:alpha(opacity=0) } .card-detail-content { width:auto; padding:0 130px; overflow:hidden; transition-duration:.1s; -webkit-transition-duration:.1s; -moz-transition-duration:.1s } .card-detail-content.test { transition-duration:0s; -webkit-transition-duration:0s; -moz-transition-duration:0s } @media screen and (max-width:1440px) { .card-detail-content { width:1180px; padding-left:50px; padding-right:50px } } @media screen and (max-width:1280px) { .card-detail-content { width:auto } } @media screen and (max-width:767px) { .card-detail-content { padding-left:15px; padding-right:15px } } .card-expand .card-detail-content { transition-duration:2s; -webkit-transition-duration:2s; -moz-transition-duration:2s } .card-active .card-detail-content { transition-duration:1s; -webkit-transition-duration:1s; -moz-transition-duration:1s } .card-active .card-detail-content.test { transition-duration:0s; -webkit-transition-duration:0s; -moz-transition-duration:0s } .card-transition .card-detail-content { transition-duration:0s; -webkit-transition-duration:0s; -moz-transition-duration:0s } .card-detail-overview-copy { text-align:center; padding:90px 0 130px } .card-detail-overview-eyebrow { font-weight:600; font-size:18px; font-size:.9rem; line-height:1; color:#000; margin:-0.16666667em auto 1.16666667em; display:block; -webkit-font-smoothing:antialiased } @media screen and (max-width:767px) { .card-detail-overview-eyebrow { font-size:.9rem } } .main .card-detail-overview-title { font-weight:600; font-size:36px; font-size:1.8rem; line-height:1; letter-spacing:0; text-transform:none; color:#000; margin:-0.13888889em auto -0.19444444em; -webkit-font-smoothing:antialiased } .main .card-detail-overview-title.in-view { transition-delay:.5s; -webkit-transition-delay:.5s; -moz-transition-delay:.5s } @media screen and (max-width:767px) { .main .card-detail-overview-title { font-size:1.8rem } } .card-detail-overview-image { position:relative; padding-top:41.53225806%; overflow:hidden } .card-detail-overview-image img, .card-detail-overview-image video { position:absolute; left:-100%; right:-100%; top:-100%; bottom:-100%; margin:auto; width:100% } .card-detail-feature { margin:130px -100px 0 } .card-detail-feature-image { position:relative; padding-top:41.66666667%; overflow:hidden } .card-detail-feature-image img, .card-detail-feature-image video { position:absolute; left:-100%; right:-100%; top:-100%; bottom:-100%; margin:auto; width:100% } .card-footer.row { width:auto; margin:5px -5px } .card-footer .col { position:relative; display:block; float:left } .card-footer .col a:hover .rc-icon-play-circle:before { top:auto; bottom:0 } .card-footer .col-6 { width:50%; padding:5px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } @media screen and (max-width:767px) { .card-footer.row { width:auto; margin:2px } .card-footer .col { float:none } .card-footer .col-6 { width:auto; padding:2px } } .card-footer-image { position:relative; padding-top:56.22377622%; background-color:#000; overflow:hidden } .card-footer-image img, .card-footer-image video { position:absolute; left:-100%; top:-100%; right:-100%; bottom:-100%; margin:auto; height:100%; z-index:1 } .card-footer-image video { display:none; z-index:0; opacity:.85; filter:alpha(opacity=85) } .card-footer-image img { transition-duration:.5s; -webkit-transition-duration:.5s; -moz-transition-duration:.5s; transition-property:opacity; -webkit-transition-property:opacity; -moz-transition-property:opacity } .card-footer-image .youtube-video-container { position:absolute; left:0; top:0; display:none; width:100%; height:100% } .card-footer-image .youtube-video-container iframe { width:100%; height:100% } .playing .card-footer-image .youtube-video-container { display:block; z-index:3 } .video .card-footer-image video { display:block } .video .card-footer-image.hover img { opacity:0; filter:alpha(opacity=0) } .card-footer-copy { line-height:0; font-size:0; text-align:center; position:absolute; left:0; right:0; top:50%; margin:auto; z-index:2; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); -webkit-font-smoothing:antialiased; pointer-events:none } .main .card-footer-headline { font-weight:600; font-size:30px; font-size:1.5rem; line-height:1; text-transform:uppercase; color:#fff; margin:-0.13333333em auto .53333333em } @media screen and (max-width:767px) { .main .card-footer-headline { font-size:1.2rem } } .main .card-footer-eyebrow { font-weight:600; font-size:16px; font-size:.8rem; line-height:1; color:#fff; margin:-0.125em auto 1.0625em; display:block } @media screen and (max-width:767px) { .main .card-footer-eyebrow { font-size:.6rem } } .card-footer-cta { font-weight:400; font-size:21px; font-size:1.05rem; line-height:1.04761905; color:#0096ff; margin:-0.0952381em auto; text-decoration:none; display:inline-block } .card-footer-cta .rc-icon-play-circle { vertical-align:bottom } @media screen and (max-width:767px) { .card-footer-cta { font-size:.8rem } .card-footer-cta .rc-icon-play-circle { vertical-align:middle } } .card-exercise .card-hero-text { max-width:none } .card-tunes .card-hero-text, .card-technology .card-hero-text { max-width:650px } @media screen and (max-width:767px) { #card-detail-tunes .card-detail-content { padding-left:10px; padding-right:10px } } .tunes-column { margin-top:60px; margin-left:auto; margin-right:auto; max-width:1180px; padding:180px 0; background-color:#000 } .tunes-column .row { margin:110px auto -50px; width:874px } .tunes-column .col { display:block; padding:48px 25px; float:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } .tunes-column .col-6 { width:50% } .tunes-column .col-6:nth-child(2n+1) { clear:both } .tunes-column .features-column-title, .tunes-column .features-column-text { color:#fff; float:none } .tunes-column .features-column-title+.features-column-text { margin-left:0 } @media screen and (max-width:767px) { .tunes-column { margin-top:0; padding:60px 25px } .tunes-column .row { margin:0 auto 0; width:auto } .tunes-column .col { padding:50px 0 0; float:none } .tunes-column .col-6 { width:auto } } .tunes-column-image { position:relative; margin:0 auto; width:586px; height:500px; overflow:hidden } .tunes-column-image img { position:absolute; left:-100%; top:-100%; right:-100%; bottom:-100%; margin:auto; width:100% } .tunes-column-image:after { content:""; position:absolute; left:35.40903541%; top:43%; width:29.18192918%; height:38.57142857%; background-position:center center; background-repeat:no-repeat; background-image:url(../images/tunes_td-17_kit.jpg); -moz-background-size:contain; -webkit-background-size:contain; -o-background-size:contain; -ms-background-size:contain; background-size:contain } .tunes-column-image.tunes-column-image-click:after { background-image:url(../images/tunes_td-17_click.jpg) } .tunes-column-image.tunes-column-image-coach:after { background-image:url(../images/tunes_td-17_coach.jpg) } .tunes-column-image.tunes-column-image-song:after { background-image:url(../images/tunes_td-17_song.jpg) } @media screen and (max-width:767px) { .tunes-column-image { width:auto; height:auto; padding-top:85.32423208% } } .contenttext{padding:60px 0px 0px;max-width: 1220px; margin: auto;} .section-lineup .section-content { width:auto; max-width:1080px; padding:30px 0px 0px; } .section-lineup .row { width:auto; margin:-34px -20px 0 } .section-lineup .col { position:relative; display:block; float:left } .section-lineup .col-6 { margin-top:125px; margin-bottom:-3px; width:33.333%; padding:0 20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } @media screen and (max-width:767px) { .section-lineup .section-content { padding:30px 20px } .contenttext{padding:0px;padding: 0 15px;} .section-lineup .row { width:auto; margin:51px -20px 0 } .section-lineup .col { float:none } .section-lineup .col-6 { margin-top:40px; width:auto } } .lineup-hero { position:relative; margin:0 auto; padding-top:62.5%; overflow:hidden } .lineup-hero img, .lineup-hero canvas { position:absolute; left:-100%; top:-100%; right:-100%; bottom:-100%; margin:auto; width:100% } .lineup-hero canvas { width:100%; height:100% } .lineup-image { position:relative; margin:0 auto; padding-top:100%; overflow:hidden } .lineup-image img { position:absolute; left:-100%; top:-100%; right:-100%; bottom:-100%; margin:auto; width:100% } .lineup-copy { font-size:0; line-height:0; text-align:left; padding:45px 40px 0; -webkit-font-smoothing:antialiased } @media screen and (max-width:767px) { .lineup-copy { padding:30px 20px 0 } } .main .lineup-title { font-weight:400; font-size:36px; font-size:1.2rem; line-height:1; text-align:left; color:#000; margin:-0.13888889em auto .5em } @media screen and (max-width:767px) { .main .lineup-title { font-size:1rem } } .main .lineup-text { font-weight:400; font-size:18px; font-size:.65rem; line-height:1.38888889; text-align:left; color:#000; margin:-0.33333333em auto -0.38888889em } @media screen and (max-width:767px) { .main .lineup-text { font-size:.65rem } } .main .lineup-cta { font-weight:400; font-size:18px; font-size:.9rem; line-height:1; text-align:left; text-decoration:none; color:#333; margin:1.22222222em auto -0.16666667em; display:inline-block } .main .lineup-cta:hover { color:#000 } .main .lineup-cta .glyphicon-chevron-right { font-size:21px; margin-left:-4px; vertical-align:text-bottom } @media screen and (max-width:767px) { .main .lineup-cta { font-size:.8rem } } .modal-video-player { opacity:1; filter:alpha(opacity=100) } .modal-video-player.active { display:block; visibility:visible } .modal-video-player.active video { display:block } .modal-video-player video { display:none; position:absolute; left:0; top:0; width:100%; height:100% } .section-techspec { display:none; position:relative; overflow:hidden; padding-bottom:3.47222222%; background-color:#f5f5f5; z-index:1 } .section-techspec .section-content { position:relative; width:68.33333333%; padding-bottom:40px } @media screen and (max-width:767px) { .section-techspec { padding-bottom:30px } .section-techspec .section-content { width:100%; padding-left:0; padding-right:0 } } .techspec-hero-image { position:relative; padding-top:72.15447154% } .techspec-hero-image img { position:absolute; left:-100%; right:-100%; top:-100%; bottom:-100%; margin:auto; height:137.6056338% } @media screen and (max-width:767px) { .techspec-hero-image img { width:120%; height:auto } } .techspec-cta { font-weight:400; font-size:16px; font-size:.8rem; line-height:2.5; text-decoration:none; color:#fff; position:absolute; left:50%; bottom:0; margin:auto; padding:0 2.1875em; z-index:1; background-color:#333; -webkit-font-smoothing:antialiased; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px } .techspec-cta:hover { background-color:#000 } .rc-icon-remove-circle, .modal-video-player .rc-icon-remove-circle { position:relative; right:auto; top:auto; display:inline-block; width:25px; height:25px; overflow:hidden } .rc-icon-remove-circle:before, .modal-video-player .rc-icon-remove-circle:before { content:""; position:absolute; left:0; top:0; width:100%; height:200%; background:url(../images/icon_remove_circle.svg) no-repeat center top } .rc-icon-remove-circle:hover:before, .modal-video-player .rc-icon-remove-circle:hover:before { top:auto; bottom:0 } .experience .experience-headline { font-weight:400 } .modal .rc-button-close { position:absolute; right:25px; top:25px; width:25px; height:25px; display:none; } .rc-paddle { font-size:80px; margin-top:-40px; width:30px; height:80px; color:#999; -webkit-text-stroke:.2px #999; } .rc-paddle:before { -webkit-transform:none; -moz-transform:none; -ms-transform:none; transform:none } .rc-paddle:hover { color:#000; -webkit-text-stroke:.2px #000 } .modal-gallery-item[data-zoom-in] img { cursor:url(../images/icon_roupe.png),auto } .modal-gallery .dotnav { bottom:0 } @media screen and (max-width:767px) { .modal-gallery .dotnav { font-size:0; line-height:0; padding:0 20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } } .modal-gallery .dotnav-item { margin-left:10px; width:10px; height:10px } .modal-gallery .dotnav-item:first-child { margin-left:0 } .modal-gallery .dotnav-item:hover .dotnav-dot { width:7px; height:7px } @media screen and (max-width:767px) { .modal-gallery .dotnav-item { margin-top:10px } } .modal-gallery .dotnav-dot { width:6px; height:6px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } .modal-gallery .zoomed-image { position:absolute; left:0; top:0; display:none; width:100%; height:100%; background-color:#fff; overflow:hidden; z-index:4 } .modal-gallery .zoomed-image.zoomed-image-active { display:block } .modal-gallery .zoomed-image img { position:absolute; left:0; top:0; width:400%; overflow:hidden; cursor:url(../images/icon_roupe.png) 15 15,auto } @media screen and (max-width:767px) { .modal-gallery .zoomed-image img { width:600% } } .modal-content .rc-button-close { z-index:5 } #specifications.accordion-transition, #td-17kvx.accordion-transition, #td-17kv.accordion-transition, #td-17kv-l.accordion-transition, #td-17k-l.accordion-transition { position:fixed !important; left:0; right:0; width:100% } @media screen and (max-width:767px) { #td-17kvx, #td-17kv, #td-17kv-l, #td-17k-l { padding-top:0 !important } } .spec-nav { font-size:0; line-height:0; text-align:center; position:relative; padding:0; z-index:1 } @media screen and (max-width:767px) { .spec-nav { padding:0 } } .spec-nav-cta { font-weight:400; font-size:13px; font-size:.65rem; line-height:3.84615385; text-decoration:none; color:#333; margin:0; display:inline-block; min-width:150px; padding:0; -webkit-font-smoothing:antialiased } .spec-nav-cta:hover, .spec-nav-cta.active { background-color:#f2f2f2 } @media screen and (max-width:767px) { .spec-nav-cta { margin:0; width:25%; min-width:0 } } .spec-hero { padding:100px 0 80px } .spec-hero .spec-hero-eyebrow { font-weight:600; font-size:32px; font-size:1.6rem; line-height:1; color:#333; margin:-0.15625em 0 -0.1875em; -webkit-font-smoothing:antialiased } .spec-hero .spec-hero-headline { font-weight:600; font-size:40px; font-size:2rem; line-height:1.25; letter-spacing:0; text-transform:none; color:#333; margin:.45em 0 .55em; -webkit-font-smoothing:antialiased } .spec-hero .rc-more-box { font-size:0; line-height:0; text-align:center; margin-top:80px } .spec-hero .rc-cta { background-color:transparent; border:1px solid #454545 } .spec-hero .rc-cta-text { font-weight:100; color:#fff } @media screen and (max-width:767px) { .spec-hero { padding:60px 25px 60px } .spec-hero .spec-hero-eyebrow { font-weight:600; font-size:20px; font-size:1rem } .spec-hero .spec-hero-headline { font-size:24px; font-size:1.2rem; line-height:1.16666667; margin-bottom:.625em } .spec-hero .spec-hero-title { font-size:30px; font-size:1.5rem } .spec-hero .spec-hero-lead-title { font-size:30px; font-size:1.5rem } .spec-hero .rc-more-box { margin-top:50px } .spec-hero .rc-more-box .rc-cta { margin-left:0 } } .spec-hero-copy { text-align:center; position:relative; margin:0 auto; max-width:800px; z-index:1; -webkit-transform:none; -moz-transform:none; -ms-transform:none; transform:none } @media screen and (max-width:767px) { .spec-hero-copy { padding:0 } } .spec-hero-text, .spec-hero-text:last-child { font-weight:300; font-size:18px; font-size:.9rem; line-height:1.44444444; letter-spacing:0; text-align:center; color:#333; margin:-0.38888889em 0 -0.38888889em; -webkit-font-smoothing:antialiased } @media screen and (max-width:767px) { .spec-hero-text, .spec-hero-text:last-child { font-size:15px; font-size:.75rem } } .spec-hero-image { position:relative; margin:0 auto 100px; padding:287px 0 0; height:auto } .spec-hero-image img, .spec-hero-image video { position:absolute; left:-100%; right:-100%; top:-27.17770035%; margin:auto; width:1120px; height:auto; -webkit-transform:none; -moz-transform:none; -ms-transform:none; transform:none } @media screen and (max-width:767px) { .spec-hero-image { text-align:center; margin-bottom:60px; padding-top:29.16666667% } .spec-hero-image img { width:113.82113821% } } .spec-hero-cta { text-align:center; display:inline-block; min-width:160px } .spec-hero-cta .rc-icon, .spec-hero-cta .spec-hero-cta-text { cursor:pointer } .spec-hero-cta .rc-icon-plus-circle { font-size:35px; text-align:center; display:block; width:41px; height:41px } @media screen and (max-width:767px) { .spec-hero-cta { min-width:130px } } .spec-hero-cta-text { font-weight:300; font-size:15px; font-size:.75rem; line-height:1; color:#333; margin:.86666667em auto -0.2em; display:block; -webkit-font-smoothing:antialiased } .spec-section { margin:0 auto; max-width:984px; border-top:1px solid #ccc } .spec-section .rc-icon-plus-circle { font-weight:100; font-size:26px; line-height:.92307692; width:25px; height:25px; cursor:pointer } .spec-section .rc-icon-plus-circle:before { left:.5px } .spec-section .accordion-body { position:relative; overflow:hidden; transition-duration:1.3s; -webkit-transition-duration:1.3s; -moz-transition-duration:1.3s } .spec-section .accordion-body.open { transition-duration:.4s; -webkit-transition-duration:.4s; -moz-transition-duration:.4s } .spec-section .accordion-body .rc-icon-plus-circle { margin:0 auto; display:block } @media screen and (max-width:767px) { .spec-section .accordion-body { padding:0 } } .spec-section .accordion-active .rc-icon-plus-circle, .spec-section .rc-icon-plus-circle.accordion-active { background-color:#ccc; border-color:#ccc; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg) } .spec-section .accordion-active .rc-icon-plus-circle:hover, .spec-section .rc-icon-plus-circle.accordion-active:hover { color:#fff; background-color:#000; border-color:#000 } .spec-section-gallery+.spec-section { margin-top:80px } .spec-section-header { position:relative; margin-bottom:-1px; padding:49px 0; border-bottom:1px solid #ccc } .spec-section-header .rc-icon-plus-circle { position:absolute; right:10px; top:50%; margin-top:-12.5px } @media screen and (max-width:767px) { .spec-section-header { padding:29px 15px } } .spec-section-downloads .spec-section-header { border-bottom-width:0 } .spec-section-support .spec-section-header { border-bottom-width:0 } .spec-section-movie .accordion-body { position:relative; margin-top:-1px; z-index:1 } .spec-header { text-align:center; padding:100px 0 50px } @media screen and (max-width:767px) { .spec-header { padding-top:80px; padding-bottom:80px } } .main .spec-header-title, .main .spec-header-title:first-child { font-weight:600; font-size:32px; font-size:1.6rem; line-height:1; letter-spacing:0; text-transform:none; color:#000; margin:-0.15625em 0 -0.15625em; padding:0; -webkit-font-smoothing:antialiased } @media screen and (max-width:767px) { .main .spec-header-title, .main .spec-header-title:first-child { font-size:28px; font-size:1.4rem } } .spec-size { padding:0 30px 30px } .spec-size .rc-color-switcher { margin-top:25px } @media screen and (max-width:767px) { .spec-size { padding:15px 15px 0 } } .spec-size-image { position:relative; padding-top:61.5942029%; overflow:hidden } .spec-size-image img { position:absolute; left:0; top:0; width:100% } @media screen and (max-width:767px) { .spec-size-image { margin-top:0 } } .spec-section-gallery { margin-top:75px; border-top-width:0 } @media screen and (max-width:767px) { .spec-section-gallery { margin-top:50px } } .spec-details { margin:auto -15px; width:auto } .spec-detail { width:100%; padding:0 15px; float:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } .spec-detail-image { position:relative; padding-top:66.66666667%; overflow:hidden; cursor:pointer } .spec-detail-image .rc-icon-new-window-circle { position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; border-color:#fff } .spec-detail-image .rc-icon-new-window-circle:before { top:auto; bottom:0 } .spec-detail-image .rc-icon-new-window-circle:hover { background-color:#fff } .spec-detail-image .rc-icon-new-window-circle:hover:before { top:0; bottom:auto } .spec-detail-image img { position:absolute; left:0; top:0; height:100% } .spec-detail-copy { padding:19px 0 6px } .main .spec-detail-text { font-weight:400; font-size:14px; font-size:.7rem; line-height:1; color:#000; margin:0 } .spec-feature-row { padding:48px 0 49px; border-bottom:1px solid #ccc } .spec-feature-row .col { text-align:left; width:250px; padding-right:100px; float:left } .spec-feature-row .col+.col { width:634px; padding-right:0 } .spec-feature-row.spec-feature-row-lastchild { padding-bottom:0; border-bottom-width:0 } @media screen and (max-width:767px) { .spec-feature-row { padding-left:15px; padding-right:15px } .spec-feature-row .col { width:auto; float:none; padding:0 15px } .spec-feature-row .col+.col { margin-top:20px; width:auto; padding:0 } } .main .spec-section-header-title { font-weight:600; font-size:32px; font-size:1.6rem; line-height:1; letter-spacing:0; text-transform:none; color:#333; margin:-0.125em auto -0.15625em; -webkit-font-smoothing:antialiased } @media screen and (max-width:767px) { .main .spec-section-header-title { font-size:1.1rem } } .main .spec-feature-headline { font-weight:600; font-size:22px; font-size:1.1rem; line-height:1.27272727; text-align:left; text-transform:none; color:#333; margin:-0.18181818em 0; -webkit-font-smoothing:antialiased } .main .spec-feature-text { font-weight:300; font-size:16px; font-size:.8rem; line-height:1.5; color:#333; margin-top:-0.1875em; margin-bottom:-0.4375em; -webkit-font-smoothing:antialiased } @media screen and (max-width:767px) { .main .spec-feature-text { font-size:15px; font-size:.75rem; padding:0 15px } } .spec-feature-image { position:relative; padding-top:63.09148265% } .spec-feature-image img { position:absolute; left:0; top:0; width:100% } .spec-feature-image .rc-icon-play-circle { position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; z-index:1 } .spec-section-movie .spec-feature-image { padding-top:56.30914826% } .spec-feature-text+.spec-feature-image { margin-top:35px } .spec-dummy-image img { width:100%; vertical-align:top } .spec-section-movie .spec-section-header { border-bottom-width:0 } .spec-section-movie .spec-feature-row { position:relative; background-color:#f2f2f2 } .spec-section-movie .spec-feature-row { padding:0; border-bottom-width:0 } .spec-section-movie .spec-feature-row+.spec-feature-row { margin-top:30px } .spec-section-movie .col:first-child { padding:50px } .spec-section-movie .spec-feature-headline { font-size:20px; font-size:1rem; line-height:1.3; color:#666; margin:-0.3em 0 -0.35em } .spec-section-movie .rc-icon-play-circle { width:41px; height:41px; margin-top:25px } @media screen and (max-width:767px) { .spec-section-movie .spec-feature-row { margin-left:15px; margin-right:15px; padding-top:51.73333333% } .spec-section-movie .spec-feature-headline { font-size:16px; font-size:.8rem } .spec-section-movie .col+.col { position:absolute; left:0; top:0; margin-top:0; width:100% } .spec-section-movie .col:first-child { padding:25px } } .spec-container { display:none; opacity:0; filter:alpha(opacity=0); transition-duration:.5s; -webkit-transition-duration:.5s; -moz-transition-duration:.5s } .spec-container.show, .spec-container.hidden { display:block } .spec-container.show { opacity:1; filter:alpha(opacity=100); transition-delay:.5s; -webkit-transition-delay:.5s; -moz-transition-delay:.5s; transition-duration:1.5s; -webkit-transition-duration:1.5s; -moz-transition-duration:1.5s } .spec-container.hidden { opacity:0; filter:alpha(opacity=0); transition-delay:0s; -webkit-transition-delay:0s; -moz-transition-delay:0s; transition-duration:.5s; -webkit-transition-duration:.5s; -moz-transition-duration:.5s } .accordion-trigger { padding:100px 0 50px; opacity:0; filter:alpha(opacity=0); transition-duration:.5s; -webkit-transition-duration:.5s; -moz-transition-duration:.5s } @media screen and (max-width:767px) { .accordion-trigger { padding:60px 0 30px } } .open .accordion-trigger { opacity:1; filter:alpha(opacity=100) } .recommend-strip { margin:0 -10px 100px } .recommend-strip-box { width:50%; padding:0 10px; float:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } @media screen and (max-width:767px) { .recommend-strip-box { margin-top:5px; width:100% } .recommend-strip-box:first-child { margin-top:0 } } .recommend-strip-image { position:relative; padding-top:600px; background-color:#f2f2f2; overflow:hidden } .recommend-strip-image img { position:absolute; left:50%; top:50%; margin:-50px 0 0; max-width:282px; max-height:300px; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%) } @media screen and (max-width:767px) { .recommend-strip-image { padding-top:100% } .recommend-strip-image img { width:auto !important; height:auto !important; max-height:210px } } .recommend-strip-copy { text-align:center; position:absolute; left:0; bottom:80px; width:100%; padding:0 20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } @media screen and (max-width:767px) { .recommend-strip-copy { bottom:40px } } .section-specifications { margin-bottom:80px; max-width:none; padding:80px 0 100px; border-top-width:0; background-color:#f2f2f2 } .section-specifications .section-content { width:auto } .section-specifications #specs .section, .section-specifications .spec-section-header-title { font-weight:600; font-size:22px; font-size:1.1rem; line-height:1; margin:0; width:auto; padding:1.22727273em 0; float:none } .section-specifications .spec-section-header { padding:0; border-top:1px solid #ccc; border-bottom-width:0 } .section-specifications #specs .section:first-child { display:none } .section-specifications #specs dt, .section-specifications #specs dd { margin-left:0 } @media screen and (max-width:767px) { .section-specifications { margin-bottom:60px; padding:60px 0 40px } } .section-specifications-content { display:table; margin:0 auto; max-width:1180px; padding:0 50px } @media screen and (max-width:767px) { .section-specifications-content { display:block; padding:0 20px } } .specifications-images { display:table-cell; vertical-align:top } @media screen and (max-width:767px) { .specifications-images { display:block } } .specifications-image { position:relative; margin-top:80px; cursor:url(../images/icon_roupe.png) 15 15,auto } .specifications-image:first-child { margin-top:0 } .specifications-image img { width:100%; vertical-align:top } .specifications-image .rc-icon-roupe { position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; display:none; width:26px; height:26px } .specifications-text { width:634px; padding-left:80px; display:table-cell; vertical-align:top } @media screen and (max-width:767px) { .specifications-text { margin-top:30px; width:auto; display:block; padding-left:0 } } .main .recommend-strip-text { font-weight:300; font-size:16px; font-size:.8rem; line-height:1.75; color:#000; margin:-0.5em 0 } .main .next-router { position:relative; margin-top:140px; padding-top:0; padding-bottom:0; border-top-width:0 } @media screen and (max-width:767px) { .main .next-router { margin-top:60px } } .main .next-router-image { position:relative; padding-top:34.72222222%; background-color:#000 } .main .next-router-image img { position:absolute; left:-100%; right:-100%; top:0; margin:auto; width:100%; vertical-align:top } @media screen and (max-width:767px) { .main .next-router-image { padding-top:34.72222222%; background-color:#000 } .main .next-router-image img { min-width:0 } } .main .next-router-copy { line-height:0; text-align:left; position:absolute; left:0; right:0; top:50%; margin:auto; width:984px; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%) } @media screen and (max-width:767px) { .main .next-router-copy { text-align:center; position:static; width:auto; padding:20px 15px 50px; -webkit-transform:none; -moz-transform:none; -ms-transform:none; transform:none } .main .next-router-copy .rc-cta { width:auto } } .main .next-router-headline { font-weight:600; font-size:32px; font-size:1.6rem; line-height:1.3125; text-transform:none; text-align:left; color:#000; margin:-0.25em auto .6875em; -webkit-font-smoothing:antialiased } @media screen and (max-width:767px) { .main .next-router-headline { font-size:20px; font-size:1rem; text-align:center } } .main .next-router-cta { font-weight:400; font-size:14px; font-size:.7rem; line-height:1; color:#000; padding:.28571429em 1em; border:1px solid #000; border-color:rgba(0,0,0,0.5); vertical-align:top; -webkit-font-smoothing:antialiased; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px } .main .next-router-cta:hover { color:#fff; background-color:#000 } #specs { border-bottom-width:0 } #specs dt { font-weight:600; font-size:18px; font-size:.9rem; line-height:1.33333333; color:#333; margin-left:250px; margin-bottom:.38888889em; width:auto; padding:2.61111111em 0 0; clear:none; float:none; -webkit-font-smoothing:antialiased } #specs .section { font-weight:600; font-size:22px; font-size:1.1rem; line-height:1.27272727; color:#333; margin-left:0; margin-bottom:0; width:250px; padding:1.45454545em 1.45454545em 0 0; float:left; -webkit-font-smoothing:antialiased; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } #specs dd, #specs .comment { font-weight:300; font-size:16px; font-size:.8rem; line-height:1.625; color:#333; margin-left:250px; margin-bottom:2.625em; min-height:0; padding:0; border-width:0 } #specs .comment { margin-left:0; padding-top:1.25em; margin-bottom:0; border-top-width:1px } #specs .comment+.comment { border-top-width:0 } #specs .comment:last-child { margin-bottom:1.875em } #specs .comment img { margin-left:0 } @media screen and (max-width:767px) { #specs { padding:0 } #specs dt { text-align:left; margin-left:0; margin-bottom:.5em; padding:.83333333em 0 0 } #specs dd, #specs .comment { margin-bottom:.83333333em } #specs .section { text-align:left; width:auto; padding:1.45454545em 1.45454545em 0 0; float:none } } .main .downloads, .main .support { min-height:0; padding:0; background-color:transparent } .main .downloads .contentnav, .main .support .contentnav, .main .downloads h2, .main .support h2 { display:none } .main .downloads h4, .main .support h4 { font-weight:600; font-size:22px; font-size:1.1rem; line-height:1; text-transform:none; color:#333; margin:-0.09090909em auto 1.18181818em; -webkit-font-smoothing:antialiased } .main .downloads>section, .main .support>section { width:auto; padding:50px; background-color:#f2f2f2; border-top-width:0 !important; border-bottom-width:0 !important } .main .downloads>section+section, .main .support>section+section { margin-top:4px } .main .downloads li, .main .support li { padding:20px } .main .downloads li+li, .main .support li+li { margin-top:20px } .main .downloads h5, .main .support h5 { display:block; position:relative; margin:-0.25em auto -0.375em } .main .downloads h5 a, .main .support h5 a { padding:0 } .main .downloads h5 a:hover:after, .main .support h5 a:hover:after { background-position:center bottom } .main .downloads h5 a:before, .main .support h5 a:before { content:none } .main .downloads h5 a:after, .main .support h5 a:after { content:""; position:absolute; right:0; top:0; bottom:0; margin:auto; width:19px; height:19px; background:url(../images/rc_icon_arrow_right_circle_large.svg) no-repeat center top } .main .downloads p, .main .support p, .main .downloads p:last-child, .main .support p:last-child { font-weight:300; font-size:16px; font-size:.8rem; line-height:1.625; color:#333; padding:0; margin:-0.4375em auto -0.5em; background-color:transparent } .main .downloads p a, .main .support p a, .main .downloads p:last-child a, .main .support p:last-child a { color:inherit; text-decoration:underline } @media screen and (max-width:767px) { .main .downloads, .main .support { padding:0 15px } .main .downloads>section, .main .support>section { padding:25px 15px } .main .downloads h4, .main .support h4 { font-size:.95rem } .main .downloads h5 a, .main .support h5 a { padding-right:30px } .main .downloads li+li, .main .support li+li { margin-top:10px } } .carousel-current .dotnav-dot { width:7px; height:7px; /* border:1px solid #000 */ } .product-gallery { padding-top:150px; padding-bottom:0; display:none; /* background-color:#000; */ border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } .product-gallery .rc-cta { color:#fff } .product-gallery .rc-button-close { color:#fff } .product-gallery .rc-button-close:hover { color:#919696 } @media screen and (max-width:767px) { .product-gallery { padding:80px 0 0 } .product-gallery img { width:110% } .product-gallery .rc-more-box { background-color:#fff } .product-gallery .rc-more-box .rc-cta { color:#000 } } .product-gallery-control { margin-top:150px } @media screen and (max-width:767px) { .product-gallery-control { margin-top:80px } } .product-tile { width:auto } .product-tile ul { margin:0; width:auto; display:flex; flex-flow:row wrap; justify-content:flex-start } .product-tile ul:before, .product-tile ul:after { content:none } .product-tile li { margin:0; width:328px; padding-bottom:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } .product-tile li:nth-child(3n) { width:328px; border-right:1px solid #ccc } .product-tile li:nth-child(3n+1) { border-left:1px solid #ccc } .product-tile li:last-child { border-bottom:1px solid #ccc; clear:both } .product-tile li figure { width:auto; padding:50px 30px 40px } .product-tile li .product-image { position:relative; margin:0 auto; display:block; width:250px; height:200px; padding:0 } .product-tile li .product-image img { position:absolute; left:-100%; top:-100%; right:-100%; bottom:-100%; margin:auto } .product-tile li figcaption { text-align:center; padding:50px 0 0 !important } .product-tile li figcaption h3 { font-weight:600; font-size:24px; font-size:1.2rem; line-height:1; text-align:inherit; color:#000; margin:-0.08333333em auto .70833333em; -webkit-font-smoothing:antialiased } .product-tile li figcaption h3 small { font-weight:inherit; font-size:16px; font-size:.8rem; line-height:1; text-align:inherit; color:#808080; margin-top:.3125em } .product-tile li figcaption p { font-weight:300; font-size:16px; font-size:.8rem; line-height:1.5; text-align:center; color:#333; margin:-0.375em auto -0.625em } .product-tile li figcaption .viewmore { display:none } @media screen and (max-width:767px) { .product-tile li { width:100%; border-left-width:0; border-right-width:0 } .product-tile li:nth-child(3n) { width:100%; border-right-width:0 } } .modal-gallery-360 .modal-content { background-color:#000 } .modal-gallery-360 .rc-button-close { color:#fff } .modal-gallery-360 .rc-button-close:hover { color:#919696 } .social-web { border-top:none } .social-web-background { background-image:url(../images/social_web_background.jpg) } .modal-timeline .rc-button-close { top:25px; right:25px } @media screen and (max-width:767px) { .modal-gallery .modal-content { min-height:0 } } @media screen and (max-width:767px) { .modal-gallery .dotnav { bottom:30px } } #guide { top:2px } /* 列表排版 css end*/