.TopBar{width: 100%;height: 60px;background: #fefefe;color: #181823;position: relative;}
	.TopBar--black{background: #222;color: #FFF;}
		.TopBar--black .topLogo{position: absolute;top: 0;left: 0;width: 250px;height: 60px;margin-left: 0px;background: url(../img/logo/menuLogoWhite.png?a=324);background-position: center center;background-repeat: no-repeat;}
		.TopBar--black .TopBar__btn{color: #FFF;}
	.TopBar__logo{position: absolute;top: 0;left: 0;width: 250px;height: 60px;background: url(../img/logo/menuLogo.png?a=324);background-position: center center;background-repeat: no-repeat;}
	.TopBar__menu{position: absolute;right: 10px;top: 0;}
		.TopBar__btn{float: left;margin: 5px;width: 50px;height: 50px;}
			.TopBar__btn .roundBtn{width: 100%;height: 100%;border-radius: 50%;background: #181823;color: #fff;}
			.TopBar__btn .transBtn{width: 100%;height: 100%;background: none;}
			.TopBar__btn [class^="icon"]{font-size: 25px;}
			.TopBar__btn [class="icon-bell"]{font-size: 16px;}
			.TopBar__btn:hover{color: #0091c0;}

.TopMenuField{position: fixed;width: 100%;height: 100%;z-index: 9999;top: 0;left: 0;}
	.TopMenuField .TopMenuField__bg{position: absolute;width: 100%;height: 100%;background: none;}
	.TopMenuField .TopMenuArea{position: absolute;top: 70px;right: 20px;width: calc(60% - 60px);min-height: 100px;max-height: calc(100% - 70px);max-width: 500px;background: #283143;opacity: 0.95;}
	.TopMenuField .TopMenuAreaAccount{height: 100%;height: calc(90% - 120px) !important;}
		/* arrow */
		.TopMenuArea__arrow{position: absolute;top: 55px;width: 0;height: 0;border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 15px solid #283143;opacity: 0.95;}
			.TopMenuArea__arrow--pos1{right: 25px;}
			.TopMenuArea__arrow--pos2{right: 90px;}
			.TopMenuArea__arrow--pos3{right: 145px;}
		/* menu */
		.TopMenuField .TopMenuArea ul.menu{width: 100%;height: 100%;padding: 0;margin: 0;}
			.TopMenuField .TopMenuArea ul.menu li{float: left;width: 33.3333%;height: 33.3333%;background: none;padding: 0;margin: 0;text-align: center;color: #fff;}
			.TopMenuField .TopMenuArea ul.menu li::after{content: "";display: block;clear: both;}
			.TopMenuField .TopMenuArea ul.menu li:hover{color: #ffc300;}
				.TopMenuField .TopMenuArea ul li a{display: block;color: #FFF;text-decoration: none;}
				.TopMenuField .TopMenuArea ul li a:hover{color: #ffc300;}
				.TopMenuField .TopMenuArea ul.menu li .icon{width: 100%;font-size: 32px;vertical-align: baseline;}
				.TopMenuField .TopMenuArea ul.menu li .title{font-size: 12px;padding: 10px;vertical-align: baseline;}
			.TopMenuField .TopMenuArea ul.menu li{width: calc(100% - 20px);height: auto;color: #FFF;padding: 15px 10px;border-bottom: 1px solid #111;border-top: 1px solid #383838;transition:0.3s;}
				.TopMenuField .TopMenuArea ul.menu li .icon{transition:0.3s;width: 50px;font-size: 20px;color: #586173;vertical-align: bottom;float: left;}
				.TopMenuField .TopMenuArea ul.menu li .title{font-size: 14px;padding: 4px 10px;vertical-align: top;float: left;width: calc(100% - 70px);text-align: left;}
				.TopMenuField .TopMenuArea ul.menu li:hover{transition:0.3s;padding-left: 15px;padding-right: 5px;}
				.TopMenuField .TopMenuArea ul.menu li:hover .icon{transition:0.3s;color: #ffc300;}
		/* account */
		.TopMenuField .TopMenuArea ul.account{width: 100%;height: 100%;padding: 0;margin: 0;}
			.TopMenuField .TopMenuArea ul.account li{width: 100%;color: #FFF;text-align: center;}
			.TopMenuField .TopMenuArea ul.account li.menu{height: 58px;font-size: 14px;border-top: 1px solid #444;border-bottom: 1px solid #111;}
			.TopMenuField .TopMenuArea ul.account li.body{height: calc(100% - 130px);min-height: 200px;}
				.TopMenuField .TopMenuArea ul.account li.body .accountImg{margin: 10px auto;width: 100px;height: 100px;border-radius: 50px;}
				.TopMenuField .TopMenuArea ul.account li.body .accountName{padding: 10px;font-size: 20px;}
				.TopMenuField .TopMenuArea ul.account li.body .accountDet{padding: 5px;font-size: 14px;}
		/* notify */
		.TopMenuField .TopMenuArea ul.notify{width: 100%;height: 100%;padding: 0;margin: 0;}
			.TopMenuField .TopMenuArea ul.notify li{width: calc(100% - 0px);padding: 10px;border-top: 1px solid #444;border-bottom: 1px solid #111;text-align: left;color: #FFF;}
			.TopMenuField .TopMenuArea ul.notify li.title{padding: 0;height: 58px;text-align: center;}
			.TopMenuField .TopMenuArea ul.notify li.none{padding: 0;height: calc(100% - 62px);text-align: center;}
				.TopMenuField .TopMenuArea ul.notify li.none i{font-size: 3em;}
			.TopMenuField .TopMenuArea ul.notify li.note{height: 48px;font-size: 14px;border-top: 1px solid #444;border-bottom: 1px solid #111;}

@media screen and (max-width: 700px), screen and (max-height: 400px){
	.TopBar__logo{width: 80px;background: url(../img/logo/menuLogoMobile.png?a=324);background-position: center center;background-repeat: no-repeat;}
		.TopBar--black .topLogo{width: 80px;background: url(../img/logo/menuLogoMobileWhite.png?a=324);background-position: center center;background-repeat: no-repeat;}
		.TopBar__btn{float: left;margin: 5px;width: 50px;height: 50px;}
			.TopBar__btn .roundBtn{width: 80%;height: 80%;border-radius: 50%;background: #181823;color: #fff;margin: 10%;}
			.TopBar__btn .transBtn{width: 90%;height: 90%;background: none;margin: 5%;}
			.TopBar__btn [class^="icon"]{font-size: 22px;}
			.TopBar__btn [class="icon-bell"]{font-size: 15px;}
	.TopMenuField .TopMenuArea{top: 60px;right: 0px;width: 100%;height: calc(100% - 60px);max-width: 100%;max-height: calc(100% - 60px);background: #222;opacity: 0.9;}
		.TopMenuArea__arrow{top: 45px;border-bottom: 15px solid #222;opacity: 0.9;}
			.TopMenuField .TopMenuArea ul.menu li{width: calc(100% - 20px);height: auto;color: #FFF;padding: 15px 10px;border-bottom: 1px solid #000;border-top: 1px solid #383838;}
				.TopMenuField .TopMenuArea ul.menu li .icon{width: 50px;font-size: 20px;color: #fff;vertical-align: bottom;float: left;}
				.TopMenuField .TopMenuArea ul.menu li .title{font-size: 14px;padding: 4px 10px;vertical-align: top;float: left;width: calc(100% - 70px);text-align: left;}
}
@media screen and (min-height: 400px) and (max-height: 500px){
	.TopMenuField .TopMenuArea{height: calc(100% - 60px);}
}