@CHARSET "UTF-8";
.nav-bar-bg{top: 0px !important;}

header.t1{position:fixed; left:0; right: 0; top: 0; background:none;z-index: 999;}
header.t1 div.nav-bar{transition: background 0.3s ease-out;}
header.t1 div.nav-bar.no-bg{background-color: rgba(0,0,0,0); background-image: linear-gradient(180deg, #070321 0%, rgba(30, 34, 71, 0) 100%);}
header.t1 div.nav-bar.no-bg .top{top: 0; opacity: 1;}
header.t1 div.nav-bar.no-bg .logo{width: 221px; background: transparent;}
header.t1 div.nav-bar.no-bg .logo svg.u{height: 64px; margin-left: 0;}
header.t1 div.nav-bar.no-bg .logo svg.w{height: 26px; opacity: 1;}
header.t1 div.nav-bar.no-bg div.nav-list .container>ul{margin-top: 8px;}
header.t1 div.nav-bar.no-bg div.nav-list a.logo svg{fill:#ffffff;}
header.t1 div.back{display: none;}
main.t1>div.container, a.container{margin: 0 !important; max-width: 10000px; padding: 0;}
div.content{display: flex; flex-direction: column; align-items: stretch; width: 100%;}
div.view.full{height: 100vh;}

div.view.v1{position: relative; overflow: hidden; display: flex;}
div.view.v1>*{width: 100%; height: 100%; flex-shrink: 0;}
div.view.v1 div.video{ position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: default; transition: all 0.5s linear;}
div.view.v1.s2 div.video{margin-left: -100%;}
div.view.v1 div.video span{position: absolute; font-size: 1.4em; z-index: 1; font-size: 60px; color:  white; text-align: center;  }
div.view.v1 div.video span b{display: block; font-size: 1.4em; }
div.view.v1 div.video video{width: auto; height: 100%;}
@media (min-aspect-ratio: 16/9){
	div.view.v1 div.video video{width: 100%; height: auto;}
}

div.view.v1 div.djxw{position: relative;}
div.view.v1 div.djxw>img{position: absolute; width: 100%; height: 100%; z-index: 1; object-fit: cover;}
div.view.v1 div.djxw:before{position: absolute; content:"";width: 100%; height: 100%; z-index:2; background:rgba(5,5,5, 0.5);}
div.view.v1 div.container{display: flex; align-items: center;  position: relative; z-index:3; height: 100%;}
div.view.v1 newslist{display: flex; flex-direction: column; justify-content: center; flex-wrap: wrap; width: 100%; height: 100%; color: white; padding: 0 6%;}
div.view.v1 newslist>*{width: 45%;}
div.view.v1 newslist>h1{font-size: 64px; line-height: 72px; display: flex; flex-direction: column; margin: 0; margin-bottom: 24px;}
div.view.v1 newslist>h1:after{content:""; width:40px; height: 8px; background: #FF5722; margin-top: 24px;}
div.view.v1 newslist>a.top span{display: flex; flex-direction: column; font-size: 24px; line-height: 32px;}
div.view.v1 newslist>a.top span font{font-size: 16px; line-height: 24px;}
div.view.v1 newslist a{color:white;}
div.view.v1 newslist>div{height: 100%; display: flex; flex-direction: column; justify-content: center; margin-left:15%;}
div.view.v1 newslist>div p{font-size: 14px; line-height: 22px; margin: 4px 0; display: flex; align-items: flex-start;}
div.view.v1 newslist>div p:before{content:""; width: 4px; height: 4px; background:#FF5722; margin-right: 12px; margin-top:9px;}
div.view.v1 newslist>div a.more{align-self: flex-end; font-weight: bold; padding-right: 20px; background-image: url(https://www.qdc.edu.cn/img/icons/16x16/more-white.svg); background-position: center right; background-repeat: no-repeat; }

div.view.v1 div.pagination{position: absolute; bottom: 0; left: 0; right: 0; height: auto; z-index: 10; padding-bottom:24px; display: flex; justify-content:center;}
div.view.v1 div.pagination span{width: 8px; height: 8px; background:#FFAB91;  margin: 0 4px;}
div.view.v1 div.pagination span:hover{opacity: 1; cursor: pointer;}
div.view.v1 div.pagination span.sel{cursor: default; background: #FF5722;}

div.view.v2{background: rgba(25, 9, 125, 0.8);  display: flex;align-items: center;  background-repeat: no-repeat; background-size:auto 100%; background-position: center center; position: relative;}
div.view.v2:before{content:""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background:rgba(0,0,0, 0.8); z-index: 1;}
div.view.v2>div{z-index:1;}

@media (min-aspect-ratio: 16/9){
	.swiper-slide{background-size: 100% auto !important;}
	div.view.v2{background-size: 100% auto;}
}

div.view.v2>.container{display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0; margin-top: 52px;}
div.view.v2>.container .left{ margin-left: 32px; display: flex; flex-direction: column; align-items: flex-start;}
div.view.v2>.container .left>span{position: relative; height: 240px;}
div.view.v2>.container .left>span>*{position: absolute; }
div.view.v2>.container .left>span b{font-size: 100px; font-weight: bold; color: white; opacity: 0;}
div.view.v2>.container .left>span b.s{}
div.view.v2>.container .left>span i.v{width: 4px; height: 0; background:#fff; left: 64px; top: 120px; }
div.view.v2>.container .left>span i.h{width: 0; height: 4px; background:#fff; left: 64px; top: 200px;  }
div.view.v2>.container .left>span b.e{left: 232px; top: 124px; }
div.view.v2>.container .left>span b.e:after{content:""; width: 16px; height: 16px; background:#FF5722; position: absolute; top: 24px; right: -24px; transform: scale(0); }
div.view.v2>.container .left>p{font-size: 32px; color: white; font-weight: bold; padding-left: 24px; position: relative; margin-top: 100px; line-height: 48px; display: flex; flex-direction: column;}
div.view.v2>.container .left>p:before{content:""; width: 16px; height: 16px; background:#FF5722; position: absolute; top: 0; left: 0; opacity: 0; }
div.view.v2>.container .left>p span{width: 0; overflow: hidden; white-space: nowrap; }
div.view.v2>.container .right{display: flex; flex-direction: column; align-items: flex-end;}
div.view.v2>.container .right p{display: flex; flex-direction: column; align-items: stretch; text-align: right; margin-top: 26px;}
div.view.v2>.container .right p:nth-child(1){margin-top: 0;}
div.view.v2>.container .right p b{font-size: 64px; font-weight: bold; color:#FF5722; line-height: 72px; opacity: 0;}
div.view.v2>.container .right p.show b{opacity: 1; transition: all 0.2s linear;}
div.view.v2>.container .right p b u{text-decoration: none;}
div.view.v2>.container .right p>i{height: 4px; background:#fff; transform: scalex(0);}
div.view.v2>.container .right p.show>i{transform: scalex(1); transition: transform 1s linear; transform-origin: left center;}
div.view.v2>.container .right p label{color: white; font-size:20px; line-height: 28px; transform: translate(0,28px); opacity: 0; margin-top: 4px;}
div.view.v2>.container .right p.show label{transform: translate(0,0); opacity: 1; transition: all 0.5s linear; transition-delay: 1s;}

div.view.v2.show{}
div.view.v2.show .list>div.item.show{opacity: 1; transform: scale(1); transition: all 0.5s ease-out;}
div.view.v2.show>.container .left>span>*{ transition: all 0.5s linear;}
div.view.v2.show>.container .left>span b.s{opacity: 100;}
div.view.v2.show>.container .left>span i.v{height: 80px; transition-delay: 0.5s;}
div.view.v2.show>.container .left>span i.h{width: 152px; transition-delay: 1s;}
div.view.v2.show>.container .left>span b.e{opacity: 100; transition-delay: 1.5s;}
div.view.v2.show>.container .left>span b.e:after{transform: scale(1); transition: all 0.2s ease-out; transition-delay: 2s;}
div.view.v2.show>.container .left>p:before{opacity: 1; transition: all 0.2s ease-out;}
div.view.v2.show>.container .left>p span:nth-child(1){animation: textstep steps(8) 0.8s forwards;}
div.view.v2.show>.container .left>p span:nth-child(2){animation: textstep steps(10) 1s forwards; animation-delay: 0.8s;}
div.view.v2.show>.container .left>p span:nth-child(3){animation: textstep steps(5) 0.5s forwards; animation-delay: 1.8s;}

@keyframes textstep {
             0% {width: 0;}
             100% { width: 100%; }
}


div.view.v3{padding-top: 104px;}
div.view.v3 h1{font-size: 64px;line-height: 72px;font-weight: bold;color:  #FF5722;margin: 32px 0; position: relative;}
div.view.v3 h1:after{display: block;width: 40px;height: 8px;background: #FF5722;content: '';margin-top: 18px;}
div.view.v3 h1 img{position: absolute; right: 0; top: -20px; width:423px; height: 131px;}
div.view.v3>.container>h1:before{content:"";position: absolute; right: 0; top: -20px; width:423px; height: 131px; background: white; z-index:1;}
div.view.v3>.container>h1.show:before{ height: 0; transition: 0.5s height linear;}
div.view.v3>div.container >div{display: flex;justify-content: space-between;} 
div.view.v3>div.container >div a{ position: relative;display: flex;width:calc(33.33% - 37.3px); height: calc(15vw + 48px); border-radius: 8px;overflow: hidden; transition: transform 0.15s ease-out;box-shadow: 10px 10px #ffffff;}
div.view.v3>div.container >div a>img{width: 100%;height: 100%; object-fit: cover;}
div.view.v3>div.container >div span{display: flex;align-items: center; position: absolute;right: 0;bottom: 0;left: 0; font-size: 20px;color: #FFFFFF;transition: 0.3s;
line-height: 28px;font-weight: bold;background: #2F54EB;border-radius: 0px 0px 8px 0px;padding: 10px 12px;}
div.view.v3>div.container >div span img{width: 24px;height: 24px;margin-right: 8px;}
div.view.v3>div.container >div span img:first-child{display: none;}
div.view.v3>div.container >div a:hover{transform: scale(1.1);}
div.view.v3>div.container >div a:hover span{background: #FF5722;}
div.view.v3>div.container >div a:hover span img:first-child{display: block;}
div.view.v3>div.container >div a:hover span img:last-child{display: none}

div.view.v3>div.container >div a{visibility:hidden}
div.view.v3>div.container >div a:nth-child(1){animation-delay: 0.2s;}
div.view.v3>div.container >div a:nth-child(2){animation-delay: 0.4s;}
div.view.v3>div.container >div a:nth-child(3){animation-delay: .6s;}




div.view.v4{ background-position: center center; background-size:auto 100%;}
div.view.v4>a.container{padding: 0;display: block;height: 352px; background: rgba(255, 87, 34, 0.0);margin: 62px 0 60px 0!important;padding-top: 138px;box-sizing: border-box;transition: 0.3s;}
div.view.v4>a.container p{font-size: 48px;font-weight: bold;color: #FFFFFF;line-height: 72px;display: flex;align-items: center;justify-content: center;}
div.view.v4>a.container p:after,
div.view.v4>a.container p:before{width: 128px;height: 2px;background: #FFFFFF;display: block;content: '';}
div.view.v4>a.container p:after{margin-left: 52px;}
div.view.v4>a.container p::before{margin-right: 52px;}
div.view.v4>a.container:hover {background: rgba(255, 87, 34, 00);}


div.view.v5 h1{color: #1D39C4; background: url(/img/svg/home/02.svg) no-repeat right top; background-size: 301px 60px; position: relative;}
div.view.v5 h1:after{background: #1D39C4;}
div.view.v5 h1:before{content:""; position: absolute; right: 0; top: 0; height: 60px; width: 301px; z-index: 1; background:white;}
div.view.v5 h1.show:before{height: 0; transition: height 0.5s linear;}
div.view.v5 .t4{display: flex; flex-direction:column; margin-bottom: 104px; }
div.view.v5 .t4>div{display: flex;justify-content: space-between; position: relative; overflow-x: hidden; }
div.view.v5 .t4>div a {width:calc(25% - 32px); height: calc(15vw + 48px); margin-right: 42.7px; border-radius: 8px;overflow: hidden;position: relative; flex-shrink: 0;}
div.view.v5 .t4>div a.oper{position: absolute; width: 70px; height: 80px; margin: 0; z-index: 1; top: calc(7.5vw - 16px); text-align: center; font-family:"Glyphicons Halflings"; font-size: 60px; line-height: 80px;  color:#fff; opacity: 0.5; transition: all 0.1s ease-out;}
div.view.v5 .t4>div a.oper.prev{left: 0;}
div.view.v5 .t4>div a.oper.prev:after{content:"\e079";}
div.view.v5 .t4>div a.oper.next{right: 0;}
div.view.v5 .t4>div a.oper.next:after{content:"\e080";}
div.view.v5 .t4>div a.oper:hover{opacity: 1;}
div.view.v5 .t4>div img{width: 100%;height: 100%;object-fit: cover; transition: all 0.15s ease-out;}
div.view.v5 .t4>div a:hover img{transform: scale(1.1);}


div.view.v5 .t4>div a span{width: 100%;background: #19097D; border-radius: 0px 0px 8px 8px; opacity: 0.8;;position: absolute;bottom: 0;
color: #FFFFFF;font-size: 14px;line-height: 28px;font-weight: 500;padding: 12px 16px 8px 16px;box-sizing: border-box;display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; transition: background 0.15s ease-out;}
div.view.v5 .t4>div a span i{font-size: 13px;font-weight: 400;color: #FFFFFF;line-height: 22px;font-style: normal; display: block;}


div.view.v5 .t4 a.more{align-self: flex-end;  display: inline-block; color: rgba(0,0,0,0.25); font-size: 14px; line-height: 28px; margin-top: 32px; padding-right: 20px; background-image: url(https://www.qdc.edu.cn/img/icons/16x16/more.svg);background-repeat: no-repeat;background-position: right center;}
div.view.v5 .t4 a.more:hover{color:#FF5722; background-image: url(https://www.qdc.edu.cn/img/icons/16x16/more-hover.svg);}
div.view.v5 .t4>div a:hover span{ background: #E64A19;}
/**
div.view.v5 .t4>div a{visibility:hidden;}
div.view.v5 .t4>div a:nth-child(1){animation-delay: 0.2s;}
div.view.v5 .t4>div a:nth-child(2){animation-delay: .4s;}
div.view.v5 .t4>div a:nth-child(3){animation-delay: .6s;}
div.view.v5 .t4>div a:nth-child(4){animation-delay: .8s;}
*/

@media screen and (min-width: 1200px) {
	div.view.v2 .container>div.item {margin-right: 54px;}
	div.view.v3>div.container >div a{height: 228px;}
	div.view.v4{background-size: 100% auto;}
	div.view.v5 .t4>div a{height: 228px;}
	div.view.v5 .t4>div a.oper{top: 74px;}
}

@media screen and (max-width: 1024px) {
	div.view.v2 .slogan{padding-left: 144px;}
	div.view.v2 .container>div.item {margin-right: 24px;}
	div.view.v3>div.container >div a{height: 201px;}
	div.view.v5 .t4>div a{height: 201px;}
}


@keyframes t1animate {
    from {transform: translateY(100px); }
    to {transform: translateY(0);}
}


@-webkit-keyframes fadeInLeft {
	0% {
	opacity:0;
	-webkit-transform:translate3d(-100%,0,0);
	transform:translate3d(-100%,0,0)
}
100% {
	opacity:1;
	-webkit-transform:none;
	transform:none
}
}

@keyframes fadeInLeft {
	0% {
	opacity:0;
	-webkit-transform:translate3d(-100%,0,0);
	transform:translate3d(-100%,0,0)
}
100% {
	opacity:1;
	-webkit-transform:none;
	transform:none
}
}
.fadeInLeft {
	-webkit-animation-name:fadeInLeft;
	animation-name:fadeInLeft
}

.animated {
	-webkit-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}


div.fixed-zb{position: fixed; right: 2em; bottom: 16em; background:#fff; z-index: 100; display: flex; flex-direction: column; border-top: 3px solid #FF5722;}
div.fixed-zb a{flex-grow: 1; padding: 0.5em 1em; font-size: 24px; line-height: 2em; color: #000; font-weight: bold;}
div.fixed-zb:hover{background:#fff;}
div.fixed-zb:hover a{color: #FF5722;}