@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@200;300;400;500;600;700&display=swap');

#st-pm-wrap{ font-weight:300; font-size:16px; color:#000; line-height:1.8em; width:100%; max-width: 1280px; margin:0 auto 50px; }
#st-pm-wrap a{ color:#000; }
#st-pm-wrap *{ font-family: 'Noto Sans Thai', sans-serif !important; }
#st-pm-wrap *,
#st-pm-wrap *:before,
#st-pm-wrap *:after {
    -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
     -ms-box-sizing: border-box;
        box-sizing: border-box;
}

#st-pm-wrap .flex{ 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
}
#st-pm-wrap .justify-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}
#st-pm-wrap .align-center{
  align-items: center;
}

#st-pm-wrap .text-center{ text-align:center; }
#st-pm-wrap .bg-red{ background-color:#b31c18; }
#st-pm-wrap .font-medium{ font-weight:600; }
#st-pm-wrap .text-white{ color:#fff !important; }
#st-pm-wrap .border-red{ border-color:#b31c18; } 
#st-pm-wrap .text-red{ color:#b31c18; }
#st-pm-wrap .bg-pm-red{ background-color: #f3313a !important; }
#st-pm-wrap .bg-pm-orange{ background-color:#f6a363 !important; }
#st-pm-wrap .bg-pm-yellow{ background-color:#ffc300 !important; }
#st-pm-wrap .bg-pm-green{ background-color:#00D764 !important; }

#st-pm-title{ margin:35px 0 0; padding:0; position:relative; }
#st-pm-title h2{ font-size:36px; margin:0; font-weight:600; }
#st-pm-progress-bar-wrap{ box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 6px; margin:35px auto 25px; padding:20px 2%; }
#st-pm-progress-bar{ background-color:#ededed; margin:auto; width:100%; height:12px; border-radius:10px; }
#st-pm-progress-bar .progress{ height:100%; border-radius:10px; background-color:#b31c18; transition: all 0.5s; margin-left:0; }
#st-pm-quiz-wrap{ padding:20px 2% 25px; background-color:#fdfdfd; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 6px; position:relative; }
#st-pm-quiz .pm-quiz-box{ display:none; }
#st-pm-quiz .pm-quiz-box.active{ display: -webkit-box; display: -ms-flexbox; display: flex; }
#st-pm-quiz .pm-quiz-left{ background-color:#fff; width:48%; padding:30px; border-radius:20px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; min-height:650px; position:relative; }
#st-pm-quiz .pm-quiz-right{ width:48%; }
#st-pm-quiz .pm-quiz-left h4{ font-size:32px; margin:0; color:#b31c18 !important; }
#st-pm-quiz .pm-quiz-left .desc{ line-height:1.5em; margin:15px 0 30px; }
#st-pm-quiz .pm-sub-box{ margin-top:35px; }
#st-pm-quiz .pm-sub-box h6{ margin:0 0 12px; color:#2d68ab; }
#st-risk-color-box{ gap:10px; }
#st-risk-color-box .pm-color-box{ width:25%; padding:7px 0; border-radius:10px; color:#fff; font-size:16px; text-align: center; font-weight: 500; position:relative; cursor: pointer; }
#st-risk-color-box .pm-color-box.hide{ display:none; }
#st-risk-color-box .pm-color-box-active:before{ content:''; position:absolute; right:2px; top:2px; display:block; width:20px; height:20px; border-radius:50%; background-color: #fff; }
#st-risk-color-box .pm-color-box-active:after{ content:''; position:absolute; right:9px; top:6px; display:block; width:5px; height:10px; border-bottom: 2px solid black; border-right: 2px solid black; transform: rotate(45deg);  }
#st-risk-color-box .pm-color-box-active.bg-pm-red:after{ border-bottom-color: #f3313a; border-right-color:#f3313a; }
#st-risk-color-box .pm-color-box-active.bg-pm-orange:after{ border-bottom-color: #f6a363; border-right-color:#f6a363; }
#st-risk-color-box .pm-color-box-active.bg-pm-yellow:after{ border-bottom-color: #ffc300; border-right-color:#ffc300; }
#st-risk-color-box .pm-color-box-active.bg-pm-green:after{ border-bottom-color: #00D764; border-right-color:#00D764; }

.pm-solution-box{ border-radius:10px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }
.pm-solution-box .pm-solution-head{ font-size:18px; font-weight: 500; color:#fff; padding:10px 0; cursor: pointer; position:relative; }
.pm-solution-box .pm-solution-head:after{ content:''; display:block; width:0; height:0; position:absolute; right:20px; top:50%; margin-top:-8px; border-color:#fff; border-style: solid; padding:4px; border-width: 0 2px 2px 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.pm-solution-box .pm-solution-head.pm-collapse-open:after{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin-top:-4px;  }

.pm-solution-box .pm-solution-body{ background:#fff; padding:20px; }
#pm-solution-box-1{ border:1px solid #2d68ab; }
#pm-solution-box-1 .pm-solution-head{ background-color: #2d68ab; } 
#pm-solution-box-2{ border:1px solid #b03c1b; margin:25px 0; }
#pm-solution-box-2 .pm-solution-head{ background-color: #b03c1b; } 
#pm-solution-box-3{ border:1px solid #6F8A91; }
#pm-solution-box-3 .pm-solution-head{ background-color: #6F8A91; } 
#pm-solution-note{ font-size:12px; color:#666; margin-top:25px; line-height: 1.6em; }
#st-pm-quiz .choice{ flex-wrap: wrap; }
#st-pm-quiz .select-choice{ margin-bottom:30px;  }
#st-pm-quiz .select-choice h6{ font-size:16px; margin:0 0 10px; color:#2d68ab; }
#st-pm-quiz .choice label{ border:2px solid #dcdcdc; border-radius:15px; padding:13px 20px 12px; margin:0 15px 15px 0; width:100%; display: grid; grid-template-columns: 1em auto; gap: 0.5em; align-items: center; }
#st-pm-quiz .choice input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: #dcdcdc;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid #dcdcdc;
  border-radius: 50%;
  vertical-align: middle;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  margin-right:5px;
}
#st-pm-quiz .choice input[type="radio"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #2d68ab;
}
#st-pm-quiz .choice input[type="radio"]:checked::before { transform: scale(1); }
#st-pm-quiz .choice input[type="radio"]:checked{ border-color: #2d68ab; }
#st-pm-quiz .choice label.checked{ border-color: #2d68ab; color:#2d68ab; }
#st-pm-preview img#img-desktop{ display:block; }
#st-pm-preview img#img-mobile{ display:none; }
#pm-box-button{ position:absolute; left:50px; bottom:50px; width:calc(50% - 100px); }
#pm-box-button button{ width:100%; font-weight: 500;; border-radius:10px; padding:7px 15px; background: #469DC8; background: linear-gradient(90deg,rgba(70, 157, 200, 1) 0%, rgba(40, 93, 152, 1) 100%); border:none; line-height: 1.5em; position:relative; font-size:16px; border:none; }
#pm-box-button button:hover, #pm-box-button button:focus{ background: #469DC8; background: linear-gradient(90deg,rgba(70, 157, 200, 1) 0%, rgba(40, 93, 152, 1) 100%); border:none; }
#btn-pm-next-icon{ display:block; background-color: #fff; width:32px; height:32px; position:absolute; right:3px; top:3px; border-radius: 10px; }
#btn-pm-next-icon:before{ content:''; display:block; position:absolute; left:12px; top:12px; border-color: black; border-style: solid; padding:3px; border-width: 0 1px 1px 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
#btn-pm-restart{ display:none; }
#btn-pm-previous, #btn-pm-previous-2{ position:absolute; left:10px; top:10px; width:16px; height:16px; border:none; padding:0; background:transparent; cursor: pointer; }
#btn-pm-previous:before, #btn-pm-previous-2:before{ content:''; display:block; margin-left:3px; border-color: #b31c18; border-style: solid; padding:7px; border-width: 0 2px 2px 0; transform: rotate(135deg); -webkit-transform: rotate(135deg); cursor: pointer; }
#btn-pm-previous:hover, #btn-pm-previous-2:hover{ background:transparent; cursor: pointer; }

#st-pm-month{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-right:1px solid #ccc; border-bottom:1px solid #ccc; width:90%; margin:0 auto 30px; }
#st-pm-month > *{ border-left:1px solid #ccc; border-top:1px solid #ccc; text-align: center; padding:10px 10px 20px; }
#st-pm-month .pm-color-level-circle{ width:50px; height:50px; margin:10px auto 0; border-radius: 50%; background-color:#ccc; }
#st-pm-level-detail p{ margin:0 0 15px; }
#st-pm-level-list .pm-level-circle{ width:20px; height:20px; border-radius:50%; margin-right:10px; }
#st-pm-level-list > *{ margin-bottom:10px; align-items: center; }

#pm-chart{ padding-top:70px; }
.pm-chart-box{ margin:40px 0; }
.pm-chart-box h6{ color:#2d68ab; font-weight: 500; margin-bottom:15px; }
.pm-chart-note{ font-size:12px; color:#666; margin-top:10px; }

#st-pm-wrap .select2-container--default .select2-selection--single{ border-radius:8px; border:2px solid #d4d4d4; }
#st-pm-wrap .select2-container .select2-selection--single{ height:40px; }
#st-pm-wrap .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:40px; }
#st-pm-wrap .select2-container--default .select2-selection--single .select2-selection__arrow{ height:38px; width:40px; }
#st-pm-wrap .select2-container .select2-selection--single .select2-selection__rendered{ padding-left:20px; padding-right:40px; }
#st-pm-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b{ 
  border-color: black;
  border-style: solid;
  padding:4px;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-top:-8px;
}

#pm-industry-info{ font-size:14px; background:#f1f1f1; border-radius: 15px; padding:5px 15px; }
#pm-industry-info .pm-industry-info-box{ padding-left:120px; position:relative; }
#pm-industry-info .pm-industry-info-box strong{ position:absolute; top:0; left:0; font-weight: 500; }
#pm-industry-info .pm-industry-info-box .q{ margin-right:20px; }
#pm-key-emission-source{ margin:25px 0 20px; }
.pm-response-desc-box{ font-size:16px; }
.pm-response-desc-box h5{ font-size:16px; font-weight:500; margin:0 0 5px; }

@media (max-width:1600px){ 


}

@media (max-width:1440px){
    
}

@media (max-width:1366px){
  #st-pm-wrap{ width:90%; }
}

@media (max-width:1180px){

  #st-pm-quiz h4{ font-size:26px; }
  #st-pm-quiz .pm-quiz-left .desc{ margin:15px 0 20px; }
  #st-pm-quiz .choice label{ line-height: 1.4em; font-size: 15px; }

  #st-pm-title h2{ font-size:28px; }
  #st-pm-quiz .pm-quiz-left h4{ font-size:28px; }
}

@media (max-width:980px){
    
}

@media (max-width:767px){

  #st-pm-wrap{ width:92%; }
  #st-pm-title h2{ font-size:22px; }
  #st-pm-quiz-wrap{ padding:20px; }
  #pm-box-data{ flex-direction: column; }
  #st-pm-quiz{ width:100%; }
  #st-pm-quiz .choice label{ width:100%; margin-right:0; }
  #st-pm-quiz .choice input[type="radio"]::before { width: 0.45em; height: 0.5em; }

  #st-pm-quiz-wrap{ border-radius:10px; padding-bottom:90px; }
  #st-pm-quiz-wrap.complete{ padding-bottom:90px; }
  #pm-box-button{ margin-top:0; bottom:20px; left:20px; width:calc(100% - 40px); }

  #st-pm-quiz .pm-quiz-left h4 br{ display:none; }

  #st-pm-quiz .pm-quiz-box{ flex-direction: column; }
  #st-pm-quiz .pm-quiz-left{ width:100%; min-height:0; padding:0; box-shadow:none; }
  #st-pm-quiz .pm-quiz-right{ width:100%; }
  #st-pm-month{ margin:30px 0; width:100%; border-radius: 15px; }
  #st-pm-month .pm-color-level-circle{ width:35px; height:35px; }
  #st-pm-month > *:nth-child(1){ border-top-left-radius: 15px; }
  #st-pm-month > *:nth-child(4){ border-top-right-radius: 15px; }
  #st-pm-month > *:nth-child(9){ border-bottom-left-radius: 15px; }
  #st-pm-level-list .pm-level-desc{ margin-left:auto; width:calc(100% - 40px); line-height:1.4em; }
  #pm-chart{ padding-top:0; }

  #pm-solution-box-1{ margin-top:30px; }
  #pm-solution-box-2{  margin:18px 0; }
  #st-risk-color-box{ flex-wrap: wrap; }
  #st-risk-color-box .pm-color-box{ font-size:14px; width:calc(50% - 5px); }
  
  #pm-industry-info .pm-industry-info-box{ padding-left:0; flex-wrap: wrap; }
  #pm-industry-info .pm-industry-info-box strong{ position:static; display:block; }
  #pm-industry-info .pm-industry-info-box .q{ margin-left:20px; }
  #pm-industry-info .pm-industry-info-box .desc{ width:100%; margin-top:0; }
  #pm-industry-group-info{ margin-bottom:10px; }

  #btn-pm-next-question{ display:none; }
  #btn-pm-previous, #btn-pm-previous-2{ position:absolute; left:auto; top:-10px; right:-10px; }
}