*{box-sizing: border-box;}
body{margin:0;color:#333;font-size:14px;line-height:1.5;}
a:link,a:visited{text-decoration:none}
a{color:#333;}
a:hover{color:#E61727;}
img{max-width:100%;display:block;}
a,label,span,button{display:inline-block;}
button{cursor:pointer;border:none;}
button.disable,button[disabled='disabled']{cursor:not-allowed;}
h3{margin-bottom:0;font-weight:normal;}
.hidden{display:none;}
.flex_between{display:flex;justify-content:space-between;flex-wrap:wrap;}
.flex_start{display:flex;justify-content:flex-start;flex-wrap:wrap;}
.vcenter{position:absolute;top:50%;transform:translate(0,-50%);}
.container{width:100%;padding:0 15px;max-width:1600px;margin:0 auto;}



header{padding:15px 50px;text-align:center;position:relative;}
header .btnBack{position:absolute;left:50px;top:50%;transform:translate(0,-50%);}
header .btnBack span{display:inline-block;}

.diy-body{padding:3vw 0;}
.diy-body canvas{border:1px solid #eee;margin-top:50px;}
.diy-body .left{width:610px;}
.diy-body .right {min-width:590px;width:50%;}
.diy-body .right .diy-handle-tab{text-align:center;margin-bottom:30px;}
.diy-body .right .diy-handle-tab span{color:#989898;font-size:18px;margin:0 20px;}
.diy-body .right .diy-handle-tab span.current{color:#000;text-decoration:underline;}
.diy-body .right .tabbox{display:none;}
.diy-body .right .tabbox.current{display:block;}
.diy-body .right .tabbox .title{text-align:center;margin-bottom:30px;}
.diy-body .right .tabbox .title label{cursor:pointer;padding:8px 20px;margin:0 10px;background-color:#eee;border-radius:5px;}
.diy-body .right .tabbox .title label.current{background-color:#015d9d;color:#fff;}
.diy-body .right .tabbox .list .tablist{display:none;max-width:520px;margin:0 auto;}
.diy-body .right .tabbox .list .tablist.current{display:block;}
.diy-body .right .tabbox .list .tablist .item{width:48%;border:1px solid #eee;padding:30px 30px 20px;border-radius:5px;margin-bottom:20px;text-align:center;cursor:pointer;position:relative;overflow:hidden;}
.diy-body .right .tabbox .list .tablist .item .img{width:100px;margin:0 auto;}
.diy-body .right .tabbox .list .tablist .item img.checked{display:none;}
.diy-body .right .tabbox .list .tablist .item h3{font-size:13px;color:#888;}
.diy-body .right .tabbox .list .tablist .item.current:before{content:"";border:1px solid #E61727;position:absolute;left:0;right:0;bottom:0;top:0;border-radius:5px;}
.diy-body .right .tabbox .list .tablist .item.current:after{content:"";background:url(/diygoods/images/current.png) no-repeat right bottom;width:26px;height:26px;position:absolute;bottom:0;right:0;}
.diy-body .right .tabbox .list .tablist .item.current img.default{display:none;}
.diy-body .right .tabbox .list .tablist .item.current img.checked{display:block;}
.diy-body .right .tabbox#tab2 .title label.color1{background-color:#c1c1c3;}
.diy-body .right .tabbox#tab2 .title label.color2{background-color:#fced88;}
.diy-body .right .tabbox .catelist{text-align:center;margin-bottom:20px;}
.diy-body .right .tabbox .catelist>a{margin:0 10px;color:#888;}
.diy-body .right .tabbox .catelist>a.current{text-decoration:underline;color:#000;}
.diy-body .right .tabbox .prolist{height:300px;overflow-y:auto;margin-bottom:30px;}
.diy-body .right .tabbox .prolist .item{width:calc((100% - 40px)/5);margin:0 10px 10px 0;cursor:pointer;position:relative;border-radius:5px;overflow:hidden;}
.diy-body .right .tabbox .prolist .item:nth-child(5n){margin-right:0;}
.diy-body .right .tabbox .prolist .item.current:before{content:"";border:1px solid #E61727;position:absolute;left:0;right:0;bottom:0;top:0;}
.diy-body .right .tabbox .prolist .item.current:after{content:"";background:url(/diygoods/images/current.png) no-repeat right bottom;width:26px;height:26px;position:absolute;bottom:0;right:0;}
.diy-body .right .tabbox .framelist{max-width:520px;margin:0 auto;}
.diy-body .right .tabbox .framelist .item{width:48%;border:1px solid #eee;padding:30px 30px 20px;border-radius:5px;margin-bottom:20px;text-align:center;cursor:pointer;position:relative;overflow:hidden;}
.diy-body .right .tabbox .framelist .item .img{width:100px;margin:0 auto;}
.diy-body .right .tabbox .framelist .item h3{font-size:13px;color:#888;}
.diy-body .right .tabbox .framelist .item.current:before{content:"";border:1px solid #E61727;position:absolute;left:0;right:0;bottom:0;top:0;border-radius:5px;}
.diy-body .right .tabbox .framelist .item.current:after{content:"";background:url(/diygoods/images/current.png) no-repeat right bottom;width:26px;height:26px;position:absolute;bottom:0;right:0;}

.btnlist{text-align:center;}
.btnlist .btn{width:150px;background-color:#333;border-radius:5px;padding:15px 15px;color:#fff;font-size:16px;}
.btnlist .btn.disable{background-color:#888;}
.btnlist .btn:not(.disable):hover{background-color:#E61727;}


.createbody{width:100%;background-color:#f7f7f7;padding:3vw 0;}
.createbody .createimg{text-align:center;}
.createbody .createimg img{margin:0 auto;}
.createbody .createinfo .left{width:20%;position:relative;}
.createbody .createinfo .left h3{font-size:18px;}
.createbody .createinfo .left p{font-size:13px;border-bottom:1px solid #ddd;padding-bottom:10px;}
.createbody .createinfo .left p label{width:60px;float:left;color:#888;}
.createbody .createinfo .left p span{color:#333;}
.createbody .createinfo .left p.mailto{font-size:12px;color:#999;}
.createbody .createinfo .middle{width:50%;position:relative;}
.createbody .createinfo .middle .vcenter{width:80%;left:10%;}
.createbody .createinfo .middle .item{width:33.33%;background-color:#fff;text-align:center;padding:30px 30px 20px;}
.createbody .createinfo .middle .item:not(:last-child){border-right:1px solid #ddd;}
.createbody .createinfo .middle .item .img{width:130px;margin:0 auto 10px;height:50px;position:relative;}
.createbody .createinfo .middle .item .img img{width:100px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.createbody .createinfo .middle .item.info2 .img img:nth-child(1){margin-left:-10px;margin-top:-10px;}
.createbody .createinfo .right{width:20%;position:relative;}
.createbody .createinfo .right .btndown>img{vertical-align:middle;display:inline-block;}


@media (min-width:1px) and (max-width:1229px) {
    .diy-body .left{width:100%;text-align:center;}
    .diy-body canvas{margin-top:0;}
    .diy-body .right {width:100%;margin-top:30px;}
}
@media (min-width:1px) and (max-width:767px) {
    header{padding:10px 50px;}
    header .btnBack{left:15px;font-size:12px;}
    .diy-body canvas{width:100%;}
    .diy-body .right .diy-handle-tab span{font-size:16px;}
    .diy-body .right .tabbox .title label{padding:5px 10px;font-size:13px;margin:0 5px 5px;}
    .diy-body .right .tabbox .prolist .item{width:calc((100% - 30px)/3);margin:0 15px 15px 0;}
    .diy-body .right .tabbox .prolist .item:nth-child(5n){margin-right:15px;}
    .diy-body .right .tabbox .prolist .item:nth-child(3n){margin-right:0;}
}

@media (min-width:992px) and (max-width:1229px){
    .createbody .createinfo .middle .vcenter{width:100%;left:0;}
    .createbody .createinfo .middle .item {padding:30px 10px 20px;}
}
@media (min-width:1px) and (max-width:991px) {
    .createbody .createinfo .left{width:100%;margin-bottom:15px;}
    .createbody .createinfo .middle{width:100%;margin-bottom:15px;}
    .createbody .createinfo .middle .vcenter{position:relative;top:0;transform:inherit;}
    .createbody .createinfo .right{width:100%;text-align:center;}
    .createbody .createinfo .right .vcenter{position:relative;top:0;transform:inherit;}
}
@media (min-width:1px) and (max-width:767px) {
    .createbody .createinfo .middle .vcenter{width:100%;left:0;}
    .createbody .createinfo .middle .item{width:100%;padding:20px 10px 10px;border-bottom:1px solid #eee;}
}