/* A A A : A : A : A : */ #TitleMenu_LeftLogo_fullSub_dark { width : 100%; height : auto; position : fixed; top : 0; left : 0; transition : .2s; z-index : 100;} #TitleMenu_LeftLogo_fullSub_dark.on { top : -40px; transition : .2s;} #TitleMenu_LeftLogo_fullSub_dark .navTop { width : 100%; height : 40px; padding : 0 20px; background : none; transition : .2s; } #TitleMenu_LeftLogo_fullSub_dark:hover .navTop { background : #ddd; transition : .2s;} #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap { width : 100%; height : 100%; max-width : 1400px; display : flex; justify-content : space-between; align-items : center; margin : 0 auto; font-size : clamp(14px,1.3vw,16px); } #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap { width : auto; height : 100%; display : flex; justify-content : flex-start; align-items : center; flex-grow : 1; } #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap a { font-size : inherit; margin-right : clamp(1.1em,1vw,2em); display : flex; align-items : center; color : #545555; transition : .2s; } #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap a:last-child { margin-right : 0; } #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap a img { width : 100%; height : auto; max-width : 23px; transition : .1s; } #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap a:hover img { filter : drop-shadow(2px 2px 3px #999); transition : .1s; } #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap svg { font-size : 23px; margin-right : 0.3em; color : #555;} #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap .line { width : 1px; height : 23px; background : #555; font-size : inherit; margin-right : clamp(1.1em,1vw,2em) } #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap .searchBtn { width : 23px; height : 100%; position : relative;} #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap .searchBtn p { position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%); cursor : pointer; transition : .2s; opacity : 0; pointer-events : none; } #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap .searchBtn p#searchOn { opacity : 1; pointer-events : auto;} #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap .searchBtn p svg { margin-right : 0; } #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap .searchWrap { width : auto; height : 100%; display : flex; align-items : center; flex-grow : 1; } #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap .searchWrap .searchInputWrap { width : 0%; height : 100%; display : flex; align-items : center; transition : .3s; overflow : hidden; pointer-events : none;} #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap .searchWrap .searchInputWrap.on { width : 100%; pointer-events : auto; transition : .5s;} #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap .searchWrap .searchInputWrap .innerWrap { width : 50%; height : auto; display : flex; align-items : center; border-radius : 25px; border : 1px solid #555; font-size : 14px; background : none; max-width : 400px; margin-left : 1em; transition : .2s; overflow : hidden; pointer-events : auto; } #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap .searchWrap .searchInputWrap input { width : 50%; height : auto; border : none; outline : none; font-size : inherit; line-height : 1em; padding : 0.5em 0; flex-grow : 1; margin-left : 1em; background : none; color : #555;} #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap .searchWrap .searchInputWrap button { font-size : inherit; cursor : pointer; margin-right : 1em;} #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap .searchWrap .searchInputWrap button svg { font-size : clamp(14px,1.3vw,16px); margin-right : 0; margin-left : 1em;} #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .leftWrap .searchBtn p:hover { filter : drop-shadow(2px 2px 3px #999); transition : .1s; } #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .loginBar { width : auto; height : 100%; display : flex; justify-content : flex-end; align-items : center; font-size : inherit; } #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .loginBar a { font-size : inherit; line-height : 1em; margin-left : 1.2em; transition : .2s; color : #555; } #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .loginBar a:first-child { margin-left : 0;} #TitleMenu_LeftLogo_fullSub_dark .navTop .navTopWrap .loginBar a:hover { color : #000; transition : .2s; } #TitleMenu_LeftLogo_fullSub_dark .navBot { width : 100%; height : 90px; padding : 0 20px; transition : .2s; background : #555555b3; } #TitleMenu_LeftLogo_fullSub_dark.on .navBot { height : 60px; background : #555555b3; transition : .2s;} #TitleMenu_LeftLogo_fullSub_dark:hover .navBot { background : #555; transition : .2s;} #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap { width : 100%; height : 100%; max-width : 1400px; display : flex; justify-content : space-between; align-items : center; margin : 0 auto; } #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .logoBox { width : 20%; height : 100%; display : flex; align-items : center; justify-content : flex-start;} #TitleMenu_LeftLogo_fullSub_dark.on .navBot .navBotWrap .logoBox { width : 15%; transition : .2s;} #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .logoBox a { width : auto; height : 100%; display : inline-flex; align-items : center; justify-content : center;} #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .logoBox img { width : 100%; height : 80%; object-fit : contain; max-width : 150px; transition : .2s; } #TitleMenu_LeftLogo_fullSub_dark.on .navBot .navBotWrap .logoBox img { max-width : 110px; transition : .2s;} #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .menuListWrap { width : 100%; height : 100%; display : flex; justify-content : flex-start; align-items : center; color : #fff; max-width : 1100px;transition : .2s; } #TitleMenu_LeftLogo_fullSub_dark.on .navBot .navBotWrap .menuListWrap { max-width : 1200px; transition : .2s;} #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .menuListWrap:hover { color : #fff; } #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .menuListWrap .navBot_menuList { height : 100%; position : relative; border-bottom : 3px solid #ffffff00; } #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .menuListWrap .navBot_menuList:hover { border-bottom : 3px solid #fff; } #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .menuListWrap .navBot_menuList .menuList_a { width : 100%; font-size : clamp(14px,1.5vw,17px); color : #ddd; width : 100%; height : 100%; display : flex; align-items : center; justify-content : center; transition : .2s; } #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .menuListWrap .navBot_menuList:hover .menuList_a { color : #fff; transition : .2s; } #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .menuListWrap .navBot_menuList .subMenuListWrap { width : 100%; height : 0; position : absolute; overflow : hidden; top : calc(100% + 3px); left : 50%; transform : translateX(-50%); text-align : center; display : flex; flex-direction : column; z-index : 1; background : #00000080; transition : .2s; } /* #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .menuListWrap .navBot_menuList .menuList:hover .subMenuListWrap { opacity : 1; pointer-events : auto; transition : .4s;} */ #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .menuListWrap .navBot_menuList .subMenuListWrap a { font-size : clamp(13px,1.5vw,16px); color : #cbcbcb; padding : clamp(5px,2.5vw,10px) 0; transition : .2s; } #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .menuListWrap .navBot_menuList .subMenuListWrap a:last-child { margin-bottom : 8em;} #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .menuListWrap .navBot_menuList .subMenuListWrap a:hover { color : #fff; background : #fff3; transition : .2s; } #TitleMenu_LeftLogo_fullSub_dark .subMenuBack { width : 100%; height : 0; background : #1a1a1a66; position : absolute; top : 100%; left : 0; z-index : 0; transition : .4s; } /* 모바일 & 테블릿 메뉴 버튼*/ #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .mobileNavBtn { color : #ddd; border-radius : 25px; font-size : clamp(13px,1.5vw,16px); cursor : pointer; width : auto; height : auto; display : none; justify-content : center; align-items : center; transition : .3s; } #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .mobileNavBtn svg { font-size : x-large; } /* 모바일 & 테블릿 메뉴*/ #TitleMenu_LeftLogo_fullSub_dark .backCover.on { opacity : 1; pointer-events : auto; transition : .2s; } #TitleMenu_LeftLogo_fullSub_dark .backCover { width : 100%; height : 100vh; background : #00000075; position : fixed; top : 0; display : none; opacity : 0; pointer-events : none; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap { width : 500px; height : 100%; background : #555; position : fixed; top : 0; right : -100%; padding : 70px 70px 0; z-index : 5; transition : 1s; display : none; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap.on { right : 0; transition : 1s; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobileNavCloseBtn { position : absolute; top : 2%; right : 5%; color : #ddd; font-size : 20px; cursor : pointer; display : block; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_logo { width : auto; height : auto; text-align : left; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_logo img { width : 160px; height : auto; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_iconWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : flex-start; flex-wrap : wrap; margin : 40px 0; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_iconWrap .iconBox { font-size : 14px; color : #000; display : flex; flex-direction : column; align-items : center; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_iconWrap .iconBox:last-child { margin-right : 0; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_iconWrap .iconBox svg { font-size : 28px; margin-bottom : 8px; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_iconWrap a { width : 40px; margin-right : 30px; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_iconWrap a:last-child { margin-right : 0; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_iconWrap a img { width : 100%; height : auto; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_iconWrap .mobile_searchWrap { width : 100%; display : flex; justify-content : space-between; background : #fff; height : 35px; margin-top : 20px; align-items : center; transition : .4s; overflow : hidden; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .mobile_search { width : 90%; height : 90%; border : none; padding-left : 10px; font-size : 14px; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .searchLabel { width : 10%; display : flex; align-items : center; justify-content : center; cursor : pointer; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .mobileSubmit { display : none; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_nav { width : 100%; height : auto; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_nav .mobile_navList { width : 100%; height : auto; font-size : 18px; color : #bbb; text-align : left; position : relative; cursor : pointer; transition : .3s; padding : 4px 0; font-weight : 500; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_nav .mobile_navList.active ,#TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_nav .mobile_navList.active:hover { color : #fff; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_nav .mobile_navList.active::after { content : "▲"; font-size : 14px; color : inherit; position : absolute; top : 0; right : 0; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_nav .mobile_navList:hover { color : #eee; transition : .3s; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_nav .mobile_navList::after { content : "▼"; font-size : 14px; color : inherit; position : absolute; top : 0; right : 0; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList { width : 100%; height : auto; padding : 5px 0; max-height : 0px; overflow : hidden; transition : .3s; display : flex; flex-direction : row; flex-wrap : wrap; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li { width : calc(100% / 2); height : auto; padding : 5px 0; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li a { color : #fff; font-size : 14px; font-weight : 500; transition : .3s; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_loginBar { width : 100%; height : auto; border-top : 3px solid #dddddd9e; position : absolute; bottom : 0; left : 0; display : flex; justify-content : center; align-items : center; text-align : center; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_loginBar li { width : 50%; height : auto; padding : 30px 0 ; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_loginBar li a { font-size : 16px; color : #dddddd9e; font-weight : 500; transition : .3s; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_loginBar li a:hover { color : #e4a12e; transition : .3s; } /* 빌더페이지 CSS */ #TitleMenu_LeftLogo_fullSub_dark[view-mode="tab"] .navBot { height : 80px;} #TitleMenu_LeftLogo_fullSub_dark[view-mode="tab"].on .navBot { background : #555; box-shadow : 0px 2px 3px 0px #555;} #TitleMenu_LeftLogo_fullSub_dark[view-mode="tab"] .navBot .navBotWrap .logoBox { flex-grow : 1;} #TitleMenu_LeftLogo_fullSub_dark[view-mode="tab"] .navBot .navBotWrap .logoBox img { max-width : 120px;} #TitleMenu_LeftLogo_fullSub_dark[view-mode="tab"] .navBot .navBotWrap .menuListWrap { display : none; } #TitleMenu_LeftLogo_fullSub_dark[view-mode="tab"] .navBot .navBotWrap .mobileNavBtn { display : flex; } #TitleMenu_LeftLogo_fullSub_dark[view-mode="tab"] .mobile_navWrap { display : block; position : absolute; top : 0; height : calc(100vh - 60px); } #TitleMenu_LeftLogo_fullSub_dark[view-mode="tab"] .backCover { display : block; position : absolute; top : 0; left : 0; height : calc(100vh - 60px); } #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"].on { top : 0;} #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .navTop { display : none; } #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .navBot .navBotWrap .menuListWrap { display : none; } #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .navBot { height : 60px; } #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"].on .navBot { background : #555; box-shadow : 0px 2px 3px 0px #555;} #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .navBot .navBotWrap .logoBox { width : auto; max-width : 90px; } #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"].on .navBot .navBotWrap .logoBox { width : auto; max-width : 90px;} #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .navBot .navBotWrap .mobileNavBtn { display : flex; width : auto; } #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .backCover { display : block; position : absolute; top : 0; left : 0; height : calc(100vh - 60px); } #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .mobile_navWrap { width : 100%; display : flex; flex-direction : column; justify-content : space-between; padding : 10% 10% 0; right : -100%; transition : right .6s; position : absolute; height : calc(100vh - 60px);} #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .mobile_navWrap.on { width : 100%; display : flex; flex-direction : column; justify-content : space-between; padding : 10% 10% 0; right : 0%; transition : right .6s; position : absolute; height : calc(100vh - 60px);} #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .mobile_navWrap .mobile_logo img { width : 110px;} #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .mobile_navWrap .mobile_iconWrap .iconBox { font-size : 12px; } #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .mobile_navWrap .mobile_nav .mobile_navList { font-size : 16px;} #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .mobile_navWrap .mobile_nav { width : 100%; height : 100%; overflow : scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width : none; /* Firefox */ } #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .mobile_navWrap .mobile_nav::-webkit-scrollbar { display : none; /* Chrome, Safari, Opera*/ } #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .mobile_navWrap .mobile_loginBar { width : 100%; position : static; } #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .mobile_navWrap .mobile_loginBar li { width : 50%; padding : 5% 0 15%; } #TitleMenu_LeftLogo_fullSub_dark[view-mode="mobile"] .mobile_navWrap .mobile_iconWrap a { width : 30px; margin-right : 20px; } @media (min-width:641px) and (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #TitleMenu_LeftLogo_fullSub_dark .navBot { height : 80px;} #TitleMenu_LeftLogo_fullSub_dark.on .navBot { background : #555; box-shadow : 0px 2px 3px 0px #555;} #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .logoBox { flex-grow : 1;} #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .logoBox img { max-width : 120px;} #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .menuListWrap { display : none; } #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .mobileNavBtn { display : flex; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap { display : block; } #TitleMenu_LeftLogo_fullSub_dark .backCover { display : block; } } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #TitleMenu_LeftLogo_fullSub_dark.on { top : 0;} #TitleMenu_LeftLogo_fullSub_dark .navTop { display : none; } #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .menuListWrap { display : none; } #TitleMenu_LeftLogo_fullSub_dark .navBot { height : 60px; } #TitleMenu_LeftLogo_fullSub_dark.on .navBot { background : #555; box-shadow : 0px 2px 3px 0px #555;} #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .logoBox { width : auto; max-width : 90px; } #TitleMenu_LeftLogo_fullSub_dark.on .navBot .navBotWrap .logoBox { width : auto; max-width : 90px;} #TitleMenu_LeftLogo_fullSub_dark .navBot .navBotWrap .mobileNavBtn { display : flex; width : auto; } #TitleMenu_LeftLogo_fullSub_dark .backCover { display : block; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap { width : 100%; display : flex; flex-direction : column; justify-content : space-between; padding : 10% 10% 0; right : -100%; transition : .6s; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap.on { width : 100%; display : flex; flex-direction : column; justify-content : space-between; padding : 10% 10% 0; right : 0%; transition : .6s; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_logo img { width : 110px;} #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_iconWrap .iconBox { font-size : 12px; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_nav .mobile_navList { font-size : 16px;} #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_nav { width : 100%; height : 100%; overflow : scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width : none; /* Firefox */ } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_nav::-webkit-scrollbar { display : none; /* Chrome, Safari, Opera*/ } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_loginBar { width : 100%; position : static; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_loginBar li { width : 50%; padding : 5% 0 15%; } #TitleMenu_LeftLogo_fullSub_dark .mobile_navWrap .mobile_iconWrap a { width : 30px; margin-right : 20px; } }