﻿.pop .bg {top: 100px;}
.bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-position: 50% 0;background-repeat: no-repeat;pointer-events: none;-webkit-background-size: cover;background-size: cover;}
.bg--bg1 {background-image: url('/skin/default/img/main/main_bg1.png');}
.bg--bg2 {background-image: url('/skin/default/img/main/main_bg2.png');}
.bg--bg2, .bg--bg1 {z-index: 10;}
.ani-show-down {-webkit-animation: show-down .4s ease-out;animation: show-down .4s ease-out;}
.ani-show-down, .ani-show-up {opacity: 1;-webkit-transition: opacity .4s ease-out,-webkit-transform .4s ease-out;transition: opacity .4s ease-out,-webkit-transform .4s ease-out;transition: transform .4s ease-out,opacity .4s ease-out;transition: transform .4s ease-out,opacity .4s ease-out,-webkit-transform .4s ease-out;}
.on-show-down, .on-show-up {opacity: 0;}
@-webkit-keyframes slide-up {0% {-webkit-transform: translateY(100%);transform: translateY(100%)}to {-webkit-transform: translateY(0);transform: translateY(0)}}
@keyframes slide-up {0% {-webkit-transform: translateY(100%);transform: translateY(100%)}to {-webkit-transform: translateY(0);transform: translateY(0)}}
@-webkit-keyframes show-up {0% {-webkit-transform: translateY(30%);transform: translateY(30%);opacity: 0}to {-webkit-transform: translateY(0);
transform: translateY(0);opacity: 1}}
@keyframes show-up {0% {-webkit-transform: translateY(30%);transform: translateY(30%);opacity: 0}to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1}}
@-webkit-keyframes show-down {0% {-webkit-transform: translateY(-2%);transform: translateY(-2%);opacity: 0}to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1}}
@keyframes show-down {0% {-webkit-transform: translateY(-2%);transform: translateY(-2%);opacity: 0}to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1}}
.ani-slide-up {-webkit-animation: slide-up .4s ease-out;animation: slide-up .4s ease-out;-webkit-transition: -webkit-transform .4s ease-out;
transition: -webkit-transform .4s ease-out;transition: transform .4s ease-out;transition: transform .4s ease-out, -webkit-transform .4s ease-out}
.on-show-down,.on-show-up {opacity: 0}
.ani-show-up {-webkit-animation: show-up .4s ease-out;animation: show-up .4s ease-out}
.ani-show-down,.ani-show-up {opacity: 1;-webkit-transition: opacity .4s ease-out,-webkit-transform .4s ease-out;transition: opacity .4s ease-out,-webkit-transform .4s ease-out;transition: transform .4s ease-out,opacity .4s ease-out;transition: transform .4s ease-out,opacity .4s ease-out,-webkit-transform .4s ease-out}
.ani-show-down {-webkit-animation: show-down .4s ease-out;animation: show-down .4s ease-out}

.main_visual {position: relative;z-index: 9;height: 600px;text-align: center;background-repeat: no-repeat;background-position: center center;-webkit-background-size: contain;background-size: contain;}
.main_visual img {margin-bottom: 30px;}
.main_visual h3 {font-size: 36px;color: #000;font-weight: bold;margin-bottom: 50px;}

.game_list {position: relative;z-index: 11;padding-bottom: 90px;}
.glist {margin-left: -13px;margin-right: -13px;}
.glist.mar {margin-bottom: 26px;}
.glist:before {content: "";display: table;}
.glist:after {content: "";display: table;clear:both;}
.glist .item {float:left;width: 25%;padding-right: 13px;padding-left: 13px;}
.glist .item.itemmar {margin-bottom: 26px;}
.glist .item.item2 {width: 50%;}
.glist .item a {display: block;position: relative;}
.glist .item a .tit {font-size: 34px;font-weight: 500;color: #fff;position: absolute;left: 30px;bottom: 30px;z-index: 2;}
.glist.sm_glist .item a .tit {font-size: 22px;left: 25px;}
.glist.sm_glist.mar {margin-bottom: 26px;}
.glist .item a .hover {z-index: 1;opacity:0;filter: alpha(opacity=0);-moz-opacity:0;visibility:hidden;position: absolute;background-color: rgba(252, 92, 57, 0.95);left: 0;bottom: 0;width: 100%;height: 50%;padding: 25px 25px;border-radius:25px;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;}
.glist .item a:hover .hover {opacity:1;filter: alpha(opacity=100);-moz-opacity:1;visibility:visible;}
.glist .item a .hover .htxt {word-break:keep-all;font-size: 15px;color: #fff;font-weight: 400;line-height: 1.4;}
.glist .item a .hover .hmore {position: absolute;left: 27px;bottom: 25px;}
.glist .item.big a .hover {padding: 30px 25px;height:50%;border-radius: 50px;}
.glist .item.big a .hover .htit {font-size: 30px;}
.glist .item.big a .hover .htxt {font-size: 25px;}
.glist .item.big a .hover .hmore {left: 50px;bottom: 50px;}
.glist .item a .hover .hmore .more {border: none;background-color: #fff;display: inline-block;width: 124px;height: 38px;line-height: 38px;border-radius: 25px;padding-left: 20px;}
.glist .item a .hover .hmore .more span {position: relative;font-size: 13px;color: #ff5C37;font-weight: 500;padding-left: 19px;}
.glist .item a .hover .hmore .more span:before {position: absolute;left: 0;top: 5px;content: "";display: block;width: 7px;height: 12px;background-image: url('/skin/default/img/main/ico_plus_red.png');background-repeat: no-repeat;background-position: 0 0;-webkit-background-size: 7px auto;background-size: 7px auto;}
.glist_wrap {margin-bottom: 55px;}
.glist_wrap .item.big .hot,
.glist_wrap .item.big .new {background-repeat: no-repeat;background-position: 0 0;display: inline-block;text-align: center;width: 89px;height: 83px;line-height:75px;position: absolute;left: 20px;top: -6px;font-size: 20px;color: #fff;font-weight: 700;}
.glist_wrap .item.big .hot {background-image: url('/skin/default/img/main/hot_bbadge.png')}
.glist_wrap .item.big .new {background-image: url('/skin/default/img/main/new_bbadge.png')}

.glist_wrap .sm_glist .item .hot,
.glist_wrap .sm_glist .item .new {background-repeat: no-repeat;background-position: 0 0;display: inline-block;padding-top: 17px;text-align: center;width: 60px;height: 56px;position: absolute;left: 20px;top: -6px;font-size: 14px;color: #fff;font-weight: 700;}
.glist_wrap .sm_glist .item .hot {background-image: url('/skin/default/img/main/hot_sbadge.png');}
.glist_wrap .sm_glist .item .new {background-image: url('/skin/default/img/main/new_sbadge.png');}

.notice_list {padding: 85px 0 155px 0;background-color: #f2f2f3;}
.notice_list .notice_list_index {position: relative;z-index: 12;}
.notice_list .notice_title {text-align: center;margin-bottom: 70px;font-size: 46px;font-weight: 700;color: #000;}
.notice_list .list {margin-left: -13px;margin-right: -13px;margin-bottom: 60px;}
.notice_list .list:before {content: "";display: table;}
.notice_list .list:after {content: "";display: table;clear:both;}
.notice_list .list .item {float:left;width:50%;margin-bottom: 25px;padding-left: 13px;padding-right: 13px;}
.notice_list .list .item .item_in {background-color: #fff;border: 2px solid #ddd;border-radius: 25px;padding: 30px 50px;display: block;}
.notice_list .list .item .tit {height: 30px;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;font-size: 20px;color: #000;font-weight: 700;margin-bottom: 20px;font-family: 'Noto Sans';}
.notice_list .list .item .tit span {border-radius:25px;width: 60px;height: 28px;background-color: #f7cc01;font-size: 15px;color: #fff;text-align: center;line-height: 28px;margin-right: 10px;display: inline-block;}
.notice_list .list .item .date {font-size: 14px;color: #bbbbbb;font-weight: 700;}
.people_come {height: 580px;background-image: url('/skin/default/img/main/people_bg.png');background-position: center center;-webkit-background-size: cover;background-size: cover;background-repeat: no-repeat;}
.people_box {margin-left: -13px;margin-right: -13px;height: 100%;position: relative;z-index: 12;}
.people_box:before {content: "";display: table;}
.people_box:after {content: "";display: table;clear:both;}
.people_box .img,
.people_box .txt {float:left;padding-right: 13px;padding-left: 13px;height: 100%;text-align: center;}
.people_box .txt {width: 41.66666667%;}
.people_box .img {width: 58.33333333%;}
.people_box .img {position: relative;}
.people_box .img .background_img {position: absolute;left: 0;bottom: 0;margin-left: -238px;}
.people_box .img .background_img img {display: block;max-width: 100%;}
.people_box .txt .pc_t1 {font-size: 46px;color: #fff;font-weight: 700;margin-bottom: 35px;word-break:keep-all;}
.people_box .txt .pc_t2 {font-size: 18px;color: #fff;font-weight: 500;margin-bottom: 45px;line-height: 1.7;word-break:keep-all;}
.people_box .txt .pc_t3 {text-align: center;word-break:keep-all;}
.people_box .txt .pc_t3 button {padding: 5px 23px 5px 6px;cursor:pointer;text-align:left;background-color: #240950;border-radius:30px;display: inline-block;border: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.people_box .txt .pc_t3 button span {font-size: 16px;line-height:43px;color: #fff;font-weight: 500;display: inline-block;padding-left: 55px;position: relative;}
.people_box .txt .pc_t3 button span:before {width: 43px;height: 43px;content: "";display: block;position: absolute;left: 0;top: 0;background-color: #160238;background-image: url('/skin/default/img/main/ico_plus.png');background-position: center center;-webkit-background-size: 15px auto;background-size: 15px auto;border-radius:50%;background-repeat: no-repeat;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;}
.people_box .txt .pc_t3 button:hover {background-color: #280d57;}
.people_box .txt .pc_t3 button:hover span:before {background-color: #1d0744;transform: rotate(180deg);}

@media (max-width: 1620px) {
	
}
@media (max-width: 1429px) {
	.glist .item a .tit {left: 20px;bottom: 20px;}
	.glist.sm_glist .item a .tit {left: 10px;font-size: 18px;}
	.notice_list .list .item .item_in {padding: 15px;}
	.glist .item a .hover {border-radius:20px;padding: 15px 10px;}
	.glist .item.big a .hover {padding: 20px 20px;border-radius:32px;}
}

@media (max-width: 1259px) {
	.glist .item a .hover {border-radius:15px;padding: 10px;}
	.glist .item a .hover .htit {font-size: 15px;padding-bottom: 5px;margin-bottom: 5px;}
	.glist .item a .hover .htxt {font-size: 13px;}
	.glist .item a .hover .hmore {left: 15px;bottom: 15px;}
	.glist .item a .hover .hmore .more {width: 100px;padding-left: 15px;}
	.glist .item a .hover .hmore .more span {font-size: 12px;padding-left: 12px;}
}


@media (max-width: 1199px) {
	.glist .item a .hover {display: none;}
}

@media (max-width: 991px) {
	.main_visual img {height: 50%; margin-bottom: 15px;}
	.main_visual h3 {font-size: 20px;margin-bottom: 25px;}
	.main_visual {height: 300px;}
	.main_title {font-size: 20px;margin-bottom: 15px;}
	.glist.mar {margin-bottom: 12px;}
	.glist {margin-left: -6px;margin-right: -6px;}
	.glist .item {padding-right: 6px;padding-left: 6px;}
	.glist.sm_glist.mar {margin-bottom: 12px;}
	
	.glist_wrap .item.big .hot,
	.glist_wrap .item.big .new {width: 45px;height: 42px;line-height:35px;left: 10px;top: -3px;font-size: 13px;-webkit-background-size: 45px auto;background-size: 45px auto;}
  	.glist_wrap .sm_glist .item .hot,
  	.glist_wrap .sm_glist .item .new {width: 30px;height: 28px;left: 10px;top: -3px;font-size: 10px;-webkit-background-size: 30px auto;background-size: 30px auto;padding-top: 6px;}

	.glist.sm_glist .item a .tit {font-size: 14px;}
	.glist_wrap {margin-bottom: 25px;}
	.game_list {padding-bottom: 45px;}
	.notice_list {padding: 40px 0 70px 0;}
	.notice_list .notice_title {font-size: 22px;margin-bottom: 35px;}
	.notice_list .list {margin-left: -6px;margin-right: -6px;margin-bottom: 20px;}
	.notice_list .list .item {padding-left: 6px;padding-right: 6px;margin-bottom: 12px;}
	.notice_list .list .item .tit span {width: 40px;font-size: 13px;margin-right: 5px;}
	.notice_list .list .item .tit {font-size: 15px;margin-bottom: 10px;}
	.notice_list .list .item .date {font-size: 13px;}
	.people_come {height: 300px;}
	.people_box .txt .pc_t1 {font-size: 23px;margin-bottom: 15px;}
	.people_box .txt .pc_t2 {font-size: 13px;margin-bottom: 20px;line-height: 1.5em;}
	.people_box .txt .pc_t3 button {padding: 5px 10px 5px 3px;}
	.people_box .txt .pc_t3 button span:before {width: 22px;height: 22px;-webkit-background-size: 8px auto;background-size: 8px auto;}
	.people_box .txt .pc_t3 button span {font-size: 13px;padding-left: 29px;line-height:22px;}
	.people_box .img .background_img {margin-left: -100px;}
	.people_box .img .background_img img {width: 572px;}
	.glist .item a .hover .htxt {display: none;}
	.glist .item a .hover {border-radius: 10px;height: 25%;}
	.pop .bg {top: 60px;}
	.glist .item a .hover {display: none;}
}

@media (max-width: 767px) {
	.main_visual img {height: 39%;}
	.main_visual h3 {font-size: 15px;margin-bottom: 15px;}
	.main_visual {height: 235px;}
	.glist .item.item2 {width: 100%;}
	.glist.sm_glist .item.item2 {width: 50%;}
	.glist .item {width: 50%;margin-bottom: 12px;}
	.glist.mar {margin-bottom: 0;}
	.glist.sm_glist .item.item2 {margin-bottom: 0;}
	.notice_list {padding: 20px 0;}
	.notice_list .notice_title {margin-bottom: 15px;}
	.notice_list .list .item .item_in {padding: 10px 5px;border-radius:5px;}
	.notice_list .list .item .tit span {font-size: 0.8em;margin-right: 3px;width: 30px;height: 20px;line-height: 20px;}
	.notice_list .list .item .tit {height: 20px;font-size: 12px;margin-bottom: 5px;}
	.notice_list .list .item .date {font-size: 12px;}
	.notice_list .list {margin-bottom: 10px;}
	.people_box .img {width: 100%;}
	.people_box .txt {width: 100%;margin-top: 15px;}
	.people_come {height: auto;padding: 20px 0;}
	.people_box .img .background_img {position: static;margin-left: 0;left: auto;bottom: auto;}
	.game_list {padding-bottom: 20px;}
	.glist_wrap {margin-bottom: 10px;}
	.glist .item a .hover {display: none;}
	.notice_list .list .item {width: 100%;}
	.glist .item.big a .tit {left: 30px;bottom: 30px;}
}
@media (max-width: 480px) {
  .glist .item.big a .tit {left: 20px;bottom: 20px;font-size:18px;}
}