D유형 중입니다 모달 닫기를 실행하면 오류가 나고 탭만 작동하고 마우스는 페이지에서 반응 안합니다 슬라이드 이미지도 유동적이지 않습니다

@charset"UTF-8";.body{ color: #333333; background-color: #ffffff; position: relative; font-size: 15px;}a{ color: #333333; text-decoration: none;}.container{ margin: 0;}.main{ display: flex;}.left{ width: 200px;}.right{ width: calc(100%-200px);}.header-logo{ width: 200px; padding-top: 50px; padding-bottom: 50px; display: flex; justify-content: center; align-items: center;}.header-logoa{ text-align: center;}.header-logoaimg{ object-fit: cover; width: 90%; height: 90%;}.spot-menu { text-align: center;}.spot-menua:first-child::after{ content: "1";}.slide-inner{ width: 100%; height: 400px; border: 1px#333333solid; position: relative;}.slide{ width: inherit; height: inherit; position: relative; overflow: hidden;}.slide-items{ width: 300%; height: inherit; position: absolute; font-size: 0; display: inline-block;}.slide-itemsaimg{ width: inherit; height: inherit; object-fit: fill;}.slide-banner{ width: 200px; position: absolute; top: 0; right: 0;}.shortcut{ height: 200px; width: inherit;}.news{ height: 250px;}footer{ height: 100px; display: flex; align-items: center; justify-content: space-between;}.footer-logo{ width: 200px;}.copyright{ flex: 1;}.sns{ width: 200px;}/* 메뉴 */.menu{ padding: 0%;}.menuli{ list-style: none;}.menulia{ display: block; text-align: center;}.menuli:hover>a{ background: #6b535373; color: #ffffff;}.sub-menu{ display: none;}.sub-menua{ display: block; text-align: center;}.sub-menua{ background: #6b535373; color: #ffffff;}.shortcut-inner{ display: flex; gap: 0100px;}.short-txt{ border: 1px#333333solid; width: 60%; height: inherit;}.banner{ width: 30%; height: inherit;}.bannerimg{ object-fit: cover;}.shortcut-img{ height: inherit; width: 10%;}/* 탭메뉴 */.news{ padding-left: 20px;}.btns{ margin-left: 10px;}.btnsa{ display: inline-block; border: 1px#333333solid; padding: 4px7px; border-bottom: #ffffff1pxsolid; margin-bottom: -1px; background-color: #bbb;}.btnsa:first-child{ margin-right: -6px;}.tabs{ border: 1px#333333solid; width: 40%; padding: 5px10px;}a.active{ background-color: #ffffff;}/* 공지사항 */.notice{ display: none;}.noticea{ display: flex; justify-content: space-between;}/* 갤러리 */.gallery{ display: flex; gap: 010px; align-items: center; justify-content:stretch;}.gallerya{ display: inline-block; text-align: center;}.galleryaimg{ object-fit: cover; width: inherit}/* 팝업창 */.modal{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}.modal-contents{ position: absolute; left: 50%; right: 50%; transform: translate(-50%,-50%); width: 500px; height: 500px; padding: auto; border: 1px#333333solid; display: none;}

D형 연습중인데 웹에서 tab이외로는 움직여지지않고 클릭이 안됩니다

@charset "UTF-8"; .body{ color: #333333; background-color: #ffffff; position: relative; font-size: 15px; } a{ color: #333333; text-decoration: none; } .container{ margin: 0; } .main{ display: flex; } .left{ width: 200px; } .right{ width: calc(100% - 200px); } .header-logo{ width: 200px; padding-top: 50px; padding-bottom: 50px; display: flex; justify-content: center; align-items: center; } .header-logo a{ text-align: center; } .header-logo a img{ object-fit: cover; width: 90%; height: 90%; } .spot-menu { text-align: center; } .spot-menu a:first-child::after{ content: "1"; } .slide-inner{ width: 100%; height: 400px; border: 1px #333333 solid; position: relative; } .slide{ width: inherit; height: inherit; position: relative; overflow: hidden; } .slide-items{ width: 300%; height: inherit; position: absolute; font-size: 0; display: inline-block; } .slide-items a img{ width: inherit; height: inherit; object-fit: fill; } .slide-banner{ width: 200px; position: absolute; top: 0; right: 0; } .shortcut{ height: 200px; width: inherit; } .news{ height: 250px; } footer{ height: 100px; display: flex; align-items: center; justify-content: space-between; } .footer-logo{ width: 200px; } .copyright{ flex: 1; } .sns{ width: 200px; } /* 메뉴 */ .menu{ padding: 0%; } .menu li{ list-style: none; } .menu li a{ display: block; text-align: center; } .menu li:hover>a{ background: #6b535373; color: #ffffff; } .sub-menu{ display: none; } .sub-menu a{ display: block; text-align: center; } .sub-menu a{ background: #6b535373; color: #ffffff; } .shortcut-inner{ display: flex; gap: 0 100px; } .short-txt{ border: 1px #333333 solid; width: 60%; height: inherit; } .banner{ width: 30%; height: inherit; } .banner img{ object-fit: cover; } .shortcut-img{ height: inherit; width: 10%; } /* 탭메뉴 */ .news{ padding-left: 20px; } .btns{ margin-left: 10px; } .btns a{ display: inline-block; border: 1px #333333 solid; padding: 4px 7px; border-bottom: #ffffff 1px solid; margin-bottom: -1px; background-color: #bbb; } .btns a:first-child{ margin-right: -6px; } .tabs{ border: 1px #333333 solid; width: 40%; padding: 5px 10px; } a.active{ background-color: #ffffff; } /* 공지사항 */ .notice{ display: none; } .notice a{ display: flex; justify-content: space-between; } /* 갤러리 */ .gallery{ display: flex; gap: 0 10px; align-items: center; justify-content:stretch; } .gallery a{ display: inline-block; text-align: center; } .gallery a img{ object-fit: cover; width: inherit } /* 팝업창 */ .modal{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .modal-contents{ position: absolute; left: 50%; right: 50%; transform: translate(-50%,-50%); width: 500px; height: 500px; padding: auto; border: 1px #333333 solid; display: none; }