:root{ /* --mainColor : #fba012; --subColor : #FFCF50; */ --mainColor : #0f76bb; --subColor : #3b9649; --basic: rgba(0, 0, 0, .8); --lightFont: rgba(0, 0, 0, .5); --area-padding: 30px; --header-top: 0; --header-fixed-height: 100px; --header-height: 180px; --sub-visual-height: 600px; --sub-menu-height: 60px; --transition-custom: all 0.3s ease-in-out; --transition-custom2: all 0.8s ease-in-out; --font-family2 : 'Paperlogy-8ExtraBold', "Noto Sans KR", sans-serif; } .mainColor{color: var(--mainColor);} /* ======================================================== * SETTING ======================================================== */ @media all and (max-width:1280px){ :root{ --header-top: 0; --header-height: 90px; --header-fixed-height: 90px; } } @media all and (max-width:800px){ :root{ --area-padding: 5vw; --sub-visual-height: 450px; --sub-menu-height: 50px; } } /* ****************** HEADER ********************** */ #header{position:fixed; height:var(--header-height); top:var(--header-top); left:0; width:100%; z-index:9999; transition: top 0.3s ease-in-out, transform 0.5s ease-in-out, height 0.5s ease-in-out;} #headerInnerWrap{position:absolute; top:0px; left:0px; width:100%; height:var(--header-height); z-index:9999;} #headerInner{position:relative; display:flex; align-items:center; justify-content:space-between; height:var(--header-height); margin:0px auto; padding:0 110px 0 80px; transition: all 0.5s ease-in-out; transition-property: background-color, height;} #header .logo{position:relative; z-index:100;} #header .logo a{position: relative; display:block; height: 40px;} #header .logo img{position: absolute; top: 0; left: 0; display:block; height: 100%; transition:var(--transition-custom); max-width: none;} #header .logo .white-ver{visibility: visible; opacity: 1;} #header .logo .black-ver{visibility: hidden; opacity: 0;} .sub-wrap #header{top: 15px; top: var(--header-top);} .sub-wrap #header .logo .white-ver{visibility: hidden; opacity: 0;} .sub-wrap #header .logo .black-ver{visibility: visible; opacity: 1;} .sub-wrap #header .header-lang-list li:before{background-color: rgba(0,0,0,0.5);} .sub-wrap #header .header-lang-list li a{color:#000;} .sub-wrap #header .header-lang-list li a:after{background-color:#000;} .sub-wrap #header .nav-open-btn, .sub-wrap #header .sitemap-line-btn{border-color: rgba(0,0,0,0.2);} .sub-wrap #header .nav-open-btn i, .sub-wrap #header .sitemap-line-btn i{color: #000;} .sub-wrap #gnb > ul > li > a{color: #000;} /* -------- Header :: UTIL BOX -------- */ .header-util-box{position:relative; z-index:100; display: flex; align-items: center;} /* Header :: 언어선택 */ .header-lang-list ul{display: flex; align-items: center;} .header-lang-list li{position: relative; margin-left:20px;} .header-lang-list li:first-child{margin-left:0} .header-lang-list li:before{position: absolute; top: 2px; left: -10px; content: ''; width: 1px; height: 9px; background-color: rgba(255,255,255,0.5); transition:var(--transition-custom); transition-property:background-color;} .header-lang-list li:first-child:before{display: none;} .header-lang-list li a{display:block; position:relative; font-size:12px; font-weight:600; opacity:0.3; color:#fff; transition:var(--transition-custom);} .header-lang-list li a:after{ position:absolute; bottom:-8px; left:-2px; right:-2px; height:2px; background-color:#fff; content:""; transform:scaleX(0); transition:var(--transition-custom); transition-property: transform; transform-origin:100% 0; } .header-lang-list li.cur a, .header-lang-list li a:hover{opacity:1.0;} .header-lang-list li a:hover:after{transform:scaleX(1); transform-origin:0 0;} /* Header :: 사이트맵버튼 */ .sitemap-line-btn{margin-left:25px; width:72px; height:72px; border: 1px solid rgba(255,255,255,0.2); display:flex; align-items: center; justify-content: center; box-sizing:border-box; background-color: transparent; border-radius: 100%; text-align: center; position: relative;} .sitemap-line-btn:before{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ''; width: 0; height: 0; background-color: #000; border-radius: 100%; transition:var(--transition-custom);} .sitemap-line-btn i{position: relative; z-index: 1; font-size: 32px; color: #fff; transition:var(--transition-custom); transition-property: transform;} .sitemap-line-btn:hover:before{width: 72px; height: 72px;} .sitemap-line-btn:hover i{transform: rotate(90deg); color: #fff !important;} .sitemap-line-btn.active:before{width: 5000px; height: 5000px; transition: all 0.8s ease-in-out;} .sitemap-line-btn.active i{opacity: 0;} @media all and (min-width:1921px){ .sitemap-line-btn.active:before{width: 10000px; height: 10000px; transition: all 1s ease-in-out;} } @media all and (max-width:1920px){ .sitemap-line-btn.active:before{width: 5000px; height: 5000px;} } /* Header :: 페이지 이동버튼 */ .header-page-btn{ position: relative; } .header-page-btn + .header-page-btn{ margin-left: 10px; } .header-page-btn a {display: flex; align-items: center; color: #fff; border: 2px solid #fff; padding: 4px 12px 6px; transition:var(--transition-custom); border-radius: 30px; font-size: 14px;} .header-page-btn a:hover{background-color: var(--mainColor); color: #fff;} .header-page-btn a img{max-width: 22px; width: 100%; filter: invert(1); transition:var(--transition-custom);} .header-page-btn.ico a {border-radius: 100%; padding: 10px;} /* -------- Header :: GNB(PC) -------- */ .gnb-overlay-bg{position:fixed; top:0; left:0; width:100%; height:100%; visibility:hidden; opacity:0; background:rgba(0,0,0,0.5); z-index:9997; transition:var(--transition-custom); } /* gnb overlay BG */ .gnb-overlay-bg.open{visibility:visible; opacity:1.0;} #gnb{position:absolute; text-align:center; top:0; left:0px; width:100%; /* z-index:99; */} #gnb > ul{display:inline-block;} #gnb > ul > li{position:relative; float:left; word-break:keep-all;} #gnb > ul > li > a{ position:relative; z-index:100; display:block; line-height:var(--header-height); padding:0 25px; text-align:center; color:#fff; font-size:17px; font-weight:500; transition: all 0.5s ease-in-out; transition-property: line-height; } #gnb > ul > li > a:hover, #gnb > ul > li > a:focus{/* color:var(--mainColor); */ font-weight: bold; } /* GNB :: 2차 각각메뉴 */ #gnb.each-menu > ul > li .gnb-2dep{ /* display:none; */ position:absolute; top: calc(var(--header-fixed-height) + 20px); left: 50%; margin-left: -100px; z-index:999; width:200px; text-align:left; visibility:hidden; opacity:0;filter:Alpha(opacity=0); transition:all 0.2s cubic-bezier(0.4, 0, 1, 1); } #gnb.each-menu > ul > li .gnb-2dep:before{ content:""; position:absolute; top:0px; left:0px; right:0px; height:0; background-color:var(--mainColor); transition:all 0.2s cubic-bezier(0.4, 0, 1, 1); } #gnb.each-menu > ul > li .gnb-2dep ul{padding:15px 0px;} #gnb.each-menu > ul > li .gnb-2dep ul li{position:relative; padding:8px 10px; opacity:0; transition:all 0s 0s; } #gnb.each-menu > ul > li .gnb-2dep ul li a{display:block; color:#fff; font-size:14px; font-weight:400; text-align:center; line-height:1.4; /* opacity:0.9 */;} #gnb.each-menu > ul > li .gnb-2dep ul li a:hover{opacity:1.0;} /* over했을때 */ #gnb.each-menu > ul > li .gnb-2dep.open{visibility:visible; opacity:1.0;} #gnb.each-menu > ul > li .gnb-2dep.open:before{height:100%;} #gnb > ul > li .gnb-2dep.open ul li{opacity:1.0; transition:var(--transition-custom2);} /* #gnb > ul > li .gnb-2dep.open ul li:nth-child(1){transition-delay:0.1s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(2){transition-delay:0.2s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(3){transition-delay:0.3s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(4){transition-delay:0.4s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(5){transition-delay:0.5s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(6){transition-delay:0.6s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(7){transition-delay:0.7s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(8){transition-delay:0.8s;} */ /* -------- Header :: fixed -------- */ @media all and ( min-width: 1281px ){ #headerInner:before{position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8); backdrop-filter: blur(5px); visibility: hidden; opacity: 0; transition:var(--transition-custom);} #header.top-fixed #headerInnerWrap{position: fixed; z-index: 99;} #header.top-fixed #headerInner{border-bottom:1px solid rgba(0,0,0,0.05);} #header.top-fixed #headerInner:before{visibility: visible; opacity: 1;} #header.top-fixed .logo .white-ver{visibility: hidden; opacity: 0;} #header.top-fixed .logo .black-ver{visibility: visible; opacity: 1;} #header.top-fixed .header-lang-list li:before{background-color: rgba(0,0,0,0.5);} #header.top-fixed .header-lang-list li a{color:#000;} #header.top-fixed .header-lang-list li a:after{background-color:#000;} #header.top-fixed .header-page-btn a {border-color: rgba(0,0,0,0.2); color: rgba(0,0,0,0.7);} #header.top-fixed .header-page-btn a:hover{background-color: var(--mainColor); color: #fff;} #header.top-fixed .header-page-btn a img{filter: invert(0);} #header.top-fixed .header-page-btn a:hover img{filter: invert(1);} #header.top-fixed .nav-open-btn, #header.top-fixed .sitemap-line-btn{border-color: rgba(0,0,0,0.2);} #header.top-fixed .nav-open-btn i, #header.top-fixed .sitemap-line-btn i{color: #000;} #header.top-fixed #gnb{/* z-index: 0; */} #header.top-fixed #gnb > ul > li > a{color: #000;} } /* -------- Header :: hidden -------- */ #header.top-fixed, #header.top-fixed #headerInnerWrap, #header.top-fixed #headerInner{height: var(--header-fixed-height);} #header.top-fixed #gnb > ul > li > a{line-height:var(--header-fixed-height);} #header.top-fixed #gnb.each-menu > ul > li .gnb-2dep{top:calc(var(--header-fixed-height) - 20px);} /* #header.top-fixed.scroll-up .nav-open-btn-box{transform: translateY(0);} #header.top-fixed.scroll-up #headerInnerWrap{top: 0; transform: translateY(0);} #header.top-fixed.scroll-down .nav-open-btn-box{transform: translateY(calc(-1 * var(--header-height)));} #header.top-fixed.scroll-down #headerInnerWrap{top: 0; transform: translateY(calc(-1 * var(--header-height)));} */ /* -------- Header :: sitemap-open -------- */ @media all and ( min-width: 1281px ){ #header.sitemap-open #gnb{opacity: 0;} } /* -------- Header :: GNB(Mobile) -------- */ .nav-open-btn-box{display:none;} #gnbM{display:none} /* ****************** HEADER ********************** */ @media all and (max-width:1620px){ #headerInner{padding: 0 20px;} #gnb > ul{/* margin-left: 80px; */} } @media all and ( max-width: 1280px ){ #header{visibility: visible; opacity: 1;} .sub-wrap #header{top: 0;} #headerInnerWrap{position:fixed; z-index:99;} /* #header .logo a{height:46px;} */ #header .logo a{height:30px;} .header-page-btn a {border:1px solid #fff; } #header.top-fixed #headerInner{background-color: rgba(255,255,255,0.8); backdrop-filter: blur(5px); border-bottom:1px solid rgba(0,0,0,0.05);} #header.top-fixed .logo .white-ver{visibility: hidden; opacity: 0;} #header.top-fixed .logo .black-ver{visibility: visible; opacity: 1;} #header.top-fixed .header-lang-list li:before{background-color: rgba(0,0,0,0.5);} #header.top-fixed .header-lang-list li a{color:#000;} #header.top-fixed .header-lang-list li a:after{background-color:#000;} #header.top-fixed .header-page-btn a {border:1px solid rgba(0,0,0,0.2); color: rgba(0,0,0,0.9);} #header.top-fixed .header-page-btn a:hover{background-color: var(--mainColor); color: #fff;} #header.top-fixed .header-page-btn a img{filter: invert(0);} #header.top-fixed .header-page-btn a:hover img{filter: invert(1);} #header.top-fixed .nav-open-btn{border-color: rgba(0,0,0,0.2);} #header.top-fixed .nav-open-btn i{color: #000;} /* -------- Header :: UTIL BOX -------- */ .header-util-box{padding-right:70px;} /* Header :: 사이트맵 버튼 */ .sitemap-line-btn, .sitemap-custom-btn{display:none;} /* -------- Header :: GNB(Pc) -------- */ #gnb{display:none;} .gnb-overlay-bg{display:none} /* -------- Header :: GNB(Mobile/기본스타일) -------- */ .gnb-overlay-bg-m{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998;} #gnbM{ display:block; position:fixed; top:0px; right:-82%; width:80%; height:100%; max-width:280px; background-color:#fff; z-index:9999; transition:var(--transition-custom); visibility:hidden; } #gnbM.open{ right:0px; visibility:visible; } /* GNB Mobile :: 레이아웃 */ .gnb-navigation-logo{position: absolute; top: 0; left: 0; width: 100%; height: 130px; display: flex; align-items: center; justify-content: center;} .gnb-navigation-logo img{} .gnb-navigation-wrapper{position:relative; height:100%; box-sizing:border-box; padding-top:var(--header-height); overflow-y:auto;} .header-util-menu-box + .gnb-navigation-wrapper{padding-top:0; height:calc(100% - var(--header-height));} /* GNB Mobile :: 메뉴영역 :: 1차 */ #navigation > li{border-bottom:1px dashed rgba(5, 99, 241, 0.6);} #navigation > li > a {position:relative; display:block; padding:20px 0; color:#000; font-size:18px; font-weight:500; letter-spacing: -0.01em;} #navigation > li.active > a{color:var(--mainColor);} #navigation > li.has-2dep > a:before{font-family:xeicon; content: "\e914"; position:absolute; top:50%; right: 0; font-size:1.3em; transform:translateY(-50%); font-weight: 400;} #navigation > li.has-2dep.active > a:before{content: "\e91b";} /* GNB Mobile :: 메뉴영역 :: 2차 */ #navigation > li .gnb-2dep{display:none; padding:15px 0; border-top: 1px dashed rgba(5, 99, 241, 0.6);} #navigation > li .gnb-2dep > ul > li{height:auto !important;} #navigation > li .gnb-2dep > ul > li > a{position: relative; display:block; color:rgba(0,0,0,0.78); font-size:16px; padding:10px 10px;} #navigation > li .gnb-2dep > ul > li > a:before{position: absolute; top: 10px; left: 0; content: '·'; display: inline-block;} #navigation > li .gnb-2dep > ul > li.on > a{color:#000; font-weight:500;} /* GNB Mobile :: 메뉴영역 :: 3차 */ #navigation > li .gnb-2dep > ul > li > .gnb-3dep{display:none; padding:10px; background-color:#aaa; margin:0 10px} #navigation > li .gnb-2dep > ul > li > .gnb-3dep > li > a{display:block; padding:8px 0; font-size:13px; color:#fff;} #navigation > li .gnb-2dep > ul > li > .gnb-3dep > li > a:before{display:inline-block; content:"-"; margin-right:5px;} /* -------- GNB Mobile :: 스타일2 (Full Style) -------- */ #gnbM.gnb-style-full{ top:-100%; right:0; width:100%; height:100%; max-width:none; } #gnbM.gnb-style-full.open{ top:0px; } .gnb-style-full .gnb-navigation-wrapper{height:auto; width:100%; position:absolute; top:130px; bottom:30px; left:0; padding-top:0;} .gnb-style-full .header-util-menu-box + .gnb-navigation-wrapper{top:var(--header-height); } .gnb-style-full-member .gnb-navigation-wrapper{bottom:var(--header-height);} .gnb-style-full .gnb-navigation-inner{display:table; width:100%; height:100%;} .gnb-style-full #navigation{ display:table-cell; vertical-align:top; padding: 0 20px; } .gnb-style-full #navigation > li{ opacity:0; transform:translateY(-20px); transition:all 0s 0s; } .gnb-style-full #navigation > li > a {} .gnb-style-full #navigation > li .gnb-icon i{display:none;} .gnb-style-full.open #navigation > li{ opacity:1.0; transform:translateY(0px); transition:transform 0.8s, opacity 0.8s; } .gnb-style-full.open #navigation > li:nth-child(1){transition-delay:0.3s;} .gnb-style-full.open #navigation > li:nth-child(2){transition-delay:0.4s;} .gnb-style-full.open #navigation > li:nth-child(3){transition-delay:0.6s;} .gnb-style-full.open #navigation > li:nth-child(4){transition-delay:0.7s;} .gnb-style-full.open #navigation > li:nth-child(5){transition-delay:0.9s;} .gnb-style-full.open #navigation > li:nth-child(6){transition-delay:0.9s;} /* -------- Header :: 네비게이션 오픈 버튼 -------- */ .nav-open-btn-box{display:block; position:fixed; top:20px; right: 20px; z-index:10000;} .nav-open-btn{width:50px; height:50px; border: 1px solid rgba(255,255,255,0.2); display:flex; align-items: center; justify-content: center; box-sizing:border-box; background-color: transparent; border-radius: 100%; text-align: center; position: relative; z-index:10000; transition: var(--transition-custom); transition-property: border-color;} .nav-open-btn i{font-size: 22px; color: #fff; transition: var(--transition-custom); transition-property:color;} .nav-open-btn .open{display: block;} .nav-open-btn .close{display: none;} .nav-open-btn-box.active{right:20px;} #header.top-fixed .nav-open-btn-box.active .nav-open-btn, .nav-open-btn-box.active .nav-open-btn{border: none;} .nav-open-btn-box.active .nav-open-btn i{color: #000;} .nav-open-btn-box.active .nav-open-btn .open{display: none;} .nav-open-btn-box.active .nav-open-btn .close{display: block;} } @media all and (max-width:768px) { #header .logo a{height:27px;} .header-page-btn + .header-page-btn{margin-left: 5px;} .header-page-btn a {font-size: 12px;} .header-page-btn a img{max-width: 12px;} } @media all and ( max-width: 640px ){ #header .logo a{height:20px;} } @media all and ( max-width: 480px ){ .header-util-box { padding-right: 60px; } .header-page-btn a { /* font-size: 12px; */ font-size: 2vw; padding: 3px 7px 5px; } } @media all and ( max-width: 400px ){ #header .logo a { height: 13px; } } @media screen and (max-width:375px) { /* #header .logo a { height: 13px; } */ /* .header-page-btn a { font-size: 10px; } */ .header-page-btn.ico a{padding: 5px;} .header-page-btn a img{max-width: 10px;} } @media all and (max-width:320px){ #headerInner{padding: 0 15px;} .nav-open-btn-box{top:24px;} .header-util-box {padding-right: 50px;} .nav-open-btn{width:40px; height:40px;} .gnb-navigation-logo img {height: 50px;} } /* ****************** 사이트맵 :: 사이트맵 ********************** */ /* ****************** 사이트맵 :: 사이트맵 공통 ********************** */ .cm-sitemap-wrapper:not(#siteMapCon02)::-webkit-scrollbar{width: 5px; height:5px;} .cm-sitemap-wrapper:not(#siteMapCon02)::-webkit-scrollbar-thumb{background-color:#333; transition:all 0.5s;} .cm-sitemap-wrapper:not(#siteMapCon02)::-webkit-scrollbar-track{background-color:#fff; background:rgba(100,100,100,0.1); border-radius:5px;} .cm-sitemap-wrapper{font-size:20px; } .cm-sitemap-wrapper:not(#siteMapCon01){position:fixed; top:0px; left:0px; width:100%; height:100%; overflow-y:auto; overflow-x:hidden; } .cm-sitemap-wrapper:before{position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#000; content:""; opacity:0; transition:opacity 0.2s ease; display: none !important;} .cm-sitemap-container{position:absolute; display:table; width:100%; height:100%; overflow-y:auto; } .cm-sitemap-inner-con{position: relative; display:table-cell; vertical-align:middle; padding: 5em 0 50px; opacity:0; transition:opacity 0.5s ease 0s } .cm-sitemap-inner-con .splitting, .cm-sitemap-inner-con .splitting .word{overflow:hidden;} .cm-sitemap-inner-con .splitting .word, .cm-sitemap-inner-con .splitting .char{display:inline-block;} .sitemap-wrapper-style span.num{display:none;} .cm-sitemap-inner-con .splitting .char{transform:translateY(100%); transition:transform 0.6s ease 0.3s , color 0.3s} /* 공통 :: open */ .cm-sitemap-wrapper.open:before{opacity: 0.5} .cm-sitemap-wrapper.open .cm-sitemap-inner-con{opacity:1.0; transition-delay:0.4s} .cm-sitemap-wrapper.open .splitting .char{transform:translateY(0); transition-delay:0.3s} #siteMapCon03{ z-index:-1; opacity:0;filter:Alpha(opacity=0); visibility:hidden; height: 100% !important; /* overflow: hidden !important; */ } #siteMapCon03 *::-webkit-scrollbar {width: 5px;} #siteMapCon03 .sitemap-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden;} #siteMapCon03 .sitemap-bg span{position: absolute; right: calc(110px + 45px); top: calc(54px + 30px); width: 0; height: 0; display: block; border-radius: 100%; background:#000; transition: top 0.6s 0s ease, right 0.6s 0s ease, transform 0.6s ease, width 0.6s 0s ease, height 0.6s 0s ease;} .cm-sitemap-container-03 .cm-sitemap-area-con{position:relative;} .sitemap-modal-tit-con-03{position: absolute; top: 20px; right: 110px; overflow:hidden; display:flex; align-items:center; justify-content:space-between;} .index-wrap .sitemap-modal-tit-con-03{top: 45px;} .sitemap-modal-tit-con-03 .sitemap-close-btn{background-color: rgba(255,255,255,0.1); width: 96px; height: 96px; font-size: 3.20px; line-height: 96px; -webkit-border-radius: 100%; border-radius: 100%; text-align: center; display:flex; align-items:center; justify-content:center;} .sitemap-modal-tit-con-03 .sitemap-close-btn i{font-size:32px; line-height: 96px; color: #fff; transition:transform 0.5s} .sitemap-wrapper-style03{max-height: calc(100vh - 7em - 50px); overflow-x: hidden; overflow-y: auto;} .sitemap-wrapper-style03 > ul{display: flex; flex-wrap:wrap;} .sitemap-wrapper-style03 > ul > li{padding: 25px 0; width: 100%; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; border-bottom: 1px dashed rgba(255,255,255,0.2); transition: border-bottom-color 0.5s;} .sitemap-wrapper-style03 > ul > li:last-child{border-bottom: 0;} .sitemap-wrapper-style03 > ul > li > h2{position: relative; padding-right: 40px; font-size:70px; line-height: 1; font-weight:700; color: #fff; transition: color 0.3s;} .sitemap-wrapper-style03 > ul > li > h2:before{position: absolute; right: -15px; right: 0; content: ''; width: 20px; height: 20px; background-color: var(--mainColor); border-radius: 100%; opacity: 0; transition: opacity 0.3s;} .sitemap-wrapper-style03 > ul > li .sitemap-2dep{display: flex; flex-wrap:wrap;} .sitemap-wrapper-style03 > ul > li .sitemap-2dep li{} .sitemap-wrapper-style03 > ul > li .sitemap-2dep li + li{position: relative; margin-left: 22px;} .sitemap-wrapper-style03 > ul > li .sitemap-2dep li + li:before{position: absolute; top: 4px; left: -13px; font-size: 14px; color: rgba(255,255,255,0.3); content: '/';} .sitemap-wrapper-style03 > ul > li .sitemap-2dep a{position: relative; display:block; color:#fff; font-size:18px; font-weight:500; line-height:1; transition: all 0.3s;} .sitemap-wrapper-style03 > ul > li .sitemap-2dep a:before{position: absolute; bottom: -8px; left: 50%; width: 0; height: 0.20px; background-color: #fff; content: ''; transition: all 0.3s;} /* Open */ #siteMapCon03.open{ opacity:1.0;filter:Alpha(opacity=100); visibility:visible; z-index:99999; } #siteMapCon03.open .sitemap-bg span{right: 50%; top: 50%; transform: translate(50%,-50%); width:3000px; height: 3000px; transition: top 0.6s 0.3s ease, right 0.6s 0.3s ease, transform 0.6s ease, width 0.6s 0.3s ease, height 0.6s 0.3s ease;} @media (hover: hover) { .sitemap-modal-tit-con-03 .sitemap-close-btn:hover i{transform:rotate(180deg)} .sitemap-wrapper-style03 > ul > li:hover{border-bottom-color: #fff;} .sitemap-wrapper-style03 > ul > li:hover > h2{color: var(--mainColor);} .sitemap-wrapper-style03 > ul > li:hover > h2:before{opacity: 1;} .sitemap-wrapper-style03 > ul > li:hover .sitemap-2dep a{opacity:0.5} .sitemap-wrapper-style03 > ul > li:hover .sitemap-2dep a:hover{opacity:1.0; color: #fff;} .sitemap-wrapper-style03 > ul > li .sitemap-2dep a:hover:before{width: 100%; margin-left: -50%;} } @media all and (min-width:1281px) and (max-height:885px){ .sitemap-wrapper-style03{padding-right: 15px;} } @media all and (max-width:1620px){ .sitemap-modal-tit-con-03{right: 30px;} } @media all and ( max-width: 800px ){ .sitemap-modal-inner-03, .sitemap-wrapper-style03 > ul{display:block;} .sitemap-wrapper-style03 > ul > li{float:none; display:block; width:auto; padding: 5% 0; margin-bottom:0; border-left: none; border-top: 1px solid rgba(255,255,255,0.1);} .sitemap-wrapper-style03 > ul > li:last-child{border-right: none;} .sitemap-wrapper-style03 > ul > li:first-child{border-top: none;} .sitemap-wrapper-style03 > ul > li > h2{min-height: auto;} .sitemap-wrapper-style03 > ul > li .sitemap-2dep{overflow:hidden; margin:0 -1%; padding:0;} .sitemap-wrapper-style03 > ul > li .sitemap-2dep li{float:left; position:relative; width:31.33%; margin: 0 1%; word-break:keep-all;} .sitemap-wrapper-style03 > ul > li .sitemap-2dep li:before{position:absolute; top:0px; left:0; bottom:0px; width:1px; background-color:#eee; content:""; display:none;} .sitemap-wrapper-style03 > ul > li .sitemap-2dep li:nth-child(3n+1){clear:both;} .sitemap-wrapper-style03 > ul > li .sitemap-2dep a.has-3dep {margin-top: 0;} .sitemap-wrapper-style03 > ul > li .sitemap-2dep .gnb-3dep li{width: 98%;} } @media all and ( max-width: 480px ){ .sitemap-wrapper-style03 > ul > li .sitemap-2dep li{width:48%;} .sitemap-wrapper-style03 > ul > li .sitemap-2dep li:nth-child(3n+1){clear:none;} .sitemap-wrapper-style03 > ul > li .sitemap-2dep li:nth-child(odd){clear:both;} } /* ===== FOOTER ===== */ #footer { position: relative; z-index:1; background:#111111; } #footer .ft-top { width:100%; display:flex; justify-content:space-between; align-items:center; padding: 25px 0; border-bottom:1px solid rgba(255,255,255,0.15); } #go-top {position:fixed;bottom:40px;right:20px;width:60px; height:60px; color:#fff;text-align:center;font-size:18px;z-index:90;background:#111; border-radius:50%; border:1px solid #444;} #go-top .arr{display:block; background:url(https://eugenes.co.kr/img/bu/bu-language-white.png) no-repeat center; width:11px; height:4px; transform:rotate(180deg); margin:0 auto 5px} #go-top p{font-size:12px;} #footer .ft-top .ft-menu { font-size:0; } #footer .ft-top .ft-menu li { display:inline-block; margin-left:30px; } #footer .ft-top .ft-menu li:first-child { margin-left:0; } #footer .ft-top .ft-menu li a { font-size:16px; color:#fff; } #footer .ft-top .ft-site { position:relative; width:190px; border:1px solid #595959; } #footer .ft-top .ft-site h2:after { content:""; position:absolute; right:18px; top:50%; width:11px; margin-top:-1px; height:4px; background:url(https://eugenes.co.kr/img/bu/bu-family.png) no-repeat center; } #footer .ft-top .ft-site.open h2:after{ transform:rotate(180deg); } #footer .ft-top .ft-site h2 { padding-left:20px; font-size:14px; color:rgba(255,255,255,0.5); font-family:'Poppins',sans-serif; font-weight:400; line-height:48px; cursor:pointer } #footer .ft-top .ft-site ul { display:none; position:absolute; left:0; bottom:100%; width:100%; background:#fff; padding:10px 20px; border:1px solid #ddd; } #footer .ft-top .ft-site ul li a{ font-size:14px; color:#aaa; display:block; margin:5px 0; line-height:1.5; } #footer .ft-top .ft-site ul li a:hover{ color:#111; } #footer .ft-btm { display:flex; justify-content:space-between; align-items:center; padding:30px 0 55px; border-bottom:1px solid rgba(255,255,255,0.15); } #footer .ft-btm .ft-addr{ width:calc(100% - 240px); } #footer .ft-btm address p { position:relative; display:inline-block; padding-left:15px; margin-left:15px; font-size:14px; color:#aaa; letter-spacing:-0.25px; font-family:'Pretendard',sans-serif; font-weight:400; font-style:normal; } #footer .ft-btm address p:after { content:""; position:absolute; left:0; top:50%; margin-top:-5px; width:1px; height:10px; background:#484848; } #footer .ft-btm address p:first-child { padding-left:0; margin-left:0; } #footer .ft-btm address p:first-child::after{ content: none; } #footer .ft-btm p.copyright { margin-top:20px; font-size:14px; color:rgba(255,255,255,0.5); font-family:'Poppins',sans-serif; } #footer .ft-btm .ft-sns { font-size:0; } #footer .ft-btm .ft-sns li { display:inline-block; margin-left:10px; } #footer .ft-btm .ft-sns li:first-child { margin-left:0; } #footer .ft-btm .ft-sns li a { display:block; width:40px; height:40px; border-radius:50%; background-color:#292929; background-repeat:no-repeat; background-position:center center; -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; -ms-transition: background-color 0.3s; -o-transition: background-color 0.3s; transition: background-color 0.3s; } #footer .ft-btm .ft-sns li.sns-youtube a { background-image:url(../../images/common/ico-youtube-white.png); } #footer .ft-btm .ft-sns li.sns-facebook a { background-image:url(../../images/common/ico-facebook-white.png); } #footer .ft-btm .ft-sns li.sns-blog a { background-image:url(../../images/common/ico-blog-white.png); } #footer .ft-btm .ft-sns li.sns-instagram a { background-image:url(../../images/common/ico-instagram-white.png); } #footer .ft-btm .ft-sns li.sns-linkedin a { background-image:url(../../images/common/ico-linkedin-white.png); } #footer .ft-btm .ft-sns li a:hover { background-color:#444; } #footer.en .ft-btm address { display: flex; flex-direction: column; } #footer.en .ft-btm address p { padding: 0; margin: 0; } @media screen and (max-width:820px) { #footer .ft-top { display: block; } #footer .ft-top .ft-menu li { margin-left: 15px; } #footer .ft-top .ft-menu li a { font-size: 14px; } #footer .ft-top .ft-site { margin: 20px 0 0; } #footer .ft-btm { display: block; } #footer .ft-btm .ft-addr { width: 100%; } #footer .ft-btm address p { display: block; padding-left: 0; margin-left: 0; } #footer .ft-btm address p:after { display: none; } #footer .ft-btm p.copyright { font-size: 12px; } #footer .ft-btm .ft-sns { margin: 20px 0 0; } #go-top { width: 40px; height: 40px; bottom: 20px; } #go-top p { display: none; } #go-top .arr { margin: 0 auto; } } .btn-top { position: fixed; display: flex; align-items: center; bottom: 2vw; right: 2vw; width: 88px; height: 88px; text-align: center; border-radius: 50%; background-color: #fff; border: 1px solid #e5e5e5; transition: all .3s ease-out; transform: scale(0) translateY(100%); opacity: 0; box-shadow: 1px 1px 1.6rem rgba(34, 34, 34, .08); z-index: 100 } .btn-top.on { transform: scale(1) translateY(0); opacity: 1 } .btn-top p { width: 100%; font-size: 18px; font-weight: 700 } .btn-top p:before { content: ""; display: block; margin: 0 auto; width: 16px; height: 16px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7L7 1L13 7' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 100% 100% } @media screen and (max-width:768px) { .btn-top { width: 64px; height: 64px; } .btn-top p { font-size: 14px; } .btn-top p:before { width: 12px; height: 12px; } } /* ****************** MODAL LAYERPOPUP ********************** */ /* modal layer */ .modal-fixed-pop-wrapper{display:none; overflow:hidden; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:9999; background:#000; background:rgba(0,0,0,0.8);} .modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;} .modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;} .modal-loading{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;} .modal-inner-content{text-align:left;} .loading { display: inline-block; width: 50px; height: 50px; border: 8px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } @-webkit-keyframes spin { to { transform: rotate(360deg); } } /* modal layer content */ .footer-modal-content{position:relative; width:96%; max-width:1000px; margin:20px auto; } .footer-modal-content h1{font-size:24px; font-weight:600; letter-spacing:-0.5px; text-align:center; padding:0 50px 20px; color:#fff;} .modal-close-btn{position:absolute; top:-6px; right:-6px; color:#fff; } .modal-close-btn i{font-size:38px;} .modal-close-btn i:hover {color:#fff} .footer-inner-box{padding:30px; background-color:#fff; } .footer-inner{padding:20px; height:400px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd; font-size: 14px;} .footer-inner h2 {font-size: 1.2em; font-weight: bold; margin-bottom: 20px;} .footer-inner ul {margin-top: 10px; padding-left: 10px;} .footer-inner ul li{ padding-left: 10px;}