@charset "utf-8";
/***************************** 우리동네지도 소개 START *****************************/
/* info */
.contents.sub .depth2_info > p {word-break:keep-all;}
.depth2_info.intro {text-align:center;}
.depth2_info.intro .depth2_text {justify-content:center !important;}
.depth2_info.intro > p {margin-bottom:0px !important; text-align:center !important;}
.map_intro_img {position:relative; width:100%; height:600px; text-align:center; top:-35px; display:flex; align-items:center; justify-content:center;}
.map_intro_img img {width:100%;}
ul.map_intro_rink {position:relative; width:1400px; height:auto; margin:0 auto; text-align:center;}
ul.map_intro_rink li {display:inline-block; width:670px; height:200px;}
ul.map_intro_rink li a {position:relative; display:block; width:calc(100% - 80px); height:calc(100% - 72px); padding:36px 40px; border-radius:12px; overflow:hidden; box-shadow:0px 10px 0px 0px rgba(0,0,0,.1); transition:.3s; transform:translateY(0px);}
ul.map_intro_rink li a:hover {box-shadow:0px 15px 0px 0px rgba(0,0,0,.1); transform:translateY(-5px);}
ul.map_intro_rink li a::after {position:absolute; top:0px; left:0px; z-index:2; content:''; width:100%; height:100%; background:rgba(6,3,32,.6); transition:.3s;}
ul.map_intro_rink li a:hover::after {background:rgba(6,3,32,.8);}
ul.map_intro_rink li a::before {position:absolute; top:0px; left:0px; z-index:1; content:''; width:100%; height:100%;}
ul.map_intro_rink li:nth-child(1) a::before {background:url('//resources/images/dongjakMain/map_rink1.jpg') 100% 100% no-repeat; background-size:cover;}
ul.map_intro_rink li:nth-child(2) a::before {background:url('//resources/images/dongjakMain/map_rink2.jpg') 100% 100% no-repeat; background-size:cover;}
ul.map_intro_rink li a p {position:relative; z-index:3; display:inline-block; color:#fff; width:100%; font-size:30px; font-weight:600; line-height:1em; text-align:left; margin-bottom:13px;}
ul.map_intro_rink li a span {position:relative; z-index:3; display:inline-block; color:#fff; width:300px; font-size:16px; font-weight:400; line-height:1.3em; text-align:left; word-break:keep-all;}
ul.map_intro_rink li a img {position:relative; z-index:3; float:right; top:34px; opacity:.6;}
ul.map_intro_rink li a:hover img {opacity:1;}
/***************************** 우리동네지도 소개 END *****************************/

@media screen and (max-width:1445px) {
	/* 공통 */
	.contents.sub .depth2_info {margin:0px 18px;}

	/* 소개 */
	.contents.sub .depth2_info.intro {margin-bottom:30px;}
	.map_intro_img {display:none;}
	ul.map_intro_rink {width:calc(100% - 36px); margin:0px 18px; text-align:center;}
	ul.map_intro_rink li {margin-bottom:17px; width:100%;}
	ul.map_intro_rink li:nth-child(1) {margin-right:0px;}
	ul.map_intro_rink li:nth-child(2) {margin-left:0px; margin-bottom:0px;}
	ul.map_intro_rink li a span {width:100%;}
	ul.map_intro_rink li a img {top:0px;}
}
@media screen and (max-width:600px) {
	/* 소개 */
	ul.map_intro_rink li a img {top:inherit; width:54px; position:absolute; bottom:20px; right:20px;}
}
@media screen and (max-width:375px) {
	/* 공통 */
	.contents.sub .depth2_info .depth2_text {display:inline-block; height:auto;}
	.contents.sub .depth2_info .depth2_text p {margin-bottom:6px;}
	.contents.sub .depth2_info .depth2_text img {margin-left:0px;}
}