.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: absolute; top: 50%; left: 50%; width: 960px; height: 580px; margin: -290px auto auto -480px; display: none; overflow-y: hidden; transition: opacity 0.2s; opacity: 1; } #popup.wait{ pointer-events:none; opacity:0.1; } #closepop { background: url(../../images/close1.png) no-repeat; width: 40px; height: 40px; cursor: pointer; position: absolute; right: 0px; top: -3px; text-indent: -999em; } .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) { #popup { width: 700px; height: 422px; margin: -211px auto auto -350px; } .specialTitle { bottom: 66%; font-size: 26px; } } /* @media screen and (max-width: 1024px) { */ /* #popup { */ /* width: 700px; */ /* height: 438px; */ /* margin: -219px auto auto -350px; */ /* } */ /* } */ @media screen and (max-width: 768px) { #popup { width:600px; height:720px; margin: -360px auto auto -300px; } .specialTitle { bottom: 62%; font-size: 26px; line-height:40px; } #special-gui-name{display:none;} } @media screen and (min-width:669px) and (max-width: 736px){ #popup { width:500px; height:260px; margin: -130px auto auto -250px; } #closepop{ width: 32px; height: 32px; background-size: contain; right: 0px; } #model-title{ height: 42px; } #title-toggle{ padding-top: 18px; height: 42px; } .title-container{ padding: 16px 10px 6px; height:42px; width: 259px; } #gui-name{ font-size: 16px; line-height:16px; } .pinTop{top:8px;} #model-title { width: 70%; } } @media screen and (min-width:569px) and (max-width:667px){ #popup { width:420px; height:230px; margin: -115px auto auto -210px; } #closepop{ width: 30px; height: 30px; background-size: contain; right: 0px; } #model-title{ height: 40px; } #title-toggle{ padding-top: 17px; height: 40px; } .title-container{ padding: 16px 10px 6px; height:40px; width: 240px; } #gui-name{ font-size: 15px; line-height:15px; } #musicImg .fa-2x { font-size: 1.5em; } .pinTop{top:8px;} #model-title { width: 70%; } } @media screen and (min-width:447px) and (max-width:568px){ #popup { width:340px; height:170px; margin: -85px auto auto -170px; } #closepop{ width: 30px; height: 30px; background-size: contain; right: 0px; } #model-title{ height: 38px; } #title-toggle{ padding-top: 17px; height: 38px; } .title-container{ padding: 16px 10px 6px; height:38px; width: 220px; } #gui-name{ font-size: 14px; line-height:14px; } #musicImg .fa-2x { font-size: 1.5em; } .pinTop{top:8px;} #model-title { width: 70%; } } @media screen and (max-width:414px) { #popup { width: 280px; height: 520px; margin: -260px auto auto -140px; } #closepop{ width: 30px; height: 30px; background-size: contain; right: 0px; } #model-title{ height: 40px; } #title-toggle{ padding-top: 17px; height: 40px; } .title-container{ padding: 16px 10px 6px; height:40px; width: 220px; } #gui-name{ font-size: 16px; line-height:16px; } #model-title { width: 70%; } } @media screen and (max-width:375px) { #popup { width: 252px; height: 490px; margin: -245px auto auto -126px; } #model-title{ height: 38px; } #title-toggle{ padding-top: 17px; height: 38px; } .title-container{ padding: 16px 10px 6px; height:38px; width: 220px; } #gui-name{ font-size: 15px; line-height:15px; } .pinTop{top:5px;} #model-title { width: 70%; } } @media screen and (max-width:320px) { #popup { width: 200px; height: 380px; margin: -200px auto auto -100px; } #model-title{ height: 36px; } #title-toggle{ padding-top: 16px; height: 36px; } .title-container{ padding: 16px 10px 6px; height:36px; width: 200px; } #gui-name{ font-size: 14px; line-height:14px; } .pinTop{top:0px;} #model-title { width: 70%; } }