.sidecontent { position: fixed; left: -750px; width: auto; display: none; background: rgba(0, 0, 0, 0.8); top: 70px; height: 100%; color: rgba(255, 255, 255, 1); } .sidecontent h1 { font-size: 14px; width: 90%; margin: 0px auto; text-align: center; height: 50px; line-height: 50px; position: relative; } .sidecontent h1 span { font-size: 12px; font-weight: normal; position: absolute; right: -10px; cursor: pointer; border: #ebebeb solid 1px; width: 40px; height: 40px; line-height: 40px; border-radius: 20px; text-align: center; } #text { float: left; width: auto; font-size: 18px; letter-spacing: 2px; margin: 30px; max-width: 600px; height: 500px; max-height: 630px; line-height: 22px; font-family: "宋体"; } #sideimg { margin: 5px 20px 30px 10px; float: left; } #gui-modes-map div img { width: 48px; height: 48px; } iframe { border: none; } #popup { z-index: 20; text-align: center; padding: 0; position: relative; width: 100%; height: 100%; /* margin: 80px auto; */ display: none; z-index: 9999; background: rgba(0, 0, 0, 0.6); } .popup-content { position: relative; width: 100%; height: 100%; overflow-x: hidden; } #id1 { width: 100%; height: 100%; } #popup.wait { opacity: 0.1; } #closepop { background: url('../../images/close.png') no-repeat; width: 40px; height: 40px; cursor: pointer; position: absolute; right: 30px; top: 30px; text-indent: -999em; background-size: 100% 100%; } .specialTitle { bottom: 65%; width: 100%; padding: 0 25px; display: block; font-family: OpenSans, 'Helvetica Neue', sans-serif; text-align: center; font-size: 40px; font-weight: 100; letter-spacing: .75px; //text-shadow: 0 0 10px rgba(15,16,17,1); color: rgba(255, 255, 255, 1); margin: 0; position: absolute; hyphens: auto; word-wrap: break-word; line-height: 45px; } .dropdown { position: relative; display: inline-block; float: right; height: 40px; line-height: 40px; right: 10px; } .floor { width: 100px; text-align: center; display: block; height: 30px; background: rgba(0, 0, 0, 0.4); line-height: 30px; margin-top: 10px; cursor: pointer; } .dropdown-content { display: none; position: absolute; background: rgba(0, 0, 0, 0.6); min-width: 100px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); text-align: center; } .dropdown:hover .dropdown-content { display: block; } a { text-decoration: none; } #YY, #SZZ { display: none; } @media only screen and (max-width:487px) { .dropdown { height: 30px; line-height: 30px; right: 5px; } .floor { width: 80px; height: 20px; line-height: 20px; margin-top: 5px; } .dropdown-content { min-width: 80px; } } @media screen and (max-width: 1600px) { /*#popup { width: 816px; height: 510px; margin: -255px auto auto -408px; }*/ .specialTitle { bottom: 65%; font-size: 34px; } } @media screen and (max-width: 1400px) { /*#popup { width: 714px; height: 446px; margin: -223px auto auto -357px; }*/ .specialTitle { bottom: 65%; font-size: 30px; } } @media screen and (max-width: 1200px) { #closepop { width: 40px; height: 40px; top: 20px; right: 20px; } .specialTitle { bottom: 66%; font-size: 26px; } } @media screen and (max-width: 768px) { .specialTitle { bottom: 62%; font-size: 26px; line-height: 40px; } #special-gui-name { display: none; } } @media screen and (max-width: 736px) { #title-toggle { padding-top: 18px; height: 42px; } .pinTop { top: 8px; } } @media screen and (max-width:667px) { #closepop { width: 36px; height: 36px; top: 0px; right: 0px; } #title-toggle { padding-top: 17px; height: 40px; } #musicImg .fa-2x { font-size: 1.5em; } .pinTop { top: 8px; } } @media screen and (max-width:568px) { #title-toggle { padding-top: 17px; height: 38px; } #musicImg .fa-2x { font-size: 1.5em; } .pinTop { top: 8px; } } @media screen and (max-width:414px) { #title-toggle { padding-top: 17px; height: 40px; } } @media screen and (max-width:375px) { #title-toggle { padding-top: 17px; height: 38px; } .pinTop { top: 5px; } } @media screen and (max-width:320px) { /*#popup { width: 200px; height: 380px; margin: -200px auto auto -100px; }*/ #title-toggle { padding-top: 16px; height: 36px; } .pinTop { top: 0px; } }