@charset "utf-8";

.wrap-dorm .noti {display: flex; padding: 4rem; background: #fff; border: 10px solid #f1f6fa; font-size: 2.8rem;}
.wrap-dorm .noti .ico {flex-shrink: 0; width: 15rem; padding-right: 4.5rem;}
.wrap-dorm .noti .text {flex-grow: 1; padding-top: 1.5rem;}

.wrap-dorm .white-box {border: 1px solid #e1e1e1; border-radius: .5rem;}
.wrap-dorm .white-box .inner-white-box {padding: 5rem;}
.wrap-dorm .box-agree {display: flex; justify-content: center; align-items: center; height: 10rem; background: #f7f7f7;}

@media screen and (max-width: 805px) {
	.wrap-dorm .noti {flex-wrap: wrap; padding: 3rem;}
	.wrap-dorm .noti .ico {width: 100%; display: flex; justify-content: center;}
	.wrap-dorm .noti .text {padding-top: 3rem;}
}

/* 테이블 */
.dorm-table {position: relative; line-height: 1.6;}
.dorm-table:after {content: ''; position: absolute; right: 0px; top: 0px; width: 1px; height: 100%; background: #fff;}
.dorm-table table {position: relative;}
.dorm-table table::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: #000000;}
.dorm-table table.align-c td {text-align: center;}
.dorm-table thead {position: relative;}
.dorm-table thead::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #000000;}
.dorm-table thead th {padding: 1.35rem 1rem; background: #f1f1f1; border-bottom: 1px solid #dddee0; font-weight: normal; font-family: pb; font-size: 1.6rem; color: #000000;}
.dorm-table tbody {display: table-header-group;}
.dorm-table tbody::after {content:''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #8a8a8a;}
.dorm-table tbody th {padding: 1.2rem 2rem; background:#f1f6fa; border-bottom: 1px solid #c5c5c5; font-family: pm; font-weight: 400; font-size: 1.7rem; color: #000000;}
.dorm-table tbody td {padding: 1.2rem 2rem; background:#fff; border-bottom: 1px solid #c5c5c5; font-family: pm; font-size: 1.5rem; text-align: left; color: #666666; line-height: 1.6;}
.dorm-table tbody td .yes,
.dorm-table tbody td .no {display: flex; justify-content: center; align-items: center;}
.dorm-table tbody td .yes {color: #00baff;}
.dorm-table tbody td .no {color: #302a6c;}
.dorm-table tbody td .yes::before,
.dorm-table tbody td .no::before {content: ''; width: 1rem; height: 1rem; margin-right: 1rem; border-radius: 100%;}
.dorm-table tbody td .yes::before {background: #00baff;}
.dorm-table tbody td .no::before {background: #302a6c;}
.dorm-table tbody td.title {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.dorm-table tbody td.title a {font-size: 1.6rem; color: #121212;}
.dorm-table tbody td.title a span {position: relative;}
.dorm-table tbody td.title a span::after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #000; transition: width .35s;}
.dorm-table tbody td.title a:hover span::after {width: 100%;}
.dorm-table.center tbody td {text-align: center;}
.dorm-table .align-l {text-align: left !important;}
.dorm-table .align-c {text-align: center !important;}
.dorm-table .align-r {text-align: right !important;}
.dorm-table .align-t {vertical-align: top !important;}
.dorm-table .state {display: inline-flex; align-items: center; height: 3rem; padding: 0 1rem; background: #fff; border: 1px solid #0d5dbe; border-radius: .5rem; font-family: pm; font-size: 1.4rem; color: #0d5dbe;}
.dorm-table .state.color1 {border: 1px solid #00baff; color: #00baff;}
.dorm-table .state.color1:hover {border: 1px solid #0d5dbe; color: #0d5dbe;}
.dorm-table .state.color2 {border: 1px solid #ff8400; color: #ff8400;}
.dorm-table .state.color2:hover {border: 1px solid  #934c00; color: #934c00;}
.dorm-table .state.color3 {border: 1px solid #9f9f9f; color: #9f9f9f;}
.dorm-table .state.color3:hover {border: 1px solid  #616161; color: #616161;}
.dorm-table .state.color4 {border: 1px solid #39329c; color: #39329c;}
.dorm-table .state.color4:hover {border: 1px solid  #302a6c; color: #302a6c;}

@media screen and (max-width: 1120px){
	.dorm-table  {overflow-x: hidden; min-height: 21rem;}
	.dorm-table.on {min-height: auto;}
	.dorm-table table {width: 130rem;}
	.dorm-table:after {content: ''; position: absolute; right: 0px; top: 0px; z-index: 1; width: 100%; height: 100%; background: rgba(31,59,101,0.1) url('../images/img_mobile_text.png') no-repeat center 2rem;}
	.dorm-table.on:after {display: none;}
}

/* 입력폼 */
.must-text {display: flex; justify-content: flex-end; font-family: pm; font-size: 1.6rem; color: #155fbb;}
.apply-form {display: flex; flex-wrap: wrap; border-top: 2px solid #2c2c2c;}
.apply-form .row {display: flex; justify-content: flex-start; align-items: flex-start; width: 100%;}
.apply-form .row .title {display: flex; align-items: flex-start; flex-shrink: 0; width: 24rem; height: 100%; min-height: 7rem; padding: 2rem 0 2rem 3rem; background: #f5f7f9; border-bottom: 1px solid #e1e1e1; font-family: pm; font-size: 1.8rem; color: #050505;}
.apply-form .row .title.deco {border-right: 1px solid #e1e1e1;}
.apply-form .row .title .must {display: flex; position: relative; left: 1rem; top: .4rem; width: .8rem; height: .9rem; background: url('../images/ic-must.png') no-repeat center / cover; text-indent: -9999rem;}
.apply-form .row .insert {display: flex; height: 100%; align-items: center; flex-grow: 1; padding: 1.5rem 3rem; min-height: 7rem; border-bottom: 1px solid #e1e1e1; font-family: pr; font-size: 1.6rem; color: #666666;}
.apply-form .row .insert.deco {border-right: 1px solid #e1e1e1;}
.apply-form .row .insert.deco:last-child {border-right: 0;}
.apply-form .row .insert .wrap {flex-wrap: wrap;}
.apply-form .row .insert .vertical {display: flex; flex-direction: column; align-items: flex-start; width: 100%;}
.apply-form .row .insert .vertical > div {width: 100%;}
.apply-form .row .insert .horizon {display: flex; align-items: center; width: 100%;}
.apply-form .row .insert #EDITOR_AREA_CONTAINER {width: 100%;}
.apply-form .row .insert input[type="text"] {width: 100%; height: 4rem; padding: 0 2rem; border: 1px solid #cccccc; border-radius: .5rem; font-family: pr; font-size: 1.5rem; color: #666666;}
.apply-form .row .insert input[type="text"].date {background: url('../images/ic-date.png') no-repeat calc(100% - 1.7rem) center;}
.apply-form .row .insert input[type="text"]:focus {background-color: #eff4f7; border-color: #8497b2; transition: .35s;}
.apply-form .row .insert .line {display: flex; justify-content: flex-start; align-items: center;}
.apply-form .row .insert select {display: flex; height: 4.5rem; padding-left: 1.5rem; padding-right: 6.5rem; background: url('../images/ic-search-arrow.png') no-repeat calc(100% - 1.5rem) center; border: 1px solid #d1d1d1; border-radius: .5rem; font-family: pm; font-size: 1.6rem; color: #333; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.apply-form .row .insert select:focus {background-color: #eff4f7; border-color: #8497b2; transition: .35s;}
.apply-form .row .insert textarea {width: 100%; min-height: 16rem; padding: 2rem; border: 1px solid #cccccc; border-radius: .5rem; font-family: pr; font-size: 1.5rem; color: #666666;}
.apply-form .row .insert textarea:focus {background-color: #eff4f7; border-color: #8497b2; transition: .35s;}
.apply-form .row .insert .multselBox {width: 100%; padding: 1rem; border: 1px solid #d1d1d1; border-radius: .5rem; font-family: pm; font-size: 1.6rem; color: #333;}
.apply-form .row .insert .multselBox:focus {background-color: #eff4f7; border-color: #8497b2; transition: .35s;}
.apply-form .row .insert .attach {display: flex; align-items: center; margin-top: 1rem;}
.apply-form .row .insert .attach .add {margin-right: 1rem;}
.apply-form .row .insert .attach input {display: flex; height: 3rem; padding: 0 1rem; background: #fff; border: 1px solid #0d5dbe; border-radius: .5rem; font-family: pm; font-size: 1.4rem; color: #0d5dbe;}
.apply-form .row .insert .attach input:hover {background: #0d5dbe; color: #fff;}
.apply-form .row .insert .higp {margin: 0 1rem;}
.apply-form .row .max100 {max-width: 10rem;}
.apply-form .row .max200 {max-width: 20rem;}
.apply-form .row .max250 {max-width: 25rem;}
.apply-form .row .max400 {max-width: 40rem;}

@media screen and (max-width: 1420px) {
	.apply-form.cols .row .title {width: 14rem;}
}

@media screen and (max-width: 1024px) {
	.apply-form.cols .row {flex-wrap: wrap;}
	.apply-form.cols .row .title {width: 100%; height: auto; min-height: auto; padding: 1.5rem 2rem;}
	.apply-form.cols .row .insert {min-height: auto; padding: 1.5rem 2rem;}
	.apply-form .row .title.deco {border-right: 0;}
	.apply-form .row .insert.deco {border-right: 0;}
}
@media screen and (max-width: 1220px) {
	.apply-form .row .line {justify-content: space-between; width: 100%; margin-bottom: 1rem;}
}

@media screen and (max-width: 830px) {
	.apply-form .row {flex-wrap: wrap;}
	.apply-form .row .title {width: 100%; height: auto; min-height: auto; padding: 1.5rem 2rem;}
	.apply-form .row .insert {min-height: auto; padding: 1.5rem 2rem;}
	.apply-form .row .insert .higp {margin: 0 .5rem;}
}

/* 커스텀 체크박스 */
.cm-check {position: relative;}
.cm-check input {position: absolute; opacity: 0;}
.cm-check span {display: inline-block; position: relative; font-family: pm; font-size: 1.6rem; color: #333333; letter-spacing: 0;}
.cm-check span::before {content: ""; position: absolute;}

.cm-check.style1 span {padding-left: 3.5rem; line-height: 3rem;}
.cm-check.style1 span::before {width: 2.5rem; height: 2.5rem; border: 1px solid #ccc; left: 0; top: .3rem; border-radius: 100%; background: #fff;}
.cm-check.style1 input:focus + span::before {border-color: #0067f0;}
.cm-check.style1 input:focus:checked + span::before {border-color: #0067f0;}
.cm-check.style1 input:checked + span::before {background: #0067f0 url("../images/ic_check_on.png") no-repeat center; border-color: #0067f0;}
.cm-check.style1 input:checked + span {color: #000;}
.cm-check.style1.read-yes input + span::before {background: #999 url("../images/ic_check_on.png") no-repeat center; border-color: #999;}
.cm-check.style1.read-no input + span::before {background: #eaeaea; border-color: #9B9B9B;}

/* 커스텀 라디오 */
.cm-radio {position: relative;}
.cm-radio input {position: absolute !important; opacity: 0;}
.cm-radio span {display: inline-block; position: relative; font-size: 15px; color: #333333; font-family: pr; letter-spacing: 0;}
.cm-radio span::before {content: ""; position: absolute;}

.cm-radio.style1 span {padding-left: 27px; line-height: 30px;}
.cm-radio.style1 span::before {width: 18px; height: 18px; border: 1px solid #c6c6c6; left: 0; top: 6px; border-radius: 100%; background: #fff;}
.cm-radio.style1 input:focus + span::before {border-color: #186DDE;}
.cm-radio.style1 input:checked + span::after {content: ''; position: absolute; left: 4px; top: 10px; width: 10px; height: 10px; background: #1473e6; border-radius: 100%;}
.cm-radio.style1 input:checked + span {color: #000;}

/* 버튼 */
.board-button .row {display: flex; justify-content: center; margin-top: 5rem;}
.btn01,.btn02,.btn03,.btn04,.btn05,.btn06 {display: flex; justify-content: center; align-items: center; min-width: 13rem; height: 5rem; margin: 0 1rem; padding: 0 1.5rem; border-radius: .5rem; font-family: pm; font-size: 1.6rem; color: #fff !important; transition: .35s;}
.btn01.small,.btn02.small,.btn03.small,.btn04.small,.btn05.small,.btn06.small {display: inline-flex; min-width: auto; height: 4rem; margin: 0; padding: 0 1.2rem; font-size: 1.4rem;}
.btn01 {background: #00baff;}
.btn01:hover {background: #0d5dbe;}
.btn02 {background: #fff; border: 1px solid #333; color: #333 !important;}
.btn02:hover {background: #000; color: #fff !important;}
.btn03 {background: #05bcd7;}
.btn03:hover {background: #006274;}
.btn04 {background: #39329c;}
.btn04:hover {background: #302a6c;}
.btn05 {background: #ff8400;}
.btn05:hover {background: #934c00;}
.btn06 {background: #9f9f9f;}
.btn06:hover {background: #616161;}