@charset "utf-8";
@import url(../css/reset.css);
@import url(../css/noto_sans_kr.css);
@import url(../css/archivo_font.css);
@import url(../css/orig-tui-pagination.css);
@import url(../fonts/font-awesome/css/font-awesome.css);
@import url(../fonts/font-awesome/css/font-awesome.min.css);
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/s/materialiconsoutlined/v109/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}

.material-icons {display: inline-block; font-family: 'Material Icons' !important; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;}
.material-icons-outlined {display: inline-block; font-family: 'Material Icons Outlined' !important; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal;  direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;}
.material-symbols-outlined {font-weight: 600; color: #b3b8b3; font-size: 28px !important;}
.contain,h1,h2,h3,h4,h5,tr,td,select,input,label,button,strong {font-family: "Noto Sans KR" !important;}
span,p,em {font-family: "Noto Sans KR";}
* {box-sizing: border-box;}

/*** font size ***/
.fz10{font-size:10px !important;}
.fz11{font-size:11px !important;}
.fz12{font-size:12px !important;}
.fz13{font-size:13px !important;}
.fz14{font-size:14px !important;}
.fz15{font-size:15px !important;}
.fz16{font-size:16px !important;}
.fz17{font-size:17px !important;}
.fz18{font-size:18px !important;}
.fz19{font-size:19px !important;}
.fz20{font-size:20px !important;}
.fz21{font-size:21px !important;}
.fz22{font-size:22px !important;}
.fz23{font-size:23px !important;}
.fz24{font-size:24px !important;}
.fz25{font-size:25px !important;}
.fz26{font-size:26px !important;}
.fz27{font-size:27px !important;}
.fz28{font-size:28px !important;}
.fz29{font-size:29px !important;}
.fz30{font-size:30px !important;}

/*** font-weight ***/
.fw500 {font-weight: 500 !important;}
.fw600 {font-weight: 600 !important;}
.fw400 {font-weight: 400 !important;}
.fw700 {font-weight: 700 !important;}
.fw800 {font-weight: 800 !important;}
.fw900 {font-weight: 900 !important;}

/*** 말줄임 ***/
.ellip{display:block;height:100%;}
.ellip-line{display:inline-block;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;max-width:100%;}
.ellip,
.ellip-line{position:relative;overflow:hidden;}
.eps1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.eps2 span, .eps3 span{vertical-align:top;}

/*** margin ***/
.ma{margin:auto !important;}
.mla{margin-left:auto !important;}
.m0{margin:0 !important;}
.mt-1{margin-top:-1px !important;}
.mt0{margin-top:0 !important;}
.mt3{margin-top:3px !important;}
.mt5{margin-top:5px !important;}
.mt8{margin-top:8px !important;}
.mt10{margin-top:10px !important;}
.mt12{margin-top:12px !important;}
.mt15{margin-top:15px !important;}
.mt16{margin-top:16px !important;}
.mt20{margin-top:20px !important;}
.mt24{margin-top:24px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt36{margin-top:36px !important;}
.mt40{margin-top:40px !important;}
.mt45{margin-top:45px !important;}
.mt50{margin-top:50px !important;}
.mt55{margin-top:55px !important;}
.mt60{margin-top:60px !important;}

.mr0{margin-right:0 !important;}
.mr1{margin-right:1px !important;}
.mr2{margin-right:2px !important;}
.mr4{margin-right:4px !important;}
.mr5{margin-right:5px !important;}
.mr6{margin-right:6px !important;}
.mr8{margin-right:8px !important;}
.mr10{margin-right:10px !important;}
.mr12{margin-right:12px !important;}
.mr15{margin-right:15px !important;}
.mr16{margin-right:16px !important;}
.mr20{margin-right:20px !important;}
.mr24{margin-right:24px !important;}
.mr25{margin-right:25px !important;}
.mr30{margin-right:30px !important;}
.mr35{margin-right:35px !important;}
.mr40{margin-right:40px !important;}
.mr45{margin-right:45px !important;}
.mr50{margin-right:50px !important;}
.mr55{margin-right:55px !important;}
.mr60{margin-right:60px !important;}

.mb0{margin-bottom:0 !important;}
.mb4{margin-bottom:4px !important;}
.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb12{margin-bottom:12px !important;}
.mb15{margin-bottom:15px !important;}
.mb16{margin-bottom:16px !important;}
.mb20{margin-bottom:20px !important;}
.mb24{margin-bottom:24px !important;}
.mb25{margin-bottom:25px !important;}
.mb28{margin-bottom:28px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}
.mb45{margin-bottom:45px !important;}
.mb50{margin-bottom:50px !important;}
.mb55{margin-bottom:55px !important;}
.mb60{margin-bottom:60px !important;}

.ml0{margin-left:0 !important;}
.ml4p{margin-left:4% !important;}
.ml5{margin-left:5px !important;}
.ml8{margin-left:8px !important;}
.ml10{margin-left:10px !important;}
.ml12{margin-left:12px !important;}
.ml15{margin-left:15px !important;}
.ml16{margin-left:16px !important;}
.ml18{margin-left:18px !important;}
.ml20{margin-left:20px !important;}
.ml24{margin-left:24px !important;}
.ml25{margin-left:25px !important;}
.ml30{margin-left:30px !important;}
.ml35{margin-left:35px !important;}
.ml40{margin-left:40px !important;}
.ml45{margin-left:45px !important;}
.ml50{margin-left:50px !important;}
.ml55{margin-left:55px !important;}
.ml60{margin-left:60px !important;}

/*** padding ***/
.p0{padding:0 !important;}
.p4{padding:4px !important;}
.p6{padding:6px !important;}
.p8{padding:8px !important;}
.p10{padding:10px !important;}
.p12{padding:12px !important;}
.p16{padding:16px !important;}
.p20{padding:20px !important;}
.p24{padding:24px !important;}
.p28{padding:28px !important;}
.p32{padding:32px !important;}
.p40{padding:40px !important;}

.pt0{padding-top:0 !important;}
.pt5{padding-top:5px !important;}
.pt8{padding-top:8px !important;}
.pt10{padding-top:10px !important;}
.pt12{padding-top:12px !important;}
.pt15{padding-top:15px !important;}
.pt16{padding-top:16px !important;}
.pt20{padding-top:20px !important;}
.pt24{padding-top:24px !important;}
.pt25{padding-top:25px !important;}
.pt30{padding-top:30px !important;}
.pt32{padding-top:32px !important;}
.pt35{padding-top:35px !important;}
.pt40{padding-top:40px !important;}
.pt45{padding-top:45px !important;}
.pt50{padding-top:50px !important;}
.pt55{padding-top:55px !important;}
.pt60{padding-top:60px !important;}
.pt100{padding-top:100px !important;}
.pt120{padding-top:120px !important;}

.pr0{padding-right:0 !important;}
.pr4{padding-right:4px !important;}
.pr5{padding-right:5px !important;}
.pr8{padding-right:8px !important;}
.pr10{padding-right:10px !important;}
.pr12{padding-right:12px !important;}
.pr15{padding-right:15px !important;}
.pr16{padding-right:16px !important;}
.pr20{padding-right:20px !important;}
.pr24{padding-right:24px !important;}
.pr25{padding-right:25px !important;}
.pr28{padding-right:28px !important;}
.pr30{padding-right:30px !important;}
.pr35{padding-right:35px !important;}
.pr40{padding-right:40px !important;}
.pr45{padding-right:45px !important;}
.pr50{padding-right:50px !important;}
.pr55{padding-right:55px !important;}
.pr60{padding-right:60px !important;}

.pb0{padding-bottom:0 !important;}
.pb5{padding-bottom:5px !important;}
.pb8{padding-bottom:8px !important;}
.pb10{padding-bottom:10px !important;}
.pb12{padding-bottom:12px !important;}
.pb15{padding-bottom:15px !important;}
.pb16{padding-bottom:16px !important;}
.pb20{padding-bottom:20px !important;}
.pb24{padding-bottom:24px !important;}
.pb25{padding-bottom:25px !important;}
.pb30{padding-bottom:30px !important;}
.pb35{padding-bottom:35px !important;}
.pb40{padding-bottom:40px !important;}
.pb45{padding-bottom:45px !important;}
.pb50{padding-bottom:50px !important;}
.pb55{padding-bottom:55px !important;}
.pb60{padding-bottom:60px !important;}
.pb80{padding-bottom:80px !important;}
.pb100{padding-bottom:100px !important;}

.pl0{padding-left:0 !important;}
.pl4{padding-left:4px !important;}
.pl5{padding-left:5px !important;}
.pl8{padding-left:8px !important;}
.pl10{padding-left:10px !important;}
.pl12{padding-left:12px !important;}
.pl15{padding-left:15px !important;}
.pl16{padding-left:16px !important;}
.pl20{padding-left:20px !important;}
.pl24{padding-left:24px !important;}
.pl25{padding-left:25px !important;}
.pl30{padding-left:30px !important;}
.pl35{padding-left:35px !important;}
.pl40{padding-left:40px !important;}
.pl45{padding-left:45px !important;}
.pl50{padding-left:50px !important;}
.pl55{padding-left:55px !important;}
.pl60{padding-left:60px !important;}
.prl0{padding-right:0 !important;padding-left:0 !important;}

/*** border radius ***/
.bdrs50p{border-radius:50% !important;}
.bdrs0{border-radius:0 !important;}
.bdrs4{border-radius:4px !important;}
.bdrs5{border-radius:5px !important;}
.bdrs10{border-radius:10px !important;}
.bdrs0550{border-radius:0 5px 5px 0 !important;}
.bdrs0055{border-radius:0 0 5px 5px !important;}
.bdrs5005{border-radius: 5px 0 0 5px  !important;}
.bdrs5000{border-radius: 5px 0 0 0  !important;}
.bdrs0500{border-radius: 0 5px 0 0  !important;}
.bdrs0050{border-radius: 0 0 5px 0  !important;}
.bdrs0005{border-radius: 0 0 0 5px  !important;}

/*** border ***/
.bd0{border:0 !important;}
.bdt0{border-top:0 !important;}
.bdr0{border-right:0 !important;}
.bdb0{border-bottom:0 !important;}
.bdl0{border-left:0 !important;}

/*** align ***/
.tal{text-align:left !important;}
.tac{text-align:center !important;}
.tar{text-align:right !important;}
.taj{text-align:justify !important;}
.vt{vertical-align:top !important;}
.vm{vertical-align:middle !important;}
.vb{vertical-align:bottom !important;}

/*** 높이 ***/
.h24 {height: 24px !important;}
.h27 {height: 27px !important;}
.h32 {height: 32px !important;}
.h37 {height: 37px !important;}
.h40 {height: 40px !important;}
.h42 {height: 42px !important;}
.h50 {height: 50px !important;}

/*** 너비 ***/
.mw0 {min-width: 0;}

.w16p {width:16.666%;}
.w24p {width:24%;}
.w40p {width:40%;}
.w48p {width:48%;}
.w50p {width:50% !important;}
.w60p {width:60%;}
.w100p {width:100% !important;}
.w100ph {width:100%; height: 100%; min-height: 200px;}

.w16 {width: 16px !important;}
.w20 {width: 20px !important;}
.w24 {width: 24px !important;}
.w25 {width: 25px !important;}
.w44 {width: 44px !important;}
.w72 {width: 72px !important;}
.w76 {width: 76px !important;}
.w80 {width: 80px !important;}
.w100{width: 100px !important;}
.w112{width:112px !important;}
.w140{width:140px !important;}
.w240{width:240px !important;}
.w172{width:172px !important;}
.w180{width:180px !important;}
.w200{width:200px !important;}
.w220{width:220px !important;}
.w300{width:300px !important;}
.w320{width:320px !important;}
.w340{width:340px !important;}
.w350{width:350px !important;}
.w360{width:360px !important;}
.w480{width:480px !important;}
.w1172{width:1172px !important;}

.w100p-113 {width: calc(100% - 113px);}
.w100p-760 {width: calc(100% - 760px);}

/*** display ***/
.dp-f {display: flex !important; }
.dp-i {display: inline !important; }
.dp-b {display: block !important; }
.dp-ib {display: inline-block !important; }
.dp-if {display: inline-flex !important; }
.dp-n {display: none !important; }

/*** flex ***/
.fxww {flex-wrap:wrap !important;}
.fg1 {flex-grow:1 !important;}
.fshr {flex-shrink: 0 !important;}
.jcc {justify-content:center !important;}
.jcfs {justify-content:flex-start !important;}
.jcfe {justify-content:flex-end !important;}
.jcn {justify-content:normal !important;}
.jcsb {justify-content:space-between !important;}
.aic {align-items:center !important;}

/*** 프라이머리 컬러 베리데이션 ***/
.P-color-light10 {background: #1aa358 !important;}
.P-color-light20 {background: #34ad6a !important;}
.P-color-light30 {background: #4db87d !important;}
.P-color-light40 {background: #67c28f !important;}
.P-color-light50 {background: #80cca2 !important;}
.P-color-light60 {background: #99d6b5 !important;}
.P-color-light70 {background: #b3e0c7 !important;}
.P-color-light80 {background: #ccebda !important;}
.P-color-light90 {background: #e6f5ec !important;}
.A-color-light90 {background: #f7e7e7 !important;}

.P-color-dark10 {background: #018a3e !important;}
.P-color-dark20 {background: #017a37 !important;}
.P-color-dark30 {background: #016b30 !important;}
.P-color-dark40 {background: #015c29 !important;}
.P-color-dark50 {background: #014d23 !important;}
.P-color-dark60 {background: #003d1c !important;}
.P-color-dark70 {background: #002e15 !important;}
.P-color-dark80 {background: #001f0e !important;}
.P-color-dark90 {background: #000f07 !important;}

/*** 무채색 컬러 ***/
.black-darker    {color: #001300 !important;}
.black-dark      {color: #1a2b1a !important;}
.black           {color: #334233 !important;}
.black-light     {color: #4d5a4d !important;}
.black-lighter   {color: #667166 !important;}
.gray-darker     {color: #808980 !important;}
.gray-dark       {color: #99a199 !important;}
.gray            {color: #b3b8b3 !important;}
.gray-light      {color: #ccd0cc !important;}
.gray-lighter    {color: #e6e7e6 !important;}
.white           {color: #ffffff !important;}
.gray-white      {color: #f4f4f4 !important;}

/*** font-color ***/
.fc-bder      {color: #001300 !important;}
.fc-bd        {color: #1a2b1a !important;}
.fc-b         {color: #334233 !important;}
.fc-bl        {color: #4d5a4d !important;}
.fc-bler      {color: #667166 !important;}
.fc-gder      {color: #808980 !important;}
.fc-gd        {color: #99a199 !important;}
.fc-g         {color: #b3b8b3 !important;}
.fc-gl        {color: #ccd0cc !important;}
.fc-gler      {color: #e6e7e6 !important;}
.fc-w         {color: #ffffff !important;}
.fc-gw        {color: #f4f4f4 !important;}
.fc-ylw       {color: #ffb400;}
.fc-red       {color: #e84a4b;}
.fc-ylw:focus {color: var(--P-color);}

.fc-p {color: var(--P-color)}
.fc-pdrk10 {color: var(--P-color-dark10); }
.fc-pdrk20 {color: var(--P-color-dark20); }
.fc-pdrk30 {color: var(--P-color-dark30); }
.fc-pdrk40 {color: var(--P-color-dark40); }
.fc-pdrk50 {color: var(--P-color-dark50); }
.fc-pdrk60 {color: var(--P-color-dark60); }
.fc-pdrk70 {color: var(--P-color-dark70); }
.fc-pdrk80 {color: var(--P-color-dark80); }
.fc-pdrk90 {color: var(--P-color-dark90); }

/*** border color ***/
.bd-gler        {border: 1px solid var(--gray-lighter) !important;}
.bd-gder        {border: 1px solid var(--gray-darker) !important;}
.bd-b           {border: 1px solid var(--black) !important;}
.bd-t-gler      {border: 0; border-top: 1px solid var(--gray-lighter) !important;}
.bd-b-gler      {border: 0; border-bottom: 1px solid var(--gray-lighter) !important;}
.bd-b-der       {border: 0; border-bottom: 1px solid var(--gray-darker) !important;}
.bd-ylw         {border: 1px solid #ffb400;}
.bd-ylw:focus   {border: 1px solid var(--P-color);}
.bd-p           {border: 2px solid var(--P-color) !important;}
.bd-f-n         {outline: none;}
.bd-focus:focus {outline: none;}

/*** background color ***/
.bg-p         {background: var(--P-color) !important;}
.bg-w         {background: var(--white) !important;}
.bg-gw        {background: var(--gray-white) !important;}
.bg-a         {background: var(--Alert) !important;}
.bg-b         {background: var(--black) !important; }
.bg-a10       {background: var(--Alert10);}
.bg-gl        {background: var(--gray-light) !important;}
.bg-ylw       {background: #ffb400;}
.bg-ylw:focus {background: var(--P-color);}
.bg-gl-c      {background: var(--gray-light); cursor: pointer;}
.bg-p90       {background: var(--P-color-light90); cursor: pointer;}

.bg-p90-zindx         {z-index: 1; position: relative;}
.bg-p90-zindx::before {z-index:-1; content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--P-color-light90); border-radius: 50%;}

:root{
    --P-color :      #019945;
    --Alert :        #e84a4b;
    --Alert10 :      #fdeded;
    --black-darker : #001300;
    --black-dark:    #1a2b1a;
    --black:         #334233;
    --black-light:   #4d5a4d;
    --black-lighter: #667166;
    --gray-darker:   #808980;
    --gray-dark:     #99a199;
    --gray:          #b3b8b3;
    --gray-light:    #ccd0cc;
    --gray-lighter:  #e6e7e6;
    --white:         #ffffff;
    --gray-white:    #f4f4f4;

    --P-color-dark10 :#018a3e;
    --P-color-dark20 :#017a37;
    --P-color-dark30 :#016b30;
    --P-color-dark40 :#015c29;
    --P-color-dark50 :#014d23;
    --P-color-dark60 :#003d1c;
    --P-color-dark70 :#002e15;
    --P-color-dark80 :#001f0e;
    --P-color-dark90 :#000f07;

    --P-color-light10 :#1aa358;
    --P-color-light20 :#34ad6a;
    --P-color-light30 :#4db87d;
    --P-color-light40 :#67c28f;
    --P-color-light50 :#80cca2;
    --P-color-light60 :#99d6b5;
    --P-color-light70 :#b3e0c7;
    --P-color-light80 :#001f0e;
    --P-color-light90 :#e6f5ec;
}

/*프라이머리 컬러*/
.Alert   {color: #e84a4b;}
.P-color {color: #019945;}
.P-bg    {background: #019945 !important; color: #fff !important; border: 0 !important;}
.P-d20-bg{background: var(--P-color-dark20) !important; color: #fff !important; border: 0 !important;}
.B-bg    {background: #334233 !important; color: #fff !important; border: 0 !important;}
.W-bg    {background: #fff;}

/* elevation */
.elev01 {box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30);}
.elev02 {box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.25), 0 1px 2px 0 rgba(0, 0, 0, 0.30);}
.elev03 {box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15);}
.elev04 {box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15);}
.elev05 {box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15);}
.elev06 {box-shadow: -1.5px 4px 4px 0 rgba(0, 0, 0, 0.35);}/*icon-shadow*/

/* 로딩 아이콘 */
#load {background: url('/WEB-INF/views/imprvd/design/coding/pdfjs/web/images/loading-dark.svg') no-repeat center center; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 9999999;}
#load > img {position: absolute; top: 50%; left: 50%; z-index: 100;}

/* 라디오 버튼 */
.radio-label                           {display: flex; align-items: center;}
.p-rdBtn[type="radio"]                 {width: 28px; height: 28px; border: 1px solid #b3b8b3; border-radius: 50%; background-color: var(--white); position: relative; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.p-rdBtn[type="radio"]:checked         {border: 1px solid var(--P-color); background-color: var(--white);}
.p-rdBtn[type="radio"]:checked::before {content: ''; display: block; width: 16px; height: 16px; background-color: var(--P-color); border-radius: 50%;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}
.p-rdBtn[type="radio"] + span          {margin: 0 30px 0 6px; cursor: pointer; }


.p-radio-btn[type="radio"],
.p-radio-btn[type="radio"]:checked {width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 50%; accent-color: var(--P-color);}
.p-radio-btn[type="radio"] + span  {margin: 0 40px 0 6px;}

.w-radio-btn                       {appearance: none; width: 28px; height: 28px; border: 1px solid var(--white);  border-radius: 50%; cursor: pointer;}
.w-radio-btn[type='radio']         {appearance: none; width: 28px; height: 28px; border: 1px solid var(--white);  border-radius: 50%; cursor: pointer;}
.w-radio-btn[type='radio']:checked {border: 6px solid var(--white); background: linear-gradient(45deg, #9cddb2, #019945);}
.w-radio-btn[type='radio'] + span  {margin: 0 20px 0 12px; cursor: pointer;}

.p-radio[type="radio"]         {appearance: none; border: 1px solid #ddd; width: 20px; height: 20px; border-radius: 50%;}
.p-radio[type="radio"]:checked {width: 20px; height: 20px; border: 0.5em solid var(--P-color); border-radius: 50%;}
.p-radio[type="radio"] + span  {margin: 0 40px 0 6px;}

.miri-radio[type="radio"]         {appearance: none; width: 28px; height: 28px;  border: 1px solid var(--black); border-radius: 50%;}
.miri-radio[type="radio"]:checked {width: 28px; height: 28px; border: 0.6em solid var(--P-color); border-radius: 50%;}
.miri-radio[type="radio"] + span  {cursor: pointer;}

/* 체크박스  */
.checkP                                {cursor: pointer;}
.checkP input[type="checkbox"]         {appearance: none; border: 1px solid #ddd; width: 20px; height: 20px; border-radius:50%;}
.checkP input[type="checkbox"]:checked {background: var(--P-color); border: 1px solid var(--P-color); background-image: url(../../static/img/common/checkbox.png); background-size: cover;}
.checkP input + span                   {vertical-align: middle; padding: 0 40px 0 6px;}
.p-radio-btn[type="radio"]:checked     {width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 50%; accent-color: var(--P-color);}
.p-radio-btn[type="radio"] + span      {margin: 0 40px 0 6px;}

.p-radio[type="radio"]         {appearance: none; border: 1px solid#ddd; width: 20px; height: 20px; border-radius: 50%;}
.p-radio[type="radio"]:checked {width: 20px; height: 20px; border: 0.5em solid var(--P-color); border-radius: 50%;}
.p-radio[type="radio"] + span  {margin: 0 40px 0 6px; }

.checkP                                {cursor: pointer;}
.checkP input[type="checkbox"]         {appearance: none; border: 1px solid #ddd; width: 20px; height: 20px; border-radius:50%;}
.checkP input[type="checkbox"]:checked {background: var(--P-color); border: 1px solid var(--P-color); background-image: url(../img/common/btn_ico_checkbox_on.svg); background-size: cover; }
.checkP input + span                   {vertical-align: middle; padding: 0 40px 0 6px;}

.checkA                                {cursor: pointer;}
.checkA input[type="checkbox"]         {appearance: none; border: 1px solid #ddd; width: 20px; height: 20px; border-radius:50%;}
.checkA input[type="checkbox"]:checked {background: var(--Alert); border: 1px solid var(--Alert); background-image: url(../img/common/btn_ico_checkbox_on.svg); background-size: cover;}
.checkA input + span                   {vertical-align: middle; padding: 0 40px 0 6px;}

.checkS                                {cursor: pointer;}
.checkS input[type="checkbox"]         {appearance: none; border: 1px solid #ddd; width: 20px; height: 20px; border-radius:5px;}
.checkS input[type="checkbox"]:checked {background: var(--P-color); border: 1px solid var(--P-color); background-image: url(../img/common/btn_ico_checkbox_on.svg); background-position: center center; }
.checkS input[type="radio"],
.checkS input[type="radio"]:checked    {width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 50%; accent-color: var(--P-color);}
.checkS input + span                   {vertical-align: middle; padding: 0 40px 0 6px;}

.chk-rdo-bx                                {display: flex; align-items: center;}
.chk-rdo-bx input[type="checkbox"]         {appearance: none; border: 1px solid #ddd; width: 24px; height: 24px; border-radius:5px;}
.chk-rdo-bx input[type="checkbox"]:checked {background: var(--P-color); border: 1px solid var(--P-color); background-image: url(../img/common/btn_ico_checkbox_on.svg); background-position: center center; }
.chk-rdo-bx input[type="radio"],
.chk-rdo-bx input[type="radio"]:checked    {width: 24px; height: 24px; border: 1px solid #ddd; border-radius: 50%; accent-color: var(--P-color);}
.chk-rdo-bx label                          {flex-shrink: 0;}
.chk-rdo-bx label span                     {vertical-align: text-bottom; padding: 0 40px 0 12px;}


/* 인풋 캘린더 */
.input-datepicker                        {width: 100%;}
.input-datepicker input[type=text]       {background: var(--white); border: 0; border-bottom: 1px solid #e6e7e6 ; background-image: url(../img/common/ico_calendar.png); background-repeat: no-repeat; background-position: 95% 50%; background-size: 20px 20px; padding: 10px 30px 10px 12px ; cursor: pointer;}
.input-datepicker input[type=text]:focus {outline: none; border: 1px solid rgba(1, 153, 69, 0.4); padding: 10px 30px 10px 12px ; color: #001300;}

.input-datepicker-box {display: inline-flex; align-items: center; justify-content: center; width: 100%; border: 1px solid #e6e7e6; border-radius: 25px;}
.input-datepicker-box .datepicker-r input {width: 132px; height: 42px; border: 0;background-image: url(../img/common/ico_calendar.png); background-repeat: no-repeat; background-position: 95% 50%; background-size: 20px 20px; padding: 10px 30px 10px 12px ; cursor: pointer;}
.input-datepicker-box .datepicker-r input:focus {outline: none;}
.input-datepicker-box .input-datepicker-r {width: 100%;}
.input-datepicker-box .input-datepicker-r input[type=text] {width: 132px; height: 42px; background: var(--white); border: 0; background-image: url(../img/common/ico_calendar.png); background-repeat: no-repeat; background-position: 95% 50%; background-size: 20px 20px; padding: 10px 30px 10px 12px ;}
.input-datepicker-box .input-datepicker-r input[type=text]:focus {outline: none; border: 1px solid rgba(1, 153, 69, 0.4); padding: 10px 30px 10px 12px ; color: #001300;}

.datepicker-two {display: flex; align-items: center; justify-content: center;}
.datepicker-two span {padding: 0 8px;}

.direct-box {display: none; position: relative;}
.direct-box.on {display: block;}
.direct-box .direct-btn  {cursor: pointer; width: 16px; height: 16px; position: absolute; top: 16px; right: 20px;}
.direct-box .direct-btn1 {cursor: pointer; width: 16px; height: 16px; position: absolute; top: 16px; right: 20px;}
.direct-box .direct-btn2 {cursor: pointer; width: 16px; height: 16px; position: absolute; top: 16px; right: 20px;}
.direct-box .direct-btn3 {cursor: pointer; width: 16px; height: 16px; position: absolute; top: 16px; right: 20px;}
.direct-box .direct-btn4 {cursor: pointer; width: 16px; height: 16px; position: absolute; top: 16px; right: 20px;}
.direct-box .selboxDirect  {width: 100%; padding: 10px 45px 10px 12px;}
.direct-box .selboxDirect1 {width: 100%; padding: 10px 45px 10px 12px;}
.direct-box .selboxDirect2 {width: 100%; padding: 10px 45px 10px 12px;}
.direct-box .selboxDirect3 {width: 100%; padding: 10px 45px 10px 12px;}
.direct-box .selboxDirect4 {width: 100%; padding: 10px 45px 10px 12px;}

.direct-email-box {display: none; position: relative; height: 50px;}
.direct-email-box.on {display: flex;}
.direct-email-box .direct-email  {cursor: pointer; width: 24px; height: 24px; position: absolute; top: 13px; right: 12px;}

/*렌지버튼*/
.range {display: flex; align-items: center; justify-content: center;}
.range .low-contrast {display: flex; align-items: center; justify-content: end; width: 20%; margin: 0 8px 0 0 ;}
.range .high-contrast {display: flex; align-items: center; justify-content: start; width: 20%; margin: 0 0 0 8px;}
.range input[type=range]{width:60%; height: 5px; box-shadow:inset 2px 2px 4px 0 rgba(0,0,0, 0.2); background: #e6e7e6; border-radius: 0.5rem; -webkit-appearance: none; }
.range input[type=range]::-webkit-slider-thumb {background: #139a42; cursor: pointer; border: 1px solid #fff; box-shadow: 2px 2px 4px 0 rgba(0,0,0, .3); height: 16px; width: 45px; border-radius: 10px; -webkit-appearance: none; }

/* datepicker 통일*/
.ui-input-date {position:relative;}
.ui-input-date input {width:100%;}
.ui-input-date input.miri-datepicker,
.ui-input-date input.miri-datepicker:hover {padding-right: 30px;background: url(../img/common/ico_calendar.png) no-repeat right  12px top 9px #fff !important ; background-size: 20px auto !important; color: #000 !important; cursor: pointer;border-radius: 0px;}
.ui-input-date input.miri-datepicker + .ui-datepicker-trigger {width: 24px;height: 24px;font-size:0px;vertical-align:middle;outline:none;position: absolute;right: 2px;top: 2px;border: none;background: none;}

.ui-input-date {position:relative;}
.ui-input-date input {width:100%;}
.ui-input-date input.miri-datepicker-r,
.ui-input-date input.miri-datepicker-r:hover {padding-right: 30px;background: url(../img/common/ico_calendar.png) no-repeat right  12px top 11px #fff !important ; background-size: 20px auto !important; color: #000 !important; cursor: pointer;border-radius: 0px;}
.ui-input-date input.miri-datepicker-r + .ui-datepicker-trigger {width: 24px;height: 24px;font-size:0px;vertical-align:middle;outline:none;position:absolute;right: 2px;top: 2px;border: none;background: none;}

/* 미리 스탠다드, 프리미엄, 스마트 라벨 시작 */
.lbl-opt {display: flex; align-items: center; justify-content: start; position: relative; width: 32%; height: 75px; border-radius: 10px; position: relative; padding: 16px 20px; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30); border: 1px solid var(--white); background: var(--white); margin: 0 0 16px 0; cursor: pointer;}
.lbl-opt img:nth-child(1) {width: 63px; height: auto;}
.lbl-opt .lbl-miri {display: inline-block; width: 60px; height: 36px; background: url(../img/common/img_ico_miri.png) no-repeat; background-size: contain; background-position: center;}
.lbl-opt .lbl-txt {font-size: 24px; font-weight: 800; padding-left: 8px; font-family: 'Archivo' !important;}
.lbl-opt .lbl-img {display: none; position: absolute; right: 24px; width: 36px; height: 36px; background: url(../img/common/ico_check_w.png) no-repeat; }
.lbl-opt input {display: none;}
.lbl-opt-ip {display: none;}

.lbl-opt.on {background: linear-gradient(45deg, #9cddb2, #019945);}
.lbl-opt.on .lbl-miri {background: url(../img/common/img_ico_miri_on.png) no\-repeat; background-size: contain; background-position: center; }
.lbl-opt.on .lbl-txt  {color: var(--white);}
.lbl-opt.on .lbl-img  {display: block;}

.lbl-opt.disabled {background: var(--gray-lighter);}
.lbl-opt.on .lbl-miri {background: url(../img/common/img_ico_miri_on.png) no\-repeat; background-size: contain; background-position: center;}
.lbl-opt.on .lbl-txt {color: var(--white);}
.lbl-opt.on .lbl-img {display: block; }

.lbl-opt-ip:disabled + .lbl-opt {background: var(--gray-light); cursor: default;}
/* 미리 스탠다드, 프리미엄, 스마트 라벨 끝 */

/*****************************************************************************************************************************************************************************************/

/*아직 정의 안된것들 */
.overhid {overflow: hidden;}
.flx {display: flex; justify-content: space-between; align-items: center; width: 100%;}

.cp {cursor: pointer;}
.op04 {opacity: 0.4; cursor: default !important;}

/*패딩*/
.pad0800 {padding: 8px 0 !important;}
.pad0812 {padding: 8px 12px;}
.pad0816 {padding: 8px 16px;}
.pad0824 {padding: 8px 24px;}
.pad0832 {padding: 8px 32px;}
.pad1000 {padding: 10px 0 !important;}
.pad1016 {padding: 10px 16px;}
.pad1024 {padding: 10px 24px;}
.pad1200 {padding: 12px 0 !important;}
.pad1216 {padding: 12px 16px;}
.pad1220 {padding: 12px 20px;}
.pad1224 {padding: 12px 24px;}
.pad1232 {padding: 12px 32px;}
.pad1248 {padding: 12px 48px;}
.pad1420 {padding: 14px 20px;}
.pad1624 {padding: 16px 24px;}
.pad1632 {padding: 16px 32px;}
.pad1660 {padding: 16px 60px;}
.pad2000 {padding: 20px 0;}
.pad2010 {padding: 20px 10px;}
.pad2024 {padding: 20px 24px;}
.pad2060 {padding: 20px 60px;}
.pad2428 {padding: 24px 28px;}
.pad2832 {padding: 28px 32px;}
.pad2840 {padding: 28px 40px;}
.pad3632 {padding: 36px 32px;}
.pad3060 {padding: 30px 60px;}

.pad04-60 {padding: 4px 0 60px 0 !important;}
.pad12-12 {padding: 12px 0 12px 0 !important;}
.pad16-16 {padding: 16px 0 16px 0 !important;}
.pad16-24 {padding: 16px 0 24px 0 !important;}
.pad20-10 {padding: 20px 0 10px 0;}
.pad24-12 {padding: 24px 0 12px 0;}
.pad24-24 {padding: 24px 0 24px 0;}
.pad24-24 {padding: 24px 0 24px 0;}
.pad26-08 {padding: 26px 0 8px 0;}
.pad32-16 {padding: 32px 0 16px 0;}
.pad60-12 {padding: 60px 0 12px 0;}
.pad90-10 {padding: 90px 0 10px 0;}

.pad10161004 {padding: 10px 16px 10px 4px !important;}
.pad10451012 {padding: 10px 45px 10px 12px !important; }
.pad16541612 {padding: 16px 45px 16px 12px !important;}
.pad20240824 {padding: 20px 24px 8px 24px !important;}
.pad60-12 {padding: 60px 0 12px;}


.padw0808 {padding: 0 8px;}
.padw3220 {padding: 0 32px 0 20px;}

/* 필수값 */
.required-a:after{content: "*"; color: var(--Alert)}
/*버튼컬러*/
a.btn.h64   {display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; border: 1px solid #019945; background: #019945; box-sizing: border-box; color: #fff;                                   text-decoration: none;}
a.btn.h50.P {display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border: 1px solid #019945; background: #019945; box-sizing: border-box; color: #fff; border-radius: 5px; width: 460px; text-decoration: none;}
a.btn.h50.A {display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border: 1px solid #e84a4b; background: #e84a4b; box-sizing: border-box; color: #fff; border-radius: 5px; width: 460px; text-decoration: none;}

button.btn.h64   {width: 100%; height: 64px; border: 1px solid #019945; background: #019945; color: #fff; cursor: pointer;}
button.btn.h50.P {width: 100%; height: 50px; border: 1px solid #019945; background: #019945; color: #fff; border-radius: 5px; width: 460px; cursor: pointer;}
button.btn.h50.A {width: 100%; height: 50px; border: 1px solid #e84a4b; background: #e84a4b; color: #fff; border-radius: 5px; width: 460px; cursor: pointer;}

.two-btn       {display: flex; align-items: center; justify-content: center; width: 100%;}
.two-btn .w40p {width: 40%;}
.two-btn .w60p {width: 60%;}

/*폰트 사이즈 REM*/
.H1       {font-size: 2.75rem;             line-height: 160%; font-weight: 600;}
.H2       {font-size: 2rem !important;     line-height: 160%; font-weight: 600;}
.H3       {font-size: 1.5rem;              line-height: 160%; font-weight: 600;}
.head_L   {font-size: 2rem;                line-height: 40px;}
.head_M   {font-size: 1.75rem;             line-height: 36px;}
.head_S   {font-size: 1.5rem;              line-height: 32px;}
.Title_L  {font-size: 1.25rem !important;  line-height: 160%;}
.title_m  {font-size: 1.125rem !important; line-height: 160%; font-weight: 500;}
.Title_S  {font-size: 1rem;                line-height: 160%; font-weight: 500;}
.body_L   {font-size: 1rem;                line-height: 160%;}
.body_M   {font-size: 0.875rem;            line-height: 160%;}
.body_S   {font-size: 0.74rem;             line-height: 16px;}
.body_XL  {font-size: 1.125rem;            line-height: 160%;}
.Label_L  {font-size: 0.875rem;            line-height: 20px;}
.Label_M  {font-size: 0.75rem;             line-height: 16px;}
.Label_S  {font-size: 0.6875rem;           line-height: 16px;}
.SemiBold {font-size:0.875rem;             line-height: 160%; font-weight: 600}

.f18160   { font-size: 1.125rem;           line-height: 160%;}
.f18160b  { font-size: 1.125rem;           line-height: 160%; font-weight: bold;}
.f16160   { font-size: 1rem;               line-height: 160%;}
.f16160b  { font-size: 1rem;               line-height: 160%; font-weight: bold;}
.f22160b  { font-size: 1.37rem !important; line-height: 160%; font-weight: bold;}

/*인풋태그*/
/*border: 1px solid rgba(1, 153, 69, 0.4); border-radius: 5px; padding: 16px 0 16px 20px;*/
.input-a       {width: 100%; border: 0; border: 1px solid var(--gray);}
.input-f:focus {outline: none; color: #001300;}

.input-f       {width: 100%; border: 0; border-bottom: 1px solid #ddd; padding: 16px 0 16px 4px;}
.input-f:focus {outline: none; color: #001300;}

.input-f04       {width: 100%; border: 0; border-bottom: 1px solid #ddd; padding:10px 16px 10px 4px;}
.input-f04:focus {outline: none; border: 1px solid rgba(1, 153, 69, 0.4); border-radius: 5px; padding: 10px 16px 10px 4px; color: #001300;}

.input-ff       {width: 100%; border: 0; border-bottom: 1px solid #ddd; padding: 10px 12px; background: var(--white); margin: 0 8px 0 0;}
.input-ff:focus {outline: none; border: 1px solid rgba(1, 153, 69, 0.4); padding: 10px 12px ; color: #001300;}

.input-ff2       {width: 100%; border: 0; border: 1px solid #ddd; padding: 10px 12px; background: var(--white); margin: 0 8px 0 0;}
.input-ff2:focus {outline: none; border: 1px solid rgba(1, 153, 69, 0.4); padding: 10px 12px ; color: #001300;}


.input-fff       {width: 100%; height: 49px; border: 0; border-bottom: 1px solid #ddd; padding: 10px 12px; background: var(--white); margin: 0 8px 0 0;}
.input-fff:focus {outline: none; border: 1px solid rgba(1, 153, 69, 0.4); padding: 10px 12px ; color: #001300;}

.add-white-bg  { background: #fff; position: relative;}
.input-count   {width: 115px; border: 0; outline: 0; border-bottom: 1px solid var(--gray); padding: 10px 45px 10px 12px; text-align: end; font-size: 20px; line-height: 160%; font-weight: bold; position: relative;}
.input-won     {width: 320px; border: 0; outline: 0; border-bottom: 1px solid var(--gray); padding: 10px 45px 10px 12px; text-align: end;  line-height: 160%; background: url(../img/common/ico_won.png)   no-repeat 97% 50%;}
.input-won-off {width: 320px; border: 0; outline: 0; border-bottom: 1px solid var(--gray); padding: 10px 45px 10px 12px; line-height: 160%; background: transparent;}
.input-count-txt {position: absolute; top: 12px; right: 12px;}

.num             {display: flex; align-items: center; justify-content: center; width: 100%;}
.num .num1       {width: 50%; border: 0; border-bottom: 1px solid #ddd; padding: 16px 0; text-align: center;}
.num .num1:focus {outline: none; border: 1px solid rgba(1, 153, 69, 0.4); border-radius: 5px; padding: 16px 0; color: #001300;}
.num .num2       {width: 50%; border: 0; border-bottom: 1px solid #ddd; padding: 16px 0; text-align: center;}
.num .num2:focus {outline: none; border: 1px solid rgba(1, 153, 69, 0.4); border-radius: 5px; padding: 16px 0; color: #001300;}
.num i           { margin: 0 7px;}


/* 셀렉트 박스 */
.selectbox {background: url(../img/common/select_ico_list_off.png)no-repeat 95% 50%/12px auto;}
.selectbox select { width: 100%; border: 0; border-bottom: 1px solid #ddd; padding: 10px 16px 10px 4px ; -webkit-appearance:none; -moz-appearance:none; box-sizing: border-box; appearance:none; background: transparent;}
.selectbox select::-ms-expand{ display:none;}
.selectbox select:focus {outline: none; border: 1px solid rgba(1, 153, 69, 0.4); border-radius: 5px; padding: 10px 0 10px 4px; color: #001300;}

.selectbox-s select {height: 42px; border: 0; border-bottom: 1px solid #e6e7e6; -webkit-appearance:none; -moz-appearance:none; box-sizing: border-box; appearance:none; padding: 10px 4px 10px 12px; background: var(--white); background-image: url(../img/common/select_drop_down_arr.png); background-size: 20px; background-repeat: no-repeat; background-position: calc(100% - 4px) center; margin: 0 8px 0 0;}
.selectbox-s select::-ms-expand{display:none;}
.selectbox-s select:focus {outline: none; border: 1px solid rgba(1, 153, 69, 0.4); color: #001300; padding: 10px 4px 10px 12px;}

.selectbox-af select {height: 50px; border-radius: 5px; border: 0; border: 1px solid #e6e7e6; -webkit-appearance:none; -moz-appearance:none; box-sizing: border-box; appearance:none; padding: 10px 4px 10px 12px; background: var(--white); background-image: url(../img/common/select_drop_down_arr.png); background-repeat: no-repeat; background-position: 100% 50%; margin: 0 20px 0 0; background-size: 20px;}
.selectbox-af select::-ms-expand {display:none;}
.selectbox-af select:focus {outline: none; border: 1px solid rgba(1, 153, 69, 0.4); color: #001300; padding: 10px 4px 10px 12px;}

.selectbox-d select {border: 0; border-bottom: 1px solid #e6e7e6; -webkit-appearance:none; -moz-appearance:none; box-sizing: border-box; appearance:none; padding: 10px 4px 10px 12px; background: var(--white); background-image: url(../img/common/select_ico_list_off.png); background-repeat: no-repeat; background-position: 95% 50%; background-size: 6%; margin: 0 20px 0 0;}
.selectbox-d select::-ms-expand {display:none;}
.selectbox-d select:focus {outline: none; border: 1px solid rgba(1, 153, 69, 0.4); color: #001300; padding: 10px 4px 10px 12px;}



/* 동그란 버튼 */
button.P-r        {width: 100%; border: 1px solid var(--P-color); border-radius: 50px; background: var(--white);   color: var(--P-color); cursor: pointer;}
button.B-r        {width: 100%; border: 1px solid var(--black);   border-radius: 50px; background: var(--white);   color: var(--black);   cursor: pointer;}
button.A-btn-r    {width: 100%; border: 1px solid var(--Alert);   border-radius: 50px; background: var(--Alert);   color: var(--white);   cursor: pointer;}
button.BL-btn-r   {width: 100%; border: 1px solid var(--black-light); border-radius: 50px; background: var(--black-light);   color: var(--white);   cursor: pointer;}
button.B-btn-r    {width: 100%; border: 1px solid var(--black);   border-radius: 50px; background: var(--black);   color: var(--white);   cursor: pointer;}
button.G-btn-r    {width: 100%; border: 1px solid #b3b8b3;        border-radius: 50px; background: #b3b8b3;    color: var(--white);   cursor: pointer;}
button.G-btn-l    {width: 100%; border: 1px solid #b3b8b3;        border-radius: 50px; background: var(--white);    color: #b3b8b3;   cursor: pointer;}
button.G-btn-r.on {width: 100%; border: 1px solid var(--P-color); border-radius: 50px; background: var(--P-color); color: var(--white);   cursor: pointer;}
button.P-btn-r    {width: 100%; border: 1px solid var(--P-color-dark20); border-radius: 50px; background: var(--P-color-dark20); color: var(--white);   cursor: pointer;}
button.P-r:hover, button.P-r:focus,
button.B-r:hover, button.B-r:focus { outline: none;}
button.BL-btn-r:hover, button.BL-btn-r:focus,
button.A-btn-r:hover, button.A-btn-r:focus,
button.B-btn-r:hover, button.B-btn-r:focus,
button.G-btn-r:hover, button.G-btn-r:focus,
button.P-btn-r:hover, button.P-btn-r:focus {color: #fff; outline: none;}

button.B-sch-r {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--P-color); border-radius: 50px; background: var(--black-light); color: var(--white); cursor: pointer;}
button.B-sch-r span {display: block; width: 16px; height: 16px; background: url(../img/common/btn_ico_search_.png) no-repeat; margin: 0 0 0 10px; background-size: cover; }

button.B-arr-r {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--P-color); border-radius: 10px; background: var(--black-light); color: var(--white); cursor: pointer; }
button.B-arr-r span {display: block; width: 16px; height: 16px; background: url(../img/common/ico_down_arr.png) no-repeat; margin: 0 0 0 10px; background-size: cover;}

button.B-arr-r:focus,
button.B-sch-r:focus{ outline: none;}

[class*="B-btn-"],
[class*="B-add-"],
[class*="B-next-"],
[class*="B-back-"],
[class*="P-btn-"],
[class*="G-btn-"] {font-family: 'Noto Sans KR';}

a.P-r        {width: 100%; border: 1px solid var(--P-color); border-radius: 50px; background: var(--white);   color: var(--P-color); cursor: pointer;}
a.B-r        {width: 100%; border: 1px solid var(--black);   border-radius: 50px; background: var(--white);   color: var(--black);   cursor: pointer;}
a.A-btn-r    {width: 100%; border: 1px solid var(--Alert);   border-radius: 50px; background: var(--Alert);   color: var(--white);   cursor: pointer;}
a.B-btn-r    {width: 100%; border: 1px solid var(--black);   border-radius: 50px; background: var(--black);   color: var(--white);   cursor: pointer;}
a.G-btn-r    {width: 100%; border: 1px solid #b3b8b3;        border-radius: 50px; background: #b3b8b3;    color: var(--white);   cursor: pointer; }
a.G-btn-l    {width: 100%; border: 1px solid #b3b8b3;        border-radius: 50px; background: var(--white);    color: #b3b8b3;   cursor: pointer; }
a.G-btn-r.on {width: 100%; border: 1px solid var(--P-color); border-radius: 50px; background: var(--P-color); color: var(--white);   cursor: pointer; }
a.P-btn-r    {width: 100%; border: 1px solid var(--P-color-dark20); border-radius: 50px; background: var(--P-color-dark20); color: var(--white);   cursor: pointer; }
a.P-r:hover, a.P-r:focus,
a.B-r:hover, a.B-r:focus { outline: none;}
a.A-btn-r:hover, a.A-btn-r:focus,
a.B-btn-r:hover, a.B-btn-r:focus,
a.G-btn-r:hover, a.G-btn-r:focus,
a.B-add-r:hover, a.B-add-r:focus,
a.P-btn-r:hover, a.P-btn-r:focus {color: #fff;}

a.G-btn-l:hover, a.G-btn-l:focus { color: #b3b8b3; }

a.B-back-r {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--black-darker); border-radius: 50px; background: var(--white); color: var(--black-darker); cursor: pointer; }
a.B-back-r span {display: block; width: 24px; height: 24px; background: url(../img/common/btn_ico_back_arr.png) no-repeat; margin: 0 10px 0 0 ; background-size: cover;}

a.B-next-r {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--black-darker); border-radius: 50px; background: var(--white); color: var(--black-darker); cursor: pointer; }
a.B-next-r span {display: block; width: 24px; height: 24px; background: url(../img/common/btn_ico_back_arr.png) no-repeat;  margin: 0 0 0 10px; background-size: cover; transform: rotate(180deg);}

a.B-next-mr-r {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--black-darker); border-radius: 50px; background: var(--black); color: var(--white); cursor: pointer;}
a.B-next-mr-r span {display: block; width: 24px; height: 24px; background: url(../img/common/btn_ico_next_arr.png) no-repeat; margin: 0 0 0 10px; background-size: cover;}

a.B-back-r:hover, a.B-back-r:focus,
a.B-next-r:hover, a.B-next-r:focus { color: var(--black-darker);}

a.B-add-r {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--black); border-radius: 50px; background: var(--black); color: var(--white); cursor: pointer;  }
a.B-add-r span {display: block; width: 24px; height: 24px; background: url(../img/common/btn_ico_add.png) no-repeat; background-size: cover; }

a.P-next-r {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--P-color); border-radius: 50px; background: var(--P-color); color: var(--white); cursor: pointer;  }
a.P-next-r span {display: block; width: 32px; height: 32px; background: url(../img/common/btn_ico_next_arr.png) no-repeat; padding: 0 0 0 10px; background-size: cover;}

a.P-search-r {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--P-color); border-radius: 50px; background: var(--P-color); color: var(--white); cursor: pointer; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25) inset;}
a.P-search-r span {display: block; width: 32px; height: 32px; background: url(../img/common/btn_ico_search_.png) no-repeat; padding: 0 0 0 10px; background-size: cover; }

a.B-addr-r {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--P-color); border-radius: 50px; background: var(--black-light); color: var(--white); cursor: pointer; }
a.B-addr-r:hover,
a.B-addr-r:focus {color: #fff;}
a.B-addr-r span {display: block; width: 16px; height: 16px; background: url(../img/common/btn_ico_search_.png) no-repeat; background-size: cover; margin: 0 8px 0 0; }

button.B-addr-r {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--P-color); border-radius: 50px; background: var(--black-light); color: var(--white); cursor: pointer;}
button.B-addr-r:hover,
button.B-addr-r:focus {color: #fff; outline: none;}
button.B-addr-r span {display: block; width: 16px; height: 16px; background: url(../img/common/btn_ico_search_.png) no-repeat; background-size: cover; margin: 0 8px 0 0; }

a.B-sch-r      {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--P-color); border-radius: 50px; background: var(--black-light); color: var(--white); cursor: pointer;}
a.B-sch-r span {display: block; width: 16px; height: 16px; background: url(../img/common/btn_ico_search_.png) no-repeat; margin: 0 0 0 10px; background-size: cover; }

a.B-sch-r-32      {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--black-light); background: var(--black-light); color: var(--white); cursor: pointer; border-radius: 0 0 15px 15px;}
a.B-sch-r-32 span {display: block; width: 24px; height: 24px; background: url(../img/common/btn_ico_search_.png) no-repeat;  margin: 0 10px 0 0; background-size: cover; }

a.B-arr-r      {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--P-color); border-radius: 10px; background: var(--black-light); color: var(--white); cursor: pointer;  }
a.B-arr-r span {display: block; width: 16px; height: 16px; background: url(../img/common/ico_down_arr.png) no-repeat; margin: 0 0 0 10px; background-size: cover; }

a.P-sch-r      {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--P-color); border-radius: 50px; background: var(--white); color: var(--P-color); cursor: pointer; }
a.P-sch-r span {display: block; width: 24px; height: 24px; background: url(../img/common/ico_sch_p.png) no-repeat; margin: 0 10px 0 0 ; background-size: cover; }

a.P-sch-r02      {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--P-color); background: var(--P-color); color: var(--white); cursor: pointer; border-radius: 0 0 14px 14px;}
a.P-sch-r02 span {display: block; width: 24px; height: 24px; background: url(../img/common/btn_ico_search_.png) no-repeat; margin: 0 10px 0 0 ; background-size: cover; }

a.P-sch-r03      {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--P-color); background: var(--P-color); color: var(--white); cursor: pointer; border-radius: 50px; font-weight: 500}
a.P-sch-r03 span {display: block; width: 24px; height: 24px; background: url(../img/common/btn_ico_search_.png) no-repeat; margin: 0 8px 0 0 ; background-size: cover; }

a.B-sch-btn      {display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; border: 1px solid var(--P-color); border-radius: 50px; background: var(--black-light); color: var(--white); cursor: pointer; }
a.B-sch-btn span {display: block; width: 24px; height: 24px; background: url(../img/common/btn_ico_search_.png) no-repeat; background-size: cover; }

button.B-sch-btn      {display: flex; align-items: center; justify-content: center;  width: 100%; height: 42px; border: 1px solid var(--P-color); border-radius: 50px; background: var(--black-light); color: var(--white); cursor: pointer; }
button.B-sch-btn span {display: block; width: 24px; height: 24px; background: url(../img/common/btn_ico_search_.png) no-repeat; background-size: cover; }

.sch-cnt {position: relative; top: 8px;}

button.p-5 {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--P-color); border-radius: 5px; background: var(--P-color); color: var(--white); cursor: pointer;}
button.g-5 {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--gray);    border-radius: 5px; background: var(--gray);    color: var(--white); cursor: pointer;}

a.p-5 {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--P-color); border-radius: 5px; background: var(--P-color); color: var(--white); cursor: pointer; }
a.g-5 {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--gray);    border-radius: 5px; background: var(--gray);    color: var(--white); cursor: pointer; }

label.b-file-r {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--black);   border-radius: 50px; background: var(--black);   color: var(--white);   cursor: pointer; }
label.b-file-r input {display: none;}

label.p-file-r {display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid var(--P-color);   border-radius: 50px; background: var(--P-color);   color: var(--white);   cursor: pointer; }
label.p-file-r input {display: none;}

/* two-btn-box -> two-radio-box */
.two-radio-box {display: flex; width: 100%; }
.two-radio-box input {display: none;}
.two-radio-box label {display: flex; align-items: center; justify-content: center; width: 100%; height: 50px;}
.two-radio-box label span {display: flex; align-items: center; justify-content: center; width: 100%; cursor: pointer;}
.two-radio-box label.on span {cursor: default;}
.two-radio-box label:nth-child(1) {width: 50%; border-radius: 0; border: 1px solid var(--gray-lighter); background: var(--white); color: var(--black-darker); border-radius: 25px 0 0 25px;}
.two-radio-box label:nth-child(2) {width: 50%; border-radius: 0; border: 1px solid var(--gray-lighter); background: var(--white); color: var(--black-darker); border-radius:0 25px 25px 0;}
.two-radio-box label:nth-child(1).on {width: 50%; border-radius: 0; border: 1px solid var(--P-color); background: var(--P-color);color: var(--white); border-radius: 25px 0 0 25px; font-weight: 500; cursor: default;}
.two-radio-box label:nth-child(2).on {width: 50%; border-radius: 0; border: 1px solid var(--P-color); background: var(--P-color);color: var(--white); border-radius:0 25px 25px 0; font-weight: 500; cursor: default;}

.three-radio-box {display: flex; width: 100%; }
.three-radio-box label {width: 100%; height: 50px; display: flex; align-items: center; justify-content: center;}
.three-radio-box label input {display: none;}
.three-radio-box label span {display: flex; align-items: center; justify-content: center; width: 100%; cursor: pointer;}
.three-radio-box label:nth-child(1) {width: 100%; border-radius: 0; border: 1px solid var(--gray-lighter); background: var(--white); color: var(--black-darker);cursor: pointer; border-radius:25px 0 0 25px;}
.three-radio-box label:nth-child(2) {width: 100%; border-radius: 0; border: 1px solid var(--gray-lighter); background: var(--white); color: var(--black-darker);cursor: pointer; }
.three-radio-box label:nth-child(3) {width: 100%; border-radius: 0; border: 1px solid var(--gray-lighter); background: var(--white); color: var(--black-darker);cursor: pointer; border-radius:0 25px 25px 0;}
.three-radio-box label:nth-child(1).on {border-radius: 0; border: 1px solid var(--P-color); background: var(--P-color); color: var(--white);cursor: default;border-radius: 25px 0 0 25px; font-weight: bold;}
.three-radio-box label:nth-child(2).on {border-radius: 0; border: 1px solid var(--P-color); background: var(--P-color); color: var(--white);cursor: default;font-weight: bold;}
.three-radio-box label:nth-child(3).on {border-radius: 0; border: 1px solid var(--P-color); background: var(--P-color); color: var(--white);cursor: default; border-radius:0 25px 25px 0; font-weight: bold;}

.four-radio-box {display: flex; width: 100%;}
.four-radio-box label {width: 100%; height: 50px; display: flex; align-items: center; justify-content: center;}
.four-radio-box input {display: none;}
.four-radio-box label span {display: flex; align-items: center; justify-content: center; width: 100%; cursor: pointer;}
.four-radio-box label:nth-child(1) {width: 100%; border-radius: 0; border: 1px solid var(--gray-lighter); background: var(--white); color: var(--black-darker);cursor: pointer; border-radius:25px 0 0 25px;}
.four-radio-box label:nth-child(2) {width: 100%; border-radius: 0; border: 1px solid var(--gray-lighter); background: var(--white); color: var(--black-darker);cursor: pointer; }
.four-radio-box label:nth-child(3) {width: 100%; border-radius: 0; border: 1px solid var(--gray-lighter); background: var(--white); color: var(--black-darker);cursor: pointer; }
.four-radio-box label:nth-child(4) {width: 100%; border-radius: 0; border: 1px solid var(--gray-lighter); background: var(--white); color: var(--black-darker);cursor: pointer; border-radius:0 25px 25px 0;}
.four-radio-box label:nth-child(1).on {border-radius: 0; border: 1px solid var(--P-color); background: var(--P-color); color: var(--white);cursor: default;border-radius: 25px 0 0 25px; font-weight: bold;}
.four-radio-box label:nth-child(2).on {border-radius: 0; border: 1px solid var(--P-color); background: var(--P-color); color: var(--white);cursor: default;font-weight: bold;}
.four-radio-box label:nth-child(3).on {border-radius: 0; border: 1px solid var(--P-color); background: var(--P-color); color: var(--white);cursor: default;font-weight: bold;}
.four-radio-box label:nth-child(4).on {border-radius: 0; border: 1px solid var(--P-color); background: var(--P-color); color: var(--white);cursor: default; border-radius:0 25px 25px 0; font-weight: bold;}

.five-radio-box {display: flex; width: 100%; }
.five-radio-box label {width: 100%; height: 50px; display: flex; align-items: center; justify-content: center;}
.five-radio-box label input {display: none;}
.five-radio-box label span {display: flex; align-items: center; justify-content: center; width: 100%; cursor: pointer;}
.five-radio-box label:nth-child(1) {width: 100%; border-radius: 0; border: 1px solid var(--gray-lighter); background: var(--white); color: var(--black-darker);cursor: pointer; border-radius:25px 0 0 25px;}
.five-radio-box label:nth-child(2) {width: 100%; border-radius: 0; border: 1px solid var(--gray-lighter); background: var(--white); color: var(--black-darker);cursor: pointer; }
.five-radio-box label:nth-child(3) {width: 100%; border-radius: 0; border: 1px solid var(--gray-lighter); background: var(--white); color: var(--black-darker);cursor: pointer; }
.five-radio-box label:nth-child(4) {width: 100%; border-radius: 0; border: 1px solid var(--gray-lighter); background: var(--white); color: var(--black-darker);cursor: pointer; }
.five-radio-box label:nth-child(5) {width: 100%; border-radius: 0; border: 1px solid var(--gray-lighter); background: var(--white); color: var(--black-darker);cursor: pointer; border-radius:0 25px 25px 0;}
.five-radio-box label:nth-child(1).on {border-radius: 0; border: 1px solid var(--P-color); background: var(--P-color); color: var(--white);cursor: default;border-radius: 25px 0 0 25px; font-weight: bold;}
.five-radio-box label:nth-child(2).on {border-radius: 0; border: 1px solid var(--P-color); background: var(--P-color); color: var(--white);cursor: default; font-weight: bold;}
.five-radio-box label:nth-child(3).on {border-radius: 0; border: 1px solid var(--P-color); background: var(--P-color); color: var(--white);cursor: default; font-weight: bold;}
.five-radio-box label:nth-child(4).on {border-radius: 0; border: 1px solid var(--P-color); background: var(--P-color); color: var(--white);cursor: default; font-weight: bold;}
.five-radio-box label:nth-child(5).on {border-radius: 0; border: 1px solid var(--P-color); background: var(--P-color); color: var(--white);cursor: default; border-radius:0 25px 25px 0; font-weight: bold;}

.two-line-box {display: flex; width: 100%;}
.two-line-box a {display: flex; align-items: center; justify-content: center; width: 50%; border-bottom: 1px solid var(--gray-light); padding: 16px 10px; font-size: 20px; font-weight: 400; }
.two-line-box .line01.on { border-bottom: 2px solid var(--P-color); color: var(--P-color); font-weight: bold; cursor: default;}
.two-line-box .line02.on { border-bottom: 2px solid var(--P-color); color: var(--P-color); font-weight: bold; cursor: default;}

/* 그라데이션 */
.P-grad { width: 100%; background: linear-gradient(45deg, #9cddb2, #019945) !important;}

/* 그라데이션 박스 */
.miri-option-flex  {display: flex; align-items: center; justify-content: space-between; }

.label-option {width: 32%; margin: 0 7px 16px 7px;}
.label-option .miri-option-com {display: flex; align-items: center; cursor: pointer; width: 100%; height: 75px; border-radius: 10px; position: relative; padding: 16px 20px; box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.45) ; }
.label-option .miri-option-com input {display: none;}
.label-option .miri-option-com .miri-w {width: 63px; height: auto; margin: 3px 0 0 0;}
.label-option .miri-option-com .miri-t {padding: 3px 0 0 10px; color: var(--P-color-dark40); font-size: 28px; font-weight: bold;}
.label-option .miri-option-com .miri-t.on {color: var(--white)}
.label-option .miri-option-com .miri-q  {width: 16px; height: 16px; margin: 0 0 0 8px ;}
.label-option .miri-option-com .miri-ck {width: 32px; height: 32px; position: absolute; top: 21.5px; right: 24px; display: none;}
.label-option .miri-option-com .miri-ck.on {display: flex;}

.label-option .miri-list    {display: flex; align-items: center; width: 100%; height : 75px; border-radius: 10px; position: relative; padding: 16px 20px; box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30); cursor: pointer; background: #fff; border : 1px solid var(--white);}
.label-option .miri-list.on {background: linear-gradient(45deg, #9cddb2, #019945) !important;}

.label-option .miri-list input {display: none;}
.label-option .miri-list .miri-w {width: 63px; height: auto; margin: 3px 0 0 0;}
.label-option .miri-list .miri-t {padding: 3px 0 0 10px; color: var(--P-color-dark40); font-size: 28px; font-weight: bold;}
.label-option .miri-list .miri-t.on {color: var(--white)}
.label-option .miri-list .miri-q {width: 16px; height: 16px; margin: 0 0 0 8px ;}
.label-option .miri-list .miri-ck {display: none; position: absolute; top: 21.5px; right: 24px; width: 32px; height: 32px;}
.label-option .miri-list .miri-ck.on {display: flex;}

.label-option .miri-product { display: flex; align-items: center; position: relative;  width: 100%; height: 75px; border-radius: 10px; padding: 16px 20px; box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30); cursor: pointer; background: #fff; border: 1px solid var(--white);}
.label-option .miri-product.on {background: linear-gradient(45deg, #9cddb2, #019945) !important;}
.label-option .miri-product input {display: none;}
.label-option .miri-product .miri-w {width: 63px; height: auto; margin: 3px 0 0 0;}
.label-option .miri-product .miri-t {padding: 0 0 0 10px; color: #014f50; font-size: 28px; font-weight : 800;}
.label-option .miri-product .miri-t.on {color: var(--white)}
.label-option .miri-product .miri-ck {width: 32px; height: 32px; display: none; position: absolute; right: 24px;}
.label-option .miri-product .miri-ck.on {display: flex;}
.label-option .miri-product .miri-q {width: 16px; height: 16px; margin: 0 0 0 8px ;}

.miri-contracts-list {display: flex; align-items: center; justify-content: space-between; flex-flow: column; position: relative; width: 100%; max-width: 340px; height: 100%; max-height: 500px; border-radius: 16px; box-shadow: 0 2px 5px 1px  rgba(0, 0, 0, 0.45); background: var(--white); cursor: default;}
.miri-contracts-list .mr-tit {text-align: center; padding: 4px 0 0 0; color: #014f50; font-weight: 700; }
.miri-contracts-list label {display: flex; align-items: center; justify-content: space-between; flex-flow: column; width: 100%; height: 100%; cursor: pointer; }
.miri-contracts-list .miri-w {width: 80px; height: auto; margin: 0 10px 0 0;}
.miri-contracts-list .tit-b-c > span {font-size: 2rem; line-height: 160%; color: #014f50; font-weight: bolder; font-family: 'Archivo' !important; }
.miri-contracts-list p {color: var(--gray-darker); text-align: center;}
.miri-contracts-list ul {padding: 18px 20px 0;}
.miri-contracts-list ul li {display: flex; align-items: center; justify-content: start; padding: 0 0 6px 0;}
.miri-contracts-list ul li img  {width: 24px; height: 24px;  margin: 0 16px 0 0;}
.miri-contracts-list ul li span {padding: 0 0 5px 0;}
.miri-contracts-list a {padding: 8px 16px; width: 100%; }
.miri-contracts-list input {display: none;}

.miri-contracts-list.on { width: 100%; height: 110%; max-height: 500px; cursor: default; border: 0;}
.miri-contracts-list .mr-tit.on {color: var(--white); }
.miri-contracts-list label.on {cursor: default;}
.miri-contracts-list .tit-b-c > span.on { color: var(--white);}
.miri-contracts-list p.on  {color: var(--white);}
.miri-contracts-list ul li span.on {color: var(--white); font-weight: bold;}

.miri-contracts-list02 {display: flex; align-items: center; justify-content: space-between; flex-flow: column; position: relative; width: 400px; height: 456px; border-radius: 16px; padding: 24px; box-shadow: 0 2px 5px 1px  rgba(0, 0, 0, 0.45); background: var(--white)}
.miri-contracts-list02 .miri-w {width: 88px; height: auto; margin: 0 10px 0 0;}
.miri-contracts-list02 .tit-b-c > span {font-size: 2.25rem; line-height: 160%; color: var(--white); font-weight: bolder; font-family: 'Archivo' !important;}
.miri-contracts-list02 p {color: var(--white); text-align: center;}
.miri-contracts-list02 ul {padding: 24px 20px 0; }
.miri-contracts-list02 ul li {display: flex; align-items: center; justify-content: start; padding: 0 0 14px 0;}
.miri-contracts-list02 ul li img  {width: 24px; height: 24px;  margin: 0 16px 0 0;}
.miri-contracts-list02 ul li span {padding: 0 0 5px 0; color: var(--white); font-weight: bold;}
.miri-contracts-list02 a {padding: 8px 16px;}

.bd-dcd-box {width: 100%; border-radius: 10px; box-shadow: 0 2px 5px 1px  rgba(0, 0, 0, 0.45); cursor: pointer; background: var(--white); }
.bd-dcd-box.on {border: 5px solid transparent; border-radius: 20px; background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(45deg, #9cddb2, #019945); background-origin: border-box; background-clip: content-box, border-box; }
.bd-dcd-box.on label {background: #e5f5ec; border-radius: 18px; }
.bd-dcd-box label {display: flex; align-items: center; justify-content: center; flex-flow: column; width: 100%; cursor: pointer; padding: 28px 24px; }
.bd-dcd-box label img {width: 88px; height: 88px;}
.bd-dcd-box label p {padding: 12px 0 0 0;  text-align: center;}
.bd-dcd-box label input {width: 100%; display: none;}

.gate-img-box {width: 100%;  height: 210px; border-radius: 10px; box-shadow: 0 2px 5px 1px  rgba(0, 0, 0, 0.45); cursor: pointer;}
.gate-img-box.on {border: 1px solid var(--black-light);  border-radius: 10px;}
.gate-img-box label {width: 100%; height: 100%;  cursor: pointer; display: flex; align-items: end; justify-content: center; padding: 0 32px 20px; position: relative;}
.gate-img-box label.on {background: rgba(0,0,0, 0.3);}
.gate-img-box label .check_on {width: 57px; position: absolute; top: 16px; right: 20px; display: none;}
.gate-img-box label .check_on.on {display: flex;}
.gate-img-box label .bottom .tit-b-s {color: var(--white); margin: 0 0 -4px 0;}
.gate-img-box label .bottom .tit-b-s img {width: 80px; height: auto; margin: 0 7px 0 0;}
.gate-img-box label .bottom .tit-b-s > span {font-size: 32px; line-height: 160%; font-family: "archivo" !important; font-weight: 800;}
.gate-img-box label .bottom h3 {color: var(--white); font-size: 1rem; line-height: 160%; padding: 0 0 12px 0;}
.gate-img-box label .bottom a {font-size: 1rem; line-height: 160%;  padding: 10px 12px; width: 280px; }
.gate-img-box label .bottom input {display: none;}


/* 테이블 */
.miri-tot {padding: 20px 0 12px 0;}
.miri-tot span {font-weight: bold;}
.tableSetting {width: 100%; border-top: 2px solid var(--black-lighter); border-bottom: 2px solid var(--black-lighter); overflow: auto;}
.tableSetting table {width: 100%;}
.tableSetting table thead {width: 100%;}
.tableSetting table thead th {background: #f8f8f8; height: 40px; }
.tableSetting table tbody {width: 100%;}
.tableSetting table thead th {text-align: center;}
.tableSetting table tbody td {height: 40px; text-align: center; border-bottom: 1px solid #f8f8f8; background: var(--white)}
.tableSetting table tbody td.on { height: 40px; text-align: center; border-bottom: 1px solid #f8f8f8; background: rgba(1, 153, 69, 0.1);}
.tableSetting table tbody td label input[type=checkbox] {appearance: none; width: 24px; height: 24px; border: 1px solid #ccd0cc; border-radius: 5px;}
.tableSetting table tbody td label input[type=checkbox]:checked {background: var(--P-color); background-image: url(../img/common/btn_ico_checkbox_on.svg); background-repeat: no-repeat; background-position: center center;}
.tableSetting table thead th label input[type=checkbox] {appearance: none; width: 24px; height: 24px; border: 1px solid #CCD0CC; border-radius: 5px;}
.tableSetting table thead th label input[type=checkbox]:checked {background: var(--P-color); background-image: url(../img/common/btn_ico_checkbox_on.svg); background-repeat: no-repeat; background-position: center center;}

/* 써치폼 */
.miri-sch-form-a {width: 100%; height: auto; background: #f4f4f4; padding: 16px 20px; position: relative; display: flex; align-items: start; justify-content: space-between; flex-flow: column;}
.miri-sch-form-a .top span {display: inline-flex; align-items: center;}
.miri-sch-form-a .bottom {display: flex; align-items: center; justify-content: space-between; position: relative;}
.miri-sch-form-a .left-btn a {width: 100%; position: absolute; bottom: 18px; right: 28px;}
.miri-sch-form-a .left-btn button {width: 100%; position: absolute; bottom: 18px; right: 28px;}

/* 페이지네이션 */
.miri-pagination {display: flex; align-items: center; justify-content: center; width: 100%; padding: 10px 0;}
.miri-pagination a {display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 2px;}
.miri-pagination a.on { background: var(--P-color); color: #fff; border-radius: 50%;}
.miri-pagination a:nth-child(1),
.miri-pagination a:nth-child(2),
.miri-pagination a:nth-child(11),
.miri-pagination a:nth-child(12) {box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.25); border-radius: 50%; margin: 0 4px;}
.miri-pagination a:hover {background: var(--P-color); border-radius: 50%; color: #fff; }

/* 선택박스 */
.fbox {width: 100%;}
.fbox ul {display: flex; align-items: center; justify-content: space-between; width: 100%; }
.fbox ul li {display: flex; align-items: center; justify-content: space-between; width: 24%; background: var(--gray-white); padding: 24px 16px; border-radius: 5px;}
.fbox ul li .htts {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.fbox ul li .htts .tts {font-size: 16px; }
.fbox ul li .htts .tts:last-child {font-weight: bold;}

.sch-box {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 84px; padding: 20px; border-radius: 5px;}
.sch-box .sb-inner {display: flex; align-items: center; justify-content: start;}
.sch-box .sb-inner img {width: 28px; height: 28px; margin:0 20px 0 12px; }
.sch-box .sb-inner p {font-size: 18px; line-height: 160%; }
.sch-box a {padding: 12px 48px;}

.sch-box02 {width: 100%; height: 180px; border: 1px solid var(--gray-white); border-radius: 5px;}
.sch-box02 .sb-t {width: 100%; height: 50%; display: flex; align-items: center; justify-content: space-between; background: var(--gray-white); padding: 25px 32px;}
.sch-box02 .sb-t a {padding:12px 48px; }
.sch-box02 .sb-t .sb-t-inner {width: 100%;}
.sch-box02 .sb-t .sb-t-inner span {display: inline-block; }
.sch-box02 .sb-t .sb-t-inner img {width: 28px; height: 28px; margin:0 16px 0 12px; }
.sch-box02 .sb-b {width: 100%; height: 50%; padding: 25px 32px; }
.sch-box02 .sb-b span {font-size: 1.125rem;}
.sch-box02 .sb-b a {display: inline-block; align-items: center; justify-content: end; padding: 12px 24px;}

/*flex-box*/
.tit-b-s {display: flex; align-items: center; justify-content: start;}
.tit-b-c {display: flex; align-items: center; justify-content: center;}
.tit-b-e {display: flex; align-items: center; justify-content: end;}
.tit-b-sb{display: flex; align-items: center; justify-content: space-between;}
.ff-c {flex-flow: column}

/*모달 닫기*/
.modal-close-btn  {width: 100%; display: flex; align-items: center; justify-content: center;}
.modal-base-close {width: 32px !important;}
/* 동의박스 */
.g-box {width: 100%; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-radius:10px; border: 1px solid var(--gray-lighter); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25); cursor: pointer;}
.g-box input {display: none;}

.g-box-content {height: auto;  padding: 24px; border-radius: 5px; background: var(--gray-white); margin: 20px 0 0 0 ;}
.g-box-content .g-box-inner {height: 100%; max-height: 240px;  overflow-y: scroll; }
.g-box-content h2 {padding: 0 0 12px 0;}
.g-box-content p {text-align: justify; padding: 0 24px 0 0;}
.g-box-content .g-box-inner ul li {padding: 0 0 0 20px;  position: relative;}
.g-box-content .g-box-inner ul li::before {content: ''; background: #000; width: 3px; height: 3px; border-radius: 50%; position: absolute; top: 13px; left: 10px;}
.g-box-content .g-box-inner .p0 li {padding: 0;}
.g-box-content .g-box-inner .p0 li::before {content: ''; width: 0px; height: 0px;}

/*모달*/
.modal01 { width: 120px; height: 30px; border: 1px solid #555;}
.modal02 { width: 120px; height: 30px; border: 1px solid #555;}
.modal03 { width: 120px; height: 30px; border: 1px solid #555;}
.modal04 { width: 120px; height: 30px; border: 1px solid #555;}
.modal05 { width: 120px; height: 30px; border: 1px solid #555;}
.modal06 { width: 120px; height: 30px; border: 1px solid #555;}

/* 모달 */
#hp-modal-error {display: none; flex-direction: column; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; z-index: 1000000; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);}
#hp-modal-error.on {display: flex;}
#hp-modal-error .modal-window {width: 100%; max-width: 500px; min-width: 500px; height: auto; display: flex; box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.37); backdrop-filter: blur(1.5px); border-radius: 5px; background: #fff; position: relative; flex-flow: column; align-items: center; justify-content: center;}
#hp-modal-error .modal-window .modal-img-box {width: 120px; height: 120px; margin: 40px 0 0 0; }
#hp-modal-error .modal-window .modal-img-box img {width: 100%;}
#hp-modal-error .modal-window p {width: 100%; text-align: center; padding: 12px 0;}
#hp-modal-error .modal-window ul {width: 100%; padding: 27px 0 20px 48px;}
#hp-modal-error .modal-window ul li {width: 100%; text-align: left; padding: 0 0 20px 0;}
#hp-modal-error .modal-window ul li img {width: 24px; height: 24px; margin: 0 12px 0 0;}
#hp-modal-error .modal-window ul li span {color: var(--black-lighter); font-weight: bold;}
#hp-modal-error .modal-window a {width: 100%; border: 0; background: var(--Alert); color: var(--white); height: 60px; font-weight: bold; border-radius: 0 0 5px 5px; font-size: 18px; line-height: 160%; }

/*** alert 모달 ***/
.modal-ok {display: none; align-items: center; justify-content: center; flex-direction: column; z-index: 1000000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);}
.modal-ok.on {display: flex;}
.modal-ok .modal-inner {width: 100%; max-width: 600px; min-width: 600px; height: auto; display: flex; box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.37); backdrop-filter: blur(1.5px); border-radius: 5px; background: #fff; position: relative; flex-flow: column; align-items: center; justify-content: center;}
.modal-ok .modal-inner .modal-img-box {width: 60px; height: 60px; margin: 40px 0 0 0; }
.modal-ok .modal-inner .modal-img-box img{width: 100%;}
.modal-ok .modal-inner p  {width: 100%; text-align: center; padding: 12px 0 0 0; font-size: 24px; line-height: 160%; font-weight: 700; }
.modal-ok .modal-inner h5 {width: 100%; text-align: center; padding: 4px 0 48px 0; font-size: 16px; line-height: 160%;}
.modal-ok .modal-inner a  {width: 100%; border: 0; background: var(--P-color); color: var(--white); font-weight: bold; border-radius: 0 0 5px 5px; font-size: 18px; line-height: 160%;  padding: 16px;}

.modal-confirm01 {width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 1000000; background: rgba(0, 0, 0, 0.25); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);}
.modal-confirm01.on {display: flex;}
.modal-confirm01 .modal-inner {display: flex; align-items: center; justify-content: center; flex-flow: column; position: relative; width: 100%; max-width: 600px; min-width: 600px; height: auto; box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.37); backdrop-filter: blur(1.5px); border-radius: 5px; background: #fff;}
.modal-confirm01 .modal-inner .modal-img-box {width: 60px; height: 60px; margin: 40px 0 0 0; }
.modal-confirm01 .modal-inner .modal-img-box img{width: 100%;}
.modal-confirm01 .modal-inner p  {width: 100%; text-align: center; padding: 48px 0 0 0; font-size: 24px; line-height: 160%; font-weight: 700; }
.modal-confirm01 .modal-inner h5 {width: 100%; text-align: center; padding: 4px 0 48px 0; font-size: 16px; line-height: 160%;}
.modal-confirm01 .modal-inner .btn-box {display: flex; width: 100%;  border-radius: 0 0 5px 5px; overflow: hidden;}
.modal-confirm01 .modal-inner .btn-box a:nth-child(1) {width: 50%; border: 0; background: var(--gray-lighter); color: var(--black); font-weight: bold; font-size: 18px; line-height: 160%;  padding: 16px;}
.modal-confirm01 .modal-inner .btn-box a:nth-child(2) {width: 50%; border: 0; background: var(--P-color); color: var(--white); font-weight: bold; font-size: 18px; line-height: 160%;  padding: 16px;}

.modal-confirm02 {width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 1000000; background: rgba(0, 0, 0, 0.25); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);}
.modal-confirm02.on {display: flex;}
.modal-confirm02 .modal-inner { width: 100%; max-width: 600px; min-width: 600px; height: auto; display: flex; box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.37); backdrop-filter: blur(1.5px); border-radius: 5px; background: #fff; position: relative; flex-flow: column; align-items: center; justify-content: center;}
.modal-confirm02 .modal-inner .modal-img-box {width: 60px; height: 60px; margin: 40px 0 0 0; }
.modal-confirm02 .modal-inner .modal-img-box img{width: 100%;}
.modal-confirm02 .modal-inner p { width: 100%; text-align: center; padding: 12px 0 0 0; font-size: 24px; line-height: 160%; font-weight: 700; }
.modal-confirm02 .modal-inner h5 { width: 100%; text-align: center; padding: 4px 0 48px 0; font-size: 16px; line-height: 160%;}
.modal-confirm02 .modal-inner .btn-box {display: flex; width: 100%; border-radius: 0 0 5px 5px; overflow: hidden;}
.modal-confirm02 .modal-inner .btn-box a:nth-child(1) {width: 50%; border: 0; background: var(--gray-lighter); color: var(--black); font-weight: bold; font-size: 18px; line-height: 160%;  padding: 16px;}
.modal-confirm02 .modal-inner .btn-box a:nth-child(2) {width: 50%; border: 0; background: var(--P-color); color: var(--white); font-weight: bold; font-size: 18px; line-height: 160%;  padding: 16px;}

.modal-cancel01 {display: none; align-items: center; justify-content: center; flex-direction: column; z-index: 1000000; position: fixed; left: 0; top: 0; width: 100%; height: 100%;  background: rgba(0, 0, 0, 0.25); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);}
.modal-cancel01.on {display: flex;}
.modal-cancel01 .modal-inner {display: flex; align-items: center; justify-content: center; position: relative; flex-flow: column; width: 100%; max-width: 600px; min-width: 600px; height: auto; box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.37); backdrop-filter: blur(1.5px); border-radius: 5px; background: #fff; }
.modal-cancel01 .modal-inner .modal-img-box {width: 60px; height: 60px; margin: 40px 0 0 0; }
.modal-cancel01 .modal-inner .modal-img-box img {width: 100%;}
.modal-cancel01 .modal-inner p {width: 100%; text-align: center; padding: 48px 0 0 0; font-size: 24px; line-height: 160%; font-weight: 700; }
.modal-cancel01 .modal-inner h5 {width: 100%; text-align: center; padding: 4px 0 48px 0; font-size: 16px; line-height: 160%;}
.modal-cancel01 .modal-inner .btn-box {display: flex; width: 100%; border-radius: 0 0 5px 5px; overflow: hidden;}
.modal-cancel01 .modal-inner .btn-box a:nth-child(1) {width: 50%; border: 0; background: var(--gray-lighter); color: var(--black); font-weight: bold; font-size: 18px; line-height: 160%;  padding: 16px;}
.modal-cancel01 .modal-inner .btn-box a:nth-child(2) {width: 50%; border: 0; background: var(--Alert); color: var(--white); font-weight: bold; font-size: 18px; line-height: 160%;  padding: 16px;}

.modal-cancel02 {display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 1000000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);}
.modal-cancel02.on {display: flex;}
.modal-cancel02 .modal-inner {width: 100%; max-width: 600px; min-width: 600px; height: auto; display: flex; box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.37); backdrop-filter: blur(1.5px); border-radius: 5px; background: #fff; position: relative; flex-flow: column; align-items: center; justify-content: center;}
.modal-cancel02 .modal-inner .modal-img-box {width: 60px; height: 60px; margin: 40px 0 0 0; }
.modal-cancel02 .modal-inner .modal-img-box img{width: 100%;}
.modal-cancel02 .modal-inner p {width: 100%; text-align: center; padding: 12px 0 0 0; font-size: 24px; line-height: 160%; font-weight: 700; }
.modal-cancel02 .modal-inner h5 {width: 100%; text-align: center; padding: 4px 0 48px 0; font-size: 16px; line-height: 160%;}
.modal-cancel02 .modal-inner .btn-box {display: flex; width: 100%; border-radius: 0 0 5px 5px; overflow: hidden;}
.modal-cancel02 .modal-inner .btn-box a:nth-child(1) {width: 50%; border: 0; background: var(--gray-lighter); color: var(--black); font-weight: bold; font-size: 18px; line-height: 160%;  padding: 16px;}
.modal-cancel02 .modal-inner .btn-box a:nth-child(2) {width: 50%; border: 0; background: var(--Alert); color: var(--white); font-weight: bold; font-size: 18px; line-height: 160%;  padding: 16px;}

/*월금액 디자인*/
.mon-m {background: #e6f5ec;  padding: 12px 16px; font-size: 18px; line-height: 160%; margin: 0 0 16px 0; border-radius: 5px;}
.mon-m.on {background: #f4f4f4;}
.mon-m p {color: #07572b;}
.mon-m img {margin: 0 4px; cursor: pointer;}
.mon-m .check-cancel {display: none;}
.mon-m .check-cancel.on {display: flex;}
.mon-m span {padding: 0 20px; }
.mon-m input {border-bottom: 1px solid var(--gray); border: 0 !important; text-align: center; padding: 8px 0;}
.mon-m input[type='text']:disabled {background: #e6f5ec !important;  border: 0 !important; text-align: center; padding: 8px 0;}
.mon-m input:focus {outline: 0;}

/*월금액 하단*/
.mon-lr {width: 100%;}
.mon-lr .left {width: 49%; box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.45); border-radius: 5px;padding: 20px 28px;}
.mon-lr .left p {font-weight: bold;}
.mon-lr .left p span {font-weight: normal;}
.mon-lr .left >.tit-b-sb,
.mon-lr .left .persent {padding:8px 0 12px 0;}
.mon-lr .left .persent .input-box {position: relative; width: 100%;}
.mon-lr .left .persent .input-box input {width: 100%; font-size: 22px; padding: 0 30px; border: 0; border-bottom: 1px solid var(--gray); color: var(--P-color);font-weight: bold;}
.mon-lr .left .persent .input-box input:focus {outline: 0;}
.mon-lr .left .persent .input-box img {position: absolute; top: 8px; left: 5px; cursor: pointer;}
.mon-lr .left .persent .input-box span {position: absolute; top: 3px; right: 5px; }

.mon-lr .right {width: 49%; box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.45); border-radius: 5px;padding: 20px 28px;}
.mon-lr .right p {font-weight: bold;}
.mon-lr .right p span {font-weight: normal;}
.mon-lr .right >.tit-b-sb,
.mon-lr .right .persent {padding:8px 0 12px 0;}
.mon-lr .right .persent .input-box {position: relative; width: 100%;}
.mon-lr .right .persent .input-box input {width: 100%; font-size: 22px; padding: 0 30px; border: 0; border-bottom: 1px solid var(--gray); color: var(--P-color);font-weight: bold;}
.mon-lr .right .persent .input-box input:focus {outline: 0;}
.mon-lr .right .persent .input-box img  {position: absolute; top: 8px; left: 5px;}
.mon-lr .right .persent .input-box span {position: absolute; top: 3px; right: 5px; }

/*할인금액&할인율*/
.label-price {position: relative;}
.label-price .input-price {width: 320px; border: 0; outline: 0; border-bottom: 1px solid var(--gray-lighter); padding: 10px 45px 10px 12px; text-align: end;  line-height: 160%; }
.label-price .price-price {position: absolute; top: 8px; right: 10px;}

.bold {font-weight: bold !important;}
.bolder {font-weight: bolder !important;}

.tal{text-align:left !important;}
.tac{text-align:center !important;}
.tar{text-align:right !important;}
.taj{text-align:justify !important;}
.vt{vertical-align:top !important;}
.vm{vertical-align:middle !important;}
.vb{vertical-align:bottom !important;}

/* 닫기 버튼 */
button.close-modal {background: url(../img/common/popLayerClose_b.png) no-repeat center center/cover; width: 28px; height: 28px; cursor: pointer;}
button.close-modal:focus {outline: none;}

/*share-img 버튼*/
button.share-img {background: url(../img/common/ico_share_b.png) no-repeat 50% 50%; width: 32px; height: 32px; cursor: pointer;}
button.share-img:focus {outline: none;}

/*그리그 색깔*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {border: 1px solid var(--gray-light) !important; background: var(--P-color-light90) !important; color: var(--P-color-dark20) !important;}

/*첨부파일 등록 팝업 */
button.atc        {display: block; width: 100%; border: 1px solid var(--gray-light); border-radius: 10px;  }
button.atc.on     {background: var(--P-color); border: 1px solid var(--P-color); color: var(--white);}
button.atc:hover  {background: var(--P-color); border: 1px solid var(--P-color); color: var(--white); font-weight: bold;}
button.atc:focus  {outline: none; font-weight: bold;}

a.atc        {display: block; width: 100%; border: 1px solid var(--gray-light); border-radius: 10px;  }
a.atc.on     {background: var(--P-color); border: 1px solid var(--P-color); color: var(--white);}
a.atc:hover  {background: var(--P-color); border: 1px solid var(--P-color); color: var(--white); font-weight: bold;}
a.atc:focus  {outline: none; font-weight: bold;}


/*로그인페이지*/
.m-name  {display: block; width: 16px; height: 16px; background: url(../img/common/ico_name_b.png) no-repeat;}
.m-email {display: block; width: 16px; height: 16px; background: url(../img/common/ico_email_b.png) no-repeat;}

/*계약서 상세*/
.m-store {display: inline-block; width: 20px; height: 20px; background: url(../img/common/ico_store_g.png) no-repeat; background-size: cover;}
.miri-option-rowWrap {display: flex; align-items: center; justify-content : flex-start; width: 100%; flex-flow: row wrap;}

.spcl-iss-box { display: none;}
.spcl-iss-box.on { display: block;}

/*초록색 동그라미 버튼*/
.p-num {width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--P-color); display: flex; align-items: center; justify-content: center; font-weight: bold; padding: 1px 0 0 0;}

/*영업사원 대시보드*/
.slsMn {display: flex; align-items: center; justify-content: space-between; padding-top: 32px;}
.slsMn h2 {font-size: 1.25rem;  line-height: 160%; font-weight: bold; }
.slsMn .metBar meter {width: 200px; height: 20px;}
.slsMn .metBar label {font-size: 1rem; line-height: 160%; padding-left: 16px;}

.slsSub {color: var(--black-lighter); font-size: 1rem; margin: 4px 0 0 0;}

.slsCon {display: flex; align-items: center; justify-content: space-between; width: 100%; border-bottom: 1px solid var(--gray-lighter); padding: 16px 0 24px 0;  }
.slsCon .slsBox {display: flex; align-items: center; justify-content: space-between; width: 24%;}
.slsCon .slsBox .slsInr {border-radius: 10px; background: var(--gray-white); padding: 20px 24px; width: 100%; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); height: 100%; min-height: 200px; color: var(--black-darker) !important;}
.slsCon .slsBox .slsInr.prog {background : linear-gradient(to bottom, rgba(255, 188, 71, 0.25), rgba(255, 216, 138, 0.91)); opacity: 0.9;}
.slsCon .slsBox .slsInr.sus {background: linear-gradient(to top, rgba(115, 201, 141, 0.91), rgba(182, 237, 190, 0.91)); opacity: 0.9;}
.slsCon .slsBox .slsInr .slsTit {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray-darker); padding-bottom: 12px;}
.slsInr .slsTit .slsTit-L {display: flex; align-items: center; justify-content: start;}
.slsCon .slsBox .slsInr .slsTit .slsTit-L h2 {font-size: 1.125rem;  line-height: 160%; font-weight: bold; padding-right: 8px;}
.slsCon .slsBox .slsInr .slsTit .slsTit-R {display: flex; align-items: center; justify-content: start;}
.slsCon .slsBox .slsInr .slsTit .slsTit-R h2 {font-size: 1.125rem; line-height: 160%; font-weight: bold; padding-left: 8px; }

.slsCon .slsBox .slsInr ul {padding: 4px 0 0 0; width: 100%;}
.slsCon .slsBox .slsInr ul li {width: 100%; padding: 10px 0 0;}
.slsCon .slsBox .slsInr ul li a {display: flex; align-items: center; justify-content: space-between; width: 100%; }
.slsCon .slsBox .slsInr ul li a p {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; line-height: 160%;}
.slsCon .slsBox .slsInr ul li a em {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 160%;}

.met::-webkit-meter-bar {background: none; background-color: whiteSmoke; border: 0; box-shadow: 0 5px 5px -5px #ddd inset;}
.met::-webkit-meter-optimum-value {transition: width .5s; border-radius: 5px; border: 0; background-image: linear-gradient(#ffedbf 0%,#ffedbf 100%); background-size: 100% 100%;}
.met.on::-webkit-meter-optimum-value {background-image: linear-gradient(#99d6b5 0%,#99d6b5 100%); background-size: 100% 100%;}

/*** button and ***/
[class*="btn-box-"]       {display:flex !important; align-items: center; justify-content: space-between !important;}
[class*="btn-"]           {display:inline-flex; align-items: center; justify-content: center; border-radius: 50px; font-size: 1.125rem; line-height: 160%; font-weight: 500; padding: 12px 0; cursor: pointer; border: 0;}
[class*="btn-"].fr{float:right !important}
[class*="btn-"].fl{float:left !important}
[class*="btn-"].fn{float:none !important}
[class*="btn-"]:focus,
[class*="btn-"]:hover     {outline: none;}
[class*="btn-"] span      {display:inline-block; width: 24px; height: 24px; background-size: cover;}
[class*="btn-"]:disabled,
[class*="btn-"][disabled] {border: 1px solid var(--gray); color: var(--gray); background: var(--white); opacity: 0.5; pointer-events: none; cursor: default;}
[class*="btn-dis"]:disabled,
[class*="btn-dis"][disabled] {border: 1px solid var(--gray); color: var(--white); background: var(--gray); opacity: 0.5; pointer-events: none; cursor: default;}
[class*="sqr-btn-"]       {display:inline-flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 0.85rem; line-height: 160%; font-weight: 500; padding: 8px; cursor: pointer; border: 0; color: var(--white);}
[class*="sqr-btn-"]:hover {color: var(--white);}
[class*="input-f"]:read-only {background: var(--gray-white);}

.btn-sch      {background: var(--black-light);     color: var(--white); padding: 8px 24px; font-size: 1rem;}
.btn-sch span {background: url(../img/common/btn_ico_search_.png) no-repeat; background-size: cover; }
.btn-prv      {background: var(--white); border: 1px solid var(--black-darker) !important; width: 240px;}
.btn-prv span {background: url(../img/common/btn_ico_back_arr.png) no-repeat; background-size: cover; margin : 0 8px 0 0;}
.btn-nxt      {background: var(--white); border: 1px solid var(--black-darker) !important; width: 240px;}
.btn-nxt span {background: url(../img/common/btn_ico_back_arr.png) no-repeat; background-size: cover; margin: 0 0 0 8px;  transform: rotate(180deg);}
.btn-w        {background: var(--white);           color: var(--white);}
.btn-r        {background: var(--Alert);           color: var(--white);}
.btn-p        {background: var(--P-color-dark20);  color: var(--white);}
.btn-bler     {background: var(--black-lighter);   color: var(--white);}
.btn-bl       {background: var(--black-light);     color: var(--white);}
.btn-b        {background: var(--black);           color: var(--white);}
.btn-bd       {background: var(--black-dark);      color: var(--white);}
.btn-bder     {background: var(--black-darker);    color: var(--white);}
.btn-gler     {background: var(--gray-lighter);    color: var(--white);}
.btn-gl       {background: var(--gray-light);      color: var(--white);}
.btn-g        {background: var(--gray);            color: var(--white);}
.btn-gd       {background: var(--gray-dark);       color: var(--white);}
.btn-gder     {background: var(--gray-darker);     color: var(--white);}
.btn-save     {background: var(--P-color-dark20);  color: var(--white); width: 240px;}
.btn-gg       {background: var(--gray-lighter);    color: var(--black);}

.btn-dis-w        {background: var(--white);           color: var(--white);}
.btn-dis-r        {background: var(--Alert);           color: var(--white);}
.btn-dis-p        {background: var(--P-color-dark20);  color: var(--white);}
.btn-dis-bler     {background: var(--black-lighter);   color: var(--white);}
.btn-dis-bl       {background: var(--black-light);     color: var(--white);}
.btn-dis-b        {background: var(--black);           color: var(--white);}
.btn-dis-bd       {background: var(--black-dark);      color: var(--white);}
.btn-dis-bder     {background: var(--black-darker);    color: var(--white);}
.btn-dis-gler     {background: var(--gray-lighter);    color: var(--white);}
.btn-dis-gl       {background: var(--gray-light);      color: var(--white);}
.btn-dis-g        {background: var(--gray);            color: var(--white);}
.btn-dis-gd       {background: var(--gray-dark);       color: var(--white);}
.btn-dis-gder     {background: var(--gray-darker);     color: var(--white);}
.btn-dis-save     {background: var(--P-color-dark20);  color: var(--white); width: 240px;}
.btn-dis-save02   {background: var(--P-color-dark20);  color: var(--white); }

.sqr-btn-sch      {background: var(--black-light);     color: var(--white); padding: 8px 24px; font-size: 1rem;}
.sqr-btn-sch span {background: url(../img/common/btn_ico_search_.png) no-repeat; background-size: cover; margin: 0 8px 0 0 ;}
.sqr-btn-prv      {background: var(--white); border: 1px solid var(--black-darker); width: 240px;}
.sqr-btn-prv span {background: url(../img/common/btn_ico_back_arr.png) no-repeat; background-size: cover; margin : 0 8px 0 0;}
.sqr-btn-nxt      {background: var(--white); border: 1px solid var(--black-darker); width: 240px;}
.sqr-btn-nxt span {background: url(../img/common/btn_ico_back_arr.png) no-repeat; background-size: cover; margin: 0 0 0 8px;  transform: rotate(180deg);}
.sqr-btn-w        {background: var(--white);           color: var(--white);}
.sqr-btn-r        {background: var(--Alert);           color: var(--white);}
.sqr-btn-p        {background: var(--P-color-dark20);  color: var(--white);}
.sqr-btn-bler     {background: var(--black-lighter);   color: var(--white);}
.sqr-btn-bl       {background: var(--black-light);     color: var(--white);}
.sqr-btn-b        {background: var(--black);           color: var(--white);}
.sqr-btn-bd       {background: var(--black-dark);      color: var(--white);}
.sqr-btn-bder     {background: var(--black-darker);    color: var(--white);}
.sqr-btn-gler     {background: var(--gray-lighter);    color: var(--white);}
.sqr-btn-gl       {background: var(--gray-light);      color: var(--white);}
.sqr-btn-g        {background: var(--gray);            color: var(--white);}
.sqr-btn-gd       {background: var(--gray-dark);       color: var(--white);}
.sqr-btn-gder     {background: var(--gray-darker);     color: var(--white);}
.sqr-btn-save     {background: var(--P-color-dark20);  color: var(--white); width: 240px;}


/*모달1000*/
.popLayer.z {white-space:nowrap;text-align:center;font-size: 0px;padding: 0px 0px;}
.popLayer.z::after {content: '';width:0;height:100%;display:inline-block;vertical-align:middle;}
.popLayer.z .pbd {font-size:12px;display:inline-block;max-width: calc(100% - 30px);vertical-align: middle;text-align:left;white-space:normal;padding-top: 0;width: 1000px; border: 0; border-radius: 10px;}
.popLayer.z .phd {border-bottom-color: #c7c7c7;/* transform: translateY(110%);transition: transform 0.3s ease 0s; */}
.popLayer.z .phd>.in {position:relative !important;}
.popLayer.z .phd>.in-a {position:relative;}
.popLayer.z .pct {max-height: 500px; min-height: 200px;overflow-y: auto;overflow-x: hidden;}
.popLayer.z .pct .poptents{margin: 15px 20px 29px 20px;}

/*모달1200*/
.popLayer.y {white-space:nowrap;text-align:center;font-size: 0px;padding: 0px 0px;}
.popLayer.y::after {content: '';width:0;height:100%;display:inline-block;vertical-align:middle;}
.popLayer.y .pbd {font-size:12px;display:inline-block;max-width: calc(100% - 240px);vertical-align: middle;text-align:left;white-space:normal;padding-top: 0; min-width: 1120px; border: 0; border-radius: 10px;}
.popLayer.y .phd {border-bottom-color: #c7c7c7;/* transform: translateY(110%);transition: transform 0.3s ease 0s; */}
.popLayer.y .phd>.in { position:relative !important;}
.popLayer.y .phd>.in-a {position:relative;}
.popLayer.y .pct {height: auto; overflow-y: auto;overflow-x: hidden;}
.popLayer.y .pct .poptents {margin: 16px 28px 28px;}

@media all and (max-width: 1210px) {.popLayer.y .pbd { max-height: calc(100% - 80px); overflow: scroll;}}

/*검색창*/
.miri-sch-form-a {border-radius: 0 !important; border: 0 !important; background: var(--gray-white)!important;}
.miri-sch-form-a .dpf .item {font-size: 14px; }
.miri-sch-form-a .dpf .item span {font-size: 14px; height: auto; }
.miri-sch-form-a .dpf .item input {width: 100%; border: 0; border-bottom: 1px solid #ddd !important; padding:10px 16px 10px 8px !important; border-radius: 0 !important; font-size: 14px; height: auto;}
.miri-sch-form-a .dpf .item select {width: 100%; border: 0; border-bottom: 1px solid #ddd !important; padding:10px 16px 10px 8px !important; border-radius: 0 !important; font-size: 14px; height: auto;}
.miri-sch-form-a .dpf .item select:focus {outline: var(--P-color);}
.miri-sch-form-a .dpf .item .dt {width: 100px;}
.miri-sch-form-a .btn-list a {color: var(--white); padding: 5px 0 !important; font-weight: bold;}

/*미리 토탈 넘버*/
.miri-sch-opts .tots .t {font-size: 16px !important; font-weight: bold; }
.miri-sch-opts .tots .nn {font-size: 16px !important; font-weight: bold;  color: var(--P-color);}

/*페이지 네이션*/
.tui-pagination .tui-first ,
.tui-pagination .tui-prev  ,
.tui-pagination .tui-next  ,
.tui-pagination .tui-last {box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5); border-radius: 50% !important; margin: 0 4px; width: 32px; height: 32px; padding: 0 !important;}

.tui-pagination .tui-first .tui-ico-first,
.tui-pagination .tui-prev .tui-ico-prev ,
.tui-pagination .tui-next .tui-ico-next ,
.tui-pagination .tui-last .tui-ico-last {margin: 0;}

.tui-pagination .tui-last-child {display: inline-block !important;}
.tui-pagination .tui-is-selected {background: var(--P-color);}
.tui-pagination .tui-page-btn {font-size: 0.875rem; border: 0 !important; border-radius: 50% !important; width: 32px; height: 32px; padding: 10px 0 0 0;}
.tui-pagination .tui-page-btn:hover {color: var(--white); background: var(--P-color); }
.tui-pagination .tui-page-btn:focus {color: var(--white); background: var(--P-color); }

/*검색 양식 miri-sch-form-c*/
.miri-sch-form-c {}
.miri-sch-form-c ul li span input{ padding: 12px 16px !important; height: auto !important; font-size: 16px !important;}
.miri-sch-form-c .bts a { border-radius: 0 5px 5px 0; width: 80px; height: 51.5px; color: var(--white);}

.selectbox {background: url(../img/common/select_ico_list_off.png)no-repeat 95% 50%/12px auto; background-color: var(--white);}
.selectbox select {width: 100%; border: 0; border-bottom: 1px solid #ddd; padding: 10px 16px 10px 4px ; -webkit-appearance:none; -moz-appearance:none; box-sizing: border-box; appearance:none; background: transparent;}
.selectbox select::-ms-expand {display:none;}
.selectbox select:focus {outline: none; border: 1px solid rgba(1, 153, 69, 0.4); border-radius: 5px; padding: 10px 0 10px 4px; color: #001300;}

/*라디오 박스*/
.two-radio-box input[type="radio"]:disabled + span   {opacity: 0.5; pointer-events: none; cursor: default; }
.three-radio-box input[type="radio"]:disabled + span {opacity: 0.5; pointer-events: none; cursor: default; }
.four-radio-box input[type="radio"]:disabled + span  {opacity: 0.5; pointer-events: none; cursor: default; }
.five-radio-box input[type="radio"]:disabled + span  {opacity: 0.5; pointer-events: none; cursor: default; }
.five-radio-box input[type="radio"]:disabled + span  {opacity: 0.5; pointer-events: none; cursor: default; }

/*테이블 타입*/
.tbl-type-y{width:100%;}
.tbl-type-y th,
.tbl-type-y td{padding: 13px 13px;}
.tbl-type-y.small th,
.tbl-type-y.small td{padding: 6px 13px;}
.tbl-type-y th{border: #e3e7ea solid 1px;border-width: 0px 0px 1px 0px;background-color: var(--gray-white);position:relative;text-align:left;/* padding-left: 20px; */vertical-align: middle;color: #53637b;font-weight: bold;font-size: 14px;line-height: 1.3;}
.tbl-type-y th::after{content:"";position:absolute;bottom: 0px;left: 10px;right: 10px;height: 0px;}
.tbl-type-y th::before{content:"";position:absolute;top: 0px;left:24px;right:24px;height: 0px;}
.tbl-type-y td{border: #e3e7ea solid 1px;position:relative;border-width: 0px 1px 1px 1px;font-size: 14px;}
.tbl-type-y td::after{content:"";position:absolute;bottom: 0px;left: 18px;right: 18px;height: 0px;}
.tbl-type-y tr:first-child td{border-top: #e3e7ea solid 1px;}
.tbl-type-y tr td:first-child{border-left: #e3e7ea solid 1px;}
.tbl-type-y tr:first-child th::before{display:none;}
.tbl-type-y tr:last-child th::after{display:none;}
.tbl-type-y tr:last-child td::after{display:none;}
.tbl-type-y tr:last-child  td{border-bottom: #e9ebee solid 1px;}
.tbl-type-y tr  td[colspan]:only-child{border-left-width: 1px;}
.tbl-type-y tr:first-child  th{ border-top-width: 1px; }
.tbl-type-y tr  th:first-child{border-left-width: 1px;}
.tbl-type-y .item{font-size: 13px;display:inline-block;vertical-align:middle;margin: 4px 20px 4px 0px;color: #555555;min-height: 20px;}
.tbl-type-y.wlight thead tr th {padding:0px;}
.tbl-type-y.wlight tbody tr td {padding:0px;}

.ff-nosan {font-family: "Noto Sans KR" !important;}
.ff-arch  {font-family: "Archivo" !important; margin: 3px 0 0 0;}
.wC160 {width: calc( 100% - 160px);}
.outlineC {outline-color: var(--P-color) !important;}
.tranRot180 {transform: rotate(180deg);}

.img_cntr {background: url(../img/common/img_cntr_.png); width: 24px; height: 24px;}

/************************************************  inner 너비 통일 ************************************************************/
.contain .mr-main .mr-contain .top-contain{width: 100%; padding: 24px 0 16px; background: var(--P-color-light90); }
.contain .mr-main .mr-contain .inner {margin: 40px auto 60px; width: 100%; max-width: 1100px; min-width: 850px; width: 90%;}

/************************************************  프로젝트 호기 선택 그리드 ************************************************************/

.contain .mr-main .mr-contain .inner .tableSetting { width: 100%; }
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid{ border: 0; width: 100% !important; }
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view { width: 100% !important; }
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-top{ border: 0; width: 100% !important; }
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-top .ui-jqgrid-hbox table { width: 100% !important; }
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-top .ui-jqgrid-hbox table thead{}
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-top .ui-jqgrid-hbox table thead tr { height: 40px;}
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-top .ui-jqgrid-hbox table thead tr th{ border: 0; font-size: 0.938rem; font-weight: 500;}
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-top .ui-jqgrid-hbox table thead tr th input { appearance: none; width: 24px; height: 24px; border: 1px solid #ccd0cc; border-radius: 5px; cursor: pointer; }
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-top .ui-jqgrid-hbox table thead tr th input:checked { background: var(--P-color); background-image: url(../img/common/btn_ico_checkbox_on.svg); background-repeat: no-repeat; background-position: center center;}

.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom { width: 100% !important; }
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table { width: 100% !important; }
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody{}
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody tr{ background: none; height: 40px;}
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody tr td{ background: none; border: 0; border-bottom: 1px solid #ddd; font-size: 0.938rem; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px;}
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody tr td:nth-child(1) { background: none;}
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody tr td:nth-child(1).on  { background: rgba(1, 153, 69, 0.1); }
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody tr td.on { background:rgba(1, 153, 69, 0.1);}
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody tr td input { appearance: none; width: 24px; height: 24px; border: 1px solid #CCD0CC; border-radius: 5px; cursor: pointer; }
.contain .mr-main .mr-contain .inner .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody tr td input:checked { background: var(--P-color); background-image: url(../img/common/btn_ico_checkbox_on.svg); background-repeat: no-repeat; background-position: center center;}

/************************************************  견적작성, 고객구분 그리드 ************************************************************/

.contain .mr-main .mr-contain .inner .section2 .page-1 h2 {padding: 0 0 0 8px;}
.contain .mr-main .mr-contain .inner .section2 .page-2 {display: none;}
.contain .mr-main .mr-contain .inner .section2 .page-2 h2 {padding: 16px 0 12px 8px;}
.contain .mr-main .mr-contain .inner .section2 .page-2 .tit-b-sb { width:100%; display: flex; flex-flow: row wrap; height : 220px;}
.contain .mr-main .mr-contain .inner .section2 .page-2 .tit-b-sb .bd-dcd-box { width:30%; margin: 10px;}

.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting { width: 100%; overflow-y: hidden; }
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid{ border: 0;  width: 100% !important;}
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view { width: 100% !important;}
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-top{ border: 0; width: 100% !important; }
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-top .ui-jqgrid-hbox table { width: 100% !important;}
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-top .ui-jqgrid-hbox table tr { height: 40px;}
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-top .ui-jqgrid-hbox table tr th{ border: 0; font-size: 16px; font-weight: 500;}

.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom { height: 235px !important; width: 100% !important;}
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table { width: 100% !important;}
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody{}
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody tr{ background: none; height: 40px;}
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody tr td{ background: none; border: 0; border-bottom: 1px solid #ddd; font-size: 16px; text-overflow: ellipsis; white-space: nowrap;}
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody tr td:nth-child(1) { background: none;}
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody tr td:nth-child(1).on  { background: rgba(1, 153, 69, 0.1); }
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody tr td.on { background:rgba(1, 153, 69, 0.1);}
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody tr td input { appearance: none; width: 24px; height: 24px; border: 1px solid #ccd0cc; border-radius: 5px; cursor: pointer; }
.contain .mr-main .mr-contain .inner .section2 .page-1 .tableSetting .ui-jqgrid .ui-jqgrid-view .ui-corner-bottom table tbody tr td input:checked { background: var(--P-color); background-image: url(../img/common/btn_ico_checkbox_on.svg); background-repeat: no-repeat; background-position: center center;}

[class*="-rd-bx"] {display:flex; width: 100%}
[class*="-rd-bx"] input    {display:none;}
[class*="-rd-bx"] input:checked + label  {background: var(--P-color); font-weight: bold; color: var(--white); cursor: default;}
[class*="-rd-bx"] label    {display:flex; align-items: center; justify-content: center; width: 50%; background: var(--white); color: var(--black-darker); border: 1px solid var(--gray-lighter); cursor: pointer;}
[class*="-rd-bx"] label.on {display:flex; align-items: center; justify-content: center; width: 50%; border: 1px solid var(--P-color); background: var(--P-color);color: var(--white); cursor: default; font-weight: 600;}
[class*="-rd-bx"] input:disabled + label { background: var(--gray-white); border: 1px solid var(--gray-lighter); cursor: default; pointer-events: none; }

.one-rd-bx label { border-radius: 25px; width: 100%;}

.tw-rd-bx label:nth-child(2) {border-radius:25px 0 0 25px;}
.tw-rd-bx label:nth-child(4) {border-radius:0 25px 25px 0;}

/*** two-radio-box ***/
.thr-rd-bx label:nth-child(2) {border-radius:25px 0 0 25px;}
.thr-rd-bx label:nth-child(6) {border-radius:0 25px 25px 0;}

.fr-rd-bx label:nth-child(2) {border-radius:25px 0 0 25px;}
.fr-rd-bx label:nth-child(8) {border-radius:0 25px 25px 0;}

.fv-rd-bx label:nth-child(2) {border-radius:25px 0 0 25px;}
.fv-rd-bx label:nth-child(10){border-radius:0 25px 25px 0;}

.disabled-color { background: var(--gray-white) !important; pointer-events: none; cursor: default;}