/*====================== 學生 會員中心 ======================*/

/*--學員會員--*/
.member-header {
    width: 100%;
    float: left;
	padding: .5em 0 1.5em 10%;
}
.member-headerImg{
    width: 7em;
    height: auto;
    float: left;
    margin-right: 15px;
}
.member-headerImg img {
    width: 100%;
    height: 7em;
    object-fit: cover;
    line-height: 0;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.member-headerText {
    width: 70%;
    float: left;
	color: #fff;
	margin-top: 1%;
}
.member-headerText-B {
    width: 70%;
    float: left;
	margin-top: 3.5%;
}
.member-headerText a{
	color: #fff;
}
.member-headerText h3{
    font-size: 2em;
    font-weight: 600;
	margin: 0;
}
.member-headerText span{
    font-size: 1.5em;
}
.member-headerText p{
    font-size: 1.1em;
	margin: 0;
	line-height: 2;
}
.MainBox {
	width: 90%;
	float: left;
	margin: 0 5% 2em;
	background: #fff;
	padding: 0 3rem;
	border-radius: 2rem ;
	box-shadow: 1px 0px 2px #b9b9b9;
-webkit-box-shadow: 1px 0px 2px #b9b9b9;
-moz-box-shadow: 1px 0px 2px #b9b9b9;
}
.member-list {
	width: 100%;
	float: left;
	padding: 2em  10px;
	border-bottom: 1px solid #ebebeb;
}
.member-list h3{
	font-size: 1.5em;
	margin: 0;
	line-height: 1;
}
.member-list a{
	color: #000000;
}
.member-list,
.member-list p{
	font-size: 16px;
	line-height: 2;
	margin: 0;
}
.ContentBox-radius {
	width: 100%;
	float: left;
	background: #fff;
	padding: 20px;
	margin-bottom: 1px;
	border-radius: 2rem ;
	box-shadow: 1px 0px 2px #b9b9b9;
-webkit-box-shadow: 1px 0px 2px #b9b9b9;
-moz-box-shadow: 1px 0px 2px #b9b9b9;
}
.ContentBox-radius p{
	font-size: 16px;
	margin: 0;
}


/*--responsive media-quries--*/
@media(max-width:660px){

.member-headerText-B {
    margin-top: 5%;
}
}

@media(max-width:550px){
.member-headerText p{
   line-height: 1.5;
	}	
.member-headerText-B {
    margin-top: 5%;
}
.member-headerImg {
    width: 6em;
}
.member-headerImg img{
    height: 6em;
}
}
@media(max-width:500px){
.member-list {
	padding: 1.8em 10px;
}
.member-list h3{
	font-size: 1.4em;
}
.member-list,
.member-list p{
	font-size: 15px;
	line-height: 1.5;
}
	.member-headerText-B h3{
    font-size: 1.7em;
}
.ContentBox-radius {
    padding: 15px;
	}
.ContentBox-radius p{
	font-size: 15px;
	margin: 0;
}
}


@media(max-width:420px){	
.member-list {
	padding: 1.6em 10px;
}
.member-list h3{
	font-size: 1.2em;
}
.member-header {
  padding: 0.5em 0 1em 20px;
}
.member-headerImg {
  width: 5.5em;
}	
.member-headerImg img{
  height: 5.5em;
}	
.member-headerText p{
   line-height: 1.1;
	}	
.member-headerText h3 {
   font-size: 1.6em;
	}
.member-headerText-B h3 {
    font-size: 1.6em;
}
}

	
/*========= 履歷 創建/修改===========*/
.resume {
	background: #fff;
	text-align: left;
	margin: 3% 0;
	width: 100%;
	float: left;
	position:relative;
}
.statusBox {
  width: auto;
  right: 0px;
	top: 0px;
	position: absolute;
}
.statusBlok {
  width: auto;
	margin-right: 5px;
	padding: 2px 10px;
	font-size: 13px;
	color: #fff;
	border-radius: 5px;
}
.resume span{
	width: 100%;
	float: left;
	color: #D50000;
	font-size: .95em;
	margin-bottom: 1.5em;
}
.resume h1{
	font-size: 2.5rem;
	font-weight: 600;
	margin: 0;
}
.resume h2{
	font-size: 2rem;
	font-weight: 600;
	margin: 0;
}
.resume h3{
	font-size: 17px;
	color: #333;
	margin: 0;
	font-weight: bold;
}
.form-group_resume{
	margin-top:5% !important;
}
.resume input[type="text"] {
	width: 100%;
	margin: 0px;
	color: #666;
	background: none;
	padding: 12px 10px;
	outline: none;
	font-size:16px;
	border: 1px solid #ebebeb;
	margin: 3px 0 15px 0;
}
.resume input[type="number"] {
	width: 100%;
	margin: 0px;
	color: #666;
	background: none;
	padding: 12px 10px;
	outline: none;
	font-size:16px;
	border: 1px solid #ebebeb;
	margin: 3px 0 15px 0;
}
.resume input[type="date"] {
	width: 100%;
	margin: 0px;
	color: #666;
	background: none;
	padding: 12px 10px;
	outline: none;
	font-size:16px;
	border: 1px solid #ebebeb;
	margin: 3px 0 15px 0;
}
.resume textarea {
	width: 100%;
	color: #666;
	resize: none;
	background: none;
	height: 8em;
	padding: 10px;
	outline: none;
	font-size:16px;
	border: 1px solid #ebebeb;
	margin: 3px 0 15px 0;
	}
.check-area {
	width: 100%;
	float: left;
	color: #333;
	background: none;
	outline: none;
	font-size:16px;
	margin: 3px 0 15px 0;
}
.checkBox {
	width: 33.3333333%;
	float: left;
	margin: 0.375rem 0;
}
.check-area input[type="date"] {
	width: auto;
	color: #666;
	background: none;
	padding: 5px 10px;
	outline: none;
	font-size:15px;
	border: 1px solid #ebebeb;
	margin: 3px 10px 0 0;
}
.resume-list {
	width: 100%;
	float: left;
	padding: .5em  10px;
	margin: 1em 0 0;
	border-bottom: 1px solid #ebebeb;
}
.resume-list p{
	margin: .5em 0;
}
.resume-listL {
	width: 80%;
	float: left;
}
.resume-listImgBox {
	width: 100%;
	float: left;
	position: relative;
}
.resume-listLTextBox {
	font-size: 1.1em;
	bottom: 5px;
	left: 7em;
	position: absolute;
}
.resume-listR {
	width: 20%;
	float: right;
	margin-top: 2%;
	text-align: right
}
.resume-listR i{
	font-size: 1.45em;
	color: #777;
}
.reviseBox {
	width: 100%;
	float: left;	
	margin: 0 0 2em 0;
	padding: 15px;
	background: #f9f9f9;
}
.form-group {
    margin-top: 5% !important;
}
.form-group form input[type=submit] {
    color: #fff;
    padding: 13px 0px;
    font-size: 1.5em;
    cursor: pointer;
    font-weight: 600;
    border: none;
    background: #dd2727;
    outline: none;
    width: 100%;
}

/*--responsive media-quries--*/
@media(max-width:550px){
.checkBox {
	width: 50%;
}	
.form-group form input[type=submit] {
    padding: 10px 0px;
}
.resume-listLTextBox {
	left: 6em;
}
}
@media(max-width:420px){
.resume h3,
.resume-listR p,
.resume-listL p {
    font-size: 16px;
}
.resume input[type="text"] {
  padding: 8px;
  margin: 3px 0 12px 0;
	font-size: 15px;
}
.resume input[type="date"] {
	padding: 2px 10px;
  margin: 3px 0 12px 0;
	font-size: 15px;
}
.resume textarea,
.check-area {
    font-size: 15px;
}
.form-group form input[type=submit] {
    padding: 8px 0px;
    font-size: 15px;
}
.resume-listLTextBox {
    left: 5.5em;
}
}
@media(max-width:380px){
.resume input[type="text"] {
  padding: 8px;
  margin: 3px 0 12px 0;
	font-size: 14px;
}
.resume input[type="date"] {
	padding: 2px 10px;
  margin: 3px 0 12px 0;
	font-size: 14px;
}
.resume textarea,
.check-area {
    font-size: 14px;
}
	
}

/*========= 履歷 預覽===========*/
.resume-headerImg{
  width: 7em;
  height: auto;
  float: left;
  margin-right: 15px;
}
.resume-headerImg img {
  width: 100%;
  height: 7em;
  object-fit: cover;
  line-height: 0;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.resume-headerText {
  width: 70%;
  float: left;
	margin-top: 1.5%;
}
.resume-headerText h3{
  font-size: 1.8em;
  font-weight: 600;
	margin: 0;
}
.resume-headerText p{
	font-size: 18px;
	margin: 0;
}
/*--responsive media-quries--*/
@media(max-width:660px){

}

@media(max-width:550px){
.resume-headerImg {
    width: 6em;
}
.resume-headerImg img{
    height: 6em;
}
.resume-headerText h3 {
    font-size: 1.6em;
	}
.resume-headerText p {
    font-size: 16px;
}
}
@media(max-width:460px){

}


@media(max-width:420px){	
.resume-headerImg {
  width: 5.5em;
}	
.resume-headerText h3 {
   font-size: 1.8em;
	}
.resume-headerText p {
    font-size: 15px;
}
}

/*--已報名課程--*/
.myCourse {
  width: 100%;
  float: left;
	margin-top: 0.5rem;
	border: 1px solid #cbcac6;
	padding: 15px;
	background: #fff;
	border-top-left-radius: 1.5rem ;
	border-top-right-radius: 1.5rem ;
}
.myCourse-full {
  width: 100%;
  float: left;
	margin-top: 0.5rem;
	border: 1px solid #cbcac6;
	padding: 15px;
	background: #fff;
	border-radius: 1.5rem ;
}
.myCourse-btnBox {
  width: 100%;
  float: left;
	margin: 0;
	border-left: 1px solid #cbcac6;
	border-bottom: 1px solid #cbcac6;
	border-right: 1px solid #cbcac6;
	background: #fff;
	text-align: center;
	font-size: 1.2em;
	font-weight: 600;
	border-bottom-left-radius: 1.5rem ;
	border-bottom-right-radius: 1.5rem ;
}
/*--responsive media-quries--*/
@media(max-width:420px){
.myCourse-full p,
.myCourse p{
	font-size: 15px;
}	
}


/*===我的應徵===*/
.myApplyBoxL {
	width: 75% ;
	float: left;
	padding-top: 1rem;
}
.myApplyBoxL h3{
  font-size: 1.6em;
  font-weight: 600;
	margin: 0;
}
.myApplyBoxL h4{
  font-size: 1.3em;
  font-weight: 600;
	margin: 0;
	line-height: 2;
}
.myApplyBoxL p{
	color: #8F8B8B;
	margin: 0;
	line-height: 1;
	font-size: 16px;
}
.myApplyBoxR {
	width: 25% ;
	float: right;
	text-align: right;
	padding-top: 1.5%;
}
.myApplyBoxR span {
	background-color: #ea5718;
	width: 10px;
	height: 10px;
	float: right;
	border-radius: 10px;
	margin: 10px 0 0 5px;
}
.myApplyBoxR p{
	margin: 0;
	line-height: 2;	
	font-size: 16px;
}

/*--responsive media-quries--*/
@media(max-width:550px){
.myApplyBoxL h3 {
    font-size: 1.4em;
}
.myApplyBoxL h4 {
    font-size: 16px;
}
.myApplyBoxL p,
.myApplyBoxR p {
	font-size: 15px;
}
}

@media(max-width:480px){
.myApplyBoxR {
	padding-top: 1.8%;
}
.myApplyBoxL h3 {
    font-size: 1.3em;
}
.myApplyBoxL h4 {
    font-size: 15px;
}
.myApplyBoxL p,
.myApplyBoxR p {
	font-size: 14px;
}
}

 /*===== 人格測驗=====*/
.TestInfo {
	width: 100%;
	float: left;	
	background: #fff;
	padding: 15px;
	text-align: center;
	margin-bottom: 10px;
	border-radius: .5rem ;
	box-shadow: 1px 0px 2px #b9b9b9;
-webkit-box-shadow: 1px 0px 2px #b9b9b9;
-moz-box-shadow: 1px 0px 2px #b9b9b9;
}
.TestInfo img{
	width: 100%;
	height: auto;
	float: left;
}
.TestInfo h2{
	font-size: 30px;
	color: #4e4e4e;
}
.TestInfo p{
	font-size: 1.2em;
	color: #4e4e4e;
}
.TestInfo-w50{
	width: 50%;
	float: left;
	margin-top: .5em;
}
.TestInfo_btn {
	width: 100%;
	float: left;
	color: #fff;
	padding: 10px 0px;
	font-size: 1.6em;
	text-align: center;
	cursor: pointer;
	font-weight: 600;
	background: #c7541c;
	border: 3px solid #BB9137;
	outline: none;	
	border-radius: 5rem ;
	margin: 1em 0;
	}

/*--responsive media-quries--*/
@media(max-width:600px){
.TestInfo p{
	font-size: 1.1em;
}
.TestInfo_btn form input[type=submit] {
	padding: 8px 0px;
	margin: .5em 0;
	}
}
@media(max-width:500px){
.TestInfo h2{
	font-size: 24px;
}
.TestInfo p{
	font-size: 1em;
}
.TestInfo-w50{
	width: 100%;
}
}

/*-- 服務與設定--*/
.ServiceSetting {
	background: #fff;
	text-align: left;
	margin: 3% 2.5%;
	width: 95%;
	float: left;
}
.ServiceSetting h1{
	font-size: 2.5rem;
	font-weight: 600;
	margin: 0;
}
.ServiceSetting h2{
	font-size: 2.5rem;
	font-weight: 600;
	margin: 0;
}
.ServiceSetting h3{
	font-size: 17px;
	color: #333;
	margin: 0;
	font-weight: bold;
}
.ServiceSetting-list {
	width: 100%;
	float: left;
	padding: .5em  10px;
	margin: 1em 0 0;
}
.ServiceSetting-listL {
	width: 75%;
	float: left;
}
.ServiceSetting-listR {
	width: 25%;
	float: left;
	margin-top: 25px;
	text-align: right;
}
.ServiceSetting-list_arrow {
	width: auto;
	float: right;
	padding-right: 15px;
}
.ServiceSetting-list_arrow img{
	float: right;
	width: 18px;
	height: 18px;
	display: flex;
  align-items: center;
}

/*--responsive media-quries--*/
@media(max-width:550px){
.ServiceSetting h2{
	font-size: 2.2rem;
	font-weight: 600;
	margin: 0;
}
}
@media(max-width:420px){
.ServiceSetting h3,
.ServiceSetting p {
    font-size: 16px;
}
.ServiceSetting-listR {
    margin-top: 10px;
}
}


/*========= Toggle Switch 撥動開關 =======*/

.ToggleSwitch{
	float: right;
	text-align: right;
	height: 0;
}
.ToggleSwitch input[type=checkbox]{
  height: 0;
  width: 0;
  visibility: hidden;
}
.ToggleSwitch label {
  cursor: pointer;
  text-indent: -9999px;
	top: -25px;
  width: 68px;
  height: 34px;
  background: #9a9b9a;
  display: block;
  border-radius: 100px;
  position: relative;
}
.ToggleSwitch label:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

.ToggleSwitch input:checked + label {
  background: #bada55;
}

.ToggleSwitch input:checked + label:after {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}

.ToggleSwitch label:active:after {
  width: 68px;
}

/*--responsive media-quries--*/
@media(max-width:550px){
	.ToggleSwitch label {
    top: -22px;
	}
.ToggleSwitch label {
    width: 56px;
    height: 28px;
}
.ToggleSwitch label:after {
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
}

.ToggleSwitch input:checked + label:after {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}

.ToggleSwitch label:active:after {
  width: 56px;
}
}