#pro_img { position: relative; }
#pro_img svg{width:500px;height:500px}
#sys_buy { float: right; width: 550px; }
/*#sys_attrs img { width: 50px; padding: 1px; display: inline-block; margin: 5px 3px; cursor:pointer;}
#sys_attrs img.active { outline: 2px solid #ff5252; cursor: default; }
#sys_attrs #Type { display: inline-block; width: auto; border: 1px solid #ccc; padding: 10px 20px; border-radius: 5px; background-color: #fff; cursor: pointer; font-size: 18px; }
#sys_attrs #Type:after { content: ""; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid #000; width: 0; height: 0; vertical-align: middle; display: inline-block; margin-left: 10px; }
#sys_attrs #Style2 { overflow: hidden; }
#sys_attrs #Style2 ul {  float: left;}
#sys_attrs #Style2 li { text-align: center; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,.3); padding: 10px ; display: inline-block; margin: 5px; cursor: pointer; border: 0 none; white-space: nowrap;width:auto !important; }
#sys_attrs #Style2 .active { background-color: #ff5252; color: #fff !important;cursor:default; }
#sys_attrs #Style2 h3 { margin: 0; }
#sys_attrs #Style2 li:hover{color:#ff5252}

#Style2 + dd { position: relative;display:none !important; }
#Style2 + dd button { display:none; }

#Style2prev { left: -40px; transform: rotate(180deg); }
#Style2next { right: -40px; }
#Style2 + dd button:hover{color:#ff5252}*/
#qty, #Customize { display: none; }
#sys_attrs dt.error{color:#f00}

/*#plist>li:nth-child(4n+1){padding-left:0}*/
#menu_cate{padding:20px 20px 0;line-height:1;}
#menu_cate:empty{display:none;}
#menu_cate * { display: inline-block; }
#menu_cate a { background-color: #525E6E; color:#fff;padding:8px;margin-left: 10px;}
#menu_cate .cancel {padding:7px;background-color:#fff;color:#808080;border:1px solid #808080;}
#menu_cate .cancel:hover {  background-color: #808080; color:  #fff; }
#menu_cate .cancel:after { content: '✕';  vertical-align: middle; display: inline-block; margin-left: 7px; }


#plist li{text-align:center;}
#plist span{width:100%;float:left;font-size:16px;line-height:2;font-weight:bold;}
#plist b{color:#ff5252;display:block;font-size:20px;}
#plist em { font-style: normal; color: #808080; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; width: 100%; float: left; }
/*#plist b:last-child{float:right;}*/

#filter dd:last-child{text-align:center;}

.wrap-max-box  #pro_img svg {
    width: 100%;
    height: 100%;
}
#sys_attrs #Type ,#moreCase{ display: block;  border: 1px solid #ccc; padding: 10px 0 10px 20px; border-radius: 5px; background-color: #fff; cursor: pointer; font-size: 18px; width:346px;box-sizing:border-box;text-align:left;}
#sys_attrs #Type:after ,#moreCase:after{ content: ""; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid #000; width: 0; height: 0; vertical-align: middle; display: inline-block; margin: 8px 15px 0 0; float:right;}
#sys_attrs #Style2 li { width: 90%; overflow: hidden; padding: 0; border: 0 none; line-height: 24px; border-radius: 0; margin: 3px; cursor: pointer; position: relative; }
#sys_attrs #Style2 img { width: 100%; transition: all .3s; border-radius: 0; }
#sys_attrs #Style2 p { position: absolute; bottom: 0; width: 100%; background-color: rgba(0,0,0,.5); font-size: 20px; color: #fff; padding: 10px; box-sizing: border-box; }
#sys_attrs #Style2 li.active { outline: 3px solid #2991C7;background-color:#2991C7 }
#Style2>b{display:none; width: 34px; height: 34px; font-size: 28px; line-height: 34px; font-family: icon; text-align: center; cursor: pointer;float:right;margin:-2px 0 0 21px;}
#Style2>b:after{content:'\e6a4'}


#Sortby+ul,#Sortby,#Sortby{display:none;}
#moreCase.active +b+ select + ul, #moreCase.active+b + select,#moreCase.active + b { display: inline-block; }
#Personalize #Style2>b{margin:9px 0 0}
#Sortby { padding: 4px 25px 4px 10px; border-radius: 2px; float: right; margin-bottom: 10px; border-color: #ccc; background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAGBAMAAAArhUMgAAAALVBMVEWQmKH////Dx8t5g47v8PFsd4TV2NvMz9P39/iboqqmrLOwtbuFjZje4OK6vsP2psZWAAAALklEQVRo3mNgEBQUMhGEAAZnRUHXRBhH3EJwliCMI7ha/ASC05xzEcERi4OxBQFoxgmOkbwKlQAAAABJRU5ErkJggg==) no-repeat 100px; cursor: pointer; }
#moreCase.active:after{transform:rotate(180deg)}


#sys_attrs #Style2 em { margin-right: 10px; }
#sys_attrs #Style2 li:hover img { transform: scale(1.1); }

#Style2>ul{max-height:600px;overflow:auto;}