youhk_test_repository/public/dabory/widget/quick/dabory-quick.css

/* A타입 */

.dabory-quick-A {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    border-left: 1px solid #ddd !important;
    background-color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #333 !important;
    line-height: 150% !important;
    font-weight: 300 !important;
    z-index: 9999 !important;
}

.dabory-quick-A ul {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 150% !important;
    font-weight: 300 !important;
}

.dabory-quick-A ul > li {
    width: 100px !important;
    height: 10% !important;
    list-style: none !important;
    transition: 0.5s ease-in-out !important;
}

.dabory-quick-A ul > li > a, .dabory-quick-A ul > li > button {
    background-color: unset !important;
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
}

.dabory-quick-A ul > li .txt {
    padding-top: 10px !important;
    line-height: 100% !important;
    font-size: 12px !important;
    color: #333 !important;
}

.dabory-quick-A ul > li.act .txt, .dabory-quick-A ul > li.active .txt,
.dabory-quick-A ul > li.act .txt, .dabory-quick-A ul > li:hover .txt {
    color: #22a1ff !important;
}

.dabory-quick-A ul > li .ico.ico-bottom {
    background-image: url(image/r_quick_ico1.png) !important;
    width: 24px !important;
    height: 24px !important;
    transform: rotate( 180deg ) !important;
}

.dabory-quick-A ul > li img {
    width: 24px !important;
    height: 24px !important;
}

.dabory-quick-A ul > li .ico.ico-top {
    background-image: url(image/r_quick_ico1.png) !important;
    width: 24px !important;
    height: 24px !important;
}
/* B타입 */
.dabory-quick-B {
    position: fixed !important;
    right: 30px !important;
    top: 50% !important;
    transform: translate(0, -50%) !important;
    z-index: 9999 !important;
    background-color: #fff !important;
    padding: 7px 7px !important;
    border-radius: 40px !important;
    border: 1px solid #e1e1e1 !important;
}

.dabory-quick-B li {
    text-align: center !important;
    border-bottom: 1px solid #d3d3d3 !important;
}

.dabory-quick-B li > button {
    background-color: unset !important;
    display: block !important;
    padding: 15px 0 !important;
    margin: auto !important;
}

.dabory-quick-B ul > li .ico.ico-bottom {
    display: flex !important;
    align-items: center !important;
    margin: auto !important;
    background-image: url(image/r_quick_ico1.png) !important;
    width: 24px !important;
    height: 24px !important;
    transform: rotate( 180deg ) !important;
}

.dabory-quick-B ul > li img {
    display: flex !important;
    align-items: center !important;
    margin: auto !important;
    width: 24px !important;
    height: 24px !important;
}


.dabory-quick-B ul > li .ico.ico-top {
    display: flex !important;
    align-items: center !important;
    margin: auto !important;
    background-image: url(image/r_quick_ico1.png) !important;
    width: 24px !important;
    height: 24px !important;
}

.dabory-quick-B > ul > li:last-child {
    border-bottom: 0 !important;
}

.dabory-quick-B > ul > li .txt {
    padding-top: 10px !important;
    line-height: 100% !important;
    font-size: 12px !important;
    color: #333 !important;
}

.dabory-quick-B > ul > li.act .txt, .dabory-quick-B > ul > li.active .txt,
.dabory-quick-B > ul > li.act .txt, .dabory-quick-B > ul > li:hover .txt {
    color: #22a1ff !important;
}

.dabory-quick-B > ul > li button[data-widget="coupon"] .txt {color: #e17070 !important;}

@media only screen and (max-width:991px){
	.dabory-quick-B {right: 0!important;  left: 0;  top: auto!important;  bottom: 0;  transform: translate(0, 0) !important;  border: none!important;  border-top: 1px solid #e1e1e1!important;  border-radius: 0!important;  padding: 0px 7px!important; box-shadow: 0px -1px 8px rgba(0, 0, 0, 0.1);}
	.dabory-quick-B ul {display:flex;}
	.dabory-quick-B li {flex:auto; border-bottom:none!important;}
	.dabory-quick-B li:first-of-type {display:none;}
	.dabory-quick-B li:last-of-type {position:absolute; top:-60px; right:0;}
	.dabory-quick-B ul > li .ico.ico-bottom,
	.dabory-quick-B ul > li .ico.ico-top	{width: 40px!important;  height: 40px!important; background-color: #1c2f5e;   border-radius: 50px;  background-repeat: no-repeat;  background-position: center; background-image: url(image/r_quick_ico1_mob.png) !important;}
	.dabory-quick-B ul > li img {width:20px!important; height:20px!important;}
}