* {
	margin: 0;
	padding: 0;
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	box-sizing: border-box;
	font-family: "Hiragino Sans GB","Microsoft Yahei",sans-serif;
}
.ab {
	position: absolute;
}

img,
video {
	display: block;
	width: 100%;
}
ul,li{
	list-style: none;
}
.flex-center{
	display: -webkit-flex;
	display: -webkit-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
html,
body{
	position: relative;
	width: 100vw;
	height: 100vh;
	background-color: white;
}
.container,
.cover-box{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.cover-box{
	background-size: cover;
	background-position: 45% center;
	background-repeat: no-repeat;
	background-image: url('bj-1.jpg');
	z-index: 1200;
}
.flex-center{
	display: flex;
	width: 100%;
	height: 100%;
	opacity: 0;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: 45% center;
	background-repeat: no-repeat;
	background-image: url('bj-pc.jpg');
	transition: opacity 1s .5s linear;
}
.title-info{
	opacity: 0;
	width: 65%;
	transition: opacity 1s 2s linear;
}
.cover-title{
	margin: 0 auto 30px;
}
.title-ps{
	opacity: 0;
	transition: opacity .5s 3s linear;
}
.title-ps-pc{
	display: none;
}
.title-info p{
	font-size: 14px;
	text-align: left;
	color: white;
	text-shadow:2px 1px 2px rgba(0,0,0,.5);
}
.btn-cover{
	transform: translateY(30px);
	cursor: pointer;
	letter-spacing: 2px;
	opacity: 0;
	transition: opacity .5s 3s linear;
}
.show .flex-center,
.show .title-info,
.show .title-ps,
.show .btn-cover{
	opacity: 1;
}
.btn-cover span{
	padding: 5px 10px;
	border: 1px solid white;
	color: white;
	font-size: 12px;
	background-color: rgba(0,0,0,.2);
}
.cover-logo{
	position: absolute;
	bottom: 3%;
	left: 50%;
	margin-left: -20px;
	width: 40px;
}
.arrows{
	position: absolute;
	bottom: 15%;
	width: 100%;
	left: 0;
	opacity: 0;
}
.arrow{
	position: absolute;
	display: block;
	padding: 8px;
	width: 35px;
	height: 45px;
	z-index: 300;
	border: 1px solid rgba(255, 255, 255, 0.8);
	cursor: pointer;
}
.arrow.hide{
	display: none;
}
.arrow-left{
	left: 0;
	right: 0;
	border-radius: 0 2px 2px 0;
	background: rgba(29, 28, 28, 0.8)  url(arrow-left.svg) no-repeat center;
	background-size: 30%;
	border-left-width: 0;
}
.arrow-right{
	right: 0;
	border-radius: 2px 0 0 2px;
	background: rgba(29, 28, 28, 0.8) url(arrow-right.svg) no-repeat center;
	background-size: 30%;
	border-right-width: 0;
}
.map-boxs{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    overflow: hidden;
    z-index: 10;
}
.show .arrows,
.show .map-boxs{
	opacity: 1;
}
.map-box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.dml-box{
	background: url('map.jpg') 37% center no-repeat;
	background-size: auto 100%;
	transform-origin: 37% 39%;
	z-index: 150;
}
.dml-layers{
	position: relative;
	width: 100%;
	height: 100%;
}
.dml-layer{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: 37% center;
}
.dml-layer-1{
	background-image: url('map1.svg');
}
.dml-layer-2{
	background-image: url('map2.svg');
}
.layer{
	z-index: -1;
	opacity: 0;
	transition: all .5s .2s linear;
}
.layer.show{
	z-index: 0;
	opacity: 1;
}
.digest-layer{
	background: rgba(0,0,0,.65);
	z-index: 158;

}
.flex-p{
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: 0 35px;
	color: white;
}
.flex-p p{
	margin-bottom: 25px;
	line-height: 1.7;
	text-align: justify;
	font-size: 15px;
}
.tunnel-box{
	background: url('3rd-tunnel.jpg') no-repeat center;
	background-size: cover;
    z-index: 120;
    transform: scale(1.1);
}
.p-t-box{
	z-index: 130;
}
.panmunjom-box{
	z-index: 110
}

.map-inner{
	position: relative;
	width: 5000px;
	height: 3000px;
    margin-left: calc(100vw/2 - 2500px);
    margin-top: calc(100vh/2 - 1500px);
	transform: scale(.5);
	transition: all 0s .5s;
}
.map-p-t{
	position: relative;
	width: 3000px;
	height: 3000px;
	margin-left: calc(100vw/2 - 1500px);
	margin-top: calc(100vh/2 - 1500px);
	transform: scale(1);
}
.map-panmunjom{
}
.map-viewport{
	width: 100%;
	height: 100%;
	transition: all .5s 0s linear;
}
.panmunjom-viewport{
}
.p-t-viewport{
	transform: translate(-300px,-1000px);
	opacity: 0;
}
.map-layer{
	position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.map-tiles{
	display: flex;
    align-content: flex-start;
    justify-content: flex-start;
    flex-flow: wrap;
}
.tile{
	width: 1000px;
	height: 1000px;
}

/*pop layer*/
.pop-layer{
	position: fixed;
	top: 15px;
	left: 15px;
	right: 15px;
	height: 50vh;
	transform: translateY(-110%);
	background-color: rgba(0, 0, 0, 0.75);
	z-index: 1500;
	overflow: hidden;
	color: white;
	transition: transform .3s 0s linear;
}
.pop-layer.show{
	transform: translateY(0);
}
.top-gradient{
	position: absolute;
	left: 0;
	width: 100%;
	height: 40px;
	box-shadow: inset 0px 30px 20px 0px rgba(0, 0, 0, 0.75);
	z-index: 1580;
}

.bottom-gradient{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 40px;
	box-shadow: inset 0px -30px 20px 0px rgba(0, 0, 0, 0.75);
	z-index: 1580;
}
.btn-close-pop{
	position: absolute;
	right: 6px;
	top: 6px;
	width: 25px;
	height: 25px;
	background: url(btn-close.svg) center no-repeat;
	background-size: 50%;
	border: 1px solid #7f7f7f;
	border-radius: 2px;
	z-index: 1590;
}
.pop-inner{
	position:absolute;
	top: 0;
	left: 0;
	bottom: 0;
	margin-top: 35px;
	padding-bottom: 30px;
	width: 100%;
	min-height: 100%;
	-webkit-overflow-scrolling: touch;
	overflow: auto;
}
.pop-box{
	margin: 0px 15px 15px;
}
.cont-title{
	margin-top: 10px;
	padding-bottom: 10px;
	color: #f08300;
}
.pop-box p{
	margin-bottom: 15px;
	line-height: 1.7;
	text-align: justify;
	font-size: 15px;
}
.pop-pic{
    margin: 30px auto 0;
    min-height: 150px;
    background: rgba(255,255,255,.5) url('spinner.svg') no-repeat center;
    background-size: 40px;
}
#jsa-map{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: rgba(0,0,0,.6) url('JSA.png') no-repeat center;
	background-size: 96%;
}
.jsa-map{
	background: none;
}
.pop-box p.pic-caption{
	margin-top: 5px;
	font-size: 14px;
	line-height: 1.5;
	color: #d0d0d0;
}

/*panmunjom building svg*/
.building{
	opacity:0;
	transition: opacity .3s;
	fill:#F08300;
}
.yellow-path{
	fill:#F08300;
}
#hepingzhijia{
	fill:#078FE2;
}
.dml{
	opacity:.8;
	fill:none;
	stroke:#FF1D38;
	stroke-width:8;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
	enable-background:new;
}
.dml-text{fill:#FF1D38;}
.icon-shadow{fill:#CC6D05;}
.building.show{
	opacity: .8;
}
#shaosuo.show,
#banmendianshijian.show,
#route.show{
    opacity: 1;
}
.pop-inner::-webkit-scrollbar {
	width: 6px;height: 6px;
	border-radius: 10px;
	background-color: rgba(99, 99, 99, .4);
}
.pop-inner::-webkit-scrollbar-thumb {
	background-color: rgba(22, 22, 22, .5);
	border-radius: 10px;
	-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
.pop-inner:hover::-webkit-scrollbar-thumb {
	background-color: rgba(240, 131, 0, .8);
	border-radius: 10px;
	-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
.dml-svg-box{
	position: absolute;
	top: 0;left: 0;
	height: 100%;
}
.dml-svg-box svg{
	display: block;
	width: auto;
	height: 100%;
	margin: 0 auto;
	transform: translateX(-21%);
}
.st0{opacity:0.9;fill:#F08300;}
.st1{fill:none;stroke:#F08300;stroke-width:5;stroke-miterlimit:10;}
.st2{fill:#F08300;}
.st3{fill:none;stroke:#F08300;stroke-width:5;stroke-miterlimit:10;stroke-dasharray:13,13;}
.st4{fill:#FFFFFF;}
.st5{font-family: "Hiragino Sans GB","Microsoft Yahei",sans-serif; font-weight:bold;}
.st6{font-size:28px;}
.st7{font-size:24px;}

.end-page{
	position: absolute;
	top: 0;left:0;
	width: 100%; height: 100%;
	z-index: -10;
	background: url('bj-end1.jpg') center no-repeat;
	background-size: cover;
}
.end-page.show-end{
	z-index: 2000;
}
.end-page-wrap{
	position: relative;
	width: 100%;height: 100%;
	background: url('bj-end.jpg') center no-repeat;
	background-size: cover;
	opacity: 0;
	transition: all 1s .5s ease;
}
.end-wrap{
	margin-top:-50px;
	width: 285px;
	text-align: center;
	opacity: 0;
	transition: all .5s 1.5s ease;
}
.end-footer{
	position: absolute;
	bottom: 15px;left: 0;
	width: 100%;
	opacity: 0;
	transition: all .5s 2s ease;
}
.show-end .end-page-wrap,
.show-end .end-wrap,
.show-end .end-footer{
	opacity: 1;
}
.end-footer .paper-logo{
	margin: 0 auto 10px;
	width: 40px;
}
.end-page .flex-p p{
	font-size: 16px;
	font-weight: bold;
	text-shadow:2px 1px 2px rgba(0,0,0,.5);
}
.flex-p .team p{
	margin-bottom: -4px;
	text-align: center;
	font-size: 12px;
	color: #ccc;
	font-weight: normal;
}
.hand-tip-box{
	position: absolute;
	top: 0;left: 0;
	width: 100%;height: 100%;
	background-color: rgba(0,0,0,.8);
	z-index: 1595;
}
.hand-tip{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60px;
	margin-left: -30px;
	margin-top: -38px;
	animation: handTip 1s 0s alternate infinite linear;
}

@media screen and (min-width: 375px){
	.title-info{
		width: 65%;
	}
	.cover-title{
		width: 100%;
	}
}
@media screen and (min-width: 1000px) {
	.cover-box{
		background-image: url('bj-1.jpg');
	}
	.cover-title{
		margin-bottom: 40px;
		width: 70%;
	}
	.title-ps-mobile{
		display: none;
	}
	.title-info{
		width: 30%;
	}
	.title-ps-pc{
		display: block;
	}
	.title-info p{
		text-align: center;
		font-weight: normal;
		font-size: 16px;
	}
	.btn-cover:hover span{
		background-color: rgba(0,0,0,.5);
	}
	.map-inner{
		transform: scale(1);
	}
	.map-p-t{
		transform: scale(1.4);
	}
	.map-tunnel{
		transform: scale(.75);
	}
	.tile{
		transform: scale(1.001);
	}
	.pop-layer{
		top: 0;
		left: auto;
		right: 10%;
		height: 100%;
		width: 30%;
		max-width: 500px;
	}
	.btn-close-pop{}
	.cont-title{
		font-size: 28px;
	}
	.pop-box p{
		margin-bottom: 10px;
		font-size: 16px;
		line-height: 1.7;
	}
	.pop-box p.pic-caption{
		margin-top: 10px;
		font-size: 15px;
	}
	.pop-box{
		margin: 50px 30px 20px;
	}
	#jsa-map{
	    background-size: 50%;
	}
	.arrows{
		bottom: 50%;
	}
	.arrow{
		margin-top: -40px;
		height: 80px;
		width: 40px;
		border: 2px solid rgba(255, 255, 255, .8);
		border-radius: 0;
	}
	.arrow-left{
		background: rgba(29, 28, 28, 1)  url(arrow-left.svg) no-repeat center;
		left: 15px;
		background-size: 40%;
		opacity: .5;
	}
	.arrow-left:hover{
		opacity: 1;
		background: rgb(0, 0, 0)  url(arrow-left.svg) no-repeat center;
		background-size: 40%;
	}
	.arrow-right{
		background: rgba(29, 28, 28, 0.8)  url(arrow-right.svg) no-repeat center;
		right: 15px;
		background-size: 40%;
		opacity:  .5;
	}
	.arrow-right:hover{
		opacity: 1;
		background: rgb(0, 0, 0)  url(arrow-right.svg) no-repeat center;
		background-size: 40%;
	}
	.dml-box,
	.dml-layer{
	    background-size: cover;
	}
	.dml-box{
		transform-origin: 33% 39%;
	}
	.dml-layers{}
	.dml-layer{}
	.dml-svg-box svg{
		transform: translateX(0);
	}
	.digest-layer{}
	.flex-wrap{
		width: 52%;
		max-width: 700px;
	}
	.flex-p p{
		font-size: 16px;
	}
	
	.hand-tip-box{
		display: none;
	}
	.end-page .flex-p p{
		font-size: 18px;
		text-align: center;
	}
	.team{
		text-align: center;
	}
	.flex-p .team p{
		display: inline-block;
		font-size: 12px;
	}
}
@media screen and (min-width: 2500px) {
	.map-p-t{
		transform: scale(1.6);
	}
}
@keyframes handTip{
	from{
		transform: translateY(-20px);
	}
	to{
		transform: translateY(20px);
	}
}