Code - chominsoo4245/mjon

/* 주소록 관리 */ .adr_cont {background-color: #fff;padding: 40px;border-radius: 10px; min-height: 589px; display: none;} .adr_cont.current {display: block;} /* 주소록 관리 - 주소록 관리 */ .adr1 {display: flex; justify-content: space-between;} /* 왼쪽 */ .adr1_left {width: 24%; max-width: 279px;} .search_group_top {position: relative;} .search_group_top input[type="text"] { width: 100%; height: 45px; border-radius: 5px; border: 1px solid #ccc;} .search_group_top button {position: absolute; right: 15px; top: 50%; transform: translateY(-50%);} .adr1 .adrBox {background-color: #f2f2f2; padding: 15px; border: 1px solid #ccc; border-radius: 5px; margin-top: 15px; box-sizing: border-box;} .search_group_middle {display: flex; justify-content: space-between;} .search_group_middle input[type="text"] { background-color: #fff; width: calc(100% - 65px); height: 40px; border-radius: 5px;} .search_group_middle button {width: 55px; height: 40px; background-color: #999; color: #fff; border-radius: 5px;} .adrBox .check_group_all {margin: 20px 0 5px 0;} .adrBox .adr1_list {background-color: #fff; height: 352px; padding: 20px 20px 15px 20px; border-radius: 5px; margin: 7px 0 15px 0; box-sizing: border-box; max-height:352px;overflow:hidden;overflow-y:auto;} .check_group_all input[type="checkbox"]+label img {margin: 0 5px;} .adr_cb_wrap {min-height: 28px; margin-bottom: 8px; position: relative; display: flex;} .adr_cb_wrap>div {margin-top: 1px;} .adr_cb_wrap p {display: inline-block; cursor: pointer;} .adr_cb_wrap>p {line-height: 1.3; width: 100%; padding-left: 25px; position: relative; font-weight:300; letter-spacing:0;} .adr_cb_wrap p img {margin:0 4px 2px 2px; position: absolute; left: 0; top: 4px;} .adr_cb_wrap p input[type="text"] {width: 100%; height: 28px; border: 1px solid #ccc;} .adr_cb_wrap span span {color: #002c9a; font-weight: 500;} .adr1_exprot {margin-top: 15px;} .adr1_exprot p {float: left; font-size: 16px; font-weight: 500;} .adr1_exprot button {float: right; font-size: 14px; color: #666;} .adr1_exprot button i {background-image: url(/publish/images/content/export_adr.png); width: 13px; height: 13px; margin: 0 3px 2px 0;} .adr1_btnWrap {display: flex; justify-content: space-between; align-items: center;margin:0 0 5px;} .adr1_btnWrap>div:first-child>button {width: 45px; height: 22px; font-size: 14px;padding:0;} .adr1_btnWrap>div:last-child>button {background-color: #fff; border-radius: 5px; border: 1px solid #ccc; width: 22px; height: 22px;} /* 2022.04.06 JSP => 주소록 내보내기 기능 제거로 인해서 수정 => 라인제거 .adr1_btnWrap_bottom {display: flex; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid #ccc;} */ .adr1_btnWrap_bottom {display: flex; justify-content: space-between; padding-bottom: 0px;} .adr1_btnWrap_bottom button {background-color: #fff; width: calc(100%/3 - 2px); height: 32px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px;} button.group_join i {background-image: url(/publish/images/content/adress_group_join.png); width: 19px; height: 15px; margin: 0 2px 2px 0;} button.group_copy i {background-image: url(/publish/images/content/adress_group_copy.png); width: 13px; height: 14px; margin: 0 2px 2px 0;} button.group_move i {background-image: url(/publish/images/content/adress_intersect.png); width: 15px; height: 13px; margin: 0 2px 2px 0;} .search_group_bottom {display: flex; justify-content: space-between; margin-top: 10px;} .search_group_bottom input[type="text"] { background-color: #fff; width: calc(100% - 75px); height: 40px; border-radius: 5px;} .search_group_bottom button {width: 70px; height: 40px; background-color: #fff; color: #002c9a; border-radius: 5px; border: 1px solid #002c9a;} .qmMark {background-image: url(/publish/images/content/qmIcon_xs.png); width: 15px; height: 15px; margin: 0 0 2px 4px;} /* 오른쪽 */ .adr1_right {width: calc(100% - 24% - 20px);} .search_group_top2 {background-color: #f2f2f2; padding: 13px 20px 13px 20px;border: 1px solid #ccc; border-radius: 5px; margin-bottom: 20PX; position: relative;} .search_group_top2 span {font-size: 17px; padding-right: 15px; vertical-align: middle;} .search_group_top2 input[type="text"] {height: 40px; margin-right: 1px;} .search_group_top2 .group_search_name {width: 170px;} .search_group_top2 .group_search_num {width: 180px;} .search_group_top2 .selType2 {width: 180px; height: 40px; border: 0; margin-left: 0;} .search_group_top2 button {height: 40px; margin-left: 2px;} .search_group_top2 button.btnType21 {float: right;} .search_group_middle2 button {height: 36px; padding: 0 12px; border-radius: 5px; font-size: 16px;} .search_group_middle2 button.btnType9 {position: absolute; left: 56px;} .search_group_middle2 button.excel_btn {margin-left: 57px;padding:0 8px;} .search_group_middle2 .btnWrap_first {float: left; position: relative;} .search_group_middle2 .btnWrap_first .btnType21 {width: 52px;} .search_group_middle2 .btnWrap_first .btnType9 {width: 52px;} .search_group_middle2 .btnWrap_last {float: right;} .search_group_middle2 .btnWrap_last input[type="text"] {width: 180px; height: 36px; border-radius: 5px; border: 1px solid #ccc;} .search_group_middle2 .btnWrap_last .selType2 {border-radius: 5px; margin-left: 0;} .search_group_middle2 .btnWrap_last .btnType2 {width: 60px;} .search_group_bottom2 {background-color: #f2f2f2;padding: 10px 20px; border-radius: 5px; box-sizing: border-box; margin: 15px 0 25px 0 ; position: relative; display: flex; justify-content: space-between; justify-items: center;} .search_group_bottom2 button { background-color: #fff; height: 32px; padding: 0 10px; border: 1px solid #ccc; font-size: 14px; color: #555;} .search_group_bottom2 .selType2 {height: 32px; border-radius: 5px; font-size: 14px; font-weight: 400;} .search_group_bottom2 span {font-size: 16px; font-weight: 300; padding: 0 4px 0 4px;vertical-align:middle;} .search_group_bottom2>div {position: relative;} .search_group_bottom2 .btnWrap2::after {content: ""; position: absolute; width: 1px; height: 20px; background-color: #ccc; left: -6%; top: 50%; transform: translateY(-50%);} .search_group_bottom2 .btnWrap2::before {content: ""; position: absolute; width: 1px; height: 20px; background-color: #ccc; right: -6%; top: 50%; transform: translateY(-50%);} .search_group_bottom2 .btnWrap2 .selType2 {width: 150px;} .search_group_bottom2 .btnWrap3 .selType2 {width: 105px;} .search_group_bottom2 .btnWrap3 .btnType {background-color: #002c9a; color: #fff; border: 1px solid transparent; padding: 0 10px; } .search_group_bottom2 .btnWrap3 .btnType:last-child {color:#002c9a;border-color:#002c9a;background:#fff;} /* 주소록 등록 ㄱ~ㅎ 탭 */ .tabType7 {width: calc(100% - 80px);border-radius:10px 10px 0 0; border: 1px solid #e5e5e5; display: flex;text-align: center;margin-bottom: 20px;position: relative;background-color: #fff;} .tabType7::after {position: absolute;height: 2px;background-color: #000;width: calc(100% + 80px); content: "";bottom: 0;left: 0; z-index: 1;} .tabType7 li {width: calc(100% /17);} .tabType7 li button {width: 100%; height: 45px; padding: 10px 0; border-radius: 10px 0 0 0; font-size: 17px;border-right: 1px solid #e5e5e5;background-color: #fff; font-weight: 300;} .tabType7 li:first-child {width: 80px !important; border-right: 0;border-radius: 10px 0 0 0; z-index: 1;} .tabType7 li:last-child button {border-radius: 0 10px 0 0; border-right: 0;} .tabType7 li.active button {background-color: #46484a; height: 45px; border-radius:10px 10px 0 0;color: #fff;border-left: 1px solid transparent;} /* 주소록관리 리스트 */ .adr_list.tb_wrap{min-height: 428px; margin-top: 10px;} .adr_list table td input[type="text"]{width: 100%; margin: 0 auto; text-align: center; margin-right: 0; font-size: 14px; letter-spacing: -0.5px; color: #666; padding: 0 5px;} /*// 주소록 관리 - 주소록 관리 */ /* 주소록 관리 - 수신거부 관리 */ .price_history_cont {display: none;} .price_history_cont.current {display: block;} .adr_cont .excel_middle .calendar_wrap>input[type="text"] {height: 32px;line-height:30px;} .adr_cont .excel_middle .calendar_wrap button {background-color: transparent;} .adr_cont .excel_middle .calendar_wrap button:hover {box-shadow: 0px 0px 5px 3px transparent;} .adr_cont .select_btnWrap>div:first-child button {color: #222;} .adr_cont .excel_middle {margin: 10px 0 20px 0;} .list_tab_wrap2.type3 {position: relative;} .list_tab_wrap2.type3 .btnType2 {position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-weight: 300; padding: 0 10px;} .adr_cont .tType4 tbody td {position: relative;} .adr_2 input[type="text"]{width: calc(100% - 35px);} .adr_2 .tType4 .btnType20{width: auto;padding: 0 8px;} .adr_2 .tType4 .btnType20 span{ margin-left: 0px; background-color: #002c9a; color: #fff; width: 18px; height: 18px; display: inline-block; border-radius: 100%; vertical-align: middle; line-height: 1.2; text-align: center; margin-top: -2px;} .adr2_hover_cont {position: absolute; background-color: #fff; width: 200px; padding: 15px; border-radius: 5px; box-sizing: border-box ;box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.15); top: 35px; right: 15px; z-index: 9; text-align: left;font-size: 14px; color: #222; display: none;} .adr2_hover_cont p { font-weight: 500; padding-bottom: 5px;} .adr2_hover_cont span {font-weight: 300; position: relative; padding-left: 15px; display: inline-block; line-height: 1.4; letter-spacing: -1px;} .adr2_hover_cont span::after {content: "※"; position: absolute; top: 0px; left: 0;} .adr2_hover_cont.on {display: block;} /* //주소록관리 - 수신거부 관리 */ /* 주소록 관리 - 주소록 무료대행 */ .adr_cont td.attachedFile_wrap input[type="text"] {width: 470px;} .adr_cont td.attachedFile_wrap .btnType9 {width: 90px; height: 40px; margin-left: 3px;} .adr_cont td.adress_textarea textarea {background-color: #f2f2f2; width: 100%; height: 140px; border-radius: 5px; border: 0;} .adr_cont td.adress_textarea textarea::placeholder {color: #a6a6a6;} .adr_cont td.adress_textarea textarea:-ms-input-placeholder {color: #a6a6a6;} .adr_cont td.privacyAgree>div:first-child {background-color: #f2f2f2; width: 100%; padding: 15px 30px; border-radius: 5px; margin-bottom: 5px; box-sizing: border-box;} .adr_cont td.privacyAgree>div p {line-height: 1.5; color: #555; font-weight: 300;font-size: 16px;} .adr_cont td.privacyAgree input[type="checkbox"]+label {vertical-align: bottom;} .adrsFree_list_wrap {margin-top: 70px;} .adrFree_list_title {margin-bottom: 15px;} .adrFree_list_title p:first-child {float: left; font-size: 20px; font-weight: 600;} .adrFree_list_title p:last-child {float: right; font-size: 14px; color: #e40000; padding-top: 4px;} .adr_free_list.tb_wrap{min-height: 415px; margin-bottom: 30px;} .adr_free_list .td_file a,.adr_free_list .td_file p{display: inline-block; width: auto; vertical-align: middle;} .adr_free_list .td_file a{margin-left: 5px;} /*// 주소록 관리 - 주소록 무료대행 */ /* 주소록 등록 */ .enroll_cont {background-color: #fff; border-radius: 10px; display: none;} .enroll_cont.current {display: block;} .eleType_cont {display: none;} .eleType_cont.current {display: block;} /* board list tab */ .adr_depth3 {display: flex; justify-content: center; margin: 50px 0;} .adr_depth3 li { padding-right:30px; position: relative;} .adr_depth3 li::before {content: "";position: absolute;top: 47%;right: 15px; width: 1px;height: 15px;background: #d5d5d5;transform: translateY(-50%);} .adr_depth3 li:last-child::before {content: none;} .adr_depth3 li button { font-size: 18px; color: #666; font-weight: 300;} .adr_depth3 li.active button { color: #002c9a; font-weight: 500; position: relative; } .adr_depth3 li.active button::after {content: ""; position: absolute; width: 90%; height: 9px; background-color: rgba(0,44,154,0.15);bottom: -1px; left: 50%; transform: translateX(-50%);} .addWrap {width:100%;padding:40px 10px 40px 40px;box-sizing: border-box;border-radius: 10px;box-shadow:0px 0px 10px 5px rgb(0 0 0 / 9%);} .add_and {width:100%;display: flex;flex-flow: wrap;justify-content: flex-start;align-items: flex-start;flex-direction: row;} .add_and li {position:relative;width: calc(89%/4);background-color:#eaeaea;border-radius: 15px;margin: 25px 0;margin-right: 32px;padding: 45px 0 15px 0;text-align:center;font-size:18px;color:#222;line-height: 30px;letter-spacing: -1px;} .add_and li strong {font-weight:500;} .addWrap.android .add_and li:last-child {width:calc(100%);} .add_and li:nth-child(4), .add_and li:nth-child(8) {margin-right:0;} .add_and li:nth-child(4)::after, .add_and li:nth-child(8)::after, .add_and li:last-child::after {content: '';background:none;} .add_and li::after {content:'';width:20px;height:34px;background:url('/publish/images/content/icon_arrR.png') no-repeat 0 0;position: absolute;right: -27px;top:47%;} .add_and li>p {height: 55px; line-height: 1.5; font-weight: 300;} .add_and li img {width:100%;} .add_and .number {position:absolute;top:-25px;left:50%;transform:translate(-50%, 0);background:url('/publish/images/content/btn_addBg.png') no-repeat 0 0;width:61px;height:61px;background-size: 100%;color:#fff;font-size:16px;text-align: center;line-height:60px;letter-spacing: 0;} .addWrap.iphone .add_and li:last-child {width: calc(72.5%);margin-right: 0 !important;padding-bottom: 20px;} .addWrap.vcf {margin-top:40px;} .addWrap .btnWrap {text-align:center;margin: 20px 0;} .addWrap .btnWrap button {width:220px;height:60px;font-size:20px;border-radius: 5px;transition: 0.3s ease;} .addWrap .btnWrap button:hover {box-shadow:0px 0px 5px 4px rgb(0 44 154 / 15%);transition: 0.3s ease;} .addWrap .btnWrap button:nth-child(1) {background-color:#002c9a;color:#fff;margin-right:5px;} .addWrap .btnWrap button:nth-child(2) {background-color:#fff;color:#002c9a;border:1px solid #002c9a;} /* 주소록 등록_수정 */ .eleType_cont.current.address{margin:40px 0 0 0;} .addWrap.android .add_and .nine {width:calc(100%);} .addWrap.android .add_and .nine::after {content:'';background:none;} /* // 주소록 등록 */ /* media queries */ @media only screen and (max-width:1540px){ /* 주소록 관리 - 주소록 관리 */ /* right */ .search_group_middle2 .btnWrap_last .selType2 {width: 120px;} .search_group_top2 {padding: 13px 10px;} .search_group_top2 span {padding-right: 5px; font-size: 15px;} .search_group_bottom2 span {font-size: 15px; padding: 0 2px;} } @media only screen and (max-width:1480px){ /* 주소록 관리 - 주소록 관리 */ /* left */ .adressBox .adr1_list {padding: 20px 10px 15px 10px;} /* right */ .search_group_top2 .group_search_name {width: 120px;} .search_group_top2 .group_search_num {width: 150px;} .search_group_top2 .selType2 {width: 150px;} .search_group_top2 button.btnType2 {padding: 0 8px;} .search_group_middle2 button {padding: 0 2px;} .search_group_middle2 button.btnType9 {left: 54px;} .search_group_middle2 button.excel_btn {margin-left: 55px;} .search_group_middle2 .btnWrap_first .btnType21 {width: 50px;} .search_group_middle2 .btnWrap_first .btnType9 {width: 50px;} .search_group_middle2 .btnWrap_last .btnType2 {width: 50px;} .search_group_middle2 .btnWrap_last input[type="text"] {width: 170px;} .search_group_middle2 .btnWrap_last .selType2 {width: 120px;} .search_group_bottom2 button {padding: 0 8px;} .search_group_bottom2 .btnWrap2::after {display:none;} .search_group_bottom2 .btnWrap2::before {display:none;} .search_group_bottom2 .btnWrap2 .selType2 {width:125px;} } @media only screen and (max-width:1260px){ /* 주소록 관리 - 주소록 관리 */ .adr_cb_wrap p img { margin: 0 2px 2px 1px;} /* right */ .search_group_bottom2 .btnWrap2::after {left:-4%;} .search_group_bottom2 .btnWrap2::before {right: -4%;} }