@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
:root {
  /* Primary Colors */
  --IDS_Primary-100: #F8F8FB;
  --IDS_Primary-200: #F1F7FF;
  --IDS_Primary-300: #BEDAFF;
  --IDS_Primary-400: #6273DE;
  --IDS_Primary-500: #2B398F;
  --IDS_Primary-600: #2B398F;
  --IDS_Primary-bg: #ECF4FF;
  --IDS_font: #7C7C7C;

  /* Primary Color Variations */
  --color-primary: #006FFF;
  --color-primary-000: #F3FBFF;
  --color-primary-100: #E6F7FF;
  --color-primary-200: #BAE7FF;
  --color-primary-300: #91D5FF;
  --color-primary-400: #69C0FF;
  --color-primary-500: #40A9FF;
  --color-primary-600: #2C87FF;
  --color-primary-650: rgba(0, 101, 233, 0.7);
  --color-primary-700: #0065E9;
  --color-primary-800: #002766;
  --color-primary-900: #002766;
  --color-primary-overlay: #7db5ff71;
  --color-primary-overlay-01dp: linear-gradient(0deg, rgba(0, 101, 233, 0.05) 0%, rgba(0, 101, 233, 0.051) 100%), #0065e90d;
  --color-primary-overlay-02dp: linear-gradient(0deg, rgba(0, 101, 233, 0.1) 0%, rgba(0, 101, 232, 0.1) 100%), #0065e917;
  --color-primary-overlay-03dp: linear-gradient(0deg, rgba(0, 101, 233, 0.15) 0%, rgba(0, 101, 232, 0.15) 100%), #0065e926;
  --color-primary-overlay-09dp: linear-gradient(0deg, rgba(0, 101, 233, 0.5) 0%, rgba(0, 101, 232, 0.5) 100%), #0065e926;

  /* Secondary Colors */
  --color-secondary: #31708F;
  --color-black: #000;
  --color-white: #fff;
  --darkmode-font: #ffffff99;

  /* Gray Scale */
  --color-gray-100: #FCFCFC;
  --color-gray-200: #F6F6F6;
  --color-gray-300: #EDEDED;
  --color-gray-400: #DDDDDD;
  --color-gray-500: #999999;
  --color-gray-600: #777777;
  --color-gray-700: #555555;
  --color-gray-800: #333333;
  --color-gray-900: #111111;
  --color-gray-overlay: rgba(0, 0, 0, 0.8);

  /* Alert & Error Colors */
  --color-alert-100: #FF555530;
  --color-alert-200: #FF5555;
  --color-alert-overlay: #FF555540;
  --color-error-100: #EC383860;
  --color-error-200: #EC3838;
  --color-error-300: #FF2E2E;
  --color-success: #0C9000;

  /* shadow */
  --Elevation-Shadow-00dp: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  --Elevation-Shadow-01dp: 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.20);
  --Elevation-Shadow-02dp: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.20);
  --Elevation-Shadow-03dp: 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 8px 0px rgba(0, 0, 0, 0.20);
  --Elevation-Shadow-04dp: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
  --Elevation-Shadow-06dp: 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 3px 5px 0px rgba(0, 0, 0, 0.20);
  --Elevation-Shadow-08dp: 0px 8px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 5px 5px 0px rgba(0, 0, 0, 0.20);
  --Elevation-Shadow-12dp: 0px 12px 17px 0px rgba(0, 0, 0, 0.14), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 7px 8px 0px rgba(0, 0, 0, 0.20);
  --Elevation-Shadow-16dp: 0px 16px 24px 0px rgba(0, 0, 0, 0.14), 0px 6px 30px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.20);
  --Elevation-Shadow-24dp: 0px 24px 38px 0px rgba(0, 0, 0, 0.14), 0px 9px 46px 0px rgba(0, 0, 0, 0.12), 0px 11px 15px 0px rgba(0, 0, 0, 0.20);

  /* background */
  --Surface : #121212;
  --Elevation-Overlay-01dp: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%), #121212;
  --Elevation-Overlay-02dp: linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.07) 100%), #121212;
  --Elevation-Overlay-03dp: linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%), #121212;
  --Elevation-Overlay-04dp: linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.09) 100%), #121212;
  --Elevation-Overlay-06dp: linear-gradient(0deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.11) 100%), #121212;
  --Elevation-Overlay-08dp: linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.12) 100%), #121212;
  --Elevation-Overlay-12dp: linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%), #121212;
  --Elevation-Overlay-16dp: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 100%), #121212;
  --Elevation-Overlay-24dp: linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.16) 100%), #121212;
  --Elevation-Overlay-48dp: linear-gradient(0deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.17) 100%), #121212;
  --Elevation-Overlay-96dp: linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.18) 100%), #121212;

  /* Line Heights */
  --fontlineheight-1: 150%;
  --fontlineheight-2: 140%;
  --fontlineheight-3: 130%;
  --fontlineheight-4: 120%;

  /* Letter Spacing */
  --font-spacing: -0.1px;
  --font-spacing-1: -1px;
  --font-spacing-2: -2px;

  /* Font Sizes */
  --fontsize-title-1: 30px;
  --fontsize-title-2: 24px;
  --fontsize-title-3: 20px;
  --fontsize-body-1: 18px;
  --fontsize-body-2: 16px;
  --fontsize-body-3: 14px;
  --fontsize-body-4: 12px;
  --fontsize-button0: 20px;
  --fontsize-button1: 18px;
  --fontsize-button2: 16px;
  --fontsize-button3: 15px;
  --fontsize-label: 10px;

  /* Font Weights */
  --fontweight-title-1: 600;
  --fontweight-title-2: 600;
  --fontweight-title-3: 500;
  --fontweight-title-4: 400;
  --fontweight-body-1: 600;
  --fontweight-body-2: 500;
  --fontweight-body-3: 500;
  --fontweight-body-4: 500;
  --fontweight-body-5: 400;
  --fontweight-button0: 500;
  --fontweight-button1: 500;
  --fontweight-button2: 600;
  --fontweight-button3: 500;
  --fontweight-label: 12px;

  /* Card Radius & Border */
  --card-radius-1: 8px;
  --card-radius-2: 16px;
  --card-radius-3: 24px;
  --card-border: solid 1px #c9c9c9;
}

*{ font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
body{ font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;color:var(--color-gray-700);width:100%; margin: 0;/* *text-align:center; */ overflow-x: hidden;}
body:has(.version-add)::-webkit-scrollbar {display: none;}
div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, header, hgroup, footer, nav, section, article, aside, figure, video, audio {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
}
a,a:hover,a:active,a:visited { text-decoration:none}
.on-screen {transition: transform 0.7s, opacity 1s;}
body.sub { background:#fff;}
body.Likert {background-color: var(--IDS_Primary-200);}
body.Likert::-webkit-scrollbar {display: none;}
.bold,b,strong,h1,h2,h3,h4,h5,small,select,input{font-family:'Pretendard Variable', Pretendard;font-weight:var(--fontweight-body-1)}

.sub-content {background-color: transparent;}
.sub-content .container .sub-body.test{  box-shadow: var(--Elevation-Shadow-00dp);padding: 16px 30px !important; border-radius:0 0 12px 12px ;}

.header-wrap {background:#292d35; display: flex; padding: 0px;justify-content: space-between; flex-shrink: 0;position:relative; top:0; width:100%; z-index:9997; height:48px}
.container{width:1170px\8; min-width:320px!important;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto; overflow: visible;}
.header-wrap > .container {display:flex; justify-content: space-between; align-items: center; flex-wrap: nowrap;}
.header-wrap > .container .logo svg, .header-wrap > .container .logo img {display:none;width:54px; height:16px}
.header-wrap > .container .header-subbody {padding: 0 30px; display: flex; justify-content: space-between; width: 100%; align-items: center;}
.header-wrap > .container .header-subbody .logo {text-align: left; padding-left: 12px; width:80px!important;font-size: 12px;line-height: 40px;color: #7f8186;position: relative;top: 0;width: 100%;z-index: 9998;}
.header-wrap > .container .header-subbody h1 { color:var(--IDS_Primary-bg); font-size:var(--fontsize-body-3); font-weight:400; letter-spacing: var(--font-spacing); line-height:var(--fontlineheight-1); vertical-align:text-top; margin:10 0; text-overflow:ellipsis; white-space:nowrap;overflow:hidden}
.flow-list { display:block; float:right; white-space:nowrap;}
.flow-list ul{ margin:0; padding:0; display: flex; height: 32px; align-items: center;}
.flow-list li{ display:inline-block; list-style:none; padding:4px 0; color:#292D36; font-size:13px!important; font-weight:400;}
.flow-list .flow-cont { background-color:#4A515F;  border:2px solid #4A515F; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; line-height:var(--fontlineheight-1); width:66px; text-align:center; color:#292D36;}
.flow-cont.active { background:#D9D9D9; border-color:#D9D9D9;}
.sub-body { background:#fff; max-width:1260px; height: auto; margin:0 auto; overflow:visible; border: none; box-shadow: none;padding: 30px;}
.sub-body.rubric {overflow: hidden;padding:0px;background-color:transparent;}
.sub-body.test { padding: 12px 30px !important;}

.darkmode {background: var(--Elevation-Overlay-01dp)!important; color: var(--darkmode-font)!important}
body.darkmode {background: var(--Surface)!important;}
.desc_box{width: 100%;border-radius: 16px;box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1); padding: 20px;box-sizing: border-box;}
.desc_box:has(.info.btn.active){border-radius: 12px 12px 0 0; transition: all 0.3s ease-out;}
.info.btn {transform: rotate(0deg); transition: transform 0.2s ease;}
.info.btn.active { transform: rotate(180deg);transition: transform 0.2s ease; box-shadow: none;}
.desc_box.test-topper.content{ display: flex; justify-content: space-around; width: 100%; border-radius: 0 0 12px 12px; box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1); padding: 0 !important; margin: 0 !important; background: #fff !important;max-height: 0; overflow: hidden;transition: max-height 0.3s ease, padding 0.3s ease-in-out, color 0.3s ease-in-out;animation: fadeIn 0.6s ease-in-out forwards;}
.desc_box.test-topper.content .wrapper{width:100%; display: flex; justify-content: space-around; padding: 0 40px}
.desc_box.test-topper.content.expanded{ display: flex; justify-content: space-around; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); padding: 24px 0!important; color: var(--color-gray-900); max-height:500px !important; transition: max-height 0.2s ease, padding 0.2s ease-in-out, color 0.2s ease-in-out;animation: fadeIn 0.3s ease-in-out forwards;}
.desc_box.test-topper.content p{padding: 0 0 0 16px; font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: var(--font-spacing); color: var(--color-primary-800);word-break: keep-all; border-left:2px solid #00276698;display:flex;align-self:center}
.desc_box.test-topper.content .info-content{padding: 0 0 0 16px; font-size: var(--fontsize-body-2); font-weight: 500; line-height: var(--fontlineheight-4); letter-spacing: var(--font-spacing); color: var(--color-gray-800);word-break: keep-all; border:none}
.alert-info {display: flex; width: 100%; height:auto; justify-content: space-between; margin: 20px 0; font-size:var(--fontsize-body-2);font-weight: var(--fontweight-body-3); letter-spacing: var(--font-spacing); line-height:var(--fontlineheight-1);align-items: center;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius: 12px; background: var(--IDS_Primary-bg); opacity: 1; visibility: visible;flex: 1;gap: 16px;box-shadow:none; animation: fadeIn 0.5s ease-in-out forwards; transition: all 0.4s; }
.alert-info.personal{margin-top:0}
.desc_box.test-topper.gray{background: var(--color-gray-200)!important; font-size: var(--fontsize-body-3); word-break: keep-all; gap: 0; padding: 24px !important;white-space: wrap; max-width: 592px; box-shadow: none;}
.desc_box.test-topper.gray .desc_title{ font-size: var(--fontsize-body-3);}
.desc_box.test-topper.gray .desc_title .topper-info{ color: var(--color-gray-700)!important; font-size: var(--fontsize-body-1);font-weight: 700;}
.desc_box.test-topper.gray .desc_title.right .info.btn:hover{background: var(--color-gray-300) !important;}
.desc_box.test-topper.gray .desc_title.right .info.btn svg path{stroke: #111;}
.desc_box.test-topper.gray.content{width: 100%; border-radius: 0 0 12px 12px; box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1); padding: 0 !important;background: var(--color-gray-200) !important;max-height: 0; overflow: hidden;transition: max-height 0.2s ease, padding 0 ease,background-color 2s ; margin-bottom: 24px!important;}
.desc_box.test-topper.gray.content.expanded{background: var(--color-gray-100)!important;box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); padding: 20px 0 !important; color: var(--color-gray-900); max-height:500px !important; transition: max-height 0.4s ease, padding 0.4s ease;}
.desc_box.test-topper.gray.content .info-content:hover svg path{stroke: var(--color-alert-200) !important;}
.desc_box.test-topper.gray.content .info-content b{color: var(--color-gray-800); font-weight: 600; display: flex; align-items: top; gap: 8px;}
.desc_box.test-topper.gray.content .info-content b + b{padding-top: 8px;}
.desc_box.test-topper.gray.content .info-content b p{margin-top: 2px; font-size: var(--fontsize-body-1); border:none; color:#111111!important; align-self: auto;}
.desc_box.test-topper.gray.content .info-content b span{display: flex; line-height: 1.5; gap: 4px;}
.desc_box.test-topper.gray.content .info-content b span:hover svg path{stroke: var(--color-alert-200) !important;}
.desc_box.test-topper.gray.content .info-content b span svg{min-width: 19px; max-width: 19px}


.test-topper {display: flex; width: 100%; max-height: 80px; height:auto; justify-content: space-between;background-color:#fff!important; padding: 16px !important; margin:0; align-items: center;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius: 12px; background:linear-gradient(16deg, #0065e92d, #0065e9 100%),linear-gradient(241deg,#1d3add4b,#1d3add 100%),linear-gradient(336deg,#164a634b,#164b63 100%);transition: border-radius 0.3s ease-out 0.2s}

.test-topper .desc_title{display: flex; justify-content: center; align-items: center; gap: 10px;}
.test-topper .desc_title .test-logo{max-width:48px; max-height: 48px; border-radius: var(--card-radius-1); overflow: hidden; display: flex; justify-content: center; -webkit-box-shadow: 0 3px 18px rgb(2, 8, 44,0.7); box-shadow: 0 3px 18px rgba(2, 8, 44,0.7);background-color:#F1F3F6;}
.test-topper .desc_title .test-logo img{width: 100%; margin: auto;}
.test-topper .desc_title .topper-title-info{ display: flex; flex-direction: column; color: #fff;}
.test-topper .desc_title .topper-title-info .topper-title{font-size: clamp(12px, 3.6vw, var(--fontsize-body-1));font-weight:var(--fontweight-body-2); letter-spacing: var(--font-spacing); line-height:var(--fontlineheight-4); display:-webkit-box;-webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:2;word-break: keep-all;margin-bottom:4px;vertical-align: middle;}
.test-topper .desc_title .topper-title-info .topper-title span{font-size:var(--fontsize-body-2);font-weight:400; letter-spacing: var(--font-spacing); line-height:var(--fontlineheight-4);}
.test-topper .desc_title .topper-title-info .topper-info{font-size: clamp(10px, 3.3vw, var(--fontsize-body-3));font-weight:var(--fontweight-body-5); letter-spacing: var(--font-spacing); line-height:100%!important; margin-bottom: 0.4vh;}
.test-topper .desc_title.right {gap: 10px;}
.test-topper .desc_title.right .topper{padding: 7px 22px; border-radius: var(--card-radius-3); background-color:var(--color-primary-600)!important; font-size:var(--fontsize-button2);font-weight:var(--fontweight-button2); letter-spacing: var(--font-spacing); line-height:var(--fontlineheight-2)}
.test-topper .desc_title.right .topper:hover{color: #fff; background-color: #ffffff50!important;}
.test-topper .desc_title.right .topper:visited{color: #fff;}
.test-topper .desc_title.right .full,.test-topper .desc_title.right .info{padding:6px; background-color:transparent; border-radius: var(--card-radius-3);}
.test-topper .desc_title.right .toggle{width: 50px; height: 28px; background-color: var(--darkmode-font); border-radius: 999px; position: relative; transition: background-color 0.3s;}
.test-topper .desc_title.right .toggle:hover{outline:6px solid #ffffff20;}
.test-topper .desc_title.right .toggle.darkmode{background: var(--color-primary)!important;}
.test-topper .desc_title.right .toggle::before{content: ''; width: 20px; height: 20px; background-color: #ffffffd2; border-radius:999px; position: absolute; top: 3px;left: 4px;transition: transform 0.3s,background-color 0.2s;z-index: 10;}
.test-topper .desc_title.right .toggle .light{display: block;position: absolute; width: 18px; height: 18px; top: 4px;right: 4px;}
.test-topper .desc_title.right .toggle .dark{ display: none; position: absolute; width: 18px; height: 18px; top: 4px;left: 4px;}
.test-topper .desc_title.right .toggle:hover::before{background-color: #fff;}
.test-topper .desc_title.right .toggle.darkmode .dark{display: block;}
.test-topper .desc_title.right .toggle.darkmode .light{display: none !important;}
.test-topper .desc_title.right .toggle.darkmode::before{transform:translateX(20px); background-color: #ffffffd2;}
.test-topper .desc_title.right .toggle.darkmode:hover::before{background-color: #fff;}

.sub-body.test .test-topper .desc_title.right .save{padding:7px 12px; border-radius: var(--card-radius-3); color:#fff; background-color:#11111130; font-size: var(--fontsize-button2); line-height: var(--fontlineheight-2);color: #d5e4fa;}
.sub-body.test .test-topper .desc_title.right .save:hover{background-color:#11111150;color: #fff}
.sub-body.test.darkmode .test-topper .desc_title.right .save{background-color:#0065e9e1;color: #fff}
.sub-body.test.darkmode .test-topper .desc_title.right .save:hover{background-color:#0065e9c5;color: #fff}
.test-topper .desc_title.right .full:hover,.test-topper .desc_title.right .info:hover{background-color:#ffffff20 !important; color:var(--color-primary-900);}


.fullclose{font-size: var(--fontsize-title-3); margin: 12px 0; padding: 8px 20px; display: none; justify-content: center; background-color:#FFF!important; border-radius: var(--card-radius-3) !important; color: var(--color-primary-600);}
.fullclose:hover{-webkit-box-shadow: none !important; box-shadow: none !important;}
.fullclose:hover img {background:var(--color-primary-000);}

.omr{display:flex;}
.omr .desc_list{width:auto;}
.desc_list {list-style: disc;color: #777;font-size: 16px;font-weight: 500;padding-left: 0;padding-inline-start: 20px;line-height: 1.4; width: 90%;}
.desc_list.lists{list-style-type: none;}
.desc_list >li {padding-bottom: 5px; font-size: var(--fontsize-body-2); word-break:keep-all; white-space: normal; line-height:1.3;}
.desc_list li b {color: #2B398F; font-size: var(--fontsize-body-2);line-height: 200%;}
.alert-text{display: none;}
.icoClose {cursor: pointer;z-index: 10;}
@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
.alert-info.minimized{ transform: scale3d(1.01, 1.01, 1.01); float:right; width:fit-content; height:auto; padding: 12px 16px;  justify-content: space-between; font-size:var(--fontsize-body-2);font-weight: var(--fontweight-body-1); letter-spacing: var(--font-spacing-1); line-height:var(--fontlineheight-1);align-items: center;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius: 12px; background: var(--color-alert-100); box-shadow: none; animation: fadeIn 0.5s ease-in-out forwards; cursor: pointer;}
.alert-info.personal.minimized{margin:0}
.alert-info.minimized:hover {background: var(--color-alert-overlay);}
.alert-info.minimized > .alert-text{display: block; color: var(--color-alert-200) !important;font-size:var(--fontsize-body-3); text-align: center;}
.alert-info.minimized > .close{display: none;}
.alert-info.minimized .desc_list{display: none !important;}
.alert-info.minimized .omr{display:none !important;}



.header-btn ul,.header-btn li { padding:0; margin:0}
.header-btn li {display:inline-block}
.header-btn .sns-btn { padding:0 10px}
.title-wrap {padding:20px 0; border:none; background:#fff; position:relative; width:100%; z-index:9999}

.table.table-blue.text-center.no-margin-vr.group{border:none; border-top:1px solid #bbd6e3}
.table.table-blue tbody tr{line-height: var(--fontlineheight-4) !important;}
.table-blue tbody tr .multiline { line-height: 2 !important; word-break: keep-all;}
.table-blue tbody tr th.group{padding:0;background:#fff !important; border:none !important}
.table-gray tbody tr th.group{padding:0;background:#fff !important; border:none !important}
.q-group.pTag.on{width:100%; margin-top: 20px; text-align: left !important; font-weight: bold; font-size: 15px; color: white; background: #1f5990; display:block !important; padding:10px 20px}



/* 체크박스 기본 */
.checkbox_default{display: block;position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer;font-size: 22px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.checkbox_default .checkmark{position: absolute;top: 6.5px;left: 0;height: 22px;width: 22px;background-color: #fff; border-radius: 3px; border: 2px solid var(--color-gray-500);}
.checkbox_default:hover input ~ .checkmark { background-color: var(--color-primary-000);}
.checkbox_default input:checked ~ .checkmark { background-color: var(--IDS_Primary-500); border-color: var(--IDS_Primary-500);}
.checkmark:after {content: ""; position: absolute; display: none;}
.checkbox_default input:checked ~ .checkmark:after {display: block;}
.checkbox_default .checkmark:after { left: 7px;top: 3px;width: 4.5px;height: 10px;border: solid white;border-width: 0 2.5px 2.5px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}




@media all and (min-width:1024px) and (max-width:1279px) {
  .container {
    width: 1024px;
  }
  #dispDp>.main-visual .visual-container{gap: 20px;}
  #dispDp>.main-visual .visual-container .first-wrap, #dispDp>.main-visual .visual-container .second-wrap{padding: 16px;}
  #dispDp>.main-visual .visual-container .first-wrap img, #dispDp>.main-visual .visual-container .second-wrap img{max-height: 168px;}
  #dispDp>.main-visual .visual-container img{max-height: 204px;}
}

/* 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
  .container {
    width: 768px;
  }
  .header-wrap > .container .header-subbody {padding: 0 16px;}
  .select-btn-wrap-complete {display: flex; justify-content:center; align-items:center; flex-direction:column; padding:20px 16px; gap: 12px!important;}
}

/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) {
  .container { width: 100%;}
  .sub-content {padding-top: 0;}
  .sub-body { padding: 24px 0;}
  .sub-body.test { padding: 12px 0 !important;}
  .sub-body .alert-info { font-size:var(--fontsize-body-2);font-weight: var(--fontweight-body-1); letter-spacing: var(--font-spacing-1); line-height:var(--fontlineheight-1); flex: 1;}
  .header-wrap > .container {width: 100%;}
  .header-wrap > .container > h1 {font-size:var(--fontsize-body-2);font-weight: var(--fontweight-body-5);}
  .header-wrap > .container > .header-subbody {padding: 0;}
  .header-wrap > .container > .header-subbody > .flow-list {display: none;}
  .header-wrap > .container .logo svg, .header-wrap > .container .logo img {display: block;float:right;}
  .alert-info .minimized {display:none;}
  .alert-info .minimized .omr{display:none;}
  .sub-body .select-btn-wrap { float: none; flex: 1;}
  .btn-hero { flex-grow: 1; height: auto}
  #modal4 .btn-hero{ flex-grow: 0;}
  .btn-hero-primary {flex-grow: 2;}
  .select-btn-wrap-complete {display: flex; justify-content:center; align-items:center; flex-direction:column; padding:20px 16px; gap: 12px!important;}
  .wrapper-complete{padding:40px 0 !important;}
}

/* 모바일 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) {
  #dispDp>.main-content {padding: 0;}
  .container { width: 100%; }
  .sub-content {padding-top: 0;}
  .sub-body { padding: 24px 0;}
  .sub-body.test { padding: 12px 0 !important;}
  .sub-body .alert-info { font-size:var(--fontsize-body-2);font-weight: var(--fontweight-body-1); letter-spacing: var(--font-spacing-1); line-height:var(--fontlineheight-1);}
  .sub-body .alert-info.Num {margin:12px}
  .header-wrap > .container {width: 100%;}
  .header-wrap > .container > h1 {font-size:var(--fontsize-body-2);font-weight: var(--fontweight-body-5);}
  .header-wrap > .container > .header-subbody {padding: 0;}
  .header-wrap > .container > .header-subbody > .flow-list {display: none;}
  .header-wrap > .container .logo svg, .header-wrap > .container .logo img {display: block;float:right;}
  .alert-info .minimized {display:none;}
  .sub-body .select-btn-wrap { float: none; flex: 1;}
  .btn-hero { flex-grow: 1; height: auto}
  #modal4 .btn-hero{ flex-grow: 0;}
  .btn-hero-primary { flex-grow: 2;}
  .omr{flex-direction:column;}
  .omr .desc_list >li {padding-bottom: 5px; font-size: var(--fontsize-body-2);line-height:1.2;}
  .desc_box.alert-info .desc_list >li {padding-bottom: 8px; font-size: var(--fontsize-body-3);line-height:1.2;}
  .desc_box.alert-info .desc_list >li b{line-height:1.6;}
  .desc_box.alert-info .minimized {margin:0;}
  .desc_box.alert-info .minimized .omr{display:none;}
  .modal-header{padding: 38px 28px 23px !important}
  .modal-body{ padding: 24px 28px !important}
  .modal-body p span{ padding: 12px 12px 12px 6px!important}
  .modal-body p span .mandatory-mark{ padding: 0 !important; }
  .modal-alert{	padding: 0px 28px 16px !important;}
  .modal-alert strong{font-size: var(--fontsize-body-3); padding:0 6px;}
  .select-btn-wrap-complete {display: flex; justify-content:center; align-items:center; flex-direction:column; padding:20px 16px; gap: 12px!important;}
  .wrapper-complete{padding:40px 0 !important;}
  #dispDp>.main-content>.container>.row .version-select-wrap .radio .tooltip-label .tooltip-text{ white-space: normal !important; max-width: 280px; word-break: keep-all;}
}


/* .main-visual { background:url(../images/auto/hero-bg.png) top center; min-height:300px; position:relative} */
.main-visual.PRQ{ background: no-repeat left url(../images/auto/hero-bg.png);background-size: cover; height:300px;}
.main-visual.PRQ .visual-container{display: flex; width: 100%; height: 100%; justify-content: center; align-items: center;gap: 70px;}
.main-visual.PRQ .visual-container .first-wrap{border-radius: 16px;border: 1px solid rgba(255, 255, 255, 0.30); background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) -11.45%, rgba(255, 255, 255, 0.4) 14%, rgba(255, 255, 255, 0.3) 82%, rgba(255, 255, 255, 0.1) 113.6%);backdrop-filter: blur(12px);padding: 22px;}
.main-visual.PRQ .visual-container .first-wrap.white{ background: #FFF !important;}
.main-visual.PRQ .visual-container .first-wrap.Fimg{ padding: 0 !important; border-radius: 24px !important;}
.main-visual.PRQ .visual-container .first-wrap.none{ border-radius: 0; border: none; background: none; backdrop-filter: none; padding: 0;}
.main-visual.PRQ .visual-container .first-wrap.nonePadding{ padding: 0; }
.main-visual.PRQ .visual-container .first.A1HeightControl{ max-height: 224px; }
.main-visual.PRQ .visual-container .second-wrap{border-radius: 16px;border: 1px solid rgba(255, 255, 255, 0.30); background: rgba(255, 255, 255, 0.25);backdrop-filter: blur(16px);padding: 22px; max-height: 226px; max-width:581px;overflow: hidden;}
.main-visual.PRQ .visual-container .second-wrap h2{font-size: 19px; font-weight: 600; line-height: 1.4; color:#111111; word-break: keep-all;padding-left:24px;border-left:1px solid #2B3A9C;font-family:pretendard !important;margin-left: 0 !important;padding-bottom:12px}
.main-visual.PRQ .visual-container .second-wrap p{font-size: 17px; font-weight: 500; line-height: 1.4; color:#111111; word-break: keep-all;padding-left:24px;border-left:1px solid #2B3A9C;font-family:pretendard !important;margin-left: 0 !important;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.main-visual.PRQ .visual-container .second-wrap p span{font-size: 17px; font-weight: 500; line-height: 1.4; color:#111111; word-break: keep-all;font-family:pretendard !important;}
.main-visual.PRQ .visual-container .first-wrap img,.main-visual.PRQ .visual-container .second-wrap img{max-height: 180px;}
.main-visual.PRQ .visual-container .first-wrap .first.Fimg{ max-height: 224px !important;}
.main-visual.PRQ .visual-container .second{max-height: 226px;}
.main-visual.PRQ .visual-container .second.white{border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.30); background:#ffffff80;}
.main-visual .hero-text {color:#fff; float:left; padding:80px 10px 0 0; width:60%}
.main-visual .hero-text h2 {font-size:30px; padding:20px 0}
.main-visual .hero-text p {font-size:16px}
.main-visual .hero-img { padding:25px 0 20px 10px; float:right; }
.main-visual .hero-img img{width: 300px;height:auto}
.main-content { padding-top:30px; border-top:1px solid #ddd; }
.sample-text { font-size:14px; font-weight:bold; padding:15px 0; display:inline-block}

.mandatory-mark {vertical-align: super;color: #F55 !important; line-height: 0.1; max-width: 8px; padding: 0 !important;}
.test-form .iconBox .form-inline label{height: 28px !important; width: 28px; min-width: 28px; padding: 0;}
.test-form .iconBox .form-inline .radio-inline input[type="radio"]:checked + label,
.test-form .iconBox .form-inline .radio-inline input[type="checkbox"]:checked + label { background-color: var(--IDS_Primary-500) !important; border-color: #fff;}

#dispDp>.main-content>.container>.row .version-select{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#dispDp>.main-content>.container>.row .version-select-wrap{display: flex; justify-content: center; align-items: center;width: 100%;gap: 24px;}
#dispDp>.main-content>.container>.row .desc_box-wrap{display: flex; justify-content: center; align-items: center;width: 100%;flex-direction: column;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio{display: flex; flex-direction: column; justify-content: center;align-items: center;  padding: 28px; margin: auto 0 !important; border-radius: 16px;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio:has(input[type="radio"]:checked + label){background-color: var(--color-primary-100);}
#dispDp>.main-content>.container>.row .version-select-wrap .radio label{display: flex; align-items: center; justify-content: center; height: 30vw; width: 30vw; max-width: 220px; min-width: 144px; max-height: 160px; min-height: 144px; padding: 0; border:1px solid var(--color-gray-400); border-radius: 16px;  background-color: #fff;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio label img{ margin-left: 12px;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio .div-version-select{font-size: 42px;font-weight: 800;display: flex; justify-content: center;align-items: center;text-shadow: 0 0 20px #ffffffcc;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio .tooltip-label{position: relative;cursor: pointer;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio .tooltip-label .tooltip-text{position: fixed; top: 0; left: 0; transform: translateY(-50%); background-color: #111111e0;color: #fff; padding: 8px 12px; border-radius: 8px; white-space: nowrap;font-size: 14px; z-index: 1000; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: none; pointer-events: none;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio input[type="radio"]:hover + label{background-color: var(--color-primary-100) !important; box-shadow: 0px 4px 5px 0px rgba(50, 58, 90, 0.05), 0px 1px 10px 0px rgba(50, 58, 90, 0.08), 0px 2px 4px 0px rgba(50, 58, 90, 0.08); transition: all 0.6s;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio input[type="radio"]:checked + label{background-color: var(--color-primary) !important; border:2px solid var(--color-primary-400); }
#dispDp>.main-content>.container>.row .version-select-wrap .radio input[type="radio"]:checked ~ .sample-text {color: var(--color-primary) !important;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio input[type="radio"]:checked ~ .sample-text span ~ p{color: var(--color-primary) !important;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio input[type="radio"]:checked + label svg path[stroke] {stroke: #ffffff;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio input[type="radio"]:checked + label svg rect {fill: #fff;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio input[type="radio"]:checked + label svg rect[fill-opacity="0.6"] {fill-opacity: 0.8;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio input[type="radio"]:checked + label svg rect[fill-opacity="0.2"] {fill-opacity: 0.5;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio input[type="radio"]:checked + label svg path[fill] {fill: var(--color-primary-200);}
#dispDp>.main-content>.container>.row .version-select-wrap .radio .sample-text{width: 100%; text-align: center; line-height: 1.4;padding-top: 20px;overflow: hidden; font-size: var(--fontsize-title-3)!important; letter-spacing: var(--font-spacing);font-weight: var(--fontweight-title-1); color: var(--color-gray-900);}
#dispDp>.main-content>.container>.row .version-select-wrap .radio .test-title-sub{width: 100%; text-align: center; line-height: 1.2;overflow: hidden; font-size: var(--fontsize-body-3); letter-spacing: var(--font-spacing);font-weight: 400; color: var(--color-gray-600);padding:0 !important;}
#dispDp>.main-content>.container>.row .version-select-wrap .radio .sample-text p{width: 100%; text-align: center; line-height: 1.4;overflow: hidden; font-size: var(--fontsize-body-2); letter-spacing: var(--font-spacing);font-weight: var(--fontweight-title-3); color: var(--color-gray-800);}

.test-box { border:1px solid #eeeeee; border-radius:2px; background:#fcfcfc; padding:30px; margin-bottom:20px; cursor:pointer}
.test-box:hover,
.test-box.active { background:#fff; }
.test-box:hover .test-icon,
.test-box.active .test-icon { background:#ff5757}
.test-icon {width:40px; height:40px; background:#656565; border-radius:50%; color:#fff; text-align:center; display:block; line-height:40px; font-size:24px; font-weight:bold}
.test-box-text { margin-left:30px}
.test-box-text h3 { margin-top:10px; font-size:17px}
.test-box-text p { margin-top:10px; font-size:13px}

.select-btn-wrap { display: flex; justify-content: space-between; gap: 12px; margin:30px 0; text-align:center; float:right}
.select-btn-wrap-complete {display: flex; gap: 24px;text-align:center;width:100%; justify-content:center }
.select-btn-wrap-center{ display: flex; justify-content: space-between; gap: 12px; margin:30px 0; text-align:center; align-items: center; justify-content: center;}
.select-btn-wrap-center.margin-x{margin:30px 15px;}
.btn-hero { width:120px;padding: 16px 24px; height: auto; -webkit-border-radius:42px;-moz-border-radius:42px;border-radius:42px; font-size:var(--fontsize-button1); text-align:center; background:#fff; border:1px solid; border-color:var(--IDS_Primary-500); color:var(--IDS_Primary-500); line-height:var(--fontlineheight-1); display:inline-block; cursor:pointer; font-weight:bold; margin-bottom:10px}
.btn-hero:hover,
.btn-hero:focus,
.btn-hero:active { background:var(--IDS_Primary-200); text-decoration:none}
.btn-hero.disabled { background:#e3e3e3; border-color:#e3e3e3; color:#555}

.table-popup > thead > tr{
  width: 100%;
}
.table-popup > thead > tr > th,
.table-popup > thead > tr > td{
  padding: 0 8px;
  white-space: nowrap;
  line-height: 4 !important;
  display: table-cell;
}
tfoot > tr > td > .form-inline {float: right; display: table;}
tfoot > tr > td > .form-inline .form-group {display: table-cell;}
.btn-xs {width:80px; height: 44px; border-radius: 16px;padding: 8px; white-space: nowrap; display: flex; align-items: center;justify-content: center;}
.inspection_list_wrap .inspection_list li .btn-wppsi {font-size: var(--fontsize-body-2);margin-left: 16px; background:none; color:var(--color-primary-500); border: 1.5px solid var(--color-primary-500);}
.inspection_list_wrap .inspection_list li .btn-wppsi:hover,
.inspection_list_wrap .inspection_list li .btn-wppsi:focus,
.inspection_list_wrap .inspection_list li .btn-wppsi:active { background:var(--color-primary-600); color:#fff; border-color:var(--color-primary-600); text-shadow: #11111110 1px 0 10px;}

.btn-sm { width:100px; height: 42px; border-radius: 16px; align-items: center;justify-content: center; font-size: var(--fontsize-body-2); display: table-cell;}
.btn-gray:hover,
.btn-gray:focus,
.btn-gray:active { background:var(--color-gray-600); color:#fff; border-color:var(--color-gray-600);}

.btn-gray { border-color:var(--color-gray-500); color:#fff; background:var(--color-gray-500);}
.btn-gray:hover,
.btn-gray:focus,
.btn-gray:active { background:var(--color-gray-600); color:#fff; border-color:var(--color-gray-600);}

.btn-red { border-color:var(--color-alert-100); color:var(--color-alert-200); background:var(--color-alert-100);}
.btn-red:hover,
.btn-red:focus,
.btn-red:active { background:var(--color-alert-200); color:#fff; border-color:var(--color-alert-200);}

.btn-hero-primary { width:200px; border-color:var(--IDS_Primary-500); color:#fff; background:var(--IDS_Primary-500)}
.btn-hero-primary.bg { width:240px; border-color:var(--IDS_Primary-500); color:#fff; background:var(--IDS_Primary-500); display: flex; align-items: center; justify-content: space-between; padding: 20px 40px;}
.btn-hero-primary:hover,
.btn-hero-primary:focus,
.btn-hero-primary:active { background:var(--IDS_Primary-600); color:#fff; border-color:var(--IDS_Primary-600)}

.btn-hero-primary.btn-Bsame { border-color:#84aed1; color:#fff; background:#84aed1}
.btn-hero-primary.btn-Bsame:hover,
.btn-hero-primary.btn-Bsame:focus,
.btn-hero-primary.btn-Bsame:active { background:#fff; color:#84aed1; border-color:#84aed1}

.btn-hero.btn-result{ border-color: #2a6296; color: #fff; background: #2a6296}
.btn-hero.btn-result:hover,
.btn-hero.btn-result:focus,
.btn-hero.btn-result:active { background:#fff; color:#2a6296; text-decoration:none}


.sub-body input,.sub-body select,.sub-body .input-group-addon { border-radius:0; background:#fff;}

.radio-inline, .checkbox-inline {padding-left: 0}
.other-inline label{margin: 0 !important;}
.sub-body select, .test-form select{ -o-appearance: none;-webkit-appearance: none;-moz-appearance: none;appearance: none; -webkit-border-radius: 8px;-moz-border-radius:8px;border-radius:8px!important;}
.sub-body .iconBox, .test-form .iconBox {position: relative; /* padding: 0 16px; */}
.sub-body .iconBox .form-control option,.test-form .iconBox .form-control option {padding: 3px 0;font-size: 16px;}
.sub-body .iconBox.form-inline,.test-form .iconBox.form-inline {font-size: var(--fontsize-body-3);line-height: 2;}
.sub-body .iconBox.form-inline .icoCal,.test-form .iconBox.form-inline .icoCal{top: 6px;}
.iconBox .icoArrow,.iconBox .icoCal{position: absolute; top: 32px; right: 12px; z-index: 1; width: 48px; height: 32px; display: flex; justify-content: center; align-items: center;}
.sub-body .iconBox .form-control:focus + .icoCal svg path {stroke: var(--IDS_Primary-500);}
.sub-body .iconBox .form-control:hover + .icoCal svg path {stroke: var(--IDS_Primary-500);}
.test-form .iconBox .form-inline {display: flex; gap:8px; align-items: center; justify-content: center; }
.test-form .iconBox .form-inline label{height: 28px !important; width: 28px; min-width: 28px; padding: 0;}
.test-form .iconBox .form-inline .radio-inline input[type="radio"]:checked + label,
.test-form .iconBox .form-inline .radio-inline input[type="checkbox"]:checked + label { background-color: var(--IDS_Primary-500) !important; border-color: #fff;}
.test-form .table-blue .iconBox .icoArrow {top: 25px;}
.test-form .table-blue .iconBox .icoArrow img {transform: rotate(-90deg);transition: transform 0.2s ease;}
.test-form .table-blue .iconBox:focus-within .icoArrow img {transform: rotate(0deg)}
.test-form .table-blue .iconBox .icoCal {top: 25px;}
.test-form .table-blue .iconBox.form-inline .icoCal {top: 10px;}
.table-gray .iconBox .icoArrow{top: 18px;}



.test-title { display: flex; clear:both; padding:12px 0 48px 0; display:block; height:auto}
.test-title h3{ display: flex; justify-content: center; align-items: center; font-size:var(--fontsize-title-2); font-weight:var(--fontweight-title-2); letter-spacing: var(--font-spacing-2); line-height: var(--fontlineheight-1); color:var(--color-gray-900); margin: 0 40px 8px 0; float: left;}
.test-title .desc_box { display: flex; align-items: center; margin: 0; }
.test-title .desc_box .alert-info{margin-top: 8px;}
.test-title .bullet { background:url(../images/auto/bullet.png) no-repeat; width:4px; height:17px; display:block; float:left; margin:0 10px 0 0}
.test-title .flow-list { background-color: #fff; margin-left: 8px;}
.test-title .flow-list .flow-cont { background-color: var(--IDS_Primary-300); border: 1px solid var(--IDS_Primary-300); border-radius: 16px; cursor: pointer;}
.test-title .flow-list .flow-cont:hover { background-color: #ABD0FF; border: 1px solid #ABD0FF;}
.test-title .flow-list .flow-cont > a{ color: var(--color-gray-800); font-size:var(--fontsize-body-3); letter-spacing:var(--font-spacing);}


#form h5, #form .test-form h5, .container h5 { color: var(--IDS_Primary-500); font-size:var(--fontsize-body-1); font-weight: var(--fontweight-title-3); line-height: var(--fontlineheight-1); letter-spacing: var(--font-spacing-1); margin-bottom: 8px;}
h5 .desc_box.minimized{margin-bottom: 20px;}
#form .test-form:last-of-type, #form .test-form.no-padding-vr {padding-bottom: 0px;}
#test-wrap {display: flex; justify-content: space-between;}

.table-blue { border:none; border-spacing: 0px 16px;}
.table-blue tbody tr, .table-blue tfoot tr { border: none; vertical-align:baseline; display: table-row;vertical-align: inherit;unicode-bidi: isolate;border-color: inherit;}
.table-blue tbody tr.etc-none, .table-blue tfoot tr.etc-none{ display: none !important;}
.table-blue tbody tr.etc, .table-blue tfoot tr.etc{ display: table-row;}
.table-blue tbody tr th, .table-blue tfoot tr th {align-items:center; border: none; height:48px; width: 40%; font-size:var(--fontsize-title-3);font-weight: var(--fontweight-title-3); letter-spacing: var(--font-spacing); line-height:var(--fontlineheight-1); margin:auto; padding:8px; margin-bottom:4px; vertical-align: middle !important;}
.table-blue thead tr th { border: none; height:40px; vertical-align:middle;}
.table-blue thead tr td, .table-blue tbody tr td, .table-blue tfoot tr td { padding: 0; border: none; height:54px; vertical-align:middle; }
.table-blue th { background:#fff; color:var(--color-gray-700) }


.sub-body.test #table-data-wrap {display: flex; justify-content: space-between; background-color: #fff;}
.sub-body.test #table-data-wrap #form{width: 73%; border-radius: 16px;}
.sub-body.test #table-data-wrap #form .control-down{padding: 8px 0; font-size: var(--fontsize-body-2); display: flex; flex-direction: column; gap: 14px; display: none;}
.sub-body.test #table-data-wrap #form .control-down .list-inline .btn {display: flex;}
.sub-body.test #table-data-wrap #form .test-area{ border: 1px; height: 720px; margin-top: 10px; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; border-radius: 12px;}
.sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_list_wrap .answer textarea {border: 1px solid var(--color-primary); border-radius:8px}
.sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_list_wrap .answer textarea:disabled {border: 1px solid #ccc; border-radius:4px}
.sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_list_wrap .answer input[type="radio"]:checked ~ p,
.sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_list_wrap .answer input[type="checkbox"]:checked ~ p { color: var(--color-gray-900) !important; font-weight: 800;}


.sub-content .sub-body.test.darkmode .desc_box.test-topper{background-color: #333333!important; background: var(--color-primary-overlay-03dp)}
.sub-body.test.darkmode .desc_box.test-topper.content p{color:var(--color-primary-400);}
.sub-body.test.darkmode .desc_box.test-topper.content .info-content{color:var(--color-gray-500)}
.sub-body.test.darkmode .desc_box.test-topper.content.expanded{background: var(--Elevation-Overlay-24dp) !important;color: var(--IDS_Primary-200);}
.sub-body.test.darkmode .desc_box.test-topper.content.expanded p {color:var(--color-primary-400);border-left: 2px solid var(--color-primary-400);}
.sub-body.test.darkmode .desc_box.test-topper.content.expanded .info-content {color:var(--color-gray-500)!important; border:none;}


/* 전체화면 모드 응답영역 */
.sub-body.test #table-data-wrap:fullscreen { padding: 32px}.sub-body.test #table-data-wrap:-webkit-fullscreen { padding: 32px 64px;}.sub-body.test #table-data-wrap:-moz-fullscreen { padding: 32px 64px;}
.sub-body.test #table-data-wrap:fullscreen #form{ width: 78%;}.sub-body.test #table-data-wrap:-webkit-fullscreen #form{ width: 78%;}.sub-body.test #table-data-wrap:-moz-fullscreen #form{ width: 78%;}
.sub-body.test #table-data-wrap:fullscreen .test-area{ height: 100% !important;padding-bottom:100px;}.sub-body.test #table-data-wrap:-webkit-fullscreen .test-area{ height: 100% !important;padding-bottom:100px;}.sub-body.test #table-data-wrap:-moz-fullscreen .test-area{ height: 100% !important;padding-bottom:100px;}
.sub-body.test #table-data-wrap:fullscreen .test-area .answer_title{ padding: 24px 32px !important; font-size: var(--fontsize-title-3);}.sub-body.test #table-data-wrap:-webkit-fullscreen .test-area .answer_title{ padding: 24px 32px !important; font-size: var(--fontsize-title-2);}.sub-body.test #table-data-wrap:-moz-fullscreen .test-area .answer_title{ padding: 24px 32px !important; font-size: var(--fontsize-title-2);}
.sub-body.test #table-data-wrap:fullscreen .test-area .answer_title h1{ font-size: var(--fontsize-title-2);display: inline-block;}.sub-body.test #table-data-wrap:-webkit-fullscreen .test-area .answer_title h1{ font-size: var(--fontsize-title-3);display: inline-block;}.sub-body.test #table-data-wrap:-moz-fullscreen .test-area .answer_title h1{ font-size: var(--fontsize-title-3);display: inline-block;}
.sub-body.test #table-data-wrap:fullscreen .test-area .subq-title{ padding: 0 12px; font-size: var(--fontsize-body-1); font-weight: 500;}
.sub-body.test #table-data-wrap:fullscreen .test-area .answer_list_wrap{ padding: 32px}.sub-body.test #table-data-wrap:-webkit-fullscreen .test-area .answer_list_wrap{ padding: 32px}.sub-body.test #table-data-wrap:-moz-fullscreen .test-area .answer_list_wrap{ padding: 32px}
.sub-body.test #table-data-wrap:fullscreen .test-area .answer_list_wrap h2{ font-size: var(--fontsize-body-2);}.sub-body.test #table-data-wrap:-webkit-fullscreen .test-area .answer_list_wrap h2{ font-size: var(--fontsize-body-2);}.sub-body.test #table-data-wrap:-moz-fullscreen .test-area .answer_list_wrap h2{ font-size: var(--fontsize-body-2);}
.sub-body.test #table-data-wrap:fullscreen .test-area .answer_list_wrap .answer p{ font-size: var(--fontsize-body-1);}.sub-body.test #table-data-wrap:-webkit-fullscreen .test-area .answer_list_wrap .answer p{ font-size: var(--fontsize-body-1);}.sub-body.test #table-data-wrap:-moz-fullscreen .test-area .answer_list_wrap .answer p{ font-size: var(--fontsize-body-1);}
.sub-body.test #table-data-wrap:fullscreen .test-area .answer_list_wrap .answer label{ width: 80px; height:80px; font-size: var(--fontsize-title-2);}.sub-body.test #table-data-wrap:-webkit-fullscreen .test-area .answer_list_wrap .answer label{ width: 80px; height:80px; font-size: var(--fontsize-title-2);}.sub-body.test #table-data-wrap:-moz-fullscreen .test-area .answer_list_wrap .answer label{ width: 80px; height:80px; font-size: var(--fontsize-title-2);}
.sub-body.test #table-data-wrap:fullscreen .test-area .answer_list_wrap > .answer_list + .answer_list { margin-top: 16px; }
.sub-body.test #table-data-wrap:fullscreen .test-area .page.group-area .answer_list_wrap .answer label{ width: auto; height:auto; font-size: var(--fontsize-title-2);}.sub-body.test #table-data-wrap:-webkit-fullscreen .test-area .page.group-area .answer_list_wrap .answer label{ width: auto; height:auto; font-size: var(--fontsize-title-2);}.sub-body.test #table-data-wrap:-moz-fullscreen .test-area .page.group-area .answer_list_wrap .answer label{ width: auto; height:auto; font-size: var(--fontsize-title-2);}
.sub-body.test #table-data-wrap:fullscreen .test-area .page.group-area .answer_list_wrap .answer.etc .small_txt input{ width: 160px; height: 38px; font-size: var(--fontsize-title-2);}.sub-body.test #table-data-wrap:-webkit-fullscreen .test-area .page.group-area .answer_list_wrap .answer label{ width: 160px; height: 38px; font-size: var(--fontsize-title-2);}.sub-body.test #table-data-wrap:-moz-fullscreen .test-area .page.group-area .answer_list_wrap .answer label{ width: 160px; height: 38px; font-size: var(--fontsize-title-2);}
/* 전체화면 모드 컨트롤러 */
.sub-body.test #table-data-wrap:fullscreen #test-control {width: 20%; min-width: 276px; height: 100% !important;}
.sub-body.test #table-data-wrap:fullscreen #test-control .control-wrap { height: 100%; gap:22px; padding: 24px;}
.sub-body.test #table-data-wrap:fullscreen #test-control .control-wrap .list-inline:has(.btn-save) {display: block;}
.sub-body.test #table-data-wrap:fullscreen #test-control .control-wrap .control-right > h1{font-size: var(--fontsize-title-3);}
.sub-body.test #table-data-wrap:fullscreen #test-control .control-wrap .control-right .test-number-wrap .total-array .section .number-buttons {grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap:8px;}
.sub-body.test #table-data-wrap:fullscreen #test-control .control-wrap .control-right .test-number-wrap .total-array .section .number-buttons .number-btn {width: 52px; height: 52px; border-radius: 20px; font-size: var(--fontsize-body-1);}
.sub-body.test #table-data-wrap:fullscreen #test-control .control-wrap .control-right .test-number-wrap .total-array .section .number-buttons .number-btn.except {width: auto;}
.sub-body.test #table-data-wrap:fullscreen #test-control .control-wrap .control-right .progress_bar{font-size: var(--fontsize-body-2);}
.sub-body.test #table-data-wrap:fullscreen .fullclose{display: flex;}
.sub-body.test #table-data-wrap:-webkit-full-screen .test-area,.sub-body.test #table-data-wrap:-webkit-full-screen #test-control {height: 100% !important}
.sub-body.test #table-data-wrap:-moz-full-screen .test-area,.sub-body.test #table-data-wrap:-moz-full-screen #test-control {height: 100% !important;}

/* 통합(제출)버튼 */
#test-control{width: 26%; position:relative; right: 0; top:0; background-color:transparent;}
#test-control .control-wrap {padding: 16px ; display: flex; flex-direction: column; justify-content: space-between; height: 720px; border-radius: 12px; margin-top: 10px; border: 2px solid var(--color-gray-300);color: var(--color-gray-900);}
#test-control .control-wrap .list-inline { display: flex; justify-content: space-between; height: 48px; border-radius: 24px;}
#test-control .control-wrap .list-inline li{ width: 100%;}
#test-control .control-wrap .list-inline .btn {padding: 11px; display: flex; justify-content: center; align-items: center; height: 100%; border-radius: 24px; font-size: var(--fontsize-body-2); font-weight: var(--fontweight-body-2); transition: all 0.3s;}
#test-control .control-wrap .list-inline .btn.btn-default {gap:8px}
#test-control .control-wrap .list-inline:has(.btn-save) {display: none;}
#test-control .control-wrap .list-inline .btn.btn-save {border: 1px solid var(--color-gray-400); background-color: var(--color-gray-200); color: var(--color-gray-900);}
#test-control .control-wrap .list-inline .btn.btn-pre {border: 1px solid var(--color-gray-400); color: var(--color-gray-800);}
#test-control .control-wrap .list-inline .btn.btn-pre:hover {background-color: var(--color-gray-200); color: var(--color-gray-900);}
#test-control .control-wrap .list-inline .btn.btn-next { gap: 8px; border: 1px solid var(--color-primary-500); color:var(--color-primary);}
#test-control .control-wrap .list-inline .btn.btn-next:hover {background-color: var(--color-primary-100); color: var(--color-primary-700);}
#test-control .control-wrap .list-inline .btn.btn-submit { gap: 8px; background-color: var(--IDS_Primary-600);pointer-events:auto;}
#test-control .control-wrap .control-right {padding: 8px 0; font-size: var(--fontsize-body-2); display: flex; flex-direction: column; gap: 14px;}
#test-control .control-wrap .control-right > h1{font-size: var(--fontsize-body-1);}
/* 통합(제출)버튼 다크모드*/
#test-control .control-wrap.darkmode { background: var(--Elevation-Overlay-06dp)!important;border: none;}
#test-control .control-wrap .list-inline .btn.btn-pre.darkmode {background: var(--Elevation-Overlay-06dp)!important; border: 1px solid var(--darkmode-font)!important; color: var(--darkmode-font) !important;}
#test-control .control-wrap .list-inline .btn.btn-pre.darkmode:hover {background: var(--Elevation-Overlay-16dp)!important; border: 1px solid var(--darkmode-font)!important; color: #fff !important;}
#test-control .control-wrap .list-inline .btn.btn-next.darkmode {background: var(--Elevation-Overlay-06dp)!important; border: 1px solid var(--color-primary-500); color: var(--color-primary-500) !important;;}
#test-control .control-wrap .list-inline .btn.btn-next.darkmode svg path{stroke: var(--color-primary-500) !important;}
#test-control .control-wrap .list-inline .btn.btn-next.darkmode:hover {background: var(--Elevation-Overlay-16dp)!important; border: 1px solid var(--color-primary-400)!important; color: var(--color-primary-300) !important;}
#test-control .control-wrap .list-inline .btn.btn-next.darkmode:hover svg path{stroke: var(--color-primary-300) !important;}
#test-control .control-wrap .list-inline .btn.btn-submit.darkmode { background-color: var(--color-primary)!important;color: #fff !important;pointer-events:auto;}
#test-control .control-wrap.darkmode .control-right > h1{color: #fff !important;}

.sub-body.test .btn-wrap { padding-top: 16px; display: flex; justify-content: end; align-items: center; height: auto; }
.sub-body.test .btn-wrap .btn.btn-submit { padding: 11px; min-width: 120px; display: flex; justify-content: center; background-color: var(--IDS_Primary-600); color: #fff;border-radius: 24px; font-size: var(--fontsize-body-2); font-weight: var(--fontweight-body-2);pointer-events:auto;}
.sub-body.test .btn-wrap .btn.btn-next { padding: 11px; min-width: 120px; display: flex; justify-content: center;border-radius: 24px; font-size: var(--fontsize-body-2); font-weight: var(--fontweight-body-2);}

/* 진행률 바 */
#test-control .control-wrap .control-right > .progress_bar {display: flex; flex: 1; width: 96%; height: 17px !important; align-items: center; font-size: var(--fontsize-body-4); gap:8px; white-space: nowrap; padding: 0 4px;}
#test-control .control-wrap .control-right > .progress_bar .progress{width: 90%; height:8px; margin: 0; background-color: var(--color-gray-200);}
#test-control .control-wrap .control-right > .progress_bar .progress .progress-bar{border-radius: 4px; background-color:var(--color-primary-700)!important;width: 0; transition: width 0.3s ease-in-out; -webkit-transition: width 0.3s ease-in-out;}
/* 진행률 바 res*/
.sub-body.test .progress.res{height: 6px; margin:6px 4px; display: none;}
.sub-body.test .progress.res .progress-bar{background-color:var(--color-primary-700)!important;}
/* 진행률 바 다크모드*/
#test-control .control-wrap .control-right > .progress_bar .progress.darkmode{background: var(--Elevation-Overlay-03dp) !important;}
.sub-content .sub-body.test.darkmode .progress.res{background: var(--Elevation-Overlay-03dp);}

/* 타이머 */
#test-control .control-wrap .control-right #timers_wrapper .timer_container { box-sizing: border-box; padding: 8px; display: flex; justify-content: space-around; border-radius: 8px;}
#test-control .control-wrap .control-right #timers_wrapper .timer_container .times{display: flex; justify-content: space-between; gap:4px; width: auto; align-items: center;}
#test-control .control-wrap .control-right #timers_wrapper .time_display { font-size: var(--fontsize-title-2); font-weight: 600; line-height: 1; color: var(--color-primary-700); white-space: nowrap;}
#test-control .control-wrap .control-right #timers_wrapper .time_default {font-size: var(--fontsize-body-1); font-weight: 400; color: var(--color-gray-500); white-space: nowrap; justify-content: right; display: flex; align-items: flex-end;}
#test-control .control-wrap .control-right #timers_wrapper .image_btn { border-radius: 999px; width: 30px; height: 30px; cursor: pointer; background: none; border: none; background-color: transparent;}
#test-control .control-wrap .control-right #timers_wrapper .image_btn:hover { background-color: var(--color-gray-200);}
#test-control .control-wrap .control-right #timers_wrapper .timer_container.ended { background: #ddd;}
#test-control .control-wrap .control-right #timers_wrapper .timer_container.ended .time_display { color: #d32f2f;}
#test-control .control-wrap .control-right #timers_wrapper .image_btn.stop_btn { display: none;}
/* 타이머 다크모드*/
#test-control .control-wrap.darkmode .control-right #timers_wrapper .timer_container { background: var(--Elevation-Overlay-06dp);}
#test-control .control-wrap.darkmode .control-right #timers_wrapper .image_btn:hover { background:var(--Elevation-Overlay-24dp);}

/* 문항 번호 네비게이션 res*/
.sub-content .sub-body.test .test-number-wrap-res {display: none; background-color:var(--color-gray-100);-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);box-shadow: inset 1px 2px 2px 0 rgba(0, 0, 0, .05); font-size: var(--fontsize-body-4); gap:8px; overflow-y: hidden;white-space: nowrap; scroll-snap-type: x mandatory; padding: 0; height: 54px; font-size: var(--fontsize-body-2);color: var(--color-gray-700); font-weight: var(--fontweight-body-2);}
.sub-content .sub-body.test .test-number-wrap-res .total-array { display: flex; flex-wrap: nowrap; width: max-content; margin-top: 0;}
.sub-content .sub-body.test .test-number-wrap-res .total-array .section { margin-top: 4px; display: flex; align-items: center; padding: 0 4px; padding-right: 24px; height: 100%;}
.sub-content .sub-body.test .test-number-wrap-res .total-array .section .title { padding-right: 24px;}
.sub-content .sub-body.test .test-number-wrap-res .total-array .section + .section { padding-left: 24px; border-left: 2px solid var(--color-gray-300);}
.sub-content .sub-body.test .test-number-wrap-res .total-array .section .number-buttons { display: flex; flex-wrap: nowrap; gap:6px; padding:0;}
.sub-content .sub-body.test .test-number-wrap-res .total-array .section .number-buttons .number-btn {width: 38px; height: 38px; margin: 2px 2px 4px; border: 1px solid var(--color-primary-200); background-color: #fff; border-radius: 19px; color: var(--color-gray-900); font-weight:400; display: flex; justify-content: center; align-items: center;line-height: 1;}
.sub-content .sub-body.test .test-number-wrap-res .total-array .section .number-buttons .number-btn.except{width: auto;padding: 12px;}
.sub-content .sub-body.test .test-number-wrap-res .total-array .section .number-buttons .number-btn:hover {background-color: var(--color-primary-100);}
.sub-content .sub-body.test .test-number-wrap-res .total-array .section .number-buttons .number-btn.active {background-color: var(--IDS_Primary-500) !important; border: none!important; color: #fff !important;}
.sub-content .sub-body.test .test-number-wrap-res .total-array .section .number-buttons .number-btn.active:hover {background-color: var(--color-primary-400);border: 2px solid var(--color-primary-400);}
.sub-content .sub-body.test .test-number-wrap-res .total-array .section .number-buttons .number-btn.off{background-color: var(--color-gray-300); border: 2px solid var(--color-gray-300); color: var(--color-gray-500);}
.sub-content .sub-body.test .test-number-wrap-res .total-array .section .number-buttons .number-btn.off:hover{background-color: var(--color-gray-400); border: 2px solid var(--color-gray-400); color: var(--color-gray-600);}

/* 문항 번호 네비게이션 res*/
.sub-content .sub-body.test .test-number-wrap-res {background-color: var(--Elevation-Overlay-03dp)!important;}
.sub-content .sub-body.test.darkmode .test-number-wrap-res .total-array .section + .section {border-top: 1px solid var(--color-gray-700); background: var(--Elevation-Overlay-03dp) !important;}
.sub-content .sub-body.test.darkmode .test-number-wrap-res .total-array .section .number-buttons .number-btn {border: none; background: var(--Elevation-Overlay-96dp)!important;color: var(--darkmode-font) !important; font-size: var(--fontsize-body-1);}
.sub-content .sub-body.test.darkmode .test-number-wrap-res .total-array .section .number-buttons .number-btn.except{width: auto;}
.sub-content .sub-body.test.darkmode .test-number-wrap-res .total-array .section .number-buttons .number-btn:hover {background: var(--color-primary-overlay-09dp)!important;box-shadow:var(--Elevation-Shadow-01dp); color: #ffffffc0!important;}
.sub-content .sub-body.test.darkmode .test-number-wrap-res .total-array .section .number-buttons .number-btn.active {background-color: var(--color-primary-700) !important; border: none!important; color: var(--Surface)!important;box-shadow:var(--Elevation-Shadow-02dp)}
.sub-content .sub-body.test.darkmode .test-number-wrap-res .total-array .section .number-buttons .number-btn.active:hover {background-color: var(--color-primary-700)!important;}
.sub-content .sub-body.test.darkmode .test-number-wrap-res .total-array .section .number-buttons .number-btn.active.off{color: var(--Surface) !important;background-color: var(--color-primary-700)!important;}
.sub-content .sub-body.test.darkmode .test-number-wrap-res .total-array .section .number-buttons .number-btn.active.off:hover{background-color: var(--color-primary-700)!important;}
.sub-content .sub-body.test.darkmode .test-number-wrap-res .total-array .section .number-buttons .number-btn.off{ color: var(--color-primary-700) !important; background: var(--Elevation-Overlay-06dp)!important;}
.sub-content .sub-body.test.darkmode .test-number-wrap-res .total-array .section .number-buttons .number-btn.off:hover{background-color: var(--color-gray-400); border: 2px solid var(--color-gray-400); color: var(--color-gray-600);}

/* 스크롤*/
.sub-content .sub-body.test .test-number-wrap-res::-webkit-scrollbar { height: 9px; position: absolute; right:0; top: 0;background: #e7e7e7;}
.sub-content .sub-body.test .test-number-wrap-res::-webkit-scrollbar-thumb { border: 2px solid #fcfcfc !important; background: #e7e7e7;border-radius: 10px;}
.sub-content .sub-body.test .test-number-wrap-res::-webkit-scrollbar-thumb:active { background: #D8D8D8;}
.sub-content .sub-body.test .test-number-wrap-res::-webkit-scrollbar-track { background-color: #fcfcfc;}
.sub-content .sub-body.test.darkmode .test-number-wrap-res::-webkit-scrollbar { height: 8px; position: absolute; right:0; top: 0;background: var(--Elevation-Overlay-03dp);}
.sub-content .sub-body.test.darkmode .test-number-wrap-res::-webkit-scrollbar-thumb { border: 2px solid #252525 !important; background: var(--Elevation-Overlay-24dp);border-radius: 10px;}
.sub-content .sub-body.test.darkmode .test-number-wrap-res::-webkit-scrollbar-thumb:active { background: var(--Elevation-Overlay-48dp);}
.sub-content .sub-body.test.darkmode .test-number-wrap-res::-webkit-scrollbar-track { background: var(--Elevation-Overlay-01dp);}

/* 문항 번호 네비게이션 */
#test-control .control-wrap .control-right > .test-number-wrap {display: flex; background-color:var(--color-gray-100);-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);box-shadow: inset 1px 2px 2px 0 rgba(0, 0, 0, .05); align-items: top; font-size: var(--fontsize-body-4); gap:8px; overflow-y: scroll; overflow-x: hidden; padding: 12px 0 12px 3px; border-radius: 4px; height: 60vh; min-height: 240px; max-height: 340px; font-size: var(--fontsize-body-2);color: var(--color-gray-700); font-weight: var(--fontweight-body-2);}
#test-control .control-wrap .control-right > .test-number-wrap .total-array { width: 100%;}
#test-control .control-wrap .control-right > .test-number-wrap .total-array .section + .section { padding: 12px 4px; border-top: 1px solid var(--color-gray-300);}
#test-control .control-wrap .control-right > .test-number-wrap .total-array .section .number-buttons { display: grid;grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); gap:2px; padding:8px 0;}
#test-control .control-wrap .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn {width: 38px; height: 38px; margin: 6px; border: 1px solid var(--color-primary-200); background-color: #fff; border-radius: 12px; color: var(--color-gray-900); font-weight:400; display: flex; justify-content: center; align-items: center; line-height:0.5}
#test-control .control-wrap .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn.except {width: fit-content;padding: 12px;}
#test-control .control-wrap .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn:hover {background-color: var(--color-primary-100);}
#test-control .control-wrap .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn.active {background-color: var(--IDS_Primary-500) !important; border: none!important; color: #fff !important;}
#test-control .control-wrap .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn.active:hover {background-color: var(--color-primary-400);border: 2px solid var(--color-primary-400);}
#test-control .control-wrap .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn.off{background-color: var(--color-gray-300); border: 2px solid var(--color-gray-300); color: var(--color-gray-500);}
#test-control .control-wrap .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn.off:hover{background-color: var(--color-gray-400); border: 2px solid var(--color-gray-400); color: var(--color-gray-600);}
/* 문항 번호 네비게이션 다크모드 */
#test-control .control-wrap.darkmode .control-right > .test-number-wrap {background: var(--Elevation-Overlay-03dp)!important;}
#test-control .control-wrap.darkmode .control-right > .test-number-wrap .total-array .section {background: var(--Elevation-Overlay-03dp) !important;}
#test-control .control-wrap.darkmode .control-right > .test-number-wrap .total-array .section + .section {border-top: 1px solid var(--color-gray-700); background: var(--Elevation-Overlay-03dp) !important;}
#test-control .control-wrap.darkmode .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn {border: none; background: var(--Elevation-Overlay-48dp)!important; border-radius: 12px; color: var(--color-gray-900);}
#test-control .control-wrap.darkmode .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn.except {width: auto;}
#test-control .control-wrap.darkmode .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn:hover {background: var(--color-primary-overlay-09dp)!important;box-shadow:var(--Elevation-Shadow-01dp); color: #ffffffc0!important;}
#test-control .control-wrap.darkmode .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn.active {background-color: var(--color-primary-700) !important; border: none!important; color: var(--Surface)!important;box-shadow:var(--Elevation-Shadow-02dp)}
#test-control .control-wrap.darkmode .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn.active:hover {background-color: var(--color-primary-700)!important;}
#test-control .control-wrap.darkmode .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn.active.off{color: var(--Surface) !important;background-color: var(--color-primary-700)!important;}
#test-control .control-wrap.darkmode .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn.active.off:hover{background-color: var(--color-primary-700)!important;}
#test-control .control-wrap.darkmode .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn.off{ color: var(--color-primary-700) !important; background: var(--Elevation-Overlay-06dp)!important;}
#test-control .control-wrap.darkmode .control-right > .test-number-wrap .total-array .section .number-buttons .number-btn.off:hover{border: none;background: var(--color-primary-overlay-02dp)!important;}

/* 문항 번호 네비게이션 스크롤 */
#test-control .control-wrap .control-right > .test-number-wrap::-webkit-scrollbar { width: 16px; position: absolute; right:0; top: 0; }
#test-control .control-wrap .control-right > .test-number-wrap::-webkit-scrollbar-thumb { border: 5px solid var(--color-gray-100) !important; height: 17%; background-color: rgb(231, 231, 231);border-radius: 10px;}
#test-control .control-wrap .control-right > .test-number-wrap::-webkit-scrollbar-thumb:active { background: rgb(219, 219, 219);}
#test-control .control-wrap .control-right > .test-number-wrap::-webkit-scrollbar-track { background-color: rgba(230, 230, 230, 0.1); display: none;}
/* 문항 번호 네비게이션 스크롤 다크모드 */
#test-control .control-wrap.darkmode .control-right > .test-number-wrap::-webkit-scrollbar { width: 16px; position: absolute; right:0; top: 0;background: var(--Elevation-Overlay-03dp);}
#test-control .control-wrap.darkmode .control-right > .test-number-wrap::-webkit-scrollbar-thumb { border: 5px solid #252525 !important; height: 17%; background: var(--Elevation-Overlay-24dp);border-radius: 10px;}
#test-control .control-wrap.darkmode .control-right > .test-number-wrap::-webkit-scrollbar-thumb:active { background: var(--Elevation-Overlay-48dp);}
#test-control .control-wrap.darkmode .control-right > .test-number-wrap::-webkit-scrollbar-track { background-color: rgba(230, 230, 230, 0);}

/* 응답영역 */
.answer_wrap { border: 2px solid var(--color-gray-300); background:#fff; color:var(--color-gray-700); text-align: left;margin-right:4px; border-radius: 12px; overflow: hidden;}
.answer_wrap > ul { display: flex; list-style: none; flex-direction: column; padding: 0;margin: 0; width: 100%;}
/* 검사종료 */
body.comp-wrap{ background-color:#F1F3F6!important}
.sub-body.comp-wrap{ border:0px; background-color:transparent!important;}
.wrapper-complete{box-shadow:1px 4px 6px 3px rgb(0 28 46 / 16%);border: none !important; width: 100%; height: auto;border-radius: 16px; padding:80px 0;background-color:#fff}
.wrapper-complete .comp-testicon {display: flex;justify-content: center;}
.wrapper-complete .comp-testicon.default {display: flex;justify-content: center;}
.wrapper-complete .comp-testicon img{width: 64px;height: 64px;border-radius: 4px;margin-bottom: 24px; box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.15);}
.wrapper-complete .comp-testicon.default img{width: 44px;height: 44px;border-radius: 8px;margin-bottom: 24px; background-color:#F1F3F6;box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.5);}
.test-name-complete{color:#002766 !important;padding: 0 16px 60px 16px; margin-bottom: 68px; font-size:30px; font-weight:700; letter-spacing:-0.3; line-height:1.4; color:#111;display:flex;align-items:center;justify-content:center; border-bottom:1px solid #DDDDDD; word-break: keep-all;white-space: normal; text-align:center}
.test-name-complete .target-name {font-size:24px; font-weight:500;}
.end-alert-complete{text-align: center; font-size:24px; font-weight:600; letter-spacing:-0.1; line-height:1.4; color:#111;word-break: keep-all;white-space: normal;}
.end-alert-info-complete{text-align: center;font-size:18px; font-weight:600; letter-spacing:var(--font-spacing); line-height:1.4;margin: 16 0 90 0px; color:#555}

.scta-btn1{height:64px;font-size:20px;text-align:center;width:100%;max-width:260px;padding: 16px 32px;background:#fff;border:1px solid #0aa1b85e;color:#0AA1B8;line-height:1.2;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:500;border-radius:99px;word-break: keep-all;white-space: normal}
.scta-btn1:hover,.scta-btn1:focus, .scta-btn1:active{ background: #fff; color : #0AA1B8; border-color: #0aa1b8a4;}
.scta-btn2{height:64px;font-size:20px;text-align:center;width:100%;max-width:260px;padding: 16px 32px;background:#fff;border:1px solid #ddd;color:#555555;line-height:1.2;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:500;border-radius:99px;word-break: keep-all;white-space: normal}
.scta-btn2:hover,.scta-btn2:focus, .scta-btn2:active{ background: #fff; color : #555555; border-color: #999;}
.scta-btn3{height:64px;font-size:20px;text-align:center;width:100%;max-width:260px;padding: 16px 32px;background:#006FFF;border:1px solid #0060EF;color:#fff;line-height:1.2;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:500;border-radius:99px;word-break: keep-all;white-space: normal}
.scta-btn3:hover,.scta-btn3:focus, .scta-btn3:active{ background: #0065E9; color : #fff; border-color: #0065E9;}


@media screen and (max-width:1023px) {
	.scta-btn1, .scta-btn2, .scta-btn3{max-width:400px;}
	.test-name-complete{width: 100%; padding-bottom: 40px;margin-bottom: 40px; padding-top:0px; font-size:24px; line-height:1.2; display: flex;flex-direction: column;}
	.test-name-complete .target-name {font-size:20px;}
	.end-alert-complete{font-size:20px;padding: 0 16px}
	.end-alert-info-complete{font-size:16px;margin: 8 0 40 0px; color:#555}
}
.answer_wrap > ul .answer_com { border: none !important; width: 100%; height: auto; justify-content: space-between; border-top: 1px solid #ddd;margin-top: 24px; border-radius: 16px; overflow: hidden;}
.answer_wrap > ul .answer_com:first-child { margin:0}
.answer_wrap > ul .answer_com .answer_title { background-color: var(--color-primary-000);margin-bottom: 8px; font-size:var(--fontsize-title-3);font-weight: var(--fontweight-title-4); letter-spacing:-0.3px; line-height:140% !important; padding:16px !important; color: var(--color-gray-900);}
.answer_wrap > ul .answer_com .answer_title h1{font-size: var(--fontsize-title-3); color: var(--color-gray-900);}
.answer_wrap > ul .answer_com .answer_title p{font-size: var(--fontsize-body-2); line-height: var(--fontlineheight-4); margin-top: 4px; color: var(--color-gray-900);}
.answer_wrap > ul .answer_com .answer_title { background-color: var(--color-primary-000);margin-bottom: 8px; font-size:var(--fontsize-title-3); padding:16px !important; color: var(--color-gray-900);}
.answer_wrap > ul .answer_com .subq-title{ display: flex; align-items: center; padding-left: 12px; font-size: 18px; font-weight: var(--fontweight-title-4); letter-spacing:-0.3px; line-height:140% !important; color: #2B398F;}
.answer_wrap > ul .answer_com .answer_list_wrap { display: flex; flex-direction: column; margin: 4px 8px; gap: 12px; padding: 22px 8px; border: 1px solid var(--color-gray-300);  border-radius: 12px;}
.answer_wrap > ul .answer_com .answer_list_wrap h2{ font-size: var(--fontsize-body-2);}
.answer_wrap > ul .answer_com .answer_list { display: grid; grid-template-columns: repeat(auto-fit, minmax(10px, 1fr)); gap:8px;width: 100%;list-style: none; padding: 0; margin: 0; }
.answer_wrap > ul .answer_com .check_list { display: flex; flex-wrap: wrap; gap:8px;width: 100%;list-style: none; padding: 0; margin: 0; }
.answer_wrap > ul .answer_com .check_list li { display: flex; align-items: center; }
.answer_wrap > ul .answer_com .answer_list .answer{ display: flex; align-items: center; flex-direction: column; width: auto; margin: 0 8px;text-align: center;box-sizing: border-box;}
.answer_wrap > ul .answer_com .answer_list .answer p{ font-size: var(--fontsize-body-2); color: var(--color-gray-500); font-weight: var(--fontweight-button2); white-space: wrap; text-align: center; padding-top: 8px;line-height: var(--fontlineheight-4);word-break: keep-all;}
.answer_wrap > ul .answer_com .answer_list .answer input[type="radio"]{ display: none;}
.answer_wrap > ul .answer_com .check_list .answer input[type="radio"]{ display: none;}
.answer_wrap > ul .answer_com .answer_list .answer label{ height: 56px; width: 56px; border-radius: 9999px; display: flex; align-items: center;justify-content: center; font-size: var(--fontsize-button0);}
/* 응답영역 가로로 긴 문항 */
.answer_wrap > ul .answer_com.horizon .answer_list{ display: flex; flex-direction:column;}
.answer_wrap > ul .answer_com.horizon .answer_list .answer{ display: flex; align-items: center; flex-direction: row; width: auto; margin: 0 8px; padding-bottom: 12px; gap: 16px;}
.answer_wrap > ul .answer_com.horizon .answer_list .answer p { text-align: left; padding: 0;}
.answer_wrap > ul .answer_com.horizon .answer_list .answer label { min-width: 120px;}
/* 응답영역 다크모드*/
.test-area.darkmode .answer_wrap{ border: none; background: var(--Elevation-Overlay-06dp); }
.test-area.darkmode ul{ background: var(--Elevation-Overlay-01dp);}
.test-area.darkmode .answer_com{  background: var(--Elevation-Overlay-06dp);}
.test-area.darkmode .answer_wrap .answer_title { background: var(--Elevation-Overlay-16dp); color:#fff; background: var(--color-primary-overlay-02dp);}
.test-area.darkmode .answer_wrap .answer_title h1{ color:var(--darkmode-font); }
.test-area.darkmode .answer_wrap .subq-title { color:var(--darkmode-font);}
.test-area.darkmode .answer_wrap .answer_list_wrap { background: var(--Elevation-Overlay-08dp); border: none;}
.test-area.darkmode .answer_wrap .answer_list_wrap .answer_list{ background: var(--Elevation-Overlay-08dp);}
.test-area.darkmode .answer_wrap .answer_list_wrap .check_list{ background: var(--Elevation-Overlay-08dp);}
.test-area.darkmode .answer_wrap .answer_list_wrap .answer{ background: var(--Elevation-Overlay-08dp);}
.test-area.darkmode .answer_wrap .answer_list_wrap .answer p{color: var(--darkmode-font);}
.test-area.darkmode .answer_wrap .answer_list_wrap .answer label:hover{color: #ffffffc0; border: 1px solid #ffffffc0 !important;}
.test-area.darkmode .answer_wrap .answer_list_wrap .answer textarea:disabled {border: 1px solid #555 !important;background: var(--Elevation-Overlay-06dp);}
.test-area.darkmode .answer_wrap .answer_list_wrap .answer textarea {background: #fff;}
.test-area.darkmode .answer_wrap .answer_list_wrap .answer input[type="radio"] + label,
.test-area.darkmode .answer_wrap .answer_list_wrap .answer input[type="checkbox"] + label{ border: 1px solid #ffffff3f; background:var(--Elevation-Overlay-08dp)!important;}
.test-area.darkmode .answer_wrap .answer_list_wrap .answer input[type="radio"]:checked + label,
.test-area.darkmode .answer_wrap .answer_list_wrap .answer input[type="checkbox"]:checked + label{ border: none; background:var(--color-primary)!important; color:#fff;}
.test-area.darkmode .answer_wrap .answer_list_wrap .answer:hover input[type="radio"]:checked + label,
.test-area.darkmode .answer_wrap .answer_list_wrap .answer:hover input[type="checkbox"]:checked + label{ border: none!important; background:var(--color-primary-700)!important; color: #ffffff99;}
.sub-body.test #table-data-wrap #form .test-area.darkmode .answer_wrap .answer_list_wrap .answer input[type="radio"]:checked ~ p,
.sub-body.test #table-data-wrap #form .test-area.darkmode .answer_wrap .answer_list_wrap .answer input[type="checkbox"]:checked ~ p { color: #fff !important;}

/* 응답문항 영역 스크롤 */
.test-area::-webkit-scrollbar { width: 10px; position: absolute; right:0; top: 0;}
.test-area::-webkit-scrollbar-thumb { border: 2px solid #fff; height: 17%; background-color: rgb(231, 231, 231);border-radius: 10px;}
.test-area::-webkit-scrollbar-thumb:active { background: rgb(219, 219, 219);}
.test-area::-webkit-scrollbar-track { display: none;}
/* 응답문항 영역 스크롤 다크모드드 */
.test-area.darkmode::-webkit-scrollbar {background: var(--Elevation-Overlay-01dp);}
.test-area.darkmode::-webkit-scrollbar-thumb { border: 2px solid #1E1E1E; background: var(--Elevation-Overlay-24dp);}
.test-area.darkmode::-webkit-scrollbar-thumb:active { background: var(--Elevation-Overlay-48dp);}
.test-area.darkmode::-webkit-scrollbar-track { background-color: rgba(230, 230, 230, 0);}

.table-blue-test { border-collapse: separate; border:none; border-spacing: 0px 16px; width: 100%; table-layout: fixed;}
.table-blue-test th { background:#fff; color:var(--color-gray-700); text-align: left;}
.table-blue-test tbody { border-spacing: 8px; }
.table-blue-test tbody th{ width: 100%; }
.table-blue-test tbody .radio label { display: inline-block; width: 100%; text-align: center;}
.table-blue-test tbody tr, .table-blue-test tfoot tr { border-spacing: 8px; border: none; vertical-align:baseline; unicode-bidi: isolate;border-color: inherit;}
.table-blue-test tbody .test-answer { border: 10px solid #111;  border-spacing: 8px;}
.table-blue-test tbody tr th, .table-blue-test tfoot tr th { background-color: #F3FBFF; height: 48px; border: none; height:48px; font-size:var(--fontsize-title-3);font-weight: var(--fontweight-title-3); letter-spacing: var(--font-spacing); line-height:140% !important; padding:16px !important; vertical-align: middle !important;}
.table-blue-test tbody td, .table-blue-test tfoot td {border: none !important;text-align: center; padding: 8px;}

.table-blue-test thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}

.arrow_box {display:none;position: absolute; top:32px; width:320px;padding:16px 20px;margin-left:-16px;left:0;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background:var(--color-gray-overlay);color:#fff;font-size:var(--fontsize-body-3); line-height: var(--fontlineheight-2); white-space:wrap;z-index: 999;}
.arrow_box:after {position: absolute;bottom:100%; left: 24px; width: 0;height: 0;margin-left: -8px;border: solid transparent;border-color: #33333300;border-bottom-color: var(--color-gray-overlay);border-width: 10px;pointer-events: none;content: ' ';}
.quemark {position:relative; top: 3.5px; margin-left:4px; cursor: pointer;}
.quemark:hover p.arrow_box {display: block;}



.table-gray { border:none; border-bottom: 1px solid var(--color-gray-300);padding-bottom: 20px; border-collapse:separate; border-spacing: 8px 8px; flex: 1;}
.table-gray tbody tr td{text-align: middle; width: auto;}
.table-gray tbody tr th, .table-gray tfoot tr th { border: none; height:33px; font-size: var(--fontsize-body-1);text-align: center;vertical-align:middle;}
.table-gray thead tr th{ /* border: 1px solid #e4e4e4; */ height:32px; vertical-align:middle; padding: 0 !important;}
.table-gray thead tr td, .table-gray tbody tr td, .table-gray tfoot tr td { /* border: 1px solid #e4e4e4; */ height: 46px; text-align: center;}
.table-gray th { background:var(--color-gray-200); color:var(--color-gray-700); font-size: var(--fontsize-body-1); border-radius: 8px;}
.table-gray th:first-child { background:var(--color-primary-100); color:var(--color-gray-600);}
.table-gray tbody tr td { background:#fff; color:var(--color-gray-600);font-size: var(--fontsize-body-2); border-radius: 8px; }/* flex */
.table-gray thead tr td, .table-gray tbody tr td, .table-gray tfoot tr td { padding: 0 0 8px 0; border: none; height:54px; vertical-align:middle; }
.table-gray tbody tr td.additional { background:var(--color-primary-000); color:var(--color-gray-800);font-size: var(--fontsize-body-1);}


.table-popup { border:none; border-bottom: 1px solid var(--color-gray-300);padding-bottom: 20px; padding-top: 20px; border-collapse:separate; border-spacing: 8px 8px; flex: 1;}
.table-popup tbody tr td{text-align: middle; width: auto;}
.table-popup tbody tr th, .table-popup tfoot tr th { border: none; height:33px; font-size: var(--fontsize-body-1);text-align: center;vertical-align:middle;}
.table-popup thead tr th{ /* border: 1px solid #e4e4e4; */ height:32px; vertical-align:middle; padding: 0 !important;}
.table-popup thead tr td, .table-popup tbody tr td, .table-popup tfoot tr td { /* border: 1px solid #e4e4e4; */ height: 46px; text-align: center;}
.table-popup th { background:var(--color-gray-200); color:var(--color-gray-700); font-size: var(--fontsize-body-1); border-radius: 8px;}
.table-popup th:first-child { background:var(--color-primary-100); color:var(--color-gray-600);}
.table-popup tbody tr td { background:#fff; color:var(--color-gray-600);font-size: var(--fontsize-body-2); border-radius: 8px; }/* flex */
.table-popup thead tr td, .table-popup tbody tr td, .table-popup tfoot tr td { padding: 0 0 8px 0; border: none; height:54px; text-align: center;}
.table-popup tbody tr td.additional { background:var(--color-primary-000); color:var(--color-gray-800);font-size: var(--fontsize-body-1);}

/*//////////////////////////////////////////////////////////////////////////////// tfoot 해야됨 ////////////////////////////////////////////////////////////////////////////////*/


/* input_area */
.list-inline > li {display: block}
.form-inline span{ color: var(--IDS_Primary-400);}
.form-inline .form-control{ width:100%; display:inline-block; height: auto;}
.input-blue { float:right; width:284px}
.input-blue .form-control{background:#1d89cf; border:1px solid #1a7ab9; color:#fff; border-radius:2px; width:100%; height:38px; margin-top:-10px}
.form-control {display: block;width: 100%; height:auto; padding: 12px 16px; font-weight: var(fontweight-body-2); font-size:var(--fontsize-body-2);color:var(--color-gray-600);line-height: var(--fontlineheight-3);background-color: #fff;background-image: none;border: 1px solid var(--color-gray-400);border-radius: 8px !important;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.form-control.with-calendar-icon { background: url("../images/auto/kprq_icoCal.png") no-repeat;background-position: right 12px center; background-size: 24px 24px; padding-right: 48px;}
.form-control.with-arrow-icon {position: relative;padding-right: 48px;}
.select-wrapper {position: relative;display: inline-block;width: 100%;}
.select-wrapper.tbiec-etc::after { position: relative;}
.select-wrapper::after {content: "";position: absolute;top: 50%;right: 12px;width: 24px;height: 28px;background: url("../images/auto/kprq_info_btn_grey.png") no-repeat;background-size: 24px 28px;transform: translateY(-50%) rotate(0deg);transition: transform 0.2s ease;pointer-events: none;}
.select-wrapper:has(.form-control:disabled)::after{opacity: 0.4;transform: translateY(-50%) rotate(0deg);}
.select-wrapper:focus-within::after,.select-wrapper:active::after {transform: translateY(-50%) rotate(-90deg);}
.form-control.hasDatepicker:hover, .form-control.with-arrow-icon:hover {border-color: var(--IDS_Primary-600); outline: 0;}
.form-control:focus {border-color: var(--IDS_Primary-500);outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .2);box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .2);}
.form-control::-moz-placeholder {color: var(--color-gray-500);opacity: 1;}
.form-control:-ms-input-placeholder { color: var(--color-gray-500);}
.form-control::-webkit-input-placeholder {color: var(--color-gray-500);}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {cursor: default;color: var(--color-gray-500);background-color: #eee;opacity: 1;}
.form-control[disabled]:focus,.form-control[readonly]:focus {border-color:#CCCCCC;outline: 0;-webkit-box-shadow: none;box-shadow: none;}
.form-control.hasDatepicker[readonly],fieldset.hasDatepicker[disabled] .form-control.hasDatepicker, .form-control.with-arrow-icon {cursor: pointer;}
textarea.form-control { height: auto;}
input[type="search"] { -webkit-appearance: none;}
input[type="date"] { line-height: 34px;}
.form-group {margin-bottom: 15px;}
.radio,.checkbox {display: block;min-height: 20px;padding-left: 20px;margin-top: 10px;margin-bottom: 10px;}
.radio label,.checkbox label {display: inline;font-weight: normal;cursor: pointer;}




.test-button { border:1px solid #eeeeee; border-radius:2px; background:#fcfcfc; padding:15px; cursor:pointer; text-align:center;vertical-align:middle; font-size:17px; height:70px; margin:0 auto 20px auto}
.test-button:hover,
.test-button.active { background:#fff; }
.test-button span {display:inline-block; height:40px; vertical-align:top; margin:5px 0 0 5px}
.test-button:hover .mic-icon,
.test-button.active .mic-icon { background:url(../images/auto/icon-mic-hover.png) no-repeat}
.mic-icon {width:40px; height:40px; background:url(../images/auto/icon-mic-up.png) no-repeat; display:inline-block}
.test-button:hover .doc-icon,
.test-button.active .doc-icon { background:url(../images/auto/icon-word-hover.png) no-repeat}
.doc-icon {width:40px; height:40px; background:url(../images/auto/icon-word-up.png) no-repeat; display:inline-block}
.radio-wrap { padding:0 0 0 10px}
.test-form { padding-bottom:5px;text-align:left;clear:both}
.test-form input, select{ border-radius:0; box-shadow:none}
.no-padding-vr{ padding-top:0; padding-bottom:0}
.no-margin-vr{ margin-top:0; margin-bottom:0}
.padding-b-10 { padding-bottom:10px}
.padding-b-20 { padding-bottom:20px}
.padding-b-30 { padding-bottom:30px}
.padding-vr-10 { padding:10px 0}
.margin-b-10 { margin-bottom:10px}
.margin-b-20 { margin-bottom:20px}
.margin-b-30 { margin-bottom:30px}
.margin-vr-10 { margin:10px 0;clear:both}
.text-danger { color:#e31a00; font-weight:bold}
.box-danger { color:#a94442; background:#f2dede; border:1px solid #ebccd1; padding:20px}
.box-warning { color:#8a715f; background:#ffffff; border:none; padding:20px}
.box-warning2 { color: #333; background:#eeffe8; border: 1px solid #c4daac; padding: 20px}
.control-wrap.text-right .list-inline{float:right}
.control-wrap.text-right .list-inline li{float:left}
.bg-gray { background:#f9f9f9}
.test-modal { background:#f1f3f6; border:1px solid #bfbfbf; border-radius:0}
.test-modal h4 { font-size:16px; color:#6b6d70}
.test-modal .modal-header { border:none; padding:30px 20px 10px 20px}
.test-modal .modal-body { border:1px solid #e4e5e7; background:#fff; margin:0 20px; padding:20px}
.test-modal .modal-footer {text-align:center; border:none; margin-top:0; padding:10px 20px 20px 20px}
.modal-label {background:#727cb6; width:100%; height:32px; text-align:center; line-height:32px; color:#fff; border-radius: 4px;-webkit-border-radius:4px;-moz-border-radius:4px;}


/* 모달 */
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: auto; overflow-y: scroll; -webkit-overflow-scrolling: touch; outline: 0;}
.modal::-webkit-scrollbar { display: none;}
.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000;}
.modal-backdrop.fade { filter: alpha(opacity=0); opacity: 0;}
.modal-backdrop.in { filter: alpha(opacity=50); opacity: .5;}
.modal-dialog{ transform: translate(0, 0); position: relative; width: auto; margin: 16px;}
.modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);}
.modal-dialog .modal-content{ border-radius: 24px; position: relative; background-color: #fff; background-clip: padding-box; outline: none; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5);}
.modal-header{ background-color:none; display: flex; justify-content: space-between; align-items: center; min-height: 16.42857143px; padding: 15px; border-bottom: 1px solid #e5e5e5; padding: 38px 40px 23px}
.modal-header h4{ color: var(--color-gray-900); font-size: var(--fontsize-title-2);}
.modal-header button{ text-transform: none; overflow: visible;}
.modal-header button .close{ -webkit-appearance: none; padding: 0; cursor: pointer; background: transparent; border: 0;}
.close{ float: right; font-size: 21px; font-weight: bold; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; filter: alpha(opacity = 20); opacity: .2;}
.close:hover{ color: #000; text-shadow: 0 1px 0 #fff; filter: alpha(opacity = 40); opacity: .6; transition: all 0.3s;}
.modal-body{ position: relative; padding: 24px 40px}
.modal-alert{ position: relative;	padding: 0px 40px 32px;	line-height: var(--fontlineheight-1);}
.modal-body p{ margin:0;padding:0; border-bottom:none !important; font-size: var(--fontsize-body-1); color: var(--color-gray-600);}
.modal-body p span{ font-size: var(--fontsize-body-1); border: none !important; width:40% !important; background:#fff !important; color:#111; display: inline-block; font-weight: var(--fontweight-body-4); white-space: nowrap; padding: 16px 0 16px 12px;}
.modal-body p span .req{padding: 0 0 0 2; vertical-align: super; color:#F55; line-height: 0.1;}
.modal-body p .required-mark{ padding: 0;vertical-align: super; color:#F55; line-height:0;}
.modal-body .modal-body-title:first-of-type {margin-top: 0 !important;}
.modal-body .modal-body-title { padding-left: 8px;border-left: 2px solid #8189be;margin: 28px 0 12px;color: #2B398F;}
.modal-alert div{ font-size: var(--fontsize-body-2); font-weight: var(--fontweight-body-2); padding: 0 12px; white-space: wrap; color:#F55;}
.modal-footer{ padding: 24px 20px 32px; text-align: right; border-top: 1px solid #e5e5e5;}
.modal-footer .btn{ display: inline-block; padding: 11px 22px; margin-bottom: 0; min-width: 64px; font-size: var(--fontsize-button1); font-weight: var(--fontweight-button2); line-height: var(--fontlineheight-1); text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 28px;}
.modal-footer .btn.btn-primary{ color: #fff; background-color: var(--IDS_Primary-500); border-color: var(--IDS_Primary-600);}
.modal-footer .btn.btn-default{ color: #333; background-color: #fff; border-color: #ccc;}
*:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.modal-footer .btn + .btn { margin-bottom: 0; margin-left: 5px;}
.modal-footer:after{clear: both;}
.modal-footer:before,.modal-footer:after {display: table; content: " ";}

.modal-wrap {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(25, 25, 25, 0.6); z-index: 999;}
.modal-wrap.s_show {display: flex; justify-content:center; align-items:center}
.modal-pop {border-radius: 24px; max-width:480px; width:90%; margin:16px; top:auto; left:auto}
.modal-pop .btn-area {display: flex;justify-content:right;}
.modal-pop .btn-hero2,.modal-pop .btn-hero {min-width: 88px; font-size: 16px; height: 52px; border-radius:27px; text-align:center; border:1px solid; color: #fff; display:flex; align-items:center; justify-content:center; cursor: pointer; font-weight: bold;}
.modal-pop .txt-are, .txt-are2, .txt-are3, .txt-are4{font-family:pretendard;text-align:left; font-size: 16px; letter-spacing: -0.1px; font-weight: 600; line-height: 20px; padding: 24px 0; margin:0;color:var(--color-gray-700)!important; word-break: keep-all;}
.modal-pop .txt-are{padding-bottom: 0;}
.modal-pop .number-are {font-family:pretendard; font-size: 15px; background:#F2F2F2; color:#000000; border-radius:8px; margin: 30px 8px; padding: 12px; line-height: 1.4; word-break: keep-all;}
.modal-pop .number-are span {padding: 2px 14px;display: inline-block;}

@media (max-width: 768px) {
	.modal-pop {
    	max-width: 420px;
    }
	.modal-pop .txt-are, .txt-are2, .txt-are3, .txt-are4{
	    text-align: center;
	    font-size: 18px;
        padding: 24px 0 36px;
	}
	.modal-pop .number-are {
	    margin: 0 8px 30px;
	}
	.modal-pop .btn-area {
	    justify-content: center !important;
	}
	.modal-pop .btn-hero2, .modal-pop .btn-hero {
	    min-width: 116px;
	}
}
@media (min-width: 768px) {
	.modal-dialog {
	    width: 600px;
        margin: auto;
        margin-top: 20px;
	}
	.alert-info.minimized > .alert-text{
		font-size:var(--fontsize-body-3);
	}
	.alert-info.minimized {
		margin-right: 8px;
	}
}

.btn-modal-gray { color:#fff; font-weight:bold; background:#555555; border-radius:0; min-width:70px}
.btn-modal-gray:hover,
.btn-modal-gray:active,
.btn-modal-gray:focus {background:#444; color:#fff}
.error-wrap { padding:20px 0}
.error-wrap p { text-align:center}
.error-wrap .error-txt { font-size:16px; line-height:32px; padding-top:20px}


.table-responsive {padding:20px 36px; margin-bottom: 20px; box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1); border-radius: 16px;}
.table-responsive.header-rubric{margin-top: 16px; padding: 36px;}
.table-responsive.new-rubric{margin: 20px 0;}
.table-responsive.rubric{margin:40px 0; padding:0 20px; overflow:hidden;background-color: #fff;box-shadow:none;border: none!important;}

table {
  max-width: 100%;
  background-color: transparent;
  margin:0 !important;
}
th {
  text-align: left;
}
.table {
  width: 100%;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tbody > tr > .iconBox {
  padding: 0 8px 0 16px;
  line-height: 4;
  vertical-align: middle;
}

.table > tfoot > tr > th,
.table > tfoot > tr > td {
  padding: 0 8px;
  line-height: 4;
  vertical-align: middle;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: none;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}
.table .table {
  background-color: #fff;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}
.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #f5f5f5;
}
table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  display: table-cell;
  float: none;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
  background-color: #f5f5f5;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr.active:hover > th {
  background-color: #e8e8e8;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
  background-color: #dff0d8;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr.success:hover > th {
  background-color: #d0e9c6;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
  background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr.info:hover > th {
  background-color: #c4e3f3;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
  background-color: #fcf8e3;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr.warning:hover > th {
  background-color: #faf2cc;
}

.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
  background-color: #f2dede;
}

.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr.danger:hover > th {
  background-color: #ebcccc;
}
@media screen and (max-width: 991px){
  .table-responsive > .table > tfoot > tr > td > div > .radio-inline,
  .table-responsive > .table > tfoot > tr > td > div > .checkbox-inline{
    margin-bottom: 8px;
  }
  .table-responsive > .table > tbody > tr > td > div > .radio-inline label,
  .table-responsive > .table > tbody > tr > td > div > .checkbox-inline label{
    margin: 4px 0;
  }
  .table-blue > tbody > tr > th{
    vertical-align:text-top!important;
  }
}
@media (max-width: 767px) {
  .table > thead > tr > th,
  .table > tbody > tr > th,
  .table > tfoot > tr > th,
  .table > thead > tr > td,
  .table > tbody > tr > td,
  .table > tbody > tr > .iconBox,
  .table > tfoot > tr > td {
    padding: 0;
  }
  .table-blue { border-spacing: 0px 12px;}
  .table-blue tbody tr td:has(.full){
    display: flex;
    width: auto;
  }
  .full:has(input[type="radio"]){
    display: flex;
    justify-content: center;
    height: 100%;
    letter-spacing: var(--font-spacing-1);
  }
  .full input[type="radio"] + label b{
    font-size: var(--fontsize-body-2);
    font-weight: var(--fontweight-body-1);
    line-height: var(--fontlineheight-1);
    color: var(--color-gray-600);;
    height: auto;
    width: auto;
    cursor: pointer;
  }
  .full input[type="radio"] + label b small{
    font-size: var(--fontsize-body-3);
    line-height: var(--fontlineheight-1);
    font-weight: var(--fontweight-body-3);
  }
  .table > tbody {
    width: 100%;
  }

  .table-blue > thead > tr > th,
  .table-blue > tbody > tr > th,
  .table-blue > tfoot > tr > th,
  .table-blue > thead > tr > td,
  .table-blue > tbody > tr > td,
  .table-blue > tbody > tr > .iconBox,
  .table-blue > tfoot > tr > td {
    padding: 0 8px 0 16px;
    line-height: 1.5;
    vertical-align: middle;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td { white-space: nowrap; display: block; height:inherit; }
  .table-responsive {
    padding: 32px 20px;
    margin-bottom: 24px;
    overflow-y: visible;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-responsive.rubric{padding: 8px;}
  .test-form .iconBox {
    padding: 0;
  }
  .arrow_box {width:50vw; top:28px;}
  .arrow_box:after {left: 24px;margin-left: -8px;}

  .table-blue,.table-gray,.table-popup{
      width: 100%;
  }
  .table-blue tbody tr,
  .table-gray tbody tr {
      width: 100%;
  }
  .table-gray tbody tr:first-of-type{
    display: none;
  }
  .table-gray tbody tr td:first-of-type{
    height: 45px;
    vertical-align: middle;
  }

  .table-blue tbody tr th{
      font-size: var(--fontsize-body-2);
      width: auto;
      border: none;
      margin-top: 16px;
      margin-bottom: 0px;
      padding: 0;
  }
  .table-blue tbody tr th:first-child{
      margin-top: 4px;
  }
  .table-gray tbody tr th {
      font-size: var(--fontsize-body-2);
      width: auto;
      border: none;
      margin: 0;
  }
  .table-blue tbody tr td,
  .table-blue tbody tr .iconBox{
      font-size: var(--fontsize-body-2);
      border: none;
      padding: 12px 0 12px 0;
  }
  .table-gray tbody tr td {
      font-size: var(--fontsize-body-2);
      width: 100%;
      border: none;
      margin-bottom:24px;
      display: flex !important;
      justify-content: center;
      align-items: center;
  }
  .table-gray tbody tr .additional::before {
      display: none;
  }

  .table-gray tbody tr td:before {
    content: attr(data-label); /*data-label을 가상요소 표출*/
    display: flex;
    flex: 1;
    flex-basis: auto;
    justify-content: left;
    font-weight: var(--fontweight-body-1)
  }
  .table-gray .iconBox .icoArrow{top: 16px; right:-2px;}
  .test-form .table-blue .iconBox .icoArrow { top: 19px; right: 0;}
  .test-form .table-blue .iconBox .icoCal {top: 20px; right: 0;}
  .test-form .table-blue .iconBox.form-inline .icoCal {top: 18px !important; right: 0;}

  .table-responsive .table {
    margin-bottom: 0;
  }


  .iconBox .form-inline {width: 60%;}

  .sub-body .iconBox.form-inline .icoCal {position: absolute; top: 12px; right: 4px;}

  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table > tbody > tr > td{
    white-space: wrap;
  }
  .table-responsive > .table > tbody > tr > td > .radio-inline label,
  .table-responsive > .table > tbody > tr > td > div > .checkbox-inline label{
    margin-bottom: 8px;
  }
  .table-responsive > .table > tfoot > tr > td > div > .radio-inline,
  .table-responsive > .table > tfoot > tr > td > div > .checkbox-inline{
    margin-bottom: 8px;
  }

  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}






/* 라디오 */
.table-blue input[type="checkbox"],.table-blue input[type="radio"] {display: none;}
.table-gray input[type="checkbox"],.table-gray input[type="radio"] {display: none;}
.table-popup input[type="checkbox"],.table-gray input[type="radio"] {display: block;}
.table-popup input[type="radio"] {
  appearance: none;
  border: max(2px, 1px) solid #fff;
  border-radius: 50%;
  width: 1.1em;
  height: 1.1em;
  transition: border 0.1s ease-in-out;
}

/* 라디오 버튼 default */
.table-popup input[type="radio"] { border: 1.5px solid var(--color-gray-500)}
.table-popup input[type="radio"]:checked { border: 3px solid #fff; background-color: var(--IDS_Primary-500); box-shadow: 0 0 0 1.5px var(--IDS_Primary-500);}
.table-popup td:has(input[type="radio"]):hover { background-color: var(--IDS_Primary-200);cursor: pointer;}
.table-popup td:has(input[type="radio"]:checked) { background-color: var(--IDS_Primary-200);}
.table-popup [type="radio"]:focus-visible {outline-offset: max(2px, 1px);outline: max(2px, 1px) dotted var(--IDS_Primary-400);}
.table-popup [type="radio"]:hover { background-color: var(--IDS_Primary-200); box-shadow: 0 0 0 1.5px var(--color-gray-500);cursor: pointer; }
.table-popup [type="radio"]:hover + label {cursor: pointer;}
.table-popup [type="radio"]:disabled {background-color: var(--color-gray-300); box-shadow: 0 0 0 1.5px var(--color-gray-400);}
.table-popup [type="radio"]:disabled + label {cursor: not-allowed;}



input[type="radio"] + label,
input[type="checkbox"] + label {
display: inline-block;
background-color: #fff;
height: auto;
width: auto;
min-width: 41px;
padding: 12px 16px;
border: 1px solid var(--color-gray-400);
text-align: center;
line-height: var(--fontlineheight-1);
font-weight:var(--fontweight-body-2);
font-size:var(--fontsize-body-2);
margin-bottom: 0;
border-radius: 8px;-webkit-border-radius:8px;-moz-border-radius:8px;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
input[type="checkbox"] + label {
display: inline-block;
background-color: #fff;
height: auto !important;
width: auto;
min-width: 41px;
padding: 12px 16px;
border: 1px solid var(--color-gray-400);
text-align: center;
line-height: var(--fontlineheight-1);
font-weight:var(--fontweight-body-2);
font-size:var(--fontsize-body-2);
margin-bottom: 0;
border-radius: 8px;-webkit-border-radius:8px;-moz-border-radius:8px;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.full:has(input[type="radio"]){
  display: block;
  justify-content: center;
}
.full input[type="radio"] + label{
display: flex;
flex-grow: 1 1 0;
justify-content: center;
height: auto;
width: auto;
cursor: pointer;
color: var(--color-gray-600);
border: 1px solid var(--color-gray-400);
}
.table-responsive > .table-blue > tbody > tr > td > .radio-inline.full label{margin-bottom: 0px;}
.full input[type="radio"] + label b{
font-size: var(--fontsize-body-1);
font-weight: var(--fontweight-body-1);
letter-spacing: var(--font-spacing);
line-height: var(--fontlineheight-1);
}
.full input[type="radio"] + label b small{
font-size: var(--fontsize-body-3);
letter-spacing: var(--font-spacing);
line-height: var(--fontlineheight-1);
font-weight: var(--fontweight-body-5);
}

.full input[type="radio"]:checked + label b{
  color: #fff;
}
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
  background-color: var(--IDS_Primary-500) !important;
  border-color: var(--IDS_Primary-500);
  color: #fff ;
}
input[type="radio"]:checked:hover + label,
input[type="checkbox"]:checked:hover + label {
  background-color: var(--IDS_Primary-600) !important;
  border-color: var(--IDS_Primary-600);
  color: #fff ;
}
input[type="radio"]:hover + label,
input[type="checkbox"]:hover + label {
  background-color: var(--IDS_Primary-200) !important;
  color:  var(--IDS_Primary-500) ;

}
input[type="radio"]:disabled + label,
input[type="checkbox"]:disabled + label {
  background-color: var(--color-gray-300) !important;
  border-color: var(--color-gray-400);
  color: var(--color-gray-500) ;
  cursor:not-allowed;
}/*
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin   ;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
} */


/* .radio-inline + .radio-inline:last-of-type,
.checkbox-inline + .checkbox-inline:last-of-type {
margin-top: 0;
margin-left: 6px;
} */
.radio,
.checkbox {
display: block;
min-height: 20px;
padding-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label,
.checkbox label {
display: inline;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
display: none;
float: left;
margin-left: -20px;
transform: scale(1.5);
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
}
.radio-inline,.checkbox-inline,
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-right: 6px;
margin-left: 0 !important;
padding-left: 0;
}
@media (max-width: 767px) {.radio-inline,.checkbox-inline,.radio-inline + .radio-inline,.checkbox-inline + .checkbox-inline { margin-right: 0 !important; margin-left: 4px !important;} .test-title .flow-list{padding: 0;}}
.table-responsive > .table-blue > tbody > tr > td .radio-inline label{margin: 4px 0;}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
.radio[disabled],
.radio-inline[disabled],
.checkbox[disabled],
.checkbox-inline[disabled],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"],
fieldset[disabled] .radio,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox,
fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}


/* WISC */
.sub-content.WPPSI_TotalscoreType * {
  box-sizing: border-box !important;
}
.sub-content.WISC_TotalscoreType * {
    box-sizing: border-box !important;
}
.sub-content.WISC_TotalscoreType { /* 추가 */
    padding: 0px 0px 0px 0px;
    min-width: 370px;
}

.sub-content.WISC_TotalscoreType>.container {
    width: 100%;
    padding: 0;
}

.WISC_TS_header {
    background: linear-gradient(159deg, #1E1E1E 3.72%, #003640 100%);
    position: sticky;
    display: flex;
    justify-content: center;
    top: 0;
    z-index: 1000;
}

.WISC_TS_top {
    width: 1040px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.WISC_TS_top>img {
    object-fit: scale-down;
    width: 35%;
    margin: 0;
}
.WISC_TS_top>h1 {
    color: #fff;
    font-size: 5vw;
    letter-spacing: -0.5px;
    margin: 0;
}

.WISC_TS_body>.inspection {
    padding: 60px 0;
    background-color: #fff;
    position: relative;
}

.WISC_TS_body>.inspection.supplement {
    background-color: #eaedf5; /* 수정 */
}

.WISC_TS_body>.inspection>div {
    width: 1170px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.inspection_title_wrap {
    color: #000;
    width: calc(100% - 640px);
    height: auto;
}

.inspection_title {
    position: sticky;
    top: 200px;
    font-size: var(--fontsize-title-3);
    z-index: 100;
    padding: 10px 0;
}
.inspection_title .dTest-number{
  display: flex;
  color: var(--color-gray-700);
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 48px;
  border-radius: 16px;
  background-color: var(--color-gray-300);
}
.dTest-number_top{
    display: flex;
    color: #fff;
    justify-content: flex-end;
    align-items: center;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 200;
}

.inspection_title>.sub_title {/* 수정 */
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.1px;
    color: #00687E;
}
.inspection_title>img {
    display: block;
    width: 18%;
    margin: 0 0 8px 0;
}

.inspection_title>.sub_desc {/* 수정 */
    font-size: 17px;
    line-height: 18px;
    font-weight: 500;
    color: var(--color-primary);
    letter-spacing: -0.1px;
    margin-left: 4px;
    display: flex;
    flex-wrap: wrap;
    margin-right: 36px;
    word-break: keep-all;
}
.inspection_title>.sub_desc>small {/* 수정 */
    font-size: 15px;
    color: #9b9b9b;
    display: flex;
    flex-wrap: wrap;
    margin-right: 36px;
    word-break: keep-all;
}
.supplement>.supplement_wrap>.inspection_title_wrap>.inspection_title>.sub_title{/* 추가 */
    color: #464b49;
}
.supplement>.supplement_wrap>.inspection_title_wrap>.inspection_title>.sub_desc{/* 추가 */
    color: #464b49;
}
.supplement>.supplement_wrap>.inspection_title_wrap>.inspection_title>.sub_desc>small{/* 추가 */
    color: #919191;
}

.inspection_list_wrap {
    width: 640px;
}

.inspection_list {
    padding: 0;
}
.inspection_list>li {
    display: flex;
    justify-content: space-between;
    align-items:end; /* 수정 */
    min-height: 100px;
    border-radius: 6px;
    margin: 16px 0; /* 추가 */
    padding: 16px 12px;
}
.inspection_list>li.pis {/* 추가 */
    background-color: #d5f1ff;
}
.inspection_list>li.add-type {/* 추가 */
    background-color: #F6F6F6;
}
.inspection_list>li.disabled-style {/* 추가 */
    background-color: #d5f1ff;
}
.inspection_list>li.add-type.disabled-style {/* 추가 */
    background-color: #d5f1ff;
}
.inspection_list>li:focus-within {/* 추가 */
    background-color: #b9e9ff44;
}
.inspection_list>li.pis:focus-within {/* 추가 */
    background-color: #cceeff;
}
.inspection_list>li.substitution {/* 추가 */
    background-color: #fff7f7;
}
.inspection_list>li.substitution:focus-within {/* 추가 */
    background-color: #ffeded;
}
.inspection_list>li.supplement {/* 추가 */
    background-color: #fff;
}
.inspection_list>li.supplement:focus-within {/* 추가 */
    background-color: #f7f7f7;
}

.list_responseValue {
    color: #000;
}

.list_responseValue>.response_question {
    font-size: var(--fontsize-body-1); /* 수정 */
    font-weight: var(--fontweight-body-2);
    letter-spacing: var(--font-spacing);
    line-height: var(--fontlineheight-1);
    align-items: center; /* 추가 */
    display: flex;
    padding: 4px;
}
.list_responseValue>.response_question.disabled-style {/* 추가 */
    color: #2C87FF;
}

.list_responseValue>.response_answer {
    padding-left: 16px;
}

.list_responseValue>.response_answer>input.WISC_TS_input {
    width: 500px;
    height: 44px; /* 수정 */
    border: 1px solid #D4D4D4; /* 수정 */
    border-radius: 6px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    padding: 0 20px;
}

.list_responseValue>.response_answer>input.WISC_TS_input:valid {
    border-color: #0065e977;/* 수정 */
}
.list_responseValue>.response_answer>input.WISC_TS_input:focus {/* 추가 */
    outline: 1px solid var(--color-primary-700);
}
.list_responseValue>.response_answer>input.WISC_TS_input:disabled {/* 추가 */
    background-color: #ECECEC;
    border: 1px solid #D4D4D4;
}
.list_responseValue>.response_answer>input.WISC_TS_input::placeholder {
    color: rgba(0, 0, 0, 0.4);
    float: right;
}

.list_conversionScore {/* 추가 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    white-space: nowrap;
}

.list_conversionScore>.score {
    color: #000;
    width: 44px; /* 수정 */
    height: 44px; /* 수정 */
    line-height: 68px;
    font-size: 20px;
    font-weight: 500;
    background-color: #e9e9e9; /* 수정 */
    border-radius: 12px;
    align-items: center; /* 추가 */
    justify-content: center;
    display: flex;
}
.list_conversionScore>.score.disabled-score-style { /* 추가 */
    color: rgba(0, 0, 0, 0.5);
    border: 1px solid #D4D4D4;
}
.list_conversionScore>.score_info { /* 추가 */
    display: block;
    margin-bottom: 8px;
    font-size: var(--fontsize-body-3);
    font-weight: 700;
    color: var(--color-primary-650);
}
.list_conversionScore>.score_info.disabled-score-style { /* 추가 */
    color: rgba(0, 0, 0, 0.5);
}
.substitution_text { /* 수정 */
    padding: 0 8px;
    border-radius: 16px;
    border: 1px solid #ff5555;
    color: #FF5555;
    font-size: 12px;
    font-weight: 900;
    margin-left: 6px;
}
.supplement_text { /* 수정 */
    padding: 0 8px;
    border-radius: 16px;
    border: 1px solid #6cceff;
    color: #2ab8ff;
    font-size: 14px;
    font-weight: 100;
    margin-left: 6px;
}

.WISC_TS_footer {
    background-color: #fff;
    padding: 40px 0 60px; /* 수정 */
}

.WISC_TS_footer>.WISC_TS_btn_wrap {
    width: 1170px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.WISC_TS_footer>.WISC_TS_btn_wrap>a {
    background-color: #003F9D;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    width: 240px;
    height: 72px;
    font-size: 20px;
    font-weight: 500;
    border-radius: 8px;
    pointer-events: auto;
    text-decoration: none;
}

.WISC_TS_footer>.WISC_TS_btn_wrap>a.disabled {
    opacity: 0.4;
    pointer-events: none;
}
@media (orientation: landscape) {
	/* Landscape 모드일 때 적용할 CSS */
  .dHeader-image,.WISC_TS_header{
    position: relative;
  }
}
@media (min-width:990px) {
  .dHeader-image,.WISC_TS_header{
    position: sticky;
  }
}
/* 모바일 반응형(추가) */
@media (max-width:768px) {
    .WISC_TS_body{
        display: flex;
        flex-direction: column;
    }
    .WISC_TS_top {
        padding: 36px 16px;
    }
    .WISC_TS_top>img {
    object-fit: scale-down;
    width: 50%;
    margin: 0;
    }
    .inspection_title {
        padding: 10px 24px 40px;
        width: 70vw;
    }
    .inspection_title_wrap, .inspection_title_wrap>.inspection_title{
        width:85vw; /* 수정 */
    }
    .inspection_title_wrap>.inspection_title>.sub_desc{
      display: flex;
      flex-direction: column;
      margin: 0;
    }
    .list_responseValue>.response_question{
        font-size: 16px;
        margin-bottom: 4px;
    }

    body::-webkit-scrollbar{
        display: none;
    }
    .list_conversionScore>.score {
    font-size: 16px;
    }
    .WISC_TS_body>.inspection>.major_wrap,.supplement_wrap{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .WISC_TS_body>.inspection>.major_wrap>.inspection_list_wrap,
    .supplement_wrap>.inspection_list_wrap{
        width: 100vw;
    }
    .WISC_TS_body>.inspection>.major_wrap>.inspection_list_wrap>.inspection_list>li,
    .supplement_wrap>.inspection_list_wrap>.inspection_list>li{
        display: flex;
        justify-content: space-between;
        margin: 12px;
    }
    .WISC_TS_body>.inspection>.major_wrap>.inspection_list_wrap>.inspection_list>li>.list_responseValue,
    .supplement_wrap>.inspection_list_wrap>.inspection_list>li>.list_responseValue{
        width: 79%
    }
    .WISC_TS_body>.inspection>.major_wrap>.inspection_list_wrap>.inspection_list>li>.list_conversionScore,
    .supplement_wrap>.inspection_list_wrap>.inspection_list>li>.list_conversionScore{
        width: 17%;
        display: flex;
        justify-content: right;
    }
    .WISC_TS_body>.inspection>.major_wrap>.inspection_list_wrap>.inspection_list>li>.list_responseValue>.response_answer,
    .supplement_wrap>.inspection_list_wrap>.inspection_list>li>.list_responseValue>.response_answer{
        width: 100%;
    }
    .WISC_TS_body>.inspection>.major_wrap>.inspection_list_wrap>.inspection_list>li>.list_responseValue>.response_answer>input.WISC_TS_input,
    .supplement_wrap>.inspection_list_wrap>.inspection_list>li>.list_responseValue>.response_answer>input.WISC_TS_input{
        width: 100%;
    }
    .WISC_TS_footer{
        padding: 16px;
        background-color: #fff;
    }
    .WISC_TS_footer>.WISC_TS_btn_wrap {
        width: 100%;
        max-width: 480px;
    }
    .WISC_TS_footer>.WISC_TS_btn_wrap>a{
        width: 100%;
    }
}
@media (min-width:768px) {
    .WISC_TS_top {
        width: 750px;
        padding: 36px 0;
    }
    .WISC_TS_top>h1 {
        font-size: 24px;
    }

    .WISC_TS_body>.inspection>div,
    .WISC_TS_footer>.WISC_TS_btn_wrap {
        width: 750px;
    }
    .list_responseValue{
        width:calc(100% - 90px);
    }
    .list_responseValue.only{
        width:100%;
    }
    .list_responseValue>.response_answer>input.WISC_TS_input{
        width:100%;
    }
    .inspection_title_wrap{
        width:32%; /* 수정 */
    }
    .inspection_list_wrap{
        width:64%; /* 수정 */
    }
}
@media (min-width:992px) {
    .WISC_TS_top {
        width: 970px;
        padding: 36px 0;
    }
    .WISC_TS_top>h1 {
        font-size: 28px;
    }
    .WISC_TS_body>.inspection>div,
    .WISC_TS_footer>.WISC_TS_btn_wrap {
        width: 970px;
    }
    .list_responseValue{
        width:calc(100% - 90px);
    }
    .list_responseValue.only{
        width:100%;
    }
    .list_responseValue .disabled-style{ /* 추가 */
        color: #999;
    }
    .list_responseValue>.response_answer>input.WISC_TS_input{
        width:100%;
    }
}

@media (min-width:1200px) {
    .WISC_TS_top {
        width: 1170px;
        padding: 36px 0;
    }
    .WISC_TS_top>h1 {
        font-size: 36px;
    }
    .WISC_TS_body>.inspection>div,
    .WISC_TS_footer>.WISC_TS_btn_wrap {
        width: 1170px;
    }
}


/* WPPSI */
.sub-content.WPPSI_TotalscoreType { /* 추가 */
  padding: 0px 0px 0px 0px;
  min-width: 370px;
}

.sub-content.WPPSI_TotalscoreType>.container {
  width: 100%;
  padding: 0;
}

.dHeader-image {
  background: linear-gradient(31deg, #0065e92d, #0065e9 100%), linear-gradient(348deg, #051da4c2, #000c50 100%), linear-gradient(336deg, #164a634b, #00b0ff 100%);
  position: sticky;
  display: flex;
  justify-content: center;
  top: 0;
  z-index: 1000;
}

.dTop-image {
  width: 1040px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dTop-image>img {
  object-fit: scale-down;
  width: 35%;
  margin: 0;
}
.dTop-image>h1 {
  color: #fff;
  font-size: 5vw;
  letter-spacing: -0.5px;
  margin: 0;
}

.dSide-group>.inspection {
  padding: 60px 0;
  background-color: #fff;
  position: relative;
}

.dSide-group>.inspection.supplement {
  background-color: #eaedf5; /* 수정 */
}

.dSide-group>.inspection>div {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.inspection_title_wrap {
  color: #000;
  width: calc(100% - 640px);
  height: auto;
}

.inspection_title {
  position: sticky;
  top: 200px;
  z-index: 100;
  padding: 10px 0;
}

.inspection_title>.sub_title {/* 수정 */
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: #333;
}
.inspection_title>img {
  display: block;
  width: 18%;
  margin: 0 0 8px 0;
}

.supplement>.supplement_wrap>.inspection_title_wrap>.inspection_title>.sub_title{/* 추가 */
  color: #464b49;
}
.supplement>.supplement_wrap>.inspection_title_wrap>.inspection_title>.sub_desc{/* 추가 */
  color: #464b49;
}
.supplement>.supplement_wrap>.inspection_title_wrap>.inspection_title>.sub_desc>small{/* 추가 */
  color: #919191;
}

.inspection_list_wrap {
  width: 640px;
}

.inspection_list {
  padding: 0;
}
.inspection_list>li {
  display: flex;
  justify-content: space-between;
  align-items:end; /* 수정 */
  min-height: 100px;
  border-radius: 6px;
  margin: 16px 0; /* 추가 */
  padding: 16px 12px;
}
.inspection_list>li.disabled-style {/* 추가 */
  background-color: #F4F4F4;
}
.inspection_list>li:focus-within {/* 추가 */
  background-color: #b9e9ff44;
}
.inspection_list>li.substitution {/* 추가 */
  background-color: #fff7f7;
}
.inspection_list>li.substitution:focus-within {/* 추가 */
  background-color: #ffeded;
}
.inspection_list>li.supplement {/* 추가 */
  background-color: #fff;
}
.inspection_list>li.supplement:focus-within {/* 추가 */
  background-color: #f7f7f7;
}

.list_responseValue {
  color: #000;
}

.list_responseValue>.response_question {
  font-size: 20px; /* 수정 */
  font-weight: 500;
  align-items: center; /* 추가 */
  display: flex;
  padding: 4px;
}
.list_responseValue>.response_question.disabled-style {/* 추가 */
  color: rgba(0, 0, 0, 0.5);
}

.list_responseValue>.response_answer {
  padding-left: 16px;
}

.list_responseValue>.response_answer>input.dText_input {
  width: 500px;
  height: 44px; /* 수정 */
  border: 1px solid #D4D4D4; /* 수정 */
  border-radius: 6px;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  padding: 0 20px;
}

.list_responseValue>.response_answer>input.dText_input:valid {
  border-color: #0065e977;/* 수정 */
}
.list_responseValue>.response_answer>input.dText_input:focus {/* 추가 */
  outline: 1px solid #0065E9;
}
.list_responseValue>.response_answer>input.dText_input:disabled {/* 추가 */
  background-color: #ECECEC;
  border: 1px solid #D4D4D4;
}
.list_responseValue>.response_answer>input.dText_input::placeholder {
  color: rgba(0, 0, 0, 0.4);
  float: right;
}

.list_conversionScore {/* 추가 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.list_conversionScore>.score {
  color: #000;
  width: 44px; /* 수정 */
  height: 44px; /* 수정 */
  line-height: 68px;
  font-size: 20px;
  font-weight: 500;
  background-color: #F4F4F4; /* 수정 */
  border-radius: 12px;
  align-items: center; /* 추가 */
  justify-content: center;
  display: flex;
}
.list_conversionScore>.score input{
   color: #000;
   width: 44px;
   height: 44px;
   border-radius: 12px;
   text-align: center;
   background-color: #F4F4F4;
   border: none;
   font-size: 20px;
   font-weight: 500;
}
.list_conversionScore>.score.disabled-score-style { /* 추가 */
  color: rgba(0, 0, 0, 0.5);
  border: 1px solid #D4D4D4;
}
.list_conversionScore>.score_info { /* 추가 */
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-650);
}
.list_conversionScore>.score_info.disabled-score-style { /* 추가 */
  color: rgba(0, 0, 0, 0.5);
}
.substitution_text { /* 수정 */
  padding: 0 8px;
  border-radius: 16px;
  border: 1px solid #ff5555;
  color: #FF5555;
  font-size: 12px;
  font-weight: 900;
  margin-left: 6px;
}
.supplement_text { /* 수정 */
  padding: 0 8px;
  border-radius: 16px;
  border: 1px solid #6cceff;
  color: #2ab8ff;
  font-size: 14px;
  font-weight: 100;
  margin-left: 6px;
}

.dFooter {
  background-color: #fff;
  padding: 40px 0 60px; /* 수정 */
}

.dFooter>.dFooter_btn_wrap {
  width: 1170px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}

.dFooter>.dFooter_btn_wrap>a {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  width: 240px;
  height: 72px;
  font-size: 20px;
  font-weight: 500;
  pointer-events: auto;
  text-decoration: none;
}

.dFooter>.dFooter_btn_wrap>a.disabled {
  opacity: 0.4;
  pointer-events: none;
}



/* 모바일 반응형(추가) */
@media (max-width:768px) {
  .dSide-group{
      display: flex;
      flex-direction: column;
  }
  .dTop-image {
      padding: 36px 16px;
  }
  .dTop-image>img {
  object-fit: scale-down;
  width: 50%;
  margin: 0;
  }
  .inspection_title {
      padding: 10px 24px 40px;
      width: 70vw;
  }
  .inspection_title_wrap, .inspection_title_wrap>.inspection_title{
      width:85vw; /* 수정 */
  }
  .inspection_title_wrap>.inspection_title>.sub_desc{
      margin: 0;
  }
  .list_responseValue>.response_question{
      font-size: 16px;
      margin-bottom: 4px;
  }

  body::-webkit-scrollbar{
      display: none;
  }
  .list_conversionScore>.score {
  font-size: 16px;
  }
  .dSide-group>.inspection>.major_wrap,.supplement_wrap{
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  .dSide-group>.inspection>.major_wrap>.inspection_list_wrap,
  .supplement_wrap>.inspection_list_wrap{
      width: 100%;
  }
  .dSide-group>.inspection>.major_wrap>.inspection_list_wrap>.inspection_list>li,
  .supplement_wrap>.inspection_list_wrap>.inspection_list>li{
      display: flex;
      justify-content: space-between;
  }
  .dSide-group>.inspection>.major_wrap>.inspection_list_wrap>.inspection_list>li>.list_responseValue,
  .supplement_wrap>.inspection_list_wrap>.inspection_list>li>.list_responseValue{
      width: 79%
  }
  .dSide-group>.inspection>.major_wrap>.inspection_list_wrap>.inspection_list>li>.list_responseValue.only,
  .supplement_wrap>.inspection_list_wrap>.inspection_list>li>.list_responseValue.only{
      width: 100%
  }
  .dSide-group>.inspection>.major_wrap>.inspection_list_wrap>.inspection_list>li>.list_conversionScore,
  .supplement_wrap>.inspection_list_wrap>.inspection_list>li>.list_conversionScore{
      width: 17%;
      display: flex;
      justify-content: right;
  }
  .dSide-group>.inspection>.major_wrap>.inspection_list_wrap>.inspection_list>li>.list_responseValue>.response_answer,
  .supplement_wrap>.inspection_list_wrap>.inspection_list>li>.list_responseValue>.response_answer{
      width: 100%;
  }
  .dSide-group>.inspection>.major_wrap>.inspection_list_wrap>.inspection_list>li>.list_responseValue>.response_answer>input.dText_input,
  .supplement_wrap>.inspection_list_wrap>.inspection_list>li>.list_responseValue>.response_answer>input.dText_input{
      width: 100%;
  }
  .dFooter{
      padding: 16px;
      background-color: #fff;
  }
  .dFooter>.dFooter_btn_wrap {
      width: 100%;
  }
  .dFooter>.dFooter_btn_wrap>a{
      width: 100%;
  }
}
@media (min-width:768px) {
  .dTop-image {
      width: 750px;
      padding: 36px 0;
  }
  .dTop-image>h1 {
      font-size: 24px;
  }

  .dSide-group>.inspection>div,
  .dFooter>.dFooter_btn_wrap {
      width: 750px;
  }
  .list_responseValue.only{
      width:100%;
  }
  .list_responseValue{
      width:calc(100% - 90px);
  }
  .list_responseValue>.response_answer>input.dText_input{
      width:100%;
  }
  .inspection_title_wrap{
      width:32%; /* 수정 */
  }
  .inspection_list_wrap{
      width:64%; /* 수정 */
  }
}
@media (min-width:992px) {
  .dTop-image {
      width: 970px;
      padding: 36px 0;
  }
  .dTop-image>h1 {
      font-size: 28px;
  }
  .dSide-group>.inspection>div,
  .dFooter>.dFooter_btn_wrap {
      width: 970px;
  }
  .list_responseValue.only{
      width:100%;
  }
  .list_responseValue{
      width:calc(100% - 90px);
  }
  .list_responseValue .disabled-style{ /* 추가 */
      color: #999;
  }
  .list_responseValue>.response_answer>input.dText_input{
      width:100%;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .dSide-group>.inspection>div,
  .dFooter>.dFooter_btn_wrap {
      width: 780px;
  }
}
@media (min-width:1200px) {
  .dTop-image {
      width: 1120px;
      padding: 36px 30px;
  }
  .dTop-image>h1 {
      font-size: 36px;
  }
  .dSide-group>.inspection>div,
  .dFooter>.dFooter_btn_wrap {
      width: 1080px;
  }
}


/* ---스크롤바 디자인 추가 (시작)*/
.test-form::-webkit-scrollbar {
  width: 6px;
  position: absolute;
  right:0;
  top: 0;
}
.test-form::-webkit-scrollbar-button:vertical:start:decrement,
.test-form::-webkit-scrollbar-button:vertical:start:increment{
  display: block;
  height: 4px;
}
.test-form::-webkit-scrollbar-button:vertical:end:decrement {
  display: block;
  height: 8px;
}

.test-form::-webkit-scrollbar-thumb {
  height: 17%;
  background-color: rgba(191, 191, 191, 1);
  border-radius: 10px;
}

.test-form::-webkit-scrollbar-track {
  display: none;
}


/* 리커트척도 반응형*/
@media (min-width:768px) and (max-width:1023px) {
  .sub-content .container .sub-body.test {padding:16px 16px !important;;}
  .sub-body.test #table-data-wrap #form{width: 68%;}
  #test-control { width: 30%;}
  #test-control .control-right #timers_wrapper .timer_container { padding: 0 12px 8px!important; gap: 8px; justify-content:space-between !important; align-items: center; border-radius: 16px;}
  #test-control .control-right #timers_wrapper .timer_container .times{ width: 80px !important; display: flex; flex-direction:column; align-items:normal !important; }
  #test-control .control-right #timers_wrapper .timer_container .times .time_display{display: flex;}
  #test-control .control-right #timers_wrapper .time_default {font-size: var(--fontsize-body-3); line-height: 0.9; display: flex; justify-content: right;}

  #test-control .control-right .test-number-wrap {padding: 12px}
  #test-control .control-right .test-number-wrap .total-array .section {padding: 2px 0px;}
  #test-control .control-right > .test-number-wrap .total-array .section .number-buttons { grid-template-columns: repeat(auto-fit, minmax(32px, 1fr))!important; gap:2px !important; }
  #test-control .control-right .test-number-wrap .total-array .section .number-buttons .number-btn { width: 32px!important; height: 32px!important; margin: 4px 1px; padding: 2px;}
  #test-control .control-right .test-number-wrap .total-array .section .number-buttons .number-btn.except {width: auto;}
  .control-right .list-inline:has(.btn-submit) { height: auto !important; flex-direction: column; gap: 8px;pointer-events:auto;}
  #dispDp>.main-visual {min-height: 240px !important; height: 240px;}
  #dispDp>.main-visual .visual-container{gap:12px;}
  #dispDp>.main-visual .visual-container .first-wrap,#dispDp>.main-visual.PRQ .visual-container .second-wrap{padding: 16px;}
  #dispDp>.main-visual .visual-container .first-wrap img,#dispDp>.main-visual .visual-container .second-wrap img{max-height: 132px;}
  #dispDp>.main-visual .visual-container img{max-height: 166px;}
  .select-btn-wrap-complete {gap: 12px; }
}
@media (min-width:480px) and (max-width:767px) {
  body.Likert {background-color: #fff;}
  body.Likert .sub-content {padding: 0; height: calc(100vh - 47px);}
  body.Likert .sub-content .container {padding: 0; height: 100%;}
  body.Likert .sub-content .container .sub-body.test {padding: 12px 10px !important; height: auto; display: flex; flex-direction: column;}
  body.Likert .sub-content .container .sub-body.test .progress.res{display: block;}
  body.Likert .sub-content .container .sub-body.test .test-number-wrap-res {display: flex;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area{height: calc(100vh - 282px) !important;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title .topper-title-info .topper-title{font-size: var(--fontsize-body-2);}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .full{display: none;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .topper{font-size: var(--fontsize-body-3);}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right {gap: 4px;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .save {padding:4px 10px}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .info {display:flex; align-items:center; justify-content:center}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper.gray{max-width: 480px;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper.content .wrapper{justify-content: space-around; padding:0;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #test-control {display: none;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form {width: 100%;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap > ul .answer_com{height:auto;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com .answer_title{word-break: keep-all; height: auto;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com .subq-title{word-break: keep-all; height: auto; padding-left: 4px;font-size: var(--fontsize-body-2);}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com .answer_list_wrap{word-break: keep-all; justify-content: center;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com .answer_list_wrap .answer_list{width: 100%; justify-content: space-between; gap: 0; height: auto;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com .answer_list_wrap .answer_list .answer label{width: 100%; min-width:56px; max-width:120px;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com .answer_list_wrap .answer_list .answer p{ font-size: var(--fontsize-body-3);line-height: var(--fontlineheight-4);}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com.horizon .answer_list_wrap .answer_list .answer { padding-bottom: 16px;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com.horizon .answer_list_wrap .answer_list .answer p{ font-size: var(--fontsize-body-2);line-height: var(--fontlineheight-4);}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com.horizon .answer_list_wrap .answer_list .answer label { min-width: 112px;}

  #test-control .control-right > .test-number-wrap::-webkit-scrollbar { display: none; }
  #test-control .control-right > .test-number-wrap::-webkit-scrollbar-thumb { display: none;}

  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down {display: block; height: 64px; padding-top:12px; padding-bottom: 0;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down .list-inline { display: flex;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down .list-inline li{ width: 100%;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down .list-inline li a{ display: flex;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down .list-inline .btn {padding: 11px; display: flex; justify-content: center; align-items: center; height: 100%; border-radius: 24px; font-size: var(--fontsize-body-2); font-weight: var(--fontweight-body-2);gap:8px}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down .list-inline .btn.btn-pre {border: 1px solid var(--color-gray-400); color: var(--color-gray-900);}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down .list-inline .btn.btn-submit { color: #fff; gap: 8px; background-color: var(--IDS_Primary-600);pointer-events:auto;}
  /* 다크모드 */
  body.Likert .sub-content .container .sub-body.test #table-data-wrap.darkmode #form .control-down .list-inline .btn.btn-pre{background: var(--Elevation-Overlay-10dp) !important; border: 1px solid var(--color-gray-600)!important; color: var(--darkmode-font) !important;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap.darkmode #form .control-down .list-inline .btn.btn-submit{background-color: var(--color-primary) !important; color: #fff !important;pointer-events:auto;}

  #dispDp>.main-content>.container>.row .version-select-wrap .radio{padding: 24px; margin-top: 48px !important;}
  #dispDp>.main-visual .visual-container .second, #dispDp>.main-visual.PRQ .visual-container .second-wrap{display: none!important;}
}
@media all and (max-width:390px) {
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title .test-logo{display:none;}
  .test-topper .desc_title .topper-title-info .topper-info{margin-bottom: 0;}
}
@media all and (max-width:479px) {
  body.Likert .header-wrap .container .header-subbody .logo {text-align: left; padding-left: 10px; width:80px !important;font-size: 12px;line-height: 40px;color: #7f8186;position: relative;top: 0;width: 100%;z-index: 9998;}
  body.Likert {background-color: #fff;}
  body.Likert .sub-content {padding: 0; height: calc(100vh - 47px);}
  body.Likert .sub-content .container {padding: 0; height: 100%;}
  body.Likert .sub-content .container .sub-body.test {padding: 8px !important; height: auto; display: flex; flex-direction: column;}
  body.Likert .sub-content .container .sub-body.test .progress.res{display: block;}
  body.Likert .sub-content .container .sub-body.test .test-number-wrap-res {display: flex;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area{height: calc(100vh - 282px) !important;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .full{display: none;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .topper{font-size: var(--fontsize-body-3);}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper {gap: 16px;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper.content .wrapper{justify-content: space-around; padding:0;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper.gray{border-radius: 0;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper.gray.content {border-radius: 0;margin: 0 !important;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title .topper-title-info .topper-title span{font-size:var(--fontsize-body-3)}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right {gap: 4px;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .save {padding:4px 10px; font-size: var(--fontsize-body-2)!important; color: #d5e4fa}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .info {padding:4px}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .info svg {width: 22px; height: 22px;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .toggle{width: 42px; height: 24px; margin-right: 4px;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .toggle::before{content: ''; width: 16px; height: 16px; background-color: #ffffffd2;top: 3px;left: 4px;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .toggle:hover::before{background-color: #fff;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .toggle.darkmode::before{transform:translateX(17px); background-color: #ffffffd2;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .toggle .light{width: 17px; height: 17px; top: 3px;right: 2px;}
  body.Likert .sub-content .container .sub-body.test .desc_box.test-topper .desc_title.right .toggle .dark{ width: 18px; height: 18px; top: 2px;left: 2px;}



  body.Likert .sub-content .container .sub-body.test #table-data-wrap #test-control {display: none;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form {width: 100%;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap > ul .answer_com{height:auto;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com .answer_title{word-break: keep-all; height: auto;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com .subq-title{word-break: keep-all; height: auto; padding-left: 4px;font-size: var(--fontsize-body-2);}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com .answer_list_wrap{word-break: keep-all; justify-content: center;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com .answer_list_wrap .answer_list{width: 100%; justify-content: space-between; gap: 0; height: auto;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com .answer_list_wrap .answer_list .answer label{width: 100%; min-width:40px;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com .answer_list_wrap .answer_list .answer p{ font-size: var(--fontsize-body-3);line-height: var(--fontlineheight-4);}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap .answer_com.horizon .answer_list_wrap .answer_list .answer label { max-width: 88px;}

  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area .answer_wrap {margin: 0 !important; }
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area::-webkit-scrollbar { display: none !important; }
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .test-area.darkmode::-webkit-scrollbar { display: none !important; }

  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down{display: block; height: 64px;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down .list-inline { display: flex;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down .list-inline li{ width: 100%;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down .list-inline li a{ display: flex;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down .list-inline .btn {padding: 11px; display: flex; justify-content: center; align-items: center; height: 100%; border-radius: 24px; font-size: var(--fontsize-body-2); font-weight: var(--fontweight-body-2);}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down .list-inline .btn.btn-default {gap:8px}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down .list-inline .btn.btn-pre {border: 1px solid var(--color-gray-400); color: var(--color-gray-900);}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap #form .control-down .list-inline .btn.btn-submit { color: #fff; gap: 8px; background-color: var(--IDS_Primary-600);pointer-events:auto;}
  /* 다크모드 */
  body.Likert .sub-content .container .sub-body.test #table-data-wrap.darkmode #form .control-down .list-inline .btn.btn-pre{background: var(--Elevation-Overlay-01dp) !important; border: 1px solid var(--darkmode-font) !important; color: var(--darkmode-font) !important;}
  body.Likert .sub-content .container .sub-body.test #table-data-wrap.darkmode #form .control-down .list-inline .btn.btn-submit{background-color: var(--color-primary) !important; color: #fff !important; pointer-events:auto;}


  #dispDp>.main-content>.container>.row .version-select-wrap {gap:0;}
  #dispDp>.main-content>.container>.row .version-select-wrap .radio{padding: 1.5rem 1rem; margin-top: 24px !important;}
  #dispDp>.main-content>.container>.row .version-select-wrap .radio .sample-text{line-height: 1.4;font-size: var(--fontsize-body-2); letter-spacing: var(--font-spacing);font-weight: var(--fontweight-title-3); color: var(--color-gray-900);word-break: keep-all;}
  #dispDp>.main-visual {height: 240px;}
  #dispDp>.main-visual .visual-container .first-wrap {width: 92%;padding: 16px;}
  #dispDp>.main-visual .visual-container .first-wrap img,.main-visual.PRQ .visual-container .second-wrap img{width: 100%;}
  #dispDp>.main-visual .visual-container .second, #dispDp>.main-visual.PRQ .visual-container .second-wrap{display: none!important;}
}
/* date-picker */
.ui-icon-circle-triangle-e { background-position: -30px 3px !important;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { top: 10px; opacity: 0.5; }
.ui-datepicker .ui-datepicker-title { display: flex; justify-content: center; align-items: center; gap: 0; margin-top: 3px; margin-bottom: 9px; font-size: 15px; font-weight: 600;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month { margin-left: 12px; }
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { margin-right: 4px; }
.ui-datepicker .ui-datepicker-title div.ui-datepicker-month { margin-left: 12px; }
.ui-datepicker .ui-datepicker-title div.ui-datepicker-year { margin-right: 4px; }
.ui-state-hover,.ui-state-focus, .ui-widget-content .ui-state-hover,.ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-hover,.ui-widget-header .ui-state-focus { border: none; opacity: 1; background: #eee; font-weight: normal; color: #212121;}
.ui-datepicker-calendar tbody tr td .ui-state-hover { background-color: #2B398F1A !important; border-radius: 50%;}
.ui-datepicker-calendar tbody tr td .ui-state-highlight.ui-state-hover { background-color: #2B398F80 !important; border-radius: 50%;}
.ui-datepicker-calendar tbody tr td .ui-state-active.ui-state-hover { background-color: #2B398F !important; border-radius: 50%;}
.ui-datepicker-calendar tbody tr td .ui-state-highlight:hover { background-color: #2B398F80 !important; border-radius: 50%;}
.ui-datepicker-calendar tbody tr td .ui-state-active:hover { background-color: #2B398F !important; border-radius: 50%;}
.ui-datepicker-prev.ui-state-hover{left: 2px;}.ui-datepicker-next.ui-state-hover{right: 2px;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {font-size: 14px;}
.ui-datepicker select.ui-datepicker-month{ width: 33%; border: 1px solid #BBB; border-radius: 4px; }
.ui-datepicker select.ui-datepicker-year{ width: 38%; border: 1px solid #BBB; border-radius: 4px; }
.ui-datepicker select.ui-datepicker-month:hover, .ui-datepicker select.ui-datepicker-year:hover{ background-color: #2B398F0D !important; }
.ui-datepicker select.ui-datepicker-month:hover option, .ui-datepicker select.ui-datepicker-year:hover option{ background-color: #FFF !important; }
.ui-datepicker select { height: 36px; background-size: 15px; }
.ui-datepicker div.ui-datepicker-month, .ui-datepicker div.ui-datepicker-year {font-size: 14px;}
.ui-datepicker div.ui-datepicker-month{ width: 33%; border: 1px solid #BBB; border-radius: 4px; }
.ui-datepicker div.ui-datepicker-year{ width: 39%; border: 1px solid #BBB; border-radius: 4px; }
.ui-datepicker div.ui-datepicker-month:hover, .ui-datepicker div.ui-datepicker-year:hover{ background-color: #2B398F0D !important; }
.ui-datepicker div.ui-datepicker-month:hover option, .ui-datepicker div.ui-datepicker-year:hover option{ background-color: #FFF !important; }
.nice-select:after{right:10px; display:none;}
.nice-select .list{ width: 100%; max-height: 360px; overflow-y: auto; box-shadow:0 1px 16px 0px rgba(0, 0, 0, 0.25)}
.nice-select.with-arrow-icon {position: relative;padding-right: 44px;}
.nice-select.ui-datepicker-year, .nice-select.ui-datepicker-month{padding: 0 16px 0 8px;height: 34px;line-height: 2.2;}
.nice-select.ui-datepicker-year .list li, .nice-select.ui-datepicker-month .list li{padding-left: 8px;}
.nice-select.ui-datepicker-month::after, .nice-select.ui-datepicker-year::after { display: block !important;}
.nice-select.ui-datepicker-month{margin-left: 12px;}
.nice-select.ui-datepicker-year .list, .nice-select.ui-datepicker-month .list{max-height: 230px;box-shadow: 0 1px 24px 0px rgba(0, 0, 0, 0.25);scrollbar-width: thin;}
.nice-select.dropup .list { top: auto;bottom: 110%;margin-top: 0;margin-bottom: 4px;}

@media (max-width: 767px) {.table-responsive {overflow: visible;}.nice-select .list{max-height: 280px; overflow-y: auto;}}
@media (max-width: 480px) {.ui-widget.ui-widget-content, .nice-select .list{ box-shadow:0 1px 16px 0px rgba(0, 0, 0, 0.2)!important}}
.ui-datepicker .ui-datepicker-buttonpane {margin: 0; padding: 0;}
.ui-datepicker table { table-layout: fixed; width: 100%; font-size: .9em; border-collapse: separate !important; border-spacing: 2px 2px !important; margin: 0 0 .4em; }
.ui-datepicker table th, .ui-datepicker table td { word-wrap: break-word; }
.ui-datepicker a, .ui-datepicker span, .ui-datepicker strong, .ui-datepicker em { display: inline-block; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button { border: none !important; background: none !important; white-space: nowrap;}
.ui-datepicker td span, .ui-datepicker td a { padding: 8px !important; text-align: center !important; width: 100%; height: 100%; }
.ui-widget.ui-widget-content { border-radius: 16px; border: none; padding: 10px 5px 5px 5px; box-shadow: 0 1px 24px 0px rgba(0, 0, 0, 0.25); font-family: 'pretendard', sans-serif; }
.ui-datepicker .ui-datepicker-header {background: none !important; /*border: none !important;*/ border: none; border-bottom: 1px solid #ddd; border-radius: 0;}
.ui-icon-circle-triangle-w { background-position: -100px 3px !important; }
.ui-datepicker td { aspect-ratio: 1 / 1; padding: 0 !important; text-align: center; vertical-align: middle; }
.ui-state-default.ui-state-highlight { border-radius: 50%; background-color: rgba(43, 57, 143, 0.5) !important; color: #fff;}
.ui-state-default.ui-state-active { border-radius: 50%; background-color: #2B398F !important; color: #fff; }
.ui-widget-content { border: none; }
.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span { margin-top: -12px; scale: 1.4; }
.ui-datepicker .ui-datepicker-prev span{ left: 70%; }.ui-datepicker .ui-datepicker-next span{ left: 36%; }
.alert_msg_wrap > div { font-size: 18px; font-weight: 500; justify-content: center; text-align: center; }

.short-select-wrapper {position: relative;display: inline-block;width: 35%;}
.short-select-wrapper::after {content: "";position: absolute;top: 50%;right: 12px;width: 24px;height: 28px;background: url("../images/auto/kprq_info_btn_grey.png") no-repeat;background-size: 24px 28px;transform: translateY(-50%) rotate(0deg);transition: transform 0.2s ease;pointer-events: none;}
.short-select-wrapper:focus-within::after,.select-wrapper:active::after {transform: translateY(-50%) rotate(-90deg);}
.iconbox .short-select-wrapper, .short-text-wrapper {display: inline-block;vertical-align: middle;}
.short-text-wrapper { width:60%; margin-left:4%;}

.testareaTopInfo {display: flex !important; font-size: clamp(13px,3vw,var(--fontsize-body-2)); gap: 4px; position: sticky;top: 0;z-index: 999;border-radius: 12px;display: flex;align-items: center;font-weight: var(--fontweight-body-4);letter-spacing: -0.3px;line-height: 130% !important;background-color: var(--color-primary-200);margin-bottom: 8px;padding: 16px !important;color: var(--color-gray-900);margin-right: 4px;word-break: keep-all;overflow: hidden; transition:background-color 0.2s ease;    justify-content: space-between;}
.testareaTopInfo-body { overflow: auto;max-height: 80px;opacity: 1; transition: max-height 0.25s ease, opacity 0.2s ease;will-change: max-height;}
.testareaTopInfo-toggle {background: transparent;line-height: 1.4;color: #333;cursor: pointer;font-size: 0;}
.testareaTopInfo-toggle::after {content: "";position: relative;display: inline-block;width: 18px;height: 19px;background: url("../images/auto/kprq_info_btn_grey.png") no-repeat center center;background-size: 18px 20px;transform: rotate(180deg);transition: transform 0.2s ease;}
.testareaTopInfo.is-collapsed { padding: 0px !important; background-color: transparent; justify-content: flex-end;transition: background-color 0.2s ease;}
.testareaTopInfo.is-collapsed .testareaTopInfo-body { display: none;}
.testareaTopInfo.is-collapsed .testareaTopInfo-toggle {display: flex;color: #666666;font-weight: 600;align-items: center;font-size: 14px;gap: 4px;padding: 4px 8px;border-radius: 8px;background-color: var(--color-primary-200);}
.testareaTopInfo.is-collapsed .testareaTopInfo-toggle::after {transform: rotate(0deg);}
@media (min-width: 769px) { .testareaTopInfo-toggle {display: none;}}

.answer_wrap > ul .answer_com .answer_title h1 {line-height: 1.2;}
.answer_wrap > ul .answer_com .answer_list.max-4 {display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;}
.answer_wrap > ul .answer_com .answer_list.max-4 .answer { flex: 0 1 calc(35% - 8px); max-width: calc(20% - 8px);}
@media (max-width: 600px){ .answer_wrap > ul .answer_com .answer_list.max-4 .answer { flex: 0 1 calc(25% - 8px); max-width: calc(21% - 8px);}.testareaTopInfo-body{max-height: 60px;}}
/*.answer_wrap > ul .answer_com .answer_list.max-4 {grid-template-columns: repeat(5, minmax(0, 1fr));}
@media (max-width: 600px){.answer_wrap > ul .answer_com .answer_list.max-4{grid-template-columns: repeat(4, minmax(0, 1fr));}}*/
.testareaTopInfo-body::-webkit-scrollbar { height: 4px; width: 10px; position: absolute; right:0; top: 0;background:var(--color-primary-200)}
.testareaTopInfo-body::-webkit-scrollbar-thumb { border: 2px solid var(--color-primary-200) !important; background: var(--color-primary-300);border-radius: 10px;}
.testareaTopInfo-body::-webkit-scrollbar-thumb:active { background: var(--color-primary-400);}
.testareaTopInfo-body::-webkit-scrollbar-track { background-color: var(--color-primary-200);}