.ryglGjBox { height: calc(100% - 30px); margin: 15px; } .ryglGjBox .title { height: 30px; background: url(./img/bg16.png) no-repeat left center; } .ryglGjBox .title .titleText { float: left; line-height: 30px; padding-left: 10px; color: #92BACD; font-size: 14px; } .ryglGjBox .ryglGjLeft .gjName { padding-left: 10px; color: #26FFFF; font-size: 24px; line-height: 50px; } .ryglGjBox .ryglGjLeft .gjInfo { padding-left: 10px; color: #FFFFFF; font-size: 14px; font-weight: lighter; line-height: 25px; } .ryglGjBox .ryglGjRight { position: relative; border-radius: 3px; background: rgba(0,48,64,0.4); } .ryglGjBox .ryglGjRight .rygjjd { color: #FFFFFF; height: calc(100% - 30px); font-size: 17px; padding: 5px 20px 5px 5px; } .gjhfBtn { cursor: pointer; position: absolute; top: 0px; right: 10px; margin-left: -42px; width: 85px; height: 30px; line-height: 30px; color: #FFFFFF; font-size: 14px; text-align: center; background: url(./img/bg20.png) no-repeat center; } .toolsbar-mappic { overflow-x: auto; overflow-y: auto; padding: 0px 10px 10px 0px; } .toolsbar-mappic ul { margin: 0; padding: 0; } .toolsbar-mappic ul li { display: inline-block; width: 100px; list-style-type: none; margin-top: 10px; margin-left: 10px; float: left; text-align: center; cursor: pointer; font-size: 12px; } .toolsbar-mappic ul li img { border: solid 2px #fff; width: 100px; height: 90px; } .toolsbar-mappic ul li.hover { color: #337fe5; } .toolsbar-mappic ul li:hover { color: #337fe5; } .toolsbar-mappic ul li.hover img { border: solid 2px #337fe5; } .toolsbar-mappic ul li:hover img { border: solid 2px #337fe5; } .toolsbar-mappic ul li a { text-decoration: none; color: #ffffff; } @media only screen and (max-width: 600px) { .col-100 { width: 100%; float: left; box-sizing: border-box; } .ryglDdryBox .ryglDdryLeft { height: 50%; border-bottom: 1px solid rgba(64,108,130,0.4); } .ryglDdryBox .ryglDdryRight { height: 50%; } .ryglDdryBox .ryglDdryLsdd .lsddLine { padding-top: 25px; } .ryglGjBox .ryglGjLeft { height: 30%; } .ryglGjBox .ryglGjRight { height: 70%; padding-bottom: 40px; } .ryglGjBox .ryglGjRight .ryglGjRight1 { height: 30%; } .ryglGjBox .ryglGjRight .ryglGjRight2 { height: 70%; } } @media only screen and (min-width: 601px) { .col-2-3 { width: 66%; float: left; box-sizing: border-box; } .col-1-3 { width: 34%; float: left; box-sizing: border-box; } .col-1-4 { width: 35%; float: left; box-sizing: border-box; } .col-3-4 { width: 65%; float: left; box-sizing: border-box; } .col-50 { float: left; width: 50%; box-sizing: border-box; } .ryglDdryBox .ryglDdryLeft { height: 100%; border-right: 1px solid rgba(64,108,130,0.4); } .ryglDdryBox .ryglDdryRight { height: 100%; } .ryglDdryBox .ryglDdryLsdd .lsddLine { padding-left: 160px; } .ryglGjBox .ryglGjLeft { height: 100%; } .ryglGjBox .ryglGjRight { height: 100%; padding-bottom: 10px; } .ryglGjBox .ryglGjRight .ryglGjRight1 { height: calc(100% - 30px); } .ryglGjBox .ryglGjRight .ryglGjRight2 { height: calc(100% - 30px); } }