* {
    box-sizing: border-box;
    font-family: verdana, 'Microsoft JhengHei';
    color: #333;
    outline: none;
}

body {
    background: url(../images/bg.png) no-repeat top center / 100% auto, url(../images/foot.png) no-repeat no-repeat bottom center / 100% auto;
    background-color: #f9f9f9;
    font-size: 16px;
}

.wrp {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 250px;
}

.head {
    padding-top: 5px;
    position: relative;
}

.head .logo {
    background: url(../images/logo.png) no-repeat;
    background-size: 100% auto;
    display: inline-block;
    width: 200px;
    height: 90px;
    margin-top: 20px;
}

.head .points {
    color: #fff;
    background-color: rgba(255, 182, 196, .5);
    border-radius: 30px;
    height: 40px;
    line-height: 36px;
    font-size: 13px;
    background-image: url(../images/daimond.png);
    background-repeat: no-repeat;
    background-position: 15px 10px;
    padding: 0 40px 0 50px;
    float: right;
    margin-right: 30px;
    cursor: pointer;
    margin-top: 35px;
    transition: background-color .3s;
    position: relative;
}

.head .points:hover {
    background-color: rgba(255, 182, 196, .3);
}

.head .points span {
    color: #fff;
    font-size: 16px;
    margin-left: 10px;
    position: relative;
    top: 1px;
    font-family: 'Arial Black','verdana';
    font-weight: bold;
    letter-spacing: 1px;
}

.head .points:after {
    content: '';
    width: 20px;
    height: 20px;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDkwIDQ5MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDkwIDQ5MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiBjbGFzcz0iIj48Zz48Zz4KCTxwYXRoIGQ9Ik0yNDUsMEMxMDkuNywwLDAsMTA5LjcsMCwyNDVzMTA5LjcsMjQ1LDI0NSwyNDVzMjQ1LTEwOS43LDI0NS0yNDVTMzgwLjMsMCwyNDUsMHogTTMxNSwyODcuN2wtOTAuNSw5MC41bC00Mi43LTQyLjcgICBsOTAuNS05MC41bC05MC41LTkwLjVsNDIuNy00Mi43bDkwLjUsOTAuNWw0Mi43LDQyLjdMMzE1LDI4Ny43eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojRkZGRkZGIiBkYXRhLW9sZF9jb2xvcj0iI0Q0RDRENCI+PC9wYXRoPgo8L2c+PC9nPiA8L3N2Zz4=) no-repeat;
    background-size: auto 100%;
    position: absolute;
    right: 11px;
    top: 10px;
}


.head .member {
    float: right;
    margin-top: 35px;
}

.head .member span {
    color: #fff;
    vertical-align: middle;
    margin-right: 10px;;
}

.head .member div {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    display: inline-block;
    vertical-align: middle;
}

.head .member div img {
    width: 100%;
    height: 100%;
}

.head .rwdmenu {
    display: none;
    position: absolute;
    right: 0;
    top: 73px;
    padding: 0 15px 10px;
    z-index: 3;
}

.head .rwdmenu:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 4px 4px 4px;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    right: 15px;
    top: 0;
}

.head .rwdmenu:after {
    content: '';
    background: #fff;
    width: 100%;
    height: 100%;  
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 3px 0 rgba(0,0,0,0.02), 0 0 5px 0 rgba(0,0,0,0.03);
    -moz-box-shadow: 0 5px 3px 0 rgba(0,0,0,0.02), 0 0 5px 0 rgba(0,0,0,0.03);
    box-shadow: 0 5px 3px 0 rgba(0,0,0,0.02), 0 0 5px 0 rgba(0,0,0,0.03); 
    position: absolute;
    top: 4px;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.banner {
    height: 350px;
    margin-top: 15px;
}

.banner .swiper-container {
    width: 100%;
    height: 100%;
}

.banner .swiper-slide {
    overflow: hidden;
    border-radius: 5px 5px 0 0;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.banner .swiper-slide img {
    height: 100%;
    cursor: pointer;
}

.sortbar {
    background: #e4e4e4;
    border-radius: 0 0 5px 5px;
    height: 60px;
    padding: 15px 20px;
    letter-spacing: 0.5px;
}

.sortbar .pfilter {
    display: inline;
}

.sortbar .pfilter span,
.sortbar .psort span {
    font-size: 15px;
}

.sortbar select:not(.kronos-select-year):not(.kronos-select-month),
.amount select,
.address select {
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    outline:none;
    padding: 7px 35px 7px 15px;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    color: #666;
    margin-left: 10px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDI5Mi4zNjIgMjkyLjM2MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjkyLjM2MiAyOTIuMzYyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PGc+Cgk8cGF0aCBkPSJNMjg2LjkzNSw2OS4zNzdjLTMuNjE0LTMuNjE3LTcuODk4LTUuNDI0LTEyLjg0OC01LjQyNEgxOC4yNzRjLTQuOTUyLDAtOS4yMzMsMS44MDctMTIuODUsNS40MjQgICBDMS44MDcsNzIuOTk4LDAsNzcuMjc5LDAsODIuMjI4YzAsNC45NDgsMS44MDcsOS4yMjksNS40MjQsMTIuODQ3bDEyNy45MDcsMTI3LjkwN2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOCAgIHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhMMjg2LjkzNSw5NS4wNzRjMy42MTMtMy42MTcsNS40MjctNy44OTgsNS40MjctMTIuODQ3QzI5Mi4zNjIsNzcuMjc5LDI5MC41NDgsNzIuOTk4LDI4Ni45MzUsNjkuMzc3eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojNEM0QzRDIiBkYXRhLW9sZF9jb2xvcj0iIzRjNGM0YyI+PC9wYXRoPgo8L2c+PC9nPiA8L3N2Zz4=') #fff no-repeat 50% 50%;
    background-size: 8px auto;
    background-position: bottom 50% right 15px;
    cursor: pointer;    
}

select::-ms-expand { display: none; }

.sortbar .psort {
    float: right;
    margin-top: 5px;
}

.sortbar .psort div {
    display: inline;
    font-size: 14px;
    margin-left: 10px;
}

.sortbar .psort div a {
    font-size: 14px;
    text-decoration: none;
    transition: color .3s;
}

.sortbar .psort div a:hover {
    color: #888;
}

.main {
    background: url(../images/bnbg.png) no-repeat center top; 
    padding-top: 1px;
    background-size: 100% auto;
}

.main h5,
.psnwrp h5 {
    text-align: center;
    font-size: 28px;
    letter-spacing: 1px;
    background: url(../images/titlebg.jpg) no-repeat center bottom;
    line-height: 65px;
    margin-bottom: 55px;
}

.main ul {
    padding: 0;
    margin: 0;
}

.main ul:after{
    content: '';
    display: block;
    clear: both;
}

.main li {
    background: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 3px 0 rgba(0,0,0,0.02), 0 0 5px 0 rgba(0,0,0,0.03);
    -moz-box-shadow: 0 5px 3px 0 rgba(0,0,0,0.02), 0 0 5px 0 rgba(0,0,0,0.03);
    box-shadow: 0 5px 3px 0 rgba(0,0,0,0.02), 0 0 5px 0 rgba(0,0,0,0.03);
    overflow: hidden;
    transition: box-shadow .3s;
    position: relative;
    margin-bottom: 70px;
    width: 22%;
    float: left;
    margin-right: 4%;
    cursor: pointer;
}

.main li:nth-child(4n+4) {
    margin-right: 0;
}

.main li:hover {
    -webkit-box-shadow: 0 5px 3px 0 rgba(0,0,0,0.02), 0 0 20px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 5px 3px 0 rgba(0,0,0,0.02), 0 0 20px 0 rgba(0,0,0,0.2);
    box-shadow: 0 5px 3px 0 rgba(0,0,0,0.02), 0 0 20px 0 rgba(0,0,0,0.2);    
}

.main li div {
    height: 220px;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.main li label, .pdpic label {
    background: url(../images/tag.png) no-repeat;
    width: 45px;
    height: 53px;
    position: absolute; 
    top: -1px;
    left: 15px;
    z-index: 2;
    color: #fff;
    font-size: 12px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center; 
    font-weight: bold; 
    padding: 0 5px 8px 3px;
    line-height: 14px;
}

.main li .soldout {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url(../images/soldout.png);
    background-color: rgba(255, 255, 255, .5);
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 3;
}

.main li img {
    position: absolute;
    left: 50%;
    height: 100%;
    width: auto;
    transform: translateX(-50%);
}

.main li h4 {
    padding: 18px 15px 0;
    margin: 0 0 10px;
    color: #444;
    transition: color .3s;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 60px;
    line-height: 22px;
}

.main li span {
    display: block;
    height: 16px;
}

.main li span.sale {
    color: #777;
    padding-left: 20px;
    font-size: 14px;
    margin-left: 15px;
    text-decoration: line-through;    
    background: url(../images/daimond2.png) no-repeat 0 50%;
    background-size: auto 12px;    
}

.main li p {
    color: #de5283;
    font-family: 'Arial Black','verdana';
    font-weight: bold;
    background: url(../images/daimond.png) no-repeat 15px 50%;
    background-size: auto 15px;
    padding-left: 40px;
    margin-top: 10px;
    letter-spacing: 0.5px;
    font-size: 18px;
}

.main .more {
    background: #4eb7d7;
    padding: 10px 0;
    margin: 0 auto 70px;
    color: #fff;
    border-radius: 50px;
    display: block;
    font-size: 20px;
    text-decoration: none;
    width: 120px;
    text-align: center;
    transition: background .3s;
}

.main .more:hover {
    background: #80ddee;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;    
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 6px;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 15px;
}

.swiper-pagination-bullet {
    background: #fff;
    opacity: 1;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);    
}

.swiper-pagination-bullet-active {
    background: #f13c78;
}

.swiper-pagination {
    text-align: right;
    padding-right: 15px;
}

.mask {
    background: rgba(0,0,0,0.7);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    overflow-y: scroll;
}

.pdwrp, .psnwrp {
    width: 100%;
    max-width: 900px;
    background: #f5f5f5;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100px;
    padding: 50px;
    margin-bottom: 100px;
}

.pdwrp .close,
.psnwrp .close {
    width: 25px;
    height: 25px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0NCA0NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDQgNDQiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiBjbGFzcz0iIj48Zz48cGF0aCBkPSJtMjIsMGMtMTIuMiwwLTIyLDkuOC0yMiwyMnM5LjgsMjIgMjIsMjIgMjItOS44IDIyLTIyLTkuOC0yMi0yMi0yMnptMy4yLDIyLjRsNy41LDcuNWMwLjIsMC4yIDAuMywwLjUgMC4zLDAuN3MtMC4xLDAuNS0wLjMsMC43bC0xLjQsMS40Yy0wLjIsMC4yLTAuNSwwLjMtMC43LDAuMy0wLjMsMC0wLjUtMC4xLTAuNy0wLjNsLTcuNS03LjVjLTAuMi0wLjItMC41LTAuMi0wLjcsMGwtNy41LDcuNWMtMC4yLDAuMi0wLjUsMC4zLTAuNywwLjMtMC4zLDAtMC41LTAuMS0wLjctMC4zbC0xLjQtMS40Yy0wLjItMC4yLTAuMy0wLjUtMC4zLTAuN3MwLjEtMC41IDAuMy0wLjdsNy41LTcuNWMwLjItMC4yIDAuMi0wLjUgMC0wLjdsLTcuNS03LjVjLTAuMi0wLjItMC4zLTAuNS0wLjMtMC43czAuMS0wLjUgMC4zLTAuN2wxLjQtMS40YzAuMi0wLjIgMC41LTAuMyAwLjctMC4zczAuNSwwLjEgMC43LDAuM2w3LjUsNy41YzAuMiwwLjIgMC41LDAuMiAwLjcsMGw3LjUtNy41YzAuMi0wLjIgMC41LTAuMyAwLjctMC4zIDAuMywwIDAuNSwwLjEgMC43LDAuM2wxLjQsMS40YzAuMiwwLjIgMC4zLDAuNSAwLjMsMC43cy0wLjEsMC41LTAuMywwLjdsLTcuNSw3LjVjLTAuMiwwLjEtMC4yLDAuNSAzLjU1MjcxZS0xNSwwLjd6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiNCQkJBQkEiIGRhdGEtb2xkX2NvbG9yPSIjQkRCQkJCIj48L3BhdGg+PC9nPiA8L3N2Zz4=') no-repeat;
    background-size: 100%;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    transition: opacity .3s;
}

.pdwrp .close:hover,
.psnwrp .close:hover {
    opacity: .6;
}

.pdpic {
    width: 45%;
    float: left;
    position: relative;
}

.pdpic img {
    width: 85%;
}

.pdinfo {
    width: 55%;
    float: right;
}

.pdinfo h4,
.popup h4 {
    font-size: 20px;
    margin: 0 0 20px;
    line-height: 30px;
}

.pdinfo h4 span {
    font-size: 14px;
    font-weight: normal;
    color: #e6839e;
    margin-left: 10px;
    display: block;
}

.pdinfo label {
    background: url(../images/daimond.png) 0 6px no-repeat;
    background-size: auto 17px;
    padding: 0 0 0 30px;
    color: #de5283;
    font-family: 'Arial Black','verdana';
    font-weight: bold;
    letter-spacing: 0.5px;
    font-size: 20px;
}

.pdintro {
    overflow: hidden;
}

.pdinfo p {
    font-size: 14px;
    line-height: 26px;
    color: #666;
    margin: 20px 0 30px;
}

.amount span {
    font-size: 14px;
}

.amount button,
.psnwrp button,
.popup button {
    background: #e73c74;
    border-radius: 30px;
    color : #fff;
    padding: 8px 20px;
    border: none;
    font-size: 20px;
    cursor: pointer;
    letter-spacing: 1px;
    text-indent: 2px;
    transition: background .3s;
    float: right;
    margin-top: -4px;
}

.amount button:hover,
.psnwrp button:hover {
    background: #f789a2;
}

.amount button.disable,
.psnwrp button.disable {
    background: #ccc;
    cursor: default;
}

.pdatt {
    margin-top: 50px;
    background: #fff;
    border-radius: 5px;
    padding: 10px 30px;
}

.pdatt div {
    font-size: 14px;
    line-height: 28px;
    color: #666;
    overflow: hidden;
    display: none;
    padding: 15px 0 20px;
    border-top: 1px solid #ececec;
    margin-top: 10px;
}

.pdatt div.open {
    height: auto;
}

.pdatt button {
    background: #fff;
    border: none;
    padding: 5px 0;
    cursor: pointer;
    margin: 0 auto;
    width: 100%;
    display: block;
    text-indent: -20px;
    letter-spacing: 1px;
}

.pdatt button:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #666 transparent transparent transparent;
    margin-left: 10px;
    margin-top: -3px;
    display: inline-block;
    vertical-align: middle;    
}

.psnwrp .table,
.pointsrc .table {
    display: table;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    table-layout: fixed;
}

.psnwrp .tr,
.pointsrc .tr {
    display: table-row;   
}

.psnwrp .td,
.pointsrc .td {
    display: table-cell;
    padding: 13px 0;
}
.psnwrp .td:first-child {
    width: 100px;
}
.psnwrp .table input {
    padding: 13px 10px;
    border: none;
    border-radius: 3px;
    font-size: 15px;
    color: #666;
    width: 100%;
}

.psnwrp .table .pst {
    width: 70px;
}

.psnwrp h5 {
    margin: 0 0 30px;
}

.psnwrp .address select {
    padding: 14px 35px 14px 15px;
    margin-left: 15px;
}

.psnwrp .ddct {
    font-size: 16px;
    text-align: center;
    letter-spacing: 1px;
    font-weight: bold;
}

.psnwrp .ddct span {
    color: #e73c74;
}

.psnwrp button {
    float: none;
    margin: 40px auto 0;
    display: block;
}

.psnwrp {
    padding-top: 30px;
}

.pointsrc h5 {
    margin-bottom: 45px;
}

.pointsrc .table {
    max-width: 1100px;
    font-size: 15px;
    margin-bottom: 50px;
}

.pointsrc .td {
    border-bottom: 1px solid #e8e8e8;
    padding: 13px 0;
    line-height: 26px;
}

.pointsrc .td p {
    margin: 0 0 3px;
    font-size: 14px;
    color: #ea618e;
    display: inline;
}

.pointsrc .td p span {
    display: inline-block;
    background: #e73c74;
    color: #fff;
    padding: 0 6px;
    font-size: 13px;
    border-radius: 3px;
    line-height: 20px;
    margin: 0 6px 0 14px;
}
.pointsrc .td p b {
    color: #aaa;
    font-weight: normal;
    font-size: 13px;
    margin: 0 10px 0 5px;
}


.pointsrc .rf {
    color: #df5079;
}

.pointwrp {
    background: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 3px 0 rgba(0,0,0,0.02), 0 0 5px 0 rgba(0,0,0,0.03);
    -moz-box-shadow: 0 5px 3px 0 rgba(0,0,0,0.02), 0 0 5px 0 rgba(0,0,0,0.03);
    box-shadow: 0 5px 3px 0 rgba(0,0,0,0.02), 0 0 5px 0 rgba(0,0,0,0.03);
    padding: 30px 50px 50px;
}

.pointwrp div.tr div:first-child {
    font-size: 14px;
    letter-spacing: 1px;
    padding-right: 30px;
    width: 150px;  
    padding-left: 15px;
} 

.pointwrp div.tr div:last-child {
    padding-left: 25px;
    width: 100px;
}

.pointwrp .table > div:first-child div {
    color: #999;
    font-size: 14px;
}

.pointwrp div.tr div:last-child {
    text-align: center;
}

.pointwrp div.tr:hover:not(:first-child) {
    background: #f4f4f4;
}

.pointwrp .norecord {
    font-size: 15px;
    color: #555;
    margin: 50px 0 30px;
    text-align: center;
}


.pagination {
    text-align: center;
}
  
.pagination a {
    display: inline-block;
    padding: 8px 12px;
    text-decoration: none;
    transition: background-color .3s;
    font-size: 14px;
    border-radius: 30px;
    margin: 0 3px;
    cursor: pointer;
}

.pagination a.active {
    background-color: #e5397a;
    color: white;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
}

.kronos-outer .kronos-input {
    border: none;
    border-radius: 3px;
    vertical-align: middle;
    height: 29px;
    font-size: 14px;
    color: #555;
    width: 170px;
    text-align: center;
    text-indent: 20px;
}

.kronos-head .kronos-title {
    color: #fff;
}

.kronos-viewer {
    width: 250px;
}

.kronos-body table tbody tr td button {
    height: 30px;
}

.kronos-head .kronos-select-year {
    width: 70px;
    margin: 0;
    font-size: 14px;    
}

.kronos-head .kronos-select-month {
    margin: 0;
    font-size: 14px;    
}

.kronos-body {
    padding: 0 3px 4px;
}

.kronos-head {
    padding-bottom: 5px;
}

.kronos-head .kronos-prev-year {
    left: 5px;
}

.kronos-head .kronos-next-year {
    right: 5px;    
}

.kronos-head .kronos-prev-month {
    left: 30px;
}

.kronos-head .kronos-next-month {
    right: 30px; 
}

.kronos-body table tbody tr td button:focus, 
.kronos-outer .kronos-viewer .kronos-inner .kronos-body table tbody tr td button:hover {
    border-color: #e76285 !important;
}

.kronos-body table tbody tr td.today button {
    background: #64c6e3;
}

.kronos-body table tbody tr td.satday button,
.kronos-body table tbody tr td.sunday button {
    color: #000;
}

.kronos-head select:focus {
    border-color: #e76285;
}

.kronos-body table tbody tr td.selected button {
    border-color: #e53966;
    background: #e53966;    
}

.kronos-outer input {
    background: url(../images/calendar.png) #fff no-repeat 10px 50%; 
}

.kronos-outer .kronos-input {
    padding-right: 15px;
}

.sortbar .pfilter .kronos-outer ~ span {
    margin: 0 5px;
    color: #666;
}

#kronos-s {
    margin-left: 10px;
}

button.srch {
    background: #e73c74;
    border-radius: 3px;
    color : #fff;
    padding: 7px 13px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: 2px;
    text-indent: 2px;
    transition: background .3s;
    margin-left: 10px;
    cursor: pointer;
}

button.srch:hover {
    background: #f789a2;
}

.centr {
    text-align: center;
}

.loadin {
    background-image: url(../images/loading.svg);
    width: 100%;
    height: 100%;
    background-size: 80px 80px;
    background-color: rgba(0,0,0,0.7);
    background-position: center center;
    background-repeat: no-repeat;
    position: fixed;
    z-index: 3;
}

.popup {
    width: 100%;
    max-width: 450px;
    background: #f5f5f5;
    border-radius: 10px;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 50px;
    margin-top: -150px;  
    text-align: center;
}

.popup h4 {
    margin-bottom: 30px;
}

.popup button {
    float: none;
}

.direction {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1330px;
    margin: 0 auto;
    pointer-events: none;
    z-index: 9;
}
.direction a {
    width: 103px;
    height: 96px;
    background: url(../images/daimond3.png) no-repeat;
    display: block;
    float: right;
    transition: filter .3s;
    pointer-events: visible;
}

.direction a:hover {
    -webkit-filter: brightness(.75);
    filter: brightness(.75);
}

.pointexpiry {
    border-radius: 5px;
    background: #f4f4f4; 
    padding: 10px;
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
}

.pointexpiry div:first-child {
    padding: 10px;
    font-weight: bold;
    color: #444;
    display: inline-block;
}

.pointexpiry div:first-child span {
    color: #de5283;
    font-family: 'Arial Black','verdana';
    font-weight: bold;
    letter-spacing: 1px;
    padding-left: 50px;  
    background-image: url(../images/daimond.png);
    background-repeat: no-repeat;
    background-position: 15px 3px;
    font-size: 20px;
}

.pointexpiry div:first-child span b {
    font-weight: normal;
    font-size: 12px;
    margin-right: 8px;
    color: #de5283;
    position: relative;
    bottom: 3px;   
}

.pointexpiry div:last-child {
    border-radius: 5px;
    border: 1px solid #ececec;
    background: #fff;
    position: relative;
    min-width: 35%;
    padding: 0 20px;
    max-height: 45px;
    overflow: hidden;
    transition: max-height .3s;
    cursor: pointer;
    float: right
}

.pointexpiry div:last-child.moreinfo {
    max-height: 105px;
}

.pointexpiry div:last-child span {
    float: right;
    margin-left: 20px;
    color: #de5283;
    font-family: 'Arial Black','verdana';
    font-weight: bold;
    letter-spacing: 1px;
    padding-left: 22px;  
    background: url(../images/daimond.png);
    background-repeat: no-repeat;
    background-position: 0 2px;
    background-size: 17px;  
}

.pointexpiry div:last-child span b {
    font-weight: normal;
    font-size: 12px;
    margin-right: 5px;
    color: #de5283;
    position: relative;
    bottom: 1px;  
}

.pointexpiry div:last-child p {
    font-size: 15px;
    color: #444;
    margin: 13px 0;
}


.hasico div:last-child {
    padding-right: 50px;
}

.hasico div:last-child:after {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDU1Ljk5MiA0NTUuOTkyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NTUuOTkyIDQ1NS45OTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgY2xhc3M9IiI+PGcgdHJhbnNmb3JtPSJtYXRyaXgoLTEuODM2OTdlLTE2IDEgLTEgLTEuODM2OTdlLTE2IDQ1NS45OTIgMCkiPjxnPgoJPGc+CgkJPGc+CgkJCTxwYXRoIHN0eWxlPSJmaWxsOiM5OTk5OTkiIGQ9Ik0yMjcuOTk2LDBDMTAyLjA4MSwwLDAsMTAyLjA4MSwwLDIyNy45OTZjMCwxMjUuOTQ1LDEwMi4wODEsMjI3Ljk5NiwyMjcuOTk2LDIyNy45OTYgICAgIGMxMjUuOTQ1LDAsMjI3Ljk5Ni0xMDIuMDUxLDIyNy45OTYtMjI3Ljk5NkM0NTUuOTkyLDEwMi4wODEsMzUzLjk0MSwwLDIyNy45OTYsMHogTTI5OS40MzUsMjM4Ljc4OGwtOTguNTg1LDk4LjU4NSAgICAgYy01LjkyOCw1Ljg5Ny0xNS41NjUsNS44OTctMjEuNDkyLDBjLTUuOTI4LTUuOTI4LTUuOTI4LTE1LjU5NSwwLTIxLjQ5Mmw4Ny44ODUtODcuODg1bC04Ny44ODUtODcuODg1ICAgICBjLTUuOTI4LTUuOTI4LTUuOTI4LTE1LjU2NSwwLTIxLjQ5MnMxNS41NjUtNS45MjgsMjEuNDkyLDBsOTguNTg1LDk4LjU4NWMzLjA0LDIuOTc5LDQuNDY5LDYuOTAxLDQuNDM4LDEwLjc5MiAgICAgQzMwMy44NzMsMjMxLjkxOCwzMDIuNDE0LDIzNS44MDksMjk5LjQzNSwyMzguNzg4eiIgZGF0YS1vcmlnaW5hbD0iIzAxMDAwMiIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBkYXRhLW9sZF9jb2xvcj0iIzAxMDAwMiI+PC9wYXRoPgoJCTwvZz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KPC9nPjwvZz4gPC9zdmc+);
    content: '';
    width: 18px;
    height: 18px;
    background-size: 100%;
    position: absolute;
    right: 12px;
    top: 12px;
    transition: all .3s;
}

.pointexpiry .moreinfo:last-child:after{
    transform: rotate(180deg);
}

.pointexpiry i {
    font-style: normal;
    margin-bottom: 5px;
}