@import url(/static/public/css/layout.css);

body {
	background: url(/static/public/images/tarot/divine/bg.gif) center 0;
	font-size: 14px;
	color: #222
}

#wraper {
	width: 1000px;
	margin: 0 auto;
}

.top_bar,
.menu,
.menu-l,
.menu-r {
	background: url(/static/public/images/tarot/divine/repeat-x-1.gif);
}

.top_bar {
	height: 36px;
}

.top_bar .inner {
	width: 990px;
	margin: 0 auto;
}

.top_bar .logo,
.menu li,
.menu a,
.main .m-t h4,
.m-r dl dt,
.period li em,
.m-r dl dd li,
.main .m-l h4,
.period label span,
.t-tips {
	background: url(/static/public/images/tarot/divine/img.gif) no-repeat;
}

.top_bar .logo {
	width: 140px;
	height: 27px;
	margin-top: 3px;
	float: left;
}

.top_bar ul {
	float: right;
	line-height: 36px;
}

.top_bar ul li {
	float: left;
	margin: 0 10px;
	font-size: 14px;
}

.m-top {
	background: url(/static/public/images/tarot/divine/top.gif);
	height: 120px;
	margin-top: 10px;
	width: 990px;
}

.menu {
	height: 47px;
	background-position: -10px -83px;
	width: 990px;
}

.menu-l {
	height: 47px;
	width: 9px;
	background-position: -10px -36px;
	background-repeat: no-repeat;
	float: left;
}

.menu-r {
	height: 47px;
	width: 10px;
	background-position: 0px -36px;
	background-repeat: no-repeat;
	float: right;
}

.main .m-t,
.main .m-c,
.main .m-b,
.m-c-m {
	background: url(/static/public/images/tarot/divine/main.jpg);
}

.menu ul {
	height: 30px;
}

.menu li {
	float: left;
	background-position: 0 -40px;
	width: 146px;
	text-align: center;
	padding-left: 17px;
}

.menu li.l0 {
	background: transparent;
	padding-left: 0;
}

.menu li a {
	display: block;
	text-indent: -200px;
	overflow: hidden;
	width: 100px;
	height: 30px;
	margin: 0 auto
}

.menu li.l0 a {
	background-position: 0 -80px;
}

.menu li.l1 a {
	background-position: 0 -110px;
}

.menu li.l2 a {
	background-position: 0 -140px;
}

.menu li.l3 a {
	background-position: 0 -170px;
}

.menu li.l4 a {
	background-position: 0 -200px;
}

.menu li.l5 a {
	background-position: 0 -230px;
}

.main {}

.main .m-t {
	height: 74px;
}

.main .m-b {
	height: 82px;
	background-position: 0 -74px;
}

.main .m-c {
	background-position: -1000px 0;
}

.main .m-c-m {
	background-position: 0 -226px;
	background-repeat: no-repeat;
}

.list {
	padding: 10px 50px;
}

.list h4 {
	clear: both;
}

.list li {
	float: left;
	width: 220px;
	margin: 10px;
	background: #e8dcc8;
	padding: 10px;
	background-position: 0 -430px;
	height: 90px;
}

.list li strong a {
	color: #765936;
}

.list li p {
	padding: 5px 0;
	color: #967353
}

.main .m-l {
	float: left;
	width: 630px;
	padding-left: 30px;
}

.main .m-l h4 {
	font-size: 25px;
	color: #A00000;
	text-align: center;
	height: 50px;
	line-height: 50px;
	background-position: -180px -100px;
	width: 280px;
	margin: 0 auto;
}

.main .m-l .t-text {
	padding-bottom: 10px;
	color: #333;
	display: block;
	width: 540px;
	margin: 0 auto;
	line-height: 20px;
}

.main .m-l .t-text p {
	margin: 10px 0;
}

.divien_box {
	width: 540px;
	margin: 0 auto;
	padding: 10px 0;
}
.divien_box .c_img {
	text-align: center; padding: 30px 0;
}
.divien_box .flash_box {
	width: 480px;
	margin: 0 auto;
}


.period label {
	float: left;
	height: 32px;
}

.period label span {
	text-align: center;
	font-weight: 700;
	background-position: -370px 0;
	width: 62px;
	height: 32px;
	display: block;
	color: #553f2a;
	line-height: 27px;
	margin: 0 auto;
	color: #f0e4d5;
}

.period ul {
	width: 100%;
}

.period li {
	float: left;
	text-align: center;
	padding: 10px;
	font-size: 12px;
	overflow: visible;
	box-sizing: border-box;
}

.period li span {
	height: 147px;
	position: relative;
}

.period li.pre span {
	cursor: pointer;
	display: block;
	width: 98px;
	height: 147px;
	font-size: 40px;
	color: #DBC8A8;
	margin: 0 auto;
}

.period li.pre span.rotate_1 {
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.8660253882408142, M12=-0.5, M21=0.5, M22=0.8660253882408142, sizingMethod='auto expand');
}

.period li.pre span.rotate_2 {
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	filter: progid:DXImageTransform.Microsoft.Matrix(m11=0.8660253882408142, m12=0.5, m21=-0.5, m22=0.8660253882408142, sizingMethod='auto expand');
}

.period li.pre span.rotate {
	margin-top: -20px;
	height: 167px;
	position: relative;
}

.period li.pre span .face {
	position: absolute;
	margin: 0 auto;
	top: 0;
	left: 0;
	width: 100%;
	display: inline-block;
}

.period li.pre span strong {
	padding: 5px;
	display: block;
	line-height: 137px;
}

.period li.pre img {
	width: 98px;
	height: 147px;
	display: inline-block;
}

.period li.pre span>img {
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
	border-radius: 8px;
	overflow: hidden;
}

.period li.pre a {
	display: block;
	height: 147px;
	overflow: hidden;
}

.period li.pre a img {
	padding: 4px;
	width: 90px;
	height: 139px;
}

.period li em {
	display: block;
	margin: 10px auto 5px;
	background-position: -240px 0;
	width: 60px;
	height: 25px;
	cursor: pointer;
}

.period li em.on {
	background-position: -180px 0;
}

.period li.tip span {
	animation: prescale .2s;
}

@keyframes prescale {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}
}

.period li.tip em {
	background-position: -300px 0;
	width: 70px;
}

.period li.pre p {
	margin: 0 5px
}

.btn_div {
	margin-top: 30px;
	text-align: center;
}

.btn_div a {
	width: 118px;
	height: 44px;
	display: inline-block;
	margin: 0 15px;
}

.btn_div a {
	background: url(/static/public/images/tarot/divine/btn_pn_1.gif);
}

.btn_div a.p {}

.btn_div a.n {
	background-position: -118px 0;
}

.btn_div a.die {
	background-image: url(/static/public/images/tarot/divine/btn_pn_2.gif);
}

.main .b-text {
	color: #333;
	margin-top: 20px;
	text-align: left;
	line-height: 30px;
}

.main .b-text p {
	margin: 10px 0;
}

.main .result_str p {
	margin: 15px 0;
	line-height: 200%;
	margin: 15px 0;
	text-indent: 30px;
	font-size: 15px;
}

.main .m-l .pre_info {
	text-align: center;
}

.main .m-l .pre_info strong {
	font-size: 18px;
	color: #900000;
}

.main .m-l .pre_info img {
	display: block;
	margin: 0 auto 15px;
}

.main .m-r {
	width: 320px;
	float: left;
	margin-left: 10px;
}

.main .m-t h4 {
	height: 30px;
	background-position: 78px -280px;
	margin-top: 25px;
	margin-left: 10px;
	width: 320px;
	float: right;
}

.pre_box em i {
	display: block;
	width: 90px;
	height: 138px;
	background: url(/static/public/images/tarot/divine/pre_img.png);
	background-size: cover;
}

.pre_list {
	position: relative; height: 150px; margin: 30px 0;
}
.pre_list img {	
	width: 90px;
	position: absolute;
	box-shadow: 1px 1px 6px rgba(60, 45, 37, .4);
	border-radius: 8px;
	left: 0;
	top: 0;
}
.pre_list.img_animate img {
	transition: all 0.3s;
}
.pre_select {
	padding: 35px 0 0 220px;
	height: 250px;
	overflow: hidden
}

.pre_select em {
	display: inline-block;
	width: 90px;
	height: 500px;
	margin-right: -90px;
}

.pre_select em.over i {
	background: #ca8058;
}

.pre_select em i {
	box-shadow: 1px 1px 6px rgba(60, 45, 37, .4);
	border-radius: 8px;
	overflow: hidden;
}

.pre_select em i:hover {
	transform: translateY(-15px);
}

.pre_selbox {
	text-align: center;
	display: -webkit-box;
	margin: 15px auto 20px;
	display: flex;
	justify-content: space-evenly;
}

.pre_selbox em {
	display: block;
	width: 80px;
	height: 123px;
	margin: 0 5px;
}

.pre_selbox em i {
	margin: 0 auto;
	display: block;
	width: 80px;
	height: 123px;
	background: url(/static/public/images/tarot/divine/card_sel_bg.png) no-repeat;
	background-size: contain;
}

.pre_selbox em i.pre_active {
	background-image: url(/static/public/images/tarot/divine/pre_img.png);
	box-shadow: 1px 1px 6px rgba(60, 45, 37, .4);
	border-radius: 8px;
}
.pre_select_num {
	text-align: center;
	margin-bottom: 20px;
	color: #8e6553;
	font-size: 15px;
	font-weight: 500;
}

.pre_select_num strong {
	font-size: 18px;
	color: #A00000
}

.m-r dl {
	margin: 10px auto 0;
	clear: both;
	width: 260px;
}

.m-r dt {
	margin: 0;
	height: 25px;
}

.m-r dl.dt1 dt {
	background-position: 90px -310px;
}

.m-r dl.dt2 dt {
	background-position: 90px -340px;
}

.m-r dl.dt3 dt {
	background-position: 90px -370px;
}

.m-r dl.dt4 dt {
	background-position: 90px -400px;
}

.m-r dl dd {
	background-position: 0 -430px;
	padding: 5px 0 10px;
}

.m-r dl dd li {
	float: left;
	width: 110px;
	height: 30px;
	margin: 5px 10px;
	background-position: -180px -40px;
	line-height: 31px;
	text-align: center;
	font-weight: 700;
	overflow: hidden;
}

.m-r dl dd li a {
	color: #6b4d35;
	height: 30px;
	display: block;
}

.footer {
	text-align: center;
	color: #976e52;
	margin: 20px 0;
}

.footer .link {
	height: 30px;
}

.footer .link a {
	color: #976e52;
	margin: 0 5px;
}

.t-tips {
	position: absolute;
	background-position: -280px -40px;
	width: 70px;
	height: 26px;
	line-height: 26px;
	color: #fff;
	text-align: center;
	color: #d3c8a8;
	font-size: 13px;
	top: 0;
	left: 14px;
}

.m-copy {
	background: url(/static/public/images/tarot/divine/text_copy.gif);
	width: 465px;
	height: 14px;
	overflow: hidden;
	margin: 15px 0 0 100px;
	display: inline-block;
}