/* main-visual */
.main-visual-wrapper {
	position: relative;
}

.main-visual-wrapper .main-visual-img {
	height: clamp(360px, 44.0625vw, 846px);
	background: url('/resources/images/onestar/main-visual-img-pc_v2.png') center/cover
		no-repeat;
}

.btn-wrapper {
	bottom: -60px;
	position: absolute;
	padding: 10px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	width: 1100px;
	height: 124px;
	left: 50%;
	gap: 10px;
	border-radius: 60px;
	background: #fff;
	transform: translateX(-50%);
}

.btn-wrapper .apply-onestar-service-btn {
	display: flex;
	padding: 29px 28px 29px 50px;
	justify-content: space-between;
	align-items: center;
	width: 660px;
	border-radius: 50px;
	background: linear-gradient(90deg, #4780FB 0%, #8C6AED 100%);
}

.btn-wrapper .delivery-system-btn {
	display: flex;
	width: 410px;
	padding: 29px 28px 29px 50px;
	justify-content: space-between;
	align-items: center;
	border-radius: 50px;
	background: #ABB9D4;
}

.btn-wrapper p {
	color: #FFF;
	font-size: 32px;
	font-weight: 700;
}

@media ( max-width : 1079px) {
	.btn-wrapper {
		bottom: -32px;
		width: 350px;
		height: 64px;
		gap: 4px;
		padding: 4px;
	}
	.btn-wrapper img {
		width: 24px;
		height: 24px;
	}
	.btn-wrapper .apply-onestar-service-btn {
		width: 180px;
		padding: 8px 16px 8px 26px;
	}
	.btn-wrapper .delivery-system-btn {
		width: 158px;
		padding: 8px 16px 8px 26px;
	}
	.btn-wrapper p {
		color: #FFF;
		font-size: 14px;
		font-weight: 700;
		line-height: 20px;
	}
}

@media ( max-width : 510px) {
	.main-visual-wrapper .main-visual-img {
		width: 100%;
		height: 552px;
		background: url('/resources/images/onestar/main-visual-img-mo_v2.png') no-repeat center;
	}
}
/* user-worry */
.info-wrap {
	text-align: center;
}

.info-wrap h2 {
	margin-bottom: 70px;
	color: #3D3D3D;
	text-align: center;
	font-size: 52px;
	font-weight: 700;
}

.grey-bg {
	padding: 216px 0;
	background-color: #F4F6F8;
}

.user-worry-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
}

.user-worry-wrap-1 {
	margin-bottom: 30px;
}

.user-worry-wrap-2 {
	margin-left: 23.5px;
}

.user-worry-wrap .user-worry-box {
	padding: 32px 52px;
	display: flex;
	align-items: center;
	text-align: start;
	height: 156px;
	border-radius: 40px;
	background: #FFF;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
	gap: 40px;
}

.user-worry-wrap .user-worry-box p {
	color: #464646;
	font-size: 24px;
	font-weight: 500;
	line-height: 36px;
}

.user-worry-wrap .user-worry-box img {
	width: 92px;
	height: 92px;
}

.user-worry-wrap .user-worry-box-1 {
	min-width: 408px;
}

.user-worry-wrap .user-worry-box-2 {
	min-width: 816px;
}

.user-worry-wrap .user-worry-box-3 {
	min-width: 679px;
}

.user-worry-wrap .user-worry-box-4 {
	min-width: 618px;
}

@media ( max-width : 1384px) {
	.grey-bg {
		padding: 216px 15px;
	}
	.user-worry-wrap .user-worry-box {
		padding: 12px 52px;
		gap: 20px;
	}
	.user-worry-wrap .user-worry-box p {
		font-size: 20px;
		line-height: 32px;
	}
	.user-worry-wrap .user-worry-box-1 {
		min-width: 428px;
	}
	.user-worry-wrap .user-worry-box-2 {
		min-width: 716px;
	}
	.user-worry-wrap .user-worry-box-3 {
		min-width: 579px;
	}
	.user-worry-wrap .user-worry-box-4 {
		min-width: 518px;
	}
}

@media ( max-width : 1236px) {
	.user-worry-wrap .user-worry-box {
		padding: 6px 32px;
		gap: 10px;
	}
	.user-worry-wrap .user-worry-box p {
		font-size: 18px;
		line-height: 32px;
	}
	.user-worry-wrap .user-worry-box-1 {
		min-width: 328px;
	}
	.user-worry-wrap .user-worry-box-2 {
		min-width: 616px;
	}
	.user-worry-wrap .user-worry-box-3 {
		min-width: 479px;
	}
	.user-worry-wrap .user-worry-box-4 {
		min-width: 418px;
	}
}

@media ( max-width : 1079px) {
	.info-wrap h2 {
		color: #3D3D3D;
		text-align: center;
		font-size: 18px;
		font-weight: 600;
		line-height: 24px;
	}
	.grey-bg {
		padding: 101px 15px 30px;
	}
	.user-worry-wrap {
		display: inline;
	}
	.user-worry-wrap .user-worry-box {
		margin-bottom: 10px;
		padding: 16px 16px 16px 20px;
		height: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
	}
	.user-worry-wrap .user-worry-box p {
		font-size: 16px;
		line-height: 24px;
	}
	.user-worry-wrap-1 {
		margin-bottom: 0;
	}
	.user-worry-wrap-2 {
		margin-left: 0;
	}
}

@media ( max-width : 639px) {
	.user-worry-wrap {
		display: inline;
	}
	.user-worry-wrap .user-worry-box {
		min-width: 330px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 16px;
		gap: 10px;
	}
	.user-worry-wrap .user-worry-box p {
		font-size: 14px;
		line-height: 20px;
	}
	.user-worry-wrap .user-worry-box img {
		width: 40px;
		height: 40px;
	}
}

/* 이런 고민, 원스타가 대신 해결합니다. */
.onestar-info-wrap {
	margin: 193px 0 228px;
	text-align: center;
}

.onestar-info-wrap h2 {
	margin-bottom: 70px;
	color: #3C3C3C;
	text-align: center;
	font-size: 52px;
	font-weight: 700;
	line-height: 74px;
}

.onestar-info-wrap p {
	color: #464646;
	font-size: 28px;
	font-weight: 500;
	line-height: 44px;
}

.onestar-info-wrap strong {
	color: #464646;
	font-size: 28px;
	font-weight: 700;
	line-height: 44px;
}

@media ( max-width : 1079px) {
	.onestar-info-wrap {
		margin: 80px 0 89px;
	}
	.onestar-info-wrap h2 {
		margin-bottom: 30px;
		font-size: 18px;
		font-weight: 600;
		line-height: 28px;
	}
	.onestar-info-wrap img {
		margin-top: 2px;
		width: 143px;
		height: 22px;
	}
	.onestar-info-wrap p {
		font-size: 14px;
		line-height: 24px;
	}
	.onestar-info-wrap strong {
		font-size: 14px;
		line-height: 24px;
	}
}

/* ========= Services ========= */
.services {
	max-width: 1640px;
	margin: 0 auto;
	padding: 0 140px;
}

.services__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: 100%;
	align-items: stretch;
	justify-items: stretch;
}

.service {
	position: relative;
	overflow: hidden;
	border-radius: 40px;
	width: 100%;
	aspect-ratio: 810/524;
}

.service--wide {
	grid-column: 1/-1;
	width: 100%;
	aspect-ratio: auto;
	min-height: clamp(300px, 40vw, 540px);
}

.service__bg {
	position: absolute;
	width: 100%;
	height: 100%;
}

.service__body {
	padding: 65px 70px;
	position: relative;
	display: flex;
	flex-direction: column;
}

.service__title {
	margin-bottom: 10px;
	color: #373C59;
	font-size: 34px;
	font-weight: 700;
}

.service__title-3 {
	margin-top: 40px;
}

.service__desc {
	margin-bottom: 40px;
	color: #3C3C3C;
	font-size: 20px;
	font-weight: 600;
	line-height: 36px;
}

.service-detail {
	display: flex;
}

.service-detail-1 {
	margin-bottom: 10px;
}

.service-detail .service-detail-text {
	margin-right: 10px;
	color: #101010;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
}

.service-detail .service-detail-desc {
	color: #3C3C3C;
	font-size: 18px;
	font-weight: 500;
	line-height: 28px;
}

.service-link {
	padding: 11px 32px 11px 40px;
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 176px;
	height: 46px;
	border-radius: 30px;
	border: 1px solid #101010;
	gap: 8px;
	color: #101010;
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
}

.service-link:hover {
	transform: scale(1.02);
}

.service-link:active {
	transform: scale(.98);
}

@media ( max-width : 1530px) {
	.services {
		padding: 0 40px;
	}
	.service__body {
		padding: 38px 50px;
	}
	.service__title {
		font-size: 36px;
	}
	.service__desc {
		margin-bottom: 20px;
		font-size: 18px;
		line-height: 24px;
		margin-bottom: 40px;
	}
	.service-detail .service-detail-text {
		font-size: 16px;
		line-height: 20px;
	}
	.service-detail .service-detail-desc {
		font-size: 16px;
		line-height: 20px;
	}
	.arrow-right {
		width: 20px;
		height: 20px;
	}
}

@media ( max-width : 1190px) {
	.service-link {
		padding: 8px 10px;
		margin-top: 18px;
		width: 126px;
		height: 42px;
		color: #101010;
		font-size: 16px;
		line-height: 24px;
	}
}

@media ( max-width : 1079px) {
	.services-pc {
		display: none;
	}
	.services__grid {
		grid-template-columns: 1fr;
	}
	.service--wide {
		grid-column: auto;
	}
}

@media ( max-width : 600px) {
	.services {
		padding: 0 20px;
	}
	.service__body {
		padding: 28px;
	}
	.service__title {
		font-size: 22px;
	}
	.service__desc {
		margin-bottom: 4px;
		font-size: 12px;
		line-height: 18px;
	}
	.service-detail-1 {
		margin-bottom: 6px;
	}
	.service-detail .service-detail-text {
		font-size: 10px;
		line-height: 14px;
	}
	.service-detail .service-detail-desc {
		font-size: 10px;
		line-height: 14px;
	}
	.service-link {
		/* padding: 4px 16px 4px 20px; */
		margin-top: 14px;
		width: 112px;
		height: 32px;
		font-size: 14px;
		line-height: 24px;
	}
	.arrow-right {
		width: 16px;
		height: 16px;
	}
}

/* service-mobile */
.service-mo {
	display: none;
}
/* ========== Card ========== */
@media ( max-width : 1079px) {
	.service-mo {
		display: block;
	}
}

.service-mo {
	margin: 0 15px;
}

.service-card {
	max-width: 330px;
	margin: 20px auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
	overflow: hidden;
}

/* 상단 히어로 */
.service-card__hero {
	position: relative;
	aspect-ratio: 16/10;
	background-image: url('/resources/images/onestar/onestar-delivery-mo.svg');
	background-size: cover;
	background-position: center;
	isolation: isolate;
}

.service-card__hero-2 {
	position: relative;
	aspect-ratio: 16/10;
	background-image: url('/resources/images/onestar/onestar-fulfillment-mo.svg');
	background-size: cover;
	background-position: center;
	isolation: isolate;
}

.service-card__hero-3 {
	position: relative;
	aspect-ratio: 16/10;
	background-image: url('/resources/images/onestar/onestar-matching-mo.svg');
	background-size: cover;
	background-position: center;
	isolation: isolate;
}

.service-card__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 120% at 0% 30%, rgba(143, 184, 255, .55)
		0%, rgba(143, 184, 255, .35) 35%, rgba(255, 255, 255, 0) 70%);
	z-index: 0;
}

/* 히어로 안 텍스트 */
.service-card__hero-inner {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: center;
	gap: 12px;
	padding: clamp(20px, 5vw, 44px);
}

.service-card__title {
	color: #27304a;
	font-size: clamp(26px, 6vw, 44px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
}

.service-card__subtitle {
	color: #2f3348;
	font-size: clamp(14px, 3.8vw, 22px);
	line-height: 1.5;
	font-weight: 600;
	margin: 0;
	opacity: .9;
}

.service-card__body {
	padding: clamp(20px, 5vw, 40px);
	background: #fff;
}

.service-card__body {
	box-shadow: 16px 16px 0 0;
}

.service-card__section {
	margin: 14px 0 22px;
}

.service-card__section h3 {
	margin: 0 0 10px;
	color: #2f3348;
	font-weight: 800;
	font-size: clamp(18px, 4.5vw, 26px);
	letter-spacing: -0.01em;
}

.service-card__section p {
	margin: 0;
	color: #3a3a3a;
	font-size: clamp(15px, 3.8vw, 20px);
	line-height: 1.7;
	font-weight: 600;
}

@media ( max-width : 1079px) {
	.service-card__hero-inner {
		gap: 10px;
		padding: 38px 20px;
	}
	.service-card__title {
		margin: 0;
		line-height: 1.1;
		font-weight: 800;
		letter-spacing: -0.02em;
		color: #373C59;
		font-size: 24px;
		font-weight: 700;
	}
	.service-card__subtitle {
		margin: 0;
		color: #3C3C3C;
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		opacity: .9;
	}
	.service-card__body {
		box-shadow: 16px 16px 0 0;
	}
	.service-card__section {
		margin: 14px 0 22px;
	}
	.service-card__body {
		padding: 30px 20px;
		background: #fff;
	}
	.service-card__section {
		/* margin: 0; */
		
	}
	.service-card__section h3 {
		margin: 0 0 4px;
		letter-spacing: -0.01em;
		color: #101010;
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
	}
	.service-card__section p {
		margin: 0;
		color: #3C3C3C;
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
	}
}

/* 버튼 */
.service-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding: 12px 22px 12px 26px;
	border-radius: 999px;
	border: 1.5px solid #111;
	font-size: clamp(15px, 3.8vw, 18px);
	color: #111;
	text-decoration: none;
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

/* 원스타 파트너스 */
.partners-wrap {
	margin: 193px 0 114px 0;
	text-align: center;
}

.partners-wrap .title-en {
	margin-bottom: 20px;
	color: #296BEF;
	font-size: 32px;
	font-weight: 700;
	text-align: center;
}

.partners-wrap .title-ko {
	margin-bottom: 40px;
	color: #373C59;
	text-align: center;
	font-size: 48px;
	font-weight: 700;
}

.partners-wrap .partners-desc {
	color: #484A52;
	text-align: center;
	font-size: 24px;
	font-weight: 600;
	line-height: 36px;
}

@media ( max-width : 1079px) {
	.partners-wrap {
		margin: 96px 0 10px 0;
		text-align: center;
	}
	.partners-wrap .title-en {
		margin-bottom: 10px;
		font-size: 16px;
	}
	.partners-wrap .title-ko {
		margin-bottom: 20px;
		font-size: 24px;
	}
	.partners-wrap .partners-desc {
		font-size: 14px;
		line-height: 20px;
	}
}

/* nav */
.partners {
	position: relative;
	padding: 56px clamp(16px, 4vw, 40px) 84px;
}

.partners__container {
	padding-bottom: 80px;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

.partners__viewport {
	position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: none;
	scrollbar-width: none;
	background: transparent;
	touch-action: none;
}

.partners__track {
	display: flex;
	width: 100%;
	gap: 16px;
}

.partners__track:active {
	cursor: grabbing;
}

.partner-card {
	flex: 0 0 80px;
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.partner-card__logo {
	width: 100%;
	display: grid;
	place-items: center;
	margin-bottom: 30px;
}

.partner-card__logo img {
	max-width: 360px;
	max-height: 120px;
	width: auto;
	height: auto;
	object-fit: contain;
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}

.partner-card__name {
	margin: 0 0 14px;
	text-align: center;
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 800;
	letter-spacing: .2px;
}

.partner-card__desc {
	margin: 0;
	color: #6b7280;
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1.8;
	text-align: center;
}

.partners__nav {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.partners__btn {
	pointer-events: auto;
	position: absolute;
	top: 135px;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 9999px;
	border: 2px solid #111;
	background: transparent;
	color: #111;
	box-shadow: none;
	cursor: pointer;
	transition: transform .12s ease, background-color .12s ease;
}

.partners__btn--prev, .partners__btn--next {
	width: 46px;
	height: 46px;
	border-radius: 23px;
	border: 1px solid #101010;
}

.partners__btn--prev {
	left: -84px;
}

.partners__btn--next {
	right: -84px;
}

.partners__btn:hover {
	background: #f5f5f5;
}

.partners__btn:active {
	transform: scale(.98);
}

.partners__btn:focus-visible {
	outline: 3px solid #4f46e5;
	outline-offset: 2px;
}

.partners__btn .btn-ico {
	width: 24px;
	height: 24px;
	display: block;
}

.partners__btn .btn-ico--mirror {
	transform: scaleX(-1);
	transform-origin: center;
}

.partners__btn .btn-left {
	margin-right: 6px;
}

.partners__btn .btn-right {
	margin-left: 6px;
}

@media ( max-width : 760px) {
	.partners {
		padding: 0;
	}
	.partners__container {
		max-width: 100%;
	}
	article {
		min-width: 180px !important;
	}
}

/* Dots */
.partners__dots {
	display: none;
	margin-top: 24px;
	gap: 8px;
	justify-content: center;
}

.partners__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #d1d5db;
	cursor: pointer;
}

.partners__dot[aria-current="true"] {
	background: #6b7280;
}

/* Responsive */
@media ( max-width : 1385px) {
	.partners__btn--prev {
		left: -44px;
	}
	.partners__btn--next {
		right: -44px;
	}
}

@media ( max-width : 1280px) {
	.partners__btn--prev {
		left: 30px;
	}
	.partners__btn--next {
		right: 30px;
	}
}

@media ( max-width : 1100px) {
	.partners__track {
		gap: 36px;
	}
}

@media ( max-width : 760px) {
	.partners__btn {
		display: none;
	}
}