@charset "utf-8";
@import url('fonts.css');
html{overflow:auto}
body{background-color:#fff;}
body, input, textarea, select, button, table {margin:0; font-size:inherit; color:#2C2C2C; font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
body, h1, h2, h3, h4, h5, dl, dt, dd, ul, li, ol, th, td, p, /*blockquote,*/ form, fieldset, legend, button { margin: 0; padding: 0; }
img, fieldset{border:0 none}
dl, ul, ol, li {list-style: none outside none;}
button{border:0 none; cursor:pointer; display: block;}
table, th, td, div{border-collapse:collapse}
a,img,input {outline:none;}
li img { vertical-align:top;}
td img { vertical-align:middle}
strong, .strong , b { font-weight: bold; }
address, caption, cite, code, dfn, em, var {font-style:normal;}

hr { clear: both; display: none; }
.blind, legend, caption {display:none !important}

a {text-decoration:none; color:#2C2C2C;}
a:hover, a:active, a:focus {text-decoration:none;}
a.underline {text-decoration:none; color:#2C2C2C;}
a.underline:hover, a.underline:active, a.underline:focus {color:#dd0000; text-decoration:underline;}
table a:link, table a:visited {color:#2C2C2C;}
table a:hover, table a:active {color:#000; text-decoration:underline;}
.underline {text-decoration:underline;}
img {max-width: 100%;}

.button{border:0 none; cursor:pointer; appearance:none; -webkit-appearance:none; border-radius:0;}
input, select, textarea {vertical-align:middle; line-height:130%; border-color:#aaa; vertical-align:middle; margin-top:-1px;}
input, textarea, select {border-width:1px; border-style: solid; border-color:#ddd; background:#fff}
select{height:33px; -webkit-border-radius:0; box-sizing:border-box; padding:0 5px;}
input.text {padding:0px 5px; box-sizing:border-box; height:33px; color:#555; width:30%; border-radius:0; -webkit-border-radius:0; appearance:none; -webkit-appearance:none;}
input.file {border:1px solid #ddd; padding:2px 6px;}
textarea.textarea {height:120px; padding:2px 0; box-sizing:border-box; border-radius:0; -webkit-border-radius:0; appearance:none; -webkit-appearance:none;}
select:disabled {background:#efefef;}
input.text:disabled {background:#efefef; color:#000; border-color:#aaa;}
input[type=submit] {vertical-align:bottom;}
input[type=submit].btn_ok {width:120px;}

/* margin */
.mgT3 {margin-top:3px !important}
.mgT5 {margin-top:5px !important}
.mgT6 {margin-top:6px !important}
.mgT8 {margin-top:8px !important}
.mgT10 {margin-top:10px !important}
.mgT13 {margin-top:13px !important}
.mgT15 {margin-top:15px !important}
.mgT20 {margin-top:20px !important}
.mgT25 {margin-top:25px !important}
.mgT30 {margin-top:30px !important}
.mgT35 {margin-top:35px !important}
.mgT40 {margin-top:40px !important}
.mgT50 {margin-top:50px !important}
.mgT60 {margin-top:60px !important}
.mgT60 {margin-top:60px !important}
.mgT75 {margin-top:75px !important}

.mgB5 {margin-bottom:5px !important}
.mgB10 {margin-bottom:10px !important}
.mgB20 {margin-bottom:20px !important}
.mgB30 {margin-bottom:30px !important}
.mgB35 {margin-bottom:35px !important}
.mgB40 {margin-bottom:40px !important}
.mgB50 {margin-bottom:50px !important}


.mgR5 {margin-right:5px !important}
.mgR10 {margin-right:10px !important}
.mgR12 {margin-right:12px !important}
.mgR14 {margin-right:14px !important}
.mgR20 {margin-right:20px !important}
.mgR23 {margin-right:23px !important}
.mgR28 {margin-right:28px !important}
.mgR30 {margin-right:30px !important}
.mgR70 {margin-right:70px !important}

.mgL0 {margin-left:0px !important}
.mgL5 {margin-left:5px !important}
.mgL10 {margin-left:10px !important}
.mgL12 {margin-left:12px !important}
.mgL15 {margin-left:15px !important}
.mgL17 {margin-left:17px !important}
.mgL20 {margin-left:20px !important}
.mgL25 {margin-left:25px !important}
.mgL30 {margin-left:30px !important}
.mgL40 {margin-left:40px !important}

/* padding */
.pd3 {padding:3px !important}
.pd10 {padding:10px !important}
.pd17 {padding:17px !important}

.pdT4 {padding-top:4px !important}
.pdT5 {padding-top:5px !important}
.pdT7 {padding-top:7px !important}
.pdT10 {padding-top:10px !important}
.pdT15 {padding-top:15px !important}
.pdT20 {padding-top:20px !important}
.pdT30 {padding-top:30px !important}
.pdT50 {padding-top:50px !important}
.pdT120{padding-top:120px !important;}

.pdB5 {padding-bottom:5px !important}
.pdB10 {padding-bottom:10px !important}
.pdB20 {padding-bottom:20px !important}
.pdB30 {padding-bottom:30px !important}
.pdB40 {padding-bottom:40px !important}
.pdB50 {padding-bottom:50px !important}

.pdL8 {padding-left:8px !important}
.pdL12 {padding-left:12px !important}
.pdL20 {padding-left:20px !important}
.pdL30{padding-left:30px !important;}
.pdL50 {padding-left:50px !important}
.pdL120{padding-left:120px !important;}
.pdL150{padding-left:150px !important;}

.pdR5 {padding-right:5px !important}
.pdR10 {padding-right:10px !important}
.pdR20 {padding-right:20px !important}

/* align */
.alignL {text-align:left !important}
.alignR {text-align:right !important}
.alignC {text-align:center !important}
.clear {clear:both !important}
.floatL {float:left !important}
.floatR {float:right !important}
img.imgT {vertical-align:top !important}
img.imgB {vertical-align:bottom !important}
img.imgC {vertical-align:middle !important}

.red {color:#b22521 !important;}
.brown {color:#b37a44 !important;}
.black {color:#222 !important;}
.blue {color:#1c57c4 !important;}
.green {color:#60c200 !important;}
.sky {color:#299fd6 !important;}

.underline {text-decoration:underline !important;}

/* 라디오, 체크박스 */
.comm_radio {position:absolute;left:-9999px}
.comm_radio_label {margin-right:10px;}
.comm_radio_label .ico_radio {display:inline-block; width:19px; height:19px; margin-top:-2px; background:url('/images/ncoop/common/icon_radio.png') no-repeat left top; overflow:hidden; font-size:0; line-height:0; vertical-align:middle}
.radio_on .ico_radio {background-position:left bottom;}

.comm_check {position:absolute;left:-9999px}
.comm_check_label .ico_check {display:inline-block; width:19px; height:19px; margin-top:-1px; background:url('/images/ncoop/common/icon_check.png') no-repeat left top; overflow:hidden; font-size:0; line-height:0; vertical-align:middle}
.check_on .ico_check {background-position:left bottom}

/* 아이콘/버튼 */
.ico_red {display:inline-block; min-width:35px; padding:0 15px; height:27px; line-height:27px; color:#fff; border-radius:2px; background:var(--main-color); text-align:center; font-size:14px;}
.btn_dgray {display:inline-block; min-width:35px; padding:0 15px; height:27px; line-height:27px; color:#fff !important; border-radius:2px; background:#666; text-align:center; font-size:14px;}
.btn_dgray:hover {background:var(--main-color); text-decoration:none;}

.btn_gray {display:inline-block; min-width:55px; padding:0 12px; background:#aeaeae; color:#fff !important; height:33px; line-height:33px; border:none; text-align:center; cursor: pointer;}
.btn_gray:hover {text-decoration:none;}
.btn_list {display:inline-block; min-width:55px; padding:0 12px; background:#666; color:#fff !important; height:33px; line-height:33px; border:none; text-align:center; cursor: pointer;}
.btn_del {display:inline-block; min-width:55px; padding:0 12px; background:#aeaeae; color:#fff !important; height:33px; line-height:33px; border:none; text-align:center; cursor: pointer;}
.btn_write {display:inline-block; min-width:55px; padding:0 12px; background: var(--main-color); color:#fff !important; height:33px; line-height:33px; border:none; text-align:center; cursor: pointer;}

.btn_ok {display:inline-block; min-width:80px; padding:0 20px; height:45px; line-height:45px; border:none; text-align:center; color:#fff !important; background:var(--main-color); font-size:18px;}
.btn_cancel {display:inline-block; min-width:80px; padding:0 20px; height:45px; line-height:45px; border:none; text-align:center; color:#fff !important; background:#666; font-size:18px;}

.ico_process1 {background:var(--main-color); min-width:40px; font-size:14px; color:#fff !important; border-radius:2px; display:inline-block; padding:0 8px; height:22px; line-height:22px; text-align:center;}
.ico_process2 {background:#666; min-width:40px; font-size:14px; color:#fff !important; border-radius:2px; display:inline-block; padding:0 8px; height:22px; line-height:22px; text-align:center;}

.btn_login {display:block; width:100%; height:47px; line-height:47px; background:var(--main-color); color:#fff !important; text-align:center; font-size:20px;}
.btn_join {display:block; width:100%; height:47px; line-height:47px; background:#666; color:#fff !important; text-align:center; font-size:20px;}

.icon_notice {display: inline-flex; padding: 5px 18px; border-radius: 25px; background: var(--main-color); font-size: 18px; font-weight: 600; color: #fff;}


/********************************************************/
/**************** 테블릿 1024px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:1024px){
body, input, textarea, select, button, table {font-size:14px;}
img {max-width:100%;}

.btn_login, .btn_join {font-size:18px;}
}


/********************************************************/
/**************** 모바일 520px 해상도 *******************/
/********************************************************/
@media only screen and (max-width:520px){

/* 라디오, 체크박스 */
.comm_radio_label .ico_radio {width:15px; height:15px; background-size:15px;}

.btn_dgray {font-size:3.4vw;}
.btn_gray {font-size:3.4vw; padding:0 2%; min-width:auto;}
.btn_ok, .btn_cancel {font-size:3.6vw; height:35px; line-height:35px; min-width:auto; padding:0 10%;}
.ico_process1, .ico_process2 {font-size:3.2vw; min-width:26px; padding:0 5px; height:18px; line-height:18px;}
.btn_login, .btn_join {font-size:4.2vw; height:35px; line-height:35px;}
.ico_red {min-width:auto; padding:0 2%; font-size:3.4vw; height:25px; line-height:25px;}

.icon_notice {padding: .25rem .5rem; font-size: .75rem;}

}