/* CSS Document */
* {
    box-sizing: border-box;
}
*::before, *::after {
    box-sizing: border-box;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #365066;
}

input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
input{ text-align:right}
span{ display:inline-block}
body{ 
	font-family:"微軟正黑體",Arial,Helvetica,sans-serif;
	font-size:14px;
	letter-spacing:0.5px;
	margin:0;
	color:#314559
	}
a{text-decoration:none;color:#ffffff;outline: none;/* for Firefox */hlbr:expression(this.onFocus=this.blur()); /* for IE */}
a:link{ext-decoration:none;}
a:visited{text-decoration:none;}
a:hover{color: inherit;}
a img{border: none} 

img{ border:0px}
div,ul,dl,dt,dd{margin:0; padding:0; list-style:none;}
h1{ font-size:24px; margin:0 auto; font-weight:normal}
h2{ font-size:18px;margin:0 auto; font-weight:normal}
h3{font-size:14px;margin:0 auto; font-weight:normal}
.custom-hr {
  border: none;
  border-top: 1px solid #000; /* 調整線條顏色和粗細 */
  width: 100%;
  margin-top: 0.5rem;
}

.color1{color:#ffffff}
.color2{color:#e6e7e6}
.color3{color:#f8ddce}
.color4{color:#bbd3ba}
.color4-1{color:#eef7ec}
.color5{color:#566a65}
.color6{color:#314559}
.color7{color:#212934}
.color8{color:#000000}
.color9{color:#dd927b}
.color10{color:#c1c1c1}
.bg-color1{background-color:#ffffff}
.bg-color2{background-color:#e6e7e6}
.bg-color3{background-color:#f8ddce}
.bg-color4{background-color:#bbd3ba}
.bg-color4-1{background-color:#eef7ec}
.bg-color5{background-color:#566a65}
.bg-color6{background-color:#314559}
.bg-color7{background-color:#212934}
.bg-color8{background-color:#000000}
.bg-color9{background-color:#dd927b}
.head-bg-fix{
    background-image: url('../images/紙袋刀模圖背景.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* 固定背景 */
    height:380px; /* 設定高度，確保內容可滾動 */
}
.fbtn-l{ height:36px;line-height:36px;border-radius:4px; text-align:center;display:inline-block;}
.fbtn-l:hover{
	cursor: pointer;
	color:#566a65;
	background-color:#bbd3ba;
}
.fbtn-l.active{
	cursor: pointer;
	color:#566a65;
	background-color:#bbd3ba;
	pointer-events: none;
}
.mfbtn-l{ height:36px;line-height:36px;border-radius:4px; text-align:center;display:inline-block;color:#566a65;background-color:#ffffff}
.mfbtn-l:hover{
	cursor: pointer;
	color:#bbd3ba;
	background-color:#566a65;
}
.mfbtn-l.active{
	cursor: pointer;
	color:#bbd3ba;
	background-color:#566a65;
	pointer-events: none;
}
.calcbtn{
	border-radius:4px; text-align:center;display:inline-block; border:1px solid #ccc; line-height:34px;cursor: pointer; color:#888;background-color:#F7F7F7
}
.calcbtn-active{
	border-radius:4px; text-align:center;display:inline-block; border:1px solid #ccc; line-height:34px;cursor: pointer; color:#bbd3ba;background-color:#566a65
}

.fbtn-s{ height:28px;line-height:28px;border-radius:4px; text-align:center;display:inline-block;}
.fbtn-s:hover{cursor: pointer;}
.icon-btnboder{ border:2px solid #566a65}

.color4btn{  height:40px; border:1px solid #bbd3ba;border-radius:3px; background-color:#bbd3ba; color:#fff; line-height:40px; text-align:center; display:inline-block;}
.color5btn{  height:40px; border:1px solid #566a65;border-radius:3px; background-color:#566a65; color:#fff; line-height:40px; text-align:center; display:inline-block;}
.color6btn{  height:40px; border:1px solid #314559;border-radius:3px; background-color:#314559; color:#fff; line-height:40px; text-align:center; display:inline-block;}
.color9btn{  height:40px; border:1px solid #D88E7C;border-radius:3px; background-color:#D88E7C; color:#fff; line-height:40px; text-align:center; display:inline-block; }
.colorLINEbtn{  height:40px; border:1px solid #06c755;border-radius:3px; background-color:#06c755; color:#fff; line-height:40px; text-align:center; display:inline-block;}


.white{ color:#FFF}
.red{color:#F00}
.gray{ color:#979797}
.black{color:#000}
.green{color:#365066}
.orange{color:#D88E7C}
.blue{color:#09F}
.auto{color:#009799}
.Wbg{background-color:#FFF}
.Gbg{background-color:#F7F7F7}
.w1{ width:10%}
.w1-5{width:15%}
.w2{ width:20%}
.w3{ width:30%}
.w35{ width:35%}
.w4{ width:40%}
.w5{ width:50%}
.w6{ width:60%}
.w7{ width:70%}
.w8{ width:80%}
.w9{ width:90%}
.w10{ width:100%}
.w12{ width:120%}
.w14{ width:140%}
.w15{ width:150%}
.w16{ width:160%}
.w18{ width:180%}
.w20{ width:200%}
.btw4{width:40px}
.btw6{width:60px}
.btw8{width:80px}
.btw10{width:100px}
.btw12{width:120px}
.btw14{width:140px}
.btw16{width:160px}
.btw18{width:180px}
.btw20{width:200px}
.btw24{width:240px}
.btw23{width:300px}
.font12{ font-size:12px}
.font14{ font-size:14px}
.font16{ font-size:16px}
.font18{ font-size:18px}
.font20{ font-size:20px}
.font22{ font-size:22px}
.font24{ font-size:24px}
.font28{ font-size:28px}
.font32{ font-size:32px}
.fontbold{ font-weight:bold}
.right{ text-align:right}
.left{text-align:left}

.page{width:1350px ;margin:0 auto;}
.rightpage{width:95% ;margin:0 auto;}
aside{float:left; width:160px; background-color:#F7F7F7; margin:20px 0 20px 0; text-align:left; padding:5px 0 5px 5px; line-height:42px}
aside ul li a{font-size:16px;color:#365066}


#imgbtn div a:hover img{ outline:2px #365066 solid;}

.onError{ color:#F00}
.onSuccess{color:#314559}
#submit:hover{cursor: pointer;}
.index_submit { background-color:#575757;color:#FFF; font-size:20px; font-weight:bold; font-family:"微軟正黑體",Arial,Helvetica,sans-serif; border:2px blue none; border-left:40px solid #575757;border-right:40px solid #575757;}
.login_submit { background-color:#365066;color:#FFF; font-size:20px; font-weight:bold; font-family:"微軟正黑體",Arial,Helvetica,sans-serif; border:2px blue none; border-left:20px solid #365066;border-right:20px solid #365066;}
/* 橫幅 */
#rich_top{height:280px;text-align:center;}
#top_menu{height:36px; }
#top_menu li{display:inline; height:36px}
#top_menu li a{ float:right; margin-left:12px}
#top_menu li a:hover{color:#365066}
#bannerBG{background-position:center top; background-repeat:no-repeat; background-color:#FFF;background-size:cover; height:285px;background-image:url(../images/banner_bg.jpg); background-color:#333}

#rich_btm{background-color:#314559;}
#rich_btm a:hover{color:#e6e7e6}

.inlineblock{display:inline-block; margin: 30px 0}
.inlineblock ul li{display:inline-block}
.long_contain{ width:100%; margin:40px 0 40px 0; display:inline-block; font-size:16px; text-align:left;vertical-align:top;}
.long_contain ul li{ line-height:26px; margin:20px 0 }
.half_contain{ width:415px; margin:40px 20px 40px 20px; display:inline-block; font-size:16px; text-align:left;vertical-align:top}
.half_contain4{ width:39% ;margin:60px 0 40px 0; display:inline-block;  text-align:left;vertical-align:top}
.half_contain6{ width:60%; margin:60px 0 40px 0; display:inline-block;  text-align:left;vertical-align:top}
.half_contain ul li{ line-height:26px; margin:20px 0 }
.titleB{ line-height:32px; border-bottom:1px solid #000;}
.titleO{ line-height:32px; border-bottom:1px solid #D88E7C; }
.titleG{ line-height:32px; border-bottom:1px solid #365066; }
.pic_frame{ width:32%; padding:5px; margin-bottom:20px; float:left}
.bagpic{ height:240px; margin-bottom:25px}
.bagpicword ul li{ line-height:24px ; border-bottom:1px solid #979797 }

.emboss_frame{ width:48%; padding:5px; margin-bottom:50px; float:left}
.embosspic{ height:400px;}
.embosspicword ul li{ line-height:24px ; border-bottom:1px solid #979797 }

.p_list:hover{ background-color:#D7D7D7}
.p_list a img{ vertical-align:middle}

.img25{ width:25px; height:25px}

.WHeight40{ height:40px; line-height:40px}
.mleft10{ margin-left:10px}

.count{ width:240px; height:40px; border:1px solid #566a65;border-radius:3px; background-color:#566a65; color:#fff; line-height:40px; text-align:center;display:inline-block;}


.save{ width:150px; height:40px; border:1px solid #365066;border-radius:3px; background-color:#365066; color:#fff; line-height:40px; text-align:center; display:inline-block; }



.login{ width:120px; height:40px; border:1px solid #365066;border-radius:3px; background-color:#365066; color:#fff; line-height:40px; text-align:center; display:inline-block; }
.login:hover{cursor: pointer;}

.newid{ width:120px; height:40px; border:1px solid #D88E7C;border-radius:3px; background-color:#D88E7C; color:#fff; line-height:40px; text-align:center; display:inline-block;}

.newform{ width:120px; height:40px; border:1px solid #365066;border-radius:3px; background-color:#365066; color:#fff; line-height:40px; text-align:center; display:inline-block;}

.historyform{ width:120px; height:40px; border:1px solid #D88E7C;border-radius:3px; background-color:#D88E7C; color:#fff; line-height:40px; text-align:center; display:inline-block;}

.change{ width:120px; height:40px; border:1px solid #595757;border-radius:3px; background-color:#595757; color:#fff; line-height:40px; text-align:center; display:inline-block;}

.greenbtn{ height:36px; border:1px solid #365066;border-radius:4px; background-color:#365066; color:#fff; line-height:36px;text-align:center;display:inline-block;}
.greenbtn:hover{cursor: pointer;}
.orangebtn{ height:36px;border:1px solid #D88E7C;border-radius:4px; background-color:#D88E7C; color:#fff;  line-height:36px; text-align:center;display:inline-block;}
.orangebtn:hover{cursor: pointer;}
.graybtn{ height:36px; border:1px solid #c3c4c5;border-radius:4px; background-color:#c3c4c5; color:#fff; line-height:36px; text-align:center;display:inline-block;}
.graybtn:hover{cursor: pointer;}
.darkbtn{ height:36px; border:1px solid #595757;border-radius:4px; background-color:#595757; color:#fff; line-height:36px; text-align:center;display:inline-block;}
.darkbtn:hover{cursor: pointer;}
.redbtn{ height:36px; border:1px solid #F00;border-radius:4px; background-color:#F00; color:#fff; line-height:36px;text-align:center;display:inline-block;}
.redbtn:hover{cursor: pointer;}

.greenbtn_s{ height:28px; border:1px solid #bbd3ba;border-radius:4px; background-color:#bbd3ba; color:#fff;  text-align:center;display:inline-block;}
.greenbtn_s:hover{cursor: pointer;}
.graybtn_s{ height:28px; border:1px solid #c3c4c5;border-radius:4px; background-color:#c3c4c5; color:#fff;  text-align:center;display:inline-block;}
.graybtn_s:hover{cursor: pointer;}
.orangebtn_s{ height:28px;border:1px solid #D88E7C;border-radius:4px; background-color:#D88E7C; color:#fff;  text-align:center;display:inline-block;}
.orangebtn_s:hover{cursor: pointer;}
.redbtn_s{ height:28px;border:1px solid #dd927b;border-radius:4px; background-color:#dd927b; color:#fff;  text-align:center;display:inline-block;}
.redbtn_s:hover{cursor: pointer;}

.indexBbtn{ height:60px; border:1px solid #000;border-radius:4px; background-color:#000; color:#fff; line-height:20px; text-align:center;display:inline-block;}
.indexBbtn:hover{cursor: pointer;}

.indexGbtn{ height:60px; border:1px solid #c3c4c5;border-radius:4px; background-color:#c3c4c5; color:#fff; line-height:20px; text-align:center;display:inline-block;}
.indexBbtn:hover{cursor: pointer;}

.psection{ width:780px;margin:0 auto;}
.picmargin{margin: 0 14px 40px 14px;float: left}
.picradius{border-radius: 3px 3px 0 0 ; width: 283px;}
.picbox {
    background-color: #36506657;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #2d2d2d;
    font-size: 14px;
	width:286px;
    height:250px;    
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s , background-color 0.15s ease-in-out 0s ,color 0.15s ease-in-out 0s;
    
}

.picbox:hover {
    background-color: #365066;
    border-color: #365066;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(187, 210, 186, 0.6);
    outline: 0 none;
    color:#fff;
}

.picboxtxt{
    height: 60px;
    padding: 8px 10px;
    line-height: 39px;
    
    
}

.paperblog{line-height: 30px;color: rgba(115,115,115,1.00);}

.priceform{ border:1px solid #FFF;border-radius:2px; background-color:#D88E7C; color:#fff; text-align:center; display:inline-block;}
.priceform_g{ border:1px solid #FFF;border-radius:2px; background-color:#365066; color:#fff; text-align:center; display:inline-block;}





.form-control option{ padding:4px 12px;}
.form-control {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555555;
    display:	inline-block;
    font-size: 14px;
    height: 34px;
    line-height:26px;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    
}

.form-control:focus {
    border-color: #365066;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(187, 210, 186, 0.6);
    outline: 0 none;
}

.form-select option{ padding:4px 12px;}
.form-select {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555555;
    display:	inline-block;
    font-size: 14px;
    height: 34px;
    line-height:26px;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    
}

.form-select:focus {
    border-color: #365066;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(187, 210, 186, 0.6);
    outline: 0 none;
}


.inputHigh{ height:40px}

label {
  border-radius: 4px;
  border: 1px solid #ccc;
  margin:0 0 10px 0
}

/* hide input */
input.radio:empty {
	margin-left: -9999px;
}


/* style label */
input.radio:empty ~ label { 
	position:relative;
	float: left;
	line-height:34px;
	text-align:center;
	/* margin-top: 2em; */
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


input.radio:empty ~ label:before {
	position: absolute;
	display: none;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	width: 2.5em;
	background: #D1D3D4;
	border-radius: 2px 0 0 2px;
}


/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
	/*content:'\2714';*/
	text-indent: .9em;
	color: #C2C2C2;
}


input.radio:hover:not(:checked) ~ label {
	color: #888;
}


/* toggle on */
input.radio:checked ~ label:before {
	/* content:'\2714';*/
	text-indent: .9em;
	color: #fff;
	background-color: #566a65;
}


input.radio:checked ~ label {
	color: #bbd3ba;
	background-color:#566a65;
}

input.radio:not(:checked) ~ label {
	color: #8E8E8E;
}

/* radio focus */
input.radio:focus ~ label:before {
	box-shadow: 0 0 0 2px #999;
}


.login-dialog{
	width:100%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    z-index: 1060;
	background-color:#F7F7F7;
	border:5px solid rgba(0, 0, 0, 0.2);
	border-radius:3px}

.login-dialog ul li{ line-height:26px; margin:20px 0;font-size:16px }


.user_top{ overflow:hidden; text-align:center; width:100%; background-color:#ffffff }
.InB{ display:inline-block; vertical-align:top}
.RightCon{ text-align:left;width:85%;}
#leftmenuBG{ float:left;background-color:#595757; width:15%; }
#leftmenu .menu_head:hover{background-color:#F7F7F7;color:#365066}
.menu_head {padding: 10px 10px;	cursor: pointer;position: relative;  text-align:left; border-bottom:1px solid #566a65}
.menu_body {display:block;}
.menu_body a {display:block;color:#FFF; background-color:#979797; padding:5px 0 5px 15px;font-weight:bold;text-decoration:none; text-align:left; border-bottom:1px solid #566a65}
.menu_body a:hover {background-color:#F7F7F7;color:#365066}
.title{font-size:20px; height:40px; line-height:40px; background-color:#E7E7E7; padding:0 20px ;width:100%;}

/*dashboard css*/

.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  /* rtl:raw:
  right: 0;
  */
  bottom: 0;
  /* rtl:remove */
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 90px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

@media (max-width: 767.98px) {
  .sidebar {
    top: 2.5rem;
	bottom:auto;
  }
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #727272;
}

.sidebar .nav-link.active {
  color: #2470dc;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
  top: .25rem;
  right: 1rem;
}

.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.dropdown-menu {
	border:0px
}
.dropdown-item{
	border-bottom:1px solid #e6e7e6;
	font-size:0.9em;
	line-height:30px
}
.dropdown-item:hover{
	background-color:#bbd3ba
}
.icon-index a:hover .icon-outline {
	fill:#566a65;
}


/* 報價系統照片輪播箭頭 */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* 調整箭頭背景色 */
    width: 20px; /* 調整大小 */
    height: 20px;
}

.carousel-control-prev,
.carousel-control-next {
    top: 50%; /* 垂直置中 */
    transform: translateY(-50%);
}