@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;}

/* page-support--store-guide */
.page-support--store-guide .section-store-guide {padding: 0 !important; background: #D9D9D9 !important;}
.page-support--store-guide .layout-inner {position: relative;}
.page-support--store-guide .layout-inner > * {background: #fff;}
.page-support--store-guide .store-guide-lnb {overflow-y: auto; z-index: 3; position: fixed; left: calc(50% - 700px); top: var(--header-wrap-height); width: 350px; height: calc(100vh - var(--header-wrap-height)); padding: 80px 50px 0; border-right: 2px solid #D9D9D9; box-sizing: border-box;}
.page-support--store-guide .store-guide-lnb .lnb-title {margin-bottom: 30px; color: #240075; font-family: var(--ft-family_Poppins-700); font-size: 36px; line-height: 1; letter-spacing: -1px;}
.page-support--store-guide .store-guide-lnb .guide-buttons {display: flex; flex-direction: column; margin-bottom: 45px;}
.page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"] {display: flex; align-items: center; width: 100%; height: 48px; padding-left: 20px; margin-bottom: 16px; border-radius: 5px; background-color: #1398FF; box-sizing: border-box;}
.page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"] .txt {position: relative; padding-left: 34px; color: #fff; font-family: var(--ft-family_Poppins-500); font-size: 18px;}
.page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"] .txt::before {content: ""; display: inline-block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background-size: contain; background-repeat: no-repeat;}
.page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"]:last-child {margin-bottom: 0 !important;}
.page-support--store-guide .store-guide-lnb .guide-buttons .btn-video-pc .txt::before {background-image: url(../../images/support/store_guide/icon_pc.png);}
.page-support--store-guide .store-guide-lnb .guide-buttons .btn-video-mobile .txt::before {background-image: url(../../images/support/store_guide/icon_mo.png);}
.page-support--store-guide .store-guide-lnb .menu-list > li {margin-bottom: 20px;}
.page-support--store-guide .store-guide-lnb .menu-list > li:first-child {margin-top: 0 !important;}
.page-support--store-guide .store-guide-lnb .menu-list > li a {display: flex; align-items: flex-start; position: relative; width: 100%; color: #666; font-family: var(--ft-family_Poppins-500); font-size: 24px; line-height: 1.3;}
.page-support--store-guide .store-guide-lnb .menu-list > li .num {display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; margin-right: 10px; background: #494949; border-radius: 5px; font-family: var(--ft-family_Poppins-700); color: #fff; font-size: 13px;}
.page-support--store-guide .store-guide-lnb .menu-list > li .name {display: inline-block; font-family: var(--ft-family_Poppins-500); color: #494949; font-size: 20px;}
.page-support--store-guide .store-guide-lnb .menu-list > li.is-active .num {background: #1398FF;}
.page-support--store-guide .store-guide-lnb .menu-list > li.is-active .name {color: #1398FF;}
.page-support--store-guide .store-guide-lnb .menu-list > li.is-active a::after {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M0.305919 0.264139C0.110039 0.433317 0 0.662742 0 0.901961C0 1.14118 0.110039 1.37061 0.305919 1.53978L5.47795 6.00545L0.305919 10.4711C0.11559 10.6413 0.0102749 10.8691 0.0126557 11.1057C0.0150361 11.3422 0.124922 11.5685 0.318647 11.7358C0.512371 11.903 0.774434 11.9979 1.04839 12C1.32235 12.002 1.58628 11.9111 1.78334 11.7468L7.69408 6.64327C7.88996 6.47409 8 6.24467 8 6.00545C8 5.76623 7.88996 5.5368 7.69408 5.36762L1.78334 0.264139C1.5874 0.0950107 1.32169 0 1.04463 0C0.767573 0 0.501858 0.0950107 0.305919 0.264139Z' fill='%231398FF'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0 0; background-size: contain;}
.page-support--store-guide .section-content {width: calc(100% - 350px); padding: 80px 50px 100px; margin-left: 350px; box-sizing: border-box;}
.page-support--store-guide .section-content .content-area {margin-top: 100px;}
.page-support--store-guide .section-content .content-area:first-child {margin-top: 0 !important;}
.page-support--store-guide .section-content .content-area .title {margin-bottom: 16px; color: #333; font-family: var(--ft-family_Poppins-600); font-size: 30px; line-height: 1;}
.page-support--store-guide .section-content .content-area .content {margin-bottom: 20px; color: #494949; font-family: var(--ft-family_Poppins-400); font-size: 20px; line-height: 1.3;}
.page-support--store-guide .section-content .content-area .img-box img {width: 100%;}
.page-support--store-guide .section-content .content-area .img-box img + img {margin-top: 20px;}

/* 
 *  [해상도 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;}

    /* page-support--store-guide */
    .page-support--store-guide .store-guide-lnb {left: calc(50% - 42.169vw); width: 21.084vw; padding: 4.819vw 3.012vw 0; border-right-width: 0.120vw;}
    .page-support--store-guide .store-guide-lnb .lnb-title {margin-bottom: 1.807vw; font-size: 2.169vw; letter-spacing: -0.060vw;}
    .page-support--store-guide .store-guide-lnb .guide-buttons {margin-bottom: 2.711vw;}
    .page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"] {height: 2.892vw; padding-left: 1.205vw; margin-bottom: 0.964vw; border-radius: 0.301vw;}
    .page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"] .txt {padding-left: 2.048vw; font-size: 1.084vw;}
    .page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"] .txt::before {width: 1.566vw; height: 1.566vw;}
    .page-support--store-guide .store-guide-lnb .menu-list > li {margin-bottom: 1.205vw;}
    .page-support--store-guide .store-guide-lnb .menu-list > li a {font-size: 1.446vw;}
    .page-support--store-guide .store-guide-lnb .menu-list > li .num {width: 1.446vw; height: 1.446vw; margin-right: 0.602vw; border-radius: 0.301vw; font-size: 0.783vw;}
    .page-support--store-guide .store-guide-lnb .menu-list > li .name {font-size: 1.205vw;}
    .page-support--store-guide .store-guide-lnb .menu-list > li.is-active a::after {width: 0.482vw; height: 0.723vw;}
    .page-support--store-guide .section-content {width: calc(100% - 21.084vw); padding: 4.819vw 3.012vw 6.024vw; margin-left: 21.084vw;}
    .page-support--store-guide .section-content .content-area {margin-top: 6.024vw;}
    .page-support--store-guide .section-content .content-area .title {margin-bottom: 0.964vw; font-size: 1.807vw;}
    .page-support--store-guide .section-content .content-area .content {margin-bottom: 1.205vw; font-size: 1.205vw;}
}

/* 
 *  [해상도 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;}
    
    /* page-support--store-guide */
    .page-support--store-guide .layout-inner {width: 100% !important; padding: 0 2.604vw 8.464vw; box-sizing: border-box; background: #fff;}
    .page-support--store-guide .store-guide-lnb {position: relative; left: 0; top: 0; width: 100%; height: auto; padding: 5.208vw 0; text-align: center; border: 0;}
    .page-support--store-guide .store-guide-lnb .lnb-title {margin-bottom: 3.125vw; font-size: 3.90625vw;}
    .page-support--store-guide .store-guide-lnb .guide-buttons {flex-direction: row; justify-content: center; margin: 0;}
    .page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"] {justify-content: center; width: 22.135vw; height: 4.557vw; padding: 0; margin-bottom: 0; margin-right: 2.083vw; border-radius: 0.391vw;}
    .page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"] .txt {padding-left: 2.539vw; font-size: 1.5625vw;}
    .page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"] .txt::before {width: 2.214vw; height: 2.214vw;}
    .page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"]:last-child {margin-right: 0 !important;}
    .page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"]:last-child .txt {padding-left: 2.279vw; }
    .page-support--store-guide .store-guide-lnb .menu-list {display: none;}
    .page-support--store-guide .section-content {width: 100%; padding: 0; margin-left: 0;}
    .page-support--store-guide .section-content .content-area {margin-top: 6.51vw;}
    .page-support--store-guide .section-content .content-area .title {margin-bottom: 1.953vw; font-size: 2.214vw;}
    .page-support--store-guide .section-content .content-area .content {margin-bottom: 1.953vw; font-size: 1.5625vw;}
}

/* 
 *  [해상도 ~ 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;}    

    
    /* page-support--store-guide */
    .page-support--store-guide .layout-inner {padding: 0 3.704vw 11.111vw;}
    .page-support--store-guide .store-guide-lnb {padding: 9.259vw 0 7.407vw;}
    .page-support--store-guide .store-guide-lnb .lnb-title {margin-bottom: 7.407vw; font-size: 7.407vw;}
    .page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"] {width: 44.815vw; height: 9.259vw; margin-right: 2.778vw; border-radius: 0.741vw;}
    .page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"] .txt {padding-left: 6.111vw; font-size: 2.963vw;}
    .page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"] .txt::before {width: 4.63vw; height: 4.63vw;}
    .page-support--store-guide .store-guide-lnb .guide-buttons button[class*="btn-video"]:last-child .txt {padding-left: 5.463vw; }
    .page-support--store-guide .section-content .content-area {margin-top: 9.259vw;}
    .page-support--store-guide .section-content .content-area .title {margin-bottom: 3.704vw; font-size: 5.556vw;}
    .page-support--store-guide .section-content .content-area .content {margin-bottom: 3.704vw; font-size: 3.704vw;}
}