@media screen and (min-width:1025px) {
    .mobile_show {display: none !important}
}
/*header*/
.header {
	width: 100%;
	height: auto;
	margin: 0 auto;
	position: relative;
	text-align: center;
	background-size: 138%;
	/*z-index: 60;*/
}
.header .head_title {
	position: relative;
	margin: 0 auto;
}
.header .head_title_m { display: none;}
.header .app_icon {
    width: 100%;
    left: 0;
    right: 0;
    position: absolute;
    bottom: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header .app_icon > div {
	margin: 0 20px;
	width: 12%;
}
.header .app_icon a:hover { opacity: .7;}

#bgvid {
	backface-visibility: hidden;
	bottom: 0;
	height: auto;
	min-height: 100%;
	min-width: 100%;
	perspective: 1000;
	position: relative;
	width: 100%;
}


/*slideshow*/

.img_title {
	text-align: center
}
.img_title img {
	margin: auto 0;
}

.bg_img { 
	margin: 0 0 -1px 0;
}

.img_title, .news_content, .story_content, .character_content {
	position: absolute;
}

/*news*/

#news {
	top: -10vh;
	position: absolute;
}
.news {
	position: relative;
	/*background: url('../images/PC/BG_2_p.webp') center top;
	background-size: 100%;*/
}

.news .img_title {
	top: 30px;
	width: 100%;
}


.news .news_content {
	top: 150px;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.news .news_content .twitter-frame {
	width: 800px;
	height: 500px;
	z-index: 50;
	margin: 0 auto;
	margin-top: 50px;

	overflow-y: auto;       /* 超出高度时出现竖向滚动条 */
  overflow-x: hidden;     /* 不要横向滚动 */
  border: 1px solid #ddd; /* 可选：给个边框 */
  padding: 1px 0px 50px 100px;           /* 可选：留点内边距 */
  box-sizing: border-box;
}

    .twitter-frame iframe {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
}
.news .news_content img{
	position: absolute;
	width: 1200px;
}

.news .news_content .btn-group {
	display: inline-flex;
	width: 60%;
	margin: 20px 0;
}
.news .news_content .btn-group div {
	width: 20%;
}

.news .news_content .btn-group div.news-arrow {
	width: 3%;
	margin-right: 3%
}


.news .news_content .btn-group img{
	position: relative;
}


.news .news_content .news-frame {
	width: 60%;
	height: 500px;
	background: url('../images/news_bg_m.png') center center;
	background-size: 120%;
}

.news .news_content.mobile_show .news-frame {
	width: 60%;
	height: 500px;
	background: url('../images/news_bg_m.png') center center;
	background-size: 120%;
}

.news .news-table {
	width: 95%;
	margin: 2% auto;
}

.news .news-table tr{
	position: relative;
}

.news .news-table tr:hover{
	background-color: white;
}

.news .news-table tr:hover td,td.first{
	color: #013E6E;
}

.news .news-table td {
	padding: 10px;
	border-bottom: 1px white solid;
	color: white;
	font-size: 20px;
}

.news .news-table td.first {
	border-right: 1px white solid;
	text-align: center;
	color: #A0CCEE;
	width: 10%;
}

.news .news-table td.last {
        border-bottom: 0px;
}

.news .news-table td.rowlink {
        width: 0;
	min-width: 0;
	border: 0;
	padding: 0;
}

.news .news-table td.rowlink {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}	
	
.news .news-table td p {
	margin: 10px;
}

.dog {
	position: absolute !important;
	width: 8% !important;
	bottom: 0;
	right: 21%;
	z-index: 51;
}

.snowflakes {
	overflow: hidden;
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
}

.snowflake {
	color: #fff;
	font-size: 1em;
	font-family: Arial;
	text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}
@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}
.snowflake {
	position: absolute;
	top: -10%;
	z-index: 0;
	-webkit-user-select: none;
	-moz-user-select: one;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
	-webkit-animation-name: snowflakes-fall,snowflakes-shake;
	-webkit-animation-duration: 10s,3s;
	-webkit-animation-timing-function: linear,ease-in-out;
	-webkit-animation-iteration-count: infinite,infinite;
	-webkit-animation-play-state: running,running;
	animation-name: snowflakes-fall,snowflakes-shake;
	animation-duration: 10s,3s;
	animation-timing-function: linear,ease-in-out;
	animation-iteration-count: infinite,infinite;
	animation-play-state: running,running;
}
.snowflake:nth-of-type(1) {
	left: 10%;
	-webkit-animation-delay: 1s,1s;
	animation-delay: 1s,1s;
}
.snowflake:nth-of-type(1)::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 30px 28px 18px;
	border-color: transparent transparent #8ec7e4 transparent;
	transform: rotate(30deg);
}
.snowflake:nth-of-type(2) {
	left: 15%;
	-webkit-animation-delay: 6s,.5s;
	animation-delay: 6s,.5s;
}
.snowflake:nth-of-type(2)::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 8px 15px 22px;
	border-color: transparent transparent #f6f095 transparent;
	transform: rotate(-45deg);
}
.snowflake:nth-of-type(3) {
	left: 20%;
	-webkit-animation-delay: 4s,2s;
	animation-delay: 4s,2s;
}
.snowflake:nth-of-type(3)::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 21px 15px 10px;
	border-color: transparent transparent #d192f5 transparent;
	transform: rotate(-15deg);
}
.snowflake:nth-of-type(4) {
	left: 40%;
	-webkit-animation-delay: 2s,2s;
	animation-delay: 2s,2s;
}
.snowflake:nth-of-type(4)::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 20px 14px 8px;
	border-color: transparent transparent #80adde transparent;
	transform: rotate(-15deg);
}
.snowflake:nth-of-type(5) {
	left: 70%;
	-webkit-animation-delay: 8s,3s;
	animation-delay: 8s,3s;
}
.snowflake:nth-of-type(5)::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 17px 22px;
	border-color: transparent transparent #c8e593 transparent;
}
.snowflake:nth-of-type(6) {
	left: 85%;
	-webkit-animation-delay: 6s,2s;
	animation-delay: 6s,2s;
}
.snowflake:nth-of-type(6)::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 14px 20px 18px;
	border-color: transparent transparent #e29190 transparent;
	transform: rotate(160deg);
}
.snowflake:nth-of-type(7) {
	left: 90%;
	-webkit-animation-delay:2.5s,1s;
	animation-delay:2.5s,1s;
}
.snowflake:nth-of-type(7)::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 24px 16px 8px;
	border-color: transparent transparent #f9f196 transparent;
	transform: rotate(160deg);
}
.snowflake:nth-of-type(8) {
	left: 80%;
	-webkit-animation-delay: 1s,0s;
	animation-delay: 1s,0s;
}

/*story*/
#story {
	top: -10vh;
	position: absolute;
}
.story {
	position: relative;
	/*background: url('../images/PC/BG_3_p.webp') center top;
	padding: 0.5% 0;*/
	background-size: 100%;
}

.story .img_title {
	width: 100%;
	top: 90px;
}

.story .story_content {
	top: 180px;
	width: 100%;
	text-align: center;
	margin: 61px auto 130px auto;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.story .story_content p {
	max-width: 58%;
	margin: 0 auto;
	font-size: 25px;
	line-height: 50px;
	color: #FFF;
	font-weight: bold;
	text-shadow: #344b81 2px 0 2px, #344b81 0 2px 2px, #344b81 -2px 0 2px, #344b81 0 -2px 2px;
}
/*character*/
#character {
	top: -10vh;
	position: absolute;
}
.character {
	position: relative;
	/*background: url('../images/PC/BG_4_p.webp') center top;
	background-size: cover;*/
}


.character .img_title {
    top: 137px;
    width: 100%;
    z-index: 50;
}

.character .img_title img {
	margin-left: -15%;
	width: 30%;
	margin-bottom: -2.8%;
	z-index: 5;
}

.character .character_content {
	top: 175px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}

.character .character_content .img_group {
	max-width: 50%;
	position: relative;
}

.character .character_content img{
	margin: 0 auto;
}

.character .character_content img.hide{
	display: none;
}

.character .character_content div.btn_group{
	position: absolute;
	bottom: 3%;
	left: 10%;
}

.character .character_content div.btn_group button {
	vertical-align: top;
	width: 12%;
	cursor: pointer;
}

.character .character_content div.btn_group button.clicked {
	width: 15%;
}

.system { position: relative;}
#system {
    top: 100px;
    position: absolute;
}
.system .img_title {
    top: 230px;
    width: 100%;
    z-index: 50;
}
.system .system_content {
    position: absolute;
    top: 420px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.system .swipe_area {
    width: 60%;
    position: relative;
}
.system .swipe_area_pad, .system .swipe_area_m { display: none;}

button {
	padding: 0;
	border: none;
	background: transparent;
}

button img {
	display: block;
}

.logo {
	position: relative;
	width: 30%;
	margin: 0 auto;
}

.inline-group {
	display: inline-flex;
	width: 30%;
}

.inline-group span {
	margin: 0 auto;
	font-size: 1.5vw;
}

.inline-group hr {
	width: 20%;
	height:1px; 
	border:none;
	background-color: white;
	color: white;
}

.friend {
	width: 20%;
	display: block;
	margin: 30px auto;
}

.friend_links {
	margin-bottom: 30px;
}
.copyright {
	width: 30%;
	margin: 0 auto;
}
/*----------------------------------------RWD----------------------------------------------*/
@media screen and (max-width:1440px) {

    .download .nigou { top: -28px;}
    .system .swipe_area { width: 80%;}

}
@media screen and (max-width:1440px) {
    .system .swipe_area { width: 88%;}
}
/*----------------------------------------ipad pro-----------------------------------------*/
@media screen and (max-width:1024px) {
	
    .header { background: url(../images/M/BG_1_m.webp) center top no-repeat, #000; background-size: cover;}
    .header .head_title { display: none;}
    .header .head_title_m { display: block;}
    .header .promo { width: 15%; margin-top: 0;}
    .header .download { width: 80%; margin: 1% auto 0 auto; background-size: 1px; padding: 2% 0;}
    .header .logo_m {
        width: 100%;
        position: absolute;
        top: 20px;
        z-index: 51;
    }
    .header .logo_m img{
        width: 30%;
        position: absolute;
        left: 5%;
    }
	.header .app_icon { bottom: 12vw;}
	.header .app_icon > div { width: 30%;}
 
    .download .nigou { top: 0; left: -6vw; width: 24%;}
    .download .ball { top: 10.5vw; right: -7vw; width: 22%;}
    .download .qrcode { width: 30%;}
    .download .store { width: 40%; flex-direction: column;}
    .download .store img { margin: 2px 0; width: auto;}
    
    .header .slideshow { margin: 14% auto 0 auto;}
    #wrapper-sliderTv, #sliderTV, #sliderTV__mask-left, #sliderTV__mask-right { height: 28vw;}
    .sliderTV__item { width: 52%;}
    .sliderTV__prev { left: 22%; top: 12vw;}
    .sliderTV__next { right: 22%; top: 12vw;}
	.sliderTV__prev img, .sliderTV__next img { width: 80%;}

    .news_preview .time { padding: 8px 14% 8px 12%; top: -16px; font-size: 12px; left: -1px;}
    .news_preview .news_title { font-size: 12px; line-height: 16px; height: 50px;}
    .news .news_more span { font-size: 14px;}

    .news .img_title { 
        width: 100%;
        top: 30px;
    }
    .news .news_content {
        top: 60px;
    }

    .news .img_title img {
        width: 60%;
    }

    .news .news_content .twitter-frame {
        width: 80%;
        margin-top: 90px;
        height: 500px;
  	padding: 1px 0px 50px 0px;           /* 可选：留点内边距 */

    }

    .pc_show {display: none !important}
    
    .story .img_title {
        margin: 30px auto 20px auto;
        width: 100%;
        top: 30px;
    }
    .story .img_title img {
        width: 60%
    }
    .story .story_content p {
        font-size: 12px;
        line-height: 25px;
        max-width: 75%;
        margin: 0 auto;
    }
    .story .story_content {
        top: 190px;
        width: 100%;
        z-index: 10;
    }

    .character .character_content {
         width: 100%;
         top: 80px;
     }
    .character .img_title {
        top: 40px;
        width: 100%;
    }
    .character .img_title img, .system .img_title img  {
        margin-left: 0;
        width: 50%;
        margin-bottom: 0;
    }
    .character .character_content div.btn_group_m {
        position: absolute;
        top: 8%;
        right: 6%;
        width: 6%;
    }

    .character .character_content div.btn_group_m button {
        vertical-align: top;
        width: 80%;
        cursor: pointer;
    }

    .character .character_content div.btn_group_m button.clicked {
        width: 100%;
    }
    .system .img_title {
        top: 19vw;
        width: 100%;
    }
    .system .system_content {
        top: 32vw;
    }
    .system .swipe_area_pad {
        display: block;
        width: 100%;
        position: relative;
    }


}
/*----------------------------------------ipad--------------------------------------------*/
/*----------------------------------------------------------------------------------------*/
@media screen and (max-width:767px) {

    
    .download .nigou { top: 0px; left: -27px;}
    .download .ball { top: 48px; right: -30px;}
	.news .news_content { margin: 0 auto 40px auto;}
	.news .news_content .btn-group {
		width: 80%;
		margin: 20px 0 0 0;
	}
	.news .news_content .btn-group div { width: 40%;}
	.news .news_content.mobile_show .news-frame {
		width: 80%;
		background: url(../images/news_bg_m.png) top center no-repeat;
		background-size: auto;
		height: 620px;
	}
	.news .news-table { width: 100%;}
	.news .news-table td {
		font-size: 14px;
		line-height: 1.3;
		letter-spacing: 1px;
	}
	.news .news-table td p {
		margin: 6px;
	}
	.news .news_content .btn-group div.news-arrow {
		width: 7%;
	}


	.inline-group {
		display: inline-flex;
		width: 60%;
	}

	.inline-group span {
		font-size: 3vw;
		margin: 0;
	}

	.inline-group hr {
		width: 20%;
		height:1px; 
		border:none;
		background-color: white;
		color: white;
	}

    .system .swipe_area_pad { display: none;}
    .system .swipe_area_m {
        display: block;
        width: 100%;
        position: relative;
    }

}