/* change placeholder color */

.search-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */

  color:white;

}

.search-input::-moz-placeholder { /* Firefox 19+ */

  color:white;

}

.search-input:-ms-input-placeholder { /* IE 10+ */

  color:white;

}

.search-input:-moz-placeholder { /* Firefox 18- */

  color:white;

}



/* remove input search box dropdown arrow*/

.search-input::-webkit-calendar-picker-indicator {

  display: none;

}

.search-input::-moz-calendar-picker-indicator {

  display: none;

}

.search-input::-ms-picker-indicator {

  display: none;

}

.search-input::-moz-picker-indicator {

  display: none;

}



.hide-on-med-and-down {

    /* nav bar font */

    font-family: "微軟正黑體", "Microsoft JhengHei";

}





/* --------------- pure css button style ---------------- */



.mybtn {

    border-radius: 5px;

    padding: 15px 25px;

    /*font-size: 22px;*/

    text-decoration: none;

    /*margin: 20px;*/

    color: #fff;

    position: relative;

    display: inline-block;

}



.mybtn:active {

    transform: translate(0px, 5px);

    -webkit-transform: translate(0px, 5px);

    box-shadow: 0px 1px 0px 0px;

}



.mygreen {

    /*background-color: #2ecc71;*/

    background-color: #A5DF00;

    /*box-shadow: 0px 5px 0px 0px #15B358;*/

    box-shadow: 0px 5px 0px 0px #86B404;

}



.myorange {

    background-color: #e67e22;

    box-shadow: 0px 5px 0px 0px #CD6509;

}





/* --------------- bootstrap custom ---------------- */



.bootstrapModal {

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 1050;

    display: none;

    overflow: auto;

    overflow-y: scroll;

    -webkit-overflow-scrolling: touch;

    outline: 0;

}



.bootstrapModal.fade .bootstrapModal-dialog {

    -webkit-transition: -webkit-transform .3s ease-out;

    -moz-transition: -moz-transform .3s ease-out;

    -o-transition: -o-transform .3s ease-out;

    transition: transform .3s ease-out;

    -webkit-transform: translate(0, -25%);

    -ms-transform: translate(0, -25%);

    transform: translate(0, -25%);

}



.bootstrapModal.in .bootstrapModal-dialog {

    -webkit-transform: translate(0, 0);

    -ms-transform: translate(0, 0);

    transform: translate(0, 0);

}



.bootstrapModal-dialog {

    position: relative;

    width: auto;

    margin: 10px;

}



.bootstrapModal-content {

    position: relative;

    background-color: #fff;

    background-clip: padding-box;

    /*border: 1px solid #999;

  border: 1px solid rgba(0, 0, 0, .2);*/

    /*border-radius: 6px;*/

    outline: none;

    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

}



.bootstrapModal-backdrop {

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 1040;

    background-color: #000;

}



.bootstrapModal-backdrop.fade {

    filter: alpha(opacity=0);

    opacity: 0;

}



.bootstrapModal-backdrop.in {

    filter: alpha(opacity=50);

    opacity: .5;

}



.bootstrapModal-header {

    min-height: 16.42857143px;

    padding: 15px;

    border-bottom: 1px solid #e5e5e5;

}



.bootstrapModal-header .close {

    margin-top: -2px;

}



.bootstrapModal-title {

    margin: 0;

    line-height: 1.42857143;

}



.bootstrapModal-body {

    position: relative;

    padding: 20px;

}



.bootstrapModal-footer {

    padding: 19px 20px 20px;

    margin-top: 15px;

    text-align: right;

    border-top: 1px solid #e5e5e5;

}



.bootstrapModal-footer .btn + .btn {

    margin-bottom: 0;

    margin-left: 5px;

}



.bootstrapModal-footer .btn-group .btn + .btn {

    margin-left: -1px;

}



.bootstrapModal-footer .btn-block + .btn-block {

    margin-left: 0;

}



@media (min-width: 768px) {

    .bootstrapModal-dialog {

        width: 600px;

        margin: 30px auto;

    }

    .bootstrapModal-content {

        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);

        box-shadow: 0 5px 15px rgba(0, 0, 0, .5);

    }

    .bootstrapModal-sm {

        width: 300px;

    }

}



@media (min-width: 992px) {

    .bootstrapModal-lg {

        width: 900px;

    }

}



.product-btn {

    display: inline-block;

    padding: 6px 12px;

    margin-bottom: 0;

    font-size: 14px;

    font-weight: normal;

    line-height: 1.42857143;

    text-align: center;

    white-space: nowrap;

    vertical-align: middle;

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    background-image: none;

}





/* --------------- materialize custom ---------------- */

.side-nav a {

    color: white;

    display: block;

    font-size: 14px;

    font-weight: 500;

    height: 48px;

    line-height: 48px;

    padding: 0 32px;

}



.dropdown-content {

    /* let dropdown menu can fit the text length */

    width: auto !important;

}



.container {

    margin: 0 auto;

    max-width: 1280px;

    width: 90%;

}



.slider .slides {

    background-color: transparent;

    margin: 0;

    height: 400px;

}



.slider .slides li img {

    height: 100%;

    width: 100%;

    background-position: center;

    background-size: 100% auto;

    background-repeat: no-repeat;

}