.editorArticle{
  padding: 0 !important;
  z-index: 10;
}

.insideBannerArea + .areaContent + .areaContent{
  position: relative;
}

.insideBannerArea + .areaContent + .areaContent.setFront{
  z-index: 10010;
}

.csrArticleSingle.animate .quoteArea{
  animation-duration: 1.2s;
  animation-name: downToUp;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-name: downToUp;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0.3s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-duration: 1.2s;
  -moz-animation-name: downToUp;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -moz-animation-delay: 0.3s;
  -moz-animation-fill-mode: forwards;
}

.csrStakeholder{
  position: relative;
  width: 100%;
  text-align: center;
  opacity: 0;
  z-index: 10;
}

.csrArticleSingle.animate .csrStakeholder{
  animation-duration: 1.2s;
  animation-name: downToUp;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-name: downToUp;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0.5s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-duration: 1.2s;
  -moz-animation-name: downToUp;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -moz-animation-delay: 0.5s;
  -moz-animation-fill-mode: forwards;
}

.shTitle{
  width: 100%;
  font-size: 34px;
  margin: 40px 0;
}

.shCon{
  width: 100%;
  border: 1px solid #e8e8e8;
  border-radius: 30px;
}

.shCommunication{
  position: relative;
  display: inline-block;
  text-align: left;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.4;
  padding: 12px 50px 12px 120px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  background-color: #e8e8e8;
}

.shCommunication:before{
  content: "";
  position: absolute;
  top: -7px;
  left: 16px;
  width: 78px;
  height: 90px;
  background: url(../upload/content/csr_2020/sp_stakeholder/icon_sh_communication.svg) no-repeat center / cover;
}

.shTextItalic{
  font-size: 26px;
  font-weight: bold;
  font-style: italic;
}

.stakeholders{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  margin: 40px 0;
}

.shBox{
  display: block;
  flex: 0 0 150px;
  margin: 15px 20px;
  cursor: pointer;
}

.shIcon{
  display: inline-block;
  width: 100px;
  height: 100px;
  font-size: 0;
  text-align: center;
  margin-bottom: 10px;
  border-radius: 50%;
  transform-origin: center bottom;
  transition: 0.3s;
}

.shBox:hover .shIcon{
  transform: scale(1.1);
}

.shIcon:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.shIcon img{
  display: inline-block;
  vertical-align: middle;
  width: 66%;
}

.shText{
  float: left;
  width: 100%;
  color: #000 !important;
}

body.oh{
  overflow: hidden;
}

.csrHeader{
  width: 100vw;
}

body.oh .csrView{
  padding-right: 17px;
}

.shPopup{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 880px;
  height: 90vh;
  text-align: left;
  padding: 30px 50px 15px 50px;
  background-color: #f3f3f3;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
  z-index: 20;
  -webkit-overflow-scrolling: touch;
  transition: 0.3s;
}

.shPopup.show{
  opacity: 1;
  visibility: visible;
}

.shPopup::-webkit-scrollbar{
  width: 8px;
}

.shPopup::-webkit-scrollbar-track{

}

.shPopup::-webkit-scrollbar-thumb{
  background: #ccc; 
}

.shPopup::-webkit-scrollbar-thumb:hover{
  background: #bbb; 
}

.shPopupBg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10;
  transition: 0.3s;
}

.shPopupBg.show{
  opacity: 1;
  visibility: visible;
}

.shPopupX{
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  cursor: pointer;
  background: url(../upload/content/csr_2020/sp_stakeholder/icon_x.svg) no-repeat center / cover;
}

.shPopupHeader{
  float: left;
  width: 100%;
  border-bottom: 1px solid #d4d4d4;
}

.shPopupTitle{
  float: left;
  font-size: 23px;
  font-weight: bold;
}

.shPopupTitle:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 70px;
  margin-right: 15px;
}

.shPopupTitle span{
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 85px);
}

.shPopupTitle span br{
  /*display: none;  Vivi edit disable at 20250725*/
}

.shPopupCom{
  float: right;
  font-weight: bold;
  padding: 10px;
}

.shPopupCom .shTextItalic{
  font-size: 24px;
}

#sh01 .shPopupTitle:before{background: url(../upload/content/csr_2020/sp_stakeholder/icon_sh01.svg) no-repeat center / cover;}
#sh02 .shPopupTitle:before{background: url(../upload/content/csr_2020/sp_stakeholder/icon_sh02.svg) no-repeat center / cover;}
#sh03 .shPopupTitle:before{background: url(../upload/content/csr_2020/sp_stakeholder/icon_sh03.svg) no-repeat center / cover;}
#sh04 .shPopupTitle:before{background: url(../upload/content/csr_2020/sp_stakeholder/icon_sh04.svg) no-repeat center / cover;}
#sh05 .shPopupTitle:before{background: url(../upload/content/csr_2020/sp_stakeholder/icon_sh05.svg) no-repeat center / cover;}
#sh06 .shPopupTitle:before{background: url(../upload/content/csr_2020/sp_stakeholder/icon_sh06.svg) no-repeat center / cover;}
#sh07 .shPopupTitle:before{background: url(../upload/content/csr_2020/sp_stakeholder/icon_sh07.svg) no-repeat center / cover;}
#sh08 .shPopupTitle:before{background: url(../upload/content/csr_2020/sp_stakeholder/icon_sh08.svg) no-repeat center / cover;}

.sh01_bgc{background-color: #2b73e7;} #sh01 .shPopupCom{color: #2b73e7;} #sh01 .shPopupInfoTitle{background-color: #2b73e7;}
.sh02_bgc{background-color: #f75b22;} #sh02 .shPopupCom{color: #f75b22;} #sh02 .shPopupInfoTitle{background-color: #f75b22;}
.sh03_bgc{background-color: #864b10;} #sh03 .shPopupCom{color: #864b10;} #sh03 .shPopupInfoTitle{background-color: #864b10;}
.sh04_bgc{background-color: #57c011;} #sh04 .shPopupCom{color: #57c011;} #sh04 .shPopupInfoTitle{background-color: #57c011;}
.sh05_bgc{background-color: #7a25a1;} #sh05 .shPopupCom{color: #7a25a1;} #sh05 .shPopupInfoTitle{background-color: #7a25a1;}
.sh06_bgc{background-color: #ffba00;} #sh06 .shPopupCom{color: #ffba00;} #sh06 .shPopupInfoTitle{background-color: #ffba00;}
.sh07_bgc{background-color: #0ac1d3;} #sh07 .shPopupCom{color: #0ac1d3;} #sh07 .shPopupInfoTitle{background-color: #0ac1d3;}
.sh08_bgc{background-color: #e9207e;} #sh08 .shPopupCom{color: #e9207e;} #sh08 .shPopupInfoTitle{background-color: #e9207e;}

.shPopupBody{
  position: relative;
  float: left;
  width: 100%;
  text-align: center;
}

.shPopupBodyTop, .shPopupBodyBottom{
  float: left;
  width: 100%;
  text-align: left;
}

.shPopupLbox{
  float: left;
  width: 55%;
  padding: 30px 50px 10px 10px;
}

.shPopupRbox{
  float: left;
  width: 45%;
  padding: 30px 0 10px 0;
}

.shPopupRow{
  float: left;
  width: 100%;
  margin-bottom: 20px;
}

.shPopupRow *{
  float: left;
  width: 100%;
}

.rowTitle{
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 12px;
}

.shPopupRow ul{
  margin: 8px 0 0 23px;
}

.frequencyBox{
  float: left;
  width: 100%;
}

.freSample{
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.fre{
  float: left;
  width: 33.3333%;
  font-size: 15px;
  padding: 8px 3px;
}

.frequencyBox span{
  width: 24px;
  height: 24px;
  font-size: 15px;
  text-align: center;
  line-height: 24px;
  margin-right: 6px;
  border-radius: 50%;
}

.fre span{
  color: #bcb2a5;
  background-color: #ede4d9;
}

.frequency{
  float: left;
  width: 100%;
}

.freRow{
  float: left;
  width: 100%;
  font-size: 15px;
  padding: 5px 5px 0 10px;
  border-bottom: 1px solid #c8c8c8;
}

.freRow:nth-child(2n){
  background-color: #e6e6e6;
}

.freRow  div:first-child{
  float: left;
  width: 43%;
  padding-right: 5px;
}

.freRow  div:last-child{
  float: left;
  width: 57%;
}

.freRow span{
  color: #fff;
  margin: 0 9px 7px 0;
  background-color: #e00013;
}

.freRow span:last-child{
  margin-right: 0;
}

.shPopupBodyBottom{
  position: relative;
  text-align: center;
  /*padding: 0 40px 48px 40px;*/
  padding: 0 40px 36px 40px;
  /*margin: 25px 0 30px 0;*/
  margin: 25px 0 16px 0;
  border: 1px solid #666666;
  border-radius: 30px;
  background-color: #e6e6e6;
}

.shPopupInfoTitle{
  display: inline-block;
  color: #fff;
  font-size: 19px;
  font-weight: bold;
  padding: 2px 15px 0 12px;
  margin-bottom: 5px;
  transform: translateY(-50%);
}

.shPopupInfoTitle:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 35px;
  height: 35px;
  margin: 0 5px 5px 0;
  background: url(../upload/content/csr_2020/sp_stakeholder/icon_info.svg) no-repeat center / cover;
}

.shPopupInfo{
  display: inline-block;
  text-align: left;
}

.shPopupInfoSdgs{
  position: absolute;
  bottom: -40px;
  right: 30px;
}

.shPopupInfoSdgs img{
  width: 60px;
  margin: 2px;
}

.shPopupClose{
  display: inline-block;
  width: 60px;
  height: 60px;
  cursor: pointer;
  background: url(../upload/content/csr_2020/sp_stakeholder/icon_close.svg) no-repeat center / cover;
}

.csrShEN .shText{
  line-height: 1.5;
}

.csrShEN .shPopupTitle{
  width: 50%;
}

.csrShEN .shPopupLbox{
  width: 50%;
}

.csrShEN .shPopupRbox{
  width: 50%;
}

.csrShEN .fre{
  width: 50%;
  padding: 5px;
}

.csrShEN .freRow  div:first-child{
  width: 48%;
  font-size: 14px;
}

.csrShEN .freRow  div:last-child{
  width: 52%;
}

.csrShEN .shPopupInfoTitle{
  text-align: left;
  margin: 0;
}

.csrShEN .shPopupInfoTitle:before{
  float: left;
}

.csrShEN .shPopupInfoTitle span{
  float: left;
  width: calc(100% - 40px);
  margin: 5px 0;
}

.csrShEN .shPopupInfo{
  margin-top: -7px;
}

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

  .shCon{
    width: 94%;
    margin: 0 3%;
  }

  .shBox{
    flex: 0 0 144px;
    margin: 15px 12px;
  }

  .csrView{
    padding-right: 0 !important;
  }

  .shPopup{
    width: 94%;
    height: 80vh;
    padding: 30px 25px 15px 25px;
  }

  .shPopupLbox{
    float: left;
    width: 46%;
    padding: 30px 30px 10px 10px;
  }

  .shPopupRbox{
    width: 54%;
  }

  .csrShEN .freRow  div:first-child{
    width: 53%;
  }

  .csrShEN .freRow  div:last-child{
    width: 47%;
  }

}

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

  .quoteArea p{
    font-size: 16px;
  }

  .csrStakeholder{
    margin: 10px 0 20px 0;
  }

  .shTitle{
    font-size: 24px;
    margin: 40px 0 30px 0;
  }

  .shCommunication{
    font-size: 16px;
    padding: 12px 40px 12px 100px;
  }

  .shCommunication:before{
    top: -6px;
    left: 10px;
    width: 70px;
    height: 80px;
  }

  .shTextItalic{
    font-size: 20px;
  }

  .stakeholders{
    margin: 20px 0;
  }

  .shIcon{
    width: 90px;
    height: 90px;
    margin-bottom: 7px;
  }

  .shPopup{
    padding: 15px;
    overflow-x: hidden;
  }

  .shPopupCom{
    float: left;
    width: 100%;
  }

  .shPopupX{
    top: 3px;
    width: 46px;
    height: 46px;
    background-size: 120%;
  }

  .shPopupTitle{
    width: 100%;
  }

  .shPopupTitle span{
    font-size: 22px;
    line-height: 1.3;
    margin-top: 5px;
  }

  .shPopupTitle span br{
    display: inline;
  }

  .shPopupLbox{
    width: 100%;
    padding: 25px 15px 0 15px;
  }

  .shPopupRbox{
    width: 100%;
    padding: 0 10px 20px 10px;
  }

  .fre{
    font-size: 14px;
    line-height: 24px;
    padding: 8px 2px;
  }

  .frequencyBox span{
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    height: 22px;
    line-height: 22px;
  }

  .freRow{
    line-height: 22px;
    padding: 7px 10px 0 10px;
  }

  .freRow span{
    margin: 0 7px 7px 0;
  }

  .freRow div:first-child{
    width: 52%;
  }

  .freRow div:last-child{
    width: 48%;
  }

  .shPopupBodyBottom{
    /*padding: 0 25px 50px 25px;*/
    padding: 0 25px 38px 25px;
    /*margin-bottom: 46px;*/
    border-radius: 20px;
  }

  .shPopupInfoTitle{
    font-size: 17px;
    text-align: left;
    line-height: 1.3;
    padding: 6px 15px 6px 10px;
    margin: 0;
  }

  .shPopupInfoTitle:before{
    float: left;
    margin: 0;
  }

  .shPopupInfoTitle span{
    float: left;
    display: block;
    width: calc(100% - 45px);
    margin: 5px 0 5px 10px;
  }

  .shPopupInfo{
    margin-top: -20px;
  }

  .shPopupInfoSdgs{
    right: 0;
    width: 100%;
  }

  .shCommunication:before{
    top: -6px;
    left: 10px;
    width: 60px;
    height: 70px;
  }

  .csrShEN .shCommunication{
    font-size: 14px;
    padding: 12px 12px 12px 80px;
  }

  .csrShEN .shIcon{
    margin-bottom: 10px;
  }

  .csrShEN .shText{
    line-height: 1.3;
  }

  .csrShEN .shPopupTitle{
    width: 100%;
  }

  .csrShEN .shPopupCom{
    font-size: 15px;
    padding-right: 0;
  }

  .csrShEN .shTextItalic{
    font-size: 22px;
  }

  .csrShEN .shPopupLbox{
    width: 100%;
  }

  .csrShEN .shPopupRbox{
    width: 100%;
  }

  .csrShEN .fre:nth-child(odd){
    width: 58%;
  }

  .csrShEN .fre:nth-child(even){
    width: 42%;
  }

  .csrShEN .freRow  div:first-child{
    width: 60%;
  }

  .csrShEN .freRow  div:last-child{
    width: 40%;
  }

  .csrShEN .shPopupInfoTitle span{
    width: calc(100% - 45px);
    font-size: 16px;
    margin: 5px 0 5px 10px;
  }

  .csrShEN .shPopupInfo{
    margin-top: -30px;
  }

}