@charset "UTF-8";
	html {
	font-size:15px
}
body,html {
	overflow-x:hidden
}
body {
	margin:0;
	padding:0;
	font-family:MicrosoftYaHei,HYb2gj,YaHei,Aril,sans-serif,Menlo
}
blockquote,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,textarea,ul {
	padding:0;
	margin:0;
	-webkit-box-sizing:border-box;
	box-sizing:border-box
}
table,td,th,tr {
	font-size:12px
}
li {
	list-style-type:none
}
img {
	vertical-align:top;
	border:0
}
ol,ul {
	list-style:none
}
h1,h2,h3,h4,h5,h6 {
	font-size:12px;
	font-weight:400
}
address,cite,code,em,th {
	font-weight:400;
	font-style:normal
}
a {
	text-decoration:none
}
p {
	font-size:1.1rem
}
.color-hover {
	color:#ee4266
}
.txt-white {
	color:#f4f4f4
}
.txt-black {
	color:#222
}
.txt-light {
	color:#ee4266
}
.text-center {
	text-align:center
}
.text-body {
	padding:3rem 0
}
.text-body p {
	font-size:1.4rem;
	font-weight:300;
	line-height:1.8
}
.pd-lr {
	padding:0 10%
}
.title-1 {
	font-size:4rem;
	font-weight:900
}
.title-2 {
	font-size:3.2rem;
	font-weight:600
}
.title-3 {
	font-size:2.4rem;
	font-weight:600
}
.title-4 {
	font-size:2rem
}
.title-5 {
	font-size:1.6rem
}
.title-6 {
	font-size:1.3rem
}
.container {
	padding:2rem 0;
	max-width:1150px
}
.line-bottom {
	display:inline-block;
	position:relative;
	margin:1rem auto
}
.line-bottom::after {
	display:block;
	content:'';
	border-bottom:2px solid #ee4266;
	width:30%;
	padding:.3rem 0;
	margin:0 auto;
	-webkit-transition:.4s;
	transition:.4s
}
.line-bottom:hover::after {
	width:100%
}
.btn {
	max-width:90px;
	display:inline-block;
	padding:.6rem 1.6rem;
	background-color:rgba(0,0,0,.4);
	color:#f4f4f4;
	font-size:1.3rem;
	margin:2rem 0;
	z-index:1;
	-webkit-transition:.4s;
	transition:.4s;
	overflow:hidden
}
.btn-primary {
	position:relative;
	border-left:2px solid #f4f4f4
}
.btn-primary span {
	padding-right:.4rem
}
.btn-primary::before {
	display:block;
	content:'';
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,.9);
	position:absolute;
	left:-100%;
	top:0;
	z-index:-1;
	-webkit-transition:.4s;
	transition:.4s
}
.btn-primary:hover {
	color:#222
}
.btn-primary:hover::before {
	left:0
}
.btn-primary:hover i {
	width:1.6rem;
	right:8px
}
.btn-primary:hover i svg {
	width:1.4rem
}
.btn-primary i {
	display:inline-block;
	width:1.6rem;
	height:1.6rem;
	position:absolute;
	top:0;
	right:1.4rem;
	-webkit-transition:.4s;
	transition:.4s
}
.btn-primary i svg {
	width:0;
	height:1.4rem;
	position:absolute;
	top:9px;
	left:6px
}
.flex {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex
}
.row {
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-ms-flex-flow:row;
	flex-flow:row
}
.justify-center {
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center
}
.justify-space-between {
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between
}
.flex-direction-column {
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column
}
.align-items-center {
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center
}
.info-text {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
	padding:2rem 0;
	margin-top:2rem
}
.info-text h1 {
	text-align:center
}
.contaier {
	padding:2rem 0;
	max-width:1080px;
	margin:0 auto
}
.content {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	max-width:1080px;
	margin:0 auto
}
#loading {
	display:block;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,.95);
	position:fixed;
	z-index:9999
}
#loading .spinner {
	width:50px;
	height:50px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-25px;
	margin-top:-25px
}
#loading .double-bounce1,#loading .double-bounce2 {
	width:100%;
	height:100%;
	border-radius:50%;
	background-color:#6d0e88;
	opacity:.6;
	position:absolute;
	top:0;
	left:0;
	-webkit-animation:sk-bounce 2s infinite ease-in-out;
	animation:sk-bounce 2s infinite ease-in-out
}
#loading .double-bounce2 {
	-webkit-animation-delay:-1s;
	animation-delay:-1s
}
@-webkit-keyframes sk-bounce {
	0%,100% {
	-webkit-transform:scale(0)
}
50% {
	-webkit-transform:scale(1)
}
}#nav {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	position:absolute;
	width:100%;
	height:94px;
	top:0;
	left:0;
	z-index:999
}
.navbar {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	color:#fff;
	width:92%;
	padding:0 10%;
	border-bottom:1px solid rgba(245,245,245,.5)
}
.navbar li {
	min-width:120px;
	text-align:center;
	line-height:94px;
	font-size:1.3rem;
	font-weight:300;
	color:#fff;
	cursor:pointer
}
.navbar li a{
	min-width:120px;
	text-align:center;
	line-height:94px;
	font-size:1.3rem;
	font-weight:300;
	color:#fff;
	cursor:pointer
}
.navbar a:hover {
	color:#ee4266
}
.section {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center
}
.logo {
	position:absolute;
	top:45%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	cursor:pointer
}
.logo-m {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:72px;
	padding:.8rem 0;
	background-color:rgba(255,255,255,.8);
	display:none;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	z-index:1
}
.logo-m img {
	max-height:60px
}
.qr-layer {
	background-color:#f4f4f4;
	position:absolute;
	top:-260px;
	left:15%
}
.qr-layer::after {
	display:block;
	content:'';
	width:12px;
	height:12px;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	position:absolute;
	left:30%;
	bottom:-6px;
	background-color:#f4f4f4
}
.qr-layer img {
	width:100%
}
.item {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column
}
.item-info {
	font-size:1.4rem;
	padding:1rem 0;
	color:#444
}
.intro-icons {
	text-align:center
}
.line-ease {
	position:absolute;
	left:5%;
	bottom:-1rem;
	width:90%;
	height:4px;
	background-image:-webkit-gradient(linear,left top,right top,from(#00bed4),color-stop(#6d0e88),color-stop(#6d0e88),to(#ff7d98));
	background-image:linear-gradient(90deg,#00bed4,#6d0e88,#6d0e88,#ff7d98)
}
.photowall-fullwidth {
	width:100%;
	height:250px;
	background-image:url(../images/photowall-fullwidth.jpg);
	background-repeat:no-repeat;
	background-size:100%;
	margin:100px 0
}
#welcome {
	width:100%;
	height:880px;
	background:url(../images/welcome-bg-01.jpg) no-repeat top center/cover;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	padding:0 15%;
	-webkit-box-pack:start;
	-ms-flex-pack:start;
	justify-content:flex-start;
	position:relative
}
#welcome .welcome-text {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
	margin-top:4rem
}
#welcome .welcome-text h1 {
	margin:2rem 0
}
#welcome .welcome-text h1 span {
	color:#ee4266
}
#welcome p {
	font-size:1.2rem;
	padding:2rem 0
}
#introduction {
	background:url(../images/introduction-bg.png) no-repeat center center/cover
}
#introduction .content {
	margin-bottom:2rem
}
#introduction .content .row {
	padding:4rem 0
}
#introduction .content .row:last-child {
	padding:0 4rem
}
#introduction .content .row .item {
	position:relative;
	padding:2rem 4rem
}
#introduction .content .row .item h3 {
	text-align:center
}
#introduction .content .row .item p {
	text-align:center;
	font-size:1.4rem
}
#games {
	width:100%;
	background:url(../images/games-bg.jpg) no-repeat center center/cover
}
#games .info-text {
	margin-bottom:3rem
}
#games .content {
	width:1080px;
	height:840px;
	position:relative
}
#games .content .game-list {
	cursor:pointer;
	position:absolute;
	top:0;
	left:0;
	-webkit-transition:all .5s ease;
	transition:all .5s ease
}
#games .content .game-list:before {
	content:"";
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1
}
#games .content .game-list .game-item {
	width:1080px;
	height:640px;
	position:relative;
	-webkit-box-shadow:0 4px 10px #b2b2b2;
	box-shadow:0 4px 10px #b2b2b2
}
#games .content .game-list .game-item img {
	width:100%;
	height:640px
}
#games .content .game-list .game-item:not(:first-child) {
	margin-left:140px
}
#games .content .game-list .game-item .game-info {
	max-width:32%;
	position:absolute;
	left:10%;
	top:50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%)
}
#games .content .game-list .game-item .game-info h3,#games .content .game-list .game-item .game-info p {
	color:#f4f4f4
}
#games .content .game-list .game-item .game-info h3 {
	font-size:2.5rem;
	padding:2rem 0;
	font-weight:400
}
#games .content .game-list .game-item .game-info p {
	font-size:1.3rem;
	line-height:1.8;
	font-weight:300
}
#games .content .game-flags ul {
	width:180px;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	position:absolute;
	left:50%;
	bottom:6rem;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%)
}
#games .content .game-flags ul li {
	width:25%;
	height:4px;
	background-color:#cbcbcb;
	cursor:pointer;
	-webkit-transition:all .4s ease;
	transition:all .4s ease
}
#games .content .game-flags ul li:hover {
	background-color:#ee4266
}
#games .content .game-flags ul li.active {
	background-color:#ee4266
}
#feeds {
	width:100%;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center
}
#feeds .info-text {
	margin-bottom:4rem
}
#feeds .content {
	padding-bottom:6rem;
	width:100%;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center
}
#feeds .content #img-list {
	margin-top:1rem;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center
}
#feeds .content #img-list .show-box {
	-webkit-transform:scale(1.1)!important;
	transform:scale(1.1)!important;
	z-index:99!important
}
#feeds .content #img-list img {
	-webkit-transition:.5s;
	transition:.5s;
	max-height:440px;
	z-index:98
}
#feeds .content #img-list img:first-child {
	margin-right:-110px;
	-webkit-transform:scale(.8);
	transform:scale(.8);
	z-index:97
}
#feeds .content #img-list img:first-child:hover {
	-webkit-transform:scale(.9);
	transform:scale(.9)
}
#feeds .content #img-list img:nth-child(2) {
	margin-right:-50px;
	-webkit-transform:scale(.9);
	transform:scale(.9);
	z-index:98
}
#feeds .content #img-list img:nth-child(2):hover {
	-webkit-transform:scale(1);
	transform:scale(1)
}
#feeds .content #img-list img:nth-child(4) {
	margin-left:-50px;
	-webkit-transform:scale(.9);
	transform:scale(.9);
	z-index:98
}
#feeds .content #img-list img:nth-child(4):hover {
	-webkit-transform:scale(1);
	transform:scale(1)
}
#feeds .content #img-list img:last-child {
	margin-left:-110px;
	-webkit-transform:scale(.8);
	transform:scale(.8);
	z-index:97
}
#feeds .content #img-list img:last-child:hover {
	-webkit-transform:scale(.9);
	transform:scale(.9)
}
#join-func {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	width:100%;
	background:url(../images/games-bg.jpg) no-repeat center center/cover
}
#join-func .content {
	padding:4rem 0
}
#join-func .female-join h3,#join-func .male-join h3 {
	font-size:2rem;
	text-align:center;
	padding:2rem 0
}
#join-func .female-join .order-list,#join-func .male-join .order-list {
	padding:2rem 0
}
#join-func .female-join .order-list li,#join-func .male-join .order-list li {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column
}
#join-func .female-join .order-list li .order-top,#join-func .male-join .order-list li .order-top {
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	text-align:center;
	position:relative;
	width:100%;
	z-index:0
}
#join-func .female-join .order-list li .order-top:before,#join-func .male-join .order-list li .order-top:before {
	content:"";
	display:block;
	width:100%;
	height:1px;
	background-color:#afafaf;
	position:absolute;
	left:0;
	top:52%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	z-index:-1
}
#join-func .female-join .order-list li .order-top span,#join-func .male-join .order-list li .order-top span {
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-60%,-50%);
	transform:translate(-60%,-50%);
	color:#f4f4f4;
	font-size:1.2rem
}
#join-func .female-join .order-list li .order-info,#join-func .male-join .order-list li .order-info {
	text-align:center;
	font-size:1.3rem;
	padding:2rem 1rem
}
#feedback .content {
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	min-height:88px
}
#feedback .content .qr-female,#feedback .content .qr-male {
	max-width:240px;
	padding:1rem;
	margin:0 2rem;
	background-color:#ee4266;
	color:#f4f4f4;
}
#feedback .content .qr-female img,#feedback .content .qr-male img {
	width:100%
}
#feedback .content .qr-female p,#feedback .content .qr-male p {
	padding:1rem 0;
	text-align:center
}
#feedback .content .mobile-contact {
	display:none;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center
}
#feedback .content .mobile-contact a {
	padding:.6rem 1.5rem;
	font-size:1.2rem;
	color:#f4f4f4;
	margin:1rem 0
}
#feedback .content .mobile-contact .male-btn {
	background-color:#f90
}
#feedback .content .mobile-contact .female-btn {
	background-color:#ee4266
}
#footer {
	width:100%;
	background-color:#282828;
	border-bottom:1px solid #454545;
	z-index:1
}
#footer .content {
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column
}
#footer .content .icons {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	position:relative;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center
}
#footer .content .icons a {
	color:#f4f4f4;
	padding:1rem;
	-webkit-transition:.3s;
	transition:.3s
}
#footer .content .icons a:hover {
	color:#ee4266
}
#footer .content .links {
	margin-top:2rem;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center
}
#footer .content .links a {
	padding:.5rem 1.2rem;
	color:#f4f4f4;
	font-size:1rem;
	-webkit-transition:.3s;
	transition:.3s;
	-webkit-box-shadow:border-box;
	box-shadow:border-box
}
#footer .content .links a:hover {
	color:#ee4266
}
#copyright {
	background-color:#282828;
	border-top:1px solid #000
}
#copyright p {
	padding:.4rem 0;
	font-size:14px;
	text-align:center;
	color:#f4f4f4
}
#copyright p a{
	padding:.4rem 0;
	font-size:14px;
	text-align:center;
	color:#f4f4f4
}
#copyright p a:hover{
	padding:.4rem 0;
	font-size:14px;
	text-align:center;
	color:#ee4266
}
@media screen and (max-width:768px) {
	.title-1 {
	font-size:2.2rem;
	font-weight:600
}
.title-2 {
	font-size:2rem;
	font-weight:600
}
.title-3 {
	font-size:1.8rem;
	font-weight:600
}
.title-4 {
	font-size:1.6rem
}
.title-5 {
	font-size:1.4rem
}
.title-6 {
	font-size:1.2rem
}
.row {
	padding:2rem 0
}
.info-text {
	margin-top:2rem;
	padding:2rem 0
}
.logo-m {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex
}
.content {
	padding:2rem 1rem
}
.photowall-fullwidth {
	height:180px;
	margin:0;
	background-image:url(../images/photowall-fullwidth-m.jpg);
	background-size:cover
}
#nav {
	display:none
}
#welcome {
	max-height:520px
}
#welcome h1 {
	margin:.5rem 0!important
}
#welcome p {
	padding:.5rem 0
}
#welcome .logo {
	left:50%;
	margin-left:-52.5px
}
#welcome .welcome-text {
	margin-top:20%
}
#introduction .content .row {
	-ms-flex-wrap:wrap;
	flex-wrap:wrap
}
#introduction .content .row .item {
	max-width:50%;
	padding:2rem
}
#introduction .content .row:last-child {
	padding:0;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap
}
#introduction .content .row:last-child .item {
	padding:2rem 1.5rem
}
#games .info-text {
	margin-bottom:2rem
}
#games .content {
	height:540px
}
#games .content .game-list {
	left:6%
}
#games .content .game-list .game-item {
	max-width:600px;
	height:400px
}
#games .content .game-list .game-item img {
	width:100%;
	height:400px
}
#games .content .game-list .game-item .game-info {
	max-width:85%;
	top:45%
}
#games .content .game-flags ul {
	width:80%
}
#footer .content .links {
	display:none
}
}@media screen and (max-width:555px) {
	.qr-layer {
	left:-18%;
	top:-260px
}
.title-1 {
	font-size:1.8rem;
	font-weight:500
}
.title-2 {
	font-size:1.6rem;
	font-weight:600
}
.title-3 {
	font-size:1.5rem;
	font-weight:600
}
.title-4 {
	font-size:1.4rem
}
.title-5 {
	font-size:1.2rem
}
.title-6 {
	font-size:1rem
}
.text-body {
	padding:1rem 0
}
.info-text {
	margin-top:0
}
#feedback .content {
	padding:0;
	min-height:220px
}
#feedback .content .qr-female,#feedback .content .qr-male {
	display:none
}
#feedback .content .mobile-contact {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex
}
#introduction .content .row:last-child .item {
	width:32%;
	padding:.5rem 0
}
#introduction .content .row {
	padding:0
}
#join-func .male-join ul.order-list {
	-ms-flex-wrap:wrap;
	flex-wrap:wrap
}
#join-func .male-join ul.order-list li {
	width:50%
}
#join-func .female-join ul.order-list {
	-ms-flex-wrap:wrap;
	flex-wrap:wrap
}
#join-func .female-join ul.order-list li {
	width:50%
}
#feeds .info-text {
	margin-bottom:2rem
}
#footer .content {
	padding:0
}
#footer .content .icons {
	margin-top:0!important
}
}