@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* 全局 */
body,h1,h2,h3,h4,h5,h6,hr,p,pre,blockquote,dl,dd,ul,ol,th,td,form,fieldset,legend,button,input,textarea,img{margin:0;padding:0; border:none;}
h1,h2,h3,h4,h5,h6,button,input,textarea,select{font-size:100%;}
fieldset,img{border:0;}table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}ul{list-style:none;}
address,cite,code,dfn,var,em,th{font-style:normal;font-weight:normal;}
button,input,textarea{outline:none;font-family:inherit;}:focus{outline:0;}
body{font-family:Arial, Helvetica, sans-serif;}
textarea{overflow-x:hidden;overflow-y:auto;resize:none;}
a{color:white;text-decoration:none;display: block;}a:hover{text-decoration:none;}
i,em{font-style:normal;display: block;}
li{ float:left;}
/* 清浮动*/
.clearfix:after,.clearfix:before{content:"";display:table}
.clearfix:after{clear:both;overflow:hidden}
.clearfix{zoom:1}
.container{width: 960px;margin: 0 auto;background: white;}
header{align-items: center;color:white;display: flex;padding: 0 70px;background:url("../images/header_bg.png") no-repeat;
    box-sizing: border-box;height: 58px;line-height: 58px;}
.logo{font-size: 38px;}
.nav{width: 70%;margin-left: 50px;font-size: 22px;}
.nav li{width: 19%;text-align: center;margin-right: 56px;}
.search{height: 29px;width: 20%;background: white;position: relative;border-radius: 12px;}
.search img{position: absolute;right: 5px;top:7px;}
.nav li:hover{background-image: linear-gradient(0deg,
#272729 0%,
#5a646d 100%);
    box-shadow: 0px 0px 4px 0px
    rgba(0, 0, 0, 0.94);}
.banner{width: 100%;}
.banner img{width: 100%;vertical-align: middle;}
.WHY,.product,.versand,.gewah,.FAQ,.bewertung,.other{padding: 0 50px;box-sizing: border-box;color: white;}
.main{height:67px;background: #272729;display: flex;align-items: center;padding: 0 10px;box-sizing: border-box;}
.W_wrap li{display: flex;align-items: center;box-sizing: border-box;}
.W_title{width: 35%;font-size: 18px;text-align: center;}
.W_wrap{width: 73%;font-size: 12px;justify-content: center;display: flex;align-items: center;}
.fr{margin: 0 14px;}
.W_wrap li p{margin-left: 3px;}
.product{padding: 20px 50px;}
.p_wrap{display: flex;width: 100%;background: #57585d;height: 225px;margin-top: 50px;padding: 0 10px;box-sizing: border-box;}
.p_left{justify-content:space-between;margin-top:-40px;height:327px;background:#000;padding:10px;box-sizing:border-box;width: 50%;display: flex;}
.p_big{width: 79%;height: 307px;overflow: hidden;}
.p_big img{width: 100%;}
.p_sm{width: 19%;display: flex;justify-content: space-between;flex-direction: column;height: 307px;overflow-y: scroll;}
.p_sm img{width: 100%;}
.p_right{width: 50%;padding: 20px 0 0 10px;box-sizing: border-box;}
.p_right li{padding: 2px;box-sizing:border-box;margin: 10px 10px 0 0 ;
    display: flex;align-items: center;border: 1px solid #000000;font-size: 12px;width: 47%;}
.p_right_wrap{width: 100%;display: flex;flex-wrap: wrap;margin-bottom: 16px;}
.p_title{font-size: 15px;}
.buyNow{margin: auto;background-image: linear-gradient(0deg,
#272729 0%,
#444447 100%),
linear-gradient(
        #69241e,
        #69241e);
    background-blend-mode: normal,
    normal;
    border-radius: 5px;width: 129px;height: 24px;text-align: center;line-height: 24px;}
.title{background: #aba9aa;color: white;height: 58px;line-height: 58px;box-shadow: 0px 1px 4px 0px
#000000;margin: auto;width: 190px;text-align: center;font-size: 22px;z-index: 2;
    position: absolute;top:-30px;left:50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);}
.description,.versand,.gewah,.FAQ,.bewertung,.other{margin-top: 100px;position: relative;}
.d_wrap{background: white;padding: 20px;box-sizing: border-box;}
.description{padding: 0 50px;box-sizing: border-box;}
.description li{float: none;}
.versand .wrap{background: url("../images/versand_bg.png") no-repeat;padding: 40px 20px 0 20px;
    box-sizing: border-box;background-size: 100% 100%;font-size: 14px;line-height: 27px;}
.v_wrap{display: flex;}
.v_wrap li{width: 50%;padding: 10px;box-sizing: border-box;}
.v_wrap li p{margin-bottom: 20px;}
.v_wrap li span{width:30%;background-color: #57585d;font-size: 16px;line-height: 40px;
    height: 40px;text-align: center;box-sizing: border-box;padding: 10px;}
.v_wrap li:nth-child(2){padding-left: 30px;box-sizing: border-box;margin-top: 20px;}
.v_wrap li h1{font-size: 20px;}
.g_wrap{background: url("../images/gewa_bg.png") no-repeat;position: relative;height: 391px;}
.g_wrap p{font-size:14px;background:#000;background:rgba(0,0,0,.5);width: 73%;padding: 15px;
    box-sizing: border-box;height: 301px;
    line-height: 27px;position: absolute;top: 50px;left:20px;}
.f_wrap{background: #272729;width: 100%;box-sizing: border-box;padding-top: 40px;}
.f_wrap li{border-bottom: 1px dashed white;padding: 20px;box-sizing: border-box;line-height: 22px;}
.f_wrap h1{font-size: 22px;text-align: center;margin-bottom: 10px;}
.f_wrap li:last-child{border-bottom: none;}
.b_wrap img{width: 100%;}
.o_wrap{background: #57585d;}
.title1{width: 336px;}
.o_wrap{flex-wrap:wrap;display: flex;
    padding: 50px 15px 0 15px;box-sizing: border-box;align-items: center;}
.o_wrap li{width: 23%;margin: 0 0 15px 11px;border: 1px solid #000;}
.o_wrap li img{width: 100%;vertical-align: middle;}
.o_wrap li span{display:block;background: #46464a;font-size: 11px;padding:0 12px;box-sizing: border-box;height: 42px;overflow: hidden;}
.other{margin-bottom: 80px;}

.o_wrap li span {
    font-family: ArialMT;
    font-size: 9px;
    display: block;
    width: 100%;
    font-weight: normal;
    padding: 5px;
    box-sizing: border-box;
    font-stretch: normal;
    line-height: 14px;
    letter-spacing: 0px;
    height: 50px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

@media only screen and (max-width: 768px){
    .container{width: 100%;}
    .nav li{width: 30%;margin-right: 0;}
    .WHY, .product, .description, .versand, .gewah, .FAQ, .bewertung, .other{padding: 0 20px;}
    .fr{margin: 0 4px;}
    .W_title{font-size: 15px;}
    .p_big{height: 264px;}
    .p_sm{height: 264px;}
    .p_left{height: 288px;}
    .W_wrap li img{width: 80%;}
}
@media only screen and (max-width: 481px){
    .container{width: 100%;}
    .logo,.search,.WHY,.p_right{display: none;}
    .nav{width: 100%;margin-left: 0;font-size: 20px;}
    header{padding: 0 10px;line-height: 20px;height: 50px;background-size: 100% 100%;}
    .WHY, .product, .description, .versand, .gewah, .FAQ, .bewertung, .other{padding: 0 10px;}
    .d_wrap{padding: 50px 20px 20px 20px;font-size: 12px;line-height: 18px;}
    .versand .wrap{padding: 40px 10px 0 10px;}
    .p_wrap{display: block;}
    .p_left{width: 100%;}
    .p_right{width: 100%;}
    .p_big{height: 249px;}
    .p_sm{height: 249px;}
    .p_left{height: 270px;}
    .title{font-size: 20px;width: 150px;}
    .versand .wrap{font-size: 12px;line-height: 20px;}
    .v_wrap li span{font-size: 14px;}
    .v_wrap li:nth-child(2){padding-left: 18px;}
    .g_wrap p{left:0;font-size: 12px;line-height: 20px;width:100%;height: 341px;padding: 10px;}
    .f_wrap{font-size: 12px;}
    .f_wrap li{padding: 15px;line-height: 20px;}
    .f_wrap h1{font-size: 18px;margin-bottom: 4px;}
    .title1{width: 287px;}
    .o_wrap li{width: 46%;margin: 0 0 15px 6px;}
    .description, .versand, .gewah, .FAQ, .bewertung, .other{margin-top: 90px;}
}