diff --git a/assets/css/style.css b/assets/css/style.css index adcb36e..c11c3a9 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1 +1 @@ -@import"https://fonts.googleapis.com/css2?family=Abril+Fatface&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;word-break:break-all}html{scroll-behavior:smooth;font-size:16px}body{color:var(--white-color);overflow-x:hidden;background-color:var(--white-color);font-family:"Nanum Myeongjo",serif;position:relative;z-index:-10}.svg-txt{padding:0 2rem;position:relative;z-index:1001}@media screen and (max-width: 800px){.svg-txt{padding:0 4%}}.svg-txt path{fill-opacity:0;fill:none;stroke:none;transition:stroke 2s}.svg-txt2{padding:0 2rem;position:relative;z-index:998;max-width:100%}@media screen and (max-width: 800px){.svg-txt2{top:-5rem;padding:0 4%}}.svg-txt2 path{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}.logo{text-transform:capitalize;font-size:30px;font-family:"Nanum Myeongjo",serif;color:var(--sub-color);cursor:pointer;transition:all .4s}.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem 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;transition:all .4s}.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{z-index:9999 !important}.open.active span{transition:all .4s}.open.active span:nth-of-type(1){top:18px;left:14px;transform:translateY(6px) rotate(-45deg);width:45%}.open.active span:nth-of-type(2){opacity:0}.open.active span:nth-of-type(3){top:30px;left:14px;transform:translateY(-6px) rotate(45deg);width:45%}.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 .2s}.circle.circleactive{transform:scale(50)}.wrapper{display:flex;flex-direction:column}.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}.mask{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:2rem}@media screen and (max-width: 800px){.bg{font-size:1.5rem}}.back-text-container{position:absolute;top:0;height:100vh;width:100vw}.bg-p{min-height:80vh;padding:4rem 0;display:flex;justify-content:center;align-items:center;background-position:center;background-repeat:no-repeat;background-attachment:fixed;background-size:cover;background-image:url(/pc.webp)}.bg-p p{color:var(--white-color);font-size:4rem;font-family:"Nanum Myeongjo",serif;text-shadow:rgba(0,0,0,.2) 2px 2px 4px}@media screen and (max-width: 800px){.bg-p p{font-size:2rem}}.left-side{display:flex;flex-direction:column;justify-content:center;padding:2rem;gap:1rem;opacity:1;position:relative;z-index:0;width:55%;height:100vh}@media screen and (max-width: 800px){.left-side{width:100%;padding:2rem 4%}}.detail-btn{background-color:var(--sub-color);color:var(--white-color);border:1px solid var(--sub-color);padding:.8rem 1rem;transition:all .2s}.detail-btn:hover{color:var(--sub-color);border:1px solid var(--sub-color);background:rgba(0,0,0,0)}.text-title{font-family:"Nanum Myeongjo",serif;margin-bottom:1.5rem}.text-title.green{text-shadow:rgba(0,0,0,.2) 2px 2px 4px}.text-container{max-width:100%}.text-container p{padding-bottom:1rem;line-height:1.4;margin-bottom:1.5rem}.text-container p.green{text-shadow:rgba(0,0,0,.2) 2px 2px 4px}.main-section{width:100vw;min-height:100vh}.main-inner{display:flex;width:100vw;min-height:100vh}.main-left-side{width:30%;min-height:100%;display:flex;justify-content:center;align-items:center;padding:2rem;background-image:url(/keybord.webp);background-repeat:no-repeat;background-position:center;position:relative}@media screen and (max-width: 1000px){.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;background-image:url(/pc3.webp);background-repeat:no-repeat;background-position:center}@media screen and (max-width: 1000px){.main-left-side2{width:100%}}@media screen and (max-width: 800px){.main-left-side2{padding:4rem 4%}}.main-left-side2::before{width:100%;content:"";position:absolute;top:0;left:0;right:0;bottom:0;opacity:.9;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:1200px}.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 .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;background:var(--white-color);transition:all .5s ease}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg a:hover{background:rgba(0,0,0,0)}.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:1rem}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg h3{color:var(--sub-color);margin-top:.8rem;margin-bottom:.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 a{background:var(--white-color);transition:all .5s ease}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm a:hover{background:rgba(0,0,0,0)}.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:80px;max-height:80px}}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm .date{color:var(--sub-color);margin-left:.8rem;font-size:1rem}.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.1rem;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;background-image:url(/pc2.webp);background-repeat:no-repeat;background-position:center;background-size:cover}@media screen and (max-width: 1000px){.main-right-side{width:100%;padding:2rem}}@media screen and (max-width: 800px){.main-right-side{padding:4rem 4%}}.main-right-side::before{width:100%;content:"";position:absolute;top:0;left:0;right:0;bottom:0;opacity:.9;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;max-width:700px}.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.webp);background-repeat:no-repeat;background-position:center;position:relative}@media screen and (max-width: 1000px){.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;flex-direction:column;align-items:center;color:var(--sub-color);padding:10rem 2rem;position:relative;min-height:100vh}@media screen and (max-width: 800px){.under-main section{padding:8rem 4%}}.under-main section .bg{content:"";min-width:1343px;min-height:100%;position:absolute;top:100px;right:0;bottom:0;left:0;background:url(/pc.webp) no-repeat;background-size:cover;z-index:0}.under-main section .bg::after{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;content:"";background-color:rgba(245,244,235,.88);z-index:1}.under-main section .under-contents{z-index:1;position:relative;display:flex;align-items:center;justify-content:center}.under-main section h1{font-size:3rem;margin-bottom:5rem;text-transform:capitalize;z-index:1;position:relative;text-align:center}@media screen and (max-width: 800px){.under-main section h1{font-size:2rem}}.under-main section h1::after{border-bottom:solid var(--sub-color);-webkit-transform:translateX(-50%);transform:translateX(-50%);position:absolute;bottom:-10px;left:50%;content:"";border-bottom-width:2px;width:80px}.under-main section h2{z-index:1;margin-bottom:2rem;max-width:1200px}.under-main section p{font-size:1.3rem;z-index:1;line-height:1.6rem;max-width:1200px;font-family:"Lato",sans-serif}.under-main section a{color:var(--sub-color);margin-bottom:3rem;display:block}.blog-item-box{display:flex;position:relative;z-index:3;flex-wrap:wrap;margin-top:3rem}@media screen and (max-width: 800px){.blog-item-box{flex-direction:column}}.blog-item-box .blog-item{width:30%;margin:0 1.5% 1.2rem}@media screen and (max-width: 800px){.blog-item-box .blog-item{width:100%;margin:0 0 1.2rem}}.blog-item-box a{display:flex;flex-direction:column;color:var(--sub-color);margin-bottom:3rem;background:var(--white-color);transition:all .5s ease;padding:10px}.blog-item-box a:hover{background:rgba(0,0,0,0)}.blog-item-box img{width:100%;height:auto;object-fit:cover;margin-bottom:.5rem}.blog-item-box h2{margin-top:.5rem;font-size:1.2rem}time.date{display:flex;align-items:center;margin-top:.4rem}time.date i{font-size:1.1rem;margin-right:.3rem}.blog-detail-inner{position:relative;z-index:1}.blog-detail-inner time.date{justify-content:center}.blog-detail-inner .blog-body{line-height:1.6rem}.blog-detail-inner .blog-body img{margin:1rem 0;width:100%;max-height:500px;object-fit:cover}.contact{padding:4rem 2rem;text-align:center;background:var(--white-color);background-image:url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23f9f9f0' fill-opacity='0.94' fill-rule='evenodd'/%3E%3C/svg%3E")}@media screen and (max-width: 800px){.contact{padding:4rem 4%}}.contact h2{font-size:3rem;color:var(--sub-color)}.form-box{max-width:600px;margin:2.5rem auto 3.5rem}.form-box .form-item{width:100%;display:flex;flex-direction:column;align-items:center}.form-box input,.form-box textarea{color:var(--sub-color);background-color:rgba(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b), 0.4);font-size:1rem;transition:all .3s;padding:.8rem;width:100%;border:none;margin-bottom:1.2rem;font-weight:400;font-family:"Nanum Myeongjo",serif}.form-box input::placeholder,.form-box textarea::placeholder{color:#be9047;font-family:"Nanum Myeongjo",serif}.form-box input:focus,.form-box textarea:focus{outline:none}.form-box textarea{min-height:150px}.form-box span{color:var(--sub-color);margin-bottom:1.2rem}.form-box .submit-btn{color:var(--white-color);border:1px solid var(--sub-color);background:var(--sub-color);padding:1rem 1.5rem;margin-top:1rem;transition:all .5s ease;cursor:pointer;font-family:"Nanum Myeongjo",serif;font-size:1rem}.form-box .submit-btn:hover{color:var(--sub-color);border:1px solid var(--sub-color);background:rgba(0,0,0,0)}.recaptcha{text-align:center;margin-top:2rem;color:var(--sub-color)}@media screen and (max-width: 800px){.recaptcha{font-size:.8rem}}.recaptcha a{color:var(--sub-color);text-decoration:underline}.grecaptcha-badge{visibility:hidden}.flex-box{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px}@media screen and (max-width: 800px){.flex-box{flex-direction:column}}.flex-box .flex-item{width:48%;background:var(--white-color);margin-bottom:2rem;padding:2rem}@media screen and (max-width: 800px){.flex-box .flex-item{width:100%;padding:2rem 4%}}.flex-box .flex-item h2{font-size:1.3rem;margin-bottom:1rem}.read-text{margin-bottom:2rem}hr{margin:3rem 0 5rem;z-index:2;width:100%;max-width:1200px;border:none;border-top:.3px solid var(--sub-color)}.cta-section{padding:2rem;background-color:var(--white-color);margin-top:5rem;position:relative;z-index:2;max-width:800px;display:flex;flex-direction:column}@media screen and (max-width: 800px){.cta-section{padding:2rem 4%}}.cta-section h2{text-align:center}.cta-button{display:inline-block;padding:1rem 1.5rem;color:var(--white-color) !important;border:1px solid var(--sub-color);background:var(--sub-color);padding:1rem 1.5rem;text-decoration:none;text-align:center;margin-top:2rem;margin-bottom:0 !important;transition:all .5s ease}.cta-button:hover{color:var(--sub-color) !important;border:1px solid var(--sub-color);background:rgba(0,0,0,0)} \ No newline at end of file +@import"https://fonts.googleapis.com/css2?family=Abril+Fatface&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;word-break:break-all}html{scroll-behavior:smooth;font-size:16px}body{color:var(--white-color);overflow-x:hidden;background-color:var(--white-color);font-family:"Nanum Myeongjo",serif;position:relative;z-index:-10}.svg-txt{padding:0 2rem;position:relative;z-index:1001}@media screen and (max-width: 800px){.svg-txt{padding:0 4%}}.svg-txt2{padding:0 2rem;position:relative;z-index:998;max-width:100%}@media screen and (max-width: 800px){.svg-txt2{top:-5rem;padding:0 4%}}.svg-txt2 path{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}.logo{text-transform:capitalize;font-size:30px;font-family:"Nanum Myeongjo",serif;color:var(--sub-color);cursor:pointer;transition:all .4s}.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem 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;transition:all .4s}.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{z-index:9999 !important}.open.active span{transition:all .4s}.open.active span:nth-of-type(1){top:18px;left:14px;transform:translateY(6px) rotate(-45deg);width:45%}.open.active span:nth-of-type(2){opacity:0}.open.active span:nth-of-type(3){top:30px;left:14px;transform:translateY(-6px) rotate(45deg);width:45%}.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 .2s}.circle.circleactive{transform:scale(50)}.wrapper{display:flex;flex-direction:column}.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}.mask{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:2rem}@media screen and (max-width: 800px){.bg{font-size:1.5rem}}.back-text-container{position:absolute;top:0;height:100vh;width:100vw}.bg-p{min-height:80vh;padding:4rem 0;display:flex;justify-content:center;align-items:center;background-position:center;background-repeat:no-repeat;background-attachment:fixed;background-size:cover;background-image:url(/pc.webp)}.bg-p p{color:var(--white-color);font-size:4rem;font-family:"Nanum Myeongjo",serif;text-shadow:rgba(0,0,0,.2) 2px 2px 4px}@media screen and (max-width: 800px){.bg-p p{font-size:2rem}}.left-side{display:flex;flex-direction:column;justify-content:center;padding:2rem;gap:1rem;opacity:1;position:relative;z-index:0;width:55%;height:100vh}@media screen and (max-width: 800px){.left-side{width:100%;padding:2rem 4%}}.detail-btn{background-color:var(--sub-color);color:var(--white-color);border:1px solid var(--sub-color);padding:.8rem 1rem;transition:all .2s}.detail-btn:hover{color:var(--sub-color);border:1px solid var(--sub-color);background:rgba(0,0,0,0)}.text-title{font-family:"Nanum Myeongjo",serif;margin-bottom:1.5rem}.text-title.green{text-shadow:rgba(0,0,0,.2) 2px 2px 4px}.text-container{max-width:100%}.text-container p{padding-bottom:1rem;line-height:1.4;margin-bottom:1.5rem}.text-container p.green{text-shadow:rgba(0,0,0,.2) 2px 2px 4px}.main-section{width:100vw;min-height:100vh}.main-inner{display:flex;width:100vw;min-height:100vh}.main-left-side{width:30%;min-height:100%;display:flex;justify-content:center;align-items:center;padding:2rem;background-image:url(/keybord.webp);background-repeat:no-repeat;background-position:center;position:relative}@media screen and (max-width: 1000px){.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;background-image:url(/pc3.webp);background-repeat:no-repeat;background-position:center}@media screen and (max-width: 1000px){.main-left-side2{width:100%}}@media screen and (max-width: 800px){.main-left-side2{padding:4rem 4%}}.main-left-side2::before{width:100%;content:"";position:absolute;top:0;left:0;right:0;bottom:0;opacity:.9;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:1200px}.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 .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;background:var(--white-color);transition:all .5s ease}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg a:hover{background:rgba(0,0,0,0)}.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:1rem}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-bg h3{color:var(--sub-color);margin-top:.8rem;margin-bottom:.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 a{background:var(--white-color);transition:all .5s ease}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm a:hover{background:rgba(0,0,0,0)}.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:80px;max-height:80px}}.main-left-side2 .main-left-contents .blog-item-flex .blog-item-sm .date{color:var(--sub-color);margin-left:.8rem;font-size:1rem}.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.1rem;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;background-image:url(/pc2.webp);background-repeat:no-repeat;background-position:center;background-size:cover}@media screen and (max-width: 1000px){.main-right-side{width:100%;padding:2rem}}@media screen and (max-width: 800px){.main-right-side{padding:4rem 4%}}.main-right-side::before{width:100%;content:"";position:absolute;top:0;left:0;right:0;bottom:0;opacity:.9;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;max-width:700px}.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.webp);background-repeat:no-repeat;background-position:center;position:relative}@media screen and (max-width: 1000px){.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;flex-direction:column;align-items:center;color:var(--sub-color);padding:10rem 2rem;position:relative;min-height:100vh}@media screen and (max-width: 800px){.under-main section{padding:8rem 4%}}.under-main section .bg{content:"";min-width:1343px;min-height:100%;position:absolute;top:100px;right:0;bottom:0;left:0;background:url(/pc.webp) no-repeat;background-size:cover;z-index:0}.under-main section .bg::after{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;content:"";background-color:rgba(245,244,235,.88);z-index:1}.under-main section .under-contents{z-index:1;position:relative;display:flex;align-items:center;justify-content:center}.under-main section h1{font-size:3rem;margin-bottom:5rem;text-transform:capitalize;z-index:1;position:relative;text-align:center}@media screen and (max-width: 800px){.under-main section h1{font-size:2rem}}.under-main section h1::after{border-bottom:solid var(--sub-color);-webkit-transform:translateX(-50%);transform:translateX(-50%);position:absolute;bottom:-10px;left:50%;content:"";border-bottom-width:2px;width:80px}.under-main section h2{z-index:1;margin-bottom:2rem;max-width:1200px}.under-main section p{font-size:1.3rem;z-index:1;line-height:1.6rem;max-width:1200px;font-family:"Lato",sans-serif}.under-main section a{color:var(--sub-color);margin-bottom:3rem;display:block}.blog-item-box{display:flex;position:relative;z-index:3;flex-wrap:wrap;margin-top:3rem}@media screen and (max-width: 800px){.blog-item-box{flex-direction:column}}.blog-item-box .blog-item{width:30%;margin:0 1.5% 1.2rem}@media screen and (max-width: 800px){.blog-item-box .blog-item{width:100%;margin:0 0 1.2rem}}.blog-item-box a{display:flex;flex-direction:column;color:var(--sub-color);margin-bottom:3rem;background:var(--white-color);transition:all .5s ease;padding:10px}.blog-item-box a:hover{background:rgba(0,0,0,0)}.blog-item-box img{width:100%;height:auto;object-fit:cover;margin-bottom:.5rem}.blog-item-box h2{margin-top:.5rem;font-size:1.2rem}time.date{display:flex;align-items:center;margin-top:.4rem}time.date i{font-size:1.1rem;margin-right:.3rem}.blog-detail-inner{position:relative;z-index:1}.blog-detail-inner time.date{justify-content:center}.blog-detail-inner .blog-body{line-height:1.6rem}.blog-detail-inner .blog-body img{margin:1rem 0;width:100%;max-height:500px;object-fit:cover}.contact{padding:4rem 2rem;text-align:center;background:var(--white-color);background-image:url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23f9f9f0' fill-opacity='0.94' fill-rule='evenodd'/%3E%3C/svg%3E")}@media screen and (max-width: 800px){.contact{padding:4rem 4%}}.contact h2{font-size:3rem;color:var(--sub-color)}.form-box{max-width:600px;margin:2.5rem auto 3.5rem}.form-box .form-item{width:100%;display:flex;flex-direction:column;align-items:center}.form-box input,.form-box textarea{color:var(--sub-color);background-color:rgba(var(--bg-color-r), var(--bg-color-g), var(--bg-color-b), 0.4);font-size:1rem;transition:all .3s;padding:.8rem;width:100%;border:none;margin-bottom:1.2rem;font-weight:400;font-family:"Nanum Myeongjo",serif}.form-box input::placeholder,.form-box textarea::placeholder{color:#be9047;font-family:"Nanum Myeongjo",serif}.form-box input:focus,.form-box textarea:focus{outline:none}.form-box textarea{min-height:150px}.form-box span{color:var(--sub-color);margin-bottom:1.2rem}.form-box .submit-btn{color:var(--white-color);border:1px solid var(--sub-color);background:var(--sub-color);padding:1rem 1.5rem;margin-top:1rem;transition:all .5s ease;cursor:pointer;font-family:"Nanum Myeongjo",serif;font-size:1rem}.form-box .submit-btn:hover{color:var(--sub-color);border:1px solid var(--sub-color);background:rgba(0,0,0,0)}.recaptcha{text-align:center;margin-top:2rem;color:var(--sub-color)}@media screen and (max-width: 800px){.recaptcha{font-size:.8rem}}.recaptcha a{color:var(--sub-color);text-decoration:underline}.grecaptcha-badge{visibility:hidden}.flex-box{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px}@media screen and (max-width: 800px){.flex-box{flex-direction:column}}.flex-box .flex-item{width:48%;background:var(--white-color);margin-bottom:2rem;padding:2rem}@media screen and (max-width: 800px){.flex-box .flex-item{width:100%;padding:2rem 4%}}.flex-box .flex-item h2{font-size:1.3rem;margin-bottom:1rem}.read-text{margin-bottom:2rem}hr{margin:3rem 0 5rem;z-index:2;width:100%;max-width:1200px;border:none;border-top:.3px solid var(--sub-color)}.cta-section{padding:2rem;background-color:var(--white-color);margin-top:5rem;position:relative;z-index:2;max-width:800px;display:flex;flex-direction:column}@media screen and (max-width: 800px){.cta-section{padding:2rem 4%}}.cta-section h2{text-align:center}.cta-button{display:inline-block;padding:1rem 1.5rem;color:var(--white-color) !important;border:1px solid var(--sub-color);background:var(--sub-color);padding:1rem 1.5rem;text-decoration:none;text-align:center;margin-top:2rem;margin-bottom:0 !important;transition:all .5s ease}.cta-button:hover{color:var(--sub-color) !important;border:1px solid var(--sub-color);background:rgba(0,0,0,0)} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index acc9193..e14234f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2504,6 +2504,7 @@ }, "node_modules/@parcel/watcher-wasm/node_modules/napi-wasm": { "version": "1.1.0", + "dev": true, "inBundle": true, "license": "MIT" }, diff --git a/pages/index.vue b/pages/index.vue index e8f5521..abe7716 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -195,7 +195,7 @@ onMounted(() => { }) gsap.to('.front-img-container', { - scale: 120, + scale: 600, ease: "ease", scrollTrigger: { trigger: '.move-section',