@charset "utf-8";
/* CSS Document */
/*---------------------------------------------------------------------------------------
board paging
---------------------------------------------------------------------------------------*/
.bord-page-numbering-wrap{margin:30px auto; display: flex; justify-content: center;}
.bord-page-numbering-wrap > ul{display:flex; align-items: center; justify-content: flex-start; margin:15px auto;  height: auto;}
.bord-page-numbering-wrap > ul li{width:30px; height: 30px; border-radius: 50%; background: transparent; text-align: center; line-height: 30px; margin-right:3px; transition: all .5s; color:#fff;}
.bord-page-numbering-wrap > ul a:last-child li{margin-right:0;}
.bord-page-numbering-wrap > ul li.on{background: var(--color-point); color:#fff; transition: all .5s;} 
.bord-page-numbering-wrap > ul li.arrow-wrap{position:relative;}
.bord-page-numbering-wrap > ul li.prev .arrow-box{width:10px; height: 10px; border-top:1px solid #fff; border-left:1px solid #fff; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) rotateZ(-45deg); -webkit-transform: translate(-50%,-50%) rotateZ(-45deg);}
.bord-page-numbering-wrap > ul li.all.prev .arrow-box:nth-of-type(1){left:45%;}
.bord-page-numbering-wrap > ul li.all.prev .arrow-box:nth-of-type(2){left:65%;}
.bord-page-numbering-wrap > ul li.next .arrow-box{width:10px; height: 10px; border-top:1px solid #fff; border-right:1px solid #fff; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) rotateZ(45deg); -webkit-transform: translate(-50%,-50%) rotateZ(45deg);}
.bord-page-numbering-wrap > ul li.all.next .arrow-box:nth-of-type(1){left:35%;}
.bord-page-numbering-wrap > ul li.all.next .arrow-box:nth-of-type(2){left:55%;}
.bord-page-numbering-wrap > ul li.on .arrow-box{border-color:#e58bf5;}

/*---------------------------------------------------------------------------------------
1.search style - normal
---------------------------------------------------------------------------------------*/
.search-wrap{width:100%; padding:var(--gap-20); background-color:#e8e8e8; box-sizing: border-box; margin-bottom:var(--gap-40);}
.search-wrap > .inner-wrap{display:flex; align-items: center; background-color: #fff;}
.search-wrap .board-search-select{background-color: #fff; width:205px; height: 60px; color:#000; font-size:var(--font-size-medium);}
.search-wrap .hv{width:1px; height: 25px; background-color: #e8e8e8;}
.search-wrap .search-input{background-color:#fff; border-radius: 0; color:var(--color-font); width:calc(100% - 266px); height: 60px;}
.search-wrap .search-input:focus{ color:#000;}
.search-wrap  .button-type{width:60px; height: 60px; background-color: var(--color-primary); display:flex; justify-content: center; align-items: center;}
.search-wrap  .button-type.close{background-color:var(--color-point);}


.search-wrap-typeA{display:flex; align-items: center;}
.board-search-select-typeA{width:100px; height: 45px; border-radius: 5px; border:1px solid #d6d6d6; background-color:#fff; color:#838383; font-size:var(--font-size-small);}
.search-input-wrap{max-width:250px; width:calc(100% - 110px); margin-left:10px; border:1px solid #d6d6d6 !important; border-radius: 5px !important; display:flex; align-items: center;}
.search-input-typeA{padding:13px 15px !important; width:100%; box-sizing: border-box !important; background: transparent;}
.search-input-typeA.close{width:calc(100% - 35px);}
.search-input-typeA::placeholder {color: #d6d6d6;}
.search-wrap-typeA  .button-type{width:25px; height: 25px; border-radius: 50%; background-color: var(--color-primary); display:flex; justify-content: center; align-items: center; margin-right:10px;}
.search-wrap-typeA  .button-type > svg{width:7px;}
/*---------------------------------------------------------------------------------------
1.board style - normal
---------------------------------------------------------------------------------------*/
#list-style{padding-bottom:var(--gap-100); margin-top:var(--gap-140);}
#list-style > .inner-wrap{width:calc(100% - var(--gap-40)); max-width:var(--board-layout); margin:0 auto;}

p.emptyMessage{text-align: center; margin:var(--gap-140) auto; color:var(--color-font);}

#list-style.read-wrap > .inner-wrap{ margin:0 auto;}
#list-style.read-wrap h1.title{color:#000; text-align: center; font-weight: 600; font-size:var(--font-size-xxxlarge); margin:var(--gap-50) 0 var(--gap-20) 0;}
#list-style.read-wrap .head-info-wrap{display:flex; justify-content:center; align-items: center; flex-wrap: wrap; color:var(--color-font); padding:0 0 var(--gap-40) 0; border-bottom:2px solid #000;}
#list-style.read-wrap .head-info-wrap .info-wrap{display: flex; align-items: center;}
#list-style.read-wrap .head-info-wrap .info-wrap > .hv{width:1px; height: 15px; background-color: var(--color-border); margin:0 var(--gap-15);}
#list-style.read-wrap .cont-wrap{padding:var(--gap-50) 0; color:var(--color-font); font-size:var(--font-size-large);}
#list-style.read-wrap .cont-wrap img{max-width:100%;}
#list-style.read-wrap .btn-wrap{display:flex; justify-content: center; margin:var(--gap-30) 0;}

#list-style .read-wrap .file-wrap{margin-bottom:var(--gap-40);}

#list-style .pn-wrap{width:100%; padding:var(--gap-15); border-top:1px solid var(--color-border); display:flex; align-items: center; transition:all .5s;}
#list-style .pn-wrap:hover{background-color:#e8e8e8; transition:all .5s;}
#list-style .pn-wrap:last-of-type{border-bottom:1px solid var(--color-border);}
#list-style .pn-wrap > svg{margin:0 var(--gap-15);}

#list-style .board-list-wrap{}
#list-style .board-list-wrap .list-head{width:100%; border-top:2px solid #000; background-color:#f4f4f4; border-bottom:1px solid var(--color-border); padding:var(--gap-15) 0; display:flex;}
#list-style .board-list-wrap .list-head > li{text-align: center; color:#000; padding:0 var(--gap-10); box-sizing: border-box;}
#list-style .board-list-wrap ul > li.number{width:100px;}
#list-style .board-list-wrap ul > li.file{width:100px;}
#list-style .board-list-wrap ul > li.date{width:150px;}

#list-style .file-icon{fill:#E9E9E9; width:24px;}
#list-style .file-icon.on{fill:var(--color-primary); width:24px;}

#list-style .board-list-wrap .cont-list{display:flex; padding:var(--gap-20) 0; border-bottom:1px solid var(--color-border); transition: all .5s;}
#list-style .board-list-wrap .cont-list:hover{background-color:#f4f4f4;}
#list-style .board-list-wrap .cont-list > li{text-align: center; color:#000; display: flex; flex-wrap: wrap; align-items: center; justify-content:center; padding:0 var(--gap-10);}
#list-style .board-list-wrap .cont-list > li.number{font-weight: 800;}
#list-style .board-list-wrap .cont-list > li.date{color:var(--color-font)}
#list-style .board-list-wrap .cont-list > li > a{width:100%; display: inline-block;  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size:var(--font-size-large); font-weight: 500; text-align: left;}

#list-style .tdate{font-size:var(--font-size-normal); color:var(--color-font); width:100%; margin-top:var(--gap-5); text-align: left; display:none;}
#list-style .clip{padding:var(--gap-5) var(--gap-15); text-align: center; color:var(--color-bright); border-radius: 20px; background-color:var(--color-primary); font-weight: 400;}

#list-style .board-list-wrap .cont-list > li.flexWidth > .clip{display:none; margin-bottom:var(--gap-5);}

#list-style .total-list{margin-bottom:var(--gap-5);}
#list-style .total-list > span{color:var(--color-primary); font-weight: 500;}
#list-style .board-list-wrap .cont-list:nth-of-type(1){border-top:2px solid #000;}

@media only screen and (max-width:580px){
	.search-wrap .board-search-select{width:130px;}
	.search-wrap .search-input{width:calc(100% - 130px);}
	#list-style .board-list-wrap ul > li.disappear{display:none;}
	#list-style.read-wrap .file-wrap{width:100%; margin-top:var(--gap-15);}
	.tdate{display:block;}
	#list-style .number{width:100%;}
	#list-style .board-list-wrap .cont-list > li.flexWidth > .clip{display:block;}
	#list-style .board-list-wrap .cont-list > li.flexWidth{justify-content: flex-start;}
}

/*---------------------------------------------------------------------------------------
2.board style - accordian
---------------------------------------------------------------------------------------*/
#accordion-style{padding-bottom:var(--gap-100); margin-top:var(--gap-140);}
#accordion-style > .inner-wrap{width:calc(100% - var(--layout-flax-margin)); max-width:var(--board-layout); margin:0 auto;}

#accordion-style .board-list-wrap{}
#accordion-style .board-list-wrap ul > li.qaMark{width:100px;}
#accordion-style .board-list-wrap ul > li.category{width:150px; color:var(--color-font);}
#accordion-style .board-list-wrap .cont-list{border-bottom:1px solid var(--color-border); overflow: hidden; transition: all .3s;}
#accordion-style .board-list-wrap .cont-list:nth-of-type(2){border-top:1px solid var(--color-border);}
#accordion-style .board-list-wrap .cont-list > ul{display:flex; padding:var(--gap-20) 0; transition: all .5s; cursor: pointer;}
#accordion-style .board-list-wrap .cont-list > ul.answer-list{background-color:var(--color-light-gray);}
#accordion-style .board-list-wrap .cont-list li{text-align: center; color:#000; padding:0 var(--gap-15);}
#accordion-style .board-list-wrap .cont-list li.qaMark{font-weight: 600; font-size:var(--font-size-xxlarge); padding:0 var(--gap-10);}
#accordion-style .board-list-wrap .cont-list li.title-wrap{text-align: left; font-size:var(--font-size-large); width:calc(100% - 250px);}
#accordion-style .board-list-wrap .cont-list li.title-wrap > .title{width:100%;}
#accordion-style .board-list-wrap .cont-list li.title-wrap > .answer{color:var(--color-font); width:100%; font-size:var(--font-size-normal);}


.category-list{display:flex; align-items: center; justify-content:center; margin-bottom:var(--gap-50);}
.category-list > li{padding:0 var(--gap-10);}
.category-list > li > a{color:var(--color-font); font-size:var(--font-size-medium); padding:var(--gap-15) 0;}
.category-list > li.on > a{color:#000; font-weight: 600; border-bottom:1px solid #000;}

@media only screen and (max-width:580px){
	.board-list-wrap ul > li.disappear{display:none;}
	#accordion-style .board-list-wrap .cont-list li.title-wrap{width:calc(100% - 50px);}
	#accordion-style .board-list-wrap ul > li.qaMark{width:50px;}
}


/*---------------------------------------------------------------------------------------
board grid
---------------------------------------------------------------------------------------*/

.board-grid-wrap{width:calc(100% - var(--layout-flax-margin)); margin:0 auto; max-width:var(--board-layout);}
.grid-wrap{display: grid; grid-template-columns: repeat(4, calc(25% - 16.5px)); gap: 40px 22px;}
.grid-wrap > .box-wrap{ width: 100%; /* 그리드 셀의 전체 너비를 차지하도록 설정 */
    box-sizing: border-box; /* 패딩과 보더를 포함한 너비 계산 */
    margin: 0; /* 불필요한 마진 제거 */
    padding: 0; /* 불필요한 패딩 제거 */
 display: block;}
.grid-wrap > .box-wrap > .image-wrap{width:100%; position:relative; overflow: hidden;}
.grid-wrap > .box-wrap > .image-wrap:after{content:""; display:block; clear:both; padding-top:69%;}
.grid-wrap > .box-wrap > .image-wrap > img{width:100%; height: 100%; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); object-fit: cover; object-position: center; transition: all .3s;}
.grid-wrap > .box-wrap:hover > .image-wrap > img{width:105%; height: 105%; transition: all .3s;}
.grid-wrap > .box-wrap > .tlt{font-size:var(--font-size-medium); font-weight: 500; margin-top:var(--gap-15);}
.grid-wrap > .box-wrap > .info-name{color:var(--color-font); margin-top:var(--gap-5); font-size:var(--font-size-normal);}
.grid-wrap > .box-wrap > .info-wrap{display:flex; flex-wrap:wrap; align-items: center; margin-top:var(--gap-5);}
.grid-wrap > .box-wrap > .info-wrap > img{margin:0 var(--gap-10);}
.grid-wrap > .box-wrap > .info-wrap > p{color:var(--color-font); font-size:var(--font-size-normal);}

/*---------------------------------------------------------------------------------------
thumbnail-list
---------------------------------------------------------------------------------------*/

#thumbnail-list{width:calc(100% - var(--layout-flax-margin)); max-width:var(--board-layout); margin:0 auto; padding:var(--gap-140) 0;}
#thumbnail-list > .head-wrap{display:flex; flex-wrap: wrap;  align-items: center; justify-content: space-between;}
#thumbnail-list > .head-wrap > p{color:var(--color-font); font-size:var(--font-size-normal);}
#thumbnail-list > .head-wrap > p > span{color:var(--color-primary); font-weight: 600;}
#thumbnail-list > .head-wrap > .thumbnail-search-wrap{width:236px; display:flex; align-items: center; border-bottom:1px solid var(--color-border); padding:5px 0; background-color:transparent;}
#thumbnail-list > .head-wrap > .thumbnail-search-wrap > input{border:none; background-color:transparent; width:calc(100% - 26px); height: 25px;}
#thumbnail-list > .content-wrap > ul{display:flex; margin-top:var(--gap-40); flex-wrap:wrap;}
#thumbnail-list > .content-wrap > ul li.thumnail-wrap{width:30%; position:relative; background-color: var(--color-background); cursor: pointer; overflow: hidden; }
#thumbnail-list > .content-wrap > ul li.thumnail-wrap:after{content:""; display:block; clear:both; padding-top:56%;}
#thumbnail-list > .content-wrap > ul li.thumnail-wrap img{position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); object-fit: cover; width:100%; height: 100%; object-position: center; transition:all .3s;}
#thumbnail-list > .content-wrap > ul li.thumnail-wrap:hover img{width:105%; height: 105%;}
#thumbnail-list > .content-wrap > ul li.cont{width:calc(70% - var(--gap-40)); margin-left:var(--gap-40);}
#thumbnail-list > .content-wrap > ul li.cont .tlt{font-size:var(--font-size-large); font-weight: 600; margin-bottom:var(--gap-20);}
#thumbnail-list > .content-wrap > ul li.cont .cont{font-size:var(--font-size-normal); color:var(--color-font); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow: hidden;}
#thumbnail-list > .content-wrap > ul li.cont .date{text-align: right; font-size:var(--font-size-normal); color:var(--color-font); margin-top:var(--gap-20);}

#thumbnail-list.read-wrap > .inner-wrap{ margin:0 auto;}
#thumbnail-list.read-wrap h1.title{color:#000; text-align: center; font-weight: 600; font-size:var(--font-size-xxxlarge); margin:var(--gap-50) 0 var(--gap-20) 0;}
#thumbnail-list.read-wrap .head-info-wrap{display:flex; justify-content:center; align-items: center; flex-wrap: wrap; color:var(--color-font); padding:0 0 var(--gap-40) 0;}
#thumbnail-list.read-wrap .head-info-wrap .info-wrap{display: flex; align-items: center;}
#thumbnail-list.read-wrap .head-info-wrap .info-wrap > .hv{width:1px; height: 15px; background-color: var(--color-border); margin:0 var(--gap-15);}
#thumbnail-list.read-wrap .cont-wrap{padding:var(--gap-50) 0; color:var(--color-font); font-size:var(--font-size-normal); font-weight: 400;}
#thumbnail-list.read-wrap .cont-wrap img{max-width:100%;}
#thumbnail-list.read-wrap .btn-wrap{display:flex; justify-content: center; margin:var(--gap-30) 0;}
#thumbnail-list.read-wrap .file-wrap{margin-bottom:var(--gap-40);}
#thumbnail-list .pn-wrap{width:100%; padding:var(--gap-15); border-top:1px solid var(--color-border); display:flex; align-items: center; transition:all .5s;}
#thumbnail-list .pn-wrap:hover{background-color:#e8e8e8; transition:all .5s;}
#thumbnail-list .pn-wrap:last-of-type{border-bottom:1px solid var(--color-border);}
#thumbnail-list .pn-wrap > svg{margin:0 var(--gap-15);}

@media only screen and (max-width:768px){
	.grid-wrap{ grid-template-columns: repeat(3, calc(33% - 11px));}
}

@media only screen and (max-width:540px){
	.grid-wrap{ grid-template-columns: repeat(2, calc(50% - 8px)); gap: 30px 15px;}
	#thumbnail-list > .content-wrap > ul li.thumnail-wrap{width:100%;}
	#thumbnail-list > .content-wrap > ul li.cont{width:100%; margin-left:0; margin-top:var(--gap-40);}
	#thumbnail-list > .head-wrap{flex-direction: column-reverse;}
	#thumbnail-list > .head-wrap > p{width:100%; margin-top:var(--gap-20);}
	#thumbnail-list > .head-wrap > .search-wrap{width:100%;}
	
}

@media only screen and (max-width:320px){
	.grid-wrap{grid-template-columns: repeat(1, 1fr); gap: 25px 0;}
}




/*-------------------------------------------------
qna style
--------------------------------------------------*/
#qna-style{padding-bottom:var(--gap-100); margin-top:var(--gap-140);}
#qna-style > .inner-wrap{width:calc(100% - var(--gap-40)); max-width:var(--board-layout); margin:0 auto;}
#qna-style .head-wrap{display:flex; flex-wrap:wrap; align-items: center; justify-content: space-between; margin-bottom:var(--gap-20);}

#qna-style.list-wrap .list-btn-wrap{display:flex; justify-content: flex-end; margin-top:var(--gap-40);}
#qna-style.list-wrap .board-list-wrap{}
#qna-style.list-wrap .board-list-wrap ul > li.number{width:100px;}
#qna-style.list-wrap .board-list-wrap ul > li.answer{width:100px;}
#qna-style.list-wrap .board-list-wrap ul > li.date{width:150px;}
#qna-style.list-wrap .board-list-wrap ul > li.title-wrap{width:calc(100% - 350px);}
#qna-style.list-wrap .answer-icon > path{fill:var(--color-border); width:22px;}
#qna-style.list-wrap .answer-icon.on > path{fill:#000; width:22px;}
#qna-style.list-wrap .board-list-wrap .cont-list{display:flex; padding:var(--gap-20) 0; border-bottom:1px solid var(--color-border); transition: all .5s;}
#qna-style.list-wrap .board-list-wrap .cont-list:hover{background-color:var(--color-light-gray)}
#qna-style.list-wrap .board-list-wrap .cont-list > li{text-align: center; color:#000; display: flex; flex-wrap: wrap; align-items: center; justify-content:center; padding:0 var(--gap-10); font-size:var(--font-size-normal);}
#qna-style.list-wrap .board-list-wrap .cont-list > li.number{font-weight: 800;}
#qna-style.list-wrap .board-list-wrap .cont-list > li.date{color:var(--color-font)}
#qna-style.list-wrap .board-list-wrap .cont-list > li.title-wrap{display:flex; align-items: center; justify-content: flex-start;}
#qna-style.list-wrap .board-list-wrap .cont-list > li.title-wrap > img{margin-left:10px;}
#qna-style.list-wrap .board-list-wrap .cont-list > li.title-wrap > a { color: var(--color-font); font-size: var(--font-size-normal); align-items: center; display: -webkit-box; overflow: hidden; white-space: normal; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: calc(100% - 28px); vertical-align: middle; text-align: left;}
#qna-style.list-wrap .board-list-wrap .cont-list > li.title-wrap > a:hover{color:#000;}
#qna-style.list-wrap .total-list{margin-bottom:var(--gap-5);}
#qna-style.list-wrap .total-list > span{color:var(--color-point); font-weight: 500;}
#qna-style.list-wrap .board-list-wrap .cont-list:nth-of-type(1){border-top:2px solid #000;}
#qna-style.list-wrap .password-check-wrap{position:fixed; top:50%; left:50%; transform: translate(-50%,-50%); background-color:#fff; padding:var(--gap-40); box-sizing: border-box; z-index: 11; width:100%; max-width:800px; display:none;}
#qna-style.list-wrap .password-check-wrap > .btn-wrap{display:flex; justify-content: flex-end; margin-bottom:var(--gap-20); width:100%;}
#qna-style.list-wrap .password-check-wrap .closeBtn{cursor:pointer; width:20px; height: 20px; display:flex; align-items: center; justify-content: center}
#qna-style.list-wrap .password-check-wrap > .inner-wrap{width:100%; text-align: center;}
#qna-style.list-wrap .password-check-wrap > .inner-wrap > .tlt{font-size:var(--font-size-xxlarge); font-weight: 600;}
#qna-style.list-wrap .password-check-wrap > .inner-wrap > .stlt{font-size:var(--font-size-normal); color:var(--color-font); margin-top:5px;}
#qna-style.list-wrap .password-check-wrap > .inner-wrap > .error-message{font-size:var(--font-size-normal); color:#D61414; text-align: left; width:100%; max-width:450px; display:inline-block; margin:var(--gap-80) auto 5px auto;}
#qna-style.list-wrap .password-check-wrap > .inner-wrap > .input-wrap{max-width:450px; width:100%; margin:0 auto;}
#qna-style.list-wrap .password-check-wrap > .inner-wrap .password-input{width:100%; padding:20px 15px; box-sizing: border-box; border:1px solid var(--color-border); font-size:var(--font-size-normal); color:var(--color-font); margin-bottom:10px; text-align: left;}
#qna-style.list-wrap .password-check-wrap > .inner-wrap .password-confirm-btn{background-color:var(--color-primary); color:#fff; font-size:var(--font-size-normal); width:100%; padding:20px 15px; box-sizing: border-box; border-radius: 5px;}


#qna-style.read-wrap > .inner-wrap{ margin:0 auto;}
#qna-style.read-wrap .mark{background-color:var(--color-primary); color:var(--color-primary-text); padding:5px var(--gap-15); border-radius: 5px; display: inline-block; font-size:var(--font-size-small);}
#qna-style.read-wrap h1.title{color:#000; text-align:left; font-weight: 600; font-size:var(--font-size-xxlarge); margin:var(--gap-20) 0 var(--gap-10) 0; line-height: 150%;}
#qna-style.read-wrap .head-info-wrap{display:flex; align-items: center; flex-wrap: wrap; color:var(--color-font); }
#qna-style.read-wrap .head-info-wrap .info-wrap{display: flex; align-items: center;}
#qna-style.read-wrap .head-info-wrap .info-wrap > .hv{width:1px; height: 15px; background-color: var(--color-border); margin:0 var(--gap-15);}
#qna-style.read-wrap .cont-wrap{padding:var(--gap-80) 0; color:var(--color-font); font-size:var(--font-size-large);}
#qna-style.read-wrap .cont-wrap img{max-width:100%;}
#qna-style.read-wrap .file-wrap{margin-bottom:var(--gap-20);}
#qna-style.read-wrap .file-wrap > .title-wrap{margin-bottom:var(--gap-10); display:flex; align-items: center;}
#qna-style.read-wrap .file-wrap > .title-wrap > img{margin-right:5px; width:15px;}
#qna-style.read-wrap .divider{width:100%; margin:var(--gap-40) 0 var(--gap-80) 0; height: 1px; background-color:var(--color-border);}
#qna-style.read-wrap .divider2{width:100%;  height: 2px; background-color:#000;}
#qna-style.read-wrap .btn-wrap{display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top:var(--gap-40);}
#qna-style.read-wrap .btn-wrap > .right-btn-wrap{display:flex; align-items: center; flex-wrap: wrap;}
#qna-style.read-wrap .btn-wrap > .right-btn-wrap > .list-button-type{margin-left:10px;}


#qna-style.write-wrap .title-input{width:calc(74% - 30px); height: 60px; border:1px solid var(--color-border); background-color:var(--color-light-gray); border-radius: 5px; padding:15px 20px; box-sizing: border-box; font-size:var(--font-size-normal); color:var(--color-font);}
#qna-style.write-wrap .password-wrap{display:flex; align-items: center;  width:26%; height: 60px; border:1px solid var(--color-border); background-color:var(--color-light-gray); border-radius: 5px; padding:0 20px; box-sizing: border-box; font-size:var(--font-size-normal); color:var(--color-font);}
#qna-style.write-wrap .password-wrap > input{height: 60px; width:calc(100% - 18px); background-color:transparent;}
#qna-style.write-wrap #lock-password-line{fill:#838383;}
#qna-style.write-wrap .context{width:100%; height:455px; border:1px solid var(--color-border); background-color:var(--color-light-gray); border-radius: 5px; padding:15px 20px; box-sizing: border-box; font-size:var(--font-size-normal); color:var(--color-font); margin-top:var(--gap-20);}
#qna-style.write-wrap #fileWrap1{margin-top:var(--gap-20);}
#qna-style.write-wrap .write-btn-wrap{display:flex; justify-content: flex-end; margin-top:var(--gap-40);}
#qna-style.write-wrap .cancle-button-type{margin-right:10px;}

@media only screen and (max-width:640px){
	#qna-style.list-wrap .board-list-wrap ul > li.number{width:60px;}
	#qna-style.list-wrap .board-list-wrap ul > li.answer{width:40px;}
	#qna-style.list-wrap .board-list-wrap ul > li.date{width:100px;}
	#qna-style.list-wrap .board-list-wrap ul > li.title-wrap{width:calc(100% - 200px);}
}

@media only screen and (max-width:500px){
	#qna-style.list-wrap .total-list{width:100%; margin-bottom:10px;}
	#qna-style.list-wrap .search-wrap-typeA{width:100%;}
	#qna-style.list-wrap .board-list-wrap ul > li.disappear{display:none;}
}

@media only screen and (max-width:450px){
	#qna-style.list-wrap .board-list-wrap .cont-list > li.date{display:none;}
	#qna-style.list-wrap .board-list-wrap ul > li.number{width:60px;}
	#qna-style.list-wrap .board-list-wrap ul > li.answer{width:40px;}
	#qna-style.list-wrap .board-list-wrap ul > li.title-wrap{width:calc(100% - 100px);}
}