/******************************************** * Animation * waypoints.js / gsap.js / ScrollToPlugin.js 필요 * script.js에 ********************************************/ html [data-scroll] { transition: all 0.6s ease; } html [data-scroll="fade-up"] { transform: translate3d(0, 30px, 0); -webkit-transform: translate3d(0, 30px, 0); opacity: 0; } html [data-scroll="fade-down"] { transform: translate3d(0, -30px, 0); -webkit-transform: translate3d(0, -30px, 0); opacity: 0; } html [data-scroll^="fade"].animated { opacity: 1; transform: none; -webkit-transform: none; } html [data-delay="0.2s"] { transition-delay:0.2s} html [data-delay="0.3s"] { transition-delay:0.3s} html [data-delay="0.4s"] { transition-delay:0.4s} html [data-delay="0.5s"] { transition-delay:0.5s} * { font-family: "Pretendard"; } .fta:before, .fta:after { font-family: "Font Awesome 5 Free" !important; font-weight: 900; } /** WORDPRESS MAIN VISUAL SLIDER DEFAULT SETTING **/ #mainVisualCon > .elementor-element, #mainVisualCon > .elementor-element > .elementor-widget-container > .main-visual { height: 100%; } /******************************************** * Header Menu Setting * 헤더 ********************************************/ .elementor-location-header[data-elementor-type="header"] .fixed { position: fixed; width: 100%;left: 0; top: 0; z-index: 9999; } /******************************************** * Header Font Setting * 메인 메뉴(헤더) 폰트 셋팅 ********************************************/ #header {position:fixed; z-index:999; transition: all 0.3s ease; } #header.active {background:#fff; box-shadow:3px 3px 12px #00000014} #header #logo_on { display: none; } #header #globalMenu_on { display: none; } #header #nav a { font-family: "Pretendard"; } #header #nav .elementor-widget-container { padding: 0; } #header #nav .elementor-nav-menu > .menu-item > a { padding: 30px 0px 30px 85px; color: #fff; font-size: 2.3rem; font-weight: 500; } #header #nav .elementor-nav-menu > .menu-item > .sub-menu { width: 100% !important; left:25% !important; } #header #nav .elementor-nav-menu > .menu-item > .sub-menu a { font-size: 17px; color: #0C1045; font-weight: 700; } #header #nav .elementor-nav-menu > .menu-item > .sub-menu .current-menu-item a { background-color: #0C1045; color: var(--main-color); } #header #nav .elementor-nav-menu > .menu-item > .sub-menu li:hover a { background-color: #0C1045; color: var(--main-color); } #header.fixed #nav .elementor-nav-menu > .menu-item > a { color: #000; } #logo a:after { content: ""; position: absolute; left: 0; top: 0; width: 229px; height: 45px; background: url(/wp-content/uploads/2025/06/logo3-on.png); opacity: 0; transition: all .3s; } #header.fixed #logo a:after, #header.sub-header #logo a:after { opacity: 1; } #header #nav .elementor-nav-menu > .menu-item > .sub-menu a { justify-content: center; border-left: none; } #header.sub-header { background:#fff; box-shadow:3px 3px 12px #00000014 } /******************************************** * Header Language Setting * 헤더 언어 폰트 셋팅 ********************************************/ #language .lang-item a {color:#aaaaaa; font-size:1.4rem; font-weight:500; padding:0 1rem; position:relative; transition:all 0.3s ease;} #language .lang-item a::after {content:''; position:absolute; width:1px; height:60%; top:20%; right:0; left:auto; opacity:1; background:#dddddd;;} #language .lang-item:first-child a:before {content:'\f0ac'; font-weight:900; font-family:'Font Awesome 5 Free'; opacity:1; width:0; height:0; position:Absolute; left:-1rem; top:0;} #language .lang-item:last-child a:after {display:none;} #language .lang-item.current-lang a {color:#222222; font-weight:600} #language .lang-item a:hover {color:#222222;} /******************************************** * Header Utility Setting * 헤더 유틸리티 셋팅 ********************************************/ #util {display:flex; align-items: center;} #util .util-list {display:flex;} #util .util-list li a {font-size:1.6rem; color:#fff; font-weight:500; margin:0 1rem; padding:0 1rem;} #util .sitemap-con {width:5rem; height:5rem; position: relative;} #util .sitemap-con .sitemap-icon {width:100%; height:100%; position:relative; display:inline-block;} #util .sitemap-con .sitemap-icon .row {width:4rem; height:3px; background:#fff; display:inline-block; position:absolute; top:18px; right:0;} #util .sitemap-con .sitemap-icon .row2 {margin-top:15px;} @media screen and (max-width:1024px) { #sitemapBtn {display:none;} } #header.active #util .util-list li a, #header.sub-header #util .util-list li a {color:#000;} #header.active #util .sitemap-con .sitemap-icon .row, #header.sub-header #util .sitemap-con .sitemap-icon .row {background:#000;} /******************************************** * FULLPAGE SETTING * FULLPAGE 플러그인 사용시에만 사용하도록 !! * 풀페이지 네비게이션 세팅 ********************************************/ #fp-nav.left { left: 70px !important; } #fp-nav.left > ul > li { width: 8px; height: 8px; margin: 2rem 0; display: flex; align-items: center; } #fp-nav.left > ul > li > a > span { background: transparent; border: 1px solid #fff; width: 8px; height: 8px; margin: 0; left: 0; top: 0; } #fp-nav.left > ul > li > a.active > span, #fp-nav.left > ul > li:hover > a > span, #fp-nav.left > ul > li:hover > a.active > span { background: #fff; width: 8px; height: 8px; margin: 0; left: 0; top: 0; } #fp-nav.left > ul > li > .fp-tooltip { font-size: 1.8rem; color: #fff; font-weight: 400; font-family: "Pretendard"; position: relative; overflow: visible; width: auto; } #fp-nav.left.active > ul > li > a > span { border-color: #9d9d9d !important; } #fp-nav.left.active > ul > li > .fp-tooltip { color: #000 !important; } #fp-nav.left > ul > li > a.active > span { background: var(--main-color) !important; border: 1px solid var(--main-color) !important; } /******************************************** * FULLPAGE SETTING * FULLPAGE 플러그인 사용시에만 사용하도록 !! * 풀페이지 메인페이지 세팅 ********************************************/ .section .fp-tableCell .elementor-element, .section .fp-tableCell .elementor-element .elementor-widget-container { height: 100%; } /******************************************** * COMMON SITEMAP SETTING * 사이트맵 세팅 * VER 1 유진 ********************************************/ #elementor-popup-modal-99 .dialog-widget-content {background-color:transparent !important; box-shadow:none !important;} #sitemapCon {background:#fff; border-radius:25px} #sitemapCon .sitemap-item .e-con-inner { border:1px solid #ddd; border-radius:15px 15px 0 0; } #sitemapCon .sitemap-item .menu-tit{margin-bottom:10px;} #sitemapCon .sitemap-item .menu-tit h2 { font-family:var(--point-font); font-size:2.6rem; color:#202020; font-weight:500; padding:2rem 0; text-align:left; position:relative;} #sitemapCon .sitemap-item .menu-tit h2:before {opacity:0; visibility:hidden; content:''; width:1rem; height:1rem; background:var(--main-color); border-radius:50px; display:inline-block; position:absolute; top:0; left:-10px; z-index:-1; transform:translateY(-10px); z-index:9; transition:all 0.3s ease;} #sitemapCon .sitemap-item nav .elementor-nav-menu .menu-item > a { font-family:var(--point-font); font-size:1.9rem; font-weight:400; color:#333; padding:1.5rem 1rem; } #sitemapCon .sitemap-item nav .elementor-nav-menu .menu-item.current-menu-item a { background:none; color:#000; border:none;} #sitemapCon .sitemap-item nav .elementor-nav-menu .menu-item > a:hover { color:var(--main-color); border:none; fill:none; } #sitemapCon .sitemap-item nav .elementor-nav-menu .menu-item > a::after{display:none} #sitemapCon .sitemap-item:hover .menu-tit h2:before {opacity:1; visibility:visible; transform:translateY(0px);} #elementor-popup-modal-99 .dialog-close-button svg {fill:#bdbdbd; font-size:3.2rem; transition: all 0.3s ease;} #elementor-popup-modal-99 .dialog-close-button svg:hover {fill: var(--main-color)} /******************************************** * COMMON SITEMAP SETTING * 사이트맵 세팅 * VER 2 목포문화원 ********************************************/ #elementor-popup-modal-286 .dialog-widget-content {background-color:transparent !important; box-shadow:none !important;} #sitemapCon {background:#fff;} #sitemapCon .sitemap-item .e-con-inner { border:1px solid #ddd; border-radius:15px 15px 0 0; } #sitemapCon .sitemap-item .menu-tit{margin-bottom:10px;} #sitemapCon .sitemap-item .menu-tit h2 { font-family:'gMarketSans'; font-size:3.0rem; color:#000; font-weight:500; padding:2rem 0; text-align:left; position:relative;} #sitemapCon .sitemap-item .menu-tit h2:before {opacity:0; visibility:hidden; content:''; width:1rem; height:1rem; background:var(--main-color); border-radius:50px; display:inline-block; position:absolute; top:0; left:-10px; z-index:-1; transform:translateY(-10px); z-index:9; transition:all 0.3s ease;} #sitemapCon .sitemap-item nav .elementor-nav-menu .menu-item > a { font-family:'gMarketSans'; font-size:1.9rem; font-weight:500; color:#00000080; padding:1.5rem 1rem; } #sitemapCon .sitemap-item nav .elementor-nav-menu .menu-item.current-menu-item a { background:none; color:#000; border:none;} #sitemapCon .sitemap-item nav .elementor-nav-menu .menu-item > a:hover { color:var(--main-color); border:none; fill:none; } #sitemapCon .sitemap-item nav .elementor-nav-menu .menu-item > a::after{display:none} #sitemapCon .sitemap-item:hover .menu-tit h2:before {opacity:1; visibility:visible; transform:translateY(0px);} #elementor-popup-modal-286 .dialog-close-button svg {fill:#000; font-size:4.2rem;} /******************************************** * QUICK BTN * 따라다니는 퀵메뉴 ********************************************/ #quickBtn {position:fixed; right:2%; top:70%; width:auto; display:inline-block; z-index:999;} #quickBtn .quick-btn {display:flex; flex-direction:column} #quickBtn .quick-btn > a {width:7rem; height:7rem; border-radius:50%; position:relative; display:inline-block; box-shadow:6px 3px 10px #0c0c0c11;} #quickBtn .quick-btn > a.top-btn {background:#fff;} #quickBtn .quick-btn > a.customer-btn {background:var(--main-color); display:flex; align-items: center; justify-content: center; margin-top:1rem;} #quickBtn .quick-btn .txt-box {display:flex; flex-direction:column; align-items: center; justify-content: center; height:100%;} #quickBtn .quick-btn .txt-box i {width:23px; height:14px;} #quickBtn .quick-btn .txt-box h4 {font-family:'Titilliym Web'; font-size:1.6rem; font-weight:700; color:var(--main-color); margin-top:0.5rem} #quickBtn .quick-btn > a.customer-btn i {width:36px; height:34px; display:inline-block;} #quickBtn .quick-btn > a.customer-btn:hover {background:#065083} /******************************************** * SUB VISUAL SETTING * 서브 비주얼 셋팅 ********************************************/ #subVisual { width: 100%; height: 25rem;} #subVisual > .e-con-inner { justify-content: end; } #subVisual #subTitle {margin-bottom:10rem;} #subVisual #subTitle h2 { font-family:'Pretendard'; font-size: 5.2rem; color: #222; font-weight: 700; margin-top:2rem} #subVisual #subText {margin-bottom:5rem;} #subVisual #subText h4 {font-family:'Pretendard'; font-size:2.4rem; color:#fff; opacity:0.6; font-weight:300} @media screen and (max-width:1400px) { #subVisual > .e-con-inner {padding:0 10px;} } /******************************************** * SUB MENU SETTING * 서브 메뉴 셋팅 ********************************************/ #subVisual #subMenu { bottom: 5rem; } #subVisual #subMenu .elementor-element { max-width: var(--max-container); width: 100%; } #subVisual #subMenu ul.elementor-nav-menu { width: 100%; flex-wrap: nowrap; } #subVisual #subMenu ul.elementor-nav-menu li { width: 15%; transition: all 0.3s ease; } #subVisual #subMenu ul.elementor-nav-menu li a { font-family: "Pretendard"; padding: 2.5rem 1rem; font-size: 20px; font-weight: 500; background: rgba(0, 0, 0, 0.3); color: #fff; position: relative; display: inline-block; text-align: center; transition: all 0.3s ease; } #subVisual #subMenu ul.elementor-nav-menu li a:after { content: ""; position: absolute; width: 1px; height: 50%; top: 50%; transform: translateY(-50%); background: #ffffff1c; right: 0; left: auto; opacity: 1; } #subVisual #subMenu ul.elementor-nav-menu li:last-child a:after { display: none; } #subVisual #subMenu ul.elementor-nav-menu li.current-menu-item, #subVisual #subMenu ul.elementor-nav-menu li.current-page-ancestor { background: var(--main-color); } #subVisual #subMenu ul.elementor-nav-menu li.current-menu-item a, #subVisual #subMenu ul.elementor-nav-menu li.current-page-ancestor a { color: #fff; } #subVisual #subMenu ul.elementor-nav-menu li:hover { background: var(--main-color); } #subVisual #subMenu ul.elementor-nav-menu li:hover a { color: #fff; } .sub-visual { display: none; } /******************************************** * POLICE COMMON * 정책 공통 세팅 ********************************************/ .police-content .police-con p { font-size: 17px; color: #000; font-weight: 300; margin-bottom: 20px; line-height: 1.5; } .police-content .discl-box { max-width: 800px; margin: 15px auto 15px; background: #f4f4f4; border: 1px solid #ddd; padding: 30px; border-radius: 15px; } .police-content .discl-box p { font-size: 17px; color: #000; font-weight: 300; line-height: 1.5; } .emailinfo .info_box { display: flex; align-items: center; flex-wrap: wrap; background: #f4f4f4; border: 1px solid #ddd; border-radius: 10px; padding: 30px; } .emailinfo .info_box .txt-con { width: 100%; } .emailinfo .info_box .txt-con h4 { font-size: 19px; margin-bottom: 10px; } .emailinfo .info_box .txt-con p { font-size: 17px; color: #4b4b4b; line-height: 1.3; word-break: keep-all; } .emailinfo .emailinfo-detail { } .emailinfo .emailinfo-detail .detail-sec { margin: 50px 0; } .emailinfo .emailinfo-detail .detail-sec h5 { font-size: 21px; margin-bottom: 25px; position: relative; color: #222; } .emailinfo .emailinfo-detail .detail-sec .detail-txt-con ol > li { font-size: 18px; color: #4e4e4e; margin-bottom: 25px; font-weight: 600; word-break: keep-all; line-height: 1.5; } .emailinfo .emailinfo-detail .detail-sec .detail-txt-con ol > li > ul { margin-top: 10px; } .emailinfo .emailinfo-detail .detail-sec .detail-txt-con ol > li > ul > li { font-size: 16px; color: #666; margin-bottom: 5px; font-weight: 400; line-height: 1.5; } .login-content input[type="submit"] {background-color:var(--main-color) !important} /************************************************** * MAIN VISUAL * 메인 비주얼 공통 세팅 ****************************************************/ #mainVisualCon { width:100%; height:96rem; z-index:9;} /* 풀페이지에만 사용 */ /* .section .fp-tableCell .elementor-element, .section .fp-tableCell .elementor-element .elementor-widget-container { height: 100%; } */ .main-visual-slide, .main-visual-slide .slick-list, .main-visual-slide .slick-track, .main-visual-item { height:960px; } .main-visual-item .container { height: 100%; } #mainVisualCon .main-visual-txt-con {height:100%; position: relative;} #mainVisualCon .visual-txt-con { position:absolute; width:100%; top:42.5%} #mainVisualCon .visual-txt-con h2 {font-size:6rem; color:#fff; font-weight:600; line-height:1.3;} #mainVisualCon .visual-txt-con h4 {font-size:2.6rem; color:#fff; font-weight:400; margin-top:2rem; padding-top:2rem; border-top:1px solid #fff; width:100%;} #mainVisualCon .visual-txt-con h4 em { display: block; font-size: 2rem !important; font-weight: 700; } .main-visual-item { background-size: 110%; background-position: center center; } .visual-item01 { background-image:url('/wp-content/uploads/2024/11/main_visual01.jpg') } .visual-item02 { background-image:url('/wp-content/uploads/2024/11/main_visual02.jpg') } .main-visual-item.animate { animation:image-zoom-out 4s forwards; } @keyframes image-zoom-out { 0% { background-size: 120%; } 100% { background-size: 110%; } } /* animation 반응형 */ @media screen and (max-width: 1780px) { .main-visual-item { background-size: 130%; background-position: center center; } @keyframes image-zoom-out { 0% { background-size: 140%; } 100% { background-size: 130%; } } } @media screen and (max-width: 1500px) { .main-visual-item { background-size: 160%; background-position: center center; } @keyframes image-zoom-out { 0% { background-size: 170%; } 100% { background-size: 160%; } } } /* 텍스트 애니메이션 */ /* 얘가 있으면 왜 안되는지 다시 확인 .down-animation .char{ animation: text-down-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both; display:inline-block; } .up-animation .char{ animation: text-up-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both; display:inline-block; } */ /* 메인 비주얼 텍스트 애니메이션 */ .slick-active .down-animation .char{ animation: text-down-active-animation 2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both; display:inline-block; } .slick-active .up-animation .char{ animation: text-up-active-animation 2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both; display:inline-block; } @keyframes text-down-active-animation { from { opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateY(-50px); transform: translateY(-50px); } to { opacity:1.0;filter:Alpha(opacity=100); -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes text-up-active-animation { from { opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px); } to { opacity:1.0;filter:Alpha(opacity=100); -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes text-fade-out { from { opacity:1.0;filter:Alpha(opacity=100); } to { opacity:0;filter:Alpha(opacity=0); } } /************************************************** * MAIN VISUAL PROGRESS BAR * 메인 비주얼 프로그레스 바 ****************************************************/ .main-visual-controls { position: absolute; width: 100%; bottom: 48rem; z-index:9999;} .main-visual-controls .controls-area {max-width:1420px; margin:0 auto; position:relative;} .main-visual-controls .controls-area .arrow-btn {position:absolute; width:75px; height:75px; border:1px solid #fff; background-repeat:no-repeat; background-position:center; border-radius:50%; right:0} .main-visual-controls .controls-area .arrow-btn.prev-btn {background-image:url('/wp-content/uploads/2024/11/main_visual_prev_arrow.png'); right:90px;} .main-visual-controls .controls-area .arrow-btn.next-btn {background-image:url('/wp-content/uploads/2024/11/main_visual_next_arrow.png'); } .main-visual-controls .controls-area .arrow-btn:focus {background-color:transparent;} .main-visual-controls .controls-area .arrow-btn:hover {background-color:var(--main-color);}