@font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-LightItalic.eot'); src: local('TT Commons Light Italic'), local('TTCommons-LightItalic'), url('/font/TTCommons-LightItalic.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-LightItalic.woff2') format('woff2'), url('/font/TTCommons-LightItalic.woff') format('woff'), url('/font/TTCommons-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-Black.eot'); src: local('TT Commons Black'), local('TTCommons-Black'), url('/font/TTCommons-Black.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-Black.woff2') format('woff2'), url('/font/TTCommons-Black.woff') format('woff'), url('/font/TTCommons-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-Bold.eot'); src: local('TT Commons Bold'), local('TTCommons-Bold'), url('/font/TTCommons-Bold.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-Bold.woff2') format('woff2'), url('/font/TTCommons-Bold.woff') format('woff'), url('/font/TTCommons-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-DemiBoldItalic.eot'); src: local('TT Commons DemiBold Italic'), local('TTCommons-DemiBoldItalic'), url('/font/TTCommons-DemiBoldItalic.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-DemiBoldItalic.woff2') format('woff2'), url('/font/TTCommons-DemiBoldItalic.woff') format('woff'), url('/font/TTCommons-DemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-BoldItalic.eot'); src: local('TT Commons Bold Italic'), local('TTCommons-BoldItalic'), url('/font/TTCommons-BoldItalic.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-BoldItalic.woff2') format('woff2'), url('/font/TTCommons-BoldItalic.woff') format('woff'), url('/font/TTCommons-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-Regular.eot'); src: local('TT Commons Regular'), local('TTCommons-Regular'), url('/font/TTCommons-Regular.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-Regular.woff2') format('woff2'), url('/font/TTCommons-Regular.woff') format('woff'), url('/font/TTCommons-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-ExtraBold.eot'); src: local('TT Commons ExtraBold'), local('TTCommons-ExtraBold'), url('/font/TTCommons-ExtraBold.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-ExtraBold.woff2') format('woff2'), url('/font/TTCommons-ExtraBold.woff') format('woff'), url('/font/TTCommons-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-Italic.eot'); src: local('TT Commons Italic'), local('TTCommons-Italic'), url('/font/TTCommons-Italic.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-Italic.woff2') format('woff2'), url('/font/TTCommons-Italic.woff') format('woff'), url('/font/TTCommons-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-ExtraLight.eot'); src: local('TT Commons ExtraLight'), local('TTCommons-ExtraLight'), url('/font/TTCommons-ExtraLight.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-ExtraLight.woff2') format('woff2'), url('/font/TTCommons-ExtraLight.woff') format('woff'), url('/font/TTCommons-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-MediumItalic.eot'); src: local('TT Commons Medium Italic'), local('TTCommons-MediumItalic'), url('/font/TTCommons-MediumItalic.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-MediumItalic.woff2') format('woff2'), url('/font/TTCommons-MediumItalic.woff') format('woff'), url('/font/TTCommons-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-Thin.eot'); src: local('TT Commons Thin'), local('TTCommons-Thin'), url('/font/TTCommons-Thin.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-Thin.woff2') format('woff2'), url('/font/TTCommons-Thin.woff') format('woff'), url('/font/TTCommons-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-ExtraLightItalic.eot'); src: local('TT Commons ExtraLight Italic'), local('TTCommons-ExtraLightItalic'), url('/font/TTCommons-ExtraLightItalic.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-ExtraLightItalic.woff2') format('woff2'), url('/font/TTCommons-ExtraLightItalic.woff') format('woff'), url('/font/TTCommons-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-ExtraBoldItalic.eot'); src: local('TT Commons ExtraBold Italic'), local('TTCommons-ExtraBoldItalic'), url('/font/TTCommons-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-ExtraBoldItalic.woff2') format('woff2'), url('/font/TTCommons-ExtraBoldItalic.woff') format('woff'), url('/font/TTCommons-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-Medium.eot'); src: local('TT Commons Medium'), local('TTCommons-Medium'), url('/font/TTCommons-Medium.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-Medium.woff2') format('woff2'), url('/font/TTCommons-Medium.woff') format('woff'), url('/font/TTCommons-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-BlackItalic.eot'); src: local('TT Commons Black Italic'), local('TTCommons-BlackItalic'), url('/font/TTCommons-BlackItalic.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-BlackItalic.woff2') format('woff2'), url('/font/TTCommons-BlackItalic.woff') format('woff'), url('/font/TTCommons-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-Light.eot'); src: local('TT Commons Light'), local('TTCommons-Light'), url('/font/TTCommons-Light.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-Light.woff2') format('woff2'), url('/font/TTCommons-Light.woff') format('woff'), url('/font/TTCommons-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-DemiBold.eot'); src: local('TT Commons DemiBold'), local('TTCommons-DemiBold'), url('/font/TTCommons-DemiBold.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-DemiBold.woff2') format('woff2'), url('/font/TTCommons-DemiBold.woff') format('woff'), url('/font/TTCommons-DemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'TT Commons'; src: url('/font/TTCommons-ThinItalic.eot'); src: local('TT Commons Thin Italic'), local('TTCommons-ThinItalic'), url('/font/TTCommons-ThinItalic.eot?#iefix') format('embedded-opentype'), url('/font/TTCommons-ThinItalic.woff2') format('woff2'), url('/font/TTCommons-ThinItalic.woff') format('woff'), url('/font/TTCommons-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; } /****** HTML STYLES *****/ html { width:100%; height:100%; } body { height: auto; overflow: hidden; min-height: 100%; margin: 0; text-align: center; font-family: 'TT Commons', sans-serif; color:#000; font-size:14px; font-weight:normal; line-height:18px; color: #fff; background: #0e1215; width:100%; min-width:320px; scroll-behavior: smooth; } body.ready2work { overflow-y: auto; } .align_center { position: relative; width: 100%; } .align_center:after { content: ''; display: block; clear: both; } .align_center_to_left { position: relative; right: 50%; float: right; } div { display: block; height: auto; overflow: hidden; } a, a:link, a:active, a:visited { color:#fff; text-decoration: none; } a:hover { text-decoration:none; } h1 { font-size:36px; line-height:36px; margin-bottom:18px; font-weight:bold; } #screen5services { display:none; } .cl0 { display:block; clear:both; height:1px; } .cl9 { display:block; clear:both; height:9px; } .cl10 { display:block; clear:both; height:10px; } .cl18 { display:block; clear:both; height:18px; } .cl20 { display:block; clear:both; height:20px; } .cl18 { display:block; clear:both; height:18px; } .cl36 { display:block; clear:both; height:36px; } .mob_only { display: none; } .nomob { display: block; } .ismob { display: none; } .mainrect { display: block; width: 980px; height: auto; margin:0; padding:0;text-align:center; position:relative;right: -50%; } #allcont { display:block; width: 100%; min-width:100%; height: 100%; min-height: 100%; overflow: auto; position: absolute; top: 0; left: 0; z-index: 2; scroll-behavior: smooth; } #citysel_block { display:none; width: 100%; min-width:100%; height: 100%; min-height: 100%; overflow: auto; position: absolute; top: 0; left: 0; z-index: 200; background: rgba(0,0,0,0.8); } #citysel_xclose { display:block; width: 36px; height: 36px; overflow: hidden; position: absolute; top: 24px; left: 26%; z-index: 200; background: url('images/xclose_w.png') center center no-repeat; cursor: pointer; } #screen_one { display:block; background: #fff; width:100%; height: 820px; overflow:auto; min-width: 1024px; display:block; text-align:left; margin-top:56px; position:relative; z-index:6; } #screen_one .mainrect { text-align:left; } #darker { display:none; width:100%; height:100%; position:fixed; top:0; left:0; background:#000; z-index:9999; } #darker_block { display:none; width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.8); z-index:999; } #goup_btn { display: block; width: 17px; height: 18px; overflow: hidden; background: url('images/goup_btn.png') center center no-repeat; background-size: 17px 18px; position: fixed; bottom: 72px; right: 6%; z-index: 60; } #allcontainer { display: none; width: 100vw; height: 100vh; overflow: hidden; overflow-y:auto; position: relative; top: 0; left: 0; z-index: 1; scroll-behavior: smooth; filter: url(#blur); -webkit-filter: url(#blur); will-change: filter, -webkit-filter; transform: translateZ(0); } #allcontainer.allcontainer_services { background: #c2c9d1; } #allcontainer.allcontainer_services #goup_btn { background: url('images/goup_btn_b.png') center center no-repeat; background-size: 17px 18px; } #top_darker_block { display:none; } #bgvideoblock { display:none; } #top_logo_block { display:none; } #logo { width: 130px; height: 103px; position: fixed; top: -120px; left: calc(50% - 65px); z-index: 100; background: url('images/logo.svg') center top no-repeat; background-size: contain; } #top_txt_block { width: 405px; left: 2.1vw; top: 2.1vw; position: fixed; z-index: 90; color: #211E1F; leading-trim: both; text-edge: cap; font-size: 18px; font-weight: 400; line-height: 23px; text-align: left; } #top_menu_btn { width: 48px; height: 24px; top: 2.1vw; right: 2.1vw; position: fixed; z-index: 100; background: url('images/menu_btn.svg') center top no-repeat; background-size: contain; cursor: pointer; } #top_scroll_ico { display: none; width: 120px; height: 64px; margin-top: calc(2.1vw + 64px + 100px); position: absolute; z-index: 100; top: calc(100% - 2.1vw - 64px); left: calc(50% - 60px); color: #A29C9D; leading-trim: both; text-edge: cap; font-size: 18px; font-weight: 400; line-height: 18px; box-sizing: border-box; padding-top: 28px; background: url('images/top_scroll_ico.png') left 54px top no-repeat; background-size: 40px 40px; text-align: left; } #top_nav_btn { display: none; width: 28px; height: 28px; bottom: 0; right: 0; position: fixed; z-index: 60; background: url('images/nav_btn.svg') right bottom no-repeat; background-size: contain; } #screen_fake_block { width: 100vw; height: 4000vh; position: relative; } /***** MENU ****/ #horizontalalert_block { display: block; width: 100vw; height: 100vh; position: fixed; z-index: 1000; top: 0; left: 0; background: rgba(36, 34, 35, 0.80) url('images/horizontalalert_block.png') center center no-repeat; background-size: 66px 78px; } #top_menu_block::-webkit-scrollbar { display: none; } #top_menu_block { display: none; width: 446px; height: 100vh; max-height: 100vh; overflow: hidden; text-align: right; position: fixed; top: 0; right: 0; z-index: 100; background: #3F3F3F; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; } #top_menu_xclose { width: 48px; height: 24px; top: 2.1vw; right: 2.1vw; position: absolute; z-index: 102; background: url('images/menu_btn.svg') center top no-repeat; background-size: contain; cursor: pointer; } #top_menu_cont { width: calc(100% - 2.1vw); min-height: 360px; position: relative; margin-top: 200px; margin-right: 2.1vw; margin-bottom: 80px; } .top_menu_item { display: block; color: #FFF; text-align: right; leading-trim: both; text-edge: cap; font-family: "TT Commons"; font-size: 30px; font-weight: 400; line-height: 80px; cursor: pointer; } #top_menu_item_agency { } #top_menu_item_pros { } #top_menu_item_posts { } #top_menu_item_contact { } #top_menu_txt_block { width: calc(100% - 2.1vw); color: #FFF; text-align: right; position: relative; margin-right: 2.1vw; margin-bottom: 54px; } #top_menu_txt_1 { margin-bottom: 58px; leading-trim: both; text-edge: cap; font-size: 30px; font-weight: 400; line-height: 42px; } #top_menu_txt_1 span { font-size: 18px; font-weight: 400; line-height: 42px; } #top_menu_txt_2 { margin-bottom: 58px; leading-trim: both; text-edge: cap; font-size: 30px; font-weight: 400; line-height: 42px; } #top_menu_txt_2 span { font-size: 18px; font-weight: 400; line-height: 42px; } #top_menu_soc { height: 36px; } .top_menu_soc { width: 36px; height: 36px; float: right; margin-left: 18px; } #top_menu_soc_yt { background: url('images/top_menu_soc_yt.png') center center no-repeat; background-size: contain; } #top_menu_soc_tg { background: url('images/top_menu_soc_tg.png') center center no-repeat; background-size: contain; } #top_menu_soc_wa { background: url('images/top_menu_soc_wa.png') center center no-repeat; background-size: contain; } #goup_btn { display:none; } #top_nav_block { display:none; } #top_nav_block_line1 { display:none; } .top_nav_block_line1_item { display:none; } #top_nav_block_line2 { } .top_nav_block_line2_item { display:none; } /*** CASE DETAILS ****/ #screen_casesdetails_block { display: none; width: 100vw; height: 100vh; max-height: 100vh; overflow: hidden; position: fixed; top: 0; right: 0; z-index: 200; background: #3F3F3F; -ms-overflow-style: none; scrollbar-width: none; text-align: left; } #screen_casesdetails_block_xclose { width: 36px; height: 36px; position: absolute; top: 24px; right: 24px; z-index: 222; background: url('images/screen_casesdetails_block_xclose.png') center center no-repeat; background-size: contain; cursor: pointer; } #screen_casesdetails_block_info { display: block; width: 100vw; height: auto; min-height: 204px; overflow: hidden; position: fixed; bottom: 0; left: 0; z-index: 210; background: #393839; -ms-overflow-style: none; scrollbar-width: none; max-height: 272px; overflow-y: auto; } #screen_casesdetails_block_header { width: 31.2vw; float: left; color: #EAEAEA; font-size: 40px; font-weight: 300; line-height: 46px; margin: 2.8vw 4.6vw 2.8vw 2vw; } #screen_casesdetails_block_logo { display: none; width: 15.6vw; height: 84px; margin: 60px 3.1vw; float: left; } #screen_casesdetails_block_txt { width: 56.4vw; float: right; margin: 54px 3.75vw 54px 0; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; } #screen_casesdetails_block_fullvideo { position: absolute; top: 72px; left: 0; z-index: 202; width: 100%; height: calc(100% - 274px); } #screen_casesdetails_block_fullvideo_cont { position: absolute; top: 0; left: 0; z-index: 204; width: 100%; height: 100%; } #screen_casesdetails_block_fullvideo_cont_video { width: 100%; height: 100%; } #screen_casesdetails_block_fullimg { display: none; position: absolute; top: 72px; left: 0; z-index: 202; width: 100%; height: calc(100% - 274px); } #screen_casesdetails_block_fullimg_pic { position: absolute; top: 0; left: 0; z-index: 204; width: 100%; height: 100%; object-fit: contain; } /*** preloader ****/ #screen_preloader_block { width: 100vw; height: 100vh; background: #fff; position: fixed; top: 0; left: 0; z-index: 500; } #screen_preloader_block_0d { width: 200px; height: 300px; position: absolute; top: calc(50% - 150px); left: calc(50% - 280px); color: #E74056; leading-trim: both; text-edge: cap; font-size: 300px; font-weight: 400; line-height: 470px; text-transform: uppercase; text-align: right; } #screen_preloader_block_1d { width: 200px; height: 300px; position: absolute; top: 100vh; left: calc(50% - 280px); color: #E74056; leading-trim: both; text-edge: cap; font-size: 300px; font-weight: 400; line-height: 470px; text-transform: uppercase; text-align: right; } #screen_preloader_block_2d { width: 200px; height: 300px; position: absolute; top: 100vh; left: calc(50% - 280px); color: #E74056; leading-trim: both; text-edge: cap; font-size: 300px; font-weight: 400; line-height: 470px; text-transform: uppercase; text-align: right; } #screen_preloader_block_3d { width: 200px; height: 300px; position: absolute; top: 100vh; left: calc(50% - 280px); color: #E74056; leading-trim: both; text-edge: cap; font-size: 300px; font-weight: 400; line-height: 470px; text-transform: uppercase; text-align: right; } #screen_preloader_block_4d { width: 200px; height: 300px; position: absolute; top: 100vh; left: calc(50% - 280px); color: #E74056; leading-trim: both; text-edge: cap; font-size: 300px; font-weight: 400; line-height: 470px; text-transform: uppercase; text-align: right; } #screen_preloader_block_5d { width: 200px; height: 300px; position: absolute; top: 100vh; left: calc(50% - 280px); color: #E74056; leading-trim: both; text-edge: cap; font-size: 300px; font-weight: 400; line-height: 470px; text-transform: uppercase; text-align: right; } #screen_preloader_block_6d { width: 200px; height: 300px; position: absolute; top: 100vh; left: calc(50% - 280px); color: #E74056; leading-trim: both; text-edge: cap; font-size: 300px; font-weight: 400; line-height: 470px; text-transform: uppercase; text-align: right; } #screen_preloader_block_7d { width: 200px; height: 300px; position: absolute; top: 100vh; left: calc(50% - 280px); color: #E74056; leading-trim: both; text-edge: cap; font-size: 300px; font-weight: 400; line-height: 470px; text-transform: uppercase; text-align: right; } #screen_preloader_block_8d { width: 200px; height: 300px; position: absolute; top: 100vh; left: calc(50% - 280px); color: #E74056; leading-trim: both; text-edge: cap; font-size: 300px; font-weight: 400; line-height: 470px; text-transform: uppercase; text-align: right; } #screen_preloader_block_9d { width: 200px; height: 300px; position: absolute; top: 100vh; left: calc(50% - 280px); color: #E74056; leading-trim: both; text-edge: cap; font-size: 300px; font-weight: 400; line-height: 470px; text-transform: uppercase; text-align: right; } #screen_preloader_block_10d { width: 250px; height: 300px; position: absolute; top: 100vh; left: calc(50% - 330px); color: #E74056; leading-trim: both; text-edge: cap; font-size: 300px; font-weight: 400; line-height: 470px; text-transform: uppercase; text-align: right; } #screen_preloader_block_0 { width: 140px; height: 300px; position: absolute; top: calc(50% - 150px); left: calc(50% - 70px); background: url('images/screen_preloader_block_0.png') bottom center no-repeat; background-size: contain; } #screen_preloader_block_p { width: 200px; height: 300px; position: absolute; top: calc(50% - 150px); left: calc(50% + 80px); color: #E74056; leading-trim: both; text-edge: cap; font-size: 300px; font-weight: 400; line-height: 470px; text-transform: uppercase; } /*** inmovement ****/ #screen_inmovement_block { display: none; width: 100vw; height: 100vh; background: #fff; position: fixed; top: 0; left: 0; z-index: 10; } #screen_inmovement_block_bglines { width: 400vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none; } #screen_cases_block_bglines { width: 400vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none; } #screen_timeline_block_bglines { width: 400vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none; } #screen_challenge_block_bglines { width: 400vw; height: 100vh; position: fixed; top: 0; left: 102vw; z-index: 80; pointer-events: none; } #screen_inmovement_block_bglines_video { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 10; } .screen_inmovement_block_bglines_item { position: absolute; z-index: 10; } .screen_inmovement_block_bglines_item_1 { width: 127px; height: 2px; background: #A29C9D; left: 7vw; top: 30vh; } .screen_inmovement_block_bglines_item_2 { width: 127px; height: 2px; background: #A29C9D; left: 79vw; top: 23vh; } .screen_inmovement_block_bglines_item_3 { width: 127px; height: 2px; background: #A29C9D; left: 15.3vw; top: 69vh; } .screen_inmovement_block_bglines_item_4 { width: 127px; height: 2px; background: #A29C9D; left: 25.5vw; top: 47vh; } .screen_inmovement_block_bglines_item_5 { width: 127px; height: 2px; background: #A29C9D; left: 68vw; top: 40vh; } .screen_inmovement_block_bglines_item_6 { width: 35px; height: 2px; background: #E74056; left: 55.4vw; top: 20vh; } .screen_inmovement_block_bglines_item_7 { width: 24px; height: 2px; background: #E74056; left: 93vw; top: 58vh; } .screen_inmovement_block_bglines_item_8 { width: 27px; height: 2px; background: #E74056; left: 10vw; top: 41vh; } .screen_inmovement_block_bglines_item_9 { width: 107px; height: 2px; background: #A29C9D; left: 88vw; top: 30vh; } .screen_inmovement_block_bglines_item_10 { width: 45px; height: 2px; background: #E74056; left: 45.4vw; top: 80vh; } .screen_inmovement_block_bglines_item_11 { width: 127px; height: 2px; background: #A29C9D; left: 107vw; top: 30vh; } .screen_inmovement_block_bglines_item_12 { width: 127px; height: 2px; background: #A29C9D; left: 179vw; top: 23vh; } .screen_inmovement_block_bglines_item_13 { width: 127px; height: 2px; background: #A29C9D; left: 115.3vw; top: 69vh; } .screen_inmovement_block_bglines_item_14 { width: 127px; height: 2px; background: #A29C9D; left: 125.5vw; top: 47vh; } .screen_inmovement_block_bglines_item_15 { width: 127px; height: 2px; background: #A29C9D; left: 168vw; top: 40vh; } .screen_inmovement_block_bglines_item_16 { width: 35px; height: 2px; background: #E74056; left: 155.4vw; top: 20vh; } .screen_inmovement_block_bglines_item_17 { width: 24px; height: 2px; background: #E74056; left: 193vw; top: 58vh; } .screen_inmovement_block_bglines_item_18 { width: 27px; height: 2px; background: #E74056; left: 110vw; top: 41vh; } .screen_inmovement_block_bglines_item_19 { width: 107px; height: 2px; background: #A29C9D; left: 188vw; top: 30vh; } .screen_inmovement_block_bglines_item_20 { width: 45px; height: 2px; background: #E74056; left: 145.4vw; top: 80vh; } .screen_inmovement_block_bglines_item_21 { width: 127px; height: 2px; background: #A29C9D; left: 207vw; top: 30vh; } .screen_inmovement_block_bglines_item_22 { width: 127px; height: 2px; background: #A29C9D; left: 279vw; top: 23vh; } .screen_inmovement_block_bglines_item_23 { width: 127px; height: 2px; background: #A29C9D; left: 215.3vw; top: 69vh; } .screen_inmovement_block_bglines_item_24 { width: 127px; height: 2px; background: #A29C9D; left: 225.5vw; top: 47vh; } .screen_inmovement_block_bglines_item_25 { width: 127px; height: 2px; background: #A29C9D; left: 268vw; top: 40vh; } .screen_inmovement_block_bglines_item_26 { width: 35px; height: 2px; background: #E74056; left: 255.4vw; top: 20vh; } .screen_inmovement_block_bglines_item_27 { width: 24px; height: 2px; background: #E74056; left: 293vw; top: 58vh; } .screen_inmovement_block_bglines_item_28 { width: 27px; height: 2px; background: #E74056; left: 210vw; top: 41vh; } .screen_inmovement_block_bglines_item_29 { width: 107px; height: 2px; background: #A29C9D; left: 288vw; top: 30vh; } .screen_inmovement_block_bglines_item_30 { width: 45px; height: 2px; background: #E74056; left: 245.4vw; top: 80vh; } .screen_inmovement_block_bglines_item_31 { width: 127px; height: 2px; background: #A29C9D; left: 307vw; top: 30vh; } .screen_inmovement_block_bglines_item_32 { width: 127px; height: 2px; background: #A29C9D; left: 379vw; top: 23vh; } .screen_inmovement_block_bglines_item_33 { width: 127px; height: 2px; background: #A29C9D; left: 315.3vw; top: 69vh; } .screen_inmovement_block_bglines_item_34 { width: 127px; height: 2px; background: #A29C9D; left: 325.5vw; top: 47vh; } .screen_inmovement_block_bglines_item_35 { width: 127px; height: 2px; background: #A29C9D; left: 368vw; top: 40vh; } .screen_inmovement_block_bglines_item_36 { width: 35px; height: 2px; background: #E74056; left: 355.4vw; top: 20vh; } .screen_inmovement_block_bglines_item_37 { width: 24px; height: 2px; background: #E74056; left: 393vw; top: 58vh; } .screen_inmovement_block_bglines_item_38 { width: 27px; height: 2px; background: #E74056; left: 310vw; top: 41vh; } .screen_inmovement_block_bglines_item_39 { width: 107px; height: 2px; background: #A29C9D; left: 388vw; top: 30vh; } .screen_inmovement_block_bglines_item_40 { width: 45px; height: 2px; background: #E74056; left: 345.4vw; top: 80vh; } #screen_power_block_bglines { width: 100vw; height: 400vh; position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none; } .screen_power_block_bglines_item { position: absolute; z-index: 10; } .screen_power_block_bglines_item_1 { width: 127px; height: 2px; background: #A29C9D; left: 7vw; top: 30vh; } .screen_power_block_bglines_item_2 { width: 127px; height: 2px; background: #A29C9D; left: 79vw; top: 23vh; } .screen_power_block_bglines_item_3 { width: 127px; height: 2px; background: #A29C9D; left: 15.3vw; top: 69vh; } .screen_power_block_bglines_item_4 { width: 127px; height: 2px; background: #A29C9D; left: 25.5vw; top: 47vh; } .screen_power_block_bglines_item_5 { width: 127px; height: 2px; background: #A29C9D; left: 68vw; top: 40vh; } .screen_power_block_bglines_item_6 { width: 35px; height: 2px; background: #E74056; left: 55.4vw; top: 20vh; } .screen_power_block_bglines_item_7 { width: 24px; height: 2px; background: #E74056; left: 93vw; top: 58vh; } .screen_power_block_bglines_item_8 { width: 27px; height: 2px; background: #E74056; left: 10vw; top: 41vh; } .screen_power_block_bglines_item_9 { width: 107px; height: 2px; background: #A29C9D; left: 88vw; top: 30vh; } .screen_power_block_bglines_item_10 { width: 45px; height: 2px; background: #E74056; left: 45.4vw; top: 80vh; } .screen_power_block_bglines_item_11 { width: 127px; height: 2px; background: #A29C9D; left: 7vw; top: 130vh; } .screen_power_block_bglines_item_12 { width: 127px; height: 2px; background: #A29C9D; left: 79vw; top: 123vh; } .screen_power_block_bglines_item_13 { width: 127px; height: 2px; background: #A29C9D; left: 15.3vw; top: 169vh; } .screen_power_block_bglines_item_14 { width: 127px; height: 2px; background: #A29C9D; left: 25.5vw; top: 147vh; } .screen_power_block_bglines_item_15 { width: 127px; height: 2px; background: #A29C9D; left: 68vw; top: 140vh; } .screen_power_block_bglines_item_16 { width: 35px; height: 2px; background: #E74056; left: 55.4vw; top: 120vh; } .screen_power_block_bglines_item_17 { width: 24px; height: 2px; background: #E74056; left: 93vw; top: 158vh; } .screen_power_block_bglines_item_18 { width: 27px; height: 2px; background: #E74056; left: 10vw; top: 141vh; } .screen_power_block_bglines_item_19 { width: 107px; height: 2px; background: #A29C9D; left: 88vw; top: 130vh; } .screen_power_block_bglines_item_20 { width: 45px; height: 2px; background: #E74056; left: 45.4vw; top: 180vh; } .screen_power_block_bglines_item_21 { width: 127px; height: 2px; background: #A29C9D; left: 7vw; top: 230vh; } .screen_power_block_bglines_item_22 { width: 127px; height: 2px; background: #A29C9D; left: 79vw; top: 223vh; } .screen_power_block_bglines_item_23 { width: 127px; height: 2px; background: #A29C9D; left: 15.3vw; top: 269vh; } .screen_power_block_bglines_item_24 { width: 127px; height: 2px; background: #A29C9D; left: 25.5vw; top: 247vh; } .screen_power_block_bglines_item_25 { width: 127px; height: 2px; background: #A29C9D; left: 68vw; top: 240vh; } .screen_power_block_bglines_item_26 { width: 35px; height: 2px; background: #E74056; left: 55.4vw; top: 220vh; } .screen_power_block_bglines_item_27 { width: 24px; height: 2px; background: #E74056; left: 93vw; top: 258vh; } .screen_power_block_bglines_item_28 { width: 27px; height: 2px; background: #E74056; left: 10vw; top: 241vh; } .screen_power_block_bglines_item_29 { width: 107px; height: 2px; background: #A29C9D; left: 88vw; top: 230vh; } .screen_power_block_bglines_item_30 { width: 45px; height: 2px; background: #E74056; left: 45.4vw; top: 280vh; } .screen_power_block_bglines_item_31 { width: 127px; height: 2px; background: #A29C9D; left: 7vw; top: 330vh; } .screen_power_block_bglines_item_32 { width: 127px; height: 2px; background: #A29C9D; left: 79vw; top: 323vh; } .screen_power_block_bglines_item_33 { width: 127px; height: 2px; background: #A29C9D; left: 15.3vw; top: 369vh; } .screen_power_block_bglines_item_34 { width: 127px; height: 2px; background: #A29C9D; left: 25.5vw; top: 347vh; } .screen_power_block_bglines_item_35 { width: 127px; height: 2px; background: #A29C9D; left: 68vw; top: 340vh; } .screen_power_block_bglines_item_36 { width: 35px; height: 2px; background: #E74056; left: 55.4vw; top: 320vh; } .screen_power_block_bglines_item_37 { width: 24px; height: 2px; background: #E74056; left: 93vw; top: 358vh; } .screen_power_block_bglines_item_38 { width: 27px; height: 2px; background: #E74056; left: 10vw; top: 341vh; } .screen_power_block_bglines_item_39 { width: 107px; height: 2px; background: #A29C9D; left: 88vw; top: 330vh; } .screen_power_block_bglines_item_40 { width: 45px; height: 2px; background: #E74056; left: 45.4vw; top: 380vh; } #screen_inmovement_block_20y { width: 900px; height: 300px; position: absolute; left: 102vw; top: calc(50% - 200px); z-index: 14; background: url('images/screen_inmovement_block_20y.svg') top center no-repeat; background-size: contain; } #screen_inmovement_block_inmove { width: 800px; color: #211F1F; font-size: 160px; font-weight: 400; line-height: 160px; position: absolute; top: calc(50% + 80px); left: 102vw; z-index: 14; } #screen_inmovement_block_logos { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 12; } .screen_inmovement_block_logos_item { width: 200px; height: 90px; position: absolute; top: 40%; left: 102vw; background: url('img2/rzd_logo.png') center center no-repeat; background-size: contain; opacity: 0.5; } #screen_inmovement_block_logos_item_1 { top: 10%; background: url('img2/screen_inmovement_block_logos_item_1.png') center center no-repeat; background-size: contain; } #screen_inmovement_block_logos_item_2 { top: 60%; background: url('img2/ozk_logo.jpg') center center no-repeat; background-size: contain; } #screen_inmovement_block_logos_item_3 { top: 20%; background: url('img2/screen_inmovement_block_logos_item_3.png') center center no-repeat; background-size: contain; } #screen_inmovement_block_logos_item_4 { top: 90%; background: url('img2/screen_inmovement_block_logos_item_4.png') center center no-repeat; background-size: contain; } #screen_inmovement_block_logos_item_5 { top: 80%; background: url('img2/screen_inmovement_block_logos_item_5.png') center center no-repeat; background-size: contain; } #screen_inmovement_block_logos_item_6 { top: 50%; background: url('img2/screen_inmovement_block_logos_item_6.png') center center no-repeat; background-size: contain; } #screen_inmovement_block_logos_item_7 { top: 60%; background: url('img2/screen_inmovement_block_logos_item_7.png') center center no-repeat; background-size: contain; } #screen_inmovement_block_logos_item_8 { top: 40%; background: url('img2/screen_inmovement_block_logos_item_8.png') center center no-repeat; background-size: contain; } #screen_inmovement_block_logos_item_9 { top: 80%; background: url('img2/screen_inmovement_block_logos_item_9.png') center center no-repeat; background-size: contain; } #screen_inmovement_block_logos_item_10 { top: 9%; background: url('img2/screen_inmovement_block_logos_item_10.png') center center no-repeat; background-size: contain; } #screen_inmovement_block_art { color: rgba(162, 156, 157, 0.10); font-size: 200px; font-weight: 400; line-height: 300px; text-transform: uppercase; position: absolute; top: 20%; left: 102vw; z-index: 15; } #screen_inmovement_block_created { color: rgba(162, 156, 157, 0.50); font-size: 150px; font-weight: 400; line-height: 300px; text-transform: uppercase; position: absolute; top: 60%; left: 102vw; z-index: 15; } #screen_inmovement_block_growed { width: 900px; height: 300px; background: url('images/screen_inmovement_block_growed.png') center left no-repeat; background-size: contain; position: absolute; top: calc(50% - 210px); left: 102vw; z-index: 15; } #screen_inmovement_block_became { width: 2000px; height: 300px; background: url('images/screen_inmovement_block_became.png') center left no-repeat; background-size: contain; position: absolute; top: calc(50% - 210px); left: 102vw; z-index: 15; } #screen_inmovement_block_howwe { color: #211E1F; font-size: 60px; font-weight: 300; line-height: 64px; text-transform: uppercase; position: absolute; top: calc(50% - 32px); left: 102vw; z-index: 15; } /*** timeline ****/ #screen_timeline_block { width: 100vw; height: 100vh; background: url('images/screen_challenge_block_bg.png') center center no-repeat; background-size: cover; position: fixed; top: 0; left: 100vw; z-index: 20; } .screen_timeline_block_item { width: 100vw; height: 100vh; position: absolute; top: 0; left: 100vw; z-index: 20; text-align: left; } .screen_timeline_block_year { width: 1400px; height: 300px; text-align: center; color: #E74056; font-size: 300px; font-weight: 400; line-height: 300px; text-transform: uppercase; position: absolute; top: calc(50% - 150px); left: calc(50% - 700px); z-index: 22; } #screen_timeline_block_2005 { left: 100vw; width: 80vw; } #screen_timeline_block_2005_date1 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 60%; left: 8vw; z-index: 23; } #screen_timeline_block_2005_txt1 { width: 20vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: calc(60% + 48px); left: 12vw; z-index: 24; } #screen_timeline_block_2005_img1a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2005_img1a.png') center left no-repeat; background-size: contain; position: absolute; top: 25%; left: 2vw; z-index: 21; } #screen_timeline_block_2005_txt2 { width: 35vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 63%; left: 48vw; z-index: 23; } #screen_timeline_block_2005_img2a { width: 200px; height: 300px; background: url('img2/screen_timeline_block_2005_img2a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 62vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2007 { left: 180vw; width: 60vw; } #screen_timeline_block_2007_txt1 { width: 40vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 70%; left: 12vw; z-index: 24; } #screen_timeline_block_2007_img1a { width: 400px; height: 200px; background: url('img2/screen_timeline_block_2007_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 40%; left: 02vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2008 { left: 240vw; width: 60vw; } #screen_timeline_block_2008_txt1 { width: 35vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 65%; left: 0; z-index: 24; } #screen_timeline_block_2008_img1a { width: 400px; height: 200px; background: url('img2/screen_timeline_block_2008_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 32vw; z-index: 21; opacity: 0.7; } #screen_timeline_block_2010 { left: 300vw; width: 60vw; } #screen_timeline_block_2010_txt1 { width: 20vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 70%; left: 22vw; z-index: 24; } #screen_timeline_block_2010_img1a { width: 400px; height: 200px; background: url('img2/screen_timeline_block_2010_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 02vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2010_img1b { width: 300px; height: 500px; background: url('img2/screen_timeline_block_2010_img1b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 20%; left: 42vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2011 { left: 360vw; width: 60vw; } #screen_timeline_block_2011_date1 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 25%; left: 10vw; z-index: 23; } #screen_timeline_block_2011_txt1 { width: 35vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 65%; left: 22vw; z-index: 24; } #screen_timeline_block_2011_img1a { width: 400px; height: 200px; background: url('img2/screen_timeline_block_2011_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 12vw; z-index: 21; opacity: 0.6; } #screen_timeline_block_2011_img1b { width: 300px; height: 500px; background: url('img2/screen_timeline_block_2011_img1b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 20%; left: 42vw; z-index: 21; opacity: 0.3; } #screen_timeline_block_2013 { left: 420vw; width: 80vw; } #screen_timeline_block_2013_date1 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 65%; left: 10vw; z-index: 23; } #screen_timeline_block_2013_txt1 { width: 20vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: calc(65% + 54px); left: 12vw; z-index: 24; } #screen_timeline_block_2013_img1a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2013_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 40%; left: 8vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2013_date2 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 23%; left: 55vw; z-index: 23; } #screen_timeline_block_2013_txt2 { width: 35vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 60%; left: 45vw; z-index: 23; } #screen_timeline_block_2013_img2a { width: 300px; height: 500px; background: url('img2/screen_timeline_block_2013_img2a.jpg') top left no-repeat; background-size: contain; position: absolute; top: 10%; left: 42vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2013_img2b { width: 300px; height: 500px; background: url('img2/screen_timeline_block_2013_img2b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 50%; left: 62vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2014 { left: 500vw; width: 80vw; } #screen_timeline_block_2014_txt1 { width: 20vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 53%; left: 12vw; z-index: 24; } #screen_timeline_block_2014_img1a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2014_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 40%; left: 02vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2014_img1b { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2014_img1b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 22vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2014_img1c { width: 300px; height: 500px; background: url('img2/screen_timeline_block_2014_img1c.jpg') center left no-repeat; background-size: contain; position: absolute; top: 50%; left: 62vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2014_img1d { width: 300px; height: 500px; background: url('img2/screen_timeline_block_2014_img1d.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 52vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2015 { left: 580vw; width: 100vw; } #screen_timeline_block_2015_date1 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 25%; left: 10vw; z-index: 23; } #screen_timeline_block_2015_txt1 { width: 20vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 35%; left: 12vw; z-index: 24; } #screen_timeline_block_2015_img1a { width: 400px; height: 200px; background: url('img2/screen_timeline_block_2015_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 40%; left: 02vw; z-index: 21; } #screen_timeline_block_2015_date2 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 65%; left: 20vw; z-index: 23; } #screen_timeline_block_2015_txt2 { width: 35vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 75%; left: 28vw; z-index: 23; } #screen_timeline_block_2015_img2a { width: 300px; height: 500px; background: url('img2/screen_timeline_block_2015_img2a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 30%; left: 42vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2015_date3 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 25%; left: 87vw; z-index: 23; } #screen_timeline_block_2015_txt3 { width: 30vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 50%; left: 68vw; z-index: 23; } #screen_timeline_block_2015_img3a { width: 300px; height: 300px; background: url('img2/screen_timeline_block_2015_img3a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 72vw; z-index: 21; opacity: 0.6; } #screen_timeline_block_2015_img3b { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2015_img3b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 52vw; z-index: 21; opacity: 0.4; } #screen_timeline_block_2015_img3c { width: 150px; height: 150px; background: url('img2/screen_timeline_block_2015_img3c.jpg') center left no-repeat; background-size: contain; position: absolute; top: 80%; left: 65vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2016 { left: 680vw; width: 60vw; } #screen_timeline_block_2016_date1 { width: 35vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 70%; left: 10vw; z-index: 23; } #screen_timeline_block_2016_txt1 { width: 30vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: calc(70% + 48px); left: 12vw; z-index: 24; } #screen_timeline_block_2016_img1a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2016_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 40%; left: 02vw; z-index: 21; opacity: 0.6; } #screen_timeline_block_2016_img1b { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2016_img1b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 42vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2016_img1c { width: 300px; height: 500px; background: url('img2/screen_timeline_block_2016_img1c.jpg') center left no-repeat; background-size: contain; position: absolute; top: 50%; left: 62vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2018 { left: 740vw; width: 200vw; } #screen_timeline_block_2018_date1 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 25%; left: 10vw; z-index: 23; } #screen_timeline_block_2018_txt1 { width: 30vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 40%; left: 12vw; z-index: 24; } #screen_timeline_block_2018_img1a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2018_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 2vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2018_img1b { display: none; width: 200px; height: 200px; background: url('img2/screen_timeline_block_2018_img1b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 30%; left: 14vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2018_img1c { display: none; width: 200px; height: 200px; background: url('img2/screen_timeline_block_2018_img1c.jpg') center left no-repeat; background-size: contain; position: absolute; top: 30%; left: 22vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2018_img1d { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2018_img1d.jpg') center left no-repeat; background-size: contain; position: absolute; top: 50%; left: 0vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2018_img1e { width: 400px; height: 200px; background: url('img2/screen_timeline_block_2018_img1e.jpg') center left no-repeat; background-size: contain; position: absolute; top: 60%; left: 32vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2018_date2 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 65%; left: 50vw; z-index: 23; } #screen_timeline_block_2018_txt2 { width: 30vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 30%; left: 52vw; z-index: 24; } #screen_timeline_block_2018_img2a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2018_img2a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 70%; left: 82vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2018_img2b { width: 400px; height: 300px; background: url('img2/screen_timeline_block_2018_img2b.jpg') top left no-repeat; background-size: contain; position: absolute; top: 10%; left: 42vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2018_img2c { width: 300px; height: 300px; background: url('img2/screen_timeline_block_2018_img2c.jpg') center left no-repeat; background-size: contain; position: absolute; top: 60%; left: 62vw; z-index: 21; opacity: 0.3; } #screen_timeline_block_2018_date3 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 25%; left: 120vw; z-index: 23; } #screen_timeline_block_2018_txt3 { width: 35vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 40%; left: 122vw; z-index: 24; } #screen_timeline_block_2018_img3a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2018_img3a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 5%; left: 122vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2018_img3b { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2018_img3b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 56%; left: 112vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2018_date4 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 25%; left: 170vw; z-index: 23; } #screen_timeline_block_2018_txt4 { width: 20vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 50%; left: 162vw; z-index: 24; } #screen_timeline_block_2018_img4a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2018_img4a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 152vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2018_img4b { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2018_img4b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 30%; left: 172vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2018_img4c { width: 300px; height: 500px; background: url('img2/screen_timeline_block_2018_img4c.jpg') top left no-repeat; background-size: contain; position: absolute; top: 70%; left: 142vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2019 { left: 940vw; width: 200vw; } #screen_timeline_block_2019_date1 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 45%; left: 10vw; z-index: 23; } #screen_timeline_block_2019_txt1 { width: 25vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 55%; left: 12vw; z-index: 24; } #screen_timeline_block_2019_img1a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2019_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 15%; left: 2vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2019_img1b { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2019_img1b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 60%; left: 34vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2019_date2 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 20%; left: 40vw; z-index: 23; } #screen_timeline_block_2019_txt2 { width: 35vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 30%; left: 42vw; z-index: 24; } #screen_timeline_block_2019_img2a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2019_img2a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 72vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2019_date3 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 65%; left: 65vw; z-index: 23; } #screen_timeline_block_2019_txt3 { width: 45vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 65%; left: 82vw; z-index: 24; } #screen_timeline_block_2019_img3a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2019_img3a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 112vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2019_img3b { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2019_img3b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 70%; left: 52vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2019_date4 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 25%; left: 135vw; z-index: 23; } #screen_timeline_block_2019_txt4 { width: 30vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 40%; left: 130vw; z-index: 24; } #screen_timeline_block_2019_img4a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2019_img4a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 70%; left: 146vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2019_img4b { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2019_img4b.jpg') top left no-repeat; background-size: contain; position: absolute; top: 10%; left: 132vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2019_img4c { width: 300px; height: 500px; background: url('img2/screen_timeline_block_2019_img4c.jpg') center left no-repeat; background-size: contain; position: absolute; top: 40%; left: 122vw; z-index: 21; opacity: 0.3; } #screen_timeline_block_2019_date5 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 45%; left: 170vw; z-index: 23; } #screen_timeline_block_2019_txt5 { width: 25vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 60%; left: 166vw; z-index: 24; } #screen_timeline_block_2019_img5a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2019_img5a.jpg') center left no-repeat; background-size: contain; position: absolute; top:40%; left: 182vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2020 { left: 1140vw; width: 60vw; } #screen_timeline_block_2020_txt1 { width: 20vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 70%; left: 12vw; z-index: 24; } #screen_timeline_block_2020_img1a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2020_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 40%; left: 02vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2020_img1b { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2020_img1b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 40vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2021 { left: 1200vw; width: 200vw; } #screen_timeline_block_2021_date1 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 25%; left: 10vw; z-index: 23; } #screen_timeline_block_2021_txt1 { width: 40vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 50%; left: 0; z-index: 24; } #screen_timeline_block_2021_img1a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2021_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 2vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2021_img1b { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2021_img1b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 70%; left: 14vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2021_img1c { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2021_img1c.jpg') center left no-repeat; background-size: contain; position: absolute; top: 30%; left: 24vw; z-index: 21; opacity: 0.3; } #screen_timeline_block_2021_date2 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 35%; left: 50vw; z-index: 23; } #screen_timeline_block_2021_txt2 { width: 20vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 50%; left: 52vw; z-index: 24; } #screen_timeline_block_2021_img2a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2021_img2a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 30%; left: 65vw; z-index: 21; opacity: 0.9; } #screen_timeline_block_2021_date3 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 65%; left: 90vw; z-index: 23; } #screen_timeline_block_2021_txt3 { width: 30vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 75%; left: 92vw; z-index: 24; } #screen_timeline_block_2021_img3a { width: 300px; height: 300px; background: url('img2/screen_timeline_block_2021_img3a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 3%; left: 92vw; z-index: 21; opacity: 0.3; } #screen_timeline_block_2021_img3b { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2021_img3b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 50%; left: 112vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2021_img3c { width: 200px; height: 300px; background: url('img2/screen_timeline_block_2021_img3c.jpg') center left no-repeat; background-size: contain; position: absolute; top: 60%; left: 79vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2021_date4 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 25%; left: 140vw; z-index: 23; } #screen_timeline_block_2021_txt4 { width: 20vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 35%; left: 132vw; z-index: 24; } #screen_timeline_block_2021_img4a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2021_img4a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 30%; left: 152vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2021_date5 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 85%; left: 180vw; z-index: 23; } #screen_timeline_block_2021_txt5 { width: 25vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 50%; left: 172vw; z-index: 24; } #screen_timeline_block_2021_img5a { width: 250px; height: 250px; background: url('img2/screen_timeline_block_2021_img5a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 20%; left: 182vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2021_img5b { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2021_img5b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 73%; left: 156vw; z-index: 21; } #screen_timeline_block_2021_img5c { width: 300px; height: 400px; background: url('img2/screen_timeline_block_2021_img5c.jpg') center left no-repeat; background-size: contain; position: absolute; top: 50%; left: 166vw; z-index: 21; opacity: 0.3; } #screen_timeline_block_2022 { left: 1400vw; width: 120vw; } #screen_timeline_block_2022_date1 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 25%; left: 10vw; z-index: 23; } #screen_timeline_block_2022_txt1 { width: 30vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 35%; left: 12vw; z-index: 24; } #screen_timeline_block_2022_img1a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2022_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 40%; left: 02vw; z-index: 21; } #screen_timeline_block_2022_img1b { width: 300px; height: 300px; background: url('img2/screen_timeline_block_2022_img1b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 65%; left: 17vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2022_img1c { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2022_img1c.jpg') center left no-repeat; background-size: contain; position: absolute; top: 60%; left: 35vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2022_img1d { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2022_img1d.jpg') center left no-repeat; background-size: contain; position: absolute; top: 5%; left: 40vw; z-index: 21; } #screen_timeline_block_2022_date2 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 65%; left: 48vw; z-index: 23; } #screen_timeline_block_2022_txt2 { width: 30vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 65%; left: 64vw; z-index: 23; } #screen_timeline_block_2022_img2a { width: 300px; height: 500px; background: url('img2/screen_timeline_block_2022_img2a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 52vw; z-index: 21; opacity: 0.3; } #screen_timeline_block_2022_img2b { width: 300px; height: 300px; background: url('img2/screen_timeline_block_2022_img2b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 70%; left: 72vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2022_date3 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 15%; left: 86vw; z-index: 23; } #screen_timeline_block_2022_txt3 { width: 35vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 30%; left: 88vw; z-index: 23; } #screen_timeline_block_2022_img3a { width: 300px; height: 300px; background: url('img2/screen_timeline_block_2022_img3a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 28%; left: 96vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2023 { left: 1520vw; width: 80vw; } #screen_timeline_block_2023_date1 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 55%; left: 10vw; z-index: 23; } #screen_timeline_block_2023_txt1 { width: 20vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 65%; left: 12vw; z-index: 24; } #screen_timeline_block_2023_img1a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2023_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 20%; left: 02vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2023_date2 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 19%; left: 55vw; z-index: 23; } #screen_timeline_block_2023_txt2 { width: 25vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 60%; left: 55vw; z-index: 23; } #screen_timeline_block_2023_img2a { width: 300px; height: 500px; background: url('img2/screen_timeline_block_2023_img2a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 2%; left: 62vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2023_img2b { width: 300px; height: 500px; background: url('img2/screen_timeline_block_2023_img2b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 47%; left: 38vw; z-index: 21; opacity: 0.3; } #screen_timeline_block_2024 { left: 1600vw; width: 140vw; } #screen_timeline_block_2024_date1 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 15%; left: 10vw; z-index: 23; } #screen_timeline_block_2024_txt1 { width: 35vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 25%; left: 12vw; z-index: 24; } #screen_timeline_block_2024_img1a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2024_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 30%; left: 2vw; z-index: 21; opacity: 0.9; } #screen_timeline_block_2024_img1b { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2024_img1b.jpg') center left no-repeat; background-size: contain; position: absolute; top: 65%; left: 14vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2024_img1c { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2024_img1c.jpg') center left no-repeat; background-size: contain; position: absolute; top: 50%; left: 32vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_2024_date2 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 65%; left: 54vw; z-index: 23; } #screen_timeline_block_2024_txt2 { width: 30vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 75%; left: 56vw; z-index: 24; } #screen_timeline_block_2024_img2a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2024_img2a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 70%; left: 82vw; z-index: 21; opacity: 0.4; } #screen_timeline_block_2024_date3 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 5%; left: 90vw; z-index: 23; } #screen_timeline_block_2024_txt3 { width: 20vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 15%; left: 92vw; z-index: 24; } #screen_timeline_block_2024_img3a { width: 200px; height: 200px; background: url('img2/screen_timeline_block_2024_img3a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 30%; left: 96vw; z-index: 21; opacity: 0.8; } #screen_timeline_block_2024_date4 { width: 30vw; color: #E74056; font-size: 60px; font-weight: 200; line-height: 56px; position: absolute; top: 45%; left: 118vw; z-index: 23; } #screen_timeline_block_2024_txt4 { width: 20vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 55%; left: 118vw; z-index: 24; } #screen_timeline_block_2024_img4a { width: 400px; height: 300px; background: url('img2/screen_timeline_block_2024_img4a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 65%; left: 117vw; z-index: 21; } #screen_timeline_block_2025 { left: 1740vw; width: 60vw; } #screen_timeline_block_2025_txt1 { width: 30vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: 65%; left: 18vw; z-index: 24; } #screen_timeline_block_2025_img1a { width: 600px; height: 300px; background: url('img2/screen_timeline_block_2025_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 0; z-index: 21; opacity: 0.5; } #screen_timeline_block_today { left: 1800vw; } #screen_timeline_block_today_txt1 { width: 30vw; color: #EAEAEA; font-size: 24px; font-weight: 200; line-height: 36px; position: absolute; top: calc(50% + 76px); left: 10vw; z-index: 23; } #screen_timeline_block_today_date1 { width: 30vw; color: #EAEAEA; font-size: 40px; font-weight: 300; line-height: 40px; position: absolute; top: 67%; left: 60vw; z-index: 24; } #screen_timeline_block_today_date1 span { color: #E74056; } #screen_timeline_block_today_img1a { width: 600px; height: 400px; background: url('img2/screen_timeline_block_today_img1a.jpg') center left no-repeat; background-size: contain; position: absolute; top: 10%; left: 2vw; z-index: 21; opacity: 0.25; } #screen_timeline_block_today_img1b { width: 200px; height: 200px; background: url('img2/screen_timeline_block_today_img1b.jpg') center left no-repeat; background-size: contain; position: absolute; top: calc(90% - 160px);; left: 42vw; z-index: 21; opacity: 0.6; } #screen_timeline_block_today_img1c { width: 300px; height: 500px; background: url('img2/screen_timeline_block_today_img1c.jpg') center left no-repeat; background-size: contain; position: absolute; top: 0%; left: 62vw; z-index: 21; opacity: 0.5; } #screen_timeline_block_today_img1d { width: 200px; height: 200px; background: url('img2/screen_timeline_block_today_img1d.jpg') center left no-repeat; background-size: contain; position: absolute; top: 70%; left: 72vw; z-index: 21; opacity: 0.3; } #screen_timeline_block_today_img1e { width: 300px; height: 500px; background: url('img2/screen_timeline_block_today_img1e.jpg') center left no-repeat; background-size: contain; position: absolute; top: 40%; left: 92vw; z-index: 21; opacity: 0.7; } /*** cases ****/ #screen_cases_block { width: 100vw; height: 100vh; background: #fff; position: fixed; top: 0; left: 100vw; z-index: 30; } #screen_cases_block_header1 { width: 350px; height: 300px; position: absolute; left: calc(50% - 305px); top: calc(50% - 290px); z-index: 14; background: url('images/screen_cases_block_header1.png') left center no-repeat; background-size: contain; pointer-events: none; } #screen_cases_block_header2 { width: 1200px; height: 360px; position: absolute; left: calc(50% - 250px); top: calc(50% - 20px); z-index: 14; text-align: left; color: #B5B0B1; font-size: 300px; font-weight: 400; line-height: 360px; text-transform: uppercase; pointer-events: none; } #screen_cases_block_bgheader { width: 200vw; height: 100vh; position: absolute; left:0; top: 0; z-index: 10; background: url('images/screen_cases_block_bgheader.png') left center no-repeat; background-size: contain; pointer-events: none; } #screen_cases_block_txt { width: 350px; height: 70px; position: absolute; left: calc(50% - 305px); top: calc(50% + 240px); z-index: 14; color: #211E1F; font-size: 24px; font-weight: 200; line-height: 36px; pointer-events: none; text-transform: uppercase; } .screen_cases_block_item { width: 400px; height: 520px; position: absolute; left:20%; top: 30%; z-index: 10; background: url('img2/screen_cases_block_item.jpg') center center no-repeat; background-size: contain; cursor: pointer; } .screen_cases_block_item .screen_cases_block_header { display: none; } .screen_cases_block_item .screen_cases_block_txt { display: none; } #screen_cases_block_item_1 { width: 300px; height: 220px; left:20%; top: 30%; background: url('img2/screen_cases_block_item_1.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_2 { width: 250px; height: 200px; left:50%; top: 50%; background: url('img2/screen_cases_block_item_2.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_3 { width: 300px; height: 200px; left:10%; top: 10%; background: url('img2/screen_cases_block_item_3.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_4 { width: 400px; height: 320px; left:90%; top: 20%; background: url('img2/screen_cases_block_item_4.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_5 { width: 200px; height: 180px; left:40%; top: 40%; background: url('img2/screen_cases_block_item_5.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_6 { width: 200px; height: 200px; left:40%; top: 30%; background: url('img2/screen_cases_block_item_6.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_7 { width: 300px; height: 220px; left:70%; top: 20%; background: url('img2/screen_cases_block_item_7.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_8 { width: 300px; height: 220px; left:40%; top: 40%; background: url('img2/screen_cases_block_item_8.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_9 { width: 300px; height: 320px; left:110%; top: 60%; background: url('img2/screen_cases_block_item_9.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_10 { width: 450px; height: 380px; left:10%; top: 40%; background: url('img2/screen_cases_block_item_10.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_11 { width: 200px; height: 150px; left:100%; top: 20%; background: url('img2/screen_cases_block_item_11.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_12 { width: 200px; height: 150px; left:70%; top: 15%; background: url('img2/screen_cases_block_item_12.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_13 { width: 300px; height: 600px; left:50%; top: 30%; background: url('img2/screen_cases_block_item_13.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_14 { width: 400px; height: 320px; left:70%; top: 50%; background: url('img2/screen_cases_block_item_14.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_15 { width: 200px; height: 320px; left:40%; top: 20%; background: url('img2/screen_cases_block_item_15.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_16 { width: 250px; height: 200px; left:20%; top: 70%; background: url('img2/screen_cases_block_item_16b.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_17 { width: 200px; height: 220px; left:10%; top: 60%; background: url('img2/screen_cases_block_item_17.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_18 { width: 400px; height: 220px; left:90%; top: 10%; background: url('img2/screen_cases_block_item_18.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_19 { width: 350px; height: 300px; left:50%; top: 60%; background: url('img2/screen_cases_block_item_19.jpg') center center no-repeat; background-size: contain; } #screen_cases_block_item_20 { width: 350px; height: 350px; left:70%; top: 30%; background: url('img2/screen_cases_block_item_20.jpg') center center no-repeat; background-size: contain; } /*** power ****/ #screen_power_block { width: 100vw; height: 100vh; background: #fff; position: fixed; top: 0; left: 100vw; z-index: 40; } #screen_power_block_header1 { width: 1000px; height: 300px; position: absolute; left: calc(50% - 700px); top: calc(50% - 200px); z-index: 14; text-align: center; color: #E74056; font-size: 300px; font-weight: 400; line-height: 300px; text-transform: uppercase; } #screen_power_block_header2 { width: 1000px; height: 300px; position: absolute; left: calc(50% - 200px); top: calc(50% + 20px); z-index: 14; text-align: center; color: #B5B0B1; font-size: 300px; font-weight: 400; line-height: 300px; text-transform: uppercase; } #screen_power_block_2header {width: 1400px; height: 300px; position: absolute; left: calc(50% - 700px); top: calc(50% - 200px); z-index: 14; text-align: center; color: #B5B0B1; font-size: 300px; font-weight: 400; line-height: 300px; text-transform: uppercase; } #screen_power_block_ico_1 { width: 100px; height: 150px; background: url('images/screen_power_block_event_ico.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 275px); left: calc(50% - 450px); z-index: 63; } #screen_power_block_ico_2 { width: 100px; height: 150px; background: url('images/screen_power_block_design_ico.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 275px); left: calc(50% - 325px); z-index: 63; } #screen_power_block_ico_3 { width: 100px; height: 150px; background: url('images/screen_power_block_video_ico.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 275px); left: calc(50% - 185px); z-index: 63; } #screen_power_block_ico_4 { width: 100px; height: 150px; background: url('images/screen_power_block_vr_ico.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 275px); left: calc(50% - 50px); z-index: 63; } #screen_power_block_ico_5 { width: 100px; height: 150px; background: url('images/screen_power_block_expo_ico.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 275px); left: calc(50% + 95px); z-index: 63; } #screen_power_block_ico_6 { width: 100px; height: 150px; background: url('images/screen_power_block_digital_ico.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 275px); left: calc(50% + 220px); z-index: 63; } #screen_power_block_ico_7 { width: 100px; height: 150px; background: url('images/screen_power_block_magic_ico.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 275px); left: calc(50% + 350px); z-index: 63; } #screen_power_block_event { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 44; } #screen_power_block_event_ico { width: 530px; height: 450px; background: url('images/screen_power_block_event_ico.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 275px); left: calc(50% - 270px); z-index: 63; } #screen_power_block_event_header { width: 500px; height: 160px; color: #211E1F; font-size: 160px; font-weight: 400; line-height: 160px; text-transform: uppercase; position: absolute; top: calc(50% - 175px); left: 4vw; z-index: 64; } #screen_power_block_event_txt { width: 600px; color: #B5B0B1; font-size: 60px; font-weight: 200; line-height: 60px; position: absolute; top: calc(50% + 145px); right: 4vw; z-index: 64; text-align: left; } #screen_power_block_design { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 44; } #screen_power_block_design_ico { width: 530px; height: 450px; background: url('images/screen_power_block_design_ico.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 275px); left: calc(50% - 270px); z-index: 63; } #screen_power_block_design_header { width: 500px; height: 160px; color: #211E1F; font-size: 160px; font-weight: 400; line-height: 160px; text-transform: uppercase; position: absolute; top: calc(50% - 175px); left: 4vw; z-index: 64; } #screen_power_block_design_txt { width: 600px; color: #B5B0B1; font-size: 60px; font-weight: 200; line-height: 60px; position: absolute; top: calc(50% + 145px); right: 4vw; z-index: 64; text-align: left; } #screen_power_block_video { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 44; } #screen_power_block_video_ico { width: 530px; height: 450px; background: url('images/screen_power_block_video_ico.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 275px); left: calc(50% - 270px); z-index: 63; } #screen_power_block_video_header { width: 500px; height: 160px; color: #211E1F; font-size: 160px; font-weight: 400; line-height: 160px; text-transform: uppercase; position: absolute; top: calc(50% - 175px); left: 4vw; z-index: 64; } #screen_power_block_video_txt { width: 600px; color: #B5B0B1; font-size: 60px; font-weight: 200; line-height: 60px; position: absolute; top: calc(50% + 145px); right: 4vw; z-index: 64; text-align: left; } #screen_power_block_vr { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 44; } #screen_power_block_vr_ico { width: 530px; height: 450px; background: url('images/screen_power_block_vr_ico.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 275px); left: calc(50% - 270px); z-index: 63; } #screen_power_block_vr_header { width: 500px; height: 160px; color: #211E1F; font-size: 160px; font-weight: 400; line-height: 160px; text-transform: uppercase; position: absolute; top: calc(50% - 175px); left: 4vw; z-index: 64; } #screen_power_block_vr_txt { width: 600px; color: #B5B0B1; font-size: 60px; font-weight: 200; line-height: 60px; position: absolute; top: calc(50% + 145px); right: 4vw; z-index: 64; text-align: left; } #screen_power_block_expo { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 44; } #screen_power_block_expo_ico { width: 530px; height: 450px; background: url('images/screen_power_block_expo_ico.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 275px); left: calc(50% - 270px); z-index: 63; } #screen_power_block_expo_header { width: 500px; height: 160px; color: #211E1F; font-size: 160px; font-weight: 400; line-height: 160px; text-transform: uppercase; position: absolute; top: calc(50% - 175px); left: 4vw; z-index: 64; } #screen_power_block_expo_txt { width: 600px; color: #B5B0B1; font-size: 60px; font-weight: 200; line-height: 60px; position: absolute; top: calc(50% + 145px); right: 4vw; z-index: 64; text-align: left; } #screen_power_block_digital { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 44; } #screen_power_block_digital_ico { width: 530px; height: 450px; background: url('images/screen_power_block_digital_ico.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 275px); left: calc(50% - 270px); z-index: 63; } #screen_power_block_digital_header { width: 500px; height: 160px; color: #211E1F; font-size: 160px; font-weight: 400; line-height: 160px; text-transform: uppercase; position: absolute; top: calc(50% - 175px); left: 4vw; z-index: 64; } #screen_power_block_digital_txt { width: 600px; color: #B5B0B1; font-size: 60px; font-weight: 200; line-height: 60px; position: absolute; top: calc(50% + 145px); right: 4vw; z-index: 64; text-align: left; } #screen_power_block_magic { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 44; } #screen_power_block_magic_ico { width: 530px; height: 450px; background: url('images/screen_power_block_magic_ico.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 275px); left: calc(50% - 270px); z-index: 63; } #screen_power_block_magic_header { width: 500px; height: 160px; color: #211E1F; font-size: 160px; font-weight: 400; line-height: 160px; text-transform: uppercase; position: absolute; top: calc(50% - 175px); left: 4vw; z-index: 64; } #screen_power_block_magic_txt { width: 600px; color: #B5B0B1; font-size: 60px; font-weight: 200; line-height: 60px; position: absolute; top: calc(50% + 145px); right: 4vw; z-index: 64; text-align: left; } #screen_power_block_thanks { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 45; } #screen_power_block_thanks_header { width: 1400px; height: 300px; position: absolute; left: calc(50% - 700px); top: calc(50% - 200px); z-index: 14; text-align: center; color: #E74056; font-size: 300px; font-weight: 400; line-height: 300px; text-transform: uppercase; } #screen_power_block_thanks_txt { color: #211F1F; font-size: 160px; font-weight: 400; line-height: 160px; position: absolute; top: calc(50% - 0px); left: calc(50% - 252px); z-index: 14; } /*** feedback ****/ #screen_feedback_block { display: none; width: 100vw; height: 100vh; background: #fff; position: fixed; top: 0; left: 100vw; z-index: 50; } /*** challenge ****/ #screen_challenge_block { width: 100vw; height: 100vh; background: url('images/screen_challenge_block_bg.png') center center no-repeat; background-size: cover; position: fixed; top: 0; left: 100vw; z-index: 60; } #screen_challenge_block_header { width: 1400px; height: 300px; color: #E74056; font-size: 300px; font-weight: 400; line-height: 300px; text-transform: uppercase; position: absolute; top: calc(50% - 200px); left: calc(50% - 700px); z-index: 62; text-align: center; } #screen_challenge_block_logo { display: none; width: 320px; height: 150px; background: url('images/screen_challenge_block_logo.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% - 75px); left: calc(50% - 160px); z-index: 63; } #screen_challenge_block_txt { width: 800px; height: auto; color: #fff; font-size: 36px; font-weight: 200; line-height: 48px; position: absolute; top: calc(50% - 22px); left: calc(50% - 400px); z-index: 64; text-align: center; } #screen_challenge_block_txt2 { display: none; width: 400px; height: 60px; color: #777; font-size: 18px; font-weight: 400; line-height: 28px; position: absolute; top: calc(50% + 95px); left: calc(50% + 360px); z-index: 65; text-align: left; } #screen_challenge_block_comments { display: none; width: 400px; height: 120px; color: #777; font-size: 18px; font-weight: 400; line-height: 28px; position: absolute; top: calc(50% + 95px); left: calc(50% + 360px); z-index: 65; text-align: left; } #screen_challenge_block_comments_header { display: none; color: #EAEAEA; font-size: 60px; font-weight: 200; line-height: 60px; } #screen_challenge_block_win { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 68; } #screen_challenge_block_win_header { width: 1400px; height: 300px; color: #E74056; font-size: 300px; font-weight: 400; line-height: 300px; text-transform: uppercase; position: absolute; top: calc(50% - 200px); left: calc(50% - 700px); z-index: 62; text-align: centert; } #screen_challenge_block_win_sale { width: 600px; height: 80px; position: absolute; top: calc(50% + 40px); left: calc(50% - 300px); z-index: 69; background: url('images/screen_challenge_block_win_sale.png') center center no-repeat; background-size: contain; } #screen_challenge_block_m { width: 45px; height: 85px; background: url('images/screen_challenge_block_m.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% + 75px); left: calc(50% - 390px); z-index: 68; } #screen_challenge_block_o { width: 45px; height: 105px; background: url('images/screen_challenge_block_o.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% + 75px); left: calc(50% - 300px); z-index: 68; } #screen_challenge_block_t { width: 45px; height: 115px; background: url('images/screen_challenge_block_t.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% + 75px); left: calc(50% - 200px); z-index: 68; } #screen_challenge_block_i { width: 45px; height: 115px; background: url('images/screen_challenge_block_i.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% + 75px); left: calc(50% - 100px); z-index: 68; } #screen_challenge_block_v { width: 45px; height: 125px; background: url('images/screen_challenge_block_v.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% + 75px); left: calc(50% - 0px); z-index: 68; } #screen_challenge_block_e { width: 45px; height: 150px; background: url('images/screen_challenge_block_e.png') center center no-repeat; background-size: contain; position: absolute; top: calc(50% + 75px); left: calc(50% + 100px); z-index: 68; } #screen_challenge_block_promocode { width: 332px; height: 60px; border: 1px dashed #FFF; position: absolute; top: calc(50% + 160px); left: calc(50% - 166px); z-index: 69; } #screen_challenge_block_promocode_txt { width: 332px; height: 60px; text-align: center; color: #DED9DA; font-size: 30px; font-weight: 400; line-height: 66px; } #screen_challenge_block_promocode_copy { width: 24px; height: 24px; position: absolute; top: 18px; right: 18px; z-index: 69; background: url('images/screen_challenge_block_promocode_copy.png') center center no-repeat; background-size: contain; cursor: pointer; } /*** next20 ****/ #screen_next20_block { width: 100vw; height: 100vh; background: url('images/screen_next20_block.jpg') center center no-repeat; background-size: cover; position: fixed; top: 0; left: 100vw; z-index: 70; } #screen_next20_block_header1 { width: 1200px; height: 300px; color: #E74056; font-size: 300px; font-weight: 400; line-height: 300px; text-transform: uppercase; position: absolute; top: calc(50% - 200px); left: calc(50% - 700px); z-index: 74; text-align: left; } #screen_next20_block_header2 { width: 1200px; height: 300px; color: #FFF; font-size: 300px; font-weight: 400; line-height: 300px; text-transform: uppercase; position: absolute; top: calc(50% + 50px); left: calc(50% - 260px); z-index: 74; text-align: left; } #screen_next20_block_txt1 { width: 400px; height: 60px; color: #EAEAEA; font-size: 60px; font-weight: 200; line-height: 60px; position: absolute; top: calc(50% - 34px); left: calc(50% + 360px); z-index: 74; text-align: left; } #screen_next20_block_txt2 { width: 400px; height: 60px; color: #EAEAEA; font-size: 60px; font-weight: 200; line-height: 60px; position: absolute; top: calc(50% + 55px); left: calc(50% - 660px); z-index: 74; text-align: left; } /*** OLD ****/ /* */ .ismob { display: none; } .mob_only { display: none; } .nomob { display: block; }