@charset "utf-8";

label{margin:0px;}

/*寬度*/
.w180{width:180px;}
.w200{width:200px;}
.w250{width:250px;}
.w300{width:300px; min-width:300px; max-width: 300px;}
.w350{width:350px;}

/*color*/
.text-red { color: red;}
.text-brown{color:#87314e;}
.text-steelblue{color:#478585;}
.text-purple{color:#7D2264;}
.text-maroon{color:#56152F;}
.bg-red {background-color: #F2DEDE;}
.bg-blue { background-color:#264FB7; border-color:#264FB7; color:white;}
.bg-brown{background-color: #d2783a;}
.bg-lightBrown{background-color:#FFD4B7;}
.bg-green{background-color: #b3c833;}
.bg-red2 {background-color: #ce5043;}
.bg-blue2 {background-color: #1aa1e1;}

.center{text-align:center;}
.right{text-align:right;}

.pointer{cursor:pointer;}
.nopointer{cursor:default;}

.wordbreak{word-break:break-all;}
.block{display:inline-block;}
/*.block input{display: inline-block;}*/
.bolder{font-weight:bolder;}

.display-none{display:none;}

/*-------------------------------------------------
  For test
-------------------------------------------------*/
.border{border:2px red solid;}
/*-------------------------------------------------
  Font
-------------------------------------------------*/
/*cwTeXYen 圓體*/
@font-face {
  font-family: 'cwTeXYen';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.ttf) format('truetype');
}

.font1, h4.text-primary{font-family: Arial, cwTeXYen, Microsoft JhengHei;}
.font1{ font-size:1.2em;}
h4.text-primary{ font-size:1.5em; font-weight: 500;}
#ui-datepicker-div{font-family: Microsoft JhengHei; font-size:1.5rem;}
.dropdown-menu {font-size: 1em;}
.label {font-size:14px!important;}

/*-------------------------------------------------
  Navbar 選單
-------------------------------------------------*/
/*menu*/
.mega-dropdown { position: static !important;}
.mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none;}
.mega-dropdown-menu > li > ul { padding: 0; margin: 0;}
.mega-dropdown-menu > li > ul > li { list-style: none;}
.mega-dropdown-menu > li > ul > li > a { display: block; color: #222; padding: 3px 5px;}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; background-color:#FFD9A5; border-radius:5px;}
.mega-dropdown-menu .dropdown-header { font-size: 18px; color: #ff3546; padding: 5px 60px 5px 5px; line-height: 30px;}
.mega-dropdown-menu .dropdown-header2 {  font-size: 15px; color: rgb(66, 139, 202); padding: 5px 60px 5px 5px; line-height: 30px;}
.mega-dropdown-menu .dropdown-header3 {  font-size: 15px; color: #227700; padding: 5px 0px 0px 5px;}

.dropdown-submenu { position: relative;}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu { display: block;}
.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-submenu:hover>a:after { border-left-color: #fff;}
.dropdown-submenu.pull-left {  float: none;}
.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

/*其他連結*/
.menu_link{background-color:black;}

.navbar-inverse .nav > li { border-right:1px gray solid;}
.dropdown-menu{
  border:1px solid #cccccc;
  box-shadow:rgba(100, 100, 100, 0.34902) 0 5px 5px;}

/*user*/
img.icon_menu_user1{margin:-0.5em 0em 0em -0.5em;}
img.icon_menu_user2{margin:0em 0em 0em -0.5em;}

/*防止navbar collaps*/
.navbar-nav { margin:0;}
.navbar-nav > li { display:inline-block; }
.navbar-nav > li.open > ul.dropdown-menu { position: absolute; }
@media (max-width: 767px) {
  /*.navbar-collapse.collapse { display: block!important; }*/
  .navbar-nav>li, .navbar-nav { float: left !important; }
  .navbar-nav.navbar-right:last-child { margin-right: -15px !important; }
  .navbar-right { float: right!important; }
}

/*-------------------------------------------------
  項目列表
-------------------------------------------------*/
/*列表-圖*/
.imgArea{display:table-cell;display: inline-block;overflow: hidden; text-align: center; vertical-align: middle;}  
.imgArea img{max-width:100%; max-height:100%;border:0;vertical-align: middle;}  

div.itemAreaTab{margin:0px 0px -1px 0px;}
div.itemAreaTab > span{border:2px solid #A7CDEF; border-radius:3px; padding:5px 2px;}
div.itemAreaTab > span > span{background-color:#DAECFB; border-radius:3px; padding:3px;}

div.itemArea{border: 1px #B1B1B1 solid;}
div.itemArea .col-xs-7,div.itemArea .col-xs-8{min-height:13em; max-height: 13em; /*border: 1px red solid;*/}
div.itemArea .panel-heading{padding: 5px 0px; font-size:1.5rem; background-color: #A7CDEF; font-weight:bolder;}
div.itemArea .panel-heading .product_name{min-height:3em; max-height: 3em; overflow: hidden; line-height: 1.5em; word-break: break-all;}
div.itemArea .panel-heading table td{padding: 0px 8px;}
div.itemArea .panel-heading table td.text-left{padding-left: 0px;}
div.itemArea .panel-body{padding: 5px 0px; border-top: 1px #E2E1E1 solid; border-bottom: 1px #E2E1E1 solid;}
div.itemArea .panel-body .product_desc{min-height:8.5em; max-height: 8.5em; overflow: hidden;}
div.itemArea .panel-body .product_reason{font-size: 15px;}
div.itemArea .panel-body div.itemArea_img{height:9em;}
div.itemArea .panel-body div.itemArea_img img{ max-width:100%; max-height:100%; object-fit:contain; }
div.itemArea .panel-body div.itemArea_img img.img-thumbnail{ border:1px #E2E2E2 solid;; }
div.itemArea .panel-footer{background-color:#DAECFB;margin-top: 0px;}
div.itemArea .panel-heading.bg-red{background-color: #F2DEDE;}
div.itemArea .panel-footer.bg-red{background-color: #F2DEDE;}

.item_area_title{border-bottom: 1px #DDDADA solid; padding-bottom: 10px;}
.item_area_img{min-height: 6em; max-height: 6em;max-width: 280px; overflow: hidden;}
.item_area_button i{padding:5px 6px; background:#ffffff;}
.item_title{min-height:1.5em; max-height: 1.5em; overflow: hidden; line-height: 1.5em;}
.item_desc{min-height:6em; max-height: 6em; overflow: hidden;}
.item_desc ul{list-style: outside;}
.item_desc ul li { margin-left: -1.6em; }
.item_desc ul li:before {
  content:"\f0da"; /* FontAwesome Unicode */
  display: inline-block;
  margin-left: -1.3em;
  width: 1.3em;
  font-family: FontAwesome;
  color:#4079C8;
}

.product_desc ul{list-style: none;}
.product_desc ul li { margin-left: -1.3em; }
.product_desc ul li:before {
  content:"\f0da"; /* FontAwesome Unicode */
  display: inline-block;
  margin-left: -1.3em;
  width: 1.3em;
  font-family: FontAwesome;
  color:#4079C8;
}  

/*-------------------------------------------------
  Table
-------------------------------------------------*/ 
table.table tr:nth-child(even){ background-color: rgba(43, 84, 44, 0.1);}
table.table thead tr{ background-color: rgba(43, 84, 44, 0.15);}

table.table_style tr{height:3.5em;min-height:3.5em;}

/*詳細資料 style*/
.table_style1_area{background-color:white; padding:15px 15px 0px 15px; border-radius:5px; border:3px #DDDADA solid; font-weight:bolder;}
.table_style1 td{background-color:white;}
.table_style1 th{color:#255625;background-color:#EAEEEA;}

.table_style2{background-color:white; padding:0px 15px; border-radius:5px; border:3px #DDDADA solid; font-weight:bolder;}
.table_style2 table tr{border-bottom:1px #DDDADA solid; padding:8px 0px;}
.table_style2 table tr:last-child{border:none;}  
.table_style2 table th, .table_style2 table td{padding:5px;}
.table_style2 table th{color:brown; width:120px; padding-right:10px;}  
.table_style2.theme2 table th{color:#255625;}

table.table_darkgray thead tr{background-color:#9baec8; color:#282c37;}
table.table_darkgray tr:nth-child(even) { background-color:#d9e1e8;}

table.table_tan thead tr{background-color:#D09E88; color:#534847;}
table.table_tan tr:nth-child(even) { background-color:#FADAD8;}

table.table_lightsteelblue thead tr{background-color:#AAABD3;}
table.table_lightsteelblue tr:nth-child(even) { background-color:#D3D4EA;}

table.table_silver thead tr{background-color:#CBA6C3;}
table.table_silver tbody tr:nth-child(even) { background-color:#f3e3f0;}

table.table_rosybrown thead tr{background-color:#CA9AAD;}
table.table_rosybrown tbody tr:nth-child(even) { background-color:#E2C5D1;}

/*-------------------------------------------------
  Button & Icon
-------------------------------------------------*/ 
/*tabel按鈕區*/
.tableBtnArea a span{display:block; margin-top:0.5em;}
.tableBtnArea a:first-child span{margin-top:0em;}
.tableBtnArea {min-width:3em; max-width:10.5em;}

/*右上角按鈕 style (ex:列印)*/
.btn_style1{border-radius: 50%; padding: 10px 11px; border:3px #DDDADA solid; background-color:white;}

/*加購按鈕*/
.box > .icon { text-align: center; position: relative; }
.box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; vertical-align: middle; }
.box > .icon:hover > .image { background: #333; }
.box > .icon > .image > i { font-size: 32px !important; color: #fff !important; }
.box > .icon:hover > .image > i { color: white !important; }
.box > .icon > .info { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 0 10px 0; }
.box > .icon:hover > .info { background: rgba(0, 0, 0, 0.04); border-color: #e0e0e0; color: white; }
.box > .icon > .info > h3.title { font-size: 15px; font-weight: bolder; min-height:40px;}
.box > .icon > .info > p {  font-size: 13px; color: #666; line-height: 1.5em; margin: 20px;}
.box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a { color: #222; }
.box > .icon > .info > .more a {color:white; line-height: 12px; text-transform: uppercase; text-decoration: none; }
.box > .icon > .info > .more{padding: 5px 0px;}
.box .space { height: 30px; }
a.disabled {pointer-events: none; cursor: not-allowed;}
a.disabled >.box > .icon > .image { background: gray; }
a.disabled >.box > .icon:hover > .image { background: gray; }
a.disabled >.box > .icon > .info > h3.title {  color: gray; }

/*商品詳細資料 3個切換按鈕*/
.tab_style1 .process-step .btn:focus{outline:none;}
.tab_style1 .process{display:table;width:100%;position:relative;}
.tab_style1 .process-row{display:table-row;}
.tab_style1 .process-step button[disabled]{opacity:1 !important; filter: alpha(opacity=100)!important;}
.tab_style1 .process-row:before{top:40px;bottom:0;position:absolute;content:" ";width:100%;height:1px;background-color:#ccc;z-order:0;}
.tab_style1 .process-step{display:table-cell;text-align:center;position:relative;}
.tab_style1 .process-step p{margin-top:4px;}
.tab_style1 .btn-circle{width:80px;height:80px;text-align:center;font-size:12px;border-radius:50%;}
.tab_style1 .tab-content{background-color:white; padding:20px; border-radius:5px;}

.tab_style1 .process .btn{border-width:0px;}
.tab_style1 .process .btn:hover { margin: 0px; border-width: 0px;}
.tab_style1 .process .img-thumbnail{max-width:90%;}

/*footer btn*/
.footer_btn1{
  background:url("../images/customer/icon-ft-01.png") 0.75em 50% no-repeat #795649;
  box-shadow:rgba(100, 100, 100, 0.247059) 0 5px 5px;
  color:#FFFFFF;
  min-height:55px;
  min-width:140px;
  padding-left:3em;
  vertical-align:top;
}
.footer_btn2{
  background:url("../images/customer/icon-ft-02.png") 0.75em 50% no-repeat #607D8B;
  box-shadow:rgba(100, 100, 100, 0.247059) 0 5px 5px;
  color:#FFFFFF;
  min-height:55px;
  line-height:55px;
  min-width:140px;
  padding-left:3em;
  vertical-align:top;
}

/* cart */ 
  .cart_style1 .cartQ{position:relative; top:-23px; left:30px;}
  .cart_style1 .cartTitle{position:relative; top:-20px;}

/*error Msg Icon*/
i.errorMsgIcon{border-radius: 50%; width: 55px; height:55px; color: white; text-align: center; line-height: 55px;}

*-------------------------------------------------
  Progress Bar
-------------------------------------------------*/ 
.progress { height: 35px; }
.progress .skill {
  font: normal 12px;
  line-height: 35px;
  padding: 0;
  margin: 0 0 0 15px;
  color:black;
}
.progress .skill .val { font-style: normal; }
.progress-bar {
  text-align: left;
  transition-duration: 3s;
}
/*-------------------------------------------------
  Radio &  Checkbox
-------------------------------------------------*/ 
.funkyradio label {
    /*min-width: 400px;*/
    font-size: 15px;
    width: 100%;
    border-radius: 3px;
    border: 1px solid #D1D3D4;
    /*border: 1px solid #ADD7F0;*/
    font-weight:bolder;
    background-color:white;
    color:black;
} 
.funkyradio input[type="radio"]:empty, .funkyradio input[type="checkbox"]:empty { display: none;}
.funkyradio input[type="radio"]:empty ~ label, .funkyradio input[type="checkbox"]:empty ~ label {
    position: relative;
    line-height: 2.5em;
    text-indent: 3.25em;
    margin-top: 1em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.funkyradio input[type="radio"]:empty ~ label:before, .funkyradio input[type="checkbox"]:empty ~ label:before {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    content:'';
    width: 2.5em;
    /*background: #D1D3D4;*/
    background: #99D8F0;
    border-radius: 3px 0 0 3px;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before, .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
    content:'\2714';
    text-indent: .9em;
    color: #C2C2C2;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label, .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
    color: #888;
}
.funkyradio input[type="radio"]:checked ~ label:before, .funkyradio input[type="checkbox"]:checked ~ label:before {
    content:'\2714';
    text-indent: .9em;
    color: #333;
    background-color: #ccc;
}
.funkyradio input[type="radio"]:checked ~ label, .funkyradio input[type="checkbox"]:checked ~ label {
    /*color: #777;*/
    background-color: white;
}
.funkyradio input[type="radio"]:focus ~ label:before, .funkyradio input[type="checkbox"]:focus ~ label:before {
    box-shadow: 0 0 0 3px #999;
}
.funkyradio-default input[type="radio"]:checked ~ label:before, .funkyradio-default input[type="checkbox"]:checked ~ label:before {
    color: #333;
    background-color: #ccc;
}
.funkyradio-primary input[type="radio"]:checked ~ label:before, .funkyradio-primary input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #337ab7;
}
.funkyradio-success input[type="radio"]:checked ~ label:before, .funkyradio-success input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #5cb85c;
}
.funkyradio-danger input[type="radio"]:checked ~ label:before, .funkyradio-danger input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #d9534f;
}
.funkyradio-warning input[type="radio"]:checked ~ label:before, .funkyradio-warning input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #f0ad4e;
}
.funkyradio-info input[type="radio"]:checked ~ label:before, .funkyradio-info input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #5bc0de;
}

/*-------------------------------------------------
  Note 備註
-------------------------------------------------*/ 
.oaerror {
  margin: 0 auto;
  background-color: #FFFFFF;
  padding: 20px;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
  margin: 0 auto;
}
.info { border-left-color: #5bc0de;  background-color: rgba(91, 192, 222, 0.15);}
.success {  border-left-color: #2b542c;  background-color: rgba(43, 84, 44, 0.1);}
.danger strong { color:  #d9534f;}
.warning strong { color: #f0ad4e;}
.info strong {  color: #5bc0de;}
.success strong {  color: #2b542c;}

.oaerror p.input_Title{height: 36px; padding:6px 0;}
/*-------------------------------------------------
  for theme.css
-------------------------------------------------*/ 
.danger { border-left-color: #d9534f; background-color: rgba(217, 83, 79, 0.1);}
.warning { border-left-color: #f0ad4e; background-color: rgba(240, 173, 78, 0.15);}
.panel .row {margin: 5px 0px;}
.panel .panel-heading{ font-weight:400; text-align: center; /*display: none;*/}
.panel .panel-body{ padding: 25px 35px;  font-size:16px;}
.alert{ margin-top:15px; }
table a,.table a{ text-decoration:none; color:#2161BA;}
table.table a{ color:#2161BA;}
table.table a:hover{ color:#EF8B00;}
.modal-backdrop{ z-index:0; }
/*.navbar{ font-size:15.5px; }*/
.breadcrumb{ margin-bottom:0px; }
.popover{ min-width:250px; }
.popover-content{
  font-family: Microsoft JhengHei, sans-serif;
  text-align: left;
  font-size: 13px;
}
.btn{font-size: 15px;}

/*-------------------------------------------------
  待整理
-------------------------------------------------*/ 
.loginArea div{margin:5px 0px;}
.circle {
  width: 60px;
  height: 60px;
  line-height: 72px;
  border-radius: 30px;
  background-color:white;
  font-size: 0.9em;
}

.btnArea .desc{line-height: 35px;}

.error{color:red;}
.well{padding:20px 0px; margin:10px 0px;}

.pagination{margin: 0px;}
.contentArea{
  border-radius:5px;
  border:1px solid #cccccc;
  box-shadow:rgba(100, 100, 100, 0.34902) 0 5px 5px;
}
.tableArea{width:100%;}
.tableArea th, .tableArea td{ padding:5px;}

/*分頁區域*/
.pageArea .page_des{position: absolute;}
.pageArea .page_des div{line-height: 30px;}
.pageArea .page_number{position: relative; min-height:34px;}

.testimonial .groupTitle{color:white; padding: 15px;}
.testimonial .groupSubTitle.styleGreen:hover{ background-color: #eaf5dc;}
.testimonial .groupSubTitle.styleGreen.active{background-color:#eaf5dc;}
.testimonial .groupSubTitle.styleRed:hover{ background-color: #fce0e9;}
.testimonial .groupSubTitle.styleRed.active{background-color:#fce0e9;}
.testimonial .groupSubTitle.styleBlue:hover{ background-color: #C9EBFC;}
.testimonial .groupSubTitle.styleBlue.active{background-color:#C9EBFC;}
.testimonial .groupSubTitle{border-top: 1px lightgray solid; padding: 5px; font-size: 13px;}
.testimonial .groupSubTitle a{color: black;}

/*breadcrumb*/
.breadcrumb-arrow {
    height: 35px;
    padding: 0;
    line-height: 35px;
    list-style: none;
    background-color: #e6e9ed;
    border-width: 0px;
    margin: 10px 0 0 5px;
    font-size: 16px;
}
.breadcrumb-arrow li:first-child a {
    border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px
}
.breadcrumb-arrow li, .breadcrumb-arrow li a, .breadcrumb-arrow li span {
    display: inline-block;
    vertical-align: top
}
.breadcrumb-arrow li:not(:first-child) {
    margin-left: -5px
}
.breadcrumb-arrow li+li:before {
    padding: 0;
    content: ""
}
.breadcrumb-arrow li span {
    padding: 0 10px
}
.breadcrumb-arrow li a, .breadcrumb-arrow li:not(:first-child) span {
    height: 35px;
    padding: 0 10px 0 25px;
    line-height: 35px
}
.breadcrumb-arrow li:first-child a {
    padding: 0 10px
}
.breadcrumb-arrow li a {
    position: relative;
    color: #fff;
    text-decoration: none;
    background-color: #9DB4C0;
    border: 1px solid #9DB4C0
}
.breadcrumb-arrow li:first-child a {
    padding-left: 10px
}
.breadcrumb-arrow li a:after, .breadcrumb-arrow li a:before {
    position: absolute;
    top: -1px;
    width: 0;
    height: 0;
    content: '';
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent
}
.breadcrumb-arrow li a:before {
    right: -10px;
    z-index: 3;
    border-left-color: #9DB4C0;
    border-left-style: solid;
    border-left-width: 11px
}
.breadcrumb-arrow li a:after {
    right: -11px;
    z-index: 2;
    border-left: 11px solid #879BA5
}
.breadcrumb-arrow li a:focus, .breadcrumb-arrow li a:hover {
    background-color: #5C6B73;
    border: 1px solid #5C6B73
}
.breadcrumb-arrow li a:focus:before, .breadcrumb-arrow li a:hover:before {
    border-left-color: #5C6B73
}
.breadcrumb-arrow li a:active {
    background-color: #2494be;
    border: 1px solid #2494be

}
.breadcrumb-arrow li a:active:after, .breadcrumb-arrow li a:active:before {
    border-left-color: #2494be
}
.breadcrumb-arrow li span {
    color: #434a54;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    max-width:300px;
}  

/*hovercss*/
/* Forward */
.hvr-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}