@charset "utf-8";

/* 1. Layout ----------------------------------------------------------------------------------- */
body, button, input, select, table, textarea { font-family: 'Pretendard', 'Noto Sans Korean'; }
button { cursor: pointer; }
.onLayout { overflow: hidden; }
.onContainer { position: relative; max-width: 1500px; margin: 0 auto; padding: 0 20px; }
.overflowVisible, .onTable.overflowVisible { overflow: visible; }
.showMobile { display: none; }
.mapArea { cursor: pointer; }
.onMust { position: relative; }
.onMust:after { content: "*"; color: #f70000; transform: translate(4px, -5px); position: absolute; }
.onMustNotify { color: #666; margin-bottom: 10px; }
.onMustNotify span { color: #f70000; padding-right: 4px; }

/* 1.1. Header --------------------------------------------------------------------------------- */
.onHeaderLayout { margin-bottom: 10px; }
.onHeaderIn { height: 100px; transition: all 0.3s; }
.onHeaderIn::before { position: absolute; bottom: 0; left: 0; display: block; content: ""; height: 0; width: 0; border-bottom: 5px solid #000; border-color: inherit; transition: width 0.3s; }
.onHeaderIn > .onContainer { position: static; display: flex; align-items: center; width: 100%; height: 100%; }
.onHeaderBtn { display: flex; justify-content: center; align-items: center; height: 32px; padding: 0 18px; font-size: 16px; font-weight: 600; border: 1px solid #175EC7; border-radius: 19px; color: #175EC7; box-sizing: border-box; transition: all 0.3s; }
.onHeaderBtn:hover { color: #fff; background-color: #175EC7; }
.languageBtn {  display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 19px;
    color: #666;
    box-sizing: border-box;
    transition: all 0.3s;
    border:1px solid #666;
    width: 54px; margin-left:10px;}
 .languageBtn:hover  {background-color: #666; color: #fff; }
.onMenuBtn { display: none; }
.onHeaderLogo img { display: block; }
.onLayout.parallax .onHeaderIn { height: 70px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05); border-bottom: none; }
.onLayout.parallax .onHeaderIn::before { width: 100%; }
.onLayout.parallax .onGnb > li > ul { top: 65px; }
.onLayout.parallax .onGnbBg { top: 40px; }
.onLayout.parallax .onGnbBg::after { top: 25px; }
.loginUserInfo { display: flex; align-items: center; margin-right: 8px; }
.loginUserInfo .userName { color: #333; font-size: 15px; font-weight: 600; margin-right: 5px; max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.loginUserInfo .sessionTime { color: #175EC7; font-size: 15px; font-weight: 500; margin-right: 5px; }
.loginUserInfo .grayRadiusBox { background: #777C97; color: #fff; width: 44px; height: 22px; border-radius: 11px; cursor: pointer; }

/* 1.1.1 Global Navigation Bar ----------------------------------------------------------------- */
.onGnbBox { height: 100%; }
.onGnbTop { display: none; }
.onGnbDot { position: fixed; top: 30px; display: block; width: 6px; height: 6px; background-color: #175EC7; border-radius: 50%; transition: all 0.3s; z-index: 200; opacity: 0; }
.onGnbDot.on { opacity: 1; transform: translateY(0); }
.onGnb { height: 100%; margin-right: 10px; }
.onGnb > li { display: flex; align-items: center; position: relative; height: 100%; margin-right: 0; }
.onGnb > li > a { position: relative; padding: 0; font-size: 22px; font-weight: 800; color: #333333; transition: all 0.3s; }
.onGnb > li > a > span { position: relative; padding: 0 20px; }
.onGnb > li > a > span::after { position: absolute; content: ""; top: 100%; left: 0; right: 0; height: 10px; }
.onGnb > li > a > i { display: none; }
.onGnb > li > a > img { position: absolute; left: 50%; transform: translateX(-50%); height: 30px; z-index: -10; transition: all 0.3s; }
.onGnb > li > ul { display: none; position: absolute; top: 85px; width: 100%; text-align: center; transition: all 0.3s; }
.onGnb > li > ul > li > a { display: block; padding: 10px 0; color: #666; font-size: 18px; font-weight: 400; }
.onGnb > li > ul > li > a:hover { color: #175EC7; }
.onGnbBg { display: none; position: fixed; left: 0; right: 0; top: 70px; content: ""; height: 200px; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.10); overflow: hidden; background-color: #fff; z-index: -1; transition: all 0.3s; }
.onGnbBg::after { display: block; content: ""; position: fixed; top: 55px; left: 0; right: 0; height: 20px; background-color: inherit; transition: all 0.3s; }
.onGnbBg img { position: absolute; top: 20px; left: 80px; }
.onGnbCircle01 { position: absolute; top: 12px; left: 0; width: 220px; height: 220px; border-radius: 50%; background-color: #F2F7FF; }
.onGnbCircle02 { position: absolute; top: 15px; left: 250px; width: 90px; height: 90px; border-radius: 50%; background-color: #FFCE6D; opacity: 0.13; }
.onGnb.on + .onGnbBg { display: block; }
.onGnb.on > li > ul { display: block; }
.onGnb > li.on > a, .onGnb > li > a:hover { color: #175EC7; }
.onGnb > li.on > a > img, .onGnb > li > a:hover > img { transform: translate(-50%, -24px); }

/* 1.2. Footer --------------------------------------------------------------------------------- */
.onFooterLayout { margin-top: 54px; padding: 32px 0 54px; border-top-color: #E1E1E1; }
.onFnb { margin-bottom: 32px; }
.onFnb > ul > li { margin-right: 21px; font-size: 17px; color: #363636; }
.onFnb > ul > li > a:hover, .onFnb > ul > li.on { color: #049AF4; }
.onAddress { margin-bottom: 0; font-size: 16px; font-weight: 400; line-height: 1.5; color: #7B7B7B; }
.onFamilySite { margin-bottom: 0; }
.onFamilySite .onField { min-width: 210px; margin-right: 8px; }
.onFamilySite select { width: 100%; height: 43px; padding-left: 15px; border: 1px solid #DDDDDD; border-radius: 10px; font-size: 16px; font-weight: 400; color: #000000; appearance: none; background: #fff url(../img/main/icon_plus.png) no-repeat right 20px center; }
.onFamilySite select:hover, .onFamilySite select:focus { background-color: #F5F5F5; }
.onFamilySite a { border: 0; border-radius: 10px; background-color: #B1B1B1; }
.onFooterLogoList { position: absolute; bottom: -30px; right: 5px; }

/* 1.3. Main ----------------------------------------------------------------------------------- */
/* 메인페이지 캐릭터 */
.onMainChar { position: relative; display: flex; justify-content: center; align-items: center; transition: all 16s ease-in-out; }
.onMainChar .character { position: relative; transform: rotate(180deg); }
.onMainCharIn { position: relative; opacity: 0; }
.onMainCharIn::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; content: ""; width: 135px; height: 135px; border-radius: 50%; background: linear-gradient(180deg, #E8F6FF 0%, #FFF 100%); opacity: 0.74; }
.onMainChar.on { opacity: 1; }
.onMainChar.on span { transform: translate(-50%, -50%) scale(2); opacity: 0; transition: all 0.3s 15.6s; }
.onMainChar.on .character { transform: rotate(360deg); transition: all 1s; }
.onMainChar.on .onMainCharIn { opacity: 1; transition: all 0.1s; }
.onMainChar.on .onMainCharIn::before { transform: translate(-50%, -50%) scale(2); opacity: 0; transition: all 0.3s 15.6s; }
.onMainChar01 { position: absolute; top: 0; right: calc(100% + 100px); transform-origin: bottom; z-index: 200; }
.onMainChar01.on .onMainCharIn { animation: mainChar 8s 2 ease-in-out alternate-reverse forwards; }
.onMainChar02 { position: absolute; top: 0; right: calc(100% - 60px); transform-origin: bottom; z-index: 200; }
.onMainChar02.on .onMainCharIn { animation: mainChar 8s 2 ease-in-out alternate-reverse forwards; }
.onMainChar03 { position: absolute; top: 0; left: calc(100% + 30px); transform-origin: bottom; z-index: 200; }
.onMainChar03.on .onMainCharIn { animation: mainChar 8s 2 ease-in-out alternate-reverse forwards; }

@keyframes mainChar {
  0% { transform: translate(-50px, 0) rotate(25deg); }
  50% { transform: translate(50px, -20px) rotate(-25deg); }
  75% { transform: translate(-50px, 0px) rotate(10deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

.onMainContent { position: relative; padding-right: 435px; overflow: hidden; }
.onMainVisual { display: flex; flex-direction: column; height: 660px; margin-bottom: 47px; }
.onMainSummary { flex-grow: 1; border-radius: 30px 30px 0 0; overflow: hidden; }
.onMainCloud01 { position: absolute; top: 240px; left: 100px; }
.onMainSummary li { padding: 100px 70px 0; box-sizing: border-box; background: #29B1F1}
.onMainSummary li:nth-child(2) { background: #2FC763}
.onMainSummaryText { width: 100%; }
.onMainSummaryText > span { transform: translateY(20px); opacity: 0; display: block; margin-bottom: 10px; font-size: 17px; font-weight: 400; color: #fff; transition: all 0.9s 0.3s; }
.onMainSummaryText > h2 { transform: translateY(20px); opacity: 0; margin-bottom: 18px; font-size: 50px; font-weight: 900; color: #fff; transition: all 0.9s 0.4s; }
.onMainSummaryText > p { transform: translateY(20px); opacity: 0; width: 40%; font-size: 16px; font-weight: 400; line-height: 23px; color: #fff; transition: all 0.9s 0.5s; display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; }
.onMainSummaryText > a { transform: translateY(20px); opacity: 0; display: flex; align-items: center; margin-top: 8px; font-weight: 800; color: #fff; transition: all 0.9s 0.6s; }
.onMainSummaryText > a:hover { text-decoration: underline; }
.onMainSummaryText > a > img { margin: 0 0 4px 6px; }
.swiper-slide-active .onMainSummaryText > span { transform: translateY(0); opacity: 1; }
.swiper-slide-active .onMainSummaryText > h2 { transform: translateY(0); opacity: 1; }
.swiper-slide-active .onMainSummaryText > p { transform: translateY(0); opacity: 1; }
.swiper-slide-active .onMainSummaryText > a { transform: translateY(0); opacity: 1; }
.onMainQuickMenu { position: relative; border-radius: 0 0 30px 30px; }
.onMainQuickMenu > ul { position: relative; display: flex; justify-content: space-between; align-items: center; height: 200px; padding: 0 46px; background-color: rgba(255, 255, 255, 0.2); }
.onMainQuickMenu > ul > li { width: 100%; }
.onMainQuickMenu > ul > li > a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 158px; border-radius: 20px; transition: all 0.3s; }
.onMainQuickMenu > ul > li > a > span { display: flex; align-items: center; height: 50px; margin-bottom: 16px; }
.onMainQuickMenu > ul > li > a > strong { position: relative; font-size: 17px; font-weight: 600; text-align: center; color: #555555; transition: all 0.3s; }
.onMainQuickMenu > ul > li > a > strong::before { position: absolute; display: block; content: ""; top: -6px; left: 0; right: 0; height: 2px; transform: scaleX(0); background-color: #555; transition: all 0.3s; }
.onMainQuickMenu > ul > li > a > strong > br { display: none; }
.onMainQuickMenu > ul > li > a:hover { background-color: #fff; }

/* 메인 비주얼 웨이브 애니메이션 */
.onMainWaveBox { position: absolute; overflow: hidden; border-radius: 30px; background-color: #29B1F1; }
.onMainWaveIn { position: relative; width: 100%; height: 100%; transform: translateY(100%); }
.onMainWave { position: absolute; top: 0; left: 0; display: flex; width: 200%; animation: waveX 0.6s infinite linear; }
.onMainWave > svg { display: block; width: 50%; }
.onMainWaveBox.on .onMainWaveIn { animation: waveY 2s 1.3s 1 ease-in forwards; }
@keyframes waveY {
  0% { transform: translateY(400px); }
  100% { transform: translateY(-450px); }
}
@keyframes waveX {
  0% { /*transform: translateX(-50%);*/ left: -300px; }
  100% { /*transform: translateX(0);*/ left: 0px; }
}
/* 메인 이미지 캐릭터 */
.onMoveCharBanner { position: absolute; top: 50%; transform: translateY(-50%); right: 8%; z-index: -1; }
.onMoveCharBanner.b02 { top: 53%; right: 12%; }
.onMoveCharBannerIn { position: relative; }
.blue01 { position: absolute; left: -3%; top: -4%; z-index: -1; opacity: 0; }
.blue02 { position: absolute; right: -5%; top: 30%; z-index: -1; opacity: 0; }
.fatherArm { position: absolute; right: 11%; top: 44.5%; transform: rotate(-3deg); z-index: 2; }
.motherArm { position: absolute; left: 15%; top: 28%; transform: rotate(1deg); }
.kid { position: absolute; left: 47.5%; top: 34%; transform: rotate(8deg); transform-origin: bottom; }
.forest { opacity: 0; }
.forest.f01 { position: absolute; left: 45%; bottom: 6%; z-index: 2; }
.forest.f02 { position: absolute; left: 6%; bottom: 9%; z-index: 2; }
.forest.f03 { position: absolute; left: 65%; bottom: 2%; z-index: 2; }
.home { opacity: 0; }
.home.h01 { position: absolute; left: 10%; bottom: 13%; }
.home.h02 { position: absolute; left: 26%; bottom: 3%; z-index: 2; }
.home.h03 { position: absolute; left: 55%; bottom: 10%; }
.home.h04 { position: absolute; left: 75%; bottom: 5%; }
.green01 { position: absolute; left: 30%; top: 0%; z-index: -1; opacity: 0; }
.green02 { position: absolute; left: -15%; top: 55%; z-index: -1; opacity: 0; }
.heart { position: absolute; top: -15%; left: -2%; z-index: -1; opacity: 0; }
.paper { position: absolute; top: 6%; left: 10%; z-index: -1; opacity: 0; }
.mainbody2 { margin-top: 20px; }
.teacher { position: absolute; left: 73%; top: -7%; transform: rotate(0deg); }
.kidArm { position: absolute; left: 0.2%; top: 41%; transform-origin: right; }
.kidleg { position: absolute; right: -7.6%; top: 76.5%; transform-origin: right; }
.swiper-slide-active .green01 { transition: all 3s 2.3s; opacity: 1; }
.swiper-slide-active .green02 { transition: all 3s 2.3s; opacity: 1; }
.swiper-slide-active .blue01 { transition: all 3s 2.3s; opacity: 1; }
.swiper-slide-active .blue02 { transition: all 3s 2.3s; opacity: 1; }
.swiper-slide-active .fatherArm { animation: papa 1.5s 1s infinite; }
.swiper-slide-active .motherArm { animation: mom 1.4s 1.1s infinite; }
.swiper-slide-active .kid { animation: kid 1.3s 1.2s linear infinite alternate; }
.swiper-slide-active .forest.f01 { animation: appear 0.6s ease-in-out forwards; transform-origin: bottom; }
.swiper-slide-active .forest.f02 { animation: appear 0.6s 0.3s ease-in-out forwards; transform-origin: bottom; }
.swiper-slide-active .forest.f03 { animation: appear 0.6s 0.5s ease-in-out forwards; transform-origin: bottom; }
.swiper-slide-active .home.h01 { animation: appear 0.6s 0.7s ease-in-out forwards; transform-origin: bottom; }
.swiper-slide-active .home.h02 { animation: appear 0.6s 0.4s ease-in-out forwards; transform-origin: bottom; }
.swiper-slide-active .home.h03 { animation: appear 0.6s 0.5s ease-in-out forwards; transform-origin: bottom; }
.swiper-slide-active .home.h04 { animation: appear 0.6s 0.8s ease-in-out forwards; transform-origin: bottom; }
@keyframes mom {
  0% {

    transform: rotate(1deg); }
  50% { transform: rotate(-3deg) translate(0px, -3px); }
  100% { transform: rotate(1deg); }
}
@keyframes kid {
  0% { transform: rotate(-8deg); }
  50% { transform: rotate(16deg); }
  0% { transform: rotate(8deg); }
}
@keyframes papa {
  0% { transform: rotate(-3deg); }
  50% { transform: rotate(2deg) translate(-5px, -2px); }
  100% { transform: rotate(-3deg); }
}
@keyframes appear {
  0% {

}
  53% { transform: translateY(-30px); opacity: 1; }
  80% { transform: rotateX(30deg) translateY(5px); }
  100% { opacity: 1; }
}
.swiper-slide-active .heart { animation: appear2 1.2s forwards; }
.swiper-slide-active .paper { animation: appear2 0.6s 1s forwards; }
.swiper-slide-active .teacher { animation: teacher 1.1s infinite; transform-origin: bottom; }
.swiper-slide-active .kidArm { animation: kidArm 1.2s infinite; transform-origin: bottom; }
.swiper-slide-active .kidleg { animation: kidleg 1s infinite; transform-origin: top; }
@keyframes teacher {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(12deg) translate(-4px, 9px) }
  100% { transform: rotate(0deg); }
}
@keyframes kidArm {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(12deg) translate(-6px, -9px) }
  100% { transform: rotate(0deg); }
}
@keyframes kidleg {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(12deg) translate(-1px, 7px); }
  100% { transform: rotate(0deg); }
}
@keyframes appear2 {
  0% { transform: rotateX(0deg) translateY(-20px); opacity: 0; }
  50% { transform: rotateX(0deg) translateY(-40px); }
  75% {

    transform: rotateX(30deg) translateY(5px); }
  100% { transform: rotateX(0deg) translateY(-20px); opacity: 1; }
}
.onMainQuickMenu { border-radius: 0 0 30px 30px; transition: all 0.3s; }
.onMainQuickMenu > ul { display: flex; justify-content: space-between; align-items: center; height: 200px; padding: 0 46px; background-color: rgba(255, 255, 255, 0.2); }
.onMainQuickMenu > ul > li > a { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.onMainQuickMenu > ul > li > a > img { position: relative; margin-bottom: 12px; padding: 10px; border: 2px solid transparent; border-radius: 15px; transition: all 0.3s; }
.onMainQuickMenu > ul > li > a > span { position: relative; font-size: 17px; font-weight: 600; text-align: center; color: #555555; transition: all 0.3s; }
.onMainQuickMenu > ul > li > a > span::before { position: absolute; display: block; content: ""; top: -6px; left: 0; right: 0; height: 2px; transform: scaleX(0); background-color: #555; transition: all 0.3s; }
.onMainInfo { display: flex; }
.onMainKochens { display: flex; justify-content: center; width: 50%; margin-right: 4%; padding: 30px 15px 30px 15px; border: 1px solid #CFCFCF; border-radius: 20px; background: no-repeat left 20px center; }
.onMainKochens > div:first-child { display: flex; align-items: center; }
.onMainKochens img { margin-right: 20px; }
.onMainKochensIn { display: flex; flex-direction: column; justify-content: center; }
.onMainKochensIn > h3 { margin-bottom: 15px; font-size: 26px; font-weight: 600; color: #000000; line-height: 36px; white-space: nowrap; }
.onMainKochensIn > span { font-size: 14px; font-weight: 200; color: #666666; }
.onCallCenter { display: flex; flex-direction: column; flex-grow: 1; justify-content: center; align-items: center; width: 50%; padding: 0 20px; border-radius: 20px; background-color: #F2F7FF; }
.onCallCenterL { display: flex; align-items: center; width: 100%; max-width: 350px; margin-bottom: 22px; }
.onCallCenterL > i { display: block; margin-right: 6px; font-size: 22px; }
.onCallCenterL > h3 { margin-right: 12px; font-size: 20px; }
.onCallCenterL > p { font-size: 14px; font-weight: 200; color: #666666; white-space: nowrap; }
.onCallCenterL > p > br { display: none; }
.onCallCenterR { position: relative; display: flex; width: 100%; max-width: 350px; }
.onCallCenterR > span { flex-grow: 1; display: block; height: 100%; text-align: center; }
.onCallCenterR > span::after { display: inline-block; padding-left: 4px; content: ""; height: 100%; border-right: 1px dashed #D3DFF2; }
.onCallCenterR > strong { display: flex; flex-direction: column; font-size: 30px; font-weight: 600; white-space: nowrap; color: #175EC7; }
.onCallCenterR > strong > i { font-size: 31px; font-weight: 400; }
.onCallCenterR > strong > span { display: inline-block; margin-left: 4px; font-size: 15px; font-weight: 600; }
.onCallCenter > h3 { margin-bottom: 12px; font-style: 17px; font-weight: 600; color: #333333; }
.onCallCenter > strong { display: flex; align-items: center; margin-bottom: 16px; font-size: 40px; font-weight: 600; color: #379CF1; }
.onCallCenter > strong > i { display: block; margin-right: 8px; font-size: 31px; color: #18283F; }
.onCallCenter > span { font-size: 14px; font-weight: 200; color: #666666; }
/* 로그인 박스 */
.onLoginBox { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; justify-content: center; width: 385px; height: 320px; padding: 0 34px; border: 2px solid #000000; border-radius: 30px; box-sizing: border-box; overflow: hidden; }
.onLoginBox > h3 { margin-bottom: 12px; font-size: 24px; color: #292929; font-weight: 800; transition: all 0.3s 0.3s; }
.onLoginBox.loggedIn { opacity: 0; }
.onLoginBox.loggedIn.loadDone { opacity: 1; }
.onLoginBox.loggedIn > h3 { margin-bottom: 22px; }
.onLoginBox > p { margin-bottom: 10px; font-size: 16px; font-weight: 400; color: #333; transition: all 0.3s 0.6s; }
.onLoginBox > .onField { display: block; margin: 0 0 10px 0; }
.onLoginBox > .onField input { display: block; width: 100%; height: 48px; padding-left: 14px; font-size: 17px; font-weight: 400; border: 0; border-radius: 10px; background-color: #EFEFEF; }
.onLoginBox > .onField input::placeholder { color: #8F8F8F; }
.onLoginBox.researcherLogin { height: 220px; }
.onMainVisual .onLoginBox.researcherLogin:hover > h3 { color: #292929; }
.onLoginBox > .onField.type02 { width: 100%; margin: 20px auto 0; max-width: 370px; }
.onLoginBox > .onField.type02:first-of-type { margin-top: 0; }
.onLoginBox > .onField.type02 > p { color: #333; font-weight: 600; font-size: 17px; margin-bottom: 10px; }
.onLoginBox > .onField.type02 input, .onLoginBox > .onField.type02 select { height: 56px; padding: 0 18px; font-size: 18px; border: 1px solid #d7d7d7; border-radius: 10px; transition: all 0.3s; background: #f9f9f9; }
.onLoginBox > .onField.type02 input:focus, .onLoginBox > .onField.type02 input:focus-visible, .onLoginBox > .onField.type02 select:focus, .onLoginBox > .onField.type02 select:focus-visible { border: 1px solid #175EC7; outline: none; }
.onLoginBox > .onField.type02 input::placeholder { color: #8F8F8F; }
.onLoginBox > .onField.type02 .birthdayBox select { min-width: 85px; }
.onLoginBox > .onField.type02 .unit { font-size: 18px; color: #333; }
.onLoginBox > .onField.type02 .birthdayBox .unit { margin-left: 2px; margin-right: 10px; }
.onLoginBox > .onField.type02 .childIdBox { display: flex; align-items: center; gap: 5px; position: relative; }
.onLoginBox > .onField.type02 .childIdBox .childIdInput { padding: 0 10px; box-sizing: border-box; text-align: center; }
.onLoginBox > .onField.type02 .childIdBox .childIdInput { padding: 0 10px; box-sizing: border-box; text-align: center; }
.onLoginBox > .onField.type02 .childIdBox .childIdInput01 { width: 50px; }
.onLoginBox > .onField.type02 .childIdBox .childIdInput02 { width: 71px; }
.onLoginBox > .onField.type02 .childIdBox .childIdInput03 { width: 43px; }
.onLoginBox > .onField.type02 .childIdBox .childIdInput04 { width: 90px; }
.onLoginBox > .onField.type02 .childIdBox .childIdInput05 { width: 50px; }
#childIdListArea .onInspectLogT span { width: 33%; flex: 1 1 auto; border: none; }
#childIdListArea .onInspectLogT span:nth-child(3), #childIdListArea .onInspectLogB span:nth-child(3) { width: 16%; }
#childIdListArea .onInspectLogB > ul { height: auto; }
#childIdListArea .onInspectLogB > ul > li { height: 52px; }
#childIdListArea .onInspectLogB > ul > li span { flex: 1 1 auto; width: 33%; text-align: center; }
.changeReasonWrap { width: 100%; flex-wrap: wrap; gap: 6px; }
.changeReason { max-width: fit-content; }
.onField .changeReasonInput { color: #666; font-size: 16px; padding: 10px; display: none; }
.onField .changeReasonInput::placeholder { color: #666; }
.inputHelpTooltip { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
.inputHelpTooltip > button { position: absolute; width: 23px; height: 23px; top: 50%; right: 12px; transform: translateY(-50%); cursor: pointer; visibility: hidden; opacity: 0; transition: 0.3s; pointer-events: auto; }
.inputHelpTooltip > button svg circle { transition: 0.3s; }
.inputHelpTooltip > button:hover svg circle { fill: #175EC7}
.inputHelpTooltip > p { position: absolute; z-index: 10; top: 44px; right: -7px; padding: 5px 10px 5px 14px; background: #FFFFFF; border-radius: 20px; border: 1px solid #175EC7; color: #175EC7; font-size: 15px; max-width: 85%; text-align: right; box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.15); visibility: hidden; opacity: 0; transition: 0.3s; }
.inputHelpTooltip > button:hover + p, .onLoginBox > .onField input:focus + .inputHelpTooltip > button { visibility: visible; opacity: 1; }
.inputHelpTooltip > p:after { content: ''; position: absolute; border-style: solid; border-width: 0 4px 8px 4px; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; top: -6px; right: 26px; }
.inputHelpTooltip > p:before { content: ''; position: absolute; border-style: solid; border-width: 0 4px 8px 4px; border-color: #175EC7 transparent; display: block; width: 0; z-index: 0; top: -8px; right: 26px; }
.inputHelpTooltip.alwaysView { height: 56px; top: 29px; left: 46px; }
.inputHelpTooltip.alwaysView > button { opacity: 1; visibility: visible; transition: none; right: 16px; }
.inputHelpTooltip.alwaysView > p { right: -4px; top: 48px; }
.findIdentityNum { position: absolute; top: 40px; right: -164px; }
.onLoginBox .onSurveyStep > ul > li.last:first-child::before { background-color: #175EC7; }
.onLoginBox .onSurveyStep > ul > li.current::before { background-color: #D8D8D8}

/* 250731 로그인페이지_수정 */
.moUnit {display: none;}
.onLoginBox.fullPage { position: relative; width: 100%; top: auto; left: auto; right: auto; bottom: auto; height: auto; padding: 50px 34px 60px; }
.onLoginBox.fullPage > h3 { font-size: 28px; line-height: 33px; margin-bottom: 30px; }
.notification { font-size: 15px; color: #666; line-height: 1.2; word-break: keep-all;}
.onLoginBox.fullPage .notification { margin-top: 20px; max-width: 500px; margin: 20px auto 0; text-align: left; transform: translateX(30px); }
.onLoginBox.fullPage .onLoginBtn { margin: 24px auto 0; max-width: 370px; height: 60px; }
.loginBtmBox { margin-top: 60px; }
.loginBtmBox > .onContainer { display: flex; gap: 40px; }
.loginBtmLeft { width: 58%; max-width: 745px; }
.loginBtmBox .onT1 { line-height: 1; display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
.onOrderList { background: #F5F6F7; border-radius: 10px; padding: 25px 37px; height: 275px; box-sizing: border-box; }
.onOrderList > li { display: flex; gap: 8px; margin-top: 20px; }
.onOrderList > li:first-child { margin-top: 0; }
.onOrderList > li .numbering { width: 23px; height: 23px; background: rgba(115, 151, 212, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #175EC7; font-weight: 800; flex-shrink: 0; }
.onOrderList > li .contents .contentsT1 { color: #1e1e1e; font-size: 18px; font-weight: 600; line-height: 1; padding-top: 2px; box-sizing: border-box; }
.onOrderList > li .contents .contentsT2 { color: #666; font-size: 17px; display: flex; align-items: center; margin-top: 12px; margin-top: 6px; }
.onOrderList > li .contents .contentsT2 span { margin-left: 6px; font-size: 15px; }
.onOrderList > li .contents .contentsT2 + div { margin-top: 3px; display: flex; gap: 5px; }
.loginBtmRight { flex: 1; }
.callCenterBox { background: #E8F3FF; border-radius: 10px; height: 275px; display: flex; }
.callCenterBox > li { width: 50%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.callCenterBox > li:first-child:after { content: ""; position: absolute; width: 0; height: calc(100% - 56px); border-right: 1px dashed #D3DFF2; right: 0; top: 50%; transform: translateY(-50%); }
.callCenterBox > li .pictogram { margin-bottom: 24px; }
.callCenterBox > li div > p { color: #175EC7; font-size: 18px; line-height: 1; margin-bottom: 20px; }

/* 로그인 화면 변경에 따라 추가 (2024.09.23) */
.onLinkBox { display: flex; margin-bottom: 20px; }
.onLinkBox a { color: #666; font-size: 15px; }
.onLinkBox > p { margin-left: auto; }
.onLinkBox > p > a { position: relative; }
.onLinkBox > p > a:last-child { padding-left: 18px; }
.onLinkBox > p > a:last-child:before { content: ""; position: absolute; width: 1px; height: 100%; top: 50%; transform: translateY(-50%); left: 9px; background: #d7d7d7; height: 13px; }
.onMainVisual .onLoginBox:hover > h3 { color: #fff; transition: all 0.3s 0.7s; }
.onMainVisual .onLoginBox:hover > p { color: #fff; transition: all 0.3s 0.3s; }
.onMainVisual .onLoginBox:hover > .onLinkBox a { color: #fff; transition: all 0.3s 0.3s; }
.onMainVisual .onLoginBox:hover > .onLinkBox > p > a:last-child:before { background: #fff; transition: all 0.3s 0.3s; }
.onMainVisual .onLoginBox.loggedIn:hover > h3 { color: #292929; }

/* 로그인 박스 웨이브 애니메이션 */
.onLoginWaveBox { position: absolute; top: -30%; left: 0; transform: translateY(0); width: 200%; z-index: -1; opacity: 0; transition: all 2s; }
.onLoginWaveBox.on { transform: translateY(-400px); opacity: 1; }
.onLoginWave { position: relative; display: flex; width: 100%; animation: waveX 0.6s infinite linear; }
.onLoginWave > svg { width: 50%; }

/* 로그인 팝업 */
.onLoginPopup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.5); z-index: 200; visibility: hidden; opacity: 0; transition: all 0.3s; }
.onLoginPopup .onLoginBox { position: relative; background-color: #fff; }
.onLoginPopupClose { position: absolute; top: 34px; right: 32px; font-size: 26px; }
.onLoginPopup.on { visibility: visible; opacity: 1; }
.onSignupLoginPopup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.5); z-index: 200; visibility: hidden; opacity: 0; transition: all 0.3s; }
.onSignupLoginPopup .onLoginBox { position: relative; background-color: #fff; height: auto; padding: 32px 34px 38px; }
.onSignupLoginPopupClose { position: absolute; top: 32px; right: 40px; font-size: 22px; }
.onSignupLoginPopup.on { visibility: visible; opacity: 1; }
.onSignupLoginPopup .onLoginBox > .onField:last-of-type { margin-bottom: 15px; }
.onAlarm { display: flex; align-items: center; margin-bottom: 30px; font-size: 18px; font-weight: 400; }
.onAlarm > i { margin-right: 8px; font-weight: 800; color: #175EC7; }
.onAlarm > span { font-weight: 800; color: #175EC7; }
.onMyStatusTitle { display: flex; align-items: center; margin-bottom: 20px; }
.onMyStatusTitle > strong { margin-right: auto; font-size: 20px; font-weight: 600; color: #333; }
.onMyStatusTitle > a { font-size: 15px; }
.onMyStatusTitle > select { display: block; width: 100px; height: 30px; padding: 0 8px; font-size: 16px; font-weight: 600; color: #000; border: 1px solid #707070; border-radius: 5px; background: url(../img/main/icon_child_arrow.svg) no-repeat right 6px center; appearance: none; }
.onChildrenTab { display: flex; height: 28px; border-radius: 15px; background-color: #EFEFEF; }
.onChildrenTab > li { height: 100%; }
.onChildrenTab > li > a { display: flex; align-items: center; height: 100%; padding: 0 12px; font-size: 15px; font-weight: 400; border-radius: 15px; color: #666666; }
.onChildrenTab > li.on > a { font-weight: 600; color: #fff; background-color: #000; }
.onChildrenContent { margin-bottom: 24px; }
.onSurveyStep { position: relative; margin-bottom: 24px; }
.onSurveyStep > ul { display: flex; padding: 10px 4px; align-items: center; }
.onSurveyStep > ul > li { position: relative; flex: 1; }
.onSurveyStep > ul > li:last-child { flex: 0; }
.onSurveyStep > ul > li::before { position: absolute; display: block; content: ""; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 2px; background-color: #D8D8D8; }
.onSurveyStep > ul > li > span { position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid #D8D8D8; box-sizing: border-box; background-color: #fff; z-index: 10; }
.onSurveyStep > ul > li .statusBtm { position: absolute; color: #fff; left: 7px; transform: translateX(-50%); font-size: 15px; font-weight: 600; bottom: -35px; white-space: nowrap; }
.onSurveyStep > ul > li.last::before { height: 2px; background-color: #175EC7; z-index: 5; }
.onSurveyStep > ul > li.last:first-child { z-index: 10; }
.onSurveyStep > ul > li.last:first-child::before { background-color: #fff; }
.onSurveyStep > ul > li.last > span { border-color: #175EC7; background-color: #175EC7; }
.onSurveyStep > ul > li.current::before { height: 2px; background-color: #175EC7; z-index: 5; }
.onSurveyStep > ul > li.current > span { border-color: #175EC7; background-color: #175EC7; outline: 4px solid #fff; }
.onSurveyStep > ul > li.current > span::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; content: ""; width: 100%; height: 100%; border: 7px solid #fff; outline: 2px solid #175EC7; border-radius: 50%; }
.onSurveyStep > ul > li.current:first-child span::before { top: 37px; width: 12px; }
.onSurveyStep > ul > li.current:last-child span::before { top: 36px; height: 12px; }
.onSurveyStep > ul > li.current .statusTop { color: #fff; position: absolute; top: -30px; text-align: center; left: 10px; transform: translateX(-50%); font-size: 15px; font-weight: 800; }
.onSurveyStep > ul > li.current .statusBtm { left: 10px; }
.onSurveyStatus { display: flex; align-items: center; height: 48px; padding: 0 15px; border: 1px solid #175EC7; border-radius: 10px; white-space: nowrap; box-sizing: border-box; background-color: #fff; }
.onSurveyStatus > h3 { display: flex; align-items: center; margin-right: 14px; font-size: 15px; font-weight: 800; color: #175EC7; }
.onSurveyStatus > h3 > span { display: inline-block; margin-right: 4px; font-size: 24px; }
.onSurveyStatus > strong { margin-right: 10px; font-size: 16px; font-weight: 400; color: #000; }
.onSurveyStatus > span { font-size: 15px; font-weight: 400; color: #666666; }
.onSurveyStatus > i { margin-left: auto; font-size: 13px; font-weight: 600; color: #175EC7; }
.onLoginBoxBtns { display: flex; }
.onLoginBoxBtns > a { display: flex; justify-content: center; align-items: center; width: 50%; height: 32px; font-size: 14px; font-weight: 600; color: #fff; border-radius: 5px; background-color: #777C97; transition: background-color 0.3s; }
.onLoginBoxBtns > a:first-child { margin-right: 14px; }
.onLoginBoxBtns > a:hover { background-color: #B1B1B1; }
.onLoginBoxBtns > a > img { margin-right: 5px; }
.onLoginBtn, .onLinkBigBtn { display: block; width: 100%; height: 50px; font-size: 18px; font-weight: 400; border-radius: 10px; color: #fff; background-color: #175EC7; transition: all 0.3s; }
.onLoginBtn:hover, .onLinkBigBtn:hover { background-color: #049AF4; }
.onLinkBigBtn { margin-right: 12px; }
.onLogoutBigBtn { display: block; width: 100%; height: 50px; font-size: 18px; font-weight: 400; border-radius: 10px; color: #fff; background-color: #737373; transition: all 0.3s; }
.onLogoutBigBtn:hover { background-color: #B1B1B1; }
.onLogoutBtn { position: absolute; top: 34px; right: 32px; display: inline-block; padding: 0 13px; font-size: 13px; font-weight: 600; line-height: 26px; border-radius: 20px; color: #fff; background-color: #B1B1B1; transition: all 0.3s; }
.onLogoutBtn:hover { background-color: #049AF4; }

/* 로그인 화면 변경에 따른 추가(2024.09.23) */
.onLoginBtnBox { display: flex; }
.onLoginBtnBox button { cursor: pointer; }
.onEasyLoginBtn { margin-right: 12px; background-color: #12A47A; }
.onEasyLoginBtn:hover { background-color: #2fc763; }

/*   메인팝업 */
.onMainPopup { width: 100%; height: 100%; }
.onMainPopupBody { background-size: auto; width: 100%; max-width: 500px; }
.onMainPopupBody > img { max-width: 500px; width: 100%; }
.onMainPopupLists { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 20px; }
.onMainPopup > ul > li { position: relative; }

/* 레이어 팝업 */
.onPopup.on { background-color: rgba(0, 0, 0, 0.7); }
.onPopup .onPopupIn { border-radius: 15px; box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.5); max-height: 90%; height: auto; padding: 20px 0 30px; }
.onPopup .onPopupIn.xMini { max-width: 480px; min-width: 310px; }
.onPopup .onPopupIn.mini { max-width: 600px; }
.onPopup .onPopupIn.sml { max-width: 700px; }
.onPopup .onPopupIn.medium { max-width: 800px; }
.onPopup .onPopupIn .onPopupClose { color: #A0A0A0; font-size: 24px; top: 18px; right: 30px; cursor: pointer; }
.onPopup .onPopupIn .onPopupHead { padding-bottom: 20px; padding-top: 6px; width: calc(100% - 60px); margin: 0 auto 20px; }
.onPopup .onPopupIn .onPopupTitle { font-size: 20px; font-weight: 400; }
.onPopup .onPopupBody { padding-left: 30px; padding-right: 30px; }
.onPopup .onPopupBody.hasScroll { overflow-y: auto; height: 100%; min-height: 200px; }
.referenceBox { background: #E8F8FF; border-radius: 12px; display: flex; gap: 3px; color: #666; font-size: 17px; padding: 10px 96px 10px 16px; line-height: 1.3; margin-bottom: 16px; }

/* 팝업 내 약관 */
.onPopup .conT3 { font-size: 20px; font-weight: 500; color: #000; margin: 0px 0px 12px 0px; }
.onPopup .conT4 { font-size: 16px; font-weight: 500; color: #000; margin: 0px 0px 8px 0px; }
.onPopup .conBox { margin-bottom: 24px; background-color: #F8F8F9; padding: 20px; }
.onPopup .conBox .conT4 { font-size: 16px; color: #666; line-height: 24px; }
.onPopup .txtBox a:hover { color: #003CC8; }
.onPopup .conP { margin: 0px 0px 40px; }
.onPopup .table_normal_wrap { overflow-x: auto; margin-bottom: 12px; }
.onPopup .table_normal { min-width: 600px; }
.onPopup .table_normal caption { position: absolute; font-size: 0; width: 0; height: 0; text-indent: 1000px; line-height: 0; overflow: hidden; }
.onPopup .table_normal { width: 100%; border-top: 2px solid #000; border-bottom: 1px solid #d7d7d7; border-spacing: 0px; }
.onPopup .table_normal thead tr th { position: relative; background-color: #f7f7f7; border-top: 1px solid #dadada; color: #333; padding: 13px 0px; text-align: center; font-size: 14px}
.onPopup .table_normal thead tr th:before { content: ""; height: 23px; position: absolute; left: 0px; border-left: 1px dotted #D7D7D7; }
.onPopup .table_normal thead tr th:first-child::before { border: 0px; }
.onPopup .table_normal tfoot tr th { background-color: #f7f7f7; border-top: 1px solid #dadada; color: #333; padding: 10px 0px; text-align: center; font-size: 13px}
.onPopup .table_normal tbody tr th { background-color: #f7f7f7; border-top: 1px solid #dadada; color: #333; padding: 10px 0px; text-align: center; font-size: 14px}
.onPopup .table_normal tbody tr td { color: #666; border-top: 1px solid #dadada; padding: 13px 5px; transition: 0.3s all; font-size: 15px; background-color: #fff; }
.onPopup .table_normal tbody tr td.ac { text-align: center; }
.onPopup .table_normal tbody tr td a { color: #000; }
.onPopup .table_normal tbody tr td a:hover { color: #2D3B9C}
.onPopup .txtBox { margin: 0 0 12px 0; }
.onPopup .conP.privacy { margin-bottom: 30px; }
.onPopup .conP.privacy .conT3 { margin: 0 0 10px 0; }

/* 회원유형 선택 */
.signupPopup .onPopupIn { max-height: none; min-height: auto; }
.categoryChoice { display: flex; flex-wrap: wrap; }
.choiceItem { margin-right: 20px; flex: 1; border: 1px solid #F3F3F3; background: #F7F8F9; border-radius: 12px; padding: 27px 25px; color: #555; transition: all 0.3s; }
.choiceItem:last-child { margin-right: 0; }
.choiceItem > p { font-size: 20px; font-weight: 600; margin-bottom: 14px; }
.choiceItem > div { display: flex; }
.choiceItem > div > p { margin-right: auto; }
.choiceItem > div > p > span { display: block; font-size: 17px; }
.choiceItem p { transition: color 0.3s; }
.choiceItem:hover { box-shadow: 0 0 0 2px inset #172EC7; background-color: #fff; }
.choiceItem:hover p { color: #172EC7; }
.categoryChoice.type02 .choiceItem { margin-right: 25px; border: 1px solid #ddd; padding: 0; height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; box-sizing: border-box; }
.categoryChoice.type02 .choiceItem:last-child { margin-right: 0; }
.categoryChoice.type02 .choiceItem > div { border-radius: 50%; background-color: #DEEFFF; transition: all 0.3s; }
.categoryChoice.type02 .choiceItem:hover { box-shadow: none; background: #175EC7; }
.categoryChoice.type02 .choiceItem:hover p { color: #fff; }
.categoryChoice.type02 .choiceItem:hover > div { background-color: rgba(255,255,255,0.2); }

/* 메인팝업 */
.onMainPopupFooter { height: 52px; background-color: #1C1945; }
.onMainPopupFooter > a { position: relative; display: flex; align-items: center; justify-content: center; width: 50%; height: 100%; font-size: 17px; font-weight: 500; color: #fff; text-align: center; opacity: 0.8; box-sizing: border-box; }
.onMainPopupFooter > a:hover { opacity: 1; }
.onMainPopupFooter > a:first-child::after { position: absolute; right: 0; top: 6px; bottom: 6px; display: block; content: ""; border-right: 1px solid #fff; opacity: 0.2; }

/* Placeholder */
.onPlaceholder { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: #999; font-size: 17px; white-space: nowrap; cursor: initial; transition: all 0.3s; transform-origin: left center; }
.onPlaceholder::after, .onPlaceholder::before { position: absolute; display: block; content: ""; width: 100%; background-color: transparent; transition: all 0.3s; z-index: -1; }
.onPlaceholder::after { top: 0; left: 0; bottom: 50%; display: none; }
.onPlaceholder::before { top: calc(50% - 3px); left: 0; bottom: 0; }
.onPlaceholder.on { top: 0; left: 8px; transform: translateY(-50%) scale(0.75); padding: 0 10px; color: #000; }
.onPlaceholder.on::after { background-color: #F5F5F5; }
.onPlaceholder.on::before { background-color: #EFEFEF; }
.onMainPanel { position: absolute; right: 0; top: 354px; bottom: 0; width: 385px; flex-grow: 1; border-radius: 30px; background-color: #F5F5F5; }
.onMainPanel.heightUp { top: 254px; }
.onMainPanel > div:first-of-type { height: 190px; border-bottom: 1px solid #fff; padding: 32px 36px 0; }
.onMainPanel > div:nth-of-type(2) { margin: 30px 36px 0; }
.onNewsTab { position: relative; display: flex; margin-bottom: 22px; }
.onNewsTab > li { margin-right: 25px; padding-bottom: 4px; font-size: 21px; font-weight: 600; color: #BCBCBC; border-bottom: 2px solid transparent; transition: all 0.3s; }
.onNewsTab > li:last-child { margin-right: 0; }
.onNewsTab > li:hover { color: #292929; }
.onNewsTab > li > a:last-child { position: absolute; top: -4px; right: 0; display: none; justify-content: center; align-items: center; width: 31px; height: 31px; padding-bottom: 5px; font-size: 25px; font-weight: 400; border-radius: 50%; color: #fff; background-color: #B1B1B1; box-sizing: border-box; transition: all 0.3s; }
.onNewsTab > li > a:last-child:hover { background-color: #049AF4; }
.onNewsTab > li.on { color: #292929; border-color: #292929; }
.onNewsTab > li.on > a:last-child { display: flex; }
.onNewsContent { margin-bottom: 28px; }
.onNewsContent ul > li { display: flex; align-items: center; height: 25px; margin-bottom: 16px; font-size: 18px; font-weight: 400; color: #333333; }
.onNewsContent ul > li:last-child { margin-bottom: 0; }
.onNewsContent ul > li strong { display: inline-flex; align-items: center; height: 25px; margin-right: 12px; padding: 0 11px; font-size: 16px; font-weight: 400; border: 2px solid #FF7171; border-radius: 15px; color: #FF7171; box-sizing: border-box; }
.onNewsContent ul > li > a { display: block; height: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onNewsContent ul > li > a:hover { text-decoration: underline; }
.onChartSwiper { position: relative; overflow: hidden; padding-bottom: 20px; }
.onChartSwiper > a { position: absolute; top: 0; right: 0; display: flex; align-items: center; height: 27px; padding: 0 12px; font-size: 14px; font-weight: 400; border-radius: 14px; color: #fff; background-color: #ABABAB; z-index: 10; transition: all 0.3s; }
.onChartSwiper > a:hover { background-color: #049AF4; }
.onChartSwiper h3 { margin-bottom: 35px; font-size: 20px; font-weight: 600; color: #000000; line-height: 25px; }
.onChartSwiper a > i { display: block; margin-left: 2px; font-size: 12px; font-weight: 600; }
.onChartSwiper .swiper-pagination { position: static; display: block; text-align: center; }
.onChartSwiper .swiper-pagination-bullet { width: 9px; height: 9px; margin: 0 3px; background-color: #CCCCCC; }
.onChartSwiper .swiper-pagination-bullet-active { background-color: #000000; }
.onChartBox { height: 150px; margin-bottom: 12px; }
.chartGradient { display: none; }

/* 캐릭터 관련 애니메이션 */
.character { position: relative; }
.character img { display: block; }
.character01 { width: 58px; height: 66px; }
.character01 > .parts01 { left: -10px; }
.character01 > .parts02 { position: absolute; left: -8px; top: 26px; transform-origin: right center; }
.character01 > .parts03 { position: absolute; right: -8px; top: 24px; transform-origin: left center; }
.character01.hand > .parts02 { animation: character01Hand 0.3s ease-in-out alternate infinite; }
.character01.hand > .parts03 { animation: character01Hand 0.3s ease-in-out alternate-reverse infinite; }

@keyframes character01Hand {
  0% { transform: rotate(-20deg); }
  100% { transform: rotate(20deg); }
}
.character02 { width: 86px; height: 52px; }
.character02 > .parts02 { position: absolute; left: -3px; top: 2px; transform-origin: right bottom; }
.character02 > .parts03 { position: absolute; right: 3px; top: 5px; transform-origin: left bottom; }
.character02 > .parts04 { position: absolute; left: 12px; bottom: 0; }
.character02 > .parts05 { position: absolute; right: 24px; bottom: 0; }
.character02.shake > .parts02 { animation: character02Hand 0.3s ease-in-out infinite alternate; }
.character02.shake > .parts03 { animation: character02Hand 0.3s ease-in-out infinite alternate-reverse; }
.character02.shake > .parts04 { animation: character02Foot 0.3s ease-in-out infinite alternate-reverse; }
.character02.shake > .parts05 { animation: character02Foot 0.3s ease-in-out infinite alternate; }
@keyframes character02Hand {
  0% { transform: rotate(-20deg); }
  100% { transform: rotate(20deg); }
}
@keyframes character02Foot {
  0% { transform: translateY(-1px); }
  100% { transform: translateY(2px); }
}
.character03 { width: 56px; height: 98px; }
.character03 > .parts01 { transform-origin: center top; position: absolute; top: 77px; left: 14px; }
.character03 > .parts02 { transform-origin: center top; position: absolute; top: 78px; left: 36px; }
.character03 > .parts03 { position: absolute; top: 0; right: 2px; transform-origin: left bottom; }
.character03 > .parts04 { position: absolute; top: 15px; left: 2px; }
.character03 > .parts05 { position: absolute; top: 42px; left: 19px; }
.character03 > .parts06 { position: absolute; top: 54px; left: 19px; }
.character03.work > .parts01 { animation: character03Work 0.3s infinite alternate linear; }
.character03.work > .parts02 { animation: character03Work 0.3s 0.3s infinite alternate linear; }
.character03.hand > .parts03 { animation: character03Hand 0.3s infinite alternate linear; }
.character03.jump { animation: character03JumpUp 0.6s 0.8s ease-in-out; }
.character03.jump > .parts03 { animation: character03JumpHand 1.8s; }
.character03.jump > .parts04 { animation: character03JumpDown 1.8s; }
.character03.jump > .parts05 { animation: character03JumpDown 1.8s; }
.character03.jump > .parts06 { animation: character03JumpDown 1.8s; }
.character03.right { transform: perspective(300px) rotateY(30deg); }
.character03.left { transform: perspective(300px) rotateY(-210deg); }
@keyframes character03Work {
  0% { transform: scaleY(1); }
  100% { transform: scaleY(0.6); }
}
@keyframes character03Hand {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(10deg); }
}
@keyframes character03JumpDown {
  0% { transform: translateY(0); }
  40% { transform: translateY(10px); }
  60% { transform: translateY(0); }
  80% { transform: translateY(5px); }
  100% { transform: translateY(0); }
}
@keyframes character03JumpUp {
  0% { transform: translateY(0); }
  30% { transform: translateY(-40px); }
  80% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
@keyframes character03JumpHand {
  0% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(10px) rotate(10deg); }
  60% { transform: translateY(0) rotate(0deg); }
  80% { transform: translateY(5px) rotate(0deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
/* chartJS tooltip custom */
#chartjs-tooltip { position: absolute; transition: opacity 0.3s; user-select: none; }
#chartjs-tooltip > div { position: relative; display: flex; align-items: center; height: 24px; padding: 0 10px 0 8px; font-size: 13px; font-weight: 400; border-radius: 14px; color: #fff; background-color: #175EC7; box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px; }
#chartjs-tooltip > div::after { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: block; content: ""; width: 6px; height: 10px; border-top: 3px solid #175EC7; border-right: 3px solid transparent; border-left: 3px solid transparent; border-bottom-color: 10px solid transparent; box-sizing: border-box; }
/* 1.4. Sub ------------------------------------------------------------------------------------ */
.onSubLayout { margin-bottom: 130px; line-height: 1.35; min-height: 600px;}
.onContentLayout { margin-left: 265px; margin-bottom: 150px; }
.onSubVisual { position: relative; min-height: 216px; margin-bottom: 60px; padding: 58px 0 0 58px; border-radius: 30px; box-sizing: border-box; }
/* .onSubVisual::after { display: block; content: ""; position: absolute; background-size: cover; z-index: 10; } */
.onSubVisual.type01 { background-color: #29B1F1; }
/* .onSubVisual.type01::after { bottom: 0; right: 8%; width: 312px; height: 236px; background: url(../img/sub/visualBg_01.png); } */
.onSubVisual.type02 { background-color: #FF7A83; }
/* .onSubVisual.type02::after { bottom: -16px; right: 8%; width: 352px; height: 245px; background: url(../img/sub/visualBg_02.png); } */
.onSubVisual.type03 { background-color: #FFA516; }
/* .onSubVisual.type03::after { bottom: 0; right: 8%; width: 320px; height: 238px; background: url(../img/sub/visualBg_03.png); } */
.onSubVisual.type04 { background-color: #11B272; }
/* .onSubVisual.type04::after { bottom: 0; right: 8%; width: 331px; height: 157px; background: url(../img/sub/visualBg_04.png); } */
.onCloud01 { position: absolute; bottom: 80px; right: 0; animation: onCloud01 5s alternate infinite linear; }
.onCloud02 { position: absolute; bottom: 0; right: 400px; transform: scale(0.7); animation: onCloud02 5s alternate infinite linear; z-index: 20; }
@keyframes onCloud01 {
  0% { transform: translateX(0); }
  100% { transform: translateX(-80px); }
}
@keyframes onCloud02 {
  0% { transform: translateX(-80px) scale(0.7); }
  100% { transform: translateX(0) scale(0.7); }
}
.onSubTitle { font-size: 40px; font-weight: 800; letter-spacing: 0; color: #fff; z-index:8; position:relative; }
.onSubNav { margin-bottom: 20px; padding-left: 4px; }
.onSubNav > ol { display: flex; color: #fff; position:relative; z-index:9; flex-wrap:wrap;}
.onSubNav > ol > li { position: relative; margin-right: 26px; font-size: 15px; font-weight: 400; }
.onSubNav > ol > li::after { position: absolute; top: 50%; right: -16px; transform: translateY(-50%); display: block; content: ""; width: 5px; height: 8px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid #fff; opacity: 0.6; box-sizing: border-box; }
.onSubNav > ol > li:first-child { margin-right: 21px; }
.onSubNav > ol > li:first-child:after { right: -14px; }
.onSubNav > ol > li:last-child { font-weight: 600; }
.onSubNav > ol > li:last-child:after { display: none; }
.onSubNav > ol > li > a:hover { text-decoration: underline; }
.onLeftMenuLayout { width: 218px; }
.onLeftMenuIn > ul > li { font-size: 18px; border-bottom-color: #E9E9E9; position: relative; }
.onLeftMenuIn > ul > li > a { /* position: relative; */padding: 14px 0; font-weight: 600; color: #BFBFBF; transition: color 0.3s; transition: all 0.3s; padding-right: 70px; }
.onLeftMenuIn > ul > li > a + i { position: absolute; top: 50%; right: 50px; transform: translateY(-50%); font-size: 11px; opacity: 0; transition: all 0.3s; }
.onLeftMenuIn > ul > li.on > a, .onLeftMenuIn > ul > li > a:hover { font-weight: 800; color: #000; }
.onLeftMenuIn > ul > li.on > a + i, .onLeftMenuIn > ul > li > a:hover + i { right: 8px; opacity: 1; }
/* 1.5. Dashboard ------------------------------------------------------------------------------------ */
.onDashBoard { margin-bottom: 64px; }
.onDashTop { margin-bottom: 50px; padding: 33px 0; background-color: #175EC7; }
.onDashTopIn { display: flex; align-items: center; }
.onDashGreet { padding-right: 40px; color: #fff; }
.onDashGreet > strong { display: flex; align-items: center; margin-bottom: 10px; font-size: 30px;; font-weight: 600; }
.onDashGreet > strong > img { margin-right: 8px; }
.onDashGreet > p { font-size: 16px; font-weight: 400; color: #fff; }
.onDashGreet > p > span.title { opacity: 0.8; margin-right: 9px; }
.onDashGreet > p > span.content { font-weight: 600; }
.onDashGreet > a.configButton { margin-top: 16px; display: inline-flex; border-radius: 32px; background: rgba(0, 0, 0, 0.3); width: 100px; height: 28px; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.onDashGreet > a.configButton > img { margin-right: 3px; }
.onDashStatus { flex-grow: 1; flex-shrink: 0; max-width: 50%; margin-left: auto; padding-left: 40px; border-left: 1px dashed rgba(255, 255, 255, 0.2); box-sizing: border-box; }
.onDashStatus.version02 { flex-grow: 1; flex-shrink: 0; max-width: 50%; margin-left: auto; padding-left: 40px; border-left: 1px dashed rgba(255, 255, 255, 0.2); box-sizing: border-box; display: flex; align-items: center; position: relative; }
.onDashStatusNoti { color: #fff; text-align: right; margin-bottom: 5px; }
.onDashStatusT { display: flex; align-items: center; margin-bottom: 22px; }
.onDashStatusT > h3 { margin-right: 14px; font-size: 22px; font-weight: 600; color: #fff; }
.onDashStatusT > h3 > span { color: #FFCA75; }
.onDashStatusT > p { margin-right: auto; font-size: 16px; color: #fff; font-weight: 400; }
.onDashStatusT > select { min-width: 100px; height: 30px; margin-left: 12px; padding: 0 3px; font-size: 16px; font-weight: 400; border: 1px solid #fff; border-radius: 5px; color: #fff; color: #fff; background-color: #175EC7; }
.onDashStatusL { align-items: center; margin-bottom: 30px; background: #175EC7; z-index: 100; }
.onDashStatusL > h3 { margin-right: 14px; font-size: 22px; font-weight: 600; color: #fff; }
.onDashStatusL > h3 > span { color: #FFCA75; }
.onDashStatusL > p { margin-right: auto; font-size: 16px; color: #fff; font-weight: 400; }
.onDashStatusL > select { min-width: 100px; height: 30px; margin: 15px 0; padding: 0 3px; font-size: 16px; font-weight: 400; border: 1px solid #fff; border-radius: 20px; color: #fff; color: #fff; background-color: #175EC7; }
.btmSpaceNone { margin-bottom: 0; }
.onDashStatusB { overflow: hidden; }
.onDashStatusB .onSurveyStep { margin-bottom: 20px; padding: 0 4px; }
.onDashStatusB .onSurveyStep > ul > li > span { border: 1px solid #00398D; background-color: #00398D; }
.onDashStatusB .onSurveyStep > ul > li::before { background-color: #00398D; }
.onDashStatusB .onSurveyStep > ul > li.last > span { border-color: #fff; background-color: #fff; }
.onDashStatusB .onSurveyStep > ul > li.last::before { background-color: #fff; }
.onDashStatusB .onSurveyStep > ul > li.last:first-child { z-index: 10; }
/* .onDashStatusB .onSurveyStep > ul > li.last:first-child::before {background-color: #175EC7;} */
.onDashStatusB .onSurveyStep > ul > li.current > span { background-color: #fff; }
.onDashStatusB .onSurveyStep > ul > li.current > span::after { border-color: #175EC7; outline-color: #fff; }
.onDashStatusB .onSurveyStep > ul > li.current > span::before { top: 34px; left: 1px; border: none; }
/* .onDashStatusB .onSurveyStep > ul > li.current::before {background-color: #fff;} */
.onDashStatusB .onSurveyStep > ul > li.current:first-child { z-index: 10; }
.onDashStatusB .onSurveyStep > ul > li.current:first-child::before { background-color: #00398D; }
.onDashStatusB .onSurveyStatus { max-width: 267px; }
.onDashStatusB .onSurveyStatus > strong { margin-right: auto; font-size: 15px; color: #222; }
.onDashStatusB .onSurveyStatus > span { color: #515151; }
.onDashStatusR { /* overflow: hidden; */flex: 1; }
.onDashStatusR .onSurveyStep { margin-bottom: 20px; padding: 0 4px; }
.onDashStatusR .onSurveyStep > ul > li > span { border: 1px solid #00398D; background-color: #00398D; }
.onDashStatusR .onSurveyStep > ul > li::before { background-color: #00398D; }
.onDashStatusR .onSurveyStep > ul > li.last > span { border-color: #fff; background-color: #fff; }
.onDashStatusR .onSurveyStep > ul > li.last::before { background-color: #fff; }
.onDashStatusR .onSurveyStep > ul > li.last:first-child { z-index: 10; }
.onDashStatusR .onSurveyStep > ul > li.current > span { background-color: #fff; width: 21px; height: 21px; }
.onDashStatusR .onSurveyStep > ul > li.current > span::after { border-color: #175EC7; outline-color: #fff; }
.onDashStatusR .onSurveyStep > ul > li.current:first-child { z-index: 10; }
/* .onDashStatusR .onSurveyStep > ul > li.current:first-child::before {background-color: #175EC7;} */
.onDashStatusR .onSurveyStatus { max-width: 267px; }
.onDashStatusR .onSurveyStatus > strong { margin-right: auto; font-size: 15px; color: #222; }
.onDashStatusR .onSurveyStatus > span { color: #515151; }
.onDashBody { margin-bottom: 64px; }
.onDashBody h2 { display: flex; align-items: center; margin-bottom: 12px; font-size: 20px; font-weight: 600; }
.onDashBody h2 i { margin-left: 8px; font-size: 10px; font-weight: 800; color: #333; }
.onDashBodyT { margin-bottom: 46px; }
.onDashBodyT h3 { margin-bottom: 12px; font-size: 20px; font-weight: 800; color: #000; }
.flexTitle { display: flex; flex-wrap: wrap; }
.onDashReserv { width: 100%; margin-right: 40px; }
.onDashReservIn { display: flex; flex-direction: column; height: 190px; padding: 35px 30px 30px 30px; border: 2px solid rgba(23, 94, 199, 0.50); border-radius: 10px; background: #B7E9FF url(../img/sub/icon_survey01.svg) no-repeat right 30px bottom; box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.08); box-sizing: border-box; }
.onDashReservIn h4 { margin-bottom: auto; font-size: 21px; font-weight: 600; color: #000; }
.onDashReservIn ul > li { display: flex; align-items: center; }
.onDashReservIn ul > li:first-child { margin-bottom: 12px; }
.onDashReservIn ul > li > span { display: block; width: 68px; font-size: 15px; font-weight: 600; color: #666; }
.onDashReservIn ul > li > strong { display: block; width: calc(100% - 68px); font-size: 18px; font-weight: 600; color: #175EC7; }
.onDashInspect { width: 100%; }
.onDashInspectIn { display: flex; flex-direction: column; align-items: start; height: 190px; padding: 35px 30px 30px 30px; border-radius: 10px; background: #EAF6FF url(../img/sub/icon_survey02.svg) no-repeat right 26px bottom; box-sizing: border-box; }
.onDashInspectIn > span { display: inline-block; margin-bottom: 9px; padding: 4px 10px; font-size: 14px; font-weight: 600; border-radius: 12px; color: #175EC7; background-color: #CCE9FF; }
.onDashInspectIn > h4 { margin-bottom: auto; font-size: 20px; font-weight: 800; color: #333; }
.onDashInspectIn > a { display: flex; align-items: center; flex-shrink: 0; padding: 0 15px; font-size: 15px; font-weight: 400; line-height: 35px; border-radius: 5px; color: #fff; background-color: #175EC7; transition: background-color 0.3s; }
.onDashInspectIn > a:hover { background-color: #049AF4; }
.onDashInspectIn > a > i { margin-left: 8px; font-size: 12px; }
.onDashInspectIn.large { flex-direction: row; align-items: center; height: 100px; padding-left: 110px; background: #EAF6FF url(../img/sub/icon_survey02.svg) no-repeat left 20px bottom; background-size: 80px; }
.onDashInspectIn.large > span { margin: 0 14px 0 0; }
.onDashInspectIn.large > h4 { margin: 0 auto 0 0; }
.dashboardLink { border: 1px solid #BABABA; border-radius: 20px; width: 82px; height: 26px; display: flex; align-items: center; color: #7c7c7c; font-size: 14px; justify-content: center; margin-left: 9px; box-sizing: border-box; transition: all 0.3s; }
.dashboardLink > svg { margin-right: 3px; }
.dashboardLink > svg > rect { transition: all 0.3s; }
.dashboardLink:hover { color: #fff; background: #7c7c7c; }
.dashboardLink:hover > svg > rect { fill: #fff; }
.grayTag { border: 1px solid #BABABA; border-radius: 20px; color: #737373; margin-left: 10px; height: 26px; padding: 0 10px; line-height: 24px; font-size: 14px; margin-top: 2px; }
.onDashBodyB h3 { margin-bottom: 20px; font-size: 20px; font-weight: 800; color: #000; }
.onDashBodyTitle { display: flex; justify-content: space-between; width: 100%; }
a.viewAll { color: #888; font-size: 15px; background: url("../img/sub/icon_cross_gray.svg") no-repeat right top; padding-right: 35px; padding-top: 5px; }
a.goDetailPage { margin-bottom: 20px; }
/* 캘린더 */
.onCalendarBox { border: 1px solid #EBEBEB; border-radius: 10px; display: flex; max-height: 635px; }
.onCalendarBox.oneRowContentsMode { flex-wrap: wrap; max-height: none; }
.onCalendarBox .leftBox { flex: 1; background: #f9f9f9; border-right: 1px solid #ebebeb; padding: 32px 32px 80px; }
.onCalendarBox .rightBox { width: 336px; box-sizing: border-box; overflow-y: hidden; height: auto; }
.onCalendarBox .rightBox .onScheduleListsWrap { height: 635px; }
.onCalendarBox .rightBox .eventSection + .onScheduleListsWrap { height: 475px; }
.onCalendarBox .topBox { background: #f9f9f9; padding: 32px 32px 80px; width: 100%; }
.onCalendarBox .btmBox { width: 100%; }
.onCalendarBox .btmBox .onScheduleListsWrap { overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; }
.onCalendarBox .btmBox .onScheduleLists { display: flex; height: auto; }
.onCalendarBox .btmBox .onScheduleLists li { padding: 10px; }
.onCalendarBox .btmBox .onScheduleLists li:first-child { padding-left: 20px; }
.onCalendarBox .btmBox .onScheduleLists li:last-child { padding-right: 20px; }
.onScheduleLists li { padding: 9px 30px; }
.onScheduleLists li:first-child { padding-top: 21px; }
.onScheduleLists li:last-child { padding-bottom: 21px; }
.onScheduleLists li > div.inner { border: 1px solid #eae9e9; border-radius: 10px; background: #F8F8F8; padding: 24px; transition: all 0.3s; }
.onScheduleLists li .scheduleTitle { display: flex; align-items: center; margin-bottom: 20px; }
.onScheduleLists li span.status { width: 48px; height: 20px; border-radius: 20px; color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-right: 6px; }
.onScheduleLists li span.status.statusIng { background: #00BF7B; }
.onScheduleLists li span.status.statusComplete { background: #0042C9; }
.onScheduleLists li span.status.statusIncomplete { background: #E14E4E; }
.onScheduleLists li p.patientName { font-size: 18px; font-weight: 600; }
.onScheduleLists li p.scheduleInfoRow + p.scheduleInfoRow { margin-top: 6px; }
.onScheduleLists li p.scheduleInfoRow .title { color: #666; font-size: 14px; margin-right: 5px; }
.onScheduleLists li p.scheduleInfoRow .content { font-size: 15px; color: #333; }
.onScheduleLists li:hover > div { border: 1px solid #175EC7; background: #fff; box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25); }
/* 오늘의 이벤트 */
.eventSection { background: rgb(255,226,238); background: linear-gradient(135deg, rgba(255,226,238,1) 0%, rgba(255,194,219,1) 100%); margin: 30px auto 0; border-radius: 10px; display: flex; width: calc(100% - 60px); padding: 29px 24px 28px; box-sizing: border-box; overflow: hidden; }
div.eventIcon { position: relative; top: 6px; }
img.cake { position: relative; z-index: 1; }
img.cakeLight { position: absolute; left: 50%; top: -74%; transform: translateX(-50%); }
p.eventText { word-break: break-word; margin-left: 15px; }
p.eventText > span { display: block; color: #CF3674; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
p.eventText > em { font-size: 20px; font-weight: 600; color: #333; }
p.eventText > em > span.name { display: block; }
/* 스케쥴러 달력 */
.onCalendarBox .fc-toolbar-chunk > div { display: flex; }
.fc .fc-button:not(:disabled), .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { cursor: pointer; background: none; border: none; color: #999; box-shadow: none; }
.fc .fc-button-primary:focus { box-shadow: none; }
.fc .fc-button-primary:not(:disabled).fc-button-active:focus, .fc .fc-button-primary:not(:disabled):active:focus { box-shadow: none; }
.fc-icon-chevron-left:hover::before, .fc-icon-chevron-right:hover::before { color: #000; }
.fc-theme-standard .fc-scrollgrid { border: none; }
.fc-theme-standard th { background: #E8E8E8; border: none; border-radius: 10px; }
.fc-theme-standard td { border: none; }
.fc-theme-standard td > div.fc-scrollgrid-sync-inner { border-radius: 10px; transition: all 0.3s; border-radius: 10px; border: 1px solid transparent; }
.fc .fc-col-header-cell-cushion { color: #666; font-size: 17px; padding: 9px 0; }
.fc .fc-daygrid-day-top { flex-direction: row; }
.fc-theme-standard .fc-scrollgrid thead { padding-bottom: 20px; }
.fc .fc-scroller-harness-liquid { margin-top: 20px; }
.fc .fc-toolbar-title { background: url("../img/sub/icon_scheduleCalendar.svg") no-repeat left center; padding-left: 42px; font-size: 24px; display: flex; align-items: center; }
.fc .fc-daygrid-day-number { color: #666; font-size: 18px; transition: all 0.3s; }
.fc .fc-day-sat .fc-daygrid-day-number { color: #ACACAC; }
.fc .fc-day-sun .fc-daygrid-day-number { color: #E96666; }
.fc .fc-daygrid-day.fc-day-today { background: none; }
.fc-h-event { background: none; border: none; }
.fc-h-event .fc-event-main { color: #0042C9; font-weight: 600; }
.fc-h-event .fc-event-title { overflow: visible; white-space: normal; padding: 0 5px; }
.fc .fc-daygrid-day-frame { cursor: pointer; }
.fc-theme-standard td.on > div.fc-scrollgrid-sync-inner { background: #fff; border: 1px solid #0042C9; }
.fc-theme-standard td.on .fc-daygrid-day-number { color: #003C77; }
/* 스케쥴러 달력 */

.onDashInspec { display: flex; flex-direction: column; flex-grow: 1; margin-right: 34px; }
.onDashInspec > ul { display: flex; flex-grow: 1; flex-direction: column; padding: 20px 28px; border-radius: 10px; background-color: #F7F8F9; }
.onDashInspec > ul > li { display: flex; align-items: center; margin-bottom: 13px; white-space: nowrap; }
.onDashInspec > ul > li:last-child { margin-bottom: 0; }
.onDashInspec > ul > li > h3 { flex-shrink: 0; width: 58px; margin-right: 12px; font-size: 14px; font-weight: 600; text-align: center; line-height: 21px; border: 1px solid #E7E7E7; border-radius: 30px; color: #555; box-sizing: border-box; transition: all 0.3s; background-color: #fff; }
.onDashInspec > ul > li > span { margin-right: 12px; font-size: 16px; font-weight: 400; color: #666666; transition: all 0.3s; }
.onDashInspec > ul > li > strong { margin-right: auto; font-size: 16px; font-weight: 600; color: #333; transition: all 0.3s; }
.onDashInspec > ul > li > a { margin-left: 8px; }
.onDashInspec > ul > li:hover > h3 { color: #175EC7; background-color: #DDEEFF; }
.onDashInspec > ul > li:hover > span { color: #175EC7; }
.onDashInspec > ul > li:hover > strong { color: #175EC7; }
/*대규모 조사이력 */
.onInspectLogT { display: flex; align-items: center; height: 35px; margin-bottom: 10px; border-radius: 0 0 5px 5px; background-color: #7C8A9F; }
.onInspectLogT > span { display: block; font-size: 16px; font-weight: 400; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.2); color: #fff; }
/* 각 셀의 넓이 설정 */
.onInspectLogT > span:nth-child(1), .onInspectLogB > ul > li > span:nth-child(1) { width: 10%; } /*추적시기*/
.onInspectLogT > span:nth-child(2), .onInspectLogB > ul > li > span:nth-child(2) { width: 15%; } /*조사명*/
.onInspectLogT > span:nth-child(3), .onInspectLogB > ul > li > span:nth-child(3) { width: 13%; } /*조사기관*/
.onInspectLogT > span:nth-child(4), .onInspectLogB > ul > li > span:nth-child(4) { width: 10%; } /*조사대상*/
.onInspectLogT > span:nth-child(5), .onInspectLogB > ul > li > span:nth-child(5) { width: 12%; } /*날짜*/
.onInspectLogT > span:nth-child(6), .onInspectLogB > ul > li > span:nth-child(6) { width: 10%; } /*설문결과*/
.onInspectLogT > span:nth-child(7), .onInspectLogB > ul > li > span:nth-child(7) { width: 10%; } /*추적관찰 결과지*/
.onInspectLogT > span:nth-child(8), .onInspectLogB > ul > li > span:nth-child(8) { width: 10%; } /*인지검사 결과지*/
.onInspectLogT > span:nth-child(9), .onInspectLogB > ul > li > span:nth-child(9) { width: 10%; } /*자녀용 설문지*/
.onInspectLogT > span:last-child, .onInspectLogB > ul > li > span:last-child { border: none; }
.onInspectLogB > ul > li > p { flex: 1; display: flex; }
.onInspectLogB > ul > li > p > span { flex: 1; text-align: center; display: inline-block; margin: 2px; }
.onInspectLogB > ul { height: 390px; }
.onInspectLogB.autoHeight > ul { height: auto; }
.onInspectLogB > ul > li { display: flex; align-items: center; height: 70px; margin-bottom: 10px; border-radius: 10px; background-color: #F7F8F9; }
.onInspectLogB > ul > li:last-child { margin-bottom: 0; }
.onInspectLogB > ul > li > span { display: block; text-align: center; box-sizing: border-box; }
.onInspectLogB > ul > li > span:nth-child(1) > span, span.tagMonth { display: inline-block; padding: 3px 13px; font-size: 14px; font-weight: 600; border: 1px solid #E7E7E7; border-radius: 30px; background-color: #fff; }
.onInspectLogB > ul > li > span:nth-child(2) { padding: 0 15px; font-size: 16px; font-weight: 400; text-align: left; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onInspectLogB > ul > li > span:nth-child(3) { font-size: 17px; font-weight: 400; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onInspectLogB > ul > li > span:nth-child(4) { font-size: 16px; font-weight: 400; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onInspectLogB > ul > li > span:nth-child(5) { font-size: 16px; font-weight: 400; color: #999; }
.onDashInspec { display: flex; flex-direction: column; flex-grow: 1; margin-right: 34px; }
.onDashInspec > ul { display: flex; flex-grow: 1; flex-direction: column; padding: 20px 28px; border-radius: 10px; background-color: #F7F8F9; }
.onDashInspec > ul > li { display: flex; align-items: center; margin-bottom: 13px; white-space: nowrap; }
.onDashInspec > ul > li:last-child { margin-bottom: 0; }
.onDashInspec > ul > li > h3 { flex-shrink: 0; width: 58px; margin-right: 12px; font-size: 14px; font-weight: 600; text-align: center; line-height: 21px; border: 1px solid #E7E7E7; border-radius: 30px; color: #555; box-sizing: border-box; transition: all 0.3s; background-color: #fff; }
.onDashInspec > ul > li > span { margin-right: 12px; font-size: 16px; font-weight: 400; color: #666666; transition: all 0.3s; }
.onDashInspec > ul > li > strong { margin-right: auto; font-size: 16px; font-weight: 600; color: #333; transition: all 0.3s; }
.onDashInspec > ul > li > a { margin-left: 8px; }
.onDashInspec > ul > li:hover > h3 { color: #175EC7; background-color: #DDEEFF; }
.onDashInspec > ul > li:hover > span { color: #175EC7; }
.onDashInspec > ul > li:hover > strong { color: #175EC7; }
/* 대규모일때 조사 이력 테이블 셀 길이 변경 */
.onDashBodyB.flexibleDashBody .onInspectLogT > span, .onDashBodyB.flexibleDashBody .onInspectLogB > ul > li > span { flex: 1; padding: 0; }
/* 1.6. Survey --------------------------------------------------------------------------------- */
.onSurveyLayout { position: relative; padding: 115px 0; padding-top: 90px; background: url(../img/sub/surveyBg01.jpg); background-position: left top; background-size: contain; }
.onSurveyLayout::before { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; height: 240px; background-color: #0378D2; }
.onSurveyLayout > .onContainer { max-width: 985px; }
.onSurveyLayout input[type=text], .onSurveyLayout input[type=password] { display: inline-block; width: 100%; height: 32px; margin: 0; padding: 0 6px; border: 1px solid #D0E3FF; border-radius: 5px; box-sizing: border-box; background-color: #fff; }
.onSurveyLayout select { display: inline-block; width: 100%; height: 32px; margin: 0; padding: 0 6px; border: 1px solid #D0E3FF; border-radius: 5px; box-sizing: border-box; background-color: #fff; }
.onSurveyLayout input[type=radio], input[type=checkbox] { display: block; width: 20px; height: 20px; }
.onSurveyLayout input[type=submit] { width: 100%; background-color: #232d47; color: white; padding: 6px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; }
.onSurveyLayout input[type=text]:hover, .onSurveyLayout input[type=password]:hover { background: #f5f5f5; }
.onSurveyLayout input[type=submit]:hover { background: #386588; }
.onSurveyLayout textarea { width: 100%; padding: 5px; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
/*Layout*/
.flexBox { display: flex; }
.onTabletShow { display: none; }
#wrap { position: relative; padding: 38px 42px; background-color: #fff; border-radius: 10px; box-shadow: 0px 16px 20px 0px rgba(0, 0, 0, 0.25); }
#wrap > .title { opacity: 0; position: absolute; top: 0; left: 0; }
#header { position: absolute; left: 0; right: 0; bottom: calc(100% + 26px); }
#header h1 { padding-left: 38px; font-size: 24px; font-weight: 600; color: #fff; background: url(../img/sub/icon_surveyTitle.svg) no-repeat left center; background-size: 28px; }
#header a { position: absolute; right: 10px; top: -3px; color: #fff; z-index: 2}
#header a img { width: 35px}
#header > .onContainer { display: flex; align-items: center; max-width: 985px; padding: 0; }
#container > h3 { margin-bottom: 12px; font-size: 20px; font-weight: 600; color: #333; }
#container > h3 > i { display: inline-block; margin-right: 7px; font-size: 11px; font-weight: 800; vertical-align: 3px; color: #175EC7; }
#container > p { margin: 20px 0; }
#container .ui-datepicker-trigger { position: static; transform: translateY(0); margin: 0 0 0 -38px; }
#container button { display: inline-block; padding: 0 12px; height: 32px; margin-left: 7px; border-radius: 5px; color: #fff; background-color: #9296A8; transition: all 0.3s; }
#container button:hover { background-color: #175EC7; }
.top-box { width: 100%; }
#header.fixed { position: fixed; z-index: 1000; top: 0; bottom: auto; background: #fff; padding: 10px; box-shadow: 0px 10px 15px 0px rgba(49, 111, 202, 0.20); }
#header.fixed > .onContainer { padding: 0 30px; }
#header.fixed .top-box h1 { color: #000; font-size: 20px; padding-left: 0; }
#header.fixed .surveyTime > span.timeCon { color: #000; }
.triangle { position: relative; margin: 0 auto; display: block; height: 12px}
.info-from { margin-bottom: 30px; border-radius: 10px; background-color: #FFF389; overflow: hidden; }
.info-from ul { display: flex; align-items: center; height: 60px; }
.info-from ul li { display: flex; align-items: center; width: 100%; height: calc(100% - 5px); padding-left: 22px; box-sizing: border-box; }
.info-from ul li:first-child { border-right: 1px dashed #B8B8B8; }
.info-from label { display: flex; align-items: center; margin-right: 12px; font-size: 16px; font-weight: 400; color: #666666; }
.info-from label img { margin-right: 8px; }
.info-from span { font-size: 18px; font-weight: 600; color: #000; }
.info-from i { display: inline-block; line-height: 35px; width: 25px; height: 25px; }
.bd-bar { height: 5px; margin: 32px -42px; background: #F1F1F1; border-radius: 2px; text-indent: -5000px; }
.bd-bar.dash { height: 0; margin: 0 -42px; border-bottom: 1px dashed #CFCFCF; background: transparent; border-radius: 0; }
.info-form2 { margin: 30px 0 50px 0; padding: 17px 20px; border-radius: 10px; background-color: #DCEAFF; }
.info-form2 h3 { margin-bottom: 16px; padding: 0 0 15px 3px; font-size: 20px; font-weight: 800; border-bottom: 1px solid #fff; color: #245399; }
.info-form2 > ul {
}
.info-form2 > ul > li { margin-bottom: 20px; }
.info-form2 > ul > li:last-child { margin-bottom: 0; }
.info-form2 > ul > li > label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; color: #333; }
.info-form2 > ul > li > label span { font-size: 15px; font-weight: 400; color: #555; }
.info-form2 > ul > li > label::before { display: inline-block; content: "·"; margin-right: 4px; }
.info-form2 > ul > li span { display: flex; gap: 7px; align-items: center; }
.info-form2 > ul > li span > span { margin: 0 4px; }
.info-form2 > ul > li > ul { padding-left: 8px; }
.info-form2 > ul > li > ul > li { display: flex; align-items: center; margin-bottom: 12px; white-space: nowrap; }
.info-form2 > ul > li > ul > li > label { display: flex; align-items: center; color: #666; }
.info-form2 > ul > li > ul > li > label > span > input { margin-right: 8px; }
.info-form2 > ul > li > ul > li > span { width: 80px; flex-shrink: 0; }
.btn-box2 { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; width: 1310px; height: 70px; max-width: 100%; padding: 0 40px; border-radius: 30px 30px 0 0; background-color: #175EC7; box-shadow: 0px -10px 15px 0px rgba(49, 111, 202, 0.20); overflow: hidden; box-sizing: border-box; }
.btn-box2 span { margin-right: auto; font-size: 18px; font-weight: 600; color: #fff; }
.btn-box2 button { width: 125px; height: 37px; font-size: 16px; font-weight: 600; border: 1px solid #fff; transition: all 0.3s; }
.btn-box2 button:hover { border-color: #F7D02D; color: #F7D02D; }
.btn-blue2 { line-height: 32px; margin-top: 5px; padding: 0px 30px; border: #fff 2px solid; border-radius: 30px; background: none; color: #fff; font-weight: bold}
.servey { margin: 20px auto; padding: 20px 22px; border: 2px solid #ECECEC; border-radius: 10px; overflow: hidden; transition: border-color 0.3s; }
.servey:hover { border-color: #175EC7; }
.servey input[type=text] { border-color: #E1E1E1; }
.servey h4 { margin-bottom: 12px; font-size: 20px; line-height: 1.34; font-weight: 600; color: #000; }
.servey p { margin-bottom: 11px; font-size: 17px; font-weight: 400; color: #333333; }
/* 설문페이지 내 세션시간 */
.surveyTime { display: flex; align-items: center; }
.surveyTime > span.timeCon { color: #fff; margin-right: 6px; width: 40px; }
.surveyTime > button.sessionReset { cursor: pointer; }
/* 라디오 설문 */
.servey ul { margin: 12px 0 0 0; }
.servey ul li { margin-bottom: 15px; font-size: 16px; font-weight: 400; }
.servey ul li input[type=text] { margin: 0 8px; }
.servey ul li label { color: #666; }
.servey ul li label div { display: inline-block; }
.servey ul li label span { display: inline-block; margin-right: 4px; vertical-align: -4px; }
.servey ul li:last-child { margin-bottom: 0; }
.servey table { width: 100%; border-collapse: collapse; }
.servey table tbody { border-top: 1px solid #E1E1E1; }
.servey table th { padding: 7px 0; font-size: 15px; font-weight: 400; color: #333; border: none; background-color: #F2F2F2; }
.servey table td { position: relative; padding: 7px 10px; font-size: 15px; font-weight: 400; text-align: center; color: #333; border-bottom: 1px solid #E1E1E1; }
.servey table td:last-child::after { display: none; }
.servey table td::after { display: block; content: ""; position: absolute; top: 5px; bottom: 5px; right: 0; border-right: 1px dashed #E1E1E1; }
.servey table td strong { display: block; margin: 4px 0; font-size: 16px; font-weight: 600; color: #333; }
.servey table td span { display: block; }
.servey table td span.foodThing { display: inline-block; margin-left:15px;}
.servey table td label { display: inline-block; text-align: center; }
.servey table td label strong { display: inline; }
.servey table td label div { display: inline-block; }
.servey table td input[type=radio], input[type=checkbox] { display: inline-block; }
.servey table td input[type=text] { margin: 0 5px; }
.onCheckBoxWrap { display: flex; gap: 20px; margin-bottom: 10px; }
.onCheckBoxWrap > * { display: flex; gap: 5px; }
.servey table td.al { text-align: left; }
.servey table td.al label { text-align: left; }
.servey table td.al label input[type=radio], .servey table td.al label input[type=checkbox] { margin-right: 4px; vertical-align: -4px; }
.servey table td ul label { align-items: center; text-align: left; }
.servey table td ul label input[type=radio], .servey table td ul label input[type=checkbox] { margin-right: 4px; }
.color-gray { border-bottom: #ccc 1px solid; background: #f5f5f5}
.border-gray { border: #ccc 1px solid}
/* .border-gray2{border:#e5e5e5 1px solid} */

.choice-red { background: #ffb5af; color: #fff}
.choice-blue { color: #175EC7; }
.choice-gray { background: #eee; color: #000}
/* 설문 Common */


/* None */
.mg-no { margin: 0 !important}
.pd-no { padding: 0 !important}
.pd-top-no { padding-top: 0 !important; padding-bottom: 0 !important}
.bg-no { background: none !important}
.bd-no { border: none !important}
/* box behavior */
.fl-left { float: left !important}
.fr { float: right !important}
.cb { clear: both !important}
.hide { display: none !important}
.hidden { visibility: hidden; position: absolute; top: -9999px; left: -9999px; font-size: 0; width: 0; height: 0; line-height: 0; background: none}
/* sizing */
.pdXs { padding-top: 12px !important}
.pdS { padding-top: 22px !important}
.pdXl { padding-top: 50px !important}
.mt0 { margin-top: 0 !important}
.mt6 { margin-top: 6px !important; }
.mtXs { margin-top: 12px !important}
.mtS { margin-top: 22px !important}
.mtXl { margin-top: 50px !important}
.w100 { width: 100% !important}
.w95 { width: 95% !important}
.w85 { width: 85% !important}
.w75 { width: 75% !important}
.w65 { width: 65% !important}
.w55 { width: 55% !important}
.w45 { width: 45% !important}
.w100 { width: 100% !important}
.w90 { width: 90% !important}
.w80 { width: 80% !important}
.w70 { width: 70% !important}
.w60 { width: 60% !important}
.w50 { width: 50% !important}
.w40 { width: 40% !important}
.w35 { width: 35% !important}
.w25 { width: 25% !important}
/* .w30{width:30% !important} */
.w20 { width: 20% !important}
.w15 { width: 15% !important}
.w10 { width: 10% !important}
/* responsible */


/* 1.7. Consent -------------------------------------------------------------------------------- */
#contnet { position: relative; }
.survey-con > strong { display: block; margin-bottom: 24px; font-size: 17px; font-weight: 400; color: #175EC7; }
.bullet_01 { margin-bottom: 20px; padding-left: 20px; font-size: 17px; font-weight: 600; text-indent: -10px; color: #000; }
.bullet_01::before { display: inline-block; content: "Q"; margin-right: 7px; font-weight: 800; color: #175EC7; }
.bullet_01 > span { display: block; margin-top: 10px; font-size: 15px; font-weight: 400; color: #175EC7; text-indent: 0; }
.bullet_01 > strong { color: #175EC7; line-height: 24px; }
.agreeAreaBox { margin-bottom: 24px; }
.agreeArea { padding: 22px 0; }
.agreeArea > li { display: flex; align-items: center; margin-bottom: 16px; white-space: nowrap; }
.agreeArea > li:last-child { margin-bottom: 0; }
.agreeArea > li > strong { display: block; flex-shrink: 0; width: 100px; font-size: 16px; font-weight: 400; color: #333; }
.agreeArea > li > input[type=text], .agreeArea > li > input[type=password] { width: 167px; height: 33px; border: 1px solid #E1E1E1;; }
.agreeArea > li > span { margin: 0 6px; }
.agreeArea.right {
}
.agreeArea.right > li { justify-content: end; }
.agreeArea.right > li > strong { width: auto; margin-right: 14px; }
.signArea { display: flex; justify-content: center; align-items: center; width: 237px; height: 126px; border-radius: 5px; border: 1px solid #E1E1E1; }
.signArea > span { font-size: 16px; font-weight: 400; color: #888888; }
.agreeBottom { position: absolute; bottom: 0; left: 0; }
.agreeBottom > img { margin: 0 14px 20px 0; margin-bottom: 24px; }
.agreeBottom > strong { display: block; font-size: 16px; font-weight: 600; color: #175EC7; }
.agreeDay { font-size: 17px; text-align: center; font-weight: 600; color: #000; }
.onConsentBox { margin-bottom: 20px; padding: 21px 25px; border-radius: 10px; background-color: #F7F8F9; }
.onConsentBox > h3 { margin-bottom: 15px; font-size: 18px; font-weight: 600; }
.onConsentBoxIn { margin-bottom: 21px; padding: 24px 24px; background-color: #fff; }
.onConsentBoxIn > h4 { margin-bottom: 8px; font-size: 17px; font-weight: 600; color: #000; }
.onConsentBoxIn > p { margin-bottom: 24px; font-size: 16px; font-weight: 400; line-height: 1.4; color: #333; }
.onConsentBoxIn > p:last-child { margin-bottom: 0; }
.onConsentBoxIn > p > span { display: block; height: 8px; }
.onConsentBottom { text-align: center; }
.onConsentBottom .onField { margin-right: 20px; }
.onConsentBottom .onField:last-child { margin-right: 0; }
.onConsentBottom .onField input { margin-right: 4px; }
/* 2. Main ------------------------------------------------------------------------------------- */


/* 3. Component -------------------------------------------------------------------------------- */
/* 제목 */
.onT1 { margin-bottom: 20px; font-size: 30px; font-weight: 800; }
.onT1 .mainTit {
}
.onT1 .subTit { color: #666; font-size: 17px; font-weight: 500; }
.onT2 { margin: 26px 0 15px 0; font-size: 30px; }
.onT3 { margin: 15px 0 12px 0; font-size: 24px; }
/* 문단 */
.onP { margin-bottom: 12px; font-size: 17px; font-weight: 400; color: #666; }
.onP strong { font-size: 17px; font-weight: 600; color: #175EC7; }
.onTxt { color: #444; font-size: 18px; margin-bottom: 20px; }
.onTxt2 { color: #000; font-size: 17px; margin-bottom: 10px; }
p.notify { margin-top: 30px; }
p.notify span { display: block; color: #666; font-size: 16px; margin-top: 2px; }
.grayTxt01 { color: #666666; font-size: 17px; }
.grayTxtList { color: #666; font-size: 15px; margin-bottom: 40px; }
/* 회원가입 페이지 문단 */
.onSignupTit1 { font-weight: 600; margin-bottom: 4px; margin-top: 30px; }
.onSignupTit2 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.onGrayTxt { color: #666; font-size: 17px; }
.oncheckBox { margin-top: 17px; margin-bottom: 30px; border-radius: 10px; border: 1px solid #E1E9F1; background: #F7F8F9; height: 60px; display: flex; align-items: center; padding: 0 30px 0 16px; transition: all 0.3s; }
.oncheckBox + .oncheckBox { margin-top: -14px; }
.oncheckBox .onField { margin-right: auto; }
.oncheckBox input[type="checkbox"] { position: absolute; width: 0; height: 0; opacity: 0; }
.oncheckBox input[type="checkbox"] + span { display: inline-block; padding-left: 26px; color: #444; font-weight: 600; cursor: pointer; }
.oncheckBox input[type="checkbox"] + span:before { position: absolute; left: 0; top: 0; bottom: 0; cursor: pointer; margin: auto 0; content: ""; width: 18px; height: 18px; border-radius: 5px; border: 1px solid #c8c8c8; background-color: #ffffff; box-sizing: border-box; transition: box-shadow 0.3s; }
.oncheckBox input[type="checkbox"]:checked + span:before { border-color: #0049BE; background: url("../img/common/icon_check.svg") no-repeat center center #0049BE; }
.oncheckBox .agreeLink { color: #175EC7; font-size: 15px; padding-right: 12px; background: url("../img/sub/icon_linkblue.svg") no-repeat right center; }
.oncheckBox.allChckWrap { border: 1px solid #000; background-color: #fff; }
.oncheckBox.allChckWrap input[type="checkbox"] + span:before { box-shadow: 0 0 0 1px inset #000000; border: 1px solid #000; }
.oncheckBox.allChckWrap input[type="checkbox"]:checked + span:before { border-color: #0049BE; box-shadow: 0 0 0 1px inset #0049BE; }
/* 검색박스 */
.onSearch { padding: 15px 24px; border: 0; border-radius: 10px; background-color: #F7F8F9; }
.onSearchBtn { width: 38px; min-width: 0; height: 38px; border-radius: 5px; background-color: #175EC7; }
.onSearchBtn > i { margin: 0; font-size: 16px; }
/* 기본 게시판 */
.onTableHead { margin-bottom: 10px; }
.onTable { table-layout: fixed; overflow: hidden; }
.onTable > thead > tr > th { padding: 15px; font-size: 15px; background-color: #F7F8F9; font-weight: 600; }
.onTable > tbody > tr > td { padding: 16px; font-size: 17px; color: #444; }
.flexTableWrap { margin-bottom: 20px; }
.onTable.flexTable { margin-bottom: 20px; }
.listTableWrap { overflow-x: scroll; }
.onTable.listTable { min-width: 510px; margin-bottom: 20px; }
.onTable.listTable th, .onTable.listTable td { padding: 5px 16px; height: 47px; box-sizing: border-box; }
.onBoardViewBody > img { display: block; margin: 30px auto; max-width: fit-content; width: 100%; }
/* Tab */
.onTabSub { margin: 40px 0 26px; overflow: auto; }
.onTabSub > li { margin-right: 10px; }
.onTabSub > li:last-child { margin-right: 0; }
.onTabSub > li a { padding: 0 12px; font-size: 17px; font-weight: 400; line-height: 30px; border-radius: 16px; border: 1px solid #E8E8E8; background-color: #F2F2F2; }
.onTabSub > li.on a, .onTabSub > li a:hover { border-color: transparent; color: #fff; box-shadow: none; background-color: #00A4F1; }
/* Tooltip */
.onTooltip { margin-left: 4px; height: 20px; }
.onTooltipHead > a { position: absolute; top: 10px; right: 10px; font-size: 16px; color: #333; background: #8a8a8a; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }
.onTooltipHead > a .icon-close { font-weight: 600; }
.onTooltipBox { display: none; z-index: 10; min-width: 420px; position: absolute; top: calc(100% + 8px); font-weight: 500; color: #333; border-radius: 5px; background-color: #fff; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); padding: 10px 42px 10px 12px; box-sizing: border-box; }
.onTooltip.on .onTooltipBox { display: block; }
/* Step */
.onStep { position: relative; display: flex; width: 100%; margin-bottom: 30px; line-height: 21px; overflow: hidden; }
.onStep > li { position: relative; display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 20px; font-size: 15px; font-weight: 500; text-align: center; vertical-align: middle; border-top: 1px solid #E1E9F1; border-bottom: 1px solid #E1E9F1; color: #888; background-color: #F7F8F9; box-sizing: border-box; }
.onStep > li:after { position: absolute; content: ""; top: 0; right: -14px; width: 32px; height: 50px; background: url(../img/sub/icon_stepOff.svg) no-repeat center center; z-index: 10; }
.onStep > li b { font-weight: 600; font-size: 17px; }
.onStep > li .mobile { display: none; }
.onStep > li span { width: 22px; height: 22px; background: url(../img/sub/icon_checkOff.svg) no-repeat center center/100%; }
.onStep > li.on { background: #fff; font-weight: 500; border-color: #175EC7; color: #175EC7; z-index: 10; font-weight: 600; }
.onStep > li.on span { width: 22px; height: 22px; background: url(../img/sub/icon_checkOn.svg) no-repeat center center/100%; }
.onStep > li.on::after { position: absolute; content: ""; top: -1px; right: -16px; width: 33px; height: 52px; background: #F7F8F9 url(../img/sub/icon_stepOn.svg) no-repeat 0px center; border-top: 1px solid #E1E9F1; border-bottom: 1px solid #E1E9F1; background-size: cover; box-sizing: border-box; }
.onStep > li.on:first-child { border-left: 1px solid #175EC7; }
.onStep > li:first-child { border-left: 1px solid #e1e1e1; }
.onStep > li:nth-child(2), .onStep > li:nth-child(3) { padding-left: 30px; }
.onStep > li:nth-child(2).on span, .onStep > li:nth-child(3).on span { margin-right: 0px; }
.onStep > li:nth-child(2).on::before, .onStep > li:nth-child(3).on::before, .onStep > li:last-child.on::before { position: absolute; content: ""; top: -1px; left: -20px; width: 32px; height: 50px; background: #fff url(../img/sub/icon_stepOn_before.svg) no-repeat -1px center; border-top: 1px solid #2D3D8F; border-bottom: 1px solid #2D3D8F; }
.onStep > li:last-child { border-right: 1px solid #E1E9F1; padding-left: 32px; border-color: #E1E9F1; }
.onStep > li:last-child.on { border-color: #2D3D8F; }
.onStep > li:last-child::after { display: none; }
.onStep > li.done { color: #175EC7; font-weight: 600; }
.onStep > li.done span { background: url(../img/sub/icon_checkOn.svg) no-repeat center center/100%; margin-right: 0; }
.onStep.step3 { width: 100%; }
.onStep.step3 > li { width: 33.33%; }
.onStep.step4 { width: 100%; }
.onStep.step4 > li { width: 25%; }
.onStep.step5 { width: 100%; }
.onStep.step5 > li { width: 20%; }
/* FAQ 게시판 */
.onFaq { border-top: 1px solid #333; }
.onFaq > li { border-bottom: 1px solid #E1E1E1; }
.onFaq > li > a { display: flex; align-items: center; padding: 18px 16px; font-size: 17px; font-weight: 600; color: #666; }
.onFaq > li > a > span { margin: 0 12px 2px 0; }
.onFaq > li > a > strong { flex-shrink: 0; min-width: 85px; padding: 0 5px; margin-right: 10px; line-height: 28px; font-size: 15px; text-align: center; border: 1px solid #E5D6D6; border-radius: 30px; transition: all 0.3s; box-sizing: border-box; font-weight: 600;}
.onFaq > li > a > i { margin-left: auto; font-size: 14px; }
.onFaqIn { display: flex; padding: 18px 16px; border-top: 1px solid #E1E1E1; background-color: #F8F8F8; }
.onFaqIn > span { margin-right: 12px; }
.onFaqIn p { font-size: 16px; font-weight: 400; color: #444; }
.onFaqIn p > strong { display: block; margin-bottom: 10px; font-size: 17px; font-weight: 600; color: #000; }
.onFaqIn a { color: #ffa516;  }
.onFaqIn img { max-width: 650px; }
.onFaqIn a:hover { text-decoration: underline; }
.onFaq > li.on > a > strong, .onFaq > li > a:hover > strong { border-color: #ffa516; }
.onFaq > li.on > a, .onFaq > li > a:hover { color: #ffa516; }
.onFaq > li.on > a > i { transform: rotateX(180deg); }
.onFaqIn.white { background: #fff; border-top: none; }
.onFaqIn.flexColumn { flex-direction: column; gap: 12px; }
.faqBox { border: 1px solid #e1e1e1; border-radius: 10px; padding: 24px 30px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
.faqBox .faqBoxTit { font-size: 17px; font-weight: 600; }
.faqBox .faqBoxContxt {color: #666;font-size: 15px;position:relative;padding-left: 10px;}
.faqBox .faqBoxContxt:before {content:"";position: absolute;width: 3px;height: 3px;background: #666;left: 0;top: 9px;border-radius: 50%;}
.onTableCount { font-size: 15px; font-weight: 400; color: #444; }
.onTableCount > strong { display: inline-block; margin-left: 4px; font-weight: 400; color: #E13D49; }
.onPostTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onNotice strong { display: inline-flex; align-items: center; height: 21px; margin-right: 12px; padding: 0 5px; font-size: 15px; font-weight: 400; border: 1px solid #EE1E1E; border-radius: 15px; color: #EE1E1E; box-sizing: border-box; }
.onNotice .onPostTitle { font-weight: 600; color: #000; }
.onNotice span { display: inline-block; margin-left: 8px; color: #FF0000; }
/* 보고서 게시판 */
.onReport { margin-bottom: 60px; }
.onReport > li { position: relative; margin-bottom: 24px; padding: 23px 30px; border: 1px solid #E1E1E1; border-radius: 10px; background-color: #F7F8F9; transition: all 0.3s; }
.onReport > li:last-child { margin-bottom: 0; }
.onReport > li > h3 > a { display: -webkit-box; width: calc(100% - 200px); margin-bottom: 16px; font-size: 20px; font-weight: 600; line-height: 1.4; color: #333; transition: all 0.3s; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; }
.onReport > li > dl { display: flex; flex-wrap: wrap; line-height: 1.4; }
.onReport > li > dl > dt { width: 38px; font-size: 15px; font-weight: 600; color: #555; }
.onReport > li > dl > dd { width: calc(100% - 42px); font-size: 15px; font-weight: 400; color: #aaa; }
.onReport > li > a { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); height: 26px; }
.onReport > li > a > i { display: inline-block; margin-right: 6px; font-size: 13px; }
.onReport > li:hover { border-color: #175EC7; background-color: #fff; }
.onReport > li:hover > h3 > a { color: #175EC7; }
/* 갤러리형 게시판 */
.onGallery { margin-bottom: 50px; }
.onGallery > ul { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.onGallery > ul > li { width: calc((100% - 4%) / 3); margin-bottom: 25px; padding-bottom: 8px; overflow: hidden; box-shadow: none; margin-right: 2%; }
.onGallery > ul > li:nth-child(3n) { margin-right: 0; }
.onGallery > ul > li > a { border-radius: 10px; overflow: hidden; border: 1px solid #efefef; background: none; }
.onGallery > ul > li > a.noImg { background-color: #f1f1f1; background: url(/assets/images/noImg.png); background-size: 100%; background-position: center center; }
.onGallery > ul > li > a:before { padding-bottom: 56%; }
.onGallery > ul > li > a > img { object-fit: cover; }
.onGallery > ul > li > h4 { margin: 0; }
.onGallery > ul > li > h4 > a { display: block; color: #333; font-size: 18px; font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onGallery > ul > li > h4 > a:hover, .onGallery > ul > li > h4 > a:focus { color: #00459E; }
.onGallery > ul > li > strong { display: inline-block; color: #2D3D8F; font-size: 15px; font-weight: 600; margin: 0 6px 4px 0; }
.onGallery > ul > li > span.viewCount { font-size: 14px; font-weight: 400; color: #666666; }
/* 페이징 */
.onPaging > li { font-size: 17px; font-weight: 600; }
.onPaging > li:hover { color: #0047C1; }
.onPaging > li.icon:hover { font-weight: 800; color: #0047C1; background-color: transparent; }
/* 버튼 */
.btnS_gray, .btnM_gray, .btnL_gray { background-color: #777C97; }
.btnS_gray:hover, .btnM_gray:hover, .btnL_gray:hover { border-color: #175EC7; color: #fff; background-color: #175EC7; }
.btnS_gray.text_white:hover, .btnS_gray.text_white:focus { color: #fff; }
.btnS_blue, .btnM_blue, .btnL_blue { background-color: #175EC7; }
.btnS_blue:hover, .btnM_blue:hover, .btnL_blue:hover { border-color: #049AF4; color: #fff; background-color: #049AF4; }
.btnS_navy, .btnM_navy, .btnL_navy { background-color: #152C5C; color: #fff; }
.btnS_navy:hover, .btnM_navy:hover, .btnL_navy:hover { border-color: #1F3D7B; color: #fff; background-color: #1F3D7B; }
.btn_darkGray { background-color: #636E81; display: inline-flex; justify-content: center; align-items: center; height: 34px; color: #fff; font-size: 14px; border-radius: 5px; box-sizing: border-box; transition: all 0.3s; padding: 0 14px; cursor: pointer; }
.btn_darkGray:hover { background-color: #175EC7; }
.btnGroup.btnSpace > * { margin-right: 18px; }
.btnGroup.btnSpace > *:last-child { margin-right: 0; }
.btnMarginBtm { margin-bottom: 5px; }
/* 컬러 */
.text_white { color: #fff; }
.text_blue { color: #175EC7; }
.text_red { color: #FF0000; }
/* 폼 */
.onField input[type="text"], .onField input[type="password"] { border: none; border-radius: 5px; }
.onSearch .onSearchForm { width: 100%; }
.onSearch.ac .onSearchForm .onFieldRow { justify-content: center; }
.onSearch.ac .onSearchForm .onFieldCol { justify-content: center; }
.onSearch.ac .onField { width: 100%; max-width: 740px; }
/* 입력형식의 테이블 */
.inputTable .onField select { background: #fff url("../img/common/icon_selectArrow.svg") calc(100% - 10px) center no-repeat; appearance: none; height: 32px; padding: 0 35px 0 10px; border-radius: 5px; border: 1px solid #e1e1e1; font-size: 16px; color: #666; width: 100%; }
.inputTable .onField select:disabled { background: #E3E3EF; border: none; appearance: none; color: #666666; }
.inputTable .onField input[type="text"]:disabled { border-radius: 3px; border: 1px solid #E1E1E1; background: #EAEAEA; opacity: 0.5; }
.inputTable .onField input[type="text"], .inputTable .onField input[type="password"], .inputTable .onField input[type="number"] { width: 100%; max-width: 180px; height: 32px; padding-left: 8px; font-size: 16px; font-weight: 400; border-radius: 5px; border: 1px solid #e1e1e1; color: #666; background-color: #ffffff; box-sizing: border-box; }
.inputTable .onField.onInputFull input { width: 100%; max-width: 100%; }
.borderedInputWrap { max-width: 400px; margin: 0 auto; text-align: left; }
.borderedInputWrap .borderedInput { margin-bottom: 4px; margin-top: 14px; }
.borderedInputWrap .noti { font-size: 15px; }
.borderedInput { width: 100%; max-width: 400px; height: 45px; padding-left: 8px; font-size: 16px; font-weight: 400; border-radius: 5px; border: 1px solid #e1e1e1; color: #666; background-color: #ffffff; box-sizing: border-box; margin-top: 30px; margin-bottom: 15px; }
.inputTable > tbody > tr > td { padding: 5px 16px; border-bottom: 1px solid #d7d7d7; }
.inputTable > tbody > tr > th { padding: 5px 16px; border-bottom: 1px solid #d7d7d7; }
.inputTable > tbody > tr > td > * { margin-right: 6px; }
.inputTable > tbody > tr > td > *:last-child { margin-right: 0; }
.inputTable span { font-size: 16px; color: #666; }
.inputTable .inputNotify { font-size: 14px; color: #666; }
.inputTable .onField .inputMini, .inputTable .onField input.inputMini { width: 57px; }
.inputTable .onField select.inputMini { width: 72px; }
.inputTable .onField .inputXsml, .inputTable .onField input.inputXsml { max-width: 100px; }
.inputTable .onField .inputSml, .inputTable .onField input.inputSml { width: 120px; }
.inputTable .onField .inputMdm, .inputTable .onField input.inputMdm { width: 320px; max-width: 320px; }
.emailInputWrap { display: none; }
.inputTable .onField input[type="radio"] { position: absolute; }
.inputTable .onField input[type="radio"] + span { display: inline-block; margin-right: 12px; padding-left: 23px; color: #555555; }
.inputTable .onField input[type="radio"] + span:before { position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; content: ""; width: 17px; height: 17px; border-radius: 50%; border: 1px solid #999999; background-color: #ffffff; box-sizing: border-box; transform: scale(1.1); }
.inputTable .onField input[type="radio"]:focus + span:before { border: 2px solid #0049BE; }
.inputTable .onField input[type="radio"]:checked + span { color: #0049BE; }
.inputTable .onField input[type="radio"]:checked + span:after { position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; content: ""; width: 17px; height: 17px; border-radius: 50%; transform: scale(0.7); background-color: #0049BE; }
.inputTable .tdFlexBox { display: flex; flex-wrap: wrap; align-items: center; }
.inputTable [class ^= "btnS_"] { height: 32px; }
.inputTable input[type="checkbox"] { position: absolute; width: 0; height: 0; opacity: 0; }
.inputTable input[type="checkbox"] + span { display: inline-block; padding-left: 23px; }
.inputTable input[type="checkbox"] + span:before { position: absolute; left: 0; top: 0; bottom: 0; cursor: pointer; margin: auto 0; content: ""; width: 18px; height: 18px; border-radius: 5px; border: 1px solid #c8c8c8; background-color: #ffffff; box-sizing: border-box; transition: box-shadow 0.3s; }
.inputTable input[type="checkbox"]:checked + span:before { border-color: #0049BE; background: url("../img/common/icon_check.svg") no-repeat center center #0049BE; }
.inputTable input[type="checkbox"]:checked + span { color: #0049BE; }
.inputTable .onField select { background: #fff url("../img/common/icon_selectArrow.svg") calc(100% - 10px) center no-repeat; appearance: none; height: 32px; padding: 0 35px 0 10px; border-radius: 5px; border: 1px solid #e1e1e1; font-size: 16px; color: #666; width: 100%; }
/* 파일업로드 관련 */
.uploadBox { display: flex; align-items: center; margin-bottom: 14px; flex-wrpa: wrap; }
.uploadBox > h2 { font-size: 20px; font-weight: 600; }
.uploadBox > button.uploadFileBtn { width: 70px; height: 32px; cursor: pointer; margin-left: 16px; }
.onFileUploadView { display: inline-flex; align-items: center; padding: 0 18px; color: #283C82;; box-sizing: border-box; }
.onFileUploadView i { display: block; margin-right: 7px; font-size: 15px; font-weight: 600; color: #283C82; }
.onFileUploadView p { margin-right: 5px; }
.onFileUploadView .icon-close { margin-right: 0; color: #000; opacity: 0.3; cursor: pointer; }
.onFileUploadView input { display: block; margin-right: 0; font-size: 16px; font-weight: 400; color: #283C82; background: #fff; }
.onFileUploadList { margin-top: 12px; }
.onFileUploadList > li { display: flex; flex-wrap: wrap; margin-bottom: 12px; border: 1px solid #d9d9d9; border-radius: 6px; padding: 10px; }
.onFileUploadList > li .onFileUploadView { padding-left: 0 ; width: 100%; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: -5px; }
.onFileUploadList > li .onFileUploadView p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 서명관련 */
.onToday { text-align: center; font-size: 20px; margin-bottom: 60px; font-weight: 600; }
.signBox { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 130px; }
.signBox > p { color: #030303; font-size: 17px; margin-right: 30px; }
.signBox > p.title { font-weight: 600; margin-right: 90px; }
.signBox > button.signBtn { width: 83px; height: 32px; cursor: pointer; }
/* 완료페이지 콘텐츠 */
.noMarginTop { margin-top: 0; }
.confirmBox { margin-top: 40px; border-radius: 10px; border: 1px solid #F1F1F1; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05); text-align: center; padding: 80px 0 114px; }
.confirmBox > p.title { color: #1e1e1e; font-size: 30px; font-weight: 600; padding-left: 47px; background: url("../img/sub/icon_satisfy.svg") no-repeat left center; display: inline-block; margin-bottom: 27px; }
.confirmBox > p.title.noIcon { background: none; padding-left: 0; }
.confirmBox > p.subTxt { color: #555; font-size: 17px; }
.subTxtLists { width: fit-content; margin: 0 auto; text-align: left; }
.subTxtLists > li { align-items: center; justify-content: center; color: #333; margin-bottom: 10px; font-size: 19px; }
.subTxtLists > li > .userTag { border-radius: 20px; padding: 2px 12px; font-size: 15px; font-weight: 600; margin-right: 5px; }
.subTxtLists > li > .userTag.green { color: #12A47A; border: 2px solid #12A47A; }
.subTxtLists > li > .userTag.blue { color: #175EC7; border: 2px solid #175EC7; }
/* 콘텐츠 박스 */
.onConBox { margin-bottom: 50px; }
/* 이미지 박스 */
.onImgBox { margin: 20px 0; padding: 0; overflow-x: auto; }
.onImgBox img { max-width: 100%; min-width: 600px; border-radius: 20px; }
.onImgBox.mapImg { background: #EEF5FF; padding: 42px; box-sizing: border-box; border-radius: 10px; }
/* 주석 */
.onComment { margin: 6px 0 20px; margin-bottom: 20px; }
.onComment > li { display: flex; font-size: 15px; font-weight: 400; }
.onComment > li > span { display: block; margin-right: 4px; white-space: nowrap; color: #175EC7; }
.onComment > li > p { color: #666; }
.onComment > strong { position: absolute; top: 0; left: 0; padding-left: 6px; font-size: 14px; font-weight: 500; color: #00459E; }
.onComment > strong::before { position: absolute; top: 5px; left: 0; content: ""; display: inline-block; width: 2px; height: 12px; background-color: #00459E; }
.onComment > ul { margin-left: 40px; font-size: 14px; color: #666666; }
.onComment > ul > li { display: flex; }
.onComment > ul > li > .marker { display: block; margin-right: 2px; }
/* 4. Contents -------------------------------------------------------------------------------- */
/* 코챈스란? */
.onKochensIntro { display: flex; align-items: center; margin-bottom: 62px; }
.onKochensIntroText { max-width: 500px; padding-right: 40px; }
.onKochensIntroText > h2 { margin-bottom: 20px; font-size: 30px; font-weight: 600; color: #1E1E1E; }
.onKochensIntroText > p { margin-bottom: 20px; font-size: 17px; font-weight: 400; color: #666; }
.onKochensIntroText > p > strong { font-size: 18px; font-weight: 600; color: #175EC7; }
.onKochensIntroText > p:last-child { margin-bottom: 0; }
.onKochensIntroImg { flex-grow: 1; text-align: center; }
.onKochensIntroImg > img { max-width: 100%; }
.onKochensBox { margin-bottom: 60px; padding: 40px 60px; border-radius: 20px; }
.onKochensBox.type01 { background-color: #E9F2FF; }
.onKochensBox.type02 { background-color: #E7F8EF; }
.onKochensBoxText { max-width: 500px; margin: 0 auto 40px; text-align: center; }
.onKochensBoxText > h3 { display: inline-block; margin-bottom: 12px; padding: 0 12px; font-size: 17px; font-weight: 600; line-height: 30px; color: #fff; border-radius: 20px; background-color: #175EC7; }
.onKochensBoxText > strong { display: block; margin-bottom: 12px; font-size: 24px; font-weight: 600; color: #333; }
.onKochensBoxText > p { font-size: 17px; font-weight: 400; color: #666; }
.onKochensProcess { margin-bottom: 20px; padding: 30px 40px; border-radius: 10px; background-color: #fff; }
.onKochensProcess > strong { display: block; margin-bottom: 16px; font-size: 18px; font-weight: 600; }
.onKochensProcess > img { width: 100%; }
.onKochensComment { display: flex; margin-bottom: 6px; font-size: 15px; font-weight: 400; }
.onKochensComment:last-child { margin-bottom: 0; }
.onKochensComment > span { margin-right: 4px; flex-shrink: 0; }
.onKochensUse { display: flex; margin-bottom: 26px; }
.onKochensUse > li { display: flex; flex-direction: column; justify-content: center; width: 100%; margin-right: 40px; padding: 40px 24px; border-radius: 20px; background-color: #fff; box-sizing: border-box; }
.onKochensUse > li:last-child { margin-right: 0; }
.onKochensUse > li > p { font-size: 17px; font-weight: 400; text-align: center; color: #333; }
.onKochensUseImg { margin-bottom: 25px; text-align: center; }

.onDataChartBox { margin: 20px 0 60px 0; }
.onDataChartBox > strong { font-size: 17px; font-weight: 400; color: #666; }
.onDataChartBoxIn { height: 385px; margin-bottom: 15px; padding: 50px 50px 36px; border-radius: 10px; background-color: #F7F8F9; box-sizing: border-box; }
/* 5. 예약확인 서비스  */
/* 5.0 예약확인 서비스 - 공통 */
#reserveBox.centerPosition { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.characterGroup { border-bottom: 24px solid #175EC7; position: absolute; width: 100%; bottom: 0; text-align: center; }
.characterGroup img { margin-bottom: -6px; }
#reserveBox .logoutBtn { display: flex; justify-content: center; align-items: center; height: 32px; padding: 0 18px; font-size: 16px; font-weight: 600; border: 1px solid #175EC7; border-radius: 19px; color: #175EC7; box-sizing: border-box; transition: all 0.3s; }
/* 5.1 예약확인 서비스 - 로그인 */
.reserveLogin { max-width: 450px; width: 90%; text-align: center; margin-top: -50px; }
.reserveTitle { display: flex; align-items: center; }
.reserveTitle .logoWrap { margin-right: 14px; flex: 0 1 auto; display: flex; align-items: center; }
.reserveTitle .logoWrap > img { width: 100%; }
.reserveTitle > span { color: #333; font-size: 25px; position: relative; padding-left: 10px; flex: 1; }
.reserveTitle > span:before { content: ""; position: absolute; width: 1px; height: 20px; background: #c7c7c7; top: 50%; left: 0; transform: translateY(-50%); }
.reserveTitle.sml .logoWrap > img { max-width: 264px; }
.reserveTitle.sml > span { font-size: 20px; }
.reserveLogin form { margin: 38px auto 0; max-width: 420px; }
.reserveLogin label.onField { margin-bottom: 14px; }
.reserveLogin input[type='text'], .reserveLogin input[type='password'] { border: 1px solid #e1e1e1; border-radius: 10px; height: 56px; font-size: 18px; padding: 0 18px; }
.reserveLogin input[type='text']::placeholder, .reserveLogin input[type='password']::placeholder { color: #8f8f8f; }
.reserveLogin .onLoginBtn { margin-top: 15px; height: 60px; cursor: pointer; }
.reserveLogin .notify { color: #FF444A; margin-top: 24px; }
/* 5.2 예약확인 서비스 - 스케쥴러 */
#reserveBox .onDashBoard { padding: 40px 0; }
#reserveBox .onDashBodyTitle { margin-bottom: 32px; flex-wrap: wrap; flex-direction: row-reverse; }
#reserveBox .fc-theme-standard td.fc-day-other { opacity: 0; height: 0; }
#reserveBox .onCalendarBox .topBox { padding-bottom: 15px; }
#reserveBox .onCalendarBox .btmBox { background: #f9f9f9; }
#reserveBox .eventSection { margin: 0 auto; width: calc(100% - 40px); padding: 20px; align-items: center; }
#reserveBox .onScheduleLists li > div.inner { background: #fff; }

/* 5. Responsive ------------------------------------------------------------------------------- */
@media (max-width:1200px) {
  /* Layout */
  .onSubLayout  {min-height: auto;}
  /* Header */
  .onHeaderLayout.parallax .onHeaderIn { height: 70px; }
  .onLayout.parallax .onGnb > li > ul { top: 0; }
  .onHeaderIn { height: 70px; }
  .onHeaderIn::before { display: none; }
  .onGnbBox { display: none; position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 70px); background-color: #fff; }
  .onGnbBox.on { display: block; }
  .onGnbTop { display: flex; background-color: #175EC7; }
  .onGnbTop > a { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; padding: 17px 0; font-size: 18px; font-weight: 400; color: #fff; transition: all 0.3s; }
  .onGnbTop > a:hover { background-color: #049AF4; }
  .onGnbTop > a:first-child::after { position: absolute; top: 8px; bottom: 8px; right: 0; display: block; content: ""; border-right: 1px dashed #fff; opacity: 0.2; }
  .onGnbTop > a > img { display: block; margin-right: 8px; }
  .onGnbDot { left: 0; width: 6px; height: 12px; border-radius: 0 6px 6px 0; transform: translate(-100%, 0); }
  .onGnbDot.on { display: none; }
  .onGnb.on > li > ul { display: none; }
  .onGnb { position: relative; display: block; width: 50%; margin-right: 0; padding: 10px 0; border-right: 1px solid #ECECEC; }
  .onGnb > li { position: static; width: 100%; height: auto; }
  .onGnb > li > a { display: flex; align-items: center; width: 100%; padding: 10px 20px 10px 40px; box-sizing: border-box; }
  .onGnb > li > a > i { display: block; margin-left: auto; font-size: 12px; transform: translateX(-50px); opacity: 0; transition: all 0.3s; }
  .onGnb > li > a > span { padding: 0; font-weight: 600; }
  .onGnb > li.on { display: block; }
  .onGnb > li.on > ul { display: block; top: 0; left: 100%; }
  .onGnb > li.on > a > i { transform: translateX(0); opacity: 1; }
  .onGnb > li > a:hover > i { transform: translateX(0); opacity: 1; }
  .onGnb > li > ul { padding-top: 10px; text-align: left; }
  .onGnb > li > ul > li > a { padding-left: 40px; font-weight: 600; }
  .onHeaderLogo { flex-grow: 0; margin-right: auto; }
  .onHeaderBtn { display: none; }
  .onMenuBtn { display: block; margin-right: 0; }
  .onMenuBtn::after { background-color: #000; }
  .onMenuBtn::before { background-color: #000; }
  .onMenuBtn span { background-color: #000; }
  .languageBtn {margin-right:15px;}
  /* 3. Main ------------------------------------------------------------------------------------- */
  .onMainContent { padding-right: 0; }
  .onMainVisual { margin-bottom: 0; height: auto; }
  .onMainSummary { height: 535px; border-radius: 30px; }
  .onMainSummary li { padding: 50px 50px 200px; }
  .onMoveCharBanner { transform: translateY(-65%); }
  .onLoginBox { position: relative; width: auto; height: auto; margin: -160px 25px 34px; padding: 26px 34px; z-index: 10; background-color: #fff; }
  .onLoginBox .onField { width: 100%; float: left; }
  .onLoginBox .onField:nth-of-type(1) { margin-right: 18px; }
  .onLoginBox .onField:nth-of-type(3) { width: 100%; }
  .onLoginBox > .onField.type02 { margin: 20px auto 0; }
  .onMainWaveBox { display: none; }
  .onMainQuickMenu { margin: 0 25px 50px; background-color: transparent !important; }
  .onMainQuickMenu > ul { align-items: start; height: auto; padding: 0; background-color: transparent !important; }
  .onMainQuickMenu > ul > li > a { height: 100%; }
  .onMainQuickMenu > ul > li > a > img { padding: 4px; }
  .onMainQuickMenu > ul > li > a > strong { margin-top: auto; }
  .onMainQuickMenu > ul > li:first-child > a > img { height: 48px; margin-bottom: 24px; }
  .onMainQuickMenu > ul > li > a:hover > strong { text-decoration: underline; }
  /* 250731 로그인페이지_수정 */
  .loginBtmBox .onT1 { flex-direction: column; align-items: flex-start; }
  .onLoginBox.fullPage { margin: 0; padding: 30px 34px 40px; }
  .loginBtmBox { margin-top: 40px; }
  .loginBtmBox > .onContainer { flex-direction: column; gap: 25px; }
  .loginBtmLeft { width: 100%; max-width: 100%; }
  .onOrderList { padding: 32px 24px 30px; height: auto; }
  .onOrderList > li .contents .contentsT2 { font-size: 15px; flex-direction: column; align-items: flex-start; margin-top: 8px; }
  .onOrderList > li .contents .contentsT2 .btn_darkGray, .onOrderList > li .contents .contentsT2 span { margin-left: 0; margin-top: 4px; word-break: auto-phrase; }
  .onMainPanel { position: static; width: 100%; margin-bottom: 32px; }
  .onMainPanel > div:first-of-type { height: auto; }
  .onMainKochens { width: 50%; margin: 0 20px 0 0; box-sizing: border-box; }
  .onMainKochensIn > h3 { margin-bottom: 12px; font-size: 20px; line-height: 28px; white-space: wrap; }
  .onMainKochensIn > span { font-size: 13px; }
  .onCallCenter { width: 50%; padding: 0 20px; box-sizing: border-box; }
  .onCallCenterL { display: flex; margin-right: 0; }
  .onCallCenterL > i { margin-right: 8px; }
  .onCallCenterL > h3 { margin-right: 10px; }
  .onCallCenterR > strong { font-size: 24px; }
  .onMainPopupLists { align-items: flex-start; padding-top: 50px; width: calc(100% - 40px); margin: 0 auto; }
  /* 메인페이지 캐릭터 */
  .onMainChar { display: none; }
  /* 1.4. Sub ------------------------------------------------------------------------------------ */
  .onLeftMenuLayout { display: none; }
  .onContentLayout { margin-left: 0; }
  /* Tooltip */
  .onTooltipBox { min-width: 280px; }
  /* Step */
  .onStep > li .web { display: none; }
  .onStep > li .mobile { display: inline-block; }
  /* 마이페이지 대시보드 */
  .onDashStatus { max-width: none; }
  .onDashBody { flex-direction: column; }
  .onDashStatus.version02 { margin-left: 20px; max-width: 100%; padding-left: 20px; }
  .onDashStatusR .onSurveyStep > ul > li.current > span { width: 17px; height: 17px; }
  .onSurveyStep > ul > li.current > span::after { border: 5px solid #fff; }
  /* 오늘의 이벤트 */
  .eventSection { align-items: center; margin: 15px auto; border-radius: 10px; width: calc(100% - 30px); padding: 20px; }
  p.eventText > em > span.name { display: inline; }
  /* .onCalendarBox */
  .onCalendarBox { flex-wrap: wrap; max-height: none; }
  .onCalendarBox .leftBox { width: 100%; border-right: none; padding: 32px 20px; }
  .onCalendarBox .rightBox { width: 100%; }
  .onScheduleListsWrap { overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .onCalendarBox .rightBox .onScheduleListsWrap { height: auto; margin-top: 15px; }
  .onCalendarBox .rightBox .eventSection + .onScheduleListsWrap { height: auto; }
  .onScheduleLists { display: flex; }
  .onScheduleLists li { padding: 0 15px 15px 0; }
  .onScheduleLists li:first-child { padding-top: 0; padding-left: 15px; }
  .onScheduleLists li:last-child { padding-bottom: 15px; padding-right: 15px; }
  .fc .fc-view-harness { min-height: 400px; }
}

@media (max-width:800px) {
    .onMustNotify {font-size:15px;}
  .onTabletHide { display: none; }
  .onTabletShow { display: block; }
  .onMoveCharBanner { transform: translateY(-50%) scale(0.8); transform-origin: right; }
  .onMainInfo { flex-direction: column; }
  .onMainKochens { width: 100%; height: 165px; margin-bottom: 20px; }
  .onMainPopup > ul > li { position: absolute; left: 50%; transform: translateX(-50%); top: 60px; width: calc(100% - 30px); max-width: 500px; }
  .onCallCenter { width: 100%; height: 165px; }
  .onSubVisual.type01::after { right: 0; }
  .onSubVisual.type02::after { right: 0; }
  .onSubVisual.type03::after { right: 0; }
  .onKochensIntro { flex-direction: column; margin-bottom: 30px; }
  .onKochensIntroImg { margin-bottom: 20px; }
  .onKochensIntroText { max-width: none; padding-right: 0; }
  .onKochensBox { padding: 30px; }
  .onKochensProcess { padding: 30px; }
  .onKochensUse { flex-direction: column; }
  .onKochensUse > li { margin-bottom: 16px; }
  .onKochensUse > li:last-child { margin-bottom: 0; }
  .onDataChartBoxIn { padding: 40px 20px 36px; }
  /* 2. Footer ----------------------------------------------------------------------------------- */
  .onFnb > ul > li { font-size: 15px; margin-right: 12px; }
  .onFamilySite .onField { width: 200px; }
  /* 마이페이지 대시보드 */
  .onDashGreet { margin-bottom: 24px; }
  .onDashTopIn { flex-direction: column; align-items: start; }
  .onDashGreet { margin-right: 0; }
  .onDashStatus { width: 100%; margin: 0; padding: 0; border: none; }
  .onDashInspectIn.large { flex-direction: column; align-items: start; height: auto; padding: 22px 20px; background-position: bottom right 22px; }
  .onDashInspectIn.large > span { margin: 0 0 10px; }
  .onDashInspectIn.large > h4 { margin: 0 0 16px; }
  .onInspectLogT { display: none; }
  .onInspectLogB > ul > li { position: relative; flex-wrap: wrap; height: auto; padding: 14px 14px 14px 80px; }
  .onInspectLogB > ul > li > span { text-align: left; }
  .onInspectLogB > ul > li > p { width: 100%; display: block; flex: none; }
  .onInspectLogT > span:nth-child(1), .onInspectLogB > ul > li > span:nth-child(1) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; width: 80px; }
  .onInspectLogT > span:nth-child(2), .onInspectLogB > ul > li > span:nth-child(2) { width: 100%; margin-bottom: 6px; padding: 0; }
  .onInspectLogT > span:nth-child(3), .onInspectLogB > ul > li > span:nth-child(3) { width: 100%; margin-bottom: 6px; }
  .onInspectLogT > span:nth-child(3), .onInspectLogB > ul > li > span:nth-child(4) { width: auto; margin-right: 10px; margin-bottom: 5px; }
  .onInspectLogT > span:nth-child(3), .onInspectLogB > ul > li > span:nth-child(5) { width: auto; margin-right: 10px; margin-bottom: 5px; }
  .onInspectLogT > span:nth-child(3), .onInspectLogB > ul > li > span:nth-child(6) { /* position: absolute; *//* right: 15px; */width: auto; margin-bottom: 5px; }
  .onInspectLogT > span:nth-child(3), .onInspectLogB > ul > li > span:nth-child(6) > a { width: 70px; }
  /* 대규모일때 조사 이력 테이블 셀 길이 변경 */
  .onDashBodyB.flexibleDashBody .onInspectLogT > span, .onDashBodyB.flexibleDashBody .onInspectLogB > ul > li > span { flex: none; }
  .onDashBodyT { flex-direction: column; }
  .onDashReserv { margin: 0 0 30px 0; }
  .inputTable { display: block; margin-top: 14px; }
  .inputTable tbody { display: block; }
  .inputTable tbody tr { display: flex; flex-wrap: wrap; }
  .inputTable tbody th { width: 110px; display: flex; align-items: center; box-sizing: border-box; }
  .inputTable tbody td { width: calc(100% - 110px); box-sizing: border-box; }
  .inputTable .onField .inputMdm, .inputTable .onField input.inputMdm { width: 100%; }
  .onCheckBoxWrap { display: flex; }
    /* 대시보드 */
  .onDashStatus.version02 { margin-left: 0; border-left: 0; padding-left: 0; flex-wrap: wrap; border-top: 1px dashed rgba(255, 255, 255, 0.2); padding-top: 20px; }
  .onDashStatusL { width: 100%; position: relative; flex-direction: column; align-items: start; }
  .onDashStatusL > select { position: absolute; top: 0; right: 0; margin: 0; }
  .onDashStatusL > h3 { margin-bottom: 10px; font-size: 20px; }
  .onDashStatusL > p { font-size: 16px; }
  .onSurveyStep > ul > li .statusBtm { bottom: -30px; }
  .referenceBox { padding-right: 16px; }
  .categoryChoice.type02 .choiceItem { height: 230px; }
  .categoryChoice.type02 .choiceItem > div img { width: 92px; }
  #childIdListArea .onInspectLogT { display: flex; }
  #childIdListArea .onInspectLogT span { position: relative;/* margin: 0; */display: flex; align-items: center; justify-content: center;/* top: 0; *//* left: 0; */margin-bottom: 0; margin: 0; height: 100%; }
  #childIdListArea .onInspectLogB > ul > li { padding: 0; }
  #childIdListArea .onInspectLogB > ul > li span { position: relative; margin: 0; }
  .onLoginBox > .onField.type02.last { padding-bottom: 48px; }
  .inputHelpTooltip.alwaysView { top: -15px; left: 12px; }
  .findIdentityNum { top: auto; bottom: 0; right: 0; }
  .onLoginBox.fullPage .notification { transform: none; }
}

@media (max-width:640px) {
  .showMobile { display: block; }
  /* Layout */
  .onContainer { padding: 0 15px; }
  .onMainContent { overflow: visible; }
  .onSubLayout { margin-bottom: 80px; }
  /* header */
  .onHeaderLayout { margin-bottom: 0; }
  .onLayout.parallax .onHeaderIn { height: 55px; }
  .onHeaderIn { height: 55px; }
  .onHeaderLogo img { height: 24px; }
  .onGnbBox { height: calc(100vh - 55px); }
  .onGnbTop > a { padding: 12px 0; font-size: 16px; }
  #header.fixed > .onContainer { padding: 0 5px; }
  .onGnb > li > a { padding: 10px 15px 10px 15px; font-size: 18px; line-height: 24px; }
  .onGnb > li > ul > li > a { padding-left: 15px; line-height: 24px; }
  .loginUserInfo { flex-wrap: wrap; justify-content: flex-end; text-align: right; }
  .loginUserInfo .sessionTime { width: 100%; }
  .loginUserInfo .userName { display: none; }
  /* 버튼 */
  .btnGroup.btnSpace > * { margin-right: 0; margin-bottom: 6px; }
  /* 2. Footer ----------------------------------------------------------------------------------- */
  .onFooterLayout { margin-top: 28px; padding: 22px 0 30px; }
  .onFnb { margin-bottom: 16px; }
  .onFnb > ul > li { font-size: 14px; margin-right: 12px; }
  .onAddress { font-size: 14px; }
  .onFooterR { position: static; }
  .onFamilySite { margin-bottom: 20px; }
  .onFamilySite select { font-size: 14px; }
  .onFamilySite .onField { flex-grow: 1; }
  .onFooterLogoList { display: none; }
  /* 3. Main ------------------------------------------------------------------------------------- */
  .onMainVisual { margin: 0 -15px; border-radius: 0; }
  .onMainSummary { border-radius: 0; height: 430px; }
  .onMainSummary li { padding: 44px 22px 200px; }
  .onMainSummaryText { width: 100%; margin-right: 0; }
  .onMainSummaryText > span { display: none; }
  .onMainSummaryText > h2 { margin-bottom: 10px; font-size: 30px; }
  .onMainSummaryText > p { width: 50%; font-size: 14px; line-height: 20px; }
  .onMoveCharBanner { top: 56%; right: -4%; transform: translateY(-65%) scale(0.6); }
  .onMoveCharBanner.b02 { top: 56%; right: 0; }
  .onMainQuickMenu { width: auto; margin: 0 15px 28px; background-color: transparent; }
  .onMainQuickMenu > ul { align-items: start; }
  .onMainQuickMenu > ul > li > a svg { height: 30px; margin-bottom: 0; }
  .onMainQuickMenu > ul > li:first-child > a img { height: 26px; margin: 7px 0; }
  .onMainQuickMenu > ul > li > a > strong { font-size: 14px; text-align: center; }
  .onMainQuickMenu > ul > li > a > span { margin-bottom: 0px; }
  .onMainQuickMenu > ul > li > a > strong > br { display: block; }
  /* 250731 로그인페이지_수정 */
  .onLoginBox.fullPage { padding: 18px; }
  .onLoginBox.fullPage> h3 { font-size: 23px; margin-bottom: 16px; }
  .onLoginBox > .onField.type02 > p { font-size: 15px; margin-bottom: 6px; }
  .onLoginBox > .onField.type02 input { height: 38px; font-size: 15px; border-radius: 5px; }
  .onLoginBox > .onField.type02 .birthdayBox select { height: 38px; font-size: 15px; border-radius: 5px; padding: 0 10px; min-width: 50px; }
  .onLoginBox > .onField.type02 .unit { font-size: 14px; }
  .onLoginBox > .onField.type02 .birthdayBox .unit {margin-right:2px;}
  .inputHelpTooltip.alwaysView { height: 44px; }
  .onLoginBox > .onField.type02 .childIdBox .childIdInput { padding: 0 5px}
  .onLoginBox > .onField.type02 .childIdBox .childIdInput01 { min-width: 38px; }
  .onLoginBox > .onField.type02 .childIdBox .childIdInput02 { min-width: 44px; }
  .onLoginBox > .onField.type02 .childIdBox .childIdInput03 { min-width: 29px; }
  .onLoginBox > .onField.type02 .childIdBox .childIdInput04 { min-width: 52px; flex:1;}
  .onLoginBox > .onField.type02 .childIdBox .childIdInput05 { min-width: 38px; }
 
  .onLoginBox > .onField.type02 input::placeholder { font-size: 17px; }
  .loginBtmBox .onT1 { line-height: inherit; margin-bottom: 14px; gap: 5px; }
  .onLoginBox.fullPage .onLoginBtn { height: 45px; margin-top: 18px; font-size: 16px; border-radius: 5px; }
  .onOrderList { padding: 32px 20px 30px; }
  .callCenterBox { height: auto; flex-direction: column; padding: 0 20px; }
  .callCenterBox > li { width: 100%; flex-direction: row; justify-content: flex-start; padding: 20px 0; }
  .callCenterBox > li .pictogram { width: 58px; margin-bottom: 0; margin-right: 16px; }
  .callCenterBox > li .pictogram > img { width: 100%; max-width: 100%; }
  .callCenterBox > li:first-child:after { width: 100%; border-right: none; border-bottom: 1px dashed #D3DFF2; top: auto; transform: none; bottom: 0; }
  .callCenterBox > li div > p { font-size: 17px; margin-bottom: 10px; }
  .callCenterBox > li div > img { max-width: 80%; }
  .onLoginBox { margin: -160px 15px 24px; padding: 20px 25px 25px; }
  .onLoginBox .onField { width: 100%; float: none; }
  .onLoginBox .onField:nth-of-type(1) { margin-right: 0; }
  .onLoginBox.researcherLogin { height: 180px; }
  .onLoginBox > .onField.type02 { margin: 20px auto 0; }
  .onLoginBox > h3 { margin-bottom: 16px; font-size: 20px; }
  .onLoginBox > .onField input { height: 40px; }
  .onLoginBox > p { font-size: 13px; }
  .onLoginBtn, .onLogoutBigBtn, .onLinkBigBtn { height: 45px; }
  .onLoginPopupClose { top: 20px; right: 26px; font-size: 22px; }
  .onMainPanel > div:first-of-type { padding: 20px 28px; }
  .onMainPanel > div:nth-of-type(2) { margin: 20px 28px 0; }
  .onNewsTab > li { font-size: 18px; }
  .onNewsContent { margin-bottom: 20px; }
  .onNewsContent ul > li { margin-bottom: 10px; font-size: 16px; }
  .onNewsContent ul > li strong { margin-right: 10px; padding: 0 7px; }
  .onChartSwiper > ul > li > h3 { font-size: 18px; line-height: 21px; }
  .onChartSwiper > ul > li > a { font-size: 13px; }
  .onMainKochens { margin: 0 0 20px; padding: 20px 15px; }
  .onMainKochens > h3 { margin-bottom: 10px; font-size: 20px; line-height: 27px; }
  .onMainKochens > span { font-size: 11px; }
  .onCallCenterL > i { margin-bottom: 6px; font-size: 19px; }
  .onCallCenterL > h3 { margin-bottom: 6px; font-size: 18px; }
  .onCallCenterL > p { font-size: 13px; white-space: wrap; }
  .onCallCenterL > p > br { display: block; }
  .onCallCenterR > strong { font-size: 26px; }
  .onCallCenterR > strong > span { font-size: 12px; }
  /* 팝업 */
  .onMainPopupFooter > a { font-size: 14px; }
  /* 회원유형 선택 */
  .choiceItem { margin-right: 0; margin-bottom: 10px; width: 100%; flex: 1 1 100%; padding: 18px; }
  .choiceItem > p { font-size: 18px; margin-bottom: 10px; }
  .choiceItem > div > p > span { font-size: 15px; }
  .referenceBox { font-size: 16px; }
  .categoryChoice.type02 .choiceItem { height: auto; margin-right: 0; flex-direction: row; justify-content: flex-start; padding: 10px 20px; }
  .categoryChoice.type02 .choiceItem > p { margin-bottom: 0; font-size: 16px; }
  .categoryChoice.type02 .choiceItem > div img { width: 58px; }
  /* 1.4. Sub ------------------------------------------------------------------------------------ */
  .onSubVisual { height: 125px; margin-bottom: 28px; padding: 14px 0 0 20px; border-radius: 20px; }
  .onSubVisual::after { transform: scale(0.5); transform-origin: bottom right; }
  .onCloud01 { display: none; }
  .onCloud02 { display: none; }
  .onSubNav { margin-bottom: 26px; }
  .onSubNav > ol > li { font-size: 13px; }
  .onSubTitle { font-size: 24px; }
  .onKochensIntro { margin-bottom: 40px; }
  .onKochensIntroText > h2 { margin-bottom: 16px; font-size: 24px; }
  .onKochensIntroText > p { margin-bottom: 16px; font-size: 15px; }
  .onKochensIntroText > p > strong { font-size: 17px; }
  .onKochensBox { margin-bottom: 40px; padding: 20px; }
  .onKochensBoxText { margin-bottom: 20px; }
  .onKochensBoxText > h3 { font-size: 16px; }
  .onKochensBoxText > strong { margin-bottom: 6px; font-size: 20px; }
  .onKochensBoxText > p { font-size: 16px; }
  .onKochensProcess { overflow: auto; }
  .onKochensProcess > strong { white-space: nowrap; }
  .onKochensProcess > img { min-width: 600px; }
  .onKochensUse { flex-direction: column; }
  .onKochensUse > li { margin-bottom: 16px; }
  .onKochensUse > li:last-child { margin-bottom: 0; }
  .onKochensUse > li > p { font-size: 16px; }
  .onReport > li > a { position: static; margin-top: 8px; }
  .onDataChartBoxIn { padding: 20px 0; }
  /* Tooltip */
  .onTooltip.on .onTooltipBox { min-width: 200px; }
  /* Step */
  .onStep { margin-bottom: 25px; }
  .onStep > li { height: 36px; justify-content: center; }
  .onStep > li:after { background: url(../img/sub/icon_moStepLine.svg) no-repeat -1px center; top: -3px; right: -9px; width: 11px; height: 41px; }
  .onStep > li.on::after { background: url(../img/sub/icon_moStepLineOn.svg) no-repeat center center; top: -3px; width: 11px; height: 41px; right: -10px; }
  .onStep > li:nth-child(2).on::before, .onStep > li:nth-child(3).on::before, .onStep > li:last-child.on::before { background: #fff url(../img/sub/icon_moStepLineOn_before.svg) no-repeat -1px center; top: -1px; left: 0; width: 11px; height: 34px; }
  .onStep > li .web { display: none; }
  .onStep > li .mobile { display: inline-block; font-size: 14px; }
  .onStep > li span { display: none; }
  /* 마이페이지 대시보드 */

  .onDashTop { margin-bottom: 30px; padding: 28px 0 40px 0; }
  .onDashGreet { margin-right: 0; }
  .onDashGreet > strong { display: block; font-size: 24px; }
  .onDashGreet > strong > img { display: none; }
  .onDashStatusT { position: relative; flex-direction: column; align-items: start; }
  .onDashStatusT > h3 { margin-bottom: 20px; font-size: 20px; }
  .onDashStatusT > p { font-size: 16px; }
  .onDashStatusT > select { position: absolute; top: -2px; right: 0; }
  .onDashStatusB .onSurveyStatus, .onDashStatusR .onSurveyStatus { max-width: none; width: 100%; }
  .onDashBodyT h3 { margin-bottom: 16px; font-size: 18px; }
  .onDashReservIn { height: auto; padding: 22px 20px 42px; background-size: 100px; background-position: right 13px bottom; }
  .onDashReservIn h4 { margin-bottom: 16px; font-size: 20px; }
  .onDashReservIn ul > li > span { width: 62px; font-size: 15px; }
  .onDashReservIn ul > li:first-child { margin-bottom: 10px; }
  .onDashInspectIn { height: auto; padding: 22px 20px; background-size: 100px; background-position: right 13px bottom; }
  .onDashInspectIn > span { font-size: 13px; }
  .onDashInspectIn > h4 { margin-bottom: 16px; font-size: 20px; }
  .onDashInspectIn > a { font-size: 15px; }
  .onDashBodyT { margin-bottom: 30px; }
  .onDashBodyB h3 { margin-bottom: 16px; font-size: 18px; }
  .onDashBody { margin-bottom: 40px; }
  .onDashBody h2 { font-size: 18px; }
  /* 1.6. Survey ----------------- ------------------------------------------------------------ */
  .onSurveyLayout { padding-top: 80px; }
  .onSurveyLayout input[type=radio], input[type=checkbox] { width: 12px; height: 12px; }
  #wrap { padding: 12px; }
  #header { bottom: auto; top: -56px; }
  #header h1 { padding-left: 32px; font-size: 22px; }
  #header.fixed .top-box h1 { font-size: 18px; }
  #container > h3 { font-size: 18px; }
  #container > h3 > i { margin-right: 4px; }
  .info-from ul { flex-direction: column; height: auto; padding: 8px 0; }
  .info-from ul li { margin-bottom: 8px}
  .info-from ul li:last-child { margin-bottom: 0; }
  .info-from span { font-size: 16px; }
  .info-form2 { margin: 10px 0 30px 0; padding: 12px; }
  .btn-box2 { height: 60px; border-radius: 10px 10px 0 0; }
  .servey { padding: 10px 12px; }
  .servey h4 { font-size: 16px; }
  .servey ul li { margin-bottom: 8px; font-size: 14px; }
  .servey ul li label span { vertical-align: -1px; }
  .servey table td { padding: 5px; font-size: 13px; }
  .servey table td strong { font-size: 13px; }
  /* 1.7. Consent -------------------------------------------------------------------------------- */
  .onConsentBox { padding: 12px 12px 5px 12px; }
  .onConsentBoxIn { margin-bottom: 5px; padding: 12px; }
  .agreeBottom { position: static; }
  .agreeArea > li { flex-wrap: wrap; }
  .agreeArea > li > strong { width: 100%; margin-bottom: 6px; }
  .agreeArea > li > input[type=text], .agreeArea > li > input[type=password] { width: 48%; }
  .agreeArea > li > span { display: block; width: 4%; margin: 0; text-align: center; }
  .agreeArea.right > li { justify-content: start; }
  .agreeArea.right > li > strong { width: 100%; margin-right: 0; }
  .agreeArea.right > li > input[type=text], .agreeArea.right > li > input[type=password] { width: 100%; }
  .signArea { width: 100%; }
  /* 3. Component -------------------------------------------------------------------------------- */
  .onMobileHide { display: none; }
  .onConBox { margin-bottom: 40px; }
  .onT1 { margin-bottom: 15px; font-size: 22px; }
  .onT2 { margin-top: 16px; font-size: 24px; }
  .onT3 { font-size: 18px; }
  .onP { font-size: 15px; line-height: 1.3; }
  .onP strong { font-size: 16px; }
  .onTabSub { margin-top: 20px; margin-bottom: 16px; }
  .onTabSub > li a { font-size: 15px; line-height: 28px; }
  .onSearch { margin-bottom: 20px; padding: 10px; }
  .onTable > thead > tr > th { padding: 10px; }
  .onTable > tbody > tr > td { padding: 12px 10px; font-size: 15px; word-break: break-word; }
  .onTable > thead > tr > th:after { left: -1px; }
  .onReport > li { margin-bottom: 14px; padding: 14px 16px; }
  .onReport > li > a { transform: translateY(0); }
  .onReport > li > h3 > a { max-width: 100%; margin-bottom: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .onReport > li > dl > dt { width: 38px; font-size: 15px; }
  .onReport > li > dl > dd { font-size: 15px; }
  /* 회원가입 페이지 문단 */
  .onSignupTit1 { font-size: 22px; }
  .onSignupTit2 { font-size: 18px; }
  .onGrayTxt { font-size: 15px; }
  .oncheckBox { height: 48px; padding: 0 15px 0 8px; }
  .oncheckBox .onField input[type=checkbox] { width: 16px; height: 16px; }
  .oncheckBox .onField input[type=checkbox] + span { font-size: 15px; }
  .oncheckBox .agreeLink { font-size: 13px; }
  /* 완료페이지 콘텐츠 */
  .confirmBox { padding: 80px 20px; }
  .confirmBox > p.title { font-size: 24px; background-size: contain; padding-left: 39px; margin-bottom: 22px; }
  .confirmBox > p.title.noIcon { padding-left: 0; }
  .confirmBox > p.subTxt { font-size: 16px; }
  .onFaq > li > a { font-size: 16px; }
  .onFaq > li > a > span { margin-right: 5px; }
  .onFaq > li > a > strong { font-size: 14px; font-weight: 600; }
  .onFaqIn > span { margin-right: 5px; }

  .onTabSub > li { margin-right: 6px; }
  .onPaging > li { min-width: 20px; font-size: 15px; }
  .onGallery > ul > li { width: calc((100% - 2%) / 2); margin-bottom: 25px; padding-bottom: 8px; overflow: hidden; box-shadow: none; margin-right: 2%; }
  .onGallery > ul > li:nth-child(3n) { margin-right: 2%; }
  .onGallery > ul > li:nth-child(2n) { margin-right: 0; }
  .inputTable .onField input[type="text"], .inputTable .onField input[type="password"], .inputTable .onField input[type="number"], .inputTable .onField select { font-size: 15px; height: 30px; }
  .borderedInput { font-size: 15px; height: 45px; }
  .inputTable [class ^= "btnS_"] { height: 30px; }
  p.notify span { font-size: 14px; }
  .onCalendarBox .leftBox, .onCalendarBox .topBox { padding: 20px 15px; }
  .fc .fc-toolbar-title { font-size: 20px; background-size: 30px; padding-left: 37px; }
  .fc .fc-col-header-cell-cushion { font-size: 15px; }
  .fc .fc-daygrid-day-number { font-size: 16px; }
  .fc-h-event .fc-event-main { font-size: 12px; }
  .fc-h-event .fc-event-title { word-break: normal; }
  /* 오늘의 이벤트 */
  .eventSection { padding: 20px 15px; }
  p.eventText > em { font-size: 17px; }
  img.cake { width: 56px; }
  .onScheduleLists li > div.inner { padding: 15px; }
  .onScheduleLists li p.patientName { font-size: 15px; }
  .onScheduleLists li .scheduleTitle { margin-bottom: 12px; }
  .onScheduleLists li p.scheduleInfoRow .title { font-size: 13px; }
  .onScheduleLists li p.scheduleInfoRow .content { font-size: 14px; }
  /* 레이어 팝업 */
  .onPopup .onPopupIn .onPopupClose { font-size: 20px; top: 20px; }
  .onPopup .onPopupIn .onPopupHead { padding-bottom: 14px; }
  .onPopup .onPopupIn .onPopupTitle { font-size: 18px; }
  /* 팝업 내 약관 */
  .onPopup .conP { margin: 0px 0px 28px; }
  .onPopup .conT3 { font-size: 18px; margin: 0px 0px 8px 0px; }
  .onPopup .table_normal thead tr th { font-size: 13px; }
  .onPopup .table_normal tbody tr td, .onPopup .txtBox, .onPopup .conBox .conT4 { font-size: 14px; }
  .onPopup .conBox { margin-bottom: 18px; padding: 16px; }
  .onPopup .conBox .conT4 { font-size: 14px; line-height: 18px; }
  /* 5. 예약확인 서비스  */
  #reserveBox .onCalendarBox .btmBox .onScheduleLists li:not(:first-child) { padding: 10px 6px; }
  #reserveBox .onCalendarBox .btmBox .onScheduleLists li:last-child { padding-right: 20px; }
  
  .onTable.flexTable > tbody > tr > th, .onTable.flexTable > tbody > tr > td { width: 100%; padding: 10px 14px; }
  .onT1 .mainTit { font-size: 20px; }
  .onT1 .subTit { font-size: 16px; }
}

@media (max-width:500px) {
  /* 5. 예약확인 서비스  */
  .onDashBodyTitle .reserveTitle { width: 100%; margin-right: auto; margin-top: 10px; }
  .reserveTitle > span { font-size: 20px; }
  .reserveTitle.sml > span { font-size: 18px; }
  .reserveTitle .logoWrap { margin-right: 8px; }
  .reserveLogin form { margin-top: 28px; }
  .reserveLogin label.onField { margin-bottom: 8px; }
  .reserveLogin input[type='text'], .reserveLogin input[type='password'] { height: 48px; font-size: 16px; }
  .reserveLogin .onLoginBtn { margin-top: 10px; height: 50px; }
  #reserveBox .onDashBodyTitle { margin-bottom: 24px; }
  #reserveBox .logoutBtn { font-size: 14px; height: 28px; padding: 0 14px; }
  #reserveBox .fc .fc-toolbar { justify-content: center; }
  #childIdListArea .onInspectLogT { display: none; }
  #childIdListArea .onInspectLogB > ul > li { height: 63px; }
  #childIdListArea .onInspectLogB > ul > li span { position: absolute; }
  #childIdListArea .onInspectLogB > ul > li span:nth-child(1), #childIdListArea .onInspectLogB > ul > li span:nth-child(2) { font-size: 15px; left: 20px; width: calc(100% - 86px); height: auto; text-align: left; display: block; top: 12px; }
  #childIdListArea .onInspectLogB > ul > li span:nth-child(2) { top: 33px; }
  #childIdListArea .onInspectLogB > ul > li span:nth-child(3) { width: auto; right: 20px; top: 50%; transform: translateY(-50%); }
  .onLoginBox > .onField.type02 .childIdBox {gap:1px;}  
  .birthdayBox {display: flex; align-items: center; gap:1px;}
  .onLoginBox > .onField.type02 .birthdayBox .unit {margin: 0px;} 
  .pcUnit {display: none;}
  .moUnit {display: inline;}
  .onTable.flexTable > tbody > tr > td {display:flex; align-items:center; flex-wrap:wrap; gap:5px 1px; padding:10px 6px;}
  .onTable.flexTable > tbody > tr > td * {margin:0; }
}