@charset "utf-8";
/*평생학습도시 서구*/
.greeting {  padding: 40px 20px;}
.greeting .tit {  padding: 0px 430px 40px 20px;  width: 100%;  min-height: 180px;  border-bottom: 3px solid #623412;  background: url(../img/sub/greeting-bg.png) no-repeat right 15% bottom;}
.greeting .tit span {  position: relative;  margin: 0;  width: 100%;  max-width: 594px;  height: 158px;  background: url(../img/sub/greeting-tit.png) no-repeat 0 0 / 100%;  z-index: 1;}
.greeting .con {  display: flex;  flex-wrap: wrap;  gap: 72px;  margin-top: 66px;  padding: 0px 20px;}
.greeting .con p {  margin-top: 50px;  font-size: var(--f19);  font-weight: 500;  line-height: var(--f36);  letter-spacing: -0.19px;}
.greeting .con p:first-child {  margin-top: 0;}
.greeting .con p span {  position: relative;  display: inline-block;  color: var(--turquoise);  font-weight: 600;}
.greeting .con p span::before {  content: '';  position: absolute;  left: 0;  bottom: 5px;  width: 100%;  height: 12px;  background: var(--lemon);  z-index: -1;}
.greeting .name {  display: flex;  align-items: flex-end;  justify-content: flex-end;  gap: 11px;  font-size: var(--f19);  line-height: var(--f19);  font-weight: 500;}
.vision {  display: flex;  justify-content: center;  margin: auto;}
.declaration {  display: flex;  flex-direction: column;  gap: 40px;  margin-top: 40px;  padding: 0px 60px 60px 60px;  border-top: 12px solid var(--charcoal);  border-bottom: 6px solid var(--charcoal);}
.declaration .tit {  text-align: center;  padding-top: 195px;  padding-bottom: 40px;  margin-bottom: 10px;  font-size: 30px;  font-weight: 700;  border-bottom: 2px solid #999;  background: url(../img/sub/declaration-logo.svg) no-repeat center -12px;}
.declaration .tit span:nth-of-type(1) {  color: var(--turquoise);}
.declaration .tit span:nth-of-type(2) {  color: var(--purple);}
.declaration dl {  display: flex;  align-items: flex-start;  gap: 20px;}
.declaration dt {  flex: 0 0 auto;  padding: 3px 0 3px 36px;  color: var(--turquoise);  font-size: var(--f24);  font-weight: 700;  line-height: var(--f24);  background: url(../img/sub/tbox-bl.svg) no-repeat 0 0 / 28px;}
.declaration dd {  font-size: var(--f20);  font-weight: 500;  line-height: 28px;}
.declaration dd span {  color: var(--margenta);}
.history {  display: flex;  align-items: flex-start;  gap: 70px;  padding-left: 20px;  padding-right: 20px;  width: 100%;}
.history .year {  flex: 0 0 auto;  padding: 33px 74px;  color: var(--turquoise);  font-size: 32px;  font-weight: 700;  border-radius: 4px;  border: 2px solid var(--turquoise);}
.history .month {  position: relative;  display: flex;  flex-direction: column;  gap: 12px;  width: 100%;}
.history .month::before {  content: '';  position: absolute;  left: 0;  top: 0;  width: 1px;  height: 100%;  background: #ddd;}
.history .month>div {  position: relative;  display: flex;  gap: 20px;}
.history .month>div::before {  content: '';  position: absolute;  left: -6px;  top: 21px;  width: 13px;  height: 13px;  border-radius: 50%;  border: 3px solid transparent;  background: #fff;  box-sizing: border-box;  z-index: 1;}
.history .month>div:nth-child(odd)::before {  border-color: var(--purple);}
.history .month>div:nth-child(even)::before {  border-color: var(--turquoise);}
.history .month>div>p {  flex: 0 0 auto;  text-align: center;  padding: 12px 0 12px 7px;  width: 67px;  font-size: 22px;  font-weight: 700;}
.history .month>div:nth-child(odd)>p {  color: var(--purple);}
.history .month>div:nth-child(even)>p {  color: var(--turquoise);}
.history .month ul {  display: flex;  flex-direction: column;  justify-content: center;  gap: 2px;  padding: 24px;  width: 100%;  border-radius: 8px;}
.history .month div:nth-child(odd) ul {  background: var(--margenta-with);}
.history .month div:nth-child(even) ul {  background: rgba(1, 145, 156, 0.05);}
.history .month ul li {  position: relative;  padding-left: 15px;  font-size: var(--f17);  font-weight: 500;}
.history .month ul li::before {  content: '';  position: absolute;  left: 0;  top: 11px;  width: 7px;  height: 2px;  border-radius: 2px;}
.history .month div:nth-child(odd) li::before {  background: var(--purple);}
.history .month div:nth-child(even) li::before {  background: var(--turquoise);}
.history .month li p {  color: #666;  font-size: var(--f16);  font-weight: 500;}
.history2014 {  display: flex;  flex-direction: column;  gap: 80px;}
.history2014 .only {  align-items: center;}
.history2014 .history:nth-child(even) .year {  color: var(--purple);  border-color: var(--purple);}
.history2014 .month>div>p {  width: 110px;}
.history2014 .month .no-month {  padding-left: 30px;}
.history2014 .month .no-month::before {  top: 30px;}
.info-facility {  display: flex;  justify-content: space-between;  gap: 10px;}
.photo-list {  display: flex;  justify-content: center;  flex-wrap: wrap;  gap: 20px;  padding-top: 20px;}
.photo-list>li {  position: relative;  display: flex;  justify-content: center;  align-items: center;  width: 380px;  height: 280px;  border: 8px solid #FFF;  background: #CCC;  box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.10);  overflow: hidden;}
.photo-list>li>span {  position: absolute;  right: 0;  bottom: 0;  display: inline-block;  padding: 8px var(--f17);  color: #FFF;  font-size: var(--f16);  font-weight: 700;  line-height: 150%;  background: rgba(0, 0, 0, 0.60);}
.photo-list>li img {  min-width: 100%;}
.map-box {  margin-bottom: 20px;  margin-top: 20px;  height: 440px;  border: 1px solid #CCC;}
.map-box #map {  height: 100% !important;}
.map-con {  display: flex;  flex-direction: column;  gap: 60px;  margin-top: 40px;}
.map-con>div {  position: relative;  display: flex;  flex-direction: column;  justify-content: center;  gap: 25px;  margin-top: 20px;  margin-bottom: 20px;  padding-left: 240px;  min-height: 200px;}
.map-con>div::before {  content: '';  position: absolute;  left: 0;  top: 0;  width: 200px;  height: 200px;  border-radius: 50%;  background: #F6F9FA url(../img/sub/map-con.svg);}
.map-con .bus::before {  background-position: -200px 0;}
.map-con .car::before {  background-position: -400px 0;}
.map-con>div>div {  margin-left: 20px;}
.map-con>div p.bl03 {  margin-top: 6px;}
.map-con .arr {  display: inline-block;  margin-left: 10px;  margin-right: 10px;  width: 6px;  height: 10px;  font-size: 0;  line-height: 20px;  text-indent: -5000px;  background: url(../img/sub/map-con-arr.svg) no-repeat center;}
.map-con .arr.ver2 {  width: 21px;  height: 11px;  line-height: 22px;  background-image: url(../img/sub/map-con-arr2.svg);}
.map-con .bus span {  flex: 0 0 auto;  display: flex;  justify-content: center;  align-items: center;  margin-right: 10px;  padding: 4px 10px;  width: 85px;  height: 34px;  color: #FFF;  font-size: var(--f17);  font-weight: 800;  line-height: var(--f24);  border-radius: 4px;  background: var(--turquoise);}
.map-con .bus ul {  margin-top: 12px;}
.map-con .bus li {  display: flex;  margin-top: 10px;  padding-left: 0;}
.map-con .bus li::before {  display: none;}
.map-con .bus li p {  font-size: var(--f17);  font-weight: 500;  line-height: var(--f24);}/*평생학습도시 서구 end*/
/*교육신청*/.cyber {  display: flex;  flex-direction: column;  gap: 16px;}
.cyber li {  display: flex;  gap: 16px;}
.cyber .logo {  flex: 0 0 auto;  display: flex;  justify-content: center;  align-items: center;  width: 180px;  height: 124px;  border-radius: 8px;  border: 6px solid #F9F9F9;}
.cyber .con {  display: flex;  justify-content: space-between;  align-items: center;  padding: 16px 16px 20px;  width: 100%;  border-bottom: 1px solid #EDEDED;}
.cyber dl {  display: flex;  flex-direction: column;  justify-content: center;}
.cyber dt {  margin-bottom: 8px;  font-size: var(--f22);  font-weight: 700;}
.cyber dd {  color: #666;  font-size: var(--f17);  font-weight: 500;  line-height: var(--f24);}/*교육신청 end*/
/*주요사업*/
.img-box {  padding: 40px;  border: 8px solid #EEE;  line-height: 0;}
.manage.img-box {  padding: 0;}
.area.img-box {  text-align: center;  margin-top: 12px;  width: 100%;}
.network.photo-list>li {  width: 340px;  height: 190px;}/*주요사업 end*/
/*이용안내*/
.ordinance_enforce {/*주요사업 조례 부분*/  display: block;  font-size: var(--f20);  font-weight: 500;}
.news_letter {  padding: 36px 0 0px 20px;  background: url(../img/sub/news_letter.png) no-repeat right bottom;}
.news_letter>.tit {  margin-bottom: 22px;  color: #222;  font-size: var(--f20);  font-weight: 500;  line-height: 155%;}
.news_letter>.tit>span {  background: linear-gradient(to bottom, transparent 0%, transparent 29.9%, var(--lemon) 30%, var(--lemon) 80%, transparent 80.1%, transparent 100%);}
.news_letter .info-box {  display: inline-flex;}
.news_letter .btnbox {  margin-top: 48px;}
.news_letter .btnbox .conbtn {  margin-right: 40px;}
.news_letter .cancel {  margin-right: 0;  color: var(--dark-blue);  line-height: 43px;  border: 2px solid var(--dark-blue);  background: #FFF;}
.news_letter .cancel::before {  display: none;}
/*이용안내 end*/

/*pc*/
@media screen and (min-width:1281px){
 .greeting .con>div { flex: 1 1 auto; max-width: 528px; width: 100%;  }
  .vision .mb { display: none;  }
  .greeting .mb { display: none;  }
  .manage-flex { display: flex; gap: 10px; justify-content: space-around;  }
 }

/*mb*/
@media screen and (max-width:1280px){
	.greeting .con { gap: 50px;  }
	.greeting .con>div:nth-of-type(2) p { margin-top: 0;  }
	.vision .pc { display: none;  }
	.greeting .pc { display: none;  }
	.info-facility { flex-direction: column-reverse; gap: 0; margin-top: 20px;  }
}
@media screen and (max-width:800px){
  .greeting { padding: 0;  }
  .greeting .tit { text-align: center; padding: 0 10px 130px 10px; min-height: unset; border-bottom: none; background-position: center bottom; background-size: 200px;  }
  .greeting .tit span { margin: auto; max-width: 297px; height: 84px; background-image: url(../img/sub/greeting-tit-mb.png);  }
  .greeting .con { margin-top: 36px; gap: 20px;  }
  .greeting .con p { margin-top: 20px;  }
  .declaration { margin-top: 0;  }
  .declaration .tit { font-size: 24px;  }
  .history { gap: 28px; padding: 0;  }
  .history .year { padding: 0px 28px; font-size: 24px; border: none;  }
  .history .month  { gap: 28px;  }
  .history .month>div { flex-direction: column; gap: 8px;  }
  .history .month>div::before { top: 7px; left: -4.5px; width: 10px; height: 10px;  }
  .history .month>div>p { text-align: left; padding: 0 0 0 16px; width: auto; font-size: 17px;  }
  .history .month ul { padding: 0 0 0 20px; background: none !important;  }
  .history .month li { padding-left: 10px;  }
  .history .month li::before { top: 9px; width: 5px;  }
  .history2014 .month .no-month { padding-left: 0;  }
  .history2014 .month .no-month::before { top: 8px;  }
  .map-box { height: 300px;  }
  .map-con>div { padding-left: 180px; min-height: 180px;  }
  .map-con>div::before { width: 160px; height: 160px; background-size: auto 160px;  }
  .map-con .bus::before { background-position: -160px 0;  }
  .map-con .car::before { background-position: -320px 0;  }
  .map-con>div>div { margin-left: 0;  }
  .map-con .arr { margin-left: 3px; margin-right: 3px;  }
  .map-con .bus span { width: 72px;  }
  .cyber { gap: 20px;  }
  .cyber .logo { height: auto;  }
  .cyber .con { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 0px 16px 20px; border-bottom: none;  }
  .news_letter { padding: 210px 0 0 0; background-position: center 20px; background-size: 200px;  }
  .news_letter>.tit { text-align: center;  }
  .news_letter .info-box { display: flex;  }
  .news_letter .btnbox { text-align: center; margin-top: 24px;  }
  .news_letter .btnbox .conbtn { margin-right: 25px;  }
  .news_letter .cancel { line-height: 32px;  }
 }
@media screen and (max-width:480px){
	.declaration { gap: 28px; padding: 0 0 40px 0; border-top-width: 8px; border-bottom-width: 4px;  }
	.declaration .tit { padding-top: 103px; padding-bottom: 20px; margin-bottom: 4px; font-size: 20px; line-height: 27px; background-size: 130px;  }
	.declaration dl { flex-direction: column; gap: 8px;  }
	.declaration dt { padding: 0 0 0 30px; font-size: 18px; line-height: 24px; background-size: 24px;  }
	.declaration dd { font-size: 15px; line-height: 21px;  }
	.history { flex-direction: column; gap: 24px; margin-top: -10px;  }
	.history .year { padding: 0px 10px;  }
	.history .month { padding: 0px 20px;  }
	.history .month::before { left: 20px;  }
	.photo-list>li { height: auto;  }
	.map-con>div { margin-bottom: 0; padding-top: 180px; padding-left: 0;  }
	.map-con>div::before { right: 0; margin: auto;  }
	.map-con .bus li { flex-direction: column; align-items: flex-start; gap: 10px;  }
	.cyber { gap: 32px;  }
	.cyber li { flex-direction: column; gap: 0;  }
	.cyber .logo { width: 100%; height: 68px;  }
	.cyber .con { align-items: center; gap: 16px; padding: 12px;  }
	.cyber dl { width: 100%;  }
	.cyber dt { display: none;  }
	.cyber dd br { display: none; }
}

.info-floor{display: flex; justify-content: space-between; padding: 3%; border: 5px solid #E8DFCD; border-radius: 10px;}
.info-floor>div>p{font-weight: bold; font-size: 1.2em;}
.info-floor>div>ul{display: flex; flex-wrap: wrap;}
.info-floor>div>ul>li{padding: 5px 7px}
.info-floor>div>ul>li dl+dl{margin-top: 5px;}
.info-floor>div>ul>li dl dt{font-weight: bold;}
.info-floor>div>ul>li dl dd{font-size: .9em;}
.info-app{display: flex; align-items: center; justify-content: center; padding: 3%; margin-top: 10px;  background: linear-gradient(87deg, #EDF3FF 0.96%, #F0EBFF 98.91%); border-radius: 10px; }
.info-app>p{position: relative; font-size: 1.4em; width: 25%; font-weight: bold; }
.info-app>p:before{display: block; content: ''; position:absolute; left: -3em; top: -1.4em; width: 3em; aspect-ratio:1/1; background: url(/open_content/anyedu/img/sub/info_qr.png) no-repeat center center / cover;}
.info-app>ul{display: flex; gap:20px}
.info-app>ul>li{}
@media screen and (max-width:800px){
	.info-floor{flex-direction: column;}
	.info-floor>div>ul>li{flex:0 0 50%}
	.info-floor>div>ul>li:last-child{flex-basis:100%}
	.info-app{flex-direction: column; padding: 40px 10px 20px}
	.info-app>p{width: auto; margin: auto; font-size: clamp(15px, 1.4vw, 21px);}
	.info-app>p:before{width: 2em; left: -2em; top: -1em;}
	.info-app>ul{gap:5%; margin-top: 2em; padding:0px 20px}

}