@charset "utf-8";
/* CSS Document */

body{ width:100%; overflow:hidden; position:relative}
.bg{ background:url(../images/bg.jpg?t=2) top center no-repeat #e6feff; height:100vh; position:relative}
.bg:after{ width:100%; height:calc(100vh - 780px); position:absolute; z-index:1; left:0; bottom:0; background:#fff; content:''}

.links{ width:100%; padding:0 4%;position:absolute; bottom:95px;z-index:2; max-width:1600px; left:50%; transform:translateX(-50%)}
.links ul{ display:inline}
.links ul li{ float:left; width:49%; margin-right:2%; height:265px; background: #00ccff; padding:15px 40px 0 40px;transition: 0.3s ease-in-out}
.links ul li:last-child{ margin-right:0; background:#ee9759}
.links ul li strong{ float:left; width:100%; color:#fff; font-size:32px; margin-top:40px; margin-bottom:18px}
.links ul li span{ float:left; width:100%; color:#fff; font-size:16px; margin-bottom:25px}
.links ul li small{ float:left; padding:10px 25px; background:#fff; color:#00ccff; font-size:14px; border-radius:50px}
.links ul li:last-child small{color:#ee9759;}
.links ul li .l{ width:calc(100% - 180px); float:left}
.links ul li .r{ width:160px; float:right;transition: 0.3s ease-in-out}
.links ul li:hover .r{ width:180px;}
.links ul li:first-child:hover{ background:#07bae7}
.links ul li:last-child:hover{ background:#ec7e2f}

.font{ width:100%; padding:0 4%;position:absolute; top:280px;z-index:2; max-width:1600px; left:50%; transform:translateX(-50%)}
.font .h1{ width:100%; float:left; font-size:48px; padding-bottom:20px; color:#036d6d; font-weight:bold}
.font .h2{ width:100%; float:left; font-size:22px;color:#036d6d; font-weight:bold}