@charset "utf-8";



@import url(_reset.css);

@import url(_basic.css);

@import url(_icon.css);

@import url(_btn.css);



@import url(_form.css);

@import url(_table.css);

@import url(_pagination.css);

@import url(_breadcrumb.css);



@import url(_mobile_fixed.css);

@import url(_mobile_menu.css);



@import url(_album.css);



body {

    background: url(../../images/system/body_bg.png);

}

#headerframe{height:110px;overflow:hidden;}


#htmlbtn {

    width: 300px;

    height: 50px;

    margin: 10px;

    border: 1px;

    border-radius: 10px;

    color: white;

    font-size: 20px;

    background-color: rgba(255, 0, 0, 0.68);

}

#header {

    position: relative;

    z-index: 1;

    background: url(../../images/system/nav_shadow.png) 0 100% repeat-x #fff;

    padding-bottom: 16px;

}



.logo-box {

    text-align: center;

    padding: 16px 0;

}



.logo {

    background-image: url(../../images/system/logo.png);

    background-size: contain;

    width: 330px;

    height: 52px;

}



.top-nav1 {

    position: absolute;

    left: 15px;

    top: 25px;

    font-size: 14px;

    line-height: 35px;

}



.top-nav1 li {

    padding: 0 5px;

}



.top-nav1 li+li {

    background: url(../../images/system/topnav1_border.png) 0 50% no-repeat;

}



.top-nav1 li.b1 {

    color: #0360CD;

    font-weight: bold;

}



.top-nav1 .ic-btn {

    padding: 0 5px;

}



.top-nav1 .ic-btn:hover {

    text-decoration: underline;

}



.top-nav1 .ic-btn:before {

    margin: 0 0 3px 0;

}



.top-nav1 li.b1 .ic-btn:before {

    background-position: 0 0;

}



.top-nav1 li.b2 .ic-btn:before {

    background-position: -25px 0;

}



.top-nav1 li.b3 .ic-btn:before {

    background-position: -50px 0;

}



.top-nav1 li.b4 .ic-btn:before {

    background-position: -75px 0;

    margin-right: 3px;

}



.top-nav2 {

    position: absolute;

    right: 20px;

    top: 25px;

    color: #fff;

    font-size: 15px;

    line-height: 35px;

}



.top-nav2 li {

    padding: 0 2px;

}



.top-nav2 .ic-btn {

    padding: 0 10px;

    border-radius: 20px;

}



.top-nav2 .ic-btn:hover {

    opacity: 0.7;

}



.top-nav2 li.b1 .ic-btn {

    background: #62B0DF;

}



.top-nav2 li.b2 .ic-btn {

    background: #000;

    color: #D8D8D8;

}



.top-nav2 li.b3 .ic-btn {

    background: #C00;

}



.top-nav2 li.b4 .ic-btn {

    background: #B062DF;

}



.top-nav2 .ic-btn:before {

    margin: 0 3px 3px 0;

}



.top-nav2 li.b1 .ic-btn:before {

    background-position: -100px 0;

}



.top-nav2 li.b2 .ic-btn:before {

    background-position: -125px 0;

}



.top-nav2 li.b3 .ic-btn:before {

    background-position: -150px 0;

}



.top-nav2 li.b4 .ic-btn:before {

    background-position: -75px -25px;

}



.main-nav {

    background: #BE0000;

}



.menu {

    text-align: center;

}



.menu li {

    position: relative;

}



.menu li a {

    display: block;

}



.menu > li {

    border: 1px solid #D24C4A;

    border-width: 0 1px 1px;

    margin: 0 -3px;

}



.menu > li > a {

    color: #fff;

    font-size: 16px;

    padding: 10px 16px;

}



.menu > li:hover,

.menu > li.active {

    z-index: 1;

}



.menu > li > a:hover,

.menu > li.active > a {

    background: url(../../images/system/menu_hover_bg.png) 0 100% repeat-x;

}



.menu > li.has-child > a:after {

    content: '';

    display: inline-block;

    vertical-align: middle;

    background: url(../../images/system/menu_arrow.png) no-repeat;

    width: 9px;

    height: 6px;

    margin: 0 0 3px 5px;

}



.menu ul {

    position: absolute;

    top: 100%;

    left: 50%;

    width: 140px;

    margin-left: -70px;

    text-align: center;

    display: none;

}



.menu > li > ul {

    background: url(../../images/system/menu_caret.png) 50% 11px no-repeat;

    padding-top: 20px;

}



.menu ul li {

    background-color: rgba(0, 0, 0, 0.80);

}



.menu ul li + li {

    background-image: url(../../images/system/menu_border.png);

    background-repeat: repeat-x;

    padding-top: 1px;

}



.menu ul li a {

    color: #aaa;

    font-size: 15px;

    padding: 8px 15px;

}



.menu ul li a:hover,

.menu ul li.active > a {

    color: #fff;

}



#footer {

    position: relative;

    background: #212121;

    text-align: center;

    line-height: 20px;

    padding: 30px 15px;

}



#footer .copyright {

    display: inline-block;

    vertical-align: middle;

    color: #878787;

    font-size: 13px;

    line-height: 1.4;

}



#footer .ibtn.gotop {

    position: absolute;

    right: 0;

    top: 0;

}



#main {

    padding: 20px 0 45px;

    min-height: 500px;

}



.hint-box {

    display: inline-block;

    vertical-align: middle;

    width: 20px;

    height: 20px;

    position: relative;

    z-index: 0;

}



.hint-box.active {

    z-index: 100;

}



.hint-box .hint-txt-box {

    position: absolute;

    top: 100%;

    padding-top: 6px;

    display: none;

}



.hint-box.l .hint-txt-box {

    left: 0;

}



.hint-box.r .hint-txt-box {

    right: 0;

}



.hint-box.c .hint-txt-box {

    left: 50%;

    margin-left: -78px;

}



.hint-box.active .hint-txt-box {

    display: block;

}



.hint-box .hint-txt:before {

    content: '';

    display: block;

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 0 4px 6px 4px;

    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;

    position: absolute;

    bottom: 100%;

}



.hint-box.l .hint-txt:before {

    left: 7px;

}



.hint-box.r .hint-txt:before {

    right: 7px;

}



.hint-box.c .hint-txt:before {

    left: 50%;

    margin-left: -4px;

}



.hint-box .hint-txt {

    background: rgba(0, 0, 0, 0.8);

    color: #fff;

    padding: 6px 10px;

    position: relative;

    width: 156px;

    font-size: 13px;

    text-align: left;

}



.panel-box {

    background: #fff;

    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);

    padding: 20px;

    margin-bottom: 20px;

}



.panel-head .panel-title {

    float: left;

}



.panel-head .btn.flat {

    float: right;

    margin-top: 5px;

}



.panel-title {

    color: #444;

    font-size: 20px;

    font-weight: bold;

    line-height: 1.4;

    margin-bottom: 10px;

}



.panel-nav li a {

    display: block;

    text-align: center;

    color: #333;

    font-size: 20px;

    border: 1px solid #D7D7D7;

    padding: 10px 15px;

    line-height: 30px;

    background: #fff;

    margin-bottom: -1px;

}



.panel-nav li.active a {

    font-weight: bold;

    background: url(../../images/system/tab_nav_active.png) repeat-x #D8D8D8;

}



.panel-nav .ic {

    margin: 0 3px 4px 0;

}



.panel-content {

    border: 1px solid #D7D7D7;

    background: #eee;

    padding: 10px;

}



.btn-box {

    clear: both;

    text-align: center;

    padding-top: 5px;

}



.main-title {

    text-align: center;

    color: #aaa;

    font-size: 32px;

    letter-spacing: 3px;

    margin-bottom: 28px;

}



.main-title strong {

    display: inline-block;

    border: 3px solid #E7E7E7;

    box-shadow: 1px 1px 1px 0 #fff;

    line-height: 50px;

    border-radius: 30px;

    padding: 0 25px 0 28px;

}



.content-box {

    background: #fff;

    border: 1px solid #ddd;

    padding: 15px 20px;

}



.content-box2 {

    background: #F8F8F8;

    border: 1px solid #ddd;

    padding: 8px 12px;

}



.content-box2:after {

    visibility: hidden;

    display: block;

    font-size: 0;

    content: " ";

    clear: both;

    height: 0;

}



.content-box2 .form-control {

    background: #fff;

}



.content-box2 + * {

    margin-top: 10px;

}



.content-title {

    font-weight: bold;

    margin-bottom: 6px;

}



hr.divider {

    border: 0;

    border-bottom: 1px solid #ddd;

    margin: 15px 0;

}



.pull-left {

    float: left;

}



.pull-right {

    float: right;

}



.welcome-row .col {

    float: left;

    padding: 0 3px;

}



.welcome-row .col1 {

    width: 65%;

}



.welcome-row .col2 {

    width: 35%;

}



.welcome-row .panel-content {

    padding: 8px 4px 4px;

    text-align: center;

}



.count-box {

    display: inline-block;

    width: 173px;

    text-align: center;

    border: 1px solid #ddd;

    margin-bottom: 4px;

}



.count-title {

    background: #888;

    color: #fff;

    font-size: 16px;

    line-height: 36px;

    border-bottom: 1px solid #ddd;

}



.count-txt {

    background: #ffffff;

    /* Old browsers */

    background: -moz-linear-gradient(top, #ffffff 50%, #e7e7e7 100%);

    /* FF3.6-15 */

    background: -webkit-linear-gradient(top, #ffffff 50%, #e7e7e7 100%);

    /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, #ffffff 50%, #e7e7e7 100%);

    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7e7e7', GradientType=0);

    /* IE6-9 */

    line-height: 75px;

    color: #1F1F1F;

    font-size: 26px;

}



.count-txt strong {

    color: #D20000;

    font-size: 28px;

}



.no-data-box {

    background: #F8F8F8;

    text-align: center;

    padding: 30px 10px;

    border: 1px solid #ddd;

}



.sect-box {

    border: 1px solid #ddd;

    padding: 10px;

    margin-top: 10px;

}



.sect-box:first-child {

    margin-top: 0;

}



.sect-row-wrap {

    margin: 10px -10px 0;

}



.sect-row {

    display: table;

    width: 100%;

    border-collapse: separate;

    border-spacing: 10px 0;

    table-layout: fixed;

}



.sect-row .sect-box {

    display: table-cell;

}



.sect-title {

    border: 1px solid #DCDCDC;

    background: #F6F6F6;

    padding: 5px 10px;

    line-height: 35px;

}



.sect-title + * {

    margin-top: 10px;

}



.sect-title.bg2 {

    background: #62B0DF;

}



.sect-title.bg3 {

    background: #bbb;

}



.sect-title .title-txt {

    display: inline-block;

    vertical-align: middle;

    font-size: 21px;

    color: #333;

}



.sect-title.bg2 .title-txt,

.sect-title.bg3 .title-txt {

    color: #fff;

}



.member-account {

    display: inline-block;

    vertical-align: middle;

    font-size: 14px;

}



.row {

    margin-left: -15px;

    margin-right: -15px;

}



.row .col {

    float: left;

    padding: 0 15px;

}



.row.x2 .col {

    width: 50%;

}



.row.x3 .col {

    width: calc(100% / 3);

}



#message-box {

    padding: 10px;

}



#message-box .form-control {

    background: #fff;

}



#message-box .btn-box {

    padding-top: 8px;

}



.message-item {

    margin-top: 15px;

}



.message-item .reply-status {

    float: right;

    line-height: 25px;

}



.message-item .reply-status * {

    margin: 0;

}



.message-content {

    border: 1px solid #ddd;

    border-radius: 10px;

    padding: 0 15px;

}



.message-content.active {

    background: #F6F6F6;

}



.message-from,

.message-answer-time {

    font-size: 13px;

    color: #999;

}



.message-from b {

    font-size: 15px;

    color: #333;

}



.message-question {

    padding: 10px 0;

    cursor: pointer;

    line-height: 1.8;

}



.message-answer {

    color: #60B0DF;

    border-top: 1px solid #ddd;

    display: none;

    padding: 10px 0;

}



.catalog-color {

    line-height: 35px;

    margin: 3px 0;

}



.catalog-list {

    margin-bottom: 15px;

}



.catalog-list .box {

    position: relative;

    background: #ffffff;

    /* Old browsers */

    background: -moz-linear-gradient(top, #ffffff 0%, #f8f8f8 54%);

    /* FF3.6-15 */

    background: -webkit-linear-gradient(top, #ffffff 0%, #f8f8f8 54%);

    /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 54%);

    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f8', GradientType=0);

    /* IE6-9 */

    padding: 10px 45px 10px 80px;

    border: 1px solid #ddd;

    margin-bottom: -1px;

}



.catalog-list ul .box {

    background: #E8E8E8;

}



.catalog-list ul ul .box {

    background: #eee;

}



.catalog-list ul ul ul .box {

    background: #f2f2f2;

}



.catalog-list ul ul ul ul .box {

    background: #f8f8f8;

}



.catalog-list .btn.add-catalog {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    background: #ff9326;

    /* Old browsers */

    background: -moz-linear-gradient(top, #ff9326 0%, #f97c00 73%);

    /* FF3.6-15 */

    background: -webkit-linear-gradient(top, #ff9326 0%, #f97c00 73%);

    /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, #ff9326 0%, #f97c00 73%);

    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff9326', endColorstr='#f97c00', GradientType=0);

    /* IE6-9 */

}



.catalog-list ul .btn.add-catalog {

    background: #9ad035;

    /* Old browsers */

    background: -moz-linear-gradient(top, #9ad035 0%, #87b82c 73%);

    /* FF3.6-15 */

    background: -webkit-linear-gradient(top, #9ad035 0%, #87b82c 73%);

    /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, #9ad035 0%, #87b82c 73%);

    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#9ad035', endColorstr='#87b82c', GradientType=0);

    /* IE6-9 */

}



.catalog-list ul ul .btn.add-catalog {

    background: #EB5683;

    /* Old browsers */

    background: -moz-linear-gradient(top, #EB5683 0%, #E01B56 73%);

    /* FF3.6-15 */

    background: -webkit-linear-gradient(top, #EB5683 0%, #E01B56 73%);

    /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, #EB5683 0%, #E01B56 73%);

    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#EB5683', endColorstr='#E01B56', GradientType=0);

    /* IE6-9 */

}



.catalog-list ul ul ul .btn.add-catalog {

    background: #666FDD;

    /* Old browsers */

    background: -moz-linear-gradient(top, #666FDD 0%, #2E39CF 73%);

    /* FF3.6-15 */

    background: -webkit-linear-gradient(top, #666FDD 0%, #2E39CF 73%);

    /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, #666FDD 0%, #2E39CF 73%);

    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#666FDD', endColorstr='#2E39CF', GradientType=0);

    /* IE6-9 */

}



.catalog-list ul ul ul ul .btn.add-catalog {

    background: #B062DF;

    /* Old browsers */

    background: -moz-linear-gradient(top, #B062DF 0%, #962DD5 73%);

    /* FF3.6-15 */

    background: -webkit-linear-gradient(top, #B062DF 0%, #962DD5 73%);

    /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, #B062DF 0%, #962DD5 73%);

    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#B062DF', endColorstr='#962DD5', GradientType=0);

    /* IE6-9 */

}



.catalog-list .btn.toggle-catalog {

    position: absolute;

    top: 0;

    bottom: 0;

    right: 0;

    background: url(../../images/system/catalog_accordion.png) no-repeat #bbb;

    width: 35px;

}



.catalog-list li.active > .box .btn.toggle-catalog {

    background-position: 100% 0;

}



.catalog-list .qty {

    color: #61B0DF;

}



.catalog-list ul {

    padding-left: 25px;

}



.products-row {

    margin: 0 -12px;

}



.products-row .col {

    float: left;

    padding: 0 12px;

}



.products-row .col1 {

    width: 300px;

}



.products-row .col2 {

    width: calc(100% - 300px);

}



.cropper-thumbnails {

    margin: 0 -5px;

}



.cropper-thumbnails li {

    width: calc(100% / 6);

    padding: 5px;

}



.cropper-thumbnails li a {

    border: 4px solid #D7D7D7;

    padding: 1px;

    position: relative;

    box-sizing: border-box;

}



.cropper-thumbnails li:first-child a:before {

    content: '主圖';

    background: #62B0DF;

    width: 50px;

    line-height: 27px;

    text-align: center;

    color: #fff;

    font-size: 15px;

    position: absolute;

    top: -4px;

    left: -4px;

}



#cropper-actions {

    padding-top: 10px;

}

@media screen and (max-width: 1730px) {
	#headerframe {
		height: 125px;
	}
}


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

    .logo-box {

        margin-bottom: 50px;

    }

    .top-nav1,

    .top-nav2 {

        top: 85px;

    }

}

@media screen and (max-width: 1217px) {
	#headerframe { 
		height: 150px;
	}
}

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

    .welcome-row .col {

        float: none;

        width: auto;

    }

    .count-box {

        width: 170px;

    }

}



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

    .logo-box {

        margin-bottom: 0;

    }

    .logo {

        width: 280px;

        height: 43px;

    }

    .top-nav1,

    .top-nav2 {

        position: static;

        text-align: center;

        margin: 10px 0;

    }

    .top-nav1 ul li,

    .top-nav2 ul li {

        display: inline-block;

        float: none;

    }

    .main-nav .menu {

        display: none;

    }

    #footer .ibtn.gotop {

        position: fixed;

        z-index: 100;

        top: auto;

        right: 50%;

        bottom: 5px;

        margin-right: -15px;

        background: url(../../images/system/mobile_gotop.png) 50% 50% no-repeat;

        width: 30px;

        height: 30px;

        border: 0;

    }

    .sect-row-wrap {

        margin: 10px 0 0;

    }

    .sect-row,

    .sect-row .sect-box {

        display: block;

        width: auto;

    }

    .products-row .col,

    .row.x2 .col {

        width: 100%;

    }

    .products-row .col + .col {

        margin-top: 10px;

    }

}



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

    #headerframe { 
		height: 100px;
	}

    .logo {

        background-image: url(../../images/system/logo_m.png);

        width: 237px;

        height: 30px;

    }

    .top-nav1 .b1:nth-child(1),
    .top-nav1 .b2,
    .top-nav2 {
        display: none;
    }
    .top-nav1{
        margin: 0;
    }
    .top-nav1 .b1 {
        background: none;
    }

    .panel-box {

        padding: 15px 10px;

        border-width: 1px 0;

    }

    .count-box {

        width: calc(25% - 6px);

    }

    .panel-nav {

        margin: 0 -11px;

    }

    .panel-content {

        padding: 15px 10px;

        border-width: 1px 0;

        margin: 0 -10px;

    }

    .content-box {

        padding: 15px;

    }

    .sect-box {

        border: 0;

        padding: 0;

    }

    .sect-title {

        margin: 0 -5px;

    }

    #message-box {

        padding: 0;

    }

    .m-hide {

        display: none !important;

    }

    .catalog-list ul {

        padding-left: 10px;

    }

    .cropper-thumbnails li {

        width: calc(100% / 3);

    }

}



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

    .count-box {

        width: calc(50% - 6px);

    }

    .count-title {

        font-size: 15px;

    }

}



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

    .elem-holder .pull-left,

    .elem-holder .pull-right {

        float: none;

        display: block;

        text-align: center;

    }

}



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

    .panel-nav li {

        display: block;

    }

}

/********************START 404 **********************/

.nopage1,

.nopage2{

    font-family: '微軟正黑體';

    width: 100%;

    padding: 50px 15px;

    max-width: 690px;

    margin: 0 auto;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;    

}

.nopage1 .pic{

    max-width: 560px;

    margin: 0 auto 30px;

}

.nopage2 .pic{

    max-width: 657px;

    margin: 0 auto 30px;

}

.nopage1 .pic img,

.nopage2 .pic img{

    max-width: 100%;

    max-height: 100%;

    height: auto !important;

}

.nopage2 .title{

    font-size: 25px;

    color: #777777;

    font-weight: bold;

    margin-bottom: 15px;

}

.nopage1 .txt,

.nopage2 .txt{

    font-size: 16px;

    color: #777777;

    line-height: 1.6;

}

.nopage1 .txt{

        padding-left: 15%;

}

.nopage2 .txt{

    text-align: center;

}

.nopage1 .btn-box a.gohome,

.nopage2 .btn-box a.gohome{

    display: inline-block;

    text-decoration: none;

    font-size: 16px;

    color: #929292;

    border: 1px solid #929292;

    text-align: center;

    padding: 4px 47px;

    margin-top: 20px;

    -webkit-border-radius: 3px;

       -moz-border-radius: 3px;

            border-radius: 3px;

}

.nopage1 .btn-box a.gohome:hover,

.nopage2 .btn-box a.gohome:hover {

    color: #FFF;

    background: #929292;

    -webkit-transition: all 200ms linear;

    -moz-transition: all 200ms linear;

    -o-transition: all 200ms linear;

    transition: all 200ms linear;

}

.nopage1 .backhome,
.nopage2 .backhome{
	background: #d90000;
    color: #fff;
    padding: 6px 38px;
    border-radius: 5px;
}
.nopage1 .backhome:hover,
.nopage2 .backhome:hover{
	background: #ff3434;
}

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

    .nopage1 .pic{

        margin-bottom: 10px;

    }

    .nopage1 .txt{

        padding-left: 15px;

        text-align: center;

    }

}

/**********************END 404 **********************/