@charset "utf-8";
.container-sai{cursor:default;background-image:url(https://assets-cdn.lanqb.com/topic_sai_pc/bg.jpg);background-size:1920px auto;background-position:top center;background-repeat:repeat-y;}
.container-sai .sai-nav{position:fixed;top:50%;left:0;z-index:12;padding-bottom:16px;width:180px;overflow:hidden;color:#fff;text-align:center;transform:translateY(-50%);}
.container-sai .sai-nav p span{display:block;padding:20px 0;border-bottom:1px solid #b4b4b4;font-size:20px;color:#b4b4b4;text-align:right;cursor:pointer;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
.container-sai .sai-nav p span:hover{color:#fff;}
.topics-list{text-align:center;}
.aft_vm:after{content:'';display:inline-block;vertical-align:middle;width:0;height:100%;}
.numb{height:53px;margin:120px auto 20px;border-bottom:1px solid #892c54;padding-bottom:12px}
.main-h2{margin:0 auto 18px;font-size:40px;color:#ffffff;}
.main-h3{display:inline-block;margin-bottom:40px;padding:8px 2px;font-size:12px;color:#747c86;border-top:1px solid #747c86;border-bottom:1px solid #747c86;font-weight:normal;letter-spacing:2px;text-transform:uppercase;}
.main-intr{margin-bottom:111px;padding:42px 0 0 133px;width:1216px;height:102px;background-image:url(https://assets-cdn.lanqb.com/topic_sai_pc/img05.png);background-size:100% 100%;font-size:16px;color:#ffffff;text-align:justify;line-height:1.923;}
.main-intr span{color:#64ddff;font-weight:bold;}
.sai-btn{display:inline-block;margin-bottom:25px;width:120px;height:44px;line-height:44px;font-size:16px;background-size:100% 100%;text-align:center;}
.sai-btn-pink{color:#ffffff;background-image:url(https://assets-cdn.lanqb.com/topic_sai_m/btn-bg01.png);}
.sai-btn-blue{color:#151515;background-image:url(https://assets-cdn.lanqb.com/topic_sai_m/btn-bg02.png);}
.main-item{overflow:hidden;display:block;width:276px;height:243px;background-size:100% 100%;}
.main-item img{display:block;margin:27px auto 0;width:230px;height:173px;}
.main-item p{height:43px;font-size:16px;text-align:center;}
.main-item p span{display:inline-block;vertical-align:middle;}
.main-item.blue{background-image:url(https://assets-cdn.lanqb.com/topic_sai_m/img07.png);}
.main-item.blue p{color:#64ddff;}
.main-item.pink{background-image:url(https://assets-cdn.lanqb.com/topic_sai_m/img08.png);}
.main-item.pink p{color:#ff4e84;}
.sub-item{width:947px;margin-top:30px;}
.sub-item.left{margin-left:-370px;}
.sub-item.right{margin-right:-370px;}
.sub-item img{width:947px;height:243px;background-size:577px 152px;background-repeat:no-repeat;box-sizing:border-box;}
.sub-item.left img{padding:0 2px 2px 0;background-image:url(https://assets-cdn.lanqb.com/topic_sai_pc/img09.png);background-position:right bottom;}
.sub-item.right img{padding:0 0 2px 2px;background-image:url(https://assets-cdn.lanqb.com/topic_sai_pc/img10.png);background-position:left bottom;}
.sub-item.left.pink img{background-image:url(https://assets-cdn.lanqb.com/topic_sai_pc/img09_02.png);}
.sub-item.right.pink img{background-image:url(https://assets-cdn.lanqb.com/topic_sai_pc/img10_02.png);}
.sub-item p{width:577px;margin-top:17px;font-size:16px;color:#ffffff;text-align:center;}
.main-item img,.sub-item img,.p5-swiper a img,.p4-item img{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
.main-item img:hover,.sub-item img:hover,.p5-swiper a img:hover,.p4-item img:hover{-webkit-filter:brightness(.7);}

/*part01*/
.part01{position:relative;}
.part01 .container{position:relative;}
.img01{position:absolute;left:50%;margin-left:-960px;width:1920px;}
.p1-con{position:absolute;top:210px;right:88px;width:400px;}
.s1-h2{display:inline-block;position:relative;font-size:26px;color:#64ddff;}
.s1-h2:before,.s1-h2:after{content:'';display:inline-block;position:absolute;top:50%;margin-top:-4px;width:9px;height:9px;background-image:url(https://assets-cdn.lanqb.com/topic_sai_m/icon04.png);background-size:100% 100%}
.s1-h2:before{left:-26px;}
.s1-h2:after{right:-26px;}
.s1-h1{margin:6px auto;width:100%;}
.s1-h3{display:inline-block;position:relative;font-size:28px;color:#ffffff;letter-spacing:10px;}
.s1-h3:before,.s1-h3:after{content:'';display:inline-block;position:absolute;top:50%;margin-top:-5px;width:10px;height:10px;background-image:url(https://assets-cdn.lanqb.com/topic_sai_m/icon01.png);background-size:100% 100%}
.s1-h3:before{left:-40px;transform:scale(-1);}
.s1-h3:after{right:-30px;}
.s1-h4{margin:0 auto 10px;display:inline-block;position:relative;font-size:16px;color:#64ddff;}
.s1-h4:before,.s1-h4:after{content:'';display:inline-block;position:absolute;top:50%;margin-top:-3px;width:40px;height:7px;background-image:url(https://assets-cdn.lanqb.com/topic_sai_m/icon02.png);background-size:100% 100%;}
.s1-h4:before{left:-72px;transform:scale(-1);}
.s1-h4:after{right:-72px;}
.s1-line{margin:10px auto;display:block;width:100%;height:4px;background-image:url(https://assets-cdn.lanqb.com/topic_sai_m/icon05.png);background-size:100% 100%}

/*part02*/
.part02 ul li{display:inline-block;width:200px;height:218px;color:#fffdfe;background-image:url(https://assets-cdn.lanqb.com/topic_sai_pc/img03_02.png);background-size:100% 100%;cursor:pointer;transform:translate(0,0);-webkit-transform:translate(0,0);-moz-transform:translate(0,0);}
.part02 ul li:hover{background-image:url(https://assets-cdn.lanqb.com/topic_sai_m/img03.png);}
.part02 ul li + li{margin-left:120px;}
.part02 ul li + li:before{content:'';display:inline-block;position:absolute;top:50%;margin-top:-7px;left:-137px;width:150px;height:14px;overflow: hidden;background-image:url(https://assets-cdn.lanqb.com/topic_sai_pc/img04.png);background-size:auto 100%;}
.part02 ul li p{text-align:center;display:inline-block;vertical-align:middle;font-size:26px;}
.part02 ul li p span{margin-bottom:10px;position:relative;display:block;font-size:20px;}
.part02 ul li p span:after{content:'';display:inline-block;position:absolute;left:50%;bottom:-7px;margin-left:-8px;width:18px;border-top:1px solid #71e3ff;}

/*part03*/
.part03 .container{position:relative;padding-bottom:200px;}
.main-list{z-index:2;position:relative;}
.s-list{display:inline-block;text-align:left;}
.b-item{width:385px;height:336px;}
.b-item img{margin:32px auto 0;width:336px;height:252px; object-fit: cover;}
.b-item p{height:52px;}
.s3-img{z-index:1;position:absolute;left:50%;}

/*part04*/
.b-list .main-item{display:inline-block;margin:0 8px 25px;}
.b-list-title{padding-left:10px;text-align:left;}
.b-list-title p{margin-left:10px;display:inline-block;font-size:14px;color:#ffffff;vertical-align:top;margin-top:26px;}
.p4-list+.p4-list{position:relative;margin-top:262px;}
.p4-list+.p4-list:before{content:'';display:inline-block;position:absolute;left:0;right:0;top:-121px;border-top:1px solid rgb(80,85,90);width:100%;}
.p4-list+.p4-list:after{content:'';display:inline-block;position:absolute;left:50%;top:-122px;margin-left:-88px;border-top:3px solid rgb(80,85,90);width:176px;}
.p4-item{display:block;width:100%;margin-top:30px;text-align:center;}
.p4-item span{position:relative;display:block;width:100%;height:243px;overflow:hidden;}
.p4-item span:before{position:absolute;bottom:0;right:0;z-index:1;width:50%;height:50%;border-bottom:2px solid #64ddff;border-right:2px solid #64ddff;content:'';box-sizing:border-box;}
.p4-item.pink span:before{border-bottom-color:#fc3773;border-right-color:#fc3773;}
.p4-item span img{position:absolute;top:0;left:50%;width:1178px;height:243px;margin-left:-589px;}
.p4-item p{line-height:20px;color:#fff;}

/*part05*/
.part05{position:relative;padding-bottom:80px;}
.p5-swiper a{display:inline-block;float:left;width:184px;}
.p5-swiper a span{position:relative;display:block;}
.p5-swiper a span:before,.p5-swiper a span:after{position:absolute;width:33px;height:34px;content:"";box-sizing:border-box;border-style:solid;border-color:#64ddff;}
.p5-swiper a > span span{display:block;padding:2px;}
.p5-swiper a > span:before{top:0;left:0;border-width:2px 0 0 2px;}
.p5-swiper a > span:after{bottom:0;right:0;border-width:0 2px 2px 0;}
.p5-swiper a > span span:before{top:0;right:0;border-width:2px 2px 0 0;}
.p5-swiper a > span span:after{bottom:0;left:0;border-width:0 0 2px 2px;}
.p5-swiper a img{width:100%;height:100%;}
.p5-swiper a p{margin:20px auto 0;text-align:center;font-size:16px;color:#ffffff;}
.part05 .container{position:relative;}
.part05 .swiper-button-next,.part05 .swiper-button-prev{margin-top:130px;width:60px;height:60px;line-height:60px;border:1px solid rgba(255,255,255,0.5);color:rgba(255,255,255,0.5);background-image:none;font-size:26px;}
.part05 .swiper-button-prev{margin-left:-100px;border-right:2px solid #64ddff;}
.part05 .swiper-button-next{margin-right:-100px;border-left:2px solid #64ddff;}

/*popupbg*/
.popupbg{display:none;z-index:17;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5)}
.popup-sai{position:absolute;top:50%;left:50%;margin:-134px 0 0 -278px;padding:113px 0;text-align:center;width:557px;height:269px;background-image:url(https://assets-cdn.lanqb.com/topic_sai_pc/popup.png);}
.popup-sai .close{width:22px;height:22px;cursor:pointer;position:absolute;top:13px;right:3px;display:inline-block;}
.popup-sai em{display:none;}
.popup-sai a{margin:0 45px!important;display:inline-block;font-size:46px!important;color:#fff!important;line-height:1!important}
@media (min-width:768px){
    .container-sai{background-size:100%;}
    .container-sai .sai-nav{width:110px;/*margin-top:-250px;*/}
    .container-sai .sai-nav p span{font-size:16px;padding:10px 0;}
    .part01{height:480px;}
    .img01,.s3-img{margin-left:-570px;width:1140px;}
    .p1-con{top:110px;right:50px;width:280px;}
    .s1-h2{font-size:20px;}
    .s1-h1{margin:4px auto;}
    .s1-h3{font-size:22px;letter-spacing:4px;}
    .s1-h3:before,.s1-h3:after{width:6px;height:6px;margin-top:-3px;}
    .s1-h3:before{left:-28px;}
    .s1-h3:after{right:-26px}
    .s1-line{margin:4px auto;}
    .s1-h4{font-size:12px;}
    .s1-h4:before,.s1-h4:after{margin-top:-3px;width:30px;height:5px;}
    .s1-h4:before{left:-46px;}
    .s1-h4:after{right:-46px;}
    .part02{margin-top:-96px;}
    .part02 ul li{width:120px;height:131px;}
    .part02 ul li + li{margin-left:33px;}
    .part02 ul li + li:before{margin-top:-5px;left:-44px;width:52px;height:8px;}
    .part02 ul li p{font-size:18px;}
    .part02 ul li p span{font-size:14px;}
    .numb{height:36px;margin:60px auto 10px;}
    .main-h2{font-size:30px;margin:0 auto 10px;}
    .main-intr{width:760px;height:64px;margin-bottom:60px;padding:24px 0 0 82px;font-size:12px}
    .part03 .container{padding-bottom:200px;}
    .s3-img{top:560px;}
    .main-item{width:168px;height:148px;}
    .main-item img{margin:10px auto 0;width:150px;height:113px;}
    .main-item p{font-size:12px;height:25px;}
    .b-item{width:300px;height:262px;}
    .b-item img{margin:20px auto 0;width:266px;height:200px;}
    .b-item p{height:40px;}
    .sub-item{width:616px;}
    .sub-item.left{margin-left:-252px;}
    .sub-item.right{margin-right:-252px;}
    .sub-item img{width:616px;height:157px;}
    .sub-item p{width:380px;font-size:12px;}
    .p4-list+.p4-list{position:relative;margin-top:162px;}
    .p4-list+.p4-list:before{top:-70px;}
    .p4-list+.p4-list:after{top:-71px}
    .p4-item p{margin-top:10px;font-size:14px;}
    .p5-swiper a{width:110px}
    .part05 .swiper-button-next,.part05 .swiper-button-prev{margin-top:70px;}
}
@media (min-width:992px){
    .container-sai{background-size:1920px auto;}
    .container-sai .sai-nav{width:140px;/*margin-top:-280px;*/}
    .container-sai .sai-nav p span{font-size:18px;padding:12px 0;}
    .part01{height:673px;}
    .img01,.s3-img{margin-left:-800px;width:1600px;}
    .p1-con{top:160px;right:60px;width:380px;}
    .s1-h2{font-size:26px;}
    .s1-h1{margin:0 auto;}
    .s1-h3{font-size:28px;letter-spacing:10px;}
    .s1-h3:before,.s1-h3:after{width:10px;height:10px;margin-top:-5px;}
    .s1-h3:before{left:-40px;}
    .s1-h3:after{right:-30px}
    .s1-line{margin:10px auto;}
    .s1-h4{font-size:16px;}
    .s1-h4:before,.s1-h4:after{margin-top:-3px;width:40px;height:7px;}
    .s1-h4:before{left:-66px;}
    .s1-h4:after{right:-66px;}
    .part02{margin-top:-126px;}
    .part02 ul li{width:160px;height:174px;}
    .part02 ul li + li{margin-left:40px;}
    .part02 ul li + li:before{margin-top:-7px;left:-55px;width:65px;height:10px;}
    .part02 ul li p{font-size:26px;}
    .part02 ul li p span{font-size:20px;}
    .numb{height:50px;margin:80px auto 20px;}
    .main-h2{font-size:40px;margin:0 auto 18px;}
    .main-intr{width:1000px;height:84px;margin-bottom:80px;padding:34px 0 0 110px;font-size:14px}
    .part03 .container{padding-bottom:200px;}
    .s3-img{top:545px;}
    .main-item{width:225px;height:198px;}
    .main-item img{margin:12px auto 0;width:204px;height:153px;}
    .main-item p{font-size:14px;height:34px;}
    .b-item{width:320px;height:279px;}
    .b-item img{margin:18px auto 0;width:290px;height:218px;}
    .b-item p{height:44px;}
    .sub-item{width:790px;}
    .sub-item.left{margin-left:-310px;}
    .sub-item.right{margin-right:-310px;}
    .sub-item img{width:790px;height:203px;}
    .sub-item p{width:480px;font-size:16px;}
    .p4-list+.p4-list{position:relative;margin-top:180px;}
    .p4-list+.p4-list:before{top:-90px;}
    .p4-list+.p4-list:after{top:-91px}
    .p4-item p{margin-top:18px;font-size:16px;}
    .p5-swiper a{width:150px}
    .part05 .swiper-button-next,.part05 .swiper-button-prev{margin-top:100px;}
}
@media (min-width:1200px){
    .container-sai{background-size:1920px auto;}
    .container-sai .sai-nav{width:180px;/*margin-top:-250px;*/}
    .container-sai .sai-nav p span{font-size:20px;padding:20px 0;}
    .part01{height:808px;}
    .img01,.s3-img{margin-left:-960px;width:1920px;}
    .p1-con{top:210px;right:88px;width:400px;}
    .s1-h2{font-size:26px;}
    .s1-h1{margin:0 auto;}
    .s1-h3{font-size:28px;letter-spacing:10px;}
    .s1-h3:before,.s1-h3:after{width:10px;height:10px;margin-top:-5px;}
    .s1-h3:before{left:-40px;}
    .s1-h3:after{right:-30px}
    .s1-line{margin:10px auto;}
    .s1-h4{font-size:16px;}
    .s1-h4:before,.s1-h4:after{margin-top:-3px;width:40px;height:7px;}
    .s1-h4:before{left:-72px;}
    .s1-h4:after{right:-72px;}
    .part02{margin-top:-156px;}
    .part02 ul li{width:200px;height:218px;}
    .part02 ul li + li{margin-left:40px;}
    .part02 ul li + li:before{margin-top:-7px;left:-57px;width:70px;height:14px;}
    .part02 ul li p{font-size:26px;}
    .part02 ul li p span{font-size:20px;}
    .numb{height:53px;margin:120px auto 20px;}
    .main-h2{font-size:40px;margin:0 auto 18px;}
    .main-intr{width:1216px;height:102px;margin-bottom:111px;padding:42px 0 0 133px;font-size:16px}
    .part03 .container{padding-bottom:200px;}
    .s3-img{top:650px;}
    .main-item{width:276px;height:243px;}
    .main-item img{margin:27px auto 0;width:230px;height:173px;}
    .main-item p{font-size:16px;height:43px;}
    .b-item{width:385px;height:336px;}
    .b-item img{margin:32px auto 0;width:336px;height:252px;}
    .b-item p{height:52px;}
    .sub-item{width:947px;}
    .sub-item.left{margin-left:-370px;}
    .sub-item.right{margin-right:-370px;}
    .sub-item img{width:947px;height:243px;}
    .sub-item p{width:577px;font-size:16px;}
    .p4-list+.p4-list{position:relative;margin-top:262px;}
    .p4-list+.p4-list:before{top:-121px;}
    .p4-list+.p4-list:after{top:-122px}
    .p5-swiper a{width:184px}
    .part05 .swiper-button-next,.part05 .swiper-button-prev{margin-top:130px;}
}
/* student works */
body{padding-bottom:120px;}
.topics-outcomes .main-h3{margin-bottom:92px;}
.topics-outcomes .out-works-item{background-color: #061B30;border-color: #50555A;border-bottom: none;}
.topics-outcomes .out-works-des{border-top-color: #50555A;border-bottom: 2px solid #FF4E84;}
.topics-outcomes .auther span{color: #FF4E84;}
.topics-outcomes .prof-name{color: #0A121D;background-color:#64DDFF;}