/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** 작업일정순(1차) 210813-210816 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MEM0501 국방인사정보 입력 */ .aside_box {float: left; width: 100%; padding: 4.7222% 5.5556% /*20px*/ 0;} .aside_box .left {float: left; width: 3.125% /*10px*/; margin-top: 1px;} .aside_box .left a {display: block; width: 100%; height: 100%;} .aside_box .right {float: right; width: 6.5625% /*21px*/;} .aside_box .right a {display: block; width: 100%; height: 100%;} .aside_box .right2 {float: right; width: 5.3125% /*17px*/;} /*close 사이즈가 다름*/ .guidetxt {float: left; width: 100%; padding: 8.8888% 5.5556% /*20px*/ 0; margin-bottom: 8.3333%;} .guidetxt .txtbox {float: left; width: 100%;} .guidetxt .txtbox span {font-size: 2.4rem; color: #333; font-weight: bold; line-height: 3.2rem; letter-spacing: -0.05rem;} .guidetxt .txtbox p {display: inline-block; width: 100%; font-size: 1.5rem; color: #333; font-weight: 500; line-height: 2.2rem; letter-spacing: -0.05rem; margin-top: 6.25%} .guidetxt2 {padding: 25% 5.5556% /*20px*/ 0; margin-bottom: 11.1112%;} .personnelinfo_box {float: left; width: 100%; padding: 0 5.5556% /*20px*/ 20%;} .formgroup_box {float: left; width: 100%;} .formgroup_box .iteminput {position: relative; display: inline-block; width: 100%; height: auto; padding: 4% 5.5556%; margin-bottom: 4.6875%; background: #fff; border: 1px solid #ddd; border-radius: 6px;} .formgroup_box .iteminput.focus{border-color:#2979FF;} .formgroup_box .iteminput .label {display: inline-block; font-size: 1.4rem; color: #666; font-weight: 500; line-height: 1.4rem;} .formgroup_box .iteminput .fmselect {-moz-appearance: none; -webkit-appearance: none; appearance: none; display: inline-block; width: 100%; font-family : "Noto Sans KR", sans-serif; font-size: 1.8rem; color: #bbb; font-weight: 400; padding: 1.4% 0 0; background: #fff; border: 0;} /* select option 값 설정 */ .formgroup_box .iteminput .fmselect option {color: #5e5e5e;} .formgroup_box .iteminput .fmselect:focus {color: #111;} .formgroup_box .iteminput .fminput {display: inline-block; width: 100%; font-size: 1.8rem; color: #111; font-weight: 400; padding: 1% 0 0; background: #fff; border: 0;} .formgroup_box .iteminput .input_close {position: absolute; top: 2.5rem; right: 2rem;} .formgroup_box .iteminput .input_close span {display: inline-block; width: 2rem; height: 2rem;} .formgroup_box .iteminput .ico_rectangle {position: absolute; top: 34%; right: 8%; width: 5.9375% /*19px*/;} .formgroup_box .iteminput .ico_rectangle a {display: inline-block; width: 100%; height: 100%;} .formgroup_box .iteminput .label2 {color: #bbb;} .formgroup_box .iteminput2 {position: relative; display: inline-block; width: 100%; height: auto; padding: 4% 5.5556%; margin-bottom: 4.6875%; background: #eef5ff; border: 1px solid #ddd; border-radius: 6px;} .formgroup_box .iteminput2 .label2 {display: inline-block; font-size: 1.4rem; color: #bbb; font-weight: 500; line-height: 1.4rem;} .formgroup_box .iteminput2 .fminput2 {display: inline-block; width: 100%; font-size: 1.8rem; color: #111; font-weight: 400; padding: 1% 0 0; background: #eef5ff; border: 0;} .formgroup_box .iteminput3 .fminput2 {font-family: "Roboto", sans-serif; font-size: 1.9rem;} /* formgroup placeholder 설정 */ .formgroup_box .iteminput input::-webkit-input-placeholder {font-size: 1.8rem; color: #bbb; font-weight: 500; letter-spacing: -0.02rem; vertical-align: middle;} .formgroup_box .iteminput input::placeholder {font-size: 1.8rem; color: #bbb; font-weight: 500; letter-spacing: -0.02rem; vertical-align: middle;} .formgroup_box .iteminput2 input::-webkit-input-placeholder {font-size: 1.8rem; color: #333; font-weight: 500; letter-spacing: -0.01rem; vertical-align: middle;} .formgroup_box .iteminput2 input::placeholder {font-size: 1.8rem; color: #333; font-weight: 500; letter-spacing: -0.01rem; vertical-align: middle;} .formgroup_box .iteminput3 input::-webkit-input-placeholder {font-family: "Roboto", sans-serif; font-size: 1.9rem;} .formgroup_box .iteminput3 input::placeholder {font-family: "Roboto", sans-serif; font-size: 1.9rem;} .formgroup_box .iteminput input.fminput3::-webkit-input-placeholder {font-size: 1.8rem; color: #333; font-weight: 500; letter-spacing: -0.02rem; vertical-align: middle;} .formgroup_box .iteminput input.fminput3::placeholder {font-size: 1.8rem; color: #333; font-weight: 500; letter-spacing: -0.02rem; vertical-align: middle;} /* formgroup daterangepicker 설정 */ .formgroup_box .iteminput .daterangepicker{position:relative; margin-top:0; top:auto !important; left:auto !important; min-width: auto; font-family: "Noto Sans KR", sans-serif; } .formgroup_box .iteminput + p{font-size:1.2rem; color:#FF611D; margin-top:-1rem; margin-bottom: 4.6875%;} /* MEM0101 회원유형 선택 추가 211001 */ .memberguidetxt {float: left; width: 100%; padding: 8.8888% 5.5556% /*20px*/ 0; margin-bottom: 8.3333%;} .memberguidetxt .txtbox {float: left; width: 100%; text-align: center;} .memberguidetxt .txtbox span {font-size: 2.4rem; color: #333; font-weight: bold; line-height: 3.2rem; letter-spacing: -0.05rem;} .membertype_box {float: left; width: 100%; padding: 0 5.5556%; margin-bottom: 15rem;} .membertype_area {float: left; width: 100%;} .membertype_select {float: left; width: 100%;} .membertype_select div.itemtypepick {display: block; width: 100%; height: 14rem; margin-bottom: 1.5rem;} .membertype_select div.itemtypepick input.inputitem {display: none;} .membertype_select div.itemtypepick label {float: left; width: 100%; height: 100%; line-height: 13.8rem; padding-left: 3.5rem; background-size: 11rem 10.5rem; border: 2px solid #ddd; border-radius: 2rem;} .membertype_select div.itemtypepick label.typepicklabel2 {background: #f6f6f6 ;} .membertype_select div.itemtypepick label .pickimg {display: inline-block; width: 100%; font-size: 2rem; color: #bbb; font-weight: 500; letter-spacing: -0.02rem;} .membertype_select div.itemtypepick label .pickimg span.ico {display: inline-block; width: 2rem; height: 1.5rem; margin-right: 1rem; background: url("../images/memtype_check_off.svg") no-repeat; background-size: 2rem 1.5rem;} /* 체크선택시 */ .membertype_select div.itemtypepick input:checked + label {float: left; width: 100%; height: 100%; line-height: 13.8rem; padding-left: 3.5rem; background-size: 11rem 10.5rem; border: 2px solid #4e9ce7; border-radius: 2rem;} .membertype_select div.itemtypepick input:checked + label.typepicklabel2 {background: #f5faff ;} .membertype_select div.itemtypepick input:checked + label .pickimg {color: #1c85e8; font-weight: bold;} .membertype_select div.itemtypepick input:checked + label .pickimg span.ico {background: url("../images/memtype_check_on.svg") no-repeat; background-size: 2rem 1.5rem;} /*높이 작은*/ .membertype_select div.itemtypepick-small{height:10rem;} .membertype_select div.itemtypepick-small label{line-height:9.8rem;} .membertype_select div.itemtypepick-small input:checked + label{line-height:9.8rem;} /* MEM0201 휴대폰번호입력 추가 211001 */ .formmembergroup_box {float: left; width: 100%;} .formmembergroup_box .iteminput {position: relative; display: inline-block; width: 100%; height: auto; padding: 4% 5.5556%; margin-bottom: 4.6875%; background: #fff; border: 1px solid #ddd; border-radius: 6px;} .formmembergroup_box .iteminput .label {display: inline-block; font-size: 1.4rem; color: #bbb; font-weight: 500; line-height: 1.4rem;} .formmembergroup_box .iteminput .fmselect {-moz-appearance: none; -webkit-appearance: none; appearance: none; display: inline-block; width: 100%; font-family : "Noto Sans KR", sans-serif; font-size: 1.8rem; color: #bbb; font-weight: 400; padding: 1.4% 0 0; background: #fff; border: 0;} .formmembergroup_box .iteminput .fminput {display: inline-block; width: 100%; font-size: 1.8rem; color: #111; font-weight: 400; padding: 1% 0 0; background: #fff; border: 0;} .formmembergroup_box .iteminput .input_close {position: absolute; top: 2.5rem; right: 2rem;} .formmembergroup_box .iteminput .input_close span {display: inline-block; width: 2rem; height: 2rem;} .formmembergroup_box .iteminput .ico_rectangle {position: absolute; top: 34%; right: 8%; width: 5.9375% /*19px*/;} .formmembergroup_box .iteminput .ico_rectangle a {display: inline-block; width: 100%; height: 100%;} .formmembergroup_box .iteminput_birthdate {float: left; width: 100%;} .formmembergroup_box .iteminput_birthdate .iteminput {float: left; width: 45%; height: 7.1rem;} .formmembergroup_box .iteminput_birthdate .txt {float: left; font-size: 1.8rem; color: #333; font-weight: 400; letter-spacing: -0.02rem; margin: 2.2rem 0.8rem 0;} .formmembergroup_box .iteminput_birthdate .iteminputpass {float: left; width: 12%; height: 7.1rem; padding: 6.5% 2%; background: #fff; border: 1px solid #ddd; border-radius: 6px;} .formmembergroup_box .iteminput_birthdate .iteminputpass .fminput {display: inline-block; width: 100%; font-size: 1.8rem; color: #111; font-weight: 400; text-align: center; padding: 1% 0 0; background: #fff; border: 0;} .formmembergroup_box .iteminput_birthdate .circle_box {float: left; margin-left: 0.5rem;} .formmembergroup_box .iteminput_birthdate .circle_box span {display: inline-block; width: 1rem; height: 1rem; margin: 3.2rem 0.3rem 0; background: #ccc; border-radius: 50%;} /* formmembergroup_box placeholder 설정 */ .formmembergroup_box .iteminput input::-webkit-input-placeholder {font-size: 1.8rem; color: #333; font-weight: 500; letter-spacing: -0.02rem; vertical-align: middle;} .formmembergroup_box .iteminput input::placeholder {font-size: 1.8rem; color: #333; font-weight: 500; letter-spacing: -0.02rem; vertical-align: middle;} /* MEM0503 정보불일치 팝업 */ .bgcoverpopup_box {display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 99999;} .bgcoverpopup_box.open{display:block;} .popupcontents {position: fixed; top: 50%; left: 50%; width: 83.3334% /*300px*/; height: auto; min-height: 34.6rem /*346px*/; margin: 0; transform: translate(-50%, -50%);} .popupcontents .popup_wrap {display: block; width: 100%; height: auto; min-height: 30rem /*300px*/; text-align: center; padding: 10% 6.6667% /*20px*/ 0; background: #fff; border-radius: 10px 10px 0 0; overflow: auto;} .popupcontents .popup_wrap .ico_question {display: inline-block; width: 4rem; height: 4rem; background: #ddd; border-radius: 50%;} .popupcontents .popup_wrap .ico_question i.que {font-family: "Roboto", sans-serif; font-style: normal; font-size: 2.6rem; color: #fff; font-weight: 500; line-height: 4rem;} .popupcontents .popup_wrap h2 {display: inline-block; width: 100%; font-family : "Noto Sans KR", sans-serif; font-size: 2.2rem; color: #333; font-weight: 700; letter-spacing: -0.05rem; margin-top: 10px; margin-bottom: 3%;} .popupcontents .popup_wrap p.nottxt {display: inline-block; width: 100%; font-size: 1.6rem; color: #333; font-weight: 400; line-height: 2.4rem; letter-spacing: -0.05rem;} .popupcontents .popup_wrap .notreconfirm {display: inline-block; width: 100%; padding-top: 1.1rem; margin-top: 1.4rem; border-top: 1px solid #ddd;} .popupcontents .popup_wrap .notreconfirm p {font-size: 1.2rem; color: #666; font-weight: 400; text-align: left; line-height: 2rem; letter-spacing: -0.1rem;} .popupcontents .popup_wrap .notreconfirm .customer {float: left; width: 100%; text-align: left; margin-top: 20px;} .popupcontents .popup_wrap .notreconfirm .customer span.tit {font-size: 1.25rem; color: #666; font-weight: 500;} .popupcontents .popup_wrap .notreconfirm .customer span.number {font-family: "Roboto", sans-serif; font-size: 1.4rem; color: #333; font-weight: 500; letter-spacing: -0.02rem; margin-left: 5px;} .popupcontents .popup_wrap.autoHeight{min-height:auto; padding: 10% 6.6667% /*20px*/ ;} .popupcontents .popclose {display: block; bottom: 0; width: 100%; height: 5rem /*50px*/; background: #1c85eb; border-radius: 0 0 10px 10px;} .popupcontents .popclose button {display: inline-block; width: 100%; text-align: center; font-size: 1.9rem; color: #fff; font-weight: 500; line-height: 5rem;} /* MEM1001 회원가입완료 장병 */ .completecontents {position: fixed; bottom: 0; width: 100%;} .completecontents .complete_wrap {display: block; width: 100%; text-align: center; padding: 3rem 2rem 2.5rem; background: #fff; border-radius: 30px 30px 0 0; overflow: auto;} .completecontents .complete_wrap h2 {display: inline-block; width: 100%; font-family : "Noto Sans KR", sans-serif; font-size: 2.6rem; color: #333; font-weight: 700; letter-spacing: -0.05rem; margin-bottom: 2.9rem;} .completecontents .complete_wrap .ico_check {display: inline-block; width: 4.6rem; height: 4.6rem; margin-bottom: 1.5rem;} .completecontents .complete_wrap p.endtxt {display: inline-block; width: 100%; font-size: 1.6rem; color: #333; font-weight: 400; line-height: 2.4rem; letter-spacing: -0.05rem;} .completecontents .complete_wrap .btncheck {display: block; width: 100%; height: 5rem; margin-top: 3rem; background: #1c85eb; border-radius: 6px;} .completecontents .complete_wrap .btncheck button {display: inline-block; width: 100%; text-align: center; font-size: 1.8rem; color: #fff; font-weight: 500; line-height: 5rem;} /* MEM1101 가족정보 입력 */ .militaryinfo {display: block; width: 100%; margin: 7.8125% 0 4.6875% 0;} .militaryinfo span {font-size: 2rem; color: #333; font-weight: bold;} /* MEM1201 회원가입승인 요청 안내 */ .approval_box {float: left; width: 100%; padding: 0 5.5556% /*20px*/;} .approval_contents {float: left; width: 100%; padding: 6.25% 0; border-top: 1px solid #333; border-bottom: 1px solid #ddd;} .approval_contents .left {float: left;} .approval_contents .left span {font-size: 1.6rem; color: #333; font-weight: 400; line-height: 1.6rem; letter-spacing: -0.05rem;} .approval_contents .left span::before {display: inline-block; content: ""; width: 3px; height: 3px; margin-right: 5px; background: #1c85e8; vertical-align: 3.5px; border-radius: 50%;} .approval_contents .right {float: right;} .approval_contents .right span {font-family: "Roboto", sans-serif; font-size: 1.6rem; color: #333; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.05rem;} .sgutxt {float: left; width: 100%; margin-top: 6.25%;} .sgutxt span {float: left; width: 3px; height: 3px; margin-top: 10px; margin-right: 5px; background: #1c85e8;} .sgutxt p {float: left; width: 95%; font-size: 1.35rem; color: #666; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.05rem; word-break: keep-all;} /* 하단고정 버튼 */ .footfix_box {position: fixed; bottom: 0; left: 0; width: 100%; height: 6rem /*60px*/; background: #1c85e8;} .footfix_box a {display: block; width: 100%; height: 100%; font-family : "Noto Sans KR", sans-serif; font-size: 1.8rem; color: #fff; font-weight: bold; line-height: 6rem; letter-spacing: -0.02rem; text-align: center;} /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** 작업일정순(2차) 210819 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* LOG0501 휴면회원해제 안내 */ .aside_dormancy_box {float: left; width: 100%; padding: 5.5556% 5.5556% /*20px*/ 0;} .aside_dormancy_box .left {position:relative; float: left; width: 2.5% /*8px*/; height: 5%; margin-top: 0.2rem; z-index:1; } .aside_dormancy_box .pagetitle {position: absolute; top: 1.85rem; left: 0; width: 100%; text-align: center;} .aside_dormancy_box .pagetitle span {font-size: 1.65rem; color: #333; font-weight: 500;} .aside_dormancy_box .right {position:relative; float: right; width: 4.6875% /*15px*/; z-index:1;} /*close 사이즈가 다름*/ .domantstate_box {float: left; width: 100%; text-align: center; padding-top: 8.6rem;} .domantstate_box .qutxt_title {float: left; width: 100%;} .domantstate_box .qutxt_title span {display: inline-block; font-size: 2.3rem; color: #333; font-weight: bold; line-height: 2.3rem; letter-spacing: -0.05rem; margin-bottom: 1.5rem;} .domantstate_box .qutxt_title p {font-size: 1.5rem; color: #666; font-weight: 400; line-height: 2.3rem; letter-spacing: -0.05rem;} .domantstate_box .domantico_box {float: left; width: 100%; text-align: center;} .domantstate_box .domantico_box .clockimg {display: inline-block; width: 6.5rem /*65px*/; margin-top: 4.4rem;} .domantstate_box .mycertify_btns {float: left; width: 100%; padding: 0 11.1112%; margin-top: 4.15rem;} .domantstate_box .mycertify_btns a {display: inline-block; width: 100%; height: 5rem; font-family : "Noto Sans KR", sans-serif; font-size: 1.8rem; color: #fff; line-height: 5rem; letter-spacing: -0.05rem; background: #1c85eb; border-radius: 8px;} /* 하단고정 버튼 */ .qu_footfix_box {position: fixed; bottom: 0; left: 0; width: 100%;} .qu_footfix_box .qubtns {float: left; width: 100%;} .qu_footfix_box .qubtns a.left {float: left; width: 41.6667% /*150px*/; height: 6rem /*60px*/; font-family : "Noto Sans KR", sans-serif; font-size: 1.8rem; color: #666; line-height: 6rem; letter-spacing: -0.02rem; text-align: center; background: #ddd;} .qu_footfix_box .qubtns a.left span {font-weight: 500;} .qu_footfix_box .qubtns a.right {float: left; width: 58.3334% /*210px*/; height: 6rem /*60px*/; font-family : "Noto Sans KR", sans-serif; font-size: 1.8rem; color: #fff; font-weight: bold; line-height: 6rem; letter-spacing: -0.02rem; text-align: center; background: #1c85e8;} /* LOG0601 휴대폰 재인증 안내 */ .guidetxt3 {padding: 5rem 5.5556% /*20px*/ 0; margin-bottom: 2rem;} .guidetxt3 .txtbox span {font-size: 2rem; line-height: 3.2rem;} .guidetxt3 .txtbox span .fontmo {font-family: "Roboto", sans-serif; font-size: 2.1rem;} .guidetxt3 .txtbox p {font-size: 1.5rem; font-weight: bold; letter-spacing: -0.08rem; margin-top: 6rem;} .mycertify_box {float: left; width: 100%; padding: 0 5.5556% /*20px*/;} .mycertify_contents {float: left; width: 100%; padding: 6.25% 0; border-top: 1px solid #333; border-bottom: 1px solid #ddd;} .mycertify_contents .notearea {float: left; width: 100%; height: 2rem; margin-bottom: 1.7rem;} .mycertify_contents .notearea span {display: inline-block; width: 2rem; height: 2rem; margin-right: 5px;} .mycertify_contents .notearea p {display: inline-block; width: 90%; font-size: 1.5rem; color: #333; font-weight: 500; line-height: 2rem; letter-spacing: -0.08rem; vertical-align: -0.4rem;} .mycertify_contents p {display: inline-block; font-size: 1.45rem; color: #666; font-weight: 400; letter-spacing: -0.1rem;} .mycertify_contents p.notetxt {margin-top: 1.5rem;} .sgutxt2 {float: left; width: 100%; margin-top: 6.25%;} .sgutxt2 span {float: left; width: 0.3rem; height: 0.3rem; margin-top: 1rem; margin-right: 5px; background: #1c85e8;} .sgutxt2 p {float: left; width: 95%; font-size: 1.4rem; color: #666; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.05rem; word-break: keep-all;} /* LOG0701 전역회원 전환 안내 */ .discharge_box {float: left; width: 100%; padding: 0 5.5556% /*20px*/;} .discharge_contents {float: left; width: 100%; padding-top: 8.75%; border-top: 1px solid #333;} .discharge_contents .changecon {float: left; width: 100%;} .discharge_contents .changecon2 {margin-top: 3.1rem;} .discharge_contents .changecon .number {float: left; width: 2.6rem; height: 2.6rem; text-align: center; margin-right: 1rem; border: 1px solid #1c85e8; border-radius: 50%;} .discharge_contents .changecon .number span {font-family: "Roboto", sans-serif; font-size: 1.4rem; color: #1c85e8; font-weight: bold; line-height: 2.6rem;} .discharge_contents .changecon .changetxt {float: left; width: 87%;} .discharge_contents .changecon .changetxt span {display: inline-block; font-size: 1.6rem; color: #333; font-weight: bold; line-height: 1.6rem; margin-bottom: 0.8rem;} .discharge_contents .changecon .changetxt p {display: inline-block; font-size: 1.5rem; color: #666; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.1rem;} .discharge_contents .changecon .changetxt ul {float: left; width: 100%; margin-top: 1.8rem;} .discharge_contents .changecon .changetxt ul li {float: left; width: 100%; margin-bottom: 0.8rem;} .discharge_contents .changecon .changetxt ul li span {display: inline-block; width: 0.3rem; height: 0.3rem; margin-right: 5px; margin-bottom: 0.2em; background: #1c85e8; border-radius: 50%;} .discharge_contents .changecon .changetxt ul li p {display: inline-block; font-size: 1.4rem; color: #1c85e8; font-weight: 400; line-height: 1.4rem;} .endguide_box {float: left; width: 100%; text-align: center; padding: 11.9445% 8.3334% 28.6112%; margin-top: 4rem; background: #F6F6F6;} .endguide_box .endguide_txt {float: left; width: 100%;} .endguide_box .endguide_txt span {display: inline-block; font-size: 1.7rem; color: #333; font-weight: bold; line-height: 1.6rem; letter-spacing: -0.08rem; margin-bottom: 1.5rem;} .endguide_box .endguide_txt p {display: inline-block; font-size: 1.5rem; color: #333; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.08rem;} /* LOG0801 비밀번호변경 안내 */ .pwchangelinfo_box {float: left; width: 100%; padding: 0 5.5556% /*20px*/ 20%;} .guidetxt4 {padding: 19.4445% 5.5556% /*20px*/ 0; margin-bottom: 8.3334%;} .guidetxt4 .txtbox p {color: #666;} .itemcheckbox {position: relative; display: inline-block; width: 100%;} .itemcheckbox .basiccheck {float: left; width: 2.4rem; height: 2.4rem; margin-right: 1rem;} .itemcheckbox .checkbox-label {position: relative; font-size: 1.6rem; color: #666; font-weight: 500; letter-spacing: -0.02rem; vertical-align: middle;} /* LOG0901 회원가입 미승인 안내 */ .aside_notapproval_box {float: left; width: 100%; padding: 4.1667% 5.5556% /*20px*/ 0;} .aside_notapproval_box .pagetitle {position: absolute; top: 1.5rem; left: 0; width: 100%; text-align: center;} .aside_notapproval_box .pagetitle span {font-size: 1.65rem; color: #333; font-weight: 500; line-height: 1.65em;} .aside_notapproval_box .reset {float: right; width: 2.3rem;} .guidetxt5 {padding: 5rem 5.5556% 0; margin-bottom: 4rem;} .guidetxt5 .txtbox span {font-size: 2rem;} .memapproval_box {float: left; width: 100%; padding: 0 5.5556% /*20px*/;} .memapproval_contents {float: left; width: 100%; padding: 6.25% 0; border-top: 1px solid #333; border-bottom: 1px solid #ddd;} .memapproval_contents .apprequest {float: left; width: 100%; margin-bottom: 2rem;} .memapproval_contents .apprequest:last-child {margin-bottom: 0;} .memapproval_contents .apprequest .left {float: left;} .memapproval_contents .apprequest .left span {font-size: 1.5rem; color: #999; font-weight: 400; line-height: 1.5rem; letter-spacing: -0.05rem;} .memapproval_contents .apprequest .right {float: right;} .memapproval_contents .apprequest .right span {font-family: "Roboto", sans-serif; font-size: 1.6rem; color: #333; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.05rem;} .memapproval_contents .apprequest .right span.fontmo {font-family : "Noto Sans KR", sans-serif; font-weight: 500;} /* LOG1001 회원가입완료_가족 */ .finishapproval_box {float: left; width: 100%; width: 100%; text-align: center; padding-top: 23.8889%;} .finishapproval_box .fintxt_title {float: left; width: 100%;} .finishapproval_box .fintxt_title span {display: inline-block; font-size: 2.2rem; color: #333; font-weight: bold; line-height: 3.3rem; letter-spacing: -0.05rem; margin-bottom: 1.5rem;} .finishapproval_box .fintxt_title p {font-size: 1.5rem; color: #333; font-weight: 400; line-height: 2.4rem; letter-spacing: -0.05rem;} .finishapproval_box .markimg_box {float: left; width: 100%; margin-top: 6rem;} .finishapproval_box .markimg_box .finishimg {display: inline-block; width: 6.3rem /*63px*/;} /* LOG1101 서비스 이용종료 안내 */ .guidetxt_end {float: left; width: 100%; padding: 20% 5.5556% /*20px*/ 0; margin-bottom: 4rem;} .guidetxt_end .txtbox {float: left; width: 100%;} .guidetxt_end .txtbox span {font-size: 2.3rem; color: #333; font-weight: bold; line-height: 3.3rem; line-height: 3.2rem; letter-spacing: -0.08rem;} .serviceend_box {float: left; width: 100%; padding: 0 5.5556% /*20px*/;} .serviceend_contents {float: left; width: 100%; padding: 6.25% 0; border-top: 1px solid #333;} .serviceend_contents span.first {display: inline-block; font-size: 1.8rem; color: #333; font-weight: 400; letter-spacing: -0.05rem; margin-bottom: 2rem;} .serviceend_contents p {display: inline-block; font-size: 1.6rem; color: #666; font-weight: 400; line-height: 2.8rem; letter-spacing: -0.15rem;} .serviceend_contents p b {color: #333; font-weight: bold;} .serviceend_contents p.ptxt {margin-top: 1.7rem;} .serviceend_contents span.last {display: inline-block; font-size: 1.6rem; color: #333; font-weight: 500; line-height: 2.8rem; letter-spacing: -0.15rem; margin-top: 3.5rem;} /* LOG1201 비밀번호재설정_본인확인정보 입력_장병, LOG1301 비밀번호재설정_본인확인정보 입력_가족 */ .tabbtntype_box {float: left; width: 100%; padding: 0 5.5556% /*20px*/; margin-bottom: 3rem;} .tabtypelist {float: left; width: 100%;} .tabtypelist .listleft {float: left; width: 50%; height: 4.8rem;} .tabtypelist .listleft a {display: block; width: 100%; height: 100%; font-size: 1.85rem; color: #333; font-weight: 500; line-height: 4.6rem; text-align: center; background: #fff; border: 1px solid #bbb; border-radius: 6px 0 0 6px;} .tabtypelist .listleft a.on {color: #fff; background: #303d4e; border: 0;} .tabtypelist .listright {float: left; width: 50%; height: 4.8rem;} .tabtypelist .listright a {display: block; width: 100%; height: 100%; font-size: 1.85rem; color: #333; font-weight: 500; line-height: 4.6rem; text-align: center; background: #fff; border: 1px solid #bbb; border-left: 0; border-radius: 0 6px 6px 0;} .tabtypelist .listright a.on {color: #fff; background: #303d4e; border: 0;} /* LOG1301 비밀번호재설정_본인확인정보 입력_가족 추가 작업 */ .allagreecontents {position: fixed; bottom: 0; width: 100%;} .allagreecontents .allagree_wrap {display: block; width: 100%; padding: 3rem 2.8rem; background: #fff; border-radius: 30px 30px 0 0; overflow: auto;} .allagreecontents .allagree_wrap .headtop {display: inline-block; width: 100%; margin-bottom: 3rem;} .allagreecontents .allagree_wrap .headtop .left {float: left;} .allagreecontents .allagree_wrap .headtop .left .allagreecheck {display: inline-block; width: 3rem; height: 3rem;} .allagreecontents .allagree_wrap .headtop .left span {font-size: 1.85rem; color: #333; font-weight: 500; margin-left: 10px; vertical-align: -0.4rem;} .allagreecontents .allagree_wrap .headtop .right {float: right;} .allagreecontents .allagree_wrap .headtop .right a {display: inline-block; width: 2rem; height: 2rem; margin-top: 0.4rem;} .allagreecontents .allagree_wrap .agreelist {float: left; width: 100%;} .allagreecontents .allagree_wrap .agreelist li {float: left; width: 100%; margin-bottom: 1.8rem;} .allagreecontents .allagree_wrap .agreelist li:last-child {margin-bottom: 0;} .allagreecontents .allagree_wrap .agreelist li span {float: left; width: 1.8rem; margin-top: 0.6rem; margin-right: 1rem;} .allagreecontents .allagree_wrap .agreelist li p {float: left; width: 90%; font-size: 1.6rem; color: #424040; font-weight: 400; letter-spacing: -0.08rem;} .allagreecontents .popbtncheck {display: block; width: 100%; height: 6rem; background: #ddd;} .allagreecontents .popbtncheck button {display: inline-block; width: 100%; text-align: center; font-size: 1.8rem; color: #666; font-weight: 500; line-height: 6rem;} .formgroup_box .codeinput {position: relative; display: inline-block; width: 100%; height: auto; padding: 1.2rem 5.5556%; margin-bottom: 4.6875%; background: #fff; border: 1px solid #ddd; border-radius: 6px;} .formgroup_box .codeinput .left {position: relative; float: left; width: 54%;} .formgroup_box .codeinput .left input.fminput {display: inline-block; width: 100%; height: 2.9rem; font-size: 1.8rem; color: #111; font-weight: 400; line-height: 100%; background: #fff; border: 0;} .formgroup_box .codeinput .left .input_close{ position: absolute; top: 0.55rem; right: 0rem;} .formgroup_box .codeinput .right {float: right;} .formgroup_box .codeinput .right span.time {font-size: 1.6rem; color: #333; font-weight: 400; margin-right: 2rem;} .formgroup_box .codeinput .right span.reconfirm {display: inline-block; font-size: 1.3rem; color: #fff; font-weight: 500; padding: 0.5rem 1rem; background: #333; border: 1px solid #333; border-radius: 2px; vertical-align: 1px;} .formgroup_box .codeinput .right span.reconfirm.disabled{background: #eee; border: 1px solid #ddd; color: #999;} /* LOG1401 비밀번호 재설정 */ .guidetxt6 .txtbox p {color: #666;} .formgroup_box .iteminput .inp {padding: 0;} /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** 작업일정순(3차) 210824 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* HOM0103 가족회원가입 승인 요청 팝업 */ .joinapproval_pop {float: left; width: 100%;} .joinapproval_pop .refusal {float: left; width: 100%; text-align: right; margin-bottom: 2.5rem;} .joinapproval_pop .refusal a {display: block; width: 100%; height: 100%; font-size: 1.5rem; color: #FF611D; font-weight: bold; text-decoration: underline;} .joinapproval_pop h3 {font-family : "Noto Sans KR", sans-serif; font-size: 1.9rem; color: #333; font-weight: bold; line-height: 2.9rem; letter-spacing: -0.07rem;} .joinapproval_pop h3 em{display:block; font-size:1.6rem;} .joinapproval_pop p {display: inline-block; width: 100%; font-size: 1.5rem; color: #333; font-weight: 400; line-height: 2rem; letter-spacing: -0.05rem; margin-top: 1.5rem;} .joininfo_box {float: left; width: 100%; text-align: left; padding: 2rem 0; margin-top: 2rem; border-top: 1px solid #333; border-bottom: 1px solid #ddd;} .joininfo_box .infotxt {float: left; width: 100%; line-height: 3rem;} .joininfo_box .infotxt .left {float: left;} .joininfo_box .infotxt .left span {font-size: 1.5rem; color: #333; font-weight: 400; letter-spacing: -0.02rem;} .joininfo_box .infotxt .right {float: right;} .joininfo_box .infotxt .right span {font-size: 1.5rem; color: #333; font-weight: 500; letter-spacing: -0.02rem;} .joininfo_box .infotxt .right span.fontmo {font-family: "Roboto", sans-serif; font-size: 1.6rem;} .warning_guide {float: left; width: 100%; text-align: left; margin-top: 2rem; margin-bottom: 3rem;} .warning_guide span {float: left; width: 1.8rem; margin-right: 0.8rem;} .warning_guide p {float: left; width: 88%; font-size: 1.4rem; color: #ff611d; font-weight: 400; line-height: 2rem; letter-spacing: -0.05rem; margin-top: -0.2rem; word-break: keep-all;} /* HOM0104 신분증 사진 승인 요청 팝업 */ .joinapproval_pop .cardimg {float: left; width: 100%; margin-bottom: 2.4rem;} .joinapproval_pop .cardimg span {display: inline-block; width: 11rem; height: 11rem; border-radius: 50%; box-shadow: 0px 4px 4px rgba(0,0,0,0.2); overflow: hidden;} .warning_guide_line {padding-top: 2rem; border-top: 1px solid #ddd;} .joinapproval_pop p.pbold {font-weight: 500;} /* HOM0105 신규증명서 발급 안내 팝업 */ .popupcontents .popupcard_wrap {padding: 6.6667% 6.6667% /*20px*/ 0;} .cardissue_pop .popbtns_close {float: left; width: 100%; text-align: right; margin-bottom: 2rem;} .cardissue_pop .popbtns_close a span {display: inline-block; width: 1.7rem; height: 1.7rem;} .cardissue_pop h3 {font-family : "Noto Sans KR", sans-serif; font-size: 2.1rem; color: #333; font-weight: bold; line-height: 2.9rem; letter-spacing: -0.07rem;} .cardissue_pop p {display: inline-block; width: 100%; font-size: 1.5rem; color: #333; font-weight: 400; line-height: 2rem; letter-spacing: -0.05rem; padding-bottom: 2rem; margin-top: 1.4rem; border-bottom: 1px solid #333;} .cardinfo_box {float: left; width: 100%; text-align: left; padding: 2rem 0; border-top: 1px solid #ddd;} .cardinfo_box2 {margin-top: 0; border-top: 0;} .cardinfo_box .infotxt {float: left; width: 100%; line-height: 3rem;} .cardinfo_box .infotxt .left {float: left;} .cardinfo_box .infotxt .left span {font-size: 1.5rem; color: #333; font-weight: 400; letter-spacing: -0.02rem;} .cardinfo_box .infotxt .right {float: right;} .cardinfo_box .infotxt .right span {font-size: 1.5rem; color: #333; font-weight: 500; letter-spacing: -0.02rem;} .cardinfo_box .infotxt .right span.fontmo {font-family: "Roboto", sans-serif; font-size: 1.6rem;} .listnumber {float: left; width: 100%; margin-bottom: 3rem;} .listnumber span {display: inline-block; width: 9.4rem; height: 3.1rem; font-size: 1.5rem; color: #333; font-weight: 500; line-height: 2.9rem; letter-spacing: -0.05rem; border: 1px solid #333; border-radius: 50px;} /* HOM0106 신분증 사진 승인거부 안내 하단고정 팝업 */ .complete_wrap span.refusaltxt {display: inline-block; font-size: 1.8rem; color: #333; font-weight: bold; line-height: 2.8rem; letter-spacing: -0.05rem; margin-bottom: 1.5rem;} .complete_wrap p.signasktxt {font-size: 1.4rem; color: #333; font-weight: 500; line-height: 2.3rem; letter-spacing: -0.05rem;} /* APPHOM0201 인증 요청 */ .certifyask_box {float: left; width: 100%; padding: 0 5.5555%; margin-top: 6.1rem;} .certifyinfo {float: left; width: 100%; text-align: center;} .certifyinfo span {font-size: 1.75rem; color: #333; font-weight: bold; line-height: 2.3rem; letter-spacing: -0.05rem;} .certifyinfo .infolist {float: left; width: 100%; text-align: left; padding: 2rem 2.5rem; margin-top: 2.8rem; background: #fff; border: 1px solid #333; box-shadow: 0px 0px 10px rgba(0,0,0,0.15); border-radius: 10px;} .certifyinfo .infolist li {float: left; width: 100%; line-height: 2.9rem;} .certifyinfo .infolist li div.left {float: left; font-size: 1.5rem; color: #666; font-weight: 500;} .certifyinfo .infolist li div.right {float: right; font-size: 1.5rem; color: #333; font-weight: bold;} .certifyinfo .rqprivacy {position: relative; float: left; width: 100%; text-align: left; margin-top: 2rem; background: #f7f7f7; border: 1px solid #ddd; border-radius: 10px;} .certifyinfo .rqprivacy .checkbtn a {display: block; width: 100%; height: 100%; font-size: 1.45rem; color: #333; font-weight: 500; letter-spacing: -0.05rem; padding: 1.3rem 2rem;} .certifyinfo .rqprivacy .checkbtn a::before {display: inline-block; content: ""; width: 2.8rem; height: 2.8rem; margin-right: 1rem; background: url(../images/ico_check_off.svg) no-repeat; background-size: 100%; vertical-align: -0.85rem;} .certifyinfo .rqprivacy .checkbtn a::after {display: block; content: ""; position: absolute; top: 40%; right: 2rem; width: 1.2rem; height: 1.2rem; border-width: 0 0 2px 2px; border-style: solid; border-color: #bbb; -webkit-transform: rotate(-135deg); transform: rotate(-135deg);} .aksnot {position: absolute; bottom: 10rem; left: 0; width: 100%; text-align: center;} .aksnot a {display: block; width: 100%; font-size: 1.5rem; color: #666; font-weight: 500; text-decoration: underline;} /* APPHOM0301 알림 */ .report_box {float: left; width: 100%; padding: 0 5.5555%; margin-top: 5.4rem;} .reportlist {float: left; width: 100%;} .reportlist .listitem {float: left; width: 100%;} .reportlist .listitem li {float: left; width: 100%; padding: 2rem 0; border-bottom: 1px solid #eee;} .reportlist .listitem li:first-child {padding: 0 0 2rem;} .reportlist .listitem li .subject {display: inline-block; font-size: 1.55rem; color: #333; font-weight: 500; line-height: 2rem; letter-spacing: -0.05rem; margin-bottom: 1.3rem;} .reportlist .listitem li .date {font-family: "Roboto", sans-serif; font-size: 1.35rem; color: #999; font-weight: 400; line-height: 1.3rem; letter-spacing: -0.02rem;} /* APPMYW0101 신분증 사진 미등록 */ .aside_cardid_box {position: absolute; top: 0; left: 0; width: 100%; padding: 0 5.5556%; z-index: 2;} .aside_cardid_box .left {float: left; margin-top: 1.5rem;} .aside_cardid_box .right {float: right; width: 2.1rem; height: 2.1rem; margin-top: 1.7rem;} .cardidphoto_box {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow-y:auto; background: #4a4c42 url("../images/army_patton.svg") no-repeat center top; background-size: cover;} .cardid_box {float: left; width: 100%; height: auto; padding: 5.5rem 2rem 0;} .securitytxt {float: left; width: 100%; height: 2.5rem; padding: 0 2.7rem; background: linear-gradient(90.24deg, #0065C5 0.96%, #3FE0EB 100%); border-radius: 2rem 2rem 0 0;} .securitytxt2 {background: linear-gradient(90.24deg, #FF7A00 0.96%, #FFBC43 100%);} .securitytxt span.titarrow {float: left; width: 1.5rem; height: 0.8rem; padding-top: 0.85rem; margin-right: 0.7rem;} .securitytxt marquee {float: left; width: 90%; font-size: 1.2rem; color: #fff; font-weight: 500; line-height: 2.5rem; letter-spacing: -0.02rem;} .cardid_contents {float: left; width: 100%; height: auto; text-align: center; padding-bottom: 3rem; background: #fff; border-radius: 0 0 2rem 2rem; box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.3);} .cardid_contents h3 {display: inline-block; font-family: "Jeju Hallasan", cursive; font-size: 2.4rem; color: #181818; font-weight: 400; line-height: 2.6rem; letter-spacing: -0.08rem; margin-top: 2.5rem;} .cardid_contents .photoregister {position: relative; float: left; width: 100%; padding-bottom: 1.3rem; margin-top: 2.7rem;} .cardid_contents .photoregister .thumgarea {display: inline-block; width: 16.1rem; background: #fff;} .cardid_contents .photoregister .thumgarea .no_thumbimg {display: inline-block; width: 100%; padding: 4.7rem 0 5.6em; border: 1px solid #ddd; border-radius: 0.4rem;} .cardid_contents .photoregister .thumgarea .no_thumbimg i {display: inline-block; width: 5.1rem; height: 6.1rem; margin-bottom: 1.5rem;} .cardid_contents .photoregister .thumgarea .no_thumbimg p {font-size: 1.3rem; color: #999; font-weight: 500; line-height: 1.3rem; letter-spacing: -0.05rem;} .cardid_contents2 h3 {display: inline-block; font-size: 2rem; line-height: 2rem;} .cardid_contents3 h3 {display: inline-block; font-size: 1.9rem; line-height: 1.9rem;} /* 등록유도 말풍선 */ .cardid_contents .photoregister .btns_register {position: absolute; bottom: 0; left: 50%; margin-left: -8.8rem;} .cardid_contents .photoregister .btns_register .guidearea {position: relative; float: left; height: 2.7rem; padding: 0 1rem; margin-top: 0.9rem; margin-right: 0.8rem; background: #333; border-radius: 0.4rem;} .cardid_contents .photoregister .btns_register .guidearea span {font-size: 1rem; color: #fff; font-weight: 500; line-height: 2.7rem; letter-spacing: -0.02rem;} .cardid_contents .photoregister .btns_register .guidearea:after {position: absolute; content:""; top: 1rem; right: -0.5rem; border-top: 0.4rem solid transparent; border-left: 0.5rem solid #333; border-right: 0 solid transparent; border-bottom: 0.4rem solid transparent;} .cardid_contents .photoregister .btns_register button {float: left; width: 4.4rem; height: 4.4rem;} .cardid_contents .status {float: left; width: 100%; font-size: 1.6rem; color: #666; font-weight: 500; line-height: 1.6rem; letter-spacing: -0.02rem; margin-top: 1rem;} .cardid_contents .status span.name {font-size: 2.5rem; color: #333; font-weight: bold; line-height: 2.6rem; letter-spacing: -0.05rem; margin-left: 0.7rem; vertical-align: -0.2rem;} .cardid_contents .status span.name2 {margin-right: 0.7rem;} .cardid_contents .armyinfo {float: left; width: 100%; padding: 0 7.8125%; margin-top: 2.8rem;} .cardid_contents .armyinfo .left {float: left;} .cardid_contents .armyinfo .left .logos {float: left; width: 5.5rem; height: 6.024rem; margin-top: 0.2rem; margin-right: 1.2rem;} .cardid_contents .armyinfo .left .codetxt {float: left; text-align: left; padding-top: 1rem;} .cardid_contents .armyinfo .left .codetxt .tittxt {display: block; font-size: 1.4rem; color: #666; font-weight: 500; line-height: 1.4rem; letter-spacing: -0.04rem; margin-bottom: 1rem;} .cardid_contents .armyinfo .left .codetxt .numtxt {display: block; font-family: "Roboto", sans-serif; font-size: 1.8rem; color: #363636; font-weight: bold; line-height: 1.9rem; letter-spacing: -0.04rem;} .cardid_contents .armyinfo .right {float: right; width: 6.2rem; height: 6.2rem;} .cardid_contents .barcode {float: left; width: 100%; padding: 0 7.8125%; margin-top: 2.8rem;} /* 최신정보 업데이트 말풍선 */ .newupdate {float: left; width: 100%; padding: 0.8rem 5.5556%;} .newupdate .newupdate_bubble {position: relative; float: right; z-index: 3;} .newupdate .newupdate_bubble .bubblebox {position: absolute; top: -2.2rem; right: 2.2rem; float: left; width: 12rem; height: 2.3rem; padding: 0 0.8rem; background: #1c85e8; border-radius: 0.4rem;} .newupdate .newupdate_bubble .bubblebox div.txt {position: relative; float: left; font-size: 1.1rem; color: #fff; font-weight: bold; letter-spacing: -0.05rem; line-height: 2.25rem; z-index: 2;} .newupdate .newupdate_bubble .bubblebox a {position: relative; display: block; width: 100%; z-index: 2;} .newupdate .newupdate_bubble .bubblebox a div.ico {float: right; width: 1rem; height: 1rem; margin-top: 0.7rem;} .newupdate .newupdate_bubble .bubblebox:before {position: absolute; content: ""; bottom: -0.6rem; right: 0.8rem; border: 0; border-right-width: 3rem; border-bottom-width: 2rem; border-style: solid; border-color: transparent #1c85e8; display: block; width: 0; z-index: 1;} .newupdate .newupdate_bubble .icoupdate {float: left; width: 2.4rem; height: 2.4rem;} .newupdate .newupdate_bubble .icoupdate button {float: left; width: 100%; height: 100%;} /* APPMYW0101 신분증 사진 미등록(가족) */ .cardidphoto_box2 {background: #013183 url("../images/card_figure_bg.svg") no-repeat center top; background-size: cover;} .cardid_contents .armyinfo .left .soldierfamily {float: left; display: table; width: 4.5rem; height: 5rem; margin-top: 0.7rem; margin-right: 1.2rem; background: #1c85e8; border-radius: 0.4rem;} .cardid_contents .armyinfo .left .soldierfamily span {display: table-cell; vertical-align: middle; font-size: 1.4rem; color: #fff; font-weight: bold; line-height: 1.6rem; letter-spacing: -0.05rem;} .cardid_contents .armyinfo .left .codetxt2 {padding-top: 1.2rem;} /* APPMYW0102 신분증 사진 등록 시 유의사항 안내 */ .bgnotepopup_box {position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; background: #303d4e;} .cardnotecontents {position: fixed; bottom: 0; width: 100%;} .cardnotecontents .cardnote_wrap {display: block; width: 100%; text-align: center; padding: 3rem 2rem 2.5rem; background: #fff; border-radius: 3rem 3rem 0 0; overflow: auto;} .cardnotecontents .cardnote_wrap .ico_note {display: inline-block; width: 100%; margin-bottom: 1.3rem;} .cardnotecontents .cardnote_wrap .ico_note span {display: inline-block; width: 3.8rem; height: 3.8rem; text-align: center; background: #f4f4f4; border-radius: 50%;} .cardnotecontents .cardnote_wrap .ico_note span i {display: inline-block; width: 0.5rem; height: 2.1rem; margin-top: 0.8rem;} .cardnotecontents .cardnote_wrap span.tit {font-size: 1.6rem; color: #333; font-weight: bold; line-height: 2.6rem;} .cardnotecontents .cardnote_wrap .notelist_area {float: left; width: 100%; text-align: left; padding-top: 1.8rem; margin-top: 1.8rem; border-top: 1px solid #ddd;} .cardnotecontents .cardnote_wrap .notelist_area ul {float: left; width: 100%;} .cardnotecontents .cardnote_wrap .notelist_area ul li {float: left; width: 100%; margin-bottom: 1.1rem;} .cardnotecontents .cardnote_wrap .notelist_area ul li span {float: left; width: 0.3rem; height: 0.3rem; margin-top: 1rem; margin-right: 0.7rem; background: #333; border-radius: 50%;} .cardnotecontents .cardnote_wrap .notelist_area ul li p {float: left; width: 96%; font-size: 1.4rem; color: #333; font-weight: 500; line-height: 2.2rem; letter-spacing: -0.05rem;} .cardnotecontents .cardnote_wrap .notelist_area ul li p.fontcolor {color: #FF611D;} .cardnotecontents .cardnote_wrap .notelist_area ul div.etc {font-size: 1.3rem; color: #666; font-weight: 400; padding-left: 1rem;} .cardnotecontents .cardnote_wrap .btncheck {display: inline-block; width: 100%; height: 5rem; margin-top: 3rem; background: #1c85eb; border-radius: 6px;} .cardnotecontents .cardnote_wrap .btncheck button {display: inline-block; width: 100%; text-align: center; font-size: 1.8rem; color: #fff; font-weight: 500; line-height: 5rem;} /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** 작업일정순(4차) 210827 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* APPMYW0201 신분증(현역) */ .aside_cardid_box .left a.change {float: left; width: 2.8rem; height: 2.5rem;} .aside_cardid_box .left .balloon {position: relative; float: left; height: 2.3rem; padding: 0 1rem; margin-left: 1.2rem; background: #1c85e8; border-radius: 0.4rem;} .aside_cardid_box .left .balloon span {float: left; font-size: 1.1rem; color: #fff; font-weight: bold; line-height: 2.3rem; letter-spacing: -0.02rem;} .aside_cardid_box .left .balloon:after {position: absolute; content:""; top: 0.8rem; left: -0.5rem; border-top: 0.4rem solid transparent; border-left: 0 solid transparent; border-right: 0.5rem solid #1c85e8; border-bottom: 0.4rem solid transparent;} .aside_cardid_box .left .balloon a.close {float: left;} .aside_cardid_box .left .balloon a.close .ico {display: inline-block; width: 1rem; height: 1rem; margin-top: 0.7rem; margin-left: 1rem;} .cardid_contents .photoregister .thumgarea .soldie_thumbimg {display: inline-block; width: 100%;} .cardid_contents .photoregister .thumgarea .soldie_thumbimg i {display: inline-block; width: 100%; height: 100%;} .cardid_contents .armyinfo2 {margin-top: 2.6rem;} /* APPMYW0202 신분증(전역) */ .cardidphoto_box3 {background: #0d4442 url("../images/card_figure_bg2.svg") no-repeat center top; background-size: cover;} .securitytxt3 {background: linear-gradient(90.24deg, #00c88f 0.97%, #f4cb20 100%);} .cardid_contents .photoregister2 {padding-bottom: 0;} .cardid_contents .photoregister2 .thumgarea {width: 14.2rem;} .cardid_contents .status2 {margin-top: 2rem;} .cardid_contents .discharge {float: left; width: 100%; font-family: "Roboto", sans-serif; font-size: 1.4rem; color: #333; font-weight: 500; line-height: 1.4rem; letter-spacing: -0.02rem; margin-top: 1.5rem;} .cardid_contents .discharge span {display: inline-block; width: 7rem; height: 2rem; font-size: 1.2rem; color: #999; font-weight: 500; line-height: 2rem; letter-spacing: -0.02rem; margin-left: 0.8rem; vertical-align: 0.1rem; background: #f1f1f1; border-radius: 0.4rem;} .cardid_contents .armyinfo3 {margin-top: 1.547rem;} .cardid_contents .armyinfo .left .logos2 {height: 5.7rem; margin-top: 0.3rem;} .cardid_contents .barcode2 {margin-top: 2.4rem;} /* APPMYW0203 신분증(가족) */ .cardidphoto_box4 {background: #262f56 url("../images/card_figure_bg3.svg") no-repeat center top; background-size: cover;} /* APPMYW0301 내 QR코드 */ .cardidmy_box {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow-y: auto; background: #303d4e;} .cardidmyinfo_box {float: left; width: 100%; height: auto; padding: 5.5rem 2rem 4.6rem;} .cardidmy_contents {position: relative; float: left; width: 100%; height: auto; min-height: 53.9rem; text-align: center; padding-bottom: 4.6rem; background: #fff; border-radius: 2rem; box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.3);} .cardidmy_contents .otactit {float: left; width: 100%; margin-top: 4.5rem;} .cardidmy_contents .otactit span {font-size: 1.2rem; color: #666; font-weight: 500; letter-spacing: -0.02rem;} .cardidmy_contents .otacnumber {float: left; width: 100%; margin-top: 1.3rem;} .cardidmy_contents .otacnumber span {font-family: "Roboto", sans-serif; font-size: 2.4rem; color: #333; font-weight: bold; line-height: 2.6rem; letter-spacing: -0.02rem;} .cardidmy_contents .otacqrcode {float: left; width: 100%; margin-top: 4rem;} .cardidmy_contents .otacqrcode .img_qrcode {display: inline-block; width: 18.6rem; height: 18.6rem;} .cardidmy_contents .otactime {float: left; width: 100%; margin-top: 5rem;} .cardidmy_contents .otactime span {font-size: 2.2rem; color: #1c85e8; font-weight: bold; letter-spacing: -0.02rem;} .cardidmy_contents .popclose {position: absolute; bottom: 3.5rem; width: 100%;} .cardidmy_contents .popclose a {display: inline-block; width: 2.8rem; height: 1.5rem;} /* 하단고정 팝업닫기 변경 */ .fixpopupclose {position: fixed; z-index: 99999; left: 0; bottom: 8.6rem; width: 100%; height: 2rem; text-align: center;} /* 증명서 팝업 */ .fixpopupclose a {display: inline-block; width: 2.8rem; height: 1.5rem;} .receiptfixclose {position: fixed; z-index: 99999; left: 0; bottom: 5rem; width: 100%; height: 2rem; text-align: center;} /* 영수증 팝업 */ .receiptfixclose a {display: inline-block; width: 2.8rem; height: 1.5rem;} /* APPMYW0401 내 바코드 */ .cardidmy_contents .otacbarcode {float: left; width: 100%; margin-top: 4rem;} .cardidmy_contents .otacbarcode .img_barcode {display: inline-block; width: 27rem; height: 8.67rem;} .cardidmy_contents .otacbarcode .img_barcode span {display: block; font-family: "Roboto", sans-serif; font-size: 1.3rem; color: #333; font-weight: bold; line-height: 1.6rem; text-align: left; padding-left: 1.2rem; margin-top: 1.3rem;} /* APPMYW0502 증명서 목록_증명서 없음 */ .aside_certificate_box {position: absolute; top: 0; left: 0; width: 100%; padding: 0 5.5556%; z-index: 2;} .aside_certificate_box .left {float: left; width: 2.8rem; height: 2.5rem; margin-top: 1.5rem;} .aside_certificate_box .right {float: right; width: 2.1rem; margin-top: 1.7rem;} .certificate_box {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow-y: auto; background: #fff;} .certificatepop_box {background: #303d4e;} .sign_box {float: left; width: 100%; text-align: center; margin-top: 20rem;} .sign_box .icosign {display: inline-block; width: 4.4rem; height: 4.4rem; margin-bottom: 1rem;} .sign_box .sign_txt {display: inline-block; width: 100%; font-size: 1.5rem; color: #666; font-weight: 400; line-height: 3rem; letter-spacing: -0.04rem;} /* APPMYW0503 증명서 상세_휴가증 */ .certificateinfo_box {float: left; width: 100%; height: auto; padding: 5rem 2rem 5.1rem;} .certificate_contents {position: relative; float: left; width: 100%; height: auto; min-height: 51.2rem; text-align: center; padding: 0 3rem; background: #fff url("../images/armedforces_logo.svg") no-repeat center 43.75%; background-size: 19rem 20.5rem; border-radius: 0 0 2rem 2rem; box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.3);} .certificate_contents .toptitle {float: left; width: 100%; text-align: center; margin-top: 3rem;} .certificate_contents .toptitle .left {float: left; width: 0.9rem; height: 1.6rem; margin-top: 0.5rem;} .certificate_contents .toptitle h3.tittxt {position: absolute; left: 0; width: 100%; font-size: 2.3rem; color: #333; font-weight: bold; line-height: 2.3rem; letter-spacing: -0.04rem;} .certificate_contents .toptitle h3.tittxt2 {font-size: 1.9rem; line-height: 2.4rem; letter-spacing: -0.04rem;} .certificate_contents .toptitle .right {float: right; width: 0.9rem; height: 1.6rem; margin-top: 0.5rem;} .certificate_contents .militaryper_info {float: left; width: 100%; text-align: left; margin-top: 2.5rem;} .certificate_contents .militaryper_info ul {float: left; width: 100%; padding-top: 1.5rem; border-top: 1px solid #333;} .certificate_contents .militaryper_info ul.list2 {margin-top: 3.5rem;} .certificate_contents .militaryper_info ul div.tit {display: inline-block; font-size: 1.5rem; color: #333; font-weight: bold; line-height: 2rem; margin-bottom: 1rem;} .certificate_contents .militaryper_info ul li {float: left; width: 100%; line-height: 3rem;} .certificate_contents .militaryper_info ul li .left {float: left;} .certificate_contents .militaryper_info ul li .left span {font-size: 1.4rem; color: #999; font-weight: 500; line-height: 1.4rem;} .certificate_contents .militaryper_info ul li .right {float: right;} .certificate_contents .militaryper_info ul li .right span {font-size: 1.5rem; color: #333; font-weight: 500; line-height: 1.8rem;} .certificate_contents .militaryper_info ul li .right span.number {font-family: "Roboto", sans-serif;} .certificate_contents .popclose {position: absolute; bottom: 3.5rem; left: 0; width: 100%;} /* 하단 팝업창 닫기 */ .certificate_contents .popclose a {display: inline-block; width: 2.8rem; height: 1.5rem;} /* APPMYW0505 증명서 상세_급여명세서 */ .certificate_contents2 {background: #fff url("../images/armedforces_logo.svg") no-repeat center 53.8461%;} .paycalendar {float: left; display: table; width: 100%; height: 5rem; text-align: center; padding: 0 2rem; margin-top: 2.5rem; border: 1px solid #ddd; border-radius: 50px;} .paycalendar .leftprev {float: left; width: 0.8rem; height: 1.4rem; margin-top: 1.7rem;} .paycalendar .calendardate {display: inline-block; width: 60%; line-height: 4.6rem;} .paycalendar .rightnext {float: right; width: 0.8rem; height: 1.4rem; margin-top: 1.7rem;} .certificate_contents .militaryper_info ul.list3 {margin-top: 3.5rem; overflow: hidden;} .certificate_contents .militaryper_info ul.list3 div.payslip_list {height: 12rem;} .certificate_contents .militaryper_info ul.list3 div.payslip_list li .left span {color: #333;} .certificate_contents .militaryper_info ul.list3 div.payslip_list li .left span.size {font-size: 1.3rem;} .certificate_contents .militaryper_info ul.list3 div.payslip_list li .right span.size {font-size: 1.3rem; font-weight: bold;} /* 확인서 팝업변경 211001 */ .documentpop_box {position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 5rem 2rem; background: #303d4e;} .documentpopinfo_box {position: relative; width: 100%; height: 100%; padding-bottom: 30%; background: #fff; border-radius: 2rem; box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.3); overflow: hidden;} .documentpop_contents {position: relative; float: left; width: 100%; height: 100%; min-height: 4rem; text-align: center; padding: 0 3rem; background: url("../images/armedforces_logo.svg") no-repeat center 55%; background-size: 19rem 20.5rem; overflow-y: auto;} .documentpop_contents .toptitle {float: left; width: 100%; text-align: center; margin-top: 3rem;} .documentpop_contents .toptitle .left {float: left; width: 0.9rem; height: 1.6rem; margin-top: 0.5rem;} .documentpop_contents .toptitle h3.tittxt {position: absolute; left: 0; width: 100%; font-size: 2.3rem; color: #333; font-weight: bold; line-height: 2.3rem; letter-spacing: -0.04rem;} .documentpop_contents .toptitle h3.tittxt2 {font-size: 1.9rem; line-height: 2.4rem; letter-spacing: -0.04rem;} .documentpop_contents .toptitle .right {float: right; width: 0.9rem; height: 1.6rem; margin-top: 0.5rem;} .documentpop_contents .militaryper_info {float: left; width: 100%; text-align: left; margin-top: 2.5rem;} .documentpop_contents .militaryper_info ul {float: left; width: 100%; padding-top: 1.5rem; border-top: 1px solid #333;} .documentpop_contents .militaryper_info ul.list2 {margin-top: 3.5rem;} .documentpop_contents .militaryper_info ul div.tit {display: inline-block; font-size: 1.5rem; color: #333; font-weight: bold; line-height: 2rem; margin-bottom: 1rem;} .documentpop_contents .militaryper_info ul li {float: left; width: 100%; line-height: 3rem;} .documentpop_contents .militaryper_info ul li .left {float: left;} .documentpop_contents .militaryper_info ul li .left span {font-size: 1.4rem; color: #999; font-weight: 500; line-height: 1.4rem;} .documentpop_contents .militaryper_info ul li .right {float: right;} .documentpop_contents .militaryper_info ul li .right span {font-size: 1.5rem; color: #333; font-weight: 500; line-height: 1.8rem;} .documentpop_contents .militaryper_info ul li .right span.number {font-family: "Roboto", sans-serif;} .documentpop_contents .popclose {position: absolute; bottom: 3.5rem; left: 0; width: 100%;} /* 하단 팝업창 닫기 */ .documentpop_contents .popclose a {display: inline-block; width: 2.8rem; height: 1.5rem;} /* 확인서 팝업 창닫기 버튼 211001 */ .documentpopclose {position: absolute; z-index: 99999; left: 0; bottom: 8rem; width: 100%; height: 2rem; text-align: center;} .documentpopclose a {display: inline-block; width: 2.8rem; height: 1.5rem;} /* 크롬, ie10, ie11 셀렉트박스 삭제 - 변경 210913 */ .calendarselect {-webkit-appearance: none; height: 1.9rem; font-family: "Roboto", sans-serif; font-size: 1.7rem; color: #333; font-weight: 700; line-height: 2rem; letter-spacing: -0.04rem; background: #fff; border: none; outline: none;} .calendarselect2 {margin-left: 0.5rem; width: 40%; background: #fff url(../images/openarrow.svg) no-repeat right center; background-size: 1rem 0.6rem;} .calendarselect::-ms-expand {display:none; /* hide the default arrow in ie10 and ie11 */} /* APPMYW0506 목록편집 가이드 */ .listedit_guide_box {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow-y: auto; background: rgba(0,0,0,0.85);} .listedit_guide_contents {float: left; width: 100%; padding: 0 3.7rem;} .listedit_guide_contents .toptitle {float: left; width: 100%; text-align: center; margin-top: 5rem;} .listedit_guide_contents .toptitle h3 {display: inline-block; width: 100%; font-size: 2.2rem; color: #fff; font-weight: bold; line-height: 1.8rem; letter-spacing: -0.04rem; margin-bottom: 1.4rem;} .listedit_guide_contents .toptitle p {font-size: 1.4rem; color: #fff; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.04rem;} .listedit_guide_contents .certificate_list {position: relative; float: left; width: 100%; padding-bottom: 7.8rem; margin-top: 2.8rem;} .listedit_guide_contents .certificate_list ul {float: left; width: 100%;} .listedit_guide_contents .certificate_list ul li {float: left; width: 100%; height: 12rem; margin-bottom: 1.5rem;} .listedit_guide_contents .certificate_list ul li:last-child {margin-bottom: 0;} .listedit_guide_contents .certificate_list ul li a {display: table; width: 100%; height: 100%; padding: 0 3rem; background: #fe9926; box-shadow: 0px 0px 5px rgba(0,0,0,0.2); border-radius: 1rem;} .listedit_guide_contents .certificate_list ul li.list2 a {background: #fed336;} .listedit_guide_contents .certificate_list ul li a dl {display: table-cell; vertical-align: middle;} .listedit_guide_contents .certificate_list ul li a dl dt {font-size: 1.7rem; color: #fff; font-weight: bold; line-height: 1.7rem; letter-spacing: -0.04rem; margin-bottom: 1.6rem;} .listedit_guide_contents .certificate_list ul li a dl dd {font-size: 1.1rem; color: #fff; font-weight: 400; line-height: 2.3rem; letter-spacing: -0.02rem;} .listedit_guide_contents .certificate_list ul li a dl dd.date {font-size: 1.2rem; font-family: "Roboto", sans-serif; font-weight: 500;} .listedit_guide_contents .certificate_list ul li a .icolist {display: table-cell; width: 2rem; height: 1.2rem; vertical-align: middle;} /* 손가락 안내 아이콘 */ .listedit_guide_contents .certificate_list .fingertouch {position: absolute; width: 100%; bottom: 0; left: 0; text-align: right;} .listedit_guide_contents .certificate_list .fingertouch .fingerguide {position: relative; display: inline-block; width: 5.3rem; height: 5.3rem; text-align: center; padding-top: 1.125rem; background: #fff; border-radius: 50%; box-shadow: 0px 4px 20px rgba(0,0,0,0.5);} .listedit_guide_contents .certificate_list .fingertouch .fingerguide .ico_finger {display: inline-block; width: 2.7rem; height: 3.1rem;} .listedit_guide_contents .certificate_list .fingertouch .fingerguide .ico_finger:after {position: absolute; content: ""; top: -1.1rem; left: -1.1rem; width: 7.5rem; height: 7.5rem; background: rgba(255,255,255,0.3); border-radius: 50%;} .listedit_guide_contents .certificate_list .fingertouch p {display: inline-block; width: 100%; font-size: 1.4rem; color: #fff; font-weight: 400; line-height: 2rem; letter-spacing: -0.02rem; margin-top: 2.3rem;} /* 열지 않기 input label */ .listedit_guide_contents .seecheck {float: left; width: 100%; text-align: center; margin-top: 4rem;} .listedit_guide_contents .seecheck input.lookcheck {opacity: 0; position: absolute;} /* input 없애기 */ .listedit_guide_contents .seecheck .checkbox-label {position: relative; font-size: 1.4rem; color: rgba(255,255,255,0.5); font-weight: 500; letter-spacing: -0.02rem;} .listedit_guide_contents .seecheck input.lookcheck + .checkbox-label:before {display: inline-block; width: 1.8rem; height: 1.8rem; content: ''; margin-right: 0.5rem; text-align: center; background: url("../images/ico_seecheck_off.svg") no-repeat center; background-size: 1.4rem 1.4rem; vertical-align: -0.3rem;} /* input label 롤오버 */ .listedit_guide_contents .seecheck input.lookcheck:checked + .checkbox-label {color: rgba(255,255,255,1);} .listedit_guide_contents .seecheck input.lookcheck:checked + .checkbox-label:before {background: url("../images/ico_seecheck_on.svg") no-repeat center 68%; background-size: 1.3rem 1.3rem;} .listedit_guide_contents .btnclose {float: left; width: 100%; text-align: center; margin-top: 4.9rem; margin-bottom: 4.1rem;} .listedit_guide_contents .btnclose a.x_close {display: inline-block; width: 3rem; height: 2.9rem;} /* APPMYW0601 사용정지 안내 */ .suspenduse_title {float: left; width: 100%; padding: 7rem 5.5556% /*20px*/ 0;} .suspenduse_title .usetxtbox {float: left; width: 100%;} .suspenduse_title .usetxtbox span {font-size: 2.4rem; color: #333; font-weight: bold; line-height: 3.3rem; letter-spacing: -0.05rem;} .certifyissue_box {float: left; width: 100%; padding: 0 2rem;} .certifyissue_contents {float: left; width: 100%; padding: 2.5rem 0; margin-top: 4rem; border-top: 1px solid #333; border-bottom: 1px solid #ddd;} .stopinfo_list {float: left; width: 100%;} .stopinfo_list ul li {float: left; width: 100%; margin-bottom: 1.5rem;} .stopinfo_list ul li:last-child {margin-bottom: 0;} .stopinfo_list ul li .left {float: left; width: 20%;} .stopinfo_list ul li .left span {font-size: 1.4rem; color: #999; font-weight: 500; line-height: 2rem; letter-spacing: -0.04rem;} .stopinfo_list ul li .right {float: right; width: 76%; text-align: right;} .stopinfo_list ul li .right span {font-size: 1.4rem; color: #333; font-weight: 400; line-height: 2rem; letter-spacing: -0.05rem; word-break: keep-all;} .stopinfo_list ul li .right span.number {font-family: "Roboto", sans-serif; font-size: 1.5rem; font-weight: 500;} .limitnote_box {float: left; width: 100%; padding: 0 5.5556%;} .limitnote_contents {float: left; width: 100%; margin-top: 2.8rem;} .limitnote_contents .tittxt {float: left; width: 100%;} .limitnote_contents .tittxt span {display: inline-block; width: 1.8rem; height: 1.8rem; margin-right: 0.3rem;} .limitnote_contents .tittxt p {display: inline-block; width: 90%; font-size: 1.3rem; color: #333; font-weight: 400; line-height: 2rem; letter-spacing: -0.04rem; vertical-align: -0.25rem;} .limitnote_contents .limit_service {float: left; width: 100%; padding-left: 2.5rem; margin-top: 1.8rem;} .limitnote_contents .limit_service li {float: left; margin-right: 2rem;} .limitnote_contents .limit_service li span {float: left; width: 0.3rem; height: 0.3rem; margin-top: 1.1rem; margin-right: 5px; background: #bbb;} .limitnote_contents .limit_service li p {float: left; font-size: 1.35rem; color: #333; font-weight: 500; line-height: 2.2rem; letter-spacing: -0.05rem;} .limitnote_contents .limit_process {float: left; width: 100%; padding-left: 2.5rem; margin-top: 1.1rem;} .limitnote_contents .limit_process p {font-size: 1.35rem; color: #666; font-weight: 300; line-height: 2rem; letter-spacing: -0.05rem; word-break: keep-all;} /* APPMYW0702 인증서 재발급 완료 */ .issuecomplete_box {float: left; width: 100%;} .issuecomplete_box .titlebox {float: left; width: 100%; text-align: center; margin-top: 12.5rem;} .issuecomplete_box .titlebox span {display: inline-block; font-size: 2.1rem; color: #333; font-weight: bold; line-height: 3.3rem; letter-spacing: -0.05rem; margin-bottom: 1.5rem;} .issuecomplete_box .titlebox p {font-size: 1.5rem; color: #666; font-weight: 400; line-height: 2.4rem; letter-spacing: -0.05rem;} .issuecomplete_box .issuemypurse {float: left; width: 100%; text-align: center; margin-top: 5rem;} .issuecomplete_box .issuemypurse .icofolder {display: inline-block; width: 100%;} .issuecomplete_box .issuemypurse .icofolder .ico {display: inline-block; width: 9.6rem; height: 5.5rem; margin-left: 4rem;} .issuecomplete_box .issuemypurse .certifyname {display: inline-block; width: 10.3rem; height: 2.4rem; margin-top: 1.306rem; background: #f1f1f1; border-radius: 5rem;} .issuecomplete_box .issuemypurse .certifyname span {font-size: 1.1rem; color: #888; font-weight: 500; line-height: 2.3rem; letter-spacing: -0.05rem;} /* APPMYW0801 인증서 폐기 안내 */ .popupscrapcontents {position: fixed; top: 50%; left: 50%; width: 83.3334% /*300px*/; margin: 0; transform: translate(-50%, -50%);} .popupscrapcontents .popup_wrap {display: block; width: 100%; height: auto; min-height: 15.1rem; text-align: center; padding: 10% 6.6667% /*20px*/ 0; background: #fff; border-radius: 10px 10px 0 0; overflow: auto;} .issuescrap_pop h3 {font-family : "Noto Sans KR", sans-serif; font-size: 2rem; color: #333; font-weight: bold; line-height: 2.9rem; letter-spacing: -0.05rem;} .issuescrap_pop p {display: inline-block; width: 100%; font-size: 1.4rem; color: #333; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.07rem; margin-top: 1.5rem;} .popupscrapcontents .popclose {display: block; bottom: 0; width: 100%; height: 5rem /*50px*/; background: #1c85eb; border-radius: 0 0 10px 10px;} .popupscrapcontents .popclose button {display: inline-block; width: 100%; text-align: center; font-size: 1.9rem; color: #fff; font-weight: 500; line-height: 5rem;} /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** 작업일정순(5차) 210903 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* APPMYD0101 활용서비스 목록 */ /* 마이데이터 상단 타이틀, 알림 */ .mydataaside_box {float: left; width: 100%; padding: 0 5.5556%;} .mydataaside_box .title {float: left; margin-top: 2.5rem;} .mydataaside_box .title span {display: inline-block; font-size: 2.4rem; color: #333; font-weight: bold; line-height: 3.5rem; letter-spacing: -0.05rem;} .mydataaside_box .rightcheck {float: right;} .mydataaside_box .rightcheck .icobell {position: relative; float: left; width: 2.3rem; height: 2.53rem; margin-top: 3rem;} .mydataaside_box .rightcheck .icobell a {display: block; width: 100%; height: 100%;} .mydataaside_box .rightcheck .icobell .point {position: absolute; top: 0.2rem; right: 0; width: 0.805rem; height: 0.825rem; background: #FF611D; border-radius: 50%;} /* 마이데이터 메뉴 */ .mydata_menu {float: left; width: 100%; padding: 0 5.5556%; margin-top: 2.8rem;} .mydata_menu ul {float: left; width: 100%;} .mydata_menu ul li {float: left; margin-right: 1.6rem;} .mydata_menu ul li a {display: inline-block; width: 100%; height: 100%; font-size: 1.7rem; color: #999; font-weight: bold; line-height: 1.8rem; letter-spacing: -0.02rem; padding: 0 0.2rem 1rem; border-bottom: 1px solid rgba(51,51,51,0);} .mydata_menu ul li.on a {color: #333; border-bottom: 1px solid rgba(51,51,51,1);} .mydatascreen_box {float: left; width: 100%; padding: 0 5.5556%; margin-top: 4.4rem;} .mydatascreen_box .visual {float: left; width: 100%; height: 11.6rem;} .mydatascreen_box .visual_01 {background: url("../images/mydata_visual_ico1.svg") no-repeat 95% bottom; background-size: 7.9rem 6.7rem;} .mydatascreen_box .visual_02 {height: 12rem; background: url("../images/mydata_visual_ico2.svg") no-repeat right bottom; background-size: 9.3rem 8.9rem;} .mydatascreen_box .visual_03 {height: 13.2rem; background: url("../images/mydata_visual_ico3.svg") no-repeat 96% bottom; background-size: 8.5rem 9.7rem;} .mydatascreen_box .visual h3 {font-family : "Noto Sans KR", sans-serif; font-size: 2rem; color: #333; font-weight: bold; line-height: 3rem; letter-spacing: -0.02rem;} .mydatascreen_box .visual p{font-size:1.4rem; margin-bottom:1rem;} .sortcases_box {float: left; width: 100%; padding: 0 5.5556%; margin-top: 5rem;} .sortcases_area {float: left; width: 100%;} .sortcases_area .left {float: left;} .sortcases_area .left div.tit {font-size: 1.4rem; color: #333; font-weight: 500; line-height: 1.9rem; letter-spacing: -0.02rem;} .sortcases_area .left div.tit span.number {font-family: "Roboto", sans-serif; font-size: 1.5rem; color: #1c85e8;} .sortcases_area .right {float: right; margin-top: -0.15rem;} .sortcases_area .right .typegroup_1 {float: left; margin-right: 2rem;} .sortcases_area .right .typegroup_1 a {display: inline-block; font-size: 1.4rem !important; color: #333; font-weight: 500; line-height: 1.9rem; letter-spacing: -0.02rem;} .sortcases_area .right .typegroup_1 a span {float: left;} .sortcases_area .right .typegroup_1 a i {float: left; width: 1rem; height: 0.6rem; margin-top: 0.7rem; margin-left: 1rem;} .sortcases_area .right .typegroup_2 {float: left;} .sortcases_area .right .typegroup_2 a {display: inline-block; font-size: 1.4rem !important; color: #333; font-weight: 500; line-height: 1.9rem; letter-spacing: -0.02rem;} .sortcases_area .right .typegroup_2 a span {float: left;} .sortcases_area .right .typegroup_2 a i {float: left; width: 1rem; height: 0.6rem; margin-top: 0.7rem; margin-left: 1rem;} /* 크롬, ie10, ie11 셀렉트박스 삭제*/ .selectstyle {-webkit-appearance: none; width: 100%; height: 1.9rem; font-family : "Noto Sans KR", sans-serif; font-size: 1.4rem !important; color: #333; font-weight: 500; line-height: 1.9rem; letter-spacing: -0.02rem; background: #fff url(../images/ico_select_arrow.svg) no-repeat right center; border: none; outline: none;} .selectstyle::-ms-expand {display:none; /* hide the default arrow in ie10 and ie11 */} /* 활용서비스 배너 */ .servicezone {float: left; width: 100%; padding: 0 5.5556% 15.7rem; margin-top: 2rem; background: #fff;} .servicezone .banneritem {float: left; width: 100%; height: 12rem; border-radius: 1rem;} .servicezone .banneritem a {position: relative; display: table; width: 100%; height: 100%;} .servicezone .banneritem a div.iteminfo {display: table-cell; padding: 0 2.5rem; vertical-align: middle;} .servicezone .banneritem a div.iteminfo span.tit {display: inline-block; font-size: 1.8rem; color: #fff; font-weight: bold; line-height: 1.9rem; letter-spacing: -0.02rem; margin-bottom: 1rem;} .servicezone .banneritem a div.iteminfo p {font-size: 1.4rem; color: #fff; font-weight: 400; line-height: 1.5rem; letter-spacing: -0.02rem;} .servicezone .banneritem a div.iteminfo .approve {position: absolute; top: 1.5rem; right: 1.5rem; width: 5.8rem; height: 2.3rem; text-align: center; background: rgba(0,0,0,0.8); border: 1px solid rgba(0,0,0,0.8); border-radius: 0.4rem;} .servicezone .banneritem a div.iteminfo .approve span {font-size: 1.2rem; color: #20ffaf; font-weight: 500; line-height: 2rem; letter-spacing: -0.02rem;} .servicezone .banneritem a div.iteminfo .approve_off {position: absolute; top: 1.5rem; right: 1.5rem; width: 5.8rem; height: 2.3rem; text-align: center; background: rgba(121,121,121,0.5); border: 1px solid rgba(255,255,255,0.5); border-radius: 0.4rem;} .servicezone .banneritem a div.iteminfo .approve_off span {font-size: 1.2rem; color: #fff; font-weight: 500; line-height: 2rem; letter-spacing: -0.02rem;} .servicezone .item01 {margin-bottom: 1.5rem; background: url("../images/bannitem01_patton.svg") no-repeat left top; background-size: 100%;} .servicezone .item02 {margin-bottom: 1.5rem; background: url("../images/bannitem02_patton.svg") no-repeat left top; background-size: 100%;} .servicezone .item03 {background: url("../images/bannitem03_patton.svg") no-repeat left top; background-size: 100%;} /* 하단 GNB */ .footgnb_box {position: fixed; bottom: 0; left: 0; width: 100%; height: 7.7rem; background: url("../images/gnb_bg.svg") no-repeat center top; background-size: 100%; z-index: 20;} .footgnb {float: left; width: 100%;} .footgnb .left {float: left; padding-top: 1.5rem; margin-top: 1rem;} .footgnb .left li a {display: block; width: 100%; font-size: 1.2rem; color: #666; font-weight: 400; line-height: 1.2rem; letter-spacing: -0.05rem; text-align: center;} .footgnb .left li.home {float: left; width: 2.2rem; height: 3.3rem; margin-left: 2.6rem;} .footgnb .left li.home a i {display: inline-block; width: 1.8rem; height: 2rem;} .footgnb .left li.home a.on {color: #333; font-weight: 500;} .footgnb .left li.home a span {display: inline-block; width: 100%; margin-top: 0.8rem;} .footgnb .left li.milipay {float: left; width: 4.5rem; height: 3rem; margin-left: 4.3rem;} .footgnb .left li.milipay a {color: #666; font-weight: 400;} .footgnb .left li.milipay a i {display: inline-block; width: 2.7rem; height: 2rem; padding-top: 0.3rem;} .footgnb .left li.milipay a span {display: inline-block; width: 100%; margin-top: 0.8rem;} .footgnb .right {float: right; padding-top: 1.5rem; margin-top: 1rem;} .footgnb .right li a {display: block; width: 100%; font-size: 1.2rem; color: #666; font-weight: 400; line-height: 1.2rem; letter-spacing: -0.05rem; text-align: center;} .footgnb .right li.mydata {float: left; width: 5.5rem; height: 3.3rem; margin-right: 3.6rem;} .footgnb .right li.mydata a.on {color: #333; font-weight: 500;} .footgnb .right li.mydata a i {display: inline-block; width: 2.2rem; height: 2rem;} .footgnb .right li.mydata a span {display: inline-block; width: 100%; margin-top: 0.8rem;} .footgnb .right li.more {float: left; width: 3.5rem; height: 2.6rem; margin-right: 2.2rem;} .footgnb .right li.more a i {display: inline-block; width: 2.6rem; height: 2rem; padding-top: 0.74rem;} .footgnb .right li.more a span {display: inline-block; width: 100%; margin-top: 0.8rem;} /* 하단 GNB 내지갑 */ .mypurse {position: absolute; top: 0; left: 50%; width: 5.6rem; height: 5.6rem; text-align: center; margin-left: -2.8rem; background: #2c333a; border-radius: 50%; box-shadow: 0px 4px 8px rgba(0,0,0,0.2);} .mypurse a {display: table; width: 100%; height: 100%;} .mypurse span {display: table-cell; vertical-align: middle;} .mypurse span img {display: inline-block; width: 2.709rem; height: 2.567rem; margin-left: 0.2rem;} /* APPMYD0201 활용서비스 상세 활용 미동의 */ .aside_dataservice {position: relative; width: 100%; height: auto; padding: 5% 5.5556% 0; z-index: 100000;} .aside_dataservice .left {float: left; width: 1.4rem; height: 2.4rem;} .serviceagree_title {position: absolute; top: 0; left: 0; float: left; width: 100%; height: 23.7rem;} .agreedetail_top {float: left; width: 100%; height: 23.7rem; padding-top: 7.5rem; background: #2958b8 url("../images/agreedetail_bg.svg") no-repeat center top; background-size: 100% 100%;} .agreedetail_contents {float: left; width: 100%; text-align: center;} .agreedetail_contents h3 {display: inline-block; width: 100%; font-size: 2.6rem; color: #fff; font-weight: bold; line-height: 3rem; letter-spacing: -0.05rem; margin-bottom: 1.5rem;} .agreedetail_contents span {font-size: 1.7rem; color: #fff; font-weight: 400; line-height: 2.5rem; letter-spacing: -0.05rem;} .agreedetail_contents a {display: inline-block; width: 100%; font-size: 1.3rem; color: #fff; font-weight: 400; line-height: 1.9rem; letter-spacing: -0.05rem; margin-top: 3.8rem; text-decoration: underline;} .agreedetail_contents a i {display: inline-block; width: 0.5rem; height: 0.9rem; margin-left: 0.7rem; vertical-align: -0.5rem;} .serviceagree_contens {float: left; width: 100%; padding: 0 5.5556%; margin-top: 23.5rem;} .serviceagree_contens .guide_tit {float: left; width: 100%; text-align: center;} .serviceagree_contens .guide_tit p {font-size: 1.4rem; color: #333; font-weight: 500; line-height: 2.4rem; letter-spacing: -0.05rem;} .serviceagree_contens .agreecheck_form {float: left; width: 100%; padding-bottom: 14rem; margin-top: 4rem;} .serviceagree_contens .agreecheck_form .btnallcheck {display: block; width: 100%; height: 5.5rem; text-align: center; background: #eee; border-radius: 0.6rem;} .serviceagree_contens .agreecheck_form .btnallcheck span {font-size: 1.6rem; color: #333; font-weight: 500; line-height: 5.3rem; letter-spacing: -0.03rem;} .agreecheck_form .compulsoryagree {float: left; width: 100%;} .agreecheck_form .compulsoryagree .compulsoryagree_tit {float: left; width: 100%; margin-top: 3rem;} .agreecheck_form .compulsoryagree .compulsoryagree_tit2 {margin-top: 4rem;} .agreecheck_form .compulsoryagree .compulsoryagree_tit .ico {float: left; width: 1.7rem; height: 1.3rem; margin-top: 0.2rem; margin-right: 0.5rem;} .agreecheck_form .compulsoryagree .compulsoryagree_tit .txtbox {float: left; width: 90%;} .agreecheck_form .compulsoryagree .compulsoryagree_tit .txtbox span {display: inline-block; font-size: 1.6rem; color: #1c85e8; font-weight: bold; line-height: 1.6rem; letter-spacing: -0.03rem; margin-bottom: 0.8rem;} .agreecheck_form .compulsoryagree .compulsoryagree_tit .txtbox p {display: inline-block; width: 100%; font-size: 1.3rem; color: #333; font-weight: 400; line-height: 2rem; letter-spacing: -0.03rem;} .agreecheck_form .compulsoryagree .compulsoryagree_tit .txtbox2 span {color: #FF611D;} /* 체크박스 스타일 적용 */ .agreecheck_form .agreecheck_box {position: relative; float: left; width: 100%; height: auto; min-height: 13.8rem; padding: 2rem 1.7rem; margin-top: 2.5rem; border: 1px solid #ddd; border-radius: 1rem;} .agreecheck_form .agreecheck_box input.privacyinput {display: none;} .agreecheck_form .agreecheck_box input.privacyinput + label {display: inline-block;} .agreecheck_form .agreecheck_box input.privacyinput + label i {display: inline-block; width: 2.4rem; height: 2.4rem; margin-right: 1rem; border: 1px solid #ddd; border-radius: 0.4rem; vertical-align: middle;} .agreecheck_form .agreecheck_box input.privacyinput + label span {display: inline-block; font-size: 1.45rem; color: #333; font-weight: 500; line-height: 2.4rem; letter-spacing: -0.04rem; vertical-align: -0.35rem;} .agreecheck_form .agreecheck_box input.privacyinput:checked + label i {border: 1px solid #1c85e8; background: #1c85e8 url("../images/privacycheck_on.svg") center no-repeat; background-size: 1.3rem 1rem;} .agreecheck_form .agreecheck_box input.privacyinput2:checked + label i {border: 1px solid #FF611D; background: #FF611D url("../images/privacycheck_on.svg") center no-repeat; background-size: 1.3rem 1rem;} .agreecheck_form .agreecheck_box .detailview {position: absolute; top: 6.163rem; right: 2.221rem; width: 1rem; height: 1.7rem;} .agreecheck_form .agreecheck_box .coupontxt {float: left; width: 100%; padding-left: 3.4rem; margin-top: 0.5rem;} .agreecheck_form .agreecheck_box .coupontxt p {font-size: 1.3rem; color: #666; font-weight: 400; line-height: 2rem; letter-spacing: -0.03rem;} /* notedata 활용데이터 펼침 */ .notedata_box {float: left; width: 100%; height: auto; min-height: 2rem; padding: 0 1.7rem 0 3.4rem; margin-top: 1rem;} .notedata_box .notepop_title {float: left; width: 100%;} .notedata_box .notepop_title .usedatstit {float: left;} .notedata_box .notepop_title .usedatstit span {float: left; font-size: 1.2rem; color: #999; font-weight: 500; line-height: 2rem; letter-spacing: -0.03rem;} .notedata_box .notepop_title .usedatstit div.btnarrow {float: left; width: 1rem; height: 0.6rem; margin-top: 0.75rem; margin-left: 0.5rem;} .notedata_box .notepop_contents {float: left; width: 100%; height: auto; display: none;} .notedata_box .notepop_contents p {font-size: 1.2rem; color: #333; font-weight: 400; line-height: 1.9rem; letter-spacing: -0.03rem;} /* 선택동의 체크박스 */ .agreecheck_form .agreecheck_select_box {position: relative; float: left; width: 100%; height: auto; min-height: 13.8rem; margin-top: 2.5rem; border: 1px solid #ddd; border-radius: 1rem;} .agreecheck_form .agreecheck_select_box .agreeselect {float: left; width: 100%; padding: 2rem 1.7rem;} .agreecheck_form .agreecheck_select_box .agreeselect input.privacyinput {display: none;} .agreecheck_form .agreecheck_select_box .agreeselect input.privacyinput + label {display: inline-block;} .agreecheck_form .agreecheck_select_box .agreeselect input.privacyinput + label i {display: inline-block; width: 2.4rem; height: 2.4rem; margin-right: 1rem; border: 1px solid #ddd; border-radius: 0.4rem; vertical-align: middle;} .agreecheck_form .agreecheck_select_box .agreeselect input.privacyinput + label span {display: inline-block; font-size: 1.45rem; color: #333; font-weight: 500; line-height: 2.4rem; letter-spacing: -0.04rem; vertical-align: -0.35rem;} .agreecheck_form .agreecheck_select_box .agreeselect input.privacyinput:checked + label i {border: 1px solid #FF611D; background: #FF611D url("../images/privacycheck_on.svg") center no-repeat; background-size: 1.3rem 1rem;} .agreecheck_form .agreecheck_select_box .detailview {position: absolute; top: 4.463rem; right: 2.221rem; width: 1rem; height: 1.7rem;} .agreecheck_info {float: left; width: 100%; border-top: 1px solid #ddd;} .agreecheck_form .agreecheck_select_box .agreeselect .coupontxt {float: left; width: 100%; padding-left: 3.4rem; margin-top: 0.5rem;} .agreecheck_form .agreecheck_select_box .agreeselect .coupontxt p {font-size: 1.3rem; color: #666; font-weight: 400; line-height: 2rem; letter-spacing: -0.03rem;} /* 선택동의 2차 체크박스 */ .agreecheck_form .agreecheck_select_box .agreecheck_info {float: left; width: 100%; padding: 2rem 0 2rem 5.1rem;} .agreecheck_info .checklist {float: left; width: 100%; margin-bottom: 2rem;} .agreecheck_info .checklist:last-child {margin-bottom: 0;} .agreecheck_info .checklist input.privacyinput {display: none;} .agreecheck_info .checklist input.privacyinput + label {display: inline-block;} .agreecheck_info .checklist input.privacyinput + label i {display: inline-block; width: 2.4rem; height: 2.4rem; margin-right: 1rem; border: 1px solid #ddd; border-radius: 0.4rem; vertical-align: middle;} .agreecheck_info .checklist input.privacyinput + label span {display: inline-block; font-size: 1.45rem; color: #333; font-weight: 500; line-height: 2.4rem; letter-spacing: -0.04rem; vertical-align: -0.35rem;} .agreecheck_info .checklist input.privacyinput:checked + label i {border: 1px solid #FF611D; background: #FF611D url("../images/privacycheck_on.svg") center no-repeat; background-size: 1.3rem 1rem;} .agreecheck_info .checklist i {display: inline-block; width: 1.5rem; height: 1.5rem; margin-left: 0.5rem; vertical-align: -0.2rem;} /* 선택동의 notedata 활용데이터 펼침 */ .notedatainfo_box {float: left; width: 100%; height: auto; min-height: 2rem; padding: 0 1.7rem 0 3.5rem; margin-top: 0.5rem;} .notedatainfo_box .notepop_title {float: left; width: 100%;} .notedatainfo_box .notepop_title .usedatstit1 {float: left;} .notedatainfo_box .notepop_title .usedatstit1 span {float: left; font-size: 1.2rem; color: #999; font-weight: 500; line-height: 2rem; letter-spacing: -0.03rem;} .notedatainfo_box .notepop_title .usedatstit1 div.btnarrow {float: left; width: 1rem; height: 0.6rem; margin-top: 0.75rem; margin-left: 0.5rem;} .notedatainfo_box .notepop_title .usedatstit2 {float: left;} .notedatainfo_box .notepop_title .usedatstit2 span {float: left; font-size: 1.2rem; color: #999; font-weight: 500; line-height: 2rem; letter-spacing: -0.03rem;} .notedatainfo_box .notepop_title .usedatstit2 div.btnarrow {float: left; width: 1rem; height: 0.6rem; margin-top: 0.75rem; margin-left: 0.5rem;} .notedatainfo_box .notepop_title .usedatstit3 {float: left;} .notedatainfo_box .notepop_title .usedatstit3 span {float: left; font-size: 1.2rem; color: #999; font-weight: 500; line-height: 2rem; letter-spacing: -0.03rem;} .notedatainfo_box .notepop_title .usedatstit3 div.btnarrow {float: left; width: 1rem; height: 0.6rem; margin-top: 0.75rem; margin-left: 0.5rem;} .notedatainfo_box .notepopselect_contents1 {float: left; width: 100%; height: auto; display: none;} .notedatainfo_box .notepopselect_contents1 p {font-size: 1.2rem; color: #333; font-weight: 400; line-height: 1.9rem; letter-spacing: -0.03rem;} .notedatainfo_box .notepopselect_contents2 {float: left; width: 100%; height: auto; display: none;} .notedatainfo_box .notepopselect_contents2 p {font-size: 1.2rem; color: #333; font-weight: 400; line-height: 1.9rem; letter-spacing: -0.03rem;} .notedatainfo_box .notepopselect_contents3 {float: left; width: 100%; height: auto; display: none;} .notedatainfo_box .notepopselect_contents3 p {font-size: 1.2rem; color: #333; font-weight: 400; line-height: 1.9rem; letter-spacing: -0.03rem;} .agreecheck_form .warning {float: left; width: 100%; margin-top: 2rem;} .agreecheck_form .warning i {float: left; width: 1.5rem; height: 1.5rem; margin-top: 0.3rem; margin-right: 0.7rem;} .agreecheck_form .warning p {float: left; width: 90%; font-size: 1.3rem; color: #FF611D; font-weight: 500; line-height: 2rem; letter-spacing: -0.05rem;} /* 하단고정 회색 버튼 */ .footfix_off_box {background: #ddd;} .footfix_off_box a {color: #666; font-weight: 500;} /* APPMYD0401 다운로드 조건 설정 */ .download_box {float: left; width: 100%; padding: 0 5.5556% 15.7rem; margin-top: 5rem;} .periodselect_box {float: left; width: 100%;} .periodselect_box h3 {display: inline-block; font-family : "Noto Sans KR", sans-serif; font-size: 1.45rem; color: #333; font-weight: bold; line-height: 2rem; letter-spacing: -0.02rem; margin-bottom: 1.1rem;} .periodselect_box .timeselect_list {float: left; width: 100%; padding: 1.4rem 1.035rem; border: 1px solid #ddd; border-radius: 0.8rem;} .periodselect_box .timeselect_list .radio_type {float: left; width: 25%; padding: 0 0.365rem;} .periodselect_box .timeselect_list input.radio_imgtype {display: none;} .periodselect_box .timeselect_list input.radio_imgtype + label {float: left; width: 100%; height: 3.4rem; font-family: "Noto Sans KR", sans-serif; font-size: 1.4rem; color: #999; font-weight: 500; line-height: 3.2rem; letter-spacing: -0.04rem; text-align: center; background: #f1f1f1; border-radius: 0.4rem; cursor: pointer;} .periodselect_box .timeselect_list input.radio_imgtype:checked + label {color: #fff; font-weight: 500; background: #1c85e8;} .datascope_box {float: left; width: 100%; margin-top: 3.5rem;} .datascope_box h3 {display: inline-block; font-family : "Noto Sans KR", sans-serif; font-size: 1.45rem; color: #333; font-weight: bold; line-height: 2rem; letter-spacing: -0.02rem; margin-bottom: 1.1rem;} .datascope_box .datascope_list {float: left; width: 100%; padding: 1.8rem 2rem; border: 1px solid #ddd; border-radius: 0.8rem;} /* 데이터 범위 라디오버튼 스타일 적용 */ .datascope_box .datascope_list input.basicradio {opacity: 0; position: absolute;} .datascope_box .datascope_list input.basicradio, .radiobox-label {display: inline-block; vertical-align: middle; cursor: pointer;} .radiobox-label {position: relative; width: 49%; font-size: 1.4rem; font-weight: 400; letter-spacing: -0.02rem;} .datascope_box .datascope_list input.basicradio + .radiobox-label:before {display: inline-block; width: 2.4rem; height: 2.4rem; content: ''; padding: 0.5rem; margin-right: 1rem; text-align: center; vertical-align: -0.7rem; background: #e0ebf7; border: 1px solid #e0ebf7; border-radius: 50%;} .datascope_box .datascope_list input.basicradio:checked + .radiobox-label:before {background: #1c85e8; border: 1px solid #1c85e8; box-shadow: inset 0px 0px 0px 4px #fff;} /* 데이터 범위 체크박스 스타일 적용 */ .datascope_box .datascope_list input.inputdata {opacity: 0; position: absolute;} .datascope_box .datascope_list input.inputdata, .downloadbox-label {display: inline-block; margin: 1rem 0; vertical-align: middle; cursor: pointer;} .downloadbox-label {position: relative; width: 49%; font-size: 1.4rem; letter-spacing: -0.02rem;} .datascope_box .datascope_list input.inputdata + .downloadbox-label:before {display: inline-block; width: 2.4rem; height: 2.4rem; content: ''; margin-right: 1rem; text-align: center; vertical-align: -0.7rem; background: #ddd url("../images/ico_datacheck.svg") no-repeat center 34%; background-size: 1.5rem 1.4rem; border-radius: 0.2rem;} .datascope_box .datascope_list input.inputdata:checked + .downloadbox-label:before {background: #333 url("../images/ico_datacheck.svg") no-repeat center 34%; background-size: 1.5rem 1.4rem;} .filetype_box {float: left; width: 100%; margin-top: 3.5rem;} .filetype_box h3 {display: inline-block; font-family : "Noto Sans KR", sans-serif; font-size: 1.45rem; color: #333; font-weight: bold; line-height: 2rem; letter-spacing: -0.02rem; margin-bottom: 1.1rem;} .filetype_box .filetype_list {float: left; width: 100%; padding: 0.5rem 2rem; border: 1px solid #ddd; border-radius: 0.8rem;} /* 파일형식 체크박스 스타일 적용 */ .filetype_box .filetype_list input.inputdata {opacity: 0; position: absolute;} .filetype_box .filetype_list input.inputdata, .filetype-label {display: inline-block; margin: 1rem 0; vertical-align: middle; cursor: pointer;} .filetype-label {position: relative; width: 49%; font-size: 1.4rem; letter-spacing: -0.02rem;} .filetype_box .filetype_list input.inputdata + .filetype-label:before {display: inline-block; width: 2.4rem; height: 2.4rem; content: ''; margin-right: 1rem; text-align: center; vertical-align: -0.7rem; background: #ddd url("../images/ico_datacheck.svg") no-repeat center 34%; background-size: 1.5rem 1.4rem; border-radius: 0.2rem;} .filetype_box .filetype_list input.inputdata:checked + .filetype-label:before {background: #333 url("../images/ico_datacheck.svg") no-repeat center 34%; background-size: 1.5rem 1.4rem;} .btns_download {float: left; width: 100%; text-align: center; margin-top: 2.5rem;} .btns_download a {display: inline-block; width: 13rem; height: 4rem; font-size: 1.5rem; color: #333; font-weight: 500; line-height: 3.8rem; letter-spacing: -0.02rem; border: 1px solid #333; border-radius: 5rem;} .btns_download a i {display: inline-block; width: 1.2rem; height: 1.3rem; margin-right: 0.5rem; vertical-align: -1.28rem;} /* 기간 선택 상세기간 설정 */ .datailtime_box {float: left; width: 100%; text-align: center; font-size: 1.8rem; color: #bbb; font-weight: 400; letter-spacing: -0.02rem; line-height: 4.5rem; padding: 0 0.365rem; margin-top: 1.5rem;} .datailtime_box .left {position: relative; float: left; width: 46%;} .datailtime_box .left input.calendarinput_start {display: inline-block; width: 100%; height: 4.5rem; font-family: "Roboto", sans-serif; font-size: 1.5rem; color: #333; font-weight: 500; line-height: 4.4rem; padding: 1rem 1.5rem; background: #f1f1f1; border: 0; border-radius: 0.4rem;} .datailtime_box .left .icocalendar_on {position: absolute; top: 1.6rem; right: 1.4rem; display: inline-block; width: 1.2rem; height: 1.4rem;} .datailtime_box .right {position: relative; float: right; width: 46%;} .datailtime_box .right input.calendarinput_end {display: inline-block; width: 100%; height: 4.5rem; font-family: "Roboto", sans-serif; font-size: 1.5rem; color: #333; font-weight: 500; line-height: 4.4rem; padding: 1rem 1.5rem; background: #f1f1f1; border: 0; border-radius: 0.4rem;} .datailtime_box .right .icocalendar_off {position: absolute; top: 1.6rem; right: 1.4rem; display: inline-block; width: 1.2rem; height: 1.4rem;} /* calendarinput_end placeholder 설정 */ .datailtime_box input.calendarinput_start::-webkit-input-placeholder {font-family: "Roboto", sans-serif; font-size: 1.5rem; color: #333; font-weight: 500; letter-spacing: -0.02rem;} .datailtime_box input.calendarinput_start::placeholder {font-family: "Roboto", sans-serif; font-size: 1.5rem; color: #333; font-weight: 500; letter-spacing: -0.02rem;} .datailtime_box input.calendarinput_end::-webkit-input-placeholder {font-family: "Roboto", sans-serif; font-size: 1.5rem; color: #bbb; font-weight: 500; letter-spacing: -0.02rem;} .datailtime_box input.calendarinput_end::placeholder {font-family: "Roboto", sans-serif; font-size: 1.5rem; color: #bbb; font-weight: 500; letter-spacing: -0.02rem;} /* 마이데이터 달력팝업 */ .calendarcontents_pop {position: fixed; top: 50%; left: 50%; width: 88.8889% /*320px*/; margin: 0; transform: translate(-50%, -50%);} .calendarcontents_pop .calendar_wrap {display: block; width: 100%; height: auto; min-height: 41.5rem; text-align: center; background: #fff; border-radius: 1rem; overflow: auto;} .calendar_wrap .carddays_head {float: left; width: 100%; text-align: center; padding: 0 2.2rem; margin-top: 2.9rem;} .calendar_wrap .carddays_head .left {float: left; width: 0.9rem; height: 1.6rem;} .calendar_wrap .carddays_head h3 {display: inline-block; font-family: "Roboto", sans-serif; font-size: 2.2rem; color: #333; font-weight: 500; line-height: 2rem; letter-spacing: -0.03rem; margin-top: -0.25rem;} .calendar_wrap .carddays_head .right {float: right; width: 0.9rem; height: 1.6rem;} /* 달력 날짜 선택*/ .calendar_wrap .carddays_select{padding:1.5rem 2.2rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem; background:#f5f5f5; border-bottom:1px solid #eee; } .calendar_wrap .carddays_select .picDay{line-height:2.2rem;font-size:1.6rem; font-weight:600; font-family: "Roboto","Noto Sans KR", sans-serif;} .calendar_wrap .carddays_select .picNum{height:2.4rem; line-height:2.4rem; padding:0 5px; font-size:1.4rem; font-weight:400; font-family: "Roboto", sans-serif; background:#fff; color:#2372E1; text-align:center; border-radius:4px; box-shadow:0 0 5px rgba(35,114,225,0.15);} /* 달력테이블 */ .calendar_box {float: left; width: 100%; padding: 0 1rem; margin-top: 2.1rem;} .calendar_box .calendar_table {float: left; width: 100%;} .calendar_box .calendar_table caption {position: absolute; overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0;} .calendar_box .calendar_table thead th {height: 4rem; font-family: "Roboto", sans-serif; font-size: 1.3rem; color: #999; font-weight: 500; line-height: 3.8rem; letter-spacing: -0.02rem;} .calendar_box .calendar_table tbody td {height: 4.2rem; font-family: "Roboto", sans-serif; font-size: 1.6rem; color: #666; font-weight: 400; line-height: 3.8rem; letter-spacing: -0.02rem;} .calendar_box .calendar_table tbody td.on {padding: 0.3rem;} .calendar_box .calendar_table tbody td.on a {display: inline-block; width: 100%; height: 100%; color: #fff; background: #1c85e8; border-radius: 50%;} .calendar_box .calendar_table tbody td.on.start-date{background:#ECF4FD;border-radius:1.8rem 0 0 1.8rem;} .calendar_box .calendar_table tbody td.on.end-date{background:#ECF4FD;border-radius:0 1.8rem 1.8rem 0;} .calendar_box .calendar_table tbody td.in-range{background:#ECF4FD} .btnssubmit {float: left; width: 100%; text-align: right; padding: 1.5rem 2.2rem ; margin-top: 2rem; border-top: 1px solid #ddd;} .btnssubmit .reset {display: inline-block; margin-right: 1rem;} .btnssubmit .reset button {display: inline-block; width: 7.8rem; height: 3.6rem; text-align: center; font-size: 1.4rem; color: #999; font-weight: 500; line-height: 3.6rem; background: #f1f1f1; border-radius: 0.4rem;} .btnssubmit .confirm {display: inline-block;} .btnssubmit .confirm button {display: inline-block; width: 7.8rem; height: 3.6rem; text-align: center; font-size: 1.4rem; color: #fff; font-weight: 500; line-height: 3.6rem; background: #1c85e8; border-radius: 0.4rem;} /* APPMYD0501 영수증 목록 */ /* 영수증 상세검색 */ .receiptsearch_box {float: left; width: 100%; padding: 0 5.5555%;} .detailsearch_box {float: left; width: 100%; border: 1px solid #ddd; box-shadow: 0px 0px 15px rgba(0,0,0,0.1); border-radius: 0.8rem;} .detailsearch_box .searchtitlebox {float: left; width: 100%; height: 5.5rem; padding: 0 2rem;} .detailsearch_box .searchtitlebox .left {float: left;} .detailsearch_box .searchtitlebox .left i {display: inline-block; width: 2rem; height: 2.4rem; margin-right: 1rem; vertical-align: 0.6rem;} .detailsearch_box .searchtitlebox .left h3 {display: inline-block; font-size: 1.5rem; color: #000; font-weight: bold; line-height: 5.3rem; letter-spacing: -0.05rem;} /* 상세검색 열고닫기 버튼전환 */ .detailsearch_box .searchtitlebox span.btnarrow {float: right; width: 1.7rem; height: 1rem; font-size: 0; margin-top: 2.3rem; background: url("../images/detailsearch_arrow_down.svg") no-repeat center; background-size: 1.7rem 1rem; cursor: pointer;} .detailsearch_box .searchtitlebox span.active {float: right; width: 1.7rem; height: 1rem; font-size: 0; margin-top: 2.3rem; background: url("../images/detailsearch_arrow_up.svg") no-repeat center; background-size: 1.7rem 1rem; cursor: pointer;} .detailsearch_box .searchtype_list {float: left; width: 100%; padding: 1.4rem 1.035rem; display: none;} /* 내용오픈 영역 */ .detailsearch_box .searchtype_list .radio_type {float: left; width: 25%; padding: 0 0.365rem;} .detailsearch_box .searchtype_list input.radio_imgtype {display: none;} .detailsearch_box .searchtype_list input.radio_imgtype + label {float: left; width: 100%; height: 3.4rem; font-family: "Noto Sans KR", sans-serif; font-size: 1.4rem; color: #666; font-weight: 500; line-height: 3.2rem; letter-spacing: -0.04rem; text-align: center; background: #fff; border: 1px solid #ddd; border-radius: 0.4rem; cursor: pointer;} .detailsearch_box .searchtype_list input.radio_imgtype:checked + label {color: #fff; font-weight: 500; background: #1c85e8;} .iteminput_box {float: left; width: 100%; padding: 0 0.365rem;} .iteminput_box .iteminput {position: relative; display: inline-block; width: 100%; height: auto; padding: 4% 5.5556%; margin-top: 1.5rem; background: #fff; border: 1px solid #ddd; border-radius: 0.6rem;} .iteminput_box .iteminput .label {display: inline-block; font-size: 1.3rem; color: #bbb; font-weight: 500; line-height: 1.9rem;} .iteminput_box .iteminput .fmselect {-moz-appearance: none; -webkit-appearance: none; appearance: none; display: inline-block; width: 100%; font-family: "Noto Sans KR", sans-serif; font-size: 1.7rem; color: #333; font-weight: 500; padding: 1.8% 0 0; background: #fff; border: 0;} .iteminput_box .iteminput .fmselect option {color: #5e5e5e;} .iteminput_box .iteminput .ico_rectangle {position: absolute; top: 34%; right: 8%; width: 5.9375%;} .iteminput_box .iteminput .ico_rectangle a {display: inline-block; width: 100%; height: 100%;} /* 셀렉트박스 대체 레이어 팝업1 변경 */ .selectpopup {float: left; width: 100%; height: 100%; padding: 0 0.365rem;} .selectpopup a {position: relative; display: block; width: 100%; height: auto; padding: 4% 5.5556%; margin-top: 1.5rem; background: #fff; border: 1px solid #ddd; border-radius: 0.6rem;} .selectpopup a div.selectname {display: block; font-size: 1.3rem; color: #bbb; font-weight: 500; line-height: 1.4rem; margin-top: 0.3rem;} .selectpopup a div.option {display: block; font-family: "Noto Sans KR", sans-serif; font-size: 1.7rem; color: #333; font-weight: 500; margin-top: 0.6rem;} .selectpopup a .ico_rectangle {position: absolute; top: 34%; right: 8%; width: 5.9375%;} .modal-wrapper {position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; background: rgba(0,0,0,0.7); visibility: hidden; opacity: 0; transition: all 0.25s ease-in-out;} .modal-wrapper.open {opacity: 1; visibility: visible;} /* .modal {position: relative; display: block; top: 80%; width: 100%; height: 50rem; background: #fff; opacity: 0; border-radius: 2rem 2rem 0 0; transition: all 0.5s ease-in-out;} .modal-wrapper.open .modal {margin-top: -200px; opacity: 1;} */ .modal {position: fixed; bottom: 0; display: block; width: 100%; background: #fff; opacity: 0; border-radius: 2rem 2rem 0 0; transition: all 0.5s ease-in-out;} .modal-wrapper.open .modal {opacity: 1;} .modal.action {padding-bottom: 8rem;} .modalhead {position: fixed; display: block; width: 100%; padding: 3rem 3rem 2rem; overflow: hidden;} .modalhead a {display: block; width: 100%;} .modalhead a span {float: left; font-size: 2rem; color: #333; font-weight: bold; line-height: 2.4rem; letter-spacing: -0.05rem;} .modalhead a i {float: right; width: 2.3rem; height: 2.3rem;} .btn-close {font-size: 28px; display: block; float: right; color: #000;} .popcontent {float: left; width: 100%; padding: 0 3rem; margin-top: 7.5rem;} .popcontent .layerpopcontents {float: left; width: 100%; height: 24rem; overflow-y: scroll;} .popcontent .layerpopcontents ul {float: left; width: 100%;} .popcontent .layerpopcontents ul li {float: left; width: 100%; padding: 1.8rem 0; border-top: 1px solid #ddd;} .popcontent .layerpopcontents ul li a {font-size: 1.6rem; color: #333; font-weight: 500; line-height: 1.8rem; letter-spacing: -0.05rem;} /*레이어팝업 안에 라디오버튼*/ .popcontent .layerpopcontents ul li input[type="radio"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;} .popcontent .layerpopcontents ul li input[type="radio"] + label {display:block; position: relative; font-size: 1.6rem; color: #333; font-weight: 500; line-height: 1.8rem; letter-spacing: -0.05rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;} .popcontent .layerpopcontents ul li input[type="radio"]:checked + label{color:#2372E1;} .popcontent .layerpopcontents ul li input[type="radio"]:checked + label:before{content:''; position:absolute; top:0; right:0; display: inline-block; width: 2rem; height: 2rem; background: url('../images/memtype_check_on.svg')no-repeat 50% 50%; background-size: 2rem 2rem;} /* 셀렉트박스 대체 레이어 팝업2 변경 */ .selectpopup2 {float: left; width: 100%; height: 100%; padding: 0 0.365rem;} .selectpopup2 a {position: relative; display: block; width: 100%; height: auto; padding: 4% 5.5556%; margin-top: 1.5rem; background: #fff; border: 1px solid #ddd; border-radius: 0.6rem;} .selectpopup2 a div.selectname {display: block; font-size: 1.3rem; color: #bbb; font-weight: 500; line-height: 1.4rem; margin-top: 0.3rem;} .selectpopup2 a div.option {display: block; font-family: "Noto Sans KR", sans-serif; font-size: 1.7rem; color: #333; font-weight: 500; margin-top: 0.6rem;} .selectpopup2 a .ico_rectangle {position: absolute; top: 34%; right: 8%; width: 5.9375%;} .modal-wrapper2 {position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; background: rgba(0,0,0,0.7); visibility: hidden; opacity: 0; transition: all 0.25s ease-in-out;} .modal-wrapper2.open {opacity: 1; visibility: visible;} .modal2 {position: relative; display: block; top: 80%; width: 100%; height: 50rem; background: #fff; opacity: 0; border-radius: 2rem 2rem 0 0; transition: all 0.5s ease-in-out;} .modal-wrapper2.open .modal2 {margin-top: -200px; opacity: 1;} /* 셀렉트박스 대체 레이어 팝업3 변경 */ .modal-wrapper3 {position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; background: rgba(0,0,0,0.7); visibility: hidden; opacity: 0; transition: all 0.25s ease-in-out;} .modal-wrapper3.open {opacity: 1; visibility: visible;} .modal3 {position: relative; display: block; top: 80%; width: 100%; height: 50rem; background: #fff; opacity: 0; border-radius: 2rem 2rem 0 0; transition: all 0.5s ease-in-out;} .modal-wrapper3.open .modal3 {margin-top: -200px; opacity: 1;} /* 셀렉트박스 대체 레이어 팝업4 추가 211001 */ .selectpopup4 {float: left; width: 100%; height: 100%; margin-bottom: 4.6875%;} .selectpopup4 a {position: relative; display: block; width: 100%; height: auto; padding: 4% 5.5556%; background: #fff; border: 1px solid #ddd; border-radius: 0.6rem;} .selectpopup4 a div.selectname {display: block; font-size: 1.3rem; color: #bbb; font-weight: 500; line-height: 1.4rem; margin-top: 0.3rem;} .selectpopup4 a div.option {display: block; font-family: "Noto Sans KR", sans-serif; font-size: 1.7rem; color: #333; font-weight: 500; margin-top: 0.6rem;} .selectpopup4 a .ico_rectangle {position: absolute; top: 34%; right: 8%; width: 5.9375%;} .modal-wrapper4 {position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; background: rgba(0,0,0,0.7); visibility: hidden; opacity: 0; transition: all 0.25s ease-in-out;} .modal-wrapper4.open {opacity: 1; visibility: visible;} .modal4 {position: relative; display: block; top: 80%; width: 100%; height: 50rem; background: #fff; opacity: 0; border-radius: 2rem 2rem 0 0; transition: all 0.5s ease-in-out;} .modal-wrapper4.open .modal4 {margin-top: -160px; opacity: 1;} .btns_search {float: left; width: 100%; text-align: center; margin-top: 2.5rem; margin-bottom: 0.6rem;} .btns_search a {display: inline-block; width: 13rem; height: 4rem; font-size: 1.5rem; color: #333; font-weight: 500; line-height: 3.8rem; letter-spacing: -0.02rem; border: 1px solid #333; border-radius: 5rem;} /* 영수증 목록 */ .receiptlist_box {float: left; width: 100%; padding: 0 5.5555%; margin-top: 2rem;} .reportlist_contents {float: left; width: 100%; border-top: 1px solid #333;} .reportlist_contents ul {float: left; width: 100%; padding-bottom: 15rem;} .reportlist_contents ul li {float: left; width: 100%; display: table; padding: 2rem 0; border-bottom: 1px solid #eee;} .reportlist_contents ul li .tit {display: table-cell; text-align: left; vertical-align: middle;} .reportlist_contents ul li .tit span.subject {display: block; font-size: 1.5rem; color: #333; font-weight: 500; line-height: 2.2rem; letter-spacing: -0.05rem;} .reportlist_contents ul li .tit span.groupname {display: block; font-size: 1.3rem; color: #1c85e8; font-weight: 500; line-height: 1.9rem; letter-spacing: -0.05rem;} .reportlist_contents ul li .date {display: table-cell; text-align: right; vertical-align: middle;} .reportlist_contents ul li .date span {font-family: "Roboto", sans-serif; font-size: 1.3rem; color: #999; font-weight: 400; line-height: 1.5rem; letter-spacing: -0.05rem;} /* APPMYD0502 영수증 데이터 조회내용 없음 */ .reportlist_contents .notinquire {float: left; width: 100%; height: 50rem; text-align: center; padding-top: 5rem;} .reportlist_contents .notinquire i {display: inline-block; width: 4.4rem; height: 4.4rem;} .reportlist_contents .notinquire p {display: inline-block; width: 100%; font-size: 1.4rem; color: #666; font-weight: 400; line-height: 3rem; letter-spacing: -0.05rem; margin-top: 1rem;} /* APPMYD0503 영수증 상세_개인정보 제3자 제공 동의 팝업창 */ .receiptdetailpop_box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #303d4e; z-index: 99999;} .receiptdetail_contents {position: fixed; width: 100%; height: 100%; padding: 3.5rem 2rem; overflow-y: scroll;} .receiptcheck_wrap {position: relative; float: left; width: 100%; height: auto; background: #fff;} .receiptcheck_wrap .topbg {float: left; width: 100%; padding: 0 0.5rem;} /*도트원형 패턴 상단*/ .receiptcheck_wrap .topbg .dottedbg {float: left; width: 100%; height: 1.1rem; margin-top: -0.55rem; background: url("../images/receiptcicle_topbg.svg") no-repeat center top; background-size: 100%;} .receiptcheck_wrap .bottombg {float: left; width: 100%; padding: 0 0.5rem;} /*도트원형 패턴 하단*/ .receiptcheck_wrap .bottombg .dottedbg {float: left; width: 100%; height: 1.1rem; margin-bottom: -0.55rem; background: url("../images/receiptcicle_bottombg.svg") no-repeat center top; background-size: 100%;} .receiptcheck_box {position: relative; float: left; width: 100%; padding: 6rem 3rem 4.5rem;} .receipcontenst_title {float: left; width: 100%; padding-bottom: 2.5rem; border-bottom: 1px solid #333;} .receipcontenst_title h1 {font-family: 'Roboto', sans-serif; font-size: 2.5rem; color: #00367b; font-weight: 900; line-height: 2.4rem; letter-spacing: -0.02rem;} .receipcontenst_title span {display: inline-block; width: 100%; font-size: 1.4rem; color: #1c85e8; font-weight: 500; line-height: 2rem; letter-spacing: -0.04rem; margin-top: 0.8rem;} .receipcontenst_title .btnsshare {position: absolute; top: 2.4rem; right: 2.4rem; width: 2.2rem; height: 2.6rem;} .receiptoutput {float: left; width: 100%; margin-top: 1.4rem;} .receiptoutput ul {float: left; width: 100%; padding-bottom: 3.5rem; border-bottom: 1px dashed #bbb;} .receiptoutput ul.space {padding-top: 3rem;} .receiptoutput ul:last-child {border-bottom: 0;} .receiptoutput ul li {float: left; width: 100%; margin-bottom: 1.5rem;} .receiptoutput ul li:last-child {margin-bottom: 0;} .receiptoutput ul li span.tit {display: block; font-size: 1.35rem; color: #999; font-weight: 400; line-height: 2.4rem; letter-spacing: -0.02rem;} .receiptoutput ul li span.subject {font-size: 1.5rem; color: #333; font-weight: 500; line-height: 2.4rem; letter-spacing: -0.05rem;} .receiptoutput ul li span.number {font-family: "Roboto", sans-serif;} .receiptcheck_wrap .popclose {position: absolute; bottom: 3.5rem; left: 0; width: 100%; text-align: center;} .receiptcheck_wrap .popclose a {display: inline-block; width: 2.8rem; height: 1.5rem;} /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** 작업일정순(6차 최종) 210907 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* APPMOR0101 더보기 메인화면 */ .moretopnavi_box {float: left; width: 100%; background: #23315a url("../images/moretop_patton.svg") no-repeat center top; background-size: 100%;} #header-inner {position: fixed; z-index: 10000; top: 0; left: 0; width: 100%; background: rgba(0,0,0,0); /*스크롤 전헤더 배경색*/ height: 6rem; overflow: hidden; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s;} #header-inner .moreaside {margin:0 auto; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;} #header-inner.roll {height: 8rem; background: rgba(35,49,90,0.8); /*스크롤후 헤더배경색*/} #header-inner.roll .moreaside {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;} #header-inner.roll2 {height: 6rem; background: rgba(255,255,255,1); box-shadow: rgba(0, 0, 0, 0.07) 0px 4px 8px; /*스크롤후 헤더배경없애고 그림자효과 적용*/} #header-inner.roll2 .moreaside {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;} .moreaside {position: fixed; width: 100%; padding: 3.1rem 5.5556% 1rem;} .moreaside .left {float: left;} .moreaside .left h2 {font-size: 2.4rem; color: #fff; font-weight: bold; line-height: 2.4rem; letter-spacing: -0.05rem;} .moreaside .right {float: right; margin-top: 0.05rem;} .moreaside .right .qrcode {float: left; width: 6.8rem; height: 2.4rem; text-align: center; border: 1px solid #fff; border-radius: 50px;} .moreaside .right .qrcode a {display: block; width: 100%; height: 100%; font-family: "Roboto", sans-serif; font-size: 1.3rem; color: #fff; font-weight: bold; line-height: 2.4rem; letter-spacing: -0.03rem;} .moreaside .right .logout {float: left; margin-left: 2rem;} .moreaside .right .logout a {display: block; width: 100%; height: 100%; font-family: "Roboto", sans-serif; font-size: 1.3rem; color: #fff; font-weight: 400; line-height: 2.4rem; letter-spacing: -0.05rem; margin-top: 0.1rem;} .moremyinfo {float: left; width: 100%; padding: 0 5.5556%; margin-top: 10rem;} .moremyinfo .mycertify {position: relative; width: 100%; height: 7.6rem; background: #238bec; box-shadow: 0px 4px 20px #0b3973; border-radius: 1.4rem; overflow: hidden;} .moremyinfo .mycertify:after {position: absolute; opacity: 0.65; z-index: 1; content: ""; top: 0; left: 0; right: 0; bottom: 0; width: 100%; background: url("../images/mycertify_logobg.svg") no-repeat 117.5% -3.2rem; background-size: 15.5rem 15.8rem;} .moremyinfo .mycertify a {position: relative; display: table; width: 100%; height: 100%; padding: 0 2.4rem; z-index: 2;} .moremyinfo .mycertify a .mycertify_info {display: table-cell; vertical-align: middle;} .moremyinfo .mycertify a .mycertify_info span {display: inline-block; font-size: 1.8rem; color: #fff; font-weight: bold; line-height: 1.8rem; letter-spacing: -0.05rem; margin-bottom: 0.9rem;} .moremyinfo .mycertify a .mycertify_info p {font-size: 1.4rem; color: rgba(255,255,255,0.6); font-weight: 400; line-height: 1.5rem; letter-spacing: -0.05rem;} .moremyinfo .mycertify_history {float: left; width: 100%; padding: 2.3rem 0 3.8rem;} .moremyinfo .mycertify_history .btns {float: left; width: 50%;} .moremyinfo .mycertify_history .btns a {display: block; width: 100%; height: 100%; text-align: center; font-size: 1.4rem; color: #fff; font-weight: 500; line-height: 1.5rem; letter-spacing: -0.02rem;} .moremyinfo .mycertify_history .btns a i.folder {display: inline-block; width: 2.5rem; height: 2.5rem; vertical-align: 0.5rem;} .moremyinfo .mycertify_history .btns a i.file {display: inline-block; width: 2.6rem; height: 2.6rem; vertical-align: 0.5rem;} /* 마이데이터 바로가기 */ .mydata_shortcut {float: left; width: 100%; margin-top: 3rem;} .mydata_shortcut .mydata_links {float: left; width: 100%; padding: 0 3rem;} .mydata_shortcut .mydata_links .title {float: left; width: 100%;} .mydata_shortcut .mydata_links .title i.bullet {display: inline-block; width: 2rem; height: 2rem; margin-right: 0.5rem;} .mydata_shortcut .mydata_links .title span {font-size: 1.4rem; color: #999; font-weight: bold; line-height: 1.5rem; letter-spacing: -0.05rem; vertical-align: -0.3rem;} .mydata_shortcut .mydata_links .icobox {float: left; width: 100%; margin-top: 2.6rem;} .mydata_shortcut .mydata_links .icobox ul li {float: left; width: 33.3334%; border-right: 1px solid #eee;} .mydata_shortcut .mydata_links .icobox ul li:last-child {border-right: 0;} .mydata_shortcut .mydata_links .icobox ul li a {display: inline-block; width: 100%; text-align: center; font-size: 1.3rem; color: #333; font-weight: bold; line-height: 1.5rem; letter-spacing: -0.03rem;} .mydata_shortcut .mydata_links .icobox ul li a div.mydataico {display: inline-block; width: 4.8rem; height: 4.8rem; background: #f5f5f5; border-radius: 50%;} .mydata_shortcut .mydata_links .icobox ul li a div.mydataico i.ico1 {display: inline-block; width: 2.3rem; height: 2.3rem; margin-top: 1.3rem;} .mydata_shortcut .mydata_links .icobox ul li a div.mydataico i.ico2 {display: inline-block; width: 2.3rem; height: 2.3rem; margin-top: 1.3rem;} .mydata_shortcut .mydata_links .icobox ul li a div.mydataico i.ico3 {display: inline-block; width: 2.2rem; height: 2.2rem; margin-top: 1.3rem;} .mydata_shortcut .mydata_links .icobox ul li a span {display: inline-block; width: 100%; margin-top: 1.3rem;} /* 회색공간라인 영역 */ .spaceline {float: left; width: 100%; height: 0.8rem; margin: 3.8rem 0 4rem; background: #f5f5f5;} .customercenter_box {float: left; width: 100%;} .mydatacustomer {float: left; width: 100%; padding: 0 3rem;} .mydatacustomer .title {float: left; width: 100%;} .mydatacustomer .title2 {padding-top: 3.7rem;} .mydatacustomer .title i.bullet {display: inline-block; width: 2rem; height: 2rem; margin-right: 0.5rem;} .mydatacustomer .title span {font-size: 1.4rem; color: #999; font-weight: bold; line-height: 1.5rem; letter-spacing: -0.05rem; vertical-align: -0.4rem;} .myinfomanage {float: left; width: 100%; margin-top: 3.5rem; border-bottom: 1px solid #eee;} .myinfomanage ul li {float: left; width: 100%; margin-bottom: 4rem;} .myinfomanage ul li a {display: block; width: 100%; font-size: 1.45rem; color: #333; font-weight: bold; line-height: 1.5rem; letter-spacing: -0.03rem;} .cuinfouser {float: left; width: 100%; margin-top: 3.5rem;} .cuinfouser ul li {float: left; width: 100%; margin-bottom: 4rem;} .cuinfouser ul li:last-child {margin-bottom: 0;} .cuinfouser ul li a {display: block; width: 100%; font-size: 1.45rem; color: #333; font-weight: bold; line-height: 1.5rem; letter-spacing: -0.03rem;} /* 문의전화 안내 */ .callcenter {float: left; width: 100%; padding: 0 3rem; margin-bottom: 13.8rem;} .callcenter_guide {float: left; width: 100%;} .callcenter_guide .bulletico {float: left; width: 2.4rem; height: 2.4rem; margin-right: 0.5rem;} .callcenter_guide .callinfo {float: left; width: 90%; margin-top: 0.4rem;} .callcenter_guide .callinfo span {display: inline-block; font-size: 1.35rem; color: #999; font-weight: bold; line-height: 1.5rem; letter-spacing: -0.03rem; margin-bottom: 1rem;} .callcenter_guide .callinfo p {display: inline-block; font-size: 1.2rem; color: #999; font-weight: 400; line-height: 1.3rem; letter-spacing: -0.03rem;} /* APPMOR0301 인증이력 */ .certifyrecord_head {float: left; width: 100%;} .certifyrecord_title {float: left; width: 100%; text-align: center; padding: 2rem 5.5556% 0;} .certifyrecord_title .left {position: relative; float: left; width: 1rem; height: 1.8rem; z-index: 99999;} .certifyrecord_title .pagetitle {position: absolute; top: 2rem; left: 0; width: 100%; text-align: center; z-index: 10;} .certifyrecord_title .pagetitle span {font-size: 1.5rem; color: #333; font-weight: 500; line-height: 1.8rem; letter-spacing: -0.03rem;} .certifyrecord_title .pagetitle2 span {font-size: 1.6rem;} .certifyrecord_title .right {position: relative; float: right; width: 1.7rem; height: 1.7rem; margin-top: 0.16rem; z-index: 99999;} /* certifyrecord_nav */ .certifyrecord_nav {float: left; width: 100%; height: 3.4rem; margin-top: 8rem; border-bottom: 1px solid #eee;} .certifyrecord_nav .menulist {float: left; width: 100%; margin-top: -0.1rem;} .certifyrecord_nav .menulist ul {float: left; width: 100%; padding: 0 2rem;} .certifyrecord_nav .menulist ul li {float: left; height: 3.5rem; margin-right: 2.5rem;} .certifyrecord_nav .menulist ul li a {display: inline-block; width: 100%; height: 100%; font-size: 1.5rem; color: #999; font-weight: 400; line-height: 1.6rem; letter-spacing: -0.02rem; padding: 0 0.2rem 1rem;} .certifyrecord_nav .menulist ul li.on a {color: #333; font-weight: bold; border-bottom: 2px solid #333;} .recordlist_box {float: left; width: 100%; padding: 0 5.5555%; margin-top: 1rem;} .recordlist_contents {float: left; width: 100%;} .recordlist_contents ul {float: left; width: 100%;} .recordlist_contents ul li {float: left; width: 100%; display: table; padding: 1.8rem 0 2.5rem; border-bottom: 1px solid #eee;} .recordlist_contents ul li:last-child {border-bottom: 0;} .recordlist_contents ul li div.tit {display: table-cell; text-align: left; vertical-align: middle;} .recordlist_contents ul li div.tit span.organname {display: block; font-size: 1.6rem; color: #333; font-weight: 500; line-height: 3.2rem; letter-spacing: -0.05rem; margin-bottom: 0.5rem;} .recordlist_contents ul li div.tit div.easytime {display: block; font-size: 1.3rem; color: #333; font-weight: 500; line-height: 1.5rem; letter-spacing: -0.03rem;} .recordlist_contents ul li div.tit div.easytime span {font-family: "Roboto", sans-serif; color: #999; margin-left: 0.5rem;} .recordlist_contents ul li div.complete {display: table-cell; text-align: right; vertical-align: middle;} .recordlist_contents ul li div.complete span {display: inline-block; width: 6rem; height: 2.7rem; font-size: 1.4rem; color: #1c85e8; font-weight: 500; line-height: 2.5rem; letter-spacing: -0.03rem; text-align: center; border: 1px solid #1c85e8; border-radius: 5rem;} .recordlist_contents ul li div.failure {display: table-cell; text-align: right; vertical-align: middle;} .recordlist_contents ul li div.failure span {display: inline-block; width: 6rem; height: 2.7rem; font-size: 1.4rem; color: #999; font-weight: 500; line-height: 2.7rem; letter-spacing: -0.03rem; text-align: center; background: #eee; border-radius: 5rem;} /* APPMOR0303 발급이력 */ .recordlist_contents ul li div.tit span.disusetit {display: block; font-size: 1.6rem; color: #FF611D; font-weight: 500; line-height: 3.2rem; letter-spacing: -0.05rem; margin-bottom: 0.5rem;} .recordlist_contents ul li div.tit span.issuetit {display: block; font-size: 1.6rem; color: #333; font-weight: 500; line-height: 3.2rem; letter-spacing: -0.05rem; margin-bottom: 0.5rem;} .recordlist_contents ul li div.tit div.easytime2 {font-size: 1.4rem;} .recordlist_contents ul li div.tit div.easytime2 span {margin-left: 0;} /* APPMOR0401 인증서 폐기 */ .popupdisusecontents .popfinish2 {display: block; bottom: 0; width: 100%; background: #fff; border-top: 1px solid #fff;} .popupdisusecontents .popfinish2 button.cancle {float: left; width: 39.3334% /*118px*/; height: 5rem; font-size: 1.6rem; color: #666; font-weight: 500; line-height: 5rem; letter-spacing: -0.02rem; background: #ddd; border-radius: 0 0 0 1rem;} .popupdisusecontents .popfinish2 button.confirm {float: left; width: 60.6667% /*182px*/; height: 5rem; font-size: 1.6rem; color: #fff; font-weight: 500; line-height: 5rem; letter-spacing: -0.02rem; background: #1c85eb; border-radius: 0 0 1rem 0;} /* APPMOR0402 인증서 폐기 완료 */ .popupdisusecontents {position: fixed; top: 50%; left: 50%; width: 83.3334% /*300px*/; margin: 0; transform: translate(-50%, -50%);} .popupdisusecontents .popup_wrap {display: block; width: 100%; height: auto; min-height: 10.9rem; text-align: center; padding: 3rem 6.6667% /*20px*/ 0; background: #fff; border-radius: 10px 10px 0 0; overflow: auto;} .issuedisuse_pop p {display: inline-block; width: 100%; font-size: 1.6rem; color: #333; font-weight: 500; line-height: 2.4rem; letter-spacing: -0.07rem;} .issuedisuse_pop span {display: inline-block; width: 100%; font-size: 1.6rem; color: #1c85e8; font-weight: 500; line-height: 2.4rem; letter-spacing: -0.03rem; margin: 2.1rem 0 3rem;} .popupdisusecontents .popfinish {display: block; bottom: 0; width: 100%; height: 5rem /*50px*/; background: #1c85eb; border-radius: 0 0 10px 10px;} .popupdisusecontents .popfinish button {display: inline-block; width: 100%; text-align: center; font-size: 1.6rem; color: #fff; font-weight: 500; line-height: 5rem; letter-spacing: -0.02rem;} /* APPMOR0502 내지갑 비밀번호 변경 */ .mypurse_guidetxt {float: left; width: 100%; padding: 0 5.5556%; margin-top: 9.5rem;} .mypurse_guidetxt .txtbox {float: left; width: 100%;} .mypurse_guidetxt .txtbox span {font-size: 2.2rem; color: #333; font-weight: bold; line-height: 3.2rem; letter-spacing: -0.05rem;} .mypurse_guidetxt .txtbox p {display: inline-block; width: 100%; font-size: 1.4rem; color: #333; font-weight: 500; line-height: 2rem; letter-spacing: -0.05rem; margin: 2rem 0 3rem;} /* APPMOR0601 회원정보관리 */ .bgcover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f1f1f1; z-index: -1; } .member_management {position: relative; float: left; width: 100%; padding: 0 2rem; margin-top: 7rem; z-index: 2;} .memberinfo {float: left; width: 100%; height: auto; background: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 1.4rem;} .memberinfo ul {float: left; width: 100%; padding: 2rem 2.5rem;} .memberinfo ul li {float: left; width: 100%;} .memberinfo ul li div.left {float: left;} .memberinfo ul li div.left span {font-size: 1.5rem; color: #999; font-weight: 400; line-height: 3.6rem; letter-spacing: -0.05rem;} .memberinfo ul li div.right {float: right;} .memberinfo ul li div.right span {font-size: 1.5rem; color: #333; font-weight: 400; line-height: 3.6rem; letter-spacing: -0.05rem;} .memberinfo ul li div.right span.number {font-family: "Roboto", sans-serif;} .phonemodify {float: left; width: 100%; height: 7.6rem; margin-top: 1.5rem; background: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 1.4rem;} .phonemodify ul {float: left; width: 100%; padding: 2rem 2.5rem;} .phonemodify ul li {float: left; width: 100%;} .phonemodify ul li div.left {float: left;} .phonemodify ul li div.left span {font-size: 1.5rem; color: #999; font-weight: 400; line-height: 3.6rem; letter-spacing: -0.05rem;} .phonemodify ul li div.right {float: right;} .phonemodify ul li div.right span.number {font-family: "Roboto", sans-serif; font-size: 1.5rem; color: #333; font-weight: 400; line-height: 3.6rem; letter-spacing: -0.05rem; vertical-align: -0.1rem;} .phonemodify ul li div.right span.modify {display: inline-block; width: 4.8rem; height: 2.8rem; font-size: 1.3rem; color: #fff; font-weight: 400; line-height: 2.8rem; letter-spacing: -0.03rem; text-align: center; margin-left: 1rem; background: #1c85e8; border-radius: 0.4rem;} .secede {float: left; width: 100%; text-align: center; margin-top: 4rem;} .secede a {display: inline-block; font-size: 1.5rem; color: #999; font-weight: 400; line-height: 1.6rem; letter-spacing: -0.03rem; text-decoration: underline;} /* APPMOR0602 회원탈퇴 */ .secedenote_box {float: left; width: 100%; padding: 0 5.5556%; margin-top: 4rem; padding-bottom: 10rem; overflow-y: auto;} .secedenote_contents {float: left; width: 100%; border-top: 1px solid #333;} .secedenote_contents .tittxt {float: left; width: 100%; margin-top: 2.3rem;} .secedenote_contents .tittxt span {display: inline-block; width: 1.8rem; height: 1.8rem; margin-right: 0.3rem;} .secedenote_contents .tittxt p {display: inline-block; width: 90%; font-size: 1.4rem; color: #333; font-weight: 500; line-height: 2rem; letter-spacing: -0.04rem; vertical-align: -0.25rem;} .secedenote_contents .secede_notice {float: left; width: 100%; min-height: 15.6rem; padding: 1.5rem; margin-top: 2rem; background: #f5f5f5; border-radius: 0.6rem;} .secedenote_contents .secede_notice h4 {font-size: 1.4rem; color: #333; font-weight: 500; line-height: 2rem; letter-spacing: -0.04rem;} .secedenote_contents .secede_notice ul {float: left; width: 100%; margin-top: 0.3rem;} .secedenote_contents .secede_notice ul li {float: left; width: 100%; margin-top: 0.8rem;} .secedenote_contents .secede_notice ul li span {float: left; width: 0.3rem; height: 0.3rem; margin-top: 1rem; margin-right: 0.5rem; background: #1c85e8; border-radius: 5rem;} .secedenote_contents .secede_notice ul li p {float: left; width: 94%; font-size: 1.3rem; color: #666; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.05rem;} .secedenote_contents .secedecheck {float: left; width: 100%; margin-top: 2.2rem;} .secedecheck input.inputsecede {opacity: 0; position: absolute;} .secedecheck input.inputsecede, .secedenotebox-label {display: inline-block; margin: 1rem 0; vertical-align: middle; cursor: pointer;} .secedenotebox-label {position: relative; width: 90%; font-size: 1.4rem; color: #333; font-weight: 500; letter-spacing: -0.02rem;} .secedecheck input.inputsecede, .secedenotebox-label:before {display: inline-block; width: 2.4rem; height: 2.4rem; content: ''; margin-right: 1rem; text-align: center; vertical-align: -0.7rem; background: #fff; border: 1px solid #ccc; border-radius: 0.4rem;} .secedecheck input.inputsecede:checked + .secedenotebox-label:before {background: #ddd url("../images/ico_datacheck.svg") no-repeat center 34%; background-size: 1.5rem 1.4rem;} /*.secedecheck input.inputsecede:checked + .secedenotebox-label:before {background: #333 url("../images/ico_datacheck.svg") no-repeat center 34%; background-size: 1.5rem 1.4rem;}*/ /* APPMOR0701 이용가이드 목록 */ .topsearch_box {float: left; width: 100%; padding: 0 5.5556%; margin-top: 7rem;} .searcharea {float: left; width: 100%; height: 5.4rem; padding: 0 0.45rem; background: #fff; border: 1px solid #ddd; border-radius: 0.6rem;} .searcharea .searchinput {display: inline-block; width: 86%; height: 4.4rem; margin-top: 0.445rem;} .searcharea .searchinput input {width: 100%; height: 100%; font-size: 1.6rem; color: #333; font-weight: 400; letter-spacing: -0.02rem; border: 0; background: #fff; padding: 1rem;} .searcharea .searchbtns {display: inline-block; width: 2.4rem; height: 2.4rem;} /* 검색창 placeholder 설정 */ .searcharea .searchinput input::-webkit-input-placeholder {font-size: 1.6rem; color: #bbb; font-weight: 500; letter-spacing: -0.02rem; vertical-align: middle;} .searcharea .searchinput input::placeholder {font-size: 1.6rem; color: #bbb; font-weight: 500; letter-spacing: -0.02rem; vertical-align: middle;} .sortcasesuser_box {margin-top: 3rem;} .sortcases_area .right .typegroup_3 {width: 6rem; margin-right: 0;} /* 이용가이드 목록 */ .userguide_box {float: left; width: 100%; padding: 0 5.5556% 12.7rem;} .userguide_contents {float: left; width: 100%; margin-top: 2rem; border-top: 2px solid #333;} .userguide_contents ul {float: left; width: 100%;} .userguide_contents ul li {float: left; width: 100%; padding: 2.2rem 0; border-bottom: 1px solid #ddd;} .userguide_contents ul li a {display: block; width: 100%; height: 100%; font-family : "Noto Sans KR", sans-serif; font-size: 1.4rem; color: #333; font-weight: 500; line-height: 2rem; letter-spacing: -0.04rem; word-break: keep-all;} /* APPMOR0702 이용가이드 상세 */ .boarddetail_box {float: left; width: 100%; padding: 0 5.5556%; margin-top: 7.5rem;} .boarddetail_contents {float: left; width: 100%;} .boarddetail_contents .tittxt {float: left; width: 100%; padding-bottom: 2rem; border-bottom: 2px solid #333;} .boarddetail_contents .tittxt span {font-size: 2rem; color: #333; font-weight: bold; line-height: 2.2rem; letter-spacing: -0.04rem;} .boarddetail_contents .stxt {float: left; width: 100%; margin: 2rem 0 2.5rem 0;} .boarddetail_contents .stxt p {font-size: 1.5rem; color: #333; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.04rem;} .boarddetail_contents .imgregister {float: left; width: 100%;} .relationguide_box {float: left; width: 100%; padding: 0 5.5556%; margin-top: 7rem;} .relationguide_contents {float: left; width: 100%;} .relationguide_contents .tit {float: left; width: 100%;} .relationguide_contents .tit i {display: inline-block; width: 1.5rem; height: 1.583rem; margin-right: 0.5rem; vertical-align: 0.2rem;} .relationguide_contents .tit span {display: inline-block; font-size: 1.6rem; color: #333; font-weight: bold; line-height: 2.2rem; letter-spacing: -0.04rem;} .relationguide_contents ul {float: left; width: 100%; margin-top: 2.317rem; border-top: 1px solid #333;} .relationguide_contents ul li {float: left; width: 100%; padding: 2rem 0; border-bottom: 1px solid #ddd;} .relationguide_contents ul li:last-child {border-bottom: 0;} .relationguide_contents ul li a {display: block; width: 100%; height: 100%; font-family : "Noto Sans KR", sans-serif; font-size: 1.4rem; color: #333; font-weight: 500; line-height: 2rem; letter-spacing: -0.04rem; word-break: keep-all;} /* APPMOR0801 이용문의 목록 */ .boardlist_box {float: left; width: 100%; padding: 0 5.5556%; margin-top: 7rem;} .boardlist_contents {float: left; width: 100%; border-top: 2px solid #333;} .boardlist_contents ul {float: left; width: 100%;} .boardlist_contents ul li {float: left; width: 100%; padding: 2rem 0 1.8rem; border-bottom: 1px solid #ddd;} .boardlist_contents ul li .state {float: left; width: 100%;} .boardlist_contents ul li .state span.answer {display: inline-block; width: auto; height: 2.3rem; font-size: 1.3rem; color: #1c85e8; font-weight: 500; line-height: 2rem; letter-spacing: -0.04rem; text-align: center; padding: 0 1rem; margin-right: 0.5rem; border: 1px solid #1c85e8; border-radius: 6rem;} .boardlist_contents ul li .state span.date {display: inline-block; font-family: "Roboto", sans-serif; font-size: 1.4rem; color: #999; font-weight: 400; line-height: 1.5rem; letter-spacing: -0.04rem;} .boardlist_contents ul li .state i {display: inline-block; width: 1.4rem; height: 1.4rem; margin-left: 0.5rem;} .boardlist_contents ul li .subject {float: left; width: 100%; margin-top: 1rem;} .boardlist_contents ul li .subject a {display: inline-block; width: 100%; font-family : "Noto Sans KR", sans-serif; font-size: 1.5rem; color: #333; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.04rem; word-break: keep-all;} .boardlist_contents ul li .state span.standby {display: inline-block; width: auto; height: 2.3rem; font-size: 1.3rem; color: #999; font-weight: 500; line-height: 2.3rem; letter-spacing: -0.04rem; text-align: center; padding: 0 1rem; margin-right: 0.5rem; background: #eee; border-radius: 6rem;} /* APPMOR0802 이용문의 상세 */ .right_del {position: relative; z-index: 99999; float: right;} .right_del a {display: inline-block; width: 100%; height: 100%; font-family : "Noto Sans KR", sans-serif;} .right_del span {font-size: 1.5rem; color: #FF611D; font-weight: 500; line-height: 2.2rem; letter-spacing: -0.04rem;} /* 이용문의 상세내용 */ .useinquirydetails_box {float: left; width: 100%; padding: 0 5.5556%; margin-top: 7rem;} .useinquirydetails_contents {float: left; width: 100%;} .useinquirydetails_contents .tit {display: inline-block; font-size: 2rem; color: #333; font-weight: bold; line-height: 2.2rem; letter-spacing: -0.02rem; margin-bottom: 2rem;} .useinquirydetails_contents .date {font-family: "Roboto", sans-serif; font-size: 1.5rem; color: #999; font-weight: 400; line-height: 1.5rem; letter-spacing: -0.04rem;} .useinquirydetails_contents .content {float: left; width: 100%; margin-top: 1.5rem;} .useinquirydetails_contents .content p {font-size: 1.5rem; color: #333; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.04rem;} .filedownload {float: left; width: 100%; margin-top: 3rem;} .filedownload .filetit {float: left; width: 82.8125%; height: 5rem; padding: 0 2rem; background: #eef5ff; border: 1px solid #ddd; border-right: 0; border-radius: 0.6rem 0 0 0.6rem;} .filedownload .filetit i {display: inline-block; width: 2rem; height: 1.4rem; margin-right: 0.5rem;} .filedownload .filetit span {font-size: 1.4rem; color: #999; font-weight: 500; line-height: 4.75rem; letter-spacing: -0.04rem;} .filedownload .filebtn {float: left; width: 17.1875%; height: 5rem; text-align: center; background: #fff; border: 1px solid #ddd; border-radius: 0 0.6rem 0.6rem 0;} .filedownload .filebtn a {display: block; width: 100%; height: 100%;} .filedownload .filebtn a i {display: inline-block; width: 1.8rem; height: 2rem; margin-top: 1.4rem;} /* 이용문의 답변내용 */ .usereply_box {float: left; width: 100%; padding: 0 5.5556%; margin-top: 6.5rem; margin-bottom: 5rem;} .usereply_contents {float: left; width: 100%; border-top: 2px solid #333;} .usereply_contents .replytit {float: left; width: 100%; margin-top: 2.1rem;} .usereply_contents .replytit span {font-size: 1.6rem; color: #333; font-weight: bold; line-height: 1.8rem; letter-spacing: -0.04rem;} .usereply_contents .replycontent {float: left; width: 100%; margin-top: 1.5rem;} .usereply_contents .replycontent p {font-size: 1.4rem; color: #333; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.04rem; word-break: keep-all;} /* APPMOR0803 이용문의 등록 */ .useregister_box {float: left; width: 100%; padding: 0 5.5556%; margin-top: 7rem;} .useregister_contents {float: left; width: 100%;} .registerform {float: left; width: 100%; margin-bottom: 15.2rem;} .registerform .reforminput {float: left; width: 100%;} .registerform .reforminput2 {margin-top: 2.5rem;} .registerform .reforminput h4 {display: inline-block; width: 100%; font-size: 1.45rem; color: #333; font-weight: bold; line-height: 2rem; letter-spacing: -0.04rem; margin-bottom: 1.2rem;} .registerform .reforminput .fmselect {-moz-appearance: none; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 5.4rem; line-height: 5.4rem; font-family : "Noto Sans KR", sans-serif; font-size: 1.6rem; color: #bbb; font-weight: 400; padding: 0 2rem; background: #fff url("../images/inquirytype_arrow.svg") no-repeat 92% center; border: 1px solid #ddd; border-radius: 0.6rem;} /* select option 값 설정 */ .registerform .reforminput .fmselect option {font-size: 1.6rem; color: #5e5e5e;} .registerform .reforminput .fmselect:focus {font-size: 1.6rem; color: #111;} /* textarea */ .registerform .reforminput .textareainput {display: inline-block; width: 100%; height: 16.8rem; font-family : "Noto Sans KR", sans-serif; font-size: 1.4rem; color: #666; font-weight: 400; letter-spacing: -0.04rem; padding: 1rem; border: 1px solid #ddd; border-radius: 0.6rem;} .registerform .reforminput .textareainput:focus{border-color:#2979FF;} /* 파일업로드 스타일 적용 */ .registerform .reforminput .filebox {float: left; width: 100%;} .registerform .reforminput .filebox .filename {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;} /* 파일인풋박스 숨기기 */ .registerform .reforminput .filebox .uploadname {float: left; width: 66.875%; height: 5rem; font-size: 1.4rem; color: #999; font-weight: 400; letter-spacing: -0.04rem; padding: 0 2rem 0 4rem; background: #eef5ff url("../images/ico_fileattach.svg") no-repeat 1.5rem center; background-size: 2rem 1.4rem; border: 1px solid #ddd; border-radius: 0.6rem;} .registerform .reforminput .filebox label {float: right; width: 30%; height: 5rem; font-size: 1.4rem; color: #fff; font-weight: bold; line-height: 5rem; letter-spacing: -0.04rem; text-align: center; background: #333; border-radius: 0.6rem; cursor: pointer;} /* APPMOR0901 공지사항 목록 */ .boardlist_contents2 ul li .subject a {font-weight: 500;} .boardlist_contents ul li .state span.point {display: inline-block; width: auto; height: 2.3rem; font-size: 1.3rem; color: #FF611D; font-weight: 500; line-height: 2rem; letter-spacing: -0.04rem; text-align: center; padding: 0 1rem; margin-right: 0.5rem; border: 1px solid #FF611D; border-radius: 6rem;} /* APPMOR0902 공지사항 상세 */ .boarddetail_contents .tittxt span.date {display: inline-block; width: 100%; font-size: 1.4rem; color: #999; font-weight: 400; line-height: 1.6rem; letter-spacing: -0.04rem; margin-top: 1.5rem;} .filedownload2 {margin-top: 2rem;} /* APPMOR1001 개인정보처리방침 */ .useragreetop_con {float: left; width: 100%; text-align: center; padding: 1.7rem 5.5556% 0;} .useragreetop_con .pagetitle {display: inline-block;} .useragreetop_con .pagetitle span {font-size: 1.65rem; color: #333; font-weight: 500; line-height: 2rem;} .useragreetop_con .right {position: relative; float: right; width: 2.1rem; height: 2.1rem; z-index: 99999;} .useragree_title {float: left; width: 100%; padding: 0 5.5556%; margin-top: 7rem;} .useragree_title h3 {font-size: 1.85rem; color: #333; font-weight: bold; line-height: 2rem; letter-spacing: -0.04rem;} .useragreemold_box {float: left; width: 100%; padding: 0 5.5556%; margin-top: 2.5rem;} .useragreemold_contents {float: left; width: 100%; white-space: pre-line; padding-bottom: 1rem;} .useragreemold_contents p {font-size: 1.35rem; color: #666; font-weight: 400; line-height: 2rem; letter-spacing: -0.06rem; margin-top: -1.5rem; word-break: keep-all;} .useragreemold_contents p strong {display: inline-block; font-size: 1.4rem; color: #333; font-weight: bold; margin-bottom: 1rem;} /* 약관가이드 추가 210913 */ .clauseguide_title {float: left; width: 100%; padding: 0 3rem; margin-top: 7rem;} .clauseguide_title h3 {font-size: 1.85rem; color: #333; font-weight: bold; line-height: 2rem; letter-spacing: -0.04rem;} .clauseguide_box {float: left; width: 100%; padding: 0 3rem;} .clauseguide_contents {float: left; width: 100%; white-space: pre-line; padding-bottom: 1rem;} .clauseguide_contents .tit {display: inline-block; width: 100%; font-size: 1.3rem; color: #333; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.04rem; margin-bottom: 3.5rem;} .clauseguide_contents p {display: inline-block; width: 100%; font-size: 1.3rem; color: #333; line-height: 2.2rem; letter-spacing: -0.04rem; margin-top: -1.5rem; /*word-break: keep-all;*/} .clauseguide_contents p.privacyinfo {margin-top: 1rem;} .clauseguide_contents p strong {display: inline-block; font-size: 1.4rem; color: #333; font-weight: 500; line-height: 1.9rem; letter-spacing: -0.04rem; margin-bottom: 1rem;} .clauseguide_contents p strong.titp {margin-bottom: 0;} .clauseguide_contents p strong.titp span {font-size: 1.6rem;} .clauseguide_contents p font {font-size: 1.2rem; color: #666; font-weight: 400; line-height: 1.8rem;} .clauseguide_contents p span.line {display: inline-block; width: 100%; height: 0.1rem; margin-top: 3rem; background: #ddd;} .clauseguide_contents p span.privacytxt {display: inline-block; width: 100%; margin-bottom: 0.5rem;} /* 약관가이드 table style */ .clauseguide_contents .privacytable {float: left; width: 100%;} .clauseguide_contents .privacytable2 {margin-top: 2rem;} .clauseguide_contents .privacytable table.tablelayout {float: left; width: 100%; border-top: 1px solid #ddd; border-left: 1px solid #ddd;} caption {position: absolute; overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0;} .clauseguide_contents .privacytable table.tablelayout th {font-size: 1.3rem; color: #333; font-weight: 400; line-height: 1.5rem; letter-spacing: -0.04rem; text-align: center; padding: 1.5rem; background: #f9f9f9; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;} .clauseguide_contents .privacytable table.tablelayout td {font-size: 1.3rem; color: #666; font-weight: 400; line-height: 1.5rem; letter-spacing: -0.04rem; text-align: center; padding: 3.2rem 1.5rem; background: #fff; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;} /* APPCOM0101 공통 오류 페이지 */ .commonerror_box {float: left; width: 100%; text-align: center; padding: 0 2rem; margin-top: 12.5rem;} .commonerror_box .erroricocon {float: left; width: 100%; text-align: center; margin-bottom: 2rem;} .commonerror_box .erroricocon .ico {display: inline-block; width: 5.6rem;} .commonerror_box .errortitle {float: left; width: 100%;} .commonerror_box .errortitle span {display: inline-block; font-size: 2.3rem; color: #333; font-weight: bold; line-height: 2.3rem; letter-spacing: -0.05rem; margin-bottom: 1.5rem;} .commonerror_box .errortitle p {font-size: 1.4rem; color: #666; font-weight: 400; line-height: 2.3rem; letter-spacing: -0.05rem; word-break: keep-all;} .commonerror_box .commonerror_reason {float: left; width: 100%; text-align: center; padding: 1.7rem 0; margin-top: 3rem; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;} .commonerror_box .commonerror_reason p {font-size: 1.4rem; color: #666; font-weight: 500; line-height: 1.5rem; letter-spacing: -0.02rem;} /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** 작업일정순(7차 추가) 210907_2 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .bgreadypopup_box {position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; background: rgba(0,0,0,0.7);} .cardreadycontents {position: fixed; bottom: 0; width: 100%;} .cardreadycontents .cardready_wrap {display: block; width: 100%; text-align: left; padding: 4.5rem 2rem 2.5rem; background: #0e4286; box-shadow: 0px -5px 30px rgba(0,0,0,0.5); border-radius: 3rem 3rem 0 0; overflow: auto;} .cardreadycontents .cardready_wrap div.tit {display: block; width: 100%; padding: 0 2rem;} .cardreadycontents .cardready_wrap div.tit h3 {display: inline-block; font-size: 2.4rem; color: #fff; font-weight: 300; line-height: 3.5rem; letter-spacing: -0.03rem; margin-bottom: 1.8rem;} .cardreadycontents .cardready_wrap div.tit h3 strong {font-weight: bold;} .cardreadycontents .cardready_wrap div.tit p {font-size: 1.6rem; color: rgba(255,255,255,0.7); font-weight: 500; line-height: 2.2rem; letter-spacing: -0.03rem;} .cardreadycontents .cardready_wrap .readyset {display: inline-block; width: 100%; text-align: right;} .cardreadycontents .cardready_wrap .readyset i {display: inline-block; width: 9.3rem; height: 8.8rem; margin: 4.1rem 1.8rem 4.2rem 0;} .cardreadycontents .cardready_wrap .btncheck {display: inline-block; width: 100%; height: 5rem; background: #fff; border-radius: 6px;} .cardreadycontents .cardready_wrap .btncheck button {display: inline-block; width: 100%; text-align: center; font-size: 1.7rem; color: #1c85e8; font-weight: 500; line-height: 5rem;} /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** 작업일정순(8차 추가) 211001 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* APPLOG1502 간편인증 재설정 안내 */ .easycertify_box {float: left; width: 100%; text-align: center; padding-top: 34.7223%;} .easycertify_box .fintxt_title {float: left; width: 100%;} .easycertify_box .fintxt_title span {display: inline-block; font-size: 2.2rem; color: #333; font-weight: bold; line-height: 3.3rem; letter-spacing: -0.05rem; margin-bottom: 1.5rem;} .easycertify_box .fintxt_title p {font-size: 1.5rem; color: #333; font-weight: 400; line-height: 2.4rem; letter-spacing: -0.05rem;} .easycertify_img {position: fixed; bottom: 6rem; left: 0; width: 100%; text-align: right;} .easycertify_img .millimg {display: inline-block; width: 15.2rem; margin-right: 2.9rem;} /* APPLOG1502 간편인증 재설정 완료 */ .easycertify_box2 {padding-bottom: 30rem;} .easycertify_box .markimg_box {float: left; width: 100%; margin-top: 4rem;} .easycertify_box .markimg_box .finishimg {display: inline-block; width: 6.3rem /*63px*/;} /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** 추가작업 231020 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 인트로 */ .intro-wrap{height:100vh; background: linear-gradient(162deg, #00367B 0%, #1E5092 100%); color:#fff;} .intro-wrap .intro{padding:0 3rem 0; height:88vh; display:flex; align-items: center; justify-content: center; flex-direction: column} .intro-wrap .introTitle{width:100%; margin-bottom:11.4rem;} .intro-wrap .introTitle .title{font-size:3rem; font-weight:400; letter-spacing: -0.05rem; line-height:4rem; margin-bottom:4rem;} .intro-wrap .introTitle p{font-size:1.5rem; font-weight: 400; letter-spacing: -0.03rem;} .intro-wrap .intro .introimg{text-align:right; width: 100%;} .intro-wrap #footer{text-align:center;} .intro-wrap #footer .introfix_box{padding:0 2rem; position: fixed; bottom: 0; left: 0; width: 100%; height:8rem;} .intro-wrap #footer .introfix_box a{display:block; height:6rem; border-radius:0.4rem; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15); color: #00367B; font-weight: 700; font-size:1.8rem; line-height:6rem; background:#fff;} /* 권한설정 */ .access-authority{float: left; padding: 0 5.5556% 10rem; } .access-authority .authority_contents{border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:3.5rem 0;} .access-authority .authority_contents li{display: flex; justify-content: flex-start; align-items: center; gap:0 2rem;} .access-authority .authority_contents li:not(:first-child){margin-top:3.5rem;} .access-authority .authority_contents li .ico{flex-shrink: 0; margin:0; } .access-authority .authority_contents li .txt{flex:1;} .access-authority .authority_contents li .txt p{font-size:1.6rem; font-weight:500; color:#333; line-height:2.2rem; letter-spacing: -0.03rem;} .access-authority .authority_contents li .txt span{display:block; font-size:1.4rem; font-weight:500;line-height:2.2rem; letter-spacing: -0.022rem; color:#999;} .warning_box{position:relative; margin-top:1.5rem; padding-left:2.8rem; font-size:1.3rem; color:#666; line-height:2.2rem; font-weight: 400; word-break: keep-all; } .warning_box:before{content:''; position:absolute; left:0px; top:0.2rem; width:1.8rem; height:1.8rem; background:url('../images/icon_warning.svg')no-repeat 0 0; background-size:100% 100%; } /* 이용약관 */ .agree-form-wrap{float: left; padding: 0 5.5556% 10rem; width: 100%;} .agree-form-wrap .all-check-box{padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid #ddd;} .agree-form{margin-bottom:3rem;} .agree-form h3{font-size:1.6rem; color:#333; font-weight:500; margin-bottom:1rem;} .agree-form .form-checkradio{margin-top:1rem;} .agree-txtcon{overflow-y:auto; padding:1rem; border:1px solid #ddd; background:rgba(0,0,0,0.02); color:#707070; font-size:1.2rem; margin:0.5rem 0 1.5rem; max-height:10rem;} .agree-txtcon h4{font-size:1.4rem; color:#333; margin-bottom:1.5rem;} .form-checkradio{position:relative; display: flex; justify-content: flex-start; align-items: center; width: 100%;} .basic-check{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .basic-check + label{flex:1;display:inline-block; font-size:1.8rem; vertical-align:middle; line-height:2.4rem; position:relative; padding-left:3.4rem; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;} .basic-check + label:before{content:''; position:absolute; left:0px; top:0px; width:2.4rem; height:2.4rem; border-radius:0.4rem; background:#ddd url('../images/privacycheck_on.svg')no-repeat 50% 50%; background-size:1.6rem 1.6rem; } .basic-check:checked + label:before{background-color:#2372E1;} .arrow-check + label{font-size:1.4rem;} .arrow-check + label:before{background:#fff url('../images/memtype_check_off.svg')no-repeat 50% 50%; background-size:2rem 2rem;} .arrow-check:checked + label:before{background:#fff url('../images/memtype_check_on.svg')no-repeat 50% 50%; background-size:2rem 2rem;} /*폼 디자인*/ .formgroup_box .buttoninput{position: relative; width:100%; margin-bottom: 4.6875%;} .formgroup_box .buttoninput .btns{display:block; width:100%; height:5rem; font-size:1.4rem; font-weight:500; border-radius:6px; } .formgroup_box .buttoninput .btns.gray{color:#707070; background:#ddd;} .formgroup_box .buttoninput .btns.blue{color:#fff; background:#2372E1;} .completecontents .complete_wrap .btncheck.flex_btn{display:flex; gap:0 1rem; background:none;} .completecontents .complete_wrap .btncheck.flex_btn button{background:#1c85eb; border-radius: 6px; font-size: 1.6rem;} .completecontents .complete_wrap .btncheck.flex_btn button.gray{color:#707070; background:#ddd;} .registerform .reforminput h4{position: relative;display:block; } .registerform .reforminput h4 .contNum{position:absolute; right:0; top:0; color:#999; font-size:1.2rem; font-weight:500;} /*폼 파일미리보기*/ .reforminput_ex{float: left; width:100%;} .reforminput_ex .imgregister{position: relative; border-radius:1rem; overflow:hidden;width:80px; height:80px;float:left; display: flex;align-items: center;justify-content: center;overflow: hidden; background-color: #f9f9f9; margin-right:0.5rem} .reforminput_ex .imgregister .imgdata{display: block;max-width: none;max-height: none;width: 100%;height: 100%;object-fit: contain;} .reforminput_ex .imgregister .input_close{cursor:pointer; position:absolute; right:0.2rem; top:0.2rem;} .reforminput_ex .file-ex{display:flex; align-items: center; height:5rem; background:#f5f5f5; border-radius:0.6rem; margin-top: 1rem; padding:0 4.7222%;} .reforminput_ex .file-ex .filetit{flex:1; display: flex; align-items: center;} .reforminput_ex .file-ex .filetit i{display:inline-block; width:2rem; height:1.4rem; margin-right:0.5rem;} .reforminput_ex .file-ex .filetit span{font-size:1.4rem; color: #999; font-weight: 400; letter-spacing: -0.04rem; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .reforminput_ex .file-ex .input_close{cursor:pointer} /*설정페이지*/ .setting-list{float:left; width:100%; padding: 3rem 5.5556% 10rem;} .setting-list .setting-list-con{padding:1rem 0; } .setting-list .setting-list-con:not(:first-child){border-top:1px solid #ddd;} .setting-list .setting-list-con .setting-btn{display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem 0; font-size:1.6rem; font-weight:500; text-align: left;} .setting-list .setting-list-con .setting-btn em{flex:1; font-weight: 600;} .setting-list .setting-list-con .setting-btn em small{font-size:1.2rem; color:#767676; font-weight: 400;} .setting-list .setting-list-con .setting-btn .on-off-txt{flex-shrink: 0; width: 6rem; text-align: right; font-size: 1.6rem; color: #999;} .setting-list .setting-list-con .setting-btn .icon-right{display:inline-block; width:0.8rem; height:1.4rem; background:url('../images/ico_titmore_arrow.svg')no-repeat 50% 50%; background-size:100%;} /* 설정 onoff버튼 */ .on-off-txt input[type="checkbox"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .on-off-txt input[type="checkbox"] + label {display:inline-block; vertical-align:middle; line-height:2.4rem; position:relative; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;} .on-off-txt input[type="checkbox"] + label:before{content:'OFF'; font-size: 1.6rem; color: #999; text-align: right;} .on-off-txt input[type="checkbox"]:checked + label:before{content:'ON'; color:#2979FF;} /*회원정보변경*/ .setting-list .setting-info-con{padding:2.5rem 0;} .setting-list .setting-info-con:not(:first-child){border-top:1px solid #ddd;} .setting-list .setting-info-con dt{position: relative; margin-bottom: 0.5rem; color: #999; font-weight: 400; font-size:1.4rem;} .setting-list .setting-info-con dt .change-btn{position: absolute; top: 0; right: 0; display: inline-block;} .setting-list .setting-info-con dd{font-size:1.6rem; font-weight:600; color:#333; } .setting-list .setting-info-con dd .comment{margin-top:1rem; color:#767676; font-size:1.2rem; font-weight:400;} /*회원탈퇴 체크박스*/ .sgutxt2 .basic-check + label{font-size:1.5rem;} .receiptsearch_box.mt70{margin-top:7rem;} .receiptsearch_box.mt70 + .clauseguide_title{margin-top:4rem;} /*게시판 더보기*/ .boardlist_more{float: left; width: 100%; text-align: center; margin-top: 2.5rem; margin-bottom: 0.6rem;} .boardlist_more a{display: inline-block; width: 13rem; height: 4rem; font-size: 1.5rem; color: #333; font-weight: 500; line-height: 3.6rem; letter-spacing: -0.02rem; border: 1px solid #ddd; border-radius: 5rem; cursor:pointer;} .boardlist_more i{display: inline-block; width:1.6rem; height:0.9rem; vertical-align: middle; margin-left: 1rem; margin-bottom: 0.5rem;} /*서브레이아웃*/ #subdata_nav_box{position: relative; top:0; overflow:hidden; z-index: 10000; width:100%; } .subdataaside_box{float: left; width: 100%; padding: 0 5.5556%;} .subdataaside_box .title{float: left; margin-top: 2.5rem;} .subdataaside_box .title span{display: none; font-size: 2.4rem; color: #fff; font-weight: bold; line-height: 3.5rem; letter-spacing: -0.05rem;} .subdataaside_box .rightcheck{float: right;} .subdataaside_box .rightcheck .icobell{position: relative; float: left; width: 2.3rem; height: 2.53rem; margin-top: 3rem;} .subdataaside_box .rightcheck .icobell a{display: block; width: 100%; height: 100%;} .subdataaside_box .rightcheck .icobell .point{position: absolute; top: 0.2rem; right: 0; width: 0.805rem; height: 0.825rem; background: #FF611D; border-radius: 50%;} .subdataaside_box .left{float: left; width: 1.4rem; height: 2.4rem; margin-top: 3rem; margin-right: 1rem;} .subdataImg_box{ padding: 2rem 5.5556% 4rem; float: left; width: 100%; height: 13rem;} .subdataImg_box .left{float: left; display: flex; flex-direction: column; justify-content: flex-end; height: 100%;} .subdataImg_box .left .title span{display: inline-block; font-size: 2.4rem; color: #fff; font-weight: bold; line-height: 3.5rem; letter-spacing: -0.05rem;} .subdataImg_box .left p{font-size:1.25rem; color:#fff; opacity:0.7; margin-top:0.5rem;} .subdataImg_box .img{float:right; opacity:0.3;} .tab_menu{float: left; width: 100%; padding: 0 5.5556%; background: #fff;} .tab_menu ul{float: left; display:flex; width: 100%; padding-top:1.5rem;} .tab_menu ul li{ margin-right: 1.6rem;} .tab_menu ul li a{display: block; text-align:center; width: 100%; height: 100%; font-size: 1.7rem; color: #999; font-weight: bold; line-height: 3rem; letter-spacing: -0.02rem; padding: 0 0.2rem 1rem; border-bottom: 1px solid rgba(51,51,51,0);} .tab_menu ul li.on a{color: #333; border-bottom: 1px solid rgba(51,51,51,1);} #subdata_nav_box.fixed{position: fixed; box-shadow:0px 4px 8px rgba(0, 0, 0, 0.07); border-bottom:none; background:#fff;} #subdata_nav_box.fixed .subdataImg_box{height:auto; margin-top:-5rem; padding: 2rem 5.5556% 2rem;} #subdata_nav_box.fixed .subdataImg_box p{display:none;} #subdata_nav_box.fixed .subdataaside_box{padding-bottom:2rem} #subdata_nav_box.fixed .subdataaside_box .title span{display:inline-block; } .subdatascreen_box{float: left; width: 100%; padding: 0 5.5556%; margin-top: 4.4rem;} .subdatascreen_box h3{font-family: "Noto Sans KR", sans-serif; font-size: 2rem; color: #333; font-weight: bold;line-height: 3rem; letter-spacing: -0.02rem;} .sortcases_box + .boardlist_box{margin-top:2rem; padding-bottom:10rem;} .sortcases_area .right .sortBtn{display: inline-block; text-align: center; margin-top: -0.5rem; padding: 0 1rem; font-size: 1.3rem; letter-spacing: -0.02rem; font-weight: 500; line-height: 3rem; background: #fff; border: 1px solid #ddd; border-radius: 0.6rem; box-shadow: 0px 2px 4px rgba(0,0,0,0.07);} /*게시판 노이미지*/ .boardlist_contents ul li.notinquire{float: left; width: 100%; height: 50rem; text-align: center; padding-top: 5rem;} .boardlist_contents ul li.notinquire i{ display: inline-block;width: 4.4rem; height: 4.4rem;} .boardlist_contents ul li.notinquire p{display: inline-block; width: 100%; font-size: 1.4rem; color: #666; font-weight: 400; line-height: 3rem; letter-spacing: -0.05rem;margin-top: 1rem;} /*관리비 팝업년월*/ .popcontent_half{overflow:hidden; } .popcontent_half .layerpopcontents{width:50%;} /*관리비*/ .receiptdetail_box{float: left; width: 100%; padding: 0 5.5556% 10rem; margin-top:2rem;} .receipt_title{float: left; width: 100%; border-top: 2px solid #333; padding: 2rem 0 1.8rem; border-bottom: 1px solid #ddd;} .receipt_title .title{overflow:hidden;} .receipt_title .title .left{float:left; font-size:1.8rem; font-weight:bold; color:#333; letter-spacing: -0.02rem;} .receipt_title .title .right{float:right;font-size:1.2rem; color:#FF611D; padding-top: 0.5rem;} .receipt_title p{margin-top:1rem; font-size:1.4rem; color:#666;} .receipt_wrap{float:left; width:100%; background:#F5F5F5;padding: 3rem 5.5556% 1.8rem; border-radius:0 0 1rem 1rem;} .receipt_wrap h4{font-size:1.8rem; font-weight:bold; color:#333; padding-top:2.5rem; margin:2rem 0 1rem; border-top: 1px dashed #bbb; } .receipt_wrap li{padding:0 0 1.8rem; overflow:hidden; } .receipt_wrap li .left{float:left; font-size:1.35rem; font-weight:500; color:#666;} .receipt_wrap li .right{float:right; font-size:1.5rem; font-weight:600; color:#333; letter-spacing: -0.02rem; text-align:right;} .receipt_wrap li .right span{display:block; font-size:1.3rem; font-weight:400; margin-top:0.5rem;} .receipt_wrap li .right span.plus{color:#2372E1} .receipt_wrap li .right span.minus{color:#FF611D} /*관리비 내역 없을때*/ .receipt_notinquire{ border-top: 2px solid #333; float: left; width: 100%; height: 20rem; text-align: center; padding: 5rem 0 2rem} .receipt_notinquire i{ display: inline-block; width: 4.4rem; height: 4.4rem;} .receipt_notinquire p{ display: inline-block; width: 100%; font-size: 1.4rem; color: #666; font-weight: 400; letter-spacing: -0.05rem; margin-top: 2rem;} /*주차관리 예약*/ .mydatascreen_box .visual_04 { background: url("../images/mydata_visual_ico4.svg") no-repeat right bottom 3rem; background-size: 9.3rem 8.9rem;} .mydatascreen_box .visual_04 .tRed{margin-top:1rem;} .mydatascreen_box .visual .left{float:left;} .mydatascreen_box .visual .right{float:right;} .mydatascreen_box .visual .right .sortBtn{display: inline-block; text-align: center; margin-top: 5.5rem; padding: 0 1rem; font-size: 1.3rem; letter-spacing: -0.02rem; font-weight: 500; line-height: 3rem; background: #fff; border: 1px solid #ddd; border-radius: 0.6rem; box-shadow: 0px 2px 4px rgba(0,0,0,0.07);} .sortcases_area .notearea{ display: flex; width: 100%; } .sortcases_area .notearea span{display: inline-block; width: 2rem; height: 2rem; margin-right: 5px;} .sortcases_area .notearea p{ display: inline-block; flex:1; font-size: 1.4rem; color: #FF611D; font-weight: 500; line-height: 2rem; letter-spacing: -0.08rem; vertical-align: -0.4rem;} .parkinglist_contents ul li{display:flex; align-items: center;} .parkinglist_contents ul li .state{ width:50%;} .parkinglist_contents ul li .state span.date{display:block;} .parkinglist_contents ul li .state span.answer{margin-bottom:0.5rem;} .parkinglist_contents ul li .subject{ width:50%; text-align:right; margin-top: 0; } .parkinglist_contents ul li .subject a{font-weight:bold; width:auto; padding-left:2.6rem; background:url('../images/ico_car.svg')no-repeat 0 50%; background-size:2.2rem;} /* 주차관리 입출차*/ .mydatascreen_box .visual_05 { background: url("../images/mydata_visual_ico5.svg") no-repeat right bottom 3rem; background-size: 9.3rem 8.9rem;} .mydatascreen_box .visual_05 h3{margin-bottom:1.5rem;} .parklist_box{float: left; width: 100%; padding: 2rem 5.5556% 10rem; margin-top: 2rem; background:#f7f8f9;} .parklist_box .parklist_contents{float: left; width: 100%;} .parklist_contents li{position:relative; padding:0.75rem 0; display:flex; gap:0 3.125%; z-index:0;} .parklist_contents li:before{content:''; position:absolute; left:2rem; top:0px; width:0.2rem; height:100%; background:#fff; z-index: -1;} .parklist_contents li:after{content:''; position:absolute; left:2rem; top:50%; width:1rem; height:1rem; border-radius:50%; background:#2372E1; outline:3px solid #fff; margin:-0.7rem 0 0 -0.45rem; box-shadow: 0 0 11px rgba(35,114,225,0.5);} .parklist_contents li .month{position:relative; display: flex; align-items: flex-start; justify-content: center; width:4rem; text-align:center;} .parklist_contents li .month span{display:none; background:#f7f8f9; padding:4px 0; font-size:1.4rem; font-weight:700; color:#333;} .parklist_contents li .month em{display:block; font-weight:600; font-size:1.2rem;} .parklist_contents li .parklist{flex:1; display:flex; align-items: center; gap:0 3.125%; padding:1rem 3.125% ; border-radius:1rem; box-shadow:0 2px 6px rgba(0,0,0,0.15); background:#fff;} .parklist_contents li .parklist .state{display: flex; align-items: center; justify-content: center; flex-shrink: 0; width:5rem; height:5rem; background:#EEF5FF; color:#2372E1; font-size:1.45rem; font-weight:500; border-radius:0.5rem; } .parklist_contents li .parklist .state.visit{background:#2372E1; color:#fff;} .parklist_contents li .parklist .tit{flex:1;} .parklist_contents li .parklist .organname{font-size:1.5rem; font-weight:600; color:#333; line-height: 2.2rem; letter-spacing: -0.04rem;} .parklist_contents li .parklist .organname span{float:right; color:#999; font-weight:400; font-size:1.2rem;} .parklist_contents li .parklist .easytime{margin-top:0.5rem; color:#999; font-weight:400; font-size:1.2rem; letter-spacing: -0.04rem;} .parklist_contents li:first-child:before{top:50%; height:50%;} .parklist_contents li:first-child:after{display:none;} .parklist_contents li:nth-child(odd):after{background:#63bfff;} .parklist_contents li:first-child .month span{display:block;} .parklist_contents:not(:first-child) li .month em{display:none;} /*더보기 */ .mydatascreen_box .visual_06 {background: url("../images/mydata_visual_ico6.svg") no-repeat right bottom 2rem; background-size: 9.3rem 8.9rem;} .morelist_box{background:#fff; margin-top:0; padding:1.5rem 5.5556%; border-bottom: 1.5rem solid #f5f5f5;} .morelist_area{float: left; width: 100%; padding: 0 1.5rem; background: #fff; border: 1px solid #ddd; box-shadow: 0px 4px 6px rgba(0,0,0,0.07); border-radius: 0.6rem;} .morelist_tit{margin-bottom:1.5rem; overflow: hidden; padding-top: 1.5rem;} .morelist_tit h3{float:left; font-size:1.9rem; font-weight:bold;line-height: 3rem; letter-spacing: -0.02rem; } .morelist_tit a{float:right; width:1.2rem; padding-top: 0.6rem;} .morelist_box .boardlist_contents ul li .subject a{overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .morelist_box .boardlist_contents ul li:last-child{border-bottom:none;} .morelist_box .boardlist_contents ul li.notinquire{height:20rem;} /* faq 폴딩 */ .boardlist_contents ul.foldingList li{padding:0;} .boardlist_contents ul.foldingList li .title{position:relative; padding:2rem 0; padding-right:4rem; display:flex; align-items: center;} .boardlist_contents ul.foldingList li .title:before{content:''; position:absolute; right:0px; top:50%; width:1.6rem; height:0.9rem; background:url('../images/notice_arrow.svg')no-repeat 0 0; background-size:100%; transition: all 0.2s ease-out 0s; opacity:0.5; } .boardlist_contents ul.foldingList li .subject{width: auto; margin-top:0; float: none; font-family: "Noto Sans KR", sans-serif; font-size: 1.5rem; color: #333; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.04rem; word-break: keep-all; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .boardlist_contents ul.foldingList li .subject .point{display: inline-block; width: auto; height: 2.3rem; font-size: 1.3rem; color: #FF611D; font-weight: 500; line-height: 2rem; letter-spacing: -0.04rem; text-align: center; padding: 0 1rem; margin-right: 0.5rem; border: 1px solid #FF611D; border-radius: 6rem;} .boardlist_contents ul.foldingList li .title i {flex-shrink: 0; display: inline-block; width: 1.4rem; height: 1.4rem; margin-left: 0.5rem; vertical-align: middle;} .boardlist_contents ul.foldingList li .contents{display:none; background:#f5f5f5; padding:1.5rem; font-size: 1.3rem; line-height: 2rem; border-top:1px dotted #ddd;} .boardlist_contents ul.foldingList li.active .title:before{transform: rotate(180deg );} /* 페이지네이션 */ .pagination{margin-top:3rem; float: left; width: 100%;} .pagination ul{display:flex; align-items: center; justify-content: center; gap:0.5rem;} .pagination ul .pagin-num{ display: block; font-size:1.3rem; font-weight:500; width:3rem; height:3rem; text-align:center; line-height:2.6rem; background:#fff; border-radius:4px; border:1px solid #ddd; color:#888;} .pagination ul .pagin-num.active{background:#1c85e8; border-color:#1c85e8; color:#fff;} .pagination ul .pagin-btn{display: block; width:3rem; height:3rem; font-size:0; } .pagination ul .pagin-btn.first{background:url('../images/pagin-btn_first.svg')no-repeat 50% 50%; background-size:100%;} .pagination ul .pagin-btn.prev{margin-right:0.5rem; background:url('../images/pagin-btn_prev.svg')no-repeat 50% 50%; background-size:100%;} .pagination ul .pagin-btn.next{margin-left:0.5rem; background:url('../images/pagin-btn_next.svg')no-repeat 50% 50%; background-size:100%;} .pagination ul .pagin-btn.last{background:url('../images/pagin-btn_last.svg')no-repeat 50% 50%; background-size:100%;} /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** 추가작업 240325 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* 입주민 투표 */ #header.vote {background-color: #ecf7ff;} /* .vote_hd_box {float: left; width: 100%; padding: 0 5.5556%; padding-top: 4.4rem; background-color: #ecf7ff;} */ .vote_hd_box {float: left; width: 100%; padding: 0 5.5556%; padding-top: 4.4rem;} .vote_hd_box .visual {float: left; width: 100%; height: 11.6rem; background: url("../images/vote_ico.svg") no-repeat right bottom 3rem; background-size: 9.3rem 8.9rem;} .vote_hd_box .visual h3{font-family : "Noto Sans KR", sans-serif; font-size: 2.4rem; color: #333; font-weight: bold; line-height: 3rem; letter-spacing: -0.02rem; margin-bottom:1.5rem;} .vote_hd_box .visual p {font-size: 1.4rem; margin-bottom: 1rem;} .vote-list li:not(:last-of-type) {margin-bottom: 2rem;} .vote-list .vote-title {font-size: 1.7rem; margin-bottom: 1.2rem; color: #707070;} .vote-list .vote-progress {position: relative; width:100%; height: 5rem; background-color:#f1f1f1; border-radius: 1.5em;} .vote-list .vote-progress-bar {width: 100%; height: 100%; background-color: #a9d4ff; border-radius: 1.5rem;} .vote-list .vote-progress-bar.green {background-color: #a9e1b5;} .vote-list .vote-progress-bar.orange {background-color: #fbcf7d;} .vote-list .vote-progress-bar.purple {background-color: #c5b6eb;} .vote-list .vote-progress-bar.pink {background-color: #f1aee0;} .vote-list .vote-progress-bar p {position: absolute; top: 50%; left: 1.5rem; transform: translateY(-50%); font-size: 1.4rem;} .vote-date-box {margin-top: 3.5rem;} .vote-date-box .vote-date {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;} .vote-date-box .vote-date li {display: flex; justify-content: space-between; padding: 1.5rem 0;} .vote-date-box .vote-date li div {font-size: 1.5rem;} .vote-table {width: 100%; margin-top: 2rem;} .vote-table tbody tr:first-of-type {border-top: 2px solid #333;} .vote-table tbody tr {border-bottom: 1px solid #ddd;} .vote-table tbody tr th {font-weight: 700;} .vote-table tbody tr th, .vote-table tbody tr td {padding: 2rem 0.5rem 1.8rem; font-size: 1.35rem; white-space: nowrap; line-height: 2rem;} .vote-table tbody tr td.subject {display: flex; flex-direction: column;} .vote-table tbody tr td .vote-table-title {display: block; max-width: 17rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .vote-table tbody tr td .vote-dday {display: inline-block; min-width: 5rem; height: 3rem; padding:0 0.5rem; font-size: 1.3rem; line-height: 3rem; text-align: center; color: #fff; background-color: #1c85e8; border-radius: 0.5rem;} .vote-table tbody tr td .vote-dday.waiting {background-color: #858585;} .vote-table tbody tr td .vote-btn {display: inline-block; height: 3rem; font-size: 1.3rem; white-space: nowrap; line-height: 3rem; color: #fff; background-color: #333; padding: 0 0.5rem; border-radius: 0.5rem;} .vote-table tbody tr td .vote-btn.complete {color: #333; background-color: #cfcfcf;} .voteguidetxt {float: left; width: 100%; padding: 8.8888% 5.5556% /*20px*/ 0; margin-bottom: 8.3333%;} .voteguidetxt .txtbox {float: left; width: 100%; text-align: center;} .voteguidetxt .txtbox span {font-size: 2.4rem; color: #333; font-weight: bold; line-height: 3.2rem; letter-spacing: -0.05rem;} .votetype_box {float: left; width: 100%; padding: 0 5.5556%; margin-bottom: 15rem;} .votetype_area {float: left; width: 100%;} .votetype_select {float: left; width: 100%;} .votetype_select div.itemtypepick-wrap {padding-bottom: 1.5rem;} .votetype_select div.itemtypepick {display: block; width: 100%; min-height: 10rem; overflow: hidden;} .votetype_select div.itemtypepick input.inputitem {display: none;} .votetype_select div.itemtypepick label {display: flex; position: relative; float: left; width: 100%; height: 100%; min-height: 10rem; line-height: 2.8rem; padding: 2.5rem; border: 2px solid #ddd; border-radius: 2rem;} .votetype_select div.itemtypepick label.typepicklabel2 {background: #f6f6f6;} .votetype_select div.itemtypepick label .pickimg {display: inline-block; width: 100%; margin: auto; font-size: 1.8rem; color: #bbb; font-weight: 500; letter-spacing: -0.02rem;} .votetype_select div.itemtypepick label .pickimg span.ico {position: absolute; top: 50%; transform: translateY(-50%); display: inline-block; width: 2rem; height: 1.5rem; margin-right: 1rem; background: url("../images/memtype_check_off.svg") no-repeat; background-size: 2rem 1.5rem;} .votetype_select div.itemtypepick label .pickimg span.tit {display: block; margin-left: 3.5rem;} /* 체크선택시 */ .votetype_select div.itemtypepick input:checked + label {float: left; width: 100%; height: 100%; line-height: 2.8rem; padding-left: 2.5rem; border: 2px solid #4e9ce7; border-radius: 2rem;} .votetype_select div.itemtypepick input:checked + label.typepicklabel2 {background: #f5faff ;} .votetype_select div.itemtypepick input:checked + label .pickimg {color: #1c85e8; font-weight: bold;} .votetype_select div.itemtypepick input:checked + label .pickimg span.ico {background: url("../images/memtype_check_on.svg") no-repeat; background-size: 2rem 1.5rem;} /* 본인인증 */ .select_box {float: left; width: 100%; padding: 0 5.5556%; margin-bottom: 15rem;} .select_area {float: left; width: 100%;} .select-list li {height: 12rem; background-color: #f1f1f1; border-radius: 1.5rem;} .select-list li a {display: block; width: 100%; height: 100%; padding: 2rem; } .select-list li h6 {position: relative; font-size: 1.8rem; padding-bottom: 1rem;} .select-list li h6::after {content: ""; position: absolute; right: 0; top: 40%; transform: translateY(-50%) rotate(45deg); width: 9px; height: 9px; border-top: 1px solid #545454; border-right: 1px solid #545454;} .select-list li p {font-size: 1.4rem; word-break: keep-all;} .select-list li:not(:last-of-type) {margin-bottom: 1.5rem;} /* 투표완료 */ .qu_footfix_box.between .qubtns a.left, .qu_footfix_box.between .qubtns a.right {width: 50%;} /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** JNY mobile 359 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (max-width:359px) { .aside_dormancy_box .pagetitle {top: 1.5rem;} .personnelinfo_box {padding: 0 5.5556% /*20px*/ 30%;} .pwchangelinfo_box {padding: 0 5.5556% /*20px*/ 40%;} .mycertify_box {padding: 0 5.5556% /*20px*/ 35%;} .serviceend_contents {padding: 6.25% 0 62.5%;} /* APPMYW0101 신분증 사진 미등록 */ .cardid_contents .photoregister .btns_register {margin-left: -10.5rem;} .fixpopupclose {bottom: 6rem;} /* 확인서 팝업 창닫기버튼 211001 */ .documentpopinfo_box {padding-bottom: 25%;} /* APPMYW0102 신분증 사진 등록 시 유의사항 안내 */ .cardnotecontents {position: relative; padding-top: 10.9rem;} /* APPMYW0601 사용정지 안내 */ .limitnote_contents .tittxt p {vertical-align: -0.05rem;} .limitnote_contents .limit_service li {margin-right: 1.5rem;} .limitnote_contents .tittxt2 p {letter-spacing: -0.08rem;} /* APPMYD0502 영수증 데이터 조회내용 없음 */ .reportlist_contents .notinquire {height: 30rem;} .footgnb_box {bottom: -0.1rem;} /* APPMOR0702 이용가이드 상세 */ .relationguide_box {margin-bottom: 10rem;} /* APPLOG1502 간편인증 재설정 안내 */ .easycertify_img .millimg {width: 13.2rem;} } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** JNY mobile 360,399 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width:360px) and (max-width:399px) { .aside_dormancy_box .pagetitle {top: 1.6rem;} } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** JNY mobile 375,399 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width:375px) and (max-width:399px) { .fixpopupclose {bottom: 11rem;} /* 확인서 팝업 창닫기버튼 211001 */ .documentpopinfo_box {padding-bottom: 25%;} /* 하단중심 내지갑 */ .mypurse {width: 6rem; height: 6rem; margin-left: -3rem;} } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** JNY mobile 400,499 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width:400px) and (max-width:499px) { .aside_dormancy_box .pagetitle {top: 2rem;} .serviceend_contents p {letter-spacing: -0.05rem;} .serviceend_contents span.last {letter-spacing: -0.05rem;} .fixpopupclose {bottom: 12rem;} /* 확인서 팝업 창닫기버튼 211001 */ .documentpopinfo_box {padding-bottom: 25%;} /* APPMYD0503 영수증 상세_개인정보 제3자 제공 동의 */ .receiptcheck_wrap .topbg .dottedbg {height: 1.5rem; margin-top: -0.5rem;} /* APPMOR0101 더보기 */ .moremyinfo .mycertify:after {background: url("../images/mycertify_logobg.svg") no-repeat 109% -3rem; background-size: 15.5rem 15.8rem;} /* 하단중심 내지갑 */ .mypurse {width: 6rem; height: 6rem; margin-left: -3rem;} } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** JNY mobile 480,499 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width:480px) and (max-width:499px) { .fixpopupclose {bottom: 18rem;} /* 확인서 팝업 창닫기버튼 211001 */ .documentpopinfo_box {padding-bottom: 25%;} /* APPMOR0101 더보기 */ .moremyinfo .mycertify:after {background: url("../images/mycertify_logobg.svg") no-repeat 115% -3.3rem; background-size: 16.5rem 15.8rem;} /* 하단중심 내지갑 */ .mypurse {top: -0.2rem; width: 6.6rem; height: 6.6rem; margin-left: -3.3rem;} } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** JNY tablet 600,719 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width:600px) and (max-width:719px) { .fixpopupclose {bottom: 18rem;} /* 확인서 팝업 창닫기버튼 211001 */ .documentpopinfo_box {padding-bottom: 18%;} /* APPMOR0101 더보기 */ .moremyinfo .mycertify:after {background: url("../images/mycertify_logobg.svg") no-repeat 111% -3.3rem; background-size: 15.5rem 15.8rem;} /* 하단중심 내지갑 */ .mypurse {top: -0.5rem; width: 7rem; height: 7rem; margin-left: -3.5rem;} } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* *** JNY tablet 768,1023 *** */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width:768px) and (max-width:1023px) { .pwchangelinfo_box {padding: 0 5.5556% /*20px*/ 40%;} .mycertify_box {padding: 0 5.5556% /*20px*/ 35%;} .finishapproval_box {padding-bottom: 50%;} .serviceend_contents {padding: 6.25% 0 62.5%;} .fixpopupclose {bottom: 9rem;} /* 확인서 팝업 창닫기버튼 211001 */ .documentpopclose {bottom: 7rem;} .documentpopinfo_box {padding-bottom: 20%;} /* APPMYW0102 신분증 사진 등록 시 유의사항 안내 */ .cardnotecontents {position: relative; padding-top: 10.9rem;} /* APPMYW0601 사용정지 안내 */ .limitnote_box {padding: 0 5.5556% 13rem;} /* APPMYW0702 인증서 재발급 완료 */ .issuecomplete_box .titlebox {margin-top: 6.5rem;} /* APPMYD0503 영수증 상세_개인정보 제3자 제공 동의 */ .receiptcheck_wrap .topbg .dottedbg {height: 1.5rem; margin-top: -0.5rem;} /* 하단중심 내지갑 */ .mypurse {width: 6rem; height: 6rem; margin-left: -3rem;} /* APPMOR0702 이용가이드 상세 */ .relationguide_box {margin-bottom: 10rem;} /* APPLOG1502 간편인증 재설정 안내 */ .easycertify_img .millimg {width: 11.2rem;} } /* BEGIN - 20251026 추가 */ /* 커뮤니티 게시글 카테고리 */ .sortcases_area .left .typegroup_2 {float: left;} .sortcases_area .left .typegroup_2 a {display: inline-block; font-size: 1.4rem !important; color: #333; font-weight: 500; line-height: 1.9rem; letter-spacing: -0.02rem;} .sortcases_area .left .typegroup_2 a span {float: left;} .sortcases_area .left .typegroup_2 a i {float: left; width: 1rem; height: 0.6rem; margin-top: 0.7rem; margin-left: 1rem;} /* 커뮤니티 게시글 목록 */ .communitylist_box {float: left; width: 100%; padding: 0 5.5556%; margin-top: 1rem;} .communitylist_contents {float: left; width: 100%; border-top: 2px solid #333;} .communitylist_contents ul {float: left; width: 100%;} .communitylist_contents ul li {float: left; width: 100%; padding: 2rem 0 1.8rem; border-bottom: 1px solid #ddd;} .communitylist_contents ul li .subject {float: left; width: 100%;} .communitylist_contents ul li .subject a {display: inline-block; width: 100%; font-family : "Noto Sans KR", sans-serif; font-size: 1.5rem; color: #333; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.04rem; word-break: keep-all;} .communitylist_contents ul li .writer {display: inline-block; padding-top: 1rem;} .communitylist_contents ul li .writer span.name{display: inline-block; font-size: 1.3rem; color: #999; font-weight: 400; line-height: 1.5rem; letter-spacing: -0.04rem;} .communitylist_contents ul li .state {display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: 1rem;} .communitylist_contents ul li .state .left {float: left; display: inline-flex; align-items: center; gap: 0.4rem; } .communitylist_contents ul li .state .right {float: right; display: inline-flex; align-items: center;} .communitylist_contents ul li .state span.icon {display: inline-block; width: auto; height: 1.7rem; font-size: 1.3rem; color: #999; line-height: 1.7rem; letter-spacing: -0.04rem; text-align: center;} .communitylist_contents ul li .state span.icon svg {width: 100%; height: 100%;} .communitylist_contents ul li .state span.count {display: inline-block; width: auto; height: 1.7rem; font-size: 1.3rem; color: #999; font-weight: 400; line-height: 1.7rem; letter-spacing: -0.04rem; text-align: center; margin-right: 1rem;} .communitylist_contents ul li .state span.date {display: inline-block; font-size: 1.3rem; color: #999; font-weight: 400; line-height: 1.5rem; letter-spacing: -0.04rem;} /* 커뮤니티 게시글 상세내용 */ .communitydetails_box {float: left; width: 100%; padding: 0 5.5556%; margin-top: 7rem;} .communitydetails_contents {float: left; width: 100%;} .communitydetails_contents .category {display: inline-block; width:100%; font-size: 1.2rem; color: #999; font-weight: bold; line-height: 2.2rem; letter-spacing: -0.02rem; padding-top: 1rem;} .communitydetails_contents .tit {display: inline-block; width:100%; font-size: 2rem; color: #333; font-weight: bold; line-height: 2.2rem; letter-spacing: -0.02rem; padding-top: 1rem;} .communitydetails_contents .writer {display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: 2rem;} .communitydetails_contents .writer .left {float: left; display: inline-flex; align-items: center; gap: 0.4rem; } .communitydetails_contents .writer .right {float: right; display: inline-flex; align-items: center;} .communitydetails_contents .writer span.name {font-size: 1.5rem; color: #000; font-weight: 600; line-height: 1.5rem; letter-spacing: -0.04rem;} .communitydetails_contents .writer span.household {font-size: 1.5rem; color: #999; font-weight: 400; line-height: 1.5rem; letter-spacing: -0.04rem; padding-left:1rem;} .communitydetails_contents .state {display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: 1rem;} .communitydetails_contents .state .left {float: left; display: inline-flex; align-items: center; gap: 0.4rem; } .communitydetails_contents .state .right {float: right; display: inline-flex; align-items: center;} .communitydetails_contents .state span.icon {display: inline-block; width: auto; height: 1.7rem; font-size: 1.3rem; color: #999; line-height: 1.7rem; letter-spacing: -0.04rem; text-align: center;} .communitydetails_contents .state span.icon svg {width: 100%; height: 100%;} .communitydetails_contents .state span.count {display: inline-block; width: auto; height: 1.7rem; font-size: 1.3rem; color: #999; font-weight: 400; line-height: 1.7rem; letter-spacing: -0.04rem; text-align: center; margin-right: 1rem;} .communitydetails_contents .state span.date {display: inline-block; font-size: 1.3rem; color: #999; font-weight: 400; line-height: 1.5rem; letter-spacing: -0.04rem;} .communitydetails_contents .content {float: left; width: 100%; margin-top: 1.5rem;} .communitydetails_contents .content p {font-size: 1.5rem; color: #333; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.04rem;} .right_mod span{font-size: 1.5rem; color: #2372e1; font-weight: 500; line-height: 2.2rem; letter-spacing: -0.04rem;} /* 커뮤니티 게시글 댓글 */ .communityreply_box {float: left; width: 100%; padding: 0 5.5556%; margin-top: 10rem; margin-bottom: 5rem;} .communityreply_contents {float: left; width: 100%; border-top: 2px solid #333; padding-top:5rem;} .communityreply_contents .state {display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: 1rem;} .communityreply_contents .state .left {float: left; display: inline-flex; align-items: center; gap: 0.4rem; } .communityreply_contents .state .left span.title {display: inline-block; width: auto; height: 1.7rem; font-size: 1.3rem; color: #000; font-weight: 600; line-height: 1.7rem; letter-spacing: -0.04rem; text-align: center; margin-right: 1rem;} .communityreply_contents .state .left span.count {display: inline-block; width: auto; height: 1.7rem; font-size: 1.3rem; color: #999; font-weight: 400; line-height: 1.7rem; letter-spacing: -0.04rem; text-align: center; margin-right: 1rem;} .communityreply_contents .state .right {float: right; display: inline-flex; align-items: center;} .communityreply_contents .state .right .sortBtn{display: inline-block; text-align: center; margin-top: -0.5rem; padding: 0 1rem; font-size: 1.3rem; letter-spacing: -0.02rem; font-weight: 500; line-height: 3rem; background: #fff; border: 1px solid #ddd; border-radius: 0.6rem; box-shadow: 0px 2px 4px rgba(0,0,0,0.07);} .communityreply_contents .replylist {float: left; width: 100%;} .communityreply_contents .replylist ul {float: left; width: 100%;} .communityreply_contents .replylist ul li {float: left; width: 100%; padding: 1.5rem 0;} .communityreply_contents .replylist ul li.child {padding-left: 5rem;} .communityreply_contents .replylist ul li .writer{display: inline-block; padding-top: 1rem; width:100%;} .communityreply_contents .replylist ul li .writer span.name{font-size: 1.1rem; color: #000; font-weight: 600; line-height: 1.5rem; letter-spacing: -0.04rem;} .communityreply_contents .replylist ul li .writer span.household{font-size: 1.1rem; color: #999; font-weight: 400; line-height: 1.5rem; letter-spacing: -0.04rem; padding-left:0.5rem;} .communityreply_contents .replylist ul li .replycontent{display: inline-block; width:100%; padding-top: 1rem; font-size:1.3rem; line-height: 1.5rem;border-bottom:none;} .communityreply_contents .replylist ul li .replycontent span.target{display: inline-block; width:100%; margin-bottom:0.5rem; color:#0065C5; font-size:1.1rem; line-height: 1.1rem;} .communityreply_contents .replylist ul li .date{display: inline-block; width:100%; color: #999;} .communityreply_contents .buttons {display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: 1rem;} .communityreply_contents .buttons .left {float: left; display: inline-flex; align-items: center; gap: 0.4rem; } .communityreply_contents .buttons .right {float: right; display: inline-flex; align-items: center;} .communityreply_contents .buttons button {float: right; display: inline-flex; align-items: center;} .communityreply_contents .buttons button span.icon {display: inline-block; width: auto; height: 1.7rem; font-size: 1.3rem; color: #999; line-height: 1.7rem; letter-spacing: -0.04rem; text-align: center;} .communityreply_contents .buttons button span.icon svg {width: 100%; height: 100%;} .communityreply_contents .buttons button span.count {display: inline-block; width: auto; height: 1.7rem; font-size: 1.3rem; color: #999; font-weight: 400; line-height: 1.7rem; letter-spacing: -0.04rem; text-align: center; margin-right: 1rem;} .communityreply_contents .buttons button.btn_answer span {color: #999;} .communityreply_contents .buttons button.btn_delete span {color: #FF611D;} div.line {height: 2px; background-color: #000; width: 100%; margin: 2rem 0;} div.line.gray {background-color: #adadad;} .replycontents {position: fixed; bottom: 0; width: 100%;} .replycontents .reply_wrap {display: block; width: 100%; text-align: center; padding: 3rem 2rem 2.5rem; background: #fff; border-radius: 30px 30px 0 0; overflow: hidden;} .replycontents .reply_wrap .head {display: inline-block; width: 100%; font-family : "Noto Sans KR", sans-serif; font-size: 2.6rem; color: #333; font-weight: 700; letter-spacing: -0.05rem; margin-bottom: 1rem;} .replycontents .reply_wrap .head span {float: left; font-size: 2rem; color: #333; font-weight: bold; line-height: 2.4rem; letter-spacing: -0.05rem;} .replycontents .reply_wrap .head span.target {float: left; font-size: 1.7rem; color: #0065C5; font-weight: bold; line-height: 2.4rem; letter-spacing: -0.05rem; margin-left:1rem} .replycontents .reply_wrap .head a {display: block;} .replycontents .reply_wrap .head a i {float: right; width: 2.3rem; height: 2.3rem;} .replycontents .reply_wrap .body {display: inline-block; width: 100%; font-family : "Noto Sans KR", sans-serif; font-size: 2.6rem; color: #333; font-weight: 700; letter-spacing: -0.05rem;} .replycontents .reply_wrap .body textarea {display: inline-block; width: 100%; height:10rem; border-radius: 10px; resize: none; box-sizing: border-box; padding:1rem; font-size:1.2rem;} .replycontents .reply_wrap .footer {display: inline-block; width: 100%; font-family : "Noto Sans KR", sans-serif; font-size: 2.6rem; color: #333; font-weight: 700; letter-spacing: -0.05rem;} .replycontents .reply_wrap .footer .btncheck {display: block; width: 100%; height: 5rem; margin-top: 1rem; background: #1c85eb; border-radius: 6px;} .replycontents .reply_wrap .footer .btncheck button {display: inline-block; width: 100%; text-align: center; font-size: 1.8rem; color: #fff; font-weight: 500; line-height: 5rem;} .replycontents .reply_wrap .footer .btncheck.flex_btn{display:flex; gap:0 1rem; background:none;} .replycontents .reply_wrap .footer .btncheck.flex_btn button{background:#1c85eb; border-radius: 6px; font-size: 1.6rem;} .replycontents .reply_wrap .footer .btncheck.flex_btn button.gray{color:#707070; background:#ddd;} /* END - 20251026 추가 */