@font-face{font-family:'a';src:url(../font/a.ttf)}
@font-face{font-family:'b';src:url(../font/b.ttf)}
*{dborder:solid 1px #111;padding:0;margin:0;font-weight:bold;-webkit-touch-callout:none}
*:not(input):not(textarea){-webkit-user-select:none}
*,::-webkit-input-placeholder{color:#000}
::-webkit-color-swatch{border:0}
body{font-family:'b';text-align:center;background:no-repeat;background-size:cover}
img{pointer-events:none}
hr{height:1px;border:0}
li,ul{overflow:hidden;list-style:none;white-space:nowrap}
input,textarea{width:95%;height:auto;font-family:'b';border-radius:5px;outline:none}
input,#logod,.btn,.bbox{background:rgba(255,255,255,.3);border:solid 1px rgba(100,100,100,.5)}
input:not(#submit):not(#input):hover,#logod:hover,.btn:active{color:#fff;background:rgba(0,0,0,.4);border:solid 1px rgba(255,255,255,.5)}
input[s]{width:36px}
input[m]{width:98%}
input[p]{width:calc(98% - 2.5em)}
.lgo{margin:auto;top:calc(30% - 64px);right:0;left:0;height:-webkit-fit-content;width:-webkit-fit-content;font-weight:normal}
.lgo:not(p){-webkit-animation:danru1 1s}
#bar{-webkit-animation:flipInX 1.2s;border-radius:18px;font-size:16px;top:30%;left:0;right:0;width:75%;max-width:360px;margin:auto;z-index:10}
#bar div,#bar{height:36px}
#bar div,.set,.btn{float:right}
#bar span{display:block;overflow:hidden;vertical-align:bottom;padding-left:12px}
#bar input{margin:0;border:0;background:0 0;height:36px}
#submit{width:auto;float:right;font-size:18px;padding:0 13px}
#submit,o{text-shadow:1px 1px 3px #333}
#submit:active,o:active{text-shadow:0 0 3px #333}
#suglist{left:-6px;right:-6px;bottom:40px}
#engine{top:27%;left:25%;width:50%;z-index:12}
#suglist li,#engine li{height:auto;margin:3px;padding:0.3em 0.3em 0.1em;border-radius:3px}
#suglist li{text-align:left;border-radius:5px}
#suglist li:active,hr{color:#fff;background:rgba(0,0,0,.4)}
#suglist b{position:absolute;right:0;color:#444}
#suglist b:before{content:'╋';margin:0 16px}
#close{-webkit-animation:shensuo .5s;width:16px;height:16px;margin:10px 8px 0;border-radius:8px}
#clear{-webkit-animation:zhuandong .5s;-webkit-transform:rotate(45deg);width:2px;height:16px;margin:10px 15px 0}
#clear:before{content:'';width:16px;height:2px;left:-7px;top:7px}
#close,#clear,#clear:before{background:#333;box-shadow:0 0 3px #444}
#bookmark,#menu{width:300px;height:auto;top:calc(30% + 20px);left:0;right:0;margin:auto;overflow:hidden;z-index:50;border-radius:5px}
#bookmark,#menu,#bar,#suglist li,#engine li{background:rgba(255,255,255,.3);box-shadow:0 0 2px #888}
#menu{top:calc(30% - 12px);width:-webkit-fit-content}
#menu p{margin:3px 1px;text-align:left;height:1.2em}
#menu input,.set,.btn{position:relative}
#menu input{top:-0.1em}
#menu input[type=color]{height:1em}
#menus{margin:8px 5px;overflow:auto;height:50vh;max-height:270px}
#menuo{bottom:0}
#show{float:left;width:25%}
#mark{float:right;width:75%}
#mark input{float:left;margin:8px auto 0}

#engine,#close,#clear,#bookmark,.mark,#menu,.sc{display:none}
#lgo,#bar,#suglist,#engine,#clear:before,#bookmark,#menu,#book,.sx,.sc{position:absolute}

.bbox{border-radius:5px;width:60px;margin:8px auto;padding:3px;overflow:hidden}
.bicon{width:50px;height:50px;margin:3px auto -3px}
.set{right:0.2em}
.btn{width:auto;height:0.9em;padding:0.1em;margin:8px;border-radius:5px}
#book{top:calc(30% + 48px);left:0;right:0;width:90%;max-width:480px;max-height:36%;margin:auto;overflow:auto}
#book li,.about{float:left}
.sc{-webkit-animation:shensuo .5s;z-index:3;width:20px;height:20px;background:url(../img/sc.png);background-size:cover}
#book,.sx,.mark{-webkit-animation:danru 1s}
.tj,.bq{margin:0 auto 0.1em;background-size:cover}
.sx{background:url(../img/WQY916.png);left:75%;top:75%;width:54px;height:40px;z-index:9}


@-webkit-keyframes flipInX{
0%{opacity:0;-webkit-transform:rotateX(120deg)}
100%{opacity:1;-webkit-transform:rotateX(0)}}
@-webkit-keyframes back{
0%{opacity:0;-webkit-transform:scale(0)}
100%{opacity:1;-webkit-transform:scale(1)}}
@-webkit-keyframes shensuo{
0%{opacity:0;-webkit-transform:scale(0)}
100%{opacity:1;-webkit-transform:scale(1)}}
@-webkit-keyframes shensuo1{
0%{opacity:1;-webkit-transform:scale(1)}
100%{opacity:0;-webkit-transform:scale(0)}}
@-webkit-keyframes zhuandong{
0%{-webkit-transform:rotate(0) scale(0.5)}
100%{-webkit-transform:rotate(225deg) scale(1)}}
@-webkit-keyframes danru{
0%{opacity:0;-webkit-transform:translate(0,-32px)}
100%{opacity:1;-webkit-transform:translate(0,0)}}
@-webkit-keyframes danru1{
0%{opacity:0;-webkit-transform:translate(0,32px)}
100%{opacity:1;-webkit-transform:translate(0,0)}}