html,body,div,ul,li,ol,h1,h2,h3,h4,h5,h6,input,textarea,select,p,dl,dt,dd,a,img,button,form,table,th,tr,td,tbody,header,nav,menu,main,article,aside,footer{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}
header,nav,menu,main,article,aside,footer{display:block}
input[type="submit"],input[type="reset"],input[type="button"],input{resize:none}
img{width:auto\9;display:block;-ms-interpolation-mode:bicubic;border:none}
em,i{font-style:normal}
ul,li{list-style-type:none}
strong{}
html{font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling :touch;background:#fff}
body{font:14px/1.85 tahoma,Geneva,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;color:#33313e}
a{text-decoration:none;color:#33313e}
a:hover{text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{font-size:100%}
input,button,textarea{font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;border:none;outline:none;background-color:rgba(0,0,0,0)}
a:link,a:active,a:visited,a:hover{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}
.clear,main:after,.sort ul:after{content:'';display:block;width:100%;visibility:hidden;height:0;clear:both}

.container{position:relative;width:970px;margin:0 auto;background:#fff}
header{height:76px;line-height:76px;border-bottom:1px solid #f3f3f3;background:#fff;margin-bottom:16px}
header .logo{float:left;height:62px;width:116px;overflow:hidden}
header .logo a{display:block}
header .logo img{width:108px;height:auto;margin:20px 0}

.nav_btn{position:relative;float:left;padding:0 26px;margin-left:23px;font-size:14px;cursor:pointer}
.nav_btn:before{content:"";position:absolute;height:15px;width:1px;background-color:#afafb1;left:0;top:31px}
.language{float:right}
.language li{display:inline-block;position:relative;font-size:12px;padding:0 12px 0 15px}
.language li:before{content:"";position:absolute;height:11px;width:1px;background-color:#aeafb1;left:0;top:33px}
.language li:first-child:before{width:0}
.language a{color:#888;cursor:pointer}
.language a.lang-on{color:#06f;font-weight:700}

.nav{position:absolute;top:61px;left:139px;z-index:999;display:none;width:360px;border-bottom:3px double #06f;border-top:1px solid #eceef1;border-radius:0 0 5px 5px;background:#fff;box-shadow:0 1px 3px rgba(22,22,22,0.1);filter:drop-shadow(0 5px 5px rgba(22,22,22,0.05));-webkit-filter:drop-shadow(0 5px 5px rgb(22,22,22,.1));color:#2e2d31}
.nav:after,.nav:before{position:absolute;top:-7px;left:58px;content:"";display:inline-block;border:7px solid transparent;border-top:none}
.nav:after{top:-7px;border-bottom:7px solid #03f}
.nav ul{height:290px;padding:23px;line-height:40px}
.nav li{float:left;display:inline-block;padding:3px;width:33.33%;box-sizing:border-box;text-align:center;transition:all .9s;cursor:pointer}
.nav li a{display:block;background:#f8fafb;border:1px solid #f2f3f5}
.nav li a:hover{border:1px solid #06f}

main{width:968px;margin:0 auto;height: 78vh !important;}

.head{text-align:center;padding:32px 0 30px}
.head h1,.head h2{font-size:36px}
.sort ul{margin:0 -6px}
.sort li{float:left;display:block;width:20%;text-align:center;line-height:56px;padding:6px;box-sizing:border-box}
.sort li a{display:block;border:1px solid #eff0f3;padding:36px 0 15px;border-radius:4px}
.sort li i{display:block;background:#06f;width:66px;height:66px;margin:auto;font-size:40px;line-height:66px;color:#fff;border-radius:4px}

.popular{width:696px;margin:0 auto;padding:40px 0 0}
.popular p{display:inline-block;text-align:center;width:33.33%;line-height:20px;padding:10px 0}

.recents{width:696px;margin:18px auto 26px}
.recents h3{position:relative;line-height:60px;text-align:center}
.recents h3::before,.recents h3::after{content:"";position:absolute;top:50%;width:180px;height:1px;background-color:#dfe3e6}
.recents h3::after{right:60px}
.recents h3::before{left:60px}
.recents li{float:left;width:33.33%;line-height:20px;padding:10px 0;text-align:center}

.current{position:relative;padding:25px 0;font-size:12px;color:#c9cacc}
.current a{padding:0 6px;color:#05f}
.current span{color:#05f}
.current h1,.current h2{display:inline-block;font-weight:400}

aside{float:right;width:300px;padding:0}
.side{margin:20px 0 0;padding:18px 0 8px;border:1px solid #f1f2f3;background:#fff}
.side div{text-align:center;font-size:17px;font-weight:700}
.side-ul{padding:18px 16px 18px;font-size:14px}
.side-ul li{padding:12px 8px;border-top:1px solid #f5f5f5;line-height:22px}

.unit-disabled{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.unit-box{position:relative}.unit-box select{display:none}.unit-box{height:100%;overflow:hidden;position:relative;cursor:pointer;padding:0 18px}.unit-box input{font-size:14px}.unit-box .unit-ipt{width:100%;height:44px;line-height:46px;border:0;background-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 16px 0 0;box-sizing:border-box;cursor:pointer}.unit-list{display:none;width:100%;max-height:300px;background-color:#fff;font-size:14px;position:absolute;top:57px;left:0px;z-index:99;overflow:auto;box-shadow:rgba(0,0,0,0.16) 0px 6px 12px}.unit-list li.unit-null a{color:#d2d2d2}.unit-list li a{display:block;padding:0 15px;line-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:all 0.2s}.unit-list li:hover{background-color:#ff0}.unit-list li:hover a{padding:0 12px}.unit-list li.unit-selected{background-color:#6600ff}.unit-list li.unit-selected a{display:block;color:#fff}.unit-list li.unit-disabled{background-color:#fff}.unit-list li.unit-disabled a{display:block;color:#d2d2d2}.unit-list li.unit-disabled:hover a{cursor:not-allowed!important;background-color:#fff}.icon{position:absolute}.icon-unit-arrow{width:8px;height:6px;background-repeat:no-repeat;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAMAAABcOc2zAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAA/UExURQAAAJmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZUyYtcAAAAUdFJOUwD0o+wQ4xghVLR2w/NEkZIDAmRl9PSmVQAAAExJREFUCNdVyEcCgDAMA0Gld6r//1ZKAo73pBEqiSqyPDK2MrvsQFBsFXB38nHgLX1O3fCm2/hxIPYj4k8/1mxYR+TsdKARNYjWZYwLMP0H+q7qdO0AAAAASUVORK5CYII=');background-size:100%;right:19px;top:25px;transition:all .2s}.icon-unit-arrow.unit-show{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.unit-list::-webkit-scrollbar{width:4px;height:4px}.unit-list::-webkit-scrollbar-track{background:#fff}.unit-list::-webkit-scrollbar-thumb{background:#cbcbcb}

.convert{float:left;width:620px}
.converter{height:58px;line-height:56px;display:flex;padding:0 0 26px}
.converter .nums,.converter .unit-opt{border:1px solid #c1c8d4;box-shadow:0 1px 3px 0 rgba(214,217,224,0.35)}
.converter .nums{width:21%;padding:0 19px;border-radius:3px 0 0 3px}
.converter .nums:focus{border:1px solid #8a88e2;box-shadow:0 1px 3px 0 rgba(109,111,160,0.3)}
.converter .unit-opt{width:61%;display:flex;border-width:1px 0}
.converter .unit-opt.focus{border:1px solid #8a88e2}
.converter .unit-text{position:relative;width:44%;box-sizing:border-box}
.converter span{display:block;text-align:center;font-weight:700;cursor:pointer}
.converter .exchange{width:12%;border:solid #dfe2e6;border-width:0 1px;font-size:14px}
.converter .buts{width:18%;background:#06f;color:#fff;transition:all 0.3s;border-radius:0 3px 3px 0}
.converter .buts:hover{background:#03e}
.converter .buts2{width:18%;background:#06f;color:#fff;transition:all 0.3s;border-radius:0 3px 3px 0}
.converter .buts2:hover{background:#03e}

.unit-convert{position:relative;padding:35px 43px;border-radius:16px;box-shadow:0 1px 6px rgba(38,38,76,.16);width:696px;margin:0 auto}
.unit-convert .nums,.unit-convert .unit-opt,.unit-convert .buts{border-radius:3px}
.unit-convert .nums,.unit-convert .unit-opt,.unit-convert .buts2{border-radius:3px}
.unit-convert .unit-opt{margin:0 10px;border-width:1px}

.result-unit{text-align:center;border:1px solid #efe4ce;background-color:#fffeec;padding:15px 20px 29px;margin:16px 0 16px}
.result-unit h3{font-weight:300;text-align:left}
.result-unit .box{font-size:28px;padding:23px 0 18px;color:#000}
.result-unit .box i{font-style:normal;color:#f00}
.result-info{padding:25px 0 30px;font-weight:300}

.more-units h3{font-size:16px;margin-bottom:10px}
.more-units li{padding:5px 16px;background:no-repeat -7px center/22px 22px;background-image:url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNDYxLjAyNCA2NjUuODU2Yy0xNy42OTYgMTQuMDgtNDUuMDI0IDIuNC00NS4wMjQtMTkuMnYtMjY5LjMxMmMwLTIxLjYgMjcuMzI4LTMzLjI4IDQ1LjAyNC0xOS4ybDE2OS40NCAxMzQuNjU2YTI0LjA5NiAyNC4wOTYgMCAwIDEgMCAzOC40bC0xNjkuNDQgMTM0LjY1NnoiIGZpbGw9IiM4YzhlOTMiPjwvcGF0aD48L3N2Zz4=')}

.tab{width:100%;margin:20px 0;border-style:hidden;border-spacing:0}
.tab td{line-height:360%;text-align:center}
.tab tbody tr:nth-of-type(even){background-color:#f8f9fb}
.tab thead{line-height:300%;background-color:#edeff7}

.recent{border:1px solid #f3f3f3;padding:15px 23px;margin-top:20px}
.recent h3{font-size:18px;margin-bottom:6px}
.recent li{padding:6px 0}

footer{margin:30px 0 0;padding:28px 0;line-height:30px;color:#5e5e63;text-align:center;background:#13131b;font-size:12px}
footer a{margin:0 10px;color:#616167}
#tip{position:fixed;top:36%;left:50%;background:#000;padding:0 58px;line-height:66px;color:#fff;margin-left:-100px;border-radius:5px;font-size:16px}
.ad{min-height: 280px;}
aside .ad{min-height:600px;}
@media(max-width:760px){
    header{position:relative;height:auto;padding:0 0 15px}
    header .logo{margin:0 auto;float:none}
    .container{width:100%;box-sizing:border-box}
    .nav_icon{position:absolute;left:28px;top:25px;width:32px}
    .nav_icon i{display:block;width:100%;height:1px;margin:0 0 11px;background:#555}
    .language_btn{position:absolute;right:28px;top:22px;height:30px;width:36px;line-height:30px;text-align:center;border:1px solid #ddd;font-weight:300}
    .language_btn.show{background:#06f;border-color:#06f;color:#fff}
    .language-list{display:none;position:absolute;top:54px;right:28px;width:80px;background:#333;color:#06f;line-height:50px;padding:10px 0 16px;border-radius:2px 0 2px 2px}
    .language-list li{display:block;text-align:center;padding:0}
    .language-list li:before{display:none}
    .language-list li a{display:block;color:#fff}
    .nav{top:0;left:0;width:100%;position:relative;margin-top:15px;box-shadow:none;clear:both;-webkit-filter:none;filter:none;border-bottom:none}
    .nav ul{height:auto;padding:26px 23px 16px}
    .nav ul:after{content:'';display:block;width:100%;visibility:hidden;height:0;clear:both}
    .nav:after,.nav:before{left:30px;display:none}
    .nav_icon.show i{position:absolute;width:36px;left:-2px;top:12px;z-index:999}
    .nav_icon.show i.l1{-webkit-animation:fadeRotateRight .2s ease both;animation:fadeRotateRight .2s ease both}
    .nav_icon.show i.l2{display:none}
    .nav_icon.show i.l3{-webkit-animation:fadeRotateLeft .2s ease both;animation:fadeRotateLeft .2s ease both}


main{width:100%;padding:0 30px;box-sizing:border-box}
.head h1,.head h2{font-size:30px}
.head p{display:none}
.sort li{width:50%}
.convert{float:none;width:100%}
.converter{height:auto;display:block}
.converter .nums,.converter .unit-opt{height:58px;line-height:56px;border-radius:3px}
.converter .nums{width:100%;box-sizing:border-box;padding:0 19px}
.converter .unit-opt{width:100%;box-sizing:border-box;margin:15px 0;border-width:1px}
.converter .buts{width:100%;border-radius:3px}
.converter .buts2{width:100%;border-radius:3px}

.unit-convert{padding:0;border-radius:0;box-shadow:none;width:100%}

.popular{width:100%}
.popular p{display:block;width:100%}

.recents{width:100%;padding:0;box-sizing:border-box}
.recents h3::before{left:0;width:23%}
.recents h3::after{right:0;width:23%}
.recents li{float:left;width:100%}
aside{float:none;width:100%}
.ad{min-height:300px;}
aside .ad{min-height:300px;}
}

@keyframes fadeRotateRight{0%{transform:rotate(0)} 100%{transform:rotate(45deg)}}
@-webkit-keyframes fadeRotateRight{0%{-webkit-transform:rotate(0)} 100%{-webkit-transform:rotate(45deg)}}
@keyframes fadeRotateLeft{0%{transform:rotate(0)} 100%{transform:rotate(-45deg)}}
@-webkit-keyframes fadeRotateLeft{0%{-webkit-transform:rotate(0)} 100%{-webkit-transform:rotate(-45deg)}}

@keyframes tipSwitch{0%{opacity:0.1;filter:alpha(opacity=10);transform:scale(0.1)} 100%{opacity:1;
filter:alpha(opacity=100);transform:scale(1)}}
@-webkit-keyframes tipSwitch{0%{opacity:0.1;filter:alpha(opacity=10);transform:scale(0.1)} 100%{opacity:1;filter:alpha(opacity=100);transform:scale(1)}}

.ads-cft{min-height:250px;display:flex;justify-content:center;text-align:center}
.ads-cft .l,.ads-cft .r{width:50%}
@media(max-width:760px){
.ads-cft{min-height:250px;display:block}
.ads-cft .l{width:100%}
.ads-cft .r{display:none}
}
.page {padding:8px 0 30px;}
.page p{padding:8px 0;}
.page h3{font-size:20px;padding:8px 0;}
.page h1{font-size:26px;padding:8px 0;}
.page a{color:#03f}