@charset "utf-8";
/* CSS Document */
#open-popup {padding:20px}
.white-popup {
  position: relative;
  background: #FFF;
  padding: 40px;
  width: auto;
  max-width: 200px;
  margin: 20px auto;
  text-align: center;
}
.magnificPopup{}
body {
	margin: 0;
	font-family: "Numans", "NotoSansTC", \5FAE\8EDF\6B63\9ED1\9AD4, Arial, sans-serif;
	overflow: hidden; font-size: 16px;
	position: relative;
}
ul, li {
	margin: 0;
	padding: 0; list-style: none
}

:focus{ outline: 0}
a{color:#000; text-decoration: none;}
a:hover{color:#000; text-decoration: none}
img[usemap], map area{
    outline: none;
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
.wrap {
	width: 1200px;
	margin: 0 auto;
	padding:0 20px;
}
img{max-width: 100%; border: 0}
#header, #header2 {

}
/*menu*/

.logo {
	width: 30%;
	float: left
}
.logo img {
	width: 175px;
	padding: 12px 20px 0 0
}
#nav {
	width: 70%;
	float: right;
	padding-top: 15px;
	text-align: right;
	position: relative
}
#nav>ul {
	margin: 0 0 0 auto;display: inline-block;
}
#nav>ul>li {
	float: left;
}
#nav>ul>li>a {
	font-size: 20px;
	color: #000;
	padding: 22px 15px;
	display: block;
}
#nav>ul>li:hover>a , #nav>ul>li.active>a{color:#000; /*border-bottom:3px solid #000;*/font-weight: bold;}

.nav-pro{}
.nav-pro li{float: left;width: 12%;font-size: 24px;}
/*次選單*/

li a, .dropbtn {
	text-align: center;
	text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
}
li.dropdown {
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #EEE;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 999;
	text-align: left;padding:15px;top:calc(100% - 10px)
	
}
.banner-wen{position: relative;background: #e5e5e5;text-align: center;}
.banner-text{position: absolute;color: #fff;text-align: center;font-size: 58px;width: 100%;padding-top: 6%;}
.banner-text2{position: absolute;color: #fff;font-size: 36px;padding-top: 12%;width: 100%;}
.banner-text2 span{letter-spacing: 12px;}

.pro_nav{display: none;
	position: absolute;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 999;
	text-align: left;
	min-width: 110px;
	border-top:3px solid #000;
	/*margin-left: -30%*/
}

.pro_nav li {
	text-align: left;
	margin: 8px 9px;
}
.pro_nav li div{ overflow: hidden; }
.pro_nav li div img{transition: all 0.3s ease-in-out}
.pro_nav li:hover div img{ transform: scale(1.1)}
.pro_nav li:hover a{/*color:rgba(70,193,3,1.00)*/}

.dropdown-content a {
    color: black;
    
    text-decoration: none;
    display: block;
    text-align:left;
}


.dropdown-content a:hover {
	/*color:rgba(70,193,3,1.00)*/
	text-decoration: underline;
    font-weight: bold;
}
.dropdown:hover .dropdown-content {
	display: block;
}
.dropdown-content li.nav3_0 {
	display: none
}
#header2 {
	box-shadow: 0 0px 8px #333;
	background: #fff;
}
.header * {
	-webkit-transition: position 0.3s ease 0.3s;
	-moz-transition: position 0.3s ease 0.3s;
	-ms-transition: position 0.3s ease 0.3s;
	-o-transition: position 0.3s ease 0.3s;
	transition: position 0.3s ease 0.3s;
}
.header--clone {
	position: fixed;
	width: 100%;
	z-index: 130;
	top: 0;
	left: 0;
	-webkit-transform: translateY(-160px);
	-ms-transform: translateY(-160px);
	transform: translateY(-160px);
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
.header--stick {
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}
.sb-active .header--clone {
	-webkit-transform: translateY(-160px);
	-ms-transform: translateY(-160px);
	transform: translateY(-160px);
}
.sb-toggle-right , .sb-toggle-left {
	display: none
}
/*about*/
.mid-about-text{padding: 60px 135px;font-size: 20px;line-height: 40px;}
.mid-about-text h3{font-weight: 400;text-align: center;}
.mid-about-text p{font-size: 20px;line-height: 16px;padding: 0 30px;text-align: center;}
.mid-about-cure1{text-align: center;}
.mid-about-cure2{}
.mid-about-4{}
.mid-about-4 ul{display: flex;flex-wrap: wrap;}
.mid-about-4 ul li{width: 50%;float: left;text-align: center;padding:20px 20px;}
.about{background: #FAFAFA;height: 100%;padding: 0 40px}
.about-en{background: #FAFAFA;height: 100%;}
.about-title{font-size: 20px;font-weight: bold;line-height: 60px;}
.about p{font-size: 20px;}
.about-en p{font-size: 14px;}
.about boder2{border-style: solid;padding: 5px 5px;}
.best{font-size: 24px;font-weight: bold;color: #fff;padding: 5% 0;}
/*news*/
.mid-news-01{margin-bottom: 40px;}
.mid-news-01 ul{}
.mid-news-01 ul li{width: 40%;float: left;}
.news-p1{}
.news-p1 p{text-align: center;}
.news-p1 b{font-size: 50px;border-bottom: 2px solid #000;}
.news-p1 ul{}
.news-p1 ul li{width: 25%;float: left;padding: 20px 0;}
.news-p1 ul li p{border-right: 2px solid #000;text-align: center;font-size: 20px;}

.mid-news-02{margin-bottom: 40px;}
.mid-news-02 ul{padding-left: 40px;}
.mid-news-02 ul li{}
.news-p1-1{float: left;width: 42%;}
.news-p1-1 ul li{line-height: 35px;list-style: disc;}
.news-p2{float: left;width: 50%;}
.news-p2 ul{}
.news-p2 ul li{width: 100%;float: left;padding: 8px 120px;list-style: inside;}
.news-p2 ul li p{border-right: 2px solid #000;text-align: center;font-size: 20px;}
.news-list{}
.news-list h2{font-size: 20px;padding: 0 20px;}
.news-list p{font-size: 16px;}
.mid-news-03{}
.mid-news-03 ul li{width: 40%;float: left;}
.mid-news-04{}
.mid-news-04 ul{}
.mid-news-04 ul li{width: 50%;float: left;text-align: center;padding:50px 20px;}
.mid-news-04 ul li:nth-child(2n+1){clear: both;}
.news-p3{}
.news-p3 p{font-size: 20px;border: 2px solid;border-radius: 10px;padding: 10px 30px;text-align: left;}
.news-pic img{width: 33.333%;float: left;}
/*products*/
.mid-products-1{background: #000;}
.mid-products-1 ul{padding: 15px 0px;}
.mid-products-1 ul li{width: 15%;display: inline-block;padding: 0 15px;}
.mid-pro-tech a{color: #fff;}
.text-1{}
.text-1 h1{color: #fff;font-size: 42px;margin: 0 auto;text-align: center;padding-top: 50px;}
.text-2{color: #fff;font-size: 32px;margin: 0 auto;text-align: center;padding-top: 20px;}
.text-1 h3{color: #fff;font-size: 42px;margin: 0 auto;text-align: center;padding-top: 12px;font-weight: 300;}
.pro-zone-1{position: relative;width: 68%;margin: 0 auto;margin-top: 80px;margin-bottom: 30px;}
.gobo-flip-1{padding-top: 0%; padding-left: 18%;z-index: 1;}
.gobo-flip-2{position: absolute;z-index: 11;top: 35%;left: 5%;right: 18%;}
.gobo-flip-3{position: absolute;z-index: 22;top: 0%;left: -15%;right: 35%}
.gobo-text{color: #fff;text-align: center;font-size: 22px;line-height: 42px;padding-top: 12%;padding-bottom: 5%;}
.pro-zone-2{z-index: 1;padding: 30px 0px 180px 0;background: #252525;}
.pro-end{width: 50%;float: left;position: relative}
.pro-end ul{font-size: 28px;padding-top: 50px;}
.pro-end ul li{line-height: 50px;}
.gobo-pre-1{font-size: 42px;color: #fff;}
.gobo-pre-1 b{font-size: 56px;line-height: 76px;color: #fff;}
.gobo-pre-2{padding-top: 6px;color: #fff;}
.gobo-pre-2-en{color: #fff;font-size: 18px;}
.gobo-pre-3{font-size: 24px;padding: 20px 0px 0 0;color: #28a7e1;}
.gobo-pre-3 a{color: #1961AE;}
.gobo-pre-4{color: #fff;font-size: 18px;position: absolute;top: 39.5%;left: 48%;}
.compare a{color: #1961AE;}
.gobo-flip-4{position: absolute;top: 36px;width: 100%;left: 136px;}
.mid-pro02-1-next{background: #fbfbfc;}
.tech{background: #bbbdc1;font-size: 32px;padding: 12px 24px;float: left;margin-top: 120px;width: 21%;text-align: center;}
.tech-en{background: #bbbdc1;font-size: 20px;padding: 12px 24px;float: left;margin-top: 100px;width: 32%;text-align: center;font-weight: bold;}
.gobo-pro-1{width: 20%;display: inline-block;margin-left: 20%;margin-top: 6%;}
.gobo-pro-1-en{width: 24%;display: inline-block;margin-left: 8%;margin-top: 6%;}
.rich{text-align: center;font-size: 24px;padding-top: 12%;}
.rich-en{text-align: center;font-size: 22px;padding-top: 6%;}
.rich p{font-size: 42px;padding-bottom: 5%;margin: 0;}
.rich-en p{font-size: 42px;padding-bottom: 5%;margin: 0;}
/*.gobo-pro-1 p{font-size: 42px;text-align: center;}*/
.gobo-pro-1-en p{font-size: 28px;text-align: center;}
.gobo-pro-2{width: 20%;display: inline-block;margin-left: 12%;}
.gobo-pro-2-en{width: 24%;display: inline-block;margin-left: 8%;}
.gobo-pro-2 p{font-size: 42px;text-align: center;}
.gobo-pro-2-en p{font-size: 28px;text-align: center;}
.remark-pro{font-size: 20px;color: #fc0012;text-align: left;padding: 24px 0;}
table{border-bottom: 2px #000 solid;width: 100%;padding: 3% 0;}
table tr{}
/*table th{padding: 8px;line-height: 1.42857143;vertical-align: top;font-size: 32px;text-align: center;}*/
table td{padding: 8px;line-height: 1.42857143;vertical-align: top;font-size: 22px;text-align: center;width: 20%;}
.tab-under table{border: inherit;}
.spec-title{font-size: 26px;padding-top: 5%;}
.spec-title-en{font-size: 26px;padding-top: 3%; font-weight: bold;}
.spec-icon{font-size: 26px;padding: 12px 0px 0px 0px;}
.spec-icon img{vertical-align: middle}
.spec-icon span{vertical-align: middle;}
.spec table{border: none;padding-top: 2%;border-collapse: collapse;}
.spec table td{border: solid 2px #bebaba;vertical-align: middle;font-size: 21px;}
.spec table th{border: solid 2px #bebaba;vertical-align: middle;font-size: 21px;width: 12%;font-weight: normal;}
.spec-en table{border: none;padding-top: 2%;border-collapse: collapse;}
.spec-en table td{border: solid 2px #bebaba;vertical-align: middle;font-size: 16px;padding: 20px 20px;}
.spec-en table th{border: solid 2px #bebaba;vertical-align: middle;font-size: 21px;width: 12%;font-weight: normal;}

.mid-pro02-2{background: #000;z-index: 10;position: relative;}
.mid-pro-2-p h4 a{color: #1961AE;}
.mid-pro-4 .go a{color: #1961AE;}
.mid-pro-text a{color: #1961AE;}
.compare{width: 33%;display: inline-block;vertical-align: top; margin: 60px 0px;}
.compare p b{font-size: 32px;text-align: center;color: #fff;}
.compare p{font-size: 18px;text-align: center;color: #fff;padding-left: 6px;}
.compare img{display: block;margin: auto;}
.compare .text{font-size: 16px;color: #28a7e1;padding-top: 58px;padding-left: 6px;}
.compare ul li p{text-align: left;}
.compare h1{color: #fff;height: 30px;}
.mid-pro03-1 ul{text-align: center;}
.mid-pro03-1 ul li{width: 20%;text-align: center;padding: 25px 15px 20px 15px;margin: 10px 0px;float: left;}
.pro-info{border: 1px #000 solid;padding: 25px 15px 20px 15px;}
.mid-pro02-1 ul{margin-left: 1%;margin-bottom: 3%;}
.mid-pro02-1 ul li {
    width: 33%;
    text-align: center;
    display: inline-block;
    position: relative;
	}
.mid-pro02-1 ul li p{font-size: 18px; text-align: left;padding-left: 12%;margin: 3% 0 0 0;}
.mid-pro03-news ul li{border: 1px #000 solid;
    width: 43%;
    text-align: center;
    padding: 25px 80px 20px 80px;
    display: inline-block;
    margin-left: 75px;
	margin-bottom: 30px;
    position: relative;}
.mid-pro03-1 ul li img{margin: 0 0 25px 0;}
.mid-pro03-1 ul li p{margin: 5px;font-size: 15px;}
.mid-pro03-1 ul li .pro-info:hover{background: rgba(0,0,0,0.3);}

/*.pagination {text-align: center;}
.pagination ul{margin-bottom: 1%;}
.pagination ul li{display: inline;padding: 0px 10px;}
.pagination ul li a:active{color: #ff0000;}*/

.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
	margin: 30px 0px;
}
.bd-example .pagination {
    margin-top: .5rem;
    margin-bottom: .5rem;
}
.page-item{}
.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dee2e6;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.justify-content-center {
    justify-content: center!important;
}


.product .frame{text-align: right;}
.sale{position: absolute;top: -2px;left: -2px;}
.hide-sale{display: none;}
.sale-more{border: 1px solid;text-align: center;margin: 40px 10px;display: block;}
.sale-more button{border: 0;font-size: 24px;padding: 12px;cursor: pointer;width: 100%;}
.sale-more button:hover{background: #ff0000;color: #fff;}
.wrap hr{margin: 60px 0px}
.filter-container{border: 1px #000 solid;padding: 5px 19px;display: inline-block;
    margin: 10px 10px;vertical-align: top;font-size: 25.6px;}
.filter-container-en{border: 1px #000 solid;padding: 8px 36px 8px 12px;display: inline-block;
    margin: 10px 15px;vertical-align: top;font-size: 22px;}
.filter-container-wrap{width: 1200px;margin: 0 19.6%;padding: 0 20px;}
.filter-container-1-en{border: 1px #000 solid;padding: 8px 7px;display: inline-block;vertical-align: top;font-size: 22px;}
.filter-container:hover{background: #eee;}
.filter-container-1-en:hover{background: #eee;}
.filter-container h2{font-size: 24px;margin: 0;}
.filter-container-1-en h2{font-size: 22px;margin: 0;}
.frame{font-size: 24px;float: left;padding: 0 15.5px;}
.frame-en{font-size: 20px;float: left;padding: 0 6px;}
.frame img{padding: 0px 5px;}
.frame-en img{padding: 0px 5px;}
.frame a:hover{color: #0099ff;}
.frame-en a:hover{color: #0099ff;}
.filter-container input[type=checkbox] {vertical-align: middle;position: relative;bottom: 1px;}
.filter-container-en input[type=checkbox] {vertical-align: middle;position: relative;bottom: 1px;}
.filter-option{}
.filter-option ul li{border: 1px #000 solid;width: 10%;padding: 5px 20px;display: inline-block;margin: 10px 10px;text-align: center;background: #000;color: #fff;}
.filter-inquiry{text-align: right;margin-right: 10px;}
.filter-inquiry ul li{width: 15%;padding: 5px 20px;display: inline-block;text-align: center;}
.filter-inquiry-run{border: 2px solid #005fa3;color: #005fa3;}
.special-district{border: 2px solid #ff0000;color: #ff0000;}
.customized-carousel{padding-top: 80px;background: #fffefd;}
.customized-carousel-pic{width: 50%;display: inline-block;text-align: center;}
.customized-carousel-description{width: 49%;display: inline-block;vertical-align: top;padding-left: 100px;padding-top: 10px;}
.customized-carousel-description-en{width: 49%;display: inline-block;vertical-align: top;padding-left: 100px;padding-top: 10px;}
.customized-inguiry{font-size: 24px;background: #000;text-align: center;padding: 8px;width: 52%;color: #fff;}
.customized-inguiry:hover{background: #e6e6e6;color: #000;font-size: 24px;border-style:outset;}
.customized-carousel-description h3{font-size: 24px;}
.customized-carousel-description-en h3{font-size: 20px;}
.customized-carousel-description ul li{line-height: 36px;font-size: 20px;list-style: initial;}
.customized-carousel-description-en ul li{line-height: 36px;font-size: 15px;list-style: initial;}
.popup-note{text-align: left;font-size: 24px;padding: 20px 75px;}
.popup-email{text-align: left;font-size: 24px;}
.popup-att{font-size: 18px;line-height: 32px;}
.popup-att-en{font-size: 15px;line-height: 32px;}
.popup-att ul li{list-style: initial;margin-left: 20px;}
.popup-att-en ul li{list-style: initial;margin-left: 20px;}
#inquiry-ic a{
      font-size: 20px;
    color: #fff;
    background: #000;
    border-radius: 5px;
    padding: 5px 10px;
    margin: auto;
    display: block;
    text-align: center;
    width: 210px;
    margin-top: 20px;
}
#inquiry-ic a:hover{
    color:#000;
	background: #e6e6e6;
	border-style: outset;
     
}
#inquiry-contact {
	text-align: right;
}
#inquiry-contact a{
	font-size: 20px;
    color: #fff;
    background: #000;
    padding: 5px 10px;
}
#inquiry-contact a:hover{
    color:#000;
	background: #e6e6e6;
	border-style:solid;border-width:1px;
    transition:color 0.5s;
    -moz-transition:color 0.5s;
    -webkit-transition:color 0.5s;
    -o-transition:color 0.5s;    
}
.verifycode-all{float: left;width: 75%;}
.verifycode{height: 30px;}
.send-all{float: left;width: 25%;}
.css-send{
	font-size: 20px;
    color: #fff;
    background: #000;
	margin-left: 29px;
}
.css-send:hover{
	color:#000;
	background: #e6e6e6;
	border-style:solid;border-width:1px;
    transition:color 0.5s;
    -moz-transition:color 0.5s;
    -webkit-transition:color 0.5s;
    -o-transition:color 0.5s;  
}


.nav-icon ul{text-align: center;padding: 50px 200px 0 200px;}
.nav-icon ul li{width: 7%;float: left;font-size: 22px;}
.next ul{margin-bottom: 30px;}
.next ul li{width: 10%;display: inline-block;border: 1px #000 solid;margin: 0 15px;text-align: center;font-size: 24px;}

/*customized*/
.customized{background: url("../images/banner-customized.png")center top no-repeat;background-size:contain;}
.customized-s1{width: 33.333%;float: left;margin-top: 1%;}
.customized-s1-en{width: 33.333%;float: left;margin-top: -3%;}
.customized-text{width: 66.666%;text-align: center;padding-top: 2%;}
.customized-text-en{text-align: center;padding-top: 5%;}
.customized-text h1{font-size: 52px;letter-spacing: 6px;}
.customized-text-en h1{font-size: 40px;}
.customized-text h3{font-size: 26px;letter-spacing: 2px;}
.customized-text-en h3{font-size: 26px;}
.customized-text h4{}
.customized-s2{width: 27%;float: right;}
.customized-s3{width: 23%;display: block;margin: auto;padding-top: 5%}
.customized-s4{text-align: center;}

.customized-s5{padding: 20px 50px;width: 70%;display: block;margin: auto}
.customized-s5 h1{text-align: center;font-size: 50px;}
.customized-s5 h3{text-align: center;line-height: 12px;font-size: 32px;}
.customized-shop{width:20%;float:left;text-align: center;}
.customized-shop h3{font-size: 18px;}

.customized-contact{}
.contact-bg1{background: #fff;padding: 20px 20px;margin-top: 40px;}
.contact-bg2{background: #F0F4FA;padding: 20px 20px;}
.form-group{width: 50%;float: left;padding: 20px 70px;}
.form-group-content{width: 100%;padding: 20px 70px;text-align: left;}
.form-control{height: 40px;width: 400px;}
.form-control-content{height: 400px;width: 935px;}
.contact-bg2 h1{font-size: 32px;}
.contact-bg2 h4{color: #ff0000;}
.contact-bg3{background: #F0F4FA;
    padding: 20px 20px;
    width: 80%;
    text-align: center;
    margin: 0 auto;
    margin-top: 40px;}

/*aesthetics*/
.aesthetics{background: #000;padding: 120px 0;}
.aesthetics-01{width: 33%;display: inline-block;vertical-align: middle;color: #fff;text-align: center;font-size: 56px;}
.aesthetics-02{width: 33%;display: inline-block;vertical-align: middle;position: relative;}
.aesthetics-02-flip-1{}
.aesthetics-02-flip-2{position: absolute;top: 20px;left: -40px;width: 100%;}
.aesthetics-02-flip-3{position: absolute;top: -10px;left: -100px;width: 100%;}
.aesthetics-03{width: 33%;display: inline-block;vertical-align: middle;color: #fff;font-size: 22px;padding: 0 60px;line-height: 48px;}
.aesthetics-04{background: url("../images/aesthetics-bg-1.jpg")center top no-repeat;background-size:cover;padding: 60px 0px;text-align: center;}
.aesthetics-04-en{background: url("../images/aesthetics-bg-1.jpg")center top no-repeat;background-size:cover;padding: 60px 0px;text-align: center;}
.aesthetics-04 h1{color: #fff;font-size: 36px;}
.aesthetics-04 h1 b{font-size: 68px;color: #fff;}
.aesthetics-04-en h1 b{font-size: 68px;color: #fff;}
.aesthetics-04 h3{color: #fff;font-size: 36px;font-weight: 100;}
.aesthetics-04-en h3{color: #fff;font-size: 30px;}
.aesthetics-04 h4 a{color: #fff;font-size: 24px;}
.aesthetics-05{background: #000;padding: 60px 0;text-align: center;}
.aesthetics-05-1{border: #fff 1px solid;padding: 20px;width: 70%;margin: auto;}
.aesthetics-06{padding: 60px 0px;}
.aesthetics-06-2{width: 33.333%;float: left;text-align: center;}
.aesthetics-06-2 h2{color: #000;}
.aesthetics-06-2 p{color: #000;width: 290px;display: block;margin: auto;line-height: 30px;margin-bottom: 20px;    font-size: 20px;}
.aesthetics-06-2 boder2{border-style: solid;padding: 5px 5px;}
.mid-pro-2-p{background: #252525;padding-bottom: 100px;}
.mid-pro-2-p h4{color: #28a7e1;font-size: 24px;text-align: center;padding-top: 70px;margin: 0 auto;}
.mid-pro-2-p h3{color: #fff;font-size: 24px;text-align: center;line-height: 52px;margin: 0 auto;padding: 50px 240px 0 240px;font-weight: 300;}
.mid-pro-2-p hr{margin: 60px 150px;}
#inquiry-ae a{
    font-size: 20px;
    color: #fff;
    background: #000;
    border-radius: 20px;
    padding: 20px 10px;
	margin: auto;
    display: block;
    text-align: center;
    width: 400px;
    margin-top: 20px;
}
#inquiry-ae a:hover{
    color:#fff;
	background: #ff0000;
    transition:color 0.5s;
    -moz-transition:color 0.5s;
    -webkit-transition:color 0.5s;
    -o-transition:color 0.5s;    
}
.aesthetics-06-1{text-align: center;padding: 80px;}
.aesthetics-06-1 h3{font-size: 24px;}

/*contact us*/
.contactus-01{text-align: center;}
.contactus-01 .con-h1{font-size: 56px;padding: 20px 0px;margin-top: -40px;}
.contactus-01 .con-h2{font-size: 42px;padding: 10px 0px;}
.contactus-01 .con-h3{font-size: 28px;padding-bottom: 50px;}
.contact-info{}
.contact-info ul{}
.contact-info ul li{width: 50%;float: left;}
.contact-fb{text-align: left;}
.contact-add{text-align: left;}
.contact-tel{text-align: left;}
.contact-fax{text-align: left;}
.contact-contant{background: #e5e5e5;}
.contactus-02{height:85%;background-size:contain;padding: 20px 50px;font-size: 20px;}
.contactus-form-group{padding: 5px 15px;}
.contactus-form-control{height: 30px;width: 450px;}
.contactus-form-control-message{height: 300px;width: 450px;}
.form-bg{width: 40%;float: right;margin-right: 2%;}
.contactus-03{}
.contact-presentation{float: left;width: 45%;}
.contact-presentation-en{float: left;width: 58%;}
.contact-presentation ul{padding: 5% 1%;}
.contact-presentation ul li{line-height: 16px;}
.contact-presentation ul li p{display: inline-block;vertical-align: super;padding-left: 12px;font-size: 24px;}
.contact-presentation-en ul li p{display: inline-block;vertical-align: super;padding-left: 12px;font-size: 16px;}
.contact-presentation p{}
.h1-hr hr{margin-top: 10px;}
/*footer*/
.footer{z-index: 10;position: relative;}
.ft_wrap{background: #000;}
.ft_co_info{position: relative;}
.ft_nav{text-align: center;float: left;width: 62%;padding: 30px;}
.ft_add{float: right;padding: 30px 0px;width: 23%;}
.ft_ab{font-size: 22px;padding-bottom: 15px;}
.ft_ab a{color: #fff;}
.ft_nav ul{margin: 0 0px 0 auto;display: inline-block;}
.ft_nav ul li{float: left;color: #fff;padding: 20px;line-height: 32px;}
.ft_nav_we{border-left: 2px solid #fff;display: block;text-align: left;padding: 0 12px;}
.ft_nav_we a{color: #fff;}
.ft_logo{padding: 30px 0px;float: left;}
.co_name{color:#fff; font-size:32px;position: absolute;top: 188px;left: 444px;}
.ft_info{width: 50%;float: left;padding-top: 12px;padding-left: 100px;}
.ft_info ul{}
.ft_info ul li{font-size: 18px;line-height: 36px;}
.icon_1{color: #fff;padding: 5px 0;}
.add-en{color: #fff;padding: 15px 0;text-align: center;}
.add-en img{vertical-align: middle;}
.add-en a{color: #fff;}
.icon_1 img{vertical-align: middle;}
.icon_2{color: #fff;}
.icon_2 img{vertical-align: middle;}
.icon_3{color: #fff;}
.icon_3 img{vertical-align: middle;}
.icon_4{color: #fff;}
.icon_4 img{vertical-align: middle;}
.ft_right{width: 50%;float: right;padding-top: 58px;text-align: right;}
.ft_right ul li{font-size: 18px;padding-bottom: 20px;}

.footer-en{background: #000;}
.ft_logo-en {padding: 30px 0px;float: left;width: 15%;}
.ft_nav-en {width: 85%; float: left; padding: 3% 10%;}
.ft_nav-en ul li {float: left;color: #fff;line-height: 32px;text-align: left;padding: 0 0 0 25px;}
.ft_info-en {}
.ft_info-en ul{width: auto;text-align: center;padding-left: 15%;}
.ft_info-en ul li{float: left;width: 25%;}

.qc{ float:right}
.ft_link{ float:right;padding-right:30px}
.copyright{font-family:"Lato", \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4, Arial, sans-serif; color:#fff; text-align: center;padding-bottom: 30px;}
.b2b a{color:#e4d4ab}
.b2b a:hover{color:rgba(240,231,209,1.00)}
#smo {
      text-align: right; margin-bottom:10px
}

#smo a {
    display: inline-block;
    color: #fff;
    font-size: 120%;
    text-align: center;
    margin: 8px 5px 0 0px; transition:all 0.3s ease-in-out; background:#284d0e;width:30px;height:30px; line-height:30px; transition:all 0.3s ease-in-out}
	 
#smo a:hover{ transform:scale(1.2); background:rgba(17,112,28,1.00)}
/*gotop*/
#gotop {
position: fixed;
    right: 10px;
    bottom: 358px;    
    /*padding: 2px 58px; */   
    /*font-size: 25px;
    background:rgba(177,177,177,0.73);
    color: white;*/
    cursor: pointer; z-index:1000; font-weight:100; transition:all 0.3s ease-in-out;
	display: none;
}
.gotophover{display: none;}
/*#gotop:hover{ border:1px solid rgba(184,0,3,1.00)}*/
#gotop:hover .gotophover{display: block;}
#gotop:hover>img{display: none;}

/*gotop-spec*/
#gotop-spec {
position: fixed;
    right: 10px;
	top: 105px;
    bottom: 420px;    
   /* padding: 2px 58px; */   
    /*font-size: 25px;
    background:rgba(177,177,177,0.73);
    color: white;*/
    cursor: pointer; z-index:1000; font-weight:100; transition:all 0.3s ease-in-out;
	display: none;
}
.gotop-spechover{display: none;}
/*#gotop-spec:hover{ border:1px solid rgba(184,0,3,1.00)}*/
#gotop-spec:hover .gotop-spechover{display: block;}
#gotop-spec:hover>img{display: none;}

/*gotop-inquiry*/
#gotop-inquiry {
position: fixed;
	top: 105px;
    right: 10px;
    bottom: 420px;    
    /*padding: 2px 58px; */   
    /*font-size: 25px;
    background:rgba(177,177,177,0.73);
    color: white;*/
    cursor: pointer; z-index:1000; font-weight:100; transition:all 0.3s ease-in-out;
	display: none;
}
.gotop-inquiryhover{display: none;}
/*#gotop-spec:hover{ border:1px solid rgba(184,0,3,1.00)}*/
#gotop-inquiry:hover .gotop-inquiryhover{display: block;}
#gotop-inquiry:hover>img{display: none;}


.ot_smo{width:350px;margin:20px auto 0}
.ot_smo ul li{float:left;margin-left:10px; font-size: 16px; line-height: 30px; font-weight: bold;color:rgb(178, 191, 74)}
.ot_smo .pic{width:30px; float:left;margin-right:10px}
#SkypeButton_Call_kid1127_1 #SkypeButton_Call_kid1127_1_paraElement {
  margin: 0;
}
#SkypeButton_Call_kid1127_1 #SkypeButton_Call_kid1127_1_paraElement img {
  margin: 0 !important;
  vertical-align: middle !important;
}
p#SkypeButton_Call_kid1127_1_paraElement{margin:0}
.wechat{position: relative}
.wechat_qc{ display: none;  position: absolute; left:-70px;top:-158px;width:150px;height:150px}
.wechat:hover .wechat_qc{ display: block}
.certifacation ul li{ display:inline-block;margin-right:5px}
.chat_btn{ display: none}








.sb-left  .sb-menu>li>ul{background: #eee}
.sb-menu .nav3 ul li div a{padding:15px 0 0 0}


.sb-left  .sb-menu>li>ul>li>a{border-bottom: 1px solid rgba(100,169,225,1.00);padding:8px 15px}
.sb-left  .sb-menu>li>ul>li:hover{background: rgb(246, 253, 255)}

.sb-left h2{margin:0 ;padding:15px;color:#fff; font-size: 30px;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+8,59b1e0+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 8%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 8%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 8%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#59b1e0',GradientType=0 ); /* IE6-9 */}
a.sb-toggle-submenu:after{ content: "\f107";  font-family: FontAwesome;margin-left:5px}
a.sb-toggle-submenu.sb-submenu-active:after{ content: "\f106";  font-family: FontAwesome}

/*banner_star*/

.insidebanner .slider .indicators .indicator-item {
	background-color: #666666;
	border: 3px solid #ffffff;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.insidebanner .slider .slides {
	height: 380px
}
.insidebanner .slider .indicators .indicator-item.active {
	background-color: #ffffff;
}
.insidebanner .slider {
	width: 100%;
	margin: 0 auto;
	height: 100%
}
.insidebanner .slider .indicators {
	bottom: 10px;
	z-index: 100;/* text-align: left; */
}
.insidebanner .slider .slides li .caption {
	width: 80%
}
.insidebanner .slider .slides li div img {
	height: auto;
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: left top
}
.insidebanner .slider .slides li div {
	width: 100%
}
.insidebanner .slider .slides li div.caption3 img {
	background-position: right 25%
}



/*banner_end*/


.tree{background:#f2f2f2; text-align: right;padding:5px;margin-bottom:80px }
.tree ul li{ display: inline-block;}
.tree ul li:after{ content: ">";margin:0 3px}
.tree ul li:last-child:after{content: ""}
.tree ul li:last-child{color:#0d528c}

.left_nav{width:250px; float:left}

.right_content{width:calc(100% - 250px) ; float:right}
.left_nav h2{color:#333; font-size:30px; text-transform: uppercase;margin:0 0 15px 0}

.left_nav li ul {display: none}

.left_nav ul li{ border-top:5px solid #abddfb;margin-bottom:5px}
.left_nav ul li a{color:#fff;padding:8px 15px 13px ;width:100%; display: block; text-align: left; font-weight: bold;background: #79b6e2;}
.left_nav ul li:hover a , .left_nav ul li.active a{ background: #2687d2}
.left_nav ul li:hover , .left_nav ul li.active {border-top:5px solid #3797e2}

.left_nav ul li ul li{ background: #fff;border-top:0;margin-bottom:5px; border-bottom: 1px solid rgba(9,78,171,1.00)}
.left_nav ul li ul li a{color:#7297b3;}
.left_nav ul li ul li a:hover{color:#2687d2}
.left_nav ul li.active ul li a{ background: #fff}
.left_nav ul li:hover li , .left_nav ul li.active li {border-top:0}

.left_nav ul li  ul li.active  a{ background: #fff;color:#2687d2}

.left_nav ul li ul li  ul li{border-bottom:1px dashed rgba(199,199,199,1.00)}
.left_nav ul li ul li  ul li:last-child{border-bottom:0}
.left_nav ul li.active ul li  ul li{margin-bottom:0}
.left_nav ul li.active ul li ul li a{ background: #eeeeee;color:#666; font-weight: normal;padding:10px 15px}
.left_nav ul li ul li  ul li.active a , .left_nav ul li.active ul li ul li:hover a { background: #86bfec;color:#fff}
.left_nav ul li.active ul li ul li a:before{content: "\f0da" ;font-family: FontAwesome;margin-right:5px}



.right_content{padding-left:50px}
h1{margin:0 0 20px 0; padding:0 5px 0px 5px ; color:#000; font-size:40px;}
h1 span{color:#1378b1}
h1 b{ font-size:35px}
s1 {color:#fff; font-size:40px;}
s1-en {color:#fff; font-size:36px;}
s2{color:#fff; font-size:24px;}
s2-en{color:#fff; font-size:18px;}
s2 b{font-size:32px}
s2 boder{border-style:solid;border-width: 1px;padding: 3px 10px;margin-left: 15px;}
s2-en boder{border-style:solid;border-width: 1px;padding: 3px 10px;margin-left: 15px;}
.wen-left a{color: #fff;}
.pro_cate ul li{width:calc(33.3% - 20px);margin:0 10px 20px; float:left; position: relative}
.pro_wen ul li{width:calc(40.3% - 20px);margin:0 50px 20px; float:left; position: relative}
.pro_cate .pic{ text-align: center}
.pro_cate .info{ background: url(../images/pro/pro_line.jpg) right top no-repeat;padding:15px 10px ; font-family:
"OpenSans", \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4, Arial, sans-serif}
.pro_cate .info h3{margin:0 0 5px 0;color:#577c1f}
.pro_cate .info p{margin:0}
.pro_cate .info h4{margin:0 0 5px 0; font-size:20px}
.pro_cate ul li img{transition:all 0.5s ease-in-out}
.pro_cate ul li:hover img{transform: scale(1.1); -webkit-filter: brightness(1.2);
  filter: brightness(1.2);}
.overlay{ position: absolute;width:100%;height:100%; top:0; left:0; text-align: center; background:rgba(93,159,7,0);transition:all 0.5s ease-in-out}
.overlay *{ transition:all 0.5s ease-in-out}
.overlay i{margin-top:45%; font-size:70px;color:rgba(255,255,255,0.00)}
.overlay p{color:rgba(255,255,255,0.00);text-transform: uppercase;font-family:"OpenSans", \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4, Arial, sans-serif; font-size:20px}

.overlay:hover{background:rgba(93,159,7,0.75)}
.overlay:hover i{color:rgba(255,255,255,1)}
.overlay:hover p{color:#dfdfdf}
.overlay a{width:100%;height:100%; position: absolute;top:0; left:0}


.pro_zone ul li a{width:100%;height:100%; display: block; position: absolute; left:0; top:0}

.pro_zone ul li .pic{ overflow: hidden}
.pro_zone ul li:hover h4{color:rgba(26,106,13,1.00)}


.ft_nav{width: 65%;margin: 0 auto;}
.ft_add{padding-left: 22%;}



/*pro_detail*/

.detail_left{width:60%;float:left;margin-bottom:20px;padding-right:15px; text-align: center}
.detail_right{width:40%;float:left;margin:30px 0;  font-family: "OpenSans" , \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4, Arial, sans-serif;  }
.pro_detail h2{margin:0 ;color:#000;  font-family: "OpenSans" , \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4, Arial, sans-serif;font-weight: normal; position: relative;padding-left:30px}

.pro_detail h1{ color:rgb(78, 169, 21); border: 0;margin-bottom:10px;padding:0; position: relative;padding-left:30px}
.pro_detail h1:before{ content: ""; width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 15px;
border-color: transparent transparent transparent rgb(78, 169, 21); display: block; position: absolute; left: 10px;top:18px

}
.slider-for{margin-bottom:10px}
.pro_detail table { border-collapse: collapse;width:100%}
.pro_detail table th{ text-align: left;padding:8px 10px ; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#727272+0,bfbfbf+100 */
background: rgb(114,114,114); /* Old browsers */
background: -moz-linear-gradient(top, rgb(81, 162, 204) 0%, rgb(186, 205, 210) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgb(81, 162, 204) 0%,rgb(186, 205, 210) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgb(81, 162, 204) 0%,rgb(186, 205, 210) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#727272', endColorstr='#bfbfbf',GradientType=0 ); /* IE6-9 */;color:#fff }
.pro_detail table td{padding:5px 10px; border-bottom:1px solid rgba(166,166,166,1.00); font-size:15px}
.pro_detail table td ul li{width:50%; float: left;padding:5px 10px}
.pro_detail table td ul li:nth-child(odd){border-right:1px dashed rgba(209,209,209,1.00)}
.pro_detail table td.no_pa{padding:0}
.gy{  background: rgba(230, 231, 234, 0.75);}
.video-b{    vertical-align: middle;
    width: 100%; border:1px solid #000
  }
.slider-nav .slick-slide{ border:1px solid rgba(201,201,201,0.5);margin:0 5px }
.slider-nav .slick-current{border:1px solid rgba(120,175,47,1.00)}

.video2{ display: none}

.tab_zone{margin:50px auto}

.tabs{width:100%; border-bottom: 1px solid rgba(147,147,147,1.00)}

.tabs .tab a{ background:rgba(207,207,207,1.00);color:#fff; font-size: 18px;padding:0 15px}
.tabs .tab a:hover{ background: rgba(159,159,159,0.89)}
.tabs .tab a.active{ background: rgba(45,125,208,1.00)}
.tab_block{padding:20px}
.remark{margin:8px 0; font-size: 15px;color:rgba(221,0,3,1.00)}
.pro_detail  .tab_block  table th , .pro_detail  .tab_block  table td{ white-space: nowrap; border:1px solid rgba(179,179,179,1.00); border-collapse: collapse ; text-align: center; font-size: 16px}

.pro_detail  .tab_block  table th{ background:rgba(39,136,197,1.00)}

.pro_detail .tab_block h2{padding:0;margin:0 0 15px 0; color:rgba(0,117,192,1.00); font-weight: bold}
.pro_text{margin-bottom: 15px}
.pro_text ul li{padding:5px 5px 5px 15px;position: relative; }

.pro_text ul li:before{ content: "\f105"; font-family: FontAwesome; position: absolute; left: 3px; top:4px}

.td_tit{font-weight: bold; background: rgba(211,211,211,0.2);color:rgba(34,106,204,1.00)}

.cen{ text-align: center; font-weight: bold}

.scrollbar
{
	width: 100%;
	overflow-x: auto;
	overflow-y:hidden;
	margin-bottom: 30px
}


.style-1::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.style-1::-webkit-scrollbar
{
	width: 10px;
	height:10px;
	background-color: #F5F5F5;
}

.style-1::-webkit-scrollbar-thumb
{
	background-color:rgba(19,82,134,1.00);	
	background-image: -webkit-linear-gradient(45deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}
.remark2 ul li{ color:rgba(15,100,179,1.00); list-style: disc;padding:3px; font-weight: bold}
.remark2 ul{margin:20px 0 0 20px}

.tab_block img{min-width: 120px}

.popup-gallery2  li{width:calc(25% - 10px); float:left; font-size:15px; text-align: center; border:1px solid #ccc;padding:5px;margin:5px}
.popup-gallery2  li:hover{border:1px solid rgba(29,106,211,1.00);color:rgba(23,74,177,1.00)}
.popup-gallery2  li p{height:45px;margin:0}





/*about*/

.about_zone{width:100%}
.about_zone  h2{margin:0 0 10px 0; font-size:55px; font-weight: normal;color:#000}
.about_zone  h3{margin:0 0 10px 0 ;color:rgba(36,84,181,1.00) ;font-size:25px}
.about_zone  h4{margin:0 0 5px 0;color:rgba(0,0,0,1.00); font-size:20px}
.tit{ font-size:30px;margin-bottom:5px;margin-top:15px}
.tit2{ font-size: 20px; font-family: "OpenSans" , \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4, Arial, sans-serif; color:rgba(57,166,30,1.00);margin:5px 0  10px 0}
.ab_1{ float:left;width:40%;padding-top:50px}
.ab_2{ float:right;width:60%;padding-left:15px; border-left:1px dashed rgba(110,110,110,1.00)}
.about_zone p{margin:0 0 15px 0;font-family: "OpenSans" , \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4, Arial, sans-serif; color:rgba(73,73,73,1.00)}
.ab4{margin-bottom:15px; background: rgba(211,211,211,0.54)}
.pic_right{ float:right;padding-left:15px}
.pic_left{ float:left;padding-right:20px}

.ab_box{padding:15px }











.application_zone {
	padding: 30px 0
}
.application {
	width: 544px;margin:0 auto
}
.application2 {
	display: none
}






/*gallery*/

.slider-for .slick-list , .slider-nav .slick-list{width:90%;margin:0 auto;}
.slider-for .slick-prev:before, .slider-for .slick-next:before{color:rgba(16,105,143,1.00)}
.slider-for .slick-prev {left:0px}
.slider-for .slick-next{right:0px}
.video3 {padding:30px 0 ;width:90%;margin:0 auto}
.video3 h3{ color:rgba(2,75,127,1.00); font-weight: bold; font-size:25px;margin-bottom:10px}
/*.popup-gallery{width:90%;margin:30px auto }*/
/*.popup-gallery a{width:20%; display: block; float:left;padding:5px; position: relative; }

.popup-gallery a:before{ content: "view"; background: rgba(30,90,172,0); color:rgba(255,255,255,0.00); display: block;width:50%; height:30%; left:50%; top:50%; z-index: 9; text-align: center;position: absolute;margin:5px;padding-top:10%; transform: translate(-50% , -50%) ; transition: all 0.5s ease-in-out; border:2px solid rgba(255,255,255,0.0)}
.popup-gallery a:hover:before{background: rgba(30,90,172,0.85); color:rgba(255,255,255,1);border:1px solid rgba(255,255,255,0.5)}
.popup-gallery a img{ display: block;transition: all 0.5s ease-in-out}
.popup-gallery a:hover img{ opacity: 0.8}


@media (max-width : 1100px) {
.popup-gallery a{width:25%; }	
}

@media (max-width :900px) {
.popup-gallery a{width:20%; }	

}
@media (max-width :680px) {
	
.popup-gallery a{width:25%; }
	
}
	
	
@media (max-width :580px) {
.popup-gallery a{width:33.3%; }	
}
*/


/*　content*/

.red{color:rgba(181,0,3,1.00)}
.co_contact{ color:#333}
.co_contact h2{ background:rgba(83,83,83,0.30);padding:5px 15px; font-size:20px;color:#fff}
.co_contact table {width:100%}
.co_contact table th{width:165px; text-align: left;padding:5px 0px 5px 25px; position: relative; vertical-align: top; font-size:16px; font-weight: normal}
.co_contact table th span{ position: absolute; left:15px; top:5px; font-size:16px}
.co_contact table td{width:calc(100% - 165px);padding:5px 20px;}
.co_contact input[type='text'] , .co_contact textarea{width:100%}

.send_btn { text-align: center;margin-top:50px}
.send_btn  input{ border-radius: 5px ;padding:8px 15px; border:0; font-size:16px;margin:0 5px; cursor: pointer}
input[type='reset']{ background:rgba(193,193,193,1.00) }
input[type='button']{ background:rgba(31,92,199,1.00);color:#fff}

.send_btn  input:hover{ box-shadow: 2px 5px 5px rgba(218, 218, 218, 0.62)}

input[type='reset']:hover{ background:rgba(103,103,103,1.00);color:#fff}
input[type='button']:hover{ background:rgba(0,86,239,1.00)}
.verify input[type='text']{width:50%; float:left}




.application{ position: relative}

.app_btn1 { top:0; right:215px; position: absolute}
.app_btn2 { top:70px; right:60px; position: absolute}
.app_btn3 { top:210px; right:0px; position: absolute}
.app_btn4 { top:360px; right:60px; position: absolute}
.app_btn5 { top:425px; right:200px; position: absolute}
.app_btn6 { top:370px; left:60px; position: absolute}
.app_btn7 { top:230px; left:0px; position: absolute}
.app_btn8 { top:70px; left:50px; position: absolute}


.tooltip {width:130px;height:120px; display: block; background:rgba(255,255,255,0.00)}


 
 
.tooltip div
{
  display:none;
 color:black;
  background:white; 
}
 
 
.tooltip div img
{
 width:250px
} 
 
.tooltip:hover div
{
  display:block;
  position:absolute;
  top:0;
  left:100px;
  z-index:1000;
  width:250px;
  border:1px solid rgba(13,142,204,1.00);
  padding:8px;
}
.pro_detail h4{ font-size:22px;position: relative;padding-left:45px ; line-height: 32px;margin:0 0 15px }

.pro_detail .video h4:before { content: "" ; background: url(../images/pro/icon1.jpg) no-repeat;width:40px; height:32px; display: block; position: absolute; left:0; top:0}
.pro_detail .tab_zone h4:before{ content: "" ; background: url(../images/pro/icon2.jpg) no-repeat;width:40px; height:32px; display: block; position: absolute; left:0; top:0}

.icon_1 a{color: #fff;}
.icon_1:hover{text-decoration:underline;font-weight: bold;}
.icon_1 img{padding-right: 10px;}
@media (max-width : 1920px) {
	.ft_nav{width: 60%;}
	.ft_add{padding-left: 0%;}
	.banner-text {padding-top: 7%;}
}
@media (max-width : 1440px) {
  .ft_nav {
    width: 60%;
  }
  .ft_add {
    padding: 0%;
    margin-top: 45px;
  }
	.banner-text {padding-top: 6%;}
	.filter-container-wrap {margin: 0 8.6%;}
	.filter-container-en {margin: 10px 7px;}
}
@media (max-width : 1366px) {
	.customized-text h3{width: 101%;}
	
}
@media (max-width : 1280px) {
  .insidebanner .slider .slides li div img {
    background-size: 60%;
  }
  .insidebanner .slider .slides {
    height: 280px
  }
  .detail_left {
    width: 55%;
  }
  .detail_right {
    width: 45%;
  }
}
@media (max-width : 1366px) {
	.filter-container-wrap {margin: 0 6.6%;}	
}
@media (max-width : 1279px) {
  .app_btn2 .tooltip:hover div, .app_btn3 .tooltip:hover div, .app_btn4 .tooltip:hover div {
    left: auto;
    right: 100px
  }
}
@media (max-width : 1200px) {
  .wrap {
    width: 100%
  }
  #nav > ul > li > a {
    padding: 20px;
  }
}
@media (max-width : 1024px) {
  .ft_nav {
    width: 50%;
  }
  .ft_add {
    margin-right: 40px;
    width: 26%;
  }
	.pro-end ul{padding: 0;}
	.pro-end ul li{font-size: 28px;}
	.gobo-flip-4{top:0;}
	.gobo-pre-4{top:37%;}
	.tech{width: 25%;}
	.mid-pro03-1 ul li{width: 22%;margin: 10px 13px;}
	.customized-text h1{font-size: 45px;}
	.customized-text h3{width: 94%;}
	.customized-s1 {width: 25%;}
	.customized-text {width: 78%;}
	.form-group {width: 50%;float: left; padding: 20px 20px;}
	.form-control {width: 339px;}
	.form-control-content {width: 650px;}
	.contactus-form-control {width: 400px;}
	.contactus-form-control-message {width: 400px;}
	.banner-text {padding-top: 5%;}
	#nav > ul > li > a {padding: 12px;}
	.filter-container-wrap {margin: 0 0.7%;}
	.filter-container-en {font-size: 16px;padding: 5px 122px 5px 8px;}
	.filter-container-1-en h2 {font-size: 16px;}
	.frame-en {font-size: 15px;}
	
	
}

@media (max-width : 1000px) {
  .ab3 .pic_right {
    padding-left: 0;
    float: none
  }
}

@media (max-width : 900px) {
	 .ab3 .pic_right {
    padding-left: 15px;
    float: right;
    width: 50%
  }
  .sb-toggle-right {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    color: rgba(8, 67, 158, 1.00)
  }
  .sb-toggle-left {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    color: rgba(8, 67, 158, 1.00)
  }
  .sb-toggle-right, .sb-toggle-left {
    padding: 0 10px;
    cursor: pointer;
    background: rgba(0, 0, 0);
    color: #fff;
    height: 70px;
    line-height: 70px;
    font-family: "OpenSans", \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4, Arial, sans-serif;
  }
  .sb-toggle-left:before {
    content: "\f0c9 ";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
  }
  .sb-toggle-right {
    background: rgba(144, 144, 144, 0.6);
  }
  .sb-toggle-right:before {
    content: "\f00b ";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
  }
  .sb-left {
    background: rgb(226, 226, 226);
    box-shadow: inset -3px 4px 14px 0px rgba(142, 142, 142, 0.66);
  }
  #header, #header2 {
    height: 70px;
    background-position: center
  }
  .logo img {
    width: 150px;
    padding: 5px 0 0 0
  }
  #nav {
    display: none
  }
  .logo {
    width: 80%;
    margin: 0 auto;
    float: none;
    text-align: center;
    height: 70px
  }
  .ft_left {
    width: 100%;
    float: none;
    text-align: center
  }
  .ft_right {
    width: 100%;
    float: none;
    text-align: center
  }
  .ft_logo {
    margin: 0px auto 5px;
    width: 150px
  }
  .qc {
    float: none
  }
  #smo {
    text-align: center;
    width: 100%
  }
  .ft_link {
    float: none;
    padding-right: 0
  }
  .b2b, .copyright {
    text-align: center
  }
  .pro_nav {
    position: static
  }
  .sb-menu > li > a {
    border-bottom: 1px solid #fff
  }
  .sb-menu > li > a {
    text-align: left
  }
  .sb-left .sb-menu > li > a.sb-submenu-active, .sb-left .sb-menu > li.active > a {
    background: rgba(149, 205, 239, 0.91);
    color: #fff
  }
  .ft_right {
    padding-top: 10px
  }
  .wechat_qc {
    display: none;
  }
  .wechat:hover .wechat_qc {
    display: none
  }
  .chat_btn {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
  }
  .sb-right.sb-active {
    box-shadow: inset 4px 0px 5px rgba(82, 108, 134, 0.31); /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#44b2e5+2,b5daf2+100 */
    background: rgb(68, 178, 229); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(68, 178, 229, 1) 2%, rgba(181, 218, 242, 1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(68, 178, 229, 1) 2%, rgba(181, 218, 242, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(68, 178, 229, 1) 2%, rgba(181, 218, 242, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44b2e5', endColorstr='#b5daf2', GradientType=0); /* IE6-9 */
  }
  .sb-right.sb-active {
    box-shadow: inset 4px 5px 5px rgba(76, 76, 76, 0.31);
  }
  .left_nav .nav_left, .left_nav h2 {
    display: none
  }
  .sb-active .left_nav {
    display: block
  }
  .right_content {
    width: 100%;
    float: none;
    padding: 0
  }
  .tree {
    margin-bottom: 20px
  }
  .sb-menu li a {
    text-align: left
  }
  .sb-menu .nav3 ul li a {
  }
  .sb-right h2 {
    margin: 0;
    padding: 15px;
    color: #fff;
    font-size: 30px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c6e8ff+8,5faff4+99 */
    background: rgb(198, 232, 255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(198, 232, 255, 1) 8%, rgba(95, 175, 244, 1) 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(198, 232, 255, 1) 8%, rgba(95, 175, 244, 1) 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(198, 232, 255, 1) 8%, rgba(95, 175, 244, 1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6e8ff', endColorstr='#5faff4', GradientType=0); /* IE6-9 */
  }
  .sb-right ul li a {
    padding: 15px;
    display: block;
    text-align: left
  }
  .sb-right .vmenu > ul > li > a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    font-weight: bold;
    color: #fff
  }
  .sb-right .vmenu > ul > li.active > a {
    background: rgba(22, 243, 255, 0.42)
  }
  .sb-right .vmenu > ul > li > ul > li > a {
    background: rgba(255, 255, 255, 0.38)
  }
  .sb-right .vmenu > ul > li > ul > li.active > a {
    background: rgba(20, 80, 152, 1.00);
    color: #fff
  }
  .sb-right .vmenu > ul > li > ul > li > ul > li > a {
    background: rgba(255, 255, 255, 1.00);
    color: rgba(42, 56, 122, 1.00);
    padding: 10px 15px
  }
  .sb-right .vmenu > ul > li > ul > li > ul > li > a:before {
    content: "\f0da";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    margin-right: 5px
  }
  .sb-right .vmenu > ul > li > ul > li > ul > li.active > a {
    background: rgba(241, 244, 245, 0.9)
  }
}
@media (max-width : 823px) {
	.mid-pro03-1 ul li{width: 29%;}
	.filter-container-wrap {margin: 0 0.9%;}
	.contact-presentation-en {width: 100%;}
	.form-bg {float: left;}
	#inquiry-contact {text-align: left;padding-left: 15px;}
	.contactus-form-control {width: 650px;}
	.contactus-form-control-message {width: 650px;}
	.ft_info-en ul {text-align: left;padding: 0;}
	.ft_info-en ul li {width: 50%;padding-left: 10%;}
	.rich p {font-size: 32px;}
	.rich-en {font-size: 16px;}
	.rich-en p{font-size: 20px;}
	.gobo-pro-1-en p {font-size: 20px;}
	.gobo-pro-2-en p {font-size: 20px;}
}
@media (max-width : 812px) {
	.pro-zone-2{padding: 30px 0px 20px 0}
	.gobo-pre-4{top: 28%;}
	.mid-pro-2-p{padding-bottom: 0px;}
	.mid-pro-2-p h3{padding: 50px 160px 0 160px;}
	.ft_nav{width: 80%;}
	.ft_add{width: 59%;margin-top: 0;margin-bottom: 15px;}
	.mid-pro03-1 ul li{width: 29%;}
	.customized-text h3 {width: 105%;}
	.customized-s5 {width: 100%}
	.customized-shop h3 {font-size: 15px;}
	.filter-container-wrap {margin: 0 0.9%;}
	.filter-container-1-en h2 {font-size: 14px;}
	.frame-en {font-size: 12px;}
	.filter-container-en {font-size: 14px;padding: 5px 105px 5px 8px;}
	.ft_info-en ul {text-align: left;padding: 0;margin-left: 3%;}
	.ft_info-en ul li {font-size: 12px;}
	.add-en {font-size: 12px;}
	.b2b, .copyright {font-size: 12px;}
	.form-bg {width: 100%;float: left;}
	#inquiry-contact {text-align: left;padding-left: 15px;}
	.contactus-form-control {width: 635px;}
	.contactus-form-control-message {width: 635px;}
	.contact-presentation-en {width: 100%;margin-top: -8%;}
	.rich-en {font-size: 16px;}
	.rich-en p{font-size: 20px;}
	.gobo-pro-1-en p {font-size: 20px;}
	.gobo-pro-2-en p {font-size: 20px;}
}
@media (max-width : 800px) {
  .insidebanner .slider .slides li div img {
    background-size: 60%;
  }
  .insidebanner .slider .slides {
    height: 230px
  }
  .insidebanner .slider .slides li .caption {
    width: 90%
  }
  .slider .slides li .caption {left: 5%}
	.customized-text h3 {font-size: 22px;}
	.customized-text h1 {font-size: 38px;}
	.form-control {width: 258px;}
	.form-control-content {width: 500px;}
	.customized-s5 {width: 80%;}
	.customized-shop h3 {font-size: 8px;}
	h3{font-size: 16px;}
	.banner-text {top: -12%;}
	.contact-presentation {width: 50%;}
	.contactus-form-control {width: 310px;}
	.contactus-form-control-message {width: 310px;}
	.banner-text2 span {letter-spacing: 4px;}
}
@media (max-width : 768px) {
	.mid-pro-5 h4{font-size: 12px;width: 101%;}
	.ft_logo{width: 110px;}
	.ft_nav{width: 83%;}
	.ft_add{float: none;width: 35%;margin: 0 auto;}
	.b2b, .copyright{margin-top:30px;}
	.slider .slides li .caption {top: 3%;left: 7%;padding: 12px;}
	s1{font-size: 20px;}
	s2 b{font-size: 20px;}
	.wen-left{margin-left: -12px;margin-top: 4px;}
	.slider .slides li div s2{font-size: 8px;}
	.banner{margin-bottom: 0px;}
	.mid-pro-2{padding: 50px 0px;}
	.mid-pro-tech p{width: 220px;}
	.mid-pro-s1{margin-top: -5%;width: 40%;}
	.mid-pro-s2{width: 40%;margin-left: 68%;}
	.mid-pro-s3{width: 30%;margin: 0 auto;margin-top: -15%;}
	.about{padding: 0 10px;}
	.news-p1 ul{width: 150%;}
	.news-p1-1{width: 48%;margin-top: 3%;}
	.pro-zone-2{padding: 0;}
	.pro-end ul li{font-size: 18px;}
	.gobo-pre-4{top: 30%;left: 45%;}
	.mid-pro-2-p h4{padding-top:36px;}
	.mid-pro-2-p h3{font-size: 18px;padding: 20px 86px;}
	.mid-pro-2-p{padding-bottom: 50px;}
	.aesthetics-04{padding: 70px 85px;}
	.tech{font-size: 22px;}
	.gobo-pro-1{margin-left: 16%;}
	.filter-container{font-size: 22px;float: left;width: 100%;margin: 10px 0px;}
	.mid-pro03-1 ul li{width: 29%;}
	.banner-text2{font-size: 32px;padding-top: 14%;}
	.banner-text2 span {letter-spacing: 4px;}
	.filter-container-en {font-size: 14px;padding: 5px 71px 5px 6px;}
	.filter-container-1-en h2 {font-size: 14px;}
	.frame-en {font-size: 12px;padding: 0 3px;}

}
@media (max-width : 736px) {
	.gobo-pre-4{top: 28%;}
	.compare{width: 32%;}
	.ft_add{width: 40%;}
	.customized-s5 {width: 100%;}
	.filter-container-wrap {margin: 0 1%;}
	.frame-en {font-size: 12px;padding: 5px 0px;}
	.filter-container-en {font-size: 14px;padding: 5px 35px 5px 8px;}
	.ft_info-en ul li {width: 38%;margin-left: 5%;}
	.b2b, .copyright {margin: 0;}
	.contact-presentation-en {width: 113%;margin-left: -5%;}
	.contactus-form-control {width: 635px;}
	.contactus-form-control-message {width: 635px;}
	.form-bg {margin-left: -6%;}
	.rich-en {font-size: 16px;}
	.rich-en p{font-size: 18px;}
	.gobo-pro-1-en p {font-size: 18px;}
	.gobo-pro-2-en p {font-size: 18px;}
	table td {font-size: 18px;}
}
@media (max-width : 700px) {
  .popup-gallery2 li {
    width: calc(33.3% - 10px)
  }
}
@media (max-width : 680px) {
  .pro_cate ul li {width: calc(50% - 30px);margin: 0 15px 20px;}
}
@media (max-width : 667px) {
	.frame-en {font-size: 12px;padding: 5px 0px;}
	.filter-container-1-en {padding: 8px 0px;}
	.ft_info-en ul li {width: 40%;margin-left: 3%;}
	.b2b, .copyright {margin-top: 0px;}
	.ft_logo-en {width: 13%;}
	.ft_nav-en {width: 87%;}
	.mid-pro03-1 ul li p {font-size: 12px;}
	.contact-presentation-en ul li p {font-size: 12px;}
	.contact-presentation-en {margin: 0;}
	.contactus-form-control {width: 560px;}
	.contactus-form-control-message {width: 560px;}
	.rich-en {font-size: 16px;}
	.rich-en p{font-size: 16px;}
	.gobo-pro-1-en p {font-size: 16px;}
	.gobo-pro-2-en p {font-size: 16px;}
	table td {font-size: 18px;}
}
@media (max-width : 650px) {
  .detail_left {
    width: 100%;
    padding-right: 0;
    float: none
  }
  .detail_right {
    width: 100%;
    float: none
  }
  .video, .exploded {
    display: none
  }
  .video2, .video2 .exploded {
    display: block
  }
  .pro_detail .video2 h4:before {
    content: "";
    background: url(../images/pro/icon1.jpg) no-repeat;
    width: 40px;
    height: 32px;
    display: block;
    position: absolute;
    left: 0;
    top: 0
  }
	
}
@media (max-width : 640px) {
	.banner-text{font-size: 24px;}
	.banner-text2{font-size: 24px;}
	.mid-pro03-1 ul li{width: 45%;}
	.banner-text {font-size: 34px;}
	.banner-text2 {padding-top: 12%;}
	.contactus-02 {padding: 20px 20px;}
	.contact-presentation ul li p {font-size: 16px;}
	.form-bg {width: 45%;}
	.contactus-form-control {width: 270px;}
	.contactus-form-control-message {width: 270px;}
	.banner-text2 span {letter-spacing: 4px;}
	.mid-pro02-1 ul li {width: 49%;}
	.filter-container-wrap {margin: 0 1.1%;}
}
@media (max-width : 600px) {
  .insidebanner .slider .slides {
    height: 200px
  }
  .sb-toggle-right span, .sb-toggle-left span {
    display: none
  }
  .sb-toggle-left:before, .sb-toggle-right:before {
    font-size: 25px
  }
  .ft_logo {
    float: none;
    padding: 0;
  }
  .ft_logo img {
    margin-top: 20px;
  }
  .ft_nav {
    float: none;
    width: 100%;
    padding: 0;
  }
  .ft_add {
    float: none;
    width: 100%;
    padding-left: 30%;
  }
  .ab3 .pic_right {
    padding-left: 15px;
    float: right;
    width: 60%
  }
  .ab_1, .ab_2 {
    width: 100%;
    float: none
  }
  .ab_1 {
    padding-top: 0
  }
  .ab4 .pic_left {
    width: 50%
  }
  .application {
    display: none
  }
  .slider .slides {
    height: 280px
  }
  .application2 {
    display: block;
    text-align: center
  }
  .application2 h2 {
    font-weight: bold;
    font-size: 30px;
    margin: 0 0 15px 0;
    line-height: 100%
  }
  .about_zone h1 {
    font-size: 30px;
    margin-bottom: 15px;
    line-height: 100%;
    border: 0
  }
  .application2 ul li {
    padding: 15px
  }
  .application2 ul li a {
    font-size: 20px;
    color: #fff;
  }
  .application2 ul li.app1 {
    background: #573891
  }
  .application2 ul li.app2 {
    background: #b81c28
  }
  .application2 ul li.app3 {
    background: #ea5b18
  }
  .application2 ul li.app4 {
    background: #f08915
  }
  .application2 ul li.app5 {
    background: #f9bf11
  }
  .application2 ul li.app6 {
    background: #6eb93c
  }
  .application2 ul li.app7 {
    background: #43afe2
  }
  .application2 ul li.app8 {
    background: #3379bd
  }
  .application2 ul li:hover {
    -moz-box-shadow: inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow: inset 0 0 10px #000000;
  }
  .box_three li > div {
    font-size: 20px
  }
  .banner {
    margin-bottom: 10px
  }
  .slider .slides li div img {
    background-size: 100%;
  }
  .insideapp li > a {
    float: left;
    width: 50%;
    display: block;
    padding: 20px 10px 0 0px
  }
  .insideapp .pic {
    width: 50%;
    float: right
  }
  .pro_detail h4 {
    font-size: 20px
  }
	.about p{font-size: 16px;}
	.news-p1 ul li{width: 50%;padding: 0;}
	.news-p1-1{width: 68%;margin-left: 7%;margin-top: 0%;}
	.mid-news-01{margin-bottom: 0px;}
	.news-list h2{padding: 0;}
	.news-list p{width: 200%;}
	.news-pic{width: 200%;}
	.mid-news-03 ul li{width: 60%;}
	.pro-end ul li{font-size: 16px;line-height: 32px;}
	.gobo-flip-4{top: 8px;left: 70px;}
	.gobo-pre-4{top: 19%;font-size: 12px;left: 43%;}
	.compare{width: 60%;margin-left: 20%;}
	.compare .text{padding-top: 8px;}
	.aesthetics-04{padding: 58px 90px;}
	.aesthetics-04 h3{font-size: 24px;}
	.gobo-pro-1 p{font-size: 32px;}
	.gobo-pro-2 p{font-size: 32px;}
	.banner-text{font-size: 28px;top: -1%;}
	.banner-text2{font-size: 24px;padding-top: 12%;}
	.mid-pro03-1 ul li{width: 40%;margin-left: 5%;}
	.customized-text { width: 83%;}
	.customized-text h1 {font-size: 32px;}
	.customized-text h3 {font-size: 18px;}
	.customized-carousel-pic {width: 100%;}
	.customized-carousel-description {width: 100%;}
	.customized-shop {width: 100%;}
	.customized-shop h3 {font-size: 18px;}
	.contactus-form-control {width: 240px;}
	.contactus-form-control-message {width: 240px;}
	.contact-presentation ul li p {font-size: 16px;}
	.banner-text2 span {letter-spacing: 4px;}
}
@media (max-width : 580px) {
  .tabs {
    height: auto
  }
  .tabs .tab {
    width: 100%;
    display: block;
    border-bottom: 1px solid #fff
  }
	.form-control {width: 188px;}
	.form-control-content {width: 350px;}
	.banner-text2 span {letter-spacing: 4px;}
}
@media (max-width : 500px) {
  .ab3 .pic_right {
    padding-left: 15px;
    float: right;
    width: 60%
  }
  .ab_1, .ab_2 {
    width: 100%;
    float: none
  }
  .ab_1 {
    padding-top: 0
  }
  .ab4 .pic_left {
    width: 100%;
    float: none
  }
  .ab3 .pic_right {
    padding-left: 0px;
    float: none;
    width: 100%
  }
  .about_zone h2 {
    font-size: 45px
  }
  .about_zone h3 {
    font-size: 20px
  }
  .tit {
    font-size: 28px;
    margin-top: 0px
  }
  .ab5 .pic_right {
    padding-left: 0px;
    width: 100%;
    float: none
  }
}
@media (max-width : 480px) {
  .pro_cate ul li {
    width: 300px;
    margin: 0 auto 20px;
    float: none;
  }
  h1 {
    font-size: 30px
  }
  .pro_detail h1:before {
    top: 10px
  }
  .slider-for .slick-prev {
    left: -10px
  }
  .slider-for .slick-next {
    right: -10px
  }
  .co_contact table th, .co_contact table td {
    width: 100%;
    display: block
  }
  .co_contact table th {
    padding: 5px 0 5px 0
  }
  .co_contact table td {
    padding: 0
  }
  .co_contact table th span {
    position: static;
  }
	.mid-about-text{padding: 0;font-size: 16px;line-height: 32px;}
    .mid-about-4 ul li{width: 100%;}
	.news-p1-1{width: 80%;}
	.news-p2{width: 60%;}
	.mid-news-03 ul li{width: 70%;}
	.mid-news-04 ul li{width: 100%;padding: 10px 0;}
	.gobo-pre-4{top: 18%;}
	.mid-pro02-2 ul li{width: 133%;margin-left: -12%;}
	.compare{width: 100%;margin-top: 30px;}
	.compare img{margin-left: -8%;}
	.aesthetics-04{padding: 58px 32px;}
	.tech{font-size: 24px;margin-top: 8%;margin-left: 16%;width: 68%;}
	.remark-pro{font-size: 16px;}
	.gobo-pro-1{margin-left: 24%;}
	.gobo-pro-1 p{font-size: 22px;}
	.gobo-pro-2 p{font-size: 24px;}
	table td{font-size: 16px;}
	.banner-text{font-size: 18px;}
	.banner-text2{font-size: 14px;}
	.customized-text h1 {font-size: 22px;}
	.customized-text h3 {font-size: 14px;}
	.customized-carousel-description {padding-left: 2%;}
	.customized-s5 h3 {font-size: 24px;}
	.form-control {width: 150px;}
	.form-group-content {padding: 20px 10px;}
	.form-control-content {width: 340px;}
	.popup-note {padding: 20px 0px;}
	.popup-att ul li {font-size: 16px;}
	.banner-text2 span {letter-spacing: 4px;}
}
@media (max-width : 414px) {
  .ft_nav {
    width: 75%;
  }
	.gobo-pre-1 b{font-size: 32px;}
	.pro-end ul li{font-size: 14px;line-height: 30px}
	.compare img{margin-left: -16%;}
	.mid-pro-2-p h4 a{font-size: 20px;}
	.mid-pro-2-p h3{font-size: 16px;padding: 20px 42px;line-height: 36px;}
	.mid-pro-2-p hr{margin: 20px 10px;}
	.gobo-text{font-size: 16px;line-height: 36px}
	.gobo-pro-1{width: 28%;margin-left: 16%;}
	.gobo-pro-2{width: 28%;}
	table td{font-size: 13px;}
	.banner-text{font-size: 18px;}
	.banner-text2{font-size: 14px;}
	.mid-pro03-1 ul li{width: 50%;padding: 5px 3px;margin: 0}
	.customized-text {width: 90%;}
	.customized-carousel-description ul li {font-size: 16px;}
	.customized-s5 h3 {font-size: 18px;}
	.contact-bg1 {padding: 20px 0px;}
	.contact-bg1 {padding: 20px 0px;}
	.contact-presentation {width: 100%;}
	.form-bg {width: 100%;margin-left: -2%;}
	.wrap hr {margin: 0px 0px;}
	#inquiry-contact {text-align: center;}
	.banner-text2 span {letter-spacing: 4px;}
	.mid-pro02-1 ul li {width: 100%;}
	.ft_logo-en {width: auto;text-align: center;padding-left: 25%;}
	.ft_nav-en {width: 100%;}
	.ft_nav-en ul li {width: 50%;margin-bottom: 10%;padding: 0;}
	.ft_info-en ul {text-align: left;padding: 0;}
	.ft_info-en ul li {width: 100%;padding-left: 20%;}
	.add-en a {font-size: 12px;}
	.compare p {width: 80%;}
	.aesthetics-04-en {padding: 60px 40px;}
	.aesthetics-04-en h3 {font-size: 16px;width: 100%;}
	.tech-en {width: 100%;}
	.gobo-pro-1-en {width: 75%;margin-left: 12%;}
	.gobo-pro-2-en {width: 75%;margin-left: 12%;}
	.filter-container-en {width: 100%;margin: 10px 0px;}
	.filter-container-wrap {width: 80%;margin: 0 7.7%;}
	.filter-container-1-en {margin: 2% -11%;}
	.customized-text-en h1 {font-size: 32px;}
	.customized-text-en h3 {font-size: 20px;padding-bottom: 6%;}
	.form-control-content {width: 250px;}
	.form-control {width: 117px;}
	.filter-container-1-en h2 {padding: 5px 5px;}
	.table-responsive:before {
    content: '';
    background: url(../images/table_arrow.svg) no-repeat;
    display: block;
    width: 80px;
    height: 24px;
    margin: 1em 0;}
	.gobo-pre-4 {left: 50%;}
	.contact-presentation-en {width: 100%;}
	.ft_add {padding-left: 18%;}
	.b2b, .copyright {margin-top: 30px;}
	.contactus-form-control {width: 315px;}
	.contactus-form-control-message {width: 315px;}
}
@media (max-width : 411px) {
  .ft_nav {width: 75%;}
	.customized-text {width: 92%;}
	.customized-carousel-description ul li {font-size: 16px;}
	.customized-s5 h3 {font-size: 18px;padding-left: 10px;}
	.contact-bg1 {padding: 20px 0px;}
	.contact-bg1 {padding: 20px 0px;}
	.form-group {padding: 20px 9px;}
	.form-group-content {padding: 20px 0px;}
	.form-control-content {width: 260px;}
	.form-control {width: 117px;}
	
	.popup-att ul li {font-size: 12px;}
	.contact-presentation {width: 100%;}
	.form-bg {width: 100%;}
	.wrap hr {margin: 0px 0px;}
	#inquiry-contact {text-align: center;}
	.banner-text2 span {letter-spacing: 4px;}
	.mid-pro02-1 ul li {width: 100%;}
	.ft_logo-en {width: auto;text-align: center;padding-left: 25%;}
	.ft_nav-en {width: 100%;}
	.ft_nav-en ul li {width: 50%;margin-bottom: 10%;padding: 0;}
	.ft_info-en ul {text-align: left;padding: 0;}
	.ft_info-en ul li {width: 100%;padding-left: 20%;}
	.add-en a {font-size: 12px;}
	.compare p {width: 80%;}
	.aesthetics-04-en {padding: 60px 40px;}
	.aesthetics-04-en h3 {font-size: 16px;width: 100%;}
	.tech-en {width: 100%;}
	.gobo-pro-1-en {width: 75%;margin-left: 12%;}
	.gobo-pro-2-en {width: 75%;margin-left: 12%;}
	.filter-container-en {width: 100%;margin: 10px 0px;}
	.filter-container-wrap {width: 80%;margin: 0 7.5%;}
	.filter-container-1-en {margin: 2% -11%;}
	.customized-text-en h1 {font-size: 32px;}
	.customized-text-en h3 {font-size: 20px;padding-bottom: 6%;}
	.filter-container-1-en h2 {padding: 5px 5px;}
	.table-responsive:before {
    content: '';
    background: url(../images/table_arrow.svg) no-repeat;
    display: block;
    width: 80px;
    height: 24px;
    margin: 1em 0;}
	.gobo-pre-4 {left: 50%;}
	.contactus-form-control {width: 315px;}
	.contactus-form-control-message {width: 315px;}
}
@media (max-width : 400px) {
  .co_name {
    font-size: 16px
  }
  .ot_smo {
    width: 350px;
    margin: 20px auto 0
  }
  .ot_smo ul li {
    float: left;
    margin-left: 10px;
    font-size: 16px;
    line-height: 30px;
    font-weight: bold;
    color: rgb(178, 191, 74)
  }
  .ot_smo .pic {
    width: 25px;
    margin-right: 5px
  }
  .ot_smo {
    width: 300px
  }
  .slider .slides li img {
    background-position: 75%
  }
  .insidebanner .slider .slides li div img {
    background-size: 80%;
  }
  .sb-toggle-left:before, .sb-toggle-right:before {
    font-size: 20px
  }
  .co_name {
    font-size: 16px
  }
  .pro_cate ul li {
    width: 100%;
    margin: 0 auto 20px;
    float: none;
  }
  .application2 ul li a {
    font-size: 16px
  }
	.customized-text {width: 85%;}
	.customized-text h1 {font-size: 20px;}
	.customized-text h3 {font-size: 12px;}
	.customized-carousel-description ul li {font-size: 16px;}
	.customized-s5 h3 {font-size: 18px;}
	.contact-bg1 {padding: 0;}
	.form-group {padding: 20px 6px;}
	.form-group-content {padding: 20px 0px;}
	.form-control-content {width: 315px;}
	.contact-presentation {width: 100%;}
	.form-bg {width: 100%;}
	.wrap hr {margin: 0px 0px;}
	.customized-carousel-description-en {width: 100%;padding-left: 10px;}
	.contact-bg2 h1 {font-size: 24px;}
	.popup-email {font-size: 18px;}
}
@media (max-width : 380px) {
  .popup-gallery2 li {
    width: calc(50% - 10px)
  }
}
@media (max-width : 375px) {
  .ft_nav {
    width: 88%;
  }
  .ft_add {
    padding-left: 12%;
  }
	.news-p1-1{width: 101%;margin: 0;}
	.news-p2{width: 100%;}
	.news-list p{width: 100%;}
	.news-pic{width: 100%;}
	.mid-news-03 ul li{width: 100%;}
	.text-1 h1{font-size: 32px;}
	.text-1 h3{font-size: 32px;}
	.pro-zone-1{margin-top: 40px;}
	.gobo-text{font-size: 17px;line-height: 32px;padding-top: 9%;}
	.gobo-pre-1 b{font-size: 32px;line-height: 50px}
	.pro-end ul li{font-size: 12px;line-height: 24px;}
	.gobo-pre-4{top: 15%;}
	.compare{margin-left: 12%;}
	.compare img{margin-left: -12%}
	.mid-pro-2-p h4{font-size: 18px;}
	.mid-pro-2-p h3{font-size: 15px;padding: 20px 32px;line-height: 32px;}
	.mid-pro-2-p hr{margin: 10px 12px;}
	table td{font-size: 12px;}
	.gobo-pro-1{width: 28%;margin-left: 16%;}
	.gobo-pro-2{width: 28%;}
	.gobo-pro-1 p{font-size: 20px;}
	.gobo-pro-2 p{font-size: 22px;}
	.banner-text{font-size: 18px;}
	.banner-text2{font-size: 14px;}
	.mid-pro03-1 ul li{width: 50%;padding: 5px 3px;margin: 0}
	.customized-text {width: 90%;}
	.customized-carousel-description ul li {font-size: 14px;}
	.form-control {width: 117px;}
	.form-control-content {width: 250px;}
	.banner-text2 span {letter-spacing: 4px;}
	.mid-pro02-1 ul li {width: 100%;}
	.ft_logo-en {width: auto;text-align: center;padding-left: 25%;}
	.ft_nav-en {width: 100%;}
	.ft_nav-en ul li {width: 50%;margin-bottom: 10%;padding: 0;}
	.ft_info-en ul {text-align: left;padding: 0;}
	.ft_info-en ul li {width: 100%;padding-left: 20%;}
	.add-en a {font-size: 12px;}
	.gobo-text {font-size: 15px;}
	.compare p {width: 80%;}
	.aesthetics-04-en {padding: 60px 40px;}
	.aesthetics-04-en h3 {font-size: 16px;width: 100%;}
	.spec-title-en {font-size: 20px;padding-top: 8%;}
	.tech-en {width: 100%;}
	.gobo-pro-1-en {width: 75%;margin-left: 12%;}
	.gobo-pro-2-en {width: 75%;margin-left: 12%;}
	.filter-container-en {width: 100%;margin: 10px 0px;}
	.filter-container-wrap {width: 80%;}
	.filter-container-1-en {margin: 2% -11%;}
	.customized-text-en h1 {font-size: 32px;}
	.customized-text-en h3 {font-size: 20px;padding-bottom: 6%;}
	.contact-presentation-en {width: 100%;}
	.contactus-form-group {padding: 5px 3px;}
	.contactus-form-control {width: 300px;}
	.contactus-form-control-message {width: 300px;}
	.table-responsive {border: 0;overflow: auto;}
    .table-responsive:before {
    content: '';
    background: url(../images/table_arrow.svg) no-repeat;
    display: block;
    width: 80px;
    height: 24px;
    margin: 1em 0;}
	.gobo-pre-4 {left: 50%;}
	.form-bg {margin-left: -2%;}
}
@media (max-width : 360px) {
  .ft_nav {
    width: 88%;
  }
  .ft_add {
    padding-left: 12%;
  }
	.contact-presentation {width: 108%;}
	.banner-text2 span {letter-spacing: 4px;}
}
@media (max-width : 320px) {
  .ft_nav {
    width: 98%;
  }
  .ft_add {
    padding-left: 8%;
  }
	.form-control {width: 110px;}
	.form-control-content {width: 240px;}
	.mid-pro02-1 ul li {width: 100%;}
}