/* 커뮤니티 공통 css */
.wrap {overflow: visible !important;}
.bg {background-color: #F9F9F9; height: 100%;}
.commu_file {display: none;}
.commu_line2 {padding: 0 4px; color: #DDDDDD; font-size: 12px; vertical-align: bottom;}
.noti_commu_content b {font-weight: bold;}

/* 드래그 방지 커뮤니티 폼 css */
.form_file {
    -ms-user-select: none; 
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 커뮤니티 공지사항 팝업 */
.notice_popup .commu_inner2 .cont2_top {padding-bottom: 50px; min-height: 400px;}
.notice_popup .popup_box2 {margin-top: 80px; padding-bottom: 20px;}
.notice_popup .popup_box2 p img {max-width: 100% !important; height: auto !important;} 
 
/* 커뮤니티 좋아요 */
.reply_btn {cursor: pointer;}
.thumb_btn {cursor: pointer;}
.comment_option.on {display: none;}
.reply_option.on {display: none;}

/* 커뮤니티 모바일 글쓰기 */
.m_write {position: fixed; bottom: 16px; right: 15px; z-index: 2; display: none;}
.m_write .img_box {width: 64px; height: 64px; border-radius: 50%; transition: 0.3s;}
.m_write .img_box:hover {transform: scale(1.1);}
.m_write .img_box img {width: 100%; height: 100%;}

/* 커뮤니티 더보기 */
.commu_more {position: absolute; right: 0; display: block; cursor: pointer; z-index: 999;}
.commu_more1.on {display: none;}
.commu_more2.on {display: none;}

.commu_option {position: absolute; right: 10px; z-index: 3; display: none;}
.commu_option.on {display: block;}
.commu_option ul {width: 120px; border: 1px solid #eee; box-shadow: 1px 1px 1px #ddd;}
.commu_option ul li {text-align: left; background-color: #fff; border-bottom: 1px solid #eee;}
.commu_option ul li a {width: 100%; display: block; box-sizing: border-box; padding: 14px 0 14px 12px;}
.commu_option ul li p {display: none;}
.commu_option ul li:last-child {border-bottom: transparent;}

/* 커뮤니티 기본css */
.commu_container {max-width: 1200px; max-height: 100%; position: relative; padding: 40px 0 100px; font-size: 0; text-align: center;}
.commu_container .cont_left {position: sticky; top: 106px; min-width: 288px; display: inline-block; vertical-align: top; text-align: left;}
.commu_container .cont_center {min-width: 592px;; max-width: 592px; display: inline-block; vertical-align: top; margin: 0 16px; text-align: left;} 
.commu_container .cont_right {position: sticky; top: 106px; max-width: 288px;  width: 288px; display: inline-block; vertical-align: top; text-align: left;}

.topic_box {padding: 25px 0;}
.topic_box h2 {font-size: 16px; font-weight: bold;} 
.topic_box ul {margin-top: 15px; background-color: #fff; border: 1px solid #EEEEEE; border-radius: 5px;}
.topic_box ul li {overflow: hidden; border-bottom: 1px solid #eeeeee; box-sizing: border-box;}
.topic_box ul li:last-child {border-bottom: none;}
.topic_box ul li a {width: 100%; padding: 12px 0 12px 12px; font-size: 14px; display: block;}
.topic_box ul li a:hover {font-weight: bold; color: #EF4D4D; transition: 0.3s;}
.topic_box ul li.active a {font-weight: bold; color: #EF4D4D;}

.feed_box {display: none; background: linear-gradient(to right, #EF4D4D, pink); cursor: pointer; position: relative; width: 100%; height: 80px; box-sizing: border-box; border: 1px solid #eee; border-radius: 5px;}
.feed_box .text_box {position: absolute; top: 50%; left: 15px; transform: translate(0%, -50%);}
.feed_box .text_box h2 {color: #fff; font-size: 12px;}
.feed_box .text_box p {color: #fff; font-size: 20px; padding-top: 5px; font-weight: bold;}
.feed_box .img_box {position: absolute; top: 50%; right: 5px; transform: translate(0%, -50%);}
.feed_box .img_box img {width: 74px; height: 62px;}

.cont_center .board_box {width: 100%;}
.cont_center .board_box ul {width: 100%; border: 1px solid #eee; border-radius: 5px; background-color: #fff;}
.cont_center .board_box ul li {overflow: hidden; position: relative; border-bottom: 1px solid #eee; padding: 12px 12px;}
.cont_center .board_box ul li:hover {transition: 0.2s; background-color: rgb(249, 249, 249);}
.cont_center .board_box ul li:nth-child(2) {border-bottom: none;}
.cont_center .board_box ul li .note_title span {background-color: #f8f4f4; color: #EF4D4D; font-weight: bold; display: inline-block; vertical-align: middle; font-size: 12px; padding: 6px 8px; } 
.cont_center .board_box ul li .note_title p {display: inline-block; vertical-align: middle; color: #222222; padding-left: 5px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 60%;}
.cont_center .board_box ul li .note_date {position: absolute; right: 12px; top: 50%; transform: translate(0px, -50%);}
.cont_center .board_box ul li .note_date span {color: #999999; font-size: 13px;}

.cont_center .write_box {width: 100%; margin-top: 16px; cursor: pointer;}
.cont_center .write_box:hover .box_left {border: 1px solid #EF4D4D; box-shadow: rgba(252, 163, 151, 0.897) 0px 0px 0px 3px;}
.cont_center .write_box .box_left {background-color: #fff; width: calc(100% - 62px); height: 48px; border: 1px solid #eee; border-radius: 5px; line-height: 48px; display: inline-block; vertical-align: middle; transition: 0.5s;}
.cont_center .write_box .box_left h2 {color: #999999; font-size: 13px; padding-left: 10px;}

.cont_center .write_box .box_right {position: relative; margin-left: 8px; width: 48px; height: 48px; line-height: 48px; border-radius: 5px; text-align: center; display: inline-block; vertical-align: middle;}
.cont_center .write_box .box_right::before {content:""; background-position: center center; background-image: url(/img/commu_write.png); width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0;}

.cont_center .list_box {width: 100%; padding-top: 25px;}
.cont_center .list_cate_box {position: relative; display: none;}
.cont_center .list_cate_box h2 {position: relative; font-size: 16px; font-weight: bold; vertical-align: middle; display: inline-block;}
.cont_center .list_cate_box h2::after {content: ''; position: absolute; right: -20px; top: 7px; background: url(/img/cate_arrow3.png); width: 10px; height: 5px; background-repeat: no-repeat; transform: rotate(360deg); transition: 0.3s; }
.cont_center .list_cate_box h2.on::after {transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.cont_center .list_cate_box h2 b {padding-left: 5px; vertical-align: top;}
.cont_center .list_box ul {padding-top: 15px;}
.cont_center .list_box ul li {
    cursor: pointer; 
    background-color: #fff; 
    border-radius: 5px; 
    border: 1px solid #eee; 
    box-sizing: border-box; 
    padding: 20px 16px; 
    margin-bottom: 15px;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -ms-transition: 0.5s;
    -moz-transition: 0.5s;
}

.list_topic_title {font-size: 16px; font-weight: bold; vertical-align: middle; display: inline-block; padding-left: 5px;}
.list_topic_title.active {display: none;}
.list_search_title {display: none;}
.list_search_title.active {display: block;}
.list_search_title h4 {font-size: 16px; font-weight: bold; color: rgba(248, 92, 71, 0.897);}
.list_search_title h4 b {font-size: 16px; color: rgba(243, 90, 70, 0.897);}
.list_search_title h4 em {color: #333;}
.list_search_title p {font-size: 13px; padding-top: 10px; padding-left: 5px;}
.list_search_title p b {font-weight: bold;}


.list_cate_depth {display: none; position: absolute; top: 30px; border-radius: 5px;  width: 150px; max-height: 175px; overflow-y: auto; border: 1px solid #eee; background-color: #fff; z-index: 998;}
.list_cate_depth.on {display: block;}
.list_cate_depth div {border-bottom: 1px solid #eee;}
.list_cate_depth div a {display: block; box-sizing: border-box; padding: 14px; width: 100%; color: #333; font-size: 14px;}
.list_cate_depth div a:hover {transition: 0.2s; background-color: #f9f9f9;}

.commu_list_none {display: none; text-align: center; background-color: #fff; border: 1px solid #eee; padding: 40px 0 !important;}
.commu_list_none.active {display: block;}
.commu_list_none span {font-size: 20px;}
.commu_list_none h2 {font-size: 14px; font-weight: bold; padding: 10px 0;}
.commu_list_none p {font-size: 14px;}

.cont_center .list_box ul li:hover {transform: translateY(-3px); -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); -moz-transform: translateY(-5px); box-shadow: 6px 6px 6px #ddd;}
.cont_center .list_box ul li .text_box > span {display: inline-block; font-weight: bold; font-size: 12px; box-sizing: border-box; padding: 6px 8px; border-radius: 5px; background-color: #F4F4F4; color: #999999; margin-right: 5px; }
.cont_center .list_box ul li .text_box h2 {
    height: 52px;
    line-height: 52px;
    max-width: 100%; 
    color: #222222; 
    font-weight: bold; 
    font-size: 16px;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
    
}
.cont_center .list_box ul li .text_box p {
    max-width: 100%;
    font-size: 14px; 
    color: #222222; 
    line-height: 1.4;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cont_center .list_box ul li .img_box {
    position: relative; 
    max-width: 100%; 
    max-height: 300px; 
    border-radius: 5px;  
    margin-top: 18px; 
    border-radius: 10px; 
    overflow: hidden;
}
.cont_center .list_box ul li .img_box.on {display: none; opacity: 0;}
.cont_center .list_box ul li .img_box img {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -khtml-border-radius: 5px;
}
.media_num {position: absolute; bottom: 20px; right: 10px; display: none;}
.media_num.on{display: inline-block;}
.media_num span {padding: 6px 8px; background-color: rgba(0, 0, 0,0.8); color: #fff; border-radius: 5px; font-size: 10px;}

.cont_center .menu_box {display: none; max-width: 1200px; width: 100%; padding: 15px 0 0px 0; border-bottom: 1px solid #dddddd; box-sizing: border-box;}
.cont_center .menu_box .menu_depth {white-space:nowrap; overflow-x: auto; text-align:left; -ms-overflow-style: none;}
.cont_center .menu_box .menu_depth::-webkit-scrollbar{display:none;}
.cont_center .menu_box .menu_depth span {max-width: 200px; height: auto; overflow: hidden; cursor: pointer; font-size: 14px; color: #999999;}
.cont_center .menu_box .menu_depth span a {display: inline-block; font-size: 14px; padding: 8px 12px 15px; box-sizing: border-box;}
.cont_center .menu_box .menu_depth span a:hover {transition: 0.3s; font-weight: bold;}
.cont_center .menu_box .menu_depth span a.active {transition: 0.1s; border-bottom: 3px solid #EF4D4D; font-weight: bold;}

.cont_center .info_box {position: relative; width: 100%; height: 12px; padding-top: 18px;} 
.cont_center .info_box .box_left {position: absolute; left: 0;} 
.cont_center .info_box .box_left span:nth-child(1) {font-size: 12px;} 
.cont_center .info_box .box_left span:nth-child(2) {font-size: 12px; color: #999999; padding: 0 9px;} 
.cont_center .info_box .box_left span:nth-child(3) {font-size: 12px; color: #999999;}

.cont_center .info_box .box_right {position: absolute; right: 0;} 
.cont_center .info_box .box_right .line {margin: 0 5px; display: inline-block; width: 1px; height: 10px; background-color: #dddddd; vertical-align: middle;}
.cont_center .info_box .box_right .icon_box {display: inline-block; padding-right: 5px; vertical-align: middle; text-align: center;} 
.cont_center .info_box .box_right .icon_box img {width: 12px; height: 12px; vertical-align: middle;} 
.cont_center .info_box .box_right .icon_box span {padding-left: 3px; font-size: 12px; color: #999999; vertical-align: middle;} 

.cont_center .tag_box {padding-top: 18px;} 
.cont_center .tag_box .tag_cate {display: inline-block; margin: 8px 8px 0 0; padding: 6px 8px; border: 1px solid #DDDDDD; border-radius: 5px;}
.cont_center .tag_box .tag_cate:hover {transition: 0.3s; background-color: #FBF4F4;}
.cont_center .tag_box .tag_cate span {color: #999999; font-size: 12px;}

.cont_right .my_box {cursor: pointer; width: 100%; height: 48px; border: 1px solid #eee; text-align: center; background-color: #fff; line-height: 48px; border-radius: 5px;}
.cont_right .my_box:hover {background-color: #f9f9f9; transition: 0.3s;}
.cont_right .my_box span {display: inline-block; position: relative; padding-left: 20px; font-weight: bold;  font-size: 14px;}
.cont_right .my_box span::before {position: absolute; top: 15px; left: -5px; content:""; width: 16px; height: 16px;  background-position: center center; background-image: url(/img/commu_user.png); background-size: cover; background-repeat: no-repeat;}

.cont_right .hot_box {width: 100%;}
.cont_right .hot_box h2 {color: #222222; font-weight: bold; font-size: 16px; padding: 16px 0 16px 3px;}
.cont_right .hot_box ul {border: 1px solid #eee;}
.cont_right .hot_box ul li {overflow: hidden; position: relative; width: 100%; background-color: #fff; box-sizing: border-box; padding: 14px 12px; border-bottom: 1px solid #eee; position: relative;}
.cont_right .hot_box ul li:hover {transition: 0.3s; background-color: #f9f9f9;}
.cont_right .hot_box ul li:last-child {border-bottom: none;}
.cont_right .hot_box ul li a {display: block;}
.cont_right .hot_box ul li a .text_box span {display: inline-block; font-weight: bold; font-size: 12px; box-sizing: border-box; padding: 6px 8px; border-radius: 5px; background-color: #F4F4F4; color: #999999; margin-right: 5px;}
.cont_right .hot_box ul li a .text_box p {
    font-size: 13px; 
    padding-top: 10px; 
    line-height: 1.4;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.commu_footer {padding: 15px 0 0 10px;}
.footer_box1 ul::after {content: ''; clear: both; height: 0; visibility: hidden; display: block;}
.footer_box1 ul li {float: left; padding: 0 7px 7px 0;}
.footer_box1 ul li a {font-size: 12px; color: #999; font-weight: 500;}
.footer_box2 {padding-top: 5px;}
.footer_box2 p {color: #999; font-size: 12px; font-weight: bold;}

.cont_right .commu_like {position: absolute; top: 20px; right: 12px;}
.cont_right .commu_like img {vertical-align: middle;}
.cont_right .commu_like span {padding-left: 3px; vertical-align: middle; font-size: 12px; color: #999999;}

.commu_container .temp_write_box {position: absolute; top: 30px; right: 0; z-index: 2;}
.commu_container .temp_write_box .temp_num_box.on {display: none;}
.commu_container .temp_write_box a {transition: 0.3s; display: inline-block; text-align: center; width: 110px; line-height: 39px; background-color: #fff; border: 1px solid #EF4D4D; border-radius: 5px;}
.commu_container .temp_write_box a:hover {border-color: #333;}
.commu_container .temp_write_box a:hover span {color: #333;}
.commu_container .temp_write_box a span {display: inline-block; cursor: pointer; font-size: 14px; color: #EF4D4D; vertical-align: middle; font-weight: bold; letter-spacing: 0.3px;}
.commu_container .temp_write_box a em {font-size: 14px; vertical-align: middle; color: #EF4D4D; padding: 0 10px;}

.commu_container .form_title {text-align: left;}
.commu_container .form_title img {vertical-align: middle;}
.commu_container .form_title span {vertical-align: middle; padding-left: 10px; font-weight: bold; font-size: 16px;}

.commu_container .form_box {background-color: #ffffff; margin: 25px 0 100px 0; padding: 8px 24px; box-sizing: border-box; border-radius: 5px; border: 1px solid #eeeeee;}

.commu_container .form_cate1 select {width: 100%; border: none; padding: 16px 0; border-bottom: 1px solid #eeeeee; color: #999999;}
.commu_container .form_cate1 select {padding-left: 5px;}
.commu_container .form_cate1.on select {color: #EF4D4D;}

.commu_container .form_cate2 select {display: none; width: 100%; border: none; padding: 16px 0; border-bottom: 1px solid #eeeeee; color: #999999;}
.commu_container .form_cate2.on select {color: #EF4D4D;}

.commu_container .form_name {position: relative;}
.commu_container .form_name input {width: 100%; border: none;   padding: 16px 0 16px 0px; border-bottom: 1px solid #eeeeee; color: #222222;}
.commu_container .form_name input::placeholder {font-size: 14px; color: #999;}
.commu_container .form_name.on input::placeholder {font-size: 14px; color: #EF4D4D;}
.commu_container .form_name .text_limit {position: absolute;  top: 50%; right: 3px; transform: translate(0, -50%);}
.commu_container .form_name .text_limit span {font-size: 13px; color: #999999;}

.commu_container .form_content textarea {border: none; width: 100%; height: 240px; font-size: 14px; color: #999; padding: 10px 10px 10px 5px !important;}
.commu_container .form_content.on textarea::placeholder {color: #EF4D4D;}

.commu_container .form_file {border-bottom: 1px solid #eeeeee; padding: 10px 0;}
.commu_container .form_file label span {position: relative; display: block; text-align: left; font-size: 14px; color: #999999;}
.commu_container .form_file label span::after {content: "+"; position: absolute; right: 3px; font-size: 16px; font-weight: bold;}

.commu_container .form_img {max-width: 592px; width: 100;}
.commu_container .form_img ul {list-style-type: none;}
.commu_container .form_img ul::after {content: ''; clear: both; height: 0; visibility: hidden; display: block;}
.commu_container .form_img ul li {
    float: left; 
    margin: 15px 0 0 0; 
    position: relative; 
    margin-right: 2%; 
    width: 23.5%; 
    height: 72px; 
    border: 1px dotted #999; 
    border-radius: 5px; 
    box-sizing: border-box;
    background-color: #f5f5f5;
}
.commu_container .form_img ul li.active {opacity: 60% !important;}
.commu_container .form_img ul li:nth-child(4n) {margin-right: 0;}
.commu_container .form_img ul li .img_box {width: 100%; height: 100%; border-radius: 5px; overflow: hidden;}
.commu_container .form_img ul li .img_box img {width: 100%; height: 100%;}
.commu_container .form_img ul li .close_box {position: absolute; top: -7px; right: -8px; z-index: 3;}
.commu_container .form_img ul li .close_box img {width: 22px; height: 22px;}

.commu_container .form_tag {text-align: left; border-bottom: 1px solid #eeeeee; padding-bottom: 15px;}
.commu_container .form_tag .tag_top {margin: 15px 0 10px 0;}
.commu_container .form_tag .tag_top .tag_text {display: inline-block; padding: 8px; background-color: #F4F4F4; border-radius: 5px; margin: 10px 10px 0 0; ; cursor: pointer;}
.commu_container .form_tag .tag_top .tag_text span {font-size: 14px; color: #999999; vertical-align: middle;}
.commu_container .form_tag .tag_top .tag_text img {vertical-align: middle; padding-left: 5px;}

.commu_container .form_tag .tag_bottom {background: #F4F4F4; border-radius: 5px;}
.commu_container .form_tag .tag_bottom span {font-size: 14px;}
.commu_container .form_tag .tag_bottom input {width: 100% !important; border: 1px solid #eee; height: 42px; padding: 0 5px !important; background-color: #fff;}
.commu_container .form_tag .tag_bottom input::placeholder {font-size: 14px; color: #999;}
.commu_container .form_tag .tag_bottom.on input::placeholder {font-size: 14px; color: #EF4D4D;}

.commu_container .form_check {padding-top: 15px; text-align: left;}
.commu_container .form_check .check_box {display: inline-block;}
.commu_container .form_check .check_box:nth-child(2) {display: inline-block; padding-left: 10px;}
.commu_container .form_check .check_box input {display: inline-block; vertical-align: middle;  width: 17px; height: 17px; border: 1px solid #eee;}
.commu_container .form_check .check_box span {display: inline-block; vertical-align: middle; font-size: 14px; padding-left: 5px; padding-bottom: 2px;}

.commu_container .form_btn {padding: 15px 0 10px 0; cursor: pointer;}
.commu_container .form_btn span {width: 100%; background-color: #EF4D4D; padding: 16px 0; color: #fff; font-size: 14px; font-weight: bold; display: inline-block; border-radius: 8px;}

.commu_inner2 {max-width: 560px; margin: 0 auto; position: relative;}
.commu_line {box-sizing: border-box; margin: 40px 30px; border-bottom: 1px solid #dddddd;}
.commu_popup .popup_box2 {margin-top: 80px; padding-bottom: 20px; top: 0 !important; transform: translate(-50% , 0) !important;}
.notice_popup .popup_box2 {margin-top: 80px; padding-bottom: 20px; top: 0 !important; transform: translate(-50% , 0) !important;}

.commu_inner2 .cont1_top {padding-top: 30px;}
.commu_inner2 .cont1_top::after {content: ''; clear: both; height: 0; visibility: hidden; display: block;}
.commu_inner2 .cont1_top span:nth-child(1) {float: left; display: inline-block; font-weight: bold; font-size: 12px; box-sizing: border-box; padding: 6px 8px; border-radius: 5px; background-color: #F4F4F4; color: #999999; margin-right: 5px;}

.commu_inner2 .cont1_middle {padding-top: 15px;}
.commu_inner2 .cont1_middle h2 {font-size: 20px; font-weight: bold; line-height: 1.2;}
.commu_inner2 .cont1_middle p {font-size: 12px; color: #999; padding-top: 15px;}
.commu_inner2 .cont1_middle p b {padding: 0 3px;}

.commu_inner2 .cont1_bottom {padding-top: 15px;}
.commu_inner2 .cont1_bottom img {width: 34px; height: 34px; display: inline-block; vertical-align: middle; border-radius: 50px; border: 1px solid #eee;}
.commu_inner2 .cont1_bottom span {vertical-align: middle; font-size: 14px; padding-left: 5px; font-weight: 500;}

.commu_inner2 .cont2_top {padding-top: 35px;}
.commu_inner2 .cont2_top p {font-size: 14px; line-height: 1.6em;}
.commu_inner2 .cont2_top p a {color: rgb(0, 133, 255); border-bottom: 1px solid rgb(0, 133, 255);}

.commu_inner2 .cont2_middle {padding: 25px 0; overflow: hidden;}
.commu_inner2 .cont2_middle ul {width: 100%; text-align: center;}
.commu_inner2 .cont2_middle ul.on {display: none;}
.commu_inner2 .cont2_middle ul li {max-width: 100%; background-color: #fff; border-radius: 10px; overflow: hidden;} 
.commu_inner2 .cont2_middle ul li .img_box {cursor: zoom-in; text-align: center; width: 100%; height: 315px; background-color: #333; position: relative;}
.commu_inner2 .cont2_middle ul li .img_box img {max-width: 100%; max-height: 100%; display: inline-block; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.commu_inner2 .cont2_bottom {padding-top: 25px;}
.commu_inner2 .cont2_bottom .tag_cate {display: inline-block; margin: 8px 8px 0 0; padding: 6px 8px; border: 1px solid #DDDDDD; border-radius: 5px; cursor: pointer;}
.commu_inner2 .cont2_bottom .tag_cate:hoveR {background-color: #fbf4f4; transition: 0.3s;}
.commu_inner2 .cont2_bottom .tag_cate span {color: #999999; font-size: 12px;}

.commu_inner2 .cont2_bottom2 {display: flex; justify-content: center; align-items: center; gap: 15px; text-align: center; margin-top: 30px; padding-bottom: 30px;}
.commu_inner2 .cont2_bottom2 .bottom_box {display: inline-block; cursor: pointer; width: 120px; height: 55px; line-height: 52px; border: 1px solid #ddd; text-align: center; border-radius: 50px;}
.commu_inner2 .cont2_bottom2 .bottom_box:hover {background-color: #fbf4f4; transition: 0.3s;}
.commu_inner2 .cont2_bottom2 .bottom_box img  {transition: 0.3s; vertical-align: middle; width: 20px; height: 20px;}
.commu_inner2 .cont2_bottom2 .bottom_box span {vertical-align: middle; font-size: 14px;}
.commu_inner2 .cont2_bottom2 .bottom_box.active {border: 1px solid #EF4D4D;}
.commu_inner2 .cont2_bottom2 .bottom_box img.active {transform: scale(1.3);}
.commu_inner2 .cont2_bottom2 .bottom_box span.active {color: #EF4D4D;}

.commu_inner2 .cont3_top h2 {font-weight: bold;}
.commu_inner2 .cont3_middle {display: flex; padding: 20px 0; border-bottom: 1px solid #eee;}
.commu_inner2 .cont3_middle .img_box {flex: 0 0 auto; width: 36px; padding-right: 7px;}
.commu_inner2 .cont3_middle .img_box img {width: 100%; height: 36px; border-radius: 50%;}
.commu_inner2 .cont3_middle .text_box {flex: 1;}
.commu_inner2 .cont3_middle .text_box textarea {
    background-color: #F9F9F9; 
    border-color: transparent !important; 
    border-radius: 10px; 
    padding: 10px 0 0 10px !important; 
    box-sizing: border-box; 
    width: 100%; 
    min-height: 40px; 
    font-size: 13px; 
    overflow-y: hidden; resize: none;
}
.commu_inner2 .cont3_middle .btn_box {padding-top: 5px;}
.commu_inner2 .cont3_middle .btn_box::after {content: ''; clear: both; height: 0; visibility: hidden; display: block;}
.commu_inner2 .cont3_middle .btn_box .btn_left {float: left; padding-left: 5px;}
.commu_inner2 .cont3_middle .btn_box .btn_left input {vertical-align: middle;}
.commu_inner2 .cont3_middle .btn_box .btn_left span {font-size: 13px; vertical-align: middle; color: #999;}
.commu_inner2 .cont3_middle .btn_box .btn_right {float: right; padding-bottom: 10px;}
.commu_inner2 .cont3_middle .btn_box .btn_right a {
    opacity: 0.7;
    display: inline-block; 
    padding: 8px 16px; 
    background-color: #ddd; 
    color: #fff; 
    border-radius: 10px; 
    font-size: 13px;
}
.commu_inner2 .cont3_middle .btn_box .btn_right a.active {opacity: 1; transition: 0.3s; background-color: #EF4D4D; color: #fff;}
.commu_inner2 .list_setting {border-color: transparent !important;}
.commu_inner2 .list_setting h3 {}

.commu_inner2 .cont3_bottom {margin: 30px 0px;}
.commu_inner2 .cont3_bottom .bottom_box1 img {width: 30px; height: 30px; vertical-align: middle;  border-radius: 50px; text-align: center; border: 1px solid #f8f4f4;}
.commu_inner2 .cont3_bottom .bottom_box1 span {font-size: 13px; vertical-align: middle; padding-left: 5px; font-weight: 500;}

.commu_inner2 .cont3_bottom .bottom_box2 {padding-top: 10px;}
.commu_inner2 .cont3_bottom .bottom_box2 p {
    line-height: 1.4;
    background-color: #FBF4F4;
    padding: 6px 10px;
    border-radius: 10px;
    box-sizing: border-box;
    display: inline-block;
    font-size: 13px;
    color: #222222;
}
.commu_inner2 .cont3_bottom .bottom_box2 p a {color: rgb(0, 133, 255); border-bottom: 1px solid rgb(0, 133, 255);}
.commu_inner2 .cont3_bottom .bottom_box2 p.active {color: #bbb;}
.commu_inner2 .cont3_bottom .bottom_box3.on {display: none;}
.commu_inner2 .cont3_bottom .bottom_box3 {padding-top: 5px;}
.commu_inner2 .cont3_bottom .bottom_box3 .img_box {display: inline-block; vertical-align: middle;}
.commu_inner2 .cont3_bottom .bottom_box3 .img_box img {width: 12px; height: 12px; vertical-align: middle; transition: 0.3s;}
.commu_inner2 .cont3_bottom .bottom_box3 .img_box span {vertical-align: middle; color: #999999; font-size: 12px;} 
.commu_inner2 .cont3_bottom .bottom_box3 .img_box span.active {color: #EF4D4D; font-weight: bold;}
.commu_inner2 .cont3_bottom .bottom_box3 .img_box img.active {transform: scale(1.2);}

.bottom_box4 {display: none;}
.bottom_box4.on {display: flex;}
.commu_inner2 .cont3_bottom .bottom_box4 {padding: 20px 0 0 32px;}
.commu_inner2 .cont3_bottom .bottom_box4 .img_box {flex: 0 0 auto; width: 36px; padding-right: 8px;}
.commu_inner2 .cont3_bottom .bottom_box4 .img_box img {width: 100%; height: 36px; border-radius: 50%;}
.commu_inner2 .cont3_bottom .bottom_box4 .text_box {flex: 1;}
.commu_inner2 .cont3_bottom .bottom_box4 .text_box textarea {
    padding: 10px 0 0px 10px !important; 
    box-sizing: border-box; 
    width: 100%; 
    min-height: 40px; 
    font-size: 14px; 
    overflow-y: hidden; 
    resize: none; 
    border-radius: 5px;
    background-color: #F9F9F9; 
    border-color: transparent !important; 
    border-radius: 10px;
}
.commu_inner2 .cont3_bottom .bottom_box4 .btn_box {padding-top: 10px;}
.commu_inner2 .cont3_bottom .bottom_box4 .btn_box::after {content: ''; clear: both; height: 0; visibility: hidden; display: block;}
.commu_inner2 .cont3_bottom .bottom_box4 .btn_box .btn_left {float: left;}
.commu_inner2 .cont3_bottom .bottom_box4 .btn_box .btn_left input {vertical-align: middle;}
.commu_inner2 .cont3_bottom .bottom_box4 .btn_box .btn_left span {font-size: 13px; vertical-align: middle;}
.commu_inner2 .cont3_bottom .bottom_box4 .btn_box .btn_right {float: right; padding-bottom: 10px;}
.commu_inner2 .cont3_bottom .bottom_box4 .btn_box .btn_right a {
    opacity: 0.7;
    display: inline-block; 
    padding: 8px 16px; 
    background-color: #ddd; 
    color: #fff; 
    border-radius: 10px; 
    font-size: 13px;
}
.commu_inner2 .cont3_bottom .bottom_box4 .btn_box .btn_right a.active {opacity: 1; transition: 0.3s; background-color: #EF4D4D; color: #fff;}
.bottom_box5.on {display: block;}
.commu_inner2 .cont3_bottom .bottom_box5 {display: flex; padding: 15px 0 0 32px;}
.commu_inner2 .cont3_bottom .bottom_box5 .img_box {flex: 0 0 auto; width: 36px; padding-right: 8px;}
.commu_inner2 .cont3_bottom .bottom_box5 .img_box img {width: 100%; height: 36px; border-radius: 50%;}
.commu_inner2 .cont3_bottom .bottom_box5 .text_box {flex: 1;}
.commu_inner2 .cont3_bottom .bottom_box5 .text_box textarea {
    padding: 10px 0 0px 10px !important; 
    box-sizing: border-box; 
    width: 100%; 
    min-height: 40px; 
    font-size: 14px; 
    overflow-y: hidden; 
    resize: none; 
    border-radius: 5px;
    background-color: #F9F9F9; 
    border-color: transparent !important; 
    border-radius: 10px;
}
.commu_inner2 .cont3_bottom .bottom_box5 .btn_box {padding-top: 10px;}
.commu_inner2 .cont3_bottom .bottom_box5 .btn_box::after {content: ''; clear: both; height: 0; visibility: hidden; display: block;}
.commu_inner2 .cont3_bottom .bottom_box5 .btn_box .btn_left {float: left;}
.commu_inner2 .cont3_bottom .bottom_box5 .btn_box .btn_left input {vertical-align: middle;}
.commu_inner2 .cont3_bottom .bottom_box5 .btn_box .btn_left span {font-size: 13px; vertical-align: middle;}
.commu_inner2 .cont3_bottom .bottom_box5 .btn_box .btn_right {float: right; padding-bottom: 10px;}
.commu_inner2 .cont3_bottom .bottom_box5 .btn_box .btn_right a {
    display: inline-block;
    padding: 8px 16px; 
    color: #fff; 
    border-radius: 10px; 
    font-size: 13px;
}
.commu_inner2 .cont3_bottom .bottom_box5 .btn_box .btn_right a:nth-child(1) {
    opacity: 0.7;
    background-color: #ddd;  
    border-color: transparent !important; 
}
.commu_inner2 .cont3_bottom .bottom_box5 .btn_box .btn_right a:nth-child(1).active {opacity: 1; transition: 0.3s; background-color: #EF4D4D; color: #fff;}
.commu_inner2 .cont3_bottom .bottom_box5 .btn_box .btn_right a:last-child {margin-left: 5px; display: inline-block; background-color: #fff; color: #999; border-radius: 10px; font-size: 13px; border: 1px solid #eee;}
.commu_inner2 .cont3_bottom .reply_list > li {padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #eeeeee;}

.commu_inner2 .cont3_bottom .reply_chat {margin-left: 32px;}
.commu_inner2 .cont3_bottom .reply_chat > li {padding: 20px 15px 15px 15px; box-sizing: border-box; border-bottom: 1px solid #eeeeee; position: relative;}
.commu_inner2 .cont3_bottom .reply_chat > li:last-child {border: none;}
.commu_inner2 .cont3_bottom .reply_chat li > a {width: 100%; display: block; box-sizing: border-box; padding: 14px 0 14px 12px;}
.commu_inner2 .cont3_bottom .reply_chat li:first-child {border-radius: 10px 10px 0 0;}
.commu_inner2 .cont3_bottom .reply_chat li:last-child {border-radius: 0 0 10px 10px;}
.commu_inner2 .cont3_bottom .reply_chat .reply_like {cursor: pointer;}
.commu_inner2 .cont3_bottom .reply_chat .reply_like img.active {transform: scale(1.3);}
.commu_inner2 .cont3_bottom .reply_chat .reply_like span.active {color: #EF4D4D;}

.commu_inner2 .cont4_top h2 {font-weight: bold;}

.commu_inner2 .cont4_middle {padding-bottom: 40px;}
.commu_inner2 .cont4_middle ul {padding-top: 15px;}
.commu_inner2 .cont4_middle li {margin-bottom: 8px; padding: 16px; box-sizing: border-box; border: 1px solid #eeeeee; border-radius: 5px;}
.commu_inner2 .cont4_middle li:hover {background-color: #f8f4f4; transition: 0.3s;}
.commu_inner2 .cont4_middle li:last-child {margin-bottom: 0px;}
.commu_inner2 .cont4_middle li h2 {font-weight: bold;}
.commu_inner2 .cont4_middle li p {margin: 15px 0; font-size: 13px;-webkit-line-clamp: 1; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden;}

.commu_inner2 .cont4_middle li .middle_box::after {content: ''; clear: both; height: 0; visibility: hidden; display: block;}
.commu_inner2 .cont4_middle li .middle_left {float: left;}
.commu_inner2 .cont4_middle li .middle_left span {font-size: 12px;}
.commu_inner2 .cont4_middle li .middle_left span:nth-child(2) {padding: 0 5px; color: #eee;}
.commu_inner2 .cont4_middle li .middle_left span:nth-child(3) {color: #999;}

.commu_inner2 .cont4_middle li .middle_right {float: right;}
.commu_inner2 .cont4_middle li .middle_right .img_box {display: inline-block; vertical-align: middle;}
.commu_inner2 .cont4_middle li .middle_right .img_box img {vertical-align: middle; width: 12px; height: 12px;}
.commu_inner2 .cont4_middle li .middle_right .img_box span {font-size: 12px; color: #999;}

/*********** 모바일 미디어쿼리 ***********/
@media screen and (max-width: 1200px){

    .commu_inner {border-radius: 0;}
    .commu_search_box {display: none;}
    .commu_container {padding: 20px 0px 0px 0px;}
    .commu_container .cont_left {position: static; max-width: 100%; display: block; height: auto;}
    .commu_container .cont_right {display: none;}
    .topic_box {display: none;}
    .commu_container .cont_center {margin: 0px 0px; max-width: 100%; min-width: 100%; padding: 15px 0 70px 0;}
    .commu_line {margin: 40px 15px;}
    .m_write {display: block;}
    .cont_center .menu_box {display: block;}

    .commu_form_bg {background-color: #ffffff !important;}
    .commu_form_container {padding: 0 !important; margin: 40px 0 0 0;}
    .commu_container .form_title {padding-left: 15px;}
    .commu_container .form_box {border: transparent;}

    .commu_container .temp_write_box {top: 0; right: 20px;}

    /* 모달 */
    .commu_popup .popup_box2 {width: 100%;}
    .notice_popup .popup_box2 {width: 100%;}
    .notice_popup .commu_inner2 .cont2_top {min-height: 300px;}
    .popup_inner {width: 100%;}
    .commu_inner2 {width: 100%; padding: 0 15px; box-sizing: border-box;}

};