@charset "utf-8";

/* 
font-family: 'Montserrat', sans-serif;
*/


/* 리스트 */
#board .list_st1 {display: flex; flex-flow: wrap; margin-bottom: -57px;}
#board .list_st1 li {width: calc(33.333% - 40px); margin-right: 60px; box-sizing: border-box; margin-bottom: 57px;}
#board .list_st1 li:nth-child(3n) {margin-right: 0;}
#board .list_st1 li a {display: block; text-align: center; cursor: pointer;}
#board .list_st1 .img_bx {position: relative; overflow: hidden; padding-bottom: 100%;}
#board .list_st1 .img_bx div {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover!important; background-repeat: no-repeat!important; background-position: center!important; -webkit-filter: grayscale(1); filter: grayscale(1);}
#board .list_st1 .img_bx::after {content: ''; width: 100%; height: 100%; top:0; left: 0; position: absolute; background: url(../images/main/sec3_icon.png) no-repeat center; opacity: 0;}
#board .list_st1 .txt_bx {padding-top: 24px;}
#board .list_st1 .txt_bx strong {display: block; font-size: 18px; color: #000000; font-weight: 700; /*word-break: keep-all; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;*/}
#board .list_st1 .txt_bx p {font-size: 14px; color: #666666; margin-top: 12px; /*word-break: keep-all; word-break: keep-all; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;*/}

#board .no_data {width: 100%; padding: 100px 0; text-align: center; font-size: 18px; color: #e7e7e7; word-break: keep-all;}



/* 작성 */
#board .tb_st1 .tb_bx {display: flex; flex-flow: wrap; margin-bottom: 24px;}
#board .tb_st1 .tb_bx:last-child {margin-bottom: 0;}
#board .tb_st1 .tb_bx .tb_w {width: calc(50% - 20px); margin-right: 40px;}
#board .tb_st1 .tb_bx .tb_w:nth-child(2n) {margin-right: 0;}
#board .tb_st1 .tb_bx .tb_w.tb1 {width: 100%; margin-right: 0;}
#board .tb_st1 .tb_bx .tb_w.tb3 {display: flex; flex-flow: wrap;}
#board .tb_st1 .tb_bx .tb_w.tb3 > div {width: calc(33.333% - 13.333px); margin-right: 20px;}
#board .tb_st1 .tb_bx .tb_w.tb3 > div:nth-child(3n) {margin-right: 0;}
#board .tb_st1 .ttl {display: block; font-size: 16px; color: #ffffff; font-weight: 700;}
#board .tb_st1 .ttl em {font-size: 0; font-style: normal;}
#board .tb_st1 .ttl em::after {content: '*'; font-size: 16px; color: #ffffff; font-weight: 700; padding-left: 5px;} 
#board .tb_st1 input[type=text] {width: 100%; border: none; border-bottom: 1px solid #444444; font-size: 16px; color: #fff; letter-spacing: -0.05em; word-break: keep-all; height: 57px; box-sizing: border-box; background-color: transparent; outline: none;}
#board .tb_st1 select {width: 100%; border: none; border-bottom: 1px solid #444444; font-size: 16px; color: #fff; letter-spacing: -0.05em; word-break: keep-all; height: 57px; box-sizing: border-box; background-color: transparent; outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url(../images/icon/arrow3.png) no-repeat right 10px center; padding-right: 30px;}
#board .tb_st1 select option {background-color: #fff; color: #444444;}
#board .tb_st1 textarea {width: 100%; border: 1px solid #444444; font-size: 16px; color: #fff; letter-spacing: -0.05em; word-break: keep-all; height: 160px; box-sizing: border-box; background-color: transparent; outline: none; resize: none; margin-top: 9px; padding: 13px 20px;}
#board .tb_st1 input[type=text]::placeholder, #board .tb_st1 textarea::placeholder {color: #666666;}
#board .tb_st1 input[type=text]:focus, #board .tb_st1 select:focus, #board .tb_st1 textarea:focus {border-color: #fff;}

#board .tb_st1 .tel_bx {display: flex; flex-flow: wrap;}
#board .tb_st1 .tel_bx select {width: calc(33.333% - 13.333px); margin-right: 20px;}
#board .tb_st1 .tel_bx input {width: calc(33.333% - 13.333px); margin-right: 20px;}
#board .tb_st1 .tel_bx input:last-child {margin-right: 0;}

#board .tb_st1 .fileBox {position:relative; width: 100%; box-sizing: border-box; height: 57px;}
#board .tb_st1 .fileBox input[type=file]{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; top:0; left:0;}
#board .tb_st1 .fileBox input[type=text]{float:left; width:100%; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; max-width: 100%; padding-right: 46px;}
#board .tb_st1 .fileBox label{position: absolute; width: calc(100% - 46px); height: 100%; top: 0; left: 0; z-index: 1; font-size: 0; background-color: transparent; color: transparent; cursor: pointer;}
/*#board .tb_st1 .fileBox .del_btn {width: 22px; height: 22px; border-radius: 50%; background: url(../images/icon/close_btn2.png) no-repeat center; position: absolute; right: 12px; top: 50%; margin-top: -11px; font-size: 0; z-index: 2; cursor: pointer;}*/
#board .tb_st1 .fileBox .del_btn {width: 46px;height: 57px;border-radius: 50%;background: url(../images/icon/close_btn2.png) no-repeat center;position: absolute;right: 0;top: 0; font-size: 0;z-index: 2;cursor: pointer;}

#board .tb_st1 .agree_bx .txt_bx {font-size: 16px; color: #999; letter-spacing: -0.05em; word-break: keep-all; border: 1px solid #444444; height: 160px; box-sizing: border-box; overflow-y: auto; padding: 14px 20px; margin-top: 9px;}
#board .tb_st1 .agree_bx .chk_bx {padding-top: 10px;}
#board .tb_st1 .agree_bx .chk_bx input {appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 20px; height: 20px; border: 1px solid #ffffff; border-radius: 2px; box-sizing: border-box; cursor: pointer;}
#board .tb_st1 .agree_bx .chk_bx input:checked {background: url(../images/icon/chk1.png) no-repeat center #fff;}
#board .tb_st1 .agree_bx .chk_bx label {display: inline; font-size: 16px; color: #ffffff; word-break: keep-all; cursor: pointer;}



/* 하단 버튼 */
#board .btm_btn {font-size: 0; text-align: center; padding-top: 46px;}
#board .btm_btn a {display: inline-block; overflow: hidden; font-family: 'Montserrat', sans-serif; font-size: 18px; color: #000000; position: relative;}
#board .btm_btn a::before {content: ''; width: 100%; height: 100%; background-color: #000000; position: absolute; left: 0; top: 0; -webkit-transform: translate3d(0,35px,0); transform: translate3d(0,35px,0);}
#board .btm_btn a span {display: block; line-height: 37px;}

#board .btm_btn.type2 {padding-top: 40px;}
#board .btm_btn.type2 a {width: 280px; border-radius: 35px; border: 1px solid #ffffff; font-size: 18px; color: #ffffff; font-weight: 700; font-family: 'Noto Sans KR', sans-serif;}
#board .btm_btn.type2 a::before {display: none;}
#board .btm_btn.type2 a span {line-height: 68px;}

/* PC */
@media all and (min-width:1025px){
	#board .list_st1 .img_bx {-webkit-transition: box-shadow 0.3s; -moz-transition: box-shadow 0.3s; transition: box-shadow 0.3s;}
	#board .list_st1 li a:hover .img_bx {box-shadow: 20px 20px 20px 0px rgba(17,17,17,0.2);}
	#board .list_st1 .img_bx div {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
	#board .list_st1 li a:hover .img_bx div {-webkit-filter: grayscale(0); filter: grayscale(0); transform: scale(1.1);}
	#board .list_st1 .img_bx::after {-webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s;}
	#board .list_st1 li a:hover .img_bx::after {opacity: 1;}
	
	
	
	/* 하단 버튼 */
	/*#board .btm_btn a::before {-webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); z-index: -1;}
	#board .btm_btn a:hover::before {-webkit-transform: translate3d(0,-35px,0); transform: translate3d(0,-35px,0);}*/
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	/* 리스트 */
	#board .list_st1 {margin-bottom: -27px;}
	#board .list_st1 li {margin-bottom: 27px; width: calc(33.333% - 13.333px); margin-right: 20px;}
	#board .list_st1 .txt_bx {padding-top: 11px;}
	#board .list_st1 .txt_bx strong {font-size: 15px;}
	#board .list_st1 .txt_bx p {font-size: 12px; margin-top: 3px;}
	
	#board .no_data {font-size: 15px; padding: 50px 0;}
	
	
	
	/* 작성 */
	#board .tb_st1 .tb_bx {margin-bottom: 0;}
	#board .tb_st1 .tb_bx .tb_w {margin-bottom: 16px;}
	#board .tb_st1 .tb_bx .tb_w.tb3 > div {width: calc(33.333% - 6.666px); margin-right: 10px;}
	#board .tb_st1 .ttl {font-size: 15px;}
	#board .tb_st1 .ttl em::after {font-size: 15px; padding-left: 4px;}
	#board .tb_st1 input[type=text] {height: 36px; font-size: 12px;}
	#board .tb_st1 select {height: 36px; font-size: 12px; background-size: 7px auto; background-position: right 5px center; padding-right: 20px;}
	#board .tb_st1 textarea {font-size: 12px; padding: 6px 10px; height: 100px; margin-top: 5px;}
	
	#board .tb_st1 .tel_bx select {width: calc(33.333% - 6.666px); margin-right: 10px;}
	#board .tb_st1 .tel_bx input {width: calc(33.333% - 6.666px); margin-right: 10px;}
	
	#board .tb_st1 .fileBox {height: 36px;}
	#board .tb_st1 .fileBox input[type=text] {padding-right: 29px;}
	#board .tb_st1 .fileBox label {width: calc(100% - 29px);}
	#board .tb_st1 .fileBox .del_btn {width: 29px; height: 36px; background-size: 16px 16px;}
	
	#board .tb_st1 .agree_bx .txt_bx {margin-top: 7px; font-size: 12px; padding: 6px 10px; height: 100px;}
	#board .tb_st1 .agree_bx .chk_bx {padding-top: 4px;}
	#board .tb_st1 .agree_bx .chk_bx input {width: 13px; height: 13px; background-size: 9px auto!important; border-radius: 1px;}
	#board .tb_st1 .agree_bx .chk_bx label {font-size: 12px;}
	
	

	/* 하단 버튼 */
	#board .btm_btn {padding-top: 21px;}
	#board .btm_btn a {font-size: 10px;}
	#board .btm_btn a::before {-webkit-transform: translate3d(0,19px,0); transform: translate3d(0,19px,0);}
	#board .btm_btn a span {line-height: 20px;}
	
	#board .btm_btn.type2 {padding-top: 28px;}
	#board .btm_btn.type2 a {width: 140px; font-size: 12px;}
	#board .btm_btn.type2 a span {line-height: 44px;}
}

/* 모바일 */
@media all and (max-width:768px){
	/* 리스트 */
	#board .list_st1 li:nth-child(n) {width: calc(50% - 10px); margin-right: 20px}
	#board .list_st1 li:nth-child(2n) {margin-right: 0;}
	
	
	
	/* 작성 */
	#board .tb_st1 .tb_bx .tb_w:nth-child(n) {width: 100%; margin-right: 0;}
}