/*---------------Yamm! megamenu for Bootstrap-------------*/
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}

.yamm .container {
  position: relative;
}

.yamm .dropdown-menu {
  left: auto;
  /* opacity: 0.4;
  transition: .4s ease all; */
}
/* .dropdown-menu.show {
  display: block!important;
  opacity: 1!important;
  transition: 1s ease all !important;
} */

.yamm .yamm-content {
  padding: 1rem;
}

.yamm .dropdown.yamm-fw .dropdown-menu,
.yamm .dropup.yamm-fw .dropdown-menu {
  left: 0;
  right: 0;
}
.dropdown-menu {
  display: initial !important;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.4s linear;
}
.dropdown-menu.show {
  /* display: auto !important; */
  visibility: visible;
  opacity: 1;
}

/*--------------alex menu-------------*/
.menBar {
  width: 150px;
  height: 100%;
  position: fixed;
  bottom: 0;
  top: 0;
  /* background-color:rgb(242, 234, 216); */
  /* background-color: rgb(242, 236, 224); */
  background-color: rgb(237, 232, 218);
  z-index: 100;
  box-shadow: 0px 1px 8px rgba(44, 42, 42, 0.3);
  font-family: "微軟正黑體","Microsoft JhengHei";
}
.menBar.tran { transition: .4s ease all; }
.menBar.notran { transition: none; }
.rthkLogoBlk { position:relative; width: 100%; height: 90px; padding: 25px 0 15px; text-align: center; z-index: 1000; }
.rthkLogo { width:63%; margin-left: 8px; cursor: pointer;}
.artAppBlk { position: relative; width: 100%; height:210px; padding:15px 0 25px; text-align: center; z-index: 1000;  }
.artAppBlk.tran_f { transition: .3s ease all; }
.artAppBlk.notran_f { transition: none; }
.artAppLogo { width:68%; cursor: pointer;  }
.artAppLogo.vert { display:block; margin: 0 auto; }
.artAppLogo.hori { display:none; }
.fixed-top-a{ z-index: 1030; }
.bg-light-a { 
  /* background-color:rgb(242, 234, 216); */
  /* background-color: rgb(242, 236, 224); */
  background-color: rgb(237, 232, 218); 
}
.navbar-expand-lg > .container.reLote, .navbar-expand-lg > .container-fluid {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.navbar > .container.reLote, .navbar > .container-fluid {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.navMain { display: block; position: relative;  width:74%; color: rgb(48, 38, 39); margin: 0 auto 20px auto; padding-top: 20px; border-top: 1px solid rgb(140, 140, 163);  }
.navMain:hover { list-style: none; color: rgb(7, 7, 7);}
/* -------------- menu reset------------------------- */
.navbar > .container.w-100.reLote { width: 100%; padding-right: 0; padding-left: 0; margin: 0 auto; text-align: center;  }
.navbar.navbar-expand-lg.resetFlex { flex-flow: wrap; padding: 0; }
.navbar-nav.mr-auto.vertCol { display: block; }
.nav-item.dropdown.vertDis { width:30%; float: left; font-size: 18px; line-height: 23px; }
.nav-item.dropdown.vertDis.left { margin: 0 4% 0 16%; }
.nav-item.dropdown.vertDis.right { margin: 0 16% 0 4%;}
.nav-link.dropdown-toggle.vertArr { white-space: normal; }
.dropdown-menu.abPos { 
  position: absolute; 
  top:-303px; left:150px; width: 180px; height: 100vh; 
  padding: 25px 5px !important; 
  font-size: 18px; line-height: 32px; letter-spacing: 1px; 
  background-color: rgb(218, 210, 196); 
  border: 0; border-radius: 0; 
  overflow-y: auto;
  /* transition: .4s ease all; */
  scrollbar-width: thin;
  scrollbar-color: rgb(129, 116, 116)rgb(231, 228, 224);
}
.dropdown-menu::-webkit-scrollbar{
  width: 10px;   
}
.dropdown-menu::-webkit-scrollbar-track{
  background: rgb(231, 228, 224);  
}
.dropdown-menu::-webkit-scrollbar-thumb{
  background-image: linear-gradient(180deg, #9e918d 0%, #666562 99%);
  border-radius: 100px; 
  box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
}
.dropdown-toggle.vertArr::after { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); }
.dropdown-toggle.vertArr.noArr::after { display: none; }
.list-unstyled li a { color: rgb(58, 53, 50); }
.menShad {
  display: none;
  position: absolute; 
  top:75px; right: 0; left:0; 
  height: 25px;
  z-index: 1040; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#231010+0,260707+25,260707+25,ffffff+56,ffffff+56&0.08+0,0.03+25,0+56 */
background: -moz-linear-gradient(top,  rgba(35,16,16,0.08) 0%, rgba(38,7,7,0.03) 25%, rgba(255,255,255,0) 56%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(35,16,16,0.08) 0%,rgba(38,7,7,0.03) 25%,rgba(255,255,255,0) 56%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(35,16,16,0.08) 0%,rgba(38,7,7,0.03) 25%,rgba(255,255,255,0) 56%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14231010', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}
/* -------------- End of menu reset------------------------- */
.TitBra { position: absolute; top:20px;  width:12%; height: 30px; }
.TitBra.lt { left: 18px; }
.TitBra.rg { right: 18px; }
.braImg { width: 100%; }
.homTxt { display: inline-block; width:100%;  font-size: 20px; letter-spacing: 2px; line-height: 25px; vertical-align: text-top; }
.TitCir { position: relative; width: 28px; height: 26px; padding-top: 2px; text-align: center;  border-radius: 50%; border: 1px solid rgb(138, 49, 49); margin-bottom: 5px; box-sizing: content-box;}
.bdTxt { font-weight:bold; color:rgb(138, 49, 49)}
.dot { width:5px; height:5px; margin: 0 5%; vertical-align: super; border-radius: 50%; display: inline-block; background-color: rgb(121, 117, 108);}
/* -------------- Vert menu Share Block------------------------- */
.vetShareBlock { position: relative; float: left; width:100%; height:auto; margin-top: 10px;  }
.vetShareWrap { 
  position: relative; 
  display: flex;
  justify-content: space-between;
  width: 74%; height: 100%; 
  padding: 25px 0; 
  margin: 0 auto;
  box-sizing: border-box;
  border-top: 1px solid rgb(140, 140, 163) ; 
  border-bottom: 1px solid rgb(140, 140, 163);
}
.sharCon:last-child { margin-right: -7%; }
.sharCon:first-child { margin-left: -7%; }
.sharCon { width: 25%; height: auto; cursor: pointer;}
.shaImg { display: inline-block; width:100%;}
/* ----------------slogan elearning Block----------------- */
.sloBlock { position: relative; display: block; position: relative; width: 100%; height:auto; }
.sloCon {
  position: relative;
  width:74%; 
  padding-top: 15px; margin: 0 auto; 
  /* border-top: 1px solid rgb(140, 140, 163)  */
  /* background-color: darkgrey; */
}
.sloLeft { float:left; width:18%; height: auto; margin-left: 18%; box-sizing: border-box; }
.sloRight { float:right; width:18%; height: auto; margin-right: 18%; box-sizing: border-box; }
.sloImg { display: block; width:100%; }
.sloImg_h { display: none; }
.eLrnBlock { position: relative; float: left; width: 100%; text-align: center; overflow: hidden; box-sizing: border-box; }
.eLrnImg { display: inline-block; width:46%; height: auto; margin-top: 30px; }
/* -------------- Slogan Block ------------------------- */
/* .sloganBlock { display: block; position: relative; width: 100%; height:auto; }
.sloTxtCon { 
  width:74%; 
  padding-top: 25px; margin: 0 auto; 
  border-top: 1px solid rgb(140, 140, 163) 
}
.sloTxtWrap { float: left; width:20%; margin: 0 15% ; font-size: 18px; line-height: 25px; text-align: center;  }
.sloBra { width: 100%; height: auto; }
.sloBraImg { display:inline-block; width:100%; opacity: 0.5; }
.sloBraImg.dwn { vertical-align: top; padding-top: 5px;} */

@media only screen and (max-width: 1600px),
            screen and (max-height: 1000px) {
  .menBar { width: 100px; }
  .rthkLogoBlk { height: 65px; }
  .artAppBlk { height: 150px; }
  .homTxt { font-size: 16px; }
  .TitBra { top: 15px; }
  .TitBra.lt { left: 10px; }
  .TitBra.rg { right: 10px; }
  .nav-item.dropdown.vertDis { width: 40%; font-size: 16px;line-height: 20px; }
  .nav-item.dropdown.vertDis.left { margin: 0 1% 0 6%; }
  .nav-item.dropdown.vertDis.right { margin: 0 6% 0 1%; }
  .dropdown-menu.abPos { top: -219px; left: 100px; }
  .TitCir { width: 24px; height: 22px; padding-top: 2px; margin-bottom: 5px;}
  .navMain { padding-top: 15px;  margin: 0 auto 8px auto;}
  .vetShareBlock { margin-top: 10px; }
  .vetShareWrap { padding: 10px 0 15px; }
  .sloTxtWrap { width: 20%; margin: 0 10% 0 15%; font-size: 16px; line-height: 20px; }
  .sloTxtCon { padding-top: 15px; }
/* ----------------slogan elearning Block----------------- */
  .sloLeft { width:20%; margin-left: 15%; }
  .sloRight { width:20%; margin-right: 15%; }
  .eLrnImg { width:50%; margin-top: 15px; }
}
/* @media only screen and (max-width: 1600px) {
  .menBar { width: 100px; }
  .rthkLogoBlk { height: 65px; }
  .artAppBlk { height: 150px; }
  .homTxt { font-size: 16px; }
  .TitBra { top: 15px; }
  .TitBra.lt { left: 10px; }
  .TitBra.rg { right: 10px; }
  .nav-item.dropdown.vertDis { width: 40%; font-size: 16px;line-height: 20px; }
  .nav-item.dropdown.vertDis.left { margin: 0 1% 0 6%; }
  .nav-item.dropdown.vertDis.right { margin: 0 6% 0 1%; }
  .dropdown-menu.abPos { top: -217px; left: 100px; }
  .TitCir { width: 24px; height: 22px; padding-top: 2px; margin-bottom: 5px;}
  .navMain { padding-top: 15px;  margin: 0 auto 8px auto;}
  .vetShareBlock { margin-top: 10px; }
  .vetShareWrap { padding: 10px 0 20px; }
  .sloTxtWrap { width: 20%; margin: 0 10% 0 15%; font-size: 16px; line-height: 20px; }
  .sloTxtCon { padding-top: 15px; }

} */

@media only screen and (max-width: 992px) {
.menBar { width: 100%; height: 75px; box-shadow: none;}
.fixed-top-a{ width:100%; right: 0; height: auto; }
.navMain { display: none; }
.menShad { display: block;}
/* -------------- menu reset------------------------- */
.navbar.navbar-expand-lg.resetFlex { flex-flow: wrap; padding: .5rem 1rem 1rem; }
.navbar > .container.w-100.reLote { position: relative; margin: 0; width: 100% !important; max-width: 100%; }
.navbar-nav.mr-auto.vertCol { display:flex; margin-top: 25px;}
.nav-item.dropdown.vertDis { width:auto; float: none; }
.nav-item.dropdown.vertDis.left { margin: 0 0 0 0; }
.nav-item.dropdown.vertDis.right { margin: 0 0 0 0;}
.nav-link.dropdown-toggle.vertArr { white-space: nowrap; }
.dropdown-menu.abPos { 
  position:static; float: none; 
  padding: 5px 5px 25px 5px !important; 
  top:auto; left:auto; 
  width: auto; 
  /* height: auto; */
  height: 60vh; 
}
.dropdown-toggle.vertArr::after { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
.navbar-toggler.reBut { margin-left: auto !important; margin-top: 12px; margin-right: 15px; }
.TitCir { display: inline-block; }
.dropdown-menu {
  display: none !important;
  visibility:initial;
  opacity: 1;
  overflow-y: scroll;
}
.dropdown-menu.show {
  display: block !important;
  visibility: visible;
  opacity: 1;
}

/* -------------- End of menu reset------------------------- */
.rthkLogoBlk { position: absolute; left: 0; top:20px; padding:0 ; width: 90px; height: 65px; }
.artAppBlk { position: absolute; left: 90px; top:3px;  width: 130px; height:auto; padding: 0; }
.artAppLogo { width:100%; }
.artAppLogo.vert { display:none; }
.artAppLogo.hori { display:block; }
/* .vetShareBlock { display: none; } */
.sharCon { width: 7%; }
.dot { margin: 0 0; }
/* .vetShareWrap { border-bottom: none; } */
/* ----------------slogan elearning Block----------------- */
.sloCon {
  position: relative;
  width:74%; 
  padding-top: 15px; margin: 0 auto; 
  /* display: flex;
  flex-direction: row;
  justify-content: center; */
}
/* .sloCon a { display: flex;} */
.sloLeft {  float: left;  width:20%; margin-left: 15%; padding-top: 2%; }
.sloRight { float: left;  width:20%; margin-right: 0; margin-left: 5%; padding-top: 2%; }
.sloImg { display: none; }
.sloImg_h { display: block; width: 100%;}
.eLrnBlock { float:right; width: 30%; text-align: center; border-left: 1px solid rgb(121, 117, 108); }
.eLrnImg { width:25%; margin: 0 30% 0 0; }
/* .sloganBlock { display: none; }
} */
}
@media only screen and (max-width: 768px) {
  .sharCon { width: 7%; }
  .vetShareWrap { padding: 20px 0 20px; }
}
@media only screen and (max-width: 576px) {
  .rthkLogoBlk { width: 70px; }
  .artAppBlk {left: 70px;top: 3px;width: 120px; height: auto; padding: 0; }
  .vetShareWrap { width:90%; padding: 20px 0 20px; }
  .sharCon { width: 8.5%; }
  .sloCon { width: 90%; }
  .sloLeft {  float: left;  width:30%; margin-left: 0%; padding-top: 3%; }
  .sloRight { float: left;  width:30%; margin-right: 0; margin-left: 3%; padding-top: 3%; }
  .eLrnBlock { float:right; width: 30%; }
  .eLrnImg { width:36%; margin: 0 auto; }
}