* { 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; left:0; top:0; z-index:9999; transition: all 0.3s ease; } #header.active {background:#fff; box-shadow:3px 3px 12px #00000014} #header #logo-on { display: none; } #header #sitemap-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: 40px 50px; color: #fff; font-size: 1.8rem; font-weight: 400; } #header #nav .elementor-nav-menu > .menu-item > a .sub-arrow {display:none;} #header #nav .elementor-nav-menu > .menu-item > .sub-menu { width: 100% !important; } #header #nav .elementor-nav-menu > .menu-item > .sub-menu a { font-size: 16px; color: #4e4e4e; font-weight: 700; white-space:wrap; border:none; } #header #nav .elementor-nav-menu > .menu-item > .sub-menu .current-menu-item a { color: #fff; } #header #nav .elementor-nav-menu > .menu-item > .sub-menu li:hover a { color: #fff; } /******************************************** * 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 #headerSearch {margin-right:2rem;} #util #headerSearch .e-search-input-wrapper input {background:#3d373780; backdrop-filter:blur(20px); padding:1rem 2rem; height:auto; min-height:auto; border-radius:25px; border:none; font-size:16px; color:#fff; font-weight:400;} #util #headerSearch .e-search-input-wrapper input::placeholder {color:#fff; font-size:14px;} #util #headerSearch .e-search-submit {padding:10px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;} #util #headerSearch .e-search-submit span {font-size:0; position:relative; display:inline-block; } #util #headerSearch .e-search-submit span:before {content:'\e97a'; font-family:'Xeicon'; font-size:2rem; color:#fff;} #util #headerSearch .e-search-submit:hover {background:var(--main-color);} #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 #logo-on { display: block } #header.active #logo-off { display: none } #header.active #sitemap-on { display: block } #header.active #sitemap-off { display: none } #header.active #nav .elementor-nav-menu > .menu-item > a {color:#000;} #header.active #util .util-list li a {color:#000;} #header.active #util .sitemap-con .sitemap-icon .row {background:#000;} /******************************************** * FULLPAGE SETTING * FULLPAGE 플러그인 사용시에만 사용하도록 !! * 풀페이지 네비게이션 세팅 ********************************************/ #fp-nav.right { left: auto !important; right:70px !important} #fp-nav.right > ul > li { width: auto; height: auto; margin: 0rem 0; display: flex; align-items: center; width:14rem; flex-direction:row-reverse; border-radius:25px; padding:1rem 2rem;;} #fp-nav.right > ul > li > a {width:8px; height:8px;} #fp-nav.right > ul > li > a > span { background: transparent; border: 2px solid #fff; width: 8px; height: 8px; margin: 0; left: 0; top: 0; } #fp-nav.right > ul > li > a.active > span, #fp-nav.right > ul > li:hover > a > span, #fp-nav.right > ul > li:hover > a.active > span { background: #fff; width: 8px; height: 8px; margin: 0; left: 0; top: 0; } #fp-nav.right > ul > li > .fp-tooltip { font-size: 1.6rem; color: var(--main-color); font-weight: 600; font-family: "Pretendard"; position: relative; overflow: visible; width: auto; right:auto; top:0; margin-right:2rem;} #fp-nav.right.active > ul > li > a > span { border-color: var(--main-color) } #fp-nav.right.active > ul > li.active {background:var(--main-color);} #fp-nav.right.active > ul > li.active > a > span {background:#fff; border-color:#fff;} #fp-nav.right.active > ul > li > .fp-tooltip {color:#fff;} #fp-nav.right > ul > li.active {background:#fff;} #fp-nav.right > ul > li.active > .fp-tooltip {opacity:1;} #fp-nav.right > ul > li.active > a > span { background: var(--main-color); border-color:var(--main-color);} /******************************************** * FULLPAGE SETTING * FULLPAGE 플러그인 사용시에만 사용하도록 !! * 풀페이지 메인페이지 세팅 ********************************************/ .section .fp-tableCell .elementor-element, .section .fp-tableCell .elementor-element .elementor-widget-container { height: 100%; } .to-top-btn {position:fixed; bottom:5rem; right:5rem; } .to-top-btn .top-btn {background:var(--main-color); bottom:0; left:0; width:60px;height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.3s ease;} .to-top-btn .top-btn i {color:#fff; font-size:2.4rem;} .to-top-btn .top-btn:hover {background:var(--sub-color)} /******************************************** * 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: 100vh; background-position:center; justify-content:center; position:relative; background-attachment:fixed;} #subVisual #visualTitCon {text-align:center; ;} #subVisual #subTitle h2 { font-family:'Pretendard'; font-size: 8.2rem; color: #fff; font-weight: 700; margin-bottom:2rem;} #subVisual #subText {} #subVisual #subText h4 {font-family:'Montserrat'; font-size:2.4rem; color:#ffffff99; font-weight:600} /******************************************** * SUB MENU SETTING * 서브 메뉴 셋팅 ********************************************/ #subMenuCon {position:sticky; width:100%; left:0; top:10rem; background:#666; backdrop-filter:blur(20px); background-size:cover; z-index:999;} #subMenuCon ul.menu { width: 100%; display:flex; justify-content:center; flex-wrap:nowrap;} #subMenuCon ul.menu li { width: 100%; flex-grow:1; transition: all 0.3s ease; } #subMenuCon ul.menu li a { font-family: "Pretendard"; width:100%; padding: 2.5rem 1rem; font-size: 18px; font-weight: 500; color: #fff; position: relative; display: inline-block; text-align: center; transition: all 0.3s ease; } #subMenuCon ul.menu li a:after { content: ""; position: absolute; width: 1px; height: 50%; top: 50%; transform: translateY(-50%); background: #ffffff1c; right: 0; left: auto; opacity: 1; } #subMenuCon ul.menu li:last-child a:after { display: none; } #subMenuCon ul.menu li.current-menu-item, #subMenuCon ul.menu li.current-page-ancestor { background: var(--main-color); } #subMenuCon ul.menu li.current-menu-item a, #subMenuCon ul.menu li.current-page-ancestor a { color: #fff; } #subMenuCon ul.menu li:hover { background: var(--main-color); } #subMenuCon ul.menu li:hover a { color: #fff; } /******************************************** * 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:70rem;} /* 풀페이지에만 사용 */ /* .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%; } #visualVideo {width: 100vw; height: calc(72.25vw + 420px); min-height: calc(100vh + 17rem); min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;} #mainVisualCon .visual-area {max-width:var(--max-container); margin:0 auto; width:100%; height:100%;} #mainVisualCon .main-visual-txt-con {height:100%;} #mainVisualCon .visual-txt-con { position:relative; height:100%; display:flex; flex-direction:column; justify-content: center; align-items: start; } #mainVisualCon .visual-txt-con h2 {font-size:6rem; color:#fff; font-weight:700;} #mainVisualCon .visual-txt-con p {font-size:2.4rem; color:#fff; font-weight:400; margin-top:2rem;} .main-visual-video-con {position:relative; width:100%; height:100%; overflow:hidden;} .main-visual-video-controls {position:absolute; bottom:20rem; width:100%;} .main-visual-video-controls .visual-video-area {max-width:1340px; margin:0 auto;} .main-visual-video-controls .play-pause-circle {position:relative; width:100px; height:100px; cursor:pointer; z-index:5;} .main-visual-video-controls .play-pause-circle svg {fill:rgb(253 253 253 / 32%);width:100%; height:100%;} .main-visual-video-controls .play-pause-circle svg.bg {opacity:0.3; stroke-dashoffset:0;} .main-visual-video-controls .play-pause-circle svg.progressing {position:absolute; top:50%; left:50%; stroke:#fff; stroke-width:3px; stroke-dashoffset:310; transform:translate(-50%, -50%) rotate(-90deg);} .main-visual-video-controls .play-pause-btn {position:absolute; top:0; width:100%; height:100%; display:flex; align-items: center; justify-content: center; z-index: 5;} .main-visual-video-controls .play-pause-btn i {font-size:3rem; color:#fff;} .main-visual-video-controls .play-pause-btn .show {display: block !important; opacity: 1; z-index: 6;} /* #mainVisualCon .slick-dots {position:absolute; display:flex; justify-content:center; bottom:4rem; width:100%; z-index:9999;} #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;} */ /************************************************** * MAIN VISUAL PROGRESS BAR * 메인 비주얼 프로그레스 바 ****************************************************/ .main-visual-controls { position: absolute; width: 100%; bottom: 25rem; z-index:999;} .main-visual-controls .controls-area {max-width:1300px; margin:0 auto;} .main-visual-controls .controls-area .main-play-pause-box {display:inline-block; width:8rem; height:8rem; background:#ffffff30; border-radius:50%; display:flex; align-items:center; justify-content:center;} .main-visual-controls .controls-area .main-play-pause-box i {font-size:2rem; color:#fff;} /************************************************** * SUB COMMON * 서브 공통 ****************************************************/ .hide-menu {display:none;} .cm-sub-con {margin:10rem 0;} .bg-con {padding:10rem 0;} .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; } #sitemapCon .sitemap-left-con .elementor-element {height:100%; padding:20rem 8rem 15rem; position:relative; display:flex; flex-direction:column; justify-content:space-between;} #sitemapCon .sitemap-logo {position:absolute; top:10rem; left:10rem;} #sitemapCon .sitemap-slogan-txt-con .sitemap-slogan {font-size:4rem; color:#000; font-weight:600;} #sitemapCon .sitemap-footer-family-site {position:relative; display:inline-block; margin-bottom:2rem;} #sitemapCon .sitemap-footer-family-site button {border:1px solid #ddd; padding:1.5rem 6rem 1.5rem 4rem; border-radius:50px; background:#f4f4f4; position:relative; transition:all 0.3s ease;} #sitemapCon .sitemap-footer-family-site button em {font-family:'Montserrat'; font-size:1.6rem; font-weight:500; color:#555555; transition:all 0.3s ease;} #sitemapCon .sitemap-footer-family-site button em:before {content:'\e942'; font-family:'xeicon'; position:absolute; right:2rem; top:1.4rem; font-size:1.8rem; transition:all 0.3s ease;;} #sitemapCon .sitemap-footer-family-site .family-site-list {position:absolute; padding:1rem 2rem; display:inline-block; background:#f4f4f4; border-radius:5px; border:1px solid #eee; position:absolute; width:100%; bottom:100%; left:0; display:none;min-width: 23rem;} #sitemapCon .sitemap-footer-family-site .family-site-list li a {font-size:1.5rem; color:#000; padding:0.5rem 0rem; font-weight:300; display:inline-block;} #sitemapCon .sitemap-footer-copyright {font-size:1.7rem; color:#222; font-weight:300;} #sitemapCon .sitemap-police-con {display:flex; flex-wrap:wrap; flex-direction:column; margin:2rem 0;} #sitemapCon .sitemap-police-con a {font-size:1.6rem; font-weight:500; margin:1rem 0; color:#666} #sitemapCon .sitemap-footer-family-site button:hover {background:var(--side-color); } #sitemapCon .sitemap-footer-family-site button:hover em {color:#fff;} #sitemapCon .sitemap-footer-family-site button:hover em:before {color:#fff;} #sitemapCon .sitemap-right-con {background:#0a326f; padding:15rem 10rem; justify-content:space-between;} #sitemapCon .sitemap-menu-tit {width:15rem;} #sitemapCon .sitemap-menu-tit h4 {font-size:2rem; color:#fff; font-weight:400;} #sitemapCon .sitemap-menu .menu-item a {font-size:1.7rem; color:#ffffff96; font-weight:300; padding:1rem 2rem; transition:all 0.3s ease;} #sitemapCon .sitemap-menu .menu-item a:hover {color:#fff; font-weight:400; text-decoration:underline} #elementor-popup-modal-172.sitemap .menu-con nav .elementor-nav-menu .menu-item.current-menu-item a { background: var(--sub-color); color: #fff; } #elementor-popup-modal-172.sitemap .menu-con nav .elementor-nav-menu .menu-item > a:hover { background: var(--sub-color); color: #fff; } @media screen and (max-width:1680px){ #header #nav .elementor-nav-menu > .menu-item > a {padding:30px 20px;} #util #headerSearch {width:250px;} } @media screen and (max-width:1400px) { #subVisual > .e-con-inner {padding:0 10px;} } @media screen and (max-width:1380px){ #util {width:110px;} #util #headerSearch {width:75px; margin:0;} #util #headerSearch .e-search-input-wrapper {display:none;} #util #sitemap-off, #util #sitemap-on {width:50px;} #subVisual {height:60rem;} #subVisual #subTitle h2 {font-size:6.2rem;} #subVisual #subText h4 {font-size:2rem;} } @media screen and (max-width:1024px) { #header #nav {display:none;} #util {width:40%; justify-content:end; --widgets-spacing-column: 5px} #util #headerSearch {width:auto;} /* 모바일 메뉴 버튼 */ #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:16px; padding:20px;} #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;} #sitemapCon {flex-direction:column-reverse} #sitemapCon .sitemap-left-con {min-height:auto;} #sitemapCon .sitemap-left-con .elementor-element {padding:4rem 2rem 2rem} #sitemapCon .sitemap-logo {position:relative; top:0; left:0;} #sitemapCon .sitemap-slogan-txt-con .sitemap-slogan {font-size:3rem;} #sitemapCon .sitemap-right-con {padding:10rem 2rem 5rem; background:#142847; min-height:auto;} #sitemapCon .sitemap-row {margin-bottom:3rem;} #sitemapCon .sitemap-menu-tit {width:100%;} #sitemapCon .sitemap-menu .menu-item a {padding:1rem 2rem 1rem 0; font-size:1.6rem;} #subMenuCon {top:6.5rem;} #subMenuCon ul.menu {flex-wrap:wrap;} #subMenuCon ul.menu li {width:50%;} #subMenuCon ul.menu li a {font-size:1.6rem; padding:1.5rem 2rem;} #subMenuCon .container {padding:0;} #mainVisualCon.fp-section {height:60rem !important;} #visualVideo {min-width: 131.77vh; min-height: calc(101vh + 17rem);} .main-visual-video-controls {bottom:1rem; padding:0 20px;} .main-visual-video-controls .play-pause-circle {width:60px; height:60px;} .main-visual-video-controls .play-pause-circle svg {fill:rgb(0 0 0 / 32%)} } @media screen and (max-width:767px) { #header #logo-on, #header #logo-off {width:50%; text-align:left;} .cm-table-style-01, .cm-table-style-02 {overflow-x:scroll;} #mainVisualCon.fp-section {height:50rem !important;} #visualVideo {min-width:110.77vh; min-height:calc(101vh + 17rem);} #subVisual {height:35rem;} #subVisual #visualTitCon {margin-top:5rem;} #subVisual #subTitle h2 {font-size:4.2rem;} } @media screen and (max-width:600px){ #mainVisualCon.fp-section {height:25rem !important;} #visualVideo {min-width:59.77vh;} }