@charset "utf-8";
#navMenu{width:100%;margin:0 auto;}
@media screen and (min-width:991px){#navMenu{position:relative;background:#e11258;}
#navMenu:before{content:"";position:absolute;display:block;width:calc((100vw - 990px)/2 + 300px);height:80px;top:0;left:0;background:url(../images/navMenu_bg.png) no-repeat right 50%;z-index:2;}
}
@media screen and (min-width:1200px){#navMenu:before{width:calc((100vw - 1200px)/2 + 300px);}
}
@media screen and (min-width:1440px){#navMenu:before{width:calc((100vw - 1440px)/2 + 300px);}
}
.mobileNav{display:none;}
#menuBg{display:none;}
@media screen and (max-width:990px){#navMenu .container{padding:0;}
.mobileNav{display:block;position:absolute;top:20px;right:10px;width:45px;height:45px;text-indent:-9999px;overflow:hidden;z-index:2;}
.mobileNav span{position:relative;float:left;width:100%;height:100%;}
.mobileNav span em,
.mobileNav span em::after,
.mobileNav span em::before{display:block;position:relative;width:25px;height:3px;background:#000;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.mobileNav span em{margin:21px auto;-webkit-transition:background-color .2s;transition:background-color .2s;}
.mobileNav span em::before,
.mobileNav span em::after{position:absolute;content:'';left:0;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s, -webkit-transform .2s;}
.mobileNav span em::before{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px);}
.mobileNav span em::after{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);}
.mobileNav.nav-open span em{background-color:rgba(255, 255, 255, 0);}
.mobileNav.nav-open span em::before{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
.mobileNav.nav-open span em::after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.dropMenu a{cursor:pointer;}
.sp-nav-btn:before{content:"";position:absolute;display:block;width:14px;height:2px;top:24px;right:19px;margin:-1px 0 0;background-color:#CCC;}
.sp-nav-btn:after{content:"";position:absolute;display:block;width:2px;height:14px;top:25px;right:25px;margin:-8px 0 0;background-color:#CCC;-webkit-transition:-webkit-transform .2s linear;-moz-transition:-moz-transform .2s linear;-ms-transition:-ms-transform .2s linear;-o-transition:-o-transform .2s linear;transition:transform .2s linear;}
.open .sp-nav-btn:after{background-color:#FEDE6D;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}
#menuBg{position:absolute;width:100%;height:calc(100% - 90px);top:90px;left:0;background:rgba(0, 0, 0, 0.7);z-index:99;}
}
#navi{position:relative;float:right;width:100%;margin:0;}
#navi > ul{float:right;list-style:none;}
#navi > ul > li{position:relative;float:left;display:block;padding:0 4px;margin:0;box-sizing:border-box;}
#navi > ul > li > a{float:left;width:100%;height:100%;font-family:"PingFang TC Semibold", "微軟雅黑", "Microsoft YaHei";font-size:2.1em;font-weight:bold;color:#FFF;line-height:40px;text-align:center;padding:0 15px;margin:0;box-sizing:border-box;}
#navi > ul > li > a:hover,
#navi > ul > li > a:focus,
#navi > ul > li:hover > a,
#navi > ul > li > a.open{color:#fff9b2;}
#navi > ul > li > a:active,
#navi > ul > li.unit-now > a,
#navi > ul > li.unit-now:hover > a:active{color:#fff9b2;}
#navi > ul > li > ul{float:left;width:100%;padding:0;margin:0;list-style:none;background:#FFF;box-sizing:border-box;-webkit-box-shadow:1px 2px 6px rgba(0,0,0,.2);-moz-box-shadow:1px 2px 6px rgba(0,0,0,.2);box-shadow:1px 2px 6px rgba(0,0,0,.2);}
#navi > ul > li > ul > li{float:left;width:100%;border-bottom:1px dashed #CCC;}
#navi > ul > li > ul > li:last-child {border-bottom:none;}
#navi > ul > li > ul > li > a{position:relative;display:block;color:#e11258;font-size:1.9em;line-height:120%;padding:13px 15px;}
#navi > ul > li > ul > li > a:hover,
#navi > ul > li > ul > li > a:focus{color:#FF8000;}
@media screen and (max-width:990px){#navi{display:none;float:left;width:100%;background:#e11258;}
#navi.show-on-mobile{display:block;}
#navi > ul{float:none;}
#navi > ul:after{display:none;}
#navi > ul > li{width:100%;padding:0;border-bottom:1px solid #b40e45;}
#navi > ul > li:before{display:none;}
#navi > ul > li > a{font-size:2.1em;line-height:30px;text-align:left;font-weight:bold;padding:10px 15px;box-sizing:border-box;}
#navi > ul > li > a::before {content:"";position:absolute;display:block;width:14px;height:2px;top:24px;right:21px;margin:-1px 0 0;background-color:#fff;}
#navi > ul > li > a::after {content:"";position:absolute;display:block;width:2px;height:14px;top:25px;right:27px;margin:-8px 0 0;background-color:#fff;-webkit-transition:-webkit-transform .2s linear;-moz-transition:-moz-transform .2s linear;-ms-transition:-ms-transform .2s linear;-o-transition:-o-transform .2s linear;transition:transform .2s linear;
}
#navi > ul > li > a.open::after {-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);
}
#navi > ul > li > a:active,
#navi > ul > li > a:focus{background:rgba(0,0,0,.2);}
#navi > ul > li > ul{display:none;background:#FDFDFD;}
#navi > ul > li > ul > li > a:after{position:absolute;content:url(../images/navi-arrow.png);top:50%;right:25px;margin-top:-12px;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;}
#navi > ul > li > ul > li > a:hover:after{right:10px;text-decoration:none;}
}
@media screen and (min-width:991px){#navi{width:calc(100% - 250px);padding:10px 0;margin-left:250px;}
#navi > ul > li > a{line-height:40px;padding:10px 15px;}
#navi > ul > li.unit-now > a {position:relative;color:#e11258;z-index:1;}
#navi > ul > li.unit-now > a:after,
#navi > ul > li.unit-now:hover > a:active:after {content:"";display:block;position:absolute;left:0;top:10px;width:100%;height:calc(100% - 20px);background:#fff9b2;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;z-index:-1;}
#navi > ul > li > ul {
	position:absolute;
	display:block;
	top:60px;
	left:50%;
	width:190px;
	height:0;
	padding:0 10px;
	visibility:hidden;
	overflow:hidden;	
	opacity:0;
	margin-left:-95px;
	background:#e11258;
	box-shadow:0px 5px 5px rgba(0,0,0,0.3);
	-webkit-border-radius:0 0 10px 10px;-moz-border-radius:0 0 10px 10px;border-radius:0 0 10px 10px;
	z-index:99;
	-webkit-transition:all 0.2s ease;
   -moz-transition:all 0.2s ease;
	 -o-transition:all 0.2s ease;
		transition:all 0.2s ease;
}
#navi > ul > li#navm2 > ul,
#navi > ul > li#navm6 > ul,
#navi > ul > li#navm7 > ul {	
	width:150px;
	margin-left:-75px;
}
#navi > ul > li#navm3 > ul,
#navi > ul > li#navm5 > ul {	
	width:250px;
	margin-left:-125px;
}
#navi > ul > li > ul.focu-show {
	height:auto;
	visibility:visible;
	opacity:1;
}
#navi > ul > li > ul > li {border-color:#FFF;}
#navi > ul > li > ul > li:last-child {margin-bottom:10px;}
#navi > ul > li > ul > li > a { position:relative;color:#000;padding:10px 20px 10px 10px;background:#FFF;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;}
#navi > ul > li > ul > li > a:after {
	content:"";
	display:block;    
	position:absolute;
    top:50%;
	right:20px;
    width:7px;
    height:7px;
    border-top:2px solid #000;
    border-right:2px solid #000;
	margin-top:-5px;
    z-index:2;
    -webkit-transform:rotate(45deg);
	    -ms-transform:rotate(45deg);
            transform:rotate(45deg);
	-webkit-transition:all 0.4s;
	   -moz-transition:all 0.4s;    
         -o-transition:all 0.4s;
            transition:all 0.4s;
}
#navi > ul > li > ul > li > a:hover,
#navi > ul > li > ul > li > a:focus{color:#FF8000;}
#navi > ul > li > ul > li > a:hover:after,
#navi > ul > li > ul > li > a:focus:after{border-color:#FF8000;}
}
@media screen and (min-width:1200px){#navi{width:calc(100% - 280px);margin-left:300px;}
#navi > ul > li{padding:0 10px;}
#navi > ul > li > a{font-size:2.3em;padding:10px 20px;}
#navi > ul > li > ul {
	width:200px;
	margin-left:-100px;
}
#navi > ul > li#navm2 > ul,
#navi > ul > li#navm6 > ul,
#navi > ul > li#navm7 > ul {	
	width:170px;
	margin-left:-85px;
}
#navi > ul > li > ul > li > a {padding:15px 30px 15px 15px;}
}
@media screen and (min-width:1440px){#navi > ul > li{padding:0 15px;}
#navi > ul > li > a{padding:10px 25px;}
}

@media print {
	#navi{ position:relative;width:calc(100% - 250px);padding:10px 0;margin-left:250px;}
	#navMenu {position: relative;background: #e11258;}
	#navMenu:before{content:"";position:absolute;display:block;width:calc((100% - 990px)/2 + 300px);height:80px;top:0;left:0;background:url(../images/navMenu_bg.png) no-repeat right 50%;z-index:2;}
	#navi {width:calc(100% - 250px);padding: 10px 0;margin-left:250px;}
	#navi > ul > li > a{ line-height:40px;padding:10px 15px;}
	#navi > ul > li.unit-now > a {position:relative;color:#e11258;z-index:1;}
	#navi > ul > li.unit-now > a:after {content:"";display:block;position:absolute;left:0;top:10px;width:100%;height:calc(100% - 20px);background:#fff9b2;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;z-index:-1;}
	#navi > ul > li > ul {
		display:none;
	}
}