@charset "UTF-8";
	/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */* {
	-webkit-box-sizing:border-box;
	box-sizing:border-box
}
html {
	line-height:1.5;
	-webkit-text-size-adjust:100%
}
body {
	margin:0
}
main {
	display:block
}
h1 {
	font-size:2em;
	margin:0.67em 0
}
h1,h2,h3,h4,h5,h6,ol,p,ul {
	margin-top:0
}
hr {
	-webkit-box-sizing:content-box;
	box-sizing:content-box;
	height:0;
	overflow:visible
}
pre {
	font-family:monospace,monospace;
	font-size:1em
}
a {
	background-color:transparent
}
abbr[title] {
	border-bottom:none;
	text-decoration:underline;
	-webkit-text-decoration:underline dotted;
	text-decoration:underline dotted
}
b,strong {
	font-weight:bolder
}
code,kbd,samp {
	font-family:monospace,monospace;
	font-size:1em
}
small {
	font-size:80%
}
sub,sup {
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline
}
sub {
	bottom:-0.25em
}
sup {
	top:-0.5em
}
img {
	border-style:none
}
button,input,optgroup,select,textarea {
	font-family:inherit;
	font-size:100%;
	line-height:1.15;
	margin:0
}
button,input {
	overflow:visible
}
button,select {
	text-transform:none
}
[type=button],[type=reset],[type=submit],button {
	-webkit-appearance:button
}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
	border-style:none;
	padding:0
}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
	outline:1px dotted ButtonText
}
fieldset {
	padding:0.35em 0.75em 0.625em
}
legend {
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	color:inherit;
	display:table;
	max-width:100%;
	padding:0;
	white-space:normal
}
progress {
	vertical-align:baseline
}
textarea {
	overflow:auto
}
[type=checkbox],[type=radio] {
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	padding:0
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
	height:auto
}
[type=search] {
	-webkit-appearance:textfield;
	outline-offset:-2px
}
[type=search]::-webkit-search-decoration {
	-webkit-appearance:none
}
::-webkit-file-upload-button {
	-webkit-appearance:button;
	font:inherit
}
details {
	display:block
}
summary {
	display:list-item
}
template {
	display:none
}
[hidden] {
	display:none
}
figure {
	margin:0;
	padding:0
}
input:focus,select:focus,textarea:focus {
	outline:none
}
.slick-slider {
	position:relative;
	display:block;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-ms-touch-action:pan-y;
	touch-action:pan-y;
	-webkit-tap-highlight-color:transparent
}
.slick-list {
	position:relative;
	overflow:hidden;
	display:block;
	margin:0;
	padding:0
}
.slick-list:focus {
	outline:none
}
.slick-list.dragging {
	cursor:pointer;
	cursor:hand
}
.slick-slider .slick-list,.slick-slider .slick-track {
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0)
}
.slick-track {
	position:relative;
	left:0;
	top:0;
	display:block;
	margin-left:auto;
	margin-right:auto
}
.slick-track:after,.slick-track:before {
	content:"";
	display:table
}
.slick-track:after {
	clear:both
}
.slick-loading .slick-track {
	visibility:hidden
}
.slick-slide {
	float:left;
	height:100%;
	min-height:1px;
	display:none
}
[dir=rtl] .slick-slide {
	float:right
}
.slick-slide img {
	display:block
}
.slick-slide.slick-loading img {
	display:none
}
.slick-slide.dragging img {
	pointer-events:none
}
.slick-initialized .slick-slide {
	display:block
}
.slick-loading .slick-slide {
	visibility:hidden
}
.slick-vertical .slick-slide {
	display:block;
	height:auto;
	border:1px solid transparent
}
.slick-arrow.slick-hidden {
	display:none
}
.slick-loading .slick-list {
	background:#fff url("images/ajax-loader.gif") center center no-repeat
}
@font-face {
	font-family:"slick";
	src:url("/fonts/slick/slick.eot");
	src:url("/fonts/slick/slick.eot?#iefix") format("embedded-opentype"),url("/fonts/slick/slick.woff") format("woff"),url("/fonts/slick/slick.ttf") format("truetype"),url("/fonts/slick/slick.svg#slick") format("svg");
	font-weight:normal;
	font-style:normal
}
.slick-next,.slick-prev {
	position:absolute;
	display:block;
	height:20px;
	width:20px;
	line-height:0px;
	font-size:0px;
	cursor:pointer;
	background:transparent;
	color:transparent;
	top:50%;
	-webkit-transform:translate(0,-50%);
	-ms-transform:translate(0,-50%);
	transform:translate(0,-50%);
	padding:0;
	border:none;
	outline:none
}
.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover {
	outline:none;
	background:transparent;
	color:transparent
}
.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before {
	opacity:1
}
.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before {
	opacity:0.25
}
.slick-next:before,.slick-prev:before {
	font-family:"slick";
	font-size:20px;
	line-height:1;
	color:white;
	opacity:0.75;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}
.slick-prev {
	left:-25px
}
[dir=rtl] .slick-prev {
	left:auto;
	right:-25px
}
.slick-prev:before {
	content:"←"
}
[dir=rtl] .slick-prev:before {
	content:"→"
}
.slick-next {
	right:-25px
}
[dir=rtl] .slick-next {
	left:-25px;
	right:auto
}
.slick-next:before {
	content:"→"
}
[dir=rtl] .slick-next:before {
	content:"←"
}
.slick-dotted.slick-slider {
	margin-bottom:30px
}
.slick-dots {
	position:absolute;
	bottom:-25px;
	list-style:none;
	display:block;
	text-align:center;
	padding:0;
	margin:0;
	width:100%
}
.slick-dots li {
	position:relative;
	display:inline-block;
	height:20px;
	width:20px;
	margin:0 5px;
	padding:0;
	cursor:pointer
}
.slick-dots li button {
	border:0;
	background:transparent;
	display:block;
	height:20px;
	width:20px;
	outline:none;
	line-height:0px;
	font-size:0px;
	color:transparent;
	padding:5px;
	cursor:pointer
}
.slick-dots li button:focus,.slick-dots li button:hover {
	outline:none
}
.slick-dots li button:focus:before,.slick-dots li button:hover:before {
	opacity:1
}
.slick-dots li button:before {
	position:absolute;
	top:0;
	left:0;
	content:"•";
	width:20px;
	height:20px;
	font-family:"slick";
	font-size:6px;
	line-height:20px;
	text-align:center;
	color:black;
	opacity:0.25;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}
.slick-dots li.slick-active button:before {
	color:black;
	opacity:0.75
}
li,ul {
	list-style-type:none;
	margin:0;
	padding:0
}
.menu {
	display:-webkit-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex
}
@media screen and (max-width:1024px) {
	.menu {
	display:none
}
}.menu a {
	line-height:normal
}
.menu a:before {
	height:57%
}
.bar_L p:first-child {
	line-height:15px
}
.header {
	display:none
}
@media screen and (max-width:1024px) {
	.header {
	display:block
}
}body,html {
	position:relative;
	height:100%
}
body {
	margin:0;
	padding:0;
	background-image:url("images/background.png");
	color:#000;
	font-family:"Noto Sans TC",sans-serif;
	line-height:1.8;
	font-size:16px
}
body.akira_hoshihara {
	background-color:#e7cfab
}
body.akira_hoshihara .characters__wrap:before {
	background-color:#725221;
	opacity:.1
}
body.alessio_ghironi {
	background-color:#d5aff2
}
body.alessio_ghironi .characters__wrap:before {
	background-color:#59178b;
	opacity:.1
}
body.elvis_keller {
	background-color:#ebe0a7
}
body.elvis_keller .characters__wrap:before {
	background-color:#78691b;
	opacity:.1
}
body.huaiqing_mu {
	background-color:#5ec1e2
}
body.huaiqing_mu .characters__wrap:before {
	background-color:#0a2c37;
	opacity:.1
}
body.ian_hughes {
	background-color:#bca1d1
}
body.ian_hughes .characters__wrap:before {
	background-color:#3c264d;
	opacity:.1
}
body.liboire_lignac {
	background-color:#f4bbc3
}
body.liboire_lignac .characters__wrap:before {
	background-color:#97192a;
	opacity:.1
}
body.lobos_freire {
	background-color:#e3dcd2
}
body.lobos_freire .characters__wrap:before {
	background-color:#705f46;
	opacity:.1
}
body.nanami_satoshi {
	background-color:#ffcbae
}
body.nanami_satoshi .characters__wrap:before {
	background-color:#ae3e00;
	opacity:.1
}
body.nanami_sora {
	background-color:#ccc
}
body.nanami_sora .characters__wrap:before {
	background-color:#4d4d4d;
	opacity:.1
}
body.ranil_medjed {
	background-color:#f59f9f
}
body.ranil_medjed .characters__wrap:before {
	background-color:#870e0e;
	opacity:.1
}
body.sho_utsunomiya {
	background-color:#c4ccce
}
body.sho_utsunomiya .characters__wrap:before {
	background-color:#434e50;
	opacity:.1
}
body.sohei_sakuraba {
	background-color:#adb1ee
}
body.sohei_sakuraba .characters__wrap:before {
	background-color:#1b2181;
	opacity:.1
}
body.yoonwoo_kang {
	background-color:#d6f0b0
}
body.yoonwoo_kang .characters__wrap:before {
	background-color:#5b871a;
	opacity:.1
}
@media screen and (max-width:680px) and (orientation:portrait) {
	body {
	background-size:60%
}
}input {
	font-family:"Noto Sans TC",sans-serif
}
* {
	-webkit-box-sizing:border-box;
	box-sizing:border-box
}
h1,h2,h3,h4,h5,h6,p {
	margin-top:0
}
a {
	text-decoration:none
}
li,ul {
	margin:0;
	padding:0
}
.quadrant {
	position:fixed;
	right:60px;
	top:40%;
	-webkit-transform:translate(0,-50%);
	-ms-transform:translate(0,-50%);
	transform:translate(0,-50%);
	width:80px;
	z-index:3
}
.quadrant__name {
	text-align:center;
	margin-bottom:.5em
}
.quadrant__icon {
	width:80px;
	position:relative;
	margin:0 auto;
	margin-bottom:10px
}
.quadrant__icon img {
	width:100%;
	height:auto
}
.quadrant__list li {
	width:80px;
	list-style-type:none;
	margin-bottom:5px
}
.quadrant__list .headshort {
	width:100%;
	height:auto;
	border-radius:50%;
	border:2px solid rgba(0,0,0,0.1)
}
@media screen and (max-width:1024px) {
	.quadrant {
	width:60px
}
.quadrant__icon {
	width:60px
}
.quadrant__list li {
	display:inline-block;
	width:60px;
	margin-bottom:0px
}
.quadrant__name {
	font-size:15px;
	margin-bottom:0
}
}@media screen and (max-width:768px) and (orientation:portrait) {
	.quadrant {
	position:absolute;
	right:auto;
	top:70px;
	left:50%;
	-webkit-transform:translate(-50%,0);
	-ms-transform:translate(-50%,0);
	transform:translate(-50%,0);
	width:220px;
	text-align:center
}
.quadrant__name {
	font-size:18px
}
}@media screen and (max-width:680px) and (orientation:portrait) {
	.quadrant {
	top:60px
}
}@media screen and (max-width:414px) and (orientation:portrait) {
	.quadrant {
	width:280px
}
.quadrant__name {
	line-height:1
}
.quadrant__icon {
	display:inline-block;
	margin-right:5px;
	position:relative;
	width:40px
}
.quadrant__icon img {
	position:relative;
	top:13px
}
.quadrant__list {
	display:inline-block;
	width:140px;
	text-align:center
}
.quadrant__list li {
	display:inline-block;
	width:40px;
	margin:0px
}
.quadrant__area.unknown .quadrant__list {
	width:50px
}
}@media screen and (max-height:767px) and (orientation:landscape) {
	.quadrant {
	top:50%
}
}@media screen and (max-height:414px) and (orientation:landscape) {
	.quadrant {
	width:50px;
	right:45px
}
.quadrant__icon {
	width:50px
}
.quadrant__list li {
	width:50px
}
.quadrant__name {
	font-size:12px
}
}.slick-next,.slick-prev {
	width:45px;
	height:45px;
	background-color:none;
	top:60px;
	-webkit-transform:translate(0,0);
	-ms-transform:translate(0,0);
	transform:translate(0,0);
	z-index:11
}
.slick-next svg,.slick-prev svg {
	width:100%;
	height:100%
}
.slick-next:before,.slick-prev:before {
	display:none
}
.slick-prev {
	left:-45px
}
.slick-next {
	right:-45px
}
@media screen and (max-width:1024px) {
	.slick-next,.slick-prev {
	width:40px;
	height:40px;
	top:50px
}
}@media screen and (max-width:768px) and (orientation:portrait) {
	.slick-prev {
	left:30px
}
.slick-next {
	right:30px
}
}@media screen and (max-width:414px) and (orientation:portrait) {
	.slick-next,.slick-prev {
	top:35px
}
.slick-prev {
	left:-15px
}
.slick-next {
	right:-15px
}
}@media screen and (max-height:424px) and (orientation:landscape) {
	.slick-next,.slick-prev {
	top:42px
}
}@media screen and (max-height:414px) and (orientation:landscape) {
	.slick-next,.slick-prev {
	top:30px
}
}.characters {
	position:relative;
	width:100%;
	height:100%
}
.characters__wrap {
	position:absolute;
	width:1080px;
	height:700px;
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%)
}
.characters__wrap:after,.characters__wrap:before {
	content:"";
	left:2.5%;
	top:5%;
	width:95%;
	height:90%;
	position:absolute
}
.characters__wrap:before {
	z-index:0;
	-webkit-transform:rotate(-5deg);
	-ms-transform:rotate(-5deg);
	transform:rotate(-5deg)
}
.characters__wrap:after {
	border:6px solid #fff;
	z-index:1;
	-webkit-transform:rotate(-2deg);
	-ms-transform:rotate(-2deg);
	transform:rotate(-2deg)
}
.characters__cv,.characters__name {
	font-family:"Noto Serif TC",sans-serif
}
.characters__name {
	font-weight:bold;
	font-size:48px;
	margin-bottom:0;
	line-height:1.2
}
.characters__name span {
	font-size:.87em
}
.characters__cv {
	font-size:24px;
	font-weight:bold;
	margin-bottom:0;
	line-height:2
}
.characters__fullbody {
	position:absolute;
	z-index:2;
	height:100%;
	left:5%
}
.characters__fullbody img {
	height:100%;
	width:auto
}
.characters__content {
	position:absolute;
	z-index:2;
	opacity:.45;
	right:4.5%;
	width:360px;
	top:50%;
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%)
}
.characters__voice li {
	width:50px;
	list-style-type:none;
	display:inline-block;
	cursor:pointer
}
.characters__voice li svg {
	width:100%;
	height:auto;
	opacity:.5
}
.characters__voice li.active svg,.characters__voice li:hover svg {
	opacity:1
}
.characters__zodiac {
	font-size:100px;
	line-height:1.5;
	position:absolute;
	left:-470px
}
.characters__info {
	position:absolute;
	left:-600px;
	text-align:left;
	margin-top:430px;
	width:25em
}
.characters__info li {
	list-style-type:none
}
@media screen and (max-width:1279px) {
	.characters__wrap {
	width:900px;
	height:540px;
	margin-top:-2%;
	left:2%;
	-webkit-transform:translate(0,-50%);
	-ms-transform:translate(0,-50%);
	transform:translate(0,-50%)
}
.characters__name {
	font-size:40px
}
.characters__cv {
	font-size:24px
}
.characters__content {
	font-size:14px;
	width:340px
}
.characters__zodiac {
	font-size:80px;
	left:-340px
}
.characters__info {
	left:-480px
}
}@media screen and (max-width:1024px) {
	.characters__wrap {
	width:840px;
	height:504px
}
.characters__name {
	font-size:35px
}
.characters__content {
	width:300px;
	font-size:13px
}
.characters__zodiac {
	font-size:80px;
	left:-350px
}
.characters__info {
	left:-470px
}
.characters__description br {
	display:none
}
}@media screen and (max-width:768px) and (orientation:portrait) {
	.characters__wrap {
	width:95vw;
	height:90vw;
	left:50%;
	top:260px;
	-webkit-transform:translate(-50%,0%);
	-ms-transform:translate(-50%,0%);
	transform:translate(-50%,0%)
}
.characters__fullbody {
	left:0%;
	-webkit-transform:translate(0%,0%);
	-ms-transform:translate(0%,0%);
	transform:translate(0%,0%)
}
.characters__content {
	top:47%;
	-webkit-transform:translate(0%,-50%);
	-ms-transform:translate(0%,-50%);
	transform:translate(0%,-50%);
	position:absolute;
	width:40%;
	left:56%;
	right:auto;
	height:auto
}
.characters__name {
	font-size:30px
}
.characters__cv {
	font-size:20px
}
.characters__zodiac {
	font-size:60px;
	left:auto;
	position:relative
}
.characters__info {
	margin-top:0;
	text-align:left;
	left:auto;
	position:relative;
	margin-bottom:1em
}
}@media screen and (max-width:680px) and (orientation:portrait) {
	.characters__wrap {
	width:95vw;
	height:133vw
}
.characters__wrap:after {
	border:3px solid #fff
}
.characters__name {
	font-size:4.5vw
}
.characters__cv {
	font-size:3vw;
	margin-bottom:.5em
}
.characters__fullbody {
	width:58%;
	left:-2%;
	-webkit-transform:translate(0%,-50%);
	-ms-transform:translate(0%,-50%);
	transform:translate(0%,-50%);
	top:50%;
	height:auto
}
.characters__fullbody img {
	height:auto;
	width:100%
}
.characters__zodiac {
	font-size:40px
}
.characters__content {
	font-size:12px;
	width:38%;
	top:50%;
	left:59%
}
.characters__info {
	width:auto
}
}@media screen and (max-width:424px) and (orientation:portrait) {
	.characters__wrap {
	top:260px
}
.characters__content {
	line-height:1.3
}
.characters__voice li {
	width:40px
}
}@media screen and (max-width:414px) and (orientation:portrait) {
	.characters__wrap {
	width:95vw;
	height:123.5vw;
	top:165px
}
.characters__zodiac {
	display:none
}
.characters__voice li {
	width:35px;
	margin-right:5px
}
}@media screen and (max-width:320px) and (orientation:portrait) {
	.characters__wrap {
	width:95vw;
	height:123.5vw;
	top:135px
}
.characters__voice li {
	width:30px;
	margin-right:3px
}
.characters__content {
	font-size:10px
}
.characters__description {
	display:none
}
}@media screen and (max-height:767px) and (orientation:landscape) {
	.characters__wrap {
	left:45%;
	width:80vw;
	height:40vw
}
.characters__fullbody {
	left:30%
}
}@media screen and (max-height:563px) and (orientation:landscape) {
	.characters__zodiac {
	left:-365px
}
.characters__info {
	left:-515px
}
}@media screen and (max-height:424px) and (orientation:landscape) {
	.characters__wrap {
	-webkit-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	left:42%
}
.characters__zodiac {
	left:-270px
}
.characters__info {
	left:-375px;
	font-size:12px
}
.characters__content {
	width:30vw
}
.characters__description {
	font-size:12px
}
}@media screen and (max-height:414px) and (orientation:landscape) {
	.characters__wrap {
	width:75vw;
	height:45vw
}
.characters__content {
	width:25vw
}
.characters__fullbody {
	left:28%
}
.characters__name {
	font-size:3vw
}
.characters__cv {
	font-size:2vw
}
.characters__description br {
	display:none
}
.characters__voice li {
	width:40px
}
.characters__zodiac {
	font-size:7vw;
	left:-230px
}
.characters__info {
	left:-305px;
	width:10em
}
}@media screen and (max-height:375px) and (orientation:landscape) {
	.characters__description,.characters__info {
	line-height:1.3
}
.characters__zodiac {
	font-size:7vw;
	left:-31.5vw
}
.characters__info {
	left:-43vw
}
}@media only screen and (max-width:812px) and (max-height:375px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:3) {
	.characters__zodiac {
	left:-32vw
}
.characters__info {
	left:-41vw
}
}@media screen and (max-height:320px) and (orientation:landscape) {
	.characters__wrap {
	left:37%;
	width:65vw;
	height:48.75vw
}
.characters__description,.characters__zodiac {
	display:none
}
.characters__fullbody {
	left:5%;
	-webkit-transform:translate(0,-50%);
	-ms-transform:translate(0,-50%);
	transform:translate(0,-50%);
	top:50%
}
.characters__content {
	width:30vw
}
.characters__info {
	position:relative;
	margin-top:0;
	text-align:left;
	left:auto;
	margin-bottom:1em
}
}.nanami_sora .characters__zodiac {
	left:-417px;
	margin-top:-.2em
}
@media screen and (max-width:1279px) {
	.nanami_sora .characters__zodiac {
	left:-300px
}
}@media screen and (max-width:1024px) {
	.nanami_sora .characters__zodiac {
	left:-310px
}
}@media screen and (max-width:768px) and (orientation:portrait) {
	.nanami_sora .characters__zodiac {
	left:auto;
	position:relative
}
}@media screen and (max-height:563px) and (orientation:landscape) {
	.nanami_sora .characters__zodiac {
	left:-26vw
}
}@media screen and (max-height:414px) and (orientation:landscape) {
	.nanami_sora .characters__zodiac {
	left:-28vw
}
}@media only screen and (max-width:812px) and (max-height:375px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:3) {
	.nanami_sora .characters__zodiac {
	left:-29vw
}
}.nanami_sora .characters__name {
	margin-bottom:.3em
}
@media screen and (max-width:320px) and (orientation:portrait) {
	.nanami_sora .characters__description {
	display:block
}
}@media screen and (max-height:320px) and (orientation:landscape) {
	.nanami_sora .characters__description {
	display:block
}
}body.akira_hoshihara .akira_hoshihara__icon .headshort,body.alessio_ghironi .alessio_ghironi__icon .headshort,body.elvis_keller .elvis_keller__icon .headshort,body.huaiqing_mu .huaiqing_mu__icon .headshort,body.ian_hughes .ian_hughes__icon .headshort,body.liboire_lignac .liboire_lignac__icon .headshort,body.lobos_freire .lobos_freire__icon .headshort,body.nanami_satoshi .nanami_satoshi__icon .headshort,body.nanami_sora .nanami_sora__icon .headshort,body.ranil_medjed .ranil_medjed__icon .headshort,body.sho_utsunomiya .sho_utsunomiya__icon .headshort,body.sohei_sakuraba .sohei_sakuraba__icon .headshort,body.yoonwoo_kang .yoonwoo_kang__icon .headshort {
	border:2px solid #333
}
.charMain {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex
}
.charMain__items {
	width:20%;
	overflow:hidden;
	position:relative;
	text-align:center;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	cursor:pointer
}
.charMain__items>* {
	width:100%
}
@media screen and (orientation:landscape) {
	.charMain__items.wind {
	color:#b6ff53
}
.charMain__items.wind .charMain__bg {
	background-image:url("images/wind.jpg")
}
.charMain__items.wind .charMain__bg span {
	background-image:url("images/wind_hover.jpg")
}
.charMain__items.wind .charMain__zodiacList li {
	color:#b6ff53;
	border-color:#b6ff53
}
.charMain__items.wind .charMain__btn span {
	color:#b6ff53
}
.charMain__items.wind:hover .charMain__btn span {
	color:#a2cf66
}
.charMain__items.earth {
	color:#b1a785
}
.charMain__items.earth .charMain__bg {
	background-image:url("images/earth.jpg")
}
.charMain__items.earth .charMain__bg span {
	background-image:url("images/earth_hover.jpg")
}
.charMain__items.earth .charMain__zodiacList li {
	color:#b1a785;
	border-color:#b1a785
}
.charMain__items.earth .charMain__btn span {
	color:#b1a785
}
.charMain__items.earth:hover .charMain__btn span {
	color:#b1a785
}
.charMain__items.unknown {
	color:#c1c1c1
}
.charMain__items.unknown .charMain__bg {
	background-image:url("images/unknown.jpg")
}
.charMain__items.unknown .charMain__bg span {
	background-image:url("images/unknown_hover.jpg")
}
.charMain__items.unknown .charMain__zodiacList li {
	color:#c1c1c1;
	border-color:#c1c1c1
}
.charMain__items.unknown .charMain__btn span {
	color:#c1c1c1
}
.charMain__items.unknown:hover .charMain__btn span {
	color:#c1c1c1
}
.charMain__items.fire {
	color:#ffa0a0
}
.charMain__items.fire .charMain__bg {
	background-image:url("images/fire.jpg")
}
.charMain__items.fire .charMain__bg span {
	background-image:url("images/fire_hover.jpg")
}
.charMain__items.fire .charMain__zodiacList li {
	color:#ffa0a0;
	border-color:#ffa0a0
}
.charMain__items.fire .charMain__btn span {
	color:#ffa0a0
}
.charMain__items.fire:hover .charMain__btn span {
	color:#ffa0a0
}
.charMain__items.water {
	color:#86f8ff
}
.charMain__items.water .charMain__bg {
	background-image:url("images/water.jpg")
}
.charMain__items.water .charMain__bg span {
	background-image:url("images/water_hover.jpg")
}
.charMain__items.water .charMain__zodiacList li {
	color:#86f8ff;
	border-color:#86f8ff
}
.charMain__items.water .charMain__btn span {
	color:#86f8ff
}
.charMain__items.water:hover .charMain__btn span {
	color:#42c8d0
}
.charMain__items:hover {
	color:#fff
}
.charMain__items:hover .charMain__title {
	margin-bottom:0
}
.charMain__items:hover .charMain__bg>div {
	opacity:1
}
.charMain__items:hover .charMain__bg span {
	display:block;
	-webkit-transform:scale(1.1);
	-ms-transform:scale(1.1);
	transform:scale(1.1)
}
.charMain__items:hover .charMain__zodiacList li {
	border-color:#fff;
	color:#fff
}
.charMain__items:hover .charMain__icon img {
	display:none
}
.charMain__items:hover .charMain__icon img:last-child {
	display:block
}
.charMain__items:hover .charMain__btn span {
	border-color:#fff;
	background-color:#fff
}
}.charMain__content {
	position:relative;
	z-index:1
}
.charMain__bg {
	z-index:0;
	background-size:cover;
	background-position:center;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%
}
.charMain__bg>div {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	opacity:0;
	-webkit-transition:all .1s;
	-o-transition:all .1s;
	transition:all .1s
}
.charMain__bg span {
	-webkit-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
	position:absolute;
	background-size:cover;
	background-position:center;
	width:100%;
	height:100%;
	left:0;
	top:0
}
.charMain__title {
	font-family:"Noto Serif TC",sans-serif;
	font-size:30px;
	margin-bottom:0.3em
}
.charMain__icon {
	text-align:center
}
.charMain__icon img {
	width:37.5%;
	margin-bottom:10px
}
.charMain__icon img:last-child {
	display:none;
	width:26.73%;
	margin:0 auto 15px
}
.charMain__zodiacList {
	margin-bottom:30px;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center
}
.charMain__zodiacList li {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	margin:0 5px;
	border-width:2px;
	border-style:solid;
	width:54px;
	height:54px;
	border-radius:5px;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	font-size:30px;
	overflow:hidden
}
.charMain__zodiacList li span {
	position:relative;
	top:-.05em
}
/*.charMain__zodiacList li.capricorn span {
	top:-0.1em
}
.charMain__zodiacList li.leo span {
	top:-0.15em
}
.charMain__zodiacList li.taurus span {
	top:.05em
}
.charMain__zodiacList li.scorpio span {
	top:-0.1em
}*/
.charMain__btn span {
	display:inline-block;
	border-width:2px;
	border-style:solid;
	font-family:"Noto Serif TC",sans-serif;
	width:8em;
	line-height:2.1;
	font-size:16px;
	height:2.5em;
	overflow:hidden;
	border-radius:1.25em
}
@media screen and (max-width:1024px) {
	.charMain {
	padding-top:50px
}
}@media only screen and (orientation:landscape) and (max-width:1023px) {
	.charMain__zodiacList {
	display:none
}
}@media screen and (orientation:portrait) {
	.charMain {
	display:block
}
.charMain__items {
	width:100%;
	height:80vw;
	color:#fff
}
.charMain__items.wind {
	color:#fff
}
.charMain__items.wind .charMain__bg {
	background-image:url("images/wind.jpg")
}
.charMain__items.wind .charMain__bg>div {
	opacity:1
}
.charMain__items.wind .charMain__bg span {
	background-image:none;
	background-color:rgba(0,0,0,0.5);
	display:block
}
.charMain__items.wind .charMain__btn span {
	color:#a2cf66
}
.charMain__items.earth {
	color:#fff
}
.charMain__items.earth .charMain__bg {
	background-image:url("images/earth.jpg")
}
.charMain__items.earth .charMain__bg>div {
	opacity:1
}
.charMain__items.earth .charMain__bg span {
	background-image:none;
	background-color:rgba(0,0,0,0.5);
	display:block
}
.charMain__items.earth .charMain__btn span {
	color:#b1a785
}
.charMain__items.unknown {
	color:#fff
}
.charMain__items.unknown .charMain__bg {
	background-image:url("images/unknown.jpg")
}
.charMain__items.unknown .charMain__bg>div {
	opacity:1
}
.charMain__items.unknown .charMain__bg span {
	background-image:none;
	background-color:rgba(0,0,0,0.5);
	display:block
}
.charMain__items.unknown .charMain__btn span {
	color:#c1c1c1
}
.charMain__items.fire {
	color:#fff
}
.charMain__items.fire .charMain__bg {
	background-image:url("images/fire.jpg")
}
.charMain__items.fire .charMain__bg>div {
	opacity:1
}
.charMain__items.fire .charMain__bg span {
	background-image:none;
	background-color:rgba(0,0,0,0.5);
	display:block
}
.charMain__items.fire .charMain__btn span {
	color:#ffa0a0
}
.charMain__items.water {
	color:#fff
}
.charMain__items.water .charMain__bg {
	background-image:url("images/water.jpg")
}
.charMain__items.water .charMain__bg>div {
	opacity:1
}
.charMain__items.water .charMain__bg span {
	background-image:none;
	background-color:rgba(0,0,0,0.5);
	display:block
}
.charMain__items.water .charMain__btn span {
	color:#42c8d0
}
.charMain__title {
	font-size:5vw
}
.charMain__content {
	padding-top:15vw
}
.charMain__icon img:first-child {
	display:none
}
.charMain__icon img:last-child {
	display:block;
	width:20%
}
.charMain__zodiacList {
	display:none
}
.charMain__btn span {
	font-size:2.5vw;
	background-color:#fff;
	border-color:#fff;
	border-radius:5px
}
}