diff --git a/src/main/webapp/publish/css/common.css b/src/main/webapp/publish/css/common.css
index c983fc56..450ee3b9 100644
--- a/src/main/webapp/publish/css/common.css
+++ b/src/main/webapp/publish/css/common.css
@@ -153,11 +153,13 @@ caption, .label {position: absolute;width: 1px;height: 1px;margin: -1px;border:
 .login2 .event {white-space:nowrap;}
 
 /* 보안로그인 */
-.security_box{display:inline-flex;height:36px;font-weight:500;background:#fff;padding:0 11px;margin:0 0 0 10px;vertical-align:middle;border-radius:5px;align-items:center;}
-.login2 .login_info .security_box i.icon_lock{display:inline-block;width:20px;height:18px;background:url(/publish/images/icon_lock.png) no-repeat center center;background-size:auto 100%;vertical-align:top;}
-.security_box .state{font-size:13px;font-weight:600;padding:5px 10px;margin:0 0 0 5px;border-radius:5px;}
-.security_box .state.on{border:1px solid #18bb59;background:#e7f8ee;color:#18bb59;}
-.security_box .state.off{border:1px solid #e62c2c;background:#fce9e9;color:#e62c2c;}
+.security_box{display:inline-flex;height:36px;font-weight:500;background:#fff;padding:0 8px 0 11px;margin:0 0 0 3px;vertical-align:middle;border-radius:5px;align-items:center;}
+.security_box.red_box{border:1px solid #ca1a1a;}
+.security_box.green_box{border:1px solid #0ca448;}
+.security_box p{cursor:pointer;}
+.security_box .state{display:flex;width:40px;height:25px;font-size:13px;font-weight:600;margin:0 0 0 5px;border-radius:5px;justify-content:center;align-items:center;cursor:pointer;}
+.security_box .state.on{background:#18bb59;color:#fff;}
+.security_box .state.off{background:#e62c2c;color:#fff;}
 
 /* //header */
 
diff --git a/src/main/webapp/publish/css/mem.css b/src/main/webapp/publish/css/mem.css
index 0583065f..66b33bf5 100644
--- a/src/main/webapp/publish/css/mem.css
+++ b/src/main/webapp/publish/css/mem.css
@@ -585,10 +585,13 @@ input[type="password"].list_inputType1 {padding: 0px;background-color: transpare
 .security_login .btn_plus{position:absolute;right:0;}
 .security_login .set_area{display:flex;align-items:center;}
 .security_login .lately_date{font-size:15px;color:#666;}
-.security_login .tab_depth1{margin:0 0 0 15px;text-align:center;}
-.security_login .tab_depth1 a{display:inline-flex;justify-content:center;align-items:center;}
-.security_login .tab_depth1 a:last-child{border-right:0;}
-.security_login .tab_depth1 a.on:last-child{border-right:1px solid;border-radius: 0 5px 5px 0 !important;}
+.security_login .security_tab{position:relative;width:80px;margin:0 0 0 15px;text-align:center;border-radius:100px;border:0;box-shadow:none;background:transparent;}
+.security_login .security_tab.on::after{position:absolute;content:"";width:25px;height:25px;border-radius:100%;background:#fff;top:5px;right:5px;box-shadow:0 0 5px rgba(0,0,0,0.3);cursor:pointer;}
+.security_login .security_tab.off::after{position:absolute;content:"";width:25px;height:25px;border-radius:100%;background:#fff;top:5px;left:5px;box-shadow:0 0 5px rgba(0,0,0,0.3);cursor:pointer;}
+.security_login .tab_depth1 a{display:none;font-size:16px;font-weight:bold;line-height:32px;}
+.security_login .tab_depth1 a.on{display:block;margin:0;box-shadow:inset 0 0 3px rgba(0,0,0,0.2);}
+.security_login .tab_depth1 a:first-child.on{position:absolute;width:100%;text-align:left;padding:0 0 0 12px;color:#fff;border:1px solid #0ca448;background:#18bb59;border-radius:100px;}
+.security_login .tab_depth1 a:last-child.on{position:absolute;width:100%;text-align:right;padding:0 12px 0 0;color:#fff;border:1px solid #ca1a1a;background:#e62c2c;border-radius:100px;}
 
 .security_login .title_area{position:relative;display:flex;margin:30px 0 15px 0;align-items:center;}
 .security_login .qmMark{width:20px;height:20px;margin:-4px 0 0 8px;font-size:14px;font-weight:bold;font-family:'GmarketSansBold';background:#d7d7d9;border-radius:5px;color:#666;text-align:center;line-height:22px;cursor:pointer;}
diff --git a/src/main/webapp/publish/mypage_index_2024.html b/src/main/webapp/publish/mypage_index_2024.html
index 3736f21e..e20c350e 100644
--- a/src/main/webapp/publish/mypage_index_2024.html
+++ b/src/main/webapp/publish/mypage_index_2024.html
@@ -24,25 +24,21 @@
 		$(function () {
 
 			// on/off 시 confirm 창 노출
-			$('.security_tab a').click(function (e) {
-				console.log($(this).hasClass("on"))
-				if ($(this).hasClass("on") == false) {
-					if ($(this).text().trim() == "ON") {
-						if (!confirm("보안로그인 설정 후 로그인 시, 등록한 휴대폰번호로 추가 인증이 진행됩니다")) {
-							$(this).removeClass("on");
-							$(this).siblings("a").addClass("on");
-						} else {
-							$(this).addClass("on");
-							$(this).siblings("a").removeClass("on");
-						}
+			$(".security_tab").click(function () {
+				if ($(this).find("a.on").text().trim() == "ON") {
+					if (!confirm("보안로그인 설정 후 로그인 시, 등록한 휴대폰번호로 추가 인증이 진행됩니다")) {
+						$(this).find("a.on").siblings("a").removeClass("on");
+						
 					} else {
-						if (!confirm("가입자 휴대폰번호로 본인인증 후 해제가 가능하며, 보안로그인 설정을 해제함으로써 발생하는 손해에 대하여 회사는 책임지지 않습니다.")) {
-							$(this).removeClass("on");
-							$(this).siblings("a").addClass("on");
-						} else {
-							$(this).addClass("on");
-							$(this).siblings("a").removeClass("on");
-						}
+						$(this).find("a.on").removeClass("on").siblings("a").addClass("on");
+						$(this).removeClass("on").addClass("off");
+					}
+				} else if($(this).find("a.on").text().trim() == "OFF") {
+					if (!confirm("가입자 휴대폰번호로 본인인증 후 해제가 가능하며, 보안로그인 설정을 해제함으로써 발생하는 손해에 대하여 회사는 책임지지 않습니다.")) {
+						$(this).find("a.on").siblings("a").removeClass("on");
+					} else {
+						$(this).find("a.on").removeClass("on").siblings("a").addClass("on");
+						$(this).removeClass("off").addClass("on");
 					}
 				}
 			});
@@ -228,10 +224,13 @@
 						</div>
 						<button type="button" class="btnType btnType3">마이페이지</button>
 						<button type="button" class="btnType btnType2">로그아웃</button>
-						<div class="security_box">
-							<p class="title"><i class="icon_lock"></i>보안로그인</p>
-							<a href="#" class="state on">ON</a>
-							<!-- <a href="#" class="state off">OFF</a> -->
+						<div class="security_box red_box">
+							<a href="#" class="title">보안로그인</a><!-- 보안로그인 클릭시 보안로그인 홈페이지로 -->
+							<span class="state off">OFF</span><!-- ON/OFF 클릭시 이벤트 발생 -->
+						</div>
+						<div class="security_box green_box">
+							<a href="#" class="title">보안로그인</a>
+							<span class="state on">ON</span>
 						</div>
 					</div>
 					<div class="login_pay">
@@ -304,7 +303,7 @@
 								<div class="set_area">
 									<p class="lately_date">최근 변경일시 : <span>2024-11-01 12:49</span></p>
 
-									<div class="tab_depth1 security_tab">
+									<div class="tab_depth1 security_tab on">
 										<a href="#none" class="on">ON</a>
 										<a href="#none">OFF</a>
 									</div>
@@ -324,9 +323,9 @@
 								<div class="set_area">
 									<p class="lately_date">최근 변경일시 : <span>2024-11-01 12:49</span></p>
 
-									<div class="tab_depth1 security_tab">
-										<a href="#none" class="on">ON</a>
-										<a href="#none">OFF</a>
+									<div class="tab_depth1 security_tab off">
+										<a href="#none">ON</a>
+										<a href="#none" class="on">OFF</a>
 									</div>
 								</div>
 							</div>