html, body {
margin: 0;  /* 移除所有元素的預設外邊距 */
    
padding: 0;  /* 移除所有元素的預設內邊距 */
    
height: 100%; /* 確保頁面高度填滿 */
}



.dl-menuwrapper {
margin-top: 185px; /* 如果有額外的上邊距，可以去掉 -- 三槓選單位置 */
}


@media only screen and (min-width: 768px) { 

.dl-menuwrapper {
margin-top: 560px;
}

}


/* 橫式選單 */


#wrapper{width:98%;margin-left:auto;margin-right:auto;margin-top: 0px;
	/* background:#C0C0C0; 選單左右下方邊緣顏色--設了會超出橫是選單寬 */
	/* border-bottom:2px solid #fff; 選單下的空格，使用與背景色相同 */

border-bottom:3px solid #777;
font-family:"微軟雅黑","新細明體","Microsoft Yahei","mingliu","Arial Black","verdana";
}

@media only screen and (max-width: 768px) {
#wrapper{width:98%;margin-left:auto;margin-right:auto;margin-top: 130px;border-bottom:3px solid #660033;}
}






/* navs*/
 #NavLink{
	/* background:url("../img/m_nav_bg1.png") repeat center -0px; */
	background:url("../img/menu-background.jpg") repeat center -0px; /* 選單背景圖 */	

        width:100%;
	margin:auto;
}
		
 #NavLink #sddm{
	/* background:url("../img/m_nav_bg1.png") repeat center -0px; */
	background:url("../img/over-background.jpg") repeat center -0px; /* 選單移過背景圖 */
	max-width:960px;
	margin:auto;
	z-index:30}

 #NavLink #sddm li{
	width:33.3%;
	float: left;
	font-weight:bold;}
 #NavLink #sddm .CurrentLi a{
	background:none;}	
 #NavLink #sddm li a
{	display: block;

	color: #fff; /* 文字顏色 */
	text-align: center;
	padding:0px 10px;
	height:50px;  /* height:43.5px; 上下間距 */
	/* height:43px; 『43px會切齊』---取圖的高度---目前../img/menu-background高是45px -->改50 */

	line-height:50px;  /* line-height:42px;  文字上下距離 */
	background:;
	font-size:20px;font-weight: normal;  /* 文字粗細設定 bold/lighter/normal */ 
	/* background: url("../img/m_nav_bg2.png") no-repeat 0px -0px; */

	background: url("../img/separate-background.jpg") no-repeat 0px -0px;  /* 分隔背景圖 */
	}
 #NavLink #sddm li P{
	font-size:20px;
	font-weight:bold;
	color:#fff;
	text-transform:uppercase;}
 #NavLink #sddm li a:hover
{      color: #FF8800; /* 滑鼠移過文字顏色 */

	text-decoration:none;

	/* background:#800000;  滑鼠移過背景顏色 */

	background:url("../img/over-background.jpg") repeat center -0px;  /* 滑鼠移過背景圖 */
	
}

 #NavLink #sddm div
{	position: absolute;
	visibility: hidden;
	background: #B8292F;
	padding:0px 0px;
	filter: alpha(opacity=85); 
	top:45px;
	}

 #NavLink #sddm div a
	{	position: relative;
		padding: 0px 5px;
		width:120px;
		text-align: center;
		background:#B8292F;
		color: #FFFFFF;
		font-size:20px;
		font-weight:bold;
		text-decoration:none;
		line-height:45px;
		height:45px;
		border-bottom:1px solid #932126;}

 #NavLink #sddm div a:hover{
	background:#FF8700;
	color:#fff;
	font-weight:bold;
	line-height:45px;
	border-bottom:1px solid #932126;}

/* clearfix */
.clearfix:after{
	content:" ";
	display:block;
	visibility:hidden;
	height:0;
	clear:both;
}
.clearfix {
	clear:both;
}


/* 橫式選單END */



/* 三槓選單 */

.container_top{max-width:1280px;text-align:left;position:relative;margin:0 auto;padding-left:15px;padding-right:15px}

.header_top{margin-top:0px;position:relative;z-index:99;height:auto;border-bottom:1px solid #eee;background-color:#fff;box-shadow:1px 0 5px rgba(0,0,0,0.06)}

/* .header_top{margin-top:0px;position:relative;z-index:99;height:85px;border-bottom:1px solid #eee;background-color:#fff;box-shadow:1px 0 5px rgba(0,0,0,0.06)} */



.nav-fixed-top{margin-top:85px}  /* 三槓選單下間格 header_top -- height:85px===> 90-85 */
.nav-fixed-top .header_top{position:fixed;top:0;left:0;right:0}
/* 上兩行.nav-fixed-top，選單不固定時註銷 */



/*整體寬度*/
.header ,
.footer ,
.banner ,
.content {
	width:98%;
	margin:0 auto;
}

.header ,
.header-else {
	position:relative;
	height: 190px; /* 抬頭區域高度 */
	background: #fff;  /* 抬頭背景色 #4B4B4B 灰 */
border-bottom:1px solid #eee;box-shadow:1px 0 5px rgba(0,0,0,0.06)
}


@media only screen and (min-width: 481px) and (max-width: 767.99999px) { 

.header ,
.header-else {
	position:relative;
	height: 200px; /* 抬頭區域高度 */
	background: #fff;  /* 抬頭背景色 #4B4B4B 灰 */
border-bottom:1px solid #eee;box-shadow:1px 0 5px rgba(0,0,0,0.06)
}
}


@media only screen and (min-width: 768px) { /* pc-head.png > 768 */

.header ,
.header-else {
	position:relative;
	height: 698px; /* 抬頭區域高度 */
	background: #fff;  /* 抬頭背景色 #4B4B4B 灰 */
border-bottom:1px solid #eee;box-shadow:1px 0 5px rgba(0,0,0,0.06)
}
}






.header .logo {
	position:absolute;
	top:-15px;
	left:0px;  /* logo 位置*/
	z-index: 1000;
	display: block;
	width: 100%;
	height: auto;
	padding: 3px 0 0 1px;
}



/* 抬頭圖 m_top 已改用<img> 標籤切換圖片 */

/* 大螢幕樣式 */
@media only screen and (min-width: 768px) {
  .header .logo {
    position: absolute;
    top: -15px;
    left: 0px;
    right: 70px;
    z-index: 1200;
    display: block;
    width: 100%;
    height: auto;
    text-indent: 0;  /* 不隱藏文字 */
    background: url('../img/pchead.jpg') no-repeat center;  /* 大螢幕顯示的背景圖片 */
    background-size: 100%;
  }
}

/* 小螢幕樣式 */
@media only screen and (max-width: 768px) {
  .header .logo {
    position: absolute;
    top: -15px;
    left: 0px;
    right: 70px;
    z-index: 1200;
    display: block;
    width: 100%;
    height: auto;
    text-indent: 0;  /* 不隱藏文字 */
    background: url('../img/mobilehead-s.jpg') no-repeat center !important;  /* 小螢幕顯示的背景圖片 */
    background-size: 100%;
  }
}




.header .logo span {
	display: none;
}
.header .logo:hover {
	background-color: #fff; /* 移過 logo 背景色 #2d67d6*/
}}




.header .home {
	position:absolute;
	top:0;
	right:70px;
	z-index: 1300; /* 1300 改 0 讓抬頭圖顯示上層 */
	display: block;
	width:50px;
	height:50px;
	text-indent: -9999em;
	background: url('../img/icon-home.png') no-repeat center;
	background-size: 40%
}
.header .home span {
	display: none;
}
.header .home:hover {
	background-color: #555555; /* home 首頁 #2d67d6*/
}




.header .search {
	position:absolute;
	top:0;
	right:120px;
	z-index: 1300;
	display: block;
	width:50px;
	height:50px;
	text-indent: -9999em;
	background: url(../img/icon-search.png) no-repeat center center;
	background-size: 40%;
}
.header .search:hover {
	background-color: #2d67d6; /* search 移過 #2d67d6*/
}
.header .search span {
	display: none;
}
.header .user-icon {
	position:absolute;
	top:0;
	right:170px;
	z-index: 1300;
	display: block;
	width:50px;
	height:50px;
	text-indent: -9999em;
	background: url(../img/icon-user.png) no-repeat center center;
	background-size: 40%;
}
.header .user-icon span {
	display: none;
}
.header .user-icon:hover {
	background-color: #2d67d6; /* user 移過 #2d67d6*/
}



.header .back {
	position:absolute;
	top:25px;
	left:-100px;  /* 讓他離開畫面/
	display: block;
	width:50px;
	height:50px;
	text-indent: -9999em;
	background:#BF8F00 url(../img/icon-back.png) no-repeat center center;
	background-size: 40%;
	border-right:1px solid #FFFFFF; /* back 右邊線 #548cf8*/
}
.header .back:hover {
	background-color: #006464; /* back 移過 #4569ac*/
}


.m_top_margin {
	margin:10px auto;padding:0px 0 5px 0;overflow:hidden;zoom:1;
}


@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot@#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Common styles of menus */

/* Z-index 可以用來設置元素的 Z 方向位置，z-index 數字越大的在越上面，反之則在越下面。*/




.dl-menuwrapper {
	width: 100%;
	max-width: 320px; /* 選單文字區域寬度 */
	float: right;
	position: absolute;
	top: 0;
	right: 0;
	padding-top: 145px; /* 選單文字框顯示位置 */
	z-index: 1400;  
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 200%;
	-moz-perspective-origin: 50% 200%;
	perspective-origin: 50% 200%;
	
	/* 右移 20px */
	right: 10px;


}





.dl-menuwrapper:first-child {
	margin-right: 100px;
}





.dl-menuwrapper button {
    /*background: url(../img/header-bg.png) repeat-x bottom left;*/
    border: none;
    width: 50px;
    height: 50px;
    text-indent: -900em;
    overflow: hidden;
    position: absolute;
    top: 100px; /* 三槓按鈕顯示位置 */
    right: 10px;
    cursor: pointer;
    outline: none;
    background: #660033 url(../img/menu-button-bg.png) no-repeat center center;  /* 三槓按鈕背景 background: #997654*/
    background-size: 50%;
     /*  background-position: -15px center;圖片向左移動20px */
}




.dl-menuwrapper button:hover ,
.dl-menuwrapper button.dl-active {
	/*background: url(../img/header-bg.png) repeat-x bottom left;*/
	background-color: #006666;   /* 三槓按鈕移過 #2d67d6*/


}

.dl-menuwrapper ul {
	background: #3872AB;  /* 三槓下拉選單背景 */
}

/*
.dl-menuwrapper button:after {
	content: '';
	position: absolute;
	width: 60%;
	height: 4px;
	background: #fff;
	top: 12px;
	left: 22%;
	box-shadow: 
		0 10px 0 #fff, 
		0 20px 0 #fff;
}
*/

.dl-menuwrapper ul {
	padding: 0;
	list-style: none;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.dl-menuwrapper li {
	position: relative;
}

.dl-menuwrapper li a {
	display: block;
	position: relative;
	padding: 15px 20px;
	font-size: 18px;
	line-height: 20px; /* 選單文字框 */
	font-weight: 320;
        font-weight: normal;  /* bold/lighter/normal 三槓選單字體,如不用這行刪除 */
	color: #fff;  /* 選單文字顏色*/
	border-top: 1px solid #FFCC00; /* 選單文字間格線 */
	border-bottom:1px solid #FFFFFF; /* 選單文字按鈕間格線 */
	outline: none;

	/* 圓角邊框 */
	border-radius: 10px; /* 調整圓角大小 */
	border: 1px solid #fff; /* 加上邊框，顏色可以根據需求修改 */

	/* 加入背景色來確保圓角顯示 */
	 /* background-color: #fff;背景顏色可以修改，這裡設為白色 */
	
	/* 防止圓角被裁切 */
	overflow: visible;

}
.no-touch .dl-menuwrapper li a:hover {
	background: rgba(255,248,213,0.1);
}

.dl-menuwrapper li.dl-back > a {
	padding-left: 30px;
	background: rgba(0,0,0,0.1);
}

.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
	position: absolute;
	top: 0;
	line-height: 50px;
	font-family: 'icomoon';
	speak: none;
	-webkit-font-smoothing: antialiased;
	content: "\e000";
}

.dl-menuwrapper li.dl-back:after {
	left: 10px;
	color: rgba(255,255,255,0.8);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
}

.dl-menuwrapper li > a:after {
	right: 10px;
	color: rgba(255,255,255,0.8);
}

.dl-menuwrapper .dl-menu {
	margin: 5px 0 0 0;
	position: absolute;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.dl-menuwrapper .dl-menu.dl-menu-toggle {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
	display: none;
}

/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
	display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
	display: block;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {
	position: absolute;
	width: 100%;
	top: 75px; /* 群組選單文字框顯示位置 */
	left: 0;
	margin: 0;
}

/* Animation classes for moving out and in */

.dl-menu.dl-animate-out-1 {
	-webkit-animation: MenuAnimOut1 0.4s;
	-moz-animation: MenuAnimOut1 0.4s;
	animation: MenuAnimOut1 0.4s;
}

.dl-menu.dl-animate-out-2 {
	-webkit-animation: MenuAnimOut2 0.3s ease-in-out;
	-moz-animation: MenuAnimOut2 0.3s ease-in-out;
	animation: MenuAnimOut2 0.3s ease-in-out;
}

.dl-menu.dl-animate-out-3 {
	-webkit-animation: MenuAnimOut3 0.4s ease;
	-moz-animation: MenuAnimOut3 0.4s ease;
	animation: MenuAnimOut3 0.4s ease;
}

.dl-menu.dl-animate-out-4 {
	-webkit-animation: MenuAnimOut4 0.4s ease;
	-moz-animation: MenuAnimOut4 0.4s ease;
	animation: MenuAnimOut4 0.4s ease;
}

.dl-menu.dl-animate-out-5 {
	-webkit-animation: MenuAnimOut5 0.4s ease;
	-moz-animation: MenuAnimOut5 0.4s ease;
	animation: MenuAnimOut5 0.4s ease;
}

@-webkit-keyframes MenuAnimOut1 {
	50% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		-webkit-transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut2 {
	100% {
		-webkit-transform: translateX(-100%);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut3 {
	100% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut4 {
	100% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut5 {
	100% {
		-webkit-transform: translateY(40%);
		opacity: 0;
	}
}

@-moz-keyframes MenuAnimOut1 {
	50% {
		-moz-transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		-moz-transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		-moz-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

@-moz-keyframes MenuAnimOut2 {
	100% {
		-moz-transform: translateX(-100%);
		opacity: 0;
	}
}

@-moz-keyframes MenuAnimOut3 {
	100% {
		-moz-transform: translateZ(300px);
		opacity: 0;
	}
}

@-moz-keyframes MenuAnimOut4 {
	100% {
		-moz-transform: translateZ(-300px);
		opacity: 0;
	}
}

@-moz-keyframes MenuAnimOut5 {
	100% {
		-moz-transform: translateY(40%);
		opacity: 0;
	}
}

@keyframes MenuAnimOut1 {
	50% {
		transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

@keyframes MenuAnimOut2 {
	100% {
		transform: translateX(-100%);
		opacity: 0;
	}
}

@keyframes MenuAnimOut3 {
	100% {
		transform: translateZ(300px);
		opacity: 0;
	}
}

@keyframes MenuAnimOut4 {
	100% {
		transform: translateZ(-300px);
		opacity: 0;
	}
}

@keyframes MenuAnimOut5 {
	100% {
		transform: translateY(40%);
		opacity: 0;
	}
}

.dl-menu.dl-animate-in-1 {
	-webkit-animation: MenuAnimIn1 0.3s;
	-moz-animation: MenuAnimIn1 0.3s;
	animation: MenuAnimIn1 0.3s;
}

.dl-menu.dl-animate-in-2 {
	-webkit-animation: MenuAnimIn2 0.3s ease-in-out;
	-moz-animation: MenuAnimIn2 0.3s ease-in-out;
	animation: MenuAnimIn2 0.3s ease-in-out;
}

.dl-menu.dl-animate-in-3 {
	-webkit-animation: MenuAnimIn3 0.4s ease;
	-moz-animation: MenuAnimIn3 0.4s ease;
	animation: MenuAnimIn3 0.4s ease;
}

.dl-menu.dl-animate-in-4 {
	-webkit-animation: MenuAnimIn4 0.4s ease;
	-moz-animation: MenuAnimIn4 0.4s ease;
	animation: MenuAnimIn4 0.4s ease;
}

.dl-menu.dl-animate-in-5 {
	-webkit-animation: MenuAnimIn5 0.4s ease;
	-moz-animation: MenuAnimIn5 0.4s ease;
	animation: MenuAnimIn5 0.4s ease;
}

@-webkit-keyframes MenuAnimIn1 {
	0% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		-webkit-transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn2 {
	0% {
		-webkit-transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn5 {
	0% {
		-webkit-transform: translateY(40%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}

@-moz-keyframes MenuAnimIn1 {
	0% {
		-moz-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		-moz-transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		-moz-transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

@-moz-keyframes MenuAnimIn2 {
	0% {
		-moz-transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		-moz-transform: translateX(0px);
		opacity: 1;
	}
}

@-moz-keyframes MenuAnimIn3 {
	0% {
		-moz-transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-moz-transform: translateZ(0px);
		opacity: 1;
	}
}

@-moz-keyframes MenuAnimIn4 {
	0% {
		-moz-transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-moz-transform: translateZ(0px);
		opacity: 1;
	}
}

@-moz-keyframes MenuAnimIn5 {
	0% {
		-moz-transform: translateY(40%);
		opacity: 0;
	}
	100% {
		-moz-transform: translateY(0);
		opacity: 1;
	}
}

@keyframes MenuAnimIn1 {
	0% {
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

@keyframes MenuAnimIn2 {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn3 {
	0% {
		transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn4 {
	0% {
		transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn5 {
	0% {
		transform: translateY(40%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
	-webkit-animation: SubMenuAnimIn1 0.4s ease;
	-moz-animation: SubMenuAnimIn1 0.4s ease;
	animation: SubMenuAnimIn1 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
	-webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
	-moz-animation: SubMenuAnimIn2 0.3s ease-in-out;
	animation: SubMenuAnimIn2 0.3s ease-in-out;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
	-webkit-animation: SubMenuAnimIn3 0.4s ease;
	-moz-animation: SubMenuAnimIn3 0.4s ease;
	animation: SubMenuAnimIn3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-4 {
	-webkit-animation: SubMenuAnimIn4 0.4s ease;
	-moz-animation: SubMenuAnimIn4 0.4s ease;
	animation: SubMenuAnimIn4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
	-webkit-animation: SubMenuAnimIn5 0.4s ease;
	-moz-animation: SubMenuAnimIn5 0.4s ease;
	animation: SubMenuAnimIn5 0.4s ease;
}

@-webkit-keyframes SubMenuAnimIn1 {
	0% {
		-webkit-transform: translateX(50%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn2 {
	0% {
		-webkit-transform: translateX(100%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn5 {
	0% {
		-webkit-transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0);
		opacity: 1;
	}
}

@-moz-keyframes SubMenuAnimIn1 {
	0% {
		-moz-transform: translateX(50%);
		opacity: 0;
	}
	100% {
		-moz-transform: translateX(0px);
		opacity: 1;
	}
}

@-moz-keyframes SubMenuAnimIn2 {
	0% {
		-moz-transform: translateX(100%);
		opacity: 0;
	}
	100% {
		-moz-transform: translateX(0px);
		opacity: 1;
	}
}

@-moz-keyframes SubMenuAnimIn3 {
	0% {
		-moz-transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-moz-transform: translateZ(0px);
		opacity: 1;
	}
}

@-moz-keyframes SubMenuAnimIn4 {
	0% {
		-moz-transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-moz-transform: translateZ(0px);
		opacity: 1;
	}
}

@-moz-keyframes SubMenuAnimIn5 {
	0% {
		-moz-transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		-moz-transform: translateZ(0);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn1 {
	0% {
		transform: translateX(50%);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn2 {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn3 {
	0% {
		transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn4 {
	0% {
		transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn5 {
	0% {
		transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
	-webkit-animation: SubMenuAnimOut1 0.4s ease;
	-moz-animation: SubMenuAnimOut1 0.4s ease;
	animation: SubMenuAnimOut1 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
	-webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
	-moz-animation: SubMenuAnimOut2 0.3s ease-in-out;
	animation: SubMenuAnimOut2 0.3s ease-in-out;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
	-webkit-animation: SubMenuAnimOut3 0.4s ease;
	-moz-animation: SubMenuAnimOut3 0.4s ease;
	animation: SubMenuAnimOut3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-4 {
	-webkit-animation: SubMenuAnimOut4 0.4s ease;
	-moz-animation: SubMenuAnimOut4 0.4s ease;
	animation: SubMenuAnimOut4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
	-webkit-animation: SubMenuAnimOut5 0.4s ease;
	-moz-animation: SubMenuAnimOut5 0.4s ease;
	animation: SubMenuAnimOut5 0.4s ease;
}

@-webkit-keyframes SubMenuAnimOut1 {
	0% {
		-webkit-transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(50%);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut2 {
	0% {
		-webkit-transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(100%);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut3 {
	0% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut4 {
	0% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut5 {
	0% {
		-webkit-transform: translateZ(0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-200px);
		opacity: 0;
	}
}

@-moz-keyframes SubMenuAnimOut1 {
	0% {
		-moz-transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-moz-transform: translateX(50%);
		opacity: 0;
	}
}

@-moz-keyframes SubMenuAnimOut2 {
	0% {
		-moz-transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-moz-transform: translateX(100%);
		opacity: 0;
	}
}

@-moz-keyframes SubMenuAnimOut3 {
	0% {
		-moz-transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-moz-transform: translateZ(-300px);
		opacity: 0;
	}
}

@-moz-keyframes SubMenuAnimOut4 {
	0% {
		-moz-transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-moz-transform: translateZ(300px);
		opacity: 0;
	}
}

@-moz-keyframes SubMenuAnimOut5 {
	0% {
		-moz-transform: translateZ(0);
		opacity: 1;
	}
	100% {
		-moz-transform: translateZ(-200px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut1 {
	0% {
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		transform: translateX(50%);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut2 {
	0% {
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		transform: translateX(100%);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut3 {
	0% {
		transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		transform: translateZ(-300px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut4 {
	0% {
		transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		transform: translateZ(300px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut5 {
	0% {
		transform: translateZ(0);
		opacity: 1;
	}
	100% {
		transform: translateZ(-200px);
		opacity: 0;
	}
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu {
	position: relative;
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	transform: none;
}

.no-js .dl-menuwrapper li .dl-submenu {
	display: block;
}

.no-js .dl-menuwrapper li.dl-back {
	display: none;
}

.no-js .dl-menuwrapper li > a:not(:only-child) {
	background: rgba(0,0,0,0.1);
}

.no-js .dl-menuwrapper li > a:not(:only-child):after {
	content: '';
}