@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: #687a90;
	--mainColor: #f08519;
	--lightGray:#edeff3;
	--darkGray: #182636;
	--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: 250%;
    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; 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;
	
}

/*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;}
.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: 200%;
	height: 200%;
}
.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;
	}
.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{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;
}
.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;}

.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; height:320px; background:#6b6f7d url(../images/banner_about.jpg) no-repeat center top;}
	.banner_about{}
	.banner_news{background-image:url(../images/banner_news.jpg);}
	.banner_product{background-image:url(../images/banner_product.jpg);}
	.banner_service{background-image:url(../images/banner_service.jpg);}
	.banner_case{background-image:url(../images/banner_case.jpg);}
		.banner_txt{position: absolute; top: 50%; text-align:center; width: 100%; color: #f2f2f2;}
		.banner_txt h3{font: bold 2rem/2 var(--normalFont);}
	
	.db_subpage{padding-bottom: 5rem;}
	
	.subpage_tt{height:80px; background: #f3f6f9;}
	.subpage_category{}
		.subpage_category li{float: left; margin-top: 25px;}
			.subpage_category li a{display: block; width: 100%; padding: 5px 2rem; border-left: 1px solid #d8dadd;}
	
	.db_crumb{clear:both;}
	.breadcrumb{padding: 15px 0; background: none; border-bottom: 1px solid #e1e3e6; font-size: 14px;}
	
	.subpage_con{padding-top:3rem; padding-bottom:3rem;}
	.product_area,
	.product_detail,
	.product_img{margin-bottom: 3rem;}
		.product_img{}
		.product_txt h2{margin-bottom: 1rem; font: bold 2rem/2 var(--normalFont);}
		.product_txt .txt_summary{margin-bottom: 1rem; padding: 1rem; font-size: 14px; background: #f9f9f9; border-radius: 3px; color: #888;}
		.product_txt ul li{padding-bottom: 1rem; margin-bottom: 1rem; font-size: 14px; border-bottom: 1px solid #f0f0f0;}
		.product_txt ul li a{margin-right: 1rem;}
		.product_btn{margin-top: 3rem;}
		.product_btn .btn{padding-left: 2rem; padding-right: 2rem; margin-right: 1rem;}
	.product_detail_tt{margin-bottom: 2rem; padding-bottom: 1rem; 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/2 var(--normalFont); text-align: center;}
		.news_detail_tt .fl,.news_detail_tt .fr{font-size: 14px; color: #888}
	.news_detail_con{margin-bottom: 3rem;}
	
	
	.contact_detail{margin-bottom: 1rem;}
	.contact_txt h2{padding-bottom: 1rem; margin-bottom: 2rem; font: bold 2rem/2 var(--normalFont); border-bottom:1px solid #eee;}
		.contact_txt h2 small{display: block; font:normal 0.8rem/1.2 "arail"; text-transform: uppercase;}
	.contact_info li{margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed #eee;}
		.contact_info b{font-weight: bold;}
	.contact_img{text-align: right;}

	.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;
	}
	.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 15px;
		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;
	}
}