*{ padding: 0px; margin: 0px; border: 0px; } ._1280{ width: 1280px; margin: auto; } body{ overflow-x: hidden; } .his{ width: 1280px; /*height: 826px;*/ margin: auto; position: relative; } @font-face { font-family: "OPPOSans-R"; font-style: normal; font-weight: normal; src: url("../../fonts/about/history/OPPOSans-R.ttf") format("truetype"),url("../../fonts/about/history/OPPOSans-R.woff") format("woff"), url("../../fonts/about/history/OPPOSans-R.svg") format("svg"); font-display: swap; } @font-face { font-family: "OPPOSans-H"; font-style: normal; font-weight: normal; src: url("../../fonts/about/history/OPPOSans-H.ttf") format("truetype"),url("../../fonts/about/history/OPPOSans-H.woff") format("woff"), url("../../fonts/about/history/OPPOSans-H.svg") format("svg"); font-display: swap; } @font-face { font-family:"SourceHanSansCN-Light"; font-style: normal; font-weight: normal; src: url("../../fonts/about/history/SourceHanSansCN-Light.ttf") format("truetype"),url("../../fonts/about/history/SourceHanSansCN-Light.woff") format("woff"), url("../../fonts/about/history/SourceHanSansCN-Light.svg") format("svg"); font-display: swap; } @font-face { font-family:"OPPOSans-Bold"; font-style: normal; font-weight: normal; src: url("../../fonts/about/history/OPPOSans-Bold.ttf") format("truetype"),url("../../fonts/about/history/OPPOSans-Bold.woff") format("woff"), url("../../fonts/about/history/OPPOSans-Bold.svg") format("svg"); font-display: swap; } @font-face { font-family:"SourceHanSansCN-Light"; font-style: normal; font-weight: normal; src: url("../../fonts/about/history/his/SourceHanSansCN-Light.ttf") format("truetype"),url("../../fonts/about/history/his/SourceHanSansCN-Light.woff") format("woff"), url("../../fonts/about/history/his/SourceHanSansCN-Light.svg") format("svg"); font-display: swap; } .HONERREAL{font-family: OPPOSans-H;display: block;margin-top: 35px;font-size: 36px;font-weight: normal;font-stretch: normal;line-height: 48px;letter-spacing: -1px;color: #b71a30;} .his_hr{ font-family: SourceHanSansCN-Light; font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: 0px; color: #525252; margin-top: 10px; display: block; } .viH{ height: 728px; background-color: #b71a30; } .viH{ background-color: #b71a30; margin-top: 44px; width: 1920px; left: -320px; position: absolute; height: 728px; } .bg2{ position: absolute; left: -320px; width: 1920px; z-index: -1; } .bg2Con{ height: 997px; width: 100%; position: relative; } .vcon{ height: 728px; margin-top: 44px; } .bg3{ position: absolute; width: 100%; display: block; top: 171px; z-index: -1; } .upgrade{ font-family: OPPOSans-R; font-size: 45px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: -2px; color: #b19f89; display: block; padding-top: 217px; position: relative; padding-left: 35px; z-index: 1; } .upgrade .nf{ font-family: OPPOSans-H; font-size: 45px; font-weight: normal; letter-spacing: -2px; color: #b19f89; } .hon{ font-family: OPPOSans-H; font-size: 36px; font-weight: normal; font-stretch: normal; line-height: 48px; letter-spacing: -1px; color: #b71a30; position: relative; left: 902px; top: 265px; position: relative; z-index: 1; } .passthrough{ position: absolute; font-family: SourceHanSansCN-Light; font-size: 22px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: 1px; color: #ffffff; /* position: absolute; */ left: 902px; top: 324px; /* position: relative; */ z-index: 1; } .trajectory{ font-family: SourceHanSansCN-Light; font-size: 22px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: 1px; color: #ffffff; position: absolute; left: 902px; top: 361px; z-index: 1; } .bg2Con > ul{ /* margin-left: 902px; */ /* margin-top: 168px; */ position: absolute; z-index: 1; left: 902px; top: 469px; } .bg2Con > ul > li{ font-family: OPPOSans-R; font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: 0px; color: #f1f1f1; list-style: none; margin-bottom: 15px; position: relative; cursor: pointer; } .bg2Con > ul > li span{ font-family: OPPOSans-H; font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: 0px; color: #ffffff; margin-left: 15px; } .bg2Con ol li .thumbnail{ } .bg2Con ol{ position: relative; z-index: 1; /* overflow: hidden; */ /* margin-left: 40px; */ /* margin-top: 15px; */ /* border: 1px solid red; */ width: 837px; /* margin-left: 62px; */ text-align: justify; } .bg2Con ol li{ /* overflow:hidden; */ margin-bottom: 0px; list-style: none; height: 120px; /* float: left; */ } .bg2Con > ol > li p:nth-of-type(1){ width:131px; height:78px; float: left; } .bg2Con ol li p:nth-of-type(1) img{ display:block; width:100%; height:100%; } .m{ width: 1278px; height: 503px; background-color: #050505; margin: 86px auto 0px; } .bg2Con > ol > li p:nth-of-type(2){ margin-left: 185px; width: 556px; padding-top: 13px; text-align: justify; } .bg2Con > ol > li p:nth-of-type(2) >span:nth-of-type(1){ display:block; /* font-family: OPPOSans-B; */ font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 32px; letter-spacing: 0px; color: #434343; font-family: OPPOSans-Bold; /* font-weight: bold; */ }.plyr__video-wrapper { position: relative; border-radius: inherit; background: #000; height: 100%; } .plyr .plyr__play-large { background: url("../../images/about/history/start.png"); width: 77px; height: 77px; } .plyr__play-large svg { display: none!important; } .bg2Con > ol > li p:nth-of-type(2) >span:nth-of-type(2){ font-size: 16px; font-weight: 500; font-stretch: normal; line-height: 24px; letter-spacing: 0px; color: #626262; } .bg2Con > ol > li:nth-of-type(1) > p:nth-of-type(2){ padding-top: 0px!important; } .bg2Con > ul > li:before{ content: ""; position: absolute; left: 221px; top: 50%; transform: translateY(-50%); width: 0px; border-top: 4px solid #b71a30; transition: all 0s ease; } .bg2Con > ul > li.on:before{ width: 157px; transition: all .6s ease; } .bg2Con > ul > li:nth-of-type(1).on:before { left: 145px; width: 232px; } .upgrades>ol{ display:none; height:100%; } .upgradeActive{ display:block!important; } .upgrades .xc{position: absolute;display: block;left: 0px;top: -48px;z-index: -1;} .upgrades{ padding-top: 171px; overflow: hidden; height: 624px; } .upgrades>ol>span:nth-of-type(1){ font-family: OPPOSans-R; font-size: 48px; font-weight: normal; font-stretch: normal; line-height: 48px; letter-spacing: -2px; color: #b19f89; margin-left: 46px; margin-bottom: 47px; display: block; margin-top: 0px; /* float: left; */ } .upgrades>ol>span>span{ font-family: OPPOSans-H; font-size: 48px; font-weight: normal; letter-spacing: -2px; color: #b19f89; margin-left: 12px; } .upgrades .rqs{ font-family: OPPOSans-H; font-size: 19px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: 0px; color: #434343; display: block; margin-left: 93px; margin-top: 46px; } .upgrades .hz{ font-family: SourceHanSansCN-Light; font-size: 19px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: 1px; color: #626262; margin-left: 93px; } .cy{ width: 11px; display: block; left: 66px; position: absolute; top: 90px; } .bg2Con > ul > li:nth-of-type(1):before { left: 145px; } .deveP{ width: 131px; height: 78px; float: left; margin-right: 54px; } .deveP img{ display:block!important; width:100%!important; height:100%!important; } .deveInfo{ margin-top: 19px; float: left; width: 558px; text-align: justify; } .development li{ margin-left: 48px; } .deveInfo>span:nth-of-type(1){ font-family: OPPOSans-H; font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 16px; letter-spacing: 0px; color: #434343; display: block; margin-bottom: 11px; position: relative; /* margin-top: 11px; */ } .deveInfo>span:nth-of-type(2){ font-family: SourceHanSansCN-Light; font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 26px; letter-spacing: 0px; color: #626262; } .qure {position: absolute;left: -31px;top:3px;} .eq{ width: 1px; display: block; height: 114px; background-color: #cbcbcb; position: absolute; left: -26px; top: 13px; } .turn{ } .turn>ol>span:nth-of-type(1) { font-family: OPPOSans-R; font-size: 48px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: -2px; color: #b19f89; margin-left: 46px; margin-bottom: 57px; display: block; } .turn>ol>span>span { font-family: OPPOSans-H; font-size: 48px; font-weight: normal; letter-spacing: -2px; color: #b19f89; margin-left: 12px; } .turn li { margin-left: 48px; } .upg li{ margin-left: 48px; } .upg li:nth-of-type(1) .deveInfo { margin-top: 6px!important; } .upg li:nth-of-type(1) .deveInfo>span:nth-of-type(1){ margin-top: -2px; } .development li:nth-of-type(1) .deveInfo { margin-top: 8px!important; } .development li:nth-of-type(1) .deveInfo .eq{ height: 121px; } .development li:last-child .eq{ display: none; } .turn li:last-child .eq{ display: none; } .upg li:last-child .eq{ display: none; } .upg li:nth-of-type(1) .deveInfo .eq { height: 125px; } .tamping li { margin-left: 48px; } .tamping li:nth-of-type(1) .deveInfo { margin-top: 6px!important; } .tamping li:last-child .eq { display: none; } .development,.turn,.upg,.tamping{ height: 576px!important; overflow-y: scroll; } body::-webkit-scrollbar { width: 5px; height: 200px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 0; } body::-webkit-scrollbar-thumb { background-color: #cbcbcb; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 0; } ::-webkit-scrollbar { width: 4px; height: 271px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } ::-webkit-scrollbar-thumb { background-color: rgba(97, 97, 97, 0.4); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 0; }