@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;500&family=Noto+Serif+TC:wght@500&display=swap');
@import url('reveal.css');

html,
body {
    position: relative;
    width: 100%;
    font-family: 'Noto Sans TC', 'raleway', 'Montserrat Hairline', sans-serif, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 11pt;
    color: #000;
    margin: 0;
    padding: 0;
}


.bodyBg {
    background: url(../images/xl_aboutBg.png);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Noto Sans TC', 'GoudyHeavyfaceBT', 'GFS Didot Regular';
    font-weight: normal;
}

h5 {
    font-size: 1.2rem;
}

h1 {
    font-size: 2rem;
}

ul li,
p {
    font-size: 1rem;
}

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

.form-horizontal .form-group{margin: 0;}

a:hover {
    color: #fc9804;
}

a:hover .bannerTit {
    color: #fffc3d;
}

a.a1 {
    color: #f5b96b;
    text-decoration: none;
}

a.a1:hover {
    color: #df8714;
}

a.a2 {
    color: #fff;
    text-decoration: none;
}

a.a2:hover {
    color: #ecff82;
}

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

a.a3:hover {
    color: #ff9100;
}


a.a4 {
    color: #4d4d4d;
    text-decoration: none;
}

a.a4:hover {
    color: #0066b3;
}

a.hover {
    color: #0066b3;
}

a.a5 {
    color: #0066b3;
}

a.a5:hover {
    color: #ff9100;
    text-decoration: none;
}
a.a6{color: #f7929a;}
a.a6:hover{color: #ff9100;}

body,
div,
button,
ul,
a,
label,
button,
.btn {
    font-family: 'Noto Sans TC', 'raleway';
}

div {
    display: block;
    overflow: hidden;
}

ul li,
p {
    line-height: 2;
    font-size: 1.2rem;
}


input::placeholder {
    color: #808080;
    opacity: 1;
    /* Firefox */
}

input::-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #808080;
}

input::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #808080;
}


.topBtnGrp .footerFb,.topBtnGrp .footerLine{
    width:50px;
    margin-left: 2px;
}
.card-body{padding: 0.5rem;}
.row.hotNewPcGrp{margin-top: 1rem;}

.containe {
    width: 80%;
    margin: auto;
    position: relative;
}

.nowrap {
    white-space: nowrap;
}

.colorBlue {
    color: #0066b3;
}

.colorRed {
    color: #ff0000;
}

.colorGray {
    color: #4d4d4d;
}

.colorGrayWhite {
    color: #999999;
}

.colorBlue2 {
    color: #0071bc;
}

.imgFull {
    width: 100%;
}


/*top nav*/

.brandGrp.fixed {
    position: fixed;
    top: 0;
    left: 0;height: 60px;
}

.brandGrp {
    position: relative;
    border-top: 12px solid #f1c631;
    color: #000;
    width: 100%;
    display: block;
    z-index: 1000;height: 60px;
}

.brandGrp h5 {
    margin: 0;
    font-size: 1rem;
}

.brandGrp.fixed {
    position: fixed;
    top: 0;
    left: 0;
}

.brandGrp .cartTopNav {}

.brandGrp .ulNav {
    padding: 0;
    margin: 0;
    list-style-type: none;
    background: #f1c631;
    border-bottom-left-radius: 50px;
    padding: 1rem 2rem;
    margin-top: -1rem;
}

.brandGrp .ulNav li {
    padding: 0;
    margin: 0;
    display: inline-flex;
}

.brandGrp .ulNav li a {
    display: block;
    padding: 0 1rem;
}

.topNavLogoImg {
    width: 200px;
}

.logoImg {
    width: 100%;
    max-width: 300px;
    margin-top: 0rem;
    min-width: 100px;
}

.cartNavGrp {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
}

.cartNavGrp .ulNav {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
}

.cartNavGrp .ulNav li a.iconGrp {
    display: inline-block;
    padding: 0;
    padding-left: 5px;
}

.cartNavGrp .ulNav li a {
    padding: 5px 10px;
    display: block;
    text-align: center;
}

.cartNavGrp .ulNav li a.carGrp {
    display: block;
    background: url(../images/xl_stationer_car_bg.png) no-repeat center center;
    background-size: 110%;
}

.cartNavGrp .ulNav li a.carGrp h5 {
    color: #fbcc26;
    font-size: 1rem;
    text-align: left;
    padding-left: 3rem;
    letter-spacing: 15;
}

.cartNavGrp .ulNav li a.carGrp small {
    color: #fff;
    font-size: 0.2rem;
    display: block;
    font-weight: normal;
    letter-spacing: normal;
}

.cartNavGrp .ulNav li a h5 {
    font-weight: 400;
    margin-bottom: 0;
}

.cartNavGrp .ulNav li a span {
    font-size: 0.9rem;
    font-family: 'raleway', 'Montserrat Hairline';
    font-weight: bold;
}


/* .ulNav{list-style-type: none;padding: 0;margin: 0;display:flex; 
    justify-content: flex-start; align-items: center;flex: 1;}
.ulNav li a.iconGrp{display: inline-block;padding:0;padding-left: 5px;}
.ulNav li a{padding: 5px 10px;display: block;text-align: center;}
.ulNav li a.carGrp h5{color: #fbcc26;font-size: 1rem;text-align: left;padding-left:3rem;
    letter-spacing: 15;}
.ulNav li a.carGrp small{color: #fff;font-size: 0.2rem;
    display: block;font-weight: normal;letter-spacing:normal;}
.ulNav li a h5{font-weight: 400;margin-bottom: 0;}
.ulNav li a span{font-size: 0.9rem;font-family: 'raleway','Montserrat Hairline';font-weight: bold;} */




.contain {
    position: relative;
    width: 90%;
    margin: auto;
}

.navGrp {}

.logoImg {
    width: 300px;
}

.hover:hover {
    color: #df8714;
    cursor: pointer;
}

.icon {
    width: 50px;
}

.bannerGrp {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    animation-name: banner_Img;
    animation-duration: 1s;
    background: url(../images/xl_stationer_bannerBg.png) no-repeat top center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes banner_Img {
    0% {
        margin-top: 100px;
        opacity: 0;
    }

    100% {
        margin-top: 0px;
        opacity: 1;
    }
}

.bannerGrp .bannerGrpContain {
    display: flex;
}

.bannerGrp .bannerGrpLeft {
    position: relative;
    flex: 1;
}

.bannerGrp .bannerGrpMid {
    flex: 1;
}

.bannerGrp .bannerGrpMid img {}

.bannerGrp .bannerGrpRight {
    flex: 1;
}

.bannerGrp .bannerImgGrp {
    display: block;
    margin: auto;
    text-align: center;
    position: relative;
}

.bannerGrp .bannerTit {
    position: absolute;
    bottom: 12%;
    left: 0;
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
}

.bannerImg img {
    width: 100%;
}

/*top nav*/

.btnFont {
    border: 0;
    background: transparent;
    color: #0066b3;
    padding: 0.2rem 0.2rem;
}

.btnFont:hover {
    color: #df8714;
}

.sortGrp {
    color: #4d4d4d;
    padding: 1rem 0;
    width:100%;
}

.sortGrp a {
}

a.btnBlueLine.active{       
    border: 1px solid #fc9804;
    background: #fc9804;
    color: #fff;
    border-radius: 5px;
    padding: 0.2rem 1rem;
    text-decoration: none;
    display: inline-flex;
}
a.btnBlueLine.active:hover{       
    border: 1px solid #e28c0a;
    background: #e28c0a;
    color: #fff;
    border-radius: 5px;
    padding: 0.2rem 1rem;
    text-decoration: none;
    display: inline-flex;
}

.sortGrp a:hover {
    text-decoration: none;
}


a.btnBlueLine, .btnBlueLine{    
    border: 1px solid #0066b3;
    background: transparent;
    color: #0066b3;
    border-radius: 5px;
    padding: 0.2rem 1rem;
    text-decoration: none;
    display: inline-flex;
}

a.btnBlueLine:hover, .btnBlueLine:hover{    
    border: 1px solid #0066b3;
    background: #0066b3;
    color: #fff;
    border-radius: 5px;
    padding: 0.2rem 1rem;
    text-decoration: none;
    display: inline-flex;
}

.btnBlue {
    border: 1px solid #0066b3;
    background: #0066b3;
    color: #fff;
    border-radius: 5px;
    padding: 0.2rem 1rem;
    text-decoration: none;
    display: inline-flex;padding: 0.2rem 1rem;
}

a.btnBlue:hover {
    background: #df8714;
    color: #fff;
    text-decoration: none;
    border: 1px solid #df8714;
}


.contain {
    position: relative;
    width: 90%;
    margin: auto;
}

.hover:hover {
    color: #df8714;
    cursor: pointer;
}

.icon {
    width: 50px;
}

.topBoxShadow {
    position: relative;
    background: #fff;
    margin-bottom: 2rem;
}

.topBoxShadow:after {
    content: "";
    position: absolute;
    width: 200%;
    bottom: 1px;
    z-index: -1;
    transform: scale(.9);
    box-shadow: 0px 0px 10px 3px #ccc;
    display: table;
    margin-left: -50%;
}

.topMenuGrp {
    margin: 1rem auto;
    padding: 1rem;

    /* -webkit-box-shadow: 0px 1px 10px #ccc;
	-moz-box-shadow: 0px 1px 10px #ccc;
	box-shadow: 0px 1px 10px #ccc; */
}

.topMenuGrp .topSearchBtnGrp {
    position: relative;
    margin-bottom: 0.5rem;
}

.inputSearch::placeholder{color:#f1c631;font-size: 0.8rem;}
.topMenuGrp .topSearchBtnGrp .inputSearch {
    width: 100%;
    border: 1px solid #f1c631;
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

.topMenuGrp .topSearchBtnGrp .searchBtn {
    position: absolute;
    right: 0.5rem;
    top: 0;
    border: 0;
    background: transparent url(../images/cart_iconSearch.png) center center no-repeat;
    background-size: 60%;
    font-size: 1.2rem;
    display: flex;
    height: 100%;
    align-items: center;
    padding: 20px;width:50px;
}

.topMenuGrp .topCartListGrp {
    background: #f1f3f5;
    padding: 0;
    white-space: nowrap;
    position: relative;
}

.topMenuGrp a.topCart {
    background: url(../images/cart_iconCart.png) no-repeat 0px center;
    background-size: 50px;    padding: 1rem 0 1rem 3.3rem;
    position: relative;    display: block;
    width: 100px;    height: 50px; 
}

.topCartListGrp .topCart .appTopCartList{}
.topMenuGrp .topCartListGrp .cartIconSearchBlue{display: none;}
.topCartListGrp .topCartList{
    padding: 4px 10px;    background: #ff6600;
    border-radius: 20px;    width: 25px;
    line-height: 15px;    position: absolute;
    top: 5px;    height: 25px;    text-align: center;    color: #fff;right: 0;
}


.topMenuGrp .topBtnGrp {
    margin-top: 0.5rem;
    white-space: nowrap;
}

.topMenuGrp a.topCartList {}


.wrapperGrp {
    background: #a5d9e5;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    margin-bottom: 2rem;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.wrapperGrp .iconImg {
    width: 20px;
}

.wrapperGrp .logo-wall {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.wrapperGrp .logo-wall .logo-wrapper {
    display: flex;
    animation: scroll 20s linear infinite;
    white-space: nowrap;
}

/* .wrapperGrp .logo-wall .logo-wrapper:nth-child(2) {
    animation: scroll2 20s linear infinite;
    animation-delay: -20s;
} */
.wrapperGrp .logo-wall .logo-wrapper.first>.logo:first-child {}

.wrapperGrp .logo-wall .logo-wrapper.second>.logo:first-child {}

.wrapperGrp .logo-wall .logo {
    margin: 0 10px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes scroll {
    from {
        transform: translateX(100%)
    }

    to {
        transform: translateX(-100%)
    }
}

/* @keyframes scroll2 {
    from {
        transform: translateX(0%)
    }

    to {
        transform: translateX(-200%)
    }
} */

.bgBlue {
    background: #0085c9;
    color: #fff;
}

.bgPink {
    background: #e4999a;
    color: #fff;
}

.bgPurple {
    background: #c47ca8;
    color: #fff;
}

.bgGrap {
    background: #a09fa0;
    color: #fff;
}

.bgGrap2 {
    background: #b3b3b3;
}

.colorBlue3 {
    color: #0085c9;
    ;
}

.cartMenuGrp {}

.cartMenuGrp .brushImg {
    width: 100%;
}

.cartMenuGrp .card {
    border: 0;
    background: transparent;
    border-bottom: 2px solid #fff;
    border-radius: 0;
}

.cartMenuGrp .card-header {
    background: unset;
    padding: unset;
    border: 0;
}

.cartMenuGrp .card-header:first-child {
    border-radius: 0;
}

.cartMenuGrp .card-body {
    background: #fff;
    color: #4d4d4d;
    padding: 1rem;
}

.cartMenuGrp .card-body ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.cartMenuGrp .card-body ul li a {
    font-size: 1rem;
    background: url('../images/xl_iconArrowBlue.png') no-repeat left center;
    background-size: 20px;
    padding-left: 25px;
}

.cartMenuGrp .card-body ul li a:hover {
    color: #4d4d4d;
    text-decoration: none;
    background: #ffd572 url('../images/xl_iconArrowBlue.png') no-repeat left center;
    background-size: 20px;
}

.cartMenuGrp .card-body ul li a.hover {
    color: #4d4d4d;
    text-decoration: none;
    background: #ffd572 url('../images/xl_iconArrowBlue.png') no-repeat left center;
    background-size: 20px;
}

.cartMenuGrp .card-body ul li a.a6:hover {
    color: #0066b3;
    background: transparent url('../images/xl_iconArrowBlue.png') no-repeat left center;
    background-size: 20px;
}

.cartMenuGrp .card-body ul li a.a6.hover {
    color: #0066b3;
    background: transparent url('../images/xl_iconArrowBlue.png') no-repeat left center;
    background-size: 20px;
}

.cartMenuGrp .card-body a {
    color: #4d4d4d;
    text-decoration: none;
}

/* .cartMenuGrp .card-body a:hover{color:#ff9100;text-decoration: none;}
.cartMenuGrp .card-body a.hover{color:#ff9100;} */


.cartMenuGrp a {
    color: #fff;
    display: block;
    width: 100%;
}

.cartMenuGrp a:hover {
    color: yellow;
    text-decoration: none;
}

.cartMenuGrp .btn:hover {
    color: yellow;
    text-decoration: none;
}

.cartMenuGrp .btn {
    text-align: right;
    padding: 0.5rem 1rem;
    border: 0;
    color: #fff;
    width: 100%;
    border-radius: 0;
    font-size: 1.2rem;
}

.cartMenuGrp .cartMenuBlue .cartMenuBlueTit .btn {
    background: url(../images/cart_tit1Icon.png) no-repeat left 0px;
    background-size: 100px;
    padding-left: 50px;
    line-height: 2.5;
}

.cartMenuGrp .cartMenuBlue .cartMenuBlueList {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.cartMenuGrp .cartMenuBlue .cartMenuBlueList .btn {
    display: block;
    background: url(../images/cart_star_blue.png) no-repeat 30px center;
    background-size: 30px;
}

.cartMenuGrp .cartMenuPink {}

.cartMenuGrp .cartMenuPink .cartMenuPinkTit .btn {
    background: url(../images/cart_tit3Icon.png) no-repeat left 0px;
    background-size: 100px;
    padding-left: 50px;
    line-height: 2.5;
}

.cartMenuGrp .cartMenuPink .cartMenuPinkList {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.cartMenuGrp .cartMenuPink .cartMenuPinkList .btn {
    display: block;
    background: url(../images/cart_star_red.png) no-repeat 30px center;
    background-size: 30px;
}

.cartMenuGrp .cartMenuPurple {}

.cartMenuGrp .cartMenuPurple .cartMenuPurpleTit .btn {
    background: url(../images/cart_tit2Icon.png) no-repeat left 0px;
    background-size: 100px;
    padding-left: 50px;
    line-height: 2.5;
}

.cartMenuGrp .cartMenuPurple .cartMenuPurpleList {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.cartMenuGrp .cartMenuPurple .cartMenuPurpleList .btn {
    display: block;
    background: url(../images/cart_star_purple.png) no-repeat 30px center;
    background-size: 30px;
}

.cartMenuGrp .cartMenuGrap {}

.cartMenuGrp .cartMenuGrap .cartMenuGrapTit .btn {
    background: url(../images/cart_tit4Icon.png) no-repeat left 0px;
    background-size: 70px;
    padding-left: 50px;
    line-height: 2.5;
}

.cartMenuGrp .cartMenuGrap .cartMenuGrapList {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.cartMenuGrp .cartMenuGrap .cartMenuGrapList .btn {
    display: block;
    background: url(../images/cart_star_grap.png) no-repeat 30px center;
    background-size: 30px;
}

.cartBannerGrp {}

.cartBannerImg {
    border-radius: 10px;
}

.topHutMenuRightGrp {
    position: relative;
}

.hotProListGrpBg {
    position: relative;
}

.topHutMenuRightGrp .hotProTit {
    background: url('../images/cart_titFormTopBg1.png') no-repeat top left;
    padding: 0rem;
    padding-left: 4rem;
    color: #fff;
    position: relative;
    margin-bottom: 0;
    height:40px;
    line-height:40px;
}
.topHutMenuRightGrp .hotProTit .hotProTitSpan {
    background: url('../images/cart_titFormTopBg1Img.png') no-repeat center left;
    background-size: 40px;
    padding-left: 55px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.topHutMenuRightGrp .hotProTit .more {
    color: #3a56bb;
    position: absolute;
    right: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    height: 100%;
    font-size: 1rem;
    padding-right: 0.5rem;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.flex.flexRight{justify-content: flex-start;}

.topHutMenuRightGrp .hotProTit {}

.topHutMenuRightGrp .bgTImg {
    width: 100%;
}

.topHutMenuRightGrp .hotProListGrp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    overflow: auto;
    height: calc(100% - 0px);
    border-bottom: 5px solid #0071bc;
}

.topHutMenuRightGrp .hotProListGrp .hotProList {border: 1px solid #f1c631;margin: 0.5rem 0rem;}

.topHutMenuRightGrp .hotProListGrp .hotProList .hotProImg {
    flex: none;
}

.topHutMenuRightGrp .hotProListGrp .hotProList .hotProImg .proImg {
    width: 80px;
}

.topHutMenuRightGrp .hotProListGrp .hotProList .hotProText {
    flex: 1;
    font-size: 0.8rem;
}

.topHutMenuRightGrp .hotProListGrp .hotProList .hotProText .hotProTextTit {
    font-size: 0.8rem;
}

.topHutMenuRightGrp .hotProListGrp .hotProList .hotProText .colorRed {
    font-size: 1.2rem;
}


.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
    padding-left: 5px;
    padding-right: 5px;
}

.row {
    margin: 0;
}

.historyGrp {
    position: fixed;
    top: 0;
    right: 3%;
    display: flex;
    align-items: center;
    width: 80px;
    height: 100%;
    z-index: 200;
}

.viewHistoryGrp {
    display: block;
    margin: auto;
    text-align: center;
    background: #0085c9 url('../images/cart_titLogo.png') no-repeat bottom center;
    color: #fff;
    border-radius: 15px;
    padding: 1rem 0.5rem 3.5rem 0.5rem;
    background-size: 100%;
}

.viewHistoryGrp .tit {
    font-size: 1rem;
}

.viewHistoryGrp .viewHistoryList {}

.viewHistoryGrp .viewHistoryList .arrowImgView {
    width: 50px;
}

.viewHistoryGrp .viewHistoryProImgGrp {
    display: block;
    height: 219px;
    overflow: hidden;
}

.viewHistoryGrp .viewHistoryProImgGrp img {
    width: 100%;
    display: block;
    margin: 0.1rem;
}

.accountListGrp {
    background: #fbcc26;
    padding: 1rem;
    border-radius: 15px;
    margin-top: 1rem;
}

.accountListGrp .accountTit {
    background: url('../images/cart_iconCart.png') no-repeat left center;
    background-size: 30px;
    padding-left: 35px;
    color: #0071bc;
}

.hrWhite {
    border: 0;
    width: 100%;
    border-top: 2px solid #fff;
    margin: 0.5rem 0;
}

.btnAccount {
    display: block;
    border: 0;
    color: #0071bc;
    text-align: center;
}

.bannerBtnGrpLeft {
    width: 100%;
}

.bannerBtnGrpLeft.flex {
    min-height: 100px;
}

.bannerBtnGrpRight .btnStomp,
.bannerBtnGrpRight .btnList {
    min-height: 100px;
}

.bannerBtn {
    width: 32%;
    border: 0;
    background: transparent;
    ;
    color: #fff;
    text-align: left;
    position: relative;
    line-height: 1.4;
    font-size: 1.2rem;
}

.bannerBtn span {
    font-size: 6px;
    padding-left: 1rem;
    white-space: nowrap;
    display: block;
}

.bannerBtn .btnImg {
    width: 100%;
}

.bannerBtn .btnlink {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-wrap: wrap;
    padding-left: 2rem;
}

.bannerBtn .btnlink:hover {
    text-decoration: none;
    color: #ffeba1;
}

.btnSpace {
    /* background: url('../images/cart_titBgGood.png') no-repeat center left;
    background-size: 100%; */
    /* padding: 1rem; */
    /* padding-left: 12%; */
}

.btnHot {
    /* background: url('../images/cart_titBgHot.png') no-repeat center left;
    background-size: 100%;
    padding-left: 12%;
    padding: 1rem; */
}

.btnNew {
    /* background: url('../images/cart_titBgNew.png') no-repeat center left;
    background-size: 100%;
    padding-left: 12%;
    padding: 1rem; */
}

.bannerBtnGrpRight .btnStomp,
.bannerBtnGrpRight .btnList {
    position: relative;
    background: transparent;
}

.bannerBtnGrpRight .titBgStamp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bannerBtnGrpRight .titBgStampImg {
    width: 100%;
}

.btnStomp {
    /* background: url('../images/cart_titBgStamp.png') no-repeat center center; */
    /* background-size: 90%; */
    width: 48%;
    border: 0;
    color: #fff;
    text-align: center;
    line-height: 1.4;
    font-size: 1.2rem;
}

.bannerBtnGrpRight .btnList .titBgStamp {
    padding-right: 25%;
}

.btnList {
    /* background: url('../images/cart_titBgBook.png') no-repeat center left; */
    /* background-size: 100%; */
    width: 49%;
    border: 0;
    color: #603813;
    text-align: left;
    padding-left: 5%;
    line-height: 1.4;
    font-size: 1.2rem;
}

.goTopCart img {
    width: 40px;
    display: block;
    margin: 1rem auto;
}

.titBgBlue {
    display: block;
    background: #0085c9 url('../images/cart_star_white.png') no-repeat 10px center;
    background-size: 30px;
    color: #fff;
    padding-left: 50px;margin-top: 2rem;
}

.titBgBlue .titBlue {
    letter-spacing: 1;
    font-size: 1.2rem;
    margin: 0;
    background: url('../images/cart_titBgYellowDiamod.png') no-repeat 30% center;
    background-size: 240px;
    padding: 0.5rem 0rem;
    position: relative;
}

.titMore {
    font-size: 1.1rem;
    position: absolute;
    top: 0;
    right: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.titBgPink {
    display: block;
    background: #f7929a url('../images/cart_star_white.png') no-repeat 10px center;
    background-size: 30px;
    color: #fff;
    padding-left: 50px;
    margin-top: 2rem;
}

.titBgPink .titPink {
    letter-spacing: 1;
    font-size: 1.2rem;
    margin: 0;
    background: url('../images/cart_titBgYellowDiamod.png') no-repeat 30% center;
    background-size: 240px;
    padding: 0.5rem 0rem;
    position: relative;
}

.titBgYellow {
    display: block;
    background: #eec15f url('../images/cart_star_white.png') no-repeat 10px center;
    background-size: 30px;
    color: #fff;
    padding-left: 50px;
    margin-top: 2rem;
}

.titBgYellow .titYellow {
    letter-spacing: 1;
    font-size: 1.2rem;
    margin: 0;
    background: url('../images/cart_titBgBlueDiamod.png') no-repeat 30% center;
    background-size: 240px;
    padding: 0.5rem 0rem;
    position: relative;
}

.viewRecordTitGrp {}

.viewRecordTit {
    padding: 0.5rem 50px;
    color: #fff;
    display: block;
    width: 25%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
}

.viewRecordTit.titBgGray {
    background: #808080 url('../images/cart_star_white.png') no-repeat 10px center;
    background-size: 30px;
}

.viewRecordTit.titBgYellow {
    background: #ecbe5f url('../images/cart_star_white.png') no-repeat 10px center;
    background-size: 30px;
}

.viewRecordTit.titBgBlue {
    background: #0085c9 url('../images/cart_star_white.png') no-repeat 10px center;
    background-size: 30px;
}

.viewRecordTit img {
    width: 45px;
    position: absolute;
    bottom: -12px;
    left: 30%;
}

.viewRecordTit .titGray {}

.viewRecordTxt {
    border: 2px solid #808080;
    padding: 1rem;
    margin-bottom: 2rem;
}

.viewRecordYellow .viewRecordTxt {
    border: 2px solid #ecbe5f;
}

.viewRecordBlue .viewRecordTxt {
    border: 2px solid #0085c9;
}

.viewRecordTxt .carousel-inner{position: relative; width: 100%;  overflow: hidden; white-space: nowrap;}

.viewRecordTxt .card{ border: 0;display: inline-block; width: 20%;}

.viewRecordTxt .carousel-control-next,
.viewRecordTxt .carousel-control-prev {
    z-index: 1000;
    top: 0px;
    bottom: unset;
    height: 100%;
    cursor: pointer;
}

.viewRecordTxt .carousel-control-next img,
.viewRecordTxt .carousel-control-prev img {
    width: 40px;
}

.viewRecordTxt .card .card-text img.recordImg {
    width: 20px;
}

.viewRecordTxt .card-title {
    font-size: 1rem;margin: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.borderBtm {
    border-bottom: 1px solid #4d4d4d;
    padding: 0.5rem 0;
}

.proGrpRow{display: flex;justify-content: center;align-items: center;}

.proGrp {
    padding: 0;
}

.proGrp.pgPro {
    border-bottom: 1px solid #cccccc;
}

.proGrp.pgPro .card {
    padding-top: 0.5rem;
}

.proGrp .card {
    border: 0;text-align: left;
    display: inline-flex;
    width: 18%;
    padding-bottom: 1rem;border: 1px solid #f1c631;padding:0.5rem;margin:1rem 0.5rem 0rem 0.5rem;
}

.proGrp .iconHartImg {
    height: 30px;
    margin-right: 2px;
}

.proGrp .card img.iconHartImg {
    max-width: unset;
    max-height: unset;
}

.proGrp .colorGrayWhite,
.viewRecordTxt .colorGrayWhite {
    font-size: 0.8rem;
}

.proGrp .card-title {
    font-size: 1rem;
    margin-bottom: 0rem;
    width:100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;height: 35px;
}

.proGrp .card .card-img-top {
    padding: 0.5rem;
    width: 100%;
}

.proGrp .card .card-body {
    padding: 0.5rem;
}

.proGrp .card .card-text {
    margin: 0;
}

.proGrp .card .proHotMark {
    background: url('../images/cart_star_yellow.png') no-repeat center center;
    background-size: 80%;
    padding: 1rem;
    color: #fff;
    font-size: 0.7rem;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pageGrp .pagination {
    border: 0;
    border-radius: 0;
}

.pageGrp .navigation {
    margin: 2rem 0;
    display: block;
}
.pageGrp .navigation .page-item,
.pageGrp .pagination>li{
    border: 1px solid #04bede;
}
.pageGrp .navigation .page-link,
.pageGrp .pagination > .active > a {
    border: 0;
    padding: 0.75rem 1.2rem;
    font-size: 1rem;

}
.pageGrp .navigation .page-link, .pageGrp .pagination > .active > a{
    color: #fff;
    padding: 2px 5px;
    width: 30px;
    text-align: center;
    background: #04bede;

}

.pageGrp .navigation .page-link:hover,
.pageGrp .pagination > .active > a:hover {
    background: #04bede;
    color: #fff;
}

.pageGrp .navigation .page-link.action,
.pageGrp .pagination > .active > a.action {
    background: #04bede;
    color: #fff;
}

.pageGrp .navigation .page-link.moreLink,
.pageGrp .pagination > .active > a.moreLink {
    background: #04bede;
    color: #fff;
}
.pagination>li:first-child>a, .pagination>li:first-child>span{border-top-left-radius: 0;border-bottom-left-radius: 0;}
.pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus{
    color: #04bede;
    background-color: #fff;
    border-color: #04bede;
}
.pagination>li>a, .pagination>li>span{
    color: #04bede;
    background-color: #fff;
    border: 1px solid #04bede;
    min-width: 30px;
    padding: 2px 5px;text-align: center;
}



.btnAddCart {
    background: #0071bc url('../images/cart_iconCartWhite.png') no-repeat 2% center;
    background-size: 30px;
    padding-left: 40px;
    /* white-space: nowrap; */
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 0.8rem;
    width: 100%;
}

a.btnAddCart:hover {
    background: #e68a12 url('../images/cart_iconCartWhite.png') no-repeat 2% center;
    background-size: 30px;
    color: #fff;
    text-decoration: none;
}


.navLinkGrp .nav{margin: 1rem 0;}
.navLinkGrp{background: #eeeeee99;display: block;width: 100%;}

.navLinkGrp .nav-link {
    padding: 0 0.2rem;
    color: #999999;
}
.navLinkGrp .nav-link:hover {
    color: #bdbdbd;
}

.navLinkGrp .nav-link.active {color: #04bede;}

.hover:hover {
    cursor: pointer;
}


.cards-wrapper {
    display: flex;
    justify-content: center;
}

.card img {
    width:80%;
    max-width: 100%;
}

.proDetailGrp {}

.proDetailGrp .proDetailCard {}

.proDetailCard .proDetailTit {
    font-weight: 500;
    margin: 1rem 0;
}

.proDetailGrp .proDetail {
    position: relative;
}

.proDetailGrp .proDetailImg {
    width: 100%;
}

.proDetailGrp .proDetailNo {
    position: absolute;
    top: 0;
    left: 0;
}

.proDetailGrp .proDetailHot {
    background: url('../images/xl_icon_star_yellow.png') no-repeat center center;
    background-size: 100%;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 20px;
    right: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.colorGray2 {
    color: #808080;
}

.tbProDetail {
    padding: 0.5rem;
    background: #fff;
}

.tbProDetail .tbBase {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tbProDetail .tbBase label {
    flex: 1;
    margin: 0.5rem 0;
}

.tbProDetail .tbProDetailTit {
    background: #f2f2f2;
}

.tbProDetail .tbProDetailTit label {}

.tbProDetail .tbProDetailTxt {
    border-bottom: 1px solid #333333;
}

.tbProDetail small {
    margin: 0.5rem 0;
    display: block;
}

.tbProDetail .small {
    color: #808080;
}

.proPriceGrp {}

.proPriceGrp .proPrice {}

.proPriceGrp .proPrice .memberPrice,
.proPriceGrp .proPrice .price {
    font-size: 2rem;
    letter-spacing: 1;
    font-weight: 500;
    margin-right: 1rem;
}

.proPriceGrp .proPrice .orgPrice {
    text-decoration: line-through;
    font-size: 1.5rem;
}

.proPriceGrp .proQtyGrp {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 1rem 0;
}

.proPriceGrp .proQtyGrp span {
    margin: 0 0.5rem 0 0;
}

.proPriceGrp .proQtyGrp .qtyPro {}

.proPriceGrp .proQtyGrp .inputNumber input {
    width: 60px;
    border-radius: 5px;
    border: 1px solid #0071bc;
    text-align: center;
}

.proPriceGrp .proQtyGrp .proDetailIcon img {
    width: 40px;
}

.btnAddFaverate {
    background: url('../images/cart_hartYellow.png') no-repeat 10px center;
    background-size: 20px;
    padding: 0.3rem 1.2rem 0.3rem 2.1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    min-width: 120px;
    border: 1px solid #ecbe5f;
    color: #ecbe5f;
    text-align: left;
}

.btnAddFaverate:hover {
    background: #ecbe5f url('../images/cart_hartYellow_hover.png') no-repeat 10px center;
    background-size: 20px;
    padding: 0.3rem 1.2rem 0.3rem 2.1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    min-width: 120px;
    border: 1px solid #ecbe5f;
    color: #fff;
    text-align: left;
}

.proPriceGrp .btnGrp button {
    min-width: 150px;
    padding: 0.5rem 2rem;
}

.btnAddCartBlue {
    border: 0;
    background: #1b74af;
    color: #fff;
    padding: 0.5rem 2rem;
    border-radius: 10px;
    white-space: nowrap;
}

.btnAddCartBlue.Square {
    border-radius: 0px;
}

.btnAddCartBlue:hover {
    color: yellow;
}

.btnAddCart_def {
    border: 2px solid #0071bc;
    color: #0071bc;
    border-radius: 10px;
    margin: 0 0.5rem;
    background: #fff;
}

.btnAddCart_def:hover {
    border: 2px solid #0071bc;
    color: #fff;
    border-radius: 10px;
    margin: 0 0.5rem;
    background: #1b74af;
}

.btnAddCart_click {
    border: 2px solid #0071bc;
    color: #fff;
    border-radius: 10px;
    margin: 0 0.5rem;
    background: #0071bc;
}

img.icon:hover {
    cursor: pointer;
}

hr.hrDotted {
    border: 0;
    border-top: 2px dotted #0071bc;
    width: 100%;
    display: block;
}

.smartCardGrp {}

.smartCardGrp label.tit,
.descGrp label.tit {
    padding: 0 1rem;
    min-width: 120px;
}

.smartCardGrp .smartCard {}

.smartCardGrp .smartCard span {
    padding: 0.5rem;
    background: #fff;
    border: 1px solid #808080;
    text-align: center;
    color: #808080;
}

.smartCardGrp .smartCard .tit {
    background: #f2f2f2;
    min-width: 60px;
    margin-top: -1px;
}

.smartCardGrp .smartCard .txt {
    min-width: 100px;
    margin-left: -1px;
    margin-top: -1px;
}

.smartCardGrp .smartCard small {
    display: block;
    margin: 0.5rem 0;
}

.descGrp .desc h5 label,
.descGrp .desc p {
    font-size: 1rem;
    margin: 0;
}

.descGrp .desc .tit label {
    background: #e6e6e6;
    color: #808080;
    padding: 0.2rem 0.4rem;
}

.descGrp .desc h5.tit,
.descGrp .desc .txt {
    margin: 0;
    font-size: 1rem;
}

.listProDetailGrp {
    padding: 1rem 0;
}

.listProDetailGrp .listProDetailBtn {
    border-bottom: 1px solid #b3b3b3;
}

.listProDetailGrp .listProDetailBtn button {
    min-width: 140px;
}

.listProDetailGrp .listProDetailBtn button {
    padding: 0.5rem 1rem;
    background: #fff;
    font-size: 1rem;
}

.listProDetailGrp .listProDetailBtn .listProDetailItem {
    border: 1px solid #0071bc;
    color: #0071bc;
}

.listProDetailGrp .listProDetailBtn .listProDetailItem:hover {
    background: #0071bc;
    color: #fff;
}

.listProDetailGrp .listProDetailBtn .listProDetailItem.click {
    background: #0071bc;
    color: #fff;
}

.listProDetail {
    padding-left: 0.5rem;
}

.listProDetail .listProDetailDesc p {
    font-size: 1rem;
}

.listProDetail .ProDetailImg {
    width: 200px;
}

.listProDetail {
    display: none;
    min-height: 200px;
}

#listProDetail {
    display: block;
}

.proListGrp .tit {
    border-bottom: 1px solid #0071bc;
    padding: 0 0 0.5rem 0;
    position: relative;
}

.proListGrp .tit .state {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #000;
    height: 100%;
}

.proCarousel{background: #fff;margin-top: 2rem;}

.shipCost{padding: 0.5rem;}
.shipCost .cartIconCarImg{width: 100px;}
.tbProList.table th {
    background: #0085c9;
    color: #fff;
    font-weight: normal;
    text-align: center;
    border-right: 1px solid #fff;
}

.tbProList.table.tdEven td:nth-child(even) {
    background: #f2f2f2;
}

.tbProList.table.thEven th:nth-child(even) {
    background: #f2f2f2;
    color: #4d4d4d;
}

.table .footLine,
.table.footLine {
    border-bottom: 2px solid #0085c9;
}

.tbOutLine {
    border: 2px solid #0085c9;
    border-radius: 10px;
    padding: 1rem;
}

.rwdTable {
    overflow: hidden;
}

.rwdTable tr:nth-of-type(2n) {
    background: #eee;
}

.rwdTable th,
.rwdTable td {
}

.rwdTable {
    min-width: 100%;
}

.rwdTable th {
    display: none;
}

.rwdTable td {
    display: block;
}

.rwdTable td:before {
    content: attr(data-th) " : ";
    font-weight: bold;
    /* width: 30%; */
    display: inline-block;
}

.rwdTable th,
.rwdTable td {
    text-align: left;
    padding-left: 5px;
}

.rwdTable th,
.rwdTable td:before {
    /* color: red; */
    /* background: #0085c9; */
    color: #0085c9;
    font-weight: normal;
    text-align: left;
    /* border-right: 1px solid #fff; */
    white-space: nowrap;
    padding: 0.3rem 0.2rem;
}
.rwdTable td:last-child{border-bottom: 1px solid #ccc;}
.rwdTable.table td, .rwdTable.table th{border: 0;padding: 0.5rem 0;}

.tbProList.table tr:hover{background: rgba(241, 198, 49,.5);}

.tbProList td img {
    width: 80px;
    padding: 0.2rem;
}

.btnCental {
    white-space: nowrap;
    border: 0;
    color: #0071bc;
    background: transparent;
}

.btnCental:hover {
    color: rgba(0, 113, 188, 0.6);
}

.btnDel {
    background: #0085c9 url('../images/cart_del.png') no-repeat center center;
    background-size: 80%;
    width: 20px;
    height: 20px;
    border: 0;
}

.shipGrp {
    border-top: 3px solid #0085c9;
    border-bottom: 3px solid #0085c9;
    padding: 0.5rem;
}

.shipGrp .shipTotal {
    color: #000;
}

.shipGrp .shipTotal .colorRed {
    font-size: 2rem;
}

.receiveForm {
    position: relative;
}

.receiveForm .btnGrp {
    width: 100%;
    margin: auto;
}

.receiveForm button.btnAddCartBlue {
    border-radius: 0;
}

.paymentGrp {}

.paymentGrp .tit,
.receiveGrp .tit {
    margin: 0 0.5rem;
}

.paymentGrp .payment {
    flex: 0.6;
}

.paymentGrp .paymentNote {
    flex: 0.4;
}

.paymentGrp .paymentNote p {
    font-size: 1rem;
    margin: 0;
}

.paymentGrp .form-check {
    margin-bottom: 0.4rem;
}

.receiveGrp {}

.receiveGrp .tit {
    padding-top: calc(.375rem + 1px);
}

.receiveGrp .receive {
    flex: 1;
}

.receiveGrp .form-group {
    margin-bottom: 0.5rem;
}

.receiveGrp .form-group .form-check {
    margin-right: 0.5rem;
}

.receiveGrp .textarea {
    border: 1px solid #ced4da;
    flex: 1;
}

.receiveGrp .colorGray2 {
    margin: 0 0.5rem;
    font-size: 0.9rem;
}

.selectGrp .label {
    margin: 0 0.3rem;
    white-space: nowrap;
}

.selectGrp.d-flex {
    align-items: center;
}

.receiveForm .imgCartFormBrush {
    width: 150px;
    position: absolute;
    bottom: 30%;
    right: 0;
}

.receiveForm .imgXlStamp {
    background: url('../images/xl_bg_message.png') no-repeat 90% center;
    background-size: 180px;
    min-height: 200px;
}

.receiveForm .iconLabel {
    background: url('../images/xl_icon_star_yellow.png') no-repeat left 0.5rem;
    background-size: 22px;
    padding-left: 25px;
    white-space: nowrap;
}

.d-flex .flex1 {
    flex: 1;
    margin-right: 0.5rem;
}

.cartMenuLogoGrp {}

.cartMenuLogoGrp .cartMenuLogo {
    width: 80%;
}

.messageGrp {
    text-align: center;
    margin: 1rem;
}

.messageGrp .messageImgGrp {}

.messageGrp .messageImgGrp .messageImgLogo {
    width: 60%;
}

.proSearchMenuGrp {}

.proSearchMenuGrp .tit {
    background: #0066b3 url('../images/xl_stationer_icon_star.png') no-repeat 10px center;
    background-size: 30px;
    padding: 0.5rem;
    padding-left: 45px;
    color: #fff;
    text-align: left;
    border-radius: 15px;
    font-size: 1.1rem;
    margin-bottom: 0;

}

.proSearchMenuGrp .menuForm {
    background: #f2f2f2;
    color: #808080;
    padding: 1rem;
}

.proSearchMenuGrp .form-group {}

.proSearchMenuGrp .form-group .subTit {
    font-weight: 500;
}

.proSearchMenuGrp .form-group .d-flex .flex1 {
    margin: 0 0.3rem;
}

.proSearchMenuGrp .menuForm.proSearchMenuImgLogo {
    min-height: 200px;
    background: #f2f2f2 url('../images/cart_logoBrush1.png') no-repeat bottom right;
    background-size: 190px;
    width: 100%;
    padding-bottom: 5rem;
}

.proSearchMenuImgLogo {
    width: 60%;
}

.addMemberGrp {
    position: relative;
}

.addMemberGrp .memberLoginLogoImg {
    background: url('../images/cart_logoBrush4.png') no-repeat 95% bottom;
    background-size: 60%;
    min-height: 22rem;
}

.addMemberGrp .addMemberTxt {
    padding: 1rem;
}

.addMemberGrp .addMemberTxt h3 {
    font-size: 1.2rem;
}

.addMemberGrp .addMemberTxt p {
    font-size: 1rem;
}

.addMemberGrp .addMemberLogin {
    padding: 1rem;
    background: #f1f3f5;
    max-width: 600px;
}

.addMemberGrp .addMemberLogin .fbLoginImg {
    width: 100%;
}

.addMemberGrp .addMemberLogin h3 {
    font-size: 1.5rem;
    letter-spacing: 1;
    font-weight: 500;
}

.addMemberGrp .addMemberLogin .btnGrp .btnAddCartBlue {
    padding: 0.5rem 3rem;
}


.memberMessageGrp {
    display: block;
    width: 70%;
    margin: auto;
    position: relative;
    margin-top: 4rem;
}

.memberMessageGrp .memberMessage {
    background: url('../images/cart_message.png') no-repeat center center;
    background-size: 200px;
    padding: 2rem;
    position: absolute;
    top: -3rem;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
}

.memberDataGrp {}

.footerGrp {
    background: #0066b3;
    color: #fff;
    padding: 2rem 3rem 5rem 3rem;
    margin-top: 2rem;
}

.footerGrp .footerContactGrp {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footerGrp .footerContactGrp .serviceData{flex: 0.7;}
.footerGrp .footerContactGrp .footerLogoGrp{flex: 0.3;}
.footerGrp .footerContact {
    display: flex;
}

.footerGrp .footerContact .contactGrp {
    margin:0 1rem;
}

.footerGrp .footerQrCode {
    display: flex;
    margin-top: -10%;
}

.footerGrp .qrCodeGrp {
    display: block;
    text-align: center;
}

.footerGrp .qrCodeGrp img {
    margin: 0.5rem;
    width: 100px;
}

.footerGrp .footerTit {
    background: url(../images/xl_stationer_icon_star.png)no-repeat left center;
    font-size: 1.2rem;
    padding-left: 1.5rem;
    background-position: 0 -1px;
    background-size: 25px;
}

.footerGrp .footerUl {
    list-style: none;
    padding: 0;
    padding-left: 1.2rem;
}

.footerGrp .footerUl li {
    background: url(../images/xl_stationer_icon_item.png)no-repeat left top;
    padding-left: 1.5rem;
    line-height: 1.7;
    background-position: 2px;
    background-size: 25px;
}

.footerGrp .footerLogoGrp ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footerGrp .footerLogoGrp ul li {
    text-align: center;
    margin-bottom: 0.5rem;
}

.footerGrp .footerLogoGrp ul li img {
    margin: 0 0.5rem;
}

.footerGrp .footerLogoGrp .footerLogo {
    width: 60%;
    margin: top auto;
}

.footerGrp .footerLogoGrp .footerFb {
    width: 100px;
}

.footerGrp .footerLogoGrp .footerLine {
    width: 100px;
}

.footerGrp .footerCopyRight {
    text-align: center;
}

.pcMenu{display: block;}
.appMenu{display: none;}

.appMenuOpen {
    display: none;
}

.appMenuClose {
    display: none;
}

.appMenuGrp {
    display: none;
    margin-left: auto;
}
.appMenuGrp .appCartLogoOnlineShop{
    width: 180px;margin-top: -8px;
}

.topNavLogoImg {
    display: none;
}

.mask {
    display: none;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.openHistory,
.closeHistory {
    display: none;
}
.hotNewLink{display: none;}
.material-icons{font-size: 35px;}
.viewHistoryIcon{display: none;margin-top: 5px;color: #005d8c;}
.icon_divider{display: inline-block;}


.socialGrp{position: fixed;bottom: 2%;right: 2%;display: none;padding: 1rem 0;z-index: 1000;}
.socialGrp a{display: block;width:60px;padding: 5px;}
.socialGrp img{width:50%;}
.socialGrp a.socialIcon{
    background: url('../images/icon_line.png') no-repeat center center;
    background-size: 80%;  
    padding: 1rem;  display: block;  width: 48px; height: 60px;}
.socialGrp a.goTopIcon{
    background: url('../images/icon_top.png') no-repeat center center;
    background-size: 80%;  
    padding: 1rem;  display: block;  width: 48px; height: 60px;}

.socialGrp a.socialIcon:hover{
    background: url('../images/icon_1_line.png') no-repeat center center;
    background-size: 80%;  
    padding: 1rem;  display: block;  width: 48px; height: 60px;}
.socialGrp a.goTopIcon:hover{
    background: url('../images/icon_1_top.png') no-repeat center center;
    background-size: 80%;  
    padding: 1rem;  display: block;  width: 48px; height: 60px;}

.iconFooter{width: 100px;}


.maskSocialIconGrp{
    display: none;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;}
.socialIconGrp{
    position: fixed;
    bottom: 5%;
    left: calc((100vw - 80%) / 2);
    background: #fff;
    border-radius: 20px;
    width: 80%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.socialIconGrp ul{list-style: none;margin: 0;display: flex;justify-content: center;align-items: center;width: 80%;flex-wrap: wrap;padding: 0;}
.socialIconGrp ul li{padding: 1rem;display: flex;justify-content: center;align-items: center;}


@media only screen and (max-width:1440px) {
    .contain {
        width: unset;
    }

    .logoImg {
        width: 200px;
    }
    .proGrp .card{width:17%;}
}

@media only screen and (max-width: 1300px) {
    .containe {
        width: 90%;
        margin: auto;
    }

    .containe.topMenuGrp {
        width: 100%;
    }

    .logoImg {
        margin: 0;
    }

    .footerGrp .footerContactGrp {
        flex-wrap: wrap;
    }

    .footerGrp .footerLogoGrp ul li {
        margin-bottom: unset;
    }

    .footerGrp .footerLogoGrp .footerLine,
    .footerGrp .footerLogoGrp .footerFb {
        margin-top: 5%;
    }
    
}

@media (min-width: 1200px) { 
    .navGrp.appNavGrp {
        display: none;
    }

    .hotNewTxt .proMenuIcon {
        display: none;
    }
    .historyGrp{right: 3% !important;}

    /* .bannerGrp .bannerGrpMid .bannerImgGrp{display: flex;align-items: flex-end;height: 100%;} */
}

@media only screen and  (max-width: 1200px){    
}
.carousel-indicators{display: none;}
@media only screen and (max-width: 1201px) {   
    .pcMenu{display: none;}
    .appMenu{display: block;}
    .socialGrp{display: block;}
    .container{padding: 0;margin: 0;}
    
    
    .topMenuGrp .topSearchBtnGrp .searchBtn{
        right: 2rem;
        background-size: 80%;
    }

    .footerGrp .footerContactGrp .serviceData{flex: unset;}
    .footerGrp .footerContactGrp .footerLogoGrp{flex: unset;}
    .topMenuGrp .appTopSearchBtnGrp{display: block;
        position: fixed;  margin-bottom: 0.5rem;  top: 0px;  z-index: 0; background: #f1c631;
        right: 0;  width: 100%;  padding: 2rem;  }
    
    .topMenuGrp .topSearchGrp {
        display: flex;justify-content: flex-start;margin-left: 5%;
    }     
    .topSearchBtnGrp{display:none;}
    .topBoxShadow{top: -5px;width: 100%;}

    .icon_divider{display: none;}
    .viewHistoryIcon{display: block;}

    .footerGrp .serviceData{width:100%;}
    .footerGrp .footerContactGrp{padding-bottom: 1rem;}
    .footerGrp .footerContact{
        justify-content: space-around;
        width: 100%;align-items: flex-start;
    }
    .footerGrp .footerQrCode{display: none;}
    .footerGrp .footerLogoGrp{display: none;}
    .footerGrp .footerUl{display: none;}

    /* .footerLogoGrp{width:100%;display: block;}
    .footerLogoGrp ul li{flex: 1;}
    .footerLogoGrp ul li:first-child{text-align: left;}
    .footerLogoGrp ul li:last-child{text-align: right;}
    .footerLogoGrp ul{width:100%;display: flex;justify-content:center;align-items: center;}
    .footerGrp .footerLogoGrp .footerLogo{width: 200px;}
    .footerGrp .footerContactGrp{flex-wrap: wrap;}
    .footerGrp .footerLogoGrp ul li{margin-bottom: unset;}
    .footerGrp .footerLogoGrp .footerLine,
    .footerGrp .footerLogoGrp .footerFb{margin-top: 5%;} */
    
    .topMenuGrp .topBtnGrp{position: fixed;bottom: 0;left: 0px;z-index: 3000;height: 60px;background: #f1c631;width: 100%;
        position:fixed;justify-content: flex-start; color: #fff;}
    .topMenuGrp .btnFont{padding: 0.5rem 0.5rem; background: transparent;border: 1px solid #fff; color: #fff; border-radius: 10px; margin: 1rem;}
    .topMenuGrp .btnBlue{padding: 0.5rem 1rem; background: #df7f9b;border: 1px solid #df7f9b; color: #fff; border-radius: 10px; margin: 1rem;}

    .proCarousel{margin-top: 2rem;}

    .topHutMenuRightGrp .hotProListGrp .hotProList .hotProText .hotProTextTit{font-size: 1rem;
        margin-bottom: 0rem;
        width: 100%;        
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;display: block;
    }

    .topHutMenuRightGrp .hotProListGrp {
        position: relative; height: unset; overflow: unset; overflow-x: auto; width: 100%; display: block;white-space: nowrap;
    }
    .topHutMenuRightGrp .hotProListGrp .hotProList{
        display: inline-block;width:20%;padding: 0.5rem;
    }
    .topHutMenuRightGrp .hotProListGrp .hotProList .hotProImg .proImg{width:100%;}

    .proGrp .card{}


    .cartBannerGrp{margin-top: 1rem;}
    .topNavLogoImg {
        display: block;
        opacity:0;
    }

    .appMenuGrp {
       display: flex;justify-content: center;align-items: center; 
    }
    .appMenuGrp a{}

    .appMenuOpen {
        display: block;
    }

    .containe {
        width: 95%;
    }

    .containe.topMenuGrp {
        margin: 0rem;
    }

    .logoImgGrp {
        display: none;
    }

    .logoImg {
        width: 200px;
        margin: 0;
    }

    .brandGrp {
        border: 0;
        background: #f1c631;
        padding: 1rem;
    }

    .navGrp {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        background: #f1c631;
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100%;
        padding-top: 87.95px;
        z-index: 1000;
    }

    /* margin-top: calc(100vh - 87.95px)*/

    .navGrp.appNavGrp {
        display: block;
        align-items: flex-start;
    }

    .navGrp .ulNav {
        display: block;
        list-style-type: none;
        line-height: 1rem;
        width: 93%;
        margin: 0 auto;
        padding: 0;
    }

    .navGrp .ulNav li {
        border-bottom: 1px dotted #fff;
        padding: 1rem 0;
    }

    .navGrp .ulNav li a {
        text-align: left;
    }

    .navGrp .ulNav li a.iconGrp {
        padding: 0.5rem;
    }

    .ulNav li a.carGrp {
        background-position: left center;
        background-size: 200px;
    }

    .topBoxShadow:after {
        display: none;
    }

    .topBoxShadow .d-flex {
        flex-wrap: wrap;
    }

    .topBoxShadow {
        margin: 0;
    }
    .topBoxShadow{position:fixed;top: 0;left: 0;z-index: 1000;background:transparent;width:70%;height: 60px;
    display: flex;justify-content: flex-start;align-items: center;}

    .topMenuGrp {
        margin: 0;
        padding: 0;
    }

    .topMenuGrp .topCartListGrp,
    .topMenuGrp .topBtnGrp { display: flex; align-items: center; padding: 0; margin: 0 auto; }



    .topMenuGrp .topCartListGrp {
        background: transparent;        margin-left: auto;        position: fixed;        top: 0rem;        right: 0;
        z-index: 1000;        width: auto;        margin-right: 5%;height: 60px;

    }
    .topMenuGrp .topCartListGrp .cartIconSearchBlue{display:block;width:35px;margin: 5px 4px 0 2px;}
    
    .topCartListGrp .topCartList{
        display: inline-block;
        position: absolute;
        top: 10px;
        right: 40px;
        border-radius: 25px;
        text-align: center;
        color: #fff;
        padding: 5px;
    }

    .topMenuGrp .topCart .appTopCartList{ 
        position: absolute;        top: 0px;        right: 10px;        
        border-radius: 25px;     text-align: center;        
        color: #ff6600;         padding: 5px;
    }

    .topMenuGrp .topSearchGrp {
    }
    .topMenuGrp .topSearchGrp small{display: none;}

    .wrapperGrp {
        margin-bottom: unset;
        display: none;
    }
    .bannerBtnGrpLeft{display: none;}

    .hotNewLink{margin-left: auto;display: block;}

    .hotNewTxt{}

    .hotNewTxt.flex {
        flex-wrap: unset;
        justify-content: flex-start;margin-top: 1rem;
    }

    .hotNewTxt .proMenuIcon {
        margin: 0 0.5rem 0 0;
        display: flex;
        white-space: nowrap;
        align-items: center;
        background: #0085c9 url('../images/cart_tit1Icon.png') no-repeat -20px center;
        background-size: 90px;
        padding: 0.5rem;
        color: #fff;
        padding-left: 70px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .hotNewTxt .proMenuIcon .material-icons {
        margin-top: 0.1rem;
    }

    /* .openHistory {
        display: block;
    } */
    .viewHistoryGrp .tit{font-size: 1.5rem;}
    .historyGrp {
        top: 60px;
        display: block;
        background: rgba(255, 145, 0,0.9);
        width:40%;
        right: -500px;
    }
    .viewHistoryGrp{background: transparent;}
    .viewHistoryGrp .viewHistoryProImgGrp{height: 50vh;overflow: auto;}
    .viewHistoryGrp .viewHistoryProImgGrp img{display: inline-block;width:50%;margin: 0.5rem;}
    .goTopCart{display: none;}
    .accountListGrp{margin:0.5rem 1.5rem;}

    .historyGrp #proViewTop {
        display: none;
    }

    .historyGrp #proViewBottom {
        display: none;
    }

    .viewHistoryGrp .tit {
        padding: 1rem;
    }

    .viewHistoryGrp .viewHistoryProImgGrp {
        overflow-y: auto;
    }

    .col,
    .col-1,
    .col-10,
    .col-11,
    .col-12,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-auto,
    .col-lg,
    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-auto,
    .col-md,
    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-auto,
    .col-sm,
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-auto,
    .col-xl,
    .col-xl-1,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-auto {
        padding: 0;
    }

    .cartMenuGrp,
    .proSearchMenuGrp {
        position: fixed;
        display: block;
        top: 0;
        left: -100%;
        z-index: 2000;
        width: 35%;
        background: #fff;
        height: 100vh;
        overflow: auto;
    }

    .cartMenuGrp .card-body {
        padding: 0.5rem;
    }

    .proSearchMenuGrp {
        background: #f2f2f2;
        padding: 0.5rem;
    }

    .cartMenImg {
        padding: 0.5rem;
    }

    .topHutMenuRightGrp {
        margin: 1rem 0;
    }

    .topHutMenuRightGrp .hotProTit {
        background-size: cover;
        text-align: left;
        padding-right: 4rem;
        margin: 0;
    }

    .topHutMenuRightGrp .hotProTit .more {
        right: 5%;
    }

    .topHutMenuRightGrp .bgTImg {
        width: unset;display: none;
    }

    .bannerBtnGrpRight .titBgStampImg {
        width: unset;
        height: 50%;
    }

    .bannerBtn {
        font-size: 2rem;
    }

    .bannerBtn span {
        font-size: 1rem;
    }

    .btnStomp {
        font-size: 2rem;
    }

    .btnList {
        font-size: 2rem;
    }

    .titBgBlue {
    }

    /* .footerGrp .footerContact {
        flex-wrap: wrap;
    }
    .footerGrp .footerQrCode{margin-top: unset;justify-content: center;margin: 0rem 0;}
    .navLinkGrp{margin: 0.5rem 0;} */
    


}

@media only screen and (max-width: 820px) {
    .proGrp .card{}

    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }
    .bannerBtn {
        font-size: 1.2rem;
        text-align: center;
    }

    .bannerBtn span {
        font-size: 0.9rem;
    }

    .btnStomp {
        font-size: 1.2rem;
        text-align: center;
    }

    .btnList {
        font-size: 1.2rem;
        text-align: center;
    }

    .bannerBtnGrpRight .titBgStampImg {
        width: 170px;
        height: auto;
    }

    .bannerBtnGrpRight .btnList .titBgStamp {
        padding: unset;
    }

    .proGrp .card-title {
        font-size: 1rem;
    }

    .btnAddCart {
        font-size: 1rem;
    }

    .receiveForm .iconLabel {
        width: 100%;
        background-position-y: top;
    }

    .proCarousel .carousel-inner{
        overflow: auto;
        display: block;
        white-space: nowrap;
    }
    .proCarousel .carousel-item{
        float: none;margin-right: 70%;display: inline-block;
    }
    .proCarousel .carousel-item-next, .carousel-item-prev, .carousel-item.active{display: inline-block;}
    .proCarousel .cards-wrapper{display: inline-flex;}

    .proGrp.pgPro, .proGrp{display: block;overflow-x: auto;}

    .salesProGrp.proGrp{white-space:unset;}
    .proGrp .card {width: 31%;}
    
    /* .footerGrp .footerContact{flex-wrap: wrap;} */

}

@media only screen and (max-width: 600px) {
    .footerGrp .footerContact{flex-wrap: wrap;}
    .footerGrp .footerContact .contactGrp{ width: 100%; margin: 0.5rem 1rem;}

    .footerLogoGrp ul{display: block;}
    .footerLogoGrp ul li:first-child, .footerLogoGrp ul li:last-child{text-align: center;}
    
    .topHutMenuRightGrp .hotProListGrp .hotProList{width:21%;}
    .proCarousel .carousel-item{margin-right: 130%;}
    .proGrp .card {width: 30%;margin: 0.5rem 0.3rem;padding: 0;} 
    .proGrp .card .card-body{padding: 0.5rem;}
    .proGrp .card-title{font-size: 1rem;}
    .topMenuGrp .topSearchBtnGrp .searchBtn{background-size:70%;}

    .viewRecordTxt .card{width: 25%;}
    
    .receiveForm .imgCartFormBrush{width: 80px;bottom: 25%;}

    .bannerBtn {
        font-size: 1rem;
    }

    .bannerBtn span {
        font-size: 0.8rem;
    }

    .bannerBtn .btnImg {
        width: 110%;
    }

    .cartMenuGrp,
    .proSearchMenuGrp {
        width: 50%;
    }

    .cartMenuGrp .btn {
        font-size: 1rem;
    }

    .brandGrp {
        padding: 0.5rem;
    }

    .topNavLogoImg {
        width: 150px;
    }

    .cartMenuGrp .cartMenuBlue .cartMenuBlueTit .btn {
        line-height: 1.8;
    }

    .d-flex {
        flex-wrap: wrap;
    }

    .proGrp .card .card-body .btnGrp.d-flex {
        flex-wrap: unset;
    }

    ul li,
    p {
        font-size: 1rem;
    }

    .viewRecordTit {
        width: 100%;
    }

    .pageGrp .navigation {
        margin: 1rem auto;
    }

    .pageGrp .navigation .page-link {
        padding: 0.3rem 0.5rem;
    }

    .smartCardGrp {
        flex-wrap: wrap;
    }

    .smartCardGrp label.tit,
    .descGrp label.tit {
        width: 100%;
        padding: 0;
    }

    .descGrp.d-flex {
        flex-wrap: wrap;
    }

    .descGrp .desc h5.tit,
    .descGrp .desc .txt {
        font-size: 0.9rem;
    }

    .d-flex.listProDetailDesc {
        flex-wrap: wrap;
    }

    .listProDetail .ProDetailImg {
        width: 100%;
        display: block;
    }

    .topMenuGrp .topCartListGrp{top: 0rem;}
    .topMenuGrp .topBtnGrp {
    }

    .containe.topMenuGrp {
        margin: 0.5rem auto;
        margin-top: 1rem;
    }

    .addMemberGrp .addMemberTxt {
        width: 100%;
        flex: none;
    }

    .sortGrp .sort {
        display: flex;
    }

    .sortGrp .cntPg.ml-auto {
        margin: 0 !important;
    }

    .receiveForm .iconLabel {
        margin: 0.5rem 0;
    }
    
    .hotNewTxt {
        margin-bottom: 0rem;
    }
    .col-form-label{margin-bottom: 0.5rem;}
    .form-control{margin-bottom: 0.5rem;}
    .btnAddCartBlue{width: 100%;margin: 0.5rem 0;}
    .pgLogin .btnAddCartBlue{width: unset;}
    .btnAddCartBlue.mr-2{margin: 0 !important;}

    .tbOutLine label{display: block;width: 100%;}
    .tbOutLine .ml-auto{display: block;margin: 0 !important;margin-bottom: 0.5rem !important;}

    .shipGrp.flex{justify-content: flex-end;}

    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9{
        width: 100%;flex: 100%;max-width: 100%;justify-content: left;
    }
    .d-flex.paymentGrp{
        flex-wrap: wrap;
    }
    .paymentGrp .tit, .receiveGrp .tit{
        width: 100%;margin: 1rem 0;
    }
    .paymentGrp .payment,
    .paymentGrp .paymentNote{flex: none;margin:0.5rem auto;display: block;width: 100%;}
    .d-flex .flex1{flex: none;display: block;width: 100%;}
    .memberMessageGrp{width: 90%;}
    .memberMessageGrp .memberMessage{top: -5rem;}
    .addMemberGrp .memberLoginLogoImg{min-height: 27rem;}
    .borderBtm{padding: 0.5rem 0;}
    .messageGrp .messageImgGrp .messageImgLogo{width: 90%;}
    .viewRecordTxt{padding: 0.5rem;}
    
    .smartCardGrp .smartCard{width: 100%;}
    .smartCard .d-flex span{flex: 1;}

    .viewHistoryGrp .tit{padding: 0.5rem 1rem;}
}

@media only screen and (max-width: 440px) {

    .sort label.btnBlue{display: block;text-align: center;margin-bottom: 0.5rem;}
    .sortGrp a{margin: 0.2rem;}
    a.btnBlueLine, .btnBlueLine{padding: 0.2rem 0.5rem;}
    .topHutMenuRightGrp .hotProListGrp .hotProList{width:24%;}
    .proGrp .card{width:47%;}
    .topMenuGrp a.topCart{background-size: 40px;}
    .topMenuGrp .topCartListGrp{margin-right: 0px;}
    .topMenuGrp .topSearchBtnGrp .searchBtn{background-size: 60%;}

    .viewRecordTxt .card{width:25%;}
    .topHutMenuRightGrp .hotProListGrp .hotProList .hotProText .hotProTextTit{font-size: 0.8rem;}

    .topMenuGrp .ml-2,
    .topMenuGrp .mx-2 {
        margin: 0 !important;
    }

    .cartMenuGrp,
    .proSearchMenuGrp {
        width: 60%;
    }

    .small,
    small {
        font-size: 0.8rem;
    }

    .topMenuGrp .topSearchBtnGrp .searchBtn {        
        font-size: 1rem;
    }

    .topMenuGrp .topSearchBtnGrp .inputSearch {
        padding: 0.3rem 0.5rem;
    }

    .bannerBtn {
        width: 99%;
        margin-bottom: 0.5rem;
        font-size: 1.2rem;
    }

    .bannerBtn .btnImg {
        width: 100%;
    }

    .btnList {
        padding: 0;
    }

    .bannerBtnGrpRight .btnList .titBgStamp {
        justify-content: flex-start;
        padding-left: 20%;
    }

    
    .proCarousel .carousel-item{margin-right: 200%;}
    .proDetailCard .proDetailTit{margin: 0.5rem 0;font-size: 1.5rem;}
    .navLinkGrp .nav{margin: 0.5rem 0;}
    
    /* .footerGrp .footerLogoGrp .footerLogo{width: 70%;} */
    .receiveForm .imgCartFormBrush{width: 50px;}

}

@media only screen and (max-width: 400px) {
    .topMenuGrp .btnFont{margin: 0 0.3rem;}
    .hotNewLink{font-size: 0.9rem;}
    .proGrp .card{margin: 0.5rem 0.1rem;}
    .historyGrp{width:50%;}
    .socialIconGrp{
        left: calc((100vw - 90%) / 2);width: 90%; }
}

@media only screen and (max-width: 300px) {
    .topMenuGrp .topCartListGrp{}
    .topMenuGrp a.topCart{padding-left: 2rem;background-size: 30px;}
    .colorGray2{font-size: 0.8rem;}
    .proListGrp .tit .state{position: relative;display: block;}
    .historyGrp{width: 60px;bottom: -370px;}
    .accountListGrp{margin-top: 0;padding: 0;}
    .goTopCart img{margin: 0 auto;}
    .viewHistoryGrp .tit{padding: 0;}
    .proGrp .card {width: 99%;}
    html, body{font-size: 9pt;}
    .memberMessageGrp .memberMessage{background-size: 100%;top: -7rem;}
    
    .memberMessageGrp{margin-top: 6rem;}
    .topMenuGrp .topCartListGrp{}
    .proListGrp .tit .state{height: unset;margin-top: 0.5rem;}
    .rwdTable td:before{display: block;}
    .btnList,.btnStomp{width: 90%;margin: auto;}
    .bannerBtnGrpRight .btnList .titBgStamp{padding-left: 30%;}
}


@media (min-width: 769px) {
    .rwdTable td:before {
        display: none;
    }

    .rwdTable th,
    .rwdTable td {
        display: table-cell;
        padding: 0.25em 0.5em;
    }

    .rwdTable th:first-child,
    .rwdTable td:first-child {
        padding-left: 0;
    }

    .rwdTable th:last-child,
    .rwdTable td:last-child {
        padding-right: 0;
    }

    .rwdTable th,
    .rwdTable td {
        /* padding: 1em !important; */
    }
    
    .tbProList.table td,
    .tbProList.table th {
        padding: 0.5rem;
        vertical-align: middle;
        text-align: center;
        font-size: 0.9rem;
    }

    .rwdTable.table td, .rwdTable.table th{border-bottom: 1px solid #dee2e6;padding: 0.5rem 0;}

}