/* 設定CSS變數 */
:root{    
    --pri01:#0C3D44; /*主色1深綠*/
    --pri02:#fac035; /*主色2綠*/
    --pri03:#887D96; /*Footer*/
    
    --fontB:25px;
    --fontM1:20px;
    --fontM2:16px;
    --fontS:14px;
    --fontTitle:50px;
    
   /*  --gradient01: linear-gradient(0deg, var(--pri01) 0%, var(--pri02) 50%, var(--pri03) 100%); logo 漸層 */
    
}
/* 專案CSS */

/* =================== top menu =================== */
header{background-color:#000; width:100%; top:0; left:0; position:relative;}
header::after{content:""; width:100%; height:30px; background-image:url(../Images/menuline.svg); background-size:100%; background-position:center top; background-repeat:no-repeat; position:absolute; bottom:-30px; z-index:1;}

.index haeader .menu{max-width:1400px; width:90%; margin:0 auto;}
.index.open{min-height:100vh; position:relative;}

.logo.m{display:none;}
.menu{max-width:1400px; margin:0 auto; display:flex; justify-content: space-between; align-items: center; padding:10px 20px; z-index:5; position: relative; }
.menu a.logo{width:100px; height:50px; background-image:url(../images/LOGO.svg) ;background-position:center; background-repeat:no-repeat; background-size:contain;}
.menu nav{vertical-align:middle; color:#858585; display:flex; flex-direction:row; align-items:center;}
.menu nav a{font-size:var(--fontM1); color:#FFF; position:relative; overflow:hidden; vertical-align:middle; margin:0 10px; padding:10px 5px;}
.menu nav a:hover{color:var(--pri02);}

.menu nav dl{display:inline-block; vertical-align:top;}
.menu nav dl dd{ display:none; position:absolute; z-index:1; padding: 10px 0 20px; border-radius: 0 0 10px 10px; background-color: rgba(0,0,0,0.8);}
.menu nav dl:hover dt,
.menu nav dl:hover dd{display:block;}
.menu nav dd a{padding:10px 20px; margin: 0; width: 100%; white-space: nowrap; }
.menu nav dd a:hover{color: #FFF; background-color:var(--pri02);}

nav dd ul{position: relative; }
nav dd ul li{position:absolute; display:none; left:100%; top:0; min-width:200px; width:auto; z-index:999; background-color: rgba(0,0,0,0.8); border-radius: 0 10px 10px 0; overflow: hidden;}
nav dd ul>a{padding-right: 40px!important;}
nav dd li a{padding-bottom:10px;}
nav dd ul:hover li{display:block;}
nav ul > a b.arrowR{ position: absolute; right: 5px; top: 50%; margin-top: -12px;}
nav ul > a b.arrowR::before{ content: 'keyboard_arrow_right';}

/* 語言 */
nav .language{display:inline-block; padding:0 10px 4px; border-left:1px #FFF solid; border-right:1px #FFF solid; vertical-align: middle;}
nav .language a{margin:0; padding:0; display:inline-block; vertical-align: middle;}
nav .language a.focus{}
nav .language li{display:inline-block;}

/* 搜索 */
nav .searchBox{/*height:30px;*/ min-width:40px; transition:width .5s;}
nav .searchBox a.UI{position:relative; /*right:0;*/ z-index:999; transition:width .5s; width: auto;}
nav .searchBox:hover a.UI{ color:#000;}
nav .searchBox span{}
nav .searchBox input{width:0; opacity:0; padding: 10px 20px; position:absolute; border-radius:99px; background-color:#FFF; right:0; top: 50%; transform: translateY(-50%); transition:.2s; font-size:16px;}
nav .searchBox:hover input{width:300px; opacity:1;}
nav .searchBox input::placeholder{color:#000;}

/* top menu - 滾動出現 */
header.top{position:fixed; z-index:99; border-bottom:1px rgba(0,0,0,0.1) solid; box-shadow:2px 3px 9px rgb(0 0 0 / 50%);}
header.top .menu a.logo{ height: 30px;}
/* =================== footer =================== */
footer{background-color:#000; color:#FFF; position:relative; padding:30px 0 20px 0;}
footer::after{content:""; width:100%; height:30px; background-image:url(../Images/footerline.svg); background-size:100%; background-position:center bottom; background-repeat:no-repeat; position:absolute; top:-30px;}

.footer{display: flex; max-width: 1300px; margin: 0 auto; justify-content: space-between; position:relative;}
.footer dk dd,
.footer dk dt{display:inline-block;}
.footer dl{display: flex; align-items: center;}
.footer dd{font-size:16px; font-weight:400; color:var(--pri03);}
.footer dt{width:70px; height:30px; background-image:url(../Images/footerLogo.svg); background-position:center; background-repeat:no-repeat; background-size:contain; margin-right:10px;}

.footer ul{}
.footer li{display:inline-block;}
.footer li a{width:20px; height:20px; background-position:center; background-repeat:no-repeat; background-size:cover;}
.footer li:first-child a{background-image:url(../Images/iconFb.png);}
.footer li:last-child a{background-image:url(../Images/iconLine.png);}

footer .goTop{position:fixed; right:10px; bottom:10px; z-index:99;}
footer .goTop::before{font-size:30px; color:#000; transition:color .0.5s;}
footer .goTop:hover::before{color:#fac035;}
footer .goButtom{color:#000; background-color:#fac035; opacity:0.9; border-radius:99px; transition:opacity .5s, background .5s;}
footer .goButtom:hover{opacity:1;}
footer .goButtom:hover::before{color:#000;}

/* =================== 共用 TOP KV =================== */
.bodybox .kv{width:100%; height:calc(var(--kvW) * 0.3); background-position:center; background-size:cover; background-repeat:no-repeat; position:relative;}
.bodybox .kv::after{content: " "; width: 100%; height: 30px; background-image: url(../Images/menuline02.svg); background-size: 100%; background-position: center top; background-repeat: no-repeat; position: absolute; bottom: -30px; z-index:1;}
.bodybox .mainContent{overflow:hidden; padding-top:90px;}
.bodybox.index .mainContent,
.bodybox.product .mainContent{padding-top:0px;}

/* ----- 聯絡我們 ----- */
.bodybox.contact .kv{background-image:url(../Images/kv_contact.jpg);}

/* ----- 代理經銷 ----- */
.bodybox.acting .kv{background-image:url(../Images/kv_acting.jpg);}

/* ----- 經營理念 ----- */
.bodybox.business .kv{background-image:url(../Images/kv_business.jpg);}

/* ----- 案例分享 ----- */
.bodybox.case .kv{background-image:url(../Images/kv_case.jpg);}

/* ----- 維修保固 ----- */
.bodybox.warranty .kv{background-image:url(../Images/kv_warranty.jpg);}

/* ----- 最新消息 ----- */
.bodybox.news .kv{background-image:url(../Images/news.jpg);}

/* ----- 產品資訊 ----- */
.bodybox.product .kv{background-image:url(../Images/kv_product.jpg);}

/* ----- 檔案下載 ----- */
.bodybox.download .kv{background-image:url(../Images/kv_download.jpg);}

/* ----- 搜尋 ----- */
.bodybox.search .kv{background-image:url(../Images/kv_search.jpg);}

/* =================== 共用 物件 =================== */

/* ----- 按鈕 ----- */
.btnBox{margin-top:30px;}
.btnBox a{background-color: #000; font-size: 20px; min-width: 10%; padding: 10px 0; letter-spacing: 10px; font-weight: 300; padding-left: 10px;}
.btnBox a:hover{color:#000;}

/* ----- 框架內容 ----- */
.mainContent .container{padding-top:0px; min-height:600px;}
/* ----- 標題 ----- */
.titleBox{text-align:center;}
dl.title{display:inline-block; text-align:center; margin-bottom:40px;}
dl.title dt{font-size: 30px; font-weight: 600; letter-spacing: 25px; padding-left: 25px;}
dl.title dd{font-size:var(--fontTitle); position:relative; text-transform:uppercase; font-weight:900; min-width:450px;}
dl.title dd::before{content:" "; background-image: url(../Images/titleLine.svg); width:80%; height:calc(var(--titleWordH) * 0.3); position: absolute; background-position: center; background-repeat:no-repeat; z-index:-1; left:50%; margin-left: calc(var(--titleW) * -0.4); top:10px;}

.bodybox h5{font-size:30px; font-weight:600; text-transform:uppercase;}
.bodybox h2{font-size:80px; font-weight:800; line-height:70px;}

/* ----- 彩色背景 ----- */
.bgTop::after,.bgBottom::before{content:" "; display:inline-block; position:absolute; width:1000px; height:1000px; background-position:center; background-repeat:no-repeat; background-size:cover;}
.bgTop::after{top:-500px; right:-500px; z-index:-1; background-image:url(../Images/halo1.png); opacity: 0.3;}
.bgBottom::before{bottom: -500px; left: -500px; z-index: -1; background-image: url(../Images/halo2.png); opacity: 0.3;}

.caseBox.bgTop::after, .caseBox.bgTop.bgBottom::before{display:none;}
/* 產品頁不需要 */
.ProductBox.bgBottom::before{display:none;}

/* -------------  表格 -------------- */
.bodybox .tableBox{width:100%; border:solid 1px #767676;}
.bodybox .table{width:100%; display:table;}
.bodybox .table .header{}
.bodybox .table .header li{list-style: none; text-align: center; vertical-align: middle; padding: 15px 10px; line-height:30px; font-size:var(--fontM1); line-height:calc(var(--fontM2) + 5px);}
.bodybox .table .header li:nth-child(odd){background-color:#000; color:#FFF;}
.bodybox .table .header li:nth-child(even){background-color:#ffc400;}
.bodybox .table ul{display:table-row; width:100%;}
.bodybox .table ul:nth-child(odd){background-color:#FFF9E6;}
.bodybox .table ul:nth-child(event){background-color:#F4F4F4;}
.bodybox .table li{list-style:none; display:table-cell; text-align:center; font-size:var(--fontM2); padding:20px 15px; position:relative;}
.bodybox .table li:last-child{text-align:left; width:50%;}
.bodybox .table li.no::after{content:" "; width:50%; height:1px; background-color:#000; margin:15px 0 0 -25%; left:50%; position:absolute;}

/* =================== 聯絡我們 =================== */
.contact{}
.contact .contactBox{display:flex; justify-content:space-between; position:relative;}
.contact h5{margin-bottom:5px;}
.contact h2{margin-bottom:10px;}
.contact .block1,.contact .block2{width:50%;}
.contact .block1{}
.contact .list{}
.contact .list li{color:#343434; margin-bottom:6px; font-size:var(--fontM2); font-weight:300;}
.contact .list li a{color:#000;}
.contact .list li a:hover{color:var(--pri02);}
.contact .map{background-color:#ccc; background-image:url(../Images/map.png); height:250px; background-position:center; background-repeat:no-repeat; max-width:90%; margin-top:20px; background-size:cover;}
.contact .map a{width:100%; padding-top:100%;}

.contact .block2{margin-bottom:100px;}
.contact .block2 .table{}
.contact .block2 ul{display:flex; align-items:center; justify-content:space-between;}
.contact .block2 li{font-size:var(--fontM2); margin-bottom:30px;}
.contact .block2 li:first-child{}
.contact .block2 li:last-child{width:calc(90% - 15px); display:inline-block;}
.contact .block2 input,
.contact .block2 textarea{width:100%; background-color:#F4F4F4; border:solid 1px #D2D2D2; padding:20px; font-size:var(--fontM2);}
.contact .block2 input{}
.contact .block2 textarea{font-size:var(--fontM2); max-height:300px; min-height:250px; overflow-y:auto;}

.contact .btnBox{margin:30px auto 0 auto; text-align:center;}
.contact .btnBox a{min-width:30%; text-align:center; font-size:var(--fontM2);}

.contact .tableBox{border:none;}

/* =================== 經銷據點 =================== */
.bodybox.acting{}
.bodybox.acting .block1{margin-bottom:90px; position:relative;}
.bodybox.acting .block1 ul{display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-around;}
.bodybox.acting .block1 li{max-width:30%; margin-bottom:30px;}
.bodybox.acting .block1 img{width:100%;}


/* =================== 最新消息 =================== */
.news{}
.news .newsBox{position:relative;}
.news .titleBox{}
.news .year{padding:8px 25px; background-color:#eaeaea66; display: inline-block; font-size: calc(var(--fontM1) + 5px); margin: 0 auto; width: 100%; text-align: center; border-top: solid 1px #cfcfcf; border-bottom: solid 1px #cfcfcf;}
.news .block01{display: flex; justify-content: space-between; margin:30px 0 50px 0; flex-direction: row; flex-wrap: wrap;}
.news .block01 ul{width:48%; margin-bottom:30px; display:flex;}
.news .block01 li{font-size:var(--fontM1); font-weight:800;}
.news .block01 b{font-size:15px; margin-right:5px;}
.news .block01 span{font-size:16px; font-weight:400; transform:rotate(90deg); display: inline-block; border-top:solid 1px #000; border-bottom:solid 1px #000; padding:3px 0; margin-left:5px;}
.news .block01 li:first-child{display:inline-block; min-width:100px; align-items:center;}
.news .block01 li:last-child{font-size: var(--fontM2); font-weight: 300; padding-top: 6px; border-top: solid 1px #a2a2a2; margin-top: -3px; font-weight: 400; width: 100%; line-height: calc(var(--fontM2) + 5px); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.news .block01 a{color:#000; width:100%; display:block;}
.news .block01 a:hover{color:#fac035;}

.news .tag{padding:10px 0px 10px 10px; background-color:#000; font-size:var(--fontM2); color:#FFF; display:inline-block; position: relative; margin-right:25px; font-weight:300;}
.news .tag::after{width:0; height: 0; border-style: solid; border-width:44px 0 0 30px; border-color:transparent transparent transparent #000; margin-left: 0; position: absolute; content:" "; top:0;}
/*#fac035*/
/* ----- 內頁 ----- */
.news.inPage date{display:inline-block;}
.news.inPage date div{font-size:30px; font-weight:800; display:flex; align-items:center;}
.news.inPage date b{font-size:15px; margin-right:5px;}
.news.inPage date span{font-size:16px; font-weight:400; transform:rotate(90deg); display: inline-block; border-top:solid 1px #000; border-bottom:solid 1px #000; padding:3px 0; margin-left:5px;}

.news.inPage .title{width:100%; padding-bottom:10px; margin:0 0 10px 0; border-bottom:solid 1px #000;}
.news.inPage .title h2{font-size:40px; font-weight:300; display:inline-block; line-height:normal;}
.news.inPage .title .maintitle{font-size:var(--fontB);}

.news.inPage .htmlEditor{text-align:center; margin:10px 0 50px 0;}
.news.inPage .htmlEditor img{margin:10px 0; width:100%;}
.news.inPage .htmlEditor p{text-align:left; font-weight:300;}


/* =================== 經營理念 =================== */
.business{}
.business .block1{margin-bottom:50px;}
.business .block2{margin-bottom:90px; display:block;}
.business .block1 ul{display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-around;}
.business .block1 li{max-width:30%; margin-bottom:30px;}
.business .block1 .note{font-size:var(--fontS); font-weight:400; padding-left:0; margin-top:20px;}
.business p{font-size:var(--fontM2); font-weight:300; line-height: clc(var(--fontM1) + 10px);}
.business .block1 img{width:100%;}

.business .block2 ul{display:flex; align-items:center;}
.business .block2 li{width:50%;}
.business .block2 li img{width:100%;}
.business .block2 li:last-child{padding-left:30px;}
.business .block2 b{display:block; font-weight:300; font-size:var(--fontM2); margin-bottom:20px; position:relative;}
.business .block2 b::before{content: " "; width:5px; height:5px; border-radius:99px; background-color:#000; position:absolute; left:-15px; top:11px;}

.businessBox span{font-size:var(--fontM1); font-weight:400;}


/* =================== 維修保固 =================== */
.warranty{}
.warrantyBox{position:relative;}
.warranty h5{margin-bottom:20px; font-size:var(--fontM1);}
.warranty p{font-size:var(--fontM2); font-weight:300; line-height:calc(var(--fontM2) + 10px);}
.warranty .block2 ul{}
.warranty .block2 li{position:relative; margin-left: 25px;}
.warranty .block2 li::before{content:" "; width:5px; height:5px; background-color:#000; border-radius:99px; position:absolute; left:-18px; top:24px;}
.warranty .block1{margin-bottom:50px;}
.warranty .block2{margin-bottom:100px;font-size:var(--fontM2); font-weight:300; line-height:50px;}
.warranty span.mark{color:#A50A00;}
.warranty span.warning{background-color: #FFC200; padding: 0px 15px; margin-top: 30px; display: inline-block; font-size:var(--fontS);}

/* =================== 搜尋結果 =================== */
.bodybox.search .mainContent{ padding-top: 0;}
.bodybox.search .mainContent .container{ margin: 50px auto;}

/* =================== 首頁 =================== */
.index block{display:block; padding:80px 0;}
.index dd.title{}
.index .container{max-width:100%;  padding:0;}


/* KV */
.index block.kv{height:calc(var(--kvW) * 0.6); padding:0; position:relative;}
.index block.kv ul{width:100%; height:calc(var(--kvW) * 0.6); overflow:hidden; position:absolute; top:0;}
.index block.kv li{width:100%; height: calc(var(--kvW) * 0.6); background-position:center; background-repeat:no-repeat; background-size:cover; position:absolute; display:none; opacity:0;}
.index block.kv li.show{opacity:1; display:block;}
.index block.kv li a{width:100%; height: calc(var(--kvW) * 0.6);}
.index block.kv a.UI{position:absolute; top:50%; z-index:99; margin-top:-30px;}
.index block.kv a.UI::before{font-size:60px; color:#FFF; -webkit-filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.7)); filter:drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.7));}
.index block.kv a.UI:hover::before{color:#FFC200;}
.index block.kv a.UI.next{right:30px;}
.index block.kv a.UI.prev{left:30px;}
.index .circle{width:100%; position:absolute; bottom:50px; z-index:999;}
.index .circle a{display:inline-block; margin:0 5px; width:8px; height:8px; background-color:#ccc; border-radius:99px;}
.index .circle a:hover,
.index .circle a.focuse{background-color:#FFC200;}


/* 產品區塊 */
block.product{max-width:1300px; margin:0 auto; position:relative;}
block.product .list{display:flex; justify-content:space-between;}
block.product a{width:30%;}

block.product .list dl{text-align:center;}
block.product .list dt{width:100%; height:calc(var(--indexProductH) * 0.9); background-position:center; background-repeat:no-repeat; background-size:cover; position:relative;}
block.product .list dt::before{content:" "; width:100%; height:calc(var(--indexProductH) * 0.9); background-color:#FFC200; opacity:0; top:0; left:0;}
block.product .list dt::after{content:" "; background-image:url(../Images/indexProducMore.svg); width:calc(var(--indexProductH) * 0.5); height:calc(var(--indexProductH) * 0.15); top: 50%; position:absolute; left:50%; margin:-5px 0 0 -55px; background-repeat:no-repeat; opacity:0;}
block.product .list a:hover dt::before{opacity:0.9;}
block.product .list a:hover dt::after{opacity:1;}

block.product .list a:first-child dt{background-image:url(../Images/indexProduct01.jpg);}
block.product .list a:nth-child(2) dt{background-image:url(../Images/indexProduct02.jpg);}
block.product .list a:last-child dt{background-image:url(../Images/indexProduct03.jpg);}
block.product .list dd{width:100%; padding:10px 0;}
block.product .list b{font-size:30px; color:#000; font-weight:400; position:relative; display:inline-block;}
block.product .list a b::after{content:" "; position:absolute; background-image:url(../Images/indexProducArrow.svg); width:18px; height:12px; background-position:center; background-repeat:no-repeat; background-size:cover; bottom:5px; right:-25px; opacity:0; transition:opacity .5s;}
block.product .list a:hover b::after{opacity:1;}

.printtBox .table ul:nth-child(odd),
.ProductBox .table ul:nth-child(odd){background-color:#000;}
.printtBox .tableBox,
.ProductBox .tableBox{width:100%; border:solid 1px #767676; display:table;}
.ProductBox .tableBox ul:first-child{}
.printtBox .tableBox ul:first-child li,
.ProductBox .tableBox ul:first-child li{list-style: none; text-align: center; vertical-align: middle; padding: 15px 10px; line-height:30px; font-size:var(--fontM1); line-height:calc(var(--fontM2) + 5px);}
.printtBox .tableBox ul:first-child li:nth-child(odd),
.ProductBox .tableBox ul:first-child li:nth-child(odd){background-color:#000; color:#FFF;}
.printtBox .tableBox ul:first-child li:nth-child(even),
.ProductBox .tableBox ul:first-child li:nth-child(even){background-color:#ffc400;}
.printtBox .tableBox ul,
.ProductBox .tableBox ul{display:table-row; width:100%;}
.printtBox .tableBox ul:nth-child(odd),
.ProductBox .tableBox ul:nth-child(odd){background-color:#FFF9E6;}
.printtBox .tableBox ul:nth-child(event),
.ProductBox .tableBox ul:nth-child(event){background-color:#F4F4F4;}
.printtBox .tableBox li,
.ProductBox .tableBox li{list-style:none; display:table-cell; text-align:center; font-size:var(--fontM2);     padding:10px 15px; position:relative;}
.printtBox .tableBox li:last-child,
.ProductBox .tableBox li:last-child{text-align:left; width:75%;}
.printtBox .tableBox li.no::after,
.ProductBox .tableBox li.no::after{content:" "; width:50%; height:1px; background-color:#000; margin:15px 0 0 -25%; left:50%; position:absolute;}

/* 最新消息 */
block.news::before,
block.news::after{content:" "; width:100%; background-position:center; background-position:center; background-size:cover; position:absolute; left:0; height:13px;}
block.news::before{background-image:url(../Images/indexLine01.svg); top:0;}
block.news::after{background-image:url(../Images/indexLine02.svg); bottom: -13px;}

block.news .tag {padding: 5px 0px 5px 10px; transition:background-color .5s;}
block.news .tag::after{border-width:34px 0 0 30px; transition:border .5s;}
block.news a:hover .tag {background-color:#fac035; color:#000;}
block.news a:hover .tag::after{border-color:transparent transparent transparent #fac035;}

block.news{background-image:url(../Images/indexNewsBg.png); background-position:center; background-repeat:no-repeat; background-size:cover; position: relative;}
block.news .newsList{max-width: 1300px; width: 100%; height: calc(var(--indexNewsH) * 0.4); margin: 0 auto; display: flex; justify-content: center; align-items: center;}
block.news .titleBox{width:50%;}
block.news dl.title dd::before {z-index:0;}
block.news dl.title dd b{z-index:1; position:relative;}

block.news .wordBox{width:50%; /*height:calc(var(--indexNewsH) * 0.5);*/ overflow-y:auto; height:450px;}
block.news .wordBox .word{width:80%;}
block.news .wordBox::-webkit-scrollbar{width:7px;}
block.news .wordBox::-webkit-scrollbar-button{background: transparent; border-radius: 4px;}
block.news .wordBox::-webkit-scrollbar-track-piece {background: transparent;}
block.news .wordBox::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, 0.4); border: 1px solid slategrey;}
block.news .wordBox::-webkit-scrollbar-track {box-shadow: transparent;}

block.news .newsList a{margin:15px 0;}
block.news .newsList ul{display:flex;}
block.news .newsList li{}

block.news .newsList a dl{width:80px; height:80px; padding:10px; background-color:#000; color:#FFF; position:relative; display: flex; align-items: center; flex-direction:row; border:solid 1px #000; transition:background-color .5s;}
block.news .newsList a dt{transform: rotate(90deg); font-size: 23px; font-weight: 100; letter-spacing: 3px; width: 25%; display: block; margin:-40px 0 0 -5px;}
block.news .newsList a dd{width: 80%;}
block.news .newsList dd span{position: absolute; width: 1px; height: 90%; background-color: #FFF; top: 4px; transform: rotate(26deg); left: 45px;}
block.news a dd b{font-size: 20px; display: block; width: 100%; text-align: left; padding: 4px 0 0 6px; font-weight: 300; transition:color .5s;}
block.news a dd p{font-size:25px; display:block; width:100%; text-align:right; margin-left:6px; transition:color .5s;}
block.news a dd sub{font-size:10px; display: block; width: 100%; text-align: right; margin:9px 0 -4px 5px; transition:color .5s;}

block.news a .word{margin-left:20px; font-size:16px; display: flex; flex-direction: column; justify-content: space-between; color:#000;}
block.news a .word b{display: block;}
block.news a .word span{padding-bottom:5px; border-bottom:solid 1px #000; position:relative;}
block.news a .word span::after{content:"more"; font-size:16px; margin-left:3px; position:absolute; right:-40px; bottom:-10px; opacity:0; transition:opacity .5s;}
block.news a .word span::before{content: " "; width: 0; left: 0; opacity: 0; height: 3px; background-color: rgba(0,0,0,0); position: absolute; bottom: 0; transition:opacity .5s, width .5s;}
block.news a:hover .word span::before{width:100%; opacity:1; height:3px; background-color:#ffc200;}
block.news a:hover .word span::after{opacity:1;}

block.news .newsList a:hover dl{background-color:#ffc200;}
block.news a:hover dd b{color:#000;}
block.news a:hover dd p{color:#000;}
block.news a:hover dd sub{color:#000;}
block.news a:hover dd span{background-color:#000;}
block.news .newsList a:hover dt{color:#000;}

/* 案例分享 */
block.case{}
block.case .caseList{display:block; position:relative; height:calc(var(--indexCase1H) + var(--indexCase7H));}
block.case .caseList a{background-position:center; background-repeat:no-repeat; background-size:cover; padding:0 10px; position:absolute;}
block.case .caseList a::after{display:none;}
block.case .caseList a::before{content:" "; display:block; width:100%; height:100%; background-color:rgba(255,194,0,0); position:absolute; top:0; left:0; transition:background-color .5s;}
block.case .caseList a:hover::before{background-color:rgba(255,194,0,0.8);}

block.case .caseList a.w1 dt {max-width:60%; line-height:33px;}
block.case .caseList dt{font-size:30px; color:#000; font-weight:600;}
block.case .caseList a dl{position:absolute; bottom:0; left:0; width:100%; padding:10px; color:#FFF; opacity:0; padding:20px 30px; transition:opacity .5s;}
block.case .caseList a:hover dl{opacity:1;}
block.case .caseList dd{font-size:25px; text-align:justify;}
block.case .caseList span{font-weight:100; color:#000;}
block.case .caseList b{width:30px; height:20px; background-image:url(../Images/indexArrow.png); display:inline-block; background-position: center; background-repeat: no-repeat; margin-left: 5px; margin-bottom: -3px;}

/* 3種寬度設定 */
block.case .caseList a.w1{width:calc(20% - 10px);}
block.case .caseList a.w2{width:calc(40% - 10px);}
block.case .caseList a.w3{width:calc(60% - 10px);}
block.case .caseList a.w4{width:calc(80% - 10px);}
block.case .caseList a.h0_2{height:calc(var(--indexCaseH) * 1);}
block.case .caseList a.h1{height:calc(var(--indexCaseH) * 1);}
block.case .caseList a.h1_2{height:calc(var(--indexCaseH) * 1.3);}
block.case .caseList a.h2{height:calc(var(--indexCaseH) * 1.956);}
block.case .caseList a.h3{height:calc(var(--indexCaseH) * 3);}

block.case .caseList .case1{top:0px; left:0;}
block.case .caseList .case2{left:calc(var(--indexCase1W) + 35px);}
block.case .caseList .case3{right:0px;}
block.case .caseList .case4{left:calc(var(--indexCase1W) + 35px); top:calc(var(--indexCase2H) + 15px);}
block.case .caseList .case5{left:calc(var(--indexCase1W) + var(--indexCase4W) + 70px); top:calc(var(--indexCase3H) + 15px);}
block.case .caseList .case6{right:0px; top:calc(var(--indexCase3H) + 15px);}
block.case .caseList .case7{left:0; top:calc(var(--indexCase1H) + 15px);}
block.case .caseList .case8{left:calc(var(--indexCase1W) + var(--indexCase4W) + 70px); top:calc(var(--indexCase3H) + var(--indexCase5H) + 30px);}
block.case .caseList .case9{right:0; top:calc(var(--indexCase3H) + var(--indexCase6H) + 30px);}


/* =================== 產品頁 =================== */
.ProductBox{margin-bottom:80px; position:relative;}
.ProductBox .path{margin-bottom:10px; display:flex; align-items:center; margin-top:50px;}
.ProductBox .path a{color:#000;}
.ProductBox .path a:hover{color:#ffc400;}
.ProductBox .path b{margin:0 10px;}
.ProductBox .path a.focuse{}

/* 標題 */
.ProductBox .productTitle{width:100%; background-color:#000; color:#FFF; font-size:var(--fontM1); margin-bottom:30px;}
.ProductBox .productTitle b{background-color:#ffc400; display:inline-block; color:#000; line-height:55px; padding:0 0px 0 20px; position:relative; margin-right:30px;}
.ProductBox .productTitle b::after{width:0; height: 0; border-style:solid; border-width:55px 0 0 30px; border-color:transparent transparent transparent #ffc400; margin-left:0; position:absolute; content:" ";}

.ProductBox .block1{display:flex; flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.ProductBox .block1 .picBox{width:39%;}
.ProductBox .block1 .wordBox{width:58%;}
.ProductBox .block1 .pic{width:100%; display:block;/*height:var(--productPicW); background-position:center; background-repeat:no-repeat; background-size:cover;*/ }
.ProductBox .block1 .logo{display: flex; align-items: center; justify-content: space-between; margin: 20px 0; width: 100%; flex-wrap: wrap; justify-content: flex-start;}
.ProductBox .block1 .logo li{width:9%; margin:5px; height: var(--productLogoW); display: inline-block; background-position: center; background-repeat: no-repeat; background-size: cover; padding-top:9%;}
/*.ProductBox .block1 .logo li:first-child{margin-left:0;}*/
.ProductBox .block1 .logo li:last-child{margin-right:0;}

.ProductBox .pic .picList{width:100%; margin-top:10px;}
.ProductBox .pic .picList a{width: 17%; margin-left: 10px; padding-top: 17%; background-repeat: no-repeat; background-position: center; background-size: cover; border: solid 1px #cdcdcd; opacity:0.5;}
.ProductBox .pic .picList a:hover{opacity:1;}
.ProductBox .pic .picList a:first-child{margin:0;}

/*.ProductBox .block1 .linkList{margin-top:90px;}*/
.ProductBox .linkList a{color:#000; width:100%; display:block; padding:0 0 5px 25px; margin-bottom:5px; border-bottom:solid 1px #C1C1C1; position:relative;}
.ProductBox .linkList a:hover{}
.ProductBox .linkList a:before{position:absolute; left:0; font-size:20px; top:3px;}
.ProductBox .linkList b{position:absolute; right:0;}

.ProductBox .wordBox ol{}
.ProductBox .wordBox li{margin:10px 0; line-height:30px; font-size:var(--fontM2); font-weight:100; position:relative; list-style:none;}
.ProductBox .wordBox li::before{content: " "; width: 5px; height: 5px; background-color: #000; border-radius: 99px; position: absolute; left:-12px; top:13px;}
.ProductBox .wordBox .logo li::before{display:none;}

.ProductBox .tagBox{width: 100%; display: flex; justify-content: flex-start; margin-top: 80px;}
.ProductBox .tagBox a{width:20%; text-align:center; padding:10px 0; font-size:var(--fontM2); position:relative; border-left:solid 1px #FFF;}
.ProductBox .tagBox a:hover{background-color:#ffc400; color:#000;}
.ProductBox .tagBox a:first-child{border-left:none;}
.ProductBox .tagBox a{background-color:#000; color:#FFF;}
.ProductBox .tagBox a.focuse{background-color:#ffc400; color:#000;}
.ProductBox .tagBox a::after{position: absolute; content: " "; width: 0; height: 0; border-style: solid; border-width:10px 10px 0 10px; left: 50%; bottom:-10px; margin-left:-10px; border-color:#ffc400 transparent transparent transparent; opacity:0; transition:opacity .5s;}
.ProductBox .tagBox a.focuse::after,
.ProductBox .tagBox a:hover::after{opacity:1;}

.ProductBox .block2{}
.ProductBox .block2 h6{font-size:25px; margin:40px 0;}
.ProductBox .block2 .tab{position:relative;}
.ProductBox .block2 .tab::after{content:" "; width:100%; padding-top:1%; background-image:url(../Images/productLine.svg); background-position:center; background-repeat:no-repeat; background-size:cover; bottom:-15px; position:absolute; right:0;}
.ProductBox .block2 h6 b{padding:10px 10px 10px 25px; background-color:#FFC200; font-weight:400; position:relative; font-size:var(--fontM1);}
.ProductBox .block2 h6 b::after{width:0; height:0; border-style:solid; border-width:50px 0 0 30px; border-color:transparent transparent transparent #ffc400; margin-left:10px; position:absolute; content:" "; top:0;}
.ProductBox .block2 p{}
.ProductBox .block2 .img{}
.ProductBox .block2 .downloadBox{display:flex; flex-direction: row; flex-wrap: wrap;}
.ProductBox .block2 .downloadBox a{width:24%; color:#000; margin-bottom:10px;}

.ProductBox .block2 .htmleditor{text-align:center;}
/*.ProductBox .htmleditor img{width:80%;}*/

.ProductBox .pic{margin-bottom:20px; position:relative;}
.ProductBox .pic a.UI{position:absolute; z-index:9; top:50%;}
.ProductBox .pic a.UI::before{font-size:30px;}
.ProductBox .pic a:hover.UI::before{color:#ffc400;}
.ProductBox .pic a.UI.prev{left:10px;}
.ProductBox .pic a.UI.next{right:10px;}
.ProductBox .pic .mainPhoto{width:100%; height:var(--productPicW); position:relative; overflow:hidden; border:solid 1px #CCC;}
.ProductBox .pic .mainPhoto li{width:100%; height:var(--productPicW); opacity:0; transition:opacity 0.5s; position:absolute; left:0; top:0;}
.ProductBox .pic .mainPhoto li.focus{opacity: 1; z-index:5; position: absolute; background-position: center; background-repeat: no-repeat; background-size:cover;}
.ProductBox .pic .circle{width:100%; text-align:center; position:absolute; bottom:10px; z-index:9;}
.ProductBox .pic .circle a{background-color:#ccc; width:5px; height:5px; border-radius:99px; margin-left:5px;}
.ProductBox .pic .circle a:hover,
.ProductBox .pic .circle a.focus{background-color:#ffc400;}

.product{}
.product .productList{display:flex; justify-content:flex-start; flex-wrap:wrap;}
.product .productList a{width:30%; color:#000; margin:20px 15px;}
.product .productList a:hover{color:#ffc400;}
.product dl{}
.product .container dt{width:100%; padding-top:100%; background-position:center; background-repeat:no-repeat; background-size:contain;}
.product .container dt img{width:500px; height:500px;}
.product.inPage .container dt{padding-top:0;}
.product.inPage .mainContent .container{padding-top:0;}
.product .productList dd{font-size:var(--fontM2);}
.product dd b{display:block; text-align:center;}
.product dd span{font-weight:300;  text-align:center; display:block;}
/*.product img{width:100%;}*/

.product .titleBox .title{margin:50px 0 10px 0;}

/* =================== 檔案下載 =================== */
.bodybox.download{}
.downloadBox{position:relative;}

.downloadBox .filter{font-size:25px;}
.downloadBox .filter dd{width:80%; margin:0 auto;}
.downloadBox .filter.style1{}
.downloadBox .filter.style1 dt{margin-bottom:10px;}
.downloadBox .filter.style1 dd{}
.downloadBox .filter.style1 input{width:100%;}

.downloadBox .filter.style2{margin-top:30px;}
.downloadBox .filter.style2 dt{}
.downloadBox .filter.style2 dd{display:flex; justify-content:space-between;}
.downloadBox .filter.style2 span{width:48%; display:inline-block;}
.downloadBox .filter.style2 select{width:100%;}

.bodybox.download .tableBox{border:none; margin:100px 0;}

.bodybox.download h6{width:100%; text-align:center; margin-bottom:30px;}

.bodybox.download table{}
.bodybox.download table ul{}
.bodybox .table li{text-align:left;}
.bodybox.download .table li a:hover{color:#ffc400;}
.bodybox.download .table li a::before{margin-right:5px;}
.bodybox.download .table li:first-child{width:60%;}
.bodybox.download .table li:last-child{width:20%;}

/* =================== 案例分享 =================== */
.bodybox.case{}
.bodybox.case .caseList{display:flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 80px; justify-content:flex-start; position:relative;}

.caseList h6{width:100%; margin-bottom:10px; font-size:25px; text-align:left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.caseList dl{width:32%; margin:20px 0;}
.caseList dt{width:100%;}
.caseList dt p{width: 100%; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start;}
.caseList p a:first-child{width:100%; display:block; height:calc(var(--caseListOne) * 0.7); margin:0;}
.caseList p a:hover::before{content:" "; width:100%; height:calc(var(--caseListOne) * 0.7); position:absolute; background-color: rgba(255,194,0,0.8); left:0;}
.caseList p a:first-child::after{font-size:25px; margin:-5px 0 0 -55px;}
.caseList p a::after{content: "SEE MORE"; top: 50%; position: absolute; left: 50%; margin: -10px 0 0 -22px; color: #000; opacity: 0; transition: opacity .0.5s; font-size: 12px; line-height: 12px;}
.caseList p a:hover::after{opacity:1;}
.caseList p a{height:var(--caseLista); width:15%; display:inline-block; background-position:center; background-repeat:no-repeat; background-size:cover; margin-top:15px; margin-right:5px; position:relative; overflow:hidden;}
.caseList p a:last-child{margin-right:0;}
.caseList dd{margin-top:15px; text-align:left; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; font-weight:300;text-align: justify;}
.caseList dl:nth-of-type(3n+2){margin:20px 2%;}
/*#fancybox-thumbs ul{margin-left:calc(var(--fancyboxUl) * 0.5);}*/



/* ========== 列印頁 ========== */
.print h3.title{margin-top:0px; width:100%; text-align:center; font-size:30px; font-weight:600; letter-spacing:15px; padding-left:15px;}
.print .privacyList{text-align:left;}
.print .headerTitle{margin-bottom:30px; border-bottom:dashed 1px #CCC; padding-bottom:10px;}
.print .headerTitle h6{margin-bottom:10px; font-size:25px; font-weight: 400; position:relative; padding-left:10px;}
.print .container{margin-top:0px;}
.print .headerTitle h6::before{content:" "; width:5px; height:100%; position:absolute; background-color:#000; left:0;}
.print .headerTitle span{display:block; margin-bottom:5px;}
.print .tableTail{margin:30px auto 0px auto; padding-top:30px; border-top:dashed 1px #757575; text-align:right;}
.print .htmlEditor p{font-size:var(--fsizeP); font-weight:500; font-weight:300;}
.print dl{max-width:1200px; width:100%; margin:10px auto 0 auto;}
.print .tickOk{display:flex; align-items:center; justify-content:center; margin-bottom:30px; flex-direction:column;}
.print .tickOk b{width:20px; height:20px; display:inline-block;}
.print b img{width:100%;}
.print .tickOk02{}
.print .tickOk02 span, 
.print .tickOk span{font-size:18px;}
.print .btnBox{margin:30px auto 80px auto;}
.print.form .tablebox.formtable{max-width:1000px; margin:10px auto 0 auto;}
.print .container dt{padding-top:0;}

/* 產品列印頁 */
.printtBox{margin:0px auto 80px auto; position:relative; display: block; max-width: 1000px;}
/* 標題 */
.printtBox .productTitle,
.ProductBox .productTitle{width:100%; background-color:#000; color:#FFF; font-size:var(--fontM1); margin-bottom:30px;}
.printtBox .productTitle b,
.ProductBox .productTitle b{background-color:#ffc400; display:inline-block; color:#000; line-height:55px; padding:0 0px 0 20px; position:relative; margin-right:30px;}
.printtBox .productTitle b::after,
.ProductBox .productTitle b::after{width:0; height: 0; border-style:solid; border-width:55px 0 0 30px; border-color:transparent transparent transparent #ffc400; margin-left:0; position:absolute; content:" ";}
.ProductBox .productTitle a{float:right; margin:10px 15px 0 0; font-size:16px; background-color:#FFF9E6; color:#000; padding:5px 15px; letter-spacing:0; font-weight:400;;}
.ProductBox .productTitle a:hover{background-color:#ffc400;}

.printtBox .block1{display:flex; flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.printtBox .block1 .picBox{width:39%;}
.printtBox .block1 .wordBox{width:58%;}
.printtBox .block1 .pic{width:100%; height:var(--productPicW); display:block; background-position:center; background-repeat:no-repeat; background-size:cover;}
.printtBox .block1 .logo{display: flex; align-items: center; justify-content: space-between; margin: 20px 0; width: 100%; flex-wrap: wrap; justify-content: flex-start;}
.printtBox .block1 .logo li{width:9%; margin:5px; height: var(--productLogoW); display: inline-block; background-position: center; background-repeat: no-repeat; background-size: cover; padding-top:9%;}
/*.printtBox .block1 .logo li:first-child{margin-left:0;}*/
.printtBox .block1 .logo li:last-child{margin-right:0;}

.printtBox .pic .picList{width:100%; margin-top:10px;}
.printtBox .pic .picList a{width: 17%; margin-left: 10px; padding-top: 17%; background-repeat: no-repeat; background-position: center; background-size: cover; border: solid 1px #cdcdcd; opacity:1; cursor: default;}
.printtBox .pic .picList a:hover{opacity:1;}
.printtBox .pic .picList a:first-child{margin:0;}

.printtBox .block1 .linkList{margin-top:90px;}
.printtBox .linkList a{color:#000; width:100%; display:block; padding:0 0 5px 25px; margin-bottom:5px; border-bottom:solid 1px #C1C1C1; position:relative;}
.printtBox .linkList a:hover{}
.printtBox .linkList a:before{position:absolute; left:0; font-size:20px; top:3px;}
.printtBox .linkList b{position:absolute; right:0;}

.printtBox .wordBox ol{}
.printtBox .wordBox li{margin:10px 0; line-height:30px; font-size:var(--fontM2); font-weight:100; position:relative; list-style:none;}
.printtBox .wordBox li::before{content: " "; width: 5px; height: 5px; background-color: #000; border-radius: 99px; position: absolute; left:-12px; top:13px;}
.printtBox .wordBox .logo li::before{display:none;}

.printtBox .tagBox{width: 100%; display: flex; justify-content: flex-start; margin-top: 80px;}
.printtBox .tagBox a{width:20%; text-align:center; padding:10px 0; font-size:var(--fontM2); position:relative; border-left:solid 1px #FFF;}
.printtBox .tagBox a:hover{background-color:#ffc400; color:#000;}
.printtBox .tagBox a:first-child{border-left:none;}
.printtBox .tagBox a{background-color:#000; color:#FFF;}
.printtBox .tagBox a.focuse{background-color:#ffc400; color:#000;}
.printtBox .tagBox a::after{position: absolute; content: " "; width: 0; height: 0; border-style: solid; border-width:10px 10px 0 10px; left: 50%; bottom:-10px; margin-left:-10px; border-color:#ffc400 transparent transparent transparent; opacity:0; transition:opacity .5s;}
.printtBox .tagBox a.focuse::after,
.printtBox .tagBox a:hover::after{opacity:1;}

.printtBox .block2{}
.printtBox .block2 h6{font-size:25px; margin:40px 0;}
.printtBox .block2 .tab{position:relative;}
.printtBox .block2 .tab::after{content:" "; width:100%; padding-top:1%; background-image:url(../Images/productLine.svg); background-position:center; background-repeat:no-repeat; background-size:cover; bottom:-15px; position:absolute; right:0;}
.printtBox .block2 h6 b{padding:10px 10px 10px 25px; background-color:#FFC200; font-weight:400; position:relative; font-size:var(--fontM1);}
.printtBox .block2 h6 b::after{width:0; height:0; border-style:solid; border-width:50px 0 0 30px; border-color:transparent transparent transparent #ffc400; margin-left:10px; position:absolute; content:" "; top:0;}
.printtBox .block2 p{}
.printtBox .block2 .img{}
.printtBox .block2 .downloadBox{display:flex; flex-direction: row; flex-wrap: wrap;}
.printtBox .block2 .downloadBox a{width:24%; color:#000; margin-bottom:10px;}

.printtBox .block2 .htmleditor{text-align:center;}
/*.printtBox .htmleditor img{width:80%;}*/

.printtBox .pic{margin-bottom:20px; position:relative;}
.printtBox .pic a.UI{position:absolute; z-index:9; top:50%;}
.printtBox .pic a.UI::before{font-size:30px;}
.printtBox .pic a:hover.UI::before{color:#ffc400;}
.printtBox .pic a.UI.prev{left:10px;}
.printtBox .pic a.UI.next{right:10px;}
.printtBox .pic .mainPhoto{width:100%; height:390px; position:relative; overflow:hidden; border:solid 1px #CCC;}
.printtBox .pic .mainPhoto li{width:100%; height:var(--productPicW); opacity:0; transition:opacity 0.5s; position:absolute; left:0; top:0;}
.printtBox .pic .mainPhoto li.focus{opacity: 1; z-index:5; position: absolute; background-position: center; background-repeat: no-repeat; background-size:cover; width:100%; height:390px;}
.printtBox .pic .circle{width:100%; text-align:center; position:absolute; bottom:10px; z-index:9;}
.printtBox .pic .circle a{background-color:#ccc; width:5px; height:5px; border-radius:99px; margin-left:5px;}
.printtBox .pic .circle a:hover,
.printtBox .pic .circle a.focus{background-color:#ffc400;}

.printtBox .btnBox{margin:50px auto; text-align:center;}
.printtBox a.btn{padding:10px 30px 10px 45px;}
.print .footer{justify-content:center; position: relative; flex-direction: column; align-items: center;}
.footer dl{display:flex; justify-content:center; margin:0;}
.print .footer ul{color:#a9a9a9;}
.print .print dl{margin:0 auto;}

.print .menu{justify-content:center;}


/* ========== 列印設定 ========== */
/* 列印 */
@media print{
    *{-webkit-print-color-adjust:exact !important;}
    .noBrank{brank-inside:avoid;}/* 不准斷行 */
    .noPrint{display:none;}/* 不准顯示 */
    .print .htmlEditor{font-size:14px;}
}
/* 紙張 */
@page{size: A4 portrait; margin-top:1cm;}



/* ========== error ========== */
.error{}
.error .main{ display:block; height:100%; overflow:auto;}
.error .mainContent{ width:100%; background-color:#EFEFEF; text-align:center; font-size:28px; height:100vh; background-image:url(../Images/error.jpg); background-position:center; background-repeat:no-repeat; background-size:cover;}
.error .info{ position:absolute; top:50%; left:50%; margin:-180px 0 0 -250px;}
.error .info b{font-family: 'Yanone Kaffeesatz', sans-serif; font-weight:200; font-size:250px; line-height:210px;}
.error .info a{ font-size:18px; margin-top:20px;}