@CHARSET "UTF-8"; /* ------------------------------------------------------------ * Name : type_a_responsive.css * Desc : eXSignOn 데스크탑 스킨(type_a_layout.css / type_a_color.css)의 * 모바일 대응. 기존 css는 수정하지 않고 이 파일에서 미디어쿼리로만 * 덮어쓴다. 적용이 필요한 페이지에서만 link 한다. * (기존 css가 body 안에서 로드되므로 link는 top include 다음에 위치) * * [1] 공통 : 상단 / 타이틀 / 풋터 / 본문 폭 * [2] 통합회원안내 (/member/integration/integration.jsp) * [3] 개인정보처리방침 (/member/policy/policy.jsp) * [4] 로그인 폼 (/pagoda/LoginForm.do → /eXSignOn/login.jsp, * /member/change/login.jsp, * /member/secession/login.jsp) * [5] 이용약관 (/member/provision/provision_main.jsp) * [6] 회원탈퇴 (/member/secession/secession_application.jsp, * /member/secession/secession_completion.jsp) * [7] 회원정보변경 (/member/change/join_change.jsp) * [8] 로그인 실패(reCAPTCHA) (/pagoda/LoginForm2.do → /eXSignOn/login2.jsp) * Created : 2026/08/07 ------------------------------------------------------------ */ /* ============================================================ [1] 공통 - 태블릿 이하 : 고정폭(1000px) 레이아웃을 유동폭으로 전환 ============================================================ */ @media screen and (max-width:1000px){ html,body{height:auto} /* 상단 빨간 메뉴바는 body 배경이미지(bg_sub.gif)의 75~115px 구간을 쓰고 있어 메뉴가 줄바꿈되면 어긋난다. 배경이미지를 끄고 메뉴 자체에 색을 준다. */ body.bg_join{background-image:none;background-color:#fff} #wrap{width:auto;max-width:1000px;min-height:100%} #top_wrap{width:auto} #content_area{width:auto;height:auto;padding:20px 14px 30px;box-sizing:border-box} #content{width:auto;height:auto} /* 상단 로고 / 주메뉴 */ .major_menu_area{width:auto} .major_menu_area h1{padding:16px 0;max-height:none} .major_menu_area h1 img{width:140px;height:auto} .major_menu_area ul.main_menu{ display:flex;flex-wrap:wrap;justify-content:center; background:#d92128;padding:5px 8px;box-sizing:border-box} .major_menu_area ul.main_menu li{font-size:13px} .major_menu_area ul.main_menu li a{height:32px;line-height:32px;padding:0 9px;white-space:nowrap} .major_menu_area ul.main_menu li.last{padding-right:0} /* 타이틀 */ .join_title_box{height:auto;padding:26px 14px 6px;box-sizing:border-box} .bg_join_title{width:120px;height:120px;margin-left:-60px;background-size:120px 120px} .join_title_box h3{font-size:28px;padding-top:22px;line-height:1.25} .join_title_box h4{font-size:13px;padding-top:8px;line-height:1.5;word-break:keep-all} .stit_join{font-size:18px;margin-bottom:12px} /* 풋터 : 배경이미지(구분선)를 border로 대체해 줄바꿈에도 어긋나지 않게 */ #footer_area{background:#fff;border-top:1px solid #e7ebec} .footer{width:auto;padding:0 14px;box-sizing:border-box} .footer_site{flex-wrap:wrap;justify-content:center;width:auto; border-bottom:1px solid #e7ebec} .footer_site li a{height:34px;line-height:34px;padding:0 10px 0 12px; background-position:0 center;white-space:nowrap} .footer_inner{display:block;padding:20px 0 40px} .footer_inner .logo{width:auto;margin-bottom:12px} .footer_inner address{width:auto;line-height:1.6;word-break:keep-all} } /* ============================================================ [2] 통합회원안내 - 태블릿 이하 ============================================================ */ @media screen and (max-width:1000px){ /* FAQ 탭 : float 2단 → flex 균등분할 */ #btn_div.faq{width:100%;margin:18px 0 22px} .faq ul{display:flex;width:100%;overflow:visible;padding:0} .faq ul li{float:none;flex:1 1 0;width:auto;height:auto;margin:0; border:1px solid #d1d5da;font-size:0;line-height:0;box-sizing:border-box} .faq ul li + li{margin-left:-1px} .faq ul li.on{background:#e7464c;border-color:#e7464c} .faq ul li button{display:block;width:100%;height:auto;min-height:46px; padding:8px 6px;font-size:14px;line-height:1.35;word-break:keep-all;box-sizing:border-box} .faq ul li.on button{position:static;margin:0;width:100%;background:none;color:#fff} /* FAQ 본문 : Q/A 아이콘을 좌측 고정, 본문은 남는 폭 전체 사용 */ .faq_box{width:100%;box-sizing:border-box} .faq_box dl dt{position:relative;padding:12px 12px 12px 44px;line-height:1.5;word-break:keep-all} .faq_box dl dd{padding:12px 12px 14px 44px;line-height:1.6;word-break:keep-all} .faq_box dl dd a{word-break:break-all} .ico_q{position:absolute;top:11px;left:8px} .ico_a{top:12px;left:8px} } /* ============================================================ [3] 개인정보처리방침 / 회색 안내박스(.gray_box05) 공통 - 태블릿 이하 ============================================================ */ @media screen and (max-width:1000px){ /* 회색 안내박스 : 절대배치(아이콘 / 목록)를 일반 흐름으로 전환. height 는 인라인 스타일이라 !important 로만 해제 가능. ([6] 회원탈퇴 페이지의 .gray_box05 도 이 규칙을 함께 쓴다) */ .gray_box05{float:none;width:auto;height:auto !important; padding:14px 14px;box-sizing:border-box;letter-spacing:0} .gray_box05 .ico_policy, .gray_box05 .ico_withdraw{position:static;top:auto;left:auto;margin:0 auto 12px} .gray_box05 ul.policy{position:static;top:auto;left:auto} .gray_box05 ul.policy li{width:auto;line-height:1.6;font-size:13px;word-break:keep-all} .gray_box05 ul.policy li:first-child{display:none} /* 절대배치용 여백 li */ .gray_box05 ul.policy li.tit{font-size:15px;margin-bottom:8px;line-height:1.5} .gray_box05 ul.policy li.tit br{display:none} /* 본문 */ .privacy{line-height:1.8} .privacy h5{padding:10px 50px 0 0;line-height:1.5;word-break:keep-all} .privacy h5 span{top:12px} .privMenu li a{word-break:keep-all} .privTxt{line-height:1.7;word-break:keep-all} .privTxt br{display:none} .paragraph{padding:14px 12px;line-height:1.7;word-break:keep-all} .paragraph p{line-height:1.7} .paragraph ul li{line-height:1.7} .terms1 dd,.terms2 dd,.terms3 dd{line-height:1.7;word-break:keep-all} .terms1 dt,.terms2 dt,.terms3 dt{line-height:1.5;word-break:keep-all} .list1 li{word-break:keep-all} /* 표 : 컬럼이 많아 폭을 줄일 수 없으므로 표 영역만 좌우 스크롤 */ .gridPriv{overflow-x:auto;-webkit-overflow-scrolling:touch} .gridPriv table{table-layout:auto;width:100%;min-width:560px} .gridPriv table tr th{padding:8px 6px;line-height:1.4;word-break:keep-all} .gridPriv table tr td{padding:8px 6px;word-break:keep-all} .gridPriv table tr td a{word-break:break-all} /* 다운로드 버튼(요구서) */ .privacy a.btn_white4{width:100%;max-width:340px;height:auto;min-height:50px; line-height:1.4;padding:15px 10px;box-sizing:border-box;word-break:keep-all} /* 이전 개인정보처리방침 보기 목록 */ .privacy .paragraph > ul > li{line-height:1.9} .privacy a.btn_terms{white-space:nowrap} } /* ============================================================ [4] 로그인 폼 - 태블릿 이하 ============================================================ */ @media screen and (max-width:1000px){ /* 좌우 2단(float) → 상하 1단. DOM 순서가 MEMBERS LOGIN → SNS LOGIN 이므로 float만 풀면 순서대로 쌓인다. 바깥 div의 margin-right:8px 는 인라인 스타일이라 !important 로만 해제 가능. */ #content_area > .fl, #content_area > .fl > .fl, #content_area > .fl > .fr{ float:none;width:auto;margin-left:0;margin-right:0 !important} /* height 는 인라인 스타일(403px)이라 !important 필요 */ .gray_box01,.gray_box02{ width:auto;height:auto !important;padding:24px 16px; box-sizing:border-box;letter-spacing:0} .gray_box01{margin-bottom:8px} /* 회원정보변경 재로그인 박스 */ .gray_box04{width:auto;padding:24px 16px 30px;box-sizing:border-box;letter-spacing:0} .txt_confirm01{font-size:22px;margin-bottom:8px} .txt_confirm02{font-size:13px;line-height:1.5;margin-bottom:12px;word-break:keep-all} .txt_confirm03{font-size:11px;line-height:1.6;text-align:left;word-break:keep-all} .gray_box02 .txt_confirm03{margin-top:16px !important} /* 인라인 margin-top:267px 해제 */ /* 로그인 폼 */ .txt_care2{margin-left:0;margin-bottom:0;font-size:13px;line-height:1.5; text-align:left;background-position:0 3px;word-break:keep-all} fieldset.login{margin-top:16px} fieldset.login .btn,fieldset.login .btn2{margin-top:20px} .gray_box01 .int02, .gray_box04 .int02{width:100%;height:46px;line-height:46px;box-sizing:border-box} .login_box{float:none;margin:10px 0 0;text-align:left} .gray_box01 a.btn_confirm, .gray_box04 a.btn_confirm{width:100%;height:50px;line-height:50px;box-sizing:border-box} .login_btn{width:auto;margin-top:18px;text-align:center} .login_btn a{font-size:14px} /* SNS 로그인 버튼 목록 */ .join_box{float:none;width:100%;margin:12px 0 0;box-sizing:border-box} } /* ============================================================ [5] 이용약관 - 태블릿 이하 ============================================================ */ @media screen and (max-width:1000px){ /* 탭 : float 2단 → flex 균등분할 (FAQ 탭과 동일) */ #btn_div.terms_tab{width:100%;margin:18px 0 22px} .terms_tab ul{display:flex;width:100%;overflow:visible;padding:0} .terms_tab ul li{float:none;flex:1 1 0;width:auto;height:auto;margin:0; border:1px solid #d1d5da;font-size:0;line-height:0;box-sizing:border-box} .terms_tab ul li + li{margin-left:-1px} .terms_tab ul li.on{background:#e7464c;border-color:#e7464c} .terms_tab ul li button{display:block;width:100%;height:auto;min-height:46px; padding:8px 6px;font-size:14px;line-height:1.35;word-break:keep-all;box-sizing:border-box} .terms_tab ul li.on button{position:static;margin:0;width:100%;background:none;color:#fff} /* 개정 안내 문구 */ .tit_terms{line-height:1.6;word-break:keep-all} .tit_terms a.btn_terms{margin-top:4px} /* 약관 본문 스크롤 박스 : 170px 고정은 모바일에서 너무 좁다 */ .terms_box .terms{height:65vh;min-height:300px;padding:12px} .terms_box .terms h4,.terms h5{height:auto;min-height:0; line-height:1.5;margin-bottom:4px;word-break:keep-all} .terms_box .terms p,.terms_box .terms li,.terms_box .terms div{word-break:keep-all} .terms_box .terms ul,.terms_box .terms ol{padding-left:2px} /* 다운로드 버튼 : 절대배치 → 본문 우측 상단에 흘려 배치(본문과 겹침 방지) */ .terms a.btn_down{position:static;float:right;margin:0 0 8px 8px} /* 약관 안의 표 : 컬럼이 많아 표 영역만 좌우 스크롤 (.terms 가 overflow-x:hidden 이라 표가 잘리는 것을 막는다) */ .terms .grid01,.terms .grid02{overflow-x:auto;-webkit-overflow-scrolling:touch} .terms .grid01 table,.terms .grid02 table{width:100%;min-width:480px} .terms .grid01 table td,.terms .grid01 table th, .terms .grid02 table td,.terms .grid02 table th{word-break:keep-all} } /* ============================================================ [6] 회원탈퇴 - 태블릿 이하 ============================================================ */ @media screen and (max-width:1000px){ /* .gray_box05 기본 규칙과 아이콘 배치는 [3] 참고 */ .txt_info04{font-size:14px;line-height:1.5;background-position:0 2px;word-break:keep-all; box-sizing:border-box} .txt_info05{letter-spacing:0;line-height:1.6;word-break:keep-all} /* 유의사항 / 완료안내 목록 : 720px 고정폭 해제 */ .tit_tip{float:none;display:block} .gray_box05 ul.withdraw01{float:none;clear:none} .gray_box05 ul.withdraw02{position:static;top:auto;left:auto} .gray_box05 ul.withdraw01 li, .gray_box05 ul.withdraw02 li{width:auto;font-size:13px;line-height:1.6; margin-bottom:6px;word-break:keep-all} .gray_box05 ul.withdraw01 li{background-position:0 8px} .gray_box05 ul.withdraw02{text-align:center} .gray_box05 ul.withdraw02 li.tit{font-size:15px;margin-bottom:8px} /* 탈퇴 사유 입력 표 : 2단 표(th 30% / td 70%) → 상하 블록으로 전환 */ .fvboard,.fvboard tbody,.fvboard tr,.fvboard th,.fvboard td{ display:block;width:auto} .fvboard{font-size:14px} .fvboard tr{border-bottom:1px solid #d1d5da} .fvboard tr:last-child{border-bottom:0} .fvboard th{height:auto;padding:10px 12px;border-right:0;line-height:1.5;word-break:keep-all} .fvboard th br{display:none} .fvboard td{padding:10px 12px;border-bottom:0} .reason_box{float:none;margin:0} .reason_box li{line-height:1.9;word-break:keep-all} .reason_box input[type="checkbox"]{width:16px;height:16px;margin:-3px 4px 0 0} /* 인라인 style="width:478px" 해제 */ .reason_box li .int03{display:block;width:100% !important;height:34px;line-height:34px; margin-top:6px;box-sizing:border-box} .fvboard .ta{width:100%;height:90px;box-sizing:border-box;padding:6px} /* 하단 버튼 */ .btn_board_c{margin-top:24px} .btn_board_c a.btn_ok{width:100%;max-width:302px;box-sizing:border-box} } /* ============================================================ [7] 회원정보변경 - 태블릿 이하 ============================================================ */ @media screen and (max-width:1000px){ /* .fvboard 를 상하 블록으로 바꾸는 기본 규칙은 [6] 참고 */ .fvboard tr.w{display:none} /* 데스크탑 간격용 빈 행 */ /* 입력요소 폭이 전부 인라인 style 로 박혀 있어(160~312px) !important 필요 */ .fvboard td .int01, .fvboard td .int03, .fvboard td .sel01{display:block;width:100% !important; height:38px;line-height:38px;margin-bottom:6px;box-sizing:border-box} .fvboard td .btn_gray{margin:2px 0 8px} .fvboard td #passwdMsg, .fvboard td #smsMsg, .fvboard td #confirmMsg{display:block;margin-bottom:4px} /* 체크박스/라디오 : 터치 영역 확보 */ .info_agree_box input,.channel_box input, .all_checkbox input,.job_box input{width:16px;height:16px;margin:-3px 4px 0 0} /* 정보수신동의 */ .fvboard td.txt_c{text-align:left} .info_box{padding:10px 8px} .info_box li{font-size:13px;line-height:1.5;word-break:keep-all} .info_agree_box li{width:100%;margin-bottom:8px} .info_box2 li{word-break:keep-all;line-height:1.5} .all_checkbox .all_chk{margin:0 8px} /* 가입경로 : 130~170px 고정폭 4단 → 1단 */ .channel_box{float:none;margin-bottom:0} .channel_box li, .channel_box li.channel01,.channel_box li.channel02, .channel_box li.channel03,.channel_box li.channel04{ display:block;width:100%;line-height:2;word-break:keep-all} .channel_box li .int03{margin-top:4px} /* 주소 / 직업 */ .address_box li{display:block;margin-bottom:8px} .address_box li.txt{line-height:1.5;word-break:keep-all} .fvboard .job_box li{padding-right:14px;line-height:2} /* SNS 연동 버튼 : 인라인 style="width:300px" 해제 */ .sns_box li{display:block} .sns_box li a{width:100% !important;max-width:300px;box-sizing:border-box} .sns_box li .txt_confirm03{text-align:center;margin-top:4px} /* 휴대폰 인증 팝업(jQuery UI dialog, JS 로 width:290px 지정) */ .ui-dialog{max-width:calc(100vw - 20px) !important} .ui-dialog #smsForm{width:auto !important} } /* ============================================================ [8] 로그인 실패(reCAPTCHA) - 태블릿 이하 ============================================================ */ @media screen and (max-width:1000px){ /* 박스 기본 규칙(.gray_box01 / .int02 / .btn_confirm 등)은 [4] 참고 */ /* 바깥 div 의 인라인 margin-right:8px 해제 */ #content_area > .mt20 > div{margin-right:0 !important} /* reCAPTCHA : 인라인 margin-left:350px 해제 후 가운데 정렬. 위젯 자체가 304px 고정이라 좁은 화면에서는 아래에서 축소한다. */ fieldset.login form > div{margin-left:0 !important;text-align:center} .g-recaptcha{display:inline-block} /* 실패 안내문구 (login2.jsp head 의 인라인