@charset "utf-8";
html, body{position: relative;height: 100%;}
/*电话按钮*/
.phone-btn{position:fixed; right:0.6rem; bottom:14rem;width:4rem; height:4.2rem; background-image:url(../img/phone01.png); background-repeat:no-repeat; background-size: 100%; z-index:6; transform:rotate(0deg) scale(0);-webkit-transform:rotate(0deg) scale(0); }
.phone-btn img{width: 100%;display: block;}

.phone-page-on .phone-btn{transition:all 1s ease;-webkit-transition:all 1s ease;transform:rotate(1080deg) scale(1);-webkit-transform:rotate(1080deg) scale(1);}
.phone-btn3{background-image:url(../img/kefu.png); background-repeat:no-repeat; background-size: 100%;bottom:9rem;}

/*跳转链接动画*/
@-webkit-keyframes chaining
{
    0%{-webkit-transform: scale(0, 0);transform: scale(0, .0);}
    50%{-webkit-transform: scale(1.2, 1.2);transform: scale(1.2, 1.2);}
    100%{-webkit-transform: scale(1, 1);transform: scale(1, 1);
    }}

@keyframes chaining{
    0%{-webkit-transform: scale(0, 0);transform: scale(0, .0);}
    50%{-webkit-transform: scale(1.2, 1.2);transform: scale(1.2, 1.2);}
    100%{-webkit-transform: scale(1, 1);transform: scale(1, 1);
    }}

/*跳转链接*/
.swiper-slide .chaining{position: absolute;left: 50%;font-size: 1.3rem;text-decoration: none;color: #f58220;white-space: nowrap;-webkit-animation: chaining 1s ease;animation: chaining 1s ease;}
/*跳转链接里面的箭头动画*/
@keyframes arrow
{
    0%{opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}
    100%{opacity: 0;-webkit-transform: translateX(.7rem);transform: translateX(.7rem);
    }}

@-webkit-keyframes arrow
{
    0%{opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}
    100%{opacity: 0;-webkit-transform: translateX(.7rem);transform: translateX(.7rem);
    }}
.arrow{display: inline-block;-webkit-animation: arrow 1s ease infinite;animation: arrow 1s ease infinite;}

@keyframes toggleArrow
{   0%,
30%{opacity:0;-webkit-transform:translate(0, 1rem);transform:translate(0, 1rem);}
    60%{opacity:1;-webkit-transform:translate(0, 0);transform:translate(0, 0);}
    100%{opacity:0;-webkit-transform:translate(0, -.8rem);transform:translate(0, -.8rem);
    }}
@-webkit-keyframes toggleArrow
{0%,
30%{opacity:0;-webkit-transform:translate(0, 1rem);transform:translate(0, 1rem);}
    60%{opacity:1;-webkit-transform:translate(0, 0);transform:translate(0, 0);}
    100%{opacity:0;-webkit-transform:translate(0, -.8rem);transform:translate(0, -.8rem);
    }}

#toggle-arrow{position: absolute;left: 50%;bottom: 1.5rem;z-index: 9999;width: 2.4rem;height: 1.4rem;margin-left: -1.2rem;}
#toggle-arrow .toggle-arrow-wrap{position: relative;width: 2.4rem;height: 1.4rem;-webkit-animation: toggleArrow 1.5s infinite;animation: toggleArrow 1.5s infinite;}
#toggle-arrow .fore1,
#toggle-arrow .fore2{height: 1.5rem;width: 1.1rem;position: absolute;top: -.5rem;overflow: hidden;}
#toggle-arrow .fore2{left: 1rem;}
#toggle-arrow .fore1 i,
#toggle-arrow .fore2 i{background-color: #FFF;width: 1.4rem;height: .5rem;border-radius: 2px;position: absolute;box-shadow: 1px -1px 1px #979797;top: .5rem;}
#toggle-arrow .fore1 i{-webkit-transform: rotate(130deg);transform: rotate(130deg);left: .1rem;}
#toggle-arrow .fore2 i{left: -.45rem;-webkit-transform: rotate(50deg);transform: rotate(50deg);}

@-webkit-keyframes musicRotate{0%{-webkit-transform: rotate(0deg);}
    100%{-webkit-transform: rotate(359deg);}}

@keyframes musicRotate{0%{transform: rotate(0deg);}
    100%{transform: rotate(359deg);}}

.container{
    width: 100%;height: 100%;max-width: 640px;margin: 0 auto;
    min-width: 320px;
    overflow:hidden;
    -webkit-box-sizing: border-box;
    position:relative;
    font-size:1rem;
}
.swiper-container{height: 100%;}
.container img,.wrap img{display: block;width: 100%;}




/* 上面是一些常规样式和音乐和箭头样式，下面才是内容区的样式 */
.swiper-pagination-bullet {
    width: .6rem;
    height: .6rem;
    background: #fff;
    opacity: .4;
}
.swiper-pagination-bullet-active {
    opacity: 1;
}
/*.swiper-slide-1{position: relative; background: url(../resource/images/d7e8865618544b9e8f02d1a33335a09f_20.jpg) no-repeat;-webkit-background-size: cover;
    -moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.swiper-slide-2{position: relative; background: url(../resource/images/d7e8865618544b9e8f02d1a33335a09f_22.jpg) no-repeat;-webkit-background-size: cover;
    -moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.swiper-slide-3{position: relative; background: url(../resource/images/d7e8865618544b9e8f02d1a33335a09f_24.jpg) no-repeat;-webkit-background-size: cover;
    -moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.swiper-slide-4{position: relative; background: url(../resource/images/d7e8865618544b9e8f02d1a33335a09f_26.jpg) no-repeat;-webkit-background-size: cover;
    -moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.swiper-slide-5{position: relative; background: url(../resource/images/d7e8865618544b9e8f02d1a33335a09f_28.jpg) no-repeat;-webkit-background-size: cover;
    -moz-background-size: cover;-o-background-size: cover;background-size: cover;}*/
.swiper-slide-1{position: relative; background: url(../resource/images/d7e8865618544b9e8f02d1a33335a09f_20.jpg) no-repeat;-webkit-background-size: 100%;
    -moz-background-size: 100%;-o-background-size: 100%;background-size: 100%;}
.swiper-slide-2{position: relative; background: url(../resource/images/d7e8865618544b9e8f02d1a33335a09f_22.jpg) no-repeat;-webkit-background-size: 100%;
    -moz-background-size: 100%;-o-background-size: 100%;background-size: 100%;}
.swiper-slide-3{position: relative; background: url(../resource/images/d7e8865618544b9e8f02d1a33335a09f_24.jpg) no-repeat;-webkit-background-size: 100%;
    -moz-background-size: 100%;-o-background-size: 100%;background-size: 100%;}
.swiper-slide-4{position: relative; background: url(../resource/images/d7e8865618544b9e8f02d1a33335a09f_26.jpg) no-repeat;-webkit-background-size: 100%;
    -moz-background-size: 100%;-o-background-size: 100%;background-size: 100%;}
.swiper-slide-5{position: relative; background: url(../resource/images/d7e8865618544b9e8f02d1a33335a09f_28.jpg) no-repeat;-webkit-background-size: 100%;
    -moz-background-size: 100%;-o-background-size: 100%;background-size: 100%;}
    
.swiper-slide-6{position: relative; background: url(../img/about_6.jpg) no-repeat;-webkit-background-size: cover;
    -moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.swiper-slide-7{position: relative; background: url(../img/about_7.jpg) no-repeat;-webkit-background-size: cover;
    -moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.swiper-slide-8{position: relative; background: url(../img/about_8.jpg) no-repeat;-webkit-background-size: cover;
    -moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.swiper-slide h3.tit{position: absolute;opacity: 0; z-index: 9;}
.swiper-slide h3.tit img{ width:100%;}
.swiper-slide-active h3.tit{
    opacity:1;
    -webkit-animation-name:zoomIn ;
    animation-name: zoomIn;
    -webkit-animation-duration:1.85s;
    animation-duration:1.85s;}