* {
  list-style: none;
}

.pointer {
  cursor: pointer;
}

#threemodel {
  width: 100%;
  height: 100%;
}

/* app */
@media (min-width: 0px) and (max-width: 640px) {
  .banner {
    width: 100%;
    height: 350px;
    background-color: #AFAFAF;
  }

  .banner-title {
    font-size: 32px;
    font-weight: bold;
    padding-top: 87px;
  }

  .banner-des {
    max-width: 500px;
  }

  .type-box {
    width: 210px;
    height: 130px;
    background-color: #AFAFAF;
  }

  .type-circular {
    width: 71px;
    height: 71px;
    background-color: #fff;
    border-radius: 50%;
  }

  /* -------------------- component radioQuestionnaire -------------------- start */

  .radioQuestionnaire_questionnaireBox {
    background-color: #F9F9F9;
    padding: .5rem;
    /* padding: 50px 37px; */
    /* padding-top: 3.5714rem; */
  }

  .radioQuestionnaire_problemIndex {
    color: #FF0000;
    font-size: 1rem;
    font-weight: 700;
  }

  .radioQuestionnaire_questionTitle {
    font-size: .8rem;
    margin-top: .7rem;
  }

  .radioQuestionnaire_radioQuestionImg {
    width: 12rem;
    height: 7.1429rem;
    margin: .7143rem 0;
    object-fit: contain;
  }

  .radioQuestionnaire_questionnaireTrapezoid {
    width: 7.5rem;
    height: 0;
    border-bottom: 2.1429rem solid #D4DEFF;
    border-left: 0px solid transparent;
    border-right: 2.1429rem solid transparent;
    font-size: 1rem;
    margin-top: .7143rem;
    padding-left: 2.1429rem;
  }

  .radioQuestionnaire_questionnaireDes {
    padding-top: .3571rem;
    width: 10rem;
    height: 1.4286rem;
    position: relative;
    left: -1.0714rem;
    margin-right: 1.4286rem;
  }

  .radioQuestionnaire_optionModule {
    margin-top: .7143rem;
    display: flex;
    flex-wrap: wrap;
  }

  .radioQuestionnaire_optionItem {
    margin-top: 1.4286rem;
    margin-right: 2.8571rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .radioQuestionnaire_questionnaireItemBoxSelected {
    width: 12.8571rem;
    min-width: 12.8571rem;
    height: 3.5714rem;
    background-color: #707070;
    color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
  }

  .radioQuestionnaire_questionnaireItemBox {
    width: 12.8571rem;
    min-width: 12.8571rem;
    height: 3.5714rem;
    background-color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
  }

  .radioQuestionnaire_optionModule2 {
    margin-top: .7143rem;
    display: flex;
    flex-wrap: wrap;
  }

  .radioQuestionnaire_optionItem2 {
    width: 10rem;
    /* height: 120px; */
    margin-top: 1rem;
    margin-right: .5rem;
    cursor: pointer;
  }

  .radioQuestionnaire_optionImgBox {
    width: 10rem;
    height: 5rem;
  }

  .radioQuestionnaire_optionImg {
    height: 100%;
  }

  .radioQuestionnaire_layout {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .radioQuestionnaire_questionnaireItemBoxSelected2 {
    width: 10rem;
    /* min-width: 12.8571rem; */
    height: 3rem;
    background-color: #707070;
    box-sizing: border-box;
    color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
  }

  .radioQuestionnaire_questionnaireItemBox2 {
    width: 10rem;
    /* min-width: 8rem; */
    height: 3rem;
    box-sizing: border-box;
    padding: .7rem;
    background-color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
  }

  .radioQuestionnaire_bottomDashedBorder {
    border-bottom: 1px dashed #333;
    margin: 2.8571rem 0 2.8571rem 0;
  }

  .radioQuestionnaire_viewResults {
    text-align: center;
  }

  .radioQuestionnaire_viewResultsButton {
    width: 300px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 800;
  }

  /* progressBar */
  .radioQuestionnaire_progressBarBox {
    height: 30px;
    margin-top: 30px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-around;

  }


  .radioQuestionnaire_progressBarItem {
    max-width: 730px;
  }

  .radioQuestionnaire_progressBarMain {
    height: 40px;
    display: flex;
  }

  .radioQuestionnaire_progressBarMainTrends {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
  }

  .radioQuestionnaire_progressBarColor {
    /* height: 30px; */
    background-color: #ffcbcb;
    /* width: 750px; */
  }

  .radioQuestionnaire_progressBarColorTrends {
    border: 1px solid #707070;
  }

  .radioQuestionnaire_progressBarText {
    padding-left: 20px;
    height: 30px;
    line-height: 40px;
    font-size: 15px;

  }

  /* Show more Button */
  .radioQuestionnaire_ButtonMainBox {
    margin-top: 40px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }

  /* Button after progress ends */
  .radioQuestionnaire_progressBarButtonBox {
    /* text-align: center; */
    /* padding: 40px 0 50px 0; */
    padding-top: 2.8571rem;
  }

  .radioQuestionnaire_lookresultBox {
    padding-top: 2.8571rem;
    display: flex;
    justify-content: center;
  }


  .radioQuestionnaire_progressBarButton {
    width: 300px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 800;
  }

  /* mask */
  .radioQuestionnaire_mask {
    display: none;
    width: 90vw;
    height: 10rem;
    overflow: hidden;
    background-color: #fff;
  }

  .radioQuestionnaire_imgProportionalScaling {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* -------------------- component radioQuestionnaire -------------------- end */


  /*-------------------- component  carousel -------------------- start*/
  .flexslider {
    position: relative;
    /* height: 400px; */
    overflow: hidden;
    background-color: #fff;
  }

  .flexslider2 {
    position: relative;
    overflow: hidden;
    background-color: #fff;
  }

  .ver-align {
    vertical-align: top;
  }

  .slides {
    position: relative;
    z-index: 1;
  }

  .slides li {
    height: 14.2857rem;
  }

  .flex-control-nav {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  .flex-control-nav li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    display: inline;
    zoom: 1;
  }

  .flex-control-nav a {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 40px;
    overflow: hidden;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/dot.png) right 0 no-repeat;
    cursor: pointer;
  }

  .flex-control-nav .flex-active {
    background-position: 0 0;
  }

  .flex-direction-nav {
    position: absolute;
    z-index: 3;
    width: 100%;
    top: 45%;
  }

  .flex-direction-nav li a {
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
  }

  .flex-direction-nav li a.flex-prev {
    left: 40px;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/prev.png) center center no-repeat;
  }

  .flex-direction-nav li a.flex-next {
    right: 40px;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/next.png) center center no-repeat;
  }


  .flex-control-nav {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  .flex-control-nav li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    display: inline;
    zoom: 1;
  }

  .flex-control-nav a {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 40px;
    overflow: hidden;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/dot.png) right 0 no-repeat;
    cursor: pointer;
  }

  .flex-control-nav .flex-active {
    background-position: 0 0;
  }

  /*-------------------- component  carousel -------------------- end*/





  /* -------------------- component viewingdiagnosticresults -------------------- start */

  .viewingdiagnosticresults_mainBox {
    background-color: #F9F9F9;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  .viewingdiagnosticresults_inputBox {
    /* width: 450px; */
    /* height: 282px; */
    width: 100%;
    border-radius: 20px;
    background-color: #fff;
    /* padding: 30px 50px; */
    box-sizing: border-box;
    font-size: 16px;
  }

  .viewingdiagnosticresults_title {
    text-align: center;
    font-weight: 800;
    margin: 0;
  }

  .viewingdiagnosticresults_box1 {
    margin-top: 20px;
    font-weight: 800;
  }

  .viewingdiagnosticresults_box1Require {
    color: #FF0000;
  }

  .viewingdiagnosticresults_input {
    height: 40px;
    width: 80vw;
    background-color: #F3F3F3;
    font-size: 16px;
    padding-left: 10px;
    margin-top: 10px;
    border: 1px solid #e6e6e6;
  }

  .viewingdiagnosticresults_box2 {
    margin-top: 20px;
    font-weight: 800;
  }

  .viewingdiagnosticresults_input2 {
    height: 40px;
    width: 100%;
    background-color: #F3F3F3;
    font-size: 16px;
    padding-left: 10px;
    margin-top: 10px;
    border: 1px solid #e6e6e6;
  }

  .viewingdiagnosticresults_viewResultsBox {
    padding: 40px 0 0 0;
    text-align: center;
  }

  .viewingdiagnosticresults_viewResultsButton {
    width: 70vw;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    color: #000;
    border-radius: 20px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 800;
  }

  
  .viewingdiagnosticresults_lookresult {
    width: 70vw;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    color: #000;
    border-radius: 20px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .viewingdiagnosticresults_disabledButton {
    width: 300px;
    height: 45px;
    border: 1px solid #707070;
    color: #fff;
    background: #BEBEBE;
    border-radius: 20px;
    cursor: pointer;
  }

  /* -------------------- component viewingdiagnosticresults -------------------- end */





  /* -------------------- component yourresults -------------------- end */
  .yourresults_mainBox {
    /* height: 470px; */
    box-shadow: 0px 6px 12px #00000029;
    border-radius: 1rem;
    padding: 1rem 0.5rem;
    box-sizing: border-box;
    flex-wrap: wrap;
    width: 100%;
    margin: 0.5rem auto;
  }

  .yourresults_title {
    text-align: center;
    margin: 0;
    font-size: 24px;
  }

  .yourresults_progressBar {
    /* height: 355px; */
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-around;
  }

  .yourresults_progressBarItem {
    /* width: 750px; */
    width: 100%;
    margin-top: 20px;
  }

  .yourresults_progressBarItemType {
    font-size: 0.8rem;
    font-weight: 800;
    display: inline-block;
    margin-bottom: 8px;
  }

  .yourresults_progressBarMain {
    height: 30px;
    display: flex;
    border-radius: 0.3rem;
  }

  .yourresults_progressBarMainTrends {
    border: 1px solid #707070;
  }

  .yourresults_progressBarMainTrends2 {
    width: 814px;
  }

  .yourresults_progressBarColor {
    /* height: 30px; */
    background-color: #FF9898;
    border-radius: 0.3rem;
    /* width: 750px; */
  }

  .yourresults_progressBarColorTrends {
    border: 1px solid #707070;
  }

  .yourresults_progressBarText {
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    font-size:  0.7rem;
    font-weight: 800;
  }

  .yourresults_progressBarTextTrends {
    position: relative;
    right: 0;
  }

  /* -------------------- component yourresults -------------------- end */





  /* -------------------- component processStage2 -------------------- start */

  .processStage2_count {
    color: #999d9d;
  }

  .processStage2_title {
    color: #999d9d;
  }

  .processStage2_degreeRatio {
    color: #fff;
    font-size: .7rem;
    display: flex;
  }

  .processStage2_degreeRatioItem {
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .processStage2_percentagePercentage {
    font-size: 16px;
  }

  .processStage2_arr {
    width: 100%;
    margin-top: 1.4286rem;
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
  }

  .processStage2_arrItem {
    width: 100%;
    /* height: 30px; */
    margin-bottom: 15px;
    font-size: .7rem;
    /* padding-right: 30px; */
    display: flex;
    align-items: center;
  }

  .processStage2_arrItemsquare {
    width: 1rem;
    height: 1rem;
  }

  .processStage2_arrItemList {
    margin-left: 10px;
  }

  .processStage2_arrItemList2 {
    font-size: 14px;
  }

  /* -------------------- component processStage2 -------------------- end */





  /* -------------------- component mythoughts -------------------- start */

  .mythoughts_mainBox {
    /* min-height: 1025px; */
    background-color: #F9F9F9;
    /* margin-top: 100px; */
    /* padding: 50px 40px; */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .mythoughts_contentBox {
    min-height: 108px;
    border-bottom: 2px dashed #707070;
    display: flex;
    justify-content: center;
    /* flex-wrap: wrap; */
    /* align-content: space-between; */
    /* padding-bottom: 20px; */
    /* padding: 0px 0 20px 0; */
    flex-direction: column;
    width: 100vw;
  }

  .mythoughts_exclude:not(:first-child) {
    margin-top: 33px;
  }

  .mythoughts_listItemIndex {
    color: #F52222;
    font-size: 20px;
    font-weight: 800;
  }

  .mythoughts_listItemText {
    margin-left: 30px;
    font-size: 16px;
  }

  .questionStyle {
    padding-left: 29px;
    /* margin-top: 30px; */
  }

  .mythoughts_listItemLayout {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mythoughts_listItemContent {
    color: #00BC0D;
    font-size: 16px;
    /* margin-right: 40px; */
    width: 4rem;
    text-align: right;
    font-weight: 800;
  }

  .mythoughts_listUl {
    width: 100%;
    height: 3.5714rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .mythoughts_listItemLi {
    cursor: pointer;
  }

  .mythoughts_listItemContent2 {
    color: #2A6FE6;
    font-size: 16px;
    /* margin-left: 40px; */
    font-weight: 800;
    width: 4rem;
  }

  .mythoughts_buttonBox {
    text-align: center;
    margin-top: 50px;
  }

  .mythoughts_button {
    width: 300px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
  }

  .border-00BC0D-green-bbig-kx {
    width: 60px;
    height: 60px;
    border: 3px solid #00BC0D;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .border-00BC0D-green-bbig-st {
    width: 60px;
    height: 60px;
    background-color: #00BC0D;
    border-radius: 50%;
  }

  .border-00BC0D-green-big-kx {
    width: 50px;
    height: 50px;
    border: 3px solid #00BC0D;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .border-00BC0D-green-big-st {
    width: 50px;
    height: 50px;
    background-color: #00BC0D;
    border-radius: 50%;
  }

  .border-00BC0D-green-small-kx {
    width: 40px;
    height: 40px;
    border: 3px solid #00BC0D;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .border-00BC0D-green-small-st {
    width: 40px;
    height: 40px;
    background-color: #00BC0D;
    border-radius: 50%;
  }

  .border-707070-grey-s-kx {
    width: 30px;
    height: 30px;
    border: 3px solid #707070;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .border-707070-grey-s-st {
    width: 30px;
    height: 30px;
    background-color: #707070;
    border-radius: 50%;
  }

  .border-2A6FE6-blue-bbig-kx {
    width: 60px;
    height: 60px;
    border: 3px solid #2A6FE6;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .border-2A6FE6-blue-bbig-st {
    width: 60px;
    height: 60px;
    background-color: #2A6FE6;
    border-radius: 50%;
  }

  .border-2A6FE6-blue-big-kx {
    width: 50px;
    height: 50px;
    border: 3px solid #2A6FE6;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .border-2A6FE6-blue-big-st {
    width: 50px;
    height: 50px;
    background-color: #2A6FE6;
    border-radius: 50%;
  }

  .border-2A6FE6-blue-small-kx {
    width: 40px;
    height: 40px;
    border: 3px solid #2A6FE6;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .border-2A6FE6-blue-small-st {
    width: 40px;
    height: 40px;
    background-color: #2A6FE6;
    border-radius: 50%;
  }

  /* -------------------- component mythoughts -------------------- end */






  /*-------------------- component tagbtn -------------------- start*/
  .tagbtn-btn {
    width: 90px;
    height: 30px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tagbtn-btn-active {
    color: #fff;
    background-color: #5A5A5A;
    border-radius: 20px;
  }

  /*-------------------- component  tagbtn -------------------- end*/

  /*-------------------- component viewitem -------------------- start*/
  .viewitem-view-box {
    padding: 20px;
    margin-bottom: 40px;
  }

  .viewitem-view-box-FF {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 4px 12px #00000029;
    opacity: 1;
  }

  .viewitem-view-body {
    display: flex;
    flex-direction: column;
  }

  .viewitem-view-box-F2 {
    background-color: #F2F2F2;
    margin: 1rem 1rem;
  }

  .viewitem-view-flex-w-h {
    /* width: 300px; */
    height: 200px;
  }

  .viewitem-view-img-view {
    /* width: 290px; */
    height: 200px;
    background-size: contain;
  }

  .viewitem-view-title {
    /* flex: 1;
    padding-left: 30px; */
  }

  .viewitem-view-status-boxDiv {
    /* display: flex;
    align-items: center; */
    margin-top: 10px;
  }

  .viewitem-view-title-div {
    font-size: 22px;
    font-weight: bold;
    margin-top: 0.5rem;
  }

  .viewitem-view-status-box {
    color: #fff;
    background-color: #656565;
    padding: .3rem;
    font-size: .7rem;
    width: fit-content;
    text-align: center;
  }

  .viewitem-view-status-box-div {
    font-size: .7rem;
    font-weight: bold;
    color: #59A5CC;
  }

  .viewitem-view-status-box-lastdiv {
    color: #FF0000;
    font-weight: bold;
    font-size: 16px;
    margin-left: 5px;
  }

  .viewitem-view-description {
    /* width: 590px; */
    height: 40px;
    line-height: 20px;
    font-family: 'Noto Sans';
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .viewitem-view-isshow-statue-btnkjs {
    width: 280px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    cursor: pointer;
  }

  .viewitem-view-heartFlex {
    display: flex;
    flex: 1;
    align-items: center;
    margin-top: 10px;
  }

  .viewitem-view-heartFlex-div {
    display: flex;
    flex: 1;
    align-items: center;
  }

  .viewitem-view-textHeart {
    margin-left: 5px;
    color: #59A5CC;
  }

  .viewitem-view-heart {
    margin-left: 5px;
  }

  .viewitem-view-heart-m-l {
    /* margin-left: 20px; */
  }

  .viewitem-view-heartGood {
    margin-left: 5px;
    color: #CE9898;
  }

  .viewitem-view-comment-heart {
    display: flex;
    align-items: center;
  }

  .comment-img {
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  .viewitem-view-comment-img {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }

  .viewitem-view-bottom-time {
    display: flex;
    justify-content: space-between;
  }


  .viewitem-view-horizontal {
    display: flex;
    /* justify-content: flex-end; */
    align-items: center;
    /* width: 120px;
    margin-left: 20px;
    margin-top: 10px; */
  }

  .viewitem-view-publish_time {
    /* margin-right: 80px; */
    margin-top: 15px;
  }

  .viewitem-view-objdata-latest {
    width: 80px;
  }

  .viewitem-view-new-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 30px;
    background-color: #FF0000;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
  }

  .viewitem-view-isshow {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
  }

  .viewitem-view-isshow-divbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .8rem;
    font-weight: bold;
  }

  .viewitem-view-isshow-statue-btn {
    width: 10rem;
    height: 2rem;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 1rem;
    cursor: pointer;
  }

  .viewitem-view-isshow-statue-btn-stop {
    width: 280px;
    height: 45px;
    color: #fff;
    border: 1px solid #707070;
    background: #3A3A3A;
    border-radius: 20px;
    cursor: pointer;
  }

  .viewitem-view-objdata-latest-new {
    display: flex;
    justify-content: flex-end;
    width: 80px;
    margin-top: 10px;
  }

  .viewitem-view-iszd {
    color: #333333;
  }

  .text-disabled {
    width: 280px;
    height: 45px;
    border: 1px solid #707070;
    color: #fff;
    background: #BEBEBE;
    border-radius: 20px;
  }

  /*-------------------- component  viewitem -------------------- end*/

  /*-------------------- component  heart -------------------- start*/

  .like-img {
    background-image: url('../img/like.svg');
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  .liked-img {
    background-image: url('../img/liked.svg');
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  .like-img-big {
    width: 40px;
    height: 40px;
  }

  .comment-img {
    background-image: url('../img/comment.svg');
    background-size: contain;
    width: 25px;
    height: 25px;
  }


  /*-------------------- component  heart -------------------- end*/

  /*-------------------- component  comment -------------------- start*/
  .comment-isvotecommentT {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /*-------------------- component  comment -------------------- end*/

  /*-------------------- component  showmore -------------------- start*/
  .btn-showmore-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100vw - 5rem);
    height: 64px;
    background: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
  }

  .btn-showmore-box:hover {
    background-color: #fafafa;
  }

  .down-img {
    background-image: url('../img/down.svg');
    background-size: contain;
    width: 30px;
    height: 16px;
  }

  /*-------------------- component  showmore -------------------- end*/

  /*-------------------- component  divider -------------------- start*/
  .divider-dashed {
    display: block;
    height: 1px;
    width: 100%;
    margin: 12px 0;
    border-top: 1px dashed #a8a8a8;
  }

  .divider {
    display: block;
    height: 1px;
    width: 100%;
    margin: 16px 0;
    border-top: 1px solid #707070;
  }

  /*-------------------- component  divider -------------------- end*/

  /*-------------------- component  talkAbout -------------------- start*/
  .talkAbout-iszdinput {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
  }

  .talkAbout-commentOnThisPost {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 12rem;
    border: 1px solid #707070;
    border-radius: 20px;
    padding:20px;
    box-sizing: border-box;
    font-size: 16px;
  }

  .talkAbout-inputFull {
    height: 40px;
    width: 100%;
    font-size: 16px;
    padding-left: 10px;
    margin-top: 10px;
    background-color: #F3F3F3;
    border: 1px solid #E6E6E6;
  }

  .talkAbout-span-reflectYourTypeInComments {
    padding-left: 10px;
  }

  .talkAbout-view-btn2 {
    font-size: 20px;
    width: calc(100vw - 5rem);
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    font-weight: 800;
    cursor: pointer;
  }

  .talkAbout-iszdinput2 {
    margin-bottom: 40px;
  }

  .talkAbout-dvddetail-hid {
    padding: .5rem;
    /* margin-left: -30px; */
  }

  .talkAbout-typeChild {
    border: 1px solid #2D2D2D;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
  }

  .talkAbout-avatar-imgUp {
    display: flex;
    align-items: center;
  }

  .talkAbout-avatar-img {
    background-image: url('../img/03.png');
    background-size: cover;
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  .talkAbout-user-nickname {
    margin-left: 20px;
    flex: 1;
    white-space: pre-line;
    word-break: break-all;
    word-wrap: break-word;
  }

  .talkAbout-iszd {
    color: #6b5f5f77;
  }

  .talkAbout-talkComment-div {
    margin: 5px 0 0 60px;
  }

  .talkAbout-talkComment {
    font-size: 16px;
    margin-top: 20px;
    /* width: 718px; */
    /* word-break: break-word; */
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-line;
  }

  .talkAbout-talkComment-create {
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;
  }

  .talkAbout-createTime-div {
    display: flex;
    align-items: center;
  }

  .talkAbout-createTime-span {
    white-space: nowrap;
    color: #999d9d;
  }

  .talkAbout-div-heart {
    display: flex;
    align-items: center;
    margin-left: 1.2rem;
  }

  .talkAbout-thumbCount {
    margin-left: 5px;
    color: #999d9d;
  }

  .talkAbout-span-good {
    margin-left: 5px;
    color: #CE9898;
  }

  .talkAbout-span-good2 {
    margin-left: 5px;
    color: #999d9d;
  }

  .talkAbout-flex-type {
    display: flex;
    align-items: center;
    margin-left: 30px;
  }

  .talkAbout-loginId {
    display: flex;
    margin-top: 10px;
  }

  .talkAbout-back-home {
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .talkAbout-back {
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .talkAbout-talkIsBack {
    margin-left: 10px;
    font-size: 14px;
    cursor: pointer;
  }

  .talkAbout-comment-userId {
    display: flex;
    align-items: center;
  }

  .tallAbout-typeChild {
    margin-top: 40px;
  }

  .talkAbout-showChildBtn {
    display: flex;
    justify-content: flex-end;
  }

  .talkAbout-showdownmore {
    min-width: 100px;
    height: 24px;
  }

  .talkAbout-divider {
    margin-top: 30px;
  }

  .talkAbout-showmore {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }

  .edit-img {
    background-image: url('../img/edit.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .delete-img {
    background-image: url('../img/delete.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .back-img {
    background-image: url('../img/back.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .cancel-img {
    background-image: url('../img/cancel.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .talkAbout-view-btnDiv {
    text-align: center;
  }


  /*-------------------- component  talkAbout -------------------- end*/

  /*-------------------- component  talkheader -------------------- start*/
  .talkheader-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .talkheader-istwitter {
    display: flex;
    /* align-items: center; */
    width: 100%;
    height: 2rem;
    margin: auto;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
  }

  .talkheader-vertical {
    /* margin-bottom: 80px; */
  }

  .talkheader-publicize {
    font-size: 1rem;
    font-weight: bold;
  }

  .talkheader-isbig {
    margin-left: 50px;
  }

  .talkheader-isbig-text {
    font-size: 18px;
    display: flex;
    align-items: center;
  }

  .talkheader-good-thumbup {
    margin-left: 5px;
    color: #999d9d;
  }

  .talkheader-good-thumbup-s {
    margin-left: 5px;
    color: #CE9898;
  }

  .talkheader-directions-istwitter {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 30px;
  }

  .talkheader-istwitter-text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 246px;
    height: 47px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    opacity: 1;
    margin-bottom: 20px;
    position: relative;
  }

  .san-triangle {
    position: absolute;
    z-index: 100;
    left: 119px;
    top: 40px;
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
    background: #fff;
  }

  .ts-triangle {
    position: absolute;
    z-index: 100;
    left: 120px;
    top: 42px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: black;
  }

  .talkheader-border-isteitter {
    text-align: left;
    font: normal normal bold 20px/25px "Noto Sans JP";
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
  }

  .talkheader-bird {
    display: flex;
    justify-content: center;
    width: 283px;
    height: 59px;
    background: #1D9BF0 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
    margin-bottom: 50px;
    text-align: center;
    cursor: pointer;
  }

  .talkheader-bird-img {
    width: 35px;
    margin-top: 10;
  }

  .talkheader-bird-commenttitle {
    width: 100%;
    font-size: 1rem;
    margin-bottom: 20px;
    font-weight: 600;
  }

  .talkheader-Preferential {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 900px;
    height: 189px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 20px;
    opacity: 1;
    margin-bottom: 40px;
  }

  .talkheader-btn-text {
    margin-top: 20px;
    font-size: 16px;
  }

  .talkheader-talkheaderinfo {
    margin-top: 20px;
  }

  .talkheader-talkheaderinfo-input {
    width: 800px;
    height: 40px;
    border: 1px solid #E6E6E6;
    background: #F3F3F3 0% 0% no-repeat padding-box;
    padding-left: 10px;
    border-radius: 2px;
    font-size: 18px;
  }

  .talkheader-sou-btn-title {
    margin-top: 20px;
    line-height: 45px;
    font-size: 20px;
    font-weight: 800;
    width: 300px;
    height: 45px;
    background: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 30px;
    cursor: pointer;
  }

  .talkheader-comment-title {
    width: 526px;
    height: 40px;
    margin: auto;
    margin-bottom: 20px;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  /*-------------------- component  talkheader -------------------- end*/

  /*-------------------- component  commentsubmission -------------------- start*/
  .commentsubmission-bodyDiv {
    display: flex;
    justify-content: center;
  }

  .commentsubmission-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 900px;
    min-height: 189px;
    border-radius: 20;
    border: 1px solid #707070;
    padding: 20px 50px;
    font-size: 16px;
    box-sizing: border-box;
  }

  .commentsubmission-input {
    width: 100%;
    height: 40px;
    font-size: 16px;
    margin-top: 10px;
    background-color: #F3F3F3;
    border: none;
    padding-left: 10px;
  }

  .commentsubmission-div-btn {
    text-align: center;
    margin-top: 20px;
  }

  .commentsubmission-btn {
    width: 300px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    font-size: 20px;
    font-weight: 800;
  }

  /*-------------------- component  commentsubmission -------------------- end*/

  /*-------------------- component  comment -------------------- start*/
  .comment-type {
    font-size: 16px;
  }

  .comment-type2 {
    font-size: 14px;
    color: #949494;
  }

  .textareaaa {
    width: 100%;
    height: 1.3rem;
    font-size: 16px;
    max-height: 300px;
    border: 1px solid #E6E6E6;
    border-radius: 2px;
    background: #F3F3F3;
    padding: 8px 10px 0 10px;
    /* box-sizing: border-box; */
  }

  .comment-textarea1 {
    margin-top: 20px;
    width: 800px;
  }

  .comment-textarea2 {
    margin-top: 10px;
    width: 9rem;
  }

  .comment-isvotecomment {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .8rem;
    margin-left: 10px;
    width: 70vw!important;
    height: 1.4rem;
    background: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
  }

  .comment-isvotecommentdisab {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin-left: 10px;
    width: 70vw!important;
    height: 45px;
    background-color: #BEBEBE;
    color: #fff;
    border: 1px solid #707070;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
  }

  .comment-isvotecommentTrue {
    width: 300px;
  }

  .comment-isvotecommentTrue-center {
    margin-top: 20px;
  }

  .comment-isvotecommentTrueq {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*-------------------- component  comment -------------------- end*/

  /*-------------------- component  showdownmore -------------------- start*/
  .showdownmore-toggleText {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #333;
    align-items: center;
  }

  .down-img-2 {
    background-image: url('../img/down.svg');
    background-size: contain;
    width: 24px;
    height: 12px;
  }

  .showdownmore-text {
    margin-left: 12px;
  }

  /*-------------------- component  showdownmore -------------------- end*/

  /* ------------------------------------------------------------------------------------------------------------------------ */














  /* -------------------- answer -------------------- start */
  .charactersOption_headerBox {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px auto 0;
  }

  .charactersOption_rotationChart {
    /* width: 600px; */
    /* height: 400px; */
  }

  .charactersOption_headerTitle {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 700;
  }

  .charactersOption_formState {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
  }

  .charactersOption_viewStatusBox {
    padding: 5px 15px;
    color: #fff;
    background-color: #656565;
    font-size: 16px;
    width: fit-content;
  }

  .charactersOption_stateTime {
    font-size: 16px;
    font-weight: 700;
    color: #59A5CC;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .charactersOption_stateTimeTitle {
    margin-left: 5px;
  }

  .charactersOption_endOfState {
    font-size: 16px;
    color: #EF083F;
    font-weight: 700;
    margin-left: 5px;
    display: flex;
    align-items: center;
  }

  .charactersOption_stateText {
    margin-top: 10px;
    font-size: 16px;
    white-space: pre-line;
  }

  .charactersOption_information {
    margin-top: 10px;
    display: flex;
  }

  .charactersOption_layout {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .charactersOption_layoutHeart {
    display: flex;
    align-items: center;
  }

  .charactersOption_layoutHeart .span1 {
    color: #999d9d;
    margin-left: 5px;
  }

  .charactersOption_layoutHeart .span2 {
    color: #CE9898;
    margin-left: 5px;
  }

  .charactersOption_countNum {
    color: #999d9d;
    margin-left: 5px;
  }

  .charactersOption_goodNum {
    color: #CE9898;
    margin-left: 5px;
  }

  .charactersOption_kommento {
    margin-left: 20px;
    display: flex;
    align-items: center;
  }

  .charactersOption_commentImg {
    background-image: url('../img/comment.svg');
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  .charactersOption_commentCount {
    color: #999d9d;
    margin-left: 5px;
  }

  .charactersOption_releaseDate {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .charactersOption_newBox {
    width: 80px;
    display: flex;
    justify-content: flex-end;
  }

  .charactersOption_New {
    width: 50px;
    height: 30px;
    background-color: #FF0000;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .charactersOption_question {
    /* margin-top: 65px; */
    width: 100%;
    margin: 65px auto 0;
  }

  /* -------------------- answer -------------------- end */





  /* -------------------- diagnosticList -------------------- start */

  .diagnosticList_tagbtn {
    margin-top: 1.4rem;
    /* padding-left: 0.2rem; */
    display: flex;
    justify-content: flex-end;
  }

  .diagnosticList_viewitem {
    margin-top: 30px;
  }

  .diagnosticList_showmore {
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }



  /* -------------------- diagnosticList -------------------- end */





  /* -------------------- diagnosticResults -------------------- start */

  .diagnosticResults_yourresults {
    margin-top: 50px;
  }

  .diagnosticResults_diagnosisTypeDescription {
    /* margin-top: 60px;
    margin-bottom: 80px; */
    width: 100%;
    margin: 1rem auto 5rem;
  }

  .diagnosticResults_sataus:not(:first-child) {
    margin-top: 25px;
  }

  .diagnosticResults_layout {
    display: flex;
    align-items: center;
  }

  .diagnosticResults_diagnosisTypeDescriptionItemTitle {
    font-size: 24px;
    margin-left: 15px;
  }

  .diagnosticResults_diagnosisTypeDescriptionItemContent {
    margin-top: 15px;
    font-size: 16px;
  }

  .diagnosticResults_talkAbout {
    margin-top: 40px;
  }

  .diagnosticResults_viewItemMain {
    margin-top: 80px;
  }

  .diagnosticResults_viewItemTitle {
    text-align: center;
  }

  .diagnosticResults_viewItem {
    margin-top: 30px;
  }

  /* -------------------- diagnosticResults -------------------- end */





  /* -------------------- diagnosticType -------------------- start */
  /* Top Type */
  .diagnosticType_TopBox {
    /* height: 462px; */
    /* background-color: #F9F9F9; */
    /* margin-top: 100px; */
    /* display: flex; */
    /* justify-content: center;
    align-items: center; */
    width: 100%;
    margin: 0 auto 2rem;
  }

  .diagnosticType_TopBoxBoxMain {
    background-color: #F9F9F9;
    display: flex;
    justify-content: center;
    padding: 38px 0;
  }

  .diagnosticType_TopBoxBox {
    width: 100%;
    min-height: 13rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .diagnosticType_TopBoxPic {
    width: 100%;
    margin: 0 auto;
  }

  .diagnosticType_TopBoxType {
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #707070;
    font-size: 1.5rem;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    background-color: #fff;
  }

  /* typeDescription */
  .diagnosticType_typeDescription {
    position: relative;
    width: 100%;
    margin: 2rem auto 0;
  }

  .diagnosticType_leftTop {
    position: absolute;
    left: 0;
    top: 0;
    width: 35px;
    height: 35px;
    border-left: 4px solid #000;
    border-top: 4px solid #000;
  }

  .diagnosticType_typeDescriptionTitle {
    padding: 1rem 2rem;
    font-size: 28px;
    text-align: center;
    font-weight: 800;
  }

  .diagnosticType_rightBottom {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 35px;
    height: 35px;
    border-right: 4px solid #000;
    border-bottom: 4px solid #000;
  }

  .diagnosticType_typeDescriptionContent {
    margin-top: 40px;
    font-size: 16px;
  }

  /* Besides this type... */
  .diagnosticType_otherTypes {
    margin-top: 3.5714rem;
    width: 100%;
    margin: 0 auto;
  }

  .diagnosticType_otherTypeTitle {
    background-color: #EBEAEA;
    height: 3rem;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .diagnosticType_layout {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .diagnosticType_otherTypeItem {
    width: 100%;
    /* height: 405px; */
    padding: 20px;
    border: 1px solid #707070;
    box-sizing: border-box;
    margin-top: 40px;
  }

  .diagnosticType_otherTypeItemPic {
    width: 100%;
    height: 9rem;
    background-color: #A1A1A1;
  }

  .diagnosticType_otherTypeItemTitle {
    font-size: 30px;
    margin: 10px 0;
    text-align: right;
    /* padding-right: 10px; */
    cursor: pointer;
    -webkit-user-select: none;
  }

  .diagnosticType_otherTypeItemContent-title-box {
    /* margin-right: 10px; */
    display: flex;
    justify-content: flex-end;
  }

  .diagnosticType_otherTypeItemContent-title-box-content {
    text-align: left;
    display: block;
    font-size: 1.4rem;
  }

  .diagnosticType_otherTypeItemContent-title-box-suffix {
    margin-top: -40px;
    margin-right: -20px;
  }

  .diagnosticType_otherTypeItemContent {
    font-size: 16px;
  }

  .diagnosticType_compositionRatio {
    width: 100%;
    /* min-height: 337px; */
    border: 1px solid #707070;
    padding: 1.5rem 1rem;
    text-align: center;
    box-sizing: border-box;
    margin-top: 40px;
  }

  .diagnosticType_compositionRatioTitle {
    font-size: 28px;
  }

  .diagnosticType_processStage2 {
    margin-top: 20px;
  }

  .diagnosticType_talkAbout {
    margin-top: 40px;
  }

  .diagnosticType_viewItemMain {
    margin-top: 80px;
  }

  .diagnosticType_viewItemTitle {
    text-align: center;
  }

  .diagnosticType_viewItem {
    margin-top: 30px;
  }

  /* -------------------- diagnosticType -------------------- end */




}

/* pc */
@media (min-width: 640px) {
  /* -------------------- component radioQuestionnaire -------------------- start */

  .radioQuestionnaire_questionnaireBox {
    background-color: #F9F9F9;
    /* padding: 30px; */
    padding: 50px 37px;
  }

  .radioQuestionnaire_problemIndex {
    color: #FF0000;
    font-size: 20px;
    font-weight: 700;
  }

  .radioQuestionnaire_questionTitle {
    font-size: 16px;
    margin-top: 10px;
  }

  .radioQuestionnaire_radioQuestionImg {
    width: 266px;
    height: 100px;
    margin: 10px 0;
    object-fit: contain;
  }

  .radioQuestionnaire_questionnaireTrapezoid {
    width: 105px;
    height: 0;
    border-bottom: 30px solid #D4DEFF;
    border-left: 0px solid transparent;
    border-right: 30px solid transparent;
    font-size: 14px;
    margin-top: 10px;
    padding-left: 30px;
  }

  .radioQuestionnaire_questionnaireDes {
    padding-top: 5px;
    width: 140px;
    height: 20px;
    position: relative;
    left: -15px;
    margin-right: 20px;
  }

  .radioQuestionnaire_optionModule {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
  }

  .radioQuestionnaire_optionItem {
    margin-top: 20px;
    margin-right: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .radioQuestionnaire_questionnaireItemBoxSelected {
    width: 180px;
    min-width: 180px;
    height: 50px;
    background-color: #707070;
    color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
  }

  .radioQuestionnaire_questionnaireItemBox {
    width: 180px;
    min-width: 180px;
    height: 50px;
    background-color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
  }

  .radioQuestionnaire_optionModule2 {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
  }

  .radioQuestionnaire_optionItem2 {
    width: 180px;
    /* height: 120px; */
    margin-top: 20px;
    margin-right: 40px;
    cursor: pointer;
  }

  .radioQuestionnaire_optionImgBox {
    height: 80px;
  }

  .radioQuestionnaire_optionImg {
    height: 80px;
  }

  .radioQuestionnaire_layout {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .radioQuestionnaire_questionnaireItemBoxSelected2 {
    width: 180px;
    height: 50px;
    background-color: #707070;
    color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    padding: 10px;
    box-sizing: border-box;
  }

  .radioQuestionnaire_questionnaireItemBox2 {
    width: 180px;
    min-width: 180px;
    height: 50px;
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
  }

  .radioQuestionnaire_bottomDashedBorder {
    border-bottom: 1px dashed #333;
    margin: 40px 0 40px 0;
  }

  .radioQuestionnaire_viewResults {
    text-align: center;
  }

  .radioQuestionnaire_viewResultsButton {
    width: 300px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 800;
  }

  /* progressBar */
  .radioQuestionnaire_progressBarBox {
    height: 30px;
    /* width: 900px; */
    margin-top: 30px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-around;

  }


  .radioQuestionnaire_progressBarItem {
    min-width: 750px;
  }

  .radioQuestionnaire_progressBarMain {
    height: 40px;
    display: flex;
  }

  .radioQuestionnaire_progressBarMainTrends {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
  }

  .radioQuestionnaire_progressBarColor {
    /* height: 30px; */
    background-color: #ffcbcb;
    /* width: 750px; */
  }

  .radioQuestionnaire_progressBarColorTrends {
    border: 1px solid #707070;
  }

  .radioQuestionnaire_progressBarText {
    padding-left: 20px;
    height: 30px;
    line-height: 40px;
    font-size: 15px;

  }

  /* Show more Button */
  .radioQuestionnaire_ButtonMainBox {
    margin-top: 40px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }

  /* Button after progress ends */
  .radioQuestionnaire_progressBarButtonBox {
    /* text-align: center; */
    /* padding: 40px 0 50px 0; */
    padding-top: 40px;
  }


  .radioQuestionnaire_lookresultBox {
    padding-top: 40px;
    display: flex;
    justify-content: center;
  }

  .radioQuestionnaire_progressBarButton {
    width: 300px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 800;
  }

  /* mask */
  .radioQuestionnaire_mask {
    display: none;
    width: 1100px;
    height: 800px;
    overflow: hidden;
    background-color: #fff;
  }

  .radioQuestionnaire_imgProportionalScaling {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* -------------------- component radioQuestionnaire -------------------- end */


  /*-------------------- component  carousel -------------------- start*/
  .flexslider {
    position: relative;
    height: 400px;
    overflow: hidden;
    background-color: #fff;
  }

  .flexslider2 {
    position: relative;
    height: 300px;
    overflow: hidden;
    background-color: #fff;
  }

  .ver-align {
    vertical-align: top;
  }

  .slides {
    position: relative;
    z-index: 1;
  }

  .slides li {
    height: 400px;
  }

  .slides .li2 {
    height: 300px;
  }

  .flex-control-nav {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  .flex-control-nav li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    display: inline;
    zoom: 1;
  }

  .flex-control-nav a {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 40px;
    overflow: hidden;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/dot.png) right 0 no-repeat;
    cursor: pointer;
  }

  .flex-control-nav .flex-active {
    background-position: 0 0;
  }

  .flex-direction-nav {
    position: absolute;
    z-index: 3;
    width: 100%;
    top: 45%;
  }

  .flex-direction-nav li a {
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
  }

  .flex-direction-nav li a.flex-prev {
    left: 40px;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/prev.png) center center no-repeat;
  }

  .flex-direction-nav li a.flex-next {
    right: 40px;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/next.png) center center no-repeat;
  }


  .flex-control-nav {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  .flex-control-nav li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    display: inline;
    zoom: 1;
  }

  .flex-control-nav a {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 40px;
    overflow: hidden;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/dot.png) right 0 no-repeat;
    cursor: pointer;
  }

  .flex-control-nav .flex-active {
    background-position: 0 0;
  }

  /*-------------------- component  carousel -------------------- end*/





  /* -------------------- component viewingdiagnosticresults -------------------- start */

  .viewingdiagnosticresults_mainBox {
    background-color: #F9F9F9;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  .viewingdiagnosticresults_inputBox {
    width: 900px;
    /* height: 282px; */
    border-radius: 20px;
    background-color: #fff;
    padding: 30px 50px;
    box-sizing: border-box;
    font-size: 16px;
  }

  .viewingdiagnosticresults_title {
    text-align: center;
    font-weight: 800;
    margin: 0;
  }

  .viewingdiagnosticresults_box1 {
    margin-top: 20px;
    font-weight: 800;
  }

  .viewingdiagnosticresults_box1Require {
    color: #FF0000;
  }

  .viewingdiagnosticresults_input {
    height: 40px;
    width: 100%;
    background-color: #F3F3F3;
    font-size: 16px;
    padding-left: 10px;
    margin-top: 10px;
    border: 1px solid #e6e6e6;
  }

  .viewingdiagnosticresults_box2 {
    margin-top: 20px;
    font-weight: 800;
  }

  .viewingdiagnosticresults_input2 {
    height: 40px;
    width: 100%;
    background-color: #F3F3F3;
    font-size: 16px;
    padding-left: 10px;
    margin-top: 10px;
    border: 1px solid #e6e6e6;
  }

  .viewingdiagnosticresults_viewResultsBox {
    padding: 40px 0 0 0;
    text-align: center;
  }

  .viewingdiagnosticresults_viewResultsButton {
    width: 300px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    color: #000;
    border-radius: 20px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 800;
  }

  .viewingdiagnosticresults_lookresult {
    width: 300px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    color: #000;
    border-radius: 20px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .viewingdiagnosticresults_disabledButton {
    width: 300px;
    height: 45px;
    border: 1px solid #707070;
    color: #fff;
    background: #BEBEBE;
    border-radius: 20px;
    cursor: pointer;
  }

  /* -------------------- component viewingdiagnosticresults -------------------- end */





  /* -------------------- component yourresults -------------------- end */
  .yourresults_mainBox {
    /* height: 470px; */
    box-shadow: 0px 6px 12px #00000029;
    border-radius: 50px;
    padding: 40px 73px;
    box-sizing: border-box;
    flex-wrap: wrap;
    margin-top: 20px;
  }

  .yourresults_title {
    text-align: center;
    margin: 0;
    font-size: 24px;
  }

  .yourresults_progressBar {
    /* height: 355px; */
    width: 814px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-around;
  }

  .yourresults_progressBarItem {
    width: 750px;
    margin-top: 20px;
  }

  .yourresults_progressBarItemType {
    font-size: 20px;
    font-weight: 800;
    display: inline-block;
    margin-bottom: 8px;
  }

  .yourresults_progressBarMain {
    height: 30px;
    display: flex;
  }

  .yourresults_progressBarMainTrends {
    border: 1px solid #707070;
  }

  .yourresults_progressBarMainTrends2 {
    width: 814px;
  }

  .yourresults_progressBarColor {
    height: 30px;
    background-color: #FF9898;
    width: 750px;
  }

  .yourresults_progressBarColorTrends {
    border: 1px solid #707070;
  }

  .yourresults_progressBarText {
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    font-weight: 800;
  }

  .yourresults_progressBarTextTrends {
    position: relative;
    right: 0;
  }

  /* -------------------- component yourresults -------------------- end */





  /* -------------------- component processStage2 -------------------- start */

  .processStage2_count {
    color: #999d9d;
  }

  .processStage2_title {
    color: #999d9d;
  }

  .processStage2_degreeRatio {
    color: #fff;
    font-size: 24px;
    display: flex;
  }

  .processStage2_degreeRatioItem {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .processStage2_percentagePercentage {
    font-size: 16px;
  }

  .processStage2_arr {
    width: 890px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .processStage2_arrItem {
    width: 380px;
    /* height: 30px; */
    margin-bottom: 15px;
    font-size: 20px;
    padding-right: 30px;
    display: flex;
    align-items: center;
  }

  .processStage2_arrItemsquare {
    width: 30px;
    height: 30px;
  }

  .processStage2_arrItemList {
    margin-left: 10px;
  }

  .processStage2_arrItemList2 {
    font-size: 14px;
  }

  /* -------------------- component processStage2 -------------------- end */





  /* -------------------- component mythoughts -------------------- start */

  .mythoughts_mainBox {
    /* min-height: 1025px; */
    background-color: #F9F9F9;
    /* margin-top: 100px; */
    /* padding: 50px 40px; */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .mythoughts_contentBox {
    min-height: 108px;
    border-bottom: 2px dashed #707070;
    display: flex;
    justify-content: center;
    /* flex-wrap: wrap; */
    /* align-content: space-between; */
    /* padding-bottom: 20px; */
    padding: 0px 80px 20px 50px;
    flex-direction: column;

  }

  .mythoughts_exclude:not(:first-child) {
    margin-top: 33px;
  }

  .mythoughts_listItemIndex {
    color: #F52222;
    font-size: 20px;
    font-weight: 800;
  }

  .mythoughts_listItemText {
    margin-left: 30px;
    font-size: 16px;
  }

  .questionStyle {
    padding-left: 29px;
    /* margin-top: 30px; */
  }

  .mythoughts_listItemLayout {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mythoughts_listItemContent {
    color: #00BC0D;
    font-size: 18px;
    margin-right: 40px;
    width: 110px;
    text-align: right;
    font-weight: 800;
  }

  .mythoughts_listUl {
    width: 400px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .mythoughts_listItemLi {
    cursor: pointer;
  }

  .mythoughts_listItemContent2 {
    color: #2A6FE6;
    font-size: 18px;
    margin-left: 40px;
    font-weight: 800;
  }

  .mythoughts_buttonBox {
    text-align: center;
    margin-top: 50px;
  }

  .mythoughts_button {
    width: 300px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
  }

  .border-00BC0D-green-bbig-kx {
    width: 60px;
    height: 60px;
    border: 3px solid #00BC0D;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .border-00BC0D-green-bbig-st {
    width: 60px;
    height: 60px;
    background-color: #00BC0D;
    border-radius: 50%;
  }

  .border-00BC0D-green-big-kx {
    width: 50px;
    height: 50px;
    border: 3px solid #00BC0D;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .border-00BC0D-green-big-st {
    width: 50px;
    height: 50px;
    background-color: #00BC0D;
    border-radius: 50%;
  }

  .border-00BC0D-green-small-kx {
    width: 40px;
    height: 40px;
    border: 3px solid #00BC0D;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .border-00BC0D-green-small-st {
    width: 40px;
    height: 40px;
    background-color: #00BC0D;
    border-radius: 50%;
  }

  .border-707070-grey-s-kx {
    width: 30px;
    height: 30px;
    border: 3px solid #707070;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .border-707070-grey-s-st {
    width: 30px;
    height: 30px;
    background-color: #707070;
    border-radius: 50%;
  }

  .border-2A6FE6-blue-bbig-kx {
    width: 60px;
    height: 60px;
    border: 3px solid #2A6FE6;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .border-2A6FE6-blue-bbig-st {
    width: 60px;
    height: 60px;
    background-color: #2A6FE6;
    border-radius: 50%;
  }

  .border-2A6FE6-blue-big-kx {
    width: 50px;
    height: 50px;
    border: 3px solid #2A6FE6;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .border-2A6FE6-blue-big-st {
    width: 50px;
    height: 50px;
    background-color: #2A6FE6;
    border-radius: 50%;
  }

  .border-2A6FE6-blue-small-kx {
    width: 40px;
    height: 40px;
    border: 3px solid #2A6FE6;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .border-2A6FE6-blue-small-st {
    width: 40px;
    height: 40px;
    background-color: #2A6FE6;
    border-radius: 50%;
  }

  /* -------------------- component mythoughts -------------------- end */





  /*-------------------- component tagbtn -------------------- start*/
  .tagbtn-btn {
    width: 150px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tagbtn-btn-active {
    color: #fff;
    background-color: #5A5A5A;
    border-radius: 20px;
  }

  /*-------------------- component  tagbtn -------------------- end*/

  /*-------------------- component viewitem -------------------- start*/
  .viewitem-view-box {
    padding: 20px;
    margin-bottom: 40px;
  }

  .viewitem-view-box-FF {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 4px 12px #00000029;
    opacity: 1;
  }

  .viewitem-view-body {
    display: flex;
  }

  .viewitem-view-box-F2 {
    background-color: #F2F2F2;
  }

  .viewitem-view-flex-w-h {
    width: 300px;
    height: 200px;
  }

  .viewitem-view-img-view {
    width: 290px;
    height: 200px;
    background-size: contain;
  }

  .viewitem-view-title {
    flex: 1;
    padding-left: 30px;
  }

  .viewitem-view-status-boxDiv {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }

  .viewitem-view-title-div {
    font-size: 22px;
    font-weight: bold;
  }

  .viewitem-view-status-box {
    color: #fff;
    background-color: #656565;
    padding: 5px 8px;
    font-size: 16px;
  }

  .viewitem-view-status-box-div {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-left: 10px;
    font-weight: bold;
    color: #59A5CC;
  }

  .viewitem-view-status-box-lastdiv {
    color: #FF0000;
    font-weight: bold;
    font-size: 16px;
    margin-left: 12px;
  }

  .viewitem-view-description {
    width: 590px;
    height: 40px;
    line-height: 20px;
    font-family: 'Noto Sans';
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .viewitem-view-heartFlex {
    display: flex;
    flex: 1;
    align-items: center;
    margin-top: 10px;
  }

  .viewitem-view-heartFlex-div {
    display: flex;
    flex: 1;
    align-items: center;
  }

  .viewitem-view-textHeart {
    margin-left: 5px;
    color: #59A5CC;
  }

  .viewitem-view-heart {
    margin-left: 5px;
  }

  .viewitem-view-heart-m-l {
    /* margin-left: 20px; */
  }

  .viewitem-view-heartGood {
    margin-left: 5px;
    color: #CE9898;
  }

  .viewitem-view-comment-heart {
    display: flex;
    align-items: center;
  }

  .comment-img {
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  .viewitem-view-comment-img {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }

  .viewitem-view-horizontal {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 120px;
    margin-left: 20px;
    margin-top: 10px;
  }

  .viewitem-view-publish_time {
    margin-right: 80px;
    margin-top: 15px;
  }

  .viewitem-view-objdata-latest {
    width: 80px;
  }

  .viewitem-view-new-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 30px;
    background-color: #FF0000;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
  }

  .viewitem-view-isshow {
    margin-top: 20px;
  }

  .viewitem-view-isshow-divbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 320px;
    font-size: 18px;
    font-weight: bold;
  }

  .viewitem-view-isshow-statue-btn {
    width: 280px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    cursor: pointer;
  }

  .viewitem-view-isshow-statue-btnkjs {
    width: 280px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    cursor: pointer;
  }

  .viewitem-view-isshow-statue-btnkcd {
    width: 280px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    cursor: pointer;
  }

  .viewitem-view-isshow-statue-btn-stop {
    width: 280px;
    height: 45px;
    color: #fff;
    border: 1px solid #707070;
    background: #3A3A3A;
    border-radius: 20px;
    cursor: pointer;
  }

  .viewitem-view-objdata-latest-new {
    display: flex;
    justify-content: flex-end;
    width: 80px;
    margin-top: 10px;
  }

  .viewitem-view-iszd {
    color: #333333;
  }

  .text-disabled {
    width: 280px;
    height: 45px;
    border: 1px solid #707070;
    color: #fff;
    background: #BEBEBE;
    border-radius: 20px;
  }

  .text-disabled0 {
    width: 280px;
    height: 45px;
    border: 1px solid #707070;
    color: #fff;
    background: #BEBEBE;
    border-radius: 20px;
    cursor: pointer;
  }


  /*-------------------- component  viewitem -------------------- end*/

  /*-------------------- component  heart -------------------- start*/

  .like-img {
    background-image: url('../img/like.svg');
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  .liked-img {
    background-image: url('../img/liked.svg');
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  .like-img-big {
    width: 40px;
    height: 40px;
  }

  .comment-img {
    background-image: url('../img/comment.svg');
    background-size: contain;
    width: 25px;
    height: 25px;
  }


  /*-------------------- component  heart -------------------- end*/

  /*-------------------- component  comment -------------------- start*/
  .comment-isvotecommentT {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /*-------------------- component  comment -------------------- end*/

  /*-------------------- component  showmore -------------------- start*/
  .btn-showmore-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 450px;
    height: 64px;
    background: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
  }

  .btn-showmore-box:hover {
    background-color: #fafafa;
  }

  .down-img {
    background-image: url('../img/down.svg');
    background-size: contain;
    width: 30px;
    height: 16px;
  }

  /*-------------------- component  showmore -------------------- end*/

  /*-------------------- component  divider -------------------- start*/
  .divider-dashed {
    display: block;
    height: 1px;
    width: 100%;
    margin: 12px 0;
    border-top: 1px dashed #a8a8a8;
  }

  .divider {
    display: block;
    height: 1px;
    width: 100%;
    margin: 16px 0;
    border-top: 1px solid #707070;
  }

  /*-------------------- component  divider -------------------- end*/

  /*-------------------- component  talkAbout -------------------- start*/
  .talkAbout-iszdinput {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
  }

  .talkAbout-commentOnThisPost {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 900px;
    height: 233px;
    border: 1px solid #707070;
    border-radius: 20px;
    padding: 20px 50px;
    box-sizing: border-box;
    font-size: 16px;
  }

  .talkAbout-inputFull {
    height: 40px;
    width: 100%;
    font-size: 16px;
    padding-left: 10px;
    margin-top: 10px;
    background-color: #F3F3F3;
    border: 1px solid #E6E6E6;
  }

  .talkAbout-span-reflectYourTypeInComments {
    padding-left: 10px;
  }

  .talkAbout-view-btn2 {
    font-size: 20px;
    width: 300px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    font-weight: 800;
    cursor: pointer;
  }

  .talkAbout-iszdinput2 {
    margin-bottom: 40px;
  }

  .talkAbout-dvddetail-hid {
    padding: 30px;
    /* margin-left: -30px; */
  }

  .talkAbout-typeChild {
    border: 1px solid #2D2D2D;
    box-sizing: border-box;
  }

  .talkAbout-avatar-imgUp {
    display: flex;
    align-items: center;
  }

  .talkAbout-avatar-img {
    background-image: url('../img/03.png');
    background-size: cover;
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  .talkAbout-user-nickname {
    margin-left: 20px;
    white-space: pre-line;
    word-break: break-all;
    word-wrap: break-word;
    flex: 1;
  }

  .talkAbout-iszd {
    color: #6b5f5f77;
  }

  .talkAbout-talkComment-div {
    margin: 5px 0 0 60px;
  }

  .talkAbout-talkComment {
    font-size: 16px;
    margin-top: 20px;
    /* width: 718px; */
    /* word-break: break-word; */
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-line;
  }

  .talkAbout-talkComment-create {
    display: flex;
    margin-top: 10px;
  }

  .talkAbout-createTime-div {
    display: flex;
    align-items: center;
  }

  .talkAbout-createTime-span {
    white-space: nowrap;
    color: #999d9d;
  }

  .talkAbout-div-heart {
    display: flex;
    align-items: center;
    margin-left: 30px;
  }

  .talkAbout-thumbCount {
    margin-left: 5px;
    color: #999d9d;
  }

  .talkAbout-span-good {
    margin-left: 5px;
    color: #CE9898;
  }

  .talkAbout-span-good2 {
    margin-left: 5px;
    color: #999d9d;
  }

  .talkAbout-flex-type {
    display: flex;
    align-items: center;
    margin-left: 30px;
  }

  .talkAbout-loginId {
    display: flex;
    margin-top: 10px;
  }

  .talkAbout-back-home {
    display: flex;
    align-items: center;
  }

  .talkAbout-back {
    display: flex;
    align-items: center;
    margin-left: 30px;
  }

  .talkAbout-talkIsBack {
    margin-left: 10px;
    font-size: 14px;
  }

  .talkAbout-comment-userId {
    display: flex;
    align-items: center;
  }

  .tallAbout-typeChild {
    margin-top: 40px;
  }

  .talkAbout-showChildBtn {
    display: flex;
    justify-content: flex-end;
  }

  .talkAbout-showdownmore {
    min-width: 100px;
    height: 24px;
  }

  .talkAbout-divider {
    margin-top: 30px;
  }

  .talkAbout-showmore {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }

  .edit-img {
    background-image: url('../img/edit.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .delete-img {
    background-image: url('../img/delete.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .back-img {
    background-image: url('../img/back.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .cancel-img {
    background-image: url('../img/cancel.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .talkAbout-view-btnDiv {
    text-align: center;
  }


  /*-------------------- component  talkAbout -------------------- end*/

  /*-------------------- component  talkheader -------------------- start*/
  .talkheader-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .talkheader-istwitter {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 526px;
    height: 40px;
    margin: auto;
  }

  .talkheader-vertical {
    /* margin-bottom: 80px; */
  }

  .talkheader-publicize {
    font-size: 24px;
    font-weight: bold;
  }

  .talkheader-isbig {
    margin-left: 50px;
  }

  .talkheader-isbig-text {
    font-size: 18px;
    display: flex;
    align-items: center;
  }

  .talkheader-good-thumbup {
    margin-left: 5px;
    color: #999d9d;
  }

  .talkheader-good-thumbup-s {
    margin-left: 5px;
    color: #CE9898;
  }

  .talkheader-directions-istwitter {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 30px;
  }

  .talkheader-istwitter-text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 246px;
    height: 47px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    opacity: 1;
    margin-bottom: 20px;
    position: relative;
  }

  .san-triangle {
    position: absolute;
    z-index: 100;
    left: 119px;
    top: 40px;
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
    background: #fff;
  }

  .ts-triangle {
    position: absolute;
    z-index: 100;
    left: 120px;
    top: 42px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: black;
  }

  .talkheader-border-isteitter {
    text-align: left;
    font: normal normal bold 20px/25px "Noto Sans JP";
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
  }

  .talkheader-bird {
    display: flex;
    justify-content: center;
    width: 283px;
    height: 59px;
    background: #1D9BF0 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
    margin-bottom: 50px;
    text-align: center;
    cursor: pointer;
  }

  .talkheader-bird-img {
    width: 35px;
    margin-top: 10;
  }

  .talkheader-bird-commenttitle {
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: 600;
    margin-top: 30;
  }

  .talkheader-Preferential {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 900px;
    height: 189px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 20px;
    opacity: 1;
    margin-bottom: 40px;
  }

  .talkheader-btn-text {
    margin-top: 20px;
    font-size: 16px;
  }

  .talkheader-talkheaderinfo {
    margin-top: 20px;
    width: calc(960px - 180px);
  }

  .talkheader-talkheaderinfo-input {
    width: 800px;
    height: 40px;
    border: 1px solid #E6E6E6;
    background: #F3F3F3 0% 0% no-repeat padding-box;
    padding-left: 10px;
    border-radius: 2px;
    font-size: 18px;
  }

  .talkheader-sou-btn-title {
    margin-top: 20px;
    line-height: 45px;
    font-size: 20px;
    font-weight: 800;
    width: 300px;
    height: 45px;
    background: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 30px;
    cursor: pointer;
  }

  .talkheader-comment-title {
    width: 526px;
    height: 40px;
    margin: auto;
    margin-bottom: 20px;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  /*-------------------- component  talkheader -------------------- end*/

  /*-------------------- component  commentsubmission -------------------- start*/
  .commentsubmission-bodyDiv {
    display: flex;
    justify-content: center;
  }

  .commentsubmission-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 900px;
    min-height: 189px;
    border-radius: 20;
    border: 1px solid #707070;
    padding: 20px 50px;
    font-size: 16px;
    box-sizing: border-box;
  }

  .commentsubmission-input {
    width: 100%;
    height: 40px;
    font-size: 16px;
    margin-top: 10px;
    background-color: #F3F3F3;
    border: none;
    padding-left: 10px;
  }

  .commentsubmission-div-btn {
    text-align: center;
    margin-top: 20px;
  }

  .commentsubmission-btn {
    width: 300px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    font-size: 20px;
    font-weight: 800;
  }

  /*-------------------- component  commentsubmission -------------------- end*/

  /*-------------------- component  comment -------------------- start*/
  .comment-type {
    font-size: 16px;
  }

  .comment-type2 {
    font-size: 14px;
    color: #949494;
  }

  .textareaaa {
    width: 650px;
    height: 30px;
    font-size: 16px;
    max-height: 300px;
    border: 1px solid #E6E6E6;
    border-radius: 2px;
    background: #F3F3F3;
    padding: 8px 10px 0 10px;
    /* box-sizing: border-box; */
  }

  .comment-textarea1 {
    margin-top: 20px;
    width: 800px;
  }

  .comment-textarea2 {
    margin-top: 10px;
    width: 650px;
  }

  .comment-isvotecomment {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin-left: 10px;
    width: 160px;
    height: 45px;
    background: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
  }

  .comment-isvotecommentdisab {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin-left: 10px;
    width: 160px;
    height: 45px;
    background-color: #BEBEBE;
    color: #fff;
    border: 1px solid #707070;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
  }

  .comment-isvotecommentTrue {
    width: 300px;
  }

  .comment-isvotecommentTrue-center {
    margin-top: 20px;
  }

  .comment-isvotecommentTrueq {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*-------------------- component  comment -------------------- end*/

  /*-------------------- component  showdownmore -------------------- start*/
  .showdownmore-toggleText {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #333;
    align-items: center;
  }

  .down-img-2 {
    background-image: url('../img/down.svg');
    background-size: contain;
    width: 24px;
    height: 12px;
  }

  .showdownmore-text {
    margin-left: 12px;
  }

  /*-------------------- component  showdownmore -------------------- end*/

  /* ------------------------------------------------------------------------------------------------------------------------ */














  /* -------------------- answer -------------------- start */
  .charactersOption_headerBox {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

  .charactersOption_rotationChart {
    width: 600px;
    height: 400px;
  }

  .charactersOption_headerTitle {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 700;
    width: 600px;
  }

  .charactersOption_formState {
    margin-top: 12px;
    display: flex;
  }

  .charactersOption_viewStatusBox {
    padding: 5px 15px;
    color: #fff;
    background-color: #656565;
    font-size: 16px;
  }

  .charactersOption_stateTime {
    font-size: 16px;
    font-weight: 700;
    margin-left: 10px;
    color: #59A5CC;
    display: flex;
    align-items: center;
  }

  .charactersOption_stateTimeTitle {
    margin-left: 5px;
  }

  .charactersOption_endOfState {
    font-size: 16px;
    color: #EF083F;
    font-weight: 700;
    margin-left: 5px;
    display: flex;
    align-items: center;
  }

  .charactersOption_stateText {
    width: 600px;
    margin-top: 10px;
    font-size: 16px;
    white-space: pre-line;
  }

  .charactersOption_information {
    width: 600px;
    margin-top: 10px;
    display: flex;
  }

  .charactersOption_layout {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .charactersOption_layoutHeart {
    display: flex;
    align-items: center;
  }

  .charactersOption_layoutHeart .span1 {
    color: #999d9d;
    margin-left: 5px;
  }

  .charactersOption_layoutHeart .span2 {
    color: #CE9898;
    margin-left: 5px;
  }

  .charactersOption_countNum {
    color: #999d9d;
    margin-left: 5px;
  }

  .charactersOption_goodNum {
    color: #CE9898;
    margin-left: 5px;
  }

  .charactersOption_kommento {
    margin-left: 20px;
    display: flex;
    align-items: center;
  }

  .charactersOption_commentImg {
    background-image: url('../img/comment.svg');
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  .charactersOption_commentCount {
    color: #999d9d;
    margin-left: 5px;
  }

  .charactersOption_releaseDate {
    margin-left: 20px;
    width: 120px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .charactersOption_newBox {
    width: 80px;
    display: flex;
    justify-content: flex-end;
  }

  .charactersOption_New {
    width: 50px;
    height: 30px;
    background-color: #FF0000;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .charactersOption_question {
    margin-top: 65px;
  }

  /* -------------------- answer -------------------- end */





  /* -------------------- diagnosticList -------------------- start */

  .diagnosticList_tagbtn {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .diagnosticList_viewitem {
    margin-top: 30px;
  }

  .diagnosticList_showmore {
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }



  /* -------------------- diagnosticList -------------------- end */





  /* -------------------- diagnosticResults -------------------- start */

  .diagnosticResults_yourresults {
    margin-top: 50px;
  }

  .diagnosticResults_diagnosisTypeDescription {
    margin-top: 60px;
    margin-bottom: 80px;
  }

  .diagnosticResults_sataus:not(:first-child) {
    margin-top: 25px;
  }

  .diagnosticResults_layout {
    display: flex;
    align-items: center;
  }

  .diagnosticResults_diagnosisTypeDescriptionItemTitle {
    font-size: 24px;
    margin-left: 15px;
  }

  .diagnosticResults_diagnosisTypeDescriptionItemContent {
    margin-top: 15px;
    font-size: 16px;
  }

  .diagnosticResults_talkAbout {
    margin-top: 40px;
  }

  .diagnosticResults_viewItemMain {
    margin-top: 80px;
  }

  .diagnosticResults_viewItemTitle {
    text-align: center;
  }

  .diagnosticResults_viewItem {
    margin-top: 30px;
  }

  /* -------------------- diagnosticResults -------------------- end */





  /* -------------------- diagnosticType -------------------- start */
  /* Top Type */
  .diagnosticType_TopBox {
    /* height: 462px; */
    /* background-color: #F9F9F9; */
    margin-top: 100px;
    /* display: flex; */
    /* justify-content: center;
    align-items: center; */
  }

  .diagnosticType_TopBoxBoxMain {
    background-color: #F9F9F9;
    display: flex;
    justify-content: center;
    padding: 38px 0;
  }

  .diagnosticType_TopBoxBox {
    width: 600px;
    min-height: 386px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .diagnosticType_TopBoxPic {
    height: 300px;
    width: 100%;
    /* background-color: #A1A1A1; */
  }

  .diagnosticType_TopBoxType {
    padding: 10px 50px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #707070;
    font-size: 32px;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    background-color: #fff;
  }

  /* typeDescription */
  .diagnosticType_typeDescription {
    /* min-height: 145px; */
    position: relative;
    margin-top: 40px;
  }

  .diagnosticType_leftTop {
    position: absolute;
    left: 0;
    top: 0;
    width: 35px;
    height: 35px;
    border-left: 4px solid #000;
    border-top: 4px solid #000;
  }

  .diagnosticType_typeDescriptionTitle {
    padding: 10px 95px;
    font-size: 28px;
    text-align: center;
    font-weight: 800;
  }

  .diagnosticType_rightBottom {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 35px;
    height: 35px;
    border-right: 4px solid #000;
    border-bottom: 4px solid #000;
  }

  .diagnosticType_typeDescriptionContent {
    margin-top: 40px;
    font-size: 16px;
  }

  /* Besides this type... */
  .diagnosticType_otherTypes {
    margin-top: 80px;
  }

  .diagnosticType_otherTypeTitle {
    background-color: #EBEAEA;
    height: 80px;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .diagnosticType_layout {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .diagnosticType_otherTypeItem {
    width: 450px;
    /* height: 405px; */
    padding: 20px;
    border: 1px solid #707070;
    box-sizing: border-box;
    margin-top: 40px;
  }

  .diagnosticType_otherTypeItemPic {
    width: 410px;
    height: 205px;
    background-color: #A1A1A1;
  }

  .diagnosticType_otherTypeItemTitle {
    font-size: 30px;
    margin: 10px 0;
    text-align: right;
    /* padding-right: 10px; */
    cursor: pointer;
    -webkit-user-select: none;
  }

  .diagnosticType_otherTypeItemContent-title-box {
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
  }

  .diagnosticType_otherTypeItemContent-title-box-content {
    text-align: left;
    display: block;
  }

  .diagnosticType_otherTypeItemContent-title-box-suffix {
    margin-top: -40px;
    margin-right: -20px;
  }

  .diagnosticType_otherTypeItemContent {
    font-size: 16px;
  }

  .diagnosticType_compositionRatio {
    width: 960px;
    /* min-height: 337px; */
    border: 1px solid #707070;
    padding: 50px 35px;
    text-align: center;
    box-sizing: border-box;
    margin-top: 40px;
  }

  .diagnosticType_compositionRatioTitle {
    font-size: 28px;
  }

  .diagnosticType_processStage2 {
    margin-top: 20px;
  }

  .diagnosticType_talkAbout {
    margin-top: 40px;
  }

  .diagnosticType_viewItemMain {
    margin-top: 80px;
  }

  .diagnosticType_viewItemTitle {
    text-align: center;
  }

  .diagnosticType_viewItem {
    margin-top: 30px;
  }

  /* -------------------- diagnosticType -------------------- end */

}