@charset "utf-8";

#soldierPage{
	width:960px;
	height:480px;
	position:relative;
}

#pageSubMenuArea{
	position:absolute;
	width:210px;
	height:290px;
	background:url(../images/soldier/submenu_bg_2.png) no-repeat;
	overflow:hidden;
	left:35px;
	top:75px;
	z-index:22;
}
	#pageSubMenuArea h2{
		position:absolute;
		left:10px;
		top:13px;
	}
	#pageSubMenuArea .submenu{
		position:absolute;
		left:16px;
		top:63px;
		width:176px;
		background-image:url(../images/soldier/submenu_list_t.png);
		background-repeat:no-repeat;
		background-position:top;
	}
	#pageSubMenuArea .submenu li a{
		display:block;
		height:37px;
		padding:9px 0 0 30px;
		color:#fff;
		font-weight:bold;
		text-decoration:none;
		text-shadow:0 0 3px #65ebff;
		background-image:url(../images/soldier/submenu_list_bg.png);
		background-repeat:no-repeat;
		background-position:top;
		line-height:1.1;
		font-size:14px;
		position:relative;
	}
	#pageSubMenuArea .submenu li a .sub{
		color:#fff;
		font-size:11px;
		text-shadow:0 0 3px #65ebff;
		font-weight:normal;
	}
	#pageSubMenuArea .submenu li a.on{
		background-position:bottom;
		text-shadow:none;
		cursor:default;
	}
	#pageSubMenuArea .submenu li a.on .sub{
		color:#fff;
		background-position:bottom;
		text-shadow:none;
		font-weight:normal;
		cursor:default;
	}
	#pageSubMenuArea .submenu li a .ico{
		position:absolute;
		top:5px;
		right:6px;
	}
	
.pageMainArea{
	position:absolute;
	width:730px;
	height:330px;
	background:url(../images/soldier/main_bg.png) no-repeat;
	left:195px;
	top:115px;
	z-index:21;
}
	.pageMainArea .content{
		position:absolute;
	}
	.pageMainArea .content h2{
		margin-bottom:15px;
	}
	.pageMainArea .content .txt{
		text-shadow:0 0 3px #65ebff;
		line-height:1.7;
		width:340px;
	}
	.pageMainArea .thumb{
		position:absolute;
		left:86px;
		top:216px;
		width:500px;
		height:128px;
		background:url(../images/soldier/thumb_bg.png) no-repeat 0 0;
	}
	.pageMainArea .thumb ul{
		padding:4px 0 0 4px;
	}
	.pageMainArea .thumb li{
		float:left;
		padding:0 3px 0 0;
	}
	.pageMainArea .img{
		position:absolute;
		overflow:hidden;
	}
	#pageMainArea1 .content{
		position:absolute;
		left:86px;
		top:37px;
	}
	#pageMainArea1 .img{
		left:280px;
		top:0;
		width:443px;
		height:323px;
	}
	#pageMainArea1 .thumb{
		left:86px;
		top:216px;
	}
	#pageMainArea2 .content{
		left:286px;
		top:56px;
	}
	#pageMainArea2 .img{
		left:10px;
		top:-34px;
		width:495px;
		height:357px;
	}
	#pageMainArea2 .thumb{
		left:191px;
		top:216px;
	}
	#pageMainArea3 .content{
		left:86px;
		top:37px;
	}
	#pageMainArea3 .img{
		left:414px;
		top:-16px;
		width:310px;
		height:339px;
	}
	#pageMainArea3 .thumb{
		left:86px;
		top:216px;
	}
	#pageMainArea4 .content{
		position:absolute;
		left:86px;
		top:37px;
	}
	#pageMainArea4 .img{
		left:-22px;
		top:-80px;
		width:746px;
		height:403px;
	}
	#pageMainArea4 .thumb{
		left:86px;
		top:216px;
	}
#photoArea{
	z-index:40;
	position:absolute;
	left:0;
	top:0;
	width:960px;
	height:480px;
}
	#photoArea .bg{
		position:absolute;
		left:0;
		top:0;
		width:960px;
		height:480px;
	}
	#photoArea .photoBg{
		position:absolute;
		left:112px;
		top:45px;
	}
	#photoArea .photo{
		position:absolute;
		left:128px;
		top:61px;
	}
	#photoArea .loading{
		position:absolute;
		left:460px;
		top:240px;
	}
	#photoArea .loading .spin{
		-webkit-transform: rotate(360deg);
		-webkit-animation-name: _spin;
		-webkit-animation-duration: 1s;
		-webkit-animation-iteration-count:  infinite;
		-webkit-animation-timing-function: linear;
		-moz-transform: rotate(360deg);
		-moz-animation-name: _spin;
		-moz-animation-duration: 1s;
		-moz-animation-iteration-count:  infinite;
		-moz-animation-timing-function: linear;
	}
	@-webkit-keyframes _spin {
		from {
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
		}
		to {
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
		}
	}
	@-moz-keyframes _spin {
		from {
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
		}
		to {
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
		}
	}
	#photoArea .close{
		position:absolute;
		left:799px;
		top:61px;
	}
	#photoArea .close a{
		display:block;
		width:33px;
		height:33px;
		text-indent:-9999px;
		background-image:url(../images/story/btn_close.png);
		background-repeat:no-repeat;
		background-position:top;
	}
	#photoArea .close a:hover{
		background-position:bottom;
	}