.spa-page-desc { font-size: 13px; color: #333333; } .spa-page-desc .advantage { padding: 15px; } .spa-page-desc .advantage-title { width: 100%; text-align: center; font-size: 16px; font-weight: bold; position: relative; height: 44px; line-height: 44px; overflow: hidden; } .spa-page-desc .advantage-title-self { background-color: #8bc34a; width: 50%; color: #ffffff; border-radius: 22px 0 0 22px; } .spa-page-desc .advantage-title-blank { position: absolute; left: 44%; top: -50%; z-index: 1; transform: rotate(-66deg); -webkit-transform: rotate(23deg); width: 12%; height: 200%; background-color: #efeff4; } .spa-page-desc .advantage-title-sign { position: absolute; left: 50%; top: 50%; z-index: 2; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .spa-page-desc .advantage-title-other { background-color: #cdced0; width: 50%; color: #666666; border-radius: 0 22px 22px 0; } .spa-page-desc .advantage-detail { border-radius: 6px; margin: 20px 0; overflow: hidden; } .spa-page-desc .advantage-detail ul { padding: 0; margin: 0; } .spa-page-desc .advantage-detail-cell { position: relative; height: 44px; line-height: 44px; text-align: left; font-size: 13px; color: #ffffff; } .spa-page-desc .advantage-detail-cell .cell-left, .spa-page-desc .advantage-detail-cell .cell-right { padding-left: 10px; width: 50%; } .spa-page-desc .advantage-detail-cell .cell-arrow { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-repeat: no-repeat; background-size: cover; width: 5px; height: 8px; } .spa-page-desc .advantage-detail-cell:nth-child(odd) .cell-left { background-color: #9ccc65; } .spa-page-desc .advantage-detail-cell:nth-child(even) .cell-left { background-color: #84ba47; } .spa-page-desc .advantage-detail-cell:nth-child(odd) .cell-right { background-color: #d4d5d7; } .spa-page-desc .advantage-detail-cell:nth-child(even) .cell-right { background-color: #c3c4c6; } .spa-page-desc .advantage-detail-cell:nth-child(odd) .cell-arrow { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAARCAMAAAA8P6bpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAYFBMVEWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGWczGX///8CoIk/AAAAHnRSTlMAnwrPJO9P/ocDvhbkO/pvqQyspWzjOLwVhEwhngiqTKsIAAAAAWJLR0QfBQ0QvQAAAE5JREFUCNdFzksSgCAMA1BQUfyhooDf3P+Y7pKu3nQ6TYytDAd1I8O1Mjrf08AwyphmGWGRgXWTEeWd+3DwPmX+KSdzL+a6Wz0f9nw/8gc1xArT3KJM0wAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0wNS0xOFQwMzowODo0MCswMDowMNGYU3kAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTUtMDUtMThUMDM6MDg6NDArMDA6MDCgxevFAAAAAElFTkSuQmCC); } .spa-page-desc .advantage-detail-cell:nth-child(even) .cell-arrow { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAARCAMAAAA8P6bpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAYFBMVEWEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukeEukf////06S1NAAAAHnRSTlMAnwrPJO9P/ocDvhbkO/pvqQyspWzjOLwVhEwhngiqTKsIAAAAAWJLR0QfBQ0QvQAAAE5JREFUCNdFzksSgCAMA1BQUfyhooDf3P+Y7pKu3nQ6TYytDAd1I8O1Mjrf08AwyphmGWGRgXWTEeWd+3DwPmX+KSdzL+a6Wz0f9nw/8gc1xArT3KJM0wAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0wNS0xOFQwMzoyMDozOSswMDowMAV+5oYAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTUtMDUtMThUMDM6MjA6MzkrMDA6MDB0I146AAAAAElFTkSuQmCC); } .spa-page-desc .group-title { height: 32px; line-height: 32px; color: #ffffff; background-color: #8bc34a; padding-left: 15px; font-size: 16px; width: 112px; border-radius: 0 16px 16px 0; font-weight: bold; } .spa-page-desc .group-detail { background-color: white; padding: 15px; } .spa-page-desc .product-title { color: #333333; font-size: 16px; } .spa-page-desc .price-table { border-width: 1px; border-color: #e3f1d4; border-style: solid; width: 100%; background-color: rgba(232, 243, 219, 0.6); margin: 15px 0; } .spa-page-desc .price-table th, .spa-page-desc .price-table td { width: 20%; text-align: center; height: 40px; border-width: 0 1px 1px 0; border-color: #deeecb; border-style: solid; } .spa-page-desc .price-table tr td:last-child, .spa-page-desc .price-table tr th:last-child { border-right-width: 0; } .spa-page-desc .price-table tr:last-child td, .spa-page-desc .price-table tr:last-child th { border-bottom-width: 0; } .spa-page-desc .price-table th { color: #a2cf6e; font-size: 12px; } .spa-page-desc .price-table td { color: #333333; font-size: 12px; } .spa-page-desc .price-table .pet-type { font-size: 15px; } .spa-page-desc .product-desc { color: #666666; font-size: 10px; margin-bottom: 10px; } /* process */ .spa-page-desc .process ul { padding: 0; margin: 0; list-style: none; } .spa-page-desc .process-box { width: 100%; } .spa-page-desc .process-line { width: 20px; position: relative; } .spa-page-desc .process ul li:first-child .line { top: 20px; } .spa-page-desc .process ul li:last-child .line { height: 20px; } .spa-page-desc .process-line .line { width: 1px; height: 100%; background-color: #8bc34a; position: absolute; top: 0; right: 13px; z-index: 1; } .spa-page-desc .process-line .arrow { width: 6px; height: 9px; position: absolute; top: 16px; right: 0; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAYAAABvqT8MAAAAzklEQVQoU5WSTQ6CMBBGOwgFExMTNwLRpWdQ8SD+7eGybKvGLjRGEyMrvMDYEjGkgoNdz5t5802BtXxpmjrhpL+ENvWnh/C9Lk8AMSSBe36cosW2gMzVzRsBIQQfjOwVACyqFrVAVcFU/gKuuZx1LNyUCo1AoTC218Ag+hVEMeGc7QLXc2KdApUa3J77yALVGZFTxUVKfwOaumSH0OGQqAh9asonJSml2xuiWprNyaWrBZRi7eHeirFSDMjDlQVNdyE/n6lIAuZhWwEaKhVfsaBQAjKbP8QAAAAASUVORK5CYII=) no-repeat; background-size: cover; } .spa-page-desc .process-line .circle { width: 7px; height: 7px; border: 1px solid #8bc34a; border-radius: 50%; position: absolute; top: 17px; right: 10px; z-index: 2; background: white; } .spa-page-desc .process-step { background-color: rgba(232, 243, 219, 0.6); border-radius: 5px; padding: 10px; margin-bottom: 10px; } /* notes */ .spa-page-desc .notes .group-detail { padding-bottom: 30px; }