@charset "utf-8";
@font-face {font-family:"Gotham-Book";src:url("font/Gotham-Book.otf");}
@font-face {font-family:"alexa";src:url("font/alexa.ttf");}
@font-face {font-family:"amanda";src:url("font/amanda.ttf");}
@font-face {font-family:"amsterdam";src:url("font/amsterdam.ttf");}
@font-face {font-family:"austin";src:url("font/austin.ttf");}
@font-face {font-family:"avante";src:url("font/avante.ttf");}
@font-face {font-family:"barcelona";src:url("font/barcelona.ttf");}
@font-face {font-family:"bayview";src:url("font/bayview.ttf");}
@font-face {font-family:"beachfront";src:url("font/beachfront.ttf");}
@font-face {font-family:"buttercup";src:url("font/buttercup.ttf");}
@font-face {font-family:"cause";src:url("font/cause.ttf");}
@font-face {font-family:"chelsea";src:url("font/chelsea.ttf");}
@font-face {font-family:"crazy";src:url("font/crazy.ttf");}
@font-face {font-family:"classictype";src:url("font/classictype.ttf");}
@font-face {font-family:"freehand";src:url("font/freehand.ttf");}
@font-face {font-family:"freespirit";src:url("font/freespirit.ttf");}
@font-face {font-family:"greenworld";src:url("font/greenworld.ttf");}
@font-face {font-family:"hamillton";src:url("font/hamillton.ttf");}
@font-face {font-family:"loveneon";src:url("font/loveneon.ttf");}
@font-face {font-family:"lovenote";src:url("font/lovenote.ttf");}
@font-face {font-family:"marquee";src:url("font/marquee.ttf");}
@font-face {font-family:"mayfair";src:url("font/mayfair.ttf");}
@font-face {font-family:"melbourne";src:url("font/melbourne.ttf");}
@font-face {font-family:"monaco";src:url("font/monaco.ttf");}
@font-face {font-family:"neonglow";src:url("font/neonglow.ttf");}
@font-face {font-family:"neonlite";src:url("font/neonlite.ttf");}
@font-face {font-family:"neonscript";src:url("font/neonscript.ttf");}
@font-face {font-family:"neontrace";src:url("font/neontrace.ttf");}
@font-face {font-family:"neotokyo";src:url("font/neotokyo.ttf");}
@font-face {font-family:"nevada";src:url("font/nevada.ttf");}
@font-face {font-family:"newcursive";src:url("font/newcursive.ttf");}
@font-face {font-family:"northshore";src:url("font/northshore.ttf");}
@font-face {font-family:"quadra";src:url("font/quadra.ttf");}
@font-face {font-family:"rocket";src:url("font/rocket.ttf");}
@font-face {font-family:"royalty";src:url("font/royalty.ttf");}
@font-face {font-family:"necplusi";src:url("font/necplusi.ttf");}
@font-face {font-family:"quadra";src:url("font/quadra.ttf");}
@font-face {font-family:"vintage";src:url("font/vintage.ttf");}
@font-face {font-family:"scifi";src:url("font/scifi.ttf");}
@font-face {font-family:"signature";src:url("font/signature.ttf");}
@font-face {font-family:"typewriter";src:url("font/typewriter.ttf");}
@font-face {font-family:"waikiki";src:url("font/waikiki.ttf");}
body{margin:0;padding:0;overflow:hidden;font-family:"Gotham-Book";color:#666;}
h1,h2,h3,ul,li,p{margin:0;padding:0;list-style:none;}
i{font-style:normal;}
input,textarea{font-family:"Gotham-Book";}
.alexa{font-family:"alexa";font-size:30px;}
.amanda{font-family:"amanda";font-size:25px;}
.amsterdam{font-family:"amsterdam";font-size:23px;}
.austin{font-family:"austin";font-size:40px;}
.avante{font-family:"avante";font-size:20px;}
.barcelona{font-family:"barcelona";font-size:25px;}
.bayview{font-family:"bayview";font-size:40px;}
.beachfront{font-family:"beachfront";font-size:20px;}
.buttercup{font-family:"buttercup";font-size:30px;}
.cause{font-family:"cause";font-size:25px;}
.chelsea{font-family:"chelsea";font-size:40px;}
.crazy{font-family:"crazy";font-size:25px;}
.necplusi{font-family:"necplusi";font-size:15px;}
.quadra{font-family:"quadra";font-size:20px;}
.vintage{font-family:"vintage";font-size:30px;}
.classictype{font-family:"classictype";font-size:20px;}
.freehand{font-family:"freehand";font-size:30px;}
.freespirit{font-family:"freespirit";font-size:18px;}
.greenworld{font-family:"greenworld";font-size:30px;}
.hamillton{font-family:"hamillton";font-size:30px;}
.loveneon{font-family:"loveneon";font-size:20px;}
.lovenote{font-family:"lovenote";font-size:30px;}
.marquee{font-family:"marquee";font-size:30px;}
.mayfair{font-family:"mayfair";font-size:30px;}
.melbourne{font-family:"melbourne";font-size:20px;}
.monaco{font-family:"monaco";font-size:25px;}
.neonglow{font-family:"neonglow";font-size:25px;}
.neonlite{font-family:"neonlite";font-size:20px;}
.neonscript{font-family:"neonscript";font-size:30px;}
.neontrace{font-family:"neontrace";font-size:18px;}
.neotokyo{font-family:"neotokyo";font-size:25px;}
.nevada{font-family:"nevada";font-size:40px;}
.newcursive{font-family:"newcursive";font-size:30px;}
.northshore{font-family:"northshore";font-size:30px;}
.rocket{font-family:"rocket";font-size:25px;}
.royalty{font-family:"royalty";font-size:25px;}
.scifi{font-family:"scifi";font-size:25px;}
.signature{font-family:"signature";font-size:30px;}
.typewriter{font-family:"typewriter";font-size:20px;}
.waikiki{font-family:"waikiki";font-size:25px;}


.container{display:flex;}
.controller{width:424px;padding:20px;height:100vh;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;box-shadow:0 0 5px rgba(0,0,0,.2);}
.controller h1{line-height:35px;margin:0 0 30px;font-size:28px;color:#333;}
.controller h2{line-height:25px;margin:0 0 10px;font-size:18px;color:#333;}
.controller .tip{display:inline-block;width:20px;height:20px;line-height:20px;margin-top:-2px;overflow:hidden;vertical-align:middle;cursor:pointer;}
.controller .styletab{height:40px;margin-bottom:30px;border:1px solid #ccc;border-radius:10px;font-size:0;overflow:hidden;}
.controller .styletab span{display:inline-block;width:50%;line-height:40px;font-size:16px;text-align:center;box-sizing:border-box;cursor:pointer;transition:all .5s;}
.controller .styletab span:nth-child(1){border-right:1px solid #ccc;}
.controller .styletab span.on,.controller .styletab span:hover{background-color:#35398e;border-color:#35398e;color:#fff;}
.controller .controbox .catebox{display:none;}
.controller .controbox .catebox.on{display:block;}
.controller .controbox .reset{margin-bottom:15px;}
.controller .controbox .reset span{display:block;line-height:34px;font-size:16px;text-align:center;box-sizing:border-box;border-radius:10px;border:1px solid #ccc;cursor:pointer;transition:all .5s;}
.controller .controbox .reset span:hover{background-color:#35398e ;border-color:#35398e;color:#fff;}
.controller .controbox .text{position:relative;padding-bottom:75px;}
.controller .controbox .text .write{margin-bottom:30px;}
.controller .controbox .text .write textarea{width:100%;height:70px;line-height:25px;font-size:16px;padding:10px;background-color:#f1f1f1;box-sizing:border-box;border:none;resize:none;border-radius:10px;}
.controller .controbox .text .write textarea.on{box-shadow:inset 0 0 5px #35398e;}
.controller .controbox .text .write .linetab{width:390px;margin-bottom:10px;font-size:0;}
.controller .controbox .text .write .linetab span{display:inline-block;width:120px;height:34px;line-height:32px;margin-right:10px;font-size:14px;;box-sizing:border-box;border:1px solid #ccc;border-radius:10px;text-align:center;cursor:pointer;}
.controller .controbox .text .write .linetab .on{background-color:#35398e;border-color:#35398e;color:#fff;}
.controller .controbox .text .write .wt2,.controller .controbox .text .write .wt3{display:none;}
.controller .controbox .text .write.two .wt2{display:block;}
.controller .controbox .text .write.three .wt2,.controller .controbox .text .write.three .wt3{display:block;}
.controller .controbox .text .font{margin-bottom:30px;}
.controller .controbox .text .font ul{width:390px;overflow:hidden;}
.controller .controbox .text .font li{float:left;width:120px;height:50px;line-height:48px;margin:0 10px 10px 0;border:1px solid #ccc;border-radius:10px;text-align:center;box-sizing:border-box;cursor:pointer;transition:all .5s;}
.controller .controbox .text .font li.on,.controller .controbox .text .font li:hover{border-color:#35398e;background-color:#35398e;color:#fff;}
.controller .controbox .text .color{margin-bottom:30px;}
.controller .controbox .text .color ul{margin-bottom:10px;overflow:hidden;}
.controller .controbox .text .color li{float:left;width:16.666%;margin:5px 0 10px;text-align:center;}
.controller .controbox .text .color li p{line-height:0;font-size:0;}
.controller .controbox .text .color li i{display:block;width:40px;height:40px;margin:0 auto;border:2px solid #f1f1f1;border-radius:10px;box-sizing:border-box;cursor:pointer;transition:all .5s;}
.controller .controbox .text .color li .warm-white{background-color:#fff2b9;}
.controller .controbox .text .color li .cold-white{background-color:#e1e3e6;}
.controller .controbox .text .color li .light-yellow{background-color:#faeb08;}
.controller .controbox .text .color li .yellow{background-color:#ffd62e;}
.controller .controbox .text .color li .orange{background-color:#ffa101;}
.controller .controbox .text .color li .dark-blue{background-color:#0002f3;}
.controller .controbox .text .color li .sky-blue{background-color:#01b7ff;}
.controller .controbox .text .color li .ice-blue{background-color:#02e0e3;}
.controller .controbox .text .color li .green{background-color:#08e94f;}
.controller .controbox .text .color li .light-pink{background-color:#ff90ff;}
.controller .controbox .text .color li .hot-pink{background-color:#fd0192;}
.controller .controbox .text .color li .red{background-color:#f4051c;}
.controller .controbox .text .color li .purple{background-color:#a301e0;}
.controller .controbox .text .color li .mcolor{background-image:linear-gradient(to right,blue,red,green);}
.controller .controbox .text .color li.on i,.controller .controbox .text .color li i:hover{border-color:#35398e;}
.controller .controbox .text .back{position:relative;min-height:30px;margin-bottom:30px;font-size:0;}
.controller .controbox .text .back span{display:inline-block;width:70px;height:34px;line-height:32px;margin-bottom:10px;margin-right:10px;font-size:14px;border:1px solid #ccc;box-sizing:border-box;text-align:center;border-radius:10px;cursor:pointer;}
.controller .controbox .text .back .on{border-color:#35398e;background-color:#35398e;color:#fff;}
.controller .controbox .text .shapes{position:relative;min-height:30px;margin-bottom:30px;font-size:0;}
.controller .controbox .text .shapes span{display:inline-block;height:34px;line-height:32px;padding:0 15px;margin-bottom:10px;margin-right:10px;font-size:14px;border:1px solid #ccc;box-sizing:border-box;text-align:center;border-radius:10px;cursor:pointer;}
.controller .controbox .text .shapes .on{border-color:#35398e;background-color:#35398e;color:#fff;}
.controller .controbox .text .ctype{position:relative;min-height:30px;margin-bottom:30px;font-size:0;}
.controller .controbox .text .ctype span{display:inline-block;height:34px;line-height:32px;padding:0 15px;margin-bottom:10px;margin-right:10px;font-size:14px;border:1px solid #ccc;box-sizing:border-box;text-align:center;border-radius:10px;cursor:pointer;}
.controller .controbox .text .ctype .on{border-color:#35398e;background-color:#35398e;color:#fff;}
.controller .controbox .text .size{margin-bottom:30px;}
.controller .controbox .text .size .r-a{font-size:0;}
.controller .controbox .text .size .r-a i{display:inline-block;width:40px;height:40px;line-height:40px;text-align:center;font-size:40px;background-color:#35398e;color:#fff;cursor:pointer;}
.controller .controbox .text .size .r-a .reduce{border-radius:10px 0 0 10px;}
.controller .controbox .text .size .r-a .add{border-radius:0 10px 10px 0;}
.controller .controbox .text .access ul{width:390px;overflow:hidden;}
.controller .controbox .text .access li{float:left;height:34px;line-height:32px;padding:0 10px;margin:0 10px 10px 0;border:1px solid #ccc;box-sizing:border-box;cursor:pointer;text-align:center;border-radius:10px;font-size:14px;}
.controller .controbox .text .access li.on{border-color:#35398e;background-color:#35398e;color:#fff;}
.controller .controbox .text .price{position:fixed;left:0;bottom:0;width:424px;height:70px;padding:10px 20px;box-shadow:0 0 5px rgba(0,0,0,.2);background-color:#f5f5f5;z-index:9;box-sizing:border-box;}
.controller .controbox .text .price h2{line-height:50px;font-size:22px;}
.controller .controbox .logo h2{margin-bottom:20px;text-align:center;}
.controller .controbox .logo li{position:relative;margin-bottom:15px;font-size:0;}
.controller .controbox .logo li svg{position:absolute;right:12px;top:12px;width:16px;height:16px;}
.controller .controbox .logo li span{display:inline-block;line-height:30px;font-size:16px;vertical-align:top;}
.controller .controbox .logo li p{line-height:40px;background-color:#35398e;color:#fff;text-align:center;font-size:16px;}
.controller .controbox .logo li label{display:inline-block;line-height:30px;font-size:14px;vertical-align:top;cursor:pointer;}
.controller .controbox .logo li input[type="text"]{width:100%;height:40px;padding:0 30px 0 10px;vertical-align:top;border:1px solid #d6d8d9;background-color:#fafafa;box-sizing:border-box;}
.controller .controbox .logo li input[type="radio"]{cursor:pointer;width:16px;height:16px;margin-top:7px;margin-left:15px;}
.controller .controbox .logo li input[type="file"]{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;opacity:0;}
.controller .controbox .logo li input[type="submit"]{width:150px;height:40px;border:none;background-color:#35398e;color:#fff;cursor:pointer;text-transform:uppercase;font-size:16px;}
.controller .controbox .logo li textarea{width:100%;height:120px;line-height:20px;padding:10px;border:1px solid #d6d8d9;background-color:#fafafa;box-sizing:border-box;resize:none;}
.controller .controbox .logo li.fn i{display:none;}
.controller .controbox .logo li.sub{text-align:center;}
.controller::-webkit-scrollbar{width:4px;background-color:#fff;}
.controller::-webkit-scrollbar-thumb{width:4px;height:4px;border-radius:2px;background-color:#aaa;}


.styleshow{position:relative;width:calc(100% - 424px);height:100vh;background-color:#2d303f;}
.styleshow .tip{position:absolute;right:-4px;top:-3px;width:20px;height:20px;line-height:20px;overflow:hidden;vertical-align:middle;cursor:pointer;}
.styleshow .switch{position:absolute;right:10px;top:10px;z-index:99;}
.styleshow .switch span{display:inline-block;width:50%;line-height:40px;text-align:center;font-size:16px;cursor:pointer;background-color:#fff;}
.styleshow .switch .on{background-color:#35398e;color:#fff;}
.styleshow .switch .btnbox{width:160px;height:40px;border-radius:10px;font-size:0;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,.2);}
.styleshow .sw-jack{position:absolute;right:180px;top:10px;z-index:99;}
.styleshow .sw-jack span{display:inline-block;width:50%;line-height:40px;text-align:center;font-size:16px;cursor:pointer;background-color:#fff;}
.styleshow .sw-jack .on{background-color:#35398e;color:#fff;}
.styleshow .sw-jack .btnbox{width:300px;height:40px;border-radius:10px;font-size:0;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,.2);}
.styleshow .main-show{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;}
.styleshow .main-show .ibox{position:relative;width:100%;height:100%;}
.styleshow .main-show .ibox .bg{width:100%;height:100%;background-image:url(../images/bg.jpg);background-size:auto 100%;background-position:center;background-repeat:no-repeat;transition:all 0.5s;}
.styleshow .main-show .ibox .ilist{position:absolute;left:10px;bottom:10px;padding:15px 0 0 15px;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,.2);background-color:#fff;z-index:999;}
.styleshow .main-show .ibox .ilist li{float:left;width:125px;height:75px;margin:0 15px 15px 0;cursor:pointer;}
.styleshow .main-show .ibox .ilist li img{width:100%;height:100%;}
.styleshow .main-show .ibox .ilist .upload{background-image:url(../images/upload.png);background-size:100% 100%;transition:all .5s;}
.styleshow .main-show .ibox .ilist .upload input{width:100%;height:100%;opacity:0;cursor:pointer;}
.styleshow .main-show .ibox .ilist .upload:hover{background-image:url(../images/upload-on.png);}

.styleshow .main-show .vbox{position:absolute;left:10px;top:10px;max-width:300px;padding:15px;box-sizing:border-box;box-shadow:0 0 10px rgba(0,0,0,.2);background-color:#fff;z-index:999;}
.styleshow .main-show .vbox li{line-height:20px;font-size:14px;}
.styleshow .main-show .vbox li strong{color:#000;}
.styleshow .main-show .vbox .id{margin-bottom:10px;}
.styleshow .main-show .vbox .btn{margin-bottom:10px;}
.styleshow .main-show .vbox .btn a{display:block;line-height:30px;text-align:center;background-color:#35398e;color:#fff;font-weight:bold;text-decoration:none;border-radius:10px;animation:colorc 2s;animation-iteration-count:infinite;cursor:pointer;}
.styleshow .main-show .vbox .wt2,.styleshow .main-show .vbox .wt3{display:none;}
.styleshow .main-show .tbox{position:absolute;left:50%;top:50%;transform:translate(-50%,-60%);font-size:0;}
.styleshow .main-show .tbox span{white-space:nowrap;color:#fff;transition:all 0.5s,font-size 0s;z-index:2;}
.styleshow .main-show .tbox .zt{position:absolute;left:0;top:0;z-index:1;}
.styleshow .main-show .tbox .bct{transition:all 0s;}
.styleshow .main-show .tbox .bct{text-shadow:none !important;}
.styleshow .main-show .tbox .black .bct{text-shadow:#000 0px 0px 12px,#000 0px 0px 12px,#000 0px 0px 12px,#000 0px 0px 12px,#000 0px 0px 12px,#000 0px 0px 12px,#000 0px 0px 12px,#000 0px 0px 12px,#000 0px 0px 12px,#000 0px 0px 12px,#000 0px 0px 12px,#000 0px 0px 12px,#000 0px 0px 12px !important;}
.styleshow .main-show .tbox .white .bct{text-shadow:#fff 0px 0px 12px,#fff 0px 0px 12px,#fff 0px 0px 12px,#fff 0px 0px 12px,#fff 0px 0px 12px,#fff 0px 0px 12px,#fff 0px 0px 12px,#fff 0px 0px 12px,#fff 0px 0px 12px,#fff 0px 0px 12px,#fff 0px 0px 12px,#fff 0px 0px 12px,#fff 0px 0px 12px !important;}
.styleshow .main-show .tbox .rec,.styleshow .main-show .tbox .inv{border:1px solid #999;border-radius:10px;}
.styleshow .main-show .tbox .multi .zt{color:#fff !important;}
.styleshow .main-show .tbox .twid{position:absolute;left:0;top:calc(100% + 2vw);width:100%;padding-top:5px;border-top:1px solid #c9be8f;color:#c9be8f;text-align:center;font-size:12px;word-wrap:nowrap;}
.styleshow .main-show .tbox .twid:before{content:"";position:absolute;left:0;top:-6px;width:1px;height:11px;background-color:#c9be8f;}
.styleshow .main-show .tbox .twid:after{content:"";position:absolute;right:0;top:-6px;width:1px;height:11px;background-color:#c9be8f;}
.styleshow .main-show .tbox .twid p{display:inline;color:#c9be8f;}
.styleshow .main-show .tbox .thei{position:absolute;left:-2vw;bottom:0;width:0;height:100%;line-height:15px;box-sizing:border-box;font-size:12px;;border-right:1px solid #c9be8f;}
.styleshow .main-show .tbox .thei p{color:#c9be8f;}
.styleshow .main-show .tbox .thei .pos{position:absolute;right:0;top:50%;width:80px;padding-right:10px;text-align:right;transform:translateY(-50%);}
.styleshow .main-show .tbox .thei:before{content:"";position:absolute;right:-6px;top:0;width:11px;height:1px;background-color:#c9be8f;}
.styleshow .main-show .tbox .thei:after{content:"";position:absolute;right:-6px;bottom:0;width:11px;height:1px;background-color:#c9be8f;}
.styleshow .main-show .tbox .txt{position:relative;display:block;float:left;clear:both;cursor:move;}
.styleshow .main-show .tbox .wt1,.styleshow .main-show .tbox .wt2{margin-bottom:3.6vw;}
.styleshow .main-show .tbox .wt2{display:none;}
.styleshow .main-show .tbox .wt3{display:none;}
.styleshow .main-show .tbox.two .wt2{display:block;}
.styleshow .main-show .tbox.three .wt2,.styleshow .main-show .tbox.three .wt3{display:block;}

.flow-data{display:none;}
.flow-box{display:none;position:fixed;left:50%;top:50%;width:500px;height:500px;margin:-250px 0 0 -250px;background-color:#fff;box-shadow:0 0 30px rgba(0,0,0,.3);z-index:99;}
.flow-box h2{height:40px;line-height:40px;padding:0 20px;font-size:16px;font-weight:bold;background-color:#35398e;color:#fff;}
.flow-box .close{position:absolute;right:10px;top:10px;width:20px;height:20px;cursor:pointer;z-index:2;}
.flow-box .text{height:460px;padding:1px 20px 20px;box-sizing:border-box;overflow-y:auto;}
.flow-box .text h3{line-height:25px;margin:20px 0 5px;font-size:18px;color:#000;}
.flow-box .text p{line-height:20px;margin-bottom:5px;font-size:14px;color:#000;}
.flow-box .text span{font-size:14px;}
.flow-box .text img{max-width:100% !important;height:auto !important;}
.flow-box .text .center{margin-top:25px;text-align:center;}
.flow-box .text::-webkit-scrollbar{width:4px;background-color:#fff;}
.flow-box .text::-webkit-scrollbar-thumb{width:4px;height:4px;border-radius:2px;background-color:#aaa;}
.flow-box.on{display:block;}

.flow-enter{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);z-index:999999;}
.flow-enter .box{position:absolute;left:50%;top:50%;width:420px;padding:20px 20px 5px;margin:-145px 0 0 -210px;box-sizing:border-box;text-align:center;background-color:#fff;}
.flow-enter .box h2{line-height:25px;margin:0 0 20px;font-size:18px;color:#333;}
.flow-enter .box i{position:absolute;right:-40px;top:0;width:40px;height:40px;cursor:pointer;}
.flow-enter .box i:before{content:"";position:absolute;left:50%;top:50%;width:24px;height:2px;margin:-1px 0 0 -12px;background-color:#fff;transform:rotate(-45deg);transform-origin:center;}
.flow-enter .box i:after{content:"";position:absolute;left:50%;top:50%;width:24px;height:2px;margin:-1px 0 0 -12px;background-color:#fff;transform:rotate(45deg);transform-origin:center;}
.flow-enter .box li{position:relative;margin-bottom:15px;font-size:0;}
.flow-enter .box li svg{position:absolute;right:12px;top:12px;width:16px;height:16px;}
.flow-enter .box li span{display:inline-block;width:150px;line-height:40px;background-color:#35398e;color:#fff;cursor:pointer;text-transform:uppercase;font-size:16px;}
.flow-enter .box li label{display:inline-block;line-height:30px;font-size:14px;vertical-align:top;cursor:pointer;}
.flow-enter .box li input[type="text"]{width:100%;height:40px;padding:0 30px 0 10px;vertical-align:top;border:1px solid #d6d8d9;background-color:#fafafa;box-sizing:border-box;}
.flow-enter.on{display:block;}


.loading{position:fixed;left:50%;top:50%;width:100px;height:100px;margin:-50px 0 0 -50px;padding:20px 0 0;border-radius:5px;box-sizing:border-box;text-align:center;background-color:rgba(0,0,0,.7);opacity:0;z-index:-1;transition:all .5s;}
.loading p{line-height:20px;margin-top:10px;font-size:12px;color:#fff;}
.loading.on{opacity:1;z-index:9999;}
@media only screen and (max-width:1550px){
.styleshow .main-show .ibox .ilist{padding:10px 0 0 10px;}
.styleshow .main-show .ibox .ilist li{margin:0 10px 10px 0;}
}
@media only screen and (max-width:1260px){
body{overflow-y:auto;}
.container{display:block;padding-top:59vw;}
.controller{position:static;width:100%;height:auto;overflow:visible;}
.controller .controbox .text{padding-bottom:0;}
.controller .controbox .text .font ul{width:100%;}
.controller .controbox .text .color li{width:10%;}
.controller .controbox .text .access ul{width:100%;}
.controller .controbox .text .finish{position:static;width:100%;background:none;box-shadow:none;padding:20px 0 10px;}

.styleshow{position:absolute;left:0;top:0;width:100%;height:59vw;}
.styleshow .main-show .ibox .ilist{}
}
@media only screen and (max-width:850px){
.container{padding-top:calc(59vw + 95px);}
.styleshow .main-show .ibox .ilist{display:none;bottom:-95px;left:0;width:100%;padding:10px 10px 0;box-sizing:border-box;box-shadow:none;overflow-x:auto;}
.styleshow .main-show .ibox .ilist ul{width:810px;}
}
@media only screen and (max-width:640px){
.container{width:100%;position:relative;padding-top:0;overflow:hidden;}
.controller{padding:10px 10px 80px;}
.controller h1{line-height:25px;margin-bottom:10px;font-size:20px;}
.controller h2{line-height:20px;font-size:16px;}
.controller .tip{display:none;}
.controller .controbox .text{margin-top:calc(50vh + 40px);}
.controller .controbox .text .write{margin-bottom:15px;}
.controller .controbox .text .write .linetab{display:none;width:102%;}
.controller .controbox .text .write .linetab span{height:30px;line-height:28px;width:31.372%;margin-right:1.961%;}
.controller .controbox .text .size{margin-bottom:15px;}
.controller .controbox .text .size .r-a i{height:30px;line-height:30px;font-size:30px;}
.controller .controbox .text .font{margin-bottom:15px;}
.controller .controbox .text .font ul{width:2000%;}
.controller .controbox .text .font li{width:110px;height:35px;line-height:33px;margin:0 5px 0 0;}
.controller .controbox .text .back{margin-bottom:15px;}
.controller .controbox .text .shapes{margin-bottom:15px;}
.controller .controbox .text .access ul{width:102%;}
.controller .controbox .text .color{margin-bottom:15px;}
.controller .controbox .text .color ul{width:1000%;}
.controller .controbox .text .color li{width:40px;margin:0 10px 0 0;}
.controller .controbox .text .price{width:100%;height:90px;}
.controller .controbox .text .price h2{line-height:30px;font-size:18px}
.controller .controbox .ovbox{overflow-x:auto;}
.styleshow{position:absolute;top:70px;height:50vh;padding-top:50px;box-sizing:border-box;}
.styleshow .tip{display:none;}
.styleshow .main-show .vbox{position:fixed;top:initial;left:initial;left:15px;bottom:10px;padding:0;background:none;z-index:9999;}
.styleshow .main-show .vbox li{display:none;}
.styleshow .main-show .vbox .btn{display:block;margin-bottom:0;}
.styleshow .main-show .vbox .btn a{padding:0 10px;}
.styleshow .main-show .ibox .ilist{position:static;}
.styleshow .main-show .ibox .ilist ul{width:102%;}
.styleshow .main-show .ibox .ilist li{width:23.039%;height:auto;margin:0 1.961% 1.961% 0;}
.styleshow .main-show .ibox .ilist .upload{height:0;padding-bottom:14.829%;}
.styleshow .switch{height:30px;}
.styleshow .switch span{line-height:30px;font-size:12px;}
.styleshow .switch .btnbox{width:100px;height:30px;}
.styleshow .sw-jack{right:120px;}
.styleshow .sw-jack span{line-height:30px;font-size:12px;}
.styleshow .sw-jack .btnbox{width:240px;height:30px;}
.styleshow.hide{display:none;}
.flow-enter .box{width:90%;margin-left:-45%;}
}

@keyframes colorc{
0% {color:#fff;}
50% {color:#35398e;}
100% {color:#fff;}
}