#mainBanner { position: fixed; top: 0; left: 0; right: 0; width: 100%; background:linear-gradient(225deg, #0db2ff, #7f41ff); overflow: hidden; z-index: 999; } /* 모바일에서 제거 */ #mainBanner ul { position: relative; } #mainBanner ul .banner-notice { margin-left: calc(10px + 1rem); width: 50%; } #mainBanner ul .banner-notice .swiper { height: var(--main-banner-height); position: relative; } #mainBanner ul .banner-notice .swiper img { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 2.4rem; } #mainBanner ul .banner-notice .swiper ul { } #mainBanner ul .banner-notice .swiper ul li { } #mainBanner ul .banner-notice .swiper ul li a { line-height: var(--main-banner-height); text-align: left; display: block; color: #ffffff; font-weight: 500; font-size: 1.6rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 0 0 3rem; } #mainBanner ul .banner-option { position: absolute; top: 50%; right: 10px; overflow:hidden; transform: translate(0, -50%); } #mainBanner ul .banner-option > * { display: block; float: left; padding: 1rem; background-color: transparent; border: none; margin: 0; color: #ffffff; font-size: 1.6rem; font-weight: 700; } #mainBanner ul .banner-option > button:has(img), #mainBanner ul .banner-option > a:has(img) { padding: .5rem; } #mainBanner ul .banner-option > * img { vertical-align: top; width: 3rem; } @media screen and (max-width:1600px) { } @media screen and (max-width:1024px) { #mainBanner { display:none; } } @media screen and (max-width:640px) { } #mainHeader { position: fixed; top: var(--main-banner-height); left: 0; width: 100%; height: var(--main-header-height); padding-left: var(--left-menu-width); z-index: 999; background-color: #ffffff; border-bottom: 0.1rem solid #d8d8e4; overflow: hidden; } #mainHeader ul { overflow: hidden; } #mainHeader ul .header-title { float: left; } #mainHeader ul .header-title .date { line-height: var(--main-header-height); color: #575757; font-size: 2rem; font-weight: 500; vertical-align: top; } #mainHeader ul .header-title .date.pc { display: block; padding-left: 2rem; } #mainHeader ul .header-title .date.mobile { display: none; padding-left: 2.2rem; margin-left: 2rem; position: relative; } #mainHeader ul .header-title .date.mobile.main { padding-left: 0; } #mainHeader ul .header-title .date.mobile span:before { content: ''; display: block; width: 1rem; height: 1rem; position: absolute; top: 50%; left: 0; border: solid #5a6a72; border-width: 0.3rem 0.3rem 0 0; transform: translateY(-50%) rotate(225deg); } #mainHeader ul .header-title .date img { width:15rem; vertical-align:top; margin: 0.9rem 0; } #mainHeader ul .header-option { float: right; overflow: hidden; } #mainHeader ul .header-option > * { float: left; border-left: 0.1rem solid #d8d8e4; height: var(--main-header-height); } #mainHeader ul .header-option > *:first-child { border: none; } #mainHeader ul .header-option .chat { font-size: 0; position: relative; } #mainHeader ul .header-option .chat button { display: inline-block; padding: 0 2rem; line-height: var(--main-header-height); position: relative; border: none; background-color: #fff; } #mainHeader ul .header-option .chat img { vertical-align: middle; width: 2.8rem; } #mainHeader ul .header-option .chat.new:before { content:''; position: absolute; top: 45%; left: 60%; background-color: var(--main-color); width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 0.1rem solid #ffffff; transform: translate(-25%, -75%); } #mainHeader ul .header-option .alarm { font-size: 0; } #mainHeader ul .header-option .alarm a { display: inline-block; padding: 0 2rem; line-height: var(--main-header-height); position: relative; } #mainHeader ul .header-option .alarm:after { display: inline-block; height: 100%; content: ''; vertical-align: middle; } #mainHeader ul .header-option .alarm img { vertical-align: middle; width: 2.8rem; } #mainHeader ul .header-option .alarm span { position: absolute; top: 45%; left: 60%; background-color: var(--main-color); width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 0.1rem solid #ffffff; transform: translate(-25%, -75%); font-family: 'Montserrat'; font-size: 1.4rem; font-weight: 700; line-height: 2rem; text-align: center; color: #ffffff; } #mainHeader ul .header-option .attendance { } #mainHeader ul .header-option .attendance form { } #mainHeader ul .header-option .attendance form button { line-height: var(--main-header-height); background-color: transparent; border: none; padding:0 2rem; padding-right:10rem; font-size: 1.6rem; color: #383838; font-weight: 700; position: relative; } #mainHeader ul .header-option .attendance form button i { font-style: normal; font-family: 'Montserrat'; } #mainHeader ul .header-option .attendance form button span { display: inline-block; width: 7rem; height: 3rem; position: relative; position: absolute; top: 50%; right: 2rem; transform: translate(0, -50%); border-radius: 1.5rem; } #mainHeader ul .header-option .attendance form button span:after { content: ''; position: absolute; top: 0.1rem; height: 2.8rem; width: 2.8rem; border-radius: 50%; background-color: #ffffff; } #mainHeader ul .header-option .attendance form.right button span { background-color: var(--main-color); } #mainHeader ul .header-option .attendance form.right button span:after { right: 0.1rem; } #mainHeader ul .header-option .attendance form.center button span , #mainHeader ul .header-option .attendance form.left button span { background-color: #c3c3c3; } #mainHeader ul .header-option .attendance form.center button span:after , #mainHeader ul .header-option .attendance form.left button span:after { left: 0.1rem; } #mainHeader ul .header-option .user { } #mainHeader ul .header-option .user a { display: block; overflow: hidden; padding: 1.6rem 2rem; padding-left: 7rem; position: relative; } #mainHeader ul .header-option .user a > * { float: left; } #mainHeader ul .header-option .user a .user-image { position: absolute; left: 2rem; top: 50%; transform: translate(0, -50%); width: 4.2rem; height: 4.2rem; border-radius: 50%; background-color: #dc5555; color: #ffffff; font-size: 2rem; font-wieght: 700; text-align: center; line-height: 4.2rem; } #mainHeader ul .header-option .user a .user-detail { } #mainHeader ul .header-option .user a .user-detail .user-name { font-size: 1.6rem; font-weight: 600; color: #575757; } #mainHeader ul .header-option .user a .user-detail .user-team { font-size: 1.4rem; font-weight: 500; color: #afafb1; } @media screen and (max-width:1600px) { } @media screen and (max-width:1024px) { #mainHeader ul .header-title .date.pc { display: none; } #mainHeader ul .header-title .date.mobile { display: inline-flex; align-items: center; height: var(--main-header-height); } #mainHeader ul .header-option .attendance { display: none; } #mainHeader ul .header-option .user { display: none; } } @media screen and (max-width:640px) { } #leftMenu { position: fixed; top: var(--main-banner-height); left: 0; width: var(--left-menu-width); height: calc(100dvh - var(--main-banner-height)); background-color: #ffffff; z-index: 999; border-right: 0.1rem solid #d8d8e4; } #leftMenu::-webkit-scrollbar { display:none; } #leftMenu .logo { height: var(--main-header-height); overflow: hidden; position: relative; border-bottom: 0.1rem solid #d8d8e4; } #leftMenu .logo a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16.5rem; font-size: 0; } #leftMenu .logo a img { vertical-align: top; width: 100%; } #leftMenu #menu { overflow-y: auto; -ms-overflow-style: none; height: calc(100dvh - var(--main-banner-height) - var(--main-header-height)); } #leftMenu #menu::-webkit-scrollbar { display:none; } #leftMenu #menu ul { } #leftMenu #menu ul > li { } #leftMenu #menu ul > li > a { display: block; font-size: 1.6rem; color: #575757; font-weight: 600; border-bottom: 0.1rem solid #f2f2f6; padding: 2rem 6rem; position: relative; } #leftMenu #menu ul > li > a .arrow { position: absolute; top: 50%; right: 2.5rem; width: 2rem; transform: translate(0, -50%); } /* #leftMenu #menu ul > li > a.active .arrow { transform: translate(0, -50%) rotate(180deg); } */ #leftMenu #menu ul > li > a span { position: relative; } #leftMenu #menu ul > li > a span .icon { position: absolute; top: 50%; left: -3.5rem; width: 3rem; transform: translate(0, -50%); } #leftMenu #menu ul > li > div { display: none; border-bottom: 0.1rem solid #f2f2f6; background-color: #fafafa; padding: 1rem 0; } #leftMenu #menu ul > li > div.open { display: block !important; } #leftMenu #menu ul > li > div ol { } #leftMenu #menu ul > li > div ol li { } #leftMenu #menu ul > li > div ol li a { display: block; line-height:4rem; padding: 0 6.2rem; font-size: 1.6rem; color: #575757; font-weight: 600; } #leftMenu #menu ul > li > div ol li a span { position: relative; } #leftMenu #menu ul > li > div ol li a span .icon { position: absolute; top: 50%; left: -1rem; width: 0.4rem; transform: translate(0, -50%); } #leftMenu #menu ul > li.logout { display: none; } #leftMenu #menu ul > li > a.active { color: var(--main-color); } #leftMenu #menu ul > li > a.active img { filter: invert(0.2) sepia(1) saturate(10000%) hue-rotate(270deg); } #leftMenu #menu ul > li > a.active + div { display: block; } #leftMenu #menu ul > li > div ol li a.active { color: var(--main-color); } #leftMenu #menu ul > li > div ol li a.active span .icon { filter: invert(0.2) sepia(1) saturate(10000%) hue-rotate(270deg); } @media screen and (max-width:1600px) { } @media screen and (max-width:1440px) { #leftMenu #menu ul > li > a { padding: 2rem 5rem; } #leftMenu #menu ul > li > a .arrow { right: 1.5rem; } #leftMenu #menu ul > li > div ol li a { padding: 0 4.5rem; } } @media screen and (max-width:1024px) { #leftMenu { display: none; } #leftMenu { top: var(--main-header-height); left: 0; right: 0; bottom: 46px; width: var(--left-menu-width); height: auto; width: auto; border: none; } #leftMenu .logo { display: none; } #leftMenu #menu { overflow-y: auto; -ms-overflow-style: none; height: calc(100dvh - var(--main-header-height) - 46px); } #leftMenu #menu::-webkit-scrollbar { display:none; } #leftMenu #menu ul > li.logout { display: block; } #leftMenu #menu ul > li > a.active + div { display: none; } } @media screen and (max-width:640px) { } #quick_pc { position: fixed; bottom: 5rem; right: 1rem; z-index: 10000; display: none !important; } #quick_pc ul { } #quick_pc ul li { margin: 1rem 0 0; } #quick_pc ul li:first-child { margin: 0; } #quick_pc ul li a { display: block; width: 9rem; height: 9rem; border-radius: 50%; box-shadow: 0 0.2rem 0.8rem rgba(136, 136, 136, 0.20); position: relative; } #quick_pc ul li.top a { background: #FFF; color: #222; } #quick_pc ul li.write a { background: #222; color: #FFF; } #quick_pc ul li a div { position: absolute; top: 50%; left: 0; right: 0; transform: translate(0, -50%); text-align: center; } #quick_pc ul li a div img { width: 2rem; } #quick_pc ul li a div span { display: block; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -0.032rem; } #quick_mobile { background-color: #ffffff; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; border-top: 0.1rem solid #cacaca; display: none; z-index: 10000; } #quick_mobile ul { font-size: 0; } #quick_mobile ul li { display: inline-block; width: 20%; vertical-align: top; position: relative; } #quick_mobile ul li a { display: block; height: 5rem; text-align: center; position: relative; } #quick_mobile ul li a div { position: absolute; top: 50%; left: 0; right: 0; width: 100%; height: 100%; transform: translate(0, -50%); } #quick_mobile ul li a div img { height: 3.2rem; } #quick_mobile ul li a div span { display: block; font-size: 1rem; color: #616161; font-weight: 500; margin: 0; } #quick_mobile ul li.home a { display: block; width: 6.5rem; height: 6.5rem; position: absolute; top: -1.9rem; left: 50%; background: linear-gradient(225deg, #0db2ff, #7f41ff); border-radius: 50%; transform: translate(-50%, 0); } #quick_mobile ul li.home a img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; height: 70%; } @media screen and (max-width:1600px) { } @media screen and (max-width:1024px) { #quick_pc { bottom: 7rem; } #quick_pc ul li a { width: 6rem; height: 6rem; } #quick_pc ul li a div img { width: 1.5rem; } #quick_pc ul li a div span { font-size: 1.1rem; } #quick_mobile { display: block; } } @media screen and (max-width:640px) { } /* #header { background-color:#ffffff; border-bottom:0.1rem solid #dbdbdb; z-index:10000; } #header h1 { margin-right: auto; } #header h1 a { font-size: 0; } #header h1 a.pc { display: block; } #header h1 a.mobile { display: none; } #header h1 a img { max-height: 3.6rem; } #header h1 a span { font-size: 1.8rem; } #header .header-info { display: flex; flex-direction: column; gap: .5rem; } #header .header-info ol { display: none; } #header .header-info ul { display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; } #header .header-info ul > li { font-size: 1.2rem; color: #000000; line-height: 2.4rem; } #header .header-info ul > li span { color: #419eb9; } #header .header-info ul > li span a { font-weight: 400; } #header .header-info ul > li i { font-style: normal; } #header .header-info ul > li a { font-weight: 200; } #header .header-info ul > li a:has(img) { position: relative; display: block; } #header .header-info ul > li a img { vertical-align: middle; } #header .header-info ul > li a.dot:after { content:''; position:absolute; top:0.15rem; right:-0.3rem; width:0.5rem; height:0.5rem; background-color:#ff0000; border-radius:50%; } #header .header-info #attendanceInfo { font-size: 1.2rem; font-weight: 300; color: #5a6a72; text-align: right; } #header .attendance-check { margin-right: 1.5rem; } #header .attendance-check button { border:none; background-color:#419eb9; color:#ffffff; font-size:1.3rem; font-weight:500; line-height:3rem; border-radius:1.2rem; padding:0 1.3rem 0 3.3rem; position:relative; cursor:pointer; } #header .attendance-check button img { position:absolute; top:50%; left:1.3rem; transform:translate(0, -50%); width:1.3rem; } #header .attendance-check button strong , #header .attendance-check button i { font-weight:100; font-size:1.4rem; font-style:normal; } @media screen and (max-width: 1024px) { #header { position:fixed; top:0; left:0; right:0; width:100%; } #header.main { background-color:transparent; border-bottom:none; } #header.main.on { background-color:#ffffff; border-bottom:0.1rem solid #dbdbdb; } #header.main h1 a img { filter:brightness(0) invert(1); } #header.main.on h1 a img { filter:none; } #header h1 { padding:1rem 0; } #header h1 a.pc { display:none; } #header h1 a.mobile { display:block; } #header h1 a span { position: relative; display: inline-block; font-weight: 300; color: #000; padding-left: 2rem; } #header h1 a span:before { content:''; display:block; width:1rem; height:1rem; position:absolute; top:50%; left:0; border:solid #5a6a72; border-width:0.3rem 0.3rem 0 0; transform:translateY(-50%) rotate(225deg); } #header.main .header-info ul { display:none; } #header .header-info ul li.push { display: none; } #header .header-info ul li i , #header .header-info ul li > a { display:none; } #header.main .header-info ol { display: flex; justify-content: flex-end; align-items: center; gap: 1.4rem; } #header.main .header-info ol > li a { position: relative; display: block; } #header.main .header-info ol > li a.dot:after { content:''; position:absolute; top:-0.15rem; right:-0.3rem; width:0.7rem; height:0.7rem; background-color:#ff0000; border-radius:50%; } #header.main.on .header-info ol > li a img { filter:brightness(1) invert(1); } #header.main .header-info #attendanceInfo { color: #fff; } #header .attendance-check { display:none; } } #menu { background-color:#ffffff; border-bottom:0.1rem solid #dbdbdb; position:relative; } #menu > div ul { font-size:0; } #menu > div ul > li { display:inline-block; vertical-align:top; } #menu > div ul > li:last-child { display:none; } #menu > div ul > li > a { display:block; font-size:1.5rem; color:#000000; padding:0.7rem 1.2rem; margin:1rem; } #menu > div ul > li:first-child > a { margin-left:0; } #menu > div ul > li:last-child > a { margin-right:0; } #menu > div ul > li:hover > a { color:#1a8d86; } #menu > div ul > li > div { position:absolute; top:100%; left:0; right:0; display:none; background-color:rgba(26, 141, 134, 0.8); } #menu > div ul > li > div > ol > li { display:inline-block; vertical-align:top; } #menu > div ul > li > div > ol > li a { display:block; font-size:1.4rem; color:#ffffff; padding:0.5rem 1rem; margin:1rem; } #menu > div ul > li > a.active { background-color:#1a8d86; color:#ffffff; border-radius:0.5rem; } #menu > div ul > li > a.active + div { display:block; } @media screen and (max-width:1024px) { #menu { position:fixed; bottom:50px; left:0; right:0; display:none; overflow-y:auto; -ms-overflow-style:none; top:53px; z-index:10000; } #menu::-webkit-scrollbar { display:none; } #menu > div ul > li { display:block; border-bottom:0.1rem solid #dbdbdb; } #menu > div ul > li:last-child { display:block; border:none; } #menu > div ul > li > a { display:block; margin:1rem 0; position:relative; } #menu > div ul > li > a:after { content:''; display:block; width:0.6rem; height:0.6rem; position:absolute; top:50%; right:1.2rem; border:solid #5a6a72; border-width:0.3rem 0.3rem 0 0; transform:translateY(-50%) rotate(45deg); } #menu > div ul > li:hover > a { color:#1a8d86; } #menu > div ul > li > div { position:static; top:auto; left:auto; right:auto; background-color:transparent; } #menu > div ul > li > div > ol > li { display:block; } #menu > div ul > li > div > ol > li a { display:block; color:#000000; margin:1rem 0; } #menu > div ul > li > a.active { background-color:#1a8d86; color:#ffffff; border-radius:0.5rem; } #menu > div ul > li > a.active:after { border-color:#ffffff; } #menu > div ul > li > a.active + div { display:block; } #banner { padding:53px 0 0; } #banner div .swiper ul li a { letter-spacing:0.3rem; } } #banner { background-color:#1a668d; } #banner div .swiper { height:5rem; } #banner div .swiper ul { } #banner div .swiper ul li { position:relative; } #banner div .swiper ul li a { text-align:center; position:absolute; top:50%; left:0; right:0; width:100%; transform:translate(0, -50%); color:#ffffff; font-weight:700; font-size:2.4rem; letter-spacing:0.5rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } @media screen and (max-width:1740px) { #banner div .swiper ul li a { letter-spacing:0.4rem; } } @media screen and (max-width:1024px) { #banner { padding:68px 0 0; } #banner div .swiper ul li a { letter-spacing:0.3rem; } } @media screen and (max-width:768px) { #banner div .swiper ul li a { letter-spacing:0.2rem; } } @media screen and (max-width:640px) { #banner div .swiper ul li a { letter-spacing:0.1rem; } } */