/*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: #111; */
    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: #111;
    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: 4px;
}

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

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

.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 {
   
}
html{
	font-size: 1vw;
}


@media only screen and (max-width:978px) {
	
	.wrap {
		padding: 0 15px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}	
	html{
		font-size: 13px;
	}
	.hlogo{
		padding: 18px 0 !important;position: fixed;z-index: 20;
	}
	.hlogo svg{
		height: 25px !important;
	}
	.layout{
		padding-top: 61px;background: #000;
	}
	body.active .layout{
		background: #fff;
	}
	.hpage1{
		position: relative;
		margin-bottom: -1px;
	}
	.ftitem{
		position: fixed;
		left: 0;right: 0;
		bottom: 0;z-index: 9;
	}
	.ftitem .flex{
		display: flex !important;
		justify-content: center;
		background: #000;
		align-items: center;
		height: 56px;
		padding: 0 15px;
	}
	.ftitem .flex dl{
		display: flex;justify-content: center;
	}
	.ftitem .flex dd{
		margin: 0 13px;
	}
	.ftitem .flex dd img{
		height: 20px;width: 36px;object-fit: contain;
	}
	.hpage1 .flex h4{
		font-size: 14px !important;
		color: #fff;
		line-height: 1.4;
		text-transform: uppercase;
		border-bottom: 1px solid #fff;
	}
	.hpage1 img{
		object-fit: cover;
	}
	.hpage2 .logo{
		height: 36px;display: none;
	}
	.hpage2{
		background: none !important;
		padding: 0;
	}
	.hpage2 .video{
		width: 100%;height: auto;
		margin: 0;
	}
	.webmob{
		display: block !important; 
	}
	.porc{
		position: relative;
	}
	.hpage3::before{
		height: 16rem;
	}
	.hpage2 h6{
		color: #fff;
		text-shadow: none;
		line-height: 2;font-size: 15px !important;
		padding: 40px 30px;
		/*
		text-align:justify;
		text-justify:distribute-all-lines;/*ie6-8*/
		text-align-last:left;/* ie9*/
		-moz-text-align-last:left;/*ff*/
		-webkit-text-align-last:left;/*chrome 20+*/
		*/
	}
	.hpage2 h5{
		color: #fff;
		text-shadow: none;
		line-height: 2;font-size: 16px !important;
		margin-bottom: 0;
		padding: 30px 20px 0;
	}
	.webmpc{
		display: none !important;
	}
	.maskicon img{
		height: 2.2rem;
	}
	.hpage3{
		padding: 20px 0 40px;
	}
	.hpage3 .wrap{
		padding: 0 0 0 30px;
		overflow-x: scroll;
		overflow-y: hidden;
	}
	.hpage3 .hs h3{
		font-size: 22px;
		line-height: 1.4;
		margin-right: 60px;
	}
	.hpage3 .hs{
		max-width: 100%;
	}
	.hpage3 .hs h3 span{
		margin-left: 1.6em;
	}
	.wrap{
		width: auto;
	}
	.hpage3 .hs h6:before{
		width: 30px;
	}
	.hpage3 .hs{
		justify-content: flex-start;
	}
	.hpage3 .bds{
		margin-top: -30px;font-size: 13px;
	}
	.hpage3 .bds{height: 40em;
		padding-top: 60px;
	}
	.hpage3 .bds ul{
		width: 100vw;
	}
	.footer {
		padding: 40px 0;
	}
	.footer .tps{
		padding: 0;
		display: block;
		margin-bottom: 30px;
		text-align: center;
	}
	.footer .rt{
		display: block;
		margin-top: 0;
	}
	.footer .rt dl{
		justify-content: flex-start;
		margin-top: 30px;
	}
	.footer .rt dd{
		/* margin: 0 15px; */
		width:40px;margin: 0 25px 0 0;
	}
	.footer .lt h3{
		font-size: 18px;
		margin-bottom: 20px;
	}
	.footer .wrap{
		padding: 0 20px;
	}
	.footer .lt h4 a{
		font-size: 16px;
		font-weight: inherit;
	}
	.footer .rt h4{
		margin-bottom: 25px;font-size: 16px;
	}
	.footer .ds{
		margin: 0;margin-top: 40px;
		padding-top: 40px;
		border-top: 1px solid rgba(112, 112, 112, 0.5);
	}
	.footer .rt ul{
		/* display: none; */
		margin-left: 0;
	}
	.footer .lt{
		display: flex;
		justify-content: space-between;
	}
	.footer .lt li{
		margin-bottom: 20px;
		text-align: left;
	}
	.footer .lt li:last-child{
		margin-bottom: 0;
	}
	.footer .lt li a{
		font-size: 16px;color: #fff;line-height: 1.6;
		display: inline-block;
	}
	.footer .ds{
		margin-top: 40px;
		text-align: left;
	}
	.copyright{
		border: none;
		padding: 20px 0;
	}
	.mskshop{
		width: auto;
		margin: 0 30px;
		padding: 30px 15px 60px;
	}
	.mskshop .box h6{
		font-size: 22px;line-height: 1.6;position: relative;
		z-index: 2;
	}
	.mskshop .box{
		display: block;
	}
	.mskshop .box .btn{
		position: absolute;
		left:15px ;bottom: 40px;
	}
	.mskshop .box .txt{
		margin: 0;
	}
	.mskshop .box .pic{
		width: auto;display: flex;
		justify-content: flex-end;
		margin-top: -15px;height: 100vw;
	}
	.mskshop .box .pic img{
		width: 70%;
	}
	.mskshop .box .btn{
		width: 160px;font-size: 14px;
	}
	.mskshop .gb{
		right: 0;width: 30px;height: 30px;
		top: -40px;
	}
	.mskgoumai{
		width: auto;padding: 0 15px;top: 16%;
	}
	.mskgoumai h1{
		font-size: 18px;
	}
	.mskgoumai h2{
		font-size: 20px;margin: 70px 0 30px;line-height: 1.6;
	}
	.mskgoumai li p{
		font-size: 16px;margin-top: 0;
	}
	.mskgoumai li .ico{
		width: 50px;
	}
	.mskgoumai h6{
		font-size: 16px;
	}
	.gh{
		display: block;position: absolute;
		right: 15px;top: 18px;
	}
	.uline{
		width: 80%;
	}
	body.active .layout .hlogo{
		height: 61px !important;
	}
	.swiperpic{
		width: 50vw;
		margin: 0 auto;
	}
	.swipers{
		padding-top: 40px;padding-bottom: 70px;
	}
	.swiperpic .swiper-slide{
		transform: scale(0.8) !important;opacity: 1 !important;
	}
	.swiperpic .swiper-slide-active{
		transform: scale(1) !important;
	}
	.layout{
		overflow: hidden;
	}
	.hpage2 .porc,
	.hpage2 .webmob{
		height: 100% !important;
		object-fit: cover;
	}
	.hpage21 .webmob{
		margin-bottom: 40px;
	}
	.hpage2 .porc img{
		width: 100%;
	}
	.swipers{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.footer{
		height: calc(100vh - 5.542rem) !important;   background: #000000;
		margin-top: -1px;
	}
	.swipers{
		padding: 30px 0 0;
	}
	.swiperpic{
		z-index: 21;
		position: relative;
	}
	.swipers h4{
		display: block;
		padding: 0 20px 10px;
	}
	.footer{
		overflow: hidden;
	}
	.hswipers{
		height: auto;
	}
	.swiper-slide{
		overflow: hidden;
	}
	.swipers{
		padding-top: 0;
	}
	.footer .rt h4{
		padding: 0 0 10px;
		margin-bottom: 0;
	}
	.footer .rt dl{
		margin-top: 10px;
	}
	.footer .ds{
		margin-top: 20px;padding-top: 20px;
	}
	.footer .ds:first-child{
		border: none;
	}
	.footer{
		padding-top: 0;
	}
	.ftitem .flex dl{
		align-items: center;
	}
	.ftitem .flex dd:nth-child(3){
		position: relative;top: -10px;
		margin: 0 20px;
	}
	.ftitem .flex dd:nth-child(3) img{
		width: 50px;height: 50px;
	}
	
	.video.webmob {
	  /* 非播放状态时禁用事件穿透，确保视频可点击播放 */
	  pointer-events: auto;
	}
	.video.webmob:active, .video.webmob:focus, .video.webmob:fullscreen {
	  /* 播放/全屏状态时允许事件穿透，让滑动事件传递给Swiper */
	  pointer-events: none;
	}
	.hpage2{
		background: #000 !important;
	}
	.hpage2 .porc{
		height: auto !important;
	}
	.ftitem{
		display: none;
	}
	.hpage2{
		overflow: hidden;
	}
	.hpage2 .video{
		height: auto !important;
		width: calc(100% - 60px) !important;margin: 0 auto;
	}
	.footer .ds:nth-child(1){
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 0;
	}
	.swiperpic{
		margin: 40px auto;
	}
	.swipers{
		display: flex;
		justify-content: space-around;
		flex-direction: column;
	}
	.footer{
		height: auto !important;
		padding-bottom: 0;
	}
	.footer{
		padding: 45px 0;
	}
	.copyright a{
		display: none;
	}
	.hpage21 img{
		margin:20px 0;width: 100%;
	}
}
@media only screen and (max-width:768px) {
	.naver ul{
		width: auto;
	}
	.naver li a{
		font-size: 26px;
	}
	.footer .rt h6{
		font-size: 16px;
	}
	.footer .rt li a{
		font-size: 16px;
	}
	
	.part1-mob .title{
		width: auto !important;max-width: 100%;
	}
	.part1-mob.utext1{
		display: block;
	}
	.part6 .h1-mob{
		line-height: 1.1;
	}
	
	
	
	
	.layout .part5 .texts section,
	.layout .part4 section,
	.layout .part2 section,
	.layout .part1-mob .title{
		width: 100%;
		margin: 0 auto;
	}
	.layout .part5 .images .image1,
	.layout .part6 .image2{
		width: 100%;height: auto;
	}
	.layout .part6 .texts section .inner{
		width: 90%;margin-left: 10%;
	}
	.layout .part6 .texts section .inner2{
		width: 100%;margin-left: 0;
	}
	.layout .part5 .texts h5{
		width: auto;white-space: initial;
	}
	.uwbtn{
		margin-bottom: 9vw;
	}
}