@charset "utf-8";

/********** pc **********/

/* subject css */
h1 {
	background: url("imgs/logo2.png") no-repeat center center;
	background-size: 100px 28px;
}
#home h2 {
	background: url("imgs/t2.png") no-repeat center center;
	background-size: 194px 19px;
}
#tarot-canee h2 {
	background: url("imgs/t2.png") no-repeat center center;
	background-size: 194px 19px;
}
#tarot-abbr h2 {
	background: url("imgs/t2-tarot-abbr.png") no-repeat center center;
	background-size: 220px 19px;
}
#tarot-reader h2 {
	background: url("imgs/t2-tarot-reader.png") no-repeat center center;
	background-size: 220px 19px;
}
#one-card h2 {
	background: url("imgs/t2-one-card.png") no-repeat center center;
	background-size: 194px 19px;
}
#two-cards h2 {
	background: url("imgs/t2-two-cards.png") no-repeat center center;
	background-size: 194px 19px;
}
#three-cards h2 {
	background: url("imgs/t2-three-cards.png") no-repeat center center;
	background-size: 194px 19px;
}
#four-cards h2 {
	background: url("imgs/t2-four-cards.png") no-repeat center center;
	background-size: 194px 19px;
}
#five-cards h2 {
	background: url("imgs/t2-five-cards.png") no-repeat center center;
	background-size: 220px 19px;
}
#six-cards h2 {
	background: url("imgs/t2-six-cards.png") no-repeat center center;
	background-size: 220px 19px;
}
#seven-cards h2 {
	background: url("imgs/t2-seven-cards.png") no-repeat center center;
	background-size: 220px 19px;
}
#eight-cards h2 {
	background: url("imgs/t2-eight-cards.png") no-repeat center center;
	background-size: 220px 19px;
}
#celtic-cross h2 {
	background: url("imgs/t2-celtic-cross.png") no-repeat center center;
	background-size: 194px 19px;
}
#magic-seven h2 {
	background: url("imgs/t2-magic-seven.png") no-repeat center center;
	background-size: 194px 19px;
}
#cross1 h2 {
	background: url("imgs/t2-cross1.png") no-repeat center center;
	background-size: 194px 19px;
}
#cross2 h2 {
	background: url("imgs/t2-cross2.png") no-repeat center center;
	background-size: 194px 19px;
}
#cross3 h2 {
	background: url("imgs/t2-cross3.png") no-repeat center center;
	background-size: 194px 19px;
}
#pyramid h2 {
	background: url("imgs/t2-pyramid.png") no-repeat center center;
	background-size: 194px 19px;
}
#horseshoe h2 {
	background: url("imgs/t2-horseshoe.png") no-repeat center center;
	background-size: 194px 19px;
}
#dragon-raja h2 {
	background: url("imgs/t2-dragon-raja.png") no-repeat center center;
	background-size: 194px 19px;
}
#alternative h2 {
	background: url("imgs/t2-alternative.png") no-repeat center center;
	background-size: 194px 19px;
}
#awen h2 {
	background: url("imgs/t2-awen.png") no-repeat center center;
	background-size: 194px 19px;
}
#relationship h2 {
	background: url("imgs/t2-relationship.png") no-repeat center center;
	background-size: 194px 19px;
}
#cup-of-relationship h2 {
	background: url("imgs/t2-cup-of-relationship.png") no-repeat center center;
	background-size: 194px 19px;
}
#horoscope h2 {
	background: url("imgs/t2-horoscope.png") no-repeat center center;
	background-size: 194px 19px;
}
#new-year h2 {
	background: url("imgs/t2-new-year.png") no-repeat center center;
	background-size: 194px 19px;
}
#yin-yang h2 {
	background: url("imgs/t2-yin-yang.png") no-repeat center center;
	background-size: 220px 19px;
}
#reading-mind h2 {
	background: url("imgs/t2-reading-mind.png") no-repeat center center;
	background-size: 220px 19px;
}

/* home css */
.home h1 {
	display: block;
}
.home .content .one-card a:before, .home .content .one-card span:before {
	background: #4b6191 url("imgs/home2-one-card.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .two-cards a:before, .home .content .two-cards span:before {
	background: #4b6191 url("imgs/home2-two-cards.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .three-cards a:before, .home .content .three-cards span:before {
	background: #4b6191 url("imgs/home2-three-cards.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .four-cards a:before, .home .content .four-cards span:before {
	background: #4b6191 url("imgs/home2-four-cards.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .five-cards a:before, .home .content .five-cards span:before {
	background: #4b6191 url("imgs/home2-line.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .line a:before, .home .content .line span:before {
	background: #4b6191 url("imgs/home2-line.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .double-line a:before, .home .content .double-line span:before {
	background: #4b6191 url("imgs/home2-double-line.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .celtic-cross a:before, .home .content .celtic-cross span:before {
	background: #4b6191 url("imgs/home2-celtic-cross.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .magic-seven a:before, .home .content .magic-seven span:before {
	background: #4b6191 url("imgs/home2-magic-seven.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .cross a:before, .home .content .cross span:before {
	background: #4b6191 url("imgs/home2-cross.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .pyramid a:before, .home .content .pyramid span:before {
	background: #4b6191 url("imgs/home2-pyramid.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .horseshoe a:before, .home .content .horseshoe span:before {
	background: #4b6191 url("imgs/home2-horseshoe.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .dragon-raja a:before, .home .content .dragon-raja span:before {
	background: #4b6191 url("imgs/home2-dragon-raja.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .alternative a:before, .home .content .alternative span:before {
	background: #4b6191 url("imgs/home2-alternative.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .awen a:before, .home .content .awen span:before {
	background: #4b6191 url("imgs/home2-awen.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .relationship a:before, .home .content .relationship span:before {
	background: #4b6191 url("imgs/home2-relationship.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .cup-of-relationship a:before, .home .content .cup-of-relationship span:before {
	background: #4b6191 url("imgs/home2-cup-of-relationship.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .horoscope a:before, .home .content .horoscope span:before {
	background: #4b6191 url("imgs/home2-horoscope.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .new-year a:before, .home .content .new-year span:before {
	background: #4b6191 url("imgs/home2-new-year.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .yin-yang a:before, .home .content .yin-yang span:before {
	background: #4b6191 url("imgs/home2-yin-yang.png") no-repeat center center;
	background-size: 44px 44px;
}
.home .content .reading-mind a:before, .home .content .reading-mind span:before {
	background: #4b6191 url("imgs/home2-reading-mind.png") no-repeat center center;
	background-size: 44px 44px;
}

/* popup css */
#add .form {
	overflow: hidden;
	width: 180px; height: 140px; border-radius: 6px;
}
#add .form:hover {
	cursor: pointer;
	background-color: #1b2327;
}
#one-card .form {
	background: url("imgs/img2-one-card.png") no-repeat center center;
	background-size: 200px 140px;
}
#two-cards .form {
	background: url("imgs/img2-two-cards.png") no-repeat center center;
	background-size: 200px 140px;
}
#three-cards .form {
	background: url("imgs/img2-three-cards.png") no-repeat center center;
	background-size: 200px 140px;
}
#four-cards .form {
	background: url("imgs/img2-four-cards.png") no-repeat center center;
	background-size: 200px 140px;
}
#five-cards .form {
	background: url("imgs/img2-five-cards.png") no-repeat center center;
	background-size: 200px 140px;
}
#six-cards .form {
	background: url("imgs/img2-six-cards.png") no-repeat center center;
	background-size: 200px 140px;
}
#seven-cards .form {
	background: url("imgs/img2-seven-cards.png") no-repeat center center;
	background-size: 200px 140px;
}
#eight-cards .form {
	background: url("imgs/img2-eight-cards.png") no-repeat center center;
	background-size: 200px 140px;
}
#celtic-cross .form {
	background: url("imgs/img2-celtic-cross.png") no-repeat center center;
	background-size: 200px 140px;
}
#magic-seven .form {
	background: url("imgs/img2-magic-seven.png") no-repeat center center;
	background-size: 200px 140px;
}
#cross1 .form {
	background: url("imgs/img2-cross1.png") no-repeat center center;
	background-size: 200px 140px;
}
#cross2 .form {
	background: url("imgs/img2-cross2.png") no-repeat center center;
	background-size: 200px 140px;
}
#cross3 .form {
	background: url("imgs/img2-cross3.png") no-repeat center center;
	background-size: 200px 140px;
}
#pyramid .form {
	background: url("imgs/img2-pyramid.png") no-repeat center center;
	background-size: 200px 140px;
}
#horseshoe .form {
	background: url("imgs/img2-horseshoe.png") no-repeat center center;
	background-size: 200px 140px;
}
#dragon-raja .form {
	background: url("imgs/img2-dragon-raja.png") no-repeat center center;
	background-size: 200px 140px;
}
#alternative .form {
	background: url("imgs/img2-alternative.png") no-repeat center center;
	background-size: 200px 140px;
}
#awen .form {
	background: url("imgs/img2-awen.png") no-repeat center center;
	background-size: 200px 140px;
}
#relationship .form {
	background: url("imgs/img2-relationship.png") no-repeat center center;
	background-size: 200px 140px;
}
#cup-of-relationship .form {
	background: url("imgs/img2-cup-of-relationship.png") no-repeat center center;
	background-size: 200px 140px;
}
#horoscope .form {
	background: url("imgs/img2-horoscope.png") no-repeat center center;
	background-size: 200px 140px;
}
#new-year .form {
	background: url("imgs/img2-new-year.png") no-repeat center center;
	background-size: 200px 140px;
}
#yin-yang .form {
	background: url("imgs/img2-yin-yang.png") no-repeat center center;
	background-size: 200px 140px;
}
#reading-mind .form {
	background: url("imgs/img2-reading-mind.png") no-repeat center center;
	background-size: 200px 140px;
}

#add #popup {
	position: absolute; right: 0; top: -20px;
}
#add #popup #manual {
	display: none; position: absolute; left: 190px; top: 0;
	width: 215px; padding: 20px; border-radius: 6px;
	line-height: 1.5; font-size: 12px; color: #959c9f;
	background: #1b2327;
}
#add #popup #manual ol,
#add #popup #manual ul {
	margin-bottom: 10px;
}
#add #popup #manual p {
	text-align: justify;
}
#add #popup p.odd {
	margin-top: 10px;
}
#add #popup #manual blockquote {
	margin-top: 10px; padding-top: 10px; border-top: 2px dotted #2c393f;
	text-align: right;
}
#add #popup #manual a {
	text-decoration: none; color: #959c9f;
}
#add #popup #manual cite {
	display: block;
}

#on #popup {
	display: none; position: fixed; top: 60px;
	width: 720px; padding: 20px 0; border-radius: 10px;
	line-height: 1.5; font-size: 15px; color: #333;
	background: #eee;
}
#on #popup .close {
	position: absolute; right: 10px; top: 10px;
	width: 45px; height: 45px;
	background-size: 25px 25px;
}
#on #popup .copy {
	position: absolute; left: 20px; top: 20px;
	width: 115px; height: 30px; border: 0;
	text-align: center; font-size: 15px; color: #eee;
	background: #333;
}
#on #popup .copy-ing {
	position: absolute; left: 20px; top: 20px;
	width: 115px; height: 30px; border: 0;
	text-align: center; font-size: 15px; color: #eee;
	background: #000;
}
#on #popup #scroll {
	overflow: auto;
	margin-top: 42px; padding: 0 20px;
	text-align: justify;
}

/* menu css */
.menu {
	float: right;
	width: 180px;
}
#add .menu {
	margin-top: 50px;
}
#on .menu {
	margin-top: 30px;
}
.menu a {
	float: left;
	width: 88px; height: 30px; margin: 0 1px 2px;
	line-height: 30px; text-align: center; text-decoration: none; font-size: 13px; color: #ddd;
	background: #2c393f;
}
.menu a:hover {
	background: #000;
}
.menu .home a {
	width: 178px; border-radius: 6px 6px 0 0 / 6px 6px 0 0;
}
.menu .small {
	font-size: 10px;
}

/* add css */
#add {
	position: relative;
	width: 580px; margin: 38px auto;
}
#add:after {
	content: ""; display: block; clear: both;
}
#add header {
	float: left;
	width: 340px;
}
#add .tab {
	float: left;
}
#add .content {
	float: left;
}

/* pick css */
.pick .box::-webkit-scrollbar {
	height: 13px;
	border-radius: 5px;
	background: #2c393f;
}
.pick .box::-webkit-scrollbar-track {
	border-radius: 5px;
	background: #2c393f;
}
.pick .box::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: #ddd;
}
.pick .box li label, .pick .box li .swap {
	background: #574b8b url("imgs/card2.png") no-repeat center center;
	background-size: 42px 73px;
}
.pick .box li label {
	margin: 29px 14px 0;
}
.pick .box li .swap {
	margin: 19px 14px 0;
}

/* submit css */
.submit input {
	background: transparent url("imgs/i-chk2.png") no-repeat 0 0;
	background-size: 22px 22px;
}

/* on css */
#on {
	width: 1080px;
}
#on:after {
	content: ""; display: block; clear: both;
}
#on aside {
	clear: right; float: right;
	width: 180px; margin-top: 10px; padding-bottom: 30px;
}
#on aside button {
	float: left; cursor: pointer;
	width: 88px; height: 30px; margin: 0 1px 2px; padding: 0; border: 0;
	font-size: 13px; color: #fff;
	background: #c54a5a;
}
#on aside button:hover {
	background: #af3747;
}
#on .content {
	float: left;
	width: 900px;
}
#on .content p {
	line-height: 32px; font-size: 23px;
}
#on .size1 dt {
	min-height: 23px; padding: 3px 2px 7px;
	line-height: 23px; font-size: 20px;
}
#on .size2 dt, #on .size3 dt {
	min-height: 21px; padding: 3px 1px 5px;
	line-height: 21px; font-size: 18px;
}
@supports (-webkit-touch-callout: none) {
	#on .size1 dt {
		min-height: 25px; padding: 4px 2px 4px;
		line-height: 25px; font-size: 20px;
	}
	#on .size2 dt, #on .size3 dt {
		min-height: 23px; padding: 3px 1px 3px;
		line-height: 23px; font-size: 18px;
	}
}