/*pad*/

img {
    max-width: 100%;
}

.gh {
    height: 28px;
    width: 28px;
    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;
}

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

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

.selected .gh a {
    background-color: transparent !important;
}



@media only screen and (max-width:1660px) {
	html{
		font-size:16px;
	}
	.header .wrap{
		width: 90%;
	}
}

@media only screen and (max-width:1400px) {
	html{
		font-size:14px;
	}
	
}
@media only screen and (max-width:1200px) {
   html{
   	font-size:12px;
   }
   .footer .hds .rts .lt .navs li a{
	   white-space:nowrap;
   }
  .footer .hds .rts .lt .navs li{
	  margin-right: 0;
  }
   .footer .hds .rts .lt .navs ul{
		justify-content: space-between;
   }
   .footer .hds .rts .wx dd h6{
	   white-space:nowrap;
   }
}
@media only screen and (max-width:1000px) {
  html{
  	font-size:14px;
  }
  .wrap{
  	  width: auto;padding: 0 10px;
  }
  .header .wrap{
	  width: auto;display: block;
  }
  .header .rt{
	  display: block;
  }
  .header .navers{
	  position: absolute;top: 100%;left: 0;right: 0;z-index: 11;display: none;
  }
  .header .rt .seach{
	  display: none;
  }
  .header{
	  height: 50px;padding-top: 8px;-webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -o-box-sizing: border-box;
	  box-sizing: border-box;position: fixed;top: 0;left: 0;right: 0;
  }
  .gh{
	  display: block;top: 14px;right: 20px;position: absolute;
  }
  .hbanner{
	  height: 70vw;
  }
  .hbanner .prev, .hbanner .next{
	  background-size: 10px auto;width: 30px;height: 30px;left: 0;
  }
  .hbanner .next{
	  left: auto;right: 0;
  }
  .hbanner .text{
	  top: 60px;left: 50px;
  }
  .hbanner .text h3 span{
	  font-size: 16px;
  }
  .hbanner .text h3 span::before{
	  height: 3px;
  }
  h2{
	  font-size: 20px !important;
  }
  p{
	  font-size: 14px !important;
  }
  .hbanner .text p{
	  font-size: 12px !important;
  }
  .hbanner .text .btn{
	  width: 80px;line-height: 30px;font-size: 12px;margin-top: 20px;
  }
  .layout{
	  overflow: hidden;padding-top: 50px;
  }
  .hbanner .span{
	  bottom: 10px;
  }
  .hpage1{
	  padding: 30px 0;
  }
  .hpage1 .wrap{
	  display: block;
  }
  .hpage1 .text{
	  width: auto;padding-right: 0;
  }
  .hpage1 .pic{
	  width: auto;
  }
  .htit h3{
	  font-size: 24px;
  }
  .htit h4{
	  font-size: 16px;
  }
  .hpage1 .text .del{
	  font-size: 14px;margin: 14px 0;
  }
  .hpage1 .text .vides{
	  width: auto;height: auto;
  }
  .hpage1 .text .btn{
	  margin: 24px auto 0;
  }
  .hpage1 .pic{
	  margin-top: 14px;
  }
  .qmvideos{
	  width: auto;margin: 0 20px;
  }
  .hpage2{
	  padding: 30px 0;
  }
  .hpage2 .box{
	  display: block;margin-top: 20px;
  }
  .hpage2 .box .pic{
	  width: auto;height: auto;
  }
  .hpage2 .box .text{
	  width: auto;margin-top: 14px;
  }
  .hpage2 .box .text h3{
	  font-size: 18px;
  }
  .hpage2 .box .text .swippic .swiper-slide{
	  height: auto;
  }
  .hpage2 .box .text .swippic{
	  width: auto;
  }
  .hpage2 .box .text .swippic .prev, .hpage2 .box .text .swippic .next{
	  width: 20px;height: 50px;
  }
  .hpage3{
	  padding: 30px 0;
  }
  .hpage4 .htit{
	  left: 20px;top: 20px;
  }
  .footer{
	  padding: 20px 0 0;
  }
  .footer .hds{
	  display: block;
  }
  .footer .hds .rts{
	  width: auto;display: block;
  }
  .footer .hds .rts .lt .navs{
	  display: none;
  }
  .footer .hds .rts .lt .text{
	  margin-top: 20px;
  }
  .footer .hds .rts .lt .text h4{
	  font-size: 16px;
  }
  .footer .hds .rts .wx{
	  margin-top: 20px;width: auto;
  }
  .footer .hds .rts .wx dl{
	  justify-content: center;
  }
  .footer .hds .rts .wx dd{
	  width: 100px;margin: 0 14px;
  }
  .footer .hds .rts .wx dd .img{
	  height: 100px;
  }
  .footer .hds .rts .wx dd h6{
	  margin-top: 4px;font-size: 14px;
  }
  .footer .copyright{
	  margin-top: 20px;
  }
  .hpage4{
	  height: auto;padding-bottom: 30px;
  }
  .hpage4 .swipnews .swiper-slide::before{
	  display: none;
  }
  .hpage4 .swipnews .swiper-slide:hover p,.hpage4 .swipnews .swiper-slide:hover h3 {
  	color:#000;
  }
  .hpage4 .swipnews .swiper-slide:hover h6 {
  	color:rgba(0,0,0,.5);
  }
  .hpage4 .swipnews .swiper-slide{
	  padding-top: 90px;
  }
  .hpage4 .prev, .hpage4 .next{
	  width: 30px;height: 30px;background-size: 5px auto;
  }
  .hpage4 .bns{
	  top: 20px;right: 20px;
  }
  .hpage4 .swipnews h3{
	  font-size: 16px;margin: 0 0 8px;
  }
  .hpage4 .swipnews p{
	  height: auto;
  }
  .hpage4 .swipnews .pic{
	  height: auto;margin: 18px 0 ;
  }
  .hpage3 .swipproduct .swiper-slide{
	  width: 100%;
  }
  .gh{
	  top: 11px;
  }
  .header .navers{
	  background: #fff;
  }
  .header .rt .navers>ul{
	  display: block;
  }
  .header .rt .navers>ul>li{
	  margin: 0;
	  border-bottom: 1px solid #ccc;
  }
  .header .rt .navers li h3 a{
	  font-size: 16px;
	  line-height: 44px;
	  padding: 0 15px;
  }
  .header .rt .navers>ul>li:last-child{
	  border: none;
  }
  .navers{
	  height: calc(100vh - 50px);
  }
  .ic-pc-nav{
	  display: none !important;
  }
  .hpage4 .swipnews .swiper-slide{
	  padding-left: 10px;padding-right: 10px;
  }
  .footer .hds .logo{
	  margin: 0 auto;
  }
  .footer .hds .rts .lt{
	  margin: 0 auto;
	  width: auto;
	  text-align: center;
  }
}