#CMain { padding: 0px 25px 0px; }
.CMRight { width: 80%; }
.CMRight .CMRContent .CMContent { margin: 0 auto; width: 100%; }
.CMRight .CMRContent .CMContent:after { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }

#Main.login .CMRight { width: 60%; }
#Main.login .CMRight .CMRContent .CMTitle { margin: 0 auto; width: 100%; max-width: 800px; }
#Main.login .CMRight .CMRContent .CMContent { margin: 0 auto; width: 100%; max-width: 800px; }

#Main.terms .CMRight { width: 60%; }
#Main.terms .CMRight .CMRContent .CMTitle { margin: 0 auto; width: 100%; }
#Main.terms .CMRight .CMRContent .CMContent { margin: 0 auto; width: 100%; }

#Main.forgetpw .CMRight { width: 60%; }
#Main.forgetpw .CMRight .CMRContent .CMTitle { margin: 0 auto; width: 100%; max-width: 800px; }
#Main.forgetpw .CMRight .CMRContent .CMContent { margin: 0 auto; width: 100%; max-width: 800px; }

#Main.changepw .CMRight { width: 60%; }
#Main.changepw .CMRight .CMRContent .CMTitle { margin: 0 auto; width: 100%; max-width: 800px; }
#Main.changepw .CMRight .CMRContent .CMContent { margin: 0 auto; width: 100%; max-width: 800px; }

#Main.basic .CMRight .CMRContent .CMContent .Item { margin: 15px 0px; }
#Main.basic .CMRight .CMRContent .CMContent .Item:after { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }
#Main.basic .CMRight .CMRContent .CMContent .Item .T { float: left; width: 150px; padding: 5px; padding-right: 10px; font-size: 18px; color: #fff9b2; text-align: right; border-right: solid 3px #072239; }
#Main.basic .CMRight .CMRContent .CMContent .Item .T .Eng { display: block; font-size: 13px; color: #a2a084; }
#Main.basic .CMRight .CMRContent .CMContent .Item .C { float: left; width: calc( 100% - 150px ); padding: 5px; padding-left: 10px; font-size: 18px; color: #FFFFFF; word-break: break-all; }

#Main .CMRight .CMRContent .CMTitle { position: relative; font-size: 25px; line-height: 60px; }
#Main .CMRight .CMRContent .CMTitle .Eng { padding-left: 5px; font-size: 20px; color: #DDDDDD; }
#Main .CMRight .CMRContent .CMTitle .MemberTitle { font-size: 17px; line-height: normal; color: #fff9b2; }
#Main .CMRight .CMRContent .CMTitle .CreateOpen { position: absolute; right: 0px; bottom: 12px; padding: 4px; padding-left: 10px; background-color: #2cab74; font-size: 14px; }
#Main .CMRight .CMRContent .CMTitle .CreateOpen .material-icons { transition: .3s; }
#Main .CMRight .CMRContent .CMTitle .CreateOpen .Eng { font-size: 12px; color: #FFFFFF; }
#Main .CMRight .CMRContent .CMTitle .CreateOpen.Open .material-icons { transform: rotate(180deg); }
#Main .CMRight .CMRContent .CMContent form.CreateEditForm { display: none; margin: 10px 0px 20px; padding: 0px 0px 20px; border-bottom: solid 1px #4577aa; }
#Main .CMRight .CMRContent .CMContent form.CreateEditForm.Open { display: block; }
#Main .CMRight .CMRContent .CMContent form.CreateEditForm .formItemTitle { margin: 5px 0px; font-size: 18px; color: #15ce7e; }
#Main .CMRight .CMRContent .CMContent form.CreateEditForm input[type="file"] { margin: 5px 0px; width: 100%; padding: 5px; }
#Main .CMRight .CMRContent .CMContent form.CreateEditForm .L { margin: 5px 2px 5px 0px; width: calc( 50% - 4px ); padding: 10px; }
#Main .CMRight .CMRContent .CMContent form.CreateEditForm .R { margin: 5px 0px 5px 2px; width: calc( 50% - 4px ); padding: 10px; }
#Main .CMRight .CMRContent .CMContent form.CreateEditForm input[type="text"], 
#Main .CMRight .CMRContent .CMContent form.CreateEditForm input[type="email"],
#Main .CMRight .CMRContent .CMContent form.CreateEditForm input[type="number"],
#Main .CMRight .CMRContent .CMContent form.CreateEditForm textarea,
#Main .CMRight .CMRContent .CMContent form.CreateEditForm select { margin: 5px 0px; width: 100%; padding: 10px; }
#Main .CMRight .CMRContent .CMContent form.CreateEditForm select, 
#Main .CMRight .CMRContent .CMContent form.CreateEditForm input[type="date"] { color: #666666; }
#Main .CMRight .CMRContent .CMContent form.CreateEditForm select.Have, 
#Main .CMRight .CMRContent .CMContent form.CreateEditForm input[type="date"].Have { color: #000000; }
#Main .CMRight .CMRContent .CMContent form.CreateEditForm .FormFun { margin: 3px 0px; width: 100%; text-align: right; }
#Main .CMRight .CMRContent .CMContent form.CreateEditForm .FormFun input[name="Send"] { padding: 6px 8px ; background-color: #6ca415; }
#Main .CMRight .CMRContent .CMContent form.CreateEditForm .FormFun input[name="Cancel"] {  padding: 6px 8px; background-color: #7b7b7b; }

.CardList { margin-top: 15px; }
.CardList:after { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }
.CardList .CListItem { float: left; width: calc( ( 100% - 30px * 3 ) / 4 ); margin-bottom: 30px; margin-right: 30px; padding: 10px 8px; border-radius: 8px; /*background-color: rgba( 255, 255, 255, 0.7 );*/ background-image: linear-gradient(45deg, rgb(158 192 208 / 0.8) 0%, rgb(255 255 255 / 0.8) 100%); box-shadow: 0px 3px 10px rgb(0 0 0 / 50%); }
.CardList .CListItem:nth-child(4n+4) { margin-right: 0px; }
.CardList .CListItem div[f="Image"] { width: 100%; height: 120px; background-size: 100% auto; background-repeat: no-repeat; background-position: center center; }
.CardList .CListItem div[f="Name"] a { color: #00375f; }
.CardList .CListItem div[f="Name"] a:hover { text-decoration: underline; }
.CardList .CListItem.Img div[f="Name"] { margin: 5px 0px; font-size: 17px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.CardList .CListItem.Img div[f="ExpiryDate"] { margin-bottom: 5px; font-size: 15px; color: #000000; }
.CardList .CListItem.Img div[f="ExpiryDate"] .Eng { font-size: 12px; color: #333333; }
.CardList .CListItem.Img div[f="ExpiryDate"] .Expired { color: #F00; }
.CardList .CListItem.Img div[f="UseYear"] { margin-bottom: 5px; font-size: 15px; color: #000000; }
.CardList .CListItem.Img div[f="UseYear"] .Eng { font-size: 12px; color: #333333; }
.CardList .CListItem.Img div[f="UseYear"] .Expired { color: #F00; }
.CardList .CListItem.Doc div[f="Name"] { height: 153px; font-size: 29px; color: #00375f; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; }
.CardList .CListItem.Doc div[f="Name"] span { font-size: 20px; color: #333333; }
.CardList .CListItem.Doc div[f="UseYear"] { margin-bottom: 5px; font-size: 15px; color: #000000; }
.CardList .CListItem.Doc div[f="UseYear"] .Eng { font-size: 12px; color: #333333; }
.CardList .CListItem.Doc div[f="UseYear"] .Expired { color: #F00; }
.CardList .CListItem div.ButtonDiv { width: 100%; padding: 3px 0px; }
.CardList .CListItem div.ButtonDiv:after { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }
.CardList .CListItem div[f="Fun"] { float: left; }
.CardList .CListItem div[f="Fun"] button { padding: 0px 2px; border-radius: 3px; background-color: #145271; color: #FFF; font-size: 13px; line-height: 15px; }
.CardList .CListItem div[f="Fun"] button:hover { cursor: pointer; }
.CardList .CListItem div[f="Fun"] button[name="DW"] { background-color: #145271; }
.CardList .CListItem div[f="Fun"] button[name="DW"]:hover { background-color: #0a608c; }
.CardList .CListItem div[f="Fun"] button[name="DEL"] { background-color: #920000; }
.CardList .CListItem div[f="Fun"] button[name="DEL"]:hover { background-color: #bf0000; }
.CardList .CListItem div[f="Fun"] button span.material-icons {  }
.CardList .CListItem div[f="Date"] { float: right; font-size: 14px; color: #333333; line-height: 25px; }


.CMContent .CMCTitle { margin: 5px 0px 15px; font-size: 25px; color: #FFFFFF; }
.CMContent .CMCTitle .material-icons { font-size: 36px; margin-right: 8px; }
.CMContent table { width: 100%; border-collapse: collapse; border-top: solid 1px #052c45; }

.CMContent table thead { border-top: solid 1px #4577aa; border-bottom: solid 2px #0b1222; }
.CMContent table thead tr {  }
.CMContent table thead tr th { padding: 12px 8px; font-size: 15px; color: #fff9b2; font-weight: normal; }
.CMContent table thead tr th .Eng { display: block; font-size: 13px; }
.CMContent table thead tr th[f="Fun"] { width: 120px; }
.CMContent table tbody {  }
.CMContent table tbody tr { border-bottom: solid 1px #052c45; }
.CMContent table tbody tr:hover { cursor: pointer; background-color: rgb(12 47 78 / 0.5); color: #ff9c15; }
.CMContent table tbody tr.Edit { background-color: rgb(0 137 255 / 18%); }
.CMContent table tbody tr td { padding: 12px 10px; vertical-align: top; color: #FFFFFF; }
.CMContent table tbody tr td[f="Fun"] button { padding: 4px; padding-left: 10px; background-color: #2cab74; font-size: 14px; }


.CMContent table thead tr th[f="RecruitType"] {  }
.CMContent table thead tr th[f="RecruitName"] {  }
.CMContent table thead tr th[f="WorkExperience"] {  }
.CMContent table thead tr th[f="RecruitSalary"] {  }
.CMContent table thead tr th[f="RecruitNum"] { width: 100px; }

.CMContent table tbody tr td[f="Name"] {  }
.CMContent table tbody tr td[f="AddDate"] { text-align: right; }
.CMContent table tbody tr td div[f="Tag"] { margin: 10px 0px; }
.CMContent table tbody tr td div[f="Tag"]:after { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }
.CMContent table tbody tr td div[f="Tag"] a { margin: 0px 5px 0px 0px; padding: 5px 8px; border-radius: 5px; font-size: 13px; background-color: #007e99; }
.CMContent table tbody tr td div[f="Tag"] a:hover { background-color: #19a0bd; }


.CMRightOther { display: none; }

.FormItem { margin: 0px 0px 20px; width: 100%; }
.FormItem a { text-decoration: underline; }
.FormItem .Title { padding-bottom: 8px;color: #FFFFFF; font-size: 18px; }
.FormItem .Title .Eng { padding-left: 5px; font-size: 15px; color: #AAAAAA; }
.FormItem .Content { width: 100%; }
.FormItem .Content img#ChkImg { float: left; margin-right: 5px; border-radius: 5px; }
.FormItem .Content input[type="text"], .FormItem .Content input[type="password"] { width: 100%; }
::-webkit-input-placeholder { color: #666666; }
:-ms-input-placeholder { color: #666666; }
::placeholder { color: #666666; }

.FormItem .Content button[type="button"] { margin-right: 5px; padding: 4px; background-color: #2cab74; font-size: 14px; }
.FormItem .Content button[type="button"]:hover { background-color: #179860; cursor: pointer; }

.MemberBtn { width: 100%; text-align: center; }
.MemberBtn button[type="submit"] { background-color: #6ca415; }
.MemberBtn button[type="submit"]:hover { background-color: #558c00; cursor: pointer; }
.MemberBtn button[type="button"] { background-color: #6ca415; }
.MemberBtn button[type="button"]:hover { background-color: #558c00; cursor: pointer; }

.CMContent .Menu { padding: 15px 0px; }
.CMContent .Menu ul { list-style-type: none; }
.CMContent .Menu ul:after { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }
.CMContent .Menu ul li { float: left; margin: 0px 5px; }
.CMContent .Menu ul li a { padding: 8px 15px; border-radius: 5px; background-color: #007e99; font-size: 16px; }
.CMContent .Menu ul li a:hover { background-color: #006075; }



@media screen and ( max-width: 1700px ) {
.CMRight { width: 85%; }

.CardList .CListItem { width: calc( ( 100% - 30px * 2 ) / 3 ); }
.CardList .CListItem:nth-child(3n+3) { margin-right: 0px; }
.CardList .CListItem:nth-child(4n+4) { margin-right: 30px; }

}


@media screen and ( max-width: 1440px ) {
.CMRight { width: calc( 100% - 230px ); }
}


@media screen and ( max-width: 1180px ) {
.CMRight { width: calc( 100% - 200px ); }

.CardList .CListItem { width: calc( ( 100% - 30px * 1 ) / 2 ); }
.CardList .CListItem:nth-child(2n+2) { margin-right: 0px; }
.CardList .CListItem:nth-child(3n+3) { margin-right: 30px; }
.CardList .CListItem:nth-child(4n+4) { margin-right: 30px; }

}


@media screen and ( max-width: 1024px ) { 
#Main.login .CMRight { width: 100%; }
#Main.terms .CMRight { width: 100%; }
#Main.forgetpw .CMRight { width: 100%; }
#Main.changepw .CMRight { width: 100%; }

.CMRight { width: 100%; }

.CardList .CListItem div[f="Image"] { height: 150px; }
.CardList .CListItem.Doc div[f="Name"] { height: 183px; }

}


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

#Main .CMRight .CMRContent .CMTitle { font-size: 20px; line-height: 55px; }
#Main .CMRight .CMRContent .CMTitle .Eng { display: inline; font-size: 15px; }

#Main .CMRight .CMRContent .CMTitle .CreateOpen {  }

.CardList .CListItem { width: 100%; }
.CardList .CListItem:nth-child(2n+2) { margin-right: 0px; }
.CardList .CListItem:nth-child(3n+3) { margin-right: 0px; }
.CardList .CListItem:nth-child(4n+4) { margin-right: 0px; }

.CardList .CListItem div[f="Image"] { height: 180px; }
.CardList .CListItem.Doc div[f="Name"] { height: auto; }

}

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

.CardList .CListItem div[f="Image"] { height: 150px; }

}