html { scroll-behavior: smooth; } #header {width:100%; padding:15px 0; background-color:#fff; position:fixed; left:0; bottom:0; z-index:999999;} #header.active {top:0; bottom:auto;} .sub #header {top:0; bottom:auto;} #header ul li:not(:last-child) {padding-right:150px;} #header ul li {position:relative;} #header ul li a {font-size:18px; font-weight:400; color:#000000; opacity:0.8;} #header .inner >ul >li >a.on { opacity:1;} #header .inner >ul >li:nth-child(3) {margin:0 10px;} #header .inner >ul >li:nth-child(3) a {opacity:1;} #header .moLayout {display:none;} #header ul li a {position:relative; z-index:3;} #header .inner >ul >li >a::after {content:''; display:none; width:100%; height:3px; background:var(--color01); position:absolute; top:-28px; left:50%; transform:translateX(-50%);} #header .inner >ul >li >a.on::after {display:block;} #header .inner >ul >li:nth-child(3) >a::after {display:none !important;} #header ul li .depth {display:flex; position:absolute; top:-225px; width:100%; height:0px; z-index:2; flex-direction:column-reverse;} #header ul li .depth.on {height:auto; padding:45px 0;} #header ul li .depth li {opacity:0; height:0;} #header ul li .depth.on li { opacity:1; height:auto; transition-delay:0.3s;} #header ul li .depth.on a:hover {color:var(--color01); } #header ul li .depth li {padding-right:0; margin-bottom:20px; } #header ul li .depth li a {opacity:0.8; font-weight:300;} #header ul li .depth li:nth-child(1) {margin-bottom:0;} #header .bg {display:none; width:100%; height:200px; background-color:#fff; position:absolute; bottom:80px; left:0; border-bottom:1px solid rgba(0,0,0,0.1); box-sizing:border-box;} #header.active, .sub #header {border-bottom:1px solid rgba(0,0,0,0.1); box-sizing:border-box;} #header.active .bg, .sub #header .bg{bottom:auto; top:81px; box-shadow:1px 8px 20px rgba(0, 0, 0, 0.1);} #header.active .inner >ul >li >a::after, .sub #header .inner >ul >li >a::after{top:auto; bottom:-29px;} #header.active ul li .depth.on, .sub #header ul li .depth.on {display:block; height:auto; top:45px;} #header.active ul li .depth li:nth-child(1), .sub #header ul li .depth li:nth-child(1){margin-bottom:20px; } #header.active ul li .depth li:last-child, .sub #header ul li .depth li:last-child {margin-bottom:0;} /* start : 전체메뉴 */ body.no-scroll {overflow:hidden;} body.no-scroll #header {z-index:2;} #gnb {position:fixed; top:0; right:0; z-index:999999;} #gnb.on {width:100%; height:100vh;} #gnb.on .bg {display:block;} #gnb.on .gnb_wrap {display:block; transform:translateX(0%); transition:all 0.6s; opacity:1;} #gnb .bg {position:fixed !important; top:0 !important; left:0 !important; z-index:1; width:100%; height:100%; background-color:rgba(0,0,0,0.7); display:none;} #gnb .gnbTopBox {align-items:center;} #gnb #logoBox {align-items:center;} #gnb #logoBox a img {width:30px;} #gnb #gnb_close {background-color:transparent; font-size:26px; position:absolute; right:30px; top:32px;} #gnb #gnb_close i {color:#000;} #gnb .gnb_wrap {width:500px; height:calc(100% - 70px); padding:35px 30px; background-color:#fff; position:fixed; top:0; right:0; z-index:9; transform:translateX(100%); overflow-y:scroll; opacity:0;} #gnb .gnb_wrap::-webkit-scrollbar { width:1px; -webkit-transition: all 300ms; transition: all 300ms;} #gnb .gnb_wrap::-webkit-scrollbar-track { width:10px; /* 스크롤바의 너비 */ background-color:#ddd; } #gnb .gnb_wrap::-webkit-scrollbar-thumb {height:5%; /* 스크롤바의 길이 */ background:#fff; /* 스크롤바의 색상 */ background-clip: padding-box; border:2px solid transparent; border-radius: 8px; } #gnb .gnb_left, #gnb .gnbTopBox {display:none; } #gnb.on .gnb_left {display:block;} #gnb.on .gnbTopBox {display:flex;} #gnb .gnb_left{ width:100%; margin: 0 auto; margin-top:50px; text-align:left; } #gnb .gnb_left > li > a { display:block; font-family:var(--NotoSans); font-size:18px; font-weight:400; color:#000; padding:20px 0; border-bottom:1px solid #e6e6e6; box-sizing:border-box;} #gnb .gnb_left > li > a:hover {color:var(--color01);} #gnb .gnb_left > li > a:hover span {color:var(--color01);} #gnb .gnb_left > li > a.on {color:var(--color01); font-weight:600; border-bottom:1px solid var(--color01);} #gnb .gnb_left > li > a > span { display:block; width:25px; float:right; text-align:center;} #gnb .gnb_left > li > a > span::after {content: "\e942"; font-family: 'xeicon' !important; font-size:20px;} #gnb .gnb_left > li > a > span.on::after {content:"\e945"; font-weight:400;} #gnb .gnb_sub li a {font-family:var(--NotoSans); font-size:16px; font-weight:400; color:#333; padding:10px 0; display:block;} #gnb .gnb_sub li a:hover {color:var(--color01); } #gnb .gnb_left > li:nth-child(1) > a {padding-top:0;} #gnb .gnb_left ul { display:none; margin:15px 0;} #gnb .gnb_left ul.on {display:block;} #gnb .sidemenuMo {margin-top:30px; align-items:center;} #gnb .sidemenuMo li {margin-right:15px;} #gnb .sidemenuMo li a:hover i {color:var(--color01); opacity:1;} #gnb .sidemenuMo li a i {font-size:30px; color:#333; opacity:0.3;} #gnb .sidemenuMo li:nth-child(2) a i {position:relative; top:0.5px; font-size:31px;} #gnb .globalLink {margin-top:40px;} #gnb .globalLink li {margin-right:15px;} #gnb .globalLink li.active a {font-weight:600; color:var(--color01); border-bottom:1px solid var(--color01); box-sizing:border-box;} #gnb .globalLink li a {display:block; font-size:16px; font-weight:400; color:#919191; line-height:1.2;} #gnb .globalLink li:hover a {color:var(--color01);} /* end : 전체메뉴 */ #quickMenu.on {display:none;} #quickMenuClose, .btnWrap02 {display:none;} #quickMenu .quickLeft {display:block;} #quickMenu { position: fixed; right:-466px; top:50%; transform:translateY(-50%); z-index:99999; transition: all .5s; } #quickMenu.active {right:0;} #quickMenu .quickLeft {position:absolute; top:50%; transform:translateY(-50%); left:-80px; } #quickMenu .btnWrap01 {z-index:9; background-color:#34302c; padding:30px 17px; height:300px; display: flex; flex-direction: column; justify-content: space-between;} #quickMenu .btnWrap01 {} #quickMenu .btnWrap01 .quick-menu-title {position:relative; height:75px; margin-top:-10px;} #quickMenu .btnWrap01 .quick-menu-title p{font-size:24px; font-weight:500; color:#fff; transform: rotate(-90deg); line-height: 1; } #quickMenu .contactForm {width:400px; background-color:#fff; padding:40px 33px; position:relative;} #quickMenu .quick-menu-btn {background-color:transparent; width:46px; height:46px; border:1px solid #ffffff; box-sizing:border-box; position:relative; } #quickMenu .quick-menu-btn span {display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);} #quickMenu .quick-menu-btn span:nth-child(1) {width:1px; height:17px; background-color:#fff;} #quickMenu .quick-menu-btn span:nth-child(2) {width:17px; height:1px; background-color:#fff;} #quickMenu.active .quick-menu-btn span:nth-child(1) {display:none;} #quickMenu .quickMenu .btnWrap01:hover .quick-menu-btn {background-color:var(--color01); border:1px solid transparent;} #quickMenu .contactForm li:not(:last-child) {margin-bottom:13px;} #quickMenu .contactForm .formStyle {display:flex; flex-direction:row; align-items:center;} #quickMenu .contactForm .title {display:flex; flex-direction:row; align-items:flex-start; } #quickMenu .contactForm label {font-size:18px; font-weight:500; color:#251c15; } #quickMenu .contactForm .star {font-size:18px; font-weight:500; color:#465000; padding-left:0.5px;} #quickMenu .contactForm input {width:calc(100% - 20px); padding:0 10px; height:30px; } #quickMenu .contactForm textarea {border:none; width:100%; height:150px; } #quickMenu .contactForm input, #quickMenu .contactForm textarea {font-size:16px; font-weight:300; color:#000; opacity:0.8; background-color:#f5f5f5; border-radius:4px; overflow:hidden;} #quickMenu .contactForm input:focus, #quickMenu .contactForm textarea:focus {opacity:1; font-weight:500;} #quickMenu .contactForm ul:nth-child(1) {margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid rgba(0,0,0,0.1); position:relative;} #quickMenu .submitBtn {width:100%; height:50px; border-radius:4px; background-color:#465000; font-size:24px; font-weight:300; color:#fff;} #quickMenu .submitBtn:hover {background-color:#000;} #quickMenu .contactForm .formStyle01 {justify-content:space-between; width:100%;} #quickMenu .contactForm .formStyle01 input {width:calc(100% - 85px);} #quickMenu .contactForm .formStyle02 {display:block; margin-bottom:15px;} #quickMenu .contactForm .formStyle02 .title {margin-bottom:10px;} .main #topScroll {display:none;} #topScroll {position:absolute; bottom:-80px; width:80px; height:80px; line-height:80px; text-align:center; background-color:var(--color01); color:#fff; font-size:18px;} #topScroll:hover {background-color:#000;} #topScroll2 {display:none; position:fixed; bottom:20px; right:20px; border-radius:50%; width:50px; height:50px; background-color:var(--color01); z-index:99; font-size:16px; color:#fff;} #topScroll2 {} #footer {width:100%; background-color:#34302c;s} #footer .inner {width:1620px; margin:0 auto; padding:77px 0 70px 0; } #footer .topBox {width:100%; border-bottom:1px solid rgba(255,255,255,0.1);} #footer .topBox li {width:25%; text-align:center;} #footer .topBox li:not(last-child) {border-right:1px solid rgba(255,255,255,0.1);} #footer .topBox li.active a {opacity:1;} #footer .topBox li:hover {background-color:var(--color01);} #footer .topBox li:hover a {opacity:1;} #footer .topBox li a {display:block; font-size:20px; font-weight:300; color:#fff; opacity:0.8; padding:20px 0; } #footer .text {font-size:40px; font-weight:500; color:#fff; line-height:1.3; margin-bottom:85px; display:block;} #footer .text:hover {color:#ccc;} #footer .text i {margin-top:1vh;} #footer .info ul li {padding-right:40px;} #footer .info {align-items: flex-end;} #footer .info ul li dt {font-size:16px; font-weight:500; color:#fff; opacity:0.8; padding-bottom:10px;} #footer .info ul li dd, #footer .info ul li dd a {display:block; font-size:16px; font-weight:300; color:#fff; opacity:0.5; border-bottom:0;} #footer .info ul li dd a {opacity:1;} #footer .copyright {padding-top:20px; font-size:14px; font-weight:300; color:#fff; opacity:0.2;} #footer .info img {width:247px;} @media screen and (max-width:1680px){ #footer .inner {width:1300px; padding:75px 0 70px 0;} #footer .info ul li {padding-right:30px;} #footer .info img {width:220px;} } @media screen and (max-width:1520px){ #footer .inner {width:1200px;} #footer .info ul li {padding-right:25px;} #footer .info img {width:180px;} #header ul li:not(:last-child) {padding-right:130px;} #footer .info img {width:155px;} #quickMenu .quickLeft {left:-65px;} #quickMenu .btnWrap01 {padding:30px 15px;} #quickMenu .btnWrap01 .quick-menu-title p {font-size:21px;} #quickMenu .quick-menu-btn {width:35px; height:35px;} #topScroll {width:65px; height:65px; line-height:65px; bottom:-65px;} } @media screen and (max-width:1380px){ #quickMenu {width:100%; height:100vh; top:0; right:-100%; transform: translateY(0); position:fixed; top:0; z-index: 9999999999999999999999; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color:#fff;} #quickMenu.active {right:0;} #quickMenu form {width:100%; height:100%;} #quickMenu .contactForm { padding:50px 0 30px 0; width:calc(100% - 40px); height:calc(100vh - 80px); } .contactFormScroll {width:100%; height:calc(100% - 50px); overflow-y:scroll;} #quickMenu .quickLeft {display:none;} #quickMenuClose {display:block; position:absolute; right:20px; top:10px; z-index:9; background-color:transparent; font-size:22px; color:#333;} .btnWrap02.on {display:none;} .btnWrap02 {display:flex; flex-direction:row; align-items:center; justify-content:center; position:fixed; right:80px; bottom:20px; z-index:9999; width:130px; height:50px; border-radius:40px; background-color:#56514d; font-size:18px; font-weight:400; color:#fff;} .btnWrap02 img {width:20px; margin-right:2px; margin-top:-2px;} #quickMenu .submitBtn {font-size:18px;} #quickMenuClose {} #footer .info ul li:nth-child(3) {display:none;} #topScroll {display:none;} #topScroll2 {display:block;} } @media screen and (max-width:1280px){ #header ul li:not(:last-child) {padding-right:100px;} #footer .inner {width:calc(100% - 40px); padding:85px 20px 70px 20px;} #footer .info img {display:none;} #footer .topBox li a {font-size:18px;} #footer .text {font-size:31px;} } @media screen and (max-width:1080px){ #footer .text {font-size:30px;} #footer .topBox li a {font-size:16px;} } @media screen and (max-width:980px){ #header {top:0; bottom:auto;} #header.on {top:0; bottom:auto; position:fixed; border-bottom:1px solid rgba(0,0,0,0.1);} #header .inner {display:none;} #header .moLayout {display:block; display: flex; flex-direction: row; justify-content: space-between; width:calc(100% - 80px); padding:0 40px;} #header .inner .moLayout { } #header .allBtn {position:relative; background: transparent; display:flex; flex-direction: column; justify-content: center; align-items: flex-end;} #header .allBtn span {display:block; height:1.8px; background-color:#000;} #header .allBtn span:nth-child(1) {width:35px;} #header .allBtn span:nth-child(2) {width:15px; margin:9px 0;} #header .allBtn span:nth-child(3) {width:21px;} #header .logo img {width:25px;} #header .moLayout { width: calc(100% - 40px); padding: 0 20px;} } @media screen and (max-width:720px){ #gnb .gnb_wrap {width:calc(100% - 40px); padding:35px 20px;} #gnb .gnb_left > li > a {font-size:16px;} #gnb #logoBox a img {width:25px;} #gnb .gnb_left { margin-top:35px;} #footer .inner {padding:65px 20px 50px 20px;} #footer .info ul {flex-wrap:wrap;} #footer .info ul li {padding-bottom:10px;} #footer .info ul li:nth-child(1) {order:1;} #footer .info ul li:nth-child(2) {order:3; width:100%;} #footer .info ul li:nth-child(3) {order:2;} #footer .info ul li:nth-child(4) {order:2;} #footer .info ul li:nth-child(5) {order:4; width:100%;} #footer .info ul li dl {display:flex; flex-direction:row; align-items:flex-start;} #footer .info ul li dl dt {padding-right:10px; padding-bottom:0;} #footer .text {margin-bottom:70px; font-size:21px;} #footer .topBox li {width:50%;} #footer .topBox li:nth-child(2), #footer .topBox li:nth-child(3) {display:none;} } @media screen and (max-width:480px){ #header {padding:12px 0;} .btnWrap02 {font-size:16px; width:120px; height:45px; right:75px;} .btnWrap02 img {width:18px;} #topScroll2 {width:45px; height:45px;} } @media screen and (max-width:340px){ #footer .text {font-size:19px; margin-bottom:50px;} }