diff --git a/egovframe-template-simple-react-contribution/src/css/base.css b/egovframe-template-simple-react-contribution/src/css/base.css
index ee8060b..250e35d 100644
--- a/egovframe-template-simple-react-contribution/src/css/base.css
+++ b/egovframe-template-simple-react-contribution/src/css/base.css
@@ -67,6 +67,7 @@ button {cursor: pointer;}
 .w_20 {width: 20px;}
 .w_50 {width: 50px;}
 .w_70 {width: 70px;}
+.w_75 {width: 75px;}
 .w_80 {width: 80px;}
 .w_100 {width: 100px;}
 .w_120 {width: 120px;}
@@ -114,6 +115,7 @@ button {cursor: pointer;}
 .bg-f8f {background: #F8FAFC !important;}
 
 .text-4c6 {color: #4C6C84 !important;}
+.text-222 {color: #222222 !important;}
 .text-224 {color: #22498E !important;}
 
 .clickable{cursor: pointer;}
diff --git a/egovframe-template-simple-react-contribution/src/css/layout.css b/egovframe-template-simple-react-contribution/src/css/layout.css
index f67773b..99b3886 100644
--- a/egovframe-template-simple-react-contribution/src/css/layout.css
+++ b/egovframe-template-simple-react-contribution/src/css/layout.css
@@ -53,11 +53,11 @@ body {min-width: 1400px;}
     box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
 }
 
-.header .topcode .topcodebnt:hover{
-    background-color: #8F8F8F;
-    color: #fff;
-    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
-}
+/*.header .topcode .topcodebnt:hover{*/
+/*    background-color: #8F8F8F;*/
+/*    color: #fff;*/
+/*    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);*/
+/*}*/
 
     /* All menu */
 .all_menu {transition: transform .2s ease-in-out, opacity .2s ease-in-out; transform-origin: top; z-index: 10; padding: 50px 20px;}
diff --git a/egovframe-template-simple-react-contribution/src/css/page.css b/egovframe-template-simple-react-contribution/src/css/page.css
index cf5c6a7..64bcb6b 100644
--- a/egovframe-template-simple-react-contribution/src/css/page.css
+++ b/egovframe-template-simple-react-contribution/src/css/page.css
@@ -49,20 +49,31 @@
     /* 메인 */
     /*.P_MAIN {position: relative; background: #f5f5f5;}*/
     /*.P_MAIN::before {content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 360px; background: #fff;}*/
-    .P_MAIN .c_wrap .topbox {width: 100%; height:390px; background: #F8F8F8; margin: 0 auto;}
-    .P_MAIN .c_wrap .topbox .topbox_1 {width: 360px; height: 340px; border: 1px solid #dde2e5; border-radius: 25px; box-shadow: 0 4px 5px #ccc; background: #fff; padding: 30px;}
-    .P_MAIN .c_wrap .topbox .topbox_1 .topbox_11{font-size: 22px; font-weight: 700; padding-bottom: 15px;}
-    .P_MAIN .c_wrap .topbox .topbox_1 .topbox_12{font-size: 14px; }
-    .P_MAIN .c_wrap .topbox .topbox_1 .topbox_13{font-size: 12px; font-weight: 700; color: #22498E; padding-bottom: 5px;}
-    .P_MAIN .c_wrap .topbox .topbox_1 .topbox_14{font-size: 17px; font-weight: 600; line-height: 42px; white-space: nowrap;}
-    .P_MAIN .c_wrap .topbox .topbox_2 {width: 630px; height: 340px; border: 1px solid #dde2e5; border-radius: 25px; box-shadow: 0 4px 5px #ccc; background: #fff; margin: 0 25px; padding: 30px;}
-    .P_MAIN .c_wrap .topbox .topbox_2 .topbox_11{font-size: 22px; font-weight: 700; padding-bottom: 10px;}
-    .P_MAIN .c_wrap .topbox .topbox_2 .topbox_12{font-size: 19px; padding-bottom: 70px;}
-    .P_MAIN .c_wrap .topbox .topbox_2 .topbox_13 {width: 80px; height: 80px; border-radius: 50%; background: #E2E9F6; display: flex; justify-content: center; align-items: center; margin-left: 1.2rem;}
-    .P_MAIN .c_wrap .topbox .topbox_2 .topbox_14{font-size: 16px; font-weight: 600; text-align: center; line-height: 40px; color: #222;}
-    .P_MAIN .c_wrap .topbox .topbox_2 .topbox_15{text-align: center; line-height: 40px;}
-    .P_MAIN .c_wrap .topbox .topbox_3 {width: 360px; height: 340px; border: 1px solid #dde2e5; border-radius: 25px; box-shadow: 0 4px 5px #ccc; background: #fff; padding: 30px;}
-    .P_MAIN .c_wrap .topbox .topbox_3 .topbox_11{font-size: 22px; font-weight: 700; padding-bottom: 20px;}
+    .P_MAIN .c_wrap .topbox {width: 100%; height:370px; background: #F8F8F8; margin: 0 auto;}
+    .P_MAIN .c_wrap .topbox .topbox_1 {width: 1400px; height: 340px; border: 1px solid #dde2e5; border-radius: 25px; box-shadow: 0 4px 5px #ccc; background: #fff; padding: 15px;}
+    .P_MAIN .c_wrap .topbox .topbox_1 .topbox_11{width: 1010px; padding: 0;}
+    .P_MAIN .c_wrap .topbox .topbox_1 .topbox_12{background: #004994; margin-left: 0; color: #fff; line-height: 30px;}
+    .P_MAIN .c_wrap .topbox .topbox_1 .topbox_13{font-size: 14px; font-weight: 700; }
+    .P_MAIN .c_wrap .topbox .topbox_1 .topbox_14 {font-size: 12px; font-weight: 600; text-align: right; }
+    .P_MAIN .c_wrap .topbox .topbox_1 .topbox_14 span{border-radius: 20px; border: 1px solid #fff; padding: 3px 8px;}
+    .P_MAIN .c_wrap .topbox .topbox_1 .topbox_15{background: #E0E0E0; margin-right: 10px; line-height: 30px;}
+    .P_MAIN .c_wrap .topbox .topbox_1 .topbox_16 {font-size: 12px; font-weight: 600; text-align: right; }
+    .P_MAIN .c_wrap .topbox .topbox_1 .topbox_16 span{border-radius: 20px; border: 1px solid #4C6C84; padding: 3px 8px;}
+    .P_MAIN .c_wrap .topbox .topbox_2 { height: 45px; border: 1px solid #EAEAEA; border-radius: 10px; padding: 10px; color: #222;}
+    .P_MAIN .c_wrap .topbox .topbox_2:hover {border: 1px solid #22498E; color: #22498E;}
+    .P_MAIN .c_wrap .topbox .topbox_2 img {filter: none; transition: filter 0.3s ease;}
+    .P_MAIN .c_wrap .topbox .topbox_2:hover img {filter: invert(39%) sepia(86%) saturate(2000%) hue-rotate(180deg) brightness(80%) contrast(66%);}
+    .P_MAIN .c_wrap .topbox .topbox_4 {width: 75px; height: 75px; border: 1px solid #EAEAEA; border-radius: 20px; padding: 10px 0; margin-left: 0;}
+    .P_MAIN .c_wrap .topbox .topbox_5 {width: 95px; font-size: 12px; padding: 0px; margin-left: -10px; text-align: center;}
+    .P_MAIN .c_wrap .topbox .topbox_3 {width: 350px; height: 310px; border: 1px solid #dde2e5; background: #fff; padding: 15px 30px;}
+    .P_MAIN .c_wrap .topbox .topbox_3 .topbox_31{font-size: 22px; font-weight: 700; padding-bottom: 20px;}
+
+    /*.P_MAIN .c_wrap .topbox .topbox_2 {width: 630px; height: 340px; border: 1px solid #dde2e5; border-radius: 25px; box-shadow: 0 4px 5px #ccc; background: #fff; margin: 0 25px; padding: 30px;}*/
+    /*.P_MAIN .c_wrap .topbox .topbox_2 .topbox_11{font-size: 22px; font-weight: 700; padding-bottom: 10px;}*/
+    /*.P_MAIN .c_wrap .topbox .topbox_2 .topbox_12{font-size: 19px; padding-bottom: 70px;}*/
+    /*.P_MAIN .c_wrap .topbox .topbox_2 .topbox_13 {width: 80px; height: 80px; border-radius: 50%; background: #E2E9F6; display: flex; justify-content: center; align-items: center; margin-left: 1.2rem;}*/
+    /*.P_MAIN .c_wrap .topbox .topbox_2 .topbox_14{font-size: 16px; font-weight: 600; text-align: center; line-height: 40px; color: #222;}*/
+    /*.P_MAIN .c_wrap .topbox .topbox_2 .topbox_15{text-align: center; line-height: 40px;}*/
     .P_MAIN .c_wrap .login_search {border: 1px solid #6F6F6F; border-radius: 10px; overflow: hidden;}
     .P_MAIN .c_wrap .login_border {border: 1px solid #6F6F6F; margin-top: 5px;}
     .P_MAIN .c_wrap .login_search_word {max-height: 125px; padding: 5px; overflow-x: auto; overflow-y: auto;}
@@ -70,29 +81,37 @@
     .P_MAIN .c_wrap .menubox .menubox_n {padding: 0 50px;}
     .P_MAIN .c_wrap .menubox .menu_img {width: 100px; height: 100px; border-radius: 50%; background: #E2E9F6; display: flex; justify-content: center; align-items: center;}
     .P_MAIN .c_wrap .menubox .menu_text {font-size: 16px; font-weight: 700; padding-top: 10px; justify-content: center; color: #222;}
-    .P_MAIN .c_wrap .qnabox {width: 100%; height:340px; background: #F8FAFC;}
-    .P_MAIN .c_wrap .qnabox .qnabox_1 {width: 1400px; height: 80px; margin:0 auto; padding: 0 10px; font-size: 35px; font-weight: 700; color: #004994;}
-    .P_MAIN .c_wrap .qnabox .qnabox_11 {width: 50%; font-size: 35px; font-weight: 700; color: #004994;}
-    .P_MAIN .c_wrap .qnabox .qnabox_12 {width: 50%; font-size: 20px; font-weight: 500; color: #6C6C6C;}
+    .P_MAIN .c_wrap .bbsbox {width: 100%; height:300px; margin: 0 auto; padding-top: 15px;}     /* border-bottom: 1px solid #E6E6E6;  */
+    .P_MAIN .c_wrap .bbsbox .bbsbox_1 {width: 500px; }
+    .P_MAIN .c_wrap .bbsbox .bbsbox_3 {width: 500px; margin-left: 10px;}
+    .P_MAIN .c_wrap .bbsbox .bbsbox_1 .MuiBox-root,
+    .P_MAIN .c_wrap .bbsbox .bbsbox_3 .MuiBox-root {padding-top: 0px; }
+    .P_MAIN .c_wrap .bbsbox .bbsbox_1 .bbsbox_11,
+    .P_MAIN .c_wrap .bbsbox .bbsbox_3 .bbsbox_11 {border-bottom: 1px solid #D3D3D3; padding: 14px 0;}
+    .P_MAIN .c_wrap .bbsbox .bbsbox_1 .bbsbox_11 .bbsbox_11_title,
+    .P_MAIN .c_wrap .bbsbox .bbsbox_3 .bbsbox_11 .bbsbox_11_title {font-size: 15px; color: #222;}
+    .P_MAIN .c_wrap .bbsbox .bbsbox_2 {width: 370px; margin-left: 20px;}
+    .P_MAIN .c_wrap .bbsbox .bbsbox_2 img {width: 370px; height: 270px; border-radius: 20px; }
+    .P_MAIN .c_wrap .qna_count {width: 100%; margin: 0 auto; padding-bottom: 10px; border-bottom: 1px solid #eaeaea; }
+    .P_MAIN .c_wrap .qnabox {max-width: 1010px; padding: 0; height:215px; }
+    .P_MAIN .c_wrap .qnabox .qnabox_1 {width: 1010px; max-height: 45px; margin:0 auto; padding: 0 10px; font-size: 35px; font-weight: 700; color: #004994;}
+    .P_MAIN .c_wrap .qnabox .qnabox_11 {width: 50%; font-size: 30px; font-weight: 700; color: #004994;}
+    .P_MAIN .c_wrap .qnabox .qnabox_12 {width: 50%; font-size: 16px; font-weight: 500; color: #6C6C6C;}
     .P_MAIN .c_wrap .qnabox .qnabox_12 .rounded_circle_qna {width: 32px; height: 32px; border-radius: 50%; background: #FFF; box-shadow: 0 4px 5px #ccc; align-items: center; text-align: center; display: flex; }
-    .P_MAIN .c_wrap .qnabox .qnabox_2 {width: 1400px; margin:0 auto; }
-    .P_MAIN .c_wrap .qnabox .qnabox_n {width: 330px; height: 200px; border: 1px solid #dde2e5; border-radius: 10px; box-shadow: 0 4px 5px #ccc; background: #fff; margin: 20px 10px; padding: 30px;}
+    .P_MAIN .c_wrap .qnabox .qnabox_2 {width: 1010px; margin:0 auto; }
+    .P_MAIN .c_wrap .qnabox .qnabox_n {width: 25%; height: 158px; border: 1px solid #dde2e5; border-radius: 10px; box-shadow: 0 4px 5px #ccc; background: #fff; margin: 10px; padding: 15px 30px;}
     .P_MAIN .c_wrap .qnabox .qnabox_n .qnabox_n_file {background: #EBF1FF; border-radius: 10px; color: #22498E; font-size: 12px;}
-    .P_MAIN .c_wrap .qnabox .qnabox_n .qnabox_n_title {height: 100px; font-size: 18px; overflow: hidden; text-overflow: ellipsis; font-weight: 600;}
+    .P_MAIN .c_wrap .qnabox .qnabox_n .qnabox_n_title {height: 90px; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
+    .P_MAIN .c_wrap .qnabox .qnabox_n .qnabox_n_title a {display: block; height: 88px;}
     .P_MAIN .c_wrap .qnabox .qnabox_n .qnabox_n_date {font-size: 13px; }
-    .P_MAIN .c_wrap .numbox {width: 100%; height:100px; background: #4C6C84;}
-    .P_MAIN .c_wrap .numbox .numbox_n {width: 300px; color: #fff; text-align: center;}
-    .P_MAIN .c_wrap .numbox .num_text {font-size: 16px; font-weight: 600;}
-    .P_MAIN .c_wrap .numbox .num_count {font-size: 25px; font-weight: 700;}
-    .P_MAIN .c_wrap .numbox .num_count span.unit {font-size: 20px;}
-    .P_MAIN .c_wrap .bbsbox {width: 100%; height:350px; border-bottom: 1px solid #E6E6E6; margin: 0 auto; padding-top: 25px;}
-    .P_MAIN .c_wrap .bbsbox .bbsbox_1 {width: 980px; }
-    .P_MAIN .c_wrap .bbsbox .bbsbox_1 .bbsbox_11 {border-bottom: 1px solid #D3D3D3; padding: 14px 0;}
-    .P_MAIN .c_wrap .bbsbox .bbsbox_1 .bbsbox_11 .bbsbox_11_title {font-size: 15px; color: #222;}
-    .P_MAIN .c_wrap .bbsbox .bbsbox_2 {width: 370px; margin-left: 50px;}
-    .P_MAIN .c_wrap .bbsbox .bbsbox_2 img {max-width: 370px; border-radius: 20px; }
+    .P_MAIN .c_wrap .numbox {max-width: 370px; height: 215px; border-radius: 20px; background: #EBF1F9; margin-left: 20px; padding: 20px 30px; }
+    .P_MAIN .c_wrap .numbox .numbox_n {width: auto; background: #fff; border-radius: 10px; margin-bottom: 10px;}
+    .P_MAIN .c_wrap .numbox .numbox_n:nth-child(4) {margin-bottom: 0px; }
+    .P_MAIN .c_wrap .numbox .num_text {font-size: 12px; color: #fff; font-weight: 600; background: #3378C1; border-radius: 10px; max-width: 100px; line-height: 35px; text-align: center; }
+    .P_MAIN .c_wrap .numbox .num_count {font-size: 14px; font-weight: 700; color: #3378C1; line-height: 35px; text-align: right;}
+    .P_MAIN .c_wrap .numbox .num_count span.unit {font-size: 11px;}
 
-    .P_MAIN .c_wrap .bannerbox {width: 1400px; height:80px; margin: 0 auto;}
+    .P_MAIN .c_wrap .bannerbox {width: 1400px; height:80px; margin: 0 auto; }
     /*.P_MAIN .c_wrap .bannerbox .slick-list {width: 1400px; margin: 0 auto;}*/
     .P_MAIN .c_wrap .bannerbox .banner_slide {max-width: 210px; max-height: 60px; border: 1px solid #dde2e5; border-radius: 15px; text-align: center; padding: 10px; margin: 10px;}
     .P_MAIN .c_wrap .bannerbox .slick-slide img {max-width: 180px; max-height: 60px;}
diff --git a/egovframe-template-simple-react-contribution/src/pages/main/EgovMain.jsx b/egovframe-template-simple-react-contribution/src/pages/main/EgovMain.jsx
index 83e73de..a9e3c2a 100644
--- a/egovframe-template-simple-react-contribution/src/pages/main/EgovMain.jsx
+++ b/egovframe-template-simple-react-contribution/src/pages/main/EgovMain.jsx
@@ -39,7 +39,7 @@ function EgovMain(props) {
     const [user, setUser] = useState(parseJwt(getLocalItem('accessToken')) || null);
     console.log(user);
 
-    const handlePlusClick = () => {
+    const handlePlusClick = (currentTabValue) => {
         const urls = [
             URL.SUPPORT_LIST_NOCODE+'/KCSC-NOT',
             URL.SUPPORT_LIST_NOCODE+'/KCSC-NTC',
@@ -48,8 +48,8 @@ function EgovMain(props) {
             URL.SUPPORT_LIST_NOCODE+'/KCSC-TEC',
             URL.SUPPORT_LIST_NOCODE+'/KCSC-NWS'
         ];
-        if (value >= 0 && value < urls.length) {
-            navigate(urls[value]);
+        if (currentTabValue >= 0 && currentTabValue < urls.length) {
+            navigate(urls[currentTabValue]);
         }
     };
 
@@ -86,9 +86,15 @@ function EgovMain(props) {
     ];
 
     // TAB 상태를 정의합니다.
-    const [value, setValue] = useState(0);
-    const handleChange = (event, newValue) => {
-        setValue(newValue);
+    const [leftTabValue, setLeftTabValue] = useState(0);
+    const [rightTabValue, setRightTabValue] = useState(3);
+
+    const handleLeftTabChange = (event, newValue) => {
+        setLeftTabValue(newValue);
+    };
+
+    const handleRightTabChange = (event, newValue) => {
+        setRightTabValue(newValue);
     };
 
 	// eslint-disable-next-line no-unused-vars
@@ -218,110 +224,386 @@ function EgovMain(props) {
         <div className="P_MAIN">{/* container */}
             <div className="c_wrap">
                 <div className="topbox d-flex justify-content-center align-items-center">
-                    <div className="topbox_1">
-                        <div className="topbox_11">실시간 인기키워드</div>
-                        {/*<div className="topbox_12">현재 기준 사용자가 가장 많이 검색하는 키워드입니다.</div>*/}
-                        <div className="topbox_13">2024년 5월 9일 목요일 오전 11:45</div>
-                        <Row className="topbox_14">
-                            <Col xs={6}>
-                                <div className={"text-truncate"}>1 가설공사</div>
-                                <div className={"text-truncate"}>2 가설공사</div>
-                                <div className={"text-truncate"}>3 가설공사</div>
-                                <div className={"text-truncate"}>4 가설공사가설공사</div>
-                                <div className={"text-truncate"}>5 가설공사</div>
-                            </Col>
-                            <Col xs={6}>
-                                <div className={"text-truncate"}>&nbsp;&nbsp;6 가설공사</div>
-                                <div className={"text-truncate"}>&nbsp;&nbsp;7 가설공사가설공사가설공사가설공사</div>
-                                <div className={"text-truncate"}>&nbsp;&nbsp;8 가설공사</div>
-                                <div className={"text-truncate"}>&nbsp;&nbsp;9 가설공사</div>
-                                <div className={"text-truncate"}>10 가설공사</div>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div className="topbox_2">
-                        <div className={"topbox_11"}>자주찾는 서비스</div>
-                        {/*<div className={"topbox_12"}>버튼을 선택하시면 해당 서비스로 이동합니다.</div>*/}
-                        <Row>
-                            <Col>
-                                <Link to={URL.STANDARD_CODE_LIST} className="link-wrapper">
-                                    <div className={"topbox_13"}><img src="/assets/images/ico-landing1.png" /></div>
-                                    <div className={"topbox_14"}>코드검색</div>
-                                    {/*<div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>*/}
-                                </Link>
-                            </Col>
-                            <Col>
-                                <Link to={URL.STANDARD_CODE_INFO} className="link-wrapper">
-                                    <div className={"topbox_13"}><img src="/assets/images/ico-landing2.png" /></div>
-                                    <div className={"topbox_14"}>코드안내</div>
-                                    {/*<div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>*/}
-                                </Link>
-                            </Col>
-                            <Col>
-                                <Link to={URL.COMMITTEE_SCHEDULE} className="link-wrapper">
-                                    <div className={"topbox_13"}><img src="/assets/images/ico-landing3.png" /></div>
-                                    <div className={"topbox_14"}>위원회일정</div>
-                                    {/*<div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>*/}
-                                </Link>
-                            </Col>
-                            <Col>
-                                <Link to={URL.STANDARD_CODE_LIST + '/5000'} className="link-wrapper">
-                                    <div className={"topbox_13"}><img src="/assets/images/ico-landing4.png" /></div>
-                                    <div className={"topbox_14"}>전문시방서</div>
-                                    {/*<div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>*/}
-                                </Link>
-                            </Col>
-                        </Row>
-                        <Row>
-                            <Col>
-                                <Link to={URL.STANDARD_CODE_OLD_NOCODE+'/5'} className="link-wrapper">
-                                    <div className={"topbox_13"}><img src="/assets/images/ico-landing5.png" /></div>
-                                    <div className={"topbox_14"}>훈령/예규/지침</div>
-                                </Link>
-                            </Col>
-                            <Col>
-                                <Link to={URL.STANDARD_CODE_ENG} className="link-wrapper">
-                                    <div className={"topbox_13"}><img src="/assets/images/ico-landing6.png" /></div>
-                                    <div className={"topbox_14"}>영문건설기준</div>
-                                </Link>
-                            </Col>
-                            <Col>
-                                <Link to={URL.STANDARD_CODE_TERM} className="link-wrapper">
-                                    <div className={"topbox_13"}><img src="/assets/images/ico-landing8.png" /></div>
-                                    <div className={"topbox_14"}>건설기준용어</div>
-                                </Link>
-                            </Col>
-                            <Col>
-                                <Link to={URL.SUPPORT_API} className="link-wrapper">
-                                    <div className={"topbox_13"}><img src="/assets/images/ico-landing10.png" /></div>
-                                    <div className={"topbox_14"}>API 서비스</div>
-                                </Link>
-                            </Col>
-                        </Row>
-                    </div>
-                    <div className="topbox_3">
-                        <div className={"topbox_11"}>{user ? (
-                            <>
-                                <Row>
-                                    <Col xs={6}>{user.id} 님.</Col>
-                                    <Col xs={6} className={"text-end"}><Button type={"button"} className={"btn btn-22498E btn-sm"} onClick={logOutHandler}>로그아웃</Button> </Col>
-                                </Row>
-                            </>    
-                        ) : ('로그인')}
-                        </div>
-                        <div>
-                            <EgovLogin onChangeLogin={onChangeLogin}></EgovLogin>
-                        </div>
-                    </div>
+                    <Row className="topbox_1">
+                        <Col className={"topbox_11"}>
+                            <Row>
+                                <Col xs={6}>
+                                    <Row className={"topbox_12 justify-content-between"}>
+                                        <Col className={"topbox_13"}>설계기준</Col>
+                                        <Col className={"topbox_14"}><span>더보기 +</span></Col>
+                                    </Row>
+                                </Col>
+                                <Col xs={6}>
+                                    <Row className={"topbox_15 justify-content-between"}>
+                                        <Col className={"topbox_13"}>표준시방서</Col>
+                                        <Col className={"topbox_16"}><span>더보기 +</span></Col>
+                                    </Row>
+                                </Col>
+                            </Row>
+                            <Row className={"pt-3 mx-0"}>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/1010" title="공통코드">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col xs={7}>공통</Col>
+                                            <Col xs={5} className={"text-end"}><img src={"/assets/images/x1.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/101011" title="지반">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col>지반</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x2.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/101014" title="구조">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col>구조</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x3.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/102034" title="조경">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col>조경</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x4.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/102041" title="건축">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col>건축</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x5.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/102067" title="농업기반">
+                                        <Row className={"topbox_2 justify-content-between me-0"}>
+                                            <Col>농업기반</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x6.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                            </Row>
+                            <Row className={"pt-2 mx-0"}>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/101017" title="내진">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col>내진</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x7.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/102021" title="가설">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col>가설</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x8.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/102024" title="교량">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col>교량</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x9.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/102047" title="철도">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col>철도</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x10.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/102051" title="하천">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col>하천</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x11.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/102054" title="댐">
+                                        <Row className={"topbox_2 justify-content-between me-0"}>
+                                            <Col>댐</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x12.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                            </Row>
+                            <Row className={"pt-2 mx-0"}>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/102027" title="터널">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col>터널</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x13.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/102029" title="공동구">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col>공동구</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x14.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/102031" title="설비">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col>설비</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x15.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/102057" title="상수도">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col>상수도</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x16.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/102061" title="하수도">
+                                        <Row className={"topbox_2 justify-content-between me-1"}>
+                                            <Col>하수도</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x17.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={2}>
+                                    <Link to="/standardCode/list/102044" title="도로">
+                                        <Row className={"topbox_2 justify-content-between me-0"}>
+                                            <Col>도로</Col>
+                                            <Col className={"text-end"}><img src={"/assets/images/x18.png"} className={"h_25"} /></Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                            </Row>
+                            <Row className={"pt-3 mx-0 justify-content-between"}>
+                                <Col xs={"auto"} className={"p-0"}>
+                                    <Link to={URL.STANDARD_CODE_INFO} title="건설기준안내" className={"w_75"}>
+                                        <Row className={"topbox_4 justify-content-center"}>
+                                            <Col><img src="/assets/images/ico-landing2.png" className={"w_50 h_50"} /></Col>
+                                        </Row>
+                                        <Row className={"topbox_5 justify-content-center"}>
+                                            <Col className={"text-222 text-center"}>건설기준안내</Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={"auto"}>
+                                    <Link to={URL.COMMITTEE_SCHEDULE} title="위원회일정" className={"w_75"}>
+                                        <Row className={"topbox_4 justify-content-center"}>
+                                            <Col><img src="/assets/images/ico-landing3.png" className={"w_50 h_50"} /></Col>
+                                        </Row>
+                                        <Row className={"topbox_5 justify-content-center"}>
+                                            <Col className={"text-222"}>위원회일정</Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={"auto"}>
+                                    <Link to={URL.STANDARD_CODE_LIST + '/5000'} title="전문시방서" className={"w_75"}>
+                                        <Row className={"topbox_4 justify-content-center"}>
+                                            <Col><img src="/assets/images/ico-landing4.png" className={"w_50 h_50"} /></Col>
+                                        </Row>
+                                        <Row className={"topbox_5 justify-content-center"}>
+                                            <Col className={"text-222"}>전문시방서</Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={"auto"}>
+                                    <Link to={URL.STANDARD_CODE_OLD_NOCODE+'/5'} title="훈련/예규/지침" className={"w_75"}>
+                                        <Row className={"topbox_4 justify-content-center"}>
+                                            <Col><img src="/assets/images/ico-landing5.png" className={"w_50 h_50"} /></Col>
+                                        </Row>
+                                        <Row className={"topbox_5 justify-content-center"}>
+                                            <Col className={"text-222"}>훈련/예규/지침</Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={"auto"}>
+                                    <Link to={URL.STANDARD_CODE_ENG} title="영문건설기준" className={"w_75"}>
+                                        <Row className={"topbox_4 justify-content-center"}>
+                                            <Col><img src="/assets/images/ico-landing6.png" className={"w_50 h_50"} /></Col>
+                                        </Row>
+                                        <Row className={"topbox_5 justify-content-center"}>
+                                            <Col className={"text-222"}>영문건설기준</Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={"auto"}>
+                                    <Link to={URL.STANDARD_CODE_TERM} title="건설기준용어" className={"w_75"}>
+                                        <Row className={"topbox_4 justify-content-center"}>
+                                            <Col><img src="/assets/images/ico-landing8.png" className={"w_50 h_50"} /></Col>
+                                        </Row>
+                                        <Row className={"topbox_5 justify-content-center"}>
+                                            <Col className={"text-222"}>건설기준용어</Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={"auto"}>
+                                    <Link to={URL.STANDARD_CODE_LIST} title="최근수정코드" className={"w_75"}>
+                                        <Row className={"topbox_4 justify-content-center"}>
+                                            <Col><img src="/assets/images/ico-landing13.png" className={"w_50 h_50"} /></Col>
+                                        </Row>
+                                        <Row className={"topbox_5 justify-content-center"}>
+                                            <Col className={"text-222"}>최근수정코드</Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={"auto"}>
+                                    <Link to={URL.SUPPORT_LIST_NOCODE+'/KCKC-INV'} title="수요조사" className={"w_75"}>
+                                        <Row className={"topbox_4 justify-content-center"}>
+                                            <Col><img src="/assets/images/ico-landing12.png" className={"w_50 h_50"} /></Col>
+                                        </Row>
+                                        <Row className={"topbox_5 justify-content-center"}>
+                                            <Col className={"text-222"}>수요조사</Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                                <Col xs={"auto"}>
+                                    <Link to={URL.SUPPORT_API} title="오픈 API" className={"w_75"}>
+                                        <Row className={"topbox_4 justify-content-center"}>
+                                            <Col><img src="/assets/images/ico-landing10.png" className={"w_50 h_50"} /></Col>
+                                        </Row>
+                                        <Row className={"topbox_5 justify-content-center"}>
+                                            <Col className={"text-222"}>오픈 API</Col>
+                                        </Row>
+                                    </Link>
+                                </Col>
+                            </Row>
+                        </Col>
+                        <Col xs={"auto"} className={"justify-content-end p-0"}>
+                            <div className="topbox_3">
+                                <div className={"topbox_31"}>{user ? (
+                                    <>
+                                        <Row>
+                                            <Col xs={6}>{user.id} 님.</Col>
+                                            <Col xs={6} className={"text-end"}><Button type={"button"} className={"btn btn-22498E btn-sm"} onClick={logOutHandler}>로그아웃</Button> </Col>
+                                        </Row>
+                                    </>
+                                ) : ('로그인')}
+                                </div>
+                                <div>
+                                    <EgovLogin onChangeLogin={onChangeLogin}></EgovLogin>
+                                </div>
+                            </div>
+                        </Col>
+                    </Row>
+                    {/*<div className="topbox_1">*/}
+                    {/*    <div className="topbox_11">실시간 인기키워드</div>*/}
+                    {/*    /!*<div className="topbox_12">현재 기준 사용자가 가장 많이 검색하는 키워드입니다.</div>*!/*/}
+                    {/*    <div className="topbox_13">2024년 5월 9일 목요일 오전 11:45</div>*/}
+                    {/*    <Row className="topbox_14">*/}
+                    {/*        <Col xs={6}>*/}
+                    {/*            <div className={"text-truncate"}>1 가설공사</div>*/}
+                    {/*            <div className={"text-truncate"}>2 가설공사</div>*/}
+                    {/*            <div className={"text-truncate"}>3 가설공사</div>*/}
+                    {/*            <div className={"text-truncate"}>4 가설공사가설공사</div>*/}
+                    {/*            <div className={"text-truncate"}>5 가설공사</div>*/}
+                    {/*        </Col>*/}
+                    {/*        <Col xs={6}>*/}
+                    {/*            <div className={"text-truncate"}>&nbsp;&nbsp;6 가설공사</div>*/}
+                    {/*            <div className={"text-truncate"}>&nbsp;&nbsp;7 가설공사가설공사가설공사가설공사</div>*/}
+                    {/*            <div className={"text-truncate"}>&nbsp;&nbsp;8 가설공사</div>*/}
+                    {/*            <div className={"text-truncate"}>&nbsp;&nbsp;9 가설공사</div>*/}
+                    {/*            <div className={"text-truncate"}>10 가설공사</div>*/}
+                    {/*        </Col>*/}
+                    {/*    </Row>*/}
+                    {/*</div>*/}
+                    {/*<div className="topbox_2">*/}
+                    {/*    <div className={"topbox_11"}>자주찾는 서비스</div>*/}
+                    {/*    /!*<div className={"topbox_12"}>버튼을 선택하시면 해당 서비스로 이동합니다.</div>*!/*/}
+                    {/*    <Row>*/}
+                    {/*        <Col>*/}
+                    {/*            <Link to={URL.STANDARD_CODE_LIST} className="link-wrapper">*/}
+                    {/*                <div className={"topbox_13"}><img src="/assets/images/ico-landing1.png" /></div>*/}
+                    {/*                <div className={"topbox_14"}>코드검색</div>*/}
+                    {/*                /!*<div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>*!/*/}
+                    {/*            </Link>*/}
+                    {/*        </Col>*/}
+                    {/*        <Col>*/}
+                    {/*            <Link to={URL.STANDARD_CODE_INFO} className="link-wrapper">*/}
+                    {/*                <div className={"topbox_13"}><img src="/assets/images/ico-landing2.png" /></div>*/}
+                    {/*                <div className={"topbox_14"}>코드안내</div>*/}
+                    {/*                /!*<div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>*!/*/}
+                    {/*            </Link>*/}
+                    {/*        </Col>*/}
+                    {/*        <Col>*/}
+                    {/*            <Link to={URL.COMMITTEE_SCHEDULE} className="link-wrapper">*/}
+                    {/*                <div className={"topbox_13"}><img src="/assets/images/ico-landing3.png" /></div>*/}
+                    {/*                <div className={"topbox_14"}>위원회일정</div>*/}
+                    {/*                /!*<div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>*!/*/}
+                    {/*            </Link>*/}
+                    {/*        </Col>*/}
+                    {/*        <Col>*/}
+                    {/*            <Link to={URL.STANDARD_CODE_LIST + '/5000'} className="link-wrapper">*/}
+                    {/*                <div className={"topbox_13"}><img src="/assets/images/ico-landing4.png" /></div>*/}
+                    {/*                <div className={"topbox_14"}>전문시방서</div>*/}
+                    {/*                /!*<div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>*!/*/}
+                    {/*            </Link>*/}
+                    {/*        </Col>*/}
+                    {/*    </Row>*/}
+                    {/*    <Row>*/}
+                    {/*        <Col>*/}
+                    {/*            <Link to={URL.STANDARD_CODE_OLD_NOCODE+'/5'} className="link-wrapper">*/}
+                    {/*                <div className={"topbox_13"}><img src="/assets/images/ico-landing5.png" /></div>*/}
+                    {/*                <div className={"topbox_14"}>훈령/예규/지침</div>*/}
+                    {/*            </Link>*/}
+                    {/*        </Col>*/}
+                    {/*        <Col>*/}
+                    {/*            <Link to={URL.STANDARD_CODE_ENG} className="link-wrapper">*/}
+                    {/*                <div className={"topbox_13"}><img src="/assets/images/ico-landing6.png" /></div>*/}
+                    {/*                <div className={"topbox_14"}>영문건설기준</div>*/}
+                    {/*            </Link>*/}
+                    {/*        </Col>*/}
+                    {/*        <Col>*/}
+                    {/*            <Link to={URL.STANDARD_CODE_TERM} className="link-wrapper">*/}
+                    {/*                <div className={"topbox_13"}><img src="/assets/images/ico-landing8.png" /></div>*/}
+                    {/*                <div className={"topbox_14"}>건설기준용어</div>*/}
+                    {/*            </Link>*/}
+                    {/*        </Col>*/}
+                    {/*        <Col>*/}
+                    {/*            <Link to={URL.SUPPORT_API} className="link-wrapper">*/}
+                    {/*                <div className={"topbox_13"}><img src="/assets/images/ico-landing10.png" /></div>*/}
+                    {/*                <div className={"topbox_14"}>API 서비스</div>*/}
+                    {/*            </Link>*/}
+                    {/*        </Col>*/}
+                    {/*    </Row>*/}
+                    {/*</div>*/}
+                    {/*<div className="topbox_3">*/}
+                    {/*    <div className={"topbox_11"}>{user ? (*/}
+                    {/*        <>*/}
+                    {/*            <Row>*/}
+                    {/*                <Col xs={6}>{user.id} 님.</Col>*/}
+                    {/*                <Col xs={6} className={"text-end"}><Button type={"button"} className={"btn btn-22498E btn-sm"} onClick={logOutHandler}>로그아웃</Button> </Col>*/}
+                    {/*            </Row>*/}
+                    {/*        </>    */}
+                    {/*    ) : ('로그인')}*/}
+                    {/*    </div>*/}
+                    {/*    <div>*/}
+                    {/*        <EgovLogin onChangeLogin={onChangeLogin}></EgovLogin>*/}
+                    {/*    </div>*/}
+                    {/*</div>*/}
                 </div>
 
 
-                <div className="numbox d-flex justify-content-center align-items-center">
-                    <div className="numbox_n"><div className="num_text">다운로드 수</div><div className="num_count"><CountUp start={0} end={334345} duration={2.5} separator="," /><span className="unit">건</span></div></div>
-                    <div className="numbox_n"><div className="num_text">회원가입자 수</div><div className="num_count"><CountUp start={0} end={12345} duration={2.5} separator="," /><span className="unit">명</span></div></div>
-                    <div className="numbox_n"><div className="num_text">일 평균 방문자</div><div className="num_count"><CountUp start={0} end={56427} duration={2.5} separator="," /><span className="unit">명</span></div></div>
-                    <div className="numbox_n"><div className="num_text">개정고시</div><div className="num_count"><CountUp start={0} end={99875} duration={2.5} separator="," /><span className="unit">건</span></div></div>
-                </div>
+                {/*<div className="numbox d-flex justify-content-center align-items-center">*/}
+                {/*    <div className="numbox_n"><div className="num_text">다운로드 수</div><div className="num_count"><CountUp start={0} end={334345} duration={2.5} separator="," /><span className="unit">건</span></div></div>*/}
+                {/*    <div className="numbox_n"><div className="num_text">회원가입자 수</div><div className="num_count"><CountUp start={0} end={12345} duration={2.5} separator="," /><span className="unit">명</span></div></div>*/}
+                {/*    <div className="numbox_n"><div className="num_text">일 평균 방문자</div><div className="num_count"><CountUp start={0} end={56427} duration={2.5} separator="," /><span className="unit">명</span></div></div>*/}
+                {/*    <div className="numbox_n"><div className="num_text">개정고시</div><div className="num_count"><CountUp start={0} end={99875} duration={2.5} separator="," /><span className="unit">건</span></div></div>*/}
+                {/*</div>*/}
 
 
                 {/*<div className="menubox d-flex justify-content-center align-items-center">*/}
@@ -339,118 +621,170 @@ function EgovMain(props) {
                     <div className="bbsbox_1">
                         <Box sx={{ borderBottom: 2, borderColor: 'divider' }}>
                             <Tabs
-                                value={value}
-                                onChange={handleChange}
+                                value={leftTabValue}
+                                onChange={handleLeftTabChange}
                                 indicatorColor="secondary"
-                                textColor="#22498E"
+                                textColor="inherit"
+                                sx={{
+                                    '& .Mui-selected': {
+                                        color: '#22498E', // 선택된 탭의 색상
+                                    },
+                                }}
                             >
-                                <Tab value={0} {...a11yProps(0)} sx={{ fontSize: value === 0 ? '1.5rem' : '1rem', fontWeight: 700, color: value === 0 ? '#22498E' : 'secondary'}} label="건설기준고시" wrapped />
-                                <Tab value={1} {...a11yProps(1)} sx={{ fontSize: value === 1 ? '1.5rem' : '1rem', fontWeight: 700, color: value === 1 ? '#22498E' : 'secondary'}} label="공지사항" />
-                                <Tab value={2} {...a11yProps(2)} sx={{ fontSize: value === 2 ? '1.5rem' : '1rem', fontWeight: 700, color: value === 2 ? '#22498E' : 'secondary'}} label="위원회 진행현황" />
-                                <Tab value={3} {...a11yProps(3)} sx={{ fontSize: value === 3 ? '1.5rem' : '1rem', fontWeight: 700, color: value === 3 ? '#22498E' : 'secondary'}} label="건설기준연구" />
-                                <Tab value={4} {...a11yProps(4)} sx={{ fontSize: value === 4 ? '1.5rem' : '1rem', fontWeight: 700, color: value === 4 ? '#22498E' : 'secondary'}} label="기술자료" />
-                                <Tab value={5} {...a11yProps(5)} sx={{ fontSize: value === 5 ? '1.5rem' : '1rem', fontWeight: 700, color: value === 5 ? '#22498E' : 'secondary'}} label="보도자료" />
-                                <Tab value="" label="+" sx={{ fontSize: '1.75rem', ml: 'auto' }} onClick={handlePlusClick} />
+                                <Tab value={0} {...a11yProps(0)} sx={{ fontSize: leftTabValue === 0 ? '1.3rem' : '1rem', fontWeight: 700, color: leftTabValue === 0 ? '#22498E' : 'secondary'}} label="건설기준고시" wrapped />
+                                <Tab value={1} {...a11yProps(1)} sx={{ fontSize: leftTabValue === 1 ? '1.3rem' : '1rem', fontWeight: 700, color: leftTabValue === 1 ? '#22498E' : 'secondary'}} label="건설기준연구" />
+                                <Tab value={2} {...a11yProps(2)} sx={{ fontSize: leftTabValue === 2 ? '1.3rem' : '1rem', fontWeight: 700, color: leftTabValue === 2 ? '#22498E' : 'secondary'}} label="위원회 진행현황" />
+                                <Tab value="" label="+" sx={{ fontSize: '1.75rem', ml: 'auto' }} onClick={() => handlePlusClick(leftTabValue)} />
                             </Tabs>
                         </Box>
-                        <TabPanel value={value} index={0}>
+                        <TabPanel value={leftTabValue} index={0}>
                             <Row className={"bbsbox_11"}>
                                 <Col xs={9} className={"text-truncate"}><Link to={URL.SUPPORT_DETAIL} className={"bbsbox_11_title"}>국토교통부고시_제2024-147호(내진설계일반(KDS_17_10_00))_정정_고시</Link></Col>
-                                <Col xs={2} className={"text-end"}>2024.01.23.</Col>
-                                <Col xs={1} className={"text-end"}><img src={"/assets/images/file.png"} /></Col>
+                                <Col xs={3} className={"text-end"}>2024.01.23.</Col>
+                                {/*<Col xs={1} className={"text-end"}><img src={"/assets/images/file.png"} /></Col>*/}
                             </Row>
                             <Row className={"bbsbox_11"}>
                                 <Col xs={9} className={"text-truncate"}><Link to={URL.SUPPORT_DETAIL} className={"bbsbox_11_title"}>국토교통부고시_제2024-147호(내진설계일반(KDS_17_10_00))_정정_고시</Link></Col>
-                                <Col xs={2} className={"text-end"}>2024.01.23.</Col>
-                                <Col xs={1} className={"text-end"}><img src={"/assets/images/file.png"} /></Col>
+                                <Col xs={3} className={"text-end"}>2024.01.23.</Col>
                             </Row>
                             <Row className={"bbsbox_11"}>
                                 <Col xs={9} className={"text-truncate"}><Link to={URL.SUPPORT_DETAIL} className={"bbsbox_11_title"}>국토교통부고시_제2024-147호(내진설계일반(KDS_17_10_00))_정정_고시</Link></Col>
-                                <Col xs={2} className={"text-end"}>2024.01.23.</Col>
-                                <Col xs={1} className={"text-end"}><img src={"/assets/images/file.png"} /></Col>
+                                <Col xs={3} className={"text-end"}>2024.01.23.</Col>
                             </Row>
                             <Row className={"bbsbox_11"}>
                                 <Col xs={9} className={"text-truncate"}><Link to={URL.SUPPORT_DETAIL} className={"bbsbox_11_title"}>국토교통부고시_제2024-147호(내진설계일반(KDS_17_10_00))_정정_고시_정정_고시_정정_고시_정정_고시_정정_고시_정정_고시_정정_고시</Link></Col>
-                                <Col xs={2} className={"text-end"}>2024.01.23.</Col>
-                                <Col xs={1} className={"text-end"}><img src={"/assets/images/file.png"} /></Col>
+                                <Col xs={3} className={"text-end"}>2024.01.23.</Col>
                             </Row>
                         </TabPanel>
-                        <TabPanel value={value} index={1}>
+                        <TabPanel value={leftTabValue} index={1}>
                             <Row className={"bbsbox_11"}>
-                                <Col xs={9} className={"text-truncate"}>2024년 제7차 건설기준위원회</Col>
-                                <Col xs={2} className={"text-end"}>2024.01.23.</Col>
-                                <Col xs={1} className={"text-end"}><img src={"/assets/images/file.png"} /></Col>
+                                <Col xs={9} className={"text-truncate"}><Link to={URL.SUPPORT_DETAIL} className={"bbsbox_11_title"}>2024년 제7차 건설기준연구</Link></Col>
+                                <Col xs={3} className={"text-end"}>2024.01.23.</Col>
                             </Row>
                             <Row className={"bbsbox_11"}>
                                 <Col xs={9} className={"text-truncate"}>2024년 제7차 건설기준위원회</Col>
-                                <Col xs={2} className={"text-end"}>2024.01.23.</Col>
-                                <Col xs={1} className={"text-end"}><img src={"/assets/images/file.png"} /></Col>
+                                <Col xs={3} className={"text-end"}>2024.01.23.</Col>
                             </Row>
                             <Row className={"bbsbox_11"}>
                                 <Col xs={9} className={"text-truncate"}>2024년 제7차 건설기준위원회</Col>
-                                <Col xs={2} className={"text-end"}>2024.01.23.</Col>
-                                <Col xs={1} className={"text-end"}><img src={"/assets/images/file.png"} /></Col>
+                                <Col xs={3} className={"text-end"}>2024.01.23.</Col>
                             </Row>
                             <Row className={"bbsbox_11"}>
                                 <Col xs={9} className={"text-truncate"}>2024년 제7차 건설기준위원회</Col>
-                                <Col xs={2} className={"text-end"}>2024.01.23.</Col>
-                                <Col xs={1} className={"text-end"}><img src={"/assets/images/file.png"} /></Col>
-                            </Row></TabPanel>
-                        <TabPanel value={value} index={2}>건설기준고시 리스트 출력</TabPanel>
-                        <TabPanel value={value} index={3}>건설기준연구 리스트 출력</TabPanel>
-                        <TabPanel value={value} index={4}>기술자료 리스트 출력</TabPanel>
-                        <TabPanel value={value} index={5}>보도자료 리스트 출력</TabPanel>
+                                <Col xs={3} className={"text-end"}>2024.01.23.</Col>
+                            </Row>
+                        </TabPanel>
+                        <TabPanel value={leftTabValue} index={2}>위원회 진행현황 리스트 출력</TabPanel>
+                    </div>
+                    <div className="bbsbox_3">
+                        <Box sx={{ borderBottom: 2, borderColor: 'divider' }}>
+                            <Tabs
+                                value={rightTabValue}
+                                onChange={handleRightTabChange}
+                                indicatorColor="secondary"
+                                textColor="inherit"
+                                sx={{
+                                    '& .Mui-selected': {
+                                        color: '#22498E', // 선택된 탭의 색상
+                                    },
+                                }}
+                            >
+                                <Tab value={3} {...a11yProps(3)} sx={{ fontSize: rightTabValue === 3 ? '1.3rem' : '1rem', fontWeight: 700, color: rightTabValue === 3 ? '#22498E' : 'secondary'}} label="공지사항" />
+                                <Tab value={4} {...a11yProps(4)} sx={{ fontSize: rightTabValue === 4 ? '1.3rem' : '1rem', fontWeight: 700, color: rightTabValue === 4 ? '#22498E' : 'secondary'}} label="기술자료" />
+                                <Tab value={5} {...a11yProps(5)} sx={{ fontSize: rightTabValue === 5 ? '1.3rem' : '1rem', fontWeight: 700, color: rightTabValue === 5 ? '#22498E' : 'secondary'}} label="보도자료" />
+                                <Tab value="" label="+" sx={{ fontSize: '1.75rem', ml: 'auto' }} onClick={() => handlePlusClick(rightTabValue)} />
+                            </Tabs>
+                        </Box>
+                        <TabPanel value={rightTabValue} index={3}>
+                            <Row className={"bbsbox_11"}>
+                                <Col xs={9} className={"text-truncate"}><Link to={URL.SUPPORT_DETAIL} className={"bbsbox_11_title"}>2024년 제7차 공지사항</Link></Col>
+                                <Col xs={3} className={"text-end"}>2024.01.23.</Col>
+                            </Row>
+                            <Row className={"bbsbox_11"}>
+                                <Col xs={9} className={"text-truncate"}>2024년 제7차 건설기준연구</Col>
+                                <Col xs={3} className={"text-end"}>2024.01.23.</Col>
+                            </Row>
+                            <Row className={"bbsbox_11"}>
+                                <Col xs={9} className={"text-truncate"}>2024년 제7차 건설기준연구</Col>
+                                <Col xs={3} className={"text-end"}>2024.01.23.</Col>
+                            </Row>
+                            <Row className={"bbsbox_11"}>
+                                <Col xs={9} className={"text-truncate"}>2024년 제7차 건설기준연구</Col>
+                                <Col xs={3} className={"text-end"}>2024.01.23.</Col>
+                            </Row>
+                        </TabPanel>
+                        <TabPanel value={rightTabValue} index={4}>기술자료 리스트 출력</TabPanel>
+                        <TabPanel value={rightTabValue} index={5}>보도자료 리스트 출력</TabPanel>
                     </div>
                     <div className="bbsbox_2"><Link to={URL.ABOUT_PROMOTE}><img src="/assets/images/narae.jpg" /></Link></div>
                 </div>
 
 
-                <div className="qnabox">
-                    <div className="qnabox_1 d-flex justify-content-center">
-                        <div className="qnabox_11 d-flex justify-content-start align-items-end">Q&A</div>
-                        <Row className="qnabox_12 text-center align-items-end">
-                            <Col xs={9}></Col>
-                            <Col xs={1} className={"rounded_circle_qna"}><img src={"/assets/images/left.png"} /></Col>
-                            <Col xs={1} className={""}> 1/2 </Col>
-                            <Col xs={1} className={"rounded_circle_qna"}><img src={"/assets/images/right.png"} /></Col>
+                <Row className={"qna_count d-flex justify-content-center"}>
+                    <Col className="qnabox">
+                        <div className="qnabox_1 d-flex justify-content-center">
+                            <div className="qnabox_11 text-start align-items-end">Q&A</div>
+                            <Row className="qnabox_12 text-center justify-content-center align-items-end">
+                                <Col xs={8}></Col>
+                                <Col xs={1} className={"rounded_circle_qna"}><img src={"/assets/images/left.png"} /></Col>
+                                <Col xs={2} className={""}> 1/2 </Col>
+                                <Col xs={1} className={"rounded_circle_qna"}><img src={"/assets/images/right.png"} /></Col>
+                            </Row>
+                        </div>
+                        <div className="qnabox_2 d-flex justify-content-center align-items-center">
+                            <div className="qnabox_n">
+                                <Row>
+                                    <Col xs={10} className={"qnabox_n_file py-1"}>00.jpg</Col>
+                                    <Col xs={2} className={"text-end p-0"}><img src={"/assets/images/file.png"} /></Col>
+                                </Row>
+                                <Row className={"qnabox_n_title pt-2"}><Link to={URL.SUPPORT_DETAIL} className={"text-secondary p-0"}>콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요? 콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요? 정말 잘 되나요? 정말 잘 되나요? 정말 잘 되나요? 정말 잘 되나요?</Link></Row>
+                                <Row className={"qnabox_n_date justify-content-end"}>2024.01.23</Row>
+                            </div>
+                            <div className="qnabox_n">
+                                <Row>
+                                    <Col xs={10} className={"qnabox_n_file py-1"}>00.jpg</Col>
+                                    <Col xs={2} className={"text-end p-0"}><img src={"/assets/images/file.png"} /></Col>
+                                </Row>
+                                <Row className={"qnabox_n_title pt-2"}><Link to={URL.SUPPORT_DETAIL} className={"text-secondary p-0"}>콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요? 콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요?</Link></Row>
+                                <Row className={"qnabox_n_date justify-content-end"}>2024.01.23</Row>
+                            </div>
+                            <div className="qnabox_n">
+                                <Row>
+                                    <Col xs={10} className={"qnabox_n_file py-1"}>00.jpg</Col>
+                                    <Col xs={2} className={"text-end p-0"}><img src={"/assets/images/file.png"} /></Col>
+                                </Row>
+                                <Row className={"qnabox_n_title pt-2"}><Link to={URL.SUPPORT_DETAIL} className={"text-secondary p-0"}>콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요? 콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요?</Link></Row>
+                                <Row className={"qnabox_n_date justify-content-end"}>2024.01.23</Row>
+                            </div>
+                            <div className="qnabox_n">
+                                <Row>
+                                    <Col xs={10} className={"qnabox_n_file py-1"}>00.jpg</Col>
+                                    <Col xs={2} className={"text-end p-0"}><img src={"/assets/images/file.png"} /></Col>
+                                </Row>
+                                <Row className={"qnabox_n_title pt-2"}><Link to={URL.SUPPORT_DETAIL} className={"text-secondary p-0"}>콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요? 콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요?</Link></Row>
+                                <Row className={"qnabox_n_date justify-content-end"}>2024.01.23</Row>
+                            </div>
+                        </div>
+                    </Col>
+                    <Col className={"numbox"}>
+                        <Row className="numbox_n">
+                            <Col className="num_text">다운로드 수</Col>
+                            <Col className="num_count"><CountUp start={0} end={334345} duration={2.5} separator="," /><span className="unit">건</span></Col>
                         </Row>
-                    </div>
-                    <div className="qnabox_2 d-flex justify-content-center align-items-center">
-                        <div className="qnabox_n">
-                            <Row>
-                                <Col xs={10} className={"qnabox_n_file py-1"}>00.jpg</Col>
-                                <Col xs={2} className={"text-end p-0"}><img src={"/assets/images/file.png"} /></Col>
-                            </Row>
-                            <Row className={"qnabox_n_title pt-2"}><Link to={URL.SUPPORT_DETAIL} className={"text-secondary p-0"}>콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요? 콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요?</Link></Row>
-                            <Row className={"qnabox_n_date justify-content-end"}>2024.01.23</Row>
-                        </div>
-                        <div className="qnabox_n">
-                            <Row>
-                                <Col xs={10} className={"qnabox_n_file py-1"}>00.jpg</Col>
-                                <Col xs={2} className={"text-end p-0"}><img src={"/assets/images/file.png"} /></Col>
-                            </Row>
-                            <Row className={"qnabox_n_title pt-2"}><Link to={URL.SUPPORT_DETAIL} className={"text-secondary p-0"}>콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요? 콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요?</Link></Row>
-                            <Row className={"qnabox_n_date justify-content-end"}>2024.01.23</Row>
-                        </div>
-                        <div className="qnabox_n">
-                            <Row>
-                                <Col xs={10} className={"qnabox_n_file py-1"}>00.jpg</Col>
-                                <Col xs={2} className={"text-end p-0"}><img src={"/assets/images/file.png"} /></Col>
-                            </Row>
-                            <Row className={"qnabox_n_title pt-2"}><Link to={URL.SUPPORT_DETAIL} className={"text-secondary p-0"}>콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요? 콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요?</Link></Row>
-                            <Row className={"qnabox_n_date justify-content-end"}>2024.01.23</Row>
-                        </div>
-                        <div className="qnabox_n">
-                            <Row>
-                                <Col xs={10} className={"qnabox_n_file py-1"}>00.jpg</Col>
-                                <Col xs={2} className={"text-end p-0"}><img src={"/assets/images/file.png"} /></Col>
-                            </Row>
-                            <Row className={"qnabox_n_title pt-2"}><Link to={URL.SUPPORT_DETAIL} className={"text-secondary p-0"}>콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요? 콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요?</Link></Row>
-                            <Row className={"qnabox_n_date justify-content-end"}>2024.01.23</Row>
-                        </div>
-                    </div>
-                </div>
-
+                        <Row className="numbox_n">
+                            <Col className="num_text">회원가입자 수</Col>
+                            <Col className="num_count"><CountUp start={0} end={12345} duration={2.5} separator="," /><span className="unit">명</span></Col>
+                        </Row>
+                        <Row className="numbox_n">
+                            <Col className="num_text">일 평균 방문자</Col>
+                            <Col className="num_count"><CountUp start={0} end={56427} duration={2.5} separator="," /><span className="unit">명</span></Col>
+                        </Row>
+                        <Row className="numbox_n">
+                            <Col className="num_text">개정고시</Col>
+                            <Col className="num_count"><CountUp start={0} end={99875} duration={2.5} separator="," /><span className="unit">건</span></Col>
+                        </Row>
+                    </Col>
+                </Row>
 
                 <div className="bannerbox">
                     <Slider {...settings}>
@@ -483,7 +817,7 @@ function TabPanel(props) {
         >
             {value === index && (
                 <Box sx={{ p: 3 }}>
-                    <Typography>{children}</Typography>
+                    <Typography component="div">{children}</Typography>
                 </Box>
             )}
         </div>