* {font-family: "Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;} 
img { height: auto;max-width: 100%; }
body {background: url("bg.jpg") scroll repeat center top;}

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

hr {border-top: 1px solid #ccc;margin-top: 10px;margin-bottom: 10px;}
.hr-twill-colorful {
    border: 0;
    padding: 3px;
    background: linear-gradient(135deg, purple, red, orange,green, blue);
    --mask-image: repeating-linear-gradient(135deg, #000 0px, #000 1px, transparent 1px, transparent 6px);
    -webkit-mask-image: var(--mask-image);
    mask-image: var(--mask-image);
}
.hr-wavy {
    border: 0;
    color: #ddd;
    height: .5em;
    white-space: nowrap;
    letter-spacing: 100vw;
    padding-top: .5em;
}
.hr-wavy::before {
    text-decoration: overline;
    text-decoration: overline wavy;
}


h2,h3,.dropdown-header {font-weight: 600;line-height:1.2;}
h4,h5 { margin-top: 20px; }
h2{ font-size:3.5rem;} 
h3{ font-size:3rem;}
h4 { font-size:2.7rem;}
h5,.panel-title{ font-size:2.4rem;}
h6,li,.dropdown-header,.btn  { font-size:1.9rem;line-height:1.6;}
p+h6 { margin-top:25px;}
p,body,.btn-sm { font-size:1.6rem;line-height:1.6;}


.btn {padding: 4px 16px 2px; margin:3px auto;}
.btn-lg {font-size:2.7rem;padding: 6px 25px 3px;}
.btn-md {font-size:2.1rem;}
.btn-xs {font-size:1.4rem;padding: 2px 5px 0;border-radius: 0;}


.btn-purple {
  color: #fff;
  background-color: #606;
  border-color: #f4e8f2;
}
.btn-purple:hover {
  color: #606;
  background-color: #f4e8f2;
  border-color: #f4e8f2;
}
.btn-pink {
  color: #606;
  background-color: #e9d3e6;
  border-color: #e9d3e6;
}
.btn-pink:hover {
  color: #606;
  background-color: #dfc0da;
  border-color: #dfc0da;
}


small { font-size: 80%;}
strong.lead,span.lead,a.lead,em.lead,ins.lead {font-size:130%;font-weight: 600;margin-bottom: 0;}
mark {
  padding: 2px;
  background-color: #ff0;
}



ol>li,ul>li {line-height: 1.5;}
.col_qa ol li::marker {
content: "Q" counter(list-item) ". ";
color: #606;
font-size: 150%;
font-style: oblique;
font-family: Georgia;
}

ol.sort li li::before{
   content: counters(list-item,"-",list-item)" ";
   color:#777;
}
ol.sort>li {list-style: decimal;}
ol.chinese-number>li {list-style: cjk-ideographic; padding-bottom:10px;}

ul.disc>li {list-style:disc;}
ul.square>li {list-style-type: square;} 
ul.tick>li,ul.x>li { list-style: none;}
ul.tick>li::before {content: "✔ "; color:#c00; }
ul.x>li::before,ol.sort li ul.x li::before {content: "✘ "; color:#c00; } 



a,a:link,a:visited,a:hover,a:focus,a:active {text-decoration: none;}
.text-link,a.text-link:link,a.text-link:visited {color:#333;}
a.text-link:hover,a.text-link:focus,a.text-link:active {color:#606;}

a.disabled {
pointer-events: none;
cursor: not-allowed;
opacity: .7;
}



.title {margin-top:0;}
.title+hr {margin-bottom:30px;}


.font_arial { font-family: Arial, Helvetica, sans-serif;}
.font_pd {font-family: "Playfair Display", serif;}
.font_my {font-family: Microsoft YaHei;letter-spacing: 2px;font-weight: 600;}


.text-justify .text-center {text-align:center;}

.text-red {color:#900;}
.text-white {color:#fff;}
.text-bk {color:#333;}
.text-purple,.title {color:#606;}

.text-shadow_w{text-shadow: 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff;}

.bg-white {background-color:#fff;}
.bg-pink,.bg_pink {background-color:#f4e8f2;}
.bg-e,.thead-light {background-color:#eee;}

.col_btn{padding-top:30px;padding-bottom:30px;}
.col_link {padding-top:10px;padding-bottom:10px;}
.col_btn a,.col_link a,.col_icon a{margin:5px;}
.col_link a i{margin-right:3px;}



.col_mt {margin-top:40px;}
.col_mb {margin-bottom:40px;}
.col_pt {padding-top:30px;}
.col_pb {padding-bottom:50px;}



.flex {display: flex; align-items: start;}
.flex-end {align-items: flex-end;}
.flex-center {align-items: center;}
.flex-wrap {flex-wrap: wrap;} 
.flex-jc-c {justify-content:center;}


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


.well h2,.well h3,.well h4,.well h5,.well h6{margin-top:0;}
.panel-heading h2,.panel-heading h3,.panel-heading h4,.panel-heading h5,.panel-heading h6,.panel-body p,
.alert h2,.alert h3,.alert h4,.alert h5,.alert h6,.alert p,.well p {margin:0 auto;}

.alert {padding:10px;}
.alert-warning {color:#222;border-color: #fcf8e3;}
.alert-purple {color:#606;background-color:#f4e8f2;}
.alert-light {border-color: #d2d2d2;background-color: #fff;}


.panel-light { border-color: #ccc;}
.panel-light > .panel-heading { border-color: #ccc;background-color:#eee;}
.panel-purple { border-color: #606;background-color: #f4e8f2;}
.panel-purple > .panel-heading { border-color: #606;background-color:#606;color:#fff;}
.panel-pink {border-color: #606;}
.panel-pink > .panel-heading { border-color: #606;background-color:#f4e8f2;color:#606;}



.well .col_btn{padding-top:20px;padding-bottom:10px;}

.embed-responsive {margin:20px auto;} 


.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: 15px;
  margin-bottom: 20px;
}
.card-img-top {
  width: 100%;
  border-top-left-radius: calc(15px - 1px);
  border-top-right-radius: calc(15px - 1px);
}
.card-img-bottom{
border-bottom-right-radius: calc(15px - 1px);
border-bottom-left-radius: calc(15px - 1px);
}
.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 15px;
}
.card-body .list-group { margin-bottom: 0;}

.card-title{margin-top:0; font-weight:600;}
.card-title small,.card-title strong,.card-title span,.card-title em { margin-left:5px;} 






/*------------NAV------------*/


ol,ul {list-style: none;}

.navbar-default {
border-radius: 0;
border: 0;
min-height: auto;
margin-bottom: 0;
background-color: transparent;
}

.navbar-default .navbar-nav > li > a {}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {color:#606;}
.navbar-default .navbar-nav > li > a.disabled {pointer-events: none;}

.navbar-nav > li > a.dropdown {padding-right:30px;}

.navbar-center {
  display: inline-block;
  float: none;
  vertical-align: top;
}
.navbar-collapse-center {text-align: center;}


        ul.nav>li {
            position: relative;
        }
        ul.nav>li a:hover {
            text-decoration: none;
            background:rgba(255,255,255,0.4);
            color:#606;
        }
       
        ul.nav>li ul>li{
            border-left: solid 1px #ccc;/*選單側邊線顏色*/
        }
        ul.nav>li>ul>li a{
            color: #333;/*選單連結顏色*/
            display: block;
            padding-top: 10px;
            padding-bottom: 10px;
            text-decoration:none;
        }
        ul.nav>li>ul>li a:hover {color:#606;}
        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:20px;}/*階層式向後退的像素*/
        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) {
            ul>li>a>b.arrow:after {
                font-family: 'FontAwesome';
                content: '\f078';
                font-size: 12px;
                position: absolute;
                right: 15px;
            }
            ul>li>ul>li>a>b.arrow:after {
                font-family: 'FontAwesome';
                content: '\f078';
                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;
                top: 50px;
                left: 0;
                z-index: 9999;
                background:rgba(255,255,255,0.8);
                width: 30vw;
                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) { 

}        
        
/*手機*/
@media(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';
            }
            ul.nav>li>a {border-bottom: solid 2px #ccc;}/*選單隔線顏色*/
            ul.nav>li:last-child>a {border-bottom: 0;}          
            ul.nav>li>ul.sub-menu {
                border-bottom: solid 2px #ccc;/*子選單隔線顏色*/
                background:rgba(255,255,255,1);
            }
            ul.nav>li>ul.sub-menu {width: 100%;}
            ul.nav > li > ul > li a {}

                
.navbar-center { display: block;}
.navbar-collapse-center {text-align: left;}

.navbar-nav { margin: 7.5px -15px 0;}
.navbar-header {background-image: linear-gradient(to top, #ffffff 0%, #ffffff 90%);}
.navbar-default {background: none;background-color: #fff;}
.navbar-default .navbar-toggle {border-color:#606;background-color: #606;margin-top: 12px;}
.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover {background-color: #ccc;border-color: #ccc;}
.navbar-default .navbar-toggle .icon-bar {background-color: #fff;height: 3px;}
.navbar-default .navbar-nav > li > a {border-bottom: solid 1px #4b403a;}
.navbar-brand > img {width: 22vw;}   
.navbar-right {margin-top:0;}
.navbar-collapse {border-top: 1px solid #4b403a;}            
}   

@media only screen and (max-width: 640px) { 
.navbar-brand {padding: 10px;}
.navbar-brand > img {width: 42vw;}  
}

/*------------↑ NAV ↑------------*/






/*-----文章頁----------*/
.Lweb_article_list,.Lweb_article_item{margin-bottom:30px;}
.alert-contact { margin-top:20px;text-align: center; }
a.list-group-item .list-group-item-heading, button.list-group-item .list-group-item-heading,
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;
}
.list-group-item{color: #606;}
.list-group-item h6 {line-height:1;}
.list-group-item > i {float: right;color: #999;top:3px;}

.article {margin-bottom:20px;}
.article img {margin-bottom:8px;}

.col_article img,.col_article .col_img img{border-radius: 6px;margin-bottom:15px;}
.col_article {text-align:justify-content;}


/*-----商品頁----------*/
.Lican_product {margin-bottom:20px;}
.Lican_product .btn-default{background-color:#f4e8f2;}
.Lican_product .btn-default:hover {background-color:#e5e5e5;}
.Lican_product .btn-default i{margin-right:2px;}

.Lican_goods {height: 150px !important;margin: 10px auto;}
.Lican_goods_title {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;/*限制行數*/
-webkit-box-orient: vertical;
white-space: normal;
color:#333;
line-height: 1.3;
margin:0 auto;
}
.Lican_goods_title:hover { color:#606;}

.Lican_product_html {text-align:justify-content;padding-top:20px;  }


.col_left .Lican_product {padding-top:20px; }
.col_left .Lican_product+.Lican_product {border-top:1px dashed #999;}


/*------↓↓↓footer↓↓↓------*/
footer {padding-top:30px; padding-bottom:30px;
background-image: linear-gradient(to bottom, #fff 0%, #ddd 95%);
}
footer img {margin-bottom:8px;}
footer p,footer a {line-height: 1.4; margin:0 auto; } 
footer a {white-space: nowrap;}
footer a.link,footer a.link:link,footer a.link:visited,
footer a,footer a:link,footer a:visited { color:#333;}
footer a.link:hover,footer a.link:focus,footer a.link:active,
footer a:hover,footer a:focus,footer a:active { color:#606;}






/*------------google------------*/
.gsc-control-cse {
  border: 0 solid transparent !important;
  background-color: transparent !important;
}


/*------------mygift------------*/
.top_logo {padding-top:30px; padding-bottom:30px;
/*background-image: linear-gradient(to top, #ffffff 0%, #f4e8f2 95%);*/
}


.main img {margin-bottom:10px;}




/*------------Topimg------------*/
.carousel-control { width: 5%;}
.carousel-control.right,.carousel-control.left {background-image: none;}

#topimg .carousel-indicators { bottom: 0;}
#topimg .carousel-indicators .active { background-color: #606;}
#topimg .carousel-indicators li { background-color: rgba(0,0,0,0.2);}

/*------------col_menu------------*/
/*
.col_menu { border-color: #606;}
.col_menu > .panel-heading {
  background-color: #606;
  border-color: #606;
}
.col_menu ul {margin-bottom:0;background-color:#f5f5f5;}
.col_menu ul>li::before {content: "> "; color:#999; }
.col_menu ul>li {padding:5px 0 0;}
.col_menu a.list-group-item:hover{background-color: #F4E8F2;}
.col_menu .list-group .badge {
  font-size: 1.3rem;
  color: #999;
  background-color: transparent;
  border-radius: 0;
  padding: 5px 0;
  text-align: right;
}
*/

.col_menu {padding:0 24px;}
.col_menu .btn-default {margin-bottom:0;}

.col_menu .title {
background: #f4e8f2 url("title_bg.png") scroll repeat-x center bottom ;
color: #606;
text-align: center;
padding: 8px 15px 4px;
margin: 20px auto 0;
}
.col_menu .title h6{margin-top:0; line-height:1.3;}

.col_menu a {display: block; width:100%;padding:7px;}
.col_menu a ,.col_menu a:link,.col_menu a:visited {color:#666;}
.col_menu a:hover,.col_menu a:focus,.col_menu a:active {color:#606;}
.col_menu .collapse {padding:0 1.6rem;}
.col_menu .collapse.in{border-bottom: dashed 1px #b8b8b8;background-color: #eee;}
.col_menu .a_title {font-size:105%;border-bottom: dashed 1px #b8b8b8;}
.a_title .glyphicon{ 
float: right;
color: #bbb;
text-align: right;
line-height: 1.4;
border-width: 0;
}



/*------------Home------------*/
.home_page{ display:none;}




/*------------inside_page------------*/









@media only screen and (max-width: 1680px) { }
@media only screen and (max-width: 1280px) { 
h2{ font-size:3rem;} 
h3{ font-size:2.7rem;}
h4 { font-size:2.5rem;}
h5,.panel-title{ font-size:2.1rem;}
h6,.btn,li,.dropdown-header { font-size:1.8rem;}
p,body { font-size:1.5rem;}
.btn-lg {font-size:2rem;}   
.btn-md { font-size:1.9rem;}
.btn-xs { font-size:1.3rem;}
}

@media only screen and (max-width: 992px) { 
     
}
@media only screen and (max-width: 800px) { 
}
@media only screen and (max-width: 768px) { 
.top_logo{display:none;}      
.btn-sm {padding: 2px 5px 0;}
.btn-group-sm > .btn, .btn-sm {padding: 4px; line-height: 1.3; border-radius: 0px;}

footer .col_link {border-bottom: 1px dashed #000; margin-bottom:20px;text-align: center;}
footer .col-xs-12+.col-xs-12 {padding-top:15px;}
footer .logo {display: block;margin: 0 auto;}
}

@media only screen and (max-width: 640px) { 
h2{ font-size:2.8rem;} 
h3{ font-size:2.4rem;}
h4 { font-size:2.1rem;}
h5,.panel-title,.btn-lg { font-size:1.9rem;}
.Lican_goods_title {font-size:1.3rem;}
}
@media (max-width: 480px) { 
footer .logo {width: 60vw;}

}