@charset "utf-8";
/* COMMON */
.bbs_badge{
	display:inline-block; font-size:0.875em; font-weight:600; padding:5px 14px; background-color:#fff !important; border-radius:30px; border:1px solid;
	&.grey{color:#666; border-color:#666;}
	&.pink{color:#e62b5f; border-color:#e62b5f;}
	&.orange{color:#f69735; border-color:#f69735;}
}

.period_select{display:flex; flex-wrap:wrap;}
.period_select input{width:calc(50% - 57px);}
.period_select .btn{line-height:0; padding:14px; margin-left:5px;}
.period_select .btn img{width:14px; filter:invert(100%);}
.period_select .bar{width:20px; line-height:42px; text-align:center;}


/* SEARCH */
.bbs_search{
	align-items:flex-end; justify-content:space-between; margin-bottom:30px;
	> .total{
		align-items:center; padding-left:10px; position:relative;
		> li{
			font-size:0.89em; letter-spacing:0; color:#505050; position:relative;
			&:first-child{
				color:#000; padding-right:20px;
				&:after{content:''; width:1px; height:12px; background-color:rgba(0,0,0,0.2); position:absolute; top:6px; right:10px;}
			}
		}
		&:after{content:''; width:4px; height:4px; border-radius:4px; background-color:var(--mainColor1); position:absolute; top:10px; left:0;}
	}
	> .search_frm{
		width:100%; max-width:600px; align-items:center; gap:5px;
		> select{width:180px;}
		> input{width:calc(100% - 238px);}
		> button{
			width:48px; height:48px; line-height:0; border-radius:10px;
			> img{width:20px; filter:invert(100%);}
		}
	}
}


/* PAGER */
.bbs_pager{
	margin-top:50px;
	> ul{
		align-items:center; justify-content:center; gap:4px;
		> li{
			> a{display:block; width:46px; border-radius:40px; font-size:0.89em; color:#808080; line-height:46px; text-align:center;}
			&.arrow{
				> a{
					line-height:0; border:2px solid #dedede; padding:13px;
					> img{width:16px;}
				}
				&.prev{margin-right:20px;}
				&.next{margin-left:20px;}
			}
			&.on{
				> a{background:var(--basicGra); font-weight:600; color:#fff;}
			}
		}
	}
}


/* LIST */
.bbs_list{
	position:relative;
	> .bbs_ltype01{border-top:1px solid #4c4f58;}
}

.bbs_list .bbs_ltype01 th, .bbs_list .bbs_ltype01 td{text-align:center; border-bottom:1px solid #ddd;}
.bbs_list .bbs_ltype01 thead th{background-color:#fff6ec; padding:23px 10px; letter-spacing:0;}
.bbs_list .bbs_ltype01 tbody tr{
	cursor:pointer;
	&:hover{background-color:#f9f9f9;}
}
.bbs_list .bbs_ltype01 tbody td{
	color:#747474; padding:23px 10px;
	&.subject{
		padding:23px; text-align:left;
		> p{font-weight:500; line-height:1.3em; color:#000;}
	}
}


/* VIEW */
.bbs_view{
	> .bbs_v_top{
		padding:40px; align-items:center; justify-content:space-between; border-top:1px solid #000; border-bottom:1px solid #ddd;
		> button{
			line-height:0; padding:28px; border-radius:80px; background-color:#fff; border:2px solid #ddd; transition:all 0.3s;
			> img{width:20px; filter:invert(65%) sepia(48%) saturate(0%) hue-rotate(75deg) brightness(89%) contrast(90%);}
			&.prev_list{
				> img{transform:rotate(180deg);}
			}
			&:hover{
				border-color:var(--mainColor1);
				> img{filter:var(--mainFilter1);}
			}
		}
		> .subject{
			width:calc(100% - 160px); padding:0 30px; text-align:center;
			> h2{font-size:1.78em; line-height:1.3em; word-break:keep-all;}
			> .date{
				display:inline-block; margin-top:20px; padding-left:24px; color:#808080; position:relative;
				&:after{content:''; width:18px; height:18px; background:url(/_res/bcm/img/contents/ic_calendar.svg) no-repeat center; background-size:cover; opacity:0.4; position:absolute; top:3px; left:0;}
			}
		}
	}
	> .bbs_v_file{
		padding:40px 40px 0;
		> ul{
			width:100%; padding:40px; background-color:#f5f5f5;
			> li{
				padding-left:30px; margin-bottom:10px; position:relative;
				> a{
					display:inline-block; font-size:0.89em; color:#666; word-break:break-all;
					&:hover{color:#000;}
				}
				&:after{content:''; width:18px; height:18px; background:url(/_res/bcm/img/contents/ic_download.svg) no-repeat center; background-size:cover; filter:var(--mainFilter1); position:absolute; top:3px; left:0;}
				&:last-child{margin-bottom:0;}
			}
			
		}
	}
	> .bbs_v_con{
		padding:80px 40px; font-size:1rem; line-height:1.6em; border-bottom:1px solid #ddd;
	}
	> .bbs_v_con img{max-width:100%;}
}


/* TABLE */
.tbl_con .inner{
    margin-bottom:80px;
    &:last-child{margin-bottom:0;}
}

.tbl_caption{
    align-items:center; justify-content:space-between; margin-bottom:15px;
    > h1{width:100%; font-size:2em; font-weight:500; line-height:1.2em; color:#444; margin-bottom:10px;}
    > h2{
        font-size:1.67em; line-height:1.2em;
        > small{font-size:1rem; font-weight:normal;}
    }
	> .btn_area .btn{
		font-weight:500;
		> img{
			width:16px;
		}
		&.lgrey > img{filter:invert(42%) sepia(1%) saturate(2%) hue-rotate(345deg) brightness(92%) contrast(87%);}
		&.dgrey > img{filter:invert(100%);}
	}
}

.tbl_chk{
    flex-wrap:wrap;
    > li{margin:5px 30px 5px 0;}
}

.scroll_tbl{overflow-y:auto;}
.scroll_tbl table{
    > tbody th{
        padding:10px; font-weight:500; color:#333;
        &.head{background-color:#fff1c7;padding:15px;font-weight:600;color:#000;}
    }
    > tbody td{padding:10px; text-align:center;}
}

table textarea{width:100%; resize:none;}
table .basic_ipt{width:100%; max-width:540px;}
table .full_ipt{width:100%;}
table .byte_num{width:100%; line-height:1.3em; color:#6f6f6f; margin-top:10px;}
table .label_type{
	width:100%; position:relative;
	> .marker{
        display:flex; flex-direction:column; align-items:center; justify-content:center; width:100px; height:100%; background-color:var(--mainColor2); border-radius:10px 0 0 10px; font-size:0.88rem; font-weight:600; text-align:center; color:#fff; position:absolute; top:0; left:0;
        &.sub{width:50px; background-color:#eee; border-radius:0 10px 10px 0; border:1px solid #d1d1d1; border-width:1px 1px 1px 0; color:#aaa; left:auto; right:0;}
    }
	> .basic_ipt, > .full_ipt{padding-left:115px;}
    &.subtype{
        max-width:540px;
        > .basic_ipt, > .full_ipt{padding-right:65px;}
    }
}
table .bar_list{
    align-items:center; justify-content:center; row-gap:5px;
    > li{
        padding-right:20px; position:relative;
        &:after{content:''; width:1px; height:14px; background-color:rgba(0,0,0,0.2); position:absolute; top:8px; right:10px;}
        &:last-child{
            padding-right:0;
            &:after{display:none;}
        }
    }
}
table td .inline_form:last-child{margin-bottom:0 !important;}
table .inline_form{
    display:flex; flex-wrap:wrap; align-items:center; margin-bottom:10px; position:relative;
    &.ipt_text > .guide{
		font-size:0.89em; color:#808080; line-height:1.3em; text-align:left; margin-left:15px;
		&.block{width:100%; margin-left:0; margin-top:10px;}
	}
    &.ipt_name{
        width:100%; max-width:540px;
        > div{
            width:calc(50% - 2px); margin-right:4px;
            &:last-child{margin-right:0;}
        }
    }
    &.ipt_tel{
        > input[type="tel"]{width:calc(33.33% - 13.33px); max-width:166.66px;}
    }
    &.ipt_button{
        width:100%; max-width:540px; align-items:stretch;
        > input{width:calc(100% - 144px);}
        > .btn{width:140px; border-radius:10px; font-size:0.88em; font-weight:600; text-align:center; margin-left:4px;}
    }
	&.ipt_imgfile{
		align-items:flex-start;
		> .imgbox{
			width:150px; height:200px; line-height:0; border-radius:10px; border:1px solid #ddd; background:url(/_res/bcm/img/contents/imgupload_bg.svg) no-repeat center; background-size:30%; position:relative; overflow:hidden;
			> img{width:100%; position:absolute; top:0; left:50%; transform:translateX(-50%);}
		}
		> .uploadbox{
			width:calc(100% - 150px); max-width:390px; padding-left:10px;
		}
	}
    &.ipt_calendar{
        width:100%; max-width:540px; align-items:stretch;
        > input{width:calc(100% - 52px);}
        > .btn{
            width:48px; border-radius:10px; margin-left:4px;
            > img{width:16px; filter:invert(100%);}
        }
    }
    &.ipt_mail{
        width:100%; max-width:540px;
        > input{width:calc(50% - 10px);}
        > .bar{font-size:0.89em;}
    }
    &.ipt_time{
        width:100%; max-width:540px;
        > input{width:calc(50% - 25px); max-width:100px;}
        > .bar{margin-right:10px;}
    }
    > .bar{display:block; width:20px; text-align:center; color:#686868;}
}

.tbl_basic{
	border-top:1px solid #000;
	> tbody tr th{background-color:#fffcec;}
	&.tbl_style01 thead th{background-color:#fff1c7; font-size:1.22em; line-height:1.3em; border-width:0 0 1px 0;}
	&.tbl_style02 tbody td{text-align:center; word-break:break-all;}
    &.tbl_style04 thead th{background-color:#fffcec;}
    &.tbl_style04 tbody td{text-align:center;} 
}
.tbl_basic th, .tbl_basic td{padding:15px; border:1px solid #ddd; border-width:0 1px 1px 0;}
.tbl_basic th{
	font-weight:600; word-break:keep-all;
	&:last-child{border-width:0 0 1px 0;}
}
.tbl_basic td{
    color:#666;
    &:last-of-type{border-width:0 0 1px 0;}
    &.diagonal{
        position:relative;
        &:before{content:''; width:100%; height:100%; background:linear-gradient(to top left, transparent 49%, #ddd 50%, transparent 51%) #f0f0f0; pointer-events:none; position:absolute; top:0; left:0;}
    }
}

.tbl_narrow{
	border-top:1px solid #000;
	> tbody tr th{background-color:#fffcec;}
	&.tbl_style01 thead th{background-color:#fff1c7; font-size:1.22em; line-height:1.3em; border-width:0 0 1px 0;}
	&.tbl_style02 tbody td{text-align:center; word-break:break-all;}
    &.tbl_style04 thead th{background-color:#fffcec;}
    &.tbl_style04 tbody td{text-align:center;} 
}
.tbl_narrow th, .tbl_narrow td{padding:10px; border:1px solid #ddd; border-width:0 1px 1px 0;}
.tbl_narrow th{
	font-weight:600; word-break:keep-all;
	&:last-child{border-width:0 0 1px 0;}
}
.tbl_narrow td{
    color:#666;
    &:last-of-type{border-width:0 0 1px 0;}
    &.diagonal{
        position:relative;
        &:before{content:''; width:100%; height:100%; background:linear-gradient(to top left, transparent 49%, #ddd 50%, transparent 51%) #f0f0f0; pointer-events:none; position:absolute; top:0; left:0;}
    }
}


.tbl_style02{border-top:1px solid #000;}
.tbl_style02 th, .tbl_style02 td{padding:20px 15px; border:1px solid #e1e2e6; border-width:0 1px 1px 0; text-align:center; line-height:1.6;}
.tbl_style02 th{background-color:#efefef;font-weight: 600;}
.tbl_style02 td:last-of-type{border-width:0 0 1px 0;}
.tbl_style02 tbody th{background-color:#f5fafd; font-weight:500;}

.tbl_style03 th, .tbl_style03 td{padding:15px; border:1px solid #ddd; border-width:0 1px 1px 1px; text-align:center; font-size:16px; color:#666;}
.tbl_style03 th{background-color:#393939;font-weight: 600; color:#fff;}
.tbl_style03 .td_br{line-height:2;}
.tbl_style03 td p b{color:#000;font-weight: 500;}

/* RESPONSIVE */
@media screen and (max-width:1280px){
	/* LIST */
	.bbs_list .bbs_ltype02{gap:50px 30px;}
	
	
	/* TABLE */
	table .inline_form{
		flex-wrap:wrap;
		&.ipt_text > .guide{width:100%; margin-left:0; margin-top:10px;}
	}
}


@media screen and (max-width:960px){
	/* SEARCH */
	.bbs_search{
		flex-direction:column-reverse; row-gap:20px; margin-bottom:15px;
		> .search_frm{margin:0 auto;}
	}
	
	
	/* PAGER */
	.bbs_pager{margin-top:60px;}

	
	/* VIEW */
	.bbs_view{
		> .bbs_v_top{
			padding:30px 0;
			> button{padding:23px;}
			> .subject{
				width:calc(100% - 140px); padding:0 20px;
			}
		}
		> .bbs_v_file{
			padding:30px 0 0;
			> ul{padding:30px;}
		}
		> .bbs_v_con{
			padding:60px 0;
		}
	}
	
	
	/* TABLE */
	.tbl_con .inner{margin-bottom:60px;}

	.tbl_caption{
        > h1{font-size:1.67em;}
        > h2{font-size:1.5em;}
    }

    table .bar_list{
        > li{
            &:after{top:6px;}
        }
    }

	.tbl_style01 colgroup{display:none;}
	.tbl_style01 thead, .tbl_style01 tbody{display:block; width:100%;}
	.tbl_style01 thead tr{
		display:block; width:100%; padding:0;
		> th{display:block; width:100%; padding:12px;}
	}
	.tbl_style01 tbody tr{
		display:flex; flex-wrap:wrap;
		> th{width:20%; display:flex; align-items:center; justify-content:center;}
		> td{
            width:80%; border-width:0 0 1px 0;
            > .scroll_tbl table{width:800px;}
            > .scroll_tbl colgroup, > .scroll_tbl tbody{display:table-row-group;}
            > .scroll_tbl tbody tr{
                display:table-row-group; width:auto;
                > td{
                    border-width:0 1px 1px 0;
                    &:last-of-type{border-width:0 0 1px 0;}
                }
            }
        }
	}
	
	.tbl_style03 th, .tbl_style03 td{padding: 15px 5px;font-size: 15px;}

}


@media screen and (max-width:640px){
	/* COMMON */
	.bbs_badge{padding:5px 13px;}
	
	
	/* SEARCH */	
	.bbs_search{
		row-gap:15px; margin-bottom:10px;
		> .search_frm{
			> select{width:136px;}
			> input{width:calc(100% - 190px);}
			> button{
				width:44px; height:44px; border-radius:8px;
				> img{width:18px;}
			}
		}
	}
	
	
	/* PAGER */
	.bbs_pager{
		margin-top:30px;
		> ul{
			> li{
				> a{width:36px; line-height:36px;}
				&.arrow{
					> a{
						padding:9px;
						> img{width:14px;}
					}
					&.prev{margin-right:16px;}
					&.next{margin-left:16px;}
				}
			}
		}
	}


	/* LIST */
	.bbs_list .bbs_ltype01 colgroup, .bbs_list .bbs_ltype01 thead{display:none;}
	.bbs_list .bbs_ltype01 tbody tr{width:100%; display:flex; gap:15px; padding:20px 10px; border-bottom:1px solid #ddd;}
	.bbs_list .bbs_ltype01 tbody td{
		display:block; border-bottom:0; padding:0;
		&.num{width:50px;}
		&.subject{width:calc(100% - 170px); padding:0;}
		&.date{width:90px;}
	}
	
	
	/* VIEW */
	.bbs_view{
		> .bbs_v_top{
			> button{
				padding:20px;
				> img{width:16px;}
			}
			> .subject{
				width:calc(100% - 120px); padding:0 15px;
				> h2{font-size:1.5em;}
				> .date{
					padding-left:22px; margin-top:15px;
					&:after{width:16px; height:16px;}
				}
			}
		}
		> .bbs_v_file{
			> ul{
				> li{
					padding-left:22px;
					&:after{width:14px; height:14px;}
				}
			}
		}
	}
	
	
	/* TABLE */
	.tbl_con .inner{margin-bottom:40px;}
	
	.tbl_caption{margin-bottom:10px;}

	.tbl_chk{
		> li{margin:5px 20px 5px 0;}
	}
	
	table .label_type{
		> .marker{
            width:90px; border-radius:8px 0 0 8px;
            &.sub{width:40px; border-radius:0 8px 8px 0;}
        }
		> .basic_ipt, > .full_ipt{padding-left:100px;}
        &.subtype{
            > .basic_ipt, > .full_ipt{padding-right:50px;}
        }
	}
    table .bar_list{
        row-gap:0;
        > li{
            width:100%; text-align:center; padding-right:0;
            &:after{display:none;}
            &.del{margin-top:10px;}
        }
    }
	table .inline_form{
		&.ipt_name{
			> div{
				width:100%; margin-right:0; margin-bottom:10px;
				&:last-child{margin-bottom:0;}
			}
		}
		&.ipt_button{
			> .btn{width:100px;}
			> input{width:calc(100% - 104px);}
		}
		&.ipt_imgfile{
			flex-direction:column; align-items:center;
			> .imgbox{width:120px; height:160px;}
			> .uploadbox{width:100%; margin-top:10px; padding-left:0;}
		}
        &.ipt_calendar{
            > input{width:calc(100% - 48px);}
            > .btn{width:44px;}
        }
	}

    .tbl_style04 colgroup, .tbl_style04 thead{display:none;}
    .tbl_style04 tbody tr{
        display:flex; flex-wrap:wrap; align-items:center; row-gap:5px; padding:15px 10px; border-bottom:1px solid #ddd;
        > td{
            width:100%; padding:0; border:none; text-align:right !important; padding-left:90px; position:relative;
            &:after{
                content:attr(data-label); position:absolute; top:0; left:10px; font-weight:500; color:#000;
            }
            &:before{content:''; width:3px; height:3px; border-radius:3px; background-color:var(--mainColor1); position:absolute; top:10px; left:0;}
            &.td_btn{
                margin-top:10px; text-align:center !important; padding-left:0;
                &:after, &:before{display:none;}
                > .btn{width:100%; font-size:1em;}
            }
        }
        
        
    }
	
	.s_table_wrap {padding-bottom: 5px;}
	.s_table_wrap {overflow: auto;}
	.s_table_wrap::-webkit-scrollbar {width: 10px;height: 3px;}
	.s_table_wrap::-webkit-scrollbar-thumb {background-color:#d42757;	border-radius: 10px;}
	.s_table_wrap::-webkit-scrollbar-track {border-radius: 10px;background-color: #fff;	box-shadow: inset 0px 0px 5px #999;	padding: 5px;}
	.s_table_wrap .s_table {min-width: 700px;}
}


@media screen and (max-width:480px){
	/* COMMON */
	.bbs_badge{font-size:0.75em; padding:3px 10px;}
	
	.period_select{row-gap:5px;}
	.period_select input{width:calc(100% - 67px);}
	
	
	/* SEARCH */
	.bbs_search{
		> .total{
			> li{
				&:first-child{
					&:after{height:11px; top:4px;}
				}
			}
			&:after{width:3px; height:3px; top:8px;}
		}
		> .search_frm{
			> select{width:106px;}
			> input{width:calc(100% - 160px);}
		}
	}
	
	
	/* PAGER */
	.bbs_pager{
		> ul{
			gap:3px;
			> li{
				> a{width:30px; line-height:30px; font-size:1em;}
				&.arrow{
					> a{
						padding:8px; border-width:1px;
						> img{width:12px;}
					}
					&.prev{margin-right:6px;}
					&.next{margin-left:6px;}
				}
			}
		}
	}

	
	/* LIST */
	.bbs_list .bbs_ltype01 tbody tr{gap:10px; padding:20px 0;}
	.bbs_list .bbs_ltype01 tbody td{
		&.num{width:40px;}
		&.subject{width:calc(100% - 140px);}
		&.date{width:80px;}
	}
	
	
	/* VIEW */
	.bbs_view{
		> .bbs_v_top{
			padding:20px 0;
			> button{
				padding:12px;
				> img{width:12px;}
			}
			> .subject{
				width:calc(100% - 80px);
				> h2{font-size:1.43em;}
				> .date{
					margin-top:10px;
					&:after{top:2px;}
				}
			}
		}
		> .bbs_v_file{
			padding:20px 0 0;
			> ul{
				padding:20px;
				> li{
					> a{font-size:1em;}
				}
			}
		}
		> .bbs_v_con{
			padding:40px 0;
		}
	}
	
	
	/* TABLE */
	.tbl_caption{
        align-items:flex-end;
        > h1{font-size:1.57em; margin-bottom:5px;}
        > h2{
            font-size:1.43em;
            > small{display:block; line-height:1.2em;}
        }
    }
	
	table .inline_form.ipt_add{align-items:flex-end;}
	table .inline_form.ipt_add .file_design input{width:100%;}
	table .inline_form.ipt_add .file_design .btn{width:100%; margin-right:0;}

	.tbl_style01 th, .tbl_style01 td{border-width:0 0 1px 0;}
	.tbl_style01 tbody tr{
		flex-wrap:wrap;
		> th{display:block; width:100%; border-style:dashed; text-align:left; padding:10px 15px;}
		> td{
			width:100%;
			> .scroll_tbl tbody tr{
                > th{
                    border-width:0 1px 1px 0; border-style:solid; text-align:center;
                    &:last-of-type{border-width:0 0 1px 0;}
                }
            }
		}
	}
	
	
	.tbl_style02 th, .tbl_style02 td{padding: 15px 5px;}
	.tbl_style03 th, .tbl_style03 td{padding:15px 5px; font-size:14px;}
	.s_table_wrap .s_table {min-width: 600px;}
	
}