글로벌내비게이션
+
+
@@ -62,7 +86,7 @@
LG디스커버리랩
@@ -131,7 +155,8 @@ Program
- 
+ 
@@ -209,7 +234,7 @@
@@ -221,7 +246,7 @@
diff --git a/scss/_common.scss b/scss/_common.scss
index 311fa5d..0f1425e 100644
--- a/scss/_common.scss
+++ b/scss/_common.scss
@@ -28,7 +28,18 @@ $asset-base-path: './..' !default;
}
// common variable style
-$header-footer-side-padding: 4.285rem;
+//
+:root {
+ --global-side-padding: 3.125vw;
+ --header-height: 7.857rem; // 110px
+}
+// @media () {
+// :root {
+// --global-side-padding: 3.125vw;
+// --header-height: 7.857rem;
+// }
+// }
+
$en-emphasis: 'MarkPro', sans-serif;
$timing-function1: cubic-bezier(0.4, 0, 0.2, 1);
@@ -80,20 +91,32 @@ $ico-calendar: image-path('ico-calendar.png');
}
// Media Query Rule
-@media (min-width: 91.5rem) {
-}
+// @media (max-width: 480px) {
+// }
-@media (min-width: 73.214rem) and (max-width: 91.429rem) {
-}
+// @media (min-width: 481px) and (max-width: 767px) {
+// }
-@media (min-width: 54.857rem) and (max-width: 73.143rem) {
-}
+// @media (min-width: 768px) and (max-width: 1024px) {
+// }
-@media (min-width: 34.357rem) and (max-width: 54.786rem) {
-}
+// @media (min-width: 1025px) and (max-width: 1280px) {
+// }
-@media (max-width: 34.286rem) {
-}
+// @media (min-width: 1281px) {
+// }
+
+// @media #{$screen-xs} {
+// .class-name {
+// width: 100%;
+// }
+// }
+
+$screen-xs: 'screen and (max-width: 480px)';
+$screen-sm: 'screen and (min-width: 481px) and (max-width: 767px)';
+$screen-md: 'screen and (min-width: 768px) and (max-width: 1024px)';
+$screen-lg: 'screen and (min-width: 1025px) and (max-width: 1280px)';
+$screen-xl: 'screen and (min-width: 1281px)';
// common
html,
@@ -203,3 +226,15 @@ select {
}
}
}
+
+// gnb-container
+#gnb-container {
+ display: none;
+ position: absolute;
+ top: var(--header-height);
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #fff;
+ z-index: 9999;
+}
diff --git a/scss/_footer.scss b/scss/_footer.scss
index 6232615..b713a0d 100644
--- a/scss/_footer.scss
+++ b/scss/_footer.scss
@@ -5,9 +5,9 @@
align-items: center;
padding: {
top: 4.286rem;
- right: $header-footer-side-padding;
+ right: var(--global-side-padding);
bottom: 4.286rem;
- left: $header-footer-side-padding;
+ left: var(--global-side-padding);
}
border-top: 1px solid #eee;
diff --git a/scss/_header.scss b/scss/_header.scss
index a538d03..c44aaa8 100644
--- a/scss/_header.scss
+++ b/scss/_header.scss
@@ -5,33 +5,19 @@
right: 0;
display: flex;
justify-content: space-between;
- background-color: transparent;
+ align-items: center;
+ max-width: 137.143rem; // 1920px
+ height: var(--header-height); // 110px
padding: {
- top: 3.241vh; // 2.571em
- right: $header-footer-side-padding;
- bottom: 12.5vh; // 9.714em
- left: $header-footer-side-padding;
+ right: var(--global-side-padding);
+ left: var(--global-side-padding);
}
z-index: 99;
- &-bg-white {
- background-color: #fff;
- animation: {
- name: slideInDown;
- duration: 1s;
- timing-function: $timing-function1;
- fill-mode: both;
- }
- }
-
- &.hidden {
- opacity: 0;
- visibility: hidden;
- }
-
h1 {
- width: 205px;
- height: 28px;
+ width: 240px;
+ height: 50px;
+ margin-right: auto;
background: {
image: image-path('logo-main.png');
repeat: no-repeat;
@@ -46,18 +32,80 @@
}
}
+ $gap: 2.143rem;
+ ul {
+ display: flex;
+
+ + ul {
+ margin-left: $gap;
+ }
+
+ li {
+ + li {
+ margin-left: $gap;
+ }
+ a {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ &.account {
+ li {
+ position: relative;
+ color: #000;
+
+ a {
+ color: #000;
+ }
+
+ &:not(:first-child)::before {
+ @include pseudo-before;
+ top: 50%;
+ left: calc(#{-$gap} / 2);
+ width: 0.071rem;
+ height: 0.929em;
+ background-color: #c7c7c7;
+ transform: translateY(-50%);
+ }
+ }
+ }
+
+ &.tools {
+ .ico {
+ display: block;
+ width: 30px;
+ height: 30px;
+ background: {
+ image: image-path('ico-gnb-tools.png');
+ repeat: no-repeat;
+ position: 0 0;
+ size: 100px 100px;
+ }
+ &.calendar {
+ background-position-x: 0;
+ }
+ &.search {
+ background-position-x: -50px;
+ }
+ }
+ }
+ }
+
.hamburger-menu {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: end;
- width: 36px;
- height: 27px;
+ width: 30px;
+ height: 26px;
+ margin-left: $gap;
cursor: pointer;
div {
width: 70%;
- height: 3px;
+ height: 0.143rem;
background-color: #121212;
transition: {
duration: 200ms;
@@ -93,14 +141,64 @@
}
}
+ // main
+ &.hidden {
+ opacity: 0;
+ visibility: hidden;
+ }
+
+ &-bg-white {
+ background-color: #fff;
+ animation: {
+ name: slideInDown;
+ duration: 1s;
+ timing-function: $timing-function1;
+ fill-mode: both;
+ }
+ }
+
&.page-bg-dark {
h1 {
background-image: image-path('logo-main-white.png');
}
+ ul {
+ &.account {
+ li {
+ color: #fff;
+ a {
+ color: #fff;
+ }
+ }
+ }
+ &.tools {
+ .ico {
+ background-position-y: -50px;
+ }
+ }
+ }
.hamburger-menu {
div {
background-color: #fff;
}
}
}
+
+ &.account-bar-blind {
+ ul {
+ &.account {
+ li {
+ &::before {
+ background-color: #000;
+ }
+ }
+ }
+ }
+ }
+}
+
+.intro-container {
+ .header {
+ height: 14.286rem;
+ padding-bottom: 6.429rem;
+ }
}
diff --git a/scss/_main.scss b/scss/_main.scss
index 3ccc625..55d9c1b 100644
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -303,18 +303,6 @@
cursor: image-path('cursor-drag.png'), auto !important;
}
-// cinema-cursor
-// #cursor-drag {
-// position: absolute;
-// top: 0;
-// left: 0;
-// width: 148px;
-// height: 148px;
-// display: block;
-// background: image-path('cursor-drag.png') no-repeat left top;
-// z-index: 9999;
-// }
-
/* fullpage-contents */
.fullpage {
&-wrapper {
@@ -392,8 +380,8 @@
#quick-menu {
$size: 4.643rem;
position: fixed;
- right: $header-footer-side-padding;
- bottom: $header-footer-side-padding;
+ right: var(--global-side-padding);
+ bottom: var(--global-side-padding);
display: flex;
justify-content: space-between;
align-items: center;
@@ -452,17 +440,20 @@
right: 0;
width: $size;
height: $size;
- background: {
- image: $ico-calendar;
- repeat: no-repeat;
- position: center;
+ text-align: center;
+ .btn-ico {
+ display: inline-block;
+ width: 32px;
+ height: $size;
+ background: {
+ image: image-path('ico-quick-menu.png');
+ repeat: no-repeat;
+ position: 0 50%;
+ size: 64px 32px;
+ }
}
cursor: pointer;
z-index: 9;
-
- span {
- display: none;
- }
}
&.active {
@@ -481,8 +472,8 @@
}
}
- .btn {
- background-image: image-path('ico-close.png');
+ .btn-ico {
+ background-position-x: -32px;
}
}
}
diff --git a/scss/_reset.scss b/scss/_reset.scss
index 6400948..6b7a98b 100644
--- a/scss/_reset.scss
+++ b/scss/_reset.scss
@@ -151,7 +151,6 @@ button {
-moz-appearance: none;
-ms-appearance: none;
}
-
legend,
caption,
.skip,
@@ -162,13 +161,11 @@ caption,
line-height: 0;
overflow: hidden;
}
-
html,
body {
overflow-x: hidden;
-webkit-text-size-adjust: none;
}
-
html {
word-wrap: break-word;
}
+
청소년이 이해하고 자신의 가능성을 발견하는
한 차원 다른 세상을 미리 경험할
@@ -197,7 +222,7 @@
Program
Program
Program