/* 헤더 */ #header {position:fixed; left:0; top:0; width:100%; height:80px; background:transparent;; z-index:9999; transition:all 0.25s ease;} #header.header_scroll {position:fixed; background:#fff;} #header .header-inner {padding:0 20px; height:100%;} #header .header-wrap {display:flex; justify-content:space-between; align-items:center; max-width:1760px; margin:0 auto;; height:100%;} #logo a {display:inline-block; padding:12px 0; z-index:999; position:relative;} #logo a img {display:inline-block; vertical-align:middle;} /* 기본 header 바가 투명일 때 적용 (로고 온오프) */ #header .logo-off {display:block;} #header .logo-on {display:none;} #header.header_scroll .logo-off, #header.active .logo-off {display:none;} #header.header_scroll .logo-on, #header.active .logo-on {display:block;} #header.active #util-wrap .sitemap-open-btn .row {background:#1b1b1b;} /* #header:before {content:''; position:absolute; width:100%; height:var(--header-height); background:linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%)} */ /* NAVI :: 공통 */ .menu-area { max-width:1240px; margin:0 auto; } /* NAVI :: 스타일1 (단독 메뉴 스타일 / Each Menu Style) */ #nav.each-menu > ul > li {float:left; position:relative;} #nav.each-menu > ul > li > a {position:relative; display:block; padding:0 55px; height:80px; line-height:80px; font-size:18px; color:#000; font-weight:500; transition:all 0.25s ease;} #nav.each-menu > ul > li > a:after {opacity:0; visibility:hidden; content:''; width:100%; height:1px; background:#ddd; position:absolute; bottom:0; left:0; transition:all 0.25s ease;} #nav.each-menu > ul > li .submenu {display:none; position:absolute; width:100%; top:80px; text-align:center; background:#fff; z-index:9999; box-shadow:2px 2px 7px rgba(0,0,0,0.1);} #nav.each-menu > ul > li .submenu > ul > li {border-bottom:1px solid #ddd;} #nav.each-menu > ul > li .submenu > ul > li:last-child {border-bottom:0;} #nav.each-menu > ul > li .submenu > ul > li > a {display:block; padding:10px; font-size:14px; transition:all 0.25s ease;} #nav.each-menu > ul > li:hover > a {color:#222} #nav.each-menu > ul > li:hover > a:after {opacity:1; visibility: visible;;} #nav.each-menu > ul > li .submenu > ul > li a:hover {background:#222; color:#fff;} /* NAVI :: 스타일2 (단독 메뉴 스타일 02 / Each Menu Style 02) */ #nav.each-menu-style02 > ul > li {float:left; position:relative;} #nav.each-menu-style02 > ul > li > a {position:relative; display:block; padding:0 55px; height:80px; line-height:80px; font-size:18px; color:#000; font-weight:500; transition:all 0.25s ease;} #nav.each-menu-style02 > ul > li .submenu {position:absolute; width:100%; top:80px; text-align:center; z-index:9999; opacity:0; visibility:hidden; transition:all 0.2s cubic-bezier(0.4, 0, 1, 1) } #nav.each-menu-style02 > ul > li .submenu:before {content:''; position:Absolute; top:0; left:0; right:0; height:0; background-color:#061337; transition: all 0.2s cubic-bezier(0.4, 0, 1, 1); z-index:-1;} #nav.each-menu-style02 > ul > li .submenu > ul {padding:10px 0px;} #nav.each-menu-style02 > ul > li .submenu > ul > li {position:relative; opacity:0; transition:all 0s 0s;} #nav.each-menu-style02 > ul > li .submenu > ul > li:last-child {border-bottom:0;} #nav.each-menu-style02 > ul > li .submenu > ul > li > a {display:block; padding:10px; font-size:14px; color:#fff; font-weight:200; transition:all 0.25s ease;} #nav.each-menu-style02 > ul > li:hover > a {color:#313580} #nav.each-menu-style02 > ul > li:hover > a:after {opacity:1; visibility: visible;;} #nav.each-menu-style02 > ul > li .submenu > ul > li a:hover {background:#313580; color:#fff; /*opacity:1;*/} #nav.each-menu-style02 > ul > li .submenu.on {opacity:1; visibility:visible;} #nav.each-menu-style02 > ul > li .submenu.on:before {height:100%;} #nav.each-menu-style02 > ul > li .submenu.on > ul > li {opacity:1; transition:all 1s cubic-bezier(.7, .1, .2, 1);; } #nav.each-menu-style02 > ul > li .submenu.on > ul > li:first-child {transition-delay:0.05s} #nav.each-menu-style02 > ul > li .submenu.on > ul > li:nth-child(2) {transition-delay:0.1s} #nav.each-menu-style02 > ul > li .submenu.on > ul > li:nth-child(3) {transition-delay:0.15s} #nav.each-menu-style02 > ul > li .submenu.on > ul > li:nth-child(4) {transition-delay:0.2s} #nav.each-menu-style02 > ul > li .submenu.on > ul > li:nth-child(5) {transition-delay:0.25s} #nav.each-menu-style02 > ul > li .submenu.on > ul > li:nth-child(6) {transition-delay:0.3s} #nav.each-menu-style02 > ul > li .submenu.on > ul > li:nth-child(7) {transition-delay:0.35s} /* NAVI :: 스타일3 (단독 메뉴 스타일 / Each Menu Style) :: 웨딩홀 전용 : #header class에 cm_header_style01 추가 */ .cm_header_style01 #nav.each-menu > ul > li {float:left; position:relative;} .cm_header_style01 #nav.each-menu > ul > li > a {position:relative; display:block; padding:0 55px; height:80px; line-height:80px; font-size:18px; color:#fff; font-weight:500; transition:all .3s ease;} .cm_header_style01 #nav.each-menu > ul > li > a:after {opacity:0; visibility:hidden; content:''; width:1px; height:0px; background:#fff; position:absolute; top:0; left:50%; transition:all 0.5s ease;} .cm_header_style01 #nav.each-menu > ul > li:hover > a:after {height:30%;} .cm_header_style01 #nav.each-menu > ul > li .submenu {visibility:hidden; opacity:0; transform:translateY(10px); position:absolute; width:100%; top:80px; text-align:center; z-index:9999; transition:all 0.7s ease;} .cm_header_style01 #nav.each-menu > ul > li .submenu > ul > li {border-bottom:1px solid #a5a341;} .cm_header_style01 #nav.each-menu > ul > li .submenu > ul > li:last-child {border-bottom:0;} .cm_header_style01 #nav.each-menu > ul > li .submenu > ul > li > a {display:block; padding:10px; font-size:14px; transition:all 0.25s ease; background:#939b42; color:#efeebc;} .cm_header_style01 #nav.each-menu > ul > li .submenu > ul > li:first-child a {border-radius:5px 5px 0 0;} .cm_header_style01 #nav.each-menu > ul > li .submenu > ul > li:last-child a {border-radius:0 0 5px 5px} .cm_header_style01 #nav.each-menu > ul > li:hover > a {color:#fff} .cm_header_style01 #nav.each-menu > ul > li:hover > a:after {opacity:1; visibility: visible;;} .cm_header_style01 #nav.each-menu > ul > li .submenu > ul > li a:hover {background:#a6ae4e; color:#fff;} .cm_header_style01#header.header_scroll #nav.each-menu > ul > li > a {color:#222;} .cm_header_style01 #nav.each-menu > ul > li .submenu.on {transform:translateY(0); opacity:1; visibility: visible;;} /* NAVI :: 스타일2 (메가 메뉴 스타일 / total Menu Style) */ #nav.total-menu {width:70%; text-align:center; top:0; left:0; height:80px; z-index:99;} #nav.total-menu > ul {display:flex; justify-content:end; } #nav.total-menu > ul > li {float:left; position:relative; min-width:180px;} #nav.total-menu > ul > li > a {position:relative; display:block; padding:0 20px; height:80px; line-height:80px; font-size:20px; color:#fff; font-weight:500; transition:all 0.5s ease;} #nav.total-menu > ul > li > a:after {opacity:0; visibility:hidden; content:''; width:100%; height:2px; background:transparent; position:absolute; bottom:0; left:0; transition:all 0.25s ease;} #nav.total-menu > ul > li .submenu {height:0; visibility:hidden; opacity:0; width:100%; z-index:9999; overflow:hidden;} #nav.total-menu > ul > li .submenu > ul {padding-top:10px;} #nav.total-menu > ul > li .submenu > ul > li {} #nav.total-menu > ul > li .submenu > ul > li:last-child {border-bottom:0;} #nav.total-menu > ul > li .submenu > ul > li > a {display:block; padding:10px 10px; font-size:17px; font-weight:300; color:#000; transition:all 0.25s ease;} #nav.total-menu > ul > li:hover > a {color:#04347d} #nav.total-menu > ul > li:hover > a:after {opacity:1; visibility: visible;;} #nav.total-menu > ul > li:hover .submenu {} #nav.total-menu > ul > li .submenu > ul > li a:hover {color:var(--main-color); font-weight:500;} #nav.total-menu #gnbBg {position:absolute; width:100%; height:0px; background:#fff; left:0; transition:all 0.4s ease;} #nav.total-menu.total-menu.open > ul > li > a { color:#222} #nav.total-menu.total-menu.open > ul > li:hover > a {color:var(--main-color)} #nav.total-menu.total-menu.open > ul > li .submenu {opacity:1; visibility:visible; height:auto;transition:height 0.25s ease-in-out, opacity 0.5s ease-in-out 0.2s} #nav.total-menu.open #gnbBg {height:500px;} #header.header_scroll #nav.total-menu > ul > li > a {color:#222;} /* 유틸박스 */ #util-wrap {display:flex; align-items:center;} #util-wrap .language {margin-right:30px; position:relative;} #util-wrap .language .cur {font-size:17px; font-weight:500; color:#222; padding-bottom:10px; cursor:pointer; } #util-wrap .language .cur:after {content:'\f078'; font-family:'Font Awesome 5 Free'; font-weight:900; margin-left:10px; display:inline-block; transition:all 0.3s ease;} #util-wrap .language .dropdown-list {opacity:0; visibility:hidden; position:absolute; border:1px solid #ddd; border-radius:10px; top:30px; width:100%; z-index:999; transition: all 0.3s ease;} #util-wrap .language .dropdown-list li {text-align:center; background:#fff; } #util-wrap .language .dropdown-list li:first-child {border-radius:10px 10px 0 0;} #util-wrap .language .dropdown-list li:last-child {border-radius:0 0 10px 10px;} #util-wrap .language .dropdown-list li a {display:inline-block; padding:8px 0; text-align:Center; width:100%; font-size:14px; color:#000} #util-wrap .language .dropdown-list li:hover {background:#f4f4f4;} #util-wrap .language.active .dropdown-list {opacity:1; visibility:visible;} #util-wrap .language.active .cur:after {transform:rotate(180deg);} #util-wrap .sitemap-open-btn {display:flex; flex-direction:column; align-items:end; justify-content:space-around; width:30px; height:25px; cursor:pointer } #util-wrap .sitemap-open-btn .row {width:20px; height:3px; border-radius:15px; display:inline-block; background:#fff; position:relative; z-index:99; text-align:right;} #util-wrap .sitemap-open-btn .row:nth-child(2) {width:25px; margin:0} #header.on #util-wrap .sitemap-open-btn .row {background:#222;} #header.header_scroll #util-wrap .sitemap-open-btn .row {background:#222;} #util-wrap .nav-open-btn {display:none; top:24px; right:15px; z-index:99999999;} #util-wrap .nav-open-btn .line {width:25px; height:3px; background:#333; border-radius:15px; display:block; margin:5px 0; transition:all 0.25s ease;} #util-wrap .nav-open-btn.active .line {background:#000;} #util-wrap .nav-open-btn.active .line1 {transform:translateY(5px) rotate(45deg);} #util-wrap .nav-open-btn.active .line3 {transform:translateY(-11px) rotate(-45deg)} #util-wrap .nav-open-btn.active .line2 {opacity:0;} #header.header_scroll #util-wrap .nav-open-btn .line {background:#000;} @media screen and (max-width:1300px){ #nav > ul > li > a {font-size:16px; padding:0 30px;} } @media screen and (max-width:1023px){ /* 메뉴, 사이트맵 숨김 */ #nav {display:none;} #util-wrap .sitemap-open-btn {display:none;} #util-wrap .nav-open-btn {display:block;} } /********************** *** SITE MAP *** 스타일 :: Full Style 방향 :: 세로 Style 04 용도 :: 메뉴가 많고 서브메뉴 갯수가 많을 때 ***********************/ .siteMap_style04_full {position:fixed; width:100%; height:100%; background-color:#fff; background-position:center; background-size:cover; top:0; right:-600px; z-index:999999; visibility:hidden; opacity:0; transition:all 0.3s 0.7s} .siteMap_style04_full .sitemap-area, .siteMap_style04_full .sitemap-area .sitemap-con, .siteMap_style04_full .sitemap-area .sitemap-con .sitemap-box, .siteMap_style04_full .sitemap-area .sitemap-con .sitemap-box > ul {height:100%;} .siteMap_style04_full .sitemap-area .sitemap-con {position:absolute; right:100px; left:0; width:auto;} .siteMap_style04_full .sitemap-area .sitemap-con .sitemap-box {max-width:calc(100% - 100px); margin:0 0 0 auto; } .siteMap_style04_full .sitemap-con .sitemap-box > ul {display:flex; align-items:start;} .siteMap_style04_full .sitemap-con .sitemap-box > ul > li {display:flex; align-items:start; flex-wrap:wrap; position:relative; background:#000; width:100%; height:100%; overflow:hidden; border-right:1px solid transparent; transition:all 0.3s } .siteMap_style04_full .sitemap-con .sitemap-box > ul > li:first-child {border-left:1px solid transparent;} .siteMap_style04_full .sitemap-con .sitemap-box > ul > li:before {content:''; position:Absolute; width:0%; height:100%; background:#fff; left:0%; top:0; transition:width .6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s; } .siteMap_style04_full .sitemap-con .sitemap-box > ul > li h2 {width:100%; font-size:32px; font-weight:700; color:#000; padding:0 10px 0px 0; margin:80px 30px 40px; line-height:1; opacity:0; transform:translateX(-50%); transition:transform .8s cubic-bezier(0.47, 0, 0.31, 1.04), opacity .8s cubic-bezier(0.47, 0, 0.31, 1.04) } .siteMap_style04_full .sitemap-con .sitemap-box > ul > li .sitemap-2dep {width:100%; height:100%} .siteMap_style04_full.open .sitemap-con .sitemap-box > ul > li .sitemap-2dep li {margin:1rem 0;} .siteMap_style04_full .sitemap-con .sitemap-box > ul > li .sitemap-2dep li a {display:block; color:#888; font-size:19px; font-weight:400; padding:10px 30px; opacity:0; transform:translateX(-50%); transition:transform .8s cubic-bezier(0.47, 0, 0.31, 1.04), opacity .8s cubic-bezier(0.47, 0, 0.31, 1.04) } .siteMap_style04_full .sitemap-con .sitemap-box > ul > li .sitemap-2dep li a:hover {color:#000;} .siteMap_style04_full .sitemap-close-btn {position:absolute; top:25px; right:30px; width:40px; height:40px; background:#fff; z-index:9999; transition:all 0.3s; border-radius:50%;} .siteMap_style04_full .sitemap-close-btn span {width:25px; height:4px; background:#000; display:block; margin:5px auto; border-radius:5px; transition:all 0.3s;} .siteMap_style04_full .sitemap-close-btn span.line1 {transform:translateY(3px) rotate(45deg)} .siteMap_style04_full .sitemap-close-btn span.line2 {transform:translateY(-6px) rotate(-45deg)} .siteMap_style04_full.open {visibility:visible; opacity:1; right:0; transition:all 0.3s} .siteMap_style04_full.open .sitemap-area {visibility:visible; opacity:1;} .siteMap_style04_full.open .sitemap-con .sitemap-box > ul > li h2 {opacity:1; transform:translateX(0);} .siteMap_style04_full.open .sitemap-con .sitemap-box > ul > li .sitemap-2dep li a {opacity:1; transform:translateX(0);} .siteMap_style04_full.open .sitemap-con .sitemap-box > ul > li {border-color: #ddd; } .siteMap_style04_full.open .sitemap-con .sitemap-box > ul > li:before { width:100%; /*transition:width .6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s*/} /********************** *** SITE MAP *** 스타일 :: Full Style 방향 :: 세로 Style 05 ***********************/ .siteMap_style05_full {position:fixed; width:100%; height:100%; background-color:transparent; background-position:center; background-size:cover; top:0; right:-600px; z-index:999999; visibility:hidden; opacity:0; transition:all 0.3s 0.7s} .siteMap_style05_full .sitemap-area .sitemap-con {position:absolute; left:0; width:100%; height:100%; display:flex;} .siteMap_style05_full .sitemap-left-con {display:flex; flex-direction: column; justify-content:space-between; width:35%; padding:120px 50px; background:#222; transform:translateY(100%); transition:all .6s cubic-bezier(0.8, 0.01, 0.31, 1.04) 0.2s;} .siteMap_style05_full .sitemap-left-con .sitemap-slogan-con .sitemap-slogan {color:#fff; font-size:48px;} .siteMap_style05_full .sitemap-left-con .sitemap-slogan-con p {color:#fff; font-size:21px; font-weight:400;} .siteMap_style05_full .sitemap-left-con .sitemap-footer-con .footer-menu {display:flex; flex-wrap:wrap; margin-bottom:10px;} .siteMap_style05_full .sitemap-left-con .sitemap-footer-con .footer-menu a {color:#fff; margin-right:15px; font-weight:300;} .siteMap_style05_full .sitemap-left-con .sitemap-footer-con .copy {font-weight:200; color:rgba(255,255,255,.6)} .siteMap_style05_full .sitemap-right-con {width:65%; padding:70px 20px; background:#fff; transform:translateY(-100%); transition:all .6s cubic-bezier(0.8, 0.01, 0.31, 1.04) 0.2s;} .siteMap_style05_full .sitemap-right-con .sitemap-box {width:100%; height:100%;} .siteMap_style05_full .sitemap-right-con .sitemap-box > ul {display:flex; align-items:start; flex-direction:column; width:100%; height:100%;} .siteMap_style05_full .sitemap-right-con .sitemap-box > ul > li {display:flex; align-items:start; flex-direction:row; position:relative; width:100%; height:100%; padding:50px 30px; overflow:hidden; border-bottom:1px solid transparent; transition:all 0.3s } .siteMap_style05_full .sitemap-right-con .sitemap-box > ul > li h2 {font-size:21px; font-weight:600; color:#222; width:20%; padding:0 25px 0px 0; line-height:1; opacity:0; transform:translateY(-50%); transition:all 1.5s ease, transform 1.5s 0.5s, opacity 1.5s 0.5s} .siteMap_style05_full .sitemap-right-con .sitemap-box > ul > li .sitemap-2dep {width:80%; height:100%; display:flex; align-items:start; flex-wrap:wrap;} .siteMap_style05_full .sitemap-right-con .sitemap-box > ul > li .sitemap-2dep li a {display:block; color:#888; font-size:17px; font-weight:500; padding:0px 30px 0px; opacity:0; transform:translateY(-50%); transition:all 1.5s ease, transform 1.5s 0.5s, opacity 1.5s 0.5s} .siteMap_style05_full .sitemap-right-con .sitemap-box > ul > li .sitemap-2dep li a:hover {color:red;} .siteMap_style05_full .sitemap-close-btn {position:absolute; top:25px; right:30px; width:40px; height:40px; z-index:9999; } .siteMap_style05_full .sitemap-close-btn span {width:25px; height:4px; background:#000; display:block; margin:5px auto; border-radius:5px;} .siteMap_style05_full .sitemap-close-btn span.line1 {transform:translateY(3px) rotate(45deg)} .siteMap_style05_full .sitemap-close-btn span.line2 {transform:translateY(-6px) rotate(-45deg)} .siteMap_style05_full.open {visibility:visible; opacity:1; right:0; transition:all 0.3s} .siteMap_style05_full.open .sitemap-left-con, .siteMap_style05_full.open .sitemap-right-con {transform:translateY(0)} .siteMap_style05_full.open .sitemap-area {visibility:visible; opacity:1;} .siteMap_style05_full.open .sitemap-con .sitemap-box > ul > li h2, .siteMap_style05_full.open .sitemap-con .sitemap-box > ul > li .sitemap-2dep li a {opacity:1; transform:translateY(0%); } .siteMap_style05_full.open .sitemap-con .sitemap-box > ul > li {border-color: #ddd; } .siteMap_style05_full.open .sitemap-con .sitemap-box > ul > li:before { width:100%; /*transition:width .6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s*/} .siteMap_style05_full .sitemap-con .sitemap-box > ul > li.active:before {background:#f4f4f4} .siteMap_style05_full .sitemap-con .sitemap-box > ul > li.active h2 {color:red} #siteMap_style05_dimmed.dimmed_bg {width:100%; height:100%; background:rgba(0,0,0,0.3); position:fixed; left:0; top:0; right:0; bottom:0; z-index:9999; opacity:0; visibility:hidden; transition:all .3s cubic-bezier(0.8, 0.01, 0.31, 1.04) .8s;;} #siteMap_style05_dimmed.open.dimmed_bg {opacity:1; visibility:visible; transition:all .3s cubic-bezier(0.8, 0.01, 0.31, 1.04) 0s;;} /* GNB MOBILE :: 스타일1 (기본 스타일 / Basic Style) */ .overlay {display:none; position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.5); left:0; top:0; z-index:999} .gnb_style_basic {display:none; position:fixed; right:-280px; width:280px; top:0; background:#fff; height:100%; z-index:999999; transition:0.4s ease;;} .gnb_style_basic .gnb-mobile-wrapper {width:100%; height:100%; position:relative; padding:75px 0px;} .gnb_style_basic .gnb-mobile-wrapper .gnb-mobile-inner { width:100%; height:100%;} .gnb_style_basic #mobile-nav {width:100%; height:100%;} .gnb_style_basic #mobile-nav > li {position:relative; border-bottom:1px solid #ddd;} .gnb_style_basic #mobile-nav > li > a {font-size:16px; font-weight:600; color:#222; display:block; height:55px; line-height:55px; padding:0 20px} .gnb_style_basic #mobile-nav > li > i {position:absolute; left:0; top:0; width:100%; height:55px; transition:0.4s ease;} .gnb_style_basic #mobile-nav > li > i:after {position:absolute; right:10%; top:35%; content:'\f078'; font-family:'Font Awesome 5 Free'; font-weight:900;} .gnb_style_basic #mobile-nav > li.open i:after {content:'\f077'} .gnb_style_basic #mobile-nav .submenu {display:none;} .gnb_style_basic #mobile-nav .submenu ul li {border-top:1px solid #ddd;} .gnb_style_basic #mobile-nav .submenu ul li a {display:block; padding:10px 20px; font-size:15px; transition:0.4s ease;} .gnb_style_basic #mobile-nav > li.open > a {background:#f4f4f4} .gnb_style_basic.open {right:0px;} @media screen and (max-width:1023px){ .gnb_style_basic {display:block;} } /* GNB MOBILE :: 스타일2 (Full Style) */ /* SUB MENU :: 스타일1 */ #sub_menu_style_01 {width:100%; padding:20px 0px;} #sub_menu_style_01 .snb {display:flex; justify-content:flex-end;} #sub_menu_style_01 .snb li {position:relative; text-align:center; display:table; margin:0 20px;} #sub_menu_style_01 .snb li a {font-size:16px; font-weight:600; color:#222; display:table-cell; vertical-align:middle; padding:10px 20px;} #sub_menu_style_01 .snb li:before {content:''; position:absolute; width:100%; height:2px; bottom:0px; left:0; transition:all 0.25s ease;} #sub_menu_style_01 .snb li:hover:before, #sub_menu_style_01 .snb li.on:before {background:var(--main-color);} #sub_menu_style_01 .snb li:hover a, #sub_menu_style_01 .snb li.on a {color:var(--main-color);} @media screen and (max-width:800px){ #sub_menu_style_01 {display:none;} } /* SUB MENU :: 스타일2 */ #sub_menu_style_02 {position:absolute; left:0; bottom:17rem; width:100%; transition:all 0.3s ease; z-index:9;} #sub_menu_style_02 .container {text-align:center;} #sub_menu_style_02 .snb {width:100%; display:inline-flex; justify-content:center; flex-wrap:wrap; background:var(--main-color); border-radius:10px; overflow:hidden;} #sub_menu_style_02 .snb li {position:relative; text-align:center; display:table; height:60px; min-width:16rem; overflow:hidden; transition:all 0.25s ease; } #sub_menu_style_02 .snb li a {font-size:17px; color:#fff; display:table-cell; vertical-align:middle; word-break:keep-all; padding:0 15px; font-weight:300;} #sub_menu_style_02 .snb li:hover, #sub_menu_style_02 .snb li.on {background:#113c73;} #sub_menu_style_02 .snb li:hover a, #sub_menu_style_02 .snb li.on a {color:#fff;} #sub_menu_style_02.fixed {position:fixed; bottom:auto; top:8rem; border-top:1px solid #ddd; box-shadow:1px 1px 13px #00000014;} #sub_menu_style_02.fixed .container {max-width:100%;} #sub_menu_style_02.fixed .snb {border-radius:0;} #sub_menu_style_02.fixed .snb li.on a, #sub_menu_style_02.fixed .snb li:hover a {background:#eaf0fb; color:var(--main-color); font-weight:600;} @media screen and (max-width:800px){ #sub_menu_style_02 {display:none;} } /* SUB MOBILE :: 스타일1 (ONLY 2DEP) */ #sub_m_menu_style_01 {display:none; position:relative; height:45px; z-index:9;} #sub_m_menu_style_01 .sub-menu-inner {height:100%; border-bottom:1px solid #ddd;} #sub_m_menu_style_01 .sub-menu-inner .location-home-btn {position:absolute; width:45px; height:45px; text-align:center;} #sub_m_menu_style_01 .sub-menu-inner .location-home-btn i {line-height:45px; color:#000; font-size:17px;} #sub_m_menu_style_01 .sub-menu-inner .dropdown-menu {height:100%; margin-left:45px;} #sub_m_menu_style_01 .sub-menu-inner .dropdown-menu .cur-location {display:block; width:100%; height:100%; text-align:left; color:#222; font-size:17px; font-weight:400; padding:0 30px 0 15px;} #sub_m_menu_style_01 .sub-menu-inner .dropdown-menu .cur-location i {position:absolute; right:10px; font-size:19px; top:13px; transition:all .25s ease;} #sub_m_menu_style_01 .sub-menu-inner .dropdown-menu .dropdown-list {display:none; border:1px solid #ddd; width:calc(100% - 2px); border-top:0; padding:5px 0; background:#fff; border-top:0; margin-top:1px;;} #sub_m_menu_style_01 .sub-menu-inner .dropdown-menu .dropdown-list li a {display:block; padding:9px 15px; font-size:16px; color:#666;;} #sub_m_menu_style_01 .sub-menu-inner .dropdown-menu.open .cur-location i {transform:rotate(180deg);} @media screen and (max-width:800px){ #sub_m_menu_style_01 {display:block;} } /* SUB MOBILE :: 스타일2 (1DEP / 2DEP) */ #sub_m_menu_style_02 {display:none; position:relative; z-index:9; margin:-35px 20px 0 20px;} #sub_m_menu_style_02 .sub-menu-inner {height:100%;} #sub_m_menu_style_02 .sub-menu-inner .dropdown-menu {height:100%; border-radius:50px; background:#f4f4f4; position:relative; } #sub_m_menu_style_02 .sub-menu-inner .dropdown-menu.location1 {background:#00a0e8; margin-bottom:15px;} #sub_m_menu_style_02 .sub-menu-inner .dropdown-menu .cur-location {display:block; width:100%; height:100%; text-align:left; color:#222; font-size:17px; font-weight:400; padding:0 40px; position:relative; z-index:9;} #sub_m_menu_style_02 .sub-menu-inner .dropdown-menu.location1 .dropdown-list li a {color:#fff;} #sub_m_menu_style_02 .sub-menu-inner .dropdown-menu .cur-location span {position:relative; line-height:65px; display:block; font-size:19px;} #sub_m_menu_style_02 .sub-menu-inner .dropdown-menu .cur-location i {position:absolute; right:20px; top:0; font-size:19px; line-height:65px; transition:all .25s ease;} #sub_m_menu_style_02 .sub-menu-inner .dropdown-menu.location1 .cur-location span {color:#fff;} #sub_m_menu_style_02 .sub-menu-inner .dropdown-menu.location1 .cur-location i {color:#fff;} #sub_m_menu_style_02 .sub-menu-inner .dropdown-menu .dropdown-list {display:none; position:absolute; top:calc(100% - 30px); width:100%; padding-top:2em; padding-bottom:10px; border-radius:0 0 50px 50px; background:#f4f4f4} #sub_m_menu_style_02 .sub-menu-inner .dropdown-menu.location1 .dropdown-list {background:#00a0e8;} #sub_m_menu_style_02 .sub-menu-inner .dropdown-menu .dropdown-list li a {display:block; padding:9px 40px 15px; font-size:16px; color:#333;;} #sub_m_menu_style_02 .sub-menu-inner .dropdown-menu.open .cur-location {z-index:9999;} #sub_m_menu_style_02 .sub-menu-inner .dropdown-menu.open .dropdown-list {z-index:99;} #sub_m_menu_style_02 .sub-menu-inner .dropdown-menu.open .cur-location i {transform:rotate(180deg);} @media screen and (max-width:800px){ #sub_m_menu_style_02 {display:block;} } /********************** FOOTER STYLE: 01 ***********************/ #footer {background:#222; padding:6rem 0 4rem;} .footer-top-con {display:flex; justify-content:space-between;} .footer-top-con .f-police li {margin:1rem 0; text-align:right;} .footer-top-con .f-police li a {font-size:1.8rem; color:#fff; font-weight:300;} .footer-bottom-con {display:flex; justify-content:space-between; align-items:end;} .footer-bottom-con .f-info-con li {margin:1rem 0;} .footer-bottom-con .f-info-con li span {font-size:1.5rem; color:#dedede; font-weight:400; margin-right:2rem;} .footer-bottom-con .f-copy-con p {font-size:1.5rem; color:#dedede;}