@charset "utf-8";
body{ margin:0px; padding:0px;}
img{ border:0px;}
em{ font-style:normal;}
ul,li,form,p,dl,dt,dd{ margin:0; padding:0;}
ul,li{ list-style:none;}
h1,h2,h3,h4,h5,h6{ margin:0; padding:0; font-size:12px; font-weight:normal;}
.clearfix{*zoom:1;}
.clearfix:before{ content:""; height:0; line-height:0; display:table;}
.clearfix:after{ content:""; height:0; line-height:0; display:table; clear:both;}



.container{ width: 1200px; height: auto; clear: both; margin: 0 auto;}
.title-wrapper_1{ display: flex; justify-content: center; align-items: center; padding: 40px 0;}
.title-wrapper_1>h2.tit{ color: #000; font-size: 30px; line-height: 30px; margin: 0; position: relative; padding: 0 5px; font-weight: 400; }
.title-wrapper_1>h2.tit::before,.title-wrapper_1>h2.tit::after{ position: absolute; content: ""; width: 55px; height: 30px; background-position: 50% 50% !important; background-size: cover !important;}
.title-wrapper_1>h2.tit::before{ background: url(./../images/tit-1_l.png); left: -60px; top: 0;}
.title-wrapper_1>h2.tit::after{ background: url(./../images/tit-1_r.png); right: -60px; top: 0;}

.title-wrapper_2{ display: flex; justify-content: center; align-items: center; padding: 40px 0;}
.title-wrapper_2>h2.tit{ color: #000; font-size: 30px; margin: 0; position: relative; padding: 0 5px; font-weight: 400; }
.title-wrapper_2>h2.tit::before,.title-wrapper_2>h2.tit::after{ position: absolute; content: ""; width: 30px; height: 30px; background-position: 50% 50% !important; background-size: cover !important;}
.title-wrapper_2>h2.tit::before{ background: url(./../images/tit-2_l.png); left: -30px; top: 8px;}
.title-wrapper_2>h2.tit::after{ background: url(./../images/tit-2_r.png); right: -30px; top: 8px;}


.banner{ width: 100%; height: 100vh; position: relative; }
.bg-video{ width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0;}
.vjs-tech{ width: 100%; height: 100%; object-fit: cover;}

.nav{ width: 1200px; height: 72px; left: 50%; margin-left: -600px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 0 20px; z-index: 999;}
.nav>h1.logo{ width: 180px; height: 40px;}
.nav>h1.logo>a{ display: block; width: 180px; height: 40px; background: url(./../images/logo.png); text-indent: -999rem; }
.nav>.menu{ display: flex; justify-content: flex-end; align-items: center;}
.nav>.menu>.item{ height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
.nav>.menu>.item-cur::after{ position: absolute; content: ""; bottom: 0; left: 10px; right: 10px; height: 3px; }
.nav>.menu>.item>a{ text-decoration: none; }
.nav-header{ position: absolute; top: 80px;}
.nav-screen{ position: fixed; box-shadow: 2px 6px 10px 0px rgba(45, 47, 47, 0.2); background: #3D3D3D; top: 10px; border-radius: 20px;}
.nav-header>.menu>.item>a{ color: #FFE57D; }
.nav-header>.menu>.item-cur::after{ background: #FFE57D;}
.nav-screen>.menu>.item>a{ color: #ffffff;}
.nav-screen>.menu>.item-cur::after{ background: #ffffff;}
.contact-box_1,.contact-box_2{ width: 262px; height: 90px; background-size: cover !important; background-position: 100% 100% !important; box-sizing: border-box; text-align: center; padding: 40px 0 0 0; line-height: 30px; color: #FFF; font-size: 16px; margin: 30px auto;}
.contact-box_1{ background: url(./../images/contact-bg_1.png);}
.contact-box_2{ background: url(./../images/contact-bg_2.png);}
.frm-sign{ padding-bottom: 50px;}
.frm-sign .frm-title{ font-size: 30px; height: 80px; line-height: 80px; text-align: center; padding-bottom: 40px;}
.frm-sign .frm-title span{ color: #CD0014; padding-left: 20px;}
.frm-sign .row{ display: flex; flex-wrap: wrap; margin: 0 auto; width: 960px; }
.frm-sign .row>.item{ width: 300px; height: 45px; padding: 0 10px; margin-bottom: 20px; }
.frm-sign .row>.item>.s-select{ border: 1px solid #e0dede; outline: 0; width: 100%; height: 45px; padding: 0 10px;}
.frm-sign .row>.item>.frm-item{ border: 1px solid #e0dede; border-radius: 2px; display: flex; justify-content: space-between; align-items: center; padding: 0 10px;}
.frm-sign .row>.item>.frm-item>.icon{ width: 20px; height: 24px; background-position: 50% 50% !important; background-size: cover !important;}
.frm-sign .row>.item>.frm-item>.icon-cellphone{ background: url(./../images/icon-cellphone.png);}
.frm-sign .row>.item>.frm-item>.icon-checkcode{ background: url(./../images/icon-checkcode.png);}
.frm-sign .row>.item .s-text{ border: 0; outline: 0; padding: 0 10px; flex: 1; height: 45px; line-height: 45px; font-size: 14px;}
.frm-sign .row>.item a.btn-sms{ font-size: 12px; color: #418484; text-decoration: none;}
.frm-sign .row>.item>.btn-sign{ width: 304px; height: 45px; background: url(./../images/btn-sign.png); border: none; color: #FFF;}
/* .frm-sign .row>.item>input.btn-sign{ position: relative; z-index: 1; box-sizing: border-box; border: 1px solid #e0dede; border-radius: 2px; background-color: #b52d3a; line-height: 45px; height: 45px; width:160px; text-align: center; display: block; text-decoration: none; color: #FFF;}
.frm-sign .row>.item>a.btn-sign::before,.frm-sign .row>.item>input.btn-sign::after{ position: absolute; content: ""; width: 24px; height: 43px; background-position: 50% 50% !important; background-size: cover !important;}
.frm-sign .row>.item>input.btn-sign::before{ background: url(./../images/btn-before.png); left: 0; top: 0; z-index: 2;}
.frm-sign .row>.item>input.btn-sign::after{ background: url(./../images/btn-after.png); right: 0; top: 0; z-index: 2;} */



.counter{ width: 100%; height: 700px; background: url(./../images/counter-bg.jpg) no-repeat #ffffff; background-position: 100% 100% !important; background-size: contain !important; box-sizing: border-box; padding-top: 40px; }
.counter .row-1{ display: flex; width: 1000px; margin: 50px auto 60px;}
.counter .item{ width: 250px; position: relative; flex-direction: column; display: flex; justify-content: center; align-items: center;}
.counter .item>.num{ display: flex; flex-direction: row; justify-content: center; align-items: flex-end;}
.counter .item>.num>.text{ font-size: 42px; color: #000;}
.counter .item>.num>.unit{ font-size: 20px; color: #333;}
.counter .item>.inf{ height: 40px; line-height: 40px; font-size: 16px; padding-bottom: 20px;}
.counter .item>.inf::after{ height: 6px; border-radius: 6px; bottom: 10px; left: 100px; right: 100px; background-color: #418484; position: absolute; content: "";}  
.counter .item::after{ position: absolute; content: ""; width: 1px; background: #E2E2E2; top: 0; bottom: 0; right: 0;}
.counter .row-1>.item:first-of-type::before{ position: absolute; content: ""; width: 1px; background: #E2E2E2; top: 0; bottom: 0; left: 0;}
.counter .row-2{ display: flex; width: 750px; margin: 0 auto 40px; justify-content: space-between; align-items: center;}
.counter .row-2>.item::before{ position: absolute; content: ""; width: 1px; background: #E2E2E2; top: 0; bottom: 0; left: 0;}
.counter .contact-box_2{ margin: 50px auto 0;}

.course{ width: 100%; height: 650px; background: url(./../images/course-bg.jpg) no-repeat #f9f9f9; background-position: 100% 100% !important; background-size: contain !important; margin-bottom: 40px; }
.course .box{ zoom: 1; margin: 0 auto; display: flex;justify-content: center; align-items: center;}
.course .box .item{ float: left; width: 235px; height: 365px; transition:all 0.5s ease; display: flex; justify-content: space-between; align-items: center; overflow: hidden; padding: 0 10px;}
.course .box .item>.pic{ width: 235px; height: 365px;}
.course .box .item>.txt{ display: none; width: 226px; height: 365px; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; vertical-align: top; background: url(./../images/course-text.jpg);}
.course .box .item-cur{ float: left; width: 480px; height: 365px; display: flex; justify-content: space-between; align-items: center; transition:all 0.5s ease;}
.course .box .item-cur>.pic{ width: 235px; height: 365px;}
.course .box .item-cur>.txt{ display: block; width: 225px; height: 365px; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; vertical-align: text-top; background: url(./../images/course-text.jpg); background-size: cover; box-sizing: border-box; border: 1px dotted #418484; padding: 40px 30px; font-size: 16px;}

.pattern{ background: #FFF; width: 100%; height: auto; clear: both; margin: 0 auto; padding-bottom: 40px;}
.pattern .box{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 960px; margin: 30px auto 50px;}
.pattern .box .item .info{ width: 100%; height: 100%; position: relative;}
.pattern .box .item .info>.txt{ position: absolute; z-index: 1; top: 30px; left: 50%; margin-left: -100px; width: 200px; height: 40px; line-height: 40px; text-align: center; color: #FFF; font-size: 18px; background: #686868; border: 1px solid #fff;} 
.pattern .box .item .info:hover>.txt{ background: #262626;}

.pattern .box .item .info>.more{ position: absolute; z-index: 1; top: 80px; left: 50%; margin-left: -100px; width: 200px; height: 100px; line-height: 30px; text-align: center; color: #FFF;} 
.pattern .box .item .info>.pic>img{ width: 100%; height: 100%;}

.pattern .box .item-left{ display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
.pattern .box .item-left>.info>.pic>img{ width: 496px; height: 209px;}
.pattern .box .item-left>.info>.pic>.more>span{ top: 190px; font-size:28px;}
.pattern .box .item-right>.info>.pic>img{ width: 433px; height: 422px;}
.pattern .box .item-right>.info>.txt{ top: 140px;}
.pattern .box .item-right>.info>.more{ top: 190px;}




.about{ background: #f9f9f9; width: 100%; height: auto; clear: both; margin: 0 auto;}
.about .box{ padding: 40px 0;}



.school{ background: #FFF; width: 100%; height: auto; clear: both; margin: 0 auto;}

.school .box{ width: 1180px; height: 490px; background: url(./../images/school-bg.jpg); box-shadow: 0 20px 40px rgba(0,0,0,0.1); margin: 0 0 50px; box-sizing: border-box; padding: 0 20px; display: flex; justify-content: space-between; align-items: center;}
.school .box>.pic{ width: 620px; height: 400px; overflow: hidden;}
.school .box>.pic>img{ width: 620px; height: 400px;}

.area-school{ width: 520px; height: 400px; background: #FFF;}
.area-school>.tab-list{ height: 36px; line-height: 36px; display: flex; justify-content: flex-start; align-items: center; padding: 0 15px; margin: 0 -5px 15px; }
.area-school>.tab-list>.item{ width: 90px; height: 36px; line-height: 34px; font-size: 12px; box-sizing: border-box; border: 1px solid #9e9e9e; margin: 0 5px; text-align: center; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; }
.area-school>.tab-list>.item-hov{ color: #FFF; background: #2b2b2b;}
.area-school>.con-list{}
.area-school>.con-list>.con-item{ display: none;}
.area-school>.con-list>.con-item_hov{ display: block;}

.school .box .row{ width: 520px; margin: 0 -10px; display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 0 15px;}
.school .box .row>.item{ width: 240px; height: 90px; box-sizing: border-box; padding: 0 10px;}
.school .box .row>.item>.info{ background-color: #FFF; padding: 10px; transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; }
.school .box .row>.item>.info:hover{ box-shadow:0 10px 10px rgba(0,0,0,0.2); transform: translate(0,-5px);}

.school .box .row>.item>.info>.title{ font-size: 16px; height: 30px; line-height: 30px; color: #418484; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.school .box .row>.item>.info>.text{ font-size: 14px; height: 20px; line-height: 20px; overflow: hidden;}
.school .box .row>.item>.info>.address{ font-size: 14px; height: 40px; line-height: 20px; overflow: hidden;}



.teach{ background: #FFF; width: 100%; height: auto; clear: both; margin: 0 auto;}
.teach-wrap{ height: 500px; background: url(./../images/teach-bg.jpg) no-repeat #fff; background-position: 100% 100% !important; background-size: cover !important; display: flex; align-items: center; margin-bottom: 40px;}
.teach-wrap .box{ padding-left: 130px; position: relative;}
.teach-wrap .box>.text{ width: 207px; height: 77px; line-height: 20px; padding: 20px 0 17px;  background: url(./../images/teach-text_bg.png); text-align: center; position: absolute; top: 90px; right: 120px; box-sizing: border-box; color: #FFF;}
.teach-wrap .box>.row{ display: flex;}
.teach-wrap .box>.row>.item{ width: 240px; height: 150px; padding: 0;}
.teach-wrap .box>.row>.item a{ display: block; width: 234px; height: 150px; background: url(./../images/teach-item_bg.jpg); position: relative; border: 3px solid #FFF; position: relative; color: #000; transition:all 0.5s ease;}



.teach-wrap .box>.row>.item .mrk{ width: 234px; height: 150px; background: rgba(0,0,0,0.2); top: 0; left: 0; position: absolute;}
.teach-wrap .box>.row>.item .pic{ width: 234px; height: 150px; position: relative; overflow: hidden;}
.teach-wrap .box>.row>.item .pic>img{ width: 118px; height: 150px; position: absolute; top: 0; right: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition:-webkit-transform 0.3s ease-out; transition:transform 0.3s ease-out;}

.teach-wrap .box>.row>.item .txt{ position: absolute; z-index: 4; height: 30px; line-height: 30px; left: 0; bottom: 50px; padding: 0 10px; color: #FFF;}
.teach-wrap .box>.row>.item .inf{ position: absolute; z-index: 4; height: 30px; line-height: 30px; left: 0; bottom: 20px; padding: 0 10px; color: #FFF}
.teach-wrap .box>.row>.item a:hover{ border: 3px solid #418484; box-shadow:0 2px 4px rgba(0,0,0,0.2);}
.teach-wrap .box>.row>.item a:hover>.mrk{ display: none;}
.teach-wrap .box>.row>.item a:hover>.pic>img{ -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); transform:scale(1.3);}
.teach-wrap .box>.row>.item a:hover>.txt{ color: #000;}
.teach-wrap .box>.row>.item a:hover>.inf{ color: #000;}


.case{ background: #FFF; width: 100%; height: auto; clear: both; margin: 0 auto;}
.case .box-1{ display: flex; flex-wrap: wrap; margin: 0 -45px; position: relative; padding: 30px 0 50px; }
.case .box-1::after{ position: absolute; content: ""; width: 128px; height: 28px; bottom: 0; left: 50%; margin-left: -64px; background: url(./../images/box-bg.png);}
.case .box-1>.item{ flex: 1; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; transition:all 0.5s ease; padding-top: 20px;}
.case .box-1>.item:hover{ border-radius: 30px; box-shadow:0 20px 50px rgba(0,0,0,0.2); transform: translate(0,-10px);}
.case .box-1>.item>.pic{ width: 218px; height: 270px; border: 4px solid #418484; margin-bottom: 10px; position: relative;}
.case .box-1>.item>.pic::after{ width: 70px; height: 24px; bottom: -2px; left: 50%; margin-left: -35px; content: ""; position: absolute; background: url(./../images/case-top_bg.png);}
.case .box-1>.item>.pic img{ width: 218px; height: 270px;}
.case .box-1>.item>.txt{ font-size: 18px; color: #418484; height: 40px; line-height: 40px;}
.case .box-1>.item>.inf{ font-size: 16px; color: #666; height: 20px; line-height: 20px; padding-bottom: 20px; }

.case .box-2{ display: flex; flex-wrap: wrap; margin: 0 -45px; position: relative; padding: 30px 0 50px; }
.case .box-2::after{ position: absolute; content: ""; width: 128px; height: 28px; bottom: 0; left: 50%; margin-left: -64px; background: url(./../images/box-bg.png);}
.case .box-2>.item{ flex: 1; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; transition:all 0.5s ease; padding-top: 20px;}
.case .box-2>.item:hover{ border-radius: 30px; box-shadow:0 20px 50px rgba(0,0,0,0.2); transform: translate(0,-10px);}
.case .box-2>.item>.pic{ width: 200px; height: 339px; border: 4px solid #418484; margin-bottom: 10px; position: relative; }
.case .box-2>.item>.pic::after{ width: 70px; height: 24px; bottom: -2px; left: 50%; margin-left: -35px; content: ""; position: absolute; background: url(./../images/case-top_bg.png);}
.case .box-2>.item>.pic::before{ width: 70px; height: 24px; top: -2px; left: 50%; margin-left: -35px; content: ""; position: absolute; background: url(./../images/case-btm_bg.png);}
.case .box-2>.item>.pic img{ width: 200px; height: 339px;}
.case .box-2>.item>.txt{ font-size: 18px; color: #418484; height: 40px; line-height: 40px;}
.case .box-2>.item>.inf{ font-size: 16px; color: #666; height: 20px; line-height: 20px; padding-bottom: 20px; }
.case .box-2>.item>.inf span{ padding-left: 10px;}



.news{ height: 460px; background: url(./../images/news-bg.png) #f9f9f9; background-position: 50% 50% !important; background-size: cover !important;}
.news .wrap{ width: 1200px; display: flex; justify-content: space-between; align-items: center; overflow: hidden;}
.news .news-pic{ width: 450px; height: 300px; margin-right: 20px;}
.news .news-pic img{ width: 450px; height: 300px;}
.news .news-box{ flex: 1; height: 300px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;}
.news .news-box>.item{ display: flex; justify-content: space-between; align-items: center; width: 100%; transition:all 0.5s ease;}
.news .news-box>.item:hover{ box-shadow:0 0 10px rgba(0,0,0,0.2); transform: translate(0,-10px);}
.news .news-box>.item>.pub-date{ width: 84px; height: 84px; background: #EA5736; color: #FFF; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.news .news-box>.item>.pub-date>.day{ font-size: 28px;}
.news .news-box>.item>.pub-date>.month-year{ font-size: 16px;}
.news .news-box>.item>.inf{ flex: 1; margin-left: 20px;}
.news .news-box>.item>.inf>.title{ height: 30px; line-height: 30px; font-size: 18px; color: #FFF; overflow: hidden;}
.news .news-box>.item>.inf>.title>a{ text-decoration: none; color: #000;}
.news .news-box>.item>.inf>.description{ font-size: 14px; color: #666; height: 40px; line-height: 20px;}



footer{ width: 100%; height: 200px; background: #343434; clear: both; margin: 0 auto;}
footer>.container{ height: 200px;}
.copyWrap { text-align: center; border-top: 1px solid #313131; margin-top: 20px; padding: 20px 0; }
.footerQR { float: right; width: 130px; margin-right: 30px;}
.footerNav { float: left; width: 940px; }
.footerNav li.m { float: left; width: 17%; }
.case_title{width: 100%; text-align: center;}
/*.footerNav li.m:nth-of-type(4) { width: 25%; }*/
.footerNav a { display: block; text-indent: 0; }
.footerNav a:hover { text-indent: 10px; }
.footerNav h3 a { font-size: 15px; line-height: 2; }
.footerNav .sub a { color: #878787; line-height: 2; }
.footerNav .sub a:hover { color: #fff; }
.page-footer a { color: #fff; }