@charset "utf-8";
/*Background_setting*/

*:focus { outline: none;}
::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; }


/*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;}



/*登入光箱*/
.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:18px; 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:16px; 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:16px; }
.loginbox .wblock .formTable .flist .input{ width:100%; background:none; border:none; line-height:42px; height:42px; font-size:16px; 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:20px; }

.loginbox .wblock .formTable .flist .button_01{ width:100%; line-height:44px; height:44px; text-align:center; color:#fff; font-size:16px; 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:16px; 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:14px; text-decoration:none; font-weight:bold; }

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



/*■■■■■■■■■■■■■■■■共用區塊■■■■■■■■■■■■■■■*/
.content-box, .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, .content_box ul,.content-box ol, .content_box ol{ padding-left:30px; }
.content-box ul li, .content_box ul li,.content-box ol li, .content_box ol li{ list-style-type: none; padding: 10px 0; position: relative; }
.content-box ul li::before, .content_box ul li::before,.content-box ol li::before, .content_box ol 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:14px; display:inline-block; vertical-align:text-bottom; margin:0; }
.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;}
.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; height:40px; }
.hor_box .range{ overflow-x:scroll; overflow-y:hidden; white-space:nowrap; }
.page_info .page_menu .select_ap{ line-height:38px; height:40px; border:1px solid #ccc; padding:0 20px; color:#333; 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-50{ margin-top:3.125rem; margin-bottom:3.125rem; }
.margin-seesaw-70{ margin-top:4.375rem; margin-bottom:4.375rem; }
.margin-seesaw-100{ margin-top:6.25rem; margin-bottom:6.25rem; }
.margin-seesaw-150{ margin-top:9.375rem; margin-bottom:9.375rem; }

.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%; }

.btn-red{ background-color:#F00; color:#fff; border:1px solid #F00; }
.btn-orange{ background-color:#F60; color:#fff; border:1px solid #F60; }
.btn-yellow{ background-color:#FC0; color:#333; border:1px solid #FC0; }
.btn-green{ background-color:#096; color:#fff; border:1px solid #096; }
.btn-blue{ background-color:#447ccf; color:#fff; border:1px solid #447ccf; }
.btn-purple{ background-color:#93F; color:#fff; border:1px solid #93F; }
.btn-pink{ background-color:#F3F; color:#fff; border:1px solid #F3F; }
.btn-gray{ background-color:#ccc; color:#333; border:1px solid #ccc; }
.btn-black{ background-color:#000; color:#fff; border:1px solid #000; }

.btn-red-outline{ color:#F00; border:1px solid #F00; }
.btn-orange-outline{ color:#F60; border:1px solid #F60; }
.btn-yellow-outline{ color:#FC0; border:1px solid #FC0; }
.btn-green-outline{ color:#096; border:1px solid #096; }
.btn-blue-outline{ color:#447ccf; border:1px solid #447ccf; }
.btn-purple-outline{ color:#93F; border:1px solid #93F; }
.btn-pink-outline{ color:#F3F; border:1px solid #F3F; }
.btn-gray-outline{ color:#ccc; border:1px solid #ccc; }
.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 .botton_bar .menu .link:hover .links_box{ display:block;}
}


/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and ( max-width: 1200px) and ( min-width: 768px) {


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


}


/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and ( max-width: 767.9px) {
body.body_fixed{ overflow:hidden;}

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

/*登入光箱*/
.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:14px; }
.loginbox .wblock .formTable .flist .input{ line-height:36px; height:36px; }
.loginbox .wblock .ltitles .h1s{ font-size:16px; }
.loginbox .wblock .munity{ margin:0 0 15px 0; }
.loginbox .wblock .munity .linkgrids{ margin:5px; width: 38px; }
.loginbox .wblock .munity .linkgrids .linkbg img{ width:30px; }

/*■■■■■■■■■■■■■■■■共用區塊■■■■■■■■■■■■■■■*/
body.body_fixed { overflow:hidden; }
	
.content-box, .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-seesaw-100-sm{ margin-top:6.25rem; margin-bottom:6.25rem; }

.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:14px;}


/** 按鈕 **/
.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,   0px);
    -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; }

/* 研究成果 */
.search-block{ padding-top: 0 !important; }
.search-content{ padding: 0; margin: 0 auto 0 0; }
.search-title{font-size:1.5rem !important}
.search-title::after{display:none !important}
.search-box{ position: relative; }
.search-input{display: block; padding: 0.625rem; padding-right: calc( 10px + 6* 0.625rem); border-radius: 0.5rem; border: 1px solid #D1D5DB; width: 100%; color: #111827; background-color: #F9FAFB; }
.search-button{ font-size: 1rem; line-height: 2rem; color: #ffffff !important; background-color: hsla(215, 90%, 27%, 0.75); border-radius: 5px; padding: 0px 5px; position: absolute; top: 50%; right: 5px; transform: translateY(-50%); border: none; box-shadow: none; cursor: pointer; }
.search-button:hover,
.search-button:focus{ background-color: hsla(215, 90%, 27%, 1); }
.text-center{text-align:center !important}
.max-w-3xl{max-width:48rem !important}

@media screen and ( min-width: 768px) {
    .search-content.oneLine{ gap: 0.938rem; padding-bottom: 0.938rem; width: 100%; display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; flex: 1; }
    .search-content.oneLine .search-box{ margin: 0; flex: 1; }
}

/* 光箱 */
/*LightBox*/
.LightBox{ z-index:9999; position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,.7); display: flex; flex-direction: column-reverse; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);}
.LightBox .CBArea{ background-color:#fff; padding:30px; border-radius:15px;}
.LightBox .CBArea .LB-Title{ font-size:16px; color:#E5426E; font-weight:900; position:relative;}
.LightBox .CBArea .LB-Title::after{ content:""; display:block; border-top:3px solid #E5426E;}
.LightBox .CBArea .Descripcion{ font-size:22px;}


/* 表單 */
.contentHBox{ gap: 10px; width: 100%; display: inline-flex; flex-direction: column; align-items: baseline; }
.contentHBox .btn[lightbox-btn]{ margin-left: auto; gap: 5px; word-break: keep-all; padding: 0 10px; background-color: #1d3468; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; line-height: 43px; }
.contentHBox .btn[lightbox-btn] svg{ width: 30px; height: 30px; }
.LightBox .CBContent{ overflow: auto; text-align: left; max-width: 90dvw; max-height: 90dvh; width: 768px; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; }
.LightBox .CBContent .formHeadBox{ width: 100%; padding: 0 0 0.5rem; display: inline-flex; justify-content: space-between; flex-wrap: nowrap; }
.LightBox .contentForm{ overflow: auto; border-radius: 0; width: 100%; height: 100%; padding: 0; box-shadow: none; }
.LightBox .cancel-btn{ padding: 8px; height: 20px; width: 20px; border-radius: 5px; background-color: #ffffff; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; box-sizing: content-box; }
.LightBox .cancel-btn:hover{ background-color: #dddddd; }
.LightBox .cancel-btn svg{ height: 100%; width: 100%; }
.contentForm{ width: 350px; background: white; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; text-align: center; }
.contentForm h2{ color: #333; margin-bottom: 20px; }
.contentForm .h4{ font-size: 2rem !important; line-height: 1.3 !important; padding: 5px 0 0 10px !important; text-align: left; }
.contentForm .h4::after{ top: 0 !important; }
.contentForm .form-group{ margin-bottom: 15px; text-align: left; }
.contentForm .form-hint{ font-size: 0.8rem; color: #333; }
.contentForm label{ display: block; font-weight: bold; margin-bottom: 5px; }
.contentForm input,
.contentForm  textarea{ font-size: 14px; width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; resize: none; }
.contentForm input:focus,
.contentForm  textarea:focus{ border-color: #007bff; outline: none; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); }
.contentForm .button-group{ gap: 10px; display: flex; justify-content: flex-start; }
.contentForm button { font-size: 14px; cursor: pointer; padding: 10px 15px; border: none; border-radius: 5px; }
.contentForm .clear-btn{ color: #333; background-color: #ccc; }
.contentForm .clear-btn:hover{ background-color: #bbb; }
.contentForm .submit-btn{ color: white; background-color: #1d3468; }
.contentForm .submit-btn:hover{ background-color: #1d3468; }

/* 表單-驗證碼框 */
.verifyBox{ width: auto; margin-right: auto; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; }
.verifyBox .verifyInput{ border-radius: 5px 0 0 5px; border-right-width: 0; }
.verifyBox .verifyCode{ border-radius: 0 5px 5px 0; border: 1px solid #ccc; border-left-width: 0; cursor: pointer; }
.form-hint{ width: 100%; display: inline-flex; }

@media screen and ( min-width: 768px) {
    .contentHBox .btn[lightbox-btn] svg{ margin-top: 3px; }
}
@media screen and ( max-width: 767.9px) {
    .LightBox{ padding:10px;}
    
    .contentHBox .btn[lightbox-btn]{ line-height: 33px; }
    .contentHBox .btn[lightbox-btn] svg{ width: 25px; height: 25px; }
    .LightBox .CBContent{ padding: 15px; }
}

  
.content-box .Label{ font-size: 0.875rem; line-height: 1.25rem; color: #6B7280; top: 0.75rem; transition-duration: 300ms; --transform-scale-x: .75; --transform-scale-y: .75; position: absolute; }
.content-box .Label:focus{ color: undefined; transform: translate(0, -1.5rem) rotate(0) skewX(0) skewY(0) scaleX(.75) scaleY(.75); inset-inline-start: 0px; }


/* 完全無內容 */
.NoDataBox{ z-index: 25; width: 100%; margin: 50px 10px; display: inline-flex; justify-content: flex-start; position: relative; }
/* .NoDataBox span{ font-size: 2rem; font-weight: 500; } */

/* 類別無內容 */
.content_box .NoDataBox,
.content-box .NoDataBox{ justify-content: left; }
.content_box .NoDataBox span,
.content-box .NoDataBox span{ font-size: 1.25rem; font-weight: 500; }

/* 當 div 具有 open 類別時，顯示所有子元素 */
.emphasis-box.emphasisMini .grids{display:none !important}
.emphasis-box.emphasisMini .grids:nth-child(-n+5){display:flex !important}
.OpenGrids .emphasis-box.emphasisMini .grids{display:flex !important}

.emphasis-box.emphasisMini .grids{ flex-direction:column; padding:10px; }
.emphasis-box.emphasisMini .grids .word{ height:100%; display:inline-flex; flex-direction:column; }
.emphasis-box.emphasisMini .grids .word>:has(.btn){ position:unset; margin-top:auto; }

.emphasis-box.emphasisMini .grids .icon{ position: relative; overflow: hidden; }

@media screen and ( min-width: 769px) {
    .emphasis-box.emphasisMini .grids .icon{ padding-top: 105%; }
    .emphasis-box.emphasisMini .grids .icon img{ top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; width: 100%; }
}

@media screen and ( max-width: 767.9px) {
    .emphasis-box.emphasisMini .grids:nth-child(-n+5){display:flex !important}
    .OpenGrids .emphasis-box.emphasisMini .grids{display:flex !important}
}

/* 需求調整-隱藏後方圖片 */
.bannerBgBox.action::before,
.newBigBgBlock .newBigBg.action,
.newBlock .bigBg03::before,
.newBlock .bigBg03::after,
.graphics-box::after,
.card-box::after,
.graphics-box.reverse:after,
.bigBg .bigBg01.action .bigImg::before,
.bigBg .bigBg01.action .bigImg::after,
.bannerBgBox.action .bannerBgMv::before,
.bannerBgBox.action .bannerBgMv::after{ display: none !important; }

/* 按鈕形象修正 */
.contentHBox .btn.btn_style01,
.contentHBox .btn.btn_style02{ line-height: 48px; }

.contentHBox .btn.btn_style01{ position: relative; }
.contentHBox .btn.btn_style01::after{ margin: 3px 0 0 8px; width: 27px; height: 27px;
    border: 2px solid transparent;
    border-radius: 50%; background-size: contain; background-image: url(../images/layout/icon_arrow_right_white.svg); content: ""; }
.contentHBox .btn.btn_style02::after{ margin: 3px 0 0 8px; width: 27px; height: 27px;
    border: 2px solid #ffffff;
    border-radius: 50%; background-size: contain; background-image: url(../images/layout/icon_arrow_right_white.svg); content: ""; animation: animatedBackground 15s linear infinite; -moz-animation: animatedBackground 15s linear infinite; -webkit-animation: animatedBackground 15s linear infinite; -ms-animation: animatedBackground 15s linear infinite; -o-animation: animatedBackground 15s linear infinite; }

@keyframes animatedBackground {
    0% { background-position: -300px 0; }
    100% { background-position: 0 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: -300px 0; }
    100% { background-position: 0 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: -300px 0; }
    100% { background-position: 0 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: -300px 0; }
    100% { background-position: 0 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: -300px 0; }
    100% { background-position: 0 0; }
}

@media screen and (max-width: 768px) {
    .contentHBox .btn.btn_style01,
    .contentHBox .btn.btn_style02{ line-height: 43px; }
    .contentHBox .btn.btn_style01::after,
    .contentHBox .btn.btn_style02::after{ width: 24px; height: 24px; }
}

/* 技術詳細補充排版 */
.TableTeacher{ gap: 0.5em; display: inline-flex; flex-direction: column; align-items: start; }
.TableTeacher .Name{ font-size: 1.2em; font-weight: bold; }
.TableTeacher img{ width: 135px; max-width: 135px; }
.TableContentFlex{ gap: 1em; display: inline-flex; flex-direction: column; align-items: flex-start; }
.TableContentFlex *{ word-break: break-all; }
.TableContentFlex .Title{ font-size: 1.2em; margin-bottom: 0.3em; }
.TableContentFlex .Text{}
.TableContentFlex .Image{}
.TableContentFlex img{ box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; }
.TableContact{ }

@media screen and (max-width: 768px) {
    .TableContact{ display: flex; flex-direction: column; align-items: flex-start; }
}

/* 搜尋結果 */
.result-info{ padding: 0 0 0 5px; }
.result-info .result-number{ padding: 0px 5px; }

/* CSS */
.ResumeWrapper .newsDownloadBox{
    margin-right: auto;
    touch-action: manipulation;
    border-radius: 8px;
    border: 0;
    padding: 10px 16px;
    background-image: linear-gradient(to bottom, #5e7195, #1d3468);
    box-shadow: inset 0 -2px Rgb(0 0 0/0.2), 0 2px 4px Rgb(0 0 0/0.2);
    text-align: center;
    font-weight: 600;
    color: #fff;
    transition-property: transform, opacity;
    transition-duration: .4s, .2s;
    transition-timing-function: cubic-bezier(0.55, 1, 0.15, 1), ease-in-out;
}

.ResumeWrapper .newsDownloadBox:active:not(:disabled) {
    transform: scale(0.92);
}

.ResumeWrapper .newsDownloadBox:disabled {
    background-image: linear-gradient(to bottom, #9f9f9f, #848484);
    cursor: not-allowed;
}

.ResumeWrapper .newsDownloadBox:disabled {
    opacity: .4;
}

.ResumeWrapper .newsDownloadBox .title{
    color: #ffffff;
}

.ResumeWrapper .newsDownloadBox .icon{
    background-image: url(../images/page/download_w.png);
}

/* 頁面項目過長, 自動換行 */
@media screen and ( min-width: 768px) {
    .page_info:not( .pmc_fixed ) .content-box,
    .page_info:not( .pmc_fixed ) .content_box{ gap: 15px; align-items: flex-start; }
    .page_info:not( .pmc_fixed ) .content-box>.label,
    .page_info:not( .pmc_fixed ) .content_box>.label{ flex: none; max-width: 50%; }
    .page_info:not( .pmc_fixed ) .page_menu .hor_box{ height: auto; }
    .page_info:not( .pmc_fixed ) .page_menu .hor_box .range{ overflow: auto; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; }
    .page_info:not( .pmc_fixed ) .page_menu .hor_box .range .select_ap{ height: auto; line-height: 28px; }
}