@charset "utf-8"; #loading { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background: #fff; } html { min-width: 1200px; overflow-x: auto; } .container { width: 1400px; max-width: 85%; margin: 0 auto; } .spirit { background-image: url("../images/spirit.png"); background-repeat: no-repeat; background-position: 50% 50%; background-color: transparent; background-size: auto; } .header { position: relative; z-index: 5; padding: 15px 0 0; background: #b60005; } .header::after { position: absolute; top: 100%; right: 0; bottom: auto; left: auto; z-index: 1; content: ""; width: 100%; height: 40px; background-image: url("../images/s_bg1.png"); background-repeat: no-repeat; background-position: 50% 0; background-color: transparent; background-size: 100%; } .header .container { position: relative; z-index: 2; } .header .logo { width: 45%; margin: 10px 0 0; } .header .right-box { width: 700px; max-width: 53%; text-align: right; font-size: 0; } .top-link { display: inline-block; vertical-align: top; font-size: 14px; font-weight: 500; line-height: 30px; color: #fff; text-align: left; } .top-link a { color: #fff; } .top-link a:hover { text-decoration: underline !important; } .top-link span { margin: 0 8px; } .search { display: inline-block; vertical-align: top; -webkit-transition: all 0.36s linear 2s; -moz-transition: all 0.36s linear 2s; -ms-transition: all 0.36s linear 2s; -o-transition: all 0.36s linear 2s; transition: all 0.36s linear 2s; border-bottom: 1px solid transparent; } .search .input { width: 0; height: 32px; vertical-align: top; font-size: 14px; font-weight: 500; line-height: 32px; color: #fff; text-align: left; -webkit-transition: all 0.36s linear 2s; -moz-transition: all 0.36s linear 2s; -ms-transition: all 0.36s linear 2s; -o-transition: all 0.36s linear 2s; transition: all 0.36s linear 2s; } .search .input::placeholder { color: #fbd9db; } .search .submit { width: 30px; height: 30px; vertical-align: top; background-position: -40px 5px; } .search:hover { border-color: #fff; -webkit-transition: all 0.2s linear 0s; -moz-transition: all 0.2s linear 0s; -ms-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; } .search:hover .input { width: 160px; padding: 0 3px; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .nav { position: relative; z-index: 10; margin: 0 -10px 0 0; } .nav li { position: relative; float: left; width: 14.285%; } .nav li a { position: relative; z-index: 2; display: block; font-size: 18px; font-weight: 700; line-height: 52px; color: #fff; text-align: center; white-space: nowrap; -webkit-transition: all 0.2s linear 0s; -moz-transition: all 0.2s linear 0s; -ms-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; } .nav li:hover > a { font-weight: 700; } .nav li:hover .lv2 { display: block; animation: flipInY .8s; -ms-animation: flipInY .8s; } .nav li.cur > a { font-weight: 700; } .nav .lv2 { display: none; position: absolute; top: calc(100% + 6px); right: auto; bottom: auto; left: calc(50% - 68px); z-index: 1; width: 136px; padding: 8px 0 12px; background: #fff; transform-origin: 50% 10%; -ms-transform-origin: 50% 10%; box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.3); } .nav .lv2 a { padding: 8px 5px; font-size: 15px; line-height: 18px; font-weight: 400; color: #333; } .nav .lv2 a:hover { color: #fff; background: #b60005; } .nav .lv2 .tri { position: absolute; top: auto; right: auto; bottom: 100%; left: 0%; z-index: 1; width: 100%; height: 12px; overflow: hidden; } .nav .lv2 .tri::after { display: block; content: ""; box-sizing: border-box; width: 20px; height: 20px; margin: 0 auto; background: #fff; -webkit-transform: translate(0px, 6px) rotate(45deg); -moz-transform: translate(0px, 6px) rotate(45deg); -ms-transform: translate(0px, 6px) rotate(45deg); -o-transform: translate(0px, 6px) rotate(45deg); transform: translate(0px, 6px) rotate(45deg); box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); } .banner .img { position: relative; display: block; width: 100%; height: 0; padding: 41.927% 0 0; overflow: hidden; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: transform 0.6s linear 0s; -moz-transition: transform 0.6s linear 0s; -ms-transition: transform 0.6s linear 0s; -o-transition: transform 0.6s linear 0s; transition: transform 0.6s linear 0s; } .banner .img img { position: absolute; top: 0; right: auto; bottom: auto; left: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; } .banner .swiper-slide-active .img { -webkit-transform: scale(1.06); -moz-transform: scale(1.06); -ms-transform: scale(1.06); -o-transform: scale(1.06); transform: scale(1.06); -webkit-transition: transform 6s linear 0s; -moz-transition: transform 6s linear 0s; -ms-transition: transform 6s linear 0s; -o-transition: transform 6s linear 0s; transition: transform 6s linear 0s; } .banner .arrow { position: absolute; top: 47%; right: auto; bottom: auto; left: auto; z-index: 1; width: 44px; height: 44px; background-image: url("../images/prev.png"); background-repeat: no-repeat; background-position: 50% 50%; background-color: transparent; background-size: auto; border-radius: 50%; cursor: pointer; } .banner .arrow.swiper-prev { left: 5%; } .banner .arrow.swiper-next { right: 5%; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .banner .swiper-pagination { bottom: 30px; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .banner .swiper-pagination .swiper-pagination-bullet { width: 14px; height: 14px; margin: 0 6px; border: 1px solid #fff; } .banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #b60005; border-color: #b60005; } .tt1 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt2 { display: block; display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .tt3 { display: block; display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .tt4 { display: block; display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .tt5 { display: block; display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .img-scale { position: relative; display: block; overflow: hidden; } .img-scale img { position: absolute; top: 0; right: auto; bottom: auto; left: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; -webkit-transition: transform 0.5s linear 0s; -moz-transition: transform 0.5s linear 0s; -ms-transition: transform 0.5s linear 0s; -o-transition: transform 0.5s linear 0s; transition: transform 0.5s linear 0s; } .img-scale .img-frame { position: relative; overflow: hidden; } .img-scale .img { /*背景图替换img*/ height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-color: transparent; background-size: cover; -webkit-transition: transform 0.5s linear 0s; -moz-transition: transform 0.5s linear 0s; -ms-transition: transform 0.5s linear 0s; -o-transition: transform 0.5s linear 0s; transition: transform 0.5s linear 0s; } .img-scale .img img { min-height: 100%; } .img-scale:hover img { min-height: 100%; -webkit-transform: scale(1.07); -moz-transform: scale(1.07); -ms-transform: scale(1.07); -o-transform: scale(1.07); transform: scale(1.07); } .img-scale:hover .img { -webkit-transform: scale(1.07); -moz-transform: scale(1.07); -ms-transform: scale(1.07); -o-transform: scale(1.07); transform: scale(1.07); } .column { position: relative; margin: 50px 0 32px; text-align: center; } .column h3 { display: inline-block; font-size: 34px; font-weight: 500; line-height: 40px; color: #000; text-align: left; } .column h3 i { display: inline-block; vertical-align: top; width: 40px; height: 40px; margin: 0 9px 0 0; } .column h3 i.c1 { background-position: 0 4px; } .column h3 i.c2 { background-position: 0 -36px; } .column h3 i.c3 { background-position: 0 -76px; } .column h3 i.c4 { background-position: 0 -116px; } .column h3 i.c5 { background-position: 0 -156px; } .column h3 i.c6 { background-position: 0 -196px; } .column h3 i.c7 { background-position: 0 -236px; } .column h3 i.c8 { background-position: 0 -276px; } .column h3 i.c9 { background-position: 0 -316px; } .column .more { position: absolute; top: 0; right: 0; bottom: auto; left: auto; z-index: 1; } .more { font-size: 14px; line-height: 40px; color: #999; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .more:hover { color: #b60005; } .title { font-size: 16px; font-weight: 500; line-height: 30px; color: #000; text-align: left; } .info { font-size: 14px; font-weight: 500; line-height: 24px; color: #666; text-align: justify; } .date { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 500; line-height: 40px; color: #999; text-align: left; } .date span { font-size: 19px; font-weight: 700; color: #ad0f19; vertical-align: top; } .card { background: #fff; box-shadow: 0 0 10px 0 #ccc; } .index-news { position: relative; z-index: 2; padding: 0 0 50px; } .index-course { position: relative; z-index: 1; padding: 0 0 100px; background-image: url("../images/s_bg4.jpg"); background-repeat: no-repeat; background-position: 100% 100%; background-color: transparent; background-size: auto; } .index-course::before { position: absolute; top: -155px; right: 3.22%; bottom: auto; left: auto; z-index: -1; content: ""; width: 227px; height: 254px; background-image: url("../images/s_bg2.jpg"); background-repeat: no-repeat; background-position: 50% 50%; background-color: transparent; background-size: auto; } .index-course .column { width: 16.25%; padding: 90px 0 0 3%; text-align: left; } .index-result { position: relative; z-index: 2; margin: -45px 0 0; padding: 0 0 50px; background-image: url("../images/s_bg5.jpg"); background-repeat: no-repeat; background-position: 0 100%; background-color: transparent; background-size: auto; } .index-result .container { position: relative; } .index-result .column { margin: 0 0 42px; } .index-result .column .more { right: 320px; } .index-result .arrow { position: absolute; top: 50%; right: auto; bottom: auto; left: auto; z-index: 1; width: 45px; height: 45px; background-position: -42px -55px; background-color: #fff; border-radius: 50%; box-shadow: 0 0 8px 0 #ccc; cursor: pointer; } .index-result .arrow.swiper-prev { left: -75px; } .index-result .arrow.swiper-next { right: -75px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .index-work { padding: 1px 0 30px; background-image: url("../images/s_bg6.jpg"); background-repeat: no-repeat; background-position: 100% 100%; background-color: transparent; background-size: auto; } .index-media { padding: 1px 0 30px; background-image: url("../images/s_bg7.jpg"); background-repeat: no-repeat; background-position: 100% 100%; background-color: #eee; background-size: auto; } .index-media .pic-list1 { width: 48.57%; } .index-media .img-news { width: 49.2857%; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .index-media .img-news .img-scale { height: 460px; } .index-media .img-news .text { position: relative; padding: 43px 7.2% 70px; border: 1px solid #e5e5e5; border-top: none; } .index-media .img-news .title { font-size: 18px; font-weight: 700; line-height: 35px; height: 70px; } .index-media .img-news:hover { box-shadow: 0 0 8px 0 #ccc; } .index-media .img-news:hover .text { background: #fff; } .index-media .img-news:hover .title { color: #ad0f19; } .index-media .column-link { position: absolute; top: auto; right: auto; bottom: 100%; left: -1px; z-index: 1; font-size: 14px; font-weight: 500; line-height: 28px; color: #fff; text-align: center; background: #ad0f19; padding:5px;} .news-swiper1 { width: 47.142857%; } .news-swiper1 .img-scale { height: 440px; } .news-swiper1 .date { position: absolute; top: auto; right: auto; bottom: 0; left: 0; z-index: 1; padding: 0 12px 0 22px; color: #fff; background: #ad0f19; } .news-swiper1 .date span { color: #fff; } .news-swiper1 .date::after { position: absolute; top: 0; right: auto; bottom: auto; left: 100%; z-index: 1; width: 0; height: 0; content: ""; border-top: 20px solid transparent; border-right: 5px solid transparent; border-bottom: 20px solid #ad0f19; border-left: 5px solid #ad0f19; } .news-swiper1 .title { margin: 45px 0 15px; padding: 0 6.06%; font-size: 18px; } .news-swiper1 .title:hover { color: #ad0f19; font-weight: 700; } .news-swiper1 .info { height: 48px; padding: 0 6.06%; margin: 0 0 20px; } .news-swiper1 .swiper-pagination { bottom: 122px; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .news-swiper1 .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 4px; background: #cdcdcd; } .news-swiper1 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #ad0f19; } .course-swiper { width: 83.75%; padding: 48px 160px 58px 125px; background-image: url("../images/s_bg3.png"); background-repeat: no-repeat; background-position: 100% 50%; background-color: transparent; background-size: auto; } .course-swiper .wrapper { position: relative; padding: 0 25px; } .course-swiper .wrapper::after { position: absolute; top: calc(50% + 12.5px); right: 0; bottom: auto; left: auto; z-index: 1; content: ""; width: 100%; height: 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.2); } .course-swiper .wrapper .arrow { position: absolute; top: 50%; right: auto; bottom: auto; left: auto; z-index: 1; width: 24px; height: 25px; background-position: -45px -29px; border: 1px solid #fff; border-radius: 50%; cursor: pointer; } .course-swiper .wrapper .arrow.swiper-prev { left: -24px; } .course-swiper .wrapper .arrow.swiper-next { right: -24px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .course-swiper .swiper-slide { position: relative; padding: 0 0 0 20px; } .course-swiper .line { position: absolute; top: auto; right: auto; bottom: 0; left: 2px; z-index: 1; width: 2px; height: 60px; background: rgba(255, 255, 255, 0.2); } .course-swiper .line i { position: absolute; top: auto; right: auto; bottom: -2px; left: -2px; z-index: 1; width: 6px; height: 6px; background: #ead1ac; border-radius: 50%; } .course-swiper .news-swiper2-top { width: 75%; padding: 0 0 2px; margin-bottom: -6px; } .course-swiper .news-swiper2-top .swiper-slide { padding-bottom: 40px; } .course-swiper .news-swiper2-bottom { width: 100%; padding: 2px 0 0; margin-top: -6px; } .course-swiper .news-swiper2-bottom .line { top: 0; } .course-swiper .news-swiper2-bottom .line i { top: -2px; bottom: auto; } .course-swiper .news-swiper2-bottom .swiper-slide { padding-top: 15px; } .course-swiper .date span { color: #ffc083; } .course-swiper .title { height: 50px; font-size: 14px; line-height: 25px; color: #fff; } .course-swiper .title span { background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-size: 0 1px; background-position: 0 100%; } .course-swiper .title:hover span { -webkit-transition: background-size 0.7s linear 0s; -moz-transition: background-size 0.7s linear 0s; -ms-transition: background-size 0.7s linear 0s; -o-transition: background-size 0.7s linear 0s; transition: background-size 0.7s linear 0s; background-size: 100% 1px; } .news-swiper3 { padding: 0 0 38px; } .news-swiper3 .img-frame { height: 293px; } .news-swiper3 .date { margin: 10px 0 2px; } .news-swiper3 .swiper-pagination { bottom: 0px; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .news-swiper3 .swiper-pagination .swiper-pagination-bullet { width: 14px; height: 14px; margin: 0 6px; background: #cdcdcd; } .news-swiper3 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #b60005; } .news-swiper3 .swiper-slide:hover .title { color: #ad0f19; font-weight: 700; } .news-list { width: 50.714285%; } .news-list li { float: left; width: 47.888%; } .news-list li:nth-child(2n) { float: right; } .news-list li:nth-child(2n) .img-news { margin: 30px 0 0; } .news-list .card { -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .news-list .card:hover { background: #ad0f19; } .news-list .card:hover .title, .news-list .card:hover .info, .news-list .card:hover .date, .news-list .card:hover .date span { color: #fff; } .news-list .img-news { margin: 0 0 30px; } .news-list .img-news .img-frame { height: 227px; } .news-list .img-news .date { margin: 10px 0 0; } .news-list .txt-news { display: block; padding: 30px 0 35px; } .news-list .date { padding: 0 8.8%; } .news-list .title { height: 60px; padding: 0 8.8%; margin: 4px 0 7px; } .news-list .info { padding: 0 8.8% 20px; } .list { font-size: 0; margin: 0 -20px; } .list > li { display: inline-block; vertical-align: top; width: 33.3333333333%; padding: 0 20px; } .list li { margin: 0 0 30px; } .list .card { padding: 26px 20px 18px; border-bottom: 2px solid #fff; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .list .card:hover { border-color: #ad0f19; } .list .card:hover .title { color: #ad0f19; font-weight: 700; } .list .card:hover .column-link { background: #ad0f19; } .list .column-link { display: inline-block; vertical-align: top; width: 76px; margin: 8px 0 0; font-size: 14px; font-weight: 500; line-height: 32px; color: #fff; text-align: center; background: #999; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .list .column-link span { font-size: 18px; } .list .text { display: inline-block; vertical-align: top; width: calc(100% - 76px); padding: 0 0 0 15px; } .list .title { height: 60px; } .list .date { margin: -8px 0 0; text-align: right; line-height: 22px; } .list2 { margin: -15px 0 0; } .list2 li { padding: 15px 0; border-bottom: 1px dashed #d3d3d3; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .list2 li:hover { -webkit-transform: translate3d(5px, 0, 0); -moz-transform: translate3d(5px, 0, 0); -ms-transform: translate3d(5px, 0, 0); -o-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } .list2 li:hover .title { color: #ad0f19; } .list2 li:hover .title::before { background: #ad0f19; } .list2 .date { padding: 0 0 0 23px; font-size: 15px; background-image: url(../images/time.png); background-repeat: no-repeat; background-position: 0 50%; background-color: transparent; background-size: auto; } .list2 .title { display: inline-block; vertical-align: top; width: calc(100% - 120px); } .list2 .title::before { display: inline-block; content: ""; width: 8px; height: 8px; margin: 0 12px 1px 0; background: #ad0f19; border-radius: 50%; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .pic-list1 li { float: left; width: 47.794%; margin: 0 0 30px; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .pic-list1 li:nth-child(2n) { float: right; } .pic-list1 li:hover { box-shadow: 0 0 8px 0 #ccc; } .pic-list1 li:hover .text { background: #fff; } .pic-list1 li:hover .title { color: #ad0f19; } .pic-list1 .img-scale { height: 216px; } .pic-list1 .text { position: relative; padding: 15px 20px; border: 1px solid #e5e5e5; border-top: none; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .pic-list1 .title { height: 60px; } .pic-list2 li { position: relative; padding: 26px 0; font-size: 0; border-bottom: 1px dashed #ddd; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .pic-list2 li:hover { -webkit-transform: translateX(7px); -moz-transform: translateX(7px); -ms-transform: translateX(7px); -o-transform: translateX(7px); transform: translateX(7px); } .pic-list2 li:hover .title { color: #b60005; font-weight: 700; } .pic-list2 li:first-child { padding-top: 0; } .pic-list2 .img-scale { display: inline-block; vertical-align: top; width: 240px; } .pic-list2 .img-scale .img { padding: 66.666% 0 0; } .pic-list2 .text { display: inline-block; vertical-align: top; width: calc(100% - 240px); padding: 0 0 0 28px; } .pic-list2 .title { font-size: 18px; color: #222; } .pic-list2 .info { margin: 15px 0; max-height: 48px; } .footer { background: #ad0f19; } .footer .container { padding: 25px 0; } .footer h6 { font-size: 16px; font-weight: 700; line-height: 50px; color: #fff; text-align: left; } .foot-link { width: 20%; } .foot-link a { display: block; font-size: 14px; font-weight: 500; line-height: 30px; color: rgba(255, 255, 255, 0.8); text-align: left; } .foot-link a:hover { color: #fff; text-decoration: underline; } .foot-logo { width: 44%; padding: 40px 30px; border-left: 1px solid #c6575e; border-right: 1px solid #c6575e; text-align: center; } .foot-contact { width: 36%; padding: 0 0 0 15px; font-size: 14px; font-weight: 500; line-height: 30px; color: rgba(255, 255, 255, 0.8); text-align: right; } .foot-contact .ib { display: inline-block; text-align: left; } .copy { padding: 5px 0; font-size: 14px; font-weight: 500; line-height: 30px; color: #fff; text-align: center; background: #820c0c; } .decoration { position: relative; z-index: 2; } .decoration img { width: 100%; height: 460px; object-fit: cover; } .decoration::after { position: absolute; top: auto; right: auto; bottom: 0; left: 0; z-index: 1; width: 100%; height: 30%; content: ""; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent); } .lv1-column { position: absolute; top: auto; right: auto; bottom: 30px; left: 0; z-index: 2; width: 100%; } .lv1-column h3 { font-size: 38px; font-weight: 500; line-height: 100px; color: #fff; text-align: left; } .position { position: absolute; top: auto; right: auto; bottom: -30px; left: 0; z-index: 2; width: 680px; max-width: 90%; padding: 0 0 0 calc(50% - 700px); font-size: 0; background: #b60005; white-space: nowrap; } .position .place { display: inline-block; vertical-align: top; padding-left: 28px; font-size: 14px; font-weight: 500; line-height: 60px; color: #fff; text-align: left; background-image: url(../images/position.png); background-repeat: no-repeat; background-position: 0 50%; background-color: transparent; background-size: auto; } .position .place a { color: #fff; } .position .place a:hover { font-weight: 700; text-decoration: underline; } .position::after { content: ""; position: absolute; top: 0; right: auto; bottom: auto; left: 100%; z-index: 1; width: 0; height: 0; border-top: 30px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #b60005; border-left: 10px solid #b60005; } .section { position: relative; z-index: 1; padding: 70px 0 0; } .main { position: relative; width: 100%; min-height: 400px; padding: 0 0 20px; } .lv2-nav { margin: 0 0 40px; text-align: center; border-bottom: 1px solid #ddd; } .lv2-nav a { display: inline-block; padding: 0 10px; margin: 0 20px; vertical-align: bottom; font-size: 17px; font-weight: 500; line-height: 40px; color: #fff; text-align: center; background: #999; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .lv2-nav a.cur, .lv2-nav a:hover { background: #ad0f19; } .article { padding: 0 0 20px; } .article .title { margin: 0 0 10px; font-size: 27px; font-weight: 500; line-height: 32px; color: #000; text-align: center; } .article .sub { margin: 25px 0 30px; padding: 13px 0; font-size: 14px; font-weight: 500; line-height: 22px; color: #777; text-align: center; border-bottom: 1px dashed #ccc; border-top: 1px dashed #ccc; } .article .sub span { margin: 0 6px; } .article .content { padding: 0 0 30px; font-size: 16px; font-weight: 500; line-height: 220%; color: #000; text-align: justify; } .article .content p { text-indent: 2em; } .article .content img, .article .content video { display: block; max-width: 100%; height: auto !important; margin: 18px auto; } .article .content table { max-width: 100%; margin: 18px auto; } .article .content table p { text-indent: 0; line-height: 150%; } .article .content table img, .article .content table video { margin-top: 0; margin-bottom: 0; } .article .content iframe { max-width: 100%; margin: 18px auto; } .article .cont-page { padding: 25px 0 0; border-top: 1px dashed #ccc; } .article .cont-page a { display: block; padding: 4px 0; font-size: 15px; font-weight: 500; line-height: 27px; color: #494949; text-align: left; -webkit-transition: all 0.36s linear 0s; -moz-transition: all 0.36s linear 0s; -ms-transition: all 0.36s linear 0s; -o-transition: all 0.36s linear 0s; transition: all 0.36s linear 0s; } .article .cont-page a span { color: #b60005; font-weight: 700; } .article .cont-page a:hover { color: #b60005; -webkit-transform: translateX(6px); -moz-transform: translateX(6px); -ms-transform: translateX(6px); -o-transform: translateX(6px); transform: translateX(6px); } .article.about .title { margin: 5px 0 28px; font-size: 30px; font-weight: 400; } #browser-modal { position: fixed; top: 0; right: auto; bottom: auto; left: 0; z-index: 10000; width: 100%; height: 100%; color: #303233; text-align: center; } #browser-modal .browser-modal-cover { position: fixed; top: 0; right: auto; bottom: auto; left: 0; z-index: -1; height: 100%; width: 100%; background-color: #111; } #browser-modal .browser-content { width: 700px; margin: 120px auto 0; padding: 50px 0 80px; background-color: #fff; border-radius: 5px; } #browser-modal .browser-content .browser-dpc-logo img { height: 42px; margin: 45px auto 40px; } #browser-modal .browser-content .browser-text-title { font-size: 24px; text-transform: uppercase; } #browser-modal .browser-content .browser-text-desc { margin: 30px 0 20px; font-size: 14px; } #browser-modal .browser-content .browser-list { width: 600px; height: 130px; margin: 20px auto; } #browser-modal .browser-content .browser-item { float: left; width: 150px; margin: 0 auto; padding: 20px 0; } #browser-modal .browser-content .browser-item .iconfont { width: 100px; height: 100px; margin: 0 auto 10px; font-size: 80px; line-height: 80px; } #browser-modal .browser-content .browser-item .iconchrome { background: url(../images/bro.png) no-repeat 0 0; } #browser-modal .browser-content .browser-item .iconfirefox { background: url(../images/bro.png) no-repeat 0 -100px; } #browser-modal .browser-content .browser-item .iconopera { background: url(../images/bro.png) no-repeat 0 -200px; } #browser-modal .browser-content .browser-item .iconEdge { background: url(../images/bro.png) no-repeat 0 -300px; } #browser-modal .browser-content .browser-item a { display: block; cursor: pointer; } #browser-modal .browser-content .browser-item a:hover { text-decoration: underline !important; } #browser-modal .browser-content .browser-item a img { display: block; max-width: 100px; width: 100px; height: 100px; margin: 0 auto; } #browser-modal .browser-content .browser-item a h4 { margin-top: 20px; text-align: center; font-size: 18px; font-weight: 700; } #list-page { margin: 25px 0 30px !important; font-family: Arial; text-align: center; } #list-page .p_pages a, #list-page span, #list-page .p_goto a { font-size: 14px; width: auto; height: auto; margin-top: 5px; } #list-page .p_pages a, #list-page .p_no_d, #list-page .p_fun_d, #list-page .p_goto a { padding: 8px 10px; color: #428bca; border: 1px solid #aaa; border-radius: 2px; } #list-page .p_pages .p_no_d, #list-page a:hover, #list-page .p_goto a { background: #b60005; font-weight: bold; color: #fff; border-color: #b60005; } #list-page .p_t { padding: 0 2px 0 0; color: #777; } #list-page .p_first, #list-page .p_first_d, #list-page .p_last, #list-page .p_last_d { display: inline-block; } #list-page .p_pages span { color: #aaa; } #list-page .p_goto input { font-family: 'Arial'; color: #333; border-radius: 2px; width: 40px; height: 32px; line-height: 32px; vertical-align: bottom; } #to-top { position: fixed; top: auto; right: -100px; bottom: 30%; left: auto; z-index: 20; width: 56px; height: 55px; border-radius: 2px; background-image: url(../images/toTop.png); background-repeat: no-repeat; background-position: 50% 50%; background-color: #ad0f19; background-size: auto; cursor: pointer; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5); -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; border-radius: 50%; } #to-top:hover { background-color: #820c0c; } @media screen and (max-width: 1500px) { .nav li a { font-size: 17px; } .column h3 { font-size: 30px; } .index-course .column { padding-left: 10px; } }