/* reset css start */
body, div, ul, ol, li, dl, dt, dd{margin: 0;padding: 0;}
select, input, textarea{font-family: Arial;font-size: 12px;outline: none;color: #333;}
body{font-family: Arial, '微软雅黑';font-size: 14px;line-height: 1.6;background: #fff;}
img {border: 0;}
ol, ul {list-style: none;}
a{text-decoration: none;color: #333;outline: none;}
a:hover{color: #ec7612;text-decoration: none;}
input::-moz-placeholder{color: #999;}
input::-webkit-input-placeholder{color: #999;}
input::-ms-input-placeholder{color: #999;}
/* reset css end */

.wrap{position: relative;width: 1200px;margin: 0 auto;}
/* footer start */
.footer{padding: 25px 0 30px;text-align: center;color: #999;background: #333;}
.footer a{color: #999;}
.footer a:hover{color: #ec7612;}
.footer p{margin: 0;margin-bottom: 8px;}
.footer p:not(:first-child){font-size: 12px}
.footer p:not(:first-child) a:hover {color: #ccc;text-decoration: underline}
.footer p:last-child > a {margin-right: 18px; position: relative; padding-left: 22px;}
.footer p:last-child > a:before {content: ""; position: absolute; left: 0; top: -4px; width: 18px;height: 20px;background: url(../images/new_images/icon.png) no-repeat -70px -93px}
.footer p span{margin: 0 10px;}
/* footer end */

/* animate */
.animate_box{position: relative;width: 100%;height: 950px;background: url(../images/index_schoolbg.jpg) no-repeat top center; overflow: hidden; background-size: cover;}
.animate_box .sh_logo_box,
.animate_box .sh_loudspeaker_box,
.animate_box .sh_loudspeakerShadow_box,
.animate_box .sh_cartoon_box,
.animate_box .sh_bang,
.animate_box .sh_search,
.animate_box .sh_brands,
.animate_box .sh_search .sh_search_btn,
.animate_box .sh_join{position:absolute;display:inline-block;box-sizing:border-box}

.animate_box .sh_logo_box{top:55px;width:386px;height:60px;background:url(../images/school_index_logo.png) #fff no-repeat 23px center;border-top-right-radius:30px;border-bottom-right-radius:30px;z-index:2}
.animate_box .sh_loudspeaker_box{bottom:0;left:0;width:12.7%;height:28.6%;background:url(../images/loudspeaker.png) no-repeat bottom center;z-index:2;-webkit-animation:pulse 1s ease .3s infinite;animation:pulse 1s ease .3s infinite;background-size:100%}
.animate_box .sh_loudspeakerShadow_box{top:0;right:-5px;width:91.6%;height:88.3%;background:url(../images/louds_bac.png) no-repeat center;z-index:1;-webkit-animation:fadeIn .5s ease .5s;animation:fadeIn .5s ease .5s;background-size:100% 100%}
.animate_box .sh_cartoon_box{bottom:0;right:0;width:21.7%;height:67.6%;background:url(../images/cartoon.png) no-repeat bottom center;z-index:3;-webkit-animation:right_fadeIn .5s ease 1.5s;animation:right_fadeIn .5s ease 1.5s;background-size:100%}
.animate_box .sh_bang{left:50%;top:5.3%;width:36%;height:60%;margin-left:-18.1%;background:url(../images/bang.png) no-repeat center;z-index:3;-webkit-animation:top_fadeIn 1s ease 1s;animation:top_fadeIn 1s ease 1s;background-size:100%}
.animate_box .sh_search{left:50%;bottom:18.7%;margin-left:-350px;width:700px;height:70px;padding-right:50px;line-height:70px;text-align:center;background:#e68210;color:#000;border-radius:42px;font-size:42px;letter-spacing:4px;z-index:2;border:2px solid #fff;transform:rotate(-7deg);-ms-transform:rotate(-7deg);-moz-transform:rotate(-7deg);-webkit-transform:rotate(-7deg);-o-transform:rotate(-7deg);-webkit-animation:bottom_fadeIn 1s ease 1.2s;animation:bottom_fadeIn 1s ease 1.2s}
.animate_box .sh_search .sh_search_btn{position:absolute;top:50%;right:70px;width:56px;height:50px;margin-top:-25px;background:#f4ca97;cursor:pointer}
.animate_box .sh_search .sh_search_btn i{position:absolute;right:1px;bottom:5px;display:inline-block;width:48px;height:38px;background:url(../images/sh_search.png) no-repeat center}
.animate_box .sh_brands{left:50%;bottom:4.2%;height:5%;width:60%;margin-left:-29.5%;background:url(../images/brands.png) no-repeat center;background-size:100%}
.animate_box .sh_join{bottom:42%;right:21.4%;width:10.6%;height:10%;text-align:center;background:#e68112;color:#fff;border:8px solid #f4ae54;font-size:52px;font-weight:700;border-radius:46px;cursor:pointer;z-index:4;-webkit-animation:pulse 1s ease 2s infinite;animation:pulse 1s ease 2s infinite}

.animate_box .sh_loudspeaker_box,
.animate_box .sh_join,
.animate_box .sh_search,
.animate_box .sh_bang,
.animate_box .sh_cartoon_box,
.animate_box .sh_loudspeakerShadow_box{-webkit-animation-fill-mode: both; animation-fill-mode: both;}

@-webkit-keyframes top_fadeIn{
    0%{top:-100%}
    100%{top:5.3%}
}
@keyframes top_fadeIn{
    0%{top:-100%}
    100%{top:5.3%}
}
@-webkit-keyframes bottom_fadeIn{
    0%{bottom:0;opacity:0}
    100%{bottom:18.7%}
}
@keyframes bottom_fadeIn{
    0%{bottom:0;opacity:0}
    100%{bottom:18.7%}
}
@-webkit-keyframes right_fadeIn{
    0%{right:-500px}
    100%{right:0}
}
@keyframes right_fadeIn{0%{right:-500px}
    100%{right:0}
}
@-webkit-keyframes fadeIn{0%{
    opacity:0}
    100%{opacity:1}
}
@keyframes fadeIn{
    0%{opacity:0}
    100%{opacity:1}
}
@-webkit-keyframes pulse{
    0%{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
    1%{opacity:1}
    50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}
    100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes pulse{
    0%{opacity:0;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
    1%{opacity:1}
    50%{-webkit-transform:scale3d(1.05,1.05,1.05);-ms-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}
    100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@media screen and (max-width:1760px){
    .animate_box{height:860px}
    .animate_box .sh_join{font-size:44px}
}
@media screen and (max-width:1670px){
    .animate_box{height:840px}
}
@media screen and (max-width:1440px){
    .animate_box{height:728px}
    .animate_box .sh_join{font-size:36px}
    .animate_box .sh_search{margin-left:-315px;width:630px;height:63px;padding-right:70px;line-height:63px;border-radius:38px;font-size:38px}
    .animate_box .sh_search .sh_search_btn{right:63px}
}
@media only screen and (max-width:1280px){
    .animate_box{height:600px}
    .animate_box .sh_join{font-size:28px}
    .animate_box .sh_logo_box{width:290px;height:42px;background:url(../images/school_index_logo.png) #fff no-repeat 4px center;background-size:auto 100%}
    .animate_box .sh_search{width:610px;height:50px;line-height:50px;font-size:32px}
    .animate_box .sh_search .sh_search_btn{width:48px;height:40px;margin-top:-20px}
    .animate_box .sh_search .sh_search_btn i{right:-1px;bottom:1px;width:40px;height:34px;background-size:cover}
}
