.mt10{margin-top: 10px}
.mt20{margin-top: 20px}
.mt30{margin-top: 30px}
.mt40{margin-top: 40px}
.mt50{margin-top: 50px}

.tct{text-align: center;}

/* font size */
.f14{font-size: 14px}
.f15{font-size: 15px}
.f16{font-size: 16px}
.f17{font-size: 17px}
.f18{font-size: 18px}
.f19{font-size: 19px}
.f20{font-size: 20px}
.f22{font-size: 22px}
.f24{font-size: 24px}
.f26{font-size: 26px}
.f28{font-size: 28px}
.f30{font-size: 30px}
.f32{font-size: 32px}
.f34{font-size: 34px}
.f36{font-size: 36px}
.f38{font-size: 38px}
.f40{font-size: 40px}
.f50{font-size: 50px}
.f60{font-size: 60px}


.empRef_wrap .header{letter-spacing: -.5px;background: #e4f8ff;color: #003281;padding-top: 50px;overflow: hidden}
.empRef_wrap .header h3{font-weight:400;padding-left: 95px;position: relative;}
.empRef_wrap .header h3:before{content: '';display: block;background: url(../images/empRef/job_ico.png) no-repeat;width: 89px;height: 64px;position: absolute;left: 0;top: 50%;transform: translateY(-50%)}
.empRef_wrap .header .f22{color:rgba(0, 50, 129, 0.8)}
.empRef_wrap .header .bottom{background: #caf1ff;padding: 20px 0;margin-top: 120px}
.empRef_wrap .header .bottom p{font-weight: 500}
.empRef_wrap .header > .containerNew:nth-child(1):after{content: '';display: block;background: url(../images/empRef/top_bg.png) no-repeat;width: 705px;height: 283px;position: absolute;right: -100px;bottom: -180px}
.empRef_wrap .header .f15{font-weight: 500}
.empRef_wrap .header .f14{font-weight: 400}
.empRef_wrap .header .bg_pink {background: #ff4d8c;color: #fff;padding: 0 5px;border-radius: 30px}
.empRef_wrap .white_box{border: 1px solid #e6e6e6;border-radius: 10px;padding: 30px;;background: #fff}
.empRef_area .item{margin: 50px 0}
.empRef_area .item .er_tit{font-size: 24px;font-weight: 500;margin-bottom: 20px;position: relative;padding-left: 45px;}
.empRef_area .item .er_tit:before{content: '';display: block;background: url(../images/empRef/mv_ico.png) no-repeat;width: 36px;height: 30px;position: absolute;left: 0;top: 50%;transform: translateY(-50%)}
.empRef_area .item .white_box{display: flex;justify-content: space-between}
.empRef_area .item .white_box > div{display: flex;align-items: flex-start;justify-content: space-between;width: calc(50% - 10px)}
.empRef_area .item .white_box > div .img{border-radius: 10px;overflow: hidden;width: 160px}
.empRef_area .item .white_box > div .img.imgBorder{border: 1px solid #e6e6e6}
.empRef_area .item .white_box > div .img img{display: block;width: 100%}
.empRef_area .item .white_box > div .txt{width: calc(100% - 180px);display: flex;flex-direction: column;align-items: flex-start;height: 100%}
.empRef_area .item .white_box .txt .tit{font-weight: 700;}
.empRef_area .item .white_box .txt .desc{margin: 10px 0;font-weight: 400;color: #666;transition: all 0.3s;}
.empRef_area .item .white_box .txt .go_link {background: #003281;color: #fff;padding: 5px 10px;border-radius: 5px;margin-top: auto;min-width: 90px}
.empRef_area .item .white_box .txt .go_link:hover,
.empRef_area .item .white_box .txt .go_link:active,
.empRef_area .item .white_box .txt .go_link:focus{text-decoration: underline;}


.empRef_wrap .empRef_way{background: #fff0d5;padding: 60px 0;position: relative;}
.empRef_wrap .empRef_way .top{text-align: center;margin-top: -60px}
.empRef_wrap .empRef_way h4{background: #ff4d8c;display: inline-block;color: #fff;font-weight: 400;padding: 15px  40px;border-radius: 0 0 15px 15px;}
.empRef_wrap .empRef_way .flex-box{margin-top: 40px;display: flex;justify-content: space-between}
.empRef_wrap .empRef_way .flex-box > div{width: calc(50% - 10px)}
.empRef_wrap .empRef_way .flex-box .f22{margin-bottom: 15px}
.empRef_wrap .empRef_way .item01 .step{margin-top: 20px;display: flex;flex-wrap: wrap;border-bottom: 1px solid #e6e6e6;padding-bottom: 20px;margin-bottom: 20px}
.empRef_wrap .empRef_way .item01 .step > div{width: calc(50% - 15px);margin-right: 30px;position: relative;margin-bottom: 47px}
.empRef_wrap .empRef_way .item01 .step > div:nth-child(2n){margin-right: 0}
.empRef_wrap .empRef_way .item01 .step > div:nth-child(3),
.empRef_wrap .empRef_way .item01 .step > div:nth-child(4){margin-bottom: 0}
.empRef_wrap .empRef_way .item01 .step .num{display: block;width: 47px;height: 47px;display: flex;flex-direction: column;justify-content: center;align-items: center;background: #38bab2;color: #fff;border-radius: 50%;position: absolute;left: 50%;top: -23.5px;transform: translateX(-50%)}
.empRef_wrap .empRef_way .item01 .step .img{border-radius: 15px;overflow: hidden;margin-bottom: 15px}
.empRef_wrap .empRef_way .item01 .step .img img{display: block;max-width: 100%;width: 100%}
.empRef_wrap .empRef_way .item01 .step p{font-weight: 600}
.empRef_wrap .empRef_way .item01 ul li {color: #666}
.empRef_wrap .empRef_way .item01 .btn_area{margin-top: 30px;display: flex;justify-content: space-between}
.empRef_wrap .empRef_way .item01 .btn_area .emp_btn{background: #00a8cd;color: #fff;font-size: 16px;padding: 10px;width: calc(50% - 15px);text-align: center;border-radius: 5px;font-weight: 500}

.empRef_wrap .empRef_way .apply_area:before{content: '';display: block;background: url(../images/empRef/job_ico02.png) no-repeat;width: 250px;height: 80px;margin: 0 auto 26px auto;background-size: 250px;}
.empRef_wrap .empRef_way .apply_area > div{display: flex;justify-content: space-between;margin-bottom: 38px;padding-bottom: 38px;border-bottom: 1px solid #e6e6e6}
.empRef_wrap .empRef_way .apply_area > div:last-child{margin-bottom: 0;border-bottom: 0;padding-bottom: 0}
.empRef_wrap .empRef_way .apply_area .img{border: 1px solid #e6e6e6;border-radius: 15px;overflow: hidden;width: 250px;}
.empRef_wrap .empRef_way .apply_area .img img{display: block;width: 100%;height: 100%;}
.empRef_wrap .empRef_way .apply_area .txt{width: calc(100% - 270px);display: flex;flex-direction: column;font-size: 18px;font-weight: 600;align-items: flex-start;}
.empRef_wrap .empRef_way .apply_area .txt a{margin-top: 30px;background: #ff7f4d;color: #fff;padding: 3px 15px;border-radius: 3px;font-weight: 500}
.empRef_wrap .empRef_way .apply_area .txt a:hover,
.empRef_wrap .empRef_way .apply_area .txt a:active,
.empRef_wrap .empRef_way .apply_area .txt a:focus{text-decoration: underline}


@media all and (max-width:1260px){
	.empRef_wrap .header > .containerNew:nth-child(1):after{background-size: 500px;width: 500px;height: 210px;right: 0;bottom: -200px}
	.empRef_wrap .header p{max-width: calc(100% - 400px);word-break: keep-all}
	.empRef_wrap .header .bottom p{max-width: 100%}

	.empRef_wrap .empRef_way .flex-box{flex-direction: column;}
	.empRef_wrap .empRef_way .flex-box > div{width: 100%;margin-bottom: 40px}
	.empRef_wrap .empRef_way .flex-box > div:last-child{margin-bottom: 0}
}

@media all and (max-width:1024px){
	.empRef_wrap .header h3:before{background-size: 48px;width: 48px;height: 35px}
	.empRef_wrap .header h3{padding-left: 55px}
	.empRef_wrap .header > .containerNew:nth-child(1):after{background-size: 350px;width: 300px;height: 160px;bottom: -140px}
	.empRef_wrap .header p{max-width: calc(100% - 300px);}
}

@media all and (max-width:768px){
		/* font size */
.f14{font-size: 13px}
.f15{font-size: 14px}
.f16{font-size: 14px}
.f17{font-size: 14px}
.f18{font-size: 15px}
.f19{font-size: 15px}
.f20{font-size: 16px}
.f22{font-size: 18px}
.f24{font-size: 20px}
.f26{font-size: 22px}
.f28{font-size: 22px}
.f30{font-size: 22px}
.f32{font-size: 22px}
.f34{font-size: 34px}
.f36{font-size: 24px}
.f38{font-size: 26px}
.f40{font-size: 26px}
.f50{font-size: 28px}
.f60{font-size: 28px}
	.mt30{margin-top: 20px}

	.empRef_wrap .header{padding-top: 30px}
	.empRef_wrap .header > .containerNew:nth-child(1):after{background-size: 240px;width: 240px;height: 95px;bottom:-120px;;}

	.empRef_wrap .header p{max-width: calc(100% - 250px)}

	.empRef_area .item{margin: 30px 0}
	.empRef_area .item .er_tit{font-size: 18px}
	.empRef_wrap .white_box{padding: 20px}
		.empRef_area .item .white_box > div{flex-direction: column;justify-content: flex-start;position: relative;padding-bottom: 40px;width: calc(50% - 5px)}
	.empRef_area .item .white_box > div .img{max-width: 160px;width: 100%;margin: 0 auto
		 10px auto;}
	.empRef_area .item .er_tit{padding-left: 25px;margin-bottom: 10px;}
	.empRef_area .item .er_tit:before{background-size: 18px;width: 18px;height: 16px;transform: none;top: 4px}
	.empRef_area .item .white_box > div .txt{width: 100%;text-align: center;display: flex;flex-direction: column;align-items: center;height: auto;}
	.empRef_area .item .white_box .txt .desc{margin: 5px 0;word-break: keep-all;letter-spacing: -0.5px}
	.empRef_area .item .white_box > div .txt a{margin-top: auto;position: absolute;left: 50%;bottom: 0;transform: translateX(-50%)}
	.empRef_area .item .white_box .txt .desc br{display: none}

	.empRef_wrap .header .bottom{margin-top: 50px}

}

@media all and (max-width:640px){
	.f14{font-size: 12px}
.f15{font-size: 14px}
.f16{font-size: 14px}
.f17{font-size: 14px}
.f18{font-size: 15px}
.f19{font-size: 14px}
.f20{font-size: 14px}
.f22{font-size: 16px}
.f24{font-size: 20px}
.f26{font-size: 22px}
.f28{font-size: 22px}
.f30{font-size: 22px}
.f32{font-size: 22px}
.f34{font-size: 34px}
.f36{font-size: 24px}
.f38{font-size: 26px}
.f40{font-size: 26px}
.f50{font-size: 28px}
.f60{font-size: 28px}

	.empRef_wrap .header > .containerNew:nth-child(1):after{display: none}
	.empRef_wrap .header p{max-width: 100%;}
	.empRef_wrap .header .bottom{padding: 10px 0}
	.empRef_wrap .empRef_way .apply_area:before{background-size: 260px;width: 260px;height: 81px}
	.empRef_wrap .empRef_way .item01 .step > div{width: calc(50% - 5px);margin-right: 10px;margin-bottom: 30px}
	.empRef_wrap .empRef_way .item01 .btn_area{margin-top: 20px}
	.empRef_wrap .empRef_way .item01 .btn_area .emp_btn{font-size: 13px;padding: 6px 10px}
	.empRef_wrap .empRef_way .apply_area .img{width: 200px}
	.empRef_wrap .empRef_way .apply_area .txt{width: calc(100% - 220px);font-size: 16px}

}

@media all and (max-width:480px){
	.f14{font-size: 12px}
	.f15{font-size: 13px}
	.f16{font-size: 13px}
	.f17{font-size: 14px}
	.f18{font-size: 15px}
	.f19{font-size: 14px}
	.f20{font-size: 14px}
	.f22{font-size: 16px}
	.f24{font-size: 16px}
	.f26{font-size: 28px}
	.f28{font-size: 22px}
	.f30{font-size: 18px}
	.f32{font-size: 18px}

	.empRef_wrap .header h3{font-size: 20px}
	.empRef_wrap .white_box{padding: 15px 10px}
	.empRef_wrap .header p.mt30{margin-top: 10px}

	.empRef_wrap .empRef_way .apply_area:before{background-size: 170px;width: 170px;height: 55px;margin: 0 auto 15px auto}
	.empRef_wrap .empRef_way .apply_area > div{;padding-bottom: 15px;margin-bottom: 15px}
	.empRef_wrap .empRef_way .apply_area .img{width: 140px}
	.empRef_wrap .empRef_way .apply_area .txt{width: calc(100% - 150px);word-break: keep-all;font-size: 13px}
	.empRef_wrap .empRef_way .apply_area .txt br{display: none}

	.empRef_wrap .empRef_way .item01 .step .num{width: 35px;height: 35px;font-size: 14px;top: -17.5px}
	.empRef_wrap .empRef_way .item01 .btn_area .emp_btn{width: calc(50% - 7.5px)}
	.empRef_wrap .empRef_way h4{padding: 10px;word-break: keep-all}

	.empRef_wrap .empRef_way .flex-box{margin-top: 20px}
	.empRef_wrap .empRef_way .flex-box .f24,
	.empRef_area .item .er_tit{word-break: keep-all;font-size: 16px}

	.empRef_wrap .header .bottom{margin-top: 20px}

	.empRef_wrap .empRef_way .apply_area .txt p{font-size: 13px;margin-bottom: 10px}

	.empRef_wrap .empRef_way .apply_area .txt a{margin-top: auto;}

	.empRef_wrap .header .f22{margin-top: 10px;}

}