@charset "utf-8";
@media only screen and (max-width: 1400px) {

    .comparison_table {width: 800px;    grid-template-columns: auto 244px 244px;}

}
/********************
// tablet 분기점
********************/
@media only screen and (max-width: 1200px) {
   
    .inner{width:calc(100% - 120px); margin:0 auto;}
    .m_mainImg{padding-left:9dvw;}
    .mainBtn{bottom:31%;}

    .caseLeft {position: static !important; }
    .caseLeft_wrapper {    width: calc(100% - 0px); }
    .reviewBox{display:grid; grid-template-columns: repeat(2 , 1fr);}

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

    .partner{background:url('/img/partnerBg.png'); background-size:cover;}
    .chat_container {background: url('/img/partnerT.png'); background-size:100%; background-repeat: no-repeat; background-position: top;} 

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

    .filter_btn.active::after {   right: -16px; }
    .faq_item.active .faq_answer {    padding: 0 16px 24px 16px; }
    .qaImg1{top:0; left:0%;}
    .qaImg2{top:0; right:0%;  }
}      




/********************
// 모바일 분기점
********************/
@media only screen and (max-width: 768px) {     
    .inner{width:calc(100% - 40px); margin:0 auto;}     
    .mainBanner{background-size:cover; background-position:center; overflow: hidden;}
    .mainImg{width:147% !important; bottom:-20px; left:-12%}

    .m_mainImg{padding-left:0dvw; width:125%;   margin-right: -19dvw;}



    .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;}



    .chat_container {background: url('/img/partnerM.png'); background-size:100%; background-repeat: no-repeat; background-position: top;} 

    .helpBox{display:grid; grid-template-columns: repeat(1, 1fr);}
    .faq_item + .faq_item {    margin-top: 8px;}
    .faq_item.active .faq_answer {    max-height: 200px;     padding: 0 12px 16px 12px;    opacity: 1;}
    .inputBox{ padding: 16px 12px;}
    .qaImg1{top:0; left:0%;}
    .qaImg2{top:0; right:0%;  align-self: flex-end;}
}