@charset "utf-8";
/*-------------------------------------------------------------------
	분류그룹 : 초기화
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/

@import url(fonts/font.css);
 
/* Reset */
html,body{margin:0;padding:0;width:100%;height:100%;}
html {font-size: 62.5%;}
body{font-family: 'Noto Sans KR','Spoqa Han Sans Neo',Arial,sans-serif;letter-spacing: -0.3px;;color:#333; font-size: var(--fz-body-base);overflow:auto;background: #f4f6fd; display:flex; flex-direction:column; word-break: break-word;}
p,td,ul,ol,li,dl,dt,dd,form,fieldset,legend{margin:0;padding:0;}
fieldset,legend{border:none;}
button {margin:0;padding:2px 5px;border: none; background: none; cursor: pointer; vertical-align:middle;box-sizing: border-box;}
input,select,textarea {margin:0;padding:2px 5px;min-height:12px;vertical-align:middle;border: 1px solid #c0c5cb;box-sizing: border-box;}
input:focus{outline: none;}
input[type=search]{outline-offset:-2px;-webkit-appearance:none}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
ul,ol{list-style:none;}
a{color:#333;text-decoration:none;}
img{border:0;vertical-align:top;}
em{font-style:normal;}
h3{margin:0 0 20px 0;font-size:19px;color:#000;}
table {
	border-collapse:collapse;
	border-spacing:0;
	table-layout:fixed;
	width:100%;
}
legend,caption, .blind {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: polygon(0 0,0 0,0 0)
}

/*align*/
.al {text-align: left !important;}
.ac {text-align: center !important;}
.ar {text-align: right !important;}
.nowrap {white-space: nowrap !important;}

/***************************************
  ※ 너비정의
***************************************/
/* 퍼센트 */
.w5 {width: 5% !important;}
.w10 {width: 10% !important;}
.w15 {width: 15% !important;}
.w20 {width: 20% !important;}
.w25 {width: 25% !important;}
.w30 {width: 30% !important;}
.w35 {width: 35% !important;}
.w40 {width: 40% !important;}
.w45 {width: 45% !important;}
.w50 {width: 50% !important;}
.w55 {width: 55% !important;}
.w60 {width: 60% !important;}
.w65 {width: 65% !important;}
.w70 {width: 70% !important;}
.w75 {width: 75% !important;}
.w80 {width: 80% !important;}
.w85 {width: 85% !important;}
.w90 {width: 90% !important;}
.w95 {width: 95% !important;}
.w100 {width: 100% !important;}

/*너비(픽셀)*/
.w1p{width:1px !important}
.w2p{width:2px !important}
.w3p{width:3px !important}
.w4p{width:4px !important}
.w5p{width:5px !important}
.w6p{width:6px !important}
.w7p{width:7px !important}
.w8p{width:8px !important}
.w9p{width:9px !important}
.w10p{width:10px !important}
.w15p{width:15px !important}
.w20p{width:20px !important}
.w25p{width:25px !important}
.w30p{width:30px !important}
.w35p{width:35px !important}
.w40p{width:40px !important}
.w45p{width:45px !important}
.w50p{width:50px !important}
.w55p{width:55px !important}
.w60p{width:60px !important}
.w65p{width:65px !important}
.w70p{width:70px !important}
.w75p{width:75px !important}
.w80p{width:80px !important}
.w85p{width:85px !important}
.w90p{width:90px !important}
.w95p{width:95px !important}
.w100p{width:100px !important}
.w110p{width:110px !important}
.w120p{width:120px !important}
.w130p{width:130px !important}
.w140p{width:140px !important}
.w150p{width:150px !important}
.w160p{width:160px !important}
.w170p{width:170px !important}
.w180p{width:180px !important}
.w190p{width:190px !important}
.w200p{width:200px !important}
.w210p{width:210px !important}
.w220p{width:220px !important}
.w230p{width:230px !important}
.w240p{width:240px !important}
.w250p{width:250px !important}
.w260p{width:260px !important}
.w270p{width:270px !important}
.w280p{width:280px !important}
.w290p{width:290px !important}
.w300p{width:300px !important}
.w310p{width:310px !important}
.w320p{width:320px !important}
.w330p{width:330px !important}
.w340p{width:340px !important}
.w350p{width:350px !important}
.w400p{width:400px !important}
.w450p{width:450px !important}
.w500p{width:500px !important}
.w550p{width:550px !important}
.w600p{width:600px !important}
.w700p{width:700px !important}
.w750p{width:750px !important}
.w800p{width:800px !important}
.w850p{width:850px !important}
.w900p{width:900px !important}
.w950p{width:950px !important}
.w1000p{width:1000px !important}

/***************************************
  ※ 높이정의
***************************************/
.h1   { height: 1%   !important; }
.h2   { height: 2%   !important; }
.h3   { height: 3%   !important; }
.h4   { height: 4%   !important; }
.h5   { height: 5%   !important; }
.h6   { height: 6%   !important; }
.h7   { height: 7%   !important; }
.h8   { height: 8%   !important; }
.h9   { height: 9%   !important; }
.h10  { height: 10%  !important; }
.h11  { height: 11%  !important; }
.h12  { height: 12%  !important; }
.h13  { height: 13%  !important; }
.h14  { height: 14%  !important; }
.h15  { height: 15%  !important; }
.h16  { height: 16%  !important; }
.h17  { height: 17%  !important; }
.h18  { height: 18%  !important; }
.h19  { height: 19%  !important; }
.h20  { height: 20%  !important; }
.h21  { height: 21%  !important; }
.h22  { height: 22%  !important; }
.h23  { height: 23%  !important; }
.h24  { height: 24%  !important; }
.h25  { height: 25%  !important; }
.h26  { height: 26%  !important; }
.h27  { height: 27%  !important; }
.h28  { height: 28%  !important; }
.h29  { height: 29%  !important; }
.h30  { height: 30%  !important; }
.h31  { height: 31%  !important; }
.h32  { height: 32%  !important; }
.h33  { height: 33%  !important; }
.h34  { height: 34%  !important; }
.h35  { height: 35%  !important; }
.h36  { height: 36%  !important; }
.h37  { height: 37%  !important; }
.h38  { height: 38%  !important; }
.h39  { height: 39%  !important; }
.h40  { height: 40%  !important; }
.h41  { height: 41%  !important; }
.h42  { height: 42%  !important; }
.h43  { height: 43%  !important; }
.h44  { height: 44%  !important; }
.h45  { height: 45%  !important; }
.h46  { height: 46%  !important; }
.h47  { height: 47%  !important; }
.h48  { height: 48%  !important; }
.h49  { height: 49%  !important; }
.h50  { height: 50%  !important; }
.h51  { height: 51%  !important; }
.h52  { height: 52%  !important; }
.h53  { height: 53%  !important; }
.h54  { height: 54%  !important; }
.h55  { height: 55%  !important; }
.h56  { height: 56%  !important; }
.h57  { height: 57%  !important; }
.h58  { height: 58%  !important; }
.h59  { height: 59%  !important; }
.h60  { height: 60%  !important; }
.h61  { height: 61%  !important; }
.h62  { height: 62%  !important; }
.h63  { height: 63%  !important; }
.h64  { height: 64%  !important; }
.h65  { height: 65%  !important; }
.h66  { height: 66%  !important; }
.h67  { height: 67%  !important; }
.h68  { height: 68%  !important; }
.h69  { height: 69%  !important; }
.h70  { height: 70%  !important; }
.h71  { height: 71%  !important; }
.h72  { height: 72%  !important; }
.h73  { height: 73%  !important; }
.h74  { height: 74%  !important; }
.h75  { height: 75%  !important; }
.h76  { height: 76%  !important; }
.h77  { height: 77%  !important; }
.h78  { height: 78%  !important; }
.h79  { height: 79%  !important; }
.h80  { height: 80%  !important; }
.h81  { height: 81%  !important; }
.h82  { height: 82%  !important; }
.h83  { height: 83%  !important; }
.h84  { height: 84%  !important; }
.h85  { height: 85%  !important; }
.h86  { height: 86%  !important; }
.h87  { height: 87%  !important; }
.h88  { height: 88%  !important; }
.h89  { height: 89%  !important; }
.h90  { height: 90%  !important; }
.h91  { height: 91%  !important; }
.h92  { height: 92%  !important; }
.h93  { height: 93%  !important; }
.h94  { height: 94%  !important; }
.h95  { height: 95%  !important; }
.h96  { height: 96%  !important; }
.h97  { height: 97%  !important; }
.h98  { height: 98%  !important; }
.h99  { height: 99%  !important; }
.h100 { height: 100% !important; }

/*높이(픽셀)-그리드 높이지정*/
.h100p { min-height: 100px !important; }
.h110p { min-height: 110px !important; }
.h120p { min-height: 120px !important; }
.h130p { min-height: 130px !important; }
.h140p { min-height: 140px !important; }
.h150p { min-height: 150px !important; }
.h160p { min-height: 160px !important; }
.h170p { min-height: 170px !important; }
.h180p { min-height: 180px !important; }
.h190p { min-height: 190px !important; }
.h200p { min-height: 200px !important; }
.h210p { min-height: 210px !important; }
.h220p { min-height: 220px !important; }
.h230p { min-height: 230px !important; }
.h240p { min-height: 240px !important; }
.h250p { min-height: 250px !important; }
.h260p { min-height: 260px !important; }
.h270p { min-height: 270px !important; }
.h280p { min-height: 280px !important; }
.h290p { min-height: 290px !important; }
.h300p { min-height: 300px !important; }
.h320p { min-height: 320px !important; }
.h340p { min-height: 340px !important; }
.h360p { min-height: 360px !important; }
.h380p { min-height: 380px !important; }
.h400p { min-height: 400px !important; }
.h420p { min-height: 420px !important; }
.h440p { min-height: 440px !important; }
.h460p { min-height: 460px !important; } 
.h480p { min-height: 480px !important; }
.h500p { min-height: 500px !important; }


/*layout*/
.col-item-1 {
	flex: 1 1 100%;
}
.col-item-2 {
	flex: 1 1 calc(50% - 1rem);
}
.col-item-3 {
	flex: 1 1 calc(33.33% - 1rem);
}
.col-item-4 {
	flex: 1 1 calc(25% - 1rem);
}
.col-item-5 {
	flex: 1 1 calc(16.66% - 1rem); 
}

/* flex */
.d-flex {display:flex;}
.flex-wrap {flex-wrap:wrap;}
.align-items-center {align-items: center !important;}
.align-items-baseline {align-items: baseline !important;}
.justify-content-center {justify-content: center !important;}
.justify-content-between {justify-content: space-between !important;}
.justify-content-end {justify-content: flex-end !important;}
.flex-direction-column {flex-direction: column !important;}
.flex-fill {flex: 1 1 auto;}
.flex-grow-2 {flex-grow:2 !important;}
.flex-grow-1 {flex-grow:1 !important;}
.flex-grow-0 {flex-grow:0 !important;}

/* gap */
.gap-0 { gap: 0;}
.gap-1 { gap: 0.25rem;}
.gap-2 { gap: 0.5rem;}
.gap-3 { gap: 1rem;}
.gap-4 { gap: 1.5rem;}
.gap-5 { gap: 2rem;}
.gap-6 { gap: 3rem;}
.gap-7 { gap: 4rem;}
.gap-8 { gap: 5rem;}

/* Padding */
.p-0 { padding: 0rem!important; /* 0px */ }
.p-1 { padding: .25rem!important; /* 2.5px */ }
.p-2 { padding: .5rem!important; /* 5px */ }
.p-3 { padding: 1rem!important; /* 10px */ }
.p-4 { padding: 1.5rem!important; /* 15px */ }
.p-5 { padding: 2rem!important; /* 20px */ }
.p-6 { padding: 2.5rem!important; /* 25px */ }
.p-7 { padding: 3rem!important; /* 30px */ }
.p-8 { padding: 3.5rem!important; /* 35px */ }
.p-9 { padding: 4rem!important; /* 40px */ }
.p-10 { padding: 5rem!important; /* 50px */ }

.pt-0 { padding-top: 0rem!important; /* 0px */ }
.pt-1 { padding-top: .25rem!important; /* 2.5px */ }
.pt-2 { padding-top: .5rem!important; /* 5px */ }
.pt-3 { padding-top: 1rem!important; /* 10px */ }
.pt-4 { padding-top: 1.5rem!important; /* 15px */ }
.pt-5 { padding-top: 2rem!important; /* 20px */ }
.pt-6 { padding-top: 2.5rem!important; /* 25px */ }
.pt-7 { padding-top: 3rem!important; /* 30px */ }
.pt-8 { padding-top: 3.5rem!important; /* 35px */ }
.pt-9 { padding-top: 4rem!important; /* 40px */ }
.pt-10 { padding-top: 5rem!important; /* 50px */ }

.pr-0 { padding-right: 0rem!important; /* 0px */ }
.pr-1 { padding-right: .25rem!important; /* 2.5px */ }
.pr-2 { padding-right: .5rem!important; /* 5px */ }
.pr-3 { padding-right: 1rem!important; /* 10px */ }
.pr-4 { padding-right: 1.5rem!important; /* 15px */ }
.pr-5 { padding-right: 2rem!important; /* 20px */ }
.pr-6 { padding-right: 2.5rem!important; /* 25px */ }
.pr-7 { padding-right: 3rem!important; /* 30px */ }
.pr-8 { padding-right: 3.5rem!important; /* 35px */ }
.pr-9 { padding-right: 4rem!important; /* 40px */ }
.pr-10 { padding-right: 5rem!important; /* 50px */ }

.pb-0 { padding-bottom: 0rem!important; /* 0px */ }
.pb-1 { padding-bottom: .25rem!important; /* 2.5px */ }
.pb-2 { padding-bottom: .5rem!important; /* 5px */ }
.pb-3 { padding-bottom: 1rem!important; /* 10px */ }
.pb-4 { padding-bottom: 1.5rem!important; /* 15px */ }
.pb-5 { padding-bottom: 2rem!important; /* 20px */ }
.pb-6 { padding-bottom: 2.5rem!important; /* 25px */ }
.pb-7 { padding-bottom: 3rem!important; /* 30px */ }
.pb-8 { padding-bottom: 3.5rem!important; /* 35px */ }
.pb-9 { padding-bottom: 4rem!important; /* 40px */ }
.pb-10 { padding-bottom: 5rem!important; /* 50px */ }

.pl-0 { padding-left: 0rem!important; /* 0px */ }
.pl-1 { padding-left: .25rem!important; /* 2.5px */ }
.pl-2 { padding-left: .5rem!important; /* 5px */ }
.pl-3 { padding-left: 1rem!important; /* 10px */ }
.pl-4 { padding-left: 1.5rem!important; /* 15px */ }
.pl-5 { padding-left: 2rem!important; /* 20px */ }
.pl-6 { padding-left: 2.5rem!important; /* 25px */ }
.pl-7 { padding-left: 3rem!important; /* 30px */ }
.pl-8 { padding-left: 3.5rem!important; /* 35px */ }
.pl-9 { padding-left: 4rem!important; /* 40px */ }
.pl-10 { padding-left: 5rem!important; /* 50px */ }

/* Margin */
.m-0 { margin: 0rem!important; /* 0px */ }
.m-1 { margin: .25rem!important; /* 2.5px */ }
.m-2 { margin: .5rem!important; /* 5px */ }
.m-3 { margin: 1rem!important; /* 10px */ }
.m-4 { margin: 1.5rem!important; /* 15px */ }
.m-5 { margin: 2rem!important; /* 20px */ }
.m-6 { margin: 2.5rem!important; /* 25px */ }
.m-7 { margin: 3rem!important; /* 30px */ }
.m-8 { margin: 3.5rem!important; /* 35px */ }
.m-9 { margin: 4rem!important; /* 40px */ }
.m-10 { margin: 5rem!important; /* 50px */ }

.mt-0 { margin-top: 0rem!important; /* 0px */ }
.mt-1 { margin-top: .25rem!important; /* 2.5px */ }
.mt-2 { margin-top: .5rem!important; /* 5px */ }
.mt-3 { margin-top: 1rem!important; /* 10px */ }
.mt-4 { margin-top: 1.5rem!important; /* 15px */ }
.mt-5 { margin-top: 2rem!important; /* 20px */ }
.mt-6 { margin-top: 2.5rem!important; /* 25px */ }
.mt-7 { margin-top: 3rem!important; /* 30px */ }
.mt-8 { margin-top: 3.5rem!important; /* 35px */ }
.mt-9 { margin-top: 4rem!important; /* 40px */ }
.mt-10 { margin-top: 5rem!important; /* 50px */ }

.mr-0 { margin-right: 0rem!important; /* 0px */ }
.mr-1 { margin-right: .25rem!important; /* 2.5px */ }
.mr-2 { margin-right: .5rem!important; /* 5px */ }
.mr-3 { margin-right: 1rem!important; /* 10px */ }
.mr-4 { margin-right: 1.5rem!important; /* 15px */ }
.mr-5 { margin-right: 2rem!important; /* 20px */ }
.mr-6 { margin-right: 2.5rem!important; /* 25px */ }
.mr-7 { margin-right: 3rem!important; /* 30px */ }
.mr-8 { margin-right: 3.5rem!important; /* 35px */ }
.mr-9 { margin-right: 4rem!important; /* 40px */ }
.mr-10 { margin-right: 5rem!important; /* 50px */ }

.mb-0 { margin-bottom: 0rem!important; /* 0px */ }
.mb-1 { margin-bottom: .25rem!important; /* 2.5px */ }
.mb-2 { margin-bottom: .5rem!important; /* 5px */ }
.mb-3 { margin-bottom: 1rem!important; /* 10px */ }
.mb-4 { margin-bottom: 1.5rem!important; /* 15px */ }
.mb-5 { margin-bottom: 2rem!important; /* 20px */ }
.mb-6 { margin-bottom: 2.5rem!important; /* 25px */ }
.mb-7 { margin-bottom: 3rem!important; /* 30px */ }
.mb-8 { margin-bottom: 3.5rem!important; /* 35px */ }
.mb-9 { margin-bottom: 4rem!important; /* 40px */ }
.mb-10 { margin-bottom: 5rem!important; /* 50px */ }

.ml-0 { margin-left: 0rem!important; /* 0px */ }
.ml-1 { margin-left: .25rem!important; /* 2.5px */ }
.ml-2 { margin-left: .5rem!important; /* 5px */ }
.ml-3 { margin-left: 1rem!important; /* 10px */ }
.ml-4 { margin-left: 1.5rem!important; /* 15px */ }
.ml-5 { margin-left: 2rem!important; /* 20px */ }
.ml-6 { margin-left: 2.5rem!important; /* 25px */ }
.ml-7 { margin-left: 3rem!important; /* 30px */ }
.ml-8 { margin-left: 3.5rem!important; /* 35px */ }
.ml-9 { margin-left: 4rem!important; /* 40px */ }
.ml-10 { margin-left: 5rem!important; /* 50px */ }

/*font-weight*/
.tx-bold {font-weight: 700;}
.tx-medium { font-weight: 500;}
.tx-normal { font-weight: 400;}

/*font-size*/
.fs-base {font-size:var(--fz-body-base);} 
.fs-xs{font-size:var(--fz-body-xs);} 
.fs-sm{font-size:var(--fz-body-sm);} 
.fs-lg {font-size:var(--fz-body-lg);} 

/*font-vertical*/
.vertical-lr {writing-mode: vertical-lr;} /* 세로로 왼쪽 -> 오른쪽 */
.vertical-rl { writing-mode: vertical-rl;} /* 세로로 오른쪽 -> 왼쪽 */

/*color*/
.darkblue {color: var(--darkblue-color);}
.blue {color: var(--blue-color);}
.lightblue {color: var(--lightblue-color);}
.darkgray {color: var(--darkgray-color);}
.red {color: var(--red-color);}
.mint {color: var(--mint-color);}
.line {color: var(--line-color);}
.blk {color: #000; font-weight: 600;}
.org-txt {color: var(--red-color);}
.green{color: var(--color-s2)}

.text-info {color: var(--color-s1)}
.text-success {color: var(--color-s2);}
.text-warning {color: var(--color-s3);}
.text-danger {color: var(--color-s4);}

.background-white {background-color: #fff;}

/* custom */
:root {
  --transition: .5s;
  --darkblue-color: #102842;
  --blue-color: #006af5;
  --lightblue-color: #00aeef;
  --darkgray-color: #58595b;
  --red-color:#ff3d3b;
  --mint-color: #00a0a5;
  --line-color: #e3e3e3;
  --transition-custom: all 0.4s ease-in-out;
  --readonly-color: #fcf9e6;

  --color-m1: #2d251a;
  --color-m2: #61553e;
  --color-m3: #ff870f;
  --color-m4: #ffa200;
  --color-m5: #f5f5f7;
  --color-m6: #221a0f;

  --color-s1: #006af5;
  --color-s2: #2ca87f;
  --color-s3: #e58a00;
  --color-s4: #dc2626;
  --color-s5: #424242;
  --color-s6: #74788d;
  --mint-color: #00a0a5;
  --mintblue-color: #089bb4;
  --darkgray-color: #4A506B;

  --gray-0: #ffffff;
  --gray-5: #f9fafb;
  --gray-10: #f3f4f6;
  --gray-20: #e5e7eb;
  --gray-30: #d1d5db;
  --gray-40: #9ca3af;
  --gray-50: #6b7280;
  --gray-60: #4b5563;
  --gray-70: #374151;
  --gray-80: #1f2937;
  --gray-90: #111827;
  --gray-100: #000000;

  --fz-display-lg: 6.6rem;
  --fz-heading-sm: 3.2rem;
  --fz-heading-md: 4rem;
  --fz-heading-lg: 5rem;
  --fz-title-xsm: 1.5rem;
  --fz-title-sm: 1.7rem;
  --fz-title-md: 1.9rem;
  --fz-title-lg: 2.1rem;
  --fz-title-xlg: 2.5rem;
  --fz-title-xxlg: 3.2rem;
  --fz-body-base: 1.5rem;
  --fz-body-xs: 1.2rem;
  --fz-body-sm: 1.35rem;
  --fz-body-lg: 1.7rem;

  --vz-gutter-x: 1rem;
  --vz-gutter-y: 0;
}

/*-------------------------------------------------------------------
	Theme-color
-------------------------------------------------------------------*/
.theme-teal {
  --primary-opacity: rgb(20 184 166 / 20%);  /* 투명도 포함 */ ;
  --board-color: rgb(20 184 166 / 30%);  /* 투명도 포함 */ ;
  --logo-color: #14b8a6;
  --text-primary: #2ccdbd;
  --btn-color: #26a69a;
  --primary-color: #14b8a6;
  --primary-color-text:#ffffff;
  --primary-50:#f3fbfb;
  --primary-100:#c7eeea;
  --primary-200:#9ae0d9;
  --primary-300:#6dd3c8;
  --primary-400:#41c5b7;
  --primary-500:#14b8a6;
  --primary-600:#26a59a;
  --primary-700:#07817e;
  --primary-800:#0b655b;
  --primary-900:#084a42;
}
.theme-orange {
  --primary-opacity: rgb(228 146 7 / 20%);  /* 투명도 포함 */ ;
  --board-color: rgb(228 146 7 / 30%);  /* 투명도 포함 */ ;
  --logo-color: #e49207;
  --text-primary: #f59e0b;
  --btn-color: #f09802;
  --primary-color:#f59e0b;
  --primary-color-text:#ffffff;
  --primary-50:#fffaf3;
  --primary-100:#fde8c4;
  --primary-200:#fbd596;
  --primary-300:#f9c368;
  --primary-400:#f7b039;
  --primary-500:#f59e0b;
  --primary-600:#ed9702;
  --primary-700:#e18500;
  --primary-800:#5b492b;
  --primary-900:#362406;
}
.theme-indigo {
  --primary-opacity: rgb(99 102 241 / 20%);  /* 투명도 포함 */ ;
  --board-color: rgb(99 102 241 / 30%);  /* 투명도 포함 */ ;
  --logo-color: #6366f1;
  --text-primary: #818dfd;
  --btn-color: #6366f1;
  --primary-color:#6366f1;
  --primary-color-text:#ffffff;
  --primary-50:#f7f7fe;
  --primary-100:#dadafc;
  --primary-200:#bcbdf9;
  --primary-300:#9ea0f6;
  --primary-400:#8183f4;
  --primary-500:#6366f1;
  --primary-600:#5457cd;
  --primary-700:#3d41b7;
  --primary-800:#363885;
  --primary-900:#282960;
}

/*-------------------------------------------------------------------
	정렬
-------------------------------------------------------------------*/
/*기본*/
.col-xl-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 8.33333333%
}
.col-xl-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 16.66666667%
}
.col-xl-3 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 25%
}
.col-xl-4 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 33.33333333%
}
.col-xl-5 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 41.66666667%
}
.col-xl-6 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 50%
}
.col-xl-7 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 58.33333333%
}
.col-xl-8 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 66.66666667%
}
.col-xl-9 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 75%
}
.col-xl-10 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 83.33333333%
}
.col-xl-11 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 91.66666667%
}
.col-xl-12 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 100%
}

/*ibsheet table*/
.IBMain {font-family: 'Noto Sans KR';}
.IBHeaderText {	font-family: 'Noto Sans KR';	color: #fff;}
.IBColorHoveredCellHeader {	background-color: rgb(80, 98, 124);}
.IBCellHeader {border-color: rgba(219,218,223,1);background-color: rgb(115 127 144);color:#fff;}
.IBCell, .IBCellIndex {	font-family:'Noto Sans KR';	color: rgba(73,86,102,1);}
.IBColorHoveredCell {	background-color: rgba(210,229,248,1);}
.IBHoverRowBackground {	background-color: hsla(210, 25%, 75%, 0.1);}
.IBFocusRowBackground {	background-color: rgba(72,160,255,0.1);}
.IBColorDefault {	background-color: rgba(255,255,255,1);}
.IBColorSelected {	background-color: rgba(237,246,255,1);}
.IBFormulaRow .IBCellBase {	color: rgba(39,39,39,1);	background-color: rgba(234,237,246,1);}
.IBColorReadOnly {background-color: rgba(255,252,235,1);}
/*.IBColorChanged {background-color: rgba(255,255,255,1);}*/ /*수정된 셀 배경색*/
.IBColorChangedCell {	background-color: rgba(255,255,255,1);}
.IBheader-Focus,.IBseq-Focus{background-color: rgb(91 110 137) !important;}
.IBHeadLeft, .IBHeadMid, .IBHeadRight{border-top: 1px solid #596077;}
.IBFootLeft, .IBFootMid, .IBFootRight{border-top: 1px solid #dbdbdd;}
.IBColorReadOnly {background-color: rgb(244, 244, 244);}
.IBHeadLeft {border-left: 1px solid rgb(115 127 144);  }
.IBHeadMid {border-right: 1px solid rgb(115 127 144);}


/*ibtab - custom*/
.ib-context-menu.ib-classic_blue,.ib-tab-contents.ib-classic_blue,.ib-tab-tabs.ib-classic_blue {
  font-family: 'Noto Sans KR';
  font-size: initial;
  padding:0;
  margin:0;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item {
  width: 100%;
  padding-left: 48px;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link span.ib-tab-tabs-item__title {
  font-size: 14px;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link {
  position: relative;
  background-color: #eff2f7;
  margin-right: 28px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  will-change: background-color, color, transform;
  border: 1px solid transparent;
  padding: 0px 15px 0px 4px;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: -0.8px;
  color: #565656;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link.is-active {
  background-color: var(--primary-700);
  color: #fff;
  border-color: transparent;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link i,.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link span {
  padding: 4px 2px 4px 2px;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link.is-active,
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link.is-active:after,
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link.is-active:before {
	background-color: var(--primary-700);
	color: #fff;
  z-index: 2;
}
.ib-tab-contents.ib-classic_blue {
  border: 1px solid transparent;
  top:0;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link::after,
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link::before {
	display: block;
	content: " ";
	position: absolute;
	top: -1px;
	bottom: -1px;
	width: 20px;
	background-color: #eff2f7;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	will-change: background-color, transform;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link::before {
	border-radius: 0 8px 0 0;
	right: -14px;
	-webkit-transform: skew(25deg,0deg);
	transform: skew(25deg,0deg);
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link::after {
	border-radius: 8px 0 0 0;
	left: -14px;
	-webkit-transform: skew(-25deg,0deg);
	transform: skew(-25deg,0deg);
	box-shadow: -2px -2px 2px rgb(119 119 119 / 3%);
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link:hover {
  color: #565656;
  border: 1px solid transparent;
  background-color: #eff2f7;
  z-index: 1
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link.is-active:hover {
  background-color: var(--primary-700);
	color: #fff;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link i:before {
  display:none;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link i {
	position: absolute;
	right: -5px;
	top: 4px;
	z-index: 2;
	padding: 0;
	width: 17px;
	height: 17px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
	transition: background-color 0.2s ease, background-image 0.2s ease;
	border-radius: 50px;
	background-color: rgb(195 195 195 / 40%);
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link i:hover {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2300a0a5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>');
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-item__link.is-active i{
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>');
}
.ib-tab-tabs .ib-tab-tabs-dropdown{
  position:relative;
  display:inline-block;
  margin-left:2px;
  margin-right:5px;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-dropdown .ib-tab-tabs-dropdown-wrapBtn .ib-tab-tabs-arrow {
    opacity: 1;
    margin-left: 2px;
    margin-bottom: 1px;
    padding: 0 1.5px 0 1.5px;
    color: #a39b9b; /*이동하지 못할때의 색상*/
    background-color: #fff;
    border: solid 0;
    pointer-events: none;
    cursor: default;
    text-align: center;
    font-size: 12px;
    -webkit-transition: opacity .4s ease-in-out,color .4s,border-color .4s,background-color .4s,border-radius .2s;
    -moz-transition: opacity .4s ease-in-out,color .4s,border-color .4s,background-color .4s,border-radius .2s;
    -o-transition: opacity .4s ease-in-out,color .4s,border-color .4s,background-color .4s,border-radius .2s;
    transition: opacity .4s ease-in-out,color .4s,border-color .4s,background-color .4s,border-radius .2s;
    z-index: 2;
    background: #f0f0f0;
    border: 1px solid #b3b5bb;
    cursor: pointer;
    margin-left: -1px !important;
    padding: 3px 5px;
    width:27px;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-dropdown .ib-tab-tabs-dropdown-wrapBtn .ib-tab-tabs-arrow.right {
  border-radius: 0;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-dropdown .ib-tab-tabs-dropdown-wrapBtn .ib-tab-tabs-dropbtn {
  background: #f0f0f0;
  border: 1px solid #b3b5bb;
  cursor: pointer;
  margin-left: -1px !important;
  padding: 3px 5px;
  width:27px;
  height:26px;
  margin-right: 1px;
  margin-bottom: 1px;
  color: #151515;
  background-color: #fff;
  text-align: center;
  -webkit-transition: opacity .3s ease-in-out,color .3s,border-color .3s,background-color .3s,border-radius .3s;
  -moz-transition: opacity .3s ease-in-out,color .3s,border-color .3s,background-color .3s,border-radius .3s;
  -o-transition: opacity .3s ease-in-out,color .3s,border-color .3s,background-color .3s,border-radius .3s;
  transition: opacity .3s ease-in-out,color .3s,border-color .3s,background-color .3s,border-radius .3s;
  border-radius: 0 5px 5px 0;
  font-size: 12px;
  cursor: pointer
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-dropdown .ib-tab-tabs-dropdown-wrapBtn .ib-tab-tabs-arrow.is-active:hover {
  background: var(--primary-color);
  color: #fff;
  transition: background-color 0.2s ease, background-image 0.2s ease;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-dropdown .ib-tab-tabs-dropdown-wrapBtn .ib-tab-tabs-dropbtn:hover,
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-dropdown .ib-tab-tabs-dropdown-wrapBtn .ib-tab-tabs-dropbtn.is-active {
  background: var(--primary-color);
  color: #fff;
  transition: background-color 0.2s ease, background-image 0.2s ease;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-cus {
  padding: 0;
  width: 0;
}
.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-item .ib-tab-tabs-shadow {
  visibility: visible;
    z-index: 5;
    opacity: 0;
}

.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-dropdown .ib-tab-tabs-dropdown-contents .ib-tab-tabs-item__link {
  padding: 2px 6px 2px 6px;
}

.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-dropdown .ib-tab-tabs-dropdown-contents .ib-tab-tabs-item__link:hover {
  color: #fff;
  background-color: var(--primary-600);
}

.ib-tab-tabs.ib-classic_blue .ib-tab-tabs-dropdown .ib-tab-tabs-dropdown-contents .ib-tab-tabs-item__link.is-active {
  color: #fff;
  background-color: var(--primary-600);
}


/*board ibsheet*/
/* .board-wrap .IBDataRow .IBCellBase {
	border-right: 1px solid transparent;
} */
/* .board-wrap .IBCellHeader {
  border-right: 1px solid transparent;
} */
/* .board-wrap .IBHeadLeft,.IBBodyLeft,.IBFootLeft {
  border-left: 1px solid transparent;
} */
/* .board-wrap .IBHeadMid,.IBBodyMid,.IBFootMid {
  border-left: 0;
  border-right: 1px solid transparent;
} */
/* .board-wrap .IBHeadRight,.IBBodyRight,.IBFootRight {
  border-right: 1px solid transparent;
} */

/*ibsheet table - popup*/
.IBSPCellHeader {background-color: rgb(234 237 240);}
.IBSPHeaderText {color: #0c2637;font-weight: 500;}
.IBSPHeadLeft,.IBSPHeadMid,.IBSPHeadRight {
    border-top: 1px solid #407297;
}
.IBSPColorHoveredCellHeader {
	background-color: rgb(217, 220, 224);
}
.IBSPHeadLeft .IBSPCellBase,.IBSPHeadMid .IBSPCellBase,.IBSPHeadRight .IBSPCellBase {
    border-bottom-color: #b4bdc4;
}

/* Bran Status */
.btn_grade-green {background: url(/common/images/board_icon/grade-green.png) no-repeat; background-size: 16px; vertical-align: top; background-position: left center; padding-left: 16px;height: 25px;}
.btn_grade-green > span {padding-left:4px;}
.btn_grade-green:hover span {text-decoration: underline;}
.btn_grade-green.prm { background:url(/common/images/ico_caution_filled.svg) 0 0 no-repeat;}
.btn_grade-green.active + .box_help-data {visibility:visible;opacity:1; display: block;}

.btn_grade-red {background: url(/common/images/board_icon/grade-red.png) no-repeat; background-size: 16px; vertical-align: top; background-position: left center; padding-left: 16px;height: 25px;}
.btn_grade-red > span {padding-left:4px;}
.btn_grade-red:hover span {text-decoration: underline;}
.btn_grade-red.prm { background:url(/common/images/ico_caution_filled.svg) 0 0 no-repeat;}
.btn_grade-red.active + .box_help-data {visibility:visible;opacity:1; display: block;}

.btn_grade-yellow {background: url(/common/images/board_icon/grade-yellow.png) no-repeat; background-size: 16px; vertical-align: top; background-position: left center; padding-left: 16px;height: 25px;}
.btn_grade-yellow > span {padding-left:4px;}
.btn_grade-yellow:hover span {text-decoration: underline;}
.btn_grade-yellow.prm { background:url(/common/images/ico_caution_filled.svg) 0 0 no-repeat;}
.btn_grade-yellow.active + .box_help-data {visibility:visible;opacity:1; display: block;}

/* Tooltip */
.search-inner .box_tooltip {display: flex; padding: 0px 10px 0 0px; justify-content: flex-end; margin-bottom: -3px;position: relative;}
.box_tooltip {position: relative;display:inline-block;}
.btn_help {background: url(/common/images/ico_caution_filled.svg) no-repeat; background-size: 16px; vertical-align: top; background-position: left center; padding-left: 16px;height: 25px;}
.btn_help > span {padding-left:4px;}
.box_tooltip.type2 .btn_help {background: url(/common/images/ico_caution_filled_type2.svg) no-repeat; background-size: 16px; vertical-align: top; background-position: left center; padding-left: 16px;height: 25px;}
.btn_help:hover span {text-decoration: underline;}
.btn_help.prm { background:url(/common/images/ico_caution_filled.svg) 0 0 no-repeat;}
.box_help-data {display:none;position:absolute; top: 27px;left:0;padding:6px 18px 6px 18px; min-width: 160px; min-height: auto;background-color: var(--gray-0);border: 1px solid var(--color-s1);border-radius:12px;box-shadow:0 8px 16px rgba(0, 0, 0, 0.04);z-index:9;visibility:hidden;opacity:0;text-align:left !important}
.box_tooltip.type2 .box_help-data {border: 1px solid var(--color-m3);}
.btn_help.active + .box_help-data {visibility:visible;opacity:1; display: block;}
.box_tooltip .box_help-data.active {visibility:visible;opacity:1; display: block;}
.box_tooltip .ico16_delete {position:absolute;right:12px;top:10px;background:url(/common/images/ico_close.svg) no-repeat;width:16px;height:16px;}
.box_help-data .box_table_wrap {margin-top:5px;}
.box_tooltip.right .box_help-data {left:auto;right:0}
.box_tooltip.top.box_help-data {left:auto;bottom:auto;top:0px}
.box_help-data .txt_list {font-size:14px;line-height:1.4;word-break: keep-all;}
.box_tooltip.top .box_help-data {top:auto;bottom:28px;}

/* Tooltip - box_table */
.box_table {table-layout:fixed;font-size:1.3rem;}
.box_table th {font-weight:500;background:#f8f8f8!important;border-bottom:1px solid #ddd;text-align: center;}
.box_table thead th {padding:5px 8px;height:52px;text-align:center;border-top:1px solid #ddd;}
.box_table tbody th, .box_table tbody td {padding:10px 8px 10px;line-height:1.6rem;word-break:break-word;border-bottom:1px solid #ddd;}
.box_table tbody tr:first-child td,
.box_table tbody tr:first-child th {border-top: 1px solid #ddd;}
.box_table tbody ul.bu {padding-left: 7px;position:relative;}
.box_table tbody ul.bu > li::before{display: block;position: absolute;content: '';left:0;top: 7px;width: 3px;height: 3px;background-color: #437dea;}

/*강조 아이콘*/
.skip{overflow:hidden;position:absolute;width:1px;height:1px;background:0 0;font-size:0!important;color:transparent!important;line-height:0}
.warning{position:relative;margin:2px 0;padding-left: 20px;font-size:1.35rem;line-height: 17px;color:#e34335;letter-spacing: -0.2px;}
.warning.type2{color:#2156a5;}
.warning.type3{color:#1a1a1a;}
.warning:before{content: '';display:block;position:absolute;top: 0px;left:0;width:16px;height:16px;background-image:url(/common/images/warnig_sprite.png);background-position:left top;}
.warning.type2:before{background-position:-26px top;}
.warning.type3:before{background-position:-52px top;}
.warning.type4:before{background-position:left bottom;}


/* 지점코드3자 명5자 */
.wBranCd{width:120px !important}
.wBranNm{width:150px !important}

/* 영업소코드8자 명10자 */
.wSalesCd{width:120px !important}
.wSalesNm{width:150px !important}

/* 사원코드8자 명4자 */
.wEmpCd{width:120px !important}
.wEmpNm{width:150px !important}

/* 거래처코드8자 명10자 */
.wCustCd{width:120px !important}
.wCustNm{width:150px !important}

/* 업체코드8자 명10자 */
.wCorpCd{width:120px !important}
.wCorpNm{width:150px !important}

/* 부서코드5자 명7자 */
.wDeptCd{width:120px !important}
.wDeptNm{width:150px !important}

/* 센터코드3자 명4자 */
.wTrmlCd{width:120px !important}
.wTrmlNm{width:150px !important}

/* 차량코드6자 명8자 */
.wCarCd{width:120px !important}
.wCarNm{width:150px !important}

.wYyyy{width:85px !important}
.wYyyymm{width:115px !important}
.wYyyymmdd{width:140px !important}
.wYyyymmddYyyymmdd{width:230px !important}
.wHhmi{width:60px !important}

/* 살짝넓히기 120->130 */
.wSlipNo{width:130px !important}
.wTelNo{width:120px !important}

.mZipV{width:60px !important}
.wBscAddrV{width:385px !important}
.wDtlAddrV{width:450px !important}

.mZip{width:95px !important}
.mBscAddr{width:350px !important}
.mDtlAddr{width:450px !important}

/* 2026.08.04 전예림, 주소검색창 넓은 창으로 입력 가능하도록 유형 추가 */
.mZipW{width:115px !important}
.mBscAddrW{width:330px !important}
.mDtlAddrW{width:450px !important}



/*검색 조건 안에 줄 넘침*/
/* 지점코드3자 명5자 */
.w-line .wBranCd{width:100% !important; max-width:120px !important}
.w-line .wBranNm{width:100% !important; max-width:150px !important}

/* 영업소코드8자 명10자 */
.w-line .wSalesCd{width:100% !important; max-width:120px !important}
.w-line .wSalesNm{width:100% !important; max-width:150px !important}

/* 사원코드8자 명4자 */
.w-line .wEmpCd{width:100% !important; max-width:120px !important}
.w-line .wEmpNm{width:100% !important; max-width:150px !important}

/* 거래처코드8자 명10자 */
.w-line .wCustCd{width:100% !important; max-width:120px !important}
.w-line .wCustNm{width:100% !important; max-width:150px !important}

/* 업체코드8자 명10자 */
.w-line .wCorpCd{width:100% !important; max-width:120px !important}
.w-line .wCorpNm{width:100% !important; max-width:150px !important}

/* 부서코드5자 명7자 */
.w-line .wDeptCd{width:100% !important; max-width:120px !important}
.w-line .wDeptNm{width:100% !important; max-width:150px !important}

/* 센터코드3자 명4자 */
.w-line .wTrmlCd{width:100% !important; max-width:120px !important}
.w-line .wTrmlNm{width:100% !important; max-width:150px !important}

/* 차량코드6자 명8자 */
.w-line .wCarCd{width:100% !important; max-width:120px !important}
.w-line .wCarNm{width:100% !important; max-width:150px !important}

.w-line .wYyyy{width:100% !important; max-width:85px !important}
.w-line .wYyyymm{width:100% !important; max-width:115px !important}
.w-line .wYyyymmdd{width:100% !important; max-width:140px !important}
.w-line .wYyyymmddYyyymmdd{width:100% !important; max-width:230px !important}
.w-line .wHhmi{width:100% !important; max-width:60px !important}

/* 120-> 130*/
.w-line .wSlipNo{width:100% !important; max-width:130px !important}
.w-line .wTelNo{width:100% !important; max-width:120px !important}

.w-line .mZipV{width:100% !important; max-width:60px !important}
.w-line .wBscAddrV{width:100% !important; max-width:385px !important}
.w-line .wDtlAddrV{width:100% !important; max-width:450px !important}

.w-line .mZip{width:100% !important; max-width:95px !important}
.w-line .mBscAddr{width:100% !important; max-width:350px !important}
.w-line .mDtlAddr{width:100% !important; max-width:450px !important}

/* 2026.08.04 전예림, 주소검색창 넓은 창으로 입력 가능하도록 유형 추가 */
.w-line .mZipW{width:100% !important; max-width:115px !important}
.w-line .mBscAddrW{width:100% !important; max-width:330px !important}
.w-line .mDtlAddrW{width:100% !important; max-width:450px !important}



/*조회조건*/

/* 1680px 이상 : 대형 데스크탑 */
@media (min-width: 1680px) {
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto
  }
  
  .col-lg-1 {
      flex: 0 0 auto;
      width: 8.33333333%
  }
  
  .col-lg-2 {
      flex: 0 0 auto;
      width: 16.66666667%
  }
  
  .col-lg-3 {
      flex: 0 0 auto;
      width: 25%
  }
  
  .col-lg-4 {
      flex: 0 0 auto;
      width: 33.33333333%
  }
  
  .col-lg-5 {
      flex: 0 0 auto;
      width: 41.66666667%
  }
  
  .col-lg-6 {
      flex: 0 0 auto;
      width: 50%
  }
  
  .col-lg-7 {
      flex: 0 0 auto;
      width: 58.33333333%
  }
  
  .col-lg-8 {
      flex: 0 0 auto;
      width: 66.66666667%
  }
  
  .col-lg-9 {
      flex: 0 0 auto;
      width: 75%
  }
  
  .col-lg-10 {
      flex: 0 0 auto;
      width: 83.33333333%
  }
  
  .col-lg-11 {
      flex: 0 0 auto;
      width: 91.66666667%
  }
  
  .col-lg-12 {
      flex: 0 0 auto;
      width: 100%
  }
}

/*  1680px 미만 ~ 1366px 이상 : 일반 데스크탑 */
@media (min-width: 1366px) and (max-width: 1679px) {
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%
  }
  
  .col-md-2 {
      flex: 0 0 auto;
      width: 16.66666667%
  }
  
  .col-md-3 {
      flex: 0 0 auto;
      width: 25%
  }
  
  .col-md-4 {
      flex: 0 0 auto;
      width: 33.33333333%
  }
  
  .col-md-5 {
      flex: 0 0 auto;
      width: 41.66666667%
  }
  
  .col-md-6 {
      flex: 0 0 auto;
      width: 50%
  }
  
  .col-md-7 {
      flex: 0 0 auto;
      width: 58.33333333%
  }
  
  .col-md-8 {
      flex: 0 0 auto;
      width: 66.66666667%
  }
  
  .col-md-9 {
      flex: 0 0 auto;
      width: 75%
  }
  
  .col-md-10 {
      flex: 0 0 auto;
      width: 83.33333333%
  }
  
  .col-md-11 {
      flex: 0 0 auto;
      width: 91.66666667%
  }
  
  .col-md-12 {
      flex: 0 0 auto;
      width: 100%
  }
}

/* 1366px 이하 : 소형 화면 또는 태블릿 */
@media (max-width: 1366px) {
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto
  }

.col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%
  }

.col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%
  }

.col-sm-3 {
    flex: 0 0 auto;
    width: 25%
  }

.col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%
  }

.col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%
  }

.col-sm-6 {
    flex: 0 0 auto;
    width: 50%
  }

.col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%
  }

.col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%
  }

.col-sm-9 {
    flex: 0 0 auto;
    width: 75%
  }

.col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%
  }

.col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%
  }

.col-sm-12 {
    flex: 0 0 auto;
    width: 100%
  }  
}