/* 2025-02-24 (주)파이브센스_FIVESENSES.Corp. */ /* (주)파이브센스_FIVESENSES.Corp. 본 라이브러리(소스코드 및 디자인 포함)는 (주)파이브센스의 자산이며, 저작권법 및 부정경쟁방지법에 의해 보호됩니다. 무단 사용, 외부 유출, 복제, 배포, 변형을 금지합니다. 위반 시 민·형사상 법적 책임 및 손해배상 청구 대상이 됩니다. 작성일: 2025-02-24 | 저작권자: (주)파이브센스(520-86-01244) | All Rights Reserved. */ /*************************** 베이직 헤더 20 ***************************/ /* 베이직 헤더 20 > 메뉴공통 */ .header20.pc.up.fixed{top: -122px !important;} /* .header20 .header-menu .container_fix{max-width: 1530px; width: 100%; display: flex; align-items: center; justify-content: space-between;} */ .header20 .header-menu .container_fix{max-width: 100%; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 55px;} .header20.fixed .header-menu .container_fix {max-width: 1430px;} .header20 .header-menu .nav-top{display: flex; justify-content: space-between;} .header20 .header-menu .pc-menu{background-color: transparent; height: 85px; border-bottom: 1px solid transparent;} .header20 .pc-menu .nav-top .menu_ul_rigth{display: flex; align-items: center; justify-content: flex-end;} .header20 .header-menu .logo_box{position: relative; z-index: 11; line-height: 85px;} .all_menu_container .all_menu_logo img, .header20 .header-menu .logo_box img{height: 30px; transition: 0.3s; transform: translateY(-3px);} .header20 .pc-menu .nav-top .menu-ul{width: auto;} .header20 .pc-menu .nav-top .menu-ul .menu-li-icon, .header20 .pc-menu .nav-top .menu-ul .menu-li{display: inline-block; position: static; vertical-align: middle;white-space : nowrap; } .header20 .pc-menu .nav-top .menu-ul .menu-li-icon > a{color: #5d5d5d; font-weight: 400; font-size: 16px; display: block; background-color: #fff; border: 1px solid #e1e1e1; line-height: 38px; border-radius: 8px; padding: 0 10px; transition: 0.2s;} .header20 .pc-menu .nav-top .menu-ul .menu-li-icon > a:hover{border-color: #c2c2c2;} /* .header20 .pc-menu .nav-top .menu-ul .menu-li > a{display: inline-flex; justify-content: center; align-items: center; gap: 5px; line-height: 1; color: #595959; font-weight: 400; font-size: 16px; padding: 9px 14px; transition: 0.3s;} */ .header20 .pc-menu .nav-top .menu-ul .menu-li > a{display: inline-flex; justify-content: center; align-items: center; gap: 5px; line-height: 1; color: #0c0c0c; font-weight: 400; font-size: 17px; padding: 9px 14px; transition: 0.3s;} /* .at-header .pc-menu .nav-top .menu-li:hover .menu-a {color: #595959;} */ .at-header .pc-menu .nav-top .menu-li:hover .menu-a {color: #0c0c0c;} .at-header .pc-menu .nav-top .menu-li.on .menu-a{color: #595959; font-weight: 600} .header20 .pc-menu .nav-top .menu-ul .menu-li-icon > a img{display: inline-block;} .header20 .pc-menu .nav-top .menu-ul .menu-li-icon.search_li{margin-left: 10px;} .header20 .pc-menu .nav-top .menu-ul .menu-li-icon.mypage_btn_li{margin-left: 10px;} .header20 .header-menu .container_fix .menu_ul_02 li .cart_count{right: -9px; bottom: -4px; line-height: 15px; font-size: 9px; display: inline-block;width: 15px;height: 15px;border-radius: 50%;background: var(--main-point-bg-color-hover);text-align: center;font-weight: 500;color: #fff;position: absolute;} .header20 .pc-menu .nav-top .ham_btn{line-height: 60px; margin-left: 10px;} .header20 .pc-menu .nav-top .menu-a{background-color: transparent; font-size: 18px; color: var(--main-point-color); position: relative; z-index: 12;} .header20 .pc-menu .nav-top .menu_ul_left{display: flex; align-items: center; justify-content: flex-start;} .header20 .pc-menu .nav-top .menu_ul_01{width: auto; display: flex; align-items: center; justify-content: flex-start; margin-left: 17px; transition: 0.3s;} .header20 .pc-menu .nav-top .menu_ul_01 .menu-a{padding: 0 15px; transition: .5s ease-out;} .header20 .pc-menu .nav-top .menu-li .menu-a span.menu_arr{display: inline-block; width: 8px; height: 8px; border-left: 2px solid #ccc; border-bottom: 2px solid #ccc; transform: rotate(-45deg); position: relative; top: -2px; margin-left: 5px; transition: 0.3s;} /* 새 글 깜빡임 아이콘 */ .header20 .pc-menu .nav-top .menu-ul .menu-li > a { position: relative; } .header20 .pc-menu .nav-top .menu-ul .menu-li > a .new { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; background-color: #2556f5; border-radius: 50%; display: none; margin-right: 5px; animation-name: newIcon; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; } .header20 .pc-menu .nav-top .menu-ul .menu-li:nth-child(3) > a .new { display: inline-block; } @keyframes newIcon { from { opacity: 0; } to { opacity: 1; } } /* 좌측메뉴 hover 효과 */ .header20 .pc-menu .nav-top .menu_ul_01 .menu-li:hover > a {background-color: #f2f4f6; border-radius: 8px; transition: 0.3s;} .header20 .pc-menu .nav-top .menu-li:hover .menu-a span.menu_arr{top: 0; transform: rotate(135deg); transition: 0.3s;} /* 서브 헤더 */ .header20 .header-inner{position: relative;z-index: 2;} .header20 .header-top{overflow: hidden;background: var(--main-point-bg-color-hover);width: 100%;} .header20 .header-top .container_fix{max-width: 1850px;padding: 0 15px;} /* 햄버거 버튼 */ .ham_btn {width: 40px;vertical-align: middle;} .header20 .pc-menu .nav-top .ham_btn a{width: 100%;height: 40px;position: relative;display: block; background-color: transparent; border-radius: 8px; transition: 0.2s;} .header20 .pc-menu .nav-top .ham_btn a:hover{background-color: #f2f4f6;} .ham_btn .line{width: 14px;height: 2px;background: #0c0c0c;position: absolute;top: 13px;left: 11px; transition: all 0.2s;} .ham_btn .line2{top: 19px; width: 18px;} .ham_btn .line3{top: 25px;} /* 드롭1 관련 css */ .at-header .pc-menu .DMS01 .all_menu_wrap{top: 74px;} .at-header .pc-menu .DMS01 .all_menu_wrap > .container_fix{max-width: 1850px;} .at-header .pc-menu .DMS01 .all_menu_wrap > .container_fix .all_menu_ul{justify-content: flex-start; padding-left: 242px;} .at-header .pc-menu .DMS01 .nav-top .menu-li:hover .menu-a, .at-header .pc-menu .DMS01 .nav-top .menu-li.hover .menu-a, .at-header .pc-menu .DMS01 .nav-top .menu-li.on .menu-a{color: var(--main-point-color); font-weight: 700;} .header20 .pc-menu .DMS01 .nav-top .menu_ul_01 .menu-li{width: 10.5em; transition: .5s ease-out;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_menu_li{width: max(8vw,160px);} .header20 .pc-menu.on .DMS01 .nav-top .menu_ul_01 .menu-li{width: max(8vw,160px);} .header20 .pc-menu.on .DMS01 .nav-top .menu_ul_01 .menu-a{padding: 0 35px;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_sub_a{color: #5d5d5d;} .at-header .pc-menu .DMS01 .all_menu_wrap .all_sub_a span::before{background-color: #5d5d5d;} /* 드롭2 관련 css */ .at-header .pc-menu .DMS02 .nav-top.nav-both .sub-1div{margin-top: -13px;} .at-header .pc-menu .DMS02 .nav-top .sub-1da{color: #5d5d5d;} .at-header .pc-menu .DMS02 .nav-top .sub-1div-arr{border-color: #6e6e6e;} .at-header .pc-menu .DMS02 .nav-top .sub-1dli:hover > .sub-1da + .sub-1div-arr{border-color: #6e6e6e;} /* 드롭3 관련 css */ .at-header .pc-menu .DMS03 .nav-top .sub-1da, .at-header .pc-menu .DMS03 .nav-top .sub-2da, .at-header .pc-menu .DMS03 .nav-top .sub-2dli:hover .sub-2da{color: #5d5d5d;} .at-header .pc-menu .DMS03 .nav-top .sub-1dli:hover > .sub-1da + .sub-1div-arr{border-color: #6d6e6e;} /* 드롭4 관련 css */ .header20 .pc-menu .DMS04 .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: 50%; transform: translateX(-50%); bottom: 0; transition: .5s ease-out; } .header20 .pc-menu .DMS04 .nav-top .menu_ul_01 .menu-li:hover .menu-a::before{width: 100%;} .at-header .pc-menu .DMS04 .sub-1div{max-height: calc(100vh - 84px); text-align: left;} .at-header .pc-menu .DMS04 .sub-1div > ul > li .sub-1da{margin: 0 15px; font-size: 16px; color: #5d5d5d;} .at-header .pc-menu .DMS04 .sub-1div > ul > li .sub-1da span::before{background-color: #5d5d5d;} .at-header .pc-menu .DMS05 .sub-1div.var2 .sub-2da span.text::before{background-color: #5d5d5d;} /* 정렬 바꿀 때 수정 */ /* .at-header .pc-menu .DMS04 .menu-li:nth-of-type(n+2) .sub-1div{left: 50%; transform: translateX(-50%);} .at-header .pc-menu .DMS04 .menu-li:last-of-type .sub-1div{right: 0; left: auto; transform: none;} */ /* 드롭5 관련 css */ .header20 .pc-menu .DMS05 .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: 50%; transform: translateX(-50%); bottom: 0; transition: .5s ease-out; } .header20 .pc-menu .DMS05 .nav-top .menu_ul_01 .menu-li:hover .menu-a::before{width: 100%;} .at-header .pc-menu .DMS05 .sub-1div.var1{text-align: left;} .at-header .pc-menu .DMS05 .sub-1div.var1 > ul > li .sub-1da{font-size: 16px; color: #5d5d5d;} .at-header .pc-menu .DMS05 .sub-1div.var1 > ul > li .sub-1da span::before{background-color: #5d5d5d;} /* 정렬 바꿀 때 수정 */ /* .at-header .pc-menu .DMS05 .nav-top .menu-ul .menu-li{position: relative;} .at-header .pc-menu .DMS05 .nav-top .menu-ul .menu-li.expand{position: static;} .at-header .pc-menu .DMS05 .menu-li:nth-of-type(n+2):not(.expand) .sub-1div{left: 50%; transform: translateX(-50%);} .at-header .pc-menu .DMS05 .menu-li:last-of-type:not(.expand) .sub-1div{right: 0; left: auto; transform: none;} */ /* 2025-06-05 (주)파이브센스_FIVESENSES.Corp. 드롭6 관련 css */ .at-header .pc-menu .DMS06 .nav-top.nav-both .sub-1div{left: 0;} /* 전체메뉴1 */ .at-header .all_menu_container.FM1{top: 74px;} .at-header.admin-H .all_menu_container.FM1{top: 74px;} .at-header .all_menu_container.FM1 > .container_fix{max-width: 1850px;} .at-header .all_menu_container.FM1 > .container_fix .all_menu_ul{justify-content: flex-start; padding-left: 242px;} .header-menu.FM1_on .pc-menu .nav-top .menu_ul_01 .menu-li{transition: 0.5s ease-out; line-height: 74px;} .header-menu.FM1_on .pc-menu.on .nav-top .menu_ul_01 .menu-li{width: max(8vw,160px);} .header-menu.FM1_on .pc-menu.on .nav-top .menu_ul_01 .menu-a{padding: 0 35px;} .header-menu.FM1_on .pc-menu.on .nav-top .menu_ul_01 .all_menu_li{width: max(8vw,160px);} .at-header .all_menu_container.FM1 .all_menu_li{width: max(8vw,160px);} .at-header .all_menu_container.FM1 .all_sub_a{color: #5d5d5d;} .at-header .all_menu_container.FM1 .all_sub_a span::before{background-color: #5d5d5d;} /* 전체메뉴6 */ .admin-H .all_menu_container.FM6.active{top: 100px;} .at-html.fixed .admin-H .all_menu_container.FM6.active{top: 100px;} /* 전체메뉴9 */ .header20 .header-menu.FM9_on.all_on .pc-menu .nav-top .menu_ul_01 > li > .menu-a{color: #ffffff;} .header20 .header-menu.FM9_on.all_on .pc-menu .nav-top .menu_ul_01 > li:nth-child(1) > .menu-a{color: #ffffff;} .header20 .header-menu.FM9_on.all_on .pc-menu .nav-top .menu-a span.menu_arr{border-color: #fff;} .header-menu.FM9_on.all_on .ham_btn .line{width: 20px;} .header-menu.FM9_on.all_on .ham_btn .line1{transform: rotate(45deg) translate(3px, 5px);} .header-menu.FM9_on.all_on .ham_btn .line3{transform: rotate(-45deg) translate(4px, -6px);} .header20 .header-menu.FM9_on.all_on .pc-menu .nav-top .menu_ul_02 .mypage_btn_li > a, .header20 .header-menu.FM9_on.all_on .pc-menu .nav-top .menu_ul_02 .search_li > a{color: var(--main-point-color);} .header20 .header-menu.FM9_on.all_on .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box .lang_btn{color: var(--main-point-color);} .header20 .header-menu.FM9_on.all_on .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box .lang_btn::after{border-color: var(--main-point-color);} .header20 .header-menu.FM9_on.all_on .pc-menu .nav-top .menu_ul_01 > li:nth-child(n+6) > .menu-a{color: #6b7684;} /* 우측메뉴 */ .header20 .pc-menu .nav-top .menu_ul_02{display: flex; align-items: center; justify-content: flex-end; gap: 10px;} .header20 .pc-menu .nav-top .menu_ul_02 .mypage_btn_li > a{position: relative; } .header20 .pc-menu .nav-top .menu_ul_02 .estimate_btn{margin-left: 10px;} .header20 .pc-menu .nav-top .menu_ul_02 .estimate_btn > a{background-color: var(--main-point-btn-bg-color-hover); border-color: var(--main-point-btn-line-color-hover); color: #fff; padding: 0 17px;} .header20 .pc-menu .nav-top .menu_ul_02 .estimate_btn > a:hover{opacity: 0.8; background-color: var(--main-point-btn-bg-color-hover); border-color: var(--main-point-btn-line-color-hover);} .header20 .pc-menu .nav-top .menu_ul_02 .search_li > a {display: flex;align-items: center;justify-content: center;background: none;outline: none;border: none; height: 40px; padding: 0 12px;} .header20 .pc-menu .nav-top .menu_ul_02 .search_li > a:hover{background-color: #f2f4f6;} .header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li{position: relative; margin-left: 10px;} .header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box{display: inline-block;text-align: center;position: relative;z-index: 10;} .header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box .lang_btn{position: relative;padding: 12px;display: flex;align-items: center; border-radius: 8px;} .header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box .lang_btn:hover{background-color: #f2f4f6;} .header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box .lang_btn > span{display: flex; align-items: center; justify-content: center;} /* .header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box .lang_btn::after{content: ''; display: block; width: 8px;height: 8px;border-left: 2px solid var(--main-point-color);border-bottom: 2px solid var(--main-point-color); position: relative; transform: rotate(-45deg); top: -3px; left: 0; margin-left: 7px;} */ .header20 .pc-menu .nav-top .menu_ul_02 .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;white-space: nowrap; margin-top: 10px;} .header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box.active .lang_btn + .lang_ul{display: block;background: #fff;} .header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box.active .lang_btn + .lang_ul li{padding: 0; text-align: center;} .header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box.active .lang_btn + .lang_ul li + li {margin-top: 5px;} .header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box.active .lang_btn + .lang_ul li a{display: block; padding: 14.5px 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;} .header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box.active .lang_btn + .lang_ul li a.on{background-color: #f2f4f6;} .header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box.active .lang_btn + .lang_ul li a:hover{background-color: #f2f4f6;} .header20 .pc_header .container_fix .menu-ul .lang_btn_li li .lang_btn_box.active .lang_btn img{filter: brightness(0) !important;} /* 우측메뉴 커스텀 추가(25.06.12) */ .header20 .pc-menu .nav-top .menu_ul_02 .menu-li {line-height: 1; margin-bottom: 4px;} /* .header20 .pc-menu .nav-top .menu_ul_02 .menu-li > a {line-height: 1; padding: 10px 12px; transition: 0.3s; gap: 1px; color: #595959} */ .header20 .pc-menu .nav-top .menu_ul_02 .menu-li > a {line-height: 1; padding: 11.5px 13.5px; transition: 0.3s; gap: 1px; color: #595959} .header20 .pc-menu .nav-top .menu_ul_02 .menu-li:nth-child(2) > a {border: 1px solid #ebebeb; border-radius: 8px;} /* .header20 .pc-menu .nav-top .menu_ul_02 .menu-li:last-child > a {color: #fff; background-color: var(--main-point-color-hover); border-radius: 8px; padding: 10px 15px;} */ .header20 .pc-menu .nav-top .menu_ul_02 .menu-li:last-child > a {color: #fff; background-color: var(--main-point-color-hover); border-radius: 8px; padding: 12.5px 18px;} .header20 .pc-menu .nav-top .menu_ul_02 .menu-li .menu-li-hover {position: absolute; top: calc(100% + 5px); left: 50%; display: flex; align-items: center; padding: 9px 13px; font-size: 14px; font-weight: 600; background-color: #fff; border: 1px solid #ebebeb; border-radius: 19px; line-height: 1; transform: translateX(-50%); transition: 0.3s; opacity: 0; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.09);} .header20 .pc-menu .nav-top .menu_ul_02 .menu-li:last-child .menu-li-hover {left: auto; transform: translateX(0); right: 0;} .header20 .pc-menu .nav-top .menu_ul_02 .menu-li .menu-li-hover img {margin-right: 5px;} .header20 .pc-menu .nav-top .menu_ul_02 .menu-li .menu-li-hover span {color: var(--main-point-color-hover);} .header20 .pc-menu .nav-top .menu_ul_02 .menu-li .menu-li-hover p {color: #595959;} /* 우측메뉴 hover 효과 */ .header20 .pc-menu .nav-top .menu_ul_02 .menu-li:nth-child(2):hover > a {background-color: #f2f4f6; transition: 0.3s; color: #595959;} .header20 .pc-menu .nav-top .menu_ul_02 .menu-li:last-child:hover > a {background-color: #4171f5; transition: 0.3s;} .header20 .pc-menu .nav-top .menu_ul_02 .menu-li:hover .menu-li-hover {opacity: 1; transition: 0.3s;} /* 우측메뉴 커스텀 추가(25.11.14) */ .header20 .pc-menu .nav-top .menu_ul_02 .tel-li {position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-right: 10px; transition: 0.3s;} .header20 .pc-menu .nav-top .menu_ul_02 .tel-li .tel {font-size: 18px; font-weight: 600; color: #0c0c0c; line-height: 1;} .header20 .pc-menu .nav-top .menu_ul_02 .tel-li .email {font-size: 14px; font-weight: 300; color: #6c7682; line-height: 1;} .header20 .pc-menu .nav-top .menu_ul_02 .tel-li:hover .tel {color: #6b6b6b; transition: 0.3s;} .header20 .pc-menu .nav-top .menu_ul_02 .tel-li:hover .email {color: #a0a6ad; transition: 0.3s;} .header20 .pc-menu .nav-top .menu_ul_02 .tel-li .tel-li-hover {position: absolute; top: calc(100% + 7px); left: 50%; display: flex; align-items: center; padding: 9px 13px; font-size: 14px; font-weight: 600; background-color: #fff; border: 1px solid #ebebeb; border-radius: 19px; line-height: 1; transform: translateX(-50%); transition: 0.3s; opacity: 0; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.09); white-space: nowrap;} .header20 .pc-menu .nav-top .menu_ul_02 .tel-li .tel-li-hover img {margin-right: 5px;} .header20 .pc-menu .nav-top .menu_ul_02 .tel-li .tel-li-hover span {color: var(--main-point-color-hover);} .header20 .pc-menu .nav-top .menu_ul_02 .tel-li .tel-li-hover p {color: #595959;} .header20 .pc-menu .nav-top .menu_ul_02 .tel-li:hover .tel-li-hover {opacity: 1; transition: 0.3s;} @media (max-width: 1510px) { .header20 .pc-menu .nav-top .menu_ul_02 .tel-li {display: none;} } /*************************** 일체형 헤더 ***************************/ /* 일체형 헤더 */ .at-header.transparent_H .marker_box > a.marker_icon{background: url(../../../../img/marker_icon_H8_w.png) no-repeat;} .at-header.transparent_H.header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box .lang_btn{color: #fff;} /* .at-header.transparent_H.header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box.active .lang_btn{color: var(--main-point-color);} */ /* .at-header.transparent_H.header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box .lang_btn::after{border-left-color: #fff; border-bottom-color: #fff;} */ /* .at-header.transparent_H.header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box.active .lang_btn::after{border-color: var(--main-point-color);} */ .at-header.transparent_H.header20 .pc-menu .nav-top .menu_ul_02 .mypage_btn_li > a{color: #fff;} .at-header.transparent_H.header20 .pc-menu .nav-top .menu_ul_02 .search_li > a{color: #fff;} .at-header.transparent_H.header20 .pc-menu .nav-top .menu_ul_01 .menu-a{color: #fff;} @media (max-width: 1750px) { .header20 .pc-menu .nav-top .menu_ul_02 .menu-li .menu-li-hover {left: auto; right: 0; transform: translateX(0);} } @media (max-width : 1510px){ .header20 .header-menu .nav-top{padding: 0 15px;} .header20 .pc-menu .nav-top .menu_ul_01{position: relative; left: 0; transform: translateX(0);} .at-header .pc-menu .all_menu_view{left: calc(50% + 23%); width: calc(100vw + 60px);} .header20 .pc-menu .nav_threedepth .nav-top.nav-both .sub-1div{left: 69%;} .header20 .pc-menu .nav-top .menu-a{font-size: 14px;} .header20 .pc-menu .nav-top .menu_ul_02 .mypage_btn_li > a{font-size: 14px;} } @media (max-width : 1350px){ .at-header .pc-menu .all_menu_view{left: calc(50% + 30%); width: calc(100vw + 75px);} .at-header .pc-menu .all_menu_view > .container_fix{padding: 0 50px;} } @media (max-width : 1240px){ .at-header .pc-menu .all_menu_view{left: calc(50% + 24%); width: calc(100vw + 80px);} .header20 .pc-menu .nav-top .menu_ul_02 .lang_btn_li{padding-left: 65px;} .header20 .pc-menu .nav-top .menu_ul_01 .menu-a{padding: 0 8px;} .header20 .pc-menu .nav_threedepth .nav-top.nav-both .sub-1div{left: 72%;} } @media (max-width:1200px) { .header20 .pc-menu .nav-top .menu_ul_01 {margin-left: 20px;} /* .header-menu.FM1_on .pc-menu .nav-top .menu_ul_01 .menu-li {width: 8em;} */ .header20 .pc-menu .nav-top .menu-ul .menu-li > a {font-size: 15px;} .at-header .pc-menu .DMS06 .nav-top.nav-both .sub-1div {left: 50%; transform: translateX(-50%);} } @media (max-width : 1090px){ .at-header .pc-menu .all_menu_view{left: calc(50% + 26%);} .header20 .pc-menu .nav-top .menu_ul_01 {margin-left: 5px;} .header20 .header-menu .logo_box img {height: 25px;} .header20 .header-menu .container_fix {padding: 0 15px;} .header20 .pc-menu .nav-top .menu-ul .menu-li > a {padding: 9px 10px; font-size: 14px;} } /*************************** 블러형 헤더 ***************************/ /*************************** 스크롤 헤더 ***************************/ .header20.fixed .header-menu .pc-menu{height: 74px;} .header20.fixed .header-menu .logo_box{line-height: 74px;} /* .header20.fixed .pc-menu .nav-top .menu_ul_01{margin-left: 0;} */ /* .header20.fixed .pc-menu .nav-top .menu-ul .menu-li-icon > a, .header20.fixed .pc-menu .nav-top .menu-ul .menu-li > a{line-height: 70px;} */ /* .fixed .all_menu_container .all_menu_logo img, .fixed .header20 .header-menu .logo_box img{height: 28px;} */ /* .at-header.fixed .pc-menu .DMS02 .nav-top.nav-both .sub-1div{top: 70px;} */ /* .at-header.fixed .header-top .btn_wrap{padding: 0;} */ .at-header.fixed .header-top .btn_wrap::before{width: 101vw; border-radius: 0;} .at-header.fixed .pc-menu .DMS01 .all_menu_wrap{top: 74px;} .at-header.fixed .pc-menu .DMS01 .all_menu_wrap > .container_fix .all_menu_ul{padding-left: 242px;} .at-header.fixed .all_menu_container.FM1{top: 74px;} .at-header.fixed .all_menu_container.FM1 > .container_fix .all_menu_ul{padding-left: 242px;} .at-header.fixed.admin-H .all_menu_container.FM1{top: 60px;} .at-header.fixed .pc-menu .nav-top .menu_ul_02 .lang_btn_li .lang_btn_box .lang_btn + .lang_ul{margin-top: 0;} /* 신버전 */ /* .at-header .DMS06 {position: relative;} */ .header20 .header-menu .nav-top {position: static;} .header20 .header-menu .DMS06 { position: absolute; left: 50%; transform: translate(-50%, 0); top: 0px; z-index: 10; width: 100%; background: #fff; } .header20 .header-menu .DMS06.initAni { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), position 0.3s ease; }