body{
    margin:0;
    padding:0;
    background: #f9f9f9;
    color:#333333;
}
a{
	color: #333333;
	text-decoration: none;
}
a:link{
	text-decoration: none;
}
*{
    box-sizing: border-box;
}
p{
	line-height: 1.8em;
}
table{
	width:100%;
	border-collapse:collapse;
}
tr{
	height:50px;
	line-height: 50px;
	border-bottom: solid 1px #D4D4D4;
}



.w-50{
	width:50%;
}
header{
    width:970px;
    margin:0 auto;
    padding:15px;
    border-bottom: solid #d4d4d4 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color:#333333;
	height: 72px;
}
article{
	min-height: calc(100vh - 222px);
}
.logo{
    font-family: 'Dosis', sans-serif;
    font-size: xx-large;
    font-weight: 500;
}

.container{
    width:970px;
    margin:0 auto;
}

.full-container{
	width:100%;
}

.tab-box{
	border-bottom: #e6e6e6 solid 1px;
	display: flex;
	flex-direction: row;
	margin-bottom:10px;
}
.tab-item{
	padding-bottom: 10px;
	color:#333;
	/* padding:0 20px; */
	text-align: center;
	flex:1;
}
.current-tab{
	border-bottom: solid 2px #7ed214;
	font-weight: bold;
	font-size: large;
	flex:1;
	text-align: center;
}
.search-box{
	/* padding:0 30px; */
	display: flex;
	justify-content: center;
}

.search-input{
	flex:1;
	height:50px;
	line-height: 50px;
	border:5px solid #7ed214;
	margin-right:5px;
	padding-left:10px;
}
.search-btn{
	height:50px;
	background: #7ed214;
	color:white;
	border-radius: 0;
	border:none;
	padding:0 15px;
}

.down-btn{
	background: #7ed214;
	color:white;
	border-radius: 5px;
	border:none;
	padding:10px 15px;
}

.resource-box{
	display: flex;
	align-items: center;
	padding:10px 15px;
	background: #e6f4e5;
	border-radius: 7px;
	width:150px;
	justify-content: center;
	margin-bottom: 15px;
}
.resource-box-sm{
	display: flex;
	align-items: center;
	padding:10px 15px;
	/* background: #e6f4e5; */
	/* border-radius: 7px; */
	/* width:25%; */
	/* justify-content: center; */
}
.resource-box-sm img{
	height:20px;
	margin-right:5px;
	border-radius: 3px;
	vertical-align: middle;
}
.resource-box>img{
	height:30px;
	width:auto;
	margin-right:10px;
	border-radius: 5px;
}
footer{
    width:970px;
    margin:0 auto;
    padding:15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color:#333333;
	border-top:solid 1px #d4d4d4;
	height:150px;
}

input:focus{
	outline: none;
}


.cover{
    /* position: relative; */
    width:280px;
    /* height:150px; */
    /* background: #000; */
    overflow: hidden;
	cursor: pointer;
}
.cover>img{
    /* width:280px; */
    height:150px;
}
.cover:hover>.preview-box{
    display: flex;
}
.preview-box{
    position:absolute;
    top:0;left:0;
    width:280px;
    height:150px;
    background:rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index:9;
}

.player-box{
    width:500px;
    /* height:400px; */
    background:white;
    position:relative;
}

.player-box>#player{
    width:500px;
    height:300px;
    min-width: 500px;
}

.modal{
	width:100vw;
	height:100vh;
	position: fixed;
	top:0;
	z-index:999;
	background: rgba(0,0,0,0.5);
	display: none;
	justify-content: center;
	align-items: center;
}

.dialog{
	border-radius: 10px;
	width:500px;
	background: #ffffff;
	display: none;
	position:relative;
}

.guide-title{
	height: 120px;
	background: url("/images/bg-guide.webp") no-repeat;
	background-size: 100% 100%;
}

.close-modal-icon{
    position: absolute;
    width:30px;
    height:30px;
    top:-15px;
    right:-15px;
}

.close-modal-icon>img{
    width: 100%;
    height:100%;
}

.download-tip{
    /* background: white;
    padding:5px 10px; */
    position:absolute;
    right:5px;
    top:165px;
}

#download-info{
    padding:0 15px;
}
.tip-msg{
    background: white;
    padding: 10px;
    border-radius: 5px;
}
.triangle {
    width: 0;
    height: 0;
    border-top: 5px solid #333333;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    float:right;
    margin-left:5px;
    margin-top:12px;
}

.download-app-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	padding:10px 20px;
	background: #7ed214;
	/* color:white;  */
	border-radius: 5px;
	background:#d6f5b2;
	color:darkgreen;
	border:solid 1px #7ed214;
	font-weight: bold;
	cursor: pointer;
}

.download-app-btn:hover{
	background:#7ed214;
	color:white;
	/* border:solid 1px #d6f5b2; */

}

.download-app-btn:hover img{
	filter: drop-shadow(-30px 0px 0px white);

}

.app-btn-box{
	width:30px;
	height:30px;
	overflow:hidden;
	margin-right:10px;
}
.download-app-btn img{
	width:30px;
	height:30px;
	/* margin-right:10px; */
	transform: translateX(30px);
	filter: drop-shadow(-30px 0px 0px darkgreen);
}


.link-box{
	display: flex;
	flex-direction: row;
}


.lang-list{
	position:absolute;
	top:0px;
	margin-top:30px;
	background:#f9f9f9;
	z-index:99;
	display: none;
}

.lang-list a{
	color:#888;
}

.lang-list a:hover{
	color:#333;
}

.lang-box{
	height:32px;
	height:32px;
	overflow:hidden;
	position: relative;
	z-index:99;
	
}



.lang-box:hover{
	overflow: inherit;
	/* background: rgba(0,0,0,0.5); */
	/* height:auto; */
}

.lang-box:hover .current-lang{
	border-top:solid 2px #7ed214;
	border-left:solid 2px #7ed214;
	border-right:solid 2px #7ed214;
	border-radius: 5px 5px 0 0;
}

.current-lang{
	padding:0 10px;
}

.lang-item{
	padding-left:10px;
	padding-right:10px;
	background: #f9f9f9;
	border-left:#7ed214 solid 2px;
	border-right:#7ed214 solid 2px;
	color:#888888;
}
.lang-item>a{
	color:#888888;
}

.lang-item>a:hover{
	color:#333333;
}

.lang-item:last-child{
	border-bottom:#7ed214 solid 2px;
	border-radius:0 0 5px 5px;
}


/** loading **/
.loading-box{
    display: none;
}
.loading,
.loading div {
  box-sizing: border-box;
}
.loading {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.loading div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: #999;
  animation: loading 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.loading div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.loading div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.loading div:nth-child(3) {
  left: 56px;
  animation-delay: 0s;
}
@keyframes loading {
  0% {
    top: 8px;
    height: 64px;
  }
  50%, 100% {
    top: 24px;
    height: 32px;
  }
}

@media (max-width: 900px) {
	.container{
		width: 100%;
		padding:0 10px;
	}

	header{
		width:100%;
	}

	footer{
		width:100%;
	}

}

@media (max-width:600px) {
	.container .w-50{
		width: 100%;
		padding:0 15px !important;
	}
	footer{
		flex-direction: column;
		height:auto !important;
	}

	footer .logo{
		width:100%;
	}

	.link-box{
		flex-direction: column;
	}
}




.d-flex{
    display: flex;
    flex-direction: row;
}

.justify-content-between{
    justify-content: space-between;
}

.justify-content-around{
    justify-content: space-around;
}

.justify-content-center{
    justify-content: center;
}

.align-items-center{
    align-items: center;
}

.padding-xs {
	padding: 5px;
}

.padding-sm {
	padding: 10px;
}

.padding {
	padding: 15px;
}

.padding-lg {
	padding: 20px;
}

.padding-xl {
	padding: 25px;
}

.padding-top-xs {
	padding-top: 5px;
}

.padding-top-sm {
	padding-top: 10px;
}

.padding-top {
	padding-top: 15px;
}

.padding-top-lg {
	padding-top: 20px;
}

.padding-top-xl {
	padding-top: 25px;
}

.padding-right-xs {
	padding-right: 5px;
}

.padding-right-sm {
	padding-right: 10px;
}

.padding-right {
	padding-right: 15px;
}

.padding-right-lg {
	padding-right: 20px;
}

.padding-right-xl {
	padding-right: 25px;
}

.padding-bottom-xs {
	padding-bottom: 5px;
}

.padding-bottom-sm {
	padding-bottom: 10px;
}

.padding-bottom {
	padding-bottom: 15px;
}

.padding-bottom-lg {
	padding-bottom: 20px;
}

.padding-bottom-xl {
	padding-bottom: 25px;
}

.padding-left-xs {
	padding-left: 5px;
}

.padding-left-sm {
	padding-left: 10px;
}

.padding-left {
	padding-left: 15px;
}

.padding-left-lg {
	padding-left: 20px;
}

.padding-left-xl {
	padding-left: 25px;
}

.padding-lr-xs {
	padding-left: 5px;
	padding-right: 5px;
}

.padding-lr-sm {
	padding-left: 10px;
	padding-right: 10px;
}

.padding-lr {
	padding-left: 15px;
	padding-right: 15px;
}

.padding-lr-lg {
	padding-left: 20px;
	padding-right: 20px;
}

.padding-lr-xl {
	padding-left: 25px;
	padding-right: 25px;
}

.padding-tb-xs {
	padding-top: 5px;
	padding-bottom: 5px;
}

.padding-tb-sm {
	padding-top: 10px;
	padding-bottom: 10px;
}

.padding-tb {
	padding-top: 15px;
	padding-bottom: 15px;
}

.padding-tb-lg {
	padding-top: 20px;
	padding-bottom: 20px;
}

.padding-tb-xl {
	padding-top: 25px;
	padding-bottom: 25px;
}



.margin-0 {
	margin: 0;
}

.margin-xs {
	margin: 5px;
}

.margin-sm {
	margin: 10px;
}

.margin {
	margin: 15px;
}

.margin-lg {
	margin: 20px;
}

.margin-xl {
	margin: 25px;
}

.margin-top-xs {
	margin-top: 5px;
}

.margin-top-sm {
	margin-top: 10px;
}

.margin-top {
	margin-top: 15px;
}

.margin-top-lg {
	margin-top: 20px;
}

.margin-top-xl {
	margin-top: 25px;
}

.margin-top-xxl{
	margin-top:50px;
}

.margin-right-xs {
	margin-right: 5px;
}

.margin-right-sm {
	margin-right: 10px;
}

.margin-right {
	margin-right: 15px;
}

.margin-right-lg {
	margin-right: 20px;
}

.margin-right-xl {
	margin-right: 25px;
}

.margin-bottom-xs {
	margin-bottom: 5px;
}

.margin-bottom-sm {
	margin-bottom: 10px;
}

.margin-bottom {
	margin-bottom: 15px;
}

.margin-bottom-lg {
	margin-bottom: 20px;
}

.margin-bottom-xl {
	margin-bottom: 25px;
}

.margin-left-xs {
	margin-left: 5px;
}

.margin-left-sm {
	margin-left: 10px;
}

.margin-left {
	margin-left: 15px;
}

.margin-left-lg {
	margin-left: 20px;
}

.margin-left-xl {
	margin-left: 25px;
}

.margin-lr-xs {
	margin-left: 5px;
	margin-right: 5px;
}

.margin-lr-sm {
	margin-left: 10px;
	margin-right: 10px;
}

.margin-lr {
	margin-left: 15px;
	margin-right: 15px;
}

.margin-lr-lg {
	margin-left: 20px;
	margin-right: 20px;
}

.margin-lr-xl {
	margin-left: 25px;
	margin-right: 25px;
}

.margin-tb-xs {
	margin-top: 5px;
	margin-bottom: 5px;
}

.margin-tb-sm {
	margin-top: 10px;
	margin-bottom: 10px;
}

.margin-tb {
	margin-top: 15px;
	margin-bottom: 15px;
}

.margin-tb-lg {
	margin-top: 20px;
	margin-bottom: 20px;
}

.margin-tb-xl {
	margin-top: 25px;
	margin-bottom: 25px;
}

.text-center{
    text-align: center;
}
.text-left{
	text-align: left;
}
.flex-1{
	flex:1;
}
.flex-wrap{
	flex-wrap: wrap;
}
.bg-white{
	background: white;
}
.font-lg{
	font-size:1.3em;
}
.font-sm{
	font-size:.8em;
}

.font-bold{
	font-weight: bold;
}

.font-gary{
	color:#888888;
	
}