/* form : input select button ... */
input, input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="image"], input[type="tel"], input[type="number"], textarea {-webkit-appearance: none;-webkit-border-radius: 0;-ms-border-radius: 0; border-radius: 0;}
input, label, select, button{margin:0;border:0;padding:0;display:inline-block; vertical-align:middle; white-space:normal; background:none; line-height:1;font-family: var(--font-basic);}
textarea{ margin:0; border:0; padding:0; display:inline-block; vertical-align:middle; background:none; line-height:1; font-family: var(--font-basic); vertical-align:top;overflow:auto;}
input[type=button]{cursor:pointer;}
/* Input Reset  */
input[type="file"] {border:0;}
input[type="checkbox"], input[type="radio"]{-webkit-appearance:none; -webkit-border-radius:0; background-color:transparent;}
input:not([type='checkbox,radio']):focus::-webkit-input-placeholder {color: transparent;}
input:hover {border-radius:0px}
input:focus {outline: none;background-color:#fff;border-color:var(--concept-color);}

button {font-family: var(--font-basic); font-style: normal;font-weight:500; cursor:pointer;}
button * { margin:0; padding:0;}
button::-moz-focus-inner { padding:0; border:0;}

button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select, input, textarea{ -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;}
input[type=search]{ -webkit-appearance:textfield; -webkit-box-sizing:content-box;}
::-webkit-search-decoration{ display:none;}

button,input[type="reset"],input[type="button"],input[type="submit"]{ overflow:visible; width:auto;}
::-webkit-file-upload-button{ padding:0; border:0; background:none;}
/* select{-webkit-appearance: none;-moz-appearance: none;-o-appearance: none; appearance: none; outline-width:0;  }
select::-ms-expand { display: none;} */
select[multiple]{vertical-align:top;}
input[type=text]::-ms-clear {display:none;}

input::placeholder, input:-ms-input-placeholder, input::-ms-input-placeholder, input::-webkit-input-placeholder, input::-moz-placeholder {color:#888;font-size:14px;}
textarea::placeholder, textarea:-ms-input-placeholder, textarea::-ms-input-placeholder, textarea::-webkit-input-placeholder, textarea::-moz-placeholder {color:#888;font-size:14px;}

/*input[readonly]{background:#fafafa !important;}
input[readonly]:focus{border:1px solid var(--border-color) !important; background:#fafafa !important;} */
textarea[readonly]{background:#fafafa !important;}
textarea[readonly]:focus{border:1px solid var(--border-color) !important; background:#fafafa !important; /*cursor: not-allowed;*/}

input[type=checkbox] { display: none;  }
input[type=checkbox] + label{display: inline-block;  cursor: pointer;  position: relative;padding-left:25px;margin-right:0px; font-size:14px; line-height:20px;font-weight: 400; color:#333;vertical-align:top;}
input[type=checkbox]+ label:before {content: "";  display: inline-block;width:20px;height:20px;transition:all .2s;position:absolute; left:0; top:0;background:url(/images/layout/i_chkbox_wh.png) 50% 50% no-repeat #d9d9d9;border:0px solid #d9d9d9;border-radius:4px;} 
input[type=checkbox]:checked + label:before { background:url(/images/layout/i_chkbox_wh.png) 50% 50% no-repeat var(--concept-color);border:0px solid var(--concept-color);}  

input[type=radio] { display: none;  }
input[type=radio] + label{display: inline-block;  cursor: pointer;  position: relative;padding-left:20px;margin-right:0px; font-size:14px; line-height:16px;font-weight: 400;color:#333;vertical-align:top;}
input[type=radio]+ label:before {content: "";  display: inline-block;width:16px;height:16px;transition:all .2s;position:absolute; left:0; top:0; border:4px solid #ccc; border-radius:50%;} 
input[type=radio]:checked + label:before {border:5px solid var(--concept-color); text-align: center;} 


.select-wrap select, .select_sty select{-webkit-appearance: none;-moz-appearance: none;-o-appearance: none; appearance: none; outline-width:0;  }
.select-wrap select::-ms-expand, .select_sty select::-ms-expand{ display: none;}

/* select custom : nice-select :ui.min.js front.js 연동해야함 */
.select-wrap { position: relative;display: block;}
.select-wrap .nice-select { position: relative; -webkit-tap-highlight-color: transparent; background-color: #fff; clear: both;cursor: pointer; display:flex; align-items: center; font-size:14px;color: #333;height:var(--input-height); line-height:1; border: 1px solid var(--border-color); outline: none; padding-left:10px;  padding-right: 30px; text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width:100%; border-radius:4px; box-sizing: border-box; z-index:2;}

.select-wrap .nice-select > span.current {display: block;overflow: hidden; text-overflow: ellipsis;}
.select-wrap .nice-select > span.current.placeholder {color:#888;font-size:14px;}
.select-wrap .nice-select.open {border-color: var(--concept-color); border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-sizing: border-box;font-weight:600; z-index:6; }
.select-wrap .nice-select.disabled { opacity: 0.5;}
.select-wrap .nice-select:after{position:absolute;right:10px;top:50%;content: '';width:10px;height:10px;/*border-top: 2px solid var(--concept-color);border-right: 2px solid var(--concept-color);*/ border: 2px solid var(--concept-color); border-top: none; border-left: none;transform: rotate(45deg);-webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;pointer-events:none; margin-top: -7px;}
 /*.select-wrap .nice-select:after {  content: ""; width: 0;height: 0;border-style :solid;border-width: 9px 6px 0 6px;border-color: var(--concept-color) transparent transparent transparent; display: block; margin-top:-5px; pointer-events: none; position: absolute; right: 16px;top: 50%; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;}  : 삼각형 스타일로 할 경우 */
.select-wrap .nice-select.open:after {transform: rotate(225deg);margin-top: -2px;}
 
.select-wrap .nice-select.open .list { opacity: 1; pointer-events: auto; border-color: var(--concept-color); -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); border-radius: 0 0 4px 4px; z-index: 6;}
.select-wrap .nice-select.disabled {background: #f5f5f5; color: #888; pointer-events: none;}
.select-wrap .nice-select.disabled:after { border-color: #cccccc;}
.select-wrap .nice-select .list{display: block; width:calc(100% + 2px); background: #fff; border: 1px solid transparent;border-top: none;box-sizing: border-box;opacity: 0;  padding: 0; pointer-events: none; position: absolute;top: 100%; left: -1px;right: -1px;-webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0;transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px);transform: scale(0.75) translateY(-21px); z-index:6; overflow-y: auto;max-height:350px;}
 
.select-wrap .nice-select .list::-webkit-scrollbar{width: 6px;}
.select-wrap .nice-select .list::-webkit-scrollbar:vertical {width: 6px;}
.select-wrap .nice-select .list::-webkit-scrollbar:horizontal {height: 6px;}
.select-wrap .nice-select .list::-webkit-scrollbar-track{border-radius: 0px;background-color:transparent;}/* 스크롤바 뒷 배경 설정*/
.select-wrap .nice-select .list::-webkit-scrollbar-track:hover{background-color:transparent;}
.select-wrap .nice-select .list::-webkit-scrollbar-thumb{border-radius: 0px; border: 0;background-color:var(--concept-color);}/* 스크롤바 막대 설정*/
.select-wrap .nice-select .list::-webkit-scrollbar-button {display:none;}
 
.select-wrap .nice-select .list:hover .option:not(:hover) { background-color: transparent;}
.select-wrap .nice-select .option {display:flex;align-items: center;   width:100%; cursor: pointer;font-weight: 400;line-height:1.3; list-style: none; min-height:30px;outline: none;padding: 0 10px;font-size:14px; text-align: left;box-sizing: border-box; -webkit-transition: all 0.2s;transition: all 0.2s;}
.select-wrap .nice-select .option:hover,
.select-wrap .nice-select .option.focus,
.select-wrap .nice-select .option.selected.focus { background-color: #fafafa;color: #333; }
.select-wrap .nice-select .option.selected {font-weight: bold;}
.select-wrap .nice-select .option.disabled {background-color: transparent;color: #999;cursor: default;}

.select-wrap.lg .nice-select { height: 50px;}
.select-wrap.md .nice-select {height:35px; font-size:14px;}

 /* arrow - line  
.select-wrap.line .nice-select:after {  content: ""; width: 8px; height: 8px; border: 1px solid #000; border-top: none; border-left: none; display: block; margin-top: -6px; pointer-events: none; position: absolute; right: 16px;top: 50%; transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;}
.select-wrap.line .nice-select.open:after {transform: rotate(225deg);margin-top: -2px;} 

 // arrow - 삼각형 
.select-wrap .nice-select:after {  content: ""; width: 0;height: 0;border-style :solid;border-width: 9px 6px 0 6px;border-color: #888 transparent transparent transparent; display: block; margin-top:-5px; pointer-events: none; position: absolute; right: 16px;top: 50%; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;}
.select-wrap .nice-select.open:after {transform: rotate(-180deg);margin-top: -5px;}
 삼각형 */
 
/* line */
.select-wrap.line .nice-select {background-color: transparent; border: 1px solid var(--border-color);border-width:0 0 1px 0; padding-left:0px;  padding-right:35px; border-radius:0px; }
.select-wrap.line .nice-select .list {border: 1px solid var(--concept-color);border-top:1px solid var(--concept-color);}
.select-wrap.line .nice-select .option {padding: 0 10px;}
.select-wrap.line .nice-select:after{right:5px;}
.select-wrap.line .nice-select.open .list {border-radius:0;}

/* transparent */
.select-wrap.transparent .nice-select {background-color: transparent;border-width:0; padding-left:10px;  padding-right:35px; border-radius:0px; }
.select-wrap.transparent .nice-select .list {border: 1px solid var(--concept-color);border-top:1px solid var(--concept-color); margin-top:5px; }
.select-wrap.transparent .nice-select:after{right:5px;}
.select-wrap.transparent .nice-select.open .list {border-radius:0;}

/* bottom menu 추가 */
.select-wrap.line-wh .nice-select {background-color: transparent; border: 1px solid #fff;border-width:0 0 1px 0; padding-left:0px;  padding-right:35px;font-size:14px;color: #fff;}
.select-wrap.line-wh .nice-select:after{border: 2px solid var(--light-color); border-top: none; border-left: none;transform: rotate(45deg);}
.select-wrap.line-wh .nice-select.open:after {transform: rotate(225deg);margin-top: -2px;}
.select-wrap.line-wh .nice-select.open .list {border-color: var(--light-color); }
.select-wrap.line-wh .nice-select:after{right:5px;}

.select-wrap.line-wh .nice-select .list{position: absolute;top:auto; bottom:40px; background:#afc284;  max-height:350px;}
.select-wrap.line-wh .nice-select .option:hover,.select-wrap.line-wh .nice-select .option.focus,.select-wrap.line-wh .nice-select .option.selected.focus { background-color:var(--sub-color);}
.select-wrap.line-wh .nice-select .option {padding: 0 8px;}


/* js 연동없이 기본 사용 */
.select_sty{position:relative;display:inline-block;vertical-align:middle; }
.select_sty select{width:100%;height:var(--input-height); padding:0px 25px 0px 10px;border:1px solid var(--border-color);background:#fff;font-size:14px;color: #333;cursor: pointer;  border-radius:4px;box-sizing:border-box;}
.select_sty.lg select{height:50px;}
.select_sty.md select{height:35px;font-size:14px;}
.select_sty.ss select{height:26px;font-size:14px;}
.select_sty.sm select{height:30px;font-size:14px;}
.select_sty.line select{border-width:0 0 1px 0;background: transparent;border-radius:0px;}
.select_sty.line-wh select{border-width:0 0 1px 0;background: transparent;border-radius:0px; font-size:14px; color:#fff;padding:0px 24px 0px 0px; }

.select__arrow{position: absolute;top: 50%; right:10px; transform:translateY(-50%); width: 0;height: 0;pointer-events: none;border-style :solid;border-width: 8px 5px 0 5px;border-color: #3e4358 transparent transparent transparent;}
.select__arrow_2{position: absolute;top: 50%;right:5px;transform:translateY(-50%);pointer-events: none;width:9px; height:9px;border: 2px solid #3e4358;border-top: none;border-right: none; transform: rotate(-45deg);} /* line */
.select__arrow_3{position: absolute;top: 50%;right:5px;transform:translateY(-50%);pointer-events: none;width:9px; height:9px;border: 2px solid #fff;border-top: none;border-right: none; transform: rotate(-45deg);} /* line */

.input-type1{width:100%;height:var(--input-height);padding:0 10px;border:1px solid var(--border-color);background:#fff;color:#333;font-size:14px;border-radius:4px;box-sizing:border-box;}

.input_sty{display:inline-block;vertical-align:middle;transition: all 0.3s ease-out}
.input_sty input{width:100%;height:var(--input-height);padding:0 10px;border:1px solid var(--border-color);background:#fff;color:#333;font-size:14px;border-radius:4px;box-sizing:border-box;}
.input_sty input:focus {outline: none;background:#fff;border-color:var(--concept-color);}
.input_sty input:disabled, .input_sty input:read-only {background:#f1f1f1;}
.input_sty input:disabled:focus, .input_sty input:read-only:focus {border-color:var(--border-color); }

.input_sty.lg input{height:50px;}
.input_sty.md input{height:35px;font-size:14px;}
.input_sty.ss input{height:26px;font-size:14px;}
.input_sty.sm input{height:30px;font-size:14px;}
.input_sty.line input{height:40px; padding:0 0px;border:1px solid #ccc;border-width:0 0 1px 0; border-radius:0px;}
.input_sty.non input{border:0;padding:0px;background:#fff;font-weight:400; font-size:16px;border-radius:0px; }

.input_sty.line-wh input{padding:0 0px;background: transparent;border:1px solid #ccc;border-width:0 0 1px 0; border-radius:0px;color:#fff;font-size:14px;padding:0px; }
.input_sty.line-wh input::placeholder {color:rgba(255, 255, 255, 0.8);}
.input_sty.line-wh input:-ms-input-placeholder {color:rgba(255, 255, 255, 0.8);}
.input_sty.line-wh input::-ms-input-placeholder {color:rgba(255, 255, 255, 0.8);}
.input_sty.line-wh input::-webkit-input-placeholder {color:rgba(255, 255, 255, 0.8);}
.input_sty.line-wh input::-moz-placeholder {color:rgba(255, 255, 255, 0.8);}

.input_search{position:relative;display:inline-block;vertical-align:middle;transition: all 0.3s ease-out}
.input_search input{width:100%;font-size:14px;color:#444;height:30px;padding:0px 25px 0 10px;border:1px solid var(--border-color);background:#fff;border-radius:4px;box-sizing:border-box;}
.input_search input:focus {outline: none;background-color: transparent;border-color:var(--concept-color);}
.input_search .btn__search{ position: absolute;top:0;right:5px;width:18px;height:30px;background:url(/images/layout/i_search.png) 0 50% no-repeat; background-size: 16px auto; text-indent: -9999px; /* top:50%;transform:translateY(-50%); */}

.input_search_line{position:relative;display:inline-block;vertical-align:middle;transition: all 0.3s ease-out}
.input_search_line input{width:100%;font-size:15px;color:#333;height:40px;padding:0px 30px 0 5px;border-bottom:2px solid #333;background:#fff;box-sizing:border-box;}
.input_search_line input:focus {outline: none;background-color: transparent;border-color:var(--concept-color);}
.input_search_line .btn__search{position: absolute;top:0;right:0px;width:18px;height:40px;background:url(/images/layout/i_search_18.png) 0 50% no-repeat;text-indent: -9999px; /* top:50%;transform:translateY(-50%); */}
.input_search_line input::placeholder {color:#333;}
.input_search_line input:-ms-input-placeholder {color:#333;}
.input_search_line input::-ms-input-placeholder { color:#333;}
.input_search_line input::-webkit-input-placeholder {color:#333;}
.input_search_line input::-moz-placeholder {color:#333;}

.input_id{display:inline-flex;align-items: center; gap:10px; height:40px;border-bottom:1px solid #d1d1d1;background:url(/images/layout/login-id.png) 5px 50% no-repeat;  padding:0px 5px 0 40px;box-sizing:border-box;transition: all 0.3s ease-out} /* id */
.input_id .tit{width:100px; font-weight:600; color:#333;font-size:15px;}
.input_id input{flex:1;height:100%;font-weight:400;color:#333;font-size:15px; }
.input_id input::placeholder, .input_id input:-ms-input-placeholder, .input_id input::-ms-input-placeholder, .input_id input::-webkit-input-placeholder, .input_id input::-moz-placeholder {color:#666 !important;}

.input_pw{display:inline-flex;align-items: center; gap:10px; height:40px;border-bottom:1px solid #d1d1d1;background:url(/images/layout/login-pw.png) 5px 50% no-repeat;padding:0px 5px 0 40px;box-sizing:border-box;transition: all 0.3s ease-out} /* pw */
.input_pw .tit{width:100px; font-weight:600; color:#333;font-size:15px;}
.input_pw input{flex:1;height:100%;font-weight:400;color:#333;font-size:15px;}
.input_pw input::placeholder, .input_pw input:-ms-input-placeholder, .input_pw input::-ms-input-placeholder, .input_pw input::-webkit-input-placeholder, .input_pw input::-moz-placeholder {color:#666 !important;}

.input-date{position: relative;display:inline-flex;align-items: center; height:var(--input-height); transition: all 0.3s ease-out}
.input-date input{width:100%;height:100%; text-align:center; padding:0px 25px 0px 5px;border:1px solid var(--border-color);background:#fff;color:#333;font-size:14px;border-radius:4px;box-sizing:border-box;}
.input-date input:focus {outline: none;background-color: transparent;border-color:var(--concept-color);}
.input-date input:disabled {background:#f1f1f1;}
.input-date .i_calendar{position: absolute;right:5px;top:50%; transform:translateY(-50%); border:0;display: inline-block;width:20px; height:20px;background:url(/images/layout/ico_calendar.png) 0 50% no-repeat;text-indent: -9999px;}
.input-date.md{height:35px;}

.textArea_sty1{display: inline-block;width:100%;border:1px solid var(--border-color);height:200px; font-weight: 400;color:#333;font-size:14px;padding:10px;background:#fff;border-radius:4px;box-sizing: border-box;}
.textArea_sty1:focus {outline: none;border-color:var(--concept-color);}

.checkbox{position:relative;}
.checkbox.type1 label{}
.checkbox.type1 .ibox{display:flex;align-items:center; justify-content: center; text-align:center;font-weight: 500;font-size:17px;color:#333;line-height:1.3;letter-spacing:0em; border-radius:4px;border:1px solid #666;height:40px;padding:0 30px; box-sizing:border-box;} 
.checkbox.type1 input:checked + .ibox{font-weight: 500;color:#fff;border:1px solid var(--concept-color); background:var(--concept-color); }
/* .checkbox.type1 input[type=checkbox]:disabled + .ibox{font-weight: 500;color:#fff;border:1px solid var(--concept-color);background:var(--concept-color); }
.checkbox.type1 input[type=radio]:disabled + .ibox{font-weight: 500;color:#fff;border: 1px solid #cacfd1 !important;background-color: #cacfd1 !important;pointer-events: none;} */

.checkbox.type2{width:100%;}
.checkbox.type2 label{width:100%;}
.checkbox.type2 .ibox{position: relative; width:100%; display:flex;  align-items:center; gap:20px; border-radius:4px;border:1px solid #ddd; height:40px;padding:0 20px 0 15px; box-sizing:border-box;} 
.checkbox.type2 input:checked + .ibox{border:1px solid var(--concept-color); }
.checkbox.type2 .icon{width:24px; height:24px; background:url(/images/layout/i_chkbox_g.png) 50% 50% no-repeat #eee;background-size:9px auto; border-radius: 50%;} 
.checkbox.type2 .txt{font-weight: 500;font-size:17px;color:#666;line-height:1.3;letter-spacing:0em; box-sizing:border-box;} 
.checkbox.type2 input:checked + .ibox .icon{background:url(/images/layout/i_chkbox_wh.png) 50% 50% no-repeat var(--concept-color);background-size:9px auto; } 
.checkbox.type2 input:checked + .ibox .txt{font-weight: 500;color:var(--concept-color);} 



/* btn-type -------------------------------------------------------------------*/
.btn-group { display: flex;flex-wrap: wrap; margin:0; gap:10px}
.btn-group.mw100 > * {min-width:100px;}
.btn-group.mw150 > * {min-width:150px;}
.btn-group.mw200 > * {min-width:200px;}
.btn-group.mw250 > * {min-width:250px;}
.btn-group.center {justify-content: center;}
.btn-group.space-between {justify-content: space-between;}
.btn-group.right {justify-content: flex-end;}

.btn-type {position:relative; display:inline-flex;align-items: center;height:40px; padding:0 25px;font-family: var(--font-basic);font-weight:500;font-size:15px; line-height:1;text-align:center; justify-content: center;text-transform:capitalize; transition:all 0.3s;  border-radius:4px;box-sizing: border-box;}
.btn-type.xlg{height:55px;font-size:18px;padding:0 30px;}
.btn-type.lg {height:50px;font-size:16px;padding:0 30px;}
.btn-type.md {height:35px;font-size:14px;padding:0 10px;}
.btn-type.sm {height:30px;font-weight:400;font-size:13px;padding:0 10px;}
.btn-type.ss {height:26px;font-weight:400;font-size:13px;padding:0 8px;} /* 기본 input height */
.btn-type.xs {height:22px;font-weight:400;font-size:12px;padding:0 8px;}

.btn-type.rbtn {border-radius:24px; padding:0 24px;}
.btn-type.rbtn-xlg {height:55px;font-size:18px;border-radius:24px;  padding:0 24px;}
.btn-type.rbtn-lg {height:50px;font-size:16px;border-radius:24px;  padding:0 24px;}
.btn-type.rbtn-md {height:35px;font-size:14px;border-radius:24px; padding:0 20px;}
.btn-type.rbtn-ss {height:26px;font-weight:400;font-size:13px;border-radius:24px;padding:0 8px;}
.btn-type.rbtn-xs {height:22px;font-weight:400;font-size:12px;border-radius:24px;padding:0 8px;}

.btn-up {position:relative; display:inline-flex;align-items: center;justify-content: center;text-align:center;cursor:pointer; width:28px; height:20px;border-radius:4px;border:1px solid var(--concept-color); padding:0; box-sizing: border-box; z-index: 1;}
.btn-up::before{position: absolute;content: ""; top:6px;left:8px;width: 0;height: 0;pointer-events: none;border-style :solid;border-width: 7px 5px 0 5px;border-color: var(--concept-color) transparent transparent transparent;transform: rotate(180deg); z-index: 2;}
.btn-down {position:relative; display:inline-flex;align-items: center;justify-content: center;text-align:center;cursor:pointer; width:28px; height:20px;border-radius:4px;border:1px solid var(--concept-color); padding:0; box-sizing: border-box; z-index: 1;}
.btn-down::before{position: absolute;content: ""; top:6px;left:8px;width: 0;height: 0;pointer-events: none;border-style :solid;border-width: 7px 5px 0 5px;border-color: var(--concept-color) transparent transparent transparent;z-index: 2;}

/* btn-type color */
.btn-type.concept-color {color:#fff !important;border:1px solid var(--concept-color);background:var(--concept-color);}
.btn-type.second-color{color:#fff !important;border:1px solid var(--second-color);background:var(--second-color);}
.btn-type.primary-color{color:#fff !important;border:1px solid var(--primary-color);background:var(--primary-color);}
.btn-type.point-color{color:#fff !important;border:1px solid var(--point-color);background:var(--point-color);}
.btn-type.sub-color{color:#fff !important;border:1px solid var(--sub-color);background:var(--sub-color);}
.btn-type.black {color:#fff !important;border:1px solid #000;background:#000}
.btn-type.dgray {color:#fff !important;border:1px solid var(--dgray-color);background:var(--dgray-color);}
.btn-type.gray {color:#fff !important;border:1px solid var(--gray-color);background:var(--gray-color);}
.btn-type.lgray {color:#fff !important;border:1px solid #a3a5aa;background:#a3a5aa}
.btn-type.white{color:#333 !important;border:1px solid #707070;background:#fff}
.btn-type.red {color:#fff !important;border:1px solid var(--red-color);background:var(--red-color);}
.btn-type.orange {color:#fff !important;border:1px solid var(--orange-color);background:var(--orange-color);}
.btn-type.green {color:#fff !important;border:1px solid var(--green-color);background:var(--green-color);}
.btn-type.navy {color:#fff !important;border:1px solid var(--navy-color);background:var(--navy-color);}
.btn-type.lgreen {color:#fff !important;border:1px solid var(--lgreen-color);background:var(--lgreen-color);}
.btn-type.yellow {color:#fff !important;border:1px solid var(--yellow-color);background:var(--yellow-color);}
.btn-type.icon-color1 {color:#fff !important;border:1px solid var(--icon-color1);background:var(--icon-color1);}
.btn-type.icon-color2 {color:#fff !important;border:1px solid var(--icon-color2);background:var(--icon-color2);}
.btn-type.icon-color3 {color:#fff !important;border:1px solid var(--icon-color3);background:var(--icon-color3);}
.btn-type.icon-color4 {color:#fff !important;border:1px solid var(--icon-color4);background:var(--icon-color4);}
.btn-type.basic {color:#535353 !important;border:1px solid #939393;background:#e7e7e7;}

.btn-type.concept-line {color:var(--concept-color);border:1px solid var(--concept-color);background:#fff}
.btn-type.second-line {color:var(--second-color);border:1px solid var(--second-color);background:#fff}
.btn-type.primary-line{color:var(--primary-color);border:1px solid var(--primary-color);background:#fff}
.btn-type.point-line {color:var(--point-color);border:1px solid var(--point-color);background:#fff}
.btn-type.sub-line {color:var(--sub-color);border:1px solid var(--sub-color);background:#fff}
.btn-type.black_line {color:#000 !important;border:1px solid #000;background:#fff}
.btn-type.dgray_line {color:var(--dgray-color) !important;border:1px solid var(--dgray-color);background:#fff}
.btn-type.gray_line {color:var(--gray-color) !important;border:1px solid var(--gray-color);background:#fff}
.btn-type.lgray_line {color:#a3a5aa !important;border:1px solid #a3a5aa;background:#fff}
.btn-type.white_line {color:#fff !important;border:1px solid #fff;background-color:transparent; }
.btn-type.red_line {color:var(--red-color) !important;border:1px solid var(--red-color);background:#fff}
.btn-type.orange_line {color:var(--orange-color) !important;border:1px solid var(--orange-color);background:#fff}
.btn-type.green_line {color:var(--green-color) !important;border:1px solid var(--green-color);background:#fff}
.btn-type.navy_line {color:var(--navy-color) !important;border:1px solid var(--navy-color);background:#fff}
.btn-type.lgreen_line {color:var(--lgreen-color) !important;border:1px solid var(--navy-color);background:#fff}
.btn-type.yellow_line {color:var(--yellow-color) !important;border:1px solid var(--navy-color);background:#fff}


/* hover */
.btn-type:hover {/* box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); */ filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7; }
.btn-type.off:hover { paint-order:none; cursor:not-allowed;}

.i_left_arrow {position: relative; padding-left:15px; text-align: left;}
.i_left_arrow::after { content: ' ';position: absolute; top: 50%;left: 0px; width: 8px; height: 8px; margin-top: -4px;border: 1px solid #666;border-top: none;border-right: none; transform: rotate(45deg);}

.i_right_arrow {position: relative; padding-right:15px; text-align: left;}
.i_right_arrow::after { content: ' ';position: absolute; top: 50%;right: 0px; width: 8px; height: 8px; margin-top: -4px;border: 1px solid #666;border-top: none;border-right: none; transform: rotate(-135deg);}

.i_download {display:inline-block;min-height:12px; padding-right:30px;background:url(/images/layout/i_filedown.png) right center no-repeat;}
.i_right_w{display: inline-block;height:43px;padding-right:34px;background:url(/images/layout/i_right_w.png) right center no-repeat;}
.i_edit{display: inline-block;min-height:20px;padding-left:30px;background:url(/images/layout/i_edit.png) left center no-repeat;line-height:20px;}
.i-print{display: inline-block;min-height:18px;padding-left:28px;background:url(/images/layout/i_print-w.png) left center no-repeat;line-height:18px;}
.i_list_wh{display:inline-block;height:14px;padding-left:28px;background:url(/images/layout/ico_list_wh.png) left center no-repeat; line-height:14px;}
.i_edit_wh{display: inline-block;min-height:20px;padding-left:30px;background:url(/images/layout/i_edit_wh.png) left center no-repeat;line-height:20px;}
.i_phone{display: inline-block;min-height:20px;padding-left:24px;background:url(/images/layout/icon-phone.png) left center no-repeat;line-height:20px;}
.i_phone_wh{display: inline-block;min-height:20px;padding-left:20px;background:url(/images/layout/icon-phone-wh.png) left center no-repeat;line-height:20px; background-size:auto 14px; font-family: var(--font-basic);font-weight:400;font-size:14px;color:#fff; margin-right:10px;}
.i_download_wh {display:inline-block;width:15px;height:12px;background:url(/images/layout/i_filedown_wh.png) 50% 50% no-repeat;}
.i_newwin_wh {display:inline-block;min-height:15px; padding-left:22px;background:url(/images/layout/i_newwin_wh.png) 0 50% no-repeat;}
.i_link_wh {display:inline-block;min-height:15px; padding-left:22px;background:url(/images/layout/ico_link_w.png) 0 50% no-repeat;}
.i_link {display:inline-block;min-height:15px; padding-left:22px;background:url(/images/layout/ico_link.png) 0 50% no-repeat;}

button:disabled, button[disabled]{border: 1px solid #bbb !important;background-color: #bbb !important;color: #fff !important;pointer-events: none;}
.btn-type.off {color:#fff !important;border:1px solid #d3d5d7;background:#d3d5d7; paint-order:none; cursor:not-allowed;}

.left-more {display:inline-block; text-align:right; height: auto;}
.left-more .circle {transition: all 0.2s cubic-bezier(0.65, 0, 0.076, 1); position: relative;  display: block; margin: 0;  width:42px;  height: 42px; background: var(--concept-color);  border-radius:21px;}
.left-more .circle .icon { transition: all 0.2s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; bottom: 0; margin: auto; background: #fff;animation: button-text-Ani 0.6s 0.1s both;}
.left-more .circle .icon.arrow {transition: all 0.2s cubic-bezier(0.65, 0, 0.076, 1); left:12px; width:18px;  height:2px;background: #fff;}
.left-more .circle .icon.arrow::before { position: absolute;  content: ""; top:-8px; right:9px; width: 2px; height:18px;background: #fff; }
.left-more .button-text {transition: all 0.2s cubic-bezier(0.65, 0, 0.076, .5);  position: absolute;  top: 0;  left: 0; right: 0;  bottom: 0; padding: 14px 0 0;font-size:18px;color: #fff;  line-height:1; text-align: center;
 text-transform: uppercase; display:none;opacity: 0;}
.left-more:hover .circle { width: 200px;}
.left-more:hover .circle .icon{display:none;}
.left-more:hover .button-text {display:inline-block !important;opacity: 1; animation: button-text-Ani 1s 0.1s both;}

@keyframes button-text-Ani {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.mtb{margin:30px 0;}

@media screen and (max-width: 768px) {
input[type=checkbox] + label{font-size:15px;line-height:18px;padding-left:28px;} 
input[type=checkbox]+ label:before {width:18px;height:18px;} 
input[type=radio] + label{font-size:15px;}

.btn-group {gap:5px}
.btn-group.mw100 > * {min-width:auto; flex:1;}
.btn-group.mw150 > * {min-width:auto; flex:1;}
.btn-group.mw200 > * {min-width:auto; flex:1;}
.btn-group.mw250 > * {min-width:auto; flex:1;}

.left-more .circle { width: 200px;}
.left-more .circle .icon{display:none;}
.left-more .button-text {display:inline-block !important;opacity: 1; animation: button-text-Ani 1s 0.1s both;}

.right-more:hover .circle { width:42px;}
.right-more:hover .circle .icon{display:inline-block !important;}
.right-more:hover .button-text {display:none !important;}
.right-more.w1:hover .circle { width:42px;}


.checkbox.type1 .ibox{font-size:15px;height:40px;padding:0 15px;}
.checkbox.type2 .ibox{gap:10px;height:40px;padding:0 15px 0 10px;} 
.checkbox.type2 .icon{width:20px; height:20px; background-size:7px auto;} 
.checkbox.type2 .txt{font-size:15px;} 
.checkbox.type2 input:checked + .ibox .icon{background-size:7px auto; } 


}

@media screen and (max-width: 540px) {
.select-wrap .nice-select .list::-webkit-scrollbar {width: 2px;height: 2px;}
.select-wrap.line .nice-select {padding-right:20px;}

.input_id{padding:5px 5px 5px 30px;background-size:16px auto;}
.input_pw{padding:5px 5px 5px 30px;background-size:16px auto;}


}

@media screen and (max-width: 375px) {
.checkbox.type1 .ibox{padding:0 10px;}
}

@media screen and (max-width: 320px) {

}