@charset "utf-8";
@media only screen and (max-width: 1400px) {
    .mainIconBox1{top:15%; left:5%;}
    .mainIconBox2{top:40%; right:6%;}
    .mainIconBox3{bottom:10%; left:11%;}

    .success{flex-direction: column; gap:40px;}
    .successBox{width:100%;}
    .faq_container {  grid-template-columns: auto 800px; }
}
/********************
// tablet 분기점
********************/
@media only screen and (max-width: 1200px) {
   
    .inner{width:calc(100% - 120px); margin:0 auto;}
    .success_m{display:grid; grid-template-columns: repeat(2,1fr);}
    .subBannerMarker{width:110%;}
    .card-container {    display: grid; grid-template-columns: repeat(1, 1fr);}
    .protectionBox{display:grid; grid-template-columns:repeat(1, 1fr);}
    .step_grid {    display: grid;    grid-template-columns: 1fr auto 1fr ;  align-items: stretch; }
    .subBannerMarker {    bottom: -8px;    left: -6%; }
    .faq_container {    display: grid;    grid-template-columns:repeat(1,1fr);    justify-content: space-between;}
    .filter_btn.active::after {   right: -16px; }
    .faq_item.active .faq_answer {    padding: 0 16px 24px 16px; }
}      




/********************
// 모바일 분기점
********************/
@media only screen and (max-width: 768px) {     
    .inner{width:calc(100% - 40px); margin:0 auto;} 
    .mainBanner{ background-position-y:-70%; background-repeat: no-repeat;}
    .circle-icon {    position: absolute;    top: 5px;    left: 5px;    z-index: 10;    transition: left 0.4s ease-in-out;}
    .text-default {    opacity: 1;    left: calc((177px + 40px) / 2);     transform: translate(-50%, -50%);}
    .text-hover {    opacity: 0;    left: calc((177px - 40px) / 2);    transform: translate(-50%, -50%);}
    .hover-btn:hover .circle-icon {    left: calc(100% - 40px - 6px); }
    .hover-btn:hover .circle-icon img {    transform: rotate(90deg);}
    .hover-btn:hover .text-default {    opacity: 0;    left: calc((177px - 40px) / 2);}
    .hover-btn:hover .text-hover {    opacity: 1;}

    .success_m{display:grid; grid-template-columns: repeat(1,1fr);}
    .subBannerMarker {    bottom: -6px;    left: -6%; }
    .filter_btn.active::after {   right: -14px; }
    .faq_item.active .faq_answer {    padding: 12px 16px 12px 16px; }
    .inputBox{ padding: 16px 12px;}

}