@charset "UTF-8";
@font-face {
  font-family: 'Nobel-Regular';
  src: url("../font/Nobel-Regular.eot?#iefix") format("embedded-opentype"), url("../font/Nobel-Regular.woff") format("woff"), url("../font/Nobel-Regular.ttf") format("truetype"), url("../font/Nobel-Regular.svg#Nobel-Regular") format("svg");
  font-weight: normal;
  font-style: normal; }
html, body {
  position: relative;
  font-family: 'Nobel-Regular', "微軟正黑體";
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #FFF;
  color: #FFF; }

img {
  width: 100%;
  height: auto;
  vertical-align: top; }

input,
select {
  border-radius: 0; }

.btn, .logo, .testdriving-btn, .menu-w .menu, .detail-panel .detail-btn, .detail-more-btn, .testdriving-panel .close-btn, .testdriving-panel .testdriving-panel-content .submit-btn,
.testdriving-panel .testdriving-panel-content .back-btn {
  cursor: pointer; }

.wh100p, .wrapper, .content, .not-ie8 .page .page-bg, .patterns .title-w, .patterns .title-w .title, .patterns .page-title-w, .desktop .detail-panel, .detail-panel .bg, .detail-panel .detail-panel-content .detail-list-w .detail-list .detail-item .detail-item-video-btn, .video-panel, .testdriving-panel, .desktop.not-ie8 .testdriving-panel .bg,
.tablet.landscape.not-ie8 .testdriving-panel .bg, .desktop .testdriving-panel > .scroll-content,
.tablet.landscape .testdriving-panel > .scroll-content {
  width: 100%;
  height: 100%; }

.center-w {
  width: 100%;
  text-align: center; }

.template {
  display: none; }

sup {
  vertical-align: super;
  font-size: 50%; }

.wrapper {
  display: none;
  overflow: hidden; }

.device {
  display: none; }

.top-bar {
  position: fixed;
  left: 0;
  top: 0;
  height: 40px;
  width: 100%;
  background-color: #FFF; }

.logo {
  position: fixed;
  width: 150px;
  top: 18px;
  left: 20px; }
  .logo .image-k {
    display: none; }
  .logo.logo-k .image-k {
    display: block; }
  .logo.logo-k .image-w {
    display: none; }

.tablet[testdriving="1"] .logo .image-k {
  display: block; }
.tablet[testdriving="1"] .logo .image-w {
  display: none; }

.desktop .logo,
.desktop .testdriving-btn {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all 0.75s ease;
  transition: all 0.75s ease;
  -webkit-transition-delay: 0;
  transition-delay: 0; }
.desktop body[data-transing="1"] .logo {
  -webkit-transform: translate(20px, 10px);
  -ms-transform: translate(20px, 10px);
  transform: translate(20px, 10px);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transition-delay: 0;
  transition-delay: 0; }

.testdriving-btn {
  display: block;
  position: fixed;
  width: 18.47222%;
  min-width: 180px;
  max-width: 266px;
  left: 0;
  bottom: 0; }
  .testdriving-btn > div {
    position: absolute; }
  .testdriving-btn .testdriving-btn-bg {
    width: 100%;
    left: 0;
    bottom: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transition-delay: 0;
    transition-delay: 0; }
  .testdriving-btn .testdriving-btn-text {
    width: 79.32331%;
    left: 2.63158%;
    bottom: 0;
    filter: alpha(opactiy=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transition-delay: 0;
    transition-delay: 0; }
  .testdriving-btn:hover .testdriving-btn-bg {
    width: 105%; }
  .testdriving-btn:hover .testdriving-btn-text {
    filter: alpha(opactiy=75);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    -moz-opacity: 0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75; }

.m-testdriveing-btn {
  position: fixed;
  width: 87px;
  top: 8px;
  right: 55px; }

.tablet .logo,
.mobile .logo {
  width: 108px;
  top: 10px;
  left: 7px; }
.tablet .testdriving-btn,
.mobile .testdriving-btn {
  width: 223px; }

.car-note {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 12px;
  color: #FFF; }

.desktop .car-note {
  right: 20px; }

.rot-hint {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/rot-hint.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 120px 130px;
  background-color: rgba(0, 0, 0, 0.8); }

.tablet.landscape .rot-hint,
.mobile.landscape .rot-hint {
  display: block; }

.mobile .visible-m {
  display: block; }
.mobile .hidden-m {
  display: none; }
.mobile .visible-t {
  display: none; }
.mobile .hidden-t {
  display: block; }
.mobile .visible-d {
  display: none; }
.mobile .hidden-d {
  display: block; }

.tablet .visible-m {
  display: none; }
.tablet .hidden-m {
  display: block; }
.tablet .visible-t {
  display: block; }
.tablet .hidden-t {
  display: none; }
.tablet .visible-d {
  display: none; }
.tablet .hidden-d {
  display: block; }

.desktop .visible-m {
  display: none; }
.desktop .hidden-m {
  display: block; }
.desktop .visible-t {
  display: none; }
.desktop .hidden-t {
  display: block; }
.desktop .visible-d {
  display: block; }
.desktop .hidden-d {
  display: none; }

.landscape .visible-landscape {
  display: block; }
.landscape .visible-portrait {
  display: none; }

.portrait .visible-landscape {
  display: none; }
.portrait .visible-portrait {
  display: block; }

.menu-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%; }
  .menu-panel .hitarea {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background-image: url("../images/000000-0.png");
    background-repeat: repeat; }
  .menu-panel .menu-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background-color: #000; }
    .menu-panel .menu-btn .open {
      display: block; }
    .menu-panel .menu-btn .close {
      display: none; }
  .menu-panel.ON .menu-btn .open {
    display: none; }
  .menu-panel.ON .menu-btn .close {
    display: block; }

.menu-w {
  position: absolute;
  right: -130px;
  top: 0;
  width: 144px;
  height: 100%;
  background-image: url("../images/000000-0.4.png");
  background-repeat: repeat; }
  .menu-w .menu {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 45px;
    letter-spacing: 2px;
    -webkit-transform: scale3d(0.75, 0.75, 1);
    -ms-transform: scale3d(0.75, 0.75, 1);
    transform: scale3d(0.75, 0.75, 1);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transition-delay: 0;
    transition-delay: 0; }
  .menu-w .menu[data-name="index"] {
    margin-top: 84px; }
  .menu-w .menu[data-name="style"] {
    margin-top: 28px; }
  .menu-w .menu[data-name="music"] {
    margin-top: -28px; }
  .menu-w .menu[data-name="power"] {
    margin-top: -84px; }
  .menu-w .menu[data-name="safety"] {
    margin-top: -140px; }
  .menu-w .menu[data-name="testdriving"] {
    margin-top: -196px; }
  .menu-w .bar {
    position: absolute;
    width: 150px;
    height: 45px;
    top: 50%;
    margin-top: 9999px;
    right: 0;
    background-color: #000;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transition-delay: 0;
    transition-delay: 0; }

body[data-current-page="index"] .menu-w .bar {
  margin-top: 84px; }
body[data-current-page="index"][data-transing="0"] .menu[data-name="index"] {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1); }

body[data-current-page="style"] .menu-w .bar {
  margin-top: 28px; }
body[data-current-page="style"][data-transing="0"] .menu[data-name="style"] {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1); }

body[data-current-page="music"] .menu-w .bar {
  margin-top: -28px; }
body[data-current-page="music"][data-transing="0"] .menu[data-name="music"] {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1); }

body[data-current-page="power"] .menu-w .bar {
  margin-top: -84px; }
body[data-current-page="power"][data-transing="0"] .menu[data-name="power"] {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1); }

body[data-current-page="safety"] .menu-w .bar {
  margin-top: -140px; }
body[data-current-page="safety"][data-transing="0"] .menu[data-name="safety"] {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1); }

.tablet .menu-panel,
.mobile .menu-panel {
  width: 100%;
  height: 40px;
  -webkit-transition: height 0.3s ease;
  transition: height 0.3s ease;
  -webkit-transition-delay: 0;
  transition-delay: 0; }
  .tablet .menu-panel.ON,
  .mobile .menu-panel.ON {
    height: 100%; }
    .tablet .menu-panel.ON .menu-w,
    .mobile .menu-panel.ON .menu-w {
      height: 100%; }
.tablet .menu-w,
.mobile .menu-w {
  top: 40px;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  background-color: #000;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transition-delay: 0;
  transition-delay: 0; }
  .tablet .menu-w .menu,
  .mobile .menu-w .menu {
    font-size: 20px; }

.mobile .menu-btn {
  background-color: #636D7F; }

.content {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden; }
  .content .pages {
    position: absolute;
    left: 0;
    top: -400%;
    width: 100%;
    height: 500%; }
  .content .page {
    position: relative;
    width: 100%;
    height: 20%;
    overflow: hidden;
    background-size: cover;
    background-position: center center; }
    .content .page .page-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center center; }

.ie8 .page .page-bg {
  width: 1920px;
  height: 1080px; }

.desktop .page .page-bg {
  background-position: bottom;
  -webkit-transform: scale3d(0.95, 0.95, 1);
  -ms-transform: scale3d(0.95, 0.95, 1);
  transform: scale3d(0.95, 0.95, 1);
  width: calc(100% + 40px);
  height: calc(100% + 20px);
  left: -20px;
  top: -10px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transition-delay: 0;
  transition-delay: 0;
  -webkit-transform: translate(0, 0, 0);
  -ms-transform: translate(0, 0, 0);
  transform: translate(0, 0, 0); }
.desktop body[data-transing='0'][data-current-page="index"] .page[data-name="index"] .page-bg {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: all 5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 5s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: 0;
  transition-delay: 0; }
.desktop body[data-transing='0'][data-current-page="style"] .page[data-name="style"] .page-bg {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: all 5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 5s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: 0;
  transition-delay: 0; }
.desktop body[data-transing='0'][data-current-page="music"] .page[data-name="music"] .page-bg {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: all 5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 5s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: 0;
  transition-delay: 0; }
.desktop body[data-transing='0'][data-current-page="power"] .page[data-name="power"] .page-bg {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: all 5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 5s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: 0;
  transition-delay: 0; }
.desktop body[data-transing='0'][data-current-page="safety"] .page[data-name="safety"] .page-bg {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: all 5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 5s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: 0;
  transition-delay: 0; }
.desktop.ie body[data-transing='0'][data-current-page="index"] .page[data-name="index"] .page-bg {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: 0;
  transition-delay: 0; }
.desktop.ie body[data-transing='0'][data-current-page="style"] .page[data-name="style"] .page-bg {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: 0;
  transition-delay: 0; }
.desktop.ie body[data-transing='0'][data-current-page="music"] .page[data-name="music"] .page-bg {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: 0;
  transition-delay: 0; }
.desktop.ie body[data-transing='0'][data-current-page="power"] .page[data-name="power"] .page-bg {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: 0;
  transition-delay: 0; }
.desktop.ie body[data-transing='0'][data-current-page="safety"] .page[data-name="safety"] .page-bg {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: 0;
  transition-delay: 0; }
.desktop body[data-transing='1'] .page-bg {
  -webkit-transform: scale3d(0.95, 0.95, 1);
  -ms-transform: scale3d(0.95, 0.95, 1);
  transform: scale3d(0.95, 0.95, 1); }

.ani-breath {
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite; }

@-webkit-keyframes breath {
  0%, 100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1);
    -ms-transform: scale3d(1.05, 1.05, 1);
    transform: scale3d(1.05, 1.05, 1); } }
@keyframes breath {
  0%, 100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1);
    -ms-transform: scale3d(1.05, 1.05, 1);
    transform: scale3d(1.05, 1.05, 1); } }
.breath {
  -webkit-animation-name: breath;
  animation-name: breath; }

.tablet .content .pages,
.mobile .content .pages {
  position: relative;
  top: 0; }
  .tablet .content .pages .page,
  .mobile .content .pages .page {
    overflow-y: auto; }
    .tablet .content .pages .page .page-bg,
    .mobile .content .pages .page .page-bg {
      display: none;
      background-color: rgba(1, 1, 1, 0.5); }

.tablet.landscape .content .page[data-name="index"] {
  background-position: center 85%; }
.tablet.landscape .content .page[data-name="style"] {
  background-position: center 65%; }
.tablet.landscape .content .page[data-name="music"] {
  background-position: center 50%; }
.tablet.landscape .content .page[data-name="power"] {
  background-position: center 35%; }
.tablet.landscape .content .page[data-name="safety"] {
  background-position: center 80%; }

.scrollhint {
  position: absolute;
  width: 62px;
  top: 3%;
  left: 50%;
  margin-left: -31px; }
  .scrollhint > div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%; }
  .scrollhint > div > div {
    position: absolute;
    left: 50%; }
  .scrollhint .mouse-w {
    display: none;
    top: 5px; }
    .scrollhint .mouse-w .mouse {
      width: 62px;
      top: 15px;
      margin-left: -31px; }
    .scrollhint .mouse-w .arrow {
      width: 7px;
      top: 0;
      margin-left: -4px; }
    .scrollhint .mouse-w .arrow2 {
      top: 5px; }
  .scrollhint .arrow-w {
    display: none;
    cursor: pointer; }
    .scrollhint .arrow-w .arrow-part1 {
      width: 52px;
      margin-left: -26px; }
    .scrollhint .arrow-w .arrow-part2 {
      width: 42px;
      margin-left: -21px;
      top: 10px; }

.scrollhint-m {
  position: fixed;
  left: 50%;
  top: 65px;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg); }
  .scrollhint-m .arrow-part1,
  .scrollhint-m .arrow-part2 {
    position: absolute; }
  .scrollhint-m .arrow-part1 {
    width: 26px;
    top: 0;
    left: 0;
    margin-left: -13px; }
  .scrollhint-m .arrow-part2 {
    width: 24px;
    top: 5px;
    left: 0;
    margin-left: -12px; }

.desktop .scrollhint-m {
  display: none; }

.tablet body[data-current-page="safety"] .scrollhint-m,
.mobile body[data-current-page="safety"] .scrollhint-m {
  display: none; }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite; }

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateY(0); }
  50% {
    -webkit-transform: translateY(3px); } }
@keyframes shake {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  50% {
    -webkit-transform: translateY(3px);
            transform: translateY(3px); } }
.shake {
  -webkit-animation-name: shake;
  animation-name: shake; }

.patterns {
  display: none;
  position: absolute;
  left: 50%; }
  .patterns div {
    position: absolute; }
  .patterns .line {
    height: 5px;
    background-color: #FFF; }
  .patterns .title-w {
    left: 0;
    top: 0; }
    .patterns .title-w .title {
      left: 0;
      top: 0; }
      .patterns .title-w .title .title-letter {
        top: 0;
        left: 50%;
        display: none; }
      .patterns .title-w .title .letter-A {
        width: 7.56098%; }
      .patterns .title-w .title .letter-L {
        width: 5.12195%; }
      .patterns .title-w .title .letter-N {
        width: 7.31707%; }
      .patterns .title-w .title .letter-E {
        width: 5.12195%; }
      .patterns .title-w .title .letter-W {
        width: 11.21951%; }
      .patterns .title-w .title .letter-E-B {
        width: 5.60976%; }
      .patterns .title-w .title .letter-S-B {
        width: 5.85366%; }
      .patterns .title-w .title .letter-1 {
        margin-left: -35.12195%; }
      .patterns .title-w .title .letter-2 {
        margin-left: -25.85366%; }
      .patterns .title-w .title .letter-3 {
        margin-left: -19.26829%; }
      .patterns .title-w .title .letter-4 {
        margin-left: -9.26829%; }
      .patterns .title-w .title .letter-5 {
        margin-left: 0.4878%; }
      .patterns .title-w .title .letter-6 {
        margin-left: 7.07317%; }
      .patterns .title-w .title .letter-7 {
        margin-left: 22.43902%; }
      .patterns .title-w .title .letter-8 {
        margin-left: 29.5122%; }
    .patterns .title-w .line {
      top: 6.29139%;
      width: 13.41463%; }
    .patterns .title-w .line-left {
      right: 86.82927%; }
    .patterns .title-w .line-right {
      left: 86.82927%; }
  .patterns .bottom-line {
    left: 0;
    right: 0;
    top: 67.21854%; }
  .patterns .page-title-w .page-title {
    width: 100%;
    top: 18.21192%; }
  .patterns .page-title-w[data-name='index'] .title1 {
    top: 18.21192%; }
  .patterns .page-title-w[data-name='index'] .title2 {
    top: 37.41722%; }
  .patterns .page-title-w[data-name='power'] .page-title, .patterns .page-title-w[data-name='safety'] .page-title {
    width: 112%;
    margin-left: -6%; }
  .patterns .page-desc {
    width: 200%;
    margin-left: -50%;
    text-align: center;
    top: 75.49669%;
    font-weight: normal; }
    .patterns .page-desc h3 {
      font-size: 20px;
      font-weight: normal;
      letter-spacing: 0.25em;
      margin-bottom: 1em; }
    .patterns .page-desc h4 {
      font-size: 15px;
      line-height: 1.5em;
      font-weight: normal; }
    .patterns .page-desc[data-name='safety'] h3 {
      letter-spacing: 0; }
    .patterns .page-desc span {
      display: inline-block;
      margin-right: 1em; }
  .patterns .lexus-safety-system {
    position: relative;
    width: 50%;
    margin-left: 28%;
    margin-top: -1%;
    margin-bottom: 0.5em; }

.desktop .patterns {
  width: 410px;
  height: 302px;
  top: 19.35185%;
  margin-left: -205px; }
  @media screen and (max-width: 1024px) {
    .desktop .patterns .page-desc h3 {
      font-size: 15px; }
    .desktop .patterns .page-desc h4 {
      font-size: 11.25px; } }
  @media screen and (min-width: 1025px) and (max-width: 1440px) {
    .desktop .patterns .page-desc h3 {
      font-size: 16px; }
    .desktop .patterns .page-desc h4 {
      font-size: 12px; } }
.desktop .patterns-m {
  display: none; }
  .desktop .patterns-m .title {
    display: none; }

.mobile .patterns .title,
.tablet .patterns .title {
  width: 70%;
  left: 15%; }
.mobile .page[data-name='power'] .title-w .line,
.mobile .page[data-name='safety'] .title-w .line,
.tablet .page[data-name='power'] .title-w .line,
.tablet .page[data-name='safety'] .title-w .line {
  width: 19%; }
.mobile .page[data-name='power'] .bottom-line,
.mobile .page[data-name='safety'] .bottom-line,
.tablet .page[data-name='power'] .bottom-line,
.tablet .page[data-name='safety'] .bottom-line {
  left: -6%;
  right: -6%; }
.mobile .patterns-d,
.tablet .patterns-d {
  display: none; }

.mobile .patterns {
  width: 233px;
  height: 171.62439px;
  top: 89px;
  margin-left: -116.5px; }
  .mobile .patterns .page-desc span {
    display: block; }

.tablet .patterns {
  width: 417px;
  height: 307.1561px;
  top: 14.35547%;
  margin-left: -208.5px; }

.tablet .content .detail-w,
.mobile .content .detail-w {
  width: 100%; }
.tablet .content .detail-panel,
.mobile .content .detail-panel {
  position: relative; }
  .tablet .content .detail-panel .detail-panel-content,
  .mobile .content .detail-panel .detail-panel-content {
    position: relative; }
  .tablet .content .detail-panel .detail-btn,
  .mobile .content .detail-panel .detail-btn {
    top: 10px;
    display: block; }
  .tablet .content .detail-panel.ON .detail-panel-content,
  .mobile .content .detail-panel.ON .detail-panel-content {
    max-height: 1000px; }

.mobile .detail-panel .detail-panel-content .detail-list-w {
  padding-top: 67px; }
.mobile .detail-panel .detail-btn {
  width: 46.5px;
  height: 47.25px;
  left: 50%;
  margin-left: -23.25px; }

.desktop .detail-panel {
  position: absolute;
  left: 0;
  top: 0; }
  .desktop .detail-panel .detail-panel-content {
    position: absolute; }
    .desktop .detail-panel .detail-panel-content .detail-item-video-btn:hover {
      background-image: url("../images/FFFFFF-0.png") !important;
      background-color: rgba(1, 1, 1, 0) !important; }
  .desktop .detail-panel .detail-btn:hover {
    background-position: bottom center; }

.detail-panel .bg {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  background-image: url("../images/000000-0.6.png");
  background-repeat: repeat; }
.detail-panel .detail-panel-content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.25s ease;
  transition: max-height 0.25s ease;
  -webkit-transition-delay: 0;
  transition-delay: 0; }
  .detail-panel .detail-panel-content .detail-list-w {
    width: 100%;
    background-color: #FFF;
    padding-top: 83px; }
    .detail-panel .detail-panel-content .detail-list-w .detail-list {
      width: 100%;
      overflow: hidden; }
      .detail-panel .detail-panel-content .detail-list-w .detail-list .detail-item {
        position: relative;
        float: left;
        overflow: hidden; }
        .detail-panel .detail-panel-content .detail-list-w .detail-list .detail-item .photo {
          position: relative;
          width: 100%;
          overflow: hidden; }
        .detail-panel .detail-panel-content .detail-list-w .detail-list .detail-item .title {
          width: 100%;
          margin: 0.5em 0;
          text-align: center;
          font-size: 18px;
          line-height: 1.5em;
          color: #3c3c3e; }
          .detail-panel .detail-panel-content .detail-list-w .detail-list .detail-item .title i {
            font-style: normal;
            color: #878787; }
          @media screen and (max-width: 1024px) {
            .detail-panel .detail-panel-content .detail-list-w .detail-list .detail-item .title {
              font-size: 13.5px; } }
        .detail-panel .detail-panel-content .detail-list-w .detail-list .detail-item .detail-item-video-btn {
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          background-repeat: repeat;
          background-image: url("../images/000000-0.4.png") \9;
          background-color: rgba(1, 1, 1, 0.4);
          cursor: pointer;
          -webkit-transition: background-color 0.3s ease;
          transition: background-color 0.3s ease;
          -webkit-transition-delay: 0;
          transition-delay: 0; }
          .detail-panel .detail-panel-content .detail-list-w .detail-list .detail-item .detail-item-video-btn img {
            position: absolute;
            width: 25%;
            left: 0;
            bottom: 0; }
  .detail-panel .detail-panel-content .detail-paginates {
    width: 100%;
    padding: 0 0 10px 0;
    background-color: #FFF;
    text-align: center; }
  .detail-panel .detail-panel-content .detail-paginate {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 0 8px;
    background-color: #C4C3C8;
    border-radius: 50%; }
    .detail-panel .detail-panel-content .detail-paginate.ON {
      background-color: #686A76; }
.detail-panel.ON .detail-panel-content {
  max-height: 500px;
  -webkit-transition: max-height 0.5s ease;
  transition: max-height 0.5s ease;
  -webkit-transition-delay: 0;
  transition-delay: 0; }
.detail-panel .detail-btn {
  display: none;
  position: absolute;
  width: 62px;
  height: 63px;
  left: 50%;
  margin-left: -31px;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url("../images/detail-open-btn-d.png");
  background-size: 100% 200%; }
.detail-panel.ON .detail-btn {
  background-size: 100% 100%;
  background-position: top center;
  background-image: url("../images/detail-close-btn-d.png"); }
.detail-panel .w25p {
  width: 25%; }
.detail-panel .w50p {
  width: 50%; }

.detail-more-btn {
  display: block;
  position: relative;
  width: 100%;
  background-color: #686A74;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 55px;
  letter-spacing: 4px;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
  -webkit-transition-delay: 0;
  transition-delay: 0; }
  .detail-more-btn img {
    position: absolute;
    width: 8px;
    left: 50%;
    top: 19px;
    -webkit-transition: margin-left 0.3s ease;
    transition: margin-left 0.3s ease;
    -webkit-transition-delay: 0;
    transition-delay: 0; }
  .detail-more-btn img.right {
    margin-left: -99px; }
  .detail-more-btn img.left {
    margin-left: 87px; }
  .detail-more-btn:hover {
    background-color: #555B6E; }
    .detail-more-btn:hover img.right {
      margin-left: -90px; }
    .detail-more-btn:hover img.left {
      margin-left: 78px; }

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%; }

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.video-panel {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("../images/000000-0.6.png");
  background-repeat: repeat; }
  .video-panel .video-panel-content {
    position: absolute;
    width: 100%;
    top: 10%;
    background-color: #FFF;
    padding-bottom: 20px; }
    .video-panel .video-panel-content .title {
      margin: 0.5em 0;
      width: 100%;
      text-align: center;
      color: #3c3c3e;
      font-size: 18px; }
    .video-panel .video-panel-content .video {
      margin-left: 25%;
      width: 50%;
      background-color: #333; }
    .video-panel .video-panel-content .close-btn {
      position: relative;
      margin-left: 25%;
      margin-top: 5px;
      margin-bottom: 5px;
      line-height: 48px;
      font-size: 16px;
      color: #333333;
      cursor: pointer; }
      .video-panel .video-panel-content .close-btn img {
        width: 24px; }

.mobile .video-panel {
  top: 40px;
  height: calc(100% - 40px); }
  .mobile .video-panel .video-panel-content {
    top: 34%;
    width: 100%;
    margin-left: 0; }
  .mobile .video-panel .video {
    margin-left: 0;
    width: 100%; }
  .mobile .video-panel .close-btn {
    margin-left: 2%; }

.tablet .video-panel .video-panel-content {
  top: 40%; }

.testdriving-panel.show-rule .testdriving-panel-content > .scroll-content {
  margin-left: -200%; }

.testdriving-panel.show-success .testdriving-panel-content > .scroll-content {
  margin-left: 0; }

.tablet .testdriving-panel.show-rule .testdriving-panel-content > .scroll-content,
.mobile .testdriving-panel.show-rule .testdriving-panel-content > .scroll-content {
  margin-left: -200%; }
  .tablet .testdriving-panel.show-rule .testdriving-panel-content > .scroll-content .form-w,
  .mobile .testdriving-panel.show-rule .testdriving-panel-content > .scroll-content .form-w {
    max-height: 1px; }
  .tablet .testdriving-panel.show-rule .testdriving-panel-content > .scroll-content .rule-w,
  .mobile .testdriving-panel.show-rule .testdriving-panel-content > .scroll-content .rule-w {
    max-height: 2000px; }
  .tablet .testdriving-panel.show-rule .testdriving-panel-content > .scroll-content .success-w,
  .mobile .testdriving-panel.show-rule .testdriving-panel-content > .scroll-content .success-w {
    max-height: 1px; }
.tablet .testdriving-panel.show-success .testdriving-panel-content > .scroll-content,
.mobile .testdriving-panel.show-success .testdriving-panel-content > .scroll-content {
  margin-left: 0; }
  .tablet .testdriving-panel.show-success .testdriving-panel-content > .scroll-content .form-w,
  .mobile .testdriving-panel.show-success .testdriving-panel-content > .scroll-content .form-w {
    max-height: 1px; }
  .tablet .testdriving-panel.show-success .testdriving-panel-content > .scroll-content .rule-w,
  .mobile .testdriving-panel.show-success .testdriving-panel-content > .scroll-content .rule-w {
    max-height: 1px; }
  .tablet .testdriving-panel.show-success .testdriving-panel-content > .scroll-content .success-w,
  .mobile .testdriving-panel.show-success .testdriving-panel-content > .scroll-content .success-w {
    max-height: 2000px; }

.testdriving-panel {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  color: #333333;
  background-color: #FFF; }
  .testdriving-panel a {
    color: #333333;
    text-decoration: underline; }
  .testdriving-panel a:hover,
  .testdriving-panel a:visited {
    color: inherit; }
  .testdriving-panel .bg {
    position: relative; }
  .testdriving-panel .close-btn {
    width: 222px; }
  .testdriving-panel .scroll-content {
    position: relative; }
  .testdriving-panel .testdriving-panel-content {
    position: relative;
    overflow: hidden;
    color: #333333; }
    .testdriving-panel .testdriving-panel-content .scroll-content {
      width: 300%;
      margin-left: -100%;
      overflow: hidden;
      -webkit-transition: margin-left 0.25s ease;
      transition: margin-left 0.25s ease;
      -webkit-transition-delay: 0;
      transition-delay: 0; }
      .testdriving-panel .testdriving-panel-content .scroll-content .testdriving-w {
        position: relative;
        float: left;
        width: 33.33333%; }
        .testdriving-panel .testdriving-panel-content .scroll-content .testdriving-w .testdriving-content {
          position: relative; }
    .testdriving-panel .testdriving-panel-content .success-w .success-content {
      margin-bottom: 50px; }
    .testdriving-panel .testdriving-panel-content .success-w .words {
      font-size: 16px;
      line-height: 2em; }
    .testdriving-panel .testdriving-panel-content form {
      position: relative;
      width: 100%; }
      .testdriving-panel .testdriving-panel-content form .label {
        display: inline-block;
        line-height: 1.5em; }
        .testdriving-panel .testdriving-panel-content form .label.label-1 {
          width: 68px; }
        .testdriving-panel .testdriving-panel-content form .label.label-2 {
          width: 93px; }
        .testdriving-panel .testdriving-panel-content form .label.label-3 {
          width: 168px; }
      .testdriving-panel .testdriving-panel-content form input {
        padding: 0.25em 5px; }
      .testdriving-panel .testdriving-panel-content form select {
        padding: 0.25 0; }
      .testdriving-panel .testdriving-panel-content form input,
      .testdriving-panel .testdriving-panel-content form select {
        margin-top: 1em; }
      .testdriving-panel .testdriving-panel-content form .form-name {
        width: calc(100% - 273px); }
      .testdriving-panel .testdriving-panel-content form .form-mobile,
      .testdriving-panel .testdriving-panel-content form .form-email {
        width: calc(100% - 123px); }
      .testdriving-panel .testdriving-panel-content form .form-city {
        margin-bottom: 0.5em;
        width: 70px; }
      .testdriving-panel .testdriving-panel-content form .form-store {
        width: calc(100% - 184px); }
      .testdriving-panel .testdriving-panel-content form .form-addr {
        display: inline-block;
        font-size: 12px;
        margin-left: 93px;
        width: calc(100% - 150px); }
      .testdriving-panel .testdriving-panel-content form .map-icon {
        display: inline-block;
        width: 40px;
        vertical-align: top; }
      .testdriving-panel .testdriving-panel-content form .form-car {
        width: calc(100% - 198px); }
    .testdriving-panel .testdriving-panel-content .submit-btn,
    .testdriving-panel .testdriving-panel-content .back-btn {
      display: inline-block;
      font-size: 18px;
      margin-top: 3em;
      padding: 0.5em 2em;
      color: #FFF;
      background-color: #636D7F; }
    .testdriving-panel .testdriving-panel-content .rule-w {
      font-size: 12px;
      color: #333333; }
      .testdriving-panel .testdriving-panel-content .rule-w .rule-close-btn {
        line-height: 48px;
        font-size: 16px;
        margin-bottom: 1em; }
        .testdriving-panel .testdriving-panel-content .rule-w .rule-close-btn img {
          width: 24px; }
      .testdriving-panel .testdriving-panel-content .rule-w h4 {
        font-size: 13px;
        font-weight: normal;
        line-height: 2em; }
      .testdriving-panel .testdriving-panel-content .rule-w .label {
        display: inline-block;
        font-size: 13px;
        color: #FFF;
        padding: 0.25em;
        background-color: #636D7F;
        margin-bottom: 0.5em;
        margin-top: 1em; }
      .testdriving-panel .testdriving-panel-content .rule-w li {
        line-height: 2em;
        text-indent: -1em;
        margin-left: 1em; }
        .testdriving-panel .testdriving-panel-content .rule-w li:before {
          content: "\ff1e"; }

.desktop.not-ie8 .testdriving-panel .bg,
.tablet.landscape.not-ie8 .testdriving-panel .bg {
  position: absolute;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center; }
.desktop.not-ie8 .testdriving-panel .testdriving-panel-content,
.tablet.landscape.not-ie8 .testdriving-panel .testdriving-panel-content {
  min-width: 500px; }
.desktop.ie8 .bg,
.tablet.landscape.ie8 .bg {
  width: 1920px;
  height: 1080px; }
.desktop .close-btn,
.tablet.landscape .close-btn {
  position: fixed;
  right: 0;
  top: 0; }
.desktop .testdriving-panel .testdriving-panel-content,
.tablet.landscape .testdriving-panel .testdriving-panel-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 33.85417%;
  min-width: 500px;
  height: 100%;
  background-image: url("../images/FFFFFF-0.8.png");
  background-repeat: repeat; }
  .desktop .testdriving-panel .testdriving-panel-content .scroll-content,
  .tablet.landscape .testdriving-panel .testdriving-panel-content .scroll-content {
    margin-top: 10%;
    height: 90%;
    overflow: hidden; }
  .desktop .testdriving-panel .testdriving-panel-content h3,
  .tablet.landscape .testdriving-panel .testdriving-panel-content h3 {
    font-size: 16px;
    line-height: 1.5em; }
  .desktop .testdriving-panel .testdriving-panel-content .testdriving-w,
  .tablet.landscape .testdriving-panel .testdriving-panel-content .testdriving-w {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%; }
  .desktop .testdriving-panel .testdriving-panel-content .form-content,
  .tablet.landscape .testdriving-panel .testdriving-panel-content .form-content {
    font-size: 15px;
    width: 80%;
    margin: 5% 10% 25% 10%; }
    .desktop .testdriving-panel .testdriving-panel-content .form-content form,
    .tablet.landscape .testdriving-panel .testdriving-panel-content .form-content form {
      margin-top: 2em; }
      .desktop .testdriving-panel .testdriving-panel-content .form-content form .label-d,
      .tablet.landscape .testdriving-panel .testdriving-panel-content .form-content form .label-d {
        display: inline-block; }
      .desktop .testdriving-panel .testdriving-panel-content .form-content form .label-m,
      .tablet.landscape .testdriving-panel .testdriving-panel-content .form-content form .label-m {
        display: none; }
  .desktop .testdriving-panel .testdriving-panel-content .rule-content,
  .tablet.landscape .testdriving-panel .testdriving-panel-content .rule-content {
    width: 80%;
    margin: 1% 10% 30% 10%; }
  .desktop .testdriving-panel .testdriving-panel-content .success-content .words,
  .tablet.landscape .testdriving-panel .testdriving-panel-content .success-content .words {
    margin-top: 25%; }

.tablet .close-btn {
  position: absolute;
  right: 0; }
.tablet .testdriving-panel {
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed; }
  .tablet .testdriving-panel .scroll-content .bg {
    width: 100%; }
  .tablet .testdriving-panel .testdriving-panel-content {
    margin-top: 60px; }
    .tablet .testdriving-panel .testdriving-panel-content h3 {
      font-size: 16px;
      line-height: 1.5em; }
    .tablet .testdriving-panel .testdriving-panel-content .testdriving-w {
      max-height: 1px; }
    .tablet .testdriving-panel .testdriving-panel-content .form-w {
      max-height: 2000px; }
    .tablet .testdriving-panel .testdriving-panel-content .form-content {
      font-size: 15px;
      width: 60%;
      margin: 0 20% 10% 20%; }
      .tablet .testdriving-panel .testdriving-panel-content .form-content form {
        margin-top: 2em; }
        .tablet .testdriving-panel .testdriving-panel-content .form-content form .label-d {
          display: inline-block; }
        .tablet .testdriving-panel .testdriving-panel-content .form-content form .label-m {
          display: none; }
        .tablet .testdriving-panel .testdriving-panel-content .form-content form .submit-btn {
          margin-top: 2em; }
    .tablet .testdriving-panel .testdriving-panel-content .rule-content {
      width: 80%;
      padding: 0 10% 10% 10%; }
    .tablet .testdriving-panel .testdriving-panel-content .success-content .words {
      margin-top: 0; }
.tablet.landscape .testdriving-panel .testdriving-panel-content {
  margin-top: 0; }
.tablet.landscape .testdriving-panel .scroll-content .bg img {
  display: none; }
.tablet.landscape .testdriving-panel .scroll-content .rule-content {
  padding: 0; }

.mobile .testdriving-panel {
  position: absolute;
  top: 40px;
  height: calc(100% - 40px);
  max-height: 0;
  display: block;
  -webkit-transition: max-height 0.3s ease;
  transition: max-height 0.3s ease;
  -webkit-transition-delay: 0;
  transition-delay: 0; }
  .mobile .testdriving-panel.ON {
    max-height: 2000px; }
  .mobile .testdriving-panel > .scroll-content {
    height: 100%;
    overflow: hidden; }
  .mobile .testdriving-panel .close-btn-w {
    width: 90%;
    height: 66px;
    margin-left: 5%;
    text-align: center;
    border-bottom: 1px solid #636D7F; }
    .mobile .testdriving-panel .close-btn-w .close-btn {
      display: inline-block;
      width: 30px;
      text-align: center; }
      .mobile .testdriving-panel .close-btn-w .close-btn span {
        display: inline-block;
        margin-top: 0.5em;
        font-size: 15px; }
      .mobile .testdriving-panel .close-btn-w .close-btn img {
        width: 23px; }
  .mobile .testdriving-panel .testdriving-panel-content {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding-top: 34px;
    height: calc(100% - 98px); }
    .mobile .testdriving-panel .testdriving-panel-content h3 {
      font-size: 16px;
      line-height: 1.5em; }
    .mobile .testdriving-panel .testdriving-panel-content .testdriving-w {
      max-height: 1px; }
    .mobile .testdriving-panel .testdriving-panel-content .form-w {
      max-height: 2000px; }
    .mobile .testdriving-panel .testdriving-panel-content .form-content {
      font-size: 15px;
      width: 92%;
      margin: 0 4% 20px 4%; }
      .mobile .testdriving-panel .testdriving-panel-content .form-content form {
        margin-top: 2em; }
        .mobile .testdriving-panel .testdriving-panel-content .form-content form .label-d {
          display: none; }
        .mobile .testdriving-panel .testdriving-panel-content .form-content form .label-m {
          display: inline-block; }
        .mobile .testdriving-panel .testdriving-panel-content .form-content form .form-name {
          width: calc(100% - 120px); }
        .mobile .testdriving-panel .testdriving-panel-content .form-content form .submit-btn {
          margin-top: 2em; }
    .mobile .testdriving-panel .testdriving-panel-content .rule-content {
      width: 92%;
      margin: 0 4% 20px 4%; }
    .mobile .testdriving-panel .testdriving-panel-content .success-content .words {
      margin-top: 25%; }