@charset "utf-8";
 /* @latest 2020.12.28 SSJ */
 /* @latest 2021.03.02 SSJ */

/* /css/wzwg/module/cmnt/community.css 파일 입니다.*/


.allbox .ctr-box {float:left;width:100%;text-align:center;margin-bottom: 20px;}
.allbox .ctr-box + .rt-box {float:left; width:100%;}
.allbox .rt-box {width:100%;float:left;text-align:right;margin-bottom:50px;font-size: 16px;}
.allbox .lt-box {width:100%; float:left; text-align:left; margin-bottom:50px;}

.search-box {padding:10px 0; float:left;}
.search-box p {line-height:150%; color:#838383; word-break:keep-all;}

.community-box {width:100%; float:left; overflow:hidden; margin-top:20px;}
.community-box li {margin-bottom:15px;float:left;position:relative;padding: 20px 15px 15px;font-size:12px;text-align:center;box-sizing:border-box;border:1px solid rgba(0,0,0,0.1);-webkit-transition:border 1s;transition:border 1s;}
.community-box li .cmt-imgbox {width:130px; height:130px; margin:5px auto;}
.community-box li > a:first-child {width: 28%; height:0; float: left; padding-bottom: 28%; overflow:hidden; position:relative; background:#fff; border-radius:100%;
                                    border:1px solid rgba(0,0,0,0.1); -webkit-transition:background 1s; transition:background 1s;}
.community-box li > a:first-child:hover {background:#333;}
.community-box li img {float:left;width:100%;height:auto;min-height:100%; position:absolute;top:-999px;left:-999px;right:-999px;bottom:-999px;margin:auto; -webkit-transition:opacity 1s;transition:opacity 1s;}
.community-box li img:hover {opacity:0.7;}
.community-box li > a:last-child {width: 70%;float:left;text-align:left;box-sizing:border-box;padding-left: 15px;}
.community-box li > a:last-child > span {clear:both;width:100%;color:black;float:left;font-size:18px;line-height:25px;margin-bottom:20px;font-weight:600;}
.community-box li > a:last-child > span:before {content:"";width:3px;height:15px;background:#2c3130;float:left;margin:4px 8px 0 0;}
.community-box li > a:last-child > span ~ p {font-size: 15px;line-height:20px;display:block;width:100%;float:left;word-break:keep-all;color:#838383;word-break:keep-all;overflow:hidden;}
.community-box li > a:last-child > span ~ p:empty {display:none;}
.community-box li > a:last-child > div {height:30px;font-size:13px;line-height:30px;padding:0 15px;background:#2c3130;color:white;display:inline-block;float:right;margin-top:30px;}
.community-box li > a:last-child > div:hover {}
.community-box li:hover {border:1px solid #333;}

    @media (min-width:800px){
    .community-box li {width: 49.5%;margin-right:1%;} 
    .community-box li:nth-child(2n) {margin-right:0;}
    .community-box li:nth-child(2n+1) {clear:both;}
    }
    @media (min-width:1300px){}

    @media (min-width:991px) and (max-width:1299px){
    .community-box li > a:last-child > span {height:50px; }
    }

    @media (max-width:990px){
    .community-box {margin-top:0;}
    }

    @media (min-width:600px) and (max-width:799px){
    .community-box li {width:49%; margin-right:2%; padding:30px 15px 15px;}
    .community-box li:nth-child(2n) { margin-right:0;}
    .community-box li:nth-child(2n+1) {clear:both;}
    }

    @media (max-width:599px){
    .community-box li {clear:both;min-height:100%;display:block;width:100%;height:auto;padding:15px;}
    .community-box li > a:first-child {width: 10%;float:left;padding-bottom: 10%;margin-bottom:0;margin-right: 3%;}
    .community-box li > a:last-child {width: 85%;float:left;}
    .community-box li > a:last-child > div {display:none;}
    }

.care-box {text-align:center; float:left; width:100%; padding:0 10px; }
.care-box ul li {list-style:none; text-align:left; font-size:11px; line-height:18px; color:#F00; list-style:none; padding-left:0;}

.complete-box {overflow:hidden; text-align:center;}
.complete-box img{margin-bottom:30px;}
.complete-box {margin-bottom:40px; display:block;}
.complete-box p {text-align:center;font-size:28px; letter-spacing:-1px; font-weight:800; color:#333;}
.complete-box p > span {display:inline; font-size:28px; font-weight:800;}
.complete-box span {text-align:center; width:100%; font-size:12px; line-height:18px; display:inline-block;}

.joinUs_box{float:left; width:100%; margin-bottom:30px;}
.joinUs_box table{width:100%;border-top: 2px solid #333;border-collapse:collapse;}
.joinUs_box table th{border:1px solid #f3f3f3;border-width: 1px 0;padding: 15px 10px;/* background:#f9f9f9; */color:#333;font-size: 16px;font-weight:600;}
.joinUs_box table td{line-height:150%;border:1px solid #f3f3f3;border-width: 1px 0;padding: 15px 10px;font-size: 16px;font-weight:400;color:#333;}
.joinUs_box table td img.joinUs-imgbox{width:50px; height:50px;}
.joinUs_box table td a.id_select_bt{display:inline-block;}
.joinUs_box table td a.id_select_bt span {border:1px solid #ccc; line-height:22px; display:inline-block; vertical-align:2px; font-size:11px; padding:0 5px;
                                        border-radius:3px; background:url("../img/clickBar.png") repeat-x; color:#333; margin-left:3px;}
.joinUs_box table tr.cmntinfo_contents th {padding:20px 35px; text-align:left; border-top:2px solid #ccc;}


.joinUs_box table td span.id_select_ok {vertical-align:1px; line-height:22px; margin-left:5px; font-size:12px; letter-spacing:-0.3px;}
.joinUs_box table td span.pw_select_ok {vertical-align:1px; width:100%; display:block; float:left; font-size:12px;letter-spacing:-0.3px; margin:6px 0 0 0; line-height:17px;}
.joinUs_box table td .pd_3b{margin:0 3px; float:left; line-height:24px;}
.joinUs_box table td input {border:1px solid #ddd; line-height:22px; font-size:12px; padding:0 5px;}
.joinUs_box table td select{height:24px; float:left; font-size:12px; border:1px solid #ddd;}
.joinUs_box table td textarea{width:100%; height:300px; border:1px solid #ddd; overflow-y:scroll; margin:0; font-size:12px; line-height:16px; padding:5px; }
.joinUs_box table td a.btn-s{height:30px; line-height:28px; padding:0 10px; border-radius:3px; background:#f0f0f0; box-sizing:border-box; margin-left:20px; font-size:12px;}
.joinUs_box table td a.pop1{vertical-align:-11px;}
.joinUs_box .signText{height:200px; border:1px solid #ccc; box-sizing:border-box;  overflow-y:scroll;}
.joinUs_box .signClick{overflow:hidden;}
.register-box div.subject table td ul.fileplus li a{float:left; padding:0px 10px !important; margin-left:3px; color:#333; border-radius:3px; height:30px; line-height:28px; font-size:12px; font-weight:600; box-shadow:none; background:#f0f0f0; border:1px solid #ccc;} 

.joinUs_box .signClick input{vertical-align:-2px;}
.joinUs_box .signClick span{font-size:12px; font-weight:600;}

.joinUs_ul{display:table; margin-left:auto; margin-right:auto; clear:both;}
.joinUs_ul li{float:left;  list-style:none;}
.joinUs_ul li a{padding:5px 10px; margin-left:2px; border:1px solid #ccc; border-radius:2px; color:#333; font-size:12px; font-weight:600;}
.joinUs_ul li a.sign_ftbt_on{background:url("../img/clickBar.png") repeat-x;}

.joinUs_box table ul{padding:5px 0; overflow:hidden; list-style:none;}
.joinUs_box table ul li{width:100px; display:inline-block; float:left; line-height:20px;}

.rt-box .reg{font-size:13px; letter-spacing:-1px; line-height:28px; height:30px; padding:0 10px; border-radius:3px; color:#333; font-weight:600; border:1px solid #ddd; box-sizing:border-box;}
.rt-box .reg:hover{color:#fff;}
.rt-box .cmTit{font-size:15px; color:#333; font-weight:600;}

    .allbox .rt-box .cmTit {font-size: 16px;color:#333;font-weight:600;width:100%;text-align:right;}
    .allbox .rt-box .cmTit a:first-child {float:left;}
    .allbox .rt-box .cmTit > a:first-child {font-size: 22px;}

  /* community join btn */
    .allbox .rt-box .cmTit + a.usrReg {margin-top:-48px; margin-right:100px; padding:0 10px !important;}
    .allbox .rt-box .cmTit + a.usrReg:before {content:"+"; float:left; padding-right:5px;}
    .allbox .rt-box .cmTit + a.usrReg:hover {border:1px solid #333;}

    @media (max-width:599px){
    .allbox .rt-box .reg {font-size:0 !important; padding:0 5px !important; height:25px; line-height:23px !important;}
    .allbox .rt-box .reg:before {padding-right:1px;}

    .allbox .rt-box .cmTit + a.usrReg {margin-top:-58px; margin-right:30px; height:25px; line-height:25px !important; font-size:12px !important;}
    }




    .allbox #bbs_area .register-box {margin:10px 0 20px; padding:0; border:none;}
    .allbox #bbs_area .register-box input {height:30px;}

    .register-box table tr{border-bottom:1px solid #ddd}
    .register-box table tr:first-child{border-top:2px solid #444}

.basic-table {width:100%; border-top:1px solid #dcdcdc; border-bottom:1px solid #e9e9e9; border-collapse:collapse;}
.basic-table thead tr th {font-weight:600; color:#333; text-align:center; padding:15px 3px;}
.basic-table thead tr {background:#ececec;}
.basic-table tbody tr td {text-align:center; padding:10px 3px;}
.basic-table tbody tr:nth-child(even) td {background:rgba(241,241,241,0.5); line-height:18px;}
.basic-table tbody tr:nth-child(odd) td {background:#fff; line-height:18px;}
.basic-table tbody tr td span.bt {color:#fff; background:#898989; font-weight:400; font-size:11px; padding:3px 5px; line-height:15px; vertical-align:0px; margin:0 5px; display:inline-block; border-radius:2px;} /*답변완료*/

.basic-table01 {width:100%; border-top:2px solid #ddd; border-bottom:1px solid #f1f1f1; border-collapse:collapse; float:left; margin-bottom:20px;}
.basic-table01 thead tr th, .basic-table01 tbody tr td {text-align:center;padding: 15px 0;}
.basic-table01 thead tr th {font-size: 18px;padding: 20px 0;color:#333;border-bottom: 1px solid rgba(0,0,0,0.3);}
.basic-table01 thead tr {background:#fcfcfc; border-bottom:1px solid #f1f1f1;}

.basic-table01 tbody tr th{font-weight:700; font-size:13px; color:#626b7c; background:#fcfcfc; text-align:center;}
.basic-table01 tbody tr{border-bottom:1px solid #f1f1f1;}
.basic-table01 tbody tr td {background:#fff; color:#9a9a9a; font-size:12px; padding:15px 0 ; line-height:17px;}
.basic-table01 tbody tr td a {border-radius:3px; color:#9a9a9a; padding:3px 10px; font-size:16.5px;}
.basic-table01 tbody tr td a.btn-s{color:#fff;}

.menuallBox{clear:both; overflow:hidden; padding:20px 10px;}
.menuType{width:39%; height:500px; float:left; padding:20px; margin-right:1%; border:1px solid #f0f0f0; position:relative; box-sizing:border-box;}
.menuType div.ctr-box > a.btn-a{padding:6px 10px;}


.cmntMenuList ul li {line-height: 30px;margin: 0 0 10px;border: 1px solid #f3f3f3;background: #f9f9f9;color: #333;font-size: 16px;font-weight: 600;border-radius: 2px;padding: 10px 15px;list-style:none;width: 100%;float: left;box-sizing: border-box;}

.menuRegister {width:60%;/* height:500px; */float:left;padding:20px;border:1px solid #f0f0f0;box-sizing:border-box;}
.menuRegister > .joinUs_box {margin-top:31px;}
.menuRegister > .joinUs_box p {font-weight:800;font-size: 17px;line-height: 150%;}
.menuRegister > .joinUs_box table th{text-align:center;} 
.menuRegister > .joinUs_box table td{text-align:center;} 
.menuRegister > .joinUs_box table td ul{padding:0;}
.menuRegister > .joinUs_box table td ul li{/* float:left; width:80px; */ margin-right: 8px;} 
.menuRegister > .joinUs_box table ul li > input{vertical-align:-2px;}
.menuRegister > .joinUs_box table ul li > span{vertical-align:1px;}
.menuRegister + .rt-box{padding:0 10px; margin-top:10px; float:left;}
.menuRegister + .rt-box > .btn-s{line-height:12px; padding:6px 10px;}

.menuRegister > p, .menuType > p{font-size: 18px;color:#333;font-weight:800;padding:0;}

    @media (min-width:1300px){
        .sub_div_wrap > .subCon:only-child {float:none; margin:0 auto;}
    }
    @media (min-width:991px) and (max-width:1299px){
        .subCon {padding:0 10px;}
    }
    @media (max-width:799px){
        .menuallBox {padding:20px 0;}
        .menuType {width:100%; margin-right:0; height:auto; margin-bottom:20px;}
        .menuRegister {width:100%;}
    }


/* community inner - board tab */
div.step {width:100%;height:36px;float:left;border-bottom:1px solid #e1e1e1;margin:20px 0 10px;}
div.step > ul.tapMenuCmnt {clear:both; padding-left:5px; float:left;}
div.step > ul.tapMenuCmnt li {float:left; height:35px; background:#fff; margin-right:2px;}
div.step > ul.tapMenuCmnt li a {
                                height:35px;
                                line-height:35px;
                                display:block;
                                padding:0 15px;
                                background:#f9f9f9;
                                color:#333;
                                border-top:1px solid #ececec;
                                border-right:1px solid #ececec;
                                border-left:1px solid #ececec;
                                font-size: 17px;
                                box-sizing: border-box;
                                }
div.step > ul.tapMenuCmnt li a.on {height:33px; background:#fff; border-top:3px solid #1d212d; border-right:1px solid #e1e1e1; border-left:1px solid #e1e1e1; border-bottom:1px solid white;}
div.step > ul.tapMenuCmnt li a.on img {vertical-align:middle; margin:0 0 2px 4px;}
div.step > ul.tapMenuCmnt li a:hover {background:#f0f0f0;}
div.step > ul.tapMenuCmnt li a.on:hover {background:#fff;}
div.step + #cntnts_area {margin-top:0;}

  @media (max-width:799px){
        div.step {height:auto !important;}
        div.step > ul.tapMenuCmnt {width:100%;padding-left: 0 !important;}
        div.step > ul.tapMenuCmnt li {width:33.333%; margin-right:0; box-sizing:border-box;}
        div.step > ul.tapMenuCmnt li:nth-child(3n+1) {clear:both;}
        div.step + #cntnts_area {margin-top:30px;}
  }

/*board*/
.board001 {border:1px solid #e1e1e1; padding:10px; overflow:hidden; width:100%; float:left; box-sizing:border-box; margin-bottom:20px;}
.board001 .list_tit{border-bottom:1px dotted #ccc;padding:15px 10px 10px 10px;overflow:hidden;}
.board001 .list_tit h3{float:left; font-weight:600; font-size:16px; margin:0; line-height:27px;}
.board001 .list_tit h3 > img{vertical-align:-10px; margin-right:5px;}
.board001 .list_tit h3 > span.sub_title{ font-size:12px; border-left:1px solid #c1c1c1; padding-left:7px; vertical-align:1px; line-height:18px; height:18px; display:inline-block; margin-left:5px; font-weight:400; }
.board001 .list_tit h3 > span.qna{background:url("../img/q.png")no-repeat; padding:7px 5px 7px 34px;}
.board001 .list_tit h3 span.bt{color:#fff; background:#d9d9d9; font-weight:400; font-size:11px; padding:3px 5px; line-height:15px; vertical-align:2px; display:inline-block;}
.board001 .list_tit p.list_date{float:right;color:#bcbcbc; font-size:12px; margin:0;}
.board001 .list_tit p.list_date span.com_bar {margin-left:5px;}
.board001 .list_tit p.list_date span.com_bar > a{font-size:11px; color:#8e8e8e; margin:0 3px; }
.board001 .list_tit p.list_date span.com_bar > a:last-of-type{font-size:11px; border-left:1px solid #c1c1c1; padding-left:5px; color:#8e8e8e;}
.board001 .list_content{clear:both; position:relative;}
.board001 .list_content .conTop{padding:10px 10px 15px 10px;overflow:hidden;}
.board001 .list_content .conTop h4{display:inline-block; font-size:13px;}
.board001 .list_content .conTop p{float:right; font-size:11px; margin:0;}
.board001 .list_content .conTop p a{margin-left:2px; padding:2px 6px; font-size:11px; color:#fff; background:#ccc; border-radius:2px;}
.board001 .list_content .conTop div.fileBox{margin-top:10px; float:right; width:100%;}
.board001 .list_content .conTop ul {float:right; clear:both; margin-top:0px; padding:0; line-height:10px; }
.board001 .list_content .conTop ul li{background:url("../img/download.png")no-repeat 68px 1px; margin-top:7px; list-style:none;}
.board001 .list_content .conTop ul li a{padding-right:20px; font-size:12px;}
.board001 .list_content .conTop ul li a span{font-weight:900; color:#fa5058; padding:0 2px;}
.board001 .conMiddle{clear:both;padding-top:30px;}
.board001 .conMiddle div.conM_ytb{width:100%;;height:auto;margin:0;}
.board001 .conMiddle div.conM_ytb iframe{width:100%;height:350px;vertical-align:top;}
.board001 .conMiddle div.conM_ytxt{border-radius:30px; margin-top:10px; padding:10px;}
.board001 .conMiddle div.conM_ytxt > span{display:block; padding:10px 0; font-size:16px; font-weight:bold;}
.board001 .conMiddle div.conM_ytxt > div{height:80px; display:block; margin:0 auto; background:#f9f9f9; padding:10px; overflow-y:scroll;}
.board001 .conMiddle div.conM_txt{font-size:12px; padding:20px 10px;line-height:17px;}
.board001 .conMiddle ul{float:left;padding:15px 10px; margin:0;}
.board001 .conMiddle ul li{font-size:12px; float:left; list-style:none;}
.board001 .conMiddle ul li a{border-right:1px solid #999; padding-right:10px; margin-right:10px;}
.board001 .conMiddle ul li a:hover{color:#333;}
.board001 .conMiddle ul li:last-child a{border-right:none}
.board001 .conMiddle ul li span{margin-left:2px;}
.board001 .conMiddle ul li a.lu img{width:10px; height:11px;}
.board001 .conMiddle ul li a.lu b{vertical-align:2px; margin-left:5px;}
.board001 .conBottom{clear:both;}
.board001 .conBottom div.cmtbg{background:#f9f9f9;border:1px solid #ccc;border-radius:5px;padding:10px 20px;}
.board001 .conBottom div.cmtbg ul{padding:0; margin:0; list-style:none;}
.board001 .conBottom div.cmtbg ul li{border-bottom:1px dotted #ccc;padding:20px 0 15px 10px;position:relative; font-size:12px;}
.board001 .conBottom div.cmtbg ul li p.com_cont{padding:0; margin:0;}
.board001 .conBottom div.cmtbg ul li p.comm_cont{padding:0; margin:0; padding-left:5px;}
.board001 .conBottom div.cmtbg ul li ul{position:absolute; top:0; right:0;}
.board001 .conBottom div.cmtbg ul li ul li{float:left; border:none; padding-left:5px;}
.board001 .conBottom div.cmtbg ul li ul li a{border-right:1px solid #ccc; padding-right:5px; color:#666; font-size:11px;}
.board001 .conBottom div.cmtbg ul li ul li:last-child a{border-right:0;}
.board001 + .rt-box {float:left;}

.board001 table{width:100%;}
.board001 table thead td{font-weight:bold; font-size:12px; padding:10px 0 2px 6px;color:#252525; }
.board001 table tbody tr > td{padding-left:3px; line-height:12px;}
.board001 table tbody tr td div.txtBox{width:100%; border:1px solid #e5e5e5;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.board001 table tbody tr td > div {margin-top:10px;}
.board001 table tbody tr td textarea.txtBox{height:70px; width:100%;border:1px solid #e5e5e5;outline:none; padding:8px 10px; line-height:17px; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.board001 table tbody tr td input.txtBtn{height:70px; width:100%; font-size:12px; border:1px solid #e5e5e5;background:#ffffff;cursor:pointer;min-width:50px;outline:none;text-align:center;}
.board001 span.gray{color:#b5b5b5; margin:0 5px;}
.board001 .txtBox{font-size:12px; color:#333; }

.board001 .conBottom div.answer{background:#f9f9f9; border:1px solid #e1e1e1; border-radius:5px;padding:10px 20px;}
.board001 .conBottom div.answer ul {}
.board001 .conBottom div.answer ul li{border-bottom:1px dotted #ccc;padding:10px 0 15px 10px;position:relative;}
.board001 .conBottom div.answer ul li:last-child{border-bottom:none;}
.board001 .conBottom div.answer ul li p.comm_cont{padding:7px 2px;}
.board001 .conBottom div.answer ul li ul{position:absolute; top:0; right:0px;}
.board001 .conBottom div.answer ul li ul li{float:left; border:none; padding-left:5px;}
.board001 .conBottom div.answer ul li ul li a{border-right:1px solid #ccc; padding-right:5px; color:#666; font-size:11px;}
.board001 .conBottom div.answer ul li ul li:last-child a{border-right:0;}
.board001 .conBottom > div.ctr-box {margin:10px 0 0 0;} 


.signUp001 h3{font-size:14px; font-weight:700; padding:10px 0;}
.signUp001 .signUp_wrap{border-top:2px solid #232323; box-sizing:border-box;}
.signUp001 .signUp_wrap .signText{width:100%; height:200px; line-height:20px; font-size:12px; border:1px solid #ccc; box-sizing:border-box; overflow-y:scroll; padding:10px;}
.signUp001 .signUp_wrap .signClick{overflow:hidden;}
.signUp001 .signUp_wrap .signUp_box > span.cmTit{font-size:13px; font-weight:900; color:#333;}


.signUp001 .signUp_wrap .signClick input {vertical-align:-2px;}
.signUp001 .signUp_wrap .signClick span {font-size:12px; font-weight:600; padding-left:3px; vertical-align:2px;}


  @media (max-width:599px){
    .allbox .rt-box .cmTit {font-size:18px}

    #cntnts_area .community-box {margin-top:0;}
    #cntnts_area form div.search-box.mt10 {padding:0;}
  }


#cntnts_area {margin-top:20px;}
#cntnts_area .joinUs_box #mngrFrm > table tr td > img {width:auto; max-width:230px;}
#cntnts_area .joinUs_box #mngrFrm table tr td #smart_editor2 {width:100% !important;}




/* 아이콘 변경팝업 */
.community-icon-pop {}
.community-icon-pop .tab_item ul {width:100%; padding:13px; box-sizing:border-box;}
.community-icon-pop .tab_item ul li {width:14.28%; padding:3px; margin-bottom:0; border-top:none; }
.community-icon-pop .tab_item ul li:nth-child(7n+1) {clear:both;}
.community-icon-pop div.pop-main-reon {width:100%; float:left; padding:15px; box-sizing:border-box;}
.community-icon-pop div.pop-main-reon input[type=text] {width:100%; float:left; margin-top:15px; font-size:13px; color:#737373; border:none;}
.community-icon-pop div.pop-main-reon input[type=file] {border:none; position:absolute; width:0; height:0;}
.community-icon-pop div.pop-main-reon label {width:100%; height:35px; float:left; line-height:35px; border:1px dashed #838383; border-radius:3px;
                                            text-align:center; cursor:pointer; box-sizing:border-box;}
.community-icon-pop div.pop-main-reon a {width:20%;}

.community-icon-pop div.icon-view {width:100%; float:left; padding:15px; box-sizing:border-box;}
.community-icon-pop div.icon-view img {width:auto; max-width:100%;}

.community-icon-pop div.icon-view + button {width:94%; margin:0 3%;}

section.buttons > label[for=select_icon]:before {content:url(/images/wzwg/site/mngr/widget_gallery.png);} 
section.buttons > label[for=upload_icon]:before {content:url(/images/wzwg/site/mngr/upload.png);} /* 아이콘 만들어야함*/