:root {
	--brand-blue: #192E7A;
	--brand-green: #0E9B94;
	--black: #242933;
	--white: #fff;
	--white237: #f2f3f7;
	--red: #DE1B1B;
	--grey: #B4BAC6;
	--orange: #EA7912;

	--form-border: #D8D8D8;

	--black-opacity0: rgba(0, 0, 0, 0);
	--black-opacity01: rgba(36, 41, 51, 0.01);
	--black-opacity1: rgba(36, 41, 51, 0.1);
	--black-opacity5: rgba(36, 41, 51, 0.5);
	--black-opacity6: rgba(36, 41, 51, 0.6);
	--black-opacity7: rgba(36, 41, 51, 0.7);

	--brand-opacity1: rgba(25, 46, 122, 0.1);
	--brand-opacity5: rgba(25, 46, 122, 0.5);
	--brand-opacity7: rgba(25, 46, 122, 0.7);
	--brand-opacity8: rgba(25, 46, 122, 0.8);

	--green-opacity7: rgba(10, 113, 108, 0.7);

	--green-opacity1: rgba(14, 155, 148, 0.1);

	--white-opacity4: rgba(255, 255, 255, 0.4);
	--white-opacity1: rgba(255, 255, 255, 0.1);
	--white-opacity2: rgba(255, 255, 255, 0.2);
	--white-opacity3: rgba(255, 255, 255, 0.3);
	--white-opacity5: rgba(255, 255, 255, 0.5);
	--white-opacity7: rgba(255, 255, 255, 0.7);
	--white-opacity8: rgba(255, 255, 255, 0.8);
	--white-opacity9: rgba(255, 255, 255, 0.9);

	--font-1375a: normal 400 1.375rem 'aliRegular';
	--font-125: normal 400 1.05rem 'aliRegular';
	--font-125-Medium: normal 400 1.05rem 'aliMedium';
	--font-1: normal 400 1rem 'aliRegular';
	--font-1-Medium: normal 400 1rem 'aliMedium';
	--font-0875: normal 400 0.875rem 'aliRegular';
	--font-4h3: italic 400 4rem 'aliBold';
	--font-2h3: italic 400 2rem 'aliBold';
	--font-175: normal 400 1.75rem 'aliMedium';
	--font-15h1: normal 400 1.3rem 'aliMedium';
	--font-15h1-bold: normal 400 1.4rem 'aliBold';
}

/* margin */
.mr2 {
	margin-right: 2px;
}

.mr4 {
	margin-right: 4px;
}

.mr6 {
	margin-right: 6px;
}

.mr8 {
	margin-right: 8px;
}

.mr12 {
	margin-right: 12px;
}

.mr16 {
	margin-right: 16px;
}

.mr24 {
	margin-right: 24px;
}

.mr32 {
	margin-right: 32px;
}

.mr40 {
	margin-right: 40px;
}

.mr48 {
	margin-right: 48px;
}

.mr56 {
	margin-right: 56px;
}

.mr64 {
	margin-right: 64px;
}

.mr88 {
	margin-right: 88px;
}

.mr96 {
	margin-right: 96px;
}

.mb2 {
	margin-bottom: 2px;
}

.mb4 {
	margin-bottom: 4px;
}

.mb6 {
	margin-bottom: 6px;
}

.mb8 {
	margin-bottom: 8px;
}

.mb12 {
	margin-bottom: 12px;
}

.mb16 {
	margin-bottom: 16px;
}

.mb24 {
	margin-bottom: 24px;
}

.mb32 {
	margin-bottom: 32px;
}

.mb40 {
	margin-bottom: 40px;
}

.mb48 {
	margin-bottom: 48px;
}

.mb56 {
	margin-bottom: 56px;
}

.mb64 {
	margin-bottom: 64px;
}

.mb72 {
	margin-bottom: 72px;
}

.mb88 {
	margin-bottom: 88px;
}

.mb96 {
	margin-bottom: 96px;
}

.ml2 {
	margin-left: 2px;
}

.ml4 {
	margin-left: 4px;
}

.ml6 {
	margin-left: 6px;
}

.ml8 {
	margin-left: 8px;
}

.ml12 {
	margin-left: 12px;
}

.ml16 {
	margin-left: 16px;
}

.ml24 {
	margin-left: 24px;
}

.ml32 {
	margin-left: 32px;
}

.ml40 {
	margin-left: 40px;
}

.ml48 {
	margin-left: 48px;
}

.ml56 {
	margin-left: 56px;
}

.ml64 {
	margin-left: 64px;
}

.ml72 {
	margin-left: 72px;
}

.ml88 {
	margin-left: 88px;
}

.ml96 {
	margin-left: 96px;
}

.mt2 {
	margin-top: 2px;
}

.mt4 {
	margin-top: 4px;
}

.mt8 {
	margin-top: 8px;
}

.mt12 {
	margin-top: 12px;
}

.mt16 {
	margin-top: 16px;
}

.mt24 {
	margin-top: 24px;
}

.mt32 {
	margin-top: 32px;
}

.mt40 {
	margin-top: 40px;
}

.mt48 {
	margin-top: 48px;
}

.mt56 {
	margin-top: 56px;
}

.mt64 {
	margin-top: 64px;
}

.mt72 {
	margin-top: 72px;
}

.mt88 {
	margin-top: 88px;
}

.mt96 {
	margin-top: 96px;
}


.regular {
	font-family: 'aliRegular';
}

.medium {
	font-family: 'aliMedium';
}

/* this is style of scroll bar-start */
/*style of track*/
#canvas {
	position: fixed;
	z-index: -1;
}

/* this is style of scroll bar-end */

/* this area is public style-start */
body {
	background: var(--white237);
	min-width: 1200px;
	overflow-x: hidden;
}

a,
button {
	cursor: pointer;
}

.radius8 {
	border-radius: 8px;
}

.container-width {
	width: 72.91vw;
	min-width: 1200px;
	max-width: 1400px;
}

@media only screen and (max-width: 1200px) {
	body {
		overflow-x: auto;
	}
}


.no-data {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 80px;
}

.size {
	width: 100vw;
	height: 80vh;
}

.white-space-no {
	white-space: nowrap;
}

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

.flex-row {
	display: flex;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-nowrap {
	flex-wrap: nowrap;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.align-start {
	align-items: flex-start;
}

.align-end {
	align-items: flex-end;
}

.align-center {
	align-items: center;
}

.flex-wrap {
	flex-wrap: wrap;
}

.space-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.align-item-start {
	align-items: flex-start;
}

.flex-row-important {
	flex-direction: row !important;
}

.align-items-end {
	align-items: flex-end;
}

.row-end-end {
	display: flex;
	justify-content: flex-end;
	align-items: end;
}

.justify-between {
	justify-content: space-between;
}

.flex-center-center {
	justify-content: center;
	align-items: center;
}

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

.align-items-center {
	align-items: center;
}

.flex-row-start {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.flex-row-end {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.flex-row-start-nocenter {
	display: flex;
	justify-content: flex-start;
}

.flex-row-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.column-align-center {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.left-right-form-important {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	gap: 2vh !important;
}

.two-form-div-grid-rows {
	display: grid;
	grid-template-columns: auto 166px;
	grid-template-rows: 1fr;
	align-items: flex-end;
}

.list-talent,
.main-information-item h2,
.main-container h2 {
	font: var(--font-125-Medium);
}

.talent {
	font: var(--font-15h1);
}

.line {
	width: 150px;
	height: 1px;
	background: var(--black-opacity5);
}

.max-height {
	justify-content: space-between;
}

.vh21 {
	height: 21.9vh;
}

.must {
	color: var(--red);
	font: var(--font-1);
}

.list-time,
.list-date {
	font: var(--font-1);
	white-space: nowrap;
}

.container {
	width: 100%;
	display: flex;
	justify-content: center;
}

.container-column {
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.width-2x2-portrait {
	width: 41.66vw;
}

.message-dedicated-width {
	grid-template-columns: 100%;
}

.form-grid-template-rows-1 {
	display: grid;
	grid-template-rows: auto;
}

.form-grid-template-rows-3 {
	display: grid;
	grid-template-rows: repeat(3, auto);
}

.form-grid-template-rows-5 {
	display: grid;
	grid-template-rows: repeat(5, auto);
}

.form-grid-template-rows-6 {
	display: grid;
	grid-template-rows: repeat(6, auto);
}

.form-grid-template-rows-4 {
	display: grid;
	grid-template-rows: repeat(4, auto);
}

.form-grid-template-rows- {
	display: grid;
	grid-template-rows: repeat(6, auto);
}

.form-grid-template-rows-8 {
	display: grid;
	grid-template-rows: repeat(8, auto);
}

.form-grid-template-rows-1x120 {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 120px;
}

.form-grid-template-rows-1x2 {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr;
}

.form-grid-template-rows-3x2 {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	grid-template-columns: repeat(2, calc((100% - 16px) / 2));
}

.form-grid-template-rows-2x2 {
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	grid-template-columns: repeat(2, 1fr);
}

.form-grid-template-rows-2x3 {
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	grid-template-columns: repeat(3, 1fr);
}

.form-grid-template-rows-10 {
	display: grid;
	grid-template-rows: repeat(10, auto);
	grid-template-columns: 100%;
}

.grid-1x4 {
	display: grid;
	grid-template-columns: repeat(4, 16.45vw);
	grid-template-rows: 24.56vh;
}

.route a {
	font: var(--font-0875);
	color: var(--black);
	transition: all 0.3s;
}

.route a:hover {
	color: var(--brand-blue);
}

textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
	font: var(--font-0875);
}

textarea::-moz-placeholder,
input:-moz-placeholder {
	font: var(--font-0875);
}

textarea::-moz-placeholder,
input::-moz-placeholder {
	font: var(--font-0875);
}

textarea:-ms-input-placeholder input:-ms-input-placeholder {
	font: var(--font-0875);
}

.personal-container {
	display: grid;
	grid-template-columns: 30% 70%;
	grid-template-rows: 1fr;
	min-height: 700px;
}

/* .personal-container .bg-white{
	width: 1200px;
} */

/* this area is public style-end */

/* this is style of page tools-start */
.page-info {
	padding: 16px;
	text-align: center;
	background: var(--white);
	width: 100%;
	box-sizing: border-box;
	border-radius: 8px;
}

.page-info a {
	font: var(--font-1);
	text-align: center;
	line-height: 2rem;
	outline: none;
	display: inline-block;
	margin-left: 10px;
	padding: 0 10px;
	border: 1px solid var(--black-opacity1);
	border-radius: 4px;
}

.page-info .pageinput {
	font: var(--font-1);
	text-align: center;
	line-height: 2rem !important;
	outline: none;
	display: inline-block;
	margin-left: 10px;
	padding: 0 10px;
	border: 1px solid var(--black-opacity1);
	border-radius: 4px;
	width: 70px !important;
}

.page-info .active {
	background: var(--brand-blue);
	color: var(--white);
	border: 1px solid var(--brand-blue);
}

/* this is style of page tools-end */

/* this area is style of navigation-start */
.navigation-container {
	display: flex;
	height: 72px;
	position: fixed;
	top: 0;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(20px);
	justify-content: center;
	white-space: nowrap;
	z-index: 999999999;
	min-width: 1200px;
	left: 0;
	right: 0;
}

.navigation-logo a {
	width: 220px;
	height: 64px;
	display: inline-block;
	background-image: url(../images/logov2.png);
	background-size: cover;
	background-position: 0 0;
}

.navigation-list {
	display: flex;
	width: 500px;
}

.navigation-list a {
	opacity: 0.7;
}

.navigation-list a {
	font: var(--font-1375a);
	line-height: 72px;
	color: var();
	transition: all 0.3s;
	border-bottom: 2px solid var(--black-opacity0);
	padding: 4px 2px;
}

.navigation-list a:hover {
	opacity: 1;
	font-family: 'aliMedium';
	border-bottom: 2px solid var(--brand-blue);
	margin: 0 0.2vw;
	padding: 6px 2px;
	color: var(--brand-blue);
}

.navigation-on a {
	opacity: 1;
	font-family: 'aliMedium';
	border-bottom: 2px solid var(--brand-blue);
	color: var(--brand-blue);
}

.navigation-search {
	width: 280px;
	background: var(--black-opacity1);
	box-sizing: border-box;
	border-radius: 8px;
}

.navigation-search input,
.navigation-search button {
	height: 44px;
	color: var(--black);
	font: var(--font-1);
}

.navigation-search input {
	width: 100%;
	padding-left: 16px;
	transition: all 0.3s;
	outline: 1px solid var(--black-opacity0);
	background: var(--black-opacity0);
	border-radius: 8px 0 0 8px;
}

.navigation-search input:hover,
.navigation-search input:focus {
	background: var(--white-opacity4);
}

.navigation-search input::-webkit-input-placeholder {
	color: var(--black-opacity5);
}

.navigation-search input:-moz-placeholder {
	color: var(--black-opacity5);
}

.navigation-search input::-moz-placeholder {
	color: var(--black-opacity5);

}

.navigation-search input:-ms-input-placeholder {
	color: var(--black-opacity5);
}

.navigation-search button {
	width: 80px;
	text-align: center;
	transition: all 0.3s;
	border-radius: 0 8px 8px 0;
}

.navigation-search button:hover {
	background: var(--white-opacity4);
}

.navigation-userName {
	gap: 0.2vw;
	line-height: 32px;
}

.navigation-userName a {
	font: var(--font-1);
	transition: all 0.3s;
}


.navigation-userName a:last-child {
	color: var(--black-opacity5);
	transition: all 0.3s;
}

.navigation-userName a:last-child:hover {
	color: var(--red);
}

.navigation-userName a:first-child:hover {
	color: var(--brand-blue);
}

/* this area is style of navigation-end */

/* this is style of banner-start */
.banner-demand-img {
	width: 100%;
	height: 660px;
	background: url(../images/demand-bannerv2.jpg) top center no-repeat;
	background-size: cover;
}

.banner-technology-img {
	width: 100%;
	height: 660px;
	background: url(../images/technology-bannerv3.jpg) top center no-repeat;
	background-size: cover;
}

.banner-technology-img img {
	max-width: 100%;
}

.banner-expert-img {
	width: 100%;
	height: 660px;
	background: url(../images/experts-engineer-bannerv2.jpg) top center no-repeat;
	background-size: cover;
}

.banner-contact-img {
	width: 100%;
	height: 660px;
	background: url(../images/contact-us-bannerv4.jpg) top center no-repeat;
	background-size: cover;
}

/* this is style of banner-end */

/* this is statistics portion-start */
.main-container {
	margin: 50px 0 100px;
}

.statistics-portion h3 {
	font: var(--font-4h3);
}

.number-introduce {
	gap: 2px;
}

.home-number {
	display: none;
}

.home-number p {
	font-size: 1.3rem;
}

.number-introduce p:first-child {
	font: var(--font-125);
	color: var(--black);
}

.number-introduce p:last-child {
	font: var(--font-1);
	color: var(--black-opacity7);
}

.release-technology {
	background: var(--brand-green);
}

/* this is statistics portion-end */

/* this is main-screen-select-start */
.main-screen-select {
	background: var(--white);
	margin: 16px 0 50px;
	white-space: nowrap;
}

.main-screen-select h4 {
	font: var(--font-1);
	color: var(--brand-blue);
	opacity: 0.7;
	text-align-last: justify;
}

.main-screen-select h4 {
	padding-top: 4px;
	width: 64px;
}

.other {
	padding-top: 10px !important;
}

.tecnology-area,
.main-screen-select ul {
	display: flex;
	flex-flow: row wrap;
	gap: 1vh;
}

.main-screen-select a {
	display: inline-block;
	padding: 4px 16px;
	box-sizing: border-box;
	font: var(--font-1);
	transition: all 0.3s;
	border-radius: 4px;
}

.main-screen-select a:hover:not(.select-on a) {
	background: var(--black-opacity1);
}

.select-on a {
	background: var(--brand-blue);
	color: var(--white);
}

.main-select-search input {
	background: var(--white);
	border: 1px solid var(--black-opacity1);
	box-sizing: border-box;
}

.main-select-search button {
	background: var(--brand-blue);
	color: var(--white);
}

.main-select-search button:hover {
	opacity: 0.8;
	background: var(--brand-blue);
}

.main-select-search {
	width: 400px;
}

/* this is main-screen-select-end */

/* this is main-information-list-start */
.main-information-portion {
	gap: 24px;
}

.list-icon {
	width: 24px;
	height: 24px;
	position: absolute;
	left: 16px;
	top: 20px;
}

.bg-white {
	background: var(--white);
}

.main-information-item {
	background: var(--white237);
	transition: all 0.3s;
}

.padding16 {
	padding: 16px;
	box-sizing: border-box;
}

.padding24 {
	padding: 24px;
	box-sizing: border-box;
}

.padding0-32 {
	padding: 0 32px;
}

.radius16 {
	border-radius: 16px;
}

.main-information-item:hover {
	background: var(--brand-opacity1);
}

.list-division {
	width: 1px;
	height: 16px;
	background: var(--black-opacity5);
}

.list-btn-detail {
	background: var(--brand-opacity1);
	width: 96px;
	font: var(--font-1);
	line-height: 54px;
	text-align: center;
	color: var(--brand-blue);
	transition: all 0.3s;
	border-radius: 8px;
	display: inline-block;
}

.main-btn {
	background: var(--brand-blue);
	color: var(--white);
}

.list-btn-detail:hover {
	background: var(--brand-blue);
	color: var(--white);
	width: 120px;
}

.reply-state {
	position: absolute;
	top: 0;
	right: 0;
	color: var(--white);
	font: var(--font-1);
	text-align: center;
	line-height: 1.5rem;
	padding: 4px 8px;
	box-sizing: border-box;
	border-radius: 0 8px 0 8px;
}

.state-confirmed {
	background: var(--brand-green) !important;
	color: var(--white) !important;
}

.state-ignored {
	background: var(--black-opacity5) !important;
	color: var(--white) !important;
}

/* this is main-information-list-end */

/* this is foot-portion-start */
.foot-container {
	background-image: url(.././images/foot-bg.jpg);
	padding: 56px 0;
	color: var(--grey);
	font: var(--font-1);
	background-size: cover;
	box-sizing: border-box;
}

.foot-logo {
	min-width: 120px;
	max-width: 121px;
	height: 120px;
}

.foot-logo img {
	width: 100%;
}

.home-foot-style a,
.foot-container a {
	color: var(--white-opacity7);
	transition: all 0.3s;
}

.home-foot-style a:hover,
.foot-container a:hover {
	color: var(--white);
}

.home-foot-style {
	color: var(--grey);
	box-sizing: border-box;
	backdrop-filter: blur(10px);
	background: var(--black-opacity7);
}

.home-foot-scan-code {
	color: var(--white);
}

.code img {
	width: 112px;
	height: 112px;
	border-radius: 8px;
	transition: all 0.5s;
}

.code {
	background: var(--white-opacity3);
	backdrop-filter: blur(20px);
	font-size: 1rem;
	white-space: nowrap;
}

.foot-scan-code img {
	width: 112px;
	height: 112px;
	border-radius: 8px;
}

.foot-scan-code li {
	padding: 8px;
	border: 1px solid var(--white-opacity4);
	border-radius: 12px;
}

/* this is foot-portion-end */

/* this is form-container-portion-start */
.form-container-margin {
	margin: 88px 0;
}

.form-container {
	display: grid;
	grid-template-columns: 70% 28%;
	grid-template-rows: 1fr;
}

.form-left-wide-portion {
	background: var(--white);
}

.form-right-narrow-portion {
	background: var(--white);
	box-sizing: border-box;
	border-radius: 16px;
}

.form-right-narrow-portion li a {
	gap: 1vh;
	transition: all 0.3s;
}

.form-right-narrow-portion li a:hover {
	gap: 1.5vh;
}

.personal-container h5,
.form-container h5 {
	font: var(--font-1);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.main-form-container {
	padding: 16px;
}

.more-information-list li a h5:hover {
	color: var(--brand-blue);
}

.more-information-list {
	padding: 8px;
}

.list-career {
	padding: 2px 4px;
	background: var(--brand-opacity1);
	font: var(--font-1);
	border-radius: 4px;
	color: var(--brand-opacity7);
}

.more-information-list li {
	background: var(--white237);
	padding: 12px;
	box-sizing: border-box;
	border-radius: 8px;
}

.form-left-wide-portion input:not(.upload-profile-picture-btn),
.form-left-wide-portion textarea {
	border: 1px solid var(--form-border);
	transition: all .3s;
}

.form-left-wide-portion input:not(.upload-profile-picture-btn) {
	width: 100%;
	line-height: 52px;
	padding-left: 12px;
	box-sizing: border-box;
}

.form-left-wide-portion textarea {
	width: 100%;
	height: 8rem;
	padding: 8px 12px;
	box-sizing: border-box;
}

.form-left-wide-portion input:focus,
.form-left-wide-portion textarea:focus,
.form-left-wide-portion input:not(.upload-profile-picture-btn):hover,
.form-left-wide-portion textarea:hover {
	border: 1px solid var(--brand-blue);
}

.form-left-wide-portion textarea::-webkit-input-placeholder,
.form-left-wide-portion input::-webkit-input-placeholder {
	color: var(--black-opacity5);
}

.form-left-wide-portion textarea::-moz-placeholder,
.form-left-wide-portion input:-moz-placeholder {
	color: var(--black-opacity5);
}

.form-left-wide-portion textarea::-moz-placeholder .form-left-wide-portion input::-moz-placeholder {
	color: var(--black-opacity5);

}

.form-left-wide-portion textarea:-ms-input-placeholder,
.form-left-wide-portion input:-ms-input-placeholder {
	color: var(--black-opacity5);
}

.tecnology-area span {
	padding: 4px 8px;
	border: 1px solid var(--brand-opacity1);
	box-sizing: border-box;
	color: var(--brand-opacity7);
	transition: all .3s;
}

.tecnology-area span:hover {
	background: var(--brand-opacity1);
}

.form-btn {
	min-width: 96px;
	padding: 0 16px;
	box-sizing: border-box;
	font: var(--font-1-Medium);
	line-height: 38px;
	transition: all .3s;
	text-align: center;
	border-radius: 8px;
}

.blue-opacity1-btn {
	background: var(--brand-opacity1);
	color: var(--brand-blue);
}

.form-primary-btn {
	background: var(--brand-blue);
	color: var(--white);
}


.form-primary-btn:hover,
.form-secondary-btn:hover {
	padding: 0 8px;
}

.form-style-tips {
	font: var(--font-0875);
	color: var(--black);
}

.form-style-tips a {
	color: var(--brand-blue);
}

.form-right-narrow-portion h6 {
	font: var(--font-125-Medium);
	line-height: 2.1rem;
	padding: 16px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--black-opacity1);
}

.number-of-views {
	color: var(--black-opacity5);
	font: var(--font-1);
}

/* this is form-container-portion-end */

/* this is detail of demand and technology-start */
.form-left-wide-portion h6 {
	font: var(--font-125-Medium);
}

.li-gap li {
	display: flex;
	flex-direction: column;
	gap: 1vh;
}

.detail-title {
	height: 2.1rem;
	border-bottom: 1px solid var(--black-opacity1);
}

.collect {
	cursor: pointer;
}

.collect span {
	color: var(--black-opacity7);
	transition: all .3s;
}

.collect span:hover {
	color: var(--brand-blue);
}

.article-title {
	color: var(--brand-blue);
	font: var(--font-125);
}

.article p {
	text-align: justify;
	line-height: 1.5rem !important;
	font: var(--font-1);
}

/* this is detail of demand and technology-end */

/* this is person-page-start */
.personal-left-portion ul li img {
	width: 32px;
	height: 32px;
}

.personal-left-portion {
	background: var(--white);
}

.personal-title-portion {
	padding: 16px;
}

.personal-title-portion a {
	background: var(--brand-blue);
	color: var(--white);
	font: var(--font-1-Medium);
	text-align: center;
	padding: 4px 8px;
	border-radius: 4px;
}

.personal-list-portion li a {
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 0.5vh;
	font: var(--font-125);
	background: var(--white);
	border-bottom: 1px solid var(--black-opacity1);
	transition: all 0.3s;
	white-space: nowrap;
}

.personal-list-portion img {
	border-radius: 4px;
}

.personal-list-portion li:last-child a {
	border-bottom: none;
}

.personal-list-portion li a:hover {
	background: var(--brand-opacity1);
}

.personal-icon {
	filter: grayscale(100%);
	opacity: .3;
}

.personal-on img {
	filter: grayscale(0%);
	opacity: 1;
}

.personal-on a {
	background: var(--brand-opacity1) !important;
	color: var(--brand-blue);
}

.profile-picture {
	max-width: 120px;
	height: 120px;
	border-radius: 8px;
}

.personal-userName {
	font: var(--font-125-Medium);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	word-wrap: break-word;
	word-break: break-all;
}

.message-container {
	font: normal 400 12px 'aliRegular';
	background: var(--red);
	padding: 0 4px;
	border-radius: 100px;
	color: var(--white);
}

.upload-profile-picture {
	position: relative;
	height: 166px;
	width: 166px;
	overflow: hidden;
	border-radius: 8px;
	background: #000;
	border: none;
}

.upload-profile-picture img {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	z-index: 0;
	border-radius: 8px;
}

.upload-profile-picture-btn {
	position: absolute;
	z-index: 20;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(25, 46, 122, 0.4);
	backdrop-filter: blur(5px);
	box-sizing: border-box;
	text-align: center;
	color: var(--white);
	font: var(--font-1);
	line-height: 34px;
	white-space: nowrap;
}

.upload-btn-cover {
	line-height: 34px;
	position: absolute;
	z-index: 21;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--brand-blue);
	color: var(--white);
	text-align: center;
	pointer-events: none;
}

.indentification-symbol {
	font: var(--font-1);
	color: var(--black-opacity5);
}

.list-state {
	position: absolute;
	right: 0;
	top: 0;
	padding: 4px 12px;
	color: var(--white);
	font: var(--font-1);
	white-space: nowrap;
	text-align: center;
	border-radius: 0 8px 0 8px;
}

.state-draft {
	background: var(--brand-opacity5);
}

.state-fail {
	background: var(--red);
}

.state-released {
	background: var(--brand-green);
}

.state-in-review {
	background: var(--orange);
}

.state-disappeared {
	background: var(--grey);
}

.state-demand {
	background: var(--brand-blue);
}

.state-technology {
	background: var(--brand-green);
}

.state-service {
	background: #7023AD;
}


.list-talent-label,
.technology-label {
	/* padding: 4px 6px;
	background: var(--brand-opacity1); */
	color: var(--brand-opacity7);
	font: var(--font-1-Medium);
	white-space: nowrap;
	/* border-radius: 4px; */

	max-width: 170px;
	text-overflow: ellipsis;
	overflow: hidden;
	word-wrap: break-word;
	word-break: break-all;
}

.list-portrait-career {
	padding: 0 4px;
	box-sizing: border-box;
	background: var(--brand-green);
	color: var(--white);
	white-space: nowrap;
	border-radius: 4px;
}

.career-engineer {
	background: var(--brand-blue);
}

.list-school,
.list-experience,
.list-portrait-information,
.list-portrait-category {
	font: var(--font-1);
}

.expert-label-symbol {
	font-size: 1rem;
	padding: 0px 8px;
	background: var(--black-opacity1);
	color: var(--black);
	margin-right: 8px;
	border-radius: 8px;
	word-wrap: break-word;
	word-break: break-all;
	margin-bottom: 8px;
	line-height: 30px;
}

.list-portrait-information {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.detail-introduce-title {
	display: inline-block;
	padding: 4px 0;
	box-sizing: border-box;
	border-bottom: 4px solid var(--black);
	margin-bottom: 16px;
	font: var(--font-125-Medium);
}

.personal-demand-item {
	gap: 3vh !important;
}

.personal-demand-item h2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	padding-right: 1vh;
}

.border-bottom-black1 {
	border-bottom: 1px solid var(--black-opacity1);
}

.personal-select-on a {
	border-bottom: 2px solid var(--brand-blue);
	color: var(--brand-blue);
	padding-bottom: 6px;
}

.personal-my-demand-select-list li a {
	font-size: 1.25rem;
}

.personal-my-demand-select-list a:hover {
	color: var(--brand-blue);
}

.operate-icon-list {
	position: absolute;
	bottom: 16px;
	right: 16px;
}

.operate-icon-list a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 4px;
	box-sizing: border-box;
	background: var(--black-opacity1);
	border-radius: 4px;
	transition: all 0.3s;
}

.tips-p {
	/* line-height is cannot became transition of animation */
	font: var(--font-1-Medium);
	height: 0;
	overflow: hidden;
	transition: all 0.3s;
}

.operate-icon-list a:hover .tips-p {
	height: 20px;
}

.nothing {
	width: 96px;
	height: 126px;
	margin-top: 10vh;
}

.test-btn {
	font: var(--font-1);
	padding: 4px 12px;
}

.test-btn:hover {
	text-decoration: underline;
}

.read-btn {
	color: var(--brand-blue);
}

.delete-btn {
	color: var(--red);
}

.personal-a-btn {
	white-space: nowrap;
	margin: 0 16px 16px 0;
	color: var(--brand-blue);
	align-self: flex-end;
}

.personal-message {
	background: var(--white237);
}

/* this is person-page-end */

/* this is experts-engineers-start */
.list-portrait {
	width: 110px;
	height: 144px;
}

.list-portrait-engineer {
	width: 206px;
	height: 264px;
	border-radius: 8px;
}

.E-and-E-list {
	background: var(--white);
	transition: all 0.3s;
	/* width: 36.04vw; */
	height: 292px;
}

.E-and-E-list:hover {
	opacity: 0.8;
}

.E-and-E-detail {
	width: 96px;
	font: var(--font-1-Medium);
	line-height: 54px;
	text-align: center;
}

.expert-btn {
	background: var(--green-opacity1);
	color: var(--brand-green);
	align-self: flex-end;
	transition: all 0.3s;
}

.expert-btn:hover {
	background: var(--brand-green);
	color: var(--white);
}

.engineer-btn {
	background: var(--brand-opacity1);
	color: var(--brand-blue);
	align-self: flex-end;
}

.list-portrait-information {
	text-align: justify;
}

.upload-portrait {
	height: 154px;
	background: var(--brand-opacity1);
	position: relative;
}

.upload-portrait button {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--brand-opacity5);
	color: var(--white);
	font: var(--font-1);
	line-height: 26px;
	text-align: center;
}

.upload-files-btn {
	position: relative;
	width: 120px;
	overflow: hidden;
	height: 40px;
	border-radius: 8px;
	cursor: pointer;
}

.absolute-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	cursor: pointer;
}

.download-file {
	color: var(--brand-blue);
	background: var(--brand-opacity1);
	padding: 4px 8px;
	box-sizing: border-box;
	text-align: center;
	font: var(--font-1);
	line-height: 1.5rem;
	border-radius: 8px;
	width: 80px;
}

.upload-files-cover {
	background: var(--brand-blue);
	color: var(--white);
	line-height: 40px;
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	right: 0;
	text-align: center;
	pointer-events: none;
}

.this-bg-give-to-son {
	background: none;
}

.this-bg-give-to-son>div {
	background: var(--white);
	border-radius: 16px;
}

.settle-in-process ul li {
	padding: 8px;
	box-sizing: border-box;
	background: var(--brand-blue);
	color: var(--white);
	border-radius: 8px;
}

.settle-in-information {
	padding: 16px;
	text-align: justify;
	color: var(--black-opacity7);
	font: var(--font-1);
	line-height: 1.5rem;
}

.input-p {
	white-space: nowrap;
}

/* this is experts-engineers-end */

/* this is style of home-start */
.home-container {
	width: 100vw;
	height: 100vh;
}

.home-second-viewport-img {
	background-image: url(.././images/home2v1.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.home-third-viewport-img {
	background-image: url(.././images/home3.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.home-forth-viewport-img {
	background-image: url(.././images/home4.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.title-h1 {
	font: var(--font-15h1);
	word-wrap: break-word;
	word-break: break-all;
	white-space: nowrap;
}

.home-4-title {
	margin-top: 128px;
}

.home-4-title h1 {
	font: var(--font-15h1);
	padding-left: 8px;
	box-sizing: border-box;
	border-left: 4px solid var(--white);
	color: var(--white);
}

.white-237-transition {
	background: var(--white237);
	transition: all 0.3s;
}

.white-237-transition:hover {
	background: var(--white);
}

.flex-1-and-4-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 24.56vh repeat(2, 18vh);
}

.grid-row-2span {
	grid-column: 1 / span 2;
}

.min-width680 {
	min-width: 680px;
}

.click-area-cover {
	display: inline-block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 70%;
	z-index: 999;
	/* background: rgba(0, 0, 0, 0.1); */
	cursor: pointer;
}

.middle-btn {
	display: inline-block;
	width: 108px;
	font: var(--font-1);
	line-height: 40px;
	text-align: center;
	transition: all 0.3s;
	border-radius: 4px;
	white-space: nowrap;
}

.small-btn:hover,
.middle-btn:hover,
.heavy-btn:hover {
	opacity: 0.7;
}

.small-btn {
	display: inline-block;
	width: 96px;
	font: var(--font-1-Medium);
	line-height: 38px;
	background: var(--brand-opacity1);
	color: var(--brand-blue);
	text-align: center;
	transition: all 0.3s;
	border-radius: 4px;
	white-space: nowrap;
}

.blue-btn {
	background: var(--brand-blue);
	color: var(--white) !important;
}

.home-list-item-p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font: var(--font-1);
	color: var(--black-opacity5);
}

.home-primary-item-title,
.home-side-portion-title {
	font: var(--font-15h1);
}

.home-item-title {
	font: var(--font-1-Medium);
}

.padding-bottom-50 {
	padding-bottom: 50px;
}

.line-decoration {
	display: inline-block;
	width: 90px;
	height: 4px;
	background: var(--brand-green);
	border-radius: 4px;
}

.heavy-btn {
	height: 56px;
	width: 172px;
	color: var(--white);
	font: var(--font-125-Medium);
	text-align: center;
	border-radius: 8px;
	white-space: nowrap;
}

.green-btn {
	background: var(--brand-green);
	transition: all 0.3s;
}

.home-blue-btn {
	background: var(--brand-blue);
	transition: all 0.3s;
}

.home-side-portion-p {
	color: var(--black-opacity5);
	font: var(--font-1);
}

.green-border-btn {
	border: 2px solid var(--brand-green);
	color: var(--brand-green);
	transition: all .3s;
}

.blue-border-btn {
	border: 2px solid var(--brand-blue);
	color: var(--brand-blue);
	transition: all .3s;
}

.white {
	color: var(--white);
	border-left: 4px solid var(--white);
}

.blue-border-btn:hover {
	background: var(--brand-blue);
	color: var(--white);
}

.green-border-btn:hover {
	background: var(--brand-green);
	color: var(--white);
}

.number-title {
	font: var(--font-1);
	color: var(--white);
	opacity: 0.6;
}

.home-4-number {
	font: var(--font-2h3);
	color: var(--white);
}

.home-profile-picture {
	width: 96px;
	height: 124px;
	border-radius: 8px;
	overflow: hidden;
}

.home-profile-picture img {
	width: 100% !important;
	height: auto !important;
}

.home-4-item {
	background: var(--white237);
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
}

.home-4-head {
	width: 64px;
	min-height: 240px;
	background: var(--brand-green);
	color: var(--white);
	font: var(--font-15h1);
	border-radius: 8px;
}

.blue {
	background: var(--brand-blue) !important;
}

.home-4-btn {
	width: 96px;
	font: var(--font-1-Medium);
	line-height: 38px;
	text-align: center;
	background: var(--black-opacity1);
	transition: all 0.3s;
	border-radius: 8px;
}

.home-4-btn:hover {
	line-height: 44px;
}

.home-4-more-btn {
	display: inline-block;
	width: 172px;
	font: var(--font-125);
	line-height: 56px;
	background: var(--white-opacity1);
	backdrop-filter: blur(10px);
	text-align: center;
	align-self: center;
	transition: all 0.3s;
	border-radius: 12px;
	color: var(--white);
}

.home-4-more-btn:hover {
	background: var(--white-opacity5);
}

.home-4-item-hover {
	display: inline-block;
	backdrop-filter: blur(10px);
	position: absolute;
	width: 101%;
	height: 100%;
	left: 0;
	top: 0;
	left: -20%;
	right: 0;
	bottom: 0;
	transition: all 0.3s ease-in-out;
	opacity: 0;
}

.home-4-item:hover .home-4-item-hover {
	left: 0;
	opacity: 1;
}

.home-4-item-hover button {
	background: var(--white);
	color: var(--black);
	opacity: 1;
	transition: all .3s;
}

/* this is style of home-end */

/* this is style of contact US-start */
.contact-us-title {
	font: var(--font-15h1);
	color: var(--black);
}

.contact-us-p {
	font: var(--font-1);
	text-indent: 2rem;
	text-align: justify;
	color: var(--black-opacity7);
	line-height: 2rem;
}

.contact-us-address {
	font: var(--font-1);
	color: var(--black);
}

.contact-us-number {
	font: var(--font-125-Medium);
	color: var(--black);
}

.contact-us-map {
	max-width: 40.41vw;
	height: auto;
	border-radius: 16px 0 0 16px;
}

.contact-main {
	border-radius: 0 16px 16px 0;
}

/* this is style of contact US-end */
/* editor start */
.edui-editor {
	width: inherit !important;
}

.edui-default {
	width: inherit !important;
}

.editor {
	min-height: 200px;
}

/* editor end */

/* login-start */
.loginbox {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--white);
	gap: 24px;
	padding-top: 56px;
	box-sizing: border-box;
	/*background-image: url(.././images/log-bg.png);*/
	/*background-position: center -200px;*/
	/*background-size: cover;*/
	/*background-repeat: no-repeat;*/
}

.loginbox p {
	font-size: 2rem;
	font-weight: 700;
}

.inner-box {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 32px;
}

.inner-box img {
	width: 24px;
	height: 24px;
}

.inner-box input,
.inner-box button {
	all: unset;
	line-height: 40px;
	font-size: 1.2rem;
}

.phone-box,
.code-box {
	display: flex;
	align-items: center;
	width: 400px;
	border-radius: 16px;
	background: rgba(192, 193, 221, 0.3);
	backdrop-filter: blur(20px);
	padding-left: 12px;
	box-sizing: border-box;
	gap: 12px;
	height: 64px;
}

.code-box input {
	width: 100%;
}

.code-box button {
	white-space: nowrap;
	line-height: 40px;
	color: var(--brand-blue);
	padding: 0 12px;
	box-sizing: border-box;
}

/* login-end */

/* success-page-start */
.success {
	margin: 100px 0;
}

.success-container {
	height: 50vh;
	width: 50vw;
}

.success-img {
	width: 378px;
	height: 378px;
}

.success h1 {
	font: var(--font-15h1);
}

/* success-page-end */

/* search-page-start */
.search-list-state span {
	position: absolute;
	right: 0;
	top: 0;
	padding: 4px 12px;
	background: var(--brand-opacity5);
	color: var(--white);
	border-radius: 0 8px 0 8px;
	font: var(--font-1);
}

.examine-result {
	display: inline-block;
	position: absolute;
	right: 0;
	top: 0;
	width: 70%;
	padding: 12px;
	background: rgba(222, 109, 27, 0.1);
	color: var(--orange);
	font: var(--font-1-Medium);
	box-sizing: border-box;
	border-radius: 0 16px 0 16px;
	z-index: 10;
}

.page-tool {
	width: 48px;
	height: 48px;
}

/* search-page-end */

.layui-layer-btn .layui-layer-btn0 {
	border: none !important;
	background: var(--brand-blue) !important;
	padding: 8px 16px !important;
	border-radius: 12px !important;
	width: 88px;
	text-align: center;
}

.layui-layer-btn .layui-layer-btn1 {
	padding: 8px 16px !important;
	border-radius: 12px !important;
	width: 88px;
	text-align: center;
}

.layui-layer-btn a {
	border: none !important;
}

.layui-layer-btn {
	text-align: center !important;
}

[v-cloak] {
	display: none;
}

.spanon {
	background-color: var(--brand-opacity7);
	color: #fff !important;
}

.tecnology-area span {
	cursor: pointer;
}

/* flex */
.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-row {
	display: flex;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-nowrap {
	flex-wrap: nowrap;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.align-start {
	align-items: flex-start;
}

.align-end {
	align-items: flex-end;
}

.align-center {
	align-items: center;
}

.align-stretch {
	align-items: stretch;
}

/* flex */

button {
	white-space: nowrap;
}

/* gap */

.gap2 {
	gap: 2px;

}

.gap4 {
	gap: 4px;
}

.gap6 {
	gap: 6px;
}

.gap8 {
	gap: 8px;
}

.gap12 {
	gap: 12px;
}

.gap16 {
	gap: 16px;
}

.gap24 {
	gap: 24px;
}

.gap32 {
	gap: 32px;
}

.gap40 {
	gap: 40px;
}

.gap48 {
	gap: 48px;
}

.padding2 {
	padding: 2px;
	box-sizing: border-box;
}

.padding4 {
	padding: 4px;
	box-sizing: border-box;
}

.padding6 {
	padding: 6px;
	box-sizing: border-box;
}

.padding8 {
	padding: 8px;
	box-sizing: border-box;
}

.padding12 {
	padding: 12px;
	box-sizing: border-box;
}

.padding16 {
	padding: 16px;
	box-sizing: border-box;
}

.padding24 {
	padding: 24px;
	box-sizing: border-box;
}

.padding100-0 {
	padding: 100px 0;
	box-sizing: border-box;
}

.padding-bottom-100 {
	padding-bottom: 100px;
}

/* gap */

/* radius */
.radius2 {
	border-radius: 2px;
}

.radius4 {
	border-radius: 4px;
}

.radius8 {
	border-radius: 8px;
}

.radius12 {
	border-radius: 12px;
}

.radius16 {
	border-radius: 16px;
}

.radius20 {
	border-radius: 20px;
}

.radius24 {
	border-radius: 24px;
}

.radius4-0-4-0 {
	border-radius: 4px 0 4px 0;
}

.radius8-0-8-0 {
	border-radius: 8px 0 8px 0;
}

.radius-top4 {
	border-radius: 4px 4px 0 0;
}

.radius-top8 {
	border-radius: 8px 8px 0 0;
}

.radius-top12 {
	border-radius: 12px 12px 0 0;
}

.radius-top16 {
	border-radius: 16px 16px 0 0;
}

.radius-bottom4 {
	border-radius: 0 0 4px 4px;
}

.radius-bottom8 {
	border-radius: 0 0 8px 8px;
}

.radius-bottom12 {
	border-radius: 0 0 12px 12px;
}

.radius-bottom16 {
	border-radius: 0 0 16px 16px;
}

/* radius */

.width100 {
	width: 100%;
}

.height100 {
	height: 100%;
}

.w-h-100v {
	width: 100vw;
	height: 100vh;
}


.relative {
	position: relative;
}

.grid-rows-2columns {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr;
}

.grid-3rows-2columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* grid-template-rows: 24.56vh repeat(2, 18vh); */
}

.grid-row-4columns {
	display: grid;
	grid-template-columns: repeat(4, 16.45vw);
	grid-template-rows: 240px;
	width: 100%;
}

.name-h2 {
	white-space: nowrap;
	font: var(--font-125-Medium);
}

.only-row {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.only-2row {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.only-5row {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

.item-symbol {
	display: inline-block;
	position: absolute;
	right: 0;
	top: 0;
	padding: 4px;
	box-sizing: border-box;
	min-width: 72px;
	font: var(--font-1-Medium);
	border-radius: 0 8px 0 8px;
	background: var(--brand-green);
	color: var(--white);
	text-align: center;
}

.item-p {
	font: var(--font-1);
	color: var(--black);
	line-height: 1.5rem;
	word-wrap: break-word;
	word-break: break-all;
}

.banner-img-display {
	width: 100vw;
	height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.item-portrait {
	width: 40px;
	height: 40px;
	overflow: hidden;
}

.item-portrait img {
	width: 100%;
	height: 100%;
}

.border-left-blue {
	border-left: 4px solid var(--brand-opacity5);
}

.border-left-green {
	border-left: 4px solid var(--green-opacity7);
}

.contact-p li {
	list-style: circle;
	font-size: 1.15rem;
	opacity: .8;
	line-height: 2rem;
	text-align: justify;
}

.form-normal input {
	border: 1px solid var(--form-border);
	width: 100%;
	line-height: 52px;
	padding-left: 12px;
	box-sizing: border-box;
	outline: 1px solid var(--white);
	transition: all .3s;
	border-radius: 8px;
}

.form-normal textarea {
	border: 1px solid var(--form-border);
	width: 100%;
	line-height: 1.5rem;
	height: 96px;
	padding: 12px;
	box-sizing: border-box;
	outline: 1px solid var(--white);
	transition: all .3s;
	word-wrap: break-word;
	word-break: break-all;
	border-radius: 8px;
}

.form-normal input:focus,
.form-normal textarea:focus {
	outline: 1px solid var(--brand-blue);
}

.form-normal input:hover,
.form-normal textarea:hover {
	outline: 1px solid var(--brand-blue);
}

.form-normal-disabled select,
.form-normal-disabled input {
	background: var(--black-opacity1);
	width: 100%;
	line-height: 52px;
	padding-left: 12px;
	box-sizing: border-box;
	border-radius: 8px;
	opacity: 0.7;
	min-height: 52px;
}

.form-normal-disabled .only-read {
	width: 100%;
	line-height: 1.5rem;
	background: var(--black-opacity1);
	padding: 12px;
	box-sizing: border-box;
	border-radius: 8px;
	color: var(--black-opacity7);
}

.only-read * {
	width: 100%;
	line-height: 1.5rem;
	background: none !important;
	color: var(--black-opacity7);
}

.form-normal-disabled textarea {
	background: var(--black-opacity1);
	width: 100%;
	line-height: 1.5rem;
	height: 96px;
	padding: 12px;
	box-sizing: border-box;
	outline: 1px solid var(--white);
	transition: all .3s;
	word-wrap: break-word;
	word-break: break-all;
	border-radius: 8px;
	border-radius: 8px;
	opacity: 0.7;
}

.collect-portrait {
	height: 120px;
	width: 93px;
	overflow: hidden;
}

.collect-portrait img {
	width: 100%;
}

.download-btn {
	white-space: nowrap;
	margin-left: 12px;
	color: var(--brand-blue);
	transition: all .3s;
}

.download-btn:hover {
	opacity: 0.7;
}

.nav-user-pic {
	background-image: url(../images/demand-banner.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 32px;
	height: 32px;
	display: inline-block;
	border-radius: 16px;
}

.nav-user-arrow {
	width: 24px;
	height: 24px;
}

.nav-user {
	display: flex;
	align-items: center;
	gap: 2px;
}

.nav-user span {
	max-width: 120px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.exit {
	display: none;
	position: absolute;
	bottom: -272px;
	right: 0;
	left: 0;
	background: var(--white-opacity9);
	border-radius: 8px;
	box-sizing: border-box;
	backdrop-filter: blur(20px);
	transition: all 0.3s;
	flex-direction: column;
	z-index: 199;
	min-width: 150px;
}

.exit a {
	display: inline-block;
	padding: 12px 16px;
	box-sizing: border-box;
	transition: all 0.3s;
	border-radius: 4px;
}

.exit a:hover {
	color: var(--brand-blue);
	background: var(--black-opacity1);
}

.nav-hover {
	background: var(--black-opacity1);
	padding: 6px;
	border-radius: 8px;
	box-sizing: border-box;
	position: relative;
	z-index: 200;

}

.nav-hover:hover .exit {
	display: flex;
}

.upload-img img {
	max-height: 156px;
	height: 100%;
}

.upload-img {
	border: 3px dashed var(--black-opacity1);
	width: 300px;
	margin-right: 8px;
	height: 100%;
	overflow: hidden;
}

.switch {
	position: absolute;
	right: 16px;
	top: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.grid-flex img {
	cursor: pointer;
	width: 24px;
	height: 24px;
	opacity: .2;
}

.on-select img {
	opacity: 1;
}

.content-box img {
	width: 100% !important;
	height: auto !important;
	border-radius: 8px !important;
}

.home-bg-img {
	position: absolute;
	top: 0;
	z-index: -1;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.contacts img {
	width: 32px;
	height: 32px;
}

.text-overflow {
	text-overflow: ellipsis;
	overflow: hidden;
}

.blur20 {
	background: var(--brand-opacity1);
	color: var(--white);
	backdrop-filter: blur(20px);
}

.tips-span {
	font-size: 0.875rem;
	color: var(--orange);
}

.service-banner-img {
	background: url(.././images/service-banner.jpg) top center no-repeat;
	background-size: contain;
	padding-top: 228px;
	min-height: 600px;
}

.service-menu-container li {
	border-radius: 8px;
	width: 100%;
	height: 136px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s;
}

.triangle {
	width: 0;
	height: 0;
	border-width: 16px 16px 0 0;
	border-style: solid;
	border-color: transparent var(--white-opacity5)  transparent transparent;
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	transform: rotateZ(45deg);
	display: none;
	transition: all .3s;
}

.service-menu-container li:hover {
	background: var(--brand-opacity5) !important;
}

.service-menu-container li:hover .triangle {
	border-color: transparent var(--brand-opacity5)  transparent transparent;
}

.service-menu-container li:hover h1 {
	color: var(--white) !important;
}

.service-menu-container li:hover p {
	color: var(--white-opacity5) !important;
}

.service-menu-container li span {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 48px;
	height: 48px;
	margin-right: 8px;
	/* transition: all 0.3s; */
}

.white-bg-5-border {
	background: var(--white-opacity5) !important;
	cursor:pointer;
	border-bottom: 4px solid var(--white);
}

.service-menu-container .img-one {
	background-image: url(.././images/service-first-blue.png);
}

.service-menu-container li:hover .img-one {
	background-image: url(.././images/service-first-white.png);
}

.img-one-act{
	background-image: url(.././images/service-first-white.png);
}

.service-menu-container .img-two {
	background-image: url(.././images/service-second-blue.png);
}

.service-menu-container li:hover .img-two {
	background-image: url(.././images/service-second-white.png);
}

.img-two-act {
	background-image: url(.././images/service-second-white.png);
}

.service-menu-container .img-three {
	background-image: url(.././images/service-third-blue.png);
}

.service-menu-container li:hover .img-three {
	background-image: url(.././images/service-third-white.png);
}

.img-three-act {
	background-image: url(.././images/service-third-white.png);
}

.service-menu-container li div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.service-menu-container li:not(:last-child) {
	margin-right: 16px;
}

.service-title-h1 {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--brand-blue);
}

.service-title-p {
	font-size: 1rem;
	color: var(--black-opacity5);
}

.white-text {
	color: var(--white) !important;
}

.white-text-5 {
	color: var(--white-opacity5) !important;
}

.black-text-7 {
	color: var(--black-opacity7) !important;
}

.brand-blue-text-8 {
	color: var(--brand-opacity8) !important;
}

.brand-blue-bg {
	background: var(--brand-blue) !important;
}

.white237-bg {
	background: var(--white237) !important;
}

.white-bg-5 {
	background: var(--white-opacity5) !important;
	cursor:pointer;
}

.C2C2E7 {
	background: #C2C2E7;
}

.white-bg {
	background: var(--white) !important;
}

.service-video-list {
	display: grid;
	grid-template-columns: repeat(4, 330px);
	grid-template-rows: repeat(4, 1fr);
	background: var(--white);
}

.number-word-wrap {
	word-wrap: break-word;
	word-break: break-all;
}

.text-wrap {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.text-wrap2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.service-item-h2 {
	font-size: 1rem;
	font-weight: 400;
	max-width: 290px;
	height: 44px;
}

.mb4 {
	margin-bottom: 4px;
}

.mb6 {
	margin-bottom: 6px;
}

.mb8 {
	margin-bottom: 8px;
}

.mb24 {
	margin-bottom: 24px;
}

.service-technology-label {
	font: var(--font-1-Medium);
	/* line-height: 1rem; */
}

.text-hidden {
	text-overflow: ellipsis;
	overflow: hidden;
}

.technology-box {
	height: 1.15rem;
	overflow: hidden;
	max-width: 314px;
	/* background: #0E9B94; */
}

.video-release-date {
	align-self: flex-end;
	white-space: nowrap;
}

.video-box {
	overflow: hidden;
}

.video-box video {
	width: 100%;
	height: 100%;
}

.detail-video-viewed img,
.video-viewed img {
	width: 24px;
	height: 24px;
	margin-right: 4px;
}

.video-viewed span {
	font-size: 0.75rem;
}

.video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
	z-index: 20;
}

.video-mask {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(36, 41, 51, 0.20) 0%, rgba(36, 41, 51, 0.20) 76.10%, rgba(36, 41, 51, 0.75) 100%);
	pointer-events: none;
}

.item-title-h2 {
	font-size: 1.5rem;
	font-weight: 400;
}

.item-img {
	width: 240px;
	height: 220px;
	overflow: hidden;
}

.item-img img {
	width: 100%;
	height: 100%;
}

.item-img200 {
	width: 200px;
	height: 200px;
	overflow: hidden;
}

.item-img200 img {
	/* width: 100%; */
	height: 100%;
}

.mr16 {
	margin-right: 16px;
}

.service-second-item {
	display: grid;
	grid-template-columns: 240px auto;
	grid-template-rows: 1fr;
}

.service-third-item {
	display: grid;
	grid-template-columns: 240px auto;
	grid-template-rows: 1fr;
}

.service-item-info p p span,
.service-item-info p,
.service-item-info p p {
	font-size: 1rem;
	font-weight: 400;
	font-family: 'aliRegular';
	font-style: normal;
	color: var(--black-opacity7);
}

.service-item-info p img,
.service-item-info p,
.service-item-info img {
	width: 100% !important;
}

.user-portrait {
	width: 32px;
	height: 32px;
	overflow: hidden;
	border-radius: 100px;
}

.user-portrait img {
	width: 100%;
}

.user-name {
	font-size: 0.875rem;
	white-space: nowrap;
}

.item-release-date {
	position: absolute;
	right: 16px;
	top: 16px;
	font-size: 1rem;
	color: var(--black-opacity7);
	white-space: nowrap;
}

.service-third-list,
.service-second-list {
	display: grid;
	grid-template-rows: repeat(6, 200px);
	grid-template-columns: 100%;
}

.recommend-box {
	height: 64px;
	border-radius: 8px 8px 0 0;
	border-bottom: 1px solid var(--black-opacity1);
}

.recommend-box h1 {
	font-size: 1.25rem;
	font-weight: 400;
	margin-left: 16px;
}

.recommend-video-box {
	height: 72px;
	overflow: hidden;
	background: var(--black);
	/* background: var(--white237); */
	min-width: 110px;
	max-width: 111px;
}

.recommend-video-box img,
.recommend-video-box video {
	width: 100%;
	height: 100%;
}

.recommend-video-mask {
	background: var(--black-opacity7);
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.recommend-h2 {
	font-size: 1rem;
	color: var(--black);
	font-weight: 400;
	width: 100%;
}

.recommend-video-viewed img {
	width: 24px;
	height: 24px;
}

.recommend-video-viewed span {
	font-size: 0.875rem;
}

.playing span {
	font-size: 0.875rem;
}

.playing img {
	width: 12px;
	height: 16px;
}

.article-detail-title {
	height: 64px;
	padding: 0 16px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--black-opacity1);
}

.service-tips {
	font-size: 1rem !important;
	font-weight: 400 !important;
	color: var(--brand-blue) !important;
}

.text-label {
	font-size: 1rem;
	color: var(--black-opacity7);
}

.detail-video-box video {
	max-height: 600px;
}

.list-name {
	max-width: 200px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.text-special-set {
	/* text-overflow: ellipsis;
	overflow: hidden; */
	max-width: 360px;
	color: var(--brand-opacity7);
	font: var(--font-1-Medium);
	word-wrap: break-word;
	word-break: break-all;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.input-set {
	margin: 0!important;
}

.label-set {
	font-weight: 400 !important;
	margin: 0 !important;
}

.red-bg {
	background: var(--red);
}

.red-text {
	color: var(--red);
}

.orange-bg {
	background: var(--orange) !important;
}

.orange-text {
	color: var(--orange);
}

.green-bg {
	background: var(--green);
}

.green-text {
	color: var(--green);
}

.view-icon {
	width: 24px !important;
	height: 24px !important;
	background: var(--black-opacity5);
	backdrop-filter: blur(20px);
	padding: 8px;
}

.layui-layer-btn {
	background: var(--white) !important;
}

.c-pointer {
	cursor: pointer;
}

.outer-link div {
	margin-right: 12px;
}

.get-service-btn {
	width: 120px;
	line-height: 44px;
	background: rgba(234, 121, 18, 0.1);
	color: #EA4512;
	font-size: 1rem;
	white-space: nowrap;
	text-align: center;
	border-radius: 8px;
	box-sizing: border-box;
	transition: all .3s;
}

.get-service-btn:hover {
	background: rgba(234, 121, 18, .2);
}