@charset "utf-8";
/*######## reset (초기화) #########*/
		*{margin:0; padding:0;}
		li{list-style:none;}
		li{list-style-type:none;}
		body,header,section,footer,nav,div,p,ul,ul li, ol,ol li, h1, h2,h3, 
		dl, dl dt, dl dd{margin:0; padding:0;}
		header, section, footer, nav, aside{display:block;}

		img{border:none;}
		a:link, a:visited{text-decoration:none;}
		a:hover, a:focus{text-decoration:none;}

		input[type="button"], input[type="submit"], input[type="reset"], button{cursor:pointer;}

*:after,
*:before { -webkit-box-sizing: border-box; box-sizing: border-box;}

@font-face {
    font-family: Spoqa Han Sans Neo;
    /*src: url(/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.otf) format("opentype");*/
    src: url(/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.woff2) format("woff2");
    font-weight: 300;
    font-display: auto;
    font-style: normal;
}

@font-face {
    font-family: Spoqa Han Sans Neo;
    /*src: url(/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.otf) format("opentype");*/
    src: url(/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.woff2) format("woff2");
    font-weight: 400;
    font-display: auto;
    font-style: normal;
}

@font-face {
    font-family: Spoqa Han Sans Neo;
    /*src: url(/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.otf) format("opentype");*/
    src: url(/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.woff2) format("woff2");
    font-weight: 500;
    font-display: auto;
    font-style: normal;
}

@font-face {
    font-family: Spoqa Han Sans Neo;
    /*src: url(/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.otf) format("opentype");*/
    src: url(/fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff2) format("woff2");
    font-weight: 600;
    font-display: auto;
    font-style: normal;
}

body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(22, 28, 45, 0);
    background-color: var(--bs-body-bg);
    color: #3772ff;
    font-family: var(--bs-body-font-family);
	font-family: Spoqa Han Sans Neo;
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    margin: 0;
    text-align: var(--bs-body-text-align);
}

dl,
ol,
ul { margin-bottom: 0; margin-top: 0; padding: 0;}

ol ol,ol ul,ul ol,ul ul {margin-bottom: 0;}

li { list-style: none;}

img,
svg {
    vertical-align: middle;
}
h1,h2 {letter-spacing: -0.01em;}
h3,h4 {letter-spacing: -0.01em;}


#wrap{width:100%;}

/*############### container #################*/
.container{width:100%; }
.content1{padding: 3rem 0;}
.content1 , .content2, .content3 , .content4{width:100%;}
.hidePc{display:none;}
.imgArea img , .hidePc img{width:100%;}

/*############## content1 #########################*/
.content1 ul{display:flex; justify-content:space-between; align-items:center;}
.content1 ul li{width:42%;}/*수정*/
.content1 ul li.imgArea{width:49%;}
.content1 ul li.imgArea img{width:100%;}
.content1 ul li h2{font-size: 1.8rem; margin-bottom:0; font-weight: 600; line-height: 2.5rem; letter-spacing:-0.05rem; text-align:center;color:#161c2d;}
.content1 ul li h3{line-height:1.2; letter-spacing:-0.07em; color:#084aea; font-size:2.6rem; font-weight:600; margin-bottom:2rem; text-align:center;}
.content1 li .card-body{background-color:#3772FF; padding:1.88rem; color:#fff; border-radius:1.88rem; text-align:center; 
box-shadow: 0 1.5rem 4rem rgba(22, 28, 45, 0.1); display:block;}
.card-body h5{line-height:1.5; color:#fff; font-size:1.0625rem; font-weight:400; margin-bottom:1.5rem;}
.content1 li .card-body h2{line-height:1.2; letter-spacing:-0.04em; margin-bottom:1rem; font-size:2rem; font-weight:700; color:#fff; }
.card-body p{margin-bottom:1.5rem; letter-spacing:-0.04em;}
.card-body p > .ml {margin-left:0.25rem;}
.card-body div > div.partLinkA{display:flex;gap:10px;}
.card-body div > div > a{font-weight:600;  width:100%;}
/*파란색 버튼 공통역역 Btn*/
a.Btn{display:block; font-size:1.1rem; border-radius:1rem; padding: 1.122rem 0; text-align:center;background-color:#084aea; border-color:#0041DD;}
a.Btn:hover , a.Btn:focus{background-color:#0041DD;}
.card-body div > div > a:nth-child(2){margin-right:0;}
.card-body div div > a{color:#fff;}

.media-Btn {display:block;}

.btn-style {
    background-color: #084aea; /* 버튼 배경색 */
    color: #fff; /* 버튼 텍스트 색상 */
    border: none; /* 버튼 테두리 없음 */
	border-radius:1rem; 
	padding: 1.122rem 0; 
	font-size:1.1rem; 
	font-weight:600;  
	width:100%;
    cursor: pointer; /* 마우스 커서 변경 */
    text-align: center; /* 텍스트 중앙 정렬 */
    display: inline-block; /* 인라인 블록 레이아웃 */
    text-decoration: none; /* 링크 텍스트 밑줄 제거 */
}

.btn-style:hover {
    background-color: #0041DD; /* 버튼 호버시 배경색 */
}

.btn-style2 {
    background-color: #ffffff; /* 버튼 배경색 */
    color: #084aea; /* 버튼 텍스트 색상 */
    border: none; /* 버튼 테두리 없음 */
	border-radius:1rem; 
	padding: 1.122rem 0; 
	font-size:1.1rem; 
	font-weight:600;  
	width:100%;
    cursor: pointer; /* 마우스 커서 변경 */
    text-align: center; /* 텍스트 중앙 정렬 */
    display: inline-block; /* 인라인 블록 레이아웃 */
    text-decoration: none; /* 링크 텍스트 밑줄 제거 */
}

.btn-style2:hover {
    background-color: #e8efff; /* 버튼 호버시 배경색 */
}




/*############## content2 #########################*/
.content2{margin-top:3rem; padding-top:4rem;}
.content2 h2{text-align:center;margin-bottom:3rem; align-items:center;color:#000;}
.content2 h2 img{width:40px; display:inline-block; vertical-align:middle;}
.content2 h2 span{font-size:2rem; font-weight:600; line-height:2.5rem; letter-spacing:-0.05rem;}
.content2 ul{display:flex; align-items: center; justify-content: space-between; margin-bottom:1.5rem;}
.content2 ul li.TxtArea{box-shadow: 0px 0px 20px rgb(0 40 183 / 20%); border-radius: 20px; padding: 3rem 4rem; width:45%; margin-right:1rem; margin-left:1rem;}
.content2 ul li.imgArea{width:250px;}
.content2 ul li.TxtArea > span{font-size:1.3125rem;display:block;  color:#000; letter-spacing: -0.01em; font-weight:400;}/*수정*/
.content2 ul li.TxtArea > h3{font-size: 2rem;font-weight: 600;  line-height: 2.5rem;  letter-spacing: -0.05rem; margin-bottom:0.5rem;}
.content2 ul li.TxtArea > p{ color:#666;}

/*############## content3 #########################*/
.content3{
	margin-bottom:3rem;
}
.content3 div> p{border-radius: 15px;}
.content3 .banner-mb{display:none;}



/*############## content4 #########################*/
.content4{padding-top:6rem; margin-bottom:7rem;}
.content4 ul{display:flex; align-items: center; margin-bottom:3rem; padding:0 4rem;justify-content:center;}/*수정*/
.content4 ul li.imgArea{width:264px; margin-right:10%;}/*수정*/
.content4 ul li.imgArea img{width:264px;}
.content4 ul li.TxtArea{text-align:center;}
.content4 ul li.TxtArea > span{line-height:1.4; letter-spacing:-0.01em; font-size:1.3125rem; color:#333;}
.content4 ul li.TxtArea > h3{line-height:1.2; color:#000; font-weight:600; font-size:2.6875rem;}
.content4 ul li.TxtArea > p{line-height:1.2; font-weight:600; font-size:2.6875rem; color:#3772ff;}
.content4 ul li > .btnArea{display:flex; text-align:center;}

.content4 ul li > .btnArea > a {
    display:inline-block; 
    padding:0.75rem 1rem; 
    width:9.38rem; 
    margin-right:1rem; 
    margin-top:2rem; 
    background-color:#f1f1f1;
    color:#666666;
    border:1px solid #d2d2d2; 
    border-radius:10px;
    height:23px; 
    font-weight:900;
}/*수정*/

.content4 ul li > .btnArea > a:hover{background-color:#e0e0e0;}
.content4 ul li > .btnArea > a.kakao{
    background-color:#fee500; 
    color:#392020; 
    align-items: center;
    margin-right:0; 
    }
.content4 ul li > .btnArea > a.kakao:hover{background-color:#FFD600;}
.content4 ul li > .btnArea > a.kakao > img {margin-right: 10px;}


/* 보언 추가 */
	.ctrArea4 {
		display: flex;
		justify-content: space-between; /* 박스들 사이의 간격을 균등하게 설정 */
		padding: 12px; /* 박스 주변에 패딩 추가 */
		max-width: 1000px; /* 최대 너비를 1000px로 설정 */
		margin: 0 auto; /* 중앙 정렬을 위해 자동 마진 적용 */
		flex-wrap: wrap; /* 필요에 따라 줄바꿈 할 수 있도록 설정 */
	}
	
	.new-main1 {
		margin-bottom: 20px; /* 각 박스 아래에 여백을 추가 */
	}
	.new-main1 img {
		width: 120px;
	}	
	
	
	.container4 {
		display: flex;
		align-items: center;
		border: 0px solid #d5d9ec;
		border-radius: 20px; /* 박스에 라운딩 추가 */
		box-shadow: 0 0px 20px rgba(0, 40, 183, 0.2); 
		padding: 2.5rem 2.5rem 2.5rem 2rem;
		width: 48%; /* 두 개의 박스가 한 줄에 배치되도록 설정 */
		box-sizing: border-box; /* 패딩과 테두리를 포함한 전체 너비를 계산 */
		background-color: #fff; /* 박스의 배경색을 흰색으로 설정 */
		margin-bottom: 20px; /* 각 박스 아래에 여백을 추가 */
	}
	.container4 img {
		width: 145px;
		margin-right: 2rem; /* 이미지와 텍스트 사이의 간격 */
	}
	.container4 p {
		margin: 0;
	}
	.container4 p span {
		display: block;
	}
	.line1 {
		font-size: 1.1rem; /* 첫 번째 줄의 글자 크기 */
		font-weight: 500; /* 첫 번째 줄의 글자 굵기 */
		color: #555; /* 첫 번째 줄의 글자 색상 */
		letter-spacing: -1px; /* 글자 사이의 간격을 조금 좁게 */
	}
	.line2 {
		font-size: 2rem; /* 두 번째 줄의 글자 크기 */
		font-weight: 600; /* 두 번째 줄의 글자 굵기 */
		margin-top:0.5rem;
		line-height:2.1rem;
		letter-spacing: -1px; /* 글자 사이의 간격을 조금 좁게 */
	}
	.line3 {
		font-size: 1rem; /* 세 번째 줄의 글자 크기 */
		color: gray; /* 세 번째 줄의 글자 색상 */
		margin-top:0.7rem;
		letter-spacing: -1px; /* 글자 사이의 간격을 조금 좁게 */
	}
	.main_title1 {
		display: flex;
		justify-content: center;
		align-items: center; /* 세로 중앙 정렬 */
		width: 100%;
		margin-top: 90px;
		margin-bottom: 30px;
		color:#000;
		font-size: 2rem;
		font-weight: 600;
		letter-spacing: -1px; /* 글자 사이의 간격을 1px로 설정 */
	}
	.main_title1 img {
		width: 40px;
		margin-right: 0.5rem; /* 이미지와 텍스트 사이의 간격 */
		margin-bottom: 0.5rem;
	}


/* 보언 추가 - 메인 가격비교박스 */
	.ctrArea5 {
		max-width: 1000px; /* 최대 너비를 1000px로 설정 */
		display: flex;
		justify-content: center; /* 가운데 정렬 */
		padding: 12px; /* 박스 주변에 패딩 추가 */
		gap: 12px; /* 카드 간격 */
		margin: 20px auto;
		flex-wrap: wrap; /* 필요에 따라 줄바꿈 할 수 있도록 설정 */
	}
	.container5 {
		display: flex;
		flex-direction: column; /* 세로 정렬 */
		align-items: flex-start; /* 모든 요소 좌측 정렬 */
		border: 0px solid #d5d9ec;
		border-radius: 20px; /* 박스에 라운딩 추가 */
		box-shadow: 0 0px 20px rgba(0, 40, 183, 0.2); 
		padding: 22px 20px;
		width: 15.5%; /* 두 개의 박스가 한 줄에 배치되도록 설정 */
		box-sizing: border-box; /* 패딩과 테두리를 포함한 전체 너비를 계산 */
		background-color: #fff; /* 박스의 배경색을 흰색으로 설정 */
		margin: 20px auto;
		position: relative;  /* 뱃지의 absolute 정렬을 위한 기준 */
	}
	.top-section {
		display: flex;
		align-items: center;
		width: 100%;
	}
	.top-section img {
		width: 45px;
		height: 45px;
		margin-right: 0.5rem; /* 이미지와 텍스트 사이의 간격 */
	}




@media all and (min-width:1060px) and (max-width:1200px) {
.card-body p{margin-bottom:15px;}
}
/* 폰트사이즈 조정 영역 */
@media (max-width:1060px) {
.footer .menu ul li a{color:#fff; font-size:14px;}
.card-body p{margin-bottom:15px;}
.content1 ul li h2 , .content2 h2 span , .content2 ul li.TxtArea > h3 { font-size: 1.6rem; letter-spacing: -0.08em; line-height: 2.25rem;}
.content1 ul li h3 { font-size: 2rem;}
.content1 li .card-body h2{
	font-size:1.6rem;
	margin-bottom:0.3rem;
	}
.content1 ul li{width:48%; margin-right:4%;}
.content1 ul li.imgArea{margin-right:0;}
.content1 ul li.imgArea img{vertical-align:bottom;}
.content2 ul li.TxtArea > span{font-size: 1.125rem;}
.content4 ul li.imgArea{margin-right:0;}/*수정*/
.content4 ul li.TxtArea > span{font-size: 1.125rem; margin-bottom: 0.5rem; display:block;}
.content4 ul li.TxtArea > h3 , .content4 ul li.TxtArea > p{font-size: 2rem;}
.content4 ul li.TxtArea{text-align:center;}

        .container4 img {
            width: 70px;
            margin-right: 1rem; /* 이미지와 텍스트 사이의 간격 */
        }
}


@media (max-width:920px) {
.card-body div > div > a {padding:10px 0;}
.card-body h5{margin-bottom:0;font-size:1rem;letter-spacing:-0.03rem;}
}

@media (max-width:830px) {
.content1 ul li h3{margin-bottom:25px;}
.content1 li .card-body{padding:30px 25px 25px;}
.content4 ul{padding:0;}
}

@media (max-width: 768px) {
.card-body {padding: 1.25rem }
.card-body div > div > a {padding:1.122rem 1.5rem; font-size: 1.0625rem;}
.card-body h5{margin-bottom:1.5rem;}
.hidePc{display:block;}

.content1 ul , .content2 ul , .content4 ul{flex-direction:column;}
.content1 ul li{width:100%; margin-right:0;}
.content1 ul li.imgArea{display:none;}

.content2 {margin-top:1rem;}
.content2 ul li.TxtArea{width:auto; padding:4rem 0;}
.content2 ul li.imgArea{width:65%; margin:0 auto;}
.content2 ul li.TxtArea{padding:2rem 2.5rem;}
.content2 h2 span{font-size:1.46rem; letter-spacing:-0.08rem; line-height:2.25rem;}/*수정*/
.content2 ul li.TxtArea > span{font-size:16px;}
.content2 ul li.TxtArea > h3{font-size:24px;}
	.content2 h2 {text-align:center;margin-bottom:2rem; align-items:center;color:#000;}/*보언추가*/

.content3 .banner-pc{display:none;}
.content3 .banner-mb{display:block;}

.content4 {padding-top:0rem; margin-bottom:4rem;}
.content4 ul{padding:0;}
.content4 ul li.imgArea{width:auto; margin:0 auto 2rem;}
.content4 ul li.imgArea img{width:60%; height: auto !important; display: block !important; margin: 0 auto !important;}

.content4 ul li > .btnArea > a{ padding: 0.7rem 0.5rem;  flex-basis: 8.13rem;  flex-grow: 1;  flex-shrink: 1;}
.content4 ul li.TxtArea{width:100%;}

	/*신규 메인의 모바일사이즈 정의 추가*/
    .ctrArea4 {
        flex-direction: column; /* 화면 너비가 700px 이하일 때 박스들이 수직으로 쌓이도록 설정 */
        align-items: center; /* 중앙 정렬 */
        padding: 0px 18px 0px 18px; /* 박스 주변에 패딩 추가 */
    }
    .container4 {
        width: 100%; /* 박스 너비를 100%로 설정 */
        margin-bottom: 20px; /* 각 박스 아래에 여백을 추가 */
        align-items: center; /* 박스 내의 요소들을 중앙 정렬 */
        padding: 30px 20px 30px 15px; /* 박스 주변에 패딩 추가 */
    }
    .container4 img {
        margin-bottom: 10px; /* 이미지와 텍스트 사이의 간격 추가 */
        margin-right: 13px; /* 이미지와 텍스트 사이의 가로 간격 제거 */
        align-self: center; /* 이미지 중앙 정렬 */
    }
    .container4 p {
        text-align: left; /* 텍스트 좌측 정렬 */
    }
	.line1 {
		font-size: 1rem; /* 첫 번째 줄의 글자 크기 */
		font-weight: 500; /* 첫 번째 줄의 글자 굵기 */
		color: #555; /* 첫 번째 줄의 글자 색상 */
		letter-spacing: -1px; /* 글자 사이의 간격을 조금 좁게 */
	}
	.line2 {
		font-size: 1.4rem; /* 두 번째 줄의 글자 크기 */
		font-weight: 600; /* 두 번째 줄의 글자 굵기 */
		margin-top:0.3rem;
		line-height:1.7rem;
		letter-spacing: -1px; /* 글자 사이의 간격을 조금 좁게 */
	}
	.line3 {
		font-size: 0.85rem; /* 세 번째 줄의 글자 크기 */
		color: gray; /* 세 번째 줄의 글자 색상 */
		margin-top:0.7rem;
		letter-spacing: -1px; /* 글자 사이의 간격을 조금 좁게 */
	}
	.main_title1 {
		display: flex;
		justify-content: center;
		align-items: center; /* 세로 중앙 정렬 */
		width: 100%;
		margin-top: 70px;
		margin-bottom: 30px;
		color:#000;
		font-size: 1.46rem;
		font-weight: 600;
		letter-spacing: -1px; /* 글자 사이의 간격을 조금 좁게 */
	}
	.main_title1 img {
		width: 25px;
		margin-right: 0.5rem; /* 이미지와 텍스트 사이의 간격 */
		margin-bottom: 0.5rem;
	}
	.new-main1 img {
		width: 100px;
	}	


	/* 보언 추가 - 메인 가격비교박스 */
	.ctrArea5 {
        align-items: center; /* 중앙 정렬 */
        padding: 0px 15px 0px 15px; /* 박스 주변에 패딩 추가 */
		margin: 50px 0px 40px 0px;
	}
	.container5 {
		width: 46%; /* 박스 너비를 100%로 설정 */
        margin-bottom: 20px; /* 각 박스 아래에 여백을 추가 */
		margin: 0 2px;		
	}
	.container5 img {
		width: 45px;
		height: 45px;
		margin-right: 0.5rem; /* 이미지와 텍스트 사이의 간격 */
	}
	
	.btn-style {
		border: none; /* 버튼 테두리 없음 */
		border-radius:1rem; 
		padding: 1rem 0; 
		font-size:1rem; 
		font-weight:600;  
	}

	.btn-style2 {
		border: none; /* 버튼 테두리 없음 */
		border-radius:1rem; 
		padding: 1rem 0; 
		font-size:1rem; 
		font-weight:600;  
	}

	
}





@media (max-width:450px){
.content2 ul li.imgArea{width:70%;}/*수정*/
.content2 ul li.TxtArea > span{font-size:1.125rem;} /*수정*/
.content2 ul li.TxtArea > h3 {
    font-size:1.5rem; 
    letter-spacing:-0.09rem;
}/*수정*/

@media (max-width:420px){
.card-body p{font-size:15px; letter-spacing:-0.09rem; }
}

@media (max-width:400px) {
.card-body div > div > a{font-size:1.0625rem;}/*수정*/
}

@media (max-width:370px){
.content4 ul li > .btnArea > a{font-size:14px;}
}


.content2 h2 img{width:24px;}/*수정*/
.content2 > .ctrArea > ul {gap:1.25rem;}
.content2 > .ctrArea > ul:nth-child(4) {gap:0;}