@charset "utf-8";
.show400{display:none!important;}
.show400inline{display:none!important;}
.hide400{display:initial;}
header .hide400{display:block;}
header{position:fixed;z-index:99;top:0;left:0;height:5vw;width:100%;}
.side-nav {
  width: 240px;
  padding: 12px;
  border-right: 1px solid #eee;
  background: #fff;
}

.menu { margin: 0; padding: 0; list-style: none; }
.menu-item { margin-bottom: 8px; }

/* 第一層連結 */
.lv1-link {
  display: block;
  padding: 10px 14px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
  transition: background .2s ease, color .2s ease;
}
.lv1-link:hover { background: #f2f5ff; color: #1f3fff; }

/* 第二層預設隱藏 */
.lv2 {
  display: none;
  margin: 0 3vw;
  padding: 4px 0 0 0;
  list-style: none;
  border-left: 2px solid #e0e0e0;
}

/* 展開的分類（由伺服器輸出 open class） */
.menu-item.open > .lv2 { display: block; }

/* 第二層連結 */
.lv2-link {
  display: block;
  padding: 8px 14px 8px 24px;
  color: #555;
  text-decoration: none;
  font-size: 14px;
  transition: background .2s ease, color .2s ease;
}
.lv2-link:hover { background: #eef3ff; color: #1f3fff; }

/* 當前頁高亮 */
.lv2-link.active,
.lv1-link.active {
  background: #e8edff;
  color: #162ce9;
  font-weight: 600;
}
.header{position:relative;height:5vw;display:none;}
.headertop{position:relative;height:1.6vw;z-index:1;}
.headertopbg{position:absolute;top:0;left:0;height:1.6vw;width:100%;z-index:0;background:#8a267c;opacity:0.7;}
.headerbottom{position:relative;height:3.4vw;z-index:1;}
.headerbottombg{position:absolute;top:1.6vw;left:0;height:3.4vw;width:100%;z-index:0;background:#a8bdbe;opacity:0;}
.hlanselect{position:relative;display:inline-block;float:right;color:#FFF;font-size:0.9vw;line-height:1.6vw;}
.hlanselect a{display:inline-block;color:#FFF;font-size:0.9vw;line-height:1.6vw;padding:0 0.5vw;}
.hlanselect a:hover{background:#595959;}
.hlanselect i{display:inline-block;font-size:0.9vw;line-height:1.6vw;padding:0 0.5vw;float:right;}
.hlanselect i:hover{background:#595959;}
.hlanselect .headsbox{width:6vw;color:#fff;font-size:1vw;line-height:1.6vw;background:rgba(255,255,2555,0.2);border:0;float:right;margin-left:0.5vw;padding:0 0.3vw;display:none;}
.headsbox {transition: all 1s;}
.hblogo{height:150%;position:absolute;z-index:3;top:0;left:0;}
.hbright{position:absolute;top:0;right:0;display:inline-block;}
.navitem{position:relative;float:left;text-align:center;height:3.4vw;min-width:6vw;border:0;}
.navitem a{display:block;height:100%;width:100%;}
.navitemin{position:relative;padding:0 2vw;top:50%;transform:translateY(-50%);}
.navitemin h1{font-size:1vw;line-height:1.4vw;letter-spacing:0.2vw;color:#fff;font-weight:400;text-shadow:1px 1px 5px rgba(0,0,0,0.4);}
.navitemin p{font-size:0.7vw;line-height:1vw;color:#E0E0E0;font-weight:250;}
.navitem:hover{background:rgba(255,255,255,0.3);}
.navitem:hover p{color:#EEEEEE;}
.navitem.on{background:rgba(255,255,255,0.5)!important;}
.navitem.on p{color:#F5F5F5!important;}
.navitem.on h1{font-weight:450;}

/* ====== 改良後的子選單動畫 ====== */
.subnavwrap {
  position: absolute;
  top: 3.4vw;
  left: 0;
  width: 150%;  
  opacity: 0;
  transform: translateY(50px); /* 初始在下方 */
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 10;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

.navitem:hover .subnavwrap {
  opacity: 1;
  transform: translateY(0);   /* 滑上來 */
  pointer-events: auto;
}

.subnavwrapbg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  background:#a8bdbe;
  opacity:0.85;
}

.hsubnavitem {
  position:relative;
  font-size:0.9vw;
  line-height:1.5vw;
  color:#fff;
  padding:0.3vw 0;
  z-index:1;
  transition: background 0.2s;
}

.hsubnavitem:hover{background:rgba(255,255,255,0.2);color:#fff;}
.hsubnavitem.on{background:rgba(255,255,255,0.5)!important;color:#fff!important;}

/* 比例版 */
.orgcolor{color:c211a2;}
.newcolor{color:903e84;}
html, body{min-width:33.33vw;background:#FFF;}
.show400{display:none!important;}
.hide400{display:block;}
.cutblock{position:relative;text-align: center;}
.fbbold{font-weight:900;}
.fbold{font-weight:700;}
.fnormal{font-weight:400;}
.fupcase{text-transform: uppercase; }
.fcapital{text-transform: capitalize;}
.fullbg{position:absolute;top:0;left:0;width:100%;height:100%;}
.w100{width:100%;}
.h100{height:100%;}
.w50{width:50%;}
.mw100{max-width:100%;}
.mw100center{max-width:100%;margin:0 auto;}
/* z-index  */
.z001{z-index:1;}
.z000{z-index:0;}

/* ## margin ############## */
.mu05{margin-top:0.5vw;}
.mu1{margin-top:1vw;}
.mu2{margin-top:2vw;}
.mu3{margin-top:3vw;}
.mu4{margin-top:4vw;}
.mb2{margin-bottom:2vw;}
/* 字體 尺寸設定  */
.fsize08{font-size:0.8vw;line-height:1.2vw;}
.fsize10{font-size:1vw;line-height:1.6vw;}
.fsize12{font-size:1.2vw;line-height:1.8vw;}
.fsize14{font-size:1.4vw;line-height:2.1vw;}
.fsize16{font-size:1.6vw;line-height:2.4vw;}

h2{font-weight:bold;}
h2.style1{font-size:3.4vw;line-height:6vw;color:#8a267c;font-weight:bold;}
h2.style2,h2.style2{font-size:3.4vw;line-height:5vw;color:#8a267c;font-weight:bold;}
h3{font-weight:bold;}
h3.style1{font-size:2.4vw;line-height:5vw;color:#343434;padding:0 0 1vw 0;font-weight:bold;}
h3.style2,.h3.style2{font-size:3vw;line-height:5vw;color:#343434;font-weight:bold;}
h3.style3{font-size:2vw;line-height:2.8vw;color:#343434;font-weight:bold;}
h4.style1{font-size:1.6vw;line-height:2.4vw;color:#343434;padding:1vw 0;font-weight:bold;}
h4.style2{font-size:1.6vw;line-height:2.4vw;color:#343434;font-weight:bold;}

p.style2{font-size:1vw;line-height:1.6vw;}

.seemore{display: inline-block;vertical-align: top;margin-top:2vw;font-size:1vw;line-height:1.6vw;color:#343434;border-bottom:0.3vw solid #8a267c;margin-left:0.5vw;}
.seemore2{display: inline-block;font-size:1.4vw;line-height:2.1vw;border-bottom:0.3vw solid #8a267c;color:#8a267c;}

/* 正中間物件  */
.h100in{position:absolute;left:0;top:50%;transform: translateY(-50%);z-index:2;}
/* 框架  */
.centerwrap{position:relative;width:74%;margin:0 auto;text-align: left;}
.centerwrap.style2{width:68%;}
/* menu */
/*
.headmenu{position: absolute;z-index: 9;width:66%;top:1.5vw;left:50%;transform:translateX(-50%); background:rgba(255,255,255,0.9);padding:0 3vw;}
.headmenuin{position:relative;text-align:left;height:4.3vw;}
.headlogo{height:3vw;position: relative;margin:0.5vw 0;}
.headmlist{position: absolute;top:0;right:0;height:100%;}
.headmlist .aitem{position:relative;display:inline-block;color:#3c3c3c;padding:0 0.1vw;margin-left:1.5vw;font-size:1vw;line-height:4vw;font-weight:bold;}
.headmlist .aitem a{font-size:1vw;line-height:4vw;color:#3c3c3c;font-weight:bold;}
.headmlist .aitem.on{border-bottom:0.3vw solid #8a267c;color:#000;}
.headmlist .aitem:hover{color:#000;}
.headsubmenu{position: absolute;width:8vw;top:4vw;left:calc((100% - 8vw) / 2);display:none;}
.headsubmenu .space{position:relative;z-index:0;height:0.3vw;}
.headmlist .aitem:hover .headsubmenu{display:block;}
.headsubmenu .fa{font-size:2vw;line-height:2vw;color:#8a267c;position: absolute;z-index:1;top:-0.7vw;left:50%;transform:translateX(-50%); }
.headsubmenuin{padding:1vw 0.5vw;text-align:center;background:rgba(194,17,162,0.9);}
.headsubmenuin a{display:block;font-size:1vw;line-height:2vw;margin-bottom:1vw;color:#fff;border-bottom:1px solid #8a267c;}
.headsubmenuin a.on{border-bottom:1px solid #fff;font-weight:bold;}
.headsubmenuin a:hover{border-bottom:1px solid #fff;}
*/
.headmenu{position: absolute;z-index: 9;width:66%;top:1.5vw;left:50%;transform:translateX(-50%); background:rgba(255,255,255,0.9);padding:0 3vw;}
.headmenuin{position:relative;text-align:left;height:4.3vw;}
.headlogo{height:3vw;position: relative;margin:0.5vw 0;}
.headmlist{position: absolute;top:0;right:0;height:100%;}
.headmlist .aitem{position:relative;display:inline-block;color:#3c3c3c;padding:0 0.1vw;margin-left:1.5vw;font-size:1vw;line-height:4vw;font-weight:bold;}
.headmlist .aitem a{font-size:1vw;line-height:4vw;color:#3c3c3c;font-weight:bold;}
.headmlist .aitem.on{border-bottom:0.3vw solid #8a267c;color:#000;}
.headmlist .aitem:hover{color:#000;}
.headsubmenu{position: absolute;width:8vw;top:4vw;left:calc((100% - 8vw) / 2);display:none;}
.headsubmenu .space{position:relative;z-index:0;height:0.3vw;}
.hide400 .headmlist .aitem:hover .headsubmenu{display:block;}
.headsubmenu .fa{font-size:2vw;line-height:2vw;color:#8a267c;position: absolute;z-index:1;top:-0.7vw;left:50%;transform:translateX(-50%); }
.headsubmenuin{padding:1vw 0.5vw;text-align:center;background:rgba(194,17,162,0.9);}
.headsubmenuin a{display:block;font-size:1vw;line-height:2vw;margin-bottom:1vw;color:#fff;border-bottom:1px solid #8a267c;}
.headsubmenuin a.on{border-bottom:1px solid #fff;font-weight:bold;}
.headsubmenuin a:hover{border-bottom:1px solid #fff;}
.menuarr{transition:all 0.5s;}
.menuarr.on{transform:rotate(180deg);}



/* index */
.indexvideo{position: relative;height:100vh;overflow:hidden;background:#000;}
.indexvideo video{position:absolute;z-index:1;top:50%;left:50%;Transform: translate(-50%, -50%);width:100%;min-height:100%;min-width:178vh;}
.videocover{position: relative;height:100%;width:100%;z-index:2;background:rgba(0,0,0,0.2);}
.videotext{position:absolute;z-index:3;top:50%;left:50%;Transform: translate(-50%, -50%);width:45vw;}
.idc1text{width:40%;margin-right:10%;float:left;padding-top:3vw;}
.idc1img{width:50%;float:left;}
.idc2{padding:4vw 0;}
.idc2bg{position: absolute;top:0;left:0;height:100%;width:100%;z-index:0;}
.idc2img{width:48%;float:left;margin-right:4%;}
.idc2text{width:48%;float:left;}
.idc2line{border-bottom:1px solid #eee;padding:0.5vw 0;}
.idc2line a{font-size:1.2vw;line-height:1.8vw;color:#343434;font-weight:bold;}
.idc2line .content{font-size:1vw;line-height:1.6vw;color:#343434;display:none;}
.idc2line a:hover ~ .content{display:block;}
.idc3{padding:4vw 0;}
.idc3img{width:35%;float:left;}
.idc3text{width:55%;float:left;margin-right:5%;}
.idc4{border-top:1px solid #eee;}
/* crumb */
.crumbwrap{padding:0.5vw;font-size:0.8vw;line-height:1.2vw;color:#000000;text-align: left;}
.crumbwrap a,.crumbwrap span{display:inline-block;margin:0 0.3vw;color:#000000;}
/* 一般內容 */


/* newslist */
.newslistwrap{padding-bottom:5vw;}
.newslistline{position:relative;padding:1.5vw 0;border-bottom:1px solid #8a267c;}
.newslistline .nlistleft{position:relative;width:29vw;float:left;}
.newslistline .nlistlefttext{position: absolute;top:0;left:0;width:10vw;height:100%;text-align: center;}
.newslistline .nlistlefttext .h100in{width:100%;}
.newslistline .nlistlefttext p.ym{font-size:1vw;line-height:1.4vw;color:#343434;text-align: center;}
.newslistline .nlistlefttext p.d{font-size:3.8vw;line-height:4vw;color:#343434;font-weight: bold;text-align: center;}
.newslistline img{position:relative;width:17vw;margin-left:10vw;margin-right:2vw;float:left;}
.newslistline .nlistright{position:relative;width:calc(100% - 29vw);float:left;}
.newslistline .nlistright h4{font-size:1.4vw;line-height:2.1vw;color:#343434;font-weight:bold;}
.newslistline .nlistright p{font-size:1vw;line-height:1.6vw;color:#343434;}
.newslistline:nth-child(n+4){display:none;}
.newslistline.on:nth-child(n+4){display:block;}
/* newspage */
.newstitle{font-size:1.4vw;line-height:2.1vw;color:#343434;padding-bottom:0.5vw;border-bottom:1px solid #8a267c;font-weight: bold;}
.newstitle span{font-size:1vw;color:#343434;float:right;margin-left:1vw;font-weight: normal;}
/* productlist */
.plistwrap{position: relative;padding:1vw 0;}
.plistleft{position: relative;float:left;width:15vw;margin-right:2vw;}
.plistright{position: relative;float:left;width:calc(100% - 17vw);}
.plistleft table{border:1px solid #656565;border-collapse: collapse;width:100%;}
.plistleft table td{border:1px solid #656565;font-size:1.4vw;line-height:2.1vw;color:#343434;font-weight: bold;cursor: pointer;padding:0.5vw 1vw;}
.plistleft table td.on{color:#8a267c;background:#ececec;}
.plistitem{width:32%;margin-right:2%;margin-bottom:2vw;float:left;}
.plistitem:nth-child(3n){margin-right: 0;}
.plistitem img{width:100%;}
.plistitem p{font-size:1vw;line-height:1.4vw;color:#343434;}
/* productpage */
.ptitle{font-size:1.4vw;line-height:2.1vw;color:#343434;font-weight:bold;}
.productwrap{position: relative;}
.producttop{position: relative;}
.ptleft{position: relative;width:calc(50% - 20px);margin-right:20px;float:left;}
.ptright{position: relative;width:50%;float:left;}
#ppageimg{width:100%;}
.ptleftlist{padding:10px 0;}
.ptleftlist img{width:19%;margin-right:1.25%;float:left;}
.ptleftlist img:nth-child(5){margin-right:0;}



/*頁面下方連結 */
.morewrap{padding:2vw 0;text-align: center;cursor: pointer;}
.morewrap .p{display:inline-block;font-size:1.2vw;line-height: 1.8vw;color:#343434;border-bottom:0.3vw solid #8a267c;}

/* form */
.formwrap{position:relative;padding:2vw 15%;}
.formline{position:relative;min-height:2.4vw;margin:0 0 1.5vw 0;padding:0.5vw 0;}
.formline .formitem{position:relative;float:left;}
.formnote{font-size:1vw;line-height:1.6vw;color:#343434;}
.formitem:first-child{text-align:right;width:15%;margin:0;font-size:1.2vw;line-height:2.4vw;}
.formitem:nth-child(2){width:80%;margin:0 0 0 3%;}
.formitem input[type=text]{font-size:1.2vw;line-height:2.4vw;color:#343434;width:calc(94% - 2px);padding:0 3%;border:1px solid #999;}
.formitem textarea{width:calc(94% - 2px);padding:0 3%;height:8vw;font-size:1.2vw;line-height:2.4vw;color:#343434;border:1px solid #999;}
.formerr{position:absolute;left:0;bottom:-1.2vw;font-size:1vw;color:#f99;line-height:1.2vw;display:none;}
.formitem input[type=image]{width:45%;}

/* footer */
/*
footer{padding-top:2vw;text-align:center;}
*/
footer{padding-top:2vw;text-align:center;border-top:1px solid #ddd;}
.footlogo{width:12vw;padding:1vw 0;}
.footmenu{font-size:1vw;color:#8a267c;line-height:1.6vw;font-weight:bold;}
.footadd{font-size:0.8vw;color:#666666;line-height:2vw;}
.footerbottom{background:#8a267c;padding:0.5vw;text-align: center; font-size:0.8vw;color:#fff;line-height:1.6vw;}


/*  切換在 980   */
@media screen and (max-width: 980px) {
  .show400{display:block!important;}
  .hide400{display:none!important;}
  /* HEADER */
  header{position:fixed;z-index:91;width:100%;top:0;left:0;height:12vw;}
  header.t1{position:fixed;z-index:91;top:0;left:0;width:100%;height:12vw;}
  header.t2{position:fixed;z-index:91;top:0;left:0;width:100%;height:12vw;}
  .header{height:12vw;display:block;}

   header .centerwrap{width:100%;}
  .headertop{position:absolute;height:12vw;top:0;left:0;z-index:5;}
  .hlanselect{position:relative;display:inline-block;float:none;background:none;color:#f5f5f5;font-size:3.2vw;line-height:12vw;letter-spacing:0vw;padding:0 3vw;}
  .hlanselect a{display:inline-block;color:#FFF;font-size:2.6vw;line-height:12vw;padding:0 1vw;}
  .hlanselect a:hover{background:#595959;}
  .hlanselect i{display:inline-block;font-size:4vw;line-height:12vw;padding:0 0.5vw;float:left;}
  .hlanselect a:hover{background:none;}
  .hlanselect i:hover{background:none;}
  .hlanselect .headsbox{position:absolute;left:0;bottom:-7.9vw;width:20vw;color:#fff;font-size:3vw;line-height:6vw;margin-left:0;background:#a8bdbe;border:0;float:none;height:6vw;padding:1vw 2vw;display:none;}
  header.t1   .hlanselect{position:relative;display:inline-block;float:none;background:#fff;color:#444;font-size:3.2vw;line-height:12vw;letter-spacing:0vw;padding:0 3vw;}
  #hmicon{position:absolute;height:12vw;top:0;right:0;z-index:7;}
  .headerbottom{position:relative;height:12vw;text-align:center;}
  .headerbottom a{display:block;margin:0 auto;height:12vw;width:80vw;}


  .headertop{position:relative;height:12vw;z-index:2;}
  .headertopbg{display:none;}
  .headerbottom{position:absolute;top:0:left:0;height:12vw;z-index:1;}
  .headerbottombg{position:absolute;top:0;left:0;height:12vw;width:100%;z-index:0;background:#a8bdbe;opacity:1;}
  /* 選單 */
  .lockerspace{position:relative;height:14vw;}
  .lockerbox .locker{position:absolute;top:0;left:0;width:100%;height:20vw;width:100%;margin:0;margin-top:-6vw;padding:0;z-index:9;background:#fff;}
  .lockerbox.spus1 .locker{position:absolute;top:0;left:0;width:100%;height:30vw;width:100%;margin:0;margin-top:-6vw;padding:0;z-index:9;background:#fff;}
.locker .selectbox{position: relative;width:80%;margin-top:6vw;height:8vw;border-radius: .75vw;display:inline-block;}
.locker .selectbox.type2{width:45%;margin-top:6vw;height:8vw;border-radius: .75vw;}
.selectbox select{color:#393939;width:100%;padding: 0 0 0 .5vw;height:8vw;font-size:4vw;line-height:8vw;}
.selectbox::after {  content: '\25BC';  padding: 0 2vw; font-size:4vw;line-height:8vw;}
.spus1 .selectbox{margin-top:3vw!important;}
.spus1 .leftline{margin-top:4vw;}
  .hblogo{height:12vw;float:none;margin:0 auto;left:50%;margin-left:-17vw;}
  .hblogo2{height:12vw;float:none;margin:0 auto;text-align:center;}
  .hbright{position:fixed;display:block;float:none;width:100%;height:100%;top:0;right:-101%;z-index:6;background:rgba(0,0,0,0.8);}
  .hbright .navitem{position:relative;float:none;padding:3vw 6vw;text-align:center;display:block;height:auto;}
  .hbright .navitem:hover{background:none;}
  .hbright .navitemin{position:relative;display:block;vertical-align: auto;top:0;transform:none;}
  .hbright .navitemin h1 .clr{display:none;}
  .hbright .navitemin h1{font-size:3.6vw;line-height:5.2vw;letter-spacing:0.2vw;color:#fff;font-weight:400;}
  .hbright .navitemin p{font-size:3vw;line-height:4vw;color:#9fa0a0;font-weight:200;}
  .hbright .navitem:first-child{margin-top:14vw;}

  .subnavwrap{position:relative;top:auto;left:auto;width:100%;background:none;display:block;}
  .subnavwrap a{height:auto;}
  .subnavwrapbg{background:none;}
  .hsubnavitem{position:relative;font-size:2.8vw;line-height:4vw;color:#eaeaea;padding:1vw 0;background:none;}
  .hsubnavitem:hover{background:none;color:#fff;}
  .hsubnavitem.on{background:rgba(255,255,255,0.3)!important;color:#fff!important;}
  
  .centerwrap{position:relative;width:92%;margin:0 auto;}
  .centerwrap.style2{position:relative;width:80%;margin:0 auto;}
  .fsize08{font-size:3.6vw;line-height:5.4vw;}
  .fsize10{font-size:4vw;line-height:6vw;}
  .fsize12{font-size:4.8vw;line-height:7.2vw;}
  .fsize14{font-size:5.6vw;line-height:8.4vw;}
  .fsize16{font-size:6.4vw;line-height:9.6vw;}
  /* 一般內容 */
  h2.style1{font-size:10vw;line-height:16vw;}
  h2.style2,.h2.style2{font-size:10vw;line-height:16vw;}
  h3.style1{font-size:8vw;line-height:12vw;}
  h3.style2,.h3.style2{font-size:8vw;line-height:12vw;}
  h3.style3{font-size:6.4vw;line-height:9.6vw;}
  h4.style1{font-size:4.8vw;line-height:7.2vw;}
  h4.style2{font-size:4.8vw;line-height:7.2vw;}
  p.style2{font-size:4vw;line-height:6vw;}


  .seemore{margin-top:5vw;font-size:4vw;line-height:6vw;border-bottom:1vw solid #8a267c;margin-left:5vw;}
  .seemore.v2{margin-left:0;margin-top:0;}
  .seemore2{font-size:4.8vw;line-height:7.2vw;border-bottom:1vw solid #8a267c;margin:5vw 0;}
  /* menu */
  /*
  .headmenu{position: fixed;z-index: 9;width:92%;top:0;left:0;transform:none; background:rgba(255,255,255,1);padding:0 4%;}
  .headlogo{height:10vw;position: relative;margin:2vw 0;}
  .topbannerm{padding-top:14vw;}
  #sidemenuicon{position: relative;font-size:10vw;line-height:14vw;color:#343434;z-index:2;float:right;}
  .headmlist{position:fixed;top:0;left:100%;text-align:center;height:calc(100% - 34vw);width:100%;margin-top:14vw;background:#8a267c;transition: all 0.5s;padding:10vw 0;}
  .headmlist.on{left:0;}
  .headmlist .aitem{position:relative;display:block;color:#fff;margin:3vw 0;padding:0;margin-left:0;font-size:5vw;line-height:8vw;font-weight:bold;}
  .headmlist .aitem.{cursor: block;}
  .headmlist .aitem.on{border-bottom:0;color:#ddd;}
  .headmlist .aitem:hover{color:#fff;}
  .headmlist .aitem a{font-size:5vw;line-height:8vw;color:#fff;font-weight:bold;}
  .headsubmenu{position: relative;width:80%;top:0;left:0;display:none;padding:1vw 10%;}
  .headsubmenu.on{display:block;}
  .headsubmenu .space{display:none;}
  .headsubmenuin{padding:1vw 0.5vw;text-align:center;background:none;}
  .headsubmenuin a{display:block;font-size:4vw;line-height:6vw;margin-bottom:0;color:#fff;border-bottom:0;}
  .headsubmenuin a.on{border-bottom:1px solid #fff;font-weight:bold;}
  .headsubmenuin a:hover{border-bottom:1px solid #fff;}
  */
  .headmenu{position: fixed;z-index: 9;width:92%;top:0;left:0;transform:none; background:#a8bdbe;padding:0 4%;height:12vw;}
  .headlogo{height:8vw;position: relative;margin:2vw 0;}
  .topbannerm{padding-top:14vw;}
  #sidemenuicon{position: relative;font-size:8vw;line-height:12vw;color:#343434;z-index:2;float:right;}
  .headmlist{position:fixed;top:0;left:100%;text-align:center;height:calc(100% - 32vw);width:100%;margin-top:12vw;background:rgba(0,0,0,0.8);transition: all 0.5s;padding:10vw 0;}
  .headmlist.on{left:0;}
  .headmlist .aitem,.headmlist .aitem p{position:relative;display:block;color:#fff;margin:3vw 0;padding:0;margin-left:0;font-size:5vw;line-height:8vw;font-weight:bold;}
  .headmlist .aitem.{cursor: block;}
  .headmlist .aitem.on{border-bottom:0;color:#ddd;}
  .headmlist .aitem:hover{color:#fff;}
  .headmlist .aitem a{font-size:5vw;line-height:8vw;color:#fff;font-weight:bold;}
  .headmlist .aitem .headsubmenuin a{font-size:3.6vw;line-height:8vw;color:#fff;font-weight:normal;}
  .headsubmenu{position: relative;width:80%;top:0;left:0;display:none;padding:2vw 10%;background:rgba(255,255,255,0.1);}
  .headsubmenu.on{display:block;}
  .headsubmenu .space{display:none;}
  .headsubmenuin{padding:1vw 0.5vw;text-align:center;background:none;}
  .headsubmenuin a{display:block;font-size:3.6vw;line-height:6vw;margin-bottom:0;color:#fff;border-bottom:0;}
  .headsubmenuin a.on{border-bottom:1px solid #fff;font-weight:bold;}
  .headsubmenuin a:hover{border-bottom:none;}
  
  /* index */
  .videotext{width:80vw;}
  .idc1text{width:100%;margin-right:0;float:none;padding:0 0 5vw 0;}
  .idc1img{width:100%;float:none;}
  .idc2{padding:20vw 0;}
  .idc2img{width:100%;float:none;margin-right:0;margin:1vw 0 5vw 0;}
  .idc2text{width:100%;float:none;}
  .idc2line{padding:3vw 0;}
  .idc2line a{font-size:4.8vw;line-height:7.2vw;}
  .idc2line .content{}
  .idc2line a:hover ~ .content{display:none;}
  .idc3{padding:20vw 0;}
  .idc3img{width:100%;float:none;margin-right:0;margin:5vw 0 0 0;}
  .idc3text{width:100%;float:none;}


  /* crumb */
  .crumbwrap{padding:2vw;font-size:3.6vw;line-height:5.4vw;}
  .crumbwrap a,.crumbwrap span{margin:0 1vw;}


  /* newslist */
  .newslistwrap{padding-bottom:10vw;}
  .newslistline{position:relative;padding:5vw 0;}
  .newslistline .nlistleft{width:100%;}
  .newslistline .nlistlefttext{position: absolute;top:0;left:0;width:35%;height:100%;text-align: center;}
  .newslistline .nlistleft .h100in{width:100%;}
  .newslistline .nlistleft p.ym{font-size:4vw;line-height:6vw;}
  .newslistline .nlistleft p.d{font-size:8vw;line-height:10vw;}
  .newslistline img{position:relative;width:65%;margin-left:35%;margin-right:0;float:none;}
  .newslistline .nlistright{position:relative;width:100%;float:none;}
  .newslistline .nlistright h4{font-size:5.6vw;line-height:8.4vw;}
  .newslistline .nlistright p{font-size:4vw;line-height:6vw;}
  .newslistline:nth-child(n+4){display:block;}

  /* newspage */
  .newstitle{font-size:5.6vw;line-height:8.4vw;padding-bottom:2vw;}
  .newstitle span{display:block;width:100%;padding-top:3vw;font-size:4vw;line-height:6vw;float:none;margin-left:0;}

  /* productlist */
  .plistwrap{position: relative;padding:1vw 0;}
  .plistleft{position: relative;float:none;width:100%;margin-right:0;padding:5vw 0;}
  .plistright{position: relative;float:none;width:100%;}
  .plistleft table{width:80%;margin:0 10%;}
  .plistleft table td{font-size:4.8vw;line-height:7.2vw;padding:1vw 5vw;}
  .plistitem{width:48%;margin-right:4%;margin-bottom:8vw;}
  .plistitem:nth-child(3n){margin-right:4%;}
  .plistitem:nth-child(2n){margin-right:0;}
  .plistitem p{font-size:4vw;line-height:6vw;}
  /* productpage */
  .ptitle{font-size:6vw;line-height:9vw;}

  .ptleft{width:100%;float:none;margin-bottom:5vw;}
  .ptright{width:100%;float:none;}
  #ppageimg{width:100%;}
  .ptleftlist{padding:5vw 0;}


/*頁面下方連結 */
  .morewrap{padding:5vw 0;}
  .morewrap .p{font-size:6vw;line-height:8vw;border-bottom:1vw solid #8a267c;}
  /* form */
  .formwrap{position:relative;padding:10vw 5%;}
  .formline{position:relative;min-height:8vw;margin:0 0 5vw 0;padding:2vw 0;}
  .formline .formitem{position:relative;float:left;}
  .formnote{font-size:4vw;line-height:6vw;padding-bottom:5vw;}
  .formitem:first-child{width:28%;font-size:4vw;line-height:6vw;}
  .formitem:nth-child(2){width:69%;margin:0 0 0 3%;}
  .formitem input[type=text]{font-size:4vw;line-height:8vw;}
  .formitem textarea{font-size:4vw;line-height:6vw;height:20vw;}
  .formerr{bottom:-5vw;font-size:3.6vw;color:#f99;line-height:5vw;}
  .formitem input[type=image]{width:100%;}

  /* footer */
  footer{padding-top:5vw;}
  .footlogo{width:30vw;padding:5vw 0;}
  .footmenu{font-size:4vw;line-height:6vw;}
  .footadd{font-size:3.2vw;line-height:5.4vw;}
  .footerbottom{padding:5vw;font-size:3.2vw;line-height:5.4vw;}

}
/*
@media screen and (max-width: 1200px) and (orientation: landscape)  {

}
*/