*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.device *,.device *::before,.device *::after{box-sizing:border-box;display:block}
.device .frame{z-index:1}
.device{position:relative;height:694px;width:342px;margin:0 auto}
.iphone-x .frame{background:#fff;border-radius:32px;box-shadow:inset 0 0 0 0px #606467,inset 0 0 0 2px #e2e3e4;height:694px;padding:42px 13px;width:342px}
.iphone-x .header{left:50%;margin-left:-82px;position:absolute;top:22px;width:164px;z-index:199}
.iphone-x .header::after,.iphone-x .header::before{content:"";height:6px;position:absolute;top:0;width:6px}
.iphone-x .sensors::after,.iphone-x .sensors::before{content:"";position:absolute}
.iphone-x .sensors::after{background:#e2e3e4;border-radius:2.5px;height:5px;left:50%;margin-left:-20px;top:4px;width:40px}
.iphone-x .sensors::before{background:#e2e3e4;border-radius:50%;height:8px;left:50%;margin-left:30px;top:2px;width:8px}
.bg{padding:40px;position:relative;overflow:hidden}
.waves{position:absolute;top:0;bottom:0px;right:0;left:0;height:780px;background-color:#000}
.case_box{width:1200px;height:700px;margin:0 auto;display:flex;justify-content:center;align-items:center}
.content>iframe{height:592px;width:316px;border:none}
.iphone_box,.code-box{margin:0px 60px;display:inline-block;text-align:center;z-index:1}
.ok{position:absolute;bottom:8px;display:inline-block;width:48px;height:48px;left:50%;margin-left:-24px;border-radius:50%;border:2px solid #ccc;background:#f2f2f2}
.hdk-tips{color:#fff;line-height:36px}
.code-box>a{width:240px;height:48px;background-color:#275dee;font-size:18px;color:#fff;line-height:48px;border-radius:5px;cursor:pointer;display:inline-block;margin-top:20px}
.code-box>a:hover{transform:scale(1.05)}
.code-box h1{font-size:24px;color:#fff;width:320px;text-align:left;}
#case-question{background:#F5F5F5;padding:30px;min-width:1200px}
#case-question-wrapper{width:1200px;margin:auto;padding:0 30px 30px;box-sizing:border-box;background:#fff;border-radius:5px;overflow:hidden}
#question-header{display:flex;font-size:18px;justify-content:space-between;height:68px;line-height:68px;background:#FAFAFA;font-weight:bold;margin:0 -30px;padding:0 20px}
#question-header p:before{content:"";background:#2A91FD;position:relative;top:26px;width:4px;height:16px;border-radius:3px;display:inline-block;vertical-align:top;margin-right:10px}
#question-header a{font-size:16px;font-weight:normal;}
#question-list{display:flex;flex-wrap:wrap;justify-content:space-between}
#question-list li{height:60px;width:550px;box-sizing:border-box;border-bottom:1px solid #F1F1F1;display:flex;align-items:center}
#question-list li i{width:5px;height:5px;background:#666;border-radius:5px;box-sizing:border-box;margin-right:10px}
#question-list li a{font-weight:500;color:#333333}
#question-list li a:hover{color:#649efd}
#case-wrapper-img{width:100%;height:100%;filter:blur(20px);position:absolute;top:0;left:0;z-index:-1}
#case-wrapper-img img{width:100%;height:100%}