@charset "UTF-8";
/*
 *  File Name : /ui_resource/css/responsive/terms.css
 *  Description : 약관 관련 스타일
 *  Page : /terms/*
 *  Selector : .page-terms
 */

/* terms 공통 */
.header-wrap .header .gnb .gnb-item {flex: 1;}
.header-wrap .header .lang-toggle {display: flex; position: absolute; right: var(--inner-padding-side); top: 50%; transform: translateY(-50%);}
.header-wrap .header .lang-toggle > a {display: inline-flex; justify-content: center; align-items: center; min-width: 65px; height: 32px; padding: 0 20px; margin-right: 8px; box-sizing: border-box; background-color: #240075; border: 1px solid #fff; border-radius: 2px; color: #fff; font-family: var(--ft-family_Poppins-500); font-size: 16px; text-align: center; transition: background 0.2s, border-color 0.2s, transform 0.05s;}
.header-wrap .header .lang-toggle > a:last-child {margin-right: 0 !important;}
.header-wrap .header .lang-toggle > a:hover {background: #fff; color: #240075;}
.header-wrap .header .lang-toggle > a:active {transform: translateY(1px);}
.header-wrap .header .lang-toggle > a.active {background: #1398FF; border-color: #1398FF; color: #fff;}

.section-top {display: flex; margin-bottom: 20px;}
.section-top .download-btn {display: inline-flex; align-items: center; height: 35px; padding: 0 12px 0 8px; margin-left: auto; color: #fff; font-family: var(--ft-family_Poppins-700); font-size: 14px; transition: background 0.2s ease; box-sizing: border-box; background: #007BFF; border-radius: 6px; border: 1px solid transparent}
.section-top .download-btn::before {content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c.55 0 1 .45 1 1v10.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42L11 14.6V4c0-.55.45-1 1-1zm-8 16c0-.55.45-1 1-1h14a1 1 0 0 1 0 2H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E%0A"); background-size: cover; background-repeat: no-repeat;}
.section-top .download-btn:hover {background: #2b91ff;}

.list-type {width: 100%;}
.list-type > li {padding-left: 10px; text-indent: -10px; white-space: normal; word-break: break-word; overflow-wrap: anywhere;}
.list-type > li * {text-indent: 0;}
.table-type,
.table-type table {table-layout: fixed; width:100%;}
.table-type th,
.table-type td {padding: 10px 20px; border: 1px solid #333; text-align: left; vertical-align: middle; white-space: normal; word-break: break-word; overflow-wrap: anywhere;}
.section-navigation {overflow: hidden;}
.section-navigation li {float: left; width: 50%; height: 50px; border: 1px solid #333; border-bottom: 0; box-sizing: border-box;}
.section-navigation li > a {display: flex; justify-content: center; align-items: center; height: 100%; padding: 0 15px; color: #333; font-family: var(--ft-family_Poppins-400); font-size: 16px; text-align: center;}
.section-navigation li:nth-child(2n) {border-left: 0;}
.section-navigation li:nth-child(n+5) {border-bottom: 1px solid #333;}

/* contents */
.section-terms .section-content * {color: #494949; font-family: var(--ft-family_Poppins-400); font-size: 20px; line-height: 1.3;}
.section-terms .section-content .content-area {margin-top: 45px;}
.section-terms .section-content .content-area:first-child {margin-top: 0 !important;}
.section-terms .section-content .content-area > .title {margin-bottom: 30px; color: #333; font-family: var(--ft-family_Poppins-600); font-size: 40px; line-height: 1; letter-spacing: -1px;}
.section-terms .section-content .content-area > .title.bold {color: #222; font-family: var(--ft-family_Poppins-700);}
.section-terms .section-content .last-date {font-family: var(--ft-family_Poppins-400);}
.section-terms .section-content .bold {color: #222; font-family: var(--ft-family_Poppins-600);}
.section-terms .section-content .mail,
.section-terms .section-content .link {text-decoration: underline;}
.section-terms .section-navigation + .section-content .content-area:first-child {margin-top: 45px !important;}

/* 
 *  [해상도 1919px]
 *  - 1920 기준 / DPR 1 / 19.2
 */
@media all and (max-width:1919px) {
    /* terms 공통 */
    .header-wrap .header .gnb {overflow: hidden; width: 72vw !important;}
    .header-wrap .header .gnb .gnb-item {width: 20%;}
    .header-wrap .header .gnb .gnb-item > a {font-size: 1.042vw;}
}

/* 
 *  [해상도 1400px]
 *  - 컨텐츠 inner: 1400px 기준
 *  - 1920 기준 / DPR 1 / 16.6
 */
@media all and (max-width:1400px) {
    /* terms 공통 */
    .header-wrap .header .layout-inner {width: 80vw;}
    .header-wrap .header .lang-toggle > a {min-width: 3.916vw; height: 1.928vw; padding: 0 1.205vw; margin-right: 0.482vw; border-radius: 0.12vw; font-size: 0.964vw;}

    .section-top {margin-bottom: 1.205vw;}
    .section-top .download-btn {height: 2.108vw; padding: 0 0.723vw 0 0.482vw; font-size: 0.843vw; border-radius: 0.361vw;}
    .section-top .download-btn::before {width: 1.084vw; height: 1.084vw; margin-right: 0.12vw;}

    .list-type > li {padding-left: 0.602vw; text-indent: -0.602vw;}
    .table-type th,
    .table-type td {padding: 0.602vw 1.205vw;}
    .section-navigation li {height: 3.012vw;}
    .section-navigation li > a {padding: 0 0.904vw; font-size: 0.964vw;}

    /* contents */
    .section-terms .section-content * {font-size: 1.205vw;}
    .section-terms .section-content .content-area {margin-top: 2.711vw;}
    .section-terms .section-content .content-area > .title {margin-bottom: 1.807vw; font-size: 2.41vw; letter-spacing: -0.060vw;}
    .section-terms .section-navigation + .section-content .content-area:first-child {margin-top: 2.711vw !important;}
}

/* 
 *  [해상도 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) {
    /* terms 공통 */
    /* .header-wrap .header .lang-toggle > a {min-width: 65px; height: 32px; padding: 0 20px; margin-right: 8px; border-radius: 2px; font-size: 16px;} */

    .section-top {margin-bottom: 1.6vw;}
    .section-top .download-btn {height: 4vw; padding: 0 1.5vw 0 .8vw; font-size: 1.6vw; border-radius: .6vw;}
    .section-top .download-btn::before {width: 2.6vw; height: 2.6vw; margin-right: .5vw;}

    .list-type > li {padding-left: 0.651vw; text-indent: -0.651vw;}
    .table-type th,
    .table-type td {padding: 0.651vw 0.977vw;}
    .section-navigation li {height: 4.5vw;}
    .section-navigation li > a {padding: 0 0.977vw; font-size: 1.562vw;}

    /* contents */
    .section-terms .section-content * {font-size: 1.562vw;}
    .section-terms .section-content .content-area {margin-top: 3.255vw;}
    .section-terms .section-content .content-area > .title {margin-bottom: 1.302vw; font-size: 2.214vw;}
    .section-terms .section-navigation + .section-content .content-area:first-child {margin-top: 3.255vw !important;}
}

/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 *  - 360 기준 / DPR 3 / 3.6
 *  - 모바일 ui 적용 (mode-mobile)
 */
@media all and (max-width:480px) {
    /* terms 공통 */
    /* .header-wrap .header .lang-toggle > a {min-width: 65px; height: 32px; padding: 0 20px; margin-right: 8px; border-radius: 2px; font-size: 16px;} */

    .section-top {margin-bottom: 4vw;}
    .section-top .download-btn {height: 6vw; padding: 0 2vw 0 1.6vw; font-size: 3vw; border-radius: 1vw;}
    .section-top .download-btn::before {width: 4vw; height: 4vw; margin-right: .5vw;}

    .list-type > li {padding-left: 2.5vw; text-indent: -2.5vw;}
    .table-type th,
    .table-type td {padding: 1.852vw 3.704vw;}
    .section-navigation li {width: 100%; height: 3.5lh; border: 1px solid #333 !important; border-bottom: 0 !important;}    
    .section-navigation li:last-child {border-bottom: 1px solid #333 !important;}
    .section-navigation li > a {padding: 0 1vw; font-size: 3.704vw; line-height: 1.4;}

    /* contents */
    .section-terms .section-content * {font-size: 3.704vw;}
    .section-terms .section-content .content-area {margin-top: 7.407vw;}
    .section-terms .section-content .content-area > .title {margin-bottom: 2.778vw; font-size: 5.556vw;}
    .section-terms .section-navigation + .section-content .content-area:first-child {margin-top: 7.407vw !important;}
}