body{ margin: 0px; padding: 0px; background-color: #efefef; width: 100%; height: 100%; } a{ text-decoration: none; } ul{ margin: 0; padding: 0; } .main{ position: relative; height: 100%; } .top-bar{ width: 100%; height: 55px; position: relative; background-color: #c13139; z-index: 100; box-shadow: 5px 0px 10px rgba(0,0,0,0.47); } .top-center-bar{ position: relative; height: 100%; width: 1100px; background-color: #c6333e; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.42); margin: 0px auto; } .back-home{ background-color: white; height:60px; border-radius: 0px 0px 5px 5px; width: 60px; position: absolute; left: 200px; color: #c6333e; font-size: 20px; text-align: center; font-weight: normal; line-height: 60px; top: 0px; box-shadow: 5px 0px 8px rgba(0, 0, 0, 0.3); cursor: pointer; transition: all 0.3s; } .back-home:hover{ line-height: 70px; height:70px; } .opt-options{ visibility: hidden; width: 100px; height: 65px; background-color: white; position: absolute; top: 55px; right: -20px; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 0px 0px 5px 5px; box-shadow: 5px 2px 8px rgba(0, 0, 0, 0.29); } .top-center-bar .logo{ position: absolute; margin: auto 20px; top: 15px; color: white; font-weight: bolder; font-size: 20px; } .back-home a{ color: #c6333e; } .opt:hover .opt-options{ visibility: visible; padding: 20px 0px 0px 0px; } .personal-opt{ height: 100%; width: 120px; position: absolute; right: 0px; } .personal-opt .head-img{ float: left; margin: 2px; width: 45px; height: 45px; border-radius: 50%; border: 3px solid white; } .opt .img{ display: block; width: 35px; height: 35px; margin: 10px 10px 10px 10px; } .opt-options div{ width: 100%; height: 30px; text-align: center; line-height: 20px; } .opt-options div a{ color: rgba(0, 0, 0, 0.88); } .opt-options div:hover{ background-color: rgba(0, 0, 0, 0.21); } .personal-opt .opt{ width: 35px; height: 100%; width: 55px; cursor: pointer; float: left; border-radius: 5px; } .personal-opt .opt:hover{ background-color: rgba(255, 255, 255, 0.18); } .nav-bar{ top: 20px; border-radius: 10px; position: absolute; left: 5px; width: 100px; height: 800px; background-color: #251d20; } .nav-bar .a-process{ border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; width:80px; height: 80px; margin: 10px 8px; float: top; background-color: rgba(255, 255, 255, 0.09); transition: all 0.5s; } .nav-bar .a-process:hover{ background-color: rgba(255, 255, 255, 0.3); } .point-bar{ width: 10px; position: absolute; left: 100px; height: 60px; top: 21px; border-radius: 0px 5px 5px 0px; background-color: #cf4240; transition: all 0.4s; visibility: hidden; } .main2{ z-index: 2; position: relative; width: 1100px; height: 1100px; margin: 0px auto; background-color: white; } .link-point{ display: block; width: 100%; height: 100%; } .a-process .link-point .a-process-decoration { width: 60px; height: 60px; margin: 0px 10px; } .link-point div img{ display: block; width: 100%; height: 100%; } .nav-info{ color: white; text-align: center; font-size: 12px; } .update-frame{ width: 990px; height: 1100px; position: relative; left: 110px; } .scroll-ads{ height: 300px; width: 900px; background-color: black; position: absolute; margin: 20px 45px; border-radius: 10px; overflow: hidden; } .scroll-ads .scroll-ads-imgs .scroll-child{ display: inline-block; width: 100%; height: 100%; transition: all 0.4s; } .scroll-ads .scroll-ads-imgs{ width: 100%; height: 100%; transition: all 0.4s; white-space: nowrap; font-size: 0; } .scroll-ads .scroll-ads-imgs .scroll-child a img{ width: 100%; height: 100%; position: relative; } .ads-text{ position: relative; width: 100px; height: 20px; left: 50px; bottom: 50px; z-index: 10; font-size: 20px; color: white; }