@charset "utf-8";

/* 公共 */
#content { padding: 0; overflow: visible; }
#content::after { display: none; }
.row { --bs-gutter-x: 4rem; --bs-gutter-y: 2.875rem; }
.row-group { padding: 5.2% 0; overflow: hidden; }
.bg-green { background: #29b6c2; }
.bg-01 { background: url(../../base/img/bg-01.jpg) no-repeat center center; background-size: cover; }
.bg-02 { background: url(../../base/img/bg-03.jpg) no-repeat center center; background-size: cover; }
.bg-03 { background: url(../../base/img/bg-04.jpg) no-repeat center center; background-size: cover; }
.bg-04 { background: url(../../base/img/bg-05.jpg) repeat-y center center; background-size: 100% auto; }
.bg-05 { background: #fff url(../../base/img/bg-07.jpg) no-repeat center top; background-size: 100% auto; }

/* 学校门口 */
.gate { position: absolute; left: 0; bottom: 100%; content: ''; width: 100%; padding-bottom: 11%; background: url(../../base/img/gate.png) no-repeat center bottom; background-size: 100% auto; overflow: hidden; }
.gate h2 { position: absolute; width: 55%; bottom: 12%; font-size: 2.4vw; line-height: 1; color: #fff; font-family: "zihundujiaoshouti"; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); transform: scaleX(0.9); letter-spacing: 0.1em; }
.gate h2:first-of-type { left: 0; text-align: right; padding-right: 11%; transform-origin: left center; }
.gate h2:last-of-type { right: 0; text-align: left; padding-left: 11%; transform-origin: right center; }

/* 城职大·头条 */
#news > .hd { margin: 0; height: 4rem; }
#news > .hd h3 { color: #00a8ff; font-size: 4rem; }
#news > .hd h4 { font-size: 2.625rem; }
#news > .bd { padding-top: 3rem; }

/* 热点新闻 */
#rdxw > .bd { padding-top: 2.6rem; }

/* 新闻列表 */
#row-news .list li { padding: 0.5625rem 0; font-size: .9375em; line-height: 1.4285em; color: #000; }
#row-news .list li a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: inherit; }
#row-news .list li .date { float: left; margin-right: 1rem; }
#row-news .list li:hover { color: #ff0055; }
#row-news .list .t { padding: 0; position: relative; margin-bottom: 1rem; }
#row-news .list .t .pic a { display: block; position: relative; height: 0; padding-bottom: 56%; overflow: hidden; }
#row-news .list .t .pic img { position: absolute; left: 0; top: 0; }
#row-news .list .t .title { position: absolute; left: 0; bottom: 0; width: 100%; color: #fff; line-height: 3em; height: 3em; overflow: hidden; background: rgba(0, 0, 0, 0.5); text-align: center; }
#row-news .list .t .title a { display: block; padding: 0 1rem; }

/* 通知公告 */
#notice { padding-top: 2rem; }

/* 广西职业教育研究中心 */
#row-zyjy { position: relative; height: 0; overflow: hidden; padding-bottom: 23.8281%; }
#row-zyjy a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../../base/img/bg-02.png) no-repeat center; background-size: auto 100%; transition: all ease 1s; }
#row-zyjy a:hover { background-image: url(../../base/img/bg-02-hover.png); }

/* 快速通道菜单 */
.list-menu { margin: -1%; }
.list-menu li { width: 23%; margin: 1%; }
.list-menu li a { display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; font-size: 1.2em; }
.list-menu li a::before { display: block; width: 8.5rem; height: 8.5rem; line-height: 8.5rem; font-family: 'iconfont'; content: '\e606'; background: #00aaff; color: #fff; font-size: 5.6rem; margin-bottom: 0.8rem; border-radius: 50%; font-weight: normal; }
.list-menu .li1 a::before { content: '\e64b'; }
.list-menu .li2 a::before { content: '\e68b'; }
.list-menu .li3 a::before { content: '\e603'; }
.list-menu .li4 a::before { content: '\e67f'; }
.list-menu .li5 a::before { content: '\e608'; }
.list-menu .li6 a::before { content: '\e618'; }
.list-menu .li7 a::before { content: '\e600'; }
.list-menu .li8 a::before { content: '\e629'; }
.list-menu li a,
.list-menu li a::before { transition: all ease 0.5s; }
.list-menu li a:hover { transform: scale(1.08); font-weight: bold; color: #ff0055; }
.list-menu li a:hover::before { background: #ff0055; animation: tada 1s ease 0.4s 1; }

/* 城职大·成果 */
#cg > .hd h3 { color: #ff0055; }
.list-pic-menu { margin: -1.5%; }
.list-pic-menu li { position: relative; width: 47%; margin: 1.5%; }
.list-pic-menu .pic { position: relative; height: 0; padding-bottom: 150%; height: 0; overflow: hidden; }
.list-pic-menu .pic img { position: absolute; left: 0; top: 0; }
.list-pic-menu .title { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.5); font-size: 1.25em; line-height: 3.1em; height: 3.1em; overflow: hidden; padding: 0 1em; color: #fff; text-align: center; font-weight: bold; }
.list-pic-menu li,
.list-pic-menu .title { transition: all ease 0.6s; }
.list-pic-menu li:hover { transform: translateY(-0.5rem); }
.list-pic-menu li:hover .title { background: #ff0055; }

/* 城职大·媒体 */
#media > .hd h3 { color: #ffff00; }
#media > .hd h4 { color: #b2f9ff; opacity: 0.3; }
.list-media { margin: -1%; overflow: hidden; }
.list-media li { float: left; width: 25%; padding: 1%; }
.list-media .pic { position: relative; overflow: hidden; }
.list-media .pic a { display: block; position: relative; height: 0; padding-bottom: 100%; height: 0; overflow: hidden; transition: all ease 0.7s; }
.list-media .pic::before { position: absolute; z-index: 1; left: 1rem; bottom: 1rem; content: ''; width: 2.625rem; height: 2.625rem; background: url(../../base/img/icons-media.png) no-repeat 0 0; background-size: auto 100%; }
.list-media .pic img { position: absolute; left: 0; top: 0; }
.list-media .tit,
.list-media .title { display: none; }
.list-media li:hover .pic a { transform: scale(1.04); }

.list-media li:nth-child(1) .pic a,
.list-media li:nth-child(5) .pic a { padding-bottom: 213%; }
.list-media li:nth-child(1) .pic img,
.list-media li:nth-child(5) .pic img { left: 50%; width: auto; height: 100%; transform: translateX(-50%); }
.list-media li:nth-child(4) { width: 50%; }
.list-media li:nth-child(4) .pic a { padding-bottom: 50%; }
.list-media li:nth-child(4) .pic img { top: 50%; transform: translateY(-50%); }
.list-media li:nth-child(5) { margin-top: -25%; }

/* 媒体列表图标 */
.list-media .li-wx .pic::before { background-position: 0 0; }
.list-media .li-wb .pic::before { background-position: -10.3125rem 0; }
.list-media .li-dy .pic::before { background-position: -15.5rem 0; }
.list-media .li-xhs .pic::before { background-position: -20.65rem 0; }
.list-media .li-xxqg .pic::before { background-position: -25.8125rem 0; }
.list-media .li-qq .pic::before { background-position: -5.0625rem 0; }

/* 媒体节点列表 */
.list-node-media { margin-top: 3.6%; justify-content: center; }
.list-node-media li { position: relative; z-index: 1; margin: 0.5rem 1.25rem; }
.list-node-media li a { display: block; width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; background: rgba(255, 255, 255, 0.3); color: #fff; border-radius: 50%; font-size: 1.8em; transition: all ease 0.4s; overflow: hidden; }
.list-node-media li a::before { display: block; font-family: "iconfont"; content: '\e611'; }
.list-node-media li .pic{ position: absolute; display: block; background: #fff; left: 50%; bottom: 100%; width: 12rem;  height: 12rem; padding: .6rem; box-shadow: 0 0 1.4rem rgba(0, 0, 0 , .15); margin: 0 0 1rem -6rem; visibility: hidden; opacity: 0; border-radius: 0.5rem; }
.list-node-media li .pic::before{ position: absolute; content: ""; left: 50%; top: 100%; margin-left: -.5rem; width: 0; height: 0; border-left: .5rem solid transparent; border-right: .5rem solid transparent; border-top: .5rem solid #fff; }

.list-node-media .li-wx a::before { content: '\e617'; }
.list-node-media .li-wb a::before { content: '\e61a'; }
.list-node-media .li-dy a::before { content: '\e609'; }
.list-node-media .li-xhs a::before { content: '\e8c1'; }
.list-node-media .li-xxqg a::before { content: '\e607'; }
.list-node-media .li-qq a::before { content: '\e882'; }

.list-node-media li:hover a{ background: #fff; color: #ff0055; }
.list-node-media .li-wb:hover a{ color: #d52c2b; }
.list-node-media .li-wx:hover a{ color: #00b300; }
.list-node-media .li-dy:hover a{ color: #000; }
.list-node-media .li-qq:hover a{ color: #3779ff; }
.list-node-media .li-xhs:hover a{ color: #ff2442; }
.list-node-media .li-xxqg:hover a{ color: #d30201; }

/* 专题聚焦 */
#row-special { padding-left: 6.3%; padding-right: 6.3%; }
#special > .hd h3 { color: #ff0055; }
#slide-special { padding: 1rem 0 3rem; }
#slide-special .pic a { position: relative; display: block; height: 0; padding-bottom: 132.4%; overflow: hidden; transition: all ease 0.6s; box-shadow: 0 1.5rem 1.5rem rgba(128, 0, 21, 0.5); }
#slide-special li:hover .pic a { transform: translateY(-1rem); }
#slide-special .pic img { position: absolute; left: 0; top: 0; height: 100%; }
#slide-special .tit { display: none; }
.special-panel { margin-top: 2%; display: flex; align-items: center; justify-content: center; }
.special-panel .title { flex: 1 0 0%; font-size: 1.5em; height: 3.25rem; line-height: 3.25rem; text-align: center; margin: 0 2rem; color: #80002b; overflow: hidden; }
.special-panel .prev,
.special-panel .next { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border: 0.15rem solid #80002b; border-radius: 50%; }
.special-panel .prev::before,
.special-panel .next::before { content: ""; width: 0; height: 0; border-top: .8rem solid transparent; border-bottom: .8rem solid transparent;  }
.special-panel .prev::before { margin-right: 0.15rem; border-right: 1rem solid #80002b; }
.special-panel .next::before { margin-left: 0.15rem; border-left: 1rem solid #80002b; }
.special-panel .prev:hover,
.special-panel .next:hover { border-color: #ff0055; }
.special-panel .prev:hover::before { border-right-color: #ff0055; }
.special-panel .next:hover::before { border-left-color: #ff0055; }

/* 职教品质 */
#zjpz { position: relative; display: flex; align-items: center; padding-bottom: 14vw; }
#zjpz > .hd { margin-right: 1.25rem; }
#zjpz > .hd h3 { width: 1em; font-size: 5.25rem; line-height: 1.15; color: #ffff00; font-family: "zihundujiaoshouti"; transform: scaleX(0.9); }
#zjpz > .hd h3:hover { color: #00e6e6; }
#zjpz > .hd h4 { position: absolute; left: 0; bottom: 0; width: 100%; font-size: 9vw; opacity: 0.1; color: #fff; line-height: 1; font-family: "Geometric 415"; transform: scaleX(0.9); letter-spacing: 0.1em; text-align: center; }
#zjpz > .hd h3 a,
#zjpz > .hd h4 a { text-decoration: none; color: inherit; }
#zjpz > .bd { flex: 1 0 0%; min-width: 0; }
#zjpz .list { margin-top: -1.1rem; }
#zjpz .list li { margin-top: 1.1rem; background: #004099; padding: 1.42rem 2.375rem; font-size: 1em; line-height: 1.4285em; color: #fff; font-weight: bold; border-radius: 500px;] }
#zjpz .list li a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: inherit; }
#zjpz .list li .date { float: left; margin-right: 1em; color: #ffff00; }
#zjpz .list li,
#zjpz .list li .date { transition: all ease 0.4s; }
#zjpz .list li:hover { color: #004099; background: #00e6e6; }
#zjpz .list li:hover .date { color: #002bff; }

/* 图片展示 */
#slide-photo { margin: 0 4%; padding-bottom: 0.9rem; }
#slide-photo .swiper-wrapper { transition-timing-function: linear; }
#slide-photo li { position: relative; width: 25%; box-shadow: 0 .2rem .625rem rgba(0, 0, 0, 0.3); }
#slide-photo .pic a { position: relative; display: block; height: 0; overflow: hidden; padding-bottom: 60%; }
#slide-photo .pic img { position: absolute; left: 0; top: 0; width: 100%; height: auto; min-height: 100%; }
#slide-photo .title { position: absolute; left: 0; bottom: 0; width: 100%; background: linear-gradient(180deg, rgba(82, 204, 143, 0), #52cc8f); }
#slide-photo .title a { display: block; padding: 3.1em 1rem 0 1rem; font-size: 1.25em; height: 6.3em; line-height: 3.2em; overflow: hidden; text-align: center; font-weight: bold; color: #fff; }

/* 新观点 */
#row-xgd { overflow: hidden; }
#row-video { position: relative; overflow: hidden; }
#row-video .wrap-video { position: relative; height: 56vw; }
#row-video .video-player { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
#row-video .btn-play { position: absolute; left: 50%; top: 50%; padding: 2rem; cursor: pointer; line-height: 1; color: #fff; font-size: 7.5rem; text-shadow: 0 0 1rem rgba(0, 0, 0, 0.8); transform: translate(-50%, -50%); }
#row-video .btn-play:hover { color: #ff0054; }
#row-video .btn-pause { position: absolute; display: none; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; }
#video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#video .hd { position: relative; display: inline-block; vertical-align: top; line-height: 1; padding: 0 0 10vw 6vw; }
#video .hd h3 { width: 1em; font-size: 5vw; line-height: 1.02; color: #fff; font-family: "zihundujiaoshouti"; transform: scaleX(0.9); text-shadow: 0 .2rem .625rem rgba(0, 0, 0, 0.9); }
#video .hd h3 .yellow { color: #ffff00; }
#video .hd h4 { position: absolute; left: 1em; top: 0; width: 20em; font-size: 5vw; opacity: 0.5; color: #fff; line-height: 1; font-family: "Geometric 415"; transform: scaleX(0.9) rotate(90deg); transform-origin: left top; letter-spacing: 0.1em; }
#video .hd h3 a,
#video .hd h4 a { text-decoration: none; color: inherit; }
#video .hd .more { margin-top: 1.8rem; background: #ffff00; vertical-align: top; display: inline-block; padding: 0 1rem; font-size: 2vw; color: #ff0054; line-height: 2.1em; font-family: "Geometric 415"; transform: scaleX(0.9); letter-spacing: 0.1em; border-radius: 0 500px 500px 0; }
#video .hd .more:hover { background: #ff0054; color: #fff; }

/* 视频遮罩效果 */
#video-mask { position: relative; z-index: 1; }
#video-mask img { width: 100%; height: auto; }

/* 关于学校 */
#row-about { position: relative; margin-top: -1px; padding: 2.6% 0 19%; }
#row-about::before { position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 0; padding-bottom: 8.71%; background: url(../../base/img/bg-content.png) no-repeat center bottom; background-size: 85% auto; }
#about > .hd h4 { font-size: 11vw; color: #004c99; line-height: 1; font-family: "Geometric 415"; transform: scaleX(0.9); text-align: center; letter-spacing: 0.1em; }
#about > .bd { padding: 4% 0 0; }
#about .list-data { margin-top: 2rem; justify-content: center; align-items: flex-start; }
#about .list-data li { position: relative; margin: 0 2%; width: 17%; padding-bottom: 17%; border-radius: 50%; background: #004c99; animation: float 3s infinite; }
#about .list-data li::before { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; font-family: "iconfont"; content: '\e659'; font-size: 6.6em; color: #fff; opacity: 0.05; width: 100%; height: 100%; }
#about .list-data .item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; flex-direction: column; align-items: stretch; line-height: 1; color: #fff; }
#about .list-data .value { margin: 0 12%; font-weight: bold; border-bottom: 1px solid #fff; text-align: center; }
#about .list-data .val { font-size: 4vw; line-height: 1.5; margin: 0 0.2em; vertical-align: middle; }
#about .list-data .tit { margin: .6rem 10% 1rem; font-size: 1.2vw; line-height: 1.7; text-align: center; }

#about .list-data li:nth-of-type(1) { margin-top: 14%; }
#about .list-data li:nth-of-type(2) { background: #ff0054; animation-delay: 300ms; }
#about .list-data li:nth-of-type(3) { margin-top: 11%; background: #9e36b3; animation-delay: 500ms; }
#about .list-data li:nth-of-type(4) { margin-top: 2%; background: #0055ff; animation-delay: 600ms; }
#about .list-data li:nth-of-type(5) { margin-top: 4%; animation-delay: 200ms; }
#about .list-data li:nth-of-type(6) { background: #ff7f00; animation-delay: 400ms; }
#about .list-data li:nth-of-type(7) { margin-top: -3%; background: #00aacc; animation-delay: 100ms; }

#about .list-data li:nth-of-type(2),
#about .list-data li:nth-of-type(4) { width: 21%; padding-bottom: 21%; }
#about .list-data li:nth-of-type(6) { width: 19%; padding-bottom: 19%; margin: 0 6%; }

#about .list-data li:nth-of-type(2) .val,
#about .list-data li:nth-of-type(4) .val { font-size: 8vw; line-height: 1.2; }
#about .list-data li:nth-of-type(2) .tit,
#about .list-data li:nth-of-type(4) .tit { font-size: 1.4vw;; }
#about .list-data li:nth-of-type(6) .val { font-size: 5vw; line-height: 1.3; }
#about .list-data li:nth-of-type(6) .tit { font-size: 1.3vw; }


/* 媒体查询 */
@media (min-width:768px) {
    #content { margin-top: 20%; }

    /* 学校概况 */
    #about .title { width: 2em; margin-bottom: 0; flex-direction: column; }
    #about .title::before { content: '\e61f'; margin: 0.25rem 0; }
    #about .title::after { content: '\e620'; margin: 0.25rem 0; }

    #about .pic { width: 44%; margin-bottom: 0; }
    #about .con { width: 44%; }

    /* 成果菜单 */
    .list-pic-menu li { width: 22%; }

    /* 城职大媒体 */
    .list-node-media li:hover .pic{ display: block; visibility: visible; opacity: 1; }

    /* 专题聚焦 */
    .special-panel .title { flex: 0 0 37.5rem; }

    /* 职教品质 */
    #zjpz > .hd { margin-right: 4.25rem; padding-left: 11.2rem; background: url(../../base/img/kongzi.png) no-repeat left bottom 1rem; background-size: 11.2rem auto; }
    #zjpz .list li { font-size: 1.25em; padding-left: 4.375rem; padding-right: 4.375rem; }

    /* 新观点 */
    #row-video.fixed { height: 160vh; }
    #row-video.fixed .wrap-video { position: fixed; height: auto; left: 0; top: 6.5rem; right: 0; bottom: 0; }
    #row-video .wrap-video { height: calc(100vh - 6.5rem); }
    #video .hd { padding: 0 0 8rem 5rem; }
    #video .hd h3 { font-size: 4rem; }
    #video .hd h4 { font-size: 4rem; }
    #video .hd .more { font-size: 1.5rem; }

}
@media (min-width:992px) {
    .col-main { width: 66%; }
    .col-side { width: 34%; border-left: 1px solid #999; }

    /* 快速导航菜单 */
    .list-menu li { width: 10.5%; }

    /* 职教品质 */
    #zjpz { padding-bottom: 12.5rem; }
    #zjpz > .hd h4 { font-size: 10.625rem; }

    /* 关于学校 */
    #row-about { padding-left: 7.8%; padding-right: 7.8%; }
    #about > .bd { padding: 8% 0 0; }
    #about .list-data li { margin: 0 1%; width: 11%; padding-bottom: 11%; }
    #about .list-data .val { font-size: 2.8vw; }
    #about .list-data .tit { font-size: 0.8vw; }
    #about .list-data li:nth-of-type(2),
    #about .list-data li:nth-of-type(4) { width: 15%; padding-bottom: 15%; }
    #about .list-data li:nth-of-type(6) { width: 12%; padding-bottom: 12%; }

    #about .list-data li:nth-of-type(1) { margin-top: 14%; }
    #about .list-data li:nth-of-type(3) { margin-top: 11%; }
    #about .list-data li:nth-of-type(4) { margin-top: 2%; }
    #about .list-data li:nth-of-type(5) { margin-top: 6%; }
    #about .list-data li:nth-of-type(6) { margin: 12% 1% 0; }
    #about .list-data li:nth-of-type(7) { margin-top: 3%; }

    #about .list-data li:nth-of-type(2) .val,
    #about .list-data li:nth-of-type(4) .val { font-size: 5vw; }
    #about .list-data li:nth-of-type(2) .tit,
    #about .list-data li:nth-of-type(4) .tit { font-size: 1vw;; }
    #about .list-data li:nth-of-type(6) .val { font-size: 3.2vw; }
    #about .list-data li:nth-of-type(6) .tit { font-size: 0.9vw; }
}

/*--
颜色代码
#166bbd 深色标题
#ddd 淡色边框
--*/