

.blast-box{position:fixed;width:300px;;top: 250px;
left:-260px;color:#3C8137;z-index: 9999999;transition:0.5s cubic-bezier(1, 1.48, 0.76, 0.95) left}

.blast-icon {position:absolute;width:40px;line-height:40px;right:2px;top:2px;color:#3C8137;background-color: rgba(255, 255, 255, 1.0);
text-align:center;font-size:20px;cursor:pointer;perspective:1000px;transition:0.5s ease all;
transform-origin:left;transition-delay:0.5s;z-index:9999999}

.blast-box .blast-frame{position:absolute;z-index: 999;width:calc(100% - 40px);  top:0;left:0;
background: #ffffff;text-align:center;overflow:hidden;
text-transform:uppercase;color:#3C8137;padding:20px 5px;  border: 2px solid #eeeeee;}

.blast-box .blast-colors{margin:10px;padding:20px 0 0px 0;}

.blast-box ul.color {
     text-align:center;  /* 2.인라인 속성으로 변한 li들을 텍스트로 인식해 중앙정렬 하게 만들어 줍니다. */
}
.blast-box ul.color li{
     display:inline-block; /* 1. li의 속성을 인라인-블록으로 변경해줍니다. */
}


.blast-box .blast-color {margin:2px;height:35px;width:35px;max-height:35px;max-width:35px;
color:transparent;overflow:hidden;cursor:pointer;border:2px solid white;}

.blast-box p {font-size:22px; font-weight:400 ;}


.blast-box .blast-custom-colors{clear:both;padding-top:40px}

.blast-box input[name="blastCustomColor"]{margin-top:20px;cursor:pointer;height:30px;width:100px;border:none;
outline:none;background:transparent;padding:0}

.appear-it{left:0}
.flip-it{transform:rotateY(180deg);border-left:none}


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

.blast-box{position:fixed;width:100%;height:100%;top: 0px;background-color: rgba(0, 0, 0, 0.8);;
left:-100%;z-index: 1000;}

.blast-icon {position:absolute;width:40px;line-height:0px;right:-43px;top:8px;color:#ffffff;
background-color: rgba(255, 255, 255, 0.0);text-align:center;font-size:1rem;cursor:pointer;perspective:1000px;
transition:0.5s ease all;transform-origin:left;transition-delay:0.5s;z-index:1001}

.blast-box .blast-frame{position:absolute;z-index: 1000;width:calc(80% - 40px); height:100%; top:0;left:0;
background: #ffffff;text-align:center; text-transform:uppercase;color:#3C8137;padding:50px 5px;  border: 1px solid #eeeeee;}

.blast-box .blast-colors{margin:10px;padding:20px 0 0px 0;}

.blast-box .blast-color {margin:2px;height:35px;width:35px;max-height:35px;max-width:35px;
color:transparent;overflow:hidden;cursor:pointer;border:2px solid white}

.blast-box p {font-size:22px; font-weight:400 ;}


.blast-box .blast-custom-colors{clear:both;padding-top:40px}

.blast-box input[name="blastCustomColor"]{margin-top:20px;cursor:pointer;height:30px;width:100px;border:none;
outline:none;background:transparent;padding:0}

.appear-it{left:0}
.flip-it{transform:rotateY(180deg);border-left:none}

	}