* { margin: 0px; padding: 0px; }
body {background: #f39f55 url(../images/bg.png) center top no-repeat;-webkit-text-size-adjust: none; font-family: "Microsoft YaHei", "PingFang SC",Arial, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}
html {min-width: 1200px;}
.wraper {width: 100%;margin: 0 auto;min-width: 1240px;}
.wrap {width: 1240px;margin: 0px auto;}
.fl {float: left; }
.fr {float: right; }
dl, dt, ul { list-style: none; text-decoration: none; padding-inline-start: 0px; }
a {text-decoration: none; color: #333;}
.clearfix::before, .clearfix::after { content: ""; display: table; clear: both; }
.un {transition: all 0.3s ease-out 0s; }
.none {display: none; }
.ellipsis {text-overflow: ellipsis;white-space: nowrap; overflow: hidden}

.top{padding-top: 14px;box-sizing: border-box;}
.menu{line-height: 60px;margin-left:210px;padding-right: 34px;}
.menu li{margin-left:30px;}
.menu a{font-size: 16px;color: #ff6122;-webkit-text-size-adjust:none;}
.menu a:hover{text-decoration: underline;}

.title{background: url(../images/title.png) center no-repeat;height: 458px;margin-top: 20px;padding: 314px 84px 0px 70px;box-sizing: border-box;line-height: 30px;font-size: 18px;color: #fff;text-indent: 2em;}

.grade{width: 100%;/* box-sizing: border-box; */position: relative;margin-bottom: 60px;}
.grade:last-child{margin-bottom: 0;}
/* 背景色块 */
.bg-box{width: 80%;height: 300px;border-radius: 80px;position: absolute;left: 41px;border: 2px solid #fff;}
.orangeBg{background: #ff6c14;}
.blueBg{background: #45a4f1;}
.purpleBg{background: #7f8efe;}
.grade .white{position: absolute;left: 8px;top: 3px;}
.grade .content{margin: 0px 20px 0;position: relative;/* top: 119px; */box-sizing: border-box;padding-top: 118px;}
.grade h1{margin-left: 23px;color: #fff;font-size: 32px;letter-spacing: 2px;margin-bottom: 35px;position: absolute;top: 16px;left: 70px;}
.grade h1 b{
    width: 7px;
    display: inline-block;
    height: 29px;
    background: #ffe41d;
    border-radius: 4px;
    position: relative;
    top: 5px;
    margin-right: 11px;
}
.grade .content ul{box-sizing: border-box;padding: 0 40px 20px;min-height: 300px;background: #fff;border-radius: 0 0 40px 40px;}
.grade .content ul li{width: 190px;height: 235px;float: left;margin-right: 40px;margin-bottom: 35px;}
.grade .content ul li:nth-child(5n){margin-right:0;}
/* 如果标题需要三行文字 ，需要改成padding-top: 44px;*/
.grade .content ul li a{width: 190px;height: 235px;display: block;position: relative;box-sizing: border-box;padding-top: 56px;text-align: center;}
.grade .content ul li .year{position: absolute;right: -8px;top: 17px;background: url(../images/year.png) center no-repeat;width: 82px;height: 26px;line-height: 24px;color: #fff;padding-left: 9px;box-sizing: border-box;font-size: 14px;}
/* 如果标题需要三行文字 ，需要改下面的height和clamp两个数值*/
.grade .content ul li h3{
    text-align: center;
    padding-left: 0px;
    color:#444444;
    font-size: 18px;
    line-height: 24px;
    height: 48px;/* 高度为clamp*行数 ，如果为三行 将数值改为72*/
    margin-bottom: 20px;/* 如果为三行 将数值改为8*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;/* 如果为三行 将数值改为3*/
    white-space: pre-wrap;
    padding: 0 10px;
    }
.orange ul li{background: url(../images/book.png) center no-repeat;}
.blue ul li{background: url(../images/book1.png) center no-repeat;}
.purple ul li{background: url(../images/book2.png) center no-repeat;}
.version{text-align: center;font-size: 14px;margin-block: 20px;background: url(../images/version.png) 10px center no-repeat;height: 23px;line-height: 23px;}
.orange .version{color: #d35602;}
.blue .version{color: #2371b1;}
.subject{font-size: 18px;color: #fff;text-align: center;display: inline-flex;min-width: 110px;max-width: 140px;height: 35px;justify-content: center;align-items: center;border-radius: 30px;border: 1px solid;}
.orange .subject{background: #fe7a49; border: 1px solid #ffb89e;box-shadow: 0px 5px 8px 0px #b9320082;}
.blue .subject{background: #45a4f1;border: 1px solid #95d0ff;box-shadow: 0px 5px 8px 0px #2473b27a;}
.purple .subject{background: #7f8efe;border: 1px solid #d9dcff;box-shadow: 0px 5px 8px 0px #2473b27a;}

.bot{padding: 20px 0; margin: auto; text-align: center; color: #fff; font-size: 14px;}

.subject:hover{
	transform: translateY(-2px);
}