@import url("../bootstrap/bi-bootstrap/table.css");

*{padding:0;margin:0;}
html{overflow-x: hidden;} 
body {
    font-family:"Microsoft JhengHei", Arial, sans-serif;
	font-weight: 300;
    color: #666;
    background-color: #fff;
	font-size: 16px;
    line-height: 1.6em;
	font-weight: 400;
	position: relative;
	overflow: auto;}

button{border:medium none; margin: 0; padding: 0; }
h1 {font-size: 38px;}
h2 {font-size: 36px;}
h3 {font-size: 32px;}
h4 {font-size: 28px;}
h5 {font-size: 24px;}
h6 {font-size: 20px;}
h1,h2,h3,h4,h5,h6 {
    margin: 0 0 30px;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    font-weight: 400;
	color: #111;}
h1.h-xlight,h2.h-xlight,h3.h-xlight ,h4.h-xlight ,h5.h-xlight ,h6.h-xlight  {font-weight: 200;}
h1.h-light,h2.h-light,h3.h-light ,h4.h-light ,h5.h-light ,h6.h-light  {font-weight: 300;}
h1.h-bold,h2.h-bold,h3.h-bold ,h4.h-bold ,h5.h-bold ,h6.h-bold  {font-weight: 600;}
h1.font-light,h2.font-light,h3.font-light,h4.font-light,h5.font-light,h6.font-light {color: #fff;}
.big-heading {
	font-size: 48px;
	font-weight: 700;}
p{margin: 0 0 20px;}
p.lead {font-weight: 600;}
.highlight-light {
	background-color: rgba(255,255,255,.5);
	padding: 20px;
	display: inline-block;
	color: #111;}
.highlight-dark {
	background-color: rgba(0,0,0,.5);
	padding: 20px;
	display: inline-block;
	color: #fff;}
.highlight-color {
	padding: 20px;
	display: inline-block;
	background-color: #33c5e6;}
a { color: #666;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;}
a:hover,a:focus {text-decoration: none;color: #33c5e6;}
.light {font-weight: 400;}

/* --- logo --- */
.site-logo a.brand {
	color: #111;
	text-transform: uppercase;
	font-size: 32px;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	margin-top: 20px;
}
/* ------- Navigation ------------ */ 
#navigation {
	background-color: rgb(255, 255, 255);
	z-index: 999;
	width:100%;
    box-sizing:border-box;
    position: absolute;
    top: 0;}
/* .is-sticky #navigation {border-bottom: 1px solid #eee; box-shadow:0px 0px 20px rgba(0, 0, 0, 0.1); } */
.navbar {margin-bottom: 0;}
.navbar-brand {font-weight: 700;}
.navbar-brand:focus {outline: 0;}
.nav.navbar-nav {background-color: rgba(255,255,255,0) !important;color:#fff!important;}
.navbar-custom.top-nav-collapse .nav.navbar-nav {background-color: rgba(0,0,0,0);}
.navbar-custom ul.nav li a {font-size: 15px;letter-spacing: 1px;color: #fff;text-transform: uppercase;font-weight: 700;}
.is-sticky .navbar-custom ul.nav li a {color: #000;}
.navbar-custom.top-nav-collapse ul.nav li a {
	-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    color: #fff;}
.navbar-custom ul.nav ul.dropdown-menu {
	border-radius: 0;	
	margin-top: 21px;
	border-top: none;}
.navbar-custom ul.nav li a:hover ul.dropdown-menu {
	-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;}
.navbar-custom ul.nav ul.dropdown-menu li {
	border-bottom: 1px solid #f5f5f5;}
.navbar-custom ul.nav ul.dropdown-menu li:last-child{
	border-bottom: none;}
.navbar-custom ul.nav ul.dropdown-menu li a {
	padding: 10px 20px;}
.navbar-custom ul.nav ul.dropdown-menu li a:hover {
    background: #fefefe;color: #33c5e6; }
.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
	color: #666;}
.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
    text-align: left;}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,0)!important;
    color:#000;}
.is-sticky .navbar-custom .nav li a:hover,
.is-sticky .navbar-custom .nav li a:focus,
.is-sticky .navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,0);
    color:#33c5e6!important;}
.navbar-toggle {
    padding: 4px 6px;
    font-size: 14px;
    color: #fff;}
.navbar-toggle:focus,
.navbar-toggle:active {
    outline: 0;}
.navbar .in a {
    color: #404040 !important;}
.navbar .in a:hover {
    color: #33c5e6 !important;}
/* misc */
hr{margin-top: 10px;}
hr.bold{border-top: 3px solid #eee;}
.divider-header {
	display: block;
	width: 40px;
	height: 2px;
	margin: 0 auto;
	margin-bottom: 10px;}
.divider-short {
	display: block;
	width: 60px;
	height: 5px;
	margin: 0 auto;
	margin-bottom: 10px;}
/* margins */
.marginbot-0{margin-bottom:0 !important;}
.marginbot-10{margin-bottom:10px !important;}
.marginbot-20{margin-bottom:20px !important;}
.marginbot-30{margin-bottom:30px !important;}
.marginbot-40{margin-bottom:40px !important;}
.marginbot-50{margin-bottom:50px !important;}
.marginbot-60{margin-bottom:60px !important;}
.marginbot-70{margin-bottom:70px !important;}
.marginbot-80{margin-bottom:80px !important;}
.marginbot-90{margin-bottom:90px !important;}
.marginbot-100{margin-bottom:100px !important;}

.margintop-0{margin-top:0 !important;}
.margintop-10{margin-top:10px !important;}
.margintop-20{margin-top:20px !important;}
.margintop-30{margin-top:30px !important;}
.margintop-40{margin-top:40px !important;}
.margintop-45{margin-top:45px !important;}
.margintop-50{margin-top:50px !important;}
/* ===========================
--- General sections
============================ */
.home-section {
    padding-top: 150px;
    padding-bottom: 110px;
	display:block;
    position:relative;
    z-index:120;}
.inner-section {
    padding-top: 110px;
    padding-bottom: 110px;}
.home-section.nopadd-bot {
    padding-bottom: 0;}
.section-heading h2 {
	font-size: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 10px;}
.section-heading p {
	font-weight: 300;
	font-size: 20px;
	line-height: 1.6em;}
.color-dark .section-heading h2 {color: #111;}
.color-dark .section-heading p {color: #444;}
.color-dark .divider-short {background: #666;}
.color-dark .divider-header {background: #666;}
.color-light .divider-short {background: #666;}
.color-light .divider-header {background: #666;}
.color-light .section-heading h2 {color: #fff;}
.color-light .section-heading p {color: #fefefe;}
.color-light blockquote,.color-light p {color: #fefefe;}

/* --- section bg var --- */
.bg-white {background: #fff;}
.bg-gray {background: #f9f9f9;}
.bg-dark {background: #404040;}

/* --- section color var --- */
.text-light {color: #fff;}

/* ===========================
--- Intro
============================ */
.hero {
    width: 100%;
    min-height: 100vh;
    background: url(../marketing/img/hero-bg.jpg) top center;
    background-size: cover;
    position: relative;
    padding: 70px 0;
    z-index: 3;
    background-attachment: fixed;
 } 
 .hero:before {
    position: absolute;
    content: "";
    background: rgba(27, 47, 69, 0.6);
    inset: 0;
}
.hero:after {
    position: absolute;
    content: "";
    width: 40%;
    background: #1b2f45;
    top: 0;
    bottom: 0;
}
.hero>div{
    z-index: 999;
    position: relative;
	/* top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    z-index: 10;
    margin: auto;
    height: 350px; */
    /* margin-top: 150px;
    width: 600px;
    position: fixed; */
}
.hero h1 { font-size: 45px; letter-spacing: 10px; font-weight: 900; color: #fff;margin-top: 155px;
    margin-bottom: .3em;}
.hero h2 {
    font-size: 28px;
    letter-spacing: 10px;
    font-weight: 900;
    color: #06667b;
    margin-top: 10px;
    margin-bottom: .3em;
}
.hero h1 span { color: #a1a9b0; display: inline-block; }
.hero p {font-size: 24px;font-weight: 400;color: #fefefe;margin-top: 40px; }
.learn-more-btn { background: rgba(64,64,64, 1); padding: 10px 40px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; color: #fff; text-transform: uppercase; letter-spacing: 1px; display: inline-block; -webkit-box-shadow: 0px 3px 0px 0px #0e1111; -moz-box-shadow: 0px 3px 0px 0px #0e1111; box-shadow: 0px 3px 0px 0px #0e1111; margin: 60px 0 0; font-weight: bold; }
.learn-more-btn:hover, .learn-more-btn:focus { background: rgba(64,64,64 0.6); color: #fff; }
.login-btn { background: #56b8e6; padding: 4px 15px;  margin-top: 8px; border-radius: 50px; color: #fff; text-transform: uppercase; letter-spacing: 1px; display: inline-block; font-weight: bold; }
.login-btn:hover, .login-btn:focus {cursor: pointer; background: rgba(101, 223, 253, 0.6); color: #fff; }
/* ===========================
--- Services
============================ */
.service-box {
	background: #fff;
	border-bottom: 2px solid #f7f7f7;
	padding: 40px 20px;}
.service-box:hover {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	margin-top: -20px;
	border-bottom: 2px solid #33c5e6;}
.service-icon {
	margin-bottom: 20px;
	text-align: center;}	
.service-desc h5 {
	text-transform: uppercase;
	font-weight: 700;
	color: #666;
	font-size: 18px;
	margin-bottom: 10px;}
.service-desc .divider-header {
	margin-bottom: 30px;}
/* ===========================
--- Contact
============================ */
.form-group {
    margin-bottom: 20px;}
.validation {
    color: red;
    display:none;
    margin: 0 0 20px;
    font-weight:400;
    font-size:13px;}
#sendmessage {
    color: green;
    border:1px solid green;
    display:none;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;}
#errormessage {
    color: red;
    display:none;
    border:1px solid red;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;}
#sendmessage.show, #errormessage.show, .show {display:block;}
form#contact-form .form-group label {
	text-align: left !important;
	display: block;
	text-transform: uppercase;
	font-size: 16px;}
form#contact-form input,form#contact-form select,form#contact-form textarea {
	font-size: 14px;
	line-height: 1.6em;
	border: 1px solid #eee;
    -webkit-box-shadow: none;
    box-shadow:  none;
	border-radius: 2px;}
.btn-lg,.btn-group-lg > .btn {border-radius: 2px;}
form#contact-form input:focus,form#contact-form select:focus,form#contact-form textarea:focus {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);border-color: #33c5e6;}
.input-group-addon {
	background-color: #fefefe;
	border: 1px solid #eee;}
/* ==== Sidebar ==== */
.sidebar .widget h5 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 20px;
	text-transform: uppercase;}
.sidebar .widget {
	margin-bottom: 50px;}
.widget ul {
	list-style: none;
	margin-left:0;
	padding-left:0;}
.sidebar .widget ul li {
	margin-left:0;
	padding-left:0;
	margin-bottom: 10px;}
.sidebar .widget ul li a {color: #666;}
.widget.widget_categories ul li:before {
	display: inline-block;
	font-family: 'Pe-icon-7-stroke';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e684";
	margin-right: 10px;}
.widget.widget_recent_post ul li figure {
	float: left;
	margin: 0 20px 0 0;}
.widget.widget_recent_post ul li {margin-bottom: 25px;}
.widget.widget_recent_post ul li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.widget.widget_recent_post ul li h6 {margin-bottom: 10px;}
.widget.widget_recent_post ul li span {font-size: 14px;}
.widget .tagcloud a {
	padding: 4px 10px;
	color: #fff;
	display:inline-block;
	margin: 0 10px 10px 0;
	font-size: 14px;
	border-radius: 2px;
}

.widget .tagcloud a:hover {
	color: #fff;
	background: #333;
}
/* ===========================
--- Footer
============================ */
footer {
    background-color: #404040;}
footer {
	text-align: center;
	padding: 30px 0 30px ;}
	
footer .serviceright ,footer .copyleft{
	color: #f8f8f8;
	font-size: 14px;}
footer a.totop {
	color: #fff;
	margin-bottom: 30px;}
footer a.totop:focus {
	outline: 0;}
/* menu */
ul.footer-menu {list-style: none;}
ul.footer-menu li {float: left;margin: 0 0 0 10px;}
ul.footer-menu li a {
	color: #fff;
	font-size: 16px;
	padding-left: 9px;
	line-height: 1.1em;}
ul.footer-menu li:first-child a {
	border-left: none;
	padding-left: 0;}
/* --- button --- */
.login-pa{
    background: linear-gradient(#f6f9ff, #DDE9FF);
    height: 100vh;
}
.login_dr{
    position: absolute;
    left: -190px;
    top: 110px;
}

.login_box{
    position: relative;
    width: 450px;
    margin: 50px auto;
    border-radius: 30px;
    background-color: #fff;
    padding: 20px;
}
.log-bt{ width: 150px;margin: 0 8px;}
.btn {
	border-radius: 2px;
	position: relative;
	display: inline-block;

	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;	
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 14px;}
.btn.btn-noradius {
	border-radius: 0;}
a.btn:focus{
	outline: 0;}
.btn-red {
    color: #fff;
    background-color: #c83539;
    border-color: #c83539;}
.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active {
    color: #fff;
    background-color: #666;
    border-color: #666;}
.btn-red:active {
    background-image: none;}
    
.btn-border {
    color: #fff;
    background-color: rgba(255,255,255,0);
    border-color: #fff;}
.btn-border:hover,
.btn-border:focus,
.btn-border:active,
.btn-rborder.active {
    color: #fff;
    background-color: #e8a123;
    border-color: #e8a123;}
.btn-border:active {
    background-image: none;}
    
.btn-skin{
	color: #fff;
    border-radius: 50px;
	background-color: #fe6a72;
	border-color: #fe6a72;}
.btn-skin:hover,
.btn-skin:focus,
.btn-skin:active,
.btn-skin.active {
    color: #fff;
    background-color: #404040;
    border-color: #404040;}
.btn-default{color: #000;}
.btn-default:hover,
.btn-default:focus {
    border: 1px solid #404040;
    outline: 0;
    color: #fff;
    background-color: #404040;}
.btn-huge {
    padding: 25px;
    font-size: 26px;}
.banner-social-buttons {
    margin-top: 0;}
.btn-link,.btn-link:focus{
    margin-top: 7px;
    margin-left: 8px;
    color: #000;
    background-color: #eee;
    border: 0px;
    letter-spacing: 1px;
    font-weight: bold;
    text-decoration: none;
}
.btn-link:hover{background-color: #eee;color: #000;text-decoration: none;}
/* --- progress --- */
.progress{height: 40px;}
.progress-bar{font-size: 14px;line-height: 40px;}
.service-icon img{width:100%;}

/*-----modal-----*/
.modal {z-index: 99999;}
.modal-backdrop {z-index: 999 !important;}
.login-modal .modal-content ,.forgetpwd-modal .modal-content {
    background-color: #ffffff;
    border-radius: 30px;
}
.login-modal .modal-header,.forgetpwd-modal .modal-header  {
    border-bottom: 0px;
    text-align: center;
}
.login-modal .modal-header img {
    padding: 20px
}
.login-modal .modal-title ,.forgetpwd-modal .modal-title{
    color: #fff;
}
.login-modal .modal-body ,.forgetpwd-modal .modal-body{
    padding: 20px;
}
.login-modal .modal-footer ,.forgetpwd-modal .modal-footer  {
    border-top: 0px solid #e5e5e5;
    padding: 15px 20px;
}
.login-modal .modal-footer a ,.forgetpwd-modal .modal-footer a {
    color: #081bee !important;
    text-decoration: underline;
}
.login-modal .btn-skin ,.forgetpwd-modal .btn-skin  {
    color: #fff;
    background-color: rgba(253, 170, 101, 1);
    border-color: rgba(253, 170, 101, 1);
}
.login-modal .btn-secondary,
.forgetpwd-modal .btn-secondary {
    background-color: #fff;
    border-color: #fff;
    color: #666;
}
.login-modal .btn-secondary:hover,
.login-modal .btn-secondary:focus,
.login-modal .btn-skin:hover,
.login-modal .btn-skin::focus,
.forgetpwd-modal .btn-secondary:hover,
.forgetpwd-modal .btn-secondary:focus,
.forgetpwd-modal .btn-skin:hover,
.forgetpwd-modal .btn-skin::focus{
    opacity: 0.5;}
.login-modal .btn:hover,.forgetpwd-modal .btn:hover {
    opacity: 0.8;}
@media ( max-width : 1204px) {
    .hero h1 {font-size: 35px;}
    .hero>div {width: 70%;}
}
/* Media queries */
@media(min-width:767px) {
    .navbar {
        padding: 10px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }
    .top-nav-collapse {
        padding: 0;
        background-color: #33c5e6;
    }
    .navbar-custom.top-nav-collapse {
        border-bottom: 1px solid rgba(255,255,255,.3);
    }
    .intro {
        height: 100%;
        padding: 0;
    }
    .brand-heading {
        font-size: 100px;
    }
    .intro-text {
        font-size: 25px;
    }
}
@media (max-width:767px) {
	#navigation {
		padding: 8px 0;
	}
	.site-logo{
		margin: 0 0 0 30px;
		float:none;
	}
	.navbar-custom ul.nav li a {
		color: #fff;
	}
	.navbar-custom ul.nav ul.dropdown-menu li {
		border-bottom: 1px solid #aaa;
	}
	.navbar-custom .nav {color:#fff!important;}
	.navbar-header {
		margin-top:-40px;
		padding:0;
	}
	.navbar-header button {
		background: #404040;
	}
	.navbar-header button.navbar-toggle {
	    padding: 3px;
	    font-size: 20px;
	    color: #fff;
	    margin-right: 10px;
	}
	.navbar-toggle {margin-bottom: 0px;margin-top: 0px;}
	.service-box {
		margin-bottom: 50px;
	}
	.team-wrap {
		margin-bottom: 30px;
	}
	form#contact-form {
		margin-bottom: 50px;
	}
	.xs-marginbot-20 {
		margin-bottom: 20px;
	}
	.service-icon img{width:70%;}
	.hero h1 { 
		margin-top: 125px;
	    font-size: 30px;
	    margin-bottom: .3em;}
    .login-modal .modal-footer {padding: 15px 20px;}
}
@media (max-width:766px) {
	   .navbar-custom .nav {background-color: #fff !important;
    }
}
@media ( max-width : 600px) {
    .login-modal .modal-header img {padding: 30px;}
    .hero h1 {font-size: 25px;margin: 10px 0 10px;}
    .hero h2 {font-size: 18px;margin: 15px 0 10px;}
    .hero>div {width: 80%;height: 50px;}
}
@media (max-width:480px) {
	.navbar-custom .nav.navbar-nav {
        background-color: rgb(255,255,255)!important;}
	.navbar.navbar-custom.navbar-fixed-top {
		margin-bottom: 30px;}
	.container {width: 100%;}
	ul.footer-menu li {float: none;margin: 0px;}
	footer {padding: 10px 0 30px;}
	footer .serviceright{margin-top:10px}
	.modal-dialog {width: 350px;margin:10px auto;}
    .modal-header{padding:0;}
    .login-modal .modal-header img {padding: 10px 10px 0px 10px;height:60px;}
    #login-note{font-size:12px;}
  
}
.box-header{padding:20px 0;}
.box-title{text-align: center;font-size: 20px;color: #33c5e6;font-weight: 600;}
section .form-horizontal.line .header{
    background: #3f9cb5;
    padding: 30px 25px;
    font-size: 30px;
    color: #000;
    text-align: center;
    text-transform: uppercase;
    border-radius: 3px 3px 0 0;}
section .form-horizontal.line .heading{
    font-size: 16px;
    color: #3f9cb5;
    padding: 10px 0 20px 0;
    text-transform: capitalize;}
section .form-horizontal.line .form-content{
    padding: 25px;
    background: #000;}
section .form-horizontal.line .form-control{
    padding: 12px 16px 12px 39px;
    height: 45px;
    font-size: 14px;
    color: #2b2a2a;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 15px;}
section .form-horizontal.line .form-control:focus{
    border-color: #33c5e6;
    box-shadow: none;}
section .form-horizontal.line .control-label{
    font-size: 18px;
    color: #666;
    position: absolute;
    top: 5px;
    left: 27px;
    text-align: center;}
section .form-horizontal.line textarea.form-control{
    resize: vertical;
    height: 130px;}
section .form-horizontal.line select.form-control{
    line-height: 45px;
    border-bottom: 0px solid #ccc;
    margin-left: 39px;
    padding:0!important;
    width: 90%;
    height: 45px;
    margin-bottom: 0px!important;}
section .form-horizontal.line .control-label{
    font-size: 18px;
    color: #666;
    position: absolute;
    top: 5px;
    left: 27px;
    text-align: center;}
.form-group .select{
    font-size: 14px;
    color: #2b2a2a;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 15px;}
.form-group .select>.control-label{
    font-size: 18px;
    color: #666;
    position: absolute;
    text-align: center;}
.modal-dialog:not(.forgetpwd-modal) .btn-primary:hover,.modal-dialog:not(.login-modal) .btn-primary:hover {
    background-color: #33c5e6 !important;
    border-color: #33c5e6 !important;}
.modal-dialog:not(.forgetpwd-modal) .btn-primary,.modal-dialog:not(.login-modal) .btn-primary {
    background-color: #33c5e6 !important;
    border-color: #33c5e6 !important;}
.modal-dialog:not(.forgetpwd-modal) h4.modal-title, .modal-dialog:not(.login-modal) h4.modal-title{
	font-size: 20px;
	color: #000 !important;}
.modal-dialog .modal-header ,.modal-dialog .modal-header{
	background-color: #fff !important;
	color: #000 !important;
	border-radius: 5px 5px 0px 0px;}
.modal-dialog.forgetpwd-modal .modal-header,.modal-dialog.login-modal .modal-header{background-color: hsla(0, 0%, 0%, 0) !important;}
.panel.panel-primary>.panel-heading {
    background-color: #16c79e;border-color: #16c79e}
.panel-primary a:hover,.panel-primary h2{color: #16c79e;}
.panel.panel-info>.panel-heading {
    background-color: #30c9e8;
    color: #fff !important;}
.panel-info a:hover,.panel-info h2{color: #30c9e8;}
.panel.panel-danger>.panel-heading {
    background-color: #e83a30;
    color: #fff !important;}
.panel-danger a:hover,.panel-danger h2{color: #e83a30;}
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);}
.hito-leaderboard .panel-heading{ font-size:28px; padding:10px; border-bottom:1px solid #ccc; text-align:right; color:#fff}
.hito-leaderboard .panel-heading span { font-size:12px; margin-right:4px;}
.hito-leaderboard .panel-body{ padding:5px;}
.hito-leaderboard .list-group .list-group-item .list-group-item-heading {
    font-size:18px; color:#222; text-align:left;}
.hito-leaderboard .list-group .list-group-item {
    background-color: transparent; 
    overflow: hidden; 
    border: 0; 
    border-radius: 0; 
    padding:10px;
    min-height:110px;}
.list-group .list-group-separator {
    clear: both;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;}
.list-group .list-group-separator:before {
    content: "";
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,.1);
    float: right;}
.hito-leaderboard .list-group-item h2{font-weight: 700;font-size: 18px; width:40px; margin-bottom:5px;}
.hito-leaderboard .list-group-item:hover {
    color: inherit;
     /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */}
/*fix jquery-ui-datepicker*/
 .ui-datepicker .ui-datepicker-title select.ui-datepicker-year{ 
    height: 23px !important;} 
 .ui-datepicker .ui-datepicker-title select.ui-datepicker-month{ 
    height: 23px!important; 
    font-size: 0.9em!important;} 
.table-condensed .form-group {margin-bottom: 0px!important; }
#keeper .form-control { background-color: rgba(255, 255, 255, 0)!important;}
.login-group{float:right;}
@media screen and (max-width: 767px) {
.table-RWD:not(.table-horizontal-RWD) tbody tr.subtotal td:before{content:;font-weight: bold;text-align: left!important;display: inline-table;width: 0px;margin-right: 0px}
.table-RWD:not(.table-horizontal-RWD) tbody tr td.flex{display: -webkit-flex;display: flex;}
.table-RWD:not(.table-horizontal-RWD) tbody tr td{display: -webkit-flex;display: flex;}/*flex: 1; for ie*/
.table-RWD:not(.table-horizontal-RWD) tbody tr td>span{flex: 1;width:1px;}/*flex: 1; for ie*/
.table-RWD:not(.table-horizontal-RWD) tbody tr td.sm>span{flex: 1;width:1px;}/*flex: 1; for ie*/
.table-RWD:not(.table-horizontal-RWD) tbody tr td.md>span{flex: 1;width:1px;}/*flex: 1; for ie*/
.table-RWD:not(.table-horizontal-RWD) tbody tr td.lg>span{flex: 1;width:1px;}/*flex: 1; for ie*/
.table-RWD tbody tr td:empty {display: -webkit-flex;display: flex;}/*flex: 1; for ie*/
.table-RWD .form-group.has-feedback {margin-bottom: 0px;flex: 1;}/*flex: 1; for ie*/
/*�j�����e���_��*/
.table-RWD td.td-show-RWD {display: flex;background: #cecece;color: #000;}
}
.table { background-color: rgb(255, 255, 255);}
.collapse.in {background: white;}

#fundanalysis .form-horizontal .form-group {
    margin-right: 0px;
    margin-left: 0px;
}
/*專用 投保Q&A*/
#qacont ul.accord li .qa_title {
    color: #333333;
    cursor: pointer;
    padding-left: 30px;
    padding-right: 5px;}
#qacont .accord li .qa_title {
    background-color: #E8E8E8;
    background-image: url(img/item01.png);
    background-repeat: no-repeat;
    background-position: 7px 7px;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-bottom: 5px;}
#qacont ul.accord li .qa_content {
    color: #021C96;
    border: 1px solid #F16EA1;
    background-color: #FFF;
    background-image: url(img/item02.png);
    background-repeat: no-repeat;
    background-position: 7px 7px;
    padding-left: 30px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-right: 5px;}
.hr01 {
    background-image: url(img/hr.png);
    background-repeat: repeat-x;
    height: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;}
.qa_showall, .qa_hideall {
    color: #006699;
    text-decoration: none;
    line-height: 34px;
    font-size: 14px;}
#qacont .accord li .qa_content p {
    background-image: url(img/arrow01.png);
    background-repeat: no-repeat;
    background-position: left 3px;
    padding-left: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #021C96;}
    
/* featuredbox */
.news-tag{background-color: rgb(228,52,10);padding: 2px 6px;color: #fff;margin-right: 10px;}
.featuredbox { padding: 0 20px;} 
.featuredbox header{margin: 10px 0;}
.featuredbox .title, .featuredbox .title a{font-size: 18px;color:#fff;}
.featuredbox .title a:hover{color:rgb(21, 193, 233);}
.featuredbox img {
    border-radius: 20px;
    opacity: .8;
}
.featuredbox .source{font-size: 15px;font-weight:700;color: #000;}
.featuredbox .source a:hover{color: #000;}
.featuredbox a.read-more {
    color: #fa9300;
    font-weight: bold;
    font-size: 15px;
    position: relative;
    margin-top: 40px;
    display: block;
    text-align: left;}
.featuredbox a.read-more:before {
    right: 0px;
    left: 2px;
    top: -12px;
    height: 2px;
    width: 32px;
    background: #fa9300;
    border-bottom: 1px solid #fdcd88;}
.featuredbox a.read-more:before {
    content: "";
    position: absolute;
    bottom: -3px;
    left: -3px;}
.featuredbox a.read-more:after {
    position: absolute;
    font-family: Glyphicons Halflings;
    content: '\e080';
    font-size: 15px;
    line-height: 21px;
    padding-left: 10px;
    color: #fa9300;
    font-weight: 300;}
.featuredbox .read-more:hover, .featuredbox .read-more:focus {
    opacity: 0.7;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;}
@media (max-width: 439px){
    .login-info_m{padding: 20px 40px;}
    .login-pa{margin-top: 10px;}
    .featuredbox{margin-bottom: 50px;}
    .login_dr{
        display: none;
    }
    .login_box{
        margin-top: 10px;
        width: 100%;
    }
}
.d-flex{
    display: flex;
}

@media (min-width: 992px){
    .container {
        width: 100%;
    }
}