@charset "utf-8";


.mainBanner{background:url('/img/cctv/mainBanner.jpg'); background-size:cover; background-position: center;}
.logo{top:70px; left:0; background:rgba(255, 255, 255, 0.2)}
.mainBtn {    background: linear-gradient(135deg, #790036 0%, #26272B 50%, #790036 100%);  }
/* 상단 왼쪽 & 하단 오른쪽 모서리 */
.mainBtn::before { content: ""; position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; background: linear-gradient(to right, #FF006E 2px, transparent 2px) 0 0, linear-gradient(to bottom, #FF006E 2px, transparent 2px) 0 0, linear-gradient(to left, #FF006E 2px, transparent 2px) 100% 100%, linear-gradient(to top, #FF006E 2px, transparent 2px) 100% 100%; background-repeat: no-repeat; background-size: 15px 15px; }
.mainBtn::after {content: ""; position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; background:  linear-gradient(to left, #FF006E 2px, transparent 2px) 100% 0, linear-gradient(to bottom, #FF006E 2px, transparent 2px) 100% 0, linear-gradient(to right, #FF006E 2px, transparent 2px) 0 100%, linear-gradient(to top, #FF006E 2px, transparent 2px) 0 100%; background-repeat: no-repeat; background-size: 15px 15px; }
.mainFot{right:0; bottom:40px; background:rgba(255, 255, 255, 0.2) }


.caseBox{display:grid; grid-template-columns: repeat(2 , 1fr);}



.locationBtn { cursor: pointer; transition: all 0.3s; border:1px solid transparent}
.locationBtn.active {    background: linear-gradient(135deg, #790036 0%, #26272B 50%, #790036 100%) ;    color: #fff !important; box-shadow: 0 0 8px #FF88A8; border:1px solid #FF007A;}
.location-content { display: none; }
.location-content.active {    display: flex;    animation: fadeInUp 0.6s ease-out forwards;}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); 
    }
    to {
        opacity: 1;
        transform: translateY(0);  
    }
}


.brandBox{    background: linear-gradient(to bottom, #FF007A 0%, #AC0050 100%);  }


.calc-btn {     border: none;     position: relative;     cursor: pointer;    transition: all 0.3s ease;}

.calc-btn.active {     background: linear-gradient(135deg, #790036 0%, #26272B 50%, #790036 100%);     color: #fff; }

.calc-btn.active::before { content: "";  position: absolute;  top: -1px; left: -1px; bottom: -1px; right: -1px;  background: linear-gradient(to right, #FF006E 2px, transparent 2px) 0 0,  linear-gradient(to bottom, #FF006E 2px, transparent 2px) 0 0,  linear-gradient(to left, #FF006E 2px, transparent 2px) 100% 100%,  linear-gradient(to top, #FF006E 2px, transparent 2px) 100% 100%;  background-repeat: no-repeat;  background-size: 15px 15px;  pointer-events: none; } 
.calc-btn.active::after {content: "";  position: absolute;  top: -1px; left: -1px; bottom: -1px; right: -1px;  background: linear-gradient(to left, #FF006E 2px, transparent 2px) 100% 0,  linear-gradient(to bottom, #FF006E 2px, transparent 2px) 100% 0,  linear-gradient(to right, #FF006E 2px, transparent 2px) 0 100%,  linear-gradient(to top, #FF006E 2px, transparent 2px) 0 100%;  background-repeat: no-repeat;  background-size: 15px 15px;  pointer-events: none; } 

.result-price {    background: linear-gradient(90deg, #331122 0%, #1a1a1a 100%);    animation: fadeInUp 0.6s ease-out; position: relative;}
.result-price::before { content: "";  position: absolute;  top: -1px; left: -1px; bottom: -1px; right: -1px;  background: linear-gradient(to right, #FF006E 2px, transparent 2px) 0 0,  linear-gradient(to bottom, #FF006E 2px, transparent 2px) 0 0,  linear-gradient(to left, #FF006E 2px, transparent 2px) 100% 100%,  linear-gradient(to top, #FF006E 2px, transparent 2px) 100% 100%;  background-repeat: no-repeat;  background-size: 15px 15px;  pointer-events: none; } 
.result-price::after {content: "";  position: absolute;  top: -1px; left: -1px; bottom: -1px; right: -1px;  background: linear-gradient(to left, #FF006E 2px, transparent 2px) 100% 0,  linear-gradient(to bottom, #FF006E 2px, transparent 2px) 100% 0,  linear-gradient(to right, #FF006E 2px, transparent 2px) 0 100%,  linear-gradient(to top, #FF006E 2px, transparent 2px) 0 100%;  background-repeat: no-repeat;  background-size: 15px 15px;  pointer-events: none; } 

.co_pink { color: #ff007a; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


/********************
** qa
********************/
.online{background:url('/img/cctv/formBg.jpg'); background-size:cover; overflow:hidden}
.online input[type="radio"]{left:-9999px}
.online input[type="radio"] + label{border:1px solid #D9DADE; background:#fefefe; cursor: pointer; transition: ease-in 0.3s;}
.online input[type="radio"]:checked + label{background:#DB0068; border:1px solid #DB0068; color:#fefefe}
.btnBox1{display:grid; grid-template-columns:repeat(4, 1fr)}
.btnBox{display:grid; grid-template-columns:repeat(3, 1fr)}
.inputBox{ padding: 24px; border: 1px solid #D9DADE ;}
.inputBox:placeholder-shown{color: #91949f; line-height: 1em;}
.moreBtn{text-decoration: underline;}
.custom-checkbox{width: 20px; height: 20px; padding: 0; border: 1px solid #222; background-color: #fff; margin-right: 10px; transition: background-color 0.3s, border 0.3s; position: relative;}
.checkpolicy input[type="checkbox"] {display: none;}
.checkpolicy input[type="checkbox"]:checked + .custom-checkbox{background-color: #DB0068; border-color: #DB0068;}
.checkpolicy input[type="checkbox"]:checked + .custom-checkbox::after{content: ''; position: absolute; top: 2px; left: 5px; width: 5px; height: 8px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);}