@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");

:root {
  font-size: 16px;
}
/* reset */
* {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans KR", sans-serif;
}
li {
  list-style: none;
}
a:link,
a:visited {
  text-decoration: none;
}

/* page title */
.pageTitle {
  display:none;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.pageTitle img {
  width: 980px;
  display: block;
}
.titleDesc {
  position: absolute;
  padding: 50px 13% 50px 50px;
  background-color: #702c63;
  font-size: 1.2rem;
  color: #fff;
  right: 0;
  top: 20%;
  line-height: 1.8;
}

/* pagetit img 수정 2409 */

.page-title-wrap{
	/* display:none; */
	background: url(../img/sub/img-tit-bg.png) no-repeat center center;
	background-size: cover;
	width: 100%;
	height: 100%;
	min-height: 1110px;
	max-height: max-content;
	position: relative;
}

.page-title-wrap .tit-txt-img.left{
	/* display:none; */
	position: absolute;
	top: 13%;
	left: 4%;
	width: 35%;
}

.page-title-wrap .tit-txt-img.left img{
	
}

.page-title-wrap .tit-txt-img.right{
	/* display:none; */
	position: absolute;
	top: 16%;
	right: 5%;
	width: 30%;
}

.page-title-wrap .tit-txt-img.right img{
	
}

.page-title-wrap .video-wrap{
	/* display: none; */
	width: 25%;
  height: 100%;
	min-height: 170px;
	max-height: 315px;
	background: #fff;
	position: absolute;
	right: 7%;
	top: 54%;
}

.page-title-wrap .video-wrap iframe{
	width: 100%;
	height: 100%;
}

.page-tit-mobile{ display:none;}

@media all and ( max-width: 2300px) {
	.page-title-wrap{ 
		max-width: 2400px; background-size: 100%; height: 100%; min-height: 1110px;
	}
	.page-title-wrap .video-wrap{
		max-height: 270px;
	}
}

@media all and ( max-width: 1920px) {
		.page-title-wrap{ 
			background-position: 0 0;
			background-size: 100%;
			height: 100%;
			min-height: 980px;
			max-height: 980px;
		}
		.page-title-wrap .video-wrap{ top: 52%;}
 }

 @media all and (min-width: 1400px) and ( max-width: 1700px) {
	.page-title-wrap .video-wrap{ top: 44%; max-height: 200px;}
 }

 @media all and (min-width: 920px) and ( max-width: 1400px) {
 		.page-title-wrap{ min-height: 600px;}
		.page-title-wrap .tit-txt-img.left{ top: 15%;}
		.page-title-wrap .tit-txt-img.right{ top: 15%;}
		.page-title-wrap .video-wrap{ top: 300px; min-height:160px; max-height: 160px;}
 }

 @media all and (min-width: 768px) and ( max-width: 920px) {
		.page-title-wrap{ min-height: 478px;}
		.page-title-wrap .tit-txt-img.left{ top: 16%;}
		.page-title-wrap .tit-txt-img.right{ top: 16%;}
		.page-title-wrap .video-wrap{ width: 24%; top: 242px; min-height: 110px; max-height: 110px;}
 }

 @media all and (min-width: 360px) and (max-width: 768px) {
	.page-title-wrap{ display:none; background: none;}

	.page-tit-mobile{ display:block;}
	.tit-mb-top{ margin-bottom:-4px;}
	.tit-mb-bottom{ position: relative;}
	.tit-mb-bottom .video-wrap-mobile{ position: absolute; left: 52%; bottom: 17%; transform: translateX(-50%); width: 72%; height: 100%; max-height: 162px;}
	.tit-mb-bottom .video-wrap-mobile iframe{ width:100%; height: 100%;}
}

/* section list */
.secList {
  width: 50%;
  margin: 0 auto;
}
.secList .infoText {
  color: #702c63;
  font-size: 1.25rem;
  line-height: 1.5;
  margin-top: 50px;
}
/* sectin list ## list area */
.selectRegion {
  width: 270px;
  line-height: 60px;
  box-sizing: border-box;
  border-radius: 50px;
  border: 3px solid #702c63;
  box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
  color: #702c63;
  font-size: 1.625rem;
  font-weight: bold;
  margin-bottom: 55px;
}
.regionArea:hover {
  fill: #702c63;
}

.regionArea:hover + .cls-1,
.regionArea:hover + .cls-2,
.regionArea:hover + .cls-3 {
  fill: #fff;
}

.regionArea.on { /*22.06.15추가*/
	fill: #702c63;
}
.hList {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.hList li {
  width: 170px;
  text-align: center;
  padding: 23px 9.5px;
  background: url("../img/sub/bg_list.png") no-repeat center;
  background-size: cover;
  margin-right: 1%;
  margin-bottom: 1%;
  color: #fff;
  position: relative;
}
.hList li .hName {
  font-size: 1.175rem;
  word-wrap: break-word;
  word-break: keep-all;
  height: 80px;
  line-height: 1.2;
}
.hList li .hRegion {
  font-size: 1.0rem;
  position: absolute;
  bottom: 23px;
  left: 50%;
  transform: translate(-50%, 0);
}
/* section notice */
.secNotice {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #636363;
  background-color: #c4c4c4;
  text-align: center;
  padding: 18px 0;
  margin-top: 30px;
}

@media all and (min-width: 360px) and (max-width: 768px) {

.map_container{
padding-top:120px;
}
}
@media all and (min-width: 360px) and (max-width: 768px) {
  :root {
    font-size: 14px;
  }
  .pageTitle img {
    width: 100%;
  }
  .titleDesc {
    position: static;
    padding: 7% 5%;
    font-size: 1rem;
    line-height: 1.8;
  }
  .secList {
    width: 90%;
  }
  .secList .infoText {
    font-size: 1rem;
    margin-top: 7%;
  }
  .selectRegion {
    display: inline-block;
    width: auto;
    line-height: 35px;
    padding: 0 7%;
    font-size: 1rem;
    margin-bottom: 30px;
  }
  .hList li {
    width: 30%;
    box-sizing: border-box;
    padding: 10px 8.5px;
    margin-right: 3%;
    margin-bottom: 3%;
  }
  .hList li .hName {
    font-size: 0.9rem;
    height: auto;
    padding-bottom: 30%;
  }
  .secNotice {
    font-size: 1.1rem;
    padding: 5%;
    word-break: keep-all;
  }
  .hList li .hRegion {font-size: 0.8rem;bottom: 10px;}
}

 .listArea .listWrap{display: none;}
 .listArea.on{ display: block;width:150%; margin-left:-25%;}
 .listArea .listWrap.on { display: block;width:150%; margin-left:-25%;}
 .listArea .si_name{background:none;width:100%;text-align:left;color:#702c63;padding-top:10px;padding-bottom:0;font-weight:bold;font-size:1.2em;}

 @media all and (min-width: 360px) and (max-width: 768px) {
 .listArea .listWrap.on { display: block;width:100%; margin-left:0%;}
 .listArea .si_name{font-size:1.0em;}

 .secList {
  width: 80%;
  margin: 0 auto;
}
  }