@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

body { font-family: 'Noto Sans', 'Noto Sans TC', sans-serif; font-size: 14px; color: #333; background: #181818; padding-bottom: 30px; }
hr { margin: 0; border: none; border-bottom: 1px solid rgba(255,255,255,.3); }
hr.dark { border-bottom-color: rgba(0,0,0,.2); }
hr.dashed { border-bottom-style: dashed; }
hr.dotted { border-bottom-style: dotted; }

.btn-default { background-color: #e01400; border-color: #e01400; color: #fff; }
.btn-default:hover, .btn-default:focus { background-color: #b51304; border-color: #b51304; color: #fff; }

.bg-box { position: absolute; width: 100%; z-index: -1; top: 64px; }

h2.title { font-size: 16px; color: #fff; padding: .4em 25px; letter-spacing: .05em; position: relative; z-index: 999; }
h2.title small a { float: right; text-decoration: none; color: #fff; margin-bottom: -.2em; }
h2.title small a:hover { color: #e01400; }
h2.title~hr { position: relative; z-index: 999; }

header .container { padding-top: 63px; min-height: 64px; box-sizing: border-box; background-color: #fff; border-top: 2px solid #6eb92b; padding-bottom: 1px; box-shadow: 0 1px 5px rgba(0,0,0,.5); position: relative; }
header .container .logo { display: block; position: absolute; left: 15px; top: 10px; width: 120px; }
header .container .top-nav { font-size: 12px; padding: .5em 1em; text-align: right;
  background: #ffffff; /* Old browsers */
  background: -moz-linear-gradient(left, #ffffff 10%, #f2f2f2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #ffffff 10%,#f2f2f2 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #ffffff 10%,#f2f2f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e3e3e3',GradientType=1 ); /* IE6-9 */
}
header .container .top-nav, header .container .top-nav a { color: #666; }
header .container .top-nav span { display: inline-block; margin: 0 .5em; }

.toggle-btn { width: 42px; height: 42px; text-align: center; line-height: 48px; position: absolute; display: block; right: 10px; top: 12px; }
.toggle-btn, .toggle-btn:focus, .toggle-btn:hover { color: #363636; }

.navbar-menu { display: none; background-color: #292929; }
.navbar-menu ul { padding: 15px 0; margin: 0; list-style: none; }
.navbar-menu ul li a { color: #fff; display: block; padding: .6em 0; font-size: 16px; font-weight: 400; letter-spacing: .1em; text-decoration: none; }
.navbar-menu ul li { padding: 0 15px; border-bottom: 1px solid #3a3a3a; }
.navbar-menu ul li:last-child { border-bottom: none; }

footer .container { font-weight: 400; background-color: #292929; color: #9a9899; font-size: 12px; padding: 1.5em 0; letter-spacing: 1px; text-align: center; }
footer .container p { margin-bottom: .5em; padding-top: 1em; }
footer .container ul { padding: 0; margin: 0; margin-bottom: 3em; }
footer .container ul li { display: inline-block; margin: 0 .5em; }
footer .container ul a { color: #e3e3e3; font-size: 150%; }
footer .container ul a:hover { color: #fff; }

.wrapper { padding-top: 30px; min-height: 640px; }

.search-box { margin: 0px 0 120px 0; float: right; width: 100%; box-sizing: border-box; background-color: rgba(0,0,0,.8); border-bottom: 6px solid #6eb92b; padding: 15px 45px; }
.search-box hr { margin: .7em 0; }
.search-form .form-control, .search-form .btn { margin: .5em 0;}

.index-list { clear: both; border-top: 2px solid #fff; position: relative; background-color: #fff; overflow: hidden; }
.index-list:before { content: ''; left: 0; right: 0; top:0; height: 400px; display: block; position: absolute;
  background: #fff; /* Old browsers */
  background: -moz-linear-gradient(top, #0d0d0d 0%, #0d0d0d 2%, #1c1c1c 9%, #1e1e1e 9%, #282828 12%, #292929 13%, #3b3b3b 18%, #3e3e3e 19%, #464646 21%, #595959 26%, #606060 27%, #666666 29%, #6e6e6e 30%, #737373 32%, #868686 36%, #868686 36%, #8e8e8e 38%, #9e9e9e 42%, #aaaaaa 44%, #acacac 45%, #b3b3b3 46%, #b9b9b9 48%, #bcbcbc 48%, #c1c1c1 50%, #cecece 53%, #d1d1d1 54%, #e3e3e3 59%, #e4e4e4 60%, #f3f3f3 64%, #ffffff 70%, #ffffff 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #0d0d0d 0%,#0d0d0d 2%,#1c1c1c 9%,#1e1e1e 9%,#282828 12%,#292929 13%,#3b3b3b 18%,#3e3e3e 19%,#464646 21%,#595959 26%,#606060 27%,#666666 29%,#6e6e6e 30%,#737373 32%,#868686 36%,#868686 36%,#8e8e8e 38%,#9e9e9e 42%,#aaaaaa 44%,#acacac 45%,#b3b3b3 46%,#b9b9b9 48%,#bcbcbc 48%,#c1c1c1 50%,#cecece 53%,#d1d1d1 54%,#e3e3e3 59%,#e4e4e4 60%,#f3f3f3 64%,#ffffff 70%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #0d0d0d 0%,#0d0d0d 2%,#1c1c1c 9%,#1e1e1e 9%,#282828 12%,#292929 13%,#3b3b3b 18%,#3e3e3e 19%,#464646 21%,#595959 26%,#606060 27%,#666666 29%,#6e6e6e 30%,#737373 32%,#868686 36%,#868686 36%,#8e8e8e 38%,#9e9e9e 42%,#aaaaaa 44%,#acacac 45%,#b3b3b3 46%,#b9b9b9 48%,#bcbcbc 48%,#c1c1c1 50%,#cecece 53%,#d1d1d1 54%,#e3e3e3 59%,#e4e4e4 60%,#f3f3f3 64%,#ffffff 70%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d0d0d', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */    
}

.items { padding: 15px; overflow: hidden; }
.items .item { padding: 10px; }
.items .item a { display: block; position: relative; }
.items .item h3 { display: block; position: absolute; left: 0; bottom: 0; width: 100%; box-sizing: border-box; background-color: rgba(0,0,0,.5); padding: 0 .5em; margin: 0;}
.items .item h3 span { height: 4em; display:flex; align-items:center; justify-content:center; font-size: 14px; color: #fff; }
.items .item img { display: block; width: 100%; }

.thumbnail iframe { width: 100%; }
.maps-box { padding: 25px; overflow: hidden; }
.maps-box > div { padding-left: 10px; padding-right: 10px; }
.maps-box .thumbnail { border-color: #fff; font-size: 13px; }
.maps-box .thumbnail h3 { font-size: 14px; margin: 0; padding: 0; margin-bottom: .5em; }
.maps-box .thumbnail span { display: block; }
.maps-box .thumbnail p { margin-top: 1em; }
.maps-box .thumbnail p a { margin-right: .5em; font-size: 12px; }

.sidebar { background-color: #000; position: relative; }
.sidebar a { color: #9d9d9d; text-decoration: none; }
.sidebar h3.title { font-size: 15px; color: #fff; padding: 10px 25px; margin: 0; letter-spacing: .05em;  }
.sidebar .side-search-box { padding-top: 15px; padding-bottom: 15px; }
.sidebar .search-form { padding-left: 25px; padding-right: 25px; }

.side-search-box, .quick-links, .categories-box { display: none; }

.quick-links ul { padding: 0; padding-bottom: 1.5em; margin: 0; list-style: none; }
.quick-links li { border-top: 1px dotted #333;  }
.quick-links li a { display: block; padding: .5em 25px; font-size: .9em; }

.categories-box ul { padding: .5em 0; }
.categories-box ul a { padding: .3em 25px; font-size: .9em; display: block; display: block; }
.categories-box ul ul { padding-top: 0; }
.categories-box ul ul li { padding-left: 1.5em; }
.categories-box ul ul a:hover { color: #cc0000;  background-color: transparent; } 
.categories-box>ul>li>a { padding-left: 42px; position: relative; }
.categories-box>ul>li>a:before { content: '\02794' ; color: #cc0000; position: absolute; display: block; left: 25px; top: .3em; }

.quick-links li a:hover, .categories-box ul a:hover { background-color: #9d9d9d; color: #fff; }

.page { padding: 25px 0; }
.page-in { padding-left: 25px; padding-right: 25px; }
.page .description { color: #ddd; line-height: 1.6em; }

.page .share { float: right; margin-bottom: 30px; }
.page .sort, .page .info, .page .cars { font-size: 16px; line-height: 1.8em; }
.page .sort b, .page .info h3, .page .cars h3 { font-size: 16px; font-weight: 500; }
.page .post-box { line-height: 1.8em; }

.form-horizontal { display: block; margin: auto; padding-left: 15px; padding-right: 15px; }


.FlexEmbed { display: block; overflow: hidden; position: relative; }
.FlexEmbed:before { content: ""; display: block; width: 100%; }
.FlexEmbed--4by3:before { padding-bottom: 75%; }
.FlexEmbed--3by2:before { padding-bottom: 66%; }
.CoverImage { background-position: 50%; background-repeat: no-repeat; background-size: cover; margin: 0 auto 1em; max-height: 600px; max-width: 600px; }

.media-list { padding-top: 25px; padding-left: 25px; padding-right: 25px; }
.media-list .media { }
.media-list .media .media-heading { font-weight: 500; overflow: hidden; font-size: 15px; color: #84d000; padding: .5em 0; padding-left: 18px; margin-bottom: 20px; background: #3b3b3b; }
.media-list .media .media-body { font-size: 13px; line-height: 1.8em; }
.media-list .media .media-body .price { margin: .8em 0; }
.media-list .media .media-body .price b { font-size: 160%; font-weight: 700; }
.items~.media-list { padding-top: 0; }

.pager { padding: 2em 0; font-size: .9em; }
.pager a, .pager b { display: inline-block; margin: 0 .4em; }
.pager a { color: #888; }

.map-box { padding: 10px; }
.map-box .maps { width: 100%; height: 320px; }

#accordion .maps-box { padding-top: 10px; }
.maps-box span { display: block; line-height: 1.8em; font-size: 14px; }
.maps-box p { padding-top: 1.5em; }

#accordion .panel { box-shadow: none; }
#accordion .panel-default { border: none; }
#accordion .panel-default .panel-heading { color: #3b3b3b; background-color: transparent; border-radius: 0; border-bottom: 1px solid #ccc; }
#accordion .panel-default .panel-heading h4 { font-size: 15px; font-weight: 400; }
#accordion .panel-heading+.panel-collapse>.list-group, #accordion .panel-heading+.panel-collapse>.panel-body { border-top: none; }

.contact-heading { padding: 2em 15px; }
.contact-heading p { opacity: .5; }

.contact { padding-bottom: 60px; }
.contact .text-box, .contact .form-box { padding-left: 25px; padding-right: 25px; }
.other-contact .qr-box { margin-left: -15px; margin-right: 10px; }
.other-contact .qr-box img { max-width: 140px; }
.contact > div {   }
.other-contact li { margin-top: 1em; margin-bottom: 1em; font-size: 1.1em; }
.other-contact i.fa { text-align: center; width: 1.1em; }
.other-contact a { color: #000; }

.form-group small { opacity: .5; }

#shareRoundIcons { margin-bottom: 3em; }
.jssocials-share-link { border-radius: 50%; border-width: 1px; }
.jssocials-share-logo { font-size: 1.2em; }

.jssocials-share-link:hover, .jssocials-share-link:focus, .jssocials-share-link:active { border-width: 1px; border-color: #fff; }

.no-products { min-height: 400px; box-sizing: border-box; padding: 10em 0; }

@media screen and (max-width: 425px) {
    .col-xxs-12 { width: 100%; }
}

@media screen and (min-width: 768px) {
    header .container .logo { width: 170px; top: auto; bottom: 10px; left: 25px; }
    .navbar-menu { display: block!important; }
    .search-box { width: 50%; margin-top: -20px; }
    .ei-slider-thumbs { max-width: 750px!important; }
    .wrapper { padding-top: 80px; }
    
    .navbar-menu { background-color: transparent; margin-top: 0; }
    .navbar-menu ul { padding: 15px 0; margin: 0; list-style: none; }
    .navbar-menu ul li { padding: 0; border-bottom: none; }

    header .container {  padding-top: 1px; }
    header .container nav ul { overflow: hidden; padding-top: 32px; padding-bottom: 0; text-align: right; }
    header .container nav ul li { display: inline-block; margin-left: 1px; }
    header .container nav ul li a { display: block; padding: 0 30px; color: #545454; border-bottom: 5px #040404 solid; padding-bottom: .2em; font-weight: 500; letter-spacing: 0; text-align: center; }
    header .container nav ul li a:hover { border-bottom-color: #e01400; text-decoration: none; color: #000; }
    
    .side-search-box { display: block; }
    .side-search-box, .quick-links, .categories-box { display: block; }
    .categories-box ul ul { display: none; }
    
    .media-list .media .media-left .CoverImage { min-width: 220px; min-height: 180px; }
    .sidebar:after { position: absolute; content: ''; position: absolute; display: block; height: 5000000em; background-color: #000; top: 100%; left: 0; right: 0;  }
    
    #accordion { max-width: 480px; }
}

@media screen and (max-width: 992px) {
    .media { margin-bottom: 2em; }
    .media-left, .media>.pull-left { padding-right: 0; }
    .media-list .media .media-heading { margin-bottom: 1px; }
    .media-body, .media-left, .media-right { display: block; }
    .media-list .media .media-left { float: none; display: block; }
    .media-list .media .media-body { display: block; float: none; }
}
@media screen and (min-width: 992px) {
    header .container nav ul li a { padding: 0 45px; }
    .search-box { width: 38%; }
    .ei-slider-thumbs { max-width: 970px!important; }
    
    /*.bg-box { position: fixed; }*/
}

@media screen and (min-width: 1200px) {
    header .container nav ul li a { padding: 0 30px; }
    .ei-slider-thumbs { max-width: 1170px!important; }
}