.banner{ max-width:1000px; margin:0 auto -38px; z-index:-1 !important;}
.banner img{ width:100%; max-width:none; display:block; }
.editor{ min-height:600px; }


/* base style */
h1{ font-size:1.87rem; color:#000; padding:10px 0 5px; margin:0; border-bottom:#c3c4c4 1px solid; font-weight:100;}
h2{ margin:0; font-size:1.5rem; line-height:1.2; }

#content .content{ display:flex; flex-wrap:wrap; max-width:1000px; margin:0 auto; border-bottom:1px solid #597dce;  }
#path{ color:#7395cf; width:100%; font-size:.92rem; margin-bottom:15px; }
#path ul, #path li{ list-style-type:none; margin:0; padding:0; }
#path li{ display:inline-block; vertical-align:top; }
#path li:not(:last-child)::after{ content:'\f105'; font: normal normal normal .8rem FontAwesome; margin:0 2px 0 5px; }
#path a{ color:#7395cf; }
#path a:hover, #path li:last-child a{color:#000;}


aside{ width:200px; }
aside .left-top{ color:#fff; font-size:1.6rem; text-align:center; margin-bottom:35px; padding:9px 0; position:relative; }
aside .left-top::before{ content:'\f111'; font: normal normal normal .8rem FontAwesome; position:absolute; left:10px; top:50%; transform:translateY(-50%); }
aside img.products_slogan{ margin-top:10px; display:inline-block; }
aside .submenu ul, aside .submenu li{ list-style-type:none; margin:0; padding:0; font-size:1.1rem;}
aside .submenu ul{ margin-bottom:10px; }
aside li.menu_head{ position:relative; border-bottom:1px solid #aec8de; }
aside li.menu_head a{ color:#fffffe; display:flex; justify-content:space-between; padding:12px 20px; font-size:.9rem; line-height:1; }
aside li.menu_head a::after{ content:'・'; }
aside li.menu_head a:hover, aside li.current a { color:#6a9fd7; background:#e9f4ff; }

.right-box{ width:100%; padding:0 0 0 20px; font-size:1.1rem; color:#464441; line-height:2; }

#page{ font-size:1.06666rem; display:flex; align-items:center; justify-content:center; margin:20px 0; }
#page>*{ margin:0 9px; }
#page a{ color:#666; }
#page a:hover, #page .current{ font-weight:600; color:#000; }
#page .prev::before, #page .next::before{ font: normal normal normal 1rem FontAwesome; }
#page .prev::before{ content:'\f104'; }
#page .next::before{ content:'\f105'; }

/* common */
.flex{ display:flex; }
.flex-margin>*:not(first-child){ margin-left:10px; }
.flex-col{ flex-direction:column; }
.flex-center{ align-items:center; justify-content:center; }
.flex-between{ align-items:center; justify-content:space-between; }
.color1{ color:#704201; }
.underline{ text-decoration:underline; }

/* product style */
aside{ width:200px; background:#6a9fd8; }
aside .left-top{ color:#fff; font-size:1.6rem; text-align:center; margin-bottom:35px; padding:9px 0; position:relative; }
aside .left-top::before{ content:'\f111'; font: normal normal normal .8rem FontAwesome; position:absolute; left:10px; top:50%; transform:translateY(-50%); }

.pro-list01{ display:flex; flex-wrap:wrap; text-align:center;}
.pro-list01, .pro-list01 li{ list-style-type:none; margin:0; padding:0; }
.pro-list01 li { width:180px; position:relative; text-align:center; margin-bottom:23px; }
.pro-list01 li .pto.fix { overflow:hidden; background:#fff; border:5px solid #b8dcf8; height:180px; display:flex; align-items:center; justify-content:center; padding:10px; box-sizing:border-box; }
.pro-list01 li .pto.fix img { transition:1.4s; transform:scale(1);  }
.pro-list01 li:hover .pto.fix img { transform:scale(1.1); }
.pro-list01 li .pto.fix+span { display:block; color:#565656; padding:10px 5px; box-sizing:border-box; line-height:1.2; font-size:1.16rem; text-align:center; }
.pro-list01 li:hover .pto.fix+span { color:#613c10; }
/* not adjusted yet */

.products-detailed ul, .products-detailed li{ list-style-type:none; margin:0; padding:0; }
.products-detailed .detailed-box { background:#b8dcf8; display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:412px; border-radius:3px; padding:5px; }
.content-pic{ display:flex; justify-content:space-between; }
.content-pic img{ display:block; }
.content-pic .detailed-img{ background:#fff; display:flex; align-items:center; justify-content:center; }
.content-pic .detailed-img img{ display:block; width:auto !important; }
.content-pic .owl-dots{ display:flex; margin-top:10px; }
.content-pic .owl-dot{ width:calc(100%/ 5 - 5px ); border-radius:3px; overflow:hidden; }
.content-pic .owl-dot:not(:first-child){ margin-left:.49vw; }
.product-box{ display:flex; flex-direction:column; justify-content:space-between; }
.products-detailed .product-date{ color:#000; font-size:0.86666rem; line-height:1.2; }
.products-detailed .product-icon { display:flex; flex-wrap:wrap; margin-top:15px;}
.products-detailed .product-icon li:not(:first-child){ margin-left:3px; }
.products-detailed .product-icon a{ text-align:center; position:relative; display:block; color:#fff; border-radius:12px; overflow:hidden; line-height:1; padding:5px 30px; }
.products-detailed .product-icon a::before, .products-detailed .product-icon a::after{ content:''; width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1; }
.products-detailed .product-icon a::before{ background:linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); }
.products-detailed .product-icon a::after{ background:linear-gradient(to bottom, rgb(18, 52, 92) 0%,rgb(19, 70, 112) 50%,rgb(14, 54, 90) 51%,rgb(57, 83, 104) 100%); opacity:0; transition:.28s linear; }
.products-detailed .product-icon a.inquiry::before{ background:linear-gradient(to bottom, rgb(46, 202, 41) 0%,rgb(41, 216, 56) 50%,rgb(38, 202, 32) 51%,rgb(125, 232, 143) 100%); }
.products-detailed .product-icon a.inquiry::after{ background:linear-gradient(to bottom, rgb(27, 121, 24) 0%,rgb(20, 107, 27) 50%,rgb(17, 94, 15) 51%,rgb(62, 116, 71) 100%); }
.products-detailed .product-icon a:hover::after{ opacity:1; }
.products-detailed .product-share{ margin:0; }


.content-box { margin:62px 0 0; }
.content-title { color:#8bd051; font-size:1.3rem; line-height:1; margin-bottom:10px;}
.content-text { color:#424242; font-size:1rem; line-height:1.9; }



.goback{ text-align:center; padding:30px 0; }
.goback a{ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(233,233,233,1) 100%);  border:1px solid #d5d2d2; display:inline-block; padding:10px 20px 10px 13px; border-radius:5px; line-height:1; }
.goback a::before{ content:'\f061'; font: normal normal normal 1rem FontAwesome; margin-right:5px; }
.goback a:hover{ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(233,233,233,1) 100%); border-color:#000; }

/* 999 ↑ */
@media only screen and (min-width: 1000px) {
    #path{ text-align:right; }

    /* base style */
    aside .left-top{ display:none; }
    .left-top+.submenu{ display:block; }
    .left-top+.submenu::before, .left-top::after{ content:none; }

    /* product style */
    .pro-list01 li:not(:nth-child(4n+1)){ margin-left:10px; }
    .right-box{ max-width:calc(100% - 200px - 20px); }
    .product-box{ width:calc( 100% - 412px - 15px ); }
}

/* 999 ↓ */
@media only screen and (max-width: 999px){
    aside .left-top{ margin-bottom:0; }
    .left-top+.submenu{ display:none; margin-bottom:10px; }
    #content:not(.about) .content{ display:block; }
    #content:not(.about) aside{ width:100%; }
    .right-box h1{ font-size:1.8rem; text-align:center;}
    .left-top::after{ content:'\f03a'; transform-origin:50% 50%; font: normal normal normal 1.2rem FontAwesome; position:absolute; right:15px; top:50%; transform:translateY(-50%) rotate(0); transition:all .28s ease; /* animation:.48s rightbutton infinite linear; */ }
    .left-top.toggle::after{ 
        animation:spaceboots .8s infinite linear;

     }
    /*.left-top.toggle::after{ transform:translateY(-50%) rotate(90deg); }*/

    @keyframes rightbutton {
        0% { right:15px; }
        50% { right:20px; }
        100% { right:15px; }
    }

    @keyframes spaceboots {
	0% { transform:translate(2px, calc(-50% + 1px)) rotate(0deg); }
	10% { transform:translate(-1px, calc(-50% + -2px)) rotate(-1deg); }
	20% { transform:translate(-3px, calc(-50% + 0px)) rotate(1deg); }
	30% { transform:translate(0px, calc(-50% + 2px)) rotate(0deg); }
	40% { transform:translate(1px, calc(-50% + -1px)) rotate(1deg); }
	50% { transform:translate(-1px, calc(-50% + 2px)) rotate(-1deg); }
	60% { transform:translate(-3px, calc(-50% + 1px)) rotate(0deg); }
	70% { transform:translate(2px, calc(-50% + 1px)) rotate(-1deg); }
	80% { transform:translate(-1px, calc(-50% + -1px)) rotate(1deg); }
	90% { transform:translate(2px, calc(-50% + 2px)) rotate(0deg); }
	100% { transform:translate(1px, calc(-50% + -2px)) rotate(-1deg); }
}

}

@media only screen and (max-width: 850px){
    h1, #path, .editor{ padding:0 10px; }

    .right-box{ max-width:auto; margin:0; padding:0; }
    .pro-list01 li{ width:calc(100% / 2 ); box-sizing:border-box; padding:0 2vw; }
    .products-detailed .content-pic{ display:block; }
    .products-detailed .detailed-box{ width:100%; padding:10px; box-sizing:border-box; }
    .products-detailed .product-share{ text-align:center; margin:15px 0; }
    .products-detailed .product-share img{ margin:0 auto; }
    .products-detailed .product-icon{ justify-content:center; margin:15px 0; }
}

@media only screen and (max-width: 480px) {
    #content.about{ background-size:cover; }
    #path{ width:auto; }
    #page>*{ margin:0 8px; }
    .pro-list01 li{ max-width:none; width:100%; }



/*products*/
.products-text {text-align: center;padding: 5px;background-color: rgba(255, 255, 255, 0.52);;margin: 10px;}
#path {padding: 10px 0 10px 0;margin: 10px 10px;font-size: .8rem;}
.products-text > h1 {padding: 15px 5px;border-radius: 29px;text-align: center;margin: 0 auto;font-size: 1.3rem;}
.products-text > p {font-size: 1.7em;margin: 40px 10px 0 10px;}
.editor {font-size:1.1rem; margin:40px auto; }
.products-mid-menu li {display: inline-block;margin: 20px 20px;line-height: 114%;}
.products-mid-menu li::before {height: 2px;width: 100%;top:auto;right:50%;transform: translate(50%,-50%);bottom: -21px;}



}

.product_table {
    font-size: 12px;
    border-left: 1px solid #D6C9A0;
    border-top: 1px solid #D6C9A0;
    color: #666666;
}
.product_table th {
    color: #FFFFFF;
    background-color: #980203;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    padding:5px 0;
    border-right: 1px solid #D6C9A0;
    border-bottom: 1px solid #D6C9A0;
}
.product_table td {
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    padding:5px 0 5px 15px;
    border-right: 1px solid #D6C9A0;
    border-bottom: 1px solid #D6C9A0;
}
.product_table td a:link {
    text-decoration: none;
    color: #666666;
}
.product_table td a:visited {
    color: #666666;
    text-decoration: none;
}
.product_table td a:hover {
    color: #980203;
    text-decoration: none;
}
.product_table td a:active {
    color: #666666;
}

/* share btn */
.google_plusone_iframe_widget{
    width: unset !important;
}

/* cart */
.cart_table {
    border: 1px solid #B6B6B6;
    border-collapse: collapse;
}
.cart_table tr.stocks_short{
    background:#f00;
    color:grey;
}
.cart_table tr.stocks_short a{color:grey}
.cart_table tr.cart_line{

}
.cart_table tr.stocks_short{
    background:#f00;
    color:grey;
}
.cart_table tr.stocks_short a{color:grey}
.cart_table th {
    color: #333333;
    background-color: #cccccc;
    padding:4px 0px;
}
.cart_table td {
    padding: 4px 0px;
    text-align: center;
}
.cart_table td a{
    color: #000;
}
.cart_table .col_name{ display: none;}

@media screen and (max-width: 480px) {
    .cart_table th, .cart_table td{
        display: list-item;
        border-bottom: 1px solid #ccc;
        list-style: none;
    }
    .cart_table thead{display: none;}
    .cart_table tbody, .cart_table tbody tr{display: block;}
    .cart_table tbody td.number{display: none;}
    .cart_table tbody td:nth-of-type(8){border-bottom:2px solid #999;}
    .cart_table .col_name{ display:inline;}
}


/* member form */
.member_table {
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    border-top: 1px solid #B6B6B6;
    border-left: 1px solid #B6B6B6;
}
.member_table th {
    color: #333333;
    background-color: #cccccc;
    font-size: 14px;
    line-height: 1.2;
    height: 24px;
    top: 5px;
    font-weight: bold;
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid #B6B6B6;
    border-right: 1px solid #B6B6B6;
}
.member_table td {
    border-bottom: 1px solid #B6B6B6;
    border-right: 1px solid #B6B6B6;
}

.member_table td input, .member_table td textarea {
    border: 1px solid #B6B6B6;
    margin: 1%;
}

@media only screen and (max-width: 999px) {
    /* member start */
    .member_table {
        padding: 0; display: block;height: auto; margin: 0 auto;
    }
    .member_table tbody, .member_table td, .member_table tr, .member_table th {
        display: block; width: 100%;
        height: auto;
        padding: 0;
        min-height: 2em;
        line-height: 2em;
    }
    .member_table th {
        font-size: 16px; border-bottom: 0; padding-bottom: 0px; padding-left: 5px;
    }
    .member_table td {padding-left: 5px;}
    .member_table tr:last-child th{
        display: none;
    }
    .member_table input, .member_table textarea{
        max-width: 96%; min-height: 2em; padding: 0 5px; vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .member_table textarea {margin: 2px 0;}
    .member_table input[type="submit"] {height: 40px; width: 60%; max-width: 120px;}
    /* member end */


}

/* news */
.news_table {
    font-size: 12px;
    line-height: 1.2;
    height: 20px;
    top: 5px;
    font-weight: normal;
    padding-top: 4px;
    text-align: left;
    padding-right: 8px;
    padding-left: 8px;
    width: 100%;
    float: left;
}
.news_table td {
    font-family: "Arial", "Helvetica", "sans-serif";
    height: 20px;
    color: #333333;
    font-size: 12px;
    text-align: left;
    padding-left: 18px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #CCCCCC;
    padding-top: 4px;
    padding-right: 8px;
}
.news_table td.title {
    background-image: url(../images/index/ws-news-icon.jpg);
    background-repeat: no-repeat;
    background-position: 6px center;
}
.news_table td.title a:link {
    color: #333333;
    text-decoration: none;
}
.news_table td.title a:visited {
    color: #333333;
    text-decoration: none;
}
.news_table td.title a:hover {
    color: #FF0000;
    text-decoration: none;
}
.news_table td.title a:active {
    color: #333333;
}
.news_table td.date {
    color: #996600;
    line-height: 1.2;
    top: 5px;
    font-weight: normal;
    padding-top: 4px;
    padding-left: 8px;
}
.news_table tr.altrow {
    background-color: #EEEEEA;
}
.news-title {
    font-size: 16px;
    font-family: Verdana;
    font-weight: bold;
    color: #993300;
    text-align: left;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 4px;
    height: auto;
    width: 100%;
    background-image: url(../images/index/ws-news-title-icon.gif);
    background-repeat: no-repeat;
    background-position: left 12px;
    padding-left: 10px;
}
.news-date {
    font-family: Verdana;
    font-size: 11px;
    font-weight: normal;
    color: #00CCCC;
    line-height: normal;
    font-style: normal;
    text-decoration: none;
    valign: bottom;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #999999;
    padding-bottom: 4px;
    padding-top: 4px;
    text-align: right;
}
.news_main {
    width: 100%;
    float: left;
    margin: auto;
    text-align: left;
    padding-bottom: 20px;
    font-weight: normal;
}


/* 聯絡我們-單欄  */
.contact_table {
    width:95%;
    border-left: 1px solid #999;
    border-top: 1px solid #999;
    margin: 0 auto;
}
.contact_table th {
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    background-color: #CCC;
    padding:5px 0;
}
.contact_table td {
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    padding:5px 0 5px 10px;
}
.contact_table  tr.altrow {
}
.contact_table input{
    width: 50%;
}
.contact_table textarea{
    width: 50%;
}

@media screen and (max-width: 470px) {
    .contact_table th {width:30%}
    .contact_table td {width:70%}
    .contact_table td select{width:calc(100% - 10px);overflow: hidden}
}

@media screen and (max-width: 768px) {
    .contact_table th ,.contact_table td{display: inline-block; width:100%; padding: unset;}
}

@media screen and (max-width: 500px) {
    .contact_table td textarea ,.contact_table td input ,.contact_table td select{width:calc(100% - 20px); margin:5px 10px;}
    .contact_table ,.formular{overflow: auto;}
    .contact_table td:last-child{padding: 0;}
}

@media screen and (max-width: 470px) {
    .contact_table td select{width:calc(100% - 100px);overflow: hidden}
}