/* 바디 */ body.fixed {overflow-y:hidden} /* 전체 감싸기 */ #wrapper {min-width:1200px; overflow:hidden;width:100%;} /* 컨테이너 */ body.scrollfix #container {margin-top:61px} .move {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s} /* 헤더 */ .mask-lnb {position:fixed; width:100%; height:0; background:#000; opacity:0; z-index:998; transition:all 0.3s ease} #lnb {position:fixed; top:0; left:0px; width:100px; height:100%; /*box-shadow:1px 0 7px rgba(0,0,0,0.09);background:#fff;*/ z-index:1000; overflow:hidden;} #lnb.opened {width:500px;background:#fff;} #lnb > .menu_inner {position:fixed; height:auto; padding-bottom:60px;overflow-y:auto;height:100%;z-index:1000;width:100px;transition: all 0.3s} #lnb > .menu_inner:hover {background:#fff;box-shadow:1px 0 7px rgba(0,0,0,0.09);} #lnb > .menu_inner .nav-bottom {position:absolute;width:100%;text-align:center;bottom:20px;} #lnb > .menu_inner .nav-bottom li {margin-bottom:10px;} #lnb > .menu_inner .nav-bottom li i {font-size:28px;color:#000;transition: all 0.3s} #lnb #logo {padding-top:40px; overflow:hidden;text-align:center;} #lnb #logo-dark {display:none} #lnb #logo > a img {display:inline-block; width:auto} #lnb ul#nav {opacity:0; -webkit-transform: translateX(-30%); -moz-transform: translateX(-30%); -o-transform: translateX(-30%); -ms-transform: translateX(-30%); transform: translateX(-30%); -webkit-transition-duration: .5s; transition-duration: .5s;} #lnb ul#nav.opened {opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);} #lnb ul#nav {width:400px;position:absolute;top:0px;left:100px;z-index:999;background:#fff;height:100%;padding-top:64px;border:0px;overflow-y:auto;-ms-overflow-style: none;} /* 메뉴효과제거시 삭제 */ #lnb ul#nav > li {opacity: 0; -webkit-transform: translateX(-40px); -moz-transform: translateX(-40px); -o-transform: translateX(-40px); -ms-transform: translateX(-40px); transform: translateX(-40px); -webkit-transition-duration: .3s; transition-duration: .3s;} #lnb ul#nav.opened > li {opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);} #lnb ul#nav > li:nth-child(1) {-webkit-transition-delay: .1s;transition-delay: .1s;} #lnb ul#nav > li:nth-child(2) {-webkit-transition-delay: .15s;transition-delay: .15s;} #lnb ul#nav > li:nth-child(3) {-webkit-transition-delay: .2s;transition-delay: .2s;} #lnb ul#nav > li:nth-child(4) {-webkit-transition-delay: .25s;transition-delay: .25s;} #lnb ul#nav > li:nth-child(5) {-webkit-transition-delay: .3s;transition-delay: .3s;} #lnb ul#nav > li:nth-child(6) {-webkit-transition-delay: .35s;transition-delay: .35s;} #lnb ul#nav > li:nth-child(7) {-webkit-transition-delay: .4s;transition-delay: .4s;} #lnb ul#nav > li:nth-child(8) {-webkit-transition-delay: .45s;transition-delay: .45s;} #lnb ul#nav > li:nth-child(9) {-webkit-transition-delay: .5s;transition-delay: .5s;} #lnb ul#nav > li:nth-child(10) {-webkit-transition-delay: .55s;transition-delay: .55s;} /* 메뉴효과제거시 삭제 */ #lnb ul#nav > li > a {position:relative; display:block; width:100%; height:50px; padding:0 100px; font-size:20px;line-height:60px;color:#666; letter-spacing:-1px; } #lnb ul#nav > li > a > i {position:absolute; top:50%; right:100px; margin-top:-8px; color:#bca58b; transition:all 0.3s ease} #lnb ul#nav > li.open > a > i {transform:rotate(180deg);} #lnb ul#nav > li > ul {display:none; padding:10px 0;} #lnb ul#nav > li > ul > li {height:36px; padding:8px 110px} #lnb ul#nav > li > ul > li > a {font-size:16px;transition:all 0.3s ease;display:block;} #lnb ul#nav > li > ul > li > a.on {color:#b09a6c;} #lnb .nav-item {padding-left:100px;margin-top:50px;} #lnb .nav-item .memLink a {font-size:16px;margin-bottom:5px;display:inline-block;} #lnb .nav-item .snsLink {margin-top:30px;} #lnb .nav-item .snsLink > li {font-size:0} #lnb .nav-item .snsLink > li a {display:inline-block; font-size:25px; color:#b1b1b0; margin-right:10px; transition:all 0.3s ease} #lnb .nav-item .snsLink > li a:hover {color:#000} /* 모바일메뉴버튼 */ #gnbTrigger {display:; position:absolute; top:50%;margin-top:-33px; left:17px; width:66px; height:65px; border:none; background:none; cursor:pointer; outline:none; z-index:1100;transition:all .3s ease-in-out;} #gnbTrigger > span {display:block; position:absolute; left:50%; width:26px; height:3px; margin-left:-13px; background:#000; transition:all .3s ease-in-out; transform:rotate(0deg); opacity:1} #gnbTrigger > .bar1 {top:22px} #gnbTrigger > .bar2 {top:30px;} #gnbTrigger > .bar3 {top:38px} #gnbTrigger.open {background:#fff} #gnbTrigger.open > span {background:#000} #gnbTrigger.open > .bar1 {top:30px; transform:rotate(135deg)} #gnbTrigger.open > .bar2 {opacity:0; left:-30px} #gnbTrigger.open > .bar3 {top:30px; transform:rotate(-135deg)} /* 모바일메뉴버튼 */ #gnbTrigger_right {display:none; position:fixed; top:0px; right:0px; width:66px; height:65px; border:none; background:#fff; cursor:pointer; outline:none; z-index:1100;transition:all .3s ease-in-out;} #gnbTrigger_right > span {display:block; position:absolute;top:18px; left:50%; width:3px; height:26px;background:#000; transition:all .3s ease-in-out; transform:rotate(0deg); opacity:1} #gnbTrigger_right > .bar1 {margin-left:-10px} #gnbTrigger_right > .bar2 {margin-left:-2px;} #gnbTrigger_right > .bar3 {margin-left:6px} #gnbTrigger_right.open {background:#000} #gnbTrigger_right.open > span {background:#fff} #gnbTrigger_right.open > .bar1 {top:30px; transform:rotate(135deg)} #gnbTrigger_right.open > .bar2 {opacity:0; left:-30px} #gnbTrigger_right.open > .bar3 {top:30px; transform:rotate(-135deg)} /* 우측퀵메뉴 */ #quickMenu {position:fixed; top:0; right:0px; width:130px; height:100%; background:#fff; box-shadow:-1px 0 1px rgba(148,148,148,0.21); z-index:1000} #quickMenu:after {clear:both; content:''; display:block} #quickMenu .right_close_btn {display:none;} #quickMenu > .left {float:left; width:130px} #quickMenu > .left:after {clear:both; content:''; display:block} #quickMenu > .left .member-btn {height:32px; border:1px solid #5f494b; overflow:hidden} #quickMenu > .left .member-btn:after {clear:both; content:''; display:block} #quickMenu > .left .member-btn >li {float:left; width:50%; text-align:center; border-left:1px solid #5f494b} #quickMenu > .left .member-btn >li:first-child {border-left:none} #quickMenu > .left .member-btn >li > a {display:block; width:100%; font-size:11px; font-weight:600; color:#fff; line-height:29px; border:1px solid rgba(67,67,67,0.9); border-left:none; background:#535353} #quickMenu > .left > .nav > li > a {display:block; width:100%; height:43px; padding:0 10px; line-height:43px; font-size:13px; font-weight:600; color:#555; border-bottom:1px solid #dadada; transition:all 0.3s ease} #quickMenu > .left > .nav > li > a:hover {background:#ededed; color:#000} #quickMenu > .left > .nav > li > a:hover i {color:#000} #quickMenu > .left > .nav > li > a > i {font-size:20px; vertical-align:-3px; padding-right:5px; color:#b1b1b0; transition:all 0.3s ease} #quickMenu #quickRolling {position:relative; overflow:hidden} #quickMenu #quickRolling .rolling_list {position:relative; overflow:hidden} #quickMenu #quickRolling .rolling_list:after {clear:both; content:''; display:block} #quickMenu #quickRolling .rolling_list .rolling {float:left} #quickMenu #quickRolling .rolling_list .slick-dots {position:absolute; top:45%; left:15px} #quickMenu #quickRolling .rolling_list .slick-dots:after {clear:both; content:''; display:block} #quickMenu #quickRolling .rolling_list .slick-dots > li {float:left} #quickMenu #quickRolling .rolling_list .slick-dots > li button {display:block; width:7px; height:7px; background:#464041; border:none; font-size:0; margin-right:2px} #quickMenu #quickRolling .rolling_list .slick-dots > li.slick-active button {background:#746364} #quickMenu a.btn-contact img {display:block; width:100%} /* 전체 메뉴 */ #all-menu {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:900} #all-menu .mask {position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; z-index:990} #all-menu .menu-layer {position:fixed; top:50%; left:50%; width:1080px; height:680px; margin:-340px 0 0 -540px; background:#fff; z-index:1100} #all-menu .menu-layer .title-bar {position:relative; text-align:center; height:73px; background:url(../img/allmenu_title_bg.jpg) center top no-repeat} #all-menu .menu-layer .title-bar h2 {font-size:28px; font-weight:normal; color:#fff; line-height:73px} #all-menu .menu-layer .title-bar h2 i {margin-right:10px; vertical-align:-2px} #all-menu .menu-layer .title-bar .btnClose {position:absolute; top:18px; right:20px; width:40px; height:40px; border:none; background:transparent; outline:none; cursor:pointer} #all-menu .menu-layer .title-bar .btnClose span {position:absolute; top:50%; left:50%; display:block; width:32px; height:2px; margin:-2px 0 0 -16px; background:#fff} #all-menu .menu-layer .title-bar .btnClose span.line1 {transform:rotate(45deg)} #all-menu .menu-layer .title-bar .btnClose span.line2 {transform:rotate(-45deg)} #all-menu .menu-layer .menu-wrapper {height:607px; overflow-y:auto} #all-menu .menu-layer .menu-wrapper .depth1 > li {padding:50px 0; border-bottom:1px dotted #d5d5d5} #all-menu .menu-layer .menu-wrapper .depth1 > li > .box {width:850px; margin:auto} #all-menu .menu-layer .menu-wrapper .depth1 > li > .box:after {clear:both; display:block; content:''} #all-menu .menu-layer .menu-wrapper .depth1 > li > .box h3.title {float:left; width:200px; font-size:28px; font-weight:600; color:#745c5f} #all-menu .menu-layer .menu-wrapper .depth1 > li > .box h3.title:after {display:block; margin-top:15px; width:24px; height:3px; content:''; background:#745c5f} #all-menu .menu-layer .menu-wrapper .depth1 > li > .box .depth2 {float:right; width:645px} #all-menu .menu-layer .menu-wrapper .depth1 > li > .box .depth2:after {clear:both; display:block; content:''} #all-menu .menu-layer .menu-wrapper .depth1 > li > .box .depth2 > li {float:left; width:25%; margin-bottom:15px} #all-menu .menu-layer .menu-wrapper .depth1 > li > .box .depth2 > li a {font-size:14px; color:#404040} #all-menu .menu-layer .menu-wrapper .depth1 > li > .box .depth2 > li a:before {display:inline-block; width:6px; height:6px; content:''; margin-right:10px; border:2px solid #745c5f; vertical-align:2px; box-sizing:border-box} #all-menu .menu-layer .menu-wrapper .depth1 > li > .box .depth2 > li.active a, #all-menu .menu-layer .menu-wrapper .depth1 > li > .box .depth2 > li a:hover {color:#867460} /* 비디오모달 */ #all-menu2 {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1500} #all-menu2 .mask2 {position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; z-index:1590} #all-menu2 .menu-layer2 {position:fixed; top:50%; left:50%; width:680px; height:480px; margin:-240px 0 0 -340px; background:#fff; z-index:1600;padding:20px;} #all-menu2 .menu-layer2 h2 {margin-bottom:20px;} #all-menu2 .menu-layer2 span {width:100%;height:auto;background:#efefef;margin-top:20px;display:block;padding:20px;} @media screen and (max-width:1400px) { #wrapper {min-width:auto;} #quickMenu {right:-130px;} #quickMenu.open {right:0px;} #quickMenu .right_close_btn {display:block;position:absolute;right:145px;top:10px;} #quickMenu .right_close_btn i {font-size:16px;} #quickMenu .right_close_btn .xi-close {display:none;} #quickMenu.open .right_close_btn .xi-bars {display:none;} #quickMenu.open .right_close_btn .xi-close {display:block;} #nav {width:100%;} } @media screen and (max-width:1200px) { } @media screen and (max-width:1024px) { body.lock {overflow:hidden;} #wrapper {width:100%;margin-left:0px;} #gnbTrigger {right:0px;left:auto;top:0px;margin-top:0px;} #lnb {width:100%;height:66px;} #lnb > .menu_inner {width:100%;height:66px;overflow:unset;padding:0px;} #lnb > .menu_inner .nav-bottom {display:none;} #lnb #logo {text-align:left;width:60px;top:15px;left:15px;position:fixed;padding-top:0px;} #lnb #logo .no-scroll {display:block !important;width:18px;} #lnb #logo .scroll {display:none !important;} #lnb #logo > a img {width:100%;} #lnb > .menu_inner:hover {background:none;box-shadow:none;} body.scroll #lnb > .menu_inner {background:#fff;} body.scroll #lnb #logo .no-scroll {display:none !important;width:auto;} body.scroll #lnb #logo .scroll {display:block !important;} #lnb ul#nav {position:fixed;width:100%;left:0px;} #lnb ul#nav {opacity:0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition-duration: .5s; transition-duration: .5s;} #lnb ul#nav.opened {opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);} /* 모바일 메뉴효과제거 */ #lnb ul#nav > li {opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); -webkit-transition-duration: .3s; transition-duration: .3s;} /* 메뉴효과제거시 삭제 */ #lnb ul#nav > li > a {font-size:15px;line-height:40px;height:40px;} #lnb ul#nav > li > ul {padding:5px 0px 10px;} #lnb ul#nav > li > ul > li {height:25px;padding:0px 110px;} #lnb ul#nav > li > ul > li > a {font-size:13px;} #lnb .nav-item .memLink a {font-size:14px;} } /*@media screen and (max-width:768px) { #gnbTrigger_right {display:block !important} #quickMenu {top:-100%;right:0px;} }*/ /* 푸터 */ #footer {margin-top:80px; padding:70px 0 80px 0; background:#a07051;border-top:solid 1px #ac856d;} #footer > .inner {width:1400px; margin:auto} #footer .foot_wrap {position:relative;font-size:0px;} #footer .foot_wrap > div {display:inline-block;vertical-align:top;} #footer .foot_logo {width:145px;} #footer .foot_info {width:955px;padding-left:60px;padding-top:10px;} #footer .foot_info span {color:#fff;font-size:17px;display:block;line-height:1.5;} #footer .foot_info > h3 {margin-top:30px;} #footer .foot_info > h3 a {color:#fff;font-size:17px;} #footer .foot_customer {width:300px;text-align:right;} #footer .foot_customer h1 {font-size:35px;color:#fff;font-family:'Montserrat';font-weight:bold;} #footer .foot_customer p {font-size:15px;color:#fff;} #footer .foot_customer span {margin-top:20px;display:inline-block;} #footer .foot_customer span a {display:inline-block;margin-left:10px;font-size:24px;color:#fff;transition: all 0.3s} #footer .foot_customer span a:hover {color:#fff;} @media screen and (max-width:1400px) { /* 푸터 */ #footer > .inner {width:100%;padding:0px 20px;} #footer .foot_logo {width:15%;} #footer .foot_info {width:70%;} #footer .foot_customer {width:15%;} } @media screen and (max-width:1200px) { /* 푸터 */ #footer {margin-top:50px;} #footer > .inner {width:100%; margin:auto;padding:0px 20px;} } @media screen and (max-width:1024px) { /* 푸터 */ #footer {padding:70px 0 80px 0;} #footer > .inner {} #footer .foot_wrap {position:relative;font-size:0px;text-align:center;} #footer .foot_wrap > div {display:block;vertical-align:top;} #footer .foot_logo {width:100%;} #footer .foot_logo a img {width:80px;} #footer .foot_info {width:100%;padding-left:0px;padding-top:20px;} #footer .foot_info span {font-size:14px;display:block;line-height:1.5;} #footer .foot_info span a {color:#bdbdbd;font-size:14px;} #footer .foot_info > h3 {margin-top:30px;} #footer .foot_info > h3 a {font-size:14px;} #footer .foot_customer {width:100%;text-align:center;} #footer .foot_customer h1 {font-size:25px;} #footer .foot_customer p {font-size:12px;} #footer .foot_customer span {margin-top:20px;display:inline-block;} #footer .foot_customer span a {display:inline-block;margin-left:10px;font-size:20px;} #footer .foot_customer span a:first-child {margin-left:0px;} } /* 상단으로 스크롤 */ #scrollTop {display:none; position:fixed; bottom:30px; right:30px; display:inline-block; width:45px; height:45px; text-align:center; color:#fff; line-height:45px; border-radius:50%; background:#555; transition:none !important; z-index:1010;} #scrollTop i {position:absolute; top:35%; left:35%; transition:all .4s ease} #scrollTop span {position:absolute; width:100%; top:0; left:50%; font-weight:600; margin-left:-22px; line-height:45px; opacity:0; filter:alpha(opacity='0'); transform:rotate(-360deg); transition:all .4s ease} #scrollTop.on i {opacity:0; filter:alpha(opacity='0'); transform:rotate(360deg)} #scrollTop.on span {display:block; opacity:1; filter:alpha(opacity='100'); transform:rotate(0deg)}