.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 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); /* margin: 80px auto; */ display: none; z-index: 999999; } .popup-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; width: 100%; height: 100%; } .popup-content { position: relative; width: 60%; height: 65%; overflow: hidden; } #id1 { width: 100%; height: 100%; } #popup.wait { opacity: 0.1; } #closepop { position: fixed; top: 13%; right: 18%; background: url(../../images/close1.png) no-repeat; width: 48px; height: 48px; cursor: pointer; 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: 0.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: 45px; height: 45px; } .specialTitle { bottom: 66%; font-size: 26px; } } @media screen and (max-width: 1000px) { .popup-content { width: 90%; height: 80%; } } @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 { position: initial; width: 45px; height: 45px; } #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; } }