@charset "utf-8";
html,body{ width:100%; height:100%; position:relative;}
.wrapper{ width:100%; height:100%; display:block; background:url(../images/page/banner_index.jpg) no-repeat 80% top; background-size:cover; position:relative;}

.slogan{ width:515px; display:inline-block; position:absolute; top:50%; right:50%; padding-left:20px; margin-top:-200px;}
.tsm{ display:block; position:relative;}
.tsm .tsm_en{ width:190px; font-size:19px; color:#fff; position:absolute; bottom:12px; left:300px;}
.jtb{ display:block; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,.5);}
.jtb .jt01{ font-size:45px; color:#fff; font-weight:bold;}
.jtb .jt02{ font-size:25px; color:#fff; letter-spacing:-1px;}
.atb{ display:block;}
.atb .att{ font-size:21px; color:rgba(255,255,255,.8); padding-bottom:10px;}
.fbqrcode{ padding-top:10px; display:block;}
.fbqrcode .code{ vertical-align:middle; display:inline-block; padding-right:15px;}
.fbqrcode .fbname{ font-size:25px; color:#fff; vertical-align:middle; display:inline-block;}
.fbqrcode .fbname p:last-child{ font-size:16px; padding-top:5px;}
.fbqrcode .fbname p span{ font-weight:bold;}
.fbqrcode .teacher_name{ display:inline-block; vertical-align:middle;}
.music_source{ position:absolute; bottom:15px; left:15px; height:47px; line-height:47px; color:#fff; font-size:15px; z-index:100;}
.bg_music_btn{ position:absolute; right:15px; bottom:15px; display:inline-block; z-index:100;}
.people{ font-size:15px; color:#fff; border:1px solid #fff; border-radius:5px; margin-top:10px; padding-right:10px; line-height:30px; display:inline-block; letter-spacing:2px;}
.people span{ background-color:#fff; color:#000; display:inline-block; line-height:30px; padding:0 10px; margin-right:10px; letter-spacing:0;}


.index_footer{ position:fixed; bottom:0; right:0; left:0; margin:auto; text-align:center;}
.index_footer .con{ display:inline-block; margin:0 auto; background-color:#8c004c; padding:10px 0; border-radius:20px 20px 0 0; position:relative;}
.index_footer .con::before{ content:""; display:inline-block; border-style:solid; border-width:44px 23px; border-color:transparent #8c004c #8c004c transparent; position:absolute; bottom:0; left:-45px;}
.index_footer .con::after{ content:""; display:inline-block; border-style:solid; border-width:44px 23px; border-color:transparent transparent #8c004c #8c004c; position:absolute; bottom:0; right:-45px;}
.index_footer .con .link_block{ display:block; text-align:center;}
.index_footer .con .link_block .link{ display:inline-block; background-color:#ca478e; border-radius:5px; margin:0 10px 0 10px; padding:8px 13px; font-size:15px; color:#fff; transform:scale(1); transition:.2s;}
.index_footer .con .link_block .link:hover{ transform:scale(1.1); transition:.2s;}
.index_footer .con .ftt{ font-size:15px; color:#fff; line-height:25px;}
.index_footer .con .ftt a{ color:#fff; display:inline-block;}

@media screen and ( max-width: 1023px) and ( min-width: 768px) {
.slogan{ right:auto; left:20px;}
.index_footer{ position:static;}
.index_footer .con{ width:100%; border-radius:0; text-align:left; padding:10px;}
.index_footer .con::before,.index_footer .con::after{ display:none;}
.index_footer .con .link_block{ padding-bottom:5px;}
.index_footer .con .link_block .link{ margin:0 10px; border:1px solid #fff;}
}


@media screen and ( max-width: 767px) {
.slogan{ width:auto; top:80px; right:auto; left:10px; padding:0; margin-top:0;}
.tsm img{ width:159px;}
.tsm .tsm_en{ width:125px; font-size:12.5px; bottom:7px; left:160px;}
.jtb{ margin-bottom:15px; padding-bottom:15px;}
.jtb .jt01{ font-size:26px;}
.jtb .jt02{ font-size:12px; letter-spacing:.6px;}
.atb .att{ font-size:16px;}
.fbqrcode .fbname{ text-shadow:0 2px 2px rgba(0,0,0,0.5);}
.fbqrcode .teacher_name{ padding-top:10px;}
.music_source{ height:auto; line-height:100%; right:0; left:0; bottom:5px; display:block; text-align:center;}
.bg_music_btn{ right:0; left:0; bottom:25px; display:block; text-align:center;}
.index_footer{ position:static;}
.index_footer .con{ width:100%; border-radius:0; text-align:left; padding:10px;}
.index_footer .con::before,.index_footer .con::after{ display:none;}
.index_footer .con .link_block{ padding-bottom:5px;}
.index_footer .con .link_block .link{ margin:0 10px; border:1px solid #fff;}
}