@charset "utf-8";
/* CSS Document */
.ContactUsMap { display:block; width:100%; height:auto; overflow:hidden; max-width:700px; position:relative;}
.ContactUsMap * { padding:0; margin:0; list-style:none; text-decoration:none;}
.ContactUsMap > ul { display:block; width:100%; height:100%; overflow:hidden; position:absolute; top:0; left:0;}
.ContactUsMap > ul > li { display:block; width:20%; height:auto; overflow:hidden; float:left; position:absolute;
/*圓角*/
border-radius:10px;
box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0);
transition:all .5s;}
.ContactUsMap > ul > li:hover {
box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.2);}
.ContactUsMap > ul > li > a { display:block; width:100%; height:auto; overflow:hidden; float:left; padding:0; font-size:20px; line-height:40px; text-indent:-9999px;
transition:all .5s;}
.ContactUsMap > ul > li > a:link,
.ContactUsMap > ul > li > a:visited { opacity:0;}
.ContactUsMap > ul > li > a:hover,
.ContactUsMap > ul > li > a:active { opacity:1;}
.ContactUsMap > ul > li > a:before { content:'了解更多'; display:block; width:100%; height:100%; text-indent:0; top:5px; left:0; color:#fff; position:absolute; background:url(https://www.dianthus.com.tw/Images/UI/external_link.png) right center no-repeat; z-index:1; padding-left:10px;
transition:all .5s;
background-size:auto 80%;}
.ContactUsMap > ul > li:hover > a:before { top:0;}
.ContactUsMap > ul > li > a:after { content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(245,90,120,1);  z-index:0;
background: linear-gradient(120deg, rgb(255, 155, 170) 30%, rgb(245, 90, 120) 70%);
box-shadow:         inset -3px -4px 5px 0px rgba(180, 60, 50, 0.8);}

.ContactUsMap > ul > li.map-01 { top:14%; left:27.8%;}
.ContactUsMap > ul > li.map-02 { top:32.1%; left:64%;}
.ContactUsMap > ul > li.map-03 { top:33.4%; left:67%; display:none;}
.ContactUsMap > ul > li.map-04 { top:8.3%; left:55.5%;}
.ContactUsMap > ul > li.map-04-2 { top:11.3%; left:55.5%;}
.ContactUsMap > ul > li.map-04-3 { top:14.2%; left:55.5%;}
.ContactUsMap > ul > li.map-05 { top:28.9%; left:25.5%;}
.ContactUsMap > ul > li.map-06 { top:35.8%; left:21.9%;}
.ContactUsMap > ul > li.map-06.map-06-2 { width:32%; top:38.9%; left:9.4%;}
.ContactUsMap > ul > li.map-07 { top:47.9%; left:23.4%;}
.ContactUsMap > ul > li.map-08 { width:29%; top:18.4%; left:66%;}
.ContactUsMap > ul > li.map-09 { width:32%;}
.ContactUsMap > ul > li.map-09.map-09-1 { top:14.5%; left:16.8%; display:none;}
.ContactUsMap > ul > li.map-09.map-09-2 { top:17.5%; left:55.5%; display:none;}
.ContactUsMap > ul > li.map-09.map-09-3 { top:37.1%; left:60%; display:none;}
.ContactUsMap > ul > li.map-09.map-09-4 { top:40.3%; left:5.4%; display:none;}
.ContactUsMap > ul > li.map-09.map-09-5 { top:61.5%; left:47.4%; display:none;}
.ContactUsMap > ul > li.map-10 { width:32%; top:57.3%; left:40.6%;}
@media only screen and (min-width:0px) and (max-width:960px) {
	.ContactUsMap > ul > li > a { font-size:16px;}
	}
@media only screen and (min-width:0px) and (max-width:768px) {
	.ContactUsMap > ul > li{opacity:0;}
	}
@media only screen and (min-width:0px) and (max-width:720px) {
	.ContactUsMap > ul > li > a { line-height:6vw;}
	}
@media only screen and (min-width:0px) and (max-width:512px) {
	.ContactUsMap > ul > li > a { font-size:14px;}
	.ContactUsMap > ul > li > a:before { padding-left:5px;}
	}
@media only screen and (min-width:0px) and (max-width:460px) {
	.ContactUsMap > ul > li > a { font-size:12px;}
	}
@media only screen and (min-width:0px) and (max-width:400px) {
	.ContactUsMap > ul > li > a { font-size:10px;}
	}