/*그누위즈 테마/basic/index.php에 사용되는 gw.css------------------------------------------------------------------------------------------------------------------ */ html, body {overflow: hidden;color: #000;font-size: 16px;} /*타이틀-----------------------------------------------------------------------------------------------------------------*/ .gw-title01{display:inline-block;position:relative;font-size:var(--gw-main-title02);word-break:keep-all;} .gw-title01:before {content: "";width: 0.8rem;height: 0.8rem;position: absolute;bottom: 0.5rem;right: -1.25rem;background: rgb(0,69,255);background: linear-gradient(223deg, rgba(0,69,255,1) 0%, rgba(0,185,255,1) 100%);border: 1px solid rgba(255,255,255,0.5);border-radius: 2rem;box-shadow: .1rem .1rem .2rem rgba(0,0,0,.2);color: var(--gw-fff);display: inline-block;} /*버튼-----------------------------------------------------------------------------------------------------------------*/ [class*="btn"] {display: inline-block;transition:all .5s;} .gw-btn-wrap {display:block;text-align: center;position:relative;} :where(.gw-btn-wrap) .btn-01{display:inline-block;padding: 1rem 2rem;font-family: 'NotoKr_B';font-size: 1.125rem;border: 3px solid #ddd;text-transform: uppercase;} :where(.gw-btn-wrap) .btn-01:hover{border:3px solid #222;border-radius:100px;} :where(.gw-btn-wrap) .btn-02{display:inline-block;padding: 0.75rem 2rem;font-family: 'NotoKr_B';font-size: 1.125rem;background:var(--gw-main-color);color: #fff;} :where(.gw-btn-wrap) .btn-02:hover{border-radius:100px;} :where(.gw-btn-wrap) .big-btn {font-size: 5.5rem;letter-spacing: -0.1rem;position:relative;} :where(.gw-btn-wrap) .big-btn:before {content: "";position: absolute;bottom: -0.5rem;left: 0;height: 0.5rem;width: 0;background: #222;transition:all .5s;} :where(.gw-btn-wrap) .big-btn:hover:before{width:100%;} .inquiry{padding: 0.75rem 1.5rem;position: absolute;top:0;left:10%;background: rgb(32,0,247);background: linear-gradient(223deg, rgba(32,0,247,1) 0%, rgba(0,26,247,1) 100%);border-radius: 2rem;box-shadow: .1rem .1rem .2rem rgba(32,0,247,.5);color: var(--gw-fff);display: inline-block;font-family: 'NotoKr_B';font-size:1rem;} /*퀵메뉴-----------------------------------------------------------------------------------------------------------------*/ #gw-quick-menu{position: fixed;right: calc(var(--gw-gutter-x) * 4);bottom: 3rem;z-index: 999;align-items:flex-end;} #gw-quick-menu.bottom{bottom: 9rem;} #gw-quick-menu > li{transform-origin: bottom center;transition: transform 0.6s, opacity 0.6s, width 0.3s;;width: 4rem;height: 4rem;border-radius: 100px;overflow: hidden;position: relative;margin:0.25rem 0;cursor: pointer;} #gw-quick-menu > li:hover{width: 163px;box-shadow: 0px 4px 10px rgba(0,0,0,.15);} #gw-quick-menu > li > a{display: block;width: 100%;height: 100%;} #gw-quick-menu .gw-kakao {background: #ffe100;} #gw-quick-menu .gw-kakao img {width: 2rem;} #gw-quick-menu .gw-shop {background: #671CF9;} #gw-quick-menu .gw-todo {background: #00C9FF;} #gw-quick-menu .gw-inquiry {background: #DFE3EB;} #gw-quick-menu .gw-chat {background: #0000ff;} #gw-quick-menu .gw-top {background: #343644;} #gw-quick-menu > li i{position: absolute;top: 50%;right: 1.3rem;left: auto;transform:translateY(-50%);transition: 0.6s;} #gw-quick-menu > li img{position: absolute;top: 50%;right: 1rem;left: auto;transform:translateY(-50%);transition: 0.6s;} #gw-quick-menu > li span{min-width:4rem;display: inline-block;padding: 0;position: absolute;right: 72px;top: 20px;opacity: 0; transform: translate(11px);transition: opacity 0.1s, transform 0.3s;} #gw-quick-menu > li:hover span { transform: translate(0px); opacity: 1; transition: opacity 0.2s, transform 0.6s;} #gw-quick-menu > li:hover i{transform: translate(-11px,-50%);} #gw-quick-menu > li:hover img{transform: translate(-11px,-50%);} /*마우스커서-----------------------------------------------------------------------------------------------------------------*/ #gw-cursor{position: fixed;left: 0;top: 0;z-index: 99999;pointer-events: none;mix-blend-mode: difference !important;} #gw-cursor>div {width: 1rem;height: 1rem;background: #EDF0FD;border-radius: 50%;transition: all .3s ease;border: 1px solid transparent;mix-blend-mode: difference !important;} #gw-cursor.on>div {width: 8.5rem;height: 8.5rem;background: url('../img/cursor/more.svg') no-repeat;} #gw-cursor.on02>div {width: 8.5rem;height: 8.5rem;} /*전체 영역-----------------------------------------------------------------------------------------------------------------*/ #gw-container {width: 100vw;height: 100vh; overflow: hidden;} /*#gw-container.on{height: 100%;}*/ #gw-container .scroll-content{will-change: transform;} .scroll-content > section{width: 100vw;position: relative;overflow: hidden;} /*콘텐츠 영역-----------------------------------------------------------------------------------------------------------------*/ .gw-con{max-width: 100%;} .gw-con-1280{margin: 0 auto;padding:0 var(--gw-gutter-x);zoom:1;max-width:1400px;} .gw-con-640{margin: 0 auto;padding:0 var(--gw-gutter-x);zoom:1;max-width:640px;} /*박스 -----------------------------------------------------------------------------------------------------------------*/ [class*="box"]{padding:calc(2 * var(--gw-gutter-x));background: #fff;border-radius: 3rem;box-shadow:70px 70px 130px rgb(39 49 108 / 20%);margin: calc(.5 * var(--gw-gutter-x)) calc(-.5 * var(--gw-gutter-x));} .gw-two-box01{width:calc(50% - 0.25rem);height:auto;} .gw-three-box01{width:33%;height:auto;} .gw-four-box01{width: 23%;margin:calc(.5 * var(--gw-gutter-x));} /*이미지 -----------------------------------------------------------------------------------------------------------------*/ [class*="img"] {position:relative;min-height: 21rem;border-radius: 1rem;filter: drop-shadow(23px 40px 50px rgba(77,82,168,.3));overflow: hidden;} /*배경-----------------------------------------------------------------------------------------------------------------*/ #gw-v-lines{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index:-100;} :where(#gw-v-lines) [class*="gw-line"]{width:2rem;height: 100%;position: absolute;top:0;} :where(#gw-v-lines) .gw-line-left{left:-2rem;border-right:1px solid rgba(225,229,249,0.6);} :where(#gw-v-lines) .gw-line-right{right:-2rem;border-left:1px solid rgba(225,229,249,0.6);} /*원-----------------------------------------------------------------------------------------------------------------*/ [class*="gw-circle"] {position:absolute;z-index:100;} .gw-circle-a{width:4rem;height:4rem;} .gw-circle-b{width:2.5rem;height:2.5rem;} .gw-circle-inner{width:inherit;height:inherit;animation:a 6s ease-in-out infinite;background:url('../img/circle.png') 50% no-repeat;background-size:100%;background-color:#f5f6fb;border-radius:50%;} .gw-position-1 {top: 0;right:11%;} .gw-position-2 { top: 14%;left: 10%;} .gw-position-3 { bottom: 5%;left: 17%;} .gw-position-4 { bottom: 12%;right: 18%;} .gw-delay-1{animation-delay: 0.5s;} .gw-delay-2{animation-delay: 3.05s;} .gw-delay-3{animation-delay: 2.05s;} .gw-delay-4{animation-delay: 1.05s;} @keyframes a { 0% { transform: translatey(0); box-shadow: 41px 37px 29px 0 rgba(99,118,243,.1) } 50% { transform: translatey(3rem); box-shadow: 41px 37px 29px 0 rgba(99,118,243,.18) } to { transform: translatey(0); box-shadow: 41px 37px 29px 0 rgba(99,118,243,.1) } } /*태그 -----------------------------------------------------------------------------------------------------------------*/ [class*="tag"]{width: auto;display: inline-block;vertical-align: middle;text-align: center;font-weight: 400;text-transform:uppercase;} .tag01{padding: 0.5rem 0.75rem;border-radius:0.5rem;margin-right:0.5rem;background:#F1F3F8;color: var(--gw-999);} /*텍스트 효과 -----------------------------------------------------------------------------------------------------------------*/ .coming {background: #000;height: 25rem;} @keyframes textShine { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } :where(.coming) > div {background: rgb(97,72,254);background: linear-gradient(90deg, rgba(97,72,254,1) 0%, rgba(24,218,244,1) 35%, rgba(0,255,204,1) 75%, rgba(0,212,255,1) 100%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;text-fill-color: transparent;background-size: 500% auto;animation: textShine 5s ease-in-out infinite alternate;} /*메뉴-----------------------------------------------------------------------------------------------------------------*/ /* 메뉴 버튼 */ #menu-btn {width: 2rem;height: 1.375rem;position: absolute;top: calc(var(--gw-gutter-x) * 6);right: calc(var(--gw-gutter-x) * 6);z-index: 1000;cursor: pointer;transition: all .3s;} #menu-btn:before {content: "";width: 6rem;height: 6rem;position: absolute;top: 50%;left: 50%;border-radius: 50%;background: var(--gw-fff);box-shadow: 0px 0px 80px rgb(39 49 108 / 20%);transform: translate(-50%,-50%);transition: all 0.3s;} #menu-btn.on:before{width: 4rem;height: 4rem;} #menu-btn.active:before{background: var(--gw-000);box-shadow:none;} #menu-btn span {display: block;width: 100%;height: 2px;background: var(--gw-000);position: absolute;transition: all 0.3s;} #menu-btn.active span{background: var(--gw-fff);} #menu-btn span:nth-child(1) {top: 0;} #menu-btn span:nth-child(2) {width: 24px;top: 10px;left: 8px;} #menu-btn span:nth-child(3) {top: 20px;} #menu-btn.active span:nth-child(2) {opacity: 0;} #menu-btn.active span:nth-child(1) {top: 10px;transform: rotate(45deg);} #menu-btn.active span:nth-child(3) {top: 10px;transform: rotate(-45deg);} #menu {width: 0;height: 100%;background: var(--gw-color02);position: fixed;top: 0;right: -100%;transition: all 0.3s;z-index: 999;overflow: hidden;} #menu::-webkit-scrollbar {width: 0;} #menu::-webkit-scrollbar-track {background: transparent;} #menu::-webkit-scrollbar-thumb {background: transparent;} #menu .scrollbar-track-x{display: none !important;} #menu .scrollbar-track-y{display: block !important;} #menu .scrollbar-thumb-y{height: 10% !important;} #menu.nav-active {width: 30vw;right:0;} #menu.on{overflow-y: auto;} #menu .member {width: calc(100% - 10rem);margin: 0 auto;padding-top: 4rem;} #menu .member > li > a {display: block;font-size: 1rem;border-radius: 0.5rem;padding: 0.5rem 0.75rem;font-family: 'NotoKr_R' !important;margin-right: 0.5rem;} #menu .member .login{background: rgba(207,233,255,.5);color: var(--gw-main-color);} #menu .member .join{color: var(--gw-000);background: #ECECEC;} #menu .menu-text {width: calc(100% - 10rem);margin: 0 auto;} #menu .menu-text > h2{font-size: var(--gw-main-title02);} #menu .menu-container {width:calc(100% - 10rem);min-height: 100%;margin:0 auto;opacity: 0;transition: all .3s;} #menu.nav-active .menu-container{opacity: 1;} #menu .menu-list > li {line-height: 1.5;padding: 1rem;display: block;background: var(--gw-fff);border-radius: 1rem;margin-bottom: 1rem;transition: all .3s;} #menu .menu-list > li.bottom-menu {background: transparent;font-size: 1rem;margin-bottom: 5rem;} #menu .bottom-menu .dot{width: 0.3rem;height: 0.3rem;border-radius: 50%;background: #ddd;display: inline-block;margin: 0 0.5rem;} #menu .menu-dep02{position:relative;display: block;font-size: 1.5rem;color: #222;transition:all 0.3s;} #menu .menu-dep02:hover{color:var(--gw-main-color);} #menu .menu-dep02.has-sub:after{font-family:xeicon;content:"\e905";display:inline-block;transition:all 0.3s; transform-origin: center;position:absolute;top: 0;right: 0;} #menu .submenu{position: relative;height:0;overflow: hidden;line-height:2;transition:all 0.3s;} #menu .submenu > li > a{position:relative;display:block;width:100%;font-size:1.15rem;font-family: 'NotoKr_M' !important;color:#333;transition:all 0.3s;} #menu .submenu > li > a:hover{color:var(--gw-main-color);} #menu .menu-dep02.on{padding-bottom: 1.25rem;margin-bottom: 1.25rem;border-bottom:1px solid #ddd;} #menu .menu-dep02.has-sub.on:after{transform: rotate(180deg);} #menu .submenu.on{overflow: visible;height:auto;} #menu .submenu .active > a {color: var(--gw-main-color);} #menu-bg{width:100vw;height:100vh;background:rgba(0,0,0,0);position: fixed;top: 0;left: 0;transition: all 0.3s ease-in;display:none;} #menu-bg.active{background:rgba(0,0,0,0.5);display:block;} /* 모바일 */ #hd_wrapper.mob{height:3.75rem;padding-top:0;border-bottom:1px solid #eee;background:#fff;} #logo.mob{top:50%;transform:translateY(-50%);} #menu-btn.mob{top:50%;transform:translateY(-50%);} #menu-btn.mob:before{display: none;} #menu-btn.mob.active{top: 1.5rem;right: 2rem;transform: translateY(0);} #menu-btn.mob.active span{background:var(--gw-000);} /*main-----------------------------------------------------------------------------------------------------------------*/ .gw-main-container{width: 100%;height:100%;max-width: 1400px;position: relative;margin:0 auto;} :where(#gw-v-lines) .gw-main-container{padding-right: var(--gw-gutter-x,1rem);padding-left: var(--gw-gutter-x,1rem);margin-right: auto;margin-left: auto;border-left: 1px solid rgba(225,229,249,0.6);border-right: 1px solid rgba(225,229,249,0.6);} /* gw-sec01 */ #gw-sec01{text-transform: uppercase;} #gw-sec01 .gw-text01{color: var(--gw-999);transform: translateX(29.6rem);} #gw-sec01 .gw-text02{color: var(--gw-666);} #gw-sec01 .gw-text03{height: 6rem;transform:translateX(39.5rem);color: var(--gw-fff);} #gw-sec01 .arrow {width: 11rem;height: 11rem;border-radius: 50%;border: 1px solid #888;position: absolute;bottom: -8rem;left: 0;} .typed-cursor{opacity: 0 !important;display:none;} .bg-typing {display:inline-block;padding:0 1rem;width:auto;background-color: #000;} /* gw-sec02 */ #gw-sec02{height:32rem;;border-radius:3rem;background-color:var(--gw-main-color);padding:0 4.375rem 0 6.5rem;} #gw-sec02 .text-container {color: var(--gw-fff);} #gw-sec02 .gw-title01 {color: var(--gw-fff);} #gw-sec02 .gw-title01:before {display: none;} #gw-sec02 .visual {width: 36rem;} #gw-sec02 .visual > img {width: 100%;} #gw-sec02 :where(.gw-btn-wrap) .btn-01{width:auto;color:var(--gw-fff);border:3px solid rgba(255,255,255,0.5);} #gw-sec02 :where(.gw-btn-wrap) .btn-01:hover{border:3px solid rgba(255,255,255,1)} /* gw-sec03 */ #gw-sec03 .row {margin: 0 calc(0.5 * var(--gw-gutter-x));} #gw-sec03 .row > div:first-child {margin-right: calc(-.5 * var(--gw-gutter-x));} #gw-sec03 .row > div:last-child {margin-left: calc(-.5 * var(--gw-gutter-x));} #gw-sec03 .gw-two-box01 .main-btn{position:relative;border: 3px solid #ddd;border-radius:100%;width: 3.75rem;height: 3.75rem;color:#ddd;} #gw-sec03 .gw-two-box01:hover .main-btn{border: 3px solid #1454FF;color:#1454FF;} /*footer-----------------------------------------------------------------------------------------------------------------*/ #gw-ft-logo {padding-bottom:1.5rem;width: 11rem;} #gw-ft-logo > a > img {width: 100%;} .gw-ft-info{padding-bottom:1.5rem;color:rgba(255,255,255,0.6);line-height:1.5;} #ft_wr .gw-right{gap:0.5rem;} #ft_wr .gw-right > a {padding:8px 12px;display:block;border-radius: 0.5rem;border: 1px solid rgba(255,255,255,0.2);color: #fff;font-size: 14px;} /*footer-----------------------------------------------------------------------------------------------------------------*/ .modal {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 40px;background: #fff;z-index: 9999;width: 600px;} .overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);z-index: 9999;} .modal-title{border-bottom:1px solid #ddd;font-size:var(--gw-main-title04);} .modal-content {padding: 24px 32px;line-height: 1.75;height: 250px;} :where(.modal) .small-btn{position: absolute;right: 1.5rem;top: 1.5rem;width: 3.5rem;height: 3.5rem;border-radius: 50%;background: #000;color: #fff;} /*반응형-----------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 1600px) { /* main */ [class*="gw-circle"]{display: none;} /* nav */ #menu.nav-active{width: 40vw;} } @media screen and (max-width: 1280px) { html, body{ font-size: 14px;} /* 콘텐츠 */ .gw-con-1280{max-width: 100%;} #logo.on > a{width: 8rem;} #menu.nav-active{width: 50vw;} #menu-btn{top:4rem;right: calc(var(--gw-gutter-x)*3);} /* main */ .gw-main-container{max-width:100%;padding:0 var(--gw-gutter-x);} /*sec01*/ #gw-sec01 .gw-text01{transform: translateX(18rem);} #gw-sec01 .gw-text03{transform:translateX(27.5rem);} } @media screen and (max-width: 1024px) { html, body {font-size: 13px;} :where(.coming) > div {animation: none;height: auto;line-height: 1.25;position: relative;} :where(.coming) > div:before {content: "";position: absolute;top: -1px;left: 0;background: #000;display: block;width: 100%;height: 2px;} :where(.gw-btn-wrap) .big-btn{font-size: 9vw;} :where(.gw-btn-wrap) .big-btn:before{width:100%;} :where(.gw-btn-wrap) .big-btn:hover:before{width:100%;} :where(.gw-btn-wrap) .btn-01:hover{border:3px solid #ddd;border-radius: 0;} #gw-cursor{display: none;} #gw-cursor>div{display: none;} #menu.nav-active{width: 100vw;} #menu-btn:before{width: 4rem;height:4rem;} #menu .member{width: calc(100% - 4rem);margin-bottom:3.5rem !important;} #menu .menu-text{width: calc(100% - 4rem);margin-bottom:3.5rem !important;} #menu .menu-container{width:calc(100vw - calc(var(--gw-gutter-x) * 4));} /*퀵메뉴*/ #gw-quick-menu{right:calc(var(--gw-gutter-x));} #gw-quick-menu > li:hover{width: 4rem;box-shadow: none;} #gw-quick-menu > li:hover span {pointer-events: none;} #gw-quick-menu > li:hover i{min-width:auto;transform:translateY(-50%);pointer-events: none;} #gw-quick-menu > li:hover img{transform:translateY(-50%);pointer-events: none;} /*sec01*/ #gw-sec01{text-align: center;} #gw-sec01 .gw-text01{transform: translateX(0);} #gw-sec01 .gw-text03{transform:translateX(0);} #gw-sec01 .arrow{width: 9rem;height: 9rem;bottom:-11rem;} /*sec02*/ #gw-sec02{padding: 0;height: auto;} #gw-sec02 .visual{width: 25rem;} #gw-sec02 .gw-main-container{padding: calc(var(--gw-gutter-x)*3) calc(var(--gw-gutter-x));flex-direction:column;text-align:center;} #gw-sec02 .gw-btn-wrap {display: inline-block;text-align: center !important;} #gw-sec02 .visual{width: 20rem;order: -1;} /*sec03*/ #gw-sec03 .gw-two-box01:hover .main-btn{border: 3px solid #ddd;color:#ddd;pointer-events: none;} /*footer*/ #ft_wr .ft_cnt{padding:2rem 0 3rem;} #ft_company .gw-ft-info{flex-direction: column;word-break:keep-all;text-align:center;} #ft_company .gw-ml05 {margin-left: 0;padding-top: 0.25rem;} #gw-ft-logo{margin:0 auto;} #ft_wr .gw-right{margin-top:1.5rem;} } @media screen and (max-width: 768px) { .gw-con-1280{padding:0 calc(1.5 * var(--gw-gutter-x));} .gw-con-640{padding:0 calc(1.5 * var(--gw-gutter-x));} [class*="box"]{margin:0;} .gw-two-box01{width: 100%;} .row{margin-top:0;margin-right:0;margin-left:0;} /*bg*/ :where(#gw-v-lines) .gw-main-container{display: none;} /*main*/ .gw-main-container{padding: 0;} /*sec01*/ #gw-sec01 .arrow{position:relative;bottom:-7vw;left:50%;transform:translateX(-50%);} /*sec03*/ #gw-sec03 .row{margin: 0;} #gw-sec03 .row > a{ display: block;margin-bottom: 1.5rem;} :where(#gw-sec03) p{word-break:keep-all;} } @media screen and (max-width: 501px) { .scrollbar-track-y{width: 4px !important;} .scrollbar-thumb{width: 4px !important;} [class*="img"]{min-height: 50vw;} [class*="box"]{padding: calc(1.5 * var(--gw-gutter-x));} :where(.gw-btn-wrap) .inquiry{top:-4vw;left:2vw;padding:0.5rem 0.75rem;} /* header */ #logo{left:var(--gw-gutter-x);} #menu-btn{right:calc(var(--gw-gutter-x)*2);} /*sec01*/ #gw-sec01 .arrow{width:20vw;height:20vw;} #gw-sec01 .arrow > img {width: 20vw;} /*sec02*/ #gw-sec02 .visual{width: 17rem;} /*sec03*/ #gw-sec03 .gw-img{filter: none;} #gw-sec03 .gw-img img{object-fit: cover;width: 120%;} #gw-sec03 .main-btn{width:2.75rem;height:2.75rem;} /* footer */ .modal{padding:calc(1.5 * var(--gw-gutter-x));width:80vw;} :where(.modal) .small-btn{right:1.75rem;top:1.25rem;width:2.5rem;height:2.5rem;} } @media screen and (max-width: 320px) { html, body{ font-size: 12px;} } /*그누위즈 테마/basic/index.php에 사용되는 gw.css------------------------------------------------------------------------------------------------------------------ */