.br{display:block;}

#sa_map{width:100%;/*  height:calc(100vh - 90px); */ overflow:hidden;font-family: 'Gmarket SansM'; position:relative; 
					background:url('../images/main/visual_bg_c2.jpg') no-repeat right top;  background-size: cover;}
#sa_map .map_list{width:100%; position:relative;  display: flex;  justify-content: flex-end;}

.visual_slogan{position:absolute; width:100%;}
.vis_txt{margin-top:80px;}
.vis_stxt{font-size:25px; color:#1e3a5f; position:relative; font-weight:bold; margin-left: 91px;}
.vis_stxt:before{content:""; display:inline-block; width:137px; height:105px; background:url('/images/main/visual_tit_ico.png') no-repeat 0 0; }
.vis_stxt2{font-size:29px; color:#1e3a5f; margin: 36px 0 0 40px; line-height: 140%; letter-spacing: -0.5px; }

#svg-container {position: relative; padding:0; width: 100%; max-width: 1254px; margin-top: 0px; aspect-ratio: 1254 / 835; background: url('../images/main/sa_map_bg.png') no-repeat left top; background-size: 100% 100%; } 

#svg-container a { position: absolute; display: block; text-align: center;  cursor: pointer; z-index: 10;}
#svg-container a img { display: block; width: 100%;  height: auto; transition: transform 0.3s ease;}
#svg-container a:hover img { transform: scale(1.05); }
#svg-container a.active:hover img{ transform:none; }
#svg-container a .is_name {position: absolute;  transform: translateX(-50%); white-space: nowrap; color: #293e99; font-size:12px;  font-weight:bold; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}

#svg-container div { position: absolute; display: block; text-align: center;  cursor: pointer;}
#svg-container div .is_name {position: absolute;  transform: translateX(-50%); white-space: nowrap; color: #293e99; font-size:12px;  font-weight:bold; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}

#svg-container a.active .is_name{color: #ff6f61 !important}

#svg-container a.imja { top: 5.3%; left: 62.1%; width: 10.35%;}
#svg-container a.bakji {top: 69.9%; left: 66.75%; width: 3.7%; }
#svg-container a.anjwa {top: 61.05%; left: 64.2%; width: 10.1%;}
#svg-container a.hyoji {top: 40.7%; left: 88.45%; width: 1.25%; z-index:10;}
#svg-container a.jido {top: 10.4%; left: 72.4%; width: 10%;}
#svg-container a.goi {top: 31.5%; left: 80.8%; width: 3.9%;}
#svg-container a.eoui {top: 5.3%; left: 74.2%; width: 1.9%;}
#svg-container a.seon {top: 26.4%; left: 80.05%; width:2.4%;}
#svg-container a.jaewon {top: 11.7%; left: 59.5%; width: 2.5%;}
#svg-container a.jeung {top: 23.2%; left: 67.2%; width: 7.3%;}
#svg-container a.jaeun {top: 36.45%; left: 55.9%; width: 11.3%;}
#svg-container a.amtae {top: 45.1%; left: 63.9%; width: 8.6%;}
#svg-container a.haui {top: 81.9%; left: 59.4%; width: 4.8%; z-index: 10;}
#svg-container a.jangjae {top: 86.6%; left: 57.4%; width: 1.9%; z-index: 10;}
#svg-container a.suchi {top: 62.5%; left: 59.6%; width: 1.75%;}
#svg-container a.neungsan {  top: 82.6%; left: 57.2%; width: 2.2%; z-index: 10;}
#svg-container a.jangbyeong {top: 77%; left: 62.05%; width: 1.1%;}
#svg-container a.gi {top: 83.4%; left: 65.2%; width: 1.4%; z-index: 10;}
#svg-container a.gosa {top: 91.7%; left: 71.15%;  width: 1.1%;}
#svg-container a.majin {top: 83.0%; left: 75.5%; width: 2.2%;}
#svg-container a.sachi {top: 61.7%;  left: 61.9%; width: 2.1%; }
#svg-container a.dangsa {top: 41.9%; left: 73.5%; width: 1.6%;}
#svg-container a.apae {top: 38.6%; left: 78.4%; width: 12.75%;}
#svg-container a.docho {top: 66.7%; left: 51.1%; width:8.55%;}
#svg-container a.bigeum {top: 56.5%; left: 48.5%;width:10.1%;}
#svg-container a.jangsan {top: 76.2%; left: 68.6%; width: 7.55%;}
#svg-container a.palgeum {top: 55.4%; left: 65.9%; width: 7.5%; z-index: 10;}
#svg-container a.anjwa {top: 61.05%; left: 64.2%; width: 10.25%;} 
#svg-container a.sinui {top: 82.9%; left: 60.6%; width: 7.7%;}
#svg-container a.pojak {top: 8.0%; left: 75.6%; width: 1.1%;}
#svg-container a.ok {top: 73.5%; left: 63.9%; width: 1.7%;}
#svg-container a.mokpo {top:58.5%; left: 90.3%; width: 1.7%;}
#svg-container a.byeongpung {top: 29.8%; left: 75.7%; width: 1.9%;}
#svg-container a.song {top: 18.7%; left: 75.5%;  width: 1.6%;}
#svg-container a.daegijeom {top: 35.6%; left: 74.7%; width: 1.9%;}
#svg-container a.soakdo {top: 37.7%;  left: 74.8%; width: 1.5%;}
#svg-container a.maehwa {top: 37.6%; left: 77.2%; width: 3.3%;}

#svg-container a.masan {top: 33.6%; left: 78.4%; width: 1.8%;}
#svg-container a.hong {top:60.4%; left: 14.2%; width: 3.3%;}
#svg-container a.jang {top: 62.15%; left: 24.1%; width: 3.1%;}
#svg-container a.heuksan {top: 61.9%; left: 26.2%; width: 7%;}
#svg-container a.daedun {top: 55.05%; left: 31.8%; width: 2.75%;}
#svg-container a.damul {top: 51.4%; left: 29.8%; width: 2.45%;}
#svg-container a.yeongsan {top: 67.1%; left: 32.4%; width: 2.1%; z-index:10;}

#svg-container a.ui {top: 82.9%; left: 40.7%; width: 8.15%;}
#svg-container a.gageo {top: 90.05%; left: -0.2%; width: 5.6%;}
#svg-container a.manjae {top:89.6%; left: 24.5%;  width: 4.3%;}
#svg-container a.sangtae {top:78.2%; left: 17.3%;  width: 1.7%;}
#svg-container a.jungtae {top: 81.2%; left: 17.0%;  width: 1.3%;}


#svg-container a.songgong {top:48.5%; left: 78.3%;width: 1.7%;}
#svg-container a.garyong {top:37.5%; left: 84.3%; width: 1.7%;}
#svg-container a.sinwol {top:31.5%; left: 84.3%; width: 1.7%;}
#svg-container a.songdo {top:20.9%; left: 76.0%;width: 1.7%;}


#svg-container a.usuyeong {top: 88.2%;  left: 85%; width: 1.7%;}
#svg-container a.YGG {top: 2.9%; left: 96%;}
#svg-container a.MAG {top:34.2%; left: 96%;}
#svg-container a.MPG {top:52.9%; left: 96%;}
#svg-container a.YAG {top: 63.4%; left: 96%;}
#svg-container a.HNG {top:74.9%; left: 85%;}



.route-image{ pointer-events: none; }

.map_box{position: absolute;  color: #fff; left: 11.5vw; top: 6vw; box-sizing: border-box; }
.island_tit{color:#2c406d; font-size:60px; font-family: 'Gmarket SansB';}
.island_stit{color:#fff; font-size:30px; line-height: 1.3; margin: 13px 0 0 2px;}
.vis_link{width:100%; display:flex; justify-content: flex-start; margin: 39px 0;  gap: 0 25px;}
.vis_link a {width:118px;height:118px; border-radius:42px; font-size:16px; background:#fff; position:relative;letter-spacing:0.5px; display: flex; align-items: center;justify-content: center; flex-direction: column;
			 transition: all 0.5s; color:#002032}	 
.vis_link a i {display: block; width: 60px;  height:55px;  margin: 0 auto 10px;}
.vis_link a i[class^='vis_'] {display: inline-block; background-image: url('/images/main/vis_ico.png'); background-repeat: no-repeat; }  
.vis_link i.vis_ico1{ background-position:2px -74px;}
.vis_link i.vis_ico2{background-position:-91px -74px;}
.vis_link i.vis_ico3{background-position:-86px 0px;}
.vis_link i.vis_ico4{background-position:-186px -70px;}
.vis_link a .txt{}

.dock_box{margin-left: 10px; }
.dock_tit{font-size:20px; position:relative; display: flex; gap: 8px; align-items: center; color:#002338}
.dock_tit:before{content:""; display:inline-block; width:28px; height:36px; background:url('/images/main/dock_ico.png') no-repeat 0 0; }
.dock_tit.ico1:before{background:url('/images/main/dock_ico.png') no-repeat 0 0; }
.dock_tit.ico2:before{background:url('/images/main/dock_ico2.png') no-repeat 0 0; }
.dock_tit.ico3:before{background:url('/images/main/dock_ico3.png') no-repeat 0 0; }
.dock_tit.ico4:before{background:url('/images/main/dock_ico4.png') no-repeat 0 0; }
.dock_tit.ico5:before{background:url('/images/main/dock_ico5.png') no-repeat 0 0; }
.dock_ul{padding-left:12px; margin-top: 13px;}
.dock_ul li{ position:relative; padding-left:15px; color:#2f5972}
.dock_ul li:before{content:""; display:inline-block; width:4px; height:4px; background:#2f5972; position: absolute; left: 0; top:12px;}
.dock_link{ display: inline-block;  background: #4e618d; color: #fff;margin: 30px 0 0 10px; padding: 15px 30px; width: 210px; position:relative; font-size: 15px;}
.dock_link:before{content: ""; display: inline-block; width: 50px; height: 1px; background: #fff; position: absolute; right: 35px; top: 27px;}
.dock_link:after{content: ""; display: inline-block; width: 15px; height: 1px; background: #fff; position: absolute; right: 33px; top: 22px; transform: rotate(45deg);}

.dock_slink{background: #4e618d; font-size: 15px; padding: 5px 20px 3px; color: #fff; border-radius: 20px;}


.minner .inner{display:flex; justify-content:space-between; }
.mh3_tit {font-family: 'Jalnan'; font-size:50px; color:#222;}
#notice_wrap .mh3_tit { position: absolute;}
#notice_wrap {width:779px; display:inline-block; position:relative; background:#fff; margin-top:100px; }
#notice_wrap > ul {overflow: hidden; border-bottom:2px solid #222; padding:20px 0 25px 0} 
#notice_wrap > ul > li {float:left; display: inline-block; padding-right:50px;}
#notice_wrap > ul > li:first-child > a.notice_tit{padding-left:26vw; position:relative;}
#notice_wrap > ul > li:first-child > a.notice_tit:after{content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background: #252525; position:absolute; top: 9px; right: -30px;}
#notice_wrap > ul > li a.notice_tit { }
#notice_wrap > ul > li > a.notice_tit{position:relative; display: block; color: #222;  text-align:center; font-weight: 700; font-size:22px; z-index: 999; }
#notice_wrap > ul > li > div { position: absolute; text-align: left; margin-top:44px; left:0; width: 100%;}
#notice_wrap .lt_date{font-size:15px; color:#999; font-weight:400; }
#notice_wrap .lat a{display: flex; justify-content: space-between; padding:32px 0 33px 0; border-bottom:1px dotted #ddd;  position:relative;  flex-direction: column;}
#notice_wrap .lat a .tit{color: #000; margin-bottom:12px; font-size: 22px; color:#222; display: block;   display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:1; 
					overflow: hidden;text-overflow: ellipsis; width:100%; font-weight:600;}
#notice_wrap .first_li .con{font-size: 17px; margin-bottom:10px; color:#222; line-height:140%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:1;  overflow: hidden;text-overflow: ellipsis; }
#notice_wrap .first_li .lt_date .ym{font-size: 15px;}
#notice_wrap .first_li .lt_date .day{font-size:30px; font-weight: 700; color: #000;}
.notice_more{position:absolute; width: 28px; height: 28px; font-size: 0; right:0px; top: 16px;}
.notice_more:before{content:""; display:inline-block; width:28px; height:2px; background:#1d1d1d; position: absolute; top: 13px;  right: 0;  }
.notice_more:after{content:""; display:inline-block; width:2px; height:28px; background:#1d1d1d; position: absolute; right: 13px;  top: 0; }
#notice_wrap > ul > li.active .notice_more{z-index:99}
#notice_wrap > ul > li.active .notice_more:after{display:none;}


.popz_box{position:relative;  margin-top:100px; }
.popz_box .popz_li{position:relative; border-radius:20px; overflow:hidden; width:557px; height:421px; margin-top: 13px;}

.swiper_cont{position:absolute; right:0px; top:22px; display: flex; align-items: center; justify-content:flex-start; }
.slider1_count{display:flex; width:96px !important; justify-content: space-between;}
.autoplay-progress { position: absolute; left: 24px; width: 48px !important; height: 48px !important; display: flex; align-items: center; justify-content: center; font-size: 0;}
.progress-bar {width: 45px; height: 3px; background-color: #ccc; border-radius: 5px; position: relative; overflow: hidden; }
.progress-fill { width: 0%; height: 100%; background-color: #000; transition: width 0.1s linear;}
.play-stop-btn {background:url('/images/main/popz_ico.png') no-repeat; border:0; cursor: pointer; font-size:0; text-indent:-999999999999px; width:20px; height:20px; }
.play-stop-btn.paused { background-position:-24px 3px }
.play-stop-btn.playing {background-position:-112px 3px; }


.slide_prev{margin-left: 20px; background:url('/images/main/popz_ico.png') no-repeat; width:20px; height:20px; font-size:0; text-indent:-999999999999px; z-index:10; cursor: pointer; background-position:4px 3px; display: flex; align-items: center; justify-content: center;}
.slide_next{background:url('/images/main/popz_ico.png') no-repeat; width:20px; height:20px;  font-size:0; text-indent:-999999999999px; z-index:10; cursor: pointer;background-position:-52px 3px; display: flex; align-items: center; justify-content: center;}

.minner .inner{flex-wrap:wrap}


.pop_ft{text-align:center; border:7px solid #60a53b; font-family: 'Gmarket SansM'; padding:20px; width:510px;}
.pop_ft h3{font-size:20px; color:#ff8b12; font-family: 'Gmarket SansM'; margin-bottom:5px; }
.pop_ft .txt{font-size:15px; text-align: left;}

.pop_ft table{ width: 100%; border-collapse: collapse; border-bottom: 1px solid #ddd; border-right: 2px solid #fff;  }
.pop_ft  th, 
.pop_ft  td {font-size:13px; padding:5px 0 2px; border-right: 1px solid #ddd; border-bottom: 1px solid #60a53b; text-align:center; vertical-align:middle; color:#333;}
.pop_ft  th { background: #539f2a; color: #fff; font-weight: normal; letter-spacing: 0; padding: 5px 0 2px; }


@media screen and (max-width: 1440px) {
	#hd_pop {width:100%;}
	#hd, #wrapper, #ft { min-width: 100%}

	.minner .inner{width:100%; padding:0 30px;}

	#notice_wrap { width: 55%;}
	.popz_box{width: 40%;}
}

@media screen and (max-width: 999px) {
	.island_stit,
	.dock_ul,
	.vis_link{ display: none !important;}
	.visual_slogan{ display: none !important;}

	.map_box{ left: 20px; top: 110px;}
	

	.mh3_tit {font-size:25px;	}
	#notice_wrap > ul > li {padding-right: 40px;}
	#notice_wrap > ul {padding: 0 0 15px 0;}
	#notice_wrap > ul > li:first-child > a.notice_tit { padding-left: 39vw;}
	#notice_wrap > ul > li:first-child > a.notice_tit:after{top: 6px; right: -23px;}
	#notice_wrap > ul > li > a.notice_tit {font-size: 18px;}
	#notice_wrap .lat a { padding:12px 0 9px 0}
	#notice_wrap .lat a .tit {font-size: 15px;}
	#notice_wrap .first_li .con {font-size: 14px;}
	#notice_wrap .lt_date {font-size: 13px;}

	.popz_box img{max-width:100%;}
	.popz_box .popz_li{width:100%; height:auto;}
}
	
@media screen and (max-width: 765px) {

	#sa_map{ height: auto;}
	
	/* .svg-text-label{display:none !important; font-size:0.2rem; text-shadow: none}
	.svg-text-label:hover{display:block !important; font-size:4px;}
	.svg-text-label.active{display:block !important; font-size:4px;} */
	
	#svg-container a .is_name{font-size:3px;}


	.vis_txt { display: none;}
	.vis_stxt {font-size: 15px;}
	.vis_stxt:before {width: 70px; height: 54px; background-size: contain;}
	.vis_tit img{width:70%}
	.vis_stxt2 {font-size: 15px; margin: 6px 0 0 40px;}
	
	.map_box{pointer-events: none;}
	.island_tit { font-size: 16px; }
	.dock_tit { font-size: 14px; }
	.dock_link {margin: 10px 0 0 2px; padding:4px 14px; width: auto; font-size: 12px; border-radius: 30px; pointer-events: auto}
	.dock_box.mat30{margin:7px 0px 0 !important; pointer-events: none;}
	.dock_link:before {display:none; width: 13px; right: 15px; top: 15px;}
	.dock_link:after {display:none;  width: 8px; right: 15px; top: 12px;}
	.dock_tit:before {width: 14px; height: 19px; background-size: contain;}

	#svg-container a .is_name { text-shadow: none;}

	/* .dock_link{display: inline-block;background: #4e618d;color: #fff;margin: 10px 0 0 10px;padding: 5px 17px;width: 110px;position:relative;font-size: 11px;}
	.dock_link:before{content: ""; display: inline-block; width: 50px; height: 1px; background: #fff; position: absolute; right: 35px; top: 27px;}
	.dock_link:after{content: ""; display: inline-block; width: 15px; height: 1px; background: #fff; position: absolute; right: 33px; top: 22px; transform: rotate(45deg);} */

	
	#notice_wrap { width: 100%;height: 340px; margin-top: 30px;}
	.notice_more { top: -7px;}
	.popz_box{width:  100%; margin-top: 10px; }
	.swiper_cont { top: 4px;}

	
	.hd_pops_con{max-width:100% !important; height: auto !important;}

	.pop_ft{width:100%;}
	.pop_ft th, .pop_ft td{ font-size: 11px;}
	.hd_pops{width: 95% !important; left: 0 !important; top:80px !important; }
	.hd_pops div{width:100% !important; }

}
	
@media screen and (max-width: 499px) {
	.island_tit { font-size: 10px;}
	.dock_tit { font-size: 8px; gap: 2px}
	.dock_tit:before {width: 9px; height: 12px;}
	.dock_link {font-size:5px;  margin: 0 0 0 2px;}

    .map_box {top: 70px;}
}