@charset "utf-8";
html { font-size: 100px;}
html,body { width: 100%; height: 100%; overflow-x: hidden; }
body { font-size: .2rem; background-color: #fff;}
@keyframes parentclm {
    0% { top: 1rem; opacity: 0;}
    100% { top: -1.22rem; opacity: 1;}
}
@keyframes sonlist {
    0% { top: 1.5rem; opacity: 0;}
    100% { top: -.55rem; opacity: 1;}
}
@keyframes sonlicrnt {
    0% { padding-left: .22rem;}
    50% { padding-left: .5rem;}
    100% { padding-left: .4rem;}
}
@keyframes main {
    0% { margin-top:.5rem; opacity: 0;}
    100% { margin-top:0rem; opacity: 1;}
}
@keyframes title {
    0% { background-position: -.5rem 1.48rem;}
    100% { background-position: 4.2rem 1.48rem;}
}

.bumentop { position:relative; padding-top: 2.07rem; background: url(//www.qzmc.edu.cn/res/ygzbumentopbg.jpg) no-repeat center top/100% auto;}
.bumentop .logo { position: absolute; left: 50%; top: .4rem; margin: 0 auto 0 -6.7rem; width: 4.28rem; height: .81rem;}
.bumentop .logo img { width: 100%;}
.crntbumen { position: absolute; left: 50%; top: .44rem; margin: 0 auto 0 -1.93rem; width: 5.4rem; font-size: .48rem; line-height: .7rem; font-weight: bold; color: #fff; word-break: keep-all; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

.bumennav { position:absolute; left: 0; right: 0; top: 1.56rem; background: url(//www.qzmc.edu.cn/res/ygzbumen02.gif) repeat-x top/auto 100%}
.bumennav>ul { display: flex; justify-content: center; align-items: center; gap:.05rem .5rem; font-size: .22rem; line-height: .3rem; color: #fff;}
.bumennav>ul>li { padding: .1rem 0 .21rem;}
.bumennav>ul>li>a { color: #fff;}
.bumennav .menu { top: .61rem; padding: .2rem .45rem; background: rgba(255,252,249,.8); border-top: 2px solid #d6283e;}

.banner { line-height: 0;}
.banner img { width: 100%;}
.container { position: relative; min-height: 6.2rem; background: url(//www.qzmc.edu.cn/res/ygzbumenbg2.png) no-repeat center bottom/100% auto;}
.main { position: relative; box-sizing: border-box; width: 14rem; min-height: 5rem; margin: 0 auto; padding: 0 0 .4rem 3.55rem; animation: main both 1s ease}

/*左侧部分*/
.parentclm { position: absolute; left: 0; top:-1.22rem; z-index: 100; display: flex; justify-content: center; align-items: center; width: 2.84rem; height: 1.22rem; margin: 0 auto 0 0; font-size: .3rem; line-height: 1.2em; color: #fff; background: url(//www.qzmc.edu.cn/res/ygzclm02.jpg) no-repeat center/2.84rem 1.22rem; animation: parentclm .7s ease;}
.parentclm a { color: #fff;}
.sonlist { position: absolute; left: 0; top: -.55rem; z-index: 99; box-sizing: border-box; width: 2.94rem; min-height: 5.8rem; padding: .56rem .3rem 1.2rem .2rem; background: url(//www.qzmc.edu.cn/res/ygzclm01.jpg) no-repeat left bottom/2.94rem 5.8rem #ffeded; animation: sonlist both .7s ease .3s;}
.sonlist li { padding: .21rem 0; text-align: center; line-height: 1.2em; font-size: .2rem; color: #000; border-top: 1px dashed #e60112;}
.sonlist li:first-child { border: none;}
.sonlist li a { color: #000;}
.sonlist li:hover a { color: #e60012;}
.sonlist li.crnt { color: #e60012; font-weight: bold;}
.sonlist li.crnt a { padding-left: .4rem; color: #e60012; background: url(//www.qzmc.edu.cn/res/ygzclm04.png) no-repeat left center/.22rem .07rem; animation: sonlicrnt both .6s ease .6s;}

/*右侧栏目*/
.breadcrumb { position: relative; top: .7rem; z-index: 101; width: 50%; margin: 0 0 0 auto; padding-right:.13rem; font-size: .14rem; line-height: 1.2em; text-align: right; color: #999;}
.breadcrumb a { color: #999;}
.breadcrumb a:hover { text-decoration: underline;}
.clmname { padding: .3rem 4rem .23rem 0; font-size: .38rem; line-height: 1.5em; color: #363636; font-weight: bold; background: url(//www.qzmc.edu.cn/res/ygzclm03.png) no-repeat left bottom/auto .03rem; }
.bumennews { margin-bottom: 1.2rem; text-align: center;}
.bumennews ul.news { display: flex; flex-wrap: wrap; justify-content: flex-start; gap:.4rem .6rem; padding: .4rem 0;}
.bumennews ul.news li { position: relative; width: 4.9rem; height: 2rem; padding: .2rem 0 0;}
.bumennews ul.news li .title { box-sizing: border-box; overflow: hidden; height: 2rem; padding: .7rem .32rem .54rem; line-height: .3rem; font-size: .22rem; font-weight: bold; text-align: left; color: #333; background: #fff5ef;}
.bumennews ul.news li .title a { color: #333;}
.bumennews ul.news li:hover .title { background: url(//www.qzmc.edu.cn/res/ygzjt2r.png) no-repeat 4.2rem 1.48rem/.42rem .11rem #fff5ef; animation: title both .5s ease;}
.bumennews ul.news li .time { position: absolute; top: 0; left: .3rem; width:.75rem; height:.75rem; box-sizing: border-box; padding:.1rem 0 0; font-size: .12rem; line-height: .32rem; color: #fff; letter-spacing: .02rem; background: #d80c18; border-radius: 3px;}
.bumennews ul.news li .time .day { display: block; font-size: .28rem; font-weight: bold; letter-spacing: 0;}

/*右侧文章*/
.clmtitle { padding: .4rem 0 .23rem 0; font-size: .38rem; line-height: 1.5em; color: #363636; font-weight: bold; border-bottom: 1px solid #e0e0e0;}
.detail { padding: .14rem 0; font-size: .16rem; line-height: .3rem; color: #595959; background: url(//www.qzmc.edu.cn/res/ygzyuanxi07.gif) no-repeat left bottom/1.54rem 2px;}
.detail span { margin-right: .4rem;}
.detail a { color: #595959;}
.detail a:hover { color: #000;}
.clmtext { padding: .2rem 0; font-size: .18rem; line-height: .38rem; color: #595959;}
.clmtext p { margin:.8em 0;}
.clmtext img,.clmtext video,.clmtext table { display: block; max-width: 100%; margin: 0 auto;}
.edit { margin-bottom: .3rem; padding:0 .2rem; text-align: right; font-size: .16rem; color: #999;}
.related { margin-bottom: 1.1rem; padding: .2rem 0; font-size: .18rem; line-height: .28rem; color: #333; border-top: 1px solid #e0e0e0;}
.related li { padding: .05rem 0;}
.related li a { color: #333;}
.related li a:hover { text-decoration: underline;}

/*附件*/
.fujian { margin: .2rem 0; padding: .2rem; font-size: .16rem; line-height: 1.5em; color: #666; background: rgba(0,0,0,.1);}
.fujian a { display: block; margin-bottom: .1rem; color: #666;}
.fujian a:hover { color: #000; text-decoration: underline;}

@media screen and (max-width:1728px){
    html{ font-size: 90px!important; }
}
@media screen and (max-width:1536px){
    html{ font-size: 80px!important; }
}
@media screen and (max-width:1344px){
    html{ font-size: 70px!important; }
}
@media screen and (max-width:1152px){
    html { font-size: 60px!important; }
}
@media screen and (max-width:960px){
    html{ font-size: 50px!important; }
}
@media screen and (max-width:768px){
    html{ font-size: 40px!important; }
}
@media screen and (max-width:576px){
    html{ font-size: 30px!important; }
}