@charset "utf-8";



/********************
// tablet 분기점
********************/
@media only screen and (max-width: 1200px) {
   
    .inner{width:calc(100% - 120px); margin:0 auto;}
    .compareBigcrad.grow {    height: 470px; }
    .solutionBg {    display: grid;    grid-template-columns: repeat(1, 1fr); background-size: cover;  background:none; }
    .solutionBox:nth-child(1){background:url('../img/solution-001.jpg');background-size:cover; border-radius: 30px;}
    .solutionBox:nth-child(2){background:url('../img/solution-002.jpg');background-size:cover; border-radius: 30px;}
    .solutionBox:nth-child(3){background:url('../img/solution-003.jpg');background-size:cover; border-radius: 30px;}
    .hoverTxt{opacity: 1; max-height:100px;}
    .serviceBox{display: grid; grid-template-columns: repeat(2, 1fr);}
    .inputBox{ padding: 20px 24px; border: 1px solid #b8bac1; border-radius: 8px;}
}      




/********************
// 모바일 분기점
********************/
@media only screen and (max-width: 768px) {     
    .inner{width:calc(100% - 40px); margin:0 auto;}  
    .circle-icon {    top: 6px;    left: 6px; }
    .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;}

    .compareBigcrad.grow {    height: 220px; }
    .solutionBox:nth-child(1){background:url('../img/solution-001.jpg');background-size:cover; border-radius: 10px;}
    .solutionBox:nth-child(2){background:url('../img/solution-002.jpg');background-size:cover; border-radius: 10px;}
    .solutionBox:nth-child(3){background:url('../img/solution-003.jpg');background-size:cover; border-radius: 10px;}
    .inputBox{ padding: 12px; }
}