a {
    zoom: 1;
    color: #fff;
    text-decoration: none;
}
#page1 a {
    color: #337ab7;
}
.banner-bank {
    position:relative;
    color: #073a6c;
    text-align: center;
    background: linear-gradient(to bottom,#b2e7ff,#fff);
    padding-top: 110px;
    padding-bottom: 100px;
}
.banner-bank .banner-title {
    font-size: 36px;
    margin-top: 34px;
    margin-bottom: 20px;
}
.banner-bank .pro-name, .banner-bank .banner-subtitle {
    color:#073a6c;
    font-size: 22px;
}
.banner-bank .download-btns {
    display: flex;
    justify-content: center;
    margin-top: 42px;
}
.banner-bank .download-btns a {
    display: block;
    width: 190px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    font-size: 16px;
    border: 1px solid #4596e5;
    box-shadow: 0 0 30px rgba(69,150,229,.1);
}
.banner-bank .download-btns a.wn-down-link {
    background: #fff;
    color: #4596e5;
    margin-right: 30px;
}
.banner-bank .download-btns a.mc-down-link {
    background: #4596e5;
    color: #fff;
}
.banner-bank .download-btns .icon-windows8, .banner-bank .download-btns .icon-mac {
    margin-left: 10px;
}
.banner-bank .animation-area {
    position: relative;
    height: 153px;
}
.banner-bank .animation-area span {
    display: inline-block;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}
.banner-bank .animation-area span.float-mp3 {
    z-index:-1;
    width: 77px;
    height: 77px;
    color: #c5d873;
    font-size: 25px;
    top: -100px;
    left: 154px;
    animation: fade-from-right 1s ease-in-out 1.5s forwards,img-float 2s ease-in-out 2.5s infinite;
}
.banner-bank .animation-area span.float-mp3:hover{
     background: #c5d873;
     color:#fff;
}
.banner-bank .animation-area span.float-m4a {
    z-index:-1;
    width: 99px;
    height: 99px;
    color: #ed5757;
    left: 355px;
    top: 18px;
    font-size: 24px;
    animation: fade-from-top 1s ease-in-out 3.5s forwards,img-float 2s ease-in-out 4.5s infinite;
}
.banner-bank .animation-area span.float-m4a:hover{
    background: #ed5757;
    color:#fff;
}
.banner-bank .animation-area span.float-flac{
    z-index:-1;
    width: 61px;
    height: 61px;
    color: #f3a818;
    left: 670px;
    top: 38px;
    font-size: 18px;
    animation: fade-from-top 1s ease-in-out 5.5s forwards,img-float 2s ease-in-out 6.5s infinite;
}
.banner-bank .animation-area span.float-flac:hover{
    background: #f3a818;
    color:#fff;
}
.banner-bank .animation-area span.float-wav {
    z-index:-1;
    width: 84px;
    height: 84px;
    color: #4596e5;
    left: 901px;
    top: 10px;
    font-size: 24px;
    animation: fade-from-top 1s ease-in-out 7.5s forwards,img-float 2s ease-in-out 8.5s infinite;
}
.banner-bank .animation-area span.float-wav:hover{
    background: #4596e5;
    color:#fff;
}
@keyframes fade-from-right{
    0%{
        opacity:0;
        z-index:-1;
        transform:translate3d(100%,100%,0);
    }
    100%{
        opacity:1;
        z-index:1;
        transform:translate3d(0,0,0);
    }
}
@keyframes fade-from-top{
    0%{
        opacity:0;
        z-index:-1;
        transform:translate3d(100%,-100%,0);
    }
    100%{
        opacity:1;
        z-index:1;
        transform:translate3d(0,0,0);
    }
}

.banner-bank .pro-images {
    width: 59%;
    margin: auto;
    padding-top:20px;
    display: flex;
    justify-content: center;
    position: relative;
}
.banner-bank .pro-images .img-wrap img.pc {
    display: block;
}

.recommend-banner {
    padding: 0 0 50px 0;
    background: linear-gradient(to bottom,#fefda5,#313131)
}
.recommend-banner h2, .recommend-banner .h2 {
    font-size: 30px;
    text-align: center;
    padding: 65px 0;
    line-height: 30px;
    color: #404040;
}
.recommend-banner .item {
    z-index: 1;
    width: 46.7%;
    border: 0;
    display: block;
    color: #FFFFFF;
    float: left;
    margin-bottom: 6.6%;
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}
.recommend-banner .item h3{
    color:#fff;
}
.recommend-banner .item-l {
    margin-right: 3.3%;
}
.recommend-banner .item-r {
    margin-left: 3.3%;
}
.recommend-banner .item a {
    display: block;
}
.recommend-banner .item a:hover {
    color:#fff;
}
.recommend-banner .item .img {
    z-index: 1;
    position: relative;
    border-radius: 40px;
    overflow: hidden;
}
.recommend-banner .item .img:before {
    z-index: 2;
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/cover-bg.png);
    background-size: 100% 100%;
}
.recommend-banner .item .img img {
    z-index: 0;
    width: 100%;
    transition: all .4s ease;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
}
.recommend-banner .item:hover .img img{
    -webkit-transform:scale(1.05);
    -moz-transform:scale(1.05);
    transform:scale(1.05);
}
.recommend-banner .item .text {
    z-index: 2;
    position: absolute;
    bottom: 0;
    padding: 22px 10%;
    /*background: rgba(57,19,45,0.5);*/
}
.recommend-banner .item h3 {
    font-size: 34px;
    text-align: center;
}
.recommend-banner .item .summary {
    
    text-align: center;
    padding: 8px 0;
    line-height: 24px;
}
.recommend-banner .item .summary p{
   font-size: 18px; 
}

/*       feature         */
.feature-bank h2{
    font-size:36px;
    text-align:center;
    padding:40px 0;
    color:#333;
}
.features{
    background: linear-gradient(to right bottom,#ffffea,#fff);
}
.features .feature {
    padding: 50px 10px;
}
.features .feature.f1, .features .feature.f2, .features .feature.f3, .features .feature.f4, .features .feature.f5, .features .feature.f6{
    -webkit-box-flex: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    min-height: 40vw;
    padding-top: 7.81%;
    margin-bottom: 0;
    background-size: cover;
}
.features .feature.f1 {
    padding-left: 6.25%;
}
.features .feature.f2{
    background:#fff;
}
.features .feature .left {
    float: left;
}
.features .feature .right {
    float: right;
}
.features .feature .feature-text,.features .feature .feature-img {
    width: 50%;
}
.features .feature .p1 {
    margin-top: 0;
    margin-bottom: 0.93em;
    color: #364962;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: 0.2px;
    font-weight: normal;
}
.features .feature .p2 {
    font-weight: 300;
    line-height: 1.62;
    letter-spacing: 0.2px;
    font-size: 18px;
    opacity: 1;
    color: #364962;
    margin-bottom: 10px;
}
.features .feature .p2 a{
    color:#ff5722;
}
.features .feature .animate-area {
    height: 354px;
    width: 90%;
    margin: auto;
    position: relative;
    
}
.features .feature.f3 .animate-area {
    height:auto;
}

.features .feature .animate-area img {
    width: 100%;
}
.features .feature .animate-area .pri-img{
    
    animation: fade-from-bottom 1s ease-in-out 1s backwards;
}
.features .feature .animate-area .sec-img-l-1{
    position:absolute;
    width:70px;
    top:5%;
    left:70%;
    animation: fade-from-left 1s ease-in-out 2s backwards;
}
.features .feature .animate-area .sec-img-l-2{
    position:absolute;
    width:70px;
    top:30%;
    left:70%;
    animation: fade-from-left 1s ease-in-out 3s backwards;
}
.features .feature .animate-area .dow-svg{
    position:absolute;
    width:70px;
    top:20%;
    left:40%;
    animation:fade-from-bottom 1s ease-in-out 4s backwards, img-float 1s ease-in-out 5s infinite;
}
.features .feature .animate-area .sec-img-t-1{
    position:absolute;
    width:70px;
    top:70%;
    left:10%;
    animation: fade-from-top 0.5s ease-in-out 6s backwards;
}
.features .feature .animate-area .sec-img-t-2{
    position:absolute;
    width:70px;
    top:70%;
    left:30%;
    animation: fade-from-left 0.5s ease-in-out 6.5s backwards;
}
.features .feature .animate-area .sec-img-t-3{
    position:absolute;
    width:70px;
    top:70%;
    left:50%;
    animation: fade-from-left 0.5s ease-in-out 7s backwards;
}
.features .feature .animate-area .sec-img-t-4{
    position:absolute;
    width:70px;
    top:70%;
    left:70%;
    animation: fade-from-left 0.5s ease-in-out 7.5s backwards;
}
.features .feature .animate-area span{
    display: flex;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
    justify-content: center;
    align-items: center;
    position: absolute;
}
.features .feature .animate-area .format-mp3 {
    z-index: -1;
    width: 70px;
    height: 70px;
    color: #51c240;
    font-size: 25px;
    top:20%;
    left:20%;
    animation: fade-from-right 1s ease-in-out 7s forwards;
}

.features .feature.f2 .animate-area .lunbo-1{
    position: absolute;
    margin-left:540px;
    animation:move-img 6s ease-in-out infinite;
}
.features .feature.f2 .animate-area .lunbo-2{
    position: absolute;
    margin-left:540px;
    animation:move-img 6s ease-in-out 3s infinite;
}
.features .feature.f3 .animate-area img,.features .feature.f4 .animate-area img{
    padding-top:0;
}
@keyframes move-img{
    0%,25%{
       margin-left:540px;
    }
    
    35%,65%{
        margin-left:0;
    }
    
    75%,100%{
        margin-left:-540px;
    }
}


@keyframes fade-from-bottom{
    0%{
        opacity:0;
        z-index:-1;
        transform:translate3d(0,100%,0);
    }
    100%{
        opacity:1;
        z-index:1;
        transform:translate3d(0,0,0);
    }
}
@keyframes fade-from-left{
    0%{
        opacity:0;
        z-index:-1;
        transform:translate3d(-100%,0,0);
    }
    100%{
        opacity:1;
        z-index:1;
        transform:translate3d(0,0,0);
    }
}
@keyframes img-float{
    0%,100%{
        transform:translateY(0)
    }
    50%{
        transform:translateY(20%)
    }
    
}


/* media reviews */
.media-reviews {
  background: linear-gradient(to right bottom,#fff,#effdff);
  padding: 60px 0;
  text-align: center;
}
.media-reviews h3 {
  font-size: 36px;
  color: #333;
  margin-bottom: 20px;
}
.media-reviews #slider {
  position: relative;
}
.media-reviews .slides li .p1 {
  font-size: 20px;
  line-height: 26px;
  color: #333333;
  margin-bottom: 15px;
}
.media-reviews .slides li .p2 {
  font-size: 16px;
  color: #666;
  line-height: 26px;
  padding: 0 10%;
  margin-bottom: 15px;
}
.media-reviews .slides li .p3 {
  font-size: 18px;
  color: #333;
}
.media-reviews .slides li .p3 a {
  color: inherit;
}
.media-reviews .slides li .p3 img {
  margin-right: 10px;
}
.media-reviews .slides li .p3 a:hover {
  color: #1e96ec;
}

section.why-choose-tunesbank {
    padding: 40px 0;
}
.sub-title {
	font-size: 16px;
	color: #666666;
	line-height: 24px;
	text-align: center;
	margin-top: -40px;
	margin-bottom: 20px;
}
h3 {
    font-size: 46px;
    line-height: 34px;
    color: #333;
    text-align: center;
    margin-bottom: 60px;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
}
.flex-container .flex-item {
    display: inline-flex;
}
.flex-container .flex-item.item--4 {
    flex: 0 0 24%;
}
.why-choose-tunesbank .flex-container {
	justify-content: space-between;
}

.why-choose-tunesbank .flex-container .flex-item {
	margin-top: 40px;
	flex-direction: column;
	align-items: center;
}

.why-choose-tunesbank .flex-container .flex-item p {
	text-align: center;
}

.why-choose-tunesbank .flex-container .flex-item img {
	height: 40px;
	margin-bottom: 15px;
}

.why-choose-tunesbank .flex-container .flex-item .p-1 {
	margin-bottom: 10px;
	color: #333333;
}

.why-choose-tunesbank .flex-container .flex-item .p-2 {
	padding: 0 5%;
	color: #666666;
}
/* user reviews */
.raty img {
    width: 16px;
    height: 16px;
}
.user-reviews {
  background-color: #8d2b95;
  padding: 50px 0;
  text-align: center;
}
.user-reviews h3 {
  font-size: 36px;
  color: #fff;
  margin-bottom: 40px;
}
.user-reviews #slider-user-reviews {
  position: relative;
  margin-bottom: 40px;
}
.user-reviews .slides {
  
}
.user-reviews .slides li{
    background:#fff;
    height:auto;
    padding:20px 0;
    border-radius: 25px;
}
.user-reviews .slides li .ava {
  display: inline-block;
  width: 90px;
  height: 90px;
  vertical-align: middle;
  margin-right: 30px;
}
.user-reviews .slides li .con {
  padding-left: 30px;
  border-left: 1px solid #e0e0e0;
  display: inline-block;
  max-width: 650px;
  vertical-align: middle;
  text-align: left;
}
.user-reviews .slides li .con .p1 {
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
}
.user-reviews .slides li .con .p1 .raty {
  position: relative;
  top: -2px;
  left: 20px;
}
.user-reviews .slides li .con .p2 {
  font-size: 14px;
  color: #666;
  line-height: 24px;
}
.user-reviews .more {
  display: block;
  margin: auto;
  width: 180px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  border: 1px solid #fff;
}
.user-reviews .more::after {
  content: ">>";
  margin-left: 5px;
  transition: 0.4s;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
}
.user-reviews .more:hover {
  background-color: #1e96ec;
  color: #fff;
}
.user-reviews .more:hover::after {
  margin-left: 10px;
}
.flex-control-paging li a{
    background:#fff;
}
.flex-control-paging li a.flex-active{
    background: rgba(0,0,0,0.3);
}
.arrow {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -11px;
    border: 3px solid transparent;
    border-bottom: 3px solid #F44336;
    border-right: 3px solid #27b038;
    z-index: 99;
    opacity: .8;
    -webkit-transform: rotate(45deg);
    -webkit-animation: arrow 1.5s infinite ease-in-out;
}
  
@-webkit-keyframes arrow {
    0% {
    opacity:0;
    -webkit-transform:translate(0, -10px) rotate(45deg)
    }
    50% {
    opacity:1;
    -webkit-transform:translate(0, -5px) rotate(45deg)
    }
    100% {
    opacity:0;
    -webkit-transform:translate(0, 0px) rotate(45deg)
    }
}

.ta_c{
    text-align: center;
    position:absolute;
    right:15%;
    bottom:20%;
    transform:rotate(45deg);
}

@-webkit-keyframes rotation{
0%,75% {
    -webkit-transform: rotate(0deg);
    
}

100% {
    -webkit-transform: rotate(360deg);
    
}
}
@-webkit-keyframes rotation-spotify{
0% {
    -webkit-transform: rotate(0deg);
    
}
50%{
    -webkit-transform: rotate(180deg);
}

100% {
    -webkit-transform: rotate(360deg);
    
}
}
.Rotation{
    width:150px;
    height:150px;
    -webkit-transform: rotate(360deg);
    animation: rotation 2s linear 4 ;
    -moz-animation: rotation 2s linear 4 ;
    -webkit-animation: rotation 2s linear 4 ;
    -o-animation: rotation 2s linear 4;
}

@keyframes heart{
    from{transform:translate(0,0)}
    to{transform:translate(0,6px)}
}
@media(max-width:768px){
    .banner-bank .pro-name, .banner-bank .banner-subtitle{
        font-size:20px;
    }
    .banner-bank{
        padding-top:30px;
        padding-bottom:0;
    }
    .banner-bank .banner-title{
        display:none;
        font-size: 22px;
    }
    .banner-bank .banner-subtitle{
        padding-top:20px;
    }
   .Rotation{
        width: 60px;
        height: 60px;
   } 
   .ta_c{
        
   }
   .banner-bank .animation-area span.float-mp3{
        width: 50px;
        height: 50px;
        font-size:15px;
        top: -60px;
        left:14px;
   }
   .banner-bank .animation-area span.float-m4a{
        width: 80px;
        height: 80px;
        font-size:18px;
        left:75px;
        top: 8px;
   }
   .banner-bank .animation-area span.float-flac{
        width: 60px;
        height: 60px;
        font-size:16px;
        top:18px;
        left:200px;
   }
   .banner-bank .animation-area span.float-wav{
        width: 50px;
        height: 50px;
        left: 320px;
        font-size: 15px;
   }
   .recommend-banner h2, .recommend-banner .h2{
       font-size:22px;
       padding:25px 0;
   }
   .recommend-banner .item{
       width:100%;
       height: 350px;
       margin:auto;
   }
   .recommend-banner .item-r{
       padding-top:20px;
   }
   .feature-bank h2{
        font-size: 22px;
    }
    .features .f4{
        background:#fff;
    }
    .features .feature .feature-text{
        width:100%;
    }
    .features .feature .feature-img{
        display:none;
    }
    .features .feature .p1{
        font-size: 20px;
    }
    .features .feature .p2{
        letter-spacing: 0px;
        font-size:16px;
    }
    .user-reviews h3{
       font-size:22px; 
    }
    .user-reviews .slides li .con{
        padding:0 15px;
    }
    .user-reviews .slides li .con .p1{
        font-size:14px;
    }
    .why-choose-tunesbank h3{
        font-size:24px; 
    }
    .flex-container .flex-item.item--4{
        flex:0 0 48%;
    }
    .why-choose-tunesbank .flex-container .flex-item{
        margin-top:20px;
    }
    .why-choose-tunesbank .flex-container .flex-item .p-2{
        font-size:12px;
    }
}