/* 헤더 공통 */ /* (주)파이브센스_FIVESENSES.Corp. 본 라이브러리(소스코드 및 디자인 포함)는 (주)파이브센스의 자산이며, 저작권법 및 부정경쟁방지법에 의해 보호됩니다. 무단 사용, 외부 유출, 복제, 배포, 변형을 금지합니다. 위반 시 민·형사상 법적 책임 및 손해배상 청구 대상이 됩니다. 작성일: 2025-02-04 | 저작권자: (주)파이브센스(520-86-01244) | All Rights Reserved. */ /* 2025-04-28 (주)파이브센스_FIVESENSES.Corp. 전체적으로 링크아이콘 추가 */ *{font-family: 'Pretendard';} html.popup, body.popup{overflow: hidden;} #pcHead, #mobHead{position: relative;} .at-header{position: relative; z-index: 1000; top: 0; left: 0; width: 100%; background-color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.01);} .at-header.fixed {position: fixed; top: -100px; transition: top 0.4s ease;} .at-header.fixed.visible {top: 0; transition: top 0.4s ease;} .at-header.fixed.visible.admin-H {top: 50px;} html.disable-header-action .at-header { display: none; } @media (max-width: 991px) { .at-header.fixed {top: -50px;} } .header-placeholder { display: none; width: 100%; } /* .at-header.hide { transform: translateY(-100%); } */ /* 탑배너 & 어드민 조합은 top이 아닌 translate로 밀기 */ /* .at-header.offset-100 { transform: translateY(100px); } .at-header.offset-50 { transform: translateY(50px); } .at-header.offset-150 { transform: translateY(150px); } */ /* .at-header.pc{transition: top 0.5s;} */ /* .at-header.header_ani{opacity: 0; top: -50px;} */ /* .at-header.pc.up.fixed{top: -70px !important;} */ /* .at-header.busi.fixed{opacity: 1; top: 0;animation: none;} */ @keyframes header { to {opacity: 1; top: 0px;} } @keyframes header_adm { to {opacity: 1; top: 50px;} } .at-html.login-intro .at-header{display: none;} .at-header img{max-width: inherit;} .at-header span, .at-header input, .at-header a, .header-menu a{font-family: 'Pretendard';} .at-header .mypage_icon_b, .at-header .search_icon_b, .at-header .cart_icon_b, .at-header .lang_b, .at-header .m_menu_fix_b, .at-header .header_search_b, .at-header .header_menu_b, .at-header .myshop_icon_b{display: block;} .at-header .logo_w, .at-header .mypage_icon_w, .at-header .search_icon_w, .at-header .cart_icon_w, .at-header .lang_w, .at-header .m_menu_fix_w, .at-header .header_search_w, .at-header .header_menu_w, .at-header .myshop_icon_w{display: none;} .at-header .logo_b{display: inline-block;} .at-header .logo_function {display: none;} .sub-1div{display: none;} .pc-menu{box-shadow: none;} ul,li{list-style: none;} .at-header .pc-menu .nav-top .all_category_btn:hover > .menu-a{color: var(--main-point-color-hover);} .at-header .menu-ul .menu-a{white-space : nowrap;} .at-header .menu-ul .menu-a .link_icon{display: inline-block;} .at-header .menu-ul .menu-a .link_icon img{display: block; position: relative; top: -1px; margin-left: 3px;} .at-header .pc-menu .nav-top .menu-li:hover .menu-a, .at-header .pc-menu .nav-top .menu-li.on .menu-a{background-color: transparent; color: var(--main-point-color-hover);} /* 일체형 공통 */ .at-header.header_on{position: absolute; top: 0; left: 0; width: 100%; background-color: #fff; transition: 0.3s;} .at-header.transparent_H{background-color: transparent;} .at-header.transparent_H .header-menu .pc-menu{background-color: transparent; box-shadow: none; border-bottom: 1px solid rgba(255,255,255,0.2);} /* .at-header.transparent_H .pc-menu .nav-top .menu-ul .menu-a{background-color: transparent; color: #fff;} */ .at-header.transparent_H .logo_b, .at-header.transparent_H .mypage_icon_b, .at-header.transparent_H .search_icon_b, .at-header.transparent_H .cart_icon_b, .at-header.transparent_H .lang_b, .at-header.transparent_H .m_menu_fix_b, .at-header.transparent_H .header_search_b, .at-header.transparent_H .header_menu_b, .at-header.transparent_H .myshop_icon_b{display: none;} .at-header.transparent_H .mypage_icon_w, .at-header.transparent_H .search_icon_w, .at-header.transparent_H .cart_icon_w, .at-header.transparent_H .lang_w, .at-header.transparent_H .m_menu_fix_w, .at-header.transparent_H .header_search_w, .at-header.transparent_H .header_menu_w, .at-header.transparent_H .myshop_icon_w{display: block;} .at-header.transparent_H .logo_w{display: inline-block;} .header-menu.fixed .pc-menu .menu-a{background-color: #fff;} .search_btn img, .lang_btn_li .lang_btn_box .lang_btn img, .mypage_btn_li img{transition: .5s ease-out;} /* 헤더 스크롤 고정 */ /* .at-header.fixed{position: fixed;width: 100%; top: -100px; transition: top 0.4s ease; z-index: 999; background-color: #fff;} .at-header.fixed.visible { top: 0; } */ /* .at-header.busi.admin-H.fixed{top: 50px; animation: none; opacity: 1;} */ /* .at-header.busi.admin-H.fixed.visible {top: 50px;} .at-header.busi.admin-H.fixed .header-menu .logo_box img { content: url(/img/scroll_logo.png); height: auto; } */ @media (max-width:991px){ .at-header{border-bottom: none; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.03);} .at-header { /* position: fixed; */ } /* .at-header .m_header { position: fixed; top: 0; background-color: inherit; } */ /* .at-header .m_header.initAni { transition: transform 0.27s linear, top 0.27s linear; } */ .at-header.function .m_logo_box .m_logo img { display: none; } .at-header.function .m_logo_box .m_logo img.logo_function { display: inline-block; height: 39px; } .at-header.function .m_header.M_FM1_on .m_logo_box .m_logo img.logo_b { display: block; } } /* 드롭메뉴1 (전체 서브메뉴) */ .at-header .pc-menu .DMS01 .all_menu_wrap{background-color: #fff;position: absolute;top: 84px;left: 50%;transform: translateX(-50%);width: 100vw;padding: 0;border-top: 1px solid #ebebeb; box-shadow: 0 10px 15px rgba(0,0,0,0.05); display: none;} .at-header .pc-menu .DMS01 .all_menu_wrap > .container_fix{max-width: 1470px;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_menu_ul{display: flex; align-items: flex-start; justify-content: center; overflow-y: hidden; width: 100%;} .at-header .pc-menu .DMS01 .nav-top .menu_ul_01 .menu-a::before{content: ''; display: block; width: 0; height: 2px; background-color: var(--main-point-color-hover); position: absolute; left: 0; bottom: -3px; transition: .5s ease-out;} .at-header .pc-menu .DMS01 .nav-top .menu_ul_01 .menu-a:hover::before, .at-header .pc-menu .DMS01 .nav-top .menu_ul_01 .menu-li.hover .menu-a::before{width: 100%;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_menu_li{width: max(8vw,158px); padding-bottom: 50px;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_menu_li{position: relative;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_menu_li+li::before{content: ''; display: block; width: 1px; height: 100vh; background-color: #ebebeb; position: absolute; top: 0; left: 0;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_menu_li:nth-of-type(1)::after{content: ''; display: block; width: 1px; height: 100vh; background-color: #ebebeb; position: absolute; top: 0; left: 0;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_menu_li:last-child::after{content: ''; display: block; width: 1px; height: 100vh; background-color: #ebebeb; position: absolute; top: 0; right: 0;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_menu_a{display: none;font-size: 16px;font-weight: 700;color: var(--main-point-color); transition: 0.3s;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_menu_li:hover .all_menu_a{color: var(--main-point-color-hover);} .at-header .pc-menu .DMS01 .all_menu_wrap .all_sub_div{margin-top: 30px;display: block !important;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_sub_a{display: block;padding: 10px 0;font-size: 15px;font-weight: 400; line-height: 1.2em;color: var(--main-point-color); transition: 0.3s; text-align: center; position: relative;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_sub_a span.all_sub_text{position: relative;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_sub_a span.all_sub_text::before{content: ''; display: block; width: 0; height: 1px; background-color: var(--main-point-color); position: absolute; left: 0; bottom: 0; transition: 0.5s;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_sub_li.on .all_sub_a span.all_sub_text::before, .at-header .pc-menu .DMS01 .all_menu_wrap .all_sub_a:hover span.all_sub_text::before{width: 100%;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_sub_a .link_icon{display: inline-block;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_sub_a .link_icon img{display: block;} /* 드롭메뉴2 (본인 1차 2차) 포인트 컬러 */ .at-header .pc-menu .DMS02 .nav-top.nav-both .menu-li{position: relative;} .at-header .pc-menu .DMS02 .nav-top.nav-both .sub-1div{left: 50%; transform: translateX(-50%); box-shadow: 0 5px 15px -3px rgba(0,0,0,0.15); padding: 5px; position: absolute; min-width: 140px; border-radius: 8px;} .at-header .pc-menu .DMS02 .nav-top.nav-both .sub-1div .link_icon{display: inline-block;} .at-header .pc-menu .DMS02 .nav-top.nav-both .sub-1div .link_icon img{display: block; margin-left: 1px;} .at-header .pc-menu .DMS02 .nav-top .sub-1div-arr{display: inline-block; width: 6px; height: 6px; border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc; position: absolute; top: 50%; right: 15px; transform: translateY(-50%) rotate(-45deg);} .at-header .pc-menu .DMS02 .nav-top .sub-1dli + .sub-1dli{margin-top: 5px;} .at-header .pc-menu .DMS02 .nav-top .sub-1da{border-bottom: none; font-size: 15px; color: var(--main-point-color); padding: 12px 15px; border-radius: 8px; transition: 0.3s;} .at-header .pc-menu .DMS02 .nav-top .sub-1dli.on > .sub-1da, .at-header .pc-menu .DMS02 .nav-top .sub-1dli:hover > .sub-1da{background-color: #f2f4f6;} .at-header .pc-menu .DMS02 .nav-top .sub-1dli:hover > .sub-1da + .sub-1div-arr{border-color: var(--main-point-color);} .at-header .pc-menu .DMS02 .nav-top .sub-2div{left: calc(100% + 5px); background-color: #235bf5; border-radius: 8px; padding: 5px; min-width: 140px; display: none;} .at-header .pc-menu .DMS02 .nav-top .sub-2div::before{content: ''; display: block; position: absolute; top: 0; left: -5px; width: 10px; height: 100%;} .at-header .pc-menu .DMS02 .nav-top .sub-2da{color: #fff; padding: 13px 14px; line-height: 1.2em; font-size: 15px; font-weight: 500; border-radius: 8px; border: none; transition: 0.2s;} /* .at-header .pc-menu .DMS02 .nav-top .sub-2dli.on .sub-2da{background-color: transparent;font-weight: 500;} */ .at-header .pc-menu .DMS02 .nav-top .sub-2dli.on .sub-2da, .at-header .pc-menu .DMS02 .nav-top .sub-2dli:hover .sub-2da{background-color: #2052dc; font-weight: 500;} .at-header .pc-menu .DMS02 .nav-top .sub-2dli + .sub-2dli {margin-top: 5px;} @media((max-width: 1510px)){ .at-header .pc-menu .DMS02 .nav-top .sub-1da{font-size: 14px;} .at-header .pc-menu .DMS02 .nav-top .sub-2da{font-size: 14px;} } /* 드롭메뉴3 (본인 1차 2차) 하양 */ .at-header .pc-menu .DMS03 .nav-top.nav-both .menu-li{position: relative;} .at-header .pc-menu .DMS03 .nav-top.nav-both .sub-1div{left: 50%; transform: translateX(-50%); box-shadow: 0 5px 15px -3px rgba(0,0,0,0.15); padding: 7px 5px; position: absolute; min-width: 140px;} .at-header .pc-menu .DMS03 .nav-top .sub-1div-arr{display: inline-block; width: 6px; height: 6px; border-bottom: 1px solid transparent; border-right: 1px solid transparent; position: absolute; top: 50%; right: 15px; transform: translateY(-50%) rotate(-45deg);} .at-header .pc-menu .DMS03 .nav-top .sub-1dli + .sub-1dli{margin-top: 5px;} .at-header .pc-menu .DMS03 .nav-top.nav-both .sub-1div .link_icon{display: inline-block;} .at-header .pc-menu .DMS03 .nav-top.nav-both .sub-1div .link_icon img{display: block; margin-left: 1px;} .at-header .pc-menu .DMS03 .nav-top .sub-1da{border-bottom: none; font-size: 15px; color: var(--main-point-color); transition: 0.3s; padding: 12px 15px; border-radius: 8px; transition: 0.3s;} .at-header .pc-menu .DMS03 .nav-top .sub-1dli.on > .sub-1da, .at-header .pc-menu .DMS03 .nav-top .sub-1dli:hover > .sub-1da{background-color: #f2f4f6;} .at-header .pc-menu .DMS03 .nav-top .sub-1dli:hover > .sub-1da + .sub-1div-arr{border-color: var(--main-point-color);} .at-header .pc-menu .DMS03 .nav-top .sub-2div{left: calc(100% + 5px); background-color: #fff; padding: 7px 5px; min-width: 130px; display: none; top: -7px;} .at-header .pc-menu .DMS03 .nav-top .sub-2div::before{content: ''; display: block; position: absolute; top: 0; left: -5px; width: 10px; height: 100%;} .at-header .pc-menu .DMS03 .nav-top .sub-2da{color: var(--main-point-color); padding: 13px 14px; line-height: 1.2em; font-size: 15px; font-weight: 400; border-radius: 8px; border: none; transition: 0.2s;} /* .at-header .pc-menu .DMS03 .nav-top .sub-2dli.on .sub-2da{background-color: transparent;font-weight: 400;} */ .at-header .pc-menu .DMS03 .nav-top .sub-2dli.on .sub-2da, .at-header .pc-menu .DMS03 .nav-top .sub-2dli:hover .sub-2da{background-color: #f2f4f6; color: var(--main-point-color); font-weight: 400;} .at-header .pc-menu .DMS03 .nav-top .sub-2dli + .sub-2dli {margin-top: 5px;} @media((max-width: 1510px)){ .at-header .pc-menu .DMS03 .nav-top .sub-1da{font-size: 14px;} .at-header .pc-menu .DMS03 .nav-top .sub-2da{font-size: 14px;} } /* 드롭메뉴4 (가로 드롭메뉴) */ .at-header .pc-menu .DMS04 .nav-top .menu-ul .menu-li{position: relative;} .at-header .pc-menu .DMS04 .sub-1div{position: absolute;/*left: 50%;transform: translateX(-50%);width: 100vw;background: #fff;box-shadow: 0 12px 12px rgba(0, 0, 0, .175);*/z-index: 11;text-align: center;opacity: 0;visibility: hidden;transition: all 0.3s ease-out;transform-origin: top;height: 0;display: block; background-color: transparent; box-shadow: none;} .at-header .pc-menu .DMS04 .sub-1div::before{content: ''; display: block; position: absolute;left: 50%;transform: translateX(-50%);width: 200vw;height: 100%; background: #fff;box-shadow: 0 12px 12px rgba(0, 0, 0, .175); border-top: 1px solid #ebebeb;} .at-header .pc-menu .DMS04 .menu-li:hover .sub-1div{opacity: 1;visibility: visible;height: 74px;} .at-header .pc-menu .DMS04 .sub-1div .link_icon{display: inline-block;} .at-header .pc-menu .DMS04 .sub-1div .link_icon img{display: block; margin-left: 1px;} .at-header .pc-menu .DMS04 .sub-1div > ul > li {display: inline-block;} .at-header .pc-menu .DMS04 .sub-1div > ul > li .sub-1da {font-size: 17px;font-weight: 400;color: var(--main-point-color);line-height: 72px;display: block;margin: 0 20px; padding: 0 15px; border: none;} .at-header .pc-menu .DMS04 .sub-1div > ul > li .sub-1da span.sub-1da-text{position: relative;} .at-header .pc-menu .DMS04 .sub-1div > ul > li .sub-1da span.sub-1da-text::before{content: ''; display: block; width: 0; height: 1px; background-color: var(--main-point-color); position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; transition: 0.5s;} .at-header .pc-menu .DMS04 .sub-1div > ul > li.on .sub-1da span.sub-1da-text::before, .at-header .pc-menu .DMS04 .sub-1div > ul > li .sub-1da:hover span.sub-1da-text::before{width: 100%;} @media((max-width: 1510px)){ .at-header .pc-menu .DMS04 .sub-1div > ul > li .sub-1da{font-size: 14px;} } /* 드롭메뉴5 (5열 4행 드롭메뉴) */ /* .at-header .pc-menu .DM5_menu_view{background-color: #fff;position: absolute;top: 64px;left: 50%;transform: translateX(-50%);width: 100vw;height: auto;padding: 40px 0 105px;border-top: 1px solid #f6f6f6; box-shadow: 0 10px 15px rgba(0,0,0,0.05); display: none; overflow-y: auto;} .at-header .pc-menu .DM5_menu_view > .container_fix{max-width: 1290px;} .at-header .pc-menu .DM5_menu_view .all_menu_ul{display: flex;flex-wrap: nowrap;overflow-y: hidden; width: 100%; gap: 60px;} .at-header .pc-menu .DM5_menu_view .column{flex: 1; display: flex; flex-direction: column; gap: 10px;} .at-header .pc-menu .DM5_menu_view .all_menu_li{border-top: 1px solid #ebebeb; padding-top: 20px;} .at-header .pc-menu .DM5_menu_view .column .all_menu_li:first-child{border: none; padding-top: 0;} .at-header .pc-menu .DM5_menu_view .all_sub_div{display: block !important;} .at-header .pc-menu .DM5_menu_view .all_menu_a{display: block;font-size: 17px;line-height: 1;font-weight: 600;color: var(--main-point-color); transition: 0.3s; margin-bottom: 10px;} .at-header .pc-menu .DM5_menu_view .all_sub_a{display: block;padding: 8px 0;font-size: 15px;font-weight: 400; line-height: 1.2em;color: #5d5d5d; transition: 0.3s;} .at-header .pc-menu .DM5_menu_view .all_sub_a:hover{color: var(--main-point-color);} .at-header .pc-menu .DM5_menu_view .all_sub_a span.text{position: relative;} .at-header .pc-menu .DM5_menu_view .all_sub_a span.text::before{content: ''; display: block; width: 0; height: 1px; background-color: var(--main-point-color); position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; transition: 0.5s;} .at-header .pc-menu .DM5_menu_view .all_sub_a:hover span.text::before{width: 100%;} .at-header .pc-menu .DM5_menu_view .all_sub_a span.new_icon{color: #fff; background-color: var(--main-point-bg-color-hover); padding: 4px 5px; font-size: 10px; border-radius: 2px; position: relative; top: -2px; margin-left: 10px;} */ .at-header .pc-menu .DMS05 .sub-1div .link_icon{display: inline-block;} .at-header .pc-menu .DMS05 .sub-1div .link_icon img{display: block; margin-left: 1px;} .at-header .pc-menu .DMS05 .sub-1div.var1{position: absolute;/*left: 50%;transform: translateX(-50%);width: 100vw;background: #fff;box-shadow: 0 12px 12px rgba(0, 0, 0, .175);*/z-index: 11;text-align: center;opacity: 0;visibility: hidden;transition: all 0.3s ease-out;transform-origin: top;height: 0;display: block; background-color: transparent; box-shadow: none;} .at-header .pc-menu .DMS05 .sub-1div.var1::before{content: ''; display: block; position: absolute;left: 50%;transform: translateX(-50%);width: 200vw;height: 0%; background: #fff;box-shadow: 0 12px 12px rgba(0, 0, 0, .175); border-top: 1px solid #ebebeb;transition: all 0.3s ease-out; opacity: 0;} .at-header .pc-menu .DMS05 .sub-1div.var1 .menu-ul .menu-li{position: relative;} .at-header .pc-menu .DMS05 .menu-li:hover .sub-1div.var1{opacity: 1;visibility: visible;height: 74px;} .at-header .pc-menu .DMS05 .menu-li:hover .sub-1div.var1::before{height: 100%; opacity: 1;} .at-header .pc-menu .DMS05 .sub-1div.var1 > ul > li {display: inline-block;} .at-header .pc-menu .DMS05 .sub-1div.var1 > ul > li .sub-1da {font-size: 17px;font-weight: 400;color: var(--main-point-color);line-height: 72px;display: block;margin: 0 20px; padding: 0 15px; border: none;} .at-header .pc-menu .DMS05 .sub-1div.var1 > ul > li .sub-1da span.text{position: relative;} .at-header .pc-menu .DMS05 .sub-1div.var1 > ul > li .sub-1da span.text::before{content: ''; display: block; width: 0; height: 1px; background-color: var(--main-point-color); position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; transition: 0.5s;} .at-header .pc-menu .DMS05 .sub-1div.var1 > ul > li.on .sub-1da span.text::before, .at-header .pc-menu .DMS05 .sub-1div.var1 > ul > li .sub-1da:hover span.text::before{width: 100%;} /* 정렬 바꿀 때 수정 */ .at-header .pc-menu .DMS05 .sub-1div.var1 > ul > .menu-li:nth-of-type(n+2) .sub-1div{left: 50%; transform: translateX(-50%);} .at-header .pc-menu .DMS05 .sub-1div.var1 > ul > .menu-li:last-of-type .sub-1div{right: 0; left: auto; transform: none;} .at-header .pc-menu .DMS05 .sub-1div.var2{background-color: #fff;position: absolute;left: 50%;transform: translateX(-50%);width: 100vw;height: auto;padding: 40px 0 105px;border-top: 1px solid #f6f6f6; box-shadow: 0 10px 15px rgba(0,0,0,0.05); display: none; overflow-y: auto;} .at-header .pc-menu .DMS05 .sub-1div.var2 > .container_fix{max-width: 1290px;} .at-header .pc-menu .DMS05 .sub-1div.var2 .sub-1dul{display: flex;flex-wrap: nowrap;overflow-y: hidden; width: 100%; gap: 60px;} .at-header .pc-menu .DMS05 .sub-1div.var2 .column{flex: 1; display: flex; flex-direction: column; gap: 10px;} .at-header .pc-menu .DMS05 .sub-1div.var2 .sub-1dli{border-top: 1px solid #ebebeb; padding-top: 20px;} .at-header .pc-menu .DMS05 .sub-1div.var2 .column .sub-1dli:first-child{border: none; padding-top: 0;} .at-header .pc-menu .DMS05 .sub-1div.var2 .sub-1da{display: block;font-size: 17px;line-height: 1;font-weight: 600;color: var(--main-point-color); transition: 0.3s; margin-bottom: 10px; padding: 0; border: none;} .at-header .pc-menu .DMS05 .sub-1div.var2 .sub-2div{display: block !important; position: relative; left: 0; box-shadow: none; -webkit-box-shadow: none; background-color: transparent; } .at-header .pc-menu .DMS05 .sub-1div.var2 .sub-2da{display: block;padding: 10px 0;font-size: 15px;font-weight: 400; line-height: 1.2em;color: #5d5d5d; transition: 0.3s; border: none; background-color: transparent;} .at-header .pc-menu .DMS05 .sub-1div.var2 .sub-2dli.on .sub-2da, .at-header .pc-menu .DMS05 .sub-1div.var2 .sub-2da:hover{color: var(--main-point-color); background-color: transparent;} .at-header .pc-menu .DMS05 .sub-1div.var2 .sub-2da span.text{position: relative;} .at-header .pc-menu .DMS05 .sub-1div.var2 .sub-2da span.text::before{content: ''; display: block; width: 0; height: 1px; background-color: var(--main-point-color); position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; transition: 0.5s;} .at-header .pc-menu .DMS05 .sub-1div.var2 .sub-2dli.on .sub-2da span.text::before, .at-header .pc-menu .DMS05 .sub-1div.var2 .sub-2da:hover span.text::before{width: 100%;} .at-header .pc-menu .DMS05 span.new_icon{color: #fff; background-color: var(--main-point-bg-color-hover); padding: 4px 5px; font-size: 10px; border-radius: 2px; position: relative; top: -2px; margin-left: 10px;} @media((max-width: 1510px)){ .at-header .pc-menu .DMS05 .sub-1div.var1 > ul > li .sub-1da{font-size: 14px;} .at-header .pc-menu .DMS05 .sub-1div.var2 .sub-1da{font-size: 14px;} .at-header .pc-menu .DMS05 .sub-1div.var2 .sub-2da{font-size: 13px;} } /* 드롭메뉴6 (본인 2차) 이미지 설명 */ .at-header .pc-menu .DMS06 .nav-top.nav-both .menu-li{position: relative;} .at-header .pc-menu .DMS06 .nav-top.nav-both .sub-1div{left: 35px; top: calc(100% - 5px); box-shadow: 0 5px 15px -3px rgba(0,0,0,0.15); padding: 25px; position: absolute; /*width: 305px;*/ border-radius: 8px;} .at-header .pc-menu .DMS06 .nav-top.nav-both .menu_ul_01 .menu-li:nth-child(2) .sub-1div {padding-bottom: 20px;} .at-header .pc-menu .DMS06 .nav-top.nav-both .sub-1div .link_icon{display: inline-block;} .at-header .pc-menu .DMS06 .nav-top.nav-both .sub-1div .link_icon img{display: block; margin-left: 1px;} .at-header .pc-menu .DMS06 .nav-top.nav-both .sub-1div .sub-1div-con-text{color: var(--main-point-color); font-size: 16px; font-weight: 800; line-height: 1em; margin-bottom: 10px;} .at-header .pc-menu .DMS06 .nav-top .sub-1dli + .sub-1dli{margin-top: 5px;} .at-header .pc-menu .DMS06 .nav-top .sub-1da{border-bottom: none; display: flex; align-items: center; padding: 8px; border-radius: 6px; transition: 0.3s;} .at-header .pc-menu .DMS06 .nav-top .sub-1da .img_box{width: 45px; height: 45px; border-radius: 13px; overflow: hidden; margin-right: 10px; flex-shrink: 0;} .at-header .pc-menu .DMS06 .nav-top .sub-1da .img_box img{display: block; width: 100%; object-fit: cover;} .at-header .pc-menu .DMS06 .nav-top .sub-1da .text_box .text_top{font-size: 16px; font-weight: 700; color: var(--main-point-color); line-height: 1.2em;} .at-header .pc-menu .DMS06 .nav-top .sub-1da .text_box .text_bot{font-size: 14px; font-weight: 400; color: #919191; line-height: 1.2em; margin-top: 5px;} .at-header .pc-menu .DMS06 .nav-top .sub-1da .text_box .menu_sticker_wrap{display: inline-block; line-height: 0; position: relative; top: -3px;} .at-header .pc-menu .DMS06 .nav-top .sub-1da .text_box .menu_sticker{display: inline-block; margin-right: 2px; font-size: 11px; font-weight: 500; border-radius: 3px; line-height: 1em; padding: 3px 6px; border: 1px solid; border-color: #f1f1f1; background-color: #f1f1f1; color: #979797;} .at-header .pc-menu .DMS06 .nav-top .sub-1da .text_box .menu_sticker img {display: inline-block; margin-right: 2px;} .at-header .pc-menu .DMS06 .nav-top .sub-1dli.on > .sub-1da, .at-header .pc-menu .DMS06 .nav-top .sub-1dli:hover > .sub-1da{background-color: #f2f4f6;} .at-header .pc-menu .DMS06 .nav-top .sub-1dli:hover > .sub-1da + .sub-1div-arr{border-color: var(--main-point-color);} /* 전체메뉴 */ /* 전체메뉴1 */ .at-header .all_menu_container.FM1{background-color: #fff;position: absolute;top: 84px;left: 50%;transform: translateX(-50%);width: 100vw;padding: 0;border-top: 1px solid #ebebeb; box-shadow: 0 10px 15px rgba(0,0,0,0.05); display: none;} .at-header .all_menu_container.FM1 > .container_fix{max-width: 1470px;} .at-header .all_menu_container.FM1 .all_menu_ul{display: flex; align-items: flex-start; justify-content: center; overflow-y: hidden; width: 100%;} .at-header .header-menu.FM1_on .pc-menu.on .nav-top .menu_ul_01 .menu-a::before{content: ''; display: block; width: 0; height: 2px; background-color: var(--main-point-color-hover); position: absolute; left: 0; bottom: -3px; transition: .5s ease-out; transform: none;} .at-header .header-menu.FM1_on .pc-menu.on .nav-top .menu_ul_01 .menu-a:hover::before, .at-header .header-menu.FM1_on .pc-menu.on .nav-top .menu_ul_01 .menu-li.hover .menu-a::before{width: 100%;} .at-header .all_menu_container.FM1 .all_menu_li{width: max(8vw,158px); padding-bottom: 50px;} .at-header .all_menu_container.FM1 .all_menu_li{position: relative;} .at-header .all_menu_container.FM1 .all_menu_li+li::before{content: ''; display: block; width: 1px; height: 100vh; background-color: #ebebeb; position: absolute; top: 0; left: 0;} .at-header .all_menu_container.FM1 .all_menu_li:nth-of-type(1)::after{content: ''; display: block; width: 1px; height: 100vh; background-color: #ebebeb; position: absolute; top: 0; left: 0;} .at-header .all_menu_container.FM1 .all_menu_li:last-child::after{content: ''; display: block; width: 1px; height: 100vh; background-color: #ebebeb; position: absolute; top: 0; right: 0;} .at-header .all_menu_container.FM1 .all_menu_a{display: none;font-size: 16px;font-weight: 700;color: var(--main-point-color); transition: 0.3s;} .at-header .all_menu_container.FM1 .all_menu_li:hover .all_menu_a{color: var(--main-point-color-hover);} .at-header .all_menu_container.FM1 .all_sub_div{margin-top: 30px;display: block !important;} .at-header .all_menu_container.FM1 .all_sub_a{display: block;padding: 10px 0;font-size: 15px;font-weight: 400; line-height: 1.2em;color: var(--main-point-color); transition: 0.3s; text-align: center; position: relative;} .at-header .all_menu_container.FM1 .all_sub_a span.all_sub_text{position: relative;} .at-header .all_menu_container.FM1 .all_sub_a span.all_sub_text::before{content: ''; display: block; width: 0; height: 1px; background-color: var(--main-point-color); position: absolute; left: 0; bottom: 0; transition: 0.5s;} .at-header .all_menu_container.FM1 .all_sub_li.on .all_sub_a span.all_sub_text::before, .at-header .all_menu_container.FM1 .all_sub_a:hover span.all_sub_text::before{width: 100%;} .at-header .all_menu_container.FM1 .all_sub_a span.link_icon{display: inline-block;} .at-header .all_menu_container.FM1 .all_sub_a span.link_icon img{display: block;} /* 전체메뉴2 */ .all_menu_container.FM2{width:100%; position:fixed; top:0; left:0; opacity:0; z-index:14; height:100vh; visibility:hidden; transform-origin:top; transition:all 0.3s ease-out; background-color: #ffffff; overflow-y: auto;} .admin-H .all_menu_container.FM2{top: 50px;} .all_menu_container.FM2.active{opacity:1; visibility:visible;} .all_menu_container.FM2 .all_menu_header .container_fix{display:table; max-width: 1850px; width: 100%; position: relative;} .all_menu_container.FM2 .all_menu_header .container_fix > a, .all_menu_container.FM2 .all_menu_header .container_fix > .all_menu_logo{display:table-cell; padding:0; vertical-align:middle;} .all_menu_container.FM2 .all_menu_header a.all_logo{line-height:84px; display: inline-block;} .all_menu_container.FM2 .all_menu_header a.all_logo img{display: inline-block;} .all_menu_container.FM2 .right_btn{height: 84px; display: flex; align-items: center; justify-content: flex-end;} .all_menu_container.FM2 .all_menu_header a.all_menu_close{display: block;} /* .all_menu_container.FM2 .all_menu_header a.all_menu_close{position:absolute; top: 50%; transform: translateY(-50%); right: 20px; width:20px; height:20px} */ .all_menu_container.FM2 .all_menu_body{padding:140px 0; position:relative;} .all_menu_container.FM2 .all_menu_body .container_fix{max-width: 1850px; padding: 0; display: flex;} .all_menu_container.FM2 .all_menu_body .container_fix .left_text{font-size: 80px; line-height: 1.3; font-weight: 800; padding-left: 100px; transition: 0.5s; position: relative; top: -10px; color: var(--main-point-color)} .all_menu_container.FM2 .all_menu_body .container_fix .all_menu_ul{padding: 25px 15px 0 190px; width: 42.434%;} .all_menu_container.FM2 .all_menu_body .all_menu_ul{right: -20px; opacity:0; position: relative; transition: 0.3s;} .all_menu_container.FM2.active .all_menu_body .all_menu_ul{right: 0; opacity:1;} .all_menu_container.FM2 .all_menu_body ul.all_menu_ul > li{padding-bottom: 45px; transition:all 0.2s ease-in-out; position:relative;} .all_menu_container.FM2 .all_menu_body ul.all_menu_ul > li > a{font-size:36px; color:#333333; font-weight:700; line-height: 1em; display:block; transition: 0.2s;} .all_menu_container.FM2 .all_menu_body ul.all_menu_ul > li > a span{position: relative; display: inline-block;} .all_menu_container.FM2 .all_menu_body ul.all_menu_ul > li > .all_sub_div{padding-top:25px; display:none;} .all_menu_container.FM2 .all_menu_body ul.all_menu_ul > li > .all_sub_div ul{display: flex; flex-wrap: wrap;} .all_menu_container.FM2 .all_menu_body ul.all_menu_ul > li > .all_sub_div ul li{width: 50%;} .all_menu_container.FM2 .all_menu_body ul.all_menu_ul > li > .all_sub_div ul li a{font-size:20px; font-weight: 500; color:var(--main-point-color); line-height:45px;transition: 0.2s;} .all_menu_container.FM2 .all_menu_body ul.all_menu_ul > li > .all_sub_div ul li a:hover{color:var(--main-point-color-hover);} .all_menu_container.FM2 .all_menu_body ul.all_menu_ul > li > .all_sub_div ul li a .link_icon{display: inline-block;} .all_menu_container.FM2 .all_menu_body ul.all_menu_ul > li > .all_sub_div ul li a .link_icon img{display: block;} @media (max-width:1500px){ .all_menu_container.FM2 .all_menu_body{padding:50px 0;} .all_menu_container.FM2 .all_menu_body ul.all_menu_ul > li{padding-bottom:30px;} .all_menu_container.FM2 .all_menu_body ul.all_menu_ul > li::before{top:100px;} .all_menu_container.FM2 .all_menu_body .all_menu_line {top:150px;} } @media (max-width:1350px){ .all_menu_container.FM2 .all_menu_body .container_fix .left_text{font-size: 50px;} .all_menu_container.FM2 .all_menu_body .container_fix .all_menu_ul{padding-left: 150px;} } @media(max-width: 1200px){ .admin-H .all_menu_container.FM2{top: 0;} .at-header .pc-menu .DMS06 .nav-top.nav-both .sub-1div .sub-1div-con-text {font-size: 15px;} .at-header .pc-menu .DMS06 .nav-top .sub-1da .text_box .text_top {font-size: 15px;} .at-header .pc-menu .DMS06 .nav-top .sub-1da .text_box .text_bot {font-size: 13px;} } /* 전체메뉴3 */ .header_inquiry_box.FM3 {position: fixed;z-index: 21;top: 0;right: 0;width: 125px;height: 100vh;visibility: hidden;transition: all 0.8s cubic-bezier(.7, .1, .2, 1);} .header_inquiry_box.FM3.active{visibility: visible;} .header_inquiry_box.FM3 .inquiry_bg {position: absolute;top: 0;left: 0;right: 0;background-color: var(--main-point-bg-color-hover);height: 0;transition: all 1s cubic-bezier(.7, 0, .2, 1);transition-delay: 1s;} .header_inquiry_box.FM3.active .inquiry_bg{height: 100vh;transition-delay: 0s;} .header_inquiry_box.FM3 .inquiry_btn {position: absolute;display: flex;align-items: center;justify-content: center;bottom: 0px;left: 0px;width: 100%;height: 15.6rem;z-index: 1;opacity: 0;transform: translateY(-30px);transition: all 0.8s cubic-bezier(.7, .1, .2, 1);transition-delay: 1s;} .header_inquiry_box.FM3.active .inquiry_btn{opacity: 1;visibility: inherit;transform: translate(0px, 0px);transition-delay: 0.8s;} .header_inquiry_box.FM3 .inquiry_btn_wrpa{display: flex;flex-direction: column;align-items: center;} .header_inquiry_box.FM3 .inquiry_btn img{display: block;position: relative;top: -40px;} .header_inquiry_box.FM3 .inquiry_btn .inquiry_btn_inner{display: block;width: 20rem;text-align: center;transform: rotate(90deg);color: #f2f2f2;font-size: 1.8rem;font-weight: 600;margin: 0 -3rem;} .header_inquiry_box.FM3 .inquiry_btn .inquiry_btn_inner .txt{position: relative;} .header_inquiry_box.FM3 .inquiry_btn .inquiry_btn_inner .txt::before{position: absolute;bottom: -4px;left: 0px;width: 100%;height: 3px;background-color: #fff;content: "";transition: all 0.4s cubic-bezier(.7, 0, .2, 1);transform-origin: 100% 0;transform: scaleX(0);transition-property: transform;} .header_inquiry_box.FM3 .inquiry_btn:hover .inquiry_btn_inner .txt::before{transform: scaleX(1);transform-origin: 0 0;} .header_inquiry_box.FM3 .all_menu_close{display: none;width: 125px;height: 84px;position: fixed;top: 0px;right: 0px;z-index: 10;cursor: pointer;} .admin-H .header_inquiry_box.FM3 .all_menu_close{height: 190px;} .header_inquiry_box.FM3 .all_menu_close .close_btn{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 20px;height: 20px;} .header_inquiry_box.FM3 .all_menu_close .line{width: 28px;height: 2px;background: var(--main-point-color);position: absolute;top: 40%;right: -25%;transition: all 0.3s;} .header_inquiry_box.FM3.active .all_menu_close .line{background-color: #ffffff;} .header_inquiry_box.FM3.active .all_menu_close .line1{transform: rotate(45deg);} .header_inquiry_box.FM3.active .all_menu_close .line2{opacity: 0;} .header_inquiry_box.FM3.active .all_menu_close .line3{transform: rotate(-45deg);} .all_menu_container.FM3{position: fixed;top: 0px;left: 0px;width: 100%;height: 100vh;z-index: -1;opacity: 0;visibility: hidden;transition: 1s;transition-delay: 0.7s;} .all_menu_container.FM3.active{z-index: 15;opacity: 1;visibility: inherit;} .all_menu_container.FM3 .all_menu_logo{position: absolute;top: 25px;left: 48px;opacity: 0;transform: translate(0px,-50px);transition: all 0.4s cubic-bezier(.7, 0, .2, 1);} .admin-H .all_menu_container.FM3 .all_menu_logo{top: 75px;} .all_menu_container.FM3 .all_menu_logo.active {opacity: 1;transform: translate(0,0);} .all_menu_container.FM3 .all_menu_sitemap{position: absolute;width: 100%;height: 100%;} .all_menu_container.FM3 .sitemap_bg{position: absolute;right: 0;top: 0px;width: 100%;height: 100%;background: #fff;transform: translate(calc(100% + 6vw), 0) rotate(0.001deg);transition: 1s;transition-delay: .7s;} .all_menu_container.FM3.active .sitemap_bg{transform: translate(0,0);transition-delay: .7s;} .all_menu_container.FM3 .sitemap_area{position: relative;box-sizing: border-box;margin-right: 125px;} .all_menu_container.FM3 .sitemap_left{position: relative;float: left;height: 100vh;width: 35.655%;display: flex;flex-direction: column;justify-content: space-between;flex: 1;padding: 180px 7.3vw 15vh 5.25vw;box-sizing: border-box;} .all_menu_container.FM3 .sitemap_left .all_menu_logo img{display: inline-block;} .all_menu_container.FM3 .sitemap_left .sitemap_txt h2{font-size: 52px;line-height: 1.32;font-weight: 700;color: var(--main-point-color);margin-bottom: 4rem;} .all_menu_container.FM3 .sitemap_left .hidden_box {display: block;overflow: hidden;line-height: inherit;font-weight: inherit;} .all_menu_container.FM3 .sitemap_left .hidden_item{display: block;transform: translateY(100%) rotate(10deg);opacity: 0;transform-origin: left;transition: all 0.8s cubic-bezier(.7, .1, .2, 1);transition-duration: 1s;transition-property: transform, opacity;} .all_menu_container.FM3.active .sitemap_left .hidden_item{opacity: 1;transform: translate(0px, 0px);transition-delay: 1.5s;} .all_menu_container.FM3.active .sitemap_left h4 .hidden_item{transition-delay: 1.7s;} .all_menu_container.FM3 .sitemap_left .sitemap_txt h4{font-size: 22px;color: #444444;font-weight: 500;line-height: 1.5em;} .all_menu_container.FM3 .sitemap_left .sitemap_footer{position: relative;transform: translate(0,50px);opacity: 0;transition: 1s;transition-delay: 0s;} .all_menu_container.FM3.active .sitemap_left .sitemap_footer{transform: translate(0,0);opacity: 1;transition-delay: 2s;} .all_menu_container.FM3 .sitemap_left .sitemap_footer_menu{margin-bottom: 25px;transform: translate(0,50px);opacity: 0;transition: all 0.8s;} .all_menu_container.FM3 .sitemap_left.active .sitemap_footer_menu{transform: translate(0,0);opacity: 1;} .all_menu_container.FM3 .sitemap_left .sitemap_footer_menu li a {color: var(--main-point-color);font-size: 17px;font-weight: 600;} .all_menu_container.FM3 .sitemap_left .family_site_box{position: relative;width: 124px;text-align: left;} .all_menu_container.FM3 .sitemap_left .family_site_box .family_site_box_btn{display: flex;align-items: center;justify-content: space-between;width: 100%;text-align: left;color: var(--main-point-color);box-sizing: border-box;transition: all 0.4s cubic-bezier(.7, 0, .2, 1);height: 35px;font-size: 13px;border: 0;padding: 0;font-weight: 500;background-color: transparent;} .all_menu_container.FM3 .sitemap_left .family_site_box .family_site_box_btn img{display: block; position: relative; transition: 0.2s;} .all_menu_container.FM3 .sitemap_left .family_site_box .family_site_box_btn.on img{transform: rotate(180deg);} .all_menu_container.FM3 .sitemap_left .family_site_box .family_site_list{position: absolute;bottom: 100%;left: 0px;width: 100%;background-color: #fff;z-index: 11;box-sizing: border-box;border: 1px solid var(--main-point-color);padding: 0;display: none;} .all_menu_container.FM3 .sitemap_left .family_site_box .family_site_list a{display: block;color: #333;padding: 1rem;font-size: 13px;transition: 0.2s;} .all_menu_container.FM3 .sitemap_left .family_site_box .family_site_list a:hover{background-color: #f2f2f2;} .all_menu_container.FM3 .sitemap_left .sitemap_copyright{color: #666666;font-size: 12px;font-weight: 500;margin-top: 8px;} .all_menu_container.FM3 .sitemap_right{position: relative;float: right;height: 100vh;width: calc(100% - 35.655%);box-sizing: border-box;flex: 1;display: flex;align-items: flex-start;justify-content: center;} .all_menu_container.FM3 .sitemap_right .bg{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background-color: #f6f6f6;transform-origin: 100% 0;transform: scaleX(0);transition: 1s;transition-delay: 0.7s;} .all_menu_container.FM3.active .sitemap_right .bg{transform: scale(1);} .all_menu_container.FM3 .sitemap_right .all_menu_ul{position: relative;padding-top: 180px;padding-left: 150px;padding-right: 30px;} .all_menu_container.FM3.active .sitemap_right .all_menu_ul{transform: translate(0px, 0px);opacity: 1;height: 100%;overflow-y: auto;} .all_menu_container.FM3.active .sitemap_right .all_menu_ul::-webkit-scrollbar{width: 0;} .all_menu_container.FM3 .sitemap_right .all_menu_li{display: flex;padding-bottom: 0;margin-bottom: 50px;opacity: 0;transform: translateX(-50px);} .all_menu_container.FM3 .sitemap_right .all_menu_li.fadeInSlide{opacity: 0;transform: translateX(-50px);animation: fadeInSlide 0.5s ease-in-out forwards; } .all_menu_container.FM3 .sitemap_right .all_menu_li.fadeOutSlide{opacity: 1;transform: translateX(0);animation: fadeOutSlide 0.5s ease-in-out forwards; } @keyframes fadeInSlide { to { opacity: 1; transform: translateX(0); } } @keyframes fadeOutSlide { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-50px); } } .all_menu_container.FM3 .sitemap_right .all_menu_a{width: 19rem;max-width: 266px;} .all_menu_container.FM3 .sitemap_right .all_menu_h3{display: inline-block; font-size: 29px;font-weight: 700;line-height: 1.2;color: var(--main-point-color);transition: all 0.4s cubic-bezier(.7, 0, .2, 1);} /* .all_menu_container.FM3 .sitemap_right li.on .all_menu_h3, .all_menu_container.FM3 .sitemap_right li:hover .all_menu_h3{color: var(--main-point-color-hover);} */ .all_menu_container.FM3 .sitemap_right li.on .all_menu_h3, .all_menu_container.FM3 .sitemap_right li:hover .all_menu_h3{color: var(--main-point-color);} .all_menu_container.FM3 .sitemap_right .all_menu_a .link_icon{display: inline-block; margin-left: 5px;} .all_menu_container.FM3 .sitemap_right .all_menu_a .link_icon img{display: block; position: relative; top: 2px;} .all_menu_container.FM3 .sitemap_right .all_sub_div{width: 30vw;display: block;} .all_menu_container.FM3 .sitemap_right li{position: relative;float: left;margin-right: 50px;padding: 0 0 25px;} .all_menu_container.FM3 .sitemap_right .all_sub_li + .all_sub_li::before {position: absolute;top: 4px;left: -27px;font-size: 15px;content: "/";color: #c6c6c6;font-weight: 500;} .all_menu_container.FM3 .sitemap_right li .all_sub_a{position: relative;display: block;font-size: 19px;font-weight: 500;line-height: 1.2em;color: #333333;transition: all 0.4s cubic-bezier(.7, 0, .2, 1);} .all_menu_container.FM3 .sitemap_right li .all_sub_a::before{position: absolute;bottom: -5px;left: 0px;width: 100%;height: 2px;background-color: var(--main-point-color-hover);transition: all 0.4s cubic-bezier(.7, 0, .2, 1);transform-origin: 100% 0;transform: scaleX(0);transition-property: transform;content: "";} .all_menu_container.FM3 .sitemap_right li .all_sub_li.on .all_sub_a, .all_menu_container.FM3 .sitemap_right li .all_sub_a:hover{color: var(--main-point-color-hover);} .all_menu_container.FM3 .sitemap_right li .all_sub_li.on .all_sub_a::before, .all_menu_container.FM3 .sitemap_right li .all_sub_a:hover::before{transform: scaleX(1);transform-origin: 0 0;} .all_menu_container.FM3 .sitemap_right li .all_sub_a .link_icon img{display: inline-block; position: relative; top: -1px;} @media(max-width: 1800px){ .all_menu_container.FM3 .sitemap_right .all_menu_ul{padding-left: 100px;} .all_menu_container.FM3 .sitemap_right .all_menu_h3{width: 13rem;} .all_menu_container.FM3 .sitemap_right .all_menu_li{margin-right: 0;} .all_menu_container.FM3 .sitemap_right .all_sub_div{width: 26vw;} } @media(max-width: 1600px){ .all_menu_container.FM3 .sitemap_left .sitemap_txt h2{margin-bottom: 2rem;} } @media(max-width: 1200px){ .all_menu_container.FM3 .sitemap_right .all_menu_ul{padding-left: 60px;} .all_menu_container.FM3 .sitemap_left .sitemap_txt h2{font-size: 42px;} .all_menu_container.FM3 .sitemap_left .sitemap_txt h4{font-size: 18px;} } /* 전체메뉴4 */ .all_menu_container.FM4{width:100%; position:fixed; top:0; left:0; opacity:0; z-index:14; height:100vh; visibility:hidden; transform-origin:top; transition:all 0.3s ease-out; background-color: #ffffff; overflow-y: auto;} .admin-H .all_menu_container.FM4{top: 50px;} .all_menu_container.FM4.active{opacity:1; visibility:visible;} .all_menu_container.FM4 .container_fix{display:table; max-width: 1850px; width: 100%; position: relative;} .all_menu_container.FM4 .all_menu_header .container_fix > a, .all_menu_container.FM4 .all_menu_header .container_fix > .all_menu_logo{display:table-cell; padding:0; vertical-align:middle;} .all_menu_container.FM4 .all_menu_header a.all_logo{line-height:84px; display: inline-block;} .all_menu_container.FM4 .all_menu_header a.all_logo img{display: inline-block;} .all_menu_container.FM4 .right_btn{height: 84px; display: flex; align-items: center; justify-content: flex-end;} .all_menu_container.FM4 .all_menu_header a.all_menu_close{display: block; width:20px; height:20px} /* .all_menu_container.FM4 .all_menu_header a.all_menu_close{position:absolute; top: 50%; transform: translateY(-50%); right: 20px; width:20px; height:20px} */ .all_menu_container.FM4 .all_menu_body{padding:70px 0 0; position:relative;} .all_menu_container.FM4 .all_menu_body .all_menu_ul{display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; table-layout: fixed;} .all_menu_container.FM4 .all_menu_body .all_menu_ul > li {display: block;flex: 1; min-height: 550px;padding: 0;transition: all 0.2s ease-in-out;position: relative;padding-right: 20px;} .all_menu_container.FM4 .all_menu_body .all_menu_ul > li:first-child{max-width: 336px;} .all_menu_container.FM4 .all_menu_body .all_menu_ul > li:last-child{max-width: 333px;} .all_menu_container.FM4 .all_menu_body .all_menu_ul > li + li {padding-left: 50px;} /* .all_menu_container.FM4 .all_menu_body .all_menu_ul > li + li::before{content: '';display: block;width: 1px;height: calc(100% + 190px); min-height: 100vh; background-color: #efefef;position: absolute;top: -154px;left: 0;} */ .all_menu_container.FM4 .all_menu_body .all_menu_ul > li + li .bar_line{content: '';display: block;width: 1px;height: calc(100% + 190px); min-height: 100vh; background-color: #efefef;position: absolute;top: -154px;left: 0;} .all_menu_container.FM4 .all_menu_body .all_menu_ul > li > a{font-size: 32px;color: var(--main-point-color);font-weight: 700;line-height: 1.2em;padding-bottom: 30px;display: block;position: relative;transition: 0.3s;} .all_menu_container.FM4 .all_menu_body .all_menu_ul > li.on > a, .all_menu_container.FM4 .all_menu_body .all_menu_ul > li:hover > a{color: var(--main-point-color-hover);} .all_menu_container.FM4 .all_menu_body .all_menu_ul > li > a::before{content: '';display: block;width: 22px;height: 1px;background-color: #cccccc;position: absolute;bottom: 0;left: 0;} .all_menu_container.FM4 .all_menu_body .all_menu_ul > li .link_icon{display: inline-block;} .all_menu_container.FM4 .all_menu_body .all_menu_ul > li .link_icon img{display: block;} .all_menu_container.FM4 .all_menu_body .all_menu_ul .all_sub_div{padding-top: 30px;display: block;} .all_menu_container.FM4 .all_menu_body .all_menu_ul .all_sub_div > ul > li{margin-bottom: 30px;} .all_menu_container.FM4 .all_menu_body .all_menu_ul .all_sub_div > ul > li:last-child{margin-bottom: 0;} .all_menu_container.FM4 .all_menu_body .all_menu_ul .all_sub_div > ul > li > a {font-size: 19px;color: var(--main-point-color);line-height: 1.2em;font-weight: 700;transition: 0.3s;} .all_menu_container.FM4 .all_menu_body .all_menu_ul .all_sub_div > ul > li.on > a, .all_menu_container.FM4 .all_menu_body .all_menu_ul .all_sub_div > ul > li:hover > a{color: var(--main-point-color-hover);} .all_menu_container.FM4 .all_menu_body .all_menu_ul .all_sub_div2{padding-top: 20px;display: block;} .all_menu_container.FM4 .all_menu_body .all_menu_ul .all_sub_div2 > ul > li{margin-bottom: 10px;} .all_menu_container.FM4 .all_menu_body .all_menu_ul .all_sub_div2 > ul > li > a {font-size: 15px;color: #666666;line-height: 1.2em;transition: 0.2s;padding-left: 10px;} .all_menu_container.FM4 .all_menu_body .all_menu_ul .all_sub_div2 > ul > li.on > a, .all_menu_container.FM4 .all_menu_body .all_menu_ul .all_sub_div2 > ul > li:hover > a {color: var(--main-point-color);} .all_menu_container.FM4 .all_menu_body .all_menu_ul .all_sub_div2 > ul > li > a img{display: inline-block; position: relative; top: -1px;} .all_menu_container.FM4 .all_menu_footer{padding: 60px 0;} .all_menu_container.FM4 .all_menu_footer .info_wrap{display: table; table-layout: fixed;} .all_menu_container.FM4 .all_menu_footer .info_wrap li{display: table-cell;} .all_menu_container.FM4 .all_menu_footer .info_wrap li:first-child{width: 370px;} .all_menu_container.FM4 .all_menu_footer .info_wrap li h4{font-size: 14px; font-weight: 700; color: #777777; line-height: 1em; margin-bottom: 20px;} .all_menu_container.FM4 .all_menu_footer .info_wrap li p{font-size: 13px; font-weight: 400; color: var(--main-point-color); line-height: 1em;} .all_menu_container.FM4 .all_menu_footer .info_wrap li p + p{margin-top: 10px;} .all_menu_container.FM4 .all_menu_footer .info_wrap li p img{display: inline-block; position: relative; top: -1px;} @media(max-width: 1200px){ .admin-H .all_menu_container.FM4{top: 0;} } /* 전체메뉴5 */ .all_menu_container.FM5{background: url(../../../../img/DMA5_bg.jpg) no-repeat; background-size: 100% 100%; width:100%; position:fixed; top:0; left:0; opacity:0; z-index:14; height:100vh; visibility:hidden; transform-origin:top; transition:all 0.3s ease-out; overflow-y: auto;} .admin-H .all_menu_container.FM5{top: 50px;} .all_menu_container.FM5.active{opacity:1; visibility:visible;} .all_menu_container.FM5 .all_menu_header .container_fix{display:table; max-width: 1850px; width: 100%; position: relative;} .all_menu_container.FM5 .all_menu_header .container_fix > a, .all_menu_container.FM5 .all_menu_header .container_fix > .all_menu_logo{display:table-cell; padding:0; vertical-align:middle;} .all_menu_container.FM5 .all_menu_header a.all_logo{line-height:84px; display: inline-block;} .all_menu_container.FM5 .all_menu_header a.all_logo img{display: inline-block;} .all_menu_container.FM5 .right_btn{height: 84px; display: flex; align-items: center; justify-content: flex-end;} /* .all_menu_container.FM5 .all_menu_header a.all_menu_close{position:absolute; top: 50%; transform: translateY(-50%); right: 20px; width:20px; height:20px} */ .all_menu_container.FM5 .all_menu_header a.all_menu_close{display: block;} .all_menu_container.FM5 .all_menu_header a.all_menu_close img{filter: invert(1) brightness(2);} .all_menu_container.FM5 .all_menu_body{padding:70px 0 0; position:relative;} .all_menu_container.FM5 .all_menu_body *{color: #999999;} .all_menu_container.FM5 .all_menu_body .container_fix{max-width: 1250px;} .all_menu_container.FM5 .all_menu_body .all_menu_ul{display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; padding-left: 65px; row-gap: 75px;} .all_menu_container.FM5 .all_menu_body .all_menu_ul > li {width: 25%;} .all_menu_container.FM5 .all_menu_body .all_menu_ul > li > a{display: inline-block; font-size: 28px; font-weight: 700; line-height: 1.4em; margin-bottom: 30px; transition: 0.3s;} .all_menu_container.FM5 .all_menu_body .all_menu_ul > li > a span.all_menu_text{transition: 0.3s;} .all_menu_container.FM5 .all_menu_body .all_menu_ul > li.on > a span, .all_menu_container.FM5 .all_menu_body .all_menu_ul > li:hover > a span{color: #ffffff;} .all_menu_container.FM5 .all_menu_body .all_menu_ul > li > a span.all_menu_text{position: relative;} .all_menu_container.FM5 .all_menu_body .all_menu_ul > li > a span.all_menu_text::before{content: ''; display: block; width: 0; height: 2px; background-color: #fff; position: absolute; left: 0; bottom: -2px; transition: 0.3s;} .all_menu_container.FM5 .all_menu_body .all_menu_ul > li > a .link_icon{display: inline-block;} .all_menu_container.FM5 .all_menu_body .all_menu_ul > li > a .link_icon img{display: block; transition: 0.3s; position: relative; top: 2px;} .all_menu_container.FM5 .all_menu_body .all_menu_ul > li.on > a .link_icon img, .all_menu_container.FM5 .all_menu_body .all_menu_ul > li:hover > a .link_icon img{filter: invert(1) brightness(2);} .all_menu_container.FM5 .all_menu_body .all_menu_ul > li.on > a span::before, .all_menu_container.FM5 .all_menu_body .all_menu_ul > li:hover > a span::before{width: 100%;} .all_menu_container.FM5 .all_menu_body .all_sub_div{padding-left: 14px;} .all_menu_container.FM5 .all_menu_body .all_sub_div > ul{display: inline-block;} .all_menu_container.FM5 .all_menu_body .all_sub_div > ul > li > a{display: inline-block; font-size: 18px; font-weight: 600; line-height: 1.2em; margin-bottom: 20px; transition: 0.3s;} .all_menu_container.FM5 .all_menu_body .all_sub_div > ul > li:last-child > a{margin-bottom: 0;} .all_menu_container.FM5 .all_menu_body .all_sub_div > ul > li > a span{transition: .3s;} .all_menu_container.FM5 .all_menu_body .all_sub_div > ul > li.on > a span, .all_menu_container.FM5 .all_menu_body .all_sub_div > ul > li:hover > a span{color: #ffffff;} .all_menu_container.FM5 .all_menu_body .all_sub_div > ul > li > a img{display: inline-block; position: relative; top: -2px; transition: 0.2s;} .all_menu_container.FM5 .all_menu_body .all_sub_div > ul > li.on > a img, .all_menu_container.FM5 .all_menu_body .all_sub_div > ul > li:hover > a img{filter: invert(1) brightness(2);} .all_menu_container.FM5 .all_menu_footer{padding-bottom: 50px;} .all_menu_container.FM5 .all_menu_footer .container_fix{max-width: 1250px;} .all_menu_container.FM5 .all_menu_footer .info_wrap{display: flex; align-items: center; justify-content: flex-end; gap: 12px;} .all_menu_container.FM5 .all_menu_footer li > a {display: inline-block; border-radius: 20px; border: 1px solid #ffffff; padding: 9.5px 15px;} .all_menu_container.FM5 .all_menu_footer span{color: #ffffff; font-size: 16px; font-weight: 500; line-height: 1.2em;} .all_menu_container.FM5 .all_menu_footer img{display: inline-block; position: relative; top: -2px; margin-left: 5px;} @media(max-width: 1200px){ .admin-H .all_menu_container.FM5{top: 0;} } /* 전체메뉴6 */ .all_menu_container.FM6{width: 532px;height: auto;position: fixed;right: 50px;top: -100vh;z-index: 99;transition: 1s cubic-bezier(0.22, 1, 0.36, 1);background: #152a54;color: #fff;padding: 75px 45px 50px;border-radius: 15px;opacity: 0;} .all_menu_container.FM6.active{top: 100px;opacity: 1;} .all_menu_container.FM6.top_custom.active{top: 150px;} /* 탑배너 */ .admin-H .all_menu_container.FM6.active{top: 180px;} /* 어드민 */ .at-html.fixed .all_menu_container.FM6.top_custom.active{top: 100px;} /* 탑배너 픽시드 */ .at-html.fixed .admin-H .all_menu_container.FM6.active{top: 150px;} /* 어드민 픽시드 */ .all_menu_container.FM6 .all_menu_close{position: absolute;width: 20px;height: 20px;top: 30px;right: 30px;cursor: pointer;transition: all 0.4s ease;} .all_menu_container.FM6 .all_menu_close:hover{transform: rotate(90deg);} .all_menu_container.FM6 .all_menu_close img{filter: invert(1) brightness(2);} .all_menu_container.FM6 .all_menu_body{width: 100%;height: 100%;position: relative;} .all_menu_container.FM6 .all_menu_body > ul {margin-bottom: 40px;} .all_menu_container.FM6 .all_menu_body > ul > li {position: relative;transition: .3s ease;} .all_menu_container.FM6 .all_menu_body > ul > li + li {margin-top: 30px;} .all_menu_container.FM6 .all_menu_body > ul > li > a{font-size: 24px;cursor: pointer;font-weight: 700;color: #ffffff;line-height: 1.2;} .all_menu_container.FM6 .all_menu_body > ul > li > a .link_icon{display: inline-block;} .all_menu_container.FM6 .all_menu_body > ul > li > a .link_icon img{display: block; position: relative; top: 2px; margin-left: 3px;} .all_menu_container.FM6 .all_menu_body .all_sub_div > ul {display: flex;flex-wrap: wrap;margin-top: 10px;} .all_menu_container.FM6 .all_menu_body .all_sub_div > ul > li {margin-right: 20px;margin-bottom: 5px;} .all_menu_container.FM6 .all_menu_body .all_sub_div > ul > li > a{color: #5d6888;font-size: 17px;line-height: 1.2em;position: relative;transition: all 0.5s ease;display: inline-block;} .all_menu_container.FM6 .all_menu_body .all_sub_div > ul > li.on > a, .all_menu_container.FM6 .all_menu_body .all_sub_div > ul > li > a:hover{color: #ffffff;} .all_menu_container.FM6 .all_menu_body .all_sub_div > ul > li > a::after {content: '';position: absolute;bottom: -3px;left: 0;width: 0;height: 1px;background-color: #fff;transition: width 0.5s ease;} .all_menu_container.FM6 .all_menu_body .all_sub_div > ul > li.on > a::after, .all_menu_container.FM6 .all_menu_body .all_sub_div > ul > li > a:hover::after{width: 100%;} .all_menu_container.FM6 .all_menu_body .all_sub_div > ul > li > a img{display: inline-block; position: relative; top: -2px; transition: all 0.5s ease; margin-left: 3px;} .all_menu_container.FM6 .all_menu_body .all_sub_div > ul > li.on > a img, .all_menu_container.FM6 .all_menu_body .all_sub_div > ul > li > a:hover img{filter: invert(1) brightness(2);} /* .all_menu_container.FM6 .all_menu_footer a{display: block; width: 100%; background: url(../../../../img/DMA6_bg.jpg) no-repeat; background-size: 100%; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 41px 0;} */ .all_menu_container.FM6 .all_menu_footer a img{display: inline-block;} .all_menu_container.FM6 .all_menu_footer a span{font-size: 16px; color: #ffffff; font-weight: 500; line-height: 1.2em; margin-top: 10px;} @media (max-width:1500px){ .all_menu_container.FM6 .all_menu_body > ul > li > a{font-size: 18px;} .all_menu_container.FM6 .all_menu_body .all_sub_div > ul > li > a{font-size: 15px;} } @media (max-width:1200px){ .all_menu_container.FM6.active{top: 100px;opacity: 1;} .admin-H .all_menu_container.FM6.active{top: 150px;} /* 어드민 */ .at-html.fixed .admin-H .all_menu_container.FM6.active{top: 100px;} /* 어드민 픽시드 */ } /* 전체메뉴7 */ .all_menu_container.FM7{background: #191c20;width:100%; position:fixed; top:0; left:0; opacity:0; z-index:14; height:100vh; visibility:hidden; transform-origin:top; transition:all 0.3s ease-out; overflow-y: auto;} .admin-H .all_menu_container.FM7{top: 50px;} .all_menu_container.FM7.active{opacity:1; visibility:visible;} .all_menu_container.FM7 .all_menu_header {border-bottom: 1px solid rgba(238, 238, 238,0.1);} .all_menu_container.FM7 .all_menu_header .container_fix{display:table; max-width: 1850px; width: 100%; position: relative;} .all_menu_container.FM7 .all_menu_header .container_fix > a, .all_menu_container.FM7 .all_menu_header .container_fix > .all_menu_logo{display:table-cell; padding:0; vertical-align:middle;} .all_menu_container.FM7 .all_menu_header a.all_logo{line-height:84px; display: inline-block;} .all_menu_container.FM7 .all_menu_header a.all_logo img{display: inline-block;} .all_menu_container.FM7 .all_menu_header a.all_menu_close{width:20px; height:20px; display: block;} .all_menu_container.FM7 .all_menu_header a.all_menu_close img{filter: invert(1) brightness(2);} .all_menu_container.FM7 .right_btn{height: 84px;} .all_menu_container.FM7 .right_btn > ul{display: flex; align-items: center; justify-content: flex-end; height: 100%;} .all_menu_container.FM7 .lang_btn_li{margin-right: 25px;} .all_menu_container.FM7 .lang_btn_li .lang_btn_box{display: inline-block;text-align: center;position: relative;z-index: 10;} .all_menu_container.FM7 .lang_btn_li .lang_btn_box .lang_btn{position: relative;padding: 10px;display: flex;align-items: center;gap: 5px;font-size: 16px; font-weight: 400;color: var(--main-point-color); line-height: 1em;} .all_menu_container.FM7 .lang_btn_li .lang_btn_box .lang_btn > .lang_icon img{filter: invert(1) brightness(2);} .all_menu_container.FM7 .lang_btn_li .lang_btn_box .lang_btn + .lang_ul{position: absolute;width: auto;left: 50%; transform: translateX(-50%); padding: 5px;border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-top: 0;z-index: 1;display: none;} .all_menu_container.FM7 .lang_btn_li .lang_btn_box.active .lang_btn + .lang_ul{display: block;background: #fff;} .all_menu_container.FM7 .lang_btn_li .lang_btn_box.active .lang_btn + .lang_ul li{padding: 0; text-align: center;} .all_menu_container.FM7 .lang_btn_li .lang_btn_box.active .lang_btn + .lang_ul li + li {margin-top: 5px;} .all_menu_container.FM7 .lang_btn_li .lang_btn_box.active .lang_btn + .lang_ul li a{display: block; padding: 16px 18px; border-radius: 8px; font-size: 15px; font-weight: 400;color: var(--main-point-color);line-height: 1em; text-align: center; background-color: #fff; transition: 0.2s;} .all_menu_container.FM7 .lang_btn_li .lang_btn_box.active .lang_btn + .lang_ul li a.on{background-color: #f2f4f6;} .all_menu_container.FM7 .lang_btn_li .lang_btn_box.active .lang_btn + .lang_ul li a:hover{background-color: #f2f4f6;} .all_menu_container.FM7 .all_menu_body{position:relative; text-align: center;} .all_menu_container.FM7 .all_menu_body .container_fix{max-width: 1510px;} .all_menu_container.FM7 .all_menu_body .all_menu_ul{display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; table-layout: fixed;} .all_menu_container.FM7 .all_menu_body .all_menu_ul > li {display: block;flex: 1; min-height: calc(100vh - 84px);padding: 40px 0px 120px;position: relative;border-left: 1px solid rgba(238, 238, 238,0.1);} .all_menu_container.FM7 .all_menu_body .all_menu_ul > li:last-child{border-right: 1px solid rgba(238, 238, 238,0.1);} .all_menu_container.FM7 .all_menu_body .all_menu_ul > li:hover {background-color: rgba(6, 11, 17, 0.24);} .all_menu_container.FM7 .all_menu_body .all_menu_ul > li > a{font-size: 22px;color: #ffffff;font-weight: 700;line-height: 1.2em;margin-bottom: 45px;display: block;position: relative;transition: 0.3s;} .all_menu_container.FM7 .all_menu_body .all_menu_ul > li > a .link_icon{display: inline-block;} .all_menu_container.FM7 .all_menu_body .all_menu_ul > li > a .link_icon img{display: block; position: relative; top: 2px; margin-left: 3px;} .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div{display: block;} .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div > ul > li{margin-bottom: 40px;} .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div > ul > li:last-child{margin-bottom: 0;} .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div > ul > li > a {font-size: 15px;color: #ffffff;line-height: 1.2em;font-weight: 700;transition: 0.3s;} .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div > ul > li > a .link_icon{display: inline-block;} .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div > ul > li > a .link_icon img{display: block; position: relative; top: 2px; margin-left: 3px;} .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div .all_sub_li.on > a, .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div .all_sub_li2.on > a, .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div a:hover{text-decoration: underline;} .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div2{padding-top: 15px;display: block;} .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div2 > ul > li{margin-bottom: 10px;} .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div2 > ul > li > a {font-size: 14px;color: #f8fafa;line-height: 1.2em;transition: 0.2s;padding: 0 10px; opacity: 0.3;} .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div2 > ul > li.on > a, .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div2 > ul > li:hover > a {opacity: 1;} .all_menu_container.FM7 .all_menu_body .all_menu_ul .all_sub_div2 > ul > li > a img{display: inline-block; position: relative; top: -1px; margin-left: 3px;} @media(max-width: 1200px){ .admin-H .all_menu_container.FM7{top: 0;} } /* 전체메뉴8 */ .header-menu.FM8_on .ham_btn > a::before {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);content: '';width: 0;height: 0;background-color: #000;border-radius: 100%;transition: all 0.5s ease-in-out;} .header-menu.FM8_on .ham_btn.on > a::before {width: 5000px;height: 5000px;transition: all 0.8s ease-in-out;} .all_menu_container.FM8{width:100%; position:fixed; top:0; left:0; opacity:0; z-index:14; height:100vh; visibility:hidden; transform-origin:top; transition:all 0.3s ease-out; overflow-y: auto;} .admin-H .all_menu_container.FM8{top: 50px;} .all_menu_container.FM8.active{opacity:1; visibility:visible;} .all_menu_container.FM8 .cm_sitemap{position: absolute;display: table;width: 100%;height: 100%;overflow-y: auto;} .all_menu_container.FM8 .cm_sitemap_inner{position: relative;display: table-cell;vertical-align: middle;opacity: 0;transition: opacity 0.5s ease 0s;} .all_menu_container.FM8.active .cm_sitemap_inner{opacity: 1.0;transition-delay: 0.4s;} .all_menu_container.FM8 .all_menu_header{position: absolute; top: 0; left: 0; width: 100%;} .all_menu_container.FM8 .all_menu_header .container_fix{display:table; max-width: 1850px; width: 100%; position: relative;} .all_menu_container.FM8 .all_menu_header .container_fix > a, .all_menu_container.FM8 .all_menu_header .container_fix > .all_menu_logo{display:table-cell; padding:0; vertical-align:middle;} .all_menu_container.FM8 .all_menu_header a.all_logo{line-height:84px; display: inline-block;} .all_menu_container.FM8 .all_menu_header a.all_logo img{display: inline-block;} .all_menu_container.FM8 .all_menu_header .right_btn{position: absolute;top: 80px;right: 80px;overflow: hidden;display: flex;align-items: center;justify-content: space-between;z-index: 1; } .all_menu_container.FM8 .all_menu_header .right_btn .all_menu_close{background-color: rgba(255, 255, 255, 0.1);width: 100px;height: 100px;line-height: 100px;-webkit-border-radius: 100%;border-radius: 100%;text-align: center;display: flex;align-items: center;justify-content: center;} .all_menu_container.FM8 .all_menu_header .right_btn .all_menu_close img{filter: invert(1) brightness(2); transition: transform 0.5s;} .all_menu_container.FM8 .all_menu_header .right_btn:hover .all_menu_close img{transform: rotate(180deg);} .all_menu_container.FM8 .all_menu_body{position: relative;} .all_menu_container.FM8 .all_menu_body .container_fix{max-height: calc(100vh - 7em - 5rem);overflow-x: hidden;overflow-y: auto;} .all_menu_container.FM8 .all_menu_body .all_menu_ul{display: flex;flex-wrap: wrap;} .all_menu_container.FM8 .all_menu_body .all_menu_ul .link_icon{display: inline-block; position: relative;} .all_menu_container.FM8 .all_menu_body .all_menu_ul .link_icon img{display: block; transition: 0.3s;} .all_menu_container.FM8 .all_menu_body .all_menu_ul > li{padding: 2.643rem 0;width: 100%;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;border-bottom: 1px solid rgba(255, 255, 255, 0.2);transition: border-bottom-color 0.5s;} .all_menu_container.FM8 .all_menu_body .all_menu_ul > li.on, .all_menu_container.FM8 .all_menu_body .all_menu_ul > li:hover{border-bottom: 1px solid rgba(255, 255, 255, 1);} .all_menu_container.FM8 .all_menu_body .all_menu_ul > li > a{position: relative;padding-right: 4rem;font-size: 50px;line-height: 1;font-weight: 700;color: #fff;transition: color 0.3s;} .all_menu_container.FM8 .all_menu_body .all_menu_ul > li.on > a, .all_menu_container.FM8 .all_menu_body .all_menu_ul > li:hover > a{color: var(--main-point-color-hover);} .all_menu_container.FM8 .all_menu_body .all_menu_ul > li > a .link_icon img.icon_off{transition: 0.3s; opacity: 1;} .all_menu_container.FM8 .all_menu_body .all_menu_ul > li.on > a .link_icon img.icon_off, .all_menu_container.FM8 .all_menu_body .all_menu_ul > li:hover > a .link_icon img.icon_off{opacity: 0;} .all_menu_container.FM8 .all_menu_body .all_menu_ul > li > a .link_icon img.icon_on{transition: 0.3s; position: absolute; opacity: 0; top: 0; left: 0;} .all_menu_container.FM8 .all_menu_body .all_menu_ul > li.on > a .link_icon img.icon_on, .all_menu_container.FM8 .all_menu_body .all_menu_ul > li:hover > a .link_icon img.icon_on{opacity: 1;} .all_menu_container.FM8 .all_menu_body .all_sub_ul{display: flex;flex-wrap: wrap;} .all_menu_container.FM8 .all_menu_body .all_sub_ul > li{position: relative;} .all_menu_container.FM8 .all_menu_body .all_sub_ul > li + li{position: relative;margin-left: 25px;} .all_menu_container.FM8 .all_menu_body .all_sub_ul > li + li::before{position: absolute;top: -2px;left: -15px;font-size: 18px;font-weight: 700;color: #555555;content: '/';} .all_menu_container.FM8 .all_menu_body .all_sub_ul > li > a{position: relative;display: block;color: #fff;font-size: 20px;font-weight: 600;line-height: 1;transition: all 0.3s;} .all_menu_container.FM8 .all_menu_body .all_menu_li.on .all_sub_a, .all_menu_container.FM8 .all_menu_body .all_menu_li.hover .all_sub_a{color: #555555;} .all_menu_container.FM8 .all_menu_body .all_menu_li.on .all_sub_a .link_icon img, .all_menu_container.FM8 .all_menu_body .all_menu_li.hover .all_sub_a .link_icon img{filter: grayscale(100%) brightness(33%);} .all_menu_container.FM8 .all_menu_body .all_menu_li .all_sub_li.on .all_sub_a, .all_menu_container.FM8 .all_menu_body .all_menu_li.hover .all_sub_a:hover{color: #ffffff;} .all_menu_container.FM8 .all_menu_body .all_menu_li .all_sub_li.on .all_sub_a .link_icon img, .all_menu_container.FM8 .all_menu_body .all_menu_li.hover .all_sub_a:hover .link_icon img{filter: none;} .all_menu_container.FM8 .all_menu_body .all_sub_ul > li > a::before{position: absolute;bottom: -3px;left: 50%;width: 0;height: 2px;background-color: #fff;content: '';transition: all 0.3s;} .all_menu_container.FM8 .all_menu_body .all_sub_ul > li.on > a::before, .all_menu_container.FM8 .all_menu_body .all_sub_ul > li > a:hover::before{width: 100%;margin-left: -50%;} @media(max-width: 1890px){ .all_menu_container.FM8 .all_menu_header .right_btn{top: 30px; right: 40px;} .all_menu_container.FM8 .all_menu_body{padding: 30px;} } @media(max-width: 1500px){ .all_menu_container.FM8 .all_menu_body .all_menu_ul > li > a{font-size: 35px;} .all_menu_container.FM8 .all_menu_body .all_sub_ul > li > a{font-size: 16px;} } @media(max-width: 1200px){ .admin-H .all_menu_container.FM8{top: 0;} } /* 전체메뉴9 */ .header-menu.FM9_on{position: relative; z-index: 12;} .header-menu.FM9_on.all_on .logo_b{display: none;} .header-menu.FM9_on.all_on .logo_w{display: inline-block;} .header-menu.FM9_on.all_on .ham_btn > a{height: 21px;} .header-menu.FM9_on.all_on .ham_btn .line{width: 26px;} .header-menu.FM9_on.all_on .ham_btn .line1{transform: rotate(45deg) translate(5px, 10px);} .header-menu.FM9_on.all_on .ham_btn .line2{opacity: 0;} .header-menu.FM9_on.all_on .ham_btn .line3{transform: rotate(-45deg) translate(3px, -9px);} .header-menu.FM9_on.all_on .pc-menu .nav-top .menu_ul_01 > li > .menu-a{color: var(--main-point-color);} .at-header.transparent_H .header-menu.FM9_on.all_on .pc-menu .lang_btn_li .lang_btn_box .lang_btn img, .at-header.transparent_H .header-menu.FM9_on.all_on .pc-menu .mypage_btn_li img, .at-header.transparent_H .header-menu.FM9_on.all_on .pc-menu .search_btn img{filter: invert(0) brightness(0);} .at-header.transparent_H .header-menu.FM9_on.all_on .pc-menu .ham_btn .line{background-color: var(--main-point-color);} .all_menu_container.FM9{width:100%; position:fixed; top:0; right: -100%; opacity:0; z-index:11; height:100vh; transition:opacity 0.5s ease; overflow-y: auto; background: url(../../../../img/DMA9_bg.png) no-repeat bottom right #fff;} .admin-H .all_menu_container.FM9{top: 50px;} .all_menu_container.FM9.active{opacity:1; right: 0;} .all_menu_container.FM9 .all_menu_header{display: none;} /* .all_menu_container.FM9 .all_menu_header{position: absolute; top: 0; left: 0; width: 100%; height: 84px; z-index: 1;} */ .all_menu_container.FM9 .all_menu_header .container_fix{max-width: 1850px; height: 100%; display: flex; align-items: center; justify-content: space-between;} .all_menu_container.FM9 .all_menu_body {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh;} .all_menu_container.FM9 .all_menu_body .container_fix{max-width: 1510px; position: relative; padding-left: 30px;} .all_menu_container.FM9 .all_menu_body .container_fix > ul {width: 100%; position: relative;} .all_menu_container.FM9 .all_menu_body .all_menu_li{width: 45%;margin: 0 0 60px 0;} .all_menu_container.FM9 .all_menu_body .all_menu_li::before{position: fixed;top: 0;left: 0;z-index: -2;opacity: 0;width: 41.146%;height: 100%;background-repeat: no-repeat;background-size: cover;content: '';pointer-events: none; transition: 0.5s;} .all_menu_container.FM9 .all_menu_body .all_menu_li.hover::before{opacity: 1;z-index: -1;} /* 이미지 공통적용 시 사용 .all_menu_container.FM9 .all_menu_body .all_menu_li::before{background-image: url(../../../../img/bg_menu_1.jpg);} */ .all_menu_container.FM9 .all_menu_body .all_menu_li::before{background-color: #111111;} .all_menu_container.FM9 .all_menu_body .all_menu_li:nth-child(1)::before{background-image: url(../../../../img/bg_menu_1.jpg);} .all_menu_container.FM9 .all_menu_body .all_menu_li:nth-child(2)::before{background-image: url(../../../../img/bg_menu_2.jpg);} .all_menu_container.FM9 .all_menu_body .all_menu_li > a {font-size: 35px;font-weight: 800;line-height: 1.2;color: #fff;opacity: 0.5;} .all_menu_container.FM9 .all_menu_body .all_menu_li:hover > a{opacity: 1;} .all_menu_container.FM9 .all_menu_body .all_menu_li > a .link_icon{display: inline-block;} .all_menu_container.FM9 .all_menu_body .all_menu_li > a .link_icon img{display: block; position: relative; top: 0px;} .all_menu_container.FM9 .all_sub_div{display: none;position: absolute;top: 0;right: 0;width: 53.925%;max-width: 1440px; transform: translateX(100px);} .all_menu_container.FM9.active .all_sub_div{transform: translateX(0); transition: .5s ease; transition-delay: 0.1s;} .all_menu_container.FM9 .all_menu_li.hover .all_sub_div{display: block;} .all_menu_container.FM9 .all_menu_li.hover .all_sub_ul{max-height: 60vh; overflow-y: auto; overflow-x: hidden;} .all_menu_container.FM9 .all_sub_div .all_sub_li{width: 100%;margin: 0 0 48px 0;} .all_menu_container.FM9 .all_menu_body .all_sub_li > a{font-size: 26px;font-weight: 800;line-height: 1.2;color: #fff;color: #999;transition: .2s linear;} .all_menu_container.FM9 .all_menu_body .all_sub_li:hover > a{color: var(--main-point-color-hover);} .all_menu_container.FM9 .all_menu_body .all_sub_li > a .link_icon{display: inline-block; position: relative;} .all_menu_container.FM9 .all_menu_body .all_sub_li > a .link_icon img{display: block; position: relative; top: 0px; transition: 0.3s;} .all_menu_container.FM9 .all_menu_body .all_sub_li > a .link_icon img.icon_off{opacity: 1;} .all_menu_container.FM9 .all_menu_body .all_sub_li:hover > a .link_icon img.icon_off{opacity: 0;} .all_menu_container.FM9 .all_menu_body .all_sub_li > a .link_icon img.icon_on{position: absolute; top: 0; left: 0; opacity: 0;} .all_menu_container.FM9 .all_menu_body .all_sub_li:hover > a .link_icon img.icon_on{opacity: 1;} .all_menu_container.FM9 .all_sub_div2{display: block;position: static;width: 100%;margin: 30px 0 0 0;} .all_menu_container.FM9 .all_sub_div2 li{width: 100%;margin: 0 0 20px 0;} .all_menu_container.FM9 .all_sub_div2 li > a{width: 100%;font-size: 18px;font-weight: 400;color: #999999;} .all_menu_container.FM9 .all_sub_div2 li > a:hover{color: var(--main-point-color);} .all_menu_container.FM9 .all_sub_div2 li > a img{display: inline-block;position: relative;top: -1px;margin-left: 2px;transition: .5s ease;} .all_menu_container.FM9 .all_sub_div2 li > a:hover img{filter: brightness(0%);} .header-menu.FM9_on.all_on .all_menu_wrap, .header-menu.FM9_on.all_on .DMS02 .nav-top.nav-both .sub-1div, .header-menu.FM9_on.all_on .DMS03 .nav-top.nav-both .sub-1div, .header-menu.FM9_on.all_on .DMS04 .sub-1div, .header-menu.FM9_on.all_on .pc-menu .DMS05 .sub-1div{display: none !important;} @media (min-width: 1200px){ .all_menu_container.FM9 .all_menu_body .all_menu_li > a {display: inline-block;transform: translateX(100px);transition: .5s ease;} .all_menu_container.FM9.active .all_menu_body .all_menu_li > a {transform: translateX(0);} .all_menu_container.FM9 .all_menu_body .all_sub_li > a {display: inline-block;transform: translateX(100px);transition: .5s ease;} .all_menu_container.FM9.active .all_menu_body .all_sub_li > a {transform: translateX(0);} .all_menu_container.FM9 .all_sub_div2 li > a {display: inline-block;transform: translateX(100px);transition: .5s ease;} .all_menu_container.FM9.active .all_sub_div2 li > a {transform: translateX(0);} } @media (max-width: 1500px){ .all_menu_container.FM9 .all_menu_body .container_fix > ul{padding-top: 30px;} } @media (max-width: 1200px){ .admin-H .all_menu_container.FM9{top: 0;} } /* 공통 검색박스 */ .at-header .search_drop{position: fixed; top: 0; left: 0; width: 100%; padding-top: 60px; padding-bottom: 50px; background-color: #fff; z-index: 111;text-align:center;opacity: 0;visibility:hidden;transition:all 0.3s;border-bottom: 1px solid #f1f1f1;} .at-header .search_drop.active{opacity:1; visibility:visible;} .at-header.admin-H .search_drop.active{top: 50px;} .at-header .search_drop .form{width:500px; margin:0 auto; position:relative;} .at-header .search_drop .form input{width:100%; height:50px; border:0; border-bottom:2px solid #777777; background-color: #fff; font-size:16px; color:var(--main-point-color); font-weight:300; padding:0 30px 0 5px;} .at-header .search_drop .form input::placeholder{color:var(--main-point-color);} .at-header .search_drop .form button{display:block; width:21px; height:22px; position:absolute; background:none; outline:none; border:0;top:17px; right:0; z-index: 12;} .at-header .search_drop .form button span.circle{width:17px; height:17px; border:2px solid var(--main-point-color); position:absolute; top:0; left:0; border-radius:50%;} .at-header .search_drop .form button span.line{width:2px; height:10px; background:var(--main-point-color); position:absolute; right:3px; bottom:0; transform:rotate(-45deg);} .at-header .search_drop .header_search_close{display:block; width:18px; height:17px; position:absolute; right:30px; top:30px;} .at-header .search_drop .header_search_close span{display:block; width:23px; height:2px; background:#222222; position:absolute; right:0; top:50%; transition:all 0.3s;transform:rotate(-45deg);} .at-header .search_drop .header_search_close span:nth-child(2){transform:rotate(45deg);} .at-header .search_drop .popular_keyword{display: flex; align-items: center; justify-content: center; margin-top: 30px;} .at-header .search_drop .popular_keyword h4{font-size: 16px; font-weight: 500; color: var(--main-point-color); margin-right: 50px;} .at-header .search_drop .popular_keyword li{display: inline-block;} .at-header .search_drop .popular_keyword li+li{margin-left: 8px;} .at-header .search_drop .popular_keyword .rank_a{display: block; font-size: 16px; font-weight: 300; color: #666666; border: 1px solid #e1e1e1; border-radius: 20px; line-height: 38px; min-width: 111px; transition: 0.3s;} .at-header .search_drop .popular_keyword .rank_a:hover{font-weight: 500; color: var(--main-point-color); border: 1px solid #111111;} .at-header .header_search input{z-index: 11; position: relative;} .at-header .search_btn{z-index: 12;} /*************************** 일체형 헤더 ***************************/ .at-header.transparent_H .pc-menu .search_btn img{filter: invert(1) brightness(2);} .at-header.transparent_H .pc_header .marker_box > a.marker_icon{background: url(../../../../img/marker_icon_w.png) no-repeat;} .at-header.transparent_H .pc_header .container_fix > .lnb_box .lnb_list li .lang_btn_box .lang_btn{color: #fff;} .at-header.transparent_H .pc-menu .lang_btn_li .lang_btn_box .lang_btn img{filter: invert(1) brightness(2);} .at-header.transparent_H .pc-menu .mypage_btn_li img{filter: invert(1) brightness(2);} .at-header.transparent_H .pc-menu .ham_btn .line{background-color: #ffffff;} .at-header.transparent_H .header-menu .pc-menu .nav-top .menu-li .menu-a{color: #fff;} .at-header .header-menu.fixed .pc-menu .nav-top .menu-a{background-color: #fff;} /*************************** 블러형 헤더 ***************************/ .at-header.hd_blur{background: transparent;} .at-header.hd_blur .hd_blur_bg{backdrop-filter: saturate(200%) blur(15px);background: rgba(255, 255, 255, 0.1); position: absolute; top: 0; left: 0; width: 100%; height: 100%;} /* .at-header.hd_blur.transparent_H .pc-menu .search_btn img{filter: invert(1) brightness(2); transition: .5s ease-out;} .at-header.hd_blur .pc_header .marker_box > a.marker_icon{background: url(../../../../img/marker_icon_w.png) no-repeat;} */ /* .at-header.hd_blur .pc_header .container_fix > .lnb_box .lnb_list li .lang_btn_box .lang_btn{color: #fff;} .at-header.hd_blur.transparent_H .pc-menu .lang_btn_li .lang_btn_box .lang_btn img{filter: invert(1) brightness(2); transition: .5s ease-out;} .at-header.hd_blur.transparent_H .pc-menu .mypage_btn_li img{filter: invert(1) brightness(2); transition: .5s ease-out;} .at-header.hd_blur.transparent_H .pc-menu .ham_btn .line{background-color: #ffffff;} */ .at-header.hd_blur.fixed .pc-menu .search_btn img{filter: invert(0) brightness(1);} .at-header.hd_blur.fixed .pc-menu .lang_btn_li .lang_btn_box .lang_btn img{filter: invert(0) brightness(1);} .at-header.hd_blur.fixed .pc-menu .mypage_btn_li img{filter: invert(0) brightness(1);} .at-header.hd_blur.fixed .pc-menu .ham_btn .line{background-color: var(--main-point-color);} .at-header.hd_blur .pc-menu .DMS01 .all_menu_wrap, .at-header.hd_blur .pc-menu .DMS03 .nav-top.nav-both .sub-1div, .at-header.hd_blur .pc-menu .DMS04 .sub-1div::before, .at-header.hd_blur .pc-menu .DMS05 .sub-1div.var1::before, .at-header.hd_blur .pc-menu .sub-1div.var2, .at-header.hd_blur .all_menu_container.FM1{backdrop-filter: saturate(200%) blur(15px);background: rgba(255, 255, 255, 0.1);} .at-header.hd_blur .pc-menu .DMS03 .nav-top .sub-1dli:hover > .sub-1da{background: rgba(242, 244, 246, 0.1);} .at-header.hd_blur .pc-menu .DMS03 .nav-top .sub-2div{background: rgba(255, 255, 255, 0.4);} /* .at-header.hd_blur .pc-menu .DMS05 .sub-1div.var2{backdrop-filter: saturate(200%) blur(15px);background: rgba(255, 255, 255, 0.1);} */ /* 헤더고정 */ .at-header.fixed .pc-menu .DMS01 .all_menu_wrap{top: 70px;} .at-header.fixed .all_menu_container.FM1{top: 70px;} /*************************** 모바일 헤더 ***************************/ /* 모바일 헤더 메뉴 공통 */ #thema_wrapper::-webkit-scrollbar{width: 0;} .m_header {padding: 8px 0; position: relative; z-index: 12;} .at-header.fixed .m_header {padding: 6px 0; height: 55px;} .m_header .container_fix{padding: 0 20px;} .m_header .container_fix .btn_menu_wrap li img {height: 16px; display: block;} .m_header .container_fix .m_logo img {height: 39px;} .m_header .container_fix .btn_menu_wrap {margin-left: auto;} .m_header .container_fix .btn_menu_wrap .btn_menu_ul {display: flex; align-items: center;} .m_header .container_fix .btn_menu_wrap .all_btn_box > ul > li + li, .m_header .container_fix .btn_menu_wrap .m-sidear-menu{margin-left: 18px; position: relative; z-index: 2; height: 17px;} .m_header .container_fix .btn_menu_wrap li.estimate_btn_li{padding-left: 69.5px; position: relative;} .m_header .container_fix .btn_menu_wrap li.estimate_btn_li a{display: block; height: 28px; white-space: nowrap; padding: 0 13px; border-radius: 6px; background: #e9f3ff; font-size: 13px; font-weight: 500; color: var(--main-point-color-hover); text-align: center; line-height: 28px;} .m_header .all_close{display: none;} .m_header .all_btn_box{position: relative; opacity: 1; visibility: visible; transition: transform .2s ease-in-out, opacity .4s ease ;} .m_header .all_btn_box > ul{display: flex;align-items: center;} .m_header .container_fix{z-index: 12;} .m_header .container_fix .btn_menu_wrap .lang_btn_box{display: inline-block;text-align: center;position: relative;z-index: 10;} .m_header .container_fix .btn_menu_wrap .lang_btn_box .lang_btn{position: relative;line-height: 1em;} .m_header .container_fix .btn_menu_wrap .lang_btn_box .lang_btn + .lang_ul{position: absolute;width: auto;left: 50%; transform: translateX(-50%); padding: 5px;border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-top: 0;z-index: 1;display: none;white-space: nowrap;margin-top: 10px;} .m_header .container_fix .btn_menu_wrap .lang_btn_box.active .lang_btn + .lang_ul{display: block;background: #fff;} .m_header .container_fix .btn_menu_wrap .lang_btn_box.active .lang_btn + .lang_ul li{padding: 0; text-align: center;} .m_header .container_fix .btn_menu_wrap .lang_btn_box.active .lang_btn + .lang_ul li + li {margin-top: 5px;} .m_header .container_fix .btn_menu_wrap .lang_btn_box.active .lang_btn + .lang_ul li a{display: block; padding: 15px 2px; border-radius: 8px; font-size: 13px; font-weight: 400;color: var(--main-point-color);line-height: 1em; text-align: center; background-color: #fff; transition: 0.2s;} .m_header .container_fix .btn_menu_wrap .lang_btn_box.active .lang_btn + .lang_ul li a.on{background-color: #f2f4f6;} .m_header .container_fix .btn_menu_wrap .lang_btn_box.active .lang_btn + .lang_ul li a:hover{background-color: #f2f4f6;} /* 모바일 햄버거 버튼 */ .m_header .m-sidear-menu {width: 16px;height: 17px;vertical-align: middle;} .m_header .m-sidear-menu a{width: 100%;height: 100%;position: relative;display: block;} /* .m_header .m-sidear-menu a::before{content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} */ .m_header .m-sidear-menu .line{width: 100%;height: 2px;background: var(--main-point-color);position: absolute;top: 0;left: 0; transition: all 0.2s;} .m_header .m-sidear-menu .line2{top: 7px;} .m_header .m-sidear-menu .line3{top: auto; bottom: 0;} .m_header .m-sidear-menu .all_close .line1{transform: rotate(45deg); top: 7px; width: 125%;} .m_header .m-sidear-menu .all_close .line2{opacity: 0;} .m_header .m-sidear-menu .all_close .line3{transform: rotate(-45deg); bottom: 7px; width: 125%;} .m_header .m-sidear-menu line{transition: 0.2s;} .m_header .m-sidear-menu .all_close line:nth-child(1){transform: translate(3px, 1px) rotate(45deg);} .m_header .m-sidear-menu .all_close line:nth-child(2){opacity: 0;} .m_header .m-sidear-menu .all_close line:nth-child(3){transform: translate(-8px, 2px) rotate(-45deg);} /* 모바일 서브페이지 */ /* .at-header.m_header_sb{border-bottom: 1px solid #eeeeee;} */ /* 모바일 일체형 헤더 */ .mob.transparent_H .btn_menu_wrap .btn_menu_ul li img{filter: invert(1) brightness(2);} /* .mob .btn_menu_wrap .svg_img{stroke: #111;} */ .mob.transparent_H .btn_menu_wrap line{stroke: #fff;} .at-header.transparent_H .m_header.M_FM1_on .btn_menu_wrap line{stroke: #111;} .at-header.transparent_H .m_header.M_FM2_on .btn_menu_wrap line{stroke: #111;} .at-header .m_header.M_FM3_on .btn_menu_wrap line{stroke: #fff;} /* 모바일 블러 헤더 */ .at-header.m_hd_blur{backdrop-filter: saturate(200%) blur(15px);background: rgba(255, 255, 255, 0.1);} /* 모바일 헤더고정 */ .mob.fixed.up{top: -53px;} /*************************** 모바일 전체메뉴 ***************************/ /* 모바일 전체메뉴 1 */ .m_all_menu_wrap.FM1{background-color: #ffffff;width: 100%; height: 100vh; overflow-y: auto; padding: 0 0 50px; display: none; position: absolute; top: 0; padding-top: 55px;} .m_all_menu_wrap.FM1::-webkit-scrollbar{width: 0;} .m_all_menu_wrap.FM1 .menu_ul{padding: 0 5px;} .m_all_menu_wrap.FM1 a{display: block;transition: background-color .2s ease; font-size: 15px; font-weight: 500; color: var(--main-point-color); line-height: 20px;} /* .m_all_menu_wrap.FM1 .menu_ul li.on > a, .m_all_menu_wrap.FM1 .menu_ul li:hover > a, .m_all_menu_wrap.FM1 li a.active, .m_all_menu_wrap.FM1 .menu_li_tt:hover a.is-sub, .m_all_menu_wrap.FM1 a.is-sub.active{background-color: #f3f4f6;} */ .m_all_menu_wrap.FM1 .menu_li_tt a {padding: 0 15px;position: relative;line-height: 53px; border-radius: 5px;} .m_all_menu_wrap.FM1 .menu_li_tt a.onBg {background-color: #f9f9f9;} .m_all_menu_wrap.FM1 .menu_li_tt a span.arr {display: block;width: 15px;height: 7px;position: absolute;top: 24px;right: 20px;transition: transform .2s ease;} .m_all_menu_wrap.FM1 .menu_li_tt a span.arr:before {content: "";display: block;height: 2px;width: 9px;background: var(--main-point-color);position: absolute;top: 50%;left: 0;transform: rotate(45deg) translate(0%, 0);} .m_all_menu_wrap.FM1 .menu_li_tt a span.arr:after {content: "";display: block;height: 2px;width: 9px;background: var(--main-point-color);position: absolute;top: 50%;right: 0;transform: rotate(-45deg) translate(0%, 0);} .m_all_menu_wrap.FM1 .menu_li_tt a.active span.arr{transform: rotate(180deg);} .m_all_menu_wrap.FM1 .menu_li_sub{position: relative; display: flex; flex-direction: column; gap: 7px;} .m_all_menu_wrap.FM1 .menu_li_sub li a {position: relative;} .m_all_menu_wrap.FM1 .menu_li_sub > li a{padding: 16.5px 10px 16.5px 25px;} .m_all_menu_wrap.FM1 .menu_li_sub > li a span.arr {display: block;width: 11px;height: 7px;position: absolute;top: 24px;right: 20px;transition: transform .2s ease;} .m_all_menu_wrap.FM1 .menu_li_sub > li a span.arr:before {content: "";display: block;height: 1px;width: 7px;background: var(--main-point-color);position: absolute;top: 50%;left: 0;transform: rotate(45deg) translate(0%, 0);} .m_all_menu_wrap.FM1 .menu_li_sub > li a span.arr:after {content: "";display: block;height: 1px;width: 7px;background: var(--main-point-color);position: absolute;top: 50%;right: 0;transform: rotate(-45deg) translate(0%, 0);} .m_all_menu_wrap.FM1 .menu_li_sub > li a.active span.arr{transform: rotate(180deg);} .m_all_menu_wrap.FM1 .menu_li_sub li .sub_menu_div{/*display: none;*/ padding: 0 0 0 15px;} .m_all_menu_wrap.FM1 .menu_li_sub li .custom_sub_menu{/*display: none; */padding: 0 0 0 15px;} .m_all_menu_wrap.FM1 .menu_li_sub li .custom_sub_menu_ul li a{padding: 16.5px 10px;} .m_all_menu_wrap.FM1 .btn_wrap{padding: 20px 20px 50px;} .m_all_menu_wrap.FM1 .btn_wrap a{font-size: 14px; line-height: 1.2em; font-weight: 500; display: block;text-align: center; padding: 14px 15px; border-radius: 10px; color: #fff; background-color: var(--main-point-btn-bg-color-hover);} .m_all_menu_wrap.FM1 .btn_wrap .mypage_btn_li a{color: var(--main-point-color-hover); background-color: var(--main-point-bg-soft-color);} .m_all_menu_wrap.FM1 .btn_wrap .btn_ul {display: flex; flex-direction: column; gap: 10px;} .m_all_menu_wrap.FM1 .btn_wrap .btn_ul li:first-child {order: 2;} .m_all_menu_wrap.FM1 .btn_wrap .btn_ul li:first-child a {background-color: #fff; color: #595959; border: 1px solid #ebebeb;} .m_all_menu_wrap.FM1 .btn_wrap .btn_ul li:last-child {order: 1;} .m_header.M_FM1_on{background-color: #ffffff;} .mob.transparent_H .m_header.M_FM1_on .btn_menu_wrap .btn_menu_ul li img{filter: none;} .at-header.transparent_H .m_header.M_FM1_on .logo_w{display: none;} .at-header.transparent_H .m_header.M_FM1_on .logo_b{display: inline-block;} /* 모바일 전체메뉴 1 커스텀 */ .m_all_menu_wrap.FM1 .menu_li_sub .aa_menu {color: #4e5968;} .m_all_menu_wrap.FM1 .menu_li_sub li a.on, .m_all_menu_wrap.FM1 .menu_li_sub li:hover {background-color: #f9f9f9; border-radius: 5px;} .m_all_menu_wrap.FM1 .menu_li_sub .aa_menu .text_box .text_top {display: flex; align-items: center; gap: 5px;} .m_all_menu_wrap.FM1 .menu_li_sub .aa_menu .text_box .text_top .menu_sticker_wrap .menu_sticker {display: inline-flex; align-items: center; margin-right: 3px; padding: 4px 5px; font-size: 10px; border-radius: 3px; line-height: 1;} .m_all_menu_wrap.FM1 .menu_li_sub .aa_menu .text_box .text_bot .menu_text {font-size: 12px; line-height: 21px;} /* 2025-05-14 (주)파이브센스_FIVESENSES.Corp. */ .m_all_menu_wrap.FM1 span.link_icon{display: inline-block; position: relative; top: 1px; right: -9px;} .m_all_menu_wrap.FM1 span.link_icon img{width: 11px; position: relative; display: block;} /* 모바일 전체메뉴 2 */ .m_all_menu_wrap.FM2{background-color: #ffffff;width: 100%;height: calc(100vh - 53px);overflow-y: auto;padding: 18px 0 50px;right: -100%; position: absolute; transition: .15s ease;} .m_all_menu_wrap.FM2.open{right: 0;} .m_all_menu_wrap.FM2::-webkit-scrollbar{width: 0px;} .m_all_menu_wrap.FM2 .menu_ul{padding: 0 20px;} .m_all_menu_wrap.FM2 .menu_ul a{display: block;line-height: 1.2em;} .m_all_menu_wrap.FM2 .menu_li_tt a {position: relative;line-height: 55px; font-size: 16px; font-weight: 700; color: var(--main-point-color);} .m_all_menu_wrap.FM2 .menu_li_tt a:hover{color: var(--main-point-color);} .m_all_menu_wrap.FM2 .menu_li_sub{position: relative; padding: 5px 28px 5px 25px; background-color: #000; border-radius: 10px;} .m_all_menu_wrap.FM2 .menu_li_sub li a {position: relative;} .m_all_menu_wrap.FM2 .menu_li_sub > li a{padding: 18px 0; font-size: 14px; font-weight: 700; color: #fff;} .m_all_menu_wrap.FM2 .menu_li_sub > li a span.arr {display: block;width: 10px;height: 7px;position: absolute;top: 24px;right: 0px;transition: transform .2s ease;} .m_all_menu_wrap.FM2 .menu_li_sub > li a span.arr:before {content: "";display: block;height: 1px;width: 6px;background: #fff;position: absolute;top: 50%;left: 0;transform: rotate(45deg) translate(0%, 0);} .m_all_menu_wrap.FM2 .menu_li_sub > li a span.arr:after {content: "";display: block;height: 1px;width: 6px;background: #fff;position: absolute;top: 50%;right: 0;transform: rotate(-45deg) translate(0%, 0);} .m_all_menu_wrap.FM2 .menu_li_sub > li a.active span.arr{transform: rotate(180deg);} .m_all_menu_wrap.FM2 .menu_li_sub li .sub_menu_div ul{/*display: none;*/ padding: 7px 14px;background-color: #111; border-radius: 10px;} .m_all_menu_wrap.FM2 .menu_li_sub li .sub_menu_div li > a{font-size: 14px; font-weight: 500; padding: 9px 0;} .m_all_menu_wrap.FM2 .menu_li_sub li .sub_menu_div li a span{top: 15px;} .m_all_menu_wrap.FM2 .menu_li_sub li .custom_sub_menu ul{/*display: none; */padding: 0 0 0 15px;} .m_all_menu_wrap.FM2 .menu_li_sub li .custom_sub_menu_ul li a{padding: 16.5px 10px;} .m_all_menu_wrap.FM2 .lang_btn_wrap{position: fixed;bottom: 0;left: 0;width: 100%;height: 52px;background-color: #fff;border-top: 1px solid #ebebeb;transition: .1s linear;display: none;justify-content: space-between;align-items: center;padding: 0 20px;transition: .1s linear;} .m_all_menu_wrap.FM2 .lang_btn_wrap img{height: 16px;} .m_all_menu_wrap.FM2 .lang_selector{position: static;margin-left: auto;display: flex;align-items: center; max-width: 80%; overflow-x: auto;white-space : nowrap;} .m_all_menu_wrap.FM2 .lang_selector::-webkit-scrollbar {height: 3px;} .m_all_menu_wrap.FM2 .lang_selector::-webkit-scrollbar-button{width: 0;} .m_all_menu_wrap.FM2 .lang_selector ul{display: flex;align-items: center;justify-content: flex-end;} .m_all_menu_wrap.FM2 .lang_selector li{display: flex;margin-left: 1rem;} .m_all_menu_wrap.FM2 .lang_selector li a{color: #cdcdcd;font-size: 11px;line-height: 1.375rem;font-weight: 700;} .m_all_menu_wrap.FM2 .lang_selector li a.on{color: var(--main-point-color);} .m_header.M_FM2_on{background-color: #ffffff;} .mob.transparent_H .m_header.M_FM2_on .btn_menu_wrap .btn_menu_ul li img{filter: none;} .at-header.transparent_H .m_header.M_FM2_on .logo_w{display: none;} .at-header.transparent_H .m_header.M_FM2_on .logo_b{display: inline-block;} /* 2025-05-14 (주)파이브센스_FIVESENSES.Corp. */ .m_all_menu_wrap.FM2 span.link_icon{display: inline-block; position: relative; top: 0 !important; right: 0;} .m_all_menu_wrap.FM2 span.link_icon img{width: 12px; position: relative; display: block;} .m_all_menu_wrap.FM2 .menu_li_sub span.link_icon img{width: 11px;} /* 모바일 전체메뉴 3 */ .m_all_menu_wrap.FM3{background-color: #325ac9;width: 100%;height: 100vh;overflow-y: auto;padding: 0 0 30px; position: fixed; top: 0; padding-top: 61px; right: -100%; transition: 0.3s;} .m_all_menu_wrap.FM3.active{right: 0;} .m_all_menu_wrap.FM3::-webkit-scrollbar{width: 0;} .m_all_menu_wrap.FM3 a{display: block;transition: background-color .2s ease; font-size: 18px; font-weight: 700; color: #fff; line-height: 1.2em;} .m_all_menu_wrap.FM3 .menu_li_tt a {padding: 12px 20px;position: relative;line-height: 1.2em;} .m_all_menu_wrap.FM3 .menu_li_sub{position: relative; padding-left: 20px; padding-bottom: 17px;} .m_all_menu_wrap.FM3 .menu_li_sub li a {position: relative; color: #c1cdf0; font-size: 14px; font-weight: 400;} .m_all_menu_wrap.FM3 .menu_li_sub > li a{padding: 6px 15px;} .m_all_menu_wrap.FM3 .menu_li_sub li.on > a, .m_all_menu_wrap.FM3 .menu_li_sub li a.open{text-decoration: underline; text-underline-offset: 3px;} .m_all_menu_wrap.FM3 .menu_li_sub li .sub_menu_div{/*display: none;*/ padding: 0 0 0 15px;} .m_all_menu_wrap.FM3 .menu_li_sub li .custom_sub_menu{/*display: none; */padding: 0 0 0 15px;} .m_header.M_FM3_on{width: 70%; margin-left: auto;} .m_header.M_FM3_on .container_fix{justify-content: flex-end;} .m_header.M_FM3_on .container_fix .m_logo_box, .m_header.M_FM3_on .container_fix .m_logo{display: none;} .m_header.M_FM3_on .container_fix .btn_menu_wrap .all_btn_box > ul > li > a img, .m_header.M_FM3_on .container_fix .btn_menu_wrap .all_btn_box .lang_btn img, .m_header.M_FM3_on .container_fix .btn_menu_wrap .m_all_menu img{filter: invert(1) brightness(2);} .m_header.M_FM3_on .m-sidear-menu .all_close .line{background-color: #ffffff;} /* 2025-05-14 (주)파이브센스_FIVESENSES.Corp. */ .m_all_menu_wrap.FM3 span.link_icon{display: inline-block; position: relative; top: 0 !important; right: 0;} .m_all_menu_wrap.FM3 span.link_icon img{width: 12px; position: relative; display: block;} .m_all_menu_wrap.FM3 .menu_li_sub span.link_icon img{width: 11px;} /* 피씨 검색로딩 */ #pc_search_box{display: none;} #pc_search_box * {font-family: 'Pretendard';} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_top {display: flex; align-items: flex-end; justify-content: space-between; padding: 20px 20px 12px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_top .preview_top_title {font-size: 15px; line-height: 1.2; font-weight: 700; color: var(--main-point-color);} #pc_search_box .search_bot .pc_search_preview_box .pc_search_recommend_top .recommend_top_title {font-size: 15px; line-height: 1.2; font-weight: 700; color: var(--main-point-color); text-align: left; padding: 25px 20px 12px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_top .all_delete_btn {border: none; width: auto; white-space : nowrap; background-color: transparent; position: relative; top: 9px; right: 0; color: #b1b1b1; font-size: 13px;} .at-header .search_drop #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_top .all_delete_btn{top: 3px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_mid .preview_list{padding: 0 15px; display: flex; flex-wrap : wrap; gap: 6px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_mid .preview_list li {padding: 0;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_mid .preview_list li:hover {background-color: transparent;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_mid .preview_list li a {display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border: none; background-color: #f5f5f5; border-radius: 16px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_mid .preview_list li + li {border-top: none;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_mid .preview_list li + li a {margin-left: 0px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_mid .preview_list li .left { width: auto; overflow: visible; border-radius: 0; margin-right: 0;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_mid .preview_list li .left p { font-size: 14px; font-weight: 400; color: #444; line-height: 32px; white-space : nowrap;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_mid .preview_list li .right{background-color: transparent; border: none; margin-left: 9px; position: relative; top: 0; right: 0; transform: none; width: 10px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_recommend_mid .recommend_list {display: flex; flex-wrap : wrap; gap: 6px; padding: 0 15px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_recommend_mid .recommend_list li {display: block; height: 33px; padding: 0;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_recommend_mid .recommend_list li:hover {background-color: #fff;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_recommend_mid .recommend_list li + li {border: none;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_recommend_mid .recommend_list li a {display: block; font-size: 14px; font-weight: 400; color: var(--main-point-color-hover); line-height: 32px; padding: 0 11px; background-color: var(--main-point-bg-soft-color); border-radius: 16.5px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_mid .more_keyword .more_keyword_btn button {border: 1px solid #e1e1e1; background-color: #fff; border-radius: 16.25px; width: 87.5px; height: 32.5px; margin: 15px auto 0; font-size: 11px; color: #333; line-height: 30.5px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_mid .more_keyword .more_keyword_btn .arrow {display: inline-block; font-family: 'SUIT', sans-serif; font-weight: 500; transform: rotate(90deg); margin-left: 2px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_mid .list_off{color: #999999; font-size: 13px; font-weight: 400; padding: 0 5px; text-align: left;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_mid .list_off img{display: block; margin: 0 auto 15px; width: 41px; height: 41px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot{padding-bottom: 20px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .keyword_rank_box_title {font-size: 15px; line-height: 1.2; font-weight: 700; color: var(--main-point-color); text-align: left; padding: 30px 20px 5px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot > p {font-size: 10px; font-weight: 400; color: #999; text-align: left; padding-left: 15px; margin: 10px 0 10px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .rank_box .rank_list {padding: 0 20px;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .rank_box .rank_list .rank_li {padding: 0;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .rank_box .rank_list .rank_li:hover{background-color: #fff;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .rank_box .rank_list .rank_li + .rank_li {margin-left: auto; border: none;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .rank_box .rank_list .rank_li + .rank_li a {margin-left: auto; border-top: none;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .rank_box .rank_list .rank_li .rank_a {font-size: 15px; line-height: 30px; font-weight: 400; display: flex; align-items: center; width: 100%; padding: 0;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .rank_box .rank_list .rank_li .rank_a .num {font-family: "Open Sans", sans-serif; font-weight: 700; width: 20px; text-align: left; color: var(--main-point-color) !important; transition: 0.2s;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .rank_box .rank_list .rank_li .rank_a:hover .num {color: var(--main-point-color-hover) !important;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .rank_box .rank_list .rank_li .rank_a .keyword {color: #666;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .rank_box .rank_list .rank_li .rank_a:hover .keyword {color: var(--main-point-color-hover);} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .rank_box .rank_list .rank_li .rank_a .status {margin-left: auto; position: relative;} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .rank_box .rank_list .rank_li .rank_a .status.rank_up:before {content: ""; border-bottom: 5.5px solid #f86e78; border-left: 4.5px solid rgba(0, 0, 0, 0); border-right: 4.5px solid rgba(0, 0, 0, 0); position: absolute; left: -5px; top: 50%; transform: translatey(-50%);} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .rank_box .rank_list .rank_li .rank_a .status.rank_down:before {content: ""; border-top: 5.5px solid #aaa; border-left: 4.5px solid rgba(0, 0, 0, 0); border-right: 4.5px solid rgba(0, 0, 0, 0); position: absolute; left: -5px; top: 50%; transform: translatey(-50%);} #pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_bot .rank_box .rank_list .rank_li .rank_a .status.rank_keep:before {content: ""; display: inline-block; width: 6px; height: 1px; background: #aaa; position: absolute; left: -5px; top: 50%; transform: translatey(-50%);} /* 2025-02-13 (주)파이브센스_FIVESENSES.Corp. 게시판 상세페이지 헤더 추가 */ /* .m_header.wr_id_h{padding: 14px 0;} */ .container_fix.wr_id_header{justify-content: center;} .wr_id_header .list_btn{position: absolute; top: 0; left: 15px;} .wr_id_header .list_btn img{width: 20px; height: auto;} /* 2025-02-14 (주)파이브센스_FIVESENSES.Corp. 게시판 작성페이지 헤더 추가 */ .m_header.write_h{padding: 10px 0;} .m_header .write_header{justify-content: flex-end !important; padding-top: 2px;} .m_header .write_header .list_btn{position: absolute; top: 13px; left: 15px;} .m_header .write_header .list_btn img{width: 20px; height: auto;} /* 2025-03-28 (주)파이브센스_FIVESENSES.Corp. */ .m_header .write_header .btn{color: #5d5d5d; font-size: 14px; line-height: 1em; background-color: #ebebeb; border-radius: 4px !important; padding: 12px 16px; border: none; transition: 0.2s;} .m_header .write_header .btn:hover{background-color: #e8e8e8;} .m_header .write_header .btn-2{color: #fff; background-color: var(--main-point-btn-bg-color-hover); margin-left: 8px;} .m_header .write_header .btn-2:hover{opacity: 0.8;background-color: var(--main-point-btn-bg-color-hover);} /* 2025-03-10 (주)파이브센스_FIVESENSES.Corp. 게시판 헤더 실선제거 */ .at-header.m_no_border{border-color: transparent;} /*************************** 어드민 헤더 ***************************/ /* 어드민 설정 */ /* .admin__area.fixed{position: fixed; top: 0; left: 0; width: 100%; z-index: 1002;} */ .admin__area.fixed {position: relative; width: 100%;} /* css END */