@import url(https://fonts.googleapis.com/css?family=Hammersmith+One|Orienta|Fjalla+One);

body{ padding: 0; margin: 0; padding-top: 130px; font-size: 12px; font-family:'Orienta', '微軟正黑體', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a{ color: #aeaeae; }
a:hover{ text-decoration: none; }
.top{ height: 75px; }
.logo{ padding:20px 0 0 20px; display: block; }
header{ background-color: #000; }
.right-padding{ padding-right: 20px; }
.navbar{ margin-bottom: 0; }
.fa-search{ color: #fff;}
.search-query{ width: 80%; margin-right: 10px; background-color: #000;  border: none; border-bottom: 1px solid  #fff; padding: 1%;}
.navbar-search{ margin: 40px 5% 0 0; }
#carousel-id { margin-bottom: 3%; }
#carousel-id img{ width: 100%; height: auto; }
footer{ background-color: #000; overflow: hidden; padding:20px; margin:0; }
footer p{ color: #fff; padding: 0 5px; line-height: 1.6; }
footer a{ color: #fff; }
footer a:hover{ color: #848484; text-decoration: none; }

/* clear */
.breadcrumb{ background-color: #fff; }
.well{ background-color: #fff; border: none; -webkit-box-shadow: none; box-shadow: none; }
.pages{ margin-bottom: 20px; overflow: hidden;}
.site-heading{ text-align: center; color: #fff; }
.intro-header{
display: block;
background:#000 no-repeat center center;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin-bottom: 30px;
padding-bottom: 10%;
 }

/* mask */
.recent-work-wrap {
  position: relative;
}
.recent-work-wrap img{
  width: 100%;
}
.recent-work-wrap .recent-work-inner{
  top: 0;
  background: transparent;
  opacity: .8;
  width: 100%;
  border-radius: 0;
  margin-bottom: 0;
}
.recent-work-wrap .recent-work-inner h3{
  margin: 10px 0;
}
.recent-work-wrap .recent-work-inner h3 a{
  font-size: 15px;
  color: #fff;
}
.recent-work-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 0;
  background: rgba( 0,0,0,0.7 );
  color: #fff;
  vertical-align: middle;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;  
  padding: 30px;
}
.recent-work-wrap .overlay .preview {
  bottom: 0;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  border-radius: 0;
  background: transparent;
  text-align: center;
  color: #fff;
}
.recent-work-wrap:hover .overlay {
  opacity: 1;
}

/* reset */
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus{ background-color: #000000; }
.btn-black{ background-color: #000; color: #fff; border-radius: 0px; }
.btn-black:hover{ background-color: #222; color: #fff; }
.thumbnail{border-radius: 0px; }
.navbar-nav > li > a{ display: block; padding-top: 10px; padding-bottom: 10px; font-size: 15px; }
.navbar{ border: 1px solid transparent; margin-bottom: 0px; min-height: 30px; position: relative; }
h1{ font-size: 24px; }
.color-picker img{ vertical-align: inherit; width: 24px; }
.picker-color{ cursor: pointer; display: inline-block; padding:3px; font-size: 0; }
#chosen_attr{ height: 17px; line-height: 17px; }
.color-picker .selected{ border: 1px solid #999; }

.pro-main h3{ font-size: 18px; margin: 0; margin-top: 8px; margin-bottom: 3px; }
.pro-main p strong{ font-size: 15px; }
.pro-main p span.red{ color: #ff0000; }
.pro-main p span.big{ font-size: 2.4em; }
.pro-main p span.nt{ font-size: 12px; }
.pro-main .thumbnail .caption a{ font-size:0.7em; }
.pro-main button.btn{ padding: 2px 5px; }
.pro-main .input-group{ margin-bottom: 2%; }
.pro-main span.input-group-btn i.glyphicon{ font-family: 'Orienta'; }
.pro-main .addCart .btn{ padding: 5px 10px; }
.pro-main input.btn{ padding: 2px 0; height: 26px; }
.pro-main p{ margin-bottom: 5px; margin-top: 5px; }
.addCart a{ padding: 5px 0; margin: 0; font-size: 1.1em; }
.pro-list h4.pull-right{ font-size:14px; margin-top: 13px; }
.pro-list .thumbnail{ margin-bottom: 20px; }
.pro-list .thumbnail .caption a{ font-size: 0.6em; }
.pro-other h3{ font-size: 24px; }
.pro-other .caption h4{ font-size: 14px; text-align: right; margin: 0; }
.pro-other .thumbnail{ margin-bottom: 10px; }
.blog .excerpt{ font-size: 14px; color: #777777; line-height: 2.4; }
.blog .post-entry{ font-size: 110%; height: 1%; margin-bottom: 1.5em; overflow: hidden; }
.blog h2{ color: #777777; line-height: 1.2em; }
.blog h2 a{ color: #777777; text-decoration: none; }
.blog h2 a:hover{ color: #000; }
.blogList .blog-title{ border-bottom: 2px solid #e9e9e9; text-align: left; margin-bottom: 10px; }
.blogList .blog-title strong{ font: 25px/35px Muli, 微軟正黑體; color: #444; }
.blogList .blog-title strong span { border-bottom: 2px solid #444; display: inline-block; margin-bottom: -2px; }
.blogList .blogLsit-content li{ padding: 7px 0; }
.blogList .blogLsit-content li a{ color: #777777; } 
.blogList .blogLsit-content li a:hover{ color: #000; }
.list-unstyled li{ line-height: 2; }

.saleprice{ color: red; }
#oriprice{ letter-spacing: 1px; }

#carousel-id .carousel-control.right, .carousel-control.left{ 
background-image: -webkit-gradient(linear,0 top,100% top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));
background-image: -webkit-linear-gradient(left,color-stop(rgba(0,0,0,0) 0),color-stop(rgba(0,0,0,0) 100%));
background-image: -moz-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000',endColorstr='#00000000',GradientType=1);
}

#carousel-id span.glyphicon-chevron-left, #carousel-id span.glyphicon-chevron-right{ margin-left: -10px; }
.social-media{ margin-top: 30px; }
.communityIcon{ font-size: 2em; padding-left: 1.2%; padding-right: 1%; width: 100%; overflow: hidden; }
.communityIcon img{ opacity: 0.6; }
.communityIcon img:hover{ opacity: 1; }
.communityIcon a{ font-size: 15px; color: #999999; margin-right: 5px; }
.communityIcon a:hover{ color: #ffffff; }

#sidebar-wrapper{ height: 70%; }

.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{
  background-color: #000000;
  border-color: 1px solid #000000;
}
.pagination>li>a, .pagination>li>span{ border: none; }
.pagination>li>a:hover{ color: #000000; }

.table>thead>tr>td.success, .table>tbody>tr>td.success, .table>tfoot>tr>td.success, .table>thead>tr>th.success, .table>tbody>tr>th.success, .table>tfoot>tr>th.success, .table>thead>tr.success>td, .table>tbody>tr.success>td, .table>tfoot>tr.success>td, .table>thead>tr.success>th, .table>tbody>tr.success>th, .table>tfoot>tr.success>th {
  background-color: #000000;
  border-color: #ffffff;
  color: #ffffff;
}
.table>thead>tr>td.warning, .table>tbody>tr>td.warning, .table>tfoot>tr>td.warning, .table>thead>tr>th.warning, .table>tbody>tr>th.warning, .table>tfoot>tr>th.warning, .table>thead>tr.warning>td, .table>tbody>tr.warning>td, .table>tfoot>tr.warning>td, .table>thead>tr.warning>th, .table>tbody>tr.warning>th, .table>tfoot>tr.warning>th{
  background-color: #ffffff;
  border-color: #dddddd;
}

.recent-work-wrap .overlay{ display: none; }
.table-responsive{ font-size: 14px; }
.thumbnail .caption{ min-height: 80px; }


.producttab-desc{
    margin-bottom: 10px;
}

.producttab-desc .tab-content{
    padding: 10px;
    border: 1px solid #ddd;
    border-top: 0;
    
}

.producttab-desc .nav-tabs>li>a {
    background-color: #eee;
}
.producttab-desc .nav-tabs>li.active>a {
    background-color: #fff;
}

.slick-prev:before, .slick-next:before {
    color: #000 !important;
}
/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

.footer ul.footerlink{
margin: 0;
    padding: 0;
    line-height: 50px; 
}

.footer ul.footerlink li{
        display: inline-block;
    width: auto;
    text-align: inherit;
    padding: 0;
    margin: 0;
}

.footer .social-links li a {
   color: #999;
    font-size: 25px;
    line-height: 35px;
    border-radius: 10%;
    text-align: center;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-color: #4a4a4a;
    padding: 5px;
    width: 45px;
    height: 45px;
    display: block;
}
.footer .social-links li a:hover{
    background-color: #696363;
}
.footer .social-links li {
    display: inline-block;
    margin: 0 15px 20px;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.newmagamenu{
/*    margin-top: 5px;*/
        margin-left: 40px;
    margin-right: 40px;
}

.newmagamenu .mega-dropdown {
  position: static !important;
}
.newmagamenu .mega-dropdown-menu {
       padding: 20px 0px;
    width: 98%;
    box-shadow: none;
    -webkit-box-shadow: none;
    margin-left: 14px;
    margin-right: 14px;
}
.newmagamenu .mega-dropdown-menu > li > ul {
  padding: 0;
  margin: 0;
}
.newmagamenu .mega-dropdown-menu > li > ul > li {
  list-style: none;
    padding-top: 5px;
    padding-bottom: 5px;
}
.newmagamenu .mega-dropdown-menu > li > ul > li > a {
  display: block;
  color: #222;
  padding: 3px 5px;
}
.newmagamenu .mega-dropdown-menu > li ul > li > a:hover,
.newmagamenu .mega-dropdown-menu > li ul > li > a:focus {
  text-decoration: none;
    background-color: #F0F0F0;
}

.newmagamenu .navbar-inverse .navbar-nav>.open>a{
    color: #fff;
    
}
.newmagamenu .mega-dropdown-menu .dropdown-header {
  font-size: 18px;
  color: #ff3546;
  padding: 5px 60px 5px 5px;
  line-height: 30px;
}


.newmagamenu .mega-dropdown-menu ul li.level2-submenu{
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    
}

.newmagamenu .mega-dropdown-menu ul li.level2-submenu ul{
    display: none;    
}

.newmagamenu .mega-dropdown-menu li:hover li a:hover, 
.newmagamenu .mega-dropdown-menu li:hover li a:focus, 
.newmagamenu .mega-dropdown-menu li:hover li:hover a{
    background-color: #F0F0F0;
        padding-top: 3px;
    padding-bottom: 3px;
}

.newmagamenu .mega-dropdown-menu ul li.level2-submenu a:hover{
    background-color: #F0F0F0;
}

.newmagamenu .mega-dropdown-menu ul li.level2-submenu a:hover ul li, .newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li a{
    background-color: #fff;
}

.newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul{
display: block;
    position: absolute;
    top: 0;
    left: 50%;
    background-color: #fff;
    z-index: 1;
    width: 60%;
    padding-left: 0;
}

.newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li, .newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li, .newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li{ 
    background-color: #fff;
        list-style: none;
    
}

.newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li, .newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li, .newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li{ 
    background-color: #fff;
    
}

.newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li:hover, .newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li:hover, .newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li:hover, .newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li:hover a, .newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li:hover a, .newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li:hover a{
    background-color: #F0F0F0;
}

.newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li, .newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li, .newmagamenu .mega-dropdown-menu ul li.level2-submenu:hover ul li{ 
    background-color: #fff;
    
}
.newmagamenu .mega-dropdown-menu ul li.level2-submenu ul li a{
    width: 100%;
    display: inline-block;
    padding: 5px 10px !important;
}
.newmagamenu .dropdown-menu.mega-dropdown-menu{
    background-color: rgba(255,255,255,0.9)
    
}


.specialty3 .item{
position: relative;
    overflow: hidden;
}

.specialty3 .item .boxitem .newdetail{
    position: absolute;
    z-index: 1;
    top: 75%;
    background: rgba(0,0,0,0.6);
    height: 100%;
    transition: all 0.9s cubic-bezier(.31,1.05,.49,.99);
    padding-top: 0;
    width: 100%;
}

.specialty3 .item .boxitem:hover .newdetail{
    top: 0%;
    background: rgba(0,0,0,1);
}

.specialty3 .item .boxitem{
        overflow: hidden;
    position: relative;
    width: 100%;
    display: inline-block;
}


.specialty3 .item .boxitem .newdetail .topsection h1{
    text-align: center;
    color: #fff;
    font-size: 25px;
    line-height: 40px;
    display: block;
    width: 100%;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.specialty3 .item .boxitem .newdetail .linewhite{
    width:100%;
    height: 1px;
    background-color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
    text-align: center; 
    opacity: 0;
    transform: scale(0, 1);
}

.specialty3 .item .boxitem:hover .newdetail .linewhite{    
transition: all 0.6s cubic-bezier(.31,1.05,.49,.99) 0.3s;
transform: scale(1,1);
  opacity: 1;
}

.specialty3 .item .boxitem .newdetail .bottomsection{
       padding: 5px 25px 20px 25px;
    text-align: justify;
    line-height: 28px;
    color: #fff;
        opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease 0.65s;
}

.specialty3 .item .boxitem:hover .newdetail .bottomsection{
    transform: translateY(0);
    opacity: 1;
}


.specialty3 .item .boxitem .newdetail a.btndisplay{
    line-height: 26px;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 3px;
    width: 100px;
    font-size: 14px;
    text-align: center;
    color: rgba(255,255,255,1);
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transform: translateY(30px);
}
.specialty3 .item .boxitem:hover .newdetail a.btndisplay{
    transform: translateY(0);
    transition: all 1.4s cubic-bezier(.31,1.05,.49,.99) 0.95s;
    display: block;
    opacity: 1;
}

.specialty3 .item .boxitem .newdetail a.btndisplay:hover {
    background: rgba(0,0,0,0.4);
    color: rgba(255,255,255,1);
}

.type2searchbar{
    
}

.type2searchbar:hover .type2searchbarform{
    display: block !important;
    
}

.type2searchbar .type2searchbarform{
    margin-top: 0;
    position: absolute;
    right: 0;
        display: none;
    z-index: 1001;
}

.type2searchbar .type2searchbarform .search-query{
margin-top: 0;
    position: absolute;
    right: 0;
    width: 150px;
    background-color: #fff;
    border: 1px solid #ccc;
    height: 25px;
    font-size: 14px;
    padding-left: 5px;
    padding-right: 25px;
}

.type2searchbar .type2searchbarform a{
    position: absolute;
    right: 13px;
    z-index: 1;
    top: 3px;
}

.type2searchbar .type2searchbarform a .fa-search{
    color: #ccc;
    font-size: 17px;
}

.searchtycommunityIcon{
    padding-right: inherit !important;
}

 @media screen and (max-width: 767px) {
     .navbar-toggle{
        position: absolute;
        right: 0;
        top: -55px;
     }
     .navbar{
         min-height: 0;
     }
     .type2searchbar{
         display: none !important;
     }
     .searchtycommunityIcon, .communityIconheader {
    padding-right: unset;
         display: none;
}
     .newmagamenu{
         display: none;
     }
      .side-collapse-container{
          width:100%;
          position:relative;
          left:0;
          transition:left .4s;
      }
      .side-collapse-container.out{
          left:200px;
      }
      .side-collapse {
          top:50px;
          bottom:0;
          left:0;
          width:200px;
          position:fixed;
          overflow:hidden;
          transition:width .4s;
      }
      .side-collapse.in {
          width:0;
      }
      .fn-1 ul li a{
      color:#fff!important;
      }
      .side-collapse {

      overflow-y: scroll;

    }
}


@media (min-width: 480px) { 
.search-query{ width: 80%; }
.communityIcon a{ padding: 0 3%; margin-right: 5px; }
.social-media .communityIcon{ padding-right: 20px; }
.social-media{ margin-top: 30px; }
.communityIcon a{ padding: 0 1%; }
}

@media (max-width: 480px) {  
.input-group .form-control:first-child{ width: 60px; text-align: right; }
 }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.search-query{ width: 80%; }
.intro-header .site-heading, .intro-header .post-heading, .intro-header, .page-heading { padding: 10% 0;}
.communityIcon a{ padding: 0 1%; margin-right: 5px; }
.footer-order{ text-align: right; }
.social-media .communityIcon{ padding-right: 10px; }
.social-media{ margin-top: 35px; }
.communityIcon a{ padding: 0 1%; }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.search-query{ width: 80%; }
.communityIcon a{ padding: 0 3%; margin-right: 5px; }
.footer-order{ text-align: right; }
.social-media{ margin-top: 35px; }
.social-media .communityIcon{ padding-right: 0; }
.communityIcon a{ padding: 0 1%; }
 }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.search-query{ width: 80%; }
.pro-other h3{ font-size: 18px; }
.social-media{ margin-top: 40px; }
.communityIcon{ padding-right: 5%; }
.communityIcon a{ padding: 0 1%; margin-right: 5px; text-align: right; }
.footer-order{ text-align: right; }
}

@media (max-width: 767px){
    .navbar-nav .open .dropdown-menu li ul{
        margin-left: 20px;
    }
     body{
       padding-top:60px;
    }
}