@charset "utf-8";
/* import Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@900&display=swap');
/*Noto Sans TC,font-family:'Noto Sans TC', sans-serif; font-weight:300(Light),400(Regular),500(Medium),700(Bold),900(Black)*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;1,700&display=swap');
/*Montserrat,font-family:'Montserrat', sans-serif; font-weight:400(Regular),500(Medium),600(SemiBold),700(Bold)*/
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');
/*Oswald,font-family:'Oswald', sans-serif; 400(Regular),500(Medium)*/
@import url(mmenu.css);

/* 基本設定 */
:root {
    --color_orange: #ec6d4f;
    --color_orange_light:#ffeadf;    
    --color_green_bg: #d3f4e1;
    --color_green_border: #afe6ce;
    --color_green_light: #65AF8E;
    --color_grass_green: #8BC34A;    
    --color_blue_bg: #e5f3ff;
    --color_blue_light: #d3e5f4;
    --color_blue_medium: #1d5888;
    --color_blue_dark: #163e55;
    --color_teal_medium: #258E86; 
    --color_teal_dark: #19756e; 
    --color_teal_dark_a50: rgb(25, 117, 110, 0.5); 
    --gradient_blue: linear-gradient(to right, #1d5b88 0, #65AF8E 100%);
    --gradient_orange: linear-gradient(to right, #ec6d4f 0%, #e99b72 100%);    
}
/*-------css reset------------*/

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; box-sizing: border-box; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { border-style: none; border: 0; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }

/* Forms*/
input[type="checkbox"], input[type="radio"] { margin-right: 5px; margin-left: 0; }
input[type="button"], input[type="submit"], input[type="reset"], select, button { cursor: pointer; }
button { padding: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }

/*ios樣式清除*/
input[type="button"], input[type="submit"], input[type="reset"], button { background-color: transparent; border: none; margin: 0px; background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1); }

/*---------------------------------------------------------------------------------------------------------------------------------------*/
/* 基本設定 */
body, select, input, textarea, button { font-family: 'Montserrat', 'Noto Sans TC', 'Heiti TC', '黑體-繁', 'Microsoft JhengHei', '微軟正黑體', sans-serif; font-size: 16px; }
body { color: #333333; background:#f7f8ef;  background: #fff;
    -webkit-overflow-scrolling: touch; }
#Wrap { height: 100%; max-width: 1920px; margin: 0 auto; position: relative; overflow: hidden;
 background: url(../images/index_wave_bg.jpg) no-repeat top center, #fff; background-size: 100% 520px;
}
body.fixed { overflow: hidden; }
@media screen and (max-width:479px) {
    #Wrap { background: #fff;}
}
/* 連結 */
a { color: #258E86; text-decoration: underline; text-underline-offset: 4px; transition: all 0.3s ease; letter-spacing:.1rem;}
a:focus, a:hover { color: #ec6d4f; text-decoration: none; } 
a:focus, :focus { outline: 2px dashed #ec6d4f; }

/* 反選 */
::selection { background-color: #258E86; color: #fff; }
#Footer *::selection { background-color: #ec6d4f; color: #fff; }

/* 檔案下載圖示及雜湊值驗證 */
.file_ext { display: inline-block; position: relative; border-radius: 4px; overflow: hidden; vertical-align: middle; }
.file_ext::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.file_csv::before { background-color: #589c00; }
.file_doc::before { background-color: #2372ba; }
.file_img::before { background-color: #5b2d8d; }
.file_mov::before { background-color: #c51700; }
.file_other::before { background-color: #919191; }
.file_pdf::before { background-color: #ea4c3a; }
.file_ppt::before { background-color: #dd5b26; }
.file_txt::before { background-color: #919191; }
.file_xls::before { background-color: #08743b; }
.file_xml::before { background-color: #157efb; }
.file_zip::before { background-color: #e67e22; }
.file_odt::before { background-color: #2372ba; }
.file_ods::before { background-color: #08743b; }
.file_odp::before { background-color: #dd5b26; }
.file_wmf::before { background-color: #2f5483; }
.file_dwg::before { background-color: #2f5483; }
.file_ext::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.file_csv::after { background-image: url("../images/file_ext/csv.png"); }
.file_doc::after { background-image: url("../images/file_ext/doc.png"); }
.file_img::after { background-image: url("../images/file_ext/img.png"); }
.file_mov::after { background-image: url("../images/file_ext/mov.png"); }
.file_other::after { background-image: url("../images/file_ext/other.png"); }
.file_pdf::after { background-image: url("../images/file_ext/pdf.png"); }
.file_ppt::after { background-image: url("../images/file_ext/ppt.png"); }
.file_txt::after { background-image: url("../images/file_ext/txt.png"); }
.file_xls::after { background-image: url("../images/file_ext/xls.png"); }
.file_xml::after { background-image: url("../images/file_ext/xml.png"); }
.file_zip::after { background-image: url("../images/file_ext/zip.png"); }
.file_odt::after { background-image: url("../images/file_ext/odt.png"); }
.file_ods::after { background-image: url("../images/file_ext/ods.png"); }
.file_odp::after { background-image: url("../images/file_ext/odp.png"); }
.file_wmf::after { background-image: url("../images/file_ext/wmf.png"); }
.file_dwg::after { background-image: url("../images/file_ext/dwg.png"); }
.file_hashes { display: inline-block; position: relative; overflow: hidden; text-indent: -999px; vertical-align: middle; }
.file_hashes a { display: block; width: 24px; height: 24px; background-color: #999; border-radius: 4px; position: relative; }
.file_hashes a:hover, .file_hashes a:focus { background-color: #3073b5; }
.file_hashes a::after { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: url("../images/icon_file_hashes.svg") 0 0 no-repeat; }

/* 其他 */
.imgBox img { max-width: 100%; }

/*---------------------------------------------------------------------------------------------------------------------------------------*/

/*----Header----*/
#Header { width: 100%; position: relative; z-index: 10001; background: #fff;
    display: flex; align-items: center; justify-content: space-between;
 }
#Header {padding-top: 20px; padding-bottom: 20px;}
@media screen and (min-width:1024px) {
    #Header { padding: 20px 60px; }    
} 
@media screen and (min-width:1024px)  and (max-width:1259px){
    #Header { padding-top: 20px; padding-bottom: 0; }    
} 
 @media screen and (max-width:1023px) and (min-width:960px) {
    #Header { padding: 20px 30px; }
}
@media screen and (max-width:959px) {
    #Header { padding: 20px 15px; }
}
@media screen and (max-width:479px) {
    #Header{ padding: 15px 15px;  align-items: flex-start;}
}
@media screen and (max-width:360px) { #Header{padding-left: 10px;} }
#Header .col_left{ padding-right: 10px; flex-shrink: 0; }
#Header .col_left .top_links ul { display: flex; }
#Header .col_left .top_links ul li:not(:last-child){ margin-right: 10px;}
#Header .col_left .top_links a { display: block; color: #666666; font-weight: 500; white-space: nowrap; }

@media screen and (min-width:1440px) {
    #Header .col_left .top_links a { font-size: 1.125rem; padding: 15px 25px; border-radius: 24px; }
}
@media screen and (max-width:1439px) and (min-width:480px) {
    #Header .col_left .top_links a { font-size: 1rem; padding: 10px 15px; border-radius: 30px; }
}
@media screen and (max-width:479px) {
    #Header .col_left .top_links a { font-size: 0.875rem; padding: 10px; border-radius: 30px; }
}
#Header .col_left .top_links a.snm2024 { background-color: #d3f4e1; color:#000; text-decoration: none; }
#Header .col_left .top_links a.snm2024:hover, #Header .col_left .top_links a.snm2024:focus { color: #ffffff; background-color: #258E86; }
#Header .col_left .top_links a.snm_home { background-color: #ffeadf; color:#000; text-decoration: none; }
#Header .col_left .top_links a.snm_home:hover, #Header .col_left .top_links a.snm_home:focus { color: #ffffff; background-color: #ec6d4f; }
#Header .col_right { width: 100%; }
@media screen and (min-width:1024px) and (max-width:1259px) {
    #Header { flex-direction: column; }    
}
@media screen and (max-width:1023px) {
    #Header .col_right { display: none; }
    #Header .col_left .top_links ul { flex-wrap: wrap; }
}
/* Menu */
#Menu .menu_list { display: flex; align-items: center; justify-content: flex-end; }
#Menu .menu_list li { position: relative; }

#Menu .menu_list li a { display: block; font-weight: 500; color: #333; text-decoration: none; padding: 10px; text-align: center; }
#Menu .menu_list>li>a { font-size: 1.25rem; position: relative; color: #333;}
#Menu .menu_list>li>a:hover, #Menu .menu_list>li>a:focus, #Menu .menu_list>li.selected>a { color: #ec6d4f; }
#Menu .menu_list>li>ul>li>a { font-size: 1.125rem; }
#Menu .menu_list>li.selected>a::after, #Menu .menu_list>li:hover>a::after { content: ""; display: block; position: absolute; width: 60%; height: 4px; border-radius: 4px; background-color: #ec6d4f; left: 20%; bottom: 0; }

/* 第二層選單 */
#Menu .menu_list li ul { content: ''; display: none; position: absolute; z-index: 100; background-color: #fff; box-shadow: 0px 6px 10px 6px rgba(0, 0, 0, 0.2); width: 200px; top: 100%; margin-left: calc(50% - 100px); border-radius: 15px; 
margin-top: 20px;
}
#Menu .menu_list li ul li { border-bottom: 1px solid #cdcbc8; }
#Menu .menu_list li ul li:last-child { border-bottom: none; }
#Menu .menu_list li ul li a { padding-top: 20px; padding-bottom: 20px; }
#Menu .menu_list li ul li:hover a { color: #f2f2f2; background-color: #ec6d4f; }
#Menu .menu_list li ul li:first-child a { border-radius: 15px 15px 0 0; }
#Menu .menu_list li ul li:last-child a { border-radius: 0 0 15px 15px; }
@media screen and (min-width:1450px) {  #Menu .menu_list > li:not(:last-child) {margin-right: 2vw;} }
@media screen and (max-width:1449px) {  #Menu .menu_list>li>a { 
    font-size: 1.125rem;} #Menu .menu_list > li:not(:last-child) {margin-right: 1vw;} }

@media screen and (max-width:1259px) {
    #Menu .menu_list { justify-content: center; margin-top: 20px; } 
    #Menu .menu_list{ border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px 0;}
}

/*浮動效果*/

@media screen and (min-width: 1024px) {
    .MenuFix #Wrap { padding-top: 178px; }
    .MenuFix #Header { position: fixed; top: 0; left: 5px; width: calc(100% - 10px); height: 68px; background-color: #fff; box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1); animation: header 0.5s ease 1; padding: 0 30px;  border-radius: 0 0 30px 30px; }
    .MenuFix #Header{padding-top: 10px; padding-bottom: 10px;}
    .MenuFix #Header::after { display: none; }
    .MenuFix #Menu .menu_list li:last-child ul { margin-left: 0; right: 0; }
    .MenuFix #Menu .menu_list > li:not(:last-child){ margin-right: 1.5vw;}
    .MenuFix #Menu .menu_list>li>a { font-size: 1rem; padding: 10px 0px; }
    .MenuFix #Menu .menu_list>li>ul>li>a { font-size: 1rem; line-height: 1.2em; }
    .MenuFix #Header .col_left .top_links a { font-size: 1rem; padding: 10px 20px; }
    
}

@media screen and (max-width: 1259px) and (min-width:1024px) {
    .MenuFix #Header { display: flex; align-items: center; justify-content: space-between; flex-direction: row; }
    .MenuFix #Header #Menu .menu_list{margin-top: 0; justify-content: flex-end; padding: 0; border: none;}
    .MenuFix #Header .col_left { margin-right: 10px; }    
}

@media screen and (max-width:1023px) {
    .MenuFix #Header .col_left { margin-right: 0px; }
}

@-webkit-keyframes header {
    0% { top: -68px; }
    100% { top: 0; }
}

/*----------------------------------------------------------------------*/
/* 行動裝置版選單 */
/* mmenu補 */
#MenuMobile { --mm-color-background: #fff; padding: 20px 10px; }
.mm-wrapper--opened .mm-wrapper__blocker { opacity: 1; --mm-blocker-opacity-delay: 0s; box-shadow: 0 0 10px rgba(0, 0, 0, .5); }
#mm-1 .mm-navbar { display: none; }
.mm-navbar__title>span { color: #333333; }
.mm-btn--next:after, .mm-btn--prev:before { border-left: 1px solid #35343e; border-top: 1px solid #35343e; }
.mm-navbar__title { justify-content: flex-start; }
.mm-listitem:after { inset-inline-start: 0; }
.mm-footer+.mm-listitem:before { content: ""; display: block; position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; border-color: inherit; border-bottom-width: 1px; border-bottom-style: solid; }
.mm-listitem__text { text-overflow: inherit; white-space: normal; overflow: hidden; }
.mm-menu a.mm-listitem__text:hover { color: #258E86; }
.mm-menu a.mm-btn--next:hover::after { border-color: #258E86; }
.mm-search { padding: 20px; }
.mm-listitem__btn:not(.mm-listitem__text) { border: none; }

@media screen and (min-width: 1024px) {
    #nav, #MenuMobile, .switch { display: none; }
}
@media screen and (max-width: 1023px) {
    html.mm-open { overflow: hidden; }
    .menu-action { height: 30px; left: 50%; margin-left: -13px; overflow: hidden; }
    .menu-action::after, .menu-action::before, .menu-action>i::before, .menu-action, .menu-action>i { width: 26px; }
    .menu-action::after, .menu-action::before, .menu-action>i::before { content: ""; position: absolute; left: 0; height: 3px; border-radius: 3px; background: #ffffff none repeat scroll 0 0; transition: all 0.3s ease; }
    .menu-action, .menu-action>i { position: absolute; top: 50%; transform: translateY(-50%); }
    .menu-action::after { bottom: 6px; }
    .menu-action::before { top: 6px; }
    .menu-action>i { height: 3px; left: 0; text-indent: -999px; overflow: hidden; }
    .menu-action>i::before { top: 0; }
    .mm-wrapper--opened .menu-action>i { opacity: 0; }
    .mm-wrapper--opened .menu-action::after { bottom: 13px; transform: rotate(45deg); }
    .mm-wrapper--opened .menu-action::before { top: 14px; transform: rotate(-45deg); }
    .mm-wrapper--opened .mm-wrapper__blocker { opacity: 0.8; }
}

#nav .switch a { display: block; position: fixed; top: 0; right: 0; z-index: 99999; background-color: #258E86; transition-delay: 0.3s; border-radius: 0 0 0 5px; }

@media screen and (max-width:1023px) and (min-width:960px) {
    #nav .switch a { width: 68px; height: 68px; }
}
@media screen and (max-width:959px) {
    #nav .switch a { width: 56px; height: 56px; }
}
@media screen and (max-width:479px) {
    #nav .switch a{ width: 48px; height: 48px;}
}
/*----------------------------------------------------------------------*/
/*相關連結*/
@media screen and (min-width:1600px) {
    .IndexRelate { padding: 0 160px; }
}
@media screen and (max-width:1599px) and (min-width:1440px) {
    .IndexRelate { padding: 0 5.5vw; }
}
@media screen and (max-width:1439px) and (min-width:1024px) {
    .IndexRelate { padding: 0 60px; }
}
@media screen and (max-width:1023px) and (min-width:960px) {
    .IndexRelate { padding: 0 30px; }
}
@media screen and (min-width:960px) {
    .IndexRelate { margin: 100px 0; }
}
@media screen and (max-width:959px) {
    .IndexRelate { padding: 0 15px; }
}

.IndexRelate { 
    border-top: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
    margin: 0; width: 100%; position: relative;  margin-bottom: 80px;}
.IndexRelate:after{ content:''; position: absolute;  left:0; bottom: -80px; width: 100%; height: 80px;
    background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%,  #d3f4e1 100%);
}    
.IndexRelate .Index_relate_links { max-width: 1510px; margin: 0 auto; padding: 0px 0 0px 0; }

.IndexRelate .Index_relate_links li { height: 100%; padding: 5px 10px; border-right: 1px solid #ddd; }
.IndexRelate .Index_relate_links a { display: flex; align-items: center; max-width: 200px; height: 150px; 
    border-radius: 10px; margin: 0 auto; padding: 25px 10px; border: 1px solid transparent; }
.IndexRelate .Index_relate_links a:hover { 
    transform: scale(1.2) translate(-3px, -3px); translate: .25ms;
}
.IndexRelate .Index_relate_links img { max-width: 100%; max-height: 100%; margin: 0 auto; }
.Index_relate_links{ border-left: 1px solid #ddd; border-right: 0px solid #ddd;}
.IndexRelate .owl-carousel .owl-item img { width: auto; }

/* owl-carousel */
.IndexRelate .Index_relate_links .owl-nav>button { position: absolute; top: 50%; text-indent: -999px; z-index: 9999; overflow: hidden; border-radius: 50%; transition: all 0.3s ease; }
.IndexRelate .Index_relate_links .owl-nav>button::after { content: ''; display: block; position: absolute; width: 22px; height: 12px; top: calc(50% - 6px); background: url(../images/arrow-icon.svg) no-repeat 0 0; background-size: inherit; transition: all 0.3s ease; }
.IndexRelate .Index_relate_links .owl-nav button.owl-prev, .IndexRelate .Index_relate_links .owl-nav button.owl-next { background-color: rgba(255, 255, 255); border: 1px solid #ddd; }
.IndexRelate .Index_relate_links .owl-nav button:hover.owl-prev, .IndexRelate .Index_relate_links .owl-nav button:hover.owl-next { border: 1px solid #258E86; }
.IndexRelate .Index_relate_links .owl-nav .owl-prev::after { left: calc(50% - 9px); }
.IndexRelate .Index_relate_links .owl-nav .owl-next::after { right: calc(50% - 9px); transform: rotate(-180deg); }

@media screen and (min-width: 1600px) {
    .IndexRelate .Index_relate_links .owl-nav>button { top: calc(50% - 30px); width: 60px; height: 60px; }
    .IndexRelate .Index_relate_links .owl-nav .owl-prev { left: -30px; }
    .IndexRelate .Index_relate_links .owl-nav .owl-next { right: -30px; }
}
@media screen and (max-width: 1599px) and (min-width: 1024px) {
    .IndexRelate .Index_relate_links .owl-nav>button { top: calc(50% - 25px); width: 50px; height: 50px; }
    .IndexRelate .Index_relate_links .owl-nav .owl-prev { left: -25px; }
    .IndexRelate .Index_relate_links .owl-nav .owl-next { right: -25px; }
}
@media screen and (max-width: 1023px) and (min-width: 640px) {
    .IndexRelate .Index_relate_links .owl-nav>button { top: calc(50% - 21px); width: 42px; height: 42px; }
    .IndexRelate .Index_relate_links .owl-nav .owl-prev { left: -15px; }
    .IndexRelate .Index_relate_links .owl-nav .owl-next { right: -15px; }
}
@media screen and (max-width: 639px) {
    .IndexRelate .Index_relate_links .owl-nav>button { margin-top: -18px; width: 36px; height: 36px; }
    .IndexRelate .Index_relate_links .owl-nav .owl-prev { left: -15px; }
    .IndexRelate .Index_relate_links .owl-nav .owl-next { right: -15px; }
}

.IndexRelate .Index_relate_links .owl-dots { position: absolute; left: 0; width: 100%; text-align: center; line-height: 0; }

@media screen and (max-width: 767px) {
    .IndexRelate .Index_relate_links .owl-dots { bottom: -21px; }
}
@media screen and (min-width: 768px) {
    .IndexRelate .Index_relate_links .owl-dots { bottom: -26px; }
}

.IndexRelate .Index_relate_links .owl-dots .owl-dot { display: inline-block; border: 1px solid #258E86; background-color: #fff; width: 12px; height: 12px; margin: 0 6px; border-radius: 50%; }
.IndexRelate .Index_relate_links .owl-dots .owl-dot.active, .IndexRelate .Index_relate_links .owl-dots .owl-dot:hover { background-color: #258E86; border-color: #258E86; }

/*---------------------------------------------------------------------------------------------------------------------------------------*/
/*BtnTop*/
.BtnTop { position: fixed; z-index: 100; display: none; }
.MenuFix .BtnTop { display: block; }
.BtnTop a { display: block; text-align: center; text-decoration: none; width: 60px; height: 60px; border-radius: 10px; 
    background: #258E86; color: #fff; border: 2px solid #fff; padding-top: 30px; position: relative; }
    
.BtnTop a:hover { background: #ec6d4f; transition: .25s;} 
.BtnTop a::after { content: ''; position: absolute; display: block; text-align: center; width: 18px; height: 18px; background: url(../images/btn-icon.png) no-repeat; background-size: 200%; background-position: 0 100%; transform: rotate(-90deg); top: 10px; left: calc(50% - 10px); }

@media screen and (min-width:630px) {
    .BtnTop { right: 15px; bottom: 20px; }
}
@media screen and (max-width:629px) {
    .BtnTop { right: 10px; bottom: 30px; }
}

/*footer*/
#Footer { width: 100%; background: linear-gradient(to right, #1d5b88 0, #65AF8E 100%);; }
#Footer>div { font-size: 0.875rem; letter-spacing: .1em; text-align: center; color: #fff; }

@media screen and (min-width:630px) {
    #Footer>div { padding: 15px 30px; }
}
@media screen and (max-width:629px) {
    #Footer>div { padding: 15px; font-size: .75em; }
}

/*---------------------------------------------------------------------------------------------------------------------------------------*/

/* 編輯器 */
.editable_content { margin-top: 10px; margin-bottom: 10px; }
.editable_content.content { margin-top: 30px; margin-bottom: 40px; }
#main_content+.editable_content.content { margin-top: 10px; }

/* 為文字上稿區可能出現的元素做設定 */
.editable_content, .editable_content p, .editable_content li, .editable_content dt, .editable_content dd, .editable_content div, .editable_content blockquote { line-height: 2em; letter-spacing: 0.15em; }
.editable_content .district, .editable_content div, .editable_content table, .editable_content iframe, .editable_content blockquote { margin-top: 2.5em; margin-bottom: 2.5em; }
.editable_content p, .editable_content ul, .editable_content ol, .editable_content dl { margin-top: 1.5em; margin-bottom: 1.5em; }
.editable_content p { padding: 0; }
.editable_content h4, .editable_content h5, .editable_content h6 { margin-bottom: 5px; line-height: 1.5em; }
.editable_content h4+*:not(h4):not(h5):not(h6), .editable_content h5+*:not(h4):not(h5):not(h6), .editable_content h6+*:not(h4):not(h5):not(h6) { margin-top: 0.625em; }
.editable_content h4+h4, .editable_content h4+h5, .editable_content h4+h6, .editable_content h5+h4, .editable_content h5+h5, .editable_content h5+h6, .editable_content h6+h4, .editable_content h6+h5, .editable_content h6+h6 { margin-top: 1.25em; }
.editable_content h4 { color: #258E86; overflow: hidden; }

@media screen and (min-width:960px) {
    .editable_content h4 { font-size: 1.625rem; }
}
@media screen and (max-width:959px) {
    .editable_content h4 { font-size: 1.5rem; }
}

.editable_content h5 { font-size: 1.375rem; color: #333; }
.editable_content h6 { font-size: 1.25rem; color: #333; }
.editable_content blockquote { background-color: #fff; border-left: 5px solid #afe6ce; overflow: hidden; position: relative; box-sizing: border-box; box-shadow: 0px 0px 10px rgba(0, 6, 6, 0.2); }
.editable_content blockquote::before, .editable_content blockquote::after { display: block; position: absolute; font-family: 'Montserrat', sans-serif; line-height: 100%; color: #e2e2e2; }
.editable_content blockquote::before { content: '“'; }
.editable_content blockquote::after { content: '”'; }

@media screen and (max-width: 767px) {
    .editable_content blockquote { padding: 50px 25px; }
    .editable_content blockquote::before, .editable_content blockquote::after { font-size: 80px; }
    .editable_content blockquote::before { left: 10px; top: 10px; }
    .editable_content blockquote::after { right: 10px; bottom: -40px; }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .editable_content blockquote { margin-left: 40px; margin-right: 40px; padding: 25px 50px; }
    .editable_content blockquote::before, .editable_content blockquote::after { font-size: 80px; }
    .editable_content blockquote::before { left: 10px; top: 10px; }
    .editable_content blockquote::after { right: 10px; bottom: -40px; }
}
@media screen and (min-width: 1024px) {
    .editable_content blockquote { margin-left: 60px; margin-right: 60px; padding: 30px 70px; }
    .editable_content blockquote::before, .editable_content blockquote::after { font-size: 100px; }
    .editable_content blockquote::before { left: 20px; top: 5px; }
    .editable_content blockquote::after { right: 20px; bottom: -45px; }
}

.editable_content .district .imgleft~blockquote, .editable_content .district .imgright~blockquote { margin-left: 0; margin-right: 0; }
.editable_content ol { list-style-type: decimal; padding-left: 2em; overflow: hidden; }
.editable_content ul { list-style-type: disc; padding-left: 2em; overflow: hidden; }
.editable_content ul[type="disc"] { list-style-type: disc; }
.editable_content ul[type="circle"] { list-style-type: circle; }
.editable_content ul[type="square"] { list-style-type: square; }
.editable_content li { margin-bottom: 0.625em; }
.editable_content ol ol { list-style-type: lower-alpha; }
.editable_content ul ul { list-style-type: circle; }
.editable_content ul ul, .editable_content ul ol, .editable_content ol ul, .editable_content ol ol { margin-top: 5px; margin-bottom: 0; }
.editable_content ul li:last-child, .editable_content ol li:last-child { margin-bottom: 0; }
.editable_content dl { overflow: hidden; }
.editable_content dl dt { font-weight: bold; margin-bottom: 0.625em; }
.editable_content dl dd { padding-left: 25px; margin-bottom: 0.625em; position: relative; }
.editable_content dl dd::before { content: ''; display: block; position: absolute; top: 1em; left: 6px; width: 6px; height: 6px; margin-top: -3px; background-color: #333; border-radius: 50%; }
.editable_content dl dl, .editable_content dl ul, .editable_content dl ol, .editable_content ul dl.editable_content ol dl { margin-top: 5px; margin-bottom: 0; }
.editable_content dl dd:last-child { margin-bottom: 0; }
.editable_content hr { margin: 1.875em 0; }

/* 影片、相關連結、相關檔案 */
.MsgModule_Download span, .MsgModule_Link span { white-space: nowrap; font-weight: bold; }
.MsgModule_Download+.MsgModule_Download, .MsgModule_Download+.MsgModule_Link, .MsgModule_Link+.MsgModule_Download, .MsgModule_Link+.MsgModule_Link { margin-top: -10px; }
.editable_content .MsgModule_Download span.file_hashes { margin-left: 4px; }
.editable_content .MsgModule_Media { margin-left: auto; margin-right: auto; width: 560px; }
.editable_content .MsgModule_Media.left { margin-left: 0; }
.editable_content .MsgModule_Media.right { margin-right: 0; }
.editable_content .MsgModule_Media.landscape { width: 560px; }
.editable_content .MsgModule_Media.portrait { width: 315px; }
.editable_content .MsgModule_Media .media_wrap { margin-top: 0; margin-bottom: 0; padding-bottom: 56.25%; text-align: left; position: relative; overflow: hidden; }
.editable_content .MsgModule_Media.landscape.ratio_16by9 .media_wrap { padding-bottom: 56.25%; }
.editable_content .MsgModule_Media.portrait.ratio_16by9 .media_wrap { padding-bottom: 177.77%; }
.editable_content .MsgModule_Media.landscape.ratio_4by3 .media_wrap { padding-bottom: 75%; }
.editable_content .MsgModule_Media.portrait.ratio_4by3 .media_wrap { padding-bottom: 133.33%; }
.editable_content .MsgModule_Media .media_wrap iframe, .editable_content .MsgModule_Media .media_wrap object, .editable_content .MsgModule_Media .media_wrap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; margin: 0; }
.editable_content .MsgModule_Media .describe { text-align: left; margin: 0; padding: 20px; background-color: #ebebeb; line-height: 150%; }
.editable_content .MsgModule_Media .describe span { display: block; }
.editable_content .MsgModule_Media .describe .title { margin-bottom: 10px; }
.editable_content .MsgModule_Media .describe .desc { font-size: 0.9375rem; }
.editable_content noscript div.ytlink { padding: 0; margin: 0; line-height: 1.25em; }

/* no script時影片區塊顯示的訊息 */
.editable_content .MsgModule_Media video { display: block; width: 100%; }

/* 文繞圖設定 */
.editable_content .district::after { content: ''; display: block; clear: both; }
.editable_content .district>*:first-child { margin-top: 0; }
.editable_content .district>*:last-child { margin-bottom: 0; }
.editable_content .img_bg { margin-bottom: 20px; text-align: center; }
.editable_content .img_bg figure { display: inline-block; margin: 0; }
.editable_content .imgleft { float: left; }
.editable_content .imgright { float: right; }
.editable_content .imgcenter { clear: both; text-align: center; max-width: 1200px; margin-left: auto; margin-right: auto; }
.editable_content .imgleft, .editable_content .imgright { max-width: 50%; }
.editable_content .img_bg figcaption, .editable_content .img_bg span { display: block; padding: 0 0 0 14px; margin: 0 auto; position: relative; font-size: 0.875rem; font-weight: 300; color: #636363; line-height: 1.5em; text-align: left; }
.editable_content .img_bg figcaption::after, .editable_content .img_bg span::after { content: ''; display: block; position: absolute; top: 9px; left: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #999; }

@media screen and (max-width: 639px) {
    .editable_content .district .imgleft, .editable_content .district .imgright { float: none; clear: both; max-width: 100%; text-align: center; margin-left: auto; margin-right: auto; }
}
@media screen and (min-width: 640px) and (max-width: 1279px) {
    .editable_content .imgleft { margin-right: 20px; }
    .editable_content .imgright { margin-left: 20px; }
}
@media screen and (min-width: 1280px) {
    .editable_content .imgleft { margin-right: 25px; }
    .editable_content .imgright { margin-left: 25px; }
}

/* 單篇延伸區塊 */
.editable_content h4.ext_title { display: flex; align-items: center; margin-bottom: 10px; margin-top: 0; position: relative; color: #258E86; font-size: 1.5rem; font-weight: 700; line-height: 1.5em; }
.editable_content h4.ext_title::before { content: ''; display: block; width: 22px; height: 22px; margin-right: 5px; background-size: 100%; background-repeat: no-repeat; }
.editable_content h4.icon_file::before { background-image: url(../images/icon_download.svg); }
.editable_content h4.icon_link::before { background-image: url(../images/icon_link.svg); }
.editable_content h4.icon_photo::before { background-image: url(../images/icon_images.svg); }

/* 新增h5標題 */
.editable_content h5.transit_title { display: flex; align-items: center; position: relative; font-weight: 700; }
.editable_content h5.transit_title:before { content: ""; display: block; width: 22px; height: 22px; margin-right: 5px; background-size: 100%; background-repeat: no-repeat; }
.editable_content h5.transit_title.car:before { background-image: url(../images/transit/icon-car.svg); }
.editable_content h5.transit_title.bus:before { background-image: url(../images/transit/icon-bus.svg); }
.editable_content h5.transit_title.train:before { background-image: url(../images/transit/icon-train.svg); }
.editable_content h5.transit_title.parking:before { background-image: url(../images/transit/icon-parking.svg); }

.editable_content ul.ext_list { margin: 0 0 2em 0; padding: 0; list-style-type: none; overflow: hidden; display: flex; flex-wrap: wrap; }
.editable_content ul.ext_list li { position: relative; margin: 5px 8px 5px 0; line-height: 1.5em; background-color: #fff; border: 1px solid #ebebed; padding: 0.375em .75em; border-radius: 10px; display: flex; align-items: center; flex-wrap: wrap; transition: all 0.3s ease; }
.editable_content ul.ext_list li>a { display: inline-block; color: #333; text-decoration: none; }
.editable_content ul.ext_list li:hover { border-color: #65AF8E; box-shadow: 0 2px 5px rgba(36, 120, 140, .25); }
.editable_content ul.ext_list li>a:hover, .editable_content ul.ext_list li>a:focus { color: #258E86; }
.editable_content ul.ext_list li span.file_ext { margin-left: 6px; width: 24px; height: 24px; }
.editable_content ul.ext_list li span.file_hashes { margin-left: 6px; width: 24px; height: 24px; }
.editable_content #colorbox_thum { position: relative; margin-top: 0; }
.editable_content ul.ext_list { margin: 0 0 2em 0; list-style-type: none; overflow: hidden; }
.editable_content ul.ext_list li { position: relative; margin-bottom: 6px; line-height: 1.8em; }
.editable_content ul.ext_list li span.file_ext { margin-left: 6px; width: 24px; height: 24px; }
.editable_content ul.ext_list li span.file_hashes { margin-left: 6px; width: 24px; height: 24px; }
.editable_content ul.ext_list li span.file_hashes a { background-position: right 0; }
.editable_content ul.ext_list li span.file_hashes a:hover, .editable_content ul.ext_list li span.file_hashes a:focus { background-position: right 100%; }
.editable_content #colorbox_thum { position: relative; margin-top: 0; }

/* html編輯區的表格預設樣式 */
.editable_content table[align="center"] { margin-left: auto; margin-right: auto; }
.editable_content table caption { margin: 5px 0; padding: 5px 0; font-weight: bold; color: #333; text-align: left; line-height: 1.5em; }
.editable_content .tableWrap, .agendaTable .table_wrap { position: relative; overflow-y: auto; _overflow: auto; width: 100%; margin-bottom: 1em; -webkit-overflow-scrolling: touch; }
.editable_content .tableWrap table { margin: 0; }

/*添加IOS下卷軸*/
.editable_content .tableWrap::-webkit-scrollbar, .agendaTable .table_wrap::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; }
.editable_content .tableWrap::-webkit-scrollbar-thumb, .agendaTable .table_wrap::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid #fafafa; background-color: rgba(0, 0, 0, .3); }
.editable_content .tableWrap::-webkit-scrollbar-thumb:hover, .agendaTable .table_wrap::-webkit-scrollbar-thumb:hover { background-color: #258E86; }

/* 移除第一個物件的上邊界、上間距避免過大的空白 */
.editable_content>*:first-child, .editable_content blockquote>*:first-child, .editable_content td>*:first-child { margin-top: 0; }

/* 移除最後一個物件的下邊界、下間距避免過大的空白 */
.editable_content>*:last-child, .editable_content blockquote>*:last-child, .editable_content td>*:last-child { margin-bottom: 0; }

/* 避免爆版 */
.editable_content iframe, .editable_content img, .editable_content div, .editable_content p, .editable_content span, .editable_content ul, .editable_content ol, .editable_content li, .editable_content figure, .editable_content figcaption { max-width: 100%; }
.editable_content * { word-wrap: break-word; }

/* 取消圖片的高度設定避免RWD時不等比例縮放 */
.editable_content img { height: auto; }

/* html編輯區的表格外框樣式 */
.editable_content .table_style1 { width: 100%; border-left: 1px solid #9c9c9c; border-top: 1px solid #9c9c9c; }
.editable_content .table_style1>tbody>tr>th, .editable_content .table_style1>tbody>tr>td { padding: 5px 8px; border-right: 1px solid #9c9c9c; border-bottom: 1px solid #9c9c9c; line-height: 160%; }
.editable_content .table_style1>tbody>tr>th { background-color: #dedede; color: #333; white-space: nowrap; }
.editable_content .table_style1>tbody>tr>td { background-color: #fff; color: #333; }

/*----------------------------------------------------------------------*/
/* 微編輯器 */
.micro_editable_content, .micro_editable_content p, .micro_editable_content li, .micro_editable_content div, .micro_editable_content blockquote { line-height: 1.875em; letter-spacing: 0.15em; }
.micro_editable_content div, .micro_editable_content table, .micro_editable_content iframe, .micro_editable_content blockquote { margin-top: 1.4375em; margin-bottom: 1.4375em; }
.micro_editable_content p, .micro_editable_content ul, .micro_editable_content ol { margin-top: 1em; margin-bottom: 1em; }
.micro_editable_content p { padding: 0; }
.micro_editable_content h4, .micro_editable_content h5, .micro_editable_content h6 { margin-bottom: 5px; line-height: 1.5em; }
.micro_editable_content h4+*:not(h4):not(h5):not(h6), .micro_editable_content h5+*:not(h4):not(h5):not(h6), .micro_editable_content h6+*:not(h4):not(h5):not(h6) { margin-top: 0.625em; }
.micro_editable_content h4+h4, .micro_editable_content h4+h5, .micro_editable_content h4+h6, .micro_editable_content h5+h4, .micro_editable_content h5+h5, .micro_editable_content h5+h6, .micro_editable_content h6+h4, .micro_editable_content h6+h5, .micro_editable_content h6+h6 { margin-top: 1.25em; }
.micro_editable_content h4 { font-size: 1.375rem; color: #202020; overflow: hidden; }
.micro_editable_content h5 { font-size: 1.25rem; }
.micro_editable_content h6 { font-size: 1.125rem; }
.micro_editable_content blockquote { background-color: #fff; border: 1px solid #ccc; margin-left: 20px; margin-right: 20px; padding: 20px 40px; overflow: hidden; position: relative; box-sizing: border-box; }
.micro_editable_content blockquote::before, .micro_editable_content blockquote::after { display: block; position: absolute; font-family: 'Montserrat', sans-serif; line-height: 100%; color: #e2e2e2; font-size: 64px; }
.micro_editable_content blockquote::before { content: '“'; left: 10px; top: 5px; }
.micro_editable_content blockquote::after { content: '”'; right: 10px; bottom: -25px; }
.micro_editable_content ol { list-style-type: decimal; padding-left: 2em; overflow: hidden; }
.micro_editable_content ul { list-style-type: disc; padding-left: 2em; overflow: hidden; }
.micro_editable_content ul[type="disc"] { list-style-type: disc; }
.micro_editable_content ul[type="circle"] { list-style-type: circle; }
.micro_editable_content ul[type="square"] { list-style-type: square; }
.micro_editable_content li { margin-bottom: 0.5em; }
.micro_editable_content ol ol { list-style-type: lower-alpha; }
.micro_editable_content ul ul { list-style-type: circle; }
.micro_editable_content ul ul, .micro_editable_content ul ol, .micro_editable_content ol ul, .micro_editable_content ol ol { margin-top: 5px; margin-bottom: 0; }
.micro_editable_content ul li:last-child, .micro_editable_content li:last-child { margin-bottom: 0; }
.micro_editable_content hr { margin: 1.4375em 0; }

/* 移除第一個物件的上邊界、上間距避免過大的空白 */
.micro_editable_content>*:first-child, .micro_editable_content blockquote>*:first-child, .micro_editable_content td>*:first-child { margin-top: 0; }

/* 移除最後一個物件的下邊界、下間距避免過大的空白 */
.micro_editable_content>*:last-child, .micro_editable_content blockquote>*:last-child, .micro_editable_content td>*:last-child { margin-bottom: 0; }

/* 避免爆版 */
.micro_editable_content iframe, .micro_editable_content img, .micro_editable_content div, .micro_editable_content p, .micro_editable_content span, .micro_editable_content ul, .micro_editable_content ol, .micro_editable_content li, .micro_editable_content figure, .micro_editable_content figcaption { max-width: 100%; }
.micro_editable_content * { word-wrap: break-word; }

/* 取消圖片的高度設定避免RWD時不等比例縮放 */
.micro_editable_content img { height: auto; }

/*----------------------------------------------------------------------*/
/* ColorBox Core Style */
#colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 10001; overflow: hidden; }
#cboxOverlay { position: fixed; width: 100%; height: 100%; }
#cboxMiddleLeft, #cboxBottomLeft { clear: left; }
#cboxContent { position: relative; font-size: 14px; text-align: center; }
#cboxLoadedContent { overflow: auto; padding: 30px 5px 60px 5px; }
#cboxTitle { margin: 0; }
#cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; }
.cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; }
.cboxIframe { width: 100%; height: 100%; display: block; border: 0; }
#colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; }
#colorbox_thum { display: flex; align-items: center; flex-wrap: wrap; }
#colorbox_thum a { display: block; text-align: center; vertical-align: middle; }
#colorbox_thum a:hover { transform: scale(1.02); }
#colorbox_thum a * { vertical-align: middle; }
#colorbox_thum a span { display: inline-block; height: 100%; }
#colorbox_thum a img { max-width: 100%; max-height: 100%; }

@media screen and (max-width:399px) {
    #colorbox_thum { margin-left: -5px; margin-right: -5px; }
    #colorbox_thum a { padding: 5px; }
}
@media screen and (min-width: 400px) {
    #colorbox_thum { margin-left: -10px; margin-right: -10px; }
    #colorbox_thum a { padding: 10px; }
}
@media screen and (max-width: 639px) {
    #colorbox_thum a { width: 140px; height: 100px; }
}
@media screen and (min-width: 640px) and (max-width: 1199px) {
    #colorbox_thum a { width: 180px; height: 120px; }
}
@media screen and (min-width: 1200px) {
    #colorbox_thum a { width: 220px; height: 145px; }
}

/* User Style */
#cboxOverlay { background: #000; }
#colorbox {}
#cboxContent { margin-top: 20px; }
.cboxIframe { background: #fff; }
#cboxError { padding: 50px; border: 1px solid #ccc; }
#cboxLoadedContent { border: 5px solid #000; background: #000; }
#cboxTitle { position: absolute; bottom: 10px; left: 0; width: 100%; padding: 0 10px; box-sizing: border-box; color: #fff; line-height: 18px; }
#cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; }
#cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; }
#cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url("../images/colorbox_controls.png") no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; }
#cboxPrevious:hover { background-position: bottom left; }
#cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url("../images/colorbox_controls.png") no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; }
#cboxNext:hover { background-position: bottom right; }
#cboxLoadingOverlay { background: #000; }
#cboxLoadingGraphic { background: url("../images/colorbox_loading.gif") no-repeat center center; }
#cboxClose { position: absolute; top: 5px; right: 5px; display: block; background: url("../images/colorbox_controls.png") no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; }
#cboxClose:hover { background-position: bottom center; }

/*----------------------------------------------------------------------*/
/*測試用menu*/
.ifun_text_menu { position: fixed; top: 0; left: 0; z-index: 10006; }
.ifun_text_menu ul { box-sizing: content-box; }
.ifun_text_menu a { display: block; text-decoration: none; }
.ifun_text_menu li:hover>a { color: #3073b5; }
.ifun_text_menu>ul>li>a { text-indent: -10000px; width: 20px; height: 20px; }
.ifun_text_menu>ul ul { 
    /* display: none; */
     position: absolute; width: 150px; 
     /* border: 1px solid #ccc;  */
    }

.ifun_text_menu ul ul ul ul { width: 200px; }
.ifun_text_menu>ul ul::before { content: ''; display: block; position: absolute; top: 12px; left: -12px; width: 5px; height: 5px; border-left: 1px solid #333; border-top: 1px solid #333; transform: rotate(135deg); }
.ifun_text_menu li:hover>ul::before { border-color: #3073b5; }
.ifun_text_menu>ul>li>ul { top: 20px; left: 0; }
.ifun_text_menu>ul>li>ul ul { top: -1px; left: 150px; }
/* .ifun_text_menu>ul li:hover>ul { display: block; } */
.ifun_text_menu>ul li>ul>li{display:none;}
.ifun_text_menu>ul li:hover>ul>li{display:block;}
.ifun_text_menu>ul li:hover>ul{border: 1px solid #ddd;}
.ifun_text_menu>ul ul li { background-color: rgba(255, 255, 255, 0.85); position: relative; }
.ifun_text_menu>ul ul a { padding: 6px 10px; line-height: 125%; font-size: 14px; color: #333; }

/*----------------------------------------------------------------------*/
/* 表單 */
/* 表單群組 */
fieldset.FormGroup { width: auto; min-width: 0; max-width: none; }

@-moz-document url-prefix() {
    fieldset.FormGroup { display: table-cell; }
}

.FormGroup { max-width: 100%; overflow: hidden; position: relative; margin-left: 0; margin-right: 0; }
.FormGroup::after { content: ''; display: block; clear: both; }
legend.form_group_title { padding-left: 0; padding-right: 0; }
.FormGroupWarp>*:first-child { margin-top: 0; }
.FormGroupWarp>*:last-child { margin-bottom: 0; }
.FormGroup { background-color: #fff; border: 1px solid #cdcbc8; border-radius: 10px; margin-top: 10px; margin-bottom: 40px; position: relative; }
.form_group_title span { display: block; padding: 10px 20px; border-radius: 30px; background: linear-gradient(to right, #65AF8E 0, #1d5b88 100%); color: #fff; font-size: 1.125rem; letter-spacing: .1em; line-height: 1.5em; }
.form_group_title.icon span::before { content: ''; display: inline-block; width: 22px; height: 22px; vertical-align: middle; margin: 0 10px 0.15em 0; background: url("../images/icon_legend.png") no-repeat; background-size: 100%; }
.form_group_title.search span::before { background-position: 0 0; }
.form_group_title.setting span::before { background-position: 0 10%; }
.FormGroup>*:first-child { margin-top: 0; }
.FormGroup>*:last-child { margin-bottom: 0; }

@media screen and (max-width: 639px) {
    .FormGroupWarp { margin-top: 20px; margin-bottom: 30px; }
    .FormGroup { padding: 15px 15px 30px; }
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
    .FormGroupWarp { margin-top: 20px; margin-bottom: 40px; }
    .FormGroup { padding: 20px 30px 30px; }
}
@media screen and (min-width: 1024px) {
    .FormGroupWarp { margin-top: 20px; margin-bottom: 40px; }
    .FormGroup { padding-top: 20px; padding-bottom: 20px; }
}
@media screen and (min-width: 1024px) and (max-width: 1439px) {
    .FormGroup { padding-left: 2.8vw; padding-right: 2.8vw; }
}
@media screen and (min-width: 1440px) {
    .FormGroup { padding-left: 40px; padding-right: 40px; }
}

/* 表單表格 */
.FormTableWrap { margin: 10px 0 30px; }
.FormTableWrap.login { max-width: 800px; margin-left: auto; margin-right: auto; }
.FormTableWrap>*:first-child { margin-top: 0; }
.FormTableWrap>*:last-child { margin-bottom: 0; }
table.FormTable { width: 100%; margin: 10px 0 20px; table-layout: fixed; }
table.FormTable.small { max-width: 780px; margin-left: auto; margin-right: auto; }
table.FormTable>tbody>tr>th { line-height: 1.5em; position: relative; font-weight: 500; }
table.FormTable>tbody>tr>th span.required { color: #ec6d4f; margin-right: 2px; }
table.FormTable>tbody>tr>td { line-height: 1.5em; }

@media screen and (max-width: 1023px) {
    .FormTable { width: auto; }
    table.FormTable, table.FormTable>tbody, table.FormTable>tbody>tr, table.FormTable>tbody>tr>th, table.FormTable>tbody>tr>td { display: block; }
    table.FormTable>tbody>tr { padding: 20px 0 15px 0; position: relative; }
    table.FormTable>tbody>tr:last-child { padding-bottom: 0; border-bottom: none; }
    table.FormTable>tbody>tr>th { margin-bottom: 10px; text-align: left; }
}
@media screen and (min-width: 1024px) {
    table.FormTable>tbody>tr>th, table.FormTable>tbody>tr>td { vertical-align: top; }
    table.FormTable>tbody>tr>th { height: 1px; width: 300px; padding: 20px 10px 15px 0; text-align: right; }
    table.FormTable>tbody>tr>th>div { max-height: 40px; height: 100%; display: flex; justify-content: flex-end; align-items: center; align-content: center; flex-wrap: wrap; }
    table.FormTable>tbody>tr>td { padding: 15px 0 10px 0; }
}

/* 表單內按鈕 */
.FormElmt .inline_btn { display: inline-block; margin-right: 6px; vertical-align: top; }
.FormElmt .inline_btn>* { display: inline-block; margin-right: 5px; margin-bottom: 5px; padding-left: 15px; padding-right: 15px; background-color: #999; color: #fff; line-height: 40px; text-decoration: none; border-radius: 5px; }
.FormElmt .inline_btn>*[class] { background-image: url("../images/icon_inline_btn.png"); background-repeat: no-repeat; }
.FormElmt .inline_btn>*:hover, .FormElmt .inline_btn>*:focus { background-color: #2d6cab; }
.FormElmt .inline_btn.block { display: block; margin-left: 0; margin-right: 0; }

/* 表單警告/提示 */
.FormElmt .form_alert { display: inline-block; margin-left: 10px; margin-right: 6px; vertical-align: top; }
.FormElmt .form_alert span { display: inline-block; margin-right: 6px; margin-bottom: 6px; padding-left: 15px; padding-right: 15px; background-color: #c9161d; color: #fff; line-height: 36px; font-size: 0.875rem; box-sizing: border-box; position: relative; border-radius: 5px; }
.FormElmt .form_alert span::after { display: block; content: ''; top: 15px; left: -8px; position: absolute; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 8px solid #c9161d; }

/* 表單元件 */
.FormElmt input[type="text"], .FormElmt input[type="password"], .FormElmt input[type="file"], .FormElmt input[type="number"], .FormElmt input[type="date"], .FormElmt input[type="month"], .FormElmt input[type="week"], .FormElmt input[type="time"], .FormElmt input[type="datetime-local"], .FormElmt input[type="email"], .FormElmt input[type="search"], .FormElmt input[type="tel"], .FormElmt input[type="url"], .FormElmt input[type="color"], .FormElmt input[type="hidden"], .FormElmt input[type="range"] { line-height: 46px; height: 46px; }
.FormElmt input[type="text"], .FormElmt input[type="password"], .FormElmt input[type="file"], .FormElmt input[type="number"], .FormElmt input[type="date"], .FormElmt input[type="month"], .FormElmt input[type="week"], .FormElmt input[type="time"], .FormElmt input[type="datetime-local"], .FormElmt input[type="email"], .FormElmt input[type="search"], .FormElmt input[type="tel"], .FormElmt input[type="url"], .FormElmt input[type="color"], .FormElmt input[type="hidden"], .FormElmt input[type="range"], .FormElmt select, .FormElmt textarea { max-width: 100%; margin-bottom: 5px; margin-right: 10px; vertical-align: middle; font-size: 1rem; color: #555; }
.FormElmt input::placeholder { color: #555; }
.FormElmt input[type="text"], .FormElmt input[type="password"], .FormElmt input[type="number"], .FormElmt input[type="date"], .FormElmt input[type="month"], .FormElmt input[type="week"], .FormElmt input[type="time"], .FormElmt input[type="datetime-local"], .FormElmt input[type="email"], .FormElmt input[type="search"], .FormElmt input[type="tel"], .FormElmt input[type="url"], .FormElmt input[type="color"], .FormElmt input[type="hidden"], .FormElmt input[type="range"], .FormElmt select, .FormElmt textarea { box-sizing: border-box; border: 1px solid #cdcbc8; border-radius: 6px; overflow: hidden; position: relative; background-color: #fff; }
.FormElmt input[type="text"], .FormElmt input[type="password"], .FormElmt input[type="number"], .FormElmt input[type="date"], .FormElmt input[type="month"], .FormElmt input[type="week"], .FormElmt input[type="time"], .FormElmt input[type="datetime-local"], .FormElmt input[type="email"], .FormElmt input[type="search"], .FormElmt input[type="tel"], .FormElmt input[type="url"], .FormElmt input[type="color"], .FormElmt input[type="hidden"], .FormElmt input[type="range"] { padding: 0 20px; }

.FormElmt textarea { padding: 10px; border-radius: 10px; }
.FormElmt select { padding-left: 12px; padding-right: 10px; height: 45px; max-width: 100%; margin-left: 10px; }
.FormElmt select:first-child { margin-left: 0px; }
.FormElmt input[type="radio"]+label, .FormElmt input[type="checkbox"]+label { margin-right: 4px; }
.FormElmt input[type="text"]:focus, .FormElmt input[type="password"]:focus, .FormElmt input[type="file"]:focus, .FormElmt input[type="number"]:focus, .FormElmt input[type="date"]:focus, .FormElmt input[type="month"]:focus, .FormElmt input[type="week"]:focus, .FormElmt input[type="time"]:focus, .FormElmt input[type="datetime-local"]:focus, .FormElmt input[type="email"]:focus, .FormElmt input[type="search"]:focus, .FormElmt input[type="tel"]:focus, .FormElmt input[type="url"]:focus, .FormElmt input[type="color"]:focus, .FormElmt input[type="hidden"]:focus, .FormElmt input[type="range"]:focus, .FormElmt textarea:focus, .FormElmt select:focus { background-color: #fffdf3; outline: 0; transition: all ease-in-out .15s; }
.FormElmt input[disabled], .FormElmt textarea[disabled], .FormElmt select[disabled] { background-color: #fff; color: #125c8f; opacity: 1; padding: 0; height: auto; line-height: inherit; box-shadow: none; }
.FormElmt select[disabled] { cursor: default; }
.FormElmt input[type="file"][disabled] { border: 0; background: none; }
.FormElmt input[type="radio"][disabled]+label, .FormElmt input[type="checkbox"][disabled]+label { color: #b3b3b3; }

@media screen and (max-width: 639px) {
    .FormElmt input[type="text"], .FormElmt input[type="password"], .FormElmt input[type="file"], .FormElmt input[type="number"], .FormElmt input[type="date"], .FormElmt input[type="month"], .FormElmt input[type="week"], .FormElmt input[type="time"], .FormElmt input[type="datetime-local"], .FormElmt input[type="email"], .FormElmt input[type="search"], .FormElmt input[type="tel"], .FormElmt input[type="url"], .FormElmt input[type="color"], .FormElmt input[type="hidden"], .FormElmt input[type="range"], .FormElmt select, .FormElmt textarea { font-size: 0.9375rem; }
    .FormElmt input[type="file"] { width: 100%; }
    .FormElmt input[type="text"], .FormElmt input[type="password"], .FormElmt input[type="number"], .FormElmt input[type="date"], .FormElmt input[type="month"], .FormElmt input[type="week"], .FormElmt input[type="time"], .FormElmt input[type="datetime-local"], .FormElmt input[type="email"], .FormElmt input[type="search"], .FormElmt input[type="tel"], .FormElmt input[type="url"], .FormElmt input[type="color"], .FormElmt input[type="hidden"], .FormElmt input[type="range"] { padding: 0 10px; }
}

.FormElmt hr { margin: 15px 0 5px; }
.FormElmt .w40 { width: 40px; }
.FormElmt .w60 { width: 60px; }
.FormElmt .w80 { width: 80px; }
.FormElmt .w100 { width: 100px; }
t.FormElmt .w150 { width: 150px; }
.FormElmt .w200 { width: 200px; }
.FormElmt .w250 { width: 250px; }
.FormElmt .w300 { width: 300px; }
.FormElmt .w350 { width: 350px; }
.FormElmt .w400 { width: 400px; }
.FormElmt .w500 { width: 500px; }
.FormElmt .fullwidth { width: 100%; }
.FormElmt .date, .FormElmt .datepicker { width: 150px; }
.FormElmt .note { display: block; color: #ec6d4f; }
.FormElmt .FormTable .note { margin-left: 5px; font-size: 0.875rem; }
.FormElmt .FormTable br+.note { display: block; margin-left: 0; }

/* checkbox/radio群組 */
.FormElmt .form-check-group { max-width: 100%; }
.FormElmt .form-check-group.inline { display: inline-block; }
.FormElmt *+.form-check-group.inline.margin { margin-left: 15px; }
.FormElmt .form-check-group li { display: inline-block; margin-top: 5px; margin-bottom: 5px; padding-right: 30px; max-width: 100%; line-height: 30px; vertical-align: middle; }
.FormElmt .form-check-group.item_block li { display: block; margin-right: 0; }
.FormElmt .form-check-group .fullwidth { display: block; margin-right: 0; }
.FormElmt .form-check-group li.divider { height: 40px; position: relative; }
.FormElmt .form-check-group li.divider::before { content: ''; display: block; position: absolute; top: 50%; left: 0; margin-top: -15px; height: 30px; border-left: 1px solid #ccc; }

/* checkbox/radio群組 */
.FormElmt .input_group.inline { display: inline-block; margin-left: 10px; }
.FormElmt .input_group>div { display: inline; margin-right: 10px; line-height: 32px; }
.FormElmt .input_group.item_block>div { display: block; margin-right: 0; }
.FormElmt .input_group .fullwidth { margin-right: 0; }

/* 驗證碼 */
.FormElmt .FormTable .randomcode { display: flex; align-items: center; align-content: center; flex-wrap: wrap; }
.FormElmt .randomcode .input input[type="text"] { max-width: 200px; width: 100%; }
.FormElmt .randomcode .img img { display: block; }
.FormElmt .randomcode .btns { margin-left: 10px; }
.FormElmt .randomcode .btns>* { border: 0; padding: 0; margin-right: 10px; height: 36px; position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; font-size: 0.875rem; line-height: 36px; color: #666; text-decoration: none; transition: all .3s ease; }
.FormElmt .randomcode .btns>*:last-child { margin-right: 0; }
.FormElmt .randomcode .btns>*:hover, .FormElmt .randomcode .btns>*:focus { color: #1d5b88; }
.FormElmt .randomcode .btns>*::before { display: inline-block; content: ''; width: 15px; height: 15px; vertical-align: middle; margin-right: 5px; background: url("../images/icon_random_code.png") no-repeat; background-size: 200%; }
.FormElmt .randomcode .refresh::before { background-position: 0 0; }
.FormElmt .randomcode .play::before { background-position: 0 20%; }
.FormElmt .randomcode .refresh:hover::before, .FormElmt .randomcode .refresh:focus::before { background-position: right 0; }
.FormElmt .randomcode .play:hover::before, .FormElmt .randomcode .play:focus::before { background-position: right 20%; }
.FormElmt .randomcode .btns>*::after { display: block; content: ''; position: absolute; bottom: 3px; left: 0; width: 100%; height: 1px; background-color: #d4d4d4; transition: all .3s ease; }
.FormElmt .randomcode .btns>*:hover::after, .FormElmt .randomcode .btns>*:focus::after { background-color: #1d5b88; }

/* 按鈕 */
.BtnCommon { margin-top: 30px; margin-bottom: 15px; clear: both; text-align: center; }
.BtnCommon.tl { text-align: left; }
.BtnCommon.tr { text-align: right; }
.BtnCommon div { display: inline-block; margin-top: 5px; margin-bottom: 5px; }

@media screen and (max-width: 639px) {
    .BtnCommon div, .BtnCommon.tc div { margin-right: 5px; margin-left: 5px; }
    .BtnCommon.tl div { margin-right: 10px; margin-left: 0; }
    .BtnCommon.tr div { margin-right: 0; margin-left: 10px; }
}
@media screen and (min-width: 640px) {
    .BtnCommon div, .BtnCommon.tc div { margin-right: 8px; margin-left: 8px; }
    .BtnCommon.tl div { margin-right: 16px; margin-left: 0; }
    .BtnCommon.tr div { margin-right: 0; margin-left: 16px; }
    .BtnCommon.small div, .BtnCommon.tc.small div { margin-right: 3px; margin-left: 3px; }
    .BtnCommon.tl.small div { margin-right: 6px; margin-left: 0; }
    .BtnCommon.tr.small div { margin-right: 0; margin-left: 6px; }
}

.BtnCommon a, .BtnCommon button { display: block; }
.BtnCommon span { display: flex; align-items: center; }
.BtnCommon a, .BtnCommon button { background-color: #ec6d4f; position: relative; color: #fff; border-radius: 30px; font-weight: bold; letter-spacing: 0.1em; border: 5px solid #ffeadf; transition: all .3s ease; }
.BtnCommon.large a, .BtnCommon.large button { height: 54px; line-height: 45px; }
.BtnCommon.mid a, .BtnCommon.mid button { height: 45px; line-height: 35px; }
.BtnCommon.small a, .BtnCommon.small button { height: 36px; line-height: 26px; border-width: 2px; font-weight: 500; }

@media screen and (max-width: 639px) {
    .BtnCommon.large a, .BtnCommon.large button { padding-left: 20px; padding-right: 20px; font-size: 1.125rem; }
    .BtnCommon.mid a, .BtnCommon.mid button { padding-left: 15px; padding-right: 15px; font-size: 0.9375rem; }
    .BtnCommon.small a, .BtnCommon.small button { padding-left: 10px; padding-right: 10px; font-size: 0.9375rem; }
}
@media screen and (min-width: 640px) {
    .BtnCommon.large a, .BtnCommon.large button { padding-left: 25px; padding-right: 25px; font-size: 1.125rem; }
    .BtnCommon.mid a, .BtnCommon.mid button { padding-left: 20px; padding-right: 20px; font-size: 1rem; }
    .BtnCommon.small a, .BtnCommon.small button { padding-left: 15px; padding-right: 15px; font-size: 1rem; }
}

.BtnCommon a { text-decoration: none; }

/* 按鈕加icon */
.BtnCommon div[class] span::before { content: ''; display: inline-block; flex: 0 1 auto; width: 20px; height: 20px; margin: 0 6px 0 0; background: url("../images/icon_btn_common.png") no-repeat; background-size: 100%; }
.BtnCommon div.no_icon span::before { display: none; }
.BtnCommon a:hover, .BtnCommon button:hover, .BtnCommon a:focus, .BtnCommon button:focus { border-color: #afe6ce; background-color: #258E86; }
.BtnCommon .forget a, .BtnCommon .reset button { border-color: #d2e3ec; background-color: #97aeb8; }
.BtnCommon .forget a:hover, .BtnCommon .reset button:hover { border-color: #b8d9ea; background-color: #4494b8; }
/* .BtnCommon .gen_signup_btn a, .BtnCommon .gen_signup_btn button { border-color: #ffddac; background-color: #f99911; }
.BtnCommon .gen_signup_btn a:hover, .BtnCommon .gen_signup_btn a:focus { border-color: #ff8b71; background-color: #ff3f1d; } */
.BtnCommon div.login span::before { background-position: 0 0; }
.BtnCommon div.forget span::before { background-position: 0 25%; }
.BtnCommon div.submit span::before { background-position: 0 50%; }
.BtnCommon div.reset span::before { background-position: 0 75%; }
.BtnCommon div.gen_signup_btn span::before { background-position: 0 100%; }

/* 表單送出畫面 */
.form_feedback_box { background-color: #fffdf3; border: 2px solid #5baacc; padding: 20px 30px; max-width: 640px; margin: 30px auto; line-height: 2em; box-shadow: 2px 2px 17px rgba(0, 0, 0, 0.14); }