.wrap { width: 100%; height: 100%; margin: 0 auto; position: relative; margin: 0 auto; } 
.wrap img { display: block; } 
img { outline: 0 none; width: 100%; } 
body { width: 100%; height: 100vh; overflow: auto; margin: 0 auto; background: #000; font-family: Microsoft Yahei, Arial; } 



* { box-sizing: border-box; margin: 0; padding: 0; } 
body { font-family: sans-serif; margin:0 auto; padding: 0; line-height: 1.7; color: #222; background: #fff; overflow-x: hidden; }   

h1 { font-size: 22px; margin-bottom: 4px; } 
.sub { color: #666; font-size: 13px; margin-bottom: 32px; } 
.progress-wrap { margin-bottom: 0; } 
.progress-bar-bg { height: .16rem; background: #d4dbde; border-radius: .1rem; margin-top: .18rem; } 
.progress-bar-fill { height: 100%; background: #4198b4; border-radius: .1rem; transition: width .2s; } 
.progress-text { font-size: .3rem; color: #535d61; } 
.question { font-size: .32rem; color: #535d61; display: flex; width: 100%; height: 4.13rem; display: flex; justify-content: center; align-items: center; font-weight: bold; margin-bottom: 0; line-height: 1.5; } 
.option { display: block; width: 6.44rem; min-height: .65rem; text-align: left; background: none; border: 1px solid #ddd; border-radius: .5rem; margin-bottom: .71rem; font-size: .28rem; color: #535d61; cursor: pointer; background: #f2f4f5; text-indent: .73rem; } 
#options { width: 6.44rem; margin: 0 auto; } 

/* result */
#result { display: none; } 
.resultmain { background:url(../images/r_bg.jpg) no-repeat; background-size: 100%; width: 7.5rem; height: 16.24rem; position: relative; } 
.result-section { position: absolute; top: 0; left: 0; z-index: 2; } 
.section-label { font-size: .2rem; color: #535d61; letter-spacing: .06em; font-weight: bold; margin-bottom: 0; } 
.type-name { font-size: 28px; font-weight: bold; margin-bottom: 2px; } 
.type-img-wrap { background: none; position: absolute; top: 0; left: 0; width: 7.5rem; height: 16.24rem; z-index: 1; } 
.type-img-wrap img { width: 100%; height: 100%; object-fit: cover; } 
.type-code { font-size: 13px; color: #888; margin-bottom: 10px; } 
.type-tagline { font-size: 14px; color: #444; margin-bottom: 10px; line-height: 1.6; border-left: 3px solid #ddd; padding-left: 10px; } 
.type-desc { font-size: 13px; color: #555; line-height: 1.7; } 

.role-name { font-size: 26px; font-weight: bold; margin-bottom: 6px; } 
.role-img-wrap { background: none; position: absolute; top: 0; left: 0; width: 7.5rem; height: 16.24rem; z-index: 1; } 
.role-img-wrap img { width: 100%; height: 100%; object-fit: cover; } 
.role-desc { font-size: 13px; color: #555; line-height: 1.7; } 

/* dim bars */
.dim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; margin-top: 0; } 
.dim-item { font-size: .18rem; color: #919191; } 
.dim-name { margin-bottom: 0; } 
.dim-bar-bg { height: .1rem; background: #a5b5b9; border-radius: .1rem; } 
.dim-bar-fill { height: 100%; background: #4198b4; border-radius: .1rem; animation: barGrow 2s ease-out 0.1s both; } 
@keyframes barGrow { 
 from { width: 0; } 
 to { width: var(--bar-width, 50%); } 
}


.score-section { margin-top: 16px; } 
.score-title { font-size: 11px; color: #aaa; font-weight: bold; letter-spacing: .06em; margin-bottom: 8px; } 
.score-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12px; color: #666; } 
.score-label { width: 60px; flex-shrink: 0; } 
.score-bar-bg { flex: 1; height: 4px; background: #eee; border-radius: .1rem; } 
.score-bar-fill { height: 100%; background: #888; border-radius: .1rem; } 
.score-num { width: .18rem; text-align: right; color: #4198b4; font-size: 11px; } 



.logo { background: url(../images/logo.png) no-repeat; background-size: 100%; width: 1.16rem; height: .39rem; position: absolute; top: .54rem; left: .76rem; z-index: 2; } 
.tit { background: url(../images/q3_tit.png) no-repeat; background-size: 100%; width: 5.99rem; height: .5rem; position: absolute; top: 1.94rem; left:.76rem; z-index: 2; } 

.quizmain { padding-top: 2.8rem; width:100%; position: relative; } 
.quiz_tit { font-size: .2rem; color: #919191; } 
.diplayflextxt { line-height: 1; display: flex; justify-content: space-between; align-items: center; } 
.quiz { width: 5.98rem; margin: 0 auto; position: relative; } 

.attribute { width: 5.85rem; position: absolute; top: 12.31rem; left: .86rem; } 
span.dim-c { color: #4198b4; font-weight: bold; } 

.main { background: url(../images/mbg.jpg) no-repeat; background-size: 100%; width: 7.5rem; height: 16.24rem; position: absolute; z-index: 10; top:0; left: 0; } 
.start-btn { display: block; text-indent: -9999rem; width: 4.17rem; height: 1.1rem; background: url(../images/start_btn.png) no-repeat; background-size: 100%; position: absolute; top: 12.06rem; left: 1.73rem } 

.fade-out { 
 opacity: 0; 
 visibility: hidden; 
 transition: opacity 0.5s ease, visibility 0s 0.5s; 
}
.start-txt { background: url(../images/mt1.png) no-repeat; background-size: 100%; width: 3.24rem; height: .23rem; position: absolute; top: 11.49rem; left:50%; transform: translate(-50%,0); z-index: 2; text-indent: -9999rem; } 

.maincont { width: 7.5rem; height: 16.24rem; position: absolute; top: 0; left: 0; } 
.maincont2 { width: 7.5rem; height: 16.24rem; position: absolute; top: 0; left: 0; } 
.maincont3 { width: 7.5rem; height: 16.24rem; position: absolute; top: 0; left: 0; } 


.restart{ background: url(../images/restart.png) no-repeat; background-size: 100%; width: 2.13rem; height: .57rem; text-indent:-9999rem; border: none; }



.shareButton{background: url(../images/btn_share.png) no-repeat; background-size: 100%; width: 2.13rem; height: .57rem; text-indent: -9999rem; }
.shareButtonwx{background: url(../images/btn_share.png) no-repeat; background-size: 100%; width: 2.13rem; height: .57rem; text-indent: -9999rem; }

.pg3_btns{  position: absolute; top: 15.41rem; left: 50%; transform: translate(-50%,0); z-index: 2; width:100%; display: flex; justify-content: center;  text-indent: -9999rem;}
.pg3_btns>div{  margin:0 .2rem;}


body.noscroll { overflow: hidden; height: 100vh; } 


.pop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); display: none; z-index: 10; } 
.share_con { width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; padding-top: .5rem; align-content: flex-start; box-sizing: border-box; } 
.share_con p { width: 100%; font-size: .34rem; color: #fff; text-align: center; padding-top: .1rem; } 
 .share_conimg { width: 1.45rem; padding-right: .5rem; } 

/* 👇 只对 小屏幕手机 生效 */
/* @media screen and (max-height: 667px) { 
 .main { top: 58%; } 
.maincont2 { top: -5%; } 
.maincont3 { top: -8%; } 
.logo { top: .24rem; } 


} */