@charset "utf-8";

/* CSS Document */


/*-----------------------order----------------------*/

#order {
    position: absolute;
    right: 0;
    top: 35px;
    display: table-row;
    width: auto;
}

#order p {
    display: table-cell;
    vertical-align: bottom;
    width: auto;
    height: 33px;
    line-height: 100%;
}

#order span a {
    margin: 0 2px;
    color: #333;
}

#order span a.red {
    color: #C1272D
}

a.btnPicmode {
    background-image: url(../images/picMode.svg);
    background-color: #001e3c;
    border: 1px solid #001e3c;
    color: #fff;
}

a.btnListmode {
    background-image: url(../images/listMode.svg);
    background-color: #001e3c;
    border: 1px solid #001e3c;
    color: #fff;
}


/*------------- sort--------------*/

#sort {
    border: 1px solid #E0E0E0;
    margin-bottom: 20px;
    border-radius: 8px;
}

#sort dt {
    font-size: 17px;
    margin: 0 15px;
    padding: 15px 0;
    background-image: url(../images/closeItem.svg);
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: right center;
    cursor: pointer;
}

#sort dt.itemOpen {
    background-image: url(../images/openItem.svg);
}

#sort dl {
    border-bottom: 1px solid #E0E0E0;
}

#sort dd {
    border-top: 1px solid #E0E0E0;
    padding: 15px;
}

#sort dl:last-child {
    border-bottom: none;
}

#sort dd label {
    cursor: pointer;
    display: block;
    margin-bottom: 3px;
}

#sort dd label:last-child {
    margin: 0;
}


/*--------- shopList --------------*/

#shopList li {
    float: left;
    width: 49%;
    margin: 0 2% 2% 0;
    padding: 15px;
    background: #F2F2F2;
    /*ani*/
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

#shopList li:hover,
#shopPicMode li:hover {
    background: #fff;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
    /*ani*/
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

#shopList .StoreProfile {
    height: 90px;
}

#shopList li:nth-child(even) {
    margin-right: 0;
}

#shopList li div.shopListLeft {
    float: left;
    width: 150px;
    text-align: center;
}

#shopList li div.shopListLeft p {
    margin-top: 10px;
}

#shopList li div.shopListRight {
    width: auto;
    margin-left: 165px;
}

#shopList li div.shopListRight p.gray {
    margin: 10px 0;
}

#shopList li a {
    color: #333;
}

#shopList li dl,
#prodList li dl {
    margin-top: 10px;
}

#shopList li dd {
    float: left;
    width: 20%;
    text-align: center;
    border-left: 1px solid #ccc;
    color: #0071bc;
}

#shopList li dd p {
    color: #333;
}

#shopList li dd:first-child,
#prodList li dd:first-child,
#prodListMode li dd:first-child,
#chargeList li dd:first-child {
    border: none;
}

p.favor,
p.addfavor,
p.view,
p.shareprod {
    width: 16px;
    height: 16px;
    background-image: url(../images/favor.svg);
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: top center;
    display: inline-block;
}

p.addfavor {
    background-image: url(../images/favorGray.svg);
}

p.addfavorW {
    background-image: url(../images/favorWhite.svg);
}

p.view {
    background-image: url(../images/view.svg);
}

p.shareprod {
    background-image: url(../images/share.svg);
}


/*--------- shopList --------------*/

#shopPicMode li {
    float: left;
    width: 23.5%;
    margin: 0 2% 3% 0;
    line-height: 100%;
    padding: 10px;
    background: #f2f2f2;
    /*ani*/
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    position: relative;
}

#shopPicMode li:nth-child(4n) {
    margin-right: 0;
}

#shopPicMode li div.shopListLeft {
    text-align: center;
    margin-bottom: 10px;
}

#shopPicMode li div.shopListLeft p,
#shopPicMode li div.shopListRight p.StoreProfile,
#shopPicMode li div.shopListRight p.gray {
    display: none;
}

#shopPicMode li div.shopListRight h3 {
    color: #333;
    text-align: center;
}

#shopPicMode li dl {
    border-top: 1px solid #ccc;
    margin-top: 10px
}

#shopPicMode li dd {
    display: block;
    color: #0071bc;
}

#shopPicMode li dd p {
    width: 50%;
    display: inline-block;
    border-right: 1px solid #ccc;
    text-align: center;
    margin-right: 10px;
    color: #333;
}

#shopPicMode li dd.shopPicModeFavor {
    position: absolute;
    right: 0;
    top: 15px;
}

#shopPicMode li dd.shopPicModeFavor p {
    border-right: 0;
}

#shopPicMode li dd:nth-child(3),
#shopPicMode li dd:nth-child(5) {
    border: 0;
}


/*--------- productList --------------*/

#prodList li {
    float: left;
    width: 22.75%;
    margin: 0 3% 3% 0;
    line-height: 100%;
    padding: 10px;
    border: 1px solid #fff;
}
#prodList li:nth-child(4n) {
    margin-right: 0;
}

#prodList li div {}

#prodList li h3 {
    color: #F15A24;
}

#prodList li .btnStyle {
    width: 100%;
    text-align: center;
}

#prodList li dd,
#prodListMode li dd {
    float: left;
    width: 33%;
    text-align: center;
    border-left: 1px solid #ccc;
    color: #666;
}

#chargeList li dl{
    float: right;
	width:160px;
}
#chargeList li dd{
    float: left;
    width: 33%;
    text-align: center;
    border-left: 1px solid #ccc;
    color: #666;
}

#blogList li dd p,
#prodList li dd p,
#chargeList li dd p,
#prodListMode li dd p,
.favorWrapper p {
    display: inline-block;
    font-size: 12px;
}

#prodList li:hover,
#chargeList li:hover {
    border: 1px solid #C7B299;
}


/*--------prodListMode---------*/

#prodListMode li {
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
    overflow: auto;
    padding: 10px 0;
    position: relative;
}

#prodListMode li h4 {
    margin-bottom: 10px;
}

#prodListMode li h3 {
    margin: 10px 0;
    color: #631216;
}

#prodListMode li div.prodListLeft {
    width: 160px;
    float: left;
}
#prodListMode li div.prodListRight {
    margin-left: 180px;
    width: auto;
}

#prodListMode li dl {
    width: 50%;
    margin-top: 10px
}

#prodListMode .btnProduct {
    position: absolute;
    right: 0;
    bottom: 20px;
}

.gemlist td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}


/*--------blog---------*/

#blogLeft {
    width: 66%;
    float: left;
    position: relative;
}

#blogRight {
    width: 30%;
    float: right;
}

#blogLeft #order {
    top: 0;
}

#blogList li {
    padding: 10px;
    border: 1px solid #E0E0E0;
    margin-bottom: 10px;
    /*ani*/
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

#blogList li:hover {
    background: #f5f5f5;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
    /*ani*/
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

#blogList li a {
    color: #333;
}

#blogList li:last-child {
    margin-bottom: 0;
}

#blogList p.shoplogo {
    height: 40px;
    line-height: 40px;
    font-weight: bold;
}

#blogList p.shoplogo span {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    margin-right: 10px;
    float: left;
    opacity: 0;
}

#blogList li .recThumb,
#blogList li .blogTime {
    margin: 10px 0;
}

#blogList li dd {
	float: right;
    text-align: center;
    border-right: 1px solid #ccc;
	width:10%;
}

#blogList li dd:first-child {
    border:none;
}

/*----------------- chargeList --------------------*/

#chargeList li {
    width: 31.3%;
    margin-right: 3%;
    margin-bottom: 3%;
    float: left;
    position: relative;
    line-height: 100%;
	border:1px solid #fff;
	padding:10px;
}
#chargeList .listmode{ display:none;}
#chargeList li:nth-child(3n) {
    margin-right: 0%;
}

#chargeList li a,
#prodListMode li a {
    color: #333;
}

#chargeList li div.favorWrapper {
    position: absolute;
    top: 15px;
    right: 15px;
}

#chargeList .recThumb {
    margin-bottom: 10px;
}


#prodListMode p.favor,
#prodListMode p.addfavor {
    width: 20px;
    height: 20px;
}

#prodListMode li div.favorWrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    /*color: #fff;*/
}

.ArticleBrief {
    height: 70px;
    overflow: hidden;
}

#prodListMode .listViewTitle {
    width: 90%;
}



/*-------------- tabMenu -------------------*/

#tabMenu {
    width: auto;
    border-bottom: 1px solid #E0E0E0;
}

#tabMenu li {
    float: left;
    width: 50%;
}

#tabMenu li a {
    display: block;
    padding: 0 0 15px 0;
    text-decoration: none;
    color: #737373;
    border-bottom: 2px solid #fff;
    text-align: center;
    font-weight: normal;
}

#tabMenu li a:hover {
    border-bottom: 2px solid #E0E0E0;
}

#tabMenu li.active a {
    color: 333;
    font-weight: bold;
    border-bottom: 2px solid #C1B497;
}


/*---------qna--------*/

#qna li {
    margin-bottom: 5px;
}

#qna li em.QATopic {
    padding: 10px 0;
    cursor: pointer;
    background-image: url(../images/openItem.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: right 10px center;
    font-size: 17px;
    background-color: #f2f2f2;
    display: block;
}

#qna li em.QATopic span {
    padding-left: 40px;
    background-image: url(../images/question.svg);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: left 10px center;
}

#qna li:last-child {
    margin-bottom: 0;
}

#qna li em.itemOpen {
    background-image: url(../images/closeItem.svg);
    background-color: #ddd;
}

.qnaItem {
    overflow: auto;
    display: none;
    padding: 10px 20px 20px 40px;
    background-image: url(../images/ans.svg);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: left 10px top 15px;
}

.qnaItem a {
    display: block;
    margin-bottom: 10px;
    font-style: 16px;
}

.qnaItem a:last-of-type {
    margin-bottom: 0;
}

.ans {
    display: none;
    max-width: 600px;
    min-width: 250px
}

.question {
    font-size: 19px;
    font-weight: normal;
    text-align: center;
    background: #ededed;
    padding: 10px 0;
}