.phone_box {width:230px; height:390px; background:url("../images/1/phone1.svg") center bottom no-repeat; background-size:100% auto; position:absolute; bottom:0; left:50%; margin-left:-114px; z-index:2;}
.phone_box>img,.phone_box>.chatBox,.phone_box>.chatBox2 {position:absolute; transition:all 0.4s; opacity:0;}

.phone_box .tip_icon {left:-60px; top:100px;}
.phone_box .line {bottom:0; left:30px; opacity:1;}

.chatBox,.chatBox2 {background:#F9F9F9; border-radius:8px; font-size:10px; line-height:16px; color:#2b2b2b; text-align:left; }
.chatBox {padding:6px 6px; border:1px solid #d9d9d9; }
.chatBox2 {padding:6px 10px;}
.chatBox2 .flex_row {padding-bottom:6px;}

.phone_box .p1 {right:-80px; top:160px; transition-delay:0.4s;}
.phone_box .p2 {left:-80px; bottom:60px; transition-delay:0.8s;}
.phone_box .p3 {right:-80px; bottom:0; transition-delay:1.3s;}

.phone_box.fadeInActive .tip_icon {top:70px; opacity:1; }
.phone_box.fadeInActive .p1 {top:120px; opacity:1; }
.phone_box.fadeInActive .p2 {bottom:100px; opacity:1; }
.phone_box.fadeInActive .p3 {bottom:20px; opacity:1; }

.phone2 .tip_icon {left:-80px;}
.phone2 .p1 {left:-30px; max-width:288px;}
.phone2 .p2 {bottom:20px; left:5px; transition-delay:1.2s;}
.phone2.fadeInActive .p2 {bottom:60px;;}

.phone_box.phone3 {background-image:url("../images/1001/3/p3.png");}

.phone3 .tip_icon {left:auto; top:auto; right:-60px; bottom:0; transition-delay:1.5s;}
.phone3 .p1 {right:-30px; top:120px; transition-delay:1s; max-width:295px; transition-delay:0.5s;}
.phone3 .p2 {left:-34px; top:220px; transition-delay:1s; max-width:295px; transition-delay:1s;}
.phone3 .p3 {bottom:-40px; right:14px; transition-delay:1.5s;}

.phone3.fadeInActive .tip_icon{opacity:1; top:auto; bottom:20px;}
.phone3.fadeInActive .p1{opacity:1; top:80px;}
.phone3.fadeInActive .p2{opacity:1; top:190px;}
.phone3.fadeInActive .p3{opacity:1; bottom:2px;}

.color_round { background: linear-gradient(180deg, #9f92ff 0%, rgba(255, 255, 255, 0.22) 100%); border-radius:50%; position:absolute;}
.color_round.round1 { width:200px; height:200px; opacity:0.2; left:20px; top:10px;}
.color_round.round2 { width:140px; height:140px; opacity:0.1; right:20px; bottom:100px;}

.shadow_phone_box {width:230px; height:390px; position:absolute; left:50%; margin-left:-115px; bottom:0;}
.shadow_phone {width:230px; height:390px; border-radius:30px;}
.shadow_phone.p1 {background: linear-gradient(180deg, #7dcd8e 0%, rgba(255, 255, 255, 0.22) 100%); position:absolute; top:0; transform:rotate(5deg);}
.shadow_phone.p1:last-child {transform:rotate(10deg);}

.shadow_phone.p2 {background: linear-gradient(180deg, #cee6ff 0%, rgba(255, 255, 255, 0.22) 100%); position:absolute; bottom:-80px; right:-40px; transform:rotate(15deg);}
.shadow_phone.p2:last-child {transform:rotate(-20deg); bottom:-160px;  left:-20px;}


@media screen and (max-width:900px) {
    .row_bg1 .phone_box .p1 {right:-20px;}
    .row_bg1 .phone_box.fadeInActive .p1 {top:110px;}
    .row_bg1 .phone_box .p2 {left:-30px;}
    .row_bg1 .phone_box .p3 {right:-20px;}
    .row_bg1 .phone_box.fadeInActive .p3 {bottom:10px;}
    .phone_box .tip_icon {left:-30px;}
    .phone3 .tip_icon {left:auto; right:-30px;}

    .phone3 .chatBox2 {max-width:290px !important;}
    .phone3 .p2 {left:-30px;}
}