@charset "utf-8";

.intro-buttons{display: flex;gap: 25px;height: 100%;justify-content: center;align-items: center;}
.intro-buttons .box{background: #d6dce5;border-radius: 15px;width: 330px;height: 380px;display: flex;align-items: center;justify-content: center;}
.intro-buttons .badge{position: absolute;line-height: 52px;top: 0;margin-top: -27px;padding: 2px 15px 0;font-size: 21px;background: #3f8a56;left: 50%;transform: translateX(-50%);border-radius: 13px;}
.intro-buttons .disabled{opacity: .5;pointer-events: none;}
.intro-buttons .guide-hand{top: 210px;left: 50%}

.cont{height: 100%;display: flex;align-items: center;justify-content: center;}
.cont>div:first-child{width: 270px;text-align: right;margin-top: 40px;position: relative;z-index: 1;}
.cont .txt{line-height: 40px;}

.bubble:not(.show){display: none;}
.answer-wrap:not(.show){opacity: 0;pointer-events: none;}

.answer-wrap{width: 815px;margin-left: 55px;position: relative;}
.answer-wrap>div{display: flex;align-items: center;height: 253px;}
.answer-wrap>div:last-child{margin-top: 45px;}

.bubble{width: 388px;height: 253px;background: url(../img/213_e_sc_67/bubble.png) no-repeat 0 0/100% auto;font-size: 18px;display: flex;justify-content: center;flex-direction: column;color: #272d34;text-align: center;align-items: center;padding-left: 50px;filter: drop-shadow(1px 2px 9px rgba(29, 36, 46, 0.79));}

.bx{border-radius: 20px;background: linear-gradient(360deg, rgb(128,135,144) 0%, rgb(170,176,183) 48%, rgb(212,216,221) 100%);padding: 0 5px 8px;border: 3px solid #181e25;text-align: center;box-shadow: 2px 2px 9px 0px rgba(29, 36, 46, 0.79);;}
.bx .inner{width: 356px;height: 60px;display: flex;align-items: center;justify-content: center;background: #161c24;border-radius: 15px;border: 2px solid #c7ccd3;}
.bx strong{font-size: 16px;color: #272d34;display: block;line-height: 30px;padding-top: 5px;}
.bx input{width: 88px;height: 40px;box-shadow: inset 0px 2px 5px 0px rgba(22, 28, 36, 0.47);background: #e7e7e7;font-size: 26px;color: #e74f36;margin: 0 8px;border-radius: 10px;text-align: center;}

.answer-wrap .line{width: 30px;position: absolute;border: 3px solid #bdc2c8;border-radius: 5px 0 0 5px;border-right: 0;top: 130px;bottom: 120px;right: 100%}
.answer-wrap .line:before{content: '';position: absolute;top: 48%;right: 100%;border-top: 3px solid #bdc2c8;width: 30px;}

.circle{position: absolute;border-radius: 100%;animation: fadeIn 1s both;display: none;}
.show+.cont .circle{display: block;}
.circle-btn{width: 100%;height: 100%;border-radius: 100%;}
.circle:after{content: '';position: absolute;top: 0;left: 0;border-radius: 100%;cursor: default;}
.circle .guide-hand{bottom: -30px;right: -30px}

#virtual1 .circle{width: 205px;height: 205px;top: 7px;left: 8px;}
#virtual1 .circle-btn{border: 36px solid rgba(17,94,154,.5)}
#virtual1 .circle:after{width: 133px;height: 133px;top: 36px;left: 36px}

#virtual2 .circle{width: 261px;height: 261px;top: 0;left: 9px;}
#virtual2 .circle-btn{border: 34px solid rgba(17,94,154,.5)}
#virtual2 .circle:after{width: 193px;height: 193px;top: 34px;left: 34px}

#virtual3 .circle{width: 251px;height: 251px;top: 7px;left: 8px;}
#virtual3 .circle-btn{border: 32px solid rgba(17,94,154,.5)}
#virtual3 .circle:after{width: 186px;height: 186px;top: 32px;left: 32px}

.circle-btn.disabled{opacity: 0;pointer-events: none;}
.circle-btn.disabled+.guide-hand{display: none;}


.ele{position: relative;display: inline-block;vertical-align: top;font-weight: 500;}
.ele .num{font-size: 24px;position: absolute;top: 50%;left: 50%;transform: translate(-45%,-45%);color: #fff;}
.bubble .num{font-size: 20px;}

.cont+.guide-result{min-width: 0;z-index: 5;}