@charset "UTF-8";

/*测试页面主体框架*/
.wrap{width: 100%; max-width: 1200px; min-width: 320px; min-height: 450px;  height: auto; overflow: hidden; margin: 0px auto; padding-top: 10px; box-sizing: border-box; }

/*在线测评项目*/
.section-1{width: 100%; overflow: hidden; position: relative; margin-top: 25px;  border: 1px solid #eee; box-shadow: 0 0 8px #ccc;}
.section-1 .section-1-bg{width: 100%; height: 100px; overflow: hidden; margin: 0 auto; background:url(../images/fea543c6.png) center no-repeat;}
.section-1 .section-title{width: 100%; height: 100px; overflow: hidden; position: absolute; left: 0; top: 0; text-align: center; line-height: 100px; font-size: 14px;}
.test-list{width: 90%; overflow: hidden; padding-bottom: 25px;  margin: 0 auto;}
.test-list a{display: inline-block; overflow: hidden; width: 33.3%; text-decoration: none; float: left; color: #818181;}
.test-list a .test-icon{width: 44px; height: 44px; overflow: hidden; margin: 0 auto;  margin-top:10px; }
.test-list a .test-icon img:nth-child(2){display: none;}
.test-list a .text{width: 100%; height: 24px; overflow: hidden; margin: 0 auto; margin-top: 10px; font-size: 14px; line-height: 24px; text-align: center;}
.test-list a .bottom-line{width: 26px; height: 2px; overflow: hidden; margin: 0 auto; margin-bottom: 10px; margin-top: 10px;}
.test-list a:hover{color: #000; font-weight: bold;}
.test-list a:hover .test-icon img:nth-child(1){display: none;}
.test-list a:hover .test-icon img:nth-child(2){display: block;}
.test-list a:hover .bottom-line{background: #44b242;}

/*明星营养师*/
.section-2{width: 100%; overflow: hidden; position:relative; margin-bottom: 40px;}
.wrap .section-2 .section-title-1{width: 100%; overflow: hidden; margin: 40px 0 20px 0; text-align: center; line-height: 60px; font-size: 16px;}
.section-2 .section-title-1 .top-line{width: 46px; height: 2px; margin: 0 auto;  background-color: #44b242}
.section-2 .block-2{max-width: 1200px; min-width: 300px; overflow: visible; position: relative; }
.section-2 .block-2 .text-center{width: 280px; height: 40px; overflow: hidden; background: #FFF; margin: 0 auto; position: relative; z-index: 21;}
.section-2 .block-2 .text-center .title{ width: 280px; height: 40px; overflow: hidden; margin: 0 auto; border: 1px solid #44b242; font-size: 12px; text-align: center; color: #44b242; line-height: 38px; border-radius:20px ; -webkit-border-radius:20px ; -moz-border-radius:20px ; -ms-border-radius:20px ; -o-border-radius:20px;  }
.section-2 .block-2 .box{width: 100%; min-width: 300px; overflow: hidden; padding-top: 40px; margin-top: -20px; border: 1px solid #44b242; position: relative; z-index: 20;}
.section-2 .block-2 .box .left{width: 100%; padding: 0 10px 20px 10px; overflow: hidden;}
.section-2 .block-2 .box .right{width: 100%; padding: 0 10px 20px 10px; overflow: hidden;}
.section-2 .block-2 .box .right .img-text-list2{width: 100%; overflow: hidden; }
.section-2 .block-2 .box .right .img-text-list2 .li-item{width: 100%; overflow: hidden; padding-bottom: 25px;}
.section-2 .block-2 .box .right .img-text-list2 .li-item .img{width: 40px; height: 40px; overflow: hidden; float: left; }
.section-2 .block-2 .box .right .img-text-list2 .li-item .icon-1{background: url(../images/6b6ab669.png) no-repeat; background-size: 100% 100%;}
.section-2 .block-2 .box .right .img-text-list2 .li-item .icon-2{background: url(../images/7a64e8c9.png) no-repeat; background-size: 100% 100%;}
.section-2 .block-2 .box .right .img-text-list2 .li-item .icon-3{background: url(../images/072bb359.png) no-repeat; background-size: 100% 100%;}
.section-2 .block-2 .box .right .img-text-list2 .li-item .icon-4{background: url(../images/6b6ab669.png) no-repeat; background-size: 100% 100%;}
.section-2 .block-2 .box .right .img-text-list2 .li-item .text{width: calc(100% - 45px); overflow: hidden; margin-left: 5px; float: left;}
.section-2 .block-2 .box .right .img-text-list2 .li-item .text .til{width: 100%; overflow: hidden; font-size: 14px; line-height: 28px; color: #000;}
.section-2 .block-2 .box .right .img-text-list2 .li-item .text .desc{width: 100%; overflow: hidden; font-size: 12px; line-height: 20px; color: #434343;}

/*测试题目**/
.question-box{max-width: 1000px; min-width: 300px; overflow: hidden; margin: 0 auto; margin-bottom: 50px;}
.question-box .question-title{overflow: hidden; float: left; padding-top: 40px;  padding-bottom: 10px; color: #467d19; border-bottom: 2px solid #6eb92b; line-height:30px; font-size: 20px;}
.question-box .question-num{overflow: hidden; float: right; margin-top: 55px;}
.question-box .question-num span{font-size: 18px; line-height: 20px; color: #6eb92b;}
.question-box .question-num i{display: inline-block; width: 12px; height: 12px; overflow: hidden; background: #ccc;}
.question-box .question-num i.in{background: #6eb92b;}
.question-box .question-cont{width: 100%; overflow: hidden; clear: both; margin-top: 35px; margin-bottom: 25px;  border: 1px solid #eee;}
.question-box .question-cont .question{width: 100%; overflow: hidden; margin: 0 auto; padding: 25px 0 35px 0;}
.question-box .question-cont .question p{width: 100%; overflow: hidden; margin: 0 auto; padding: 5px 15px 15px 20px; float: left; font-size: 14px; color: #909090;  cursor: pointer; line-height: 24px;}
.question-box .question-cont .question p i{display: block; margin-top: 4px; position: relative; height: 16px; width: 16px; float: left; margin-right: 14px; border: 1px solid #e1e1e1;}
.question-box .question-cont .question p i img{position: absolute; bottom: 1px; left: 0px; display: none;}
.question-box .question-cont .question p.on i img{display: block;}

.question-box .question-control{width: 100%; overflow: hidden;}
.question-box .question-control .prev,.next,.submit{ width:64px; height: 26px; float: left; overflow: hidden; display: inline-block; border: 1px solid #6eb92b; font-size: 14px; line-height: 24px; text-align: center; border-radius:4px ; -webkit-border-radius:4px ; -moz-border-radius:4px ; -ms-border-radius:4px ; -o-border-radius:4px ; text-decoration: none; color: #6eb92b;}
.question-box .question-control .next,.submit{float: right; text-decoration: none; }
.question-box .question-control .submit{text-decoration: none; }
.question-box .question-control .progress{width: calc(100% - 138px); height: 24px; float: left; margin-left: 6px; position: relative; }
.question-box .question-control .progress .percent-con{width: 99%; height: 100%;  position: absolute; left: 0px; top: 0px; z-index: 23;}
.question-box .question-control .progress .percent-con .percent{width: 40px; height: 24px; overflow: hidden; position:absolute; top: 1px; border: 1px solid #58a117; color: #58a117; font-size: 14px; line-height: 20px; text-align: center; margin-left: -40px; background: #fff;}
.question-box .question-control .progress .bar-con{width: 100%; height: 2px; overflow: hidden; margin-top:11px; position:absolute; left: 0px; top: 50%; margin-top: -1px; background: #a4a4a4; z-index: 22;}
.question-box .question-control .progress .bar-con .bar{width: 100%; height: 100%; background: #6dbb29;}

/*测试显示内容*/
.result-box{width: 100%; min-width: 300px; height: auto; overflow: hidden; margin: 0 auto; display: none;}
.result-box .result-title{width: 100%; height: 60px; overflow: hidden; font-size: 24px; text-align: center; line-height: 60px; background: url(../images/fea543c6.png) center no-repeat; background-size: 100%;}
.result-box .assessment{width: 100%;  height: auto; overflow: hidden; padding: 15px 0 35px 0px; margin-top: 15px; border: 1px solid #f8f8f8; margin-bottom: 30px;}
.result-box .assessment .result-subtit{width: 100%;  height: auto; overflow: hidden; text-align: center; font-weight: bold; color: #44b242; font-size: 18px; line-height: 40px; display: none;}
.result-box .assessment .result-text{width: 100%;  height: auto; overflow: hidden; padding: 15px 0 ; text-align: center; line-height: 30px; font-size: 16px; color: #333; }
.result-box .assessment .result-source-line{width: 96%; height: 1px; overflow: hidden; margin-bottom: 30px; margin: 0 auto; background: #f8f8f8;}

.result-box .result-content{width: 100%; overflow: hidden; margin-top: 30px; margin-bottom: 40px; border: 1px solid #f8f8f8; display: none;}
.result-box .result-content .content-box{width: 100%; overflow: hidden; padding: 10px; margin: 0 auto; line-height: 200%;}
.result-box .result-content .content-box img{max-width: 100% !important; height: auto !important;}

@media screen and (max-width: 320px) {

    /*测试页面主体框架*/
    .wrap{padding: 0 10px;}

    /*在线测评项目*/
    .section-1 .section-title{font-size: 16px;}
}

@media screen and (min-width: 320px) {
    /*测试页面主体框架*/
    .wrap{padding: 0 10px;}

    /*在线测评项目*/
    .section-1 .section-title{font-size: 16px;}
}

@media screen and (min-width: 768px) {

    /*测试页面主体框架*/
    .wrap{padding: 0 10px;}

    /*在线测评项目*/
    .section-1 .section-title{font-size: 18px;}
    .section-1 .test-list{width: 80%;}
    .section-1 .test-list a{width: 25%;}

    /*明星营养师*/
    .section-2 .section-title-1{font-size: 18px;}
    .section-2 .block-2 .text-center{width: 485px;}
    .section-2 .block-2 .text-center .title{ width: 420px;}
    .section-2 .block-2 .text-center .title{font-size: 16px;}

    /*测试题目**/
    .question-box .question-title{font-size: 26px; line-height:34px;}
    .question-box .question-cont .question p{width: 50%;}
    .question-box .question-control .prev,.next,.submit{ width:70px; height: 34px; font-size: 14px; line-height: 32px; border-radius:6px ; -webkit-border-radius:6px ; -moz-border-radius:6px ; -ms-border-radius:6px ; -o-border-radius:6px ;  }
    .question-box .question-control .progress{width: calc(100% - 160px); height: 34px; margin-left: 10px; position: relative; }
    .question-box .question-control .progress .percent-con .percent{width: 50px; height: 24px; overflow: hidden; position:absolute; top: 5px; font-size: 14px; line-height: 22px; margin-left: -50px; }
    .question-box .question-control .progress .bar-con{ height: 4px;  margin-top: -2px; }

    /*测试显示内容*/
    .result-box .result-content{margin-top: 40px; margin-bottom: 60px;}
    .result-box .result-title{height:100px; line-height:100px; font-size: 28px; font-weight: bold; background-size: 620px;}
    .result-box .assessment .result-text{font-size: 18px;}
}
@media screen and (min-width: 992px) {

    /*测试页面主体框架*/
    .wrap{padding: 0 10px;}

    /*在线测评项目*/
    .section-1 .section-title{font-size: 20px;}
    .section-1 .test-list a{width: 14.1%;}
    
    /*明星营养师*/
    .section-2 .section-title-1{font-size: 20px;}
    .section-2 .block-2 .box .left{width: 60%;}
    .section-2 .block-2 .box .right{width: 40%;}
    .section-2 .block-2 .box .right .img-text-list2 .li-item .img{width: 50px; height: 50px;}
    .section-2 .block-2 .box .right .img-text-list2 .li-item .text{width: calc(100% - 60px); overflow: hidden; margin-left: 10px; }

    /*测试题目**/
    .question-box{margin-bottom: 90px;}
    .question-box .question-title{font-size: 32px; line-height:40px;}
    .question-box .question-cont .question{width: 85%; min-height: 350px; padding: 45px 0 35px 0;}
    .question-box .question-cont .question p{ font-size: 16px;  line-height: 24px; padding: 5px 5px 15px 50px; }
    .question-box .question-control .prev,.next,.submit{ width:90px; height: 40px; font-size: 18px; line-height: 36px; border: 2px solid #58a117; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; }
    .question-box .question-control .progress{width: calc(100% - 220px); height: 40px; margin-left: 20px; position: relative; }
    .question-box .question-control .progress .percent-con .percent{width: 70px; height: 28px; overflow: hidden; position:absolute; top: 6px; font-size: 18px; line-height: 26px; margin-left: -70px; }
    .question-box .question-control .progress .bar-con{ height: 5px;  margin-top: -2px; }

@media screen and (min-width: 1200px) {
    /*测试页面主体框架*/
    .wrap{padding: 0 10px;}

    /*在线测评项目*/
    .section-1 .section-title{font-size: 24px;}

    /*明星营养师*/
    .section-2 .section-title-1{font-size: 22px;}

}