@charset "UTF-8";
.join_us_page {
	display: none;
/* 	background: #fff; */
	width: 100%;
	/* height: 100%; */
}

.join_us_page.on {
	display: block;
}

.join_us_page .back .title {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	/* height: 100%; */
	position: absolute;
	z-index: 9;
	/* left: 50%; */
	top: 50%;
	color: #fff;
	font-size: 150px;
	font-weight: 900;
	flex-direction: column;
	width: calc(100% - 140px);
	transform: translate(0, -50%);
	transition: .3s;
	max-width: 1624px;
}
.join_us_page .back {
	/* background: url(./img/back.png), linear-gradient(to bottom, rgb(217 230 255), rgb(185 207 250)); */
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	display: flex;
	justify-content: center;
	transition: .3s;
	background-image: url(./img/back.png);
	min-width: 320px;
}

.join_us_page .hand {
	width: 100%;
	height: 100%;
	/* display: flex; */
	/* justify-content: center; */
	/* align-items: center; */
	position: absolute;
	left: 50%;
	top: 50%;
	min-height: 932px;
	transform: translate(-50%, -50%);
}
.join_us_page .hand .img1{
	background-image: url(./img/hand_L.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	animation-name: bounce;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	width: 250px;
	height: 480px;
	position: absolute;
	/* left: 100%;
	top: 50%;
	transform: translate(-50%, -50%); */
	z-index: 1;
	left: 0;
	top: 50%;
	transform: translate(-80%, -50%);
	transition: .3s;
}
.join_us_page .hand .img2{
	background-image: url(./img/hand_R.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	animation-name: bounce2;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	width: 250px;
	height: 480px;
	position: absolute;
	margin: 0;
	right: 0;
	top: 50%;
	transform: translate(-20%, -50%);
	transition: .3s;
}

@keyframes bounce{
         0%{
            left: 50%;
			animation-timing-function: ease-in-out;
         }

         50%{
			left: 45%;
			 animation-timing-function: ease-in-out;

         }
		100%{
            left: 50%;
			animation-timing-function: ease-in-out;
         }
     }

@keyframes bounce2{
         0%{
            left: 50%;
			animation-timing-function: ease-in-out;
         }

         50%{
			left: 55%;
			 animation-timing-function: ease-in-out;

         }
		100%{
            left: 50%;
			animation-timing-function: ease-in-out;
         }
     }


     
     
.join_us_page .banner {
	background: #F5F1F0;
	height: 110vh;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	position: relative;
	max-width: 1624px;
	transition: .3s;
	box-sizing: border-box;
	width: calc(100% - 150px);
	min-height: 932px;
}     
.join_us_page .banner {
	
}
.join_us_page .banner .swiper2{
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	height: 700px;
	margin: 0;
	width: 100%;
}
.join_us_page .banner .swiper-wrapper {
	/* max-width: 1624px; */
}
.join_us_page .banner .swiper-wrapper > div {
	font-family: 'SUIT';
	/* width: 100% !important; */
	gap: 60px;
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	/* transition: .1s; */
}
.join_us_page .banner .swiper-wrapper > div > .box {
	width: 100%;
	background: #fff;
	border-radius: 20px;
	position: relative;
	/* transition: .3s; */
}
.join_us_page .banner .swiper-wrapper > div > .box:after {
	content: "";
    display: block;
    padding-bottom: 100%;
}

.join_us_page .banner .swiper-wrapper > div > .box > .img{
	/* display: none; */
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	position: absolute;
}
.join_us_page .banner .swiper-wrapper > div > .box:hover > .hover{

	opacity: 1;
}
.join_us_page .banner .swiper-wrapper > div > .box > .hover{
	opacity: 0;

	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	font-family: 'SUIT';
	transition: .3s;
}
.join_us_page .banner .swiper-wrapper > div > .box > .hover > div {
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	height: 100%;
	flex-direction: column;
	color: #fff;
	gap: 10px;
	font-size: 18px;
	font-weight: 600;
}
.join_us_page .banner .swiper-wrapper > div > .box > .hover > div .txt{
	font-size: 30px;
	font-weight: 800;
	margin-bottom: 15px;
}


.join_us_page .banner .blue > div:nth-child(1) .img{
	background-image: url(./img/sw-01.png);
}
.join_us_page .banner .blue .hover{
	background: #90B5F3;
}
.join_us_page .banner .blue div:hover .img{
	display:none;
}
.join_us_page .banner .blue > div:nth-child(2) .img{
	background-image: url(./img/sw-02.png);	
}
.join_us_page .banner .blue > div:nth-child(3) .img{
	background-image: url(./img/sw-03.png);
}
.join_us_page .banner .yellow > div:nth-child(1) .img{
	background-image: url(./img/sw-04.png);
}
.join_us_page .banner .yellow .hover{
	background: #FDBF31;
}
.join_us_page .banner .yellow div:hover .img{
	display:none;
}
.join_us_page .banner .yellow > div:nth-child(2) .img{
	background-image: url(./img/sw-05.png);
}
.join_us_page .banner .yellow > div:nth-child(3) .img{
	background-image: url(./img/sw-06.png);
}
.join_us_page .banner .green > div:nth-child(1) .img{
	background-image: url(./img/sw-07.png);
}
.join_us_page .banner .green .hover{
	background: #CECE3B;
}
.join_us_page .banner .green div:hover .img{
	display:none;
}
.join_us_page .banner .green > div:nth-child(2) .img{
	background-image: url(./img/sw-08.png);
}
.join_us_page .banner .green > div:nth-child(3) .img{
	background-image: url(./img/sw-09.png);
}
.join_us_page .banner .pink > div:nth-child(1) .img {
	background-image: url(./img/sw-10.png);
}
.join_us_page .banner .pink > div:nth-child(2) .img{
	background-image: url(./img/sw-11.png);
}
.join_us_page .banner .pink .hover{
	background: #FFB5B3;
}
.join_us_page .banner .pink div:hover .img{
	display:none;
}
.join_us_page .banner .pink > div:nth-child(3) .img{
	background-image: url(./img/sw-12.png);
}
.swiper-button-next {
	background-image: url(./img/prev.png);
	width: 60px !important;
	height: 60px !important;
	background-size: contain;
	color: #fff0 !important;
	background-repeat: no-repeat;
	z-index: 2 !important;
	right: calc(0px - (var(--swiper-navigation-size)/ 1.5)) !important;
	cursor: none !important;
}
.swiper-button-prev {
	background-image: url(./img/next.png);
	width: 60px !important;
	height: 60px !important;
	background-size: contain;
	color: #fff0 !important;
	position: absolute;
	background-repeat: no-repeat;
	z-index: 2 !important;
	left: calc(0px - (var(--swiper-navigation-size)/ 1.5)) !important;
	cursor: none !important;
}




.swiper-pagination-bullet {
	background: #fff;
	opacity: 1;
}
.swiper-pagination-bullet-active:nth-child(1) {
	background: #7DA4E7;
}
.swiper-pagination-bullet-active:nth-child(2) {
	background: #FDBF31;
}
.swiper-pagination-bullet-active:nth-child(3) {
	background: #B9B92F;
}
.swiper-pagination-bullet-active:nth-child(4) {
	background: #FFB5B3;
}

.employment {
	background: #D4E6FF;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-direction: column;
	/* gap: 50px; */
	min-height: 932px;
}
.employment .c-footer-wrap {
	/* gap: 90px; */
}
.employment .title {
	color: #000;
	font-size: 45px;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	align-items: center;
	gap: 22px;
	font-weight: 600;
	margin-top: 70px;
	width: auto;
}
.employment .title > div {
	  transition: .3s;
}
.employment .button {
	background: #fff;
	width: 580px;
	height: 80px;
	display: flex;
	border: none;
	font-size: 20px;
	border-radius: 50px;
	justify-content: center;
	align-content: center;
	align-items: center;
	font-family: 'SUIT';
	font-weight: 700;
	transition: .3s;
}

.employment .em-txt {
	display: flex;
	gap: 16px 12px;
	flex-wrap: wrap;
	justify-content: center;
    transition: .3s;
}

.employment .em-txt 

.employment a {
	transition: .3s;
}

.mb-sw {
	height:0;
	position: relative;
	width:0;
/* 	min-width: 320px; */
}
.mb-sw .swiper-button-next, .mb-sw .swiper-button-prev {
	height:0 !important;
}

.mb-sw .swiper3 {
	height:0;
}

.mb-sw .swiper3 .swiper-slide .bx-img > div {
	border-radius: 20px;
}

.mb-sw .swiper-pagination {
	bottom: var(--swiper-pagination-bottom, -50px);
}

.join_us_page .banner .swiper-wrapper > div > .sbg {
	width:100%;
	height:100%;
	padding: 30px 0;
}