@charset "utf-8";

.list-wrap .list-container { 
	overflow:hidden; padding: 80px 0 60px;
}
.list-wrap .list-container .list-title { 
	font-size: 35px; font-weight: bold !important;
	color: var(--sub-color); line-height: 1.4; margin-bottom: 1em;
}
.list-wrap .list-container .itemBox {
	display:grid; grid-template-columns:1fr 650px;
	/* grid-template-columns:580px 1fr; */
	gap: 30px;
}
.list-wrap .list-container .itemBox .box1 { border-top: 1px solid #9f9f9f; }
.list-wrap .list-container .itemBox .box1 .item-v1 {
	display:grid; grid-template-columns:1fr 1.8fr;
	font-size: 20px; border-bottom: 1px solid #9f9f9f;
	padding: 2.4em 0; 
}
.list-wrap .list-container .itemBox .box1 .item-v1 .title {
	font-weight: bold; line-height: 1.6; font-size: 1.11em; padding-right: 10px;
}
.list-wrap .list-container .itemBox .box1 .item-v1 .list-cont {
	font-size: 1em; font-weight: 300; line-height: 1.6;
}
.list-wrap .list-container .itemBox .box1 .item-v1 .list-cont .address {
	margin-bottom: 1em;
}
.list-wrap .list-container .itemBox .box1 .item-v1 .list-read {
	grid-column:1/3; padding:10px 0;
}

/* 지도 */
.list-wrap .list-container .itemBox .img { text-align: center; position: relative; height: fit-content;}

.list-wrap .list-container .itemBox .img svg {width: 100%; height: 100%; display: none;}

.list-wrap .list-container .img .branch_list > li > img {margin: 0 auto; width: 80%;} 

.branch_list {position: relative;}
.branch_list::before {
    content:''; position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

.branch_list > li > img {display: none;}

.branch_list > li.active > img {display: block;}

/* 지도 이미지 active */
.branch_list > li.active > img {display: block;}

/* 링크 */
.list-wrap .list-container .img .branch_link {
	position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
}

.list-wrap .list-container .img .branch_link > a {
	display: block; position: absolute; 
	background: none !important;
	display: flex; align-items: center; justify-content: center; 
	font-size: min(calc(10 / 580 * 100vw), 10px);
}
.list-wrap .list-container .img .branch_link > a > i {font-size: 3em; position: relative; bottom: 22px; color: var(--sub-color); opacity: 0;}

.list-wrap .list-container .img .branch_link > a.active > i {opacity: 1;}

/* 지도 링크 스타일 ----------------------*/

/* 인천 */
.list-wrap .list-container .img .branch_link #Incheon_link {
	width: 3.5%;
    height: 4.5%;
    background: #ff0000;
    top: 20.5%;
    left: 22%;
	border-radius: 50%;
	z-index: 16;
}

.list-wrap .list-container .img .branch_link #Incheon_link > i {
	bottom: 0.1em; left: 1em; opacity: 0;
}

/* 서울 */
.list-wrap .list-container .img .branch_link #Seoul_link {
	width: 7.5%;
    height: 3.5%;
    background: #ffff00;
    top: 17.5%;
    left: 26%;
    border-radius: 50%;
	z-index: 15;
}
.list-wrap .list-container .img .branch_link #Seoul_link > i {
	bottom: 0.1em; left: 1.2em; opacity: 0;
}

/* 경기도 */
.list-wrap .list-container .img .branch_link #Gyeonggi_link {
	width: 20%;
    height: 23%;
    background: #ff00ff;
    top: 9.5%;
    left: 23%;
    border-radius: 50%;
    z-index: 2;
}
.list-wrap .list-container .img .branch_link #Gyeonggi_link > i {
	bottom: -0.9em; left: 1.6em;
}

/* 강원도 */
.list-wrap .list-container .img .branch_link #Gangwon_link {
	width: 21%;
    height: 31%;
    background: #349593;
    top: 1.5%;
    left: 45%;
    border-radius: 35%;
    z-index: 1;
    transform: rotate(-32deg);
}
.list-wrap .list-container .img .branch_link #Gangwon_link > i {
	transform: rotate(32deg);
    bottom: -1.3em;
    left: 1.1em;
}

/* 충청남도 */
.list-wrap .list-container .img .branch_link #Chungnam_link {
	width: 17%;
    height: 20%;
    background: #883321;
    top: 31.5%;
    left: 19%;
    border-radius: 48%;
    z-index: 3;
    transform: rotate(-32deg);
}
.list-wrap .list-container .img .branch_link #Chungnam_link > i {
	transform: rotate(33deg) translateX(-50%);
    bottom: -1.3em;
    left: 2em;
	opacity: 0;
	visibility: hidden;
}


/* 충청북도 */
.list-wrap .list-container .img .branch_link #Chungbuk_link {
	width: 12%;
    height: 19%;
    background: #223721;
    top: 27%;
    left: 40%;
    border-radius: 48%;
    z-index: 2;
    transform: rotate(29deg);
}
.list-wrap .list-container .img .branch_link #Chungbuk_link > i {
	transform: rotate(-27deg);
    bottom: 0.9em;
    left: 1em;
}

/* 대전 */
.list-wrap .list-container .img .branch_link #Daejeon_link {
	width: 5%;
    height: 3%;
    background: #113344;
    top: 44%;
    left: 36%;
    border-radius: 48%;
    z-index: 15;
	pointer-events: none;
}
.list-wrap .list-container .img .branch_link #Daejeon_link > i {
	transform: rotate(0deg);
    bottom: 0.1em;
    left: 0.8em;
	opacity: 0;
	visibility: hidden;
}

/* 세종 */
.list-wrap .list-container .img .branch_link #Sejong_link {
	width: 5%;
    height: 2.5%;
    background: #6ec0e9;
    top: 41.5%;
    left: 36%;
    border-radius: 48%;
    z-index: 15;
}
.list-wrap .list-container .img .branch_link #Sejong_link > i {
	transform: rotate(0deg);
    bottom: 0em;
    left: 1em;
}

/* 경북 */
.list-wrap .list-container .img .branch_link #Gyeongbuk_link {
	width: 27%;
    height: 25%;
    background: blue;
    top: 32%;
    left: 50%;
    border-radius: 48%;
    z-index: 1;
}

.list-wrap .list-container .img .branch_link #Gyeongbuk_link > i {
	bottom: 0.5em;
    left: 1.6em;
}

/* 경남 */
.list-wrap .list-container .img .branch_link #Gyeongnam_link {
	width: 27%;
    height: 15%;
    background: orange;
    top: 57%;
    left: 43%;
    border-radius: 48%;
    z-index: 1;
}

.list-wrap .list-container .img .branch_link #Gyeongnam_link > i {
	bottom: 0.25em;
    left: 1.4em;
	opacity: 0;
	visibility: hidden;
}

/* 대구 */
.list-wrap .list-container .img .branch_link #Daegu_link {
	width: 7%;
    height: 7%;
    background: pink;
    top: 51%;
    left: 58%;
    border-radius: 48%;
    z-index: 15;
}
.list-wrap .list-container .img .branch_link #Daegu_link > i {
	bottom: -0.25em;
    left: 1.1em;
	opacity: 0;
	visibility: hidden;
}

/* 울산 */
.list-wrap .list-container .img .branch_link #Ulsan_link {
	width: 7%;
    height: 7%;
    background: violet;
    top: 56%;
    left: 71%;
    border-radius: 48%;
    z-index: 15;
}
.list-wrap .list-container .img .branch_link #Ulsan_link > i {
	bottom: -0.3em;
    right: 0.8em;
    opacity: 0;
	visibility: hidden;
}

/* 부산 */
.list-wrap .list-container .img .branch_link #Busan_link {
	width: 3%;
    height: 8%;
    background: crimson;
    top: 62.5%;
    left: 70%;
    border-radius: 48%;
    z-index: 15;
    transform: rotate(48deg);
}
.list-wrap .list-container .img .branch_link #Busan_link i {
	transform: rotate(-50deg);
    bottom: -1.1em;
    right: 0.76em;
}

/* 전북 */
.list-wrap .list-container .img .branch_link #Jeonbuk_link {
	width: 24%;
    height: 14%;
    background: gold;
    top: 50.5%;
    left: 20%;
    border-radius: 48%;
    z-index: 2;
}
.list-wrap .list-container .img .branch_link #Jeonbuk_link > i {
	bottom: -0.1em;
    left: 1.7em;
    opacity: 0;
	visibility: hidden;
}

/* 전남 */
.list-wrap .list-container .img .branch_link #Jeonnam_link {
	width: 29%;
    height: 17%;
    background: hotpink;
    top: 64.5%;
    left: 16%;
    border-radius: 48%;
    z-index: 2;
}
.list-wrap .list-container .img .branch_link #Jeonnam_link > i {
	bottom: 0em;
    right: 1em;
}

/* 광주 */
.list-wrap .list-container .img .branch_link #Gwangju_link {
	width: 7%;
    height: 4%;
    background: black;
    top: 66%;
    left: 23%;
    border-radius: 48%;
    z-index: 15;
}
.list-wrap .list-container .img .branch_link #Gwangju_link > i {
	bottom: -0.1em;
    left: 1.1em;
	opacity: 0;
	visibility: hidden;
}

/* 사천 */
.list-wrap .list-container .img .branch_link #Sachun_link {
	width: 7%;
    height: 5%;
    background: orange;
    top: 72.5%;
    left: 31%;
    border-radius: 48%;
    z-index: 15;
}
.list-wrap .list-container .img .branch_link #Sachun_link > i {
	left: 1.1em;
    bottom: 0.5em;
}

/* 제주 */
.list-wrap .list-container .img .branch_link #Jeju_link {
	width: 13%;
    height: 6%;
    background: yellowgreen;
    top: 93%;
    left: 14.5%;
    border-radius: 48%;
    z-index: 15;
    transform: rotate(-20deg);
}
.list-wrap .list-container .img .branch_link #Jeju_link > i {
	transform: rotate(18deg);
    left: 1.2em;
    bottom: 0em;
}

/* 울릉군 */
.list-wrap .list-container .img .branch_link #Dokdo_link {
	width: 8%;
    height: 4%;
    background: yellowgreen;
    top: 42.5%;
    left: 80.5%;
    border-radius: 48%;
    z-index: 15;
}
.list-wrap .list-container .img .branch_link #Dokdo_link > i {
	right: 0.5em;
    bottom: 0.6em;
    opacity: 0;
}


/* 지도 링크 스타일 끝 ----------------------*/

@media (max-width: 1430px) {
	.list-wrap .list-container .img .branch_list > li > img {width: 90%;}
	.list-wrap .list-container .itemBox .img {overflow: hidden;}
	.list-wrap .list-container .img .branch_link {left: 50%; transform: translateX(-50%); width: 113%;}
}

@media (max-width: 1250px) {
	.list-wrap .list-container .itemBox {
		grid-template-columns:1fr 50%;
	}
}

@media (max-width:991px) {
	.list-wrap .list-container .itemBox {
		grid-template-columns:1fr;
	}
	.list-wrap .list-container .itemBox .box1 { order:2; }
	.list-wrap .list-container .itemBox .img { order:1; height: auto; width: 55%; margin: 0 auto;}
	.list-wrap .list-container .img .branch_list > li > img {width: 100%;} 
	.list-wrap .list-container .img .branch_link {width: 127%;}
}

@media (max-width: 768px) {
	.list-wrap .list-container .itemBox .img {width: 70%;}
}

@media (max-width:580px) {
	.list-wrap .list-container .list-title {
		font-size: 30px;
	}
	.list-wrap .list-container .itemBox .box1 .item-v1 {
		font-size: 16px;
		grid-template-columns:1fr 2fr; gap:1.4em;
	}

	.list-wrap .list-container .itemBox .img {width: 90%;}
}