@charset "utf-8";

/* Reset */
 * {outline:0 !important; box-sizing: border-box;}
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,
dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption {margin:0;padding:0;}
html, body{width:100%;height:100%;}
html{width:100%; height: 100%; -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);font-size:62.5%;}
body{width:100%; height: 100%; background:#fff; min-width:320px; -webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-all;}
body,input,select,textarea,button {border:none;font-size:1.4rem; font-family:'Pretendard', sans-serif;color:#000000;}
ul,ol,li{list-style:none;}
table{width:100%;border-spacing:0;border-collapse:collapse;}
img,fieldset{border:0;}
img{max-width:100%;max-height:100%;}
address,cite,code,em{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button{vertical-align:middle;}
label{cursor: pointer; font-size:1.4rem;}
.hidden,caption,legend{overflow: hidden; position: absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px);}
hr{display:none;}
main,header,section,nav,footer,aside,article,figure{display:block;}
a{color:#000;text-decoration:none;}
button{background:transparent;cursor:pointer;}
form{all: unset;}
 
/* Form */
textarea { border:1px solid #dbdbdb;}
select { height:30px; font-size:1.4rem; color:#373737; border:1px solid #898989; background:#fff;border-radius: 5px;}
input[type=tel],
input[type=time],
input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=file],
input[type=url],
input[type=number],
input[type=date],
input[type=datetime-local],
textarea {width:100%; height:4.2rem; font-size:1.4rem; color:#000000; border:1px solid #898989; background:#fff; vertical-align:middle;padding:0 2rem;border-radius: 0.6rem;}
input::-webkit-input-placeholder{color:#b5b5b5; font-size:1.4rem; line-height:100%;}
textarea { padding:5px 0;}
select:focus,
textarea:focus,
input:focus { border: 1px solid #727272;}

input[type=tel][readonly],
input[type=text][readonly],
input[type=password][readonly],
input[type=email][readonly], 
input[type=search][readonly], 
input[type=tel][disabled],
input[type=text][disabled],
input[type=password][disabled],
input[type=search][disabled],
input[type=email][disabled],
input[type=datetime-local][disabled]{background:#f9f9f9; border-color:#ddd; color:#555; -webkit-appearance:none;font-size:1.4rem;}
textarea[readonly],
textarea[disabled]{padding:11px; font-size:1.4rem; color:#666; font-weight:normal; line-height:140%; height:78px; background:#f9f9f9;border:1px solid #ddd;}
iframe{max-width:100%; max-height:100%;}

button { height: 4.2rem; padding: 0 2rem; border-radius: 1rem; font-size: 1.6rem; }
.btn-wrap{display: flex; gap: 1rem; width: 100%; justify-content: center;}
.btn {display:flex; font-weight: 700; background-color: #ea002c; color: #ffffff; min-width: 7.2rem; height: 4.2rem; padding: 0 1rem; border-radius: 0.6rem; font-size: 1.6rem; justify-content: center; align-items: center;}
.btn.line {background-color: #ffffff; color: #ea002c; border: solid 0.1rem #ea002c;}

@media screen and (max-width: 1024px) {
	.btn-wrap .btn {width: 100%; max-width: calc(50% - 0.5rem); }
}

input[type=checkbox], input[type=radio] {width: 2rem; height: 2rem;}
.label-group {display: flex; gap: 1rem; align-items: center;}

select {height:4.2rem; font-size:1.6rem; color:#000000; border:1px solid #898989; background:#fff; vertical-align:middle;padding:0 4rem 0 2rem;border-radius: 0.6rem;appearance:none;background-image: url('../images/com/sooinc/www/common/select_arrow.png'); background-repeat: no-repeat; background-position: calc(100% - 1rem) center; background-size: 1rem auto; cursor: pointer;}

/* 팝업 */
.pop-wrap {display: flex; flex-direction: column; position: fixed; top: 50%; left: 50%; width: 90%; max-height: 90%; max-width: 50rem; background-color: #fff; border-radius: 1rem; z-index: 100; transform: translate(-50%, -50%);}
.pop-wrap .pop-header {display: flex; justify-content: space-between; align-items: center; padding: 2rem 3rem;}
.pop-wrap .pop-header span {font-size: 1.8rem; font-weight: 700;}
.pop-wrap .pop-header .close-pop {width: 2.5rem; height: 2.5rem; padding: 0; background-image: url('../images/com/sooinc/www/common/icon_close.png'); background-position: center center; background-repeat: no-repeat; background-size: cover;}
.pop-wrap .pop-content {display: flex; padding: 0 3rem; max-height: 100%; overflow-y: auto;}
.pop-wrap .pop-footer {display: flex; justify-content: center; align-items: center; padding: 2rem 3rem; gap: 2rem; flex-wrap: wrap;}
.pop-wrap .pop-footer .btn {display: flex; width: 100%; max-width: calc(50% - 1rem);}
.pop-overlay {display: none; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 99;}

/* 탭 */
.tab-wrap {display: flex; flex-direction: column; width: 100%;}
.tab-wrap .tab-content {display: none; flex-direction: column; gap: 1.5rem;}
.tab-wrap .tab-content.active {display: flex;}
.tab-wrap .tabs { margin-bottom: 1.5rem; display: flex;}
.tab-wrap .tabs button { width: 100%; max-width: 50%; border-bottom: solid 0.1rem #898989;border-radius: 1rem 1rem 0 0; font-weight: 700; word-break: keep-all; color: #898989;}
.tab-wrap .tabs button.active {border: solid 0.1rem #898989; border-bottom: none;  color: #000000;}

/* 테이블 */
.grid-table {border-top: solid 0.1rem #333333; border-bottom: solid 0.1rem #333333;}
.grid-table .grid-tr {border-top: solid 0.1rem #cccccc;}
.grid-table .grid-tr div{ padding: 1.5rem; }
.grid-table .grid-thead .grid-tr div {font-size: 1.6rem; text-align: center; color: #555555; font-weight: 600;}
.grid-table .grid-tbody .grid-tr div {font-size: 1.5rem;}
.grid-table .grid-tbody .grid-tr div:not(.article-title) {text-align: center;}
.grid-table .grid-thead .grid-tr, .grid-table .grid-tbody .grid-tr {display: grid;}

.board-wrap {display: flex; flex-direction: column; gap: 1.5rem; margin-top: 5rem; width: 100%;}
.board-wrap .board-top {display: flex; justify-content: space-between; align-items: flex-end;}
.board-wrap .board-top .board-group {display: flex; gap: 1rem;}
.board-wrap .board-top .board-count {font-size: 1.6rem;}
.board-wrap .board-top .board-count b {color: #ea002c;}
.board-wrap .board-bottom {display: grid; grid-template-columns: 1fr 1fr 1fr;}
.board-wrap .board-bottom .btn {grid-column: 4/4;}
.board-wrap .board-bottom .pagination-wrap {grid-column: 2/3; justify-content: center;}

@media screen and (max-width: 1024px) {
	.grid-table .grid-thead {display: none;}
	.grid-table .grid-tbody .grid-tr div:not(.article-title) {text-align: left;}
	.board-wrap .board-top {flex-direction: column-reverse; gap: 2rem; align-items: flex-start;}
	.board-wrap .board-top .board-group {flex-wrap: wrap; width: 100%;}
	.board-wrap .board-top .board-group select {width: 100%;}
	.board-wrap .board-top .board-group .btn {width: 5rem;}
	.board-wrap .board-top .board-group input {width: calc(100% - 8.2rem);}
	.board-wrap .board-bottom .btn {grid-column: 1/4; margin-top: 2rem;}
	.board-wrap .board-bottom .pagination-wrap {grid-column: 1/4; justify-content: center;}
}

/* 페이징 */
.pagination-wrap { display: flex; gap: 1rem; align-items: center;}
.pagination-wrap a{display: flex; width: 3.5rem; height: 3.5rem; border-radius: 0.6rem; border: solid 0.1rem #e9e9e9; justify-content: center; align-items: center; cursor: pointer;}
.pagination-wrap a.on {background-color: #ea002c; color: #ffffff; border-color: #ea002c;}
.pagination-wrap a.btn-next {background-image: url('../images/com/sooinc/www/common/next.png'); background-position: center center; background-repeat: no-repeat; background-size: 1.5rem;}
.pagination-wrap a.btn-prev {background-image: url('../images/com/sooinc/www/common/prev.png'); background-position: center center; background-repeat: no-repeat; background-size: 1.5rem;}