/* 헤더 */ #header {position:fixed; left:0; top:0; width:100%; height:80px; background:transparent;; z-index:9999; transition:all 0.25s ease;} #header.header_scroll { background:#fff; box-shadow:0 0 3px 3px rgba(0,0,0,0.1);} #header .header-inner {padding:0 20px; height:100%;} #header .header-wrap {display:flex; justify-content:space-between; align-items:center; max-width:1260px; margin:0 auto; height:100%;} #logo a {display:inline-block; z-index:999; position:relative;} #logo a img {display:inline-block; vertical-align:middle;} #logo a img.logo_on {display:none;} #header.on #logo a img, #header.header_scroll #logo a img {display:none;} #header.on #logo a img.logo_on, #header.header_scroll #logo a img.logo_on {display:inline-block} /* 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:#04347d; 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} #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:#313580} #nav.each-menu > ul > li:hover > a:after {opacity:1; visibility: visible;;} #nav.each-menu > ul > li .submenu > ul > li a:hover {background:#313580; color:#fff;} /* NAVI :: 스타일1 (단독 메뉴 스타일 / Each Menu Style) :: 웨딩홀 전용 : #header class에 cm_header_style02 추가 */ .cm_header_style02 #nav.each-menu > ul > li {float:left; position:relative;} .cm_header_style02 #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_style02 #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_style02 #nav.each-menu > ul > li:hover > a:after {height:30%;} .cm_header_style02 #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_style02 #nav.each-menu > ul > li .submenu > ul > li {border-bottom:1px solid #a5a341;} .cm_header_style02 #nav.each-menu > ul > li .submenu > ul > li:last-child {border-bottom:0;} .cm_header_style02 #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_style02 #nav.each-menu > ul > li .submenu > ul > li:first-child a {border-radius:5px 5px 0 0;} .cm_header_style02 #nav.each-menu > ul > li .submenu > ul > li:last-child a {border-radius:0 0 5px 5px} .cm_header_style02 #nav.each-menu > ul > li:hover > a {color:#fff} .cm_header_style02 #nav.each-menu > ul > li:hover > a:after {opacity:1; visibility: visible;;} .cm_header_style02 #nav.each-menu > ul > li .submenu > ul > li a:hover {background:#a6ae4e; color:#fff;} .cm_header_style02#header.header_scroll #nav.each-menu > ul > li > a {color:#222;} .cm_header_style02 #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:center; } #nav.total-menu > ul > li {float:left; position:relative; min-width:180px;} #nav.total-menu > ul > li > a {position:relative; display:block; padding:0px; height:80px; line-height:80px; font-size:19px; 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;transition:height 0.25s ease-in-out, opacity 0.5s ease-in-out 0.2s} #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:7px 10px; font-size:16px; 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:#07b1f0; 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:#07b1f0} #nav.total-menu.total-menu.open > ul > li .submenu {opacity:1; visibility:visible; height:auto;} #nav.total-menu.open #gnbBg {height:350px;} #header.header_scroll #nav.total-menu > ul > li > a {color:#222;} @media screen and (max-width:1260px) { #nav.total-menu > ul > li > a {padding:0;} } /* 유틸박스 */ #util-wrap {display:flex;} #util-wrap .language {display:none;} #util-wrap .sitemap-open-btn {display:block; cursor:pointer} #util-wrap .sitemap-open-btn .row {width:25px; height:3px; border-radius:15px; display:block; background:#fff; margin:5px 0px; position:relative; z-index:99; text-align:right;} #util-wrap .sitemap-open-btn .row:first-child {width:20px; margin:5px 0px 5px 5px} #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:#fff; border-radius:15px; display:block; margin:5px 0; transition:all 0.25s ease;} #util-wrap .nav-open-btn.active {} #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 :: 스타일1 (기본 스타일 / Popup Style) */ /* SITE MAP :: 스타일2 (Full Style / 세로 Version) */ .siteMap_style_full {position:fixed; width:100%; height:100%; background:linear-gradient(to bottom, #22347d, #165e85); top:0; left:0; z-index:9999; visibility:hidden; opacity:0; transition:all 0.3s} .siteMap_style_full .sitemap-area {max-width:1400px; margin:0 auto; width:100%; height:100%; visibility: hidden; opacity:0; transition:all 0.5s} .siteMap_style_full .sitemap-area .sitemap-wrap {display:table; width:100%; height:100%;} .siteMap_style_full .sitemap-area .sitemap-wrap .sitemap-inner {display:table-cell; vertical-align:middle;} .siteMap_style_full .sitemap-con {text-align:center;} .siteMap_style_full .sitemap-con h1 {font-size:54px; color:#fff; font-weight:400;} .siteMap_style_full .sitemap-con .sitemap-box {margin-top:120px;} .siteMap_style_full .sitemap-con .sitemap-box > ul {display:table; width: 100%;} .siteMap_style_full .sitemap-con .sitemap-box > ul > li {display:table-cell;} .siteMap_style_full .sitemap-con .sitemap-box > ul > li h2 {font-size:24px; font-weight:400; color:#fff; padding:0 10px 40px; border-bottom:1px solid #5f75f3; transition:all 0.3s ease;} .siteMap_style_full .sitemap-con .sitemap-box > ul > li .sitemap-2dep {padding:25px 10px 0;} .siteMap_style_full .sitemap-con .sitemap-box > ul > li .sitemap-2dep li a {display:block; padding:8px 0; color:#b2bdff; font-size:17px; transition:all 0.3s ease;} .siteMap_style_full .sitemap-con .sitemap-box > ul > li:hover h2 {border-bottom:1px solid #fff} .siteMap_style_full .modal-close-btn {position:absolute; top:0; right:0; width:77px; height:77px; background:#fff; z-index:9999; transition:all 0.3s;} .siteMap_style_full .modal-close-btn span {width:35px; height:4px; background:#22347d; display:block; margin:4px auto; border-radius:0px; transition:all 0.3s;} .siteMap_style_full .modal-close-btn span.line1 {transform:translateY(1px) rotate(45deg)} .siteMap_style_full .modal-close-btn span.line2 {transform:translateY(-7px) rotate(-45deg)} .siteMap_style_full .modal-close-btn:hover {background:#3b56c2} .siteMap_style_full .modal-close-btn:hover span {background:#fff; border-radius:0;} .siteMap_style_full.open {visibility:visible; opacity:1; right:0;} .siteMap_style_full.open .sitemap-area {visibility:visible; opacity:1;} /* SITE MAP :: 스타일3 (Full Style / 세로 Version 2) */ .siteMap_style02_full {position:fixed; width:100%; height:100%; background-color:#231f20; background-position:center; background-size:cover; top:0; left:0; z-index:9999; visibility:hidden; opacity:0; transition:all 0.3s} .siteMap_style02_full .sitemap-area {max-width:1400px; margin:0 auto; width:100%; height:100%; /*visibility: hidden; opacity:0;*/ transition:all 0.5s} .siteMap_style02_full .sitemap-area .sitemap-wrap {display:table; width:100%; height:100%;} .siteMap_style02_full .sitemap-area .sitemap-wrap .sitemap-inner {padding:70px 0px 140px; display:table-cell; vertical-align:middle;} .siteMap_style02_full .sitemap-con { text-align:left;} .siteMap_style02_full .sitemap-con .sitemap-tit {position:relative;} .siteMap_style02_full .sitemap-con .sitemap-tit h1 {font-size:52px; color:#089efd; font-weight:800;} .siteMap_style02_full .sitemap-con .sitemap-box {margin-top:60px;} .siteMap_style02_full .sitemap-con .sitemap-box > ul {display:table; width: 100%;} .siteMap_style02_full .sitemap-con .sitemap-box > ul > li {display:table-cell; border-left:1px solid #ffffff0d; padding:40px 20px; width:20%;} .siteMap_style02_full .sitemap-con .sitemap-box > ul > li:last-child {border-right:1px solid #ffffff0d;} .siteMap_style02_full .sitemap-con .sitemap-box > ul > li h2 {font-size:28px; font-weight:700; color:#089efd; padding:0 10px 0px; transition:all 0.3s ease;} .siteMap_style02_full .sitemap-con .sitemap-box > ul > li .sitemap-2dep {padding:40px 10px 0;} .siteMap_style02_full .sitemap-con .sitemap-box > ul > li .sitemap-2dep li a {display:block; padding:8px 0; color:#ffffffb7; font-size:17px;} .siteMap_style02_full .sitemap-con .sitemap-box > ul > li .sitemap-2dep li a:hover {color:#fff;} .siteMap_style02_full .sitemap-con .sitemap-box > ul > li:hover h2 {} .siteMap_style02_full .sitemap-close-btn {position:absolute; top:0; right:0; width:40px; height:40px; background:#fff; z-index:9999; transition:all 0.3s; border-radius:50%;} .siteMap_style02_full .sitemap-close-btn span {width:15px; height:1px; background:#333; display:block; margin:5px auto; border-radius:0px; transition:all 0.3s;} .siteMap_style02_full .sitemap-close-btn span.line1 {transform:translateY(3px) rotate(45deg)} .siteMap_style02_full .sitemap-close-btn span.line2 {transform:translateY(-3px) rotate(-45deg)} .siteMap_style02_full .sitemap-close-btn:hover {background:#089efd} .siteMap_style02_full .sitemap-close-btn:hover span {background:#fff; border-radius:0;} .siteMap_style02_full.open {visibility:visible; opacity:1; right:0;} .siteMap_style02_full.open .sitemap-area {visibility:visible; opacity:1;} /* 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 0px;} #sub_menu_style_01 .snb li a {font-size:19px; font-weight:600; color:#333; 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:#07b1f0;} #sub_menu_style_01 .snb li:hover a, #sub_menu_style_01 .snb li.on a {color:#07b1f0;} @media screen and (max-width:800px){ #sub_menu_style_01 {display:none;} } /* SUB MENU :: 스타일2 */ #sub_menu_style_02 {width:100%; border-bottom:1px solid #eee;} #sub_menu_style_02 .snb {display:flex; justify-content:space-between;} #sub_menu_style_02 .snb li {position:relative; text-align:center; width:100%; display:table; border-right:1px solid transparent; height:65px; transition:all 0.25s ease;} #sub_menu_style_02 .snb li a {font-size:16px; color:#222; display:table-cell; vertical-align:middle; word-break:keep-all; padding:0 10px;} #sub_menu_style_02 .snb li:hover, #sub_menu_style_02 .snb li.on {background:#313580; border-right:1px solid #ffffff1e} #sub_menu_style_02 .snb li:hover a, #sub_menu_style_02 .snb li.on a {color:#fff;} @media screen and (max-width:800px){ #sub_menu_style_02 {display:none;} } /* SUB MENU :: 스타일3 */ #sub_menu_style_03 .sub-top-menu-inner { border-bottom:1px solid #ddd; height:55px; } #sub_menu_style_03 .location-home-btn {float:left; width:55px; height:55px; text-align:center; background:#056bb3;} #sub_menu_style_03 .location-home-btn i {line-height:55px; color:#fff;} #sub_menu_style_03 .sub-menu-location {position:relative; float:left; width:18em; border:1px solid #ddd; border-bottom:none; margin:0 -0.05% -0.05% 0; } #sub_menu_style_03 .sub-menu-location button {display:block; width:100%; text-align:left; padding:0 20px; position:relative;} #sub_menu_style_03 .sub-menu-location button span {display:block; width:100%; line-height:55px; font-size:17px; color:#2b2b2b; font-weight:300;} #sub_menu_style_03 .sub-menu-location button i {position:absolute; top:50%; right:1.5rem; font-size:17px; color:#2b2b2b; margin-top:-0.6rem; transition:all 0.3s ease;} #sub_menu_style_03 .sub-menu-location.open button i {transform:rotate(180deg)} .snb {display:none;} #sub_menu_style_03 .snb {position:absolute; border:1px solid #ddd; border-top:none; width:100%; left:-1px; right:0; top:100%; background:#fff; z-index:11; padding-bottom:1rem; box-sizing:content-box;} #sub_menu_style_03 .snb li a {display:block; padding:10px 20px; transition: all 0.15s ease;} #sub_menu_style_03 .snb li.on a {color:#04347d; font-weight:600;} #sub_menu_style_03 .snb li a:hover {color:#04347d; font-weight:600} @media screen and (max-width:800px){ #sub_menu_style_02 {display:none;} } /* SUB MENU :: 스타일4 */ #sub_menu_style_04 {width:100%; border-bottom:1px solid #eee;} #sub_menu_style_04 .snb {display:flex; justify-content:center;} #sub_menu_style_04 .snb li {position:relative; text-align:center; margin:0 10px; padding:25px 0px; border-right:1px solid transparent;} #sub_menu_style_04 .snb li a {font-size:17px; color:#222; padding:7px 30px; height:auto; border-radius:50px; word-break:keep-all; transition:all 0.25s ease;} #sub_menu_style_04 .snb li a:hover, #sub_menu_style_04 .snb li.on a {background:#a6ae4e; color:#fff;} @media screen and (max-width:800px){ #sub_menu_style_04 {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;} } /* 푸터 */ #footer {background:#111111; padding:50px 0px;} .footer-content {display:flex; align-items:center; flex-wrap:wrap;} .footer-content .footer-left-con {width:20%;} .footer-content .footer-left-con .f-logo {width:60px; height:70px; background-position:center;} .footer-content .footer-right-con {width:80%;} .footer-content .footer-right-con .police-con {margin-bottom:30px;} .footer-content .footer-right-con .police-con a {font-size:16px; font-weight:600; color:#fff; margin-right:50px;} .footer-content .footer-right-con .footer-detail-con li {margin-bottom:5px;} .footer-content .footer-right-con .footer-detail-con li span {font-size:16px; font-weight:400; color:#fff; margin-right:30px;} @media screen and (max-width:650px){ .footer-content .footer-left-con {width:100%; margin-bottom:20px; text-align:center;} .footer-content .footer-left-con .f-logo {display:inline-block;} .footer-content .footer-right-con {width:100%;} .footer-content .footer-right-con .police-con a {margin-right:15px;} .footer-content .footer-right-con .footer-detail-con li span {margin-right:15px;} }