/*-----------------------------------------------------------------------
1 리스트
------------------------------------------------------------------------*/

.discussion-wrap{padding:var(--gap-140) 0; position:relative; overflow: hidden;}
.discussion-wrap > .width-wrap{position:relative; z-index: 1;}
.search-tlt{text-align: center; color:#000; font-weight: 600; font-size:var(--font-size-xxxxlarge); margin-bottom:15px;}
.discussion-wrap.list-wrap .search-wrap{width:100%; max-width:500px; border-radius: 35px; height: 70px; background-color:#F1F1F1; display:flex; align-items: center; margin:0 auto;}
.discussion-wrap.list-wrap .search-wrap > input{width:calc(100% - 30px); height: 70px; margin-right:10px; background-color:transparent;}

.discussion-wrap.list-wrap .container{display: grid; grid-template-columns: repeat(4, calc(25% - 22px)); grid-gap: 30px; margin-top:var(--gap-80);}
.discussion-wrap.list-wrap .container .box-wrap .image-wrap{width:100%; position:relative; overflow: hidden; border:1px solid var(--color-border); border-bottom:none;}
.discussion-wrap.list-wrap .container .box-wrap .image-wrap:after{content:""; display:block; clear:both; padding-top:55%;}
.discussion-wrap.list-wrap .container .box-wrap .image-wrap > img{object-fit: cover; object-position: center; position:absolute; top:50%; left:50%; width:100%; height: 100%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transition:all .3s;}
.discussion-wrap.list-wrap .container .image-wrap:hover > img{width:105%; height: 105%;}
.discussion-wrap.list-wrap .container .box-wrap > .cont-box{background-color:#fff; padding:var(--gap-30); box-sizing: border-box; border:1px solid #d6d6d6;}
.discussion-wrap.list-wrap .container .box-wrap > .cont-box .stlt{font-size:var(--font-normal); color:var(--color-font);}
.discussion-wrap.list-wrap .container .box-wrap > .cont-box .tlt{font-size:var(--font-large); color:#000; margin-top:10px; line-height: 130% !important;  height:42px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal;}
.discussion-wrap.list-wrap .container .box-wrap > .cont-box .hr{width:100%; height: 1px; margin:var(--gap-20) 0; background-color:var(--color-border);}
.discussion-wrap.list-wrap .container .box-wrap > .cont-box .icon-container{display:flex; justify-content: space-between; align-items: center;}
.discussion-wrap.list-wrap .cont-box .left-box{display:flex;}
.discussion-wrap.list-wrap .cont-box .inner-box{display:flex; align-items: center;}
.discussion-wrap.list-wrap .cont-box .inner-box:nth-child(1){margin-right:var(--gap-20);}
.discussion-wrap.list-wrap .cont-box .inner-box > p{color:var(--color-font); margin-left:10px;}
.discussion-wrap.list-wrap .cont-box .right-box .inner-box{margin-right:0;}
.discussion-wrap.list-wrap .cont-box .icon-wrap{display:flex; align-items: center; cursor: pointer;}
.discussion-wrap.list-wrap .cont-box .icon-wrap > .full{display:none;}
.discussion-wrap.list-wrap .cont-box .icon-wrap.on > .full{display:block;}
.discussion-wrap.list-wrap .cont-box .icon-wrap.on > .normal{display:none;}

.discussion-wrap.list-wrap > .pattern01{position:absolute; top:383px; right:152px; z-index: 0}
.discussion-wrap.list-wrap > .pattern02{position:absolute; top:186px; right:383px; z-index: 0}
.discussion-wrap.list-wrap > .pattern03{position:absolute; top:176px; left:80px; z-index: 0}
.discussion-wrap.list-wrap > .pattern04{position:absolute; top:1063px; left:0px; z-index: 0}
.discussion-wrap.list-wrap > .pattern05{position:absolute; top:1782px; left:34px; z-index: 0}
.discussion-wrap.list-wrap > .pattern06{position:absolute; top:2186px; right:0px; z-index: 0}

.discussion-wrap.list-wrap  .writeBtn-wrap{width:100%; max-width:500px; background-color:#5F9595; border-top-left-radius: 15px; border-top-right-radius: 15px; padding:var(--gap-20) 0; box-sizing: border-box; position:fixed; bottom:0; left:50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); z-index: 5;}
.discussion-wrap.list-wrap .writeBtn-wrap > ul{display:flex; align-items: center; justify-content: space-between;}
.discussion-wrap.list-wrap .writeBtn-wrap > ul > li{display:flex; align-items: center; justify-content: center; width:calc(50% - 1px);}
.discussion-wrap.list-wrap .writeBtn-wrap > ul > li > img{margin-right:10px; transition: all .3s;}
.discussion-wrap.list-wrap .writeBtn-wrap > ul > li > a{color:#fff; font-size:var(--font-size-normal);}
.discussion-wrap.list-wrap .writeBtn-wrap > ul > li:hover > a,.discussion-wrap .writeBtn-wrap > ul > li:hover > img{opacity:0.7;}
.discussion-wrap.list-wrap .writeBtn-wrap > ul > li:nth-child(2){width:2px;}


/*-----------------------------------------------------------------------
2 읽기
------------------------------------------------------------------------*/


.discussion-wrap.read-wrap > .width-wrap > .tlt{text-align: center; font-size:var(--font-size-xxxxlarge); font-weight: 500; line-height: 120%; margin-bottom:var(--gap-20);}
.discussion-wrap.read-wrap > .width-wrap > .stlt{text-align: center; font-size:var(--font-size-normal); color:var(--color-font);}
.discussion-wrap.read-wrap .container-wrap{display:flex; flex-wrap:wrap; justify-content: space-between; margin-top:var(--gap-140); align-items: flex-start;}
.discussion-wrap.read-wrap .container-wrap .left-wrap{width:calc(50% - 20px); max-width:780px;}
.discussion-wrap.read-wrap .container-wrap .left-wrap > .image-wrap{position:relative; width:100%; border-radius: 10px; border:1px solid var(--color-border); overflow: hidden;}
.discussion-wrap.read-wrap .container-wrap .left-wrap > .image-wrap:after{content:"";display:block; clear:both; padding-top:69%;}
.discussion-wrap.read-wrap .container-wrap .left-wrap > .image-wrap > img{position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); object-fit: cover; width:100%; height: 100%;}
.discussion-wrap.read-wrap .container-wrap .left-wrap > .cont-wrap{font-size:var(--font-size-normal); color:var(--color-font); margin-top:var(--gap-50); white-space: pre-line;}
.discussion-wrap.read-wrap .container-wrap .right-wrap{width:calc(50% - 20px); max-width:454px; position:relative; padding-bottom:90px;}
.discussion-wrap.read-wrap .interaction-wrap{padding:var(--gap-20) 0; border-bottom:1px solid var(--color-border); border-top:1px solid var(--color-border); display:flex; flex-wrap:wrap; justify-content: space-between; }
.discussion-wrap.read-wrap .interaction-wrap .stlt{font-size:var(--font-size-normal); color:var(--color-font);}
.discussion-wrap.read-wrap .interaction-wrap .icon-wrap{display:flex;}
.discussion-wrap.read-wrap .interaction-wrap .icon-wrap > .inner-box{display:flex; align-items: center; margin-left:var(--gap-20); cursor:pointer;}
.discussion-wrap.read-wrap .interaction-wrap .icon-wrap > .inner-box > p{margin-left:5px; color:var(--color-font);}
.discussion-wrap.read-wrap .interaction-wrap .icon-wrap > .inner-box > .icon-wrap > img:nth-child(2){display:none;}
.discussion-wrap.read-wrap .interaction-wrap .icon-wrap > .inner-box > .icon-wrap.on > img:nth-child(1){display:none;}
.discussion-wrap.read-wrap .interaction-wrap .icon-wrap > .inner-box > .icon-wrap.on > img:nth-child(2){display:block;}

.comments-all-wrap{}
.comments-all-wrap .comment-wrap{padding:var(--gap-30) 0; border-bottom:1px solid var(--color-border);}
.comments-all-wrap .comment-wrap .info-wrap > .ctr-wrap{display:flex; align-items: center;}
.comments-all-wrap .comment-wrap .info-wrap > .ctr-wrap > .tlt{font-size:var(--font-size-normal); margin-right:var(--gap-20); font-weight: 500;}
.comments-all-wrap .comment-wrap .info-wrap > .ctr-wrap > button{cursor: pointer; padding:0 5px; position:relative;}
.comments-all-wrap .comment-wrap .info-wrap > .ctr-wrap > button.on > .edit-wrap{display:block;}
.comments-all-wrap .comment-wrap .info-wrap > .ctr-wrap .edit-wrap{position:absolute; top:0; right:-83px; background-color:#fff; border:1px solid var(--color-border); box-sizing: border-box; padding:var(--gap-10); display:none;}
.comments-all-wrap .comment-wrap .info-wrap > .ctr-wrap .edit-wrap > a{width:100%; margin-bottom:var(--gap-15); text-align: center; color:var(--color-font); transition: all .3s; font-size:var(--font-size-small); display:inline-block;}
.comments-all-wrap .comment-wrap .info-wrap > .ctr-wrap .edit-wrap > a:last-child{margin-bottom:0;}
.comments-all-wrap .comment-wrap .info-wrap > .ctr-wrap .edit-wrap > a:hover{color:#000;}
.comments-all-wrap .comment-wrap .info-wrap > .stlt{font-size:var(--font-size-small); color:var(--color-font);}
.comments-all-wrap .comment-wrap > .cont-wrap{ font-size:var(--font-size-normal); color:var(--color-font);}
.comments-all-wrap .comment-wrap > .thumb-wrap{margin-top:var(--gap-10); display:flex;}
.comments-all-wrap .comment-wrap > .thumb-wrap > .inner-wrap{display:flex; align-items: center;}
.comments-all-wrap .comment-wrap > .thumb-wrap > .inner-wrap{margin-right:var(--gap-20);}
.comments-all-wrap .comment-wrap > .thumb-wrap > .inner-wrap:last-child{margin-right:0}
.comments-all-wrap .comment-wrap > .thumb-wrap .icon-wrap{cursor:pointer; display:flex; align-items: center;}
.comments-all-wrap .comment-wrap > .thumb-wrap .icon-wrap > img:nth-child(2){display:none;}
.comments-all-wrap .comment-wrap > .thumb-wrap .icon-wrap.on > img:nth-child(1){display:none;}
.comments-all-wrap .comment-wrap > .thumb-wrap .icon-wrap.on > img:nth-child(2){display:block;}
.comments-all-wrap .comment-wrap > .thumb-wrap > .inner-wrap .stlt{font-size:var(--font-size-small); color:var(--color-font); margin-left:var(--gap-10);}

.comments-all-wrap .comment-wrap > .additional-comments-wrap{margin-top:var(--gap-20);}
.comments-all-wrap .comment-wrap > .additional-comments-wrap .openBtn{display:flex; align-items: center;}
.comments-all-wrap .comment-wrap > .additional-comments-wrap .openBtn:hover{opacity:0.7; color:#000;}
.comments-all-wrap .comment-wrap > .additional-comments-wrap .openBtn > img{margin-right:var(--gap-10);}
.comments-all-wrap .comment-wrap > .additional-comments-wrap .comments-all-wrap{width:calc(100% - 20px); margin-left:20px; overflow: hidden; height: 0;}
.comments-all-wrap .comment-wrap > .additional-comments-wrap .comments-all-wrap.on{height: auto;}
.comments-all-wrap .comment-wrap > .additional-comments-wrap .comment-wrap{border-bottom:0; padding-top:var(--gap-30); padding-bottom:0;}
.comments-all-wrap.sample{display:none;}

.follow-id{font-size:var(--font-size-small); color:var(--color-primary); width:100%; text-align: left; line-height: 120%; margin-top:var(--gap-20);}
.typing-wrap .follow-id{margin-top:0; margin-bottom:5px;}

.typing-wrap{ padding:var(--gap-15) 0; position:fixed; bottom:0px; right:var(--gap-20); z-index: 1; width:calc(50% - 20px); max-width:454px;}
.typing-wrap > .inner-wrap{ display:flex; flex-wrap:wrap; align-items: flex-end; justify-content: space-between; border:1px solid var(--color-border); border-radius: 30px; padding:var(--gap-10) var(--gap-15); box-sizing: border-box; background-color:#fff; }
.typing-wrap .reply { box-sizing: border-box; color: var(--color-font); font-size: var(--font-size-small); width: calc(100% - 43px); margin-right: 15px; height: 28px; min-height: 38px; padding: 2px 4px; line-height: 1.2; overflow: hidden; resize: none; }
.typing-wrap .commentBtn{width:28px; height: 28px; background-color:var(--color-primary); border-radius: 50%; display:flex; justify-content: center; align-items: center; margin-bottom:5px;}

.discussion-wrap.read-wrap .btn-wrap{display:flex; justify-content:space-between; margin:var(--gap-80) auto; width:calc(100% - var(--layout-flax-margin)); max-width:var(--layout-width);}
.discussion-wrap.read-wrap .btn-wrap > div{display:flex;}
.discussion-wrap.read-wrap .btn-wrap > div > a{margin-left:10px;}
.discussion-wrap.read-wrap .btn-wrap.center{justify-content: center;}


/*-----------------------------------------------------------------------
3 쓰기
------------------------------------------------------------------------*/

.discussion-wrap.write-wrap > .inner-wrap{width:calc(100% - var(--layout-falx-margin)); margin:0 auto; max-width:780px;}
.discussion-wrap.write-wrap > .inner-wrap > .cont-wrap{margin-bottom:var(--gap-80);}
.discussion-wrap.write-wrap > .inner-wrap > .cont-wrap > .tlt{color:#000; font-weight: 600; font-size:var(--font-size-xlarge);}
.discussion-wrap.write-wrap > .inner-wrap > .cont-wrap > .stlt{color:var(--color-font); font-size:var(--font-size-normal); margin-bottom:var(--gap-15);}
.discussion-wrap.write-wrap > .inner-wrap > .cont-wrap > textarea{padding:var(--gap-20); border:1px solid var(--color-border); border-radius: 10px; width:100%; box-sizing: border-box; min-height: 300px; margin-top:15px;}
.discussion-wrap.write-wrap > .inner-wrap > .cont-wrap > input{width:100%; padding:5px 10px; box-sizing: border-box; border:1px solid var(--color-border); border-radius: 5px; height: 45px;}
.discussion-wrap.write-wrap .btn-wrap{display:flex; justify-content: center;}
.discussion-wrap.write-wrap .btn-wrap > a{margin-right:var(--gap-20);}
.discussion-wrap.write-wrap .btn-wrap > a:last-child{margin:0;}

@media only screen and (max-width:1200px){
	.discussion-wrap.list-wrap .container{grid-template-columns: repeat(4, calc(25% - 15px)); grid-gap: 20px;}
	.discussion-wrap.list-wrap .parallax-item{display:none;}
}

@media only screen and (max-width:960px){
	.discussion-wrap.list-wrap .container{grid-template-columns: repeat(3, calc(33% - 13px)); grid-gap: 20px;}
	.discussion-wrap.list-wrap  .writeBtn-wrap{bottom:60px;}
}

@media only screen and (max-width:640px){
	.discussion-wrap.list-wrap .container{grid-template-columns: repeat(2, calc(50% - 10px)); grid-gap: 20px;}
	.discussion-wrap.read-wrap .container-wrap{flex-direction: column;}
	.discussion-wrap.read-wrap .container-wrap .left-wrap{width:100%; max-width: none;}
	.discussion-wrap.read-wrap .container-wrap .right-wrap{width:100%; max-width: none;}
	.interaction-wrap{margin-top:var(--gap-100);}
}

@media only screen and (max-width:427px){
	.discussion-wrap.list-wrap .image-wrap{height:175px;}
	.discussion-wrap.read-wrap .btn-wrap > div{width:69%;}
	.discussion-wrap.read-wrap .btn-wrap > form{width:31%;}
	.list-button-type.white{width:100%;}
	.discussion-wrap.read-wrap .btn-wrap.center > div{width:auto;}
	.discussion-wrap.read-wrap .btn-wrap.center > div > a{margin-left:0;}
	
}

@media only screen and (max-width:375px){
	.discussion-wrap.list-wrap .container{grid-template-columns: repeat(1, 1fr); grid-gap: 20px;}
	.discussion-wrap.list-wrap .image-wrap{height:333px;}
}