body{ margin: 0px; padding: 0px; background-color:#f5f5f5; width: 100%; height: 100%; } .main2{ background-color: rgb(249, 248, 255); } a{ text-decoration: none; } ul{ margin: 0; padding: 0; } .main{ position: relative; } .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; } .back-home a{ display: block; width: 100%; height: 100%; } .opt-options{ visibility: hidden; width: 100px; height: 65px; background-color: white; position: absolute; top: 55px; right: -8px; 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; } .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; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35); } .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{ border-right:1px solid rgb(198, 34, 53); 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; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.32); } .main2{ z-index: 2; position: relative; width: 1100px; margin: 0px auto; } .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-overflow: ellipsis; text-align: center; width: 100%; font-size: 12px; height: 16px; } .update-frame{ border-top: 1px solid rgba(255,105,0,0); width: 990px; position: relative; left: 110px; height: 900px; } .scroll-ads{ height: 250px; width: 900px; background-color: #ffffff; position: absolute; margin: 20px 45px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.33); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.22); } .scroll-ads .scroll-ads-imgs .scroll-child{ display: inline-block; width: 100%; height: 90%; 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; } .notice-frame{ background-color: white; margin:300px auto 0px 45px; position: relative; width: 800px; height: 400px; border:1px solid rgba(0, 0, 0, 0.32); border-radius: 5px; overflow: hidden; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.29); } .notice-frame .notice-frame-info{ color: white; background-color: #c62e35; width:200px; height: 50px; border-radius: 0 0 8px 0; text-align:center; line-height: 40px; font-size: 25px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.29); } .notice-frame .notice-cont{ overflow-y: scroll; border:1px solid rgba(255, 255, 255, 0); height: 340px; width: 750px; margin: 5px 30px; } .bar-change::-webkit-scrollbar{ width: 10px; background-color: #dcdcdc; border-radius: 10px; } .bar-change::-webkit-scrollbar-thumb{ width: 10px; transition: all 0.3s; background-color: rgba(210, 81, 80, 0.96); border-radius: 10px; } .notice-child{ margin: 5px 0; width: 98%; float: left; border: 1px solid #d4d4d4; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); } .notice-child .notice-title{ line-height: 40px; color: rgba(0, 0, 0, 0.91); width: 100%; height: 50px; text-align: center; } .notice-child .notice-text{ color: rgba(0, 0, 0, 0.91); width: 100%; min-height: 100px; text-align: left; display: none; transition-delay:0.3s; background-color: #f3f3f3; border-top: 1px solid rgba(0, 0, 0, 0.26); } .notice-child .notice-title:hover + .notice-text{ display: block; } .notice-child .notice-text:hover{ display: block; } .notice-child .notice-title .expend{ position: relative; background-color: #251d20; width: 30px; height: 60px; float: left; border-radius: 0 0 5px 5px; margin-left: 20px; } .notice-title .title-text{ width: 400px; float: left; margin: 0px 120px; } .notice-choose{ width: 80px; height: 200px; position: absolute; top: 370px; right: 62px; border: 1px solid rgba(255, 255, 255, 0); } .notice-choose .notice-class{ margin: 8px 0; width: 100%; height: 50px; color: white; font-size: 18px; line-height: 45px; text-align: center; background-color: #c62235; border-radius: 0 10px 10px 0; transition: all 0.3s; } .notice-choose .notice-class:hover{ width: 110%; }