*{margin: 0;padding: 0;}
ul{height:100%;width: 100%;list-style: none;}
img {width: 100%;vertical-align: middle;}
a{color:#2fa6ba;text-decoration:none;}a:hover{text-decoration:none;}
.clearfix:after,.clearfix:before{content:"";display:table}
.clearfix:after{clear:both;overflow:hidden}
.clearfix{zoom:1}
.container {margin: 0 auto;width: 960px;}
.header{height: 38px;color: black;font-size: 18px;}
.header ul{display: flex;align-items: center;}
.header ul li{width: 25%;text-align: center;}
.banner{width: 100%;}
.WHY {background:url("../images/why.png") no-repeat center/cover;background-size: 90%;}
.WHY ul{width: 90%;display: flex;align-items: center;justify-content: space-between;}
.WHY li:first-child{font-size: 18px;border-right: 2px solid white;box-sizing: border-box;margin-left: 37px;}
.WHY li {width: 20%;text-align: center;font-size:12px;color: white;padding: 10px;box-sizing: border-box; }
.WHY li i{background: url("../images/css_sprites.png") no-repeat;display: block;margin-left: 60px;}
.WHY li:nth-child(2) i{  width: 38px; height: 31px;background-position:-70px -10px; }
.WHY li:nth-child(3) i{width: 40px; height: 31px;background-position:  -10px -10px; }
.WHY li:nth-child(4) i{  width: 35px; height: 31px;background-position:  -68px -61px; }
.WHY li:last-child i{width: 38px; height: 31px;background-position:  -10px -61px; }
.title{font-size: 30px;margin: 30px 0;text-align: center;color: #4c4c4c;
    background-image: linear-gradient(-90deg, #2fa6ba 0%, #316b9d 49%, #33307f 98%), linear-gradient(#ff0000, #ff0000);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.fl {float: left;border: 0;}
.fr{display: block;width: 68px;height: 4px;
    background-image: linear-gradient(-90deg, #2fa6ba 0%, #316b9d 49%, #33307f 98%), linear-gradient(#ff0000, #ff0000);
    background-image: -webkit-linear-gradient(-90deg, #2fa6ba 0%, #316b9d 49%, #33307f 98%), linear-gradient(#ff0000, #ff0000);;
    background-image: -moz-linear-gradient(-90deg, #2fa6ba 0%, #316b9d 49%, #33307f 98%), linear-gradient(#ff0000, #ff0000);
    background-image:  -o-linear-gradient(-90deg, #2fa6ba 0%, #316b9d 49%, #33307f 98%), linear-gradient(#ff0000, #ff0000);
    margin-left: 432px;
    margin-top: 10px;
}
.f2{float: right;width: 20%;}
.f2 img{width: 100%;}
.product{width: 100%;overflow: hidden;padding: 20px;box-sizing: border-box;}
.p_left{width: 45%;float: left;display: flex;justify-content: space-between;}
.p_right{width: 50%;float: right;}
.p_big{width: 68%;height: 281.5px;overflow: hidden;}
.p_big img{width: 100%;border: 1px solid black;vertical-align: middle;box-sizing: border-box;}
.p_sm img{width: 50%;border: 1px solid black;vertical-align: middle;margin-bottom: 8px;}
.p_sm{width: 30%;display: block;height: 280px;overflow: hidden;}
.p_sm li{margin-bottom: 10px;}
.p_right ul{display: flex;margin: 20px 0; color: white;background: url("../images/pro_bg.png") no-repeat;background-size: 100%;flex-wrap: wrap;padding: 20px 10px;box-sizing: border-box;}
.p_right ul li span,#content2 span,#content4 span{display: block;font-weight: 600;}
.p_right ul li{width: 50%;text-align: center;}
.buyNow {text-decoration: none;color: white;width: 313px;display: block;text-align: center;line-height: 47px;font-weight: 600;
    height: 47px;
    background-image: linear-gradient(-90deg,
    #2fa6ba 0%,
    #316b9d 49%,
    #33307f 98%),
    linear-gradient(
            #ff0000,
            #ff0000);
    background-blend-mode: normal,
    normal;
    border-radius: 2px;margin:20px 0 0 40px;}
.Description{width: 100%;}
.buyTxt {color: black;}
.d_content{overflow:hidden;position:relative;padding: 40px 30px 0 30px;box-sizing: border-box;}
.d_content img{width: 30%;position: absolute;top:118px;right: 40px;}
.d_left{width: 50%;float: left;}
.d_left i{font-style: normal;}
.d_right{width: 50%;float: right;margin-top: 100px;}
.d_content_text {overflow:hidden;line-height: 20px;background: white;width: 100%;padding: 20px;box-sizing: border-box;font-size: 14px;}
.d_right p {width: 90%;}
.d_content_text span {display: block;font-weight: 500;margin: 10px 0;}
input{display: none;}
#eting{ width: 100%;margin-top: 20px;background-color: #f3f3f3;border-collapse: collapse;border-spacing: 0;border: 4px solid #f3f3f3;}
table th,table td{ border: 4px solid #f3f3f3;height: 40px;background-color: #fff;text-align: left;font-weight: normal;}
label {display: inline-block;margin: 0 0 -1px;padding: 7px 25px;
    text-align: center;border: 2px solid  #31689b;width: 13.5%;margin-left: 35px;
    border-bottom: none;
}
.main{padding: 0 20px;box-sizing: border-box;background: white;margin-top: 60px;}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4{
    display: block;
    font-size:14px;
    color:#666;
    padding: 10px;
    line-height: 22px;
}
label:hover {cursor: pointer;}
section {display: none;background:#FFF;border-top:2px solid #31689b;box-sizing: border-box;}
input:checked + label {
    color: white;cursor: pointer;background-image: linear-gradient(-90deg, #2fa6ba 0%, #316b9d 49%, #33307f 98%), linear-gradient(#31689b, #31689b)
}
#content2{width: 100%;background:url("../images/warrr_bg.png") no-repeat center/cover;box-sizing: border-box;}
#content2 p,#content4 p{width: 90%;}
#content2 span,#content1 span{margin: 10px 0;}
#content1 {background: url("../images/shipping_bg.png")  no-repeat center/cover;box-sizing: border-box;}
#content4{background: url("../images/FAQ_bg.png")  no-repeat center;box-sizing: border-box;background-size: 100%;}
.other{ width: 100%;padding: 10px;box-sizing: border-box;}
#content4 span{margin-top: 15px;}
.o_content{
    width: 100%;}
.o_content li{    width: 23%;
    margin: 0 10px 20px 0;}
.o_content li a{display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.o_content li img{    width: 100%;
    border:4px solid #ddd;
    border-image: -webkit-linear-gradient(-90deg,#2fa6ba, #316b9d, #33307f) 10 20 30;
    border-image: -moz-linear-gradient(-90deg,#2fa6ba,#2fa6ba, #316b9d, #33307f) 10 20 30;
    border-image: -o-linear-gradient(-90deg,#2fa6ba,#2fa6ba, #316b9d, #33307f) 10 20 30;
    border-image: linear-gradient(-90deg,#2fa6ba,#2fa6ba, #316b9d, #33307f)  10 20 30;
    display: inline-block;
    box-sizing: border-box;}
.o_content li p{font-size: 12px;}

.Description li{float:none;}
.Description ul{list-style:inherit;display: block;}
.Description ul li{ list-style:inherit;
    margin-left:35px; }

@media only screen and (max-width:768px){
    .container{width: 100%;}
    .container .header{width: 100%;}
    .container .header ul li{width: 31%;height: 31px;line-height: 34px;font-size: 16px;}
    .container .header ul li:first-child{display: none;}
    .fr{margin-left: 335px;}
    .p_big {height: 223px;overflow: hidden;}
    .p_right{width: 55%;}
    .d_content img{top:80px;}
    label{width: 11.5%;}
    #tab4:checked ~ #content4{line-height: 20px;}
    .title{font-size: 20px;}
    .p_sm{height: 233px;}
}
@media only screen and (max-width:481px){
    .container{width: 100%}
    .banner{width: 100%;}
    .banner img{width: 100%;}
    .WHY{display: none;}
    .fr{display: none;}
    .p_left,.d_left,.p_right,.d_right{float: none;width: 100%;font-size: 12px;}
    .d_right{margin: 0;}
    a{margin: 10px 0 0 10px;}
    .d_content{padding: 10px;}
    .d_content img{top:65px;}
    label{width: 22.5%;    font-size: 14px;margin-left: 0;padding: 0;}
    #content4,#content1{background: none;}
    #tab1:checked ~ #content1,
    #tab2:checked ~ #content2,
    #tab3:checked ~ #content3,
    #tab4:checked ~ #content4{font-size: 12px;line-height: 20px;}
    #content2 p, #content4 p{width: 96%;}
    .o_content li {width: 47%;font-size: 12px;}
    .main{margin-top: 40px;}
    .p_sm li{margin-bottom: 8px;}
    .p_big{height: 228px;}
    .table{width: 318px;}
    .f2{float: none;}
}
/*video*/
.video{width: 100%;}
.video-wrap{margin: auto;width: 76%;}
.video-container{
    width: 100%;
    height: 486px;
    background-size: 100% auto;
    background-color: black;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}
.video-container .btn{
    width: 68px;height: 48px;background:#202120;border-radius: 8px;  display: flex;
    align-items: center;
    justify-content: center;
}
.logo{text-align: right;margin-bottom: 20px;}
.video-container .btn img{width: 20px;}
.video-container:hover .btn{background: #c81c20;}
.video-wrap p{font-size: 30px;font-weight: 600;margin: 30px 0;}
@media only screen and (max-width: 768px){
    .video-wrap{width: 100%;}
}