/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a{
	text-decoration: none;
}


img{
	max-width: 100%;
	height: auto;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}



/*css resset end*/


/* -----------------登入頁-------------------- */
.login{
	width: 100%;
	display: flex;
	margin-top: 80px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #E9E9E9;
}

.kv{
	width: 50%;
	height: 640px;
	background-image: url(/MA/job-platform/KV-W.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.captcha {
	width: 100%;
	padding: 0;
	min-height: 70px;
	&.signup-captcha {
		margin-top: 50px;
		margin-bottom: 6px;
	}
}

.login-card{
	width: 50%;
	background-color: white;
	padding: 40px;
}

.login-card h2{
	text-align: center;
	margin-bottom: 16px;
}

/* login-form */
.login-form{
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 40px 0px 40px 0px;
}

@media (max-width: 1023px) {
	.login{
		flex-direction: column;
		max-width: 480px;
		margin: 0 auto;
		margin-top: 40px;
	}

	.login-card{
		width: 100%;
		padding: 40px;
	}
	.kv{
		width: 100%;
		height: 180px;
		background-image: url(../IMG/login-banner_mobile.png);
	}
}

@media (max-width: 767px) {
	.login{
		padding: 0px;
	}

	.login-form{
		gap: 16px;
	}

	.kv{
		height: 120px;
	}
	.login-card{
		width: 100%;
		padding: 40px 24px;
	}
	.login-card h2{
		margin-bottom: 24px;
	}
  }


/* -------------註冊頁-------------------- */
.signup{
	width: 100%;
	
	background-color: white;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 auto;
}

.signup .primary-btn{
	margin-top: 24px;
}

.signup ul{
	list-style: none;
  	margin-top: 4px;
}

.signup li{
	display: flex;
	gap: 4px;
	align-items: center;
	justify-content: flex-start;
}

.id-spacing{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.password-wrapper {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}




@media (max-width: 767px) {
	.signup{
		padding: 40px 16px;
	}
	.step-title{
		margin-top: 24px;
	}
  }

  /* -------------註冊結果頁-------------------- */

  .result{
	max-width: 768px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px;
	background-color: white;
  }

  .result img{
	width: 207px;
  }

  .result h3{
	color:#339555 ;
	margin-top: 24px;
	margin-bottom: 16px;
  }

  .result-btn{
	margin-top: 64px;
	width: 312px;
  }

  .result p{
	margin-bottom: 40px;
  }

  @media (max-width: 767px) {
	.result{
		padding: 40px 16px;
	}
	.result-btn{
		margin-top: 48px;
		width: 100%;
	}
  }

  /* -------------首頁-------------------- */




.container-block{
    display: flex;
    gap: 40px;
	width: 100%;
}

.side-icon{
	width: 20px;
	height: 20px;
}

.content{
	width: 100%;
}

@media (max-width: 1439px) {
	.container-block{
		margin-top:24px ;
	}
  }

@media (max-width: 1023px) {
	
	.container-block{
		gap: 0;
	}
  }

/* 職缺卡片 */
.hiring-card{
	width: 100%;
	align-items: center;
	cursor: pointer;
	color: #323232;
	display: block;
	padding: 16px 24px;
	background-color: white;
	transition: border 0.3s ease;
	border: 1px solid #E9E9E9;
	border-radius: 16px;
}

.hiring-card:hover {
	border: 1px solid #267CC9;
}

.hiring-card span{
	color: #323232;
	font-weight: 400;
	font-size: 15px;
	padding-right: 32px;
	display: inline-block;
}

.job-card{
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.job{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin: 8px 0px;
}

.job img{
	width: 24px;
	height: 24px;
}

.submitted-container{
    display: flex;
    align-items: center;
    gap: 8px;
    color: #737373;
    font-weight: 400;
}

.type{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
}

@media (max-width: 767px) {
	.hiring-card:hover{
		border: 1px solid #E9E9E9;
	}
}



/* ----------應徵工作-------------------- */
.apply{
	padding: 40px 64px;
	max-width: 768px;
	margin: 0 auto;
	background-color: white;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.apply-item{
	display: flex;
	flex-direction: column;
}


.apply-content{
	padding: 12px 0px 0px 22px;
}

.apply-item ul{
	padding-left: 18px;
}

@media (max-width: 767px) {
	.apply{
		padding: 24px 16px;
	}
}
/* ---------應徵欄位-------------------- */


.reason-block textarea,.intern-block textarea,.application-block textarea{
	width: 100%;
	padding: 12px;
	background-color:#F0F0F0 ;
	border: 1px solid #E9E9E9;
	border-radius: 8px;

}

.applyinfo-block{
	display: flex;
	flex-direction: column;
	gap: 64px;
	margin: 40px 0px 40px 0px;
}

.reason-block{
	padding-left: 22px;
	margin-top: 24px;
}

.reason-block .input-container{
	margin-top: 24px;
}

.reason-block .star-end .input-container{
	margin-top: 0px;
}

.applyinfo-item p{
	padding-left: 22px;
	margin-top: 8px;
}
.applyinfo-item ul{
	color: #737373;
	list-style-type: disc;
	padding-left: 40px;
}

.selection-group {
    display: flex;
    flex-direction: column;
	padding-left: 22px;
	gap: 16px;
	margin-top: 24px;
}

.selection-card {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.selection-input {
    display: none;
}

.card-box {
	width: 100%;
    cursor: pointer;
    padding: 20px 24px;
    background-color: white;
	border: 1px solid #E9E9E9;
    border-radius: 8px;
    transition: background-color 0.3s, color 0.3s;
    color: #737373;
    display: flex;
    align-items: center;
    justify-content: space-between;
	transition: border 0.3s ease;
}

.card-box:hover {
	border: 1px solid #005BAC;
	transition: color 0.3s ease;
}

.selection-input:checked + .card-box {
	border: 1px solid #005BAC;
    color: #323232;
}

.tick-mark {
    width: 20px;
    height: 20px;
    display: none; /* 預設隱藏 */
}

.selection-input:checked + .card-box .tick-mark {
    display: inline-block;
}

.applyinfo-item .radio-option{
	margin-top: 24px;
	padding-left: 22px;
}

/* ----------我的履歷-------------------- */

.resume{
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
}


.resume-card{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: white;
	padding: 16px 24px;
	border-radius: 16px;
	border: 1px solid #E9E9E9;
}

.resume-card:hover{
	border: 1px solid #267CC9;
	transition: border 0.3s ease;
}

.resume-name{
	display: flex;
	gap: 8px;
}

.resume-delete:hover{
	transform: scale(1.2);
    transition: transform 0.3s ease;
}

.lead{
	display: flex;
	gap: 24px;
	align-items: center;
}

.edit-block{
	display: flex;
	flex-direction: row;
	gap: 8px;
	width: 100%;
}

.edit-block button{
	padding: 8px 16px;
}

.edit-block .secondary-btn,.edit-block .primary-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.last-update{
	margin-top: 8px;
	display: flex;
	align-items: center;
	font-weight: 400;
	gap: 4px;
}

.preview-edit .delete:hover img{
	content: url(../IMG/trash-icon-active.svg);
}

.edit-block .download:hover img,.preview-edit .download:hover img{
	content: url(../IMG/download-icon-active.svg);
}

.edit-block .edit:hover img{
	content: url(../IMG/edit-icon-active.svg);
}

@media (max-width: 767px) {
	.resume-card{
		display: block;
	}

	.resume-card:hover{
		border: 1px solid #E9E9E9;
	}

	.edit-block{
		margin-top: 16px;
	}
}
/* ----------新增履歷-------------------- */

.addnew .primary-btn{
	margin-top: 40px;
}

/* ----------密碼變更-------------------- */

.password-card{
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	background-color: white;
	border-radius: 16px;
	border: 1px solid #E9E9E9;
}

@media (max-width: 767px) {
	.password-card{
		padding: 24px 16px;
	}
}

/* ----------信箱驗證-------------------- */

.email-card{
	display: flex;
	flex-direction: column;
	padding: 40px;
	background-color: white;
	border-radius: 16px;
	border: 1px solid #E9E9E9;
	gap: 40px;
}


.ver{
	width: 100%;
	display: flex;
	gap: 8px;
	align-items: flex-end;
}


.ver-code button{
	width: auto;
	height: 48px;
	font-size: 16px;
	white-space: nowrap;
}

@media (max-width: 767px) {
	
	
}

@media (max-width: 400px) {
	.ver{
		flex-direction: column;
	}
	.ver-code .primary-btn{
		width: 100%;
	}
}
/* ----------忘記密碼--------- */

.get-password{
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ------履歷預覽------- */
.preview-edit{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	gap: 8px;
	width: 100%;
}

.preview-edit button{
	width: fit-content;
}

.update-time{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 32px;
}

.update-time p{
	width: 100%;
	text-align: right;
	color: #737373;
}

.person-info{
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 24px;
}

.person-info img{
	width: 233px;
}

.list-item,.list-basecolor{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.list-basecolor{
	padding: 12px 12px;
	background-color: #FAFAFA;
}

.list-basecolor span{
	color: #737373;;
}

.list-basecolor img{
	margin-left: 8px;
}

.name{
	display: block;
	margin-top: 24px;
	font-size: 24px;
	color: #323232;
	font-weight: 700;
}


.detail-info{
	margin-top: 4px;
}

.right-column{
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 50%;
}

.section-spacing{
	margin-top: 40px;
}

.list-spacing{
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 16px;
	padding-left: 22px;
}

.family-title h6,.family-title p{
	display: inline;
}

.family-title p{
	margin-left: 4px;
}


.content-block{
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.title-with-content{
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-left: 22px;
}

.divider{
	width: 1px;
	height: 1em;
	background-color: #323232;
}

@media (max-width: 767px) {
	

	.info-photo{
		flex-direction: column;
	}

	.photo{
		width: 216px;
	}

	.person-info{
		gap: 48px;
		justify-content: center;
	}

	.person-info{
		flex-direction: column;
		gap: 20px;
		}

		.left-column{
			margin: 0 auto;
			text-align: center;
		}

		.left-column img{
			width: 40vw;
			min-width: 138px;
		}


		.left-column .preview-spacing{
			justify-content: center;
		}

		.right-column{
			width: 100%;
			padding-left: 22px;
			padding-top: 20px;
			border-top: 1px solid #E9E9E9;
		}
		.update-time{
			margin: 0;
		}
}

	

		






/* ----------編輯履歷--------- */

.resume-content{
	background-color: white;
	padding: 40px 64px;
	border-radius: 16px;
	border: 1px solid #E9E9E9;
	display: flex;
	flex-direction: column;
	gap: 40px;
}


.delete-btn{
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

.delete img{
	width: 16px;
}

.delete-btn button{
	background: rgba(255, 255, 255, 0);
	display: flex;
	justify-content: flex-end;
	border: none;
	cursor: pointer;
}

.step-side{
	width: 296px;
	padding: 32px 80px;
	background-color: white;
	border-radius: 16px;
	border: 1px solid #E9E9E9;
	position: sticky;
  	top: 120px;
  	height: fit-content;
}

.resume-rename{
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.info-photo{
	display: flex;
	gap: 24px;
	margin-bottom: 24px;
}

  .hidden {
    display: none !important;
  }

.step-side li{
	text-align: center;
	color: #737373;
	margin-bottom: 28px;  
	cursor: pointer;
	border-radius: 8px;
	transition: color 0.3s ease;
}


.step-side ul {
	list-style: none; 
	padding-left: 0;
	margin: 0;
	position: relative;
}

.step-side ul::before {
	content: '';
	position: absolute;
	display: block;
	top: 10px;
	left: 0;
	height: 95%;
	border-left: 1px solid #BCBCBC;
}
  
  .step-side li {
	position: relative;
	font-size: 20px;
	width: 108px;
	text-align: left;
	color: #737373;
	margin-bottom: 40px;
	cursor: pointer;
	transition: color 0.3s ease;
	padding-left: 20px;
  }
  
  .step-side li::after {
	content: '';
	position: absolute;
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1.5px solid #BCBCBC;
	background-color: white;
	top:8px;                
	left:-6px;
  }

  .step-side li::before {
	content: '';
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border-radius: 50%;
	display: block;
	top: 5px;                
	left: -9px;
	transition: color 0.3s ease;
  }

  

.step-side li.active::before {
	background-color: #ffd7bd;
}  

.step-side li:hover {
	color: #EB6100;  
	font-weight: 500; 
}

.step-side li.active::after {
	background-color: #EB6100;
	border: none;
  }

.step-side li.active {
	color: #EB6100;  
	font-weight: 500; 
  }

.photo{
	position: relative;
	min-width: 216px;
	height: 270px;
	border: 1px dashed #005BAC;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}



.button-mask{
	position: absolute;
	bottom: 0;
	background-color: rgba(250, 250, 250, 0.90);
	width: 100%;
	padding: 8px 12px;
	display: flex;
	justify-content: center;
}

.icon-primary-btn {
    background-color: #005BAC;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    border: none;
    cursor: pointer;
	justify-content: center;
    transition: opacity 0.3s ease-in-out;
	margin-bottom: 0px;
}



#preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hidden {
    display: none;
}

.icon-primary-btn:hover{
	background-color: #00539D;
}



.photo button{
	width: 136px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.phone{
	display: flex;
	gap: 8px;
	width: 100%;
}

.angle-right{
    width: 24px;
    height: 24px;
}

.area{
    width: 148px;
}


.address-container{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.personal-info{
	padding-left: 22px;
}

.layout-grid{
	display: flex;
	gap: 24px;
}

.resume-grid{
	display: flex;
	flex-direction: column;
	width: 100%;
}



.under-line{
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-bottom: 40px;
	border-bottom: 1px solid #E9E9E9;
}

.gray-line{
	width: 100%;
	height: 1px;
	background-color: #e9e9e9;
}

.education-card,.english-card,.else-test-card,.member-card,.work-card,.inter-card,.certificate-card,.recommender-card,.application-card,.other-card,.info-card{
	padding: 32px 64px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-bottom: 24px;
	border: 1px solid #E9E9E9;
	border-radius: 16px;
	background-color: white;
}

.info-card{
	margin-top: 20px;
}

.education-background,.english,.else-test,.family,.work-experience,.intern,.certificate,.recommender,.application,.other{
	padding-left: 22px;
	margin-top: 20px;
}

.english .under-line{
	border-bottom: none
}

.notification{
	color: #EB6100;
	padding-left: 22px;
}

.applied-warn {
	color: #dc3545;
	
	font-weight: 500;
}

.remove-button {
  background-color: #dc3545;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
}


@media (max-width: 1439px) {
	.education-card,.english-card,.else-test-card,.member-card,.work-card,.inter-card,.certificate-card,.recommender-card,.application-card,.other-card,.info-card{
		padding: 24px 40px;
	}
}

@media (max-width: 1280px) {
	.step-side{
	width: 250px;
	}

	.resume-content{
		padding: 32px 48px;
	}
}
@media (max-width: 767px) {

	.education-card,.english-card,.else-test-card,.member-card,.work-card,.inter-card,.certificate-card,.recommender-card,.application-card,.other-card,.info-card{
		padding: 24px 16px;
	}

	.resume-content {
		padding: 24px 16px;
	}

	.resume-grid{
		margin-top: 24px;
	}

	.preview-edit{
		width: 48px;
		position: fixed;
		bottom: 16px;
		right: 16px;
		justify-content: flex-start;
		flex-direction: column;
		gap: 8px;
		z-index: 9999;
	}

	.preview-edit button {
		height: 48px;
		width: 48px;
		border-radius: 8px; 
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
  	}

	.preview-edit .delete ,.preview-edit .download{
		background-color: white;
	}


	.preview-edit button span {
    	display: none;
  	}

	.preview-edit button img {
    width: 20px;
    height: 20px;
  }

}


 

/* ------upload-input------- */




.file-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
	padding: 12px 16px;
	border: 1px dashed #005BAC;
	border-radius: 8px;
}

input[type="file"] {
    display: none; 
}

.custom-button,.remove-button {
    background-color: #005BAC;
    color: white;
    padding: 6px 16px;
    cursor: pointer;
    border-radius: 8px;
    font-size: 15px;
    text-align: center;
	transition: background-color 0.3s ease;
	font-weight: 500;
	white-space: nowrap;
	margin-bottom: 0px;
	border: none;
}

.remove-button{
	background-color: transparent;
	border: 1px solid #005BAC;
	color: #005BAC;
	display: none;
	transition: all 0.2s ease;
}

.remove-button:hover{
	background-color: #005BAC;
	color: white;
}

.custom-button:hover {
    background-color: #00539D;
}

#file-name,#file-name-proof,#file-name-license {
    flex-grow: 1;
    margin-right: 12px;
    color: #666;
    font-size: 16px;
}
.file-action {
	display: flex;
	gap: 8px;
}

#upload-mask {
  font-weight: 400; 
}


.file-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(50, 50, 50, 0.95);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  border-radius: 6px;
  z-index: 1;
  display: none;
}

.file-alert{
	text-align: left;
}



@media (max-width: 767px) {

	.file-wrapper {
		flex-direction: column;
		gap: 8px;
	}


	.file-action,.custom-button,.remove-button{
		width: 100%;
	}
}


.store{
	padding-left: 22px;
}

@media (max-width: 1023px) {
	.step-side{
		display: none;
	}
}


@media (max-width: 767px) {
	.result p{
	text-align: center;
}
}



a:hover .side-icon {
    animation: shake 0.6s ease-in-out 1;
}

@keyframes shake {
    0%, 100% {
        transform: rotate(0) translateX(0);
    }
    25% {
        transform: rotate(10deg) translateX(-5px);
    }
    50% {
        transform: rotate(-10deg) translateX(5px);
    }
    75% {
        transform: rotate(10deg) translateX(-5px);
    }
}

@media (max-width: 1023px) {
	a:hover .side-icon {
		animation: none;
	}
}