.head_page { width: 100%; height: 128px; position: relative; } .head_page .page-box { width: 915px; height: 70px; margin: 0 auto; box-shadow: 0px 0px 10px 0px #dfece1; border-radius: 4px; position: absolute; top: -35px; left: 50%; margin-left: -457px; background-color: #ffffff; border-left: 12px solid #2882f0; } .head_page .page-box p { overflow: hidden; } .head_page .page-box p span { float: left; margin-left: 54px; margin-right: 2px; display: block; font-size: 20px; font-weight: 500; color: #333; line-height: 70px; letter-spacing: 1px; } .head_page .page-box p a { float: left; width: 676px; display: block; font-size: 20px; font-weight: 400; color: #333; line-height: 70px; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } .con { width: 1243px; height: 252px; height: auto; margin: 0 auto; } .con .con_sub { width: 394px; height: 252px; float: left; margin: 0 9px; position: relative; } .con .con_sub .arrow { position: absolute; border: 10px solid transparent; border-bottom: 16px solid #fff; width: 0; height: 0px; z-index: 55; left: 200px; bottom: 0px; } .con .con_txt { clear: both; width: 1204px; height: auto; background: #ffffff; margin: 0 auto; box-shadow: 0px 2px 16px 2px rgba(143, 144, 144, 0.36); } .con .con_txt .title { padding: 50px 0 40px 50px; font-size: 26px; font-family: microsoft yahei; font-weight: bold; color: #2882f0; line-height: 44px; } .con .con_txt .title_con { padding: 0 50px 50px 50px; font-size: 18px; font-family: microsoft yahei; font-weight: 400; color: #666666; line-height: 44px; text-indent: 2em; } .fill { width: 1200px; height: 30px; margin: 0 auto; margin-top: 68px; } .fill .head .head-title { float: left; font-size: 28px; font-weight: bold; color: #2882f0; line-height: 28px; letter-spacing: 1px; margin-right: 29px; } .fill .head a { float: right; font-size:16px; line-height: 28px; color: #2882f0; } .fill_time { clear: both; width: 1204px; height: 229px; background: ; margin: 0 auto; margin-top: 30px; position: relative; } .fill_time .timebutton { position: absolute; left: 525px; top: 38px; width: 164px; height: 35px; border: 1px solid #ffffff; border-radius: 18px; font-size: 18px; font-family: microsoft yahei; font-weight: 400; color: #ffffff; line-height: 35px; text-align: center; } .fill_course { clear: both; width: 1204px; height: 625px; margin: 0 auto; margin-top: 30px; background: #ffffff; box-shadow: 0px 1px 6px 0px rgba(143, 144, 144, 0.36); } .fill_course .curriculum-list { overflow: hidden; } .fill_course .curriculum-list ul li { width: 276px; height: 264px; float: left; background-color: #fff; margin-top: 30px; margin-left: 20px; } .fill_course .curriculum-list ul li a { display: block; } .fill_course .curriculum-list ul li a:hover .title-page, .fill_course .curriculum-list ul li a:hover .title-name { color: #2882f0; } .fill_course .curriculum-list ul li .curriculum-images { width: 276px; height: 153px; } .fill_course .curriculum-list ul li .curriculum-images img { width: 100%; height: 100%; display: block; } .fill_course .curriculum-list ul li .curriculum-title { padding: 15px 16px; } .fill_course .curriculum-list ul li .curriculum-title .title-page { font-size: 17px; font-weight: 400; color: #333; line-height: 24px; max-height: 48px; overflow: hidden; } .fill_course .curriculum-list ul li .curriculum-title .title-name { margin-top: 8px; font-size: 15px; font-weight: 400; color: #333; line-height: 21px; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } .fill_coach { width: 1204px; height: 210px; background: #ffffff; margin: 0 auto; margin-top: 30px; box-shadow: 0px 1px 6px 0px rgb(143 144 144 / 36%); } .fill_coach ul { padding: 30px 40px; } .fill_coach ul li { line-height: 24px; overflow: hidden; margin-top: 11px; width: 460px; float: left; margin-right: 100px; } .fill_coach ul li a { font-size: 17px; font-weight: 400; color: #333333; width: 90%; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .fill_coach ul li a i { display: inline-block; font-style: normal; line-height: 24px; width: 5px; height: 5px; background-color: #347ee8; margin: 0 14px 0 1px; vertical-align: 3px; } .fill_item { width: 1204px; margin: 0 auto; background: #ffffff; box-shadow: 0px 1px 6px 0px rgba(143, 144, 144, 0.36); } .fill_item .image-list { margin-top: 30px; padding: 30px 0; } .fill_item .image-list .image-list-title { padding-left: 67px; margin-bottom: 24px; } .fill_item .image-list .image-list-title p { font-size: 20px; font-weight: 500; color: red; line-height: 28px; letter-spacing: 1px; } .fill_item .image-list .image-list-title p img { display: inline-block; width: 19px; height: 20px; border: none; margin-right: 10px; vertical-align: -3px; } .fill_item .image-list .slidebox { height: 160px; position: relative; overflow: hidden; background-color: #ffffff; } .fill_item .image-list .slidebox .slidebox-itme { margin-left: 66px; } .fill_item .image-list .slidebox .slidebox-itme ul li { float: left; width: 258px; height: 160px; margin-right: 11px; } .fill_item .image-list .slidebox .slidebox-itme ul li img { width: 258px; height: 140px; display: block; border: none; padding-top: 15px; } .fill_item .image-list .slidebox .sprev { width: 54px; height: 160px; position: absolute; left: 0; top: 0; background-color: #ffffff; } .fill_item .image-list .slidebox .sprev i { font-style: normal; display: block; width: 24px; height: 34px; background: no-repeat; margin: 64px 15px; } .fill_item .image-list .slidebox .sprev:hover i { background: no-repeat; } .fill_item .image-list .slidebox .snext { width: 54px; height: 160px; background-color: #ffffff; position: absolute; right: 0; top: 0; } .fill_item .image-list .slidebox .snext i { display: block; font-style: normal; width: 24px; height: 34px; background: no-repeat; margin: 64px 15px; } .fill_item .image-list .slidebox .snext:hover i { background: no-repeat; }