@charset "utf-8";
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, span, input, textarea { margin: 0; padding: 0 }
body { font-size: 14px; font-family: "微软雅黑", Arial, Verdana, Arial, Helvetica, sans-serif; padding-top: 1px; background: #fff }
li, ol { list-style: none }
ins { text-decoration: none }
i, em { font-style: normal }
a { text-decoration: none; font-family: "微软雅黑" }
a:hover { cursor: pointer; text-decoration: none }
:focus { outline: 0 }
.clear { clear: both; line-height: 0; overflow: hidden; zoom: 1; font-size: 0; content: '.' }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 }
img { padding: 0; margin: 0 }
a img { border: 0 }
input, textarea { border: 0; font-family: "微软雅黑"; font-size: 13px }
h1, h2, h3, h4, h5, h6 { font-weight: 400; font-size: 14px; font-family: "微软雅黑" }
.fl { float: left }
.fr { float: right }
.wrap { min-width: 320px; max-width: 750px; margin: 0 auto; overflow: hidden; position: relative; font-family: "微软雅黑"; background: #fff }
.wrap img { display: block; width: 100% }

h2.main_title a { overflow: hidden; display: block; text-align: center; line-height: 0; font-size: 0; padding-top: 1.9rem; background: url(../images/ys_tbg.png) no-repeat center top; background-size: 21.85rem auto; -webkit-background-size: 21.85rem auto }
h2.main_title a strong { display: block; font-size: 1.8rem; color: #26263f; line-height: 100% }
h2.main_title a span { display: block; font-size: 1.2rem; color: #9595a4; line-height: 100%; font-weight: 400; letter-spacing: .05rem; padding-top: .95rem }
h2.main_title a:hover { color: #333 }

.ban { position: relative; z-index: 3; width: 100%; overflow: hidden }
.ban img { display: block; width: 100% }
.ban .swiper-pagination { bottom: 2rem }
.ban .swiper-pagination-bullet { background: #fff; width: .8rem; opacity: 1; height: .8rem; margin: 0 .4rem !important }
.ban .swiper-pagination-bullet-active { border-radius: .4rem; opacity: 1; background: #5e88ff }

.seabox { padding: 1.6rem 6.67% 2.05rem }
.sea_inp { border: 1px solid #bfbfbf; border-radius: 1.5rem; height: 2.9rem }
.sea_inp input { background: 0 0; border: 0; outline: 0 }
.sea_inp #keywords { font-size: 1rem; color: #999; line-height: 2.9rem; padding-left: 1.6rem; display: block; float: left; width: 80% }
.sea_inp .sub { width: 4.3rem; height: 2.9rem; float: right; background-image: url(../images/s_btn.png); background-repeat: no-repeat; background-position: center center; background-size: 1.6rem 1.6rem }

.ys { background: #F7F7F7; padding: 2.05rem 0 2.75rem }
.ys h3 { text-align: center; font-size: 0; line-height: 0; font-weight: 400 }
.ys h3 span { display: inline-block; padding: 0 1.45rem; border: 1px solid rgba(191, 191, 191, .5); border-radius: 1rem; font-size: 1.2rem; color: #26263f; line-height: 1.9rem; position: relative }
.ys .software { padding: 1.55rem 5.33% 2.5rem; overflow: hidden; position: relative }
.ys .software ul { padding: 2.05rem 0 1.25rem; display: flex; display: -webkit-flex }
.ys .software ul li { float: left; position: relative; width: 47.76%; box-shadow: 0rem 0rem 1rem 0rem rgba(35, 24, 21, .1); border-radius: .4rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; padding: 2.2rem 1.9rem 1.6rem; text-align: center; opacity: 0; -o-transition: all .3s ease; transition: all .3s ease }
.ys .software ul li .pic { width: 3.6rem; height: 3.6rem; background: #5e88ff; border-radius: 50%; margin: 0 auto; position: relative }
.ys .software ul li .pic img { position: relative; z-index: 9 }
.ys .software ul li .pic:after { position: absolute; content: ""; width: 4.3rem; height: 4.3rem; background: #5e88ff; opacity: .3; border-radius: 50%; left: 50%; margin-left: -2.15rem; top: 50%; margin-top: -2.15rem }
.ys .software ul li .pic:before { position: absolute; content: ""; width: 5rem; height: 5rem; background: #5e88ff; border-radius: 50%; left: 50%; margin-left: -2.5rem; top: 50%; margin-top: -2.5rem; opacity: .2 }
.ys .software ul li h4 { position: relative; font-size: 1.2rem; color: #333; line-height: 100%; white-space: nowrap; font-weight: 700; margin: 1.25rem 0 .7rem }
.ys .software ul li p { font-size: 1rem; color: #777; line-height: 1.6rem; min-height: 4.8rem }
.ys .software ul li.swiper-slide-active, .ys .software ul li.swiper-slide-next { opacity: 1 }
.ys .software li:nth-child(2) .pic, .ys .software li:nth-child(2) .pic:after, .ys .software li:nth-child(2) .pic:before { background: #5DD0D0 }
.ys .software li:nth-child(3) .pic, .ys .software li:nth-child(3) .pic:after, .ys .software li:nth-child(3) .pic:before { background: #F8A927 }
.ys .software li:nth-child(4) .pic, .ys .software li:nth-child(4) .pic:after, .ys .software li:nth-child(4) .pic:before { background: #F28776 }
.ys .software li:nth-child(5) .pic, .ys .software li:nth-child(5) .pic:after, .ys .software li:nth-child(5) .pic:before { background: #00B7EE }
.ys .software li:nth-child(6) .pic, .ys .software li:nth-child(6) .pic:after, .ys .software li:nth-child(6) .pic:before { background: #7C5EFF }
.ys .hardware { position: relative }
.ys .hardware .hardware_con { width: 74.67%; margin: 1rem 12.67% 0 }
.ys .hardware h4 { font-size: 1.3rem; color: #333; line-height: 3.1rem; border-bottom: 1px solid #ccc; position: relative; font-weight: 700 }
.ys .hardware h4:after { position: absolute; content: ""; width: 2rem; height: .1rem; background: #5e88ff; left: 0; bottom: -1px; z-index: 2 }
.ys .hardware p { font-size: 1.2rem; color: #777; line-height: 1.6rem; margin-top: 1rem }
.ys .hardware .swiper-pagination { margin-top: 1.85rem }
.ys .swiper-pagination { position: relative; bottom: 0 }
.ys .swiper-pagination-bullet { background: #DBDBDB; width: 1rem; opacity: 1; height: 1rem; margin: 0 .5rem !important; border-radius: .5rem; -o-transition: all .3s ease; transition: all .3s ease }
.ys .swiper-pagination-bullet-active { border-radius: .5rem; opacity: 1; width: 2.5rem }
.ys .ys_prev, .ys .ys_next { position: absolute; width: 1.55rem; top: 9.4rem; cursor: pointer; filter: grayscale(1); -webkit-filter: grayscale(1); opacity: .4; -o-transition: all .3s ease; transition: all .3s ease }
.ys .ys_prev { left: 3.6% }
.ys .ys_next { right: 3.6% }
.ys .ys_prev:hover, .ys .ys_next:hover { filter: grayscale(0); -webkit-filter: grayscale(0); opacity: 1 }

.product { padding-top: 2.8rem }
.product h2 a { background-image: url(../images/product_tbg.png); background-size: 19.85rem auto; -webkit-background-size: 19.85rem auto }
.product h3 { padding-left: 3.5rem; font-weight: 400; text-align: center }
.product h3 a { display: block }
.product h3 strong { display: block; font-size: 1.5rem; color: #fff; line-height: 100%; font-weight: 400; letter-spacing: 1px }
.product h3 span { display: block; font-size: 1rem; color: #fff; line-height: 100%; opacity: .25; text-transform: uppercase; margin-top: .6rem }
.pro_info { background: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .7); box-shadow: 0rem .5rem 2.5rem 0rem rgba(14, 33, 117, .1); font-size: 0; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 1.1rem 2.4rem 1.75rem 3.5rem }
.pro_info strong { display: inline-block; font-size: .8rem; color: #0c1234; line-height: 100% }
.pro_info ul { margin-top: .8rem }
.pro_info ul li { float: left; width: 4.5rem; height: 4.5rem; background: linear-gradient(0deg, #e8e9f1, #f4f5fb); box-shadow: 0rem .5rem 1rem 0rem rgba(14, 33, 117, .1); border-radius: .5rem; margin-right: 1.3rem; -o-transition: all .3s ease; transition: all .3s ease; margin-bottom: 1.1rem }
.pro_info ul li i { display: block; position: relative; width: 1.8rem; height: 1.8rem; overflow: hidden; margin: .8rem auto .6rem }
.pro_info ul li i img { width: 1.8rem; position: absolute; left: 0; top: 0; -o-transition: all .3s ease; transition: all .3s ease }
.pro_info ul li span { display: block; font-size: .75rem; color: #26263f; line-height: 100%; text-align: center; -o-transition: all .3s ease; transition: all .3s ease }
.pro_info ul li:last-child { margin-right: 0 }
.pro_info .info2 { padding: .2rem 0; margin-bottom: 1rem }
.pro_info .info2 strong { margin-right: 1rem }
.pro_info .info2 p { display: inline-block }
.pro_info .info2 span { display: inline-block; font-size: .8rem; color: rgba(12, 18, 52, .7); line-height: 100%; margin-right: 1rem }
.pro_info .info2 span:before { content: " · " }
.pro_info .info2 span:last-child { margin-right: 0 }
.pro_info .info3 strong:first-child { margin-right: 4.4rem }
.more a { display: block; width: 10.7rem; height: 2.8rem; padding-right: 2.8rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: url(../images/more_bg1.png) no-repeat left center; background-size: 100% 100%; -webkit-background-size: 100% 100%; border-radius: .2rem 0rem 0rem .2rem; font-size: 1.1rem; color: #fff; line-height: 2.8rem; text-align: center; -o-transition: all .3s ease; transition: all .3s ease; position: relative; margin: 0 auto }

.product1 { margin-top: 1.95rem; background: url(../images/product1_bg.jpg) no-repeat center top; padding-top: 3rem; background-size: 100% 100%; -webkit-background-size: 100% 100%; height: 39rem; overflow: hidden; position: relative }
.product1 .pic { width: 17.3rem; position: absolute; left: -.1rem; top: 6.5rem; z-index: 2 }
.product1 .pro_info { width: 22rem; top: 9.05rem; right: 0; position: absolute; background: rgba(14, 16, 26, .5); padding: 1.85rem 1.4rem 1.75rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.product1 .pro_info strong { color: #fff }
.product1 .pro_info ul li { margin-right: 1.25rem }
.product1 .pro_info ul li:last-child { margin-right: 0 }
.product1 .pro_info p span { color: rgba(237, 238, 245, .7) }
.product1 .more { position: absolute; bottom: 1.55rem; left: 50%; margin-left: -5.35rem }

.product2 { background: url(../images/product2_bg.jpg) no-repeat center top; padding-top: 2.9rem; height: 42rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.product2 .pic { width: 31rem; margin-left: 12%; margin-top: 1.4rem; margin-bottom: .2rem }
.product2 h3 strong, .product2 h3 span { color: #0C1234 }
.product2 .pro_info { margin: 0 4% 1.5rem; padding: 1.35rem 1.15rem .6rem; display: flex; display: -webkit-flex }
.product2 .pro_info ul { margin-right: 1.6rem; flex-shrink: 0; -webkit-flex-shrink: 0 }
.product2 .pro_info li { margin-right: .95rem }
.product2 .pro_info .info2 { padding: 0; margin-bottom: 0 }
.product2 .pro_info .info2 p { display: block; margin: 1.55rem 0 1.65rem }
.product2 .pro_info .info3 strong:first-child { margin-right: 1.5rem }

.product3 { background: url(../images/product3_bg.jpg) no-repeat center top; padding-top: 2.85rem; height: 42rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-size: 100% 100%; -webkit-background-size: 100% 100% }
.product3 .pic { width: 24.95rem; margin: 1.7rem auto 0 }
.product3 .pro_info { margin: -1.3rem 4% 1.6rem; padding: 1.5rem 1.2rem 0; display: flex; display: -webkit-flex }
.product3 .pro_info ul { margin-right: 1.6rem; flex-shrink: 0; -webkit-flex-shrink: 0 }
.product3 .pro_info li { margin-right: .95rem }
.product3 .pro_info .info2 { padding: 0; margin-bottom: 0 }
.product3 .pro_info .info2 p { display: block; margin: 1.55rem 0 1.65rem }
.product3 .pro_info .info3 strong:first-child { margin-right: 1.5rem }
.product3 .pro_info ul li i { width: 1.95rem; height: 1.95rem; margin: .7rem auto .55rem }
.product3 .pro_info ul li i img { width: 1.95rem }

.product4 { padding: 1.5rem 0 1.2rem; text-align: center }
.product4 ul { display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; flex-wrap: wrap; -webkit-flex-wrap: wrap }
.product4 li { width: 11rem; height: 13.1rem; margin: 0 .65rem 1rem; background: #26263F }
.product4 li a { display: block; position: relative; width: 11rem; height: 13.1rem }
.product4 li a:before { position: absolute; content: ""; width: 9.4rem; height: 11.5rem; border: 1px solid rgba(255, 255, 255, .5); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: .8rem; left: .8rem; z-index: 2; -o-transition: all .3s ease; transition: all .3s ease }
.product4 li a:after { position: absolute; content: ""; background: url(../images/pi.png) no-repeat center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid #fff; -o-transition: all .3s ease; transition: all .3s ease; left: 4.75rem; top: 6.85rem }
.product4 li img { width: 11rem; height: 13.1rem; opacity: .3 }
.product4 li h3 { font-weight: 700; font-size: 1rem; color: #fff; line-height: 1.5rem; width: 100%; position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 1rem; top: 4.45rem; left: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -o-transition: all .3s ease; transition: all .3s ease }

.certificate { text-align: center; font-size: 0; line-height: 0; padding-bottom: 1.55rem }
.certificate h3 { font-size: 1.2rem; color: #333; line-height: 100%; margin-bottom: 1.65rem }
.certificate li { display: inline-block; width: 5rem; margin: 0 .9rem }

.power { background: url(../images/power_bg.jpg) no-repeat center top; background-size: 37.5rem auto; -webkit-background-size: 37.5rem auto; padding-top: 2.8rem; padding-bottom: 3rem }
.power h2 a { background-image: url(../images/power_tbg.png); background-size: 30.05rem auto; -webkit-background-size: 30.05rem auto }
.power h2 a strong { color: #fff }
.power .gun { margin: 2.8rem 0; font-size: 0; line-height: 0; text-align: center; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center }
.power .gun li { margin: 0 1.3rem; height: 3.75rem; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.power .gun li em { display: block }
.power .gun li i { display: inline-block; font-size: 2.1rem; color: #fff; line-height: 100%; font-weight: 700; -o-transition: all .3s ease; transition: all .3s ease }
.power .gun li b { display: inline-block; font-size: 1rem; color: #9595a4; line-height: 100%; font-weight: 400; margin-left: .4rem; -o-transition: all .3s ease; transition: all .3s ease }
.power .gun li span { display: block; font-size: 1.1rem; color: #9595a4; line-height: 100%; margin-top: .7rem; -o-transition: all .3s ease; transition: all .3s ease }
.power_list { margin: 0 7.33% 2rem; box-shadow: 0rem 0rem 1.2rem 0rem rgba(18, 18, 33, .2); background: #fff }
.power_list dd { padding: 2.45rem 2.8rem 2.5rem }
.power_list dd h3 { font-size: 1.4rem; color: #333; line-height: 100%; font-weight: 700; position: relative; padding-bottom: 1.1rem; letter-spacing: 1px }
.power_list dd h3:after { position: absolute; content: ""; width: 1.5rem; height: .1rem; background: #999; bottom: 0; left: 0 }
.power_list dd p { font-size: 1.2rem; color: #666; line-height: 1.8rem; margin-top: 1.1rem; height: 5.4rem }
.power_nav { margin: 0 4%; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between }
.power_nav li { width: 8rem; height: 6rem; background: rgba(94, 136, 255, .1); text-align: center; padding-top: 1.5rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; cursor: pointer }
.power_nav li:before { position: absolute; content: ""; border-style: solid; border-width: .8rem .55rem; border-color: transparent transparent #5E88FF; top: -1.6rem; left: 50%; margin-left: -.55rem; display: none }
.power_nav li strong { display: block; font-size: 1.4rem; color: #282a41; line-height: 100% }
.power_nav li span { display: block; font-size: 1.1rem; color: #282a41; line-height: 100%; margin-top: .6rem }
.power_nav li.on { background: #5E88FF }
.power_nav li.on strong, .power_nav li.on span { color: #fff }
.power_nav li.on:before { display: block }

.process { background: #ECEEF1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 1.75rem 4% 0 }
.process h2 { padding-bottom: 1rem; border-bottom: 1px solid #DDD; margin-bottom: 1.35rem; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: flex-end; -webkit-align-items: flex-end }
.process h2 a:first-child strong { display: block; font-size: 1.4rem; color: #333; line-height: 100%; letter-spacing: 1px }
.process h2 a:first-child span { display: block; font-size: 1rem; color: #999; line-height: 100%; font-weight: 400; margin-top: .5rem }
.process h2 a:last-child span { font-size: 1rem; color: #999; line-height: 100% }
.process h2 a:last-child strong { font-size: 1.5rem; color: #5e88ff; line-height: 100% }
.process ul { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap }
.process ul li { width: 21%; text-align: center; margin-bottom: 2.15rem }
.process ul li i { display: block; position: relative; width: 2.7rem; height: 2.5rem; overflow: hidden; margin: 0 auto .95rem }
.process ul li i img { width: 2.7rem; position: absolute; left: 0; top: 0 }
.process ul li h3 { font-size: 1.2rem; color: #666; line-height: 100%; font-weight: 400; -o-transition: all .3s ease; transition: all .3s ease }

.case { padding-top: 2.5rem }
.case h2 a { background-image: url(../images/case_tbg.png); background-size: 22.6rem auto; -webkit-background-size: 22.6rem auto }
.case_nav { display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; flex-wrap: wrap; -webkit-flex-wrap: wrap; margin: 1.95rem 0 .9rem }
.case_nav h3 { width: 6rem; height: 2.3rem; margin: 0 .3rem 1.2rem }
.case_nav h3 a { width: 6rem; height: 2.3rem; display: block; border: 1px solid rgba(191, 191, 191, .5); border-radius: 1.15rem; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 1.1rem; color: #9595a4; line-height: 2.2rem; font-weight: 400; -o-transition: all .3s ease; transition: all .3s ease }
.case_nav h3 a:hover { background: linear-gradient(90deg, #1d5ec3, #5e88ff); border-color: transparent; color: #fff }
.brand { background: url(../images/brand_bg.png) no-repeat center .15rem; background-size: 36.1rem auto; -webkit-background-size: 36.1rem auto; margin: 0 2% 2.15rem; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap }
.brand li { width: 33%; -o-transition: all .3s ease; transition: all .3s ease }
.brand li img { width: 10.95rem; height: 6.15rem; display: block; margin: 0 auto; -o-transition: all .3s ease; transition: all .3s ease }
.brand li:nth-child(4), .brand li:nth-child(5), .brand li:nth-child(6) { margin: 1.5rem auto }

.news { padding: 2.35rem 4% 3.05rem; background: #F6F6F6 }
.news h2 a { background-image: url(../images/news_tbg.png); background-size: 10.25rem auto; -webkit-background-size: 10.25rem auto }
.news ul { margin: 2rem 0 .1rem }
.news ul li { height: 7rem; background: #fff; box-shadow: 0rem 0rem 1rem 0rem rgba(0, 0, 0, .1); position: relative; margin-bottom: 1.5rem }
.news ul li:after { position: absolute; content: ""; width: .95rem; height: .95rem; background: url(../images/ni.png) no-repeat center; background-size: 100% 100%; -webkit-background-size: 100% 100%; top: 3.05rem; right: 1.35rem }
.news ul li a { display: block; padding: 1.35rem 5rem 1.65rem 1.6rem; display: flex; display: -webkit-flex }
.news ul li i { display: block; padding-right: 1.1rem; border-right: 1px solid rgba(169, 165, 161, .2); margin-right: 1.55rem }
.news ul li i span { font-size: .7rem; color: #999; line-height: 100%; display: block }
.news ul li i span:first-child { font-size: 1.5rem; color: #999; line-height: 100%; padding-bottom: 1.1rem; position: relative; margin-bottom: 1.05rem; font-weight: 700 }
.news ul li i span:first-child:after { position: absolute; content: ""; width: .75rem; height: .1rem; background: rgba(169, 165, 161, .3); left: 0; bottom: 0 }
.news ul li h4 { font-size: 1.2rem; font-weight: 400; line-height: 2.4rem; color: #333; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 700 }
.news ul li p { font-size: 1rem; font-weight: 400; line-height: 1.8rem; color: #666; white-space: nowrap; text-overflow: ellipsis; overflow: hidden }
.news .info a { display: block; font-size: 1.2rem; color: #999; line-height: 100%; text-align: center }

.about { padding: 3.05rem 5.33% 4rem; background: url(../images/about_bg.jpg) no-repeat center top; background-size: 100% 100%; -webkit-background-size: 100% 100% }
.about h2 a { background-image: url(../images/about_tbg.png); background-size: 18.65rem auto; -webkit-background-size: 18.65rem auto }
.about h2 a strong, .about h2 a span { color: #fff }
.about .about_con { background: rgba(25, 25, 48, .5); padding: 2.05rem 2.2rem 2.35rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; margin-top: 1.6rem; margin-bottom: 1.8rem }
.about .about_con h3 { font-size: 1.3rem; color: #fff; line-height: 100%; font-weight: 400 }
.about .about_con p { font-size: 1rem; color: #fff; line-height: 1.65rem; margin-top: 1.5rem; opacity: .5 }
.about .about_con p a { color: #5E88FF }
.about ul { font-size: 0; line-height: 0; text-align: center }
.about ul li { display: inline-block; width: 8.2rem; height: 2.8rem; margin: 0 .6rem }
.about ul li a { width: 8.1rem; height: 2.7rem; display: block; border: 1px solid rgba(255, 255, 255, .4); font-size: 1.2rem; color: #fff; line-height: 2.7rem; border-radius: .2rem; -o-transition: all .3s ease; transition: all .3s ease }
.about ul li:hover a { border-color: #5E88FF; background: #5E88FF; color: #fff }

html { background: #fff }

@-webkit-keyframes fade {
  from { opacity: 1; display: block }
  to { opacity: 0; display: none; height: 0 }
}
@keyframes fade {
  from { opacity: 1; display: block }
  to { display: none; opacity: 0; height: 0 }
}
.fade { -webkit-animation-name: fade; animation-name: fade }
@media screen and (min-width:320px) {
  html { font-size: 8.533px }
}
@media screen and (min-width:360px) {
  html { font-size: 9.6px }
}
@media screen and (min-width:375px) {
  html { font-size: 10px }
}
@media screen and (min-width:393px) {
  html { font-size: 10.48px }
}
@media screen and (min-width:400px) {
  html { font-size: 10.664px }
}
@media screen and (min-width:414px) {
  html { font-size: 11.04px }
}
@media screen and (min-width:440px) {
  html { font-size: 11.73px }
}
@media screen and (min-width:480px) {
  html { font-size: 12.796px }
}
@media screen and (min-width:520px) {
  html { font-size: 13.863px }
}
@media screen and (min-width:560px) {
  html { font-size: 14.93px }
}
@media screen and (min-width:600px) {
  html { font-size: 15.996px }
}
@media screen and (min-width:640px) {
  html { font-size: 17.06px }
}
@media screen and (min-width:680px) {
  html { font-size: 18.1288px }
}
@media screen and (min-width:700px) {
  html { font-size: 18.66px }
}
@media screen and (min-width:720px) {
  html { font-size: 19.1952px }
}
@media screen and (min-width:750px) {
  html { font-size: 20px }
}