@import '/css/bootstrap.min.css';
@import '/css/bootstrap-icons.min.css';

:where(.is-layout-flex) {gap: 0 !important;}

@media (max-width: 576px) {
    body{font-size: 14px;}
}

html,body { height: 100%;}
a {text-decoration: none;color: #337ab7;}
.text-indent {text-indent: 2rem;}

body>.wp-site-blocks {display: flex;flex-direction: column;min-height: 100%;}
#head {width:100%;height:auto;padding: 12px;margin-bottom: 0 !important;background-color:#00746c;border: none;box-shadow: 0 1px 2px #006060;}
.nav-logo {height: 56px;margin:1rem 0; overflow: hidden;}
.nav-logo img {height: 100%;}
.nav li {padding: 0 0.25rem;list-style-type: none;}
.nav a {color:#FFF ;font-size: 1.15em;line-height: 1.5;}
.nav a:hover {color:rgb(217,183,101) !important;}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: rgb(217,183,101);
}
.navbar-toggler {text-decoration: none;outline: 0;border: none;}
.navbar-toggler:focus {
    box-shadow: 0 0 0 0;
}
.navbar-inverse .navbar-toggle {border: none;}
.navbar-toggle:hover,
.navbar-toggle:focus {background-color: #006a63 !important;}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {background-color: transparent;color: rgb(217,183,101);}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {line-height: 2em;color: #000;}
.nav-item>.dropdown-menu {background-color: rgb(233,212,163);min-height:4em !important;border-left: solid 4px #00746c;}
.nav-item>.dropdown-menu a {line-height: 2em;font-size: 1.15em;}
.nav-item>.dropdown-menu a:hover {color:#FFF !important;background-color: rgb(217,183,101);}
.navbar-inverse .navbar-collapse {border-color: #006a63;}

.root-wrapper-body {
    flex-grow: 1;
    width:100%;
    height: auto;
    margin: 0;
    overflow: hidden;
    background-color: rgb(245,235,210);
}
.body-viewport {max-width: 1200px;margin: 0 auto;align-items: flex-start;}
.left-viewport {flex-grow: 1;padding: 1rem;}
.left-viewport.is-layout-flex {display: block;}

.foot {
    width: 100%;
    min-height: 5rem;
    overflow: hidden;
    background-color: #00746c;
    vertical-align: middle;
    text-align: center;
    margin: 0 auto;
    padding: 1rem;
    line-height: 1.25;
    color: #FFF;
    font-size: 0.875em;
}
.foot a {color: #FFF;}

.mpart {text-align: center;height: 160px;}
.mpart>h4{color:#333;overflow:hidden; text-overflow;ellipsis;white-space:nowrap}
.mpart-item {width:160px;height: 120px;background-size: 100% 100%;background-repeat: no-repeat;background-position: center;margin: auto;}
.mpart a{cursor:pointer;}

.banner {width: 100%;height: 101px;position: relative;margin: 0;background-repeat: no-repeat;background-position: 80% 50%;background-size: auto 100%;}
.banner img {width: auto;height: 100%;position: absolute;right: 0;max-width: none;}

.playerpanel {
    width: 800px;
    height: 450px;
    margin: auto;
    margin-top: 50px;
}
.playerbody {width: 100%;height: 100%;}
.playerhead {width: 100%;height: 20px;margin-top: -20px;background-color: #000;color: #eee;}
.playerhead a {display:block;width:2em;text-align:center;float: right;cursor: pointer;text-decoration: none;color:#FFF;}
.playerhead a:hover {color:#00b0ff;}


.submenu {padding: 1rem;max-width: 240px;width: 23%;flex-grow: 1;flex-shrink: 0;}
.submenu i {color:#999; width:2em;}
.submenu a:hover {color:#a5b753}
.submenu li {border: none;}
.submenu li.active {background-color: transparent;border: none;}
.submenu li.active>a,.submenu a.active {color:#a5b753;}
.submenu li {line-height: 2;}
.submenu .list-group-item {background-color: transparent;}


.video-preview {width: 272px;height: calc(150px + 2rem);margin: 1rem !important;}
.video-preview:hover {box-shadow: 0px 0px 4px #a6a6a6;}
.video-preview p,
.video-preview figure {margin: 0;}
.video-body {position: relative;background-color: #f5f7f9;}
.video-body a {display: block;width: 100%;height: 150px;cursor: pointer;}
.video-body img {width: 100%;height: 100%;}
.video-title {line-height: 2;background-color: rgba(0,0,0,.5);color: #FFF;}

.play-icon {
    position: absolute !important;
    width: 2rem;
    height: 2rem;
    left: 50%;
    top: 50%;
    line-height: 2rem;
    margin-top: -0.75rem;
    margin-left: -0.75rem;
    text-align: center;
    color: rgba(255, 255, 255, .8);
    background-color:rgba(0,0,0,.6);
    font-size: 1.5rem;
    border-radius: 50%;
    text-align: center;
}
.play-icon>i {display: inline-block;}
.play-icon>i:hover {cursor: pointer;}

.honor-list {width:100%;margin:auto;}
.honor-item {max-width: 360px;height: 360px;float: left;padding: 18px;margin: auto;text-align: center;}
.honor-item img {width: 90%;max-height: 340px;}
.product-item {text-align: center;cursor: pointer;}
.product-item img {width: 100%;padding: 30px 10px;}
.product-item img:hover {outline: solid 1px #ccc;}
.customer-list>* {padding:0 1rem;}
.product-viewport {
    width:100%;
    height: auto;
    overflow: hidden;
    border: solid 1px #000;
    border-radius: 1rem;
    padding: 1rem;
}
.product-viewport>*:first-child {max-width: 60%;}
@media (max-width: 576px) {
    .banner {height: 50px;}
    .body-viewport {flex-direction: column;}
    .body-viewport>.left-viewport {width: 100%;}
    .submenu {width: 100%;}
    .video-list,
    .product-item {margin: auto;float: none;width:90%;}
    .product-viewport>*:first-child {max-width: 80%;}
}

@media (max-width: 768px) {
    .navbar-toggler:focus {box-shadow: none;}
    .nav-item>.dropdown-menu {background-color: #00746c;border: none;margin: 0; padding-top: 0;}
    .nav-item>.dropdown-menu a {padding: 0 1rem;}
    .nav-item>.dropdown-menu a:hover {color: rgb(217,183,101);background-color: transparent;}
    .dropdown-menu {border: none;}
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {color: #ddd;}
    .mpart-item{width:120px;height: 90px; line-height: 90px;}
    .banner {height: 70px;}
}

@media (min-width: 768px) {
    .nav-link {text-align: center;}
    .nav-item>.dropdown-menu {}
    .nav-item>.dropdown-menu a {display: block;color: #333;padding-left: 1rem;}
}

.navbar-expand .navbar-nav .dropdown-menu {
    position: static;
}

.dropdown-menu {
  -webkit-animation: slide-down 0.5s ease-out;
  animation: slide-down 0.5s ease-out;
}
 
@-webkit-keyframes slide-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
 
@keyframes slide-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}