@charset "utf-8";

table{border-collapse:collapse;border-spacing:0;}
.c-100 {
	width: 100%;
}
.c-t-center {
	text-align: center;
}
.mt30 {
	margin-top: 30px;
}
.mb10 {
	margin-bottom: 10px;
}
.ptb20 {
    padding: 7em 0;
}
.ptb20 h1{text-align: center;color: #1e50ae;font-weight: bold;line-height: 4em;}
.c-main {
	margin: 0 auto;
}
.col-md-3{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.tb th { padding:10px 5px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; background-color:#f4f5f6; line-height: 20px; color:#999; vertical-align: middle;}
.tb td { padding:10px 5px; line-height: 25px; background-color:#fff; border-bottom:1px solid #ddd; word-wrap: break-word; word-break:break-all; color:#666; vertical-align: middle;}
.tb th.small {padding:5px;}
.tb .hover td { background-color:#fafafa;}
.tb-b {border:1px solid #ddd;font-size: 16px;}
.tb-b th , .tb-b td {border-color:#ddd; border-left:1px solid #ddd;}
.tb-n th , .tb-n td {border:0; background:none; vertical-align:middle; padding:10px; color:#666;}
tr.hover td {background-color:#fcfcfc}
.tb-s {border-left: 1px solid #ddd; border-top: 1px solid #ddd;}
.tb-s th {background-color: #F8F8F8; color: #333; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 15px 10px; width: 120px;}
.tb-s td {border-bottom: 1px solid #ddd;  border-right: 1px solid #ddd;  padding: 15px 10px;}
.tb-skin1 th { position:relative; padding:5px; border-top: 0 none; border-bottom:0 none; background-color:#f4f5f6;}
.tb-skin1 th:before { content:''; position:absolute; right:-1px; top:5px; bottom:5px; display:block; width:1px; background-color:#ddd; font-size:0; z-index:1; }
.tb-skin1 th:last-child { overflow:hidden; *zoom:1; }
.tb-min th , .tb-min td {padding:1px 4px;}
.demo{
    background:url(../images/b2.jpg) no-repeat center center;
    position: relative;
    padding: 14em 0;
    background-size:cover;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box
}
.demo h1{text-align: center;}
.demo h2{background-image: url(/static/picture/l.png);background-repeat: no-repeat;background-position:center;text-align: center;font-size: 24px;    line-height: 3em;}
.function{
    color:#fff;
    text-align: center;
    background:url(../images/b3.jpg) no-repeat center center;
    position: relative;
    padding: 6em 0;
    background-size:cover;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
.function h1{line-height: 4em;}
.function p{line-height: 2em;font-size: 16px}
.box{
    position: relative;
    perspective: 1000px;
-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box
}
.box .box-img{
    transform: rotateY(0);
    transition: all 0.50s ease-in-out 0s;
    -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box
}
.box:hover .box-img{
    transform: rotateY(-90deg);
    -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box
}
.box .box-img img{
    width: 100%;
    height: auto;
}
.box .box-content{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 35px 15px;
    text-align: center;
    background: rgba(0,0,0,0.7);
    transform: rotateY(90deg);
    transition: all 0.50s ease-in-out 0s;
    -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box
}
.box:hover .box-content{
    transform: rotateY(0);
    -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box
}
.box .title{
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
}
.box .description{
    font-size: 14px;
    line-height: 24px;
    color: #fff;
}

.box .social-links{
    margin: 0;
    padding: 0;
    list-style: none;
}
.box .social-links li{
    display: inline-block;
    margin: 0 10px;
}
.box .social-links li a{
    font-size: 20px;
    color: #a6a6a6;
}
.box .social-links li a:hover{
    text-decoration: none;
    color: #fff;
}
@media only screen and (max-width: 990px) {
    .box{  margin-bottom:20px; }
}
@media only screen and (max-width: 479px) {
    .box .box-content{ padding: 20px; }
}