html, body {
font-family: 'Segoe UI','Microsoft JhengHei';
height: 100%;
background-repeat:repeat;
font-size:14px!important;
}
@media(min-width:768px){
html,body{font-size: 16px!important}
}
body{margin:0;}
a,button,.btn{cursor:pointer;}
a {text-decoration:none!important;}
a:hover {color:#999;}
ul,li{list-style: none;margin:0;padding:0;}
.disabledScroll{overflow: hidden;}
h1, h2, h3, h4, h5 {color:#333;font-weight:600}
/*-------
other
------*/
.relative{position: relative;}
.w25{width:25px;}
.w100 {width:100px;}
.w150 {width:150px}
.minH200 {min-height:200px;}
.maxW150 {max-width:150px;}
.pt5 {padding-top:5px;}
.ml35 {margin-left:35px;}
.mb10 {margin-bottom:10px;}
.flex0030 {flex:0 0 30%;}
.nowrap {white-space:nowrap}
.bg-gray{background:#eee;}
.color-inherit{color:inherit;}
.h300{height:300px;}
.center{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);}
/*-------
text style
------*/
.text-primary{color:#c6a86f!important;}
.text-default{color:#586875!important;}
.text-gray{color:#aaa!important;}
.font-weight-600{font-weight: 600;}
.text-red{color:#d70000;}
.text-success {color:#ABD15F!important}
/*-------
btn
------*/
.btn-radius{border-radius:2rem;}
.btn-primary {color: #fff !important;border: 1px solid transparent !important;background: #c6a86f !important;}
.btn-primary:hover:not([disabled]):not(.disabled) {background: #A17F3F !important;color: #fff !important;}
.btn-blue {color: #fff !important;border: 1px solid transparent !important;background: #3b5998 !important;}
.btn-blue:hover:not([disabled]):not(.disabled) {background: #264585 !important;color: #fff !important;}
.btn-danger {color: #fff !important;border: 1px solid transparent !important;background: #E45A2C !important;}
.btn-danger:hover:not([disabled]):not(.disabled) {background: #d84514 !important;color: #fff !important;}
.btn-warning {color: #fff !important;border: 1px solid transparent !important;background: #FFA041 !important;}
.btn-warning:hover:not([disabled]):not(.disabled) {background: #f78716 !important;color: #fff !important;}
.btn-success {color: #fff !important;border: 1px solid transparent !important;background: #4ac02d !important;}
.btn-success:hover:not([disabled]):not(.disabled) {background: #2da80f !important;color: #fff !important;}
.btn-default {color: #333 !important;border: 1px solid transparent !important;background: #ddd !important;}
.btn-default:hover:not([disabled]):not(.disabled) {background: #ccc !important;color: #333 !important;}
.btn-dark {color: #fff !important;border: 1px solid transparent !important;background: #56576A !important;}
.btn-dark:hover:not([disabled]):not(.disabled) {background: #35364e !important;color: #fff !important;}
.btn-outline-white{color: #4D7CFF !important;border: 1px solid #fff !important;background: rgba(256,256,256,.5) !important;}
.btn-outline-white:hover:not([disabled]):not(.disabled) {color: #4D7CFF !important;background: rgba(256,256,256,.5) !important;}
.btn-outline-primary{color: #c6a86f !important;border: 1px solid #c6a86f !important;background: rgba(256,256,256,.5) !important;}
.btn-outline-primary:hover:not([disabled]):not(.disabled) {color: #fff !important;background: #c6a86f !important;}
.btn-outline-danger{color: #E45A2C !important;border: 1px solid #E45A2C !important;background: rgba(256,256,256,.5) !important;}
.btn-outline-danger:hover:not([disabled]):not(.disabled) {color: #fff !important;background: #E45A2C !important;}
.btn-outline-default{color: #a17f3f !important;border: 1px solid #ddd !important;background: rgba(256,256,256,.5) !important;}
.btn-outline-default:hover:not([disabled]):not(.disabled) {color: #fff !important;background: #ddd !important;}
textarea:not([disabled]):hover, input:not([disabled]):hover, textarea:not([disabled]):active, input:not([disabled]):active, textarea:not([disabled]):focus, select:not([disabled]):focus, input:not([disabled]):focus {outline: none !important;box-shadow: none !important;border-color: #c6a86f !important;}
button:focus, button:active, button:hover, label:focus, .btn:active, .btn.active , .btn:hover {outline: none !important;box-shadow: none !important;}
.btn.disabled, .btn:disabled {cursor: not-allowed;}
.btn-liked {color: #FFA041 !important;border: 1px solid #FFA041 !important;background: #fff !important;}
.btn-liked:hover:not([disabled]):not(.disabled) {background: #FFA041 !important;color: #fff !important;}
.btn-liked.active {color: #fff !important;border: 1px solid transparent !important;background: #FFA041 !important;}
.btn-liked.active:hover:not([disabled]):not(.disabled) {background: #FFA041 !important;color: #fff !important;}
.btn-link{text-decoration: underline !important;color: #c6a86f;}
.btn-link:hover{color: #A17F3F ;}
/*-------
mobile sidebar
------*/
.sidebar {height: 100%;width: 250px;position: fixed;z-index: 99;top: 0;left: -100%;background-color: #A17F3F;overflow-x: hidden;transition: 0.5s;box-shadow: 0 0 20px 0px rgba(0,0,0,.15);}
.sidebar.open{left:0;}
.backdrop{width:100%;height:100vh;position: fixed;top:0;display:none;left:0;background:rgba(0,0,0,.5);z-index: 95;}
.sidebar.open + .backdrop{display:block}
.sidebar a {padding: 8px 20px;text-decoration: none;color: #e2d5eb;display: block;transition: 0.3s;position: relative;word-wrap: break-word;}
.sidebar a:hover {color: #f1f1f1;}
.sidebar_menuList ul li:not(.disabled) a:hover , .sidebar_menuList ul li:not(.disabled) a:focus{background:#996FB7;}
.sidebar_menuList ul li.disabled a{opacity: .5}
.mobile_menu_btn {display: none;font-size: 18px;cursor: pointer;background-color: transparent;color: #999;padding: 5px 10px;border: none;}
.mobile_menu_btn i{font-size:1.5rem;}
.mobile_menu_btn:hover {background-color: #eee;}
.sidebar .mobile_menu_btn{padding:10px 20px;color:#e2d5eb;}
.sidebar .mobile_menu_btn:hover{background-color: #7f99d2;}
.custom_dropdown i{position: absolute;right:10px;top:13px;}
.custom_dropdownList{background:#5A2A82;}
.brand_logo{width:100%;padding:10px;}
.profileImg{border-radius: 2rem;width:40px;}
/*memberbox*/
.memberBox{padding:15px 20px;background:#5A2A82;}
.memberBox .userName{font-weight:600;color:#e2d5eb;margin-bottom:5px;word-break: break-all;flex:1 0 100%;}
.memberBox a{border:1px solid #e2d5eb;border-radius:2px;padding:2px 5px;font-size: 14px;}
.memberBox a+a{margin-left:5px;}
.memberBox > div{display:flex;align-items:center;}
/*$sidebar scrollbar*/
.sidebar::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);border-radius: 0px;background-color: rgba(0,0,0,0);}
.sidebar::-webkit-scrollbar{width: 6px;background-color: rgba(255, 255, 255, 0);}
.sidebar::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.5);background-color: #ffffff30;}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidebar a {font-size: 18px;}
}
@media(max-width: 992px){
.mobile_menu_btn{display: inline-block;}
}
/*------------
desktop navbar
-------------*/
.custom-dropdown-menu{border:0;border-radius: 0;background:rgba(0,0,0,.8);padding:0;margin:0;}
.custom-dropdown-menu .dropdown-item{color:#fff;padding:.5rem 1.5rem;}
.custom-dropdown-menu .dropdown-divider{border-top: 1px solid #666;margin:0;}
.custom-dropdown-menu .dropdown-item:focus, .custom-dropdown-menu .dropdown-item:hover {color: #fff;text-decoration: none;background-color: rgba(0,0,0,.5);}
.navbarContainer{width:100%;background-color:#fff;box-shadow: 0 0 15px #66666642}
.navbarContainer.fixed{position:fixed;top:0;z-index: 90;}
.navbarContainer.fixed + .main{padding-top:56px;min-height: 100%}
.navbarContainer.fixed + .main.tabfixed{padding-top:105px;}
.navbarContainer > .container{padding:0;}
.navbar-light .navbar-nav .nav-link{color:#333;position: relative;}
.navbar-light .navbar-nav .nav-link:not(.dropdown-toggle):after{content:'';position:absolute;left:0;bottom:0;width:0;height:100%;background:#A17F3F;opacity: 0.1;border-radius:5px;}
.navbar-light .navbar-nav .nav-link:not(.dropdown-toggle):hover:after{width:100%;height:100%;transition: all .2s}
.navbar-light .navbar-nav .nav-link:not(.dropdown-toggle):hover:active:after{opacity:0.2;transition: all .2s}
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
color: #A17F3F!important;
}
.custom-navbar{padding:.5rem;height:56px;}
.custom-navbar .navbar-nav-left, .custom-navbar .navbar-nav-right{flex:1;flex-direction: row;}
.custom-navbar .navbar-nav-right{text-align: right;justify-content: flex-end;}
.custom-navbar .navbar-brand{flex:0 0 auto;margin:0;padding:0;}
.custom-navbar .navbar-brand{flex:0 0 auto;margin:0;padding:0;}
.custom-navbar .nav-link i{padding-right:5px;}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {padding-right: 1rem;padding-left: 1rem;}
.nav-item.dropdown:hover .custom-dropdown-menu{display: block;}
}
@media(max-width:576px){
.navbar-light .navbar-nav .nav-link{font-size:14px;padding-right: .5rem;padding-left: .5rem;}
}
/*-------
rwdImgBox
------*/
.rwdImgBox{position: relative;background-image:url(../images/pic001.jpg);background-color:transparent;background-size:cover;background-position: 50% 50%;padding-bottom:100%;background-repeat: no-repeat;}
.rwdImgBox._16x9{padding-bottom:177%}
.rwdImgBox._9x16{padding-bottom:56.25%;}
.rwdImgBox._4x3{padding-bottom:133%}
.rwdImgBox._3x4{padding-bottom:75%;}
.rwdImgBox._3x10{padding-bottom:30%;}
.rwdImgBox._1x2{padding-bottom:50%;}
.rwdImgBox.disabled:before{content:'';background:rgba(0,0,0,.4);width:100%;height:100%;position:absolute;z-index:3;}
.rwdImgBox.disabled:after{content:attr(data-status);background:rgba(0,0,0,.3);padding:0 10px;border-radius:12px;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;word-break: keep-all;}
.bs-contain{background-size: contain!important;}
.bs-cover{background-size: cover!important;}
/*-------
footer
------*/
footer {width: 100%;background: #F0F0F4;color: #7e8a92;}
footer > .container {padding: 20px 0;line-height: 2rem;}
footer .brand {width: 150px;height: 50px;}
footer ul {list-style: none;padding: 0;display: inline-block;}
footer ul li {padding-right: 5px;}
footer a{color:#7e8a92;}
footer a:hover{color:#6a757c;text-decoration: underline;}
footer .row {margin-right:5px;margin-left:5px;}
footer .row [class*="col-"]{padding-right:5px;padding-left:5px;}
.followIcons li{display: inline-block}
.followIcons li img:hover{box-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.1)}
/*-------
section
------*/
.section .container{padding-top:80px;padding-bottom:80px;}
.section .container p{font-size:18px;line-height: 30px;}
.section .container table tr td p{margin:0!important}
.section .container table td {padding:10px;}
.section .sectionTitle{padding-bottom:10px;color:#5A2A82;}
.section .row{margin-right:-5px;margin-left:-5px;}
.section .row [class*="col-"]{padding-right:5px;padding-left:5px;margin-bottom:10px;}
@media (min-width: 576px){
.container {max-width: 100%;}
}
@media (min-width: 768px){
.container {max-width: 100%;}
}
@media (min-width: 992px){
.container {max-width: 900px;}
}
@media (min-width: 1200px){
.container {max-width: 1000px;}
}
/*homepage*/
.featureList li{margin-bottom:10px;color:#586875;}
.featureList li:before{content:url('../images/star-y.png');padding-right:10px;/*height:20px;width:20px;*/}
.general_sectionTitle {text-align: center;position: relative;margin-bottom:30px;}
.general_sectionTitle span{font-weight:600;letter-spacing:2px;color:#A17F3F;padding:0 15px;font-size: 1.5rem;background:#fff;position: relative;z-index: 2}
.general_sectionTitle:after{content:'';width:100%;height:2px;background:#F0F0F4;position: absolute;left:0;top:50%;transform:translateY(-50%);z-index: 0;}
.general_learn .rwdImgBox{background-size:contain;}
.general_learn{text-align: center;}
.general_learn ._title{color:#A17F3F;}
.general_learn ._desc{margin-bottom:2rem;color:#586875;}
.general_learn .btn{min-width:80px;}
.section.news{background:#F7F7FA;}
.section.news .general_sectionTitle span{background:#F7F7FA;}
.section.news .general_sectionTitle:after{background:#DFDFDF;}
/*-------
Card
------*/
.custom_col_card,.custom_row_card{transition: all .2s;}
.custom_col_card {height:100%;}
.custom_row_card {margin:15px 0;}
.custom_row_card {background: #fff; padding: 1.2rem; border-radius: 5px; display: flex; flex-direction: row;border:1px solid #ddd}
.custom_col_card > .relative > .rwdImgBox{padding-bottom:56.25%;}
.custom_col_card:hover,.custom_row_card:hover{box-shadow:1px 1px 12px rgba(0, 0, 0, 0.4);transition: all .2s}
.custom_col_card .card-title{
margin-bottom: .5rem;
word-wrap: break-word;
height: 43px;
overflow: hidden;
display: -webkit-box;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color:#444;
}
.custom_col_card .card-speaker{color:#000;}
.custom_col_card .card-speaker span{display: inline-block;}
.custom_col_card .card-co{color:#999;}
.custom_col_card .card-desc{
color:#586875;
margin-bottom: 0;
word-wrap: break-word;
height: 70px;
overflow: hidden;
display: -webkit-box;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-size:16px!important;
line-height: 1.5!important;
}
.custom_row_card > .flex-fill {padding-left:15px;}
.custom_row_card > .flex-fill h5 {font-weight:600;}
.card-body {padding:.8rem}
/*-------
memberCenter
------*/
.sideMenu+.memberCard {margin-top:20px;border: 0;box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);margin-bottom:50px;}
.memberCard .custom_row_card:hover {box-shadow:none;}
.memberCard .custom_row_card{border:0;padding:0}
@media(max-width: 1199px) {
.custom_col_card .card-title{height: auto;-webkit-line-clamp: 4;}
}
@media(max-width: 992px){
.custom_row_card {flex-direction:column;padding:0;}
.custom_row_card > .flex0030,.custom_row_card > .flex0015 {flex:1 1 auto}
.custom_row_card > .flex-fill{padding:.8rem;}
.custom_row_card > .flex-fill >h4{font-size:1.2rem;}
.custom_row_card > .flex-fill >p{
height: 60px;
overflow: hidden;
display: -webkit-box;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-size:16px;
line-height:20px;
margin-bottom:0;
}
.fixedBtns {position:fixed;z-index:6;left:0;bottom:0;width:100%;box-shadow:0 0 15px rgba(126,126,126,.3);background:#fff;}
.fixedBtns .btn {border-radius:0;}
}
@media(max-width: 768px){
.custom_col_card{height: auto;}
.memberCard .custom_row_card{border: 1px solid #ddd;}
}
/*-------
pages
------*/
/*general detailPage*/
.container.bread{padding: 0}
.container.bread .breadcrumb{background:#fff;}
.container.bread .breadcrumb-item a{color:#333;}
.container.bread .breadcrumb-item a:hover{text-decoration: underline!important;}
@media(max-width:991px){
.container.bread + .container{padding:5px;}
}
/*generalLayout*/
.general_layout_sidePanel{display: flex;flex-wrap: nowrap;position: relative;}
.general_layout_sidePanel > .content{flex:1 1 auto;}
.general_layout_sidePanel > .sidePanel{flex:0 0 25%;padding-left:15px;}
.general_layout_sidePanel > .sidePanel > div:first-of-type{padding:10px;background:#fff;width:100%;}
.sidePanelBtn{display: none;padding: 15px;margin-top:10px;background:#E2D5EB;border-top-left-radius: 2rem;border-bottom-left-radius: 2rem;color:#8447AE;border:0;}
.sidePanelBtn:hover{background:#8447AE;color:#fff;}
.general_titleDivier {font-weight:600;border-bottom:1px solid #8447AE;color:#8447AE;padding-bottom:10px;margin:15px 0;}
@media (max-width: 991px) {
.general_layout_sidePanel > .sidePanel{padding-left:0;position: fixed;left: calc(100% - 46px);z-index: 6;display: flex;top:56px;/*top:50px;*/height:calc(100vh - 56px);/*height:calc(100vh - 50px);*/overflow-y: auto;}
.general_layout_sidePanel > .sidePanel.open{width:280px;left:calc(100% - 280px);transition: 0.5s;}
.general_layout_sidePanel > .sidePanel + .backdrop{/*right:-100%;left:unset;*/left:0;display:none;z-index: 5}
.general_layout_sidePanel > .sidePanel.open + .backdrop{/*right:0;transition: 0.5s;*/display:block}
.general_layout_sidePanel > .sidePanel.open .sidePanelBtn{display: none;}
.sidePanelBtn{display: block;align-self: end;}
}
/*generalTabs*/
.custom-tabsDiv{margin-left:-15px;margin-right:-15px;}
.custom-tabsDiv.fixed{position: fixed;top:56px;z-index: 99;width:100%;border-top: 1px solid #eee;}
.custom-nav-tabs {background:#fff;}
.custom-nav-tabs .nav-link{flex:1 0 auto;text-align: center;border-radius: 0;color:#333;}
.custom-nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active,.custom-nav-tabs .nav-link:hover{border-color:transparent;background:#a17f3f;color:#fff;font-weight: 600;}
.tab-content{padding:10px 15px 15px 15px;margin-left:-15px;margin-right:-15px;}
.custom-nav-tabs.menuCat{flex-wrap: nowrap;overflow-x:auto;margin-top:15px;}
.custom-tabsDiv.fixed .menuCat{margin-top:0;}
.custom-nav-tabs.menuCat .nav-item{margin:0;}
/*$custom-nav-tabs scrollbar*/
.custom-nav-tabs.menuCat::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.2);border-radius: 0px;background-color: rgba(0,0,0,0);}
.custom-nav-tabs.menuCat::-webkit-scrollbar{height: 2px;background-color: rgba(255, 255, 255, 0);}
.custom-nav-tabs.menuCat::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(161,127,63,0.5);background-color: #ffffff30;}
.custom-tab-content{padding:0!important;}
@media (max-width:991px) {
.tab-content{padding:10px;}
.tab-content .textDiv{margin:15px 0;}
}
@media(min-width:768px){
.custom-nav-tabs.menuCat{display: none;}
.tab-content ,.custom-tabsDiv{margin-left:0px;margin-right:0px;}
}
/*generalList*/
.custom-list > .title {display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;padding:5px 0}
.custom-list > .title h5 {font-weight:600;margin-bottom:0}
.custom-list li {display:flex;flex-wrap:nowrap;padding:8px 0;border-bottom:1px solid #eee}
.custom-list li:last-of-type {border-bottom:0}
.custom-list li > span{padding-right:10px;word-break:break-word}
.custom-list li > span:last-of-type{padding-right:0px;text-align:right;}
.custom-list li .pts:before {content:'+';}
.custom-list li .date {color:#999}
.custom-list li .date,.custom-list li .pts,.custom-list li .name {flex:0 1 120px;}
.custom-list li .desc,.custom-list li .range {flex:1 1 auto}
@media(max-width:576px) {
.custom-list li .pts {flex:0 0 50px;}
.custom-list li .date {flex:0 0 100px;}
}
/*會員中心*/
/*sideMenu*/
.sideMenu {
border-radius: 5px;
-webkit-box-flex: 0;
-ms-flex: 0 0 200px;
flex: 0 0 200px;
/*position: relative;
top: -60px;*/
margin-top: 20px;
margin-right: 15px;
}
.sideMenu .navbar-nav{box-shadow:1px 1px 6px rgba(0,0,0,.3)}
.sideMenu .nav-item{background:#fff;padding-right:1rem;padding-left:1rem;border-bottom:1px solid #ddd;}
.sideMenu .nav-item > .nav-link{color:#000}
.sideMenu .nav-item > .nav-link.active{font-weight:bold;color:#866597}
.sideMenu + .card{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;height:100%;}
.openMenu{display:none;}
@media(max-width:991.98px) {
.twoColDiv {-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;}
.sideMenu {margin:0;top:0;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;/* overflow:auto; */}
.sideMenu .navbar-nav{-webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; }
.sideMenu .navbar-nav .nav-item{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;text-align:center;}
.sideMenu .nav-item{padding-right: 0;padding-left: 0;}
.sideMenu .nav-item > .nav-link{font-size:.95rem;white-space:nowrap;position:relative;}
.sideMenu .nav-item > .nav-link.active:after{content:'';height:2px; position:absolute;width:100%;background:#E45A2C;bottom:-2px;left:0}
.sideMenu + .card {margin:0;top:0}
}
@media(max-width:991.98px) {
.sideMenu{position:relative;overflow: visible;}
.openMenu{display:block;height: 45px;font-size:20px;line-height: 45px;padding-left: 15px;background: #333;/* margin-left: 0; */color: #eee !important;font-weight: bold;}
.openMenu.open i{transform: rotate(90deg);}
.openMenu i{font-size:30px;line-height: 45px;margin-right:15px;transition: transform .15s;transform: rotate(0deg);}
.sideMenu .navbar-nav{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;top: 46px;width:100%;z-index:7;display:none;background: #333;}
.sideMenu .nav-item > .nav-link.active:after{content:'';height:0px; }
.sideMenu .navbar-nav.open{display:block;}
.sideMenu .navbar-nav .nav-item{background: #666;}
.sideMenu .nav-item > .nav-link{color:#fff; padding: .6rem 1rem;}
.sideMenu .nav-item > .nav-link.active{font-weight:normal;color:#fff}
.container.member {max-width: 100%;padding: 0;}
}
.warningDot {position:relative;}
.warningDot:after {content:'';position:absolute;width:8px;height:8px;border-radius:2rem;background:#FFA041;right: 0;top: 50%;transform: translate(-50%,-50%);}
/*eventRegDetail*/
.card.uneditableData {max-width:800px;margin:0 auto}
.card.eventReg .desc {display:flex;flex-wrap:wrap;margin:10px 0 20px 0;}
.card.eventReg .desc .lab {align-self:center;background:#eee;color:#586875}
.card.eventReg .desc .flex-fill {padding-left:10px;}
.uneditableData.form-label-140 .group {display:flex;flex-wrap:wrap;margin:5px 0;}
.uneditableData.form-label-140 .group .form-label {color:#586875;flex:0 0 140px;/*background:#f8f4ec;*/padding:5px;text-align:right;margin-bottom:0}
.uneditableData.form-label-140 .group .text {flex:1;padding:5px 10px;word-break:break-word;font-weight: 600}
@media(max-width:576px) {
.uneditableData.form-label-140 .group .form-label,.uneditableData.form-label-140 .group .text {/*text-align:left;*/flex: 0 0 100%}
.uneditableData.form-label-140.mobileRow .group .form-label {flex:0 0 100px;}
.uneditableData.form-label-140.mobileRow .group .text {flex:1}
}
@media(max-width:768px) {
.card.eventReg .desc .flex-fill {padding-left:0px;}
.card.eventReg .desc .flex0030 {flex:0 0 100%;}
}
/*---------------------
modal
--------------------*/
.modal-header {background: #fff;/*border-top-left-radius: 0;border-top-right-radius:0;*/padding:8px 15px;}
.modal-header .modal-title {color:#333}
.modal-header button {color:#333}
.modal-header button:hover {color:#ddd}
.modal-footer {justify-content:center;background:#f0f0f0;}
.modal-footer .btn {width:120px;}
.videoModal .modal-dialog {max-width: 800px;margin: 30px auto;}
.videoModal .modal-body {position: relative;padding: 0px;}
.videoModal .close {position: absolute;right: -30px;top: 0;z-index: 999;font-size: 2rem;font-weight: normal;color: #fff;opacity: 1;}
.modal-body .form-group {display:flex;flex-wrap:wrap;margin-bottom:5px;}
.modal-body .form-group > .form-label {font-weight:600;padding:7px 0;margin:0}
.modal-body .form-group > div {flex:1;}
.modal-body.form-label-80 .form-group > .form-label {flex:0 0 80px;}
.modal-body.form-label-100 .form-group > .form-label {flex:0 0 100px;}
.modal-body.form-label-140 .form-group > .form-label {flex:0 0 140px;}
.modal-body.form-label-160 .form-group > .form-label {flex:0 0 160px;}
.prdItmModal .modal-body .form-group {display:flex;flex-wrap:wrap;margin-bottom:15px;}
.prdItmModal .modal-body.form-label-140 .form-group > .form-label {flex:0 0 100%;margin-bottom:2px}
.prdItmModal .modal-body.form-label-140 .form-group > div {flex:0 0 100%}
.prdItmModal .modal-footer{background:#fff;align-items: unset}
.prdItmModal .modal-footer .amountBox {font-size:16px;flex:1 1 100%;}
.prdItmModal .modal-footer .amountBox input {text-align: center}
.prdItmModal .modal-footer .amountBox .price{color:#d70000;font-weight: 600;}
.prdItmModal .modal-footer .btn{width:80%;}
.prdItmModal .modal-footer .amountBox .input-group .btn{width:40px;}
.shareBox{text-align: center;}
.shareBox a{display: inline-block;padding:10px;}
.shareBox h6{margin:10px 0;}
.shareBox img{width:40px;}
.modal-fullscreen .modal-body {max-height:calc(100vh - 250px);overflow-y:auto;}
/*$modal-fullscreen scrollbar*/
.modal-fullscreen .modal-body::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);border-radius: 0px;background-color: rgba(0,0,0,0);}
.modal-fullscreen .modal-body::-webkit-scrollbar{width: 0px;background-color: rgba(255, 255, 255, 0);}
.modal-fullscreen .modal-body::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);background-color: #ffffff30;}
@media(max-width:992px) {
.modal-body .form-group > div {flex:0 0 100%;}
.modal-body[class*=form-label-] .form-group > .form-label {flex: 0 0 100%;text-align:left;}
}
@media(max-width:768px){
.modal-fullscreen {margin:0;}
.modal-fullscreen .modal-content{width: 100vw;min-height: 100vh;border: 0;border-radius: 0;}
.modal-fullscreen .modal-body{max-height:calc(100vh - 136px);overflow-y:auto;}
.prdItmModal .modal-content{min-height:calc(100vh - 30px);height:calc(100vh - 30px);margin-top:30px;}}
/*-------
Login
------*/
.single_bg {width:100%;min-height:calc(100vh - 56px);background:url(../images/bg.jpg);background-size:cover;}
@media (max-width:992px) {
.single_bg {min-height:calc(100vh - 50px);}
}
.loginbox{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px}
.loginbox .card-header{background:#FFF;margin:0 15px;text-align:center;padding:15px;}
.loginbox .form-control{margin:5px 0}
.loginbox a{color:#333;font-size:14px;}
.loginbox a:hover{opacity:.5;text-decoration:underline}
@media(max-width:575px) {
.loginbox{width:300px;}
}
/*message*/
.messagebox{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px}
.messagebox .card-header{background:#FFF;margin:0 15px;text-align:center;padding:15px;}
.messagebox .form-control{margin:5px 0}
@media(max-width:575px) {
.messagebox{width:300px;}
}
/*---------
formList
---------*/
.form-validate-error {color:#D70000;font-size:14px;}
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: #a17f3f;
background-color: #a17f3f;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
background-color: rgba(161,127,63,0.5);
border-color: transparent;
}
.custom-control-input + .form-validate-error {float:right;}
.star::before {content: '*';color: #D70000;margin-right: 5px;font-size: 20px;line-height: 0;}
.formList {background: #FFF;padding: 15px;width: 700px;margin: 0 auto;}
.formList .form-group {display:flex;flex-wrap:wrap;}
.formList .form-group+h3 {margin-top:30px}
.formList .form-group > div {flex:0 0 400px;}
.formList.form-label-100 .form-group > .form-label {flex:0 0 100px;}
.formList.form-label-140 .form-group > .form-label {flex:0 0 140px;}
.formList.form-label-160 .form-group > .form-label {flex:0 0 160px;}
.formList .form-group > .form-label {padding:7px 15px 7px 0;text-align:left;margin-bottom:0}
@media(max-width:992px) {
.formList{width:100%;padding:0;}
.formList .form-group{margin-bottom:0px}
.formList .form-group > div {flex:0 0 100%;}
.formList[class*=form-label-] .form-group > .form-label {flex: 0 0 100%;text-align:left;}
}
/*-------
pagination
--------*/
.pagination .page-item a,.pagination .page-item a:hover{font-size:13px;}
.pagination .page-item[active] a{background:#01a9ac; color:#fff;}
.pagination .page-link {color: #586875;}
.pagination .page-item.active .page-link {z-index: 1;color: #fff;background-color: #593987;border-color: #593987;}
/******************
survey
******************/
.topicBox > div {counter-increment: topic;}
.topicBox > div .title {font-weight:600;font-size:20px;margin-bottom:10px;}
.topicBox > div .title span:before {content:counter(topic)". ";font-weight:600;}
.topicBox > .active {position:relative;}
.topicBox > .active:before {content:'';position:absolute;left:-12px;width:5px;height:100%;border-radius:2rem;background:#8447AE}
.survey_title {
background: #FCAE1B;
position: relative;
left: -35px;
padding: 5px 15px;
margin-bottom: 10px;
font-size: 20px;
}
.survey_title:after {
content: '';
position: absolute;
width: 30px;
height: 100%;
background: inherit;
right: -15px;
top: 0;
transform: skewX(-20deg);
}
.survey_desc {font-size: 15px;padding-bottom: 10px;margin-bottom: 10px;color: #444;border-bottom: 1px solid #ddd;}
.circle {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ddd;
background: #fff;
border-radius: 10px;
position: relative;
z-index: 2;
}
.check {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ddd;
background: #fff;
border-radius: 3px;
position: relative;
z-index: 2;
}
.circle ,.check {vertical-align: sub;flex:0 0 auto;margin-right:10px;pointer-events:none;}
.option input[type="checkbox"],.option input[type="radio"] {display:none;}
.option .circle::before {
content: " ";
background-color: #DF7D27;
border-radius: 100%;
width: 10px;
height: 10px;
position: absolute;
top: calc(50% - 5px);
left: calc(50% - 5px);
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-moz-transition: all .15s ease-in-out; /* Firefox 4 */
-webkit-transition: all .15s ease-in-out; /* Safari and Chrome */
-o-transition: all .15s ease-in-out; /* Opera */
}
.option .check::before {
content: "";
background-image: url(/assets/images/check.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 100%;
height: 100%;
position: absolute;
transition: all 1s ease-in-out;
-moz-transition: all .15s ease-in-out; /* Firefox 4 */
-webkit-transition: all .15s ease-in-out; /* Safari and Chrome */
-o-transition: all .15s ease-in-out; /* Opera */
}
.option input[type="radio"]:not(:checked) ~ .circle::before, .option input[type="radio"]:not(:checked) ~ .d-flex .circle::before, .option input[type="checkbox"]:not(:checked) ~ .d-flex .check::before {
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.option input[type="radio"]:checked ~ .circle::before, .option input[type="radio"]:checked ~ .d-flex .circle::before, .option input[type="checkbox"]:checked ~ .d-flex .check::before {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.option {
-webkit-box-flex: 1;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
text-align: left;
position:relative;
margin-bottom:3px;
}
.option label:first-of-type {
width: 100%;
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index:4;
cursor:pointer;
}
.option .optionText {
padding-top:0px;
font-size: 1rem;
display:inline-block;
z-index:3;
pointer-events: none;/*¬ï³z*/
flex:1 1 auto;
word-break:break-word;
}
.option input[type="radio"]:checked+label,.option input[type="checkbox"]:checked+label {background-color: rgba(243, 172, 66, 0.3);z-index: 0;border-radius: 5px;}
.option .d-flex:first-of-type {padding:5px 10px;align-items:center;}
/******************
survey for mobile
******************/
@media(max-width:768px) {
.option {-ms-flex-preferred-size:50px;flex-basis:50px;text-align:left;}
.option .optionText{display:inline-block;position:relative}
.circle {vertical-align:sub;}
.option input[type="radio"]:checked+label,.option input[type="checkbox"]:checked+label {background-color:rgba(243, 172, 66, 0.3);z-index:0;border-radius:5px;}
.container.survey {padding:0;}
.survey_title{left:-13px;}
}
/***********************
********* noData ******
***********************/
.noData {text-align: center;color: #777;font-weight: bold;padding: 30px 0;}
.noData img {width: 100px;margin-bottom: 10px;}
/******************下拉選單含搜尋input*******************/
.select2 {width: 100%!important}
.select2-container--default :focus {border-color: #8447AE;outline:none;}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {border-color: transparent transparent #fff transparent}
.select2-container--default .select2-search__field:focus {border: 1px solid #8447AE}
.select2-container--default .select2-results__option--highlighted[aria-selected] {background-color: #8447AE !important;}
.select2-container--default .select2-selection--multiple {padding: 3px}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #8447AE !important;
border: 1px solid #8447AE !important;
/*padding: 5px 15px;*/
color: #fff !important;
border-radius: 4px !important;
cursor: default !important;
float: left !important;
margin-right: 5px !important;
margin-top: 5px !important;
padding: 0 5px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice span {color: #fff}
.select2-container--default .select2-selection--multiple .select2-search__field {border: none}
.select2-container--default.select2-container--focus .select2-selection--multiple {border: 1px solid #8447AE !important;}
.select2-container--default .select2-selection--single {color: #fff;height: auto}
.select2-container--default .select2-selection--single .select2-selection__rendered {background-color: #8447AE;color: #fff;padding: 8px 30px 8px 20px}
.select2-container--default .select2-selection--single .select2-selection__arrow {top: 10px;right: 15px}
.select2-container--default .select2-selection--single .select2-selection__arrow b {border-color: #fff transparent transparent transparent}
.select2-container--default .select2-selection--single {border:1px solid #ccc!important;}
.select2 > .selection > .select2-selection--single {height:unset !important;}
.select2 > .selection > .select2-selection--single > .select2-selection__rendered {background: none !important;}
.select2 > .selection > .select2-selection--single > .select2-selection__arrow {top: 10px !important;}
.select2-dropdown {z-index:9999!important}
@media screen and (max-width: 767px) {
.searchBox label{margin-right:0;display:block;width:100%;text-align:left;}
.searchBox > div {text-align: center !important;}
.searchBox .btn{width:100%;margin-top:10px;}
.searchBox .form-group{padding:0;}
.searchBox .form-group,.searchBox .form-control{width:100% !important;text-align:left;margin-left:0 !important;}
.searchBox .select2-container{width:100% !important;}
}
/*table通用*/
.table th {
vertical-align: middle !important;
height: 46px;
border-bottom-width: 0;
background-color: #263238;
border: .1rem solid #8a837f;
border-left-color: transparent;
color: #fff;
font-weight: 600;
padding: 10px;
text-align: left;
white-space: nowrap !important;
}
.table th:first-child {border-left-color: #8a837f }
.table td {
padding: 10px;
vertical-align: middle !important;
border-left: .1rem dashed #d6d6d6 !important;
border-right: .1rem dashed #d6d6d6 !important;
color: #303030;
border-top: 0 !important;
}
th.sorting_disabled {width: 37px;}
.table td:first-child {border-left-style: solid !important;}
.table td:last-child {border-right-style: solid !important;}
.table tr:last-child td {border-bottom: .1rem solid #d6d6d6}
.table tbody tr:hover{background-color:#e2eef2 !important;}
.table td .btn{white-space:nowrap !important;margin:2px 2px;}
.table-responsive{overflow-x:auto;border:none;}
@media screen and (max-width: 767px){
.table-responsive{border:none;}
}
.table td {white-space: normal !important;}
/***********************
********* icon ******
************************/
.dateIcon,.clockIcon,.ptsIcon,.unitIcon{display:inline-block;position:relative;width:100%;}
.dateIcon>.form-control,.clockIcon>.form-control,.ptsIcon>.form-control,.unitIcon>.form-control{padding-right:30px;}
.dateIcon:after{content:'';background:url("../images/ic_date.svg") no-repeat;height:20px;width:20px;position:absolute;right:10px;top:8px;pointer-events:none;}
.clockIcon:after {content: '';background: url("../images/ic_clock.svg") no-repeat;height: 20px;width: 20px;position: absolute;right: 10px;top: 8px;}
.ptsIcon:after {content: '點';position: absolute;right: 10px;top: 50%;transform: translateY(-50%);}
.unitIcon:after{content: '個';position: absolute;right: 10px;top: 50%;transform: translateY(-50%);}
@media screen and (max-width: 767px) {
.dateIcon,.clockIcon,.ptsIcon{position:relative;width: 100%;}
}
/****loading****/
#loader2 {
width: 80px;
height: 130px;
display: block;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
top: calc(50% - 50px);
left: calc(50% - 50px);
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
margin: 0 auto;
}
#circle-loader2 {
fill: none;
stroke: #e38430;
stroke-width: 4;
-webkit-animation: draw 3s ease-in-out infinite;
animation: draw 3s ease-in-out infinite
}
@-webkit-keyframes draw {
0% {
stroke-dasharray: 20, 282.6
}
50% {
stroke-dasharray: 200, 282.6
}
100% {
stroke-dasharray: 20, 282.6
}
}
@keyframes draw {
0% {
stroke-dasharray: 20, 282.6
}
50% {
stroke-dasharray: 200, 282.6
}
100% {
stroke-dasharray: 20, 282.6
}
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
/*Masonry*/
.custom_grid{margin-left:-5px;margin-right:-5px; margin-top:20px;}
.custom_grid .grid-item{margin-bottom:20px;}
.custom_grid .grid-item[class*="col-"]{padding-right:5px;padding-left: 5px;}
.custom-tabsDiv.fixed + .custom_grid.menuCat{margin-top:15px;}
.custom_grid.menuCat .title{font-weight:600;margin-bottom:0;}
.custom_grid.menuCat .title:before{content: "\e830";font-family: 'feather';padding-right: 5px;color: #c6a86f;}
.custom_grid.menuCat .list-group-flush .list-group-item{display: flex;padding:.75rem .8rem;border-top: 1px solid rgba(0,0,0,.1);border-bottom: 1px solid rgba(0,0,0,.1);align-items: center;}
.custom_grid.menuCat .list-group-flush .list-group-item.disabled:after{content:"";position: absolute;left:0;top:0;background:#fff;opacity: 0.6;width:100%;height:100%;}
.custom_grid.menuCat .list-group-flush .list-group-item.disabled .desc .prdName:after{content: "售完";z-index: 9;color: #fff;font-size: 14px;padding: 0 3px;background: #000;border-radius: 5px;margin:0 5px;display: inline-block}
.custom_grid.menuCat .list-group-item[data-toggle*="modal"] {cursor:pointer;}
.custom_grid.menuCat .list-group-item .img{width:50px;}
.custom_grid.menuCat .list-group-item .desc{flex:1;display:flex;flex-direction: column;justify-content: space-between;}
.custom_grid.menuCat .list-group-item .desc + .img{margin-left:10px;}
.custom_grid.menuCat .list-group-item .desc .prdName{font-weight:600;font-size: 16px;flex:1;}
.custom_grid.menuCat .list-group-item .desc .price{font-size: 16px;color:#d70000;flex-shrink: 0}
.custom_grid.menuCat .card{border:0;overflow:hidden;}
.custom_grid.menuCat .card .card-body{border-bottom:2px solid #c6a86f;background:#eae4d9}
@media(max-width:768px){
.custom_grid{margin-left:-15px;margin-right:-15px;margin-top:0;}
.custom_grid .grid-item[class*="col-"]{padding-right:0px;padding-left: 0px;}
/*.custom_grid .grid-item{margin-bottom:0px;}*/
.custom_grid.menuCat .card{border-radius: 0;}
}
.main{padding-bottom:0;}
.fixedBottom {padding:30px 0;}
.fixedBottom .btn{width:100%;border-radius: 0;font-size:16px;padding:.75rem;}
.fixedBottom.twoBtns{display: flex;flex-direction:row;padding:30px 0;}
.fixedBottom.twoBtns .btn:first-child{flex:0 1 300px;}
.fixedBottom.float {flex-direction:column;display: flex;position: fixed;right: 5%;bottom:80px;z-index: 99;width:200px;padding:0;}
.fixedBottom.float .btn{border-radius: 5px;}
.fixedBottom.twoBtns.float a:first-of-type{margin-bottom:10px;flex:1;}
.poilcyBox{padding-top:1rem;padding-bottom:38px;}
.errorBox {padding-top:35px;text-align:center;max-width:500px;margin:0 auto;}
.errorBox i {font-size:65px;color:#fff;background:linear-gradient(90deg,#FFA041,#FF885B);padding:15px;display:inline-block}
.errorBox .card {box-shadow:1px 1px 12px rgba(0, 0, 0, 0.1);overflow:hidden}
.errorBox .desc {font-size:18px;font-weight:600}
.errorBox .code {color:#999;font-size:initial}
.phoneNumBox, .verifyCodeBox ,.initOrdBox{margin-top:35px;}
.initOrdBox{border:0;border-radius: 0}
@media(max-width:576px){
.initOrdBox{margin-top:0}
.main{padding-bottom:47px;}
.fixedBottom{position: fixed;left:0;bottom:0;width:100%;padding:0}
.fixedBottom.twoBtns{display: flex;flex-direction:row;padding:0;}
.fixedBottom.twoBtns .btn:first-child{flex:0 0 100px;}
.fixedBottom.float {flex-direction:row;left:0;right: unset;bottom:0;width:100%;}
.fixedBottom.float .btn{border-radius: 0px;}
.fixedBottom.twoBtns.float a:first-of-type{margin-bottom:0px;flex:0 0 100px;}
}
/*pillOpt checkbox&radio*/
.ordOptBox{display: flex;flex-direction: row;flex-wrap: wrap;}
.opt{position: relative;flex:0 0 calc(33.33% - 5px);margin-right:5px;margin-bottom:5px;}
.ordOptBox > div:last-of-type{margin-right:0;}
.opt label{padding:5px;margin-bottom: 0;width:100%;text-align:center;border:1px solid #C6A86F;color:#C6A86F;border-radius: 5px;}
.opt input[type="checkbox"],.opt input[type="radio"]{opacity: 0;position: absolute;top:0;left:0;}
.opt input[type="checkbox"]:not([class*=".disabled"]):not([disabled]) + label,.opt input[type="radio"]:not([class*=".disabled"]):not([disabled])+ label{cursor:pointer;}
.opt input[type="checkbox"]:checked + label,.opt input[type="radio"]:checked + label{background:#C6A86F;color:#fff;}
.price:before{content:' $';}
/*團購資訊*/
.teamBuyInfoBox{margin:-10px -10px 10px -10px;background:#56576A;color:#fff;display: flex;flex-direction: column;justify-content: space-between;}
.teamBuyInfoBox .desc{padding:10px;flex:1;}
.teamBuyInfoBox .desc .leader:before{content:'團主';display:inline-block;width:70px;}
.teamBuyInfoBox .desc .time:before{content:'結團時間';display:inline-block;width:70px;}
.teamBuyInfoBox .desc .time a{vertical-align: text-top;padding-left:5px;}
.teamBuyInfoBox .btn{border-radius: 0;flex-shrink: 0}
.teamBuyInfoBox .input-group.link .form-control {background: #696a7b;color: #ccc;border: 0;}
/*generalCard(container修正)*/
.general_card_container{margin-right:-15px;margin-left:-15px;border-radius: 0px;overflow: hidden;}
.general_card{background:#fff;padding:10px;}
.general_card h6.title{font-size:18px;font-weight: 600;}
.general_card .desc i{padding-right:2px;color:#c6a86f;font-size:16px;width:20px;text-align: center}
.general_card .desc a:hover{opacity: .6}
.general_card .desc .text{color:#333;}
.general_card .desc .title{color:#333;padding-right:5px;}
.general_card .desc.shopInfo > div{display: inline-block;margin-right:10px;}
.general_card .divider{border:1px dashed #eee;margin-top:10px;margin-bottom:10px;position:relative}
/*.general_card .divider:before ,.general_card .divider:after{content: "";position: absolute;width: 20px;height: 20px;background: #eeeeee;border-radius: 2rem;}
.general_card .divider:before{left: -25px;top: -10px;}
.general_card .divider:after{right: -25px;top: -10px;}*/
.general_card .desc.buyInfo > .adrs,.general_card .desc.buyInfo > .time{display: inline-block;margin-right:10px;}
.general_card.ordList{display: flex;border-bottom:1px solid #eee;}
.general_card.ordList h6.title{margin:0;}
.general_card.ordList > .desc{display: flex;flex-direction: column;justify-content:space-between;position:relative}
.general_card.ordList > .desc > .d-flex{align-items: flex-start;margin-bottom:5px;}
.general_card.ordList > .desc > .d-flex > .badge{width:57px;}
.general_card.ordList > .desc .time:before{content:'取餐時間';color:#bbb;padding-right:5px;}
.general_card.ordList > .desc .status:before{content:'訂單狀態';color:#bbb;padding-right:5px;}
.general_card.ordList > .desc .status .text{font-weight: 600;color:#a17f3f;}
.general_card.ordList > .desc .buyType{color:#999;}
.general_card.ordList > .desc .price{color:#D70000;font-weight: 600;font-size: large;}
.general_card.ordList > .desc .cancelBtn{margin-top:auto;padding:5px;}
.general_card.ordList > .desc .cancelBtn i{font-size:18px;}
.general_card.ordList > .desc .cancelBtn:hover{opacity: .6}
.general_card.ordList > div:first-of-type{flex:1 1 auto;}
.general_card.ordList > div:last-of-type{text-align:right;}
@media(min-width: 768px){
.general_card_container{margin-right:0px;margin-left:0px;border-radius: 5px;}
.general_card{padding:15px;}
.teamBuyInfoBox{margin:-15px -15px 15px -15px;}
.teamBuyInfoBox .desc{padding:10px 15px;}
}
/*badge*/
.custom_badge{font-size: inherit;}
.badge-primary{}
.badge-secondary{}
.badge-success{background:#88ac3e;}
.badge-danger{}
.badge-warning{}
.badge-info{}
.badge-light{}
.badge-dark{}
.badge-lightGray{background:#eee; color:#333;}
.warningDiv{background:#f8d7da;width:100%;padding:5px;text-align: center;color:#721c24}
.successDiv{background:#64c167;width:100%;padding:5px;text-align: center;color:#fff}
.dangerDiv {background:#D70000;width:100%;padding:5px;text-align: center;color:#fff}
.successDiv.obvious {font-size:larger;padding:10px 5px;font-weight:600}
/***sweetAlert***/
.swalNoBtns .sa-button-container {display:none;}
.swalNoDesc .lead {display:none;}
.swalXsDesc .lead {font-size:15px;font-weight:normal}
.sweet-overlay {z-index:1060!important}/*modal z-index:1050*/
/*dotProgress*/
.dotProgress{display: flex;flex-direction: row;flex-wrap: nowrap;margin:20px auto;max-width:600px;}
.dotProgress .stage{flex:1 0 33.33%;position: relative;}
.dotProgress .stage:after{content:'';width:100%;height:1px;background:#bbb;position: absolute;left:0;top:10px;}
.dotProgress > div:first-of-type:after{width:50%;left:50%;}
.dotProgress > div:last-of-type:after{width:50%;right:50%;left: unset;}
.dotProgress .stage .dot{position: relative;}
.dotProgress .stage .dot:after{content:'';width:18px;height:18px;background:#999;border-radius: 2rem;border:5px solid #f1f1f1;position:absolute;left:50%;transform: translateX(-50%);z-index:9;}
.dotProgress .stage.active .dot:after{background:#A17F3F;}
.dotProgress .stage .text{text-align: center;margin-top:18px;color:#999;}
.dotProgress .stage.active .text{color:#A17F3F;font-weight:600;}
/*memList 訂購項目by人*/
.memList > div ,.memList > .collapseDiv > div{/*border-bottom:1px dashed #ddd;*/margin-bottom:5px;}
.memList > div:last-of-type, .memList > .collapseDiv > div:last-of-type{border-bottom:0;margin-bottom:0;}
.memList .single .header{display: flex;justify-content: space-between;border-bottom:1px dashed #ddd;}
.memList .single .header .user{color:#a17f3f;}
.memList .single .header .user i{padding-right:5px;}
.memList .single .header .price{color:#d70000;/*font-weight: 600;*/font-size: 16px;}
.memList .single .itmList > .itm{padding:10px 0;/*border-bottom:1px solid #eee;*/}
/*.memList .single .itmList > div:last-of-type{border-bottom:0;}*/
.memList .single .itm {display: flex;}
.memList .single .itm .amount{padding:5px;border:1px solid #ddd;width:35px;text-align: center;align-self: center;}
.memList .single .itm .desc{flex:1;padding:0 10px;}
.memList .single .itm .desc .name{font-weight:600;font-size:16px;}
.memList .single .itm .edit{flex:0 0 70px;text-align: right;font-size:16px;}
.memList .single .itm .edit .price{margin-bottom:15px;}
.memList .single .itm .edit a{padding:0 5px;width: 30px;display: inline-block;font-size: 18px;color:#999;}
.memList .single .itm .edit a i{vertical-align: bottom;}
.memList .btn-collapse{width:100%;color:#a17f3f;border-bottom: 1px solid #ddd;/*border-top: 1px solid #ddd;*/margin-bottom: 5px;}
.memList .btn-collapse.collapsed span:after{font-family:'feather' ;content:"\e842";padding-left:5px;}
.memList .btn-collapse span:after{font-family:'feather' ;content:"\e845";padding-left:5px;}
.calculateBox{font-size:16px;}
.calculateBox .group{display: flex;flex-direction: row;padding:3px 0;align-items: center}
.calculateBox .group > div:first-of-type{flex:1 1 auto;text-align: right;padding-right:5px;}
.calculateBox .group .title i {color:#bbb;padding-right:5px;}
.calculateBox .group > .price{flex:0 0 80px;text-align: right;color:#d70000;}
.calculateBox .group.totalPrice .price{font-size:20px;}
.calculateBox .group.pts .title.d-flex{flex-wrap: wrap;}
.calculateBox .group.pts .text{flex:1 0 120px;}
.calculateBox .group.pts .text .nowPts{font-size:14px;font-weight: 600}
.calculateBox .group.pts .ptsIcon > .form-control{font-size:16px;text-align: right;height:100%;}
.calculateBox .group.pts .ptsIcon{max-width:100px;margin-left:5px;}
.calculateBox .group.bag .title{align-items:center;}
.calculateBox .group.bag .custom-checkbox{flex:1 0 120px;}
.calculateBox .group.bag .unitIcon{max-width:100px;margin-left:5px;}
.calculateBox .group.bag .unitIcon> .form-control{font-size:16px;text-align: right;height:100%;}
.calculateBox .group.remark .title{min-width:100px;padding-right:0;}
.calculateBox .group.remark{flex-direction: column;align-items:flex-end;}
.calculateBox .group.remark .form-control{max-width:450px;font-size: 16px;}
.calculateBox .group.remark .alert{width:100%;text-align: right;padding:.75rem;max-width: 450px;}
@media(max-width:576px) {
.calculateBox .group.bag .unitIcon,.calculateBox .group.pts .ptsIcon{max-width:90px;}
}
.imgDelBtn {position: absolute;background: #333;display: inline-block;border-radius: 2rem;color: #fff!important;font-size: 18px;padding: 0px 4px;right:-10px;top:-10px;}
.imgDelBtn:hover{background:#666}
/**Jumping Circle**/
.wrapper {
width: 200px;
height: 60px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.jumpCircle {
width: 20px;
height: 20px;
position: absolute;
border-radius: 50%;
background-color: #A17F3F;
left: 15%;
transform-origin: 50%;
animation: jumpCircle .5s alternate infinite ease;
margin: 0;
border: 0
}
@keyframes jumpCircle {
0% {
top: 60px;
height: 5px;
border-radius: 50px 50px 25px 25px;
transform: scaleX(1.7);
}
40% {
height: 20px;
border-radius: 50%;
transform: scaleX(1);
}
100% {
top: 0%;
}
}
.jumpCircle:nth-child(2) {
left: 45%;
animation-delay: .2s;
background-color: #c6a86f;
}
.jumpCircle:nth-child(3) {
left: auto;
right: 15%;
animation-delay: .3s;
background-color: #e8c88b;
}
.shadow {
width: 20px;
height: 4px;
border-radius: 50%;
background-color: rgba(0,0,0,.2);
position: absolute;
top: 62px;
transform-origin: 50%;
z-index: -1;
left: 15%;
filter: blur(1px);
animation: shadow .5s alternate infinite ease;
}
@keyframes shadow {
0% {
transform: scaleX(1.5);
}
40% {
transform: scaleX(1);
opacity: .7;
}
100% {
transform: scaleX(.2);
opacity: .4;
}
}
.shadow:nth-child(5) {
left: 45%;
animation-delay: .2s
}
.shadow:nth-child(6) {
left: auto;
right: 15%;
animation-delay: .3s;
}
.wrapper span {
position: absolute;
top: 90px;
font-size: 20px;
letter-spacing: 3px;
color: #aaa;
left: 50%;
transform:translateX(-45%);
}
/***************************
********daterangepicker 日期區間 *******
****************************/
.daterangepicker > div:nth-child(3) {display: block;}
.daterangepicker.ltr .ranges {float: none !important;text-align: right;}
.daterangepicker.ltr .ranges .range_inputs {display: -webkit-box;display: -ms-flexbox;display: flex;width: 100%;}
.daterangepicker.ltr .ranges .range_inputs button {-webkit-box-flex: 1;-ms-flex: 1;flex: 1}
.daterangepicker.ltr .ranges .range_inputs .cancelBtn {margin-right: 10px;}
.daterangepicker.ltr .ranges .range_inputs .applyBtn {-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2;}
.calendar-time select {height: 30px;width: 60px !important;}
.calendar.left.single {display: -webkit-box !important;display: -ms-flexbox !important;display: flex !important; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.calendar.left.single .daterangepicker_input {-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2;width: 100%;margin: 10px 0;}
.calendar.left.single .calendar-table {width: 100%;}
.calendar-time i{font-size: 27px;padding-top:5px;}
.calendar-time .hourselect,.calendar-time .minuteselect{width: 80px !important;}
.daterangepicker td.active, .daterangepicker td.active:hover {background-color: #c6a86f!important;}
.form-control {font-size: initial!important;}
/**Loading**/
.blackBG {
background: #000;
opacity: 0.5;
width: 100%;
height: 100%;
z-index: 99999;
position: fixed;
top: 0;
left: 0;
}
.loaderDiv {
position: fixed;
top: calc(50% - 100px);
left: calc(50% - 150px);
z-index: 999999;
width: 300px;
height: 200px;
background: #fff;
border-radius: 5px;
text-align: center;
padding: 20px 15px;
}
/*printImg*/
.print-Box{margin-bottom:10px;}
.print-Box p{font-weight: bold;display: flex;align-items: center;margin: 20px 0 10px 0;}
.print-Box p i.fa-check,.print-Box p i.fa-times{font-size: 24px;margin-right: 5px;}
.print-Box p i.fa-check{color: #009b1d;}
.print-Box p i.fa-times{color: #f63c3c;}
.print-list{display: flex;flex-wrap: wrap;}
.print-item{margin-right: 15px;border: 2px solid #586875;display: flex;margin-bottom: 15px;padding-top: 8px;}
.print-item-img{display:flex;flex-direction:column;align-items:center;justify-content:center}
.print-item-img img{width:60px;height:60px;}
.print-item-img span{text-align:center;color:#fff;background:#586875;width: 100%;width: 80px;margin-top: 10px;}
.print-item .print-item-img:last-child span{background:#A17F3F;}
@media(max-width:576px) {
.print-item-img span{font-size:14px;width:65px;}
.print-item{margin-right: 5px;}
}