* { 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; width:100%; border-bottom:1px solid #ffffff30; z-index:9999; transition: all 0.3s ease; } #header.active {background:linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); border-bottom:transparent;} #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: 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 Utility Setting * 헤더 유틸리티 셋팅 ********************************************/ #util {width:26rem;} #util .e-con-inner, #util .e-con-inner .elementor-element {width:100%;} #util .header-util-box {display:flex; align-items:center; justify-content:space-between;} #util .header-util-box .call-box {position:relative; display:flex; align-items:center;} #util .header-util-box .call-box i {width:2.4rem; height:2.4rem; display:inline-block; position:absolute; } #util .header-util-box .call-box i.active {opacity:0; visibility:hidden;} #util .header-util-box .call-box p {font-size:2rem; color:#fff; padding-left:4rem;} #util .sitemap-line-btn {width:3rem; height:3rem; display:flex; flex-direction:column; justify-content:center; align-items:end; background:transparent;} #util .sitemap-line-btn .line {height:3px; background:#fff; display:inline-block; margin:3px 0; border-radius:50px;} #util .sitemap-line-btn .line1 {width:3rem;} #util .sitemap-line-btn .line2 {width:2.5rem;} #util .sitemap-line-btn .line3 {width:2rem;} /******************************************** * 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 * 사이트맵 세팅 ********************************************/ #elementor-popup-modal-358 .elementor-358 {height:100%;} #elementor-popup-modal-358 .elementor-358 > .elementor-element {height:100%; width:100%; align-items:end;} #elementor-popup-modal-358 .sitemap-menu {width:40%; height:100%; padding:5rem; background:#00000050; backdrop-filter:blur(20px)} #elementor-popup-modal-358 .sitemap-menu .e-con-inner {justify-content:center; } #elementor-popup-modal-358 .sitemap-menu .menu-item {margin:2rem 0;} #elementor-popup-modal-358 .sitemap-menu .menu-item a {position:relative; font-size:3rem; color:#fff; display:inline-block; margin:2rem 0; line-height:1.5; font-weight:400; transition:all 0.3s ease} #elementor-popup-modal-358 .sitemap-menu .menu-item a:before {content:''; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#fff; opacity:0; visibility:hidden; transition: all 0.3s ease;} #elementor-popup-modal-358 .sitemap-menu .menu-item a:hover:before {opacity:1; visibility:visible;} #elementor-popup-modal-358 #sitemapCard {position:absolute; left:10rem; bottom:15rem; width:45rem;} #elementor-popup-modal-358 #sitemapCard .sitemap-card-con {background:#8e683e61; padding:5rem; backdrop-filter: blur(20px); border-radius:5px;} #elementor-popup-modal-358 #sitemapCard .sitemap-card-con p {font-size:2.4rem; color:#fff; font-weight:600; margin-bottom:2rem;} #elementor-popup-modal-358 #sitemapCard .sitemap-card-con .contact-info dl {display:flex; flex-wrap:wrap; margin:1rem 0;} #elementor-popup-modal-358 #sitemapCard .sitemap-card-con .contact-info dl dt {font-size:1.8rem; color:#fff; font-weight:600; width:3rem; } #elementor-popup-modal-358 #sitemapCard .sitemap-card-con .contact-info dl dd {font-size:1.8rem; color:#fff;} /******************************************** * 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: 40rem; background-position:center; background-size:cover;} #subVisual > .e-con-inner { justify-content: center; } #subVisual #subTitle h2 { font-family:'Pretendard'; font-size: 5.2rem; color: #fff; font-weight: 700;} #subVisual #subText h4 {font-family:'Pretendard'; font-size:2.4rem; color:#ffffff6e; font-weight:300} /******************************************** * 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; } /******************************************** * 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;} .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%; background-size:cover; background-position:center;} #mainVisualCon .main-visual-txt-con {max-width:1660px; margin:0 auto; height:100%;} #mainVisualCon .visual-txt-con { position:relative; height:100%; display:flex; flex-direction:column; justify-content: center; align-items: start; } #mainVisualCon .main-visual-tit {font-family:'Cormorant Infant'; font-size:8.6rem; color:#fff; font-weight:700; width:100%; display:inline-block; position:relative;} #mainVisualCon .main-visual-tit:after {content:''; position:absolute; width:49%; height:1px; background:#fff; right:0; top:50%;} #mainVisualCon .main-visual-tit2 {width:100%; text-align:right; font-size:2.6rem; color:#fff; font-weight:200;} #mainVisualCon .main-visual-tit2 strong {font-weight:700;} #mainVisualCon .main-visual-txt {font-size:2.6rem; color:#fff; font-weight:200;} /************************************************** * MAIN CONTROLS * 메인 비주얼 컨트롤 ****************************************************/ .main-visual-controls { position: absolute; width: 100%; bottom: 10rem; z-index:9998;} .main-visual-controls .controls-area {display:flex; align-items:center; max-width:var(--max-container);margin:0 auto;} .main-visual-controls .main-play-pause-box {width:6rem; height:6rem; position:relative;} .main-visual-controls .play-pause-circle {position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer; z-index:5;} .main-visual-controls .play-pause-circle svg {fill:rgba(0,0,0,0); stroke:#fff; stroke-dasharray:310; stroke-width:1px; width:100%; height:100%;} .main-visual-controls .play-pause-circle svg.bg {opacity:0.5; stroke-dashoffset:0;} .main-visual-controls .play-pause-circle svg.progressing {position:absolute; top:50%; left:50%; stroke:var(--point-color2); stroke-width:4px; stroke-dashoffset:310; transform:translate(-50%, -50%) rotate(-90deg);} .main-visual-controls .play-pause-circle .progressing.active {animation: circleSpin 8s 0.2s ease} .main-visual-controls .play-pause-btn {position:absolute; top:0; width:100%; height:100%; display:flex; align-items: center; justify-content: center; z-index:99;;} .main-visual-controls .play-pause-btn button {width:11px; height:12px; border-radius:0; background-position:center; background-repeat:no-repeat;} .main-visual-controls .play-pause-btn button:hover {background-color:transparent;} .main-visual-controls .play-pause-circle.pause .progressing {animation-play-state:paused} .main-visual-controls .play-pause-btn button.main-visual-play-pause-btn {display:none} .main-visual-controls .play-pause-btn button.main-visual-play-pause-btn.show {display:block} @keyframes circleSpin { 5%{ stroke-dashoffset:310 } 100% { stroke-dashoffset:0 } } .main-visual-controls .main-paging-con {margin-left:2rem;} .main-visual-controls .main-paging-con .slick-dots {display:flex; flex-wrap:wrap;} .main-visual-controls .main-paging-con .slick-dots li {margin:0 1rem; font-size:1.8rem; color:#ffffff70; font-weight:600; cursor:pointer;} .main-visual-controls .main-paging-con .slick-dots li.slick-active {color:#fff;} /************************************************** * VISUAL SCROLL DOWN * 메인 스크롤 다운 ****************************************************/ .main-scroll-down-con {position:absolute; right:13rem; bottom:11rem; width:12rem; height:12rem; border-radius:50%; animation: scrollDown 5s infinite ease; z-index:9998; } .main-scroll-down-con .inner {padding:1rem; width:100%; height:100%;} .main-scroll-down-con .scroll-down {width:100%; height:100%; border:1px dashed #ffffff85; border-radius:50%; display:flex; flex-direction:column; text-align:center; justify-content:center;} .main-scroll-down-con .scroll-down i {font-size:3rem; color:#fff;} .main-scroll-down-con .scroll-down p {font-size:1.8rem; color:#fff; font-weight:400; margin-top:1rem;} @keyframes scrollDown { 0%{ background:#00000010 } 50% { background:#8e683eb0 } 100%{ background:#8e683e57 } } /************************************************** * SUB COMMON * 서브 공통 ****************************************************/ .hide-menu {display:none;} .cm-sub-con {margin:10rem 0;} .bg-con {padding:10rem 0; background:#f4f4f4;} .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:1700px) { #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;} #header #nav .elementor-nav-menu > .menu-item > a{padding: 30px !important;} #header #nav .elementor-nav-menu > .menu-item > a:hover {background:var(--point-color); 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;} */ } @media screen and (max-width:767px) { .cm-table-style-01, .cm-table-style-02 {overflow-x:scroll;} #mainVisualCon {height:60rem !important;} } /*반응형*/ @media screen and (max-width:1700px) { #header{padding: 0 2rem;} #mainVisualCon .main-visual-txt-con{padding: 0 2rem;} #mainVisualCon .main-visual-tit{font-size: 7.6rem;} #mainVisualCon .main-visual-txt{font-size: 2.4rem;} #mainVisualCon .main-visual-tit2{font-size: 2.4rem;} .main-scroll-down-con{right: 2rem; bottom: 6rem;} .main-visual-controls{bottom: 6rem; padding: 0 2rem;} .container{padding: 0 2rem;} } @media screen and (max-width:1500px) { #mainVisualCon .main-visual-tit:after{width: 45%;} .main-product-con .detail-box .thumb-img-box{width: 26rem;} } @media screen and (max-width:1280px) { #header #nav .elementor-nav-menu > .menu-item > a{padding: 40px;} #mainVisualCon .main-visual-tit:after{width: 36%;} } @media screen and (max-width:1024px) { #header{padding: 1rem 2rem;} #nav{background-color: #eee;} #util{width: auto;} #util .sitemap-line-btn{display: none;} #mainVisualCon .main-visual-tit{font-size: 6.2rem;} #mainVisualCon .main-visual-tit:after{width: 32%;} #mainVisualCon .main-visual-txt{font-size: 2.2rem;} .menu-wrap{flex-direction: row-reverse !important; justify-content: end; width: auto;} #util .header-util-box{justify-content: end;} } @media screen and (max-width:767px) { .f-logo img{width: 140px;} .footer-con .footer-bottom-con .footer-police-con a{text-align: left; margin-top: 2rem; margin-bottom: 1rem;} .footer-con .footer-bottom-con .info-detail dl{flex-wrap: nowrap;} .logo-img img{width: 140px;} #util{padding-right: 2rem;} #util .header-util-box .call-box p{display: none;} #mainVisualCon .main-visual-tit:after{display: none;} #mainVisualCon .main-visual-tit2{text-align: left;} .main-visual-controls{bottom: 4rem;} .main-scroll-down-con{display: none;} #mainVisualCon .main-visual-tit{font-size: 4.8rem; line-height: 1;} #mainVisualCon .main-visual-tit2{font-size: 2rem; margin-top: 1rem;} #mainVisualCon .main-visual-txt{font-size: 1.6rem; margin-top: 3rem;} } @media screen and (max-width:500px) { } /*서브*/ @media screen and (max-width:1280px) { #subVisual > .e-con-inner{padding: 0 2rem;} #subVisual #subTitle h2{font-size: 4.2rem;} #subVisual #subText h4{font-size: 2rem;} .sub-title-con h2{font-size: 4rem;} .sub-title-con{margin-bottom: 3rem;} } @media screen and (max-width:1024px) { .cm-sub-con{margin: 6rem 0;} #gallery-style02-list .gallery-style02-list .kboard-list-item{width: 48%;} } @media screen and (max-width:767px) { .bg-con{padding: 6rem 0;} #subVisual{height: 32rem;} #subVisual > .e-con-inner{margin-top: 5rem;} #subVisual #subTitle h2{font-size: 3.6rem;} #subVisual #subText h4{font-size: 1.8rem; line-height: 1.4;} .sub-title-con h2{font-size: 3.2rem;} #gallery-style02-list .gallery-style02-list .kboard-list-item{width: 100%;} .company-top-banner-con.cm-sub-con{margin: 0;} }