html, body, div, header, section, footer, ul, li, h1, h2, h3, h4, p, b, label, input, button, select, textarea{display:block;margin:0;padding:0;box-sizing:border-box}
input,select,button{resize:none;outline:0;transition:all .2s;}
img{display:block;width:auto\9;-ms-interpolation-mode:bicubic;border:0}
button{cursor:pointer;-webkit-tap-highlight-color: transparent;transition: all .2s;}
textarea{display:block;width:100%;outline: none;resize: vertical;}
select{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;appearance: none;cursor: pointer;}
select::-ms-expand { display: none; }
select{border: none;outline: none;background: transparent url('data:image/svg+xml;base64,77u/PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZmlsbD0iIzc1NzY3OSIgZD0iTTIsNkwxMi4wMTYsMTYuMDE2LDIyLDZsMiwyTDEyLDIwLDAsOFoiLz4KPC9zdmc+Cg==') no-repeat right 1.6rem center;background-size: .8em;}
option:disabled{color:rgb(62, 121, 226);cursor: no-drop;background:#f6faff}
ul,li{list-style-type:none}
h2{font-size:1.7rem;font-weight:600;}
a{color: #16b;text-decoration:none;transition: all .2s;}
.left{float:left}
.right{float:right;}
html{background: #fff;font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling:touch;}
body{color: #4b4d58;}
body, input, select, button,textarea{font: 400 1.6rem/1.8em "Microsoft JhengHei","Microsoft YaHei",Helvetica,Arial,sans-serif;background:transparent;border:0}

.container{width:1200px;margin:0 auto;}
.container:after,.clear:after{content:'';display:block;width:100%;height:0;clear:both;visibility:hidden}
.main{width:860px;float:left;}
.side{width:300px;float:right;}

header{height: 5.2rem;margin-bottom: 2rem;line-height: 5rem;background: #36383e;}
header .container{position:relative}
header .brand{display: block;float:left;}
header .brand svg{width: 3.2rem;height: 3.2rem;float: left;margin: .8rem 1rem 0 0;fill: #fff;}
header h1{float:left;font-size: 1.7rem;font-weight:400;color: #f6f6f6;}

.nav-toggle{display: block;float:right;width: 4.4rem;height: 5.2rem;padding: 1.7rem 1rem;}
.nav-toggle:before,.nav-toggle:after{content:' ';-webkit-transition:-webkit-transform .1s .5s;-moz-transition:-moz-transform .2s .5s;transition:transform .5s}
.nav-toggle span,.nav-toggle:before,.nav-toggle:after{display:block;width: 2.4rem;height:.1rem;overflow:hidden;margin-bottom: .7rem;background:#fff;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.nav-toggle.open:before{display:none}
.nav-toggle.open span,.nav-toggle.open:after{position:absolute;width: 2.6rem;right: .8rem;top: 2.6rem;z-index:999;}
.nav-toggle.open span{-webkit-animation:rotateR .2s ease both;animation:rotateR .2s ease both}
.nav-toggle.open:after{-webkit-animation:rotateL .2s ease both;animation:rotateL .2s ease both}
@keyframes rotateR{0%{transform:rotate(0)}100%{transform:rotate(45deg)}}
@-webkit-keyframes rotateR{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(45deg)}}
@keyframes rotateL{0%{transform:rotate(0)}100%{transform:rotate(-45deg)}}
@-webkit-keyframes rotateL{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(-45deg)}}

.navbar-menu{position: absolute;right: 0;top: 5.2rem;display:none;background: #414348;line-height:4rem;padding:1rem 0 1.4rem;text-align:center;border-radius:0 0 .4rem .4rem;z-index: 99999999;}
.navbar-menu a{display:block;padding:0 3rem;color: #c2c4cc;white-space: nowrap;}
.navbar-menu a:hover{color: #fff;background:#3d78fd}

@media(max-width:760px){
html{background:#F6F6F9;}
.m-hide{display:none;}
.container{width:100%;margin:none;padding:0 1rem;}
.main,.side{float:none;width:100%;}
header{height:7rem;padding: 0 .6rem;line-height: 6.8rem;background:#fff;}
header .brand svg{fill: #363738;margin: 1.6rem 1rem 0 0;}
header h1{color: #3a3a3c;}
.nav-toggle{height: 7rem;width: 4rem;padding: 2.6rem 1rem;}
.nav-toggle span,.nav-toggle:before,.nav-toggle:after{height:.2rem;width: 2rem;margin-bottom: .5rem;background:#353535;}
.nav-toggle.open span,.nav-toggle.open:after{width: 2.6rem;right: 1.8rem;top: 3.2rem;}
.navbar-menu{top:6.2rem;border-radius:.4rem;}
}


.box,.textarea{padding: 1rem;border-radius: .6rem;border: 1px solid #d7d9e0;background: #fff;box-shadow:rgba(133, 137, 144, 0.2) 0 0.1rem 0.4rem;}
.box:hover,.textarea:hover{border-color: #96989c;}
.box:focus-within,.textarea:focus{border-color: #3d78fd;box-shadow: #3d78fd 0 0 0 .1rem, rgba(61, 120, 253, 0.1) 0 0 0 .4rem;}
.counter-textarea{padding: 1rem 1.2rem;min-height: 28rem;color: #444;border-radius: .4rem;background:transparent;border:0;}

.counter-btns{padding: 1rem 1rem 0;}
.counter-btns .btn{position:relative;margin-right: 1rem;float: left;border: 0;padding: .6rem 1rem;transition:all .15s;border-radius: .3rem;color: #6b6767;text-align: center;font-size: 1.4rem;}
.counter-btns .btn span{display:none;position:absolute;top: -3.2rem;left: 50%;margin-left: -2.6rem;padding: .3rem 1.2rem;z-index: 99999;white-space: nowrap;transform: scale(.6);transform-origin: bottom;background: #424344;border-radius: 4px;box-shadow: 0 1px 2px 0 rgba(28,55,90,.12);color: #fff;opacity: 0;transition: all linear .2s;}
.counter-btns .btn:hover span{position:absolute;display:flex;z-index:99999;transform: scale(1);opacity:1;transform-origin: bottom;}
.counter-btns .btn span:before{position: absolute;content:'';right: 40%;top: auto;left: auto;bottom: -0.4rem;width: .8rem;height: .8rem;background-color: #424344;-webkit-transform: rotate(135deg);-ms-transform: rotate(135deg);transform: rotate(135deg);}
.counter-btns svg{display: inline-block;width: 1.6rem;height: 1.6rem;fill: #b2b6bf;fill-rule: evenodd;transition: all .2s;}
.counter-btns .btn:hover svg{fill:#3d78fd;transform: scale(1.2);}

.counter-btns .btn-r{float:right;display:flex;margin-left: 1rem;padding: .2rem 1.4rem;background: #f6f7fa;border-radius: 1.5rem;font-size: 1.4rem;color: #777c88;}
.counter-btns .btn-r .font-size{display: flex;padding: 0 .5rem;}
.counter-btns .font-size i{display:block;font-style: normal;padding: 0 .4rem;}
.counter-btns .font-size i.active,.counter-btns .font-size i:hover{color: #3d78fd;font-weight: 700;border-radius:.2rem;}
.counter-btns .btn-blank:hover,.counter-btns .btn-typeset:hover,.counter-btns .font-size i:hover{background:#3d78fd;color:#fff;}


.count-big{padding: 3rem 0;font-size: 2.4rem;text-align: center;font-weight: 700;}
.count-big span{display: inline-block;padding: 0 1rem;font-size: 3.4rem;}


@media(max-width:760px){

    .counter-textarea{min-height: 16rem;}
    .counter-btns{padding: 1rem .8rem 0 0;}
    .counter-btns .btn {margin-right:0;}
    .counter-btns .btn-down, .counter-btns .btn-size{display:none;}
    .count-big{padding: 1.5rem 2rem 2rem;font-size:1.4rem;}
    .count-big span{padding: 0 .2rem;font-size: 2rem;}

}

.count{padding: 1rem 0;}

.count h2{padding: 2rem 0;font-size: 2.2rem;}
.count ul{display:block;margin-right:-1rem;}
.count li {display: block;width:15.8%;width:calc(100% / 6 - 1rem);float:left;margin:0 1rem 1rem 0;padding: 1rem 1rem 1.4rem;background: #f8f8f8;color: #737686;border-radius: .4rem;transition:all .2s;text-align: center;}
.count li p{font-size:1.4rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.count span{display:block;font:bold 2.6rem/3rem arial,Helvetica,sans-serif;padding:1rem 0;color: #3c3d42;}
.count li:hover{color: #3c78ff;background: #f1f6fd;}
.count li:hover span{color: #3c78ff;}
.text-convert .counts{padding:1rem 1.4rem;background:#f8f8f8;border-radius:.4rem;font-size: 1.4rem;}
.text-convert .counts i{padding: 0 1rem;font-style: normal;}
@media(max-width:760px){
    .count,.intro{padding: 1rem 2rem 2rem;margin-top:1.5rem;background:#fff;border-radius: .6rem;}
    .count h2{padding:1rem 0 2rem;}
    .count li{display:flex;float:left;width:calc(100% / 2 - 1rem);padding:.4rem;line-height:3rem;}
    .count li p{width:60%;font-size:1.4rem;}
.count span{width:40%;padding:0;line-height:3rem;font-size:1.6rem}
    .text-convert .counts{padding:1rem 1.4rem;background:#f0f0f2;border-radius:.4rem;}

}

.intro h2{padding: 2rem 0 1rem;}
.intro p{padding: 1rem 0;}
.intro table{margin: 1rem 0;width:100%;border-spacing:0;border-collapse: collapse;border:1px solid #1f2023;text-align: center;}
.intro table th,.intro table td{padding:.8rem 0;border:1px solid #888;}
.intro table th{background:#efefef;}
.intro table tr:nth-child(odd){background:#f6f6f6;}

.text-convert{padding: 2rem 0;}
.text-convert .textarea{padding:1.4rem 2rem;min-height: 18rem;}
.text-convert .textarea.h30{min-height:30rem;}
.buttons{display:flex;justify-content:center;padding:2rem;}
.buttons button{margin:0 .6rem;padding:0 2.4rem;line-height:4.4rem;border-radius:.4rem;border:1px solid #dbdbdb;color: #55575d;}
.buttons .btn:hover{border-color:#acb2b9;color: #2a2b2d;}
.buttons .btn-primary{background:#3d78fd;border-color:#3d78fd;color:#fff;}
.buttons .btn-primary:hover{background:#2e66e6}
.result-area{min-height: 18rem;padding:1.4rem 2rem;background:#f6f6f6;border-radius: .6rem;border: 1px solid #dadada;}

@media(max-width:760px){
    .intro h2{padding:1rem 0;}
    .text-convert{padding:0;}
    .text-convert .textarea.h30{min-height:20rem;}
    .buttons{flex-wrap:wrap;padding:1rem 0;}
    .buttons button{margin:.6rem;padding:0 1.6rem;}
    .result-area{background: #fff;border:0;border-radius: .6rem;}

}

.cool-text{padding:2rem 0;}
.cool-text .converter textarea{min-height: 12rem;padding: 1rem 1.2rem;}
.cool-text .counts{float:right;padding-right:3rem;font-size:1.4rem;color:#b9bcc1}

.cool-results{padding: 0 2.4rem 2.4rem;margin-top: 3rem;background:#f6f6f6;border-radius: 0.6rem;}
.cool-results h3{padding:2rem 0 1.4rem;font-size:1.8rem;color: #67696f;}
.cool-results .flex{display:flex;align-items: center;padding:2rem 2.4rem;background:#fff;border-radius: .4rem;}
.cool-results .cool-font{width:100%;min-height:4rem;margin-right:2.4rem;line-height:1.4em;font-size: 1.8rem;word-break: break-all;overflow: hidden;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;color:#222;}
.flex .btn-row{display:flex;justify-content: center;width:12rem;height: 4rem;background: #f6f6f6;border-radius:2rem;color: #4b4d6d;}
.flex .btn-row svg{width: 1.4rem;height: 1.4rem;float:left;margin: .6rem .6rem 0 0;fill: #4b4d6d;}
.flex .btn-row:hover{background: #3d78fd!important;color: #fff;}
.cool-results .item:hover .copy{background: #36383e;color: #fff;}
.cool-results .item:hover .copy svg{fill: #fff;}
@media(max-width:760px){

.cool-text{padding: 0;}
    .cool-results{padding:0;margin-top:0;background:rgba(255, 255, 255, 0);}
   .cool-results .item{padding: 1rem 2rem;margin-top:1.5rem;background:#fff;border-radius: .6rem;}
   .cool-results h3{padding:.6rem 0 1rem;font-size:1.8rem;color: #67696f;}
   .cool-results .flex{display:block;position:relative;padding:1rem 0;border-radius: .4rem;}
   .flex .btn-row{position:absolute;top:-4rem;right:-.4rem;width:10rem;height: 3rem;}

}

.number-convert .label-row{padding:2rem 0;}
.convert-row{display:flex;margin-bottom: 1rem;box-shadow:rgba(133, 137, 144, 0.2) 0 0.1rem 0.4rem;border-radius:.4rem;}
.convert-row input{width:78%;height:6.4rem;padding:1rem 2rem;line-height:4.4rem;font-size: 2rem;border:1px solid #cbcdd4;color: #4b4d58;border-right-width:0;border-radius:.4rem 0 0 .4rem;}
.convert-row input:hover{border-color:#98999c;}
.convert-row input:focus{border-color: #3d78fd;box-shadow:inset #3d78fd 0 0 0 .1rem, rgba(61, 120, 253, 0.1) 0 0 0 .3rem;}
.convert-row button{width:22%;background: #3d78fd;font-size:2.4rem;font-weight:700;color: #fff;border-radius:0 .4rem .4rem 0}
.convert-row button:hover{background: #2d60d8;}

.results-roman{padding:0 0 2rem;}
.results-roman h3{padding:0 0 1rem;font-size:1.7rem;color: #3d78fd;}
.results-roman .flex{display:flex;align-items: center;padding:3rem;background: #f6f6f6;border-radius: .4rem;border: 1px solid #cbcdd4;}
.results-roman #Result{width: 100%;font-size: 4rem;color: #000;font-family: "Times New Roman",Georgia,Serif;}
.results-roman .flex .btn-row{background:#fff;}
.results-roman:hover .copy{background: #36383e;color: #fff;}
.results-roman:hover .copy svg{fill: #fff;}

@media(max-width:760px){
    .number-convert .label-row{padding:.4rem 0 1.4rem;}
    .number-convert{padding: 1rem 2rem 2.4rem;margin-top:1.5rem;background:#fff;border-radius: .6rem;}
    .convert-row{display:block;box-shadow:none;}
.convert-row input{width:100%;border-right-width:1px;border-radius:.4rem;}

.convert-row button{width:100%;line-height:5rem;margin-top:1.5rem;border-radius: .4rem}
.convert-row button:hover{background: #2d60d8;}
.results-roman{padding: 0 0 5.6rem;}
.results-roman .flex{position:relative;}
.results-roman .flex .btn-row{width:100%;height:4rem;top:auto;bottom: -5.6rem;right: 0;background: #dedfe2;border-radius: .4rem;}

}

.results-money h3{padding:2.4rem 0 1.2rem;}
.results-money .big{padding:3rem 2rem;text-align:center;border:1px solid #888;font-size:3.6rem;color:#000;}
.check{width: 100%;border-spacing:0;border-collapse: collapse;border:1px solid #1f2023;text-align: center;line-height:1.2em}
.check th,.check td{padding:.6rem 0;border:1px solid #888;}
.check .td-b,.check .td-s,.check-rmb td,.check-rmb .rmb-th2{font-family:arial,"KaiTi","STKaiti","\6a19\6977\9ad4","Kaiti SC",BiauKai;font-weight: 700;color:#02c;font-size:1.8rem;}
.check .td-b{font-size:2.4rem;}
.check .td-e:after {content: '';display: block;width: 100%;height: .2rem;background:#02c}
.check-tw{width:70%}
.check-tw th{width:9.2%;}
.check-tw td{width:9.2%;padding:.8rem 0;}
.check-tw .thd{width:17.2%;}
.check-rmb td{height:2.4rem;width:3.6%;position:relative;}
.check-rmb .overstep{position:absolute;left:-1.4rem;top:.8rem;}
.check-rmb .rmb-th1{width:8%;border-right:0;}
.check-rmb .rmb-th2{border-left:0;padding-right:2rem;}
.check-rmb .shad{display: block;height: 4rem;width:100%;line-height:4rem;font-size:2.4rem;background-image: url('data:image/svg+xml;base64,77u/PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzYiIGhlaWdodD0iMTM2IiB2aWV3Qm94PSIwIDAgMTM2IDEzNiI+CjxwYXRoIGZpbGw9IiNmMzAiIGQ9Ik0wLDEzNUgxMzZ2MUgwdi0xWk0wLDE1SDEzNnYxSDBWMTVaTTAsMzBIMTM2djFIMFYzMFpNMCw0NUgxMzZ2MUgwVjQ1Wk0wLDYwSDEzNnYxSDBWNjBaTTAsNzVIMTM2djFIMFY3NVpNMCw5MEgxMzZ2MUgwVjkwWm0wLDE1SDEzNnYxSDB2LTFabTAsMTVIMTM2djFIMHYtMVpNMCwwSDEzNlYxSDBWMFoiLz4KPC9zdmc+Cg==');background-repeat: repeat-x;background-size: 4rem 4rem;background-position: center;white-space: nowrap;}
.results-money.bg .big,.results-money.bg .check{background:#eee;}
.results-money.bg .check-rmb .shad{opacity:.4;}

@media(max-width:760px){
    .check-tw{width:100%}

}

footer{margin-top:5rem;padding:4rem 1rem;background: #f0f0f2;font-size:1.4rem;text-align:center;}