@font-face {
  font-family: 'iconfont';
  src: url('../iconfont/iconfont.eot?v=2');
  src: url('../iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
      url('../iconfont/iconfont.woff2?v=2') format('woff2'),
      url('../iconfont/iconfont.woff?v=2') format('woff'),
      url('../iconfont/iconfont.ttf?v=2') format('truetype'),
      url('../iconfont/iconfont.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html,body{
	width:100%;height:100%;
}

.wrapper{
	position: relative;
	width:100%;
	height:100%;
	overflow: hidden;
}

.main-con{
	position: relative;
	
	transition:all .2s ease-out;
	z-index:9;
}

.debug{
	display: none;
	position: fixed;
	background-color: rgba(0,0,0,.1);
	color:#fff;
	font-size: .28rem;
	left:0;
	top:0;
	width: 100%;
	padding:.1rem;
	z-index:109;
}

.loadding{
	display: none;
	flex-direction: column;
	-webkit-flex-direction: column;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000000;
	text-align: center;
	color:#ffffff;
	font-size: .26rem;
	z-index:599;
}
.loadding.conload{
	background-color: rgba(0,0,0,.7);
}
.loadding.flex{
	display: flex;
}

.page{
	display: none;
	box-sizing: border-box;
	background-color: #fff;
}

.page-swiper{
	position: relative;
	background-color: #000000;
}
.page-swiper.flex{
	display: flex;
	z-index: 599;
}
.page-swiper .swiper-slide{
	display: flex;
	justify-content: center;
	align-items: center;
}
.page-swiper .swiper-slide > img{
	max-width: 100%;
	max-height: 100%;
}
.page-swiper .swiper-wrap{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


.page-index{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width:100%;
	height:100%;
	position: relative;
	background-color: #fff;
	opacity: 0;
}
.page-index.flex{
	opacity: 1;
}
.page-index .con{
	position: relative;	
	width:80%;
	height:5rem;
}

.page-index .logo{
	position: absolute;
	left:50%;
	bottom:.8rem;
	width: 1.91rem;
    height: .6rem;
	transform:translate3d(-50%,0,0);
	background-image: url(http://www.hanhua.cn:8006/public/uploads/images/logo-v3.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.page-index .con .menu-item{
	position: absolute;
	top:0;
	left:0;
	display: flex;
	width:100%;
	
}

.menu-item-con{
	display: block;

}

.menu-item-con.con-1.active{
	position: absolute;
	top:0;
	left:0;
	-webkit-animation: piaodong1 12s  linear infinite;
    animation: piaodong1 12s linear infinite;
}


.menu-item-con.con-2.active{
	position: absolute;
	top:0;
	right:0;
	animation: moveX 6s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, moveY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
}


.menu-item-con.con-3.active{
	position: absolute;
	top:0;
	left:0;
	-webkit-animation: piaodong2 6s  linear infinite;
    animation: piaodong2 6s linear infinite;
}
.page-index .con .menu-item.menu1{
	top:0;
	left:0;
}
.page-index .con .menu-item.menu2{
	justify-content: flex-end;
	top:2rem !important;
}
.page-index .con .menu-item.menu3{
	top:4rem !important;
}
.page-index .con .menu-item  dl{
	display: flex;
}
.page-index .con .menu-item.menu2  dl{
	flex-direction: row-reverse;
}
.page-index .con .menu-item.menu2  dl > dd > h5{
	text-align: right;
}
/***/

.page-index .con .menu-item  dl > dt{
	width:.6rem;
	display: flex;
	justify-content: center;
	
	font-size: .8rem;
	color:#ffffff;

}
.page-index .con .menu-item  dl > dt > span{
	display: block;
	width:.2rem;
	height:.2rem;
	background-color: #ffffff;
	border-radius: 100%;
	margin-top: .2rem;
}
.page-index .con .menu-item  dl > dd > h5{
	font-size: .4rem;
	color:#ffffff;
}
.page-index .con .menu-item  dl > dd > h6{
	font-size: .32rem;
	color:#ffffff;
}



.sub-page{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transform: translate3d(100%,0,0);
	background-color: #000000;
	transition:transform .3s ease-out;
	overflow: hidden;
}
.sub-page.active{
	transform: translate3d(0,0,0);
}

.sub-page > .top-bar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:1rem;
	z-index:99;
	box-sizing: border-box;
	padding:0 .12rem;
	color:#ffffff;
}

.sub-page > .top-bar > .btn-sub-back > span{
	font-size: .56rem;
	color:#ffffff;
}





.poi-dot{
	position: absolute;
	top:0;
	left:0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.poi-dot > dt{
	margin:0 .1rem;
}
.poi-dot > dt > span{
	display: block;
	width:10px;
	height:10px;
	background-color: #fff000;
	border-radius: 100%;
	box-shadow: 0px 0px 5px #fff000;
	opacity: 0;
	
}
.poi-dot > dt > span.dot-0{
	transition:all .8s ease-out 0s;
}
.poi-dot > dt > span.dot-1{
	transition:all .8s ease-out .3s;
}
.poi-dot > dt > span.dot-2{
	transition:all .8s ease-out .6s;
}
.poi-dot > dt > span.dot-3{
	transition:all .8s ease-out .9s;
}
.poi-dot > dt > span.dot-4{
	transition:all .8s ease-out 1.2s;
}
.poi-dot > dt > span.active{
	opacity: 1;
}
.poi-dot > dt > span.big{
	width:.45rem;
	height:.45rem;
	
}
.poi-dot > dt > span.big.active{
	-webkit-animation: arrow .8s  infinite;
    animation: arrow .8s infinite;

	
}

@keyframes arrow {
    0% {
        box-shadow: 0px 0px 2px 0px #fff000;
    }
   
    50% {
        box-shadow: 0px 0px 10px 4px #fff000;
    }

    100% {
        box-shadow: 0px 0px 2px 0px #fff000;
    }
}
@-webkit-keyframes arrow {
    0% {
        box-shadow: 0px 0px 2px 0px #fff000;
    }
   
    50% {
        box-shadow: 0px 0px 10px 4px #fff000;
    }

    100% {
        box-shadow: 0px 0px 2px 0px #fff000;
    }
}


.poi-dot > dd{
	display: none;
	position: absolute;
    top: 50%;
    left: 0;
    text-align: right;
    font-size: .24rem;
    color: rgba(255,255,255,.6);
    width: 5rem;
    transform: translate3d(-100%,-50%,0);
    line-height: 1;
}

.poi-dot.r > dd{
	transform: translate3d(.4rem,-50%,0);
	text-align: left;
}
.poi-dot.d > dd{
	display: block;
    transform: translate3d(-50%, 10px,0);
    text-align: center;
    padding-left: .3rem;
}
.poi-dot.t > dd{
	display: block;
    transform: translate3d(-50%,-160%,0);
    text-align: center;
    padding-left: .3rem;
}

@keyframes piaodong1 {
    0% {
        transform:translate3d(0px,0px,0);
        opacity: 1;
    }
    10%{
		transform:translate3d(10px,10px,0);
		opacity: 1;
   	}
    20%{
		transform:translate3d(10px,-10px,0);
		opacity: 1;
    }
   	30%{
		transform:translate3d(0px,0,0);
		opacity: 1;
   	}
   	40%{
		transform:translate3d(-10px,10px,0);
		opacity: 1;
   	}
    50% {
        transform:translate3d(10px,10px,0);
        opacity: .2;
    }
    60%{
		transform:translate3d(0px,0,0);
		opacity: .8;
   	}
	70%{
		transform:translate3d(-10px,-10px,0);
		opacity: .2;
	}
	80%{
		transform:translate3d(10px,-10px,0);
		opacity: .8;
   	}
   	90%{
		transform:translate3d(10px,10px,0);
		opacity: 1;
   	}
    100% {
        transform:translate3d(0,0,0);
        opacity: 1;
    }
}
@-webkit-keyframes piaodong1 {
    0% {
        transform:translate3d(0px,0px,0);
    }
    10%{
		transform:translate3d(10px,10px,0);
   	}
    20%{
		transform:translate3d(10px,-10px,0);
    }
   	30%{
		transform:translate3d(0px,0,0);
   	}
   	40%{
		transform:translate3d(-10px,10px,0);
   	}
    50% {
        transform:translate3d(10px,10px,0);
    }
    60%{
		transform:translate3d(0px,0,0);
   	}
	70%{
		transform:translate3d(-10px,-10px,0);
	}
	80%{
		transform:translate3d(10px,-10px,0);
   	}
   	90%{
		transform:translate3d(10px,10px,0);
   	}
    100% {
        transform:translate3d(0,0,0);
    }
}


@keyframes piaodong2 {
    0% {
        transform:translate3d(0px,0px,0);
        opacity: 1;
    }
    
    20%{
		transform:translate3d(-10px,-10px,0);
		opacity: 1;
    }
   
   	40%{
		transform:translate3d(-20px,-20px,0);
		opacity: 1;
   	}
    
    60%{
		transform:translate3d(-20px,-10px,0);
		opacity: 1;
   	}
	
	80%{
		transform:translate3d(-10px,-10px,0);
		opacity: 1;
   	}
   	
    100% {
        transform:translate3d(0px,0px,0);
        opacity: 1;
    }
}
@-webkit-keyframes piaodong2 {
    0% {
        transform:translate3d(0px,0px,0);
        opacity: 1;
    }
    
    20%{
		transform:translate3d(-10px,-10px,0);
		opacity: 1;
    }
   
   	40%{
		transform:translate3d(-20px,-20px,0);
		opacity: 1;
   	}
    
    60%{
		transform:translate3d(-20px,-10px,0);
		opacity: 1;
   	}
	
	80%{
		transform:translate3d(-10px,-10px,0);
		opacity: 1;
   	}
   	
    100% {
        transform:translate3d(0px,0px,0);
        opacity: 1;
    }
}


@keyframes moveX{
    0% {right: -18px;}
    100% {right: 18px;}
}
@keyframes moveY{
    0% {top: -18px;}
    100% {top: 18px;}
}




.intro-wrap{
	position: relative;
	width:100%;
	height:100%;
	box-sizing: border-box;
}

.intro-wrap .swiper-wrap{
	width:100%;
	height:8.8rem;
}
.intro-banner-swiper .swiper-slide{
	display: flex;
	justify-content: center;
	align-items: center;
}
.intro-banner-swiper .swiper-slide > img{
	/*max-width: 100%;
	max-height: 100%;*/
	width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro-wrap .article .head{
	text-align: center;
	margin-top: 1.18rem;
}
.intro-wrap .article .head .intro-logo{
	width:2.96rem;
}
.intro-wrap .article .content{
	width:92%;
	margin:0 auto;
	margin-top: .58rem;
	color:#ffffff;
	font-size: .26rem;
	line-height: 1.8;
	padding-bottom: 1.5rem;
}
.intro-wrap .article .content p{
	margin-bottom: .1rem;
	text-align: justify;
	text-indent: 2em;
}


.category-wrap{
	position: relative;
	width:100%;
	height:100%;
	box-sizing: border-box;
}

.category-wrap .swiper-slide{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.category-wrap .scroll{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	position: relative;
	width:100%;
	height:100%;
}
.category-wrap .swiper-wrap{
	width:100%;
	flex:1;
}
.category-banner-swiper .swiper-slide{
	display: flex;
	justify-content: center;
	align-items: center;
}
.category-banner-swiper .swiper-slide > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cat-list{
	
	display: flex;
	flex-direction: column;
	width:92%;
	/*height:4.42rem;*/
	margin:0 auto;
	padding:.25rem 0 .45rem 0;
	box-sizing: border-box;

}
.cat-list a{
	display: block;
	margin-top: .2rem;
}
.cat-list dl{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	padding:.15rem 0;
	
}
.cat-list dl dt{
	font-size: .42rem;
    color: #ffffff;
}
.cat-list dd{
	display: flex;
	flex-direction: column;
}
.cat-list dd > h5{
	font-size: .38rem;
	color:#ffffff;
	line-height: 1;
}
.cat-list dd > h6{
	font-size: .26rem;
	color:#ffffff;
	line-height: 1;
	margin-top: .1rem;
}




.catlist-wrap{
	position: relative;
	width:100%;
	height:100%;
	box-sizing: border-box;
}
.catlist-wrap .head{
	width:92%;
	margin:1rem auto 0;
}
.catlist-wrap .head h5{
	letter-spacing: 1px;
	font-size: .32rem;
	color:#ffffff;
}
.catlist-wrap .head h6{
	font-size: .36rem;
	color:#ffffff;
	letter-spacing: 8px;
}
.catlist-wrap .work-list{
	width:92%;
	margin:.2rem auto;
	padding-bottom: 1.5rem;
}
.catlist-wrap .work-list a{
	position: relative;
	display: block;
	width:100%;
	height:6.6rem;
	margin-bottom: .4rem;
}
.catlist-wrap .work-list a > img{
	width:100%;
	height:100%;
	object-fit: cover;
}
.catlist-wrap .work-list a > .info{
	position: absolute;
	left:0;
	bottom:0;
	width:100%;
	padding:0 .3rem .4rem .3rem;
	box-sizing: border-box;
}
.catlist-wrap .work-list a > .info > h5{
	display: none;
	color:#ffffff;
	font-size: .32rem;
	font-weight: bold;
	text-shadow: #000000 0 0px 1px;
}
.catlist-wrap .work-list a > .info > h6{
	margin-top: .1rem;
	font-size: .36rem;
	color:#ffffff;
	letter-spacing: 2px;
	text-shadow: #000000 0 0px 1px;
}
.catlist-wrap .work-list a > .info > p{
	margin-top: 0;
	font-size: .24rem;
	color:#ffffff;
	text-shadow: #000000 0 0px 1px;
}



.work-detail-wrap{
	position: relative;
	width:100%;
	height:100%;
	box-sizing: border-box;
}
.work-detail-wrap .poster{
	width:92%;
	margin:1rem auto 0;
}
.work-detail-wrap .poster > img{
	width:100%;
}
.work-detail-wrap .head{
	width:92%;
	margin:.35rem auto 0;
}
.work-detail-wrap .head h5{
	display: none;
	letter-spacing: 1px;
	font-size: .36rem;
	color:#ffffff;
	font-weight: bold;
}
.work-detail-wrap .head h6{
	font-size: .36rem;
	color:#ffffff;
	letter-spacing: 8px;
}
.work-detail-wrap .head p{
	font-size: .26rem;
	color:#ffffff;
	margin-top: .2rem;
	margin-bottom: .45rem;
	line-height: 1;
}
.work-detail-wrap .head p a{
	color:#ffffff;
	font-size: .26rem;
	opacity: .5;
}



.work-detail-wrap.cn .btn-lang-cn{
	opacity: 1;
}
.work-detail-wrap.en .btn-lang-en{
	opacity: 1;
}

.work-detail-wrap .head p > i{
	margin:0 .15rem;
}


.detail-group{
	width:92%;
	margin:0 auto ;
	border-top:1px solid #ffffff;
	padding:.45rem 0;
	
}

.detail-group > h6{
	color:#ffffff;
	font-size: .38rem;
	margin-bottom: .3rem;
}
.detail-group > .content{
	color:#ffffff;
	font-size: .28rem;
	line-height: 1.8;

}
.detail-group.intro-info > .content > h6{
	margin-top: 1em;
	color:#ffffff;
	font-size: .28rem;
	line-height: 1.8;
}
.detail-group.intro-info > .content > p{
	text-indent: 2em;
}
.detail-group > .img-list{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 2rem;
	padding-top: .15rem;
}
.detail-group > .img-list img{
	max-width: 100%;
	margin-bottom: .2rem;
}

.lang-cn{
	display: none;
}
.lang-en{
	display: none;
}

.work-detail-wrap.cn .lang-cn{
	display: block;
}
.work-detail-wrap.cn .lang-en{
	display: none;
}

.work-detail-wrap.en .lang-cn{
	display: none;
}
.work-detail-wrap.en .lang-en{
	display: block;
}


.hexagon-wrap{
	display: none;
	position: relative;
	width:2.5rem;
	height:2.5rem;
	overflow: hidden;
	transition:all .5s ease-out;

}
.hexagon-wrap.full{
	transform:scale(8);
	opacity: 0;
}
.hexagon-wrap > .mask{
	position: absolute;
	top:0;
	left:0;
	width:2.5rem;
	height:2.5rem;
	background-image:url(http://www.hanhua.cn:8006/public/uploads/images/hexagon-bg3.png);
	background-size: 2.5rem 2.5rem;
	background-repeat: no-repeat;
	z-index:9;
}
.wave-box{
	position: absolute;
	top:50%;
	left:50%;
	width:2.32rem;
	height:2.32rem;
	z-index:1;
	transform:translate3d(-50%,-50%,0);
}
#percent{
	margin-top: .5rem;
}
.wave {
	display: none;
    width: 408px;
    height: 40%;
    position: absolute;
    left: 0px;
    bottom: 0;
    background: url(http://www.hanhua.cn:8006/public/uploads/images/wave2.png) no-repeat;
    animation: move_wave 1s linear infinite;
    -webkit-animation: move_wave 1s linear infinite;
    z-index:1;
}
@-webkit-keyframes move_wave {
    0% {
        -webkit-transform: translateX(0)
    }

    50% {
        -webkit-transform: translateX(-25%)
    }

    100% {
        -webkit-transform: translateX(-50%)
    }
}

@keyframes move_wave {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(-25%)
    }

    100% {
        transform: translateX(-50%)
    }
}



/*****/
#scale,#img1{
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#scale{
	position:absolute;
	background:#000000;
	overflow: hidden;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
#scale img{
	width:100%;
	height:100%;
}
#img1{
	transition: 0s ease all;
	position:absolute;
	top:0;
	width:1624px;
	height:3146px;
}
#img1.active{
	transition:transform .6s ease-out;
}

.poi-dot.dot-1{
	top:743px;
	left:2715px;
}


.detail-con{
	display: none;
}

/*
@media screen and (min-height: 720px) { 
    .page-index .logo{
		    bottom: 1rem;
	}
  }
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
	.page-index .logo{
		
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}
	

}
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
	
	.page-index .logo{
		
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}
	
}
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
	
	.page-index .logo{
		
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	
}
*/

@supports (bottom: env(safe-area-inset-bottom)) {
    .page-index .logo{
       /*margin-bottom: constant(safe-area-inset-bottom);
       margin-bottom: env(safe-area-inset-bottom);*/
       /*margin-bottom: .5rem;*/
    }  
}

.loadding > .con{
	width:90%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.load-rule-box{
	position: relative;
	width:262px;
	height: 20px;
	display: flex;
	flex-direction: column;
}
.rule-line-1{
	position: absolute;
	top:0;
	left:0;
	
	width:100%;

	z-index:19;
	overflow: hidden;
	
}
.rule-line-1 > .bg{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: #000000;
	z-index:9;
}
.rule-line-1 > .dot-wrap{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	z-index:19;
	width:262px;
	height:20px;
	border-bottom: 1px solid #ffffff;
	box-sizing: border-box;
}
.rule-line-1 > .dot-wrap > span{
	width:1px;
	height:4px;
	background-color: #ffffff;

}
.rule-line-1 > .dot-wrap > span:first-child{
	height:8px;
	width:2px;
}
.rule-line-1 > .dot-wrap > span:last-child{
	margin-right:0;
}
.rule-line-1 > .dot-wrap > span:nth-child(5n+1){
	height:8px;
	width:2px;
}
.rule-line-1 > .dot-wrap > span:nth-child(10n+1){
	height:12px;
}

.rule-line-1.pointer > .dot-wrap > span:first-child{
	background-color: #ffffff;
}
.rule-line-1.pointer > .dot-wrap > span:last-child{
	background-color: #ffffff;
}

.rule-line-1.pointer{
	z-index:29;
}
.rule-line-1.pointer > .bg{
	background-color: #ffffff;
}
.rule-line-1.pointer > .dot-wrap{
	border-bottom: 1px solid #000000;
}
.rule-line-1.pointer > .dot-wrap > span{
	background-color: #000000;
}

.loadding > .con > .percent{
	width:40px;
	text-align: left;
	margin-left:5px;
	margin-top: .2rem !important;
}


.icon-pointer{
	position: absolute;
	display: none;
	width:.5rem;
	height:.56rem;
	background-image: url(http://www.hanhua.cn:8006/public/uploads/images/icon-pointer.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transform:translate3d(0,0,0) scale(.9);
}

.icon-home{
	display: inline-block;
	width:.5rem;
	height:.5rem;
	background-image: url(http://www.hanhua.cn:8006/public/uploads/images/icon-home-v2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-right: .1rem;
}
.icon-compass{
	position: absolute;
    right: .1rem;
    bottom: .1rem;
	display: inline-block;
	width:.98rem;
	height:.79rem;
	background-image: url(http://www.hanhua.cn:8006/public/uploads/images/icon-compass.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.icon-pointer.active{
	-webkit-animation: point .3s  infinite;
    animation: point .3s infinite;
}

@keyframes point {
    0% {
        transform:translate3d(0,0,0) scale(.9);
    }
   
    50% {
        transform:translate3d(5px,5px,0) scale(1);
    }

    100% {
        transform:translate3d(0,0,0) scale(.9);
    }
}
@-webkit-keyframes point {
    0% {
        transform:translate3d(0,0,0) scale(.9);
    }
   
    50% {
        transform:translate3d(5px,5px,0) scale(1);
    }

    100% {
        transform:translate3d(0,0,0) scale(.9);
    }
}