@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Cafe24ShiningStar';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
/* 1. 모든 요소의 여백 초기화 및 박스 크기 기준 설정 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. 리스트 스타일 제거 (점, 숫자 제거) */
ul, ol, li {
    list-style: none;
}

/* 3. 링크 기본 스타일 제거 (밑줄 및 색상) */
a {
    text-decoration: none;
    color: inherit;
}

/* 4. 이미지 하단 미세한 공백 제거 */
img {
    vertical-align: middle;
    border: 0;
}

/* 5. 버튼 및 입력창 초기화 */
button, input {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Suit';
}

body {
    font-family: 'Suit';
    letter-spacing: -1.5px;
	line-height:1.2;
}
.container {
    max-width: 1000px;
    width: auto;
    margin: 0 auto;
}
.ftgs {font-family: 'GMarketSans';}
.ftstar {font-family: 'Cafe24ShiningStar';}
.fs42{font-size:42px;}
.fs90{font-size:90px}
.fs65 {font-size:65px}
.fs30{font-size:30px}
.fs35 {font-size:35px}
.fs40{font-size:40px}
.fs26{font-size:26px}
.fs22{font-size:22px}
.fs20{font-size:20px;}
.fs24{font-size:24px;}
.fs18{font-size:18px}
.fs16{font-size:16px;}




.gra_color { background: linear-gradient(90deg, #ff003c, #ff0060);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
.main_section {
	background:url('../images/main_back.jpg') no-repeat;
	height:800px;
	color:white;
    padding: 0;
    background-position: center;
}

.main_section .fs90 {
    padding-top: 60px;
	text-align:center;
    letter-spacing: -6px;
line-height: 1.2;
}
.main_section .fs65 {
    font-weight: 400;
    letter-spacing: -3px;
}
.main_section .black_box {
    background: #000000c7;
    width: 500px;
    display: grid;
    align-items: center;
    justify-content: center;
    padding: 35px 0;
    gap: 15px;
    margin: 60px auto 35px
}
.main_section .black_box li {
    display: flex;
    align-items: center;
    gap: 30px;
}
.go_btn {
background: linear-gradient(90deg, #ff003c, #ff0060);
color: white;
    width: 500px;
    font-size: 30px;
    font-weight: bold;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}


.section1 {
	text-align:center;
	background:black;
    color: white;
	padding:45px 0;
}
.section1  .fs35 {
	line-height:1.4;
	    margin-bottom: 10px;
}
section {
	padding:80px 0px
}
.section_title {
	text-align:center;
    line-height: 1.2;
	margin-bottom:40px;
}


.section2 .bd_box {
	border:1px solid #ccc;
	width: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.section2 .bd_box ul {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 55px;
	padding:40px 0;
}
.section2 .bd_box ul  li:last-child {
	grid-column : span 2
}


.section3 .grid_wrap {
	display:grid;
	width:750px;
    margin: 0 auto;
}
.section3 .grid_wrap .grid_box {
	border-top:2px solid black;
    display: grid;
    grid-template-columns: 1fr 1fr;
	padding:40px 20px;
	gap:50px;
}
.section3 .grid_box .top_wrap {
	display:grid;
    grid-template-columns: 65px 140px 130px;
    gap: 0;
	font-weight:bold;
}
.section3 .grid_box .time {
background: black;
    color: white;
    border-radius: 100px;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
}
.section3 .section_ul {
	font-size:20px;
display: grid;
    gap: 14px;

}
.section3 .top_wrap .gra_color {
transform: translate(0, 3px);
}
.section3  .black_back {
	background:black;
	color:white;
	    padding: 10px 0px;
    display: flex;
    align-items: center;
	text-align: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}
.section3 .img_back {
	background:url('../images/report_back.jpg') no-repeat;
	text-align: center;
    color: white;
    font-size: 22px;
    padding: 33px 0;
}
.section3 .img_back img {
	margin-bottom:12px;
}

.section4 {
	background:url('../images/benefit_back.jpg') no-repeat;
}
.section4 .section_title {
	color:white;
}
.section4 .grid_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
	text-align:center;
}
.section4 .grid_wrap .grid_box {
	background:white;
	display: flex;
    align-items: center;
    justify-content: center;
	padding:22px 0;
}
.section4 .grid_wrap .color_back {
background: linear-gradient(90deg, #ff003c, #ff0060);
color: white;
	grid-column : span 2
}
.section4 .fs26 {
	font-weight:bold;
	margin-bottom:5px;
}
.section4  .gra_color {
	margin-bottom:10px;
	font-weight:bold;
}
.section4  .plus_icon {
	margin:0 auto;
	margin: 10px auto;
		grid-column : span 2
}
.section4  .color_back img {
	margin-bottom:10px;
} 



.section5 .grid_wrap {
	display:grid;
	gap:15px;
}
.section5 .grid_wrap .grid_box {
border: 1px solid #ccc;
    display: grid;
    align-items: center;
grid-template-columns: 1fr 400px 170px;
padding: 12px 0 12px 30px;
font-weight: 500;
}
.section5 .grid_wrap .grid_box .info_wrap {
	display:grid;
	    align-items: center;
grid-template-columns: 75px 75px 225px;
}

.section5 .grid_wrap .grid_box .fs16 {
	color:#666;
}
.section5 .dot_wrap {
	display:grid;
	gap:9px;
    justify-content: center;
	margin: 35px 0;
}
.section5 .dot_wrap .dot {
	width:7px;
	height:7px;
	background:black;
}
.section5 .fs42 {
	text-align:center;
	line-height:1.1;
}
.section6 {
	background:url('../images/sta_back.jpg') no-repeat;
}
.section6 .section_title {
	color:white;
}
.section6 .grid_wrap {
    display: flex;
    gap: 30px;
	color:white;
}
.section6 .grid_box {
	flex: 1;
    text-align: center;
}
.section6 .border {
background: #ffffff0f;
    border-radius: 100px;
    width: 155px;
    height: 155px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffffff57;
    box-shadow: 5px 5px 5px #00000085;
    backdrop-filter: blur(1px);
	    margin: 20px auto ;
}
.section6 .border .gra_color {
font-size: 28px;
    font-weight: bold;
    display: inline-block;
    margin-right: 3px;
}

.go_btn.last_btn {
	margin:100px auto 120px;
}

footer {
	background:black;
	color:white;
	padding:40px 0;
	text-align:center;
	font-size:14px;
	line-height:1.4;
}
.moi_br {display:none;}

@media screen and (max-width: 1000px) {
.fs90 {font-size:60px;}
.fs65 {font-size:45px;}
.fs30{font-size:24px;}
.fs40{font-size:28px;}
.fs35{font-size:24px;}
.fs24{font-size:18px;}
.fs26{font-size:18px;}
.fs20{font-size:14px;}
.fs22{font-size:14px;}
.fs18{font-size:14px;}
.fs16{font-size:14px;}
.fs42{font-size:28px;}

.go_btn{font-size:24px; gap: 15px;}
.go_btn img{    width: 12px;}
.main_section{height:670px;background-size: cover;}
.main_section .black_box {margin: 40px auto 30px;	}
.section_title{margin-bottom:20px}
section{padding:60px 16px;}
.section3 .grid_box .time{letter-spacing: 0;
    width: 110px;
    text-align: center;}
.section3 .section_ul{font-size:16px}
.section3 .img_back {background-position:center; background-size:cover;}

	.section5 .dot_wrap {
	    gap: 7px;
    margin: 30px 0;
	}
.section6 .border .gra_color{font-size:18px;}
.section6 .grid_wrap{         flex-wrap: wrap;
        padding: 0 50px;
        gap: 10px 30px;
        justify-content: center;}
.section6 .border{    width: 125px;
    height: 125px;}
.section6 .grid_box{    flex: none;}
.section6{background-size:cover;background-position:center;}
.section5 .grid_wrap .grid_box {
grid-template-columns: 260px 300px 120px;
}
.section5 .grid_wrap .grid_box .info_wrap {
grid-template-columns: 45px 45px 170px;
}
}


@media screen and (max-width: 767px) {
.main_section .fs90 {
    letter-spacing: -3px;
	padding-top:90px;
}
.fs90 {font-size:50px;}
.fs30{font-size:20px;}
.fs35{font-size:20px;}
.fs40{font-size:25px;}
.go_btn{font-size:18px;}
.main_section .black_box{
        width: auto;
        padding: 20px;
        gap: 10px;
	        margin: 40px 16px;
	}
	.go_btn {width: auto;
			font-size: 20px;
			padding: 14px 35px;}
	.section2 .bd_box {width:auto}
	.section3 .grid_wrap{width:auto;}
	.section3 .grid_box .top_wrap {
		grid-template-columns: 1fr;
		gap:10px;
		}
		.section3 .grid_box .top_wrap .fs26 {
			font-size:22px;
		}

	.moi_br {display:block;}
	.main_section{height:620px;}
	.section2 .bd_box ul {   
	gap: 20px;
    padding: 40px 0px;}
	.section3 .grid_wrap .grid_box {
        padding: 40px 10px;
		grid-template-columns: 1fr 2fr;
        gap: 20px;
		}
	.section3 .black_back {
    width: max-content;
    padding: 5px 10px;
    font-size: 14px;
    letter-spacing: -1px;
	}
	.section3 .section_ul {
		font-size:14px;
	}
	.section3 .grid_box .time {
	    font-size: 12px;
    width: max-content;
    padding: 5px 10px;
    height: auto;
    line-height: normal;
	}
	.section_title.fs35 {
		font-size:25px;
	}
	.section3 .img_back {
		font-size:16px;
	}
	.section3 .img_back img {
		width:40px;
	}
	.section4 .gra_color {
		font-size:18px;
	}
	.section4 .section_title .gra_color {
		font-size:25px;
	}
	.section4 .grid_wrap {
		gap:10px;
	}
	.section4 .plus_icon {
		width:50px;
	}
	.section4 .color_back img {
	    width: 50px;
	}
		.section5 .grid_wrap .grid_box {
        display: grid;
        padding: 10px;
grid-template-columns: 0.8fr 1fr;
	}


	.section6 .grid_wrap {
		padding:0;
        gap: 0 10px;
	}
	.section6 .border {
		width:110px;
		height:110px;
	}
	.section5 .grid_wrap .grid_box .info_wrap {
        display: grid;
gap: 5px;
        justify-content: center;
        grid-template-columns: 1fr;
		        grid-row: span 2;

	}
	.section5 .grid_wrap .grid_box .info_wrap img{
		width:20px;
	}
	.section5 .grid_wrap {
		gap:10px;
	}
	.section5 .dot_wrap {
	        gap: 5px;
			margin: 20px 0;
	}
	.section5 .dot_wrap .dot {
		width: 5px;
		height: 5px;
	}
	.go_btn.last_btn {
		margin:50px auto 90px;
	}
} 

