/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Noto+Sans+TC:wght@300;500;900&display=swap');
/*
font-family: 'Noto Sans TC', sans-serif; 300,500,700
font-family: 'Lato', sans-serif; 300,500,700
*/

/*!
 * Font Awesome Pro 5.14.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 */
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("../webfonts/fa-light-300.eot");
  src: url("../webfonts/fa-light-300.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-light-300.woff2") format("woff2"), url("../webfonts/fa-light-300.woff") format("woff"), url("../webfonts/fa-light-300.ttf") format("truetype"), url("../webfonts/fa-light-300.svg#fontawesome") format("svg"); }

.fal {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
}

html, body { height: 100%; /*scroll-behavior: smooth;*/ }

body { font-family: 'Lato', 'Noto Sans TC'; font-size: 16px; line-height:1.8; color:#4D4D4D; letter-spacing:1px; height: 100%; text-align: justify; font-weight: 300; background: #E5DFD8; }

input , select , textarea , button { font-family: 'Lato', 'Noto Sans TC', sans-serif; letter-spacing:1px; color:#4D4D4D; font-weight: 300; -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: none;
  -moz-border-radius: none;
  -ms-border-radius: none;
  -o-border-radius: none;
  border-radius: none;
  background: none; border: none; 
}

input:focus { outline: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img { display: block; }

h1, h2, h3, h4, h5, h6 { text-align: left; font-family: 'Lato', 'Noto Sans TC', sans-serif; letter-spacing: 2px; font-weight: 300; }

/* content */
.clearfix { display: block; clear: both; }
.clearfix::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.left { float: left; }
.right { float: right; }

.orignal { width: 100%; }
.large { width: 50%; }
.medium { width: 33.33%; }
.small { width: 25%; }
.micro { width: 20%; }

.content { border-bottom: #C1BBB4 1px solid; }
.inner { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; border-left: #C1BBB4 1px solid; border-right: #C1BBB4 1px solid; }
.inner.space { height: 50px; }
.inner:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 1px;
  background: #C1BBB4;
  top: 0;
  left: 33.33%;
}
.inner:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 1px;
  background: #C1BBB4;
  top: 0;
  right: 33.33%;
}
.inner.blank:before , .inner.blank:after {
  display: none;
}

.inner-box { padding: 50px; width: 100%; position: relative; z-index: 1; }
h2.inner-title { font-size: 21px; text-transform: uppercase; transform: rotate(90deg); transform-origin: 0% 100%; position: absolute; right: -260px; width: 250px; }
h1 , h3 { font-size: 200%; margin-bottom: 25px; }
h1 { text-align: center; }

/* link */
a { text-decoration:none; color:#4D4D4D; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
a:hover { opacity: .5; }

#backtop {
  position: fixed;
  right: 25px;
  bottom: 25px;
  padding: 20px; 
  outline: none;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
  z-index: 199;
  opacity: 1;
  display: none;
  font-size: 12px;
  border: #B0A9A3 1px solid;
  background: #fff;
}
#backtop i { display: block; }
#backtop:hover { color: #fff; background: #B0A9A3; }
#backtop.mcOut { opacity: 0; }

.read-link a { display: inline-block; line-height: 60px; margin-top: 50px; }
.read-link a:before {
  font-family: 'Font Awesome 5 Pro';
  content: '\f054';
  color: #fff;
  background: #004F92;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  float: left;
  text-align: center;
  margin-right: 30px;
}

/* bigBoard */
.bigBoard { position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.bigBoard div { position: absolute; width: 100%; text-align: center; left: 0; top: 50%; transform: translate(0,-50%); }

p.inner-box-temp { width: 100%; font-size: 125%; }


/* header */
header { background: #fff; height: 120px; position: relative; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; border-bottom: #C1BBB4 1px solid; }
header .logo { width: 150px; position: absolute; left: 60px; top:50%; transform: translate(0,-50%); z-index: 8; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
header .logo img { width: 100%; display: block; }
header .logo a:hover img { opacity: .5; }
header .logo * { -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
header .nav { position: absolute; left: 300px; top:50%; transform: translate(0,-50%); z-index: 10; }
header .nav li { display: inline-block; margin-right: 50px; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; font-size: 14px; }
header .share { letter-spacing: 2px; position: absolute; right: 60px; top:50%; transform: translate(0,-50%); z-index: 10; font-size: 12px; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
.navbar-header { display: none; }

/* index */
.header-index { position: relative; background: red; }
.header-index .logo { width: 150px; position: absolute; left: 60px; top:54px; z-index: 8; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
.header-index .logo img { width: 100%; display: block; }
.header-index .logo a:hover img { opacity: .5; }
.header-index .logo * { -webkit-transition: all ease 0.3s; transition: all ease 0.3s; }
.header-index .nav { position: absolute; left: 300px; top:46px; z-index: 10; }
.header-index .nav li { display: inline-block; margin-right: 50px; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; font-size: 14px;  }
.header-index .nav li a , .header-index .share a { color: #fff; }
.header-index .share { letter-spacing: 2px; position: absolute; right: 60px; top:48px; z-index: 10; font-size: 12px; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; color: #fff; }
.zoomslider { height: 100vh; }
.zoomslider p { text-align: center; color: #fff; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); font-size: 300%; letter-spacing: 5px; width: 100%; padding: 0 30px; z-index: 7; }

p.inner-box-index { width: 63%; float: left; }
img.inner-box-index-goo-logo  { position: absolute; top: 50px; right: 50px; width: 230px; display: block; }

/* video */
.videocol { position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; height: 600px; }
.videocol-big { width: 100%; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; height: 100vh; }
#myVideo1, #myVideo2 {
  min-width: 100%; 
  min-height: 100%; 
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/* used cars */
.used-cars-board { height: 500px; }
.used-cars-board h1 { color: #fff; font-size: 200%; text-align: center; letter-spacing: 10px; padding: 0; margin: 0; }

.inner-car-grid figure { float: left; width: 33.33%; border-bottom: #C1BBB4 solid 1px; }
.inner-car-grid figure .inner-car-grid-img { width: 100%; height: 300px; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; border-bottom: #C1BBB4 solid 1px; }
.inner-car-grid figure .inner-car-grid-txt { height: 110px; overflow: hidden; position: relative; padding: 25px; }
.inner-car-grid figure .inner-car-grid-txt p { float: left; padding-right: 85px; }
.inner-car-grid figure .inner-car-grid-txt a.link {
  position: absolute;
  top: 25px; right: 25px;
  display: block;
  color: #fff;
  background: #004F92;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.used-cars-content { background: #fff; }
.used-cars-content .used-cars-gallery,
.used-cars-content .used-cars-detail {
  float: left;
  width: 50%;
  border-right: #C1BBB4 solid 1px;
}
.used-cars-content div:last-child { border-right: none; }
.used-cars-detail { padding: 50px; }
.used-cars-detail h1 { text-align: left; font-size: 150%; }
.used-cars-detail ul { width: 100%; }
.used-cars-detail ul li { height: 55px; line-height: 55px; border-bottom: #C1BBB4 1px dotted; }
.used-cars-detail ul li:last-child { border-bottom: none; }
.used-cars-detail ul li.used-cars-appraisal { color: #004F92; font-weight: 500; }
.used-cars-detail ul li label { display: inline-block; width: 120px; }
.used-cars-detail ul li span { font-size: 150%; }
.used-cars-detail a.used-cars-modal { display: block; width: 100%; background: #004F92; color: #fff; margin: 30px 0 0; height: 70px; line-height: 70px; padding-left: 25px; position: relative; }
.used-cars-detail a.used-cars-modal:after {
  font-family: 'Font Awesome 5 Pro';
  content: '\f054';
  color: #fff;
  position: absolute;
  right: 25px; top: 50%;
  transform: translate(0%,-50%);
}

/* used cars gallery */
.swiper-container { width: 100%; margin: 0 auto; }
.swiper-slide { background-size: cover; background-position: center; }
.swiper-slide a { display: block; width: 100%; height: 100%; }
.swiper-slide a:hover { position: relative; opacity: 1;  }
.swiper-slide a:after {
  font-family: 'Font Awesome 5 Pro';
  content: '\f00e';
  color: #fff;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  font-size: 250%; opacity: 0;
  -webkit-transition: all ease 0.3s; transition: all ease 0.3s;
}
.swiper-slide a:hover:after { opacity: 1; }
.gallery-top { height: 600px; width: 100%; }
.gallery-thumbs { background: #C1BBB4; height: 80px; box-sizing: border-box; }
.gallery-thumbs .swiper-slide { width: 25%; height: 100%; opacity: 0.4; }
.gallery-thumbs .swiper-slide-thumb-active { opacity: 1; }

/* used cars modal */
#btn-close-modal { width:100%; text-align: center; cursor:pointer; padding: 50px 0 0; }
.closebt { display: block; width: 60px; height: 60px; margin: 0 auto; text-align: center; }
.closebt {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    cursor: pointer;
    margin: 0 auto;
}
.closebt:hover {
    transform: rotate(90deg);
}
.closebt img { width: 100%; }
.modal-content { text-align: center; padding-bottom: 50px; }
.modal-content-inner { text-align: inherit; padding: 50px; width: 100%; margin: 50px auto; max-width: 1000px; background: #fff; border: #C1BBB4 1px solid; }
.modal-content-inner img { display: block; margin: 0 auto; width: 100%; max-width: 100%; }

/* more used cars */
.more-used-cars div {
  float: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 50%;
  background: #fff;
  border-right: #C1BBB4 solid 1px;
  background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; height: 400px;
}
.more-used-cars div img { width: 100%; display: block; }
.more-used-cars div:last-child { border-right: none; }
.more-used-cars div a { font-size: 24px; display: inline-block; line-height: 60px; }
.more-used-cars div a:after {
  font-family: 'Font Awesome 5 Pro';
  content: '\f054';
  color: #fff;
  background: #004F92;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  float: right;
  text-align: center;
  margin-left: 60px;
  font-size: 16px;
}

/* footer */
.footer-contact div { float: left; border-right: #C1BBB4 solid 1px; height: 400px; }
.footer-contact div img { display: block; max-width: 200px; margin-bottom: 25px; }
.footer-contact div:last-child { border-right: none; }
.footer-contact-txt { padding: 50px; width: 33.34%; }
.footer-contact-txt p { font-size: 125%; }
.footer-contact-map { width: 66.66%; overflow: hidden; /* padding-bottom: 56.25%; */position: relative; height: 0; }
.footer-contact-map iframe { left: 0; top: 0; height: 400px; width: 100%; position: absolute; }
section.copyright { text-align: center; border-bottom: none; }
section.copyright div span { padding: 25px; display: block; font-size: 80%; }

/* appraisal */
.appraisal-board { height: 800px; }
.appraisal-board h4 { text-transform: uppercase; color: #fff; font-size: 200%; text-align: center; letter-spacing: 10px; }
.inner-box-temp-goo-logo { margin: 50px auto 0; max-width: 250px; }

/* concept */
.concept-board-img-1 img { width: 66.7%; margin: 0 0 0 auto; border-left: #C1BBB4 solid 1px; }
.concept-board-img-1 h1 { text-transform: uppercase; color: #fff; font-size: 200%; letter-spacing: 10px; padding: 0; padding-left: 50px; margin: 0; text-align: left; }
.concept-board-img-2 img { width: 66.7%; margin: 0 auto 0 0; border-right: #C1BBB4 solid 1px; }
.concept-board-img-2 p { font-size: 150%; text-align: left; width: 45%; margin: 0 50px 0 auto; }

/* promise */
.promise-board { height: 640px; }
.promise-board div { color: #fff; }
.promise-board p { max-width: 65%; font-size: 125%; margin: 0 auto; }