:active, :focus { outline: none !important; }
.btn-blue { color: #fff; background-color: #0a5fbc; display: inline-block; padding: 10px 30px; border-radius: 2px; letter-spacing: 1px; margin-top: 1rem;}
.btn-blue:hover {color: #fff; background-color: #007aff;}
#top_msg {background-color: #0082cf; opacity: 1; height: 42px; text-align: center; width:100%;}
#top_msg a {color: #fff; font-size: 1.5rem; font-weight:bold; line-height: 44px; padding:0; margin:0; }
#top_msg a:hover > span  {color:#fff; border-color:#fff;}

#bt_link {width: 100%; border-radius: 0;}
img[usemap] { border: none; height: auto; max-width: 100%; width: auto;}
#topmenu { border-bottom: 1px solid #f3f3f3; box-shadow: rgba(0,0,0,0.2) 0 10px 20px 0; -webkit-box-shadow: rgba(0,0,0,0.2) 0 10px 20px 0;}
#subnav {width: 100%;left: 0;margin: 0 auto;padding: 0;z-index: 99;background-color: #000;opacity: 1;-webkit-transition: all .15s ease-in-out;transition: all .15s ease-in-out;
    position: fixed;
    -webkit-box-shadow: 0 0 16px 0 rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 16px 0 rgba(0,0,0,0.8);
    box-shadow: 0 0 16px 0 rgba(0,0,0,0.8);
    overflow: hidden;
}
.subnav-container {margin:0 auto;}
.subnav-category { color: #eee; margin-left:15px;}
.subnav-left { position: relative; width: auto; display: inline-block; max-width: 25%;}
.subnav-right {position: relative; display: inline-block; transition: all .6s;}
.subnav-right .breadcrumb-list { height: 100%; margin: 0; padding: 0; display: inline-block; float: left;}
.breadcrumb-element { height: 100%;  margin: 0;  padding: 0 15px; display: inline-block; float: left; transition: all .25s;}
.breadcrumb-link { display: inline-block; color: #ccc; transition: color .5s;}
.breadcrumb-link:link, .subnav-category:link {color: #ccc !important;}
.breadcrumb-link:visited, .subnav-category:visited {color: #ccc !important;}
.breadcrumb-link:hover, .subnav-category:hover { color: #fff !important;}
.breadcrumb-link:active, .subnav-category:active {color: #ccc !important;}
.breadcrumb-element.selected { border-bottom: 3px solid #0082cf;}
.breadcrumb-list span.bd-1 {border: 1px solid #00ffe3; padding: 5px 8px; margin-left: -8px;}
.singleSlideBanner { display: block; width: 100%; background-repeat: no-repeat; background-color: #150715; background-size: auto 100%;}
.wow { visibility: hidden; }

.SubListTxt ul { margin:0 0 20px; padding:0 0 0 12px; list-style-type: none; }
.SubListTxt li { background:url(/images/arrow2.gif) 0 15px no-repeat; padding:10px 0 10px 12px; font-size:14px; border-bottom: 1px solid #ddd;}
.SubListTxt li:last-child {border:0;}

.container-fluid { background: #eeefef; padding:40px 0;}
.container-fluid h3 {font-size:20px; text-align:center; font-weight:600;}
.col-border {background-color:#fff; border:1px solid #40a838; padding:20px 30px; }

.newtable thead tr td { background: #fff !important; font-size:17px; color:#313131; }

.libraries-block-link, .tools-block-link {
    height: 130px;
    line-height: 130px;
    display: block;
}
.libraries-block a img {
    padding: 0 10px 5px;
    max-height: 100%;
    max-width: 200px;
    display: inline-block;
}
.libraries-block h4, .tools-block h4 {
    font-size: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-bottom: 20px; 
}
.tools-block a img {
    padding-bottom: 5px;
    display: inline-block;
}

h1 {font-size:34px;}
h4 {line-height:1.44;}
.textcomp p {font-size:16px; }
.img-lab {border:1px solid #ababab;}

.NVColor {color: #76b900;}
.NVColor a:link {color: #76b900; }
.NVColor a:visited {color: #76b900; }
.NVColor a:hover {color: #76b900; }
.NVColor a:active { color: #76b900; }
.bt-NVcolor {color: #fff; background-color: #76b701; display: inline-block; padding: 10px 30px; border-radius: 2px; letter-spacing: 1px; margin-top: 1rem;}

.qr {max-width:280px;}
.qr2 {max-width:220px;}

.well {
  background-color: #fff;
  padding: 5px !important;
  border: 1px solid #383838 !important; 
}
.border-1 {border: 1px solid #ddd;}

.well small {
  margin-left: 20px;
  margin-right: 10px;
  display: block;
  margin-bottom: 20px;
}
.pointer {cursor:pointer;}

.btn-primary {
    color: #ffffff;
    background-color: #76b900;
    border-color: #76b900;
}
.btn-NVcolor {
    color: #fff;
    background-color: #76b701;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 2px;
    letter-spacing: 1px;
}

.float-l-md {float:left; margin-top:-10px;}

ul.list-center { display: inline-block; }
ul.list-center li {
    line-height: 38px;
    float: left;
    margin-left: 50px;
    margin-right: 10px;
    min-width: 40%;
    text-align: left;
    font-size: 16px;
}
#top_msg span.unibrow-btn { padding: 2px 10px 1px 10px; border: 2px solid #fff; margin-left: 10px; display: inline-block;line-height: 22px;}

#about { background-color: #303030; color:#fff; width: 100vw; padding-bottom:0 !important;border-top: 1px solid #464646;}
#about .textcomp p {max-width: 700px; margin: 0 auto;}
.about-wrapper {display: flex; justify-content: space-evenly; padding:20px 0; position: relative; z-index: 10;}
.about-wrapper .item .qrcode img {border: 4px solid #fff;}
.about-wrapper .item .word .name.left:after { right: 0; border-width: 0 6px 6px 0;}
.about-wrapper .item .word .name.right:after { left: 0; border-width: 0 0 6px 6px;}
#DOCA_about {max-width:670px !important; width:100%; position:relative;z-index:0;}
.blog-wrapper .item {border-bottom:1px solid #ddd;}
.blog-wrapper .btn.more {margin-top: 30px;float: right;}
#download .caption {padding:5px 20px !important;}
.slip {position: absolute; bottom: 10px; width: 20px; z-index: 10; text-align: center; left: 50%; margin-left: -10px; display: none;}
#QR {max-width: 180px}

#download { background-color: #f7f7f7; border-top: 1px solid #ddd;}
#experience { background-color: #fefefe; overflow:hidden; border-top: 1px solid #ddd;}
#experience>.container {max-width: calc(90% - 70px);}
#experience .owl-item img {
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
}
#experience .Carousel_wrap {
    padding: 0;
    margin: 0 44px;
    height: 100%;
    position: relative;
    background-color: #fefefe;
}
#experience .owl-item {  
    border-right:1px solid #ddd;
    padding: 15px 0;
}
#experience .owl-stage-outer { margin-right: 4px;}
#experience .item, #experience .w-box,  #experience .w-box a {height:100%;}
#experience .owl-item:nth-child(odd) { background-color: #fff;}

#experience .w-box {
    width:90%;
    margin:0 auto;    
    position: relative;   
    cursor: pointer;    
}

#experience .w-box>a { position: relative; display:block; }
#experience .w-box>a:hover {margin-top: -5%;}
#experience .w-box>a h2 {font-size:16px; font-weight: 600;}
#experience .w-box>a h2, .w-box>a h3 {position: relative; color:#545454; margin: 0 5px; text-overflow: ellipsis; white-space: nowrap;}
#experience .w-box>a h3 {font-size:13px; padding: 0 20px 0 24px; line-height: 1.4; color: #fff; margin-top: -40px; height: 40px;}

#experience .owl-prev, #experience .owl-next {
    width: 40px;
    height:40px;
    position: absolute;   
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
    top: 40%;
    color:#fff;
    font-weight:bold;
    padding-top:5px;
    text-shadow: 0 0 10px #ffffff, 0 0 1px #fff;
    border-radius: 50%;
}

#experience .owl-prev {left: -50px; padding-right: 5px;}
#experience .owl-next {right: -50px; padding-left:5px;}
#experience .owl-nav .fa:hover { background-color: transparent;}

#activity {padding-bottom:70px !important;background-color: #525252;}
#activity > .container {max-width: calc(90vw - 30px);}
#activity .carousel-inner>.item { padding:0; min-height:unset;}
#activity .thumbnail {margin-bottom: 0;border: 0;padding: 0;border-radius:0;}
#activity .thumbnail>img {height:100%;}
#activity div[class*="col-"] {padding: 0;}
#activity .caption {padding: 0 25px 25px 35px;width: 95%;color: #333;display: flex;flex-direction: column;height: 100%;justify-content: flex-end;}
#activity .carousel-inner {border:1px solid #dfdfdf}
#activity .carousel-indicators {top:unset; bottom: 0;margin-bottom: -40px; background:unset; right: calc(50% - 25px);}
#activity .carousel-indicators li {background-color: rgb(0 0 0 / 50%);border: 1px solid #727272;}
#activity .carousel-indicators .active {background-color: #e9e9e9;}
#activity .carousel-control {
    position: absolute;
    width: 30px;
    top: 28px;
    font-size: 15px;
    background: #ffffff;
    background-image: unset;
    color: #3c3c3c;
    text-align: center;
    bottom: unset;
    border: 1px solid #d2d2d2;
    border-radius: 2px;
    text-shadow: none;
    padding: 4px 7px;
}
#activity .carousel-control.right {right: 28px; padding-left: 10px;}
#activity .carousel-control.left {right: 68px; left: unset; padding-right: 10px;}

.panel-body h3 { margin-left: 30px;}
.panel-body .list-center {padding-left: 0;}

/* Track */
.scroll-y::-webkit-scrollbar { width: 3px;}
.scroll-y::-webkit-scrollbar-track { background-color:#cecece; border-left:1px solid #dde0e4; border-radius: 0px;}
.scroll-y::-webkit-scrollbar-thumb { background: #7f7f7f; border-radius: 0px;}
.scroll-y::-webkit-scrollbar-thumb:hover { background: #9b9b9b;}
.scroll-x::-webkit-scrollbar-thumb {border-radius:0; background-color:#7f7f7f; }
.scroll-x::-webkit-scrollbar {height: 4px; background-color:#f2f2f2;}
.scrollsmooth, .scroll-x, .scroll-y {scroll-behavior: smooth;}

/* Video Block
================================================== */
.video-block .nav-tabs .nav-item.show .nav-link, .video-block .nav-tabs .nav-link.active {background: transparent;}
.video-tab {width: 100%;}
.video-tab .row {width: 100%;background: #f7f7f7;padding: 25px 10px}
.video-block {background-color:#303030;border-top: 1px solid #000;}
.video-block div[class*="col-"], video-block .post-thumb {max-height: 350px;}
.video-block .scroll-y {overflow-y: auto;padding-right: 0;max-height: 350px;}
.video-block .row {margin-left: 0;margin-right: 0}
.video-block .row .row {border: 1px solid #c8c8c8;}
.video-block .col-lg-7 {max-height: 350px;overflow: hidden;}
.video-block .tab-content.muti:before {display: block;background-color: #f7f7f7;position: absolute;z-index: 2;content: '';bottom: 40px;left: -5px;width: 20px;height: 20px;-webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg);transform: translateY(-50%) translateX(50%) rotate(-45deg);}
.video-block.color-green a.post-cat {background: #32b336;color: #fff;font-size: 11px;text-transform: uppercase;font-weight: 600;padding: 1px 5px}
.video-tab-title {color: #fff;font-size: 18px;text-transform: uppercase;margin: 0 0 30px 15px}
.video-tab .post-overaly-style .post-content {padding: 0 30px 37px}
.video-tab .post-thumb {transition: all .5s;}
.video-tab .post-title {font-size: 20px !important; margin-top: 0;}
.video-tab .nav-tabs {background-color: rgb(241 241 241 / 50%);box-shadow:inset rgb(0 0 0 / 20%) 8px 0px 20px 0;}
.video-tab .nav-tabs > li {width: 100%;clear: both;display: flex;margin-bottom: -1px;border: 1px solid #afafaf;padding: 25px 35px 32px}
.video-tab .nav-tabs > li:hover {background-color: rgb(224 224 224 / 40%);}
.video-tab .nav-tabs > li.active {background-color: rgb(232 232 232 / 63%);}
.video-tab .nav-tabs > li > a {background: 0 0;border: 0;padding: 0;display: block !important;width:100%; height: 100%;}
.video-tab .nav-tabs > li > a.active .post-thumb img {border-color: #fff;}
.video-tab .nav-tabs > li > a .post-thumb img {max-width: 110px;min-height: 85px;border: 2px solid rgba(255, 255, 255, 0.5);}
.video-tab .nav-tabs > li > a .post-thumb {float: left;margin-right: 20px;position: relative;overflow: hidden}
.video-tab .nav-tabs > li > a h3 {color: #1c1c1c;font-weight: 400;line-height: 1.4;font-size: 15px !important;margin: 0;padding-top: 3px}
.video-tab .tab-content > .tab-pane {border-bottom: 1px solid #000;}
.video-tab li.active>a:hover, .video-tab li.active>a:focus, .video-tab li.active>a:active {background-color:unset !important; border:0;}
.video-icon {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 11;}
.video-icon:after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
    opacity: 1;
    display: block;
    z-index: 3;
    content: '';
    background: url(../images/btn_player.png) no-repeat;
    background-size: 100% 300%;
    border-radius: 50%;
    transition: opacity .3s cubic-bezier(0.165, 0.840, 0.440, 1.000), transform .3s cubic-bezier(0.165, 0.840, 0.440, 1.000);  
}
.video-icon:hover:after, .video-icon:focus:after {opacity: 1;-webkit-transform: scale(1.1, 1.1) rotate(0.001deg);-ms-transform: scale(1.1, 1.1) rotate(0.001deg);transform: scale(1.1, 1.1) rotate(0.001deg);background-position: 0 50%;}
.nav-tabs > li > a.active:hover, .nav-tabs > li > a:hover, .nav-tabs > li > a {border: 0;background: none;}
.post-thumb.hover {filter: brightness(50%);}
.video-block .post-overaly-style:before {
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%);
    background: -webkit-gradient(linear, left bottom, left bottom, color-stop(60%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, .85)));
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%)
}
.post-thumb > a, .video-block .post-overaly-style .post-thumb {display: block;width: 100%;background-size: auto 100%;background-position: top center;background-repeat: no-repeat;}
.post-thumb {max-width: 100%;position: relative;overflow: hidden;}
.bg-pos-center {background-position: center !important;}
.bg-cover {background-size: cover !important;background-repeat: no-repeat;}

/*-- Post Overaly --*/
.post-overaly-style {position: relative;overflow: hidden}
.post-overaly-style:before {content: " ";position: absolute;display: block;width: 100%;height: 100%;z-index: 1;bottom: 0;left: 0;}
.col-md-12 > .post-overaly-style:before, .video-block .post-overaly-style:before {
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%);
    background: -webkit-gradient(linear, left bottom, left bottom, color-stop(60%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, .85)));
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%)
}

.col-md-6 > .post-overaly-style:before, .widget .post-overaly-style:before {
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .85) 100%);
    background: -webkit-gradient(linear, left bottom, left bottom, color-stop(80%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, .85)));
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .85) 100%);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .85) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .85) 100%)
}

.post-overaly-style .post-content {position: absolute;bottom: 0;padding: 10px 20px;color: #fff; font-size: 18px; z-index: 1;}
.post-overaly-style .post-title a {color: #fff}
.post-overaly-style .post-date {color: #fff}
.post-thumb {max-width: 100%;position: relative;overflow: hidden}
.post-thumb img {display: block;width: 100%;transition: all .3s ease-out}
.post-block-style:hover .post-thumb img, .post-overaly-style:hover .post-thumb img {transform: scale(1.15)}
.post-block-style.post-float:hover .post-thumb img {transform: none}
.thumb-float-style .post-cat {position: absolute;top: 20px;left: 20px;z-index: 1}

/* Post overaly Top Content */
.post-overaly-style.contentTop .post-content {top: 0;bottom: auto;}
.post-overaly-style.contentTop:before {
    top: 0;
    left: 0;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.85)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
}

/*-- Post Overaly Textcenter --*/
.post-overaly-style.text-center .post-content {padding: 30px 30px 60px;}
.post-overaly-style.text-center {margin-bottom: 30px;}
.post-overaly-style.text-center:last-child {margin-bottom: 0;}
.post-overaly-style.text-center .post-thumb img {min-height: 260px;}
.post-overaly-style.text-center .post-meta span {padding: 0;margin: 0;}
.post-overaly-style.text-center:before {
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
    background: -webkit-gradient(linear, left bottom, left bottom, color-stop(60%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.85)));
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
}



@media (max-width: 1999px) {
    .float-l-md {width:100%;}
}
@media (min-width: 1350px) {
    #container_wrap section {padding-top:50px; padding-bottom:50px;}
    #container_wrap h2 { font-size:28px;}
    .singleSlideBanner { background-position-x: 100%;}
}

@media (max-width: 1349px) and (min-width: 1024px) {
    #container_wrap section {padding-top:45px; padding-bottom:45px;}
    #container_wrap h2 { font-size:26px;}
    .singleSlideBanner { background-position-x: calc(35vw);}
}

@media (max-width: 1023px) and (min-width: 992px) {
    #container_wrap section {padding-top:40px; padding-bottom:40px;}
    #container_wrap h2 { font-size:24px;}
    .singleSlideBanner { background-position-x: calc(25vw);}
}

@media (min-width: 1200px) {
    .singleSlideBanner { height:320px; }
    .singleSlideBanner .container {padding-top:50px;}
    .singleSlideBanner img {max-width:350px; padding-top: 85px;}
    .float-l-md {width:78%;}
    .panel-body > .col-lg-8 {border-right:1px solid #ddd; margin-right: -15px;}
    .panel-body > .col-lg-4 {margin-left: 15px;}
    .textcomp h3 {font-size:20px; line-height:1.8;}
}

@media (max-width: 1199px) {
    .panel-body > .col-lg-4 { padding-top: 15px; border-top:1px solid #ddd;}
    .video-block .post-overaly-style .post-thumb {background-size: 100% 100% !important;}
}

@media (max-width: 1199px) and (min-width: 768px) {
    .singleSlideBanner { height:300px;}
    .singleSlideBanner .container {padding-top:45px;}
    .singleSlideBanner img {max-width:320px; padding-top: 80px;}
    .textcomp h3 {font-size:18px; line-height:1.7;}
}
@media (min-width: 992px) {
    .subnav-category {font-size: 20px;}
    .border-left-lg {border-left:1px solid #ddd;}
     #DOCA_about { margin: -60px auto 0 auto;}
    .video-tab .nav-tabs > li {border-left-color: #fff;}
    .video-block .tab-content {border-left: 1px solid #fff;}    
}

@media (max-width: 991px) {    
    h1.NVColor {font-size: 26px;}
    .text-center-sm { text-align: left; max-width: 570px; margin-left: auto; margin-right: auto; }  
    .video-tab .tab-content > .tab-pane {border-bottom: 0;}
    .video-tab .nav-tabs > li.active > a:before {display: none;}
}
@media (max-width: 991px) and (min-width: 768px) {
    #container_wrap section {padding-top:35px; padding-bottom:35px;}
    #container_wrap h2 { font-size:22px;}
    .singleSlideBanner { background-position-x: calc(15vw);}
    .subnav-category {font-size: 18px;}
    .subnav-right {display:none;}
    #DOCA_about { margin: -40px auto 0 auto;}
}

@media (min-width: 641px) {
    .flex_col {display: flex; justify-content: space-between; flex-wrap: wrap; padding: 30px 35px 20px;}
    .flex_col .flex_col_item, .flex_col li {width: calc(48%); padding-bottom: 15px;}
}

@media (max-width: 640px) {
    h1.NVColor {padding-right: 25px; padding-left: 25px;}
    .flex_col:not(.col-border) {padding: 10px 5px;}
    .flex_col .flex_col_item, .flex_col>li {padding-bottom: 5px;}
}

@media (min-width: 768px) {
    .singleSlideBanner {background-image: url(../images/DOCA_Banner_L.webp);}
    #subnav { top: -112px;}
    .subnav-container, .subnav-left, .subnav-right { height:70px; padding:0; }
    #container_wrap.stuck #subnav {top:55px;}
    .breadcrumb-link {font-size: 14px; line-height: 70px;}
    .subnav-category {line-height: 70px;}
    .col-border:not(:first-child) { border-left:0; }
    .about-wrapper .item { padding: 12px; display: flex; justify-content: center; cursor: zoom-in;}
    .about-wrapper .item + .item {margin-left: 30px;}
    .about-wrapper .item .word .name { width: 80px; height: 40px; line-height: 40px; text-align: center; background: #0062ab; font-size: 15px; font-weight: 500; color: #FFFFFF;position: relative;}
    .about-wrapper .item .word .name:after { position: absolute; bottom: -6px; content: ''; width: 0px; height: 0px; border-color: transparent #0062ab; border-style: solid;}
    
    .about-wrapper .item .word .desc { margin-top: 12px; font-size: 14px; font-weight: 400; color: #FFFFFF; line-height: 20px; }
    .about-wrapper .item .qrcode {width: 40px; height: 40px;}
    .about-wrapper .item .qrcode img {width: 100%; height: 100%;}

    .blog-wrapper .item + .item { margin-top: 8px;}
    .blog-wrapper .item a {padding: 0 20px;height: 40px;display: flex;align-items: center;}
    .blog-wrapper .item .num-wrapper {flex-shrink: 0;display: flex;justify-content: center;align-items: center;width: 24px;height: 28px;}
    .blog-wrapper .item .num-wrapper .first, .blog-wrapper .item .num-wrapper .second, .blog-wrapper .item .num-wrapper .third {width: 100%;height: 100%;background-position: center center;background-repeat: no-repeat;background-size: contain;}
    .blog-wrapper .item .num-wrapper .first {background-image: url(../images/icon_top01.png);}
    .blog-wrapper .item .num-wrapper .second {background-image: url(../images/icon_top02.png);}
    .blog-wrapper .item .num-wrapper .third { background-image: url(../images/icon_top03.png);}
    .blog-wrapper .item .num-wrapper .num { font-size: 14px; font-weight: 600;color: #909399;}
    .blog-wrapper .item .text { margin-left: 15px; font-size: 16px; font-weight: 400; color: #838383;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
}

@media (max-width: 767px) {
    #container_wrap section {padding-top:30px; padding-bottom:30px;}
    #container_wrap h2 { font-size:20px;}
    #subnav { top: -97px; height:97px;}
    .subnav-container, .subnav-left, .subnav-right { height:55px;}
    #container_wrap.stuck #subnav {top:52px;}
    .subnav-category {font-size: 17px; line-height: 55px;}
    .breadcrumb-link {font-size: 13px; line-height: 55px;}
    .singleSlideBanner h3 {margin-left:15px;}
    .col-border:not(:first-child) { border-top:0; }
    .textcomp p {text-align:left;}
    #about .textcomp p {text-align:center; font-size:14px;}
    h1.NVColor {font-size: 22px;}
    h4 {font-size:17px;}
    ul.list-center li {width: 100%; float: none; font-size:18px; line-height: 1.8;}
    .textcomp h3 {font-size:16px; line-height:1.6;}
    .about-wrapper .item { padding: 5px; display: flex; justify-content: center; align-items: flex-start; }
    .about-wrapper .item + .item { margin-left: 10px;}
    .about-wrapper .item .word .name {width: 60px;height: 40px;line-height: 40px;text-align: center;background: #0062ab;font-size: 12px; font-weight: 500;color: #FFFFFF;position: relative;}
    .about-wrapper .item .word .name:after {position: absolute;bottom: -3px;content: '';width: 0px;height: 0px;border-color: transparent #0062ab;border-style: solid;}
    .about-wrapper .item .word .desc {margin-top: 12px;font-size: 10px; font-weight: 400;color: #FFFFFF;line-height: 14px;}
    .about-wrapper .item .qrcode {flex-shrink: 0;width: 40px;height: 40px;}
    .about-wrapper .item .qrcode img {width: 100%;height: 100%;}
     #DOCA_about { margin: -10px auto 0 auto;}
    .blog-wrapper .item a {padding-left: 15px;padding-right: 16px;height: 30px;display: flex;align-items: center;}
    .blog-wrapper .item .num-wrapper {flex-shrink: 0;display: flex;justify-content: center;align-items: center;width: 17px;height: 20px;}
    .blog-wrapper .item .num-wrapper .first, .blog-wrapper .item .num-wrapper .second, .blog-wrapper .item .num-wrapper .third {width: 100%;height: 100%;background-position: center center;background-repeat: no-repeat;background-size: contain;}
    .blog-wrapper .item .num-wrapper .first {background-image: url(../images/icon_top01.png);}
    .blog-wrapper .item .num-wrapper .second {background-image: url(../images/icon_top02.png);}
    .blog-wrapper .item .num-wrapper .third { background-image: url(../images/icon_top03.png);}
    .blog-wrapper .item .num-wrapper .num { font-size: 14px; font-weight: 500;color: #909399;}
    .blog-wrapper .item .text { margin-left: 8px; font-size: 12px;font-weight: 400;color: #838383;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .video-tab .nav-tabs > li > a h3 {font-size: 15px !important;}
    .video-tab .nav-tabs > li {padding: 15px 18px 18px;}
    .video-tab .row {padding: 15px 0;}
    .video-tab .post-title {font-size: 17px !important;}
    .video-block .post-overaly-style .post-thumb {
        height: calc(56vw - 80px) !important;
    }

     #experience .Carousel_wrap { margin: 0;}
    .slip {display:block;}
     #experience .slip {bottom: -20px;margin-left: -12px;}
}

@media (max-width: 767px) and (min-width: 461px) {
    .singleSlideBanner {background-image: url(../images/DOCA_Banner_M.webp); max-height: 280px; background-position-x: 40%; height: calc(77vw);}
    .singleSlideBanner .container {padding-top:30px;}
    .singleSlideBanner img {max-width:45vw; padding-top: 80px;}
    .subnav-left { max-width: none; }    
}
@media (min-width: 581px) {
    .btn-fr {float: right; margin-top: -10px; margin-right: 5px;}
}

@media (max-width: 580px) {
    h1.NVColor {font-size: 20px;}
    h3 {font-size: 18px; line-height:1.4; padding-top:0;}
    h3.NVColor {font-size: 18px !important; line-height:1.2 !important;}
    .btn-fr { width: calc(100% - 10px);margin-top: 10px;}
    .img-area h1 {font-size:24px;}
    .textcomp {padding:0 !important}
    .textcomp h3 {font-size:15px !important; line-height:1.4 !important;}
    .padding-xs-x30 { padding-left:30px !important; padding-right:30px !important;}
    .panel-group {margin-bottom: 10px;} 
     #experience .w-box>a h2, .w-box>a h3 {margin:0 5px;}
     #experience .w-box>a h2 { font-size: 15px;}
     #experience .w-box>a h3 {font-size: 14px; line-height: 1.3;} 
}

@media (max-width: 575px) {
    .video-tab .post-title { font-size: 15px !important;}
}
@media (max-width: 460px) {
    .singleSlideBanner {background-image: url(../images/DOCA_Banner_S.webp); max-height: 360px; background-position-y: 50%; background-size: cover; height: calc(87.5vw);}
    .singleSlideBanner .container {padding-top:20px;}
    .singleSlideBanner .h3 { line-height: 50px; margin-left: 5px; font-size: 22px;}
    .singleSlideBanner p { display:none;}
    .panel-body h3 {font-size: 18px; margin-left: 10px;}
    .subnav-left { max-width: none; }
    .singleSlideBanner img { max-width: 60vw; padding-top: 27vw; margin-left: 10px;}
    .match-height {height:auto !important;}
    .video-icon:after {background-position: 0 50%;}
}