@charset "utf-8";

/*
 * Ghvzon
 * 導覽/選單高亮組件 html2LINEBN-v3.1
 *******************************************************************
 *  --2021.02.25--上傳轉檔 (V3.1)
 *  --2021.02.02--字體移除共用素材 (V3.0)
 *  --2019.08.05--修正有捲軸造成偏移 (v2.2)
 *  --2019.08.02--改從js入稿，所有設定統一由api檔案控制，第2行欄位判斷數字變大 (v2.1)
 *******************************************************************
 */ 


/* --------------------------------------
 * 共用設定
 * -------------------------------------- */


/*字體*/
@font-face { font-family: 'NotoSansCJKTC'; font-style: normal; font-weight: 100; src: local('Noto Sans CJKTC Thin'),        local('NotoSansCJKtc-Thin'),        url('NotoSansCJKtc-Thin.otf') format('opentype'),       url('NotoSans-Thin.ttf') format('opentype');}
@font-face { font-family: 'NotoSansCJKTC'; font-style: normal; font-weight: 300; src: local('Noto Sans CJKTC Light'),       local('NotoSansCJKtc-Light'),       url('NotoSansCJKtc-Light.otf') format('opentype'),      url('NotoSans-Light.ttf') format('opentype');}
@font-face { font-family: 'NotoSansCJKTC'; font-style: normal; font-weight: 400; src: local('Noto Sans CJKTC Regular'),     local('NotoSansCJKtc-Regular'),     url('NotoSansCJKtc-Regular.otf') format('opentype'),    url('NotoSans-Regular.ttf') format('opentype'); }
@font-face { font-family: 'NotoSansCJKTC'; font-style: normal; font-weight: 500; src: local('Noto Sans CJKTC Medium'),      local('NotoSansCJKtc-Medium'),      url('NotoSansCJKtc-Medium.otf') format('opentype'),     url('NotoSans-Medium.ttf') format('opentype');}
@font-face { font-family: 'NotoSansCJKTC'; font-style: normal; font-weight: 700; src: local('Noto Sans CJKTC Bold'),        local('NotoSansCJKtc-Bold'),        url('NotoSansCJKtc-Bold.otf') format('opentype'),       url('NotoSans-Bold.ttf') format('opentype');}
@font-face { font-family: 'NotoSansCJKTC'; font-style: normal; font-weight: 900; src: local('Noto Sans CJKTC Black'),       local('NotoSansCJKtc-Black'),       url('NotoSansCJKtc-Black.otf') format('opentype'),      url('NotoSans-Black.ttf') format('opentype');}



/*基本*/
body { margin:0; padding:0; background-color: #fafafa; font-family:"NotoSansCJKTC","微軟正黑體","Microsoft JhengHei",Helvetica; }
/*div, img { display: block; vertical-align: bottom;}*/

/*全BOX版面 */
.WRAPPER { position:relative; /*margin:20px auto;*/ padding:0; width:100%; height:100%; font-weight: 300;}
.WRAPPER { display:flex; /*justify-content: center;*/ align-items: center; }
.WRAPPER img { border:0; vertical-align:top;}
.WRAPPER a { text-decoration:none;}

/*產出區*/
#Area_input { margin: 0 auto; width:1040px; text-align: center;}
#Area_input h1 { margin: 0; padding: 0;}

/*BN_htmlToImg入資料區*/
.BN_htmlToImg { width: 350px;}
.BN_htmlToImg,
.BN_htmlToImg input { font-size: 1.5rem;}
.BN_htmlToImg b { display: inline-block; padding: 0 20px;}	
.BN_htmlToImg input { padding: 10px;}
.BN_htmlToImg li { margin: 0 0 10px 0;}
	

.BN_layout { z-index: 0;  position:relative; overflow:hidden; width:1040px; height:1040px; text-align: center; background-position:  center top; font-family: "Century Gothic","NotoSansCJKTC","Microsoft JhengHei",Helvetica; font-weight: bold; }
.PD_Layout_BN ul { margin: 0; padding: 0; list-style: none;}

.pd_box_1 { z-index: 2; position: absolute; width: 1040px; top: 10px;  }
.pd_box_2 { z-index: 2; position: absolute; width: 1040px; top: 601px; }
.pd_layout { z-index: 2; float: left; width: 326px; margin: 0 0 0 15px; overflow: hidden; }
.pd_layout ul { margin: 0; padding: 0;  list-style: none;}
.pd_layout .PD_img { padding: 10px 15px 1px 15px; box-sizing: border-box; }
.pd_layout .PD_img img { width: 100%; height: 100%; border-radius: 4%; }
.pd_layout .PD_into { margin: 0; }
.pd_layout h3 { font-size: 40px;letter-spacing:-1px; margin: 0; padding: 0; white-space:nowrap; line-height: 1.5;font-weight: normal;}
.pd_layout p { font-size: 40px; letter-spacing: -2px; margin: -16px 0 0px 0; padding: 0; white-space:nowrap; }
.pd_layout p del { padding-right: 6px; font-weight: 100; color: #B0B0B0;  }
.pd_layout p span.Price { font-size: 60px; position: relative; top: 2px; }
.pd_layout p span.money {  position: relative; top: -2px; margin: 0 3px 0 0; }
.pd_layout p small {  position: relative; top: -1px; font-size: 40px; }

.pd_layout p { color: #ca0017!important;  }
.pd_layout h3 { color:#2a2a2a!important;  }


/*  --------------------------------------
 * 垂直虛線
 * -------------------------------------- */

/*垂直虛線*/
:root { --i-color1: #ddd; --i-color2: transparent;}
li > i { content: ""; position: absolute; top: 0; right: 0; display: none; width: 1px; height: 100%; /*background-image: url(line.png?t=1640764715680);*/ background-repeat: no-repeat; background-position: center top;
         background-image: linear-gradient(0deg
              ,var(--i-color1) 0, var(--i-color1)  4px
              ,var(--i-color2) 0, var(--i-color2)  8px
              ,var(--i-color1) 0, var(--i-color1)  12px
              ,var(--i-color2) 0, var(--i-color2)  16px
              ,var(--i-color1) 0, var(--i-color1)  20px
              ,var(--i-color2) 0, var(--i-color2)  24px
              ,var(--i-color1) 0, var(--i-color1)  28px
              ,var(--i-color2) 0, var(--i-color2)  32px
              ,var(--i-color1) 0, var(--i-color1)  36px
              ,var(--i-color2) 0, var(--i-color2)  40px
              ,var(--i-color1) 0, var(--i-color1)  44px
              ,var(--i-color2) 0, var(--i-color2)  48px
              ,var(--i-color1) 0, var(--i-color1)  52px
              ,var(--i-color2) 0, var(--i-color2)  56px
              ,var(--i-color1) 0, var(--i-color1)  60px
              ,var(--i-color2) 0, var(--i-color2)  64px
              ,var(--i-color1) 0, var(--i-color1)  68px
              ,var(--i-color2) 0, var(--i-color2)  72px
              ,var(--i-color1) 0, var(--i-color1)  76px
              ,var(--i-color2) 0, var(--i-color2)  80px
              ,var(--i-color1) 0, var(--i-color1)  84px
              ,var(--i-color2) 0, var(--i-color2)  88px
              ,var(--i-color1) 0, var(--i-color1)  92px
              ,var(--i-color2) 0, var(--i-color2)  96px
              ,var(--i-color1) 0, var(--i-color1)  100px
              ,var(--i-color2) 0, var(--i-color2)  104px
              ,var(--i-color1) 0, var(--i-color1)  108px
              ,var(--i-color2) 0, var(--i-color2)  112px
              ,var(--i-color1) 0, var(--i-color1)  116px
              ,var(--i-color2) 0, var(--i-color2)  120px
              ,var(--i-color1) 0, var(--i-color1)  124px
              ,var(--i-color2) 0, var(--i-color2)  128px
              ,var(--i-color1) 0, var(--i-color1)  132px
              ,var(--i-color2) 0, var(--i-color2)  136px
              ,var(--i-color1) 0, var(--i-color1)  140px
              ,var(--i-color2) 0, var(--i-color2)  144px
              ,var(--i-color1) 0, var(--i-color1)  148px
              ,var(--i-color2) 0, var(--i-color2)  152px
              ,var(--i-color1) 0, var(--i-color1)  156px
              ,var(--i-color2) 0, var(--i-color2)  160px
              ,var(--i-color1) 0, var(--i-color1)  164px
              ,var(--i-color2) 0, var(--i-color2)  168px
              ,var(--i-color1) 0, var(--i-color1)  172px
              ,var(--i-color2) 0, var(--i-color2)  176px
              ,var(--i-color1) 0, var(--i-color1)  180px
              ,var(--i-color2) 0, var(--i-color2)  184px
              ,var(--i-color1) 0, var(--i-color1)  188px
              ,var(--i-color2) 0, var(--i-color2)  192px
              ,var(--i-color1) 0, var(--i-color1)  196px
              ,var(--i-color2) 0, var(--i-color2)  200px
              ,var(--i-color1) 0, var(--i-color1)  204px
              ,var(--i-color2) 0, var(--i-color2)  208px
              ,var(--i-color1) 0, var(--i-color1)  212px
              ,var(--i-color2) 0, var(--i-color2)  216px
              ,var(--i-color1) 0, var(--i-color1)  220px
              ,var(--i-color2) 0, var(--i-color2)  224px
              ,var(--i-color1) 0, var(--i-color1)  228px
              ,var(--i-color2) 0, var(--i-color2)  232px
              ,var(--i-color1) 0, var(--i-color1)  236px
              ,var(--i-color2) 0, var(--i-color2)  240px
              ,var(--i-color1) 0, var(--i-color1)  244px
              ,var(--i-color2) 0, var(--i-color2)  248px
              ,var(--i-color1) 0, var(--i-color1)  252px
              ,var(--i-color2) 0, var(--i-color2)  256px
              ,var(--i-color1) 0, var(--i-color1)  260px
              ,var(--i-color2) 0, var(--i-color2)  264px
              ,var(--i-color1) 0, var(--i-color1)  268px
              ,var(--i-color2) 0, var(--i-color2)  272px
              ,var(--i-color1) 0, var(--i-color1)  276px
              ,var(--i-color2) 0, var(--i-color2)  280px
              ,var(--i-color1) 0, var(--i-color1)  284px
              ,var(--i-color2) 0, var(--i-color2)  288px
              ,var(--i-color1) 0, var(--i-color1)  292px
              ,var(--i-color2) 0, var(--i-color2)  296px
              ,var(--i-color1) 0, var(--i-color1)  300px
              ,var(--i-color2) 0, var(--i-color2)  304px
              ,var(--i-color1) 0, var(--i-color1)  308px
              ,var(--i-color2) 0, var(--i-color2)  312px
              ,var(--i-color1) 0, var(--i-color1)  316px
              ,var(--i-color2) 0, var(--i-color2)  320px
              ,var(--i-color1) 0, var(--i-color1)  324px
              ,var(--i-color2) 0, var(--i-color2)  328px
              ,var(--i-color1) 0, var(--i-color1)  332px
              ,var(--i-color2) 0, var(--i-color2)  336px
              ,var(--i-color1) 0, var(--i-color1)  340px
              ,var(--i-color2) 0, var(--i-color2)  344px
              ,var(--i-color1) 0, var(--i-color1)  348px
              ,var(--i-color2) 0, var(--i-color2)  352px
              ,var(--i-color1) 0, var(--i-color1)  356px
              ,var(--i-color2) 0, var(--i-color2)  360px
              ,var(--i-color1) 0, var(--i-color1)  364px
              ,var(--i-color2) 0, var(--i-color2)  368px
              ,var(--i-color1) 0, var(--i-color1)  372px
              ,var(--i-color2) 0, var(--i-color2)  376px
              ,var(--i-color1) 0, var(--i-color1)  380px
              ,var(--i-color2) 0, var(--i-color2)  384px
              ,var(--i-color1) 0, var(--i-color1)  388px
              ,var(--i-color2) 0, var(--i-color2)  392px
              ,var(--i-color1) 0, var(--i-color1)  396px
              ,var(--i-color2) 0, var(--i-color2)  400px
              ,var(--i-color1) 0, var(--i-color1)  404px
              ,var(--i-color2) 0, var(--i-color2)  408px
              ,var(--i-color1) 0, var(--i-color1)  412px
              ,var(--i-color2) 0, var(--i-color2)  416px
              ,var(--i-color1) 0, var(--i-color1)  420px
              ,var(--i-color2) 0, var(--i-color2)  424px
              ,var(--i-color1) 0, var(--i-color1)  428px
              ,var(--i-color2) 0, var(--i-color2)  432px
              ,var(--i-color1) 0, var(--i-color1)  436px
              ,var(--i-color2) 0, var(--i-color2)  440px
              ,var(--i-color1) 0, var(--i-color1)  444px
              ,var(--i-color2) 0, var(--i-color2)  448px
              ,var(--i-color1) 0, var(--i-color1)  452px
              ,var(--i-color2) 0, var(--i-color2)  456px
              ,var(--i-color1) 0, var(--i-color1)  460px
              ,var(--i-color2) 0, var(--i-color2)  464px
              ,var(--i-color1) 0, var(--i-color1)  468px
              ,var(--i-color2) 0, var(--i-color2)  472px
              ,var(--i-color1) 0, var(--i-color1)  476px
              ,var(--i-color2) 0, var(--i-color2)  480px
              ,var(--i-color1) 0, var(--i-color1)  484px
              ,var(--i-color2) 0, var(--i-color2)  488px
              ,var(--i-color1) 0, var(--i-color1)  492px
              ,var(--i-color2) 0, var(--i-color2)  496px
              ,var(--i-color1) 0, var(--i-color1)  500px
              ,var(--i-color2) 0, var(--i-color2)  504px
              ,var(--i-color1) 0, var(--i-color1)  508px
              ,var(--i-color2) 0, var(--i-color2)  512px
              ,var(--i-color1) 0, var(--i-color1)  516px
              ,var(--i-color2) 0, var(--i-color2)  520px
              ,var(--i-color1) 0, var(--i-color1)  524px
              ,var(--i-color2) 0, var(--i-color2)  528px
              ,var(--i-color1) 0, var(--i-color1)  532px
              ,var(--i-color2) 0, var(--i-color2)  536px
              ,var(--i-color1) 0, var(--i-color1)  540px
              ,var(--i-color2) 0, var(--i-color2)  544px
              ,var(--i-color1) 0, var(--i-color1)  548px
              ,var(--i-color2) 0, var(--i-color2)  552px
              ,var(--i-color1) 0, var(--i-color1)  556px
              ,var(--i-color2) 0, var(--i-color2)  560px
              ,var(--i-color1) 0, var(--i-color1)  564px
              ,var(--i-color2) 0, var(--i-color2)  568px
              ,var(--i-color1) 0, var(--i-color1)  572px
              ,var(--i-color2) 0, var(--i-color2)  576px
              ,var(--i-color1) 0, var(--i-color1)  580px
              ,var(--i-color2) 0, var(--i-color2)  584px
              ,var(--i-color1) 0, var(--i-color1)  588px
              ,var(--i-color2) 0, var(--i-color2)  592px
              ,var(--i-color1) 0, var(--i-color1)  596px
              ,var(--i-color2) 0, var(--i-color2)  600px
              ,var(--i-color1) 0, var(--i-color1)  604px
              ,var(--i-color2) 0, var(--i-color2)  608px
              ,var(--i-color1) 0, var(--i-color1)  612px
              ,var(--i-color2) 0, var(--i-color2)  616px
              ,var(--i-color1) 0, var(--i-color1)  620px
              ,var(--i-color2) 0, var(--i-color2)  624px
              ,var(--i-color1) 0, var(--i-color1)  628px
              ,var(--i-color2) 0, var(--i-color2)  632px
              ,var(--i-color1) 0, var(--i-color1)  636px
              ,var(--i-color2) 0, var(--i-color2)  640px
              ,var(--i-color1) 0, var(--i-color1)  644px
              ,var(--i-color2) 0, var(--i-color2)  648px
              ,var(--i-color1) 0, var(--i-color1)  652px
              ,var(--i-color2) 0, var(--i-color2)  656px
              ,var(--i-color1) 0, var(--i-color1)  660px
              ,var(--i-color2) 0, var(--i-color2)  664px
              ,var(--i-color1) 0, var(--i-color1)  668px
              ,var(--i-color2) 0, var(--i-color2)  672px
              ,var(--i-color1) 0, var(--i-color1)  676px
              ,var(--i-color2) 0, var(--i-color2)  680px
              ,var(--i-color1) 0, var(--i-color1)  684px
              ,var(--i-color2) 0, var(--i-color2)  688px
              ,var(--i-color1) 0, var(--i-color1)  692px
              ,var(--i-color2) 0, var(--i-color2)  696px
              ,var(--i-color1) 0, var(--i-color1)  700px
              ,var(--i-color2) 0, var(--i-color2)  704px
              ,var(--i-color1) 0, var(--i-color1)  708px
              ,var(--i-color2) 0, var(--i-color2)  712px
              ,var(--i-color1) 0, var(--i-color1)  716px
              ,var(--i-color2) 0, var(--i-color2)  720px
              ,var(--i-color1) 0, var(--i-color1)  724px
              ,var(--i-color2) 0, var(--i-color2)  728px
              ,var(--i-color1) 0, var(--i-color1)  732px
              ,var(--i-color2) 0, var(--i-color2)  736px
              ,var(--i-color1) 0, var(--i-color1)  740px
              ,var(--i-color2) 0, var(--i-color2)  744px
              ,var(--i-color1) 0, var(--i-color1)  748px
              ,var(--i-color2) 0, var(--i-color2)  752px
              ,var(--i-color1) 0, var(--i-color1)  756px
              ,var(--i-color2) 0, var(--i-color2)  760px
              ,var(--i-color1) 0, var(--i-color1)  764px
              ,var(--i-color2) 0, var(--i-color2)  768px
              ,var(--i-color1) 0, var(--i-color1)  772px
              ,var(--i-color2) 0, var(--i-color2)  776px
              ,var(--i-color1) 0, var(--i-color1)  780px
              ,var(--i-color2) 0, var(--i-color2)  784px
              ,var(--i-color1) 0, var(--i-color1)  788px
              ,var(--i-color2) 0, var(--i-color2)  792px
              ,var(--i-color1) 0, var(--i-color1)  796px
              ,var(--i-color2) 0, var(--i-color2)  800px
              ,var(--i-color1) 0, var(--i-color1)  804px
              ,var(--i-color2) 0, var(--i-color2)  808px
              ,var(--i-color1) 0, var(--i-color1)  812px
              ,var(--i-color2) 0, var(--i-color2)  816px
              ,var(--i-color1) 0, var(--i-color1)  820px
              ,var(--i-color2) 0, var(--i-color2)  824px
              ,var(--i-color1) 0, var(--i-color1)  828px
              ,var(--i-color2) 0, var(--i-color2)  832px
              ,var(--i-color1) 0, var(--i-color1)  836px
              ,var(--i-color2) 0, var(--i-color2)  840px
              ,var(--i-color1) 0, var(--i-color1)  844px
              ,var(--i-color2) 0, var(--i-color2)  848px
              ,var(--i-color1) 0, var(--i-color1)  852px
              ,var(--i-color2) 0, var(--i-color2)  856px
              ,var(--i-color1) 0, var(--i-color1)  860px
              ,var(--i-color2) 0, var(--i-color2)  864px
              ,var(--i-color1) 0, var(--i-color1)  868px
              ,var(--i-color2) 0, var(--i-color2)  872px
              ,var(--i-color1) 0, var(--i-color1)  876px
              ,var(--i-color2) 0, var(--i-color2)  880px
              ,var(--i-color1) 0, var(--i-color1)  884px
              ,var(--i-color2) 0, var(--i-color2)  888px
              ,var(--i-color1) 0, var(--i-color1)  892px
              ,var(--i-color2) 0, var(--i-color2)  896px
              ,var(--i-color1) 0, var(--i-color1)  900px
              ,var(--i-color2) 0, var(--i-color2)  904px
              ,var(--i-color1) 0, var(--i-color1)  908px
              ,var(--i-color2) 0, var(--i-color2)  912px
              ,var(--i-color1) 0, var(--i-color1)  916px
              ,var(--i-color2) 0, var(--i-color2)  920px
              ,var(--i-color1) 0, var(--i-color1)  924px
              ,var(--i-color2) 0, var(--i-color2)  928px
              ,var(--i-color1) 0, var(--i-color1)  932px
              ,var(--i-color2) 0, var(--i-color2)  936px
              ,var(--i-color1) 0, var(--i-color1)  940px
              ,var(--i-color2) 0, var(--i-color2)  944px
              ,var(--i-color1) 0, var(--i-color1)  948px
              ,var(--i-color2) 0, var(--i-color2)  952px
              ,var(--i-color1) 0, var(--i-color1)  956px
              ,var(--i-color2) 0, var(--i-color2)  960px
              ,var(--i-color1) 0, var(--i-color1)  964px
              ,var(--i-color2) 0, var(--i-color2)  968px
              ,var(--i-color1) 0, var(--i-color1)  972px
              ,var(--i-color2) 0, var(--i-color2)  976px
              ,var(--i-color1) 0, var(--i-color1)  980px
              ,var(--i-color2) 0, var(--i-color2)  984px
              ,var(--i-color1) 0, var(--i-color1)  988px
              ,var(--i-color2) 0, var(--i-color2)  992px
              ,var(--i-color1) 0, var(--i-color1)  996px
              ,var(--i-color2) 0, var(--i-color2)  1000px
              ,var(--i-color1) 0, var(--i-color1)  1004px
              ,var(--i-color2) 0, var(--i-color2)  1008px
              ,var(--i-color1) 0, var(--i-color1)  1012px
              ,var(--i-color2) 0, var(--i-color2)  1016px
              ,var(--i-color1) 0, var(--i-color1)  1020px
              ,var(--i-color2) 0, var(--i-color2)  1024px
              ,var(--i-color1) 0, var(--i-color1)  1028px
              ,var(--i-color2) 0, var(--i-color2)  1032px
              ,var(--i-color1) 0, var(--i-color1)  1036px
              ,var(--i-color2) 0, var(--i-color2)  1040px
              ,var(--i-color1) 0, var(--i-color1)  1044px
              );}
  


/*公版bg_Layout*/
.bg_Layout { position: absolute;  }
    /*BN*/
    .bg_Layout .PD_Layout_BN { position: relative;}
    .bg_Layout .PD_Layout_BN .PD_img,
    .bg_Layout .PD_Layout_BN .PD .PD_logo { display: none;}
        @media screen and (min-width:768px){
/*		      .bg_Layout {height: 801px;}*/
          .bg_Layout .PD_Layout_BN  .PD_layout ul { padding-top: 20px;}
                   .bg_Layout .PD_Layout_BN {z-index: 0;position: absolute;top: 0;left: 0px;width: 1040px;}

          .bg_Layout .PD_Layout_BN .PD_img { display: block;}
          .bg_Layout .PD_Layout_BN .PD_into { display: none;}
        }
        @media screen and (max-width:767px){
          .bg_Layout .PD_Layout_BN .PD .PD_logo { display: block;}
          .bg_Layout .PD_Layout_BN  .PD_layout ul { padding: 0;}
          .bg_Layout .PD_Layout_BN  .PD_layout li { margin-bottom: 0;}
        }
    /*PD*/
    .bg_Layout .bg_Layout-PD .PD h3 { background-color: #000;}
        @media screen and (min-width:768px){
          .bg_Layout .bg_Layout-PD {position:absolute;top:0px;left:0px;display: block;width:100%;}
          .bg_Layout .bg_Layout-PD  .PD_layout {position: relative}
          .bg_Layout .bg_Layout-PD  .PD_layout ul { padding-top: 20px;width: 50%;float: left;}
          .bg_Layout .bg_Layout-PD [data-pd-col-pc*="4"] li:nth-child(4n+1) { margin-left: 10px;}
          .bg_Layout .bg_Layout-PD [data-pd-col-pc*="4"] li:nth-child(4n+3) { margin-left: 0;}
          .bg_Layout .bg_Layout-PD [data-pd-col-pc*="4"] .PD_slide:first-child { margin-left: 579px}
        }
        @media screen and (max-width:767px){
		      .bg_Layout {margin-bottom: 4%; background-color: #c2b1a0;}
          .bg_Layout .PD_Layout_BN .PD .PD_logo { display: block;}
        }
        /*針對ECM編輯模式下，編輯按鈕重疊問題修正
        @media screen and (min-width:768px){
          .bg_Layout .bg_Layout-PD { position: relative; left: 80px;}
          .bg_Layout .bg_Layout-PD .PD_layout { position: relative; left: -80px;}
        }*/