@charset "utf-8";

/********************
** 메인배너
********************/
.mainBanner{background:linear-gradient(to bottom, #89B2EF, #FFFFFF)}
.bubble::after {    content: '';    position: absolute;    right: -20px;     top: 15px;     width: 0;    height: 0;    border-top: 0px solid transparent;      border-bottom: 30px solid transparent;     border-left: 25px solid #07777E;        border-radius:5px;   }
.underline{text-decoration: underline; text-underline-offset : 6px;}



.troubleTxt_01{top:36px; left:10%;}
.troubleTxt_02{top:30%; right:-2%}
.troubleTxt_03{bottom:35%; left:-1%;}

.underline-svg {    position: absolute;    left: 0;    bottom: 0;     width: 100%;    z-index: -1;     clip-path: inset(0 100% 0 0);  }
.underline-svg.active {    animation: drawUnderline 0.5s ease-out forwards;}
@keyframes drawUnderline {
    from {
        clip-path: inset(0 100% 0 0); 
    }
    to {
        clip-path: inset(0 0 0 0); 
    }
}


.compareBig{border:5px solid #0B5E64;}


.tab_btn {    flex: 1;        transition: all 0.3s;    cursor: pointer;}
.tab_btn:hover {    background-color: #08BFC4;    color: #555;}
.tab_btn.active {    background-color:#07777E;    color: #fff;    font-weight: 700;}
.content_item {    display: none;     animation: fadeIn 0.5s ease-out; background:linear-gradient(to bottom, #EFFEFD, #F7F8F8)}
.content_item.active {    display: block;}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.stepBox{flex:1;}
.stepArrow{transform: rotate(270deg);}
.stepBoxLast{ background:linear-gradient(to bottom, #03989E, #0F4D52)}

/********************
** Contact
********************/
.online{background:url('/img/underwriter/formBg.jpg'); background-size:cover;}
.inputBox{ padding: 24px; border: 1px solid #D9DADE; border-radius: 4px;}
.inputBox:placeholder-shown{color: #91949f; line-height: 1em;}
.qa_Box{display: grid; grid-template-columns: repeat(5 , 1fr);}

.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:#0B5E64; border:1px solid #0B5E64; 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: #0B5E64; border-color: #0B5E64;}
.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;}