@charset "utf-8";
/* ******************************************************* 
 * filename : common_m.css
 * description : 공통요소
 * 최종수정일 : 2025.10.02
******************************************************** */

/* 포인트컬러 변수지정 */
:root{
    --white-color:#ffffff;

    --lred-color:#ec372c;
    --lred-active-color:#de0d00;

    --red-color:#FF0000;
    --scarlet-color:#F24A00;

    --darkblue-color: #2A54AB; /* 메인블루컬러 */
    --darkblue-active-color: #123580; /* 메인블루컬러 */

    --grayblue20-color:#F1F3F6; /* 버튼 배경색*/
    --grayblue30-color:#E8F1FF; /* 좌측 메뉴 배경색 */

    --grayblue40-color:#B9BCBE; /* 라인버튼 라인색 */
    --grayblue40-active-color:#9ba0a3; /* 라인버튼 라인색 */

    --grayblue60-color:#808CAA; /* 그리드 tr배경색 */

    --cream-color: #FFF6C0; /* 분할,변경 버튼 배경색 */

    --lgray10-color:#f7f7f7;
    --lgray20-color:#f2f2f2;
    --lgray21-color:#f1f1f1;

    --gray10-color:#f0f0f0;
    --gray20-color:#eeeeee;
    --gray30-color:#dddddd;
    --gray40-color:#cccccc;
    --gray45-color:#BABABA; /* 그리드 tr라인색*/
    --gray50-color:#888888;
    --gray60-color:#666666;
    --gray70-color:#555555;
    --gray80-color:#333333;
    --gray90-color:#222222;
    --black-color:#000000;

    --font-size-mini: 10px;
    --font-size-xsmall: 12px;
    --font-size-small: 14px;
    --font-size-default: 16px;

    --font-weight-regular : 400;
    --font-weight-medium : 500;
    --font-weight-semibold : 600;
    --font-weight-bold : 700;
}

.fc-white{color: var(--white-color) !important;}
.fc-gray50{color: var(--gray50-color) !important;}
.fc-gray70{color: var(--gray70-color) !important;}
.fc-gray80{color: var(--gray80-color) !important;}
.fc-gray90{color: var(--gray90-color) !important;}
.fc-darkblue{color: var(--darkblue-color) !important;}
.fc-lred{color: var(--lred-color) !important;}
.fc-red{color: var(--red-color) !important;}
.fc-black{color: var(--black-color) !important;}

/* font-size */
.font10{font-size: var(--font-size-mini);}
.font12{font-size: var(--font-size-xsmall);}
.font14{font-size: var(--font-size-small);}
.font16{font-size: var(--font-size-default);}
.font18{font-size:18px;}
.font20{font-size:20px;}
.font22{font-size:22px;}

/*
.font11{font-size:11px !important;}
.font13{font-size:13px !important;}
.font15{font-size:15px !important;}
.font17{font-size:17px !important;}
.font18{font-size:18px !important;}
.font20{font-size:20px !important;}
.font22{font-size:22px !important;}
.font24{font-size:24px !important;}
.font34{font-size:34px !important;}*/

/* 폰트weight*/
.fw-normal{font-weight:normal;}
/*.fw-400{font-weight:400;}*/
.bold{font-weight:700;}
/*.bold-noto{font-weight:bold;}*/

/* font weight 조절*/
.wt400 {font-weight: var(--font-weight-regular);}
.wt500 {font-weight: var(--font-weight-medium);}
.wt600 {font-weight: var(--font-weight-semibold);}
.wt700 {font-weight: var(--font-weight-bold);}


/* 정렬관련 */
.fl {float:left;}
.fr {float:right;}

.al{text-align:left !important;}
.ac{text-align:center !important;}
.ar{text-align:right !important;}

.vt {vertical-align:top !important;}
.vm {vertical-align:middle !important;}
.vb {vertical-align:bottom !important;}

.cm-cb { clear:both;}
.cm-cf { clear:both; height:1px; }
.cm-pr { position:relative;}
.cm-pa { position:absolute;}


/* 마진 패딩 */
.mg-0auto{margin:0 auto !important;}
.mt-minus1{margin-top:-1.1px !important;}
.mt0{margin-top:0 !important;}
.mt3{margin-top:3px !important;}
.mt4{margin-top:4px !important;}
.mt5{margin-top:5px !important;}
.mt8{margin-top:8px !important;}
.mt10{margin-top:10px !important;}
.mt12{margin-top:12px !important;}
.mt16{margin-top:16px !important;}
.mt24{margin-top:24px !important;}
.mt32{margin-top:32px !important;}
.mt36{margin-top:36px !important;}
.mt40{margin-top:40px !important;}
.mt42{margin-top:42px !important;}

.ml0{margin-left:0 !important;}
.ml2{margin-left:2px !important;}
.ml4{margin-left:4px !important;}
.ml5{margin-left:5px !important;}
.ml8{margin-left:8px !important;}
.ml16{margin-left:16px !important;}
.ml20{margin-left:20px !important;}
.ml30{margin-left:30px !important;}
.ml40{margin-left:40px !important;}

.mr0{margin-right:0 !important;}
.mr2{margin-right:2px !important;}
.mr4{margin-right:4px !important;}
.mr5{margin-right:5px !important;}
.mr8{margin-right:8px !important;}
.mr10{margin-right:10px !important;}
.mr16{margin-right:16px !important;}
.mr20{margin-right:20px !important;}

.mb0{margin-bottom:0 !important;}
.mb3{margin-bottom:3px !important;}
.mb4{margin-bottom:4px !important;}
.mb5{margin-bottom:5px !important;}
.mb8{margin-bottom:8px !important;}
.mb10{margin-bottom:10px !important;}
.mb12{margin-bottom:12px !important;}
.mb16{margin-bottom:16px !important;}
.mb20{margin-bottom:20px !important;}
.mb24{margin-bottom:24px !important;}
.mb36{margin-bottom:36px !important;}

.pt-tab{padding-top:79px !important;}

.pt16{padding-top:16px !important;}
.pt43{padding-top:43px !important;}

.pb16{padding-bottom:16px !important;}
.pb36{padding-bottom:36px !important;}
.pb100{padding-bottom:100px !important;}

.pl16{padding-left:16px !important;}

.pr14{padding-right:14px !important;}

.pd-top-none{padding-top:0 !important;}
.pd-bottom-none{padding-bottom:0 !important;}
.pd-right-none{padding-right:0 !important;}
.pd-left-none{padding-left:0 !important;}

/* block */
.block {display:block !important;}
.in-block {display:inline-block;}

/* 아이콘사이즈 */
.icon24{width:24px; height:24px;}
.icon16{width:16px; height:16px;}

.ico-f18{font-size: var(--font-size-small);}

/* widthpx
.m-w70px{min-width:70px !important;}
.w60px{width:60px !important;}
.w70px{width:70px !important;}
.w80px{width:80px !important;}
.w100px{width:100px !important;}
.w117px{width:117px !important;}
.w123px{width:123px !important;}
.w150px{width:150px !important;}
.w160px{width:160px !important;}
.w176px{width:176px !important;}
.w210px{width:210px !important;}
.w214px{width:214px !important;}
.w216px{width:216px !important;}
.w218px{width:218px !important;}
.w240px{width:240px !important;}
.w250px{width:250px !important;}
.w260px{width:260px !important;}
.w283px{width:283px !important;}
.w300px{width:300px !important;}
.w340px{width:340px !important;}
.w396px{width:396px !important;}*/

.w60px{width:60px !important;}

.h24{height:24px !important}
.h28{height:28px !important}
.h38{height:38px !important}
.h90{height:90px !important}


/* text decoration*/
.underline{ text-decoration:underline}
.btn-cursor{ cursor:pointer;}


/********** 체크박스 공통 스타일***********/
.cm-checkbox {display:inline-block; vertical-align:middle; line-height:1;}
.cm-checkbox *{line-height:1}
.cm-checkbox input[type="checkbox"] {width:16px;height:16px; overflow:hidden; margin:0 0 0 0; border:1px solid #aaa; background:#fff; border-radius:2px; box-sizing:border-box; -webkit-appearance:none; -moz-appearance: none;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
.cm-checkbox input[type="checkbox"]:hover{border-color:#333; }
.cm-checkbox input[type="checkbox"]:checked:before{content:"\e929"; font-family:xeicon; font-size:18px; position:absolute; top:-3px; left:-2px; width:16px; height:16px;}
.cm-checkbox input[type="checkbox"]:checked { position:relative;color:#fff; border-color:var(--darkblue-color); background:var(--darkblue-color);
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.cm-checkbox input[type="checkbox"]:checked:hover,
.cm-checkbox input[type="checkbox"]:checked:focus {color:#fff; background:var(--darkblue-color);}
.cm-checkbox input[type="checkbox"]:disabled  { border-color:#d8d8d8; background:#eee; border-radius:2px; box-sizing:border-box;}
.cm-checkbox input[type="checkbox"]:checked:disabled {color:#e9e9e9 !important; border-color:#d0d0d0 !important; background:#d0d0d0 !important; border-radius:2px; box-sizing:border-box;}

.cm-checkbox input[type="checkbox"]:checked + label {color:var(--darkblue-color);}
.cm-checkbox input[type="checkbox"]:disabled + label {color:#b3b3b3;}
.cm-checkbox label{color:#222; font-size:14px; vertical-align:middle;}
/* checkbox label 간격 */
.cm-checkbox input[type="checkbox"] + label{margin-left:4px; }
.cm-checkbox label + input[type="checkbox"]{margin-left:2px;}
.cm-checkbox .checkbox-item input[type="checkbox"] + label{margin-right:8px;}
/* 단독사용 :: 테이블 td에 사용될 경우 우측 패딩값 마진값 조절*/
.label-none-ck input[type="checkbox"] + label{margin-left:0 !important;}
.label-none-ck label + input[type="checkbox"]{margin-left:0 !important;}

/* 1개이상일때 마진20
.cm-checkbox.lavel-mr20 label{margin-right:20px;}
.cm-checkbox.lavel-mr10 label{margin-right:10px;}
.cm-checkbox.mr20 label{margin-right:20px;}
.cm-checkbox.w-fixed25{width: calc(25% - 16px);} */

/********** 라디오박스 공통 스타일**********/
.cm-radiobox{display:inline-block; vertical-align:middle; line-height:1;}
.cm-radiobox *{line-height:1}
.cm-radiobox:after{content:""; clear:both; display:block;}
.cm-radiobox:last-child{margin-left:0;}
.cm-radiobox input[type="radio"]{display:none;}
.cm-radiobox label{ float:left; display:inline-block; height:16px; line-height:16px; position:relative; padding-left:20px; margin-right:5px; color:#222; font-size:14px; }
.cm-radiobox label::before{content:""; position:absolute; top:0; left:0px; width:16px; height:16px; border:1px solid #777; background-color:#fff; -webkit-border-radius:16px; border-radius:16px;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;}
.cm-radiobox input[type="radio"]:hover + label::before,
.cm-radiobox input[type="radio"]:focus + label::before{border-color:#333;}
.cm-radiobox input[type="radio"]:checked + label::before{border-color:var(--darkblue-color); border:4px solid var(--darkblue-color); transform: scale(1.1);
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;}
.cm-radiobox input[type="radio"]:checked + label::after{display:block;}
.cm-radiobox input[type="radio"]:disabled + label{color: #b7b7b7;}
.cm-radiobox input[type="radio"]:disabled + label::before{border-color: #ccc;}
.cm-radiobox input[type="radio"]:checked:disabled + label{color: #b7b7b7;}
.cm-radiobox input[type="radio"]:checked:disabled + label::before{border-color: #b7b7b7;}
.cm-radiobox input[type="radio"]:checked:disabled + label::after{background:#b7b7b7;}

.cm-radiobox input[type="radio"]:checked + label {color:var(--darkblue-color);}
.cm-radiobox input[type="radio"]:disabled + label {color:#b3b3b3;}
/* 단독사용 :: 테이블 td에 사용될 경우 우측 패딩값 마진값 조절*/
.label-none-rd input[type="radio"] + label{padding-left: 16px !important; margin-right: 0 !important;}

.cm-radiobox.mr20 label{margin-right:20px;}

/*
.cm-radiobox.w-fixed33{width: calc(33% - 16px);}
*/


/******** button style*********/
button{position: relative; display:inline-block; text-align:center; font-weight: var(--font-weight-regular); vertical-align:middle; border-radius:8px; box-sizing:border-box; transition: all 0.3s ease;}
button:hover{/*-webkit-box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.082); box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.08);*/}

.radius5{border-radius:5px !important;} /* 보더 라운드 조절*/

.btn-fill01{background: var(--darkblue-color); border:1px solid var(--darkblue-color); color: var(--white-color);}
.btn-fill01:hover,
.btn-fill01:focus{background: var(--darkblue-active-color); border:1px solid var(--darkblue-active-color);}

.btn-fill02{background: var(--grayblue20-color); border:1px solid var(--grayblue20-color); color: var(--darkblue-color);}
.btn-fill02:hover,
.btn-fill02:focus{background: #E4E9F1; border:1px solid #E4E9F1;}

.btn-fill03{background: var(--grayblue40-color); border:1px solid var(--grayblue40-color); color: var(--white-color);}
.btn-fill03:hover,
.btn-fill03:focus{background: var(--grayblue40-active-color); border:1px solid var(--grayblue40-active-color);}

.btn-fill04{background: var(--lred-color); border:1px solid var(--lred-color); color: var(--white-color);}
.btn-fill04:hover,
.btn-fill04:focus{background: var(--lred-active-color); border:1px solid var(--lred-active-color);}

.btn-fill06{background: var(--cream-color); border:1px solid var(--cream-color); color: var(--scarlet-color);}
.btn-fill06:hover,
.btn-fill06:focus{background: #E4E9F1; border:1px solid #E4E9F1;}


.btn-outline01{background: var(--white-color); border:1px solid var(--darkblue-color); color: var(--darkblue-color);}
.btn-outline01:hover,
.btn-outline01:focus{border:1px solid var(--darkblue-active-color); color: var(--darkblue-active-color);}

.btn-outline02{background: var(--white-color); border:1px solid var(--grayblue40-color); color: var(--gray80-color);}
.btn-outline02:hover,
.btn-outline02:focus{border:1px solid var(--darkblue-color); color: var(--darkblue-color);}

.btn-outline03{background: var(--white-color); border:1px solid var(--gray30-color); color: var(--gray60-color);}
.btn-outline03:hover,
.btn-outline03:focus{border:1px solid var(--gray45-color); color: var(--gray80-color);}

.btn-outline04{background: var(--white-color); border:1px solid var(--lred-color); color: var(--lred-color);}
.btn-outline04:hover,
.btn-outline04:focus{border:1px solid var(--lred-active-color); color: var(--lred-active-color);}

.btn-txt01{background: none; border:none; color: var(--darkblue-color);}
.btn-txt01:hover,
.btn-txt01:focus{background: var(--grayblue30-color); -webkit-box-shadow:none; box-shadow:none;}

.btn-txt02{background: none; border:none; color: var(--black-color);}
.btn-txt02:hover,
.btn-txt02:focus{background: var(--gray20-color); -webkit-box-shadow:none; box-shadow:none;}

.btn-txt03{background: none; border:none; color: var(--gray50-color);}
.btn-txt03:hover,
.btn-txt03:focus{background: var(--gray10-color); -webkit-box-shadow:none; box-shadow:none;}

.btn-txt04{background: none; border:none; color: var(--lred-color);}
.btn-txt04:hover,
.btn-txt04:focus{background: #fff0ee;-webkit-box-shadow:none; box-shadow:none;}

button.btn-disabled{background: var(--lgray21-color); border:1px solid var(--lgray21-color) ; color: var(--gray45-color); }
button:disabled{/*opacity:0.9;*/ cursor: default; color: var(--gray45-color) !important; background: var(--lgray21-color) !important; border:1px solid var(--lgray21-color) !important; pointer-events: none;}

/* 버튼 사이즈 */
.btn-xl{height:52px; font-size: var(--font-size-default) !important; padding:0px 12px;}
.btn-l{height:52px; font-size:var(--font-size-default) !important; padding:0px 12px;}
.btn-m{height:46px; font-size:var(--font-size-default) !important; padding:0px 11px;}
.btn-s{height:36px; font-size:var(--font-size-small) !important; padding:0px 10px;}
.btn-xs{height:26px; font-size:var(--font-size-xsmall) !important; padding:0px 8px; /*border-radius:4px;*/}
.btn-mini{height:20px; font-size:var(--font-size-mini) !important; padding:0px 8px; border-radius:4px;}

/* 버튼+아이콘 설정*/
.btn-xl > i{display:inline-block; font-family: xeicon; font-size: var(--font-size-default); vertical-align:middle; margin-top:-2.2px; margin-right:4px;}
.btn-l > i{display:inline-block; font-family: xeicon; font-size: var(--font-size-default); vertical-align:middle; margin-top:-2.2px; margin-right:4px;}
.btn-m > i{display:inline-block; font-family: xeicon; font-size: var(--font-size-default); vertical-align:middle; margin-top:-1.6px; margin-right:4px;}
.btn-s > i{display:inline-block; font-family: xeicon; font-size: var(--font-size-small); vertical-align:middle; margin-top:-2px; margin-right:3px;}
.btn-xs > i,
.btn-mini > i{display:inline-block; font-family: xeicon; font-size: var(--font-size-small); vertical-align:middle; margin-top:-1px; margin-right:2px;}


/* 버튼 underline */
.btn-uline{text-decoration: underline !important; cursor:pointer;}
.btn-uline:link{text-decoration: underline !important;}
.btn-uline:visited{text-decoration: underline !important;}
.btn-uline:hover{text-decoration: underline !important;}
.btn-uline:active{text-decoration: underline !important;}
.btn-uline:focus{text-decoration: underline !important;}

/* input 글자색 */
.input-text-scarlet{color: var(--scarlet-color) !important;}