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

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

/* 
 *  [해상도 1400px]
 *  - 컨텐츠 inner: 1400px 기준
 *  - 1920 기준 / DPR 1 / 16.6
 */
@media all and (max-width:1400px) {
    /* terms 공통 */
    .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 공통 */
    .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 공통 */
    .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;}
}