@charset "utf-8";
/*英文字型 → Linux 字型(中英文名稱) → Mac 字型(中英文名稱) → Vista 字型(中英文名稱) → XP 字型 → 通用字型*/

body {
    color: #544e4c;
    font-family: 'Microsoft Yahei', Arial, sans-serif;
    --font-family-sans-serif: 'Microsoft JhengHei', Arial, sans-serif;
    --font-family-monospace: 'Microsoft JhengHei', Arial, sans-serif;
}

html {
    font-family: 'Microsoft Yahei', Arial, sans-serif;
    --font-family-sans-serif: 'Microsoft JhengHei', Arial, sans-serif;
    --font-family-monospace: 'Microsoft JhengHei', Arial, sans-serif;
}

.font-work-sans,
.main-fontfamily {
    font-family: 'Microsoft Yahei', Arial, sans-serif;
    --font-family-sans-serif: 'Microsoft JhengHei', Arial, sans-serif;
    --font-family-monospace: 'Microsoft JhengHei', Arial, sans-serif;
}

.nav>li>a:focus,
.nav>li>a:hover {
    text-decoration: none;
    background-color: transparent;
    color: #808080;
    border-bottom: 0px solid #fff;
}


.rows {
    margin-right: 0px;
    margin-left: 0px;
}

.rows:before,
.rows:after {
    display: table;
    content: " ";
}

.rows:after {
    clear: both;
}

.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open>.dropdown-toggle.btn-primary.focus,
.open>.dropdown-toggle.btn-primary:focus,
.open>.dropdown-toggle.btn-primary:hover {
    color: 333;
    font-weight: bold;
    background-color: #ffffff;
    border-color: #ffffff;
}

.text-black,
.color-black {
    color: #333;
}

.text-red,
.color-red {
    color: red;
}

.text-public,
.color-public {
    color: #544e4c;
}

.text-gray,
.color-gray {
    color: #9b9b9b;
}

.text-lightgray,
.color-lightgray {
    color: #8b8b8b;
}

.text-big-lightgray,
.color-big-,
.text-big-en-lightgray {
    color: #ddd;
}

.text-white,
.color-white {
    color: #fff;
}

.text-transparent {
    color: transparent;
}

.height-1 {
    height: 5px
}

.height-2 {
    height: 10px
}

.height-3 {
    height: 15px
}

.height-4 {
    height: 20px
}

.height-5 {
    height: 25px
}

.height-6 {
    height: 30px
}

.height-7 {
    height: 35px
}

.height-8 {
    height: 40px
}

.height-9 {
    height: 45px
}

.height-10 {
    height: 50px
}

.height-11 {
    height: 55px
}

.height-12 {
    height: 60px
}

.height-13 {
    height: 65px
}

.height-14 {
    height: 70px
}

.height-15 {
    height: 75px
}

.height-16 {
    height: 80px
}

.top0 {
    top: 0
}

.bottom {
    bottom: 0
}

.left0 {
    left: 0
}

.rigth0 {
    right: 0
}

.top-n4 {
    top: -20px
}

.z-index-upper-layer {
    z-index: 19;
}

/*水平排列*/

.inlineblock {
    display: inline-block;
}

.bg-lavender {
    background-color: #bcb0cc;
}

.bg-lihgtgray {
    background-color: #eee;
}

.bg-white {
    background-color: #fff;
}

.bg-h {
    background-size: auto 15px;
}

.box-shadow-lavender {
    box-shadow: 1px 0px 0 3px #bdafc8;
    background-color: #bcb0cc;
}

/*文字陰影*/

.text-shadow {
    text-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

/*容器陰影*/

.box-shadow {
    box-shadow: 2px 1px 20px 0px #00000036;
}

.box-shadow-story {
    box-shadow: 10px 10px 50px 0 rgba(0, 0, 0, .5);
}

/**/

.login-header .sign-out {
    display: none;
}

.public-media-icon span {
    display: none;
}

/*光標*/

.cursor {
    cursor: pointer;
}

/*左右線條*/

.brl-1s-gray {
    border-right: 1px solid #544e4c
}

.bll-1s-gray {
    border-left: 1px solid #544e4c
}

.btl-1s-gray {
    border-top: 1px solid #544e4c
}

.bbl-1s-gray {
    border-bottom: 1px solid #544e4c
}

.bl {
    border: 1px solid #544e4c
}

.br-1-dotted-line {
    border-right: 1px dotted #ddd
}

.bbl-1s-lightgray {
    border-bottom: 1px solid #ddd
}

.box-relative {
    position: relative;
}

.box-absolute {
    position: absolute;
}

.btn-basic {
    padding: 7.5px 14px;
    font-size: 1.6rem;
    font-weight: 400;
}

.br90 {
    border-radius: 90px;
    background-color: white;
}

/*自設文字大小*/

.h1,
.h2,
.h3,
h1,
h2,
h3 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.kyc-h1 {
    font-size: 5rem;
}

.kyc-h2 {
    font-size: 4.5rem;
}

.kyc-h3 {
    font-size: 4rem;
}

.kyc-h4 {
    font-size: 3.5rem;
}

.kyc-h4 {
    font-size: 3rem;
}

.kyc-h5,
.h1,
.side h3,
.side .pro_nav h3 {
    font-size: 2.5rem;
}

.kyc-h6,
.h2 {
    font-size: 2rem;
}

.kyc-h7,
#floating ul li a {
    font-size: 1.5rem;
}

.kyc-h8 {
    font-size: 2rem;
}

.kyc-content-text {
    font-size: 1.5rem;
}

.kyc-h9,
.h3,
.navbar-nav li,
.footer-ul li,
.footer-ul li a,
.header .navbar .lang ul li a,
.header .navbar .member-go ul li a.a1,
body.lang_en .header .navbar .member-go ul li a.a1,
.header .navbar .search_box input.text,
.side .side-toggle {
    font-size: 1.75rem;
}

.h4 {
    font-size: 1.5rem;
}

.h5 {
    font-size: 1.25rem;
}

.h6 {
    font-size: 1rem;
}

.cart-text {
    font-size: 1.25rem;
}

.kyc-h10,
.cart-text {
    font-size: 1.125rem;
}

/*相當於18px*/

.kyc-h11 {
    font-size: 1rem;
}

/*相當於16px*/

.kyc-h12 {
    font-size: 0.875rem;
}

/*相當於14px*/

/*side-字體設定*/

.side h3 {
    font-size: 2rem;
}

.side .nav>li a,
.side .nav>li>a {
    font-size: 1.6rem;
    font-weight: 400;
}

.side .nav>li>ul>li>ul>li>a {
    font-size: 1.5rem;
    font-weight: 400;
}

/*clear-area字體設定*/

.body.product.show .editor.nav-register-tabs>li>a {
    font-size: 1.95rem;
}

body.product.show .editor .nav-register-tabs {
    font-size: 1.64rem;
}

.hand-wash,
.auto-wash,
.en-auto-wash {
    font-size: 1.85rem;
}

.clean-Content-header {
    font-size: 1.7rem;
}

.step-number {
    font-size: 3rem;
}

.period,
.trait {
    font-size: 1.55rem;
}

.hand-wash-step-one-headline,
.hand-wash-step-two-headline,
.hand-wash-step-three-headline,
.auto-wash-step-one-headline,
.auto-wash-step-two-headline,
.step-en-area,
.news-step-en-area {
    font-size: 1.65rem;
}

@media(max-width:991px) {

    .hand-wash,
    .auto-wash,
    .clean-Content-header {
        font-size: 1.65rem;
    }

    .hand-wash-step-one-headline,
    .hand-wash-step-two-headline,
    .hand-wash-step-three-headline,
    .auto-wash-step-one-headline,
    .auto-wash-step-two-headline {
        font-size: 1.55rem;
    }
}

@media(max-width:768px) {

    .hand-wash,
    .auto-wash,
    .clean-Content-header {
        font-size: 1.65rem;
    }

    .hand-wash-step-one-headline,
    .hand-wash-step-two-headline,
    .hand-wash-step-three-headline,
    .auto-wash-step-one-headline,
    .auto-wash-step-two-headline {
        font-size: 1.45rem;
    }
}

@media(max-width: 767px) {
    .trait {
        font-size: 1.55rem;
    }
}

@media(max-width: 375px) {

    .hand-wash,
    .auto-wash,
    .en-auto-wash {
        font-size: 1.85rem;
    }
}

@media(max-width: 350px) {

    .hand-wash,
    .auto-wash,
    .clean-Content-header {
        font-size: 1.45rem;
    }

    .hand-wash-step-one-headline,
    .hand-wash-step-two-headline,
    .hand-wash-step-three-headline,
    .auto-wash-step-one-headline,
    .auto-wash-step-two-headline {
        font-size: 1.35rem;
    }
}

@media(max-width: 320px) {

    .hand-wash,
    .auto-wash,
    .hand-wash-step-one-headline {
        font-size: 1.35rem;
    }

    .hand-wash-step-one-headline,
    .hand-wash-step-two-headline,
    .hand-wash-step-three-headline,
    .auto-wash-step-one-headline,
    .auto-wash-step-two-headline {
        font-size: 1.25rem;
    }

    .clean-Content-header {
        font-size: 1.45rem;
    }

    .hand-wash-step-two-headline,
    .hand-wash-step-three-headline,
    .auto-wash-step-one-headline,
    .auto-wash-step-two-headline {
        font-size: 1.35rem;
    }
}

/*story-字體設定*/

.story-en-title-textcontent p,
.inooknit-en-bg-content p,
.low-wastte-en-area p,
.with-regard-content .col-sm-6 p {
    font-size: 1.5rem;
    font-weight: 300;
    color: #333;
}

.kyc-story-ul-center li,
.inooknit-logo-content p,
.traditionalway-img-content p,
.about-bag-content li,
.card-body p {
    font-size: 1.5rem;
    font-weight: 400;
    color: #333;
}

body.lang_en .content>h1 {
    font-size: 2.6rem;
    font-weight: 800;
}

.banner-btm-img-en-area .story-beauty-en-text,
.story-beauty-text li,
.about-main-content p {
    font-weight: bold;
}

.footer_content {
    font-size: 1.2rem;
}

@media(max-width:1200px) {
    .ourvision-en-bg .kyc-h4 {
        font-size: 2.5rem
    }

    .banner-btm-img-en-area .story-beauty-en-text {
        font-size: 2.1rem
    }
}

@media (max-width:992px) {

    .kyc-h5,
    .h1,
    .side h3,
    .side .pro_nav h3 {
        font-size: 2.3rem;
    }

    .side .nav>li>ul>li>ul>li>a {
        font-size: 1.3rem;
        font-weight: 400;
        white-space: nowrap;
    }

    body.lang_en .content>h1 {
        font-size: 2.6rem;
        font-weight: 800;
    }

    .footer-ul li a {
        font-size: 1.55rem;
    }
}

@media(max-width:767px) {
    .side .side-toggle {
        font-size: 1.5rem;
        width: 97%;
        letter-spacing: 1px;
    }

    .side .nav>li a,
    .side .nav>li>a {
        font-size: 1.7rem;
        font-weight: 400;
        white-space: nowrap;
    }

    .side .nav>li>ul>li>ul>li>a {
        font-size: 1.7rem;
        font-weight: 400;
        white-space: nowrap;
        margin-left: 15px;
        padding: 15px auto;
        padding: 19px auto 19px autp;
        line-height: 20px;
        margin-top: 10px;
    }

    body.lang_en .side .nav>li>a {
        padding: 15px 10px 0 30px;
        font-size: 1.65rem;
        font-weight: 400;
    }

    .side h3 {
        margin-top: 10px;
        font-size: 1.7rem;
        padding-top: 10px;
    }

    .h3 {
        font-size: 1.6rem;
    }

    .ourvision-en-bg .kyc-h4 {
        font-size: 2.1rem;
        font-weight: 600;
    }
}

@media(max-width:320px) {
    .side h3 {
        margin-top: 25px;
    }
}

.wid-home-news h1 {
    font-size: 3.5rem;
    text-align: center;
    font-weight: 500
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 200;
    line-height: 1.1;
}

.font-work-sans {
    font-weight: 400;
}

@media(max-width:991px) {
    .kyc-h4 {
        font-size: 2.8rem;
    }

    .banner-btm-img-en-area .story-beauty-en-text {
        font-size: 2rem;
    }
}

@media(max-width:768px) {
    .banner-btm-img-en-area .story-beauty-en-text {
        font-size: 1.9rem;
    }
}

@media(max-width:767px) {
    .banner-btm-img-en-area .story-beauty-en-text {
        font-size: 1.7rem;
    }
}

@media (max-width: 620px) {
    .ourvision-en-bg .kyc-h4 {
        font-size: 1.9rem;
    }
}

@media(max-width:600px) {
    .kyc-h4 {
        font-size: 2.6rem;
    }

    .kyc-h3 {
        font-size: 3.1rem;
    }
}

@media(max-width:586px) {
    .kyc-h3 {
        font-size: 3.1rem;
    }

    .ourvision-en-bg .kyc-h4 {
        font-size: 1.8rem;
    }
}

@media (max-width: 550px) {
    .ourvision-en-bg .kyc-h4 {
        font-size: 1.7rem;
    }
}

@media (max-width: 510px) {
    .ourvision-en-text {
        transform: translate(-50%, 210%);
    }
}

@media (max-width: 499px) {
    .kyc-h4 {
        font-size: 2.3rem;
    }

    .ourvision-en-bg .kyc-h4 {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .ourvision-en-bg .kyc-h4 {
        font-size: 1.5rem;
    }
}

@media (max-width: 441px) {
    .kyc-h3 {
        font-size: 3rem;
    }

    .ourvision-en-text {
        transform: translate(-50%, 80%);
    }
}

@media(max-width:440px) {
    .kyc-h4 {
        font-size: 2rem;
    }
}

@media(max-width:375px) {
    .kyc-h4 {
        font-size: 1.8rem;
    }

    .kyc-h3 {
        font-size: 2.8rem;
    }
}

@media (max-width: 345px) {
    .kyc-h3 {
        font-size: 2.6rem;
    }

    .h3 {
        font-size: 1.3rem;
    }
}

@media (max-width: 320px) {
    .kyc-h3 {
        font-size: 2.5rem;
    }
}

.pager .next>a,
.pager .next>span {
    float: none;
}

.disabled a .fa-angle-double-left,
.disabled a .fa-angle-left,
.disabled a .fa-angle-right,
.disabled a .fa-angle-double-right {
    color: #ddd;
}

.disabled a .fa-angle-double-left:hover,
.disabled a .fa-angle-left:hover {
    background-color: transparent;
}

/**/

.icon-truck-title {
    font-size: 2.3rem;
}

/*粗字體*/

.fw-800 {
    font-weight: 800;
}

.fw {
    font-weight: bolder;
}

/*行間*/

.lh-1 {
    line-height: 1rem
}

.lh-2 {
    line-height: 1.5rem
}

.l-h-4,
.lh-3 {
    line-height: 2rem
}

.lh-4,
.l-h-4a {
    line-height: 2.5rem
}

.l-h-5,
.lh-5 {
    line-height: 3rem
}

.lh-6,
.l-h-5a {
    line-height: 3.5rem
}

.l-h-6,
.lh-7 {
    line-height: 4rem
}

.lh-8,
.l-h-6a {
    line-height: 4.5rem
}

.l-h-7 {
    line-height: 5rem;
}

/*文字大寫*/

.text-uppercase {
    text-transform: uppercase
}

.text-capitalize {
    text-transform: capitalize;
}

/*文字在web不換行,文字到1200px 後換行*/

.text-space-public {
    white-space: nowrap;
}

@media(max-width:1200px) {
    .text-space-public {
        word-break: break-all;
        white-space: none;
    }
}

.letter-spaceing {
    letter-spacing: .1em;
}

/*ul li*/

.list-style-position-outside {
    list-style-position: outside
}

.nolistyle {
    list-style-type: none;
    list-style: none
}

/*========首頁的ucck區域========*/

.container-f95 {
    width: 95%;
    max-width: 95%;
    margin: auto 2.5% auto 2.5%;
}

.container-f90 {
    width: 90%;
    max-width: 90%;
    margin: auto 5% auto 5%;
}

/*========區域容器========*/

.container-fluid-95 {
    padding-right: 35px;
    padding-left: 35px;
    margin-right: auto;
    margin-left: auto;
}

.container-fluid-95:after,
.container-fluid-95:before {
    clear: both;
}

@media (min-width: 768px) {
    .container-fluid-95 {
        margin-right: 0;
        margin-left: 0;
    }
}

.container-en {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container-en {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container-en {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container-en {
        width: 1170px;
    }
}

/*英文版產品頁空鍵*/

.col-md-kyc-side {
    width: 19%;
    float: left;
}

.col-md-kyc-product-list-content {
    width: 80%;
    float: right;
    margin-left: 1%;
}

.col-md-kyc-news-side {
    width: 19%;
    float: left;
}

.col-md-kyc-news-list-content {
    width: 80%;
    float: right;
    margin-left: 1%;
}

@media (max-width:767px) {
    .col-md-kyc-side {
        width: 98%;
        float: left;
        margin: auto 1% auto 2%;
    }

    .col-md-kyc-product-list-content {
        width: 100%;
        float: right;
        margin: auto 1% auto 2%;
    }

    .col-md-kyc-news-side {
        width: 98%;
        float: none;
        text-align: center;
        margin: auto auto;
    }

    .col-md-kyc-news-list-content {
        width: 90%;
        float: none;
        text-align: center;
        margin: auto auto;
    }

    .new-contents .sider_nav .side .side-toggle {
        font-size: 1.9rem;
        font-weight: 600;
        width: 97%;
        margin-left: 3%;
    }
}

/*=====================連結===============**/

a {
    color: #808080;
    font-weight: 400;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #544e4c;
    text-decoration: none;
}

a:focus {
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: 0px;
}

:focus {
    outline: -webkit-focus-ring-color auto 0px;
}

/**/

.col-kyc-xs-1,
.col-kyc-sm-1,
.col-kyc--md-1,
.col-kyc--lg-1 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-kyc-xs-4,
.col-kyc-sm-4,
.col-kyc-md-4,
.col-kyc-lg-4 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-kyc-xs-1,
.col-kyc-sm-1,
.col-kyc-md-1,
.col-kyc-lg-1 {
    width: 20%;
    float: left;
}

.col-kyc-xs-4,
.col-kyc-sm-4,
.col-kyc-md-4,
.col-kyc-lg-4 {
    width: 80%;
    float: left;
}

@media (min-width: 768px) {

    .col-kyc-xs-1,
    .col-kyc-sm-1,
    .col-kyc-md-1,
    .col-kyc-lg-1 {
        width: 20%;
        float: left;
    }

    .col-kyc-xs-4,
    .col-kyc-sm-4,
    .col-kyc-md-4,
    .col-kyc-lg-4 {
        width: 80%;
        float: left;
    }
}

@media (min-width: 992px) {

    .col-kyc-xs-1,
    .col-kyc-sm-1,
    .col-kyc-md-1,
    .col-kyc-lg-1 {
        width: 20%;
        float: left;
    }

    .col-kyc-xs-4,
    .col-kyc-sm-4,
    .col-kyc-md-4,
    .col-kyc-lg-4 {
        width: 80%;
        float: left;
    }
}

@media (min-width: 1200px) {

    .col-kyc-xs-1,
    .col-kyc-sm-1,
    .col-kyc-md-1,
    .col-kyc-lg-1 {
        width: 20%;
        float: left;
    }

    .col-kyc-xs-4,
    .col-kyc-sm-4,
    .col-kyc-md-4,
    .col-kyc-lg-4 {
        width: 80%;
        float: left;
    }
}

/*================btn================*/

.btn-cancel {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.btn.active,
.btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 0px 0px transparent;
    box-shadow: inset 0 0px 0px transparent;
}

.btn-transparent {
    color: #333;
    background-color: transparent;
    border: 2px sold #333;
}

.btn-dark {
    color: #fff;
    background-color: #444;
    border: 1px soild #444;
    margin: -3px auto auto -10px;
}

.btn-dark:hover {
    color: #333;
    background-color: #ddd;
    border: 1px solid #ddd;
    margin: -3px auto auto -10px;
}

/*-------btn-lg-------*/

@media (max-width: 767px) {
    .btn-lg {
        padding: 10px 16px;
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) {
    .btn-lg {
        padding: 10px 20px;
    }
}

@media (max-width: 732px) {
    .btn-lg {
        padding: 12px 26px;
    }
}

@media (max-width: 700px) {
    .btn-lg {
        padding: 10px 18px;
    }
}

@media(max-width:667px) {
    .btn-lg {
        padding: 20px 26px;
        font-size: 1.8rem;
        font-weight: bold;
    }
}

@media(max-width:640px) {
    .btn-lg {
        padding: 14px 22px;
    }
}

@media(max-width:533px) {
    body.product.show .editor .nav-register-tabs {
        font-size: 1.54rem;
    }
}

@media(max-width:490px) {
    .btn-lg {
        padding: 10px 18px;
    }
}

@media(max-width:410px) {
    .btn-lg {
        padding: 10px 14px;
    }
}

@media(max-width:385px) {
    .btn-lg {
        padding: 8px 10px;
        font-size: 1.1rem
    }
}

@media(max-width:300px) {
    body.product.show .editor .nav-register-tabs {
        font-size: 1.34rem;
    }
}

/*========btn-border================*/

.br0 {
    border-radius: 0;
}

.btn-border-white {
    color: #fff;
    border: 2px solid #fff;
}

/*.btn-border-white:hover{
    color:#fff;
    border:1px solid #fff;
}*/

.br0 {
    border-radius: 0;
}

.mtb {
    margin: 25px auto
}

.ptb {
    padding: 35px auto
}

.plr {
    padding: auto 45px
}

/*===========清除浮動============*/

.clearboth {
    clear: both;
    overflow: hidden;
}

.clearboth::after,
.clearboth::before {
    clear: both;
    overflow: hidden;
}

.clearfix:after,
.clearfix:before {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
}

.clearfix {
    zoom: 1;
}

/*========UL NOSTYLE========*/

.list-tyle-style-none {
    list-style-type: none;
    display: block;
}

/*========background-color========*/

.bg-gray {
    background-color: #f2f2f2;
}

.bg-white {
    background-color: #fff;
}

/*========區域內的置中================*/

.w-80 {
    width: 80%;
    margin: auto 10% auto 10%;
    text-align: center;
}

.w-90 {
    width: 90%;
    margin: auto 5% auto 5%;
    text-align: center;
}

.w-95 {
    width: 95%;
    margin: auto 2.5% auto 2.5%;
    text-align: center;
}

.w-98 {
    width: 98%;
    margin: auto 1% auto 1%;
    text-align: center;
}

.w-50 {
    width: 50%;
    margin: auto 22.5% auto 22.5%;
    text-align: center;
    padding: auto 10% auto 10%;
}

.w-half-60scale {
    width: 60%;
    margin: auto 22.5% auto 22.5%;
    text-align: center;
    padding: auto 5% auto 5%;
}

.w-half-70scale {
    width: 70%;
    margin: auto 15% auto 15%;
    text-align: center;
    padding: auto 5% auto 5%;
}

.w-half-80scale {
    width: 80%;
    margin: auto 5% auto 10%;
    text-align: center;
    padding: auto 5% auto 5%;
}

/*============Video responsive==============*/

.story-embed-responsive {
    position: relative;
    display: block;
    height: auto;
    padding: 0;
}

.story-embed-responsive-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border: 0;
}

/*=======================偏移位置=======================*/

.m0 {
    margin: 0
}

.p0 {
    padding: 0
}

.mt0 {
    margin-top: 0px
}

.mt-1 {
    margin-top: 5px
}

.mt-2 {
    margin-top: 10px
}

.mt-3 {
    margin-top: 15px
}

.mt-4 {
    margin-top: 20px
}

.mt-5 {
    margin-top: 25px
}

.mt-6 {
    margin-top: 30px
}

.mt-7 {
    margin-top: 35px
}

.mt-8 {
    margin-top: 40px
}

.mt-9 {
    margin-top: 45px
}

.mt-10 {
    margin-top: 50px
}

.mt-11 {
    margin-top: 55px
}

.mt-12 {
    margin-top: 60px
}

.mt-13 {
    margin-top: 65px
}

.mt-14 {
    margin-top: 70px
}

.mt-15 {
    margin-top: 75px
}

.mt-16 {
    margin-top: 80px
}

.mt-17 {
    margin-top: 85px
}

.mt-18 {
    margin-top: 90px
}

.mt-19 {
    margin-top: 95px
}

.mt-20 {
    margin-top: 100px
}

.mt-30 {
    margin-top: 150px
}

.mt-50 {
    margin-top: 250px
}

.mt-60 {
    margin-top: 300px
}

.mt-public-1 {
    margin-top: 8px;
}

.mt-n1 {
    margin-top: -5px
}

.mt-n2 {
    margin-top: -10px
}

.mt-n3 {
    margin-top: -15px
}

.mt-n4 {
    margin-top: -20px
}

.mt-n5 {
    margin-top: -25px
}

.mt-n6 {
    margin-top: -30px
}

.mt-n7 {
    margin-top: -35px
}

.mt-n8 {
    margin-top: -40px
}

.mt-n9 {
    margin-top: -45px
}

.mt-n10 {
    margin-top: -50px
}

.mt-n11 {
    margin-top: -55px
}

.mt-n12 {
    margin-top: -60px
}

.mt-n13 {
    margin-top: -65px
}

.mt-n14 {
    margin-top: -70px
}

.mt-n15 {
    margin-top: -75px
}

.mt-n16 {
    margin-top: -80px
}

.mt-n17 {
    margin-top: -85px
}

.mt-n18 {
    margin-top: -90px
}

.mt-n19 {
    margin-top: -95px
}

.mt-n20 {
    margin-top: -100px
}

.ml-1 {
    margin-left: 5px
}

.ml-2 {
    margin-left: 10px
}

.ml-3 {
    margin-left: 15px
}

.ml-4 {
    margin-left: 20px
}

.ml-5 {
    margin-left: 25px
}

.ml-6 {
    margin-left: 30px
}

.ml-7 {
    margin-left: 35px
}

.ml-8 {
    margin-left: 40px
}

.ml-9 {
    margin-left: 45px
}

.ml-10 {
    margin-left: 50px
}

.ml-11 {
    margin-left: 55px
}

.ml-12 {
    margin-left: 60px
}

.ml-13 {
    margin-left: 65px
}

.ml-14 {
    margin-left: 70px
}

.ml-15 {
    margin-left: 75px
}

.ml-16 {
    margin-left: 80px
}

.ml-17 {
    margin-left: 85px
}

.ml-18 {
    margin-left: 90px
}

.ml-19 {
    margin-left: 95px
}

.ml-20 {
    margin-left: 100px
}

.ml-21 {
    margin-left: 105px
}

.ml-22 {
    margin-left: 110px
}

.ml-23 {
    margin-left: 115px
}

.ml-24 {
    margin-left: 120px
}

.ml-25 {
    margin-left: 125px
}

.ml-20 {
    margin-left: 100px
}

.ml-30 {
    margin-left: 130px
}

.ml-n1 {
    margin-left: -5px
}

.ml-n2 {
    margin-left: -10px
}

.ml-n3 {
    margin-left: -15px
}

.ml-n4 {
    margin-left: -20px
}

.ml-n5 {
    margin-left: -25px
}

.ml-n6 {
    margin-left: -30px
}

.ml-n7 {
    margin-left: -35px
}

.ml-n8 {
    margin-left: -40px
}

.ml-n9 {
    margin-left: -45px
}

.ml-n10 {
    margin-left: -50px
}

.ml-n11 {
    margin-left: -55px
}

.ml-n12 {
    margin-left: -60px
}

.ml-n13 {
    margin-left: -65px
}

.ml-n14 {
    margin-left: -70px
}

.ml-n15 {
    margin-left: -75px
}

.ml-n16 {
    margin-left: -80px
}

.ml-n17 {
    margin-left: -85px
}

.ml-n18 {
    margin-left: -90px
}

.ml-n19 {
    margin-left: -95px
}

.ml-n20 {
    margin-left: -100px
}

.mr0 {
    margin-right: 5px
}

.mr-1 {
    margin-right: 5px
}

.mr-2 {
    margin-right: 10px
}

.mr-3 {
    margin-right: 15px
}

.mr-4 {
    margin-right: 20px
}

.mr-5 {
    margin-right: 25px
}

.mr-6 {
    margin-right: 30px
}

.mr-7 {
    margin-right: 35px
}

.mr-8 {
    margin-right: 40px
}

.mr-9 {
    margin-right: 45px
}

.mr-10 {
    margin-right: 50px
}

.mr-11 {
    margin-right: 55px
}

.mr-12 {
    margin-right: 60px
}

.mr-13 {
    margin-right: 65px
}

.mr-14 {
    margin-right: 70px
}

.mr-15 {
    margin-right: 75px
}

.mr-16 {
    margin-right: 80px
}

.mr-17 {
    margin-right: 85px
}

.mr-18 {
    margin-right: 90px
}

.mr-19 {
    margin-right: 95px
}

.mr-20 {
    margin-right: 100px
}

.mb-1 {
    margin-bottom: 5px
}

.mb-2 {
    margin-bottom: 10px
}

.mb-3 {
    margin-bottom: 15px
}

.mb-4 {
    margin-bottom: 20px
}

.mb-5 {
    margin-bottom: 25px
}

.mb-6 {
    margin-bottom: 30px
}

.mb-7 {
    margin-bottom: 35px
}

.mb-8 {
    margin-bottom: 40px
}

.mb-9 {
    margin-bottom: 45px
}

.mb-10 {
    margin-bottom: 50px
}

.mb-11 {
    margin-bottom: 55px
}

.mb-12 {
    margin-bottom: 60px
}

.mb-13 {
    margin-bottom: 65px
}

.mb-14 {
    margin-bottom: 70px
}

.mb-15 {
    margin-bottom: 75px
}

.mb-16 {
    margin-bottom: 80px
}

.mb-17 {
    margin-bottom: 85px
}

.mb-18 {
    margin-bottom: 90px
}

.mb-19 {
    margin-bottom: 95px
}

.mb-20 {
    margin-bottom: 100px
}

.pt0 {
    padding-top: 0px
}

.pt-1 {
    padding-top: 5px
}

.pt-2 {
    padding-top: 10px
}

.pt-3 {
    padding-top: 15px
}

.pt-4 {
    padding-top: 20px
}

.pt-5 {
    padding-top: 25px
}

.pt-6 {
    padding-top: 30px
}

.pt-7 {
    padding-top: 35px
}

.pt-8 {
    padding-top: 40px
}

.pt-9 {
    padding-top: 45px
}

.pt-10 {
    padding-top: 50px
}

.pt-11 {
    padding-top: 55px
}

.pt-12 {
    padding-top: 60px
}

.pt-13 {
    padding-top: 65px
}

.pt-14 {
    padding-top: 70px
}

.pt-15 {
    padding-top: 75px
}

.pt-16 {
    padding-top: 80px
}

.pt-17 {
    padding-top: 85px
}

.pt-18 {
    padding-top: 90px
}

.pt-19 {
    padding-top: 95px
}

.pt-20 {
    padding-top: 100px
}

.pl-1 {
    padding-left: 5px
}

.pl-2 {
    padding-left: 10px
}

.pl-3 {
    padding-left: 15px
}

.pl-4 {
    padding-left: 20px
}

.pl-5 {
    padding-left: 25px
}

.pl-6 {
    padding-left: 30px
}

.pl-7 {
    padding-left: 35px
}

.pl-8 {
    padding-left: 40px
}

.pl-9 {
    padding-left: 45px
}

.pl-10 {
    padding-left: 50px
}

.pl-11 {
    padding-left: 55px
}

.pl-12 {
    padding-left: 60px
}

.pl-13 {
    padding-left: 65px
}

.pl-14 {
    padding-left: 70px
}

.pl-15 {
    padding-left: 75px
}

.pl-16 {
    padding-left: 80px
}

.pl-17 {
    padding-left: 85px
}

.pl-18 {
    padding-left: 90px
}

.pl-19 {
    padding-left: 95px
}

.pl-20 {
    padding-left: 100px
}

.pr-1 {
    padding-right: 5px
}

.pr-2 {
    padding-right: 10px
}

.pr-3 {
    padding-right: 15px
}

.pr-4 {
    padding-right: 20px
}

.pr-5 {
    padding-right: 25px
}

.pr-6 {
    padding-right: 30px
}

.pr-7 {
    padding-right: 35px
}

.pr-8 {
    padding-right: 40px
}

.pr-9 {
    padding-right: 45px
}

.pr-10 {
    padding-right: 50px
}

.pr-11 {
    padding-right: 55px
}

.pr-12 {
    padding-right: 60px
}

.pr-13 {
    padding-right: 65px
}

.pr-14 {
    padding-right: 70px
}

.pr-15 {
    padding-right: 75px
}

.pr-16 {
    padding-right: 80px
}

.pr-17 {
    padding-right: 85px
}

.pr-18 {
    padding-right: 90px
}

.pr-19 {
    padding-right: 95px
}

.pr-20 {
    padding-right: 100px
}

.pb-1 {
    padding-bottom: 5px
}

.pb-2 {
    padding-bottom: 10px
}

.pb-3 {
    padding-bottom: 15px
}

.pb-4 {
    padding-bottom: 20px
}

.pb-5 {
    padding-bottom: 25px
}

.pb-6 {
    padding-bottom: 30px
}

.pb-7 {
    padding-bottom: 35px
}

.pb-8 {
    padding-bottom: 40px
}

.pb-9 {
    padding-bottom: 45px
}

.pb-10 {
    padding-bottom: 50px
}

.pb-11 {
    padding-bottom: 55px
}

.pb-12 {
    padding-bottom: 60px
}

.pb-13 {
    padding-bottom: 65px
}

.pb-14 {
    padding-bottom: 70px
}

.pb-15 {
    padding-bottom: 75px
}

.pb-16 {
    padding-bottom: 80px
}

.pb-17 {
    padding-bottom: 85px
}

.pb-18 {
    padding-bottom: 90px
}

.pb-19 {
    padding-bottom: 95px
}

.pb-20 {
    padding-bottom: 100px
}

.pb-30 {
    padding-bottom: 150px
}

.pb-40 {
    padding-bottom: 200px
}

/**/

.p1 {
    padding: 5px 5px
}

.p2 {
    padding: 10px 10px
}

.p3 {
    padding: 15px 15px
}

.p4 {
    padding: 20px 20px
}

.p5 {
    padding: 25px 25px
}

.p6 {
    padding: 30px 30px
}

.p7 {
    padding: 35px 35px
}

.p8 {
    padding: 40px 40px
}

.col-xs-half {
    width: 50%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-oneinfour {
    width: 33.33333333%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-offset-oneinfour {
    margin-left: 33.33333333%;
}

.col-sm-en-wechat {
    width: 14.66666667%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.product-slickBox .slick-list .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: 0px;
    margin-right: 0;
}

.product-slickBox .slick-list .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: 0px;
    margin-right: 0;
}

@media (max-width:992px) {
    .pro_nav .search_box a {
        right: 15px;
    }
}

@media (max-width:991px) {

    .col-md-kyc-side,
    .col-md-kyc-news-side {
        width: 100%;
        float: left;
    }

    .pro_nav .search_box a {
        top: 14px;
        right: 5px;
    }

    .col-md-kyc-product-list-content,
    .col-md-kyc-news-list-content {
        width: 100%;
        float: right;
        margin-left: 0%;
    }

    .col-md-kyc-news-list-content {
        width: 95%;
        float: none;
        margin-left: 1.5%;
    }

}

@media (max-width:767px) {
    .col-md-kyc-news-list-content {
        width: 95%;
        float: none;
        margin-left: 2.5%;
        margin-top: 180px;
        position: relative;
        min-height: 1px;
    }

    .col-md-kyc-side,
    .col-md-kyc-news-side {
        width: 100%;
        float: left;
        margin-left: 2%;
    }

    .content {
        position: relative;
        margin-top: 0px;
    }

    .news .content {
        width: 97%;
        margin-left: 1%;
    }

    .side .side-toggle {
        margin-left: 1%;
    }

    .side {
        margin-top: 0px;
    }
}

.footer-credit-card .one img {
    height: 40px;
    width: auto;
    margin: auto 10px;
}

.footer-credit-card .jcb img {
    height: 28px;
    width: auto;
    margin: auto 10px;
}

.footer-credit-card .unionpay img {
    height: 28px;
    width: auto;
    margin: auto 10px;
}

.footer-credit-card .masterCard img {
    height: 25px;
    width: auto;
    margin: auto 10px;
}

.cart-icon-1 {
    display: inline;
}

.cart-icon-1 img {
    width: 18px
}

.add-text-area,
.add-text {
    display: inline;
    margin: auto auto auto auto;
    white-space: nowrap;
}

.add-cart-text-area,
.add-cart-text-area-cn {
    display: inline;
    margin: auto auto auto auto;
}

.add-cart-text {
    display: inline;
    margin: auto auto auto 5px;
}

.cart-index-text {
    display: inline;
    margin: auto auto auto 5px;
}

@media(max-width:1130px) {
    .cart-icon-1 {
        display: inline;
        margin-left: 0px;
    }
}

@media(max-width:1123px) {
    .add-text {
        margin: 10px auto auto -160px;
    }
}

@media(max-width:1115px) {
    .add-text {
        margin: 10px auto auto 5px;
    }

    .cart-icon-1 img {
        margin-left: -160px;
    }

    .cart-text {
        margin: auto auto auto 160px;
    }
}

@media(max-width:1110px) {
    .add-text-area {
        margin: auto auto auto -150px;
    }

    .cart-icon-1 {
        margin-left: 0px;
    }

    .cart-icon-1 img {
        margin-left: -10px;
    }
}

@media(max-width:1080px) {
    .add-cart-text-area {
        margin: auto auto auto 10px;
    }

    .add-cart-text-area-cn {
        margin: auto auto auto 10px;
    }
}

@media(max-width:1024px) {
    .add-text {
        margin: 10px auto auto 10px;
    }
}

@media(max-width:991px) {
    .add-text {
        margin: 10px auto auto 5px;
    }

    .add-text-area {
        margin: auto auto auto 35px;
    }
}

@media(max-width:980px) {
    .add-text-area {
        margin: auto auto auto -115px;
    }
}

@media(max-width:768px) {
    .add-text {
        margin: auto auto auto -125px;
    }

    .add-text {
        margin: auto auto auto 5px;
    }

    .cart-index-area {
        margin: auto auto auto 5px;
    }

    .cart-index-area-cn {
        margin: auto auto auto 0px;
    }

    .cart-index-text {
        display: inline;
        margin: auto auto auto 5px;
    }

    .cart-icon-1 img {
        margin-left: 0px;
    }
}

@media(max-width:768px) {
    body.cart.p01 .cart-sec2 .distribution {
        margin-left: 0px;
    }

    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: 0px;
    }
}

@media(max-width:767px) {
    .add-cart-text-area-cn {
        margin: auto auto auto 0px;
    }

    .cart-icon-1 img {
        margin-left: 0px;
    }

    .cart-index-text {
        margin: auto auto auto 5px;
    }

    .add-text {
        margin: auto auto auto 10px;
        position: absolute;
    }

    .add-cart-text {
        position: absolute;
        display: inline;
        margin: auto auto auto 5px;
    }

    .cart-sec .pb-7 {
        padding-bottom: 5px;
    }

    /* body.cart.p01 .table.table-stack>tbody>tr>td.qty .input-group.qtyInput a {
        display: inline;
        text-align: right;
        position: absolute;
    }

    .content .table.table-stack tbody tr td .q1 {
        font-size: 32px;
        margin: -10px auto auto 120px;
    }

    .content .table.table-stack tbody tr td .q2 {
        font-size: 36px;
        margin: -16px auto auto 52px;
    }

    */
    .content .table.table-stack>tbody>tr>.qty {
        width: 100%;
        max-width: 100%;
        margin: 8px auto;
    }

    /*.content .table.table-stack>tbody>tr>.qty .input-group {
        width: 150px;
        max-width: 150px;
    }*/
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-bottom: 15px;
        margin-left: -450px;
        float: left;
        display: block;
        width: 100%;
        text-align: left;
        position: relative;
    }

    body.cart.p01 .cart-sec2 .distribution {
        margin-bottom: 15px;
        margin-left: 0px;
    }

    .add-text {
        margin: auto auto auto -130px;
    }

    .add-text {
        margin: auto auto auto 5px;
    }

    .add-text-area {
        margin: auto auto auto 5px;
    }

    .super-business-area {
        display: block;
        width: 100vw;
        max-width: 100vw;
        text-align: left;
        float: left;
        margin-bottom: 10px;
    }

    .super-business {
        display: block;
        width: 100vw;
        max-width: 100vw;
        text-align: left;
        float: left;
        margin-bottom: 10px;
    }
}

@media(max-width:736px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -420px;
    }
}

@media(max-width:700px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -385px;
    }
}

@media(max-width:680px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -365px;
    }
}

@media(max-width:667px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -350px;
    }
}

@media(max-width:650px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -335px;
    }
}

@media(max-width:640px) {
    .main_content {
        padding: 0px 0 65px;
    }

    .cart-sec .pb-7 {
        padding-bottom: 5px;
    }

    .cart-sec .mt-5 {
        margin-top: 5px;
    }

    .cart-index-text {
        margin: auto auto auto 5px;
        position: absolute;
    }

    .cart-index-area {
        margin: auto auto auto 5px;
        height: 40px;
    }

    .cart-index-area-cn {
        margin: auto auto auto 0px;
        height: 40px;
    }

    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -325px;
    }
}

@media(max-width:600px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -285px;
    }
}

@media(max-width:586px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -270px;
    }
}

@media(max-width:568px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -252px;
    }
}

@media(max-width:540px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -222px;
    }
}

@media(max-width:533px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -217px;
    }
}

@media(max-width:500px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -185px;
    }

    .add-text {
        white-space: normal;
        padding-bottom: 25px;
        margin-bottom: 25px;
    }

    .cart-sec .mt-5 {
        margin-top: 35px;
    }

    .remarks {
        margin-top: 5px;
    }

    .delivery-country {
        width: 100vw;
        max-width: 100vw;
    }

    .form-inline .delivery-country {
        margin: auto auto auto 0px;
    }
}

@media(max-width:480px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -165px;
    }

    .form-inline .delivery-country {
        margin: auto auto auto 0px;
    }

    .form-inline .payment {
        margin: auto auto auto 0px;
    }
}

@media(max-width:460px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -145px;
    }
}

@media(max-width:450px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -135px;
    }
}

@media(max-width:414px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -100px;
    }

    .cart-sec .mt-5 {
        margin-top: 5px;
    }

    body.cart.p02 .form .form-group>label {
        margin-top: 15px;
    }

    .remarks {
        margin: auto auto;
    }
}

@media(max-width:386px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -70px;
    }
}

@media(max-width:375px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -120px;
    }

    .payment {
        width: 100vw;
        max-width: 100vw;
    }

    .form-inline .payment {
        margin: auto auto auto 0px;
    }

    .news .side {
        margin-top: 0px;
    }
}

@media(max-width:360px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -105px;
    }

    .footer-credit-card .one img {
        margin: auto 5px;
    }

    body.cart.p02 .form h3 {
        margin: 75px 0 20px auto;
    }

    .main_content {
        min-height: 600px;
        padding: 0px 0 65px;
    }

    .cart-index-area {
        margin: auto auto auto 5px;
        height: 60px;
    }

    .cart-index-text {
        margin: auto 10px auto 5px;
        position: absolute;
    }

    .form-inline .payment {
        margin: auto auto auto 0px;
    }
}

@media(max-width:350px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -95px;
    }
}

@media(max-width:340px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -85px;
    }
}

@media(max-width:330px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -75px;
    }
}

@media(max-width:320px) {
    body.cart.p01 .cart-sec2 .distribution-tw {
        margin-left: -85px;
    }

    .cart-index-area {
        height: 60px;
    }

    .cart-index-area-cn {
        height: 60px;
    }

    .main_content {
        margin-top: -50px;
    }

    .footer-credit-card .one img {
        height: 35px;
    }

    .footer-credit-card .unionpay img {
        height: 16px;
    }
}

/**/



/*----门店据点 台中艺术街我的脚----*/

.news-store-content {
    margin-top: 250px;
}

@media(max-width:767px) {
    .news-store-content {
        margin-top: 10px;
    }

    .mobile-top {
        margin-top: 10px;
    }
}

body.member.login ul.list-unstyled.com li a {
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    display: inline-block;
    margin: 0 1px;
}

.com li {
    display: inline-block;
}

.com li a {
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    display: inline-block;
    margin: 0 1px;
}

body.member.login ul.list-unstyled.com li.login-wechat a,
.login-wechat a {
    background: url(/images/public/login-wechat.png) no-repeat;
}

body.member.login ul.list-unstyled.com li.login-wechat a:hover,
.login-wechat a:hover {
    background: url(/images/public/login-wechat-hover.png) no-repeat;
}

body.member.login ul.list-unstyled.com li.login-alipay a,
.login-alipay a {
    background: url(/images/public/login-alipay.png) no-repeat;
}

body.member.login ul.list-unstyled.com li.login-alipay a:hover,
.login-alipay a:hover {
    background: url(/images/public/login-alipay-hover.png) no-repeat;
}

#country2 {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid #808080;
    border-radius: 0;
    background-color: transparent;
}

/*產品頁show 加入追蹤icon*/

.track .btn-default {
    color: #808080;
    background-color: transparent;
    border-color: transparent;
}

.track .btn-default:active:hover,
.track .btn-default:focus {
    color: #333;
    background-color: transparent;
    border-color: transparent;
}

.track .fa-heart {
    margin-right: 10px;
}

/*產品描述與留言板*/

.product-description {
    display: block;
    overflow: hidden;
    clear: both;
}

.product-description .nav-register-tabs li {
    width: 50%;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.product-description.nav-register-tabs>li.active>a {
    text-align: center;
}

/*首頁客服*/

.servees-area {
    position: fixed;
    top: 70%;
    right: 10px;
    z-index: 99999
}

.btn-home-servees {
    color: #fff;
    background-color: #333;
    border-color: #333;
    display: inline-block;
    padding: 10px 5px 5px 5px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 42px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 0px 0px 0px 0px;
    background-image: url(../../images/public/sawei-server-white.svg);
    background-repeat: no-repeat;
    background-position-x: 12px;
    background-position-y: 12px;
    background-size: 40px;
}

.home-sever-text {
    margin-top: 35px;
    font-size: 13px;
}

.btn-home-qr {
    color: #fff;
    background-color: #333;
    border-color: #333;
    display: inline-block;
    padding: 10px 8px 5px 9px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 42px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 0px 0px 0px 0px;
    background-image: url(../../images/public/sawei-server-qr.svg);
    background-repeat: no-repeat;
    background-position-x: 12px;
    background-position-y: 12px;
    background-size: 40px;
}

.btn-home-qr:hover,
.btn-home-qr:focus,
.btn-home-servees:hover,
.btn-home-servees:focus {
    color: #fff;
    background-color: #19933d;
    border-color: #19933d;
}

.btn-home-qr br {
    margin-left: 20%
}

/*左側開啟*/
.qr-dropdown,
.home-servers-dropdown {
    position: relative;
}

.qr-dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 130px;
    min-height: 95px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 12px 12px;
    z-index: -1;
    left: -142px;
    top: -10px;
    border-radius: 6px;
}

.home-servers-dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 130px;
    min-height: 95px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 12px 12px;
    z-index: -1;
    left: -142px;
    top: -10px;
    border-radius: 6px;
}

.qr-dropdown:hover .qr-dropdown-content,
.home-servers-dropdown:hover .home-servers-dropdown-content {
    display: block;
}

.qr-dropdown-content::after,
.home-servers-dropdown-content::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
}

.home-qr-content,
.home-servers-content {
    width: 100%;
    max-width: 100%;
    margin: 2px auto;
    text-align: center;
}

.home-qr-text {
    font-size: 13px;
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin: 34px 0px 0px 5px;
}

.qr-size-area {
    margin-top: 0px
}

.qr-size {
    width: 110px;
    max-width: 110px;
}

@media(max-width:767px) {
    .servees-area {
        right: 2px;
        top: 30%;
    }

    .btn-home-servees {
        padding: 25px 0px 5px 5px;
        /*  border: 1px solid transparent;
        border-radius: 0px;
        background-image: url(../../images/public/sawei-server-white.svg);
        background-repeat: no-repeat;*/
        background-position-x: 10px;
        background-position-y: 20px;
        background-size: 40px;
    }

    .home-sever-text {
        margin-top: 25px;
    }

    .btn-home-qr {
        padding: 25px 8px 5px 10px;
        background-position-x: 10px;
        background-position-y: 20px;
        background-size: 40px;
    }

    .home-qr-text {
        margin: 20px 0px 0px 1px;
    }

    .qr-dropdown-content {
        min-width: 120px;
        min-height: 120px;
        padding: 12px 16px;
        top: 0px;
        left: -158px;
    }

    .qr-size-area {
        margin-top: 10px;
    }
}

@media(max-width:533px) {
    .servees-area {
        top: 12%;
    }

    .btn-home-servees {
        padding: 45px 7px 12px 10px;
        border-radius: 0px 0px 0px 0px;
        background-repeat: no-repeat;
        background-position-x: 10px;
        background-size: 55px;
    }

    .btn-home-qr {
        padding: 45px 15px 12px 14px;
        background-position-x: 15px;
    }
}

@media(max-width:414px) {
    .servees-area {
        top: 55%;
    }

    .btn-home-servees {
        padding: 45px 3px 12px 5px;
        border-radius: 0px 0px 0px 0px;
        background-repeat: no-repeat;
        background-position-x: 8px;
        background-size: 45px;
    }

    .btn-home-qr {
        padding: 45px 10px 12px 7px;
        background-position-x: 8px;
        background-size: 45px;
    }
}

@media(max-width:320px) {
    .servees-area {
        top: 50%;
    }
}

@media(max-width:360px) {
    .servees-area {
        top: 50%;
    }
}

/**/

.btn-assess {
    position: relative;
    display: inline-block;
    font-size: 18px;
    border-bottom: 1px dotted #ddd;
}

.btn-assess .btn-assess-text {
    visibility: hidden;
    width: 130px;
    max-width: 130px;
    background-color: #5cafa5;
    color: #fff;
    font-size: 14px;
    text-align: center;
    border-radius: 6px;
    padding: 10px 10px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -65px;
}

.btn-assess .btn-assess-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #5cafa5 transparent transparent transparent;
}

.btn-assess:hover .btn-assess-text {
    visibility: visible;
}

/* 會員專區 商品評價專區*/

input[type="radio"] {
    border-width: 0px;
}

.product-talk-area {
    display: inline-block;
    position: relative;
}

.product-talk-title {
    display: inline-block;
    position: relative;
    margin-left: 0px;
    font-size: 18px;
    line-height: 45px;
    top: -9px;
}

.starability-basic {
    display: inline-block;
    position: relative;
    margin-left: 0px;
    padding: 0;
    border: none
}

.starability-basic>input {
    position: absolute;
    margin-right: -100%;
    opacity: 0
}


.starability-basic>input:focus~label,
.starability-basic>input:hover~label {
    background-position: 0 -30px;
    outline: #fff;
}

.starability-basic>input:checked~label {
    background-position: 0 -30px;
}

/*
.starability-basic>input:checked~label::after{
     position:absolute;
     content:'';
     display: inline-block;
     background-image: url(../../images/public/start-icons.png);
     background-repeat: no-repeat;
    background-position-y: -30px;
     width: 30px;
     height: 30px;
     z-index: 1;
}
*/
/*
.starability-basic>input:focus+label {
    position: relative;
    display: inline-block;
    float: right;
    width: 30px;
    height: 30px;
    color: transparent;
    cursor: pointer;
    background-image: url(../../images/public/start-icons.png);
    background-repeat: no-repeat;
    background-position: 0 -30px;
}*/

.starability-basic>label {
    position: relative;
    display: inline-block;
    float: right;
    width: 30px;
    height: 30px;
    color: transparent;
    cursor: pointer;
    background-image: url(../../images/public/start-icons.png);
    background-repeat: no-repeat;
}

/*
.starability-basic>label::after {
    position:absolute;
    content:'';
     display: inline-block;
    background-image: url(../../images/public/start-icons.png);
    background-repeat: no-repeat;
    background-position-y: -35px;
     width: 30px;
     height: 30px;
     z-index: 1;
    
}*/
@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi),
screen and (-webkit-min-device-pixel-ratio:2) {
    .starability-basic>label {
        background-image: url(../../images/public/icons@2x.png);
        background-size: 30px auto;
        height: 40px;
        background-position-y: 10px;
    }
}

.single-appraise {
    margin-right: 0px;
    margin-left: 0px;
    border-bottom: 1px solid #ddd;
}

.appraise-product-area {
    width: 25%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.appraise-product-content {
    width: 25%;
    float: left;
    position: relative;
    min-height: 1px;
    margin-left: 5%;
    padding-right: 15px;
    padding-left: 15px;
}

/*產品頁商品評價區與*/

.shones-talk-content {
    display: block;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    clear: both;
}

.shones-talk-content .talk-content-text {
    line-height: 35px
}

.shones-talk-content span img {
    margin-top: -11px;
    width: 30px
}

.Jhds {
    position: relative;
    overflow: hidden;
    clear: both;
}

.Jhds .radio {
    opacity: 0;
    position: absolute;
    overflow: hidden;
}

.tab-outer {
    overflow: hidden;
    clear: both;
}

.Jhds .radio:nth-of-type(1):checked~.tab-title label:nth-of-type(1),
.Jhds .radio:nth-of-type(2):checked~.tab-title label:nth-of-type(2),
.Jhds .radio:nth-of-type(3):checked~.tab-title label:nth-of-type(3) {
    color: #333;
    border-bottom: 2px solid #333;
    overflow: hidden;
    clear: both;
}

.Jhds .radio:nth-of-type(1):checked~.tab-outer .tab-inner:nth-of-type(1),
.Jhds .radio:nth-of-type(2):checked~.tab-outer .tab-inner:nth-of-type(2),
.Jhds .radio:nth-of-type(3):checked~.tab-outer .tab-inner:nth-of-type(3) {
    display: block;
    list-style: none;
    overflow: hidden;
    clear: both;
}

.Jhds .tab-title {
    font-size: 0;
    padding: 15px;
    text-align: center;
    overflow: hidden;
    clear: both;
}

.Jhds .tab-title label {
    display: inline-block;
    color: #333;
    text-align: center;
    background-color: #fff;
    font-size: 14px;
    width: 50%;
    padding: 5px 0;
    border-bottom: 2px solid #eee;
    cursor: pointer;
    overflow: hidden;
    clear: both;
}

.Jhds .tab-title label:first-child {
    border-right: 0 none;
}

.Jhds .tab-title label:last-child {
    border-left: 0 none;
}

.Jhds .tab-outer .tab-inner {
    display: none;
    overflow: hidden;
    clear: both;
}

.Jhds .tab-inner li {
    position: relative;
    overflow: hidden;
    clear: both;
    background-color: #fff;
}

.tab-inner li span {
    display: inline-block;
    font-size: 16px;
    line-height: 35px;
}

.tab-inner li span img {
    margin-top: -8px;
    width: 15px;
}

/*.Jhds .title:after,
        .Jhds .tab-inner li:before,
        .Jhds .tab-inner li:last-child:after{
            position: absolute;
            left: 0;
            content: '';
            width: 100%;
            height: 1px;
            font-size: 0;
            background-color: #d9d9d9;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
        .Jhds .tab-inner li:before {
            top: 0;
        }
        .Jhds .title:after,
        .Jhds .tab-inner li:last-child:after {
            bottom: 0;
        }*/

.Jhds .title {
    padding: 10px;
    position: relative;
    overflow: hidden;
    clear: both;
}

.Jhds .title .Jhds-num {
    color: #333;
    white-space: nowrap;
}

.Jhds .title .time {
    float: right;
    display: inline-block;
}

.Jhds .list {
    padding: 10px 60px 10px 10px;
    position: relative;
    color: #252525;
    display: block;
}

.Jhds .price {
    color: #f90;
    margin-top: 5px;
}

.Jhds .num {
    position: absolute;
    right: 30px;
    top: 50%;
    height: 20px;
    line-height: 20px;
    margin-top: -10px;
}

.arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -6px;
    width: 10px;
    height: 10px;
    border-left: 1px solid #cfcfcf;
    border-top: 1px solid #cfcfcf;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

/*.signle-product-talk{
    /*border-top: 1px dotted grey;
    border-bottom: 1px dotted grey;*/

/* padding:10px;
}*/

.signle-product-talk-area {
    margin: 0px auto auto auto;
}

.signle-product-talk {
    border-bottom: 1px dashed #ddd;
    padding-left: 85px;
}

.signle-product-managertalk {
    padding-left: 85px;
    border-bottom: 3px solid #b6dfdc;
}

/*
.signle-product-manager {
    border-bottom: 3px dashed #b6dfdc;
}*/
.signle-product-manager img {
    width: 50px;
    margin-top: 10px;
    margin-right: 10px;
}

.product-point-area {
    margin: 0px auto auto 0px;
}

.tab-inner li .group {
    /*  border: 1px solid #b6dfdc;
    border-bottom: 3px dashed #b6dfdc;*/
    padding: 10px;
    margin: 5px auto;
    clear: both;
    overflow: hidden;
}

/*評價提示*/
.assess-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #b6dfdc;
}

.assess-tooltip .assess-tooltiptext {
    visibility: hidden;
    width: 190px;
    background-color: #b6dfdc;
    color: #333;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -95px;
}

.assess-tooltip .assess-tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #b6dfdc transparent transparent transparent;
}

.assess-tooltip:hover .assess-tooltiptext {
    visibility: visible;
}



@media screen and (max-width:370px) {
    .Jhds .title .time {
        float: none;
    }
}

@media (max-width:991px) {
    .tab-inner li span img {
        width: 27px;
    }
}

.product-point-area br {
    display: none;
}

@media (max-width:767px) {
    .signle-product-manager img {
        margin-left: -30px;
    }

    .signle-product-talk,
    .signle-product-managertalk {
        padding-left: 65px;
    }

    .product-point-area br {
        display: block;
    }
}

@media (max-width:732px) {

    .signle-product-talk,
    .signle-product-managertalk {
        padding-left: 60px;
    }
}

@media (max-width:723px) {
    .tab-inner li span img {
        width: 25px;
    }
}

@media (max-width:694px) {
    .tab-inner li span img {
        width: 24px;
    }
}

@media (max-width:680px) {
    .tab-inner li span img {
        width: 20px;
    }
}

@media (max-width:676px) {

    .signle-product-talk,
    .signle-product-managertalk {
        padding-left: 56px;
    }
}

@media (max-width:640px) {

    .signle-product-talk,
    .signle-product-managertalk {
        padding-left: 51px;
    }
}

@media (max-width:624px) {
    .tab-inner li span img {
        width: 18px;
    }
}

@media (max-width:560px) {

    .signle-product-talk,
    .signle-product-managertalk {
        padding-left: 47px;
    }
}

@media (max-width:533px) {

    .signle-product-talk,
    .signle-product-managertalk {
        padding-left: 42px;
    }
}

@media (max-width:414px) {
    .signle-product-manager img {
        margin-left: -50px;
    }

    .signle-product-talk,
    .signle-product-managertalk {
        padding-left: 35px;
    }
}

@media (max-width:386px) {

    .signle-product-talk,
    .signle-product-managertalk {
        padding-left: 32px;
    }
}

@media (max-width:379px) {

    .signle-product-talk,
    .signle-product-managertalk {
        padding-left: 2px;
    }

}



.login,
.register,
.forget,
.active {
    background-image: url(../../images/home_edit/three/bg-design-2.svg);
    background-repeat: no-repeat;
    background-position-y: 450px;
    background-size: 720px;
    background-position-x: 460px;
}

.contact {
    background-image: url(../../images/home_edit/three/contact-bg.svg);
    background-repeat: no-repeat;
    background-position-y: 300px;
    background-size: 600px;
    background-position-x: 450px;
}

.footer-container .contact {
    background-image: none;
}
.designshone {   
    background-repeat: no-repeat;
    background-position-y: 300px;
    background-size: 600px;
    background-position-x: 450px;
}

.footer-container .designshone {
    background-image: none;
}
.login-member-bg {
    background-color: #b9e6e2;
    border-radius: 20px;
}

.login-member-bg .h1 {
    text-align: center;
    margin-top: 35px;
}

@media(max-width:1500px) {
    .contact {
        background-position-y: 300px;
        background-position-x: 250px;
    }
}

@media(max-width:1440px) {
    .contact {
        background-position-y: 350px;
        background-position-x: 250px;
    }
}

@media(max-width:1366px) {
    .contact {
        background-position-y: 250px;
        background-position-x: 200px;
    }
}

@media(max-width:1024px) {
    .contact {
        background-size: 500px;
        background-position-y: 190px;
        background-position-x: 30px;
    }
}

/**/

.sidebar {
    margin: 30px auto 30px auto;
}

.inline-ul {
    font-size: 0;
    /* 所有浏览器 */
    *word-spacing: -1px;
    /* IE6、7 */
}

.inline-ul ul li {
    font-size: 12px;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    /* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
    .inline-ul {
        letter-spacing: -5px;
        /* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
    }
}

.widget-title {
    font-size: 13px;
    font-weight: normal;
    color: #888888;
    padding: 0px 20px 0px;
}

.widget-tab .widget-title {
    font-size: 0;
}

.widget-tab .widget-box {
    margin: 0 20px 20px;
}

.widget-tab .widget-title ul li {
    margin-left: 0;
    width: 30%;
    text-align: center;
    margin-right: 1.3%;
    padding: 8px 1%;
}

.widget-tab .widget-title ul li:hover {
    background: #F7F7F7;
    border-radius: 10px 10px 0px 0px;
}

.widget-tab .widget-title label {
    cursor: pointer;
    display: block;
    font-size: 1.9rem;
    border-radius: 10px 10px 0px 0px;
}

.widget-tab .widget-title ul li.active {
    background: #F7F7F7
}

.widget-tab input {
    float: right;
    margin: 10px;

}

#new,
#hot {
    display: none
}

.widget-tab .widget-box .new-list,
.widget-tab .widget-box .hot-list {
    display: none
}

#new:checked~.widget-title .new,
#hot:checked~.widget-title .hot,
#random:checked~.widget-title .random {
    background: #fff;
    border-radius: 10px 10px 0px 0px;
}

#new:checked~.widget-box .new-list,
#hot:checked~.widget-box .hot-list,
#random:checked~.widget-box .random-list {
    display: block;
    background-color: #fff;
}

.widget-box ul li a {
    padding-left: 20px;
}

.widget-tab .widget-box ul {
    display: block;
}

.member-sec {
    padding: 50px auto 20px auto;
    background-color: #FFF;
}

body.member.login .form-group.login-btn {
    padding: 0px auto 30px auto;
    margin: 0px auto 30px auto;
}

.mumber-icon img {
    width: 35px;
}

.mumber-account {
    margin-left: 5%
}

.login-footer .text-center {
    margin: 20px auto;
}

.munber-qr .glyphicon-qrcode {
    width: 35px;
    font-size: 32px;
    float: right;
    margin-right: 120px;
    margin-top: 80px;
    display: none;
}

.modal-body {
    margin: auto;
    text-align: center
}

.modal-number-login {
    width: 100%;
    max-width: 100%;
    margin: auto;
    text-align: center
}

.modal-header h4,
.modal-number-login img {
    width: 100%;
    max-width: 100%;
    margin: auto;
    text-align: center
}

.active-form {
    padding: 10px auto;
    background-color: #fff;
}

.active-form-content {
    margin: 30px auto;
}

.active-form-content.member-sec {
    margin: 30px auto;
}

body.member.active .form-border {
    background: 0 0;
    border: none;
    width: 85%;
    margin: 30px auto;
}

body.member.active .form-horizontal {
    margin: 30px auto;
}

.active-form-content h1 {
    margin: 30px auto;
    padding-top: 30px;
    padding-left: 40px;
}

body.member .btn.btn-primary {
    color: #3e3431;
    border-radius: 0;
    text-shadow: none;
    box-shadow: none;
    border-bottom: 1px solid #3e3431;
    margin-bottom: 0px
}

.hot .glyphicon-qrcode {
    font-size: 18px;
}

.hot-list .modal-number-login img {
    width: 30%;
    max-width: 30%;
    margin: auto auto;
    text-align: center
}

.hot-list .modal-number-login {
    margin: auto auto;
}

@media(max-width:768px) {
    .login-member-bg {
        margin: 100px auto auto 10%;
        width: 80%;
        max-width: 80%;
    }

    .login-member-bg .h1 {
        margin-left: 10%;

    }
}

@media(max-width:586px) {
    .login-member-bg {
        margin: 100px auto auto 1%;
        width: 98%;
        max-width: 98%;
    }

    .login-member-bg .h1 {
        margin-left: 0%;
    }
}

@media(max-width:480px) {
    .widget-box ul li a {
        padding-left: 10px;
    }
}

@media(max-width:440px) {

    .widget-tab .widget-title label {
        font-size: 1.7rem;
        white-space: nowrap;
    }
}

@media(max-width:360px) {
    .widget-box ul li a {
        padding-left: 2px;
    }
}

@media(max-width:320px) {
    .widget-tab .widget-title label {
        font-size: 1.5rem;
    }
}

@media(max-width:300px) {
    .widget-box ul li a {
        padding-left: 1px;
    }
}

.aaaa {
    display: none;
}

.sw-search {
    font-size: 20px;
}

@media(max-width:1120px) {
    .sw-search {
        font-size: 19px;
    }
}

.sw-search a {
    cursor: pointer;
}

@media(max-width:767px) {
    .aaaa {
        display: block;
    }
}



/**/
.sw-number-list>li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    margin: auto 25px;
}

.sw-number-list li a {
    width: 150px;
    text-align: center;
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
}

.sw-number-list li a img {
    margin-bottom: 15px;
    border-radius: 12px;
    background-color: #eee;
    padding: 20px 15px;
}

.sw-number-list li a img:hover {
    border: 2px solid #333;
}

.sw-number-list li a .fas,
.sw-number-list li a .far {
    /* padding: 20px; */
    font-size: 36px;
    width: 80px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    height: 80px;
    line-height: 80px;
}

.sw-number-list li a .fa:hover {
    opacity: 0.7;
}

.sw-number-list li a div {
    margin-bottom: 20px;
}

/*积分查询*/
.fa-coins {
    background: #eee;
    color: red;
}

.fa-coins:hover {
    background: #ff6600;
    color: #eee;
}

/*推荐码*/
.fa-qrcode {
    background: #eee;
    color: #E91E63;
}

.fa-qrcode:hover {
    background: #ff6600;
    color: #eee;
}

/*登出*/
.fa-sign-in-alt {
    background: #eee;
    color: green;
}

.fa-sign-in-alt:hover {
    background: green;
    color: #eee;
}

/*购物金查询*/
.fa-dollar-sign {
    background: #eee;
    color: #FF5722;
}

.fa-dollar-sign:hover {
    background: #FF5722;
    color: #eee;
}

/*订单查询*/
.fa-clipboard-list {
    background: #eee;
    color: #3f51b5;
}

.fa-clipboard-list:hover {
    background: #3f51b5;
    color: #eee;
}

/*会员资料修改*/
.fa-pen-square {
    color: #8BC34A;
    background: #eee;
}

.fa-pen-square:hover {
    color: #eee;
    background: #8BC34A;
}

/*商品評價*/
.fa-star {
    background: #eee;
    color: #FF9800;
}

.contact-box .h2 {
    margin-left: 14%;
}


/*-------------------會員註冊--------------------------*/
.active-form-content.form-horizontal.form-group {
    margin-bottom: 10px;
}

.gender-area {
    display: inline-block;
    width: 40%;
    margin-left: 11%;
}

.phone-area {
    display: inline-block;
    width: 55%;
    margin-left: -48%;
}

.nmber-password {
    display: inline-block;
    width: 50%;
    margin-left: 6.4%;
}

.nmber-password.form-group .mumber-icon img {
    margin-left: 5%;
}

.nmber-confirm-password {
    display: inline-block;
    width: 45%;
    margin-left: -8%;
}

.nmber-confirm-password.mumber-icon img {
    margin-left: 5%;
}

.mumber-birthday {
    margin-top: 8px;
}

.mumber-birthday .form-inline .form-control {
    display: inline-block;
    width: 102px;
    vertical-align: middle;
}

/*radio 美化*/
.register .gender-area .form-group .radio-inline input:checked~.checkmark {
    background-color: #fff;
}

.register .gender-area .form-group .radio-inline input:checked~.checkmark:after {
    display: block;
}

.register .gender-area .checkmark {
    position: absolute;
    top: 7px;
    left: -5px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid #9e9e9e;
}

.register .gender-area .checkmark:after {
    top: 5px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0075ff;
}

.register .gender-area .form-group .radio-inline input[type=radio] {
    display: none;
}

.register .gender-area .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.gender-item {
    margin-top: 10px;
}

/*checkbox 美化*/
.register .number-subscription .checkbox {
    margin-left: 35px
}

.register .number-subscription .checkbox input:checked~.checkmark,
.register .number-agree .checkbox input:checked~.checkmark {
    background-color: #fff;
}

.register .number-subscription .checkbox input:checked~.checkmark:after,
.register .number-agree .checkbox input:checked~.checkmark:after {
    display: block;
}

.register .number-subscription .checkmark {
    position: absolute;
    top: 7px;
    left: -30px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid #9e9e9e;
}

.register .number-agree .checkmark {
    position: absolute;
    top: 7px;
    left: -10px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid #9e9e9e;
}

.register .number-subscription .checkmark:after,
.register .number-agree .checkmark:after {
    top: -18px;
    left: -2px;
    width: 8px;
    height: 8px;
    color: #0075ff;
    font-weight: bolder;
    font-size: 29px;
}

.register .number-subscription .checkbox input[type=checkbox],
.register .number-agree .checkbox input[type=checkbox] {
    display: none;
}

.register .number-subscription .checkmark:after,
.register .number-agree .checkmark:after {
    content: "✓";
    position: absolute;
    display: none;
}

.number-submit-area input {
    margin: auto 2px;
}



.register-form {
    padding: 10px auto;
    /* background-color: #fff;
    border: 10px solid#b9e6e2;*/
    border-radius: 15px;
}

.register-form-content {
    margin: auto auto;
    background-color: #fff;
    border: 10px solid#b9e6e2;
    border-radius: 15px;
}

.register-form-content h1 {
    margin: 10px auto;
    padding-top: 10px;
    text-align: center;
}

@media(max-width:767px) {
    .register-form-content .form-horizontal {
        width: 80%;
        max-width: 80%;
        margin-left: 10%;
    }

    .nmber-password {
        margin-left: 0%;
    }

    .nmber-confirm-password {
        margin-left: 4%;
    }

    .gender-area {
        width: 50%;
        margin-left: 0%;
    }
}






/*===========================================================================*/

.number-progress {
    counter-reset: step;
    font-size: 16px;
}

.number-progress i {
    font-size: 45px;
}

.number-progress li {
    list-style-type: none;
    float: left;
    width: 33.33%;
    position: relative;
    text-align: center;
}

.number-progress li:before {
    content: counter(step);
    counter-increment: step;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ddd;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: #fff;
}

.number-progress li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.number-progress li:first-child:after {
    content: none;
}

.number-progress li.active {
    color: green;
}

.number-progress li.active:before {
    border-color: green;
}

.number-progress li.active+li:after {
    background-color: green;
}




/*sw-number-progress*/
.sw-number-progress {
    counter-reset: step;
}

.sw-number-progress li {
    list-style-type: none;
    float: left;
    width: 33.33%;
    position: relative;
    text-align: center;
}

.sw-number-progress li:before {
    content: '';
    /* counter-increment: step;*/
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ddd;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: #fff;
}

.sw-number-progress li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.sw-number-progress li.active {
    color: green;
    position: relative;
}

.sw-number-progress .fas {
    font-size: 32px;
    position: absolute;
}

.sw-number-progress li:first-child:after {
    content: none;
}

.sw-number-progress li.active {
    color: green;
}

.sw-number-progress li.active:before {
    border-color: green;
}

.sw-number-progress li.active+li:after {
    background-color: green;
}

@media(max-width:533px) {

    .nmber-password,
    .nmber-confirm-password {
        width: 110%;
        margin-left: -5%;
    }

    .nmber-confirm-password {
        margin-top: 10px;
    }

    .phone-area {
        display: block;
        width: 110%;
        margin-left: -5%;
    }

    .mumber-birthday .col-xs-12 {
        width: 100%;
        margin-left: 0%;
        padding-right: 0px;
        padding-left: 0px;
    }

}



/**/
.sw-number-progresss {
    font-size: 14px;
}

.sw-number-progresss li {
    list-style-type: none;
    float: left;
    width: 33.33%;
    position: relative;
    text-align: center;
}

.sw-number-progresss li .fas {
    font-size: 36px;
}

.sw-number-progresss li+li:after {
    content: '';
    background-color: green;
    width: 350px;
    height: 2px;
}



/*說明資料版面調整*/
.abouts {
    width: 13%;
    text-align: center;
}

.aboutus {
    width: 13.5%;
    text-align: left;
}

.aboutus h3 {
    font-size: 2rem;
    border-bottom: 1px solid grey;
}

.aboutus .sider_nav nav>li>a {
    border-bottom: 1px solid grey;
}

.side .nav>li {
    border-bottom: 1px solid grey;
}

@media(max-width:1199px) {
    .abouts {
        width: 16.6%;
        text-align: center;
        white-space: nowrap;
        display: none;
    }
}

@media (max-width:991px) {
    .aboutus {
        width: 100%;
    }

    .aboutus h3,
    .side .nav>li {
        border-bottom: 0px solid #fff;
    }

    .side.menu-open .nav {
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }
}

/**/
@media (min-width: 768px) {
    .sw-modal-dialog {
        width: 600px;
        margin: 180px auto;
    }
}

.sw-modal-header {
    border-bottom: 1px solid #089a3f;
    background-color: #089a3f;
    color: #fff;
    font-weight: bolder;
}

.sw-modal-footer {
    border-top: 1px solid #089a3f;
    background-color: #089a3f;
}

.sw-modal-header .close span {
    color: #fff;
    font-size: 32px;
}


.member-modify-footer {
    font-size: 16px;
}

/**/
.sw-contact-content {
    border-top: 1px solid #ddd;
    width: 80%;
    max-width: 80%;
    font-size: 16px;
    line-height: 30px;
    margin: 30px auto 0px 70px;
    padding-top: 10px;
    padding-bottom: 0px;
    text-align: center;
}

.sw-contact-content ul {
    margin: auto;
    text-align: left;
}

/**/
.sw-member-terms-of-service-sp-content {
    margin: auto auto auto 30px;
}

.sw-member-terms-of-service-content ol {
    margin: auto auto auto 50px;
    line-height: 35px
}

.sw-member-terms-of-service-smill-contentol ol {
    margin: auto auto auto 30px;
    line-height: 35px
}


/*myModalCart*/
#ProductSize .modal-dialog .modal-content .modal-body,
#myModalCart .modal-dialog .modal-content .modal-body,
#NumberCaptcha .modal-dialog .modal-content .modal-body,
.safe .modal-dialog .modal-content .modal-body,
#ProductSize.modal-dialog .modal-content .modal-body {
    padding: 50px auto;
    margin: 50px auto;
    font-size: 21px;
}

#myModalCart .modal-dialog .modal-content .modal-body .fa-shopping-cart,
.safe .modal-dialog .modal-content .modal-body .fa-envelope,
.safe .modal-dialog .modal-content .modal-body .fa-shopping-cart,
.safe .modal-dialog .modal-content .modal-body .fa-key,
#ProductSize .modal-dialog .modal-content .modal-body .fa-border-style {
    font-size: 36px;
}

#myModalCart .modal-dialog .modal-content .modal-body .fa-shopping-cart {
    color: #ff5722;
}

#ProductSize .modal-dialog .modal-content .modal-body .fa-border-style,
.safe .modal-dialog .modal-content .modal-body .fa-envelope,
.safe .modal-dialog .modal-content .modal-body .fa-key,
.safe .modal-dialog .modal-content .modal-body .fa-check-circle,
.safe .modal-dialog .modal-content .modal-body .fa-border-style {
    color: #079a3e;
}

.captcha img {
    width: 60px;
    margin: auto auto 20px auto;
    text-align: center;
}



/*購物結帳頁面*/

#div_add_add .form-group {
    margin-right: 0px;
    margin-left: 0px;
    overflow: hidden;
}

#div_add_add .form-group .col-md-3 {
    width: 20%;
}

.fancybox-inner {
    overflow: hidden;
    clear: both;
    padding: 100px;
}

.fancybox-outer {
    position: relative;
    padding: 100px;
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, .5);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .5);
    overflow: hidden;
    clear: both;
    padding: 100px;
}

#btn_adds{
    margin-right: 18%;
    color: #fff;
    background-color: #079a3e;
}

.fancybox-close {
    top: 0px;
    right: 0px;
}

.fixed-table-body.fixed-table-loading {
    padding: 80px;
}

.fixed-table-body {
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100%;
    padding: 150px;
}

.fancybox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
}

#add_uname,
#add_phone,
#add_detail,
#add_zipcode {
    background-color: #FFF;
}

#province,
#city,
#county {
    height: 35px;
    background-color: #FFF;
}

#btn_adds {
    margin-bottom: 30px
}

#form_add {
    margin-top: 50px;
}

/* cart/index 區域*/
@media(max-width:991px) {
    .cart-container {
        width: 900px;
        margin-bottom: 20px
    }
}

@media(max-width:900px) {
    .cart-container {
        width: 870px;
    }
}

@media (max-width:870px) {
    .cart-container {
        width: 800px;
    }
}

@media(max-width:768px) {
    .cart-container {
        width: 700px;
    }
}

@media(max-width:768px) {
    .fixed-table-body {
        padding: 50px 0px;
        /*上下距離30px 左右0px*/
    }
}

.number-menu {
    font-size: 16px;
    margin: auto auto 30px auto;
    width: 100%
}

@media(max-width:767px) {
    .number-menu span i {
        display: none;
    }
}

@media(max-width:640px) {
    .sw-contact-content {
        margin: 30px auto 0px auto;
        text-align: center;
    }
}

@media(max-width:414px) {
    .sw-contact-content {
        width: 100%;
        max-width: 100%;
        margin: 30px auto 0px auto;
        text-align: center;
    }
}

@media(max-width:350px) {
    .sw-contact-content {
        font-size: 15px
    }
}

@media(max-width:335px) {
    .side {
        margin-top: 30px;
    }

    .sw-contact-content {
        font-size: 14px
    }
}

.evaluation {
    margin: auto auto;
    text-align: center;
    font-size: 21px;
}

.evaluation-ul div {
    line-height: 35px;
    font-size: 18px;
}

.evaluation-ul li {
    margin: 15px auto auto auto;
    line-height: 35px;
    font-size: 18px;
    text-align: center;
}

.evaluation-ul li .btn {
    display: inline-block;
    padding: 10px 22px;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #333;
    background-color: #fff;
    border-color: #b9e6e2;
}

.evaluation-ul li .btn:hover,
.evaluation-ul li .btn:focus {
    background-color: #b9e6e2;
    color: #3f51b5;
    font-weight: bolder;
}

.product_assess {
    margin: 15px auto auto auto;
    line-height: 35px;
    font-size: 18px;
    text-align: left;
}

.number-assess-contact {
    line-height: 35px;
    font-size: 18px;
}

.number-single-assess-contact {
    margin: 0px auto 100px auto;

}

.product-talk-err {
    color: red;
    font-size: 13px;

}

.product-talk-star {
    color: red;
    font-size: 15px
}

.text-ff5722 {
    color: #f5ab23;
}

.text-ff5722 .text {
    margin-top: -30px;
}

.point-star {
    margin: -20px auto 0px auto;
}

.point-star-title {
    display: inline-block;
    position: relative;
    margin-left: 0px;
    font-size: 18px;
    line-height: 45px;
    top: 7px;
}

.product-talk-title-success {
    display: inline-block;
    position: relative;
    margin-left: 0px;
    font-size: 18px;
    line-height: 45px;
    top: 0px;
}

.text-ff5722 img {
    width: 25px;
    margin-top: -8px;
}

.starability-basic .text img {
    width: 30px;
    margin-top: -10px;
}

.text-green {
    color: green;
}

.btn-send {
    margin: auto auto 35px 60px;
}

#send {
    width: 120px;
    height: 35px;
}

.mumber-order-area .table thead tr {
    height: 45px;
}

.assess {
    font-size: 13px;
}

.assess-area {
    padding: 20px 20px;
    border-bottom: 1px solid #f5ab23;
    word-break: break-all;
    /*文字換行*/
}

.assess-admin-area {
    padding: 20px 20px;
}

.assess-big-area {
    border-bottom: 1px solid green;
    margin-top: 15px
}

.assess-img-area {
    border-bottom: 1px solid green;
    margin-top: 15px
}

/*標題*/
.assess-message-title {
    font-size: 16px;
    margin-top: 25px;
}

.assess-message {
    margin: 15px auto;
    padding: 30px 10px;
    background-color: #eee;
    border-radius: 10px;
}


/*評價商品商品區前端*/
.group .col-xs-1,
.group .col-sm-1,
.group .col-md-4,
.group .col-sm-4 {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 16px;
    text-align: center;
    margin: auto auto;
}

.group .col-xs-11,
.group .col-sm-11 {
    padding-right: 10px;
    padding-left: 10px;
}

.consumer-product-talk-area {
    border-top: 1px solid #b9e6e2;
    border-right: 1px solid #b9e6e2;
    border-left: 1px solid #b9e6e2;
    border-bottom: 1px dotted #b9e6e2;
    /*dotted*/
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    margin-top: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    overflow: hidden;
    clear: both;
}
.consumer-product-talk-area .col-xs-11 {
 padding-right: 10px;
 padding-left: 10px;
 font-size: 16px;
 text-align: center;
 margin: auto auto;
}
.avatar {
    width: 30px;
    text-align: center;
    margin: auto auto;

}

.admin-avatar {
    width: 35px;
    text-align: center;
    margin: auto auto;
    background-color: #fff;
    border-radius: 50%;
    height: 35px;
}

.admin-logo {
    width: 35px;
}

/**/
.product-talk-consumer {
    width: 100%;
    max-width: 100%;
    border-right: 1px solid #b9e6e2;
    border-left: 1px solid #b9e6e2;
    border-bottom: 1px solid #b9e6e2;
    margin-top: -3px;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    border-top: 4px solid #fff;
}

.product-talk-consumer-notfull {
    width: 100%;
    max-width: 100%;
    border-right: 1px solid #b9e6e2;
    border-left: 1px solid #b9e6e2;
    /* border-bottom: 1px solid #b9e6e2; */
    margin-top: 43px;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    border-top: 4px solid #fff;
}

.signle-product-manager {
    border-right: 1px solid #b9e6e2;
    border-left: 1px solid #b9e6e2;
    background-color: #e0f7fa;

}

.product-talk-admin {
    border-bottom: 1px solid #b9e6e2;
    width: 100%;
    max-width: 100%;
    margin-bottom: 15px;
    padding-bottom: 25px;
    border-right: 1px solid #b9e6e2;
    border-left: 1px solid #b9e6e2;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #e0f7fa
}

.product-talk-admin-content {
    margin: 0px auto 10px 121px;
    font-size: 16px;
    width: 82%;
    max-width: 82%;
    word-break: break-all;
    /*文字換行*/
    padding-top: 10px;
}

.group .rows .product-talk-consumer-content {
    margin: 0px auto 10px 121px;
    font-size: 16px;
    width: 82%;
    max-width: 82%;
    word-break: break-all;
    /*文字換行*/
    padding-top: 10px;
    border-top: 1px dashed #b9e6e2;
}

.product-talk-consumer-content {
    margin: 0px auto 10px 121px;
    font-size: 16px;
    width: 82%;
    max-width: 82%;
    word-break: break-all;
    /*文字換行*/
    padding-top: 10px;
    border-top: 1px dashed #b9e6e2;
}

.btn-border-red {
    color: #333333;
    background-color: #ffffff;
    border-color: red;
}

.btn-border-red:hover,
.btn-border-red:focus {
    color: #fff;
    background-color: red;
    border-color: red;
}

.assess-buildtime {
    font-size: 12px;
    margin: 10px 35px 10px auto;
}

.consumer-assess-buildtime {
    font-size: 12px;
    margin: 10px 85px 10px auto;
    border-right: 1px solid #b9e6e2;
}

.product-talk-message-area {
    border: 1px solid red;
}

.assess-list {
    font-size: 16px;
    margin: 10px auto 30px auto;
    text-align: center;
    clear: both;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.consumer-product-talk-area .no-fullmarks {
    margin: auto auto auto -1.3%;
}

.consumer-product-talk-area .no-fullmarks-three {
    margin: auto auto auto -2.4%;
}

.consumer-product-talk-area .no-fullmarks-two {
    margin: auto auto auto -3.4%;
}

.consumer-product-talk-area .no-fullmarks-one {
    margin: auto auto auto -4.4%;
}

.consumer-product-talk-area .fullmarks {
    margin: auto auto auto -2.1%;
}

.dssdas {
    margin-bottom: 20px
}

.five-star,
.four-star,
.three-star,
.two-star,
.one-star {
    background: url(/images/avatar/start-icon-one-a.png) center left;
    background-size: 18px;
    height: 15px;
    display: block;
    line-height: 20px;
    right: 0px;
    top: 0px;
    margin-left: 0px;
    margin-top: 10px;
}

.five-star {
    background-position-x: 0px;
    background-position-y: 1px;
    width: 90px;
    margin-top: 0px;
}

.four-star {
    background-position-x: 0px;
    background-position-y: 1px;
    width: 72px;
    margin-top: 0px;
}

.four-star-area {
    margin-left: 10%;

}

.three-star {
    background-position-x: 0px;
    background-position-y: 1px;
    width: 52px;
    margin-top: 0px;
}

.three-star-area {
    margin-left: 21%;
    margin-top: 35px;
}

.two-star {
    background-position-x: 0px;
    background-position-y: 1px;
    width: 32px;
}

.two-star-area {
    margin-left: 31%;
    margin-top: 35px;
}

.one-star {
    background-position-x: 0px;
    background-position-y: 1px;
    width: 18px;
    margin-top: 0px;
}

.one-star-area {
    margin-left: 42%;
    margin-top: 35px;
}

.btn-submittalk-area {
    margin: auto auto;
    text-align: center;
}

@media(max-width:1199px) {

    .group .col-md-4,
    .group .col-sm-4 {
        width: 100%;
        max-width: 100%;
    }

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        margin-left: 65px;
    }

    .consumer-product-talk-area .fullmarks {
        margin: auto auto auto 0%;
    }

    .group .col-xs-1,
    .group .col-sm-1,
    .group .col-md-4,
    .group .col-sm-4 {
        font-size: 14px;
    }

    .group .col-sm-1 {
        width: 12%;
    }

    .product-talk-consumer-content {
        width: 72%;
        max-width: 72%;
        border-top: 1px dashed #b9e6e2;
    }

    .five-star-ml {
        margin-left: 0.5%;
    }

    .four-star-ml {
        margin-left: -2.7%;
    }

    .three-star-ml {
        margin-left: -5.6%;
    }

    .two-star-ml {
        margin-left: -8.8%;
    }

    .one-star-ml {
        margin-left: -10.9%;
    }
}

@media(max-width:991px) {

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        margin-left: 60px;
    }

    .group .col-xs-1,
    .group .col-sm-1,
    .group .col-md-4,
    .group .col-sm-4 {
        font-size: 12px;
    }

    .five-star-ml {
        margin-left: 1%;
    }

    .four-star-ml {
        margin-left: -2%;
    }

    .three-star-ml {
        margin-left: -4.9%;
    }

    .two-star-ml {
        margin-left: -8.3%;
    }

    .one-star-ml {
        margin-left: -10.7%;
    }
}

@media(max-width:812px) {
    .five-star-ml {
        margin-left: 1.5%;
    }

    .four-star-ml {
        margin-left: -1.5%;
    }

    .three-star-ml {
        margin-left: -4.9%;
    }

    .two-star-ml {
        margin-left: -8.4%;
    }

    .one-star-ml {
        margin-left: -11%;
    }
}

@media(max-width:768px) {

    /*  .tab-inner li span{
        width: 100%;
        max-width: 100%;
    }*/
    .group .col-md-4,
    .group .col-sm-4 {
        width: 100%;
        max-width: 100%;
    }

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        margin-left: 59px;
    }

    .assess-buildtime {
        font-size: 12px;
        margin: 10px 15px 10px auto;
    }
}

@media(max-width:767px) {

    .group .col-xs-1,
    .group .col-sm-1 {
        width: 13%;
    }

    .group .col-xs-11,
    .group .col-sm-11 {
        width: 87%;
    }

    .consumer-assess-buildtime {
        margin: 10px 85px 10px auto;
    }

    .consumer-product-talk-area .no-fullmarks {
        margin: auto auto auto -2.3%;
    }

    .assess-buildtime {
        margin: 10px 18px 10px auto;
    }

    .group .col-md-4,
    .group .col-sm-4 {
        width: 100%;
        max-width: 100%;
        margin-left: -18%;
    }
}

@media(max-width:736px) {
    .five-star-ml {
        margin-left: 0.5%;
    }

    .four-star-ml {
        margin-left: -2%;
    }

    .three-star-ml {
        margin-left: -6%;
    }

    .two-star-ml {
        margin-left: -9.5%;
    }

    .one-star-ml {
        margin-left: -11.8%;
    }
}

@media(max-width:732px) {
    .consumer-assess-buildtime {
        margin: 10px 78px 10px auto;
    }

    .assess-buildtime {
        margin: 10px 8px 10px auto;
    }
}

@media(max-width:700px) {

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        width: 80%;
        max-width: 80%;
    }

    .five-star-ml {
        margin-left: 1.3%;
    }

    .four-star-ml {
        margin-left: -2%;
    }

    .three-star-ml {
        margin-left: -6%;
    }

    .two-star-ml {
        margin-left: -9.5%;
    }

    .one-star-ml {
        margin-left: -11.8%;
    }
}

@media(max-width:676px) {

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        margin-left: 53px;
    }

    .five-star-ml {
        margin-left: 1.3%;
    }

    .four-star-ml {
        margin-left: -2%;
    }

    .three-star-ml {
        margin-left: -6%;
    }

    .two-star-ml {
        margin-left: -9.5%;
    }

    .one-star-ml {
        margin-left: -12.9%;
    }
}

@media(max-width:635px) {

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        width: 78%;
        max-width: 78%;
    }

    .consumer-assess-buildtime {
        margin: 10px 86px 10px auto;
    }
}

@media(max-width:630px) {

    .group .col-xs-1,
    .group .col-sm-1 {
        width: 12%;
    }

    .group .col-xs-11,
    .group .col-sm-11 {
        width: 88%;
    }

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        margin-left: 70px;
    }
}

@media(max-width:600px) {

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        margin-left: 65px;
    }

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        width: 73%;
        max-width: 73%;
    }

    .consumer-assess-buildtime {
        margin: 10px 96px 10px auto;
    }

    .group .col-xs-11,
    .group .col-sm-11 {
        margin-left: -3%;
    }

    .four-star-ml {
        margin-left: -2.2%;
    }

    .three-star-ml {
        margin-left: -7%;
    }

    .two-star-ml {
        margin-left: -11.4%;
    }

    .one-star-ml {
        margin-left: -14.2%;
    }

}

@media(max-width:586px) {

    .group .col-xs-11,
    .group .col-sm-11 {
        margin-left: -3.5%;
    }

    .five-star-ml {
        margin-left: 0.5%;
    }

    .four-star-ml {
        margin-left: -2.9%;
    }

    .three-star-ml {
        margin-left: -7.9%;
    }

    .two-star-ml {
        margin-left: -12.5%;
    }

    .one-star-ml {
        margin-left: -15.5%;
    }
}

@media(max-width:533px) {

    .group .col-xs-1,
    .group .col-sm-1 {
        width: 15%;
    }

    .group .col-xs-11,
    .group .col-sm-11 {
        width: 85%;
    }

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        margin-left: 60px;
    }

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        width: 71%;
        max-width: 71%;
    }

    .assess-buildtime {
        margin: 10px 18px 10px auto;
    }

    .one-star-ml {
        margin-left: -18.5%;
    }

    .two-star-ml {
        margin-left: -14.9%;
    }

    .three-star-ml {
        margin-left: -8.9%;
    }

    .four-star-ml {
        margin-left: -3.5%;
    }
}

@media(max-width:500px) {

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        margin-left: 55px;
    }

    .one-star-ml {
        margin-left: -19.9%;
    }

    .product-talk-consumer-content {
        width: 70%;
        max-width: 70%;
    }
}

@media(max-width:480px) {

    .group .col-xs-1,
    .group .col-sm-1 {
        width: 15%;
    }

    .group .col-xs-11,
    .group .col-sm-11 {
        width: 85%;
    }

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        margin: 10px auto 10px 65px;
    }

    .group.rows.product-talk-consumer.assess-buildtime {
        font-size: 14px;
    }

    .consumer-assess-buildtime {
        margin: 10px 76px 10px auto;
    }

    .signle-product-manager {
        padding-bottom: 10px;
    }

    .product-talk-admin {
        margin-top: -2.4%;
    }

    .five-star-ml {
        margin-left: 2%;
    }

    .three-star-ml {
        margin-left: -10.2%;
    }

    .four-star-ml {
        margin-left: -1.9%;
    }
}

@media(max-width:450px) {

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        margin-left: 60px;
    }
}

@media(max-width:440px) {
    .product-talk-admin {
        margin-top: -2.6%;
    }

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        margin-left: 40px;
    }

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        width: 68%;
        max-width: 68%;
    }

    .consumer-assess-buildtime {
        margin: 10px 85px 10px auto;
    }

    .assess-buildtime {
        margin: 10px 5px 10px auto;
    }
}

@media(max-width:425px) {

    .group .col-xs-1,
    .group .col-sm-1 {
        width: 18%;
    }

    .group .col-xs-11,
    .group .col-sm-11 {
        width: 82%;
    }

    .consumer-product-talk-area .no-fullmarks {
        margin: auto auto auto -3.5%;
    }
}

@media(max-width:414px) {

    .group .rows .product-talk-consumer-content,
    .product-talk-admin-content {
        margin-left: 49px;
    }

    .five-star-ml {
        margin-left: 4.9%;
    }

    .three-star-ml {
        margin-left: -9.8%;
    }

    .four-star-ml {
        margin-left: -1.3%;
    }

    .two-star-ml {
        margin-left: -16.9%;
    }

    .one-star-ml {
        margin-left: -21.9%;
    }
}

@media(max-width:400px) {
    .product-talk-admin {
        margin-top: -2.7%;
    }
}

@media(max-width:386px) {
    .signle-product-manager {
        padding-bottom: 15px;
    }

    .product-talk-admin {
        margin-top: -2.9%;
    }
}

@media(max-width:375px) {
    .consumer-product-talk-area .no-fullmarks {
        margin: auto auto auto -1%;
    }

    .tab-inner li span img {
        width: 15px;
    }

    .consumer-product-talk-area .no-fullmarks {
        margin: auto auto auto -4.2%;
    }
}

@media(max-width:370px) {
    .product-talk-admin {
        margin-top: -3.1%;
    }
}

@media(max-width:360px) {

    .group .col-xs-1,
    .group .col-sm-1 {
        width: 20%;
    }

    .group .col-xs-11,
    .group .col-sm-11 {
        width: 80%;
    }

    .tab-inner li span img {
        width: 13px;
    }
}

@media(max-width:350px) {
    .product-talk-admin {
        margin-top: -3.3%;
    }

    .group .col-xs-1,
    .group .col-sm-1,
    .group .col-md-4,
    .group .col-sm-4 {
        padding-right: 0px;
        padding-left: 0px;
    }
}

@media(max-width:331px) {
    .tab-inner li span {
        font-size: 14px;
        line-height: 35px;
    }

    .group .rows .product-talk-consumer-content {
        margin-left: 49px;
        line-height: 28px;
    }

    .product-talk-admin-content {
        margin-left: 45px;
        line-height: 28px;
    }

    .product-talk-admin {
        margin-top: -3.5%;
    }

    .consumer-assess-buildtime {
        margin: 10px 48px 10px auto;
    }
}

@media(max-width:320px) {
    .product-talk-admin-content {
        margin-left: 40px;
    }
}

@media(max-width:310px) {
    .tab-inner li span img {
        width: 10px;
    }

    .product-talk-admin {
        margin-top: -3.7%;
    }
}

@media(max-width:300px) {
    .product-talk-admin {
        margin-top: -4%;
    }
}

.avatar-product-assess-area {
    margin-left: 34%;
}

.product-assess-titile {
    font-size: 21px;
}

.assess-border-gray {
    font-size: 14px;
}

.assess-border-gray img {
    width: 35px;
}

.assess-border-gray .fa-edit {
    color: #333;
}

.new-five-star-area {
    margin-left: -0.5%;
}

.new-four-star-area {
    margin-left: -8%;
}

.new-three-star-area {
    margin-left: -10%;
}

.new-two-star-area {
    margin-left: -22%;
}

.new-one-star-area {
    margin-left: -23%;
}

@media(max-width:1440px) {

    .product-talk-consumer-content,
    .product-talk-admin-content {
        width: 80%;
        max-width: 80%;
    }
}

@media(max-width:1280px) {
    .new-one-star-area {
        margin-left: -22.5%;
    }

    .new-two-star-area {
        margin-left: -21%;
    }

    .new-three-star-area {
        margin-left: -10%;
    }

    .new-four-star-area {
        margin-left: -4%;
    }
}

@media(max-width:1199px) {
    .product-talk-consumer-content {
        margin: 0px auto 10px 61px;
    }

    .new-one-star-area {
        margin-left: -12.5%;
    }

    .new-three-star-area {
        margin-left: -7%;
    }

    .new-two-star-area {
        margin-left: -9.8%;
    }

    .consumer-product-talk-area .col-sm-1 {
        width: 11%;
    }

    .consumer-product-talk-area .col-sm-11 .col-md-4 {
        width: 100%;
        max-width: 100%;
    }
}

@media(max-width:1100px) {
    .new-one-star-area {
        margin-left: -12.5%;
    }

    .new-three-star-area {
        margin-left: -7.2%;
    }

    .product-talk-consumer-content {
        margin: 0px auto 10px 65px;
    }
}

@media(max-width:1024px) {
    .new-one-star-area {
        margin-left: -11.5%;
    }

    .new-two-star-area {
        margin-left: -10%;
    }

    .new-three-star-area {
        margin-left: -7%;
    }

    .new-four-star-area {
        margin-left: -4%;
    }
}

@media(max-width:768px) {
    .product-talk-consumer-content {
        margin: 0px auto 10px 68px;
    }

    .new-one-star-area {
        margin-left: -12.5%;
    }

    .new-two-star-area {
        margin-left: -10.2%;
    }

    .new-three-star-area {
        margin-left: -6.7%;
    }

    .new-four-star-area {
        margin-left: -3.4%;
    }

    .consumer-product-talk-area .col-xs-1,
    .consumer-product-talk-area .col-sm-1 {
        width: 13%;
        max-width: 13%;
    }


    .consumer-product-talk-area .col-xs-11,
    .consumer-product-talk-area .col-sm-11 {
        width: 87%;
        max-width: 87%;
    }

    .consumer-product-talk-area .col-xs-11 .col-sm-4,
    .consumer-product-talk-area .col-sm-11 .col-sm-4 {
        width: 100%;
        max-width: 100%;
    }
}

@media(max-width:767px) {
    .full-star {
        margin-left: 23.4%;
    }

    .new-two-star-area {
        margin-left: 10.2%;
    }

    .new-one-star-area {
        margin-left: 7.5%;
    }

    .new-three-star-area {
        margin-left: 13.7%;
    }
}

@media(max-width:667px) {
    .product-talk-consumer-content {
        margin: 0px auto 10px 48px;
    }

    .new-four-star-area {
        margin-left: -2.5%;
    }

    .product-talk-admin-content {
        margin-left: 46px;
    }
}

@media(max-width:660px) {

    .group .col-xs-1,
    .group .col-sm-1 {
        width: 11%;
    }

    .group .col-xs-11,
    .group .col-sm-11 {
        width: 89%;
    }

    .new-one-star-area {
        margin-left: -13.5%;
    }
}

@media(max-width:620px) {

    .consumer-product-talk-area .col-xs-1,
    .consumer-product-talk-area .col-sm-1 {
        width: 14%;
        max-width: 14%;
    }
}

@media(max-width:610px) {

    .group .col-xs-1,
    .group .col-sm-1 {
        width: 13%;
    }

    .group .col-xs-11,
    .group .col-sm-11 {
        width: 87%;
    }
}

@media(max-width:600px) {

    .group .col-xs-1,
    .group .col-sm-1 {
        width: 13%;
    }

    .group .col-xs-11,
    .group .col-sm-11 {
        width: 87%;
    }

    .product-talk-consumer-content,
    .product-talk-admin-content {
        width: 75%;
        max-width: 75%;
    }

    .new-three-star-area {
        margin-left: -7%;
    }

    .new-one-star-area {
        margin-left: -15%;
    }

    .new-two-star-area {
        margin-left: -11.6%;
    }

    .product-talk-consumer-content {
        margin: 0px auto 10px 62px;
    }

    .product-talk-admin-content {
        margin-left: 60px;
    }

    .consumer-assess-buildtime {
        margin: 10px 90px 10px auto;
    }

}

@media(max-width:586px) {

    .consumer-product-talk-area .col-xs-1,
    .consumer-product-talk-area .col-sm-1 {
        width: 15%;
        max-width: 15%;
    }

    .consumer-product-talk-area.col-xs-11,
    .consumer-product-talk-area.col-sm-11 {
        width: 85%;
    }
}

@media(max-width:533px) {

    .product-talk-consumer-content,
    .product-talk-admin-content {
        width: 74%;
        max-width: 74%;
    }

    .product-talk-consumer-content {
        margin: 0px auto 10px 55px;
    }

    .product-talk-admin-content {
        margin-left: 52px;
    }

    .consumer-assess-buildtime {
        margin: 10px 86px 10px auto;
    }

    .new-four-star-area {
        margin-left: -3.8%;
    }

    .new-three-star-area {
        margin-left: -8.9%;
    }

    .new-two-star-area {
        margin-left: -14.6%;
    }

    .new-one-star-area {
        margin-left: -18%;
    }
}

@media(max-width:520px) {

    .group .col-xs-1,
    .group .col-sm-1 {
        width: 14%;
    }

    .group .col-xs-11,
    .group .col-sm-11 {
        width: 86%;
    }

    .new-three-star-area {
        margin-left: -9.9%;
    }

    .new-one-star-area {
        margin-left: -20%;
    }

    .product-talk-consumer-content {
        margin: 0px auto 10px 45px;
    }
}

@media(max-width:485px) {

    .group .col-xs-1,
    .group .col-sm-1 {
        width: 15%;
    }

    .group .col-xs-11,
    .group .col-sm-11 {
        width: 85%;
    }
}

@media(max-width:450px) {

    .group .col-xs-1,
    .group .col-sm-1 {
        width: 16%;
    }

    .group .col-xs-11,
    .group .col-sm-11 {
        width: 84%;
    }
}

@media(max-width:414px) {

    .consumer-product-talk-area .col-xs-1,
    .consumer-product-talk-area .col-sm-1 {
        width: 17%;
    }

    .group .col-xs-1,
    .group .col-sm-1 {
        width: 17%;
    }

    .group .col-xs-11,
    .group .col-sm-11 {
        width: 83%;
    }

    .product-talk-admin-content {
        margin-left: 42px;
    }

    .consumer-assess-buildtime {
        margin: 10px 56px 10px auto;
    }

    .new-three-star-area {
        margin-left: -8%;
    }
}


.avatar-area {
    display: inline-block;
    width: 38%;
    margin-left: -10%;
}


.register-tabs {
    position: relative;
    margin-bottom: 20px;
    margin-top: -15px;
}

.register-tabs input[type="radio"] {
    position: absolute;
   /* left: 72px;
    top: 12px;*/
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid #9e9e9e;
    margin: 12px 5px;
}

.register-tabs label {
    float: left;
    margin: 10px 20px auto 25px;
    font-size: 14px;
    line-height: 1.666666667;
    cursor: pointer;
}
.register-tabs label .marks:after {
    position: absolute;
    top: 7px;
    left: -10px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid #9e9e9e;
}
input:checked+label {
    padding-bottom: 6px;
}

.register-tabs .tab-contents {
    clear: both;
    overflow: hidden;
    float: left;
    margin-left: 70%;
    width: 100%;
    margin-bottom: -50px;
    margin-top: -74px;
    padding-top:30px;
    padding-bottom: 0px;
}

.register-tabs .tab-contents>.tab-1 {
    height: 0;
    max-height: 0;
    opacity: 0;
}
.register-tabs .tab-contents>.tab-2 {
    height: 0;
    max-height: 0;
    opacity: 0;
}
.register-tabs .tab-contents.tab {
    margin-top: -70px;
}
.register-tabs #sex_m:checked~.tab-contents>.tab-1 {
    width: 100%;
    max-width: 100%;
    margin-top: 25px;
    padding: 0px;
    opacity: 1;
}
.register-tabs #sex_f:checked~.tab-contents>.tab-2 {
    width: 100%;
    max-width: 100%;
    margin-top: 25px;
    padding: 0px;
    opacity: 1;

    /* show current contents */
  /*  -webkit-transition: max-height 2s ease-out;
    transition: max-height 2s ease-out;*/
}

.register-tabs #sex_m:checked+label,
.register-tabs #sex_m:checked~.tab-contents>.tab-1 {
    background: transparent;
}

.register-tabs #sex_f:checked+label {
    background: transparent;
}
.register-tabs #sex_f:checked~.tab-contents>.tab-2 {
    background: transparent;
}

.register .gender-area .form-group .radio-inline input:checked~.checkmarks:after {
    display: block;
}
.register .gender-area .checkmarks:after {
    content: "";
    position: absolute;
    display: none;
}
.register .gender-area .checkmarks:after {
    top: 5px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #079a3e;
}

.register-avatar {
    width: 30px;
    text-align: center;
    margin: auto auto;
    background-color: #fff;
    border-radius: 50%;
    height: 30px;
}

 .tab-contents .radio-inline {
     padding-top: 0px;
     margin-top: -15px;
     margin-bottom: 0;
         z-index: 9999;
 }

 .tab .tab-contents .radio-inline {
     padding-top: 15px;
 }

 .tab label {
    float: left;
    margin: 10px 0px auto 0px;
     font-size: 14px;
     line-height: 1.666666667;
     cursor: pointer;
 }
 .avatar-text{
    width: 20%;
    float: left;
    margin-left: 12px;
    margin-top: -15px;
 }
.tab-1 .avatar-icon img,
.tab-2 .avatar-icon img {
    width: 35px;
    margin-top: -2px;
}


/*修改區域*/
.modify-tabs,
.locationmap-tabs {
    margin-bottom: 20px;
}

.modify-tabs input[type="radio"],
.locationmap-tabs input[type="radio"] {
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid #9e9e9e;
    margin: 12px 5px;
}
.modify-tabs .tab-contents .tab input[type="radio"],
.locationmap-tabs .tab-contents .tab input[type="radio"] {
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid #9e9e9e;
    margin: 12px 5px auto -20px;
}
.modify-tabs  label,
.locationmap-tabs label {
     float: left;
    margin: 10px 10px auto 25px;
     font-size: 14px;
     line-height: 1.666666667;
     cursor: pointer;
}

input:checked+label {
    padding-bottom: 6px;
}

.modify-tabs .tab-contents,
.locationmap-tabs .tab-contents {
    clear: both;
    /* input tab floating clear */
    overflow: hidden;
    /* hide animation contents elements */
}
.modify-tabs .tab-contents {
    clear: both;
    overflow: hidden;
    float: left;
    margin-left: 40%;
    width: 100%;
    margin-bottom: -50px;
    margin-top: -78px;
    padding-top: 30px;
    padding-bottom: 0px;
}
.locationmap-tabs .tab-contents {
    clear: both;
    overflow: hidden;
    float: left;
    margin-left: 40%;
    width: 100%;
    margin-bottom: -50px;
    margin-top: -78px;
    padding-top: 30px;
    padding-bottom: 0px;
}
.modify-tabs .tab-contents>.tab-1,
.locationmap-tabs .tab-contents>.tab-1 {
    height: 0;
    max-height: 0;
    opacity: 0;
}

.modify-tabs .tab-contents>.tab-2,
.locationmap-tabs .tab-contents>.tab-2 {
    height: 0;
    max-height: 0;
    opacity: 0;
}

.modify-tabs .tab-contents.tab,
.locationmap-tabs .tab-contents.tab {
    margin-top: -70px;
}
.modify-tabs #sex_m:checked~.tab-contents>.tab-1,
.locationmap-tabs #sex_m:checked~.tab-contents>.tab-1 {
    width: 50%;
    max-width: 50%;
    margin-top: 25px;
    padding: 0px;
    opacity: 1;
}

.modify-tabs #sex_f:checked~.tab-contents>.tab-2,
.locationmap-tabs #sex_f:checked~.tab-contents>.tab-2 {
    width: 50%;
    max-width: 50%;
    margin-top: 25px;
    padding: 0px;
    opacity: 1;

    /* show current contents */
    /*  -webkit-transition: max-height 2s ease-out;
    transition: max-height 2s ease-out;*/
}

.modify-tabs #sex_m:checked+label,
.modify-tabs #sex_m:checked~.tab-contents>.tab-1,
.locationmap-tabs #sex_m:checked+label,
.locationmap-tabs #sex_m:checked~.tab-contents>.tab-1 {
    background: #fff;
}

.modify-tabs #sex_f:checked+label,
.locationmap-tabs #sex_f:checked+label {
    background: #fff;
}

.modify-tabs #sex_f:checked~.tab-contents>.tab-2,
.locationmap-tabs #sex_f:checked~.tab-contents>.tab-2 {
    background: #fff;
}

.modify-avatar-text {
    width: 12%;
    float: left;
    margin-left: 0px;
    margin-top: -5px;
}

@media (max-width:1199px){
    .register-tabs .tab-contents {
        margin-left: 0%;
        width: 35vw;
        margin-top: -20px;
        margin-bottom: -20px;
    }
}
@media (max-width:991px) {
    .register-tabs .tab-contents {
        margin-left: 8px;
    }
}

@media (max-width:767px) {
    .register-tabs #sex_m:checked~.tab-contents>.tab-1 {
        margin-bottom: 50px;
    }
    .register-tabs #sex_f:checked~.tab-contents>.tab-2 {
        padding-bottom: 20px;
    }
    .register-tabs #sex_f:checked~.tab-contents>.tab-2 {
        margin-bottom: 23px;
    }
    .register-tabs .tab-contents {
        width: 100vw;
    }
    .avatar-text {
        width: 8%;
    }
}
@media (max-width:640px) {
    .avatar-text {
        width: 9%;
    }
    .register-tabs #sex_m:checked~.tab-contents>.tab-1 {
        margin-bottom: 50px;
    }
}

@media (max-width:480px) {
    .mumber-birthday .form-inline .form-control {
        width: 88px;
    }
  
}
@media (max-width:450px) {
    .mumber-birthday .form-inline .form-control {
        width: 78px;
    }
}

@media (max-width:414px) {
    .mumber-birthday .form-inline .form-control {
        width: 69px;
    }
}

@media (max-width:400px) {
    .register-tabs label {
        margin: 10px 0px auto 35px;
    }
}

@media (max-width:386px) {
    .mumber-birthday .form-inline .form-control {
        width: 66px;
    }
}
@media (max-width:360px) {
    .mumber-birthday .form-inline .form-control {
        width: 62px;
    }
}
@media (max-width:350px) {
    .register-tabs label {
        margin: 10px 0px auto 27px;
    }
    .register-tabs #sex_m:checked~.tab-contents>.tab-1 {
        width: 80%;
        max-width: 80%;
    }
    .mumber-birthday .form-inline .form-control {
        width: 55px;
    }
}

@media (max-width:320px) {
    .mumber-birthday .form-inline .form-control {
        width: 52px;
    }

    .tab label {
        margin: 10px 0px auto 17px;
    }
    .register-tabs .tab-contents {
        margin-left: 0px;
    }
}
@media (max-width:300px) {
    .register-tabs label {
        margin: 10px -20px auto 42px;
    }
    .tab-1 .avatar-icon img,
    .tab-2 .avatar-icon img {
        width: 29px;
        margin-top: -2px;
    }
    .register-avatar {
        width: 25px;
        height: 25px;
    }
    .register-tabs input[type="radio"] {
        margin: 12px 5px auto 20px;
    }

   .register-tabs .avatar-300 {
       margin: -20px -5px auto 15px;
   }
    .mumber-birthday .form-inline .form-control {
        width: 48px;
    }
}
@media (max-width:285px) {
    .register-avatar {
        width: 22px;
        height: 22px;
    }
    .col-xs-12 {
        padding-right: 5px;
        padding-left: 5px;
    }
}