/* font */
.QS {
    margin: 0;
    padding: 0;
}

    .QS .main {
        width: 70%;
        /* margin: 55px auto 50px; */
        margin: 100px auto 50px;
        min-height: 650px;
        text-align:left;
    }


/* today view */
#today_slider_scroll {
    top: 0;
    left: -200px;
    /* left:0; */
    width: 200px;
    position: fixed;
    z-index: 999;
    transition: all .8s;
}
#today_slider_scroll:hover{
    left:0;
}
#today_slider_content {
    height:100vh;
    text-align: center;
    padding-top: 70px;
    padding-bottom: 20px;
    /* background: #fff\9; */
    /* filter: alpha(opacity=30)\9; */
    background: #fff;
    background-color: hsla(0, 0%, 100%, .8);
    box-shadow: 0 3px 1px #ddd;
    overflow:auto;
}
#today_slider_content::-webkit-scrollbar {
    width: 6px;
}
#today_slider_content::-webkit-scrollbar-track {
    background: #eee; 
}
#today_slider_content::-webkit-scrollbar-thumb {
    background: #ccc; 
    border-radius:10px;
}
#today_slider_content::-webkit-scrollbar-thumb:hover {
    background: #aaa; 
}
#today_slider_content>.today_content>a>img{
    border:1px solid transparent;
    transition: all 1s;
}
#today_slider_content>.today_content>a>img:hover{
    border:1px solid #333;
}

#today_content {
    background: #fff;
    text-align: center;
    padding-top: 140px
}
#today_tab {
    position: absolute;
    top: 180px;
    right: -37px;
    width: auto;
    background: transparent;
    color: #fff;
    text-align: center;
    padding: 8px 0;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-top-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    opacity: .9
}
#today_tab img{
    border-radius: 1px;
    cursor: pointer;
}

    #today_tab span {
        display: block;
        height: 9pt;
        padding: 1px 0;
        line-height: 9pt;
        text-transform: uppercase;
        font-size: 9pt
    }

/* Look Book */
.lookbook .book-list {
    list-style: none;
    padding: 0;
    font-size: 0;
}

    .lookbook .book-list li {
        display: inline-block;
        width: 33%;
        text-align: center;
        padding: 10px 20px;
        margin-bottom: 20px;
    }

        .lookbook .book-list li p {
            font-size: 12px;
            text-align: left;
            margin-top: 5px;
        }

        .lookbook .book-list li > a {
            max-width: 400px;
            display: block;
        }

        .lookbook .book-list li a img {
            width: 100%;
            height: auto;
        }

.lookbook .paging {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

    .lookbook .paging::before, .lookbook .paging::after {
        content: "│";
        margin: 0 10px;
    }

    .lookbook .paging li {
        display: inline-block;
    }

        .lookbook .paging li a {
            display: block;
            padding: 0 10px;
            color: #000;
        }

.lookbook .modal {
    display: block;
    position: inherit;
    top: inherit;
    right: inherit;
    bottom: inherit;
    left: inherit;
}

    .lookbook .modal > label {
        background: #000;
        color: #000;
        cursor: pointer;
        display: inline-block;
    }

        .lookbook .modal > label img {
            width: 100%;
            height: auto;
        }

.lookbook .modal-overlay {
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.lookbook .modal-wrap {
    position: relative;
    margin: 0 auto;
    width: 100%;
    opacity: 1;
}

    .lookbook .modal-wrap label {
        color: #fff;
        cursor: pointer;
        position: absolute;
        font-size: 50px;
        right: 1%;
    }

    .lookbook .modal-wrap h5 {
        padding-top: 50px;
        color: #fff;
    }

.lookbook input {
    position: absolute;
    z-index: -9999;
    visibility: hidden;
}

.lookbook .modal-overlay {
    opacity: 0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
    -moz-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
    -ms-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
    -o-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
    transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
    z-index: -1;
}

.lookbook input:checked ~ .modal-overlay {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    z-index: 9999;
}

.lookbook .sp-bottom-thumbnails .sp-thumbnail-container {
    margin: 10px 7px;
    display: inline-block;
}

.lookbook .sp-image-container a {
    width: auto;
    height: auto;
    display: block;
}

.lookbook .sp-selected-thumbnail img {
    opacity: .5
}

.lookbook .close {
    position: absolute;
    margin-right: 32px;
    top: 32px;
    width: 25px;
    height: 25px;
    opacity: 0.3;
    transition: all .5s;
}

    .lookbook .close:hover {
        opacity: 1;
        transform: scale(1.2);
    }

    .lookbook .close:before, .lookbook .close:after {
        position: absolute;
        left: 15px;
        content: ' ';
        height: 33px;
        width: 2px;
        background-color: #FFF;
    }

    .lookbook .close:before {
        transform: rotate(45deg);
    }

    .lookbook .close:after {
        transform: rotate(-45deg);
    }



.QS .item-menu ul {
    list-style: none;
    margin-top: 30px;
    padding: 0;
}

    .QS .item-menu ul li {
        line-height: 25px;
    }

        .QS .item-menu ul li a {
            color: #000;
        }

        .QS .item-menu ul li:nth-child(1) a {
            font-size: 10.5pt;
            border-bottom: 1px solid #333;
            line-height: 16pt;
          
        }

        
.QS .sort-menu {
    position: relative;
    z-index: 99;
}

    .QS .sort-menu > .sort-l01, .QS .sort-menu > .sort-l01 ul {
        position: relative;
        list-style: none;
        text-align: center;
        padding: 0;
        font-size: 0;
    }

        .QS .sort-menu > .sort-l01 > li {
            display: inline-block;
            font-size: 16px;
            margin: 0 2.5%;
        }

            .QS .sort-menu > .sort-l01 > li > a {
                color: #000;
                padding: 0 10px;
            }

    .QS .sort-menu > ul li > div {
        position: absolute;
        background-color: #fff;
        width: 100%;
        left: 0;
        padding: 20px;
        color: #000;
        overflow: hidden;
        display: none;
        line-height: 25px;
        height: 400px;
        box-shadow: 0 5px 3px rgba(0, 0, 0, 0.1);
        opacity: 0.8;
        /*border-top: 1px solid rgba(0, 0, 0, 0.05);*/
    }

        .QS .sort-menu > ul li > div ul {
            display: inline-block;
            margin: 0 10px;
            vertical-align: top;
        }

            .QS .sort-menu > ul li > div ul li {
                text-align: left;
                font-size: 12px;
                font-weight: bold;
            }

                .QS .sort-menu > ul li > div ul li:first-child::before {
                    content: "|";
                    margin-right: 5px;
                    margin-left: -8px;
                }

    .QS .sort-menu > ul li:nth-child(4) > div ul li:first-child::before {
        content: "";
        margin-right: 0;
        margin-left: 0;
    }

    .QS .sort-menu > ul li > div ul li a {
        color: #333;
        font-weight: normal;
    }

        .QS .sort-menu > ul li > div ul li a img {
            max-width: 220px;
            margin-top: 20px;
        }

    .QS .sort-menu > ul li:hover > div.nonehover {
        display: none;
    }

    .QS .sort-menu > ul li:hover > div {
        display: block;
    }

.alertMsg {
    color: red;
    padding-top: 20px;
}

.pop-windows .window {
    border-radius: 0;
    border: 1px solid #a9a9a9;
    box-shadow: none;
    text-align: center;
    color: #8b827f;
}

    .pop-windows .window .window-header h4 {
        font-family: Garamond;
        font-size: 26px;
        font-weight: bold;
        margin: 40px 0 0;
    }

        .pop-windows .window .window-header h4 span {
            font-size: 20px;
            font-weight: normal;
            margin-left: 10px;
        }

    .pop-windows .window .window-body {
        text-align: left;
        margin: 20px 0 20px 115px;
    }

        .pop-windows .window .window-body p {
            margin: 20px 0 20px 10px;
            line-height: 30px;
        }

        .pop-windows .window .window-body strong {
            font-weight: normal;
            text-decoration: underline;
        }

        .pop-windows .window .window-body input[type="text"]:first-of-type {
            width: 68%;
            margin-bottom: 20px;
        }

        .pop-windows .window .window-body input {
            padding: 5px;
        }

    .pop-windows .window .close {
        position: absolute;
        top: 15px;
        right: 20px;
        opacity: 1;
    }

@media (max-width: 768px) {
    .pop-windows {
        margin: 150px 0px;
        width: 100vw;
    }

    .lottery-pop-windows {
        /* margin: 150px 0px; */
        width: 100vw;
    }

    .lottery-alert img {
        /*width: 100%;*/
    }
}
@media(min-width: 768px){
    #MsgModalPop>.modal-dialog{
    width:400px
}
}

.send-btn {
    text-align: center;
    margin: 20px 0;
}

    .member-sign ul li .button, .member-join .join-btn button, .send-btn input[type="submit"], .join-btn .button ,
    .send-btn button#btnMsgModal{
        background-color: #000;
        border: none;
        color: #fff;
        padding: 5px 65px;
        transition: all .5s;
        width: 100%;
        font-size: 21px;
        font-family: "Roboto Condensed", sans-serif, "微軟正黑體";
    }

@media (max-width: 768px) {
    .lottery-alert {
        margin:0 auto;
        width: 95%;
    }
    
        .lottery-alert img {
            /*width: 50vw;*/
        }
}

.lottery-alert {
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    display: flex;
}

.lottery-alert a{
    margin:0 auto
}

/* ---------------------------------------------------18.05.10新增lightbox css */

/* 叉叉按鈕 */

.closeW {
    position: absolute;
    right: 32px;
    top: 32px;
    width: 25px;
    height: 25px;
    opacity: 0.3;
    transition: all .5s;
}

    .closeW:hover {
        opacity: 1;
        transform: scale(1.2);
    }

    .closeW:before,
    .closeW:after {
        position: absolute;
        left: 15px;
        content: ' ';
        height: 33px;
        width: 2px;
        background-color: #fff;
    }

    .closeW:before {
        transform: rotate(45deg);
    }

    .closeW:after {
        transform: rotate(-45deg);
    }

/* lightbox產品名稱 */

.slider-pro .button {
    position: absolute;
    right: 17px;
    z-index: 1;
    bottom: 10px;
    overflow: hidden;
}

    .slider-pro .button:nth-child(2) {
        bottom: 43px;
    }

    .slider-pro .button:nth-child(3) {
        bottom: 76px;
    }

@media (max-width: 1024px) {
    .slider-pro .button {
        bottom: -40px;
    }

        .slider-pro .button:nth-child(2) {
            bottom: -76px;
        }

        .slider-pro .button:nth-child(3) {
            bottom: -110px;
        }
}

.name {
    display: inline-block;
    /* border: 1px solid rgb(241, 241, 241); */
    background-color: #fff;
    padding: 3px 20px;
    text-align: center;
    margin: auto;
    color: #000;
    letter-spacing: 2px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 550;
    text-decoration: none;
    text-transform: uppercase;
    position: absolute;
    bottom: 15px;
    right: 15px;
    cursor: pointer;
    border-radius: 2px;
    z-index: 2;
    transition: all .8s;
}

a.name:nth-child(2), a.name_sec {
    bottom: 48px;
}

@media screen and (max-width:320px) {
    a.name:nth-child(2), a.name_sec {
        bottom: 68px;
    }
}

a.name:nth-child(3), a.name_third {
    bottom: 81px;
}

@media screen and (max-width:320px) {
    a.name:nth-child(3), a.name_third {
        bottom: 121px;
    }
}

.name::after {
    /* content: '看細節';
    background: #000;
    line-height: 20px;
    letter-spacing: 3px;
    padding: 3px 20px;
    color: #fff;
    height: 100%;
    width: 120%;
    position: absolute;
    top: 0;
    left: -150%;
    text-decoration: none;
    transition: all .75s cubic-bezier(0.31, -0.105, 0.43, 1.4); */
    /* opacity: 0; */
    /* transform: skew(50deg); */
    /* opacity:1;
    border: 1px solid transparent; */
}

.name:hover {
    /* color:#333; */
    background-color: rgba(0,0,0,.8);
    color: #fff;
    z-index: 12;
    text-decoration: none;
    transition: all .75s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}

a.name:active {
    text-decoration: none;
    color: #000;
}

a.name:visited {
    text-decoration: none;
    color: #000;
}

a.name:focus {
    text-decoration: none;
    color: #000;
}

.name:hover:after {
    /* left: -10%;
    opacity: 1;
    z-index: 1; */
}

.sp-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}


/**************************
         qs.css
***************************/

@media (max-width: 993px) {
    header {
        border-bottom: solid 1px #ddd;
    }

    .QS.menuopened {
        height: 100vh;
        overflow: hidden;
    }

    .QS .main {
        margin: 50px auto 0;
        width: 100%;
        /*position: relative;*/
    }



    /**************************
	         qs-list.css
	***************************/
    .items-list li {
        /*display: block;*/
    }

    .items-list.list-array-4>li {
        width: 49%;
        max-width: none;
        vertical-align: top;
    }
    }
    @media (max-width: 768px) {
        .items-list.list-array-4 li:nth-child(2n+1) {
            margin-left: 0;
        }
    }
    @media (max-width: 993px) {
    .items-list li p:nth-of-type(3) span:nth-last-of-type(2) {
        display: block;
    }

    .items-list li p:nth-of-type(3) span:nth-of-type(2):after {
        float: none;
        margin: 0 0 0 10px;
    }

    .item-nav-box {
        text-align: center;
    }

        .item-nav-box .items-amount {
            margin-right: 0;
        }

        .item-nav-box > .page-wrap {
            margin: 0 0 10px;
        }

            .item-nav-box > .page-wrap:before, .item-nav-box > .page-wrap:after {
                display: none;
            }

        .item-nav-box .sort-nav {
            position: relative;
            padding-right: 10px;
        }
  

    /**************************
	         login
	***************************/
    .member-sign {
        border-right: 0;
        border-bottom: solid 1px #ccc;
        margin-bottom: 60px;
        padding-bottom: 30px;
    }

        .member-sign .title h3, .member-join .title h3 {
            font-size: 30px;
        }

        .member-sign input[type="text"], .member-sign input[type="password"] {
            margin-left: 0;
            width: 70%;
        }

        .member-sign ul li:nth-child(3) input {
            /* width: 43%;
            max-width: none; */
        }

    /**************************
	         member_top
	***************************/
    .member-menu {
        /*display: none;*/
    }

    .member-inner {
        padding-top: 15px;
    }

        .member-inner .sale-br {
            font-size: 14px;
            text-align: center;
            float: none;
        }

        .member-inner .member-infor li {
            display: block;
            padding: 5px 0;
            text-align: center;
        }

            .member-inner .member-infor li + li {
                border-left: 0;
                padding-left: 0;
            }

        .member-inner h3 {
            text-align: center;
            margin: 0 0 15px;
        }
       
        .member-inner .track-list {
            clear: both;
        }

            .member-inner .track-list:after {
                content: '';
                display: table;
                width: 100%;
                clear: both;
            }

            .member-inner .track-list li {
                width: calc((100% - 10px)/2);
                margin-left: 0;
                float: left;
            }

                .member-inner .track-list li:nth-child(2n) {
                    margin-right: 0;
                }

        .member-inner .member-order {
            width: 100%;
            table-layout: fixed;
        }

            .member-inner .member-order td {
                min-height: 41px;
            }

                .member-inner .member-order td .link {
                    float: right;
                }

    .member-order textarea {
        max-width: 60%;
    }

    .member-inner .bonus-infor {
        text-align: center;
    }

    .tableWrap {
        width: 100%;
        overflow: auto;
    }

    .member-inner .member-order th, .member-inner .like-list th, .member-inner .member-order td {
        white-space: nowrap;
    }


    /**************************
	         member_modify
	***************************/
    .member-modify {
        margin: 15px 0;
    }

        .member-modify ul:first-child {
            float: none;
        }

        .member-modify table:nth-child(2) {
            margin: 20px 0;
            display: block;
            width: 100%;
        }

        .member-modify table td {
            text-align: center;
        }

        .member-modify table tbody, .member-modify table tr {
            width: 100%;
            display: block;
        }

        .member-modify table td input, .member-change table td input {
            width: 100%;
        }

        .member-modify table tr:last-child button {
            margin: 20px auto 0;
        }

    /**************************
	         mycar
	***************************/
    .car-item {
        margin: 0 15px;
    }

        .car-item tr {
            border: none;
        }

        .car-item td {
            border-right: none;
        }

        .car-item tr + tr td {
            padding-top: 10px;
        }

        .car-item tr:last-child td {
            padding-bottom: 10px;
        }

    .car-btn-area button {
        width: auto;
        max-width: 40%;
    }

    /**************************
	         mycar_detal
	***************************/
    .step-title {
        margin: 0 15px 30px;
    }

        .step-title h4 {
            font-size: 16px;
            text-align: center;
        }

            .step-title h4 span {
                display: block;
                font-size: 12px;
            }

    .pay-detal {
        width: auto;
        margin: 15px;
    }

        .pay-detal table {
            width: 100%;
            margin: 0 0 30px;
        }

            .pay-detal table th, .pay-detal table td {
                padding: 5px 10px;
            }

    /**************************
	         mycar_pay
	***************************/
    .pay-area .area-select {
        position: relative;
        /*padding: 0;
		left: 0;*/
        /* margin: 0 15px 30px 50px; */
    }

        .pay-area .area-select li {
            display: block;
            width: 100%;
        }

            .pay-area .area-select li + li {
                margin: 0;
            }

    .area-content {
        margin: 0 15px;
    }

    .pay-area .pay-infor {
        overflow: auto;
    }

        .pay-area .pay-infor:first-child, .pay-area .pay-infor-o:first-child {
            border-right: 0
        }

    .pay-area .pay-select li + li {
        margin: 0;
    }

    .pay-area .write-list tr td:first-child {
        width: 30%;
    }

    .pay-area .write-list tr td:nth-child(2) {
        width: 70%;
    }

        /* .pay-area .write-list tr td:nth-child(2) input {
            width: 100%;
        } */

    .pay-area .write-list ul {
        width: auto;
    }

    .pay-area .pay-infor:nth-last-of-type(2) {
        padding-left: 0;
    }

    .area-content .area-content {
        margin: 0;
    }

    .pay-area .shopping-list td:first-child {
        padding: 5px 10px;
        width: 30%;
    }

    .pay-area .pay-select {
        /* margin-top: 50px; */
    }

    /**************************
	         mycar_pay02
	***************************/
    .pay-add table th:first-child {
        width: 30%;
    }

    .pay-add table th {
        vertical-align: top;
    }

    .pay-add table td span {
        display: block;
    }

    .pay-add table tr:nth-child(3) input:first-child {
        width: 70px;
    }

    .pay-add table tr:nth-child(3) input:nth-child(2) {
        width: 100%;
    }

    .pay-add table tr:nth-child(3) input:nth-child(3) {
        width: 70px;
    }

    /**************************
	       order_list_A
	***************************/
    .member-inner .QMA dd {
        padding: 20px 0 10px 0;
    }
        /**************************
	       order_list_QMA
	***************************/
        .member-inner .QMA dd button {
            width: auto;
        }
    /**************************
	       blog
	***************************/
    .blog h3 {
        font-size: 20px;
    }

    .blog > h4 {
        margin-top: 30px;
    }

    .blog .blog-newest {
        margin: 0 15px;
    }

    .blog .blog-list {
        margin-top: 60px;
    }

        .blog .blog-list li {
            width: calc(100% / 2);
        }


    /**************************
	       change
	***************************/
    .member-change table {
        width: 100%;
    }

    /**************************
	       forget
	***************************/
    .member-forget table th:first-child {
        width: 30%;
        vertical-align: top;
        padding: 5px;
    }

    .member-forget table td span {
        display: block;
    }

    /**************************
	       about
	***************************/
    .about-menu h4, .about-inner h4 {
        font-size: 16px;
        position: relative;
    }

    .about-menu h4 {
        background: #eee;
        padding: 3px 0;
    }

        .about-menu h4:after {
            content: '';
            display: block;
            position: absolute;
            border-top: solid 8px #000;
            border-left: solid 4px transparent;
            border-right: solid 4px transparent;
            right: 15px;
            top: 6px;
        }

        .about-menu h4.active:after {
            border-bottom: solid 8px #000;
            border-top: 0;
        }

    .about-menu {
    }

        .about-menu ul {
            display: none;
        }

            .about-menu ul.active {
                display: block;
            }

    .about-inner {
        min-height: calc(100vh - 50px - 64px);
    }

        .about-inner table {
            width: 100%;
        }


    .lottery-alert {
        /* position: absolute; */
        /* margin: 10% 10%; */
        /* width:70%; */
    }
}



/* loading */
.load-wrapp {        
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
}
.load-wrapp .load{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.load-wrapp .line {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 6px;
background-color: #fff;
}
.load-wrapp .load .line:nth-last-child(1) {
animation: loadingC 0.8s 0.1s linear infinite;
}
.load-wrapp .load .line:nth-last-child(2) {
animation: loadingC 0.8s 0.2s linear infinite;
}
.load-wrapp .load .line:nth-last-child(3) {
animation: loadingC 0.8s 0.3s linear infinite;
}
@keyframes loadingC {
0% {
    transform: translate(0, 0);
    opacity: 1;
}
50% {
    transform: translate(0, 15px);
    opacity: 0;
}
100% {
    transform: translate(0, 0);
    opacity: 1;
}
}



/* end-loading */


/* naveShine */

@keyframes slide {
    0% {color:#c05349}
    50% {color:#aaa}
    100% {color:#c05349}
  }
  
 
  .navbar>.container>.navbar-collapse>ul.navmain>li.naveShine>a,
  .navbar>.container>.navbar-collapse>ul.navmain>li.naveShine>ul.second-menu>li.naveShine>a{
    color:#c05349;
    animation: slide 1.5s infinite ;
    -webkit-animation: slide 1.5s infinite ;
  
  }


/* end-naveShine */


/* naveblod */

 
.navbar>.container>.navbar-collapse>ul.navmain>li.naveBold>a{
    color:#c05349;
    font-weight: bold;
  
  }


/* end-naveblod */