@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

body{
    overflow: hidden;
    font-family: 'Noto Sans TC', sans-serif;
}
.eewhintro h1{
                border-left: 5px solid #299470;
                margin: 30px;
                padding-left: 10px;
                font-size: 30px;
                font-weight: 500;
                font-family: 'Noto Sans TC', sans-serif;
            }
.home-side-menu-container .side-menu-title2 {
    background-color: #f5f5f5;
    color: #299470;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-align: right;
    padding: 14px 15px;
    border-radius:0 0 5px 5px;
    margin: 0;
    border-bottom: 1px solid #ddd;
}
.home-side-menu-container a:hover{
    text-decoration: none;
}
.owl-carousel .owl-nav{
    top:41%;
    width: 100%;
}
.owl-carousel .owl-nav .owl-prev{
    position: absolute;
    left:0px;
}
.owl-carousel .owl-nav .owl-next{
    position: absolute;
    right:0px;
}

.e1img img{
                height: 300px;
                width: auto;
                display: block;
                margin: 30px auto;
            }
.e1icon img, .e2icon img, .e3icon img, .e4icon img{
                height: 50px;
                width: 50px;
                margin-right:30px;  
            }
.e1icon a{ 
                color: #299470;
                font-weight: 500;
            }
.e2icon a{ 
                color: #608ad2;
                font-weight: 500;
            }
.e3icon a{ 
                color: #727272;
                font-weight: 500;
            }
.e4icon a{ 
                color: #d66078;
                font-weight: 500;
            }
.e1icon a, .e2icon a, .e3icon a, .e4icon a{ 
                font-size:25px;
                border: none;
                font-family: 'Noto Sans TC', sans-serif;
            }
.e1icon a, .e2icon a, .e3icon a, .e4icon a:hover{
                text-decoration: none;
            }
.e1icon p, .e2icon p, .e3icon p, .e4icon p{
                margin-left:100px; 
                font-size:20px;
                font-family: 'Noto Sans TC', sans-serif;
            }
.e1up{display: none;}

.e1icon{
    position: relative;
    top: 40px;
}
.e2icon{
                position: relative;
                top: 60px;
            }
.e3icon{
                position: relative;
                top: 85px;
            }
.e4icon{
               position: relative;
                top: 35px; 
            }
@media (max-width: 992px) {
        .e1up{display: block;}
        .e1down{display: none;}
        .e1icon, .e2icon, .e3icon,.e4icon{
            top:0;
            margin: 30px auto;
            }
}
/* Icon Hover Float */
.hvr-float {
                display: inline-block;
                vertical-align: middle;
                -webkit-transform: perspective(1px) translateZ(0);
                transform: perspective(1px) translateZ(0);
                box-shadow: 0 0 1px transparent;
                -webkit-transition-duration: 0.3s;
                transition-duration: 0.3s;
                -webkit-transition-property: transform;
                transition-property: transform;
                -webkit-transition-timing-function: ease-out;
                transition-timing-function: ease-out;
                }
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
                -webkit-transform: translateY(-8px);
                transform: translateY(-8px);
                }
.desktop-hexagonal .col-md-2, .mobile-hexagonal .col-xs-6{
                padding: 5px;
            }
.row1{
                position: relative;
                top:55px;
            }
.row3{
                position: relative;
                top:-55px;
            }
            
.desktop-hexagonal img{
                display: block;
                width: 100%;
                margin: 0 auto;
                opacity: 1;
                transition: .5s ease;
                backface-visibility: hidden;
            }
.mobile-hexagonal .col-xs-6 img{
                display: block;
                width: 100%;
                margin: 0 auto;
                opacity: 0.4;
                transition: .5s ease;
                backface-visibility: hidden;
            }
.mobile-hexagonal .col-xs-12 img{
                display: block;
                width: 55%;
                margin: 0 auto;
                opacity: 0.4;
                transition: .5s ease;
                backface-visibility: hidden;
            }
.desktop-hexagonal .col-md-2:hover img, .mobile-hexagonal .col-xs-6:hover img, .mobile-hexagonal .col-xs-12:hover img{
                opacity: 0.2;
            }
.desktop-hexagonal .nohover:hover img{
                opacity: 1;
            }
.middleh {
                transition: .5s ease;
                opacity: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%)
            }
.middleh2 {
                transition: .5s ease;
                opacity: 1;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%)
            }

.desktop-hexagonal .col-md-2:hover .middleh{
                opacity: 1;
            }
.texth {
                background-color: transparent;
                color: black;
                font-size: 20px;
                font-weight: 500;
                font-family: 'Noto Sans TC', sans-serif;
                padding: 0;
            }
            
.mobile-hexagonal, .mobile-fl{
                display: none;
            }
.fl{
                width: 25%;
                height: 500px;
                border: none;
                padding:30px;
                margin: 30px 48px;
                border-radius:150px;
                box-shadow:0px 0px 30px #cccccc;
                background-color: white;
            }
.fl img{
                display: block;
                width: 100px;
                height: 100px;
                margin: 0 auto;
            }
.fl h1{
                border: none;
                margin: 30px;
                padding:0;
                font-size: 30px;
                font-weight: 400;
                font-family: 'Noto Sans TC', sans-serif;
            }
.fl li{
                margin: 0 auto;
            }
.fl li a{
                color: black;
                font-size: 16px;
                font-family: 'Noto Sans TC', sans-serif;
            }
.fl li a:hover{
                color: #299470;
                text-decoration: none;
            }
            
.mobile-fl img{
                width: 30px;
                height: 30px;
                margin: 0 30px 0 10px;
            }
.mobile-fl .panel-heading{
                background-color: transparent;
            }
.mobile-fl .panel-heading a{
                color: black;
                font-size: 20px;
            }
.mobile-fl .list-group-item{
                background-color: #299470;
                margin-bottom: 1px;
            }
.mobile-fl a{
                color:white;
            }
.mobile-fl a:hover{
                text-decoration: none;
                color:#299470;
            }
.mobile-fl a:hover .list-group-item{
                background-color: white;
            }
.footbg{
                width: 100%;
                position: absolute;
                bottom:-100px;
                z-index: -1;
            }
     
.ft{
                width: 100%;
                padding: 0;
                margin: 0 auto;
                text-align: center;
            }
.ft ul{
                margin: 0 auto;
                padding: 0;
            } 
.ft ul li{
                display: inline-block;
                margin: 20px;
            }
.ft ul li a{
                color: white;
                font-size: 16px;
                font-family: 'Noto Sans TC', sans-serif;
            }
.ftbd{
    padding-bottom: 30px;
}            
.ftbd p{
                color:white;
                margin: 0 auto;
                text-align: center;
                font-size: 16px;
                font-family: 'Noto Sans TC', sans-serif;
                letter-spacing: 3px;
            }
#header .header-container .header-search .header-search-wrapper{
    width: 130%;
}
@media (max-width: 1199px) {
                .row1{
                    top:45px;
                }
                .row3{
                    top:-45px;
                }
                .fl{
                    width: 25%;
                    margin: 30px 40px;
                }
            }
@media (max-width: 991px) {
                .eewhintro h1{
                    font-size: 30px;
                    margin: 30px 10px;
                }
                .header-logo img{
                    width: 150px;
                    height:auto;
                }
                .desktop-hexagonal{
                    display:none;
                }
                .mobile-hexagonal, .mobile-fl{
                    display: block;
                }
                .row4{
                    position: relative;
                    top:75px;  
                }
                .row5{
                    position: relative;
                    top:25px;
                }
                .row6{
                    position: relative;
                    top:-25px;
                }
                .row7{
                    position: relative;
                    top:-75px;
                }
                .fl{
                    display:none;
                }
                .ft ul{
                    padding: 20px;
                }
                .ft ul li{
                    display: block;
                    margin: 10px auto;;
                }
                .footbg{
                    display: none;
                }
                .footer{
                    background: url("../image/index/footer.png") no-repeat center;
                    background-size: 250%; 
                }
                .ftbd p{
                   margin: 0 20px; 
                }
                .ftbd{
                   margin-bottom: 30px;
                }
                #header .header-container .header-search .header-search-wrapper{
                   right:-20px;
                }
                #header .header-container .header-search .header-search-wrapper #cat{
                   width: 80px;
                }
                #header .header-search .header-search-wrapper:before{
                   right:15px;
                }
            }

.mobile-nav{
    background-color: white;
}
.mobile-nav ul li a{
    color: #777;
}
.mobile-nav ul li a:hover{
    background-color: #299470;
    color: white;
}
.mobile-nav ul li{
    border: none;
}
.mobile-side-menu li .mmenu-toggle{
    color: #299470;
}
.mobile-side-menu li .mmenu-toggle:after {
    content: "\f107";
    top:9px;
    color: #777;
}
.mobile-side-menu li.open > .mmenu-toggle:after {
    content: "\f106";
    top:9px;
    color: #777;
}
.mobile-side-menu li li a:before{
    display: none;
}


.logintab{
    margin: 100px 200px 50px 50px;
    padding: 0;
}
.logintab .checkbox a, .logintab .tab-content .form a{
    color:#299470;
}

.logintab .btn-inverse{
    color: white;
    background-color: #299470;
    border: none;
}

.logintab .btn-inverse:hover{
    color:#299470;
    background-color: white;
    border: 1px solid #299470;
}

.logintab .btn-default{
    color: white;
    background-color: #3b5998;
    border: none;
    width: 80%;
}
.signupad img{
    width: 100%; 
    padding: 100px 0px 100px 200px;
}

.logintab .nav-tabs li.active a, .logintab .nav-tabs li.active a:hover, .logintab .nav-tabs li.active a:focus{
    border-top-color:#299470;
    color: #777;
}
@media (max-width: 1500px){
    .logintab{
        margin: 50px 50px 50px 20px;
    }
    .signupad img{
        padding: 50px 0px 50px 50px;
    }
}

@media (max-width: 768px){
    .logintab{
        margin: 20px;
    }
    .signupad{
        display: none;
    }  
}
#header .top-menu .dropdown-menu{
    
}
#header .top-menu .dropdown-menu li a{
    color: #299470;
    width: 100%;
    text-align: center;
    border: none;

}
#header .top-menu .dropdown-menu li{
    padding-left: 0;
    padding-right: 0;
}
#header .top-menu .dropdown-menu{
    padding-left: 0;
    padding-right: 0;
    border: none;
}
#header .top-menu .dropdown-menu li a:hover{
    color: white;
    background-color: #299470;
}
.footer2{
    background-image: url("../image/index/footer.png");
    background-size: 100%;
    background-repeat: repeat-y;
}

.searchbody{
    position: relative;
}
.main-vision .container-custom{
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.main-vision img{
    max-width: 100%;
    width: 100%;
    height: auto;
    min-height: 300px;
    min-width: 130vh;
}

.main-title{
    position: absolute;
    left: 0;
    right:0;
    top: 30%;
    text-align: center;
}

.main-title h1{
    font-size: 50px;
    font-weight: 400;
    color: white;
}
.search-area{
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom:0;
    padding: 0;
    margin: 0;
}
.se-item{
    margin: 20px;
    position: relative;
    top:8px;
    left:60px;
    z-index: 10;
}

@media (max-width: 767px){
    .fake{
        display: none;
    }
    .se-item{
        margin: 5px;
        left:-5px;
    }
    .main-vision .container-custom{
        height: 400px;
    }
    .main-vision img{
        min-height: 400px;
    }
    .main-title{
        top:20%;
    }
}

.home-side-menu-container .home-side-menu > li > a, .home-side-menu-container .side-menu-title, .home-side-menu-container .home-side-menu li ul{
    font-size: 16px;
}

.position-a{
    margin-top: 30px;
    margin-bottom: 30px;
}
.position-a{
    margin-left: -15px;
}
.position-a ul li{
    display: inline;
    list-style-type:none;
}
.position-a ul li a{
    font-size: 16px;
    color: black;
}

.thumb-info-text .ntd{
    margin-left: 10px;
    margin-right: 5px;
    color: #ff6699;
}
.price{
    font-size: 30px;
    color: #ff6699;
}
.thumb-info-text h4{
    margin: 5px 10px;
}
.thumb-info{
    margin: 10px 0px;
}

#header .header-container{
    padding-top: 0;
    padding-bottom: 0;
}

.thumb-info .thumb-info-action-icon{
    background-color: #299470;
}

.thumb-info .thumb-info-action-icon-secondary{
    background-color: #e1625c;
}
.thumb-info.thumb-info-centered-icons .thumb-info-action-icon{
    line-height: 35px;
}

.home-side-menu-container .home-side-menu > li > a{
    padding:11.7px 5px;
}
@media (max-width: 1200px) {
	.home-side-menu-container .home-side-menu > li > a {
		font-size: 14px;
		padding-top: 8.5px;
		padding-bottom: 8.5px;
	}
}
.pagination{
    position: relative;
    right: 20px;
    margin: 50px 0px;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{
    background-color: #299470;
    border-color:#299470;
}
.pagination > li > a, .pagination > li > span, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus{
    color: #299470;
}

/* -------------------------------- 

2. Auto-Hiding Navigation - with Sub Nav

-------------------------------- */
.cd-secondary-nav {
  position: relative;
  z-index: 10;
  clear: both;
  width: 100%;
  height: 50px;
  background-color: #4d4d4d;
}

.cd-secondary-nav ul, .cd-secondary-nav li, .cd-secondary-nav a {
  height: 100%;
}
.cd-secondary-nav ul {
  /* enables a flex context for all its direct children */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0 5%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cd-secondary-nav ul::after {
  clear: both;
  content: "";
  display: block;
}
.cd-secondary-nav li {
  display: inline-block;
  float: left;
  /* do not shrink - elements float on the right of the element */
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.cd-secondary-nav li:last-of-type {
  padding-right: 20px;
}
.cd-secondary-nav a {
  display: block;
  color: #ffffff;
  opacity: .6;
  line-height: 50px;
  padding: 0 1em;
}
.cd-secondary-nav a:hover, .cd-secondary-nav a.active {
  opacity: 1;
    text-decoration: none;
}
@media only screen and (min-width: 1024px) {
  .cd-secondary-nav {
    height: 70px;
    overflow: visible;
  }
  .cd-secondary-nav ul {
    /* reset mobile style */
    display: block;
    text-align: center;
  }
  .cd-secondary-nav li {
    /* reset mobile style */
    float: none;
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;    
  }
  .cd-secondary-nav a {
    line-height: 70px;
      font-size: 16px;
  }
  .cd-secondary-nav a.active {
    box-shadow: inset 0 -3px white;
  }
}


.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

.sticky + .content {
  padding-top: 60px;
}


.imagebox{
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 20px;
}
.imagebox img{
    width: 100%;
}

#product-table {
    border-collapse: collapse;
    width: 100%;
    color: black;
    font-size: 16px;
}

#product-table td, product-table th {
    padding: 8px;
    border: 5px solid white;
}

#product-table td {
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: left;  
}
#product-table td:nth-child(odd){
    text-align:center;
    background-color: #efefef;
    width: 150px;
}
#product-table img{
    width: 50px;
    height: auto;
    margin: 5px;
}
.product-title{
    font-size: 30px;
    font-weight: 700;
    margin: 15px 30px; 
   
}
#product-parameter{
    border-collapse: collapse;
    width: 100%;
    color: black;
    font-size: 16px;
    text-align: center;
    margin: 20px;
}
#product-parameter td, product-table th {
    padding: 8px;
    border: 2px solid #A4A4A4;
}
#product-parameter td {
    padding-top: 5px;
    padding-bottom: 5px; 
}
.heart{
    font-size: 20px;
    float: right;
    margin-top: 25px;
}
.heart:hover{
    color: #ff6699;
    cursor:pointer;
}
.mobileheart{
    display: none;
}

@media (max-width: 767px){
    .product-title{
        margin: 10px;
    }
    .mobileheart{
        display: block;
    }
    .pcheart{
        display: none;
    }
    .heart{
        margin:10px;
    }
    #product-table td:nth-child(odd){
        width: 120px;
    }
    #product-parameter{
        margin: 10px;
    }
}

.container3{
    margin-top: 20px;
}

.btn-custom{
    width: 80%;
    margin: 30px;    
    height: 50px;
    font-size: 20px;
    background-color: #299470;
    border: 2px solid white;
    
}
.btn-custom:hover{
    color: #299470;
    background: white;
    border-color: #299470;
}

.container7{
    width: 75%;
    margin-top: 30px;
}
.container7 img{
    width: 100%;
}
.eewhintro .fa-search{
    color: #299470;
}

@media (max-width: 767px){
    .container7{
        width: 90%;
        margin-top: 10px;
    }
}

.eewhintro .owl-carousel .owl-nav .owl-next, .eewhintro .owl-carousel .owl-nav .owl-prev{
    top:-35px;
}
.eewhintro .owl-carousel .owl-nav .owl-next{
    border-radius: 0 50px 50px 0;
}
.eewhintro .owl-carousel .owl-nav .owl-prev{
    border-radius: 50px 0 0 50px;
}
.eewhintro .owl-carousel .owl-nav .owl-next:before, .eewhintro .owl-carousel .owl-nav .owl-prev:before{
    top:40px;
}
.owl-theme .owl-nav .disabled{
    opacity: 1;
}

#vendorinfo{
    border-collapse: collapse;
    width: 90%;
    color: black;
    font-size: 16px;
    margin: 0 auto;
    margin-bottom: 50px;
}
#vendorinfo td, product-table th {
    padding: 8px;
    border: 5px solid white;
}

#vendorinfo td {
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: left;  
}
#vendorinfo td:nth-child(odd){
    text-align:center;
    background-color: #efefef;
    width: 150px;
}

@media (max-width: 767px){
    #vendorinfo{
        width: 100%;
        font-size: 14px;
    }
    #vendorinfo td:nth-child(odd){
        width: 100px;
    }
}