@charset "utf-8";
/*Background_setting*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
*{ margin:0; padding:0; line-height:1.8; font-family:'Noto Sans TC',sans-serif; /**font-size:16px;**/ font-weight:400; box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box; color:#333;}
*:focus { outline:4px solid #000000; outline-offset:-8px !important; border:solid 4px rgb(255 0 0) !important; }
::selection{ background-color:#aeeae6; color:#333;}
font{ color:inherit; font:inherit; line-height:inherit;}
a{ text-decoration:none;}
img{ max-width:100%;}
body{ overflow-x:hidden; }
footer .bottomImg .txts:has(.accessLink){ padding:10px; }
footer .bottomImg .txts .txtinline:has(.accessLink){ display:inline-flex; justify-content:center; align-items:center; }
footer .accessLink{ margin-top:5px; display:inline-block; }
@media screen and ( max-width: 1200px) {
    footer .bottomImg .txts:has(.accessLink){ padding:20px; }
    footer .bottomImg .txts .txtinline:has(.accessLink){ flex-direction: column; }
}

#gotocenter {
  position: absolute;
  width: 0.063rem;
  height: 0.063rem;
  padding: 0;
  margin: -0.063rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  z-index: 101;
}
#gotocenter:focus {
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  background: #fff;
  padding: 0 10px;
  color: #00a3e6;
}

.fastLink {
    opacity: 0;
}
.fastLink:focus,.fastLink:hover {
    opacity: 1;
}

/*header*/
header{ position: relative; z-index: 50; }
header .topbanner{ background: #6ab5db; position:relative; }
header .topbanner img{ width: 100%; vertical-align: middle; }
header .topbanner .backBanner{ display:block; position:absolute; top:4px; left:4px; bottom:4px; right:4px; margin:auto; text-indent:-9999999px; z-index: 1; }
header .topbanner .sitemapLink{ position:absolute; top:5px; right:5px; background-color:#181818; color:#fff; font-size:1rem; padding:0 10px; z-index:2; }
header .menuBox{ background-color: #e5f8f4; padding: 5px 20px; position:relative; z-index: 1; transition:all 0.5s cubic-bezier(0.37, 0, 0.63, 1); }
header .menuBox .fastLink{ position:absolute; top:0; left:0; }
header .menuBox .menuflex{ display: flex; margin-left: -10px; flex-wrap:wrap; }
header .menuBox .menuflex .mgrids{ padding: 5px 0 5px 10px; position: relative; flex:1; max-width:243px; }
header .menuBox .menuflex .mgrids .ms{ display: flex; width: 100%; background-color: #ccc; padding:0 5px; align-items: center; min-height: 43px; }
header .menuBox .menuflex .mgrids .ms .icon{ width: 43px; background-position: center; background-size: cover; background-repeat: no-repeat; position:relative; overflow:hidden; }
header .menuBox .menuflex .mgrids .ms .icon img{ position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:100%; }
header .menuBox .menuflex .mgrids .ms .icon:after{ content: ""; display: block; padding-bottom: 100%; width: 100%; }
header .menuBox .menuflex .mgrids .ms .txt{ font-size: 1.375rem; color: #fff; font-weight: 500; flex:1; text-align: center; white-space:nowrap; }
header .menuBox .menuflex .mgrids.bgcolor01 .ms{ background-color: #275f70; }
header .menuBox .menuflex .mgrids.bgcolor02 .ms{ background-color: #004557; }
header .menuBox .menuflex .mgrids.bgcolor03 .ms{ background-color: #001c25; }
header .menuBox .menuflex .mgrids.bgcolor04 .ms{ background-color: #008237; }
header .menuBox .menuflex .mgrids.bgcolor05 .ms{ background-color: #00582c; }
header .menuBox .menuflex .mgrids.bgcolor06 .ms{ background-color: #a36200; }
header .menuBox .menuflex .mgrids.bgcolor07 .ms{ background-color: #704400; }

/*
header .menuBox .menuflex .mgrids.i02,header .menuBox .menuflex .mgrids.i03,header .menuBox .menuflex .mgrids.i04,header .menuBox .menuflex .mgrids.i05{ width: 10%; min-width: 135px; }
header .menuBox .menuflex .mgrids.i01,header .menuBox .menuflex .mgrids.i06,header .menuBox .menuflex .mgrids.i07{ width: 14%; min-width: 166px; }
header .menuBox .menuflex .mgrids.i08{ width: 18%; min-width: 192px; }
*/

header .menuBox .menuflex .mgrids .du{ min-width:100%;  padding: 10px 0 0 0; position: absolute; left: 10px; top: 43px; display:block; opacity: 0; z-index: 5; pointer-events: none; }
header .menuBox .menuflex .mgrids .du .wbg{ background-color: #fff; width: 100%; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
header .menuBox .menuflex .mgrids .du .wbg .lists{ display: block; padding: 5px 10px; font-size: 1.375rem; color: #585858; white-space:nowrap; }

header .menuBox .menuflex .mgrids .ms:focus + .du{ opacity: 1; }
header .menuBox .menuflex .mgrids .ms:focus + .du .lists{  pointer-events: auto; }
header .menuBox .menuflex .mgrids .du:has(.lists:focus){ opacity: 1; pointer-events: auto; }

header .menuBox .menuflex .mgrids .titleSp{ display:none; }
header .menuBtn{ display: none; position: absolute; right: 30px; top: 35px; width: 34px; height: 29px; z-index: 10; padding: 0 5px; cursor: pointer; background-color: #4fc1e4; border: unset; }
header .menuBtn span{ display: block; background-color:#fff; height: 3px; margin: 5px 0; }
header.menuShow .menuBtn{ background: none; }
header.menuShow .menuBtn span{ background-color: #fff; }
header.menuShow .menuBtn span:nth-child(1){ transform: rotate(45deg); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
header.menuShow .menuBtn span:nth-child(2){ display: none; }
header.menuShow .menuBtn span:nth-child(3){ transform: rotate(-45deg); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
header .menuBox .siteSp{ display:none; }

header .logo{ display:none; }

.moveDown header .menuBox{ position:fixed; top:0; left:0; width:100%; }

/*content*/
.wrapper{ padding-top:135px; /*min-height:100vh;*/}
.effect_center{ display:flex; flex-direction:column; justify-content:center; align-items:center;}
.anchor_point{ display:block; position:relative; top:-250px;}
.anchor_point.ap_products_detail{ top:-100px; }
.anchor_point.ap_products_detail_con{ top:-240px; }
input{ width:100%; border:0; border-bottom:1px solid #ccc; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; line-height:40px; height:40px; padding:0 15px; transition:.3s;}
input:focus{ border-bottom-color:#6b8ba0; transition:.3s;}
select{ width:100%; border:0; border-bottom:1px solid #ccc; line-height:40px; height:40px; padding:0 35px 0 15px; appearance:none; -moz-appearance:none; -webkit-appearance:none; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; position:relative; background:url(../images/layout/select_arrow.png) no-repeat center right; background-size:40px;}
select:focus{ border-bottom-color:#6b8ba0; transition:.3s;}
.select_box{ display:inline-block; width:auto; border:1px solid #ccc;}
textarea{ border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;}

/*footer*/
footer{ background-color: #fff; padding-top: 60px; position:relative; }
footer .fastLink{ position:absolute; top:0; left:0; }
footer .topMenu{ display: flex; grid-gap:20px; padding: 0 40px; }
footer .topMenu ul{ list-style-type:none; }
footer .topMenu .grid{ flex:1 }
footer .topMenu .grid .h1{ display: block; font-size: 1.5625rem; color: #333; font-weight: bold; margin-bottom: 10px; }
footer .topMenu .grid .p{ display: block; font-size: 1.25rem; color: #005f85; margin-bottom: 10px; line-height: 1.6; }
footer .bottomImg{ font-size: 0; position: relative; }
footer .bottomImg .txts{ position: absolute; left: 20px; right: 20px; bottom: 50px; margin: auto; text-align: center; z-index:5; background-color: rgba(0, 0, 0, 0.3); padding: 20px; margin-bottom: -40px; }
footer .bottomImg .txts .txtinline{ display: inline-block; color: #fff; font-size: 1.125rem; margin: 0 10px; }
footer .bottomImg .txts .txtinline a{ color: inherit; font-size: inherit; text-decoration: none; }
footer .bottomImg .txts .txtinline.Wide{ width:100%;}

footer .pc_img{ width:100%; padding-bottom:26%; overflow:hidden; position:relative; font-size:0; z-index:1; }
footer .pc_img img{ position:absolute; top:0; left:0; width:100%; }
footer .sp_img{ display:none; }

/*登入光箱*/
.loginbox{ position:fixed; top:0; left:0; right:0; bottom:0; margin:auto; z-index:150; background:rgba(0,0,0,0.7); display:flex; flex-wrap: wrap; align-content: center; justify-content: center; }
.loginbox .wblock{ background:#fff; padding:25px; border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px; max-width:496px; width:96%; }
.loginbox .wblock .closebox{ display:block; text-align:right; width: 100%; }
.loginbox .wblock .closebox .closes{ display:inline-block; width:22px; height:22px; position:relative; cursor:pointer; }
.loginbox .wblock .closebox .closes:before{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; display:block; width:100%; height:2px; background:#bfbfbf; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); }
.loginbox .wblock .closebox .closes:after{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; display:block; width:100%; height:2px; background:#bfbfbf; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); }
.loginbox .wblock .ltitles{ display:block; width:100%; text-align:center; position:relative; margin:0 0 10px 0; }
.loginbox .wblock .ltitles .h1s{ font-size:1.125rem; color:#4a4a4a; font-weight:bold; position:relative; z-index:2; background:#fff; padding:0 15px; display:inline-block; }
.loginbox .wblock .ltitles .line{ width:100%; height:1px; position:absolute; top:50%; margin-top:-1px; background:#bfbfbf; z-index:1; }
.loginbox .wblock .munity{ font-size:0; margin-bottom:25px; display:flex; }
.loginbox .wblock .munity .linkgrids{ display:block; width:48px; margin:10px; }
.loginbox .wblock .munity .linkgrids .linkbg{ width:100%; padding-bottom:100%; display:block; text-decoration:none; position:relative; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; }
.loginbox .wblock .munity .linkgrids .linkbg img{ max-width:100%; width:40px; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; }
.loginbox .wblock .formTable{ padding:0 10px; }
.loginbox .wblock .formTable .flist{ margin:0 0 15px 0; }
.loginbox .wblock .formTable .flist.flex{ display:flex; }
.loginbox .wblock .formTable .flist.error .f2{ border:2px solid #ff3140; }
.loginbox .wblock .formTable .flist.error .f3{ border:2px solid #ff3140; }
.loginbox .wblock .formTable .flist .f1{ font-size:1rem; color:#4a4a4a; padding:0 10px; margin-bottom:8px; }
.loginbox .wblock .formTable .flist .f2{ border:1px solid #bfbfbf; padding:0 50px 0 15px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; position:relative; }
.loginbox .wblock .formTable .flist .f3{ display:inline-block; vertical-align:middle; border:1px solid #bfbfbf; padding:0 15px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; width:200px; }
.loginbox .wblock .formTable .flist .ertxt{ color:#ff3140; font-size:1rem; }
.loginbox .wblock .formTable .flist .input{ width:100%; background:none; border:none; line-height:42px; height:42px; font-size:1rem; color:#4a4a4a; padding:0; }
.loginbox .wblock .formTable .flist .passicon{ width:26px; height:26px; position:absolute; right:10px; top:50%; margin-top:-13px; }
.loginbox .wblock .formTable .flist .passicon img{ width:100%; }
.loginbox .wblock .formTable .flist .code{ display:inline-flex; vertical-align:middle; font-size:0; border:2px solid #3c3c3c; padding:0 15px; background:#3c3c3c; width:112px; text-align:center; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; margin:0 0 0 20px; overflow:hidden; justify-content: center; align-items: center; }
.loginbox .wblock .formTable .flist .code img{ max-width:100%; }
.loginbox .wblock .formTable .flist .rebtn{ display:inline-block; vertical-align:middle; cursor:pointer; margin:0 0 0 20px; font-size:1.25rem; }

.loginbox .wblock .formTable .flist .button_01{ width:100%; line-height:44px; height:44px; text-align:center; color:#fff; font-size:1rem; font-weight:bold; border:none; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; cursor:pointer; background: -moz-linear-gradient(left, #6b8ba0 0%, #356080 100%); background: -webkit-linear-gradient(left, #6b8ba0 0%,#356080 100%); background: linear-gradient(to right, #6b8ba0 0%,#356080 100%); }
.loginbox .wblock .formTable .flist .button_02{ width:100%; background:none; line-height:42px; height:42px; text-align:center; color:#22a1c4; font-size:1rem; font-weight:bold; border:1px solid #22a1c4; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; cursor:pointer; }
.loginbox .wblock .formTable .flist:last-child{ margin:0; }
.loginbox .wblock .formTable .flist .fortxt{ color:#313131; font-size:.875rem; text-decoration:none; font-weight:bold; }

.loginbox .wblock .fText{ font-size:1rem; color:#4a4a4a; padding:0 10px 25px 10px; }
.loginbox .wblock .fTextline{ font-size:1rem; color:#4a4a4a; padding-top:25px; padding-bottom:25px; margin-top:25px; border-top:1px solid #bfbfbf; }

/*new*/
.newTextMark{ display:inline-block; vertical-align: middle; margin: 0 3px; background-color:#b50000; padding:0 5px; position:relative; }
.newTextMark .txtFlash{ font-size:1rem; color:#fff; line-height:24px; height:26px; }

/*TOP*/
.topwebbtn{ position:fixed; display:flex; bottom:20px; right:20px; width:60px; height:60px; background-color:#297da3; color:#fff; font-size:.875rem; border-radius:50%; align-items: center; justify-content: center; box-shadow: 2px 2px 3px rgba(0,0,0,0.3); z-index:20; border:unset; cursor:pointer; }

/*■■■■■■■■■■■■■■■■共用區塊■■■■■■■■■■■■■■■*/
.content-box{ max-width:1400px; width:100%; margin:auto; padding:0 40px; }
.content-box.full{ max-width:none; padding:0px; }
.content-box.full_spacing{ max-width:none; }

.content-box.continuous + .continuous{ margin-top:-6.25rem; }
.content-box.continuous + .continuous .photoTitle{ margin-top:12.5rem; }


.content-box ul{ padding-left:30px; }
.content-box ul li{ list-style-type: none; padding: 10px 0; position: relative; }
.content-box ul li::before{ content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 6px solid #073c84; background-color: #fff; position: absolute; top:15px; left: -30px; }


/** page_info **/
.page_info{ background-color:#f5f5f5; position:relative; z-index:10;}
.page_info .label{ padding:10px 0;}
.page_info .label .page_name{ line-height:20px; color:#777; font-size:.875rem; display:inline-block; vertical-align:text-bottom; margin:0; }
.page_info .label .fa{ font-family: 'Noto Sans TC', sans-serif; }
.page_info .label a.page_name{ padding-right:25px; position:relative;}
.page_info .label a.page_name::before{ line-height:20px; top:0; right:10px; position:absolute; font-family:"FontAwesome"; }
.page_info .label p.page_name{ color:#333; font-weight:300;}

.page_info .page_menu{ border-top:1px solid #ccc; padding:20px 0; z-index:2 !important;}

.hor_flex{ display:flex; }
.hor_box{ overflow-y:hidden;}
.hor_box .range{ overflow-x:scroll; overflow-y:hidden; white-space:nowrap; }
.page_info .page_menu .select_ap{ line-height:38px; height:36px; border:1px solid #ccc; padding:0 20px; color:#333; margin-top:2px; margin-right:6px; border:1px solid #ccc; display:inline-block; vertical-align:top;}
.page_info .page_menu .select_ap.focus{ border-color:#356080; color:#356080; font-weight:400;}


/**按鈕**/
.button_btn_box{ text-align:center;}
.button_btn_box .back_btn{ display:inline-block; padding:0 30px; line-height:50px; height:50px; border-radius:25px; color:#fff; background: #6b8ba0; background: -moz-linear-gradient(left, #6b8ba0 0%, #356080 100%); background: -webkit-linear-gradient(left, #6b8ba0 0%,#356080 100%); background: linear-gradient(to right, #6b8ba0 0%,#356080 100%); border:0; margin:0 10px; cursor:pointer;}
.button_btn_box .link_btn{ display:inline-block; padding:0 30px; line-height:50px; height:50px; border-radius:25px; color:#333; background:#f5f5f5; border:0; margin:0 10px; cursor:pointer;}
.button_btn_box .open_btn{ display:inline-block; padding:0 30px; line-height:50px; height:50px; border-radius:25px; color:#fff; background:#123377; border:0; margin:0 10px; cursor:pointer;}
.button_btn_box .open_btn .fa{ color:#fff;}
.line{ border-top:1px solid #ccc; margin:50px 0;}

/*margin*/
.margin-seesaw-10{ margin-top:0.625rem; margin-bottom:0.625rem; }
.margin-seesaw-15{ margin-top:0.938rem; margin-bottom:0.938rem; }
.margin-seesaw-20{ margin-top:1.25rem; margin-bottom:1.25rem; }
.margin-seesaw-100{ margin-top:6.25rem; margin-bottom:6.25rem; }

.margin-beside-10{ margin-left:0.625rem; margin-right:0.625rem; }
.margin-beside-15{ margin-left:0.938rem; margin-right:0.938rem; }
.margin-beside-20{ margin-left:1.25rem; margin-right:1.25rem; }

/*inline align*/
.inline-center{ text-align:center; }
.inline-left{ text-align:left; }
.inline-right{ text-align:right; }

/*button*/
.btn{ display:inline-block; vertical-align:middle; text-decoration:none; border:none; background:none; padding:0 0.938rem; border-radius:0.313rem; -webkit-border-radius:0.313rem; -moz-border-radius:0.313rem; line-height:2.375rem; cursor:pointer; }
.btn *{ color:revert; }
.btn.whit-nowrap{ white-space:nowrap; }
.btn.width-100{ width:100%; }

/* A11y Fixed v.25.09.30 */
.btn-red{ background-color:#b50000; color:#fff; border:1px solid #b50000; }
.btn-orange{ background-color:#973c00; color:#fff; border:1px solid #973c00; }
.btn-yellow{ background-color:#6b5600; color:#333; border:1px solid #6b5600; }
.btn-green{ background-color:#316331; color:#fff; border:1px solid #316331; }
.btn-blue{ background-color:#305894; color:#fff; border:1px solid #305894; }
.btn-purple{ background-color:#7928c9; color:#fff; border:1px solid #7928c9; }
.btn-pink{ background-color:#971e97; color:#fff; border:1px solid #971e97; }
.btn-gray{ background-color:#585858; color:#333; border:1px solid #585858; }
.btn-black{ background-color:#000; color:#fff; border:1px solid #000; }

/* A11y Fixed v.25.09.30 */
.btn-red-outline{ color:#b50000; border:1px solid #b50000; }
.btn-orange-outline{ color:#973c00; border:1px solid #973c00; }
.btn-yellow-outline{ color:#6b5600; border:1px solid #6b5600; }
.btn-green-outline{ color:#316331; border:1px solid #316331; }
.btn-blue-outline{ color:#305894; border:1px solid #305894; }
.btn-purple-outline{ color:#7928c9; border:1px solid #7928c9; }
.btn-pink-outline{ color:#971e97; border:1px solid #971e97; }
.btn-gray-outline{ color:#585858; border:1px solid #585858; }
.btn-black-outline{ color:#000; border:1px solid #000; }


/*Word*/
.h1{ font-size:2.5rem; font-weight:700; }
.h2{ font-size:2rem; font-weight:700; }
.h3{ font-size:1.75rem; font-weight:700; }
.h4{ font-size:1.5rem; font-weight:700; }
.h5{ font-size:1.25rem; font-weight:700; }
.h6{ font-size:1rem; font-weight:700; }

.p1{ font-size:2.5rem; }
.p2{ font-size:2rem; }
.p3{ font-size:1.75rem; }
.p4{ font-size:1.5rem; }
.p5{ font-size:1.25rem; }
.p6{ font-size:1rem; }
.p7{ font-size:0.875rem; }
.p8{ font-size:0.75rem; }


/*================================●●●●●●●●●●●●Hover●●●●●●●●●●●●================================*/
@media screen and ( min-width: 1201px) {
/*header*/
header .botton_bar .menu .link:hover .links_box{ display:block;}
header .menuBox .menuflex .mgrids:hover .du{ opacity: 1; pointer-events: auto; }
}


/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and ( max-width: 1200px) and ( min-width: 768px) {
body.body_fixed{ overflow:hidden;}
/*header*/
header .topbanner{ overflow: hidden; position: relative; height: 100px; width: 100%; }
header .topbanner img{ max-width: none; height: 100px; width: auto; position: absolute; left: 50%; transform: translateX(-50%); }
header .topbanner .sitemapLink{ display:none; }

header .menuBtn{ display: block; }
header .menuBox{ opacity:0; background: #333; position: fixed; top: 0; right: -100%; width: 245px; height: 100dvh; padding: 120px 0 0 0; }
header.menuShow .menuBox{ opacity:1; right: 0%; }
header .menuBox .menuflex{ margin-left: 0; height: 100%; overflow-y: auto; flex-wrap:wrap; }
header .menuBox .menuflex .mgrids{ padding: 0; }
header .menuBox .menuflex .mgrids .titleSp{ padding: 5px 0 0 10px; display: block; font-size: 1.5625rem; color: #fff; }
header .menuBox .menuflex .mgrids .ms{ padding: 0; margin: 0 10px; width: auto; }
header .menuBox .menuflex .mgrids .ms .txt{ text-align: left; padding: 0 0 0 15px; }
header .menuBox .menuflex .mgrids.i01,
header .menuBox .menuflex .mgrids.i02,
header .menuBox .menuflex .mgrids.i03,
header .menuBox .menuflex .mgrids.i04,
header .menuBox .menuflex .mgrids.i05,
header .menuBox .menuflex .mgrids.i06,
header .menuBox .menuflex .mgrids.i07,
header .menuBox .menuflex .mgrids.i08{ width: 100%; }

header .menuBox .menuflex .mgrids .du{ display: block; position: static; padding: 0; border-top: 1px solid #1a1a1a; margin-top: 10px; opacity: 1; pointer-events: auto; }
header .menuBox .menuflex .mgrids .du .wbg{ background: none; }
header .menuBox .menuflex .mgrids .du .wbg .lists{ color: rgba(255,255,255,0.8); font-size: .8125rem; border-top: 1px solid #4d4d4d; border-bottom: 1px solid #1a1a1a; padding: 10px 10px 10px 50px; }
header .menuBox .menuflex .mgrids .du .wbg .lists:hover{ box-shadow: 0 0 15px 3px #222 inset; }

header .menuBox .fastLink{ top:70px; left:0px; }
header .menuBox .siteSp{ display: block; color: #fff; position: absolute; top: 75px; left: 10px; border: 1px solid #fff; width: 98px; text-align: center; }

.menuBox *:focus{ outline-color:#fff !important; border-color:#b50000 !important; }

/*Pad - 選單行為*/
/* header .menuBtn:focus ~ .menuBox,
.menuBox:has(:focus){ opacity:1; right: 0%; } */
header:not(.menuShow) .menuBox .fastLink,
header:not(.menuShow) .menuBox .siteSp,
header:not(.menuShow) .menuBox .menuflex *{ display:none !important; }

header .logo{ display:none; }
.moveDown{ padding-top:100px; }
.moveDown header .logo{ display:block; font-size:0; position: absolute; top: 22px; left: 20px; }
.moveDown header{ position:fixed; top:0; left:0; background-color:#fff; height:100px; box-shadow: 0 5px 5px rgba(0,0,0,0.1); width: 100%; }
.moveDown header .topbanner{ background-color:#fff; }
.moveDown header .topbanner > img{ display:none; }

.moveDown header .menuBox{ width: 245px; left:auto; }

/*footer*/
footer .topMenu{ padding: 0 20px; }
footer .topMenu .grid .h1{ font-size: 1.125rem; }
footer .topMenu .grid .p{ font-size: .875rem; }

footer .bottomImg{ overflow:hidden; }
footer .bottomImg:before{ content:""; display:block; padding-top:16%; width:100%; }
footer .bottomImg:after{ content:""; display:block; padding-top:5%; width:100%; }
footer .bottomImg .txts{ position: relative; left: auto; right: auto; bottom: auto; padding: 20px 0; margin-bottom: -20px; }

footer .pc_img{ display:none; }
footer .sp_img{ display:block; position:absolute; top:0; left:0; width:100%; font-size:0; }
footer .sp_img img{ width:100%; }


/*■■■■■■■■■■■■■■■■共用區塊■■■■■■■■■■■■■■■*/
.content-box{ padding:0 20px; }


}


/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and ( max-width: 767.9px) {
body.body_fixed{ overflow:hidden;}
/*header*/
header .topbanner{ overflow: hidden; position: relative; height: 50px; width: 100%; }
header .topbanner img{ max-width: none; height: 50px; width: auto; position: absolute; left: 50%; transform: translateX(-50%); }
header .topbanner .sitemapLink{ display:none; }

header .menuBtn{ display: block; right: 10px; top: 10px; }
header.menuShow .menuBtn span:nth-child(1){ transform: rotate(45deg); position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; margin: auto; }
header.menuShow .menuBtn span:nth-child(3){ transform: rotate(-45deg); position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; margin: auto; }
header .menuBox{ background: #333; position: fixed; top: 0; right: -100%; width: 245px; height: 100dvh; padding: 100px 0 0 0; transition: right 0.5s cubic-bezier(0.37, 0, 0.63, 1); }
header.menuShow .menuBox{ right: 0%; }
header .menuBox .menuflex{ margin-left: 0; height: 100%; overflow-y: auto; flex-wrap:wrap; }
header .menuBox .menuflex .mgrids{ padding: 0; }
header .menuBox .menuflex .mgrids .titleSp{ padding: 5px 0 0 10px; display: block; font-size: 1.5625rem; color: #fff; }
header .menuBox .menuflex .mgrids .ms{ padding: 0; margin: 0 10px; width: auto; }
header .menuBox .menuflex .mgrids .ms .txt{ text-align: left; padding: 0 0 0 15px; }
header .menuBox .menuflex .mgrids.i01,
header .menuBox .menuflex .mgrids.i02,
header .menuBox .menuflex .mgrids.i03,
header .menuBox .menuflex .mgrids.i04,
header .menuBox .menuflex .mgrids.i05,
header .menuBox .menuflex .mgrids.i06,
header .menuBox .menuflex .mgrids.i07,
header .menuBox .menuflex .mgrids.i08{ width: 100%; }

header .menuBox .menuflex .mgrids .du{ display: block; position: static; padding: 0; border-top: 1px solid #1a1a1a; margin-top: 10px; opacity: 1; pointer-events: auto; }
header .menuBox .menuflex .mgrids .du .wbg{ background: none; }
header .menuBox .menuflex .mgrids .du .wbg .lists{ color: rgba(255,255,255,0.8); font-size: .8125rem; border-top: 1px solid #4d4d4d; border-bottom: 1px solid #1a1a1a; padding: 10px 10px 10px 50px; }
header .menuBox .menuflex .mgrids .du .wbg .lists:hover{ box-shadow: 0 0 15px 3px #222 inset; }

header .menuBox .fastLink{ top:45px; left:0px; }
header .menuBox .siteSp{ display:block; color:#fff; position:absolute; top:50px; left:10px; border:1px solid #fff; width:98px; text-align:center; }/*Pad 選單行為*/

/* 無障礙 - 選單行為 */
header:not(.menuShow) .menuBox .fastLink,
header:not(.menuShow) .menuBox .siteSp,
header:not(.menuShow) .menuBox .menuflex *{ display:none !important; }

header .logo{ display:none; }
.moveDown{ padding-top:50px; }
.moveDown header .logo{ display:block; font-size:0; position: absolute; top: 8px; left: 10px; width:180px; }
.moveDown header{ position:fixed; top:0; left:0; background-color:#fff; height:50px; box-shadow: 0 5px 5px rgba(0,0,0,0.1); width: 100%; }
.moveDown header .topbanner{ background-color:#fff; }
.moveDown header .topbanner > img{ display:none; }

.moveDown header .menuBox{ width: 245px; left:auto; }

/*content*/
.wrapper{ padding-top:95px;}

/*footer*/
footer{ padding-top: 30px; }
footer .topMenu{ padding: 0 20px; flex-wrap: wrap; grid-gap:10px 0; margin-bottom: 30px; }
footer .topMenu .grid{ flex:none;  width: 50%; }
footer .topMenu .grid .h1{ font-size: 1.125rem; }
footer .topMenu .grid .p{ font-size: .875rem; }
footer .bottomImg .txts .txtinline{ font-size: .75rem; }

footer .bottomImg{ overflow:hidden; }
footer .bottomImg:before{ content:""; display:block; padding-top:16%; width:100%; }
footer .bottomImg:after{ content:""; display:block; padding-top:5%; width:100%; }
footer .bottomImg .txts{ position: relative; left: auto; right: auto; bottom: auto; }

footer .pc_img{ display:none; }
footer .sp_img{ display:block; position:absolute; top:0; left:0; width:100%; font-size:0; }
footer .sp_img img{ width:100%; }

/*登入光箱*/
.loginbox .wblock{ padding:15px; }
.loginbox .wblock .formTable .flist{ margin-bottom:10px; }
.loginbox .wblock .formTable .flist .code{ margin:0 0 0 10px; }
.loginbox .wblock .formTable .flist .rebtn{ margin:0 0 0 10px; }
.loginbox .wblock .formTable .flist .f1{ font-size:.875rem; }
.loginbox .wblock .formTable .flist .input{ line-height:36px; height:36px; }
.loginbox .wblock .ltitles .h1s{ font-size:1rem; }
.loginbox .wblock .munity{ margin:0 0 15px 0; }
.loginbox .wblock .munity .linkgrids{ margin:5px; width: 38px; }
.loginbox .wblock .munity .linkgrids .linkbg img{ width:30px; }

/*TOP*/
.topwebbtn{ width:50px; height:50px; }

/*■■■■■■■■■■■■■■■■共用區塊■■■■■■■■■■■■■■■*/
body.body_fixed { overflow:hidden; }
	
.content-box{ padding:0 20px; }	
.content-box.continuous + .continuous { margin-top:-3.125rem; }
.content-box.continuous + .continuous .photoTitle{ margin-top:6.25rem; }

/*margin*/
.margin-seesaw-0-sm{ margin-top:0; margin-bottom:0; }
.margin-seesaw-10-sm{ margin-top:0.625rem; margin-bottom:0.625rem; }
.margin-seesaw-15-sm{ margin-top:0.938rem; margin-bottom:0.938rem; }
.margin-seesaw-20-sm{ margin-top:1.25rem; margin-bottom:1.25rem; }
.margin-seesaw-50-sm{ margin-top:3.125rem; margin-bottom:3.125rem; }

.margin-beside-0-sm{ margin-left:0; margin-right:0; }
.margin-beside-10-sm{ margin-left:0.625rem; margin-right:0.625rem; }
.margin-beside-15-sm{ margin-left:0.938rem; margin-right:0.938rem; }
.margin-beside-20-sm{ margin-left:1.25rem; margin-right:1.25rem; }

/*inline align*/
.inline-center-sm{ text-align:center; }
.inline-left-sm{ text-align:left; }
.inline-right-sm{ text-align:right; }

/** page_info **/
.page_info .label{ padding:5px 0;}
.page_info .page_menu{ padding:10px 0;}
.page_info .page_menu .select_box_01{ width:100%; margin:0 0 10px 0;}
.page_info .page_menu .select_box_01 .display_area{ width:100%; display:block;}
.page_info .page_menu .select_box_01 .select_box{ width:100%;}
.page_info .page_menu .select_box_02{ width:100%; margin:0 0 10px 0;}
.page_info .page_menu .select_box_02 .display_area{ width:100%; display:block;}
.page_info .page_menu .select_box_02 .select_box{ width:100%;}
.page_info .page_menu .select_ap{ height:30px; line-height:28px; padding:0 10px; margin-right:3px; font-size:.875rem;}


/** 按鈕 **/
.button_btn_box .back_btn{ width:100%; text-align:center; margin:0 0 10px 0;}
.button_btn_box .link_btn{ width:100%; text-align:center; margin:0 0 10px 0;}

}


/* 淡入 */
.fadeIn_base { opacity: 0; visibility: hidden;
    transform: translate(   0px,   50px);
    -webkit-transition: all 1.2s cubic-bezier(0.42, 0, 0.58, 1.0);
    -moz-transition: all 1.2s cubic-bezier(0.42, 0, 0.58, 1.0);
    -o-transition: all 1.2s cubic-bezier(0.42, 0, 0.58, 1.0);
    transition: all 1.2s cubic-bezier(0.42, 0, 0.58, 1.0);
}
/*例外*/
header .language,
header .botton_bar,
.page_info .label,
.page_info .page_menu .fadeIn_base,
.hor_box .range .select_ap{ transform: translate(   0px,   0px); }

.prod_light_box .fadeIn_base{
    -webkit-transition: all 0.6s cubic-bezier(0.42, 0, 0.58, 1.0);
    -moz-transition: all 0.6s cubic-bezier(0.42, 0, 0.58, 1.0);
    -o-transition: all 0.6s cubic-bezier(0.42, 0, 0.58, 1.0);
    transition: all 0.6s cubic-bezier(0.42, 0, 0.58, 1.0);
}

.fadeIn_1s {
    -webkit-transition: all 1s cubic-bezier(0.42, 0, 0.58, 1.0);
    -moz-transition: all 1s cubic-bezier(0.42, 0, 0.58, 1.0);
    -otransition: all 1s cubic-bezier(0.42, 0, 0.58, 1.0);
    transition: all 1s cubic-bezier(0.42, 0, 0.58, 1.0);
}
.fadeIn_2s {
    -webkit-transition: all 2s cubic-bezier(0.42, 0, 0.58, 1.0);
    -moz-transition: all 2s cubic-bezier(0.42, 0, 0.58, 1.0);
    -otransition: all 2s cubic-bezier(0.42, 0, 0.58, 1.0);
    transition: all 2s cubic-bezier(0.42, 0, 0.58, 1.0);
}
.fadeIn_3s {
    -webkit-transition: all 3s cubic-bezier(0.42, 0, 0.58, 1.0);
    -moz-transition: all 3s cubic-bezier(0.42, 0, 0.58, 1.0);
    -otransition: all 3s cubic-bezier(0.42, 0, 0.58, 1.0);
    transition: all 3s cubic-bezier(0.42, 0, 0.58, 1.0);
}

.fadeIn_1s_delay { transition-delay: 1s; }
.fadeIn_2s_delay { transition-delay: 2s; }
.fadeIn_3s_delay { transition-delay: 3s; }

.fi_top {       transform: translate(   0px,   50px); }
.fi_bottom {    transform: translate(   0px,  -50px); }
.fi_left {      transform: translate( -50px,    0px); }
.fi_right {     transform: translate(  50px,    0px); }

.fi_end { opacity: 1; visibility: visible; transform: translate(0,0); }

/* Class 內 逐一進入 ( 公共 ) */
.fadeInBoxOrder .fadeIn_base.fadeIn_no00 { transition-delay: 0s; }
.fadeInBox .fadeIn_base:nth-child(1), .fadeInBoxOrder .fadeIn_base.fadeIn_no01 { transition-delay: 0.3s; }
.fadeInBox .fadeIn_base:nth-child(2), .fadeInBoxOrder .fadeIn_base.fadeIn_no02 { transition-delay: 0.6s; }
.fadeInBox .fadeIn_base:nth-child(3), .fadeInBoxOrder .fadeIn_base.fadeIn_no03 { transition-delay: 0.9s; }
.fadeInBox .fadeIn_base:nth-child(4), .fadeInBoxOrder .fadeIn_base.fadeIn_no04 { transition-delay: 1.2s; }
.fadeInBox .fadeIn_base:nth-child(5), .fadeInBoxOrder .fadeIn_base.fadeIn_no05 { transition-delay: 1.5s; }
.fadeInBox .fadeIn_base:nth-child(6), .fadeInBoxOrder .fadeIn_base.fadeIn_no06 { transition-delay: 1.8s; }
.fadeInBox .fadeIn_base:nth-child(7), .fadeInBoxOrder .fadeIn_base.fadeIn_no07 { transition-delay: 2.1s; }
.fadeInBox .fadeIn_base:nth-child(8), .fadeInBoxOrder .fadeIn_base.fadeIn_no08 { transition-delay: 2.4s; }
.fadeInBox .fadeIn_base:nth-child(9), .fadeInBoxOrder .fadeIn_base.fadeIn_no09 { transition-delay: 2.7s; }
.fadeInBox .fadeIn_base:nth-child(10), .fadeInBoxOrder .fadeIn_base.fadeIn_no10 { transition-delay: 3.0s; }
.fadeInBox .fadeIn_base:nth-child(11), .fadeInBoxOrder .fadeIn_base.fadeIn_no11 { transition-delay: 3.3s; }
.fadeInBox .fadeIn_base:nth-child(12), .fadeInBoxOrder .fadeIn_base.fadeIn_no12 { transition-delay: 3.6s; }
.fadeInBox .fadeIn_base:nth-child(13), .fadeInBoxOrder .fadeIn_base.fadeIn_no13 { transition-delay: 3.9s; }
.fadeInBox .fadeIn_base:nth-child(14), .fadeInBoxOrder .fadeIn_base.fadeIn_no14 { transition-delay: 4.2s; }
.fadeInBox .fadeIn_base:nth-child(15), .fadeInBoxOrder .fadeIn_base.fadeIn_no15 { transition-delay: 4.5s; }
.fadeInBox .fadeIn_base:nth-child(16), .fadeInBoxOrder .fadeIn_base.fadeIn_no16 { transition-delay: 4.8s; }
.fadeInBox .fadeIn_base:nth-child(17), .fadeInBoxOrder .fadeIn_base.fadeIn_no17 { transition-delay: 5.1s; }
.fadeInBox .fadeIn_base:nth-child(18), .fadeInBoxOrder .fadeIn_base.fadeIn_no18 { transition-delay: 5.4s; }
.fadeInBox .fadeIn_base:nth-child(19), .fadeInBoxOrder .fadeIn_base.fadeIn_no19 { transition-delay: 5.7s; }
.fadeInBox .fadeIn_base:nth-child(20), .fadeInBoxOrder .fadeIn_base.fadeIn_no20 { transition-delay: 6.0s; }

/* Class 內 逐一進入 ( 公共 mini ) */
.fadeInBox.miniTime1 .fadeIn_base:nth-child(1) { transition-delay: 0.1s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(2) { transition-delay: 0.2s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(3) { transition-delay: 0.3s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(4) { transition-delay: 0.4s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(5) { transition-delay: 0.5s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(6) { transition-delay: 0.6s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(7) { transition-delay: 0.7s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(8) { transition-delay: 0.8s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(9) { transition-delay: 0.9s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(10) { transition-delay: 1.0s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(11) { transition-delay: 1.1s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(12) { transition-delay: 1.2s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(13) { transition-delay: 1.3s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(14) { transition-delay: 1.4s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(15) { transition-delay: 1.5s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(16) { transition-delay: 1.6s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(17) { transition-delay: 1.7s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(18) { transition-delay: 1.8s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(19) { transition-delay: 1.9s; }
.fadeInBox.miniTime1 .fadeIn_base:nth-child(20) { transition-delay: 2.0s; }

.fadeInBox.miniTime2 .fadeIn_base:nth-child(1) { transition-delay: 0.2s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(2) { transition-delay: 0.4s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(3) { transition-delay: 0.6s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(4) { transition-delay: 0.8s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(5) { transition-delay: 1.0s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(6) { transition-delay: 1.2s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(7) { transition-delay: 1.4s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(8) { transition-delay: 1.6s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(9) { transition-delay: 1.8s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(10) { transition-delay: 2.0s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(11) { transition-delay: 2.2s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(12) { transition-delay: 2.4s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(13) { transition-delay: 2.6s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(14) { transition-delay: 2.8s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(15) { transition-delay: 3.0s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(16) { transition-delay: 3.2s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(17) { transition-delay: 3.4s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(18) { transition-delay: 3.6s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(19) { transition-delay: 3.8s; }
.fadeInBox.miniTime2 .fadeIn_base:nth-child(20) { transition-delay: 4.0s; }

/* Class 內 逐一進入 ( 客製 ) */
.fadeInBoxOrder.type1 .word_box,
.fadeInBoxOrder.type1 .image { transition-delay: 0.3s; }
.fadeInBoxOrder.type1 .img_box,
.fadeInBoxOrder.type1 .word { transition-delay: 0.9s; }

/* 圖文 ( 左右分割 ) */
.fadeInBoxOrder.type2 .fadeIn_base:nth-child(2), .fadeInBoxOrder.type3 .fadeIn_base:nth-child(1) { transition-delay: 0.3s; }
.fadeInBoxOrder.type2 .fadeIn_base:nth-child(1), .fadeInBoxOrder.type3 .fadeIn_base:nth-child(2) { transition-delay: 0.9s; }

/* 頁面 H1~H6 標示用 */
.heading{ position: relative; overflow: hidden; }
.headingSpan{ position: absolute; transform: translate( -100%, -100% ); }

/* 光箱 */
/*LightBox*/
.lightbox {/*display:none;*/background:rgba(0,0,0,0.7);position:fixed;top:0;left:0;bottom:0;right:0;margin:auto;z-index:200}
.lightbox p,
.lightbox a{line-height:1.8;color:#333;padding-bottom:20px;}
.lightbox span{font-size:1rem;font-weight:700;color:#FF1A1A}
.lightbox .marbox {position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;display:flex;justify-content:center;align-items:center}
.lightbox .w_bg_1 {width:90%;background:#fff;padding:10px 20px;max-width:625px;border-radius:5px;}
.lightbox .closebox {font-size:0;text-align:right}
.lightbox .closebox .btn{width:1.8rem;height:1.8rem;padding:0;display:inline-block;position:relative;cursor:pointer}
.lightbox .closebox .btn:before {content:"";position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display: block;width: 100%;height: 2px;background: #bfbfbf;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg)}
.lightbox .closebox .btn:after {content:"";position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display: block;width: 100%;height: 2px;background: #bfbfbf;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg)}
.lightbox .pstittle{color:#F00;font-size:1.2rem;font-weight:bold;margin-bottom:20px;text-align:center; }
.lightbox .pstxt {margin-bottom:20px;max-height:60vh;overflow:auto;}

/* 無障礙 - 補正 */
html { scroll-padding-top: 32.0dvh; }

/* *:focus{ border: 3px solid #fff !important; outline: 3px solid #333 !important; }
.twobar *:focus{ border: 3px solid #ff84f5 !important; }
.plus_more:focus{ border: 3px solid #f22727 !important; }
.inputError:focus{ outline : 3px solid #f22727 !important; }
.footer *:focus{ outline : 3px solid #ffadad !important; }

.sitemap_content a{ color: #188376; }
.sitemap_content a:hover{ color: #126359; } */