@charset "utf-8"; /* ========================================================================== 다운로드 하기 전 팝업 (/common/commonDownloadPopup.jsp 전용) - 콘텐츠 이용 의견 조사 팝업(contentSurveyPopup.css)과 같은 시각 언어·색상·크기·정렬 방식. 두 팝업은 루트 ID 가 달라(#contentSurveyPop / #downloadPop) 파일을 분리함 (공통화하면 4라운드 contentSurveyPopup.css 를 고쳐야 하므로 분리 유지). - sub.css(?20260311) 에 남아 있는 기존 .download_pop 규칙(최대 0,3,0 - 버튼 absolute top:278px 등)을 #downloadPop ID 선택자로 덮어씀(로드 순서·캐시와 무관하게 우선). JSP 에서 기존 내부 클래스(.close/.down/.tit/.question/.qq/.aa/.detail_area/.tekst)를 쓰지 않으므로 sub.css 규칙 중 영향이 남는 것은 .download_pop / .download_pop .download_pop_in 뿐 → 아래에서 모두 재지정. - 표시/숨김은 contentArticle.jsp fn_openDownPop 의 jQuery show()/hide()(인라인 display) - 여기서는 기본 display:none 만 지정. - 색상(사이트 기존 값 재사용, 4라운드와 동일) #fcb038 : 주황(배경) / #e8520f : 진한 주황(흰 배경 위 글자·선택 테두리·accent-color) #fff9ef : 선택 보기 배경 / #f5f5f5 : 보기 배경 / #f7f7f7 : 안내 박스 배경 / #e5e5e5 : 구분선 - 주황(#fcb038) 위 글자는 대비 확보를 위해 흰색 대신 #222 사용 ========================================================================== */ /* 팝업 : 화면 중앙 고정 + 내부 스크롤 (딤은 contentArticle.jsp 가 만드는 #blockUI, z-index 1000) */ #downloadPop {display: none;background-color: #fff;width: 860px;max-width: calc(100% - 40px);max-height: 90%;overflow-x: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;border: 0;border-radius: 20px;-webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);position: fixed;left: 50%;top: 50%;right: auto;bottom: auto;margin: 0;padding: 0;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);z-index: 9999;-webkit-box-sizing: border-box;box-sizing: border-box;text-align: left;color: #222;} #downloadPop * {-webkit-box-sizing: border-box;box-sizing: border-box;} #downloadPop .download_pop_in {position: relative;padding: 36px 40px 36px 40px;} /* 화면낭독 전용 텍스트 */ #downloadPop .dp_blind {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;} /* 닫기(X) */ #downloadPop .dp_close {display: block;position: absolute;right: 28px;top: 28px;width: 40px;height: 40px;line-height: normal;padding: 0;margin: 0;border: 0;border-radius: 50%;font-size: 0;color: #222;text-align: center;background-color: transparent;cursor: pointer;} #downloadPop .dp_close .dp_close_ico {position: absolute;left: 50%;top: 50%;width: 24px;height: 24px;margin: -12px 0 0 -12px;} #downloadPop .dp_close .dp_close_ico:before, #downloadPop .dp_close .dp_close_ico:after {content: "";position: absolute;left: 0;top: 11px;width: 24px;height: 2px;background-color: #222;} #downloadPop .dp_close .dp_close_ico:before {-webkit-transform: rotate(45deg);transform: rotate(45deg);} #downloadPop .dp_close .dp_close_ico:after {-webkit-transform: rotate(-45deg);transform: rotate(-45deg);} #downloadPop .dp_close:hover {background-color: #f5f5f5;} /* 로고·제목·부제 */ #downloadPop .dp_logo {margin: 0 0 14px 0;padding: 0;line-height: 0;} #downloadPop .dp_logo img {width: auto;height: 36px;border: 0;} #downloadPop .dp_tit {font-size: 30px;color: #222;font-weight: 700;line-height: 1.3;letter-spacing: -1px;border: 0;padding: 0;margin: 0 0 12px 0;} #downloadPop .dp_tit .dp_point {color: #e8520f;} #downloadPop .dp_desc {font-size: 16px;color: #444;font-weight: 400;line-height: 1.6;margin: 0 0 24px 0;padding: 0;} /* 문항 영역 */ #downloadPop .dp_section {margin: 0;padding: 20px 0 4px 0;border-top: 1px solid #e5e5e5;} #downloadPop .dp_question {border: 0;margin: 0;padding: 0;min-width: 0;} #downloadPop .dp_question .dp_qq {display: block;position: relative;width: 100%;font-size: 16px;color: #222;font-weight: 700;line-height: 1.5;padding: 0 0 0 32px;margin: 0;border: 0;white-space: normal;} #downloadPop .dp_num {position: absolute;left: 0;top: 0;display: inline-block;width: 24px;height: 24px;line-height: 24px;border-radius: 50%;background-color: #fcb038;color: #222;font-size: 13px;font-weight: 700;text-align: center;} #downloadPop .dp_req {color: #e8520f;} #downloadPop .dp_question .dp_aa {position: relative;display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;flex-wrap: wrap;-ms-flex-align: stretch;-webkit-align-items: stretch;align-items: stretch;font-size: 14px;color: #333;font-weight: 400;padding: 10px 0 18px 14px;margin: 0 -3px;} /* 보기 : native checkbox 를 보기 안쪽 왼쪽에 그대로 노출(키보드·포커스 유지), label 을 알약 버튼으로 - 정렬 방식은 contentSurveyPopup.css 와 동일(.dp_opt·label flex → 같은 줄 알약 높이 동일, checkbox·글자 세로 가운데) - PC 는 보기 폭 auto(글자 길이대로) 한 줄 배치 후 넘치면 줄바꿈 */ #downloadPop .dp_opt {display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-align: stretch;-webkit-align-items: stretch;align-items: stretch;position: relative;margin: 0;padding: 3px;white-space: normal;-ms-flex: 0 0 auto;-webkit-flex: 0 0 auto;flex: 0 0 auto;max-width: 100%;} #downloadPop .dp_opt input {position: absolute;left: 13px;top: 50%;width: 16px;height: 16px;margin: -8px 0 0 0;padding: 0;vertical-align: middle;z-index: 1;cursor: pointer;opacity: 1;-webkit-appearance: checkbox;-moz-appearance: checkbox;appearance: auto;accent-color: #e8520f;} #downloadPop .dp_opt label {display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-align: center;-webkit-align-items: center;align-items: center;-ms-flex: 1 1 auto;-webkit-flex: 1 1 auto;flex: 1 1 auto;min-width: 0;position: relative;min-height: 42px;padding: 10px 16px 10px 36px;margin: 0;font-size: 14px;color: #333;font-weight: 400;line-height: 1.4;vertical-align: middle;text-align: left;white-space: nowrap;word-break: keep-all;background-color: #f5f5f5;border: 2px solid #f5f5f5;border-radius: 21px;cursor: pointer;-webkit-transition: background-color 0.15s, border-color 0.15s;transition: background-color 0.15s, border-color 0.15s;} #downloadPop .dp_opt label:hover {border-color: #fcb038;} /* 선택 상태 : 배경 + 진한 테두리 + 굵은 글자 (색 외 구분) */ #downloadPop .dp_opt input:checked + label {background-color: #fff9ef;border-color: #e8520f;color: #222;font-weight: 700;} /* 포커스 : 보기 전체 테두리 + checkbox 자체 outline */ #downloadPop .dp_opt input:focus {outline: 2px solid #000;outline-offset: 2px;} #downloadPop .dp_opt input:focus + label {outline: 3px solid #000;outline-offset: 2px;} /* 직업 기타 입력란 : 「기타」 보기 바로 옆(공간 부족 시 다음 줄) - display 는 #job7 스크립트가 inline-block/none 으로 인라인 지정 */ #downloadPop #jobEtc {-ms-flex: 1 1 200px;-webkit-flex: 1 1 200px;flex: 1 1 200px;min-width: 0;max-width: 320px;width: auto;height: 42px;line-height: normal;margin: 3px;padding: 0 16px;font-size: 14px;color: #222;font-weight: 400;vertical-align: middle;background-color: #fff;border: 2px solid #e5e5e5;border-radius: 21px;-webkit-align-self: center;-ms-flex-item-align: center;align-self: center;} #downloadPop #jobEtc:hover {border-color: #fcb038;} #downloadPop #jobEtc:focus {border-color: #e8520f;outline: 3px solid #000;outline-offset: 2px;} /* 안내 (콘텐츠 활용 전 확인) : 회색 박스 */ #downloadPop .dp_guide {margin: 6px 0 0 0;padding: 18px 22px 16px 22px;background-color: #f7f7f7;border: 0;border-radius: 14px;} #downloadPop .dp_guide_tit {display: block;width: auto;font-size: 15px;color: #222;font-weight: 700;line-height: 1.5;margin: 0 0 8px 0;padding: 0;background: none;border: 0;border-radius: 0;} #downloadPop .dp_guide_list {display: block;margin: 0;padding: 0;list-style: none;} #downloadPop .dp_guide_list li {position: relative;margin: 0;padding: 0 0 0 14px;font-size: 14px;color: #444;font-weight: 400;line-height: 1.7;list-style: none;word-break: keep-all;} #downloadPop .dp_guide_list li + li {margin-top: 4px;} #downloadPop .dp_guide_list li:before {content: "";position: absolute;left: 2px;top: 0.75em;width: 4px;height: 4px;border-radius: 50%;background-color: #888;} #downloadPop .dp_guide_list li span {display: inline;padding: 0;} #downloadPop .dp_guide_list .dp_link a {color: #0645ad;text-decoration: underline;} #downloadPop .dp_guide_list .dp_link a:focus {outline: 2px solid #000;outline-offset: 1px;} #downloadPop .dp_guide_list .dp_mail {color: #0645ad;text-decoration: underline;} /* 하단 버튼 : 다운로드(주황 알약) + 닫기(보조 알약) */ #downloadPop .dp_btn_area {text-align: center;padding: 24px 0 0 0;margin: 0;font-size: 0;} #downloadPop .dp_btn_area a {position: static;display: inline-block;vertical-align: middle;width: auto;height: 52px;line-height: 52px;margin: 0 5px;padding: 0 36px;border-radius: 26px;font-size: 18px;font-weight: 700;text-align: center;text-decoration: none;cursor: pointer;} #downloadPop .dp_down {min-width: 220px;color: #222;background-color: #fcb038;border: 0;-webkit-box-shadow: 0 4px 10px rgba(252, 176, 56, 0.35);box-shadow: 0 4px 10px rgba(252, 176, 56, 0.35);} #downloadPop .dp_down:hover {color: #222;-webkit-box-shadow: 0 4px 14px rgba(232, 82, 15, 0.45);box-shadow: 0 4px 14px rgba(232, 82, 15, 0.45);} #downloadPop .dp_btn_area .dp_btn_close {min-width: 120px;line-height: 48px;color: #444;background-color: #fff;border: 2px solid #ddd;} #downloadPop .dp_btn_close:hover {color: #222;border-color: #bbb;} /* 링크 버튼 포커스 */ #downloadPop .dp_close:focus, #downloadPop .dp_down:focus, #downloadPop .dp_btn_close:focus {outline: 3px solid #000;outline-offset: 2px;} /* ========================================================================== 모바일 (sub.css 와 같은 기준 767px) - sub.css 767px 블록의 .download_pop(width:100%·left:0) / .download_pop_in padding 규칙도 아래 ID 선택자로 무력화 ========================================================================== */ @media (max-width: 767px) { #downloadPop {width: calc(100% - 20px);max-width: none;max-height: 85%;left: 50%;margin: 0;border-radius: 16px;} #downloadPop .download_pop_in {padding: 22px 16px 22px 16px;} #downloadPop .dp_close {right: 12px;top: 12px;width: 40px;height: 40px;} #downloadPop .dp_logo {margin-bottom: 10px;} #downloadPop .dp_logo img {height: 28px;} #downloadPop .dp_tit {font-size: 22px;margin-bottom: 8px;} #downloadPop .dp_desc {font-size: 14px;margin-bottom: 16px;} #downloadPop .dp_section {padding-top: 16px;} #downloadPop .dp_question .dp_qq {font-size: 14px;padding-left: 28px;} #downloadPop .dp_num {width: 22px;height: 22px;line-height: 22px;font-size: 12px;} #downloadPop .dp_question .dp_aa {font-size: 13px;padding: 8px 0 14px 0;margin: 0 -3px;} /* 보기 : 3개씩 줄바꿈 (480px 이하 2개씩), 긴 보기는 알약 안에서 줄바꿈 */ #downloadPop .dp_opt {-ms-flex: 0 0 33.3333%;-webkit-flex: 0 0 33.3333%;flex: 0 0 33.3333%;max-width: 33.3333%;} #downloadPop .dp_opt input {left: 13px;} /* 정렬은 PC 규칙(.dp_opt·label flex + 세로 가운데) 그대로 상속 */ #downloadPop .dp_opt label {min-height: 38px;padding: 8px 8px 8px 30px;font-size: 13px;white-space: normal;border-radius: 19px;} /* 기타 입력란 : 보기 아래 한 줄 전체 */ #downloadPop #jobEtc {-ms-flex: 0 0 auto;-webkit-flex: 0 0 auto;flex: 0 0 auto;width: calc(100% - 6px);max-width: none;height: 40px;font-size: 13px;} #downloadPop .dp_guide {padding: 14px 14px 12px 14px;border-radius: 12px;} #downloadPop .dp_guide_tit {font-size: 14px;} #downloadPop .dp_guide_list li {font-size: 13px;} #downloadPop .dp_btn_area {padding-top: 16px;} #downloadPop .dp_btn_area a {height: 46px;line-height: 46px;font-size: 16px;padding: 0 24px;margin: 0 4px;} #downloadPop .dp_down {min-width: 150px;} #downloadPop .dp_btn_area .dp_btn_close {min-width: 90px;line-height: 42px;} } @media (max-width: 480px) { #downloadPop .dp_opt {-ms-flex: 0 0 50%;-webkit-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;} #downloadPop .dp_down {min-width: 0;} }