/** Your theme modifications here **/
body {
/*  background-image: url(../images/1.jpg);*/
    font-family:"Microsoft JhengHei","PMingLiU","Microsoft YaHei",Helvetica,Arial,sans-serif;
    background-repeat: repeat;
}
.teach_submenu li a{
color:#1672CE !important;
}
.teach_submenu li a:hover {
  color: #f48f88 !important;
  text-decoration: none;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #1064AB;
  opacity: 1; /* Firefox */
  font-size: 1rem;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #1064AB;
  font-size: 1rem;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #1064AB;
  font-size: 1rem;
}
::-ms-input-placeholder {
  color: #1064AB;
  font-size: 1rem;
}
:-moz-placeholder { /* Firefox 18- */
  color: #1064AB;
  font-size: 1rem;
}
::placeholder {
  color: #1064AB !important;
  font-size: 1rem;
}

.select2-selection__placeholder {
  color: #1064AB !important;
}

/* 彩色小按鈕 */
a[class*="btn"] {text-decoration: none;}
input[class*="btn"], 
button[class*="btn"] {border: 0;}

/* Here you can change the button sizes */
.btn-two.small {
  padding: 8px 18px;
}
.btn-two.mini {
  padding: 4px 12px;
  margin:5px;
}
.btn-two.block {
  display: block;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* Colors for .btn and .btn-two */
.btn-two.blue    {background-color: #7fb1bf;}
.btn-two.green   {background-color: #9abf7f;}
.btn-two.red     {background-color: #fa5a5a;}
.btn-two.purple {background-color: #cb99c5;}
.btn-two.cyan    {background-color: #7fccde;color: black;}
.btn-two.yellow {background-color: #f0d264;}

.rounded {
  border-radius: 10px;
}

/* Button two - I have no creativity for names */
.btn-two {
    color: white;
    padding: 15px 25px;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.21);
    -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    border-bottom-color: rgba(0,0,0,0.34);
    text-shadow:0 1px 0 rgba(0,0,0,0.15);
    box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset,
                0 2px 0 -1px rgba(0,0,0,0.13),
                0 3px 0 -1px rgba(0,0,0,0.08),
                0 3px 13px -1px rgba(0,0,0,0.21);
}

/* Bunch-o-Buttons */
.btn {
  display: inline-block;
  margin-bottom: 0;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  whitespace: nowrap;
  padding: 6px 12px;
  font-size: 1.4rem;
  border-radius: 3px;
  border: 1px solid transparent;
  text-decoration: none;
  user-select: none;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover, .btn:focus, .btn.focus {
  text-decoration: none;
  color: #fff;
}
.btn:active, .btn.active {
  outline: 0;
  background-image: none;
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.btn.btn-xs {
  padding: 3px 6px;
  font-size: 1.2rem;
}
.btn.btn-sm {
  padding: 4px 8px;
  font-size: 1.3rem;
}
.btn.btn-lg {
  padding: 8px 16px;
  font-size: 1.6rem;
}

.btn-warning {
  color: #FFF3E0;
  border-color: #FB8C00;
  background: linear-gradient(to bottom, #FFB74D 0%, #FFA726 100%);
  box-shadow: inset 0 1px #FFE0B2, 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-warning:hover, .btn-warning:focus, .btn-warning.focus {
  border-color: #FFA726;
  background: linear-gradient(to bottom, #FFCC80 0%, #FFB74D 100%);
  box-shadow: inset 0 1px #FFF3E0, 0 2px 3px rgba(0, 0, 0, 0.2);
}
.btn-warning:active, .btn-warning.active {
  border-color: #F57C00;
  color: #FFE0B2;
  background: linear-gradient(to bottom, #FFA726 0%, #FB8C00 100%);
  box-shadow: inset 0 2px 2px #F57C00;
}
.btn-warning.disabled, .btn-warning[disabled], fieldset[disabled] .btn-warning {
  background: #FFCC80;
  border-color: #FFB74D;
}
.nav li A{
  font-size: 24px !important;
  margin:5px !important;
  padding:5px !important;
}
.nav li {margin:0 !important;}
.nav li {padding:0 !important;}
#navbarMain {margin:0 !important;padding:0 !important;}

.navbar,.nav {
    margin:0 !important;
    padding:0 !important;
}

/* video container */
.videoContainer {
  color: rgb(204, 204, 204);
  height: 350px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.videoContainer:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  pointer-events: none;
}
/* video caption css */
.caption {
  backface-visibility: hidden;
  background: rgba(31, 50, 62, 0.81);
  border-radius: 6px 6px 0 0;
  color: rgb(221, 221, 221);
  display: none;
  font-size: 14px;
  font-weight: 300;
  left: 0;
  padding: 10px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 2px;
  width: 100%;
}

@media (min-width: 360px){
.side-bar {width: 60px;position: fixed;top:75%;right: 15px;font-size: 0;line-height: 0;z-index: 100;}
.side-bar div {width: 60px;height: 60px;display: inline-block;margin-bottom: 2px;}
.side-bar img {width: 60px;height: 60px;}
}
@media (min-width: 576px){
.side-bar {width: 80px;position: fixed;top:75%;right: 15px;font-size: 0;line-height: 0;z-index: 100;}
.side-bar div {width: 80px;height: 80px;display: inline-block;margin-bottom: 2px;}
.side-bar img {width: 80px;height: 80px;}
}
@media (min-width: 992px) {
.side-bar {width: 80px;position: fixed;top:75%;right: 15px;font-size: 0;line-height: 0;z-index: 100;}
.side-bar div {width: 80px;height: 80px;display: inline-block;margin-bottom: 2px;}
.side-bar img {width: 80px;height: 80px;}
}
/* 文字陰影 */
.tx-shadow-dark {text-shadow: 1px 3px 1px rgba(100, 100, 100, 0.5);}
.tx-shadow-red {text-shadow: 1px 3px 1px rgba(200, 0, 0, 0.5);}
.tx-shadow-yellow {text-shadow: 1px 3px 1px rgba(200, 200, 0, 0.5);}
/* 區塊陰影 */
.ss-block{box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4), 0px 7px 13px -3px rgba(0, 0, 0, 0.3), 0px -3px 0px rgba(0, 0, 0, 0.2) inset;}

/* 性感按鈕 */
.sexy-btn{
color:#08233e;
font-size:1.4rem;
padding:3px 10px;
white-space: nowrap;
background:url(../images/overlay.png) repeat-x center #ffcc00;
background-color:rgba(204,204,204,1);
border:1px solid #CCCCCC;
-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
border-bottom:2px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
}
.sexy-btn:hover{background-color:rgba(204,204,204,0.8);}
.sexy-btn:active{position:relative;top:2px;}

.sexy-btn.yellow{
color:#08233e;
background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
border-bottom:2px solid #9f9f9f;
}
.sexy-btn.yellow:hover{background-color:rgba(255,204,0,0.8);}
.sexy-btn.orange{
color:#fff !important;
background-color:rgba(255,153,51,1);
border:1px solid #FF9933;
border-bottom:2px solid #9f9f9f;
}
.sexy-btn.orange:hover{background-color:rgba(255,153,51,0.8);}
.sexy-btn.red{
color:#fff !important;
background-color:rgba(255,51,51,1);
border:1px solid #FF3333;
border-bottom:2px solid #9f9f9f;
}
.sexy-btn.red:hover{background-color:rgba(255,51,51,0.8);}

.sexy-shadow{
  -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4), 0px 7px 13px -3px rgba(0, 0, 0, 0.3), 0px -3px 0px rgba(0, 0, 0, 0.2) inset;
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4), 0px 7px 13px -3px rgba(0, 0, 0, 0.3), 0px -3px 0px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4), 0px 7px 13px -3px rgba(0, 0, 0, 0.3), 0px -3px 0px rgba(0, 0, 0, 0.2) inset;
}

.lulu-btn {
    display: inline-block;
    color: #666;
    background-color: #eee;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 5px 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.3);
    border-bottom-width: 3px;
}

.lulu-btn:hover {
    background-color: #e3e3e3;
    border-color: rgba(0,0,0,0.5);
}
    
.lulu-btn:active {
    background-color: #CCC;
    border-color: rgba(0,0,0,0.9);
}

/* blue button */

.lulu-btn.btn-blue {
    background-color: #699DB6;
    border-color: rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    color: #FFF;
}

.lulu-btn.btn-blue:hover {
    background-color: #4F87A2;
    border-color: rgba(0,0,0,0.5);
}

.lulu-btn.btn-blue:active {
    background-color: #3C677B;
    border-color: rgba(0,0,0,0.9);
}

/* red button */

.lulu-btn.btn-red {
    background-color: #E48681;
    border-color: rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    color: #FFF;
}

.lulu-btn.btn-red:hover {
    background-color: #DA4F49;
    border-color: rgba(0,0,0,0.5);
}

.lulu-btn.btn-red:active {
    background-color: #B32C24;
    border-color: rgba(0,0,0,0.9);
}
/*台灣（其他地區）<br>定點＆外送*/
.tw-btn {
    background-color:rgba(255,153,51,1);
    whitespace: nowrap;
    color: white;
    border-radius: 5px;
    padding:8px 10px;
    text-align:center;
    display: inline-block;
    border: 1px solid #FF9933;
    -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    border-bottom-color: #9f9f9f;
    text-shadow:0 2px 0 rgba(0,0,0,1.1);
    box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset,
                0 2px 0 -1px rgba(0,0,0,0.13),
                0 3px 0 -1px rgba(0,0,0,0.08),
                0 3px 13px -1px rgba(0,0,0,0.21);
}
/*舒壓日班表*/
.tw-daybtn {
    background-color:rgba(33,112,191,1);
    whitespace: nowrap;
    color: white;
    border-radius: 5px;
    padding:8px 10px;
    text-align:center;
    display: inline-block;
    border: 1px solid #21BBF1;
    -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    border-bottom-color: #9f9f9f;
    text-shadow:0 2px 0 rgba(0,0,0,1.1);
    box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset,
                0 2px 0 -1px rgba(0,0,0,0.13),
                0 3px 0 -1px rgba(0,0,0,0.08),
                0 3px 13px -1px rgba(0,0,0,0.21);
}
.tw-daybtn:hover {
    color: yellow;
}


/*一般提示框(彈出)*/
#msgmask{
width:100%; height:100%; background-color:rgba(0,0,0,0.5); position:fixed;  z-index:1100; top:0; left:0; animation: fade-in;
animation-duration: 0.3s;
-webkit-animation:fade-in 0.3s;
}
@keyframes fade-in {
0% {opacity: 0;}/*初始狀態 透明度為0*/
40% {opacity: 0;}/*過渡狀態 透明度為0*/
100% {opacity: 1;}/*結束狀態 透明度為1*/
}
#tipnews{
width: 80%;
    height: auto;
    margin-top: 100px;
    text-align: center;
    color: #1b1b1b;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    line-height: 130%;
    padding: 1rem;
    min-height: 1.2rem;
}
#okbtn{
width:80%;cursor:pointer;text-align:center; color:#fff; background-color:#ff5761; margin-left:auto; margin-right:auto; border-bottom-left-radius:.5rem; border-bottom-right-radius:.5rem;line-height:1rem;
}