@charset "utf-8";
/********************
** 해더
********************/
header{top:0;background-color: rgba(255, 255, 255, 0.6);     backdrop-filter: blur(6px); }

/********************
** 메인배너
********************/
.mainBanner{background: url('../img/mainBanner.jpg'); background-size:cover; background-position: center;}
.mainBox{     border: 6px solid transparent;    background-image:linear-gradient(#fff, #fff), linear-gradient(to right , #968CF9, #5229D8);   background-origin: padding-box, border-box;      background-clip: padding-box, border-box; }



/********************
** 서브베너
********************/
.subBanner{background: linear-gradient(to bottom, #EAE9FE, #F3F3FF);}


.productPay{ text-decoration:line-through}


.subProduct_01{background:url('../img/subBanner_001.jpg'); background-size:cover; background-position:right;}
.subProduct_02{background:url('../img/subBanner_002.jpg'); background-size:cover; background-position:right;}


.benefit{background: linear-gradient(to bottom, #fff, #F3F3FF);}
.benefitBox{display:grid; grid-template-columns: repeat(3 , 1fr);}


/********************
** Contact
********************/
.contact{background:url('../img/contactBg.jpg'); background-size:cover; background-position: center;}
.inputBox{  border: 1px solid #D9DADE; border-radius: 4px;}
.inputBox:placeholder-shown{color: #91949f; line-height: 1em;}

.contact input[type="radio"]{left:-9999px}
.contact input[type="radio"] + label{border:1px solid #D9DADE; background:#fefefe; cursor: pointer; transition: ease-in 0.3s;}
.contact input[type="radio"]:checked + label{background:#613BEC; border:1px solid #613BEC; color:#fefefe}


.custom-checkbox{width: 20px; height: 20px; padding: 0; border: 1px solid #26272b; border-radius: 4px; 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: #613BEC; border-color: #613BEC;}
.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);}

.moreBtn{text-decoration: underline;}

.contactBtn{ cursor: pointer;}