/***************index***************/

/* p3 start*/
#p3{ position: relative;
    margin: 0 auto;
    height: 500px;
    width: 100%;
    overflow: hidden;}
#p3-inner{
	position: absolute; width: 1920px; left: 50%; margin-left: -960px; height: 500px;background: url(img/beac8f52c4a19fd9220cca6fcabf3b9b.png);}
#panel-left{
    width: 1280px;
    height:500px;
    position: absolute;
    top:0;
    left: 0;
    /*background: url(img/63548d9981ca5fb42e44710836b79c62.jpg) 0 0 no-repeat;*/
    -webkit-clip-path: polygon(0% 0%, 100% 0, 1020px 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0, 1020px 100%, 0% 100%);
    z-index: 1;
    }
#left-spread{width: 1280px;height:500px; position: absolute;top:0;left: 0;background: url(img/bc5e1060f2651be0a28b93b23ef50b8d.png) 0 0 no-repeat;}
#panel-left-title{position: absolute;left: 458px;transform: scale(1);top:297px;z-index: 2;filter: drop-shadow(4px 4px 20px rgba(0,0,0,.3))}
#panel-left .desc{position: absolute;right: 324px;top:160px;width: 600px; height: 20px;color: #eee;    font-size: 18px;
    line-height: 26px;
}
#panel-left .pay{position: absolute;
right: 325px;
top: 280px;
width: 604px;
height: 193px;}
#panel-left .card{float: right;
margin-left: -35px;
position: relative;

-webkit-transition: top 100ms linear;
}
#panel-left .card:hover {top: -3px;}
#panel-left .card img{}
#panel-left .card span{display:block;}
#panel-right{
    width: 1280px;
    height:500px;
    position: absolute;
    top:0;
    right: 0;
 
    -webkit-clip-path: polygon(260px 0%, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(260px 0%, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
    }
#right-spread{width: 0;height:500px; position: absolute;top:0;right: 0;background: url(img/a2350c2768731edb49f6f108a5097e36.png) 100% 0 no-repeat;
    -webkit-clip-path: polygon(260px 0%, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(260px 0%, 100% 0, 100% 100%, 0% 100%);
    overflow: hidden;
}
/*#panel-right .can-hide{display: none;}*/
#panel-right-title{position: absolute;right: 396px;transform: scale(1);-ms-transform: scale(1);top:443px;z-index: 1;filter: drop-shadow(4px 4px 20px rgba(0,0,0,.3))}
#panel-right .desc{line-height: 26px;position: absolute;right: 400px;top:160px;width: 605px; height: 20px;color: #eee;font-size: 18px;}
#panel-right .pay{position: absolute;right: 363px;
top: 285px;
width: 660px;
height: 180px;}
#panel-right .card{float: right;margin-right: 20px;position: relative;top: 0;transition: top 100ms linear;-webkit-transition: top 100ms linear;}
#panel-right .card img{height: 180px;
width: 200px;}
#panel-right .card:hover{top: -5px;}

#magic-bg{position: absolute; top: 0; width: 540px; right:0; height: 500px;background: url(img/beac8f52c4a19fd9220cca6fcabf3b9b.png) 100% 0 no-repeat;
    -webkit-clip-path: polygon(260px 0%, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(260px 0%, 100% 0, 100% 100%, 0% 100%);
    z-index:1;
}