@charset "UTF-8";

/* main */
.wrap {
	min-width: 1480px;
}

.main header {
	height: 117px;
	padding: 0 12px;
	display: flex;
	align-items: flex-end;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transition: all 0.3s;
	border-bottom: 1px solid transparent;
	box-sizing: border-box;
}

.main header .logo {
	display: block;
	width: 131px;
	height: 42px;
	background: url('../images/logo.svg') no-repeat center;
	background-size: contain;
}

.main header .logo a {
	display: block;
	height: 100%;
	font-size: 0;
}

.main header .header_inner {
	max-width: 1412px;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 30px;
	display: flex;
	align-items: center;
	transition: all 0.3s;
}

.main .header_inner .right {
	margin-left: auto;
	display: flex;
	align-items: center;
}

.main .header_inner .grp_link {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 70px
}

.main .header_inner .grp_link a {
	display: inline-block;
	color: #393939;
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
	padding: 5px;
}

.main .header_inner .grp_link a:hover {
	color: #7138FE
}

.main .header_inner .grp_link a.on {
	position: relative;
	color: #7138FE
}

.main .header_inner .grp_link a.on::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 8px;
	right: 8px;
	height: 3px;
	border-radius: 5px;
	background: #7138FE;
}

.main header.scrolled {
	background: #fff;
	height: 100px;
	border-bottom: 1px solid #C4C4C4;
}

.main header.scrolled .header_inner {
	border-bottom: 1px solid transparent;
}

.wrap>section {
	overflow: hidden;
}

.flexbox {
	display: flex;
}

.flexbox>div {
	flex: 1
}

.main .btn_cm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 199px;
	height: 61px;
	background: #000;
	color: #fff;
	border-radius: 100px;
	font-size: 18px;
	font-weight: 600;
	transition: filter 0.2s;
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.main .btn_cm.short {
	width: 159px;
	min-width: auto;
}

.main .btn_cm.submit {
	border-radius: 94px;
}

.main .btn_cm.more {
	background: #7138fe;
	border-radius: 100px;
}

.main .btn_cm.line {
	background: #fff;
	color: #303030
}

.main .btn_cm.pt {
	background: #7138FE;
	border-color: #7138FE;
	box-shadow: 0 4px 357px 0 rgba(255, 146, 47, 0.15), 0 0.501px 44.702px 0 rgba(255, 146, 47, 0.08);
}

.main .btn_cm.pt.line {
	background: #fff;
	color: #7138FE;
	border: 2px solid;
}

.main .btn_cm:hover {
	filter: brightness(1.08) contrast(1.1);
}

/* Large text for "BOME is with you" */
.large-text {
	width: 2990px;
	color: #F5F6F8;
	text-align: center;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "Pretendard Variable";
	font-size: 240px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	white-space: nowrap;
	animation: scroll-text 20s linear infinite;
	transform: translateX(100%);
}

@keyframes scroll-text {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(-100%);
	}
}

.main .section_inner {
	max-width: 1412px;
	margin: 0 auto;
	box-sizing: border-box;
}

.main .section_inner h2 {
	color: #000;
	text-align: center;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "Pretendard Variable";
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 43px;
}

.main .section_inner .h2_sub {
	margin-top: 20px;
	color: #5E6874;
	text-align: center;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "Pretendard Variable";
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: -0.36px;
}

.sec_main01 {
	padding-top: 109px;
	height: 831px;
	background: url('../images/img_sec_main01.png') no-repeat top;
	background-size: cover;
}

.sec_main01 .section_inner {
	display: flex;
}

.sec_main01 .section_inner .btn_cm {
	margin-top: 42px;
}

.sec_main01 .txt_top {
	margin-top: 167px;
	display: flex;
	align-items: center;
	font-size: 30px;
	font-weight: 600;
	color: #50319D;
}

/* .sec_main01 .txt_top::after {
	content: '';
	display: block;
	width: 191px;
	height: 1px;
	background: #7138FE;
	margin-left: 23px;
} */

.sec_main01 .title {
	font-size: 62px;
	font-weight: 700;
	line-height: 120%;
	margin-top: 42px;
}

.brand-bome {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	white-space: nowrap;
}

.txt_logo_bome {
	display: inline;
}

.sec_main01 .title .txt_logo_bome {
	color: #7138FE;
	font-weight: 700;
	display: inline-block;
}

.sec_main01 .title .txt_logo_in {
	color: #FB9C46;
	font-weight: 700;
}

.sec_main01 .title .txt_logo_skill {
	color: #0191FF;
	font-weight: 700;
}

.sec_main01 .tit_sub {
	margin-top: 40px;
	font-size: 18px;
	line-height: 140%;
}

.sec_main01 .tit_sub span {
	color: #5E6874
}

.sec_main01 img {
	width: 180px;
	height: 53px;
	margin-left: 14px;
	object-fit: contain;
	top: 4px;
	position: relative;
}

.sec_main02 {
	background: #F5F9FD;
	padding: 106px 0 180px;
}

.sec_main02 .swiper.ourservice {
	overflow: visible;
}

.sec_main02 ul {
	margin-top: 64px;
}

.sec_main02 ul li {
	flex: 1;
}

.sec_main02 ul li a {
	display: block;
	color: #000;
}

.sec_main02 ul li a:hover {
	text-decoration: underline;
}

.sec_main02 ul li img {
	width: 100%;
	border-radius: 24px;
	box-shadow: 0 4px 357px 0 rgba(47, 130, 255, 0.15), 0 0.501px 44.702px 0 rgba(47, 130, 255, 0.08);
}

.sec_main02 ul li img {
	width: 363px;
	border-radius: 24px;
}

.sec_main02 ul li .tit {
	display: flex;
	align-items: center;
	margin-top: 25px;
	font-size: 20px;
	font-weight: 700;
	line-height: 150%;
}

.sec_main02 ul li .tit::after {
	content: '';
	margin-left: auto;
	display: inline-block;
	flex: none;
	width: 37px;
	height: 37px;
	background: url('../images/ico_main_arrow.svg') no-repeat center;
	transition: all 0.7s;
}

.sec_main02 ul li:hover .tit::after {
	rotate: 360deg;
}

.sec_main02 ul li .txt {
	margin-top: 16px;
	color: #5E6874;
	line-height: 140%;
}

.sec_main03 {
	background: #fff;
	padding: 106px 0 125px;
}

.sec_main03 .flexbox {
	margin-top: 84px;
}

.sec_main03 .title {
	font-size: 32px;
	font-weight: 600;
	line-height: 140%;
}

.sec_main03 .text {
	margin-top: 34px;
	line-height: 160%;
	font-size: 18px;
	color: #5E6874;
}

.sec_main03 .price-section {
	margin-top: 30px;
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.sec_main03 .price-left {
	flex: none;
}

.sec_main03 .price-right {
	flex: none;
}

.sec_main03 .price-info {
	font-size: 18px;
	line-height: 160%;
	color: #393939;
}

.sec_main03 .price-amount {
	font-size: 40px;
	font-weight: 700;
	color: #7138FE;
}

.sec_main03 .price-amount strong {
	font-size: 52px;
}

.sec_main03 .price-detail {
	font-size: 16px;
	color: #5E6874;
}

.sec_main03 .price-notes {
	font-size: 16px;
	line-height: 160%;
	color: #5E6874;
}

.sec_main03 .btnbox {
	display: flex;
	gap: 16px;
	margin-top: 32px;
}

.sec_main03 .flexbox ul {
	flex: none;
	width: 627px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sec_main03 .flexbox ul li {
	padding: 18px 23px;
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: 600;
	line-height: 140%;
	color: #393939;
	background: #fff;
	box-shadow: 0 4px 357px 0 rgba(47, 130, 255, 0.15), 0 0.501px 44.702px 0 rgba(47, 130, 255, 0.08);
	border-radius: 16px;
}

.sec_main03 .flexbox ul li::before {
	content: '';
	display: inline-block;
	background: #7138FE;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	margin-right: 13px;
}

.sec_main03 .flexbox ul li:nth-child(1):before {
	background: #7138FE url('../images/ico_sec_main03_1.svg') no-repeat center
}

.sec_main03 .flexbox ul li:nth-child(2)::before {
	background: #7138FE url('../images/ico_sec_main03_2.svg') no-repeat center
}

.sec_main03 .flexbox ul li:nth-child(3)::before {
	background: #7138FE url('../images/ico_sec_main03_3.svg') no-repeat center
}

.sec_main03 .flexbox ul li:nth-child(4)::before {
	background: #7138FE url('../images/ico_sec_main03_4.svg') no-repeat center
}

.sec_main03 .flexbox ul li:nth-child(5)::before {
	background: #7138FE url('../images/ico_sec_main03_5.svg') no-repeat center
}

.sec_main04 {
	background: #F5F9FD;
	padding: 106px 0 120px;
}

.sec_main04 h2 {
	color: #000;
	font-size: 36px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 16px;
}

.sec_main04 .h2_sub {
	text-align: center;
	font-size: 16px;
	color: #5E6874;
	margin-bottom: 60px;
}

.sec_main04 .flexbox {
	display: flex;
	align-items: center;
	gap: 50px;
}

.sec_main04 .school-title {
	flex: none;
}

.sec_main04 .title {
	font-size: 36px;
	font-weight: 700;
	line-height: 140%;
	color: #000;
}

.sec_main04 .school-cards {
	flex: 1;
	display: flex;
	gap: 16px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.sec_main04 .school-card {
	flex: 1;
	background: #fff;
	border-radius: 16px;
	padding: 24px 20px;
	box-shadow: 0px 4px 350px rgba(47, 130, 255, 0.15), 0px 0.5px 45px rgba(47, 130, 255, 0.08);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.sec_main04 .school-card::before {
	content: '';
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #0191FF;
	display: block;
	margin-bottom: 16px;
}

.sec_main04 .school-card:nth-child(1)::before {
	background: #0191FF url('../images/ico_sec_main04_1.svg') no-repeat center;
}

.sec_main04 .school-card:nth-child(2)::before {
	background: #0191FF url('../images/ico_sec_main04_2.svg') no-repeat center;
}

.sec_main04 .school-card:nth-child(3)::before {
	background: #0191FF url('../images/ico_sec_main04_3.svg') no-repeat center;
}

.sec_main04 .school-card:nth-child(4)::before {
	background: #0191FF url('../images/ico_sec_main04_4.svg') no-repeat center;
}

.sec_main04 .school-card p {
	font-size: 14px;
	font-weight: 600;
	line-height: 160%;
	color: #393939;
}

/* School Info Section */
.sec_school_info {
	/* background: #F8FAFB; */
	padding: 80px 0;
}

.sec_school_info .school-info-top {
	margin-bottom: 110px;
}

.sec_school_info .school-info-top h3 {
	color: #0191FF;
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 16px;
	letter-spacing: 1px;
	line-height: 140%;
	letter-spacing: -0.64px;
	text-transform: uppercase;
}

.sec_school_info .school-info-top p {
	font-size: 22px;
	line-height: 170%;
	color: #222;
	font-style: normal;
	font-weight: 400;
	ont-feature-settings: 'liga' off, 'clig' off;
	font-family: "Pretendard Variable";
	letter-spacing: -0.44px;
}

.sec_school_info .school-courses {
	display: flex;
	/* justify-content: space-between; */
	margin-bottom: 27px;
	max-width: 1434px;
	margin-left: auto;
	margin-right: auto;
	gap: 24.05px;
}

.sec_school_info .course-card {
	width: 252.358px;
	height: 250px;
	border-radius: 30px;
	border: 1px solid #E2E2E2;
	background: rgba(181, 214, 248, 0.32);
	padding: 25px 0 0 27px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	position: relative;
	overflow: hidden;
	flex-shrink: 0;

}

.sec_school_info .course-card::before {
	content: attr(data-number);
	position: absolute;
	bottom: -55px;
	right: -15px;
	color: #FFF;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: Roboto, sans-serif;
	font-size: 200px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
	letter-spacing: -4px;
	pointer-events: none;
}

.sec_school_info .course-card:nth-child(1)::before {
	content: '1';
}

.sec_school_info .course-card:nth-child(2)::before {
	content: '2';
}

.sec_school_info .course-card:nth-child(3)::before {
	content: '3';
}

.sec_school_info .course-card:nth-child(4)::before {
	content: '4';
}

.sec_school_info .course-card:nth-child(5)::before {
	content: '5';
}

.sec_school_info .course-card h4 {
	font-size: 16px;
	font-weight: 700;
	line-height: 150%;
	color: #000;
	margin-bottom: 24px;
	min-height: 48px;
}

.sec_school_info .course-card ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sec_school_info .course-card ul li {
	font-size: 13px;
	line-height: 200%;
	color: #5E6874;
	margin-bottom: 4px;
}

.sec_school_info .school-apply {
	display: flex;
	width: 1434px;
	padding: 9px 40px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 0 0 73px 73px;
	background: #0191FF;
	margin: 0 auto;
	margin-top: 40px;
}

.sec_school_info .school-apply p {
	color: #FFF;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: Roboto, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
	letter-spacing: -0.4px;
	margin: 0;
}

/* School Benefits Section */
.sec_school_benefits {
	background: #fff;
	padding: 80px 0;
}

.sec_school_benefits .section_inner {
	display: flex;
	align-items: flex-start;
	gap: 349px;
}

.sec_school_benefits .benefits-left {
	flex: none;
	width: 380px;
}

.sec_school_benefits .benefits-left h3 {
	font-size: 36px;
	font-weight: 700;
	line-height: 140%;
	color: #000;
	margin-bottom: 20px;
}

.sec_school_benefits .benefits-left p.title {
	color: #0191FF;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 30px;
}


.sec_school_benefits .benefits-left p {
	font-size: 16px;
	line-height: 160%;
	color: #5E6874;
	margin-bottom: 40px;
}

.sec_school_benefits .benefits-buttons {
	display: flex;
	flex-direction: row;
	gap: 12px;
}

.sec_school_benefits .benefits-buttons .btn_cm {
	width: 100%;
	padding: 16px 32px;
	border-radius: 30px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
}

.sec_school_benefits .benefits-buttons .btn_cm.outline {
	background: transparent;
	border: 2px solid #393939;
	color: #393939;
}

.sec_school_benefits .benefits-right {
	flex: none;
	width: 627px;
}

.sec_school_benefits .benefits-right ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sec_school_benefits .benefits-right ul li {
	padding: 18px 23px;
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: 600;
	line-height: 140%;
	color: #393939;
	background: #fff;
	box-shadow: 0 4px 357px 0 rgba(47, 130, 255, 0.15), 0 0.501px 44.702px 0 rgba(47, 130, 255, 0.08);
	border-radius: 16px;
}

.sec_school_benefits .benefits-right ul li::before {
	content: '';
	display: inline-block;
	/* background: #7138FE; */
	width: 45px;
	height: 45px;
	border-radius: 50%;
	margin-right: 13px;
	background-size: 24px;
	background-position: center;
	background-repeat: no-repeat;
}

.sec_school_benefits .benefits-right ul li:nth-child(1)::before {
	background-image: url('../images/ic_benefit1.png');
}

.sec_school_benefits .benefits-right ul li:nth-child(2)::before {
	background-image: url('../images/ic_benefit2.png');
}

.sec_school_benefits .benefits-right ul li:nth-child(3)::before {
	background-image: url('../images/ic_benefit3.png');
}

.sec_school_benefits .benefits-right ul li:nth-child(4)::before {
	background-image: url('../images/ic_benefit4.png');
}

.sec_school_benefits .benefits-right ul li:nth-child(5)::before {
	background-image: url('../images/ic_benefit5.png');
}

/* .sec_school_benefits .benefits-right ul li::after {
	content: attr(data-number);
	position: absolute;
	left: 26px;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
} */

.sec_main05 {
	background: #fff;
	padding: 160px 0 152px;
}

.sec_main05 h2 {
	color: #000;
	text-align: center;
	font-size: 36px;
	font-weight: 700;
}

.sec_main05 ul {
		display: flex;
		gap: 10px;
		margin-top: 46px;
		width: 100%;
		align-items: stretch;
}

.sec_main05 ul li {
		flex: 1 1 277px;
		max-width: 277px;
		min-width: 0;
		height: 177px;
		min-height: 177px;
		padding: 16px 39px 16px 14px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-size: 16px;
		font-weight: 600;
		line-height: 140%;
		color: #000;
		background: #dbdaff;
		border-radius: 24px;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
}

.sec_main05 ul li .icon-circle {
	width: 60px;
	height: 60px;
	background: #fff;
	border-radius: 50%;
	margin-bottom: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sec_main05 ul li .icon-circle>img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sec_main05 ul li:nth-child(2) .icon-circle>img,
.sec_main05 ul li:nth-child(3) .icon-circle>img,
.sec_main05 ul li:nth-child(4) .icon-circle>img {
	width: 100%;
	height: 100%;
}

.sec_main05 ul li:nth-child(5) .icon-circle>img {
	width: 75%;
	height: 75%;
}

.sec_main05 ul li .tit {
	font-size: 18px;
	font-weight: 700;
	line-height: 140%;
	color: rgba(0, 0, 0, 0.80);
	margin-bottom: 2px;
	line-height: 32px; /* 177.778% */
	letter-spacing: -0.36px;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "Pretendard Variable";
}

.sec_main05 ul li .txt {
	font-size: 16px;
	line-height: 140%;
	color: #000;
	word-break: keep-all;
	color: rgba(0, 0, 0, 0.80);
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "Pretendard Variable";
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 130%; /* 20.8px */
	letter-spacing: -0.32px;
}

.sec_main05 ul li .arrow {
	position: absolute;
	top: 16px;
	right: 16px;
}

.sec_main06 {
	background: #fff;
	padding: 0 0 160px;
	position: relative;
	z-index: 1;
}

.sec_main06 .section_inner {
	max-width: none;
}

.sec_main06 .title {
	font-size: 36px;
	font-weight: 700;
}

.sec_main06 .btnbox {
	margin-top: 32px;
}

.sec_main06 .flexbox>div:first-child {
	flex: none;
	width: 360px;
	margin-left: calc(50% - 700px);
}

.sec_main06 .mainSwiper {
	margin-left: 30px;
}

.sec_main06 .mainSwiper li {
	width: 280px;
	height: 280px;
	border: 1px solid #eee;
	border-radius: 24px;
	box-sizing: border-box;
}

.sec_main06 .mainSwiper li img {
	width: 100%
}

.sec_main07 {
	background: linear-gradient(111deg, #7B78FF 0.95%, #5D5BF6 61.85%);
	padding: 120px 0 120px;
}

.sec_main07 h2 {
	color: #FFF !important;
}

.sec_main07 .h2_sub {
	color: #FFF !important;
}

.sec_main07 .gridbox {
	max-width: 909px;
	margin: 60px auto 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
}

.sec_main07 .gridbox input {
	height: 56px;
}

.sec_main07 .gridbox input,
.sec_main07 .gridbox textarea {
	font-size: 14px;
	padding: 16px 24px;
	box-sizing: border-box;
	border: 1px solid #E2E2E2;
	border-radius: 16px;
}

.sec_main07 .gridbox input:focus,
.sec_main07 .gridbox textarea:focus {
	border-color: #7138FE;
	outline: 1px solid #7138FE;
}

.sec_main07 .gridbox input.error,
.sec_main07 .gridbox textarea.error {
	border-color: #E92727;
}

.sec_main07 .gridbox input:nth-child(1) {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.sec_main07 .gridbox input:nth-child(2) {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

.sec_main07 .gridbox input:nth-child(3) {
	grid-column: 1 / 2;
	grid-row: 3 / 4;
}

.sec_main07 .gridbox textarea {
	grid-column: 2 / 4;
	grid-row: 1 / 4;
	resize: none;
}

.sec_main07 .btn_cm {
	display: flex;
	margin: 40px auto 0;
}

.main footer {
	background-color: #303030;
	overflow: hidden;
}

.main footer .footer_inner {
	position: relative;
	padding: 50px 0 83px;
	max-width: 1412px;
	display: flex;
	margin: 0 auto;
	gap: 70px
}

.main footer .f_logo {
	display: block;
	flex: none;
	width: 131px;
	height: 42px;
	background: url('../images/logo_bome.svg') no-repeat center;
}

.main footer .f_txt {
	flex: 1;
	font-size: 16px;
	line-height: 30px;
	color: #fff
}

.main footer .f_btn {
	margin-left: auto;
	flex: none;
	display: flex;
	flex-direction: column;
}

.main footer .f_btn a {
	display: inline-flex;
	align-items: center;
	padding: 12px 23px;
	background:  linear-gradient(111deg, #7B78FF 0.95%, #5D5BF6 61.85%);
	color: #FFF;
	font-size: 16px;
	font-weight: 600;
	border-radius: 32px;
}

.main footer .f_btn .kakao::before {
	content: '';
	display: inline-block;
	width: 41px;
	height: 42px;
	/* background: url('../images/ico_footer_kakao.svg') no-repeat center; */
	background: url(../images/ic_management.png) no-repeat center;
	margin-right: 10px;
}


/* main 모바일 */
.mob.main.wrap {
	min-width: 393px;
	max-width: 700px;
	margin: 0 auto;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
}

.mob.main header {
	height: 80px;
	margin: 0 auto;
	padding: 0 20px;
	align-items: center;
	max-width: 700px;
}

.mob.main header .header_inner {
	max-width: 700px;
	padding: 0;
	border: 0;
	align-items: flex-start;
}

.mob.main header .logo {
	width: 90px;
	height: 28px;
}

.mob.main header .btn_menu {
	width: 40px;
	height: 40px;
	background: url('../images/ico_menu.svg') no-repeat center;
}

.mob.main header.scrolled {
	height: 60px;
}

.mob.main header.scrolled .header_inner {
	border: 0;
}

.mob.main header .logo {
	margin-top: 4px;
}

.mob.main .section_inner {
	max-width: 700px;
	padding: 0 20px;
}

.mob.main .section_inner h2 {
	font-size: 32px;
	text-align: left;
	line-height: 130%;
}

.mob.main .section_inner .h2_sub {
	text-align: left;
	margin-top: 8px;
	font-size: 16px;
	line-height: 130%;
}

.mob.main .btn_cm {
	min-width: auto;
	width: 199px;
}

.mob.main .sec_main01 {
	padding: 90px 0;
	background: url(../images/bg_sec_main01.svg) no-repeat top center;
}

.mob.main .sec_main01 .section_inner {
	flex-direction: column;
	padding: 0;
}

.mob.main .sec_main01 img {
	width: 100%;
	height: auto;
	max-width: 393px;
	margin: 0 auto;
}

.mob.main .sec_main01 .title {
	font-size: 42px;
	line-height: 110%;
	margin-top: 24px;
}

.mob.main .sec_main01 .tit_sub {
	margin-top: 24px;
}

.mob.main .sec_main01 .txt_top {
	margin-top: 60px;
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	color: #7138FE
}

.mob.main .sec_main01 .txt_top::after {
	content: '';
	display: block;
	width: 223px;
	height: 1px;
	background: #7138FE;
	margin-left: 23px;
}

.mob.main .sec_main02 {
	padding: 60px 0;
}

.mob.main .sec_main02 .mainSwiper2 {
	margin: 0 -20px;
}

.mob.main .sec_main02 ul {
	margin-top: 40px;
	gap: 0;
}

.mob.main .sec_main02 ul li {
	flex: none;
	max-width: 352px;
}

.mob.main .sec_main02 .mainSwiper2-pagination {
	margin-top: 16px;
	text-align: center;
}

.mob.main .sec_main02 .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
}

.mob.main .sec_main02 .swiper-pagination-bullet-active {
	background: #FB9C46;
}

.mob.main .sec_main03 {
	padding: 60px 0;
}

.mob.main .sec_main03 .flexbox {
	margin-top: 43px;
	flex-direction: column;
}

.mob.main .sec_main03 .flexbox ul {
	gap: 16px;
	width: 100%;
}

.mob.main .sec_main03 .flexbox ul li {
	padding: 20px;
	font-size: 15px;
}

.mob.main .sec_main03 .flexbox>div {
	flex: none;
	margin-top: 50px;
}

.mob.main .sec_main03 .title {
	font-size: 24px;
}

.mob.main .sec_main03 .text {
	margin-top: 17px;
}

.mob.main .sec_main04 {
	padding: 60px 0;
}

.mob.main .sec_main04 .flexbox {
	flex-direction: column;
}

.mob.main .sec_main04 .title {
	font-size: 32px;
}

.mob.main .sec_main04 .flexbox ul {
	margin-top: 54px;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px
}

.mob.main .sec_main04 .flexbox ul li {
	font-size: 16px;
}

.mob.main .sec_main04 .btnbox {
	margin-top: 45px;
	text-align: center;
}

.mob.main .sec_main05 {
	padding: 60px 0;
}

.mob.main .sec_main05 h2 {
	font-size: 28px;
	text-align: center;
}

.mob.main .sec_main05 ul {
	flex-direction: column;
	gap: 20px;
	margin-top: 40px;
}

.mob.main .sec_main05 ul li {
	max-width: 100%;
	padding: 28px 24px;
}

.mob.main .sec_main05 ul li .icon-circle {
	width: 50px;
	height: 50px;
	margin-bottom: 16px;
}

.mob.main .sec_main05 ul li .tit {
	font-size: 18px;
}

.mob.main .sec_main05 ul li .txt {
	font-size: 14px;
}

.mob.main .sec_main06 {
	padding: 60px 0
}

.mob.main .sec_main06 .mainSwiper {
	margin: 24px -20px 0;
}

.mob.main .sec_main06 .btnbox {
	margin-top: 27px;
	text-align: center;
}

.mob.main .sec_main06 .mainSwiper-pagination {
	margin-top: 12px;
	text-align: center;
}

.mob.main .sec_main06 .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
}

.mob.main .sec_main06 .swiper-pagination-bullet-active {
	background: #FB9C46;
}

.mob.main .sec_main07 {
	padding: 60PX 0;
}

.mob.main .sec_main07 .gridbox {
	margin-top: 34px;
	gap: 16px;
	grid-template-columns: 1fr;
}

.mob.main .sec_main07 .gridbox input {
	grid-column: auto;
	grid-row: auto;
	font-size: 16px;
}

.mob.main .sec_main07 .gridbox textarea {
	grid-column: auto;
	grid-row: auto;
	height: 197px;
	font-size: 16px;
}

.mob.main footer .footer_inner {
	flex-direction: column;
	padding: 60px 20px;
	max-width: 700px;
	gap: 0;
}

.mob.main footer .f_btn {
	margin: 0 auto;
}

.mob.main footer .f_logo {
	margin: 60px auto 25px;
}

.mob.main footer .f_txt {
	font-size: 14px;
	line-height: 30px;
	text-align: center;
}

/* button under tit_sub */
.btn_below_tit_sub {
	margin-top: 42px
}

.btn_primary {
	display: inline-flex;
	padding: 16px 48px;
	align-items: flex-start;
	gap: 10px;
	color: #fff;
	background: var(--pri, #7138FE);
	border-radius: 69px;
	border: none;
	text-decoration: none;
	font-size: 16px;
	font-weight: 700;
	transition: filter 0.18s
}

.btn_primary:hover {
	filter: brightness(1.05)
}

/* New section for BOME STORY */
.sec_main_new01 {
	background: #fff;
	padding: 106px 0 125px;
	overflow: hidden;
}

.sec_main_new01 .flexbox {
	margin-top: 84px;
}

.sec_main_new01 .title {
	font-size: 30px;
	font-weight: 700;
	line-height: 140%;
}

.sec_main_new01 .title .txt_logo_bome {
	font-size: 62px;
	color: #7138FE;
	font-weight: 700;
	display: inline-block;
	margin-top: 60px;
	margin-bottom: 33px;
}
/* highlight 전체 */
.sec_main_new01 .flexbox-column .highlight {
	display: inline-block;
	position: relative;
	z-index: 1;
}

/* 텍스트 기준점 */
.sec_main_new01 .flexbox-column .highlight-text {
	position: relative;
	z-index: 3;
	font-weight: 700;
}

/* 원 – 텍스트 위 */
.sec_main_new01 .flexbox-column .line-circle {
	position: absolute;
	top: 8px;              /* 텍스트 위로 */
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	pointer-events: none;
}

.sec_main_new01 .flexbox-column .line-circle img {
	width: 70px;
	height: auto;
}

/* 밑줄 – 텍스트 아래 */
.sec_main_new01 .flexbox-column .line-underline {
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	pointer-events: none;
}

.sec_main_new01 .flexbox-column .line-underline img {
	width: 100px;
	transform: scaleX(1.3);
	transform-origin: center;
}


.sec_main_new01 .title .vision {
	color: rgba(0, 0, 0, 0.30);
	font-size: 24px;
	font-weight: 700;
	line-height: 130%;
	text-transform: uppercase;
}

.sec_main_new01 .text {
	margin-top: 34px;
	line-height: 160%;
	font-size: 18px;
	color: #5E6874;
}

.sec_main_new01 .text_lg {
	margin-top: 34px;
	line-height: 140%;
	font-size: 24px;
	font-weight: 700;
	color: #000;
}

.sec_main_new01 .btnbox {
	display: flex;
	gap: 16px;
	margin-top: 32px;
}

.sec_main_new01 .flexbox ul {
	flex: none;
	width: 627px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sec_main_new01 .flexbox ul li {
	padding: 18px 23px;
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: 600;
	line-height: 140%;
	color: #393939;
	background: #fff;
	box-shadow: 0 4px 357px 0 rgba(47, 130, 255, 0.15), 0 0.501px 44.702px 0 rgba(47, 130, 255, 0.08);
	border-radius: 16px;
}

.sec_main_new01 .flexbox ul li::before {
	content: '';
	display: inline-block;
	background: #7138FE;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	margin-right: 13px;
}

.sec_main_new01 .flexbox ul li:nth-child(1):before {
	background: #7138FE url('../images/ico_sec_main03_1.svg') no-repeat center
}

.sec_main_new01 .flexbox ul li:nth-child(2)::before {
	background: #7138FE url('../images/ico_sec_main03_2.svg') no-repeat center
}

.sec_main_new01 .flexbox ul li:nth-child(3)::before {
	background: #7138FE url('../images/ico_sec_main03_3.svg') no-repeat center
}

.sec_main_new01 .flexbox ul li:nth-child(4)::before {
	background: #7138FE url('../images/ico_sec_main03_4.svg') no-repeat center
}

/* New section for TESTIMONIALS */
.sec_main_new02 {
	padding: 0 0 160px 0;
	background: #fff;
}

.sec_main_new02 .section_inner {
	margin: 0 auto;
	padding: 0;
}

.sec_main_new02 h2 {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 28px;
}

.sec_main_new02 .testi-row {
	display: flex;
	gap: 14px;
	margin-bottom: 14px;
	justify-content: center;
}

.sec_main_new02 .testi-row:last-child {
	margin-bottom: 0;
}

.sec_main_new02 .testi-card {
	box-sizing: border-box;
	display: flex;
	width: 462px;
	padding: 40px 73px 40px 40px;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 19px;
	border-radius: 24px;
	background: #F5F9FD;
}

.sec_main_new02 .testi-head {
	display: flex;
	align-items: center;
	gap: 20px;
}

.sec_main_new02 .testi-body {
	width: 400px;
	color: rgba(0, 0, 0, 0.80);
	text-align: left;
	font-family: "Pretendard Variable";
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.sec_main_new02 .testi-head .who .agency-name {
	color: #000;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "Pretendard Variable";
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.56px;
	text-transform: capitalize;
}

.sec_main_new02 .avatar {
	width: 85px;
	height: 85px;
	border-radius: 50%;
	object-fit: cover;
}

.sec_main_new02 blockquote {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #2a3652;
	quotes: "" " " "" "'" "'";
}

.sec_main_new02 blockquote:before {
	content: open-quote;
}

.sec_main_new02 blockquote:after {
	content: close-quote;
}

@media (max-width:1024px) {
	.sec_main_new02 .testi-row {
		flex-direction: column;
	}

	.sec_main_new02 h2 {
		font-size: 28px;
	}
}

@media (max-width:640px) {
	.sec_main_new02 {
		padding: 72px 0;
	}

	.sec_main_new02 .testi-card {
		padding: 18px;
	}

	.sec_main_new02 h2 {
		font-size: 24px;
	}
}

/* New section for sec_main_new03 */
.sec_main_new03 {
	height: 937px;
	background: linear-gradient(111deg, #7B78FF 0.95%, #5D5BF6 61.85%);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: start;
	box-sizing: border-box;
}

.sec_main_new03 .section_inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	padding: 160px 0;
}

.main .sec_main_new03 .section_inner h2 {
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 60px;
}

.package-container {
	display: flex;
	gap: 30px;
	align-items: center;
}

.package-card {
	display: inline-flex;
	padding: 30px 29px;
	flex-direction: column;
	align-items: center;
	gap: 0;
	border-radius: 20px;
	background: #F5F5F5;
	min-height: 400px;
	position: relative;
	width: 306px;
	box-sizing: border-box;
	justify-content: space-between;
}

.package-card.pro {
	width: 306px;
	min-height: 463px;
	flex-shrink: 0;
	border-radius: 20px;
}

.package-card.premium {
	width: 306px;
	min-height: 463px;
	flex-shrink: 0;
	border-radius: 20px;
}

.package-card.starter {
	width: 306px;
	height: 520px;
	flex-shrink: 0;
	border-radius: 20px;
	background: #1E1E1E;
	color: #fff;
}

.package-card h3 {
	color: #000;
	text-align: center;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin-bottom: 8px;
}

.package-card.starter h3 {
	color: #FFF;
	text-align: center;
	font-family: "Pretendard Variable";
	font-size: 30px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin-bottom: 8px;
}

.package-card p {
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	margin-bottom: 8px;
	color: #666;
}

.package-card.starter p {
	color: #ccc;
	margin-bottom: 8px;
}

.package-card .price {
	font-size: 18px;
	font-weight: 700;
	color: #000;
	text-align: center;
	padding-bottom: 27px;
	border-bottom: 1px solid #d4d4d4;
	width: 100%;
	margin-bottom: 33px;
}

.package-card.starter .price {
	color: #fff;
	padding-bottom: 27px;
	border-bottom: 1px solid #3f3f3f;
	width: 100%;
	margin-bottom: 33px;
}

.package-card .features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 19px;
	margin-bottom: auto;
	align-items: start;
	width: 100%;
	flex-grow: 1;
}

.package-card .features li {
	position: relative;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.4;
}

.package-card .features li::before {
	content: '';
	position: absolute;
	left: 0;
	width: 16px;
	height: 16px;
	background: url('../images/ic_check.svg') no-repeat center;
	background-size: contain;
}

.package-card.starter .features li::before {
	background: url('../images/ic_check_w.svg') no-repeat center;
	background-size: contain;
}

.package-btn {
	background: #7138FE;
	color: #fff;
	border: none;
	padding: 12px 24px;
	border-radius: 25px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s;
	margin-top: 28px;
}

.package-btn:hover {
	background: #6B68EF;
}

.best-badge {
	position: relative;
	background: #7B78FF;
	color: #fff;
	padding: 5px 15px;
	border-radius: 15px;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 17px;
}