@charset "UTF-8";
/*
 *  File Name : /resources/css/responsive/support.css
 *  Description : 서포트 페이지 스타일
 *  Page : /support/*
 *  Selector : .page-support--faq
 */

/* common */
.contents-wrap {background: #F3F3F3;}

/* section-faq */
.section-faq {padding: 60px 0 160px;}
.section-faq .section-title {margin-bottom: 120px; text-align: center;}
.section-faq .list-item {padding: 60px 40px; margin-bottom: 40px; background: #fff; border-radius: 20px; box-shadow: 0px 4px 3.6px 0px rgba(0, 0, 0, 0.25); cursor: pointer;}
.section-faq .list-item:last-child {margin-bottom: 0 !important;}
.section-faq .list-item * {color: #101224; text-align: left;}
.section-faq .list-item .tit-area {display: block; position: relative; width: 100%; font-family: var(--ft-family_Poppins-600); font-size: 26px;}
.section-faq .list-item .tit-area::after {content: ""; display: inline-block; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Crect width='40' height='40' rx='20' fill='%23A7A7A7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 30C19 30.5523 19.4477 31 20 31C20.5523 31 21 30.5523 21 30V21H30C30.5523 21 31 20.5523 31 20C31 19.4477 30.5523 19 30 19H21V10C21 9.44771 20.5523 9 20 9C19.4477 9 19 9.44771 19 10V19H10C9.44772 19 9 19.4477 9 20C9 20.5523 9.44772 21 10 21H19V30Z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover;}
.section-faq .list-item .content-area {display: none; padding-top: 30px; font-family: var(--ft-family_Poppins-400); font-size: 20px; line-height: 1.3;}
.section-faq .list-item .content-area .bold {font-family: var(--ft-family_Poppins-600);}
.section-faq .list-item.active .tit-area::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Crect width='40' height='40' rx='20' fill='%23D9D9D9'/%3E%3Crect width='40' height='40' rx='20' fill='%230486FF'/%3E%3Cpath d='M10 20H30' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");}
.section-faq .list-item:hover .tit-area,
.section-faq .list-item.active .tit-area {color: #0486FF;}
.section-faq .list-item.active .tit-area {color: #0486FF !important;}
.section-faq .list-item.active .content-area {display: block;}

/* 
 *  [해상도 ~1919px] 
 */
@media all and (max-width:1919px) {
    /* section-faq */
    .section-faq {padding: 3.125vw 0 8.333vw;}
    .section-faq .section-title {margin-bottom: 6.25vw;}
    .section-faq .list-item {padding: 3.125vw 2.083vw; margin-bottom: 2.083vw; border-radius: 1.042vw; box-shadow: 0 0.208vw 0.1875vw 0 rgba(0, 0, 0, 0.25);}
    .section-faq .list-item .tit-area {font-size: 1.354vw;}
    .section-faq .list-item .tit-area::after {width: 2.083vw; height: 2.083vw;}
    .section-faq .list-item .content-area {padding-top: 1.5625vw; font-size: 1.042vw;}
}

/* 
 *  [해상도 769px ~ 1024px]
 *  - 낮은 해상도의 PC
 *  - 태블릿 가로모드
 */
@media all and (max-width:1024px) {  
    /* section-faq */
    .section-faq .list-item:hover .tit-area {color: #101224;}  
}

/* 
 *  [해상도 481px ~ 768px]
 *  - 모바일 가로모드
 *  - 태블릿 세로모드
 */
@media all and (max-width:768px) {

}

/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 *  - 모바일 ui 적용 (mode-mobile)
 */
@media all and (max-width:480px) {    
    /* section-faq */
    .section-faq {padding: 8vw 0 13.333vw;}
    .section-faq .layout-inner {padding: 0 var(--inner-padding);}
    .section-faq .section-title {margin-bottom: 8vw;}
    .section-faq .list-item {padding: 5.333vw; margin-bottom: 5.333vw; border-radius: 2.667vw; box-shadow: 0 0.533vw 0.48vw 0 rgba(0, 0, 0, 0.25);}
    .section-faq .list-item .tit-area {padding-right: 6.667vw; font-size: 5.067vw; box-sizing: border-box;}
    .section-faq .list-item .tit-area::after {width: 6.667vw; height: 6.667vw;}
    .section-faq .list-item .content-area {padding-top: 5.333vw; font-size: 3.733vw;}    
}