:root{
    --red--:#e50000;
    --cyan--:#333333;
    --black--:#7e7e7e;
}
*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    font-family: 'Arial';
}
img,a{
    -webkit-touch-callout: none;
    text-decoration: none;
    max-width: 100%;
}
body{
    width: 100%;
    min-width:320px;
    max-width:640px;
    margin:0 auto;
    background: #fff;
    font-size:14px;
    font-family: -apple-system,Helvetica,sans-serif;
    line-height:1.5;
}
p{
    margin:0;
}
ul,li{
    padding:0;
    margin:0;
    list-style:none;
}
.cl{
    clear: both;
}
/* 菜单 */
.am-menu{
    position: static;
}
.am-menu-offcanvas1 .am-menu-toggle{
    width:2.8rem;
    top:10px;
    right:20px;
}
.am-menu-offcanvas1 .am-menu-toggle span{
    width:100%;
    border-radius: 1rem;
    background:#ffffff;
    height:3px;
    margin-top:.7rem;
    display: block;
    transition: all .2s;
}
.am-offcanvas-page .am-menu-offcanvas1 .am-menu-toggle span:last-child{
    display:none;
}
.am-offcanvas-page .am-menu-offcanvas1 .am-menu-toggle span:nth-child(1){
    transform:skewY(40deg) translateX(7px);
}
.am-offcanvas-page .am-menu-offcanvas1 .am-menu-toggle span:nth-child(2){
    transform:skewY(-40deg) translateX(7px);
}
header{
    min-width:320px;
    max-width:640px;
    width: 100%;
    padding:1.6rem 2rem;
    z-index: 999;
    position:fixed;
    top:0;
    box-shadow: 1px 1px 3px rgba(0,0, 0, .5);
    background: #000000;
}
header .logo{
    width:60%;
}
.am-slider-default .am-direction-nav a:before{
    content:'<';
    color:#fff;
}
.am-slider-default .am-direction-nav a.am-next:before{
    content:'>';
    color:#fff
}
.am-slider-default .am-control-nav{
    bottom: 14px;
}
.am-slider-default{
    margin:0;
}
.am-slider-default .am-control-nav li{
    margin:0 3px;
}
.am-slider-default .am-control-nav li a{
    width:12px;
    height:4px;
    border-radius: 2px;
    background-color:rgba(255, 255, 255, .5);
}
.am-slider-default .am-control-nav li a.am-active{
    background-color: #fff;
}
.tbox{
    padding:3rem 1.5rem .6rem 1.5rem;
}
.tbox a{
    display:block;
    font-size:2.8rem;
    font-weight: 900;
    color:var(--cyan--);
}
.tbox a:hover{
    color:red;
}
.tbox p{
    font-size:12px;
    line-height:1.5;
    margin:1rem 2rem 0 0;
}
.productsSwiper{
    height:34rem;
}
.products-li{
    display:flex;
    flex-direction:column;
    align-items: center;
    padding:1rem .8rem;
}
.products-pic{
    width:100%;
    height:14rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.products-pic img{
    max-width: 100%;
    max-height: none;
}
.products-desc{
    padding:2rem 0 1.5rem 0;
}
.products-desc span{
    font-size:1rem;
    font-weight: bold;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.products-desc p{
    font-size:.8rem;
    color:#888888;
    line-height:1.5;
    padding:.5rem 0;
    height:6.2rem;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.about{
    background: url(../images/about_bg.jpg) no-repeat center;
    background-size:100%;
    height:40rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.about-top{
    width:8rem;
}
.about-desc{
    font-size:12px;
    color:#fff;
    padding:2rem 1.5rem;
    font-family:'Arial';
}
.more{
    width:7.4rem;
    height:2.8rem;
    border-radius: 2rem;
    background-color: var(--red--);
    display: flex;
    justify-content: center;
    align-items: center;
}
.more a{
    font-size:16px;
    color:#fff;
}
/* case */
.cases{
    background:url(../images/case_bg.png) no-repeat bottom;
    background-size:100%;
}
.case-li{
    display:flex;
    flex-direction:column;
    align-items: center;
    padding:1rem .8rem;
    position: relative;
    padding:0 1rem;
}
.case-pic{
    height:22rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.case-pic img{
    min-width: 100%;
    /*min-height:100%;*/
}
.case-name{
    font-size:1rem;
    color:#333333;
    padding:2rem 0;
    text-align: center;
}
.caseSwiper{
    height:30rem;
    padding:1rem 0;
}

.foot{
    height:4rem;
    line-height:4rem;
    background: #000;    
}
.foot p{
    display: block;
    font-size:12px;
    color:#fff;
    text-align: center;
}

/* 分页 */
.pager{
    display: flex;
    justify-content: center;
    padding:2rem 0;
}
.pagination3{
    display: inline-block;
    border-radius: 4px;
}
.pager li {
    display: inline;
}
.pager li span,
.pager li a
{
    margin:0 8px;
    padding:7px 12px;
    border:1px solid #e1e1e1;
    color:#777777;
}
.pagination3 > .active > span{
    background:var(--red--);
    color:#fff;
}
.pagination3 > .disabled > span{
    background: white !important;
    color:#666666;
}
.container{
    margin:0 auto;
    padding:0 1%;
}
.nav{
    font-size:1rem;
    color:#2f2f2f;
    line-height:4;
    padding:0 1%;
}
.nav a:first-child{
    position: relative;
    padding-left: 26px;
}
.nav a:first-child::before{
    content: '';
    width:18px;
    height:18px;
    background: url(../images/nav.svg) no-repeat;
    background-size: 100%;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    left:0;
}
.channel-name{
    font-size:2rem;
    text-align: center;
    font-weight: bold;
}
/* 内容页 */
.view{
    padding:1rem .5rem;
    display:flex;
    flex-direction: column;
    align-items: center;
}
.title{
    font-size:2rem;
    line-height: 140%;
    color: #0a272c;
    font-weight: bold;
    text-align: center;
}
.time{
    height:2rem;
    display:flex;
    align-items: center;
    font-size: 12px;
    color: var(--cyan--);
    margin:1rem 0;
}
.time span{
    padding:0 2.5rem;
    height:2rem;
    display:flex;
    align-items: center;
}
.time span:first-child{
    background:url(../images/clock.svg) no-repeat 0 center;
    background-size: 20px 20px;
}
.time span:nth-child(2){
    background:url(../images/cursor.svg) no-repeat 0 center;
    background-size: 20px 20px;
}
.time span:last-child{
    background:url(../images/eye.svg) no-repeat 0 center;
    background-size: 20px 20px;
}
.content{
    padding:1rem 0;
    color: #5a5a5a;
    text-indent:0;
    font-size:1.4rem;
    line-height:2;
}
.tool {
    width:100%;
}
.tool ul{
    display:flex;
    flex-direction: column;
    justify-content:space-between;
}
.tool ul li{
    color:var(--black--);
    height:30px;
    line-height:30px;
    font-size:12px;
	overflow:hidden;
}
.tool ul li a{
    font-size:12px;
    color:#464646;
}
.tool ul li a:hover{
    color:var(--cyan--);
}
.meeting{
    padding:2rem 0;
}
.meeting-t h2{
    font-size:2rem;
    color:var(--cyan--);
    text-transform: uppercase;
    text-align: center;
    margin:0;
}
.meeting-p{
    text-align: center;
    line-height:1.6;
    font-size:.8rem;
    padding:0 1rem;
}
.meeting-from{
    padding:2rem 1rem;
}
.form-input {
    display: inline-block;
    width: 100%;
}
.form-input label, .form-textarea label {
    display: inline-block;
    margin-bottom: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1rem;
}
.form-input input {
    width: 100%;
	padding: 1rem;
    margin-bottom: 10px;
	color: #000;
    font-size:14px;
    border:1px solid #d8d8d8;
}
textarea {
    width:100%;
	padding: 10px;
    margin-bottom: 10px;
	color: #000;
	resize:none;
    font-size:1rem;
    border:1px solid #d8d8d8;
}
input[type="Submit"] {
    background-color: var(--red--);
    padding: 10px 2rem;
    border: 1px solid var(--red--);
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
}
input[type="Submit"]:hover {
    background-color: var(--cyan--);
    color: white;
    border: 1px double #fff;
}
.w3_ip{
    text-align: right;
}
.case-view .case-li{
    float:left;
    width:100%;
}
.case-view .case-li .case-pic img{
    min-width: 100%;
    max-height: 100%;
}

.products-view .products-li{
    float:left;
    width:50%;
}