@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 .gnb .gnb-item {width: 345px;}

/* page-support--faq */
.section-faq .search-box {overflow: hidden; display: flex; width: 680px; height: 80px; margin: 0 auto 80px; border-radius: 5px;}
.section-faq .search-box .inp-search {width: calc(100% - 80px); padding: 0 25px; background: #D9D9D9; border: 0; border-radius: 0; box-sizing: border-box; color: #333; font-size: 30px; outline: 0;}
.section-faq .search-box .inp-search::placeholder {color: #666;}
.section-faq .search-box .btn-search {position: relative; width: 80px; height: 100%; padding: 0; background: #D9D9D9;}
.section-faq .search-box .btn-search .ico-search {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px;}
.section-faq .faq-list {margin-bottom: 20px}
.section-faq .list-item .tit-area {display: flex; align-items: center; position: relative; width: 100%; min-height: 80px; padding: 20px 30px 20px 5px; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; box-sizing: border-box; text-align: left; color: #000; font-family: var(--ft-family_Poppins-600); font-size: 24px; line-height: 1.2;}
.section-faq .list-item .content-area, 
.section-faq .list-item .content-area * {color: #000; font-family: var(--ft-family_Poppins-400); font-size: 20px;}
.section-faq .list-item .content-area {display: block; padding: 30px 5px;}
.section-faq .list-item .content-area .thumb-img,
.section-faq .list-item .content-area img {margin-top: 20px; margin-bottom: 10px; border: 1px solid #888;}
.section-faq .list-item .content-area .thumb-img {width: 80%;}
.section-faq .list-item .content-area .thumb-img img {width: 100%;}
.section-faq .list-item .content-area img {width: 600px !important; height: auto !important;}

/* page-support--trouble-loading */
.section-trouble-loading .section-content * {color: #494949; font-family: var(--ft-family_Poppins-400); font-size: 20px; 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;}
.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: 30px 40px; box-sizing: border-box; background: #fff; border: 2px solid #D9D9D9; border-radius: 5px;}
.section-trouble-loading .section-content .content-area .box-style .al-r {margin-left: 120px;}
.section-trouble-loading .section-content .content-area .list-step-warp {margin-top: 20px;}
.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 > li:last-child {margin-bottom: 0 !important;}
.section-trouble-loading .section-content .content-area .list-step-warp .list-step .desc {margin-bottom: 20px}
.section-trouble-loading .section-content .content-area .list-step-warp .list-step .img {width: 640px; border: 1px solid #ddd; box-sizing: border-box;}
.section-trouble-loading .section-content .content-area .list-step-warp .list-step .img img {width: 100%;}
.section-trouble-loading .btn-download-chrome {display: flex; justify-content: center; align-items: center; width: 300px; height: 62px; border-radius: 50px; background-color: #2F68D5;}
.section-trouble-loading .btn-download-chrome .txt {position: relative; padding-left: 50px; color: #fff; font-family: var(--ft-family_Poppins-500); font-size: 20px;}
.section-trouble-loading .btn-download-chrome .txt::before {content: ""; display: inline-block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-image: url(../../images/support/icon_chrome.png?v=250804); background-size: cover; background-repeat: no-repeat;}

/* 
 *  [해상도 1400px]
 *  - 컨텐츠 inner: 1400px 기준
 *  - 1920 기준 / DPR 1 / 16.6
 */
@media all and (max-width:1400px) {
    /* support 공통 */
    .header-wrap .header .gnb .gnb-item {width: 20.783vw;}

    /* page-support--faq */
    .section-faq .search-box {width: 40.964vw; height: 4.819vw; margin-bottom: 4.819vw; border-radius: 0.301vw;}
    .section-faq .search-box .inp-search {width: calc(100% - 4.819vw); padding: 0 1.506vw; font-size: 1.807vw;}
    .section-faq .search-box .btn-search {width: 4.819vw;}
    .section-faq .search-box .btn-search .ico-search {width: 1.807vw;}
    .section-faq .faq-list {margin-bottom: 1.205vw}
    .section-faq .list-item .tit-area {min-height: 4.819vw; padding: 1.205vw 1.807vw 1.205vw 0.301vw; font-size: 1.446vw;}
    .section-faq .list-item .content-area, 
    .section-faq .list-item .content-area * {font-size: 1.205vw;}
    .section-faq .list-item .content-area {padding: 1.807vw 0.301vw;}
    .section-faq .list-item .content-area .thumb-img,
    .section-faq .list-item .content-area img {margin-top: 1.205vw; margin-bottom: 0.602vw;}
    .section-faq .list-item .content-area .thumb-img {width: 80%;}
    .section-faq .list-item .content-area img {width: 36.145vw !important;}

    /* page-support--trouble-loading */
    .section-trouble-loading .section-content * {font-size: 1.205vw;}
    .section-trouble-loading .section-content .content-area {margin-top: 3.0120vw;}
    .section-trouble-loading .section-content .content-area > .title {margin-bottom: 1.205vw; font-size: 1.446vw;}
    .section-trouble-loading .section-content .content-area .box-style {padding: 1.807vw 2.41vw; border-width: 0.120vw;}
    .section-trouble-loading .section-content .content-area .box-style .al-r {margin-left: 7.23vw;}
    .section-trouble-loading .section-content .content-area .list-step-warp {margin-top: 1.205vw;}
    .section-trouble-loading .section-content .content-area .list-step-warp .sub-title {margin-bottom: 1.205vw}
    .section-trouble-loading .section-content .content-area .list-step-warp .list-step > li {margin-bottom: 1.807vw;}
    .section-trouble-loading .section-content .content-area .list-step-warp .list-step .desc {margin-bottom: 1.205vw}
    .section-trouble-loading .section-content .content-area .list-step-warp .list-step .img {width: 38.554vw;}
    .section-trouble-loading .btn-download-chrome {width: 18.072vw; height: 3.735vw; border-radius: 3.012vw;}
    .section-trouble-loading .btn-download-chrome .txt {padding-left: 3.012vw; font-size: 1.205vw;}
    .section-trouble-loading .btn-download-chrome .txt::before {width: 2.41vw; height: 2.41vw;}
}

/* 
 *  [해상도 481px ~ 1024px]
 *  1. 769px ~ 1024px
 *  - 낮은 해상도의 PC
 *  - 태블릿 가로모드
 *
 *  2. 481px ~ 768px]
 *  - 모바일 가로모드
 *  - 태블릿 세로모드
 *
 *  3. 768 기준 / DPR 2 / 7.68
 *  4. 태블릿 ui 적용 (mode-tablet)
 *  5. 터치 기반 디바이스 ui 적용 (mode-touch): 태블릿+모바일
 */
@media all and (max-width:1024px) {
    /* page-support--faq */
    .section-faq .search-box {width: 46.354vw; height: 5.208vw; margin-bottom: 5.208vw; border-radius: 0.325vw;}
    .section-faq .search-box .inp-search {width: calc(100% - 5.339vw); padding: 0 1.693vw; font-size: 1.823vw;}
    .section-faq .search-box .btn-search {width: 5.339vw;}
    .section-faq .search-box .btn-search .ico-search {width: 1.953vw;}
    .section-faq .faq-list {margin-bottom: 1vw}
    .section-faq .list-item .tit-area {min-height: 5.599vw; padding: 1.302vw 0 1.302vw 0.301vw; font-size: 2.214vw;}
    .section-faq .list-item .content-area, 
    .section-faq .list-item .content-area * {font-size: 1.563vw;}
    .section-faq .list-item .content-area {padding: 1.302vw 0;}    
    .section-faq .list-item .content-area .thumb-img,
    .section-faq .list-item .content-area img {margin-top: 1.302vw; margin-bottom: 0.651vw;}
    .section-faq .list-item .content-area .thumb-img {width: 80%; }
    .section-faq .list-item .content-area img {width: 60vw !important;}

    /* page-support--trouble-loading */
    .section-trouble-loading .section-content * {font-size: 1.563vw;}
    .section-trouble-loading .section-content .content-area {margin-top: 3.255vw;}
    .section-trouble-loading .section-content .content-area > .title {margin-bottom: 1.302vw; font-size: 2.214vw;}
    .section-trouble-loading .section-content .content-area .box-style {padding: 1.953vw 2.604vw; border-width: 0.130vw;}
    .section-trouble-loading .section-content .content-area .box-style .al-r {margin-left: 1.497vw;}
    .section-trouble-loading .section-content .content-area .list-step-warp {margin-top: 1.302vw;}
    .section-trouble-loading .section-content .content-area .list-step-warp .sub-title {margin-bottom: 1.302vw; font-size: 2.214vw;}
    .section-trouble-loading .section-content .content-area .list-step-warp .list-step > li {margin-bottom: 1.807vw;}
    .section-trouble-loading .section-content .content-area .list-step-warp .list-step .desc {margin-bottom: 1.302vw}
    .section-trouble-loading .section-content .content-area .list-step-warp .list-step .img {width: 80%;}
    .section-trouble-loading .btn-download-chrome {width: 19.531vw; height: 4.036vw; border-radius: 3.255vw;}
    .section-trouble-loading .btn-download-chrome .txt {padding-left: 3.255vw; font-size: 1.302vw;}
    .section-trouble-loading .btn-download-chrome .txt::before {width: 2.604vw; height: 2.604vw;}
}

/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 *  - 360 기준 / DPR 3 / 3.6
 *  - 모바일 ui 적용 (mode-mobile)
 */
@media all and (max-width:480px) {
    /* page-support--faq */
    .section-faq .search-box {width: 68.704vw; height: 11.111vw; margin-bottom: 7.407vw; border-radius: 0.741vw;}
    .section-faq .search-box .inp-search {width: calc(100% - 12.963vw); padding: 0 3.704vw; font-size: 4.63vw;}
    .section-faq .search-box .btn-search {width: 12.963vw;}
    .section-faq .search-box .btn-search .ico-search {width: 5.556vw;}
    .section-faq .faq-list {margin-bottom: 0}
    .section-faq .list-item {margin-bottom: 7.407vw;}
    .section-faq .list-item .tit-area {min-height: auto; padding: 0; margin-bottom: 3.704vw; font-size: 5.556vw; border: 0;}
    .section-faq .list-item .content-area, 
    .section-faq .list-item .content-area * {font-size: 3.704vw;}
    .section-faq .list-item .content-area {padding: 0;}    
    .section-faq .list-item .content-area .thumb-img,
    .section-faq .list-item .content-area img {margin-top: 3vw; margin-bottom: 1.5vw;}
    .section-faq .list-item .content-area .thumb-img {width: 100%; }
    .section-faq .list-item .content-area img {width: 100% !important;}

    /* page-support--trouble-loading */
    .section-trouble-loading .section-content * {font-size: 3.704vw;}
    .section-trouble-loading .section-content .content-area {margin-top: 7.407vw;}
    .section-trouble-loading .section-content .content-area > .title {margin-bottom: 3.704vw; font-size: 5.556vw;}
    .section-trouble-loading .section-content .content-area .box-style {flex-direction: column; align-items: center; padding: 5.556vw 3.704vw; border-width: 0.186vw;}
    .section-trouble-loading .section-content .content-area .box-style .al-r {margin-left: 0; margin-top: 2.778vw;}
    .section-trouble-loading .section-content .content-area .list-step-warp {margin-top: 7.407vw;}
    .section-trouble-loading .section-content .content-area .list-step-warp .sub-title {margin-bottom: 3.704vw; font-size: 5.556vw;}
    .section-trouble-loading .section-content .content-area .list-step-warp .list-step > li {margin-bottom: 3.704vw;}
    .section-trouble-loading .section-content .content-area .list-step-warp .list-step .desc {margin-bottom: 3.704vw;}
    .section-trouble-loading .section-content .content-area .list-step-warp .list-step .img {width: 100%;}
    .section-trouble-loading .btn-download-chrome {width: 64.815vw; height: 13.333vw; border-radius: 10.741vw;}
    .section-trouble-loading .btn-download-chrome .txt {padding-left: 11.296vw; font-size: 4.26vw;}
    .section-trouble-loading .btn-download-chrome .txt::before {width: 8.519vw; height: 8.519vw;}    
}