﻿
@font-face {
    font-family: 'kanitregular';
    src: url('../font/kanitregular/kanit-regular.woff2') format('woff2'),
         url('../font/kanitregular/kanit-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitlight';
    src: url('../font/kanitlight/kanit-light.woff2') format('woff2'),
         url('../font/kanitlight/kanit-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
  font-family: 'zawgyi-one';
  src: url('../font/zawgyi/zawgyi-one.eot') format('embedded-opentype'),
	   url('../font/zawgyi/zawgyi-one.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
a {
	transition: color 0.5s ease-out;
    -moz-transition: color 0.5s ease-out;
    -webkit-transition: color 0.5s ease-out;
    -o-transition: color 0.5s ease-out; 

}
.bg-body {
	/*background:url(../images/bg-main-all-page.jpg) repeat top left;*/
}
	
/*--------- menu left --------- */
.menu-wrap .login-wrapper {
	width:100%;
	margin:30px 0 0 0;
	
}
.menu-wrap .login-wrapper a {
	width:auto;
	font-size:36px;
	line-height:36px;
	color:#13a156;
	font-family: 'db_helvethaica_x_regular';
	margin:0 5px 0 0;
	text-decoration:none;

}
.menu-wrap .login-wrapper a:hover {
	color:#025125;
}
.menu-wrap .login-wrapper span {
	width:auto;
	font-size:36px;
	line-height:36px;
	color:#636363;
	font-family: 'db_helvethaica_x_regular';
	margin:0 5px 0 0;
}
.menu-wrap ul.menu-left {
	width:100%;
	margin:30px 0 0 0;	
	float:left;
}
.menu-wrap ul.menu-left li {
	width:100%;
	margin:5px 0;
}
.menu-wrap ul.menu-left li a {
	width:auto;
	font-size:36px;
	line-height:36px;
	color:#13a156;
	font-family: 'db_helvethaica_x_regular';
	margin:0 5px 0 0;
	text-decoration:none;
}
.menu-wrap ul.menu-left li a:hover {
	color:#025125;
}
.menu-wrap ul.menu-profile {
	width:100%;
	margin:30px 0 0 0;	
	float:left;
}
.menu-wrap ul.menu-profile li {
	width:100%;
	margin: 0;
	float:left;
}
.menu-wrap ul.menu-profile li a, 
.menu-wrap ul.menu-profile li p {
	width:auto;
	font-size:20px;
	line-height:35px;
	color:#13a156;
	font-family: 'kanitlight', 'zawgyi-one';
	margin:0 5px 0 0;
	text-decoration:none;
}
.menu-wrap ul.menu-profile li p {
	float:left;
	margin-bottom: 10px;
}
.menu-wrap ul.menu-profile li a:hover {
	color:#025125;
}
.menu-wrap .lang-menu {
	width:70px;
	height:30px;
	font-size:16px;
	line-height:35px;
	color:#13a156;
	float:left;
	margin: 3px 0 0 10px;;
	border:1px solid #13a156;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.menu-wrap .icon-app {
	width:100%;
	margin:5px 0 0 0;
	float:left;
}
.menu-wrap .icon-app a.app-store {
	width:129px;
	height:43px;
	background:url(../images/icon-appstore.png) no-repeat top left;
	display:block;
	float:left;
	margin:0 10px 0 0;
	text-indent:-99999px;
	
	transition: opacity 0.7s ease-out;
    -moz-transition: opacity 0.7s ease-out;
    -webkit-transition: opacity 0.7s ease-out;
    -o-transition: opacity 0.7s ease-out; 
}
.menu-wrap .icon-app a.google-play {
	width:126px;
	height:43px;
	background:url(../images/icon-googleplay.png) no-repeat top left;
	display:block;
	float:left;
	margin:0 10px 0 0;
	text-indent:-99999px;
	
	transition: opacity 0.7s ease-out;
    -moz-transition: opacity 0.7s ease-out;
    -webkit-transition: opacity 0.7s ease-out;
    -o-transition: opacity 0.7s ease-out; 
}
.menu-wrap .icon-app a:hover {
	opacity:0.8;
}
.menu-wrap .profile-wrapper {
	width:100%;
	margin:15px 0;
}
.menu-wrap .profile-wrapper img {
	width:105px;
	height:105px;
	border:2px solid #11a051;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	float:left;
	margin:0 20px 0 0;
}
.menu-wrap .profile-wrapper .detail {
	width:150px;
	height:auto;
	float:left;
	margin:20px 0 0 0;
}
.menu-wrap .profile-wrapper .detail p {
	width:100%;
	float:left;
	color:#848484;
	font-size:20px;
	line-height:35px;
	font-family: 'kanitlight', 'zawgyi-one';
}
.menu-wrap .profile-wrapper .detail span {
	width:100%;
	float:left;
	color:#848484;
	font-size:16px;
	line-height:30px;
	font-family: 'kanitlight', 'zawgyi-one';
	margin:-5px 0 0 0;
}
.menu-wrap .profile-wrapper .detail a {
	float:left;
	color:#11a051;
	font-size:20px;
	line-height:35px;
	font-family: 'kanitlight', 'zawgyi-one';
	text-decoration:none;
	margin:0 0 0 0;
}
.menu-wrap .profile-wrapper .detail a:hover {
	color:#025125;
}
/* --------- header ---------- */
header {
	width:100%;
	background: #fff;
	height:100px;
	position:relative;
	z-index:1;
}
header .main-container{
	max-width:1580px;
	margin:0 auto;
}
header .main-container .logo-easybills {
	text-align:center;	
}
header .main-container .logo-easybills img{
	width:125px;
	height:100px;
}
header .main-container .m-right-wrapper {
	float:right;
	width:100%;
	height:100px;
	text-align:right;
	padding:30px 0 0 0;
}
header .main-container .m-right-wrapper ul.lang {
	float:right;
	margin:0 0 0 10px;
	width:42px;
	height:42px;
	background:#11a051;
	border:1px solid #11a051;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	overflow:hidden;
	
	transition: width 0.2s ease-out;
    -moz-transition: width 0.2s ease-out;
    -webkit-transition: width 0.2s ease-out;
    -o-transition: width 0.2s ease-out; 
}
header .main-container .m-right-wrapper ul.lang:hover {
	/*width:110px;*/
    width :auto;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}
header .main-container .m-right-wrapper ul.lang li {
	float:right;
	width:auto;
	margin:0 0 0 10px;
}
header .main-container .m-right-wrapper ul.lang li a {
	font-family: 'kanitlight', 'zawgyi-one';
	font-size:16px;
	line-height:30px;
	color:#FFFFFF;
	text-transform:uppercase;
	display:block;
	box-sizing:border-box;
	text-decoration:none;
}
header .main-container .m-right-wrapper ul.lang li a.th {
	display:block;
	margin:5px 11px 6px 0;
}
header .main-container .m-right-wrapper ul.lang li a.en {
	display:block;
	margin:5px 11px 6px 0;
}
header .main-container .m-right-wrapper ul.lang li a:hover {
	color:#025125;
}
header .main-container .m-right-wrapper a.fb {
	background:url(../images/icon-fb.png) no-repeat top left;
	width:42px;
	height:42px;
	display:block;
	float:right;
	margin:0 5px;
}
header .main-container .m-right-wrapper a.fb:hover {
	background:url(../images/icon-fb-over.png) no-repeat top left;
}
header .main-container .m-right-wrapper .login-wrapper {
	width:210px;
	float:right;
	margin:0 15px;
}
header .main-container .m-right-wrapper .login-wrapper ul {
	width:auto;
	float:right;
}
header .main-container .m-right-wrapper .login-wrapper ul li {
	width:auto;
	float:left;
	padding:0;
	/*background:url(../images/login-bg.png) no-repeat left 4px;*/
}
header .main-container .m-right-wrapper .login-wrapper ul li.lastchild {
	background:none;
}
header .main-container .m-right-wrapper .login-wrapper ul li a {
	font-family: 'kanitlight', 'zawgyi-one';
	font-size:20px;
	line-height:20px;
	color:#11a051;
	font-weight:bold;
	text-decoration:none;
}
header .main-container .m-right-wrapper .login-wrapper ul li a:hover {
	color:#025125;
}
header .main-container .m-right-wrapper .login-wrapper p {
	float:right;
	font-size:14px;
	line-height:25px;
	color:#636363;
	font-family: 'kanitlight', 'zawgyi-one';	
	margin:0 0 0 5px;
	width:100%;
}
header .main-container .m-right-wrapper .login-wrapper p a {
	float:right;
	font-size:14px;
	line-height: 25px;
	color:#636363;
	font-family: 'kanitlight', 'zawgyi-one';
	display:block;
	margin:0 0 0 5px;
	text-decoration:none;
	font-weight: bold;
}
header .main-container .m-right-wrapper .login-wrapper p a:hover {
	color:#11a051;
}
header .main-container .m-right-wrapper .profile-wrapper {
	float:right;
	margin:0;
	width:350px;
}
header .main-container .m-right-wrapper .profile-wrapper img {
	width:45px;
	height:45px;
	border:2px solid #11a051;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	float:left;
	margin:0 0 0 10px;
}
header .main-container .m-right-wrapper .profile-wrapper .detail {
	width:275px;
	float:left;
	margin:0 10px 0 0;
}
header .main-container .m-right-wrapper .profile-wrapper .detail p {
	float:left;
	width:100%;
	text-align:right;
}
header .main-container .m-right-wrapper .profile-wrapper .detail span.name {
	font-size: 16px; 
	line-height: 20px;
	color:#848484;
	font-family: 'kanitlight', 'zawgyi-one';
	margin:0 5px 0 0;
}
header .main-container .m-right-wrapper .profile-wrapper .detail span.mail {
	font-size: 16px; 
	line-height: 20px;
	color:#636363;
	font-family: 'kanitlight', 'zawgyi-one';	
}
header .main-container .m-right-wrapper .profile-wrapper .detail span.line {
	font-size: 14px; 
	line-height: 25px;
	color:#636363;
	font-family: 'kanitlight', 'zawgyi-one';	
	background:url(../images/login-bg.png) no-repeat right 4px;
	padding:0 15px;
}
header .main-container .m-right-wrapper .profile-wrapper .detail p a {
	font-size: 16px; 
	line-height: 30px;
	color:#11a051;
	font-family: 'kanitlight', 'zawgyi-one';	
	margin:0 0 0 10px;
	text-decoration:none;
}
header .main-container .m-right-wrapper .profile-wrapper .detail p a:hover {
	color:#025125;
}
footer {
	width:100%;
	float:left;
	background:url(../images/bg-footer.jpg) repeat-x center top;
}
footer .footer-wrapper {
	max-width:1150px;
	margin:0 auto;
	text-align:center;
}
footer .footer-wrapper .contact {
	width:auto;
	height:50px;
	padding:10px 0;
}
footer .footer-wrapper .contact p.title {
	display:block;
	width:100%;
	margin:0 0 5px 0;
}
footer .footer-wrapper .contact p {
	display:inline;
	padding:0 20px 0 0 ;
	font-family: 'kanitlight', 'zawgyi-one';
	font-size: 16px; 
	line-height: 25px;
	color:#ffffff;
}
footer .footer-wrapper .contact b {
	font-family: 'kanitlight', 'zawgyi-one';
}
footer .footer-wrapper .contact img {
	margin:0 4px 0 0;
}
footer .footer-wrapper .contact a {
	font-family: 'kanitlight', 'zawgyi-one';
	font-size: 16px; 
	line-height: 25px;
	color:#ffffff;
	text-decoration:none;
}
footer .footer-wrapper .contact a:hover {
	color:#197702;
}
footer .footer-wrapper .address {
	width:65%;
	height:70px;
	padding:20px 0;
	float:left;
	margin:15px 0 5px 0;
}
footer .footer-wrapper .address p {
	width:100%;
	float:left;
	font-size: 16px; 
	line-height: 25px;
	font-family: 'kanitlight', 'zawgyi-one';
	color:#636363;
	text-align:left;
}
footer .footer-wrapper .address span {
	width:100%;
	float:left;
	font-size: 16px; 
	line-height: 25px;
	font-family: 'kanitlight', 'zawgyi-one';
	color:#636363;
	text-align:left;
}
footer .footer-wrapper .sitemap {
	width:35%;
	padding:20px 0 0 0;
	float:left;
	margin:15px 0 5px 0;
}
footer .footer-wrapper .sitemap ul {
	float:left;
	width:100%;
}
footer .footer-wrapper .sitemap ul li {
	float:right;
	width:auto;
}
footer .footer-wrapper .sitemap ul li a {
	font-size: 16px; 
	line-height: 25px;
	font-family: 'kanitlight', 'zawgyi-one';
	color:#13a156;
	text-align:left;
	margin:-5px 0 0 20px;
	text-decoration:none;
	width:auto;
	display:block;
	padding:0 0 0 15px;
}
footer .footer-wrapper .sitemap ul li a.sitemap {
	background:url(../images/icon-sitemap.png) no-repeat left 9px;
}
footer .footer-wrapper .sitemap ul li a.privacy {
	background:url(../images/icon-privacy.png) no-repeat left 9px;
}
footer .footer-wrapper .sitemap ul li a:hover {
	color:#0D4A01;
}
footer .footer-wrapper .sitemap span {
	width:auto;
	float:right;
	font-size: 16px; 
	line-height: 25px;
	font-family: 'kanitlight', 'zawgyi-one';
	color:#636363;
	text-align:left;
	margin:5px 0 0 0;
}


#paging {
	width:auto;
	float:left;
}
#paging ul {
	float:left;
	margin: 7px 0;
	width:auto !important;
}
#paging ul li {
	float:left;
	padding:0 10px;
	background:url(../images/bg-paging.jpg) no-repeat right 3px;
}
#paging ul li a {
	width:auto;
	color:#13a156;
	font-family: 'kanitlight', 'zawgyi-one';
	font-size: 16px; 
	line-height: 16px;
}
#paging ul li a:hover{
	color:#0476c5;
	transition: color 0.5s ease-out;
    -moz-transition: color 0.5s ease-out;
    -webkit-transition: color 0.5s ease-out;
    -o-transition: color 0.5s ease-out; 
}
#paging ul li b {
	width:auto;
	color:#848484;
	font-family: 'kanitlight', 'zawgyi-one';
	font-size: 16px; 
	line-height: 16px;
}
#paging .goto {
	width:auto;
	margin: 0 10px;
	float:left;
}
#paging .goto p {
	color:#13a156;
	font-family: 'kanitlight', 'zawgyi-one';
	font-size: 16px; 
	line-height: 16px;
	width:auto;
	float:left;
	margin:10px 0 0 0;
}
#paging .goto input[type="text"],
#paging .goto input[type="button"] {
	width: 40px;
	height:20px;
	border:none;
	border-bottom:1px solid #17ad63;
	float:left;
	color:#53575b;
	font-family: 'kanitlight', 'zawgyi-one';
	font-size: 16px; 
	line-height: 16px;
	padding: 0 5px;
	margin:10px 5px 0 10px;
}
#paging .goto input[type="button"]{
	width: 70px;
	height:25px;
	background:#fff;
	color:#13a156;
	cursor:pointer;
	margin:5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:1px solid #17ad63;
}
#paging .goto input[type="button"]:hover{
	color:#323131;
	transition: color 0.5s ease-out;
    -moz-transition: color 0.5s ease-out;
    -webkit-transition: color 0.5s ease-out;
    -o-transition: color 0.5s ease-out; 
}
.no-gutter {
	padding:0 !important;
}
.scroll-btn {
	display:inline;
	width:75px;
	height:75px;
	background:url(../images/scroll-btn.png) no-repeat top left;
	border:0;
	position:absolute;
	bottom:0;
	right:40px;
}

.howtowork {
	max-width:100%;
}
.howtowork img {
	margin:10px auto;
	display:block;
	width:50%;
}
.howtowork h3{
	color:#636363;
	font-family: 'kanitlight', 'zawgyi-one';
	font-size: 20px; 
	line-height: 35px;
	text-align:center;
	margin:10px 0 0 0;
}
.howtowork strong {
	color:#0eb570;
	font-weight:normal;	
}
.howtowork p {
	color:#636363;
	font-family: 'kanitlight', 'zawgyi-one';
	font-size: 16px; 
	line-height: 25px;
	text-align:center;
	height:90px;
	overflow:hidden;
	margin:0 0 20px 0;
	padding:10px 0 0 0;
	border:none;
	cursor:pointer;
	
	transition: height 0.5s linear;
    -moz-transition: height 0.5s linear;
    -webkit-transition: height 0.5s linear;
    -o-transition: height 0.5s linear; 
}
.howtowork p:hover,
.howtowork p:active {
	height:200px;
	border-top:1px solid #ccc;
	
}
