/* ==================Class middle=============== */
.ks-template-1 .bg-gray{
  background-color:#f9f9f9;
}
/* gallery */
.ks-template-1 #gallery-1 {
  width: 600px;
  margin: auto;
}

.ks-template-1 .img-box:nth-child(n+7){
  display: none;
}

.ks-template-1 .img-box-zone{
  position: relative;
}
.ks-template-1 .img-box-zone .more-img{
  position: absolute;
  background: rgba(0,0,0,.60);
  color: #fff;
  height: calc(50% - 16px);
  width: calc(33.33% - 20px);
  right: 15px;
  top: 50%;
  align-items: center;
  display: flex;
}
.ks-template-1 .img-box-zone .more-img span{
  display: block;
  width: 100%;
  text-align: center;
  font-size: 20px;
}

.ks-template-1 .img-box-zone .img-box {
  cursor: pointer;
}
.ks-template-1 .img-box .length-box{
  height:215px;
  overflow: hidden;
} 
.ks-template-1 .rsOverflow {
  overflow: hidden;
  float: left;
}
.ks-template-1 .rsSlide {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  display: block;
  height: 100%;
  width: 100%;
}
.ks-template-1 .rsContainer, .rsOverflow {
  position: relative;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}

.ks-template-1 .rsDefault .rsOverflow, .rsDefault .rsSlide, .rsDefault .rsThumbs, .rsDefault .rsVideoFrameHolder {
  background: #151515;
}

.ks-template-1 .royalSlider {
  width: 600px;
  height: 400px;
  position: relative;
  direction: ltr;
}
.ks-template-1 .rsThumbs {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  float: left;
  z-index: 22;
}
.ks-template-1  .rsDefault .rsThumbsHor {
  padding-bottom: 4px;
  width: 100%;
  height: 72px;
}
.ks-template-1 .rsDefault .rsThumb {
  float: left;
  overflow: hidden;
  width: 96px;
  height: 72px;
}

.ks-template-1 .rsDefault .rsFullscreenIcn {
  display: block;
  margin: 6px;
  width: 32px;
  height: 32px;
  background: url(/Krungsri2020/media/Payroll_image/activity/activity-campaign/rs-default.png);
  background-color: rgba(0,0,0,.75);
  border-radius: 2px;
}
.ks-template-1 .rsDefault .rsFullscreenBtn {
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  z-index: 22;
  display: block;
  position: absolute;
  cursor: pointer;
}
.ks-template-1 .rsDefault.rsHor .rsArrowLeft, .rsDefault.rsVer .rsArrowLeft {
  top: 0;
  left: 0;
}
.ks-template-1 .rsDefault.rsHor .rsArrowRight {
  right: 0;
  top: 0;
}
.ks-template-1 .rsDefault .rsArrow {
  height: 100%;
  width: 44px;
  position: absolute;
  display: block;
  cursor: pointer;
  z-index: 21;
}
.ks-template-1 .rsHidden {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s linear .3s,opacity .3s linear;
}
.ks-template-1 .rsDefault.rsHor .rsArrowLeft .rsArrowIcn {
  background-position: -64px -32px;
}
.ks-template-1 .rsDefault.rsHor .rsArrowRight .rsArrowIcn {
  background-position: -64px -64px;
}
.ks-template-1 .rsDefault .rsArrowIcn {
  width: 32px;
  height: 32px;
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
  position: absolute;
  cursor: pointer;
  background: url(/Krungsri2020/media/Payroll_image/activity/activity-campaign/rs-default.png);
  background-color: rgba(0,0,0,.75);
  border-radius: 2px;
}
.ks-template-1 .rsDefault .rsThumbsArrow {
  height: 100%;
  width: 20px;
  position: absolute;
  display: block;
  cursor: pointer;
  z-index: 21;
  background: #000;
  background: rgba(0,0,0,.75);
}
.ks-template-1 .rsDefault .rsThumbsArrowIcn {
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
  position: absolute;
  cursor: pointer;
  background: url(/Krungsri2020/media/Payroll_image/activity/activity-campaign/rs-default.png);
}
.ks-template-1  .rsDefault.rsWithThumbsHor .rsThumbsArrowLeft .rsThumbsArrowIcn {
  background-position: -128px -32px;
}
.rsDefault.rsWithThumbsHor .rsThumbsArrowRight .rsThumbsArrowIcn {
  background-position: -128px -48px;
}
.rsDefault.rsWithThumbsHor .rsThumbsArrowRight {
  right: 0;
  top: 0;
}
.ks-template-1 .rsDefault.rsWithThumbsHor .rsThumbsArrowLeft {
  left: 0;
  top: 0;
}
.rsDefault .rsThumbsArrowDisabled {
  display: none!important;
}
.ks-template-1 .rsDefault .rsThumb.rsNavSelected img {
  opacity: .3;
  filter: alpha(opacity=30);
}

.ks-template-1 div#gallery-modal {
  background-color: rgb(0 0 0 / 42%);
}
.ks-template-1 div#gallery-modal .modal-dialog{
  max-width: none;
  width: auto;
}
.ks-template-1 div#gallery-modal .modal-dialog .modal-content{
  background-color: transparent;
  border: 0;
}
.ks-template-1 div#gallery-modal .modal-dialog .modal-content .modal-header{
  border-bottom: 0;
}
.ks-template-1 div#gallery-modal .modal-dialog .modal-content .modal-header button{
  text-shadow: none;
  color: #fff;
  opacity: unset;
}
.ks-template-1 .img-box-zone .img-box{
  cursor: pointer;
}
.ks-template-1 .img-box-zone .img-box:nth-child(3n+1){
  padding-left: 0;
  padding-right: 10px;
}
.ks-template-1 .img-box-zone .img-box:nth-child(3n+2){
  padding-left: 5px;
  padding-right: 5px;
}
.ks-template-1 .img-box-zone .img-box:nth-child(3n+3){
  padding-left: 10px;
  padding-right: 0px;
}

@media (min-width: 768px)and(max-width: 991px){
  /* gallery */
  .ks-template-1 .img-box .length-box{
    height: 157px;
    border-radius: 4px;
  } 
}

@media (max-width: 767px){
  /* gallery */
  .ks-template-1 #gallery-1 {
    width:300px;
  }
  .ks-template-1 .img-box-zone .more-img {
    border-radius: 4px;
  }
}
@media (min-width: 375px)and(max-width:414px){
  /* gallery */
  .ks-template-1 .img-box .length-box{
    height: 80px;
    border-radius: 4px;
  } 
}
@media (min-width: 361px)and(max-width:374px){
  /* gallery */
  .ks-template-1 .img-box .length-box{
    height: 102px;
    border-radius: 4px;
  } 
}
@media (max-width: 360px){
  /* gallery */
  .ks-template-1 .img-box .length-box{
    height: 58px;
    border-radius: 4px;
  } 
}


/*Tag*/
.ks-template-1 .tag-cl .title-tg {
  display: inline-block;
  font-size: 16px;
  font-family: Thongterm-Bold;
  line-height: 34px;
  color: #5a5a5a;
  margin-right: 16px;
}
.ks-template-1 .tag-cl .ctn-tag {
  display: inline;
  border: solid 1px #e8e8e8;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
  font-size: 14px;
  line-height: 30px;
  color: #545454;
  padding: 4px 8px;
}
.ks-template-1 .tag-cl .ctn-tag:hover {
  cursor: pointer;
  background-color: #ffd400;
}

.ks-template-1 .topic-name{
  font-family: Krungsri-Condensed-Bold;
  font-size: 20px;
  line-height: 30px;
  color: #545454;
}
/* ==================Close Class middle=============== */