#home .main-detail-events .row {
  padding: 15px 0px;
}

#home .main-detail-events .row .box-items-img .img-items img {
  height: 355px;
}

#home .main-detail-events .row .box-items-img img.sub-item {
  max-height: 230px;
}

#home .main-detail-events .row .box-items-img .title-details {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  text-transform: uppercase;
  text-align: left;
}
#home .main-detail-events .row .box-items-img .title-details a {
  color: #272323;
}
#home .main-detail-events .row .box-items-img .txt-details {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.56;
  text-align: left;
  color: #272323;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  -webkit-line-clamp: 3;
  height: 65px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
#home .main-detail-events .row .box-items-img .view-more-details {
  margin-top: 30px;
}
#home .main-detail-events .row .box-items-img .view-more-details a {
  color: #fff;
  background: #EF4A22;
  padding: 8px 30px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0.8px;
}

.details-p{
  padding: 0 20px;
}
.details-t p {
  border: 1px solid #EF4A22;
  box-sizing: border-box;
  padding: 3px 5px;
  font-weight: 700;
  color: #505050;
  width: 140px;
  text-align: center;
}
.button-item-group, .box {
  padding: 30px 0px 0px 0px;
}
.btn.btn-controls {
  font-weight: 500;
}
.btn.focus, .btn.is-checked, .btn:focus {
  color: #fff;
  box-shadow: none;
  border-radius: 0;
  background: #EF4A22;
  font-weight: 700;
}
.btn.focus, .btn:hover {
  color: #fff;
  box-shadow: none;
  border-radius: 0;
  background: #EF4A22;
  font-weight: 700;
  transition: 0.5s ease all;
}


* {
  outline: none;
}



.tb {
  display: table;
  width: 100%;
}
.td {
  display: table-cell;
  vertical-align: middle;
}
input,
button {
  color: #646464;
  padding: 0;
  margin: 0;
  border: 0;
  background-color: transparent;
}
#cover {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  padding: 0px 12px;
  margin: -8px 20px 0 20px;
  border: 1px solid #D6D6D6;
}

input[type="text"] {
  width: 100%;
  line-height: 1;
}
input[type="text"]::placeholder {
  color: #646464;
  font-weight: 500;
  font-size: 13px;
}
#s-cover {
  width: 1px;
  padding-left: 35px;
}
#s-cover button {
  position: relative;
  display: block;
  width: 60px;
  height: 38px;
  cursor: pointer;
}
#s-circle {
  position: relative;
  top: -2px;
  left: 50px;;
  width: 15px;
  height: 15px;
  margin-top: 0;
  border-width: 15px;
  border: 1px solid #282A2E;
;
  background-color: transparent;
  border-radius: 50%;
  transition: 0.5s ease all;
}
button span {
  position: absolute;
  top: 7px;
  left: 46px;
  display: block;
  width: 45px;
  height: 15px;
  background-color: transparent;
  border-radius: 10px;
  transform: rotateZ(128deg);
  transition: 0.5s ease all;
}
button span:before,
button span:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 7px;
  height: 1px;
  background-color: #282A2E;
  border-radius: 10px;
  transform: rotateZ(0);
  transition: 0.5s ease all;
}
.col-md-4.col-6.col-media {
  margin-bottom: 30px;
}



@media (max-width: 767px) {
  #home .main-detail-events .row {
    padding: 0px;
  }
  .main-detail-events{
    margin: 20px 0px;
  }
  .ig-mb {
    padding: 0;
  }
  .details-t {
    font-size: 12px !important;
  }
  .details-t p {
    width: 120px;
  }
  .details-p {
    padding: 0 15px;
  }
  .details-t ul {
    display: none;
  }
  .detail-mb {
    display: none;
  }
  .col-md-6.col-12.TM.col-media {
    margin: 20px 0px;
  }
  .main-detail-events .tab-mb {
    margin-bottom: 50px;
  }
  .button-item-group, .box {
    padding: 30px 0px 22px 0px;
  }
}










/*# pagination  */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.pagination ul{
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  padding: 5px;
}
.pagination ul li{
  color:#5F5F5F;
  list-style: none;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
}
.pagination ul li.numb{
  list-style: none;
  height: 30px;
  width: 30px;
  margin: 0 4px;
  line-height: 30px;
  border-radius: 50%;
}
.pagination ul li.numb.first{
  margin: 0px 3px 0 -5px;
}
.pagination ul li.numb.last{
  margin: 0px -5px 0 3px;
}
.pagination ul li.dots{
  font-size: 22px;
  cursor: default;
}
.pagination ul li.btn{
  padding: 0 12px;
  border-radius: 50px;
}
.pagination li.active,
.pagination ul li.numb:hover,
.pagination ul li:first-child:hover,
.pagination ul li:last-child:hover{
  color: #fff;
  background: #EF4A22;
}


.owl-carousel .owl-item img {
  max-height: 70vh !important;
}

.demo{ background: #444; }
.main-timeline{ position: relative; }
.main-timeline:before,
.main-timeline:after{
  content: "";
  display: block;
  width: 100%;
  clear: both;
}
.main-timeline:before{
  content: "";
  width: 100%;
  height: 5px;
  background: #fff;
  margin: auto 0;
  position: absolute;
  top: 50%;
  left: 0;
}
.main-timeline .timeline{
  width: 50%;
  float: left;
  position: relative;
}
.main-timeline .timeline:before{
  content: attr(data-heading);
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  /*transform: rotate(-90deg);*/
  position: absolute;
  top: 5px;
  left: 20px;
  z-index: 2;
}
.main-timeline .timeline:after{
  content: "";
  width: 5px;
  height: 60px;
  border-left: 9px dotted #fff;
  position: absolute;
  top: 54%;
  left: 71px;
}
.main-timeline .timeline-content{
  padding: 35px 15px 0px 15px;
  margin-bottom: 10px;
  border-radius: 15px;
  border: 5px solid #fff;
  text-align: left;
  /*background: #f67420;*/
  z-index: 1;
  position: relative;
}
/*.main-timeline .timeline:nth-child(even) .timeline-content{ background: #43a6ba; }*/
/*.main-timeline .timeline-content:before{
  content: "";
  width: 40px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #d66215;
  border-radius: 10px 0 0 10px;
}*/
.main-timeline .timeline:nth-child(even) .timeline-content:before{ background: #1784ab; }

.main-timeline .timeline:nth-child(even) .timeline-content:after{ background: #43a6ba; }
.main-timeline .description{
  font-size: 14px;
  color: #fff;
  height: 200px;
  overflow: hidden;
}
.main-timeline .read-more{
  display: inline-block;
  padding-right: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-transform: capitalize;
  position: relative;
}
.main-timeline .read-more:before{
  content: "\f0da";
  font-family: "Font Awesome 5 Free"; font-weight: 900;
  font-size: 24px;
  position: absolute;
  top: -6px;
  right: 0;
}
.main-timeline .year{
  display: inline-block;
  width: 85px;
  height: 85px;
  line-height: 85px;
  background: #f67420;
  border-radius: 5px;
  border: 5px solid #fff;
  text-align: center;
  margin-left: 34px;
  transform: rotate(45deg);
  position: relative;
}
.main-timeline .timeline:nth-child(even) .year{ background: #43a6ba; }
.main-timeline .year span{
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  transform: rotate(-45deg);
}
.main-timeline .timeline.bottom{ margin: -7.7% 0 0 7%; }
.main-timeline .timeline.bottom:nth-child(5n+1),
.main-timeline .timeline.bottom:last-child{ margin-left: 3%; }
.main-timeline .timeline.bottom:before{
  top: auto;
  bottom: 110px;
}
.main-timeline .timeline.bottom:after{
  top: auto;
  left: auto;
  bottom: 54%;
  right: 71px;
  border-color: #fff;
}
.main-timeline .timeline.bottom .timeline-content{
  margin: 80px 0 0 0;
  padding: 15px 0 40px 50px;
}
.main-timeline .timeline.bottom .timeline-content:after{
  border: none;
  border-top: 5px solid #fff;
  border-left: 5px solid #fff;
  bottom: auto;
  top: -23px;
  left: auto;
  right: 50px;
}
.main-timeline .timeline.bottom .year{
  top: 4px;
  margin-left: 132px;
}
@media only screen and (max-width: 1199px){
  .main-timeline:before{
    width: 5px;
    height: 100%;
    top: 0;
    left: 5%;
  }
  .main-timeline .timeline,
  .main-timeline .timeline.bottom,
  .main-timeline .timeline.bottom:nth-child(5n+1),
  .main-timeline .timeline.bottom:last-child{
    width: 100%;
    float: none;
  }
  .main-timeline .timeline:after,
  .main-timeline .timeline.bottom:after{
    width: 60px;
    height: 5px;
    top: 50px;
    left: -58px;
    border-top: 9px dotted #fff;
  }
  .main-timeline .timeline-content,
  .main-timeline .timeline.bottom .timeline-content{ margin: 0; }
  .main-timeline .year,
  .main-timeline .timeline.bottom .year{
    width: 65px;
    height: 65px;
    line-height: 60px;
    margin: 0;
    position: absolute;
    top: 20px;
    left: -15.5%;
    z-index: 1;
  }
  .main-timeline .timeline .timeline-content:after{ display: none; }
  .main-timeline .timeline.bottom:before{
    bottom: auto;
    top: 30px;
    left: -2px;
  }
}
@media only screen and (max-width: 990px){
  .main-timeline .year,
  .main-timeline .timeline.bottom .year{
    left: -16.8%;
  }
}

.esg_article_title {
  color: #000;
  font-size: 14px;
  font-weight: bold;
}

#home .main-details .main-left .block-1 .esg a {
  color: #000;
}





.timeline-content-color-0 {
  background: darkgray;
}

.timeline-content-color-1 {
  background: #43a6ba;
}

.timeline-content-color-2 {
  background: darkseagreen;
}

.timeline-content-color-3 {
  background: darksalmon;
}

.timeline-content-color-4 {
  background: darkorange;
}

.KV .img-fluid:hover,
.banner-img .img-fluid:hover {
  opacity: 0.5;
}

.mobile {
  display: none;
}

@media only screen and (max-width: 767px){
  #col-xs-6 {
    width: 50% !important;
  }

  .esg_article_title {
    font-size: 12px;
  }

  .mobile {
    display: block;
  }

  .PC {
    display: none;
  }
}