524 lines
11 KiB
CSS
524 lines
11 KiB
CSS
* {
|
|
padding:0;
|
|
margin:0;
|
|
list-style:none;
|
|
text-decoration:none;
|
|
}
|
|
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
|
|
|
|
.pg_wrap {
|
|
padding-top:20px;
|
|
position:relative;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
|
|
body {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
.blind {
|
|
display:none;
|
|
}
|
|
.main {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#header {
|
|
width:100%;
|
|
position:absolute;
|
|
top:0px;
|
|
z-index:999999999999999999999999999999999;
|
|
}
|
|
#header.on {
|
|
background-color:#333;
|
|
transition-duration:0.6s;
|
|
}
|
|
|
|
#header > .inner {
|
|
width:80%;
|
|
position:relative;
|
|
margin:0 auto;
|
|
}
|
|
#header .logo,
|
|
#header #nav,
|
|
#header #info {
|
|
height:70px;
|
|
line-height:70px;
|
|
}
|
|
#header .logo {
|
|
position:absolute;
|
|
left:0;
|
|
z-index:999999999;
|
|
}
|
|
#header .logo img {
|
|
height: 100%;
|
|
max-height: 50px;
|
|
}
|
|
#header #nav {
|
|
position:absolute;
|
|
top:0;
|
|
left:50%;
|
|
transform:translateX(-50%);
|
|
}
|
|
#header #nav .menu_ul {
|
|
display:flex;
|
|
/* width:720px; */
|
|
position:absolute;
|
|
left:50%;
|
|
transform:translateX(-50%);
|
|
}
|
|
#header #nav .menu_li {
|
|
width:140px;
|
|
/* padding:0 40px; */
|
|
flex-direction:column;
|
|
text-align:center;
|
|
position:relative;
|
|
}
|
|
#header #nav .menu_tit {
|
|
flex-direction:column;
|
|
font-size:17px;
|
|
font-weight:bold;
|
|
position:relative;
|
|
letter-spacing:-0.6px;
|
|
color:#fff !important;
|
|
}
|
|
|
|
#header #nav .menu_tit.on {
|
|
color:#f6f6f6;
|
|
}
|
|
|
|
#header #nav .menu_li:hover {
|
|
color:#f6f6f6;
|
|
}
|
|
#header #nav .gnb_box {
|
|
display:none;
|
|
position:absolute;
|
|
top:65px;
|
|
left:0;
|
|
width:100%;
|
|
margin-left:0;
|
|
padding:20px 60px 60px 20px;
|
|
background-color:rgba(0, 0, 0, 0.8);
|
|
border-radius:10px;
|
|
|
|
}
|
|
|
|
#header #nav .gnb_box.on {
|
|
display:block;
|
|
}
|
|
#header #nav .gnb_ul {
|
|
|
|
}
|
|
#header #nav .gnb_li {
|
|
flex-direction:column;
|
|
width:120px;
|
|
height:35px;
|
|
line-height:35px;
|
|
float:left;
|
|
text-align:left;
|
|
}
|
|
/* #header #nav .gnb_a::after {
|
|
content: "\f105";
|
|
position:absolute;
|
|
top:0;
|
|
right:-30px;
|
|
font-family:FontAwesome;
|
|
font-size:18px;
|
|
color:#fff;
|
|
transition-duration:0.6s;
|
|
opacity:0;
|
|
} */
|
|
#header #nav .gnb_a:hover::after {
|
|
right:-40px;
|
|
opacity:1;
|
|
}
|
|
#header #nav .gnb_a {
|
|
position:relative;
|
|
width:100%;
|
|
display:block;
|
|
font-size:16px;
|
|
color:#fff;
|
|
z-index:9999999;
|
|
transition-duration:0.2s;
|
|
}
|
|
#header #nav .gnb_a:hover {
|
|
padding-left:10px;
|
|
color:#f6f6f6;
|
|
}
|
|
/* #header #nav .gnb_li .gnb_a::before {
|
|
content:'';
|
|
width:0;
|
|
height:1px;
|
|
position:absolute;
|
|
left:0;
|
|
bottom:0;
|
|
background-color:#fff;
|
|
transition-duration:0.2s;
|
|
} */
|
|
#header #nav .gnb_li:hover .gnb_a:before {
|
|
width:100%;
|
|
}
|
|
#header #nav .gnb_li:hover .gnb_a::after {
|
|
right:-10px;
|
|
opacity:0.6;
|
|
}
|
|
#header #info {
|
|
position:absolute;
|
|
top:0;
|
|
right:0;
|
|
display:flex;
|
|
}
|
|
#header #info .userBox {
|
|
margin-right:30px;
|
|
}
|
|
#header #info .userBox ul {
|
|
display:table;
|
|
}
|
|
#header #info .userBox ul li {
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
padding-right:14px;
|
|
}
|
|
#header #info .userBox ul li a {
|
|
font-size:14px;
|
|
font-weight:400;
|
|
color:#fff;
|
|
}
|
|
#header #info .member {
|
|
display:table;
|
|
}
|
|
#header #info .member li {
|
|
display:table-cell;
|
|
padding-right:5px;
|
|
}
|
|
#header #info .member li::after {
|
|
content:'';
|
|
padding-left:5px;
|
|
border-right:1px solid #ccc;
|
|
}
|
|
#header #info .member li:last-child:after {
|
|
border-right:none;
|
|
}
|
|
#header #info .member li a{
|
|
font-size:1em;
|
|
font-weight:400;
|
|
}
|
|
#header #info .member li:last-child {
|
|
padding-right:0;
|
|
}
|
|
|
|
/* s:햄버거버튼 */
|
|
/* hambergur button */
|
|
.hamburger {
|
|
padding:18px 0;
|
|
cursor: pointer;
|
|
display:block;
|
|
overflow: hidden;
|
|
background-color: transparent;
|
|
position:relative;
|
|
top:8px;
|
|
right:10%;
|
|
z-index:99999;
|
|
}
|
|
|
|
.hamburger__container {
|
|
width:30px;
|
|
height:18px;
|
|
position: relative;
|
|
}
|
|
.hamburger.is-active .hamburger__inner {
|
|
transform: translate(-51px,50%);
|
|
}
|
|
.hamburger.is-active .hamburger__inner::before,
|
|
.hamburger.is-active .hamburger__inner::after {
|
|
transform: translate(102px, 0);
|
|
opacity: 0;
|
|
}
|
|
|
|
.hamburger__inner {
|
|
width: 100%;
|
|
height: 2px;
|
|
/* border-color */
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
transition-property: transform, opacity;
|
|
transition-timing-function: ease;
|
|
transition-duration: 0.4s;
|
|
top: 50%;
|
|
transform: translate(5px, -50%);
|
|
opacity: 1;
|
|
}
|
|
|
|
.hamburger__inner::before, .hamburger__inner::after {
|
|
width: 100%;
|
|
height: 2px;
|
|
/* border-color */
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
transition-property: transform, opacity;
|
|
transition-timing-function: ease;
|
|
transition-duration: 0.4s;
|
|
content: "";
|
|
opacity: 1;
|
|
transform: translate(-5px, 0);
|
|
}
|
|
|
|
.hamburger__inner::before {
|
|
top: -8px;
|
|
}
|
|
|
|
.hamburger__inner::after {
|
|
top: 8px;
|
|
}
|
|
|
|
|
|
.hamburger:hover .hamburger__hidden {
|
|
transform: translate(0, -50%);
|
|
background-color:#fff;
|
|
}
|
|
|
|
.hamburger:hover .hamburger__hidden::before,
|
|
.hamburger:hover .hamburger__hidden::after {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
background-color:#fff;
|
|
}
|
|
.hamburger__hidden{
|
|
opacity: 0;
|
|
}
|
|
.hamburger.is-active .hamburger__hidden {
|
|
opacity: 1;
|
|
transform: rotate(45deg);
|
|
background-color:#fff;
|
|
}
|
|
|
|
.hamburger.is-active .hamburger__hidden::before {
|
|
transform: translate(0, 13px) rotate(90deg);
|
|
transform-origin: center;
|
|
background-color:#fff;
|
|
}
|
|
|
|
.hamburger.is-active .hamburger__hidden::after {
|
|
transform-origin: center;
|
|
transform: translate(0, -13px) rotate(0);
|
|
background-color:#fff;
|
|
}
|
|
|
|
.hamburger__hidden {
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
transition-property: transform, opacity;
|
|
transition-timing-function: ease;
|
|
transition-duration: 0.4s;
|
|
top: 50%;
|
|
transform: translate(51px, -50%);
|
|
}
|
|
|
|
.hamburger__hidden::before, .hamburger__hidden::after {
|
|
width: 100%;
|
|
height: 2px;
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
transition-property: transform, opacity;
|
|
transition-timing-function: ease;
|
|
transition-duration: 0.4s;
|
|
content: "";
|
|
transform: translate(102px, 0);
|
|
}
|
|
|
|
.hamburger__hidden::before {
|
|
top: -13px;
|
|
}
|
|
|
|
.hamburger__hidden::after {
|
|
top: 13px;
|
|
}
|
|
|
|
|
|
/* e:햄버거버튼 */
|
|
|
|
/* s:all_menu */
|
|
#header #all_menu {
|
|
width:100%;
|
|
height:100vh;
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
background-color:#333;
|
|
z-index:999;
|
|
display:none;
|
|
}
|
|
#header #all_menu.on {
|
|
display:block;
|
|
}
|
|
#header #all_menu .menu_ul {
|
|
width:18%;
|
|
position:absolute;
|
|
top:50%;
|
|
left:50%;
|
|
transform:translate(-50%,-50%);
|
|
text-align:center;
|
|
vertical-align:middle;
|
|
|
|
}
|
|
#header #all_menu .menu_li {
|
|
width:100%;
|
|
}
|
|
|
|
#header #all_menu .menu_tit{
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
display: block;
|
|
width: 100%;
|
|
padding: 1px;
|
|
position: relative;
|
|
z-index: 2;
|
|
text-decoration: none;
|
|
color: #969696;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
font-size: 5em;
|
|
font-weight: 600;
|
|
-webkit-user-select: none;
|
|
-webkit-touch-callout: none;
|
|
text-align:center;
|
|
|
|
}
|
|
#header #all_menu .menu_tit:hover {
|
|
color:#fff;
|
|
}
|
|
/* text_hover effect */
|
|
|
|
#header #all_menu .menu_tit:hover:after,
|
|
#header #all_menu .menu_tit:focus:after{
|
|
width: 100%;
|
|
background-color: #fff;
|
|
}
|
|
#header #all_menu .menu_tit:hover {
|
|
color: #fff;
|
|
-webkit-transition: color 1s ease;
|
|
-moz-transition: color 1s ease;
|
|
-ms-transition: color 1s ease;
|
|
-o-transition: color 1s ease;
|
|
transition: color 1s ease;
|
|
cursor: pointer;
|
|
}
|
|
#header #all_menu .all_box {
|
|
display:none;
|
|
}
|
|
#header #all_menu .all_box.on {
|
|
display:block;
|
|
transition-duration:0.6s;
|
|
}
|
|
#header #all_menu .all_tit {
|
|
font-size:18px;
|
|
font-weight:400;
|
|
color: #fff;
|
|
padding:10px 0;
|
|
display: block;
|
|
}
|
|
#header #all_menu .all_tit:hover {
|
|
padding-left:20px;
|
|
transition-duration:0.6s;
|
|
font-weight:bold;
|
|
color:#0c56b1;
|
|
}
|
|
|
|
|
|
/* e:all_menu */
|
|
|
|
|
|
@media screen and (max-width:1240px){
|
|
#header {
|
|
background-color:rgba(255,255,255,0.5);
|
|
}
|
|
#header > .inner {
|
|
width:100%;
|
|
}
|
|
#nav {
|
|
display:none;
|
|
}
|
|
#header .logo {
|
|
width:200px;
|
|
display:flex;
|
|
justify-content: center;
|
|
/*margin:0 auto;*/
|
|
position:absolute;
|
|
top:8px;
|
|
left:50%;
|
|
transform:translateX(-50%);
|
|
z-index:9999999999;
|
|
}
|
|
#header #info {
|
|
top:0px;
|
|
right:20px;
|
|
position:absolute;
|
|
}
|
|
#header #info .member {
|
|
display:none;
|
|
}
|
|
#header .logo, #header #nav, #header #info {
|
|
height:45px;
|
|
line-height:45px;
|
|
}
|
|
.hamburger {
|
|
padding:5px 0;
|
|
}
|
|
#header #all_menu {
|
|
background-color:#333;
|
|
}
|
|
.hamburger.is-active .hamburger__hidden::before {
|
|
background-color:#fff;
|
|
}
|
|
.hamburger.is-active .hamburger__hidden::after {
|
|
background-color:#fff;
|
|
}
|
|
#header .member.on {
|
|
display:block;
|
|
position:fixed;
|
|
}
|
|
#header #all_menu .menu_ul {
|
|
width:50%;
|
|
}
|
|
#header #all_menu .menu_tit {
|
|
font-size:2rem;
|
|
}
|
|
#header #all_menu .all_tit {
|
|
color:#f6f6f6;
|
|
}
|
|
#header #all_menu .menu_tit:hover {
|
|
color:#f6f6f6;
|
|
}
|
|
/* #header #all_menu .menu_tit::before{
|
|
content: "\f067";
|
|
position:absolute;
|
|
top:50%;
|
|
right:0;
|
|
transform:translateY(-50%);
|
|
font-family:FontAwesome;
|
|
font-size:10px;
|
|
width:20px;
|
|
height:20px;
|
|
line-height:20px;
|
|
border-radius:50%;
|
|
background-color:#ececec;
|
|
box-shadow:2px 2px 4px rgba(0, 0, 0, 0.1);
|
|
color:#898989;
|
|
} */
|
|
#header #all_menu .menu_li.on .menu_tit::before {
|
|
content: "\f068";
|
|
}
|
|
#header #info .userBox {
|
|
display:none;
|
|
}
|
|
} |