/* *****************************************************************
 * filename : common.css
 * description : 변경된 reset / ui / button / input / color / common ( 공통으로 사용되는 CSS)
***************************************************************** */

* { font-family: 'SUIT', 'Pretendard'; }
body, h1, h2, h3, h4, h5, h6 { letter-spacing: -0.5px; font-family:'SUIT', 'Pretendard'; color:#131313; }
input, button { font-family: 'Pretendard'; background: none; border: none;}
button, label {cursor:pointer;}
i, em { font-style: normal; }

/* 숨김 */
ul#skipToContent {position:absolute; z-index:10000; height:0;}
ul#skipToContent li {position:absolute; z-index:10000; top:0; left:0; width:100%;}
ul#skipToContent li a {display:block; position:absolute; z-index:10000; top:-10000px; left:0; color:#fff; font-size:0; text-align:center;}
ul#skipToContent li a:focus,ul#skipToContent li a:active {top:3px; width:150px; padding:5px 0; font-size:1em; background-color:#355da0}

/* 출력 및 정렬 */
.hidden {position:absolute; width:0; height:0; margin:0; padding:0; background:none; font-size:0; line-height:0;}/* 화면출력:N, 포커스 이동:N */
.blind,.skip {position:absolute; top:-1000px; left:-10000px; overflow:hidden; font-size:1px; text-indent:-9999px; line-height:0;}/* 화면출력:N, 포커스 이동:Y */

/* 테이블 */
.ovf_min {min-width:620px}
.ovf_min1 {min-width:900px}
.ovf_min2 {min-width:800px}
.ovf_min3 {min-width:700px}
.ovf_min4 {min-width:500px}
@media screen and (max-width:800px) {
	.ovf_wrap {overflow-x:auto; overflow-y: hidden;}	
}

/* font align */
.t_left {text-align:left !important;}
.t_center {text-align:center !important;}
.t_right {text-align:right !important;}



/* ************** 폼 요소 ************** */
/* FORM 기본요소 */
input::placeholder {color:#bbb; font-weight:300; font-size:14px; font-weight:300; }
textarea.textarea {padding:15px 18px; border:1px solid #ddd; border-radius: 4px; resize:vertical; }
textarea.textarea::placeholder { color:#bbb; font-weight:300; font-size:14px; font-weight:300; }
select.select {height: 50px;  padding: 0 26px; border-radius: 4px; border:1px solid #ddd; background:#fff url('../img/common/ico_arr_down.png') right 10px top 50% no-repeat; background-size:15px auto; -webkit-appearance: none;}
select.select::-ms-expand {display:none;}
input.text {/* max-width:100%; */height:50px; padding:0 18px;border:1px solid #ddd; border-radius: 4px; font-size:15px; }
input.num {width:60px;}
input.text:hover,
select.select:hover,
textarea.textarea:hover,
input.calender:hover,
span.format > button:hover {border:1px solid #444; outline:none}
input.text:focus,
select.select:focus,
textarea.textarea:focus,
input.calender:hover,
span.format > button:focus {border:1px solid #444 !important; outline:none; box-shadow: none; transition: all 0.20s ease-in-out; }
input:disabled, input:read-only {border-color:rgba(0, 0, 0, 0.06) !important; background:rgba(0, 0, 0, 0.04); color:#999; outline:none;}
button:disabled {opacity:0.4; cursor:default;}
table {width:100%; table-layout:fixed; border-collapse:collapse; border-spacing:0;}
input { accent-color:#666; }
input[type="file"] { font-weight:300; }


@media screen and (max-width:620px) {
	input.text { height: 46px; padding: 0 12px; font-size:13px; }
	input::placeholder { font-size:13px; }
	textarea.textarea::placeholder { font-size:13px; }
	select.select { height: 46px; font-size:13px; background-size: 11px auto; }
}

/* 체크박스, 라디오 */
.input { position:relative; display:inline-block}
.input label { cursor:pointer; }
.input:last-child { margin-right: 0; }
.checkbox, .radio { position: absolute; left: 0; top: 0; opacity: 0; }
.checkbox + label, .radio + label { padding-left:32px; }
.checkbox + label:before, .radio + label:before { position: absolute; left:0; top:0px; width:22px; height:22px;  border: 1px solid #d0d0d0; background-color:#fff; content: ''; }
.checkbox + label:after, .radio + label:after { position: absolute; left:6px; top:6px;  width:10px; height:10px; content: ''; transition: all 0.2s; }
.checkbox:checked + label:after, .radio:checked + label:after { background-color:#C11414; }
.checkbox:focus + label:before, .radio:focus + label:before { outline: 1px dotted #000; }
.checkbox.disabled + label, .radio.disabled + label { cursor:default; }
.checkbox.disabled + label:before, .radio.disabled + label:before { background-color:#f5f5f5; }
.checkbox.disabled:checked + label:before, .radio.disabled:checked + label:before { background-color:#f5f5f5 }
.checkbox.disabled:checked + label:after, .radio.disabled:checked + label:after { background-color:#bfbfbf }

.radio + label:before { border-radius:100%; }
.radio + label:after { border-radius:100%; }
.checkbox + label:after { left:5px; top:5px; display:none; width:12px; height:7px; border:2px solid #C11414; border-top:0; border-right:0; transform:rotate(-45deg); }
.checkbox:checked + label:after { display:block; background-color:transparent; }
.checkbox.disabled:checked + label:after { border-color:#bfbfbf; background-color:transparent; }

.input.btn .checkbox + label, .input.btn .radio + label { display:inline-block; width:100%; padding:9px 20px 9px 38px; border:1px solid #d9d9d9; border-radius:3px; transition:background 0.2s ease-out; }
.input.btn .checkbox + label:hover, .input.btn .radio + label:hover, .input.btn .checkbox:focus + label, .input.btn .radio:focus + label { background:#f5f5f5 }
.input.btn .checkbox + label:before, .input.btn .radio + label:before { left:12px; top:10px; }
.input.btn .checkbox + label:after { left:17px; top:16px; }
.input.btn .radio + label:after { left:18px; top:16px; }

.input.btn .checkbox.disabled + label, .input.btn .radio.disabled + label {background-color:#f9f9f9}

@media screen and (max-width:620px) {
	/* 체크박스, 라디오 */
	.checkbox + label, .radio + label { padding-left:22px; }
	.checkbox + label:before, .radio + label:before { width:18px; height:18px; }
	.radio + label:after { left:5px; top:5px; width:8px; height:8px;  }
	.checkbox + label:after { left:4px; top:4px; width:10px; height:6px; }
	
	.input.btn .checkbox + label, .input.btn .radio + label { padding:9px 20px 9px 35px; }
	.input.btn .radio + label:after { left:17px; top:15px; }
}


/* ************** 너비/여백 스타일 ************** */
/* width */
.w100 {width:100% !important;}
.w70 {width:70% !important;}
.w50 {width:50% !important;}
.w45 {width:45% !important;}
.w40 {width:40% !important;}
.w30 {width:30% !important;}
.w25 {width:25% !important;}
.w20 {width:20% !important;}
.w10 {width:10% !important;}

/* margin padding */
.mt0 {margin-top:0px !important;}
.mt3 {margin-top:3px !important;}
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt35 {margin-top:35px !important;}
.mt40 {margin-top:40px !important;}
.mt45 {margin-top:45px !important;}
.mt50 {margin-top:50px !important;}
.mt60 {margin-top:60px !important;}

.mr5 {margin-right:5px !important;}
.mr10 {margin-right:10px !important;}
.mr15 {margin-right:15px !important;}
.mr20 {margin-right:20px !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;}

.ml5 {margin-left:5px !important;}
.ml10 {margin-left:10px !important;}
.ml15 {margin-left:15px !important;}
.ml20 {margin-left:20px !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;}

.mb0 {margin-bottom:0 !important;}
.mb5 {margin-bottom:5px !important;}
.mb10 {margin-bottom:10px !important;}
.mb15 {margin-bottom:15px !important;}
.mb20 {margin-bottom:20px !important;}
.mb25 {margin-bottom:25px !important;}
.mb30 {margin-bottom:30px !important;}
.mb35 {margin-bottom:35px !important;}
.mb40 {margin-bottom:40px !important;}
.mb50 {margin-bottom:50px !important;}
.mb60 {margin-bottom:60px !important;}
.mb70 {margin-bottom:70px !important;}
.mb80 {margin-bottom:80px !important;}
.mb100 {margin-bottom:100px !important;}

.pt5 {padding-top:5px !important;}
.pt10 {padding-top:10px !important;}
.pt20 {padding-top:20px !important;}
.pt30 {padding-top:30px !important;}
.pt40 {padding-top:40px !important;}
.pt50 {padding-top:50px !important;}
.pt60 {padding-top:60px !important;}

@media screen and (max-width:620px) {
	.mt5 {margin-top:2px !important;}
	.mt10 {margin-top:5px !important;}
	.mt15 {margin-top:6px !important;}
	.mt20 {margin-top:10px !important;}
	.mt25 {margin-top:12px !important;}
	.mt30 {margin-top:15px !important;}
	.mt35 {margin-top:18px !important;}
	.mt40 {margin-top:20px !important;}
	.mt50 {margin-top:25px !important;}
	.mt60 {margin-top:30px !important;}
	.mt70 {margin-top:30px !important;}
	.mt80 {margin-top:30px !important;}

	.mb5 {margin-bottom:2px !important;}
	.mb10 {margin-bottom:5px !important;}
	.mb15 {margin-bottom:6px !important;}
	.mb20 {margin-bottom:10px !important;}
	.mb25 {margin-bottom:12px !important;}
	.mb30 {margin-bottom:15px !important;}
	.mb35 {margin-bottom:18px !important;}
	.mb40 {margin-bottom:20px !important;}
	.mb50 {margin-bottom:25px !important;}
	.mb60 {margin-bottom:30px !important;}
	.mb70 {margin-bottom:30px !important;}
	.mb80 {margin-bottom:30px !important;}
	.mb100 {margin-bottom:40px !important;}
}