/*pad*/

img {
    max-width: 100%;
}

.gh {
    height: 24px;
    width: 24px;
    position: absolute;
    transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
    -webkit-transition: all 0.5s cubic-bmezier(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 .gh {
    transform: rotate(90deg);
}

.gh a {
    background-color: #000;
    display: block;
    margin: 0 auto;
    height: 2px;
    margin-top: -1px;
    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;
}

.gh a:after {
    width: 100%;
}

.gh a:before {
    width: 100%;
}

.gh a:after,
.gh a:before {
    background-color: #000;
    content: "";
    display: block;
    height: 2px;
    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;
}

.gh a:after {
    top: 7px;
}

.gh a:before {
    top: -7px;
}

.selected .gh a:after,
.selected .gh a:before {
    top: 0;background: #000;
}

.selected .gh a:before {
    transform: translateY(0px) rotate(-45deg);
    -webkit-transform: translateY(0px) rotate(-45deg);
    -ms-transform: translateY(0px) rotate(-45deg);
    width: 100%;
}

.selected .gh a:after {
    transform: translateY(0px) rotate(45deg);
    -webkit-transform: translateY(0px) rotate(45deg);
    -ms-transform: translateY(0px) rotate(45deg);
    width: 100%;
}

.selected .gh a {
    /* background-color: transparent !important; */
	background: #000;
}


@media only screen and (max-width:992px) {
	h2{
		font-size: 20px !important;
	}
	h3{
		font-size: 18px !important;
	}
	h4{
		font-size: 16px !important;
	}
	h5{
		font-size: 16px !important;
	}
	p,
	h6{
		font-size: 16px !important;
	}
	html{
		font-size: 16px;
	}
	.naver li{
		margin-left: 0;
	}
	.gh{
		display: block;
		right: 15px;top: 15px;
	}
	.naver ul{
		display: block;
		margin: 0;
	}
	.naver{
		position: absolute;z-index: 99;
		left: 0;right: 0;top: 100%;
		max-height: calc(100vh - 60px);
		background: #FFF;
		transform: translateX(-100%);
		transition:all 0.3s;
		-ms-transition:all 0.3s;  /* IE 9 */
		-moz-transition:all 0.3s;     /* Firefox */
		-webkit-transition:all 0.3s; /* Safari 和 Chrome */
		-o-transition:all 0.3s;
	}
	.naver.on{
		transform: translateX(0%);
	}
	.header{
		padding: 0 15px !important;
	}
	.logo img{
		height: 20px;
	}
	.header .wrap{
		height: 50px;
	}
	.hban{
		height: 100vw;
	}
	.naver ul li{
		margin: 0;
		padding: 0 20px;
	}
	.naver ul{
		padding-top: 100px;
		padding-bottom: 100px;
	}
	.naver ul li h3 i{
		text-align: left;
		font-size: 28px;
		line-height: 50px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		display: inline-block;
	}
	.naver ul li h3 i:nth-child(2){
		display: none;
	}
	.naver ul li{
		height: 70px;
	}
	.naver ul li a:hover i, .naver ul li.on a i {
	    transform: translateY(0%);
	    text-decoration: underline;
	}
	.naver.on ul li:nth-child(1){
		-webkit-animation:fadeInLeft 1s 0s ease both;
		-moz-animation:fadeInLeft 1s 0s ease both;
	}
	.naver.on ul li:nth-child(2){
		-webkit-animation:fadeInLeft 1s .1s ease both;
		-moz-animation:fadeInLeft 1s .1s ease both;
	}
	.naver.on ul li:nth-child(3){
		-webkit-animation:fadeInLeft 1s .2s ease both;
		-moz-animation:fadeInLeft 1s .2s ease both;
	}
	.naver.on ul li:nth-child(4){
		-webkit-animation:fadeInLeft 1s .3s ease both;
		-moz-animation:fadeInLeft 1s .3s ease both;
	}
	.naver.on ul li:nth-child(5){
		-webkit-animation:fadeInLeft 1s .4s ease both;
		-moz-animation:fadeInLeft 1s .4s ease both;
	}
	
	
	@-webkit-keyframes fadeInLeft{
	0%{opacity:0;
	-webkit-transform:translateX(-20px)}
	100%{opacity:1;
	-webkit-transform:translateX(0)}
	}
	@-moz-keyframes fadeInLeft{
	0%{opacity:0;
	-moz-transform:translateX(-20px)}
	100%{opacity:1;
	-moz-transform:translateX(0)}
	}
	.habout .flex{
		padding: 20px 0;
		margin-top: 30px;
	}
	.habout .titwb{
		font-size: 80px;
	}
	.habout .flex2{
		padding: 40px 0;
		display: block;
	}
	.layout{
		padding-top: 50px;
	}
	.habout .flex2 .txt{
		padding: 0;
	}
	.habout .flex2 .txt h1{
		font-size: 26px;
	}
	.habout .flex2 .txt h6{
		margin-top: 20px;
	}
	.habout .flex2 .text{
		width: auto;
	}
	.himgs{
		height: 60vw;background-attachment: inherit !important;
	}
	.hcase .wrap{
		display: block;
	}
	.hcase{
		padding: 40px 0;
	}
	.caselist {
		margin-top: 20px;
	}
	.caselist ul li{
		width: 100%;
		margin:  0;
	}
	.more{
		margin: 20px 0;
	}
	.more a{
		font-size: 16px;
	}
	.partner .wrap{
		display: block;
	}
	.partner .text{
		margin-top: 20px;
	}
	.partner .text li{
		width: calc(100%/3);height: 23vw;
	}
	.partner .text li:nth-child(n+10){
		display: none;
	}
	.partner .text ul{
		margin-top: 20px;
	}
	.utximbs{
		margin-top: 30px;
		display: block;
	}
	.utline{
		height: 1px;
	}
	.utximbs h6{
		margin: 20px 0 0;font-size: 13px !important;
	}
	.utximbs h4{
		font-size: 18px !important;
	}
	.footer .wrap{
		display: block;
	}
	.footer .rt h5{
		margin-bottom: 30px;
	}
	.footer .rt ul{
		display: block;
	}
	.footer .rt ul li{
		margin-bottom: 30px;
	}
	.webhide{
		display: none;
	}
	.webshow{
		display: block;
	}
	.habout .pic img{
		width: 100%;
	}
	.footer .lt{
		margin-top: 30px;
	}
	.footer .lt p{
		font-size: 13px !important;
		text-align: center;
	}
	.footer{
		padding: 40px 0 20px;
	}
	.footer .rt h5{
		font-size: 18px !important;
	}
	.qwability .fuwu .text{
		float: none;width: auto;
	}
	.qwability .fuwu dd{
		display: block;
		padding: 15px 0;
	}
	.qwability .fuwu h3{
		font-size: 16px !important;
	}
	.qwability .fuwu .txt{
		width: auto;
	}
	.qwability .fuwu p{
		font-size: 14px !important;
		margin: 5px 0 0;
	}
	.qwability .fuwu .wrap{
		padding: 30px 0 0;
	}
	.qwability .fuwu h2{
		position: static;
	}
	.qwability .swipic{
		position: static;
		display: none;
	}
	.qwability .picban .wrap{
		height: auto;
	}
	.qwability .last .flax{
		display: block;
		padding-top: 20px;
	}
	.qwability .last .rts{
		width: auto;margin-top: 15px;
	}
	.qwability .picban p{
		display: none;
	}
	.qwability .fuwu{
		padding-top: 40px;
	}
	.qwability .picban{
		padding: 40px 0 0;
	}
	.qwability .last{
		padding-bottom: 0;
	}
	.footer{
		margin-top: 30px;
	}
	.qwcase .hs{
		display: block;
	}
	.qwcase .hs dl{
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 10px;
	}
	.qwcase .hs dd{
		margin: 0 10px 10px 0;
	}
	.qwcase{
		padding: 40px 0 0;
	}
	.qwcase .bds li{
		width: 100%;margin: 0 0 20px 0;
	}
	.qwcontact .imgspges .imgs {
	    left: 0 !important;
	    top: 0 !important;
	    transform: translate(0) !important;
		left: 0 !important;right: 0 !important;
		width: 100%;bottom: auto;height: 100vw;
	}
	.qwcontact .imgspges .imgs img{
		width: 100% !important;height: 100% !important;
		object-fit: cover;
	}
	.imgspges{
		height: 100vw;
		position: relative;
		overflow: hidden;
	}
	.qwcontact .context{
		position: static;display: block;
		padding: 0 20px;
	}
	.qwcontact .context h4,
	.qwcontact .context h5,
	.qwcontact .context .txt{
		mix-blend-mode: inherit;
	}
	.qwcontact .context .txt:nth-child(2){
		margin: 0;
	}
	.qwcontact{
		height: auto;padding-bottom: 30px;
	}
	.qwcontact .context h2 a{
		margin-top: 20px;
	}
	.qwcofoms{
		padding: 40px 0 0;
	}
	.qwcofoms .wrap{
		display: block;
	}
	.qwcofoms .rts{
		width: auto;
		margin: 20px 0 0;
	}
	.qwcofoms .rts li h4{
		width: auto;
	}
	.qwcofoms .rts li{
		display: block;
	}
	.qwcofoms .rts .ts{
		width: auto;
		border-top: 1px solid #000;
		margin: 0 20px;
		padding: 0;
	}
	.qwcofoms .rts .t1,
	.qwcofoms .rts .lsele{
		padding: 0;
	}
	.qwcofoms .rts .t2{
		padding: 10px 20px;
	}
	.qwcasedel{
		margin-top: 30px;
	}
	.crumbs{
		padding-bottom: 20px;
	}
	.qwcasedel .flax{
		width: auto;margin-top: 30px;
		float: none;
	}
	.qwcasedel .hs{
		display: block;
		padding: 0;
		margin-bottom: 30px;
	}
	.qwcasedel .text p{
		margin: 15px 0 0;
	}
	.qwcasedel .text h3::before{
		bottom: -5px;
	}
	.qwcasedel{
		padding-bottom: 30px;
	}
	.footer .wrap{
		padding-bottom: 0;
	}
	.footer canvas{
		top: -80px;
		height: calc(100% + 80px);
	}
	.weixc{
		left: 100%;padding-left: 10px;
	}
	.footer .weix{
		display: inline-block;
	}
	
	.qwcase .hs dd i:nth-child(2){
		display: none;
	}
	.qwcase .hs dd a:hover i, .qwcase .hs dd.on a i{
		transform: translateY(0%);
	}
	
	.qwability .picban .video {
	width:100%;
	height:100%;
	display:none;
	object-fit:cover;
}
.qwability .picban img{
    width: 100%;display: block;
}
}