@charset "utf-8"; /* CSS Document */ /* 바디 */ body.fixed {overflow-y:hidden} /* 전체 감싸기 */ #wrapper {min-width:1200px; overflow:hidden} /* 컨테이너 */ body.scrollfix #container {margin-top:61px} /* 헤더 */ #lnb {position:fixed; top:0; left:0; width:175px; height:100%; background:#fff; box-shadow:1px 0 7px rgba(0,0,0,0.09); z-index:990; overflow-y:auto} #lnb > .menu_inner {position:relative; height:auto; padding-bottom:60px} #lnb #logo {height:175px; padding:0; background:#fff; overflow:hidden} #lnb #logo > a {} #lnb #logo > a img {display:block; width:100%} #lnb > .menu_inner > ul#nav {} #lnb > .menu_inner > ul#nav > li {} #lnb > .menu_inner > ul#nav > li > a {position:relative; display:block; width:100%; height:50px; padding:0 15px; font-size:16px; font-weight:500; color:#404040; line-height:50px; border-top:1px solid #e5e5e5; letter-spacing:-1px;}/*border-bottom:1px solid #dadada */ #lnb > .menu_inner > ul#nav > li > a > i {position:absolute; top:50%; right:15px; margin-top:-8px; color:#f9538b; transition:all 0.3s ease} #lnb > .menu_inner > ul#nav > li.open > a > i {transform:rotate(180deg); color:#fff} #lnb > .menu_inner > ul#nav > li.open > a {background:#f9538b; color:#fff; border-color:#f9538b;} #lnb > .menu_inner > ul#nav > li > ul {display:none; padding:10px 0; background:#fff} #lnb > .menu_inner > ul#nav > li > ul > li {height:36px; padding:8px 15px} #lnb > .menu_inner > ul#nav > li > ul > li > a {font-size:14px; font-weight:400; color:#999; letter-spacing:-1px; }/*text-shadow:1px 1px 1px rgba(0,0,0,0.21); transition:all 0.3s ease*/ #lnb > .menu_inner > ul#nav > li > ul > li > a.on {color:#0f182f} #lnb > .menu_inner > ul#nav > li > ul > li > a:hover {color:#0f182f} #lnb > .menu_inner > ul#nav > li > ul.open {} #lnb > .menu_inner .snsLink {margin-top:11px; text-align:center} #lnb > .menu_inner .snsLink > li {font-size:0} #lnb > .menu_inner .snsLink > li a {display:inline-block; font-size:25px; color:#b1b1b0; padding:0 8px; transition:all 0.3s ease} #lnb > .menu_inner .snsLink > li a:hover {color:#000} /* 우측퀵메뉴 */ #quickMenu {position:fixed; top:0; right:-480px; width:610px; 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 > .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:12px; font-weight:600; color:#fff; line-height:29px; letter-spacing:-1px; 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; letter-spacing:-1px; 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} /* 퀵메뉴 */ #quickmenu {position:fixed; top:220px; right:20px; z-index:900} #quickmenu .iconlist > li {display:block; width:80px; height:80px; font-size:12px; color:#fff; text-align:center; line-height:80px; margin-bottom:1px; background:#222; cursor:pointer} #quickmenu .iconlist > li.icon1:hover, #quickmenu .iconlist > li.icon1.on {background:#867460} #quickmenu .iconlist > li.icon2:hover, #quickmenu .iconlist > li.icon2.on {color:#222; background:#ffea29} #quickmenu .iconlist > li.icon3:hover, #quickmenu .iconlist > li.icon3.on {background:#867460} #quickmenu .iconlist > li.icon4:hover, #quickmenu .iconlist > li.icon4.on {background:#21bbb1} #quickmenu .quick-layer {position:fixed; top:220px; right:-480px; padding:45px 50px; width:480px; height:640px; background:rgba(0, 0, 0, .9); z-index:900} #quickmenu .quick-layer .title {margin-bottom:40px} #quickmenu .quick-layer .title h2 {font-size:30px; font-weight:600; color:#fff; margin-bottom:5px} #quickmenu .quick-layer .title p {color:#fff} #quickmenu .quick-layer .title.kakao h2 {color:#ffea29} #quickmenu .quick-layer .title.kakao p {color:#ffea29} #quickmenu .quick-layer .btn-close {position:absolute; top:45px; right:44px; width:45px; height:45px; border:none; background:transparent; cursor:pointer; outline:none} #quickmenu .quick-layer .btn-close span {position:absolute; display:block; top:50%; left:50%; width:38px; height:1px; margin:-1px 0 0 -19px; background:#fff} #quickmenu .quick-layer .btn-close span.line1 {transform:rotate(45deg)} #quickmenu .quick-layer .btn-close span.line2 {transform:rotate(-45deg)} #quickmenu .quick-layer .btn-area {position:absolute; bottom:45px; left:0; width:100%; text-align:center} #quickmenu .quick-layer .btn-area .btn {display:inline-block; padding:8px 20px; font-size:15px; color:#fff !important; border-radius:0} #quickmenu .quick-layer .btn-area .btn.btn-brown {border-color:#867460 !important; background:#867460 !important} #quickmenu .quick-layer .btn-area .btn.btn-yellow {color:#222 !important; border-color:#ffea29 !important; background:#ffea29 !important} #quickmenu .quick-layer .btn-area .btn.btn-mint {border-color:#21bbb1 !important; background:#21bbb1 !important} /* 푸터 */ #footer {padding:60px 0; background:#424242;} #footer > .inner {width:1200px; margin:auto} #footer > .inner:after {clear:both; content:''; display:block} #footer > .inner .footer-logo {float:left; width:135px; margin-right:60px} #footer > .inner .footer-info {} #footer > .inner .footer-info > ul {font-size:0} #footer > .inner .footer-info > ul > li {display:inline-block; padding-right:15px; font-size:14px; font-weight:400; color:#fff} #footer > .inner .footer-info > .copyright {padding-top:5px} #footer > .inner .footer-info > .copyright p {font-size:14px; font-weight:400; color:#fff} /* 비디오모달 */ #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;} /* 스크롤탑 */ #scrollTop {display:block; position:fixed; right:150px; bottom:50px; width:50px; height:50px; line-height:50px; text-align:center; background:#000; opacity:0; border-radius:50%; font-size:14px; font-weight:500; color:#fff; transition:all 0.3s ease; z-index:9999} #scrollTop.shown {background:#000; opacity:1} #scrollTop.shown:hover {background:#f9538b}