@charset "UTF-8";
/*
 *  File Name : /ui_resource/css/responsive/support.css
 *  Description : SUPPORT 페이지 스타일
 *  Page : /support/*
 *  Selector : .page-support--faq, .page-support--trouble-loading
 */

/* support 공통 */
.header-wrap .header .layout-inner {height: var(--header-height);}
.header-wrap .header .gnb .gnb-item {width: 340px;}

/* page-support--faq */
.section-faq .search-box {overflow: hidden; display: flex; width: 700px; height:80px; margin: 0 auto 80px; border-radius: 20px;}
.section-faq .search-box .inp-search {width: calc(100% - 100px); padding: 0 60px; background: #3811AE; border: 0; border-radius: 0; box-sizing: border-box; color: #fff; font-size: 30px; outline: 0;}
.section-faq .search-box .inp-search::placeholder {color: rgba(255,255,255,.8);}
.section-faq .search-box .btn-search {position: relative; width: 100px; height: 100%; padding: 0; background: #280074;}
.section-faq .search-box .btn-search .ico-search {fill: #fff; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 45px;}
.section-faq .list-item {border-top: 1px solid #2b0073;}
.section-faq .list-item .btn-faq-toggle {display: block; position: relative; width: 100%; line-height: 70px; padding: 0 30px; box-sizing: border-box; text-align: left; color: #2b0073; font-family: var(--ft-family_Poppins-600); font-size: 20px;}
.section-faq .list-item .btn-faq-toggle::after {content: ""; display: inline-block; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-image: url("data:image/svg+xml,%3Csvg fill='%23280074' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover;}
.section-faq .list-item .content-area, 
.section-faq .list-item .content-area * {color: #555; font-family: var(--ft-family_Poppins-400); font-size: 16px;}
.section-faq .list-item .content-area {display: none; padding: 30px; background: #f5f5f5; border-top: 1px solid #ddd;}
.section-faq .list-item .content-area .list-type-dot {margin: 20px 0;}
.section-faq .list-item .content-area .list-type-dot > li {position: relative; padding-left: 20px;}
.section-faq .list-item .content-area .list-type-dot > li::before {content: ""; display: inline-block; position: absolute; left: 5px; top: 10px; width: 5px; height: 5px; background: #555; border-radius: 50%;}
.section-faq .list-item .content-area .thumb-img {width: 80%; margin-top: 20px;}
.section-faq .list-item .content-area .thumb-img img {width: 100%;}
.section-faq .list-item.active .btn-faq-toggle::after {transform: translateY(-50%) rotate(180deg);}
.section-faq .list-item.active .content-area {display: block;}
.section-faq .list-item.visible-last-item {border-bottom: 1px solid #2b0073;}

/* page-support--trouble-loading */
.section-trouble-loading .section-title {margin-bottom: 50px; color: #240075; font-family: var(--ft-family_Poppins-700); font-size: 44px; text-align: center;}
.section-trouble-loading .section-content * {color: #494949; font-family: var(--ft-family_Poppins-400); font-size: 18px; line-height: 1.3;}
.section-trouble-loading .section-content .content-area {margin-top: 50px;}
.section-trouble-loading .section-content .content-area:first-child {margin-top: 0 !important;}
.section-trouble-loading .section-content .content-area > .title {margin-bottom: 20px; color: #333; font-family: var(--ft-family_Poppins-600); font-size: 24px; line-height: 1;}
.section-trouble-loading .section-content .content-area > .title.bold {color: #222; font-family: var(--ft-family_Poppins-700);}
.section-trouble-loading .section-content .content-area .box-style {display: flex; padding: 20px 30px; box-sizing: border-box; background: #fff; border: 1px solid #ddd;}
.section-trouble-loading .section-content .content-area .box-style .al-r {margin-left: 30px;}
.section-trouble-loading .section-content .content-area .list-step-warp {margin-top: 50px;}
.section-trouble-loading .section-content .content-area .list-step-warp .sub-title {margin-bottom: 20px; color: #333; font-family: var(--ft-family_Poppins-600); line-height: 1;}
.section-trouble-loading .section-content .content-area .list-step-warp .list-step > li {margin-bottom: 30px;}
.section-trouble-loading .section-content .content-area .list-step-warp .list-step .desc {margin-bottom: 15px}

/* 
 *  [해상도 769px ~ 1024px]
 *  - 낮은 해상도의 PC
 *  - 태블릿 가로모드
 */
 @media all and (max-width:1024px) {

}