@charset "utf-8";
/*****************************************************************************************************************************************************************/
/********************************************************************** 手机竖屏 *********************************************************************************/
/*****************************************************************************************************************************************************************/
@media (max-width: 480px) {

html,body {font-size:14px;}

p {margin-bottom:20px;}

.f10 {font-size:0.6rem;}
.f12 {font-size:0.7rem;}
.f14 {font-size:0.8rem;}
.f15 {font-size:0.9rem}
.f16 {font-size:1.0rem}
.f18 {font-size:1.05rem;}
.f22 {font-size:1.1rem;}
.f30 {font-size:1.2rem;}
.f36 {font-size:1.3rem;}
.f45 {font-size:1.4rem;}
.f60 {font-size:1.8rem;}
.f75 {font-size:2rem;}

/*页面宽度*/
#main-block {margin:0 10px;}

/*隐藏PC端*/
#fixed-menu, #header-chat, header {display:none;}

/*移动头部*/
#m-header .sp_header{height:54px; overflow:hidden; background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); position:fixed; top:0; left:0; z-index:99999; width:100%;}
#m-header .sp_logo {float:left; margin:8px 0 0 10px;}
#m-header .sp_logo a {background:url(../images/logo.png) no-repeat; width:56px; height:44px; background-size:100%; display:block;}
#m-header .sp_nav {width:54px;float:right;position:relative;cursor:pointer;height:30px;margin-top:16px;}
#m-header .sp_nav span{display:block;background:#fff; width:30px;height:3px;position:absolute;left:10px;transition:all ease 0.2s}
#m-header .sp_nav span:nth-of-type(1){top:0px}
#m-header .sp_nav span:nth-of-type(2){top:10px}
#m-header .sp_nav span:nth-of-type(3){top:20px}
#m-header .sp_nav_se span:nth-of-type(1){top:10px;transform:rotate(45deg)}
#m-header .sp_nav_se span:nth-of-type(2){width:0}
#m-header .sp_nav_se span:nth-of-type(3){top:10px;transform:rotate(-45deg)}
#m-header .sjj_nav {position:fixed; z-index:8; background: rgba(0,0,0,0.9); width:100%; height:calc(100% - 0px); top:-100%;left:0; overflow:auto;overflow-x:hidden;transition:top ease 0.35s;}
#m-header .sjj_nav ul {margin:50px 10px 0 10px; text-align:center; font-size:18px;}
#m-header .sjj_nav li a {color:#fff; width:100%; display:block; padding:20px 0; border-bottom:1px #222 solid;}
#m-header .nav_show{top:0;}
#m-header .sjj_nav .active a {font-weight: bold;}

/************************************/
/**********顶部固定大图开始**********/
/************************************/
#index-top {background:#000; overflow:hidden;}
#index-top .swiper {margin:0;} 
#index-top .swiper-slide {aspect-ratio: 16/9; overflow:hidden;}
#index-top .pic {aspect-ratio: 16/9; animation: scale 18s linear infinite;}
#index-top .pic img {max-width:100%; aspect-ratio: 16/9;}
#index-top .flower {position: absolute; z-index:2; bottom:4%; left:-35%; animation: rotate 8s linear infinite;}
#index-top .flower img {width:45%; opacity: 0.08;}
#index-top .content {color:#fff; position:absolute; z-index:9; bottom:20%; left:5%; text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}
#index-top .content .txta {font-size:32px; font-weight:600;}
#index-top .content .txtb {font-size:32px; font-weight:600; text-indent: 2em;}
#index-top .content .txtc {font-size:15px; padding-top:2%; line-height:1.6; font-weight:400; color:#ddd;}

/*首页专业*/
#index-major {background:#fff;}
#index-major .bt {padding-top:10px;}
#index-major .list {padding-top:10px;}
#index-major .list ul {margin:0 0 -2% -2%; overflow:hidden;}
#index-major .list li {float:left; width:48%; position:relative; background:#f6f6f6; margin:0 0 2% 2%; overflow:hidden;}
#index-major .list li .pic {overflow:hidden; width:100%;}
#index-major .list li .pic img {width:100%; transition: all 0.3s;}
#index-major .list li:hover .pic img {transform: scale(1.1); transition: all 0.3s;}
#index-major .list li .content {margin:10px;}
#index-major .list li .title {margin-bottom:5px;}
#index-major .list li .more {position: absolute; right:10px; bottom:10px; transition: all 0.3s;}
#index-major .list li:hover .more {right:10px; bottom:10px; transition: all 0.3s;}

/*首页作品*/
#index-work {margin-top:10px; background:#000; padding:10px 0;}
#index-work .bt {margin:0;}
#index-work .swiper {width:100%;}
#index-work .swiper-wrapper {padding:10px 0 20px 0;}
#index-work .swiper-slide {overflow:hidden; width:100%; aspect-ratio: 3/4;}
#index-work .swiper-slide img {width:100%; transition: all 0.3s;}
#index-work .swiper-slide:hover img {transform: scale(1.1); transition: all 0.3s;}
#index-work .swiper-pagination {margin-bottom:-12px;}
#index-work .swiper-pagination-bullet {background:#eee; width:10px; height:10px; opacity:1;}
#index-work .swiper-pagination-bullet-active {background:#fd6442;}

/*首页师资*/
#index-teacher {background:#fff; padding:10px 0;}
#index-teacher .bt {margin:0;}
#index-teacher .swiper {width:100%;}
#index-teacher .swiper-wrapper {padding:10px 0 8% 0;}
#index-teacher .swiper-slide {width:100%; aspect-ratio: 3/4;}
#index-teacher .swiper-slide .pic {overflow:hidden;}
#index-teacher .swiper-slide .pic img {width:100%; transition: all 0.3s;}
#index-teacher .swiper-slide .pic:hover img {transform: scale(1.1); transition: all 0.3s;}
#index-teacher .swiper-pagination {margin-bottom:-12px;}
#index-teacher .swiper-pagination-bullet {background:#eee; width:10px; height:10px; opacity:1;}
#index-teacher .swiper-pagination-bullet-active {background:#000;}
#index-teacher .title {margin:10px 0 10px 0;}

/*首页新闻*/
#index-news {background:#f6f6f6; padding:10px 0;}
#index-news .bt {margin:0;}
#index-news .list {margin-top:10px;}
#index-news .left {width:100%;}
#index-news .left .pic {overflow:hidden;}
#index-news .left .pic img {width:100%; aspect-ratio: 4/3; transition: all 0.3s;}
#index-news .left a:hover img {transform: scale(1.1); transition: all 0.3s;}
#index-news .left .title {margin:10px 0; line-height:1.6;}
#index-news .left .date {margin:0;}
#index-news .right {width:100%; padding:10px 0 30px 0;}
#index-news .right li {padding:10px; margin-top:10px; background:#fff;}
#index-news .right .date {margin-bottom:10px;}
#index-news .right .title {line-height:1.6;}
#index-news .more {position:absolute; right:0; bottom:0;}

/*首页FAQ*/
#index-faq {background:#fff; padding:10px 0;}
#index-faq .left {float:left; width:100%;}
#index-faq .right {float:left; width:100%; margin-top:15px;}
#index-faq .faq-container {margin:10px 0 0 0;}
#index-faq .faq-item {overflow: hidden; border-bottom:1px #eee solid;}
#index-faq .faq-title {padding:15px 10px 15px 0; cursor: pointer;  display: flex; justify-content: space-between; align-items: center; transition: background .3s ease; }
#index-faq .arrow {width:8px; height:8px; border: solid #ddd; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
#index-faq .faq-content {height:0; overflow: hidden; transition: height .3s ease-out, padding .2s ease-out; line-height:180%;}
#index-faq .faq-item.active .faq-content {padding:0 0 10px 0; line-height:180%;}
#index-faq .faq-item.active .arrow {transform: rotate(-135deg);}
#index-faq .faq-content.calc {height: auto !important; padding:30px 0 !important;}
#index-faq .content {margin-top:10px; line-height:2; text-align: justify;}
#index-faq .content p {margin:10px 0;}
#index-faq .more {float:left;}
#index-faq .more a {background:#fff; border:1px #000 solid; padding:1vh 3vw; display: block;}
#index-faq .more a:hover {background: #000; color:#fff; border:1px #000 solid;}

/*底部*/
footer {margin-bottom:53px; background:#000; background-size:cover; overflow:hidden;}
footer .content {border-bottom:1px #222 solid; padding:10px 0 0 0;}
footer .list {width:100%;}
footer .list ul {float:left; margin-bottom:15px; width:100%;}
footer .list li {float:left; margin:15px 30px 0 0;}
footer .list li a:hover {color:#fff;}
footer .list .text {margin:10px 0 0 0;}
footer .list .chat {float:left;}
footer .list .chat a {background:#fd6442; color:#fff; padding:1vh 3vw; display: block;}
footer .list .chat a:hover {background: #fff; color:#000;}
footer .copyright {float:left; padding:10px 0; line-height:1.6;}
footer .copyright .nbsp {margin:0 8px;}

/*移动底部*/
#m-footer {position:fixed; left:0; bottom:0; width:100%; height:54px; background:#333; z-index:9999;}
#m-footer ul {display:flex;}
#m-footer li {flex:1; text-align:center; font-size:17px;}
#m-footer .add a {height:54px; line-height:54px; background:#000; color:#fff; display: block;}
#m-footer .tel a {height:54px; line-height:54px; color:#fff; display: block;}
#m-footer .chat a {height:54px; line-height:54px; background:#fd6442; color:#fff; display: block;}

/*******************************内页开始*******************************/

/*内页宽度*/
#n-block {margin:0 10px;}

/*内页BANNER*/
#n-banner {position:relative; width:100%; background:#000; overflow:hidden;}
#n-banner .pic {margin:0;}
#n-banner .pic img {width:100%;}
#n-banner .content {position:absolute; left:20%; bottom:30%; text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}
#n-banner .path {text-transform: uppercase;}

/*左侧菜单*/
#left-menu {margin:0;}
#left-menu li {float:left; margin:10px 10px 0 0;}
#left-menu li a {padding:1vh 3vw; background:#f6f6f6; display:block;}
#left-menu li .active {font-weight:bold; background:#000; color:#fff;}

/*学校简介*/
#about {padding-top:10px;}
#about .left {width:100%;}
#about .left img {width:100%;}
#about .left .video {aspect-ratio: 4/3; overflow:hidden;}
#about .left .video video {width:100%; aspect-ratio: 4/3;}
#about .right {margin-top:10px; width:100%;}
#about .content {line-height:2.2; text-align: justify;}
#about .content p {margin:0 0 15px 0;}
#about .more1 {float:left; margin-top:10px;}
#about .more1 a {background:#000; color:#fff; border:1px #000 solid; padding:1vh 3vw; display: block;}
#about .more1 a:hover {background:#fff; color:#000; border:1px #000 solid;}
#about .more2 {float:left; margin:10px 0 0 20px;}
#about .more2 a {background:#fff; border:1px #000 solid; padding:1vh 3vw; display: block;}
#about .more2 a:hover {background: #000; color:#fff; border:1px #000 solid;}

/*发展历程*/
#events {padding:20px 0 10px 0;}
#events .swiper {width:100%;}
#events .swiper-wrapper {padding:20px 0;}
#events .swiper-slide {width:100%;}
#events .content {margin-top:10px; line-height:1.6;}
 
/*荣誉资质*/
#honor {padding:10px 0; min-height:35vh;}
#honor .list {margin:0;}
#honor .list ul {margin:0 0 -3% -2%; display:flex; flex-wrap:wrap;}
#honor .list li {flex-basis:calc(48%); margin:0 0 3% 2%;}
#honor .list li:nth-of-type(3n+1){clear:both;}
#honor .list li .pic {overflow:hidden;}
#honor .list li .pic img {width:100%; aspect-ratio: 4/3; transition: all 0.3s;}
#honor .list a:hover img {transform: scale(1.1); transition: all 0.3s;}
#honor .list .title {padding:10px 0 0 0; line-height:1.6;}

/*荣誉内容*/
#honor-content {padding:10px 0; min-height:35vh;}
#honor-content .title {line-height:1.6;}
#honor-content .content {margin-top:10px; line-height:1.6; text-align:center;}
#honor-content .content img {max-width:100%;}

/*学校环境*/
#environment {padding:10px 0; min-height:35vh;}
#environment .list {margin:0;}
#environment .list ul {margin:0 0 -3% -2%; display:flex; flex-wrap:wrap;}
#environment .list li {flex-basis:calc(48%); margin:0 0 3% 2%;}
#environment .list li:nth-of-type(3n+1){clear:both;}
#environment .list li .pic {overflow:hidden;}
#environment .list li .pic img {width:100%; aspect-ratio: 4/3; transition: all 0.3s;}
#environment .list a:hover img {transform: scale(1.1); transition: all 0.3s;}
#environment .list .title {padding:10px 0 0 0; line-height:1.6;}

/*环境内容*/
#environmen-content {padding:10px 0; margin-bottom:-10px;}
#environmen-content .content {margin-top:10px; text-align:center;}
#environmen-content .pictitle {margin-top:-10px; line-height:1.6;}
#environmen-content img {max-width:100%;}

/*专业课程*/
#major {padding:10px 0 0 0;}
#major .profile {float:left; width:100%;}
#major .pic1 {display:none; float:right; width:46%; aspect-ratio: 4/3; background:url('../images/major_makeup.webp') center center no-repeat; background-size:cover;}
#major .pic2 {display:none; float:right; width:46%; aspect-ratio: 4/3; background:url('../images/major_hairdressing.webp') center center no-repeat; background-size:cover;}
#major .pic3 {display:none;float:right; width:46%; aspect-ratio: 4/3; background:url('../images/major_manicure.webp') center center no-repeat; background-size:cover;}
#major .pic4 {display:none; float:right; width:46%; aspect-ratio: 4/3; background:url('../images/major_beauty.webp') center center no-repeat; background-size:cover;}
#major .bt {display:flex; justify-content:space-between; align-items:center;}
#major .content {padding:10px 0; line-height:2;}
#major .time {line-height:2;}
#major .chat {float:left; margin-top:10px;}
#major .chat a {background:#fd6442; color:#fff; padding:1vh 3vw; display: block;}
#major .chat a:hover {background:#000; color:#fff;}

/*热门课程*/
#major-course {padding:20px 0 0 0;}
#major-course .list {padding:10px 0 0 0;}
#major-course .list ul {width:102%; margin-left:-2%;}
#major-course .list li {float:left; width:48%; margin:0 0 3% 2%;}
#major-course .list li img {width:100%;}
#major-course .title {padding:10px 0 0 0;}

/*专业特色*/
#major-feature {padding:10px 0 0 0;}
#major-feature .pic {margin-top:10px; max-width:100%;}
#major-feature .pic img {width:100%;}

/*就业前景*/
#major-employment {padding:20px 0 0 0;}
#major-employment .pic {margin:10px 0; max-width:100%;}
#major-employment .pic img {width:100%;}

/*专业师资、作品*/
#major-teacher, #major-work {padding:0 0 10px 0;}
#major-teacher .bt, #major-work .bt {display:flex; justify-content:space-between; align-items:center;}
#major-teacher .swiper, #major-work .swiper {width:100%;}
#major-teacher .swiper-wrapper, #major-work .swiper-wrapper {padding:10px 0 20px 0;}
#major-teacher .swiper-slide .title {margin:10px 0;}
#major-teacher .swiper-slide .content {line-height:1.6;}
#major-teacher .swiper-slide .pic, #major-work .swiper-slide .pic {overflow:hidden; width:100%; aspect-ratio: 3/4;}
#major-teacher .swiper-slide .pic img, #major-work .swiper-slide .pic img {width:100%; transition: all 0.3s;}
#major-teacher .swiper-slide:hover .pic img, #major-work .swiper-slide:hover .pic img {transform: scale(1.1); transition: all 0.3s;}
#major-teacher .swiper-pagination, #major-work .swiper-pagination {margin-bottom:-12px;}
#major-teacher .swiper-pagination-bullet, #major-work .swiper-pagination-bullet {background:#eee; width:10px; height:10px; opacity:1;}
#major-teacher .swiper-pagination-bullet-active, #major-work .swiper-pagination-bullet-active {background:#000;}
#major-teacher .more, #major-work .more {margin:0;}
#major-teacher .more a, #major-work .more a {background:#fff; color:#000; border:1px #000 solid; padding:1vh 3vw; display: block;}
#major-teacher .more a:hover, #major-work .more a:hover {background:#000; color:#fff; border:1px #000 solid;}

/*师资列表*/
#teacher-list {padding:10px 0; min-height:35vh;}
#teacher-list .list {margin:0;}
#teacher-list .list ul {margin:0 0 -3% -2%; display:flex; flex-wrap:wrap;}
#teacher-list .list li {flex-basis:calc(48%); margin:0 0 3% 2%;}
#teacher-list .list li .pic {overflow:hidden;}
#teacher-list .list li .pic img {width:100%; aspect-ratio: 3/4; transition: all 0.3s;}
#teacher-list .list a:hover img {transform: scale(1.1); transition: all 0.3s;}
#teacher-list .list .title {margin:10px 0;}
#teacher-list .list .position {line-height:1.6;}

/*师资内容*/
#teacher-content {padding:10px 0; min-height:35vh;}
#teacher-content .left {width:100%;}
#teacher-content .left img {width:100%; aspect-ratio: 3/4;}
#teacher-content .left .video {aspect-ratio: 3/4; overflow:hidden;}
#teacher-content .left .video video {width:100%; height:auto;}
#teacher-content .right {margin-top:10px;}
#teacher-content .right .title {margin-bottom:10px;}
#teacher-content .right .content {margin-top:20px; line-height:2;}
#teacher-content .right .content p {margin:5px 0;}

/*作品展示*/
#work {padding:10px 0; min-height:35vh;}
#work .list {column-count:2; column-gap:2%;}
#work .list li {width:100%; overflow:hidden; margin-bottom:10px;}
#work .list li .pic {overflow:hidden; width:100%;}
#work .list li .pic img {width:100%; transition: all 0.3s;}
#work .list li a:hover img {transform: scale(1.1); transition: all 0.3s;}
#work .list .title {margin-top:10px; line-height:1.6;}

/*作品内容*/
#work-content {padding:10px 0; min-height:35vh;}
#work-content .title {margin-bottom:10px;}
#work-content .content {margin-bottom:-20px;}
#work-content .content img {max-width:100%;}
#work-content .content .pictitle {margin-top:-15px; line-height:1.6;}
#work-content .detail {padding-top:10px; line-height:1.6;}

/*新闻动态*/
#news {padding:10px 0; min-height:35vh;}
#news .list {margin:0;}
#news .list ul {margin:0 0 -3% 0;}
#news .list li {width:100%; margin:0 0 10px 0; border-bottom:1px #eee solid; padding-bottom:10px;}
#news .list .left {float:left; width:68%;}
#news .list .title {padding:0 10px 0 0; line-height:1.4; text-align: justify;}
#news .list .date {margin:10px 0;}
#news .list .detail {display:none;}
#news .more {display:none; margin-top:20px;}
#news .more a {background:#fff; color:#000; border:1px #000 solid; padding:1vh 1.2vw; display: block;}
#news .more a:hover {background:#000; color:#fff; border:1px #000 solid;}
#news .list .pic {float:left; margin-left:4%; width:28%; overflow:hidden;}
#news .list .pic img {width:100%; aspect-ratio: 4/3; transition: all 0.3s;}
#news .list a:hover img {transform: scale(1.1); transition: all 0.3s;}

/*新闻内容*/
#news-content {padding:10px 0; margin:0 0 -10px 0; min-height:35vh;}
#news-content .title {line-height:1.6; font-size:20px;}
#news-content .date {margin:5px 0 20px 0;}
#news-content .content {line-height:2; font-size:16px; text-align: justify;}
#news-content .content img {max-width:100%;}
#news-content iframe {width:960px; aspect-ratio:16/9; height:auto; margin:0 auto 30px auto; display: block;}
#news-content video {width:960px; aspect-ratio:16/9; height:auto; margin:0 auto 30px auto; display: block;}

/*联系我们*/
#contact {padding:10px 0; min-height:35vh;}
#contact .list {margin-bottom:10px;}
#contact .list li {padding:20px 0; margin:0 0 10px 0; transition: all 0.2s; background:#f6f6f6;}
#contact .list li .iconfont {transition: all 0.2s; font-size:30px; width:60px; height:60px; line-height:60px; margin:auto; background:#000; color:#fff; border-radius:100px;}
#contact .list li:hover .iconfont {background:#fd6442; color:#fff; transition: all 0.2s;}
#contact .list li .title {padding:0 10px; line-height:1.6;}
#contact .list li .detail {padding:10px 10px 0 10px; line-height:1.6;}
#contact .contact-list {margin:0; overflow:hidden;}
#contact .contact-list li {margin:15px 0 5px 0; line-height:1.6;}
#contact .contact-list .title {margin-bottom:10px;}

}