@charset "UTF-8";

/* CSS reset */
@import url("reset.css");
body{font-family:"Microsoft Jhenghei", "微軟正黑體",sans-serif;color: #333;}
body,html{height: 100%;}
h1,h2,h3,h4,h5,h6{font-weight: 600;}
h2{
	font-size: 18px;
	text-align: center;
}
label .red {color:red;}
h3{font-size: 16px;}
.clear{clear: both;}
.btn{border-radius: 3px;text-align: center;color: #fff;padding: 5px 15px;}
.btn i{margin-right: 8px;}
.main-btn {
    width: 290px;
    /*margin: 2px auto;*/
	margin: 2px 2px;
    background: #2764B2;
    display: inline-block;
}
.main-btn-red {
    width: 290px;
    margin: 2px 2px;
    background: #ff4d4d;
    display: inline-block;
}
.main-btn:hover{position: relative;top: 1px;}
.btn-wrapper{text-align: center;}
.gr-btn{background: #ccc;}
.btn-group .main-btn {width: 120px;}

/*layout*/
.index-login,.index-welcome{background: url(../img/bg.jpg) no-repeat center;background-size: cover;width: 100%; height:100%; min-height:800px;}
.login-wrapper{border-radius: 3px; width: 40%;min-width: 280px;background: rgba(256,256,256,0.6);margin: 0 auto;max-width: 400px;position: relative;top: 30%;}
.welcome-wrapper{position: relative;top: 20%;}
.main-content{padding: 30px 20px;max-width: 1200px;margin: 0 auto 30px;}
/*header*/
.header{position: relative;z-index: 999;}
.index-logo,.welcome-logo,.site-logo{width: 135px;margin: 0 auto;display: block;}
.site-logo{width: 90px;}
/*nav*/
.main-navigation{background: url(../img/bg-nav.gif);box-shadow:inset 0 2px 3px  rgba(0,0,0,0.1);}
.site-nav{width: 100%;text-align: center;}
.site-nav > li{font-size: 13px;display: inline-block;width: auto;}
.site-nav > li > a{width: 110px;color: #333;padding: 0;display: block;}
.site-nav > li > a >i{font-size: 36px;display: block;padding-bottom: 10px;padding-top: 18%;}
.main-navigation .site-nav > li > a{padding: 10px 0;border-right: 1px solid transparent;border-left: 1px solid transparent;}
.main-navigation .site-nav > li.active-nav > a,.main-navigation .site-nav > li > a:hover{border-left: 1px solid #dedede;border-right: 1px solid #dedede;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,dedede+100 */background: rgb(255,255,255); /* Old browsers */box-shadow:inset 0 2px 3px  rgba(0,0,0,0.1);background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(222,222,222,1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(222,222,222,1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(222,222,222,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 ); /* IE6-9 */}
li.mobile-only{display: none;}
.btn-sign-up{position: absolute;right: 20px;top: 30px;color: #666;}
.btn-sign-up:hover{color: #333;}
/*login-page*/
.login-wrapper h2,.welcome-wrapper h2{text-align: center;}
.login-form{padding: 20px;}
.login-form input {display: block;width: 100%;padding: 3px 3%;}
.login-form .login-btn {display: block;width: 100%;padding: 3px 3%;}
.login-form input{
	width: 94%;
	/*background: transparent;*/
	text-align: center;
}
.login-id,.login-psw{border-radius: 3px;margin-bottom: 10px;position: relative;/*background: #fff;*/}
.login-id:after,.login-psw:after{font-family: FontAwesome;position: absolute;right: 10px;top: 3px;color: #999;}
.login-id:after{content: "\f007";}
.login-psw:after{content: "\f023";}
.login-btn{background: #333;}
/*welcome-page*/
.welcome-logo{width: 180px;}
.welcome-wrapper h2{color: #333;font-size: 24px;padding: 20px 0;}
.welcome-navigation{margin-top: 80px;}
.welcome-navigation .site-nav li a{border-radius: 3px;background: rgba(256,256,256,0.6);color: #333;margin: 0 20px;font-size: 15px;width: 125px;height: 125px;transition: all 0.2s ease-in-out 0s; margin-bottom:10px;}
.welcome-navigation .site-nav li a i{font-size: 48px;}
.welcome-navigation .site-nav li a:hover{background: #980000;transform: scale(1.1); color: #fff;}
/*page*/
.view-switch{width: 300px;margin: 0 auto;border: 1px solid #ccc;border-radius: 3px;}
.view-switch1{width: 150px;margin: 0 auto;border: 1px solid #ccc;border-radius: 3px;}
.view-switch,.view-switch li a{height: 40px;}
.view-switch li{float: left;text-align: center;width: 50%;}
.view-switch li:last-child a{border-right: 0;}
.view-switch li a{color: #999;display: block;background: #eee;border-right: 1px solid #ddd;line-height: 40px;box-shadow:inset 0 2px 3px  rgba(0,0,0,0.1);}
.view-switch li.active-view a,.view-switch li a:hover{background: #fff;color: #000;font-weight: 600;box-shadow: none;}
/*table*/
.site-table {width: 100%;margin:30px 0;padding:0;border-collapse: collapse;border-spacing: 0;}
.site-table thead{background: #E7EBED;}
.site-table tr {padding: 5px;}
.site-table td {border-bottom: 1px solid #ddd;}
.site-table th, .site-table td {padding: 10px;text-align: center;}
.site-table th {text-transform: uppercase;font-size: 14px;letter-spacing: 1px;}
.case-tag{color: #980000 ;}
.view-link{color: #000;font-weight: 600;display: block;text-align: center; width:48%;float:left;}
.view-link-1{color: #000;font-weight: 600;display: block;text-align: center;width:100%;float:left;}
.view-link span{display: none;}
.view-link-1 span{display: none;}
/*admin*/
.bar-tool{display: inline-block;float: right;margin-bottom: 30px;}
.add-user{background: #6EBA44;font-size: 13px;}
.add-user i{color: #333;}
.user-tag-on{color: #6EBA44;}
/*pagination*/
.pagination{text-align: right;}
.pagination li{display: inline-block;padding: 0 10px;}
.pagination li a{color: #999;}
.pagination li a.on-page,.pagination li a:hover{color: #333;}
/*form*/
.form-header{color: #2D7EDF;border-bottom: 1px solid #ddd;padding-bottom: 10px;width: 100%;margin-bottom: 20px;}
.row{border-bottom: 1px dotted #333;padding-bottom: 20px;margin-bottom: 30px;}
.row > div{background-clip: padding-box;display: block;float: left;min-height: 1px;width: 100%;}
.row > div.col-half,.row > .full-col{width: 48%;padding:0 1%;}
.row > .full-col{width: 99%;float: none;clear: both;}
.border-no{border-bottom: 0;}
.site-form label,.label-header{display: block;clear: both;color: #000;font-size: 13px;}
.site-form [type="radio"] {width:20px; height:20px; top:5px; position:relative;}
.site-form [type="submit"] { position: relative; border: 1px solid silver;border-radius: 0;;display: block; ;margin-bottom: 1rem;padding: 0.25rem 3%;overflow: hidden;}
.site-form [type="text"], .site-form [type="tel"], .site-form .select-wrapper, .site-form textarea {
    position: relative;
    background: #fff none repeat scroll 0 0;
    font-size: 16px;
    border: 1px solid silver;
    padding: 0.25rem 3%;width: 90%;
    border-radius: 0;
    color: #222;
    display: block;
    height: 2rem;
    margin-bottom: 1rem;
    width: 90%;
    overflow: hidden;
}.site-form textarea{min-height: 100px;}
.site-form select{border: 0;width: 125%;background: transparent;z-index: 99;position: relative;}
.site-form .select-wrapper:before{content: '\f0d7';position: absolute;right: 20px;font-family: FontAwesome;z-index: 1;}
.site-form .second-select,.site-form .one-select,.site-form .half-select{float: left;margin-right: 5%;}
.site-form .zero-margin-select{margin-right: 0;}
.site-form .second-select{width: 56.5%;}.site-form .one-select{width: 22.5%;}
.site-form .half-select{width: 39.25%;}
.site-form .label-select select{position: absolute;right: -60%;top: 10px;}
.site-form .label-select label{color: #999;}
.check-wrapper{margin-bottom: 1rem;padding: 0.25rem 0;}
.check-wrapper label{margin-right: 10px;}
.check-wrapper label,.check-wrapper input{display: inline-block;width: auto;height: auto;}
/*detail*/
.form-detail .label-header{display:inline-block;width:80px;margin-right: 5px;}
.form-detail-item{color: #2D7EDF;margin-right: 20px;}
.detail-item-wrapper{border-bottom: 1px solid #ddd;padding: 10px 0;}
.form-detail > .row > .col-half > div.detail-item-wrapper:last-child{border-bottom: 0;}
.ps-wrapper{border-top: 1px solid #ddd;}
.ps-wrapper .label-header{display: block;}
/*chart*/
.chart-container{clear: both;width: 70%;margin: 30px auto 30px;}
.charts-select{width: 200px;float: right;margin-bottom: 20px;}

@media screen and (max-width: 768px) {
.mobile-only,.site-nav > li > ul{display: block;}
.site-nav > li > ul > li > a   > i,.page-header h1,.mobile-hide{display: none;}
.main-content{padding: 0;}
/*header*/
.header{box-shadow: 0 2px 3px  rgba(0,0,0,0.1);}
.site-logo{float: none;width: 60px;margin: 0 auto;}
.welcome-wrapper{top: 10%;}
/*nav*/
.nav_trigger{position: absolute;}
.nav_trigger,.close_trigger{padding: 15px 20px;display: block;}
.nav_trigger:before,.close_trigger{font-family: FontAwesome;font-size: 24px;}
.nav_trigger:before{font-family: FontAwesome;content: "\f0c9";color: #333;}
.close_trigger{text-align: right;}
.close_trigger:before{content: "\f00d";color: #fff;}
.navigation{position: fixed;top: 0;left: -300px;height:100%;width: 250px;transition: left 0.5s ease 0s, right 0.5s ease 0s, margin 0.5s ease 0s;background: #333;}
.show_sidebar{left: 0;overflow: auto;}
.main-navigation .site-nav > li{display: block;text-align: left;color: #fff;font-size: 15px;border-bottom: 1px solid #636363;letter-spacing: 0.1em;}
.main-navigation .site-nav > li > a >i{font-size: 26px;display: inline;padding: 0;color: #636363;margin-right: 15px;}
.main-navigation .site-nav > li.active-nav > a,.main-navigation .site-nav > li > a:hover,.main-navigation .site-nav > li a{border-left: 0;border-right: 0;background: none;box-shadow: none;}
.main-navigation .site-nav > li a{color: #fff;width: auto;padding: 20px;}
.welcome-navigation{margin-top: 20px;}
.welcome-navigation .site-nav{width: 300px;margin: 0 auto;}
.welcome-navigation .site-nav > li a{margin: 0 10px 20px 10px;}
.welcome-navigation .site-nav > li:nth-child(2n+3){clear: both;}
.welcome-navigation .site-nav li a:hover{background: rgba(0,0,0,0.3);transform: none;}
.menu-head{padding: 20px;}
.view-switch{width: 100%;border-width: 0 0 1px 0;}
.view-switch li a:hover{color: #999;display: block;background: #eee;border-right: 1px solid #ddd;line-height: 40px;box-shadow:inset 0 2px 3px  rgba(0,0,0,0.1);}
/*table*/
.site-table {border: 0;}
.site-table thead {display: none;}
.site-table tr {margin-bottom: 10px;display: block;border-bottom: 2px solid #ddd;}
.site-table td {display: block;text-align: right;font-size: 13px;border-bottom: 1px dotted #ccc;}
.site-table td:last-child {border-bottom: 0;}
.site-table td:before {content: attr(data-label);float: left;text-transform: uppercase;font-weight: bold;}
.view-link span{display: inline;}.view-link{background: #ddd;padding: 5px 0; margin:3px 3px;}
.view-link-1 span{display: inline;}.view-link-1{background: #ddd;padding: 5px 0;}
.view-link i{margin-right: 10px;}
.view-link-1 i{margin-right: 10px;}
.bar-tool{margin: 20px 10px;}
/*pagination*/
.pagination{text-align: center;}
/*page*/
.page-header{text-align: center;background: none;padding: 5px;border-bottom: 1px solid #ddd;}
/*form*/
.site-form{padding: 20px;}
.row{padding-bottom: 0;}
.row > div.col-half,.row > .full-col{width: 100%;padding:0 ;}
.check-wrapper{height: auto;}
.check-wrapper label{display: block;}
.form-detail > .row > .col-half > div.detail-item-wrapper:last-child{border-bottom: 1px solid #ddd;}
/*.chart*/
.chart-container{width: 90%;}
.charts-select{padding: 0;}
}


@media screen and (max-width: 480px) {
.login-wrapper{top: 20%;}
.welcome-logo{width: 85px;}
.welcome-wrapper h2{padding: 10px;}
.welcome-wrapper{top: 5%;}
.site-form .label-select select{right: -80%;}
.site-form select{width: 135%;}
}

/*2016/09/05新增*/
@media screen and (max-width: 786px) {
inpit[type="text"], input[type="tel"] {font-size:16px;}
.site-form input,.site-form textarea,.site-form select{font-size: 16px;}
}

/*2016/09/13新增*/
.radio-wrapper{margin-bottom: 1rem;padding: 0.25rem 3%;}
.site-form .radio-label-wrapper:before{display: none;}
.site-form .radio-label-wrapper >span{position: absolute;z-index: 9;left: 10px;top: 6px;}
.site-form .radio-label-wrapper > input{text-align: center;border: 0;padding: 0;}
.radio-wrapper label{width: 80px;}
.radio-wrapper label,.radio-wrapper label input{display: inline-block;}
.radio-wrapper label input{margin-right: 10px;}
.check-wrapper input,.radio-wrapper label input{height: 20px;width: 20px;position: relative;top: 3px;}
.form-tabs{display: none;}
.ui-tabs .ui-tabs-hide { display: none !important; }

@media screen and (max-width: 768px) {
.header{position: fixed;width: 100%;height: 60px;top: 0;background: #fff;}
.main-content{margin-top: 60px;}
.m-form,.form-tabs{padding: 10px 20px 0;background: #dedede;text-align: center;width: auto;margin-bottom: 0;}
.check-wrapper label{width: 42%;margin-right: 0;clear: none;display: inline-block;}
.row{border-bottom: 0;}
.form-tabs{padding: 5px 0;display: block;}
.form-tabs li{display: inline-block;}
.form-tabs li:after{content: '\f105';color: #999;font-family: FontAwesome;}
.form-tabs li:last-child:after{display: none;}
.form-tabs li a{padding: 0 10px;font-size: 13px;color: #333;}
.form-tabs li a i{margin-right: 5px;}
.form-tabs li.ui-state-active a{color: #980000;}
.tabs-tab{margin-top: 20px;}
}



@media screen and (max-width: 480px) {
.radio-wrapper{padding-left: 0;}
.radio-wrapper label{font-size: 16px;}
.site-form .second-radio{width: auto;}
.site-form .radio-label-wrapper{width: 25%;}
.site-form .radio-label-wrapper > input{text-align: right;}
.main-btn{width: 230px;}
.main-btn-red{width: 230px;}
}



/*201609新增datepicker*/
/* input box in default state */ 
.site-form .tcalInput {background: url('../js/img/cal.gif') 98% 50% no-repeat;cursor: pointer;}
/* additional properties for input boxe in activated state, above still applies unless in conflict */
.site-form .tcalActive {background-image: url('../js/img/no_cal.gif');}
/* container of calendar's pop-up */
#tcal {position: absolute;visibility: hidden;z-index: 100;width: 170px;background-color: white;margin-top: 2px;padding: 0 2px 2px 2px;border: 1px solid silver;-moz-box-shadow: 3px 3px 4px silver;-webkit-box-shadow: 3px 3px 4px silver;box-shadow: 3px 3px 4px silver;-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='silver')";filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='silver');}
/* table containing navigation and current month */
#tcalControls {border-collapse: collapse;border: 0;width: 100%;}
#tcalControls td {border-collapse: collapse;border: 0;padding: 0;width: 16px;background-position: 50% 50%;background-repeat: no-repeat;cursor: pointer;}
#tcalControls th {border-collapse: collapse;border: 0;padding: 0;line-height: 25px;font-size: 10px;text-align: center;font-family: Tahoma, Geneva, sans-serif;font-weight: bold;white-space: nowrap;}
#tcalPrevYear { background-image: url('../js/img/prev_year.gif'); }
#tcalPrevMonth { background-image: url('../js/img/prev_mon.gif'); }
#tcalNextMonth { background-image: url('../js/img/next_mon.gif'); }
#tcalNextYear { background-image: url('../js/img/next_year.gif'); }
/* table containing week days header and calendar grid */
#tcalGrid {border-collapse: collapse;border: 1px solid silver;width: 100%;}
#tcalGrid th {border: 1px solid silver;border-collapse: collapse;padding: 3px 0;text-align: center;font-family: Tahoma, Geneva, sans-serif;font-size: 10px;background-color: gray;color: white;}
#tcalGrid td {border: 0;border-collapse: collapse;padding: 2px 0;text-align: center;font-family: Tahoma, Geneva, sans-serif;width: 14%;font-size: 11px;cursor: pointer;}		
#tcalGrid td.tcalOtherMonth { color: silver; }
#tcalGrid td.tcalWeekend { background-color: #ACD6F5; }
#tcalGrid td.tcalToday { border: 1px solid red; }
#tcalGrid td.tcalSelected { background-color: #FFB3BE; }		

/*2016/10/新增*/
.check-wrapper input,.radio-wrapper label input{border:0;}

@media screen and (orientation: landscape) {
  .index-login { height:;}
  .index-welcome { height:100%;}
}	

@media screen and (max-width: 768px) {
	.welcome-navigation .site-nav{width: 100%;}
	.index-login,.index-welcome{ height:100% !important; overflow:scroll;}
}