@charset "utf-8";
/* CSS Document : 농업기술센터 sub.css */

/************************************************************

						layout
 
************************************************************/
#container														{ position:relative; padding-top:170px; display:flex; justify-content:flex-start; align-items:flex-start; --sizeLnbW:300px; margin-bottom:4em}
#container .visual_txt  										{ position:absolute; top:50px; right:0px; width:500px }
#container::before												{ position:absolute; width:calc(100% + 100px); left:50%; top:0; height:350px; border-radius:15px; content:''; background:#f1f6f9; z-index:-1; transform:translateX(-50%); background: url(/resource/farm/images/sub/sub_visual.jpg) no-repeat center / cover;}
#container::after												{ position:absolute; width:24px; height:24px; left:-24px; top:calc(350px - 24px); content:''; background: url(/resource/farm/images/main/bg_control.png) no-repeat 50% 50% / cover; transform:rotate(90deg);}   
#container *													{ box-sizing:border-box; }	
@media all and (max-width:1768px){
	#container													{ --sizeLnbW:280px; }
	#container::before											{ width:calc(100% + 4%); }
}	
@media all and (max-width:1668px){
	#container													{ --sizeLnbW:260px; }
}							

@media all and (max-width:1368px){
	#container::before											{ height:300px; }
	#container::after											{ top:calc(300px - 24px); }
}
@media all and (max-width:1268px){
	#container													{ padding-top:0 }
	#container::before											{ display:none; }
	#container::after											{ display:none; }
	#container .visual_txt  									{ display:none; }
}

.area_diagram .list > li:after									{ filter:invert(32%) sepia(188%) saturate(756%) hue-rotate(94deg) brightness(70%) contrast(83%); }

/************************************************************

						lnb
 
************************************************************/
.lnb_wrap														{ flex:none; width:var(--sizeLnbW); margin-bottom:7.5em; }
.lnb_wrap .h2_title												{ width:100%; border-radius:20px 20px 0 0; background:var(--color-point); color:var(--color-white); font-size:1.88em; font-family:var(---font-paperlogy); padding:1.17em 1em 2em; box-sizing:border-box; }
.lnb_wrap .lnb													{ width:100%; margin-top:-20px; border-radius:25px 0 0 0; padding:20px; background:var(--color-white)}
.lnb_wrap .lnb .list											{ width:100%; display:flex; flex-flow:column; }
.lnb_wrap .lnb .list>li											{ border-bottom:1px solid #e5e5e5;  }
.lnb_wrap .lnb .list>li>a										{ position:relative; display:flex; align-items:center; font-size:1.13em; font-weight:600; padding:0 20px; height:60px; color:#515151; transition:var(--trans-ani);  }
.lnb_wrap .lnb .list>li>a::before								{ position:absolute; width:7px; height:7px; border-style:solid; border-width:1px 1px 0 0; border-color:#808080; right:20px; top:50%; transform:translateY(-75%) rotate(45deg); content:''; }
.lnb_wrap .lnb .list>li:has(ul)>a::before						{ transform:translateY(-75%) rotate(135deg); }																	
.lnb_wrap .lnb .list>li.active>a,
.lnb_wrap .lnb .list>li>a:hover,
.lnb_wrap .lnb .list>li>a:focus									{ background:var(--color-point); color:var(--color-white); border-radius:10px; border-bottom:none }
.lnb_wrap .lnb .list>li.active>a::before,
.lnb_wrap .lnb .list>li>a:hover::before,
.lnb_wrap .lnb .list>li>a:focus::before							{ border-color:var(--color-whtie); }
.lnb_wrap .lnb .list>li.active,
.lnb_wrap .lnb .list>li:hover,
.lnb_wrap .lnb .list>li:focus									{ border-bottom:1px solid transparent; }
.lnb_wrap .lnb .list>li>ul										{ margin-top:.5em; background:#f1f6f9; border-radius:10px; padding:20px; }
.lnb_wrap .lnb .list>li>ul>li>a									{ position:relative; display:block; padding:3px 0 5px 15px; font-size:1.03em; transition:var(--trans-ani);  line-height:1.4em;}
.lnb_wrap .lnb .list>li>ul>li>a::before							{ position:absolute; width:4px; height:4px; left:0; top:.75em; border-radius:100%; background:rgba(0,0,0,.2); content:'';  transition:var(--trans-ani); }
.lnb_wrap .lnb .list>li>ul>li>a:hover,
.lnb_wrap .lnb .list>li>ul>li>a:focus,
.lnb_wrap .lnb .list>li>ul>li.active>a							{ color:var(--color-point); }
.lnb_wrap .lnb .list>li>ul>li>a:hover::before,
.lnb_wrap .lnb .list>li>ul>li>a:focus::before,
.lnb_wrap .lnb .list>li>ul>li.active>a::before					{ background:var(--color-point); }
.lnb_wrap .lnb .list>li>ul>li>ul {background:#fff; border-radius:4px; padding:10px 20px;}
.lnb_wrap .lnb .list>li>ul>li>ul>li {padding-left:13px; position:relative;}
.lnb_wrap .lnb .list>li>ul>li>ul>li:before {position:absolute; width:4px; height:1px; left:0; top:.75em; border-radius:100%; background:rgba(0,0,0,.5); content:'';  transition:var(--trans-ani);}
.lnb_wrap .lnb .list>li>ul>li>ul>li.active>a { color:var(--color-point);}
.lnb_wrap .lnb .list a[target="_blank"]::after	 { content:''; opacity:0.8; display:inline-block; width:11px; height:10px; margin-left:7px; background:url(/resource/tour/images/common/icon_blank.svg) no-repeat 50% 50% / auto 10px; background-size:100%; vertical-align:middle; margin-top:-2px}
.lnb_wrap .lnb .list>li>a[target="_blank"]:hover::after,
.lnb_wrap .lnb .list>li>a[target="_blank"]:focus::after		{ filter:invert(1);}

@media all and (max-width:1768px){
	.lnb_wrap .h2_title											{ font-size:1.78em; }
	.lnb_wrap .lnb												{ padding:15px; }
	.lnb_wrap .lnb .list>li>a									{ font-size:1.067em; padding:0 15px; height:55px; }
	.lnb_wrap .lnb .list>li>ul									{ padding:15px; }
	.lnb_wrap .lnb .list>li>ul>li>a								{ font-size:1em; }
}
@media all and (max-width:1668px){
	.lnb_wrap .h2_title											{ font-size:1.68em; }
	.lnb_wrap .lnb .list>li>a									{ font-size:1.03em; height:50px; }
	.lnb_wrap .lnb .list>li>ul>li>a								{ font-size:.98em; }
}
@media all and (max-width:1568px){
	.lnb_wrap .h2_title											{ font-size:1.58em; }
	.lnb_wrap .lnb .list>li>a									{ height:48px; }
	.lnb_wrap .lnb .list>li>ul>li>a								{ font-size:.95rem; }
}
@media all and (max-width:1468px){
	.lnb_wrap .h2_title											{ font-size:1.48em; }
	.lnb_wrap .lnb .list>li>a									{ font-size:1rem; height:46px; }
}
@media all and (max-width:1368px){
	.lnb_wrap .h2_title											{ font-size:1.28em; }
}
@media all and (max-width:1268px){
	.lnb_wrap													{ display:none; }
}

/************************************************************

					contents_layout
 
************************************************************/
.section_middle															{ position:relative; width:calc(100% - var(--sizeLnbW)); margin-left:60px; flex:auto; }
.section_middle::before													{ position:absolute; width:calc(100% + 50px + 60px); top:122px; left:-60px; height:120px; background:var(--color-white); content:''; }
.section_middle::after													{ position:absolute; width:24px; height:24px; right:calc(-74px + 24px); top:calc(122px - 24px); content:''; background:url(/resource/farm/images/main/bg_control.png) no-repeat 50% 50% / cover; 
																			transform:rotate(90deg); }
@media all and (max-width:1768px){											
	.section_middle::after												{ right:calc(-56px + 24px); top:calc(115px - 24px) }
	.section_middle::before												{ top:115px; }
}	
@media all and (max-width:1668px){
	.section_middle::after												{ right:calc(-56px + 24px); top:calc(107px - 24px)  }
	.section_middle::before												{ width:calc((100% + 2.7%) + 60px); top:107px; }
}
@media all and (max-width:1568px){
	.section_middle														{ margin-left:50px; }
	.section_middle::after												{ right:calc(-52px + 24px); top:calc(100px - 24px)  }
	.section_middle::before												{ width:calc((100% + 2.7%) + 50px); left:-50px; top:100px; }
}
@media all and (max-width:1468px){
	.section_middle														{ margin-left:40px; }
	.section_middle::after												{ right:calc(-50px + 24px); top:calc(92px - 24px)  }
	.section_middle::before												{ width:calc((100% + 2.7%) + 40px); left:-40px; top:92px; }
}
@media all and (max-width:1368px){
	.section_middle::after												{ top:calc(77px - 24px)  }
	.section_middle::before												{ top:77px; }
}
@media all and (max-width:1268px){
	.section_middle														{ width:100%; margin-left:0; }
	.section_middle::before,
	.section_middle::after												{ display:none; }
}	
/************************************************************

						location
 
************************************************************/																			
.location_wrap															{ position:relative; display:flex; flex-wrap:wrap; gap:10px 2em; justify-content:space-between; padding-top:60px; z-index:3; color:var(--color-white); font-weight:500}
.location_wrap .lco														{ display:flex; flex-wrap:wrap; align-items:center; gap:3px 0; }
.location_wrap .lco>li													{ position:relative; font-size:.98em; line-height:1 }
.location_wrap .lco [data-location="home"] a							{ display:flex; font-size:0px; width:15px; height:20px; margin-top:-1px  }
.location_wrap .lco [data-location="home"] a::before					{ content:''; display:block; width:100%; height:100%; background:url(/resource/farm/images/sub/icon_home.svg) no-repeat 50% 50%; background-size:auto 15px; opacity:1;  filter:invert(1);}
.location_wrap .lco>li+li												{ padding-left:12px;  }
.location_wrap .lco>li+li::before										{ display:inline-block; margin-right:15px; width:7px; height:7px; border-style:solid; border-width:2px 2px 0 0; border-color:var(--color-white); transform:rotate(45deg); 
																			content:''; vertical-align:middle; margin-top:-2px;  }
.location_wrap .page_util												{ display:flex; align-items:center; gap:6px; --sizeHig:40px; }
.location_wrap .page_util>li											{ position:relative; z-index:2 }
.location_wrap .page_util>li>button										{ display:flex; width:var(--sizeHig); height:var(--sizeHig); border-radius:8px; background:var(--color-white); }
.location_wrap .page_util>li>button:before								{ content:''; flex:none; display:block; width:100%; height:100%; margin:0 auto; background-repeat:no-repeat; background-position:50% 50%; }
.location_wrap .page_util>li .share_bt:before							{ background-image:url(/resource/farm/images/sub/ico_share.svg); background-size:16px; margin-top:-.5px;}
.location_wrap .page_util>li>button.copy:before							{ background-image:url(/resource/farm/images/sub/ico_copy_link.svg);}
.location_wrap .page_util>li>button.print:before						{ background-image:url(/resource/farm/images/sub/ico_print.svg); background-size:17px 16px;}
.location_wrap .page_util>li>button.braille:before						{ background-image:url(/resource/farm/images/sub/ico_bx_link.svg); background-size:19px 10px;}
.location_wrap .page_util>li>button.braille_down:before					{ background-image:url(/resource/farm/images/sub/ico_bx_down.svg); background-size:21px 13px; background-position:50% 55%}
.location_wrap .page_util>li.share .share_drop												{ display:none; position:absolute; top:-1px; left:-1px; z-index:10; width:calc(var(--sizeHig) + 2px); box-sizing:border-box; background-color:var(--color-white); 
																								border:1px solid #e5e5e5;  text-align:center; z-index:1 ; border-radius:10px;}																								
.location_wrap .page_util > li.share .share_drop ul											{ padding-top:10px; display:flex; flex-flow:column; gap:7px; }
.location_wrap .page_util > li.share .share_drop ul > li a									{ display:flex; justify-content:center; align-items:center; width:100%; height:100%;}
.location_wrap .page_util > li.share .share_drop ul > li[data-share] a:before				{ content:''; display:block; width:calc(var(--sizeHig) - 10px); height:calc(var(--sizeHig) - 10px); background-repeat:no-repeat;
																								 background-position:50% 50%; background-size:auto 100%; border-radius:100%;}
.location_wrap .page_util > li.share .share_drop ul > li[data-share="blog"] a:before		{ background-image:url(/resource/farm/images/sub/icon_blog.svg); background-color:#32b44a;}
.location_wrap .page_util > li.share .share_drop ul > li[data-share="youtube"] a:before		{ background-image:url(/resource/farm/images/sub/icon_youtube.svg); background-color:#e03232;}
.location_wrap .page_util > li.share .share_drop ul > li[data-share="facebook"] a:before	{ background-image:url(/resource/farm/images/sub/icon_facebook.svg); background-color:#385691;}
.location_wrap .page_util > li.share .share_drop ul > li[data-share="instar"] a:before		{ background:url(/resource/farm/images/sub/icon_instar.svg) no-repeat 50% 50% / cover, linear-gradient(to bottom right, #4a48e8 20% , #ee3183 60%, #f0c05c 100%);}
.location_wrap .page_util > li.share .share_drop ul > li[data-share="kakao"] a:before		{ background-image:url(/resource/farm/images/sub/icon_kakaoch.svg); background-color:#ffde00; }
.location_wrap .page_util > li.share .share_drop ul > li[data-share="twitter"] a:before		{ background-image:url(/resource/farm/images/sub/icon_twitter.png); background-color:#000;}
.location_wrap .page_util > li.share .share_drop ul > li[data-share="band"] a:before		{ background-image:url(/resource/farm/images/sub/icon_band.png); background-color:#50b748;}
.location_wrap .page_util > li.share .share_drop ul > li[data-share="copy"] a:before		{ background-image:url(/resource/farm/images/sub/icon_copy.svg); background-color:#555555;}
.location_wrap .page_util > li.share .share_close											{ position:relative; width:calc(var(--sizeHig) - 10px); height:calc(var(--sizeHig) - 10px); margin-top:10px; margin-bottom:5px; background:#e5e5e5;
																								 border-radius:100%;}
.location_wrap .page_util > li.share .share_close::before									{ position:absolute; width:1px; height:11px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg); content:''; background:var(--color-base); }
.location_wrap .page_util > li.share .share_close::after									{ position:absolute; width:1px; height:11px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-45deg); content:''; background:var(--color-base);}
.location_wrap .page_util > li.share .share_close:hover										{ transform:rotate(90deg); }

@media all and (max-width:1768px){	
	.location_wrap																			{ padding-top:55px; }
}
@media all and (max-width:1668px){	
	.location_wrap																			{ padding-top:50px; }
}
@media all and (max-width:1568px){	
	.location_wrap																			{ padding-top:45px; }
}
@media all and (max-width:1468px){	
	.location_wrap																			{ padding-top:35px; }
	.location_wrap .lco>li																	{ font-size:.95em; }
	.location_wrap .lco [data-location="home"] a											{ margin-top:-5px; }
	.location_wrap .lco>li+li::before														{ margin-top:-3px; }
}
@media all and (max-width:1368px){	
	.location_wrap																			{ padding-top:20px; }
	.location_wrap .page_util																{ --sizeHig:38px;}
}
@media all and (max-width:1268px){
	.location_wrap																			{ padding:15px 3%; background:var(--color-point); width:calc(100% + 6%); margin-left:-3%; margin-right:-3%; }
	.location_wrap .lco>li																	{ font-size:.88rem; }
	.location_wrap .lco>li+li::before														{ width:5px; height:5px; margin-right:10px; }
	.location_wrap .lco>li+li																{ padding-left:9px; }
	.location_wrap .lco [data-location="home"] a											{ margin-top:-3px; }
	.location_wrap .page_util																{ --sizeHig:35px;}
	.location_wrap .page_util>li .share_bt:before											{ background-size:14px; }
	.location_wrap .page_util>li>button.print:before										{ background-size:auto 14px; }
	.location_wrap .page_util>li>button.braille:before										{ background-size:auto 8px; }
	.location_wrap .page_util>li>button.braille_down:before									{ background-size:auto 11px; }
}	

/************************************************************

						location
 
************************************************************/
.section_middle .content												{ width:100%; position:relative; /*z-index:2;*/ margin-top:3.13em; margin-bottom:3.13em;}
.section_middle .h3_title												{ font-size:2.19em; line-height:1; font-weight:bold; border-bottom:1px solid #e5e5e5; padding-bottom:.86em; margin-bottom:1.43em; }
@media all and (max-width:1768px){	
	.section_middle .h3_title											{ font-size:2em; }
}
@media all and (max-width:1668px){	
	.section_middle .h3_title											{ font-size:1.9em; }
}
@media all and (max-width:1568px){	
	.section_middle .content											{ margin-top:3em; }
	.section_middle .h3_title											{ font-size:1.8em; padding-bottom:.75em;}
}
@media all and (max-width:1468px){	
	.section_middle .content											{ margin-top:2.5em; }
	.section_middle .h3_title											{ margin-bottom:1em }
}
@media all and (max-width:1268px){	
	.section_middle .content											{ margin-top:2em; }
	.section_middle .h3_title											{ font-size:1.7em; }
}