.container.guide{
    transform-origin: center;
    position: relative;
}
.container .page.pageGuide{
    display: none;
    position: relative;
    width: 1308px;
    height: 1452px;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%); 
    overflow: hidden;
}
.guideVideoBox ,.endBox{
    top: 0;
    left: 0;
    width: 1308px;
    height: 1452px;
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%); 
}
.guide .page.pageShare,.guide .page.pagePop{
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%); 
    overflow: visible;
}
/* .gray{
    filter: grayscale(100%);
} */
/* .guide .page.pageShare .bg{
    transform: scale(4);
} */
.guide-action{
    position: absolute;
    width: 578px;
    height: 126px;
    left: 364px;
    /* background: rebeccapurple;
    opacity: 0.8; */
}
.guide-action.A{
    top: 1153px;
}
.office .guide-action.A{
    top:1027px;
}
.guide-action.B{
    top: 1292px;
}
.office .guide-action.B{
    top:1182px;
}
.office .guide-action{
    width: 635px;
    left: 321px;
}
.guide-action.guide-back{
    top: 936px;
}
.office.scene-10-2 .guide-action.A{
    top:1099px;
}
.office.scene-10-2 .guide-action.B{
    top:1238px;
}
.live.scene-2 .endBox{
    background: url(../images/live/2-end.jpg);
    background-size: 100% 100%;
}
.live.scene-3 .endBox{
    background: url(../images/live/3-end.jpg);
    background-size: 100% 100%;
}
.live .endBox .replay{
    position: absolute;
    top: 690px;
    width: 372px;
    height: 104px;
    /* background: red; */
    left: 472px;
    /* opacity: 0.5; */
}
.live .endBox .tut{
    position: absolute;
    width: 410px;
    height: 70px;
    left: 448px;
}
.endBox .mirror-view{
    top: 926px;
}
.endBox .iti{
    top: 1015px;
}
.endBox .dual-recordings{
    top: 1104px;
}
.endBox .my-fancam{
    top: 1192px;
}
.endBox .music-eraser{
    top: 1282px;
}
.office .replay{
    position: absolute;
    top: 689px;
    width: 371px;
    height: 100px;
    left: 473px; 
}
.office .tut{
    position: absolute;
    width: 507px;
    height: 71px;
    left: 399px;
}
.endBox .now-brief{
    top:926px;
}
.endBox .ai-document{
    top: 1015px;
}
.endBox .teleprompter{
    top:1105px;
}
.office .endBox .tut.transcript-assist{
    top: 1192px;
}
.office.scene-9 .endBox{
    background: url(../images/office/9-end.jpg);
    background-size: 100% 100%;
}
.office.scene-10 .endBox{
    background: url(../images/office/10-end.jpg);
    background-size: 100% 100%;
}
.page.pageGuide ._action{
    position: absolute;
}
.page.pageGuide ._action .text{
    font-size: 20px;
    padding: 5px 25px;
    color: #000;
    background: white;
    border: 3px solid #218aff;
    position: absolute;
    border-radius: 20px;
    font-weight: bold;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    white-space: nowrap;
    transform-origin: -50% -50%;
}
.headBox{
    width: 100vw;
    top: 0;
    height: 100px;
    position: absolute;
    max-width: 1308px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 750px;
}
.live.scene-1 .guide-action.A{
    background: url(../images/live/scene-1-A.png);
    width: 425px;
    height: 167px;
    animation: fadeInUp 1s;
    top: 1125px;
    left: 438px;
}
.live.scene-1 .guide-action.A.active{
    background: url(../images/live/scene-1-A-active.png);
}
.live.scene-1 .guide-action.B{
    background: url(../images/live/scene-1-B.png);
    width: 425px;
    height: 167px;
    animation: fadeInUp 1s 0.5s 1 normal backwards;
    top: 1258px;
    left: 438px;

}
.live.scene-1 .guide-action.B.active{
    background: url(../images/live/scene-1-B-active.png);
}
.office.scene-1 .guide-action.A{
    background: url(../images/office/scene-1-A.png);
    width: 675px;
    height: 165px;
    animation: fadeInUp 1s;
}
.office.scene-1 .guide-action.A.active{
    background: url(../images/office/scene-1-A-active.png);
}
.office.scene-1 .guide-action.B{
    background: url(../images/office/scene-1-B.png);
    width: 675px;
    height: 165px;
    animation: fadeInUp 1s 0.5s 1 normal backwards;
}
.office.scene-1 .guide-action.B.active{
    background: url(../images/office/scene-1-B-active.png);
}
.office.scene-2 .guide-action.A{
    background: url(../images/office/scene-2-A.png);
    width: 675px;
    height: 166px;
    animation: fadeInUp 1s;
}
.office.scene-2 .guide-action.A.active{
    background: url(../images/office/scene-2-A-active.png);
}
.office.scene-2 .guide-action.B{
    background: url(../images/office/scene-2-B.png);
    width: 675px;
    height: 166px;
    animation: fadeInUp 1s 0.5s 1 normal backwards;
}
.office.scene-2 .guide-action.B.active{
    background: url(../images/office/scene-2-B-active.png);
}
.office.scene-3 .guide-action.A{
    background: url(../images/office/scene-2-A.png);
    width: 675px;
    height: 166px;
    animation: fadeInUp 1s;
}
.office.scene-3 .guide-action.A.active{
    background: url(../images/office/scene-2-A-active.png);
}
.office.scene-3 .guide-action.B{
    background: url(../images/office/scene-2-B.png);
    width: 675px;
    height: 166px;
    animation: fadeInUp 1s 0.5s 1 normal backwards;
}
.office.scene-3 .guide-action.B.active{
    background: url(../images/office/scene-2-B-active.png);
}
.office.scene-8 .guide-action.A{
    background: url(../images/office/scene-3-A.png);
    width: 675px;
    height: 166px;
    animation: fadeInUp 1s;
}
.office.scene-8 .guide-action.A.active{
    background: url(../images/office/scene-3-A-active.png);
}
.office.scene-8 .guide-action.B{
    background: url(../images/office/scene-3-B.png);
    width: 675px;
    height: 166px;
    animation: fadeInUp 1s 0.5s 1 normal backwards;
}
.office.scene-8 .guide-action.B.active{
    background: url(../images/office/scene-3-B-active.png);
}
.office.scene-4 .guide-back{
    background: url(../images/office/replay.png);
    top: 937px;
    width: 392px;
    height: 131px;
    left: 470px;
    animation: fadeIn 1s  normal backwards;
}
.office.scene-6 .guide-back{
    background: url(../images/office/replay.png);
    top: 937px;
    width: 392px;
    height: 131px;
    left: 470px;
    animation: fadeIn 1s normal backwards;
}