* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    box-sizing: border-box;
    margin: 0;
    
    color: #333;
    height: 100%; 
    min-width: 320px;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}







.banner1{min-height: 500px;background: url(../images/jc_b.jpg) no-repeat center;background-size: cover;position: relative;padding:120px 0 60px;}
/*首页第二屏*/
#caseBlanche {height:500px;width:500px;margin:0 auto;position: relative;}
/****DEBUT TEST****/
#test {height:120px;width:120px;position:absolute;background:url(../images/star.png) no-repeat center;background-size: cover;border-radius:50%;bottom:0px;right:25px;margin:5px;z-index: 99;}
#rond {height:100%;width:100%;background: url(../images/jc_g.png) no-repeat center;background-size: cover;border-radius:50%;position:absolute;top:0px;left:0px;animation:rond 5s infinite;-webkit-animation:rond 5s infinite;}
#caseBlanche #load {position:absolute;top :8%;left :8%;height:82%;width:82%;border-radius:50%;}
#caseBlanche #load img{width: 100%;padding:12px;border:solid 3px #fff;border-radius: 50%;}
.banner1 .img,#caseBlanche .info{position: absolute;z-index: 9;}
.banner1 .img img{width: 100%;}
.banner1 .img1{bottom: 25%;left: 12%;width: 10%;animation:fadeIn 2s infinite;-webkit-animation:fadeIn 2s infinite;}
.banner1 .img2{bottom: 1%;left: 25%;width: 7%;animation:fadeIn 2.5s infinite;-webkit-animation:fadeIn 2.5s infinite;}
.banner1 .img3{bottom: 1.3%;right: 25%;width: 8%;animation:fadeIn 3.5s infinite;-webkit-animation:fadeIn 3.5s infinite;}
.banner1 .img4{bottom: 35%;right: 12%;width: 9%;animation:fadeIn 3s infinite;-webkit-animation:fadeIn 3s infinite;}
.banner1 .img:hover{animation: ss;}

#caseBlanche .info{justify-content: center;}
#caseBlanche .info span{display: inline-block;width: 36px;height: 36px;background: #fff;border-radius: 50%;}
#caseBlanche .info1{width: 280px;left: 50%;top: -90px;margin-left: -140px;text-align: center;}
#caseBlanche .info1 img{width: 280px;}
#caseBlanche .info2{width: 290px;right: -190px;top: 50px;}
#caseBlanche .info2 img{width: 230px;}
#caseBlanche .info3{width: 220px;right: -192px;top:220px;}
#caseBlanche .info3 img{width: 160px;}
#caseBlanche .info4{width: 240px;left: -145px;top: 50px;}
#caseBlanche .info4 img{width: 180px;}
#caseBlanche .info5{width: 140px;left: -113px;top:220px;}
#caseBlanche .info5 img{width: 80px;}
#caseBlanche .info span{float: left;margin-top: 12px;}
#caseBlanche .info img{float: left;}
#caseBlanche .info1 span{float: none;}
#caseBlanche .info2 span,#caseBlanche .info3 span{margin-right: 24px;}
#caseBlanche .info4 span,#caseBlanche .info5 span{margin-left: 24px;}

#caseBlanche .info5{animation:fadeout .5s 1s ;-webkit-animation:fadeout .5s 1s;}
#caseBlanche .info4{animation:fadeout .5s 1.4s;-webkit-animation:fadeout .5s 1.4s;}
#caseBlanche .info1{animation:fadeout .5s 1.7s;-webkit-animation:fadeout .5s 1.7s;}
#caseBlanche .info2{animation:fadeout .5s 2.1s;-webkit-animation:fadeout .5s 2.1s;}
#caseBlanche .info3{animation:fadeout .5s 2.7s;-webkit-animation:fadeout .5s 2.7s;}

#caseBlanche .info:hover{animation:fadeout .5s infinite;-webkit-animation:fadeout .5s infinite;}

@keyframes rond {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(360deg);}
}
@-webkit-keyframes rond {
    0%{-webkit-transform : rotate(0deg);}
  100%{-webkit-transform : rotate(360deg);}
}
@keyframes fadeIn {
  0% {opacity: 0.1;}
  50% {opacity: 0.5;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0.1;}
  50% {opacity: 0.5;}
  100% {opacity: 1;}
}
@keyframes fadeout {
  0% {opacity: 1;}
  50% {opacity: .8;}
  100% {opacity: .6;}
}
@-webkit-keyframes fadeout {
  0% {opacity: 1;}
  50% {opacity: .8;}
  100% {opacity: .6;}
}


@media screen and (min-width: 1920px){
    .banner1{min-height: 860px;background: url(../images/jc_b.jpg) no-repeat center -80px;background-size: cover;}
    #caseBlanche {margin:0 auto;position: relative;}
    #caseBlanche,#rond{height:620px;width:620px;}
    #caseBlanche #load{width: 520px;height: 520px;top: 50px;left: 50px;}
    #test{right: 70px;}
    #caseBlanche .info2,#caseBlanche .info4{top: 70px;}
    #caseBlanche .info3,#caseBlanche .info5{top: 260px;}
    #caseBlanche .info4{left: -125px;}
    #caseBlanche .info2{right: -175px;}

    .banner1 .img1{bottom: 28%;}
    .banner1 .img2{bottom: 15%;}
    .banner1 .img3{bottom: 25.3%;}
    .banner1 .img4{bottom: 38%;}
}

@media screen and (max-width: 1280px){
    
    .banner1 .img4{right: 15%;}
    .banner1 .img1{left: 15%;}
}

@media screen and (max-width: 1024px){
    .cont{width: 95%;margin:0 auto;}
    
    .list{min-height: 350px;margin-top: -220px;}
}

@media screen and (max-width: 960px){
    
    }
   


    .banner1{overflow: hidden;}
    .list{margin-top: -100px;}

    .brand .cont .text,.brand, .activity, .shop{padding-top: 20px;}
    .brand .cont .text p{line-height: 24px;}

    

    .banner1{padding:70px 0 30px;overflow: hidden;min-height: 350px;}
    #caseBlanche{width: 260px;height: 260px;}
    #caseBlanche .info{text-align: center;}
    #caseBlanche .info span{width: 15px;height: 15px;margin:0;}
    #caseBlanche .info2 span,#caseBlanche .info3 span{margin-right: 5px;margin-top: 10px;}
    #caseBlanche .info4 span,#caseBlanche .info5 span{margin-left: 5px;margin-top: 10px;}

    #caseBlanche .info1{width: 140px;top: -45px;margin-left: -70px;}
    #caseBlanche .info1 img{width: 140px;margin-bottom: 5px;}
    #caseBlanche .info2{width: 140px;right: -95px;top: 30px;}
    #caseBlanche .info2 img{width: 120px;}
    #caseBlanche .info3{width: 90px;right: -75px;top:100px;}
    #caseBlanche .info3 img{width: 70px;}
    #caseBlanche .info4{width: 130px;left: -75px;top: 30px;}
    #caseBlanche .info4 img{width: 100px;}
    #caseBlanche .info5{width: 60px;left: -48px;top:100px;}
    #caseBlanche .info5 img{width: 40px;margin-bottom: 5px;}

    #test{width: 50px;height: 50px;}


   
}


@media screen and (max-width: 768px){

}

@media screen and (max-width: 480px){

    .banner1{min-height: 200px;}
    

    #caseBlanche .info1{width: 140px;top: -25px;margin-left: -70px;}
    #caseBlanche .info1 img{width: 140px;margin-bottom: 5px;}
    #caseBlanche .info2{width: 140px;right: -65px;top: 30px;}
    #caseBlanche .info2 img{width: 120px;}
    #caseBlanche .info3{width: 90px;right: -55px;top:100px;}
    #caseBlanche .info3 img{width: 70px;}
    #caseBlanche .info4{width: 130px;left: -55px;top: 30px;}
    #caseBlanche .info4 img{width: 100px;}
    #caseBlanche .info5{width: 60px;left: -30px;top:100px;}
    #caseBlanche .info5 img{width: 40px;margin-bottom: 5px;}

    .banner1 .img1{left: 2%;bottom: 22%;}
    .banner1 .img2{left: 15%;bottom: 3%;}
    .banner1 .img3{right: 15%;bottom: 3%;}
    .banner1 .img4{right: 2%;bottom: 20%;}


    .brand,.activity,.shop,.panter{padding:20px 0;}

   
    .brand .cont .text .imgli{width: 100%;float: none;}
    .brand .cont .text h4{padding: 5px 0;}
    .brand .tit,.shop .title span,.register .cont .tit{font-size: 18px;}
    
    
}

@media screen and (max-width: 376px){
	
}
@media screen and (max-width: 361px){
	
}
@media screen and (max-width: 321px){
	
}