@charset "utf-8";
    /*
        author : jinwoo.jace, front-developer

        info: 
                    
        ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

        changes
        - 20210326 : initially created
    */
    
    


/* 제보등록 형식안내 팝업창 */
.doReport_guide_popup, .doReport_popup{
	display: none;
	position: fixed;
	z-index: 999999;
	top: 61px; left: 50%;	
	transform: translateX(-50%);
	width: 1260px;	
	border-radius: 3px;
	box-shadow: 0 14px 30px 0 rgba(0, 0, 0, 0.6);
	border: solid 1px #9398a6;
	background-color: #f3f5f8;
}

.doReport_head{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 46px;  
	padding: 0 10px 0 26px;
	background-color: #4b535f;
}
.doReport_head > h3{
	font-size: 17px;
	font-weight: bold;  
	color: #fff;	
	line-height: 46px;
}
.close_doReport_icn{	
	width: 28px;
	height: 28px;
	background: url(/images/btn-close-b-n.svg) no-repeat center;	
}


.doReport_guide_contents{
	padding: 16px 25px 0;
	margin: 0 -6px;
}
.article_outer{
	float: left;
	width: 50%;
	padding: 0 6px;
}
.article_outer:nth-of-type(n+3){
	margin-top: 12px;
}
.article_outer:nth-last-of-type(1){
	margin-bottom: 30px;
}
.doReport_type{	
	display: flex;
	height: 352px;
	padding: 10px 13px 14px;	
	border: solid 1px #d0d0d0;
	border-radius: 4px;
	background-color: #fff;
	cursor: pointer;
}
.doReport_type:hover{
	box-shadow: 0 6px 10px 0 rgba(37, 80, 117, 0.8);
	border-color: #b2b2b2;
}
.doReport_type:hover *{
	cursor: pointer;
}
.doReport_type .left_column, .doReport_type .right_column{
	width: 50%;
	flex-grow: 1;
	
}
.doReport_type .left_column{
	padding-right: 4px;
}
.doReport_type .right_column{	
	padding-left: 4px;
}
.doReport_type .right_column h4{
	margin-bottom: 3px;
}
.doReport_type h4{
	font-size: 15px;    
	font-weight: bold;
	color: #333;
}
.doReport_type input, .ipt_desc {	
	text-indent: 0;
	width: 100%;
	height: 24px;
	border: solid 1px #c4c4c4;
	padding-left: 6px;
	background-color: #fff;
}
.ipt_desc{
	height: 90px;
	max-height: 90px;	
}
.scroll-wrapper .scroll-content .ipt_desc{
	padding: 3px 6px 6px;	
	font-size: 14px
}
.scroll-wrapper .scroll-content .ipt_desc.scrollbar-inner{
	padding: 7px 10px;
}
.scroll-wrapper .scroll-content .ipt_desc.scrollbar-inner::placeholder{
	font-size: 14px;
	color: #999;
	line-height: 1.2;
}
.doReport_type input::placeholder, .doReport_type input[type=date]::placeholder, .ipt_desc::placeholder {
	font-size: 13px;  
	color: #999;
	line-height: 1;
}
input:-ms-input-placeholder{
	font-size: 13px;  
	color: #999;
	line-height: 1;
}
.doReport_write input::placeholder{
	color: #999;
}
.doReport_write input:-ms-input-placeholder{
	color: #999;
}
textarea:-ms-input-placeholder{
	font-size: 13px;  
	color: #999;
	line-height: 1.2;
}

.ipt_report_title{
	margin: 3px 0 6px;
}

.drag_and_drop{
	height: 150px;	
	border-radius: 3px;
	border: 2px dashed #c2c7d0;
	background-color: #f3f5f8;
}
.drag_and_drop > p{
	margin: 40px 0 27px;
	font-size: 13px;  
	color: #666;
	text-align: center;
}
.find_file{
	width: 100px;
	height: 30px;
	margin: 0 auto;
	box-shadow: 0 4px 8px 0 rgba(12, 12, 94, 0.24);
	background-color: #5b5bee;
	font-size: 13px;
	font-weight: bold;	
	color: #fff;
	appearance: none;
}
.close_doReport{
	width: 152px;
	height: 42px;
	margin: 0 auto 40px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	background-color: #424242;
	font-size: 16px;
	font-weight: bold;  
	color: #fff;
}


.doReport_info > li > label, .example_guide_info > dt{
	position: relative;
	padding: 3px 0 0 7px;
	font-size: 13px;
	font-weight: bold;  
	color: #111;
}
.example_guide_info > dt{	
	width: 23.5%;
	padding-top: 0 ;
}
.example_guide_info > dt:nth-of-type(n+2), .example_guide_info > dd:nth-of-type(n+2){
	margin-top: 3px;
}
.doReport_info > li > label::after, .example_guide_info > dt::after {
	content: '';
	position: absolute;
	top: 10px; left: 0;
	width: 4px;
	height: 4px;  
	background-color: #333;	
}
.example_guide_info > dt::after{
	top: 7px;
}
.example_guide_info > dd::after{
	content: '';
	display: block;
	clear: both;
}
.doReport_info > li{
	display: flex;
	justify-content: space-between;
}
.doReport_guide_popup .wrap_ipt_date, 
.doReport_info > li input, .ipt_desc{
	width: 220px;
}
.doReport_guide_popup .icon_ipt_date{
	background-position: center 6px;
	background-size: 11px 10px;
}

.doReport_guide_popup .doReport_sad .wrap_ipt_date, .doReport_sad .wrap_ipt_time,
.doReport_guide_popup .doReport_joyful .wrap_ipt_date, .doReport_joyful .wrap_ipt_time{
	position: relative;
	width: 110px;
}
.doReport_guide_popup .doReport_sad .wrap_ipt_time > input, 
.doReport_guide_popup .doReport_joyful .wrap_ipt_time > input{
	border-left: 0;
}
.doReport_guide_popup .doReport_sad .ipt_date, .doReport_guide_popup .doReport_sad .ipt_time, 
.doReport_guide_popup .doReport_joyful .ipt_date, .doReport_guide_popup .doReport_joyful .ipt_time{
	flex-grow: 1;
	width: 1px;
	font-size: 14px;
}
.doReport_sad .wrap_ipt_date,
.doReport_joyful .wrap_ipt_date{
	border-right: 0;
	margin-left: auto;
}
.doReport_sad .wrap_ipt_time > .icon_ipt_time,
.doReport_joyful .wrap_ipt_time > .icon_ipt_time{	
	width: 24px;
	height: 24px;	
	background: #f3f5f8 url("/images/icn-clock-n.svg") no-repeat center 5px / 13px 12px
}
.doReport_sad .ipt_desc,
.doReport_joyful .ipt_desc{
	height: 62px;
}
.doReport_etc .ipt_desc{
	height: 118px;
	padding-top: 4px;
}
.doReport_etc .ipt_desc::placeholder{
	line-height: 1.38;	
}
.doReport_info_items:first-child{
	margin-top: 6px;
}
.doReport_info_items:nth-child(n+2){
	margin-top: 4px;
}

*::placeholder{
	letter-spacing: -.075em;
}

.doReport_guide_example{
	height: 304px;
	border: solid 1px #c4c4c4;
	background-color: #fff
}
.doReport_guide_example > h5{
	padding-left: 7px;
	margin: 8px 0 9px;
	font-size: 13px;
	font-weight: bold;  
	color: #111;
}
.example_guide_img{
	width: 280px;
	height: 150px;
	background-color: #e1e1e1;
}
.example_guide_img > img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.example_guide_info{
	display: flex;
	flex-wrap: wrap;
	padding: 6px 8px 0 7px;	
}
.example_guide_info > dd{
	width: 76.5%;
	font-size: 13px;  
	color: #111;
}
.example_guide_info > dd:after {
	content: '';
	display: block;
	clear: both;	
}




/* 제보 등록/수정하기 팝업, Start */
.doReport_popup{
	
}
.doReport_contents{	display: flex; }

/* 1) 좌측 - TabMenu 영역  */
.doReport_tabMenu{
	flex-shrink: 0;
	width: 100px;	
	background-color: #616b7a;
}
.doReport_tabMenu > li{
	position: relative;
	display: flex;	
	justify-content: center;
	align-items: center;
	height: 134px;
	cursor: pointer;
}
.doReport_tabMenu > li::after {
	content: '';
	position: absolute;
	left: 50%; 	bottom: 0;
	transform: translateX(-50%); 
	width: 80px;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.2);
}
.doReport_tabMenu > li > span{
	width: 100%;
	text-align: center;
	font-size: 16px;
	font-weight: bold;  
	color: #f3f5f8;	
}

.doReport_tabMenu > li > span::before{
	content: '';
	display: block;
	width: 100%;
	height: 64px;
	margin-bottom: 9px;
	background-repeat: no-repeat;
	background-position: center;
}
.sympathyMenu > span::before{ background-image: url('/images/icn-newsreport-hr-n.svg') }
.sadMenu > span::before{ background-image: url('/images/icn-newsreport-rip-n.svg') }
.joyfulMenu > span::before{ background-image: url('/images/icn-newsreport-celeb-n.svg') }
.etcMenu > span::before{ background-image: url('/images/icn-newsreport-etc-n.svg') }

.doReport_tabMenu > li:hover > span{ color: #a8d2fc; }
.sympathyMenu:hover > span::before{ background-image: url('/images/icn-newsreport-hr-h.svg') }
.sadMenu:hover > span::before{ background-image: url('/images/icn-newsreport-rip-h.svg') }
.joyfulMenu:hover > span::before{ background-image: url('/images/icn-newsreport-celeb-h.svg') }
.etcMenu:hover > span::before{ background-image: url('/images/icn-newsreport-etc-h.svg') }

.doReport_tabMenu > li.selected{ background-color: #fff; }
.doReport_tabMenu > li.selected > span{	color: #333; }
.sympathyMenu.selected > span::before{ background-image: url('/images/icn-newsreport-hr-s.svg') }
.sadMenu.selected > span::before{ background-image: url('/images/icn-newsreport-rip-s.svg') }
.joyfulMenu.selected > span::before{ background-image: url('/images/icn-newsreport-celeb-s.svg') }
.etcMenu.selected > span::before{ background-image: url('/images/icn-newsreport-etc-s.svg') }



/* 2) 우측 - 등록/수정 및 예시 영역  */

.doReport_write, .doReport_example{
	flex-grow: 1;
	width: 50%;
	padding: 12px 26px 0;
}
.doReport_write{ padding-bottom: 40px; background-color: #fff; }
.doReport_example{ padding-bottom: 20px; background-color: #f3f5f8; }

.doReport_write h4, .doReport_example h4{ margin-bottom: 8px; font-size: 22px; font-weight: bold; color: #333; }
.doReport_write strong, .doReport_example strong{ font-size: 14px; font-weight: bold; color: #999; }
.doReport_write input{ height: 36px; border: solid 1px #c4c4c4; background-color: #fff; font-size: 14px; }
.ipt_doReport_title{ width: 100%; margin: 4px 0 8px; }
.doReport_metaInfo, .example_metaInfo{ display: flex; font-size: 14px; color: #666; }
.example_metaInfo{ margin-bottom: 12px; }

.dot{ position: relative; padding-right: 9px; }
.dot:after{
	content: '';
	position: absolute;
	top: 8px; right: 0;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #d4d8de
}
.m6{ margin: 0 6px; }


/* Drag & Drop 영역, Start */
.doReport_drag_and_drop{
	height: 297px;  
	padding-top: 50px;
	margin: 12px 0;
	border-radius: 3px;
	border: dashed 2px #c2c7d0;
	background-color: #f3f5f8;
	text-align: center;	
}
.dad_desc{
	margin: 34px 0 4px;
	font-size: 15px;
	font-weight: bold;
	color: #333;
}
.dad_subDesc{
	font-size: 14px;
	color: #666;
}
.doReport_drag_and_drop .find_file{
	display: block;
	width: 152px;
	height: 42px;
	line-height: 42px;
	margin-top: 20px;
	font-size: 16px;
	cursor: pointer;
}
/* Drag & Drop 영역, End */

/* 이미지 첨부된 상태, Start */
.doReport_uploaded_img{
	position: relative;
	height: 297px;	
}
.doReport_uploaded_img > img{
	width: 100%;
	height: 100%;
	object-fit: contain;
} 
.img_controller{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 50px;  
	background-color: rgba(0, 0, 0, 0.54);	
}
.img_controller > button{
	position: relative;
	width: 70px;
	height: 30px;	
	border-radius: 2px;
	background-color: #dfe0f0;
	font-size: 14px;
	font-weight: bold;  
	color: #3434b3;
}
.img_controller > button::before{
	content: '';
	display: inline-block;	
	width: 13px;
	height: 13px;
	margin-right: 10px;
	background-position: center;
	background-repeat: no-repeat;
}
.delete_img{ margin: 0 10px 0 4px; }
.modify_img::before{ background-image: url('/images/icn-imgupload-edit.svg')}
.delete_img::before{ background-image: url('/images/icn-upload-delete.svg')}
.img_controller > button:hover{
	background-color: #c1c3ea;
}
/* 이미지 첨부된 상태, End */



.format{
	margin: 12px 0 30px;
}
.format > label{
	display: inline-flex;
	align-items: center;
	position: relative;
	font-size: 14px;
	color: #333;
	cursor: pointer;
}
.doReport_btn{
	display: flex;
	justify-content: center;
}
.doReport_btn > button{
	width: 152px;
	height: 42px;	
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);	
	font-size: 16px;
	font-weight: bold;  
	color: #fff;
}
.cancel_doReport{
	background-color: #424242;
}
.update_doReport{
	margin-left: 4px;
	background-color: #5b5bee;
}

.example_img_type, .example_text_type{
	padding: 12px 16px 18px;
	border: solid 1px #dbdbdb;
	background-color: #fff;
}
.example_text_type{
	margin-top: 10px;
}
.example_img{
	height: 296px;	
	background-color: #e1e1e1;
}
.example_img > img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.doReport_example h5{
	margin: 6px 0;
	font-size: 17px;
	font-weight: bold;
	color: #111111;
}

.fr_format .ipt_desc{
	height: 162px;
	max-height: 162px;
}






/* 등록형식안내 CSS -> 제보등록 CSS 로 덮어쓰기 , Start */
.doReport_write .doReport_info > li input, .doReport_write .ipt_desc{ width: 454px; }
.doReport_write .doReport_info > li > label{ padding: 6px 0 0 10px; font-size: 14px; }
.doReport_example .example_guide_info{ margin-top: 12px; }
.doReport_write .doReport_info > li > label::after{ top: 13px }
.doReport_write .icon_ipt_date, .doReport_write .icon_ipt_time{ width: 36px; height: 36px; }
.doReport_write .format input { height: 16px }
.doReport_example .example_guide_info{ padding-top: 0 }
.doReport_example .example_guide_info > dt, .doReport_example .example_guide_info > dd{ font-size: 14px }
.doReport_example .example_guide_info > dt{ width: 15.5%; padding-left: 10px }
.doReport_example .example_guide_info > dd{ width: 84.5% }


.wrap_ipt_date, .wrap_ipt_time{	display: flex; width: 454px; }

.icon_ipt_date{	
	flex-shrink: 0;
	width: 24px;
	height: 100%;
	border: solid 1px #c4c4c4;
	border-left: 0;
	background: #f3f5f8 url("/images/icn-calendar-n.svg") no-repeat center 9px / 16px 16px;
	cursor: pointer;	
}
.icon_ipt_time{	
	flex-shrink: 0;
	width: 24px;
	height: 100%;
	border: solid 1px #c4c4c4;
	border-left: 0;
	background: #f3f5f8 url("/images/icn-clock-n.svg") no-repeat center 8px / 17px 17px;
	cursor: pointer;	
}

.doReport_write .scd_trd_format .wrap_ipt_date, 
.doReport_write .scd_trd_format .wrap_ipt_time{	position: relative;	width: 227px; }
.doReport_write .scd_trd_format .ipt_time{ border-left: 0px; }
.doReport_write .scd_trd_format .wrap_ipt_date{	margin-left: auto; }

.doReport_write .wrap_ipt_date:hover > .icon_ipt_date{ background-image: url("/images/icn-calendar-hp.svg"); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2); }
.doReport_write .wrap_ipt_time:hover > .icon_ipt_time{ background-image: url("/images/icn-clock-hp.svg"); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2); }

.close_doReport:hover, .cancel_doReport:hover{ background-color: #5f5f5f; }
.update_doReport:hover, .doReport_drag_and_drop .find_file:hover{ background-color: #7878fe; }
.fst_format, .scd_trd_format, .fr_format{ display: none; }
.fr_format.hideDeleteFormat + .format{ display: none; }
.hideDeleteFormat{ margin-bottom: 30px; }
.fst_example, .scd_example, .trd_example, .fr_example{ display: none; }


/* 제보수정 시, 분기처리 */
.doReport_popup.modifyMode{ width: 682px; }
.doReport_popup.modifyMode .doReport_example{ display: none; }
.doReport_info .modifier{ display: none; }
.doReport_popup.modifyMode .modifier{ display: flex; }
.doReport_popup.modifyMode .doReport_write .wrap_ipt_date,
.doReport_popup.modifyMode .doReport_write .doReport_info > li input, 
.doReport_popup.modifyMode .doReport_write .ipt_desc,
.doReport_popup.modifyMode .doReport_write .doReport_info .doReport_metaInfo{ width: 439px; }
.doReport_popup.modifyMode .doReport_write .doReport_info .doReport_metaInfo{ align-items: flex-end; padding-left: 2px; }
.doReport_info .add_mt7{ margin-top: 7px; }
.doReport_popup.modifyMode .doReport_write .scd_trd_format .wrap_ipt_date, 
.doReport_popup.modifyMode .doReport_write .scd_trd_format .wrap_ipt_time{ width: 219.5px; }


.dimmed_layer{
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom:0;
	background-color: transparent;
	z-index: 9999998;
}
.change_format, .change_tabMenu{	
	display: none;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999999;
    width: 420px;
    height: 200px;
    border-radius: 3px;
    box-shadow: 0 20px 30px 0 rgb(0 0 0 / 60%);
    border: solid 1px #9398a6;
    background-color: #f3f5f8;
}
.change_format p, .change_tabMenu p{	
    padding: 46px 0 28px;
    line-height: 1.47;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #333;
}
.close_popup{
	position: absolute;
    top: 9px;
    right: 9px;
}
/* 등록형식안내 CSS -> 제보등록 CSS 로 덮어쓰기 , End */

/* 제보 등록/수정하기 팝업, End */