html,body {background-color: #FFCA1C;}
#container, #wrapper {width:100%; height:100%; background-color: #FFCA1C; position: relative;}

.cont-wrap {width: 600px; margin:auto; background-color: #FFCA1C; text-align: center; height: 100%; position: relative; overflow-x: hidden; overflow-y: auto;}
.cont-outer {background-color: #fff; border: 10px solid #E6E9F3; min-height: calc(100% - 60px); margin: 20px auto; border-radius: 10px;}

.cont-wrap .cont_header {width: 100%; height: 120px; background-image: url(../img/child_background.png); background-size: 100%; background-position: left bottom; position: relative; margin-bottom: 39px;}
.cont-wrap .cont_header .status-bar {width:90%; margin:auto; font-size:0; padding-top:15px;}
.cont-wrap .cont_header .status-bar a {display: inline-block; font-size: 14px; width: 50%; text-align: center; background-color: #726987; padding: 10px 0; color: #fff; border-radius: 0 7px 7px 0;}
.cont-wrap .cont_header .status-bar a:first-child {border-radius: 7px 0 0 7px;}
.cont-wrap .cont_header .status-bar a.now-status {background-color: #BF65D4;}

.cont-wrap .cont_header .status-bar-grape {height:20px; border-top:2px solid #AE4CC5; border-bottom:2px solid #AE4CC5; position: absolute; left:0; width:100%; bottom:0; background-color:#fff;}
.cont-wrap .cont_header .status-bar-grape .status-bar-grape-child {height:100%; background-color: #D9A3E5; }
.cont-wrap .cont_header .status-bar-grape .step_number.last_state {border-color: #A79AAA; color:#A79AAA; right:23px;}
.cont-wrap .cont_header .status-bar-grape.clear .step_number.last_state,
.cont-wrap .cont_header .status-bar-grape .step_number { position: absolute; top: -17px; background-color: #fff; display: inline-block; width: 28px; height: 28px; border-radius: 100%; border: 2px solid #AE4CC5; line-height: 28px; color: #AE4CC5; margin-left: -16px;}
.cont-wrap .cont_header .status-bar-grape .step_number_bottom.last-number-bottom {right:5px; background-image: url(../img/state_end_background.png);}
.cont-wrap .cont_header .status-bar-grape.clear .step_number_bottom.last-number-bottom,
.cont-wrap .cont_header .status-bar-grape .step_number_bottom { background-image: url(../img/state_background.png); color: #fff; background-size: 100%; width: 70px; display: inline-block; padding-top: 6px; height: 35px; line-height: 31px; font-size: 13px; position: absolute; bottom: -42px; margin-left: -35px;}
.cont-wrap .cont_header .status-bar-grape .survey_img {width: 42px; position: absolute; top: -40px; margin-left: -44px;}

.cont-wrap .question-box-wrap {position: relative;}
.cont-wrap .question-box-wrap .question-item {position: relative; width:100%; left:0; visibility: hidden;}
.cont-wrap .question-box-wrap .question-item .sound-on {text-align: center !important; border: none !important; position: relative;}
.cont-wrap .question-box-wrap .question-item .sound-on img {width:50px;}
.cont-wrap .question-box-wrap .question-item .sound-on img.cursor {width: 20px; position: absolute; left: 50%; margin-left: -34px; top: 30%;}
.cont-wrap .question-box-wrap .question-item .icon-appender {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center;}
.cont-wrap .question-box-wrap .question-item .icon-appender img {width: 400px; margin-left: -30px;}

.cont-wrap .question-box-wrap .question-item .question-title-box {border-bottom: 10px solid #E6E9F3; padding: 15px 5%; width: 90%; text-align: left;}
.cont-wrap .question-box-wrap .question-item .question-title-box span:nth-child(1) {display: inline-block; font-size: 25px; margin: 0 15px 0 0; vertical-align: top;}
.cont-wrap .question-box-wrap .question-item .question-title-box span:nth-child(2) {font-size: 21px; display: inline-block; width: calc(100% - 55px); vertical-align: top; margin-top: 0; text-align: left;}
.cont-wrap .question-box-wrap .question-item .question_box {padding-top:15px;}
.cont-wrap .question-box-wrap .question-item .question_box a  {font-size:16px;display: block; width: 80%; margin: auto; text-align: left; border: 1px solid #D7D7D7; padding: 15px 5%; border-radius: 5px; margin-bottom:5px;}
.cont-wrap .question-box-wrap .question-item .question_box a  span:nth-child(1) {display: inline-block; margin-right: 10px; vertical-align: top;}
.cont-wrap .question-box-wrap .question-item .question_box a  span:nth-child(2) {display: inline-block; width: calc(100% - 30px); vertical-align: top;}
.cont-wrap .question-box-wrap .question-item .question_box a.selected {background-color: #BF65D4; color:#fff; border-color:#BF65D4;}

.go-next {display: inline-block; border-radius: 50px; margin-top: 10px; width: 90%; margin-bottom:20px; padding:0.5vh 0;}
.go-next .btn-title {font-size: 16px; display: inline-block; padding: 10px 75px 10px 55px; background-image: url(../img/common/go_arrow.png); background-repeat: no-repeat; background-size: 25px; background-position: right 45px center;}


@media(max-width:650px) {
    html,body {background-color: #fff;}
    #container, #wrapper {background-color: #fff;}
    .cont-wrap {width:100%; overflow-y: auto; background-color: #fff;}
    .cont-outer {height:100%; border:none; margin: auto auto; border-radius: 0; background-color:#fff;}
    .cont-wrap .question-box-wrap .question-item .question-title-box span:nth-child(1) {font-size:21px;}
    .cont-wrap .question-box-wrap .question-item .question-title-box span:nth-child(2) {font-size:14px; margin-top:3px; width: calc(100% - 49px);}
    .cont-wrap .question-box-wrap .question-item .question_box a {padding:10px 5%; font-size:12px;}
    .cont-wrap .question-box-wrap .question-item .icon-appender img {width:300px;}
    .go-next {width:80%; padding:0;}
}