@charset "UTF-8";

html {
}
body {
    background: #888;
    min-height: initial;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
}
*:before, *:after, *::before, *::after {
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}
.textLightBox {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    left: 0;
    top: 0;
    z-index: 999;
}
.textLightBox.expand {
    display: block;
}
.textLightBox .textBox {
    position: absolute;
    display: block;
    width: 250px;
    height: 150px;
    background: #fff;
    left: 50%;
    top:50%;
    border-radius: 10px;
    margin: -75px 0 0 -125px;
}
.textLightBox .textBox span {
    position: absolute;
    display: block;
    width: 100%;
    font-size: 13px;
    text-align: center;
    line-height: 13px;
    top:40px;
}
.textLightBox .btn {
    position: absolute;
    display: block;
    width: 80px;
    height: 35px;
    background: #2a80ff;
    left: 50%;
    top:50%;
    cursor: pointer;
    color:#fff;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
    border-radius: 5px;
    margin: 10px 0 0 -40px;
    border: none;
    padding: 0;
}
.textLightBox .btn:hover {
    background: #055bb5;
}

.ebookWrap {
    position: relative;
    display: block;
    width: 960px;
    height: 1080px;
    overflow: hidden;
    /*margin: 0 auto;*/
    background: #fff;
    font-family:Arial,Helvetica,"微軟正黑體","Microsoft JhengHei",sans-serif;
    color:#000;
    /*font-size: 100px;*/
}
.ebookWrap img {
    position: relative;
    display: block;
    border: 0;
    width: 100%;
    height: auto;
}
.ebookWrap a.btnLink {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.ebookWrap .mainImg {
    position: absolute;
    display: block;
    width: 100%;
}
.ebookWrap .mainText {
    position: absolute;
    display: block;
    width: 100%;
    pointer-events: none;
}
.ebookWrap .mainText img{
    pointer-events: none;  
}
.preload {
    position: absolute;
    display: none;
}
.ebookWrap .ebookContent1 {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.ebookWrap .btnStyle1 {
    position: absolute;
    display: block;
    background: #2a80ff;
    box-shadow: 0.04em 0.04em #055bb5;
    padding: 0.1em 0.3em 0.1em 0.1em;
    cursor:pointer;
    width: 1.4em;
}
.ebookWrap .btnStyle1:hover {
    background: #055bb5;
    box-shadow: 0px 0px #055bb5;
}
.ebookWrap .btnStyle1 img {
    width: auto;
    height: 0.2em;
}
.ebookWrap .btnStyle1::after {
    content: "";
    position:absolute;
    display: block;
    width: 0.1em;
    height: 0.1em;
    border-top:0.03em #fff solid;
    border-right:0.03em #fff solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 0.1em;
    top: 0.125em;
}
.ebookWrap .btnStyle2 {
    position:absolute;
    display: block;
    padding: 0.15em 0.4em 0.15em 0.2em;
    border-radius: 1.5em;
    background: linear-gradient(35deg, rgba(41,128,128,1) 0%, rgba(42,128,255,1) 100%);
    cursor:pointer;
}
.ebookWrap .btnStyle2 img {
    width: auto;
    height: 0.25em;
}
.ebookWrap .btnStyle2:hover {
    background: linear-gradient(35deg, rgba(42,128,255,1) 0%, rgba(42,128,255,1) 100%);
}
.ebookWrap .btnStyle2::after {
    content: "";
    position:absolute;
    display: block;
    width: 0.15em;
    height: 0.15em;
    border-top:0.04em #fff solid;
    border-right:0.04em #fff solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 0.15em;
    top: 0.18em;
}
.ebookWrap .btnStyle3 {
    position: absolute;
    display: block;
    width: 1.3em;
    height: 1.6em;
    cursor: pointer;
}
.ebookWrap .btnStyle4 {
    position:absolute;
    display: block;
    padding: 0.1em 0.2em 0.1em 0.2em;
    border-radius: 0.2em;
    background: linear-gradient(35deg, rgba(41,128,128,1) 0%, rgba(42,128,255,1) 100%);
    cursor:pointer;
    width: 1.25em;
}
.ebookWrap .btnStyle4 img {
    width: auto;
    height: 0.2em;
}
.ebookWrap .btnStyle4:hover {
    background: linear-gradient(35deg, rgba(42,128,255,1) 0%, rgba(42,128,255,1) 100%);
}
.ebookWrap.introPage .btnStyle1,
.ebookWrap.huddleroomP2 .btnStyle1,
.ebookWrap.meetingroomP2 .btnStyle1,
.ebookWrap.conferenceroomP2 .btnStyle1,
.ebookWrap.showroomP2 .btnStyle1,
.ebookWrap.lobby .btnStyle1,
.ebookWrap.Entrance .btnStyle1,
.ebookWrap.ITcontrolroom .btnStyle1,
.ebookWrap.HRoffice .btnStyle1{
    padding: 0.02em 0.3em 0.05em 0.04em;
    background: none;
    box-shadow: none;
    margin: -0.05em 0 0 0;
}
.ebookWrap.introPage .btnStyle1::after,
.ebookWrap.huddleroomP2 .btnStyle1::after,
.ebookWrap.meetingroomP2 .btnStyle1::after,
.ebookWrap.conferenceroomP2 .btnStyle1::after,
.ebookWrap.showroomP2 .btnStyle1::after,
.ebookWrap.lobby .btnStyle1::after,
.ebookWrap.Entrance .btnStyle1::after,
.ebookWrap.ITcontrolroom .btnStyle1::after,
.ebookWrap.HRoffice .btnStyle1::after{
    border-top:0.04em #0564c9 solid;
    border-right:0.04em #0564c9 solid;
    right: 0em;
    top: 0.055em;
}
.ebookWrap.introPage .btnStyle1::before,
.ebookWrap.huddleroomP2 .btnStyle1::before,
.ebookWrap.meetingroomP2 .btnStyle1::before,
.ebookWrap.conferenceroomP2 .btnStyle1::before,
.ebookWrap.showroomP2 .btnStyle1::before,
.ebookWrap.lobby .btnStyle1::before,
.ebookWrap.Entrance .btnStyle1::before,
.ebookWrap.ITcontrolroom .btnStyle1::before,
.ebookWrap.HRoffice .btnStyle1::before{
    content: "";
    position:absolute;
    display: block;
    width: 0.1em;
    height: 0.1em;
    border-top:0.04em #0564c9 solid;
    border-right:0.04em #0564c9 solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 0.1em;
    top: 0.055em;
}
.ebookWrap.introPage .btnStyle1.introPartnerBtn {
    top:66.7%;
    left: 5.5%;
    width: 2.4em;
}
.ebookWrap.indexPage1 .btnStyle1.indexBtn1 {
    top:33.5%;
    left: 32%;
    width: 2.3em;
}
.ebookWrap.indexPage1 .btnStyle1.indexBtn2 {
    top:47.5%;
    left: 32%;
    width: 2.3em;
}
.ebookWrap.indexPage1 .btnStyle1.indexBtn3 {
    top:62%;
    left: 32%;
    width: 2.3em;
}
.ebookWrap.indexPage1 .btnStyle1.indexBtn4 {
    top:76%;
    left: 32%;
    width: 2.3em;
}
.ebookWrap.indexPage1 .indexpage1Bg1 {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(/content/dam/newb2b/campaign/e-brochure/image/indexpage1-bg1.jpg);
    background-size: cover;
}
.ebookWrap.indexPage1 .indexpage1Bg2 {
    position: absolute;
    display: block;
    width: 100%;
    left: 0;
    top: 0;
    background-size: cover;
}
.finish .ebookWrap.indexPage1 .indexpage1Bg1 {
    -webkit-animation:indexpage1Bg1 8s ease-in-out 0s infinite normal both;
    animation:indexpage1Bg1 8s ease-in-out 0s infinite normal both;
}
.ebookWrap.indexPage1 .indexImgBtn .icon1 {
    position: absolute;
    display: block;
    width: 0.15em;
    height: 0.15em;
    background: #0b61a6;
    border-radius: 50%;
    border:0.03em solid #fff;
    left: -0.6em;
    top:0.15em;
}
.ebookWrap.indexPage1 .indexImgBtn .icon2 {
    position: absolute;
    display: block;
    width: 0.45em;
    border-bottom: 0.03em dashed #0b61a6;
    left: -0.45em;
    top:0.21em;
}
.ebookWrap.indexPage1 .indexImgBtn1 {
    left: 68%;
    top:28%;
    width: 2.4em;

}
.ebookWrap.indexPage1 .indexImgBtn2 {
    left: 18%;
    top:15%;
    width: 2.7em;
}
.ebookWrap.indexPage1 .indexImgBtn3 {
    left: 26%;
    top:3%;
    width: 3.1em;
}
.ebookWrap.indexPage1 .indexImgBtn4 {
    left: 52%;
    top:57%;
    width: 2.4em;
}
.ebookWrap.indexPage1 .indexImgBtn5 {
    left: 52%;
    top:87%;
    width: 4em;
}
.ebookWrap.indexPage1 .indexImgBtn1 .icon1 {
    top:1.05em;
}
.ebookWrap.indexPage1 .indexImgBtn1 .icon2 {
    border-top: 0.03em dashed #0b61a6;
    border-bottom: none;
    border-left: 0.03em dashed #0b61a6;
    height: 0.84em;
    width: 0.54em;
    left: -0.54em;
}
.ebookWrap.indexPage1 .indexImgBtn2 .icon1 {
    top:0.85em;
}
.ebookWrap.indexPage1 .indexImgBtn2 .icon2 {
    border-top: 0.03em dashed #0b61a6;
    border-bottom: none;
    border-left: 0.03em dashed #0b61a6;
    height: 0.64em;
    width: 0.54em;
    left: -0.54em;
}
.ebookWrap.indexPage1 .indexImgBtn5 .icon1 {
    position: absolute;
    display: block;
    width:2.5em;
    height: 0.5em;
    border-left: 0.03em dashed #0b61a6;
    border-bottom: 0.03em dashed #0b61a6;
    right: -0.8em;
    top:0.55em;
}


.ebookWrap.indexPage2 .ebookContent1 .mapinfo {
    position: absolute;
    display: block;
    height: 13%;
    width: 46%;
    /*cursor: pointer;*/
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo .btnStyle1{
    width: 2em;
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo.info1 {
    left: 4%;
    top:7%;
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo.info2 {
    left: 4%;
    top:24%;
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo.info3 {
    left: 4%;
    top:41%;
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo.info4 {
    left: 4%;
    top:58%;
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo.info5 {
    left:53%;
    top:58%;
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo.info5 .btnStyle1{
    left: 47%;
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo.info6 {
    left:46%;
    top:24%;
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo.info6 .btnStyle1{
    left: 48%;
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo.info7 {
    left:46%;
    top:40.8%;
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo.info7 .btnStyle1{
    left: 48%;
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo.info8 {
    left:46%;
    top:57.8%;
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo.info8 .btnStyle1{
    left: 48%;
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo.info9 {
    left:46%;
    top:74.5%;
}
.ebookWrap.indexPage2 .ebookContent1 .mapinfo.info9 .btnStyle1{
    left: 48%;
}
.ebookWrap .stageBtn {
    width: 2.5em;
    padding-left: 0.4em;
}
.ebookWrap .stageBtn.videoBtn::before {
    content: "";
    position: absolute;
    display: block;
    width: 0.4em;
    height: 0.4em;
    background: url(/content/dam/newb2b/campaign/e-brochure/image/stageinfo-btnicon1.png) no-repeat center center;
    background-size: contain;
    left: 0;
    top: 0;
}
.ebookWrap .stageBtn.webBtn::before {
    content: "";
    position: absolute;
    display: block;
     width: 0.4em;
    height: 0.4em;
    background: url(/content/dam/newb2b/campaign/e-brochure/image/stageinfo-btnicon2.png) no-repeat center center;
    background-size: contain;
    left: 0;
    top: 0;
}
.ebookWrap .stageBtn.stage1Btn1 {
    left: 46.5%;
    top:70%;
}
.ebookWrap .stageBtn.stage1Btn2 {
    left: 46.5%;
    top:77%;
}
.ebookWrap .stageBtn.stage2Btn1 {
    left: 46.5%;
    top:75%;
}
.ebookWrap .stageBtn.stage2Btn2 {
    left: 46.5%;
    top:83%;
}
.ebookWrap .stageBtn.stage3Btn1 {
    left: 46.5%;
    top:75%;
}
.ebookWrap .stageBtn.stage3Btn2 {
    left: 46.5%;
    top:83%;
}
.ebookWrap .stageBtn.stage4Btn1 {
    left: 46.5%;
    top:75%;
}
.ebookWrap .p9_btn1 {
    left: 5.5%;
    top:54.5%;
}
.ebookWrap .p9_btn2 {
    left: 81.5%;
    top:39%;
}
.ebookWrap .p9_btn3 {
    left: 5.5%;
    top:86%;
}
.ebookWrap .p9_btn4 {
    left: 81.5%;
    top:72%;
}
.ebookWrap .p10_btn1 {
    left: 5.5%;
    top:22%;
}
.ebookWrap .p10_btn2 {
    left: 80.5%;
    top:8%;
    width: 1.5em;
}
.ebookWrap .p10_btn3 {
    left: 5.5%;
    top:73.5%;
    width: 1.5em;
    height: 0.35em;
}
.ebookWrap .p10_btn4 {
    left: 80.5%;
    top:61%;
    width: 1.5em;
}
.ebookWrap .p10_btn5 {
    left: 5.5%;
    top:91.5%;
    width: 1.5em;
    height: 0.35em;
}
.ebookWrap .p10_btn6 {
    left: 80.5%;
    top:81.5%;
    width: 1.5em;
}
.ebookWrap .p13_btn1 {
    left: 40.5%;
    top:29.7%;
}
.ebookWrap .p13_btn2 {
    left: 79%;
    top:29%;
    width: 1.5em;
}
.ebookWrap .p13_btn3 {
    left: 40.5%;
    top:77.3%;
}
.ebookWrap .p13_btn4 {
    left: 81.5%;
    top:74%;
}
.ebookWrap .p14_btn1 {
    left: 5.5%;
    top:22%;
}
.ebookWrap .p14_btn2 {
    left: 70%;
    width: 2.5em;
    height: 0.5em;
    top:22%;
}
.ebookWrap .p14_btn3 {
    left: 5.5%;
    top:75%;
    width: 1.5em;
    height: 0.4em;
}
.ebookWrap .p14_btn4 {
    left: 81%;
    top:63%;
    width: 1.5em;
}
.ebookWrap .p14_btn5 {
    left: 5.5%;
    top:93.2%;
    width: 1.5em;
    height: 0.4em;
}
.ebookWrap .p14_btn6 {
    left: 81%;
    top:81.5%;
    width: 1.5em;
}
.ebookWrap .p17_btn1 {
    left: 40.5%;
    top:36.5%;
}
.ebookWrap .p17_btn2 {
    left: 62.5%;
    top:34.5%;
    width: 1.4em;
}
.ebookWrap .p17_btn3 {
    left: 79%;
    top:34.5%;
    width: 1.4em;
}
.ebookWrap .p17_btn4 {
    left: 40.5%;
    top:84.6%;
}
.ebookWrap .p17_btn5 {
    left: 57.8%;
    top:84.5%;
    width: 1.1em;
    height: 1.3em;
}
.ebookWrap .p17_btn6 {
    left: 70.2%;
    top:84.5%;
    width: 1.1em;
    height: 1.3em;
}
.ebookWrap .p17_btn7 {
    left: 82.7%;
    top:84.5%;
    width: 1.1em;
    height: 1.3em;
}
.ebookWrap .p18_btn1 {
    left: 5.5%;
    top:19.3%;
}
.ebookWrap .p18_btn2 {
    left: 74.7%;
    top:17.5%;
    width: 2em;
    height: 0.9em;
}
.ebookWrap .p18_btn3 {
    left: 5.5%;
    top:82.2%;
    width: 1.5em;
    height: 0.4em;
}
.ebookWrap .p18_btn4 {
    left: 80.7%;
    top:67.5%;
    width: 1.5em;
    height:1.7em;
}
.ebookWrap .p21_btn1 {
    left: 40.2%;
    top:37.5%;
}
.ebookWrap .p21_btn2 {
    left: 78.7%;
    top:36.5%;
    width: 1.5em;
    height: 1.7em;
}
.ebookWrap .p21_btn3 {
    left: 40.2%;
    top:87%;
}
.ebookWrap .p21_btn4 {
    left: 63%;
    top:84%;
    width: 1.5em;
    height: 1.6em;
}
.ebookWrap .p21_btn5 {
    left: 79%;
    top:84%;
    width: 1.5em;
    height: 1.6em;
}
.ebookWrap .p22_btn1 {
    left: 5.5%;
    top:23.3%;
}
.ebookWrap .p22_btn2 {
    left: 80.5%;
    top:6%;
    width: 1.5em;
}
.ebookWrap .p22_btn3 {
    left: 5.5%;
    top:73.5%;
    width: 1.5em;
    height: 0.35em;
}
.ebookWrap .p22_btn4 {
    left: 80.5%;
    top:60%;
    width: 1.55em;
    height: 1.7em;
}
.ebookWrap .p22_btn5 {
    left: 5.5%;
    top:91.5%;
    width: 1.5em;
    height: 0.35em;
}
.ebookWrap .p22_btn6 {
    left: 80.5%;
    top:81%;
    width: 1.55em;
    height: 1.7em;
}
.ebookWrap .p23_btn1 {
    left: 5.5%;
    top:63.5%;
}
.ebookWrap .p23_btn2 {
    left: 79.5%;
    top:61%;
    width: 1.55em;
    height: 1.7em;
}
.ebookWrap .p24_btn1 {
    left: 5.5%;
    top:66%;
}
.ebookWrap .p24_btn2 {
    left: 79.5%;
    top:64%;
    width: 1.55em;
    height: 1.7em;
}
.ebookWrap .p25_btn1 {
    left: 5.5%;
    top:66%;
}
.ebookWrap .p25_btn2 {
    left: 65%;
    top:64%;
    width: 1.55em;
    height: 1.7em;
}
.ebookWrap .p25_btn3 {
    left: 82.5%;
    top:64%;
    width: 1.35em;
    height: 1.7em;
}
.ebookWrap .p26_btn1 {
    left: 5.5%;
    top:66%;
}
.ebookWrap .p26_btn2 {
    left: 65%;
    top:64%;
    width: 1.55em;
    height: 1.7em;
}
.ebookWrap .p26_btn3 {
    left: 82.5%;
    top:64%;
    width: 1.35em;
    height: 1.7em;
}
.ebookWrap .p27_btn1 {
    left: 69%;
    top:78%;
}
.ebookWrap .p28_btn1 {
    left: 18%;
    top:78%;
}
.ebookWrap .p28_btn2 {
    left: 67%;
    top:78%;
}
.ebookWrap .p29_btn1 {
    left: 70%;
    top:43%;
}
.ebookWrap .p29_btn2 {
    left: 70%;
    top:90%;
}
.ebookWrap .p30_btn1 {
    left: 65%;
    top:25%;
}
.ebookWrap .p30_btn2 {
    left: 65%;
    top:57%;
}
.ebookWrap .p30_btn3 {
    left: 65%;
    top:89%;
}
.ebookWrap .p31_btn1 {
    left: 69%;
    top:42%;
}
.ebookWrap .p31_btn2 {
    left: 69%;
    top:89%;
}
.ebookWrap .p32_btn1 {
    left: 17.5%;
    top:42%;
}
.ebookWrap .p32_btn2 {
    left: 17.5%;
    top:89%;
}
.ebookWrap .p32_btn3 {
    left: 66%;
    top:42%;
}
.ebookWrap .p32_btn4 {
    left: 66%;
    top:89%;
}
.ebookWrap .p33_btn1 {
    left: 69%;
    top:42%;
}
.ebookWrap .p33_btn2 {
    left: 68.5%;
    top:80.5%;
}
.ebookWrap .p34_btn1 {
    left: 18.5%;
    top:42%;
}
.ebookWrap .p34_btn2 {
    left: 18.5%;
    top:80.5%;
}
.ebookWrap .p34_btn3 {
    left: 69%;
    top:42%;
}
.ebookWrap .p34_btn4 {
    left: 68.5%;
    top:80.5%;
}
.ebookWrap .p35_btn1 {
    left: 5%;
    top:38%;
}
.ebookWrap .huddleroom_step_list {
    position: relative;
    display: flex;
    width: calc(100% - 0.4em);
    margin: 0.2em 0 0 0.2em;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.ebookWrap .huddleroom_step_list li {
    position: relative;
    display: block;
    width: 3em;
    height: 3.3em;;
}
.ebookWrap .sideImgList {
    position: absolute;
    display: flex;
    width: 37.5%;
    height: 100%;
    background: #e6e6e6;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0.2em 0 0.2em 0;
}
.ebookWrap .sideImgList li {
    position: relative;
    display: block;
    width: 3em;
    height: 2.4em;
}
.ebookWrap.conferenceroomP2 .sideImgList {
    justify-content: space-around;
}
.ebookWrap.conferenceroomP2 .sideImgList li {
    width: 3.45em;
    height: 3.25em;
}
.ebookWrap.showroomP2 .sideImgList {
    justify-content: space-around;
}
.ebookWrap.showroomP2 .sideImgList li {
    width: 3.45em;
    height: 3.25em;
}
.ebookWrap .stageTitle {
    position: absolute;
    display: block;
    background: #000;
    color:#fff;
    padding: 0.1em 0.2em 0.1em 0.2em;
    right: 5%;
    top:31%;
}
.ebookWrap .stageTitle img {
    width: auto;
    height: 0.5em;
}
.ebookWrap .huddleroomMainAnimate {
    position: absolute;
    display: block;
    width: 43.22%;
    height: 68.05%;
    left: 45.93%;
    top:14.81%;
    background-size: cover;
    background-image: url(/content/dam/newb2b/campaign/e-brochure/image/stage1-handwrite/stage1-handwrite00.png);
}
.finish .ebookWrap .huddleroomMainAnimate {
    -webkit-animation:huddleroomMainAnimate 3s linear 0s infinite normal both;
    animation:huddleroomMainAnimate 3s linear 0s infinite normal both;
}
.ebookWrap .meetingroomMainAnimate {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url(/content/dam/newb2b/campaign/e-brochure/image/stage2-p1.jpg);
}
.finish .ebookWrap .meetingroomMainAnimate {
    -webkit-animation:meetingroomMainAnimate 5s linear 0s infinite normal both;
    animation:meetingroomMainAnimate 5s linear 0s infinite normal both;
}
.ebookWrap .conferenceroomMainAnimate {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url(/content/dam/newb2b/campaign/e-brochure/image/stage3-p1.jpg);
}

.finish .ebookWrap .conferenceroomMainAnimate {
    -webkit-animation:conferenceroomMainAnimate 5s linear 0s infinite normal both;
    animation:conferenceroomMainAnimate 5s linear 0s infinite normal both;
}
.ebookWrap .showroomMainAnimate {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url(/content/dam/newb2b/campaign/e-brochure/image/showroom-p1.jpg);

}
.finish .ebookWrap .showroomMainAnimate {
    -webkit-animation:showroomMainAnimate 5s linear 0s infinite normal both;
    animation:showroomMainAnimate 5s linear 0s infinite normal both;
}
.ebookWrap .lobbyroomMainAnimate {
    position: relative;
    display: block;
    width: 100%;
    height: 41.2%;
    background-size: cover;
    background-image: url(/content/dam/newb2b/campaign/e-brochure/image/lobby-p1.jpg);
    background-repeat: no-repeat;
}
.finish .ebookWrap .lobbyroomMainAnimate {
    -webkit-animation:lobbyroomMainAnimate 7s linear 0s infinite normal both;
    animation:lobbyroomMainAnimate 7s linear 0s infinite normal both;
}
.ebookWrap .EntranceMainAnimate {
    position: relative;
    display: block;
    width: 100%;
    height: 41.2%;
    background-size: cover;

    background-repeat: no-repeat;
    background-image: url(/content/dam/newb2b/campaign/e-brochure/image/entrance-p1.jpg);
}
.finish .ebookWrap .EntranceMainAnimate {
    -webkit-animation:EntranceMainAnimate 5s linear 0s infinite normal both;
    animation:EntranceMainAnimate 5s linear 0s infinite normal both;
}
.ebookWrap .ITcontrolroomMainAnimate {
    position: relative;
    display: block;
    width: 100%;
    height: 41.2%;
    background-size: cover;
    background-image: url(/content/dam/newb2b/campaign/e-brochure/image/itroom-p1.jpg);
    background-repeat: no-repeat;
}
.finish .ebookWrap .ITcontrolroomMainAnimate {
    -webkit-animation:ITcontrolroomMainAnimate 5s linear 0s infinite normal both;
    animation:ITcontrolroomMainAnimate 5s linear 0s infinite normal both;
}
.ebookWrap .HRofficeMainAnimate {
    position: relative;
    display: block;
    width: 100%;
    height: 41.2%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(/content/dam/newb2b/campaign/e-brochure/image/hroffice-p1.jpg);
}
.finish .ebookWrap .HRofficeMainAnimate {
    -webkit-animation:HRofficeMainAnimate 5s linear 0s infinite normal both;
    animation:HRofficeMainAnimate 5s linear 0s infinite normal both;
}
.ebookMainWrap {
    position: absolute;
    display: block;
    width: 100vw;
    height: 100%;
    background: url(/content/dam/newb2b/campaign/e-brochure/image/mainbg.jpg) no-repeat center center;
    background-size:cover;
}

.ebookMainWrap .headerBox {
    position: absolute;
    display: block;
    width: 100%;
    height: 50px;
    background: #000;
}
.ebookMainWrap .headerBox .logoBenq {
    position: absolute;
    display: block;
    width: 100px;
    left: 10px;
    top:12px;
}
.ebookMainWrap .menuBar {
    position: fixed;
    display: block;
    width: 100%;
    height: 40px;
    bottom: 0;
    background: #000;
    left: 0;
}
.ebookMainWrap .menuBar .menuBtn {
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    top:5px;
    cursor: pointer;
}
.ebookMainWrap .menuBar .menuBtn span {
    position: absolute;
    display: block;
    white-space: nowrap;
    font-size: 12px;
    line-height: 12px;
    color:#fff;
    left: 30px;
    top:8px;
}
.ebookMainWrap .menuBar .menuBtn.btn_map {
    left: 140px;
}
.ebookMainWrap .menuBar .menuBtn.btn_product {
    left: 50px;
}
.ebookMainWrap .menuBar .menuBtn.btn_index {
    left: 10px;
}
.ebookMainWrap .menuBar .menuBtn.btn_back {
    left: 50%;
    margin: 0 0 0 -100px;
}
.ebookMainWrap .menuBar .menuBtn.btn_backward {
    left: 50%;
    margin: 0 0 0 -70px;
}
.ebookMainWrap .menuBar .menuBtn.btn_forward {
    left: 50%;
    margin: 0 0 0 45px;
}
.ebookMainWrap .menuBar .menuBtn.btn_front {
    left: 50%;
    margin: 0 0 0 75px;
}
.ebookMainWrap .menuBar .menuBtn.btn_zoomin {
    right: 130px;
}
.ebookMainWrap .menuBar .menuBtn.btn_zoomout {
    right: 170px;
}
.ebookMainWrap .menuBar .menuBtn.btn_fullscreen {
    right: 90px;
}
.ebookMainWrap .menuBar .menuBtn.btn_share {
    right: 50px;
}
.ebookMainWrap .menuBar .menuBtn.btn_download {
    right: 10px;
}
.ebookMainWrap .menuBar .menuBtn.btn_stepback {
    right: 250px;
}
.ebookMainWrap .menuBar .menuBtn.btn_stepnext {
    right: 210px;
}
.ebookMainWrap .menuBar .pageNumber {
    position: absolute;
    display: block;
    width: 80px;
    height: 30px;
    left: 50%;
    top:5px;
    margin: 0 0 0 -40px;
}
.ebookMainWrap .menuBar .pageNumber input {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 13px;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    border:0px;
}
.ebookMainWrap .pageForwardBtn {
    position: absolute;
    display: block;
    width: 40px;
    height: 100px;
    background: rgba(0,0,0,0.3);
    right: 0;
    top:50%;
    margin: -50px 0 0 0;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
}
.ebookMainWrap .pageForwardBtn:hover {
    background: rgba(0,0,0,1);
}
.ebookMainWrap .pageForwardBtn::before {
    content: "";
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    top:50%;
    margin: -15px 0 0 0;
    right: 11px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.ebookMainWrap .pageBackwardBtn {
    position: absolute;
    display: block;
    width: 40px;
    height: 100px;
    background: rgba(0,0,0,0.3);
    left:0;
    top:50%;
    margin: -50px 0 0 0;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
}
.ebookMainWrap .pageBackwardBtn:hover {
    background: rgba(0,0,0,1);
}
.ebookMainWrap .pageBackwardBtn::before {
    content: "";
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    top:50%;
    margin: -15px 0 0 0;
    left: 11px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


.ebookMainWrap .indexForwardBtn {
    position: absolute;
    display: block;
    width: 35px;
    height: 70px;
    background: rgba(0,0,0,0.8);
    right: 0;
    top:50%;
    margin: -35px 0 0 0;
    cursor: pointer;
}
.ebookMainWrap .indexForwardBtn:hover {
    background: rgba(0,0,0,1);
}
.ebookMainWrap .indexForwardBtn::before {
    content: "";
    position: absolute;
    display: block;
    width: 25px;
    height: 25px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    top:50%;
    margin: -12px 0 0 -2px;
    left: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.ebookMainWrap .indexBackwardBtn {
    position: absolute;
    display: block;
    width: 35px;
    height: 70px;
    background: rgba(0,0,0,0.8);
    left:0;
    top:50%;
    margin: -35px 0 0 0;
    cursor: pointer;
}
.ebookMainWrap .indexBackwardBtn:hover {
    background: rgba(0,0,0,1);
}
.ebookMainWrap .indexBackwardBtn::before {
    content: "";
    position: absolute;
    display: block;
    width: 25px;
    height: 25px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    top:50%;
    margin: -12px 0 0 -3px;
    left: 15px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
@media screen and (max-width: 800px) {
    .ebookMainWrap .menuBar {
        height: 80px;
    }
    .ebookMainWrap .menuBar::before {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 1px;
        background: #444;
        top:40px;
    }
    .ebookMainWrap .menuBar .menuBtn span {
        display: none;
    }
    .ebookMainWrap .menuBar .menuBtn.btn_map {
        left: 80px;
        top:45px
    }
    .ebookMainWrap .menuBar .menuBtn.btn_product {
        left: 45px;
        top:45px
    }
    .ebookMainWrap .menuBar .menuBtn.btn_index {
        left: 10px;
        top:45px
    }
    .ebookMainWrap .menuBar .menuBtn.btn_back {
        left: 10px;
        margin: 0 0 0 0;
    }
    .ebookMainWrap .menuBar .menuBtn.btn_backward {
        left: 45px;
        margin: 0 0 0 0;
    }
    .ebookMainWrap .menuBar .menuBtn.btn_forward {
        left: 165px;
        margin: 0 0 0 0;
    }
    .ebookMainWrap .menuBar .menuBtn.btn_front {
        left: 200px;
        margin: 0 0 0 0;
    }
    .ebookMainWrap .menuBar .pageNumber {
        left: 80px;
        margin: 0 0 0 0;
    }
    .ebookMainWrap .menuBar .menuBtn.btn_zoomin {
        right: 115px;
        top:45px;
    }
    .ebookMainWrap .menuBar .menuBtn.btn_zoomout {
        right: 150px;
        top:45px;
    }
    .ebookMainWrap .menuBar .menuBtn.btn_fullscreen {
        right: 80px;
        top:45px;
    }
    .ebookMainWrap .menuBar .menuBtn.btn_share {
        right: 45px;
        top:45px;
    }
    .ebookMainWrap .menuBar .menuBtn.btn_download {
        right: 10px;
        top:45px;
    }
    .ebookMainWrap .pageForwardBtn {
        width: 35px;
        height: 70px;
        margin: -35px 0 0 0;
    }
    .ebookMainWrap .pageForwardBtn:hover {
        background: rgba(0,0,0,0.3);
    }
    .ebookMainWrap .pageForwardBtn::before {
        width: 25px;
        height: 25px;
        margin: -12px 0 0 -2px;
    }
    .ebookMainWrap .pageBackwardBtn {
        width: 35px;
        height: 70px;
        margin: -35px 0 0 0;
    }
    .ebookMainWrap .pageBackwardBtn:hover {
        background: rgba(0,0,0,0.3);
    }
    .ebookMainWrap .pageBackwardBtn::before {
        width: 25px;
        height: 25px;
        margin: -12px 0 0 -3px;
    }
    .ebookMainWrap .menuBar .menuBtn.btn_stepback {
        right: 45px;
    }
    .ebookMainWrap .menuBar .menuBtn.btn_stepnext {
        right: 10px;
    }
}

.ebookMainWrap .index_menu {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
}
.ebookMainWrap .index_menu.expand {
    display: block;
}
.ebookMainWrap .index_menu .slideBox {
    position: absolute;
    display: block;
    width: 100%;
    height: 120px;
    top:50%;
    margin: -60px 0 0 0;
    background: #000;
}
.ebookMainWrap .index_menu ul {
    position: absolute;
    display: block;
    width: auto;
    height: 80%;
    top:5%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    /*white-space: nowrap;*/
    margin: 0 0 0 15px;
    /*padding: 0 0 12px 0;*/
}
.ebookMainWrap .index_menu ul li {
    position: relative;
    /*display: inline-block;*/
    height: 100%;
    margin: 0 15px 0 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.ebookMainWrap .index_menu ul li:hover::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border:2px solid #2a80ff;
    box-sizing: border-box;
}
.ebookMainWrap .index_menu ul li img {
    width: auto;
    height: 100%;
}
.ebookMainWrap .index_menu ul li span {
    position: absolute;
    display: block;
    width: 100%;
    top:calc(100% + 2px);
    text-align: center;
    white-space: nowrap;
    color:#fff;
    font-size: 12px;
}
.ebookMainWrap .index_menu .closeBtn {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    background: #000;
    right: 50px;
    top:50%;
    margin: -110px 0 0 0;
    cursor: pointer;
    border-radius:5px;
}

.ebookMainWrap .shareContainer {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
}
.ebookMainWrap .shareContainer.expand {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ebookMainWrap .shareContainer .shareBox {
    position: relative;
    display: block;
    width: 300px;
    background: #000;
}
.ebookMainWrap .shareContainer .shareBox .qrcodeBox {
    position: relative;
    display: block;
    width: 150px;
    height: 150px;
    background: #fff;
    left: 50%;
    margin: 30px 0 20px -75px;
    border-radius:10px;
    overflow: hidden;
}
.ebookMainWrap .shareContainer .shareBox .qrcodeBox img {
    width: 100%;
    height: 100%;
}
.ebookMainWrap .shareContainer .shareBox .socialList {
    position: relative;
    display: block;
    width: 90%;
    left: 5%;   
    text-align: center;
}
.ebookMainWrap .shareContainer .shareBox .socialList li {
    position: relative;
    display: inline-block;
    width: 35px;
    margin: 5px;
    cursor: pointer;
}
.ebookMainWrap .shareContainer .shareBox .urlCopyBox {
    position: relative;
    display: block;
    width: 90%;
    left: 5%;
    margin: 0 0 20px 0;
}
.ebookMainWrap .shareContainer .shareBox .urlCopyBox .urlText {
    position: relative;
    display: block;
    width: calc(100% - 50px);
    height: 30px;
    border: 0;
    padding: 5px;
    border-radius: 5px 0 0 5px;
    background: #aaa;
    margin: 10px 0 5px 0;
}
.ebookMainWrap .shareContainer .shareBox .urlCopyBox .urlCopyBtn {
    position: absolute;
    display: block;
    width: 50px;
    height: 30px;
    font-size: 13px;
    text-align: center;
    line-height: 30px;
    color:#fff;
    background: #2a80ff;
    cursor: pointer;
    right: 0;
    top: 0;
    border-radius:0 5px 5px 0;
}
.ebookMainWrap .shareContainer .shareBox .closeBtn {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    background: #000;
    right: 0px;
    top:-50px;
    cursor: pointer;
    border-radius:5px;
}

.ebookMainWrap .videoContainer {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    left: 0;
    top: 0;
}
.ebookMainWrap .videoContainer.expand {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ebookMainWrap .videoContainer .closeBtn {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    background: #000;
    right: -50px;
    top:0px;
    cursor: pointer;
    border-radius:5px;
}
.ebookMainWrap .videoContainer .videoBox {
    position: relative;
    display: block;
    width: 75vw;
    height: 40vw;
    background: #000;
}

@-webkit-keyframes loading {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4);}  
  20% { -webkit-transform: scaleY(1.0);}
}
@keyframes loading {
    0%, 40%, 100% { transform: scaleY(0.4);}
    20% { transform: scaleY(1.0);}
}


.loadingBox {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    top:0;
    opacity: 1;
    transition:  opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    pointer-events: none;
}

.loadingBox.loaded {
    opacity:0;
}

.loadingBar {
    position: absolute;
    left: 50%;
    top:50%;
    margin: -20px 0 0 -100px;
    width: 200px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

.loadingBar::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    background: #fff;
    left: 50%;
    margin: 0 0 0 -100px;
    top:31px;
}

.loadingBar > span {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    left:50%;
    margin: 0 0 0 -100px;
    line-height: 30px;
}

.loadingBar .loadingRect {
    position: absolute;
    display: block;
    width: 100%;
    height: 3px;
    background: #000;
    left: 50%;
    top: 31px;
    margin: 0 0 0 -100px;
}

.loadingBar .loadingText {
    position: absolute;
    display: block;
    top: 40px;
    width: 100%;
    left: 50%;
    margin: 0 0 0 -100px;
    text-align: center;
}

.loadingBox .tipText {
    position: absolute;
    display: block;
    width: 90%;
    top:50%;
    left: 5%;
    margin: 50px 0 0 0;
    font-size: 12px;
    line-height: 15px;
    color:#333;
    text-align: center;
}


/* Cyrus add */

.loadingBar .loadingRect{
    width: 0;
}
.headerBox{
    z-index: 9999999;
}
.ebookMainWrap .shareContainer{
    top: 0;
    left: 0;
    z-index: 99999999;
}
.ebookMainWrap .menuBar,.pageBackwardBtn,.pageForwardBtn{
    z-index: 9999999;
}
.ebookMainWrap .index_menu{
    top: 0;
    overflow: hidden;
    z-index: 9999999;
}
.ebookMainWrap .menuBar .pageNumber input{
    cursor: initial;
}
.animate-imgbox li{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    list-style: none;
}
.animate-imgbox img{
    opacity: 0;
/*    transition:  opacity 0.1s ease;
    -webkit-transition: opacity 0.1s ease;*/
}
.animate-imgbox img.current-image {
    opacity: 1;
}
.animate-imgbox img.previous-image {
    opacity: 0;
}
.ebookMainWrap .menuBar .pageNumber input:focus{outline: none;}
.ebookMainWrap .index_menu .slideBox{
    width: 90%;
    left: 5%;
    height: 150px;
    padding-bottom: 10px;
}
.ebookMainWrap .videoContainer{
    z-index: 99999999;
}
.ebookMainWrap .index_menu ul{
    height: calc(80% - 14px);
    /*top: 5%;*/
}
#ebook-viewport{
    display: none;
    position: relative;
    padding-bottom: 40px;
    padding-top: 50px;
    font-size: 100px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    /*font-size: 2vw;*/
}

#ebook-viewport .container {
    position: absolute;
    top: calc(50% + 5px);
    left: 50%;
    width: 100%;
    height: calc(100%);
    margin: auto;
    padding:0;
}
.animated{
    -webkit-transition:margin-left 0.5s;
    -moz-transition:margin-left 0.5s;
    -ms-transition:margin-left 0.5s;
    -o-transition:margin-left 0.5s;
    transition:margin-left 0.5s;
}
#ebook > div:not(.page-wrapper):not(.shadow) > div  > div{
    background: white;
}
.hiddenWrap{
    width: 0;
    height: 0;
}
.textLightBox .textBox a{
    text-decoration: underline;
    color: blue;
}
.ebookMainWrap .index_menu .slideBox{
    padding-bottom: 0;
}
.ebookMainWrap .index_menu ul{
/*    width: auto;
    height: 90%;*/
}
.ebookMainWrap .index_menu ul li{
    /*float: left;*/
}
.mainImg{z-index: 0;}
.mainText{z-index: 1;}
.stageBtn,.btnStyle1{z-index: 2;}
.ebookWrap .videoBtn a.btnLink{
    z-index: 2;
}
@media screen and (max-width: 800px) {
    #ebook-viewport .container {
        position: absolute;
        top: calc(50% - 15px);
        left: 50%;
        width: 100%;
        height: calc(100%);
        margin: auto;
    } 
    .ebookMainWrap .videoContainer .closeBtn{
        width: 30px;
        height: 30px;
        right: -35px;
    }
}


/*.root,.aem-Grid,.aem-Grid.aem-Grid--default--12>.aem-GridColumn.aem-GridColumn--default--12{
    height: 100%;
    position: absolute;
    width: 100%;
}*/

#cookieBar,#cookie-agree-modal{
    z-index: 99999999;
}
.leadinModal {
    z-index: 99999999;
}
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
    .ebookWrap.introPage .btnStyle1, .ebookWrap.huddleroomP2 .btnStyle1, .ebookWrap.meetingroomP2 .btnStyle1, .ebookWrap.conferenceroomP2 .btnStyle1, .ebookWrap.showroomP2 .btnStyle1, .ebookWrap.lobby .btnStyle1, .ebookWrap.Entrance .btnStyle1, .ebookWrap.ITcontrolroom .btnStyle1, .ebookWrap.HRoffice .btnStyle1 {
        padding: 0.02em 0.3em 0.05em 0.0em;
    }
}
.ebookWrap.lobby .stageTitle {
    width: 21.5%;
}
.ebookWrap.ITcontrolroom .stageTitle {
    width: 50%;
}
.ebookWrap.Entrance .stageTitle {
    width: 31%;
}
.ebookWrap.HRoffice .stageTitle {
    width: 32%;
}