body,button,dd,dl,dt,form,h1,h2,h3,h4,h5,h6,hr,input,li,ol,p,td,textarea,th,ul{margin:0;padding:0}
body{font-size:12px; font-family:arial,"Microsoft YaHei",微软雅黑;color:#393939;background:#f8f8f8;}
img{vertical-align:top;}
a img{border:none;}
a{color:#0000ff;text-decoration:none;outline-style:none;}
var,em{font-style:normal}
ul,li{list-style:none}
/* clear folat */
.cf:before,.cf:after{content:" ";display:table;}
.cf:after{clear:both;}
.cf{*zoom:1;}
.part{position:relative;overflow:hidden;}

.mobile-only{display: none}
.pc-only{display: block}
.main{position:relative;z-index:100; }
.part-1{background-image: url("../images/bg.jpg"); background-size:100% 100%; padding-top: 50px;}
@media (max-width:768px){
.part-1{padding-top: 5px;}
}
.chap0{background-image: url("../images/bg-rig.png"); background-repeat: repeat-x;}


.scroll-tip{width:34px;position:fixed;left:50%;bottom:20px;z-index:99999;margin-left:-17px;opacity:0;filter:alpha(opacity=0);}
.scroll-tip img{width:100%;}
.loading{width:100%;height:100%;background:rgba(0,0,0,1);position:fixed;top:0;left:0;z-index:99999;color:#369be2;font-size:14px;text-align:center;padding-top: 30%;}
.loader{width:40px; height: 40px; margin: 0 auto; background-image: url(../images/loader.png); background-size: 100% 100%; -webkit-animation:rotatez2 1s linear infinite;-moz-animation:rotatez2 1s linear infinite;-ms-animation:rotatez2 1s linear infinite;animation:rotatez2 1s linear infinite;}

.loading p{padding-top: 20px; color: #369be2;}

@media (max-width:768px){
	.loading{padding-top: 70%}
}


@-webkit-keyframes rotatez2{
	0% {-webkit-transform:rotate(0deg)}
	100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes rotatez2{
	0% {-moz-transform:rotate(0deg)}
	100%{-moz-transform:rotate(360deg)}
}
@-ms-keyframes rotatez2{
	0% {-ms-transform:rotate(0deg)}
	100%{-ms-transform:rotate(360deg)}
}
@keyframes rotatez2{
	0% {transform:rotate(0deg)}
	100%{transform:rotate(360deg)}
}

@media (max-width:767px){
	.scroll-tip{width:34px;margin-left:-17px;}
}
@media (min-width:768px){
	.scroll-tip{width:180px;margin-left:-90px;}
}

/* bottom */
.bottom{width:100%; padding-top:50px; padding-bottom: 50px; font-size:18px;color:#333; position:relative;z-index:1005; }
.bottom-credits{width: 640px; margin: 0 auto; position: relative;}
.bottom-credits p{font-size:12px; line-height: 24px; color: #999 }
.bottom-credits p b{font-family: arial,"Microsoft YaHei",微软雅黑; font-weight:normal;}

.float-box{}
.cx-logo{width:100px;position:fixed;top:10px;left:10px;z-index:2001;}
.cx-logo img{width:100%;}
@media (max-width:768px){
.cx-logo{display: none;}
/*.cx-logo{width:70px;top:4%;left:1%;}*/
}
/* EUROPE */
.cover{width: 652px; height: 100%;  margin:0 auto;  background-image: url("../images/cover-title.png"); background-repeat: no-repeat; background-size: 95% auto; background-position: 14px 20px }
@media (max-width:768px){
.cover{ background-image: url("");}
}
.cover .intro{ padding-top: 60%; margin:0 auto; }
.cover .intro span{color: #fff;font-weight: bold;font-size: 1.2rem; line-height: 2.4rem;text-align: center;opacity: 0; display: inline-block; width: 100%}
ul.eu-topic{width: 652px; position: absolute; bottom:6%; z-index: 0;display: none;  }

ul.eu-topic li{ z-index: 0; height: 80px; float: left; background-image: url("../images/nav.png")}
.nav1{width: 145px; background-position: 0px 0px; }
.nav2{width: 140px; background-position: -145px 0px; }
.reset-click-area{width: 80px; background-position: -286px 0px;}
.nav3{width: 140px; background-position: -365px 0px;}
.nav4{width: 145px; background-position: -506px 0px;}

ul.eu-topic li:hover{background-position-y: -80px; cursor: pointer;}
ul.eu-topic li.on{background-position-y: -160px; }


ul.eu-card li{cursor:pointer;display:none; z-index: 1001; position: fixed; width: 180px; height: 300px; border-radius: 1.3rem;-webkit-border-radius:1.3rem; text-align: center; top:20%; left: 400px; font-size: .6rem; background-size: 100% 100%; overflow: hidden;}
#card0{background-image: url(../images/1.jpg)}
#card1{background-image: url(../images/2.jpg)}
#card2{background-image: url(../images/3.jpg)}
#card3{background-image: url(../images/4.jpg)}
#card4{background-image: url(../images/5.jpg)}
#card5{background-image: url(../images/6.jpg)}
#card6{background-image: url(../images/7.jpg)}
#card7{background-image: url(../images/8.jpg)}
#card8{background-image: url(../images/9.jpg)}
#card9{background-image: url(../images/1.jpg)}
.shadowfilter {box-shadow: 0px 0px 15px rgba(0,0,0,0.6); }    


ul.eu-card li video{width: 101%;height: 100%; opacity: 0; left:0px; object-fit:fill;  -webkit-border-radius:1.3rem; }
.video-gif{opacity: 0; width: 101%; height: 100%}
.noword{background-color: rgba(255,255,255,0.8); width: 100%; height: 100%; position: absolute; z-index: 9999; top:0; left: 0;  -webkit-border-radius:1.3rem; }
ul.eu-card li .word{position: absolute; text-align: center; width: 94%; height: 100%; display: none; background-color: rgba(188,33,67,0.9); top:0; padding-left: 3%; padding-right: 3%; color: #fff; -webkit-border-radius:1.3rem;  }
ul.eu-card li .word .word-country{
	font-size: 10px; padding: 2px; background-color: #631e2d; width: 36px; margin: 0 auto
}
ul.eu-card li .word .name{
	font-size: 1.3rem; width: 90%; margin: 0 auto; border-bottom: 2px #fff solid; padding-top: 20px; padding-bottom: 5px ; text-align: left;
}
ul.eu-card li .word .line{
	font-size: 0.9rem; width: 80%; margin-left:5%; padding-top: 5px; text-align: left; 
}
.tip{background-image: url("../images/tip.png"); background-size: 100% auto; width: 24px; height: 12px;  position: fixed; bottom:10px; left: 49%; animation:upanddown 1s infinite; -webkit-animation:upanddown 1s infinite;-moz-animation:upanddown 1s infinite;-ms-animation:upanddown 1s infinite; display: none;z-index: 10000;}

.hand{background-image: url("../images/hand.png"); background-size: 100% auto; width: 50px; height: 50px; position: fixed; top:64%; left: 48%; z-index: 10000; animation:upanddown 1s infinite; -webkit-animation:upanddown 1s infinite;-moz-animation:upanddown 1s infinite;-ms-animation:upanddown 1s infinite;display: none;}

@keyframes upanddown{
			0% {transform:translateY(0px)}
			50%{transform:translateY(6px)}
			100% {transform:translateY(0px)}
		}
		@-webkit-keyframes upanddown{
			0% {-webkit-transform:translateY(0px)}
			50%{-webkit-transform:translateY(6px)}
			100% {-webkit-transform:translateY(0px)}
		}
		@-moz-keyframes upanddown{
			0% {-moz-transform:translateY(0px)}
			50%{-moz-transform:translateY(6px)}
			100% {-moz-transform:translateY(0px)}
		}
		@-ms-keyframes upanddown{
			0% {-ms-transform:translateY(0px)}
			50%{-ms-transform:translateY(6px)}
			100% {-ms-transform:translateY(0px)}
		}

.nav-bg{z-index: 1000;width: 100%;position: fixed; height: 50px; opacity:0; top:0px; left: 0px; background-image: url("../images/bg-nav.png"); background-repeat: repeat-x;}
.card-selected-1{background-image: url("../images/card-selected-mask.png"); background-size: 100% 100%; position: absolute; width: 100%; height: 100%; top:0; left: 0; z-index: 9999;  -webkit-border-radius:0.3rem; }
.content{width: 640px;float: left; position: relative; padding-bottom: 30px; padding-top: 30px; border-bottom: #ddd 1px solid}
.top-part{width: 100%; position: relative; margin-bottom: 20px}
.pic{
	width: 40%;
	float: left;
	position: relative;
}
.bio{
	width: 60%;
	float: left;
	color: #333;
	font-size: 1rem;
	line-height: 1.3rem;
	position: relative;
}
.bio .flag img{margin-top:20px; border:#ddd 1px solid; }
.bio .name{
	font-size: 2rem;
	line-height: 2.8rem;
	font-weight: bold;
	margin-top: 10px;
}
.bio .name a{
 color: #333333;
}
.bio .name-en{
	font-size: 1.6rem;
	line-height: 3.3rem;
}
.bio .age{
	line-height: 2.6rem;
}
.bio .party-tag{
	font-size: .7rem;
	color: #999;
}
.bio .party{
	font-weight: bold;
}

.label{width: 100%; float: left; font-size: 1rem; color: #fff; position: relative;}
.label li{background-color: #69adc0; padding: 10px; margin-right: 10px; float: left; display: inline-block; margin-bottom: 10px}

.policy{
	margin-top: 20px;
	width: 100%;
	font-size: 1rem; 
	line-height: 1.8rem;
	position: relative;
	float: left;
}
.policy .view{
	background-image: url("../images/view-icon.png");
	background-repeat: no-repeat;
	padding-left: 40px; 
	margin-bottom: 10px;
	font-weight: bold;
}
.weakness{
	margin-top: 20px;
	width: 100%;
	font-size: 1rem; 
	line-height: 1.8rem;
	position: relative;
	float: left;
}
.weakness p{padding-top: 6px}

.weakness .label{
	background-color: #393939;
	width: 56px;
	text-align: center;
	transform: rotate(-15deg);
	-webkit-transform: rotate(-15deg);
	margin-left: -15px;

}
.election-date{
	margin-top: 20px;
	width: 100%;
	font-size: 1rem; 
	line-height: 1.8rem;
	position: relative;
	float: left;
}

.election-date .icon{
	background-image: url("../images/election-date-icon.png");
	background-repeat: no-repeat;
	padding-left: 32px; 
	margin-bottom: 8px;
	font-weight: bold;
}


.mobile-only{display: none}
@media (max-width:640px){
	ul.eu-card li .word{-webkit-border-radius: 0.6rem;}
	.part-1{background-image: url("../images/bg-m.jpg?1");}
	.cover{    width: 82%; margin-top: 5px;  background-size: 100% auto; background-position: 0px 0px }
	.content{width: 90%; padding-left: 5%; padding-right: 5%}
	.cover .intro{ padding-top: 63%; }
	.cover .intro span{line-height: 2.4rem; font-size: 0.9rem}
	ul.eu-card li{ border-radius: 0.6rem; -webkit-border-radius: 0.6rem;}
	ul.eu-topic{width: 100%; position: absolute; bottom:4%; z-index: 0; }
	ul.eu-topic li{ z-index: 0; height: 80px; float: left; cursor: pointer; background-image: url("../images/nav-m.png"); background-repeat: no-repeat;}
	.nav1{width: 22.2%; background-size: 450% auto}
	.nav2{width: 21.4%; background-size: 467% auto}
	.reset-click-area{width: 12.27%; background-size: 815% auto}
	.nav3{width: 21.4%; background-size: 467% auto}
	.nav4{width: 22.2%; background-size: 450% auto}
	ul.eu-topic li:hover{background-position-y: 0px}
	ul.eu-card li .word .name{font-size: .8rem; width: 94%;padding-top: 5px; text-align: center; }
	ul.eu-card li .word .line{font-size: .6rem; width: 94%; margin-left:3%; padding-top: 5px; text-align: center; }
	.bio .flag img{margin-top:10px; border:#ddd 1px solid; width: 20px }
	.pic{width: 50%}
	.bio{width: 50%; font-size: .9rem}
	.bio .name{font-size: 1.4rem;line-height: 2rem;}
	.bio .name-en{font-size: 1.1rem;line-height: 3rem;}
	.bio .age{line-height: 2.6rem;}
	.label {margin-top: 20px; font-size: .8rem}
	.label li{padding: 6px; margin-right: 10px; float: left; display: inline-block; margin-bottom: 10px}
	.nav-click-area{width: 100%;height: 50px; background-color: rgba(0,0,0,0);display: none; z-index: 100000; position: fixed; top: 0px;}
	.nav-click-area li{width: 11%; height: 100%; cursor: pointer; display: inline-block; float: left;}
	.mobile-only{display: block}
	.tip{background-image: url("../images/tip-m.png");left: 47%;opacity: 0.8}
	.hand{top:24%; left: 16%; width: 60px; height: 60px;background-image: url("../images/hand1.png");}
	.weakness .label{width: 48px; margin-right: 10px}
	.bottom-credits{width: 100%; margin: 0 auto; position: relative;}
	.bottom-credits p{font-size:12px; line-height: 24px; text-align: center; }
	.mobile-only{display: block}
	.pc-only{display: none}
}
.rotate0{-webkit-animation:rotate0 1s;-moz-animation:rotate0 1s;-ms-animation:rotate0 1s;animation:rotate0 1s;transform:rotate(-30deg)}
		@keyframes rotate0{
			0% {transform:rotate(0deg)}
			100%{transform:rotate(-30deg)}
		}
		@-webkit-keyframes rotate0{
			0% {-webkit-transform:rotate(0deg)}
			100%{-webkit-transform:rotate(-30deg)}
		}
		@-moz-keyframes rotate0{
			0% {-moz-transform:rotate(0deg)}
			100%{-moz-transform:rotate(-30deg)}
		}
		@-ms-keyframes rotate0{
			0% {-ms-transform:rotate(0deg)}
			100%{-ms-transform:rotate(-30deg)}
		}
		.rotate1{-webkit-animation:rotate1 1s;-moz-animation:rotate1 1s;-ms-animation:rotate1 1s;animation:rotate1 1s;transform:rotate(-20deg)}
		@keyframes rotate1{
			0% {transform:rotate(0deg)}
			100%{transform:rotate(-20deg)}
		}
		@-webkit-keyframes rotate1{
			0% {-webkit-transform:rotate(0deg)}
			100%{-webkit-transform:rotate(-20deg)}
		}
		@-moz-keyframes rotate1{
			0% {-moz-transform:rotate(0deg)}
			100%{-moz-transform:rotate(-20deg)}
		}
		@-ms-keyframes rotate1{
			0% {-ms-transform:rotate(0deg)}
			100%{-ms-transform:rotate(-20deg)}
		}
		.rotate2{-webkit-animation:rotate2 1s;-moz-animation:rotate2 1s;-ms-animation:rotate2 1s;animation:rotate2 1s;transform:rotate(-10deg)}
		@keyframes rotate2{
			0% {transform:rotate(0deg)}
			100%{transform:rotate(-10deg)}
		}
		@-webkit-keyframes rotate2{
			0% {-webkit-transform:rotate(0deg)}
			100%{-webkit-transform:rotate(-10deg)}
		}
		@-moz-keyframes rotate2{
			0% {-moz-transform:rotate(0deg)}
			100%{-moz-transform:rotate(-10deg)}
		}
		@-ms-keyframes rotate2{
			0% {-ms-transform:rotate(0deg)}
			100%{-ms-transform:rotate(-10deg)}
		}
		.rotate3{-webkit-animation:rotate3 1s;-moz-animation:rotate3 1s;-ms-animation:rotate3 1s;animation:rotate3 1s;transform:rotate(-5deg)}
		@keyframes rotate3{
			0% {transform:rotate(0deg)}
			100%{transform:rotate(-5deg)}
		}
		@-webkit-keyframes rotate3{
			0% {-webkit-transform:rotate(0deg)}
			100%{-webkit-transform:rotate(-5deg)}
		}
		@-moz-keyframes rotate3{
			0% {-moz-transform:rotate(0deg)}
			100%{-moz-transform:rotate(-5deg)}
		}
		@-ms-keyframes rotate3{
			0% {-ms-transform:rotate(0deg)}
			100%{-ms-transform:rotate(-5deg)}
		}
		.rotate5{-webkit-animation:rotate4 1s;-moz-animation:rotate5 1s;-ms-animation:rotate5 1s;animation:rotate5 1s;transform:rotate(5deg)}
		@keyframes rotate5{
			0% {transform:rotate(0deg)}
			100%{transform:rotate(5deg)}
		}
		@-webkit-keyframes rotate5{
			0% {-webkit-transform:rotate(0deg)}
			100%{-webkit-transform:rotate(5deg)}
		}
		@-moz-keyframes rotate5{
			0% {-moz-transform:rotate(0deg)}
			100%{-moz-transform:rotate(5deg)}
		}
		@-ms-keyframes rotate5{
			0% {-ms-transform:rotate(0deg)}
			100%{-ms-transform:rotate(5deg)}
		}
		.rotate6{-webkit-animation:rotate6 1s;-moz-animation:rotate6 1s;-ms-animation:rotate6 1s;animation:rotate6 1s;transform:rotate(10deg)}
		@keyframes rotate6{
			0% {transform:rotate(0deg)}
			100%{transform:rotate(10deg)}
		}
		@-webkit-keyframes rotate6{
			0% {-webkit-transform:rotate(0deg)}
			100%{-webkit-transform:rotate(10deg)}
		}
		@-moz-keyframes rotate6{
			0% {-moz-transform:rotate(0deg)}
			100%{-moz-transform:rotate(10deg)}
		}
		@-ms-keyframes rotate6{
			0% {-ms-transform:rotate(0deg)}
			100%{-ms-transform:rotate(10deg)}
		}
		.rotate7{-webkit-animation:rotate7 1s;-moz-animation:rotate7 1s;-ms-animation:rotate7 1s;animation:rotate7 1s;transform:rotate(20deg)}
		@keyframes rotate7{
			0% {transform:rotate(0deg)}
			100%{transform:rotate(20deg)}
		}
		@-webkit-keyframes rotate7{
			0% {-webkit-transform:rotate(0deg)}
			100%{-webkit-transform:rotate(20deg)}
		}
		@-moz-keyframes rotate7{
			0% {-moz-transform:rotate(0deg)}
			100%{-moz-transform:rotate(20deg)}
		}
		@-ms-keyframes rotate7{
			0% {transform:rotate(0deg)}
			100%{transform:rotate(20deg)}
		}
		.rotate8{-webkit-animation:rotate8 1s;-moz-animation:rotate8 1s;-ms-animation:rotate8 1s;animation:rotate8 1s;transform:rotate(30deg)}
		@keyframes rotate8{
			0% {transform:rotate(0deg)}
			100%{transform:rotate(30deg)}
		}
		@-webkit-keyframes rotate8{
			0% {-webkit-transform:rotate(0deg)}
			100%{-webkit-transform:rotate(30deg)}
		}
		@-moz-keyframes rotate8{
			0% {-moz-transform:rotate(0deg)}
			100%{-moz-transform:rotate(30deg)}
		}
		@-ms-keyframes rotate8{
			0% {-ms-transform:rotate(0deg)}
			100%{-ms-transform:rotate(30deg)}
		}

		.rotate9{-webkit-animation:rotate9 2s;-moz-animation:rotate9 2s;-ms-animation:rotate9 2s;animation:rotate9 2s;}
		@keyframes rotate9{
			0% {transform:scale(0.2) rotate(0deg)}
			100%{transform:scale(1) rotate(720deg)}
		}
		@-webkit-keyframes rotate9{
			0% {-webkit-transform:scale(0.2) rotate(0deg)}
			100%{-webkit-transform:scale(1) rotate(720deg)}
		}
		@-moz-keyframes rotate9{
			0% {-moz-transform:scale(0.2) rotate(0deg)}
			100%{-moz-transform:scale(1) rotate(720deg)}
		}
		@-ms-keyframes rotate9{
			0% {-ms-transform:scale(0.2) rotate(0deg)}
			100%{-ms-transform:scale(1) rotate(720deg)}
		}