/* Reset ====================================================================*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; }
/* CSS Document */
body { font-family:'Noto Sans TC', 'Gayathri',sans-serif, Microsoft JhengHei; overflow-x:hidden; margin:0; padding:0; color: #333;}
h1, h2, h3, h4, h5, h6 {font-family:'Noto Sans TC', 'Gayathri',sans-serif, Microsoft JhengHei;}
/* h1 {  font-size: 1.2em; font-weight: 400; color: #333; } */
h2 { font-size: 2.6em; font-weight: 400; color: #000; margin: 5% auto; }
h3, h4 { font-size: 1.25rem; font-weight: 400; }
h5, h6 { font-size: 1.125em; font-weight: 400 }
h1, h2, h3, h4, h5, h6 { display: block; margin: 0.5rem auto; line-height: 1em; }
p {  color: #333; line-height: 1.65em;font-weight: 400; }
a { color:#0070c9; text-decoration: none; -moz-transition: color 0.25s ease, opacity 0.25s ease; -o-transition: color 0.25s ease, opacity 0.25s ease; -webkit-transition: color 0.25s ease, opacity 0.25s ease; transition: color 0.25s ease, opacity 0.25s ease }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a img { border: none; }
/* article a { word-wrap: break-word; word-break: keep-all; } */
strong { font-weight: 700; }
/* article, section { word-wrap: break-word; word-break: keep-all; } */
input, select, textarea { margin: 1% auto; padding: 1%; font-size: .85em; line-height: 1.5em; outline: none; box-sizing: border-box;  }

/* Default ====================================================================*/
.container_wrap {margin:0;  width: 100%; display:block;}
.wrapper {width: 100%;  margin: 0 auto;   }
.wrap {width: 96%; max-width: 1360px; margin: 0 auto; display: block; }
.datatable { width:100%;}
.datatable th, .table_scroll th {color:#fff; border:2px solid #fff; background: #3779d9; text-align:center; padding:5px 10px;}
.datatable td, .table_scroll td {color: #333; border:2px solid #fff; background: #f3f5fa; text-align:center; padding:5px 10px;}
.table_scroll { overflow-x: auto; }
.table_scroll > table {min-width: 1400px;}
.mobile { display: none; }
@media only screen and (max-width: 992px) { 
.container {padding-top:0px;  width: 100%; display:block;}	
}
@media only screen and (max-width: 768px) {
.mobile { display: block; }
.pc { display: none; } 
}
/* Basic ======================================================================*/
.text-left { text-align: left !important; }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.text-nowrap { white-space: nowrap }
.text-lowercase { text-transform: lowercase }
.text-uppercase { text-transform: uppercase }
.text-capitalize { text-transform: capitalize }
.color-blue{ color: #0070c9;}
.color-red{color:#ff6440;}
.color-yellow{color:#ffc90b;}
.title {  margin-bottom: 50px; position: relative; font-weight: 400; font-size:1.75rem;  text-align: center; }
.title:after { content: ''; display: block;  width: 100px;  height: 2px; background: #2b65a3;  position: absolute;  bottom: -10px; left: calc(50% - 50px); }
.title span { color: #3e79ea; }
.subtitle {   font-size: 18px; font-weight: normal; display: block; text-align: left; color: #062033; margin: 0px; }
/* Banner =====================================================================
.banner { position: relative; }
.banner img { width: 100%; }
.slogan { display: flex; justify-content: center; align-items:center; flex-direction:column; position: absolute; width: 60%;  right: 10%; padding: 20px; max-width: 800px;height: 100%; z-index: 99; }
.slogan h2{margin: 0px; font-size:1.15rem; }
@media only screen and (max-width: 480px) { 
.slogan{width: 80%;} 	
.slogan h2{ font-size:1.2rem;   }
	
}*/

/* Banner =====================================================================*/
.banner { position: relative; }
.banner img { width: 100%; }
.slogan { display: flex; justify-content: center; align-items:flex-start; flex-direction:column; position: absolute; width: 50%;  padding: 20px; max-width:600px;height: 100%; z-index: 99; }
.slogan h1 {  margin: 0; font-size: 2.5rem; font-weight:700; text-align: center; color: #FFF;}
/*.slogan h1 {  margin: 0; font-size: 2.5rem; font-weight: 700; text-align: center;  letter-spacing:1px; background-image: linear-gradient( 135deg, #52E5E7 10%, #130CB7 100%);  -webkit-background-clip: text; -webkit-text-fill-color: transparent;}*/
.slogan h1::after { content: ""; display: block; width: 30%; height: 2px; margin: 10px 0; background-image: linear-gradient( 135deg, #ffbb00 10%, #fd7210 100%);}

.slogan h2{margin: 10px 0; font-size:0.938rem;  line-height: 1.5rem; color: #fff; }
@media only screen and (max-width: 480px) { 
.slogan{width: 80%;} 	
.slogan h1 { padding-top: 20px;font-size: 1.75rem; }
.slogan h2{ font-size:1.2rem;   }
	
}


/* description =====================================================================*/
.description { display: block; margin:2% auto; padding: 0; width:60%; text-align: left;}
.description h2 { margin: 2% auto 5% auto; font-size: 1.5rem;   text-align:center; font-weight: 700; }
.description h3 { margin: 2% auto 5% auto; font-size: 1.5rem;   text-align:center; font-weight: 700; }
.description p { font-size:.9rem; color:#888; font-weight: 400; line-height: 1.65em; margin: 0; }
@media (max-width: 992px) {
.description { width:90%; }
	
}
/*=========breadcrumbs=============================================*/
.heading-inner{ width: 100%;  display: block;  margin:0px auto; box-shadow: 0px 6px 13px -6px rgba(0,0,0,0.08);}
.breadcrumbs-box {  width:100%;margin:2px auto; padding:0px 20px; display: flex; align-items: flex-start; justify-content: flex-end;  }
.breadcrumbs{  display: flex;  justify-content: flex-start;  width:98%; max-width: 1200px;padding: 10px 0px; margin: auto;   }
.breadcrumbs li{ font-size: 0.75rem; color:#856924;  display: flex; line-height: 1; font-weight: 400;}
.breadcrumbs li:after { content: '>';  color:#8a8987; margin: 0 10px; display: block;}
.breadcrumbs li:last-child:after {display: none;}
.breadcrumbs li a, .breadcrumbs li a:visited { max-width: 95px; color: #ccc; overflow: hidden; text-overflow: ellipsis; white-space: pre;}
.breadcrumbs li a:hover {color: #fdbe0f;}
.breadcrumbs li p{ font-size: 0.95rem; }
@media (max-width:768px) {
 .breadcrumbs-box{ justify-content: center; }
.description{  margin:0px auto 0 auto;  }
.block-category{width: 100%;}	
}
/* page =======================================================================*/
.page { width: 100%; max-width: 1160px; margin: 0px auto;  display:block; text-align: center; }
.page ol li { width: 34px; height: 34px; display: inline-block;border-radius: 50%; border: 1px solid #ddd; position: relative; line-height: 32px; text-align: center; list-style-type: none; margin: 5% auto 2% 5px; background-color:#eee; font-weight: 400;}
.page ol li:hover { background:#0099FF;}
.page ol li.current a { background: #000; color: #fff; border-radius: 50%;}
.page ol li a { border: none; color: #000; display: block; padding: 0; line-height: 32px; height: 100%; text-decoration: none; }
.page ol li a:hover, .page ol li a:focus { background: none; color: #000; }
.page li.prev, .page li.next,.page li.prev2, .page li.next2{  background: none; border: none; cursor: pointer; }
.page li.prev:before, .page li.next:before,.page li.prev2:before, .page li.next2:before { content: '';   font-family: 'FontAwesome'; display: block; color: #000; font-size: 20px; }
.page li.prev:before { content: '\f104'; }
.page li.next:before { content: '\f105'; }
.page li.prev2:before { content: '\f100'; }
.page li.next2:before { content: '\f101'; }
/*ul style======================================================================*/
.dot{ width: auto; height: auto; border-radius: 0; background-color: transparent; display: block; margin: 1% auto; -webkit-animation: none;}
.dot li{ width: 100%; display: block; padding:1px 0 10px 20px; font-size:1rem; line-height:1.4em; font-weight:400; color: #475b66;  background:url(../images/icon/dot.png) no-repeat left 8px; background-size:10px;}
ul.arrow{ width: 100%; display: block; margin: 1.5% auto; }
ul.arrow li{ width: 100%; display: block; padding:1px 0 10px 15px; font-size:15px; line-height:1.4em; font-weight:200; }
/* Button ======================================================================*/
.animate, .btn, .btn-border:before, .btn-border:after { -webkit-transition: all 0.3s; transition: all 0.3s; }
.btn { display: inline-block; line-height:1.35em; margin:9px 4px 8px 4px; padding:8px 15px; font-size: 15px; position: relative; opacity: .999; border-radius: 3px; letter-spacing: 0;}
.btn i{ margin-right:5px;}

.btn-more, .btn-more:visited { color: #fff;  padding:13px 30px 14px 30px!important; font-size: 1.15rem;   font-weight: 400; letter-spacing: 0;}
.btn-more:hover { color: #fdbe0f;   }
/*.btn-more:after { content: "";  position: absolute; width: 10px; height: 10px; border-top: 1px solid #fff; border-left: 1px solid #fff; vertical-align: middle; transform: rotate(135deg); display: block; right: 22px;  top: 0; bottom: 0;  margin: auto; }
*/.btn-more:before { font-size: 1.5rem;  font-family: FontAwesome; content: '\f138'; position: absolute; left: 0px;   color: #fff;}

.btn-readmore {color: #333; font-size: 0.875rem; }
a.btn-readmore { margin-top: 16px; padding:5px 15px;   color: #fff;  border:solid 1px #fff;  border-radius:15px; }
a.btn-readmore:hover{ background: #fdbe0f; color: #fff; border:solid 1px #fdbe0f;}

.btn-idxnews { padding: 5px 40px; color: #3e79ea; background-color: transparent; border: solid 1px #3e79ea; border-radius:5px;  font-size: 13px; transition: 0.2s;}
.btn-idxnews:hover {border-color: #3e79ea;  color: #fff; 	transition: 0.3s;}

.btn-submit {  color: #fff; background: #D95225; padding: 10px 60px; }
.btn-submit:hover { box-shadow: 0 0 10px #333 inset; }

.btn-reset {  color: #fff; background: #6B6B6B; padding: 10px 60px; }
.btn-reset:hover { box-shadow: 0 0 10px #333 inset; }

.btn-delete { color: #fff; font-size: 15px; line-height: 15px; background: #7A7A7A; padding: 9px 35px; border-radius: 50px; }
.btn-delete:hover { background: #333; box-shadow: 0 0 10px #000 inset; }

.btn-inquiry {  display: inline-block; width: 75px; text-align: center; color: #fff; font-size: 15px; line-height: 15px; background: #D95225; padding: 7px 20px 7px 15px; border-radius: 50px; }
.btn-inquiry:before { content: '\f075'; display: inline-block; font-family: FontAwesome; font-size: 12px; padding: 1px 4px; margin-right: 5px; }
.btn-inquiry:hover { background: #666; box-shadow: 0 0 5px #333 inset; }

.btn-back {  display: inline-block;  text-align: center; color: #fff; font-size: 15px;  background: #4C4C4C; padding: 7px 20px; border-radius:5px; }
.btn-back:before { content: '\f104'; font-family: FontAwesome; font-size: 12px; border-radius: 100%; border: 1px solid #fff; padding: 1px 4px; margin-right: 5px; }
.btn-back:hover { background: #666; box-shadow: 0 0 5px #333 inset; }

.btn-newsback { color: #fff; font-size: 15px; line-height: 15px; background: #D95225; padding: 7px 30px; border-radius: 50px; }
.btn-newsback:before { content: '\f104'; font-family: FontAwesome; font-size: 12px; border-radius: 100%; border: 1px solid #fff; padding: 1px 4px; margin-right: 8px; }
.btn-newsback:hover { background: #666; box-shadow: 0 0 5px #333 inset; }


 

.btn-add { color: #fff;  font-weight: 400; background-color: #0070c9;  background: linear-gradient(#42a1ec,#0070c9); border:solid 1px #07c ;}
.btn-add:hover {color: #fff;  background: #42a1ec;   background: linear-gradient(#0070c9,#42a1ec); box-shadow: 0px 1px 6px #42a1ec; }

.btn-border { background-color: transparent; border: 2px solid  #999; color: #999; font-weight: 500; }
.btn-border:before, .btn-border:after { content: ''; border-style: solid; border-color: #50a1ff; color: #50a1ff; position: absolute; z-index: 5; border-radius: 3px; box-sizing: content-box; }
.btn-border:before { width: 0; height: 100%; border-width: 2px 0 2px 0; top: -2px; left: 0; -webkit-transition-delay: 0.05s; transition-delay: 0.05s; }
.btn-border:after { width: 100%; height: 0; border-width: 0 2px 0 2px; top: 0; left: -2px; }
.btn-border:hover { color: #50a1ff; background-color: transparent; box-shadow: 0px 1px 6px #42a1ec;}
.btn-border:hover:before { width: 100%; }
.btn-border:hover:after { height: 100%; }

/* icon ======================================================================*/
.nav-basic{ background: url("../images/icon/nav-1.svg") no-repeat center 5px;  }
.nav-machine{ background: url("../images/icon/nav-2.svg") no-repeat center 5px;}
.nav-chart{ background: url("../images/icon/nav-3.svg") no-repeat center 5px;}
.nav-check{ background: url("../images/icon/nav-4.svg") no-repeat center 5px;}
.nav-dr{ background: url("../images/icon/nav-5.svg") no-repeat center 5px;}
.nav-hand{ background: url("../images/icon/nav-6.svg") no-repeat center 5px;}
.nav-notice{ background: url("../images/icon/nav-7.svg") no-repeat center 5px;}
.nav-faq{ background: url("../images/icon/nav-8.svg") no-repeat center 5px;}
.nav-eye{ background: url("../images/icon/nav-9.svg") no-repeat center 5px;}
.nav-eyeball{ background: url("../images/icon/nav-10.svg") no-repeat center 5px;}
.nav-alert{ background: url("../images/icon/nav-11.svg") no-repeat center 5px;}
.nav-invisible{ background: url("../images/icon/nav-12.svg") no-repeat center 5px;}
.nav-search{ background: url("../images/icon/nav-13.svg") no-repeat center 5px;}
.nav-ortho-K{ background: url("../images/icon/nav-14.svg") no-repeat center 5px;}
.nav-question{ background: url("../images/icon/nav-15.svg") no-repeat center 5px;}
.nav-time{ background: url("../images/icon/nav-16.svg") no-repeat center 5px;}
.nav-LBV{ background: url("../images/icon/nav-17.svg") no-repeat center 5px;}
.nav-matter{ background: url("../images/icon/nav-18.svg") no-repeat center 5px;}
.nav-laser{ background: url("../images/icon/nav-19.svg") no-repeat center 5px;}

/* width size ======================================================================*/
.v-offer{ margin-top:1%;}
.block{ display: block; margin: auto; }
.row { margin-right: -15px; margin-left: -15px; }
.row .columns-padding { padding: 0 !important; }
.columns { display: inline-block; vertical-align: top; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 { width:100%; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.txtcols { -webkit-column-count: 1; -moz-column-count: 1;  column-count: 1; column-gap: 80px;  }

/* form style ======================================================================*/
select, input, option, button, textarea, input[type="radio"], input[type="checkbox"] { width: auto; min-height: 1.35em; color: #000; background: transparent; border: 1px solid #85776a; border-radius:0px;  font-family: Noto Sans TC, Microsoft JhengHei, sans-serif, Verdana,cursive}
form { margin: auto; display: block; }
input::placeholder {color:#afbabf;}
input[type="radio"], input[type="checkbox"] { display: none; }
input[type="radio"]+label, input[type="checkbox"]+label { box-sizing: border-box; padding: 0px 10px 0px 2%; display: inline-block; border: 1px solid transparent; cursor: pointer; vertical-align: middle; border-radius: 4px; margin-bottom: 1%; background-color: rgba(126,144,174,.3); color: #000; -moz-transition: color 0.2s ease, background-color 0.2s ease; -o-transition: color 0.2s ease, background-color 0.2s ease; -webkit-transition: color 0.2s ease, background-color 0.2s ease; transition: color 0.2s ease, background-color 0.2s ease; }
input[type="radio"]+label:before, input[type="checkbox"]+label:before { height: 22px; width: 22px; margin: -1px 7px 0 0; content: ""; display: inline-block; vertical-align: middle; border: 1px solid #afbabf; background-color: #fff; border-radius: 50%; -moz-transition: border-color 0.2s ease, background-color 0.2s ease; -o-transition: border-color 0.2s ease, background-color 0.2s ease; -webkit-transition: border-color 0.2s ease, background-color 0.2s ease; transition: border-color 0.2s ease, background-color 0.2s ease; }
input[type="radio"]:nth-of-type(2n+1)+label, input[type="checkbox"]:nth-of-type(2n+1)+label { margin-right: 4%; color: #fff; }
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label { border: 1px solid transparent; color: #fff; background-color: #0070c9; }
input[type="checkbox"]:checked+label:before { background: #fff url("../images/icon/icon.svg") no-repeat; background-position: -244px -56px }
input[type="radio"]:checked+label:before { background: #fff url("../images/icon/icon.svg") no-repeat; background-position: -104px -60px }

@media (min-width:800px) {
input[type="radio"]+label, input[type="checkbox"]+label { background-color: rgba(126,144,174,0); font-size:.95em; font-weight:400; color:#fff;  }
input[type="radio"]+label:before, input[type="checkbox"]+label:before { height: 22px; width: 22px; border: 1px solid #ccc;  color:#fff;  }
input[type="radio"]:checked+label, input[type="checkbox"]:checked+label { color:#fff; background-color: transparent; }
input[type="radio"]:hover+label, input[type="checkbox"]:hover+label { color: #a48f4e }
input[type="radio"]:checked+label:before, input[type="checkbox"]:checked+label:before { border-color: #8d8383 }
.row { margin-right: -15px; margin-left: -15px; }
.row .columns-padding { padding: 0 !important; }
.columns { display: inline-block; vertical-align: top; }
.col-1 { width: 8.333333333%; }
.col-2 { width: 16.666666667%; }
.col-3 { width: 24%; }
.col-4 { width: 33.333333333%; }
.col-5 { width: 41.666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333333%; }
.col-8 { width: 66.666666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.333333333%; }
.col-11 { width: 91.666666667%; }
.col-12 { width: 100%!important; }
.txtcols { -webkit-column-count: 2; -moz-column-count: 2;  column-count: 2; column-gap: 80px; column-rule: 1px solid #e4e8e7; }	
.px-2 { padding:4em 2em; }	
}


@media only screen and (max-width: 425px) { 
 .btn-submit, .btn-reset { padding: 10px 30px; } 
}

.change_btn{cursor: pointer;text-align: right;
    padding: 10px;
    border-radius: 10px;    min-width: 166px;background: #cc6601;
    color: #ffffff;
    box-shadow: inset 0px 3px #dddddd;margin: 5px 10px;}

    .change_btn:hover{background: #bb8200;}