[v-cloak] {
    display: none;
}

@font-face {
  font-family: 'DFMingUBold-B5';
  src: url('fonts/DFMingUBold-B5.ttc');
}
/************************* reset *************************/
*, :after, :before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, var,
b, i, a, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font: inherit;
	background: transparent;
	vertical-align: baseline;
	line-height: 1.5em;
	/*font-family: Arial, sans-serif, "微軟正黑體";*/
	/* font-weight: 500; */
	font-size: 16px;
}
html {
	width: 100%;
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	text-rendering: optimizeLegibility;
}
ul, ol {
	margin-left: 1.5em;
	white-space: normal;
	word-break : break-all;
	word-wrap: break-word;
}
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
  display: block;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
a {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
}
img, object, embed, video {
	max-width: 100%;
	height: auto;
}
abbr[title], dfn[title] {
	border-bottom: 1px dotted #4b4b4b;
	cursor: help;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
hr {
	float: none;
	height: 1px;
	margin: 1em 0;
	padding: 0;
	background: #ccc;
	border: 0;
	display: block;
}
button, input, select, textarea {
	-webkit-appearance: none;
	width: 100%;
	margin: 3px;
	border: 0;
	border-radius: 0;
	outline: none;
	padding: 12px;
	vertical-align: baseline;
	overflow: visible;
	font-family: Arial, sans-serif, "微軟正黑體";
	font-size: 18px;
	font-weight: normal;
	background: #fff;
	color: #7e5e82;
}
a {
	cursor: pointer;
	border-radius: 10px;
}

button {
	cursor: pointer;
	border-radius: 10px;
  white-space:nowrap;
}


input, select, textarea {
	border: 1px solid #cbd2de;
	border-radius: 10px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active
{
-webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,1) inset;
}
select, .select {
	background: url(../images/i_arrow_d.png) #fff center right 5px no-repeat;
	background-size: 20px 20px;
}
textarea {
	overflow: auto;
	vertical-align: text-top;
}
input[type="checkbox"], input[type="radio"] {
	display: none;
}
input[type="checkbox"] + label i, input[type="radio"] + label i {
	margin-top: 7px;
  display: inline-block;
  width: 22px;
  height: 22px;
	border: 1px solid #cbd2de;
  margin-right: .5em;
	background: url(../images/check_radio_sheet.png) 0 0 no-repeat;
	background-size: 80px !important;
	cursor: pointer;
}
input[type="radio"] + label span {
	vertical-align: text-bottom;
}
input[type="radio"] + label i {
	border-radius: 10px;
}
input[type="checkbox"]:checked + label i {
	background: url(../images/check_radio_sheet.png) -40px 0 no-repeat;
}
input[type="radio"] + label i {
	background: url(../images/check_radio_sheet.png) -80px 0 no-repeat;
}
input[type="radio"]:checked + label i {
	background: url(../images/check_radio_sheet.png) -60px 0 no-repeat;
}
/************************* base *************************/



              #chatHistorySidebar .chat-history-list li.active {
                    background: #eaeaea;
                }

                .chat-icons-left {
                    display: flex;
                    gap: 0.5rem;
                    align-items: center;
                }

                .chat-teacher-name {
                    flex: 1;
                    text-align: center;
                    font-weight: 600;
                }

                .chat-history-header {
                    padding-left: 18px;
                    padding-right: 14px;
                    padding-top: 10px;
                    padding-bottom: 10px;
                    font-size: 15px;
                    font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
                    color: #a09b9b;
                    font-weight: 600;
                    border-bottom: 1px solid #f2f2f2;

                }

                .chat-history-list {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                }

                #chatHistorySidebar {
                    position: absolute !important;
                    top: 56px !important;
                    left: 0 !important;
                    width: 250px !important;
                    height: calc(100% - 56px) !important;
                    background: #fff !important;
                    border-radius: 0 !important;
                    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
                    z-index: 1000 !important;
                    padding: 1rem 0.75rem !important;
                    font-size: 14px !important;
                    display: none;
                    border: none !important;
                    overflow-y: auto;
                }


                #chatHistorySidebar .chat-history-list li {
                    background: none;
                    padding-left: 18px;
                    padding-right: 14px;
                    padding-top: 10px;
                    padding-bottom: 10px;
                    border-radius: 0;
                    line-height: 1.6;
                    font-size: 15px;
                    font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
                    transition: background 0.2s;
                    cursor: pointer;
                    display: block;
                    color: #555353;
                }

                #chatHistorySidebar .chat-history-list li:hover {
                    background: #eaeaea;
                }




                .new-chat-input-container {
                    padding: 15px 20px;
                    border-bottom: 2px solid #eee;
                    background-color: #f8f9fa;
                }

                .new-chat-input {
                    width: 100%;
                    padding: 10px;
                    border: 1px solid #ddd;
                    border-radius: 8px;
                    outline: none;
                    font-size: 14px;
                }

                .new-chat-button {
                    width: 100%;
                    padding: 8px;
                    margin-top: 8px;
                    background-color: #667eea;
                    color: white;
                    border: none;
                    border-radius: 6px;
                    cursor: pointer;
                    font-size: 14px;
                    transition: background-color 0.3s;
                }

                .new-chat-button:hover {
                    background-color: #5a6fd8;
                }




                .new-chat-input-container.none {
                    display: none;
                }

                .new-chat-icon-container {
                    padding: 15px 20px;
                    border-bottom: 2px solid #eee;
                    background-color: #f8f9fa;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 6px;
                    cursor: pointer;
                }




                @media (max-width: 1200px) {


                    #chatHistorySidebar {
                        top: 67.2px !important;
                        height: calc(100% - 67.2px) !important;
                    }


                }


                @media screen and (max-width: 1200px) and (orientation: portrait) {

                    #chatHistorySidebar {
                        top: 67.2px !important;
                        height: calc(100% - 67.2px) !important;
                    }




                }



body {
	position: relative;
	background: #fff;
	/* color: #404d63; */
	color: #9B7496
}
a {
	text-decoration: none;
	color: #4b4b4b;
}
a:hover, button:hover {
	opacity: .9;
}
.clearfix:after {
	content:'.';
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}
.pc_hide, .ad_inner.pc_hide {
	display: none;
}

/************************* pay service *************************/




/************************* pay service *************************/

/************************* header *************************/
/*by self*/
	.avatar-circle {
	border-radius: 50%;
	overflow: hidden;
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	
	.avatar-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

    header {
      font-family:"Noto Sans TC", sans-serif !important;
      
       display: flex; 
	  /*display: none;*/
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
      background-color: #fff;
      /* border-bottom: 0.5px solid #ddd; */
      position: fixed;
      z-index: 100;
      height: 70px;
    }
    
    .logo img {
      height: 40px;
    }
    
    /* 頂部選單 */
    .nav {
      display: flex;
      gap: 2rem;
      font-weight: 600;
      color: #9B7496;
    }
    
    /* 點數與會員icon */
    .icons {
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
    }
    
    /* 點數顯示為橘色吸引人儲值 */
    .points-number {
      color: #9B7496;
      font-weight: 500;
      display: flex;
      align-items: center;
    }
    
    .material-icons {
      font-size: 24px;
      cursor: pointer;
      color: #9B7496;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 會員下拉選單 */
    .member-menu {
      display: none;
      flex-direction: column;
      background-color: white;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      padding: 0.5rem;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 160px;
      z-index: 110;
      border-radius: 8px;
    }
    
    .member-menu.active {
      display: flex;
    }
    
    .member-menu a {
      color: #9B7496;
      text-decoration: none;
      padding: 0.75rem 1rem;
      font-weight: 500;
      border-radius: 4px;
    }
    
    .member-menu a:hover {
      background-color: #f5f5f5;
    }
    

        @media (max-width: 575px) {
      /* Header顯示調整 */
      .nav {
        display: none; /* 隱藏三個課程選單 */
      }
    }
    #memberAvatar {
        background-color: #9B7496 !important;
        width: 26px !important;
        height: 26px !important;
        border-radius: 50% !important;
    }

    #memberAvatar .material-icons {
        color: #ffffff !important;
        font-size: 16px !important;
    }




/*ori code*/
header {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 99;
}
/* #wrapper {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.header_inner {
	width: 100%;
	max-width: 1280px;
	height: 70px;
	margin: 0 auto;
	padding: 0 55px;
	display: flex;
	justify-content: space-between;
}
.logo {
	width: 110px;
	margin: 15px 0 0;
}
nav {
	position: relative;
	width: calc(100% - 140px);
	display: flex;
}
nav ul {
	height: 70px;
	margin: 0;
	list-style: none;
	display: flex;
	align-items: center;
}
nav a {
	padding: 10px 25px;
	color: #bfbfbf;
	font-size: 16px;
	display: inline-block;
}
nav a.active {
	color: #7e5e82;
}
.menu_bar {
	width: calc(100% - 140px);
	justify-content: center;
}
.menu_bar a {
	font-size: 18px;
	font-family: "DFMingUBold-B5";
}
.p_active {
	color: #7e5e82;
}
.nav_bar {
	width: 140px;
	justify-content: flex-end;
}
.nav_bar li {
	height: 30px;
	margin: 5px;
}
.nav_bar button, .cale_inner aside .cale_search .pupup_bar button {
	width: 30px;
	height: 30px;
	display: inline-block;
	background: url(../images/i_nav.png) no-repeat;
	background-size: 30px;
}
#i_logout {
	background-position: 0 0;
}
#i_login {
	background-position: 0 -30px;
}
#i_servlist {
	background-position: 0 -60px;
}
#i_close {
	background-position: 0 -90px;
}
.menu_serv {
	position: absolute;
	top: 50px;
	right: -25px;
	width: 310px;
	height: 165px;
	padding:  40px 30px 0;
	background: url(../images/bg_menu.png) no-repeat;
}
.menu {
	width: 100%;
	list-style: none;
	margin: 0;
	display: inline-block;
}
.menu li {
	width: 100%;
	margin-bottom: 5px;
}
.menu li a {
	width: 100%;
	padding: 10px 25px;
	color: #7e5e82;
	font-weight: bold;
	border-radius: 10px;
	display: inline-block;
}
.menu li a:hover, .menu li a.active, .aside_menu .menu li a.active:hover {
	background: #7e5e82;
	color: #fff;
}
.aside_menu .menu li a:hover {
	background: none;
	color: #7e5e82;
} */
/************************* main *************************/
main {
	position: relative;
	width: 100%;
	max-width: 1280px;
	height: 100%;
	margin: 0 auto;
	padding: 70px 0 0;
}
.main_inner {
    display: flex; /* 使用 flexbox 來讓內部元素並排 */
    flex-wrap: wrap; /* 如果空間不夠，允許換行 */
    justify-content: space-between; /* 元素之間的間距均勻 */
}
#ad {
	width: 100%;
	margin: 0 auto 40px;
	overflow: hidden;
}
.ad_inner {
	position: relative;
	width: 100%;
	margin: auto;
	display: inline-block;
}
.ad_inner li {
	float: left;
	width: 100%;
	overflow: hidden;
}
.ad_inner li img {
	width: 100%;
	height: auto;
}
.slick-prev, .slick-next {
	position: absolute;
	width: 50px;
	height: 50px;
	top: calc(50% - 25px);
	background: url(../images/i_ad.png) no-repeat top;
	z-index: 99;
}
.slick-next {
	right: 0;
	background: url(../images/i_ad.png) no-repeat bottom;
}
.slick-arrow {
	background-size: 50px;
}
.box {
	width: 30%;
	margin-bottom: 40px;
	/* display: flex; */
	justify-content: space-between;
}
.box article {
	width: 100%;
	padding: 50px;
	background: #f7f8f9;
}
.box_img {
	width: 50%;
	text-align: right;
	background: #f7f8f9;
}
.box_img img {
	height: 100%;
	width: auto;
	object-fit: cover;
	overflow: hidden;
}
h3 {
	font-size: 20px;
	font-weight: bold;
}
.box article > * {
	margin-bottom: 30px;
}
.box article > *:last-child {
	margin-bottom: 0;
}
.box_inner {
	width: 100%;
	margin: 0;
	list-style: none;
	display: inline-grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 20px;
	/*grid-row-gap: 20px;*/
}
.box_inner li:nth-child(1) {
	/* grid-column: 2 / 3; */
	margin-bottom: 20px;
}
.box_inner li:nth-child(1).order_text {
	grid-column: 1 / 3;
	text-align: center;
	color: #8894a7;
}
.btn_1 {
	background: #e7e1e8;
	color: #7e5e82;
	font-weight: bold;
	border: 2px solid #7e5e82; /* 框線的寬度為 2px，顏色為 #7e5e82 */

}
.btn_2 {
	background: #e97b91;
	color: #fff;
	font-weight: bold;
}
.btn_3 {
	background: #009fd5;
	color: #fff;
	font-weight: bold;
}
.btn_4 {
	background: #7e5e82;
	color: #fff;
	font-weight: bold;
}
.btn_5 {
	color: #7e5e82;
	font-weight: bold;
	border: 1px solid #7e5e82;
}
.btn_6 {
	color: #009fd5;
	font-weight: bold;
	border: 1px solid #009fd5;
}
.btn_7 {
	background: #007faa;
	color: #fff;
}
.btn_4:disabled {
	background: #ebeff3;
	color: #8393a7;
	font-weight: bold;
}
input:disabled {
	background: #ebeff3;
	-webkit-text-fill-color: #8393a7;
}
.page_inner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px;
}
.page_inner ul {
	margin: 0 0 30px;
}
h2 {
	font-family: "DFMingUBold-B5";
	font-size: 18px;
	color: #7e5e82;
}
.title {
	width: 100%;
	margin-bottom: 20px;
	border-bottom: 1px solid #7e5e82;
	line-height: 2.5em;
}
.serv_inner {
	width: 100%;
	padding: 0 2.5%;
	list-style: none;
	display: flex;
	justify-content: space-between;
}
.serv_inner li {
	width: 47.5%;
	margin-bottom: 20px;
	display: flex;
}
.serv_app {
	width: 100px;
	height: 100px;
/*	background: #dfd7e0;*/
	border-radius: 20px;
}
.serv_text {
	width: calc(100% - 100px);
	padding-left: 20px;
}
#serv .footer_inner {
	width: 100%;
}
#serv .footer_inner li:first-child {
	margin-left: 0;
}
#serv .footer_inner li > * {
	margin-bottom: 10px;
}
.p_login {
	background: url(../images/bg_login.jpg) #111629 no-repeat center center;
	background-size: 200% 100%;
	background-attachment: scroll;
}
.form_inner {
	width: 100%;
	max-width: 380px;
	margin: 100px auto 50px;
	text-align: center;
	color: #8793a6;
}
.form_inner h1 img {
	width: 235px;
	height: auto;
}
.form_inner h3 {
	margin-bottom: 30px;
	color: #fff;
}
.form_inner form {
	position: relative;
	text-align: left;
}
.form_inner form > * {
	margin-bottom: 20px;
}
.form_inner input {
	color: #000;
	text-align: center;
}
.form_inner button {
	width: 60%;
	max-width: 240px;
	margin: 20px 20%;
}
.form_inner a {
	color: #3880cf;
}
.check_login {
	background: #f7e1e1;
	border: 1px solid #d16764;
}
.form_inner #btn_send, .page_inner #btn_send {
	position: absolute;
	top: 130px;
	right: 8px;
	width: 110px;
	height: 30px;
	margin: 0;
	padding: 5px;
	font-size: 13px;
	border-radius: 5px;
}
/*.form_inner #ur_vcode {
	padding-right: 120px;
}*/
#order {
	width: 100%;
	max-width: 1280px;
	height: 70px;
	margin: 0 auto;
	padding: 15px 55px;
	background: #f8f9fa;
}
.order_inner {
	width: 100%;
	margin: 0;
	list-style: none;
	display: flex;
	justify-content: space-between;
}
.order_inner li {
	width: 60%;
	display: flex;
}
.order_inner li:last-child {
	width: 40%;
	/*max-width: 160px;*/
}
.order_inner .serv_app {
	width: 40px;
	height: 40px;
}
.order_inner .serv_text {
	width: auto;
}
.order_inner h2 {
	line-height: 40px;
	color: #4d4d4d;
}
.order_inner button {
	width: 100%;
	height: 40px;
	padding: 8px;
}
#banner {
	margin: 70px 0 40px;
}
#service article {
	width: 100%;
	text-align: center;
}
#service .box article.box_white {
	padding: 0 20px;
	background: #fff;
	text-align: left;
}
.box_white button {
	width: 240px;
	margin: 0 calc(50% - 120px);
}
#service h3, #service p {
	max-width: 780px;
	margin: 0 auto 30px;
}
#service h3 {
	text-align: center;
}
#service .box_inner {
	width: 240px;
	margin: 0 auto;
	display: inline-block;
}
#pay {
	max-width: 100%;
	background: #f7f8f9;
}
#pay h3 {
	margin: 20px 0;
	text-align: center;
}
#pay article {
	width: 100%;
	max-width: 600px;
	margin: 0 auto 20px;
}
.pay_inner {
	width: 100%;
	margin: 0 auto 20px !important;
	list-style: none;
	background: #fff;
	border: 1px solid #d9dee7;
}
.pay_inner li {
	width: 100%;
	padding: 15px;
	display: flex;
	flex-wrap: wrap;
}
.pay_inner .spec {
	border-bottom: 1px solid #d9dee7;
}
.pay_inner li > * > * {
	position: relative;
	margin-bottom: 10px;
}
.pay_inner span {
	float: right;
	color: #4c4c4c;
}
.pay_inner li p {
	width: 100%;
}
.pay_inner li p, .pay_inner li p span, .pay_inner .p_left {
	font-size: 13px;
	color: #8793a6;
}
.pay_inner li p.spec {
	margin-bottom: 15px;
}
.pay_inner li h5, .pay_inner li h6 {
	width: 100%;
}
.pay_inner li h6 {
	color: #000;
	font-size: 13px;
	font-weight: bold;
}
.pay_inner .p_left {
	float: none;
	margin: 0 10px;
}
.pay_inner select, .pay_inner input {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	border-radius: 5px;
}
.pay_inner form {
	max-width: 400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 20px;
}
.pay_inner li > form > *:first-child, .pay_inner li > form > *:last-child {
	grid-column: 1 / 4;
}
.pay_inner li #btn_pay {
	width: 240px;
	margin-left: calc(50% - 120px);
}
.i_card {
	position: absolute;
	top: 35px;
	right: 10px;
	width: 50px;
	height: 20px;
}
.mb_inner {
	width: 100%;
	height: 100%;
	display: flex;
}
.mb_inner aside {
	position: fixed;
	width: 305px;
	height: 100%;
	padding: 20px;
	background: #f7f8f9;
}
.mb_inner aside h3 {
	padding: 20px;
}
.mb_inner article {
	width: 100%;
	max-width: calc(100% - 305px);
  margin-left: 305px;
	padding: 30px;
	background: #fff;
}
.aside_title {
	display: none;
}
.member_inner {
	width: 100%;
	max-width: 380px;
  margin: 30px auto;
}
.member_inner label {
	color: #8793a6;
	font-weight: bold;
}
.member_inner select, .member_inner input, .member_inner label span {
	color: #000;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30px;
}
.member_inner ul {
	width: 100%;
	margin: 0 0 20px;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.member_inner button {
	width: 240px;
	margin: 15px calc(50% - 120px) 50px;
}
.manage_inner {
	width: 100%;
	margin: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
#ur_birth {
	cursor: pointer;
}
.ui-datepicker-title select {
	padding: 2px;
	border-radius: 2px;
}
.manage_inner li:nth-child(3n+1) {
	width: 100px;
}
.manage_inner li:nth-child(3n+2) {
	width: calc(100% - 280px);
	padding: 0 20px;
}
.manage_inner li:nth-child(3n) {
	width: 180px;
}
.manage_inner > * {
	margin-bottom: 30px;
}
.manage_inner > * > * {
	margin-bottom: 10px;
}
.manage_inner button, .manage_inner select {
	width: 100%;
	max-width: 180px;
}
.manage_inner2 {
	width: 100%;
	margin: 0 0 20px;
	padding: 10px 0;
	list-style: none;
	background: #f7f8f9;
	display: inline-flex;
	flex-wrap: wrap;
}
.manage_inner2 li {
	padding: 5px 20px;
	width: 50%;
}
.manage_inner2 li:nth-child(2n) {
	text-align: right;
}
.manage_inner2 p {
	font-weight: bold;
}
.manage_inner2 li:nth-child(3), .manage_inner2 li:nth-child(4) {
	padding: 5px 20px 20px;
	border-bottom: 2px solid #ddddde;
}
#register.page_inner, #register2.page_inner, #register3.page_inner, #register4.page_inner {
	text-align: center;
}
h6 {
	padding: 0;
	font-size: 18px;
	text-align: left;
  color: #7e5e82;
	font-weight: bold;
}
.page_inner .register_inner {
	width: auto;
	margin: 0 auto 15px;
	display: flex;
	justify-content: center;
	list-style: none;
}
.register_inner li {
	width: 25px;
	height: 25px;
	margin: 15px;
	line-height: 25px;
	font-weight: bold;
	color: #fff;
	background: #cbd3de;
	border-radius: 15px;
}
.register_inner li.active {
	background: #7e5e82;
}
.register_inner li.active2 {
	background: #55ba66;
}
.page_inner .member_inner {
	position: relative;
	text-align: left;
}
#register2.page_inner #btn_send {
	top: 220px;
}
.page_inner p.p_spec {
	padding: 20px 0 0;
	font-size: 20px;
	font-weight: bold;
}
.cale_inner {
	width: 100%;
	max-width: 1005px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.cale_inner aside {
	width: 355px;
	padding: 0 0 10px;
}
.cale_inner aside button {
	width: auto;
	margin: 5px auto 0;
	padding: 10px 15px;
	font-size: 14px;
	font-weight: bold;
}
.cale_inner aside ul, .cale_inner article ul {
	width: 100%;
	margin: 0;
	list-style: none;
}
.cale_title {
	height: 50px;
	background: #009fd5;
	display: flex;
}
.cale_title li {
	position: relative;
	margin-right: 10px;
}
.cale_title li span {
	position: absolute;
	color: #fff;
	font-size: 13px;
	z-index: 1;
}
.cale_title li:last-child {
	width: calc(100% - 210px);
	text-align: right;
}
.cale_title #btn_select {
	display: none;
}
article .cale_btn {
	display: none;
}
#heavenly {
	top: 7px;
	left: 77px;
}
#earthly {
	bottom: 7px;
	left: 77px;
}
.p_month {
	bottom: 7px;
	left: 45px;
}
.cale_title select {
	position: inherit;
	top: 0;
	background: url(../images/i_arrow_white.png) center right no-repeat;
	background-size: 13px;
	color: #fff;
	font-size: 28px;
	border: none;
	z-index: 2;
}
.cale_title option {
	background: #009fd5;
	font-size: 16px;
}
.cale_title select {
	padding: 10px;
}
.cale_title select#cale_year {
	width: 120px;
}
.cale_title select#cale_month {
	width: 90px;
}
.cale_box {
	padding: 10px;
	border-bottom: 1px solid #f2f2f2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.cale_box > li {
	width: 35px;
	color: #009fd5;
	line-height: 1em;
}
.cale_box > li:first-child {
	width: 50px;
}
.cale_box > li:nth-child(2) {
	width: calc(100% - 190px);
}
.cale_box > li.cale_factor {
	font-family: "DFMingUBold-B5";
	color: #c0e7f5;
	text-align: center;
}
.cale_box > li:last-child {
	width: 100%;
}
.cale_box > li p {
	padding: 5px 0;
	color: #4a596f;
	font-weight: bold;
	line-height: 1em;
	letter-spacing: 1px;
}
.cale_box > li.p_active {
	color: #009fd5;
	text-align: center;
}
.cale_box > li span {
	height: 1em;
	color: #fff;
}
.cale_box > li.p_active span {
	color: #81d0ea;
}
.cale_box h2 {
	font-size: 22px;
	color: #009fd5;
}
.cale_box .p_interval {
	font-size: 12px;
	font-weight: bold;
}
.cale_box span {
	width: 100%;
	font-size: 12px;
	display: inline-block;
}
.cale_date, .cale_search {
	padding: 5px 0;
	border-bottom: 1px solid #f2f2f2;
}
.cale_date li {
	padding: 5px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	text-align: center;
}
.cale_date li p, .cale_date li a {
	font-size: 12px;
	color: #3c4c65;
}
.cale_date li a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
}
.cale_date li a.select_day, .cale_date li a.select_day:hover {
	background: #009fd6 !important;
	color: #fff !important;
}
.cale_date li a.last {
	color: #aebaca;
}
.cale_date li a:hover {
	background: #e5eaf0;
}
.cale_date li.select_week {
	background: #f7f8fa !important;
	border-radius: 20px;
}
.cale_date li p:nth-child(1), .cale_date li a:nth-child(1) {
	color: #f7698f;
}
.cale_date li p:nth-child(7), .cale_date li a:nth-child(7) {
	color: #d64c6f;
}
.btn_8 {
	color: #009fd5;
	background: #f8f8fa;
	font-weight: bold;
}
.cale_search li {
	padding: 5px;
	font-size: 12px;
	display: flex;
	flex-wrap: wrap;
}
.cale_search li.pupup_bar {
	display: none;
}
.cale_search li a {
	width: 40px;
	height: 40px;
	margin: 0 auto;
	line-height: 40px;
	font-size: 20px;
	font-family: "DFMingUBold-B5";
	text-align: center;
	color: #009fd5;
	background: #f7f8f9;
	border-radius: 20px;
}
.cale_search li a.select_way {
	color: #fff;
	background: #009fd5;
}
#cale_way {
	width: 100px;
	height: 40px;
	margin: 0 auto;
	padding: 0 15px;
	font-size: 14px;
	color: #009fd5;
	font-weight: bold;
	background: url(../images/i_arrow_blue.png) #f7f8f9 center right 10px no-repeat;
	background-size: 13px;
	border-radius: 20px;
	border: none;
}
.cale_search p,.cale_search span {
	width: 50%;
	font-size: 14px;
	font-weight: bold;
}
.cale_search span {
	color: #009fd5;
}
.cale_inner aside .cale_search button {
	width: 48%;
	margin-right: 2%;
	padding: 7px;
	font-size: 14px;
}
.cale_inner aside .cale_search .pupup_bar button {
}
.cale_inner article {
	width: calc(100% - 355px);
	padding: 0 0 0 10px;
}
.cale_search_box {
	padding: 1px 0 10px;
}
.cale_search_bar {
	width: 100%;
	padding: 1px 10px;
	font-size: 12px;
	color: #7e5e82;
	font-weight: bold;
	border: 2px solid #7e5e82;
}
.cale_search_box > li {
	padding: 0 0 0 60px;
}
.cale_search_box > li.cale_search_title {
	padding: 1px 10px;
	font-size: 12px;
	background: url(../images/i_arrow_d_space.png) #7e5e82 center right 5px no-repeat;
	background-size: 20px !important;
	color: #fff;
	cursor: pointer;
}
.cale_search_box > li.cale_toggle {
	background: url(../images/i_arrow_t_space.png) #7e5e82 center right 5px no-repeat;
}
article .cale_box > li.cale_factor {
	color: #dfd7e0;
}
article .cale_box h2, article .cale_box > li, article .cale_box > li.p_active, article .cale_box > li.p_active span {
	color: #7e5e82;
}
.cale_search_box .box_2 > li:first-child {
	width: 30px;
}
.cale_search_box .box_2 > li:nth-child(2) {
  width: calc(100% - 170px);
}
/************************* footer *************************/
footer {
	width: 100%;
	max-width: 1280px;
	padding: 0 55px;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}
footer > * {
	margin: 30px 0;
}
footer > * > *, footer > * > * > * {
	margin-bottom: 10px;
}
.footer_inner {
	/* width: calc(100% - 50px); */
	list-style: none;
	display: flex;
	justify-content: space-between;
}
.footer_inner li {
	width: 250px;
}
.footer_inner li:first-child {
	width: 150px;
	margin-left: 50px;
}
.footer_inner h3 {
	margin: 10px 0;
}
.footer_inner p, .footer_inner a {
	width: 100%;
	font-size: 14px;
	/* color: #5b4493; */
	color: #9B7496;
	display: inline-block;
}
.copyright {
	width: 30%;
}
.copyright p {
	font-size: 12px;
	color: #8f9bac;
}

/************************* register *************************/
  /* 新增樣式：調整勾選框與文字的排版 */
    .agreement-checkbox {
        display: ruby-text;
        align-items: flex-start;
        justify-content: center; /* 視情況可改為 flex-start 靠左 */
        margin: 15px 0;
        font-size: 14px;
        color: #666;
        line-height: 1.5;
        text-align: left;
    }
    .agreement-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-right: 8px;
        margin-top: 2px;
        cursor: pointer;
    }
    .agreement-checkbox label {
        cursor: pointer;
       /* font-weight: normal; /*覆蓋可能的預設粗體*/
    }
	.policy-link {
        color: #8e44ad;
        text-decoration: none; /* [修改] 預設不要有底線 */
        font-weight: bold;
        cursor: pointer;
        margin: 0 2px;
        transition: color 0.2s; /* [選用] 增加一點顏色過渡動畫 */
    }

    .policy-link:hover {
        color: #6c3483;
        text-decoration: underline; /* [修改] 滑鼠移上去時才出現底線 */
    }
/************************* register *************************/
/************************* mask *************************/
.mask_2 {
  position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../images/mask.png) repeat;
	white-space: nowrap;
  overflow: hidden;
	display: none;
	z-index: 100;
}
.mask {
  position: fixed;
 width: 100%;
 height: 100%;
 top: 70px;
 left: 0;
 background: url(../images/mask.png) repeat;
 white-space: nowrap;
    overflow: hidden;
 display: none;
 z-index: 100;
}
.popup {
	position: fixed;
	width: 300px;
	top: 20%;
	left: calc(50% - 150px);
	padding: 20px;
	background: #fff;
	border-radius: 10px;
	text-align: center;
	z-index: 101;

}
h5 {
	color: #000;
	font-size: 18px;
	font-weight: bold;
	text-align: left;
}
.popup_text {
	width: 100%;
	padding: 20px 0 30px;
	text-align: left;
	white-space: normal;
	word-break: break-all;
	align-items: center;
  justify-content: center;
}
.popup_text p {
	width: 100%;
	font-size: 13px;
}
.popup button {
	width: 140px;
	height: 30px;
	padding: 5px;
	font-size: 13px;
	border-radius: 5px;
}
.mask_2 {
	display: inline-block;
}
.popup_2 {
	position: relative;
	top: 10%;
	bottom: 10%;
	height: 600px;
	left: calc(50% - 400px);
	min-width: 800px;
}
.popup_2 h5 {
	text-align: center;
}
.popup_2 .popup_text {
	height: 470px;
	margin: 10px 0 20px;
	padding: 0 10px;
	overflow: auto;
}
.popup_2 .popup_text p {
	margin-bottom: 10px;
}
h7, .mask_2 .popup_2 h5 {
	color: #775e7e;
}

::placeholder { /* CSS 3 標準 */
  color: tomato;
  ont-size: 12px;
}

::-webkit-input-placeholder { /* Chrome, Safari */
  color: tomato;
  ont-size: 12px;
}

:-ms-input-placeholder { /* IE 10+ */
  color: tomato;
  ont-size: 12px;
}

::-moz-placeholder { /* Firefox 19+ */
  color: tomato;
  ont-size: 12px;
  opacity: 1;
}

/* add by Jeff	 */
.cale_btn_2 {
	margin: auto;
	display: flex;
}

article .cale_btn_2 {
	width: 100%;
	padding: 10px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	text-align: center;
}
article .cale_btn_2 button {
	width: auto;
	padding: 10px 15px;
	font-size: 14px;
	font-weight: bold;
}

#cale_way {
	width: 100px;
	height: 40px;
	margin: 0 auto;
	padding: 0 15px;
	font-size: 14px;
	color: #009fd5;
	font-weight: bold;
	background: url(../images/i_arrow_blue.png) #f7f8f9 center right 10px no-repeat;
	background-size: 13px;
	border-radius: 20px;
	border: none;
}
.set_time_way {

	width: 100%;
	padding: 5px;
	display: flex;
}
.set_history_way{

	width: 100%;
	padding: 5px;

}

.time_way, #time_way_years, #time_way_months, #time_way_days, #time_way_hours, #time_way_minutes, #time_reset, #history_submit, #time_submit,  #delete_history  {
	width: 98px;
	height: 40px;
	margin: 10px auto;
	padding: 0 15px;
	font-size: 1em;
	color: #009fd5;
	font-weight: bold;
	background: url(../images/i_arrow_blue.png) #f7f8f9 center right 10px no-repeat;
	background-size: 13px;
	border-radius: 10px;
	border: 1px solid #009fd5;
}

#time_way_intercalate, #time_way_gender{
	width: 100%;
}
#history_time_sort {
	width: 100%;
}
#history_list {
	width: 100%;
}


#time_submit {
	width: 48%;
	background: #009fd5;
	color: #fff;
	font-weight: bold;

}

#history_submit {
	width: 48%;
	background: #009fd5;
	color: #fff;
	font-weight: bold;

}

#delete_history {
	width: 48%;
	font-size: 1em;
	background: #fff;
	color: #F36C6F;
	font-weight: bold;
	border: 1px solid #F36C6F;
}
#note_submit {

	background: #009fd5;
	color: #fff;
	font-weight: bold;

}

.note_box {
	margin: 20px auto;
	padding: 0 5px;
	width: 90%;
}
.note_btn_send {
	display: inherit;
	width: 160px;
	height: 40px;
	margin: 10px auto;
	padding: 0 15px;
	text-align: center;
	font-size: 1em;
	color: #009fd5;
	font-weight: bold;
	background-size: 13px;
	border-radius: 10px;
	border: 1px solid #009fd5;
}


.cale_search #time_reset {
	position: relative;
	margin-bottom: 20px;
	padding: 7px;
	font-size: 1em;
}

.cale_inner aside .cale_search .pupup_bar button {
}
.cale_inner article {
	width: calc(100% - 355px);
	padding: 0 0 0 10px;
}
.cale_search_box {
	padding: 0px 0 10px;
}
.cale_search_bar {
	width: 100%;
	padding: 1px 10px;
	font-size: 12px;
	color: #7e5e82;
	font-weight: bold;
	border: 2px solid #7e5e82;
}
.cale_search_box > li {
	padding: 0 0 0 60px;
}
.cale_search_box > li.cale_search_title {
	padding: 1px 10px;
	font-size: 12px;
	background: url(../images/i_arrow_d_space.png) #7e5e82 center right 5px no-repeat;
	background-size: 20px !important;
	color: #fff;
	cursor: pointer;
}
.cale_search_box > li.cale_toggle {
	background: url(../images/i_arrow_t_space.png) #7e5e82 center right 5px no-repeat;
}
article .cale_box > li.cale_factor {
	color: #dfd7e0;
}
article .cale_box h2, article .cale_box > li, article .cale_box > li.p_active, article .cale_box > li.p_active span {
	color: #7e5e82;
}
.cale_search_box .box_2 > li:first-child {
	width: 30px;
}
.cale_search_box .box_2 > li:nth-child(2) {
  width: calc(100% - 170px);
}