.gh{display: block;
    margin-top: 5px;}
.gh {
	float: right;
	height: 30px;
	width: 30px;
	right: 1em;
	position: relative;
	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;
}

.gh.selected {
	transform: rotate(90deg);
}

.gh a {
	background-color: #fff;
	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%;
}

.gh:hover a:before {
	transform: translateY(-2px) rotate(0deg);
	-webkit-transform: translateY(-2px) rotate(0deg);
	-ms-transform: translateY(-2px) rotate(0deg);
}

.gh:hover a:after {
	transform: translateY(2px) rotate(0deg);
	-webkit-transform: translateY(2px) rotate(0deg);
	-ms-transform: translateY(2px) rotate(0deg);
}

.gh.selected:hover a:before {
	transform: translateY(0px) rotate(-55deg);
	-webkit-transform: translateY(0px) rotate(-55deg);
	-ms-transform: translateY(0px) rotate(-55deg);
}

.gh.selected:hover a:after {
	transform: translateY(0px) rotate(55deg);
	-webkit-transform: translateY(0px) rotate(55deg);
	-ms-transform: translateY(0px) rotate(55deg);
}


.gh a:after,
.gh a:before {
	background-color: #fff;
	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%;
}

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

.dropdown>a{display:block;}
.gh a:before {
	top: -8px;
}

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

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

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

.gh.selected a {
	background-color: transparent !important;
}
.row{margin-left: -15px; margin-right: -15px;}
.row::before{ display: table;    content: " ";}
.row::after{    display: table;    content: " "; clear: both;}
.row:first-child{margin-left: 15px;}


@media screen and (min-width:1220px){
   
	.w {width:1200px; margin:0 auto; }
	.nav {margin-left: 20em;}
	.gh{display: none;}
	.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-9{ float: left;}
	.col-md-2{width:16.6%}
	.col-md-3{width:25%; }
	.col-md-4{width:33.3%; }
	.col-md-5{width:41.6%; }
	.col-md-6{width:50%; }
	.col-md-7{width:58.3%}
	.col-md-9{width:75%}
	 .apple-banner .swiper-container{ height:800px;}
 }
@media screen and (min-width:1921px){
    .apple-banner .swiper-container{ height:60vh}
    
}
@media screen and (max-width:1220px){
    body{font-size:12px;}
    .row:first-child{margin-left:15px;}
    .col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-9{ float: left;}
	.col-md-2{width:50%}
	.col-md-3{width:50%; }
	.col-md-4{width:100%; }
	.col-md-5{width:100%; }
	.col-md-6{width:100%; }
	.col-md-7{width:100%}
	.col-md-9{width:75%}
   	img{max-width:100%;}
   .logo{margin-left:1em; margin-bottom:15px;}
   .logo img{height:45px;}
   .features h2{padding:1em 10px;}
   .features {height:30em;}
   .features p{padding:0 10px}
   .features p{font-size:14px;}
   .nav{display:none;}
   .row .row{ margin:0; padding:15px; }
   .row .row:first-child{margin-left:15px;}
   .main{width:100%; margin-left:0; }
   .nav ul {
    position: absolute;
    float: none;
    display: block;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    padding-top: 1.5em;
    top: 80px;
    left: 0;
   }
   .logo-bottom{padding:5px;}
   .cos{text-align:center}
   .co{display:inline-block; float:none;margin-left:-15px;}
   .list dl dt{width:30%;}
    .list dl dd{width:65%; margin-left:0;padding-left:1em; }
    .list dl dd p{font-size:12px;}
    .list dl dt a img{width:10em;}
    .list dl dd h3{font-size:16px; padding-top:0; line-height:1.4;}
    .list dl dd h3 span{font-size:10px; color:ccc; }
    p{font-size:12px;}
    .features h2{text-align:center; line-height:2; text-indent:0}
    
    .list .row li dl dt{width:100%;}
    .list  ul.row li{ padding:20px 0 }
    .list .row dl dd h3{font-size:12px}
    .list .row dl dd{padding-left:0;    }
    .list .row dl dt a img{width:100%;}
    .list .row dl{padding:0 15px;}
    .list .row li:nth-child(even) dl{padding-left:0;padding-right:30px;
    }
    .list .row:first-child{margin-left:0;}
    .list .row dl dd{width:100%}
   .swiper-wrapper img{height:55vw}
   .apple-banner .swiper-container{height:60vw}
   .apple-banner .swiper-pagination{bottom:15px}
   .about{padding-left:0;  }
   .about p{padding:0 10px;}
   .fitem{max-width:80%; margin:0 auto; }
   .features{padding-bottom:2em;}
   .news .row .col-md-9{width:100%;}
   .news .row .col-md-9 h4{line-height:3;}
   .news .row .col-md-9 p{font-size:12px;}
   .nav li {
    float: none;
    width: 100%;
    padding:10px 0;
    font-size: 18px;
    line-height: 1.75;
    height: auto;
    text-align: center;
    border-bottom: 1px solid #fff;
    
}

   .nav dd a{display:inline;}
 .gt{
     
    position: static;
    width: 100%;
    background: transparent;
    padding: 0;
    margin: 0;
 }
 .about .detail{padding:0 15px; font-size:12px;}
 #post-form{padding:0 15px}
 .form-group{padding-left:1.5em;}
 .content{ text-indent:0;}
 
 .svcitems dl dd p {font-size:12px}
 .about p{ font-size:12px;}
 .cert {height:80vw;}
 .cert .w .row{padding-right:15px;}
 .cert .col-md-3{width:25%; }
   
  .cert .w img{display:block; padding:0 25px; width:70%; }
  .news li{padding-top:0  }
  .news li img{height:auto;}  
  .news .row .row .col-md-3{width:100%}
  .news dl dt{text-align:center;}
  .news dl dt img{width:100%;height:auto;}
  .case .col-md-3:nth-child(odd) a{ display:block; padding:10px 15px 10px 30px; text-align:center; }
  .case .col-md-3:nth-child(even) a{display:block;padding:10px 30px 10px 0;}

.my-video-dimensions{width:100%;height:auto;}
 .side{
     width: auto;
    margin: 0 -30px;
    height: auto;
    padding: 0;
    float: none;
     
 }
 .side ul {
    width: 100%;
    height: auto;
    background-color: #417505;
    margin: 0;
    text-align: center;
    padding: 10px 0 0 0;
    border: none;
    overflow-x: auto;
    white-space: nowrap;
}
 .side ul li{
         display: inline-block;
    color: #fff;
    padding: 5px 5px 10px 5px;
    margin: 0;
    font-size: 12px;
 }
 .side>h2{display:none;}
 .current{display:none;}
 
 .side li.active {
    color: #417505;
    background-color: #fff;
}
 .side li:after{background:none;}
 .side ul li a{color:#fff;}
 .side li.active a{color:#417505}
 
 footer .logo-bottom img{ height:50px; border:none; float:none; margin:0 auto; }
 .detail video {width:100% !important; height:auto !important;}
 .case .row a img{height:35vw;}
 
 .cert .w ul li:last-child img{margin-top:-1.6em;}
   
}

@media screen and (max-width:960px){
    
    .banner{background-position:center !important}
    .side ul li a{ font-size:16px}
    .features{height: 100vw}
}