@charset "UTF-8";
/* CSS Document */
body {
	margin: 0px;
	/*font-family:'Ropa Sans',"微軟正黑體","蘋果儷中黑",Arial;*/
	font-family:'Barlow',"微軟正黑體","蘋果儷中黑",Arial;
	word-break: normal;
	text-align: left; 
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	}
	
a{
	text-decoration:none;
	outline: medium none;	
	hlbr:expression(this.onFocus=this.blur());
	color: #00B9F2; 
	transition: all 0.25s;
	}

a:hover{
	opacity: 0.7;
}		
	
ul,li{ 
	margin:0; padding:0; list-style:none;
	}

tml,a,form,area,div,img,table,td,th,ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,p {
	margin:0px;
	padding-left:0px;
	/*font-family:'Ropa Sans',"微軟正黑體","蘋果儷中黑",Arial;*/
	font-family:'Barlow',"微軟正黑體","蘋果儷中黑",Arial;
	}
	
div,span{
	word-break: normal;
	text-align: left; 
	}

h3{
	font-size: 36px;
	color: #4A4A4A;
	letter-spacing: 1.5px;
}

h4{
	font-size: 22px;
	color: #4A4A4A;
	letter-spacing: 0;
}

.clear{clear:both;}
.text_r{text-align:right;}
.text_l{text-align:left;}
.text_c{text-align:center;}
.blank10{ height:10px;}
.blank20{ height:20px;}
.blank30{ height:30px;}
.blank40{ height:40px;}
.blank50{ height:50px;}
.blank60{ height:60px;}
.blank70{ height:70px;}
.blank80{ height:80px;}
.blank90{ height:90px;}
.blank100{ height:100px;}
.blank110{ height:110px;}
.blank120{ height:120px;}
.blank130{ height:130px;}
.blank140{ height:140px;}
.blank150{ height:150px;}
.blank160{ height:160px;}
.blank170{ height:170px;}
.blank180{ height:180px;}
.blank190{ height:190px;}
.blank200{ height:200px;}

.icop-fullwidth-container{
	width: 100%;
	padding: 0 30px;
	clear: both;
}

.more{
	font-size: 18px;
	color: #00B9F2;
	letter-spacing: 0.5px;
	line-height: 18px;
	display: block;
}

.breadcrumbs{
	padding-bottom: 20px;
}

.page-title .breadcrumbs{
	text-align: center;
}

.breadcrumbs li{
	display: inline-block;
}

.breadcrumbs li:after{
	content: ">";
	padding: 0 3px;
}

.breadcrumbs li:last-child:after{
	content: "\A";
}

.breadcrumbs li a{
	color: #4A4A4A;
	font-size: 14px;
    line-height: 25px;
    letter-spacing: 0.39px;
    font-weight: normal;
}

.breadcrumbs li a.active{
	color: #00B9F2;
}

.loading-more{
	text-align: center;
	color: #4A4A4A;
	letter-spacing: 0.79px;
	padding: 30px 0;
}

.loading-more img{
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;
    margin-top: -3px;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.icop-btn{
	padding: 13px 22px;
	border-radius: 22.5px;
	font-size: 18px;
	letter-spacing: 0.75px;
	border: none;
	outline: none;
}

.icop-btn:hover{
	opacity: 0.7;
}

.icop-btn.blue{
	color: #fff;
	background: #00B9F2;
}

.icop-btn.white{
	color: #4A4A4A;
	background: #fff;
}

.page-title{
	padding-top: 105px;
	padding-bottom: 60px;
	text-align: center;
}

.page-title h1{
	font-size: 64px;
	letter-spacing: 1.78px;
}

.page-title h2{
	font-size: 22px;
	letter-spacing: 0.61px;
	line-height: 28px;
	width: 90%;
	max-width: 800px;
	margin: 10px auto 0 auto;
}

.page-content{
	background: #f2f2f2;
	padding: 60px 0;
}

.page-nav{
	margin-top: 30px;
	text-align: center;
}

.page-nav li{
	display: inline-block;
}

.page-nav li a{
	font-size: 18px;
	letter-spacing: 1.12px;
	padding: 5px 11px;
}

.page-nav li a.active{
	background: #00B9F2;
	color: #fff;
	border-radius: 20px;
}

.page-nav li a.disable{
	cursor: not-allowed;
	opacity: 0.5;
}

.page-nav li a.disable:hover{
	opacity: 0.5;
}

.overflow-hidden{
	overflow: hidden;
}


/*header 開始*/

header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
}

nav{
	background: #fff;
	height: 60px;
	width: 100%;
	border-bottom: 1px solid #f2f2f2;
}

.logo{
	float: left;
	margin: 12px 0 0 30px;
	position: relative;
	z-index: 999;
}

nav ul.menu{
	float: right;
	margin-right: 30px;
}

nav ul.menu li{
	display: inline-block;
	font-size: 22px;
	letter-spacing: 0.5px;
	color: #4a4a4a;
}

@media screen and (max-width: 1440px){
	nav ul.menu li{
		font-size: 18px;
	}
}

nav ul.menu li li li{
	font-size: 18px;
	display: block;
	text-align: left;
	line-height: 32px;
	padding-left: 20px;
}

nav ul.menu li li li li a{
	color: #9B9B9B;
}

nav ul.menu > li{
	margin: 0 15px;
	padding: 16px 0 22px 0;
	cursor: pointer;
	border-top: 2px solid #fff;
	transition: all 0.25s;
}

nav ul.menu li a{
	color: #4a4a4a;
}

nav ul.menu li a.eshop{
	color: #0A9396;
}

nav ul.menu li a:hover{
	color: #00B9F2;
}

nav ul.menu > li:hover{
	border-top: 2px solid #00B9F2;
}

nav ul.menu > li .submenu-container{
	position: absolute;
	width: 100%;
	left: 0;
	top: 60px;
	background: #F9F9F9;
	padding: 30px 0;
	text-align: center;
	display: none;
}

nav ul.menu > li .submenu-container > ul{
	text-align: left;
	display: inline-block;
}

nav ul.menu > li:hover .submenu-container{
	display: block;
	z-index: 5;
}

nav ul.menu > li .submenu-container > ul > li{
	min-width: 200px;
	margin: 7px 13px;
	vertical-align: top;
	text-align: left;
	line-height: 150%;
}

nav ul.menu > li .submenu-container > ul > li > a{
	border-left: 2px solid #00B9F2;
	padding-left: 20px;
}

nav ul.menu > li .submenu-container > ul > li > ul{
	border-left: 2px solid #d8d8d8;
	margin-top: -5px;
	padding-top: 10px;
}

nav ul.menu > li > ul.dropdown-menu > li > a{
	border: none;
	font-size: 16px;
}

nav ul.menu > li > ul.dropdown-menu > li > a:hover{
	background: none;
}

nav ul.menu > li > ul.dropdown-menu > li{
	min-width: auto;
}

nav ul.menu > li > ul.dropdown-menu{
	padding: 15px 0;
	background: #F9F9F9;
}

.search-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1000;
	background: rgba(0,0,0,0.4);
	display: none;
}

.search-input{
	width: 90%;
	margin: 0 auto;
	top: 50%;
	position: absolute;
	left: 0;
	right: 0;
	margin-top: -24px;
	max-width: 600px;
}

.search-input input{
	width: calc(100% - 137px);
	float: left;
	position: relative;
	border: none;
	border-radius: 5px 0 0 5px;
	background: #fff;
	outline: none;
	font-size: 24px;
	padding: 11px 15px;
	line-height: 100%;
	box-shadow: none;
	height: 48px;
}

.search-input button{
	padding: 12px 15px;
	border-radius: 0 5px 5px 0;
	float: left;
	background: #fff;
	border: none;
	outline: none;
	margin: 0;
	height: 48px;
}

.search-input a{
	color: #fff;
	line-height: 48px;
	margin-left: 20px;
}

.search-input a img{
	margin-right: 5px;
}

.swiper-container {
  width: 100%;
  height: 100%;
  padding-top: 60px;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.home-swiper .swiper-slide img{
	width: 100%;
	height: auto;
}

.c-hamburger, nav ul.menu li.go-back-menu-mobile{
	display: none;
}

.open_search, .search-input button img{
	width: 24px !important;
	height: 24px !important;
}

#close_search img{
	width: 12px !important;
	height: 12px !important;
}

	
/*header 結束*/	


/*home start*/


.news-block{
	width: 25%;
	background-size: cover;
	background-position: center;
	display: block;
	float: left;
	padding-top: 25%;
	position: relative;
}

.news-block:hover:after{
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.3);
    z-index: 0;
}

.news-block .news-content-wrapper{
	position: absolute;
	top: 30px;
	left: 30px;
}


.news-block h3{
	font-size: 24px;
	color: #FFFFFF;
	letter-spacing: 0;
	width: 100%;
	max-width: 330px;
	margin-bottom: 10px;
	position: relative;
	z-index: 2;
}

.news-block p{
	font-size: 14px;
	color: #FFFFFF;
	letter-spacing: 0;
	position: relative;
	z-index: 2;	
}

.news-block p span{
	opacity: 0.8;
	display: block;
	position: relative;
	z-index: 2;
}

.btn-more{
	font-size: 18px;
	color: #00B9F2;
	letter-spacing: 0.5px;
	line-height: 18px;
	background: #FFFFFF;
	border-radius: 15px;
	padding: 6px 10px;
}

.news-block .btn-more{
	position: absolute;
	left: 30px;
	bottom: 30px;
	z-index: 2;
}

.home-product-category{
	margin-bottom: 30px;
}

.home-product-category img{
	vertical-align: top;
}

.home-product-category a > span{
	font-size: 22px;
	color: #4A4A4A;
	letter-spacing: 0;
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	width: calc(100% - 100px);
	-webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.home-product-category a{
	display: block;
	border: 1px solid #D3D3D3;
	border-radius: 5px;
	position: relative;
}

.home-product-category a:hover{
	background: rgba(0,0,0,0.1);
}

.home-section-title{
	padding-bottom: 30px;
	padding-left: 15px;
}

.home-partners, .home-product{
	padding: 0 15px;
	margin-top: 60px;
	margin-bottom: 60px; 
}

.home-product{
	border-right: 1px dotted #979797;
}

.home-partners a img{
	max-width: 100%;
	height: auto !important;
}

.partner-info{
	background: #F2F2F2;
	border-radius: 5px;
	padding: 10px;
	margin-top: 15px;
}

.partner-info p{
	font-size: 18px;
	color: #4A4A4A;
	letter-spacing: 0.5px;
	margin-bottom: 5px;
}

.partner-info span{
	font-size: 14px;
}

.mobile-slide{
	display: none;
}


/*home end*/



	
/*article 開始*/

.page_banner{
	background-size: cover;
	background-position: center;
	/*height: 600px;
	max-height: 65vh;*/
	color: #fff;
	
	width: 100%;
	margin-top: 60px;
	/*display: flex;
	justify-content: center;
	flex-direction: column;*/
	padding-bottom: 31.25%;
	position: relative;
}

.page_banner .banner_title_erapper{
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    width: 100%;
}

.page_banner.product{
	padding-bottom: 120px;
	height: 600px;
	max-height: 65vh;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

.page_banner h1{
	font-size: 64px;
	color: #FFFFFF;
	letter-spacing: 1.78px;
}

.page_banner h2{
	font-size: 22px;
	color: #FFFFFF;
	letter-spacing: 0.61px;
	width: 90%;
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}

	
/*article 結束*/


/*product start*/

.category-cover{
	width: 100%;
	max-width: 360px;
	height: 215px;
	text-align: center;
	background: #fff;
	float: left;
}

.category-info{
	width: 100%;
	max-width: calc(100% - 360px);
	float: left;
	padding: 30px;
}

.category-info h3{
	font-size: 36px;
	color: #FFFFFF;
	letter-spacing: 1.5px;
}

.category-info p{
	font-size: 18px;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 26px;
	height: 78px;
	overflow: hidden;
}

.category-info a{
	padding-top: 15px;
	display: block;
	font-size: 18px;
}

.category-info ul li{
	display: inline-block;
	padding-right: 30px;
}

.category-cover img{
	height: 100%;
	width: auto;
}

.product-categories{
	background: #f2f2f2;
	padding-bottom: 90px;
}

.category-card{
	clear: both;	
	border-radius: 5px;
	overflow: hidden;
	background: #4A4A4A;
}

.product-categories .container > div:first-child{
	margin-top: -120px;
}

.product-categories .container > div{
	margin-bottom: 30px;
}

.product-list-container{
	position: relative;
}

.product-filter{
	position: fixed;
	height: auto;
	width: 275px;
	background: #d3d3d3;
	left: 60px;
	top: 105px;
	border-radius: 5px;
	padding: 20px 20px 0 20px;
	z-index: 2;
}

.product-filter.remove-fixed{
	position: absolute;
	z-index: 2;
	bottom: 60px;
	top: auto;
}

.product-filter .search-input{
	position: relative;
	width: 100%;
	margin: 15px 0 20px 0;
}

.product-filter .search-input input{
	width: calc(100% - 38px);
	padding: 10px 0 10px 10px;
}

.product-filter .search-input button{
	padding: 6px 7px 7px 7px;
}

.product-list{
	padding-top: 105px;
}


.product-page-info{
	padding: 0 0 120px 365px;
}

.product-list-wrapper{
	background: #f2f2f2;
	padding: 30px 0 60px 365px;
	min-height: 50vh;
}

.reveal-effect{
	display: block;
}

.filters{
	margin-right: -20px;
	margin-left: -20px;
	clear: both;
	border-top: 1px solid #9B9B9B;
	max-height: calc(100vh - 300px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.checkbox label input[type="checkbox"]{
	margin-top: 0;
}

.filter-group{
	padding: 20px 20px 5px 20px;
}

.filter-group:not(:last-child){
	border-bottom: 1px solid #9B9B9B;
}

.filter-group h5{
	font-size: 14px;
	letter-spacing: 0.5px;
}

.product-list h1{
	font-size: 64px;
	letter-spacing: 1.78px;
	padding-bottom: 10px;
}

.product-list h2{
	font-size: 22px;
	letter-spacing: 0.61px;
	line-height: 28px;
	width: 100%;
	max-width: 800px;
}

.product-list-wrapper .grid-flex.grid{
	display: flex;
	height: 100% !important;
	flex-wrap: wrap;
}
.product-list-wrapper .grid-flex.grid .grid-item{
	position: relative !important;
	top: unset !important;
	left: unset !important;
}

.product-list-wrapper .grid-item{
	width: 305px;
	padding: 0 30px 30px 0;
}

.product-list-wrapper .grid-flex.grid a{
	height: 100%;
}

.product-list-wrapper a{
	width: 100%;
	min-height: 378px;
	display: block;
	border-radius: 5px;
	overflow: hidden;
	text-align: center;
	background: #fff;
}

.product-list-wrapper a:hover .product-cover img{
	transform: scale(1.05);
}

.product-list-wrapper h3{
	font-size: 22px;
	color: #4A4A4A;
	letter-spacing: 0.5px;
	padding: 15px 20px 0 20px;
	word-wrap:break-word;
}

.product-list-wrapper h4{
	font-size: 16px;
	color: #9B9B9B;
	letter-spacing: 0.5px;
	padding: 5px 20px 20px 20px;
	word-wrap:break-word;
}

.product-cover{
	text-align: center;
	position: relative;
	padding: 20px;
	width: 100%;
	height: 280px;
	border-bottom: 1px solid #D8D8D8;
}

.product-cover .cover{
	width: 100%;
	height: 100%;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #fff;
}

.product-cover span{
	position: absolute;
	top: 15px;
	left: 15px;
	background: rgba(0,185,242,0.9);
	color: #FFFFFF;
	letter-spacing: 0.36px;
	padding: 4px 6px;
	border-radius: 3px;
}


/* TODO: view-page-list */
.view-nav{
	margin-top: 60px;
	background-color: rgba(0,0,0,0.7);
	width: 100%;
	height: 52px;
	display: flex;
	align-items: center;
	padding: 0 30px;
	border-bottom: none;
	position: fixed !important;
	z-index: 998;
	top: 0px;
	left: 0px;
}

.v-title{
	color: #FFFFFF;
	font-size: 24px;
	font-weight: 500;
	font-family: Barlow;
}

.v-now-block{
	width: 100%;
	display: none;
	align-items: center;
	padding: 15px 0;
}


.v-now-text{
	color: #FFFFFF;
	font-size: 20px;
	font-weight: bold;
	font-family: Barlow;
	opacity: .5;
}

.v-now-link{
	color: #ffffff;
	font-size: 20px;
}

.v-now-link img{
	transform: rotate(90deg);
	transition: all .3s ease;
}

.v-now-link.active img{
	transform: rotate(-90deg);
}

.v-now-badge{
	margin-left: auto;
}



.view-page-list{
	padding-left: 20px;
	display: flex;
	align-items: center;
	margin-left: auto;
}

.view-page-list .v-item{
	margin-right: 30px;
}


.view-page-list .v-item.active .v-link{
	color: #00B9F2;
}


.v-link{
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	font-family: Barlow;
	letter-spacing: 2px;
}

.view-nav .send-btn{
	display: inline-block;
	padding: 8px 20px;
	background-color: #00B9F2;
	color: #ffffff;
	font-size: 18px;
	font-family: Barlow;
	font-weight: bold;
	letter-spacing: 0.75px;
	border-radius: 5px;
}
/* TODO: view-nav rwd */
@media(max-width:1200px){
	.v-title{
		font-size: 20px;
	}
	.v-link{
		font-size: 14px;
	}
	.view-nav .send-btn{
		font-size: 14px;
	}
	.view-page-list .v-item{
		margin-right: 20px;
	}
}
@media(max-width:992px){
	.v-title{
		font-size: 14px;
	}
	.v-link{
		font-size: 8px;
	}
	.view-nav .send-btn{
		font-size: 8px;
	}
}

@media(max-width:768px){
	.view-nav{
		position: relative;
		padding: 25px 25px 10px 25px;
		flex-wrap: wrap;
		height: auto;	
	}
	.v-link{
		font-size: 18px;
	}

	.v-now-block{
		display: flex;
	}

	.view-page-list{
		flex-wrap: wrap;
		padding-left: 0px;
		margin: 15px 0 15px 0;
		display: none;
	}
	.view-page-list .v-item{
		width: 100%;
		margin-right: 20px;
		margin-bottom: 20px;
	}

	.view-nav .send-btn{
		font-size: 18px;
	}

	.view-page-list .v-item:nth-last-of-type(1){
		margin-bottom: 0;
	}
}

@media(max-width:576px){
	.view-nav .send-btn{
		font-size: 18px;
	}
}

/* TODO: fancy-box */
/* .fancybox-slide--image{
	overflow-y: auto;
}
.fancybox-content{
	max-width: 1280px;
	height: auto;
} */
.fancybox-iframe{
	overflow-x: scroll;
}

/* TODO: prodcut-content-container */
@media(min-width: 1400px){
	.product-content-container.container{
		width: 1411px;
	}
}


.product-description-block{
	display: flex;
	margin-top: 120px;
	padding: 0px 0 77px 0;
}

.product-swiper-container{
	/* width: 580px; */
	max-width: 38.97%;
	flex-basis: 38.97%;
	/* width: 38.97%; */
	display: flex;
}

.product-swiper {
  /* width: 83.6%; */
  max-width: 83.6%;
  flex-basis: 83.6%;
  /* height: 580px; */
  margin-left: auto;
  margin-right: auto;
}

.product-swiper.swiper-container{
	padding-top: 0;
}

.product-swiper .swiper-slide {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.product-swiper .swiper-slide a{
	position: absolute;
	top: 20%;
	left: 0;
	right: 0;
	bottom: 20%;
}
.product-thumbs-container{
	display: flex;
}
.product-thumbs {
  box-sizing: border-box;
  padding: 10px 0;
  width: 60px;
  margin-right: 1.52vw;
}
.product-thumbs .swiper-slide {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  opacity: 0.4;
  background-size: 200%;
  background-position: center;
}
.product-thumbs .swiper-slide-active {
  opacity: 1;
}

.product-main-info{
	/* TODO: float */
	/* float: left; */
	padding-left: 4.7vw;
	flex-basis: 61.03%;
	max-width: 61.03%;
	/* width: 61.03%; */
	padding-top: 60px;
}

.product-main-info h1{
	font-size: 64px;
	letter-spacing: 1.78px;
	padding-bottom: 10px;
	margin-top: 18px;
}

.product-main-info h2{
	font-size: 22px;
	letter-spacing: 0.61px;
	line-height: 28px;
	word-wrap:break-word;
	color: #4A4A4A;
	margin-top: 15px;
}

.product-main-info h2 br{
	display: none;
}

.product-main-info h1 span{
	background: rgba(0,185,242,0.9);
	color: #FFFFFF;
	letter-spacing: 0.36px;
	padding: 3px 10px;
	border-radius: 3px;
	display: inline-block;
	margin-bottom: 30px;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0.36px;
	line-height: 24px;
}


/* TODO: product-content  RWD */
@media(max-width: 992px){
	.product-description-block{
		flex-wrap: wrap;
		margin-top: 150px;
	}

	.product-swiper-container{
		flex-wrap: wrap;
	}

	.product-swiper{
		width: 100%;
	}

	.product-thumbs-container{
		order: 1;
		height: auto;
		width: 100%;
	}

	.product-thumbs{
		width: 100%;
		height: auto;
	}

}

/* TODO: product-content  RWD end*/

.product-tags{
	margin-top: 30px;
}

.product-tags li{
	display: inline-block;
	font-size: 16px;
	color: #4A4A4A;
	letter-spacing: 0.67px;
	background: #D8D8D8;
	border-radius: 13.5px;
	padding: 5px 10px;
	margin: 0 10px 10px 0;
}

.open-filter-mobile, .close-filter-mobile{
	display: none;
}

.contact-us-float-box{
	position: fixed;
	right: 30px;
	bottom: 0;
}

.contact-us-float-box .wrapper{
	background: #00B9F2;
	border-radius: 5px 5px 0 0;
	padding: 10px 20px;
	text-align: center;
	transition: all 0.25s;
}

.contact-us-float-box .wrapper:hover{
	padding-bottom: 20px;
}

.contact-us-float-box .wrapper a{
	color: #fff;
	font-size: 20px;
}

.contact-us-float-box h5{
	font-size: 14px;
	color: #4A4A4A;
	letter-spacing: 0.5px;
	padding-bottom: 10px;
}

.contact-us-float-box li{
	border-bottom: 1px solid #B4B4B4;
	padding: 10px 0;
	text-align: left;
}

.contact-us-float-box ul{
	margin-bottom: 45px;
}

.contact-us-float-box li a{
	color: #000;
}

.product-features{
	background: #283969;
	display: block;
	width: 100%;
	padding: 60px 0;
}


.features-list-block {
	padding-left: 12px;
}


.product-features .row{
	display: flex;
	flex-wrap:wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.product-features .features-title{
	color: #ffffff;
	font-size: 36px;
	letter-spacing: 1.78px;
	font-family: Barlow;
}

.product-features .title-block{
	padding-left: 2.8vw;
}

.product-features li{
	color: #ffffff;
	list-style-type: disc;
	margin: 10px 0;
	font-size: 24px;
	letter-spacing: 0.75px;
}

.product-features li:nth-of-type(1),.product-features li:nth-of-type(2){
	margin-top: 0;
}


.product-features li p{
	margin-right: 20px;
	word-wrap:break-word;
	line-height: 33px;
}


/* TODO: product-features RWD */


@media(max-width: 1093px){
	.product-features li{
		font-size: 20px;
	}
}

@media(max-width: 576px){
	.product-features .title-block{
		padding-left: 0;
	}

	.product-features{
		margin-top: 20px;
		padding: 30px 10px 30px 10px;
	}

	.features-list-block{
		margin-top: 20px;
	}

	.col-md-6{
		padding-left: 5px;
		padding-right: 5px;
	}
	.features-list-block{
		padding-left: 65px;
	}
}

@media(min-width: 767px){
	.product-features .container{
		width: 98%;
	}

	.product-features .col-md-6{
		padding-left: 0;
		padding-right: 2.9vw;
	}

	.product-features .title-block{
		padding-left: 1.4vw;
	}

	/* .product-features .row{
		justify-content: flex-end;
	} */

	.product-features .col-lg-3{
		width: 100%;
	}

	.product-features .col-lg-9{
		width: 100%;
	}
	.features-list-block{
		margin-top: 50px;
		padding-left: 8vw;
	}
}

@media(min-width: 1400px){
	.product-features .col-lg-3{
		width: 25%;
	}

	.product-features .col-lg-9{
		width: 75%;
	}
	.features-list-block{
		margin-top: 0;
		padding-left: 12px;
	}
}

@media(min-width: 1550px){
	.product-features .container{
		width: 98%;
	}

	.product-features .col-md-6{
		padding-left: 0;
		padding-right: 5.9vw;
	}

	.product-features .title-block{
		padding-left: 1.4vw;
	}
}

@media(min-width: 1800px){
	.product-features .container{
		width: 1800px;
	}
	/* .product-features .col-md-6:nth-of-type(2n+1){
		padding-right: 105px;
	} */
}



.product-download-container .download-block{
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 70px 0;
	text-align: center;
	color: #fff;
}

.product-download-container .download-block .download-link{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index:2;
}
@media(min-width: 1092px){
	.product-download-container .download-block .download-link:hover:before {
		opacity: 1;
	}
}
.product-download-container .download-block .download-link::before{
	content: "";
	position: absolute;
	z-index: 1;
	top: 0 ;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.3);
	opacity: 0;
	transition: opacity .3s ease;
}



.product-download-container{
	width: 100%;
	overflow: hidden;
}

.product-download-container .download-block h3{
	color: #fff;
	padding-top: 20px;
	padding-bottom: 30px;
}

.download-block.manual{
	background-image: url(../images/gradient_01.jpg);
}

.download-block.datasheet{
	background-image: url(../images/gradient_02.jpg);
}

.download-block.resource{
	background-image: url(../images/gradient_03.jpg);
}

.free-edit{
	padding: 100px 0;
}

.free-edit .container{
	width: 85%;
	overflow-x: scroll;
}
.free-edit .container::-webkit-scrollbar{
	width: 0;
	display: none;
}


.free-wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
}


.free-edit p{
	font-size: 18px;
	color: #4A4A4A;
	letter-spacing: 0;
	line-height: 26px;
	margin-bottom: 20px;
}

.free-edit img{
	max-width: 100%;
	height: auto !important;
	margin-bottom: 30px;
}

.free-edit ul li{
	list-style: disc;
}

.free-edit ol li{
	list-style: decimal;
}

.free-edit ul, .free-edit ol{
	padding-left: 20px;
}

.free-edit .f-text{
	font-family: PingFang TC;
	font-style: normal;
	font-weight: normal;
	font-size: 36px;
	line-height: 50px;
	text-align: center;
	letter-spacing: 1.5px;
	color: #9B9B9B;
}

@media(max-width:576px){
	.free-edit .container{
		width: 100%;
	}
	.free-edit .bootstrap-tabs{
		overflow-x: hidden;
		margin: 10px 0 !important;
	}
	.free-edit .tab-content{
		overflow-x: scroll;
	}
	.free-edit span{
		display: inline-block;
	}
}
/* product modal */
.blocker{
	z-index: 1501;
	background-color: #ffffff;
	padding: 0;
}
.modal{
	width: 70%;
	height:100vh;
	max-width: 70%;
	padding: 0px 0px 0px 0px;
	box-shadow: unset;
}

.modal::-webkit-scrollbar{
	display: none;
	width: 0;
}

.modal a.close-modal{
	top: 20px;
	right: 20px;
	background-image: url("../images/icon/close_big.png");
}
.modal-btn{
	cursor: zoom-in;
}
.img-viewport{
	width: 100%;
	height: 100%;
	padding-top: 50px;
    overflow: hidden;
	cursor: move;
}
.img-content{
    /* width: 100%; */
	height: 100%;
	padding: 0 72px;
	
}
@media(max-width: 1093px){
	.modal{
		width: 100%
	}
}

/* .modal-img{
	transform: scale(1.2);
} */

/*product end*/


/*odm start*/

.odm-article{
	padding: 60px 0 0 0;
}
.odm-article p{
	width: 90%;
	max-width: 1140px;
	font-size: 22px;
	letter-spacing: 0;
	line-height: 32px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 20px;
}

.odm-flow-chart{
	height: 740px;
	background: url(../images/bg_odm.jpg) center;
	background-size: cover;
	text-align: center;
	padding-top: 60px;
	margin-top: 40px;
}

.odm-flow-chart.sp{
	background-image: url(../images/bg_odm_1366_sp.jpg);
}

.odm-flow-chart.cn{
	background-image: url(../images/bg_odm_1366_cn.jpg);
}

.odm-module{
	background: #F2F2F2;
}

.odm-module .container{
	text-align: center;
	padding: 60px 0 90px;
}

.odm-module-cover{
	width: 100%;
	max-width: 360px;
	height: auto;
	text-align: center;
	background: #fff;
	float: left;
}

.odm-module-info{
	width: 100%;
	max-width: calc(100% - 360px);
	float: left;
	padding: 30px 30px 10px 30px;
}

.odm-module-info h4{
	font-size: 14px;
	color: #00B9F2;
	letter-spacing: 0.58px;
	padding-bottom: 10px;
}

.odm-module-info p, .odm-module-info li{
	font-size: 18px;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 26px;
	margin-left: 0;
}

.odm-module-cover img{
	width: 100%;
	max-width: 300px;
	height: auto;
}

.odm-module-card{
	clear: both;	
	border-radius: 5px;
	overflow: hidden;
	background: #4A4A4A;
	display: flex;
	margin-top: 30px;
}

/*odm end*/

/*download start*/

.catalog-card{
	text-align: center;
	margin-bottom: 75px;
}

.catalog-card h4{
	font-size: 22px;
	letter-spacing: 0.5px;
	padding-bottom: 20px;
}

.catalog-card h4 span{
	text-align: center;
	display: block;
	font-size: 16px;
	color: #9B9B9B;
	letter-spacing: 0.5px;
	padding-top: 5px;
}

.catalog-cover {
	text-align: center;
	padding-bottom: 30px;
	position: relative;
	z-index: 1;
}

.catalog-cover img{
	height: 300px;
	width: auto;
	position: relative;
	z-index: 1;	
}

.catalog-cover:after{
	content: url(../images/shadow.png);
	position: absolute;
	bottom: -5px;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 0;
}

.download-form form{
	width: 90%;
	max-width: 767px;
	margin: 0 auto;
}

.download-form form .row{
   display: flex;
	flex-wrap:wrap;
}

.download-page{
	height: 80vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.download-page h1{
	font-size: 64px;
	letter-spacing: 1.78px;
	padding: 30px 0 10px 0;
}

.download-page h2{
	font-size: 22px;
	letter-spacing: 0.61px;
	line-height: 28px;
	padding-bottom: 30px;
}

.download-resource{
	min-height: 50vh;
}

.search-result{
	background: #fff;
	border-radius: 5px;
	padding: 5px 0;
	margin-top: -15px;
	display: none;
}

.search-result li{
	padding: 10px 20px 10px 43px;
	background: url(../images/ic_search_s.png) left 20px center no-repeat;
	background-size: 18px 18px;
	border-bottom: 1px solid #d3d3d3;
}

.search-result li a{
	color: #4a4a4a;
	font-size: 16px;
	letter-spacing: 0.5px;
}

.search-result li:last-child{
	border: none;
}

.resource-type{
	display: none;
}

.resource-type h4{
	margin-bottom: 10px;
}

.resource-type .checkbox + .checkbox{
	margin-top: 10px;
}

.resource-type .checkbox{
	word-break: break-all;
}

.resource-type .form-group{
	display: flex;
	flex-wrap: wrap;
}

.resource-result-filter{
	margin-top: 15px;
}

.resource-result-filter li{
	cursor: pointer;
	background: #D8D8D8;
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 5px 5px 5px 10px;
	border-radius: 20px;
}

.resource-result-filter li.active{
	background: #00B9F2;
}

.resource-result-filter li span{
	color: #fff;
	background: #4a4a4a;
	margin-left: 5px;
	padding: 0 5px;
	border-radius: 10px;
}

.dropdown-toggle{
	cursor: pointer;
}

.resource-result-table{
	width: 100%;
	margin-top: 30px;
	font-size: 18px;
}

.resource-result-table tr{
	border-bottom: 1px solid #D8D8D8;
	font-size: 22px;
}

.resource-result-table td{
	padding: 15px 0;
}

.resource-result-table th{
	padding-bottom: 10px;
}

.resource-result-table .spec{
	text-align: right;
	font-size: 16px;
}

.resource-result-table .dropdown-menu{
	left: auto;
	right: 0;
	font-size: 16px;
	text-align: left;
}

.resource-result-table a.download-link{
	background: url(../images/ic_attachment.png) right center no-repeat;
	background-size: 13px 18px;
	padding-right: 23px;
}

/*download end*/


/*news start*/

.news-cover{
	min-height: 150px;
	background: #fff;
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.news-cover img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-width: 262.5px;
	max-height: 262.5px;
}

.news-search{
	margin-bottom: 30px;
}

.news-search .search-input{
	width: 100%;
	position: relative;
	top: auto;
	margin: 0;
	max-width: none;
}

.news-search .search-input input{
	width: calc(100% - 54px); 
}

.news-cover{
	overflow-y: hidden;
	border-radius: 5px;
	margin-bottom: 15px;
}

.news-card{
	margin-bottom: 45px;
}

.news-card a{
	display: block;
}

.news-card span{
	font-size: 14px;
	letter-spacing: 0;
	display: block;
	padding-top: 10px;
}

.news-list .row{
	display: flex;
	flex-wrap: wrap;
}

.news-title{
	padding-top: 120px;
	padding-bottom: 30px;
	border-bottom: 1px solid #D8D8D8;
	margin-bottom: 30px;
}

.news-title h1{
	font-size: 64px;
	letter-spacing: 1.78px;
	padding-bottom: 20px;
	text-align: justify;
}

.news-title span{
	font-size: 18px;
	letter-spacing: 0;
	line-height: 26px;
}

.share-tools{
	background: #F2F2F2;
	border-radius: 5px;
	padding: 20px;
	text-align: center;
	color: #9B9B9B;
}

.share-tools li{
	margin-top: 20px;
}

.news-content .free-edit{
	padding: 0 15px 60px 15px;
	min-height: 50vh;
}

/*news end*/

/*contact start*/

.contact-branches{
	padding: 60px;
	display: flex;
	flex-wrap: wrap;
}

.contact-branches .reveal-effect{
	margin-bottom: 30px;
}

.branches-card{
	display: flex;
	overflow: hidden;
	border-radius: 5px;
	padding: 0;
	height: 100%;
}

.google-map-wrapper{
	padding: 0;
}

.google-map {
	width: 100%;
	height: 100%;
}
.google-map iframe {
    width: 100% !important;
    height: 100% !important;
}

.branches-info{
	background: #fff;
	padding: 30px;
}

.branches-info h3{
	font-size: 36px;
	color: #00B9F2;
	letter-spacing: 1.5px;
}

.branches-info h4{
	font-size: 16px;
	color: #9B9B9B;
	letter-spacing: 0.5px;
	padding-bottom: 20px;
}

.branches-info h5{
	font-size: 14px;
	letter-spacing: 0.58px;
}

.branches-info p{
	font-size: 18px;
	letter-spacing: 0;
	line-height: 26px;
	margin-bottom: 10px;
}

.branches-info p:last-child{
	margin: 0;
}

.branches-info a{
	word-break: break-all;
}

.contact-partner h3{
	font-size: 22px;
	color: #4A4A4A;
	letter-spacing: 0;
	margin-bottom: 20px;
}

.partner-logo{
	border-bottom: 1px solid #D8D8D8;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.partner-logo img{
	max-width: 100%;
	height: auto !important;
}

.distributors-table .table-title{
	border-bottom: 1px solid #9B9B9B;
	padding: 0 30px 10px 30px;
}

.distributors-table .table-tr{
	background: #fff;
	padding: 15px 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 18px;
	line-height: 120%;
	border-radius: 5px;
	margin-top: 20px;
}



.distributors-table .table-tr div{
	/*overflow : hidden;
	  text-overflow : ellipsis;
	  white-space : nowrap;*/
	 /*word-break: break-all;*/
	word-break: keep-all;
	word-wrap: break-word;
}

.distributors-table .table-tr div span{
	display: none;
}

/*contact end*/


/*form start*/

.form-group{
	margin-bottom: 30px;
}

.form-group.machine-form{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.form-group.agree-group{
	display: flex;
	align-items: center;
}

.agree-group .agree-check{
	margin-right: 20px;
}


.form-group label{
	font-size: 22px;
	letter-spacing: 0.61px;
	display: block;
	margin-bottom: 10px;
	vertical-align: top;
	font-weight: 300;
}

.form-group label.checkbox, .form-group .checkbox label{
	font-size: 18px;
	letter-spacing: 0;
}

.form-group label.checkbox.agree-input{
	padding-left: 0;
}


.form-group label span{
	font-size: 14px;
	letter-spacing: 0.59px;
	background: #D8D8D8;
	padding: 5px 10px;
	border-radius: 3px;
	margin-left: 10px;
	vertical-align: middle;
}

.form-group select{
	background: #fff;
	/* height: 37px; */
}

.form-group input[type="checkbox"]{
	margin-top: 2px;
}

.form-group input[type="text"], .form-group input[type="email"], .form-group select, .form-group textarea{
	width: 100%;
	border-radius: 5px;
	border: none;
	font-size: 16px;
	padding: 10px;
	outline: none;
}

.g-recaptcha > div{
	margin: 0;
}

.form-btn-wrapper{
	padding-top: 30px;
	text-align: center;
}

/*form end*/

/* TODO: cookie-block */
.cookie-block{
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 1500;
	width: 100%;
	background-color: rgba(0,0,0,0.7);
	color: #ffffff;
	font-size: 18px;
	letter-spacing: 0.75px;
	padding: 33px 0;
	animation: fadeIn .3s ease;
	display: block;
}


.cookie-block.close{
	animation: fadeOut 1s ease;
}

.cookie-wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
}

.cookie-text{
	width: 42%;
	line-height: 22px;
}

.cookie-btn{
	background-color: #ffffff;
	padding: 12px 36px;
	border-radius: 22.5px;
	color: #4A4A4A;
	font-family: Barlow;
	font-size: 18px;
	letter-spacing: 0.75px;
	margin-left: 3.1vw;
}

/* TODO: cookie-block rwd */
@media(max-width: 1093px){

	.cookie-wrapper{
		flex-wrap: wrap;
	}
	.cookie-text{
		width: 90%
	}
	.cookie-btn{
		margin-left: 0;
		margin-top: 20px;
	}
}

@media(max-width: 576px){
	.cookie-block{
		font-size: 12px;
		padding: 18px 0;
	}
	.cookie-btn{
		font-size: 12px;
	}
	.cookie-text{
		line-height: 20px;
	}

	.form-group.agree-group{
		align-items: flex-start;
	}
	.form-group.first-name{
		min-width: 373px
	}
	.form-group label span{
		font-size: 12px;
		display: block;
		max-width: 131px;
		margin-left: 0;
		margin-top: 10px;
	}
	.form-group label.checkbox.agree-input{
		font-size: 12px;
		margin: 0;
	}
}

/* fadein animate */
@keyframes fadeIn{
	0%{
		opacity: 0;
	}

	100%{
		opacity: 1;
	}
}

@keyframes fadeOut{
	0%{
		opcity: 1;
	}
	100%{
		opacity: 0;
	}
}

/*footer 開始*/

footer{
	background: #4A4A4A;
	padding: 30px;
}

.footer-links{
	padding-bottom: 20px;
	border-bottom: 1px solid #9B9B9B;
}

.footer-links li{
	font-size: 16px;
	line-height: 22px;
	color: #D3D3D3;
	letter-spacing: 0.5px;
	display: inline-block;
	vertical-align: top;
	padding-right: 45px;
}

.footer-links li.social-medias{
	float: right;
	padding-right: 0;
	max-width: calc(100% - 1050px);
}

.footer-links li li{
	display: block;
	padding: 0;
}

.footer-links li.social-medias li{
	display: inline-block;
	margin-right: 20px;
	margin-top: 10px;
}

.footer-links li.social-medias li:last-child{
	margin-right: 0;
}

.footer-links li.social-medias li{
	max-width: calc(25% - 18px);
}

.footer-links li.social-medias li img{
	max-width: 100%;
	min-width: 30px;
	height: auto;
}

.footer-links li.social-medias li img:hover{
	opacity: 0.7;
}

.footer-links li a{
	font-size: 14px;
	color: #9B9B9B;
	letter-spacing: 0.44px;
	line-height: 22px;
}

.footer-links li a:hover,footer .f-bottom-block a:hover{
	color: #00B9F2;
}
footer .f-bottom-block{
	display: flex;
	justify-content: space-between;
	padding-top: 18px;
}

footer .f-bottom-block a{
	font-size: 12px;
	color: #D3D3D3;
}

footer .copyright{
	font-size: 12px;
	color: #9B9B9B;
	letter-spacing: 1px;
}

/*footer 結束*/	


/* TODO: cookie-page */

.cookie-rule{
	padding: 100px 0 0px 0;
}

.cookie-page{
	margin-top: 60px;
}
.cookie-page-header{
	width: 100%;
	padding: 93.5px 0;
	background: linear-gradient(180deg, #4A4A4A 0%, #444444 100%);
	color: #ffffff;
}

.cookie-page-header .page-title{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 64px;
	line-height: 77px;
	padding-bottom: 0;
	padding-top: 0;
	text-align: center;
}

.cookie-page-header .page-text{
	font-family: Barlow;
	margin-top: 10px;
	font-size: 22px;
	text-align: center;
}


.sticky-block{
	position: sticky;
	top: 60px;
}

.cookie-aside{
	width: 100%;
	top: 0px;
	height: calc(100vh - 60px);
	overflow-y: scroll;
	padding-bottom: 30px;
}

.cookie-content{
	width: 100%;
	margin-bottom: 81px;
}

.cookie-page .col-lg-4 , .cookie-page .col-lg-8{
	padding-left: 25px;
	padding-right: 25px;
}

.c-link-title{
	font-family: Barlow;
	font-weight: bold;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 0.3em;
	margin-bottom: 20px;
	color: #4A4A4A;
}

.cookie-link-list{
	list-style: decimal;
	padding-left: 25px;
	margin-bottom: 30px;
}
.cookie-link-list .c-item{
	list-style: decimal;
	padding: 16px 20px 16px 0;
	position: relative;
	color: #00B9F2;
	line-height: 28px;
	/* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
}

.cookie-link-list .c-item:after{
	content: "";
	width: calc(100% + 14px);
	height: 1px;
	background-color: rgba(0, 0, 0, 0.2);
	position: absolute;
	bottom: 0;
	left: -19px;
	right: 0;
}

.cookie-aside .c-link{
	color: #00B9F2;
	font-size: 20px;
}

.cookie-link-list .c-item:nth-of-type(1){
	padding-top: 0;
}

.cookie-content br{
	content: "";
	display: block;
	margin-top: 25px;
}

.rule-block{
	margin-bottom: 150px;
}

.rule-block:nth-last-of-type(1){
	margin-bottom: 0;
}

.cookie-content .rule-title{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 36px;
	line-height: 43px;
	color: #000000;
	margin-bottom: 50px;
}

.cookie-content .rule-text{
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 20px;
	color: #000000;
	margin-bottom: 25px;
	line-height: 30px;
}

.cookie-content .rule-text a{
	font-size: 20px;
	font-family: Barlow;
}

.cookie-content .rule-list{
	
	list-style: inherit;
	padding-left: 43px;
	margin-bottom: 65px;
}

.cookie-content .rule-list.mb-0{
	margin-bottom: 0;
}


.cookie-content .rule-list.pl-20{
	padding-left: 20px;
}

.cookie-content .rule-list li{
	list-style: inherit;
	font-family: Barlow;
	font-style: normal;
	font-weight: normal;
	font-size: 20px;
	color: #000000;
	margin-bottom: 25px;
	line-height: 30px;
}

.cookie-content .rule-list li:nth-last-of-type(1){
	margin-bottom: 0;
}

.cookie-content .rule-text.mb-65{
	margin-bottom: 65px;
}

.cookie-content .rule-text.mb-0{
	margin-bottom: 0px;
}

.cookie-content .rule-text .text-bold{
	font-weight: bold;
}

.cookie-content .rule-text.font-bold{
	font-weight: bold;
}

.cookie-content .rule-text.font-bold.font-muted{
	color: #9B9B9B;
}

@media(max-width: 1092px){
	.cookie-content .rule-text.mb-xs-45{
		margin-bottom: 45px;
	}

	.cookie-page-header{
		padding: 55px 0;
	}

	.cookie-page-header .page-title{
		font-size: 32px;
		line-height: unset;
	}

	.cookie-page-header .page-text{
		font-size: 20px;
	}

	.cookie-rule{
		padding: 20px 0;
	}
	.sticky-block{
		position: relative;
		top: unset;
	}
	.cookie-aside{
		height: auto;
		overflow-y: unset;
	}

	.rule-block{
		margin-bottom: 60px;
	}
}

@media(max-width: 576px){
	.rule-block{
		margin-bottom: 45px;
	}
	.cookie-content .rule-title{
		font-size: 32px;
		margin-bottom: 45px;
	}
}

/* TODO: cookie-page end*/





@media screen and (max-width: 1366px) {
	.odm-flow-chart{
		background-image: url(../images/bg_odm_1366.jpg); 
	}
	.odm-flow-chart.sp{
		background-image: url(../images/bg_odm_1366_sp.jpg);
	}
	.odm-flow-chart.cn{
		background-image: url(../images/bg_odm_1366_cn.jpg);
	}
}
@media screen and (max-width: 1300px){
	nav.nav-control-mobile{
		display: block;
	}

	.c-hamburger {
	  display: block;
	  position: absolute;
	  overflow: hidden;
	  margin: 0;
	  padding: 0;
	  top: 7px;
	  right: 20px;
	  z-index: 2001;
	  width: 36px;
	  height: 48px;
	  font-size: 0;
	  text-indent: -9999px;
	  appearance: none;
	  box-shadow: none;
	  border-radius: none;
	  border: none;
	  cursor: pointer;
	  background: none;
	}

	.c-hamburger:focus {
	  outline: none;
	}

	.c-hamburger span {
	  display: block;
	  position: absolute;
	  top: 22px;
	  left: 0px;
	  right: 0px;
	  height: 2px;
	  background: #333;
	}

	.c-hamburger span::before,
	.c-hamburger span::after {
	  position: absolute;
	  display: block;
	  left: 0;
	  width: 100%;
	  height: 2px;
	  background-color: #333;
	  content: "";
	}

	.c-hamburger span::before {
	  top: -8px;
	}

	.c-hamburger span::after {
	  bottom: -8px;
	}

	.c-hamburger--htx {
	  background-color: none;
	}

	.c-hamburger--htx span {
	  transition: background 0s 0.3s;
	}

	.c-hamburger--htx span::before,
	.c-hamburger--htx span::after {
	  transition-duration: 0.3s, 0.3s;
	  transition-delay: 0.3s, 0s;
	}

	.c-hamburger--htx span::before {
	  transition-property: top, transform;
	}

	.c-hamburger--htx span::after {
	  transition-property: bottom, transform;
	}

	/* active state, i.e. menu open */

	.c-hamburger--htx.is-active span {
	  background: none;
	}

	.c-hamburger--htx.is-active span::before {
	  top: 0;
	  transform: rotate(30deg);
	}

	.c-hamburger--htx.is-active span::after {
	  bottom: 0;
	  transform: rotate(-30deg);
	}

	.c-hamburger--htx.is-active span::before,
	.c-hamburger--htx.is-active span::after {
	  transition-delay: 0s, 0.3s;
	}

	header{
		background: #fff;
		height: 60px;
		border-bottom: 1px solid #f4f4f4;
	}

	nav{
		display: none;
		height: auto;
		padding: 60px 15px 0 15px;
	}

	nav ul.menu{
		float: none;
		width: 100%;
		height: calc(100vh - 60px);
		transition: all 0.25s;
		transform: translateX(0);
	    overflow-y: auto;
	    overflow-x: hidden;
	}

	nav ul.menu > li{
		display: block;
		border-top: 1px solid #f4f4f4; 
		padding: 0;
	}

	nav ul.menu > li > span{
		display: block;
		padding: 20px 0;
	}

	nav ul.menu > li:hover {
	    border-top: 1px solid #f4f4f4;
	}

	nav ul.menu > li:hover .submenu-container{
		display: none;
	}

	nav ul.menu > li .submenu-container, nav ul.menu > li > ul.dropdown-menu{
		background: #fff;
		padding: 0;
		padding-bottom: 30px;
		height: calc(100vh - 60px);
		overflow-y: auto;
		z-index: 2;
		transform: translateX(100%);
		transition: all 0.25s;
		top: 0;
	}

	nav ul.menu > li .submenu-container > ul{
		display: block;
		-webkit-overflow-scrolling: touch;
	}

	nav ul.menu > li .submenu-container{
		text-align: left;
		-webkit-overflow-scrolling: touch;
	}

	.dropdown .caret{
		display: none;
	}

	.dropdown{
		position: inherit;
	}

	nav ul.menu > li > ul.dropdown-menu{
		float: none;
		border: none;
		left: 0;
		box-shadow: none;
		width: 100%;
	}

	nav ul.menu li.go-back-menu-mobile{
		display: block;
	}

	nav ul.menu.push-to-left-side{
		transform: translateX(-100%);
	    overflow: unset;
	}

	nav ul.menu.push-to-left-side.push-back{
		transform: translateX(0%);
	}

	nav ul.menu > li .submenu-container > ul > li, nav ul.menu > li > ul.dropdown-menu > li{
		min-width: auto;
		display: block;
		border-top: 1px solid #f4f4f4;
		padding: 15px 0;
		margin: 0 15px;

	}

	nav ul.menu > li .submenu-container > ul > li > a, nav ul.menu > li > ul.dropdown-menu > li > a{
		border: none;
		padding: 0;
		font-size: 22px;
	}

	nav ul.menu > li.dropdown > a{
		display: block;
		padding: 20px 0;
	}
	.open_search{
		margin: 15px 0;
	}
}
@media screen and (max-width: 1200px) {
	.odm-flow-chart{
		background-image: url(../images/bg_odm_991.jpg); 
		height: 922px;
	}
	.odm-flow-chart.sp{
		background-image: url(../images/bg_odm_991_sp.jpg);
	}
	.odm-flow-chart.cn{
		background-image: url(../images/bg_odm_991_cn.jpg);
	}

	

	.go-back-menu-mobile{
		display: block;
	}

	.go-back-menu-mobile img{
		width: 24px !important;
		height: 24px !important;
	}

	.footer-links > ul > li{
		min-width: 200px;
		margin-bottom: 30px;
	}

	.footer-links li.social-medias{
		display: inline-block;
		float: none;
		width: auto;
		max-width: none;
	}

	.news-block{
		width: 50%;
		padding-top: 50%;
	}

	.home-product{
		border: none;
		margin-bottom: 0px;
	}

	.product-swiper-container, .product-main-info{
		width: 50%;
		max-width: 38.97%;
		flex-basis: 38.97%;
		/* margin: 0; */
	}

	.product-swiper{
		margin-top: 45px;
	}

	.product-main-info{
		padding-top: 140px;
	}


	.product-features .row{
		display: flex;
		flex-wrap:wrap;
	}

	.product-features li p{
		line-height: 120%;
	}

	.download-block img{
		width: 44px !important;
		height: auto !important;
	}

	h3, .category-info h3{
		font-size: 28px;
	}

	.news-title h1, .page_banner h1, .download-page h1, .product-list h1, .product-main-info h1, .page-title h1{
		font-size: 48px;
	}

	.download-page h1{
		width: 85%;
		text-align: center;
	}

	.product-page-info{
		padding-bottom: 60px;
	}

	.distributors-table{
		padding: 0 30px;
	}

	.distributors-table .table-tr{
		padding: 15px;
	}

	.distributors-table .table-title{
		padding: 0 15px 10px 15px;
	}

	.download-resource .icop-btn{
		margin-top: -15px;
	}

}

@media screen and (max-width: 991px) {
	.open_search{
		margin-top: 0;
	}
	.news-block{
		height: 384px;
	}

	.home-partners{
		margin-top: 45px;
	}

	.category-cover{
		max-width: 240px;
	}

	.category-cover img{
		width: 100%;
		height: auto;
	}

	.category-info{
		max-width: calc(100% - 240px);
	}

	.product-page-info{
		padding-left: 30px;
	}

	.product-list-wrapper{
		padding-left: 15px;
	}
	.product-list-wrapper .grid-item{
		width: 300px;
		padding: 0 15px 30px 15px;
	}

	.product-filter{
		left: auto;
		right: 0;
		top: 80px;
		border-radius: 5px 0 0 5px;
		transform: translateX(100%);
		transition: all 0.25s;
	}

	.close-filter-mobile{
		position: absolute;
		z-index: 1;
		transition: all 0.25s;
		display: block;
		left: 0;
		padding: 5px;
		top: 14px;
		background: #d3d3d3;
		border-radius: 5px 0 0 5px;
	}

	.open-filter-mobile{
		display: block;
		position: fixed;
		top: 80px;
		right: 15px;
		background: rgba(0,185,242,1);
		padding: 10px 10px;
		border-radius: 24px;
		z-index: 1;
	}

	.product-list-container{
		overflow: hidden;
	}

	.product-swiper-container, .product-main-info{
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
		/* padding-bottom: 30px; */
	}

	.product-swiper{
		height: 50vh;
	}

	.product-main-info{
		padding-top: 0px;
		background: #f4f4f4;
	}

	.product-main-info .breadcrumbs{
		display: none;
	}

	.share-tools{
		display: flex;
		flex-wrap:wrap;
		justify-content: center;
		align-items: center;
		margin-bottom: 30px;
	}

	.share-tools span{
		padding-right: 5px;
	}

	.share-tools li{
		display: inline-block;
		padding: 0 5px;
		margin: 0;
	}

	.news-content .row{
		display: flex;
		flex-direction: column-reverse;
	}

	.table-title{
		display: none;
	}

	.distributors-table{
		padding: 0 60px;
		margin-top: -30px;
	}

	.distributors-table .table-tr{
		align-items: flex-start;
	}

	.distributors-table .table-tr div{
		margin-bottom: 20px;
	}

	.distributors-table .table-tr div span{
		display: block;
		opacity: 0.5;
		font-size: 14px;
	}

	a:hover{
		opacity: inherit;
	}

	.mobile-search-button{
		position: fixed;
		top: 17px;
		right: 80px;
		z-index: 999;
	}

	.search-input a{
		display: block;
		clear: both;
		width: 100%;
		margin: 20px 0
	}

	.search-input input{
		width: calc(100% - 54px);
		height: 48px;
		overflow: hidden;
	}

	.search-input button{
		height: 48px;
	}

	nav ul.menu > li.hidden--mobile{
		display: none;
	}

}

@media screen and (max-width: 767px) {
	.desktop-slide{
		display: none;
	}

	.home-swiper .swiper-slide img.mobile-slide{
		display: inline-block;
		width: 100%;
		height: 450px;
		object-fit: cover;
	}

	.news-block{
		width: 100%;
		padding-top: 100%;
	}

	.home-partners, .home-product{
		margin-top: 40px;
		padding: 0;
	}

	.home-section-title{
		padding-left: 0;
	}

	.home-product-category{
		padding: 0;
	}

	.home-partners > div{
		margin-bottom: 30px;
		padding: 0;
	}

	.footer-links{
		padding-bottom: 0;
	}

	.footer-links > ul > li{
		min-width: auto;
		width: 49%;
		padding: 0;
		margin-bottom: 20px;
	}

	.footer-links li.social-medias{
		width: 49%;
	}

	.footer-links li.social-medias li{
		max-width: none;
		margin-top: 0;
		margin-bottom: 10px;
		margin-right: 10px;
	}

	.page_banner .banner_title_erapper{
		width: calc(100% - 40px);
		margin-left: auto;
		margin-right: auto;
	}
	.banner_title_erapper h2{
		width: 100%;
	}

	.banner_title_erapper h2 br{
		display: none;
	}

	.news-title h1, .page_banner h1, .download-page h1, .product-list h1, .product-main-info h1, .page-title h1{
		font-size: 36px;
	}

	.category-cover, .category-info{
		max-width: none;
		float: none;
	}

	.category-info{
		padding: 20px;
	}

	h3, .category-info h3{
		font-size: 24px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.category-info h3{
		padding: 0;
		padding-bottom: 10px;
	}

	.product-categories{
		padding-bottom: 0;
	}

	.category-cover img{
		width: 100%;
		height: 215px;
		object-fit:contain;
	}

	.product-page-info{
		padding-right: 30px;
		padding-bottom: 30px;
	}

	.product-list h1, .product-main-info h1{
		margin-left: 0;
	}

	.product-page-info .breadcrumbs{
		width: calc(100% - 30px);
	}

	.product-list{
		padding-top: 85px;
	}

	.product-list-wrapper .grid-item{
		width: 100%;
	}

	.product-list-wrapper{
		padding: 30px 15px;
	}

	.product-main-info{
		padding-right: 30px;
	}

	.product-swiper{
		margin-top: 30px;
	}

	/* .product-features{
		padding: 30px 10px 30px 10px;
	} */

	.product-download-container .download-block{
		padding: 45px 0;
		position: relatvie;
	}

	.contact-us-float-box{
		right: 0;
		left: 0;
	}

	.contact-us-float-box .wrapper{
		border-radius: 0;
	}

	.odm-article{
		padding-top: 30px;
	}

	.odm-article p{
		font-size: 18px;
		line-height: 28px;
		width: calc(100% - 40px);
	}

	.odm-flow-chart{
		margin-top: 15px;
		padding-top: 30px;
	}

	.odm-flow-chart {
	    background-image: url(../images/bg_odm_767.jpg);
	    height: 2027px;
	}
	.odm-flow-chart.sp{
		background-image: url(../images/bg_odm_767_sp.jpg);
	}
	.odm-flow-chart.cn{
		background-image: url(../images/bg_odm_767_cn.jpg);
	}

	.odm-module{
		padding: 0 30px;
	}

	.odm-module-cover, .odm-module-info{
		max-width: none;
	}

	.odm-module-card{
		flex-direction: column;
	}

	.odm-module-info{
		padding: 20px 20px 10px 20px;
	}

	.odm-module-info p{
		width: 100%;
	}

	.odm-module-info ul{
		margin-bottom: 20px;
	}

	.odm-module-info > div{
		padding: 0;
	}

	.odm-module .container{
		padding: 30px 0;
	}

	.page-title .breadcrumbs{
		padding-left: 20px;
		padding-right: 20px;
	}

	.page-title{
		padding-bottom: 45px;
	}

	.page-content{
		padding: 30px 0;
	}

	.page-title h2, .page_banner h2{
		font-size: 16px;
		line-height: 22px;
	}

	.download-page{
		padding: 0 20px;
	}

	.download-resource h3, .branches-info h3{
		padding-left: 0;
	}

	.download-resource .icop-btn{
		margin-top: -20px;
	}

	.resource-result-table th{
		font-size: 14px;
	}

	.resource-result-table td{
		font-size: 16px;
	}

	.resource-result-table .spec{
		font-size: 12px;
	}

	.resource-result-table a.download-link{
		background: none;
	}

	h4{
		font-size: 16px;
	}

	.news-title{
		padding-top: 85px;
	}

	.news-title h1{
		width: 100%;
		letter-spacing: 0.5px;
		font-size: 28px;
	}

	.branches-card{
		flex-direction: column;
	}

	.branches-info{
		padding: 20px;
	}

	.distributors-table{
		padding: 0 30px;
	}

	.distributors-table .table-tr{
		padding: 20px 5px;
	}

	.page-title{
		padding-top: 85px;
	}

	.form-group.first-name{
		margin-bottom: -15px;
	}

	.product-thumbs .swiper-slide{
		width: 30px;
		height: 30px;
	}

	.product-swiper{
		height: 45vh;
	}

	.product-swiper-container, .product-main-info{
		padding-bottom: 15px;
		max-width: 100%;
		flex-basis: 100%;
	}

	.logo{
		margin-left: 15px;
	}

	.news-block h3{
		padding: 0;
	}

	.news-list .row:before,
	.news-list .row:after {
	   content: normal;
	}
	.product-features li{
		width: 100%;		
	}



}