@import url('sub.css'); 
.support_cont .sub_cont_top {margin-bottom: 80px;}

.support_cont .support_grid ul li .support_grid_card {display: flex; padding: 45px; background-color: var(--grayBg); height: 100%; flex-direction: column; justify-content: space-between;}

.support_cont .support_grid ul li .icon {display: flex; margin-bottom: 60px;}
.support_cont .support_grid ul li .icon img {height: 60px; width: auto;}
.support_cont .support_grid ul li .txt_more_wrap {display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.support_cont .support_grid ul li .txt_more_wrap .txtbox {display: flex; flex-direction: column;}
.support_cont .support_grid ul li .txt_more_wrap .txtbox h4 {transition: var(--transition); margin-bottom: 12px;}
.support_cont .support_grid ul li .txt_more_wrap .txtbox .before_icon {display: flex; align-items: center; gap: 6px; cursor: pointer; position: relative; z-index: 1; transition: var(--transition);}
.support_cont .support_grid ul li .txt_more_wrap .txtbox .before_icon:hover {color: var(--black);}
.support_cont .support_grid ul li .txt_more_wrap .txtbox .before_icon::before {font-size: 18px; content: '\e0b0'; padding-top: 3px;}
.support_cont .support_grid ul li .txt_more_wrap .txtbox .before_icon.mail::before {content: '\e158';}


.support_cont .support_grid ul li .txt_more_wrap .more_s {width: 88px; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--main); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--white); transition: var(--transition); position: relative; overflow: hidden;}
.support_cont .support_grid ul li .txt_more_wrap .more_s span {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; left: 0; transition: var(--transition);}   
.support_cont .support_grid ul li .txt_more_wrap .more_s span::before {content: '\f1df'; font-size: 34px;}
.support_cont .support_grid ul li .txt_more_wrap .more_s span:last-child {position: absolute; left: 100%; top: 0;}

.support_cont .support_grid ul li .txt_more_wrap .more_s:hover {background-color: #1D154E;}
.support_cont .support_grid ul li .txt_more_wrap .more_s:hover span:first-child {left: -100%;}
.support_cont .support_grid ul li .txt_more_wrap .more_s:hover span:last-child {left: 0;}


/*******************************************************************************
    @media ~1920px
*******************************************************************************/
@media all and (max-width:1920px){

}

/*******************************************************************************
    @media ~1766px
*******************************************************************************/
@media all and (max-width:1766px){
.support_cont .support_grid ul li .support_grid_card {padding: 35px;}
.support_cont .support_grid ul li .txt_more_wrap {align-items: flex-end;}
.support_cont .support_grid ul li .txt_more_wrap .more_s {width: 65px;}
.support_cont .support_grid ul li .txt_more_wrap .more_s span::before {font-size: 30px;}
}

/*******************************************************************************
    @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){
.support_cont .support_grid ul li .support_grid_card {position: relative;}
.support_cont .support_grid ul li .txt_more_wrap .more_s {position: absolute; top: 35px; right: 35px;}

}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
.support_cont .support_grid ul {gap: 15px; grid-template-columns: repeat(2,1fr);}
.support_cont .support_grid ul li .txt_more_wrap .txtbox h4 {margin-bottom: 8px;}
}

/*******************************************************************************
    @media ~980px
*******************************************************************************/
@media all and (max-width:980px){
.support_cont .sub_cont_top {margin-bottom: 40px;}
    
.support_cont .support_grid ul {gap: 10px; grid-template-columns: repeat(2,1fr);}
.support_cont .support_grid ul li .support_grid_card {padding: 25px;}
.support_cont .support_grid ul li .icon {margin-bottom: 30px;}
.support_cont .support_grid ul li .icon img {height: 50px;}
.support_cont .support_grid ul li .txt_more_wrap .txtbox .before_icon::before {font-size: 16px; padding-top: 2px;}

.support_cont .support_grid ul li .txt_more_wrap .more_s {width: 50px; top: 25px; right: 25px;}
.support_cont .support_grid ul li .txt_more_wrap .more_s span::before {font-size: 26px;}
}

/*******************************************************************************
    @media ~680px
*******************************************************************************/
@media all and (max-width:680px){

.support_cont .support_grid ul {grid-template-columns: 1fr;} 
.support_cont .support_grid ul li .support_grid_card {padding: 20px;}
.support_cont .support_grid ul li .txt_more_wrap {flex-wrap: wrap; gap: 10px;}
.support_cont .support_grid ul li .txt_more_wrap .txtbox {width: 100%;}
.support_cont .support_grid ul li .txt_more_wrap .txtbox h4 {margin-bottom: 5px;}
.support_cont .support_grid ul li .txt_more_wrap .txtbox .before_icon::before {font-size: 14px;}

.support_cont .support_grid ul li .txt_more_wrap .more_s {width: 40px; position: relative; margin-left: auto; top: 0; right: 0;}
.support_cont .support_grid ul li .txt_more_wrap .more_s span::before {font-size: 20px;}
}