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


/***********************************学习路径频道页***********************************/
.phpFootCodeIn a{ color:#656565; text-decoration: none;}
.phpFootCodeIn a:hover{ color: #ffffff;}
.phpMain1{ margin-top:0px;}
/**大图**/
.cgBigBox{ width: 100%; margin-top:91px;}
.cgBigImg{ width: 100%; height: 340px; background:url(./hhl-bg10.png) no-repeat center top; 
    background: image-set(url(./hhl-bg10.png) 1x, url(./hhl-bg10-2x.png) 2x)  no-repeat center top; 
    background: -webkit-image-set(url(./hhl-bg10.png) 1x, url(./hhl-bg10-2x.png) 2x) no-repeat center top;}
.cgBigBg{ width: 1380px; height: 154px; background: #FFFFFF; border-radius: 12px; margin: auto;  position: relative; margin-top:-80px;}
.cgBigList{ width: 1250px; margin: auto;}
.cgBigList li{ float: left; width:115px; text-align: center; margin: 30px 0px 0px 166px;}
.cgBigList li b{ display: block; width: 56px; height: 56px; background:url(./hhl-bg11.png) no-repeat; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat;  margin: auto;} 
.cgBigList li b.icon1{ background-position: 0px 0px;}
.cgBigList li b.icon2{ background-position:-65px 0px;}
.cgBigList li b.icon3{ background-position:-130px 0px;}
.cgBigList li b.icon4{ background-position:-195px 0px;}
.cgBigList li b.icon5{ background-position:-260px 0px;}
.cgBigList li p{ height: 20px; line-height: 20px; overflow: hidden; font-size: 16px; margin-top:15px; color: #303133;}
.cgBigList li:nth-child(5n+1){ margin-left:0px;}

/**前端路径**/
.xiQdljBox{ width: 1380px; margin: auto; margin-top:40px;}
.xiQdljTitle{ font-size: 26px; color: #303133;}
.xiQdljTitle p{ float: left;}
.xiQdljTitle em{width:4px; height: 4px; background: #303133; border-radius: 100px; margin: 18px 6px 0px 6px; float: left; display: block;}
.xiQdljTitle p span{ color: #FD4029;}
.xiQdljList{ width: 1380px;}
.xiQdljList li{ float: left; width: 680px; height: 192px; background: #FFFFFF; border-radius: 12px; margin: 20px 0px 0px 20px;}
.xiQdljList li span a img{ width: 152px; height: 152px; border-radius: 8px; margin:19px 0px 0px 20px; float: left;}
.xiQdljList li dl{ float: left; width:465px; margin: 20px 0px 0px 20px;}
.xiQdljList li dl dt a{ display: block; height: 24px; line-height: 24px; overflow: hidden; font-size:20px;}
.xiQdljList li dl dd.cont1{ height: 40px; line-height:20px; overflow: hidden; color: #969799; margin-top:12px;} 
.xiQdljList li dl dd.cont2{ margin-top:10px;}
.xiQdljList li dl dd.cont2 span{ display: block; float: left; width: 180px; height: 4px; position: relative; margin-top:12px;}
.xiQdljList li dl dd.cont2 span b{ display: block; background: #FCE7E0; width: 180px; height: 4px; border-radius: 1px;}
.xiQdljList li dl dd.cont2 span i{ display: block; background: #FD4029; width: 30%; height: 4px; border-radius: 1px; position:absolute; left: 0px; top: 0px;}
.xiQdljList li dl dd.cont2 p{ float: left; color: #646566; font-size: 12px; margin: 5px 0px 0px 15px;}
.xiQdljList li dl dd.cont2 p em{ color: #FD4029;}
.xiQdljList li dl dd.cont3{ margin-top:10px;}
.xiQdljList li dl dd.cont3 p{ float: left; color: #969799; margin-top:10px;}
.xiQdljList li dl dd.cont3 span{ display: block; float: left; color: #969799; margin: 10px 0px 0px 30px;}
.xiQdljList li dl dd.cont3 span b{ display: block; float: left; width: 12px; height: 14px; background:url(./hhl-bg11.png) no-repeat -340px 0px; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat -340px 0px; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat -340px 0px; margin: 2px 5px 0px 0px;}
.xiQdljList li dl dd.cont3 a{ display: block; width: 96px; height: 34px; background: #FD4029; border-radius: 100px; float: right; line-height: 34px; text-align: center; overflow: hidden; color: #ffffff; text-decoration: none;}
.xiQdljList li:nth-child(2n+1){ margin-left:0px;}
.xiQdljList li:hover{ box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.04);}

/**更多路径**/
.xiGdljBox{ width: 1380px; display: flex; align-items: center; justify-content: center; margin-top:50px; ;}
.xiGdljBox span{ display: block; width: 40px; height: 1px; background: #000000; opacity: 0.1;}
.xiGdljBox h2{ float: left; font-size: 14px; color: #969799; margin: 0px 20px 0px 20px;}




/***********************************免费学习路径详情***********************************/
/**大图**/
.xiQdgcBox{ width: 100%; margin-top:91px; background:url(./hhl-bg12.png) no-repeat center top; 
    background: image-set(url(./hhl-bg12.png) 1x, url(./hhl-bg12-2x.png) 2x)  no-repeat center top; 
    background: -webkit-image-set(url(./hhl-bg12.png) 1x, url(./hhl-bg12-2x.png) 2x) no-repeat center top; height: 351px;overflow: hidden;}
.xiQdgcIn{ width: 1200px; margin: auto;}
.xiSize{ height: 39px;/* border-bottom: 1px solid #35B923;*/ color: #ffffff; font-size: 16px; color: #ffffff;padding-top:50px; opacity: 0.7;}
.xiSize a{ color: #ffffff; text-decoration: none; opacity: 0.8;}
/*.xiSize a:hover{ text-decoration:underline;}*/
.xiQdgcMsg{ text-align: center; color: #ffffff; font-size: 60px; font-weight: bold; margin-top:15px;}
.xiZlqdBg{ width: 1380px; background: #FFFFFF; border-radius: 12px;  margin-top:30px; padding-top: 30px;}
.xiZlqdBox{ width:1310px; margin: auto; border-left: 1px solid #E6E7EB; padding-bottom: 35px;}
.xiZlqdTitle{ margin-left:-14px;}
.xiZlqdTitle em{ display: block; width: 20px; height: 20px; border: 3px solid #ffffff; float: left; margin-right: 10px;}
.xiZlqdTitle em b{ display: block; width: 20px; height: 20px; background: #FFFFFF; border: 4px solid #FD4029; box-sizing: border-box; border-radius: 100px;}
.xiZlqdTitle h2{ font-size: 20px; font-weight: bold; color: #1A1A1A;}
.xiZlqdList{ width: 1280px; margin-left:25px;}
.xiZlqdList li{ float: left; width: 290px; height: 255px; background: #FFFFFF; box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06); border-radius: 8px; margin: 25px 0px 0px 40px;}
.xiZlqdList li span a img{ width:290px; height: 140px; border-radius: 8px 8px 0px 0px;} 
.xiZlqdList li dl{ width: 260px; margin: auto;}
.xiZlqdList li dl dt{ height: 50px; overflow: hidden; margin-top:18px;}
.xiZlqdList li dl dt span{ display: block; float: left; height: 22px; padding:0px 7px; font-size: 13px; line-height: 22px; border-radius: 2px; margin:0px 7px 0px 0px;}
.xiZlqdList li dl dt span.bg1{ background: #E0E8FC; color: #298AFD;}
.xiZlqdList li dl dt span.bg2{ background: #FCE7E0; color: #FD4029;}
.xiZlqdList li dl dt span.bg3{ background: #FCF3E0; color: #FB6401;}
.xiZlqdList li dl dt a{ font-size: 16px; line-height: 25px;}
.xiZlqdList li dl dd{ margin-top:13px;}
.xiZlqdList li dl dd p{ float: left; width: 165px; height: 17px; line-height: 17px; overflow: hidden; font-size: 13px; color: #B7B7B7;}
.xiZlqdList li dl dd span a{ display: block; float: right; display:flex; justify-content: flex-end; color: #B7B7B7; font-size: 13px; cursor:pointer; text-decoration: none;} 
.xiZlqdList li dl dd span a b{ display: block; float: left; background:url(./hhl-bg11.png) no-repeat; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat; width: 12px; height: 12px; margin: 3px 5px 0px 0px;} 
.xiZlqdList li dl dd span a b.icon1{ background-position: -360px 0px;}
.xiZlqdList li dl dd span a b.icon2{ background-position: -380px 0px;}
.xiZlqdList li:nth-child(4n+1){ margin-left:0px;}
.xiZlqdBox:last-child{ border-left: none;}




/***********************************付费学习路径介绍***********************************/
/**大图**/
.xiRhqdBox{ width: 100%;}
.xiRhqdBg{ width: 100%; height: 440px; background:url(./hhl-bg13.png) no-repeat center top; 
        background: image-set(url(./hhl-bg13.png) 1x, url(./hhl-bg13-2x.png) 2x)  no-repeat center top; 
        background: -webkit-image-set(url(./hhl-bg13.png) 1x, url(./hhl-bg13-2x.png) 2x) no-repeat center top;overflow: hidden;}
.xiRhqdCont{ width: 1200px; margin: auto;}
/*.xiRhqdCont .xiSize{ border-bottom: 1px solid #1F29DE;}*/
.xiRhqdCont h1{ font-size: 60px; font-weight: 500; color: #ffffff; text-align: center; margin-top:30px;}
.xiRhqdCont p{ max-width: 800px;text-align: center; font-size: 18px; color: #d3d3d3; line-height:40px;margin: 0 auto; margin-top:25px;}
.xiXxbzBox{ width: 1380px; height: 123px; background: #FFFFFF; border-radius: 12px; margin:auto; position: relative; margin-top:-40px;}
.xiXxbzList{ float: left; width: 565px; margin:6px 0px 0px 40px;} 
.xiXxbzList li{ float:left; width: 100px; text-align: center; margin: 20px 0px 0px 55px;}
.xiXxbzList li span{ font-size: 16px; color: #FD4029; display: inline-block; height: 40px; line-height: 40px; overflow: hidden;}
.xiXxbzList li span em{ font-size: 32px; font-weight: bold; font-family: "Arial"; color: #FF0000;} 
.xiXxbzList li p{ font-size: 16px; color: #303133; font-weight: bold; margin-top:5px; height: 20px; line-height: 20px; overflow: hidden;}
.xiXxbzList li:nth-child(4n+1){ margin-left:0px;}
.xiYhjBox{ float: left; width:200px; margin:30px 0px 0px 60px;}
.xiYhjBox p{ color: #303133; text-align: right; height: 28px; overflow: hidden; line-height: 28px;}
.xiYhjBox p span{ font-size: 24px; font-weight: bold; color: #FD4029;}
.xiYhjBox em{ display: block; display: flex; justify-content: flex-end; height: 24px; line-height: 24px; overflow: hidden; margin-top:15px;}
.xiYhjBox em i{ display: block; float: left; font-style: normal; color: #969799; text-decoration: line-through;}
.xiYhjBox em b{ display: block; height: 24px; border-radius: 3px; border: 1px solid #FD4029; box-sizing: border-box; font-weight: normal; font-size: 12px; color: #FD4029; line-height: 24px; margin-left:20px; padding: 0px 6px;}
.xiYhjSubmit{ float: right; margin: 40px 40px 0px 0px;}
.xiYhjSubmit a{ display: block; float: left; margin: 0px 0px 0px 15px;}
.xiYhjSubmit a.bg1{ width: 128px;  height: 47px;  background: #FEF6F6;  border-radius: 27px; line-height: 47px; overflow: hidden; text-align: center; font-size: 18px; font-weight: bold; text-decoration: none; color: #FD4029;}
.xiYhjSubmit a.bg2{ width: 128px;  height: 47px;  background: #FD4029;  border-radius: 27px; line-height: 47px; overflow: hidden; text-align: center; font-size: 18px; font-weight: bold; text-decoration: none; color: #ffffff;}

/**学习路线**/
.xiXxlxBox{ width: 1380px; margin: auto;}
/**左边**/
.xiXxlxLeft{ float: left; width: 892px; background: #FFFFFF; border-radius: 12px; padding-bottom:30px; margin-top:30px;}
.xiXxljTitle{ width: 830px; margin: auto; font-size:24px; font-weight: bold; color: #1A1A1A; margin-top:25px; margin-bottom:50px;}
.xiXxljBox{ width: 810px; margin: auto; position: relative;}
.xiXxljName{ width: 823px; position:absolute; left: -13px; top: -25px;}
.xiXxljName b{ width: 20px; height: 20px; display: block; border: 3px solid #ffffff; border-radius: 100px; float: left; margin-top:10px;}
.xiXxljName b i{ display: block; width: 20px; height: 20px; background: #FFFFFF; border: 4px solid #FD4029; border-radius: 100px; box-sizing: border-box;}
.xiXxljNameIn{ float: right; width: 785px; height: 50px; background: #F7F8FA; border-radius: 100px; line-height: 50px; overflow: hidden;}
.xiXxljNameIn h2{ float: left; font-size: 18px; font-weight: 500; color: #1A1A1A; margin-left:20px;}
.xiXxljNameIn span{ display: block; float: left; margin-left:15px; color: #969799;}
.xiXxljNameIn em{ display: block; float: right; color: #969799; margin-right: 20px;}
.xiXxljIn{ width: 810px; border-left: 1px solid #E6E7EB; padding-top:25px; padding-bottom: 50px;}
.xiXxljBox:last-child .xiXxljIn{ border-left:none; padding-bottom: 0px;}
.xiXxljMsg{ width:765px; margin: 20px 0px 0px 25px; font-size: 15px; color: #646566; line-height:25px;}
.xiXxljList{ width: 785px; margin: 0px 0px 0px 25px;}
.xiXxljList li{ margin-top:25px;}
.xiXxljCont{ width: 765px;}
.xiXxljImg{ float: left; width: 245px; height: 140px; position: relative;}
.xiXxljImg a{ display: block;}
.xiXxljImg a img{ width: 245px; height: 140px; border-radius: 8px;}
.xiXxljImg a span{ display: block; width: 29px; height: 17px; background:url(./hhl-bg11.png) no-repeat -345px -25px;
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat -345px -25px; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat -345px -25px; position:absolute; right: 4px; top: 8px; font-size: 12px; color: #ffffff; text-align: center;border-radius: 2px;}
.xiXxljImgXx{color:#666!important;background: #eee!important;padding:1px 3px;}
.xiXxljRu{ float: right; width: 500px; margin-top:5px;}
.xiXxljRu dl dt p a{ display: block; float: left; max-width: 340px; height: 26px; line-height: 26px; overflow: hidden; font-size: 18px; font-weight: bold;}
.xiXxljRu dl dt em a{ display: block; float: left; width: 66px; height: 26px; border-radius: 100px; border: 1px solid #FD4029; line-height: 26px; text-align: center; color: #FD4029; text-decoration:none; font-weight: bold; margin-left:20px; box-sizing: border-box; overflow: hidden;} 
.xiXxljRu dl dt span{ display: block; float: right; color: #969799; width: 90px; height: 26px; line-height: 26px; overflow: hidden; display: flex; justify-content: flex-end;}
.xiXxljRu dl dt span b{ display: block; float: left; width: 12px; height: 12px; background:url(./hhl-bg11.png) no-repeat 0px -70px; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat 0 -70px; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat 0 -70px; margin: 7px 5px 0px 0px;}
.xiXxljRu dl dd.cont1{ height: 40px; line-height: 20px; color: #888; overflow: hidden; margin-top:13px;} 
.xiXxljRu dl dd.cont2{ margin-top:30px;}
.xiXxljRu dl dd.cont2 i{ float: left; width: 355px; height: 26px; line-height: 26px; overflow: hidden; display: block;}
.xiXxljRu dl dd.cont2 i em{ display: block; float: left; height: 26px; background: #F7F8FA; border-radius: 4px; padding: 0px 10px; margin-right: 10px; color: #969799;}
.xiXxljRu dl dd.cont2 a{ display: block; float: right; text-decoration:none; width: 110px; height:18px; line-height: 18px; overflow: hidden; margin-top:5px;} 
.xiXxljRu dl dd.cont2 a span{ color: #FD4029; display: block; float: left;}
.xiXxljRu dl dd.cont2 a b{ display: block; float: left; width: 12px; height: 7px; background:url(./hhl-bg11.png) no-repeat; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat; margin: 6px 0px 0px 4px;}
.xiXxljRu dl dd.cont2 a b.icon1{ background-position: -20px -70px;}
.xiXxljRu dl dd.cont2 a b.icon2{ background-position: -40px -70px;}
.xiXxljDa{ width: 785px; margin-top:10px;} 
.xiXxljSan{ width: 0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #F7F8FA; margin-left:700px;}
.xiXxljSanBg{ width:785px; background: #F7F8FA; border-radius: 12px;}
.xiXxljDi{ width:745px; margin: auto; border-bottom: 1px solid #E5E6E8; padding-bottom: 20px; padding-top:20px;}
.xiXxljDiTitle{ width: 745px;}
.xiXxljDiTitle p a{ display: block; float: left; width: 640px; height: 23px; line-height: 20px; overflow: hidden; font-size: 16px; font-weight: bold;}
.xiXxljDiTitle span a{ display: block; float: right; width: 50px; height: 20px; line-height:20px; overflow: hidden; text-decoration: none; display: flex; justify-content: flex-end;}
.xiXxljDiTitle span a em{ color: #969799; text-decoration: none; display: block; float: left;}
.xiXxljDiTitle span a b{ display: block; float: left; width:12px; height: 7px; background:url(./hhl-bg11.png) no-repeat; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat; margin: 7px 0px 0px 5px;}
.xiXxljDiTitle span a b.icon1{ background-position: -60px -70px;}
.xiXxljDiTitle span a b.icon2{ background-position: -80px -70px;}
.xiXxljDiTitle span a:hover em{ color: #FD4029;}
.xiXxljDiTitle span a:hover b.icon1{ background-position: -20px -70px;}
.xiXxljDiTitle span a:hover b.icon2{ background-position: -40px -70px;}
.xiXxljDiNameIn{ width: 745px;}
.xiXxljDiName{ margin-top:20px;}
.xiXxljDiName p a{ display: block; float: left; width: 640px; height: 18px; line-height: 18px; overflow: hidden;}
.xiXxljDiName span a{ display: block; float: right; width:50px; height: 18px; line-height: 18px; overflow: hidden; text-align:right; font-size: 12px; text-decoration: none; color: #FD4029;}
.xiXxljDiName em a{ display: block; float: right; width: 12px; height: 14px; background:url(./hhl-bg11.png) no-repeat -100px -70px; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat -100px -70px; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat -100px -70px;}
.xiXxljDi:last-child{ border-bottom: none;}
 
/**右边**/
.xiXxlxRight{ float: right; width: 460px;}
.xiGjqdBox{ width: 460px; background: #FFFFFF; border-radius: 12px; padding-bottom: 20px; margin-top:30px;}
.xiGjqdList{ width: 408px; margin: auto; padding-top:20px;}
.xiGjqdList li{ width: 408px; height: 53px;}
.xiGjqdList li a{ display: block; width:408px; height: 53px; text-decoration:none; }
.xiGjqdList li a p{ float: left; width: 160px; height: 53px; line-height: 53px; overflow: hidden; margin: 0px 0px 0px 10px; font-size: 16px; color: #303133;}
.xiGjqdList li a span{ display: block; float: right; width: 40px; height: 53px; line-height: 53px; overflow: hidden; margin: 0px 10px 0px 0px; text-align:right; color: #969799;}
.xiGjqdList li a.hover{ background: #FEF6F6; border-radius: 6px;}
.xiGjqdList li a.hover p{ color: #FD4029;}
.xiGjqdList li a.hover span{ color: #FD4029;}
.xiGjqdList li a:hover p{ color: #FD4029;}
.xiGjqdList li a:hover span{ color: #FD4029;}
.xiQtlxBox{ width: 460px; margin-top:30px;}
.xiQtlxBox h2{ font-size: 24px; font-weight: bold; color: #1A1A1A;}
.xiQtlxList{ width: 460px;}
.xiQtlxList li{ width: 460px; height: 140px; background: #FFFFFF; border-radius: 10px; margin-top:20px;}
.xiQtlxIn{ width: 435px; margin: auto;}
.xiQtlxIn span a img{ float: left; width: 76px; height: 76px; border-radius: 4px; margin-top:15px;}
.xiQtlxIn dl{ float: right; width: 345px; margin-top:20px;}
.xiQtlxIn dl dt a{ display: block; height: 18px; line-height: 18px; overflow: hidden; font-weight: bold;}
.xiQtlxIn dl dd{ height: 35px; line-height: 18px; overflow: hidden; font-size:12px; color: #969799; margin-top:10px;}
.xiQtlxCont{ width: 255px; margin: auto; margin-top:15px; height: 16px; line-height: 16px; overflow: hidden;}
.xiQtlxCont p{ float: left; color: #969799; font-size: 12px;}
.xiQtlxCont span{ display: block; float: right; font-size: 12px; color: #969799;}
.xiQtlxCont span b{ display: block; float: left; width: 12px; height: 14px; background:url(./hhl-bg11.png) no-repeat -340px 0px; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat -340px 0px; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat -340px 0px; margin: 0px 5px 0px 0px;}

/**核心实战项目**/
.xiHxszBg{ width: 100%; background: #ffffff; padding-bottom: 70px; margin-top:80px;position: relative;} 
.xiHxszBox{ width: 1380px; margin: auto;}
.xiHxszTitle{ padding-top:80px;}
.xiHxszTitle p{ text-align: center; font-size: 48px; color: #FEF6F6; font-family:"微软雅黑"; font-weight: bold;}
.xiHxszTitle span{ display: block; display: flex; justify-content: center; align-items: center; position: relative; margin-top:-68px;}
.xiHxszTitle span b{ display: block; float:left; width:16px; height: 25px; background:url(./hhl-bg11.png) no-repeat; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat; float: left;} 
.xiHxszTitle span b.icon1{ background-position: -120px -70px;}
.xiHxszTitle span b.icon2{ background-position: -150px -70px;}
.xiHxszTitle span h2{ float: left; font-size:40px; font-weight:bold; color: #303133; margin:0px 15px 0px 15px;} 
.xiHxszIn{ width:1380px;}
.xiHxszSwiper{ width: 1380px;}
.xiHxszSwiper .swiper-wrapper{ width: 1380px; height:650px;}
.xiHxszSwiper .swiper-wrapper .swiper-slide{ width: 1380px;}
.xiHxszName{ width: 1380px; height: 64px; background: #FEF6F6; border-radius: 100px; font-size: 24px; line-height: 64px; overflow: hidden; color: #FD4029; text-align: center; margin-top:40px;} 
.xiHxszLeft{ float:left; width: 385px; margin:0px 0px 0px 30px;}
.xiHxszLeft dl{ margin-top:30px;}
.xiHxszLeft dl dt{ font-size: 20px; font-weight: bold; color: #FD4029;}
.xiHxszLeft dl dt b{ display: block; float:left; width:23px; height: 22px; background:url(./hhl-bg11.png) no-repeat; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat; margin: 3px 10px 0px 0px;}
.xiHxszLeft dl dt b.icon1{ background-position: -180px -70px;}
.xiHxszLeft dl dt b.icon2{ background-position: -210px -70px;}
.xiHxszLeft dl dd{ margin-top:15px;}
.xiHxszLeft dl dd b{ display: block; float: left; width: 12px;  height: 12px;  background: #FD4029; border: 3px solid #FEF6F6; border-radius: 100px; box-sizing: border-box; margin:3px 0px 0px 5px;}
.xiHxszLeft dl dd p{ float: right; width: 355px; height: 40px; line-height: 20px; overflow: hidden;}
.xiHxszRight{ float: right; margin: 50px 0px 0px 0px; width: 707px;}
.xiHxszRight img{ width: 707px; height: 409px;}

/**陪伴式学习服务，保证你的学习效果**/
.xiPbsxBox{ width: 1380px; margin: auto;} 
.xiHxszTitle1 p{ color:#FFECEC;}
.xiPbsxList{ width: 1380px; margin: auto;}
.xiPbsxList li{ float: left; width: 440px; height: 236px; background: #FFFFFF; border-radius: 12px; margin: 50px 0px 0px 30px;}
.xiPbsxList li:nth-child(3n+1){ margin-left:0px;}
.xiPbsxList li span{ display: block; width: 88px; height: 88px;margin:20px 0px 0px 125px;}
.xiPbsxList li span.bg1{ background:url(./img/dingzhi.png) no-repeat;background: image-set(url(./img/dingzhi.png) 1x, url(./img/dingzhi@2x.png) 2x)  no-repeat;background: -webkit-image-set(url(./img/dingzhi.png) 1x, url(./img/dingzhi@2x.png) 2x) no-repeat;}
.xiPbsxList li span.bg2{background:url(./img/luxian.png) no-repeat;background: image-set(url(./img/luxian.png) 1x, url(./img/luxian@2x.png) 2x)  no-repeat;background: -webkit-image-set(url(./img/luxian.png) 1x, url(./img/luxian@2x.png) 2x) no-repeat;}
.xiPbsxList li span.bg3{background:url(./img/chuangguan.png) no-repeat;background: image-set(url(./img/chuangguan.png) 1x, url(./img/chuangguan@2x.png) 2x)  no-repeat;background: -webkit-image-set(url(./img/chuangguan.png) 1x, url(./img/chuangguan@2x.png) 2x) no-repeat;}
.xiPbsxList li span.bg4{background:url(./img/cuicu.png) no-repeat;background: image-set(url(./img/cuicu.png) 1x, url(./img/cuicu@2x.png) 2x)  no-repeat;background: -webkit-image-set(url(./img/cuicu.png) 1x, url(./img/cuicu@2x.png) 2x) no-repeat;}
.xiPbsxList li span.bg5{background:url(./img/dayi.png) no-repeat;background: image-set(url(./img/dayi.png) 1x, url(./img/dayi@2x.png) 2x)  no-repeat;background: -webkit-image-set(url(./img/dayi.png) 1x, url(./img/dayi@2x.png) 2x) no-repeat;}
.xiPbsxList li span.bg6{background:url(./img/biye.png) no-repeat;background: image-set(url(./img/biye.png) 1x, url(./img/biye@2x.png) 2x)  no-repeat;background: -webkit-image-set(url(./img/biye.png) 1x, url(./img/biye@2x.png) 2x) no-repeat;}
.xiPbsxList li dl{ width: 410px; margin: auto; margin-top:18px; }
.xiPbsxList li dl dt{ font-size: 20px; font-weight: bold; color: #1A1A1A; text-align: center;}
.xiPbsxList li dl dd{line-height: 22px; color: #565656; text-align: center; margin-top:12px;}

/**核心讲师团**/
.xiHxtdBg{ width: 100%; background: #FFFFFF; padding-bottom: 60px; margin-top:90px;}
.xiHxtdBox{ width: 1380px; margin: auto;}
.xiHxtdMenu{ width:1080px; margin:auto; margin-top:60px;}
.xiHxtdMenu li{ float: left; width: 205px; margin: 0px 0px 0px 71px; cursor:pointer;}
.xiHxtdMenu li span img{ display: block; width: 88px; height: 88px; border-radius: 100px; border:4px solid #ffffff; margin: 0px 0px 0px 33px;}
.xiHxtdMenu li dl{ margin-top:15px; text-align: center;}
.xiHxtdMenu li dl dt{ font-size: 18px; color: #303133; height: 22px; line-height: 22px; overflow: hidden; margin-bottom: 15px;}
.xiHxtdMenu li dl dd{ font-size: 18px; color: #646566; height: 22px; line-height: 22px; overflow: hidden; margin-top:10px;}
.xiHxtdMenu li:nth-child(4n+1){ margin-left:30px;}
.xiHxtdMenu li.current span img{ box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.24);}
.xiHxtdMenu li.current dl dt{ font-weight: bold;}
.xiHxtdMenu li.current dl dd{ font-weight: bold; color: #FD4029;}
.xiHxtdIn{ width: 1334px; background: #FFFFFF; box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.06); border-radius: 12px; padding-bottom: 20px; padding-top: 10px; margin-top:50px;}
.xiHxtdIn p{ width:1274px; margin: auto; font-size: 18px; color: #5e5e5e; line-height: 30px; margin-top:10px;}
.xiHxtdIn p span{ color: #FD4029;}

/**帮助与常见问题反馈**/
.xiBzcjBg{ width: 100%; background: #FFFFFF; padding-bottom: 60px;}
.xiBzcjBox{ width: 1380px; margin: auto;}
.xiBzcjBox h2{ font-size: 24px; font-weight: bold; color: #1A1A1A; padding-top:90px; padding-bottom: 10px;}
.xiBzcjBox dl{ border-bottom: 1px solid #E5E5E5; padding-bottom: 30px; margin-top:30px;}
.xiBzcjBox dl dt{ font-size: 17px; font-weight: bold; color: #1A1A1A;}
.xiBzcjBox dl dd{ line-height: 22px; color: #646566; font-size: 15px; margin-top:15px;}

/**侧导航**/
.xiCdhBox{ width:64px; background: #ffffff; box-shadow: -4px 4px 6px 4px rgba(0, 0, 0, 0.03); border-radius: 6px 0px 0px 12px; position:absolute; right:0px; top:40%; position:fixed; z-index:99; }
.xiCdhList{ width: 48px; margin: auto;}
.xiCdhList li{ width: 48px; height: 85px; border-top: 2px solid #EBEBEB;position: relative;}
.xiCdhList li .xiCdhListImages{display: none;box-shadow: 0px 2px 15px 0px rgb(0 0 0 / 6%);background: #ffffff;border-radius: 6px;position: absolute;top: 0;left: -130px;padding: 13px;}
.xiCdhList li .xiCdhListImages p{font-size: 12px;font-weight: 400;color: #999999;line-height: 12px;text-align: center;padding-top: 10px;}
.xiCdhList li a{ display: block; width: 48px; height: 85px; text-decoration: none;}
.xiCdhList li a b{ display: block; width: 28px; height: 28px; background:url(./hhl-bg11.png) no-repeat; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat; margin: 20px 0px 0px 10px;}
.xiCdhList li a b.icon1{ background-position: -200px -210px;}
.xiCdhList li a b.icon2{  background:url(./weixin.png) no-repeat; 
    background: image-set(url(./weixin.png) 1x, url(./weixin@2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./weixin.png) 1x, url(./weixin@2x.png) 2x) no-repeat;background-position: center;}
.xiCdhList li a b.icon4{  background:url(./qq.png) no-repeat; 
    background: image-set(url(./qq.png) 1x, url(./qq@2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./qq.png) 1x, url(./qq@2x.png) 2x) no-repeat;background-position: center;}    
.xiCdhList li a b.icon3{ background-position: -280px -210px;}
.xiCdhList li a p{ font-size: 12px; color: #646566; margin-top:8px;}
.xiCdhList li a:hover b.icon1{ background-position: -200px -250px;}
.xiCdhList li a:hover b.icon2{ background:url(./weixinhover.png) no-repeat; 
    background: image-set(url(./weixinhover.png) 1x, url(./weixinhover@2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./weixinhover.png) 1x, url(./weixinhover@2x.png) 2x) no-repeat;background-position: center;}
.xiCdhList li a:hover b.icon4{ background:url(./qqhover.png) no-repeat; 
    background: image-set(url(./qqhover.png) 1x, url(./qqhover@2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./qqhover.png) 1x, url(./qqhover@2x.png) 2x) no-repeat;background-position: center;}
.xiCdhList li a:hover b.icon3{ background-position: -280px -250px;}
.xiCdhList li a:hover p{ color: #FD4029;}
.xiFanhui{ display: none;}
.xiCdhList li:first-child{ border-top:none;}
.xiCdhList li:hover > .xiCdhListImages{display: block;}

/**全导航**/
.xiQzdhBg{ width: 100%; height: 123px; background: #FFFFFF; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.12); position: absolute; left: 0px; top: 0px; position:fixed; z-index: 100;}
.xiQzdhBg .xiXxbzBox{ margin-top:0px; background: none; height: auto;}




/***********************************付费学习路径详情***********************************/
/**大图**/
.xiVueBg{ width: 100%;  margin-top:91px;}
.xiVueImg{ width: 100%; height: 350px; background:url(./hhl-bg13.png) no-repeat center top; 
        background: image-set(url(./hhl-bg13.png) 1x, url(./hhl-bg13-2x.png) 2x)  no-repeat center top; 
        background: -webkit-image-set(url(./hhl-bg13.png) 1x, url(./hhl-bg13-2x.png) 2x) no-repeat center top;}
.xiVueBox{ width: 1200px; margin: auto;}
/*.xiVueBox .xiSize{ border-bottom: 1px solid #1F29DE;}*/
.xiVueBox h1{ font-weight: 500; color: #ffffff; font-size: 60px; text-align: center; margin-top:40px;position: relative;}
.xiVueBox .xiTopTimes{color:#dedede;text-align: center;font-weight: 500;font-size:21px;margin-top:20px;display: flex;justify-content:center;align-items:center;}
.xiVueBox .xiTopTimes .xiTopDay{font-size:26px;padding:0 5px;font-weight: bold}
.xiVueBox .xiTopTimes img{padding-right:10px;}
.xiVueIn{width: 1200px;height:123px;background:#FFFFFF;border-radius: 12px;margin:auto;position:relative;margin-top:-30px;z-index:1000;}
.xiVueSelect{ float: left; margin: 45px 0px 0px 40px;z-index: 1000;}
.xiVueTitle{ float: left; font-size: 16px; font-weight: bold; color: #303133; margin-top:6px;}
.xiVueCont{ float: left; position: relative; margin: 0px 0px 0px 15px;}
.xiVueName{ float: left; width: 124px; height: 32px; border-radius: 4px; border: 1px solid #C8CACC; box-sizing: border-box;}
.xiVueName h2{ float: left; width: 85px; height: 32px; line-height: 32px; overflow: hidden; margin-left:10px; font-size: 12px; color: #646566;}
.xiVueName span{ display: block; float: right; width: 8px; height: 5px; background:url(./hhl-bg11.png) no-repeat -330px -220px; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat -330px -220px; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat -330px -220px; margin: 12px 10px 0px 0px;}
.xiVueSub{ width: 124px; background: #ffffff; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.06); border-radius: 4px; position:absolute; left: 0px; top: 40px;}
.xiVueSub a{ display: block; height: 32px; line-height: 32px; overflow: hidden; font-size: 12px; color: #646566; padding-left:10px; text-decoration: none; width: 114px;} 
.xiVueSub a:hover{ background: #FFEAEA; color: #FD4029;}
.xiVueSub a:first-child{ border-radius:4px 4px 0px 0px;}
.xiVueSub a:last-child{ border-radius: 0px 0px 4px 4px;}
.xiVueName1{ background: #E6E7EB;}
.xiVueList{ float: left;}
.xiVueList li{ float: left; width: 90px; text-align: center; margin: 30px 0px 0px 80px;}
.xiVueList li b{ display:inline-block; width: 30px; height: 28px; background:url(./hhl-bg11.png) no-repeat -330px -240px; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat -330px -240px; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat -330px -240px; margin-bottom: 2px;}
.xiVueList li span{ display: block; height: 34px; line-height: 34px; overflow: hidden; font-size: 30px; font-weight: bold; color: #FF0000; font-family: Arial-BoldMT, Arial;}
.xiVueList li p{ font-size: 16px; font-weight: bold; color: #303133; margin-top:7px;}
.xiVueList li:first-child{ margin-left:60px;}
.xiVueSubmit{ float: left; margin: 40px 0px 0px 55px;}
.xiVueSubmit a{ display: block; width: 128px; height: 47px; background: #FD4029; border-radius: 27px; line-height: 47px; overflow: hidden; text-align: center; color: #ffffff; text-decoration:none; font-size: 18px; font-weight: bold;} 
.xiVueList li a{ display: block; text-decoration: none;}
.xiVueList li a:hover p{ color: #FF0000;}

/**步骤**/
.xiStepBox{ width: 1200px; background: #ffffff; padding-bottom: 30px; margin-top:30px; border-radius: 12px; overflow: hidden;} 
.xiStepIn{ width: 1200px;}
.vipJingpTitle{ width: 1200px;}
.vipJingpSwiper{ width: 1200px; overflow: hidden; position: relative;}
.vipJingpSwiper .swiper-wrapper{ width: 1200px;}
.vipJingpSwiper .swiper-wrapper .swiper-slide{ width: 294px !important;}
.vipJingpSwiper .swiper-wrapper .swiper-slide a{ display: block; width: 294px; text-decoration:none;}
.vipJingpSwiper .swiper-wrapper .swiper-slide a span{ display: block; width:294px; height: 160px; background: #F3F3F3;}
.vipJingpSwiper .swiper-wrapper .swiper-slide a em{ display: block; width: 0; height: 0; border-right:12px solid transparent; border-left:12px solid transparent; border-top: 12px solid #ffffff; margin-left:135px;}
.vipJingpSwiper .swiper-wrapper .swiper-slide a span dl{ width: 230px; margin: auto; padding-top:25px;}
.vipJingpSwiper .swiper-wrapper .swiper-slide a span dl dt{ font-size: 20px; font-weight: bold; color: #303133; height: 60px; overflow: hidden; line-height: 30px;}
.vipJingpSwiper .swiper-wrapper .swiper-slide a span dl dd{ height: 20px; line-height: 20px; overflow: hidden; color: #303133; font-size: 16px; margin-top:20px;}
.vipJingpSwiper .swiper-wrapper .swiper-slide a.hover span{ background: #FD4029;}
.vipJingpSwiper .swiper-wrapper .swiper-slide a.hover em{  width: 0; height: 0; border-right:12px solid transparent; border-left:12px solid transparent; border-top: 12px solid #FD4029;}
.vipJingpSwiper .swiper-wrapper .swiper-slide a.hover span dl dt{ color: #ffffff;}
.vipJingpSwiper .swiper-wrapper .swiper-slide a.hover span dl dd{ color: #ffffff;}
.vipJingpSwiper .swiper-button-prev{ width: 24px; height: 50px; background:url(./hhl-bg11.png) no-repeat 0px -320px; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat 0px -320px; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat 0px -320px; left:0px; }
.vipJingpSwiper .swiper-button-next{ width: 24px; height: 50px; background:url(./hhl-bg11.png) no-repeat -40px -320px; 
        background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat -40px -320px; 
        background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat -40px -320px; right:0px;}
.vipJingpSwiper .swiper-button-prev:hover{ background-position: -80px -320px;}
.vipJingpSwiper .swiper-button-next:hover{ background-position: -120px -320px;}
.vipJingpCont{ width: 1200px;}
.xiHtmlList{ width: 1136px; margin: auto;}
.xiHtmlList li{ border-bottom: 1px solid #EEEEEE; padding-bottom: 30px; margin-top:20px;}
.xiHtmlIn{ width:1136px;}
.xiHtmlIcon1{ float: left; width: 43px; height: 43px; background:url(./hhl-bg11.png) no-repeat -160px -320px; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat -160px -320px; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat -160px -320px; float: left; margin-right: 20px;}
.xiHtmlBi{ float: left; width: 40px; height: 22px; background: linear-gradient(90deg, #FD4029 0%, #FE9223 100%); border-radius: 4px; font-size: 14px; color: #ffffff; line-height: 22px; overflow: hidden; text-align: center; font-weight: 600; margin-right: 12px; margin-top:12px;}
.xiHtmlXuan{float: left; width: 40px; height: 22px;background: linear-gradient(90deg, #9d9d9d 0%, #bfbebd 100%);border-radius: 4px; font-size: 14px; color: #ffffff; line-height: 22px; overflow: hidden; text-align: center; font-weight: 600; margin-right: 12px; margin-top:12px;}
.xiHtmlLink a{ display: block; float: left; width: 550px; height: 24px; line-height: 24px; overflow: hidden; font-size: 20px; font-weight: bold; margin-top:10px;} 
.xiHtmlMsg{ float: right; width: 240px; height: 18px; line-height: 18px; overflow: hidden; color: #303133; text-align: right; margin-top:15px; margin-right:60px;} 
.xiHtmlMsg span{ color: #C8CACC;}
.xiHtmlChuang a{ display: block; float:right; text-decoration: none; margin-top:15px;}
.xiHtmlChuang a span{ display: block; float: left; color: #FD4029;} 
.xiHtmlChuang a b{ display: block; float: left; width: 12px; height: 7px; background:url(./hhl-bg11.png) no-repeat; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat; margin: 7px 0px 0px 5px;}
.xiHtmlChuang a b.icon1{ background-position: -20px -70px;}
.xiHtmlChuang a b.icon2{ background-position: -40px -70px;}
.xiHtmlDi{  width: 1136px;}
.xiHtmlDiIn{ width: 1136px; background: #F7F8FA; border-radius: 12px; padding-top: 20px; padding-bottom: 20px; margin-top:15px;}
.xiHtmlDiTitle{ width: 1100px; margin: auto;}
.xiHtmlDiIcon{ width: 35px; height: 35px; background:url(./hhl-bg11.png) no-repeat; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat; float: left; margin-right: 15px;}
.xiHtmlDiIcon1{ background-position: -220px -320px;}
.xiHtmlDiIcon2{ background-position: -270px -320px;}
.xiHtmlDiIcon3{ background-position: -320px -320px;}
.xiHtmlDiLink a{ display: block; float: left; width: 780px; height: 22px; line-height: 22px;font-size: 18px; /*font-weight: bold;overflow: hidden;*/ margin-top:8px;}
.xiHtmlDiZhan a{ display: block; float: right; text-decoration: none; margin-top:11px;}
.xiHtmlDiZhan a span{ display: block; float: left; color: #969799;}
.xiHtmlDiZhan a b{ display: block; float:left; width: 12px; height: 7px; background:url(./hhl-bg11.png) no-repeat; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat; margin: 7px 0px 0px 5px;}
.xiHtmlDiZhan a b.icon1{ background-position: -60px -70px;}
.xiHtmlDiZhan a b.icon2{ background-position: -80px -70px;}
.xiHtmlDiZhan a:hover span{ color: #FD4029;}
.xiHtmlDiZhan a:hover b.icon1{ background-position: -20px -70px;}
.xiHtmlDiZhan a:hover b.icon2{ background-position: -40px -70px;}
.xiHtmlDiCont{ width: 1090px; margin-top:25px; margin-left:35px;}
.xiHtmlWang{ border-left:2px solid #E6E7EB; padding-bottom: 20px;}
.xiHtmlWang i{ display: block; float: left; width: 20px; height: 20px; background:url(./hhl-bg11.png) no-repeat; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat; margin-left:-11px;}
.xiHtmlWang i.icon1{ background-position: -170px -370px;}
.xiHtmlWang i.icon2{ background-position: -200px -370px;}
.xiHtmlWang dl{ float: left; width:1053px; margin-left:20px;}
.xiHtmlWang dl dt a{ display: block; height: 20px; line-height: 20px; /*overflow: hidden;*/ font-size: 15px;cursor:pointer;}
.xiHtmlWang dl dd{ margin-top:15px;}
.xiHtmlWang dl dd p{ float:left; width: 500px; height: 18px; line-height: 18px; overflow: hidden; color: #646566; margin-top:5px;}
.xiHtmlWang dl dd span{ display: block; float: right; width: 220px; display: flex; justify-content: flex-end;}
.xiHtmlWang dl dd span a{ display: block; float: left; width: 66px; height: 26px; background: #FFFFFF; border-radius: 4px; text-decoration: none; line-height: 26px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #646566; margin-left:10px;}
.xiHtmlWang dl dd span a:first-child{ margin-left:0px;}
.xiHtmlWang dl dd span a em{ display: block; float: left;}
.xiHtmlWang dl dd span a.bg1{ background: #FCF3E0; color: #FB6401;}
.xiHtmlWang dl dd span a.bg1 b{ display: block; float: left; width: 10px; height: 7px; background:url(./hhl-bg11.png) no-repeat -230px -370px; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat -230px -370px; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat -230px -370px; margin-left:5px;}
.xiHtmlWang dl dd span a.bg2{ background: #E0E8FC; color: #298AFD;}
.xiHtmlWang dl dd span a.bg2 b{ display: block; float: left; width: 10px; height: 7px; background:url(./hhl-bg11.png) no-repeat -250px -370px; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat -250px -370px; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat -250px -370px; margin-left:5px;}
.xiHtmlWang dl dd span a.bg3{ background: #E1FCE0; color: #008A07;}
.xiHtmlWang dl dd span a.bg3 b{ display: block; float: left; width: 10px; height: 7px; background:url(./hhl-bg11.png) no-repeat -270px -370px; 
    background: image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x)  no-repeat -270px -370px; 
    background: -webkit-image-set(url(./hhl-bg11.png) 1x, url(./hhl-bg11-2x.png) 2x) no-repeat -270px -370px; margin-left:5px;}

.xiHtmlWang dl dd span a.bg4 b{display: block;float: left;width: 10px;height: 7px;background:url(./lock.png) no-repeat;margin-left:5px;}    
.xiHtmlWang:last-child{ border-left: none; padding-bottom: 0px;}
.xiHtmlIcon2{float:left;width: 43px;height: 43px;position:relative;margin-right:12px;line-height: 43px;text-align:center;overflow:hidden;font-weight:bold;color:#FD4029;}
.xiHtmlIcon2 span{ display: block; width:43px; height: 43px;}
.xiHtmlIcon2 span.icon1{ width: 43px; height: 43px; background:url(./hhl-bg14.png) no-repeat 0px 0px; 
    background: image-set(url(./hhl-bg14.png) 1x, url(./hhl-bg14-2x.png) 2x)  no-repeat 0px 0px; 
    background: -webkit-image-set(url(./hhl-bg14.png) 1x, url(./hhl-bg14-2x.png) 2x) no-repeat 0px 0px;}
.xiHtmlIcon2 span.icon2{ background:url(./hhl-bg14.png) no-repeat -50px 0px; 
    background: image-set(url(./hhl-bg14.png) 1x, url(./hhl-bg14-2x.png) 2x)  no-repeat -50px 0px; 
    background: -webkit-image-set(url(./hhl-bg14.png) 1x, url(./hhl-bg14-2x.png) 2x) no-repeat -50px 0px; position:absolute; left:0px; top: 0px;}

/**弹出框**/
.xiTckuBg{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); position:absolute; left: 0px; top: 0px; position:fixed; z-index: 100;}
.xiTckuBox{background: #FFFFFF;border-radius: 8px;/*width: 380px;position:absolute; left: 50%; top: 35%; margin-left:-190px; padding-bottom:20px;*/} 
.xiTckuTitle{ margin: auto; width: 340px; margin-top:20px;} 
.xiTckuTitle span{ display: block; width: 290px; text-align: center; color: #32C55D; float: left;}
.xiTckuTitle em{ display: block; float: right; width: 16px; height: 16px; background:url(./hhl-bg14.png) no-repeat -110px 0px; 
    background: image-set(url(./hhl-bg14.png) 1x, url(./hhl-bg14-2x.png) 2x)  no-repeat -110px 0px; 
    background: -webkit-image-set(url(./hhl-bg14.png) 1x, url(./hhl-bg14-2x.png) 2x) no-repeat -110px 0px; cursor: pointer;} 
.xiDanxBox{ width: 340px; margin: auto;}
.xiDanxMsg{ line-height: 22px; color: #1A1A1A; margin-top:15px;}
.xiDanxMsg span{ color: #32C55D;}
.xiDanxList{ width: 340px; margin: auto;}
.xiDanxList li{ margin-top:15px; background: #F5F5F5; border-radius: 4px; padding-bottom: 10px; padding-top: 10px; border: 1px solid #F5F5F5; box-sizing: border-box;display: flex;align-items:center;}
.xiDanxList li:hover{cursor: pointer;}
.xiDanxList li span{ display: block; line-height: 22px; width:310px; margin: auto; color: #1A1A1A;margin-left:10px;}
.xiDanxList li.hover{ background: rgba(50, 197, 93, 0.12); border: 1px solid rgba(50, 197, 93, 0.4);}
.xiDanxList li.hover span{ color: #32C55D;}
.xiDanxSubmit{display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content: center;align-content: center;}
.xiDanxSubmit a{display:block;height:42px;line-height:42px;background:#F5F5F5;border-radius:100px;margin:20px auto;text-decoration:none;overflow:hidden;text-align:center;color:#808080;}
.xiDanxSubmit a.xiDanxSubmiting{width: 340px;}
.xiDanxSubmit a.xiDanxSubmitLook{display:none;width: 100px;background:#fff;border:1px solid #c2c2c2;font-size:13px;box-sizing:border-box;}
.xiDanxSubmit a.xiDanxSubmitAgin{display:none;width: 340px;}
.xiDanxSubmit a.xiDanxSubmited{width:240px;}
.xiDanxSubmit1 .xiDanxSubmiting{background: #32C55D;color:#ffffff;}
.xiTianList{ width: 340px;}
.xiTianList li{ margin-top:15px; background: #F5F5F5; border-radius: 4px; border: 1px solid #F5F5F5; box-sizing: border-box; height: 44px;}
.xiTianList li span{ display: block; float: left; color: #1A1A1A; margin-left:12px; margin-top:12px;}
.xiTianList li input.text1{ border:none; background: none; width: 280px; float: left; margin:0px 0px 0px 15px; height: 44px; outline: none;}
.xiTianList li:hover,.xiTianList li.hover{ background: rgba(50, 197, 93, 0.12); border: 1px solid rgba(50, 197, 93, 0.4);}
.xiTianList li:hover span,.xiTianList li.hover span{ color: #32C55D;}
.xiTianList li:hover input.text1,.xiTianList li.hover input.text1{ color:#32C55D;}
.xiZheng{ width: 340px; margin: auto; text-align: center; font-size: 12px; color: #1A1A1A; margin-top:20px;}
.xiZheng span{ color: #32C55D;}
.xiZheng em{ color: #FF5A5B;}
.xiNddaBox{ width: 340px; margin: auto;}
.xiNddaBox dl{ margin-top:20px;}
.xiNddaBox dl dt{ font-size: 12px;} 
.xiNddaBox dl dt.color1{ color: #1A1A1A;}
.xiNddaBox dl dt.color2{ color: #32C55D;}
.xiNddaBox dl dd{ line-height: 22px; color: #1A1A1A; margin-top:10px;}
.xiNddaBox dl dd span{ color: #32C55D;}
.xiNddaBox dl dd em{ color: #FD4029;}

/**回答正确**/
.xiHdzqBox{ width: 144px; height: 148px; background: rgba(0, 0, 0, 0.7); border-radius: 12px; position:absolute; left: 50%; top: 50%; margin-left:-72px; z-index:101;}
.xiHdzqBox span{ display: block; width: 44px; height: 44px; background:url(./hhl-bg14.png) no-repeat; 
    background: image-set(url(./hhl-bg14.png) 1x, url(./hhl-bg14-2x.png) 2x)  no-repeat; 
    background: -webkit-image-set(url(./hhl-bg14.png) 1x, url(./hhl-bg14-2x.png) 2x) no-repeat; margin: 35px 0px 0px 50px;}
.xiHdzqBox span.icon1{ background-position: -150px 0px;}
.xiHdzqBox span.icon2{ background-position: -200px 0px;}
.xiHdzqBox p{ text-align: center; margin-top:15px; color: #ffffff;}

.layui-fixbar{display: none;}
.tryCourseBtn{border-radius: 100px;border: 1px solid #FD4029;line-height: 26px;text-align: center;color: #FD4029;margin-left:20px;box-sizing: border-box;overflow: hidden;font-size: 12px;padding: 0 10px;} 
.modelHodel{display: none;position: fixed;z-index: 999;background-color: rgb(0, 0, 0);opacity:0.5;top:0;left:0;width: 100%;height: 100%;pointer-events: none;}

.littleIcon2 {margin-left:16px;width:16px;height:16px;border:1px solid #969799;color:#ffffff;position: relative;display: flex;flex-direction: row;justify-content:space-around;}
.hover .littleIcon2::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0px;
    /* 这里显示矩形的一半边框再旋转45度来实现对勾样式 */
    width: 5px;
    height: 12px;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    transform: rotate(45deg);
}
.hover .littleIcon2{border:1px solid #32C55D!important;background: #32C55D!important;}


 /**高并发不得不学的三大理由**/
    .xiXxbzBox{box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.06);};
    .jpkKcshsTitle{display: block; width: 100%; text-align: center; padding-top:80px; clear: both;}
.jpkKcshsTitle h2{display: block;  width: 100%; text-align: center; font-size: 32px; font-weight:bold; color: #303133;}
.jpkKcshsTitle h2 span{ color: #3377FF;}
.jpkKcshsTitle p{ font-size: 18px;  width: 100%; text-align: center; color: #646566; margin-top:25px;}
.jpkGbfBox{ width: 100%; background: #fff; margin-top: -80px; padding-top: 120px;}
.jpkGbfIn{ width:1380px; margin: auto; padding-bottom: 50px;}
.jpkGbfList{ width: 1380px; margin-top:120px;}
.jpkGbfList li{ float: left; width: 419px; position: relative; margin: 0px 0px 0px 60px;}
.jpkGbfList li:nth-child(3n+1){ margin-left:0px;}
.jpkGbfTitle{ width: 387px; position:absolute; left:15px; top:-79px;}
.jpkGbfBg{ width: 387px; height: 79px; line-height: 79px; text-align: center; overflow: hidden; font-size: 24px; font-weight: bold; color: #ffffff; border-radius: 12px 12px 0px 0px;}
.jpkGbfBg1{ background: #5379E4; }
.jpkGbfBg2{ background: #FF9244; }
.jpkGbfBg3{ background: #1BC8B5; }
.jpkGbfIcon1{ width: 0; height: 0; border-right:14px solid transparent; border-left: 14px solid transparent; border-top: 14px solid #5379E4; margin-left:148px;}
.jpkGbfIcon2{ width: 0; height: 0; border-right:14px solid transparent; border-left: 14px solid transparent; border-top: 14px solid #FF9244; margin-left:148px;}
.jpkGbfIcon3{ width: 0; height: 0; border-right:14px solid transparent; border-left: 14px solid transparent; border-top: 14px solid #1BC8B5; margin-left:148px;}
.jpkGbfCont{ width: 419px; height: 218px; background: #ffffff; box-shadow: 0px 4px 32px 0px rgba(1, 30, 87, 0.08); border-radius: 12px;}
.jpkGbfCont p{ width:340px; margin: auto; font-size: 15px; color: #646566; height: 125px; overflow: hidden; line-height: 25px; padding-top:40px;}
.jpkGbfCont span{ display: block; position:absolute; right:15px; bottom: 0px; font-size: 52px; font-weight: bold; color: #F5F5F5;}
.jpkGbfJian{ width: 34px; height: 24px; background:url(../images/bg8.png) no-repeat -180px -30px; 
    background: image-set(url(../images/bg8.png) 1x, url(../images/bg8-2x.png) 2x)  no-repeat -180px -30px; 
    background: -webkit-image-set(url(../images/bg8.png) 1x, url(../images/bg8-2x.png) 2x) no-repeat -180px -30px; position:absolute; right:-35px; top: -50px;}