전체적으로 창을 줄이면 거기에 대한 반응을 안합니다

right를 flex: 1;에서 calc로 바꿨더니 슬라이드랑 탭 메뉴는 해결이 됐는데 숏컷이 문제네요

전체적으로 창을 줄이면 거기에 대한 반응을 안합니다

// navi $('.menu li').mouseenter(function(){ $('.sub-menu').stop().fadeIn() }) $('.menu li').mouseleave(function(){ $('.sub-menu').stop().fadeOut() }) // tab $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) // modal $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() }) // slide $('.slide-item:gt(0)').hide(); setInterval(function(){ $('.slide-item:first-child').fadeOut(500).next().fadeIn(500) $('.slide-item:first-child').appendTo('.slide-items') }, 3500)

전체적으로 창을 줄이면 거기에 대한 반응을 안합니다

@charset "utf-8"; body { margin: 0; background-color: #fff; color: #000; font-size: 15px; } a { text-decoration: none; color: #000; } .main-content { display: flex; } .main-content > div { } .left { width: 200px; } .right { flex: 1; } /* header */ header { position: relative; z-index: 1000; } header > div { } .header-logo { height: 100px; padding-top: 10px; box-sizing: border-box; } .navi { height: 400px; } .spot-menu { height: 50px; text-align: center; padding: 10px; box-sizing: border-box; } .spot-menu a:hover { text-decoration: underline; } /* slide */ .slide { position: relative; height: 400px; } .slide > div { border: 1px solid #000; } .slide-image { height: 400px; } .slide-banner { width: 150px; height: 300px; position: absolute; top: 0; right: 10px; } .slide-banner a {} .slide-banner a img { width: 150px; display: block; } /* slide anima */ .slide-image-inner { height: inherit; } .slide-image-inner > a { position: absolute; top: 0; left: 0; height: inherit; width: 100%; } .slide-image-inner a img { width: inherit; height: inherit; object-fit: cover; } /* shortcut */ .shortcut { height: 200px; display: flex; align-items: center; margin: 0 30px; gap: 50px; } /* news - gallery */ .news-gallery { border: 1px solid #000; height: 250px; } /* footer */ footer { display: flex; } footer > div { height: 120px; box-sizing: border-box; } .footer-logo { width: 200px; padding-top: 15px; box-sizing: border-box; } .footer-content { flex: 1; } .footer-content div { height: 60px; } .footer-link { padding-top: 20px; box-sizing: border-box; } .footer-link a, .footer-link span { color: royalblue; } .footer-link a:hover { text-decoration: underline; } .copyright { padding: 10px 0px; box-sizing: border-box; } /* navi */ .menu { padding: 0; margin: 0; list-style: none; width: 95%; margin: auto; } .menu li { position: relative; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; text-align: center; } .menu li:hover > a { background-color: #ccc; } .sub-menu { display: none; position: absolute; top: 0; left: 100%; width: calc(100vw - 205px); background-color: rgba(0,0,0,0.2); } .sub-menu a { display: inline-block; width: 120px; text-align: center; color: #fff; padding: 6px; transition: 0.5s; } .sub-menu a:hover { background-color: #000; } /* tab */ .tab-inner {} .btn {} .btn a { border: 1px solid #000; display: inline-block; width: 100px; padding: 5px; text-align: center; border-radius: 5px 5px 0 0; margin-right: -6px; background-color: #ccc; margin-bottom: -1px; border-bottom: none; } .btn a.active { background-color: #fff; } .tabs {} .tabs > div {} .tab1, .tab2 { border: 1px solid #000; height: 160px; padding: 10px; box-sizing: border-box; } .tab1 a { display: block; padding: 7px; border-bottom: 1px solid #000; } .tab1 a b { float: right; font-weight: normal; } .tab1 a:last-child { border-bottom: none; } .tab2 { display: none; text-align: center; padding: 10px; } .tab2 a { display: inline-block; margin: 0 20px; } .tab2 a img { width: 170px; border-radius: 5px; } .tab2 a span { display: block; } /* modal */ .modal { background-color: rgba(0,0,0,0.2); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 20; display: none; } .modal-content { width: 400px; background-color: #fff; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .close-modal { border: 1px solid #000; padding: 5px; float: right; }