233 lines
16 KiB
CSS
233 lines
16 KiB
CSS
/* 주소록 관리 */
|
|
.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%;}
|
|
|
|
}
|
|
|