* { font-family: "nanumsquareneo"; } .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:9999; 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: "nanumsquareneo"; } #header #nav .elementor-widget-container { padding: 0; } #header #nav .elementor-nav-menu > .menu-item > a { padding: 60px 35px; color: #fff; font-size: 1.8rem; font-weight: 300; } #header #nav .elementor-nav-menu > .menu-item > .sub-menu { width: 130% !important; } #header #nav .elementor-nav-menu > .menu-item > .sub-menu a { font-size: 15px; color: #4e4e4e; font-weight: 500; white-space:wrap; border:none; } #header #nav .elementor-nav-menu > .menu-item > .sub-menu .current-menu-item a { color: #fff; background:var(--main-color);} #header #nav .elementor-nav-menu > .menu-item > .sub-menu li:hover a { color: #fff; background:var(--main-color);} #header.active #nav .elementor-nav-menu > .menu-item > a {color:#000; font-weight:400;} #header.active #logo {display:none;} #header.active #logo_on {display:block;} /* 로고교체 */ #header #logo img {width: 100%; height: 12rem;} #header #logo_on img {width: 100%; height: 12rem;} /******************************************** * 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 .menu-item a {font-family: 'NanumSquare', 'Pretendard', sans-serif; font-weight:400; color:#fff; font-size:1.2rem; padding:0 1rem; position:relative;} #util .menu-item a::before {content:''; display:inline-block; position:absolute; width:2px; height:60%; top:25%; right:0; background:#ffffff7d; opacity:1;} #util .menu-item:last-child a::before {display:none;} #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;} #header.active #util .menu-item a {color:#000;} #header.active #util .util-list li a {color:#000;} #header.active #util .menu-item a::before {background:#0000004a;} #header.active #util #siteMap {filter:grayscale(100%) brightness(0%)} /******************************************** * 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: "nanumsquareneo"; 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%; } /******************************************** * SITEMAP SETTING * 사이트맵 셋팅 ********************************************/ #elementor-popup-modal-700,#elementor-popup-modal-2180 {backdrop-filter:blur(10px)} #elementor-popup-modal-700 .dialog-widget-content ,#elementor-popup-modal-2180 .dialog-widget-content {background-color:transparent !important;;} #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:'Pretendard'; font-size:3.0rem; color:#fff; font-weight:500; padding:2rem 0; text-align:left; position:relative; text-align:center;} #sitemapCon .sitemap-item .menu-tit h2:before {opacity:0; visibility:hidden; content:''; width:1rem; height:1rem; background:var(--sub-color); border-radius:50px; display:inline-block; position:absolute; top:0; left:-10px; z-index:-1; transform:translateY(-10px); transition:all 0.3s ease;} #sitemapCon .sitemap-item nav .elementor-nav-menu .menu-item > a { font-family:'Pretendard'; font-size:1.9rem; font-weight:500; color:#ffffff56; padding:1.5rem 1rem; flex-wrap:Wrap; text-align:center; display:block;} #sitemapCon .sitemap-item nav .elementor-nav-menu .menu-item > a > strong {display:block; width:100%;} #sitemapCon .sitemap-item nav .elementor-nav-menu .menu-item > a > span {font-weight:300; font-size:17px;} #sitemapCon .sitemap-item nav .elementor-nav-menu .menu-item.current-menu-item a { background:none; color:#fff; border:none;} #sitemapCon .sitemap-item nav .elementor-nav-menu .menu-item > a:hover { color:#fff; 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-700 .dialog-close-button svg,#elementor-popup-modal-2180 .dialog-close-button svg {fill:#fff; font-size:4.2rem;} html[lang=en-US] #sitemapCon .sitemap-item .menu-tit h2 {min-height:100px;} /******************************************** * 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: 60rem; background-position:center; /*background:#091925;*/ border-radius:0 0 50px 50px;} #subVisual > .e-con-inner { justify-content: end; } #subVisual #subTitle {} #subVisual #subTitle h2 { font-family:'nanumsquareneo'; font-size: 6.2rem; color: #fff; font-weight: 700; margin-bottom:15rem; opacity:0; transform:translateY(10px); transition:all 0.6s ease;} #subVisual #subText {margin-bottom:5rem;} #subVisual #subText h4 {font-family:'nanumsquareneo'; font-size:2.4rem; color:#fff; opacity:0.6; font-weight:300} #subVisual.page-on #subTitle h2 {opacity:1; transform:translateY(0)} /******************************************** * SUB MENU SETTING * 서브 메뉴 셋팅 ********************************************/ #subVisual #subMenu {transform:translateY(10px); opacity:0; transition:all 0.6s ease; } #subVisual #subMenu .elementor-element { max-width: var(--max-container); width: 100%; } #subVisual #subMenu ul.elementor-nav-menu { width: 100%; flex-wrap: nowrap; justify-content:end;} #subVisual #subMenu ul.elementor-nav-menu li { transition: all 0.3s ease; } #subVisual #subMenu ul.elementor-nav-menu li a { font-family: "nanumsquareneo"; padding: 25px 0 25px 40px; font-size: 21px; font-weight: 500; color: #ffffff7a; position: relative; display: inline-block; text-align: center; transition: all 0.3s ease; } #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 { } #subVisual #subMenu ul.elementor-nav-menu li.current-menu-item a, #subVisual #subMenu ul.elementor-nav-menu li.current-page-ancestor a { color: #fff; font-weight:600;} #subVisual #subMenu ul.elementor-nav-menu li:hover { } #subVisual #subMenu ul.elementor-nav-menu li:hover a { color: #fff; } #subVisual.page-on #subMenu {opacity:1; transform:translateY(0)} /******************************************** * 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:108rem;} /* 풀페이지에만 사용 */ /* .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:100%; } .main-visual-item .container { height: 100%; } .main-visual-img { position:absolute; width:100%; height:100%; transform:scale(1.08); background-size:cover; transition:all 1s ease;} #mainVisualCon .main-visual-txt-con {width:100%; height:100%; position:relative;} #mainVisualCon .main-visual-txt-con .line {position:absolute; width:37%; height:1px; background:#ffffff78; top: 35%; } #mainVisualCon .visual-area {max-width:var(--max-container); margin:0 auto; width:100%; height:100%; position:relative;} #mainVisualCon .visual-txt-con {width:100%; position:absolute; text-align:right; top: 31%;} #mainVisualCon .visual-txt-con { } #mainVisualCon .visual-txt-con h2 {font-size:6.6rem; color:#fff;} #mainVisualCon .visual-txt-con .txt1 {margin-right:24rem;} .main-visual-item.slick-active .main-visual-img {transform:scale(1); animation:image-zoom-out 8s 0s forwards; } @keyframes image-zoom-out { from { transform: scale(1.08,1.08) } to { transform: scale(1.0,1.0) } } #mainVisualCon .slick-dots {position:absolute; display:flex; justify-content:space-between; bottom:24rem; width:1520px;; left:calc(calc(100% - 1520px) / 2); z-index:9990;} #mainVisualCon .slick-dots li {margin:0 0.5rem;} #mainVisualCon .slick-dots li button {font-size:0; width:1rem; height:1rem; background:#8d8e90; border-radius:50px; padding:0; border:none;} #mainVisualCon .slick-dots li.slick-active button {width:3rem; background:#fff;} #mainVisualCon .slick-dots li {width:31%; border-top:2px solid #ffffff52;} #mainVisualCon .slick-dots li.slick-active {border-color:#fff;} #mainVisualCon .dots-con {padding-top:2rem;} #mainVisualCon .dots-con .num {font-size:1.4rem; color:#fff; font-weight:500;} #mainVisualCon .dots-con .txt {font-size:1.4rem; color:#fff; font-weight:300; margin-top:5px;} #mainVisualCon .main-scroll-down-con {position:absolute; width:100%; text-align:center; bottom:3rem; z-index:999;} #mainVisualCon .main-scroll-down-con p {color:#fff; font-size:1.4rem;} #mainVisualCon .main-scroll-down-con i {font-size:1.4rem; color:#fff;} /************************************************** * SUB COMMON * 서브 공통 ****************************************************/ .cm-sub-con {margin:10rem 0;} .cm-sub-con:last-child {margin:10rem 0 0;} .bg-con {padding:10rem 0; background:#f9f9f9;} .cm-table-style-01 table tr th {background: #f4f4f4 !important; font-size: 2rem; color: #222; border-color: #ddd; } .cm-table-style-01 table tr td {background:#fff !important; } .cm-table-style-02 table tr th {background: #f4f4f4 !important; font-size: 2rem; color: #222; border-color: #ddd; } .cm-table-style-02 table tr td {background:#fff !important; } @media screen and (max-width:1400px) { #subVisual > .e-con-inner {padding:0 10px;} } @media screen and (max-width:1024px) { #sitemapBtn {display:none;} /* 모바일 메뉴 버튼 */ #header #menu-wrap .elementor-menu-toggle {background:#ffffff3b} /* 모바일 토글 메뉴 */ /* 1차 메뉴 */ #header #nav .elementor-nav-menu > .menu-item > a {color:#000; font-size:1.7rem; padding:20px;} /* 1차 메뉴 active */ #header #nav .elementor-nav-menu > .menu-item.current-menu-ancestor, #header #nav .elementor-nav-menu > .menu-item.current-menu-item {background:var(--main-color);} #header #nav .elementor-nav-menu > .menu-item.current-menu-ancestor > a, #header #nav .elementor-nav-menu > .menu-item.current-menu-item > a {color:#fff;} /* 2차 메뉴 */ #header #nav .elementor-nav-menu > .menu-item > .sub-menu {width:100% !important;} #header #nav .elementor-nav-menu > .menu-item > .sub-menu a {justify-content: start; text-align:left; font-size:14px; padding:20px; color: #777;} #header #nav .elementor-nav-menu > .menu-item > .sub-menu > li:hover a, #header #nav .elementor-nav-menu > .menu-item > .sub-menu > li.current-menu-item a {background:var(--main-color); color:#fff;} /* 스크롤 다운 (header active) */ #header.active #nav .elementor-nav-menu > .menu-item > a.elementor-item-active, #header #nav .elementor-nav-menu > .menu-item > a.highlighted {background:var(--main-color); color:#fff;} } @media screen and (max-width:767px) { .cm-table-style-01, .cm-table-style-02 {overflow-x:scroll;} } @media screen and (max-width:1300px) { #header {padding:0 2rem;} .header-left-con {width: auto;} #header #nav .elementor-nav-menu>.menu-item>a {padding: 1.5rem; font-size: 1.6rem;} #header #logo img,#header #logo_on img {height: 10rem; width: 16rem;} #util {width: auto !important; gap: 1.5rem;} #util nav ul {flex-flow: row nowrap;} #nav ul {flex-flow: row nowrap;} #mainVisualCon {height: 65rem;} #mainVisualCon .slick-dots {flex-flow: row wrap; width: 95%; left: 50%; bottom: 10rem; transform: translateX(-50%);} #mainVisualCon .visual-txt-con h2 {font-size: 4.5rem;} #mainVisualCon .main-scroll-down-con {bottom: 1.5rem;} #mainVisualCon .main-scroll-down-con p,#mainVisualCon .main-scroll-down-con i {font-size: 1.2rem;} #sitemapCon .sitemap-item .menu-tit h2 {font-size: 2rem; padding: 0;} #sitemapCon .sitemap-item nav .elementor-nav-menu .menu-item>a {font-size: 1.6rem; padding: 1.5rem 0;} #sitemapCon .sitemap-item {padding: 0;} /* subpage */ #subVisual {height: 50rem;} #subVisual #subTitle h2 {font-size: 4.8rem;} #subVisual #subMenu ul.elementor-nav-menu li a {padding: 2rem; font-size: 1.8rem;} #subVisual #subMenu ul.elementor-nav-menu {flex-flow: row wrap;} } @media screen and (max-width:1024px) { #siteMap {display: none;} .header-left-con {gap: 1rem;} .elementor-menu-toggle {background-color: rgb(229 229 229);} .elementor-nav-menu--dropdown.elementor-nav-menu__container {margin-top: 5rem;} #header.active #nav .elementor-nav-menu > .menu-item > a, #header #nav .elementor-nav-menu>.menu-item>a {font-weight: 500;} .elementor-nav-menu--dropdown .elementor-nav-menu {max-height: calc(100dvh - 16rem);} #mainVisualCon {height: 50rem;} #mainVisualCon .visual-txt-con {top: 35%;} #mainVisualCon .visual-txt-con h2 {font-size: 3.2rem;} #mainVisualCon .main-visual-txt-con .line {display: none;} #mainVisualCon .visual-txt-con .txt1 {margin-right: 0;} #mainVisualCon .dots-con {padding: 1rem 0; display: flex; gap: 1rem; align-items: center;} #mainVisualCon .dots-con .txt {margin-top: 0;} #mainVisualCon .slick-dots {bottom: 6rem; width: 100%; padding: 0 2rem;} #mainVisualCon .slick-dots li {width: 100%; margin: 0;} /* subpage */ #subContent {padding: 8rem 0;} .sub-title-con h2 {font-size: 2.8rem;} .cm-sub-con {margin: 8rem 0;} .cm-sub-con:last-child {margin: 8rem 0 0;} #subVisual {height: 37rem;} #subVisual #subTitle h2 {font-size: 3.2rem; margin-bottom: 10rem;} #subVisual #subMenu ul.elementor-nav-menu li a {padding: 1rem; font-size: 1.5rem;} .bg-con {padding: 8rem 0;} .lions-info-ceo-tit h2 {font-size: 2.8rem;} } @media screen and (max-width:767px) { #subVisual {border-radius: 0 0 3rem 3rem;} #mainVisualCon .visual-txt-con {top: 40%;} #mainVisualCon .visual-txt-con {text-align: left;} #mainVisualCon .visual-txt-con h2 {font-size: 2.4rem;} #subVisual #subTitle h2 {font-size: 2.4rem; margin-bottom: 8rem;} /* subpage */ .cm-sub-con:last-child {margin: 6rem 0 0;} .lions-info-ceo-tit h2 {font-size: 2rem;} .sub-title-con h2 {font-size: 2.1rem;} } @media screen and (max-width:650px) { #header {background-color: #00000050;} #header #logo img,#header #logo_on img {height: 8rem; width: 12.8rem; object-fit: contain;} #header > .e-con-inner {gap: 1rem;} #logo, #logo_on, .header-left-con {width: 100%;} #util .menu-item a {padding: 0 0.8rem;} #util .menu-item:nth-of-type(1) a {padding: 0; padding-right: 0.8rem;} #util .menu-item a::before {width: 1px; height: 50%;} .elementor-nav-menu--dropdown.elementor-nav-menu__container {margin-top: 2rem} #subVisual #subTitle h2 {margin-bottom: 3rem;} } @media screen and (max-width:450px) { #mainVisualCon .visual-txt-con h2 {font-size: 1.8rem;} #mainVisualCon .dots-con .num,#mainVisualCon .dots-con .txt {font-size: 1.3rem;} #subVisual #subTitle h2 {font-size: 2.1rem; font-weight: 600; margin-bottom: 2rem;} /* subpage */ #subContent {padding: 5rem 0;} .cm-sub-con {margin: 5rem 0;} .cm-sub-con:last-child {margin: 5rem 0 0; } .sub-title-con h2 {font-size: 1.8rem;} .greeting-txt-con p {font-size: 1.5rem;} .greeting-con .ceo-img img {object-fit: contain; width: 15rem;} .greeting-con .ceo-name .sign img {object-fit: contain; width: 8rem;} .lions-info-top-con .img-con {padding: 3rem 0;} .lions-info-top-con .img-con img {object-fit: contain; width: 8rem; height: 8rem;} .lions-info-top-con .txt-con .tit {font-size: 1.7rem;} .lions-info-top-con .txt-con p {font-size: 1.5rem;} .lions-info-list dl {padding: 1.5rem;} .lions-info-list dl dt {font-size: 1.6rem;} .lions-info-list dl dd{font-size: 1.4rem;} .lions-info-ceo-tit h2{font-size: 1.8rem;} .lions-info-ceo-row{margin-bottom: 3rem;} .lions-info-ceo-row .left-con .tit{font-size: 1.6rem;} }