@import url("reset.css");
*{
	margin:0;
	padding:0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	font-family:Georgia,sans-serif,'Microsoft JhengHei','微軟正黑體';
}

body{
	font-family:Georgia,sans-serif,'Microsoft JhengHei','微軟正黑體';
    font-size:14px;
    font-weight:400;
	letter-spacing:1px;
    margin:0 auto; 
    padding:0;
	background-color:#f6f6f6;
}

img { display:block; border: none;}

#wrap{ display: block; width: 100%;	height:auto; margin: 0 auto; padding: 0;}

/*登入頁*/
#login{display:block; width: 100%; margin: 0 auto; padding:0;/*background-color:#fff;*/}
	
.login_title {
	display:block; 
	width:100%;
	height:350px;
	margin:0 auto;
	text-align:center;
	padding-top:90px;
	background:url(../images/md_bg1.jpg) center center no-repeat;
	background-size: cover;
	}
.login_txt, .login_txt2{display:block; font-size:66px; font-weight:510; color:rgba(83,71,65,0.95);}
.login_txt2{font-size:20px; margin:1em auto;}

.login_box{display:block;width:40%; margin:2em auto 0 auto; padding:2em 0;}

.md-form, .md-btn{display:block;width:90%; margin:0 auto;}
.md-form-line {margin:0 0 1em 2em;}
.md-label{width: 20%; font-size:18px; line-height:2.5em;float:left; text-align:right;}
.md-input{margin-left:2%; float:left;}

.md-input .input1{width: 28em; float: left;}
.md-input .input2{width: 15em; float: left;}
.img-captch {float:left; margin: 0 .5em; vertical-align: middle;}

.md-input input[type='password'], .md-input input[type='text'] {
    height: 2.5em;
    border: solid 1px #cccccc;
    font-size: 16px;
    line-height: 1.75em;
    text-align: left;
    display: block;
    width: 100%;
    outline: none;
    padding: 0 .12rem;
  }

.forget-password {display:block;float:right;font-size: 13px;letter-spacing:1px;color:#666566; margin:0 9em 2.5em 0;}
.forget-password:hover {color:#666566;}

.login_btn{display:block;float:left;width:45%;padding:.75em 0; margin:0 2%;font-size: 16px; text-align:center;color:#666566; border-radius:.25em; border:#666566 solid 1px;}
.login_btn:hover{border:#a478b9 solid 1px; background-color:#a478b9; color:#fff;}

.register_btn{display:block;float:left;width:45%; padding:.75em 0; margin-right:2%; font-size: 16px; text-align:center; color:#fff; border-radius:.25em; border:#666566 solid 1px; background-color:#666566;}
.register_btn:hover{border:#666566 solid 1px; background-color:#f6f6f6; color:#666566;}



/*專區標題*/
#member{display:block; width: 100%; margin: 0 auto; padding:3.5em 0 2em 0; background-color:#fff;}
.mem_title {display:block; width:60%; margin:0 auto; font-size:18px; font-weight:bold; color:#fff;}
.member_box {display:block;width:60%; margin:3.5em auto 7em auto;}
.member_box li {float:left; margin-right:15px;}

.name {margin:0 0 0 .5em;font-size:25px; font-weight:bold; color:#672e85;}
.name_s, .name_s2 {font-size:17px; font-weight:500;color:#666566;}
.name_s{margin-top:.25em;line-height:1.5em;}
.name_s2 {display:block; width:60%; margin:0 auto 1em auto; padding-left:.8em;}

/*會員福利說明*/
#benefit{display:block; width:100%; height:auto; margin:0 auto; padding:0 0 .5em 0; background-color: #f6f6f6;}
.benefit_box {display:block; width:60%; height:auto; margin:.75em auto 1.25em auto; padding:1.5em 0 6em 0; text-align:center; }

.benefit_title, .b_box1, .b_box2 {display:block; float:left; text-align:center;}
.benefit_title {
	width:20%;
	margin-left:.5%;
	height:2.5em;
	line-height:2.5em;
	padding:.5em 0;
	z-index:2;
	color:#d16fb4;
	font-size:20px;
	font-weight:bold;
}
.b_box1, .b_box2 {width:39%; margin-right:.5%; padding:.25em;}

.benefit_txt , .benefit_txt2, .benefit_txt3{
	font-family:'Microsoft JhengHei','微軟正黑體';
	font-weight:500;
	font-weight:bold;
	color:#fff;	
}
.benefit_txt{display:block; font-size:18px; padding:.75em 0; margin-bottom:.25em; border-radius:.75em; background-color: #d16fb4; text-align:center;}
.benefit_txt2{font-size:24px; color:#fff6ad; font-weight:bold; margin:0 2px;}
.benefit_txt3{font-size:15px;  margin:.25em 0; color:#d16fb4; font-weight:600;}

.subtitleline{ 
    display: inline-block;
    width: 80%;
    height: 2px;
    vertical-align:middle;
    background-color: #eadbf1;
}

.clearfix {clear:both;}

/*3個tab*/
#record{display:block; width:100%; margin:0 auto; padding:1.5em 0 .5em 0;}
.main {margin: 0 auto;width:60%;}
.content {background-color:#fff;width:99.8%;}
.content > div {display: none; padding: 3em}

input {display: none;}
label { 
    width:33%;
	display: inline-block;
	cursor: pointer;
	font-size: 17px;
	height:3em;
	line-height:3em;
	text-align: center;
	color: #b4a3bc;
	background-color: #e9dfee;
}
label:hover {color: #d16fb4; font-weight:bold; cursor: pointer;}
input:checked + label { 
	background-color:#a478b9;
	color: #fff;
	font-weight:bold;
}

#tab1:checked ~ .content #content1,
#tab2:checked ~ .content #content2,
#tab3:checked ~ .content #content3,
#tab4:checked ~ .content #content4 {
  display: block;
}

#content1 li, #content2 li, #content3 li {
	display:block;
	font-family:'Microsoft JhengHei','微軟正黑體';
	font-size:15px;
	line-height:1.75em;
	margin-bottom:.5em;
	color:#656465;
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph; /*IE9*/
	-moz-text-align-last:justify; /*Firefox*/
	-webkit-text-align-last:justify; /*Chrome*/
}

#content1 ul, #content2 ul { margin-left: 4.5em;}
#content3 ul {margin: 1em 3em 2em 4.5em;}

.i_title2, .i_title3{ font-family:'Microsoft JhengHei','微軟正黑體';}
.i_title2 { display:block; background-color: rgba(234,219,241,0.3); border-left:#a478b9 solid 8px; margin:0 1.2em 1em 1.2em; padding-left:1em; font-size:20px;font-weight:600;line-height:2em;color:#a478b9;}
.i_title3 { margin:1.75em 0 .75em 1.5em; padding-left:2em; font-size:18px;font-weight:600;line-height:2em;color:#d16fb4;}

.underline{
    display: inline-block;
	font-family:'Microsoft JhengHei','微軟正黑體';
    border-bottom: 1px solid #d16fb4;
	color:#d16fb4;
	font-weight:500;
}

/*表格*/
.course, .exchange {width:95%; margin:2.5em auto 2em auto;}
.course th,.course td, .exchange th,.exchange td{
    border: 1px solid #f1f1f1;
    padding: 8px 5px;
    text-align: center;
	background-color:#fff;
	font-family:'Microsoft JhengHei','微軟正黑體';
	font-size:15px;
}

.course th, .exchange th{ background-color:#616564; color: #fff; font-weight: bold;}

.course_name{color:#4275d3;}
.course_num, .course_date{color:#666;}
.coupon_mode{color:#f60; font-weight:bold;}
.coupon_item{color:#d16fb4;}
.coupon_num{color:#d16fb4;}

footer{ display: block;	overflow: hidden; width: 100%; height: auto; margin: 0 auto; padding:1.25em 0;}
.copyright { display:block; width:60%; margin:0 auto; text-align:center;font-family:'Microsoft JhengHei','微軟正黑體';font-size:14px; color:#222;}



@media screen and (max-width: 1800px) {	

/*登入頁*/
.login_box{width:50%;}
}

@media screen and (max-width: 1366px) {	

/*登入頁*/
.login_box{width:50%;}
.forget-password {margin:0 5em 2.5em 0;}

/*專區標題*/
#member{padding:3.5em 0 2em 0;}
.mem_title {width:80%;}
.member_box {width:80%; margin:2.5em auto 6em auto;}
.name {margin:0 0 0 .5em;font-size:24px;}
.name_s{line-height:1.25em;}
.name_s2 {width:80%;}

/*會員福利說明*/
#benefit{padding:2.5em 0 .5em 0; background-color: #f6f6f6;}
.benefit_box {width:90%; margin:.75em auto 1em auto; padding:2em 0 7em 0;  position:relative; border:#d16fb4 solid 2px; border-radius:1em;}

.benefit_title, .b_box1, .b_box2 {display:block; float:none; text-align:center;}
.b_box1, .b_box2 {float:left; text-align:center;}
.benefit_title { display:inline-block; width:25%;margin-left:0; margin: 0 auto 1em auto;height:0; line-height:0; padding:1em 0; font-size:20px; position:absolute; z-index:2; top:-1em;left:0; right:0;bottom:0; background-color: #f6f6f6;}
.b_box1, .b_box2 {width:48%; margin-right:.5%; padding:.25em;}
.b_box1 {margin-left:1.5%}

.benefit_txt{font-size:17px; padding:.75em 0; margin-bottom:.25em;}
.benefit_txt2{font-size:22px; color:#fff6ad; font-weight:bold; margin:0 auto;}
.benefit_txt3{font-size:15px; margin:.25em 0; color:#d16fb4; font-weight:600;}

/*3個tab*/
#record{padding:1.5em 0 .5em 0;}
.main {width:90%;}

#content1 ul, #content2 ul {margin-left: 4em; margin-right: 3em;}
#content2 ul {margin-left: 6em;}
#content3 ul {margin: 1em 3em 2em 4.5em;}
#content1 li, #content2 li {text-indent:-1.5em;}

.i_title2 {font-size:20px; margin:0 .5em 1em 1.2em;}
.i_title3 {margin:1.75em 0 .75em 1.5em; padding-left:2em; font-size:18px;font-weight:600;line-height:2em;color:#d16fb4;}

/*表格*/
.course, .exchange {width:95%; margin:2em auto;}
.course th,.course td, .exchange th,.exchange td{ padding: 8px 5px; font-size:15px;}

footer{padding:1.25em 0;}
.copyright {font-size:14px;}
}

@media screen and (max-width: 1024px) {

/*登入頁*/

.login_title {height:275px; padding-top:60px; background:url(../images/md_bg1.jpg) top center no-repeat; background-size:110%;}
.login_box{width:60%;}
.md-form-line {margin:0 0 1em 0;}
.forget-password {margin:0 3em 2.5em 0;}


/*專區標題*/
#member{padding:3.5em 0 1.25em 0;}
.mem_title {width:80%;text-align:center;}
.member_box {width:80%; margin:3em auto .75em auto; text-align:center;}
.member_box li {float:none; margin-right:0;text-align:center;}
.name {margin:0 auto;font-size:27px;}
.name_s2 {width:80%; text-align:center; padding-left:0;}
}

@media screen and (max-width: 812px) {

/*登入頁*/
.login_box{width:80%;}
.forget-password {margin:0 5em 2.5em 0;}
	
/*專區標題*/
#member{padding:3em 0 1.5em 0;}
.name {margin:1.5em 0 .75em 0;;font-size:27px;}
.name_s, .name_s2 {font-size:16px;}
.name {margin:1.5em 0 .75em 0;;font-size:27px;}
.name_s2 {margin:0 auto .75em auto;}

/*會員福利說明*/
.benefit_box {width:95%; margin:.75em auto .75em auto; padding:1.5em 0 6.25em 0;  position:relative; border:#d16fb4 solid 2px; border-radius:1em;}

.benefit_title {width:28%; margin: 0 auto 1em auto; padding:1em 0; font-size:18px;}
.benefit_txt{font-size:17px; padding:.5em 0;}
.benefit_txt2{font-size:20px;}
.benefit_txt3{font-size:14px;}

/*3個tab*/
#record{padding:1em 0 .5em 0;}
.main {width:95%;}
.content {width:99.6%;}
.content > div {padding:2.25em;}

label { width:32.7%; margin-right:1px;}

#content1 ul, #content2 ul {margin-left: 2.5em; margin-right: 1em;}
#content2 ul {margin-left: 3em;}
#content3 ul {margin: 1em 1em 2em 4em;}
#content1 li, #content2 li {text-indent:-1.5em;}

.i_title2 {font-size:20px; margin:0 .5em 1em .5em;}
.i_title3 {margin:1.5em 0 .75em 0; padding-left:2em; font-size:18px;font-weight:600;line-height:2em;color:#d16fb4;}

/*表格*/
.course, .exchange {margin:1.5em auto;}
.course th,.course td, .exchange th,.exchange td{ padding: 6px 5px; font-size:15px;}

footer{padding:1.25em 0;}
.copyright {font-size:14px;}
}

@media screen and (max-width: 768px) {
	
/*登入頁*/
.forget-password {margin:0 2em 2.5em 0;}
}

@media screen and (max-width: 667px) {
	
/*登入頁*/
.login_title {height:265px; padding-top:55px;}
.login_txt, .login_txt2{font-size:60px;}
.login_txt2{font-size:18px;}
.login_box{width:95%;}
.forget-password {margin:0 4.25em 2.5em 0;}
		
/*專區標題*/
#member{padding:2.25em 0 1em 0;}
.member_box {margin:0 auto .75em auto;}
.name {margin:1.5em 0 .75em 0;;font-size:25px;}
.name_s, .name_s2 {font-size:16px;}
.name_s{margin-top:.25em;line-height:1em;}

/*會員福利說明*/
#benefit{padding:1.5em 0 .5em 0;}
.benefit_box {width:92%; margin:.75em auto .75em auto; padding:1.5em 0 .5em 0;  position:relative; border:0;border-top:#d16fb4 dotted 2px; border-bottom:#d16fb4 dotted 2px; border-radius:0;}
.benefit_title {width:30%; margin: 0 auto 1em auto; padding:1em 0; font-size:17px;}
.benefit_title, .b_box1, .b_box2 {float:none;}
.b_box1, .b_box2 {width:80%; margin-right:0; margin:0 auto .5em auto; padding:.25em;}
.benefit_txt{font-size:17px; padding:.75em 0; border-radius:2em;}
.benefit_txt2{font-size:20px;}
.benefit_txt3{font-size:15px;}

/*3個tab*/
#record{padding:1em 0 .5em 0;}
.main {width:95%;}
.content {width:99.5%;}
.content > div {padding:2em 1em;}

label { width:32.6%; font-size: 16px; height:2.75em; line-height:2.75em; margin-right:0px;}

#content1 ul, #content2 ul {margin-left: 2.5em; margin-right: 1em;}
#content2 ul {margin-left: 3em;}
#content3 ul {margin: 1em 1em .5em 2em;}
#content1 li, #content2 li, #content3 li {
	font-size:14px;
}
#content1 li, #content2 li {text-indent:-1.5em;}

.i_title2 {font-size:20px; margin:0 .5em 1em .5em;}
.i_title3 {margin:1.25em 0 .5em 0; padding-left:1.5em; font-size:18px;line-height:1.5em;}

/*表格*/
.course, .exchange {margin:1.5em auto;}
.course th,.course td, .exchange th,.exchange td{ padding: 6px 5px; font-size:15px;}

footer{padding:.75em 0;}
.copyright {font-size:13px;}
}

@media screen and (max-width:568px){
/*登入頁*/
.md-input .input1{width: 25em;}
.md-input .input2{width: 15em;}
.login_box{ margin:.5em auto 0 auto;padding:1em 0 1.5em 0;}
.forget-password {margin:0 2.25em 2.5em 0;}
.login_btn{width:42%;margin:0 5% 0 5%;}
.register_btn{width:42%;margin-right:5%;}
}

@media screen and (max-width: 480px) {

/*登入頁*/
.login_title {height:210px; padding-top:40px; background-size:150%;}
.login_txt, .login_txt2{font-size:50px;}
.login_txt2{font-size:18px;}
.login_box{ margin:2em auto 0 auto;padding:1em 0 1.5em 0;}
.md-input .input1{width: 22em;}
.md-input .input2{width: 12em;;}
.forget-password {margin:0 1em 2.5em 0;}
.md-form, .md-btn{width:100%;}
.login_btn{width:42%;margin:0 2% 0 5%;}
.register_btn{width:42%;margin-right:5%;}
	
	
/*會員福利說明*/
.benefit_box {padding:1.5em 0 .5em 0;}
.benefit_title {width:45%;}
.b_box1, .b_box2 {width:92%; margin-right:0; margin:0 auto .5em auto; padding:.25em;}
.benefit_txt{font-size:16px; padding:.75em 0 .75em 0;}
.benefit_txt2{font-size:20px;}
.benefit_txt3{font-size:14px;}

/*3個tab*/
#record{padding:.5em 0 .5em 0;}
.content {width:99.6%;}
label { font-size: 15px; margin-right:0;}
}

@media screen and (max-width: 414px) {

/*登入頁*/
.md-label{width: 25%; font-size:16px;}
.md-input .input1{width: 18.5em; }
.md-input .input2{width: 10em;}
.forget-password {margin:0 2em 2.5em 0;}
.login_btn{width:42%;margin:0 2% 0 7%;}
.register_btn{width:42%;margin-right:6%;}

/*會員福利說明*/
#benefit{padding:1em 0 .5em 0;}
.benefit_title {width:52%;}
.b_box1, .b_box2 {width:98%;}

/*3個tab*/
#record{padding:.5em 0 .5em 0;}
.content {width:99.6%;}
label { width:32.4%; font-size: 15px;}
}


@media screen and (max-width: 375px) {

/*登入頁*/
.forget-password {margin:0 1em 2.5em 0;}
.md-input .input1{width: 17em; }
.md-input .input2{width: 9em;}
}
	
@media screen and (max-width: 320px) {

/*登入頁*/
.login_box{ margin:.5em auto 0 auto;padding:.5em 0 1.5em 0;}
.md-input{margin-left:1.5%;}
.md-input input[type='password'], .md-input input[type='text'] {font-size: 15px;}

.md-input .input1{width: 14.5em; }
.md-input .input2{width: 8em;}
.forget-password {margin:0 2.25em 2.5em 0;}

/*專區標題*/
#member{padding:2.25em 0 1em 0;}
.member_box {margin:0 auto .75em auto;}
.mem_title {font-size:16px;}
.name {margin:1.5em 0 .75em 0;;font-size:20px;}
.name_s, .name_s2 {font-size:14px;}
.name_s{margin-top:.25em;line-height:.75em;}

/*會員福利說明*/
.benefit_box {padding:1.25em 0 .25em 0;}
.benefit_title {width:58%; font-size:16px;}
.b_box1, .b_box2 {width:100%;}
.benefit_txt{font-size:15px; padding:.5em 0 .5em 0;}
.benefit_txt2{font-size:17px;}
.benefit_txt3{font-size:13px;}

/*3個tab*/
#record{padding:.5em 0 .5em 0;}
.content {width:99.6%;}
label { width:32%; font-size: 15px;}
}