/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    //vertical-align: baseline;
}

article, aside, details, figure,footer, header, menu, nav, section
{
    display: block;
}

ol,ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

blockquote,q
{
    quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after
{
    content: '';
    content: none;
}

table
{
    border-collapse: collapse;
    border-spacing: 0;
}
/* start editing from here */
a
{
    text-decoration: none;
    color: #a0a0a0;
}

.txt-rt
{
    text-align: right;
}
.txt-lt
{
    text-align: left;
}
.txt-center
{
    text-align: center;
}
.float-rt
{
    float: right;
}
.float-lt {
    float: left;
}
.clear {
    clear: both;
}
.pos-relative {
    position: relative;
}
.pos-absolute {
    position: absolute;
}
.vertical-base {
    vertical-align: baseline;
}
.vertical-top {
    vertical-align: top;
}
.underline {
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    margin: 0 0 20px 0;
}
nav.vertical ul li {
    display: block;
}
nav.horizontal ul li {
    display: inline-block;
}
img {
    max-width: 100%;
}
/*end reset*/
/*-----light-font----*/
body {
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #ffffff;
}


#header {
    width: 1170px;
    height: 130px;
    background: #fff;
	margin:0 auto;
    top: 0;
    z-index: 99999999;
	font-family: "Microsoft YaHei";
}
#header #login-box {
    width: 260px;
    height: 200px;
	background-color: #fff;
    padding: 18px 6%;
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
	position: absolute;
	bottom: -200px;
	display:none;
    right: 10px;
	-moz-box-shadow: 0px 0px 19px #888888;
	box-shadow: 0px 0px 19px #888888;
}
#header #login-box ul li#errmsg{
    padding: 5px;
    height: 15px;
    line-height: 15px;
    border: 1px solid #ff6600;
    background-color: #fef2f2;
    color: #df5443;
    font-size: 12px;
    display: none;
}
#header #login-box ul li{
    overflow: hidden;
    font-size: 14px;
	margin-bottom: 5px;
}

#header #login-box ul li input.in{
    border: 1px solid #d9d9d9;
    height: 30px;
    line-height: 30px;
    padding: 3px;
    border-radius: 2px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    float: left;
}
#header #login-box ul li button{
    width: 100%;
    float: left;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #df5443;
    color: #FFFFff;
    font-size: 14px;
    border-radius: 3px;
}
#header #login-box ul li a{
    color: #df5443;
    font-size: 14px;
}

#header img {
    float: left;
}

#header nav {
    float: left;
    /*--- margin-left: 30px;----*/
}
#header #login{
	background-color:#E41E1F;
	padding:0 20px;
}
#header #weixinlogin{
	
}
#header #cart{
	background:url("../images/cart.png") no-repeat 0 center;
	padding-left: 25px;
}
#header #cart>em{
	background:url("../images/icons.png") 0 -704px no-repeat;
	display: inline-block;
    height: 5px;
    width: 10px;
}
#header nav a{
    /*--- line-height: 37px;----*/
}
#header nav a:hover{
	cursor:default;
}
#header nav a.do:hover{
    /*---opacity: 0.8;
	color: #ff6900;----*/
	cursor:pointer;
}
#header .header-right{
	height: 37px;
    line-height: 37px;
    color: #F3F3F3;
    float: right;
    font-size: 13px;
	position: relative;
}
#header .header-right>a{
    font-size: 13px;
	display:inline-block;
	padding:0 10px;
    color: #F3F3F3;
	font-family: "Microsoft YaHei";
}
#header .header-right>a:hover{
    color: #ff6900;
}
#header i{
    display: none;
}


.indexmid-pic{
    background: url("../images/banner.jpg") center;
    background-size: cover;
}

.indexad{
    width: 100%;
    margin-top: 37px;
    height: auto;
    position: relative;
}
.swiper-slide img{
    width: 100%;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: 30px;
}
.swiper-pagination-bullet{
    border-bottom: 20px;
    width: 88px;
    height: 5px;
    border-radius: 0;
    background: #ffffff;
}
.swiper-pagination-bullet-active{
    background: #36a5ed;
}

.swiper-button-next, .swiper-button-prev{
    opacity: 0.7;
}

/* services */
.services {
    padding: 0;
    background: #E41E1F;
}

.services h3
{
    color: #fff;
    font-size: 2.5em;
    font-weight: 700;
    text-align: center;
}

.services p
{
    font-size: 1.4em;
    padding: 0em 0;
    color: #E4E4E4;
    line-height: 1.5em;
    text-align: center;
    margin-bottom: 6%;
}
/*  GRID OF THREE   ============================================================================= */
.section
{
    clear: both;
    padding: 0;
    margin: 0;
}

.group:before,
.group:after
{
    content: "";
    display: table;
}

.group:after
{
    clear: both;
}

.group
{
    zoom: 1;
}

.col_1_of_3
{
    display: block;
    float: left;
    margin: 1% 3% 0% 0%;
}

#services > div > div:nth-child(5)
{
    margin-right: 0;
}

.col_1_of_3:first-child
{
    margin-left: 0;
}

#services > div > div> img
{
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#services > div > div> img:hover
{
    opacity: 0.6;
}

.span_1_of_3
{
    width: 30.6%;
    text-align: center;
    margin-top: 1%;
    padding-bottom: 1%;
}

.span_1_of_3 h4 a
{
    color: #E4E4E4;
    font-size: 1.6em;
    font-weight: 400;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.span_1_of_3 h4 a:hover
{
    color: #F8BC3A;
}

.span_1_of_3  p
{
    font-size: 1em;
    padding: 0.5em 0;
    color: #E4E4E4;
    line-height: 1.9em;
    font-weight: 100;
    font-style: normal;
}

.span_1_of_3 p a
{
    padding: 13px 20px;
    color: #E4E4E4;
    font-size: 0.8755em;
    border: 2px solid #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.span_1_of_3 p a:hover
{
    color: #F8BC3A;
    border: 2px solid #F8BC3A;
}
/*--- PORTFOLIO --*/
.portfoliO
{
    text-align: center;
    /* background: #EBEBEA; */
    padding-top: 37px;
    overflow: hidden;
}

.portfoliO h3
{
    color: #fff;
    font-size: 2.5em;
    font-weight: 700;
    text-align: center;
}

.portfoliO p
{
    font-size: 1.4em;
    margin-top: 10px;
    padding: 0;
    color: #777;
    line-height: 1.5em;
    text-align: center;
    margin-bottom: 30px;
}

.portfoliO #open video{
	width:40%;
	height:30%;
}

.portfoliO .left_box{
	position:absolute;
	left:6%;
	top:85px;
	width:155px;
	font-size:12px;
	display:none;
	background-color:#fff;
	border-radius:15px;
	overflow:hidden;
}
.portfoliO .left_box table a{
	color:#505050;
}

.portfoliO .left_box table {
	width:96%; 
	margin:0 auto;
}

.portfoliO .left_box table tr{
	border-bottom: 1px #F2F2F2 solid;
}

.portfoliO .left_box table td{
	text-align:center;
	height:40px;
	border-collapse: collapse;
	line-height:40px;
}

.portfoliO .left_box .td_aim{
	border-bottom:1px #F2F2F2 solid;
	height:40px;
	border-collapse: collapse;
	line-height:40px;
	background: #E41E1F;
	color:#fff;
    font-weight: 900;
    font-size: 14px;
}

.portfoliO .left_box .process{
	padding-top:5px;
}

.portfoliO .right_box{
	position:absolute;
	right:6%;
	top:85px;
	display:none;
	overflow:hidden;
}
.portfoliO .right_box img{
	border:none;
	width:85px;
	height:170px;
}
.portfoliO .right_box img:hover{
	cursor:pointer;
}

.portfoliO #time{
	margin-top:5px;
	height:30px;
	line-height:30px;
	font-size:16px;
}
.portfoliO #open{
	margin-bottom: -10px;
    margin-top: 30px;
}
.workpading{
	padding-top:0;
}
.workpading .ts{
	text-align:center;
	color:#a2b4bd;
	font-size:14px;
	margin-top:10px;
	display:block;
}

/*--- LINK ---*/
.link_index{
	min-height:350px;
	width:1000px;
	margin:37px auto 0;
}
.link_index .img_ul{
	padding:20px 0 0;
}
.link_index .img_ul li{
	float:left;
	text-align:center;
	margin: 0 2% 10px 3%;
	height:150px;
	overflow:hidden;
}
.link_index .img_ul li a{
	display:block;
	font-size:13px;
	font-family: "Microsoft YaHei";
}
.link_index .img_ul li a img{
	display:block;
	margin-bottom:15px;
}
.link_index .text{
	text-align:left;
	margin-bottom:50px;
}
.link_index .text a{
	margin-left:20px;
	color:#0066cc;
	font-family: "Microsoft YaHei";
	font-size:18px;
	text-decoration:underline
}
.bottom-footer .link{
	font-family: "Microsoft YaHei";
	font-size:13px;
	background-color:#f4f4f4;
	border-radius:10px;
	margin-top:10px;
	padding:10px 15px;
}
.bottom-footer .link a{
	margin-left:15px;
	font-size:13px;
}
.bottom-footer .link span{
	color:#777;
}

/*---start container --*/
#info
{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    background: #fcf8e3;
    border: 1px solid  #fbeed5;
    width: 95%;
    max-width: 900px;
    margin: 0 auto 40px auto;
    font-family: arial;
    font-size: 12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

#info .info-wrapper
{
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

#info a
{
    color: #c09853;
    text-decoration: none;
}

#info p
{
    margin: 5px 0 0 0;
}

.container
{
    position: relative;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
	padding-top:20px;
}

#filters
{
    margin: 4%;
    padding: 0;
    list-style: none;
}

#filters li
{
    display: inline-block;
    margin-right: 20px;
}

#filters li span
{
    font-size: 1em;
    display: block;
    padding: 18px 30px;
    font-weight: 600;
    text-decoration: none;
    color: #191919;
    background: #fff;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}

#filters li span.active,#filters li span:hover
{
    background: #E41E1F;
    color: #fff;
}
#productlist .product{
	border: 15px solid #fff;  
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    width: 20%;
    margin: 2.5%;
    float: left;
    display: inline-block;
    position: relative;
    border-radius: 10px;
	background-color:#fff;
	font-family:"Microsoft YaHei";
}
#productlist .product:hover{
	border: 15px solid #E41E1F;
	cursor: pointer;
}
#productlist .name{
	margin:5px 0;
	background-color:#E41E1F;
	border-radius:20px;
	color:#fff;
	font-size:13px;
}
#productlist .price{
	color:#E41E1F;
	font-size:18px;
	font-weight: bolder;
	float:left;
}
#productlist .orig{
	font-size:12px;
	text-decoration:line-through; 
	color:#909090;
	float:left;
	height:25px;
	line-height:25px;
}


#codelist > div{
	display:inline-block;
	margin:0 10px 20px;
}

#portfoliolist .portfolio
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    width: 20%;
	margin:2.5%;
    float: left;
    display: inline-block;
    position: relative;
}
.portfolio span{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: url("../images/m_lock.png") center 36px no-repeat;
    background-size: 23%;
    left: 0;
    top: 0;
    border-radius: 13px;
}

.portfolio-wrapper
{
    position: relative !important;
    cursor: pointer;
}

.portfolio img
{
    border: 15px solid #fff;
    top: 0px !important;
	margin-bottom: 15px;
	max-width:100%;
    position: relative;
    opacity: 5;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.portfolio img:hover
{
    border: 15px solid #E41E1F;
}

.copyrights
{
    text-indent: -9999px;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
}

.portfolio .label
{
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: -40px;
}

.portfolio .label-bg
{
    background: #EA6060;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.portfolio .label-text
{
    color: #fff;
    position: relative;
    z-index: 500;
    padding: 5px 8px;
}

.portfolio .text-category
{
    display: block;
    font-size: 20px;
    text-transform: uppercase;
}

.img
{
    border: 1px solid #555;
    display: inline-block;
    padding: 10px 13px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.img:hover
{
    border: 1px solid #E41E1F
}

.portfolio .y,
.slide-box .y,
.portfolio .n{
	position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(50,50,50,0.01);
    border-radius: 10px;
    z-index: 2;
	left: 3%;
    top: 0;
}

.portfolio .y img,
.slide-box .y img,
.portfolio .n img{
	border:none;
	vertical-align:middle;
}
.portfolio .y i,
.slide-box .y i,
.portfolio .n i{
	height:100%;
	overflow:hidden;
	display:inline-block;
	vertical-align:middle;
}

/* Self Clearing Goodness */
.container:after
{
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix:before,
.clearfix:after,
.row:before,
.row:after
{
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.row:after,
.clearfix:after
{
    clear: both;
}

.row,
.clearfix
{
    zoom: 1;
}

.clear
{
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
/*---team-members--*/
.team-members
{
    padding-top: 80px;
    /* background: #F8BC3A; */
	text-align:center;
}

.tm-head
{
    margin-top: 10px;
    text-align: center;
}

.tm-head h3
{
    color: #fff;
    font-size: 2.5em;
    font-weight: 700;
    text-align: center;
}

.tm-head p
{
    font-size: 1.4em;
    padding: 0;
    color: #E4E4E4;
    line-height: 1.5em;
    text-align: center;
    margin-bottom: 40px;
}
.tm-head-grid img
{
    width: 100%;
}
.tm-head-grid .ava_img
{
	display: block;
    border-radius: 50%;
    width: 20%;
    position: absolute;
    top: 0;
    border: 3px solid #FFF;
    right: 0;
	z-index:2;
    box-shadow: 4px 5px 8px #BDB8B8;
}
.tm-head-grids
{
	padding-bottom: 50px;
    /*margin-left: 32px;
    margin-right: -100px;*/
    overflow: hidden;
}
.tm-head-grid{
	cursor: pointer;
    width: 17%;
    text-align: center;
    float: left;
    margin: 4%;
    padding: 1%;
    background: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    position: relative;
    margin-bottom: 20px;
}
.tm-head-grid span{
    position: absolute;
    left: 0;
    top:0;
    background: url("../images/m_lock.png") center no-repeat;
    background-size: 45%;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: 99;
}
.tm-head-grid span.pass{
    background: url("../images/success.png") center no-repeat;
	z-index:1;
	background-size: 100%;
}

.tm-head-grid h4
{
	color: #828080;
    font-size: 24px;
    position: absolute;
    bottom: 18px;
    margin: 0.8em 0 0.2em 0;
    left: 0px;
	right:0px;
    font-family: "Microsoft YaHei";
    font-weight: 100;
	z-index:2;
}
.tm-head-grid h5
{
    color: #7C3939;
    margin: 0 auto;
    font-size: 0.9em;
}
.tm-head-grid:hover
{
    background: #E41E1F;
    color: #FFFFff;
}

.start-study{
    margin: 30px;
    text-align: center;
    overflow: hidden;
}
.start-study a{
    background: #E41E1F;
    padding: 10px 20px;
    color: #FFFFff;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
}

/*---blog--*/
.blog
{
    padding: 100px 0;
    background: #EFEFEE;
}

.blog-head
{
    margin-top: 50px;
    text-align: center;
}

.blog-head h3
{
    color: #333;
    font-size: 2.5em;
    font-weight: 700;
    text-align: center;
}

.blog-head p
{
    font-size: 1.4em;
    padding: 0;
    color: #777;
    line-height: 1.5em;
    text-align: center;
}
.blog-cate{
    text-align: center;
}
.blog-cate a{
    display: inline-block;
    margin: 10px;
    padding: 15px;
    box-sizing: border-box;
    background: #2A80B9;
    color: #FFFFff;
    font-size: 16px;
    border-radius: 3px;
}
.blog-cate a:hover{
    background: #df5443;
}
.blog-cate a.onli{
    background: #df5443;
}

.blog-grid
{
    margin-bottom: 3.2%;
}

.blog-left
{
    margin: 20px 0;
    float: left;
    width: 46%;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    box-sizing: border-box;
}

.blog-right
{
    margin: 20px 0;
    float: right;
    width: 46%;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    box-sizing: border-box;
}

.img-left
{
    float: left;
    width: 43%;
}

.img-left img
{
    width: 100%;
    cursor: pointer;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.img-left img:hover
{
    opacity: 0.6;
}

.text-right
{
    float: right;
    width: 52%;
}

.text-right h6
{
    font-size: 0.8755em;
    color: #777;
    padding-bottom: 3px;
    margin-top: 7px;
}

.text-right h3 a
{
    font-size: 1.5em;
    color: #303030;
    font-weight: 600;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.text-right h3 a:hover
{
    color: #2A80B9;
}

.text-right p
{
    font-size: 0.9755em;
    color: #222;
    line-height: 1.8em;
}

.text-right p a
{
    font-size: 0.82355em;
    color: #fff;
    float: right;
    padding: 6px 10px;
    margin-top: 6px;
    background: #E41E1F;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.text-right p a:hover
{
    background: #2A80B9;
}

.sc-detail{
    width: 95%;
    margin: 20px auto;
    background: #FFFFff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
}
.sc-title{
    margin: 10px auto;
    text-align: center;
}
.sc-title h2{
    font-size: 25px;
}
.sc-title p{
    margin: 10px 0;
    line-height: 30px;
    font-size: 14px;
    color: #888888;
}
.sc-content{
    width: 90%;
    margin: 30px auto;
    line-height: 30px;
    font-size: 14px;
}
.sc-content a{
    font-size: 14px;
}
/*---//blog--*/

/*--- pricing ---*/
.pricing {
    padding: 7% 0;
    background: #E41E1F;
}

.pricing-head {
    text-align: center;
}

.pricing-head h3 {
    color: #fff;
    font-size: 2.5em;
    font-weight: 700;
    text-align: center;
}

.pricing-head p {
    font-size: 1.4em;
    padding: 0;
    color: #E4E4E4;
    line-height: 1.5em;
    text-align: center;
}

#pricing > div > h3 {
    color: #fff;
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 3%;
}

/* logos */
.logos
{
    background: #2F2F2F;
    padding: 10px 0;
    height: 30px;
    line-height: 30px;
    color: #555;
    text-align: center;
}
.logos a{
    margin: 0 10px;
    color: #888;
}
.logos a:hover{
    color: #ff6900;
}

/*---start-footer---*/
.bottom-footer {
    background: #EBEBEA;
}
.bottom-footer-left {
    text-align: center;
}
.bottom-footer-left p {
    font-size: 1em;
    color: #777;
    margin-top: 1.5em;
}
.bottom-social-icons li a {
    width: 45px;
    height: 45px;
    display: block;
	position:relative;
    border-radius: 30em;
    -webkit-border-radius: 30em;
    -moz-border-radius: 30em;
    -o-border-radius: 30em;
}
.bottom-social-icons li a div{
	position: absolute;
    top: -100px;
    left: -20px;
    width: 200%;
    z-index: 10;
	display:none;
}
.bottom-footer {
    padding: 4% 0;
}
.bottom-social-icons li {
    display: inline-block;
    margin: 0.5em 0.2em;
}

.bottom-weixin:hover
{
    background: url(../images/top-social-icons.png) no-repeat -10px 4px #D2D2D1;
}

.bottom-weixin{
    background: url(../images/top-social-icons.png) no-repeat -10px -30px #D2D2D1;
}

.bottom-taobao:hover {
    background: url(../images/top-social-icons.png) no-repeat -147px 4px #D2D2D1;
}

.bottom-taobao {
    background: url(../images/top-social-icons.png) no-repeat -147px -30px #D2D2D1;
}

.bottom-qq:hover{
    background: url(../images/top-social-icons.png) no-repeat -102px 4px #D2D2D1;
}

.bottom-qq
{
    background: url(../images/top-social-icons.png) no-repeat -102px -30px #D2D2D1;
}

.bottom-google
{
    background: url(../images/top-social-icons.png) no-repeat -115px -21px #D2D2D1;
}

.bottom-google:hover
{
    background: url(../images/top-social-icons.png) no-repeat -115px 11px #D2D2D1;
}

.bottom-social-icons
{
    text-align: center;
    margin: 0 auto;
}

/*新增info的样式*/
.info .tit{
	height:30px;
	line-height:30px;
	background-color:#fff;
	border-radius:5px;
	margin: 0 auto;
	text-align:left;
}
.info a.ico{
	background:url(../images/sound.png) no-repeat;
	display: inline-block;
	width: 20px;
	height: 14px;
} 
.info .tit a{
	color:#777;
	margin-left:10px;
}
.info .info_box{
	min-height:130px;
}
.info .info_box p{
	text-align:left;
	font-size:14px;
	margin-bottom:0;
	color:#666;
}
.info .info_box img{
	margin-right:10px;
}
.info .info_box p.english,
.info .info_box p.chinese{
	color:#999;
	font-family: Arial;
	font-size:13px;
	margin-top: 0px;
}
.info .infos{
	position: relative;
}
@media only screen and (min-width: 768px)
{
	.slide-container .info{
		margin-top:30px;
	}
	.info .tit{
		width: 636px;
		margin: 0 auto;
	}
	.info .info_box{
		width:45%;
		padding:8px
	}
	.info .infos{
		width:636px;
		margin: 0 auto;
		border-radius: 5px;
		margin-top:-7px;
		background-color: rgba(255,255,255,0.9);
	}
}
@media only screen and (max-width: 768px)
{
	.slide-container .info{
		width:95%;
    	margin: 30px auto 0;
	}
	.info .tit{
		width: 100%;
		margin-left:0;
	}
	.info .info_box{
		width:45%;
		padding:2%;
	}
	.info .infos{
		width: 100%;
		border-radius: 5px;
		background-color: rgba(255,255,255,0.9);
		margin-top:-7px;
		margin-left: 0px;
	}
}

.main-quiz-holder *
{
    margin: 0;
    padding: 0;
	font-family: "Microsoft YaHei";
}
.mix_all{
    width: 800px;
	margin:0 auto;
}
.mix_all>div{
	width:48%;
    margin:0 1%;
    float: left;
    position: relative;
}
.mix_all>div>span{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(50,50,50,0.01);
    border-radius: 10px;
    z-index: 999;
}

.main-quiz-holder a
{
    text-decoration: none;
    color: #6C6C6C;
}

.main-quiz-holder .slide-container,
#oneBox
{
    width: 100%;
    text-align:center;
    margin: 0 auto;
	position:relative;
	font-family: "Microsoft YaHei";
}

.results-container,.intro-container
{
    text-align: center;
}

.main-quiz-holder .slide-container .question,.main-quiz-holder h2.qTitle,#oneBox h2.qTitle
{
    margin: 10px 0 20px 0;
    font-size: 20px;
    font-weight: normal;
}
.one-container .question {
    margin: 30px auto 25px;
    width: 60%;
}
.one-container .audio-play {
	display:none;
	z-index: 1;
    width: 110px;
    background-color: #dc5c45;
    background-image: url('../images/sound2.png');
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 20px;
    height: 44px;
    line-height: 44px;
    border-radius: 20px;
    position: fixed;
    bottom: 87px;
    right: 0;
    left: 0;
    margin: 0 auto;
    font-size: 12px;
    color: #fff;
}
.one-container .audio-play span {
    display: block;
    margin-left: 24px;
    color: #fff;
}
.one-container .question .audio-play:hover{
	cursor: pointer;
}
.one-container .question > span {
    float: right;
    display: inline-block;
    margin-bottom: 0;
    border-radius: 5px;
    font-size: 12px;
    padding: 4px 10px;
    margin-right: 2%;
    background-color: rgba(255,255,255,0.8);
}

.main-quiz-holder .slide-container #collect{
	float:right;
	border: 1px solid #CCC7C7;
    margin-top: 12px;
    padding: 4px 8px;
    margin-right: -70px;
	color: silver;
    background-color: #fff;
}

.main-quiz-holder h2.qTitle,
#oneBox h2.qTitle
{
    font-size: 14px;
    margin-top: 30px;
    line-height: 26px;
}

.main-quiz-holder .question-number
{
    margin-bottom:15px;
}

.main-quiz-holder .slide-container ul.answers
{

    margin: 0;
    padding: 5px;
    list-style: none;
}

.main-quiz-holder .slide-container ul.answers li
{
    cursor: pointer;
    padding: 5px 30px;
    margin: 12px 0;
    color: #4c4c4c;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2),inset 0 0 6px 0 rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);
    background: #f6f6f6;
    background: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#d4d4d4));
    background: -webkit-linear-gradient(#f6f6f6,#d4d4d4);
    background-image: -moz-linear-gradient(top,#f6f6f6,#d4d4d4);
    border: 1px solid #a1a1a1;
}

.main-quiz-holder .slide-container ul.answers li.selected
{
    background: #6fb2e5;
    box-shadow: 0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;
    -o-box-shadow: 0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;
    -webkit-box-shadow: 0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;
    -moz-box-shadow: 0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;
}

.main-quiz-holder .slide-container .prev,.main-quiz-holder .slide-container .next
{
    height: 19px;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 16px;
    padding: 5px 15px;
    color: #4c4c4c;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    background: #6fb2e5;
    box-shadow: 0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;
    -o-box-shadow: 0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;
    -webkit-box-shadow: 0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;
    -moz-box-shadow: 0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;
}

.main-quiz-holder .slide-container .next
{
    background: #77d125;
    box-shadow: 0 1px 5px #3caa00,inset 0 10px 20px #c9ffb6;
    -o-box-shadow: 0 1px 5px #3caa00,inset 0 10px 20px #c9ffb6;
    -webkit-box-shadow: 0 1px 5px #3caa00,inset 0 10px 20px #c9ffb6;
    -moz-box-shadow: 0 1px 5px #3caa00,inset 0 10px 20px #c9ffb6;
}

.main-quiz-holder .progress-keeper
{
    margin-top: 350;
    width: 553px;
    margin: 350px 12px;
    box-shadow: 0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
    -o-box-shadow: 0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
    -webkit-box-shadow: 0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
    -moz-box-shadow: 0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
    border-radius: 2px;
    border: 1px solid #dedede;
    margin: 0px auto 20px auto;
}

.main-quiz-holder .progress
{
    width: 0;
    height: 10px;
    color: #4c4c4c;
    background: #f6f6f6;
    background: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#d4d4d4));
    background: -webkit-linear-gradient(#f6f6f6,#d4d4d4);
    background-image: -moz-linear-gradient(top,#f6f6f6,#d4d4d4);
    background-image: -moz-gradient(top,#f6f6f6,#d4d4d4);
}

.main-quiz-holder .result-keeper,
#oneBox .result-keeper
{
    margin: 10px;
    text-align: center;
    min-height: 476px;
	position: relative;
}
.main-quiz-holder .win,
#oneBox .win
{
    background-image:url('../images/win.png');
	background-size: 100%;
	width:375px;
	margin:0 auto;
	background-repeat: no-repeat;
}
.main-quiz-holder .lost,
#oneBox .lost
{
    background-image:url('../images/lose.png');
	background-size: 100%;
	width:375px;
	margin:0 auto;
	background-repeat: no-repeat;
}
.main-quiz-holder .win h2.qTitle,
#oneBox .win h2.qTitle {
    top: 160px;
    position: absolute;
    left: 0;
    right: 0;
}
.main-quiz-holder .lost h2.qTitle,
#oneBox .lost h2.qTitle {
    top: 160px;
    position: absolute;
    left: 0;
    right: 0;
}
.main-quiz-holder .win h2.qTitle .btn-primary,
#oneBox .win h2.qTitle .btn-primary{
    width: 70px;
    border-radius: 50%;
    margin-top: 15px;
    height: 60px;
    background: rgba(0,0,0,0);
}
.main-quiz-holder .lost h2.qTitle .btn-primary,
#oneBox .lost h2.qTitle .btn-primary {
    width: 70px;
    margin-left: 12px;
    border-radius: 50%;
    margin-top: 5px;
    height: 65px;
    background: rgba(0,0,0,0);
}

.main-quiz-holder .notice
{
    margin-top: -30px;
    color: #717171;
    position: absolute;
    right: 52px;
    bottom: 70px;
}

.main-quiz-holder .slide-container .prev
{
    width: 70px;
    float: left;
}

.main-quiz-holder .slide-container .next,.main-quiz-holder .slide-container .final
{
    width: 70px;
    float: right;
}

.main-quiz-holder .slide-container .final
{
    width: 65px;
}


.main-quiz-holder .nav-show-result
{
    padding-left: 25px;
}

.main-quiz-holder .nav-start
{
    display: block;
    margin: 40px auto 0 auto;
    line-height: 32px;
    font-size: 20px;
    font-weight: bold
}
.start-btn
{
	background: #E41E1F;
    padding: 10px 26px;
    color: #FFFFff;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
	font-family: "Microsoft YaHei";
}
#work{
	min-height:600px;
}

.main-quiz-holder .nav-container {
    padding: 5px;
    margin: 15px 0;
}
.main-quiz-holder .result-row{
    width: 80px;
    margin: 10px 20px;
    float: left;
    position: relative;
}

.main-quiz-holder .result-row .resultsview-qhover
{
    background: #FCFCFC;
    border: 1px solid #dedede;
    box-shadow: 0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
    -o-box-shadow: 0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
    -webkit-box-shadow: 0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
    -moz-box-shadow: 0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
    border-radius: 2px 10px 2px 10px;
    position: absolute;
    width: 250px;
    top: 50px;
    left: -80px;
    z-index: 200;
    padding: 15px 30px;
    text-align: left;
    font-size: 22px;
}
.main-quiz-holder .resultsview-qhover ul {
    list-style: none;
    margin: 10px 0;
}

.btn-star{
    background: #df5443;
    padding: 8px 20px;
    color: #FFFFff;
    border-radius: 3px;
}
.main-quiz-holder .btn-star{
	font-size:14px;
	margin-left:6px;
    color: #FFF;
    margin-top: 100px;
    display: inline-block;
}

.portfoliO .fireworks{
	display:none;
	position:absolute;
	width:100%;
	height:110%;
	background-color:#000;
}


/***** Media Quries *****/
@media only screen and (max-width: 1366px)
{
    .wrap
    {
		position:relative;
		margin:0 auto;
    }

    a.button.scroll img
    {
        padding: 13px;
    }

    .right-msg span
    {
        margin: -1.2em 0 0 -4.5em;
    }

    a.button.scroll
    {
        padding: 1px;
    }
	
	.portfoliO .right_box{
		right:-3%;
	}
	
	.portfoliO .left_box{
		left:0%;
	}
	
}

@media only screen and (max-width: 1280px)
{
	#header nav {
		float: left;
		margin-left: 0;
	}
	#header nav a {
		margin: 0px 5px;
	}
    .wrap
    {
        //width: 95%;
		width:80%;
    }

    .portfolio img
    {
        //max-width: 92%;
		max-width:80%;
    }

    a.button.scroll
    {
        padding: 1px;
    }
	
	.portfoliO #open video{
		width:50%;
		height:40%;
	}
}


@media only screen and (max-width: 768px)
{
    #header{
        width: 100%;
        padding: 0;
        margin-left: 0;
        height: 70px;
    }
	.top37 {
		margin-top: 70px !important;
	}
	#header .header-right{
		position: absolute;
		top: 0;
		right: 0;
	}
	#header .header-right>a {
		padding: 0 5px;
	}
    #header img {
        height: 32px;
		width: 100px;
        margin-top: 1px;
        margin-bottom: 2px;
    }
    #header nav{
		margin-left: 0;
		width: 100%;
		line-height: 35px;
		text-align: center;
    }
    #header nav a{
        margin: 0;
        line-height: 33px;
        font-size: 13px;
		margin-right: 4px;
    }
    #header span {
        /* margin-right: 10px; */
        height: 35px;
        line-height: 35px;
    }
    #header i{
        width: 50px;
        height: 50px;
        background: url("../images/settingbtn.png") no-repeat center;
        display: block;
        position: absolute;
        right: 10px;
        top: 10px;
        display: none;
    }
	

    .indexad{
        margin-top: 70px;
    }
    .wrap
    {
        //width: 80%;
		width:70%;
    }


    div.header
    {
        position: relative;
        background: #E41E1F;
        padding: 4% 0;
        height: 0px;
    }
    .nav-active, .nav-active-inner .nav-inner
    {
        margin-top: 0px;
    }
    a.button.scroll
    {
        left: 47.5%;
    }

    #services > div > div> img
    {
        width: 80%;
    }

    #filters li
    {
        margin-right: 5px;
    }

    #filters li span
    {
        padding: 14px 20px;
    }

    .portfolio img
    {
        border: 10px solid #fff;
    }

    .portfolio img:hover
    {
        border: 10px solid #E41E1F;
    }
	
	.portfoliO #open video{
		width:70%;
		height:60%;
	}

    .tm-head-grid
    {
        padding-top: 9px;
    }

    .fun-head-grid img
    {
        padding: 25px;
    }

    .blog-left
    {
        width: 100%;
    }

    .blog-right
    {
        width: 100%;
        float: left;
    }

    .tm-head-grids
    {
       /* width: 89%;
        margin: 0 5% 0;*/
    }

    .bottom-footer-left p
    {
        font-size: 0.8755em;
        margin-top: 0;
    }

    .main-quiz-holder .slide-container{
        width: auto;
        padding: 20px 10px 50pt 10px;
    }
    .mix_all{
        width: 100%;
        margin: 0%;
    }
    .mix_all>div{
        float: left;
        width: 48%;
    }
    .portfolio img{
        box-sizing: border-box;
    }

    .tm-head h3{
        font-size: 30px;
    }
    .tm-head p{
        font-size: 16px;
    }

    .portfoliO h3{
        font-size: 30px;
		color:#555;
		-webkit-text-stroke: 1px #fff;
    }
    .portfoliO p{
        font-size: 16px;
    }
	
	.link_index{
		margin-top:70px;
	}
	.link_index .img_ul {
		padding: 20px 0;
	}
	.link_index .img_ul li {
		float: left;
		text-align: center;
		margin: 0 10px 10px 10px;
		height: 150px;
		overflow: hidden;
		width: 40%;
	}
}


@media only screen and (max-width: 480px)
{

    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 10px;
    }
    .swiper-pagination-bullet{
        bottom: 10px;
    }
    .swiper-pagination-bullet {
        border-bottom: 20px;
        width: 38px;
        height: 5px;
        border-radius: 0;
    }
    .swiper-button-next, .swiper-button-prev{
        width: 20px;
        height: 32px;
        -moz-background-size: 20px 30px;
        -webkit-background-size: 20px 30px;
        background-size: 20px 30px;
    }
    .wrap
    {
        width: 95%;
    }

    .span_1_of_3
    {
        width: 100%;
    }

    #services > div > div> img
    {
        width: 35%;
        margin-top: 0%;
        padding-bottom: 0%;
    }

    .span_1_of_3 p
    {
        padding: 0.5em 0 0;
    }
	
	.portfoliO #open video{
		width:90%;
		height:80%;
	}
	
    #filters
    {
        display: none;
    }

    #portfoliolist .portfolio,
	#productlist .product
    {
        margin: 2%;
        width: 46%;
    }
	#productlist img{
	}
	#productlist .img_box{
		padding: 10px;
	}
    .tm-head-grid
    {
        width: 48%;
    }
    .text span,.text_p span
    {
        font-size: 0.82355em;
    }

    .fun-head-grid img
    {
        padding: 38px;
    }

    .blog-left
    {
        width: 100%;
        box-sizing: border-box;
        float: none;
    }

    .blog-right
    {
        width: 100%;
        box-sizing: border-box;
        margin-top: 12px;
        float: none;
    }
    .pricing-grid3
    {
        display: none;
    }


    .text-right h3 a{
        font-size: 18px;
    }
    .pricing-head h3{
        font-size: 25px;
    }
    .blog-head{
        margin-top: 20px;
    }
    .blog-head h3{
        font-size: 30px;
    }
    .blog-head p{
        font-size: 16px;
    }
    .text-right p{
        font-size: 13px;
    }
    .sc-content{
        width: 100%;
    }
	
	
}

.wrap #record,.wrap #recordend{
	padding:30px 30px;
	display:none;
	position: fixed;
	left:45%;
	bottom:15%;
	-webkit-user-select:none;
	-moz-user-select:none;
	z-index:12;
}
.wrap #record{
	background:url("../images/microphone.png") no-repeat 0 0;
	background-size:100% 100%;
}
.wrap #recordend{
	background:url("../images/soundrecorder.png") no-repeat 0 0;
	background-size:100% 100%;
}

#recording{
	background-color:#000;
	position:absolute;
	width:100%;
	min-height: 970px;
	z-index:11;
	-moz-opacity:0.5;  
	-khtml-opacity: 0.5;  
	opacity: 0.5;
	display:none;
	color:#fff;
	font-size:18px;
	text-align:center;
}

#recording p{
	margin-top:50%;
	color:#fff;
}

#evaluate{
	position:absolute;
	padding-top:70%;
	z-index:13;
	width:100%;
	height:100px;
	text-align:center;
	display:none;
}

#evaluate_content{
	width:80%;
}

/*新的首页样式2017-9-23*/
body .hello-world{
	box-shadow:none;
}
.index-images {
    width: 100%;
	font-family:"Microsoft YaHei";
}
.top37 {
	margin-top: 37px;
}
.margin18{
	margin-bottom:-18px;
}
.paddingtop55 {
	padding-top:55px;
}
.marginbottom55 {
	margin-bottom:-55px;
}
.bg-one {
	background-color: #8DA1AC;
}
.bg-two {
	background-color: #eeeef4;
}
.index-images .index-images-box {
	margin: 0 auto;
    max-width: 1000px;
}
.index-nav-box{
	padding-bottom:20px;
}
.index-content a:hover{
	color:#ff6900;
}
.index-content .index-images-box>div{
	float:left;
	max-width:33%;
}
.index-content .index-content-box{
	padding:30px 0;
}
.index-content .index-images-box .introduced{
	width:300px;
	margin-right:30px;
}
.index-content .index-images-box .knowledge{
	width:300px;
	margin-right:30px;
}
.index-content .index-images-box .teach{
	width:300px;
}
.index-content .index-images-box .knowledge ul li{
	border-bottom:1px dashed #eeeeee;
	position:relative;
}
.index-content .index-images-box .knowledge ul li:before{
	position: absolute;
    content: '';
    width: 4px;
    height: 4px;
    background: #838383;
    border-radius: 50%;
    top: 50%;
    left: 0;
}
.index-content .index-images-box .knowledge ul li a{
	display:block;
	content:" ";
	clear:both;
	overflow:hidden;
	padding-left: 15px;
	font-size:14px;
	line-height: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.index-content .index-images-box .knowledge ul li a i{
	float:right;
	color:#d7d7d7;
	font-size:14px;
}
.index-content .index-images-box .knowledge ul li:hover a i,
.index-content .index-images-box .knowledge ul li:hover a span
{
	color:#ff6900;;
}
.index-content .index-images-box .knowledge ul li a span{
	float:left;
	color:#8a8a8a;
	text-overflow: ellipsis;
    white-space: nowrap;
    width: 80%;
    overflow: hidden;
}
.index-content .index-images-box .introduced p{
	text-indent:2em;
	color:#929292;
	font-size:13px;
	line-height:25px;
	margin-top:10px;
}
.index-content .index-images-box h3{
	border-left:5px solid #FF0C0C;
	padding-left:5px;
	font-weight: 700;
    font-size: 16px;
    line-height: 16px;
	margin:10px 0 25px;
}
.index-content .index-images-box h3 a{
	font-weight: normal;
    font-size: 12px;
	line-height:16px;
}
.index-content .index-images-box h3 span{
	float:left;
}
.index-content .index-images-box h3 a{
	float:right;
}
.index-images .index-nav{
	background-color:#fff;
	padding-bottom: 30px;
	border-radius:0 0 5px 5px;
	box-shadow: 0px 0px 10px #888888;
}
.index-images .index-nav ul{
	padding: 40px 0px;
    width: 900px;
    margin: 0 auto;
}
.index-images .index-nav ul li{
	margin: 0 22px;
    width: 15%;
    text-align: center;
    float: left;
}
.index-images .index-nav a{
	display: inline-block;
    width: 100%;
    float: left;
    font-size: 12px;
    color: #615D5D;
}
.index-images .index-nav h2{
    font-size: 14px;
	color:#7a7a7a;
}
.index-images .index-nav ul li:hover h2{
	color: #ff6900;
}
.index-images .index-nav a span{
	display: block;
    margin: 0 auto;
    width: 100%;
    background: url("../images/mobile_index.jpg") center center no-repeat;
    background-size: 750px;
    height: 137px;
}
.index-images .index-nav a.one span{
	background-position:7px 0;
}
.index-images .index-nav a.two span{
	background-position:-150px 0;
}
.index-images .index-nav a.three span{
	background-position:-305px 0;
}
.index-images .index-nav a.four span{
	background-position:-460px 0;
}
.index-images .index-nav a.five span{
	background-position:-608px 0;
}
.index-images .index-images-box .mobile-tis {
	text-align:center;
	width:663px;
	height:46px;
	background-color:#ebf3f9;
	color:#2b2d2e;
	line-height:46px;
	font-size:20px;
	margin:0 auto;
	border-radius:5px;
	position:relative;
}
.index-images .index-images-box .mobile-tis span{
	margin-left:30px;
}
.index-images .index-images-box .mobile-tis #bigCode{
	position: absolute;
    top: -200px;
    left: 8%;
	display:none;
}
.index-images .index-images-box>img {
	width: 100%;
}
#new-nav {
	font-family:"Microsoft YaHei";
}

.title-box {
	background-color:#fafaff;
	width:100%;
	height: 100%;
	border-bottom:5px solid #e1e1e5;
}
.portfoliO .title {
	width:80%;
	max-width:1300px;
	margin: 0 auto;
	min-height:40px;
	position:relative;
}
.portfoliO .title .title-left .title-left-box h4 {
	padding-top: 10px;
    display: inline-block;
	text-align: left;
	color: #3e6372;
	font-weight: bold;
	font-family: "Microsoft YaHei";
}
.portfoliO .title .title-left .title-left-box span{
    font-size: 12px;
    text-align: left;
	color: #a2b4bd;
}
.portfoliO .title .title-left > a{
    display: inline-block;
	position:relative;
	line-height:50px;
	margin-left: 40px;
	color: #3e6372;
	font-family: "Microsoft YaHei";
}
.portfoliO .title .title-right .content{
    display: inline-block;
	font-family: "Microsoft YaHei";
    position: absolute;
    background-color: #dedede; 
	background-color:rgba(0,0,0,0.5);
    border-radius: 10px;
    padding: 10px 10px;
    width: 30%;
    top: 100%;
	font-size: 13px;
    right: 0;
	color: #fff;
	display: none;
    z-index: 10;
	line-height:25px;
}
.portfoliO .title .title-right {
	line-height: 40px;
}
.portfoliO .title .title-right img {
	border-radius: 5px;
}
.wrap {
	margin: 0 auto;
}
.wrap100 {
	max-width:1440px;
}

.one-container{
	padding:60px 0 50px;
}
.one-container .nav-start{
    display: block;
    margin: 0px auto;
    line-height: 32px;
    font-size: 20px;
    font-weight: bold;
}
.one-container .english{
	padding:20px 0px 10px;
	border-radius: 5px 5px 0 0;
	font-size:26px;
	color:#3E6372;
    width: 60%;
    margin: 37px auto 0;
	background-color: rgba(255,255,255,0.9);
}
.one-container .chinese{
	font-size: 14px;
    color: #9C93A0;
	border-radius: 0px 0px 5px 5px;
	padding: 5px 0px 25px;
	width: 60%;
    margin: 0 auto;
	background-color: rgba(255,255,255,0.9);
}
.one-container .info{
	display:none;
}
.slide-box{
	position:relative;
}
.slide-box>img{
	cursor:pointer;
	border: 15px solid #fff;
	border-radius:10px;
}
.slide-box>img:hover{
	border: 15px solid #E41E1F;
}
.slide-box>span {
    position: absolute;
    width: 114%;
    height: 105%;
    background: rgba(50,50,50,0.01);
    border-radius: 10px;
    z-index: 999;
}
.one-container .info a{
	margin-left:5px;
}

@media only screen and (max-width: 768px){
	.top80 {
		margin-top: 71px;
	}
	.one-container{
		padding:0px 0 50px;
	}
	.portfoliO .title .title-right .content{
		width: 50%;
	}
	.one-container .english,.one-container .chinese{
		padding-top:20px;
		z-index:2;
		width: 100%;
	}
}


@media only screen and (min-width: 768px) and (max-width: 1024px){
	.mix_all {
		width: 100%;
		margin-left: 0;
		margin: 0;
	}
	.mix_all>div {
		float: left;
		width: 48%;
		margin-left: 0;
	}
	.portfolio img {
		box-sizing: border-box;
	}
}

/****宝箱样式****/
#treasureBox{
	background-color:#000;
	overflow:hidden;
	text-align:center;
	height:100%;
}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
#treasureBox .Rotation{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
#treasureBox button{
	font-size: 14px;
    line-height: 20px;
    padding: 10px 15px;
    border-radius: 10px;
    text-align: center;
    background-color: #E41E1F;
    color: #fff;
    margin-top: 17px;
}

#treasureBox .outer{
	position: relative;
	margin-top:-400px;
	text-align:center;
	display:none;
}
#treasureBox .outer_1{
	display:block;
}
#treasureBox img{
	border: none;
}

#treasureBox .dl{
	display: none;
	position: relative;
	margin-top:-401px;
}
#treasureBox .outer img{
	animation: change 1s;
	-moz-animation: change 1s;    
	-webkit-animation: change 1s;    
	-o-animation: change 1s;
}

@keyframes change{
	from {width: 100px;height: 100px;opacity: 0;}
	to {width: 300px;height: 300px;opacity: 1;}
}
#user_wrap .treasure_ul{
	text-align:center;
	font-size:0;
}
#user_wrap .treasure_ul li{
	display:inline-block;
    width: 25.5%;
    margin: 17px;
    margin-top: 0;
    text-align: center;
    border-radius: 10px;
}
#user_wrap .treasure_ul li img{
	width: 90%;
}
#user_wrap .treasure_ul li h3{
	background-color: #E98922;
    margin: 10px auto;
    width: 90%;
    font-size: 15px;
    font-weight: bold;
    border-radius: 10px;
    padding: 6px 0;
    color: #fff;
}
#user_wrap .treasure_ul li span{
    color: #777575;
}
#user_wrap .treasure_ul li p{
	color: #CECECE;
    margin: 10px 0 20px;
	height: 45px;
    /* display: -webkit-box; */
	display:none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
	padding: 0 4%;
}
#goAim{
	background-color: #df5443;
    color: #fff;
    padding: 9px 13px;
    position: absolute;
    bottom: -45px;
    left: 50%;
    border-radius: 5px;
    margin-left: -55px;
}


/****me****/
#me_header{
	background-image:url('../images/me_bg.jpg');
	background-size:100%;
	min-height:150px;
	font-size:14px;
	border-bottom:1px solid #daffff;
    font-family: "Microsoft YaHei";
}
#me_header .top{
	padding:23px 0px 15px;
	text-align:center;
}
#me_header .top img{
	height:50px;
	width:50px;
	border-radius:50%;
	margin: 0 25px;
}
#me_header .top span{
	display:inline-block;
	line-height:50px;
	color:#fff;
}
#me_header .bottom{
	text-align:center;
}
#me_header .bottom .name{
	color:#fff;
	font-size:18px;
	font-weight:500;
}
#me_header .bottom .time{
	color:#fff;
	margin-top:10px;
	font-size:12px;
}
#me_nav{
	min-height:56px;
	background-color:#fff;
	text-align:center;
	margin-bottom:6px;
	border-bottom:1px solid #dcdcdc;
    font-family: "Microsoft YaHei";
}
#me_nav a{
	display:inline-block;
	width:18%;
	padding:10px 0 9px;
	font-size:12px;
}
#me_nav a span{
	display:block;
	font-size:12px;
}

/*item*/
#itemError{
	text-align:left;width:64%;margin: 0 auto;
}
#itemError .content{
	background-color:#4C4C4C;color:#fff;border-radius:6px; padding:10px 15px 10px 35px;
}
#itemError .title{
	border-bottom:1px dashed #fff;
}
#itemError .title h4{
	color:#fff;display: inline-block;
}
#itemError .main{
	margin:15px 0;
}
#itemError .main .image{
	width:22%;
}
#itemError .main .text{
	width:70%; margin-left:3%;
}
#itemError .main .text p{
	color:#fff;
}
/**item progress**/
.portfoliO .time_box{
	
}
#itemProgress {
	display: none;
    width: 60%;
    margin-top: 20px;
    float: left;
    height: 17px;
    padding: 4px;
	background: rgba(0, 0, 0, 0.25);
	border-radius:0 6px 6px 0;
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
#itemProgress .progress-bar{
	position: relative;
	height: 17px;
	border-radius: 4px;
	-webkit-transition: 0.4s linear;
	-moz-transition: 0.4s linear;
	-o-transition: 0.4s linear;
	transition: 0.4s linear;
	-webkit-transition-property: width, background-color;
	-moz-transition-property: width, background-color;
	-o-transition-property: width, background-color;
	transition-property: width, background-color;
	-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
	/* Safari 5.1 - 6.0 */
	background: -webkit-linear-gradient(left,red,orange,yellow);
	/* Opera 11.1 - 12.0 */
	background: -o-linear-gradient(left,red,orange,yellow);
	/* Firefox 3.6 - 15 */
	background: -moz-linear-gradient(left,red,orange,yellow);
	/* 标准的语法 */
	background: linear-gradient(to right, red,orange,yellow); 
}
#itemProgress .progress-bar:before, .progress-bar:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
#itemProgress .progress-bar:before {
	bottom: 0;
	border-radius: 4px 4px 0 0;
}
#itemProgress .progress-bar:after {
	z-index: 2;
	bottom: 45%;
	border-radius: 4px;
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}
#itemProgress .progress-bar span{
	display:inline-block;
	position:absolute;
	top:0;
	right:0;
	width:0;
	height:100%;
	background-color:#B4A890;
}