@charset "UTF-8";
/* hanbom.com _ BE ONE TEAM _ KimJuYeon _ 20240411 */

/*
Svc : layout
*/
#wrap,
#content.svc				{padding-top: 0; padding-bottom: 0;}
#content.svc				{overflow-x: hidden;}

body:not(.scroll-has) #header						{background: transparent; color: #fff; box-shadow: none;}
body:not(.scroll-has) svg.be-one-team path			{fill: #fff;}
@media all and (min-width: 769px) {
	body:not(.scroll-has) #header .header-right .btn.solid.large,
	body:not(.scroll-has) #header .header-right .btn.bdr-light.large	{color: #fff;}
}
@media all and (max-width: 768px) {
	body:not(.scroll-has) #header .svg-hamburger .fill-000		{fill: #fff;}
}
@media all and (min-width: 1521px){
	#content.svc .content-wrap		{max-width: calc(1440px + (var(--gutter) *2));}
}

@media (hover: hover) and (pointer: fine) {
	body:not(.scroll-has) #nav > ul > li > a > span {background-image: linear-gradient(var(--bk-100),var(--bk-100));}
}

/* Svc common*/
.btn.xlarge					{width: 100%; max-width: 280px; height: 64px; padding: 0 10px; font-size: 18px; line-height: 64px; font-weight: bold;}
.hgroup[class*="pack-down"]	{gap: 24px;}
.hgroup.pack-down-center	{text-align: center;}
.bg-000 [class*="-title"],
.bg-000 .btn.bdr-light		{color: var(--bk-100);}
.bg-fff [class*="-title"],
.bg-fff .visual-title		{color: var(--bk-0);}
.btn.white		{background-color: var(--bk-100); color: #000;}
.visual-title	{font-size: 64px; letter-spacing: -1.28px; font-weight: bold;}
@media all and (max-width: 768px) {
	.btn.xlarge					{font-size: 16px;}
	.hgroup[class*="pack-down"]	{gap: 12px;}
	.visual-title	{font-size: 32px; letter-spacing: -0.64px; font-weight: bold;}
}


.fs-40			{font-size: 40px; letter-spacing: -0.8px;}
.fs-48			{font-size: 48px; letter-spacing: -0.96px;}
.fs-120			{font-size: 120px;}
@media all and (max-width: 768px) {
	.fs-48			{font-size: 24px; letter-spacing: -0.48px;}
}



/* ma10 common*/
@media all and (min-width: 769px) {
	#content.ma10 {font-size: 18px; letter-spacing: -0.36px;}
}
#content.ma10 .section .visual-title + .swiper-container	{margin-top: 80px;}
@media all and (max-width: 768px) {
	#content.ma10 .section .visual-title + .swiper-container	{margin-top: 40px;}
}
/* ma10 > .visual */
#content.ma10 .section.visual	{overflow: hidden; padding: 60px var(--gutter); background: url('../images/svc/bg_ma10_sec01.png') no-repeat top center; background-size: cover;
	display: -webkit-flex; display: flex;
	-webkit-align-items: flex-end; align-items: flex-end;
}
#content.ma10 .section.visual h2.img-wrap	{width: 100%}
@media all and (max-width: 768px){
	#content.ma10 .section.visual	{padding-bottom: 30px;}
}
/* ma10 > .record */
#content.ma10 .section.record	{padding-top: 380px; font-size: 28px; gap: 40px; color: var(--bk-100);}
#content.ma10 .section.record .center-line	{position: relative; width: 100%; gap: 240px;}
#content.ma10 .section.record .center-line::before {content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #fff;}
#content.ma10 .section.record .center-line .pack-down	{width: 50%; gap: 160px;}
#content.ma10 .section.record .center-line .pack-down:nth-child(1){padding-top: 158px;
	-webkit-align-items: flex-end; align-items: flex-end;
}
#content.ma10 .section.record .center-line .pack-down:nth-child(2){padding-top: 464px;
	-webkit-align-items: flex-start; align-items: flex-start;
}
@media all and (max-width: 768px){
	#content.ma10 .section.record	{padding-top: 190px; font-size: 14px; gap: 20px;}
	#content.ma10 .section.record .center-line	{gap: 30px;}
	#content.ma10 .section.record .center-line .pack-down	{overflow: hidden; gap: 50px;}
	#content.ma10 .section.record .center-line .pack-down:nth-child(1)	{padding-top: 21.333vw;}
	#content.ma10 .section.record .center-line .pack-down:nth-child(2)	{padding-top: 47.2vw; padding-bottom: 21.333vw}
	#content.ma10 .section.record .center-line .pack-down:nth-child(1) .img-wrap:nth-child(1),
	#content.ma10 .section.record .center-line .pack-down:nth-child(2) .img-wrap:nth-child(2)	{width: 34.4vw;}
	#content.ma10 .section.record .center-line .pack-down:nth-child(1) .img-wrap:nth-child(2),
	#content.ma10 .section.record .center-line .pack-down:nth-child(2) .img-wrap:nth-child(1)	{width: 51.2vw;}
}
/* ma10 > .we */
#content.ma10 .section.we		{color: var(--bk-100);
	-webkit-transition: background 0.5s;
			transition: background 0.5s;
}
#content.ma10 .section.we h3			{position: relative; font-size: 80px; min-height: 111px;}
#content.ma10 .section.we h3.pack-left	{gap: 0;}

#content.ma10 .section.we h3 .we-as-one,
#content.ma10 .section.we h3 .we-as-one > div		{
	-webkit-transition: all 0.5s;
			transition: all 0.5s;
}
#content.ma10 .section.we h3 .we-as-one	{gap: 0 40px;}
#content.ma10 .we-as-one .blank			{overflow: hidden; position: relative; display: block; width: 375px; height: 200px;
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,1) 100%);
	-webkit-animation-delay: 0.4s;
			animation-delay: 0.4s;
}
#content.ma10 .section.we .step2-show,
#content.ma10 .section.we:not(.bg-fff) > .btn						{display: none;}
#content.ma10 .we-as-one .blank .rolling-txt						{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}
#content.ma10 .section.we.step2 .svg-beoneteam						{display: block; width: 728px; height: 61px;}
#content.ma10 .section.we.step2 .svg-beoneteam path					{fill: #fff;}
#content.ma10 .section.we.step2.bg-fff  .svg-beoneteam path			{fill: #000;}
#content.ma10 .section.we.step2 .step2-show							{display: block;}
#content.ma10 .section.we.step2 h3 .we-as-one > .step2-hide			{display: none;}
#content.ma10 .section.we.step2 h3 .we-as-one						{width: fit-content; gap: 0;}
#content.ma10 .section.we.step2:not(.bg-fff) .ico.arrow-down		{background-color: var(--bk-100);}
#content.ma10 .section.we.step2.bg-fff								{background: white; color:#000}
#content.ma10 .section.we.step2.bg-fff > .btn						{position: absolute; left: 50%; bottom: 0;
	-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
}
#content.ma10 .section.we.step2 > .btn > strong,
#content.ma10 .section.we.step2 > .btn > i									{
	-webkit-animation: dungdung 2s linear infinite;
			animation: dungdung 2s linear infinite;
}
@-webkit-keyframes dungdung {
	0%			{transform: translateY(0)}
	50%			{transform: translateY(-50%)}
	100%		{transform: translateY(0)}
}
@keyframes dungdung {
	0%			{transform: translateY(0)}
	50%			{transform: translateY(-50%)}
	100%		{transform: translateY(0)}
}
#content.ma10 .section.we .btn .svg-arrow							{width: 32px; height: 65px;}
@media all and (min-width: 1281px) and (max-width: 1440px) {
	#content.ma10 .section.we h3			{font-size: 5.556vw;}
}
@media all and (max-width: 1280px){
	#content.ma10 .section.we h3			{font-size: 10.667vw;}
	#content.ma10 .section.we h3 .we-as-one	{max-width: 75vw; gap: 10.667vw 5vw;
		-webkit-flex-wrap: wrap; flex-wrap: wrap;
		-webkit-justify-content: center; justify-content: center;
	}
	#content.ma10 .we-as-one .char-we		{width: 100%;}
	#content.ma10 .we-as-one .blank			{width: 50.133vw; height: 21.68vw; margin: 0 3.533vw;}
}
@media all and (max-width: 768px){
	#content.ma10 .section.we.step2 .svg-beoneteam						{width: 97.067vw; height: 8.133vw;}
	#content.ma10 .section.we.step2 .fs-20							{font-size: 16px}
	#content.ma10 .section.we.step2.bg-fff > .btn .fs-24			{font-size: 14px}
}
/* ma10 > .section.change */
#content.ma10 .section.change	{position: relative;}
#content.ma10 .section.change .we-as-one	{position: absolute;}
#content.ma10 .section.change.bg-000 > .btn		{opacity: 0;}
#content.ma10 .section.change .hgroup[class*="pack-down"]	{gap: 50px;}
#content.ma10 .section.change .svg-beoneteam	{display: block; width: 728px; height: 61px;}
#content.ma10 .section.change.bg-000 .svg-beoneteam path	{fill: var(--bk-100);}
#content.ma10 .section.change.bg-fff .svg-beoneteam path	{fill: var(--bk-0);}
#content.ma10 .section.change.bg-000 > .btn		{opacity: 0;}
/* ma10 > ..strength */
#content.ma10 .section.strength		{padding: 320px 0;}
#content.ma10 .section.strength .hgroup + .swiper-container		{margin-top: 80px;}
#content.ma10 .strength .swiper-container-horizontal>.swiper-pagination-bullets	{top: 100px; left: 54.58%; bottom: auto; width: calc(100% - 54.58%); padding-left: 100px; text-align: left;}
#content.ma10 .strength .bg-swiper		{background-color: #f5f6f7; border-radius: 4px;}
#content.ma10 .strength .bg-swiper.pack-both-bottom			{gap: 0}
#content.ma10 .strength .bg-swiper.pack-both-bottom > div.img-wrap	{width: 54.58%;}
/* [CSS 추가 및 수정] 작업자: 장성훈 / 작업일: 20250515 */
#content.ma10 .strength .bg-swiper.pack-both-bottom > div.text-wrap	{width: calc(100% - 54.58%); padding: 100px 90px 100px 100px;}
#content.ma10 .strength .bg-swiper.pack-both-bottom > div.text-wrap.pack-down	{gap: 12px;}
#content.ma10 .strength .bg-swiper.pack-both-bottom > div.text-wrap .swiper-title + p{font-size: clamp(14px,3.73vw,16px);}
#content.ma10 .section.strength section + section:not(.start) {padding-top: 240px;}
/* // [CSS 추가 및 수정] 작업자: 장성훈 / 작업일: 20250515 */
#content.ma10 .section.strength .start	{padding-top: 320px;}
#content.ma10 .section.strength .start .pack-down-center	{gap: 40px;}
@media all and (max-width: 1280px){
	#content.ma10 .strength .bg-swiper.pack-both-bottom			{
		-webkit-flex-direction: column; flex-direction: column;
	}
	#content.ma10 .strength .bg-swiper.pack-both-bottom > div.img-wrap,
	#content.ma10 .strength .bg-swiper.pack-both-bottom > div.text-wrap	{width: 100%;}
	#content.ma10 .strength .bg-swiper.pack-both-bottom > div.text-wrap	{padding: 72px 40px 60px;}
	#content.ma10 .strength .swiper-container-horizontal>.swiper-pagination-bullets	{top: 86.567vw; left: 0; width: 100%; padding-left: 40px;}
	#content.ma10 .strength .bg-swiper.pack-both-bottom > div.text-wrap .fs-40	{font-size: 22px;}
}
@media all and (max-width: 768px){
	#content.ma10 .section.strength		{padding: 160px 0;}
	#content.ma10 .section.strength .hgroup + .swiper-container		{margin-top: 40px;}
	/* [CSS 수정] 작업자: 장성훈 / 작업일: 20250515 */
	#content.ma10 .section.strength section + section:not(.start) {padding-top: 120px;}
	/* // [CSS 수정] 작업자: 장성훈 / 작업일: 20250515 */
	#content.ma10 .section.strength .start	{padding-top: 160px;}
	#content.ma10 .section.strength .start .pack-down-center	{gap: 20px;}
}

/* ma10 > .wherever */
#content.ma10 .section.wherever	{}
#content.ma10 .section.wherever .fs-120 > span	{display: block;}
@media all and (min-width: 769px) and (max-width: 1280px) {
	#content.ma10 .section.wherever	{padding: 33.333vw 0;}
	#content.ma10 .section.wherever .fs-120			{font-size: 9.375vw;}
}
@media all and (max-width: 768px){
	#content.ma10 .section.wherever .fs-120			{font-size: 9.067vw;}
}
/* ma10 > .client */
#content.ma10 .section.client	{padding: 80px 0;}
#content.ma10 .section.client .visual-title				{word-break: keep-all; word-wrap: break-word;}
#content.ma10 .section.client .fix-element.fix-in		{padding-top: calc(var(--header) * 2);}
#content.ma10 .section.client .client-links					{max-width: 400px; margin-top: caLC(120PX - 24px);}
#content.ma10 .section.client .client-links .btn					{width: 100%; padding: 24px 0; border-bottom: 1px solid var(--bk-20);
	-webkit-justify-content: space-between; justify-content: space-between;
}
#content.ma10 .section.client .client-links .btn:hover,
#content.ma10 .section.client .client-links .btn.current			{color: var(--bk-100);}
#content.ma10 .section.client .client-links .btn:hover .fill-666,
#content.ma10 .section.client .client-links .btn.current .fill-666	{fill: var(--bk-100);}
#content.ma10 .section.client .client-list.pack-down	{gap: 28px;}
#content.ma10 .client-box								{overflow: hidden; position: relative; border-radius: 4px;}
#content.ma10 .client-box .pack-down-center				{position: absolute; bottom: 12.76%; left: 20%; right: 20%; color: #fff; text-align: center; gap: 24px;}
#content.ma10 .client-box .pack-down-center > p			{opacity: .6;}
@media all and (min-width: 1281px) {
	#content.ma10 .section.client .fix-container .fix		{width: 36.89%; max-width: 532px;}
	#content.ma10 .section.client .client-list.pack-down	{float: right; width: 50%;}
	#content.ma10 .client-box								{max-width: 720px;}
}
@media all and (max-width: 1280px){
	#content.ma10 .section.client .fix-container .fix-element	{float: none;}
	#content.ma10 .section.client .client-links					{display: none;}
	#content.ma10 .section.client .client-list.pack-down		{margin-top: 60px;}
	#content.ma10 .client-box .pack-down-center				{bottom: 12.24%; gap: 12px;}
}
@media all and (max-width: 768px){
	#content.ma10 .section.client	{padding: 0;}
}
/* ma10 > .number */
#content.ma10 .section.number	{overflow: hidden; padding: 320px 0;}
#numberSwiper						{overflow: visible;}
#numberSwiper .swiper-slide.number-card		{width: calc((100% - 48px)/3);}
.number-card					{overflow: hidden; position: relative; max-width: 464px;  aspect-ratio : 1 / 1.4603; padding: 40px 40px 48px; color: var(--bk-100); border-radius: 4px; background-color: var(--bk-20);
	-webkit-justify-content: space-between; justify-content: space-between;
}
.number-card:after				{content: ''; position: absolute; bottom: 48px; right: 40px; display: block; width: 40px; height: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 48'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.9 22.4v-9.6h3.2v9.6h9.6v3.2h-9.6v9.6h-3.2v-9.6h-9.6v-3.2h9.6z' fill='%23fff'/%3E%3C/svg%3E");}
.number-card,
.number-card .hover-text		{
	-webkit-transition: all .25s ease-in-out;
			transition: all .25s ease-in-out;
}
.number-card .hover-text		{opacity: 0;
	-webkit-transform: translateY(40px);
			transform: translateY(40px);
	-webkit-transition: opacity 0.2s,	-webkit-transform 0.35s;
			transition: opacity 0.2s,			transform 0.35s;
}
.number-card .number				{font-size: 56px; font-weight: 600; letter-spacing: -1.12px;}
.number-card:hover 				{color: var(--bk-0); background-color: var(--bk-100);}
.number-card:hover .hover-text	{opacity: 1;
	-webkit-transform: translateY(0);
			transform: translateY(0);
}
@media all and (min-width: 1281px) {
	#numberSwiper .swiper-wrapper	{gap: 24px;}
}
@media all and (max-width: 1280px) {
}
@media all and (max-width: 768px){
	#content.ma10 .section.number	{padding: 160px 0;}
	.number-card .number				{font-size: 36px; letter-spacing: -0.72px;}
}
/* ma10 > .news */
#content.ma10 .section.news		{overflow: hidden;}
#newsSwiper						{overflow: visible; width: 100%;}
#newsSwiper .swiper-btns					{position: absolute; right: 0; top: calc(-80px - 20px);
	-webkit-transform: translateY(-100%);
			transform: translateY(-100%);
}
#newsSwiper .item.normal .item-title		{margin-top: 40px;}
#newsSwiper .item.normal .item-title + .date		{margin-top: 20px;}
@media all and (max-width: 768px) {
	#newsSwiper .swiper-btns					{top: calc(-40px - 10px)}
	#newsSwiper .item.normal .item-title		{margin-top: 20px;}
	#newsSwiper .item.normal .item-title + .date		{margin-top: 10px;}
}
/* ma10 > .bottom */
#content.ma10 .section.bottom	{padding: 400px 0;}
#content.ma10 .section.bottom.pack-down,
#content.ma10 .section.bottom .button-area.pack-center		{gap: 24px;}
@media all and (max-width: 768px) {
	#content.ma10 .section.bottom	{padding: 200px 0;}
	#content.ma10 .section.bottom h3.fs-48						{font-size: 32px; letter-spacing: -0.64px;}
	#content.ma10 .section.bottom h3.fs-48 + p					{font-size: 16px; letter-spacing: -0.32px;}
	#content.ma10 .section.bottom.pack-down,
	#content.ma10 .section.bottom .button-area.pack-center		{gap: 12px;}
	#content.ma10 .section.bottom .button-area.pack-center		{
		-webkit-flex-direction: column; flex-direction: column;
	}
}

/* ============= [서비스 신규 페이지  HOWTO] ============= */
/* [CSS 추가] 작업자: 장성훈 / 작업일: 20250515 */
#content.ma10.howto .section.visual{
	align-items: center;
	background-image: url("../images/svc/bg_howto.png");
}
#content.ma10.howto .section.visual h2.img-wrap{max-width: 1284px; margin: 40px auto 0;}
#content.ma10.howto .section.strength section + section {padding-top: 320px;}

#content.ma10.howto .section.strength .dot-list,
#content.ma10.howto .section.strength .dot-list li{
	display: flex;
}
#content.ma10.howto .section.strength .dot-list{
	flex-direction: column; gap: clamp(7px,1.87vw,14px);
}
#content.ma10.howto .section.strength .dot-list .ico.howto-dot{
	width: clamp(22px,5.87vw,26px); height: clamp(22px,5.87vw,26px);
	background-image: url("../images/svc/ico_dot.svg");
}
#content.ma10.howto .section.strength .dot-list p{font-size: clamp(14px,3.73vw,16px);}

#content.ma10.howto .section.bottom{padding-block: 150px 400px;}
@media all and (max-width: 768px) {
	#content.ma10.howto .section.visual h2.img-wrap{margin-top: 0px;}
	#content.ma10.howto .section.strength section + section {padding-top: 160px;}
	#content.ma10.howto .section.bottom{padding-block: 50px 400px;}
}
/* // [CSS 추가] 작업자: 장성훈 / 작업일: 20250515 */