@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

*{
    font-family: "Noto Sans KR";
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

*::-webkit-scrollbar-thumb {
    background: #c5c5c5;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #555;
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.section {
    padding: 20px;
    box-sizing: border-box;
   
    display: flex;
    justify-content: center;
    /* 가로 중앙 정렬 */
    align-items: center;
    /* 세로 중앙 정렬 */
    text-align: center;
    /* 텍스트 중앙 정렬 */
    flex-wrap: wrap; /* 줄바꿈을 허용하도록 설정 */
}

.section1 {
    height: auto;
    background-image: url('/img/keyWordIntro/메인_bg.png');
    background-size: cover;
    /* 이미지가 섹션 전체를 덮도록 설정 */
    background-position: center;
    /* 이미지가 가운데 정렬되도록 설정 */
    position: relative;
    padding: 20px;
    text-align: center;
}

.section1 .monoLogo {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 10; /* 로고가 타이틀 위에 겹쳐지지 않도록 설정 */
    max-width: 150px;
}

.section2 {
    height: auto;
    background-color: #f5f6fa;
}

.section3 {
    height: auto;
    background-image: url('/img/keyWordIntro/후불결제 서비스_bg.png');
    background-size: cover;
    /* 이미지가 섹션 전체를 덮도록 설정 */
    background-position: center;
    /* 이미지가 가운데 정렬되도록 설정 */
    padding-bottom: 100px;
}

.section4 {
    height: auto;
    background-color: #ffffff;
    flex-wrap: wrap;
    margin-bottom: 100px;
}

.section5 {
    height: auto;
    background-color: #f8f5ff;
    padding-bottom: 150px;
}
.section6 {
    height: auto;
    position: fixed;
    bottom: 0;
    font-size: 19px;
}
.section7{
   padding: 0;
    height: auto;
    background-color: #f2f2f2;
    flex-wrap: wrap;
    
}

.section1_title {
    background-color: #b2daff;
    border-radius: 50px;
    flex-grow: 0;
    justify-content: center;
    /* 가로 중앙 정렬 */
    align-items: center;
    /* 세로 중앙 정렬 */
    display: flex;
    margin: 0 auto;
    margin-bottom: 50px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.22);
    max-width: 100%;
    padding: 5px;
    margin-top: 50px; /* 로고와의 간격 확보 */
    flex-basis: 100%;

}

.section1_title span {
    font-size: 20px;
    color: #00284e;
    font-weight: 500;
}
.section1 .section1_mainImg{
    max-width:250px;
}

.section1_contents {
    color: #ffffff;
    flex-basis: 100%; /* 줄바꿈 후 전체 너비를 차지하도록 설정 */
}

.section1__content1 {
    font-size: 26px;
    font-weight: 500;
    margin: 0;
}

.section1__content2 {
    font-size: 40px;
    font-weight: 900;
    margin: 0;
}

.section1__content3 {
    font-size: 18px;
    font-weight: 400;
    color: #ffffff78;
}
.section2_title {
    font-size: 34px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    flex-basis: 100%;
}

.section2_contents {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap; /* 줄바꿈 없이 한 줄에 유지 */
    width: 100%;
    max-width: 1300px;
    gap: 20px;
    margin: 0 auto;
    
    
}
/* 반응형 설정: 화면 크기에 따른 폰트 크기 및 여백 조정 */
@media (max-width: 768px) {
    .section1__content1 {
        font-size: 20px;
    }
    .section2_contents {
        flex-wrap: wrap;
    }

    .section1__content2 {
        font-size: 30px;
    }

    .section1__content3 {
        font-size: 16px;
    }
}

.section2_contents .contentBox {
    background-color: white;
    padding: 20px;
    flex: 1 1 calc(33.333% - 20px); /* 각 박스가 한 줄에 3개씩 균등하게 배치되도록 설정 */
    margin: 10px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 내용물이 박스 내에서 균등하게 분배되도록 설정 */
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    height: 300px; /* 고정된 높이 설정 */
    width: 100%;
    width: 350px;
}

.contentBox div.imgBox img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: all 0.3s ease-in-out;
}
.section2_content1 .imgBox img {
    max-width: 100px;
}
.section2_content2 .imgBox img {
    max-width: 150px;
}

.section2_content3 .imgBox img {
    max-width: 90px;
}

.contentBox div {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.contentBox div p {
    font-weight: normal;
    font-size: 1em;
    width: 100%;
    max-width: 500px;
    margin: 10px 0; /* 텍스트 위아래에 여백 추가 */
}

.contentBox .boldText {
    font-size: 1em;
    font-weight: 500;
}

.contentBox .imgBox {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    width: 100%;
    flex-grow: 1; /* 이미지가 남은 공간을 채우도록 설정 */
}



@media (max-width: 1024px) {
    .section2_title {
        font-size: 28px;
    }
    .contentBox div p {
        font-size: 0.9em;
    }
}

@media (max-width: 768px) {
    .section2_contents .contentBox {
        padding: 15px; /* 더 작은 패딩을 사용하여 크기 조절 */
        min-height: 250px; /* 최소 높이 설정 */
        height: 250px; /* 고정된 높이 설정 */
        margin: 3px;
    }

    .section2_title {
        font-size: 24px;
    }

    .contentBox div p {
        font-size: 0.8em;
    }
    .section2_content1 .imgBox img,
    .section2_content3 .imgBox img {
        max-width: 60%; /* max-width를 제거 */
    }
}



.section3_title {
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
}

.section3_title .section3_title_1 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.section3_title .section3_title_2 {
    font-size: 26px;
    font-weight: bold;
    color: #000;
    margin-top: 5px;
}

.section3_content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%; /* 부모 컨테이너의 너비를 100%로 설정 */
}

.section3_box {
    height: auto; /* 높이는 콘텐츠에 따라 자동으로 조절 */
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    box-sizing: border-box;
}

.section3_box1 {
    background-color: rgba(137, 147, 156, 0.44);
    color: rgba(94, 94, 94, 0.96);
    flex-basis: 45%; /* 기본 크기 설정 */
    max-width: 300px;
    padding: 15px;
    border-radius: 15px;
    box-sizing: border-box;
    position: relative;
}

.section3_box2 {
    background-color: #ffffff;
    color: #000;
    box-shadow: -30px 4px 60px 0 rgba(0, 0, 0, 0.31);
    flex-basis: 55%; /* 박스 2의 기본 크기를 더 크게 설정 */
    max-width: 400px; /* 최대 크기 설정 */
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
}

.section3_box2 .section3_newIcon {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: auto;
}

.section3_box_title {
    font-weight: 900;
    margin-bottom: 15px;
}

.section3_box1 .section3_box_title {
    font-size: 16px;
}

.section3_box2 .section3_box_title {
    font-size: 26px;
    color: #0180f5;
}

.section3_group {
    padding: 10px;
    border-radius: 25px;
    font-weight: 500;
    margin-bottom: 10px;
}
.section3_group .comnet2{
    font-size: 10px;
}

.section3_box1 .section3_group {
    background-color: rgba(137, 147, 156, 0.44);
}

.section3_box2 .section3_group {
    background: linear-gradient(105deg, rgba(0, 132, 255, 0.85) 8%, rgba(48, 0, 184, 0.92) 90%);
    color: white;
    font-size: 20px;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .section3_content {
        gap: 10px;
    }

    .section3_title .section3_title_1 {
        font-size: 18px;
    }

    .section3_title .section3_title_2 {
        font-size: 20px;
    }

    .section3_box1 .section3_box_title,
    .section3_box2 .section3_box_title {
        font-size: 16px;
    }

    .section3_box2 .section3_newIcon {
        width: 40px;
    }
}

@media (max-width: 480px) {
    .section3_title .section3_title_1 {
        font-size: 16px;
    }

    .section3_title .section3_title_2 {
        font-size: 18px;
    }

    .section3_box1 .section3_box_title,
    .section3_box2 .section3_box_title {
        font-size: 14px;
    }

    .section3_group {
        font-size: 12px;
    }

    .section3_box2 .section3_newIcon {
        width: 30px;
    }
    .section3_box2 .section3_group{
        font-size: 12px;
    }
    .section3_group .comnet2{
        font-size: 8px;
    }
}
@media (max-width: 300px) {
    .section3_content {
        flex-direction: column;
    }
}



.section4_title {
    margin: 50px 0 0 0;
    text-align: center;
}

.section4_title p {
    margin: 0;
    font-size: 40px;
    font-weight: 1000;
}

.section4_title p span {
    color: #2695fe;
}

.decorative-dots span {
    margin: 0 15px; /* 점 사이의 간격 */
}

.decorative-dots {
    font-size: 24px; /* 점의 크기를 조절 */
    color: #007BFF; /* 점의 색상을 설정 */
    margin-bottom: -15px;
    text-align: center;
}

.section4_contets {
    display: flex;
    flex-direction: column; /* 가로 방향 정렬 */
    justify-content: center; /* 세로 중앙 정렬 */
    align-items: center; /* 가로 중앙 정렬 */
    margin-top: 20px;
    max-width: 1100px;
    width: 100%;
    padding: 0 20px; /* 양쪽 여백을 추가해 화면 크기 변화에 대응 */
    box-sizing: border-box;
}

.section4_contentsBox {
    background-color: #f5f6fa;
    border-radius: 30px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box;
}

.section4_contentsBox .title {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px 20px;
    margin-bottom: 20px;
    text-align: start;
    font-weight: bold;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.section4_contentsBox .title p {
    margin: 0;
}

.section4_contentsBox .imgBoxContainer {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    gap: 20px; /* 박스 간 간격 추가 */
    border-radius: 20px;
    padding-top: 25px;
    transition: display 0.3s ease; /* 트랜지션 속성 추가 */
    position: relative;
    flex-wrap: wrap; /* 화면이 작아지면 줄바꿈 되도록 설정 */
}

.section4_contentsBox .imgBox {
    flex: 1 1 calc(50% - 20px); /* 두 개의 imgBox가 50%씩 공간을 차지 */
    background-color: #ffffff;
    margin-bottom: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column; /* 설명 텍스트가 상단, 이미지가 하단에 위치하도록 설정 */
    overflow: hidden;
    box-sizing: border-box;
}

.section4_contentsBox .imgBox.fullWidth {
    width: 100%;
    max-width: 600px;
    justify-content: center;
}

.section4_contentsBox .imgBox img {
    height: auto;
    object-fit: contain; /* 이미지의 비율을 유지하며 영역에 맞춤 */
    border-radius: 0 0 10px 10px; /* 이미지 아래쪽에만 모서리 둥글게 적용 */
    flex-grow: 1; /* 이미지를 설명 텍스트 아래로 확장 */
    width: 100%;
}

.section4_contentsBox .imgBox .imgDescription {
    width: 100%;
    max-width: 500px;
    padding: 10px 15px;
    font-size: 1em;
    font-weight: 500;
    color: #333; /* 텍스트 색상 */
    background-color: #ffffff; /* 설명 텍스트 배경 색상 */
    text-align: center;
    border-radius: 10px 10px 0 0; /* 상단에 모서리 둥글게 적용 */
    margin: 0 auto;
}

.section4_contentsBox .imgBox span {
    font-weight: 900;
}

.section4_contentsBox .content_1.active,
.section4_contentsBox .content_2.active,
.section4_contentsBox .content_3.active {
    display: block;
}

.button_layer {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* 요소들 사이에 동일한 간격을 줌 */
    user-select: none;
}

.button_layer p {
    padding: 5px 25px;
    flex: 1 1 calc(33.333% - 20px); /* 버튼이 한 줄에 3개씩 균등하게 배치되도록 설정 */
    border-radius: 30px;
    border: 1px solid;
    margin-bottom: 25px;
    color: #8c8c8c;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; /* 트랜지션 속성 추가 */
    box-sizing: border-box;
    text-align: center;
    margin: 10px;
}

.button_layer .active {
    background-color: #2797ff;
    color: #ffffff;
}

.button_layer p:hover {
    transform: scale(1.05); /* 마우스를 올렸을 때 약간 확대 */
}

.button_layer p.active {
    background-color: #007BFF;
    color: white;
    font-weight: bold;
}

.content {
    width: 100%;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease, height 0.5s ease; /* 트랜지션 적용 */
}

.content.active {
    opacity: 1;
    height: auto; /* 원래 높이로 확장 */
}
.section7_contetns{
    width: 100%;
}

/* 반응형 미디어 쿼리 */
@media (max-width: 1024px) {
    .decorative-dots span {
        margin:0 11px;
    }
    .section4_title p {
        font-size: 32px;
    }

    .section4_contentsBox .imgBox {
        flex: 1 1 100%;
        max-width: 100%; /* 작은 화면에서 이미지 박스가 100% 너비를 차지하도록 설정 */
    }
}

@media (max-width: 768px) {
    .decorative-dots span {
        margin:0 7px;
    }
    .section4_title p {
        font-size: 24px;
    }

    .button_layer p {
        padding: 5px 0;
        font-size: 12px;
    }

    .section4_contentsBox {
        padding: 15px;
        border-radius: 20px;
    }

    .section4_contentsBox .imgBox {
        flex: 1 1 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }

    .section4_contentsBox .imgBox img {
        height: auto;
        max-height: 300px; /* 모바일 화면에서 이미지의 최대 높이를 제한 */
    }

    .section4_contentsBox .title {
        font-size: 12px;
    }

    .section4_contentsBox .imgBox .imgDescription {
        font-size: 0.9em;
        padding: 8px;
    }
}


.section5_title {
    margin: 50px;
    font-size: 36px;
    font-weight: 700;
}
.section5_contents{
    position: relative;
}
.section5_contents .QnA_btn {
    position: relative;
    font-weight: 500;
    background-color: #ffffff;
    color: #333;
    cursor: pointer;
    margin-bottom: 5px;
    border-radius: 5px;
    user-select: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    padding: 10px;
    gap : 15px;
    text-align: left;
}


.section5_contents .QnA_btn:hover {
    background-color: #dcdcdc;
}
.section5_contents .QnA_btn.active {
    background-color: #9264ff;
    color: white;
}


.section5_contents .QnA_content {
    font-weight: 500;
    display: flex;
    padding: 15px 20px;
    background-color: #fff;
    margin-bottom: 10px;
    display: none;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    border-radius: 10px;
    text-align: left;
    padding: 10px;
    position: relative;
   
}

.section5_contents .QnA_content[style] {
    display: block;
    opacity: 1;
}
.QnA_btn img{
    max-width: 20px;
}
.section5_contents .QnA_btn .icon {
    margin-left: auto; /* 아이콘을 오른쪽으로 고정 */
    display: flex; /* 이미지가 가운데 정렬되도록 설정 */
    align-items: center; 
}
.QnA_content p{
    margin-left: 35px;
}
.QnA_content img{
    position: absolute;
    top: 27px;
    left: 15px;
    max-width: 20px;
}

.section6 {
    position: fixed;
    bottom: 0;
    left: 50%; /* 왼쪽에서 50% 위치 */
    transform: translateX(-50%); /* 자신의 너비의 50%만큼 왼쪽으로 이동하여 중앙 정렬 */
    width: 100%;
    max-width: 1000px; /* 중앙 정렬을 위한 최대 너비 설정 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    padding: 0;
    padding-top: 5px;
    background-color: #fef7e5; /* 배경색 추가 */
    transition: transform 0.3s ease;
}

.section6_title {
    position: relative;
    font-size: 1em;
    color: #333;
    width: 100%;
    max-width: 1000px;
    line-height: 38px;
}

.section6_contents {
    display: flex;
    width: 100%;
    padding: 0;
    justify-content: center; /* 버튼들을 가운데 정렬 */
    line-height: 44px;
}

.section6_contents .button {
    flex: 1;
    text-align: center;
    color: #fff;
    max-width: 500px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: bold;
    padding: 5px 0;
    gap: 0;
}
.section7_textcontetns{
    display: inline-block;
    text-align: start;
}


.button.pink {
    background-color: #ff00aa; /* 핑크색 버튼 */
}

.button.blue {
    background-color: #007BFF; /* 파란색 버튼 */
}
.button.pink span{
    margin-top: 15px;
}

.button:hover {
    opacity: 0.9; /* 호버 시 약간 어두워짐 */
}
.fixed-widget {
    position: fixed;
    top: 50%; 
    right: 3%; 
    z-index: 998;
   
}

.fixed-widget img {
    height: auto;
    cursor: pointer;
    max-width: 200px;
    width: 100%;
}
@media (max-width: 768px) {
    .section5_title{
        font-size: 26px;
    }
    .fixed-widget{
        top : 70%;
        right: 0;
    }
    .fixed-widget img{
        max-width: 75px;
    }
    .section5_title{
        margin: 0;
    }
    .section6_title{
        line-height: unset;
    }
    .section6_contents{
        line-height: unset;
    }
}
@media (max-width: 270px) {
    .section3_contents {
        flex-wrap: wrap;
    }
    .section1 .monoLogo{
        top : 0;
        left: 0;
    }
    .group{
        width: unset;
    }

}


@media (max-width: 460px) {
    .section{
        padding: 0;
    }
    .section1 .monoLogo {
        max-width: 80px;
    }
    .section1__content1{
        font-size: 14px;
    }
    .section1__content2{
        font-size: 22px;
    }
    .section1__content3{
        font-size: 12px;
        font-weight: 300;
    }

    .section1_title span{
        font-size: 12px;
    }
    .section1 .section1_mainImg{
        max-width: 144px;
    }
    .section2_title{
        font-size: 18px;
    }
    .section2_contents{
        gap: 0;
    }
    .section2_contents .contentBox{
        height: 149px;
        padding: 0;
        min-height: 149px;
        width: 133px;
    }
    .contentBox .boldText{
        font-size: 12px;
        font-weight: bold;
    }
    .section2_content2 .boldText{
        font-size: 10px;
    }
    .contentBox div p{
        font-size: 12px;
        margin-top: 0;
    }
    .contentBox div span{
        font-size: 12px;
    }
    .section2{
        padding: 5px;
        padding-bottom: 25px;
    }
    .section2_content1 .imgBox img{
        max-width: 60.3px;
    }
    .section2_content2 .imgBox img{
        max-width: 73.8px;
    }
    .section2_content3 .imgBox img{
        max-width: 39.5px;
    }
    .section3 {
        padding: 10px;
        padding-bottom: 25px;
    }
    .section3_title .section3_title_1{
        font-size: 14px;
    }
    .section3_box2 .section3_newIcon{
        top: -10px;
        right: -10px;
    }
    .section3_title .section3_title_2{
        font-size: 14px;
    }
    .section3_box1{
        width: 142.9px;
        flex-basis:unset;
    }
    .section3_box2{
        width: 199px;
        flex-basis: unset;
    }
  
    .section3_group .comnet2{
        font-size: 7px;
    }
    .section4{
        margin-bottom: 50px;
        padding: 5px;
    }
    .section4_contets{
        padding: 0;
    }
    .button_layer p{
        font-size: 10px;
        font-weight: 500;
        flex: unset;
        margin: 2px;
        margin-bottom: 10px;
        padding: 6px 6px 6px 5px;
        justify-content: unset;
        gap:10px;
    }
    .section4_contentsBox .title{
        margin-bottom: 0;
    }
    .section4_contentsBox .imgBoxContainer{
        padding-top: 10px;
        gap: 0;
    }
    .section5{
        padding: 5px;
        padding-bottom: 150px;
       
    }
    .section6_title{
        font-size: 14px;
        line-height: unset;
    }
    .section6_contents{
        font-size: 12px;
        font-weight: bold;
        line-height: 30px;
    }
    .section6_contents .button{
        padding: 10px 0;
        
    }
    .fixed-widget{
        top : 40%;
    }
    .fixed-widget img{
        max-width: 44px;
    }
    .section7_textcontetns{
        font-size: 10px;
    }
}