@charset "utf-8";
.main_vi {position:relative;background: #333;height:100vh;max-height:100vh;padding: 0;color: #fff;overflow: hidden; }
.main_vi li{background-position:center center;background-size:cover;background-repeat:no-repeat;height:100vh;max-height:100vh;color:#fff}

.main_vi .bg{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.1);}
.main_vi .bg-overlay{position:absolute;top:0;left:0;width:100%;height:100%;opacity: .5 !important;}
.main_vi .bn_txt{position:relative;z-index: 3} 
.main_vi li .bn_tit{letter-spacing:-2px}
/*
@media screen and (max-width:575px) {
    .main_vi {height:700px;}
    .main_vi li{height:700px;}
    .bn_txt{}
}

*/
.text-primary-shadow {
    text-shadow: 0.03em 0.03em 0 #fff;
}
.text-white-stroke {
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.bn-display {
    font-size: calc(2.675rem + 4.1vw);
    font-weight: 700;
    line-height: 1.4;
}

.main_vi li .bn_cate{opacity:0; transform:translateY(20px);
-webkit-transition: all 0.3s ease-in .3s;
-moz-transition:  all 0.3s ease-in .3s;
-ms-transition: all 0.3s ease-in .3s;
-o-transition: all 0.3s ease-in .3s;
transition: all 0.3s ease-in .3s}

.main_vi li .bn_tit{opacity:0; transform:translateY(20px);
-webkit-transition: all 0.5s ease-in .5s;
-moz-transition:  all 0.5s ease-in .5s;
-ms-transition: all 0.5s ease-in .5s;
-o-transition: all 0.5s ease-in .5s;
transition: all 0.5s ease-in .5s}

.main_vi li .bn_detail{opacity:0; transform:translateY(20px);
-webkit-transition: all 0.8s ease-in .8s;
-moz-transition:  all 0.8s ease-in .8s;
-ms-transition: all 0.8s ease-in .8s;
-o-transition: all 0.8s ease-in .8s;
transition: all 0.8s ease-in .8s}

.main_vi li .bn_link{opacity:0; transform:translateY(20px);
-webkit-transition: all 1s ease-in 1s;
-moz-transition:  all 1s ease-in 1s;
-ms-transition: all 1s ease-in 1s;
-o-transition: all 1s ease-in 1s;
transition: all 1s ease-in 1s}


.main_vi li .active-slide .bn_cate{opacity:1;transform:translateY(0)}
.main_vi li .active-slide .bn_tit{opacity:1;transform:translateY(0)}
.main_vi li .active-slide .bn_cont{opacity:1;transform:translateY(0)}
.main_vi li .active-slide .bn_link{opacity:1;transform:translateY(0)}

.main_vi li .bn_detail{opacity:0;
-webkit-transition: all 1s ease-in .5s;
-moz-transition:  all 1s ease-in .5s ;
-ms-transition:  all 1s ease-in .5s;
-o-transition: all 1s ease-in .5s;
transition: all 1s ease-in .5s}
.main_vi li .active-slide .bn_detail{opacity:1;transform:translateY(0)}

.main_vi li .bn_view{opacity:0;
-webkit-transition: all 1.3s ease-in 1s;
-moz-transition: all 1.3s ease-in 1s;
-ms-transition: all 1.3s ease-in 1s;
-o-transition: all 1.3s ease-in 1s;
transition: all 1.3s ease-in 1s}
.main_vi li .active-slide .bn_view{opacity:1}

.main_vi .bn_subject{position: absolute;bottom:80px;right:40px;}
.main_vi .main_subject{position: absolute;width:100%;font-size:5vw;top:40%;}

.main_vi #bx_pager{position:absolute;bottom:20px;right:20px;z-index:99}
.main_vi #bx_pager a{color:#fff;display:inline-block;padding:5px;line-height:20px;opacity:0.5}
.main_vi #bx_pager span{display:inline-block;width:0;height:1px;background:#fff;vertical-align:top;margin-top:10px;margin-left:8px;
-webkit-transition: all 0.3s ease-in;
-moz-transition:  all 0.3s ease-in ;
-ms-transition: all 0.3s ease-in ;
-o-transition: all 0.3s ease-in ;
transition: all 0.3s ease-in }
.main_vi #bx_pager .active{opacity:1}
.main_vi #bx_pager .active span{width:20px}      
.main_vi .btn_bottom{position:absolute;bottom:0;left:50%;width:81px;height:37px;background:url('../img/btn_bottom.png');border:0;margin-left:-40px;text-indent:-999px;overflow:hidden}

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
  background: url('/assets/img/controls.png') no-repeat 0 -32px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  background: url('/assets/img/controls.png') no-repeat -43px -32px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
 // display: none;
}