.bg { position: fixed; z-index: -1; width: 100%; height: 100%; /*background: url(../images/index/bg.jpg) no-repeat;*/ /*background-size: cover;*/ background: #353c47; } .header { /*background: rgba(236, 253, 255, .4) !important;*/ } /*导航栏:风琴主体容器*/ .navContainer { width: 1200px; margin: 0 auto 12px; height: 380px; background: #42a6b4; } /*风琴列表*/ .navContainer>ul { overflow: hidden; height: 380px; } /*每一个风琴列表的选项:此选项为一整页风琴的容器,它上面的其他选项和左右区分,都是以此为相对定位*/ .navContainer>ul>li { background: url('../images/index/navBg1.jpg') no-repeat; background-position: bottom center !important; background-size: cover; height: 380px; float: left; width: 50px; position: relative; overflow: hidden; transition: all 0.5s; } /*风琴列表选项的背景*/ .navContainer>ul>li:nth-child(2) { background: url('../images/index/navBg2.jpg') no-repeat; background-size: cover; } .navContainer>ul>li:nth-child(3) { background: url('../images/index/navBg3.jpg') no-repeat; background-size: cover; } .navContainer>ul>li:nth-child(4) { background: url('../images/index/navBg4.jpg') no-repeat; background-size: cover; } .navContainer>ul>li:nth-child(5) { background: url('../images/index/navBg5.jpg') no-repeat; background-size: cover; } .navContainer>ul>li:nth-child(6) { background: url('../images/index/navBg6.jpg') no-repeat; background-size: cover; } .navContainer>ul>li:nth-child(7) { background: url('../images/index/navBg7.jpg') no-repeat; background-size: cover; } .navContainer>ul>li:nth-child(8) { background: url('../images/index/navBg8.jpg') no-repeat; background-size: cover; } .navContainer>ul>li:nth-child(9) { background: url('../images/index/navBg9.jpg') no-repeat; background-size: cover; } /*左侧容器区*/ .navContainer>ul>li .navLeftContainer { position: absolute; left: 0; width: 50px; height: 380px; background: #338b97; z-index: 1; border-right: 1px solid #ddd; } .navContainer>ul>li .navLeftContainer.choose { background: rgba(0, 0, 0, .5) !important; } .navContainer>ul>li .nav_left2 { background: #338b97; } .navContainer>ul>li .nav_left3 { background: #3793a0; } .navContainer>ul>li .nav_left4 { background: #3a9ca9; } .navContainer>ul>li .nav_left5 { background: #3da3b1; } .navContainer>ul>li .nav_left6 { background: #41ABB9; } .navContainer>ul>li .nav_left7 { background: #47B7C5; } .navContainer>ul>li .nav_left8 { background: #4CBDCD; } .navContainer>ul>li .nav_left9 { background: #50C5D6; } .navContainer>ul>li:hover .navLeftContainer { background: rgba(0, 0, 0, .5); -webkit-transition: all .25s; -o-transition: all .25s; transition: all .25s; } /*左侧列表显示图文区*/ .navContainer>ul>li .navLeftContent { position: absolute; left: 0; width: 30px; height: 380px; padding: 0 10px; text-align: center; z-index: 2; } /*左侧列表装饰图片*/ .navContainer>ul>li .navLeftContent img { width: 20px; margin: 5px 0; } .navContainer>ul>li .navLeftContent img.nav_sign_img { width: 17px; margin-top: 10px; margin-bottom: 0; } /*左侧列表文字*/ .navContainer>ul .navLeftContent i { font-size: 16px; font-style: normal; color: #FFF; } /*右侧列表*/ .navContainer>ul>li .navRightContent { float: left; width: auto; position: relative; height: 380px; left: 50px; } /*右侧列表的ul列表*/ .navRightUl { width: auto; height: 380px; padding: 20px; background: rgba(0, 0, 0, .5); float: left; } .navRightUl>li a { display: block; width: auto; height: 40px; text-align: center; margin: 0 auto 20px; text-decoration: none; color: #fff; cursor: pointer; } .navRightUl>li a:hover img { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: transform 0.4s; -o-transition: transform 0.4s; transition: transform 0.4s; } .navRightUl>li a img { width: 24px; margin: 0 15px; } /*主控内容区:tab切换*/ .tabContainer { width: 1200px; min-height: 650px; margin: 0 auto 12px; background-color: #fff; text-align: center; } /*切换的控制选项 :主体高度650,ul共有4个选项高270,剩余高度230px,上下平均分配*/ .tabContainer ul { width: auto; height: auto; padding: 35px 0; float: left; list-style: none; text-align: left; margin-right: 0px; background: #545454; } .tabContainer ul li { width: 110px; height: 120px; font-size: 14px; font-weight: normal; text-align: center; text-decoration: none; color: #fff; cursor: pointer; display: block; } .tabContainer ul li img { width: 35px; height: 35px; margin: 30px 0 10px; } .tabContainer ul li:hover img { -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; width: 40px; height: 40px; } .tabContainer ul li:first-child { height: 120px; line-height: normal; } .tabContainer ul li.container_active { background: #42a6b4; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; } /*切换的主体*/ .tabContainer .tabContent { height: 650px; overflow: hidden; background: #fff; padding: 10px 0; } /*切换的主体控制显隐*/ .tabContainer .content_module { display: none; width: 100%; height: 100%; } .tabContainer .content_module.content_active { display: block; } /*咨询中心每一个tab切换模块*/ .zxContent { display: inline-block; width: 530px; height: 320px; margin: 0 0 7px 12px; overflow: hidden; } /*咨询中心展示图*/ .zxLogo { width: 100%; height: 100%; } /*咨询中心每一个tab切换选项*/ .tab-nav { height: 40px; overflow: hidden; background: #fff; } .tab-nav span { display: block; float: left; width: 100px; height: 38px; line-height: 40px; text-align: center; text-decoration: none; color: #999; cursor: pointer; border-radius: 10px 10px 0 0; background: #fff; border: 1px solid #ddd; border-bottom: none; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .tab-nav span:hover { background: #42a6b5; color: #fff; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .tab-nav span.current { background: #42a6b5; color: #fff; } /*咨询中心每一个tab切换内容区域*/ .tab-con { position: relative; width: 100%; height: 285px; overflow: hidden; background: #f2f2f2; } .tab-con-item { display: none; width: 100%; height: 100%; color: #333; } .more { color: #42a6b5; font-weight: bold; font-size: 14px; text-align: right; cursor: pointer; display: block; } .tab-item-module { width: 96%; height: 30px; line-height: 30px; margin: 0 auto; } .tab-item-module:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; zoom: 1; } .tab-item-module:hover { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; -webkit-transition: .25s; -o-transition: .25s; transition: .25s; cursor: pointer; } .tab-item-module img { width: 16px; margin: 7px 10px 7px 0; float: left; } .tab-item-module p { width: 380px; float: left; display: inline-block; text-align: left; font-size: 12px; overflow: hidden; text-overflow: ellipsis; color: #333; white-space: nowrap; } .tab-item-module span { height: 16px; line-height: 16px; margin-top: 7px; float: right; text-align: left; font-size: 12px; color: #333; display: inline-block; padding-left: 10px; border-left: 2px solid #42a6b4; } /*教务新闻*/ .newsTitle { display: block; width: 510px; height: 40px; line-height: 40px; color: #333; font-size: 16px; font-weight: bold; background: none; margin: 0 auto; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /*底部*/ .newsBottom { width: 510px; height: 203px; margin: 0 auto; background: #fff; border-radius: 8px; } .newsBottom p { height: 100%; width: 100%; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 14px; color: #333; overflow: hidden; text-indent: 2em; position: relative; text-align: left; } /*教务新闻的多行文本溢出*/ .newsBottom p::after { content: "..."; font-weight: bold; position: absolute; bottom: 6px; right: 0; padding: 0 16px 0 30px; background: url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y; } /*服务中心*/ .fwContent { float: left; width: 532px; height: 650px; margin: 0 12px; } .fwContent:last-child { margin: 0; } .fw_top { width: 96%; height: 70px; line-height: 70px; padding: 0 2%; text-align: left; font-size: 24px; font-weight: bold; } .fw_middle { display: block; width: 96%; height: 50px; line-height: 50px; padding: 0 2%; text-align: left; color: #42a6b5; background: #e7f2f6; font-size: 16px; font-weight: bold; } .fw_bottom { width: 96%; padding: 0 2%; height: 520px; background: #f2f2f2; margin: 10px auto 0; } .fw_bottom h3 { width: 100%; height: 40px; line-height: 40px; text-align: left; border-bottom: 1px solid #42a6b5; } .fw_bottom_content { width: 100%; height: auto; } .fw_bottom_content .tab-item-module { width: 100%; height: 30px; line-height: 30px; margin: 0 auto; } /*快速通道*/ .ks_content { width: 533px; height: 100%; background: #f2f2f2; float: left; margin-left: 12px; } .ks_top { height: 60px; line-height: 60px; margin: 12px; display: block; background: #fff; text-align: left; color: #333; font-size: 14px; } .ks_top:hover { background: #ddd; -webkit-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .ks_top:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; zoom: 1; } .ks_top img { margin: 0 12px; } .ks_sign { float: right; color: #999; font-size: 12px; margin-right: 12px; } .noMarginBottom { margin-bottom: 0; } .ks_top_a { display: block; height: 40px; line-height: 40px; margin: 0 12px; background: #fff; border-top: 1px solid #ddd; color: #333; font-size: 12px; text-align: right; padding-right: 12px; } .ks_top_a:hover { background: #ddd; -webkit-transition: all .25s; -o-transition: all .25s; transition: all .25s; } /*规章制度*/ .gz_left, .gz_right { float: left; width: 532px; height: 650px; margin: 0 12px; } .gz_right { margin: 0; } .gz_left .gzContent { width: 100%; height: 100%; background: #f2f2f2; } .gz_right .gzContent { width: 100%; height: 50%; background: #f2f2f2; } .gz_top { width: 96%; height: 70px; line-height: 70px; padding: 0 2%; text-align: left; font-size: 24px; font-weight: bold; background: #fff; } .gz_middle { display: block; width: 96%; height: 50px; line-height: 50px; padding: 0 2%; text-align: left; color: #42a6b5; background: #e7f2f6; font-size: 16px; font-weight: bold; } .gz_bottom { width: 96%; height: auto; margin: 0 auto; } .gz_bottom_content { width: 100%; height: auto; } .gz_bottom_content .tab-item-module { width: 100%; height: 30px; line-height: 30px; margin: 0 auto; } .titleImg { width: 40px; height: 40px; vertical-align: middle; } /*轮播图样式*/ .sliderTitle { display: block; width: 100px; height: 38px; line-height: 40px; text-align: center; text-decoration: none; cursor: pointer; border-radius: 10px 10px 0 0; background: #42a6b5; color: #fff; border: 1px solid #ddd; border-bottom: none; } .slider { position: relative; height: 282px; width: 100%; overflow: hidden; } .slider .slider-pointer { position: absolute; bottom: 40px; right: -40px; color: #fff; list-style: none; padding: 0; z-index: 999; border: none; } .slider .slider-pointer li { display: inline-block; margin: 0 5px; width: 8px; height: 8px; border: none; border-radius: 8px; background-color: #ffffff; opacity: 0.85; transition: all 320ms ease; } .slider .slider-pointer li:hover { background-color: #555; border: 1px solid #fff; } .slider .slider-pointer li.active { background-color: #555; border: 1px solid #fff; } .slider .slider-inner { width: 100%; height: 100%; position: relative; } .slider .slider-inner .item { border: none; width: 100%; height: 100%; float: left; } .slider .slider-inner img { /*width: 100%;*/ height: 100%; border-radius: 0 0 4px 4px; } .slider .slider-control { position: absolute; width: 15px; height: 15px; z-index: 999; border-radius: 15px; text-align: center; font-weight: 900; font-size: 10px; line-height: 15px; background-color: #ffffff; opacity: 0.5; cursor: pointer; top: 40%; transition: all 320ms ease; } .slider .slider-control:hover { opacity: 0.65; background-color: #000; } .slider .slider-control:active { opacity: 0.85; } .slider .slider-control.prev { display: none; left: 20px; } .slider .slider-control.next { display: none; right: 20px; } .slider:hover .slider-control.prev { display: block; left: 20px; } .slider:hover .slider-control.next { display: block; right: 20px; } .slider-sign { position: absolute; background: rgba(0, 0, 0, .4); width: 95%; height: 36px; line-height: 36px; padding: 0 2.5%; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 14px; color: #fff; z-index: 999; left: 0; bottom: 0; }