.visual {
	padding: 300px 0 250px;
	box-sizing: border-box;
}
.visual .inner {
	max-width: 1440px;
}
.visual .circle {
	position: absolute;
	top: 150px;
	right: 56px;
	width: 60%;
	max-width: 1122px;
	height: 631px;
}
.visual .circle video {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: lighten;
}
.visual .txt_box {
	gap: 60px;
	padding: 20px 0;
}
.visual .txt_box .box {
	gap: 30px;
}
.visual .txt_box .box .title {
	gap: 16px;
}
.visual .txt_box .box .title span {
	font-size: 18px;
	line-height: 1;
}
.visual .txt_box .box .title h2 {
	font-size: 40px;
	font-weight: 900;
	line-height: 1.2;
}
.visual .txt_box .box p {
	font-size: 18px;
	line-height: 1.4;
}
.visual .txt_box .box p .m {
	display: none;
}



.sec {
	padding: 120px 0;
}
.sec .inner {
	gap: 60px;
	overflow: hidden;
}
.tit_box {
	gap: 24px;
}



.sec01 .list {
	gap: 24px;
}
.sec01 .list .item {
	flex: 1;
	padding: 60px 40px;
	gap: 30px;
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.15);
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.3);
	box-sizing: border-box;
}
.sec01 .list .item strong {
	font-size: 24px;
}
.sec01 .list .item p {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	opacity: .6;
}



.sec02 .tit_box {
	flex: 1;
	max-width: 630px;
}
.sec02 .circle_box {
	position: relative;
	width: 580px;
	height: 580px;
	border-radius: 500px;
	border: 1px solid rgba(255, 255, 255, 0.30);
	background: rgba(1, 15, 51, 0.15);
	justify-content: center;
	overflow: hidden;
}
.sec02 .circle_box .line span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: .35;
	display: block;
	width: 110%;
	height: 1px;
	background: var(--white);
}
.sec02 .circle_box .line span.line1 {
	transform: translate(-50%,-50%) rotate(158deg);
}
.sec02 .circle_box .line span.line2 {
	transform: translate(-50%,-50%) rotate(113deg);
}
.sec02 .circle_box .line span.line3 {
	transform: translate(-50%,-50%) rotate(68deg);
}
.sec02 .circle_box .line span.line4 {
	transform: translate(-50%,-50%) rotate(23deg);
}
.sec02 .circle_box .icon_box .item {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 145px;
	gap: 6px;
	line-height: 1.2;
	z-index: 1;
}
.sec02 .circle_box .icon_box .item.item1 {
	top: 75px;
}
.sec02 .circle_box .icon_box .item.item2 {
    top: 140px;
    left: auto;
    right: -10px;
}
.sec02 .circle_box .icon_box .item.item3 {
	top: 50%;
    left: auto;
    right: -75px;
}
.sec02 .circle_box .icon_box .item.item4 {
	top: auto;
    bottom: 75px;
    left: auto;
    right: -10px;
}
.sec02 .circle_box .icon_box .item.item5 {
	top: auto;
    bottom: 20px;
}
.sec02 .circle_box .icon_box .item.item6 {
    top: auto;
    bottom: 90px;
    left: 138px;
}
.sec02 .circle_box .icon_box .item.item7 {
	left: 70px;
}
.sec02 .circle_box .icon_box .item.item8 {
	top: 135px;
	left: 142px;
}


.sec02 .circle_box .video {
	position: relative;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	justify-content: center;
	overflow: hidden;
	margin: 0 auto;
	z-index: 1;
}
.sec02 .circle_box .video:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, rgba(0, 9, 67, 0.50) 0%, rgba(0, 9, 67, 0.50) 100%);
	z-index: 1;
}
.sec02 .circle_box .video video {
	position: absolute;
	top: -5%;
	left: -5%;
	display: block;
	width: 110%;
	height: 110%;
	object-fit: cover;
	border-radius: 50%;
	overflow: hidden;
	z-index: -1;
}
.sec02 .circle_box .video .box {
	position: relative;
	gap: 10px;
	z-index: 1;
}
.sec02 .circle_box .video .box h2 {
	font-size: 40px;
	font-weight: 900;
	line-height: 1.2;
}
.sec02 .circle_box .video .box p {
	font-size: 18px;
	line-height: 1.4;
}



.sec04 .list > div {
	flex: 1;
	gap: 20px;
}
.sec04 .list > div p {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	opacity: .6;
	text-transform: capitalize;
}
.sec04 .list > div h3 {
	font-size: 48px;
	text-transform: uppercase;
}



.sec05 .slide {
	position: relative;
}
.sec05 .slide .swiper-slide {
	min-width: 200px;
}
.sec05 .slide .date {
	width: max-content;
	font-size: 18px;
	font-weight: 900;
	line-height: 1.2;
	padding: 12px 20px;
	border-radius: 100px;
	background: rgba(5, 0, 28, 0.15);
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.3);
	margin-bottom: 30px;
	box-sizing: border-box;
}
.sec05 .slide .date span {
	display: inline-block;
	transform: rotate(0.04deg);
}
.sec05 .slide .cont {
	position: relative;
	padding-right: 10px;
	box-sizing: border-box;
}
.sec05 .slide .cont .icon {
	position: relative;
}
.sec05 .slide .cont .icon .i_v {
	position: absolute;
	top: 22px;
    left: 10px;
	display: block;
	height: 50px;
	border-right: 1px dashed var(--white);
	box-sizing: border-box;
}
.sec05 .slide .cont .icon .i_s {
    position: absolute;
    top: 12px;
    left: 22px;
    display: block;
    width: calc(100% - 12px);
    border-bottom: 1px dashed var(--white);
	box-sizing: border-box;
}
.sec05 .slide .cont h4 {
	margin-top: 70px;
	font-size: 18px;
	font-weight: 900;
	line-height: 1.2;
	text-transform: capitalize;
}
.sec05 .slide .cont h4 span {
	display: inline-block;
	transform: rotate(0.04deg);
}
.sec05 .slide .cont p {
	margin-top: 16px;
	font-size: 18px;
	line-height: 1.4;
}



.sec06 .list {
	gap: 24px;
}
.sec06 .list .item {
	width: calc(33.333% - 16px);
	padding: 40px;
	gap: 20px;
	border-radius: 30px;
	background: rgba(0, 0, 0, 0.15);
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.3);
	box-sizing: border-box;
}
.sec06 .list .item .top .num {
	font-size: 32px;
	line-height: 1.2;
}
.sec06 .list .item .tit strong {
	font-size: 24px;
	line-height: 1.2;
}
.sec06 .list .item .tit span {
	font-size: 18px;
	line-height: 1.2;
	opacity: .8;
}
.sec06 .list .item p {
	font-size: 18px;
	line-height: 1.2;
}



.sec07 {
	padding: 200px 0;
	gap: 120px;
}
.sec07 .inner {
	max-width: 1360px;
}
.sec07 .list {
	gap: 24px;
}
.sec07 .list .item {
	flex: 1;
    gap: 20px;
	padding: 30px;
	border-radius: 30px;
    background: rgba(0, 0, 0, 0.15);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.3);
	font-size: 18px;
	line-height: 1.2;
    box-sizing: border-box;
}
.sec07 .list .item p {
	opacity: .8;
}
.sec07 .video {
	position: relative;
	width: 500px;
	height: 500px;
	margin: 0 auto;
	mask-image: radial-gradient(50% 50% at 50% 50%, #000 27.88%, rgba(255, 255, 255, 0.00) 100%);
	z-index: -1;
}
.sec07 .video video {
	position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
	mix-blend-mode: lighten;
}

.sec07 .form .txt_box {
	width: 352px;
	gap: 10px;
	padding: 80px 0;
	box-sizing: border-box;
}
.sec07 .form .txt_box > div {
	position: relative;
	gap: 16px;
	font-size: 18px;
	line-height: 1.2;
}
.sec07 .form .txt_box > div strong {
	font-weight: 900;
	text-transform: capitalize;
	transform: rotate(0.04deg);
}
.sec07 .form .txt_box > div .icon {
	position: absolute;
	width: max-content
}
.sec07 .form .txt_box > div.t1 .icon {
	bottom: -38px;
    right: -90px;
}
.sec07 .form .txt_box > div.t2 .icon {
	bottom: 0;
    right: -90px;
}
.sec07 .form .txt_box > div.t3 .icon {
	bottom: 0;
    right: -90px;
}
.sec07 .form .txt_box > div.t4 .icon {
	bottom: -38px;
    left: -90px;
}
.sec07 .form .txt_box > div.t5 .icon {
	bottom: 0;
    left: -90px;
}
.sec07 .form .txt_box > div.t6 .icon {
	bottom: 6px;
    left: -90px;
}




.sec08 .list {
	overflow: hidden;
	gap: 24px;
	width: 100%;
}
.sec08 .item {
	display: flex;
	width: 100%;
}
.sec08 .box {
	display: flex;
	gap: 24px;
	white-space: nowrap;
}
.sec08 .box img {
	width: 220px;
}
.sec08 .to-left .box {
	animation: scroll-left 60s linear infinite;
}
.sec08 .to-right .box {
	animation: scroll-right 60s linear infinite;
}
@keyframes scroll-left {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-50% - 7.5px)); }
}
@keyframes scroll-right {
	0% { transform: translateX(calc(-50% - 7.5px)); }
	100% { transform: translateX(0); }
}



.sec09 .tit_box p .m {
	display: none;
}
.sec09 .swiper-slide {
	width: 480px;
}
.sec09 .swiper-slide .box {
	gap: 40px;
	padding: 40px;
	border-radius: 30px;
	background: rgba(5, 0, 28, 0.15);
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.3);
	box-sizing: border-box;
}
.sec09 .swiper-slide .box .info {
	gap: 16px;
	font-size: 18px;
	line-height: 1.2;
}
.sec09 .swiper-slide .box .info .title {
	font-size: 20px;
	font-weight: 500;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sec09 .swiper-slide .box .info .desc {
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sec09 .swiper-slide .box .info span {
	opacity: .6;
}



.sec10 .tit_box {
	padding-right: 150px;
    box-sizing: border-box;
}
.sec10 .list {
	border-radius: 30px;
	background: rgba(5, 0, 28, 0.15);
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.3);
	padding: 40px;
	box-sizing: border-box;
}
.sec10 .list .item .ques_btn {
	position: relative;
	width: 100%;
	font-size: 18px;
	line-height: 1.2;
	text-align: left;
	padding: 26px 80px 26px 30px;
	background: transparent;
	transition: all .3s;
	box-sizing: border-box;
}
.sec10 .list .item .ques_btn:after {
	content: '';
	position: absolute;
	top: 20px;
    right: 30px;
	display: block;
	width: 32px;
	height: 32px;
	background: url("../images/ic_plus.svg")no-repeat 50% 50% / 27px;
}
.sec10 .list .item.open {
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 16px 0 rgba(0, 13, 60, 0.10);
}
.sec10 .list .item.open .ques_btn {
	padding-top: 40px;
	padding-bottom: 40px;
}
.sec10 .list .item.open .ques_btn:after {
	top: 33px;
	background-image: url("../images/ic_minus.svg");
}
.sec10 .list .item .answer {
    display: none;
    border-top: 1px dashed rgba(255, 255, 255, 0.5);
    padding: 40px 0px;
    font-size: 18px;
    line-height: 1.4;
    margin: 0 30px;
    box-sizing: border-box;
}
.sec10 .list .item.open .answer {
	display: block;
}



.main_bottom {
	position: relative;
	height: 100vh;
	background: rgba(5, 0, 28, 0.50);
	justify-content: center;
	gap: 60px;
	padding: 0 20px;
	box-sizing: border-box;
}
.main_bottom .tit_box {
	gap: 20px;
}
.main_bottom .tit_box h3.tit {
	font-size: 48px;
}
.main_bottom .link a {
	margin: 0 auto;
}
.main_bottom .copy {
	position: absolute;
	left: 0;
	bottom: 25px;
	width: 100%;
	text-align: center;
	font-size: 18px;
}





@media screen and (max-width: 1440px) {
	.visual .circle {
		width: 50%;
	}
}
@media screen and (max-width: 1280px) {
	.visual .circle {
		right: 0;
	}

	.sec01 .list {
		justify-content: center;
	}
	.sec01 .list .item {
		flex: none;
		width: calc(33.333% - 16px);
	}

	.sec03 .list .item {
        width: calc(50% - 12px);
    }

	.sec06 .list .item .tit span {
		width: 100%;
	}

	.sec07 .form .txt_box > div .icon svg {
		transform: scale(0.85);
	}

	.sec09 .swiper-slide {
		width: 400px;
	}
}
@media screen and (max-width: 1024px) {
	.tit_box h3.tit {
    	font-size: 24px;
	}
	.tit_box p {
    	font-size: 14px;
	}
	.tit_box a {
		font-size: 14px;
	}

	
	.visual {
        padding: 120px 0 110px;
        height: 100vh;
    }
	.visual .circle {
        top: 290px;
        width: 100%;
        max-width: 100%;
        height: 440px;
    }
	.visual .inner {
		height: 100%;
	}
	.visual .txt_box {
		height: 95%;
		justify-content: space-between;
	}
	.visual .txt_box .box .title span {
		font-size: 14px;
	}
	.visual .txt_box .box .title h2 {
    	font-size: 24px;
	}
	.visual .txt_box .box p {
		font-size: 14px;
	}
	.visual .txt_box .box p .m {
		display: block;
	}
	.visual .link a {
		margin: 0 auto;
	}

	.sec .inner {
    	gap: 40px;
	}

	.sec01 .list {
		justify-content: start;
	}
	.sec01 .list .item {
		width: calc(50% - 12px);
		padding: 40px 25px;
		gap: 20px;
	}
	.sec01 .list .item:last-child {
		width: 100%;
	}
	.sec01 .list .item .icon > * {
		width: 30px!important;
		height: 30px!important;
	}
	.sec01 .list .item strong {
		font-size: 20px;
	}
	.sec01 .list .item p {
    	font-size: 16px;
	}

	.sec02 .tit_box {
		flex: none;
		width: 100%;
		text-align: center;
	}

	
	.sec03 .list .item:last-child {
		width: calc(50% - 12px);
	}


	.sec04 .list {
		gap: 30px 10px;
	}
	.sec04 .list > div {
		flex: none;
		width: calc(50% - 5px);
	}
	.sec04 .list > div h3 {
    	font-size: 40px;
	}


	.sec05 .slide .cont p {
		font-size: 14px;
	}


	.sec06 .list .item {
		width: calc(50% - 12px);
	}
	.sec06 .list .item .top .num {
		font-size: 24px;
	}
	.sec06 .list .item .top .icon > * {
		width: 60px!important;
		height: 60px!important;
	}
	.sec06 .list .item .tit {
		gap: 5px 10px;
	}
	.sec06 .list .item .tit strong {
    	font-size: 20px;
	}
	.sec06 .list .item .tit span {
		font-size: 16px;
	}
	.sec06 .list .item p {
		font-size: 14px;
	}


	.sec07 .list .item {
		flex: none;
		width: calc(50% - 12px);
		font-size: 16px;
		gap: 15px;
	}
	.sec07 .form .txt_box {
    	width: 200px;
	}
	.sec07 .form .txt_box > div {
		gap: 8px;
		font-size: 14px;
	}


	.sec08 .list {
        gap: 12px;
        margin: 0 -20px;
        width: calc(100% - -40px);
    }
	.sec08 .box {
		gap: 12px;
	}
	.sec08 .box img {
		width: 170px;
	}


	.sec09 .swiper-slide {
        width: 320px;
    }
	.sec09 .swiper-slide .box {
		gap: 30px;
		padding: 25px;
	}
	.sec09 .swiper-slide .box .info {
		font-size: 14px;
	}
	.sec09 .swiper-slide .box .info .title {
		font-size: 18px;
	}


	
	.sec10 .list {
		padding: 20px;
	}
	.sec10 .list .item .ques_btn {
		font-size: 16px;
		padding: 16px 54px 16px 15px;
	}
	.sec10 .list .item .ques_btn:after {
		top: 15px;
		right: 15px;
		width: 22px;
		height: 22px;
		background-size: 100%;
	}
	.sec10 .list .item .answer {
		padding: 30px 0;
		font-size: 16px;
		margin: 0 20px;
	}
	.sec10 .list .item.open .ques_btn {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.sec10 .list .item.open .ques_btn:after {
    	top: 28px;
	}


	.main_bottom {
		gap: 40px;
	}
	.main_bottom .tit_box {
		gap: 10px;
	}
	.main_bottom .tit_box h3.tit {
		font-size: 34px;
	}
	.main_bottom .tit_box p {
		font-size: 16px;
	}
	.main_bottom .copy {
		bottom: 120px;
		font-size: 14px;
	}
}
@media screen and (max-width: 768px) {
	.sec01 .list .item {
		width: 100%!important;
	}
	.sec01 .list .item strong {
        font-size: 20px;
    }

	.sec02 .circle_box {
		width: 400px;
		height: 400px;
	}
	.sec02 .circle_box .video {
		width: 200px;
		height: 200px;
	}
	.sec02 .circle_box .video .box h2 {
		font-size: 24px;
	}
	.sec02 .circle_box .video .box p {
    	font-size: 12px;
	}
	.sec02 .circle_box .icon_box .item {
		width: 110px;
		font-size: 13px;
		gap: 2px;
	}
	.sec02 .circle_box .icon_box .item .icon {
		transform: scale(0.8);
		margin-bottom: -5px;
	}
	.sec02 .circle_box .icon_box .item.item1 {
		top: 50px;
	}
	.sec02 .circle_box .icon_box .item.item1 .icon {
		margin-bottom: 0;
	}
	.sec02 .circle_box .icon_box .item.item2 {
		top: 98px;
		right: -20px;
	}
	.sec02 .circle_box .icon_box .item.item3 {
		right: -57px;
	}
	.sec02 .circle_box .icon_box .item.item4 {
		bottom: 41px;
		right: -18px;
	}
	.sec02 .circle_box .icon_box .item.item5 {
		bottom: 10px;
	}
	.sec02 .circle_box .icon_box .item.item6 {
		bottom: 50px;
		left: 90px;
	}
	.sec02 .circle_box .icon_box .item.item7 {
		left: 55px;
	}
	.sec02 .circle_box .icon_box .item.item8 {
		top: 95px;
		left: 97px;
	}


	.sec06 .list .item {
		width: 100%;
		padding: 25px;
	}

	.sec07 .list .item {
		width: 100%;
	}
	.sec07 .form .txt_box {
        width: 130px;
		padding: 40px 0;
    }
	.sec07 .form .txt_box > div .icon svg {
        transform: scale(0.5);
    }
	.sec07 .video {
		height: 400px;
	}
	.sec07 .video video {
		top: 50%;
		transform: translate(-50%, -50%);
		height: 130%;
	}

	.sec08 .box img {
        width: 100px;
    }


	.sec09 .tit_box p .m {
		display: block;
	}

	.main_bottom .tit_box h3.tit {
        font-size: 28px;
    }
	.main_bottom .tit_box p {
        font-size: 14px;
    }
}
@media screen and (max-width: 480px) {
	.visual .circle {
		top: 3%;
		height: 340px;
	}


	.sec02 .circle_box .video {
        width: 140px;
        height: 140px;
    }
	.sec02 .circle_box .video .box h2 {
        font-size: 18px;
    }
	.sec02 .circle_box {
        width: 300px;
        height: 300px;
    }
	.sec02 .circle_box .icon_box .item {
		width: 95px;
		font-size: 11px;
	}
	.sec02 .circle_box .icon_box .item .icon {
        transform: scale(0.6);
    }
	.sec02 .circle_box .icon_box .item.item1 {
		top: 40px;
	}
	.sec02 .circle_box .icon_box .item.item2 {
        top: 70px;
        right: -25px;
    }
	.sec02 .circle_box .icon_box .item.item3 {
        right: -50px;
    }
	.sec02 .circle_box .icon_box .item.item4 {
        bottom: 27px;
        right: -25px;
    }
	.sec02 .circle_box .icon_box .item.item5 {
        bottom: 0px;
    }
	.sec02 .circle_box .icon_box .item.item6 {
        bottom: 35px;
        left: 73px;
    }
	.sec02 .circle_box .icon_box .item.item7 {
        left: 45px;
    }
	.sec02 .circle_box .icon_box .item.item8 {
        top: 65px;
        left: 76px;
    }


	.sec04 .list > div {
		gap: 7px;
	}
	.sec04 .list > div p {
    	font-size: 14px;
	}
	.sec04 .list > div h3 {
		font-size: 26px;
	}


	.sec07 .form .txt_box {
		width: 100%;
		padding: 0;
		gap: 20px;
	}
	.sec07 .form .txt_box > div .icon {
		display: none;
	}
	.sec07 .form .txt_box > div.t3 .icon {
        display: block;
        right: auto;
        left: -20px;
        bottom: -75px;
        transform: rotate(90deg);
    }
	.sec07 .form .txt_box > div.t3 .icon svg {
        transform: scale(0.8);
    }
	.sec07 .form .txt_box > div.t4 .icon {
        display: block;
        top: -115px;
        right: -60px;
        left: auto;
        bottom: auto;
        transform: rotate(90deg);
    }
	.sec07 .form .txt_box > div.t4 .icon svg {
        transform: scale(0.8);
    }
	.sec07 .video {
		flex: none;
		width: 100%;
	}
	.sec07 .video video {
		height: 100%;
	}
}
@media screen and (max-width: 380px) {
	.sec02 .circle_box {
		width: 260px;
		height: 260px;
	}
	.sec02 .circle_box .video {
        width: 100px;
        height: 100px;
    }
	.sec02 .circle_box .video .box p {
		display: none;
	}
	.sec02 .circle_box .icon_box .item {
		width: 80px;
	}
	.sec02 .circle_box .icon_box .item.item2 {
        top: 60px;
        right: -16px;
    }
	.sec02 .circle_box .icon_box .item.item3 {
        right: -40px;
    }
	.sec02 .circle_box .icon_box .item.item4 {
        bottom: 20px;
        right: -17px;
    }
	.sec02 .circle_box .icon_box .item.item5 {
        bottom: 5px;
    }
	.sec02 .circle_box .icon_box .item.item6 {
        left: 65px;
    }
	.sec02 .circle_box .icon_box .item.item7 {
        left: 40px;
    }
	.sec02 .circle_box .icon_box .item.item8 {
        left: 67px;
    }
}

/* ============================================================
   __nv_mobile_v1  :  모바일 히어로/섹션 여백 정리 (오버라이드 블록)
   - 기존 규칙은 수정하지 않고 파일 맨 끝에서 덮어씀
   - 히어로: 100vh + space-between 구조 → flow 기반으로 전환
     원형영상 아래 버튼 간격을 --hv-gap-b 로 고정
   ============================================================ */
@media screen and (max-width: 1024px) {

	/* ---------- 히어로 ---------- */
	.visual {
		--hv-pb:      clamp(48px, 9vw, 80px);   /* 히어로 하단 여백 */
		--hv-btn:     48px;                     /* 버튼 높이(고정) */
		--hv-circle:  clamp(230px, 60vw, 420px);/* 원형 영상 높이(비율) */
		--hv-gap-t:   clamp(20px, 5vw, 36px);   /* 텍스트 ↔ 원형영상 */
		--hv-gap-b:   clamp(16px, 4vw, 28px);   /* 원형영상 ↔ 버튼  ← 여기만 조절하면 됨 */

		position: relative;
		height: auto;
		min-height: 0;
		padding: 130px 0 var(--hv-pb);
	}
	.visual .inner {
		height: auto;
	}
	.visual .txt_box {
		height: auto;
		justify-content: flex-start;
		gap: 0;
		padding: 0;
	}
	/* 텍스트 아래로 [gap-t + 원형영상 + gap-b] 만큼 자리를 비워둔다 */
	.visual .txt_box .box {
		margin-bottom: calc(var(--hv-gap-t) + var(--hv-circle) + var(--hv-gap-b));
	}
	/* 원형 영상 = 그 비워둔 자리에 정확히 안착 (버튼 바로 위 gap-b 지점) */
	.visual .circle {
		position: absolute;
		top: auto;
		left: 0;
		right: 0;
		bottom: calc(var(--hv-pb) + var(--hv-btn) + var(--hv-gap-b));
		width: 100%;
		max-width: 100%;
		height: var(--hv-circle);
	}
	/* 버튼 높이 고정 → 원형영상과의 간격이 기기별로 흔들리지 않음 */
	.visual .link a {
		height: var(--hv-btn);
		line-height: var(--hv-btn);
		padding: 0 24px;
		margin: 0 auto;
	}

	/* ---------- 섹션 여백 (PC 고정 px → 비율) ---------- */
	.sec {
		padding: clamp(56px, 10vw, 100px) 0;
	}
	.sec .inner {
		gap: clamp(28px, 6vw, 40px);
	}
	.sec07 {
		padding: clamp(70px, 13vw, 140px) 0;
		gap: clamp(40px, 9vw, 90px);
	}
	.bg_line {
		padding-bottom: clamp(40px, 8vw, 60px);
	}
	.main_bottom {
		gap: clamp(28px, 6vw, 40px);
	}
}
@media screen and (max-width: 768px) {
	.sec {
		padding: clamp(48px, 9vw, 76px) 0;
	}
	.sec07 {
		padding: clamp(60px, 12vw, 100px) 0;
		gap: clamp(32px, 8vw, 60px);
	}
}
@media screen and (max-width: 480px) {
	.visual {
		padding-top: 120px;
	}
	.sec {
		padding: 48px 0;
	}
	.sec .inner {
		gap: 28px;
	}
	.sec07 {
		padding: 60px 0;
		gap: 32px;
	}
}


/* ============================================================
   __nv_sec06_card_v1 : 모바일 카드(01/아이콘/타이틀) 간격 정렬
   - 아이콘을 흐름에서 빼서(absolute) 우측 상단 현재 위치 그대로 고정
   - .top 높이가 "01" 글자 높이로 축소 → .item 의 gap 이 그대로 적용
     결과: [01 ↔ 타이틀] 간격 = [타이틀 ↔ 본문] 간격
   ============================================================ */
@media screen and (max-width: 1024px) {
	.sec06 .list .item {
		--c6-pad: 40px;          /* 카드 안쪽 여백 (아이콘 기준점) */
		--c6-icon: 60px;         /* 아이콘 크기 */
		position: relative;
	}
	.sec06 .list .item .top {
		display: block;
		width: 100%;
		padding-right: calc(var(--c6-icon) + 10px);   /* 아이콘 영역 침범 방지 */
		box-sizing: border-box;
	}
	.sec06 .list .item .top .num {
		display: block;
		line-height: 1.1;
	}
	.sec06 .list .item .top .icon {
		position: absolute;
		top: var(--c6-pad);
		right: var(--c6-pad);
		width: var(--c6-icon);
		height: var(--c6-icon);
		line-height: 0;
	}
}
@media screen and (max-width: 768px) {
	.sec06 .list .item {
		--c6-pad: 25px;          /* 이 구간의 카드 padding 과 동일 */
	}
}


/* ============================================================
   __nv_sec06_num_v3 : 카드 넘버(01) ↔ 타이틀 간격 정리
   flex 정렬(base.css)에 의존하지 않는 방식.
   - 아이콘: 흐름에서 빼서 카드 우측 상단에 절대 고정 (60x60)
   - 01: 아이콘 바닥선에 맞춰 내림 (margin-top = 아이콘높이 - 숫자높이)
   => [01 ↔ tit] = [tit ↔ p] = .item 의 gap(20px) 로 완전 동일
   ============================================================ */
@media screen and (max-width: 1024px) {
	.sec06 .list .item {
		--c6-pad:  40px;   /* 카드 패딩 (아이콘 위치 기준) */
		--c6-icon: 60px;   /* 아이콘 박스 */
		--c6-num:  24px;   /* 01 숫자 높이 */
		/* 숫자 낙차. 16px = 타이틀 상단선이 아이콘 하단선과 정확히 일치하는 최대 상향치.
		   더 줄이면(0~15px) 숫자·본문이 더 올라가지만 타이틀이 아이콘과 겹칠 수 있음 */
		--c6-drop: 16px;
		position: relative;
	}
	.sec06 .list .item .top {
		display: block;
		min-height: 0;
		position: static;
	}
	.sec06 .list .item .top .icon {
		position: absolute;
		top: var(--c6-pad);
		right: var(--c6-pad);
		width: var(--c6-icon);
		height: var(--c6-icon);
		margin: 0;
	}
	.sec06 .list .item .top .num {
		display: block;
		font-size: var(--c6-num);
		line-height: 1;
		margin: var(--c6-drop) 0 0;
	}
}
@media screen and (max-width: 768px) {
	.sec06 .list .item {
		--c6-pad: 25px;
	}
}


/* ============================================================
   __nv_sec06_num_pc_v1 : PC(1025px+) 카드 넘버 낙차
   아이콘 80px / 숫자 32px / 카드패딩 40px
   drop 28px = 타이틀 상단선이 아이콘 하단선과 일치하는 최대 상향치
   ============================================================ */
@media screen and (min-width: 1025px) {
	.sec06 .list .item {
		--c6-pad:  40px;
		--c6-icon: 80px;
		--c6-num:  32px;
		--c6-drop: 28px;   /* ← 이 값만 조절 (0~27px 더 올리면 타이틀이 아이콘과 겹칠 수 있음) */
		position: relative;
	}
	.sec06 .list .item .top {
		display: block;
		min-height: 0;
		position: static;
	}
	.sec06 .list .item .top .icon {
		position: absolute;
		top: var(--c6-pad);
		right: var(--c6-pad);
		width: var(--c6-icon);
		height: var(--c6-icon);
		margin: 0;
	}
	.sec06 .list .item .top .num {
		display: block;
		font-size: var(--c6-num);
		line-height: 1;
		margin: var(--c6-drop) 0 0;
	}
}


/* ============================================================
   __nv_icon_topright_v5 : 아이콘 우측 상단 고정 + 타이틀 상단 정렬
   대상 : .sec01(Why NOVAS) / .sec01.sec03(Built for Long-Term) / .sec07(Risk Management)
   - 아이콘: 흐름에서 빼서 카드 우측 상단에 고정 (기본 60x60)
   - 타이틀/본문: 카드 최상단부터 시작 (sec06 의 01 숫자 자리)
   - 텍스트 열 우측에 아이콘 폭만큼 여백 확보 → 아이콘과 절대 겹치지 않음
   ============================================================ */
.sec01 .list .item {
	--ic-t: 40px;   /* 아이콘 상단 위치 = 카드 상단 패딩 */
	--ic-r: 40px;   /* 아이콘 우측 위치 */
	--ic-s: 60px;   /* 아이콘 크기 */
	--ic-x: 20px;   /* 텍스트 ↔ 아이콘 최소 간격 */
}
.sec07 .list .item {
	--ic-t: 30px;
	--ic-r: 30px;
	--ic-s: 60px;
	--ic-x: 16px;
}
.sec01 .list .item,
.sec07 .list .item {
	position: relative;
	padding-top: var(--ic-t);
	gap: 5px;   /* 타이틀 ↔ 본문 간격 (아이콘은 absolute 라 gap 영향 없음) */
}
.sec01 .list .item > .icon,
.sec07 .list .item > .icon {
	position: absolute;
	top: var(--ic-t);
	right: var(--ic-r);
	width: var(--ic-s);
	height: var(--ic-s);
	margin: 0;
	padding: 0;
	line-height: 0;
}
.sec01 .list .item > .icon > *,
.sec07 .list .item > .icon > * {
	display: block !important;
	width: var(--ic-s) !important;
	height: var(--ic-s) !important;
}
/* 타이틀만 아이콘 영역을 피함. min-height 로 p 가 항상 아이콘 아래에서 시작 */
.sec01 .list .item > strong,
.sec07 .list .item > strong {
	padding-right: calc(var(--ic-s) + var(--ic-x));   /* 타이틀만 아이콘 폭을 피함 */
	min-height: 0;                                    /* 아이콘 높이의 영향 안 받음 */
	box-sizing: border-box;
}
/* 본문 p 는 좌우 전폭 사용 */
.sec01 .list .item > p,
.sec07 .list .item > p {
	padding-right: 0;
	width: 100%;
	box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
	.sec01 .list .item {
		--ic-t: 25px;
		--ic-r: 25px;
	}
	.sec07 .list .item {
		--ic-t: 25px;
		--ic-r: 25px;
	}
}


/* ============================================================
   __nv_sec07_font_v1 : Risk Management 카드 폰트 크기
   ============================================================ */
.sec07 .list .item > strong {
	font-size: 20px;
	line-height: 1.3;
}
.sec07 .list .item > p {
	font-size: 16px;
	line-height: 1.5;
}


/* ============================================================
   __nv_card_number_v1 : sec01 / sec03 / sec07 카드에 01,02.. 번호 부여
   HTML 수정 없이 CSS counter 로 생성. sec06(AI Protocol) 과 동일한 스타일.
   - 폰트: Helvetica (.font_h 와 동일)
   - 크기: PC 32px / 모바일 24px
   - 낙차(D) + 하단여백(B) 계산으로 타이틀 상단선 = 아이콘 하단선(60px) 에 정렬
     D + 숫자높이 + item gap(5px) + B = 아이콘높이(60px)
   ============================================================ */
.sec01 .list,
.sec07 .list {
	counter-reset: nvcard;
}
.sec01 .list .item,
.sec07 .list .item {
	counter-increment: nvcard;
}
.sec01 .list .item:before,
.sec07 .list .item:before {
	content: counter(nvcard, decimal-leading-zero);
	display: block;
	width: 100%;
	font-family: 'Helvetica';
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
	margin: 13px 0 10px;   /* D=13, B=10  → 13+32+5+10 = 60 */
	order: -1;             /* 항상 최상단 */
}
/* 번호가 아이콘 줄을 차지하므로 타이틀 우측 회피 여백 불필요 */
.sec01 .list .item > strong,
.sec07 .list .item > strong {
	padding-right: 0;
}
@media screen and (max-width: 1024px) {
	.sec01 .list .item:before,
	.sec07 .list .item:before {
		font-size: 24px;
		margin: 16px 0 15px;   /* D=16, B=15  → 16+24+5+15 = 60 */
	}
}


/* ============================================================
   __nv_sec09_viewall_v1 : Notice & News 의 View All 위치
   layout.css 의 .tit_box a 는 우측 하단(bottom:2px) 배치라 p 문장과 겹침.
   → 타이틀(h3) 줄 우측으로 올리고, h3 에만 우측 여백 확보 (p 는 전폭 사용)
   함께: sec10 은 링크가 없으므로 padding-right:150px 무효화
   ============================================================ */
.sec09 .tit_box a {
	top: 0;
	bottom: auto;
	right: 0;
	height: 48px;              /* 타이틀 h3 40px * line-height 1.2 */
	display: flex;
	align-items: center;
	background-position: 100% 50%;
}
.sec09 .tit_box h3.tit {
	padding-right: 150px;      /* View All 자리 확보. p 는 영향 없음 */
	box-sizing: border-box;
}
.sec10 .tit_box {
	padding-right: 0;
}
@media screen and (max-width: 1024px) {
	.sec09 .tit_box a {
		height: 36px;          /* 타이틀 h3 30px * 1.2 */
	}
	.sec09 .tit_box h3.tit {
		padding-right: 110px;
	}
}


/* ============================================================
   __nv_anchor_offset_v1 : #about / #business 등 앵커 이동 시 헤더에 가리는 문제
   고정 헤더 높이만큼 스크롤 정지 위치를 위로 띄움 (HTML 수정 없음)
   PC 헤더 118px / 모바일 64px + gnb 45px = 109px  (+ 여유 20px)
   ============================================================ */
#business,
#about,
#timeline,
#partner,
#notice {
	scroll-margin-top: 138px;
}
@media screen and (max-width: 1024px) {
	#business,
	#about,
	#timeline,
	#partner,
	#notice {
		scroll-margin-top: 130px;
	}
}


/* ============================================================
   __nv_mainbottom_h_v1 : Start With NOVAS 섹션 높이
   height:100vh 고정 → 내용 대비 과도하게 큼. 모바일에서 비율 기반으로 전환.
   .copy 는 absolute(bottom:120px) 이므로 하단 패딩으로 자리 확보.
   ============================================================ */
@media screen and (max-width: 1024px) {
	.main_bottom {
		height: auto;
		min-height: 0;
		padding: clamp(70px, 15vw, 120px) 20px 175px;
		gap: clamp(24px, 6vw, 40px);
	}
}
@media screen and (max-width: 480px) {
	.main_bottom {
		padding: 70px 20px 165px;
		gap: 24px;
	}
}


/* ============================================================
   __nv_copy_gap_v1 : copyright 아래 여백 추가
   .copy 는 섹션 하단 기준 absolute. bottom 값을 키우면 아래 여백이 늘어남.
   120px → 155px (아래로 35px 추가 확보)
   ============================================================ */
@media screen and (max-width: 1024px) {
	.main_bottom .copy {
		bottom: 155px;
	}
	.main_bottom {
		padding-bottom: 190px;   /* copy(155) + 글자높이 + 여유 */
	}
}
@media screen and (max-width: 480px) {
	.main_bottom {
		padding-bottom: 190px;
	}
}

/* ============================================================

   __nv_copy_gap_v1 : copyright 아래 여백 추가

   .copy 는 섹션 하단 기준 absolute. bottom 값을 키우면 아래 여백이 늘어남.

   120px → 155px (아래로 35px 추가 확보)

   ============================================================ */

@media screen and (max-width: 1024px) {

	.main_bottom .copy {

		bottom: 155px;

	}

	.main_bottom {

		padding-bottom: 190px;   /* copy(155) + 글자높이 + 여유 */

	}

}

@media screen and (max-width: 480px) {

	.main_bottom {

		padding-bottom: 210px;

	}

}


/* ============================================================

   __nv_copy_gap_v1 : copyright 아래 여백 추가

   .copy 는 섹션 하단 기준 absolute. bottom 값을 키우면 아래 여백이 늘어남.

   120px → 155px (아래로 35px 추가 확보)

   ============================================================ */

@media screen and (max-width: 1024px) {

	.main_bottom .copy {

		bottom: 155px;

	}

	.main_bottom {

		padding-bottom: 190px;   /* copy(155) + 글자높이 + 여유 */

	}

}

@media screen and (max-width: 480px) {

	.main_bottom {

		padding-bottom: 230px;

	}

}