/*********************************** 첫번째 상단 ***********************************/ header { background: rgba(255,255,255,1); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 ); border-bottom: 1px solid #efefef; } header .header-inner { width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 80px; } /*********************************** 첫번째 상단 > 로고 영역 ***********************************/ header .header-inner .logo-area { cursor: pointer; display:flex; align-items: center; } header .header-inner .logo-area .title { letter-spacing: -1px; font-size: 16px; color: #333; padding-left: 10px; font-weight: bold; font-family: 'Noto Sans KR', sans-serif; } /*********************************** 첫번째 상단 > 유틸 메뉴 ***********************************/ header .header-inner .right-wrapper { display:flex; flex-direction: column; } header .header-inner .right-wrapper .util-menu { display: flex; } header .header-inner .right-wrapper .util-menu li { font-size: 11px; letter-spacing: -1px; padding: 0 5px; border-radius: 12px; } header .header-inner .right-wrapper .util-menu li a { background: #333; border-radius: 30px; padding: 2px 10px; margin-top: 4px; display:block; color: #fff; } header .header-inner .right-wrapper .util-menu li a:hover { cursor: pointer; text-decoration: none; background: #0085cf; color: #fff; } header .header-inner .right-wrapper .util-menu li:nth-child(1) { background: url('../../images/home/ic_util_user.png') no-repeat top center ; padding-top: 25px; } header .header-inner .right-wrapper .util-menu li:nth-child(2) { background: url('../../images/home/ic_util_pass.png') no-repeat top center ; padding-top: 25px; } header .header-inner .right-wrapper .util-menu li:nth-child(3) { background: url('../../images/home/ic_util_logout.png') no-repeat top center ; padding-top: 25px; } /*********************************** 두번째 상단 ***********************************/ #navbar { background: #0798b5; -webkit-box-shadow: inset 0px 8px 25px -2px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 8px 25px -2px rgba(0,0,0,0.3); box-shadow: inset 0px 8px 25px -2px rgba(0,0,0,0.3); } #navbar .nav-wrapper { width:1200px; margin: 0 auto; display: flex; align-items: center; position:relative; } /*********************************** 두번째 상단 전체메뉴 메뉴 3줄 햄버거 바 스타일 ***********************************/ #navbar .nav-wrapper .allmenu-start input { position: fixed; left: -9999px; padding: 0; margin: 0; } /* 전체메뉴 체크 박스 숨기기 */ #navbar .nav-wrapper .allmenu-start li.h41 { height: 41px; margin:0; padding:0; } #navbar .nav-wrapper .allmenu-start .allmenu-wrapper { width: 109px; background: #067c94; -webkit-box-shadow: inset 0px 8px 25px -2px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 8px 25px -2px rgba(0,0,0,0.3); box-shadow: inset 0px 8px 25px -2px rgba(0,0,0,0.3); letter-spacing: -1px; font-size: 12px; font-weight: bold; } #navbar .nav-wrapper .allmenu-start .allmenu-wrapper { display:block; width: 109px; height: 41px; display: flex; align-items: center; justify-content: center; color:#fff; } #navbar .nav-wrapper .allmenu-start .allmenu-wrapper:hover { cursor: pointer; text-decoration: none; background: #000; color:#fff;} #navbar .nav-wrapper .allmenu-start .allmenu-wrapper .text { padding: 0 0 0 8px; } #navbar .nav-wrapper .allmenu-start .allmenu-wrapper .containerbar { cursor:pointer; padding:0; margin: 0; } #navbar .nav-wrapper .allmenu-start .allmenu-wrapper .containerbar > .bar1, .bar2, .bar3 { display: block; width:26px; height: 3px; background: #fff; border-radius: 3px; margin: 3px 0;} #navbar .nav-wrapper .allmenu-start .allmenu-wrapper a:hover .containerbar > .bar1 { background: #fff; } #navbar .nav-wrapper .allmenu-start .allmenu-wrapper a:hover .containerbar > .bar2 { background: #fff; } #navbar .nav-wrapper .allmenu-start .allmenu-wrapper a:hover .containerbar > .bar3 { background: #fff; } /*********************************** 두번째 상단 > 전체메뉴 리스트 ***********************************/ #navbar .nav-wrapper .allmenu-start #allmenuBtn:checked ~ .allmenu-list { transform: scaleY(1); } /* 체크박스 눌렀을 때 메뉴 펼치기*/ #navbar .nav-wrapper .allmenu-list { position: absolute; top:41px; left:0; width: 250px; transform: scaleY(0); transform-origin: top; transition: all 0.3s; border: 1px solid #0687a1; background: #f4f4f4; z-index: 100; } #navbar .nav-wrapper .allmenu-list > li { color: #666; letter-spacing: -1px; font-size: 12px; border-bottom: 1px solid #eaeaea; align-items: center; } #navbar .nav-wrapper .allmenu-list li:last-child { border-bottom: none; } #navbar .nav-wrapper .allmenu-list > li { background: #fff; } #navbar .nav-wrapper .allmenu-list > li > a.menu-text { padding: 12px 20px; display:block; width: 250px; height : 40px; background:url('../../images/home/ic_menu_open_plus.png') no-repeat 90% center; } #navbar .nav-wrapper .allmenu-list > li > a:hover { cursor: pointer; text-decoration :none; color: #fff; height : 40px; background: #09a6c5 url('../../images/home/ic_menu_open_plus_hover.png') no-repeat 90% center; } #navbar .nav-wrapper .allmenu-list > li.active > a.menu-text { display:block; background:url('../../images/home/ic_menu_close_minus.png') no-repeat 90% center; } #navbar .nav-wrapper .allmenu-list > li.active > a.menu-text:hover { background:#09a6c5 url('../../images/home/ic_menu_close_minus_hover.png') no-repeat 90% center; color:#fff; } #navbar .nav-wrapper .allmenu-list > li > ul > li { color: #666; letter-spacing: -1px; font-size: 12px; border-bottom: 1px solid #eaeaea; display :flex; align-items: center; height: 35px; } #navbar .nav-wrapper .allmenu-list > li > ul.submenu > li > a { padding: 10px 20px; display:block; width: 200px; text-indent: 15px;} #navbar .nav-wrapper .allmenu-list > li > ul.submenu > li span a { display: block; width: 50px; padding: 11px 20px; } #navbar .nav-wrapper .allmenu-list > li > ul.submenu a:hover { cursor: pointer; text-decoration :none; background: #09a6c5; color: #fff; } #navbar .nav-wrapper .allmenu-list > li > ul.submenu {display : none; background: #f9f9f9; border-top: 1px solid #e5e5e5;} #navbar .nav-wrapper .allmenu-list > li.active > ul.submenu {display : block;} /*********************************** 두번째 상단 > 즐겨찾는 메뉴 ***********************************/ #navbar .like-menu li a { padding: 3px 5px; display:block; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:120px; overflow:hidden; height : 35px; } #navbar .like-menu li a:hover { cursor: pointer; text-decoration: none; background: #666; color: #fff; border-radius: 3px; height : 35px; } #navbar .like-menu li:first-child { margin-left: 21px; } #navbar .like-menu li { margin: 0 17px 0 0; display: inline-block; font-size: 12px; letter-spacing: -1px; color: #333; border:1px dashed #ccc; background: #f4f4f4; border-radius: 3px; } /*********************************** 두번째 상단 > 서브페이지 타이틀 ***********************************/ #navbar .nav-wrapper .sub-title::after { content: ''; position: absolute; top: 50%; left: 30px; display: block; width: 72px; height: 2px; margin-top: -1px; background: #fff; } #navbar .nav-wrapper .sub-title::before { content: ''; position: absolute; top: 50%; right: 30px; display: block; width: 72px; height: 2px; margin-top: -1px; background: #fff; } #navbar .nav-wrapper .sub-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color : #fff; font-size: 22px; padding: 0 130px; height: 100%; line-height: 41px; align-items: center; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(79,176,229,1) 50%, rgba(255,255,255,0) 100%); font-family: 'Do Hyeon', sans-serif; text-shadow: 1px 1px 2px #3A689B; letter-spacing: 4px; display:none; } /*********************************** 두번째 상단 > 로그인 회원 정보 ***********************************/ #navbar .nav-wrapper .align-box { position:absolute; right:0; display: flex; align-items: center; color: #2fbfdc; background: #067c94; -webkit-box-shadow: inset 0px 8px 25px -2px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 8px 25px -2px rgba(0,0,0,0.3); box-shadow: inset 0px 8px 25px -2px rgba(0,0,0,0.3); height:100%; padding: 0 20px; top:0; } #navbar .nav-wrapper .align-box p { padding: 0; margin: 0; font-size: 12px; font-weight: bold; } #navbar .nav-wrapper .align-box i { font-size: 14px; margin-right: 5px; } #navbar .nav-wrapper .align-box img { padding-right: 6px; } /*********************************** 두번째 상단 > 스크롤 시 메뉴 영역 상단 고정 ***********************************/ #navbar.sticky { position:fixed ; top: 0; width: 100%; z-index: 100; background: #0085cf; -webkit-box-shadow: inset 0px 8px 25px -2px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 8px 25px -2px rgba(0,0,0,0.3); box-shadow: inset 0px 8px 25px -2px rgba(0,0,0,0.3); min-width: 1200px; }