/* Add here all your CSS customizations */
@import url('https://fonts.googleapis.com/css?family=Anton|Black+Ops+One|Roboto:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
@font-face {
  font-family: "DINPro-Black";
  src: url(../fonts/DINPro-Black.otf);
}

.privacy-content {
  padding-top: 20px;
  padding-bottom: 20px;
}

.privacy-content h2 {
  font-weight: bold;
  color: #b1000e;
}

.privacy-content h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

.cookie-bar {
  position: fixed;
  bottom: 0;
  display: flex;
  width: 100%;
  padding: 20px;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.8);
  z-index: 10000;
}

.cookie-bar>p {
  color: #cfcfcf;
  margin-bottom: 0;
  line-height: 1.8;
}

.cookie-bar>#bar-close {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 20px;
  background-color: transparent;
  border: 0;
}

.maincolor {
  background-color:#CA0010;
}
.ulcontor{
  min-height:174px;
  background-color: rgba(255,255,255,0.7);
}
.navwhiteback {
  /* background-color: rgba(255,255,255,0.7);   */
}
.breadcrumb a {
  color: #727272;
}
.dispalyinline {
  display: inline;
}
.shop ul.products li.product .onsale {
  background-color: #CA0010;
  border-bottom-color: transparent;
}
.carzyback {
  background-image: url(../img/slide-bg-5.jpg);
}
.label {
  display: inline;
  padding: .2em .6em .3em;
  font-family:arial;
  font-size: 12px;
  line-height: 2;
  color: @label-color;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0em;
  background: linear-gradient(-45deg, transparent 4px, #CA0010 0);
  cursor: default;
}

.mtb-10 {
  margin:5px 0;
}

.taghigh {
  min-height: 70px;
}

.taghigh a{
  display: inline;
}

.taghigh a:hover{
  display: inline;
}

.w-pal50 {
  padding-left: 53px;
}

.w-mt-50 {
  margin-top: -65px;
}

.w-pl15 {
  padding-left: 15px;
}

.w-pr15 {
  padding-right: 15px;
}

.w100 {
  width: 100%;
}
/*------------------tabs------------------*/

.tabs {
  border-radius: 4px;
  /*margin-bottom: 20px;*/
}

.nav-tabs {
  margin: 0;
  padding: 0;
  font-size: 12px;
  border-bottom-color: #EEE;
}

.nav-tabs li {
  width: 33.33%;
  text-align: center;
}
.nav-tabs li a {
  border-radius: 0;
  font-size: 14px;
  margin-right: 1px;
}

.nav-tabs li a, .nav-tabs li a:hover {
  background-color: transparent;
  border-bottom: none;
  border-left: 0px solid #EEE;
  border-right: 0px solid #EEE;
  border-top: 0px solid #EEE;
  color: #CCC;
}

.nav-tabs li a:hover {
  border-bottom-color: transparent;
  /* border-top: 3px solid #CCC;*/
  box-shadow: none;
}

.nav-tabs li a:active, .nav-tabs li a:focus {
  border-bottom: 0;
}

.nav-tabs li.active a,
.nav-tabs li.active a:hover,
.nav-tabs li.active a:focus {
  background-color: rgba(255,255,255,0.7);
  border-left-color: #EEE;
  border-right-color: #EEE;
  border-top: 0px solid #CCC;
  /*color: #CCC;*/
}

/* Responsive */
@media (max-width: 991px) {

}

@media (max-width: 479px) {

  .nav-tabs li {
    width: 100%;
    text-align: center;
  }

}


/*.tab-content {
  border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.04);
  background-color: #FFF;
  border: 1px solid #EEE;
  border-top: 0;
  padding: 15px;
}
*/

/*------------------tabs End------------------*/

/*------------------nav list------------------*/

.navlist {
  margin-top: 10px;
  margin-bottom: 12px;
}

.navlist li{
  display: inline;
  padding-right:20px;
}

.added {
  max-height: 20px;
  position: relative;
}

.added ul{
  padding: 0 0 0 77px;
}


.added a{
  clear: both;
  font-size: 12px !important;
  padding: 0 !important;
}
/*------------------end nav list------------------*/

/*------------------product list group------------------*/


.grouplist {
  float: left;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 0 7px 0px;
  position: relative;
  color: #000;
}

.grouplist li{
  display:inline-block
}

.grouplist > li > a {
  color: #444;
  text-decoration: none;
  margin-right: 10px;
}

.grouplist > li > a > .fa,
.grouplist > li > a > .glyphicon,
.grouplist > li > a > .ion {
  margin-right: 5px;
}

.grouplist >li.active{
  height: 30px;
  width: 5px;
  padding-right:10px;
  background: red;
  margin-right: 20px;
  padding-left: 20px;
}





/* Responsive */
@media (max-width: 991px) {
  .portfolio-nav, .portfolio-nav-all {
    display: none;
  }
}
/* Team List */
ul.team-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.team-list .team-item {
  margin-bottom: 35px;
}

ul.team-list .team-item .thumb-info-social-icons {
  margin: 0 10px;
}

/*------------------內頁 頁簽 選單------------------*/
.page-button{
  line-height: 100px;
  height: 90px;
  display:block;
  text-align: center;
}
.page-button > h5{
  display: inline-block;
  font-weight: bold;
}
.page-header1 > h5:before{
  content: '';
  border-left: 6px  solid #CA0010;
  margin-right: 12px;
}
.page-header, .page-header1, .page-button > h5{
  margin: 0;
  padding: 0;
}
.fa-minus:before{
  content: '';
}
.page-header-more-padding{
  padding: 0;
}


/*------------------首頁  手機板三明治------------------*/
@media screen and (min-width: 376px) and (max-width: 768px){

  #header .header-btn-collapse-nav {
    margin: 35px 0 8px 15px;
  }

}
/*------------------首頁  中間四個紅色按鈕------------------*/

.red_bt{
  padding: 1px;
}
.red_bt img {
  width: 100%;
}
@media screen and (max-width:743px){
  .red_bt{
    margin-bottom:10px;
  }
}
/*------------------Ê×í“  top 50------------------*/
.top50_title{
  display: block;
  background-image: url(../img/icons/top50.jpg);
  overflow: hidden;
  text-align: center;
  height:235px;
  padding-top: 6px;
  font-family: DINPro-Black;
  font-size: 66px;
  color: #ffffff;
  line-height: 1;
}
.top50_title P{
  font-size: 120px;
  color: #ffffff;
  padding-top: 37px;
}
.top50_title span{
  display: block;
  font-size: 15px;
  margin-top: 60px;
}
.top50_title span i{
  margin-left: 10px;
}
.top50_title:hover{
  text-decoration: none;
}
.top50_title:hover,
.top50_title:hover P{
  color: #999;
}
.top_50{
  height: 223px;
}
.top_50 img{
  width: 100%;
  /* height: 100%; */
}
.top_50 span{
  display: block;
  width: 100%;
  background-color:#CA0010;
  color: #fff;
  line-height: 3;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  height: 48px;
  overflow: hidden;
}

@media screen and (min-width: 991px) and (max-width: 1200px){
  .top50_title{
    height: 200px;
    padding-top: 13px;
    font-size: 60px;
  }
  .top50_title P{
    font-size: 100px;
    padding-top: 30px;
  }
  .top50_title span{
    font-size: 12px;
    margin-top: 45px;
  }
  .top_50 {
    height: 187px;
  }

  .top_50 span{
    line-height: 2;
  }

}
@media screen and (min-width: 768px) and (max-width: 991px){
  .top50_title{
    height: 303px;
    padding-top: 18px;
    font-size: 90px;
  }
  .top50_title P{
    font-size: 156px;
    padding-top: 50px;
  }
  .top50_title span{
    font-size: 12px;
    margin-top: 77px;
  }
  .top_50 {
    height: 239px;
    margin-bottom: 73px;
  }
  .top_50 span{
    line-height: 4;
  }
}
@media screen and (min-width: 525px) and (max-width: 767px){
  .top50_title{
    height: 219px;
    padding-top: 12px;
    font-size: 64px;
  }
  .top50_title P{
    font-size: 112px;
    padding-top: 35px;
  }
  .top50_title span{
    margin-top: 49px;
  }
  .top_50 {
    height: 427px;
    margin-bottom: 86px;
  }

  .top_50 span{
    line-height: 4;
  }
}
@media screen and (min-width: 0px) and (max-width: 524px){
  .top50_title{
    padding-top: 9px;
    font-size: 66px;
  }
  .top50_title P{
    font-size: 113px;
    padding-top: 40px;
  }
  .top50_title span{
    margin-top: 57px;
  }
  .top_50 {
    height: 300px;
    margin-bottom: 86px;
  }
  /*
    .top_50 span{
      line-height: 4;
    } */
}
/*------------------footer------------------*/
.col-sm-12.col-md-12.col-lg-7 a{
  display: inline-block;
  line-height: 50px;
  padding: 5px 10px;
  border-right: 1px #fff solid;
  margin:-4px -3px -2px 0;
}
.col-sm-12.col-md-12.col-lg-7 a:first-child{
  font-size: 20px;
  text-decoration: none;
}
.col-sm-12.col-md-12.col-lg-7 a:last-child{
  border-right: none;
}
.col-sm-12.col-md-12.col-lg-7 a:nth-child(3):hover{
  background-color:#dd4b39;
}
.col-sm-12.col-md-12.col-lg-7 a:nth-child(4):hover{
  background-color:#3b5a9a;
}
.col-sm-12.col-md-12.col-lg-7 a:nth-child(5):hover{
  background-color:#966858;
}
.col-sm-12.col-md-12.col-lg-7 a:nth-child(6):hover{
  background-color:#FF8833;
}
.col-sm-12.col-md-12.col-lg-7 a:nth-child(7):hover{
  background-color:#A53B3B;
}
#footer .COPYRIGH p{
  height: 50px;
  line-height: 59px !important;
  float: right;
}


@media screen  and (max-width: 1200px){
  /* .col-sm-12.col-md-12.col-lg-7 a:last-child {
    float: right;
    margin:0;
  } */
  .col-sm-12.col-md-12.col-lg-7 a:nth-child(7){
    border-right: none;
  }
  #footer .COPYRIGH{
    border-top: 2px solid #fff;
  }
  #footer .COPYRIGH p{
    float: none;
    text-align: center;
    font-size: 12px;
    margin-top: 20px;
  }
}
@media screen and (min-width: 501px) and (max-width: 767px){
  .col-sm-12.col-md-12.col-lg-7 a{
    margin:-3px -3px 0 0;
    border-right: none;
  }
  .col-sm-12.col-md-12.col-lg-7 a:nth-child(2){
    font-size: 18px;
  }
}
@media screen and (min-width: 1px) and (max-width: 506px){
  .col-sm-12.col-md-12.col-lg-7 a{
    margin:-3px -3px 0 0;
    border-right: 0px #fff solid;
  }
  #footer .COPYRIGH p{
    line-height: 2 !important;
  }
  .col-sm-12.col-md-12.col-lg-7 a:nth-child(2){
    font-size: 18px;
  }
}
@media screen and (min-width: 1px) and (max-width: 550px){
  .col-sm-12.col-md-12.col-lg-7 a:nth-child(2)/*,
   .col-sm-12.col-md-12.col-lg-7 a:last-child */{
    float: none;
    width: 70%;
    border-right: none;
  }
}
@media screen and (min-width: 1px) and (max-width: 479px){
  .nav-pills{
    margin-top: 10px;
  }
  .nav-pills>li{
    line-height: 10px;
  }
}
/*------------------麵包屑------------------*/
.navigation, .breadcrumb{
  background-color: #eaeaea;
}
.navigation{
  padding: 0 ;
  height: 44px;
  margin-bottom: 10px;
}
.navigation .active{
  color:#a53b3b;
  font-weight: bold;
}
@media screen  and (max-width: 768px){
  .navigation{
    display: none;
  }
}
/*------------------標題兼banner------------------*/
.imgbanner{
  /*font-family: 'STENCIL', 'serif';
  -webkit-font-family: 'STENCIL', 'serif';
  -moz-font-family: 'STENCIL', 'serif';
  -ms-font-family: 'STENCIL', 'serif';*/
  background-size: cover;
  width: 100%;
  height: 400px;
  line-height: 400px;
  text-align: center;
  color: #a53b3b;
  font-size: 77px;
  background-position: center center;
}

@media screen and (min-width: 501px) and (max-width: 700px){
  .imgbanner{
    height: 260px;
    line-height: 260px;
  }
}
@media screen and (min-width: 420px) and (max-width: 500px){
  .imgbanner{
    height: 200px;
    line-height: 200px;
  }
}
@media (max-width: 991px) {
  .nav-tabs li{
    width: 98%;
  }
}
/*------------------footer blogspot bt------------------*/
#blogspot{
  line-height: 50px;
}
#blogspot:hover a{
  background-color: #FF8833;
}
#blogspot img{
  width: 20px;

}

/*------------------首頁 新品和新聞的文字------------------*/
.mtb-10.p-none.new{
  background-image:url(../img/icons/index_big_button4.jpg);
}
.mtb-10.p-none.news{
  background-image:url(../img/icons/index_big_button.jpg);
}
.mtb-10.p-none{
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size:  cover;
}
.mtb-10.p-none a{
  display: block;
  /*color: #fff;*/
}
.mtb-10.p-none a:hover{
  text-decoration: none;
}
.mtb-10.p-none a span{
  display: block;
  height: 288.9px;
  padding-top: 32%;
  margin: 0 44px 21px 44px;
  text-align: justify;
  line-height: 1.8;
  overflow: hidden;
}
@media screen and (min-width: 992px) and (max-width: 1200px){
  .mtb-10.p-none a span{
    display: block;
    height: 234px;
    padding-top: 30%;
  }
}
@media screen and (min-width: 744px) and (max-width: 991px){
  .mtb-10.p-none a span{
    height: 319px;
    padding-top: 34%;
    margin: 0 60px 71px 60px;
  }
}
@media screen and (min-width: 716px) and (max-width: 743px){
  .mtb-10.p-none a span{
    height: 333px;
  }
}
@media screen and (min-width: 700px) and (max-width: 715px){
  .mtb-10.p-none a span{
    height: 304px;
    padding-top: 34%;
    margin: 0 60px 71px 60px;
  }
}
@media screen and (min-width: 658px) and (max-width: 699px){
  .mtb-10.p-none a span{
    height: 297px;
    padding-top: 31%;
  }
}
@media screen and (min-width: 633px) and (max-width: 657px){
  .mtb-10.p-none a span{
    height: 264px;
  }
}
@media screen and (min-width: 600px) and (max-width: 632px){
  .mtb-10.p-none a span{
    height: 253px;
  }
}
@media screen and (min-width: 588px) and (max-width: 599px){
  .mtb-10.p-none a span{
    height: 250px;
  }
}
@media screen and (min-width: 566px) and (max-width: 587px){
  .mtb-10.p-none a span{
    height: 259.9px;
    padding-top: 35%;
  }
}
@media screen and (min-width: 541px) and (max-width: 565px){
  .mtb-10.p-none a span{
    height: 256px;
  }
}
@media screen and (min-width: 516px) and (max-width: 540px){
  .mtb-10.p-none a span{
    height: 229.9px;
    padding-top: 32%;
  }
}

@media screen and (min-width: 499px) and (max-width: 515px){
  .mtb-10.p-none a span{
    height: 229px;
    padding-top: 34%;
    margin:0 34px 32px 34px;
  }
}
@media screen and (min-width: 477px) and (max-width: 498px){
  .mtb-10.p-none a span{
    height: 221px;
    padding-top: 34%;
    margin:0 34px 32px 34px;
  }
}
@media screen and (min-width: 457px) and (max-width: 476px){
  .mtb-10.p-none a span{
    height: 204px;
    padding-top: 33%;
    margin:0 35px 38px 35px;
  }
}
@media screen and (min-width: 439px) and (max-width: 456px){
  .mtb-10.p-none a span{
    height: 181px;
    padding-top: 33%;
    margin:0 35px 38px 35px;
  }
}
@media screen and (min-width: 407px) and (max-width: 438px){
  .mtb-10.p-none a span{
    height: 165px;
    margin:0 35px 38px 35px;
  }
}
@media screen and (min-width: 340px) and (max-width: 406px){
  .mtb-10.p-none a span{
    height: 161px;
    margin:0 20px 22px 20px;
  }
}
@media screen and (min-width: 362px) and (max-width: 399px){
  .mtb-10.p-none a span{
    height: 150px;
    margin:0 20px 22px 20px;
  }
}
@media screen and (min-width: 100px) and (max-width: 361px){
  .mtb-10.p-none a span{
    height: 133px;
    margin:0 20px 22px 20px;
  }
}
/*------------------產品內容頁------------------*/
.fr{
  float: right;
}

@media screen and (min-width: 10px) and (max-width: 991px){
  .fr{
    float: none;
  }
}
/*---social media 大小-----*/
a.instagram{
  position: relative;
}
a.instagram img{
  position: absolute;
  top: -18px;
  left: 5px;
  width: 33px;
}
a.instagram.detail img{
  top: 0;
  left: 0px;
}
@media screen and (min-width: 10px) and (max-width: 991px){
  .fr{
    float: none;
  }
}
#footer .footer-copyright a i.fa-lg{
  font-size: 2.2em;
  line-height: 1.75em;
}

ul.products.product-thumb-info-list{padding:0;list-style:none;}
ul.products.product-thumb-info-list li{margin-bottom: 20px;}
#mainNav,       /* 主選單 */
.nav.nav-pills, /* 次選單 */
.bottom-label,  /* bannrt 副標 */
.top_50 span,   /* top 50小字 */
.mtb-10.p-none a span,/* news+new */
.col-sm-12.col-md-12.col-lg-7 a:first-child,/* footer 數字 */
.COPYRIGH{
  font-family: 'Roboto', sans-serif;
}
.top50_title{/* top 50主標 */
  font-family: 'Anton', "微軟正黑體",sans-serif;
}
.main-label,/* bannrt 主標 */
.company h5,
.company dt{
  font-family: 'Black Ops One',"微軟正黑體", cursive;
  opacity: 1;
}

#mainNav,     /* 主選單 */
.top_50 span, /* top 50小字 */
.col-sm-12.col-md-12.col-lg-7 a:first-child{ /* footer 數字 */
  font-weight: 700;
}
.nav.nav-pills, /* 次選單 */
.top50_title,   /* top 50主標 */
.main-label,    /* bannrt 主標 */
.bottom-label,  /* bannrt 副標 */
.mtb-10.p-none a span,/* news+new */
.COPYRIGH,
.company h5,
.company dt{
  font-weight: 400;
}

.btn.btn-borders:hover a{
  color: #fff !important;
}
.coblack a{
  color: #000;
}
#footer{
  margin-top: 0;
}
.summary .mb-none{
  font-size: 1.4em;
  line-height: 30px;
}
.mb-none strong{
  /*height: 53px;*/
  display: block;
  overflow: hidden;
  margin-bottom: 10px;
}
@media screen and (min-width: 506px) and (max-width: 570px){
    #header .header-nav-top .nav > li > a, #header .header-nav-top .nav > li > span{
    padding: 6px 3px;
  }
}
@media screen and (min-width: 0px) and (max-width: 505px){
    #header .header-nav-top{
      float: left;
      margin: 0;
    }
    .secondary .nav-pills{
      width: 106px;
    }
    .secondary .nav-pills>li a{
      text-align: right;
    }
}
hr.tall{
  margin: 20px;
}
.owl-carousel{
  margin-bottom: 0;
}

.mibiledisplaynav {
  display: none !important;
}

@media screen and (max-width: 767px) and (min-width: 506px){
  .mibiledisplaynav {
    display: block !important;
    width: 50px;
  }
}

@media screen  and (max-width: 505px){
  .mibiledisplaynav {
    display: block !important;
    width: 180px;
    padding-left: 10px;
  }
}

.inquiry {
  padding-bottom: 5%;
}