@charset "utf-8";
*{font-family:\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body{margin:0px;font-family:\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4;}
input:focus{outline: -webkit-focus-ring-color auto 0;}
select:focus{outline: -webkit-focus-ring-color auto 0;}
textarea:focus{outline: -webkit-focus-ring-color auto 0;}
select { -webkit-appearance: none; /*Chrome*/-moz-appearance: none; /*FF*/appearance: none;/*CSS3*/}
select::-ms-expand {display: none; /*IE*/}
ul{padding:0px;margin:0px;list-style:none;}
li{padding:0px;margin:0px;}
.trans{transform:rotateY(180deg);}
a{text-decoration:none;}

.top_bar_container{
width:100%;height:100px;
background:#01437d;
border-bottom:3px solid #0c296b;
display:flex;justify-content:center;align-items:center;
position:relative;
}
.top_bar_logo{width:500px;position:relative;top:4px;}
.top_bar_grade_btn{
width:300px;height:100%;
background-image:url(../image/grade_btn_bg_right.png);background-position:right center;
padding-left:20px;
position:absolute;left:0px;z-index:30;
display:flex;align-items:center;
}
.top_bar_grade_btn img{width:220px;cursor:pointer;position:relative;top:3px;}

.main{width:100%;height:calc(100vh - 100px);background-image:url(../image/main_bg.png);background-repeat:repeat-x;background-size:auto 100%;padding-top:20px;}
.main_container{width:90%;height:calc(100vh - 130px);background:#ffffff;border-radius:5px;margin:0 auto;padding:0 50px;position:relative;}
.main_tip{width:100%;font-size:16px;color:#424242;text-align:center;padding:0 20px;position:absolute;left:0px;bottom:10px;}

@media (max-width:1280px){
.main_container{width:95%;padding:0 30px;}
.top_bar_grade_btn{width:220px;padding-left:10px;}
.top_bar_grade_btn img{width:180px;}
.top_bar_logo{width:450px;}
}
@media (max-width:1024px){
.top_bar_container{height:90px;}
.top_bar_grade_btn{width:200px;}
.top_bar_grade_btn img{width:160px;}
.top_bar_logo{width:420px;}
}
@media (max-width:960px){
.top_bar_container{padding:0px 20px;}
.top_bar_grade_btn{background-image:url(../image/grade_btn_bg_left.png);background-position:left center;padding-left:25px;right:0px;left:auto;}
}
@media (max-width:768px){
.top_bar_container{height:80px;padding:0px 10px;}
.top_bar_logo{width:380px;}
.top_bar_grade_btn{width:140px;}
.top_bar_grade_btn img{width:100px;}
}
@media (max-width:550px){
.top_bar_logo{width:340px;}
.top_bar_grade_btn{width:125px;}
.top_bar_grade_btn img{width:90px;}
.main_tip{font-size:14px;}
}
@media (max-width:420px){
.top_bar_grade_btn{width:100px;padding-left:15px;}
.top_bar_grade_btn img{width:75px;}
}

.main_subject_btn_area{padding-top:40px;position:relative;}
.main_subject_btn_container:after{content:"";display:block;clear:both;}
.main_subject_btn{
width:120px;height:50px;
font-size:22px;color:#424242;
border:2px solid #c4c4c4;
margin-right:10px;margin-bottom:10px;
display:flex;justify-content:center;align-items:center;
float:left;
cursor:pointer;
}
.main_subject_btn a{color:#424242;}
.main_subject_btn:hover,.main_subject_btn.active{background:#ffd600;font-weight:bold;border:2px solid #ffa200;}
.main_subject_btn:hover a,.main_subject_btn.active a{color:#e80000;}
.main_subject_btn_mobile{
display:none;
}
.subject_btn_show-hide{display:block;}
@media (max-width:1440px){
.main_subject_btn{width:100px;}
}
@media (max-width:1280px){
.main_subject_btn{width:80px;font-size:20px;}
}
@media (max-width:1024px){
.main_subject_btn{width:65px;font-size:18px;margin-right:5px;}
}
@media (max-width:768px){
.main_subject_btn_area{padding-top:20px;}
.main_subject_btn_container{width:100%;position:absolute;top:72px;left:0px;}
.main_container{padding:0 20px;}
.main_subject_btn_container{display:none;}
.main_subject_btn_mobile{
width:100%;height:52px;
background: #f2f2f2;
background: -moz-linear-gradient(top, #f2f2f2 0%, #dfdfdf 100%);
background: -webkit-linear-gradient(top, #f2f2f2 0%,#dfdfdf 100%);
background: linear-gradient(to bottom, #f2f2f2 0%,#dfdfdf 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#dfdfdf',GradientType=0 );
font-size:20px;
border-bottom:3px solid #bababa;border-radius:10px;
padding:0 20px;
display:flex;justify-content:space-between;align-items:center;
}
.subject_btn_mobile_title{font-size:24px;}
.subject_btn_mobile_text{font-size:18px;}
.main_subject_btn_mobile img{width:15px;margin-left:5px;}
.main_subject_btn{
width:100%;
background:#ffffff;
font-size:20px;
border:1px solid #c4c4c4;border-top:0px solid #c4c4c4;
margin-bottom:0px;
float:none;
}
.subject_btn_show-hide{display:block;}
}
@media (max-width:420px){
.main_subject_btn_mobile{height:50px;padding:0 15px;}
.subject_btn_mobile_title{font-size:22px;}
.subject_btn_mobile_text{font-size:16px;}
}


.main_subject_video_area{margin-top:20px;}
.main_subject_video_container{height:calc(100vh - 360px);overflow:scroll;overflow-x:hidden;}
.main_subject_video_title{font-size:24px;margin-bottom:20px;}
.main_subject_video{width:20%;margin-bottom:20px;padding:0px 10px;float:left;}
.main_subject_video img{width:100%;cursor:pointer;}
.main_subject_text{font-size:18px;text-align:center;}
@media (max-width:1680px){
.main_subject_video{width:25%;}
}
@media (max-width:1440px){
.main_subject_video{width:33.333%;}
}
@media (max-width:1024px){
.main_subject_video{padding:0px 5px;}
.main_subject_text{font-size:16px;}
}
@media (max-width:768px){
.main_subject_video{width:50%;}
.main_subject_video_title{font-size:22px;margin-bottom:10px;}
}
@media (max-width:500px){
.main_subject_video{padding:0px 3px;}
.main_subject_text{font-size:14px;}
}
@media (max-width:420px){
.main_subject_video{width:100%;}
.main_subject_text{font-size:16px;}
.main_subject_video_title{font-size:20px;}
}

.grade_btn_container{width:150px;height:auto;background:#ffffff;border-radius:5px;position:absolute;top:20px;left:20px;z-index:50;box-shadow:0px 3px 5px rgba(0,0,0,0.5);}
.grade_btn{
width:100%;
background-repeat:no-repeat;background-position:20px center;
font-size:20px;color:#424242;
border-bottom:1px solid #c4c4c4;
padding:15px 20px;padding-left:40px;
cursor:pointer;
}
.grade_btn.active,.grade_btn:hover{background-image:url(../image/btn_arrow_left.png);}
.grade_btn_container_bg{width:100%;height:100%;background:rgba(0,0,0,0.6);position:fixed;top:0px;left:0px;z-index:35;}
@media (max-width:960px){
.grade_btn_container{left:auto;right:15px;}
}
@media (max-width:768px){
.grade_btn_container{width:140px;}
.grade_btn{background-size:8px auto;font-size:18px;}
}
@media (max-width:420px){
.grade_btn_container{width:125px;}
.grade_btn{background-position:15px center;padding:15px 20px;padding-left:30px;}
}

.pup_bg{width:100%;height:100%;background:rgba(0,0,0,0.87);position:fixed;top:0px;left:0px;}
.pup_video_container{width:1024px;height:576px;background:#ffffff;position:fixed;top:50px;left:50%;margin-left:-512px;}
.pup_video_container img{width:100%;opacity:0;}
.video_iframe{width:100%;height:100%;position:absolute;top:0px;left:0px;}
.video_iframe iframe{width:100%;height:100%;}
.close_icon{width:30px !important;position:absolute;top:-40px;right:5px;opacity:1 !important;cursor:pointer;}
@media (max-width:1440px){
.pup_video_container{width:90%;height:auto;left:5%;margin-left:0px;}
}
@media (max-width:1024px){
.pup_video_container{width:96%;left:2%;}
}

.footer{width:100%;background:#d3ef80;background-repeat:repeat-x;color:#688a04;text-align:center;padding:20px;}
.footer_contact{font-size:20px;color:#688a04;}
.footer_copyright{font-size:14px;margin-top:7px;}
@media (max-width:1280px){
.footer_contact{font-size:19px;}
.footer_copyright{font-size:15px;}
}
@media (max-width:900px){
.footer_contact{font-size:18px;}
.footer_copyright{font-size:14px;}
}
@media (max-width:700px){
.footer_contact{font-size:17px;}
.footer_copyright{font-size:13px;}
}
@media (max-width:500px){
.footer{padding:15px 20px;}
.footer_contact{font-size:16px;}
.footer_copyright{font-size:12px;}
}
@media (max-width:450px){
.footer_contact{font-size:15px;}
}
@media (max-width:400px){
.footer{padding:10px 20px;}
.footer_contact{font-size:14px;}
}