﻿/*pad*/

.hs-num {
	float: right;
	height:46px;
	width: 56px;
	right: 30px;
	top: 0;
	position: absolute;
	transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	-webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	-ms-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	cursor: pointer;
	z-index: 9999;
	display: none;
}

.selected .hs-num {
	transform: rotate(90deg);
}

.hs-num a {
	background-color: #000;
	display: block;
	height: 4px;
	margin-top: -2px;
	position: relative;
	top: 50%;
	transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	-webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	-ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	width: 100%;
	border-radius: 2px;
}

.hs-num a:after,
.hs-num a:before {
	background-color: #000;
	content: "";
	display: block;
	height: 4px;
	left: 0;
	position: absolute;
	transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	-webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	-ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	width: 100%;
	border-radius: 2px;
}

.hs-num a:after {
	top: 14px;
}

.hs-num a:before {
	top: -14px;
}

.selected .hs-num a:after,
.selected .hs-num a:before {
	top: 0;
}

.selected .hs-num a:before {
	transform: translateY(0px) rotate(-45deg);
	-webkit-transform: translateY(0px) rotate(-45deg);
	-ms-transform: translateY(0px) rotate(-45deg);
	background: #000;
}

.selected .hs-num a:after {
	transform: translateY(0px) rotate(45deg);
	-webkit-transform: translateY(0px) rotate(45deg);
	-ms-transform: translateY(0px) rotate(45deg);
	background: #000;
}

.selected .hs-num a {
	background-color: transparent !important;
}

.selected .header {
	overflow: visible;
}

.selected .header .nav {
	display: block;
	z-index: 111;
	position: absolute;
	left: 0;
	top: 80px;
	right: 0;
	margin: 0;
}

.selected .header .nav li a {
	text-align: center;
	width: auto;
	display: block;
	background: #000;
	margin: auto;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	line-height: 50px;
	padding: 0;
}

.selected .header .nav li a {
	color: #000000;
}

.selected .header .nav .selected a {
	border-bottom-color: #ffbc20;
}

@media only screen and (max-width:1660px) {
	.header .naver li{
		margin: 0 10px;
	}
	.header .wrap{
		width:1200px ;
	}
	.header{
		padding: 0;
	}
}
@media only screen and (max-width:1220px) {
	.wrap{
		width: auto;
	}
	.layout{
		width: 750px;
		margin: 0 auto;
		background: #fff;
		position: relative;
		overflow: hidden;
		padding-top: 99px;
	}
	.l_banner{
		height: 240px;
	}
	body{
		background: #333;
	}
	.header{
		width: 750px;
		margin: 0 auto;
		height: 100px;
	}
	.header .naver .ph {
		display: none;
	}
	.header .naver{
		float: none;
		position: absolute;
		left: 0;
		right: 0;
		top:100px;
		background: #fff;
		display: none;
	}
	.header .naver li{
		float: none;
		margin: 0;
	}
	.header .naver ul{
		float: none;
	}
	.header .naver li a{
		display: block;
		font-size: 32px;
		line-height: 88px;
		padding: 0 30px;
		position: relative;
	}
	.header .naver li a span{
		position: absolute;
		right: 0;
		top: 0;
		height: 88px;
		width: 88px;
		background: url(../images/x.png) no-repeat center;
		background-size: 50% auto !important;
		display: block;
		z-index: 11;
		transition: all 0.3s;
	}
	.header .naver li a span.on{
		transform: rotate(180deg);
	}
	.header .naver li:hover a i {
	    width:0;
	}
	.header .naver li dl{
		position: static;
		width: auto;
		transform: scale(1);
		padding: 0;
	}
	.header .naver li dd a{
		font-size: 28px;
		line-height: 78px;
		text-align: left;
		padding: 0 50px;
	}
	.hs-num{
		display: block;
		left: auto;right: 30px;
		top: 30px;
		position: absolute;
		z-index: 111;
	}
	.header .logo{
		margin: 15px 30px 0;
	}
	.banner li{
		height: 420px;
	}
	.banner li .text{
		padding: 0 30px;
	}
	.banner li p{
		margin-top:20px;
	}
	.banner li h2{
		font-size: 46px;
	}
	.banner .ban_hds span{
		margin: 0 5px !important;
	}
	.h_about{
		padding: 40px 30px;
	}
	.title h2{
		font-size: 32px;
	}
	.title p{
		font-size: 22px;
		line-height: 1.6;
	}
	.more a{
		font-size: 26px;
		line-height: 2;
	}
	.ca_swiper{
		margin: 0 30px;
	}
	.swiper-pagination-bullet{
		width: 15px;
		height: 15px;
		background: #000;
		margin: 0 5px !important;
	}
	.swiper-container-horizontal>.swiper-pagination-bullets{
		text-align: center;
	}
	.swiper-pagination-bullet-active{
		background: #ee0000;
	}
	.h_case{
		padding: 40px 30px;
	}
	.h_case li .imgs{
		height: 532px;
	}
	.h_case li h4{
		font-size: 26px;
		line-height: 88px;
	}
	.footer .f_nav{
		display: none;
	}
	.h_news{
		padding: 40px 30px;
	}
	.h_news .lts .imgs{
		float: none;
		width: auto;
		height: auto;
	}
	.h_news .lts{
		float: none;
		width: auto;
	}
	.h_news .lts .text{
		width: auto;
	}
	.h_news .rts{
		width: auto;
		float: none;
	}
	.h_fuw {
		padding: 40px 30px;
	}
	.h_fuw .title h2 {
		font-size: 32px;
	}
	.h_fuw li .imgs {
		height: 255px;
	}
	.h_fuw li .imgs:hover img {
		transform: scale(1);
	}
	.h_news .bd{
		margin: 30px 0;
	}
	.h_fuw li h5 {
		font-size: 28px;
		line-height: 54px;
	}
	.h_fuw li p {
		font-size: 22px;
		line-height: 38px;
	}
	.ca_hd {
		margin: 50px auto 0;
	} 
	.h_fuw .more {
		margin-top: 10px;
	}
	.h_news .lts .text p {
		font-size: 26px;
		line-height: 42px;
		height: 84px;
	}
	.h_news .lts .text h6 {
		font-size: 24px;
		line-height: 38px;
		height: 120px;
	}
	.h_news .lts .text {
		float: none;
		height: 290px;
		margin: 30px 0;
	}
	.h_news .rts {
		height: auto;
	}
	.h_news .rts li a {
		font-size: 24px;
		padding-left: 26px;
		line-height: 40px;
		width: 470px;
	}
	.h_news .rts li i {
	    font-size: 24px;
	    line-height: 40px;
	}
	.footer {
		padding: 40px 30px;
	}
	.footer .f_rt {
		float: none;
		width: auto;
	}
	.footer .f_rt dl {
		float: none;
		width: auto;
	}
	.footer .f_rt dt {
	    font-size: 32px;
	    line-height: 54px;
	    margin-bottom: 14px;
	}
	.footer .f_rt dd {
	    font-size: 24px;
	    line-height: 42px;
	}
	.footer .f_rt .wx {
		float: none;
		width: 180px;
		margin-top: 20px;
	}
	.footer .f_rt .wx .img {
		height: 180px;
	}
	.footer .f_rt .wx h5 {
	    font-size: 22px;
	    line-height: 35px;
	}
	.crum {
		padding: 0 30px;
		height: auto;
	}
	.crum li span{
		font-size: 24px;
		line-height: 66px;
	}
	.crum li a{
		font-size: 24px;
		line-height: 66px;
	}
	.l_naver li a {
		font-size: 26px;
		line-height:80px;
	}
	.l_naver {
		border-bottom: none;
	}
	.case_list {
		padding: 40px 30px;
	}
	.l_naver ul{
		border-bottom:  1px solid #cccccc;
		white-space: nowrap;
		overflow-x: scroll;
	}
	.l_naver li {
		margin: 0;
		border: none;
		float: none;
		display: inline-block;
		margin-right: 30px;
	}
	.case_list .list .c_tit h2 span {
		font-size: 28px;
		line-height: 104px;
	}
	.case_list .list .c_tit h2 span::after,
	.case_list .list .c_tit h2 span::before {
		height: 2px;
	}
	.case_list .list li .imgs {
		height: 300px;
	}
	.case_list .list ul{
		margin-bottom: 20px;
	}
	.case_list .ca_hd{
		display: none;
	}
	.case_list .list li h4 {
		font-size: 22px;
		line-height: 70px;
		height: 70px;
		background-size: 30px auto !important;
	}
	.case_list .list li{
		width: calc((100% - 20px)/2);
		margin-right: 0;
		margin-bottom: 20px;
	}
	.case_list .list li:nth-child(2n){
		margin-right: 0;
		float: right;
	}
	.case_list {
		margin-bottom: 20px;
		padding-top: 100px;
	}
	.case_datile .wrap {
		padding: 40px 30px;
	} 
	.case_datile .hd {
		padding: 0 0 40px;
	}
	.case_datile .hd .imgs {
		float: none;
		width: auto;
		height: auto;
		border: 2px solid #d2d2d2;
	}
	.case_datile .hd .imgs:hover img {
		display: block;transform: scale(1);
	}
	.case_datile .hd .rts {
		float: none;
		width: auto;
	}
	.case_datile .hd .rts h2 {
		font-size: 38px;
		line-height: 74px;
	}
	.case_datile .hd .rts p {
	    font-size: 24px;
	    color: #000;
	    line-height: 40px;
	}
	.case_datile .hd .rts .btn {
		margin-top: 30px;
	}
	.case_datile .hd .rts .btn a {
		background-size: 60px auto !important;
		font-size: 24px;padding-left: 70px;
		line-height: 60px;
	}
	.l_naver {
		margin:20px 0;
		width: auto;
		padding: 0 30px;
	}
	.case_datile .bd {
		padding: 40px 0;
	}
	.case_datile .bd h2 {
	    font-size: 30px;
	    line-height: 54px;
	    margin-bottom: 6px;
	}
	.case_datile .bd p {
	    font-size: 22px;
	    line-height: 38px;
	    color: #000;
	    margin-bottom: 28px;
	}
	.g_case li {
		width: calc((100% - 20px)/2);
		margin-right: 0px;
		margin-bottom: 30px;
	}
	.g_case li:nth-child(2n) {
		float: right;
	}
	.g_case {
		padding: 40px 30px;
	}
	.g_case li h4 {
		font-size: 20px;
		line-height: 70px;
		height: 70px;
	}
	.g_dateils {
		padding: 40px 30px;
	}
	.g_dateils h2 {
	    font-size: 32px;
	    line-height: 1.6;
	    padding: 20px;
	}
	.g_dateils .text {
	    font-size: 22px;
	    line-height: 38px;
	}
	.g_dateils .f_bt {
		margin: 40px 0 30px;
	}
	.g_dateils .f_bt a {
		float: none;display: block;width: auto;font-size: 22px;height: 64px;
		word-break: keep-all;
    	white-space: nowrap;
    	overflow: hidden;
    	text-overflow: ellipsis
	}
	.g_dateils .f_bt a:nth-child(2n) {
		float: none;
	}
	.abouts {
		padding: 40px 30px 60px;
	}
	.abouts .text {
		float: none;
		width: 100%;
	}
	.abouts .text h2 {
	    font-size: 34px;
	    color: #000;
	    line-height: 56px;
	    margin-bottom: 6px;
	}
	.abouts .text p {
	    font-size: 24px;
	    line-height: 40px;
	}
	.abouts .imgs {
		float: none;
		width: auto;
		height: auto;
		margin: 0;
		margin-bottom: 20px;
	}
	.a_das .prev, .a_das .next {
		width: 50px;height: 30px;
		background-size: 30px auto !important ;
		bottom: -10px;
	}
	.a_das .prev {
		top: -10px;
	}
	.a_das .swiper_da li h2 {
	    font-size: 32px;
	    line-height: 42px;
	}
	.a_das .swiper_da li .txt {
		background-size: 50px auto !important;
		background: url(../images/icon8.png) no-repeat right top 10px;
	}
	.a_das .swiper_da li:nth-child(2n+1) .txt {
	    background: url(../images/icon9.png) no-repeat left top 10px;
	}
	.a_das .swiper_da li {
		height: 150px;
	}
	.a_das .swiper_da li p {
	    font-size: 24px;
	    line-height: 36px;
	    color: #000;
	    height: 110px;
    	overflow: hidden;
    	text-overflow: ellipsis
	}
	.a_das {
		padding: 60px 30px;
	}
	.a_join {
		padding: 40px 30px;
	}
	.a_join h2 p {
	    float: left;
	    width: 380px;
	    font-size: 26px;
	    line-height: 90px;
	    height: 90px;
	}
	.a_join h2 span {
		font-size: 24px;
		background-size: 25px auto !important;
		padding-right: 44px;
		line-height: 90px;
	}
	.a_join .bd {
		font-size: 24px;
		line-height: 40px;
		margin-top: 20px;
	}
	.a_q_list ul {
		padding: 40px 30px;
	}
	.a_q_list li {
		width: calc((100% - 22px)/2);
		margin-right: 0;
		margin-bottom: 30px;
	}
	.a_q_list li:nth-child(2n) {
		float: right;
	}
	.a_q_list li:nth-child(3n) {
		margin-right: auto;
	}
	.a_q_list li .imgs {
		height: auto;
	}
	.a_q_list li h4 {
	    font-size: 24px;
	    line-height: 62px;
	    height: 62px;
	    padding-right: 0;
	    padding-right: 60px;
	    background-size: 25px auto !important;
	}
	.a_r_list ul {
		padding: 40px 30px;
	}
	.a_r_list li {
		width: calc((100% - 20px)/2);
		margin-right: 0;
	}
	.a_r_list li:nth-child(2n) {
		float: right;
	}
	.a_r_list li:nth-child(3n) {
		margin-right: 0;
	}
	.a_r_list li h4 {
	    font-size: 26px;
	    line-height: 62px;
	}
	.js_list li {
		width: calc((100% - 20px)/2);
		margin-right: 0;
		margin-bottom: 30px;
	}
	.js_list li:nth-child(2n) {
		float: right;
	}
	.js_list li:nth-child(3n) {
		margin-right: 0;
	}
	.js_list {
		padding: 40px 30px;
	}
	.js_list li h4 {
		font-size: 24px;
		line-height: 74px;
		height: 74px;
		background-size: 25px auto !important;
	}
	.js_fuw {
		padding: 0 30px;
	}
	.js_fuw li h2 {
	    font-size: 24px;
	    line-height: 38px;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	height: 118px;
	}
	.js_fuw li p {
	    font-size: 24px;
	    line-height: 36px;
	}
	.pages li {
		margin: 0 12px;
	}
	.pages li a {
	    font-size: 22px;
	    line-height: 62px;
	    min-width: 64px;
	    padding: 0 10px;
	}
	.js_zy ul {
		padding: 0 30px;
	}
	.js_zy li a {
	    font-size: 24px;
	    line-height: 70px;
	    color: #414141;
	    background-size: 25px auto !important;
	}
	.js_zl ul {
		padding: 0 30px;
	}
	.js_zl li p {
	    float: left;
	    font-size: 24px;
	    color: #414141;
	    line-height: 70px;
	    width: 75%;
	}
	.js_zl li span {
	    padding-left: 46px;
	    line-height: 70px;
	    font-size: 24px;
	    background-size: 25px auto !important ;
	}
	.contact {
		padding: 0 30px 40px;
	}
	.contact .hd {
		padding: 0;
	}
	.contact .hd p {
	    font-size: 24px;
	    line-height: 44px;
	    margin-bottom: 30px;
	}
	.contact .hd .txt {
		float: none;
		width: 100%;
		
	}
	.contact .hd .txt:nth-child(2n) {
		float: none;
	}
	.contact .hd .txt {
	    float: none;
	    width: 100%;
	    padding: 0 30px;
	    height: 80px;
	    font-size: 24px;
	    margin-bottom: 20px;
	    margin-top: 0;
	}
	.contact .hd .text {
	    font-size: 24px;
	    height: 200px;
	    line-height: 44px;
	    padding: 10px 30px;
	}
	.contact .hd .btn {
	    width: 100%;
	    height: 80px;
	    font-size: 26px;
	    line-height: 80px;
	    margin: 20px auto 0;
	}
	.contact .map {
		margin-top: 30px;
	}
	.contact .bd {
		padding: 0;
		margin: 40px 0;
	}
	.contact .bd h2 {
	    font-size: 40px;
	    line-height: 66px;
	}
	.contact .bd p {
	    font-size: 26px;
	    line-height: 42px;
	}
	.news {
		padding: 0 30px;
	}
	.news li h2 {
	    font-size: 28px;
	    line-height: 56px;
	    height: 56px	 
	    word-break:keep-all;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		margin-bottom: 10px;
	}
	.news li p {
	    font-size: 22px;
	    line-height: 36px;
	    height: 110px;
	    overflow: hidden;
	}
	.news li h6 {
	    font-size: 24px;
	    line-height: 38px;
	}
	.case_list .l_naver{
		width: auto;
	}
	.case_list .l_naver.active{
		top: 100px;
	}
	
}