/* ===================================== 共用樣式 ===================================== */
body { background-color: #f6f6f6; }
/* 內頁標題 */
.areaTIT { color:#72b32b; font-size:1.875rem; padding:20px 0px; font-family: "Arial","微軟正黑體","Microsoft JhengHei", serif; }
/* 內頁外框 */
.areaCONT { margin-top: 20px; padding:30px; background-color:#fff; }

/* 聯絡我們 確認訂單 訂單明細 > 名稱 & 內容  */
.pubKey { color:#c3a07e; }
.pubValue { color:#919191; }

/* 下方外框 */
.bd1 { width:100%; border-bottom:1px solid #f1f1f1; }
.bd2 { width:100%; border-bottom:1px dotted #c6c6c6; }

/* 訂單狀態 */
.status1 { color:#cc9933; }
.status2 { color:#ff0000; }
.status3 { color:#95360e; }
.status4 { color:#72b32b; }
.status5 { color:#3366ff; }



/* 無資料顯示 */
.nodata { text-align: center; padding:40px 0px; color:#919191; font-size:1.5rem; }
.nodata .emotion { font-size:6rem; padding-bottom:60px; }


.topbnr { padding-bottom:20px; }

/* 分頁 */
.pgn { text-align:center; }
.pgn .con { display: inline; position: relative; }
.pgn .page { display:inline-block; width:32px; height:32px; border-radius:50px; padding:5px 0px; }
.pgn .page a { color:#106536; }
.pgn .page a:hover { color:#72b32b; }
.pgn .pbtn {  width:32px; height:32px; border-radius:50px; padding:9px 0px; background-color:#106536; color:#ffffff; font-size:0.875rem; border:none; }
.pgn .active { background-color:#906d54; color:#fff; }
.pgn .pbtn.nopage { background-color: #c6c6c6; }
.pgn .larr { position: relative; left:-60px; } 
.pgn .rarr { position: relative; right:-60px; }
.pgn .pbtn:not(.nopage):hover { background-color: #72b32b; }

/* form */
form:not(.coform) { text-align: left; }
form label { color:#c3a07e; }
form label .import { color:#00a67c; }
form input:not(.securityInput):not(.search):not(#PostNo):not(.chkInput),form textarea { width:100%; background-color:#f1f1f1; border:1px solid #e2e2e2; padding:8px 10px; margin-bottom:25px; color:#474747; }
form input#PostNo { background-color:#c6c6c6; border:1px solid #c6c6c6; width:100%;  padding:8px 10px; margin-bottom:25px; color:#474747; }
form .security .securityInput { width:100%; background-color:#f1f1f1; border:1px solid #e2e2e2; padding:8px 10px; color:#474747; }
form textarea { resize:none; height:176px; }
form .security { margin-bottom:25px; }
form .change { height:100%; border:none; background-color: transparent; color:#7b2b25; white-space: nowrap; }
form .change:hover { color:#72b32b; }
form .security img { height:42px; }

input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin:0; }

/* select 改變按鈕圖示 */
select { -webkit-appearance: none; -moz-appearance: none; background: url("./images/arrow.png") no-repeat center center; background-position:calc(100% - 8px) 50%; background-size:8px; }
select.none { background-image:none; }

/* ie remove arrow */
select::-ms-expand { display: none; }

form select { width:100%; background-color:#f1f1f1; border:1px solid #e2e2e2; color:#474747; padding:8px 10px; margin-bottom:25px; }

/* icon */
.plink .icon { float:left; padding:6px 0px; display: flex; justify-content: flex-start; flex-wrap: wrap; }
.plink .icon .pic { width:32px; height:32px; background-color:#919191; color:#fff; text-align:center; padding:8px 0px; border-radius: 50px; margin-right:20px; }
.plink .icon .pic:hover { background-color:#72b32b; color:#fff;  }
.plink .icon .lineImg .pic { display: block; background:url("./images/icon_line-a.png") no-repeat center center; background-size:16px; background-color:#919191; }
.plink .icon .lineImg .pic:hover { background:url("./images/icon_line-a.png") no-repeat center center; background-color:#72b32b; background-size:16px; }
.plink.pshare .icon .pic { background-color:#106536; color:#fff; }
.plink.pshare .icon .pic:hover { background-color:#72b32b; color:#fff; }
.plink.pshare .lineImg .pic { background-color:#106536; }

.contactus .plink .icon .pic { margin:10px 20px 10px 0px; }

/* 分類樣式 */
.classname { padding: 10px 0px; border-top:0px solid #eae8e5; justify-content: center;  border-bottom:0px solid #eae8e5; }
.classname.row { margin-left:0px; margin-right:0px; }
.classname .cls { padding:10px 5px; }
.classname a { color:#474747; padding-bottom:3px; }
.classname a:hover { color:#72b32b; border-bottom:2px solid #72b32b; }
.classname select,
.classname i { display:none; }

/* 麵包屑 */
.bc .back { float:left; padding:20px 0px; font-size:0.875rem; }
.bc .back a { color:#906d54; }
.bc .back a:hover { color:#c3a07e; }
.bc .breadcrumb { background-color:transparent; justify-content: flex-end; padding:20px 0px; margin:0px; }
.bc .breadcrumb li { color:#919191; font-size:0.875rem; }
.bc .breadcrumb li::before { color:#e9ecef; }
.bc .breadcrumb a { color:#906d54; }
.bc .breadcrumb a:hover { color:#c3a07e; }

/* ===================================== 個別樣式 ===================================== */
/* ====== news ====== */
/* .news { padding-bottom:40px; } */
.news .new { margin-top:40px; padding:30px; background-color: #fff; text-align: left; display:flex; }
.news .new .nc { border-right:1px solid #f1f1f1; flex:4; padding-right:60px; }
.news .new .nc .newtitle { color:#106536; font-size:1.5rem; padding-bottom:8px; }
.news .new .nc .date { color:#919191; margin-top:5px; margin-bottom:20px; font-size:0.8rem; }
.news .new .nc .content { color:#474747; line-height: 23px; word-break:break-all; }

.news .new .continue { color:#106536; flex:1; display:flex; justify-content: center; align-items:center; position: relative; }
.news .new .continue:hover { color:#72b32b; flex:1; display:flex; justify-content: center; align-items:center; position: relative; }
.news .new .continue .arrow { position: absolute; right:0; top:50%; transform: translate(0,-50%); font-size:1.25rem; }

/* ====== news2 ====== */
.newbd { border-bottom: 1px solid #f1f1f1; margin:30px 0px; }
.news .new2 { text-align:left; }
.news .new2 .nc { padding:30px; }
.news .new2 .nc .newtitle { color:#262626; font-size:1.5rem; }
.news .new2 .nc .date { color:#ababab; margin-top:5px; margin-bottom:20px; font-size:0.8rem; }
.news .new2 .nc .content { color:#474747; line-height: 23px; word-break:break-all; overflow: hidden; }
.news .new2 .continue { color:#94776e; display:flex; justify-content: flex-end; padding-right:60px; position: relative; }
.news .new2 .continue .arrow { font-size:1.25rem; position: absolute; padding:2px 0px; right:0px; }

.LinkArea { padding-top:20px; }
.LinkArea a { display: inline-block; padding-top:20px; color:#72b32b; }
.LinkArea a:hover { display: inline-block; padding-top:20px; color:#72b32b; border-bottom:1px solid #72b32b; }

/* ====== news_content ====== */
.newscont { text-align: left; }
.newscont .date { color:#919191; margin:5px 0px; font-size:0.8rem; }
.newscont .newtitle { color:#106536; font-size:1.5rem; padding-bottom:30px; border-bottom:1px solid #f1f1f1; }
.newscont .img { margin-top:30px; }
/* .newscont .img { height:360px; background: url("./images/home_banner_4a.jpg") no-repeat center center; background-size:cover; margin:30px 0px; } */
.newscont .content { margin:40px 0px; color:#303030; word-break:break-all; }
/* .newscont .content span { font-size:16px !important; } */
.newscont .content img { max-width:100%; height:auto !important; }

/* ====== about ====== */
.about img { margin-bottom:30px; }
.about .content { text-align: left; word-wrap: break-word; }
.about .content img { max-width:100%; height:auto !important; }

/* ====== contactus ====== */
.contactus .content { display:flex; text-align:left; flex-direction: row-reverse; }
.contactus .content > div { flex:1; }
.contactus .inf { padding-right:40px; }
.contactus .inf .company { background-color: #fff; border-left: 6px solid #72b32b; padding:0px 10px; color:#906d54; font-size:1.25rem; }
.contactus .inf .pro { margin-top:30px; }
.contactus .inf .addr { display: inline-block; }
.contactus .inf .addr .gm a { color:#00a67c; border-bottom:1px solid #00a67c; font-size:0.875rem; }
.contactus .inf .addr .gm a:hover { color:#a6e068; border-bottom:1px solid #a6e068; }
.contactus .inf .follow { margin-top:30px; padding-top:20px; }
.contactus .contform { padding-left:20px; }

/* ====== dl ====== */
.dl a:hover .file { border:1px solid #72b32b; }
.dl a:hover .file .tit { color:#72b32b; }
.dl a:hover .bd { display: block; }
.dl .file { margin-top:40px; display: flex; position:relative; }
.dl .file .fl { height:120px; overflow:hidden; flex:0 1 120px; }
.dl .file .fl img { width:auto; height:120px; }
.dl .file .fr { padding-top:20px; padding-left:30px; flex:0 1 calc(100% - 120px); }
.dl .file .fr .tit { color:#106536; font-size:1.5rem; word-break:break-all; text-align:left; }
.dl .file .fr .size { color:#919191; font-size:0.875rem; text-align: left; }
.dl .bd { display:none; position: absolute; top:0px; bottom:0px; left:0px; right:0px; border:3px solid #72b32b; }

/* ====== gallery ====== */
.album .gallery { margin-top:40px;  }
.album .gallery .des { padding:20px; text-align: left; background-color:#fff; }
.album .gallery .des .title { color:#106536; font-size:1.125rem; padding-bottom:8px; }
.album .gallery .des .date { color:#919191; font-size:0.875rem; }
.album .gallery .des:hover .title { color:#72b32b; }

/* gbox set */
/* 活動剪影 */
.album .gbox { display:block; height:200px; width:100%; overflow:hidden; }
.album .gbox img { width:auto; transition: transform .5s ease-out; }
.album .gbox:hover img { transform: scale(1.1); }
/* 人員介紹 */
/* .staff .gbox { width:100%; overflow:hidden; } */

.pic_list .title { color:#106536; font-size:1.5rem; text-align:left; }
.pic_list .fancybox { display: block; height:200px; overflow:hidden; margin-top:40px; }

/************************** video rwd **************************/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

.video-container-4by3 {
	position: relative;
	padding-bottom: 75%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container-4by3 iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

/* ====== staff ====== */
.staff { margin-top:40px; }
.staff .area { padding:15px; }
.staff .area .tit { color:#c3a07e; font-size:1rem; padding-bottom:8px; }
.staff .area .name { color:#262626; font-size:1.25rem; }
.staff .area .name:hover { color:#72b32b; font-size:1.25rem; }

.staffDetail .img img { width:300px; }
.staffDetail .info .name { color:#262626; font-size:1.75rem; margin-bottom:4px; }
.staffDetail .info .tit { color:#72b32b; font-size:1rem; margin-bottom:40px; }
.staffDetail .info .subtit { color:#906d54; font-size:1.25rem; padding-bottom:10px; }
.staffDetail .info .cont { color:#474747; }
.staffDetail .info .bd1 { margin:60px 0px; }
.staffDetail .info button.back { float: none; }

.staffArea .desc2 { text-align: left; }
.staffArea .desc2 img { max-width:100%; height:auto !important; }

/* ====== weblink ====== */
.weblink .colBG { border:1px solid #d8d3cd; border-bottom:4px solid #d8d3cd; }
.weblink .wls:hover > .colBG { border:1px solid #72b32b; border-bottom:4px solid #72b32b; }
.weblink .wls { margin-top:40px; }
.weblink .wl { position:relative; text-align:left; display: block; padding:30px; }
.weblink .wl .tit { color:#106536; font-size:1.5rem; padding-bottom:10px; }
.weblink .wl .url { color:#919191; font-size:0.875rem; overflow: hidden; }
/* .weblink .wl .bd { display:none; position: absolute; left:0px; right:0px; bottom:0px; height:4px; background-color:#72b32b; } */
/* .weblink .wl:hover .bd { display: block; } */
.weblink .wls:hover .tit,.weblink .wls:hover .url { color:#72b32b; }

/* ====== course ====== */
.course { margin-top:40px; }
.course .st { display: inline-block; padding:5px 0px; }
.course .status { display: inline-block; color:#fff; font-size:0.875rem; padding:3px 10px; margin-right:10px; position: relative; bottom:4px; }
.course .status.wait { background-color:#106536; }
.course .status.sign { background-color:#00a67c; }
.course .status.full,.course .status.out { background-color:#474747; }
.course .info { font-size:0.875rem; color:#c3a07e; }
.course .info > span { padding-right:30px; }
.course .info .clodt { color:#7b2b25; }


/* ====== coursecont ====== */
.coursecont .newtitle { border:none; padding-bottom:15px; text-align:left; }
.coursecont .info { color:#474747; }
.coursecont .info .tit { font-size:0.875rem; }
.coursecont .infol > div , .coursecont .infor > div { padding-bottom:5px; }
.coursecont .signbtn button { width:160px; max-width:100%; color:#fff; border:none; padding:8px 0px; border-radius: 5px; }
.coursecont .signbtn button.signin { background-color:#106536; }
.coursecont .signbtn button.signin:hover { background-color:#72b32b; }
.coursecont .signbtn button.signout { color:#919191; background-color:#e2e2e2; }
.coursecont .signbtn button.signlist { background-color:#906d54; }
.coursecont .signbtn button.signlist:hover { background-color:#72b32b; }
.coursecont .img { margin-top:40px; }

#loginModal .modal-dialog { margin:10rem auto; max-width:540px; }
#loginModal .modal-content { border-radius: 0px; }
#loginModal .loginPage .lr_link { flex-direction: row-reverse; }

/* ====== apply ====== */
.apply .check .link,
.case .check .link { color:#72b32b; border-bottom:1px solid #72b32b; }
.apply .check .link:hover,
.case .check .link:hover { color:#72b32b; cursor: pointer; }
.apply .desc { margin-bottom:25px; }

/* ====== case ====== */
.case .subt { font-size:1.5rem; color:#106536; text-align:center; }
.case .subt2 { color:#777777; text-align:center; }
.case .symbol { margin-left:15px; margin-right:15px; color:#777777; font-size:1.25rem; }
.case .symbol2 { margin-left:15px; margin-right:15px; color:#106536; font-size:1.75rem; }
.case .price2 { font-size:1.25rem; }
.case .price3 { font-size:1.75rem; color:#106536; }
.case form .checkmark { top:50%; left:6px; transform: translate(0, -50%); }
.case form .inputArea,
.case form .imageArea { width:160px; margin-right:30px; }

.case .process { margin:0px 40px; }
.case .process .step { font-size:0.875rem; color:#c7a788; margin-bottom:5px; }
.case .process .icon img { height:60px; width:auto; }
.case .process .stepName { color:#c7a788; margin-top:10px; }
.case .process .stepName.active { color:#906d54; }

.case .preview_area img { width:25%; }

/* ====== calendar ====== */
.calendar { margin-top:40px; }
.calendar .calTable { width:350px; float:left; background-color: #fff; }
.calendar .calTable table { width:100%; border-collapse: collapse; }
.calendar .calTable table td { font-size:0.875rem; border:1px solid #f1f1f1; width:50px; }
.calendar .calTable table .month { background-color:#106536; color:#fff; padding:8px 0px; position: relative; }
.calendar .calTable table .month .selmon { border:none; background-color:transparent; position: absolute; color:#fff; padding:3px 0px; height:20px; width:10px; }
.calendar .calTable table .month .selmon.left { left:20px; }
.calendar .calTable table .month .selmon.right { right:20px; }
.calendar .calTable table .week { background-color:#919191; color:#fff; padding:8px 0px; }
.calendar .calTable table .date { height:50px; vertical-align: top; padding:8px; }
.calendar .calTable table .date.notim { color:#e2e2e2; }
.calendar .calTable table .date.today { background-color:#e1ceba; color:#fff; }
.calendar .calTable table .date.active { background-color:#a6e068; }
.calendar .calTable table .date .tagArea { padding-top:5px; display: flex; text-align: center; justify-content: flex-start; flex-wrap: wrap; margin:0px auto; }
.calendar .calTable table .date .tagArea.fcen { justify-content: center; }

.calendar .tag { display: inline-block; width:8px; height:8px; border-radius: 25px; margin:1px; }

.calendar .link { float:right; width:calc(100% - 380px); margin-left:30px; border:1px solid #fff; text-align:left; }
.calendar .link .date { padding:10px 30px; background-color:#106536; color:#fff; }
.calendar .link .cont { background-color:#fff; padding:15px 20px; }
.calendar .link .cont .area { padding:5px 0px; }
.calendar .link .cont a { color:#474747; }
.calendar .link .cont a:hover { color:#72b32b; border-bottom:1px solid #72b32b; }

.confirm { max-width:540px; }
.confirm .resend { margin-top:25px; }
.confirm .resend a { color:#17607d; }
.confirm .resend a:hover { color:#fe8f30; }

/* ====== login ====== */
.lr_main { margin:80px auto; }
.loginPage { background-color:#fff; }
.loginPage .title { display:flex; background-color:#f0f3bd; }
.loginPage .title a { flex:1; padding:15px; color:#106536; font-size:1.5rem; }
.loginPage .title .active { cursor: default; background-color: #ffffff; }
.loginPage .login,
.loginPage .join { padding:30px; text-align: left; }
.loginPage .join { display: none; }
.loginPage .content { margin-bottom:30px; color:#474747; }
.loginPage .lr_link { display: flex; justify-content: space-between; padding-top:20px; }
.loginPage .lr_link .check { flex:1; color:#106536; }
.loginPage .lr_link a { color:#106536; }
.loginPage .lr_link a:hover { color:#72b32b; }
.loginPage .lr_link span { font-size:1.25rem; }
.loginPage .join .mhjoin { height:10px; }

/* ====== article ====== */
.article { margin-bottom:140px; }
.article .content { text-align:left; max-height:310px; overflow-y:scroll; width:100%; color:#474747; margin-bottom:20px; }
.article .check { color:#106536; margin:30px 0px; }

.article .agree button { background-color:#106536; border:none; border-radius: 5px; color:#ffffff; padding:8px 0px; }
.article .agree button:hover { background-color:#72b32b; }

/* ====== join ====== */
.join .subtitle { padding-bottom:30px; border-bottom:1px solid #f1f1f1; }
.join .accountData , .join .memberData { text-align:left; display: flex; padding:16px 0px; border-bottom:2px solid #f1f1f1;  }
.join .accountData .title , .join .memberData .title { flex-basis:286px; border-bottom:none; color:#106536; font-size:1.5rem; }
.join .accountData .accountForm , .join .memberData .memberForm { flex: 1; }


.join .memberData.last { padding-bottom:0px; border-bottom:none; }
.memberForm select { width:100%; background-color:#f1f1f1; border:1px solid #e2e2e2; padding:8px 10px; margin-bottom:25px; color:#474747; }
/* .memberForm #PostNo { background-color:#e2e2e2; border:none; } */
.birth { position: absolute; right:25px; top:45px; color:#474747; border:none; background-color:transparent; }

.memberForm .changeBtn { justify-content: flex-start; display: flex; }
.memberForm .changeBtn button { border:none; background-color: transparent; color:#8a7457; }
/* .memberForm .send { margin-top:25px; margin-bottom:0px; } */

/* ====== finishReg ====== */
.finishReg { margin-bottom:140px; }
.finishReg .cont1 { margin:30px 0px; color:#474747; }
.finishReg .cont1 .memName { font-size:1.25rem; }
.finishReg .cont2 { color:#474747; }
.finishReg .breadcrumb { justify-content: center; background-color:transparent;  }
.finishReg .breadcrumb .breadcrumb-item::before { color:#919191; }
.finishReg .breadcrumb a { color:#72b32b; }
.finishReg .breadcrumb a:hover { color:#72b32b; border-bottom:1px solid #72b32b; }
/* .finishReg .mhfin { height:350px; } */

/* ====== memberMain ====== */
.memberMain .row { justify-content: center; }
.memberMain .cont1 { margin-top:30px; margin-bottom:40px; color:#474747; }
.memberMain .feature { padding:30px 0px; cursor: pointer; }
.memberMain .feature .icon { color:#106536; font-size:2rem; }
.memberMain .feature:hover > .icon { color:#72b32b; }
.memberMain .feature .fname { padding:15px 0px; color:#106536; }
.memberMain .feature .fname:hover { padding:15px 0px; color:#72b32b; }

/* ====== forgetPwd ====== */
.forget { max-width:540px; margin:0px auto; }
.forgetPwd .subtitle { padding-top:25px; }
.forgetPwd .forgetForm { padding-top:40px; }
.forgetPwd .forgetForm .send { margin-bottom:0px; }
.forgetPwd .subtitle .link { color:#00a0e9; }

/* ====== orderSearch ====== */
/* .orderSearch { padding:0px; } */
.orderSearch .orderTable { display: table; width:100%; border-collapse: collapse; }
.orderSearch .orderTable .subject,
.orderSearch .orderTable .order { display: table-row; }
.orderSearch .orderTable .subject { background-color:#106536; color:#fff; }
.orderSearch .orderTable .order { border-bottom:1px dotted #c6c6c6; color:#474747; }
.orderSearch .orderTable .subject > div,
.orderSearch .orderTable .order > div { display: table-cell; padding:20px 15px; }
.orderSearch .orderTable .orderID { font-weight: bold; }
.orderSearch .orderTable .link { font-size:0.875rem; color:#919191; }
.orderSearch .orderTable .link a { color:#29abe2; }
.orderSearch .orderTable .price { font-size:0.875rem; color:#72b32b; }
.orderSearch .orderTable .offer { font-size:1rem; } 

.orderBottom .title { border-bottom:none; }
.orderBottom .area { text-align:left; padding-top:30px; }
.orderBottom .area.first { padding-top:0px; }
.orderBottom .area .odTitle { color:#000; font-size:1.5rem; }
.orderBottom .area .content { padding-bottom:40px; text-align: left; }
.orderBottom .pubValue .none { color:#919191; }
.orderBottom .title { padding-bottom:30px; }
/* .orderBottom .orderStatus .area .status { color:#22b4a4; padding-bottom:30px; } */
.orderBottom .orderStatus .area .report .send { margin-bottom:0px; }
.orderBottom .orderData .content:not(:last-child) { padding-bottom:20px; }
/* .orderBottom .orderData .area .content { display:table-row; } */
.orderBottom .orderData .area .content > div { /*display: table-cell;*/ padding-bottom:5px; word-break: break-all; }

/* ====== bottom checkbox ====== */
.orderBottom .ck { width:310px; margin:0 auto; }
.orderBottom .ckb { padding:30px 0px; color:#474747; text-align: left; }
.orderBottom .ckb a { color:#72b32b; border-bottom:1px solid #72b32b; }
.orderBottom .ckb a:hover { color:#72b32b; border-bottom:1px solid #72b32b; }

/* ====== chginfo ====== */
.chginfo .memberForm { max-width:730px; margin:0 auto; }

/* ====== chgpass ====== */
.chgpass .memberForm { max-width:730px; margin:0 auto; }

/* ====== finishOrder ====== */
.finishOrder { padding:30px; text-align: left; border-top:1px solid #f1f1f1; }
.finishOrder .ftitle { color:#000; font-size:1.5rem; padding-bottom:30px; }
.finishOrder .content a { color:#00a0e9; border-bottom:1px solid #00a0e9; }

/* ====== orderError ====== */
.ordererror .error { max-width: 460px; margin: 0 auto; text-align: left; }
.ordererror .errtxt { padding:20px 0px; }
.ordererror .bd { border-bottom:1px solid #f7f0e7; margin:20px 0px; }
.ordererror .remark { text-align: left; }

/* checkbox style */
.article .check { padding-left:35px; }
.check { display: block; position: relative; padding-left: 30px; margin-bottom: 0px; cursor: pointer; font-size: 1rem; overflow:hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.check input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }/* Hide the browser's default checkbox */
.checkmark { position: absolute; top: 4px; left: 4px; height: 16px; width: 16px; background-color: #eee; border-radius:3px; }/* Create a custom checkbox */
.check:hover input ~ .checkmark { background-color: #ccc; }/* On mouse-over, add a grey background color */
.check input:checked ~ .checkmark { background-color: #474747; }/* When the checkbox is checked, add a blue background */
.checkmark:after { content: ""; position: absolute; display: none; }/* Create the checkmark/indicator (hidden when not checked) */
.check input:checked ~ .checkmark:after { display: block; }/* Show the checkmark when checked */
.check .checkmark:after { left: 6px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }/* Style the checkmark/indicator */


/* placeholder color */
::-webkit-input-placeholder{ color:#777777; }
/* ::-moz-placeholder { color:#777777; } */
/* ::-ms-input-placeholder{ color:#777777; } */

/* scrollbar */
.article .content::-webkit-scrollbar { width: 16px; } /* this targets the default scrollbar (compulsory) */
.article .content::-webkit-scrollbar-track { background-color: #e6e6e6; } /* the new scrollbar will have a flat appearance with the set background color */
.article .content::-webkit-scrollbar-thumb { background-color: #666666; } /* this will style the thumb, ignoring the track */
.article .content::-webkit-scrollbar-button { background-color: transparent; display: none; } /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

.modalHeaderCenter { margin:0px auto; width:100%; justify-content: center; align-items: center; }
.modalHeaderCenter .mTitle { font-size:1.25rem; }
.modalHeaderCenter .close { position: absolute; right:16px; margin:0px; }

#applyModal .modal-dialog , #MemArtModal .modal-dialog , #ProdRuleModal .modal-dialog { width:980px; max-width:90%; margin-top:10rem; }
#applyModal .notice { color:#ff4500; }
#applyModal .aplist { border-bottom:1px solid #e2e2e2; padding-top:10px; }
#applyModal .aplist .pass { color:#474747; }
#applyModal .aplist .unpass { color:#919191; }

::-webkit-scrollbar-corner {
    background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */


@media (min-width:1200px){
    /* ====== calendar ====== */
    .calendar .calTable table .date.live:hover { background-color:#a6e068; cursor: pointer; }
}

@media (max-width:1198.98px){
    .course .info > span { display: block; }
    .course .info > span i { display: inline-block; width:20px; text-align: center; }
}

@media (max-width:1198.98px) and (min-width:992px){
    select { background-position:calc(100% - 10px) 50%; }

    /* ====== orderSearch ====== */
    .orderSearch .orderTable .order .link { font-size:0.8rem; }
}

@media (min-width:768px) and (max-width:991.98px){

    select { background-position:calc(100% - 10px) 50%; }

    /* ====== contactus ====== */
    .contactus .contform .security input { width:100%; }
    
    /* ====== staffDetail ====== */
    .staffDetail .img img { width:200px; }

    /* form */
    .login form .security .securityInput,
    .forgetPwd form .security .securityInput,
    .join form .security .securityInput { margin-bottom:0px; }

    /* ====== join ====== */
    .join .accountData .title , .join .memberData .title { flex-basis:180px; }

    /* ====== orderSearch ====== */
    .orderSearch .orderTable .order { font-size:0.8rem; }
    .orderSearch .orderTable .subject > div,
    .orderSearch .orderTable .order > div { padding:15px 5px; font-size:0.875rem; }
    /* .orderSearch .orderTable th,.orderSearch .orderTable td { padding:15px 5px; font-size:0.875rem; } */
    .orderSearch .orderTable .link { font-size:0.8rem; }
    .orderSearch .orderTable .price { font-size:0.8rem; }

    /* ====== calendar ====== */
    .calendar .calTable { width:280px; }
    .calendar .calTable table td { width:50px; }

    .calendar .link { width:calc(100% - 310px); }
}

@media (max-width:991.98px){
    form .security .securityInput { margin-bottom:20px; }

    /* ====== contactus ====== */
    .contactus .inf .pro span { display:block; }

    .case .process { margin:0px 30px; }
}

@media (min-width:768px){
    .pdes .md_top,
    .pgn .md_top { display:none; }

    /* ====== staffDetail ====== */
    .staffDetail { display: flex; }
    .staffDetail .info { margin-left:30px; flex:auto; }

    /* ====== login ====== */
    .mhlog { height:40px; }
    .lr_main { max-width:540px; }

    /* ====== article ====== */
    .article form { width:400px; margin:0px auto; margin-top:20px; }
    .article .agree { display: flex; justify-content: space-between; }
    .article .agree button { width:40%; }

    /* ====== join ====== */
    .join .memberData img { height: 42px; }

    /* ====== forgetPwd ====== */
    .forgetPwd { max-width:540px; margin:0px auto; margin-bottom:40px; }

    /* ====== orderSearch ====== */
    .orderSearch .title { border:none; }
    .orderSearch .order .md_show { display: none; }

    .orderBottom .orderStatus .area .report .send { width:50%; }
    /* ====== finishOrder ====== */
    .mhfin { height:100px; }

    .news .new2 .nc .content { height:46px; }
}

@media (max-width:767.98px){

    /* ====== 共用樣式 ====== */
    .areaTIT { font-size:1.5rem; }
    .areaCONT { padding:15px; }
    
    .pubKey { font-size:0.875rem; }

    .mhpgn { height:40px; }
    .mh3 { height:15px; }
    .topbnr { padding-top:40px; }
    .nodata { padding:40px 0px; font-size:1rem; }
    .nodata .emotion { font-size:4rem; padding-bottom:40px; }

    .bc .breadcrumb { display: none; }
    .bc .back { font-size:1rem; }

    .pshare button.back { width:105px; float:right; }
    .orderReturn button.back { padding:10px; width:100%; }

    /* page */
    .pgn .larr,.pgn .rarr { position: static; }
    .pgn .con { display:flex; justify-content: space-between; }
    .pgn .pbtn { width:32px; height:32px; font-size:0.875rem; padding:9px 0px; margin:0px; }
    .pgn .active { background-color: transparent;  color:#474747; font-weight: bold; width:auto; font-size:1rem; height:32px; }
    .pgn .txt { padding:0px 10px; }
    .pgn .page:not(.active){ display:none; }

    /* form */
    form .security img { width:100%; }
    form label { font-size:0.875rem; }
    form .security img { margin-right:5px; }

    /* icon */
    .plink .icon .pic { margin-right:10px; }
    .plink:not(.pshare) .icon { float:none; margin-bottom:20px; }

    /* 分類樣式 */
    .classname { padding:0px; }
    .classname div { display:none; }
    .classname select { display:block; width:100%; border:none; padding:10px; font-size:1.25rem; color:#777777; }

    /* ====== news ====== */
    .news .new { display:block; }
    .news .new .nc { padding-right:0px; border-right:none; background-color: #fff; border-bottom:1px solid #f1f1f1; }    
    .news .new .nc .content { line-height: 23px; margin-bottom:30px; }
    .news .new .continue { justify-content: flex-end; padding-top: 30px; }
    .news .new .continue .arrow { position:static; transform:none; padding-left:20px; }
    
    /* ====== news_content ====== */
    /*.newscont,.about,.contactus { margin-bottom:60px; }*/
    .newscont .date { font-size:0.875rem; margin-bottom:20px; }
    .newscont .newtitle { font-size:1.5rem; }
    .newscont .content { font-size:1rem; }

    /* ====== gallery ====== */
    .album .gbox { height:150px; }
    .album .gallery .des { padding:10px; }
    .album .gallery .des .title { font-size:1rem; }

    .pic_list .fancybox { height:250px; }

    /* ====== course ====== */
    /* .course .new .newtitle { margin-bottom:20px; } */
    .course .info { font-size:1rem; }
    

    /* ====== contactus ====== */
    .contactus .content { display:block; }
    .contactus .inf,.contactus .contform { padding:0px; }
    .contactus .inf .pro { margin-top:20px; }
    .contactus .inf .key { font-size:0.875rem; }
    .contactus .contform .send { margin-bottom:60px; }

    /* ====== article ====== */
    /* .article .check input { margin-top:10px; } */
    .article .agree button { width:46.2%; }
    .article .agree button:nth-child(1) { float:left; }
    .article .agree button:nth-child(2) { float:right; }

    /* ====== join ====== */
    .join .accountData , .join .memberData { display: block; }
    .join .accountData .title , .join .memberData .title { text-align: left; font-size:1.125rem; padding-bottom:15px; }

    /* ====== finishReg ====== */
    .finishReg .breadcrumb { margin:50px 0px; }
    .finishReg .mhfin { height:50px; }

    /* ====== login ====== */
    .loginPage .send { margin-bottom:40px; }
    .join form { font-size:0.875rem; }
    .birth { top:42px; } 

    /* ====== orderSearch ====== */
    .orderSearch .orderTable .subject { display: none; }
    .orderSearch .orderTable .order > div { display: block; padding:0px; }
    .orderSearch .orderTable .order .orderID { font-size:1.25rem; color: #106536; }
    .orderSearch .orderTable .order .date { color:#919191; padding:15px 0px; }
    .orderSearch .orderTable .order .link { font-size:1rem; padding-bottom:15px; }
    .orderSearch .orderTable .order .transport { padding-bottom:15px; }
    .orderSearch .orderTable .order .status { float:left; padding-bottom:15px; }
    .orderSearch .orderTable .order .price { float:right; }


    /* ====== orderBottom ====== */
    .orderBottom .area .content .key { font-size:0.875rem; }
    .orderBottom .orderData.Card .key { font-size:0.875rem; }
    .orderBottom .title { padding-bottom:15px; }
    /* .orderBottom .orderData .area { padding-bottom:40px; } */
    .orderBottom .area .content .pubValue { padding-bottom:10px; }
    .orderBottom .orderData .area .content { display: block; }
    .orderBottom .orderData .area .content > div { display:block; }
    .orderBottom .area .odTitle { padding-bottom:10px; }
     
    /* ====== finishOrder ====== */
    .finishOrder .ftitle { padding-bottom:20px; }
    .finishOrder .content { padding-bottom:30px; }

    /* ====== staffDetail ====== */
    .staffDetail .img img { width:100%; }
    .staffDetail .info .bd1 { margin:40px 0px; }

    /* ====== coursecont ====== */
    .coursecont .signbtn { display: flex; }
    .coursecont .signbtn button { flex:1; }


    /* ====== calendar ====== */
    .calendar .calTable , .calendar .link { width:100%; float: none; }
    .calendar .link { margin-left:0px; }

    /* ====== case ====== */
    .case .subt { font-size:1.25rem; }
    .case .symbol { margin-left:5px; margin-right:5px; }
    .case .symbol2 { margin-left:5px; margin-right:5px; font-size:1.25rem; }
    .case .price2 { font-size:1.125rem; }
    .case .price3 { font-size:1.25rem; }
    .case .price_label { font-size:0.875rem; }
    .case form .inputArea { width:100%; margin-right:0px; }
    .case form .imageArea { margin-right:15px; }

    .case .process { margin:0px 0px; }
    .case .icon-arrow { width:15px; }
    .case .process .icon img { height:40px; }
    .case .process .stepName { font-size:0.875rem; }
}