/* A A A : A : A : A : */ body { overflow-x : hidden;} #TitleMenu_TopLogo_CenterMenu_1x3 { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; justify-content : center; position : sticky; font-size : min(2vw,18px); font-family : "Noto Sans Kr"; top : -170px; z-index : 100; background : #fff;} #TitleMenu_TopLogo_CenterMenu_1x3 .top { width : 100%; height : 50px; background : #209490; color : #fff; display : flex; align-items : center; justify-content : center; font-size : max(14px,0.85em); z-index : 16;} #TitleMenu_TopLogo_CenterMenu_1x3 .top .wrap { width : 95%; height : 100%; display : flex; align-items : center; justify-content : space-between; max-width : 1200px;} #TitleMenu_TopLogo_CenterMenu_1x3 .top .wrap .iconWrap { width : 50%; height : 100%; display : flex; align-items : center;} #TitleMenu_TopLogo_CenterMenu_1x3 .top .wrap .iconWrap.right { justify-content : flex-end;} #TitleMenu_TopLogo_CenterMenu_1x3 .top .wrap .iconWrap .iconBtn { display : inline-flex; height : 100%; align-items : center; color : #fff; margin-left : 1.2em; cursor : pointer; transition : .2s;} #TitleMenu_TopLogo_CenterMenu_1x3 .top .wrap .iconWrap.right .iconBtn:hover { color : #fff000; transition : .2s;} #TitleMenu_TopLogo_CenterMenu_1x3 .top .wrap .iconWrap .iconBtn:first-child { margin-left : 0;} #TitleMenu_TopLogo_CenterMenu_1x3 .top .wrap .iconWrap .iconBtn .navIcon { font-size : inherit; height : 45%; object-fit : contain; margin-right : 0.5em;} #TitleMenu_TopLogo_CenterMenu_1x3 .mid { width : 100%; height : 120px; display : flex; align-items : center; justify-content : center; position : relative; z-index : 16; background : #fff;} #TitleMenu_TopLogo_CenterMenu_1x3 .mid .logo { width : auto; height : 70%; display : flex; align-items : center; justify-content : center; position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%);} #TitleMenu_TopLogo_CenterMenu_1x3 .mid .logo img { width : 100%; height : 100%; object-fit : contain;} #TitleMenu_TopLogo_CenterMenu_1x3 .mid .mark { width : 6.5em; height : auto; position : absolute; top : 50%; right : 3em; transform : translateY(-50%);} #TitleMenu_TopLogo_CenterMenu_1x3 .bot { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; justify-content : center; position : relative; border-top : 1px solid #1d9b98; border-bottom : 6px solid #1d9b98;} #TitleMenu_TopLogo_CenterMenu_1x3 .bot .menuWrap { width : auto; height : auto; display : flex; align-items : center; justify-content : center;} #TitleMenu_TopLogo_CenterMenu_1x3 .bot .menuWrap .menu { width : 11em; display : inline-flex; align-items : center; position : relative; justify-content : center; z-index : 1;} #TitleMenu_TopLogo_CenterMenu_1x3 .bot .menuWrap .menu a { font-size : inherit; height : auto; display : flex; padding : 0.5em 0; color : #209490; transition : .2s;} #TitleMenu_TopLogo_CenterMenu_1x3 .bot .menuWrap .menu:hover a { color : #1457a0; transition : .2s;} #TitleMenu_TopLogo_CenterMenu_1x3 .bot .menuWrap .menu .subMenuWrap { width : 100%; height : 0; display : flex; flex-direction : column; align-items : center; position : absolute; top : 100%; left : 0; padding-top : 1em; overflow : hidden; transition : .2s;} #TitleMenu_TopLogo_CenterMenu_1x3 .bot .menuWrap:hover .menu .subMenuWrap { height : 7.2em; transition : .2s;} #TitleMenu_TopLogo_CenterMenu_1x3 .bot .menuWrap .menu .subMenuWrap a { color : #000; height : 1.6em; padding : 0; display : flex; align-items : center; justify-content : center; transition : .2s;} #TitleMenu_TopLogo_CenterMenu_1x3 .bot .menuWrap .menu .subMenuWrap a:hover { color : #888; transition : .2s;} #TitleMenu_TopLogo_CenterMenu_1x3 .bot .menuWrap .subMenuWrapBack { position : absolute; top : calc(100% + 6px); width : 100vw; height : 0; background : #ffffff9c; left : 0; transition : .2s; box-shadow : 0px 2px 6px 0px #00000069;} #TitleMenu_TopLogo_CenterMenu_1x3 .bot .menuWrap:hover .subMenuWrapBack { height : 7.2em; transition : .2s;} /* 모바일 메뉴 버튼 */ #TitleMenu_TopLogo_CenterMenu_1x3 .mid .mobileNavBtn { color : #209490; border-radius : 25px; cursor : pointer; width : 45px; height : 45px; display : none; justify-content : center; align-items : center; transition : .3s; position : absolute; left : 1em; top : 50%; transform : translateY(-50%);} /* #TitleMenu_TopLogo_CenterMenu_1x3 .mid .mobileNavBtn:hover { background : #565656; box-shadow : 0px 0px 5px 0px #181818; transition : .5s; } */ #TitleMenu_TopLogo_CenterMenu_1x3 .mid .mobileNavBtn svg { font-size : x-large; } /* 테블릿 메뉴 버튼 */ #TitleMenu_TopLogo_CenterMenu_1x3 .mid .menu-trigger { position : absolute; width : 30px; height : 25px; display : none; transition : all .4s; box-sizing : border-box; z-index : 20; left : 1em; top : 50%; transform : translateY(-50%);} #TitleMenu_TopLogo_CenterMenu_1x3 .mid .menu-trigger span { position : absolute; left : 0; width : 100%; height : 3px; background-color : #209490; border-radius : 4px; display : inline-block; transition : all .4s; box-sizing : border-box; } #TitleMenu_TopLogo_CenterMenu_1x3 .mid .menu-trigger span:nth-of-type(1) { top : 0; } #TitleMenu_TopLogo_CenterMenu_1x3 .mid .menu-trigger span:nth-of-type(2) { top : 50%; transform : translateY(-50%); height : 4px; } #TitleMenu_TopLogo_CenterMenu_1x3 .mid .menu-trigger span:nth-of-type(3) { bottom : 0; } #TitleMenu_TopLogo_CenterMenu_1x3 .mid .menu-trigger.active-1 span:nth-of-type(1) { top : 50%; -webkit-transform : translateY(-50%) rotate(-45deg); transform : translateY(-50%) rotate(-45deg); } #TitleMenu_TopLogo_CenterMenu_1x3 .mid .menu-trigger.active-1 span:nth-of-type(2) { opacity : 0; } #TitleMenu_TopLogo_CenterMenu_1x3 .mid .menu-trigger.active-1 span:nth-of-type(3) { bottom : 50%; -webkit-transform : translateY(50%) rotate(45deg); transform: translateY(50%) rotate(45deg); } #TitleMenu_TopLogo_CenterMenu_1x3 .mid .menu-trigger.active-1 span { background : #209490;} /***********모바일 & 테블릿 버전 메뉴***********/ #TitleMenu_TopLogo_CenterMenu_1x3 .backCover.on { display : none; transition : 1s; } #TitleMenu_TopLogo_CenterMenu_1x3 .backCover { width : 100%; height : 100vh; background : #000000ad; position : fixed; top : 0; display : none; z-index : 15; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap { width : 90%; height : 100%; background : #fff; position : fixed; top : 0; right : -100%; padding : 70px 70px 0; z-index : 25; transition : 1s; display : none; overflow-y : auto; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap.on { right : 0; transition : 1s; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobileNavCloseBtn { position : absolute; top : 2%; right : 5%; color : #209490; font-size : 20px; cursor : pointer; display : none; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_logo { width : auto; height : auto; text-align : left; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_logo img { width : 210px; height : auto; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_iconWrap { width : 100%; height : auto; display : flex; align-items : center; justify-content : flex-start; flex-wrap : wrap; border-bottom : 2px solid #2094904a; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_iconWrap .iconBox { font-size : 14px; color : #209490; display : flex; flex-direction : column; align-items : center; margin : 60px 0 30px; margin-right : 50px; font-weight : 500; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_iconWrap .iconBox:last-child { margin-right : 0; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_iconWrap .iconBox svg { font-size : 28px; margin-bottom : 8px; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_iconWrap .mobile_searchWrap.on { height : 30px; margin-top : 20px; transition : .4s; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_iconWrap .mobile_searchWrap { width : 100%; display : flex; justify-content : space-between; background : #fff; height : 0; margin-top : 0; align-items : center; transition : .4s; overflow : hidden; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .mobile_search { width : 90%; height : 90%; border : none; padding-left : 10px; font-size : 14px; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .searchLabel { width : 10%; display : flex; align-items : center; justify-content : center; cursor : pointer; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_iconWrap .mobile_searchWrap .mobileSubmit { display : none; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_nav { width : 100%; height : auto; margin-top : 30px; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_nav .mobile_navList { width : 100%; height : auto; font-size : 18px; color : #209490; text-align : left; position : relative; cursor : pointer; transition : .3s; padding : 4px 0; font-weight : 500; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_nav .mobile_navList.active ,#TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_nav .mobile_navList.active:hover { color : #1c8ed1;} #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_nav .mobile_navList.active::after { content : "▲"; font-size : 14px; color : inherit; position : absolute; top : 0; right : 0; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_nav .mobile_navList:hover { color : #2094909e; transition : .3s; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_nav .mobile_navList::after { content : "▼"; font-size : 14px; color : inherit; position : absolute; top : 0; right : 0; } #TitleMenu_TopLogo_CenterMenu_1x3 .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_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li { width : calc(100% / 2); height : auto; padding : 5px 0; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li a { color : #209490; font-size : 14px; font-weight : 400; transition : .3s; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li a:hover { color : #2094909e; transition : .3s; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_loginBar { width : 100%; height : auto; border-top : 3px solid #ffffff9e; position : absolute; bottom : 0; left : 0; display : flex; justify-content : center; align-items : center; text-align : center; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_loginBar li { width : 50%; height : auto; padding : 30px 0 ; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_loginBar li a { font-size : 16px; color : #ffffff9e; transition : .3s; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_loginBar li a:hover { color : #fff; transition : .3s; } @media(max-width : 1024px){ /* A A A : A : A : A : */ #TitleMenu_TopLogo_CenterMenu_1x3 { top : -40px;} #TitleMenu_TopLogo_CenterMenu_1x3 .top { height : 40px; font-size : 14px;} #TitleMenu_TopLogo_CenterMenu_1x3 .mid { height : 110px; border-bottom : 3px solid #1d9b98;} #TitleMenu_TopLogo_CenterMenu_1x3 .mid .mark { right : 1em;} #TitleMenu_TopLogo_CenterMenu_1x3 .mid .menu-trigger { display : inline-block; } #TitleMenu_TopLogo_CenterMenu_1x3 .navBot_logo { width : auto; flex-grow : 1; text-align : center; } #TitleMenu_TopLogo_CenterMenu_1x3 .navBot_logo img { max-width : 180px;} #TitleMenu_TopLogo_CenterMenu_1x3 .navBot_right { width : auto; flex-grow : unset; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap { display : block; } #TitleMenu_TopLogo_CenterMenu_1x3 .backCover.on { display : block; } #TitleMenu_TopLogo_CenterMenu_1x3 .bot { display : none;} } @media(max-width : 640px){ /* A A A : A : A : A : */ #TitleMenu_TopLogo_CenterMenu_1x3 { top : -30px;} #TitleMenu_TopLogo_CenterMenu_1x3 .top { height : 30px;} #TitleMenu_TopLogo_CenterMenu_1x3 .top .wrap .iconWrap.left { width : 100%;} #TitleMenu_TopLogo_CenterMenu_1x3 .top .wrap .iconWrap.right { display : none;} #TitleMenu_TopLogo_CenterMenu_1x3 .mid { height : 65px;} #TitleMenu_TopLogo_CenterMenu_1x3 .mid .mark { width : 10em; right : 1em; max-width : 80px;} #TitleMenu_TopLogo_CenterMenu_1x3 .mid .menu-trigger { display : none; } #TitleMenu_TopLogo_CenterMenu_1x3 .mid .mobileNavBtn { display : flex; width : auto; height : 38px; } #TitleMenu_TopLogo_CenterMenu_1x3 .mid .mobileNavBtn svg { font-size : 2.7em; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap { width : 100%; display : flex; flex-direction : column; justify-content : space-between; padding : 20% 7% 0; right : -100%; transition : .6s; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap.on { width : 100%; display : flex; flex-direction : column; justify-content : space-between; padding : 20% 7% 0; right : 0%; background : #fff; transition : .6s; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobileNavCloseBtn { display : block; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_logo img { width : 170px;} #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_iconWrap .iconBox { font-size : 12px; margin : 30px 0; margin-right: 50px; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_nav .mobile_navList { font-size : 16px;} #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_nav { width : 100%; height : 100%; overflow : scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width : none; /* Firefox */ } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_nav::-webkit-scrollbar { display : none; /* Chrome, Safari, Opera*/ } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_loginBar { width : 100%; position : static; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_loginBar li { width : 50%; padding : 5% 0 15%; } #TitleMenu_TopLogo_CenterMenu_1x3 .mobile_navWrap .mobile_nav .mobile_navList .mobile_SubNavList li a { color : #1a4c6ae8; transition : .0s; } }