html{width: 640px;height: 1138px;}
body{ width:640px; margin: 0 auto;background:#f2f2f2;height: 100%;position: relative;font-family: SimSun  !important;overflow: auto;padding: 0;height: 100%;}
*{margin: 0;padding: 0;text-decoration: none;}
a{outline:none;-moz-outline-style:none;}



.index-bg{background: url(../img/index_bg.jpg) no-repeat;height: 100%;width: 100%;position: relative;}
.share-btn{display: block;width: 101px;height: 40px;box-sizing: border-box;border: 1px solid #b8812b;color: #92482b;font-size: 22px;line-height: 40px;text-align: center;position: absolute;top: 24px;right: 22px;background: rgba(255,255,255,.5);z-index: 3;}
.index-start{display: block;width: 186px;height: 67px;background: url(../img/click_start.png) no-repeat;position: absolute;top: 711px;left: 256px;}


.input-bg{background: url(../img/input_bg.jpg) no-repeat;height: 100%;width: 100%;position: relative;}
.hello-desc{width: 571px;height: 142px;position: absolute;left: 34px;top: 234px;box-sizing: border-box;padding: 0 33px;font-size: 20px;color: #737373;line-height: 36px;text-indent: 45px;font-family: simsun;}
.name-container{position: absolute;left: 229px;top: 537px;}
.name-input{width: 279px;height: 54px;border: 1px solid #e3e3e3;background: #fff;line-height: 54px;position: absolute;box-sizing: border-box;font-size: 24px;padding: 0 15px;}
.other-name{top: 102px;left: 0;}
.own-sex{position: absolute;top: 55px;left: 0;width: 200px;}
.sex-check{display: inline;}
.other-sex{position: absolute;top: 158px;left: 0;width: 200px;}
.input-name-start{display: block;width: 186px;height: 67px;background: url(../img/index_start.png) no-repeat;position: absolute;top: 845px;left: 256px;}
.call-way{top: 204px;left: 0;font-size: 18px;}


.question-bg{background: url(../img/question_bg.jpg) no-repeat;height: 100%;width: 100%;position: relative;padding: 329px 34px 232px;box-sizing: border-box;}
.question-content{color: #4b4b4b;font-size: 26px;line-height: 36px;text-indent: 48px;font-weight: 600;position: relative;margin-bottom: 44px;padding: 0 31px;}
.question-answer{font-size: 26px;color: #4b4b4b;line-height: 72px;font-family: "微软雅黑";margin-bottom: 10px;word-break:break-word;}
.question-answer p{height: 72px;text-indent: 43px;margin: 0;word-break:break-word;}
.question-answer .cur{background: rgba(246, 119, 108, 0.6);color: #FFFFFF;}
.next-question{display: block;width: 174px;height: 59px;position: absolute;top: 840px;left: 237px;box-sizing: border-box;border: 1px solid #b8812b;text-align: center;line-height: 59px;color: #92482b;font-size: 26px;font-family: "microsoft yahei";}

.result-bg{background: url(../img/result2_bg.jpg) no-repeat;height: 100%;width: 100%;position: relative;box-sizing: border-box;box-sizing: border-box;font-size: 28px;color: #633907;}
.result-success-bg{background: url(../img/result_success_bg.jpg) no-repeat;height: 100%;width: 100%;position: relative;box-sizing: border-box;box-sizing: border-box;font-size: 28px;color: #633907;}
.like{position: absolute;left: 530px;top: 26px;display: block;width: 66px;height: 40px;background: url(../img/like.png) no-repeat;font-size: 18px;line-height: 40px;color: #624f3a;padding-left: 44px;font-weight: 600;z-index: 3;}
.result-hello{margin-bottom: 6px;font-weight: 600;}
.result-content{text-indent: 56px;line-height: 38px;margin-bottom: 24px;color: #754d0d;}
.result-notice{text-indent: 28px;line-height: 36px;color: #4e2a05;}
.role-name{font-size: 46px;color: #683f08;text-align: center;width: 100%;height: 50px;line-height: 50px;font-weight: 900;font-family: simsun;margin-bottom: 40px;}
.like-share-container{width: 571px;height: 80px;position: absolute;top: 722px;left: 35px;color: #787676;box-sizing: border-box;border-radius: 0 0 18px 18px;border-top: 2px solid #c6c4c3;z-index: 222;}
.like-share-container .like-container{width: 285px;height: 80px;display: block;float: left;margin-right: 1px;line-height: 80px;text-align: center;box-sizing: border-box;border-radius:  0 0 0 18px;border-right: 2px solid #c6c4c3;}
.like-ico{display: block;width: 23px;height: 100%;background: url(../img/like_ico.png) no-repeat center;display: inline-block;margin-right: 2px;}
.like-count{display: inline-block;vertical-align: top;color: #787676}
.like-share-container .share-container{width: 284px;height: 80px;display: block;float: left;margin-right: 1px;line-height: 80px;text-align: center;box-sizing: border-box;border-radius:  0 0 18px 0;}
.share-ico{display: block;width: 22px;height: 100%;background: url(../img/share_ico.png) no-repeat center;display: inline-block;margin-right: 2px;}
.share-text{display: inline-block;vertical-align: top;}
.like-share-container>a:active{/* background: red; */}
.slide-right{display: block;width: 26px;height: 46px;position: absolute;right: 4px;top: 485px;background: url(../img/slide-right.png) no-repeat;}
.result-notice-share{width: 600px;height: 172px;position: absolute;top: 841px;left: 21px;background: url(../img/result_notice_share.png) no-repeat;}

.result2-bg{background: url(../img/result2_bg.jpg) no-repeat;}
.result2-one-more{display: block;width: 221px;height: 79px;background: url(../img/one_more.png) no-repeat;position: absolute;top: 835px;left: 86px;}
.test{background: url(../img/test.png) no-repeat;}
.result2-know-more{display: block;width: 221px;height: 79px;background: url(../img/know_more.png) no-repeat;position: absolute;top: 835px;left: 340px;}
.result2-know-more-name{background: url(../img/konw_more_name.png) no-repeat;}
.result2-message{display: block;width: 100%;height: 115px;position: absolute;top: 911px;left: 0;background: url(../img/result2_message.png) no-repeat;}
.result2-content{position: absolute;left: 62px;top: 255px;width: 220px;min-height: 330px;z-index: 2;}
.role-title{font-size: 54px;color: #795a3c;text-indent: 16px;margin: 0 auto;position: relative;font-family: simhei;font-weight: 900;margin-bottom: 5px;width: 300px}
.role-introduce{font-size: 18px;color: #000;text-indent: 40px;margin: 0 auto;position: relative;font-family:”Microsoft YaHei”;letter-spacing: -1px;margin-bottom: 4px;font-weight: 600;}
.role-introduce-underline{width: 32px;height: 1px;background: rgba(0,0,0,.5);margin: 0 auto;font-family:”Microsoft YaHei”;margin-bottom: 20px;box-shadow: 0 1px rgba(0,0,0,.2);}
.role-desc{font-size: 24px;color: #754d0d;line-height: 28px;margin: 0 auto;text-indent: 30px;font-weight: 300;}
.role-img{width: 431px;height: 512px;position: absolute;left: 174px;top: 232px;z-index: 1;}


.head{width: 100%;height: 92px;text-align: left;vertical-align: top;position: fixed;z-index: 2;top:0;background: rgba(255, 255, 255, 0.8);}
.head-pic-container{display: inline-block;float: left;}
.head-pic{display: inline-block;width: 111px;height: 111px;border-radius: 15px;position: relative;margin-left: 28px;margin-top: 15px;background: url(../img/jzry_ico.png) no-repeat;background-size: 100% 100%;z-index: 31;}
.head-text{display: inline-block;vertical-align: top;height: 100%;padding-top: 21px;float: left;padding-left: 16px;}
.head-text .title{font-size: 30px;height: 30px;line-height: 30px;color: #392712;font-family: simsun;font-weight: 900;margin-bottom: 6px;}
.head-text .sec-title{font-size: 20px;color: #fff;margin-top: 4px;color: #191717;font-family: "microsoft yahei";}
.head-bottom-border{display: block;width: 100%;height: 3px;position: fixed;background: url(../img/index_head_bottom_border.png) no-repeat;top: 92px;}

.swiper-container{height: 100%;width: 100%;}
.swiper-container .swiper-slide{padding: 244px 80px 0;box-sizing: border-box;font-size: 26px;font-family: "microsoft yahei";}

.best-friend-top{width: 640px;height: 92px;position: fixed;top: 0;background: url(../img/top_bg.jpg) no-repeat;z-index: 3;}


.weixin-tip{display: none; position: fixed; left:0; top:0; bottom:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80);  height: 100%; width: 100%; z-index: 100;}
.weixin-tip p{text-align: center; margin-top: 5%; padding:0 5%;}

.other-browser-tip{display: none; position: fixed; left:0; top:0; bottom:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80);  height: 100%; width: 100%; z-index: 100;}
.other-browser-tip p{text-align: center; margin-top: 5%; padding:0 5%;}