* {font-family: "Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;} 
img { height: auto;max-width: 100%; }
hr {border-top: 1px solid #888;}

h2,h3,h4,h5 {font-weight: 600;margin-bottom:15px;}
h2 { font-size:4rem;letter-spacing: 1px;} 
h3 { font-size:3.7rem;}
h3+h4,h3+h5,h3+h6,h4+h5,h4+h6{margin-top:0;}
h4,.panel-title { font-size:3.5rem;}
h5 { font-size:3rem;line-height: 1.5;}
h6,.list-group-item > i { font-size:2.3rem;}
p,body,.col_q { font-size:2rem;}
h6,p,.col_q,.list-group-item > i,li {line-height: 1.6;}
p {margin-bottom:15px;}

.btn { font-size:2.1rem; }
.btn-xs { font-size:1.7rem;padding: 3px 10px 0;}
.btn-sm { font-size:2.5rem;}
.btn-lg { font-size:3.2rem;padding: 10px 30px;}
.btn-radius { border-radius: 100px;}
.btn-default {
  color: #213b5b;
  background-color: #fff;
  border-color: #213b5b;
}
.btn-default:hover {
  color: #fff;
  background-color: #ccc;
  border-color: #bbb;
}
.btn-primary {background-color: #213b5b;border-color: #213b5b;}



.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small {
  font-size: 85%;
}
strong.lead {font-size:150%;font-weight: 600;margin-bottom: 0;letter-spacing: 2px;}
span.lead,a.lead,em.lead,ins.lead {font-size:130%;font-weight: 600;margin-bottom: 0;}

p small {color:#999;}
img + h6 {line-height: 1.2;}
img+p {margin-bottom:7px;}
a,a:link,a:visited,a:hover,a:focus,a:active {text-decoration: none;}
a.disabled {
pointer-events: none;
cursor: not-allowed;
opacity: .7;
}


pre {margin:10px auto;line-height: 1.1;}

mark {padding: 5px 5px 0px; background-color:#ff0}
.label { padding:.2em .6em 0;}
.label-white {background-color:#fff;border: 1px solid #d7d7d7;color:#000;}

.font_my{font-family: Microsoft YaHei;letter-spacing: 1px;font-weight: 600;}
.font_merr{
font-family: merriweather, source-han-serif-tc, serif;
line-height: 1.63;
font-weight: 700;
}


.col_btn {padding-top:25px;padding-bottom:25px; text-align:center;}
.col_btn.text-right,.col_more{text-align:right;}
.col_btn.text-left{text-align:left;}
.col_btn a,.col_link a{margin:4px;}
.col_link {margin:2% auto;}
.col_more {margin:10px auto;}


.col_map {
display: block; position: relative;
overflow: hidden; height: 0; padding: 0;
padding-bottom: 100%;
}
.col_map iframe {
position: absolute;
height: 100%; width: 100%;
left: 0; top: 0;
}

.col_line {margin-top:20px;}
.col_line .panel-body p {display: inline-block; margin:10px;}

.col_photo {width: 100%;display: flex;justify-content: space-between;align-items: start;}
.col_photo img{visibility: visible;filter:drop-shadow(0px 0px 5px rgba(0,0,0,.7)) ;border: 4px #fff solid;}

.col_mt,.ican_mt {margin-top:30px;}
.col_mb,.ican_mb {}
.col_pt,.ican_pt {padding-top:5%;}
.col_pb,.ican_pb {padding-bottom:5%;}
.col_movie,.ican_movie,.col_audio {margin:20px auto 30px;}
.col_movie h6 {margin-top:30px;margin-bottom: 0;}
.col_audio audio{display: block;width: 100%; margin-bottom:20px;}


.flex {display: flex; flex-direction: row;align-items:center;}
.flex_item {display: flex; justify-content: center;}
.flex-end {align-items: flex-end;}
.flex-wrap {flex-wrap: wrap;} 

ul.disc>li {list-style:disc;line-height: 1.5;}

ul.icon_1 {
list-style-type: none;
padding: 0;
margin: 0;
}
.icon_1 li {
color: #213b5b;
font-size:4.8rem;
font-weight: 600;
background: url(icon_1.png) scroll no-repeat 0 0 / 13% ;
padding-left: 90px;
line-height: 2;
}

ul.tick>li { list-style: none;}
ul.tick>li::before {
content: "✔ "; 
color:#c00;
font-size: 130%;      
}



.img_shadow{filter:drop-shadow(0px 5px 3px rgba(0,0,0,.5)) ;}
.img-fluid {width: 100%;}

.bg-wdfp {background-color:#213b5b;}
.bg-white {background-color:#fff;}
.bg-e {background-color:#eee;}

.text-wdfp {color:#213b5b;}
.text-white {color:#fff;}
.text-red {color:#c00;}
.text-rainbow{
    background: linear-gradient(45deg, red 0%, red 15%,
    orange 15%, orange 30%,
    yellow 30%, yellow 45%,
    green 45%, green 60%,
    blue 60%, blue 75%,
    indigo 75%, indigo 90%,
    black 90%, black 100%);
    background: -webkit-linear-gradient(to top, #3a1c71, #d76d77, #ffaf7b);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-family: Microsoft YaHei;
}


.t-shadow{text-shadow: 2px 2px 5px #000;}
.t-shadow_w{text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff,0px 0px 10px #fff, 0px 0px 5px #fff;}


/*------------Bootstrap------------*/
.pull-left {margin-right:10px}
.pull-right {margin-left:10px}

.label { line-height: 2;}

.alert-light{color: #666;background-color: #fff;border-color: #c6c8ca;}
.alert-wdfp {color: #213b5b;background-color: #def;border-color: #7a899d;}

.panel h2,.panel h3,.panel h4,.panel h5,.panel h6,.alert h2,.alert h3,.alert h4,.alert h5,.alert h6 {margin:0 auto;padding: 0;line-height: 1.2;}
.alert > p {margin-bottom:15px;}
h4.panel-title,h5.panel-title {font-weight: 100;}
blockquote h5,blockquote h6 {padding:0 10px;}
.panel-primary {border-color: #7a899d;}
.panel-primary > .panel-heading {color: #fff;background-color: #7a899d;border-color: #7a899d;}

.dl-horizontal dt>h5,.dl-horizontal dt>h6,.dl-horizontal dt>p{margin-top:0;}
.dl-horizontal dd {padding-bottom:20px;}
.panel-success .dl-horizontal dt { color: #3c763d;}
.panel-info .dl-horizontal dt { color: #31708f;}


/*-----Card----------*/
.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .25rem;
  margin-bottom: 20px;
}
.card-img-top {
  width: 100%;
  border-top-left-radius: calc(.25rem - 1px);
  border-top-right-radius: calc(.25rem - 1px);
}
.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 15px;
}


/*------------Bootstrap------------*/

/*------------NAV------------*/
nav ol,nav li {list-style: none;}
.navbar-nav {margin-top:10px; }
.navbar-default .navbar-brand,.navbar-inverse .navbar-brand {
font-size: 3rem;
font-family: Microsoft YaHei;
letter-spacing: 1px;
font-weight: 600;
color:#213b5b;
line-height: 1; 
height: auto;
}
.navbar-default { background-color: #f1f1f1; margin-bottom:10px;}


.navbar-inverse {background-color: #213b5b;border-color: #213b5b;}
.navbar-inverse .navbar-brand {color:#fff;}
.navbar-inverse .navbar-toggle {border-color: #fff;background-color: #fff;padding: 10px; margin-top: 10px;}
.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus,.navbar-inverse .navbar-toggle:active { }
.navbar-inverse .navbar-toggle .icon-bar {background-color: #333;}

        ul.nav>li {position: relative;}
        ul.nav>li ul>li{border-left: solid 1px #ccc;}
        ul.nav>li>ul>li a{
            color: #666;
            padding-top: 10px;
            padding-bottom: 10px;
            text-decoration:none;
            display: block;
        }
        ul.nav>li>ul>li a:hover {color:#213c5a;}
        ul.nav>li ul>li {border-bottom: solid 1px #ccc;} 
        ul.nav>li ul>li:last-child{border-bottom:0;}
        ul.nav>li>ul li>ul.sub-menu {border-top: solid 1px #ccc;}
        ul.nav>li>ul.sub-menu li>ul.sub-menu{display:none;}
        ul.nav>li ul {padding-left:0;}
        ul.nav>li ul>li>a:before{
            font-family: 'FontAwesome';
            content: '\f105';
            padding-right:7px;
            padding-left:7px;
            font-size:10px;
        }

      /*電腦*/
      @media(min-width:768px) { 
            .navbar-left { margin-top: 35px;float: right !important;}  
            .navbar-right { margin-right: 0; }
            ul>li>a>b.arrow:after {
                font-family: 'FontAwesome';
                content: '\f078';
                font-size: 12px;
                position: absolute;
                right: 0;
            }
            ul>li>ul>li>a>b.arrow:after {
                font-family: 'FontAwesome';
                content: '\f077';
                font-size: 15px;
                position: absolute;
                top:0;
                right: 0;
                padding:10px 15px;
            }
            ul>li>ul>li>a>b.on:after {
                font-family: 'FontAwesome';
                content: '\f00d';
            }
            ul.nav>li:hover>a+ul {
                visibility: visible;
                opacity: 1;
            }
            ul.nav>li>ul.sub-menu {
                position: absolute;
                bottom: 50px;
                /files/img/xu.css: 0;
                z-index: 9999;
                background: #fff;
                width: 14vw;
                text-align: left;
                border-left: solid 1px #ededed;
                border-bottom: solid 1px #ededed;
                border-right: solid 1px #ededed;
                box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.3);
                opacity: 0;
                visibility: hidden;
                -webkit-transition: all .5s;
                transition: all .5s;
            }
      }

@media only screen and (max-width: 1280px) { 
.navbar-nav {margin-top:0;}
}
@media only screen and (max-width: 992px) { 
.navbar-brand { font-size: 2rem;}
}
@media only screen and (max-width: 768px) { 
            b.arrow:after {
                font-family: 'FontAwesome';
                content: '\f078';
                position: absolute;
                top: 3px;
                right: 0;
                padding: 10px 20px 10px 40px;
            }
            a.dropdown+ul {
                display: none;
            }
            b.on:after {
                font-family: 'FontAwesome';
                content: '\f00d';
            }
            .navbar-inverse .navbar-collapse {background-color: #213b5b;}
            ul.nav > li { text-align: left;}
            ul.nav>li>a {border-bottom: solid 1px #ccc;}
            ul.nav>li:last-child>a {border-bottom: 0;}          
            ul.nav>li>ul.sub-menu {border-bottom: solid 1px #ccc; }
            ul.nav>li>ul>li a {color: #eee;line-height: 1.7;}
            ul.nav>li>a,ul.nav>li>ul>li a{font-size: 2rem;}
            ul.nav>li ul {padding-left:15px;}
            
}

@media only screen and (max-width: 480px) { 
.navbar-brand { font-size: 1.8rem;}      
}

@media (max-width: 420px) { 
}
/*------------↑NAV↑------------*/



/*------------footer------------*/
footer {padding: 30px 0; background-color:#333; color:#fff; letter-spacing: 1px;}
footer p,footer p small {margin-bottom: 0;color:#fff; line-height: 1.2;}
footer a {color: #fff;}
footer a:hover {color: #777;}
footer .col_link a {display:inline-block;margin:5px;}
footer .item{margin:10px auto;}
footer .col_logo img {margin-bottom:10px;}

footer.manager_xu .list-unstyled > li {display:inline-table; margin-right:10px; margin-bottom:15px;}
footer.manager_xu .list-unstyled > li a {color:#ffc;}
footer.manager_xu .list-unstyled .sub-menu li{display:block; margin-left:-40px;list-style:none;}
footer.manager_xu .list-unstyled .sub-menu li::before {content: "﹥"; }
footer.manager_xu .list-unstyled .sub-menu li li {margin-left:-22px;}
footer.manager_xu .list-unstyled .sub-menu li li::before {content: ""; }
footer.manager_xu ul.sub-menu li a{color:#fff;}


/*------↓漂浮------*/
.ican_float {position: fixed;text-align: center;top:45vh;right:2px;z-index: 9;}
.ican_float a img {border: none;display: block; margin-bottom:5px;filter: drop-shadow(0 0 2px rgba(255,255,255,1));}



/*---↓商品↓------------*/
.Lican_product{}
.Lican_goods_title {margin:0 auto; color:#213b5b;}
.Lican_goods,.thumbnail a > img.Lican_goods {margin-bottom:5px;}
.special-link > h5,.shadow-link h5{
line-height:1;
min-height: 34px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;/*限制行數*/
-webkit-box-orient: vertical;
white-space: normal;
}
.Lican_product .bg {background-color: #fafafa; padding-top:20px;}
.Lican_product_title {
background-image: linear-gradient(to bottom, #f5c8ca 0%,#f0888b 50%,#e9777f 51%,#e74f4f 100%); 
border-top-right-radius: 100px;
width: 40%;
color: #fff333;
padding: 5px;
border: 1px #141414 solid;
margin-bottom: 0;
}



/*-----文章頁----------*/
.alert-contact { margin-top:20px;text-align: center; }
.list-group-item > i {float: right;color: #213b5b;}
a.list-group-item .list-group-item-heading, button.list-group-item .list-group-item-heading {margin:0 auto;}
a.list-group-item p {margin:0 auto;}
a.list-group-item .list-group-item-heading {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;/*限制行數*/
-webkit-box-orient: vertical;
white-space: normal;
}
.article img {margin-bottom:10px;}
.article p span {color:#c00;display: block;}



/*------element-to-animate---------*/
/*往下*/
.a_slide-down {
  animation: slide-down 2s ease-in-out 1s infinite alternate forwards; 
}
@keyframes slide-down {
  from {
    transform: translateY(5px);
  }
  to {
    transform: translateY(-20px);
  }
}






/*-----Home----------*/
.home .title {text-align: center; margin-bottom:30px;}
.home .title span{border-bottom: 2px dotted #888;}

.home_marquee { padding-bottom: 10px;border-bottom: 1px dotted #999;}
.home_marquee > .btn {padding: 0 15px;border-radius:0 50px 50px 0 ;}
.marquee {
  overflow: hidden; /* 隱藏超出父容器的內容 */
  white-space: nowrap; /* 保持內容在一行，如果不需要請移除 */
  text-overflow: ellipsis; /*文字隱藏後添加省略符號*/
  display: -webkit-box;
  -webkit-line-clamp: 1;/*限制行數*/
  -webkit-box-orient: vertical;
  white-space: normal;
  height: 32px;
  display: flex; /* 使用 Flexbox 讓項目排列 */
  flex-direction: column; /* 讓項目垂直排列 */
  position: relative;
}
.marquee-infinite{
position: absolute;
width: 100%;
animation: marquee-infinite 10s linear infinite;
&:hover {  animation-play-state: paused;}
}
@keyframes marquee-infinite {
	from {
		transform: translateY(0%);
	}
	to {
		transform: translateY(-100%);
	}
}


.xu_article {margin-bottom:30px;}
.xu_article .article_title{
overflow:hidden; 
white-space: nowrap; 
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;/*限制行數*/
-webkit-box-orient: vertical;
white-space: normal;
font-size: 115%;
margin-bottom: 0;
}
.xu_article .article_short {
overflow:hidden; 
white-space: nowrap; 
text-overflow: ellipsis; 
display: -webkit-box;
-webkit-line-clamp: 4;/*限制行數*/
-webkit-box-orient: vertical;
white-space: normal;
text-align: justify;
color: #777;
}
.xu_article .article_short span{color:#c00;display: block;}
.xu_article .card-body {min-height: 233px;}





/*-----inside_page----------*/
main.manager_xu {padding-bottom:70px;}

.inside_page .title {color:#7a899d; margin-bottom:30px;margin-top:80px; border-bottom:2px dotted #7a899d; }
.inside_page .title h2{
margin:5px auto 0;line-height: 1.2;letter-spacing: 0;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;/*限制行數*/
-webkit-box-orient: vertical;
white-space: normal;      
}







.col_qa {}
.col_qa .collapse::before {content:"A";color: #fff;background-color: #666;padding: 0 6px;float: left;} 
.col_qa span {color:#c00;}
.col_qa p {text-align: justify;}
.col_qa p{padding-left:30px;}
.col_qa ol,.col_qa ul {padding-left:55px;}
.col_q{color:#213b5b;}
.col_q::before {content:"Q";color: #fff;background-color: #213b5b;padding: 0 5px; margin-right:3px;}
.col_q::after {content:"🔍";color: #213b5b;float: right;}
.col_qa ol.sort ul {list-style-type: lower-alpha;padding-left:25px;}
#col_qa1,#col_qa2,#col_qa3 {padding-top:70px;}


@media only screen and (max-width: 1680px) { 
p,body,.col_q { font-size:1.9rem;}      
}

@media only screen and (max-width: 1280px) { 
h2{ font-size:3.8rem;}  
h3{ font-size:3.5rem;}
h4,.panel-title { font-size:3.2rem;}
h5{ font-size:3rem; }
h6,.list-group-item > i { font-size:2.4rem;}
p,body,.col_q { font-size:1.7rem;}
.xu_article .card-body {min-height: 220px;}
}

@media only screen and (max-width: 992px) { 
.col_map {padding-bottom: 35%;}
#col_form {padding-top:5%;padding-bottom:5%;}
}

@media only screen and (max-width: 800px) { 
h2{ font-size:3.5rem;}  
h3{ font-size:3.3rem;}   
h4,.panel-title { font-size:3rem;}
h5{ font-size:2.7rem; }
h6,.list-group-item > i { font-size:2.1rem;}
.btn { font-size:1.7rem;}
.btn-sm { font-size:2.1rem;}
.btn-xs { font-size:1.3rem;}
.btn-lg { font-size:2.3rem;} 
.col_qa p {padding-left:30px;}
.xu_article .card-body {min-height: auto;}
}

@media only screen and (max-width: 768px) { 
.col_btn a,.col_link a { margin-bottom:10px;} 

.inside_page > .title { text-align:left;}
.inside_page > .title h2{font-size:3rem;-webkit-line-clamp: 3;/*限制行數*/}
}

@media only screen and (max-width: 640px) { 
h2{ font-size:3.3rem;}
h3{ font-size:3rem;}   
h4,.panel-title { font-size:2.7rem;}
h5{ font-size:2.4rem; }
h6,.list-group-item > i { font-size:1.9rem;}
p,body,.col_q { font-size:1.6rem;}
footer .logo {margin:10px auto; width:50vw;}
.col_map {padding-bottom: 50%;}
}
@media only screen and (max-width: 480px) { 
h2{ font-size:3rem;} 
h3{ font-size:2.7rem;} 
h4,.panel-title { font-size:2.3rem;}
h5{ font-size:2rem; }
h6,.list-group-item > i { font-size:1.8rem;}
strong.lead {font-size:130%;}
.inside_page > .title h2{font-size:3rem;}
.btn { font-size:1.5rem;}
.btn-sm { font-size:1.9rem;}
.btn-xs { font-size:1.1rem;}
.btn-lg { font-size:2.1rem;} 
.col_map {padding-bottom: 70%;}
.col_qa p {padding-left:25px;}
.col_qa ol,.col_qa ul {padding-left:45px;}
footer.manager_xu .list-unstyled > li { display: block;}
}
@media (max-width: 420px) { 
h3{ font-size:2.6rem;} 
h4,.panel-title { font-size:2.2rem;}


}