/* 全局元素 */
body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	color:#fff;
	font-size:18px;
	font-weight:400;
	font-family:'Oswald', sans-serif;
	background-color:#000;
	line-height:1;
}

/* 容器 */
.bg-container {
	position: relative;
	width: 100%;
	height: 100vh;
	background: url('../img/bj.png') no-repeat center center;
	background-size: cover;
}

.page-content {
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:110;
	position:absolute;
	text-align:center;
	margin:0 auto 0 auto;
}

.snow-box
{
	width:90%;
	min-height:80px;
	margin:0 auto 0 auto;
	background-color:#f4f4f4;
	-moz-border-radius:3px;
	-webkit-border-radius:16px;
	border-radius:16px;
	position:relative;
	-moz-box-shadow:0 8px 20px rgba(0,0,0,0.8);
	-webkit-box-shadow:0 8px 20px rgba(0,0,0,0.8);
	box-shadow:0 8px 20px rgba(0,0,0,0.8);
}

.shadow-box
{
	padding:16px 0;
	background:-moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.23) 50%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background:-webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.23) 50%,rgba(0,0,0,0.2) 55%,rgba(0,0,0,0) 75%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background:radial-gradient(ellipse at center,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.23) 50%,rgba(0,0,0,0.2) 55%,rgba(0,0,0,0) 75%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

@media screen and (max-width:740px), screen and (max-height:740px)
{
	.snow-box:before
	{
		top:-6px;
		background-size:contain;
		height:32px;
	}
	
	.snow-box:after
	{
		top:-20px;
		right:-30px;
		width:57px;
		height:54px;
	}
}

@media screen and (orientation:portrait)
{
	.snow-box
	{
		max-width:80vw;
	}
}

@media screen and (orientation:landscape)
{
	.snow-box
	{
		max-width:72vh;
	}
}

@media screen and (max-width:359px)
{
	.shadow-box
	{
		padding:10px 0;
	}
}

/* SNOW BOX COUNTER */

.snow-box .countdown
{
	text-align:center;
	display:block;
	clear:both;
	padding-top:5px;
}

.snow-box .countdown:before,
.snow-box .countdown:after
{
	content:'';
	display:block;
	clear:both;
	width:100%;
	height:1px;
}

.snow-box .countdown .countdown-box
{
	display:block;
	width:25%;
	float:left;
}

.snow-box .countdown .countdown-number
{
	margin:0;
	font-weight:700;
	display:block;
	color:#43a6f3;
	border-bottom:1px solid #b4b4b4;
	padding:15px 0;
}

.snow-box .countdown .countdown-title
{
	margin:0;
	color:#555;
	display:block;
	text-transform:uppercase;
	background-color:#e7e7e7;
	border-top:1px solid #fff;
	padding:15px 0;
}

.snow-box .countdown .countdown-box:first-child .countdown-title
{
	-webkit-border-bottom-left-radius: 16px;
	border-bottom-left-radius: 16px;
}

.snow-box .countdown .countdown-box:last-child .countdown-title
{
	-webkit-border-bottom-right-radius: 16px;
	border-bottom-right-radius: 16px;
}

@media screen and (orientation:portrait)
{
	.snow-box .countdown .countdown-number
	{
		font-size:8vw;
	}
	
	.snow-box .countdown .countdown-title
	{
		font-size:2.2vh;
	}
}

@media screen and (orientation:landscape)
{
	.snow-box .countdown .countdown-number
	{
		font-size:6.2vh;
	}
	
	.snow-box .countdown .countdown-title
	{
		font-size:2.8vh;
	}
}

/* 页面内容 */
body
{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	color:#fff;
	font-size:18px;
	font-weight:400;
	font-family:'Oswald', sans-serif;
	background-color:#000;
	line-height:1;
	
}

h1, h3, h4, h5, h6
{
	font-size:40px;
	font-weight: 900;
	margin-bottom:20px;
	font-family: Helvetica, sans-serif;
	text-transform:uppercase;
	color:#F9F4DC;
}
h2 {
	font-size:50px;
	font-weight: 900;
	margin-bottom:20px;
	font-family: Helvetica, sans-serif;
	text-transform:uppercase;
  text-shadow: 5px 5px 15px #000;
	color:#F9F4DC;
	display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 25vh; /* 设置容器高度为视口高度 */
}

/* 盒子 */
.box{
    background-color: rgba(102,204,255);
    width: 200px;
    height: 100px;
    border: 3px solid #ff0;
    bottom: 50px;
    left: 10px;
    border-radius: 10px;
    position: fixed;
		}
    		.box::before{
    			content: '';
    			width: 0;
    			height: 0;
    			border: 20px solid;
    			position: absolute;
    			bottom: -40px;
    			left: 15px;
    			border-color:  #ff0 transparent transparent;
    		}
    		 .box::after{
    			content: '';
    			width: 0;
    			height: 0;
    			border: 20px solid;
    			position: absolute;
    			bottom: -36px;
    			left: 15px;
    			border-color:  #66ccff transparent transparent;
    		}