/* 서브페이지 공통 */
.sub_top			{position:relative; height:180px; border-radius:20px; margin-bottom:30px;}
.sub_top_intro	{background:url(/img/sub/intro_top.png) no-repeat 0 0; background-size:100%;}
.sub_top_intro-2	{background:url(/img/sub/intro_top-2.png) no-repeat 0 0; background-size:100%;}
.sub_top_intro-3	{background:url(/img/sub/intro_top-3.png) no-repeat 0 0; background-size:100%;}
.sub_top_intro-4	{background:url(/img/sub/intro_top-4.png) no-repeat 0 0; background-size:100%;}
.sub_top_intro-5	{background:url(/img/sub/intro_top-5.png) no-repeat 0 0; background-size:100%;}
.sub_top_intro-6	{background:url(/img/sub/intro_top-6.png) no-repeat 0 0; background-size:100%;}
.sub_top_intro-7	{background:url(/img/sub/intro_top-7.png) no-repeat 0 0; background-size:100%;}
.sub_top_intro-8	{background:url(/img/sub/intro_top-8.png) no-repeat 0 0; background-size:100%;}

.sub_top_copy		{position:relative; top:25%; color:#fff; text-align:center}
.sub_top_copy h2		{font:600 45px/1.2em 'noto sans kr','맑은 고딕';}
.sub_top_sub_copy	{font:400 17px/1.2em 'noto sans kr','맑은 고딕'; letter-spacing:-0.03em}
.sub_nav					{position:absolute; bottom:0; left:0; width:100%; height:55px; overflow:hidden}
.sub_nav li					{float:left; height:55px; border-right:1px solid rgba(255,255,255,0.2); box-sizing:border-box;}
.sub_nav2 li					{width:50%;}
.sub_nav3 li					{width:33.3%;}
.sub_nav4 li					{width:25%;}
.sub_nav6 li					{width:16.66%;}
.sub_nav7 li					{width:14.28%;}

.sub_nav li:last-child		{border-right:0}
.sub_nav3 li:last-child		{width:33.4%;}
.sub_nav6 li:last-child		{width:16.7%;}
.sub_nav7 li:last-child		{width:14.32%;}

.sub_nav li a					{display:inline-block; width:100%; height:100%; background:rgba(122,0,106,0.5); text-align:center}
.sub_nav li a:hover		{background:rgba(122,66,129,1);}
.sub_nav li, .sub_nav li a, .sub_nav li a:visited	{font:400 17px/53px 'noto sans kr','맑은 고딕'; color:#fff;}
.sub_nav li.on a			{background:rgba(122,66,129,1); font-weight:500}

.sub_menu_box.col-md-2 {padding: 0;}
.sub_menu_wrap {width: 100%; border-radius: 20px;}
.sub_menu	{ width:100%; height:auto; overflow:hidden; }
.sub_menu_top {background: url(/img/sub/sub-menu-bar.png) -56px 133px; border-radius: 16px 16px 0 0; display: flex; justify-content: center; height: 100px;}
.sub_menu_top h3 {display: flex; align-items: center; font-weight: 700; color: #50224f; font-size: 20px; justify-content: center;}
.sub_menu li 	{height:55px; border-right:1px solid rgba(255,255,255,0.2); box-sizing:border-box; }
.sub_menu li a {display:inline-block; width:100%; height:100%; background:#581656; text-align:center; color:#fff; border-bottom: 1px dotted #8d4b95;}
.sub_menu li a:hover		{background:rgba(122,66,129,1); color:#fff;}
.sub_menu li, .sub_nav li a, .sub_nav li a:visited	{font:400 17px/53px 'noto sans kr','맑은 고딕'; color:#fff;}
.sub_menu li.on a		{background:rgba(122,66,129,1); font-weight:500; color:#fff;}

.sub_title		{margin: 50px 0 50px; text-align:center}
.sub_title h3		{display:inline; position:relative; font:600 36px/1em 'noto sans kr','맑은 고딕'; color:#000;}
.sub_title h3:before	{content:""; display:block; position:absolute; top:0; left:-20px; width:16px; height:16px; overflow:hidden; background:#D1AAC9; border-radius:8px;}

.sub_contant_wrap {padding-left: 60px;}

.menu-2-sub {flex-wrap: wrap;  display: flex;  list-style: none;  align-items: center; }
.menu-2-sub li {border-radius: 4px; border: 1px solid #198754;  height: 40px;  padding: 0 10px;  display: flex;  margin-right: 10px;  justify-content: center; margin-bottom: 10px;}
.menu-2-sub li a, .menu-2-sub ul li a:visited {font-size: 16px;  color: #222222;  display: flex;  align-items: center;  justify-content: center;}
.menu-2-sub li.on {background: #198754; color:#fff;}
.menu-2-sub li.on a, .menu-2-sub li.on a:visited {color:#fff;}

#visual {position:relative; width:100%; text-align:center; overflow:hidden; padding:2rem 0; background: #0000004d;}
#visual .title {color:#fff; font-size:3rem; font-weight:400}
#visual .img {position:absolute; top:0; left:0; display:block; z-index:-1; width:100%; height:100%}
#visual .img img {position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); max-width:inherit}
#visual .control {display:none}

.breadcrumb-item,.breadcrumb-item a{color: #888 !important; font-size: 0.9rem;}
.breadcrumb-item.active  {color: #000;}

.sub-nav {font-size: 1.1rem; border-right: 1px solid #939393; color:#fff;}
.sub-nav:last-child {border: none;}
.sub-nav a:link {color:#fff ; font-family: 'NanumSquare','square',"Noto Sans";}
.sub-nav a:visited {color:#fff ; font-family: 'NanumSquare','square',"Noto Sans";}

.sub-bg-1 {background-image: url("../img/sub/leaves.jpg"); background-repeat: no-repeat; }
.sub-bg-2 {background-image: url("../img/sub/sub-back-1.jpg");  background-repeat: no-repeat; }
.sub-bg-3 {background-image: url("../img/sub/firefly.jpg");  background-repeat: no-repeat; }
.sub-bg-4 {background-image: url("../img/sub/firefly3.jpg");  background-repeat: no-repeat; }
.sub-bg-5 {background-image: url("../img/sub/sub-back-3.jpg");  background-repeat: no-repeat; }
.sub-bg-6 {background-image: url("../img/sub/sub-back-4.jpg");  background-repeat: no-repeat; }
.sub-content {width: 100%; padding: 1rem; }
.sub-content h2 {font-size: 2rem; font-weight: 700; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 0.2rem dotted #c7e5ba; padding-left: 60px; }
.sub-content h2::before {content: ""; width:50px; height:34px; background-image: url("../img/sub/blit.png"); display: block; position: absolute; margin-left:-60px;}
.sub-content p {font-size: 1.1rem; line-height: 2rem; font-weight: 400;}

.intro-number dt{font-weight: 500; color: #009688; margin-top: 1rem; display: inline; font-size: 1.4rem; }
.bg-g {background-color: #004a4c;}
.bg-n {background-color: #009688;}
.bg-g a:link{color: #8fbfc1;}
.bg-g a:visited{ color: #8fbfc1;}

/***************************************************연혁**************************************************/
.history {position:relative;}
.history dl {position:relative; padding-bottom:22px;	margin:0 !important;}
.history dl::before {display:inline-block;	content:'';	width:95px;	height:44px;	position:absolute;}
.history dl dt {font-size: 30px; font-weight: bold;	font-weight:bold;	padding-top:8px;	margin-bottom:12px;	color:#31585; border-bottom: 1px dotted #ddd;}
.history dl dd {font-size:16px;	line-height:28px;	color:#000;	position:relative;}
.history dl dd span:first-child {display:block;	font-size:20px;	color:#009688;	position:relative; font-weight: 700;}
.history dl dd span:nth-child(2) {display:block;	font-size:16px;	color:#009688;	position:relative;}
.history dl dd span:nth-child(3) {display:block;	font-size:16px;	color:#222;	position:relative;}

.history dl:nth-child(odd) {text-align:right;	width:50%;	padding-right:98px;	border-right:2px solid #d7d7d7;}
.history dl:nth-child(odd) dd {}
.history dl:nth-child(odd) dd span {right:0;}
.history dl:nth-child(odd)::before {background:url("../img/sub/history_bg03.png") 0 0 no-repeat;	right:-22px;}
.history dl:nth-child(1)::before {background:url("../img/sub/history_bg01.png") 0 0 no-repeat;}
.history dl:nth-child(even) {width:50%;	left:50%;	padding-left:98px;	border-left:2px solid #d7d7d7;}
.history dl:nth-child(even)::before {background:url("../img/sub/history_bg02.png") 0 0 no-repeat;	left:-24px;}
.history dl:nth-child(even) dd {text-align: left;}
.history dl:nth-child(even) dd span {text-align:left;}
.history dl:nth-child(odd):last-child {border-right:none !important;	padding-right:100px;	padding-bottom:0;}
.history dl:nth-child(even):last-child {border-left:none !important;	padding-bottom:0;	padding-left:100px;}
.history dl:nth-child(odd):last-child::before {right:-20px;}
.history dl:nth-child(even):last-child::before {left:-22px;}

/***************************************************자연학교**************************************************/
.school-box {border-radius: 30px 0; padding: 3rem; border: 1px solid #eee!important;}
.school-box h3{font-weight: 600; padding-bottom: 20px; border-bottom: 1px solid #ddd; margin-bottom: 20px; padding-left: 24px; }
.school-box h3::before{content: ""; width:19px; height:18px; background-image: url("../img/sub/sub-blit.png");  display: block; position: absolute; margin-left: -26px; margin-top: 3px;}
.school-box p {font-size: 16px; line-height: 28px; text-align: justify;}

/***************************************************사이트맵**************************************************/
.sitemap-box {border-radius: 30px; padding: 2rem; background: #fff;}
.sitemap-box dt {font-size: 1.2rem; font-weight: 600; padding: 1rem; border-bottom: 1px solid #ddd; margin-bottom: 20px; padding-left: 24px; color: #fff; background-color: rgba(122,66,129,1); border-radius: 30px 0;}
.sitemap-box li {padding: 0 0 0.5rem 1rem; margin-bottom: 1rem;  border-bottom: 1px solid #ededed;}
.sitemap-box dd a:link {font-size: 16px; line-height: 28px; text-align: justify; color: #000;}
.sitemap-box dd a:visited {font-size: 16px; line-height: 28px; text-align: justify; color: #000;}

/***************************************************인사말**************************************************/
.greet-back {background: url(../img/sub/sub-con-back-1.png) no-repeat 15% 63%, linear-gradient(#ededed, #ebdfe9, #ededed);}
.greet-con-back {background: url("../img/sub/sub-greet-pyh.png") no-repeat; background-position-y: -8px;  background-position-x: right; background-size: 200px; }
.greet-text {padding-top: 20px;}
.greet-text::before {content: ''; width: 50px; height: 3px; background: blueviolet; position: absolute; margin-top: -20px;}


/***************************************************농자재특징**************************************************/
.farm-back {background: url(../img/sub/sub-background-1.png) no-repeat 0 0;  background-size: 100%;}
.farm-text {padding-top: 10px;  margin: 16px 0 0 20px;}
.farm-text::before {content: ''; width: 8px;  height: 2px;  background: #7e5189;  position: absolute;  margin-top: 15px;  margin-left: -18px;}

/***************************************************포도회 연혁**************************************************/
.history-table .table>:not(:last-child)>:last-child>* {border-top: 2px solid #7a4281;}
.history-table .table>:not(caption)>*>* {padding: 0.8rem 0.5rem ; border-bottom-width: 0px;}
.history-table table th {font-size: 2rem; font-weight: 800; color:#7a4281;}
.history-table table td.month {font-weight: 800; }
.history-table table td.con::before {content: ''; width: 4px; height: 4px; border-radius: 10px; background-color: #7a4281; position: absolute; margin-top: 10px; margin-left: -10px;}

/***************************************************임원명단**************************************************/
.member-table .table>:not(:last-child)>:last-child>* {border-bottom: 1px solid #ddd; border-top: 2px solid #7a4281;}
.member-table .table>:not(caption)>*>* {padding: 0.8rem 0.5rem;}
.member-table .page-item.active .page-link {background-color: #7a4281; border-color:#7a4281; }

/***************************************************지부**************************************************/
.group {border-top: 4px solid #a145ad !important; }
.group .title {padding-bottom: 30px;  font-size: 2rem; color: #000000; font-weight: 700;}

/***************************************************지도**************************************************/
.map-info {border-left: 1px solid #ddd; font-size: 1rem; }
.map-info .adress {background: url("../img/sub/adress.png") no-repeat; background-size: 28px;  height: 40px;  font-size: 1.4rem;  padding-left: 38px;  line-height: 36px; margin-bottom: 20px;}
.map-info .call {background: url("../img/sub/call.png") no-repeat; height: 30px;  font-size: 1.4rem;  padding-left: 38px; line-height: 36px; }

/***************************************************회원가입**************************************************/
.member {border-top: 2px solid #804986; border-bottom: 2px solid #804986; }
.member p {font-size: 1.2rem;}
.member dl {padding: 20px 0;}
.member dl dt {font-size: 2rem; padding-bottom: 10px;}
.member dl dd {font-size: 1.2rem; padding-top: 20px;}
.member dl dd::before {content: ""; width: 50px; height: 2px; background-color: #804986; position: absolute; margin-left: 40px; margin-top: -15px;}
.member-2 dl dt {font-size: 2rem; padding-bottom: 10px;}
.member-2 dl dd {font-size: 1.2rem; padding:20px 0 10px; border-top: 1px dotted #ddd;}
.btn-memeber {color: #fff;  background-color: #6d1d81;  border-color: #7e5189; font-size: 1.1rem; }
.btn-memeber:hover {background-color: #3d1846; color: #fff;  }

/***************************************************로그인**************************************************/
.login {border-radius: 30px;  padding: 2rem;  background: #fff; width: 400px;}
.login h3 {font-size: 1.8rem; font-weight: 700; margin-bottom: 30px; text-align: center;}
.login-box {margin: 10px 0;}
.login-box li {padding: 10px 0; width: 100%;}
.login-box label {}
.login-box input {padding: 4px 10px; border: 1px solid #ddd; width: 200px;  margin-left: 20px;}

.login-btn-box {}
.login-btn-box .hide {display: none;}
.login-btn-box .btn {background-color: #3d1846;  border-radius: 20px 0; color: #fff; width: 100%; font-size: 18px; font-weight: 700; height: 50px;}
.login-btn-box .btn:hover {background-color: #804986;}

.login_op {padding: 10px 10px 0;  margin-top: 20px;  border-top: 2px dotted #ddd;}

/***************************************************회원가입**************************************************/
.join {border-radius: 30px;  padding: 2rem;  background: #fff; width: 90%;}
.join h3 {font-size: 1.8rem; font-weight: 700; margin-bottom: 30px; text-align: center;}
.agree-contents {display: block ; }
.agree-contents textarea {padding: 20px; border: 1px solid #ddd; background-color: #f3f3f3; width: 100%; font-size: 16px; line-height: 22px; color: #666666;}
.join .agree-box {width: 600px;}
.join .btn {background-color: #3d1846;  border-radius: 20px 0; color: #fff; width: 49%; font-size: 18px; font-weight: 700; height: 50px; line-height: 28px;}
.join .btn a:link, .join .btn a:visited {color: #fff;}
.join .btn.disagree {background-color: #7e7e7e;}
.join .btn:hover {background-color: #804986;}
.join .btn.disagree:hover {background-color: #5a5a5a;}

.join-wrap .hide {display: none;}
.join-wrap dl {width: 300px; border-bottom: 1px dotted #e9ecef; padding-bottom: 10px;}
.join-wrap dl:last-child {border: none;}
.join-wrap dl dt {margin-bottom: 10px;}
.join-form dt span {font-size: 27px; color: #e21648; position: relative; top: 8px; margin-right: 5px;}
.join-form dd input {padding: 4px 10px; border: 1px solid #ddd; width: 100%;  }

.agree-ok {width: 300px;}
.agree-ok .btn {background-color: #3d1846;  border-radius: 20px 0; color: #fff; width: 100%; font-size: 18px; font-weight: 700; height: 50px; line-height: 28px; padding: 0 40px;}
.agree-ok .hide {display:none;}
.agree-ok .btn a:link, .agree-ok .btn a:visited {color: #fff;}
.agree-ok .btn.disagree {background-color: #7e7e7e;}
.agree-ok .btn:hover {background-color: #804986;}
.agree-ok .btn.disagree:hover {background-color: #5a5a5a;}


/* Tablet */
@media (max-width: 768px) {
  /***************************************************서브메뉴**************************************************/
  .row .p-4 {padding: 0.5rem 0.5rem !important;}
  .sub-content{padding: 1.5rem;}
  .g-1  {--bs-gutter-y: 0.06rem !important;}
  #visual .title {font-size: 2rem;}
  #visual {padding: 1rem 0;}

  .sub-content h2 {font-size: 1.4rem; padding-bottom: 1rem; margin-bottom: 1rem; padding-left: 40px;}
  .sub-content h2::before{background-size: 30px; margin-left: -40px; width: 30px; height: 20px;}

  .sub_nav li, .sub_nav li a, .sub_nav li a:visited {font-size: 12px;}

  .sub_top_intro {margin: 0 auto; width: 90%; }
  .sub_top_intro-1 {margin: 0 auto; width: 90%; }
  .sub_top_intro-2 {margin: 0 auto; width: 90%; }
  .sub_top_intro-3 {margin: 0 auto; width: 90%; }
  .sub_top_intro-4 {margin: 0 auto; width: 90%; }
  .sub_top_intro-5 {margin: 0 auto; width: 90%; }
  .sub_top_intro-6 {margin: 0 auto; width: 90%; }
  .sub_top_intro-7 {margin: 0 auto; width: 90%; }
  .sub_top_intro-8 {margin: 0 auto; width: 90%; }

  .sub_menu_wrap {margin: 0 auto; width: 90%; }
  .sub_top {height: 100px; border-radius: 20px 20px 0 0; background-size: cover;}
  .sub_top_copy h2 {font-size: 28px;}
  .sub_top_sub_copy {font-size: 14px;}
  .sub_menu_top {height: 50px; display: none;}
  .sub_menu li {height: 38px; display: flex; align-items: center;}
  .sub_menu li a {display: flex; align-items: center; justify-content: center;}

  .menu-2-sub {margin: 20px 0;}

  /***************************************************서브페이지**************************************************/
  .sub_contant_wrap {padding: 0; width: 90%; margin: 0 auto;}

  .sub_title {margin: 40px 0 20px;}
  .sub_title h3 {font-size:32px;}


  /***************************************************인사말**************************************************/
  .greet.py-4 {padding: 0;}
  .greet-back.p-5 {padding: 1rem !important;}
  .greet-back .m-5 {margin: 1rem!important;}
  .greet-back .mx-5 {margin: 0!important;}
  .greet-con-back {background: none;}
  .m-greet-info {padding: 16px !important;}
  .greet-box .mx-5 {margin: 0!important;}

/***************************************************연혁**************************************************/
  .history-table {padding: 1rem !important;}

/***************************************************임원명단**************************************************/
  .member-table {padding: 0 !important;}

/***************************************************지부**************************************************/
  .m-area {margin: 0 !important}
  .m-area-member {padding: 20px 0 0 0 !important;}

/***************************************************찾아오시는길**************************************************/
  .map-info .adress {font-size: 1.2rem; line-height: 26px;}

  /***************************************************회원가입**************************************************/
.join {padding: 0.5rem;}
.join .btn a:link,a:visited  {font-size: 14px;}
.join h3 {margin-top: 20px;}

  /***************************************************재단연혁**************************************************/
  .history {padding:0;	background:#fff; width: 100%; text-align: left;}
  .history dl {position:relative;	border-left:1px solid #d7d7d7;	padding:0 0 20px 33px;	margin-left:12px; width: 100%; padding-right: 0 !important;}
  .history dl:nth-child(odd) {width: 100% !important;  border-right: 0 !important;  text-align: left !important;}
  .history dl:nth-child(even) {width: 100% !important;  border-right: 0 !important;  text-align: left !important; left: 0; padding-left:33px; }
  .history dl:nth-child(even):last-child {width: 100% !important;  border-right: 0 !important;  text-align: left !important; left: 0; padding-left:33px; }
  .history dl:last-child {border-left:none !important;	padding-bottom:0; width: 100% !important;}
  .history dl:nth-child(even)::before {width: 100% !important;	display:inline-block;	content:'';	 	background:url("../img/sub/history_bg02-m.png") 0 0 no-repeat ; 	background-size:39px 24px; 	position:absolute; 	left:-12px;	top:0; }
  .history dl:nth-child(odd)::before {width: 100% !important;	display:inline-block;	content:'';	 	background:url("../img/sub/history_bg02-m.png") 0 0 no-repeat ; 	background-size:39px 24px; 	position:absolute; 	left:-12px;	top:0; }
  .history dl:nth-child(even):last-child::before {width: 100% !important;	display:inline-block;	content:'';	 	background:url("../img/sub/history_bg02-m.png") 0 0 no-repeat ; 	background-size:39px 24px; 	position:absolute; 	left:-12px;	top:0; }
  .history dl::before {width: 100% !important;	display:inline-block;	content:'';	 	background:url("../img/sub/history_bg02-m.png") 0 0 no-repeat ; 	background-size:39px 24px; 	position:absolute; 	left:-12px;	top:0; }
  .history dl dt {font-size:22px; font-weight:bold;	padding-top:5px;	margin-bottom:12px;	color:#222; padding-bottom: 20px;  line-height: 10px;}
  .history dl dd {font-size:13px; line-height:22px;	color:#000;	position:relative;}
  .history dl dd span {display:inline-block;	font-size:14px;	color:#009688;	text-align:left; 	left:0; }

  .history dl:nth-child(1)::before {	background:url("../img/sub/history_bg01-m.png") 0 0 no-repeat; 	background-size:39px 24px; }

  /***************************************************자연학교**************************************************/
  .school-box {padding: 2rem; }

  /***************************************************사이트맵**************************************************/
  .sitemap-box {padding: 1rem; border: 0;}

}
