diff --git a/assets/css/style.css b/assets/css/style.css index 5188d21..97f3192 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1 +1 @@ -@import"https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Anton&family=Lato:wght@300;900&family=Nanum+Myeongjo:wght@700&display=swap";.material-icons{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:root{--main-color: #dfc190;--sub-color: #916929;--accent-color: #e0be89;--white-color: #f5f4eb;--bg-color-r: 223;--bg-color-g: 193;--bg-color-b: 144;--bg-opacity: .8}*{padding:0;margin:0;box-sizing:border-box;text-decoration:none}html{scroll-behavior:smooth;font-size:16px}body{color:var(--white-color);overflow-x:hidden;background-color:var(--main-color);font-family:"Nanum Myeongjo",serif}.logo{text-transform:capitalize;font-size:30px;font-family:"Nanum Myeongjo",serif;color:var(--sub-color);cursor:pointer}.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem 1.5rem;position:fixed;top:0;width:100vw;z-index:999;font-family:"Lato",sans-serif}.menu{display:flex;gap:1rem;text-transform:uppercase;font-weight:100}@media screen and (max-width: 800px){.menu{display:none}}.menu a{color:var(--sub-color);text-decoration:none;padding:.5rem 1.5rem;border-radius:20px}.menu a:hover{color:var(--white-color);background:var(--sub-color)}.sp-nav{display:none}@media screen and (max-width: 800px){.sp-nav{display:flex;flex-direction:column;justify-content:center;align-items:center}}.sp-nav a{display:none}.sp-nav.panelactive{position:fixed;z-index:998;top:0;width:100%;height:100vh}.sp-nav.panelactive a{display:block;text-decoration:none;color:var(--sub-color);margin-bottom:50px;font-size:1.5rem;text-transform:capitalize}.open{position:fixed;top:10px;right:10px;z-index:998;cursor:pointer;width:50px;height:50px;display:none;background:rgba(0,0,0,0);padding:10px}@media screen and (max-width: 800px){.open{display:block}}.open span{display:inline-block;transition:all .4s;position:absolute;left:14px;height:3px;border-radius:2px;background:var(--sub-color);width:45%}.open span:nth-of-type(1){top:15px}.open span:nth-of-type(2){top:23px}.open span:nth-of-type(3){top:31px}.open.active{background:var(--main-color);z-index:9999 !important}.open.active span{background:var(--sub-color)}.open.active span:nth-of-type(1){top:18px;left:18px;transform:translateY(6px) rotate(-45deg);width:33%}.open.active span:nth-of-type(2){opacity:0}.open.active span:nth-of-type(3){top:30px;left:18px;transform:translateY(-6px) rotate(45deg);width:33%}.circle{position:fixed;z-index:100;width:100px;height:100px;border-radius:50%;background:var(--main-color);transform:scale(0);bottom:-50px;left:calc(50% - 50px);transition:all .6s}.circle.circleactive{transform:scale(50)}.wrapper{display:flex}.move-section{height:100vh;width:100vw;overflow:hidden;position:relative}.move-section .nature{height:100vh;width:100vw;object-fit:cover;z-index:-2;position:relative}.front-img-container{position:absolute;top:0;left:0;right:0;height:100vh;width:100vw;overflow:hidden}.img{object-fit:cover;height:100%;width:100%}section{width:100vw;flex-shrink:0;overflow:hidden}.front-text-container{position:absolute;top:0;height:100vh;width:100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Nanum Myeongjo",serif}.front-text-container .txt-bottom{transform:translateY(20px);font-size:14px;letter-spacing:1.3px;font-weight:300;font-family:"Lato",sans-serif;color:var(--white-color)}.bg{font-size:2.2rem}@media screen and (max-width: 800px){.bg{font-size:1.5rem}}.back-text-container{position:absolute;top:0;height:100vh;width:100vw}.left-side{display:flex;flex-direction:column;justify-content:center;padding:2rem;gap:1rem;opacity:1;position:relative;z-index:2;width:50%;height:100vh}@media screen and (max-width: 800px){.left-side{width:100%;justify-content:flex-end}}.detail-btn{background-color:var(--sub-color);color:var(--white-color);padding:.5rem 1rem}.detail-btn:hover{opacity:.8}.text-title{font-family:"Nanum Myeongjo",serif;margin-bottom:1.5rem}.text-container{max-width:100%}.text-container p{padding-bottom:1rem;line-height:1.4;opacity:.8;margin-bottom:1.5rem}.scrolldown{position:absolute;bottom:1%;right:3%;animation:arrowmove 1s ease-in-out infinite}.scrolldown span{position:absolute;left:-20px;bottom:10px;color:var(--sub-color);font-size:.7rem;letter-spacing:.05em;-ms-writing-mode:tb-rl;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}.scrolldown::before{content:"";position:absolute;bottom:0;right:-6px;width:1px;height:20px;background:var(--sub-color);transform:skewX(-31deg)}.scrolldown::after{content:"";position:absolute;bottom:0;right:0;width:1px;height:50px;background:var(--sub-color)}@keyframes arrowmove{0%{bottom:1%}50%{bottom:3%}100%{bottom:1%}}.svg-txt{padding:1rem 2rem 1.5rem;position:relative;z-index:1001}.svg-txt path{fill-opacity:0;fill:none;stroke:none;transition:stroke 5s;animation:fillIn 5s forwards;animation-delay:0s}.svg-txt2{padding:1rem 2rem 1.5rem;position:relative;z-index:998;max-width:100%}.svg-txt2 path{fill:var(--sub-color);stroke:var(--sub-color);fill-opacity:1}@keyframes fillIn{0%{fill-opacity:0;stroke:rgba(0,0,0,0);fill:none}100%{fill:var(--sub-color);stroke:var(--sub-color);fill-opacity:1}}#overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--white-color);z-index:1000;display:flex;align-items:center;justify-content:center;transition:background-color 2s}.main-section{width:100vw;min-height:100vh}.main-inner{display:flex;width:100vw;min-height:100%}.main-left-side{width:30%;min-height:100%;display:flex;justify-content:center;align-items:center;padding:2rem;background-image:url(/keybord.jpg);background-repeat:no-repeat;background-position:center;position:relative}@media screen and (max-width: 800px){.main-left-side{display:none}}.main-left-side::before{width:100%;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b), 0.8);z-index:1}.main-left-side p{color:var(--white-color);z-index:2;font-size:3rem}.main-left-side2{width:70%;min-height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:4rem;position:relative}@media screen and (max-width: 800px){.main-left-side2{width:100%}}.main-left-side2::before{width:100%;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--white-color);z-index:1}.main-left-side2 .main-left-contents{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;opacity:1;z-index:2;width:100%;max-width:800px}.main-left-side2 .main-left-contents .blog-item-flex{width:100%;display:flex;margin-bottom:1.5rem;z-index:2}@media screen and (max-width: 800px){.main-left-side2 .main-left-contents .blog-item-flex{flex-direction:column}}.main-left-side2 .main-left-contents .blog-item-flex a{width:100%;height:100%;display:flex;justify-content:flex-start;padding:10px}.main-left-side2 .main-left-contents .blog-item-flex a:hover{background-color:rgba(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b), 0.4)}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg{width:58%;margin-right:4%}@media screen and (max-width: 800px){.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg{width:100%;margin-right:0;margin-bottom:1rem}}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg a{flex-direction:column}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg img{width:100%;max-height:300px;height:auto;object-fit:cover;margin-bottom:.8rem}@media screen and (max-width: 800px){.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg img{max-height:200px}}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg .date{color:var(--sub-color);font-size:.8rem;border-bottom:solid 1px var(--sub-color)}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg h3{color:var(--sub-color);margin-top:.8rem;font-size:1.2rem;word-break:break-all}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm-box{width:38%}@media screen and (max-width: 800px){.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm-box{width:100%}}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm{margin-bottom:1.5rem}@media screen and (max-width: 800px){.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm{margin-bottom:.8rem}}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm img{max-width:100px;width:100%;height:auto;max-height:100px;object-fit:cover}@media screen and (max-width: 800px){.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm img{max-width:50px;max-height:50px}}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm .date{color:var(--sub-color);margin-left:.8rem;font-size:.8rem;border-bottom:solid 1px var(--sub-color)}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm h3{color:var(--sub-color);margin-top:.8rem;margin-left:.8rem;font-size:1.2rem;word-break:break-all}@media screen and (max-width: 800px){.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm h3{margin-top:.4rem}}.main-left-side2 .main-left-contents a{z-index:2}.main-right-side{width:70%;min-height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:4rem;position:relative}@media screen and (max-width: 800px){.main-right-side{width:100%}}.main-right-side::before{width:100%;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--white-color);z-index:1}.main-right-side .main-right-contents{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;opacity:1;z-index:2}.main-right-side .main-right-contents h2{color:var(--sub-color);z-index:2}.main-right-side .main-right-contents p{color:var(--sub-color);z-index:2;line-height:1.6rem;word-break:break-all}.main-right-side .main-right-contents a{z-index:2}.main-right-side2{width:30%;min-height:100%;display:flex;justify-content:center;align-items:center;padding:2rem;background-image:url(/pc.jpg);background-repeat:no-repeat;background-position:center;position:relative}@media screen and (max-width: 800px){.main-right-side2{display:none}}.main-right-side2::before{width:100%;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b), 0.8);z-index:1}.main-right-side2 p{color:var(--white-color);z-index:2;font-size:3rem}.footer-logo{position:relative;display:flex;justify-content:center;align-items:center;padding:.8rem 0;background-color:var(--main-color)}.footer-logo a{position:relative;color:var(--sub-color);text-decoration:none;z-index:2;font-size:1.2rem;line-height:1}.under-main{min-height:100vh;background:var(--white-color)}.under-main section{display:flex;justify-content:center;color:var(--sub-color);padding:8rem 2rem}.under-main section h1{font-size:3rem} \ No newline at end of file +@import"https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Anton&family=Lato:wght@300;900&family=Nanum+Myeongjo:wght@700&display=swap";.material-icons{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:root{--main-color: #dfc190;--sub-color: #916929;--accent-color: #e0be89;--white-color: #f5f4eb;--bg-color-r: 223;--bg-color-g: 193;--bg-color-b: 144;--bg-opacity: .8}*{padding:0;margin:0;box-sizing:border-box;text-decoration:none}html{scroll-behavior:smooth;font-size:16px}body{color:var(--white-color);overflow-x:hidden;background-color:var(--main-color);font-family:"Nanum Myeongjo",serif}.logo{text-transform:capitalize;font-size:30px;font-family:"Nanum Myeongjo",serif;color:var(--sub-color);cursor:pointer}.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem 1.5rem;position:fixed;top:0;width:100vw;z-index:999;font-family:"Lato",sans-serif}.menu{display:flex;gap:1rem;text-transform:uppercase;font-weight:100}@media screen and (max-width: 800px){.menu{display:none}}.menu a{color:var(--sub-color);text-decoration:none;padding:.5rem 1.5rem;border-radius:20px}.menu a:hover{color:var(--white-color);background:var(--sub-color)}.sp-nav{display:none}@media screen and (max-width: 800px){.sp-nav{display:flex;flex-direction:column;justify-content:center;align-items:center}}.sp-nav a{display:none}.sp-nav.panelactive{position:fixed;z-index:998;top:0;width:100%;height:100vh}.sp-nav.panelactive a{display:block;text-decoration:none;color:var(--sub-color);margin-bottom:50px;font-size:1.5rem;text-transform:capitalize}.open{position:fixed;top:10px;right:10px;z-index:998;cursor:pointer;width:50px;height:50px;display:none;background:rgba(0,0,0,0);padding:10px}@media screen and (max-width: 800px){.open{display:block}}.open span{display:inline-block;transition:all .4s;position:absolute;left:14px;height:3px;border-radius:2px;background:var(--sub-color);width:45%}.open span:nth-of-type(1){top:15px}.open span:nth-of-type(2){top:23px}.open span:nth-of-type(3){top:31px}.open.active{background:var(--main-color);z-index:9999 !important}.open.active span{background:var(--sub-color)}.open.active span:nth-of-type(1){top:18px;left:18px;transform:translateY(6px) rotate(-45deg);width:33%}.open.active span:nth-of-type(2){opacity:0}.open.active span:nth-of-type(3){top:30px;left:18px;transform:translateY(-6px) rotate(45deg);width:33%}.circle{position:fixed;z-index:100;width:100px;height:100px;border-radius:50%;background:var(--main-color);transform:scale(0);bottom:-50px;left:calc(50% - 50px);transition:all .6s}.circle.circleactive{transform:scale(50)}.wrapper{display:flex}.move-section{height:100vh;width:100vw;overflow:hidden;position:relative}.move-section .nature{height:100vh;width:100vw;object-fit:cover;z-index:-2;position:relative}.front-img-container{position:absolute;top:0;left:0;right:0;height:100vh;width:100vw;overflow:hidden}.img{object-fit:cover;height:100%;width:100%}section{width:100vw;flex-shrink:0;overflow:hidden}.front-text-container{position:absolute;top:0;height:100vh;width:100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Nanum Myeongjo",serif}.front-text-container .txt-bottom{transform:translateY(20px);font-size:14px;letter-spacing:1.3px;font-weight:300;font-family:"Lato",sans-serif;color:var(--white-color)}.bg{font-size:2.2rem}@media screen and (max-width: 800px){.bg{font-size:1.5rem}}.back-text-container{position:absolute;top:0;height:100vh;width:100vw}.left-side{display:flex;flex-direction:column;justify-content:center;padding:2rem;gap:1rem;opacity:1;position:relative;z-index:2;width:50%;height:100vh}@media screen and (max-width: 800px){.left-side{width:100%;justify-content:flex-end}}.detail-btn{background-color:var(--sub-color);color:var(--white-color);padding:.5rem 1rem}.detail-btn:hover{opacity:.8}.text-title{font-family:"Nanum Myeongjo",serif;margin-bottom:1.5rem}.text-container{max-width:100%}.text-container p{padding-bottom:1rem;line-height:1.4;opacity:.8;margin-bottom:1.5rem}.scrolldown{position:absolute;bottom:1%;right:3%;animation:arrowmove 1s ease-in-out infinite}.scrolldown span{position:absolute;left:-20px;bottom:10px;color:var(--sub-color);font-size:.7rem;letter-spacing:.05em;-ms-writing-mode:tb-rl;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}.scrolldown::before{content:"";position:absolute;bottom:0;right:-6px;width:1px;height:20px;background:var(--sub-color);transform:skewX(-31deg)}.scrolldown::after{content:"";position:absolute;bottom:0;right:0;width:1px;height:50px;background:var(--sub-color)}@keyframes arrowmove{0%{bottom:1%}50%{bottom:3%}100%{bottom:1%}}.svg-txt{padding:1rem 2rem 1.5rem;position:relative;z-index:1001}.svg-txt path{fill-opacity:0;fill:none;stroke:none;transition:stroke 5s;animation:fillIn 5s forwards;animation-delay:0s}.svg-txt2{padding:1rem 2rem 1.5rem;position:relative;z-index:998;max-width:100%}.svg-txt2 path{fill:var(--sub-color);stroke:var(--sub-color);fill-opacity:1}@keyframes fillIn{0%{fill-opacity:0;stroke:rgba(0,0,0,0);fill:none}100%{fill:var(--sub-color);stroke:var(--sub-color);fill-opacity:1}}#overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--white-color);z-index:1000;display:flex;align-items:center;justify-content:center;transition:background-color 2s}.main-section{width:100vw;min-height:100vh}.main-inner{display:flex;width:100vw;min-height:100%}.main-left-side{width:30%;min-height:100%;display:flex;justify-content:center;align-items:center;padding:2rem;background-image:url(/keybord.jpg);background-repeat:no-repeat;background-position:center;position:relative}@media screen and (max-width: 800px){.main-left-side{display:none}}.main-left-side::before{width:100%;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b), 0.8);z-index:1}.main-left-side p{color:var(--white-color);z-index:2;font-size:3rem}.main-left-side2{width:70%;min-height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:4rem 2rem;position:relative}@media screen and (max-width: 800px){.main-left-side2{width:100%}}.main-left-side2::before{width:100%;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--white-color);z-index:1}.main-left-side2 .main-left-contents{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;opacity:1;z-index:2;width:100%;max-width:1000px}.main-left-side2 .main-left-contents .blog-item-flex{width:100%;display:flex;margin-bottom:1.5rem;z-index:2}@media screen and (max-width: 800px){.main-left-side2 .main-left-contents .blog-item-flex{flex-direction:column}}.main-left-side2 .main-left-contents .blog-item-flex a{width:100%;height:100%;display:flex;justify-content:flex-start;padding:10px}.main-left-side2 .main-left-contents .blog-item-flex a:hover{background-color:rgba(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b), 0.4)}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg{width:58%;margin-right:4%}@media screen and (max-width: 800px){.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg{width:100%;margin-right:0;margin-bottom:1rem}}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg a{flex-direction:column}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg img{width:100%;max-height:300px;height:auto;object-fit:cover;margin-bottom:.8rem}@media screen and (max-width: 800px){.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg img{max-height:200px}}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg .date{color:var(--sub-color);font-size:.8rem;border-bottom:solid 1px var(--sub-color)}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg h3{color:var(--sub-color);margin-top:.8rem;font-size:1.2rem;word-break:break-all}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm-box{width:38%}@media screen and (max-width: 800px){.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm-box{width:100%}}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm{margin-bottom:1.5rem}@media screen and (max-width: 800px){.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm{margin-bottom:.8rem}}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm img{max-width:100px;width:100%;height:auto;max-height:100px;object-fit:cover}@media screen and (max-width: 800px){.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm img{max-width:50px;max-height:50px}}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm .date{color:var(--sub-color);margin-left:.8rem;font-size:.8rem;border-bottom:solid 1px var(--sub-color)}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm h3{color:var(--sub-color);margin-top:.8rem;margin-left:.8rem;font-size:1.2rem;word-break:break-all}@media screen and (max-width: 800px){.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm h3{margin-top:.4rem}}.main-left-side2 .main-left-contents a{z-index:2}.main-right-side{width:70%;min-height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:4rem;position:relative}@media screen and (max-width: 800px){.main-right-side{width:100%}}.main-right-side::before{width:100%;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--white-color);z-index:1}.main-right-side .main-right-contents{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;opacity:1;z-index:2}.main-right-side .main-right-contents h2{color:var(--sub-color);z-index:2}.main-right-side .main-right-contents p{color:var(--sub-color);z-index:2;line-height:1.6rem;word-break:break-all}.main-right-side .main-right-contents a{z-index:2}.main-right-side2{width:30%;min-height:100%;display:flex;justify-content:center;align-items:center;padding:2rem;background-image:url(/pc.jpg);background-repeat:no-repeat;background-position:center;position:relative}@media screen and (max-width: 800px){.main-right-side2{display:none}}.main-right-side2::before{width:100%;content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b), 0.8);z-index:1}.main-right-side2 p{color:var(--white-color);z-index:2;font-size:3rem}.footer-logo{position:relative;display:flex;justify-content:center;align-items:center;padding:.8rem 0;background-color:#ecdabd}.footer-logo a{position:relative;color:var(--sub-color);text-decoration:none;z-index:2;font-size:1.2rem;line-height:1}.under-main{min-height:100vh;background:var(--white-color)}.under-main section{display:flex;justify-content:center;color:var(--sub-color);padding:8rem 2rem}.under-main section h1{font-size:3rem} \ No newline at end of file diff --git a/assets/scss/style.scss b/assets/scss/style.scss index a64a438..787b3c9 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -458,7 +458,7 @@ section { justify-content: center; align-items: center; flex-direction: column; - padding: 4rem; + padding: 4rem 2rem; position: relative; @media screen and (max-width: 800px) { width: 100%; @@ -482,7 +482,7 @@ section { opacity: 1; z-index: 2; width: 100%; - max-width: 800px; + max-width: 1000px; .blog-item-flex { width: 100%; display: flex; @@ -664,7 +664,8 @@ section { justify-content: center; align-items: center; padding: .8rem 0; - background-color: var(--main-color); + // background-color: var(--main-color); + background-color: #ecdabd; a { position: relative; color: var(--sub-color);