*{ margin: 0; padding: 0; } html,body { width: 100%; height: 100%; } #app { width: 100%; height: 100%; background: url(../img/pc-bg.png) no-repeat top center; background-size: cover; box-sizing: border-box; padding-top: 1px; } #app > h1 { margin-top: 200px; font-size: 80px; font-family: Source Han Sans CN; font-weight: 500; color: #FFFFFF; text-align: center; letter-spacing: 5px; text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); } .sel-div { width: 507px; height: 357px; margin: 80px auto; position: relative; } .sel-div > .sel-input{ width: 484px; height: 59px; margin: 4px 17px 0px 6px; box-sizing: border-box; padding-left: 41px; display: flex; align-items: center; background: url(../img/pc-sel.png) no-repeat center; background-size: 100% 100%; cursor: pointer; position: relative; z-index: 2; } .sel-div > .sel-input > p { line-height: 59px; font-size: 26px; font-family: Source Han Sans CN; font-weight: 400; color: #FFFFFF; letter-spacing: 5px; flex: 1; } .sel-div > .sel-input > img { margin-right: 39px; } .sel-div > .sel-body { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/pc-sel-body.png) no-repeat center; background-size: 100% 100%; } .set-place { height: 63px; } .option-body { height: calc(100% - 80px); width: calc(100% - 18px); overflow-y: auto; } .option-body >div { font-size: 20px; font-family: Source Han Sans CN; font-weight: 400; color: #FFFFFF; padding: 10px 20px 10px 40px; letter-spacing: 4px; cursor: pointer; } .option-body >div:hover { font-size: 27px; font-family: Source Han Sans CN; font-weight: 500; } .option-body >.active-option { font-size: 27px; font-family: Source Han Sans CN; font-weight: 500; } @media screen and (max-width: 500px) { #app { background: url(../img/mobile-bg.png) no-repeat top center; background-size: cover; } #app > h1 { margin-top: 130px; font-size: 35px; font-family: Source Han Sans CN; font-weight: 500; color: #FFFFFF; letter-spacing: 4px; text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); } .sel-div { width: 255.5px; height: 178.5px; margin: 33px auto; position: relative; } .sel-div > .sel-input{ width: 242px; height: 30px; margin: 1px 6px 0px 5.5px; box-sizing: border-box; padding-left: 20.5px; display: flex; align-items: center; background: url(../img/mobile-sel.png) no-repeat center; background-size: 100% 100%; cursor: pointer; position: relative; z-index: 2; } .sel-div > .sel-input > p { line-height: 30px; font-size: 14px; font-family: Source Han Sans CN; font-weight: 400; color: #FFFFFF; letter-spacing: 2px; flex: 1; } .sel-div > .sel-input > img { margin-right: 19.5px !important; width: 10.5px; height: 6px; } .sel-div > .sel-body { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/mobile-sel-body.png) no-repeat center; background-size: 100% 100%; } .set-place { height: 31.5px; } .option-body { height: calc(100% - 40px); width: calc(100% - 9px); overflow-y: auto; } .option-body >div { font-size: 13px; font-family: Source Han Sans CN; font-weight: 400; color: #FFFFFF; padding: 5px 10px 5px 20px; letter-spacing: 2px; cursor: pointer; } .option-body >div:hover { font-size: 15px; font-family: Source Han Sans CN; font-weight: 500; } .option-body >.active-option { font-size: 15px; font-family: Source Han Sans CN; font-weight: 500; } }