@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
/*------------------------------------*\
    MAIN
\*------------------------------------*/
/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

@font-face {
	font-family:'Microsoft JhengHei';
	src:url('css/Microsoft JhengHei.ttf');	
}

@font-face {
	font-family:'Microsoft JhengHei Bold' ;
	src:url('css/Microsoft JhengHei Bold.ttf');	
}

body {
	font-family:  'Lato', 'Arial', sans-serif;
	color:#000;
	font-size:18px;
	line-height:26px;
	overflow-x: hidden;
	font-weight:500;
}
.header {
    background-image: linear-gradient(#5c0c05, #7e1108);
    position: sticky;
    top: 0;
    width: 100%;
    z-index:9;
    animation: smoothScroll .8s forwards;
}
.container {
    margin: 0 auto;
    max-width: 1200px;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}
.clear:after { clear:both;}

.clear {*zoom:1; clear:both;}

img {max-width:100%;}

a {text-decoration:none;color: inherit; }

a:focus {outline:0;text-decoration:none;}
a:hover{text-decoration: none;}
input:focus, textarea:focus, button:focus {	outline:0;}

ul,li,h1,h2,h3,h4,h5 {list-style-type:none;margin:0;padding:0}

p { font-size: 15px; font-weight: 500; line-height: 23px; margin: 0; padding-bottom: 0;}
a{display: inline-block;}
/*------------------------------------*\
	        HEADER
\*------------------------------------*/

select.select-lang option {color: #000;}
.nav_area > ul > li {    display: inline-block;padding: 10px 10px 10px 0;}



ul.sub-menu ul.sub-menu{ margin-top: 12px;}

.nav_area ul li:last-child{
    /* padding-right:0; */
    border-right:0;  }


.nav_area ul li a {padding-left: 10px;color: #ffff;   font-size: 16px;  display: inline-block;  vertical-align: middle;   font-weight: 500; } 


ul.sub-menu {position: absolute;  background: #501422;  z-index: 555; text-align:left;	padding:10px 0;  top:100%; }

ul.sub-menu li a{color:#ffff; line-height:20px;  padding:3px 10px 7px 10px; font-size:15px; display:inline-block; text-transform:capitalize;   font-weight: 400; } 

ul.sub-menu li{	display:block;}

ul.sub-menu li a{width:90%;}

ul.sub-menu li.menu-item-has-children {    position: relative;  }

ul.sub-menu li.menu-item-has-children .arrow {
    color: #fff;
    padding-left: 0;
    padding: 0 !important;
}

span.arrow  {  font-size:16px;     color: #e4dddf;  padding:5px}
ul.sub-menu  span.arrow i {
    
    padding: 0;
}
select.select-lang {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 16px;
}
/*-------footer--------*/
.footer
{
    background: #1a2021;
}
.f-menu h3 {
    font-size: 16px;
    color: #6fa9f4;
    line-height: normal;
    padding-bottom: 15px;  font-family: 'Microsoft JhengHei', sans-serif;font-weight: bold;
}
.f-menu ul li a {
    font-size: 14px;
    color: #fff;
    line-height: 26px;
    font-family: 'Microsoft JhengHei', sans-serif;font-weight: bold;
}
.copyright p
{
    font-size: 12px;
}
/*-------banner---------*/
.banner{
    background: url('../image/banner.png')no-repeat center;
    background-size: cover;
    padding: 60px 0;
}
.left-content h2 {
    font-size: 42px;
    line-height: normal;
    color: #fff;font-family: 'Raleway', sans-serif;font-weight: 600;padding-bottom: 20px;
}

.right-content h5 {
    font-size: 20px;
    line-height: 30px;
    color: #fff;font-family: 'Raleway', sans-serif;font-weight: 500;
}

.right-content h4 {
    color: #7fcaf8;
    font-size: 28px;
    line-height: normal;
    font-family: 'Raleway';
    font-weight: 700;padding-bottom: 15px;
}

.left-content h4 {
    color: #64afde;
    font-size: 30px;
    line-height: normal;
    font-weight: 700;
    font-family: 'Raleway';
}

.title h3 {
    font-size: 28px;
    line-height: normal;
    color: #5a0c05;
    font-family: 'Lato';
    font-weight: 700;padding-bottom: 18px;
}

.title {
    border-bottom: 1px solid #718ba1;
}
.main-home
{
    background: url('../image/main.png') no-repeat;
    background-size: cover;
}
.introduction, .contact
{
    background:#b0c0cd;
    border-radius: 30px;
}
.introduction p {
    font-size: 16px;
    padding-bottom: 25px;
}
.introduction h5 {
    font-size: 16px;
    line-height: 24px;

}
.contact h5
{
    font-size: 16px;
    line-height: 22px;
    max-width: 330px;
    font-weight: 700;
}
.contact a, .contact p {
    font-size: 16px;
    color: #000;
    font-weight: 700;
}

.section-title h2 {
    color: #224a85;
    font-size: 36px;
    text-align: center;
    line-height: normal;
    font-weight: bold;
    text-transform: uppercase;
}
.section-title h2::after{
    content: '\f107';
    display: block;
    text-align: center;font-family: 'Font Awesome 5 pro';color: #999999;
}
.brands-light{background-color: #f6f7f9 !important;}

.logo-section {
    box-shadow: 0px 0px 5px 0px #b1b3b7;
    background: #fff;
    padding: 30px;
    margin-bottom: 22px;
}

.logo-section img {
    min-height: 108px;
    object-fit: contain;
    display: flex;
    margin: 0 auto;
}

.logo-section h3 {font-size: 18px;line-height: 26px;padding-top: 7px;}

.breadcrumbs {padding-bottom: 18px;}

.breadcrumbs h4 {color: #003366;font-size: 21px;line-height: normal;position: relative;padding-left: 15px;}

.breadcrumbs h4:before{content: '';position: absolute;left: 0;background-color: #6aa8c4;width: 5px;height: 100%;}



.product-section {box-shadow: 0px 0px 5px #00000094;border-radius: 10px;padding: 20px 15px;margin-bottom: 20px;}

.product-section img {min-height: 270px;object-fit: contain;}

.product-section h3 {font-size: 18px;font-weight: bold;line-height: normal;font-family: 'Lato';}

.product-section p {font-size: 16px;line-height: normal;}

ul.sidemenu > li > a {padding: 12px 12px;background: #b0c0cd;margin-bottom: 8px;}

ul.side-sub-menu {padding: 10px;display: none;}

.sidebar > ul > li > a {font-size: 16px;line-height: 18px;font-family: 'Lato', sans-serif; color: #000;display: flex;justify-content: space-between;align-items: center;font-weight: bold;}

ul.sidemenu li a i {font-size: 25px;color: #417291;}

ul.sidemenu > li > a:hover, ul.sidemenu > li > a.active {background: #417291;color: #fff;}

ul.sidemenu > li:hover a i{color: #fff;}

ul.sidemenu li.side-lv2 a.active{font-weight: bold;font-size: 17px;}

ul.side-sub-menu li a {font-size: 15px;line-height: 15px;color: #173450;}

ul.side-sub-menu li a:hover{color: #660000;}

h2.page-title.side-title {text-align: center;background: #417291;padding: 10px;font-size: 25px;color: #fff;margin-bottom: 25px;line-height: 30px;}







/*-----------index------------*/
.zoom {overflow: hidden;position: relative;}
.zoom img:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    z-index: 0;
}
.zoom img {
    transition-duration: 4s;
    margin: 0 auto;
    display: block;
}


.product-zoom {overflow: hidden;position: relative;}
.product-zoom img:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.2);
    z-index: 0;
}
.product-zoom img {
    transition-duration: 3s;
    margin: 0 auto;
    display: block;
}


.pagination {    display: block;    margin: 0px;  }
/* .pagination .link {      padding-top: 7px;} */
.pagination a {    display: inline-block;
    height: 30px;
    width: 30px;
    vertical-align: middle;
    text-align: center;
    line-height: 30px;
    margin: 0 4px;
    color: #000;
 }
.pagination a.active,.pagination a:hover {  background: #5a0c05;    color: #fff; }
.pagination a i {    height: 40px;    line-height: 40px; }
/*------------------------------------*\
	        MIN WIDTH
\*------------------------------------*/

@media(min-width:992px){

    .nav_area > ul > li:hover {background: #a70f0e;}
    
    .nav_area ul li:hover ul.sub-menu {	display:block;}
    
    .nav_area > ul > li ul.sub-menu {font-size: 16px;    transform-origin: 50% 0;  transform: scaleY(0) translateZ(0);  transition: transform 0.3s, opacity 0.3s; display: block;  }
    
    ul.sub-menu {min-width: 150px;}
    
    ul.sub-menu li ul.sub-menu {    left: 100%;    top: -22px;    width: 100%;  }
    
    .nav_area > ul > li:hover > ul.sub-menu, .nav_area ul.sub-menu > li:hover > ul.sub-menu {   transform: scaleY(1) translateZ(0);   }
    
    .nav_area ul li:hover ul.sub-menu {    display: block; }
        
    ul.menu {display: block !important;}
    
    span.arrow{display: inline-block;  font-size: 12px;}    
    
    label.toggle {    display: none;  }
    
    .nav_area ul li a img {    vertical-align: middle;	max-width: 20px;    margin-right: 5px;   }
    
    ul.sub-menu li.menu-item-has-children .arrow {    transform: rotate(-90deg);  }
    
    ul.sub-menu > li:hover { background-color: #ffff;}
    
    ul.sub-menu > li:hover > a { color: #000; text-decoration: none; }
    
    ul.sub-menu > li:hover .arrow{  color:#000;  }


    .index-light .title h3{min-width: 300px;}

    
    
}

@media(min-width:768px){	

}


/*------------------------------------*\
	        MAX WIDTH
\*------------------------------------*/  

@media (max-width:1024px){
    
}    
@media(min-width:767px) and (max-width:1024px){
    

}
@media(min-width:767px) and (max-width:1205px){
   


}
@media (max-width:991px){
	.container { max-width: 100%;  }

	nav.nav_area ul li a{ color: #fff; text-decoration: none;}
	
	ul.menu  { position: fixed;  width: 80%; left: 0; text-align: left; background:  #5e2a2f; z-index: 2;  padding: 15px 10px; z-index: 10; top: 0; height: 100%;left: -100%; transition: all .4s;}
	
	ul.menu.open {left:0;}
	
	.toggle { font-size: 25px;text-align: right;display: block;color: #fff;margin-bottom: 0;}    

    .nav_area > ul > li{padding: 10px 0;}

	.nav_area ul li a {     font-size: 18px;  padding:5px;}
	
	nav.nav_area ul li{display:block;     position: relative;    border: 0;}
	
    span.arrow {  position: absolute;  right: 10px;  color: #fff;  width: 40px;  text-align: center;  height: 30px;   top:15px;}

    .sub-menu span.arrow i:before{ content: '\f105'; }

    span.arrow.close-icon i:before {  content: '\f106';  }
   
    ul.sub-menu {   display: none; position: relative; background: transparent;  padding: 0; margin: 0;}
	
	ul li .sub-menu li a {font-size: 16px;    line-height: 16px;  }
	
	ul.sub-menu span.arrow {   right: 5px; text-align: center;  }
	
	span.arrow.close-icon i:before {    content: '\f106';  }

	ul.sub-menu li.menu-item-has-children  span.arrow.close-icon i:before {    content: "\f106";  }
	
    .nav_area > ul > li > ul.sub-menu{   padding: 5px 5px 0px 0px; font-family: 'Oxygen';}

    .sub-menu span.arrow{ top: 0;  }

	.nav_area ul li > ul li {  display: block; position: relative;  border: 0;  padding: 0 5px 5px 5px; }
}

@media (max-width: 767px){
    ul.sidemenu {display: none;}
    .product-section img {display: flex;margin: 0 auto;}
    .product-section {text-align: center;}
    .header { padding: 10px; }
    .left-content h2{font-size: 30px;padding-bottom: 10px;}
    .left-content {padding-bottom: 30px;}
    .right-content h4 {font-size: 26px;padding-bottom: 5px;}
    .banner {padding: 35px 0;}
    .section-title h2{font-size: 26px;}
    .introduction p {padding-bottom: 10px;}
}

.sidemenu .side-sub-menu{display: none;}
li.side-lv3,li.side-lv4 {
    padding-left: 5px;
}
li.side-lv2 ul.side-sub-menu{
    padding-top: 0px;
    padding-bottom: 0px;
}

li.side-lv3 i, li.side-lv4 i{
    font-size: 12px;
    padding-right: 3px;
}