@charset "UTF-8";
body{ background-color: #f7f7f7;}
.grade-page{ width: 1200px; margin: 0 auto;}
.grade-page img{ width: 100%;}
.grade-top{ position: relative;}
.grade-top img{ vertical-align: top;}
.grade-top .grade-top-icon{ position: absolute; top: 45px; left: 150px; width: 200px; height: 200px;}
.grade-top .grade-top-icon.yu{ background: url(../../images/gradepage/yu.png) no-repeat;}
.grade-top .grade-top-icon.shang{ background: url(../../images/gradepage/shang.png) no-repeat;}
.grade-top .grade-top-icon.song{ background: url(../../images/gradepage/song.png) no-repeat;}
.grade-top .grade-top-icon.dian{ background: url(../../images/gradepage/dian.png) no-repeat;}
.grade-top .grade-top-icon.yue{ background: url(../../images/gradepage/yue.png) no-repeat;}
.grade-top .grade-top-tit{ position: absolute; top: 45px; left: 466px;}
.grade-top .grade-top-tit h1{ color: #fff; font-size: 60px; letter-spacing: 6px; text-align: center;}
.grade-top .grade-top-tit div{ height: 60px; line-height: 60px; text-align: center; color: #a05d00; font-size: 32px; border-radius: 40px 0 40px 0; background-color: #fff9af; margin-top: 5px; padding: 0 35px;}
.grade-top .grade-top-tit p{ font-size: 24px; color: #fff; line-height: 1; margin-top: 20px;}
.grade-main{position:relative;margin:0 0 110px;padding:0 20px 10px;font-family:"微软雅黑"!important;background:url(../../images/gradepage/bg-kuang.png) no-repeat;-webkit-background-size:100% 100%;-moz-background-size:100% 100%;-o-background-size:100% 100%;background-size:100% 100%;min-height:780px}
.grade-main:after{ position: absolute; bottom: 18px; right: 20px; content: ""; display: inline-block; width: 0; height: 0; border-bottom: 40px solid #f7f7f7; border-left: 40px solid transparent;}
.grade-main ul{ position: relative; margin: 0 0 9px; overflow: hidden; padding: 60px 20px 90px; background-color: #fff;}
.grade-main .grade-main-item{ float: left; padding: 0 10px; text-align: center;}
.grade-main .grade-main-item.red-item .grade-main-top{ background-color: #f45251;}
.grade-main .grade-main-item.red-item .grade-main-top:after{ border-top-color: #f45251;}
.grade-main .grade-main-item.red-item .grade-main-con:after{ background-image: url(../../images/gradepage/red.png);}
.grade-main .grade-main-item.org-item .grade-main-top{ background-color: #ffab00;}
.grade-main .grade-main-item.org-item .grade-main-top:after{ border-top-color: #ffab00;}
.grade-main .grade-main-item.org-item .grade-main-con:after{ background-image: url(../../images/gradepage/org.png);}
.grade-main .grade-main-item.green-item .grade-main-top{ background-color: #55c255;}
.grade-main .grade-main-item.green-item .grade-main-top:after{ border-top-color: #55c255;}
.grade-main .grade-main-item.green-item .grade-main-con:after{ background-image: url(../../images/gradepage/green.png);}
.grade-main .grade-main-item.blue-item .grade-main-top{ background-color: #34cbe6;}
.grade-main .grade-main-item.blue-item .grade-main-top:after{ border-top-color: #34cbe6;}
.grade-main .grade-main-item.blue-item .grade-main-con:after{ background-image: url(../../images/gradepage/blue.png);}
.grade-main .grade-main-top{ position: relative; width: 260px; height: 275px; background-color: #daad08; padding: 20px 0 0;}
.grade-main .grade-main-top:after{ position: absolute; left: 0; bottom: -130px; content: ""; display: inline-block; width: 0; height: 0; border-top: 130px solid #daad08; border-right: 130px solid transparent; border-left: 130px solid transparent;}
.grade-main .grade-main-top span{ display: inline-block; width: 108px; height: 108px; line-height: 108px; background: rgba(255, 255, 255, .2); color: #fff; font-size: 48px; border-radius: 108px;}
.grade-main .grade-main-top span em{ font-size: 24px; margin-left: 6px; vertical-align: 5px;}
.grade-main .grade-main-con{ position: relative; width: 200px; margin: -133px auto 0; padding: 20px; background-color: #fef8ef; box-sizing: content-box;}
.grade-main .grade-main-con h2{ font-size: 18px;}
.grade-main .grade-main-con h2 span{ position: relative; display: inline-block; vertical-align: top; padding: 5px 0; margin-bottom: 10px;}
.grade-main .grade-main-con h2 span:after{ content: ""; position: absolute; width: 85%; height: 1px; background-color: #666; bottom: 0; left: 0; right: 0; margin: auto;}
.grade-main .grade-main-con .grade-laud-item{ margin-bottom: 18px;}
.grade-main .grade-main-con .grade-laud-item i{ margin-left: 10px;}
.grade-main .grade-main-con .grade-laud-item i:first-child{ margin: 0;}
.grade-main .grade-main-con .grade-main-info{ text-align: left;}
.grade-main .grade-main-con .grade-main-info div{ font-weight: bold;}
.grade-main .grade-main-con .grade-main-info p{ color: #666; line-height: 26px; margin-bottom: 5px;}
.grade-main .grade-main-con .grade-main-info pre{ color: #666; white-space: pre-wrap;}
.grade-main .grade-main-con:after{ content: ""; position: absolute; bottom: -60px; left: 0; width: 240px; height: 120px; background: url(../../images/gradepage/arrow.png) no-repeat;}