@charset "utf-8";

body,html{background: #fff;}

.header-nav ul li.response-on a::before {width: 100%;}

.banners::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .35);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 4;
    display: none;
}

.com_button{padding: 20px 0;}
.com_button span{ display: inline-block; width:235px; margin-bottom:5px; position: relative;}
.com_button span:hover .altList{/* display: block; */-webkit-transform: scaleY(1);-ms-transform: scaleY(1);transform: scaleY(1);opacity: 1;visibility: visible;}
.com_button .cur2 {border: 1px solid #1398FD;color: #1398FD;}
.com_button a {display: inline-block;zoom: 1;padding: 5px;border: 1px solid #FFF;border-radius: 4px;color: #333;font-size: 14px; font-weight: 200;}

.altList{position: absolute;z-index: 12;top:40px;/* display: none; */opacity: 0;visibility: hidden;-webkit-transform: scaleY(0);-ms-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: center top;-ms-transform-origin: center top;transform-origin: center top;transition: opacity .3s, visibility .3s, -webkit-transform .3s;-webkit-transition: opacity .3s, visibility .3s, -webkit-transform .3s;-o-transition: transform .3s, opacity .3s, visibility .3s;transition: transform .3s, opacity .3s, visibility .3s;transition: transform .3s, opacity .3s, visibility .3s, -webkit-transform .3s;}
.altList dl{background-color: #fff; box-shadow: 0 0 10px 0 #ccc; overflow: hidden; width: 220px; padding:10px; border-radius: 5px; position: relative;z-index: 13;}
.altList dl dd{float: left; background-color: #fff; position: relative; z-index: 1; width: 50%;}
.altList dl dd a{ overflow: hidden; }
.altList em{position: absolute; top:-10px; left:20px; display: block; width:0; height: 0; border-style: solid; border-width: 10px; border-color: #fff #fff transparent transparent; box-shadow: 0 0 5px #ccc; transform: rotate(-45deg);}


._meng {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 100;
    height: 60px;
    line-height: 60px;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    background-color: rgba(0, 0, 0, .35);
    -webkit-transition: .25s;
    -o-transition: .25s;
    -moz-transition: .25s;
    transition: .25s;
} 
.com_list li:hover ._meng{
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
._meng .s_btn {
    margin-left: 10px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    font-size: 14px;
    color: #fff;
    border: 1px solid #ededec;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: .25s;
    -o-transition: .25s;
    -moz-transition: .25s;
    transition: .25s;
    cursor: pointer;
}
._meng .s_btn img{
    margin-right: 5px;
}
._meng .s_btn:hover {
    background-color: #007eff;
    border: 1px solid #007eff;
    -webkit-transition: .25s;
    -o-transition: .25s;
    -moz-transition: .25s;
    transition: .25s;
}

.mo_footer{margin-top:15px;}
.mo_footer span{display:block;line-height: 2.25; font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; font-weight: 200;}
.mo_footer span label{color:#999;}
.mo_footer .curBtn{display: inline-block; background-color: #0091FF; color:#fff; font-size: 14px; line-height: 30px; text-align: center; padding:0 25px; border-radius: 5em;}



.com_list{background-color: #F5F5F5; overflow: hidden;}
.com_list li {position: relative;width: 31.2%;margin-top: 45px;padding: 15px;box-sizing: border-box;background-color: #fff;margin-right: 3.2%;}
.com_list li:nth-child(3n) { margin-right: 0; }
.com_list li.cur1 .mo_footer .curBtn{background-color: #12A9FF;}
.com_list .temp-pic { overflow: hidden; position: relative; border:0; transition:inherit;}
.com_list .temp-pic:hover{ transform:inherit; }
.com_list .temp-pic_a {display: block;width: 100%;height: 312px;overflow: hidden;border: 1px solid #ededed;}
.com_list .position_rela, .expressReviewImg, .mobileInitReview { position: relative; }
.com_list .temp-pic_a em {display: block;width: 100%;}
.com_list .temp-pic_a img { width: 100%; }
.com_list .temp-pic-attr { display: none; width: 80px; height: 80px; overflow: hidden; position: absolute; top: 100px; left: 50%; right: 0; margin-left: -40px; z-index: 9;transition: all .25s; }
.com_list .temp-pic:hover .temp-pic-attr{ display: block; }
.com_list .temp-pic-attr .carImg{width:80px; height: 80px; background:url("../images/carImg.png");}
.com_list .temp-pic-attr a { float: left; width: 90px; line-height: 40px; height: 40px; text-align: center; border-radius: 25px; background-color: #0099ff; color: #FFF; border: 0; }
.com_list .temp-pic-attr .or_a_ { background-color: rgba(0,0,0,0.5); display: none; }
.com_list .or_a_ img { width: 32px; height: 32px; margin-top: 6px; }
.com_list .temp-pic p {display: none;height: 313px;position: absolute;left: 0;right: 0;margin: 0 auto;top: 0;z-index: 8;background: url("../images/bg1.png");}
.com_list .temp-pic:hover p{ display: block; } 
.temp-pic-attr .or_a_ { background-color: rgba(0,0,0,0.5); display: none; }


.com_list li .show_iphone{position: absolute;right: 20px;bottom: 40px;z-index: 10;display: inline-block;overflow: hidden;width: 126px;height: 219px;background: url("../images/iphone_for.png") no-repeat center/cover;overflow: hidden;}
.com_list li .show_iphone span{
    margin-top: 18px;
    display: block;height: 100%;overflow: hidden;width: 100%;height: 173px;overflow: hidden;padding: 0 15px 0 14px;box-sizing: border-box;}
.com_list li .show_iphone img{width:100%;display: block;}
.com_list li .show_iphone span p{ display: none; height: 100%; position: absolute; left: 0; right: 0; top: 0; background: url("../images/bg1.png"); }
.com_list li .show_iphone span .carImg{display: none; position: absolute; top:50%; left:50%; margin:-40px 0 0 -40px; width:80px; height: 80px; background: url("../images/carImg.png");}
.com_list li .show_iphone.cur span p,
.com_list li .show_iphone:hover span p,
.com_list li .show_iphone.cur span .carImg,
.com_list li .show_iphone:hover span .carImg{display: block;}




@media screen and (max-width: 1440px) {
    .com_button span{
        width: 230px;
    }
}
@media screen and (max-width: 1200px) {
    .com_button span{
        width: auto;
        margin-right: 15px;
    }
    .com_button{
        overflow: initial;
    }
    .banners::after{
        display: block;
    }
}
@media screen and (max-width: 960px) {
    .com_list li{
        width: 48.4%;
    }
    .com_list li:nth-child(3n){
        margin-right: 3.2%;
    }
    .com_list li:nth-child(2n){
        margin-right: 0;
    }
    .com_button span {
        margin-right: 12px;
    }
}

@media screen and (max-width: 750px) {
    .com_list{
        padding-top: 15px;
    }
    .com_list li {
        width: 100%;
        margin-right: 0;
        margin-top: 15px;
    }
    .com_list li:nth-child(3n){
        margin-right: 0;
    }
    

    /* 手机端分类新添加 */
    .com_button{
        display: flex;
        flex-wrap: wrap;
    }
    .com_button span {
        margin-bottom: 0;
        margin-right: 4%;
        width: 48%;
        margin-top: 5px;
    }
    .com_button span>a{
        overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
        padding: 0 5px;
        margin: 5px 0;
    }
    .com_button span:nth-child(2n){
        margin-right: 0;
    }
    .com_button span:nth-child(2n) .altList{
        transform: translateX(-55%);
    }
    .altList{
        left: 50%;
        transform: translateX(-35%);
    }
    .altList dl {
        width: 170px;
    }
    .altList dl dd a{
        overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
        padding: 0;
        margin: 5px 0;
        text-align:center;
    }
    .altList em{
        margin-left: -10px;
        left: 50%;
    }
}