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

/* terms 공통 */
.header-wrap {background: #101224;}
.contents-wrap {background: #113322;}
.contents-wrap * {color: #fff !important;}
.list-type > li {padding-left: 15px; text-indent: -15px;}
.list-type > li * {text-indent: 0;}
.table-type th,
.table-type td {padding: 10px 20px; border: 1px solid #ddd; text-align: left; vertical-align: middle;}
.section-navigation {overflow: hidden;}
.section-navigation li {float: left; width: 50%; height: 50px; border: 1px solid #fff; 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: #fff; 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 #fff;}

/* contents */
.section-terms {padding: 80px 0;}
.section-terms .section-title {margin-bottom: 50px; font-family: var(--ft-family_Poppins-700); font-size: 40px; text-align: center;}
.section-terms .section-content * {font-family: var(--ft-family_Poppins-400); font-size: 16px; line-height: 1.3;}
.section-terms .section-content .content-area {margin-top: 50px;}
.section-terms .section-content .content-area:first-child {margin-top: 0 !important;}
.section-terms .section-content .content-area > .title {margin-bottom: 20px; color: #333; font-family: var(--ft-family_Poppins-600); font-size: 22px; line-height: 1;}
.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: 50px !important;}

/* 
 *  [해상도 ~1919px] 
 */
@media all and (max-width:1919px) {

}

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

}

/* 
 *  [해상도 481px ~ 768px]
 *  - 모바일 가로모드
 *  - 태블릿 세로모드
 */
@media all and (max-width:768px) {
    /* terms 공통 */
    .list-type > li {padding-left: 1.4vw; text-indent: -1.4vw;}
    .table-type th,
    .table-type td {padding: 1vw 2vw;}
    .section-navigation li {float: none; width: 100%; height: 7.5vw;}
    .section-navigation li > a {padding: 0 3vw; font-size: 2.4vw;}
    .section-navigation li:nth-child(2n) {border-left: 1px solid #fff;}
    .section-navigation li:nth-child(n+5) {border-bottom: 0;}
    .section-navigation li:last-child {border-bottom: 1px solid #fff;}

    /* contents */
    .section-terms {padding-top: 5vw; padding-bottom: 5vw;}
    .section-terms > .layout-inner {width: auto; padding: var(--inner-padding);}
    .section-terms .section-title {margin-bottom: 3.2vw; font-size: 4vw;}
    .section-terms .section-content * {font-size: 2.6vw;}
    .section-terms .section-content .content-area {margin-top: 3.2vw;}
    .section-terms .section-content .content-area > .title {margin-bottom: 2.9vw; font-size: 2.8vw;}
    .section-terms .section-content .content-area > .title.bold {font-size: 3.4vw;}
    .section-terms .section-navigation + .section-content .content-area:first-child {margin-top: 3.2vw !important;}
}

/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 *  - 모바일 ui 적용 (mode-mobile)
 */
@media all and (max-width:480px) {
    /* terms 공통 */
    .section-navigation li {height: 8vw;}
    .section-navigation li > a {font-size: 2.6vw;}

    /* contents */
    .section-terms {padding-top: 10vw; padding-bottom: 10vw;}
    .section-terms .section-title {margin-bottom: 6.667vw; font-size: 8vw;}
    .section-terms .section-content * {font-size: 3vw;}
    .section-terms .section-content .content-area {margin-top: 6.667vw;}
    .section-terms .section-content .content-area > .title {font-size: 3.5vw;}
    .section-terms .section-content .content-area > .title.bold {font-size: 3.8vw;}
    .section-terms .section-navigation + .section-content .content-area:first-child {margin-top: 6.667vw !important;}
}