@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 > 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 #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 {padding: 80px 0;}
.section-terms .section-title {margin-bottom: 50px; color: #240075; font-family: var(--ft-family_Poppins-700); font-size: 60px; text-align: center;}
.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: 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: 40px; 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;}

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

}

/* 
 *  [해상도 481px ~ 768px]
 *  - 모바일 가로모드
 *  - 태블릿 세로모드
 */
@media all and (max-width:768px) {
    /* [str] TODO 리뉴얼 2차 mobile 작업 시 공통파일로 적용될 부분 */
    :root {
        --header-height: 16vw;
        --min-width: auto;
        --inner-padding: 0 4.667vw;
    }
    .btn-top-comm {right: 4vw; bottom: 4vw; width: 12vw; height: 12vw;}
    .btn-top-comm::before {bottom: -.7vw;}
    .btn-top-comm .txt {font-size: 3vw;}
    .btn-top-comm .txt::before {width: 3.5vw; height: 2vw; margin-bottom: 1.2vw;}
    .header-wrap .header .logo img {width: 12vw;}
    .header-wrap .button-menu {z-index: 102; position: fixed; left: 0; top: 0; padding: var(--inner-padding); height: var(--header-height);}
    .header-wrap .button-menu .menu {display: flex; flex-direction: column; justify-content: space-between; width: 10.133vw; height: 6.4vw;}
    .header-wrap .button-menu .menu-item {display: block; width: 100%; height: 0.8vw; background: #fff; border-radius: 1.333vw; transition: all 0.5s ease;}
    .header-wrap .button-menu.active .menu .menu-item {background: #1b9bfe;}
    .header-wrap .button-menu.active .menu .menu-item:nth-child(1) {transform: translateY(2.667vw) rotate(45deg);}
    .header-wrap .button-menu.active .menu .menu-item:nth-child(2) {opacity: 0;}
    .header-wrap .button-menu.active .menu .menu-item:nth-child(3) {transform: translateY(-2.667vw) rotate(-45deg);}
    .header-wrap .button-menu.al-r {left: initial; right: 0;}
    .header-wrap .button-menu.al-r.active .menu .menu-item {background: #fff;}
    .footer-wrap .foot-bottom {height: auto; padding: 3vw 0;}
    .footer-wrap .foot-bottom .copyright {font-size: 2.667vw;}	
    /* [end] TODO 리뉴얼 2차 mobile 작업 시 공통파일로 적용될 부분 */

    /* 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 #281884;}
    .section-navigation li:nth-child(n+5) {border-bottom: 0;}
    .section-navigation li:last-child {border-bottom: 1px solid #281884;}

    /* 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;}

    /* 가로모드 */
    @media (orientation: landscape) {
        /* [str] TODO 리뉴얼 2차 mobile 작업 시 공통파일로 적용될 부분 */
        :root {
            --header-height: 16vh;
            --inner-padding: 0 4.667vh;
        }
        .btn-top-comm {right: 4vh; bottom: 4vh; width: 12vh; height: 12vh;}
        .btn-top-comm::before {bottom: -.7vh;}
        .btn-top-comm .txt {font-size: 3vh;}
        .btn-top-comm .txt::before {width: 3.5vh; height: 2vh; margin-bottom: 1.2vh;}
        .header-wrap .header .logo img {width: 12vh;}
        .header-wrap .button-menu .menu {width: 10.133vh; height: 6.4vh;}
	    .header-wrap .button-menu .menu-item {height: 0.8vh; border-radius: 1.333vh;}
        .header-wrap .button-menu.active .menu .menu-item:nth-child(1) {transform: translateY(2.667vh) rotate(45deg);}
        .header-wrap .button-menu.active .menu .menu-item:nth-child(3) {transform: translateY(-2.667vh) rotate(-45deg);}
        .footer-wrap .foot-bottom {padding: 3vh 0;}
        .footer-wrap .foot-bottom .copyright {font-size: 2.667vh;}	
        /* [end] TODO 리뉴얼 2차 mobile 작업 시 공통파일로 적용될 부분 */
    }
}

/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 */
@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;}
}