@charset "UTF-8";
@import url("/html/static/css/base-fonts.css");
body{margin:0; padding:0; color:#333; font-family:'Microsoft YaHei',"微软雅黑","宋体",'Lucida Grande','Lucida Sans Unicode',sans-serif; font-size:12px; background:#fff;}
img,a img{border:0;margin:0;padding:0;vertical-align:middle; max-width: 100%;}
a{color:#333;text-decoration:none;}
a:Hover { text-decoration:none; color: #f03c98;}

/*鼠标选中文字的样式*/
::-moz-selection { background: #f03c98; color: #fff;}
::selection { background: #f03c98; color: #fff;} 
@media (min-width: 992px) {
/*网站默认滚动跳的样式*/
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); }
::-webkit-scrollbar-thumb { background-color: #f03c98; border-radius: 8px;}
::-webkit-scrollbar-thumb:window-inactive { background-color: #f03c98; }
::-webkit-scrollbar-thumb:vertical:hover { background-color: #f03c98; }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1360px;
  }
}

/* header */
header {padding: 0;}
.header-pc {transition: all .5s ease-in-out;}
.header-pc .logo {padding: 10px 0;}
.header-pc .row {justify-content: space-between; align-items: center;}
.tel {display: flex; justify-content: flex-end; align-items: center;}
.tel svg {margin-right: 10px;}
.tel span { font-family: "DIN-Light", Arial, Helvetica, sans-serif; color: #333; font-size: 30px; font-weight: 400;}

.header-menu {position: relative; height: 50px; background: #000; z-index: 999;}
.header-menu .container {margin: 0 auto; height: 100%; display: flex; align-items: center;}
.header-menu a {transition: all .3s ease-in-out;}
.header-menu>ul>li {position: relative; width: 16.66666%; height: 100%;}
.header-menu .m {display: block; height: 100%; font-size: 15px; color: #fff; line-height: 50px; text-align: center;}
.header-menu .active,
.header-menu>ul>li:hover,
.header-menu .m:hover {background: #f03c98;}
.header-menu .level-1 {position: absolute; top: 70px; margin: 0; padding: 10px; width: 100%; visibility: hidden; opacity: 0; transition: all .3s ease-in-out; list-style-type: none; background: rgba(0, 0, 0, .86); box-shadow: 0 0 15px 6px rgba(0, 0, 0, .1); border-radius: 0 0 3px 3px;}
.header-menu>ul>li:hover .level-1 {display: block; top: 50px; visibility: unset; opacity: 1;}
.header-menu .level-1 li a {display: block; height: 40px; color: #fff; font-size: 14px; border-radius: 2px; line-height: 40px; text-align: center;}
.header-menu .level-1 li a:hover {background: #f03c98; color: #fff;}

/* mobile header */
.header-mb {transition: all .5s ease-in-out; width: 100%; height: 60px; display: flex;}
.header-mb .logo {width: 50%; padding: 5px;}
.header-mb .logo img {max-height: 100%;}
.header-mb .mb-menu {position: relative; width: 50%; text-align: right;}
.mb-tel {display: flex; justify-content: center; align-items: center; background: #f03c98;}
.mb-tel svg {fill: #fff; margin-right: 10px;}
.mb-tel span { font-family: "DIN-Light", Arial, Helvetica, sans-serif; color: #333; font-size: 26px; font-weight: 400; color: #fff; font-weight: bold;}

/* menu trigger */
.mb-menu-toggle {position: relative; top: 12px; right: 20px; float: right; width: 40px; height: 40px; font-family: "montserrat-regular", sans-serif; font-size: 1.2rem; text-transform: uppercase; color: rgba(255,255,255,0.5); line-height: 40px; transition: all 0.3s ease-in-out; }
.mb-menu-toggle:hover,
.mb-menu-toggle:focus { color: #fff; }
.mb-menu-toggle span { display: block; position: absolute; top: 50%; left: 8px; right: auto; bottom: auto; margin-top: -1px; width: 24px; height: 2px; background: #ababab; font: 0/0 a; color: transparent; transition: all 0.5s ease-in-out; }
.mb-menu-toggle span::before,
.mb-menu-toggle span::after { position: absolute; left: 0; width: 100%; height: 100%; background: inherit; content: ""; transition: all 0.5s ease-in-out; }
.mb-menu-toggle span::before { top: -9px; } 
.mb-menu-toggle span::after { bottom: -9px; }
.mb-menu-toggle:hover span { background: rgba(255,255,255,0); transition: all 0.1s ease-in-out; }
.mb-menu-toggle:hover span::before,
.mb-menu-toggle:hover span::after { background: #888; }
.mb-menu-toggle:hover span::before { top: 0; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); }
.mb-menu-toggle:hover span::after { bottom: 0; -webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); }

/* banner */
.banner {text-align: center;}
.banner .swiper-pagination-bullet-active {background: #f03c98;}

/* lesson */
.lesson {padding: 40px 0;}
.home-title { font-size: 22px; font-weight: 500; text-align: center; margin-bottom: 40px;}
.home-title span {display: block; margin: 10px auto; width: 50px; height: 4px; background: #f03c98;}
.home-title p {margin: 0 auto; color: #ddd; text-transform: uppercase; font-size: 12px; font-weight: 400;transform: scale(0.9);}
.lesson-list {margin-bottom: 25px;}
.lesson-list a {display: block; position: relative; background: #000; overflow: hidden; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);}
.lesson-list a img {width: 100%; transition: all .5s ease-out; background: #000;}
.lesson-list a:hover img { opacity: .7; transform: scale(1.1); background: #000;}
.lesson-list a p {position: absolute; top: 25px; left: 25px; margin: 0; font-size: 20px; color: #f03c98; font-weight: bold;}
.lesson-list a p:nth-child(3) {top: 55px !important; font-size: 14px !important; color: #fff;}
.lesson-list a span {position: absolute; top: 100px; left: 25px; display: block; padding: 5px 15px; border: 1px solid #f03c98; color: #f03c98; opacity: 0; transition: all .5s ease-out;}
.lesson-list a:hover span {opacity: 1;}
@media (min-width: 992px) {
  .lesson { padding: 60px 0;}
  .home-title { font-size: 30px;}
  .home-title p {transform: scale(1);}
}

/* about */
.about { padding: 40px 0; background: url("/html/static/images/about-bg.png") rgb(250 248 245 / 30%) no-repeat 10px bottom; background-size: 80%; }
.about .container {display: flex; justify-content: space-between; }
.about-intro { width: 100%; }
.about-tit { padding-bottom: 24px; border-bottom: 1px solid #efefef; overflow: hidden; }
.about-tit h2 { float: left; font-size: 28px; color: #f03c98; font-weight: bold; }
.about-tit h3 { float: left; padding: 15px 0 0 16px; font-family: "Times New Roman"; font-size: 20px; font-weight: normal; color: #999; text-transform: uppercase; }
.about-desc { padding-top: 28px; font-size: 15px; line-height: 240%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.about-more { padding-top: 20px; }
a.more-btn { display: inline-block; padding: 0 28px; height: 38px; border-radius: 24px; background: #f03c98; font-family: "Times New oman"; font-size: 13px; color: #fff; line-height: 38px; transition: all .3s ease-in-out; }
a.more-btn:hover { background: #d5138d; box-shadow: 0 4px 12px rgba(180,131,90,0.2); }
.about-btm { padding-top: 30px; overflow: hidden; } 
.about-btm ul {margin: 0; padding: 0; list-style-type: none; width: calc(100% + 20px); }
.about-btm li { margin-right: 20px; margin-bottom: 15px; padding: 16px 32px; box-sizing: border-box; background: #f4f4f4; transition: all .3s ease-in-out; border-radius: 3px; }
.about-btm li i { float: left; margin: 6px 16px 6px 0;}
.about-btm li i svg {fill: #5C5C66; transition: all .3s ease-in-out; }
.about-btm li h4 { font-size: 14px; font-weight: normal; color: #666; transition: all .3s ease-in-out;  }
.about-btm li p {margin: 0; padding-top: 3px; font-family: "DIN-Light", "Times New Roman"; font-size: 20px; transition: all .3s ease-in-out; font-weight: 600;}
.about-btm li:hover {background: #f03c98;}
.about-btm li:hover i svg {fill: #fff !important;}
.about-btm li:hover h4,
.about-btm li:hover p {color: #fff;}
.about-pic { display: none;}
.about-pic img { width: 100%; }
@media (min-width:768px) {
  .about { background: url("/html/static/images/about-bg.png") rgb(250 248 245 / 30%) no-repeat 80px bottom; background-size: auto;}
  a.more-btn { padding: 0 48px; height: 48px; border-radius: 24px; font-size: 14px; line-height: 48px; }
}
@media (min-width: 992px) {
  .about { padding: 80px 0;}
  .about-intro { width: 54%; }
  .about-pic {display: block;}
  .about-desc { padding-top: 48px;}
  .about-more { padding-top: 40px; }
  .about-btm { padding-top: 60px;}
}
@media (min-width: 1200px) {
  .about-btm li { float: left; width: calc(100% / 2 - 20px);}  
}

/* suduent */
.suduent {padding: 30px 0;}
@media (min-width: 992px) {
  .suduent {padding: 60px 0;}
}

/* works */
.works {padding: 40px 0; background: rgb(250 248 245 / 30%); }
.works .row {margin-right: -0.5rem; margin-left: -0.5rem;}

.works-tit {position: relative; padding-bottom: 24px; border-bottom: 1px solid #efefef; overflow: hidden; }
.works-tit h2 { float: left; font-size: 20px; color: #f03c98; font-weight: bold; }
.works-tit h3 { float: left; padding: 15px 0 0 16px; font-family: "Times New Roman"; font-size: 16px; font-weight: normal; color: #999; text-transform: uppercase; }
.works-tit a.btn-more { position: absolute; right: 0;bottom: 26px; padding-right: 18px; background: url("/html/static/images/tit-more-arrow.png") no-repeat right center; font-size: 14px; color: #999; }
.works-list a {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 248px; overflow: hidden; border-radius: 3px; text-align: center;}
.works-list a::after { position: absolute; top: 50%; left: 50%; right: 50%; bottom: 50%; width: 0; height: 0; visibility: hidden; opacity: 0; display: block; content: ""; border: 1px solid rgba(175, 175, 175, 0.5); z-index: 10; transition: all .3s ease-in-out;}
.works-list a img {transition: all .3s ease-in-out; height: 100%; max-width: none;}
.works-list a p { position: absolute; top: 45%; margin: 0 5%; width: 90%; display: block; text-align: center; color: rgb(240, 60, 152); font-size: 16px; font-weight: 600; z-index: 11; text-shadow: 0 0 10px 5px rgb(240 60 152 / 30%); transition: all .3s ease-in-out; visibility: hidden; opacity: 0;}
.works-list a:hover::after { top: 10px; right: 10px; bottom: 10px; left: 10px; visibility: unset; opacity: 1; width: auto; height: auto;}
.works-list a:hover p { visibility: unset; opacity: 1;}
.works-list a:hover img { transform: scale(1.1); }
@media (min-width: 576px) {
  .works-list a p { font-size: 18px;}
  .works-list a {height: 356px;}
  .works-list a img {height: 400px;}
}
@media (min-width: 768px) {
  .works-tit h2 { font-size: 28px;}
  .works-tit h3 { font-size: 20px;}
  .works-list a {height: 316px;}
  .works-list a img {height: 350px;}
}
@media (min-width:992px) {
  .works {padding: 80px 0;}
  .works-list a {height: 318px;}
  .works-list a img {height: 350px;}
}
@media (min-width:1200px) {
  .works-list a {height: 248px;}
  .works-list a img {height: 270px;}
}
@media (min-width: 1440px) {
  .works-list a {height: 300px;}
  .works-list a img {height: 330px;}
}
/* ---------- news ---------- */
.news { padding: 80px 0; }
.news-tit {position: relative; padding-bottom: 24px; border-bottom: 1px solid #efefef; overflow: hidden; }
.news-tit h2 { float: left; font-size: 28px; color: #f03c98; font-weight: bold; }
.news-tit h3 { float: left; padding: 15px 0 0 16px; font-family: "Times New Roman"; font-size: 20px; font-weight: normal; color: #999; }
.news-tit a.btn-more { position: absolute; right: 0; bottom: 26px; padding-right: 18px; background: url("/html/static/images/tit-more-arrow.png") no-repeat right center; font-size: 14px; color: #999; }
.news-con { padding-top: 60px; overflow: hidden; }
.news-pic { float: left; position: relative; width: 48.5%; height: 360px; overflow: hidden; }
.news-pic img { width: 100%; height: 100%; transition: all 0.3s ease-in-out; }
.news-pic a:hover img { transform: scale(1.05); }
.news-pic .mask { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); padding: 36px 40px; color: #fff; }
.news-pic .date { float: left; width: 16%; font-family: "Times New Roman"; }
.news-pic .day { display: block; font-size: 26px; } 
.news-pic .year { display: block; padding-top: 4px; font-size: 16px; }
.news-pic .con { float: right; width: 84%; }
.news-pic .con h4 { font-size: 18px; font-weight: normal; line-height: 160%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-pic .con p { padding-top: 12px; font-size: 14px; line-height: 200%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.news-list { float: right; width: 48.5%; }
.news-list ul {margin: 0; padding: 0; list-style-type: none;}
.news-list li { background: #f8f8f8; padding: 36px 40px; height: 170px; overflow: hidden; }
.news-list li:first-child { margin-bottom: 20px; }
.news-list li .date { float: left; width: 16%; font-family: "Times New Roman"; }
.news-list li .day { display: block; font-size: 26px; color: #333; }
.news-list li .year { display: block; padding-top: 4px; font-size: 16px; color: #999; }
.news-list li .con { float: right; width: 84%; }
.news-list li .con h4 { font-size: 18px; font-weight: normal; line-height: 160%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-list li .con p { padding-top: 12px; font-size: 14px; color: #999; line-height: 200%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.news-list li a h4 { transition: all .3s ease-in-out;}
.news-list li a:hover h4 { color: #f03c98;}
/* responsive */
@media only screen and (max-width: 1024px) {
.news { padding: 40px 0; }
.news-tit { padding-bottom: 16px; }
.news-tit h2 { font-size: 20px; }
.news-tit h3 { padding: 9px 0 0 10px; font-size: 16px; }
.news-tit a.btn-more { bottom: 17px; }
.news-con { padding-top: 40px; }
.news-pic { float: none; margin-bottom: 20px; width: auto; height: auto; }
.news-pic .mask { padding: 20px; }
.news-pic .date {width: 22%; }
.news-pic .day { font-size: 20px; }
.news-pic .year { font-size: 14px; }
.news-pic .con { width: 78%; }
.news-pic .con h4 { font-size: 16px; line-height: 140%; }
.news-pic .con p { padding-top: 8px; line-height: 180%; -webkit-line-clamp: 1; }
.news-list { float: none; width: auto; }
.news-list li { padding: 20px; height: auto; }
.news-list li .date { width: 22%; }
.news-list li .day { font-size: 20px; }
.news-list li .year { padding-top: 4px; font-size: 14px; }
.news-list li .con { width: 78%; }
.news-list li .con h4 { font-size: 16px; line-height: 140%; } 
.news-list li .con p { padding-top: 8px; line-height: 180%; }
}

/* contact */
.contact {padding: 80px 0; background: #fefefe;}
.contact dl {display: flex; border: 1px solid #eee; padding:15px 10px; border-radius: 3px; transition: all .5s ease-in-out;}
.contact dl svg {fill: #f03c98; transition: all .5s ease-in-out;}
.contact .col-lg-3:nth-child(2) dl svg {fill:#00C800;}
.contact .col-lg-3:nth-child(3) dl svg {fill:#1296db;}
.contact dl:hover { border: 1px solid #f03c98; background: #f03c98; color: #fff;}
.contact dl:hover svg {fill: #fff !important;}
.contact dt {width: 60px; display: flex; justify-content: center; align-items: center;}
.contact dd,
.contact dd p {margin: 0;}
.contact dd h2 {margin: 0; font-size: 16px;}
.contact dd span {font-size: 18px; font-family:"DIN-Light", Arial, Helvetica, sans-serif; font-weight: bold;}
.contact dd p {padding: 3px 0; font-size: 14px; font-family: 'Microsoft YaHei','Lucida Grande','Lucida Sans Unicode',sans-serif;}


/* ---------- footer ---------- */
footer { background: #f03c98; color: #fff; font-size: 14px; }
footer a { color: #fff; }
footer a:hover { color: #fff; }
.footer-con { padding: 80px 0 60px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-sns { float: left; width: 16%; }
.footer-sns .weixin-qrcode { width: 120px; }
.footer-sns .weixin-qrcode img { width: 100%; }
.footer-center { float: left; }
.footer-nav { line-height: 20px; }
.footer-nav a { margin-right: 48px; }
.footer-other { padding-top: 44px; line-height: 28px; }
.footer-contact { float: right; }
.footer-tel h4 { font-family: "DIN-Light"; font-size: 28px; font-weight: normal; color: #fff; }
.footer-tel p { padding-top: 4px; font-size: 13px; text-align: right; }
.footer-mail { padding-top: 46px; text-align: right; }
.footer-btm { padding: 30px 0 60px; font-size: 13px; line-height: 24px; }
.footer-btm .copyright { float: left; }
.footer-btm .beian { float: right; }
.footer-btm .beian span { padding-left: 12px; }
@media (max-width: 1200px) {
  .footer-nav a { margin-right: 24px;}
}

/* responsive */
@media only screen and (max-width: 992px) {
  .footer-con { padding: 60px 0 40px; border-bottom: 1px solid rgba(255,255,255,0.1);}
  .footer-sns { float: none; width: auto; }
  .footer-sns .weixin-qrcode { width: auto; text-align: center; }
  .footer-sns .weixin-qrcode img { width: 120px; }
  .footer-center { float: none; padding: 32px 0; }
  .footer-nav { line-height: 40px; text-align: center; }
  .footer-nav a { display: inline-block; margin-right: 0; width: 33.33%; text-align: center; }
  .footer-other { display: none; }
  .footer-contact { float: none; text-align: center; }
  .footer-tel h4 { display: inline-block; }
  .footer-tel p { padding-top: 4px; font-size: 13px; text-align: center; }
  .footer-mail { padding-top: 32px; text-align: center; }
  .footer-btm { padding: 24px 0 48px; font-size: 12px; line-height: 20px; text-align: center; }
  .footer-btm .copyright { float: none; }
  .footer-btm .beian { float: none; padding-top: 8px;} 
  .footer-btm .beian span { display: block; padding-left: 0;}
}

/* ban */
.ban {width: 100%;}
.showBan {width: initial; height: 100%; background-position: center center;}

/* ---------- sub nav ---------- */
.sub-nav { padding: 88px 0 48px; border-bottom: 1px solid #efefef; overflow: hidden; }
.sub-nav ul {margin: 0; padding: 0; list-style-type: none; width: calc(100% + 20px); }
.sub-nav li { float: left; margin: 0 20px 0 0; width: calc(100% / 6 - 20px); }
.sub-nav li a { display: block; height: 48px; border: 1px solid #f03c98; color: #f03c98; font-size: 16px; line-height: 48px; text-align: center; transition: all .3s ease-in-out; }
.sub-nav li a:hover,
.sub-nav li a.current { border: 1px solid #f03c98; background: #f03c98; color: #fff; }

/* responsive */
@media only screen and (max-width: 1024px) {
  .sub-nav { padding: 28px 0 12px; }
  .sub-nav ul {margin: 0; padding: 0; list-style-type: none; width: calc(100% + 8px); }
  .sub-nav li { margin: 0 8px 8px 0; width: calc(100% / 2 - 8px); }
  .sub-nav li a { height: 40px; font-size: 15px; line-height: 40px; }
}

/* ----- honor ------- */
.honor-box {text-align: center; overflow: hidden;}
.honor-box a p {padding: 10px 0; font-size: 14px; font-weight: bold;}
.honor-box a img {transition: all .3s ease-in-out;}
.honor-box a:hover {color: #f03c98;}
.honor-box a:hover img {transform: scale(1.05);}
@media (min-width: 992px) {
  .honor-box a p {font-size: 16px; }
}

.item-box .item-img { position: relative; padding-bottom: 100%; width: 100%; overflow: hidden; }
.item-box .item-img span { display: -webkit-box; display: -webkit-flex; display: flex; position: absolute; overflow: hidden; width: 100%; height: 100%; cursor: pointer; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; }
.item-box .item-img span img { visibility: inherit; object-fit: cover; font-family: "object-fit: cover;"; min-height: 1px; -webkit-user-select: none; user-select: none; width: 100%; height: 100%; -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; }
.item-box .item-img:hover span img {transform: scale(1.1);}
.item-box p {display: block; padding: 10px 0; background: #f03c98; line-height: 20px; font-size: 14px; color: #fff;  text-align: center; border-radius: 0 0 3px 3px;}
@media (min-width: 992px) {
  .item-box p {padding: 20px 0; font-size: 18px; font-weight: bold;}
}

/* showPage */
.showPage a {color: #f03c98;}
.showPage .page-item.active .page-link { background-color: #f03c98 !important; border-color: #f03c98 !important; }
.showPage a.page-link:hover {color: #c5096a;}

/* news */
.news-lists .date { padding: 16px 0; border-bottom: 1px solid #efefef; font-family: Arial; font-size: 16px; color: #999; text-align: right; }
.news-lists .pic { margin-top: 40px; overflow: hidden; }
.news-lists .pic img { width: 100%; transition: all 0.5s ease-in-out; }
.news-lists .con { padding: 30px 0; }
.news-lists .con h4 { font-size: 16px; }
.news-lists .con p { padding-top: 16px; font-size: 14px; color: #999; line-height: 200%; }
.news-lists a:hover .pic img { transform: scale(1.1); }
@media (min-width: 992px) {
  .news-lists .con h4 { font-size: 20px; }
}

/* ---------- article ---------- */
.article { padding: 60px 0; }
.article-bar .crumb { display: inline-block; padding: 0 15px; height: 30px; border: 1px solid #efefef; border-radius: 4px; color: #999; line-height: 30px; }
.article-bar .crumb a { color: #999; } 
.article-bar .crumb a:hover { color: #333; }
.article-con { padding-top: 60px; } 
.article-info { float: left; width: 120px; } 
.article-info .date { padding: 30px 0; background: #efefef; }
.article-info .date span { display: block; font-family: "DIN-Light"; text-align: center; }
.article-info .date span.year { position: relative; font-size: 18px; }
.article-info .date span.year:before { position: absolute; top: 50%; left: 15px; width: 20px; height: 1px; background: #ccc; content: ""; }
.article-info .date span.year:after { position: absolute; top: 50%; right: 15px; width: 20px; height: 1px; background: #ccc; content: ""; }
.article-info .date span.day { padding: 6px 0; font-size: 28px; } 
.article-info .date span.time { font-size: 18px; }
.article-info .visit { margin-top: 32px; padding: 40px 0; border-top: 1px solid #efefef; text-align: center; }
.article-info .visit i.ico { display: inline-block; width: 40px; height: 40px; border: 2px solid #e0e0e0; border-radius: 100%; background: url("/html/static/images/visit-ico.png") no-repeat center; }
.article-info .visit span { display: block; padding-top: 10px; font-family: "DIN-Light"; }
.article-body { float: left; margin-left: 40px; width: 63%; }
.article-body .tit { padding-bottom: 36px; border-bottom: 1px solid #efefef; } 
.article-body .tit h2 { font-size: 32px; line-height: 150%;}
.article-body .con { padding-top: 64px; font-size: 15px; line-height: 280%; }
.article-body .con p { padding-bottom: 32px; }
.article-body .con img { padding: 20px 0; width: 100%; }
.article-related { float: right; padding-top: 6px; width: 21%; }
.article-related ul { margin: 0; padding: 0; list-style-type: none;}
.article-related li { padding: 20px 0; }
.article-related .bar { padding: 16px 0; border-bottom: 1px solid #efefef; font-size: 15px; color: #666; }
.article-related h4 { padding-top: 32px; font-size: 16px; }
.article-related p { padding-top: 16px; font-size: 14px; color: #999; line-height: 200%; }
@media (max-width: 1200px) {
  .article-body { width: 58%; }
}
/* responsive */
@media only screen and (max-width: 1024px) {
.article-body { float: right; margin-left: 0; width: 78%; }
.article-related { padding-top: 6px; width: 78%; }
}

@media only screen and (max-width: 768px) {
.article { padding:40px 0; }
.article-con { padding-top: 48px; } 
.article-info { display: none; }
.article-body { float: none; margin-left: 0; width: auto; }
.article-body .tit { padding-bottom: 24px; }
.article-body .tit h2 { font-size: 20px; }
.article-body .con { padding-top: 40px; line-height: 240%; }
.article-body .con p { padding-bottom: 24px; }
.article-body .con img { padding: 12px 0; }
.article-related { float: none; padding-top: 40px; width: auto; }
.article-related li { padding: 16px 0; } 
.article-related .bar { padding: 12px 0; }
.article-related h4 { padding-top: 20px; }
.article-related p { padding-top: 12px; line-height: 180%; }
}

/* ---------- friends ---------- */
.friends { padding: 100px 0 120px; }
.friends-tit h2 { font-size: 32px; }
.friends-tit p { padding-top: 32px; font-size: 15px; color: #999; line-height: 200%; }
.friends-con { padding-top: 80px; overflow: hidden; }
.friends-con ul { width: calc(100% + 60px); }
.friends-con li { float: left; padding-right: 60px; width: 20%; box-sizing: border-box; }
.friends-con li:nth-child(-n+5) .item { border-top: 1px solid #efefef; }
.friends-con li .item { border-bottom: 1px solid #efefef; }
.friends-con li .item h4 { padding: 40px 0 20px; font-size: 15px; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.friends-con li .item p { display: table; height: 120px; }
.friends-con li .item span { display: table-cell; vertical-align: middle; }
.friends-con li .item span img {  width: 100%; }

/* responsive */
@media only screen and (max-width: 1024px) {
.friends-con ul { width: calc(100% + 40px); } 
.friends-con li { padding-right: 40px;}
}

@media only screen and (max-width: 768px) {
.friends { padding: 80px 0 100px;}
.friends-tit h2 { font-size: 24px; }
.friends-con { padding-top: 60px; overflow: hidden; }
.friends-con ul { width: calc(100% + 20px); }
.friends-con li { float: left; padding-right: 20px; width: 50%; box-sizing: border-box; }
.friends-con li:nth-child(-n+5):nth-child(n+3) .item { border-top: 0; }
.friends-con li .item { border-bottom: 1px solid #efefef; }
.friends-con li .item h4 { padding: 24px 0 12px; font-size: 15px; font-weight: normal; }
.friends-con li .item p { display: table; height: 80px; }
.friends-con li .item span { display: table-cell; vertical-align: middle; }
}

/* works */
.case-list>div a { display: block; box-shadow: 0 0 20px rgba(0,0,0,0.08); transition: all .3s ease-in-out; }
.case-list>div a .pic { position: relative; overflow: hidden; display: flex; justify-content: center; align-items:start; height: 400px; }
.case-list>div a .pic img { max-width:none; transition: all 0.5s ease-in-out; height: 100%; }
.case-list>div a .pic .mask { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 1px solid rgba(255,255,255,0.2); background: url("/html/static/images/case-arrow.png") no-repeat 40% center; opacity: 0; transition: all 0.3s ease-in-out; }
.case-list>div a:hover {box-shadow: 0 0 40px rgba(219, 155, 235, 0.2); }
.case-list>div a:hover .pic img { transform: scale(1.1); filter: brightness(0.4); }
.case-list>div a:hover .pic .mask { background: url("/html/static/images/case-arrow.png") no-repeat center; opacity: 1; }
.case-list>div .con { padding: 24px; }
.case-list>div .con h4 { margin: 0; font-size: 15px; font-weight: bold; }
.case-list>div .con p { margin: 0; padding-top: 12px; font-size: 13px; color: #999; line-height: 200%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (min-width: 576px) {
  .case-list>div a .pic {height: 265px;}
  .case-list>div a .pic img { height: 365px;}
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
  .case-list>div a .pic {height: 265px;}
  .case-list>div a .pic img { height: 365px;}
}
@media (min-width: 1200px) {
  .case-list>div a .pic {height: 365px;}
  .case-list>div a .pic img { height: 465px;}
}
@media (min-width: 1440px) {
  .case-list>div a .pic {height: 465px;}
  .case-list>div a .pic img { height: 565px;}
}

/* lesson */
.brand_words{ text-align: center;margin-top: 5.83%;}
.brand_words h1{ font-size: 1.44444rem; margin-bottom: 15px; }
.brand_words p{ font-family: "DIN-Light", 'Microsoft YaHei', Arial, Helvetica, sans-serif;font-size: 1.44444rem;margin-bottom: 2.6%; }
.brand_words hr{ margin-bottom: 25px;}
.brand_words span{ font-size: 0.8rem;display: block;width: 100%; }
@media (min-width: 992px) {
  .brand_words h1,
  .brand_words p { font-size: 2.44444rem;}
  .brand_words span {font-size: 1.2rem;}
}

.goods {float: left; display: inline-block; width: 100%; box-shadow: 0 10px 20px rgba(0,0,0,0.1); vertical-align: top; }
.goods a{display: block; color: #282828; overflow: hidden;}
.goods a .pic { width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: start;}
.goods a img{max-width: none; height: 200px; transition: all .3s ease-in-out;}
.goods .info{padding: 7% 30% 7% 10%;background: url(/html/static/images/arrow1.png) no-repeat 90% center;background-size: 9%; transition: all .3s ease-in-out; position: relative; z-index: 9999;}
.goods .info h5{font-size: 15px; padding-bottom: 5px; margin-bottom: 0;}
.goods .info p{font-size: 13px; opacity: .8; text-overflow: ellipsis;overflow: hidden;white-space: nowrap; margin-bottom: 0;}
.goods:hover .info{color: #fff;background: url(/html/static/images/arrow2.png) no-repeat 90% center #f03c98;background-size: 9%;}
.goods:hover a img { transform: scale(1.1);}
@media (min-width: 576px) {
  .goods a img{ height: 208px;}
}
@media (min-width: 768px) {
  .goods a img{ height: 228px;}
}
@media (min-width: 992px) {
  .goods a img{ height: 238px;}
}
@media (min-width: 1200px) {
  .goods a img{ height: 248px;}
}
@media (min-width: 1440px) {
  .goods a img{ height: 288px;}
}

.masonry-grid { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; }
.goods { display: block; -webkit-column-break-inside: avoid; break-inside: avoid; }
.masonry-grid { -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; }
@media (min-width: 992px) {
  .masonry-grid { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
}

.home_banner .swiper-button-next,
.home_banner .swiper-button-prev { background: rgba(0, 0, 0, .325); width: 60px; height: 60px; border-radius: 50%;}
.home_banner .swiper-button-next::after,
.home_banner .swiper-button-next::before { position: absolute; top: 22px; right: 18px; content: ""; width: 20px; height: 3px; background: #f03c98; transform: rotate(45deg);}
.home_banner .swiper-button-next::after { top: 34px; transform: rotate(-45deg);}

.home_banner .swiper-button-prev::after,
.home_banner .swiper-button-prev::before { position: absolute; top: 22px; left: 18px; content: ""; width: 20px; height: 3px; background: #f03c98; transform: rotate(-45deg);}
.home_banner .swiper-button-prev::after { top: 34px; transform: rotate(45deg);}