html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.15;-webkit-tap-highlight-color: rgba(0,0,0,0);}
body{margin:0;font-family: "Microsoft Yahei",PingFangSC-Regular,"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;line-height: 1.42857143;font-size: 0.7rem;min-width: 320px;background: #fff;color: #333;padding-bottom: 2.75rem;}
h1{font-size:2em;margin:.67em 0;}
figure{margin:1em 40px;}
hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible;}
a{-webkit-text-decoration-skip:objects;background-color:transparent;}
abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}
b,strong{font-weight:bolder;}
dfn{font-style:italic;}
mark{background-color:#ff0;color:#000;}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sub{bottom:-.25em;}
sup{top:-.5em;}
audio:not([controls]){display:none;height:0;}
img{border-style:none;}
svg:not(:root){overflow:hidden;}
button,input,optgroup,select,textarea{line-height:1.42857143;margin:0;outline: none;}
body, button, input, select, textarea {text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-moz-font-feature-settings: "liga","kern";}
button,input{overflow:visible;}
button,select{text-transform:none;}
button,html [type=button],/* 1 */
[type=reset],[type=submit]{-webkit-appearance:button;}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0;}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText;}
fieldset{padding:.35em .75em .625em;}
legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}
progress{display:inline-block;vertical-align:baseline;}
textarea{overflow:auto;}
[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto;}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none;}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}
summary{display:list-item;}
article,aside,footer,header,nav,section,figcaption,figure,main,details,/* 1 */
menu{display:block;}
pre,code,kbd,samp{font-family:monospace, monospace;font-size:1em;}
audio,video,canvas{display:inline-block;}
template,[hidden]{display:none;}
.clearfix{zoom:1;}
.clearfix:before,.clearfix:after{display:table;line-height:0;content:"";}
.clearfix:after{clear:both;}
a {color: #301f14;text-decoration: none;}
ul {margin: 0;list-style: none;padding: 0;}

.container {padding: 0 0.5rem;}

.img-center {text-align: center;font-size: 0;}
.img-center img {display: inline-block;width: auto;height: auto;max-width: 100%;max-height: 100%;vertical-align: middle;}

.yunu-header {padding: 0.5rem 0;}
.yunu-header .logo img {display: block;height: 1.5rem;width: auto;margin: 0 auto;}

.yunu-swiper img {display: block;width: 100%;height: auto;}

.yunu-section {padding: 1.5rem 0;}
.yunu-section-title {text-align: center;font-size: 0.9rem;margin-bottom: 1rem;}
.yunu-section-title span {color: #3db748;}
.yunu-section-title small {display: block;font-size: 0.6rem;}

.yunu-nav {padding-top: 0.5rem}
.yunu-nav p {text-align: center;margin: 0;font-size: 0.6rem;background-color: #f1f1f1;border-top: 1px solid #ddd;padding: 0.25rem 0;}
.yunu-nav p a {font-size: 0.7rem;font-weight: bold;color: #3db748;}
.yunu-nav ul {margin-left: -0.05rem;}
.yunu-nav li {float: left;width: 33.333333%;}
.yunu-nav li a {display: block;margin-left: 0.05rem;margin-bottom: 0.05rem;background-color: #3db748;color: #fff;text-align: center;line-height: 1.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.yunu-zs-menu {text-align: center;font-size: 0;margin-bottom: 0.5rem;}
.yunu-zs-menu li {display: inline-block;font-size: 0.6rem;width: 5.15rem;line-height: 1.225rem;color: #fff;background: url(../images/qsk1.png) no-repeat 0 0;background-size: cover;margin: 0 -0.15rem;}
.yunu-zs-menu li.active {background-image: url(../images/qsk2.png);}
.yunu-zs-con .swiper-slide {background: url(../images/qs_07.jpg) no-repeat center 3rem;background-size: 0.8rem auto;}
.yunu-zs-con .item {float: left;width: 7rem;}
.yunu-zs-con .item h4 {margin: 0 0 0.25rem;text-align: right;color: #3db748;font-size: 0.6rem;}
.yunu-zs-con .item p {margin: 0.25rem 0 0;font-size: 0.6rem;text-align: center;}
.yunu-zs-con .item:nth-child(even) {float: right;}
.yunu-zs-con .item:nth-child(even) h4 {text-align: left;color: #666;}

.yunu-ms-menu {padding-top: 2rem;margin-bottom: 1rem;}
.yunu-ms-menu li {float: left;width: 25%;box-sizing: border-box;border-left: 1px solid #fff;text-align: center;background-color: #999;color: #fff;line-height: 2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yunu-ms-menu li.active {background-color: #004366;}
.yunu-ms-con h4 {margin: 0.25rem 0;overflow: hidden;}
.yunu-ms-con h4 em {float: left;background: url(../images/ms_07.jpg) no-repeat;width: 1.5rem;height: 1.5rem;text-align: center;font-style: normal;font-weight: bold;color: #3db748;background-size: cover;font-size: 0.8rem;margin-top: 0.25rem;}
.yunu-ms-con h4 span {margin-left: 1.75rem;display: block;font-size: 0.9rem;color: #004366;}
.yunu-ms-con h4 strong {display: block;color: #333;font-weight: normal;font-size: 0.7rem;}
.yunu-ms-con h4 b {color: #3db748;}
.yunu-ms-con p {font-size: 0.6rem;background: url(../images/ms_11.jpg) no-repeat left 0.25rem;background-size: 0.25rem auto;padding-left: 0.75rem;}
.yunu-ms-con p b {color: #3db748;}

.yunu-ztc-menu {text-align: center;font-size: 0;margin-bottom: 0.5rem;}
.yunu-ztc-menu li {display: inline-block;font-size: 0.6rem;width: 5.15rem;line-height: 1.225rem;color: #fff;background: url(../images/qsk1.png) no-repeat 0 0;background-size: cover;margin: 0 -0.15rem;}
.yunu-ztc-menu li.active {background-image: url(../images/qsk2.png);}
.yunu-ztc-con .m {line-height: 14.3rem;height: 14.3rem;margin-bottom: -1rem;position: relative;}
.yunu-ztc-con .text {background-color: #eee;padding: 1rem;}
.yunu-ztc-con .text h4 {margin: 1rem 0 0.5rem;color: #3db748;}
.yunu-ztc-con .text p {margin: 0;font-size: 0.6rem;text-align: justify;}
.yunu-ztc-con .text .btn {display: block;margin: 1rem auto 0;width: 5rem;line-height: 2;background-color: #3db748;color: #fff;text-align: center;}

.yunu-lr-in {padding-top: 1rem;}
.yunu-lr-in .item {border-bottom: 1px dashed #ddd;padding: 1rem 0;}
.yunu-lr-in h4 {margin: 0.25rem 0;overflow: hidden;}
.yunu-lr-in h4 em {float: left;background: url(../images/ms_07.jpg) no-repeat;width: 1.5rem;height: 1.5rem;text-align: center;font-style: normal;font-weight: bold;color: #3db748;background-size: cover;font-size: 0.8rem;margin-top: 0.25rem;}
.yunu-lr-in h4 span {margin-left: 1.9rem;display: block;font-size: 0.9rem;color: #004366;}
.yunu-lr-in h4 strong {display: block;color: #333;font-weight: normal;font-size: 0.7rem;}
.yunu-lr-in h4 b {color: #3db748;}
.yunu-lr-in p {font-size: 0.6rem;background: url(../images/ms_11.jpg) no-repeat left 0.25rem;background-size: 0.25rem auto;padding-left: 0.75rem;}
.yunu-lr-in p b {color: #3db748;}
.yunu-lr-2 h4 em {margin: 0;width: 1rem;height: 1rem;line-height: 1rem;}
.yunu-lr-2 h4 span {font-size: 0.7rem;margin-left: 1.5rem;}
.yunu-lr-2 h4 span strong {display: inline-block;font-weight: bold;color: #3db748;}
.yunu-lr-2 p {padding: 0;background: none;}

.yunu-dk-in {text-align: center;background: url(../images/dzb.jpg) no-repeat center 0;color: #004366;background-size: cover;padding: 1.5rem 0;}
.yunu-dk-in h4 {margin: 0;font-size: 0.7rem;font-weight: normal;}
.yunu-dk-in h4 span {font-size: 0.9rem;font-weight: bold;}
.yunu-dk-in p {line-height: 2;font-size: 0.6rem;text-align: justify; color:#fff;}
.yunu-dk-in .btn {display: block;width: 5rem;background: #164d61;margin: 1rem auto 0;font-size: 0.6rem;color: #ffffff;text-align: center;line-height: 2.5;}

.yunu-news-menu {margin-bottom: 0.5rem;font-size: 0;}
.yunu-news-menu .more {float: right;line-height: 1.5rem;font-size: 0.7rem;text-transform: uppercase;}
.yunu-news-menu li {background-color: #999;text-align: center;color: #fff;line-height: 1.5rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;font-size: 0.6rem;padding: 0 0.5rem;margin-right: 0.5rem;}
.yunu-news-menu li.active {background-color: #3db748;}
.yunu-news-con .m {float: left;width: 50%;}
.yunu-news-con .text {background-color: #004366;color: #fff;padding: 0.5rem;margin-left: 50%;}
.yunu-news-con .text h4 {margin: 0 0 0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.yunu-news-con .text p {margin: 0;font-size: 0.6rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;line-height: 1.6;}
.yunu-news-con ul {margin-top: 0.25rem;}
.yunu-news-con li {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 1.5rem;padding-left: 0.75rem;position: relative;border-bottom: 1px dashed #ddd;}
.yunu-news-con li:before {content: "";position: absolute;top: 50%;left: 0;width: 0.2rem;height: 0.2rem;background-color: #999;margin-top: -0.1rem;border-radius: 50%;}

.yunu-footer {text-align: center;color: #999;font-size: 0.6rem;padding: 0.5rem 0;}
.yunu-footer p {margin: 0.5rem 0;}
.yunu-gotop {display: block;background-color: #3db748;color: #fff;text-align: center;padding: 0.25rem;}

.yunu-footer-fix {position: fixed;bottom: 0;left: 0;width: 100%;background-color: #3db748;z-index: 10;}
.yunu-footer-fix li {float: left;width: 25%;}
.yunu-footer-fix li a {display: block;text-align: center;color: #fff;padding: 0.25rem 0;font-size: 0.6rem;line-height: 1;}
.yunu-footer-fix li i {display: block;height: 1.4rem;background: no-repeat center;background-size: contain;margin-bottom: 5px;}
.yunu-footer-fix li i.i1 {background-image: url(../images/ico_07.jpg);}
.yunu-footer-fix li i.i2 {background-image: url(../images/ico_09.jpg);}
.yunu-footer-fix li i.i3 {background-image: url(../images/ico_12.jpg);}
.yunu-footer-fix li i.i4 {background-image: url(../images/ico_14.jpg);}

.yunu-header-inner {background-color: #3db748;color: #fff;line-height: 1.5rem;padding: 0.5rem 0;position: relative;}
.yunu-header-inner .title {text-align: center;margin: 0 4rem;font-size: 0.8rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.yunu-header-inner .menu {float: right;width: 0.9rem;height: 0.7rem;border-top: 0.1rem solid #fff;border-bottom: 0.1rem solid #fff;margin-top: 0.25rem;}
.yunu-header-inner .menu:after {content: '';height: 0.1rem;background-color: #fff;width: 100%;display: block;margin-top: 0.3rem;}
.yunu-header-inner .goback {width: 0.5rem;height: 0.5rem;border-left: solid 0.1rem #fff;border-top: solid 0.1rem #fff;overflow: hidden;display: block;top: 0.95rem;position: absolute;left: 0.85rem;transform: rotate(-45deg);-ms-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-o-transform: rotate(-45deg);}
.yunu-header-inner .search {width: 1rem;height: 1rem;float: right;position: relative;margin-top: 0.25rem;margin-right: 0.7rem;}
.yunu-header-inner .search:before {content: "";display: block;width: 0.1rem;height: 0.4rem;position: absolute;bottom: 0;left: 0.7rem;background: #fff;transform: rotate(-45deg);-ms-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-o-transform: rotate(-45deg);}
.yunu-header-inner .search:after {content: "";display: block;width: 0.8rem;height: 0.8rem;box-sizing: border-box;border: 0.1rem solid #fff;border-radius: 100%;}

.searchbox {position: fixed;top: 0;left: 0;width: 100%;background-color: #fff;z-index: 100;box-sizing: border-box;padding: 15px 15px 30px;display: none;}
.searchbox .close {width: 28px;height: 28px;line-height: 28px;font-size: 24px;margin-bottom: 10px;display: block;color: #999;}
.searchbox form {display: block;overflow: hidden;border: 1px solid #ddd;border-radius: 5px;position: relative;}
.searchbox input {border: 0;padding: 0 42px 0 10px;line-height: 34px;display: block;width: 100%;box-sizing: border-box;font-size: 14px;}
.searchbox button {position: absolute;right: 0;top: 0;display: block;height: 34px;line-height: 34px;color: #333;width: 32px;border: 0;border-left: 1px solid #ddd;text-align: center;background: linear-gradient(180deg , #fff 0% , #ededed 100%);padding: 0;}
.searchbox button:after {content: '';display: block;width: 100%;height: 100%;background: url(../images/search.png) no-repeat center;background-size: 16px;}

.yunu-crumbs-inner {padding: 0.5rem;font-size: 0.6rem;color: #999;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

.list-1 {margin-left: -0.5rem;}
.list-1 li {float: left;width: 50%;margin-bottom: 0.5rem;}
.list-1 li a {display: block;margin-left: 10px;}
.list-1 li .m {border: 0.05rem solid #ddd;height: 8.85rem;line-height: 8.85rem;}
.list-1 li .text {text-align: center;margin-top: 0.25rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}

.list-2 li {border-bottom: 1px solid #ddd;margin-bottom: 0.5rem;}
.list-2 li a {display: block;overflow: hidden;padding-bottom: 0.5rem;}
.list-2 li .m {width: 99px;float: left;border: 1px solid #ccc;height:63px;}
.list-2 li .text {position: relative;margin-left: 5.5rem;}
.list-2 li .text h4 {margin: 0 0 0.25rem;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.list-2 li .text p {margin: 0;font-size: 0.6rem;line-height: 1.1rem;color: #666;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-align: justify;}

.list-5 li {border-bottom: 1px solid #eee;}
.list-5 li a {display: block;line-height: 2rem;padding: 0 0.5rem;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

.yunu-page {text-align: center;margin: 1rem 0;}
.yunu-page a,.yunu-page span {display: inline-block;margin: 0 0.25rem;padding: 0.3rem 0.6rem;}
.yunu-page a {background-color: #3da036;color: #fff;border-radius: 0.15rem;}

.yunu-title-1 {border-bottom: 0.1rem solid #ececeb;margin-bottom: 1rem;font-size: 0.8rem;}
.yunu-title-1 span {display: inline-block;padding-bottom: 0.25rem;border-bottom: 2px solid #004366;color: #666;margin-bottom: -0.1rem;}
.yunu-title-1 small {font-size: 0.6rem;color: #999;text-transform: uppercase;}
.yunu-title-2 {line-height: 2rem;border-bottom: 1px solid #ccc;background-color: #f1f1f1;font-size: 0.7rem;padding: 0 0.5rem;}
.yunu-title-3 {line-height: 1.8rem;background-color: #3db748;color: #fff;font-size: 0.7rem;margin-bottom: 1rem;}
.yunu-title-3 em {float: right;padding-right: 0.5rem;font-style: normal;}
.yunu-title-3 span {display: inline-block;padding: 0 0.5rem;background-color: #004366;font-size: 0.8rem;}

.yunu-honor-list {margin-left: -0.5rem;}
.yunu-honor-list li {float: left;width: 25%;}
.yunu-honor-list li a {display: block;margin-left: 0.5rem;margin-bottom: 1rem;}
.yunu-honor-list li .m {border: 0.05rem solid #ddd;}
.yunu-honor-list li a:hover .m {border-color: #004366;}

.yunu-contact {font-size: 0.6rem;}
.yunu-contact h4 {font-size: 0.9rem;color: #3db748;}

.yunu-columns {margin: 0 0 1rem 0;background-color: #fff;overflow: hidden;}
.yunu-columns dl {margin: 0;}
.yunu-columns dt {line-height: 2rem;font-size: 0.7rem;font-weight: bold;position: relative;border-bottom: 1px solid #ddd;}
.yunu-columns dt:before {width: 0.5rem;height: 0.5rem;border-right: solid 0.1rem #ccc;border-bottom: solid 0.1rem #ccc;overflow: hidden;display: block;transform: rotate(45deg);-ms-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);-o-transform: rotate(45deg);content: '';position: absolute;right: 0.5rem;top: 0.5rem;}
.yunu-columns dd {border-bottom: 1px solid #eee;padding-left: 1rem;margin: 0;display: none;}
.yunu-columns dd li {line-height: 2rem;border-bottom: 1px solid #eee;}
.yunu-columns dd li a {display: block;}
.yunu-columns dd li:last-child {border-bottom: 0;}
.yunu-columns dl.open dt:before {-ms-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-webkit-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);top: 1.1rem;}
.yunu-columns dl.open dd {display: block;}


.yunu-infocontent-title {text-align: center;margin: 0 0 1rem;border-bottom: 1px solid #ddd;padding: 1rem 0 0.7rem;}
.yunu-infocontent-title h1 {font-size: 0.9rem;margin: 0;}
.yunu-infocontent-title p {margin: 0.7rem 0 0;color: #999;font-size: 0.6rem;}
.yunu-infocontent-title p span {padding: 0 10px;}
.yunu-infocontent-body {line-height: 2;margin-bottom: 1rem;}
.yunu-infocontent-body img{max-width: 100%;}

.yunu-showcase {margin: 1rem 0;}
.yunu-showcase h1 {font-size: 0.9rem;margin: 0 0 0.25rem;font-weight: normal;}
.yunu-showcase-info {margin-top: 0.75rem;font-size: 0.5rem;line-height: 1.8;color: #666;}
.yunu-showcase-info p {margin: 0;padding: 0.25rem 0;}
.yunu-showcase-info p span {color: #888;}
.yunu-showcase-info .tel {display: block;background-color: #3db748;color: #fff;margin-top: 1rem;font-size: 0.8rem;text-align: center;line-height: 2.5;}

.table-info {width: 100%;border-collapse: collapse;margin-bottom: 1rem;font-size: 0.6rem;}
.table-info td {padding: 0.25rem;border: 0.05rem solid #fff;background: #DDEAFF;text-align: center;color: #111;word-break: break-all;}
.table-info td span {display: block;}
.table-info tr:nth-child(even) td {background: #b5dfb9;}
.table-info tr:nth-child(odd) td {background: #cee8d0;}
.table-info tr:first-child td {background: #3db748 !important;text-align: center;color: #fff;font-weight: bold;}

.ms {margin-bottom: 1rem;}
.ms dl{clear:both;padding-top:1rem;border-top:1px dashed #ddd;padding-bottom:1rem;overflow:hidden;margin:0;}
.ms dl:first-child{padding-top:0;border-top:none;}
.ms dl:last-child{padding-bottom:0;}
.ms dd{margin:0;}
.ms dl dd h4{color:#004366;font-size:0.9rem;margin:0;}
.ms dl dd h4 span{display:block;font-size:0.8rem;color:#004366;margin-left:0.5rem;margin-top:0.5rem;font-weight: normal;}
.ms dl dd h4 span b{color:#3db748;}
.ms dl dd p{font-size:0.7rem;color:#333;padding-left:15px;background:url(../images/6617165939ba46d99ad24e37415562a1_88.jpg) no-repeat left 7px;line-height:1.2rem;}
.ms dl dd span{color:#3db748;font-weight:700;}
.sl dl dd h4 span {display: inline-block;}



.load_more{position: relative;transition: all .3s;text-align: center; padding-bottom: 1rem;}
.load_more .la-ball-fall{position: absolute;left: 50%;top: 50%;margin-left: -36px;margin-top: -9px;opacity: 0;visibility: hidden;cursor: not-allowed}
.load_more .la-ball-fall.la-sm{margin-left: -18px;margin-top: -4px}
.load_more .la-ball-fall.la-2x{margin-left: -72px;margin-top: -18px}
.load_more .la-ball-fall.la-3x{margin-left: -108px;margin-top: -27px}
.load_more .load_more_btn{border: 0;color: #fff;text-align: center;width: 100%;line-height: 2em;border-radius: 2em;background-color: #3db748;transition: background-color .2s;outline: none}
.load_more .load_more_btn:hover{background-color: #3db748}
.load_more .load_more_btn[disabled]{color: transparent;opacity: .6;cursor: not-allowed}
.load_more .load_more_btn[disabled]~.la-ball-fall{opacity: 1;visibility: visible;transition-delay: 0s}
.la-ball-fall{display: block;font-size: 0;color: #fff}
.la-ball-fall,
.la-ball-fall>div{position: relative;box-sizing: border-box}
.la-ball-fall.la-dark{color: #333}
.la-ball-fall>div{display: inline-block;float: none;background-color: currentColor;border: 0 solid currentColor;width: 10px;height: 10px;margin: 4px;border-radius: 100%;opacity: 0;-webkit-animation: a 1s ease-in-out infinite;animation: a 1s ease-in-out infinite}
.la-ball-fall>div:first-child{-webkit-animation-delay: -.3s;animation-delay: -.3s}
.la-ball-fall>div:nth-child(2){-webkit-animation-delay: -.2s;animation-delay: -.2s}
.la-ball-fall>div:nth-child(3){-webkit-animation-delay: -.1s;animation-delay: -.1s}
.la-ball-fall>div:nth-child(4){-webkit-animation-delay: 0ms;animation-delay: 0ms}
.la-ball-fall.la-sm>div{width: 5px;height: 5px;margin: 2px}
.la-ball-fall.la-2x>div{width: 20px;height: 20px;margin: 8px}
.la-ball-fall.la-3x>div{width: 30px;height: 30px;margin: 12px}