@charset "UTF-8";


.container{width:100%;text-align:left;margin:0px auto;min-width:320px;height:100%;max-width:960px;}

/* color:#29547E; 影響按鈕選單連結文字的顏色   a:link{color:#29547E;text-decoration:none;outline:none;} */
a:link{text-decoration:none;outline:none;}

ul,li{list-style:none;}


.swipe{width:100%;height:100%;overflow:hidden;position:relative;}
.swipe ul{-webkit-transition:left 800ms ease-in 0;-moz-transition:left 800ms ease-in 0;-o-transition:left 800ms ease-in 0;-ms-transition:left 800ms ease-in 0;transition:left 800ms ease-in 0;}
.swipe mobile_img { width:100%; }


.box_main{min-width:320px;background:none repeat scroll 0% 0% #fff;margin:0px auto;overflow:hidden;min-height:480px;}
@media screen and (max-width:480px){
.content_box .news_list ul time{display:none;}
.content_box .news_list dt time{display:none;}
}

.content_box_headpic{margin-top:10px;background:#fff;} /* 設定(手機版)headpic圖檔背景 */




/* 橫式選單 */
/* background:#C0C0C0; 選單左右下方邊緣顏色--設了會超出橫是選單寬 */
/* border-bottom:2px solid #fff; 選單下的空格，使用與背景色相同 */

#wrapper{width:95%;margin-left:auto;margin-right:auto;border-bottom:10px; border-bottom:2px solid #FF9900;}
#wrapper mobile_img{border:0;-ms-interpolation-mode:bicubic;max-width:960px;height:auto;} /* 抬頭圖檔顯示大小 */

 /* 選單左右下方邊緣顏色 */

#wrapper{background:#ccc;}

/* 選單多樣式 >> wrap台投選單文字變細體--先取消   */

/* .wrap {margin-left:auto;margin-right:auto;text-align:left;width:960px;position:relative;clear:both;overflow:hidden;z-index:1;font-size:16px;letter-spacing:1px;line-height:180%;text-align:left;color:#555;font-family:"微軟雅黑","新細明體","Microsoft Yahei","mingliu","Arial Black","verdana";} */



/* 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:43.5px;  /* 上下間距 */
	/* height:43px; 『43px會切齊』---取圖的高度---目前../img/menu-background高是45px */

	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 */





/* title 橫幅 h1 */

/* .title{text-indent:5px;width:100%;line-height:35px;height:35px;background:#6b6b6b;color:#fff;}更改title h1 底色 */
/* .title{text-indent:5px;width:100%;line-height:35px;height:35px;(margin: 0px auto;置中)background:#6b6b6b;color:#fff;}更改title h1 底色 */



.title{text-indent:5px;width:98%;line-height:35px;height:35px;margin: 0px auto;background:#0080C0;color:#fff;}
.title .tit_name{padding-left:10px;height:35px;line-height:35px;float:left;width:auto;font-size:16px;}
.title .tit_name a { color:#fff}

.h { height:10px; clear:both;}







/* 三槓選單 */

.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:0px;border-bottom:1px solid #eee;background-color:#fff;box-shadow:1px 0 5px rgba(0,0,0,0.06)} /*  height:0px;rwd 顯示上間距 */
.nav-fixed-top{margin-top:0px}  /* 三槓選單下間格～新知 product.asp 小圖上空格  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:100%;
	margin:0 auto;
}

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


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


@media only screen and (min-width: 768px) { /* pc-head.png > 768 */
.header .logo {
	position:absolute;
	top:10;
	left:60px;  /* logofull 位置 */
	right:70px;
	z-index: 1200;
	display: block;
	width:800px;
	height:80px;
	text-indent: -9999em;
	background: url('../img/logofull.png') no-repeat center;
	background-size: 100%
}
.header .logo span {
	display: none;
}
.header .logo:hover {
	background-color: #fff; /* 移過 logo 背景色 #2d67d6 */
}}


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

.header .logo {
	position:absolute;
	top:10;
	left:60px;  /* logo 位置 */
	right:70px;
	z-index: 1100;
	display: block;
	width:340px;
	height:80px;
	text-indent: -9999em;
	background: url('../img/logo_tab.png') no-repeat center;
	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;
	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:0;
	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;
}



/* product */

#body #InnerBanner{
	max-width:960px;
	margin:auto;}
#body .inner{
	max-width:960px;
	margin:auto;
	padding-top:0px;}
#body .inner .left{
	max-width:960px;
	background:#FFF;
	}
#body .inner .right{
	max-width:958px;
	background:#FFF;
	border:1px solid #E5E5E5;
	padding-bottom:10px;}
#body .inner .left .Sbox{
	border:1px solid #E5E5E5;
	background:#fff;
	padding-bottom:0px;
	font-size:16px; /* 產品類別文字大小 */
	}

#body .inner .left .Sbox .topic{
	background: url("/mobile_img/m_box_bg3.gif") repeat-x center top;
	font-size:16px; /* 抬頭文字大小 */
	height:40px; /* 抬頭與下間距 */
	font-family:"微軟雅黑","Microsoft Yahei","mingliu","Arial Black";
	margin:0px 0px 10px 0px;
	line-height:40px; /* 抬頭文字上下位置 */
	border-bottom:1px solid #DDDDDD;
	text-align:center;
	color:#FFFFFF;
	font-weight:normal;}
#body .inner .left .Sbox .blank ul {
	padding-left:10px;}
#body .inner .left .Sbox .blank ul li{
	width:128px;
	height:40px;
	overflow:hidden;
	float:left;
	padding-left:10px;
}



/*product*/


/* 這段刪除

.RightNav span{
	color:#296cd4;}
 .ClassNav{
	padding:0px 0px;}
	
 .ClassNav .NavTree ul{
	padding-left:10px;
	}
	
 .ClassNav .NavTree ul li{
position: relative;
	width:128px;
	height:40px;
	overflow:hidden;
	float:left;
	padding-left:10px;}
	



 .ClassNav .NavTree ul li a{
	width:128px;
	text-align:center;
	height:30px;
	line-height:30px;
	background: url("/mobile_img/m_Pro_bg1.gif") repeat-x 0px top;
	display:block;
	overflow:hidden;	 }	

 

		
 .ClassNav .NavTree ul li a:hover{
	background: url("/mobile_img/m_Pro_bg2.gif") repeat-x 0px top;
	color:#FFF;
	text-decoration:none;
}

刪除 END */


/* H1 標籤底圖設置 topic_index_webmenu 網頁 */

@media only screen and (min-width: 801px) {
/* 螢幕大於801PX的時候 */
#body_index_webmenu .inner_index_webmenu .left_index_webmenu .Sbox_index_webmenu .topic_index_webmenu{



background: url("../mobile_img/page-pc.jpg") repeat-x center top;position:center


	font-size:20px; /* 抬頭文字大小 */
	height:40px; /* 抬頭與下間距 */
	font-family:"微軟雅黑","Microsoft Yahei","mingliu","Arial Black";
	margin:0px 0px 10px 0px;
	line-height:40px; /* 抬頭文字上下位置 */
	text-align:center;
	color:#fff;
	font-weight:normal;}}

@media only screen and (min-width: 581px) and (max-width: 800px) {

#body_index_webmenu .inner_index_webmenu .left_index_webmenu .Sbox_index_webmenu .topic_index_webmenu{
background: url("../mobile_img/page-tab.jpg") no-repeat center;

	font-size:20px; /* 抬頭文字大小 */
	height:40px; /* 抬頭與下間距 */
	font-family:"微軟雅黑","Microsoft Yahei","mingliu","Arial Black";
	margin:0px 0px 10px 0px;
	line-height:40px; /* 抬頭文字上下位置 */
	text-align:center;
	color:#fff;
	font-weight:normal;}}


@media only screen and (min-width: 381px) and (max-width: 580px) {

#body_index_webmenu .inner_index_webmenu .left_index_webmenu .Sbox_index_webmenu .topic_index_webmenu{
background: url("../mobile_img/page-tab2.jpg") no-repeat center;

	font-size:20px; /* 抬頭文字大小 */
	height:40px; /* 抬頭與下間距 */
	font-family:"微軟雅黑","Microsoft Yahei","mingliu","Arial Black";
	margin:0px 0px 10px 0px;
	line-height:40px; /* 抬頭文字上下位置 */
	text-align:center;
	color:#fff;
	font-weight:normal;}}



@media only screen and (min-width: 0px) and (max-width: 380px) { /* (orientation:portrait)裝置直擺 ；(orientation:landscape)裝置橫擺*/
#body_index_webmenu .inner_index_webmenu .left_index_webmenu .Sbox_index_webmenu .topic_index_webmenu{
background: url("../mobile_img/page-mob.jpg") no-repeat center;

	font-size:20px; /* 抬頭文字大小 */
	height:40px; /* 抬頭與下間距 */
	font-family:"微軟雅黑","Microsoft Yahei","mingliu","Arial Black";
	margin:0px 0px 10px 0px;
	line-height:40px; /* 抬頭文字上下位置 */
	text-align:center;
	color:#fff;
	font-weight:normal;}}


@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: 280px; /* 選單文字區域寬度 */
	float: right;
	position: absolute;
	top:0;
	right:0;
	padding-top: 70px; /* 選單文字框顯示位置 */
	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%;
}

.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:25px; /* 三槓按鈕顯示位置 */
	right:0;
	cursor: pointer;
	outline: none;
	background: #997654 url(../img/menu-button-bg.png) no-repeat center center;  /* 三槓按鈕背景 background: #997654*/
	background-size: 50%;
}

.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: #5D5D5D;  /* 三槓下拉選單背景 */
}

/*
.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: 300;
        font-weight: normal;  /* bold/lighter/normal 三槓選單字體,如不用這行刪除 */
	color: #fff;  /* 選單文字顏色*/
	border-top: 1px solid #24486C; /* 選單文字間格線 */
	border-bottom:1px solid #FFFFFF; /* 選單文字按鈕間格線 */
	outline: none;
}
.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: '';
}