@charset "utf-8";
@import url("reset.css");
@import url("loading.css");
@import url(jquery-ui.css);
/*@import url(jquery-ui.theme.css);*/
@import url("bootstrap.css");
/*@import url('https://fonts.googleapis.com/earlyaccess/cwtexming.css');*/
/*@import url('https://fonts.googleapis.com/css?family=Cinzel');*/
@import url('https://fonts.googleapis.com/css?family=Cormorant+Infant');
@import url('https://fonts.googleapis.com/css?family=Saira+Semi+Condensed');
@import url(icon/css/ionicons.css);
@import url(fontawesome5.2/css/all.min.css);
@import url("../js/sweetalert/sweetalert2.min.css");
@import url("../js/pagination-master/css/style.css");
/*@import url("/style/front/js/fancybox-3/dist/jquery.fancybox.min.css");*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.css");


/* ----------------------------------------------------------------------------------------------------------------*/

/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

html {
  position: relative;
  min-height: calc(100% - 0px);
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 80px;
  
}
body { -webkit-text-size-adjust: none; font-size: 12px; overflow-y: scroll; }
body, td, th { font-family: Verdana, Geneva, sans-serif; }
img { max-width: 100%; height: auto; }
a:hover{
  text-decoration: none;
}
#hiddle { display: none; }
.show { display: block; }
.hide { display: none; }
.show_table { display: block; }
.hide_table { 
	display: none; 
}
.iframe_ch { display: none; }
.license-box input { display: none; }
select::-ms-expand { display: none; }
select { }
/*div, a, section, article, span, img, h1, h2, h3, h4, h5, h6 { -webkit-user-select: none; -moz-user-select: none; }*/
#rand-img { cursor: pointer; }
#event_left, #event_right { width: 120px; height: 250px; }
.event_left_link a { padding: 5px 0; display: block; font-size: 14px; color: #888; font-family: 'Noto Sans TC', '微軟正黑體'; }
.nodata { font-size: 14px; line-height: 1.8; color: #666; }
.text-custom { color: #64b0f2 !important; }
.text-muted { color: #818a91 !important; }
.text-purple { color: #9261c6 !important; }
.text-pink { color: #ff7aa3 !important; }
.text-dark { color: #2b3d51 !important; }
.text-white { color: #ffffff !important; }
.text-success { color: #1bb99a !important; }
.m-t-10 { margin-top: 10px !important; }
.m-t-20 { margin-top: 20px !important; }
.m-t-30 { margin-top: 30px !important; }
.m-t-50 { margin-top: 50px !important; }
.m-t-70 { margin-top: 70px !important; }
.m-b-10 { margin-bottom: 10px !important; }
.m-b-15 { margin-bottom: 15px !important; }
.m-b-20 { margin-bottom: 20px !important; }
.m-b-30 { margin-bottom: 30px !important; }
.m-l-5 { margin-left: 5px !important; }
.m-r-5 { margin-right: 5px !important; }
.label { display: inline-block; padding: .25em .4em; font-size: 75%; font-weight: 400; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; }
.label-danger { background-color: #ff5d48; }
.center{ text-align: center; }


.card_num_block .card_num_label{ 
    display: block;
    font: normal 14px '微軟正黑體';
    letter-spacing: 1px;
    line-height: 25px;
    cursor: default;
}
.card_num{     
	padding: 3px 5px;
    font: normal 14px '微軟正黑體';
    letter-spacing: 1px;
    color: #555; 
    width: 55px;
}
.card_info{ font-size: 13px; line-height: 1.4; }
.file input { width: 100%; min-width: 14rem; margin: 0; filter: alpha(opacity=0); opacity: 1; top: 0; right: 0; left: 0; z-index: 5; padding: .0rem 1rem; line-height: 1.5; color: #555; user-select: none; background-color: #fff; border: 1px solid #ccc; border-radius: 0rem; }
.ifile { position: absolute; opacity: 0; filter: alpha(opacity=0); padding: 0;}
.upfile{margin: -5px 0 0;}
.newfilebtn { border: none; padding: 3px 12px; color: #fff; background: #64b0f2; border-radius: 0px; }
.swal2-container button, .swal2-modal .swal2-title, .swal2-modal .swal2-content{font-family: 'Century Gothic', '微軟正黑體'; font-size: 16px;}
.mt-header{margin-top: 202px;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> public <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.btnCustom-outline { border-radius: 0; border: solid 1px #78707b; color: #78707b; background: none; font: normal 14px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; height: 30px;padding: 0;line-height: 30px;}
.btnCustom-outline:hover, .btnCustom-outline:focus , .btnCustom-outline.active { color: #fff; background: #78707b; }
.btnCustom-outline:disabled {
  background-color: #fff;
  color: #78707b;
}
.btnCustom-outline.btnWhite { border-radius: 0; border: solid 1px #fff; color: #fff; }
.btnCustom-outline.btnWhite:hover, .btnCustom-outline.btnWhite:focus { color: #216b9c; background: #fff; }
.btnCustom-outline.btnGray { border-radius: 0; border: solid 1px #999; color: #777; }
.btnCustom-outline.btnGray:hover, .btnCustom-outline.btnGray:focus { color: #fff; background: #999; }
.btnCustom-outline.btnOrange { border-radius: 0; border: solid 1px #e5a300; color: #e5a300; }
.btnCustom-outline.btnOrange:hover, .btnCustom-outline.btnOrange.active, .btnCustom-outline.btnOrange:focus { color: #fff; background: #e5a300; }
.btnCustom-outline.googleBtn, .btnCustom-outline.googleBtn:focus { border-radius: 0; border: solid 1px #dd4e41; color: #dd4e41;  background: none; }
.btnCustom-outline.googleBtn:hover, .btnCustom-outline.googleBtn.active { color: #fff; background: #dd4e41; }
.btnCustom-outline.facebookBtn, .btnCustom-outline.facebookBtn:focus { border-radius: 0; border: solid 1px #3b5998; color: #3b5998;  background: none; }
.btnCustom-outline.facebookBtn:hover, .btnCustom-outline.facebookBtn.active { color: #fff; background: #3b5998; }
.btnCustom-outline.lineBtn, .btnCustom-outline.lineBtn:focus { border-radius: 0; border: solid 1px #02b801; color: #02b801;  background: none; }
.btnCustom-outline.lineBtn:hover, .btnCustom-outline.lineBtn.active  { color: #fff; background: #02b801; }
.btnCustom-outline.btnBorderRadius-5px{border-radius:5px; }
.width-80px  { width: 80px; }
.width-100px { width: 100px; }
.width-150px { width: 150px; }
.width-200px { width: 200px; }
.width-250px { width: 250px; }
.width-300px { width: 300px; }
.maxWidth-100px { max-width: 100px; }
.maxWidth-150px { max-width: 150px; }
.maxWidth-200px { max-width: 200px; }
.maxWidth-250px { max-width: 250px; }
.maxWidth-300px { max-width: 300px; }
.mt-10px{margin-top: 10px;}
.mt-20px{margin-top: 20px;}
.mt-30px{margin-top: 30px;}
.mt-40px{margin-top: 40px;}
.tableRwdContent{display: none}
.tableCustomStyle { color: #555; font: normal 14px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px;}
.tableCustomStyle thead tr th { border-top: none; color: #fff; font: normal 15px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; background: #436d00;}
.tableCustomStyle tbody tr td { border-top: none; font: normal 14px 'Century Gothic', '微軟正黑體'; color: #555; background: rgba(255,255,255,0.6);}
.tableCustomStyle tbody tr:nth-child(2n+2) td{background: rgba(234,242,223,0.6);}
.tableCustomStyle tbody tr:last-child td { border-top: none; border-bottom: double 3px #436d00; }
.tableCustomStyle a { text-decoration: none; color: #6a9a1e; }
.tableCustomStyle a:hover{
  opacity: 0.6;
}
.pageCustomStyle{}
.pageCustomStyle.pagination { border-radius: 0; }
.pageCustomStyle .page-item:first-child .page-link { border-radius: 0; }
.pageCustomStyle .page-item:last-child .page-link { border-radius: 0; }
.pageCustomStyle .page-item.active .page-link { background-color: #fff; color: #216b9c; border: none; font-weight: bolder; }
.pageCustomStyle .page-item.active:hover .page-link { background-color: #e9ecef; }
.pageCustomStyle .page-link { padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; color: #216b9c; background-color: #fff; font: normal 14px 'Century Gothic', '微軟正黑體'; border: none; }
.pageCustomStyle .page-link:focus, .pageCustomStyle .page-link:hover { color: #216b9c; text-decoration: none; font-weight: bolder; background-color: #e9ecef; border-color: #ddd; }
.mr-10px { margin-right: 10px; }
.formCustomStyle{font-family: 'Century Gothic', '微軟正黑體';}
.formCustomStyle .col-form-label{font: normal 15px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; color: #555}
.formCustomStyle .form-group input.form-control, .formCustomStyle .form-group select.form-control { height: 30px; padding: 3px 5px; line-height: 24px; border-radius: 0px; font: normal 14px 'Century Gothic', '微軟正黑體'; border:solid 1px #bbb; }
.formCustomStyle .form-group input.form-control:focus, .changeSearchFormContainer .form-group select.form-control:focus, .formCustomStyle .form-group textarea.form-control:focus { box-shadow: none; }
.formCustomStyle .form-group input.form-control-plaintext{ font: normal 14px 'Century Gothic', '微軟正黑體';}
.formCustomStyle .form-group textarea.form-control{font: normal 15px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px;line-height: 24px; border-radius: 0px; border: solid 1px #bbb;}
.formCustomStyle.formCustomStyle-borderBottom .form-group input.form-control, .formCustomStyle.formCustomStyle-borderBottom .form-group select.form-control { height: 30px; padding: 3px 5px; line-height: 24px; border-radius: 0px; font: normal 14px 'Century Gothic', '微軟正黑體'; border: none; border-bottom: solid 1px #777; }
.formCustomStyle .parsley-errors-list{color: #ff9e34}
.formCustomStyle ul.parsley-errors-list{margin-bottom: 0px;}
.formCustomStyle .fileuploader-input .fileuploader-input-button,
.formCustomStyle .fileuploader-popup .fileuploader-popup-content .fileuploader-popup-button.button-success{background-color: linear-gradient(135deg, #92b50f 0, #546b00 100%);}
.formCustomStyle .fileuploader-input .fileuploader-input-caption{
    color: #92b50f;
}
.cursor-pointer { cursor: pointer; }
.articleContainer { font: normal 14px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; color: #777;}
.tableHeaderHide { display: none }
.lineHeight25 { line-height: 25px; }
.lineHeight30 { line-height: 30px; }
.lineHeight35 { line-height: 35px; }
.lineHeight40 { line-height: 40px; }

.contentContainer { font: normal 15px 'Century Gothic', '微軟正黑體'; line-height: 25px; letter-spacing: 1px; color: #777; }
.bodyBg { background: url(../images/BG_5.jpg) no-repeat fixed center center; background-size: cover; }
.titleContainer { height: 90px; width: 90%; margin: 0 auto; }
.title { font: normal 18px 'Century Gothic', '微軟正黑體'; color: #625e66; }
.titleDecLine { content: ""; width: 100%; height: 1px; background: #b2acbc; }


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_header.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.header { padding: 25px 0; top: 0px; transition: all 0.4s; width: 100%; position: absolute; }
.headerScroll { background: #dfdce1; position: fixed; top: 0; z-index: 300; padding: 10px 0; box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5);  /*background: url(../images/BG_5.jpg) no-repeat fixed top center;*/ }
.headerLogo { width: 100%; transition: all 0.4s; }
.headerScroll .headerLogo { width: 100px; margin: auto; }
.header .nav { font: 400 18px 'Cormorant Infant', '微軟正黑體'; letter-spacing: 1px; }
.header .nav a { color: #555555; transition: all 0.6s; }
.header .nav .headerNavChi span { font-weight: 600 }
.header .nav .headerNavEn { font: 600 16px 'Cormorant Infant', '微軟正黑體'; letter-spacing: 2px; }
.header .nav .headerNavEn { color: #888; }
.header .nav a:hover { opacity: 0.6; }
.headerNavNum { position: absolute; right: -0px; top: -0px; width: 20px; height: 20px; background: #d41010; border-radius: 50%; font: bold 13px 'Century Gothic', '微軟正黑體'; text-align: center; line-height: 20px; z-index: 10; color: #fff; }

/* --------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> index.php <<<-------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------*/

.banner { }
.indexStylistContainer { }
.indexHairstyleContainer { }
.indexStylistBoxLine { position: relative; }
.indexStylistBox { border: solid 1px #ccc; background: rgba(255, 255, 255, 0.3); padding: 8px 10px; position: relative; }
.indexStylistBox::after { content: ""; border-right: solid 1px #aaa; position: absolute; top: 0; right: 0; height: 0%; transition: all 0.5s; }
.indexStylistBox:hover::after { height: 100%; border-right: solid 1px #999; }
.indexStylistBox::before { content: ""; border-bottom: solid 1px #aaa; position: absolute; bottom: 0; right: 0; width: 0%; z-index: 50; transition: all 0.5s; }
.indexStylistBox:hover::before { width: 100%; border-bottom: solid 1px #999; }
.indexStylistBoxLine::before { content: ""; border-top: solid 1px #aaa; position: absolute; top: 0; left: 0; width: 0%; z-index: 50; transition: all 0.5s; }
.indexStylistBoxLine:hover::before { width: 99.5%; border-top: solid 1px #999; }
.indexStylistBoxLine::after { content: ""; border-left: solid 1px #aaa; position: absolute; bottom: 0; left: 0; height: 0%; transition: all 0.5s; }
.indexStylistBoxLine:hover::after { height: 100%; border-left: solid 1px #999; }
.indexStylistImg { overflow: hidden; }
.indexStylistImg img { transition: all 0.3s; }
.indexStylistBox:hover .indexStylistImg img { transform: scale(1.15); }
.indexStylistName { margin-top: 5px; font: normal 15px 'Century Gothic', '微軟正黑體'; }
.indexStylistName a { color: #555; transition: all 0.3s; }
.indexStylistName a:hover { color: #aba3b5; }
.indexHairstyleBox { position: relative; overflow: hidden; padding-bottom: 133%; }
.indexHairstyleImg { overflow: hidden; position: absolute; height: 100%; width: 100%;  }
.indexHairstyleImg img { transition: all 0.6s; object-fit: cover; width:100%; height:100%;  }
.indexHairstyleBox:hover .indexHairstyleImg img { transform: scale(1.14); }
.indexHairstyleNameContainer { position: absolute; bottom: 0; height: 40px; width: 100%; background: rgba(0, 0, 0, 0.3); text-align: center; font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; transition: all 0.6s; }
.indexHairstyleName { top: 50%; position: relative; transform: translateY(-50%); color: #fff; }
.indexHairstyleBox:hover .indexHairstyleNameContainer { height: 100%; background: rgba(0, 0, 0, 0.5); }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> stylist_detail.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.stylistDetailNameContainer { margin-bottom: 50px; }
/*.stylistDetailNameContainer i{
  font-size: 50px;
}*/
.stylistDetailNum { font: bold 16px 'Cormorant Infant', '微軟正黑體'; letter-spacing: 1px; color: #999; }
.stylistDetailName span { font: bold 35px 'Cormorant Infant', '微軟正黑體'; letter-spacing: 2px; color: #555; }
.stylistDetailName a { width: 120px; display: inline-block; margin-left: 20px; position: relative; top: -8px; }
.stylistDetailName a:hover img { opacity: 0.8; }
.stylistDetailLicenseContainer { }
.stylistDetailTitle { display: inline-flex; font: bold 18px 'Century Gothic', '微軟正黑體'; color: #666; margin-bottom: 15px; }
.stylistDetailTitle::before { content: ""; width: 3px; height: 20px; background: #aaa; display: inline-flex; margin-right: 5px; }
.stylistDetailContent { font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 0.5px; padding-left: 10px; color: #777; line-height: 23px; }
.stylistDetailContent p { margin-bottom: 5px; }
.stylistDetailExperienceContainer { margin-top: 112px; }
.hairstyleDetailBox, .stylistDetailHairstyleBox { overflow: hidden; position: relative; padding-bottom: 133%; }
.hairstyleDetailBox img, .stylistDetailHairstyleBox img { display: block; overflow: hidden; transition: all 0.6s;  position: absolute; width: 100%; height: 100%; object-fit: cover; }
.hairstyleDetailBox:hover img, .stylistDetailHairstyleBox:hover img { transform: scale(1.14); }


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> hairstyle_detail.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.hairstyleDetailBox { overflow: hidden; position: relative; padding-bottom: 133%;  }
.hairstyleDetailBox img { display: block; overflow: hidden; transition: all 0.6s; position: absolute; width: 100%; height: 100%; object-fit: cover; }
.hairstyleDetailBox:hover img { transform: scale(1.14); }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> news.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.newsBoxOutside { border-top: solid 2px #bbb; border-bottom: solid 2px #bbb; background: rgba(255, 255, 255, 0.2); }
.newsBox { margin: 5px 2px; border-top: solid 1px #999; border-bottom: solid 1px #999; padding: 12px 10px; position: relative; }
.newsDate { font: normal 15px 'Century Gothic', '微軟正黑體'; color: #777; text-align: center; margin-bottom: 10px; }
.newsDate span { font-size: 25px; display: inline-block; position: relative; margin-bottom: 5px; }
.newsDate span::after { content: ""; width: 100%; height: 1px; background: #ccc; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); }
.newsTitle { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: bold 20px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; line-height: 35px; margin-bottom: 5px; }
.newsTitle a { width: 100%; color: #555; transition: all 0.6s; }
.newsContent { font: normal 15px 'Century Gothic', '微軟正黑體'; line-height: 25px; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /*-webkit-box-orient: vertical;*/ ; min-height: 50px; max-height: 50px;}
.newsContent a { color: #777; transition: all 0.6s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.newsTitle a:hover, .newsContent a:hover { opacity: 0.7; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> news_detail.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.newsDetailTitle { font: normal 25px 'Century Gothic', '微軟正黑體'; line-height: 30px; color: #777; }
.newsDetailContent { font: normal 15px 'Century Gothic', '微軟正黑體'; line-height: 25px; color: #555 }
.newsDetailContent img { max-width: 100%; height: auto; }
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> member_nav.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.memberCenterNavContainer .col a { display: block; }
.memberNavNum { position: absolute; right: -8px; top: -8px; width: 20px; height: 20px; background: #d41010; border-radius: 50%; font: bold 13px 'Century Gothic', '微軟正黑體'; text-align: center; line-height: 20px; z-index: 10; color: #fff; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> member_information.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.memberVipCardContainer { position: relative; }
.memberVipCard { border-radius: 10px; box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.3); }
.memberVipCard img { width: 100%; border-radius: 15px; }
.memberVipCardName { position: absolute; right: 10px; bottom: 60px; font: bold 19px 'Century Gothic', '微軟正黑體'; letter-spacing: 5px; line-height: 16px; }
.memberVipCardNum { position: absolute; top: 20px; left: 15px; font: 600 20px 'Saira Semi Condensed', '微軟正黑體'; line-height: 16px; color: #888; text-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.2); }
.memberVipCardDate { padding: 4px 5px 4px 8px; position: absolute; right: 0px; bottom: 28px; background: rgba(0, 0, 0, 0.5); font: normal 15px 'Century Gothic', '微軟正黑體'; letter-spacing: 1.5px; color: #fff; line-height: 16px; }
a.memberInformationModalBtn { font: normal 16px 'Century Gothic', '微軟正黑體'; line-height: 25px; letter-spacing: 0.5px; color: #72657f; }
a.memberInformationModalBtn:hover { opacity: 0.6; }
.memberInformationModal { }
.memberInformationModal .modal-content { background-color: #333; color: #fff; }
.memberInformationModal .modal-header { border-bottom: 1px solid #666; }
.memberInformationModal .modal-title { font: bold 20px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; }
.memberInformationModal .close { font-size: 20px; color: #fff; }
.memberInformationModal .modal-body { }
.memberInformationModal .modal-body h6 { font: bold 17px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; }
.memberInformationModal .modal-body p { font: normal 15px 'Century Gothic', '微軟正黑體'; line-height: 23px; letter-spacing: 1px; padding-left: 15px; margin-bottom: 5px; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> member_ticket.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.memberTicketContentContainer { }
.memberTicketBox { position: relative; }
.memberTicketImgContainer { position: relative; }
.memberTicketDateContainer { background: rgba(147, 20, 20, 0.8); width: 80px; position: absolute; left: 15px; padding: 20px 5px 15px; color: #fff; text-align: center; top: -10px; }
.memberTicketDateContainer::after { content: ""; width: 0; height: 0; position: absolute; top: 0; right: -15px; border-style: solid; border-width: 10px 0 0 15px; border-color: transparent transparent transparent rgba(60, 0, 0, 0.7); }
.memberTicketStatus { font: normal 18px 'Century Gothic', '微軟正黑體'; letter-spacing: 3px; }
.memberTicketDate { font: bold 18px 'Century Gothic', '微軟正黑體'; }
.memberTicketYear { font: normal 13px 'Century Gothic', '微軟正黑體'; }
.memberTicketStop { font: normal 12px 'Century Gothic', '微軟正黑體'; }
.memberTicketDateContainerDecoration { }
.memberTicketDateContainerDecoration::before { content: ""; width: 0; height: 0; position: absolute; bottom: -30px; left: 0; border-style: solid; border-width: 30px 40px 0 0; border-color: rgba(147, 20, 20, 0.8) transparent transparent transparent; }
.memberTicketDateContainerDecoration::after { content: ""; width: 0; height: 0; position: absolute; bottom: -30px; right: 0; border-style: solid; border-width: 0 40px 30px 0; border-color: transparent rgba(147, 20, 20, 0.8) transparent transparent; }
.memberTicketUsedBox .memberTicketDateContainer { background: rgba(20, 80, 150, 0.8); }
.memberTicketUsedBox .memberTicketDateContainer::after { border-color: transparent transparent transparent rgba(0, 20, 80, 0.7); }
.memberTicketUsedBox .memberTicketDateContainerDecoration::before { border-color: rgba(20, 80, 150, 0.8) transparent transparent transparent; }
.memberTicketUsedBox .memberTicketDateContainerDecoration::after { border-color: transparent rgba(20, 80, 150, 0.8) transparent transparent; }
.memberTicketExpiredBox .memberTicketDateContainer { background: rgba(100, 100, 100, 0.8); }
.memberTicketExpiredBox .memberTicketDateContainer::after { border-color: transparent transparent transparent rgba(0, 0, 0, 0.7); }
.memberTicketExpiredBox .memberTicketDateContainerDecoration::before { border-color: rgba(100, 100, 100, 0.8) transparent transparent transparent; }
.memberTicketExpiredBox .memberTicketDateContainerDecoration::after { border-color: transparent rgba(100, 100, 100, 0.8) transparent transparent; }
.memberTicketUsedBox .memberTicketUse, .memberTicketExpiredBox .memberTicketUse { display: none; }
.memberTicketUsedBox .memberTicketBlackBg, .memberTicketExpiredBox .memberTicketBlackBg { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0, 0, 0, 0.35); }
.memberTicketTitle { font: normal 18px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; line-height: 35px; color: #777; text-align: center; margin-top: 5px; }
.memberTicketImg { }
.memberTicketUse { width: 150px; padding: 8px 0 6px 20px; background: rgba(0, 0, 0, 0.6); position: absolute; bottom: 10px; right: -10px; font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 3px; }
.memberTicketUse i { display: inline-block; margin-right: 5px; font-size: 20px; }
.memberTicketUse a { color: #fff; display: block; transition: all 0.6s; }
.memberTicketUse a:hover { transform: translateX(5px); }
.ticketModal { font: normal 16px 'Century Gothic', '微軟正黑體'; }
.ticketModal .close { font-size: 22px; }
.ticketModal h3 { font-weight: bold; }
.ticketModal .modal-body { color: #555; }
.ticketModal h4 { font-size: 18; font-weight: bold; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> member_service.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.memberServiceBox { margin: 5px 2px; border-top: double 3px #999; border-bottom: double 3px #999; padding: 20px 10px; position: relative; }
.memberServiceDate { font: normal 15px 'Century Gothic', '微軟正黑體'; color: #777; text-align: center; }
.memberServiceDate span { font-size: 25px; display: inline-block; position: relative; margin-bottom: 5px; }
.memberServiceDate span::after { content: ""; width: 100%; height: 1px; background: #ccc; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); }
.memberServiceTitle { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: bold 20px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; line-height: 20px; margin-bottom: 10px; }
.memberServiceTitle a { width: 100%; color: #555; transition: all 0.6s; }
.memberServiceContent { font: normal 15px 'Century Gothic', '微軟正黑體'; line-height: 25px; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.memberServiceContent a { color: #777; transition: all 0.6s; }
.memberServiceTitle a:hover, .memberServiceContent a:hover { opacity: 0.7; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> FAQ.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.FAQboxContainer { border-top: double 3px #91ce1a; padding-top: 5px; }
.FAQboxContainer ul>li { border-bottom: dashed 1px #91ce1a; padding: 5px 10px 8px; }
.FAQboxContainer ul>li:last-child { border-bottom: double 3px #91ce1a; }
.FAQbox { }
.FAQquestion { font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; line-height: 35px; color: #eca343; cursor: pointer; }
.FAQquestion:hover { opacity: 0.6; }
.FAQanswer { padding: 0 5px; font: normal 14px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; line-height: 25px; color: #777; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> contact.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.contactMap { width: 100%; height: 450px; }
.contactMap iframe { width: 100%; height: 450px; }
.contactContent { font: normal 15px 'Century Gothic', '微軟正黑體'; line-height: 25px; letter-spacing: 1px; color: #555; max-width: 400px; margin: auto; }
.contactTime, .contactTel, .contactAdd { padding: 5px 0; }
.contactTitle { font-weight: bold; color: #735a8d; letter-spacing: 2px; display: inline-block; width: 80px; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_footer.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.footer { position: absolute; bottom: 0; height: 80px; width: 100%; background: rgba(113, 109, 117, 0.7); }
.footer .row { height: 80px; }
.footerLogo { width: 130px; }
.footerNavContainer { font: normal 15px 'Century Gothic', '微軟正黑體'; line-height: 15px; letter-spacing: 1px; }
.footerNavContainer ul { }
.footerNavContainer ul>li { padding: 0 8px; }
.footerNavContainer ul>li span { font-family: 'Cormorant Infant'; }
.footerNavContainer ul>li::after { content: ""; width: 2px; height: 12px; background: #b7b7b7; display: inline-flex; position: relative; left: 7px; top: 2px; }
.footerNavContainer ul>li:last-child { padding-right: 0; }
.footerNavContainer ul>li:last-child::after { content: ""; display: none; }
.footerNavContainer ul>li a { color: #fff; transition: all 0.3s; }
.footerNavContainer ul>li a:hover { opacity: 0.6; }
.footerCopyright { font: normal 12px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; line-height: 12px; color: #d2d0dd; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_gotop.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> other <<<------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.fontColorPink { color: #ca1f6c; }
.fontColorDeepOrange { color: #e5a300; }
.fontColorHeartRed { color: #f24e4e; }
.fontColorLightRed { color: #ff6f8c; }
.fontColorBlue { color: #216b9c; }
.fontColorLightBlue { color: #379cd3; }
.fontColorGreen { color: #9dc108; }
.fontColorYellow { color: #f9a230; }
.fontColorYellow.col-form-label{color: #f9a230; }
.fontColorWhite{color: #fff}
.fontColor777{color: #777}
.fontColor999{color: #999}
.fontColoraaa{color: #aaa}
.fontColorImportant { color: #8c0024; }
.lineHeight96 { line-height: 96px }
.lineHeight30 { height: 30px; margin: 8px 0; line-height: 30px; }
.lineHeight25 { line-height: 25px; }
.fontEn { font-family: 'Century Gothic'; }
.fontSize20{font-size: 20px;}

/* -------------->>> ie-decide.php ie瀏覽器限制 <<<----------------*/
.modal_browse {    display: none;
position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); }
.wrap { max-width: 800px; margin: 100px auto 0 auto; font-size: 1.2em; text-transform: capitalize; line-height: 1.5; text-align: center; background: #FFF4F4; padding: 50px 30px; }
.wrap .text { text-align: left; }
.wrap .col-6 { margin: 30px 0px; }
.wrap a { display: block; text-transform: capitalize; }
.wrap h2 { font-size: 19px; text-decoration: underline; color: #e25600; margin: 0; }
.wrap h3 { font-size: 10px; color: #aaa; margin: 0; }
.wrap img { margin: auto; }


/*=============================================== loading過場 ================================================*/

.loader,
.loader:before,
.loader:after {
    background: #ffffff;
    -webkit-animation: load1 1s infinite ease-in-out;
    animation: load1 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
}

.loader {
    color: #ffffff;
    text-indent: -9999em;
    margin: 300px auto 88px;
    position: relative;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.loader:before,
.loader:after {
    position: absolute;
    top: 0;
    content: '';
}

.loader:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.loader:after {
    left: 1.5em;
}

@-webkit-keyframes load1 {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

@keyframes load1 {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

.loading-font {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    opacity: .5;
}