/* KV */

.slick-center{
  opacity: 1!important;
}
.kv .kv-slick .slick-slide{
  margin: 0;
  opacity: 0.3;
}

.kv .kv-slick .slick-list{
  padding:0 150px!important;
  margin: 0;
  background-color: #000;
}
.slick-prev,.slick-next{
  width: 32px;
  height: 0;
  top: 40%;
}
.slick-prev{
  left: 40px;
  z-index: 1;
}
.slick-next{
  right: 40px;
}
.slick-prev:before,.slick-next:before{
  color: #b4b4b4;
  font-size: 64px;
  font-weight: 900;
}
.slick-prev:before{
  content: '\f104';
  font-family: 'Font Awesome 5 Free';
}
.slick-next:before{
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
}
.slick-dots{
  position: relative;
  bottom: 0;
  padding-top: 16px;
}
.slick-dots li.slick-active button:before{
  color: #e60012;
}
/* end KV */


/*----------*\
     event
\*----------*/
.event{
  /* background-color: #f3f3f3; */
  text-align: center;
  padding: 24px 0;
}
.op-title{
  margin: 16px 0;
}
.op-title:before,.op-title:after{
  display:inline-block;
  vertical-align: middle ;
  padding:0 16px;
  height: 60px;
}
.op-title:before{
  content:url('../images/dot-left.png');
}
.op-title:after{
  content:url('../images/dot-right.png');
}

.event-title{
  color: #fff;
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: center;
  margin: 40px 0;
  background-image: url('../images/title-bar.png');
  background-position: center;
  -webkit-background-size: cover; 
  background-size: cover;
  background-repeat: no-repeat;
}
.event-title h2{
  line-height: 2em;
}
.event-slick{height: auto;}
.event-item{
  width: 100%;
  background-color: #fff;
  transition: box-shadow .25s;
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.16);
}
.event-item:hover{
  transition: box-shadow .25s;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.event-text{
  background-color: #f3f3f3;
  padding: 16px;
}

/* image-container */
.image-container{
  width: 100%;
  display: block;
  overflow: hidden;
}
.image-container .image{
  width: 100%;
  display: block;
  padding-top: 48%;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform:scale(1,1);
  transition: all .3s ease-out;
  
}
.event-item:hover .image-container .image{
  transform:scale(1.2,1.2);
}

/* banner-container */
.banner-container{
  width: 100%;
  display: block;
  overflow: hidden;
  margin-bottom: 2em;
}
.banner-container .banner{
  width: 100%;
  display: block;
  padding-top: 30%;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform:scale(1,1);
  transition: all .3s ease-out;
  
}


/* date */
.date{
  text-align: left;
  color: #0abbb5;
  font-weight: 900;
}
.description{
  text-align: left;
  line-height: 1.5em;
  padding-top: 8px;
  text-align: justify;
  font-weight: 900;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* btn */
.event-btn{
  display: inline-block;
  padding: 8px 24px;
  color: #000;
  margin: 16px 0 40px 0;
  font-weight: 900;
}

.event-btn:after{
  content: '\f0da';
  font-family: 'Font Awesome 5 Free';
  color: #000;
  padding-left:8px;
}

.event-btn:hover,.event-btn:hover:after{
  color: #8081ff;
}

/* event_page */
.event_page{
  margin-top: 1em;
  margin-bottom: 4em;
}
.event_page .description{
  border-bottom: 1px solid #0ABBB5;
  margin-bottom: .4em;
}

/*----------*\
  end event
\*----------*/





/* $Mobile
--------------------------------------------------------------------------------------*/
/* --- Large devices (tablets) (phones)--- */
@media( max-width:1199.98px ){ 
html,body{ width: 100%; font-size: 16px; -webkit-text-size-adjust:none; }

/* KV */
.kv .container{
  padding: 0 ;
}

.kv .kv-slick .slick-slide{
    width: 100%;
  margin: 0;
}
.kv .kv-slick .slick-list{
  width: 100%;
  padding:0!important;
  margin: 0;
}

.slick-dots{
  bottom: 0;
  padding-top: 4px;
}
/* end KV */

/*----------*\
    m-event
\*----------*/
.event{
  padding: 0; 
}
.op-title{
  margin: 16px 0;
}
.op-title:before,.op-title:after{
  padding:0 8px;
  height: 44px;
}
.event-title{
  color: #fff;
  width: 100%;
  height: 32px;
  line-height: 30px;
  margin: 0;
}

.event-title h2 {
    line-height: 1.6em;
}
.event-slick{ height: auto;}
.event-slick.slick-dotted.slick-slider{
  margin-bottom: 0;
}

.event-slick.slick-dots{
  position: relative;
  bottom: 0;
  padding-top: 4px;
}
.event-slick .slick-dots li.slick-active button:before{
  color: #8081ff;
}
.event-slick02{
  text-align: center;
  width: 100%;
}

/* btn */
.btn{
  display: inline-block;
  padding: 0;
}
.event-btn{
  color: #000;
  margin: 16px auto 60px auto;
}
.event-btn:after{
  content: '\f0da';
  font-family: Font Awesome 5 Free;
  color: #000;
  font-weight: 900;
  padding-left:8px;
}

/* banner */
.banner-container{
  width: 100%;
  display: block;
  overflow: hidden;
  margin-bottom: 2em;
}

/*----------*\
  end m-event
\*----------*/

}


/* -----------------------iphone 5---------------------------- */
@media( max-width:325px ){

  .op-title:before, .op-title:after{
    display: none;
  }
}