/* 共用 */
.title { color: #fff; font-size:1.75rem; background:url("./images/banner_in-001.jpg") repeat-x center center ;*/ color:#fff; padding:70px 0px; border-radius: 10px;}
.mh6,.mhpgn { height:60px; }
.mh4 { height:40px; }
.nodata { text-align: center; padding:40px 0px; color:#919191; font-size:1.5rem; }
.nodata .emotion { font-size:6rem; padding-bottom:60px; }

.topbnr { padding-bottom:20px; }


/*  內頁上方標題圖片 */
#DATA_LIST .about .title{ color:#fff; }
#DATA_SERVICE .about .title{background:url("./images/service-bg.jpg") repeat-x center center ; color:#fff;padding:70px 0px; }
.product .title{  background:url("./images/bg_bbnr-0-0.png") repeat-x center center ; color:#fff;padding:70px 0px; }
.news .title {  background:url("./images/news-bg.jpg") repeat-x center center ; color:#fff;padding:70px 0px; }
.contactus .title { padding:70px 0px;  color:#ffffff; font-weight: 500;text-shadow: -1px -1px 3px #000000;}
.contactus .title { background:url(./images/conact-bg03.jpg) repeat-x right center;background-size: cover; }
/* 分頁 */

body#PRODUCT_LIST,body#NEWS_LIST,body#PRODUCT_DETAIL{background: url(./images/about-bg.png) no-repeat top 100px center;background-size: contain;}
body#DATA_LIST{background: url(./images/map.jpg) no-repeat top 100px center;background-size: contain;}
body#DATA_SERVICE,body#CONTACT_LIST{background: url(./images/service-bg.png) no-repeat top 10px center;background-color: #f4f8fb;background-attachment: fixed;}




.pgn .con { display: inline; position: relative; }
.pgn .page { display:inline-block; width:32px; height:32px; border-radius:50px; padding:5px 0px; font-family:Helvetica; }
.pgn .page a { color:#474747; }
.pgn .pbtn {  width:32px; height:32px; border-radius:50px; padding:9px 0px; background-color:#919191; color:#ffffff; font-size:0.875rem; border:none; }
.pgn .active { background-color:#00507d; color:#ffffff; font-weight: bold; }
.pgn .pbtn.nopage { background-color: #c6c6c6; }
.pgn .larr { position: relative; left:-60px; } 
.pgn .rarr { position: relative; right:-60px; }
.pgn .pbtn:not(.nopage):hover { background-color: #00507d; color:#5bade1; }

/* form */
form { text-align: left; }
form label { color:#00507d; }
form label .import { color:#cd5348; }
form input:not(.securityInput):not(.noitem):not(.search),form textarea,form select { width:100%; background-color:#fff; border:none; padding:8px 10px; margin-bottom:25px; color:#000; border: solid 1px #a2caeaef; }
form textarea { resize:none; height:130px; }
form .security { margin-bottom:25px; }
form .change { height:100%; border:none; background-color: transparent; color:#5bade1; white-space: nowrap; }
form .change:hover { color: #00507d; }
form .security img { height:42px; }
form .security .securityInput { width:100%; background-color:#fff; border:none; padding:8px 10px; border: solid 1px #a2caeaef; }

input.send,
button.send { width:100%; border:none; border-radius: 5px; background-color:#1294c6; color:#ffffff; padding:10px 0px; }
button.send:hover {background-color: #00507d;color: #fff;cursor: pointer;box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 4px 0px;transition: all .3s; }
button.back { float:right; padding:10px 20px;  color:#ffffff; border-radius:5px; width:160px;transition: all 0.5s 0s ease;background-color: #1294c6; border: 0;}
button.back:hover { background-color: #00507d;color: #fff;cursor: pointer;box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 4px 0px;transition: all .3s; }
button.back i { font-size:1.5rem; float:left; } 

/* 公版 標題描述 */
.publicArea { padding:0px; margin:0px 0px 60px 0px;  }
.publicArea .subtitle { text-align:left; color:#474747; }

/* icon */
.plink .ib { display: flex; justify-content: space-between; }
.plink .icon { display:flex; justify-content: flex-start; align-items:center; padding:3px 0px; }
.plink .icon.first { margin-bottom:40px; }
.plink .icon .pic { display: inline-block; width:32px; height:32px;  color:#444444; text-align:center; padding:8px 0px; border-radius: 50px; margin-right:10px;border: solid 1px #e9e9e9;transition: all 0.5s 0s ease;}
.plink .icon .pic:hover { background-color: #00507d;color: #ffffff;border: solid 1px #00507d;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.plink .icon div { height:32px; width:32px; margin-right:5px; display:inline-block; }

.plink .icon .lineImg {background: url(./images/line-b.png) no-repeat center center;
    background-size: 16px;background-color: #ffffff; transition: all 0.5s 0s ease;  }


.plink .icon .lineImg:hover {background: url(./images/ico-line.png) no-repeat center center;
    background-size: 16px;background-color: #00507d;color: #ffffff;border: solid 1px #00507d;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }


.contactus .plink .icon .pic { margin:10px 0px; margin-right:10px; }
/* .plink .back { float:right; padding:10px 20px; background-color:#8a7457; color:#ffffff; border-radius:5px; width:160px; border:none; } */
/* .plink .back .txt { float:left; } */
/* .plink .back:hover { background-color:#bd9f77; } */
/* .plink .back i { font-size:1.5rem; float:left; } */


.mtop { height:148px; }
.bc .back { float:left; padding:20px 0px; font-size:0.9rem; }
.bc .back a { color:#393939; }
.bc .breadcrumb { background-color:transparent; justify-content: flex-end; padding:20px 0px; margin:0px; }
.bc .breadcrumb li { color:#474747; font-size:0.9rem; }
.bc .breadcrumb li::before { color:#cacaca; }
.bc .breadcrumb a { color:#00507d; }


.classname { display:flex; flex-direction: row; justify-content: center; }
.classname.row { margin-left:0px; margin-right:0px; }
.classname .cls { padding:20px 5px; }
.classname a { color: #000000;text-decoration: none;padding-bottom: 3px;padding-top: 3px;overflow: hidden;transition: all 0.2s 0s ease; }
.classname a:hover { color:#00507d;border-bottom: solid 2px #00507d; }
.classname select,
.classname i { display:none; }


.product .list .pd { margin:25px 0px; background-color:#fff;/*box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;*/
    padding: 10px 15px;border-right-style: solid;border-width: 1px;border-color: #e9e9e9; }
.product .list .pd .des .pdname { padding:15px 0px; font-size:1.125rem; color:#393939; }
.product .list .pd .des a { text-decoration: none; }
.product .list .pd .des a:hover .pdname { color: #56bdff; }
.product .list .pd a { display: flex; align-items:center; overflow: hidden; }
.product .list .pd a img { transition: all .2s ease-out; }
.product .list .pd a:hover img { transform: scale(1.1);  }


/* ====== product_des ====== */
.pdes { padding:0px 0px 40px 0px; }
.pdes .content { display:flex; align-items:flex-start;  }
.pdes .content .inf { border: solid 1px #f3f3f3; border-radius: 8px; text-align: left; flex:1; margin-left:15px; background-color:#fff; }
.pdes .content .inf .i_cont { margin:30px; }
.pdes .content .inf .name { font-size:1.875rem; padding:0px 0px 16px 0px; color:#00507d; }
.pdes .content .inf .buyform button { width:100%; border:none; background-color: #1294c6; padding:10px 0px; border-radius: 5px; color:#fff; margin-top:40px; }
.pdes .content .inf .buyform button:hover { background-color:#00507d; color:#fff; }
.pdes .content .inf .buyform .dl_pdf { display:inline-block; width:100%; border:none; background-color: #1294c6; padding:10px 0px; border-radius: 5px; color:#fff; margin-top:20px; text-align:center; text-decoration:none; }
.pdes .content .inf .buyform .dl_pdf:hover { background-color:#00507d; color:#fff; }

.pdes .content .inf .buyform .row select { margin-bottom:20px; }
.pdes .content .inf .buyform select { width:100%; margin:0px; padding:10px; border:1px solid #c6c6c6; color:#474747; }
.pdes .content .inf .f_btn { display:flex; justify-content: space-between; margin:10px 0px;  flex-wrap: wrap; }
.pdes .content .inf .buyform .f_btn .s_quantity { width:28.5%; padding:10px 5px; border:1px solid #c6c6c6; }
.pdes .content .inf .buyform .f_btn .addcar { width:37.5%;  margin:0px; border-radius: 5px; order:1; display:flex; justify-content: center; align-items: center; }
.pdes .content .inf .buyform .f_btn .item { border:none; background-color: #876343; color:#ffffff; }
.pdes .content .inf .buyform .f_btn .item:hover { background-color: #bd9f77; }
.pdes .content .inf .buyform .f_btn .noitem { color:#474747; background-color:#e2e2e2;  }
/* .pdes .content .inf .buyform .f_btn .sellout { width:50%; border:none; background-color: #876343; color:#ffffff; margin:5px 0px; border-radius: 5px; } */
.pdes .content .inf .buyform .f_btn .follow { width:25%; border:none; background-color: #bd9f77; color:#ffffff; margin:0px; border-radius: 5px; order:2; }
.pdes .content .inf .buyform .f_btn .follow:hover { background-color: #876343; }
.pdes .content .inf .des { padding-top:20px; }

.pdes .content .showimg { padding-left:0px; margin-right:15px; width:calc(50% - 15px); }
/* .pdes .content .showimg .b_img { background: url("./images/img_product1.jpg") no-repeat top center; background-size:cover; height:520px; } */
/* .pdes .content .showimg .pimg { display: flex; justify-content: flex-start; margin-top:30px;  } */
/* .pdes .content .showimg .pimg img { width:auto; height:65px; margin-right:30px; } */

.pdetail .content { margin-bottom:30px; padding:30px; background-color: #ffffff;border: solid 1px #f3f3f3;
    border-radius: 8px; }
.pdetail .content .tit { font-size:1.25rem; color:#374955;padding:10px 0px; margin-bottom:30px;background-color: #dee2e6 ;border-top: 3px solid #374955; }
/* .pdetail .content .img { height:250px; } */
.pdetail .content .des { text-align: left; padding:10px 0px; }

/* ====== news ====== */
.news { padding:0px 0px 40px 0px; }
.news .new { margin-top:40px; padding:30px; text-align: left; display:flex; background-color:#fff;border-radius: .5em;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; }
.news .new .nc { border-right:1px solid #c6c6c6; flex:4; padding-right:60px; }
.news .new .nc .newtitle { color:#00507d; font-size:1.5rem; }
.news .new .nc .date { color:#ababab; margin-top:5px; margin-bottom:20px; font-size:0.8rem; font-family: Arial, Helvetica, sans-serif; }
.news .new .nc .content { color:#474747; line-height: 23px; word-break:break-all; }
/* .news .new .nc .content:after { content:'...'; text-align:right; position: absolute; bottom:0; right:0; width:10%; height:1.8em; background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1) 50%); } */
.news .new .continue { color:#00507d; flex:1; display:flex; justify-content: center; align-items:center; position: relative; }
.news .new .continue .arrow { position: absolute; right:0; top:50%; transform: translate(0,-50%); font-size:1.3rem; }

/* ====== news_content ====== */
.newscont { text-align: left; }
.newscont .date { color:#ababab; margin:5px 0px; font-size:0.8rem; font-family: Arial, Helvetica, sans-serif; }
.newscont .newtitle { color:#00507d; font-size:1.5rem; padding-bottom:30px; border-bottom:1px solid #c6c6c6; }
.newscont img { margin-top:30px; }
/* .newscont .img { height:360px; background: url("./images/home_banner_4a.jpg") no-repeat center center; background-size:cover; margin:30px 0px; } */
.newscont .content { margin:40px 0px; color:#303030; word-break:break-all; }

/* ====== about ====== */
/* .about { padding:30px; border:1px solid #f7f0e7; margin:40px 0px; } */
/* .about .title { padding-bottom:30px; border-bottom:1px solid #f7f0e7; } */
.about img { margin-top:20px; }
/* .about .img { height:390px; background: url("./images/home_banner_4a.jpg") no-repeat center center; background-size:cover; margin:30px 0px; } */
.about .content { text-align: left; margin-top:40px; }

/* ====== contactus ====== */


.contactus .content { display:flex; margin-top:30px; text-align:left; flex-direction: row-reverse; }
.contactus .content > div { flex:1; }
.contactus .inf { padding-right:40px; }
.contactus .inf .company { font-size: 1.25rem; border-left: 6px solid #00507d; padding:0px 10px; color:#00507d; }
.contactus .inf .pro { margin-top:20px; }
.contactus .inf .key { color:#1294c6; vertical-align: top; }
.contactus .inf .value { color:#474747; }
.contactus .inf .addr { display: inline-block; }
.contactus .inf .addr .gm a { color:#00507d; text-decoration: underline; font-size:0.9rem; }
.contactus .inf .addr .gm a:hover { color:#cd5348; }
.contactus .inf .follow { margin-top:30px; padding-top:20px; border-top:1px dotted #c6c6c6; }
.contactus .inf .follow .key { margin-bottom:10px; }
.contactus .contform { padding-left:20px; }

/* ====== ask ====== */
.ask .fmdes { color:#474747; padding:20px 0px; }
.ask form { max-width:730px; margin:0 auto; }

/* ====== dl ====== */
.dl a:hover { text-decoration: none; }
.dl a:hover .file { outline:1px solid #3ac9d9;/*outline: 2px solid #398b9f;*/ }
.dl a:hover .file .tit { color:#3ac9d9; }
.dl a:hover .bd { display: block; }
.dl .file { margin-top:40px; padding:30px; display: flex; position:relative; background-color: #ffffff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.dl .file .fl { height:120px; overflow:hidden; flex:0 1 120px; }
.dl .file .fl img { width:auto; height:120px; }
.dl .file .fr { padding-top:20px; padding-left:30px; flex:0 1 calc(100% - 120px); }
.dl .file .fr .tit { color:#262626; font-size:1.5rem; word-break:break-all; text-align:left; }
.dl .file .fr .size { color:#919191; font-size:0.875rem; text-align: left; }
.dl .bd { display:none; position: absolute; top:0px; bottom:0px; left:0px; right:0px; border:2px solid #3ac9d9; }

/* select 改變按鈕圖示 */
select {
    background: url("./images/arrow.png") no-repeat center center;
    background-position:calc(100% - 20px) 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
}
/* ie remove arrow */
select::-ms-expand {
    display: none;
}

/* placeholder color */
::-webkit-input-placeholder{ color:#777777; }
/* ::-moz-placeholder { color:#777777; } */
/* ::-ms-input-placeholder{ color:#777777; } */


@media (max-width:1198.98px){
    .mtop { height:68px; }
    .publicArea {box-shadow: rgba(17, 12, 46, 0.0) 0px 5px 20px 0px;}
   /*.bc .container{ display: flex;justify-content: center;} */
 .plink .clearfix { display: flex;}
 button.back { width:105px;padding: 8px 15px;margin-inline-start: auto;}
.bc .back{display: none;}
    
}

@media (max-width:1198.98px) and (min-width:992px){
    /* ====== product_des ====== */
    select { background-position:calc(100% - 10px) 50%; }
    /* .pdes .content .inf .buyform { font-size:0.8rem; } */
    .pdes .content .showimg .b_img { height:430px; }
}

@media (min-width:768px) and (max-width:991.98px){


    /* ====== product_des ====== */
    select { background-position:calc(100% - 10px) 50%; }
    .pdes .content .showimg .b_img { height:300px; }
    .pdes .content .inf .buyform .f_btn .follow { padding:0px; }

    /* ====== contactus ====== */
    /* .contactus .inf .pro span { display:block; } */
    /* .contactus .inf .addr,
    .contactus .inf .online { font-size:0.8rem; } */
    /* .contactus .inf .plink .icon .pic { margin-right:3px; } */
    .contactus .contform .security input { width:100%; }
    /* .contactus .contform .security img { margin:15px 0px; margin-right:20px; } */
    /* .contactus .contform .security button { font-size:0.8rem; padding:0px; } */

}

@media (max-width:991.98px){
    .contactus .security .securityInput { margin-bottom:20px; }
    
    /* ====== product_des ====== */
    .pdes .content .inf .buyform .f_btn .s_quantity,
    .pdes .content .inf .buyform .f_btn .follow { width:calc(50% - 9px); }
    .pdes .content .inf .buyform .f_btn .addcar { width:100%; order:3; padding:10px 0px; margin-top:20px; }

    /* ====== contactus ====== */
    .contactus .inf .pro span { display:block; }
}

@media (min-width:768px){
    .pdes .md_top,
    .pgn .md_top { display:none; }

}



@media (max-width:767.98px){
     .product .list .pd .des .pdname{font-size: 1rem;}
    .pdes .content .inf .name{font-size: 1.5rem;}
    .product .title,.news .title,#DATA_SERVICE .about .title,#DATA_LIST .about .title,.contactus .title{padding: 40px 0px;}
   .product .list .pd{width: 50%;}
    .about img { margin-top: 0px; }
    .topbnr { padding-top:40px; }
    .title { font-size:1.25rem;padding: 12px 0px; }

    .publicArea { padding:15px; }

    .bc .breadcrumb { display: none; }

    /* form */
    form .security img { width:100%; margin-right:5px; }

    /* icon */
    .plink .icon { /*margin-bottom:20px;*/ display: flex; justify-content: center; flex-wrap: wrap; }
    /* breadcrumb */
    .bc .back { font-size:1rem; }

    .newscont,.about,.contactus { margin-bottom:60px; }
    .product , .news { padding-top:20px; }
    /* ====== product_list ====== */
    .mtop { height:60px; }
    
    /* ====== product_list ====== */    
    .product { padding:20px 0 0 0; }
    .product .classname div { display:none; }
    .product .classname select { display:block; width:100%; border:none; padding:10px; font-size:1.125rem; 
     color:#393939;border-bottom: solid 2px #73797f; }

    .pgn .larr,.pgn .rarr { position: static; }
    .pgn .con { display:flex; justify-content: space-between; }
    .pgn .pbtn { width:32px; height:32px; font-size:0.875rem; padding:9px 0px; margin:0px; }
    .pgn .active { background-color: transparent;  color:#474747; font-weight: bold; width:auto; font-size:1rem; height:32px; font-family:"Microsoft JhengHei";  }
    .pgn .txt { padding:0px 10px; }
    .pgn .page:not(.active){ display:none; }

    /* ====== product_des ====== */
    .pdes { padding: 0px; }
    .pdes .content { display:block; padding-top:20px; }
    .pdes .content .inf,
    .pdes .content .showimg { margin:0px; margin-bottom:40px; width:100%; }
    .pdes .content .inf .buyform .f_btn .addcar { padding:10px 0px; }

    /* ====== news ====== */
    .news { margin-bottom:40px; }
    .news .new { display:block; }
    .news .new .nc { padding-right:0px; border-right:none; border-bottom:1px solid #c6c6c6; }
    
    .news .new .nc .content { line-height: 23px; margin-bottom:30px; }
    .news .new .continue { justify-content: flex-end; padding-top: 30px; text-decoration: none; }
    .news .new .continue .arrow { position:static; transform:none; padding-left:20px; }

    /* ====== news_content ====== */
    .newscont .date { font-size:0.9rem; margin-bottom:20px; }
    .newscont .newtitle { font-size:1.5rem; }
    .newscont .img { height:375px; background:url("./images/home_banner_4b.jpg") no-repeat center center; background-size:cover; }
    .newscont .content { font-size:1rem; }

    /* ====== contactus ====== */
    .contactus .content { display:block; }
    .contactus .inf,.contactus .contform { padding:0px; }
    .contactus .inf .pro { margin-top:20px; }
    .contactus .contform .send { margin-bottom:60px; }
    
    /* ====== ask ====== */
    .ask .security .securityInput { margin-bottom:20px; }

}