@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            margin: 0;
            padding: 20px;
        }
        h1 {
            margin-top: 0;
            text-align: center;
        }
        form {
            width: 80%; /* PC 화면에서는 50% 폭 */
            min-width: 400px;
        }
        .form-group {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            border-bottom: dotted 1px #cecece;
            padding: 0 0 15px 0;
        }
        .form-label {
            font-size: 16px;
            font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
            font-weight:800;
            background-color: #2B3748;
            color: #fff;
            padding: 12px;
            border-radius: 5px;
            margin: 10px;
            flex-basis: 40%;
        }
        input[type="text"],
        input[type="tel"] {
            font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
            font-weight:500;
            width: calc(110% - 10px); /* PC 화면에서 70% */
            padding: 10px;
            font-size: 18px;
            box-sizing: border-box;
            border: 1px solid #e3e3e3;
        }
        .radio-group {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: calc(110% - 10px); /* PC 화면에서 70% */
        }
        .radio-group input[type="radio"] {
            display: none; /* 라디오 버튼 숨기기 */
        }
        .radio-group label {
            font-color:#303030;
            font-size:16px;
            font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
            font-weight:400;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
            transition: background-color 0.3s, border-color 0.3s;
            flex: 1; /* 각 라벨이 동일한 비율로 크기를 조절하도록 설정 */
            text-align: center; /* 텍스트 가운데 정렬 */
        }
        .radio-group input[type="radio"]:checked + label {
            background-color: #1EBFD2;
            color: #fff;
            border-color: #19AEBF;
        }
        button {
            font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

            font-weight:800;
            background-color: #FFA800 !important;
            color: #303030 !important;
            border: none !important;
            padding: 15px !important;
            font-size: 18px !important;
            border-radius: 5px !important;
            cursor: pointer !important;
            width: 100% !important;
            transition: background-color 0.3s !important;
        }
        button:hover {
            background-color: #303030 !important;
            color: #fff !important;
        }
        @media (max-width: 600px) {
            form {
                width: 100%; /* 모바일 화면에서는 100% 폭 */
                min-width: unset; /* 최소 폭 설정 해제 */
            }
            .form-group {
                flex-direction: column;
                width: 100%; /* 모바일에서는 form-group이 전체 폭을 차지 */
            }
            .form-label, 
            input[type="text"], 
            input[type="tel"], 
            .radio-group {
                width: 100%; /* 각 요소가 전체 폭을 차지 */
            }
            .form-label {
                margin-right: 10px; /* 모바일에서는 오른쪽 여백 제거 */
                margin-bottom: 10px; /* 아래쪽 여백 추가 */
            }
        }






h1 {
    margin-top: 0;
    text-align: center;
}

        .agree {
                color: #303030;
                font-size: 15px;
                font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
                font-weight:500;
        }

/* 영문 필기체 */
.tangerine {
    color: #1EBFD2;
    font-size: 28px;
    font-family: 'Tangerine', serif;
    font-weight: 400;
    text-transform: none;
    line-height: 1em;
    padding: 0px 15px 0px 55px;
    margin: 3px 0px 0px 0px;
    text-align: center;
}

/* 제목 상담 폼 */
.Legal {
    color: #2B3748;
    /* font-size: 30px; */
    /* font-family: 'Montserrat', Sans-serif; */
    /* font-family: "Lato", Helvetica, Arial, sans-serif; */
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

    font-size: 2.50em;
    font-weight: 800;
    line-height: 1.50em;
    text-align: left;
    text-transform: uppercase;
}

/* 모바일 화면에서는 폰트 크기를 줄이기 */
@media (max-width: 600px) {
    .Legal {
        font-size: 1.8em; /* 화면이 작을 때 폰트 크기 조정 */
        text-align: center; /* 모바일에서 중앙 정렬로 변경 (선택 사항) */
    }
}


/* 제목 상담 폼 전체 박스 */
.desc {
    /* margin: 0 auto; */
    /* width: 100%; */
    text-align: center;
    padding: 5px;
    background-color: #fff;
    border-bottom: 1px dotted #303030;
    padding: 5px 0 20px 0;
    margin: 0 0 15px 0;
}

/* 컨텐츠 표 테이블 */
#email {
   width:100%;
   border:2px solid #fff;
   margin-top:20px;
   margin-bottom:20px;
}
#email th, #email td {
   text-align:center;
   height:42px;
   line-height:25px;
   vertical-align: middle;
   border:2px solid #fff;
}
#email thead th {
   border-bottom:0px solid #F3F4F4;
   background:#1AB3BC;
   color:#fff;
   font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
   font-size: 16px;
   font-weight: 700;
   line-height: 200%;
   letter-spacing: 0.8px;
   word-spacing: 2px;
}
#email tbody td {
   color: #3B3B3B;
   border-bottom:0px solid #F3F4F4;
   background:#fafafa;
   padding:6px 10px;
   font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
   font-size: 18px;
   font-weight: 400;
   line-height: 200%;
   letter-spacing: 1.1px;
   word-spacing: 2px;
}
#email tbody td.l {
   text-align:left;
}
#email ol {
   list-style:outside decimal;
}

/* 굵은 글자 영문+숫자 전용 */
.WebPage-title-center {
    color: #C6CED8;
    font-size: 18px;
    font-family: 'Montserrat', Sans-serif;
    font-weight: 800;
    line-height: 0.84em;
    padding: 0% 0px 0% 0%;
    margin: -5px 0px 0px 0px;
    text-align: center;
    text-transform: uppercase;
}
.WebPage-Phone {
    color: #303030;
    font-size: 26px;
    font-family: 'Montserrat', Sans-serif;
    font-weight: 800;
    /* line-height: 0.84em; */
    text-align: center;
    text-transform: uppercase;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, .3);
    padding: 10px 10px 10px 10px;
    /* margin: -5px 0px 11px 0px; */
    text-decoration:none;
    transition: border .25s linear, color .25s linear, background-color .25s linear;
}
a.WebPage-Phone:link, a.WebPage-Phone:visited, a.WebPage-Phone:active {
   Color:#fff;
   Text-decoration:none
}
a.WebPage-Phone:hover {
   color:#000;
   background-color: rgba(255, 255, 255, .3);
   text-decoration:none;
}

.WebPage-phone-center {
    color: #000;
    font-size: 16px;
    font-family: 'Montserrat', Sans-serif;
    font-weight: 800;
    line-height: 1.84em;
    padding: 0% 20px 0% 0%;
    margin: -5px 0px 11px 0px;
    text-align: center;
    text-transform: uppercase;
}
.WebPage-Text {
    color: #1e1e1e;
    font-size: 14px;
    font-family: Pretendard-SemiBold, AppleSDGothicNeo-Regular, Malgun Gothic, 맑은 고딕, dotum, 돋움, sans-serif;
    /* font-family: 'Noto Sans KR', sans-serif; */
    /* font-family: 'Do Hyeon', sans-serif; */
    font-weight: 400;
    line-height: 0.84em;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
}


/* 받는 메일 테이블 코드 */
.email-bold {
    padding:10px; 
    border-bottom:0px solid #E5E5E5; 
    background:#E5E5E5; 
    color:#303030; 
    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, sans-serif; 
    font-size: 16px; 
    font-weight: 700; 
    line-height: 200%; 
    letter-spacing: 0.8px; 
    word-spacing: 2px; 
    text-align:left;
}

.email-normal {
    padding:10px; 
    border-bottom:0px solid #F3F4F4; 
    background:#F6F6F6; color:#303030; 
    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, sans-serif; 
    font-size: 16px; 
    font-weight: 300; 
    line-height: 200%; 
    letter-spacing: 0.8px; 
    word-spacing: 2px; 
    text-align:left;
}

/* 받는 메일 테이블 타이틀 폰트 */
.counselbold {
    padding:15px; 
    border-bottom:0px solid #F3F4F4; 
    background:#1AB3BC; 
    color:#fff; 
    font-family: 
    Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, sans-serif; 
    font-size: 16px; 
    font-weight: 700; 
    line-height: 200%; 
    letter-spacing: 0.8px; 
    word-spacing: 2px;
}