.sec {
	position: relative;
	box-sizing: border-box;
}
.sec .category {
	gap: 12px;
	justify-content: center;
}
.sec .category .util {
	gap: 12px;
}
.sec .category .btn {
	border-radius: 100px;
	border: 1px solid #D1D5DB;
	height: 34px;
	line-height: 32px;
	font-size: 14px;
	font-weight: 500;
	padding: 0 16px;
	box-sizing: border-box;
}
.sec .category .btn.on {
	border: 1px solid var(--key-color);
	color: var(--key-color);
	padding: 0 21px;
}
.sec .tit_box {
	gap: 15px;
}
.sec .tit_box h4 {
	font-size: 32px;
	font-weight: 700;
}
.sec .tit_box p {
	color: #555;
	font-size: 16px;
	line-height: 1.55;
	box-sizing: border-box;
}
.sec .tag {
	gap: 20px;
	justify-content: center;
}
.sec .tag strong {
	display: inline-block;
	height: 36px;
	line-height: 36px;
	padding: 0 20px;
	border-radius: 100px;
	background: #F1F5FF;
	color: var(--key-color);
	font-size: 16px;
	font-weight: 600;
	box-sizing: border-box;
}
@keyframes tagFloat {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-3px); }
}



.sec01 {
	justify-content: center;
}
.sec01 .inner {
	max-width: 1320px;
}
.sec01 .title {
	gap: 24px;
	padding-top: 100px;
}
.sec01 .title h2 {
	font-size: 64px;
	font-weight: 600;
	letter-spacing: -1.28px;
	line-height: 1.2;
}
.sec01 .title h2 strong {
	display: block;
	color: var(--GRAY);
	font-weight: 600;
}
.sec01 .title p {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.12px;
	color: rgba(0, 0, 0, 0.55);
}
.sec01 .title p .m {
	display: none;
}
.sec01 .btn_group {
	display: none;
	margin: 32px 0;
	gap: 16px;
}
.sec01 .btn_group a {
	height: 42px;
	line-height: 42px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.09px;
	padding: 0 19px;
	border-radius: 12px;
	box-sizing: border-box;
}

.sec01 .card_slide {
	overflow: hidden;
}
@keyframes marquee {
	0% { transform: translateX(0%); }
	100% { transform: translateX(-10%); }
}
#pc_card {
	width: max-content;
	padding: 32px 20px;
	animation: marquee 200s linear infinite;
	overflow: hidden;
}
#pc_card:hover {
	animation-play-state: paused;
}
#pc_card > .flex {
	flex-wrap: nowrap;
	gap: 20px;
}
#pc_card .item {
	border-radius: 12px;
	overflow: hidden;
	min-width: 200px;
	width: 260px;
	height: 260px;
	transition: all 0.3s ease;
}
#pc_card .item:hover {
	transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
#pc_card .item a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 43px 10px;
	box-sizing: border-box;
}
#pc_card .item img {
	width: 120px;
}
#pc_card .item h3 {
   font-size: 20px;
   text-transform: uppercase;
   color: #34403C;
   margin-top: 16px;
}
#pc_card .item p {
   font-size: 14px;
   margin-top: 8px;
}
.sec01 .card_slide .grid {
	display: none;
	padding: 0 20px;
	gap: 16px;
	max-width: 640px;
	margin: 0 auto;
	box-sizing: border-box;
}
.sec01 .card_slide .grid > div {
	width: calc(50% - 8px);
	border-radius: 10px;
	padding: 16px 0;
	box-sizing: border-box;
}
.sec01 .card_slide .grid > div .img {
	width: 80px;
	height: 80px;
	justify-content: center;
	align-items: center;
	margin: 0 auto 8px;
}
.sec01 .card_slide .grid > div .img img {
	width: 100%;
}
.sec01 .card_slide .grid > div .tit {
	color: #34403C;
}
.sec01 .card_slide .grid > div .tit strong {
	font-size: 14px;
	text-transform: uppercase;
}
.sec01 .card_slide .grid > div .tit p {
	font-size: 12px;
}
.sec01 .card_slide .grid > div.item01 {
    background-color: #B9E0D4;
}
.sec01 .card_slide .grid > div.item02 {
    background-color: #F9C3A1;
}
.sec01 .card_slide .grid > div.item03 {
    background-color: #B6CCFC;
}
.sec01 .card_slide .grid > div.item04 {
    background-color: #BDE496;
}



#section2 {
	background: url("../images/main_sec02_bg.png")no-repeat 50% 50% / cover;
}
.sec02 {
	justify-content: center;
}
.sec02 .inner {
	gap: 34px;
	max-width: 1320px;
}
.sec02 .tit {
	font-size: 50px;
	font-weight: 500;
	letter-spacing: -1.5px;
	line-height: 1.34;
}
.sec02 .tit strong {
	font-weight: 500;
}
.sec02 .tit.mobile {
	display: none;
}
.sec02 p {
	font-size: 28px;
	letter-spacing: -0.56px;
	line-height: 1.43;
}


.sec03 .inner {
	gap: 18px;
}
.sec03 h2 {
	font-size: 45px;
}
.sec03 .img {
	width: 100%;
	max-width: 778px;
	margin: 0 auto;
}
.sec03 .img img {
	width: 100%;
}
.sec03 .step {
	width: 100%;
	margin: 0 auto;
	gap: 30px 50px;
}
.sec03 .step > div {
	width: calc(25% - 38px);
}
.sec03 .step > div strong {
	order: 1;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	margin-top: 8px;
}
.sec03 .step > div .icon {
	height: 95px;
	border-radius: 30px;
	background: #F8F7FC;
	padding: 0 10px;
	justify-content: center;
	box-sizing: border-box;
}
.sec03 .step > div .icon img {
	width: auto;
	max-width: 100%;
}



#section4 {
	background: linear-gradient(108deg, #ECECEC 0%, #FFF 50.48%, #ECECEC 100%);
}
.sec04 .inner {
	gap: 23px;
}
.sec04 .img img {
	max-width: 100%;
}
.sec04 .tag strong {
	animation: tagFloat 3s ease-in-out infinite;
}
.sec04 .tag > div:nth-child(1) strong { 
	animation-delay: 0s; 
}
.sec04 .tag > div:nth-child(2) strong { 
	animation-delay: 0.5s; 
}
.sec04 .tag > div:nth-child(3) strong { 
	animation-delay: 1s; 
}
.sec04 .tag > div:nth-child(4) strong { 
	animation-delay: 1.5s; 
}



.sec05 .category {
	margin-bottom: 32px;
}
.sec05 .tit_box {
	margin-bottom: 20px;
}
.sec05 .tag {
	gap: 12px;
}
.sec05 .tag strong {
	font-size: 14px;
}
.sec05 .img {
	margin-top: 32px;
}
.sec05 .img img {
	max-width: 100%;
}


#section6 {
	background: url("../images/main_sec06_bg.png")no-repeat 50% 50% / cover;
	animation: backgroundPulse 8s ease-in-out infinite;
}
.sec06 .inner {
	gap: 23px;
}
.sec06 .tag strong {
	transition: all .3s;
}
.sec06 .tag strong:hover {
	background: var(--key-color);
	color: var(--white);
}
.sec06 .sell_box {
	gap: 30px;
	max-width: 600px;
	margin: 0 auto;
}
.sec06 .sell_box .box {
	flex: 1;
	border-radius: 12px;
	border: 1px solid #CFD9FF;
	background: var(--white);
	padding: 25px;
	gap: 15px;
	box-sizing: border-box;
	transition: all .5s;
}
.sec06 .sell_box .box:hover {
	box-shadow: rgba(65, 103, 255, 0.1) 0px 4px 12px;
}
.sec06 .sell_box .box h4 {
	font-size: 16px;
	color: #333;
	margin-bottom: -8px;
}
.sec06 .sell_box .box .hash {
	color: #6B7280;
	font-size: 12px;
	gap: 6px;
}
.sec06 .sell_box .box ul {
	gap: 6px;
	font-size: 16px;
}
.sec06 .sell_box .box ul li {
	position: relative;
}
.sec06 .sell_box .box ul li:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	display: block;
	width: 100%;
	border-bottom: 1px dashed #333;
	box-sizing: border-box;
}
.sec06 .sell_box .box ul li > * {
	position: relative;
	background: var(--white);
	z-index: 1;
	box-sizing: border-box;
}
.sec06 .sell_box .box ul li .name {
	padding-right: 10px;
}
.sec06 .sell_box .box ul li p {
	padding-left: 10px;
}


.sec07 .inner {
	gap: 44px;
	max-width: 1020px;
	padding-left: 10px;
	padding-right: 10px;
}
.sec07 .step > div {
	position: relative;
}
.sec07 .step > .arrow {
	width: 17px;
	height: 15px;
	background: url("../images/step_arrow.svg?v=1")no-repeat 50% 50% / 100%;
	margin-top: 80px;
}
.sec07 .step > div .icon {
	position: relative;
	width: 60px;
	height: 60px;
	margin: 0 auto 8px;
}
.sec07 .step > div .icon img {
	max-width: 100%;
}
.sec07 .step > div strong {
	height: 36px;
	line-height: 36px;
	background: #F1F5FF;
	color: var(--key-color);
	font-size: 16px;
	font-weight: 600;
	border-radius: 100px;
	padding: 0 20px;
	margin-bottom: 10px;
	box-sizing: border-box;
	transition: all .3s;
}
.sec07 .step > div:hover strong {
	background: linear-gradient(45deg, #4167FF, #6B8AFF);
    color: var(--white);
    transform: scale(1.1);
}
.sec07 .step > div ul {
	font-size: 12px;
	color: #1F2937;
	gap: 5px;
}
.sec07 .img img {
	max-width: 100%;
}






@media screen and (max-width: 1320px) {
}
@media screen and (max-width: 1024px) {
	.sec01 .title h2 {
		font-size: 48px;
	}
	.sec01 .title p {
    	font-size: 20px;
	}
}
@media screen and (max-width: 768px) {
	.section {
		height: auto!important;
		min-height: auto!important;
	}
	.fp-overflow {
		max-height: none!important;
	}

	.sec .category {
		gap: 10px;
	}
	.sec .category .util {
		gap: 8px;
	}
	.sec .category .btn {
		font-size: 14px;
	}
	.sec .tit_box h4 {
        font-size: 28px;
    }
	.sec .tit_box p {
        font-size: 14px;
        line-height: 1.6;
		word-break: keep-all;
    }
	.sec .tit_box p br {
		display: none;
	}
	.sec .tag {
		gap: 8px;
	}


	.sec01 {
		min-height: auto;
		padding: 50px 0;
	}
	.sec01 .title {
		gap: 16px;
	}
	.sec01 .title h2 {
        font-size: 28px;
		letter-spacing: -1.28px;
    }
	.sec01 .title p {
		font-size: 16px;
		letter-spacing: -0.12px;
	}
	.sec01 .title p .m {
		display: block;
	}
	.sec01 .btn_group {
		display: flex;
	}
	#pc_card {
		display: none;
	}
	.sec01 .card_slide .grid {
		display: flex;
	}


	#section2 {
		background: url("../images/m_main_sec02_bg.png") no-repeat 50% 50% / cover;
	}
	.sec02 {
		min-height: 560px;
	}
	.sec02 .inner {
		gap: 11px;
	}
	.sec02 .tit {
		font-size: 25px;
		font-weight: 500;
	}
	.sec02 .tit.pc {
		display: none;
	}
	.sec02 .tit.mobile {
		display: block;
	}
	.sec02 p {
		font-size: 14px;
		max-width: 310px;
		margin: 0 auto;
		word-break: keep-all;
	}
	.sec02 p br {
		display: none;
	}


	.sec03 h2 {
		font-size: 28px;
	}
	.sec03 .step {
        gap: 28px;
        max-width: 320px;
        margin: 0 auto;
		justify-content: center;
    }
	.sec03 .step > div {
		width: calc(50% - 19px);
	}


	.sec04 .tag strong {
		animation: none!important;
	}


	.sec06 .sell_box {
		max-width: 300px;
		margin: 0 auto;
	}
	.sec06 .sell_box .box {
		flex: none;
		width: 100%;
	}


	.sec07 .category {
		max-width: 300px;
		margin: 0 auto;
	}
	.sec07 .step > div {
		width: 100%;
	}
	.sec07 .step > div strong {
		width: max-content;
		margin: 0 auto 10px;
	}
	.sec07 .step > div ul {
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.sec07 .step > div ul li {
		width: auto;
	}
	.sec07 .step > div ul li:after {
		content: '|';
		margin-left: 5px;
		font-size: 10px;
	}
	.sec07 .step > div ul li:last-child:after {
		display: none;
	}
	.sec07 .step > div:last-child ul li:nth-child(2):after {
		display: none;
	}
	.sec07 .step > .arrow {
        transform: rotate(90deg);
        margin: 20px auto;
        width: 20px;
    }
}