@charset "utf-8";
/* shuanglang wessite system main css stylesheet */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, ub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video{margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; font-weight: normal; vertical-align: baseline; box-sizing: border-box;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}
ol, ul, li{list-style: none;}
blockquote, q{quotes: none;}
blockquote:before, blockquote:after,q:before, q:after{content: ''; content: none;}
table{border-collapse: collapse; border-spacing: 0;}

html, body{ overflow-x: hidden; width: 100%; max-width: 100%; scroll-behavior:smooth; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

::-webkit-scrollbar{ width: 5px; height: 5px;}
::-webkit-scrollbar-track-piece{ background-color: rgba(0, 0, 0, 0.2); -webkit-border-radius: 6px;}
::-webkit-scrollbar-thumb:vertical{ height: 5px; background-color: rgba(125, 125, 125, 0.7); -webkit-border-radius: 6px;}
::-webkit-scrollbar-thumb:horizontal{ width: 5px; background-color: rgba(125, 125, 125, 0.7); -webkit-border-radius: 6px;}

.clearfix:before,.clearfix:after{content: " "; display: inline-block; height: 0; clear: both; visibility: hidden;}
.clearfix{*zoom: 1;}

@font-face{
	font-family: thinFont;	src: url("../fonts/Montserrat-Light.ttf");
}
@font-face{
	font-family: normalFont;	src: url("../fonts/Montserrat-Medium.ttf");
}
@font-face{
	font-family: boldFont;	src: url("../fonts/Montserrat-Bold.ttf");
}
@font-face{
	font-family: xBoldFont;	src: url("../fonts/Montserrat-ExtraBold.ttf");
}
 
/*main variable*/
:root{
    --primary: #f08519;
    --secondary: #6c757d;
    --success: #f08519;
    --info: #687a90;
    --warning: #ffc107;
    --danger: #f03219;
    --light: #edeff3;
    --dark: #182636;
	
	--lightGray: #edeff3;
	--midGray: #6d7075;
	--darkGray: #182636;
	
	--mainColor: #f08519;
	--subpage_bgColor:#f0f2f5;
	--alphaWhite: rgba(255,255,255,0.5);
	--alphaGray: rgba(117,121,131,0.5);
	
	--thinFont: thinFont;
	--normalFont: normalFont;
	--boldFont: boldFont;
	--xBoldFont: xBoldFont;
}

/* custom */
a{
  color: var(--darkGray);
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}
a:hover{color:var(--mainColor); text-decoration: none;}


 
/*隐藏*/
.dn{display: none;}
.btn-primary{background-color: var(--mainColor); border-color: var(--mainColor);}
.more_btn .btn{padding: 0.8rem 2.2rem;}.fl{float: left;}.fr{float: right;}
/*-end reset css-*/


/*769+

@media screen and (min-width: 769px){*/
	
/*====================导航==================*/
.m_nav{display:none;}
.header_wrapper{
	width:90%;
	position:fixed;
	top: 45px;
	left: 50%;
	z-index:999;
	transition: all 0.3s;
	transform: translateX(-50%);
}
.nav_main{
	display:flex;
	margin: 0 auto;	
}
/*左侧logo*/
.nav_left{max-width:20%; align-self: center;}
.header_wrapper .nav_left .img2{
	display: none;
}
/*右侧*/
.header_wrapper .nav{
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	height: 100%;
	line-height: 50px;
	display: block;
	flex: 0 0 65%;
	border: 1px solid var(--alphaWhite);
	border-radius: 100px;
	margin-left: auto;
	margin-right: 35px;
}

.header_wrapper.on .nav{
	border-color: transparent;
}

.header_wrapper.on .language svg{
	color:var(--mainColor);
	fill:var(--mainColor);
}

.header_wrapper .navbar_nav{
	display: flex;
	justify-content: space-evenly;
}
.navbar_nav li{position:relative;}
.header_wrapper .navbar_nav li:after{
    content: "";
    width: 0;
    height: 4px;
    background: var(--mainColor);
    position: absolute;
    bottom: 0;
    left: 50%;
    transition: all 0.5s ease 0s;
	border-radius: 2px;
	transform: translateX(-50%);
}
.header_wrapper .navbar_nav li:hover:after{
    width: 150%;
}
.header_wrapper .navbar_nav li a{
	text-decoration: none;
	height: 100%;	
	display: block;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	color: #fff;
	font-size: 16px;
	font-family: var(--normalFont);
	line-height: 90px;
}
.header_wrapper .navbar_nav li:hover a{
	color: var(--mainColor);	
	font-family: var(--boldFont);
}
.header_wrapper .navbar_nav li.dropdown{	
	position: relative;
}
.header_wrapper .navbar_nav li.dropdown .jt{
	width: 20px;
	height: 20px;
	background: url(i/top.png) no-repeat;
	background-size: 100% 100%;
	display: block;
}
.header_wrapper .navbar_nav li.dropdown .dropdown_menu{
	opacity: 0;
	position: absolute;
	top:100%;	
	background: #fff;
	box-shadow: 0 15px 27px 0 rgba(167,165,165,0.38);
	width: 290%;
    left: 50%;
	transform: translateX(-50%);
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	pointer-events: none;
	border-radius: 12px;
	background: rgba(255,255,255,0.8);
}
.header_wrapper .navbar_nav li.dropdown .dropdown_menu a{
	font-size: 14px;
	font-family: var(--thinFont);
	color: var(--darkGray);
	padding: 0 10px;
	line-height: 40px;
	text-align: center;	
	margin-bottom: 1px;
	border-bottom: 1px solid rgba(0,0,0,0.1);	
}
.header_wrapper .navbar_nav li.dropdown:hover .dropdown_menu{
	opacity: 1;
	display: block;
	pointer-events: auto;	
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	padding: 1rem;
}

.header_wrapper .navbar_nav li.dropdown:hover .dropdown_menu a:hover{
	color: var(--mainColor);
	background: transparent;
	border-bottom: 1px solid var(--mainColor);
}

	.header_more{}
.language{position: relative;}
.language svg{color: #fff; fill: #fff; cursor: pointer;}
.lan_list{
	display: none;
	position: absolute;
	top: 100%;
	width: 100px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.7);
	border-radius: 10px;
}
.lan_list li{
	padding: 0.5rem;	
	font-size: 14px;
	font-family: var(--thinFont);
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
	
/*白色背景的头部*/
.header_wrapper.on{
	background: rgba(255, 255, 255, 0.8);
    width: 100%;
    top: 0;
    padding-left: 3%;
    padding-right: 3%;
	backdrop-filter:blur(5px);
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.header_wrapper.on .nav_left .img1{
	display: none;
}
.header_wrapper.on .nav_left .img2{
	display: block;
}
.header_wrapper.on .navbar_nav li a{
	color: #333;
}
.header_wrapper.on .navbar_nav li:hover a{
	color: var(--darkGray);
}
#navToggle{
	display: none;
}
	.header_more{display: flex; flex: 0 0 50px; align-items: center; color: #fff;}
	
	
	.header_wrapper.on .header_more div p,
	.header_wrapper.on .header_more div a{color:#555; fill:#555;}

	
	/*banner*/
	.banner_main{max-height: 1440px; height: 100vh; max-width: 100%; overflow: hidden; background:url("../images/bg_home_banner.jpg") no-repeat center top; background-size: cover;}
	.banner_main .swiper-slide{position:relative; display: flex; align-items: center; max-width: 100%;}
	.banner_bg{position: absolute; width:100%; height: 100%; left: 0; top: 0; z-index: 10;}
	.banner_info{
		flex: 0 0 44%;
		z-index: 3;
	}
.banner_img{ position: relative; flex: 0 0 56%; z-index: 1; margin-top: 10rem;}
.banner_img img{position: absolute; z-index: 2; max-width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.banner_img::after,
.banner_img::before{
	content: ''; 
	position: absolute; 
	left: 50%; 
	top: 50%; 
	width: 80%; 
	aspect-ratio:1/1;
	border-radius: 100%;
	border: 1px solid var(--alphaWhite); 
	transform: translate(-50%, -50%);
	z-index: 1;
}
.banner_img::before{ width: 55%; border: 6vw solid var(--mainColor);}

	.text_small{font: normal 14px var(--normalFont); color: var(--darkGray);}
	.text_en{font: bold 60px "arial"; font-family: enBoldFont;}
	.text_main{font: bold 5vw var(--xBoldFont); text-transform: uppercase; line-height: 1;}
	.text_main strong{color:#29a674; margin-right: 10px; font-weight: bold;}
	.feature{
		position: relative;
		margin: 0 auto;
		margin-top: -14%;
    	width: 90%;		
		z-index: 100;
	}
	.feature_list{display: flex; max-width: 35%;}

	.feature p{margin-top: 1rem; font-size: 16px; color: #fff; max-width: 100px;}
	.feature li{flex-basis: 25%; width: 25%; position: relative;}
	.feature li::before{
		content: '';
		display: block;
		position: absolute;
		top: 23px;
		left: 39px;
		width: calc(100% - 39px);
		height: 1px;
		background: rgba(255,255,255,0.9);
	}
	.feature li:nth-last-child(1)::before{display: none}
	.feature .bf_num{width: 39px; height: 39px; background: transparent; border: 1px solid rgba(255,255,255,0.8); color: #fff; border-radius: 100%; transition: all 0.3s ease; text-align: center; font-size:18px; line-height: 38px;}
	.feature li:hover .bf_num{background: var(--mainColor); border-color: var(--mainColor);}

	.banner_btn{display: block; margin-top: 130px; margin-left: 8px; padding: 15px 2rem; max-width: 180px; text-align: center; border: 2px solid #29a674; color: #29a674; transition: all 0.3s;}
	.banner_btn:hover{background: #29a674; color: #fff;}

	.banner_main .swiper-wrapper{
		width: 100%;
		height: 100vh;
    	margin-left: auto;
    	margin-right: auto;		
	}
	.banner_content{display: flex; width: 90%; margin-left: auto; margin-right: auto;}

	
	/*floor*/
	.home_floor{padding-bottom: 5rem;}
	.h_f_tt{width: 90%; margin-left: auto; margin-right: auto;} 

	.h_f_con{margin-top:3%; width: 90%; margin-left: auto; margin-right: auto;}
	
	.tt_main{position: relative; padding-top: 42px;}
	.tt_main::after{
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 50%;
		width: 1px;
		height: 42px;
		background: var(--darkGray);
		transform: translateX(-50%);
	}
	.tt_main dt{position: relative; margin:0 auto; width: 15px; height: 15px; color: var(--darkGray); text-align: center;}
	.tt_main dt::before,
	.tt_main dt::after{
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 5px;
		height: 5px;
		transform: translate(-50%, -50%);
		background: var(--darkGray);
		border-radius: 100%;
	}
	.tt_main dt::before{
		width: 100%;	
		height: 100%;
		background: transparent;
		border: 1px solid var(--darkGray);
	}
	.tt_info p{font-family: var(--thinFont); text-align: center;}

	.h_f_tt dd strong{font:normal 60px enBoldFont; color:#000; line-height: 1.2;}
	.h_f_tt dd h2{font: bold 4vw var(--boldFont); color: var(--darkGray); line-height: 1.2; text-align: center;}
	.more_btn{margin-right:0; margin-left: auto; display: block; max-width: 145px; padding: 1rem 1.5rem; font-size:12px; text-align: center; background: #29a674; color: #fff; transition: all 0.3s; border-radius: 10px;}
	.more_btn:hover{background:#121212;}
		
	
	/*products*/
	#home_product{background: url(../images/bg_home_product.jpg) no-repeat center top; background-size: cover;}
	#home_product .tt_main{flex: 0 0 30%;} #home_product .tt_info{flex: 0 0 70%;}
	#home_product .tt_main dt{border-color:rgba(2,2,2,0.2);}
	.cate_list{display: flex; justify-content: center; margin-top: 1rem;}
	.cate_list li a{display: block; margin-left: 0.5rem; padding: 0.4rem 1rem; font-size: 14px; border-radius: 100px; background: var(--lightGray); color: var(--darkGray); transition:all 0.3s; font-family: var(--normalFont);}
	.cate_list li a:hover{background: var(--mainColor); color: #fff;}

	.products_box{display: flex;  flex-wrap: wrap; justify-content: space-between;}
	.products_box li{margin-top: 1.5rem; max-width: 24%;}
	.products_box img{max-width: 100%; transition: all 0.3s;}
	.products_box h3{font-size: 18px; line-height: 1.8;} .products_box h3 a{font-weight: bold!important;}
	.products_box p{font-size: 14px; line-height: 1.8;}
	.products_box li:hover img{transform: translateY(-20px); box-shadow: 0 25px 60px rgba(0, 0, 0, .17);}

	#scroller_product{display:flex;}
	#scroller_product #bigP{
		width: 90%;
		overflow: hidden;
	}
	#scroller_product #bigP .swiper-slide{
		display: flex;	
	}
	

	
	.product_info{width: 42%; align-self: center; position: absolute;}
		.product_info h3{margin-bottom: 3rem; font-size: 60px; font-family: var(--normalFont);}
		.product_info ul li{padding: 5px 0 5px 18px; position: relative; font-family: var(--thinFont);}
		.product_info ul li::before,
		.product_info ul li::after{
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: 4px;
			width: 9px;
			height: 9px;
			transform: translateY(-50%);
			background: var(--mainColor);
			border-radius: 100%;
			z-index: 2;
		}
	.product_info ul li::after{background: var(--lightGray); left: 0; width: 17px; height: 17px; z-index: 1;}
	.product_info .btn_more{display: block; margin-top: 4rem; padding: 1rem 3rem; background: transparent; border: 4px solid var(--mainColor); color: var(--mainColor); text-align: center; max-width: 210px; border-radius: 100px; transition: all 0.3s ease;}
	.product_info .btn_more:hover{
		background: var(--mainColor);	
		color: #fff;
	}

	.product_image{position:relative; width: 53%; margin-left: 42%;}
	.product_image::after{
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			width: 90%;
			aspect-ratio:1/1;
			transform: translate(-50%,-50%);
			background: var(--lightGray);
			border-radius: 100%;
			z-index: 1;
	}
	.product_image img{position: relative; z-index: 2; width: 100%;}

	#scroller_product #smallP{
		width: 10%;			
		
		height: 80vh;
		overflow: hidden;
		position: relative;
	}
	#smallP .swiper-slide{height: 20%;}
	#smallP img{max-width: 100%;}
	#smallP .product_box{
		position: relative;
		width: 80%;
    	aspect-ratio: 1 / 1;
		margin-left: auto;
		margin-right: auto;
	}
#smallP .product_box::before,
#smallP .product_box::after{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%,-50%);
	background: var(--lightGray);
	border-radius: 15px;
	z-index: 1;
	transition: all 0.3s ease;
}
#smallP .product_box:hover::before,
#smallP .product_box:hover::after{
	border-radius: 100%;	
}
#smallP .product_box:hover::before{
	background:var(--mainColor);
	width: 55%;
	height: 55%;
	z-index: 2;
}
#smallP .product_box img{
	position: relative;
	z-index: 3;
}
#smallP .swiper-button-next, #smallP .swiper-button-prev{
	left: 50%;
    transform: translateX(-50%) rotate(90deg);
    top: 0;
}
#smallP .swiper-button-next{
	top: auto;
	bottom: 0;
	
}

/*video*/
.video_list{display: flex; flex-wrap: wrap;}
.video_item{width:33%;margin-bottom: 2vw; transition: transform .5s cubic-bezier(.38, 0, 0, 1), box-shadow .5s cubic-bezier(.38, 0, 0, 1), background 0.4s ease;}
.video_item img{border-radius: 1vw;}
.video_item h3{font-family: var(--normalFont); font-size: 1.5rem;}

/*application*/
#home_application{position: relative; background: url("../images/bg_home_application.jpg") no-repeat center top;  background-size: cover; overflow: hidden; min-height: 910px;}
#home_application .bg_circle{
	content: '';
	display: block;
	width: 90%;
	aspect-ratio:1/1;
	position: absolute;
	bottom: 15%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 100%;
}
#home_application .bg_circle::after{
	content: '';
	display: block;
	width: 80%;
	aspect-ratio:1/1;
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	background: rgba(255,255,255,0.3);
	border: 1px solid #f08519;
	border-radius: 100%;
}


#home_application .h_f_tt,
#home_application .h_f_con{
	position: relative;
	z-index: 3;
}
#home_application .h_f_tt p{font-size:14px; text-align: center;}
#home_application .h_f_con{display:flex; justify-content: space-around;}
#home_application .h_f_con .tt_main::after{display:none;}

.application_item{
	text-align:center;
	margin-top: 10rem;
}
.app_tt{position: relative; margin-bottom: 1rem; z-index: 4;}
.app_tt p{color: #fff; font-size: 14px;}
.app_tt h2{color: var(--mainColor); font-size: 1.3vw; font-family: var(--boldFont); text-transform: uppercase;}
.app_img{display: inline-block; position: relative; border-radius:100%; aspect-ratio:1/1; transition: all 0.3s ease;}
.app_img img{display: block; position:relative; border-radius:100%; border: 1px solid #fff; background: #b3becb; aspect-ratio:1/1; transition: all 0.3s ease; z-index: 2; max-width: 240px;}
.app_img::after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 100%;
	transform: translate(-50%,-50%);
	transition: all 0.3s ease;
	z-index: 1;
}
.app_img::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: var(--mainColor);
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 100%;
	transform: translate(-50%,-50%);
	transition: all 0.3s ease;
	z-index: 2;
}
.app_con h4{
	position: relative; 
	z-index: 4; 
	display: block; 
	margin-left: auto; 
	margin-right: auto; 
	margin-top: -1rem; 
	width: 2rem; 
	height: 2rem; 
	aspect-ratio:1/1; 
	border-radius: 100%; 
	background: #fff; 
	color: #333;
	line-height: 2rem;
	text-align: center;
	transition: all 0.3s ease;
}
.application_item:hover .app_tt p{
	color: #333;
}
.application_item:hover h4{
	background: var(--mainColor);
	color: #fff;
}
.application_item:hover img{
	border-color:var(--mainColor);
}
.application_item:hover .app_img::after{
	width: 20vw;
	height: 20vw;
}
.application_item:hover .app_img::before{
	width: 110%;
	height: 110%;
}
.application_item:nth-child(1),
.application_item:nth-last-child(1){
	margin-top:-4rem;
}

	/*about*/
	#home_about{padding: 10vh 0; background: url("../images/bg_home_about.jpg") no-repeat center top; background-size: cover;}
.home_about_main{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.about_tt dd h2{
	font-size: 4vw;
	font-family: var(--boldFont);
	color: var(--darkGray);
}
.about_tt dt{
	position: relative;
	padding-left: 42px;	
	font-size: 1.2vw;
	color: var(--mainColor);
}
.about_tt dt::before,
.about_tt dt::after{
	display: block;
	content: '';
	width: 22px;
	height: 22px;
	background: var(--mainColor);
	border-radius: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}
.about_tt dt::after{
	left: 15px;
	background: var(--midGray);
	z-index: 1;
}
.about_con h3{
	margin-top: 3rem;
	margin-bottom: 2rem;
	color: var(--mainColor); 
	font-size: 1.3vw;
	font-family: var(--normalFont);
}
.about_con p{
	line-height: 2;
	font-size: 1vw;
	color: var(--darkGray);
	font-family: var(--thinFont);
}
.home_about_info{flex-basis: 50%;}
.home_about_cate{
	flex-basis: 50%;
	padding: 1rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.about_item{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	position: relative;
	padding: 2rem;
	width: 47%; 
	margin-left: auto; 
	margin-right: auto;
	margin-bottom: 2rem;
	background: rgba(255,255,255,0.55);	
	border: 1px solid #fff;
	backdrop-filter: blur(3px);
	border-radius: 3rem;
	overflow: hidden;
	transition: all 0.3s ease;
	height: 41vh;
}
.about_item:nth-child(2){
	margin-top:3rem;
}
.about_item:nth-child(3){
	margin-top:-3rem;
}
.about_item:hover{
	background: var(--midGray);
}
.about_item:nth-child(1){
	background: var(--mainColor);
}

	.about_icon svg{
		width: 4vw;
		height: 4vw;
		aspect-ratio:1/1;
		color: #b2b6bc;
		fill: #b2b6bc;
	}
	.about_item h2{
		
		font-size: 1.7vw;
		font-family: var(--boldFont);
		text-transform: uppercase;
		color: var(--darkGray);
	}
	.about_item small{
		font-size: 3rem;
		color: #b2b6bc;
		font-family: var(--boldFont);
	}
	.about_bgIcon{
		position: absolute;
		width: 80%;
		left: 50%;
		top: 50%;
		transform: translateY(-50%);
	}
	.about_bgIcon svg{
		color: rgba(255,255,255,0.06);
		fill: rgba(255,255,255,0.06);
	}
	.about_item:nth-child(1) .about_icon svg,
	.about_item:hover .about_icon svg,
	.about_item:nth-child(1) h2,
	.about_item:hover h2,
	.about_item:nth-child(1) small,
	.about_item:hover small{
		color: #fff;
		fill: #fff;
	}
.about_detail{padding: 5vw 0; display: flex; justify-content: space-between;}
#about .about_text{margin-bottom:2vw; width: 49%;}
#about .about_text h2,
#about_certificate h2,
#about_history h2{margin-bottom: 2vw; font-family: var(--boldFont); font-size: 3vw; color: var(--mainColor); text-align: center;}
#about .about_text h2{text-align: left;}

#about .about_text p{font-size: 1rem; line-height: 1.8; font-family: var(--thinFont);}
.about_factoryImage{width: 49%; overflow:hidden; border-radius: 1vw;}
.about_factoryImage ul{display: flex;}
.about_factoryImage ul li{}
.about_factoryImage ul li img{max-width: 100%;}

#about_certificate,#about_history{padding:3vw 5%; margin-top: 3vw;}
#about_history{
	padding: 6vw 5%;
	background:url("../images/bg_history.webp") no-repeat center center;
	background-size: 100%;
	background-attachment: fixed;
}

#about_history .swiper{overflow: hidden; position: relative; margin-top: 3vw;}
.history_item{position: relative; padding: 3vw 0; text-align: center;}
.swiper-slide-active .history_item{
}
.history_item .line_dot{display: block; position: relative; margin: 1vw 0 1.5vw 0;}
.history_item .line_dot::before{
	content: '';
	width:100%;
	height: 1px;
	background: rgba(255,255,255,0.2);
	display: block;
}
.history_item .line_dot::after{
	content: '';
	width:0.6vw;
	height: 0.6vw;
	background: rgba(255,255,255,0.5);
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 100%;
	transition: all 0.3s ease;	
}
.swiper-slide-active .history_item .line_dot::after{
	width:1.2vw;
	height: 1.2vw;
	background: var(--mainColor);
}


.history_item h4{width: 60%; margin: 0 auto; height: 100px; font-size: 2vw; font-family: var(--normalFont); transition: all 0.4s ease; color: #fff;}
.swiper-slide-active .history_item h4{font-size: 4vw;}
.history_item p{width: 60%; margin: 0 auto; font-size:1rem; font-family: var(--thinFont); line-height: 1.8; color: rgba(255,255,255,0.7)}
.history_item .line_dot{}

#about_history .swiper-button-prev,
#about_history .swiper-button-next{
	width:2vw;
	height: 2vw;
	border-radius: 100%;
	background: none;
	color: #fff;
	fill:#fff;
	transform: rotate(-90deg);
	right: 0;
	left: auto;
}
#about_history .swiper-button-prev{
	left: 0;
	right: auto;
	transform: rotate(90deg);
}
#about_history .swiper-button-prev:hover,
#about_history .swiper-button-next:hover{
	fill:var(--mainColor);
}

.honor_list{
	display: flex;
	flex-wrap: wrap;
}
.honor_list li{
	padding: 1vw;
	width: 20%;
}
.honor_list li img{
	max-width: 100%;
	height: auto;
}


.btn_border{
	display: inline-block; 
	margin-top: 5rem; 
	margin-left: auto; 
	margin-right: auto; 
	padding: 0.6rem 3rem; 
	border:3px solid var(--mainColor); 
	color: var(--mainColor); 
	text-align: center; 
	border-radius: 100px; 
	transition: all 0.3s;
}
.btn_border:hover{
	background: var(--mainColor);
	color: #fff;
}
.floor_more{text-align: center;}

	/*news*/
#home_news{background: url("../images/bg_home_news.jpg") no-repeat center top; background-size: cover;}
#home_news .h_f_tt{margin-bottom:8vh;}
.news_list{display:flex; justify-content: space-between;}
.news_list li{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width:24%; 
	background:rgba(255,255,255,0.7); 
	border-radius:1.5rem; 
	box-shadow: rgba(20, 21, 26, 0.08) 0px 5px 10px 0px; 
	border-top: 5px solid var(--darkGray); 
	transition: all 0.3s ease;
}
.news_list li:hover{border-color: var(--mainColor); background: #fff;}
.news_list h3{margin-top: 10vh; padding:1.6rem; font-size:1.1rem; font-family: var(--normalFont); transition: all 0.3s ease;}
.news_list li:hover h3 a{
	color: var(--mainColor);
}
.news_list p{margin-top:8px; color:rgba(20, 21, 26, 0.6); line-height: 1.8; font-size: 14px;}
.news_list li .news_img{display: block; background: var(--darkGray); border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; overflow: hidden;}
.news_list li img{width:100%; height: auto; max-height: 210px; transition:all 0.3s; opacity: 0.6;}
.news_list li:hover img{opacity: 1;}
.news_tt{display:flex; padding: 1.6rem; justify-content: space-between; align-items: center;}
.news_date{font-size:12px; line-height: 1;}
.news_tt a{display:block; width: 32px; height: 32px; padding: 8px; transition:all 0.3s; border-radius: 5px;}
.news_tt small,
.news_date{
	color:var(--darkGray);
	font-family: var(--thinFont);
	font-size: 14px;
}
.news_list li:hover .news_tt a, .news_tt a:hover{background:#29a674;}
.news_list li:hover .news_tt a svg, .news_tt a:hover svg{fill:#fff;}

	/*footer*/
#main_footer{position: relative; padding-top: 6rem; background:url("../images/bg_footer.jpg") no-repeat; background-size: cover; color: rgba(255,255,255,0.8); font-size: 14px;}
#main_footer::after{
	content: '';
	display: block;
	width: 100%;
	height: 5rem;
	position: absolute;
	top: -2.5rem;
	left: 0;
	background: #d9e2ed;
	border-radius:1.5rem;
	z-index: 1;
}

#main_footer.subpage_footer::after{
	background:var(--subpage_bgColor);
}

.footer_f1, .footer_f2, .footer_f3{display: flex; width:90%; justify-content: space-between; margin: 0 auto;}
.footer_f2{padding:6vh 0; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12);}

.footer_f1{padding-bottom:1.5rem; align-items: center; font-family: var(--normalFont);}
.footer_logo{flex-basis: 30%; display: flex; align-items: center;}
.footer_logo p{padding-left: 1rem; color: rgba(255,255,255,0.5); font-family: var(--thinFont);}
.footer_nav{flex-basis: 70%; display: flex; padding-left: 2rem; justify-content: space-around;}
	.footer_nav a{color: #fff;}
	.footer_nav a:hover{color: var(--mainColor);}
.footer_logo img{flex-basis: 170px; display: inline-block; width: 179px; height: auto;}

.footer_f2{}
.footer_contact{flex-basis: 75%; display: flex; align-items: center;}
.footer_contact li{display: flex; flex-basis: 33%;}
.footer_contact .footer_icon{flex-basis: 2vw;}
.footer_contact .footer_info{flex: 0 0 auto; padding-left: 1rem;}
.footer_contact .footer_info small{font-size: 14px; font-family: var(--thinFont); color: rgba(255,255,255,0.5);}
.footer_contact .footer_info p a{color: var(--lightGray); font-family: var(--normalFont);font-size: 1.5vw;}
.footer_contact .footer_info p a:hover{color: var(--mainColor);}
.footer_contact .footer_icon svg{width: 2rem; color: var(--mainColor); fill:var(--mainColor);}
.ercode_footer{flex-basis:25%; display: flex; justify-content: flex-end;}
.ercode_footer li{padding: 0 1rem;}
.ercode_footer img{max-width:160px; border-radius:5px;}

.footer_f3{padding: 1.5rem 0; align-items: center; font-family: var(--thinFont); color: rgba(255,255,255,0.5);}
.footer_f3 ul{
	display: flex;
}
.footer_f3 ul li{margin-left: 1rem;}
.footer_f3 ul li a{color: rgba(255,255,255,0.5);}
	
	
	/*- subpage -*/
	.banner_ny{position: relative; min-height:620px; background:#212123; border-bottom-left-radius: 1.5vw; border-bottom-right-radius: 1.5vw; overflow: hidden;}
.banner_ny::after{
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%);
	display: block;
	height: 100%;
	width: 100%;
	background: linear-gradient(to top, rgba(0,0,0,0.3) 0, transparent 15%, transparent 100%);
}
.banner_txt{position: absolute; z-index: 2; bottom: 0; text-align:left; padding: 10vh 5%; width: 100%; color: #fff;}
	.banner_txt p{font: bold 4vw/2 var(--normalFont); color: rgba(255,255,255,0.7);}
.banner_s_img img{width: 100%;}
	
	
	
	.subpage_tt{position: relative; z-index: 3; width: 90%; margin: -5vh auto 2rem auto; padding: 2.5vw; background: #fff; border-radius: 1.5vw;}
	.subpage_category ul{display: flex; justify-content: space-around;}	
	.subpage_category li a{display: block; width: 100%; font-size: 1.5vw; font-family: var(--thinFont);}
	
	.db_crumb{clear:both; display: flex; width: 90%; margin: 3vh auto; align-items: center;}
.crumb_icon svg{width: 1rem; height: 1rem;}
	.breadcrumb{display: flex; padding: 15px 0; background: none; font-size: 16px; color:var(--midGray); align-items: center; font-family: var(--thinFont);}
	.breadcrumb li{padding-right: 1rem;}
.breadcrumb li a{color: var(--midGray);}

.db_subpage{background: var(--subpage_bgColor); padding-bottom: 5rem;}
#subpage_product{background:linear-gradient(to bottom, var(--subpage_bgColor), #fff, var(--subpage_bgColor));}
	
	.subpage_con{width: 90%; margin: 3vh auto;}
	#subpage_product .subpage_con{margin-top: 0;}
	.products_list{display: flex; flex-wrap: wrap; justify-content: space-between;}
	.products_list li{
		position: relative;
		margin-bottom:2vw; 
		padding: 2vw; 
		width: 32%; 
		border-radius: 1vw; 
		transition: all 0.3s ease; 
		background: #f0f0f0; 
		transition: transform .5s cubic-bezier(.38, 0, 0, 1), box-shadow .5s cubic-bezier(.38, 0, 0, 1), background 0.4s ease;		
	}
.pagination{display:flex; justify-content: center; margin: 2rem auto;}
.pagination li{margin: 0 2px;}
.pagination li a{display: block; width: 1.5vw; height: 1.5vw; border-radius: 5px; background: #fff; text-align: center; line-height: 1.5vw;}
.pagination li a:hover{
	background: var(--mainColor);
	color: #fff;
}
.products_list .btn_circle svg{color: #fff; fill:#fff;}
	.products_list li:hover{transform: translateY(-1rem); box-shadow: 0 .7rem 1.4rem rgba(0, 0, 0, .16); background: rgba(255,255,255,0.85); backdrop-filter: blur(5px);}
	.products_list li img{max-width: 100%; width: 65%; display: block; margin: 0 auto;}
.products_list .btn_circle{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 5rem;
	height: 5rem;
	padding: 1.5rem;
	background: var(--mainColor);
	color: #fff;
	border-radius: 100%;
	opacity: 0;
	transition: all 0.3s ease;
}
.products_list li:hover .btn_circle{
	transform: translate(-50%, -50%) rotate(-90deg);
	opacity: 1;
}
.products_list .p_txt_box{text-align: center;}
.products_list .p_txt_box h2{font: normal 1.5vw var(--normalFont);}
	
.product_subpage_main{display: flex; width: 90%; margin-left: auto; margin-right: auto; align-items: center;}
		.product_subpage_image, .product_txt{flex-basis: 50%; position: relative; z-index: 2;}
		.product_txt h2{margin-bottom: 1rem; font: bold 3vw/2 var(--boldFont); align-self: center; color: #fff;}
		.product_txt .txt_summary{margin-bottom: 1rem; font-size: 16px; border-radius: 0.3vw; color: rgba(255,255,255,0.8); font-family: var(--thinFont);}
.product_parameter{
	display: flex; 
	flex-wrap: wrap;
	padding: 2vw;
	border-radius: 1vw;
	background: #fff;
}
		.product_parameter li{
			width: 50%;
			display: flex; 
			padding-bottom: 1rem; 
			margin-bottom: 1rem; 
			font-size: 16px; 
			border-bottom: 1px solid #f0f0f0;
}
.product_parameter li p{
	color: var(--midGray);
}
.product_area{padding-top: 16vh; background: var(--subpage_bgColor) url(../images/bg_home_banner.jpg) no-repeat center top; background-size:cover; border-bottom-left-radius: 1.5vw; border-bottom-right-radius: 1.5vw;}

.product_area .db_crumb{margin-bottom:0; color:rgba(255,255,255,0.7);}
.product_area .breadcrumb li,
.product_area .crumb_icon,
.product_area .db_crumb li a{color:rgba(255,255,255,0.7); fill:rgba(255,255,255,0.7);}
.product_subpage_image{position: relative; text-align: center;}
.product_subpage_image::before,
.product_subpage_image::after{     
	content: '';
    position: absolute;
    left: 50%;
    top: 0%;
    width: 60%;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    border: 1px solid var(--alphaWhite);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.product_subpage_image::before {
    width: 110%;
    border: 10vw solid var(--mainColor);
}
.product_subpage_image img{
	position: relative;
	z-index: 2;
}

.pager{width:90%; margin: 0 auto; display: flex; justify-content: space-between; font-family: var(--thinFont); font-size: 14px;}
.btn{display: inline-block; padding: 1rem 2rem; margin: 1rem 1rem 0 0; border-radius: 10px; background: rgba(0,0,0,0.3); color: #fff;}


.product_detail{font-family:var(--thinFont);}
		.product_parameter li a{margin-right: 1rem;}
		.product_btn{margin-top: 3rem;}
		.product_btn .btn{padding: 1rem 2rem; margin-right: 1rem; border-radius: 10px; background: rgba(0,0,0,0.3); color: #fff;}	
	.product_detail_tt{margin-bottom: 2rem; padding: 2rem 0; border-bottom: 1px solid #eee; font:bold 1rem/2 var(--normalFont); }
	
	.news_detail_tt{margin: 1rem 0 2rem 0; padding-bottom: 2rem;}
		.news_detail_tt h2{margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #eee; font: normal 2rem/1.2 var(--normalFont); text-align: left;}
		.news_tt_info{font-size: 14px; color: #888; font-family: var(--thinFont);}
	.news_detail_con{padding: 3vw 0; font-family: var(--thinFont); line-height: 1.8; max-width: 1200px;}

#news .news_list{
	display:block;
}
#news .news_list li{
	width: 100%;
	border-top: 0;
	margin-bottom: 3vw;
	background: transparent;
	box-shadow: none;
}
#news .news_list li a{
	display: flex;
	justify-content: space-between;
}
#news .news_list li a::before,
#news .news_list li a::after{display: none;}

#news .news_list li img{
	border-radius: 1.5vw;
	opacity: 1;
}

#news .n_txt_box{display: flex; width: 74%; padding: 2vw; background: #fff; border-radius: 2vw; align-items: center;}
#news .n_pic_box{width: 25%; border-radius: 2vw;}
#news .news_list h3{margin-top: 0; padding: 0; width: 80%; font-size: 1.2vw; font-family: var(--thinFont);}
#news .n_txt_box small{display: block; width: 20%; font-size: 1vw; font-family: var(--thinFont); color: var(--midGray); text-align: center;}

#application .db_crumb{margin-top: 0;}
.application_list li{
	display: flex;
	margin-bottom: 2vw;
	justify-content: space-between;
	align-items: center;
}
.application_list li:nth-child(even){
	flex-direction:row-reverse;
}
.app_list_info,.app_list_pic{width: 49%;}
.app_list_pic img{max-width: 100%; border-radius: 1.5vw; transition: all 0.3s ease;}
.app_list_pic:hover img{
	transform: scale(1.04);
}
.app_list_info h3{font-size: 3vw; font-family: var(--normalFont);}
.app_list_info h4{font-size: 1.5vw; font-family: var(--thinFont); color: var(--mainColor);}
.app_list_info p{margin-top: 2vw; font-size: 1rem; line-height: 1.6; color: var(--midGray); font-family: var(--thinFont);}
	
#contact .subpage_con{
	padding: 5vw 0;
	background: var(--subpage_bgColor) url("../images/bg_contact.webp") no-repeat center center;
	background-size: 100%;	
}
.contact_list li{
	min-height: 10rem;
	padding: 1.5vw;
	border-radius: 1.5vw;
	background: rgba(255,255,255,0.85);
	width: 38vw;
	margin-top: -4rem;
}
.contact_list li:nth-child(1){background: none; font-size: 3vw; font-family: var(--normalFont);}

.contact_list li:nth-child(even){
	margin-left: auto;
	margin-right: 0;
}
.contact_list li h3{margin-bottom: 1vw; font-size: 2vw; font-family: var(--thinFont); color: var(--mainColor);}

.contact_item{
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-bottom: 1vw;
}
.contact_icon{ }
.contact_icon a{display: block; width: 3vw; height: 3vw; padding: 1vw; background: var(--lightGray); color: var(--mainColor); border-radius: 100%; transition: all 0.4s ease;}
.contact_item:hover .contact_icon a,
.contact_item .contact_icon a:hover{background: var(--mainColor);}
.contact_icon svg{fill:var(--contrastColor); transition: all 0.4s ease;}
.contact_item:hover .contact_icon svg{fill:#fff;}

.contact_item h4{padding:0.5vw 0;}
.contact_item div{font-size: 1vw; font-family: var(--thinFont); color: var(--midGray);}
.contact_list li dt,.contact_item h4{font-size: 1rem; font-family: var(--normalFont); padding-bottom: 0;}
.contact_list li dt{margin-bottom: 0.5rem;}
.contact_ercode > div{display:flex;}
.contact_ercode > div dl{margin-right: 1rem;}
.contact_ercode img{max-width: 160px;}
.contact_media{margin-top: 5rem; display: flex; justify-content: space-between;}
.contact_media .media_box:hover .contact_icon a{background: #51637b;}
.contact_media .media_box:hover .contact_icon svg{fill:#fff;}

.contact_list li dd a{color: var(--midGray);}
	

	.about_floor{margin: 1rem 0 2rem 0; padding-bottom: 1rem;}
	.about_floor_tt{padding:1rem 0; border-bottom: 1px solid #eee; text-align: center; font: bold 2rem/2 var(--normalFont);}
	.about_floor_tt small{display: block; margin-top: 8px; font:normal 14px/2 "arail";}
	.about_con{}
		.about_con td{padding:10px;}

/* ipad */
@media screen and (min-width:767px) and (max-width:1024px){}

/* Phone */
@media screen and (max-width: 767px){	
	
	.header_wrapper{		
		padding: 0 10px;
		width: 100%;
		top: 5px;
	}
	.nav_main{display: flex; width:100%; height: 60px; align-items: center; justify-content: space-between; }
	.nav_left{flex: 0 0 30%; max-width: 30%;}
	.header_wrapper .nav_left a img{max-width:100%;}
	
	.header_wrapper #navToggle {
		flex: 0 0 auto;
		height: 100%;
		padding: 9px 5px;
		display: block;
		position: relative;
		z-index: 99999;
		cursor: pointer;
	}	
	.header_wrapper #navToggle span {
		position: relative;
		width: 25px;
		height: 1px;
		margin-top: 19px;
	}
	.header_wrapper #navToggle span:before,
	.header_wrapper #navToggle span:after {
		content: '';
		position: relative;
		width: 100%;
		height: 1px;
		left: 0;
	}
	.header_wrapper #navToggle span,
	.header_wrapper #navToggle span:before,
	.header_wrapper #navToggle span:after {
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		-o-transition: 0.3s;
		transition: 0.3s;
		display: block;
		background: #fff;
	}
	
	.header_wrapper.on #navToggle span,
	.header_wrapper.on #navToggle span:before,
	.header_wrapper.on #navToggle span:after {
		background: #333;
	}
	
	.header_wrapper #navToggle span:before {
		top: 8px;
	}
	.header_wrapper #navToggle span:after {
		bottom: 10px;
	}
	.header_wrapper #navToggle.open span:before {
		top: 10px;
		-webkit-transform: translateY(-11px) rotate(-45deg);
		-moz-transform: translateY(-11px) rotate(-45deg);
		-ms-transform: translateY(-11px) rotate(-45deg);
		-o-transform: translateY(-11px) rotate(-45deg);
		transform: translateY(-11px) rotate(-45deg);
	}
	.header_wrapper #navToggle.open span:after {
		bottom: 12px;
		-webkit-transform: translateY(10px) rotate(45deg);
		-moz-transform: translateY(10px) rotate(45deg);
		-ms-transform: translateY(10px) rotate(45deg);
		-o-transform: translateY(10px) rotate(45deg);
		transform: translateY(10px) rotate(45deg);
	}
	.header_wrapper #navToggle.open span {
		background: none;
	}
	.header_wrapper #navToggle.open span:before,
	.header_wrapper #navToggle.open span:after {
		background: #fff;
	}
	.header_wrapper.on #navToggle.open span:before,
	.header_wrapper.on #navToggle.open span:after {
		background: #333;
	}
	
	.header_wrapper .nav,.header_more{
		display: none;
	}
	
	
	.m_nav{
		display: block;
		position: fixed;
		top: 60px;
		box-shadow: 0 15px 27px 0 rgba(167,165,165,0.38);
		width: 100%;
		height: 100%;
		background: #fff;
		transition: all ease 0.5s;
		-webkit-transition: all ease 0.5s;
		z-index: 1000;
		opacity: 0;
		visibility: visible;
		margin-top: 0;
		overflow-y: auto;
		transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms;		
		transform: translateX(100%);
	}
	.m_nav.open{
		transform: translateX(0);
		opacity: 1;
	}
	.m_nav .top{
		height: 60px;
		padding: 20px;
		box-sizing: border-box;
	}
	.m_nav .top .closed{
		width: 30px;
		height: 30px;
		vertical-align: middle;
		float:right;
		cursor: pointer;
	}
	.m_nav .logo{
		width: 100%;
		margin:0 auto;
	}
	.m_nav .logo img{
		height: 50px;
		display: block;
		margin:30px auto;
	}
	.m_nav .ul{
		margin-top: 30px;
	}
	.m_nav .ul li{
		padding: 0 20px;
		border-bottom: 1px solid #f5f5f5;
		transform: translateY(0);
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
		-webkit-transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms;
		transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms;
		opacity: 0;
	}
	.m_nav.open .ul li{
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	.m_nav .ul li:nth-child(1) {
		-webkit-transition: all .2s cubic-bezier(.77, 0, .175, 1) 0ms;
		transition: all .2s cubic-bezier(.77, 0, .175, 1) 0ms;
	}
	.m_nav .ul li:nth-child(2) {
		-webkit-transition: all .4s cubic-bezier(.77, 0, .175, 1) 0ms;
		transition: all .4s cubic-bezier(.77, 0, .175, 1) 0ms;
	}
	.m_nav .ul li:nth-child(3) {
		-webkit-transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms;
		transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms;
	}
	.m_nav .ul li:nth-child(4) {
		-webkit-transition: all .8s cubic-bezier(.77, 0, .175, 1) 0ms;
		transition: all .8s cubic-bezier(.77, 0, .175, 1) 0ms;
	}
	.m_nav .ul li:nth-child(5) {
		-webkit-transition: all 1.0s cubic-bezier(.77, 0, .175, 1) 0ms;
		transition: all 1.0s cubic-bezier(.77, 0, .175, 1) 0ms;
	}
	.m_nav .ul li:nth-child(6) {
		-webkit-transition: all 1.2s cubic-bezier(.77, 0, .175, 1) 0ms;
		transition: all 1.2s cubic-bezier(.77, 0, .175, 1) 0ms;
	}
	.m_nav .ul li a{
		display: block;
		text-decoration: none;
		color: #333;
		font-size: 14px;
		height: 50px;
		line-height: 50px;
		width: 100%;
	}
	.m_nav .ul li .dropdown_menu{
		display: none;
	}
	.m_nav .ul li.dropdown.active .dropdown_menu{
		display: block;
	}
	.m_nav .ul li .dropdown_menu a{
		display: block;
		height: 50px;
		line-height: 50px;
		padding: 0 40px;
		box-sizing: border-box;
		border-bottom: 1px solid #f5f5f5;
	}
	.m_nav .ul li .dropdown_menu a:last-child{
		border: none;
	}
	
	.banner_content{display:block;}
	.banner_info{display: block; margin-top: -13rem;}
	.banner_img{margin-top: 12rem;}
	.banner_img img{width:100%;}
	.feature{margin-top: -40%;}
	.feature_list{max-width:100%;}
	.feature p{font-size:12px;}
	
	.cate_list li a{font-size:13px;}
	#scroller_product{flex-direction: column;}
	#scroller_product #bigP{width:100%;}
	#scroller_product #bigP .swiper-slide{flex-direction: column-reverse;}
	
	.h_f_tt{width:99%;}
	.home_floor{padding-bottom: 1rem;}
	.tt_info p{color:var(--midGray); font-size:13px;}
	
	.product_image{margin-left: auto; width: 100%;}
	.product_info{position:relative; width: 100%;margin-top: -2rem; z-index: 2;}
	.product_info h3{font-size:4vw; margin-bottom: 1rem;text-align: center;}
	.product_info ul li::before, .product_info ul li::after{width:5px; height: 5px;}
	.product_info ul li{font-size: 12px;}
	.product_info .btn_more{margin-top: 1rem; max-width: 120px; font-size: 12px; padding: 5px; border-width: 2px;}
	
	#scroller_product #smallP{width:100%; height: 80px;}
	#smallP .swiper-container-vertical>.swiper-wrapper{flex-direction: row;}
	#smallP .swiper-button-next, #smallP .swiper-button-prev{margin-top:-8px; width: 24px; height: 24px;left: 0; transform: translate(0, -50%) rotate(0deg); top: 50%;}
	#smallP .swiper-button-next{left:auto; right: 0; transform: translate(0, -50%) rotate(360deg);}
	#smallP .product_box{width:60px;height: 60px;}
	
	#home_application{min-height:auto;}
	#home_application .h_f_con{flex-wrap: wrap;}
	.application_item{margin-top:auto; width:49%;}
	.application_item:nth-child(1), .application_item:nth-last-child(1){margin-top:auto;}
	.app_img img{max-width:100%;}
	.app_tt p{font-size:11px;}
	.app_tt h2{font-size:3vw;}
	
	#home_about{padding:3rem 0;}
	.home_about_main{flex-direction:column;}
	.about_tt dt{font-size:3vw;}
	.about_tt dd h2{font-size:7vw;}
	.about_con h3{margin-top:1rem; margin-bottom:1rem; font-size: 3vw;}
	.about_con p{font-size:2.2vw;}
	.btn_border{margin-top:2rem; padding: 0.6rem 1rem; font-size: 12px; border-width: 2px;}
	.home_about_cate{padding:1rem 0;}
	.about_item{height: 22vh;}
	.about_icon svg{width:7vw; height: 7vw;}
	.about_item h2{font-size:3vw;}
	.about_item small{font-size:1rem;}
	
	.news_list{display: block;}
	.news_list li{width:100%; margin-bottom:1rem;}
	.news_list h3{margin-top:0;}
	
	.footer_f1, .footer_f2, .footer_f3{
		flex-direction:column;
	}
	.footer_logo{display: block; text-align: center;}
	.footer_logo p{padding-left:0;}
	.footer_nav{display: none;}
	.footer_f2{padding:2vh 0;}
	.footer_contact{flex-direction:column; margin-bottom: 2vh;}
	.footer_contact .footer_info{padding-left:5px;}
	.footer_contact .footer_info small{font-size:12px;}
	.footer_contact .footer_info p a{font-size:3vw;}
	.footer_contact .footer_icon{flex:0 0 auto;}
	.footer_contact .footer_icon svg{width:4vw;}
	.footer_contact li {width: 100%;}
	.ercode_footer {justify-content: center;}
	.ercode_footer img{max-width:160px;}
	.footer_f3 {font-size: 12px;}
	
	.banner_ny{min-height:auto;}
	.banner_txt{padding: 2vh 5%;}
	.subpage_tt{margin-top:-1.5vh; margin-bottom: 0;}
	.subpage_category li a{font-size:2.5vw;}
	.db_crumb{margin: 1vh auto;}
	.breadcrumb{padding:5px 0; font-size:12px;}
	.products_list li{width:49%;}
	.products_list .p_txt_box h2{font-size:3vw;}
	
	.product_subpage_image::before, .product_subpage_image::after{
		top: 0%;
		left: 4%;
		width:60%;
	}
	.product_subpage_image::before{width:80%;}
	.product_subpage_image img{max-width: 85%;}
	.product_subpage_main{flex-direction: column;}
	.product_area{padding-top:6vh;}
	.product_txt h2{font-size:5vw; margin-bottom:1vw;}
	.product_txt .txt_summary{font-size:13px;}
	.product_btn{margin-top:1rem;}
	.product_btn .btn{font-size:13px;}
	.product_detail_tt{padding:2vh 0; margin-bottom:1vh;}
	.product_parameter li{font-size:13px;}
	
	#contact .subpage_con{padding:0;}
	.contact_list li:nth-child(even){margin-left:0; margin-right:auto;}
	.contact_list li{margin-top:0; margin-bottom:1rem; width:100%; min-height:auto;}
	.contact_list li:nth-child(1){height:auto; min-height:auto;}
	.contact_list li h3{font-size:3vw;}
	.contact_list li dt, .contact_item h4{font-size:10px;}
	.contact_item{margin-bottom:2vh;}
	.contact_item div{font-size:4vw;}
	.contact_icon a{width: 8vw; height: 8vw; padding: 5px;}
	.contact_media{margin-top: 1rem;}
	
	.about_detail{display:block; padding:0;}
	#about .about_text,.about_factoryImage{width:100%;}
	#about .about_text h2, #about_certificate h2, #about_history h2{font-size: 4vw;}
	#about .about_text p{font-size:13px;}
	#about_history{background:#010004 url(../images/bg_history_m.webp) no-repeat center center; background-size: cover;}
	.history_item h4{width:100%;font-size: 4vw;height: 45px;}
	.history_item p{width:100%;font-size:13px;}
	
	.application_list li,.application_list li:nth-child(even){flex-direction: column; margin-bottom: 3rem;}
	.app_list_info, .app_list_pic{width:100%;}
	.app_list_info h3{font-size:4vw;}
	.app_list_info h4{font-size:3vw;}
	.app_list_info p{font-size:13px;}
	.application_list .btn{padding: 0.8rem; font-size: 13px;}
	
	#news .n_txt_box{align-items: flex-start; flex-direction: column;}
	#news .news_list h3{font-size:4vw;}
	#news .n_txt_box small{margin-top:10px; text-align:left; font-size: 12px; width: 100%; font-family: arail; color: rgba(0,0,0,0.5);}
	#news .news_list li a{flex-direction: column;}
	#news .n_pic_box,#news .n_txt_box{width:100%;}
	.news_detail_tt h2{font-size:1.2rem;}
	.news_tt_info{font-size:12px; font-family: 'Arail';}
	.news_detail_tt{padding-bottom:0;}
	.news_detail_con{font-size:13px;}
	.pager{flex-direction: column; font-size: 12px; font-family: 'Arail';}
	.pager .previous{margin-bottom: 1rem;}
	
	.ercode_footer img{max-width:100%;}
	
	.video_list{display: flex; flex-wrap: wrap; flex-direction: column;}
	.video_item{width:100%;margin-bottom: 3vh;}
	.video_item img{max-width:100%;}
	.video_item h3{font-family: var(--normalFont); font-size: 1rem;}
	
	.contact_ercode img{max-width: 130px;}
}