@charset "utf-8";
i, em {font-style: normal;}
.center{overflow: hidden;}
.cen-con{max-width: 1310px;margin: auto;}
.content1 .cen-con,.content3 .cen-con,.content5 .cen-con,.content6 .cen-con{padding: 0 60px;}
.left-con{float: left;}
.right-con{float: left;}
.content1 .left-con{
    width: 480px;
    padding: 80px 0 40px 114px;
    background-image: url("../imgs/products/iphone/one.png");
    background-repeat: no-repeat;
    margin-top: 80px;
    height: 400px;
	float: left;
}

.content1 .right-con{float: right;
    width: calc(100% - 1200px);
    padding-top: 20px;
    padding-bottom: 40px;}
.content1 .right-con .img-box img {
    float: right;
    margin-right: 19.64%;
}

.sveo-ul li{
    margin-top: 40px;
}
.sveo-ul h3{
    font-size: 24px;
    color: #333;
    font-weight: bold;
}
.sveo-ul .sveoul-title{
    font-size: 18px;
    color: #333;
    font-weight: bold;
    position: relative;
    padding-left: 18px;
}
.sveo-ul .sveoul-title:before{
    content: '';
    height: 22px;
    width: 4px;
    background-color: #48cfad;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 4px;
}
.sveo-ul .sveoul-text{
    color: #666;
    padding-left: 16px;
	padding-top: 16px;
	font-size:14px;
}
.content1 .right .img-box img{
    float: right;
	padding-top:400px;
    margin-right: 19.64%;
}
.imgfram{
    animation: imgfram 3s;
    display: none;
}
@keyframes imgfram
{
    0%  {transform:scale(0);}
    10% {transform:scale(1.1);}
    20% {transform:scale(0.6);}
    30% {transform:scale(1.08); }
    40% {transform:scale(0.8); }
    50% {transform:scale(1.05);}
    60% {transform:scale(0.9);}
    70% {transform:scale(1.03);}
    80% {transform:scale(0.95);}
    90% {transform:scale(1.02);}
    100%{transform:scale(1);}

}
.content2{
    background-color: #C5E0FF;
}
.content2 .left-con {
    width: 480px;
    padding: 80px 0 40px 120px;
    background-image: url(../imgs/products/iphone/two.png?sttl=0817008);
    background-repeat: no-repeat;
    margin-top: 80px;
    height: 400px;
}
.content2 .right-con{
    margin-left: 120px;
    width: 630px;
}
.content2 .right-con > div{
    float: left;
    margin-right: 50px;
    height: 600px;
    width: 264px;
}
.content2 .right-con > div .hidp{
    color: #48cfab;
    font-size: 28px;
    text-align: center;
    width: 100%;
    display: none;
}
.left-img img{
    position: relative;
    top: 50px;
}
.act.left-img img{
    top: -40px;
    transition: all .8s;
}
.act.right-img img{
    bottom: -40px;
    transition: all .8s;
}
.right-img{
    position: relative;
}
.right-img img{
    position: absolute;
    bottom: -600px;
}
.content3 .left-con{
    width: 700px;
}
.content3 .left-con .img-box{
    position: relative;
    height: 640px;
}
.content3 .left-con .img-box img{
    position: absolute;
}
.content3 .left-con .th-img1{
    left: 80px;
    top: 40px;
}
.content3 .left-con .th-img2{
    bottom: 0px;
    z-index: 2;
}
.content3 .right-con {
    width: 480px;
    padding: 80px 0 40px 120px;
    background-image: url(../imgs/products/iphone/there.png?sttl=0817008);
    background-repeat: no-repeat;
    margin-top: 80px;
    height: 480px;
}
.content4{
    background-color: #C5E0FF;
}
.content4 .left-con {
    width: 480px;
    padding: 80px 0 40px 120px;
    background-image: url(../imgs/products/iphone/four.png?sttl=0817008);
    background-repeat: no-repeat;
    margin-top: 140px;
    height: 540px;
}
.light-box{
    position: relative;
}
.light{
    position: absolute;
   top: 120px;
    left: 100px;
    width: 250px;
    /*transform: rotate(-35deg);*/
}
.light img{
    position: absolute;
}
.light1{
    animation: light1 1.5s linear infinite;
}
.light2{
    animation: light2 1.3s linear infinite;
}
@keyframes light1{
    0%{
        opacity: 1;
    }
    65%{
        opacity: 0.7;
    }
    100%{
        opacity: 1;
    }
}
@keyframes light2{
    0%{
        opacity: 0.5;
    }
    30%{
        opacity: .8;
    }
    100%{
        opacity: 0.5;
    }
}
.mob{
    position: absolute;
    top: 360px;
    left: 120px;
    z-index: 2;
}
.cut{
    position: absolute;
    top: 80px;
    left: 240px;
}
.content4 .right-con{
    margin-left: 49px;
}
.content5 .cen-con,.content5{
    height: auto;
	 background-color:#fff;
}
.content5{
    padding-bottom: 20px;
}
.icon-tx{
    background-image: url(../imgs/products/iphone/icon.png?sttl=0817008);
    width: 58px;
    height: 58px;
    display: block;
    float: left;
    position: relative;
    margin-right: 26px;
    margin-left: 120px;
}
.icon-tx.icon1{
    background-position: 0 0;
}
.icon-tx.icon2{
    background-position: -58px 0;
}
.icon-tx.icon3{
    background-position: -116px 0;
}
.icon-tx.icon4{
    background-position: -174px 0;
}
.icon-tx.icon5{
    background-position: -232px 0;
}
.icon-tx.icon6{
    background-position: -290px 0;
}
.icon-tx.icon7{
    background-position: -348px 0;
}
.icon-tx.icon8{
    background-position: -406px 0;
}
.icon-tx.icon9{
    background-position: -464px 0;
}
.icon-tx.icon10{
    background-position: -522px 0;
}
.icon-tx.icon11{
    background-position: -580px 0;
}
.icon-tx.icon12{
    background-position: -638px 0;
}
.icon-tx.icon13{
    background-position: -696px 0;
}
.icon-tx.icon14{
    background-position: -754px 0;
}
.icon-tx.icon15{
    background-position: -812px 0;
}
.bar-text{
    padding-top: 60px;
    margin-bottom: 70px;
    font-size: 30px;
    color: #333;
    text-align: center;
}
.ante{
    overflow: hidden;
    margin-bottom: 40px;
}
.ante span{
    font-size: 20px;
    color: #597ab8;
    line-height: 58px;
}
.bag{
    background-image: url("../imgs/products/iphone/bag.jpg");
    height: 590px;
}
.bag .cen-con{
    height: 590px;
}
.bag .bar-text{
    color: #fff;
}
.cen-img{
    position: relative;
}
.cen-img img{
    position: absolute;
}
.mb1{
    left: 88px;
    top: 70px;
}
.mb2{
    left: 224px;
    top: 160px;
}
.mb3{
    left: 298px;
    top: 40px;
}
.mb4{
    left: 717px;
    top: -50px;
}
.mb5{
     left: 890px;
     top: 66px;
    z-index: 2;
 }
.mb6{
    left: 1017px;
    top: 160px;
}
.mb7{
    left: 50%;
    margin-left: -200px;
}
.fame{
    animation: fame 2s;
    animation-iteration-count: infinite;
}
.fame1{
    animation: fame 3s;
    animation-iteration-count: infinite;
}
@keyframes fame
{
    0%  {transform:scale(0.9);}
    50%  {transform:scale(1);}
    100%{transform:scale(0.9);}

}
.right-bar{
    position: fixed;
    right: 20px;
    bottom: 120px;
    padding: 10px 30px 30px;
    background-color: rgba(0,0,0,.5);
    text-align: center;
    z-index: 10
}
.close{
    width: 15px;
    height: 15px;
    display: block;
    background-image: url("../imgs/products/iphone/close.png");
    position: relative;
    right: 0;
    top: -4px;
    left: 188px;
}
.mb-img1,.mb-img2{
    display: none;
}
.mb-text,.mb-br{
    display: none;
}
.but{
    display: none;
}
.shown-btn-left {
    position: fixed;
    /* top: 50%; */
    bottom: 50%;
    right: 0px;
    /* left: -60px; */
    width: 40px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    /* box-shadow: 0px 0px 10px rgba(0,0,0,0.3); */
    text-align: center;
    display: none;
}
.shown-btn-left .dot{
    color: #e0e0e0;
    font-size:30px;
}
@media (max-width: 1366px){
    .banner-box{
        height: 300px;
        background-size: 100% 100%;
    }
    .ban-title{
        margin: 66px 0 10px;
    }
    .ban-right{
        margin-top: 40px;
        padding:20px 10px;
    }
    .ban-info{
        font-size: 36px;
    }
    .ban-right img{
        width: 80%;
        height: auto;

    }
    .right-bar img{
        width: 80%;
    }
    .close{
        left: 166px;
    }
    .center,.cen-con{
        height: 650px;
    }
    .content1 .left-con,.content2 .left-con,.content3 .right-con,.content4 .left-con{
        margin-top: 50px;
    }
    .sveo-ul h3{
        font-size: 20px;
    }
    .content5 .cen-con, .content5{
        height: auto;
    }
    .content3 .left-con .th-img1{
        top: 60px;
        width: 35%;
    }
    .content3 .left-con .th-img2{
        top:280px;
        width: 10%;
        left: 500px;
    }
    .content3 .left-con .th-img3{
        left: 40px;
        width: 10%;
        top:280px;
    }
    .content3 .left-con .th-img4{
        left: 218px;
        top: 194px;
        width: 32%;
    }
    .content3 .left-con .th-img5{
        top: 275px;
        width: 24%;
        left: 248px;
    }
    .content3 .left-con .th-img6{
        left: 190px;
        top: 168px;
        width: 40%;
    }
    .content3 .left-con .th-img7{
        left: 156px;
        top: 134px;
        width: 50%;
    }
    .content3 .left-con .th-img8 {
        left: 122px;
        top: 97px;
        width: 60%;
    }
    .content2 .right-con > div{
        height: 650px;
        width: 230px;
    }
    .content2 .right-con > div img{
        width: 100%;
    }
    .content2 .right-con .right-img .hidp {
        margin-top: 154px;
    }
    .bag{
        height: 590px;
    }
}
@media (max-width: 1300px){
    .ban-center{
        max-width: 100%;
        padding-left: 20px;
    }
    .center, .cen-con{
        height: auto;
        display: block!important;
    }
    .content1 .left-con{
        width: 50%;
    }
    .content1 .left-con, .content2 .left-con, .content3 .right-con, .content4 .left-con{
        width: 50%;
        margin-top: 20px;
    }
    .center .left-con,.center .right-con{
        width: 50%;
    }
    .sveo-ul li{
        opacity: 1;
    }
    .imgfram{
        animation: none;
        display: block;
    }
    .content1{
        opacity: 1;
    }
    .mb-img1{
        display: block;
        margin:40px auto;
    }
    .content1 .left-con .img-box{
        display: none;
    }
    .content1 .left-con{
       background-size: 30%;
        background-position:left center ;
        height: auto;

    }
    .content2 .right-con{
        margin-left: 0;
    }
    .content2 .right-con > div{
        width: 40%;
        margin-right: 20px;
    }
    .left-img img{
        top:-60px;
    }
    .right-img img{
        bottom: -60px;
    }
    .content2 .right-con > div .hidp{
        display: block;
    }
    .content2 .right-con .right-img .hidp {
        margin-top: 86px;
    }
    .content2 .right-con .left-img .hidp {
        margin-top: -30px;
    }
    .content2 .left-con{
        height: auto;
        background-size: 40%;
        margin-top: 100px;
        padding-bottom: 150px;
        background-position: 10px 0;
    }
    .content2 .right-con > div{
        height: 500px;
    }
    .content3 .left-con .img-box{
        display: none;
    }
    .content3 .right-con{
        background-size: 40%;
        height: auto;
        padding-bottom: 120px;
        margin-top: 100px;
        background-position: 50px 0;
    }
    .right-con .light-box{
        display: none;
    }
    .content4 .right-con{
        margin-left: 0;
    }
    .content4 .right-con img{
        width: 100%;
    }
    .content4 .left-con{
        background-size: 50%;
        height: auto;
        margin-top: 50px;
        background-position: 10px 0;
    }
    .icon-tx{
        margin-left: 50px;
    }
	
    .content6 .cen-img{
        display: none;
    }
    .bag{
        background-image: url(../imgs/products/iphone/mb-img6.png?sttl=0817008);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .ban-tipi{
        display: none;
    }
    .but{
        display: block;
        width: 160px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        background-color: #48cfad;
        color: #fff;
    }
    .right-bar {
        bottom: 25%;
        right: -500px;
        padding: 10px;
    }
    .shown-btn-left{
        display: block;
        z-index: 2;
    }
    .cen-con.mb{
        display: none!important;
    }
}
@media (max-width: 768px){
    .ban-right{
        display: none;
    }
	
    .center .left-con, .center .right-con{
        width: 100%;
    }
    .content1 .left-con {
        background-size: 20% 100%;
        background-position: 20% center;
        height: auto;
        padding: 0 0 0 52%;
    }
    .content2 .left-con{
        background-size: 30% auto;
        background-position: 20% center;
        margin-top: 0;
        padding-left: 52%;
    }
	.content3 .left-con{padding:20px 0}
    .content3 .right-con{
        margin-top: 0;
        background-position: 20% center;
        background-size: 30% auto;
        padding-left: 52%;
    }
    .content4 .left-con{
        margin-top: 0;
        background-position: 20% center;
        background-size: 30% auto;
        padding: 0 0 0 52%;
        margin-bottom: 40px;
    }
	.content4 .right-con{
        padding:20px 0
    }
    .sveo-ul h3{
        font-size: 26px;
    }
    .mb-img2{
        display: block;
    }
   .content2 .cen-con, .content4 .cen-con{
       display: none!important;
   }
    .content2 .cen-con.mb,.content4 .cen-con.mb{
        display: block!important;
    }
    .content2 .mb-img1{
        margin-bottom: 20px;
    }
    .cen-con{
        max-width: 100%;
        padding: 0 60px;
    }
    .icon-tx{
        width: 50px;
        height: 50px;
        background-size:auto 100% ;
        margin-left: 20px;
        margin-right: 10px;

    }
    .icon-tx.icon2 {
        background-position: -49px 0;
    }
    .icon-tx.icon3 {
        background-position: -100px 0;
    }
    .icon-tx.icon4 {
        background-position: -150px 0;
    }
    .icon-tx.icon5 {
        background-position: -200px 0;
    }
    .icon-tx.icon6 {
         background-position: -250px 0;
     }
	 .icon-tx.icon7 {
         background-position: -300px 0;
     }
	 .icon-tx.icon8 {
         background-position: -350px 0;
     }
	 .icon-tx.icon9 {
         background-position: -400px 0;
     }
	 .icon-tx.icon10 {
         background-position: -450px 0;
     }
	 .icon-tx.icon11 {
         background-position: -500px 0;
     }
	 .icon-tx.icon12 {
         background-position: -550px 0;
     }
	 .icon-tx.icon13 {
         background-position: -600px 0;
     }
	 .icon-tx.icon14 {
         background-position: -650px 0;
     }
	 .icon-tx.icon15 {
         background-position: -700px 0;
     }
    .bar-text{
        padding-top: 30px;
        margin-bottom:40px;
    }
    .ante span{
        font-size: 16px;
    }
    .bag .cen-con{
        height: 440px;
    }
}
@media (max-width: 480px){
    .banner-box{
        background-image: url(../imgs/products/iphone/mb-banner.jpg?sttl=0817008);
        height: 200px;
    }
    .ban-title{
        font-size: 16px;
        margin-top: 30px;
        margin-bottom: 0;
    }
    .ban-info{
        font-size: 24px;
    }
    .mb-text{
        display: inline-block;
        font-size: 12px;
        color: #e41f2b;
        margin-left: 10px;
    }
    .mb-br{
        display: block;
        height: 0;
    }
    .but{
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
    }
    .cen-con{
        padding: 0 20px!important;
    }
    .mb-img1{
        width: 100%;
        margin: 20px auto;
    }
    .sveo-ul h3{
        font-size: 16px;
    }
    .sveo-ul .sveoul-title{
        font-size: 15px;
    }
    .sveo-ul .sveoul-text{
        font-size: 14px;
    }
    .sveo-ul li{
        margin-top: 20px;
    }
    .content1 .left-con{
        padding: 0 0 0 42%;
        background-position: 10% center;
    }
    .content2 .left-con{
        padding: 40px 0 40px 42%;
        background-position: 12% 0px;
    }
    .content3 .right-con{
        padding: 40px 0 60px 42%;
        background-position: 12% 0px;
    }
    .content4 .left-con{
        background-size: 40% auto;
        padding: 0 0 0 42%;
        background-position: 0 0px;
    }
    .icon-tx {
        width: 30px;
        height: 30px;
        background-size: auto 100%;
        margin-left: 20px;
        margin-right: 10px;
    }
	.icon-tx.icon2 {
        background-position: -30px 0;
    }
    .icon-tx.icon3 {
        background-position: -60px 0;
    }
    .icon-tx.icon4 {
        background-position: -90px 0;
    }
    .icon-tx.icon5 {
        background-position: -120px 0;
    }
    .icon-tx.icon6 {
        background-position: -150px 0;
    }
	.icon-tx.icon7 {
         background-position: -180px 0;
     }
	 .icon-tx.icon8 {
         background-position: -210px 0;
     }
	 .icon-tx.icon9 {
         background-position: -240px 0;
     }
	 .icon-tx.icon10 {
         background-position: -270px 0;
     }
	 .icon-tx.icon11 {
         background-position: -300px 0;
     }
	 .icon-tx.icon12 {
         background-position: -330px 0;
     }
	 .icon-tx.icon13 {
         background-position: -360px 0;
     }
	 .icon-tx.icon14 {
         background-position: -390px 0;
     }
	 .icon-tx.icon15 {
         background-position: -420px 0;
     }
    .ante{
        margin-bottom: 20px;
    }
    .bar-text{
        font-size: 20px;
        padding-top: 10px;
        margin-bottom: 20px;
    }
    .ante span{
        line-height: 30px;
        font-size: 14px;
    }
    .icon-tx.icon2 {
        background-position: -30px 0;
    }
    .icon-tx.icon3 {
        background-position: -60px 0;
    }
    .icon-tx.icon4 {
        background-position: -90px 0;
    }
    .icon-tx.icon5 {
        background-position: -120px 0;
    }
    .icon-tx.icon6 {
        background-position: -150px 0;
    }
    .bag .cen-con{
        height: 240px;
    }
}
@media (max-width: 400px){
    .content1 .left-con{
        background-size: 20% auto;
        background-position: 0 0;
        padding: 0 0 0 36%;
    }
    .content2 .left-con{
        padding: 0 0 40px 36%;
        background-position: 0 0px;
    }
    .content3 .right-con{
        padding: 0 0 40px 36%;
        background-position: 0 0px;
        background-size: 26% auto;
    }
    .content4 .left-con{
        background-size: 30% auto;
        background-position: 0 0;
        padding: 0 0 0 36%;
    }
    .icon-tx{
        margin-left: 0;
    }
    .ante span{
        font-size: 14px;
    }
    .bar-text{
        font-size: 16px;
    }
    .bag .cen-con{
        height: 200px;
    }
}


@media (max-width: 768px){
.content2 .cen-con.mb, .content4 .cen-con.mb {
    display: block!important;
}
}
@media (max-width: 768px){
.content2 .cen-con, .content4 .cen-con {
    display: none!important;
}
}
@media (min-width: 769px){
.cen-con.mb {
    display: none!important;
}
}
@media (max-width: 480px){
.cen-con {
    padding: 0 20px!important;
}
.mb-img1 {
    width: 100%;
    margin: 0 auto;
}
}
@media (max-width: 768px){
.cen-con {
    max-width: 100%;
    padding: 0 60px;
}
}
@media (max-width: 1300px){
.center, .cen-con {
    height: auto;
    display: block!important;
}
.content1 .right-con .img-box {
    display: none;
}
}