/* * w421 i-beef - RWD system type-10 * http://www.i-beef.com.tw/ * * Copyright 2015, evelyn wang * * * October 2015 */ #content #sub-nav ul { height: 50px; overflow: visible; } /* +member center *----------------------------------------------------------------------------*/ #content #sub-nav ul li { padding: 0; position: relative; } #content #sub-nav ul li ul.subnav { display: block; position: absolute; top: 50px; left: 0; z-index: 500; overflow: hidden; width: 155px; height: auto; background: rgba(191,105,89,0.8); text-align: left; } #content #sub-nav ul li ul.subnav li { padding: 10px 0; float: none; } #content #sub-nav ul li ul.subnav li a { padding: 0; width: 100%; height: 30px; display: block; line-height: 30px; font-size: 15px; color: #fff; } #content #sub-nav ul li:first-child ul.subnav { padding: 15px; } #content #sub-nav ul li:first-child ul.subnav li p { margin-bottom: 5px; font-size: 15px; color: #fff; } #content #sub-nav ul li:first-child ul.subnav li p:last-child { padding-top: 10px; border-top: 1px #ffb3b5 dotted; } #content #sub-nav ul li:first-child ul.subnav li a { color: #ffb3b5; } #content #sub-nav ul li:first-child ul.subnav li a:hover { color: #fff; } /** * * =memberInfo * **/ #member-center .memberInfo { padding: 20px; background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); overflow: hidden; } /** * * =ordering List * **/ #member-center .memberInfo #orderingList , #member-center .memberInfo #back-orderingList , #member-center .memberInfo #order-history-list { margin-bottom: 20px; overflow: hidden; } #member-center .memberInfo #orderingList > .list , #member-center .memberInfo #order-history-list > .list , #member-center .memberInfo #back-orderingList > .list { padding: 10px 5px; border-top: 1px #ddd solid; font-size: 16px; color: #666; } #member-center .memberInfo #orderingList .list .row-detail , #member-center .memberInfo #order-history-list .list .row-detail , #member-center .memberInfo #back-orderingList .list .row { overflow: hidden; } #member-center .memberInfo #orderingList .list .row-detail .item { width: 15%; float: left; } #member-center .memberInfo #orderingList .list .row-detail .item p { padding: 8px 5px; } #member-center .memberInfo #orderingList .list .row-detail .item p a , #member-center .memberInfo #order-history-list .list .row-detail p a , #member-center .memberInfo #back-orderingList .list .row p a { padding: 4px 15px; background: #000; display: inline-block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff; } #member-center .memberInfo #orderingList .list .row-detail .item p:first-child { height: 19px; border-bottom: 2px #ddd solid; display: none; } #member-center .memberInfo #orderingList .list .row-detail .item:last-child p:last-child { padding: 5px; line-height: 18px; } #member-center .memberInfo #orderingList .list .row-detail .item:first-child { width: 40%; } #member-center .memberInfo #orderingList .list .order-detail , #member-center .memberInfo #order-history-list .order-detail , #member-center .memberInfo #back-orderingList .list .order-detail { margin-top: 10px; padding: 10px 15px 5px; background: rgba(243,220,212,0.6); } #member-center .memberInfo #orderingList .list .order-detail .pro-list , #member-center .memberInfo #back-orderingList .list .order-detail .pro-list { margin-bottom: 10px; border-bottom: 1px #9f7370 solid; overflow: hidden; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list , #member-center .memberInfo #order-history-list .order-detail .list , #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list { border-top: 1px #9f7370 solid; overflow: hidden; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item , #member-center .memberInfo #order-history-list .order-detail .list .pro-item , #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item { width: 7%; float: left; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item label , #member-center .memberInfo #order-history-list .order-detail .list .pro-item label , #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item label { padding: 10px 0; border-bottom: 2px #9f7370 solid; display: none; text-align: center; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item > p , #member-center .memberInfo #order-history-list .order-detail .list .pro-item > p , #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item > p { padding: 10px 0; line-height: 100px; text-align: center; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:first-child , #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child { width: 45%; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:first-child p , #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child p , #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item:first-child p { position: relative; text-align: left; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:first-child p img , #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child p img , #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item:first-child p img { margin-right: 10px; width: 100px; height: 100px; float: left; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:first-child p a , #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child p a , #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item:first-child p a { display: table-cell; vertical-align: middle; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:first-child p b , #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child p b { margin-left: 8px; padding: 3px; background: #B05051; font-size: 12px; color: #fff; font-weight: normal; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:nth-of-type(5) , #member-center .memberInfo #order-history-list .order-detail .list .pro-item:nth-of-type(5) { width: 12%; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:last-child , #member-center .memberInfo #order-history-list .order-detail .list .pro-item:last-child { width: 15%; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list:first-child , #member-center .memberInfo #order-history-list .order-detail .list:first-child , #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list:first-child { border:none; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list:first-child .pro-item label , #member-center .memberInfo #order-history-list .order-detail .list:first-child .pro-item label , #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list:first-child .pro-item label { display: block; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list:last-child, #member-center .memberInfo #order-history-list .order-detail .list:last-child, #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list:last-child { border-top: none; } #member-center .memberInfo #orderingList .list:first-child .row-detail .item p:first-child { display: block; } #member-center .memberInfo #orderingList .list:first-child .row-detail .item p:last-child { padding-top: 15px; } #member-center .memberInfo #orderingList .list .order-detail .payDetail , #member-center .memberInfo #order-history-list .order-detail .payDetail { margin-top: 15px; padding-top: 10px; } #member-center .memberInfo #orderingList .list .order-detail .payDetail p , #member-center .memberInfo #order-history-list .order-detail .payDetail p { text-align: right; line-height: 30px; font-size: 14px; } #member-center .memberInfo #orderingList .list .order-detail .payDetail p:nth-child(2) , #member-center .memberInfo #orderingList .list .order-detail .payDetail p:nth-child(5) , #member-center .memberInfo #orderingList .list .order-detail .payDetail p:last-child , #member-center .memberInfo #order-history-list .order-detail .payDetail p:nth-child(2) , #member-center .memberInfo #order-history-list .order-detail .payDetail p:nth-child(5) , #member-center .memberInfo #order-history-list .order-detail .payDetail p:last-child { color: #a94442; } #member-center .memberInfo #orderingList .list .order-detail .sysList , #member-center .memberInfo #back-orderingList .list .order-detail .sysList { margin-top: 25px; } #member-center .memberInfo #orderingList .list .order-detail .sysList h3 , #member-center .memberInfo #back-orderingList .list .order-detail .sysList h3 { font-size: 18px; color: #B05051; } #member-center .memberInfo #orderingList .list .order-detail .sysList ul , #member-center .memberInfo #back-orderingList .list .order-detail .sysList ul { margin: 10px 0 30px; border-top: 1px #9f7370 solid; } #member-center .memberInfo #orderingList .list .order-detail .sysList ul li , #member-center .memberInfo #back-orderingList .list .order-detail .sysList ul li { border-bottom: 1px #9f7370 solid; color: #333; } #member-center .memberInfo #orderingList .list .order-detail .sysList ul li label , #member-center .memberInfo #back-orderingList .list .order-detail .sysList ul li label { margin-right: 10px; padding: 0 10px 0 5px; width: 140px; background: rgba(243,220,212,0.6); display: inline-block; line-height: 35px; text-align: right; font-weight: bold; } #member-center .memberInfo #orderingList .list .order-detail .sysList ul li article { display: inline-block; } #member-center .memberInfo #orderingList > .list:nth-child(even) { background: rgba(243,220,212,0.3); } #member-center .memberInfo #orderingList > .list:nth-child(even) .order-detail { background: rgba(255,255,255,0.5); } /** * * =ordering List * **/ #member-center .memberInfo #back-orderingList .row p { width: 25%; float: left; font-size: 16px; color: #666; } /** * * =order history List * **/ #member-center .memberInfo #order-history-list { border-bottom: 1px #ddd solid; } #member-center .memberInfo #order-history-list .list:first-child { border-top: none; } #member-center .memberInfo #order-history-list .list .row-detail p { margin-right: 25px; display: inline-block; float: left; } #member-center .memberInfo #order-history-list .list .row-detail p strong , #member-center .memberInfo #back-orderingList .list .row p strong { color: #CC2E30; } #member-center .memberInfo #order-history-list .order-detail .payDetail { border-top: 1px #9f7370 solid; } #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item:first-child { width: 79%; } /* +width:768 ↓ *----------------------------------------------------------------------------*/ @media screen and (max-width: 768px) { #member-center .memberInfo #orderingList .list .row-detail .item , #member-center .memberInfo #orderingList .list .row-detail .item:first-child { width: 50%; } #member-center .memberInfo #orderingList .list:first-child .row-detail .item p:first-child { border-bottom: none; display: inline-block; } #member-center .memberInfo #orderingList .list:first-child .row-detail .item p:last-child { padding: 8px 5px; display: inline-block; } #member-center .memberInfo #orderingList .list .row-detail .item:last-child p:first-child { display: none; } #member-center .memberInfo #back-orderingList .row p { margin-bottom: 10px; width: 50%; } #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item:first-child { width: 61%; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item, #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item { width: 13%; } #member-center .memberInfo #order-history-list .order-detail .list .pro-item , #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child , #member-center .memberInfo #order-history-list .order-detail .list .pro-item:nth-of-type(5) , #member-center .memberInfo #order-history-list .order-detail .list .pro-item:last-child { width: 100%; border-bottom: 1px #bbb dotted; } #member-center .memberInfo #order-history-list .order-detail .list .pro-item:last-child { border-bottom: none; } #content-main #member-center .memberInfo #order-history-list .order-detail .list .pro-item label { margin-right: 15px; display: inline-block; border-bottom: none; } #content-main #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child label { display: none; } #member-center .memberInfo #order-history-list .order-detail .list .pro-item > p { display: inline-block; line-height: 170%; } #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child p span { margin-bottom: 5px; display: block; } #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child p span img { margin: 0; width: 100%; height: auto; float: none; } #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child p a { } } /* +width:640 ↓ *----------------------------------------------------------------------------*/ @media screen and (max-width: 640px) { #content #sub-nav ul li a { padding: 15px 10px; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:first-child, #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child , #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:nth-of-type(5), #member-center .memberInfo #order-history-list .order-detail .list .pro-item:nth-of-type(5) , #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item, #member-center .memberInfo #order-history-list .order-detail .list .pro-item, #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item , #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:last-child, #member-center .memberInfo #order-history-list .order-detail .list .pro-item:last-child{ width: 100%; border-bottom: 1px #bbb dotted; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:last-child , #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item:last-child { border-bottom: none; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:first-child label , #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child label { display: none; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:first-child p a , #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child p a , #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item:first-child p a { margin-top: 15px; display: block; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:first-child p span, #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child p span , #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item:first-child p span { display: block; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item:first-child p span img, #member-center .memberInfo #order-history-list .order-detail .list .pro-item:first-child p span img , #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item:first-child p span img { width: 100%; height: auto; float: none; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list:first-child .pro-item label, #member-center .memberInfo #order-history-list .order-detail .list:first-child .pro-item label , #content-main #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item label { padding: 10px; display: inline-block; border-bottom: none; } #member-center .memberInfo #orderingList .list .order-detail .pro-list .list .pro-item > p, #member-center .memberInfo #order-history-list .order-detail .list .pro-item > p , #content-main #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item > p { display: inline-block; line-height: 170%; } #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item:first-child { width: 100%; } #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list:first-child .pro-item:first-child label { display: none; } #member-center .memberInfo #back-orderingList .list .order-detail .pro-list .list .pro-item > p { display: block; } } /* +width:480 ↓ *----------------------------------------------------------------------------*/ @media screen and (max-width: 480px) { #member-center .memberInfo #orderingList .list .row-detail .item, #member-center .memberInfo #orderingList .list .row-detail .item:first-child { width: 100%; } #member-center .memberInfo #orderingList .list .order-detail .sysList ul li, #member-center .memberInfo #back-orderingList .list .order-detail .sysList ul li { padding-bottom: 10px; } #member-center .memberInfo #orderingList .list .order-detail .sysList ul li label, #member-center .memberInfo #back-orderingList .list .order-detail .sysList ul li label { margin: 0 0 10px; width: auto; display: block; text-align: left; } #member-center .memberInfo #back-orderingList .row p { width: 100%; } #member-center .memberInfo #order-history-list .list .row-detail p { margin: 0 0 10px; width: 100%; } }