.card_top{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 30px;}
.card_top > a{width: 100%; box-sizing: border-box;}
.card_top .ctBox > div:first-child > div{position: relative; padding-bottom: 100%; border-radius: 10px; background-color: var(--bg_silver); transition: var(--transition);}
.card_top .ctBox:hover > div:first-child > div{box-shadow: inset 0px 0px 0px 2px var(--bg_blue);}
.card_top .ctBox > div:first-child > div > div{position: absolute; bottom: 10px; left: 10px; padding: 3px 7px; background: var(--bg_orange); border-radius: 5px; color: var(--text_white); font-size: 11px; margin-right: 3px;}
.card_top .ctBox > div:nth-child(2){margin-top: 5px; text-align: center;}
.card_top .ctBox > div:nth-child(2) > div:first-child{font-weight: bold; font-size: 15px; display: grid; width: 100%;}
.card_top .ctBox .cbPrice{margin-top: 3px;}
.card_top .ctBox .cbPrice > div:first-child{color: var(--text_blue);}
.card_top .ctBox .cbPrice > div:nth-child(2){font-size: 11px; margin-top: 3px; color: var(--text_silver);}
.card_top .ctBox .cbPrice > div:nth-child(2) > span:first-child{padding: 2px 5px; margin-right: 5px; background: var(--bg_red); border-radius: 3px; color: var(--text_white);}

.card_ec{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
.card_ec > a{width: 100%; box-sizing: border-box;}
.card_ec .ceBox > div:first-child > div{position: relative; padding-bottom: 100%; background-color: var(--bg_silver); transition: var(--transition);}
.card_ec .ceBox:hover > div:first-child > div{box-shadow: inset 0px 0px 0px 2px var(--bg_blue);}
.card_ec .ceBox > div:nth-child(2){text-align: center; padding: 5px 10px 0px 10px;}
.card_ec .ceBox > div:nth-child(2) > div:first-child{font-weight: bold; font-size: 15px; display: grid; width: 100%;}
.card_ec .ceBox .cbPrice{margin-top: 3px;}
.card_ec .ceBox .cbPrice > div:first-child{color: var(--text_blue);}
.card_ec .ceBox .cbPrice > div:nth-child(2){font-size: 11px; margin-top: 3px; color: var(--text_silver);}
.card_ec .ceBox .cbPrice > div:nth-child(2) > span:first-child{padding: 2px 5px; margin-right: 5px; background: var(--bg_red); border-radius: 3px; color: var(--text_white);}

.card_items{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 20px;}
.card_items > a{width: 100%; box-sizing: border-box;}
.card_items .ciBox > div:first-child > div{position: relative; padding-bottom: 100%; border-radius: 10px; background-color: var(--bg_silvercalm); transition: var(--transition);}
.card_items .ciBox:hover > div:first-child > div{box-shadow: inset 0px 0px 0px 2px var(--bg_blue);}
.card_items .ciBox > div:first-child > div > div{position: absolute; bottom: 10px; left: 10px; padding: 3px 7px; background: var(--bg_orange); border-radius: 5px; color: var(--text_white); font-size: 11px; margin-right: 3px;}
.card_items .ciBox > div:nth-child(2){margin-top: 10px; text-align: center;}
.card_items .ciBox > div:nth-child(2) > div:first-child{font-weight: bold; font-size: 15px; display: grid; width: 100%;}
.card_items .ciBox > div:nth-child(2) > div:nth-child(2){margin-top: 1px; color: var(--text_silver);}
.card_items .ciBox .cbPrice{margin-top: 3px;}
.card_items .ciBox .cbPrice > div:first-child{color: var(--text_blue);}
.card_items .ciBox .cbPrice > div:nth-child(2){font-size: 11px; margin-top: 3px; color: var(--text_silver);}
.card_items .ciBox .cbPrice > div:nth-child(2) > span:first-child{padding: 2px 5px; margin-right: 5px; background: var(--bg_red); border-radius: 3px; color: var(--text_white);}

.card_items_mini{}
.card_items_mini > a:not(:last-child) > div{border-bottom: 1px solid var(--bg_line);}
.card_items_mini .cimItem{padding: 10px 0px; display: grid; grid-template-columns: 40px 1fr 15px; grid-gap: 15px; align-items: center; transition: var(--transition);}
.card_items_mini .cimItem:hover{background: var(--bg_silvercalm);}
.card_items_mini .cimItem > div{width: 100%; color: var(--text_black);}
.card_items_mini .cimItem .ciCover > div{padding-bottom: 150%; border-radius: 3px; background-color: var(--bg_silvercalm);}
.card_items_mini .cimItem .ciDesc > div:first-child > span{padding: 2px 5px; background: var(--bg_silver); color: var(--text_white); border-radius: 3px; font-size: 11px; font-weight: bold;}
.card_items_mini .cimItem .ciDesc > div:first-child > span.cdValidate{margin-left: 5px; background: var(--bg_orange);}
.card_items_mini .cimItem .ciDesc > div:nth-child(2){margin-top: 5px;}
.card_items_mini .cimItem .ciMore > div{width: 15px; height: 15px;}

.card_hrz_items{display: grid; position: relative;}
.card_hrz_items::-webkit-scrollbar{display: none;}
.card_hrz_items .chiCnt{white-space: nowrap; width: 100%; overflow: auto; padding-bottom: 2px; -ms-overflow-style: none; scrollbar-width: none;}
.card_hrz_items .chiCnt > a{display: inline-block; vertical-align: top; width: 145px; box-sizing: border-box;}
.card_hrz_items .chiCnt > a:first-child{margin-left: 20px;}
.card_hrz_items .chiCnt > a:not(:last-child){margin-right: 15px;}
.card_hrz_items .chiCnt .ccBox > div:first-child > div{padding-bottom: 100%; border-radius: 10px; background-color: var(--bg_silvercalm); transition: var(--transition);}
.card_hrz_items .chiCnt .ccBox:hover > div:first-child > div{box-shadow: inset 0px 0px 0px 2px var(--bg_blue);}
.card_hrz_items .chiCnt .ccBox > div:nth-child(2){margin-top: 10px;}
.card_hrz_items .chiCnt .ccBox > div:nth-child(2) > div:first-child{font-weight: bold; font-size: 15px;}
.card_hrz_items .chiCnt .ccBox > div:nth-child(2) > div:nth-child(2){color: var(--text_silver);}
.card_hrz_items .chiCnt .ccBox .cbPrice{margin-top: 3px;}
.card_hrz_items .chiCnt .ccBox .cbPrice > div:first-child{color: var(--text_blue);}
.card_hrz_items .chiCnt .ccBox .cbPrice > div:nth-child(2){font-size: 11px; margin-top: 3px; color: var(--text_silver);}
.card_hrz_items .chiCnt .ccBox .cbPrice > div:nth-child(2) > span:first-child{padding: 2px 5px; margin-right: 5px; background: var(--bg_red); border-radius: 3px; color: var(--text_white);}
.card_hrz_items:hover .scroll_card{opacity: 1;}

.card_item_box{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.card_item_box.cib3{grid-template-columns: 1fr 1fr 1fr;}
.card_item_box > a{width: 100%; box-sizing: border-box;}
.card_item_box .cibBox{display: grid; grid-template-columns: 100px 1fr; grid-gap: 10px;}
.card_item_box.cibCenter .cibBox{align-items: center;}
.card_item_box .cibBox > div{width: 100%;}
.card_item_box .cibBox > div:first-child > div{padding-bottom: 100%; border-radius: 5px; background-color: var(--bg_silvercalm);}
.card_item_box .cibBox > div:nth-child(2) > div:first-child{display: grid; width: 100%; font-weight: bold;}
.card_item_box .cibBox > div:nth-child(2) > div:nth-child(2){color: var(--text_silver);}
.card_item_box .cibBox .cbPrice{margin-top: 3px;}
.card_item_box .cibBox .cbPrice > div:first-child{color: var(--text_blue);}
.card_item_box .cibBox .cbPrice > div:nth-child(2){font-size: 11px; margin-top: 3px; color: var(--text_silver);}
.card_item_box .cibBox .cbPrice > div:nth-child(2) > span:first-child{padding: 2px 5px; margin-right: 5px; background: var(--bg_red); border-radius: 3px; color: var(--text_white);}
.card_item_box .cibBox .cbBtn{padding: 15px 0px; color: var(--text_black);}
.card_item_box .cibBox .cbBtn span{font-weight: bold;}

.card_article{display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr;}
.card_article > a{width: 100%; border: 1px solid var(--bg_silvercalm); border-radius: 10px; overflow: hidden; box-sizing: border-box;}
.card_article .caBox > div:first-child{padding-bottom: 40%; background-color: var(--bg_silvercalm);}
.card_article .caBox > div:nth-child(2){padding: 10px 15px;}
.card_article .caBox > div:nth-child(2) > div:first-child{font-weight: bold;}
.card_article .caBox > div:nth-child(2) > div:nth-child(2){font-size: 11px; color: var(--text_silver);}

.card_cart_item{}
.card_cart_item > div{padding: 20px 15px; display: grid; grid-template-columns: 20px 1fr; grid-gap: 15px; box-sizing: border-box;}
.card_cart_item > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.card_cart_item > div > div{width: 100%;}
.card_cart_item > div > div:first-child{text-align: center; padding-top: 3px;}
.card_cart_item > div > div:first-child input{transform: scale(1.3); cursor: pointer;}
.card_cart_item .cciContent{margin-top: 15px; overflow: hidden; margin-top: 15px; border: 1px solid var(--bg_line); border-radius: 5px;}
.card_cart_item .cciContent > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.card_cart_item .cItem{display: grid; grid-template-columns: 15px 60px 1fr; grid-gap: 15px; box-sizing: border-box; padding: 15px 10px;}
.card_cart_item .cItem > div{width: 100%;}
.card_cart_item .cItem > div:first-child{padding-top: 7px;}
.card_cart_item .cItem > div:first-child input{transform: scale(1.2); cursor: pointer;}
.card_cart_item .cItem > div:nth-child(2) > div{padding-bottom: 150%; border-radius: 5px; background-color: var(--bg_silvercalm);}
.card_cart_item .cItem .ciBody{padding-top: 3px;}
.card_cart_item .cItem .ciBody > div:first-child{font-weight: bold;}
.card_cart_item .cItem .ciBody > div:nth-child(2){font-family: 'bold'; margin-top: 7px; font-size: 15px;}
.card_cart_item .cItem .ciBody > div:nth-child(3){font-size: 12px; margin-top: 2px; color: var(--text_silver);}
.card_cart_item .cItem .ciBody .cibOption{height: 30px; margin-top: 10px;}
.card_cart_item .cItem .ciBody .cibOption > div{float: right; white-space: nowrap;}
.card_cart_item .cItem .ciBody .cibOption > div > div{display: inline-block; vertical-align: top;}
.card_cart_item .cItem .ciBody .cibOption > div > div:not(:last-child){margin-right: 15px;}
.card_cart_item .cItem .coDelete{width: 30px; height: 30px;}
.card_cart_item .cItem .coDelete > div{width: 20px; height: 20px; margin-top: 5px;}
.card_cart_item .cItem .coCountDig{}
.card_cart_item .cItem .coCountDig > div{padding: 3px 0px; width: 35px; text-align: center; border-radius: 5px; margin-top: 1px; font-family: 'bold'; box-shadow: 0px 0px 0px 1px var(--bg_line);}
.card_cart_item .cItem .coCount{width: 80px; height: 30px; padding: 0px 5px; box-shadow: 0px 0px 0px 1px var(--bg_line); border-radius: 5px; display: grid; grid-template-columns: 25px 1fr 25px; align-items: center;}
.card_cart_item .cItem .coCount > div{width: 100%; text-align: center; font-family: 'bold'}
.card_cart_item .cItem .coCount > div:not(:nth-child(2)){cursor: pointer; transition: var(--transition);}
.card_cart_item .cItem .coCount > div:not(:nth-child(2)):hover{transform: scale(1.2);}
.card_cart_item .cItem .coCount > div:not(:nth-child(2)) > div{width: 15px; height: 15px;}
.card_cart_item .cItem .ciAlert{color: var(--text_red); margin-top: 10px; font-size: 11px; text-align: right;}
.card_cart_item .cItem.warning {box-shadow: inset 0px 0px 0px 2px var(--bg_red);}

.card_transaction{margin-top: 20px;}
.card_transaction > div:not(:last-child){margin-bottom: 20px;}
.card_transaction > div > div:first-child{font-family: 'bold';}
.card_transaction > div > div:nth-child(2){margin-top: 5px;}
.card_transaction .ctList > a > div{border-radius: 5px; border: 1px solid var(--bg_line);}
.card_transaction .ctList > a:not(:last-child) > div{margin-bottom: 15px;}
.card_transaction .ctList .clHead{display: grid; grid-template-columns: 1fr 100px; align-items: center; padding: 10px 15px; box-sizing: border-box; border-bottom: 1px solid var(--bg_line);}
.card_transaction .ctList .clHead > div{width: 100%; font-weight: bold;}
.card_transaction .ctList .clHead > div:first-child{color: var(--text_blue);}
.card_transaction .ctList .clHead > div:nth-child(2){text-align: right; font-family: 'bold'; color: var(--text_silver);}
.card_transaction .ctList .clHead.pending > div:nth-child(2){color: var(--text_orange);}
.card_transaction .ctList .clHead.process > div:nth-child(2){color: var(--text_silver);}
.card_transaction .ctList .clHead.success > div:nth-child(2){color: var(--text_green);}
.card_transaction .ctList .clHead.failed > div:nth-child(2){color: var(--text_red);}
.card_transaction .ctList .success .clHead > div:nth-child(2){color: var(--text_green);}
.card_transaction .ctList .failed .clHead > div:nth-child(2){color: var(--text_red);}
.card_transaction .ctList .clContent{padding: 15px; box-sizing: border-box; display: grid; grid-template-columns: 50px 1fr; grid-gap: 15px;}
.card_transaction .ctList .clContent > div{width: 100%;}
.card_transaction .ctList .clContent > div:first-child > div{padding-bottom: 150%; background-color: var(--bg_silvercalm); border-radius: 5px;}
.card_transaction .ctList .clContent .ccTitle{font-weight: bold;}
.card_transaction .ctList .clContent .ccDate{margin-top: 3px; font-size: 11px;}
.card_transaction .ctList .clContent .ccPayment{display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin-top: 10px;}
.card_transaction .ctList .clContent .ccPayment > div{width: 100%;}
.card_transaction .ctList .clContent .ccPayment > div:first-child{color: var(--text_blue); font-weight: bold; font-size: 15px;}
.card_transaction .ctList .clContent .ccPayment > div:nth-child(2){text-align: right;}
.card_transaction .ctList .clContent .ccPayment > div:nth-child(2) img{height: 15px;}
.card_transaction .ctList .clBtn{padding: 0px 15px 15px 15px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; box-sizing: border-box;}
.card_transaction .ctList .clBtn > div{width: 100%;}
.card_transaction .ctList .clBtn > div:first-child{color: var(--text_silver);}
.card_transaction .ctList .clBtn > div:nth-child(2){text-align: right;}

.card_notif{}
.card_notif > div{padding: 10px 15px; border-radius: 5px; border: 1px solid var(--bg_line);}
.card_notif > div:not(:last-child){margin-bottom: 15px;}
.card_notif > div > div:first-child{font-weight: bold;}
.card_notif > div > div:nth-child(3){font-size: 11px; color: var(--text_silver);}

.card_package > div{padding: 15px 20px;}
.card_package > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.card_package > div > div{position: relative; z-index: 1;}
.card_package > div > div > div:first-child{font-family: 'bold'; color: var(--text_silver);}
.card_package > div > div > div:nth-child(2){display: grid; align-items: center; grid-template-columns: 1fr 1fr;}
.card_package > div > div > div:nth-child(2) > div{width: 100%;}
.card_package > div > div > div:nth-child(2) > div:first-child{font-size: 20px;}
.card_package > div > div > div:nth-child(2) > div:nth-child(2){font-size: 17px; text-align: right; font-family: 'bold';}