body.Personalize { position: fixed; }
#header { background-color: #fff; }



body.Personalize #loading { display: block; z-index: 996; }

body.Personalize #Personalize { z-index: 998; }

#Personalize { position: fixed; background-color: #fff; width: 1100px; z-index: -998; top: 1vh; height: 98vh; display: block; border-radius: 8px; overflow: hidden; }

#Personalize .title { border-bottom: 1px solid #D5D9D9; background-color: #F0F2F2; border-radius: 8px 8px 0 0; padding: 16px 24px; font-weight: bold; line-height: 20px; height: 20px; font-size: 18px; text-align: left; }
#Personalize .title > b { float: right; cursor: pointer; user-select: none; display: block; }

#Personalize > .header { padding: 24px; border-bottom: 1px solid #D5D9D9; }

#qty { display: block; padding: 0; margin: 0; border: 0; float: right; }

#Personalize .sys_price { float: left; font-size: 34px; margin: 0; padding: 0; border-bottom: 0; }
#qty .btn_3 { width: 150px; float: right; }

#qty input { border: 0; font-size: 16px; width: 68px; text-align: center; vertical-align: middle; line-height: 48px; height: 48px; }
#qty i, #qty u { height: 48px; width: 48px; vertical-align: middle; display: inline-block; cursor: pointer; transition: all .3s; user-select: none; }
#qty u { text-decoration: none; background: #F6F8FC url(data:image/gif;base64,R0lGODlhDAAMAIABAG56jf///yH5BAEAAAEALAAAAAAMAAwAAAIXjA1we8nsXlMS0Zmy3jzOaoGBJ5GPWQAAOw==) no-repeat center; }
#qty i { background: #F6F8FC url(data:image/gif;base64,R0lGODlhDAACAIAAAG56jQAAACH5BAAAAAAALAAAAAAMAAIAAAIEhI+pVwA7) no-repeat center; }
#qty i:hover, #qty u:hover { background-color: #E0E4EB; }

#qty .btn_2 { width: 150px; display: inline-block; height: 50px; line-height: 50px; border-radius: 25px; }



#svg > div > svg { width: 600px; height: 600px; }
#svg > div { display: none; position: relative; }
#svg > div.active { display: block; }
#system_attrs { float: left; width: 460px; overflow-y: auto; height: calc(98vh - 160px); padding: 0 10px; }

#newFont > div { padding: 10px 0; }


#newFont dd > div > label { font-size: 16px; position: relative; font-weight: bold; }

#newFont .count { color: #888; margin-top: 5px; }


.selectpick_div { border: 1px solid #ccc; margin-top: 10px; }

#selectpick_span_textFont { padding-left: 15px; }

.selectpick_options ul { height: 160px; }

#sys_new_color ul { margin-top: 10px; }

#sys_new_color li { border: 1px solid #ccc; width: 36px; display: inline-block; height: 36px; margin: 0px 7px 7px 0; border-radius: 50%; cursor: pointer; }


#svg { width: 600px; height: 600px; }
#sys_buy > a { width: 280px; }

#sys_buy #sys_attrs { border-bottom: 1px solid #E0E4EB; padding-bottom: 35px; margin-bottom: 35px; }



.svg_content>image{user-select:none;pointer-events:none;}
.svg_content>g>g>image{cursor:pointer;}
.sys_uploadimg { user-select: none; }
.sys_uploadimg div { padding: 10px 0 0; }
.sys_uploadimg i { width: 62px; height: 62px; border-radius: 5px; display: inline-block; text-align: center; vertical-align: middle; cursor: pointer; margin-right: 20px; }
.sys_uploadimg .icon:before { font-size: 24px; }
.sys_uploadimg label { display: inline-block; position: relative; }
.sys_uploadimg .icon-pic { outline: 1px solid #ccc; line-height: 62px; }
.sys_uploadimg input { position: absolute; z-index: -99; width: 10px; height: 10px; top: 0; left: 0; opacity: 0; }

.sys_uploadimg .icon span { display: block; font-size: 12px; line-height: 1; }
.sys_uploadimg .icon-PLUS span + span { display: none; }
.sys_uploadimg .icon-upload span + span { display: none; }
.sys_uploadimg > div > i { display: none; }
.sys_uploadimg img { width: 62px; height: 62px; display: none; margin-right: 20px; border-radius: 5px; }
.sys_uploadimg.hasPic img { display: inline-block; }
.hasPic .icon-pic { display: none; }
.sys_uploadimg.hasPic .icon-PLUS span { display: none; }
.sys_uploadimg.hasPic .icon-PLUS span + span { display: block; }
.sys_uploadimg.hasPic .icon-upload span { display: none; }
.sys_uploadimg.hasPic .icon-upload span + span { display: block; }
.sys_uploadimg.hasPic > div > i { display: inline-block; }
.sys_uploadimg>div>b{display:inline-block;width:62px;height:62px;margin:10px 20px 10px 0;border-radius:5px;background-position:center;background-size:contain;background-repeat:no-repeat;cursor:pointer;}
.sys_uploadimg>div>b.active{outline:2px solid #2991C7;position:relative;}
.sys_uploadimg>div>b.active:after{content: "\e6a5";font-family: "icon" !important;border-bottom-left-radius:5px;font-size:12px;background-color:#2991C7;color:#fff;display:block;position:absolute;right:0;top:0;height:16px;width:16px;text-align:center;line-height:16px;}
.sys_uploadimg  .icon-PLUS:before{background-color:#333;color:#fff;border-radius:50%;}

#PhotoFrame{display:block;position:absolute;height: calc(98vh - 153px);width: 495px;right:0;background-color:#eee;z-index:10;}
.dpflex { display: flex; flex-direction: column; height: 100%; }
#uploadImgs{border:1px dashed #ccc;background-color:#fff;height:52px;font-size:14px;width:100%;box-sizing:border-box;text-align:center;position:relative;overflow:hidden;margin-bottom:10px}
#uploadImgs i{font-size:36px;vertical-align:middle;}
#uploadImgs input{opacity:0;position:absolute;z-index:99;top:-10px;left:-10px;width:120%;height:120%;cursor:pointer;}

#uploadImgs > p { width: 200px; background-color: #2991C7; border-radius: 5px; height: 40px; line-height: 40px;float:left; text-align: center; margin: 5px 20px; color: #fff;overflow:hidden;position: relative; }
#uploadImgs .icon-CLOSE{float:right;margin:-2px 15px 0 0;cursor:pointer; }

#imgs{width:100%;overflow-y:auto;overflow-x:hidden;flex: 1;}
#imgs p i{position:absolute;top:0;right:0;opacity:0;cursor:pointer;background-color:#fff;transition:all .2s;width:16px;height:16px;display:inline-block;background:url(data:image/gif;base64,R0lGODlhEAAQAKIAAOXl5XR0dLS0tM7Ozv///2ZmZm9vb/f39yH5BAAAAAAALAAAAAAQABAAAAM0eLTcrS5KJkoRsxkAzLRgCEYB0ADB5BUL60lrS7xRTLjqLdOOjcO1SemUkgwMocAgw2xGEgA7)}
#imgs p:hover i{opacity:.7}
#imgs p i:hover{box-shadow:0 0 3px rgba(0,0,0,.7);opacity:1}

#imgs p.load:after{content:''; display:block;position:absolute;z-index:2;background:rgba(255,255,255,.9) url(../images/loading.svg) no-repeat center;left:0;top:0;background-size:50%;}

#imgs p{overflow:hidden;border:1px solid #fff;position:relative;float:left;margin:0 0 10px 10px;cursor:pointer}
#imgs p.load{cursor:wait}
#imgs p:hover{box-shadow:0 0 5px rgba(0,0,0,.3)}


#imgs img,#imgs p:after{width:109px;height:109px;}
#imgs > button { width: 109px; height: 109px; border: 0 none; background-color: #fff; text-align: center; cursor: pointer; margin-left: 10px; color: #666; transition: all .3s; display: none; float: left; }
#imgs > p + button { display: block; }
#imgs > u { display: flex; text-decoration: none; font-size: 14px; font-style: italic; color: rgba(0,0,0,.5); height: 100%; justify-content: center; text-align: center; align-items: center; }
#imgs > p + button + u { display: none; }
#imgs > u>span{position:relative;cursor:pointer;user-select:none;}

/*#Personalize.active > u { content: ''; position: fixed; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.5); z-index: 10; display: block; }
#Personalize.active > b { display: none; }*/

#loading, #bg { background-color: rgba(0,0,0,.5); }


#newFont { position: relative; margin-top: 15px; }
#newFont.tabs { padding-top: 36px; }
#newFont > dt { display: none; }
#newFont.tabs > dt { position: absolute; top: 5px; width: 100px; line-height: 30px; border: 1px solid #ccc; text-align: center; background-color: #eee; cursor: pointer; user-select: none; display: block; }
#newFont > dd > div { margin: 10px 0; }
#newFont.tabs > dd { display: none; padding: 0 10px 10px; background-color: #fff; border: 1px solid #ccc; }
#newFont > dt.active { background-color: #fff; top: 0; line-height: 36px; border-bottom: 0 none; }
#newFont > dt.active + dd { display: block; }

.inputBox { display: flex; margin-top: 10px; position: relative; }

.sys_iconlist { position: absolute; background-color: #fff; float: left; top: -45px; left: -2px; white-space: nowrap; display: none; }
.sys_iconlist span { display: inline-block; width: 34px; height: 34px; font-size: 28px; line-height: 34px; border: 1px solid #ccc; border-radius: 5px; margin: 2px; font-family: icon; text-align: center; cursor: pointer; }

.inputBox.active .sys_iconlist { display: block; }


.colorDiv { height: 32px; margin-left: 10px; display: flex; position: relative; }
.colorBox { height: 22px; margin-left: 10px; display: flex; border: 1px solid #ccc; background-color: #eee; padding: 4px; cursor: pointer; }
.colorBox > span { display: inline-block; width: 25px; height: 20px; border: solid 1px #222; margin-right: 5px; }
.colorBox:after { display: inline-block; content: '\25BC'; font-size: 10px; margin-top: 3px; }
.colorBox:before { content: ''; display: none; position: absolute; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: #eee transparent transparent transparent; top: -10px; margin-left: 12px; }
.colorBox > ul { display: none; position: absolute; top: -62px; background-color: #eee; z-index: 10; padding: 6px; right: 0; border-radius: 5px;line-height:0}
.colorBox li { display: inline-block; width: 34px; height: 34px; border: 1px solid #ccc; margin: 4px; cursor: pointer; }
.colorBox li.active { border-color: #2991C7; }
.colorBox.active > ul,
.colorBox.active:before { display: block; }


.colorDiv .sp-container, .color_panel .sp-container { width: 200px; }
.colorDiv .sp-palette-container, .color_panel .sp-palette-container { margin-bottom: 0; padding-bottom: 0; border: 0; width: 180px; }
.colorDiv .sp-picker-container, .color_panel .sp-picker-container { margin-bottom: 0; padding-bottom: 0; }
.colorDiv .sp-picker-container, .color_panel .sp-picker-container { width: 178px; }
.colorDiv .sp-color, .color_panel .sp-color { right: 7%; }
.colorDiv .sp-hue, .color_panel .sp-hue { left: 96%; }

#newFont input[type=text], #newFont textarea { display: flex; flex: 1; border: 1px solid #ccc; padding: 7px 5px; font-family: icon; }

#newFont input[type=text]:focus, #newFont textarea:focus { border-color: #000; outline: 1px solid #000; }

#newFont textarea { height: 80px; }
#newFont .sp-replacer { border: 1px solid #ccc; }


.fontBox { position: relative; height: 32px; }
.fontBox span { line-height: 30px; padding-left: 10px; font-size: 20px; cursor: pointer; }
.fontBox span:after { display: inline-block; content: ''; margin-left: 5px; border-width: 7px 3px; border-style: solid; border-color: #000 transparent transparent; vertical-align: text-bottom; }
.fontBox span.active + ul { display: block; }
.fontBox ul { position: absolute; display: none; background-color: #fff; box-shadow: 0 0 7px rgba(0,0,0,.3);transform:translateY(45%);  bottom: 0; right: 0; overflow: auto; cursor: pointer; line-height: 2; text-align: center; z-index:10}
.fontBox li { padding: 0 10px; white-space: nowrap; font-size:16px;}
.fontBox li.active { color: #2991C7; }
.fontBox li:hover { background-color: #eee; }



.rect { position: absolute; }
.rect.active { position: absolute; z-index: 2; }
.rect.active > div { display: block; }
.rect.hide { display: none; }


.rect > div { position: relative; width: 100%; height: 100%; outline: dashed 2px #2991C7; cursor: move; display: none; }
.rect button { position: absolute; border: 2px solid #2991C7; display: block; width: 10px; height: 10px; cursor: pointer; }
.rect .rectBtn1 { margin: -5px 0 0 -5px; top: 0; left: 0; }
.rect .rectBtn2 { margin: -5px -5px 0 0; top: 0; right: 0; }
.rect .rectBtn3 { margin: 0 0 -5px -5px; bottom: 0; left: 0; }
.rect .rectBtn4 { margin: 0 -5px -5px 0; bottom: 0; right: 0; }
.rect .rectBtn5 { margin: 0 0 0 -8px; top: -40px; left: 50%; width: 20px; height: 20px; content: '\e771'; font-family: icon; }
.rect .rectBtn5::before { content: ''; display: inline-block; height: 16px; border-left: 2px dashed #2991C7; margin-top: 20px; }
.rect .rectBtn5:after { content: '\e771'; display: inline-block; position: absolute; margin-left: -9px; font-size: 16px; color: #2991C7; }


.sys_color { margin-right: -10px; }
.color_panel { position: relative; float: left; }
.sys_color > button { width: 44px; height: 44px; text-align: center; border-color: #000; background-color: none; box-sizing: border-box; margin: 2px 4px 2px 0; transition: all .3s; border: 0; float: left; cursor: pointer; }
.sys_color > em { width: 44px; height: 44px; float: left; margin: 2px 4px 2px 0; display: block; cursor: pointer; }

.color_panel .sp-preview, .sys_color .sp-dd { display: none; }
.color_panel > .sp-replacer:before { font-family: "icon" !important; font-size: 32px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e6b6"; color: #000; line-height: 30px; text-align: center; }

.color_panel > .sp-replacer:hover { background-color: #fff; color: #000; }
.color_panel > .sp-replacer { padding: 5px; margin: 2px 4px 0 0; }
.color_panel .sp-container { left: 0 !important; }

.artImgs { -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2;color:#fff; }
.artImgs p {color:#000}
.bgImgs p, .artImgs p { display: inline-block; margin:3px 3px 4px 4px; overflow: hidden; border: 1px solid #fff; position: relative; cursor: pointer; width:100px;text-align:center;vertical-align:top;}
.bgImgs p.load, .artImgs p.load { cursor: wait; }
.bgImgs p:hover, .artImgs p:hover { box-shadow: 0 0 5px rgba(0,0,0,.3); }
.bgImgs p:after, .artImgs p:after { width: 100%; height: 100%; display: inline-block; }
.bgImgs p.load:after, .artImgs p.load:after { content: ''; display: block; position: absolute; z-index: 2; background: rgba(255,255,255,.9) url(../images/loading.svg) no-repeat center; left: 0; top: 0; background-size: 50%; }
/*.bgImgs p:first-child { outline: 0 none !important; }*/
.bgImgs p:nth-child(4n), .artImgs p:nth-child(4n) { margin-right: 0; }
.artImgs p.more img,.artImgs p.more span{opacity:0;}
.artImgs p.more:after {content: '\e6b6';font-family:icon;font-size:38px;text-align:center; display: flex; position: absolute; z-index: 2; background-color: #fff; left: 0; top: 0;align-items: center;place-content: space-evenly;font-weight:bold;}

.bgImgs p.active, .artImgs p.active { outline: 1px solid #2991C7; }
.bgImgs p.active:after,  .artImgs p.active:after{content: '\e6a5';font-family:icon;font-size:20px;text-align:center; display: block; position: absolute; z-index: 2; background-color: #fff; right: 5px; top: 5px;width:20px;height:20px;line-height:20px;border-radius:50%;border:1px solid #2991C7;color:#2991C7;font-weight:bold;}
 .artImgs p span{ -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; word-wrap: break-word; -webkit-line-clamp: 2;font-size:12px;}
.artImgs p.more.active{outline:none}
.artImgs p.more.active span,.artImgs p.more.active img{opacity:0;}
.artImgs p.more.active:after { content: '\e6b6'; font-size: 38px; border: none; color: #000; left: 0; display: flex; right: auto; top: 0; width: 100%; height: 100%; }

#Personalize.artBox .artActive { position: fixed; background: #fff; z-index: 12; top: 163px; height: calc(98vh - 160px);  margin: 0 0 0 -15px; width: 490px;  display: flex; flex-direction: column; }
.artActive>label,#Personalize .artActive>p{display:none;}
.artActive .artImgs{-webkit-line-clamp:1000;flex:1;overflow:auto;}
.artActive .selectpick_div_box{width:90%}
.artActive .artClose{cursor:pointer;padding:10px;font-size:24px;position:absolute;right:0;font-family:icon;}
.artActive .artClose:after{display:inline-block;content:'\e6a4';}
.artActive .artImgs p.more img,.artActive .artImgs p.more span{opacity:1;}
.artActive .artImgs p.more:after {background-color:transparent;content:''}
.artActive .artImgs p.active:after{content: '\e6a5';    left: auto; background-color: #fff}
.artActive .artImgs p.more.active:after { content: '\e6a5'; font-size: 20px; border: 1px solid #2991C7; color: #2991C7; width: 20px; height: 20px; right: 5px; top: 5px; }
.artActive>.artClose+.artImgs{padding-top:5px;}



.selectpick_div > span:first-child { padding-left: 10px; }


.songBox input + button { border: 0 none; background-color: #2991C7; color: #fff; font-size: 24px; width: 32px; cursor: pointer; }
.songBox input + button.load { background: #2991C7 url(/StaticRes/udiy/images/loading3.svg) no-repeat center; background-size: 24px; }


.songBox > div > p { display: none; }
.song_list ul { display: none; }
.song_list ul:empty { display: none; }
.song_list ul:empty + p { display: none !important; }
.song_list ul + p { text-align: center; cursor: pointer; font-size: 20px; color: #2991C7; user-select: none; height: 40px; line-height: 40px; }
.song_list p.load { background: url(../images/loading.svg) no-repeat center; color: transparent; background-size: 30px; }



.song_list li { background-color: #fff; padding: 6px 10px 6px 66px; margin-top: 10px; box-shadow: rgba(0,0,0,.3) 0 0 10px; background-size: 45px; background-position: 11px 11px; background-repeat: no-repeat; border-radius: 5px; cursor: pointer; height: 54px; line-height: 2; }
.song_list h5 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; font-size: 14px; }
.song_list li p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #808080; }


.noResult { text-align: center; padding: 20px 0 0; font-size: 16px; }
.icon-Findtheorder_icon { font-size: 50px; }


#Personalize.preview #system_attrs, #Personalize.preview .preview, #Personalize.preview .title > b, #Personalize.preview #qty .btn_2 { display: none; }
#Personalize.preview #svg { float: none; margin: 0 auto; }

#Personalize .title > em { font-style: normal; float: right; cursor: pointer; user-select: none; display: none; }
#Personalize.preview .title > em, #Personalize.preview #prev, #Personalize.preview #next { display: block; }

#prev, #next { display: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22L5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%232991C7'/%3E%3C/svg%3E"); position: absolute; top: 440px; width: 47px; height: 64px; z-index: 10; cursor: pointer; -moz-background-size: 27px 44px; -webkit-background-size: 27px 44px; background-size: 27px 44px; background-position: 50%; background-repeat: no-repeat; background-color: transparent; border: 0 none; }
#prev { transform: rotate(180deg); left: 200px; }
#next { right: 200px; }

.AreaDes { font-size: 12px; color: #999; }

#Details > p:only-child { display: none; }

#like > p > a { border: 1px solid #ccc; padding: 5px 10px; float: right; transition: all .3s; }

#like > p > a:hover { color: #009fdc; }



#pro_img svg { width: 500px; height: 500px; }
#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)}

#Personalize #Type ,#Personalize #moreCase{width:320px;font-size:16px;}
#Personalize #Sortby{margin-top:10px}
#Personalize #sys_attrs #Style2 li{width:93%}

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

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



#sys_buy{width:550px;float:right;}
#mode_choose{z-index:1333}

#PhoneColor img{margin-right:10px;cursor:pointer;}
#PhoneColor img.active{outline:2px solid #2991C7}


.radioLists button { color: #000; font-size: 14px; margin: 3px 0; cursor: pointer; width: 100%; min-height: 50px; background-color: #fff; border-radius: 7px; text-align: left;border: 1px solid #ccc; padding:7px;}
.radioLists button:hover{background-color:#f8f8f8;}
.radioLists button img{width:36px;padding:7px 7px 7px 0; vertical-align: middle; }
.radioLists button.active{border-color:#2991C7;outline:2px solid #2991C7}
.radioLists button.more{display:none}


.radioLists>a{font-weight:bold;font-size:16px;}
.radioLists>a>i{transform:rotate(90deg);display:inline-block;}
.radioLists>a>span+span{display:none;}
.radioLists.active>a>span{display:none;}
.radioLists.active>a>span+span{display:inline-block;}
.radioLists.active>a>i{transform:rotate(-90deg);}
.radioLists.active button.more{display:inline-block}
.radioLists>a:hover{color:#2991C7}