@import url(common.css);
body{ background:#fff; font-size: .26rem; color:#464646; line-height:1.5; position: relative;}
a{color:#464646; text-decoration:none;webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out;}
a:hover,.white a:hover{ color:#09f;}
.white,.white a,.yellow a:hover{ color:#fff;}
.yellow,.yellow a{ color:#fff799;}
.blue,.blue a{ color:#4f91db;}
.red,.red a{ color:#0099FF;}
.f18{ font-size:.333rem;}
.f24{ font-size:.4rem;}

/*pages*/
.pages { font-size:.259rem; margin:0 auto; margin-top:.4rem; text-align:center}
.pages a,.pages span,.pages input { background: #f8f8f8; border:1px solid #e1e1e1; display:inline-block; padding:0 .15rem; line-height:.4rem; margin:0 .05rem; vertical-align:middle;}
.pages a:hover,.pages a:active,.pages span,.pages .current{ background:#0e74d9; border-color:#0e74d9; color:#fff; display:inline-block;}
.pages a.np{ font-family:'宋体';}

.mb1{ margin-bottom:.2rem;}
.pb{ padding:.2rem 0;}
.hp{ max-width:50%;}

.more{ border:1px solid #ebebeb; border-radius:50%; color:#c6c6c6; display:inline-block;; float:right; font-family:'宋体'; font-size:.3rem; height:.5rem; line-height:.5rem; width:.5rem; text-align:center; overflow:hidden; vertical-align:middle; position:relative;}
.more:hover{ background:#0099FF; border-color:#0099FF; color:#fff; -webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}
.more i{ line-height:1; font-size:.35rem}

/*IE低版本提示*/
.unsupported-browser{text-align:center;padding:10px;width:100%;clear:both;color:#fff;background:red;font-weight:bold}
.unsupported-browser a,.unsupported-browser a:visited,.unsupported-browser a:focus,.unsupported-browser a:active{color:#fff;text-decoration:underline}
#header{ position:sticky; top:0; right:0; left:0; background-color:#fff; z-index:9999;}
#header .warpper{ display:-webkit-flex; display:flex; justify-content:space-between; align-items:center; padding-top:.5rem; padding-bottom:.5rem;}
.warpper{width:1200px; margin:0 auto;}
#main .warpper{ position:relative;}
.logo{ width:23%;}
.logo img{ max-height: 1.7rem;}
.subMenu {z-index: 1000;width: 100%; background-color:#fff;}
.animenu__toggle { position:absolute; top:0;right:2%; bottom:0; margin:auto 0; display: none; cursor: pointer; background: #09f; border: 0; padding:10px; height:40px; width:40px;}
.animenu__toggle:hover { background-color: #0681d3;}
.animenu__toggle__bar { display: block; width: 20px; height: 2px; background-color: #fff; -webkit-transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55); transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);}
.animenu__toggle__bar + .animenu__toggle__bar { margin-top: 4px;}
.animenu__toggle--active .animenu__toggle__bar { margin: 0;position: absolute;}
.animenu__toggle--active .animenu__toggle__bar:nth-child(1) { -webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.animenu__toggle--active .animenu__toggle__bar:nth-child(2) {opacity: 0;}
.animenu__toggle--active .animenu__toggle__bar:nth-child(3) { -webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg); transform: rotate(-45deg);}
.animenu { flex:1; font-size:.30rem;}
/*.animenu > ul { padding-left:10%;}*/
.animenu li{ display: inline-block;}
.animenu a { display:block; text-decoration: none;}
/*.animenu__nav { text-align:right;}*/
.animenu__nav > li { position: relative; padding:0 .2em;}
.animenu__nav > li > a {border-bottom:3px solid  transparent; line-height:2; padding:0 1em;}
.animenu__nav > li:hover > .animenu__nav__child {opacity: 1;visibility: visible; margin: 0;}
.active,.animenu__nav > li.active > a,.animenu__nav > li:hover > a {  border-bottom-color:#09f; color: #464646;}
.animenu__nav__child { background-color:rgba(245,245,245,.9); width:100%; padding-left:0; position: absolute; top: 100%; left:0; z-index: 9999; opacity: 0; visibility: hidden; -webkit-transition: margin .15s, opacity .15s; transition: margin .15s, opacity .15s;}
.animenu__nav--open {display: block !important;position:absolute; left:0; top:100%; z-index:99999;}
.animenu__nav--open .animenu__nav__child {display: block;}
.top_login a,.top_login span{ display:inline-block; vertical-align:middle;}
.top_login a{ margin-left:.1rem;font-size:.30rem}
.top_login a img{ width:.5rem;}

.banner .swiper-slide{ text-align:center;}
.banner .swiper-button-next,.banner .swiper-button-prev{border-radius:50%; background-size: .3rem .6rem; background-position:center center; background-repeat:no-repeat; opacity: .5; height:1rem; width:1rem;}
.banner .swiper-pagination-bullet{ height:.25rem; width:.25rem; background-color: rgba(176, 185, 195, 0.5);}
.banner .swiper-pagination-bullet-active{background-color: transparent; border:.07rem solid #fff;}


/*footer*/
#footer{background:#ebebeb; color:#363636; font-size:.222rem; line-height:2; padding:.4rem 0;}
#footer p > span{ display:inline-block; margin-right:1em;}
#footer .nav span{ padding:0 10px; margin-right:0;}
#footer .share{ display:inline-block; position:relative; margin-left:5px;}
#footer .share .mask{ background:url(../../images/classroom/fbg.png) 0 0 no-repeat; color:#000; display:none; height:150px; text-align:center; width:120px; padding:5px 5px 15px 5px; position:absolute; top:-150px; left:-45px; z-index:9999;}
#footer .share:hover .mask{ display:block;}
#footer .fr{ margin-top:.5em;}

#scroll-top { position: fixed; display: none; right: 40px; bottom:90px; z-index: 1; width:1.2rem; height:1.2rem; display: inline-block; cursor: pointer; background:url(../../images/classroom/s_top.gif) 50% 50% no-repeat; background-size:cover; }


/*课堂
.animenu.class{ padding-bottom:.5rem; padding-top:.5rem; font-size:.28rem;}
.animenu.class .animenu__toggle { background: #ffd900;}
.animenu.class .animenu__toggle:hover { background-color: #d8b908;}
.animenu.class .animenu__nav > li{ padding:0 .5em;}
.animenu.class .animenu__nav > li > a{ line-height:2;}
.animenu.class .animenu__nav > li.active > a,.animenu__nav > li:hover > a {  border-bottom-color:#ffd900; color: #464646;}
*/
.class-section{ padding:1.5rem 0; font-size:.26rem;}
.class-section hgroup{ margin-bottom: .5rem; padding:0 5%; font-size:.3rem;}
.class-section hgroup h3{ position:relative; line-height: 2.5; font-size:.5rem; font-weight:700;}
.class-section hgroup h3:after{ content:''; width:1.5em; height: .1rem; position:absolute; left:50%; top:-.2rem; transform: translateX(-50%); background: linear-gradient(to right,#09f 20%,#e93ba7);}
.class-section .text-cont{ display:inline-block; width:730px; max-width:90%;}
.hd-list{padding:1.5rem 0; display:-webkit-flex; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; background:url(../../images/classroom/sbg1.png) 50% 50% no-repeat; background-size:auto 100%;}
.hd-list li{ width:21%; font-size:.35rem; text-align:center; border-radius:.1rem; box-shadow:.05rem .05rem .3rem rgba(0,123,205,.2); background-color:#fff;}
.hd-list li img{ display:inline-block; border-radius:.1rem .1rem 0 0;}
.hd-list li span{ display:block; line-height:5.5;}

#s2{ background:#139aff url(../../images/classroom/sbg2.jpg) 50% bottom no-repeat;}
#s2 hgroup{ color:#fff; margin-bottom:1rem;}
#s2 hgroup.w h3:after{background: linear-gradient(to right,#fff 20%,#fff);}
#s2 .list{ display:-webkit-flex; display:flex; justify-content:space-between; align-items:center; width:940px; max-width:96%; margin:0 auto;}
#s2 .list li{ width:28%; padding:.5rem .5rem .2rem; border-radius:.2rem; background-color:#fff;}
#s2 .list li p,#s4 .list li p{ padding:5% 0; font-size:.3rem; line-height:3;}

#s3 .list,#s4 .list{display:-webkit-flex; display:flex; justify-content:space-between; align-items:center; padding:2% 0;}
#s3 .list li{ width:32%;}
#s4{ background:url(../../images/classroom/sbg3.jpg) 50% 0 no-repeat; background-size:auto 100%;}
#s4 .list{ flex-wrap:wrap; width:830px; max-width:100%; margin:0 auto;}
#s4 .list li{ width:125px; max-width:40%; margin:.3rem 5% 0 5%;}
#s4 .list li p{ line-height:3;}

@media (min-width: 1024px){
   #header{ position: relative;}
   .animenu__nav > li{ position: inherit;}
   .animenu__nav__child{ padding-bottom:.3rem; padding-top:.3rem;}
   .animenu__nav__child > ul > li{ padding:0 1.5em;}
   .animenu__nav__child > ul{ padding-left:22.5%;}
   .animenu__nav > li:nth-of-type(3) .animenu__nav__child > ul{ padding-left: calc(23% + 6em);}
   .animenu__nav > li:nth-of-type(4) .animenu__nav__child > ul{  padding-left: 35%; }
 }

@media (max-width: 1190px) and (min-width: 900px) {
	#header,#footer,#banner,#main{ min-width:1000px;}
	.warpper{width:1000px; margin:0 auto;}
	.animenu{ font-size:.25rem;}
	.animenu__nav > li > a { line-height: 1.5rem; padding:0 .8em;}
	.animenu__nav > li > a { line-height: 1.5rem; padding:0 .8em;}
	.animenu__nav__child > ul{ padding-left: calc(25% + 3em);}
	.animenu__nav > li:nth-of-type(3) .animenu__nav__child > ul{ padding-left: calc(25% + 9em);}
	.animenu__nav > li:nth-of-type(4) .animenu__nav__child > ul{ padding-left: calc(25% + 15em);}
	.h_plist li{ float:left; width:calc((100% - 1rem) / 3); margin-right:.5rem;}
	.h_plist li figure{ height:3.148148148rem;}
	.h_slist li figure{ height:4.629629629rem;}
	.culture_list li{margin-bottom:.3rem; margin-right:.3rem; padding:.3rem; padding-left:0; width:calc((100% - .3rem) / 2);}
	.join_list li figure{ height:2.2rem; line-height:2rem;}
	.area_list li b{ font-size:.4rem; font-weight:600; padding-left:.2rem; width:2.5rem;}
    .area_list li span{ width:calc(100% - 2.5rem);}
}

/*手机版*/
@media screen and (max-width:770px) {
	.f18{ font-size:.28rem;}
	
	#header,#footer,#banner,#main{ min-width:inherit;}
	.warpper{width:100%; padding-left:.185rem; padding-right:.185rem; position: relative;}
	.logo{ left:.1rem; width:30%; position:absolute; top:50%; transform:translateY(-50%);}
	.logo img{ max-height:1.5rem;}
	.top_login{ width:65%;}
	
	.animenu{/* position:absolute; top:50%; transform:translateY(-50%); right:0; z-index:10000;*/ text-align:right; width:100%;}
	.animenu__toggle {display: inline-block; vertical-align:middle; margin-right:.1rem;}
	.animenu__nav,.animenu__nav__child { display: none;}
	.animenu > ul{ padding-left:0;}
	.animenu__nav { background:rgba(6,129,211,.8); text-align:left; max-height:90vh; overflow-y:auto; }
	.animenu__nav > li{ border-bottom:1px solid rgba(255,255,255,.5); width:100%; margin:0;}
	.animenu__nav > li:last-child{ border-bottom:0;}
	.animenu__nav > li > a{ border-bottom:0; color:#fff; font-size:1em; line-height:3;}
	.animenu__nav > li:hover > ul {opacity: 1;visibility: visible; margin: 0;}
	.animenu__nav > li.active > a,.animenu__nav > li:hover > a { background-color: transparent; font-size: .3rem; color: #fff; font-weight:600;}	
	.animenu__nav__child { background:rgba(0,193,255,.3); border:0; position: static; -webkit-transition: none;transition: none;visibility: visible; opacity: 1; width:98%; margin:0 auto; padding:.2rem 0;}
	.animenu__nav__child > ul > li{ float:none; padding:0 1em; text-align:left;}
	.animenu__nav__child > ul > li > a{ color:#fff; font-size:.25rem; opacity:.8;}
	
	.banner .swiper-button-next,.banner .swiper-button-prev{ opacity:0;}
	.hd-list{ min-height:inherit;flex-wrap:wrap; justify-content:space-between; padding-left:5%; padding-right:5%;}
	.hd-list li{ width:45%; margin:.2rem 0;}
}

@media screen and (max-width:680px) {
	.h_plist li dl,#pub_nav,.h_slist li{ font-size:.32rem;}
	
	.h_plist li{ margin-right:.2rem; margin-bottom:.2rem; width:calc((100% - .2rem) / 2);}
    .h_plist li:nth-of-type(2n){ margin-right:0;}
	
	.h_slist li,.h_slist li:last-child{ float:none; width: 100%; margin: .2rem 0;}
	.h_slist li figure{ height:auto;}
	
	#all_banner h1{font-size:.6rem; padding-right:.2rem;}
	
	.text_cont,.cul_list{ font-size:.32rem;}
	.text_cont hgroup h2,.text_cont h4{ font-size:.45rem;}
	.text_cont .img{ max-width:100%; float:none; margin-left:0; margin-bottom:.5rem;}
	
	.honor_nav{ margin:.5rem 0;}
    .honor_list li{ margin-bottom:.2rem; width:calc((100% - .4rem) / 3);}
    .honor_list li:not(:nth-of-type(3n)){ margin-right:.2rem;}
    .honor_list li .pic{height:2.5rem; line-height:2.3rem; padding:.1rem;}	
	
	.contact h3{ margin-bottom:0;}
	.contact dl{ display:block; float:none; max-width:inherit; padding:.2rem 0;}
    .contact .addr{ border-bottom: 1px solid #ebebeb; border-right:0;}
	.cul_list li img,.cul_list li:nth-of-type(even) img{ display: block; float:none; margin-left:0; margin-bottom:.4rem; max-width:100%;}
	.cul_list li:not(:last-child){ margin-bottom: .5rem;}
	
	#footer{ font-size:.28rem; margin-top:.5rem; padding:.6rem 0;}
	#footer .fl,#footer .fr{ float:none;}
	#footer .fr{ text-align:center;}
	#footer .share{ margin-left:0; margin-right:.5rem;}
	#scroll-top{ right:0; bottom:0;}
	#s2 .list li{ padding:2% 1%; width:30%;}
	#s3 .list{ flex-wrap:wrap; justify-content:center;}
	#s3 .list li{ width:70%;}
	#s4 .list li{ width:30%; margin-left:0; margin-right:0;}
	#s4 .list li img{ max-width:60%;}
}