@charset "utf-8";
/********************
** 메인
********************/
.mainBannerTxt{    background: linear-gradient(to bottom, rgba(36, 61, 209, 1), rgba(36, 61, 209, 0));    -webkit-background-clip: text;    background-clip: text;    -webkit-text-fill-color: transparent;    color: transparent;}


/********************
** pastno
********************/
.pastnowBox{display: grid; grid-template-columns: repeat(2 , 1fr);}
.pastnowBox1{border:2px solid #26272B;border-right:1px solid #395BE5; border-radius: 24px 0 0 0;}
.pastnowBox2{border:2px solid #395BE5; border-left: 1px solid #395BE5; border-radius: 0 24px 0 0;}
.pastnowTxt1{border-radius: 0 0 0 24px;}
.pastnowTxt2{border-radius: 0 0 24px 0;}


/********************
** why
********************/
.why{background-image:url('/img/insurance/whyBg.png'); background-size:100%; background-position:bottom; background-repeat: no-repeat;}
.whyPhone{background: linear-gradient(to bottom, #C1D4FC , #fff); border:16px solid #5D606C; border-radius: 56px 56px 0 0; border-bottom:none;}
.blurTxt{filter: blur(4px);    opacity: 0.9;       vertical-align: middle;}


/********************
** reason
********************/
.reason{background:url('/img/insurance/reasonBg.jpg'); background-size:cover;}


/********************
** alternative
********************/
.alternative{background:linear-gradient(to bottom, #26272B , #191F52); }
.unline{text-decoration: underline;}
.alternativeBottom{ background:url('/img/insurance/alternativeBg.png'); background-size:cover; background-position:top;}


/********************
** item
********************/
.itemBox{display:grid; grid-template-columns: repeat(2 , 1fr);}
.itemList{border:2px solid #26272B; overflow: hidden;}
.itemLabel{top:0; right:0;}


/********************
** change
********************/
.polygon {background-color: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%);}


/********************
** compare
********************/
.dashBor{background-image: linear-gradient(to right, #D9DADE 60%, rgba(255, 255, 255, 0) 0%);    background-position: bottom;    background-size: 32px 1px;    background-repeat: repeat-x;}
.polygonW {background-color: #F0F4FE; clip-path: polygon(0 0, 100% 0, 50% 100%); bottom:-59px; left:50%; transform: translate(-50%, 0);}


/********************
** case
********************/
.caseList::after {content: ""; position: absolute; bottom: 0; left: 80px; right: 80px; height: 1px; background-color: #D9DADE; }
.caseSuccess{display:grid; grid-template-columns: repeat(2 , 1fr);}


/********************
** way
********************/
.way-rail-container {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#way-svg {width: 100%; height: 100%; }
#way-dot {filter: drop-shadow(0 0 5px rgba(75, 123, 255, 0.8)); opacity: 0; transition: opacity 0.3s; }
.way-item {position: relative; z-index: 2;}




/********************
** Contact
********************/
.online{background-image:url('/img/insurance/qaBg.png'); background-size:cover; background-position:bottom;}
.inputBox{ padding: 24px; border: 1px solid #D9DADE; border-radius: 4px;}
.inputBox:placeholder-shown{color: #91949f; line-height: 1em;}

.online input[type="checkbox"]{left:-9999px}
.online input[type="checkbox"] + label{border:1px solid #D9DADE; background:#fefefe; cursor: pointer; transition: ease-in 0.3s;}
.online input[type="checkbox"]:checked + label{background:#096FFF; border:1px solid #096FFF; color:#fefefe}
.inputTxtBox{max-width: 100%; min-width: 100%; max-height:240px; min-height: 150px;}
.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: #096FFF; border-color: #096FFF;}
.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;}

.onlineBtn{ cursor: pointer;}