.warp{ margin:0 auto; width:100%;  padding-bottom: 0.32rem; min-width:320px; max-width:750px; background: #f9f9f9;}
.banner {margin-top: 0.2rem;}
.banner .swiper-container{width: 100%;-webkit-perspective: 1200px;-moz-perspective: 1200px;-ms-perspective: 1200px;perspective: 1200px;}
.banner .swiper-slide{width: 80%;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d}
.banner .swiper-slide img {width: 100%;margin: 0 auto;display: block}
.banner .swiper-pagination-bullet {background: #FFFFFF;opacity: 1;}
.banner .swiper-pagination-bullet-active{background: #00b0fa;}


.section{ width: 92%; margin: 0.32rem auto 0; padding: 0.32rem; background: #ffffff; border-radius: 0.18rem; box-sizing: border-box;}
.section .caption{ padding-left: 0.3rem; position: relative; font-size: 0.3rem; color: #333333; line-height: 0.3rem;}
.section .caption:before{ content: ''; display: block; width: 0.12rem; height: 0.3rem; position: absolute; left: 0; top: 0; border-radius: 0.06rem; background: #00b0fa;}

.project-describe{ margin: 0.25rem 0; font-size: 0.24rem; line-height: 0.36rem; color: #666666; text-align: justify;}
.series{}
.series dt img{ width: 100%; height: auto; border-radius: 0.18rem}
.series dd{ display: flex; margin-top: 0.32rem;  background: #ffffff; box-shadow: 0 0 0.1rem #dddddd; border-radius: 0.1rem; overflow: hidden;}
.series dd span:nth-child(1){ width: 0.77rem; height: 0.77rem;background: #00b0fa; text-align: center; line-height: 0.77rem; font-size: 0.38rem; font-weight: bold; color: #ffffff; border-radius: 0.1rem; text-shadow: 1px 1px 3px #333333;}
.series dd span:nth-child(2){ flex: 1; padding-left: 0.55rem; font-size: 0.24rem; color: #333333; line-height: 0.77rem;}

.exhibition{ padding-bottom: .26rem}
.exhibition .swiper-slide{ width: 24rem; border-top: .06rem solid #00B0FB; border-bottom: .06rem solid #00B0FB}
.exhibition .swiper-slide img{ width: 100%}
.exhibition .swiper-scrollbar{ bottom: .1rem; left: 45%; width: 10%; height: .04rem; margin: 0 auto; background: #000}
.exhibition .swiper-scrollbar .swiper-scrollbar-drag{ top: -.02rem; width: 30% !important; height: .08rem; background: #00B0FA}
.exhibition .swiper-wrapper{ transform: translate3d(-460px, 0px, 0px); transition-duration: 0ms;}

.platform{ margin: 0.25rem 0 0; font-size: 0.24rem; line-height: 0.36rem; color: #666666; text-align: justify;}
.video{ position: relative;}
.video img{ width: 100%; height: auto;}
.video span{ position: absolute; left: 50%; top: 50%; width: 0.77rem; height: 0.77rem; transform: translate(-50%,-50%);}
.video span img{ width: 100%; height: 100%; cursor: pointer;}


.teacher-container{}
.teacher-container .teacher-list{ padding: 0 0.15rem 0.6rem; display: flex; flex-wrap: wrap; justify-content: space-between}
.teacher-container .teacher-item{ overflow: hidden; width: 2.8rem; margin-top: 0.32rem; border: 1px solid #E6E6E6; border-radius: 0.18rem;}
.teacher-container .teacher-item .photo img{ width: 100%; height: auto;}
.teacher-container .teacher-item .info{ padding-bottom: .1rem; text-align: center}
.teacher-container .teacher-item .info .name{ margin-top: 0.1rem; font-size: 0.28rem; font-weight: bold; color: #00b0fa;}
.teacher-container .teacher-item .desc{ padding-top: .06rem; font-size: 0.24rem; line-height: 0.36rem; color: #6d6d6d;}
.teacher-container .swiper-pagination-bullet { width: 0.3rem; height: 0.06rem; background: #000000; opacity: 1; border-radius: 0.03rem;}
.teacher-container .swiper-pagination-bullet-active{background: #00b0fa;}

.level-list{}
.level-list .level-item{ margin-top: 0.32rem;}
.level-list .level-title{ width: 1.54rem; height: 0.46rem; line-height: 0.46rem; text-align: center; background: #00b0fa; font-size: 0.3rem; color: #ffffff; border-radius: 0.08rem}
.level-list .figure-box{ display: flex; align-items: center; justify-content: space-between; margin-top: 0.27rem;}
.level-list .figure-box figure{ display: block; width: 3.4rem; background: #ffffff; border-radius: 0.16rem; overflow: hidden; box-shadow: 0 0 0.2rem #dddddd;}
.level-list .figure-box figure img{ display: block; width: 100%;}
.level-list .figure-box figure figcaption{ text-align: center; font-size: 0.26rem; color: #333333; line-height: 0.5rem;}

.service{ margin-top: 0.3rem;}
.service .cover-image img{ width: 100%; height: auto;}
.service .service-info{ margin-top: 0.16rem; font-size: 0.24rem; line-height: 0.34rem; color: #666666; text-align: justify;}

.introduce{ margin-top: 0.3rem;}
.introduce .introduce-image img{ width: 100%; height: auto;}
.introduce .introduce-info{ margin-top: 0.16rem; font-size: 0.24rem; line-height: 0.34rem; color: #666666; text-align: justify;}
.introduce .link-button{ margin-top: 0.4rem;}
.introduce .link-button a{ display: block; width: 2.54rem; height: 0.67rem; margin: 0 auto; line-height: 0.67rem; text-align: center; font-size: 0.3rem; color: #ffffff; border-radius: 0.3rem; background: #00b0fa; text-decoration: none;}

.mask{ display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 9; background: rgba(0,0,0,0.5);}
.dialog{ display: none; position: fixed; width: 92%; padding: 0.32rem; left: 4%; top: 50%; transform: translateY(-50%); z-index: 10; background: #ffffff; box-sizing: border-box;}
.dialog .close{ position: absolute; width: 0.34rem; height: 0.34rem;top: 0.32rem; right: 0.32rem;}
.dialog .close img{ width: 100%; height: auto;}

.dialog .main-show{ display: none;}
.dialog .main-show .change-button{ display: block; width: 2.14rem; height: 0.66rem; line-height: 0.66rem; text-align: center; font-size: 0.3rem; color: #ffffff; background: #00b0fa; border-radius: 0.08rem;}
.dialog .main-show .dialog-video{ width:100%; height:3.39rem; margin-top: 0.22rem; position: relative;}
.dialog .main-show .dialog-video> img{ width: 100%; height: auto;}
.dialog .main-show .dialog-video span{ position: absolute; left: 50%; top: 50%; width: 0.77rem; height: 0.77rem; transform: translate(-50%,-50%);}
.dialog .main-show .dialog-video span img{ width: 100%; height: 100%; cursor: pointer;}

.dialog .alternative-box{ display: none;}
.dialog .alternative-title{ font-size: 0.36rem; line-height: 0.36rem; text-align: center; color: #333333;}
.dialog .alternative-items{ margin-top: 0.5rem; display: flex; justify-content: space-between; align-items: center;}
.dialog .alternative-item{ width: 47%; text-align: center;}
.dialog .alternative-item .teacher-photo img{ width: 100%; height: auto;}
.dialog .alternative-item .teacher-name{ margin-top: 0.22rem; font-size: 0.28rem; line-height: 0.36rem; color: #333333;}
.dialog .alternative-item .teacher-name span{ color: #00b0fa;}
.dialog .alternative-item .radio{ width: 0.3rem; height: 0.3rem; position: relative; margin: 0.15rem auto 0; border: 1px solid #00b0fa; border-radius: 50%;}
.dialog .alternative-item.active .radio:after{ content: ''; display: block; width: 0.18rem; height: 0.18rem; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #00b0fa;}
.dialog .alternative-box .sure{ margin: 0.35rem 0 0.03rem;}
.dialog .alternative-box .sure span{ display: block; width: 2.14rem; height: 0.66rem; margin: 0 auto; line-height: 0.66rem; text-align: center; font-size: 0.3rem; color: #ffffff; background: #00b0fa; border-radius: 0.08rem;}