@import url("font-awesome.min.css");


/* Reset */
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, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 13px;
font: inherit;


}

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

body {
-webkit-text-size-adjust: none;
line-height: 24px;

}

html #browserinfo .myButton { padding: 5px 10px; font-size: 13px; text-shadow: none; }

/* Carousel */

*{ box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; word-wrap: break-word;}

html, body { height: 100%; font-size: 13px; font-family: "Verdana"; color: #666; }

a { text-decoration: none; } 
.carousel {
position: relative;
overflow: hidden;
width: 310px;
margin-left: 33px;

}

.carousel header { display: none; }
.carousel p { display: none; }




.newsWrp .slider { display: none; }


.contentWrp { width: 1000px; margin: -65px auto 0; position: relative; }

.content { padding: 10px 0; }
.content:after, .content:after, .mainCt .product-list li:after { clear: both; content: '.'; display: block; height: 0; overflow: hidden; }

.idx .bodyWrp { position: relative; min-height: 550px; height: 100%; max-width: 1024px; margin: 0 auto; }
.ins .bodyWrp { position: relative; padding-bottom: 20px; min-height: 100%; max-width: 1024px; margin: 0 auto; }


.headWrp { z-index: 9999; width: 100%; position: absolute; }
.idx .head { position: relative; max-width: 1000px; margin: 0 auto; z-index: 999; }
.ins .head { position: relative; margin: 0 auto; }
.logo { position: absolute; top: 25px; left: 25px; }
.logo a { text-decoration: none; color: #333; font-family: "Microsoft JhengHei"; font-size: 24px; font-weight: bold; -webkit-text-shadow: 0 0 15px rgba(255, 255, 255, 0.1), 0 0 10px rgba(255, 255, 255, 1); -moz-text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 1); text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 1); }
.logo a:hover { color: #5c8140; }


.idx .bannerWrp { position: relative; height: 100%; }
.idx .banner { position: relative; overflow: hidden; margin:0 auto; background:url(images/idx-banner.jpg) center top no-repeat; height: 100%; width: 100%; background-size: 100% auto; }

.ins .bannerWrp { position:relative; overflow:hidden; margin:0 auto; height:370px;}


.menu { height: 34px; position: absolute; top: 50px; right: 0; background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); border-radius: 20px; -webkit-box-shadow: 0 0 5px 0 rgba(61, 98, 44, 0.5); -moz-box-shadow: 0 0 5px 0 rgba(61, 98, 44, 0.5); box-shadow: 0 0 5px 0 rgba(61, 98, 44, 0.5); padding: 0 15px; }


.idx .footWrp { min-height: 10vh; width: 100%; background: url(images/foot.png) no-repeat top center; background-size: contain; }
.idx .foot { height: auto; min-height: 75px; color: #666; text-align: center; line-height: 26px; font-size: 13px; padding: 15px; }
#hostingUrlTw{ width: 100%; text-align: right; padding-right: 20px; opacity: .5; }

.ins .footWrp { padding-top: 30px; background: #fff;}
.ins .foot { height: auto; min-height: 75px; color: #666; text-align: center; line-height: 26px; font-size: 12px; clear: both; border-top: 1px solid #ddd; padding: 15px; }





.carousel .reel {
white-space: nowrap;
position: relative;
-webkit-overflow-scrolling: touch;

}

.carousel article {
display: inline-block;
text-align: center;
white-space: normal;
opacity: 1.0;
-moz-transition: opacity 0.75s ease-in-out;
-webkit-transition: opacity 0.75s ease-in-out;
-ms-transition: opacity 0.75s ease-in-out;
transition: opacity 0.75s ease-in-out;

}

.carousel article.loading {
opacity: 0;
}

.carousel article .image {

}

.carousel article .image img { height: 100px; width: 100px; }

.carousel article p {
text-align: center;
height:180px;
overflow:hidden;
}


.newsWrp { position: absolute; z-index: 999; right: 10px; top: 140px; width: 310px; }

.newsWrp .img img { border: none; float: left; margin-right: 15px; }
.newsWrp .ctns { line-height: 22px; text-align: left; position: relative; height: 110px; padding-left: 3px; }
.newsWrp .ctns span { color: #666; }
a:focus,input:focus { outline:none; }



.newsWrp .news { max-height: 165px; overflow: hidden; float: left; margin-bottom: 15px; width:295px; }
.newsWrp .news .title { background: url(images/idx_title.png) no-repeat 0 5px; padding: 3px 0 2px 15px; position: relative; margin-bottom: 6px; color: #fff; font-family: "Microsoft JhengHei", "Verdana"; font-weight: bold; font-size: 14px; }
.newsWrp .news .title a { background: url(images/idx_more.png) no-repeat center right; width: 45px; height: 20px; display: block; position: absolute; top: 7px; right: 0; margin: 0; }

.newsWrp .news p { color: #6b5245; line-height: 26px; background: url(images/block5_ico.png) 0 12px no-repeat; padding-left: 10px; padding-right: 100px; position: relative; }

.newsWrp .news span { color: #999; text-align: left; vertical-align: middle; font-weight: bold; font-size: 11px; -webkit-transform:scale(0.91); position: absolute; right: 0; top: 0; }
.newsWrp .news span:before { content: "| "; font-weight: normal; color: #ccc; font-size: 13px;}
.newsWrp .news a { display: block; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; color: #666; text-align: left; }
.newsWrp .news a:hover { color: #999; }


.newsWrp .intro { width: 295px; vertical-align: top; margin: 0 20px 0 0; float: left; height: 210px; overflow: hidden; }

.newsWrp .intro .img { float: left; height: 100px; width: 100px; margin: 7px 10px 0 3px; }
.newsWrp .intro .img img { width: 100%; height: 100%; }
.newsWrp .intro .title { background: url(images/idx_title.png) no-repeat 0 5px; padding: 3px 0 2px 15px; position: relative; margin-bottom: 6px; color: #fff; font-family: "Microsoft JhengHei", "Verdana"; font-weight: bold; font-size: 14px; }
.newsWrp .intro .title a { background: url(images/idx_more.png) no-repeat center right; width: 45px; height: 20px; display: block; position: absolute; top: 7px; right: 0; margin: 0; }



.order, .message, .cart { margin: 15px 0; text-align: center; }
.order input, .message input { background: #eee; font-size: 14px; }
.customiz { margin-left: 5px; }
.orderfn { padding: 0 5px 0 30px; }


/* Form */

form label {
display: block;
color: #252122;
font-weight: 400;
margin: 0 0 0.5em 0;
}

form input[type=text],
form input[type=email],
form input[type=password],
form select,
form textarea {
-webkit-appearance: none;

border: 0;
padding: 5px;
font-size: 13px;
border-radius: 2px;
border: solid 1px #dddddd;
background: #fff;
}



/* Tables */

table {
width: 100%;
}


.ctus { margin-top: 15px; font-size: 16px; }
.ctus td { padding: 3px 0; }
.ctus tr td:first-child { width: 150px; }
.ctus input[type="text"], .ctus textarea { width: 100%; }



/* Button */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
-webkit-appearance: none;
display: inline-block;
text-decoration: none;
cursor: pointer;
border: 0;
border-radius: 5px;
outline: 0;
-moz-transition: background-color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out;
-ms-transition: background-color .25s ease-in-out;
transition: background-color .25s ease-in-out;
padding: 3px 10px 5px;
color: #666;
}



/* Image */

img {

max-width: 100%;
}
/* List */

ul.dates { width: 100%; }

ul.dates li {
position: relative;
padding: 0 110px 0 0 ;
margin-bottom: 6px;
}

ul.dates .date {
position: absolute;
right: 0;
top: 0;
font-size: 12px;
font-weight: bold;
color: #666;
}


ul.dates .date:after {

}

ul.dates .date strong {

padding-top: 0.15em;
}

ul.dates h3 {
font-size: 13px;
font-weight: normal;
color: #555;
white-space: nowrap;
text-overflow : ellipsis;
overflow: hidden;

}

ul.dates p {
margin: 0;
}

ul.dates li:first-child {
border-top: 0;
padding-top: 0;
}

ul.dates li:first-child .date {
top: 0;
}

.dates .date { color: #999; }



.dmSubmenu { }
.dmSubmenuTop { background-color: rgb(255, 255, 255); }
.dmItem1 { margin: 0px; border: 1px solid transparent; border-image: none; cursor: default; }
.dmItem2 { margin: 0px; border: 1px solid transparent; border-image: none; cursor: default; }
.dmItem2 img { max-width:none;}
.dmItem1 img { max-width:none;}
li.dmItem1:hover { margin: 0px; border: 1px solid transparent; border-image: none; cursor: default; background-color: rgb(255, 255, 255); }

.dmText1 { font-size: 16px; font-family: "Microsoft JhengHei", "Verdana"; padding: 4px 10px 2px; color: #373932; cursor: pointer; font-weight: bold; }
.dmText2 { font-size: 16px; font-family: "Microsoft JhengHei", "Verdana"; padding: 4px 10px 2px; color: #567500; cursor: pointer; font-weight: bold; border-radius: 8px 8px 0 0; }

.menuRight { font: 11px/normal Trebuchet MS, Tahoma, Arial, Helvetica; padding: 14px 9px 9px; text-align: center; cursor: default; font-size-adjust: none; font-stretch: normal; }
#dmD0 { }
#dmD0 .dmSubmenu { }
#dmD0 table { background: -moz-linear-gradient(top, #96b93f 0%, #5a9623 51%, #73af26 100%); background: -webkit-linear-gradient(top, #96b93f 0%,#5a9623 51%,#73af26 100%); background: linear-gradient(to bottom, #96b93f 0%,#5a9623 51%,#73af26 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96b93f', endColorstr='#73af26',GradientType=0 ); border-radius: 0 0 20px 20px; padding: 0 10px; border: none; }
#dmD0 .dmText1 { color: #FFF; font-size: 13px; font-family: "Verdana"; padding: 0 10px 3px; }
#dmD0 .dmText2 { color: #dff199; font-size: 13px; font-family: "Verdana"; padding: 0 10px 3px; background: none; }
#subemail { border: 1px solid #ccc; width: 100%; margin: 5px 0; }
.product a.titleC { line-height: 24px; }

#search_toolbar {margin:10px 0 10px 0;text-align: right; }
#search_toolbar #selCate, #search_toolbar #txt_search { border: 1px solid #ddd; height: 20px; vertical-align: middle; color: #555; }
#search_toolbar #txt_search { margin: 0 3px; }
#search_toolbar .s-btn, #search_toolbar .c-btn { border: none; background: #444; border-radius: 2px; color: #fff; padding: 1px 5px; font-size: 11px; -webkit-transform:scale(0.91); vertical-align: middle; cursor: pointer; line-height: 10px; height: 20px; }
#search_toolbar .c-btn { margin-left: 3px; }



a { color: #555; }
a:hover { color: #999; }

.banner ul.list { padding:0; margin:0; list-style:none; position: relative; width:9999px; }
.banner ul.list li { float:left; position:relative; text-align:center; }
.banner ul.list li img { width: 100%; height: 100%; }
.banner ul.playerControl { margin:0; padding:0; list-style:none; position:absolute; bottom:30px; right:8px; height:14px; display: none; }
.banner ul.playerControl li { float:left; width:13px; height:13px; cursor:pointer; margin:0 4px; background:#aaa; border-radius:15px; }
.banner ul.playerControl li.current { background:#555; }


.sideBar { float: left; width: 270px; background: url(images/sidebar_bg.png) no-repeat top center; padding-top: 40px; min-height: 350px; }
.sideBar .sideHd { font-size: 20px; color: #111; font-family: "Microsoft JhengHei", "Verdana"; margin-bottom: 20px; padding: 0 30px; }

.sideBar li { padding: 4px 35px 1px 50px; }
.sideBar li.on { font-weight: bold; background: url(images/sidebar_on.png) 19px 2px no-repeat; padding: 8px 35px 5px 50px; }
.sideBar li.on a { cursor: default; color: #fff; }
.sideBar li.on a:hover { color: #fff; }
.sideBar li a { text-decoration: none; line-height: 18px; color: #777; overflow: hidden; white-space: nowrap; display: inline-block; text-overflow: ellipsis; }
.sideBar li a:hover { color: #9dbe68; }
.sideBar .sideFt { } 

.sideBar .others .sideHd { border-bottom: 1px dotted #ddd; margin: 0 25px 15px 22px; text-indent: -9999px; height: 5px; }
.sideBar .others .Ptitle { margin-bottom: 5px; font-weight: bold; }
.sideBar .others li { padding: 0 30px; margin-bottom: 15px; }
.sideBar .others li a.sideA { line-height: 24px; }

.others { margin-top: 10px; }

.others li { background: none; text-align: left; padding: 6px 0; color: #888; font-weight: normal; }

.others li a { width: 100%; overflow: hidden; white-space: nowrap; display: inline-block; text-overflow: ellipsis; line-height: 24px; color: #888; font-weight: normal; }
.others li a:hover { color: #aaa; }
.others .Ptitle { color: #555; margin-bottom: 5px; }

#subemail { border: 1px solid #ccc; width: 100%; margin: 0 0 8px; }
#subbtn, #desubbtn { font-size: 13px; background: #eee; }

.main { float: right; width: 680px; margin-top: 30px; margin-right: 15px; }
.mainHd { padding: 6px 0 15px 45px; font-family: "Microsoft JhengHei", "Verdana"; font-size: 18px; font-weight: bold; color: #555; margin-left: -1px; background: url(images/mainHd.png) top left no-repeat; }
.mainHd a { text-decoration: none; }
.mainHd a:hover { color: #aaa; }
.mainHd span { color: #888; }
.mainHd span:before { content: url(images/arw.png); vertical-align: middle; margin-bottom: 1px; }
.mainHd strong { color: #888; margin-left: 10px; font-size: 14px; }

.mainHd h2.ContentAuthor{
height: auto;
color: #222324;
}
.mainHd h2.ContentAuthor>a{
color: #222324;
font-size: .8em;
font-weight: normal;
line-height: auto;
}
.mainHd h2.ContentAuthor>a:nth-child(1)::before{
display: inline;
content: '\f00b';
font-family: FontAwesome;
}
.mainHd h2.ContentAuthor>a:nth-child(2)::before{
display: inline;
content: '\f03e';
font-family: FontAwesome;
}
/*.pagenavi { display: none; }*/
span.pagenavi, .Content-bottom>span{
display: block;
width: 100%;
height: auto;
line-height: 2em;
align: false;
text-align: center;
margin: 2em 0 1em 0;
}
span.pagenavi{
position: relative;
}
span.pagenavi>a.pagenavi_list{
width: 100%;
color: #3d7600;
font-weight: bold;
}
span.pagenavi>a.pagenavi_list:hover{
/*color: #000;*/
}
span.pagenavi>a.pagenavi_next, span.pagenavi>a.pagenavi_prev, .Content-bottom>span>.pagenavi{
padding: 0 .5em;
background: url(images/idx_title.png) center top no-repeat;
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; 
color: #FFF;
}
.Content-bottom>span>.pagenavi{
margin: 0 .3em;
padding: .2em .5em;
}
span.pagenavi>a.pagenavi_next, span.pagenavi>a.pagenavi_prev{
position: absolute;
top: 0;
z-index: 999;
}
span.pagenavi>a.pagenavi_prev{
left: 0;
}
span.pagenavi>a.pagenavi_next{
right: 0;
}
span.pagenavi>a.pagenavi_prev::before, span.pagenavi>a.pagenavi_next::after{
display: inline-block;
font-family: FontAwesome;
}
span.pagenavi>a.pagenavi_prev::before{
content: '\f104';
padding: 0 .5em 0 0;
}
span.pagenavi>a.pagenavi_next::after{
content: '\f105';
padding: 0 0 0 .5em;
}

/*product-list*/
.mainCt .product-list { margin-top: -10px; }
.mainCt .product-list li { padding: 20px 0; border-bottom: 1px dotted #e0e0e0; position: relative; }
.mainCt .product-list li label { border:1px solid #ddd; padding: 2px; float: left; margin-right: 3%; width: 40%; }
.mainCt .product-list li label img { width: 100%; }
.mainCt .product-list li label a { display: block; }
.mainCt .product-list li h4 { font-size: 17px; margin:2px 0 6px; font-weight: bold; }
.mainCt .product-list li h4 a { color: #555; font-family: "Microsoft JhengHei", "Verdana"; }
.mainCt .product-list li h4 a:hover { color: #9dbe68; }
.mainCt .product-list li p { line-height: 22px; margin: 10px 0 35px; }
.mainCt .product-list div { width: 100%; }
.mainCt .product-list div .more:before { content: "MORE"; }
.mainCt .product-list div .more { background: #3d7600; border-radius: 3px; padding: 1px 6px; display: block; float: right; font-size: 10px; color: #fff; line-height: 20px; position: absolute; right: 0; bottom: 15px; }
.mainCt .product-list div .more:hover { background: #67a147; }
.mainCt .product-list div b, .mainCt .product-list div strong { display: block; }
.mainCt .product-list div strong { font-weight: bold; color: #b60000; }

/*product-pic*/
.mainCt .product-pic { margin-top: -10px; }
.mainCt .product-pic li { padding: 20px 10px 0px 0px; position: relative; width: 33.33%; float: left; }/*border-bottom: 1px dotted #e0e0e0; */
.mainCt .product-pic li:nth-child(3n+1){ clear: both; }
.mainCt .product-pic li label { border:1px solid #ddd; padding: 2px; float: left; margin-right: 3%; width: 100%; }
.mainCt .product-pic li label img { width: 100%; }
.mainCt .product-pic li label a { display: block; }
.mainCt .product-pic li h4 { font-size: 17px; margin:2px 0 6px; font-weight: bold; }
.mainCt .product-pic li h4 a { color: #555; font-family: "Microsoft JhengHei", "Verdana"; }
.mainCt .product-pic li h4 a:hover { color: #9dbe68; }
/*--ellipsify--*/
/* styles for '...' */ 
.block-with-text {
/* hide text if it more than N lines */
overflow: hidden;
/* for set '...' in absolute position */
position: relative; 
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 2.4em; 
/* fix problem when last visible word doesn't adjoin right side */
text-align: justify; 
/* place for '...' */
margin-right: -1em;
padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
/* points in the end */
content: '...';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
/* set width and height */
width: 1em;
height: 1em;
margin-top: 0.2em;
/* bg color = bg color under block */
background: white;
}
/*--ellipsify END--*/
.mainCt .product-pic li p { display: none; line-height: 22px; margin: 10px 0 35px; }
.mainCt .product-pic div { width: 100%; border-bottom: 1px dotted #e0e0e0; padding-bottom: 10px; }
.mainCt .product-pic div .more:before { content: "MORE"; }
.mainCt .product-pic div .more { background: #3d7600; border-radius: 3px; padding: 1px 6px; display: block; float: right; font-size: 10px; color: #fff; line-height: 20px; position: absolute; right: 20px; bottom: 15px; }
.mainCt .product-pic div .more:hover { background: #67a147; }
.mainCt .product-pic div b, .mainCt .product-list div strong { display: block; }
.mainCt .product-pic div strong { font-weight: bold; color: #b60000; }


.product { padding: 5px 0 15px; }
.product label { border:1px solid #ddd; padding: 2px; float: left; margin-right: 20px; width: 55%; }
.product label img { width: 100%; }
.product h4 { font-size: 15px; margin:2px 0 6px; color: #555; font-weight: bold; }
.product p { line-height: 30px; margin-bottom: 20px; }
.about { color: #666; line-height: 40px; padding: 0 0 15px; }





.idx .dates { width: 100%; }



/* Desktop */

@media screen and (min-width: 772px) {

/* Basic */

html, body.idx { height: 100%; }

html, body { position: relative; font-size: 13px; }

body { min-height: 670px; }



/* Button */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
font-size: 1.1em;
/*padding: 0.65em 1.5em 0.65em 1.5em;*/
}








/* Header */


/* Nav */

#nav > ul {
margin: 0;
}

#nav > ul > li {
display: inline-block;
font-style: italic;
padding: 0 12px;
}

#nav > ul > li > ul {
display: none;
}

#nav > ul > li > a {

color: #555;
text-decoration: none;
font-size: 16px;
font-style: normal;
font-family: "Microsoft JhengHei", "Verdana"; 
outline: 0;
}

#nav > ul > li:hover > a, #nav > ul > li.active > a { color: #999;

}

#nav > ul > li.current > a {
background: #d52349;
color: #fff !important;
font-weight: 700;
}

#nav { padding: 6px 20px 4px; position: absolute; top: 45px; right: 5px; border-radius: 20px; background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 80%, rgba(221,221,221,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(80%,rgba(242,242,242,1)), color-stop(100%,rgba(221,221,221,1))); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 80%,rgba(221,221,221,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); -webkit-box-shadow: 0px 2px 3px 0px rgba(50, 50, 50, 0.2); -moz-box-shadow: 0px 2px 3px 0px rgba(50, 50, 50, 0.2); box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2); }

.dropotron {
border-radius: 5px;
background-color: #252122;
background-color: rgba(34, 30, 31, 0.98);
padding: 1.25em 1.5em 1.25em 1.5em;
min-width: 13em;
box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.5);
text-align: left;
margin-top: -1.25em;
margin-left: -1px;
}

.dropotron a, .dropotron span {
color: #aaa;
text-decoration: none;
-moz-transition: color .25s ease-in-out;
-webkit-transition: color .25s ease-in-out;
-ms-transition: color .25s ease-in-out;
transition: color .25s ease-in-out;
}

.dropotron li {
padding: 0.25em 0 0.25em 0;
}

.dropotron li:hover > a, .dropotron li:hover > span {
color: #fff;
}

.dropotron.level-0 {
margin-top: 2em;
}

.dropotron.level-0:before {
content: '';
display: block;
position: absolute;
left: 50%;
margin-left: -10px;
top: -9px;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
border-bottom: solid 10px #252122;
border-bottom-color: rgba(34, 30, 31, 0.98);
}


}





/* Mobile */

#navPanel, #titleBar {
display: none;
}

@media screen and (max-width: 771px) {

/* Basic */

html, body {

height: 100%;
width: 100%;
font-family: "Verdana";
}

body { height: auto; }

body, input, textarea, select {
line-height: 1.75em;
letter-spacing: 0;

}



.lgg .selectric { margin-top: -10px; }

/* Box */


.box .image.featured {
left: 15px;
top: 15px;
margin: -40px 0 40px -30px;
}


.logo { position: absolute; top: 18px; left: 15px; text-align: right; }
.logo a { font-size: 26px; -webkit-text-shadow: 0 0 10px rgba(255, 255, 255, 0.1), 0 0 10px rgba(255, 255, 255, 1); -moz-text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 1); text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 1); }
.newsWrp { width: 100%; background: none; height: auto; position: static; margin: 15px 0 0; }
.newsWrp .news { width: 100%; padding: 0 10px; max-height: 175px; }
.newsWrp .news p { margin-left: 3px; font-size: 16px; line-height: 28px; }
.newsWrp .news .title, .newsWrp .intro .title { background-position: 0 0; background-size: auto 100%; font-size: 16px; margin-bottom: 8px; padding: 1px 0 4px 17px; }
.newsWrp .news span { font-size: 12px; }
.newsWrp .news .title a, .newsWrp .intro .title a { background-size: 100% auto; top: 3px; background: url(images/idx_more2.png) no-repeat; background-size: 100% auto; }
.newsWrp .intro { width: 100%; margin: 5px 0 0; height: auto; padding: 0 10px; }
.newsWrp .intro .img { display: none; }

.newsWrp .ctns { width: 100%; margin-top: 10px; height: auto; max-height: 120px; }
.newsWrp .ctns span { display: block; font-size: 16px; color: #666; width: 100%; line-height: 24px; }
.newsWrp .more { right: 0; bottom: -33px; font-size: 14px; line-height: 20px; padding: 2px 10px 5px; }
.idx .footWrp, .ins .footWrp { display: none; }
.idx .bodyWrp { background: none; padding-bottom: 35px; height: auto; }
.sideBar { display: none; } 
.main { width: 100%; margin: 0; font-size: 16px; }
.dates a { font-size: 16px; }

.idx .bannerWrp { margin-top: 50px; overflow: hidden; }
.ins .bannerWrp { margin-top: 50px; overflow: hidden; }
.idx .banner { height: 0; padding-bottom: 77%; width: 100%; min-height: 0; background-position: 0 -30px; background-size: 148% 100%; margin-bottom: -30px; }
.ins .bannerWrp { max-width: inherit; width: 100%; height: 0; padding-bottom: 35%; position: top center; }
.contentWrp { width: 100%; padding: 0 10px; margin-top: -20px; }
#search_toolbar #selCate, #search_toolbar #txt_search{height: 25px;font-size:18px;margin:0 0 5px 8px;width:90%;border-width: 1px;border-style: solid;border-color: #ccc;}
#search_toolbar .s-btn, #search_toolbar .c-btn{height: 25px;font-size:18px;width:45%}
#search_toolbar{text-align:left;}
.ctus tr td:first-child { width: 100px; }
.menu { display: none; }

.order input, .message input { font-size: 16px; }
.orderfn { padding: 0; }
.mainHd { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0; padding-left: 45px; }
.mainCt .product-list li { margin: 0; }
.mainCt .product-list li h4, .product h4 { font-size: 18px; }
.product label { margin: 0 0 15px; width: 100%; }
.product, .about { margin: 0; padding: 5px; font-size: 16px; line-height: 28px; }
.mainCt .product-list div .more { font-size: 14px; line-height: 28px; }
.mainCt .product-list div b, .mainCt .product-list div strong { line-height: 26px; }
.mainCt .product-list li p { line-height: 26px; }
ul.dates .date { font-size: 14px; } 

/*product-pic*/
.mainCt .product-pic { margin-top: 0; }
.mainCt .product-pic li { padding: 10px 5px 0 0; width: 50%; }
.mainCt .product-pic li:nth-child(3n+1){ clear: none; }
.mainCt .product-pic li:nth-child(2n+1){ clear: both; }
.mainCt .product-pic div { padding-bottom: 30px; }
.mainCt .product-pic div .more { right: 20px; bottom: 10px; }


/* Button */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
position: relative;

text-align: center;

margin: 0.25em 0 0.25em 0;
}




html #browserinfo .myButton { padding: 5px 10px; width: inherit; height: inherit; font-size: 15px; text-shadow: none; }



/* Off-Canvas Navigation */

.bodyWrp {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: -moz-transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
transition: transform 0.5s ease;
padding-bottom: 1px;
height: 100%;
position: relative;
}

#titleBar {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: -moz-transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
transition: transform 0.5s ease;
display: block;
height: 50px;
left: 0;
position: fixed;
top: 0;
width: 100%;
background: #3e6224;
z-index: 9999;
background-image: url(https://www.daystar-spa.com.tw/images/daystar-spa_logo.png);
background-repeat: no-repeat;
background-position: center;
background-blend-mode: hard-light;
}

#titleBar .toggle {
width: 70px;
height: 50px;
z-index: 999999999;
position: absolute;
top: 0;
left: 0;

}

#titleBar .toggle:before {
font-family: FontAwesome;
text-decoration: none;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: '\f0c9';
display: block;
position: absolute;
left: 0;
top: 5px;
width: 50px;
height: 40px;
line-height: 42px;
font-size: 38px;
color: #fff;
text-align: center;
}

#titleBar .toggle:active:before {

}


#navPanel {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translateX(-275px);
-webkit-transform: translateX(-275px);
-ms-transform: translateX(-275px);
transform: translateX(-275px);
-moz-transition: -moz-transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
transition: transform 0.5s ease;
display: block;
height: 100%;
left: 0;
overflow-y: auto;
position: fixed;
top: 0;
width: 275px;
z-index: 10002;
color: #858484;
background: #536a3a;
box-shadow: inset -3px 0px 5px 0px rgba(0, 0, 0, 0.35);
}

#navPanel .link {
display: block;
color: #fff;
text-decoration: none;
height: 44px;
line-height: 44px;
border-top: solid 1px rgba(255, 255, 255, 0.05);
padding: 0 1em 0 1em;
font-size: 16px;
text-overflow: ellipsis; 
white-space: nowrap; 
overflow: hidden;
}

#navPanel .link:first-child {
border-top: 0;
}
#navPanel .link:last-child {
margin-bottom: 25vh;
}


#navPanel .indent-1 {
display: inline-block;
width: 1em;
}

#navPanel .indent-2 {
display: inline-block;
width: 2em;
}

#navPanel .indent-3 {
display: inline-block;
width: 3em;
}

#navPanel .indent-4 {
display: inline-block;
width: 4em;
}

#navPanel .indent-5 {
display: inline-block;
width: 5em;
}

#navPanel .depth-0 {
color: #b7d09a;
}

body.navPanel-visible .bodyWrp {
-moz-transform: translateX(275px);
-webkit-transform: translateX(275px);
-ms-transform: translateX(275px);
transform: translateX(275px);
}

body.navPanel-visible #titleBar {
-moz-transform: translateX(275px);
-webkit-transform: translateX(275px);
-ms-transform: translateX(275px);
transform: translateX(275px);
}

body.navPanel-visible #navPanel {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}

@media screen and (max-width: 425px) {
.mainHd{ /*padding: 25px 0 5px 10px;*/ padding-left: 1em; }
.mainHd h2.ContentAuthor{ width: 100%; text-align: left; /*height: 2.5em; */ padding: .5em 0 0 0;}
}