File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
/* =======================================================================================
BASIC TAB CONTENT DISPLAY
======================================================================================= */
.tab_content,.alarm_cont,.fee_cont{display:none;}
.tab_content.current,.alarm_cont.current,.fee_cont.current{display:block;}
.tabs{display:flex;width:100%;margin:0 0 40px;}
.tabs.tab02 li{width:calc(100%/2);}
.tabs.tab03 li{width:calc(100%/3);}
.tabs.tab04 li{width:calc(100%/4);}
.tabs.tab05 li{width:calc(100%/5);}
.tabs.tab06 li{width:calc(100%/6);}
/* =======================================================================================
TAB STYLE — FILL TYPE
======================================================================================= */
.tabs.fill{display:flex;width:100%;background:#eff2f9;border-radius:10px;padding:0 20px;}
.tabs.fill .tab{width:100%;min-width:180px;height:60px;font-size:20px;font-weight:500;color:#8f96a6;}
.tabs.fill .tab.active{border-bottom:3px solid var(--primary-color);font-weight:600;color:var(--primary-color);}
.tabs.fill.yellow{background:#f4f4f5;color:#222;padding:0;}
.tabs.fill.yellow .tab{font-size:16px;font-weight:500;border-radius:10px;}
.tabs.fill.yellow .tab.active{color:#222;background:var(--secondary-light-color);border:1px solid #46484a;}
/* =======================================================================================
TAB STYLE — LINE TYPE
======================================================================================= */
.tabs.line{display:flex;width:100%;border:1px solid #ced3de;border-bottom:2px solid var(--primary-color);border-radius:10px 10px 0 0;}
.tabs.line .tab{position:relative;width:100%;height:50px;font-size:18px;border-right:1px solid #ced3de;}
.tabs.line .tab.active{background:#e9eef8;color:var(--primary-color);font-weight:600;border-radius:10px 10px 0 0;}
.tabs.line .tab.active::after{content:"";position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border:2px solid var(--primary-color);border-bottom:0;border-radius:10px 10px 0 0;}
.tabs.line :last-child .tab{border-right:0;}
/* =======================================================================================
OLD TAB CONTENT (tap → tab 오타 대응용)
======================================================================================= */
.top_content,.custom_content,.bottom_content,.popup_cont,.history_cont{display:none;}
.top_content.current,.custom_content.current,.bottom_content.current,.popup_cont.current,.history_cont.current{display:block;}
/* =======================================================================================
TAB TYPE 1 — 상단 탭 (일반문자/대량문자)
======================================================================================= */
.tabType1{display:flex;width:100%;margin:0 0 20px;background:#fff;border-radius:5px;border:1px solid var(--primary-color);text-align:center;}
.tabType1 li{flex-basis:calc(100%/2);position:relative;}
.tabType1 li button{width:100%;height:60px;padding:13px 0;font-size:18px;color:#222;position:relative;z-index:1;}
.tabType1 li.active{background:var(--primary-color);}
.tabType1 li.active::after{content:"";position:absolute;top:-1px;left:-1px;width:100%;height:100%;border:1px solid #46484a;}
.tabType1 li.active button{color:#fff;background:#46484a;border:1px solid #46484a;}
.tabType1 li.active button::before{content:"";position:absolute;top:-1px;left:-1px;width:100%;height:100%;border:2px solid #46484a;box-sizing:border-box;}
.tabType1 li.active button::after{content:"";position:absolute;top:-5px;left:-5px;width:100%;height:100%;border:5px solid #46484a;border-radius:10px;}
/* =======================================================================================
TAB TYPE 2 — 하단 탭
======================================================================================= */
.tabType2{display:flex;width:calc(100% - 600px);margin:0 0 20px;position:relative;background:#fff;border-radius:10px 10px 0 0;text-align:center;}
.tabType2::after{content:"";position:absolute;bottom:0;left:0;width:calc(100% + 600px);height:2px;background:#000;}
.tabType2 li{flex-basis:calc(100%/4);min-width:200px;}
.tabType2 li button{width:100%;padding:13px 0;font-size:20px;background:#fff;border-left:1px solid #e5e5e5;}
.tabType2 li:first-child button{border-left:0;border-radius:10px 0 0 0;}
.tabType2 li:nth-child(3) button{border-left:0;}
.tabType2 li:last-child button{border-radius:0 10px 0 0;}
.tabType2 li.active button{background:#46484a;color:#fff;border-radius:10px 10px 0 0;border-left:1px solid transparent;}
/* =======================================================================================
TAB TYPE 4 — 3분할, 2분할 탭
======================================================================================= */
.tabType4{display:flex;width:100%;margin:0 0 20px;background:#fff;border:1px solid var(--primary-color);border-radius:5px;text-align:center;}
.tabType4 li{flex-basis:calc(100%/3);position:relative;}
.tabType4 li::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:1px;height:34px;background:#ccc;}
.tabType4 li:last-child::after,.tabType4 li.active::after{content:none;}
.tabType4 li button{position:relative;width:100%;height:50px;padding:12px 0;font-size:18px;letter-spacing:-.5px;}
.tabType4 li.active button{background:#46484a;color:#fff;border:1px solid #46484a;border-radius:10px;}
.tabType4 li.active button::before{content:"";position:absolute;top:-1px;left:-1px;width:100%;height:100%;border:2px solid #46484a;box-sizing:border-box;}
.tabType4 li.active button::after{content:"";position:absolute;top:-5px;left:-5px;width:100%;height:100%;border:5px solid #46484a;border-radius:13px;}
.tabType4.tabTwo li{flex-basis:calc(100%/2);}
/* =======================================================================================
TAB TYPE 5 — 심플한 3분할 탭
======================================================================================= */
.tabType5{display:flex;width:100%;background:#fff;border:1px solid #dfdfdf;border-bottom:1px solid #46484a;border-radius:5px 5px 0 0;text-align:center;}
.tabType5 li{flex-basis:calc(100%/3);position:relative;}
.tabType5 li::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:1px;height:100%;background:#c7c8c8;}
.tabType5 li:last-child::after,.tabType5 li.active::after{content:none;}
.tabType5 li button{width:100%;height:45px;font-size:18px;}
.tabType5 li.active button{background:#46484a;color:#fff;border-radius:5px 5px 0 0;font-weight:300;}
/* =======================================================================================
TAB TYPE 6 — 전송내역 팝업 탭
======================================================================================= */
.tabType6{display:flex;width:100%;background:#fff;border-bottom:1px solid #e5e5e5;text-align:center;}
.tabType6 li{flex-basis:calc(100%/2);}
.tabType6 li button{width:100%;height:35px;font-size:16px;border:1px solid #dfdfdf;border-bottom:1px solid #e5e5e5;border-radius:5px 5px 0 0;}
.tabType6 li.active button{background:#c8c8c8;border:1px solid #c8c8c8;border-radius:5px 5px 0 0;}
/* =======================================================================================
AREA TABS — 기본 레이아웃
======================================================================================= */
.area_tabs{text-align:center;margin:0 0 30px 0;}
.area_tabs .top_tab{position:relative;display:flex;padding:0 0 0 160px;justify-content:space-between;align-items:center;}
/* 전체/기업/개인 용 탭 - 현재 없음 */
/* .tab_depth1{position:relative;display:flex;height:36px;font-size:16px;color:#555;border:1px solid #bcbdc1;border-radius:4px;box-shadow:inset 2px 2px 4px rgba(0,0,0,.2);background:#ecedef;align-self:center;}
.tab_depth1 a{width:50px;line-height:36px;border-right:1px solid #bcbdc1;}
.tab_depth1 a:first-child{border-radius:5px 0 0 5px;}
.tab_depth1 a:last-child{border-right:0;border-radius:0 5px 5px 0;}
.tab_depth1 a.on{background:#fff;border:1px solid var(--primary-color);color:var(--primary-color);font-size:16px;font-weight:500;height:36px;line-height:35px;margin-top:-1px;}
.tab_depth1 a.on:last-child{border-radius:0 5px 5px 0;}
.tab_depth1 .on_active{display:none;} */
.area_tabs .tab_depth2{display:flex;width:45%;justify-content:center;margin:0 auto;align-self:center;}
.area_tabs .tab_depth2>div{display:none;}
.area_tabs .tab_depth2 .photo_wrap.active{display:block;}
.area_tabs .tab_depth2 a{display:flex;height:53px;padding:0 30px;margin:0 5px;font-size:20px;color:#555;line-height:50px;border:1px solid #b1b1b1;border-radius:100px;flex-basis:calc(60%/3);background:#fff;transition:.1s;justify-content:center;align-items:center;}
.area_tabs .tab_depth2 a.on{position:relative;background:#fff;border:3px solid var(--primary-color);color:#002c90;font-weight:600;box-shadow:3px 3px 5px rgba(0,0,0,.3);height:53px;line-height:44px;}
.area_tabs .tab_depth2 a.on::after{content:"▼";position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-size:15px;}
.area_tabs .tab_depth2 a.tab_next::after,.tab_depth2 a.tab_prev::after{display:none;}
.area_tabs .tab_depth3{display:flex;width:100%;padding:20px 40px;margin:0 0 30px 0;font-size:16px;font-weight:300;color:#666;letter-spacing:-.5px;background:#f2f2f2;border-radius:10px;box-sizing:border-box;flex-wrap:wrap;justify-content:center;}
.area_tabs .tab_depth3 a{position:relative;padding:0 15px;line-height:2;}
.area_tabs .tab_depth3 a:hover{color:var(--primary-color);text-decoration:underline;}
.area_tabs .tab_depth3 a.on{font-weight:600;color:var(--primary-color);}
.area_tabs .tab_depth3 a.on::before{position:absolute;content:"";width:calc(100% - 25px);height:5px;background:rgba(0,62,217,.2);bottom:8px;left:12px;}
.area_tabs .tab_depth3 a::after{position:absolute;content:"";width:4px;height:4px;background:#c3c4c5;border-radius:50%;top:15px;right:-3px;}
.area_tabs .tab_depth3 a:last-child::after{display:none;}
.area_tabs .tab_depth4{position:relative;min-width:550px;margin:0 auto;font-size:15px;}
.area_tabs .tab_depth4 a{display:inline-block;padding:8px 25px;border:1px solid #dbdce0;font-size:16px;font-weight:400;color:#666;background:#fff;margin:5px;border-radius:30px;transition:.2s;}
.area_tabs .tab_depth4 a.on{background:var(--secondary-light-color);border-color:var(--secondary-light-color);color:#222;font-weight:500;box-shadow:0 0 7px rgba(0,0,0,.25);}
/* =======================================================================================
LIST TAB WRAP — TEXT LINE STYLE
======================================================================================= */
.list_tab_wrap{position:relative;}
.list_tab_wrap ul{display:flex;max-width:calc(100% - 150px);margin:50px 0 -5px;flex-wrap:wrap;}
.list_tab_wrap ul li{position:relative;padding:0 30px 5px 0;}
.list_tab_wrap ul li::before{content:"";position:absolute;top:47%;right:15px;transform:translateY(-50%);width:1px;height:15px;background:#d5d5d5;}
.list_tab_wrap ul li:last-child::before{display:none;}
.list_tab_wrap ul li button{font-size:18px;color:#666;font-weight:300;}
.list_tab_wrap ul li.active button{color:var(--primary-color);font-weight:500;position:relative;}
.list_tab_wrap ul li.active button::after{content:"";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:90%;height:9px;background:rgba(0,44,154,.15);}
.list_tab_wrap .selType2{position:absolute;right:0;top:-5px;}
/* =======================================================================================
LIST TAB WRAP 2 — BOX TAB STYLE
======================================================================================= */
.list_tab_wrap2{position:relative;}
.list_tab_wrap2::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:#000;}
.list_tab_wrap2 ul{display:flex;text-align:center;background:#fff;margin-bottom:20px;position:relative;}
.list_tab_wrap2 ul li{border-top:1px solid #e5e5e5;}
.list_tab_wrap2 ul li:first-child{border-left:1px solid #e5e5e5;border-radius:10px 0 0 0;}
.list_tab_wrap2 ul li:last-child{border-right:1px solid #e5e5e5;border-radius:0 10px 0 0;}
.list_tab_wrap2 ul li button{width:100%;height:45px;padding:10px 0;font-size:17px;border-right:1px solid #e5e5e5;background:#fff;}
.list_tab_wrap2 ul li:last-child button{border-right:0;border-radius:0 10px 0 0;}
.list_tab_wrap2 ul li.active button{background:#46484a;color:#fff;border-radius:10px 10px 0 0;border-right:1px solid transparent;}
.list_tab_wrap2.type2 ul li{width:120px;}
.list_tab_wrap2.type3 ul li{width:180px;}
.list_tab_wrap2.type4 ul li{width:150px;}
.list_tab_wrap2.type5 ul li{width:200px;}
.list_tab_wrap2.type3 .btnType2{position:absolute;right:0;top:50%;transform:translateY(-50%);font-weight:300;padding:0 10px;}
/* =======================================================================================
PAY TAB (노란색 배경)
======================================================================================= */
.pay_cont{display:none;}
.pay_cont.current{display:block;}
.pay_tab_wrap .tabType1{background:#f4f4f5;color:#222;margin:30px 0;border:0;border-radius:5px;}
.pay_tab_wrap .tabType1 li::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:1px;height:30px;background:#d5d5d5;}
.pay_tab_wrap .tabType1 li:last-child::after{display:none;}
.pay_tab_wrap .tabType1 li:first-child button{border-radius:5px 0 0 5px;}
.pay_tab_wrap .tabType1 li:last-child button{border-radius:0 5px 5px 0;}
.pay_tab_wrap .tabType1 li.active{background:transparent;}
.pay_tab_wrap .tabType1 li.active::after{display:none;}
.pay_tab_wrap .tabType1 li.active button{background:#fbc72b;color:#222;border-radius:5px;line-height:25px;}
.pay_tab_wrap .tabType1 li.active button::before,.pay_tab_wrap .tabType1 li.active button::after{display:none;}
/* =======================================================================================
TAB TYPE 7 — 주소록 등록 ㄱ~ㅎ
======================================================================================= */
.tabType7{display:flex;width:calc(100% - 80px);margin-bottom:20px;position:relative;background:#fff;border:1px solid #e5e5e5;border-radius:10px 10px 0 0;text-align:center;}
.tabType7::after{content:"";position:absolute;bottom:0;left:0;width:calc(100% + 80px);height:2px;background:#000;z-index:1;}
.tabType7 li{width:calc(100%/17);}
.tabType7 li:first-child{width:80px!important;border-right:0;border-radius:10px 0 0 0;z-index:1;}
.tabType7 li button{width:100%;height:45px;padding:10px 0;font-size:17px;font-weight:300;background:#fff;border-right:1px solid #e5e5e5;border-radius:10px 0 0 0;}
.tabType7 li:last-child button{border-right:0;border-radius:0 10px 0 0;}
.tabType7 li.active button{background:#46484a;color:#fff;border-radius:10px 10px 0 0;border-left:1px solid transparent;}
/* =======================================================================================
TABLE TAB WRAP — 발송결과 탭
======================================================================================= */
.tab_phone{display:none;}
.tab_phone.current{display:block;}
.table_tab_wrap{position:relative;}
.table_tab_wrap ul{display:flex;height:60px;padding:0 30px;margin-bottom:25px;align-items:center;background:#f2f2f2;border-radius:5px;box-sizing:border-box;}
.table_tab_wrap ul li{position:relative;padding:0 46px 5px 0;}
.table_tab_wrap ul li::before{content:"";position:absolute;top:52%;right:23px;transform:translateY(-50%);width:1px;height:15px;background:#d5d5d5;}
.table_tab_wrap ul li:last-child::before{display:none;}
.table_tab_wrap ul li button{font-size:18px;color:#666;font-weight:300;}
.table_tab_wrap ul li.active button{color:var(--primary-color);font-weight:500;position:relative;}
.table_tab_wrap ul li.active button::after{content:"";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:90%;height:9px;background:rgba(0,44,154,.15);}
.table_tab_wrap .selType2{position:absolute;top:50%;right:30px;transform:translateY(-50%);width:130px;}
/* 발송결과 개선 버튼 추가 */
.table_tab_wrap .tab_btnbox{position:absolute;top:50%;right:30px;transform:translateY(-50%);z-index:9;}
.table_tab_wrap .tab_btnbox button.btnType.btnType14.check_validity{border:1px solid var(--primary-color);color:var(--primary-color);}
.table_tab_wrap .tab_btnbox .qmMark{background:url(../images/content/qmIcon_s.png) no-repeat;width:19px;height:19px;}
/* =======================================================================================
마이페이지
======================================================================================= */
.mypage_content .tabType1 {background:#f4f4f5;color:#222;margin:40px 0 0 0;}
.mypage_content .tabType1 li.active button {background-color: var(--secondary-light-color); color: #222;}