@charset "utf-8";
.banner{height: 500px;}
.i_about{padding: 100px 0;}
.i_about h1{color: #a51e23; font-style: italic; font-size: 46px;}
.i_about .more{margin-top: 50px;}
.alist{display: flex; justify-content: center; align-items: center; margin: 20px -20px;}
.aitem{flex: 0 0 25%; padding:20px; box-sizing: border-box; position: relative;}
.arow{background: #fff; padding: 56px 10px 55px; position: relative; overflow: hidden; border:1px solid #ccc;}
.arow .txt{margin-top: 40px; font-size: 16px; height: 100px; line-height: 30px;}
.arow .icon img{height: 70px;}
.arow h3{font-size: 24px; font-weight: 400;}
.arow p{font-size: 12px; line-height: 1.5; padding: 10px 5px 0;}
.arow_hover{position: absolute; left: 0; right: 0; bottom: -100%; top: 100%; background: #a51e23; color: #fff; padding: 40px 10px; -webkit-transition: all 0.2s ease-in-out;}
.arow:hover .arow_hover{top: 0; bottom: 0;}
.arow_hover .txt{display: flex; height: 70px; margin-top: 30px; justify-content: center;  align-items: center;color:#fff;}
.arow .down{display: none;}
.aitem .abtn{background: none; border: 1px solid #999; color: #666; display: block; padding: 0 50px; border-radius: 5px; line-height: 40px; -webkit-transition: all 0.5s ease-in-out; margin-top: 20px;}
.aitem .abtn:hover{color: #fff; background: #a51e23; border-color: #a51e23;}

.htitle{font-size: 36px; margin-bottom: 40px; line-height: 50px; position: relative; color: #333;}
.htitle span{position: relative; font-weight: 500;}
.htitle span:after{content: ""; position: absolute; bottom: -30px; background: #000; height: 2px; left: 50%; margin-left: -50px; width: 100px;}
.htitle .more{font-size: 16px; position: absolute; right: 0;}

.i_product{ text-align: center; padding: 0 0 80px;}
.stitle{text-align: left; font-size: 24px; padding: 50px 0 20px;}
.prow{display: flex; justify-content: center; align-items: center; flex-wrap: wrap; justify-content: flex-start; margin: 0 -20px 30px;}
.pitem{flex: 0 0 25%; width: 25%; padding: 20px; box-sizing: border-box; position: relative; color: #333;}
.pitem .txt{margin-top: 20px; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.pitem .img{width: 260px; height: 260px; margin: 0 auto; border: 1px solid #eee; padding: 5px; box-sizing: border-box;}
.pitem .pbtn{background: none; border: 1px solid #999; color: #666; display: block; padding: 0 50px; border-radius: 5px; line-height: 40px; -webkit-transition: all 0.5s ease-in-out; margin-top: 20px;}
.pitem .pbtn:hover{color: #fff; background: #a51e23; border-color: #a51e23;}
.i_product .btn{color: #fff; background: #a51e23; border-color: #a51e23;}
.i_product .btn:hover{background-color: #f5b418; border-color: #f5b418;}


/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {
    .banner{height: 300px;}
    .i_about{padding: 0;}
    .i_about h1{font-size: 28px;padding: 0 20px;}
    .i_about .more{margin-top: 30px;}
    .alist{margin: 0}
    .alist{display: block; padding: 0 10px;}
    .arow{border-right: 1px solid #ccc; margin-bottom: 20px; padding-bottom: 20px;}
    .arow_hover{ position: relative;  background: none; color: inherit;  padding: 20px 0 0; display: none;-webkit-transition: none;}
    .arow_hover .icon{display: none;}
    .arow_hover .txt{margin-top: 0; display: block; height: auto; color:#3e3a39;}
    .arow .down{display: block;}
    .arow .down .icon-down{border-color: #a51e23; vertical-align: super;}
    .arow .down.active{ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}
    .htitle{font-size: 26px;}
    .htitle span:after{ height: 1px; bottom: -20px;}
    .htitle .fr{font-size: 14px;}
    .i_product{padding: 10px;}
    .prow{margin: 0 -10px;}
    .pitem{flex: 0 0 50%; padding: 10px; width: 50%;}
    .pitem .txt{font-size: 16px; margin-top: 15px;}
    .pitem .img{ width: 100%; height: auto;}
    .pitem .pbtn{padding: 0 10px;}
    
}