/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ul {
  list-style   : none;
  padding-left : 0;
  margin-bottom: 0;
}
a {
  text-decoration: none;
  color          : #fff;
}

a:hover {
  text-decoration: none;
  color          : #fff;
}

blockquote,
q {
  quotes: none;
}

#cartone_block_logo{
  width: 200px; 
  left: calc(50vw - 100px);
  animation-name: cartone_block_logo_show;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  top: calc(50vh - 45px); 
  opacity: 0;
}
@keyframes cartone_block_logo_show {
  from {opacity: 0; top: calc(50vh - 45px); }
  to {opacity: 1; top: calc(50vh - 115px); }
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing : 0;
}

.table td {
  border-top: none
}

input:focus {
  outline: none;
}

.form-control:focus {
  border-color: #ced4da;
  outline     : none;
  box-shadow  : none;
}

/*===RWD img===*/
img {
  max-width: 100%;
  height   : auto;
}

* {
  margin        : 0;
  padding       : 0;
  border        : 0;
  font-weight   : normal;
  vertical-align: baseline;
  box-sizing    : border-box;
}
:root {
  --bg-color:#050424;
  --main-color:#00FFD1;
  --sub-color:#F8008D;
  --background:linear-gradient(to right,  rgba(255,0,135,1) 1%,rgba(0,255,209,1) 100%); 
  --black:#000;
  
}

.large_modal .modal-dialog,
.big_modal .modal-dialog{
    max-width: 95%;
    margin: 1.75rem auto;
}
@media(min-width: 992px) {
    .large_modal .modal-dialog,
    .big_modal .modal-dialog{
        max-width: 900px;
    }
}
@media(min-width: 1080px) {
    .large_modal .modal-dialog,
    .big_modal .modal-dialog{
        max-width: 1080px;
    }
}

@media(min-width: 1240px) {
    .large_modal .modal-dialog{
        max-width: 1200px;
    }
}

@media(min-width: 1300px) {
    .large_modal .modal-dialog{
        max-width: 1250px;
    }
}

body {
  font-family: 'Noto Sans TC', sans-serif;
  font-size  : 16px;
  line-height: 1.5;
  color      : #333;
  position   : relative;
  background-color: #01001F;
}

button:focus,
a:focus {
  outline: none;
}
.btn.focus,
.btn:focus {
  box-shadow: none;
}

.w1400 {
  max-width: 1366px;
  width    : 100%;
  height   : 100%;
  margin   : auto;
}

.content_block {
  max-width: 1920px;
  margin   : auto;
}

.goTop {
  position        : fixed;
  right           : 5px;
  bottom          : 40px;
  text-align      : center;
  display         : block;
  cursor          : pointer;
  z-index         : 10;
  width           : 50px;
  height          : 50px;
  border-radius   : 50%;
  line-height     : 50px;
  background-color: var(--sub-color);
  color           : var(--white);
  transition      : all .5s;
  animation       : 3s arrowTop ease-out infinite;
}

.goTop:hover {
  background-color: var(--main-color);
}

@keyframes arrowTop {

  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    transform        : translateY(0)
  }

  40% {
    transform: translateY(-20%)
  }

  60% {
    transform: translateY(-10%)
  }
}

.mainBtn {
  background-color: var(--black);
  border          : 1px solid var(--white);
  color           : var(--white);
  padding         : .5rem 1rem;
  display         : block;
  text-align      : center;
}

.subBtn {
  background: linear-gradient(35deg, #00EFFF 1%,rgba(255,0,135,1) 100%);;
  border          : 1px solid var(--white);
  color           : var(--white);
  padding         : .5rem 1rem;
  display         : block;
  text-align      : center;
}
.sendBtn {
  background: linear-gradient(35deg, #00EFFF 1%,rgba(255,0,135,1) 100%);
  color           : var(--white);
  padding         : .5rem 1rem;
  display         : block;
  width: 180px;
  border-radius: 1.5rem;
  text-align      : center;
}
.btn:hover{color           : var(--white);}
.sendBtn:hover,.sendBtn:active{background: linear-gradient(35deg, #00EFFF 1%,rgba(255,0,135,1) 100%);}
.maintitle{ background: linear-gradient(35deg, rgba(255,0,135,1) 0%,#00EFFF 100%);color: transparent; background-clip: text;font-weight: 600;
  -webkit-background-clip: text;display: inline-block;margin:0 auto 2rem;}
.subtitle{     position: relative;
  display: inline-flex;
  justify-content: center;
  margin:1rem auto;
  width: 100%;
  font-size: 1.3rem;
}
.subtitle:after{
  content:'';
  background: var(--background);
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;top: 50%;
  display: block;
}
.subtitle p{background-color: var(--bg-color);padding: 5px;position: relative;z-index: 1;}
.note {
  color        : #cc001b;
  margin-bottom: 0;
}
.line{background: var(--background);height: 2px; width: 100%;}

/* 手機漢堡選單 */
.menu-icon {
  position: relative;
  width   : 50px;
  height  : 50px;
  cursor  : pointer;
}

.menu-icon .menu-icon__cheeckbox {
  display : block;
  width   : 100%;
  height  : 100%;
  cursor  : pointer;
  z-index : 2;
  position: absolute;
  opacity : 0;
}

.menu-icon div {
  margin  : auto;
  position: absolute;
  top     : 0;
  right   : 0;
  left    : 0;
  bottom  : 0;
  width   : 22px;
  height  : 12px;
}

.menu-icon span {
  position        : absolute;
  display         : block;
  width           : 100%;
  height          : 3px;
  background-color: var(--main-color);
  border-radius   : 1px;
  transition      : all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
}

.menu-icon span:first-of-type {
  top: 0;
}

.menu-icon span:last-of-type {
  bottom: 0;
}

.menu-icon.active span:first-of-type,
.menu-icon .menu-icon__cheeckbox:checked+div span:first-of-type {
  transform: rotate(45deg);
  top      : 5px;
}

.menu-icon.active span:last-of-type,
.menu-icon .menu-icon__cheeckbox:checked+div span:last-of-type {
  transform: rotate(-45deg);
  bottom   : 5px;
}

/* 手機漢堡選單end */

.navbar {
  padding   : 0;
  position  : absolute;
  width     : 100%;
  top       : 0;
  z-index   : 100;
  transition: all .3s ease-in;
}
.navbar.fixed{background-color: #050424e5;position: fixed;top       : 0;}

.navbar-header {
  padding        : 0;
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}


.navbar-collapse {
  order: 1;
}
.bootsnav ul.nav>li a.active{color: var(--main-color);}

@media (min-width: 1123px) {
  .brand {
    display: none;
  }

  #navbar-menu {
    display        : flex;
    justify-content: center;
    flex           : 1;
    margin         : 0 1rem;
    position       : relative;
  }

  .navbar-nav {
    flex-direction: row;
  }

  .navbar li.dropdown>a.dropdown-toggle::after {
    display: none;
  }
}

.logo {
  margin-bottom: 0;
}
.logo a {
  //background     : url(../images/logo.svg) no-repeat;
  background-size: contain;
  text-indent    : -9999px;
  display        : block;
  width          : 136px;
  margin         : .6rem 0;
}

nav.bootsnav .container {
  position: relative;
}
.bootsnav ul.nav>li a {
  color          : var(--white);
  text-shadow: 0 0  15px rgba(0,0,0,.1);
  text-decoration: none;
  line-height    : 1.5;
  font-size      : 1rem;
  font-weight    : 400;
  letter-spacing: 1px;
  display        : block;
  padding        : .8rem 1rem;
  position       : relative;
  text-align     : center;
  transition: all .3s;
}
.bootsnav ul.nav>li a:hover{
  transform: scale(1.125);
  color: var(--main-color);
}


@media (min-width: 1123px) {
  .navbar-collapse {
    order: 0;
  }

  .logo {
    margin-bottom: 0;
  }

  .logo a {
    margin: .8rem 0 .8rem 1.5rem;
  }

  .bootsnav li.dropdown ul.dropdown-menu {
    position  : absolute;
    text-align: center;
    border-top: none;
    min-width : 100%;
    width     : 9.5rem;
    padding   : 0;
    background-color: #050424e0;
  }

}

@media (max-width: 1122px) {
  .navbar-nav .dropdown-menu{background-color: black;}
  .navbar-collapse {
    overflow-y: auto;
    position: absolute;
    width: 100%;
    top:0;
    padding-top: 67px;
    left: 0;
    height    : 100vh;
    background-color: #050424e0;
  }
}

footer {
  overflow        : hidden;
  background-color: var(--bg-color);
  padding         : 2rem 0 0 ;
  color           : var(--white);
  word-wrap       : break-word;
  word-break      : break-all;
  font-size: 15px;
  position: relative;
}
.footer_accordion{flex:0 0  100%}
footer a {
  padding: .5rem 15px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  color : var(--white);
  font-weight: 100;
  letter-spacing: 1px;
  text-decoration: none;
}
footer a:hover{color: var(--white);}

footer h4 {
  font-size    : 1.25rem;
  padding: 1rem ;
  margin-bottom: .5rem;
  width: 100%;
  display: block;
  color: var(--main-color);
  font-weight: 300;position: relative;
  
}
.footer-list{display: flex; flex-wrap: wrap;}
.footer_accordion:nth-child(2) ul li,footer .footer_accordion:nth-child(3) ul li {flex:0 0 50%;}
footer .footer_accordion:last-child ul li {flex:0 0 auto;}
footer:before{content: '';
  width: 100%;height: 2px;background: var(--background);display: block;position: absolute;
  top: 0;left: 0;z-index: 2;}
footer .footer_accordion h4 i{display: none;}
footer .footer_accordion h4.collapsed i{ color: var(--gary ); display: none;}
footer ul li i{
  background:var(--background);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;font-size: 1.5rem;text-align: center;display: inline-block;
  margin-right: 10px;
}

.copyrightBox{background-color: var(--bg-color); padding:0 0 1rem;color:  var(--white );position: relative;font-size: 15px;font-weight: 100;}
.copyrightBox .container{display: flex;flex-wrap: wrap; justify-content: space-between;}
.copyrightBox a,.copyrightBox a:hover{color :  var(--white);}
.photonic-footer{display: flex; justify-content: flex-end; color: #999;position: relative;}
.photonic-footer a,.photonic-footer a:hover{ color: #999;padding:0 5px;}
@media (min-width: 992px) {
    footer{
      padding : 4rem 0px 1rem;
    }
    .footer_accordion{flex:0 0  25%}
    
}
@media (max-width: 991px) {
  footer h4 {padding-bottom: 1rem;font-size: 1.125rem;border-bottom: 1px solid #555555;}
  footer h4:last-child{border-bottom:none}
  footer .footer_accordion h4 i{transform: rotate(-90deg);position: absolute;right: 1rem;top: 1rem; font-size: 13px;transition: all .3s ease-in-out;display: block;}
  footer .footer_accordion h4.collapsed i{ transform: rotate(0deg);display: block;}
  footer .collapse ul{display: flex; flex-wrap: wrap; }
  footer .collapse ul li{flex: 0 0 100%;}
  footer .footer_accordion{margin-bottom: 1rem;width: 100%;}
}
/* footer end*/


/* 內容開始 */
/* 主播大賽調整 */
/* 調整mov rwd */
.mov-iframe iframe{
  height:280px;
}
@media (min-width: 992px) {
  .mov-iframe{
    height: 20rem;
  }
  .mov-iframe iframe{
    height:316px;
  }
}
/* 規則 */
.rule .item{position: relative;margin-bottom: 2rem;}
.rule .text-box{
  padding:4.5rem 3rem;
  position: relative;
  width: 100%;
  z-index: 1; display: flex;
  align-content: flex-start; 
  border-radius: 2rem;
  flex-wrap: wrap;
  min-height:260px;
  position: relative;}
.rule .text-box::before{ content: '';position: absolute;top: 0;left: 0; z-index: 1; background: var(--bg-color);width: 100%;height: 100%;border-radius: 2rem;border: 4px solid var(--white);} 
.rule .text-box:after{
  content: '';
  width: 102%;height: 102%;
  background: linear-gradient(to top,  #00acff 10%,rgba(255,0,135,1) 100%);
  position: absolute;
  left: 0;
  top: 0;
  filter: blur(.8rem);
  z-index: -1;
  border-radius: 2rem;
}
.rule .text{position: relative;z-index: 2;}
.rule .text-box h3{color: var(--sub-color);margin-bottom: 1rem; font-size: 1.25rem;display: block;width: 100%;}
.rule .text-box p{font-size: 15px !important;}
.people{margin-left: 0;margin-right: 0;justify-content: center;}
.people .item{flex: 0 0 50%;padding: .8rem;}
.people .item img{margin-bottom: 1rem;}
.people .item .text-box p{font-size: 15px;margin-bottom: .5rem;}
.people .item .text-box h3{font-size: 1.25rem;}
@media (min-width: 992px) {
  .rule .text-box{padding: 3.5rem ;}
  .people .item{flex: 0 0 calc(100% / 3);}
}
@media (min-width: 1200px) {
  .people .item{flex: 0 0 calc(100% / 5);}
}
.table.format-table{box-shadow: 0 0 20px rgba(255,255,255,1), 1px 2px 15px rgba(0,255,209,1) ; border-radius: 1rem; color: var(--white);margin: 1rem; width: calc(100% - 2rem);}
.table.format-table,.table.format-table td,.table.format-table tbody tr{border: none;}
.table.format-table td{font-size: 1rem;padding: 1rem;}
.table.format-table td, .table.format-table th{border-top:none;}
.table.format-table td:before{width: auto;}
.table.format-table thead{background-color: transparent; }
.table.format-table th{font-size: 1.2rem;}
.articleEditorBox .table.format-table{margin-bottom: 1rem;}
@media (min-width: 992px) {
  .table.format-table thead{border-bottom: 1px solid #646464;}
}

/* 表單 */
.formContent{margin-bottom: 2rem;background: url(../images/bg.png) no-repeat center /cover;}
.cartform .col-form-label{color: var(--white);}
.cartform .smallText{color: var(--sub-color);margin-left: 5px;font-size: 14px;}
.cartform .form-control{background-color: transparent; border:1px solid #646464;color: var(--white);}
.cartform  .label-discription{color: var(--main-color);font-size: 14px;}
.cartform input[type='radio'],.cartform input[type='checkbox'] { 
  display: none;
}
.cartform .label_name{position: relative;margin-left: 8px;color: var(--white);padding-left: 23px;margin-bottom: 5px;cursor: pointer;}



.cartform .label_name:before{
  content: "";
  display: inline-block;
  width: 17px;
  height: 16px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: transparent;
  border: 1px solid #5e5e5e;
}
.cartform input[type='radio'] + .label_name:before{
   border-radius: 50%;
}
.cartform input[type='checkbox'] + .label_name:before{
   border-radius: 3px;
}
.cartform input[type='radio']:checked+.label_name:before{
  content: "\2022";
  color: var(--main-color);
  font-size: 35px;
  text-align: center;
  line-height: 10px;
}
.cartform input[type='checkbox']:checked+.label_name:before{
  content: "\f00c";
  font-family: "fontawesome";
  font-size: 15px;
  color: var(--main-color);
  text-align: center;
  line-height: 17px;
}
.picBoxs{
  display: flex;flex-wrap: wrap;margin-bottom: 1rem;justify-content: center;
}
.picBoxs .item{padding: 5px;flex:0 0 50%}
@media (min-width: 577px) {
  .picBoxs .item{
    flex:0 0 33%
  }
}
@media (min-width: 992px) {
  .picBoxs .item{
    flex:0 0 auto
  }
}
.topbanner{ background-repeat: no-repeat; background-position: center top;background-size: 100%;display: block;margin: auto;  padding: 5rem 0 2rem;}
.topbanner .titlebox{width: 100%;}
.webtitle{color: var(--white);position: relative;font-size: 1.6rem;text-align: center;font-weight: 500;}
.webtitle:after{content:''; width: 60px;height: 2px;background:var(--background);display: block;position: absolute;left: 50%;margin-left: -30px;bottom: -1rem;z-index: 1;}
.list_category{display: flex; flex-wrap: wrap; justify-content: center;margin-top: 3rem;margin-bottom: 2rem;}
.list_category li {position: relative;}
.list_category li a{color: var(--white);background-color: var(--black); padding:.6rem 1.2rem; border-radius: 5px;border:1px solid  #585858;margin: 0 6px;display: block;}
.list_category li a.active{ background: linear-gradient(35deg, #00EFFF 1%,rgba(255,0,135,1) 100%);}
.newsIntroBox .content img{width: 100%;}
@media (min-width: 992px) {
    .topbanner{ padding: 7rem 0 3rem;}
}
.sponsors-box{margin-top: 4rem;}
.sponsors-items{display: flex;flex-wrap: wrap;    padding: 0 3%;margin-bottom: 4rem;}
.sponsors-items .item{flex:0 0 calc(100% / 2 - 2rem);margin:1rem ;}
.sponsors-items .img-box{position: relative;padding: 5px;
}
.sponsors-items .img{padding-bottom: 100%;width: 100%;
  background-repeat: no-repeat;background-color: var(--white);
  background-position: center;
  background-size: 100%;
  position: relative;border-radius: 2rem;
  z-index: 2;
}
.sponsors-items .img-box:before{ content:'';width: 100%;height: 100%;
  background: linear-gradient(135deg,  rgba(12,231,255,1) 0%,rgba(147,4,255,1) 100%); 
  position: absolute;
  left:0%;top: 0%;
  border-radius: 2rem;
  z-index: 1;
  }
.sponsors-items .img-box:after{
  content: '';
    width: 102%;
    height: 102%;
    background: linear-gradient(to top , #00acff 10%,rgba(255,0,135,1) 100%);
    position: absolute;
    left: 0;
    top: 0;
    filter: blur(1rem);
    border-radius: 2rem;
} 
.sponsors-items   .text{  color: var(--white);padding: 3px;text-align: center;margin-top:-.8rem ;margin-left: 1rem;margin-right: 1rem;position: relative;z-index: 2;}
.sponsors-items   .text h4.title{margin-bottom: 0;position: relative;z-index: 3;background-color: #04042E;border-radius: 2rem;padding:8px 5px;font-size: 16px;}
.sponsors-items   .text:after{
  content: '';
  background:linear-gradient(102deg, #00FDFF 4.83%, #22C3FF 8.32%, #4190FF 11.86%, #5B64FF 15.48%, #7040FF 19.09%, #8124FF 22.7%, #8D10FF 26.32%, #9404FF 29.96%, #9600FF 33.63%, #00FDFF 63.37%, #22C3FF 67.22%, #4190FF 71.13%, #5B64FF 75.12%, #7040FF 79.11%, #8124FF 83.1%, #8D10FF 87.09%, #9404FF 91.11%, #9600FF 95.17%); 
  position: absolute;
  left:0%;top: 0%;
  border-radius: 2rem;
  width: 100%;height: 100%;
  z-index: 1;
}
.info-modal .modal-content{position: relative;border-radius: 2rem;}
.info-modal .modal-content .info-content{ 
  background: #030633;
  padding: 2rem 15px 1rem;
  z-index: 1; border-radius: 2rem;
  border: 2px solid var(--white);color: var(--white);
  position: relative;}
.info-modal .modal-content:after{ 
  content:''; width: 102%;
  height: 102%;
  background: linear-gradient(to top , #00acff 10%,rgba(255,0,135,1) 100%);
  position: absolute;
  left: 0;
  top: 0;
  filter: blur(1rem);
  border-radius: 2rem;
}
.info-modal .close{position: absolute;z-index: 2;right: 0;top: 0;}
.info-modal .close .btn{ color: var(--white);font-size: 1.6rem;    background-color: transparent;}
.info-modal .img-cont{position: relative;padding: 5px;display: flex; justify-content: center;margin-bottom: 1rem;}
.info-modal .img-cont .img{padding-bottom: 0; 
  border-radius: 15px;
  background-repeat: no-repeat;
  width: 180px;height: 180px;
  background-color: var(--white);
  background-position: center;
  position: relative;z-index: 2;
  background-size: contain;
} 
.info-modal .img-cont::before{
    content:'';width: 186px;height: 186px;
    background: linear-gradient(135deg,  rgba(12,231,255,1) 0%,rgba(147,4,255,1) 100%); 
    position: absolute;
    left:50%;
    margin-top: -3px;
    margin-left: -93px;
    border-radius: 15px;
    z-index: 1;
} 
.info-modal .text-box{color: var(--white); font-size: 15px; letter-spacing: 1px;text-align: center;}
.info-modal .text-box h3{ font-size: 1.4rem;text-align: center;}
.info-modal .text-box a{color: #E00FDA;margin-bottom: 1rem;}

@media (min-width: 768px) {
  .sponsors-items .item{flex:0 0 calc(100% / 3 - 2rem)}
}  
@media (min-width: 1200px) {
  .sponsors-items{padding: 0 4%;}
  .sponsors-items .item{flex:0 0 calc(100% / 5 - 2rem)}
}
@media (min-width: 1400px) {
  .sponsors-items{padding: 0 5%;}
  .sponsors-items .item{flex:0 0 calc(100% / 6 - 2rem)}
}
/* 直播入口 */
.page-top{height: 67px;}
.bannerOwlCarouselRow .owl-dots{position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);}
.mov-box{background: url(../images/bg3.png) repeat center ;padding: 3rem 0;}
.mov{position: relative;width: 100%;padding-bottom: 45%;margin-bottom: 2rem;}
.mov iframe{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.ADboxs{background: url(../images/bg2.png) no-repeat top /cover;padding:0 20px 3rem;display: flex;flex-wrap: wrap;justify-content: center;}

.ADboxs .item{flex:0 0 50%;padding:0 1rem;margin-bottom: 1rem;transition: all .5s ease-in-out;}
.ADboxs .item:hover{ 
  transform: translateY(-15px) scale(1.1)
}
.ADboxs .item a h3.title{
  margin-bottom: 0;
  position: relative;
  z-index: 3;
  background-color: #04042E;
  border-radius: 2rem;
  padding: 10px 8px;
  font-size: 16px;}
.ADboxs .item a .text{
    color: var(--white);
    padding: 3px;
    text-align: center;
    margin-top: -0.8rem;
    margin-left: 2rem;
    margin-right: 2rem;
    position: relative;
    z-index: 2;
}  
.ADboxs .item a .text:after{
  content: '';
  background:linear-gradient(102deg, #00FDFF 4.83%, #22C3FF 8.32%, #4190FF 11.86%, #5B64FF 15.48%, #7040FF 19.09%, #8124FF 22.7%, #8D10FF 26.32%, #9404FF 29.96%, #9600FF 33.63%, #00FDFF 63.37%, #22C3FF 67.22%, #4190FF 71.13%, #5B64FF 75.12%, #7040FF 79.11%, #8124FF 83.1%, #8D10FF 87.09%, #9404FF 91.11%, #9600FF 95.17%); 
  position: absolute;
  left:0%;top: 0%;
  border-radius: 2rem;
  width: 100%;height: 100%;
  z-index: 1;
}

@media (min-width: 992px) {
  .page-top{height: 74px;}
  .ADboxs .item{flex:0 0 25%;}
  .ADboxs{padding:0 60px 3rem;}
}
@media (min-width: 1200px) {
  .ADboxs .item{flex:0 0 calc(100% / 5 - 3%);}
}

/* 最新消息 影音專區 培訓花絮 */
.page-banner{ background-repeat: no-repeat;background-size: cover;background-position: center; margin-bottom: 1rem;}
.page-banner .container{position: relative;padding-bottom: 40%;}
.page-text{position: absolute;text-align: center;width: calc(100% - 30px);top: 50%;}
.page-title{
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 400;
  position: relative;
  letter-spacing: 10px;
}
.page-title:after {
  content: '';
  width: 60px;
  height: 2px;
  background: var(--background);
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  bottom: -1rem;
  z-index: 1;
}
.directoryRow ul{display: flex;flex-wrap: wrap;width: 100%;margin-top: 2rem;margin-bottom: 1rem;}
.directoryRow ul li a{padding: 0.8rem .5rem;position: relative; color: var(--main-color); font-size: 14px;}
.directoryRow ul li:not(:last-child) a:after { content:'|';position: absolute;right: -2px;}
.searchForm{display: flex; flex-wrap: wrap;justify-content: center; width: 100%;}
.searchKeyBox {background: var(--black);border:1px solid #585858; border-radius: 5px;display: flex;color: var(--white);}
.searchKeyBox .form-control{ flex:calc(100% - 60px);background:transparent;border: transparent 1px solid;color: var(--white);}
.search-select{background:transparent;border: transparent 1px solid; }
.search-select option{
  background-color: var(--black);    color: var(--white);
} 
.newsList{margin: 2rem 0 4rem;}
.newsList .list a{display: flex;flex-wrap: wrap;margin-bottom: 2rem;}
.newsList .list a .img, .activityGridItem .activityBgImg,.liveList a .img{flex:0 0 100%;padding-bottom: 56%;background-repeat: no-repeat;background-size: cover; background-position: center; }
.newsList .list a .text{ flex:0 0 100%;padding: .5rem 0;}
.newsList .list a .time{ color: var(--main-color);margin-bottom: 5px;}
.newsList .list a .title,.activityGridItem .content h3,.liveStreamBox h3{font-size: 1.25rem;line-height: 1.5;font-weight: 500;}
.newsList .list a .cont,.activityGridItem .content p{line-height: 1.5;letter-spacing: 1px;color: var(--main-color);}
.morebtn{ position: relative; border: 1px solid rgb(129, 129, 129);   overflow: hidden; z-index: 1;  background: linear-gradient(35deg, #00EFFF 1%,#FF00FF 100%); color: var(--white);border-radius: 30px;width: 110px;justify-content: center;font-size: 15px;}
.morebtn:after{    
    background-color: rgba(0,0,0);
    content: "";
    z-index: -1;
    position: absolute;
    width: 200%;
    padding-top: 200%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top:-150px;
    left: -230%;
    transition: all 0.3s ease-in-out;
}
.morebtn:hover:after {
  left: -65%;
} 
.pager,.pagination{display: flex;flex-wrap: wrap;justify-content: center;margin-bottom: 3rem;font-size: 14px;}
.pager li{padding:5px 15px;font-size: 1.5rem;border: 1px solid #3d3d3d;background-color: var(--black); border-radius: 5px;margin: 0 15px;}
.pager li a{display: block;}
.pagination li {padding:5px 15px; border: 1px solid #3d3d3d;margin:0 3px;}
.newsIntroBox .title,.newsIntroBox .content,.activityGridItem.title,.activityGridItem .content{ color: var(--white);line-height: 1.5;letter-spacing: 1px;}
.newsIntroBox .time{ color: var(--main-color);display: block;margin-bottom: 5px;}
.mt-3rem{margin-top: 0;}
.mt3rem{margin-top: 3rem;}
@media (min-width: 992px) {
  .mt-3rem{margin-top: -3rem;}
  .page-title{
    font-size: 1.8rem;
  }
  .page-banner .container{padding-bottom: 20%;}
  .search_newsbox{margin-top: -4rem;}
  .newsList .list a .img{flex:0 0 30%;padding-bottom: 18%;margin-right: 1.5rem;}
  .newsList .list a .text{ flex:0 0 calc(100% - 30% - 1.5rem);}
  .newsList .list a .title,.activityGridItem .content h3,.liveStreamBox h3{font-size: 1.4rem;line-height: 1.5;}
}
.activityGrid{display: flex;flex-wrap: wrap;margin-bottom: 2rem;}
.activityGridItem{flex: 0 0 98%;width: 98%;margin: 1% 1% 2rem;}
@media (min-width: 992px) {
  .activityGridItem{flex: 0 0 31.33%;width: 31%;}
  .activityGridItem .activityBgImg{flex:0 0 30%;padding-bottom: 56%;}
}
.liveStreamBox{display: flex;flex-wrap: wrap;}
.liveStreamBox .contBox{background-color: var(--white); padding: 1rem;}
.liveStreamBox .contBox h3{ color: var(--black);margin-bottom: 1.5rem;}
.liveStreamBox .morebtn{margin-top: -1rem;}
.liveStreamBox .title,.liveStreamBox .content{ color: var(--white);margin-top: 1rem;}