/** style-1209.css start **/
@charset 'utf-8';
@import url('sprite/sprite.css');
@import url('icomoon/style.min.css');/*icon*/
@import url('colors.min.css');/*web main color*/
@import url('framework.min.css');/*css framework*/
@import url('animate.min.css');/*open-source css3 animation*/
@import url('layout-1209.min.css');
@import url('menu-1209.min.css');
@import url('../js/owl-2/assets/owl.carousel.min.css');
@import url('form-1205.min.css');
/** style-1209.css end **/



/** custom start **/

@keyframes menuOpen{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

@keyframes menuClose{
    0%{
        opacity: 1;
    }
    99%{
        top: 0;
    }
    100%{
        top: -100vh;
        opacity: 0;
    }
}

html{
    font-size: 16px;
}

body{
    font-family:"PingFang","Microsoft JhengHei",sans-serif !important;
}

a[href*="mailto"]{
    text-decoration: none;
}

a.themeHover:hover{
    color: #189af9;
    text-decoration: underline;
}

.clear:after{
    content: ' ';
    display: block;
    clear: both;
}

.fl img{
    max-width: 230px;
}

.logo{
    display: block !important;
}

.search{
    margin-top: 0;
}

.web-name{
    left: 15px;
    margin: 0;
}

.container > nav{
    display: block !important;
}

.menu{
    z-index: 1;
}

.menu > ul > li{
    max-width: 125px;
    max-height: 40px;
}

.menu ul ul{
    visibility: collapse;
    opacity: 0;
}

.menu ul ul ul{
    display: none;
}

.menu > ul > li + li{
    margin-top: 1rem;
}

#navMenu{
    display: none;
}

.menu .submenu{
    padding: 0;
}

.menu .submenu a{
    padding: 0 1rem;
    margin: 0;
}

.menu .submenu li{
    display: block;
}

.menu .ui-wrap .ui{
    width: 500px;
}

.menu .sprite:before{
    padding: 2px 1px 1px 1px;
}

a.btn{
    color: #FFF;
    background-image: none;
}

a.btn:hover{
    text-decoration: none;
    background-image: none;
}

header .slide-wrap{
    margin-top: 114px;
    margin-bottom: 0;
}

#idxHot .img-wrap{
    position: relative;
    height: 270px;
    min-height: 270px;
    font-size: 0;
    letter-spacing: 0;
    background: #FFF;
}

#idxHot .img-wrap:before{
    content: ' ';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

#idxHot .img-wrap > a{
    display: inline-block;
    vertical-align: middle;
}

#idxHot .btn{
    color: #0699ba;
}

#idxHot .owl-item:hover .btn{
    background: #01b4d5;
    color: #FFF;
}

#idxAbout .btn{
    background: none;
    color: #0699ba;
}

#idxAbout .btn:hover{
    background: #01b4d5;
    color: #FFF;
}

.maps:after,.maps{
    color: #CCC;
    text-decoration: none !important;
}

.map:hover,.maps:hover:after{
    color: #FFF;
    text-decoration: underline !important;
}

footer{
    background-image: none;
}

footer .icon-telephone-2 + a, footer .icon-fax + a{
    display: inline-block !important;
}

.innerBanner.bg-content{
    background-attachment: local;
}

@media (max-width: 786px){
    .colMain,.colSide + .colMain{
        width: 100% !important;
    }
}

@media (max-width: 960px){
    .rwd-header{
        display: none !important;
    }
    header .slide-wrap{
        margin-top: 70px;
    }
}

@media (max-width: 1200px){
    .content{
        width: 100% !important;
        padding: 5rem 20px !important;
        margin: 0 !important;
    }
}

@media (max-width: 1024px){
    .menu > ul > li{
        max-height: 100%;
    }

    .menu .ui-wrap .ui{
        width: 100%;
    }

    .menu.menuClose{
        display: block;
        opacity: 0;
        -webkit-animation: menuClose 1s;
        -moz-animation: menuClose 1s;
        -o-animation: menuClose 1s;
        animation: menuClose 1s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

    .menu.menuOpen{
        display: block;
        opacity: 1;
        -webkit-animation: menuOpen 1s;
        -moz-animation: menuOpen 1s;
        -o-animation: menuOpen 1s;
        animation: menuOpen 1s;
    }
}

@media(max-width:320px){
    .fl img{
        max-width: 190px;
    }
}

/** custom end **/



/** breadcrumb start **/

.breadcrumb{
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding: 0 calc((100% - 1120px) / 2);
    background: #F7F7F7;
    display: block !important;
}

.breadcrumb h1{
    font-size: 1rem;
    font-weight: normal;
    color: #03a3c7;
}

@media (max-width: 1120px){
    .breadcrumb{
        padding: 0 15px;
    }
}

/** breadcrumb end **/



/** content start **/

.colMain{
    float: none;
    width: 100%;
}

.colSide{
    background: #FFF; 
    float: right !important;
    box-sizing: border-box;
    width: 280px;
    padding: 0 0 0 30px;
}

.colSide + .colMain{
    float: left !important;
    width: calc(100% - 280px);
    padding: 0;
    box-sizing: border-box;
}

.content{
    width: 1120px;
    padding: 5rem 0;
}

.idxContent{
    width: 100%;
    padding: 0;
}

h2.menuTitle{
    line-height: 1.22;
    letter-spacing: 0.8px;
    font-size: 1.65rem;
    color: #555;
    margin-bottom: 20px;
}

.colSide h4{
    color: #555;
}

.colSide > ul{
    margin: 0;
    padding: 0;
    border: 1px solid #DFDFDF;
    border-radius: 0;
}

.colSide > ul > li > span{
    display: block;
    padding: 15px 40px 15px 0px;
    background: #02c6f2;
    border-bottom: 1px solid #a1ebfb;
    /* box-shadow: inset 0 -1px 0 0 #03a3c7; */
}

.colSide > ul > li > span a{
    color: #FFF;
}

.colSide ul ul{
    padding: 0 0 0 20px;
}

.sideCate > li{
    border: none;
}

.sideCate li li a{
    padding: calc((50px - 0.9rem) / 2) 0;
    box-sizing: border-box;
    font-size: 0.9rem;
    font-weight: normal;
    color: #666;
    letter-spacing: 0.08rem;
}

.sideCate li li a:hover,.sideCate > li > ul > li a.active{
    color: #008baa;
    font-weight: normal;
}

.sideCate li{
    position: relative;
}

.sideCate li a.tree{
    background: none;
    position: absolute;
    top: 20px;
    right: 20px;
    left: auto;
    width: auto;
    height: auto;
}

.sideCate li a.tree:before,.sideCate li a.tree.active:before{
    font-family: 'icomoon';
    content: "\e95d";
    color: #FFF;
    font-size: 0.8rem;
}

.sideCate li a.tree.active{
    background: none;
    left: auto;
    width: auto;
    height: auto;
}

.sideCate li a.tree.active:before{
    content: "\e961";
}

.sideCate li.par_tree, .sideCate li a.tree.active, .sideCate li.par_tree.active{
    background-image: none;
}

.sideCate li li a.tree:before,.sideCate li li a.tree.active:before{
    font-family: 'icomoon';
    content: "\e95d";
    color: #02C6F2;
    font-size: 0.8rem;
}

.sideCate li li a.tree.active:before{
    content: "\e961";
}

/** content end **/



/** .productGrid start **/

.productList .proList .img *, .productGrid .proList .img *, .productPic .photo *{
    display: inline-block !important;
}

.productGrid{
    font-size: 0;
}
.productGrid .proList{
    height: auto!important;
}

.productGrid .proList,.productGrid.list_imgXL .proList{
    display: inline-block;
    float: none;
    position: relative;
    width: calc((100% / 3) - 20px);
    margin: 0 10px 20px 10px;
    height: 350px;
    font-size: 1rem;
    vertical-align: top;
}

.productGrid .proList .img,.productList .proList .img{
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 255px;
    border-radius: 0;
}

.productList .proList .img{
    width: 255px;
}

.productGrid .proList .img img,.productList .proList .img img{
    max-width: 100%;
    max-height: 100%;
}

.productGrid .proList .txt, .productList .proList .txt{
    width: 100%;
    padding: 1rem 0;
}

.productGrid .proList .txt h3, .productList .proList .txt h3{
    margin: 0;
}

.photo_imgM .photo{
    font-size: 0;
}

@media (max-width: 900px){
    .productGrid .proList,.productGrid.list_imgXL .proList{
        width: calc((100% / 2) - 20px);
    }
}

/** .productGrid end **/



/** form-1205.min.css unminify start **/

@charset "UTF-8";
    ::-webkit-input-placeholder {
    color: #bbb;
    font-weight: normal;
}
::-moz-placeholder {
    color: #bbb;
    font-weight: normal;
}
:-ms-input-placeholder {
    color: #bbb;
    font-weight: normal;
}
:-moz-placeholder {
    color: #bbb;
    font-weight: normal;
}
form * {
    -webkit-transition: all ease-in-out .35s;
    transition: all ease-in-out .35s;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: 0;
    outline: 0;
    box-shadow: none;
}
form *:focus {
    border: 0;
    outline: 0;
}
.my-form {
    display: block;
    float: none;
    width: 100%}
.my-form {
    max-width: 180px;
    display: inline-block;
}
.my-form * {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    outline: 0;
    box-shadow: none;
}
.my-form label {
    display: block;
    position: relative;
}
.my-form input[type="search"] {
    line-height: 24px;
    padding: 3px 30px 3px 3px;
    width: 100%;
    border: 1px solid #ccc;
    display: block;
}
.my-form input[type="search"]+input[type="submit"] {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    content: " ";
    display: block;
    float: right;
    content: " ";
    background-color: #03a3c7;
    z-index: 1;
    /* background-image: url(data:image/svg+xml, %3C%21--%20Generator%3A%20Adobe%20Illustrator%2019.0.0%2C%20SVG%20Export%20Plug-In%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20xmlns%3Aa%3D%22http%3A//ns.adobe.com/AdobeSVGViewerExtensions/3.0/%22%0A%09%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2231px%22%20height%3D%2231px%22%20viewBox%3D%220%200%2031%2031%22%20style%3D%22enable-background%3Anew%200%200%2031%2031%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text/css%22%3E%0A%09.st0%7Bfill%3A%23FFFFFF%3B%7D%0A%3C/style%3E%0A%3Cdefs%3E%0A%3C/defs%3E%0A%3Cpath%20id%3D%22XMLID_18_%22%20class%3D%22st0%22%20d%3D%22M19.5%2C5.8c-3.8-3.8-9.9-3.8-13.7%2C0c-3.8%2C3.8-3.8%2C9.9%2C0%2C13.7s9.9%2C3.8%2C13.7%2C0%0A%09C23.3%2C15.7%2C23.3%2C9.6%2C19.5%2C5.8z%20M28.9%2C31l-8.4-8.4c-5%2C3.9-12.2%2C3.6-16.8-1c-4.9-4.9-4.9-13%2C0-17.9s13-4.9%2C17.9%2C0%0A%09c4.6%2C4.6%2C4.9%2C11.8%2C1%2C16.8l8.4%2C8.4L28.9%2C31z%22/%3E%0A%3C/svg%3E%0A); */
    background-image: url('../images/magnifier.svg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-background-size: 18px 18px;
    background-size: 18px 18px;
}
@media screen and (min-width:300px) and (max-width:1024px) {
    .my-form input[type="search"] {
    line-height: 30px;
    padding: 3px 30px 3px 3px;
    width: 100%;
    border: 1px solid #ccc;
    display: block;
	}
	.my-form input[type="search"]+input[type="submit"] {
	    position: absolute;
	    top: 0;
	    right: 0;
	    width: 37px;
	    height: 37px;
	}
}

/** form-1205.min.css unminify end **/



/** fix start **/

.input-text{
    height: auto !important;
}

.btnOrder{
    font-size: 0.8rem;
}

.btnOrder, .btn{
    line-height: 1.8rem;
}

.newsList th.last, .ecatalogList th.last{
    min-width: 10rem;
}

.product .sortBox .btnOrder, .show_prodcut .productRight .btnOrder{
    width: 145px;
    line-height: 2.3rem;
}

/** fix end **/