@charset "utf-8";
/*---------------- html ----------------*/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	list-style: none;
	text-decoration: none;
}

* h1, * h2, * h3, * h4, * h5, * p, * a{
	font-weight: normal;
	overflow: visible;
}

* img{
	display: inline-block;
	border: 0;
}

*:focus {
	outline: none;
}

* b, * strong{
	font-weight: bold;
}

html,body{
	width:100%;
	height:auto;
	min-height: 100%;
	overflow: visible;
	background: #87909C;
	font-family: "sc",'微软雅黑', '雅黑';
	/*
	font-family: 'Noto Sans SC','微软雅黑', '雅黑';
	font-weight: 400;
	*/
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

/*
.wow {
	opacity: 0;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
}
*/

/*---------------- layout ----------------*/
#wrapper{
	width: 100%;
	height: auto;
	position: relative;
}

.main, .container{
	height: auto;
	margin: 0 auto;
	position: relative;
}

.pc{
	display: block;
}

.m{
	display: none;
}

.content{
	height: auto;
	margin: 0 auto;
}

.max{
	width: 100%;
	min-width: 1200px;
	height: auto;
	position: relative;
}

.max-pic{
	width: 100%;
	height: auto;
}

.max-pic img{
	display: block;
	margin: 0 0 0 50%;
	transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	-moz-transform: translate(-50%,0);
}


.box{
	width: 100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	position: relative;
}

.ov{
	overflow: visible;
}

.clear{
	clear: both;
}

/*---------------- overlay ----------------*/
#mask{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2000;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-filter: alpha(opacity=0);
	display: none;
	transition: all .5s linear;
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-ms-transition: all .5s linear;
	-o-transition: all .5s linear;
}

#mask.show{
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-filter: alpha(opacity=100);
}

/*---------------- public ----------------*/
.link-line{
	position: relative;
	overflow: visible;
	transition: border .2s;
	-webkit-transition: border .2s;
	-moz-transition: border .2s;
	-ms-transition: border .2s;
	-o-transition: border .2s;
}

.link-line::after{
	content: " ";
	width: 0px;
	height: 1px;
	display: block;
	background: #f20521;
	border-radius: 1px;
	position: absolute;
	left: auto;
	right: 0;
	transition: all .2s;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	-o-transition: all .2s;
}

.link-line:hover::after{
	width: 100%;
	left: 0;
	right: auto;
}

/*---------------- bg ----------------*/
.bg-ffffff {
	background: #ffffff;
}

.bg-f5f6f7 {
	background: #f5f6f7;
}

/*---------------- btn ----------------*/

.btn{
	width: auto;
	height: 36px;
	padding: 0 29px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #C8152D;
	border-radius: 8px;
	color: #C8152D;
	font-size: 14px;
	text-align: center;
	line-height: 14px;
	transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-ms-transition: all .2s linear;
	-o-transition: all .2s linear;
}

.btn:hover{
	background: #C8152D;
	color: #FFFFFF;
}

/* base */
.btn-base {
	width: auto;
	height: 51px;
	padding: 0 41px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #C8152D;
	border-radius: 8px;
	color: #ffffff;
	font-size: 22px;
	transition: all .2s;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	-o-transition: all .2s;
}

.btn-base:hover {
	background: #EC0020;
	color: #ffffff;
}

/* more */
.btn-more{
	width: 103px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #C8152D;
	border-radius: 6px;
	color: #ffffff;
	font-size: 12px;
	line-height: 12px;
	transition: .3s linear;
	-webkit-transition: .3s linear;
	-moz-transition: .3s linear;
	-ms-transition: .3s linear;
	-o-transition: .3s linear;
}

.btn-more:hover{
	background: #EC0020;
}

.btn-more span {
	padding-right: 14px;
	position: relative;
	overflow: visible;
	transition: ease-out .2s;
	-webkit-transition: ease-out .2s;
	-moz-transition: ease-out .2s;
	-ms-transition: ease-out .2s;
	-o-transition: ease-out .2s;
}

.btn-more span::before{
	content: " ";
	width: 6px;
	height: 10px;
	display: block;
	margin: -4.5px 0 0 0;
	position: absolute;
	right: 0;
	top: 50%;
	background: url(../images/btn_more_arrow.png) no-repeat 0 0;
	background-size: 100%;
	transition: ease-out .2s;
	-webkit-transition: ease-out .2s;
	-moz-transition: ease-out .2s;
	-ms-transition: ease-out .2s;
	-o-transition: ease-out .2s;
}

.btn-more:hover span::before{
	transform: translate3d(5px, 0, 0);
	-webkit-transform: translate3d(5px, 0, 0);
	-ms-transform: translate3d(5px, 0, 0);
	-moz-transform: translate3d(5px, 0, 0);
}

/* big */
.btn-more.big {
	width: 155px;
	height: 36px;
	font-size: 14px;
}

/* tp */
.btn-more.tp {
	background: none;
	border: 1px solid #C8152D;
	color: #C8152D;
}

.btn-more.tp:hover {
	background: #C8152D;
}

.btn-more.tp:hover span {
	color: #ffffff;
}

.btn-more.tp span::before{
	background-image: url(../images/btn_more_arrow_red.png);
}

.btn-more.tp:hover span::before{
	background-image: url(../images/btn_more_arrow.png);
}

/*disablit*/
.btn-more.disable {
	background: #939393 !important;
	border-color: #939393;
	color: #ffffff;
}

.btn-more.disable:hover {
	background: #939393;
}

.btn-more.disable span::before{
	background-image: url(../images/btn_more_arrow.png);
}


/* btn more big */
.btn-more.big{
	width: 151px;
	height: 36px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 17px;
}

.btn-more.big span {
	padding-right: 13px;
}

.btn-more.big span::before{
	width: 7px;
	height: 11px;
	margin: -5.5px 0 0 0;
}

.btn-more.big:hover span::before{
	transform: translate3d(10px, 0, 0);
	-webkit-transform: translate3d(10px, 0, 0);
	-ms-transform: translate3d(10px, 0, 0);
	-moz-transform: translate3d(10px, 0, 0);
}

/* btn white */
.btn-white{
	width: 103px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #ffffff;
	border-radius: 6px;
	color: #ffffff;
	font-size: 12px;
	font-family: "scm";
	line-height: 12px;
	transition: .3s linear;
	-webkit-transition: .3s linear;
	-moz-transition: .3s linear;
	-ms-transition: .3s linear;
	-o-transition: .3s linear;
}

.btn-white:hover{
	color: #ffffff;
}

/* btn youtube */
.btn-youtube {
	width: 242px;
	height: 64px;
	width: 194px;
	height: 51px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #C8152D;
	border-radius: 8px;
	border-radius: 6px;
	color: #ffffff;
	font-size: 22px;
	font-family: "xh";
	line-height: 26px;
}

.btn-youtube span {
	width: auto;
	height: auto;
	padding-left: 62px;
	padding-left: 48px;
	background: url(../images/btn_youtube_x2.png) no-repeat 0 0;
	background-size: 46px 30px;
	background-size: 36px;
}

/* btn app */
.btn-app{
	width: 94px;
	height: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #C8152D;
	border-radius: 6px;
	color: #C8152D;
	font-size: 12px;
	text-align: center;
	line-height: 12px;
	transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-ms-transition: all .2s linear;
	-o-transition: all .2s linear;
}

.btn-app:hover{
	background: #C8152D;
	color: #FFFFFF;
}



/*---------------- icon ----------------*/
.icon {
	position: relative;
}

.icon img {
	width: 100%;
	height: auto;
	display: block;
	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.icon img.base {
	opacity: 1;
}

.icon img.over, .icon img.on {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 20;
	opacity: 0;
}


.icon:hover img.base, *:has(> .icon):hover .icon img.base, *.on:has(> .icon) .icon img.base {
	opacity: 0;
}

.icon:hover img.over, *:has(> .icon):hover .icon img.over {
	opacity: 1;
}

.icon.on img.on, *.on:has(> .icon) .icon img.on {
	opacity: 1;
}

/*---------------- content ----------------*/
.thumb {
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.thumb img {
	width: 100%;
	display: block;
}

.zoom img {
	transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
}

*:has(> .zoom):hover .zoom img {
	transform: scale(1.05,1.05);
	-webkit-transform: scale(1.05,1.05);
	-moz-transform: scale(1.05,1.05);
	-ms-transform: scale(1.05,1.05);
}