@charset "utf-8";
/* CSS Document */

.bdrd20  								{ border-radius:20px !important }
.bdrd30  								{ border-radius:30px !important }

.mb30  									{ margin-bottom:30px; }

.clearfix:after{clear: both; display: block; content: ""}
.clearfix{display:block; clear: both }

h4.tit									{ position:relative; margin-bottom:10px; font-size:1.75em; color:var(--color-base); font-weight:700; line-height:1.3em; padding-top:15px; display:inline-block;}
h4.tit:before,
h4.tit:after  							{ content:''; position:absolute; display:block; left:2px; }
h4.tit:before  							{ top:0px; width:10px; height:10px; border-radius:50%; background-color:var(--color-point); right:0;}
h4.tit:after  							{ top:0px; left:15px; width:10px; height:10px; border-radius:50%; background-color:var(--color-point2); }

/* info box */
.box_info_top							{ position:relative; display:flex; justify-content:flex-start; align-items:center; margin-bottom:50px; padding:40px 50px; background:var(--color-white); border-radius:20px; border:1px solid #e5e5e5}
.box_info_top:before  					{ position:absolute;top:-1px;left:-1px;right:-1px;content:"";display:block; width:calc(100% + 2px); height:34%;border:2px solid var(--color-point2);border-radius:20px 20px 0 0;border-bottom:0; background-image:none; z-index:0}
.box_info_top:after						{ display:none; }
.box_info_top .ico						{ overflow:hidden; flex:none; display:flex; justify-content:center; align-items:center; width:90px; height:90px; box-sizing:border-box; margin-right:30px; padding:8px;
    									background:#f7f7f7 url(/resource/food/images/contents/icon_info_default.svg) no-repeat 50% 50%; background-size:cover; border-radius:100%;}
.box_info_top .ico img					{ max-width:100%;}
.box_info_top h4						{ margin:7px 0px 10px; font-size:1.75em; font-weight:700; color:var(--color-base); line-height:1.3}
.box_info_top p							{ line-height:1.6; font-size:1.13em; color:var(--color-gray4);  word-break:keep-all;}

@media screen and (max-width:668px){
	.box_info_top						{ flex-wrap:wrap; padding:15px 30px; margin-bottom:40px; }
	.box_info_top h4  					{ font-size:1.438em }
	.box_info_top .ico					{ display:none }
	.box_info_top div					{ width:100%; word-wrap:break-word; word-break:keep-all; }
}

.bu{display:block;box-sizing:border-box;}
.bu > li{display:block;position:relative;padding-left:15px;line-height:26px;font-weight:400;word-break:keep-all;box-sizing:border-box;}
.bu > li:before{display:block;position:absolute;top:10px;left:0;width:5px;height:5px;border-radius:100%;background-color:var(--color-point2);content:'';}


/* table */
table												{ border-spacing:0; border-collapse:collapse;}
table.basic_table									{ width:100%; margin-top:10px; border-top:2px solid #0d1a6c; font-size:18px;}
table.basic_table thead th							{ padding:12px 10px; background:#f3f3f3; border-left:1px solid #ddd; font-weight:600; color:var(--color-black); border-top:1px solid #ddd; }
table.basic_table thead tr.none th					{ border-bottom-width:0px;}
table.basic_table thead tr.none + tr th				{ border-top:1px solid #ddd;}
table.basic_table tbody th							{ background-color:#f8f9fa; border:1px solid #ddd; font-weight:700;}
table.basic_table th,
table.basic_table td								{ padding:12px 10px; letter-spacing:-0.5px; line-height:1.4; word-break:keep-all; font-family:var(--font-pretendard);}
table.basic_table th								{ text-align:center; font-weight:500; color:var(--color-black);}

/* thead - line */
table.basic_table .line_right						{ border-right:1px solid #ddd;}
table.basic_table .line_left						{ border-left:1px solid #ddd;}

table.basic_table .line_bottom						{ border-bottom:1px solid #b9c2db;}

/* tbody */
table.basic_table thead + tbody tr td				{ text-align:center;}
table.basic_table tbody td							{ background:var(--color-white); border:1px solid #ddd;text-align:left;}
table.basic_table tbody tr td:nth-of-type(1),
table.basic_table tbody tr th:nth-of-type(1),
table.basic_table thead tr th:nth-of-type(1)		{ border-left-width:0;}
table.basic_table tbody tr td:nth-last-of-type(1),
table.basic_table tbody tr th:nth-last-of-type(1),
table.basic_table thead tr th:nth-last-of-type(1)	{ border-right-width:0;}
table.basic_table tbody th							{ background:#fafafa; }
table.basic_table tbody tr th:nth-of-type(1)	{ border-right-width:1px; }

/* table text align */
table.basic_table.left td,
table.basic_table .left							{ text-align:left !important;}
table.basic_table.right td,
table.basic_table .right						{ text-align:right !important;}
table.basic_table.center td,
table.basic_table .center						{ text-align:center !important;}
table.basic_table.center td.left				{ text-align:left !important;}

table.basic_table .bu  							{ margin-left:20px }


/* table scroll mobile */
#content .scrollTable							{ width:100%;}
#content .mob_info								{ display:none; position:relative; width:100%; box-sizing:border-box; margin-top:10px; padding:7px 7px 7px 35px; background:var(--color-white); border:1px dashed #cfcfcf; border-radius:3px; font-size:13px;}
#content .mob_info:before						{ content:''; display:block; position:absolute; top:7px; left:7px; width:20px; height:18px; background:url(/resource/food/images/contents/img_drag.svg) no-repeat 50% 0; background-size:100%;}


@media all and (max-width:1024px){
	#content .mob_info							{ display:block; margin-bottom:5px;}

    #content .scrollTable						{ overflow:auto;}
    #content .scrollTable .basic_table			{ width:1024px; margin-top:0px;}
    #content .mob_info							{ display:block; margin-bottom:5px;}
    table.basic_table thead th					{ padding:13px 9px;}
	table.basic_table							{ font-size:17px;}
}
@media screen and (max-width:668px){
	table.basic_table							{ font-size:16px;}
}


/**********************************************************************
 					0101 담당관소개
**********************************************************************/
.box_list  									{ background-color: #f8f9fb; border-radius:20px; padding:40px; margin-top:50px}
.box_list ul  								{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px}
.box_list ul li 							{ border:1px solid #e5e5e5;border-radius: 10px; padding:10px 10px 10px 20px; min-height:60px; display:flex; justify-content: space-between; align-items:center; background-color: var(--color-white);}

@media screen and (max-width:1024px){
	.box_list ul  							{ grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width:668px){
	.box_list								{ padding:20px; margin-top:30px }
	.box_list ul							{ grid-template-columns: 1fr; gap: 10px}
}


/**********************************************************************
 					0401 국가식품클러스터 소개
**********************************************************************/
.introduce_img  						{ border-radius:20px 100px 20px 20px }
.introduce_area  						{ display:flex; margin:30px 0 50px 0}
.introduce_area .introduce_tit			{ width:30%; color:var(--color-point); font-size:1.875rem; line-height:2.5rem; font-weight:bold }
.introduce_area .introduce_ul  			{ width:50%; margin-left:10%; }

@media all and (max-width:1268px){
	.introduce_area .introduce_tit  	{ font-size:1.563rem; line-height:1.875rem;}
}
@media all and (max-width:768px){
	.introduce_img  					{ border-radius:20px 50px 20px 20px }
	.introduce_area  					{ flex-direction:column; }
	.introduce_area .introduce_tit		{ width:100%; font-size:1.25rem; line-height:1.25rem; margin-bottom:10px}
	.introduce_area .introduce_ul		{ width:100%; margin-left:0; }

}

/**********************************************************************
 					0402 국가식품클러스터 2단계
**********************************************************************/

.img  									{ max-width:100%  !important }
.sub_visual  							{ width:100%; height:320px; background:url(/resource/food/images/contents/sub_visual.jpg) no-repeat center; background-size:cover;  border-radius: 20px}
.sub_visual02  							{ width:100%; height:320px; background:url(/resource/food/images/contents/sub_visual02.jpg) no-repeat center; background-size:cover;  border-radius: 20px }


/* box_img */
.box_img 								{ width:100%; position:relative;text-align:center; }
.box_img img 							{ max-width:100% !important;}
.box_img .img_zoom 						{ display:none; position:absolute; right:0; bottom:0; z-index:10; width:42px;height:42px; background:rgba(0, 0, 0, 0.8);}
.box_img .img_zoom a 					{ display:block; height:100%; font-size:0;}
.box_img .img_zoom a:before 			{ content:'';display:block; position:absolute; top:0; left:0; right:0; bottom:0; width:18px; height:18px; margin:auto; background:url(/resource/food/images/common/icon_search.svg) no-repeat}

.box_img_inner  						{ padding:50px 30px;border-radius: 20px;background:#f6f6f6;}
.box_img_inner img 						{ width:auto !important;}

@media all and (max-width:768px) {
    .box_img .img_zoom 					{ display:block;}

}

/* download 버튼 */
.download_btn  							{ margin:50px 0; text-align:center;}
.download_btn a,
.download_btn button                    { display:inline-block; position:relative; height:70px; box-sizing:border-box; margin:2px; padding:0 40px; border-radius:10px;  box-shadow:none; vertical-align:middle; transition:var(--trans-ani); position:relative; border:1px solid var(--color-point); background:var(--color-white)}
.download_btn span						{ display:flex; flex-flow:row wrap; justify-content:center; align-items:center; position:relative; z-index:2; height:100%; line-height:1em; color:var(--color-point); transition:var(--trans-ani); font-size:1.125em}
.download_btn span:after				{ content:''; opacity:1; display:inline-block; width:14px; height:16px; margin-left:7px; background:url(/resource/food/images/contents/icon_download.svg) no-repeat 50% 50%;background-size:100%; vertical-align:middle; transition:opacity var(--trans-ani); }
.download_btn a:hover,
.download_btn button:hover,
.download_btn button:focus 				{ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); transform: translateY(-2px); }

@media all and (max-width:768px) {
    .download_btn						{ margin:0 0 30px 0}
    .download_btn a, .download_btn button { padding:15px 20px; height:auto; }
    
}

.introduce_wrap							{ margin:5em 0; display:flex;}
.introduce_wrap div  					{ width:50% }

.content h3								{ font-size:1.625em; color:var(--color-point); line-height:1.25em; }

.introduce_ul 							{ font-size:1.125em; }
.introduce_ul li						{ position:relative; color:#333; padding-left:13px; line-height:1.35em; margin-top:10px;}
.introduce_ul li:before  				{ content:''; position:absolute; top:7px; left:0; width:5px; height:5px; background:var(--color-point); border-radius:100%; }
.introduce_ul li strong					{ font-weight:600 }
.div2  									{ display:flex;  flex-wrap:wrap; }
.div2 li 								{ width:50%;}


.strategy_wrap 							{ display:flex; margin-top:60px}
.stategy_tit 							{ width:300px; margin-right:6.25em; }
.stategy_tit h3							{ height:70px; border-bottom:2px solid var(--color-point);}
.stategy_tit p							{ margin-top:2.5em; }
.stategy_con_wrap 						{ margin-top:4.375em; width:100%}
.stategy_con_wrap .stategy_con          { display:flex; border-top:1px solid var(--color-base3); margin-bottom:2.5em; padding-top:2.5em}
.stategy_con_wrap .stategy_con>div  						{ width:50%; display:flex; } 
.stategy_con_wrap .stategy_con>div dl dt					{ font-size:1.5em; font-weight:600; margin-bottom:10px} 
.stategy_con_wrap .stategy_con>div dl dd					{ position:relative; color:#333; padding-left:13px } 
.stategy_con_wrap .stategy_con>div dl dd:before  			{ content:''; position:absolute; top:50%; left:0; width:5px; height:5px; background:#ddd; border-radius:100%; transform:translateY(-50%); line-height:1.375em}

.stategy_con_wrap .ico					{ overflow:hidden; display:flex; justify-content:center; align-items:center; width:70px; height:70px; box-sizing:border-box; margin-right:30px; }
.stategy_con_wrap .ico img				{ max-width:100%;}
.stategy_con_wrap .ico1  				{ background:url("/resource/food/images/contents/st_icon1.svg") no-repeat 50% 50%; }
.stategy_con_wrap .ico2  				{ background:url("/resource/food/images/contents/st_icon2.svg") no-repeat 50% 50%; }
.stategy_con_wrap .ico3  				{ background:url("/resource/food/images/contents/st_icon3.svg") no-repeat 50% 50%; }
.stategy_con_wrap .ico4  				{ background:url("/resource/food/images/contents/st_icon4.svg") no-repeat 50% 50%; }
.stategy_con_wrap .ico5  				{ background:url("/resource/food/images/contents/st_icon5.svg") no-repeat 50% 50%; }

@media all and (max-width:1368px){
	.introduce_wrap 					{ flex-direction:column; margin:30px 0 0 0}
	.introduce_wrap div  				{ width:100%; margin-bottom:30px }

	.strategy_wrap  					{ flex-direction:column; align-items:center; }
	.stategy_tit  						{ width:100%; margin-right:0; text-align:center  }
	.stategy_tit h3  					{ border:0; height:auto }
	.stategy_tit p  					{ margin:0; }

	.stategy_con_wrap  					{ margin-top:30px }
	.stategy_con_wrap .stategy_con>div dl dt  		{ font-size:1.25em; }
}

@media all and (max-width:1024px){
	.stategy_con_wrap 					{ margin:0 }
	.stategy_con_wrap .stategy_con  	{ flex-direction:column; border:0; margin:0; padding:0;}
	.stategy_con_wrap .stategy_con>div  { width:100%; border-top:1px solid var(--color-base3); padding:20px;}
	.stategy_con_wrap:last-child {border-bottom:1px solid var(--color-base3);}
}

@media all and (max-width:768px){
	.section_middle  					{ margin-top:1.5em; }
	.content h3							{ font-size:1.5em; }
	.div2 li 							{ width:100% }
	.stategy_con_wrap .stategy_con>div  { flex-direction:column;}
	.stategy_con_wrap .ico  			{ margin:0 auto }
	.stategy_con_wrap .stategy_con>div dl dt  { text-align:center }
}