@charset "utf-8";
/***
 * 파일명 : terms.css
 * 설명 : 이용약관 스타일
 * 최초작성일 :
 * 최종수정일 : 2021.06.29
 ***/

/**
 * common
 */
.font-color-blue { color: #39b0e6; }

/**
 * layout
 **/
img { max-width: 100%; }
legend, caption { width: 0; height: 0; visibility: hidden; font-size: 0; line-height: 0; }
[class^=terms_] .inner {width: 100%; margin: 0 auto; text-align: center;padding: 0 40px; max-width: 1225px;}
.terms_area { scrollbar-width: none; -ms-overflow-style: none; }
.terms_area::-webkit-scrollbar { display: none; }
::selection { background: rgba(240, 130, 0, 0.9); color: #fff; }
::-moz-selection { background: rgba(240, 130, 0, 0.9); color: #fff; }

/**
 * nav
 **/
.terms_nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; background-color: #fff; margin: auto; z-index: 111; }
.terms_nav .inner { position: relative; }
.terms_nav .logo { width: 214px; height: 100px; display: flex; margin: 0 auto; justify-content: center; align-items: center; }
.terms_nav .pop_close { font: 0/0 all; position: absolute; right: 40px; top: 0; width: 32px; height: 32px; margin-top: 30px; }
.terms_nav .terms_tab { position: relative; max-width: 1225px; margin: 0 auto; padding: 100px 40px 0 40px; /* border-top: 1px solid rgba(0,0,0,.3); */background-color: #fff; }
.terms_nav .terms_tab ul { width: 100%; height: 144px; display: flex; flex-wrap: wrap; border-bottom: 2px solid #E66000; background-color: #efefef;}
.terms_nav .terms_tab li { width: 33.333%; height: 72px; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 24px; color: #595959; border-top: 2px solid #ddd; border-right: 2px solid #ddd; }
.terms_nav .terms_tab li:first-child { border-left: 2px solid #ddd;}
.terms_nav .terms_tab li:nth-child(4) {border-left: 2px solid #ddd;}
.terms_nav .terms_tab li.on,
.terms_nav .terms_tab li:hover { color: #fff; border: none; background-color: #E66000; }
.terms_nav .terms_tab:after {
    content:"";
    display: block;
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    bottom: -20px;
    background: none;
    background-color: #fff;
    /* box-shadow: 0px 15px 15px 10px #fff; */
}

/**
* term select box
**/
.select {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 1225px;
    width: 100%;
    max-height: 55px;
    margin: 0 auto;
    padding: 277px 40px 30px 40px;
    font-size: 18px;
}
.select_box {
    width: 170px;
    height: 55px;
    border-radius: 3px;
    border: 1px solid #ccc;
}
.select_text {
    display: block;
    position: relative;
    width: 100%;
    height: inherit;
    padding-left: 15px;
    line-height: 55px;
    color: #3d3d3d;
}
.select_text:after {
    content: "";
    display: block;
    position: absolute;
    width: 12px;
    height: 9px;
    top: 41%;
    right: 15px;
    background: center/cover no-repeat url("../images/common/icon/ico_menu_arr.png");
}
.select_text.-active:after {
    transform: rotate(180deg);
}
.select_list {
    display: none;
    width: 100%;
    max-height: 165px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    overflow-y: scroll;
    z-index: 10;
}
.select_list.-active {
    display: block;
}
.select_list li {
    height: 55px;
    line-height: 55px;
    padding-left: 10px;
}
.select_list li:hover {
    background-color: #eee;
}
.select_list li a {
    display: block;
}

/**
* terms popup
**/
.terms_popup { display: none; }
.terms_popup.on {display: block !important;}
.terms_popup .terms_popup_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background: rgba(0, 0, 0, 0.7); }
.terms_popup .wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; margin: auto; max-width: 500px; width: 90%; max-height: 880px; height: 80%; padding: 15px 10px 15px 15px; border-radius: 15px; background-color: #fff; }
.terms_popup .wrap .content { overflow-y: scroll; height: 100%; padding-right: 5px; }
.terms_popup .wrap .content .btn_terms_close { position: absolute; top: -30px; right: 5px; width: 20px; height: 20px; padding: 0; font: 0/0 all; }
.terms_popup .wrap .content p { margin-bottom: 15px; font-size: 14px; line-height: 1.4; text-align: left; word-break: keep-all; }
.btn_terms_open { display: block; padding: 0; color: #39b0e6; font-size: 12px; }

/**
* air_terms popup
**/
.air_terms_popup { display: none; }
.air_terms_popup.on {display: block !important;}
.air_terms_popup .terms_popup_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background: rgba(0, 0, 0, 0.7); }
.air_terms_popup .wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; margin: auto; max-width: 500px; width: 90%; max-height: 380px; height: 80%; padding: 15px 10px 15px 15px; border-radius: 15px; background-color: #fff; }
.air_terms_popup .wrap .content { overflow-y: scroll; height: 100%; padding-right: 5px; }
.air_terms_popup .wrap .content .btn_terms_close { position: absolute; top: -30px; right: 5px; width: 20px; height: 20px; padding: 0; font: 0/0 all; }
.air_terms_popup .wrap .content p { margin-bottom: 15px; font-size: 14px; line-height: 1.4; text-align: left; word-break: keep-all; }
.btn_terms_open { display: block; padding: 0; color: #39b0e6; font-size: 12px; }

/**
* fg_terms popup
**/
.fg_terms_popup { display: none; }
.fg_terms_popup.on {display: block !important;}
.fg_terms_popup .terms_popup_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background: rgba(0, 0, 0, 0.7); }
.fg_terms_popup .wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; margin: auto; max-width: 500px; width: 90%; max-height: 380px; height: 80%; padding: 15px 10px 15px 15px; border-radius: 15px; background-color: #fff; }
.fg_terms_popup .wrap .content { overflow-y: scroll; height: 100%; padding-right: 5px; }
.fg_terms_popup .wrap .content .btn_terms_close { position: absolute; top: -30px; right: 5px; width: 20px; height: 20px; padding: 0; font: 0/0 all; }
.fg_terms_popup .wrap .content p { margin-bottom: 15px; font-size: 14px; line-height: 1.4; text-align: left; word-break: keep-all; }
.btn_terms_open { display: block; padding: 0; color: #39b0e6; font-size: 12px; }


/**
* terms common
**/
.terms_area { width: 100%; height: 100%; padding-top: 332px; overflow: scroll; padding-bottom: 50px; background: rgba(255, 255, 255, 1);}

.terms_area .title { /* padding-top: 150px; */ font-size: 30px; text-align: center; font-family: NotoSans-B; }
.terms_area .info {text-align: left; font-family: NotoSans-L; letter-spacing: -0.8px; font-size: 18px; line-height: 150%;}
.terms_area .info > div {margin-top: 45px; }
.terms_area .info > div:last-child {margin-bottom: 50px;}
.terms_area .info h4 { font-size: 30px; font-family: NotoSans-B; }
.terms_area .info div p { font-size: 25px; font-family: NotoSans-B; margin-bottom: 10px; padding-bottom: 10px;}
.terms_area .info .list1 {margin-top: 25px;}
.terms_area .info .list1 > li { color: rgba(0, 0, 0, 0.85); position: relative;  margin-bottom: 5px; }
.terms_area .info ol.list2 {list-style: decimal; margin-top: 5px; font-size: 16px; line-height: 200%;}
.terms_area .info ol.list2 > li {margin-left: 35px;}
.terms_area .info ol.list2.type2 {list-style: none;}
.terms_area .info ol.list2.type2 > li:before {content: "-"; display: block; position: absolute; left: 15px;}

.terms_area .info .tb_box {margin: 20px 0; border: 1px solid #d8d8d8; border-radius: 5px;}
.terms_area .info .tb_box table { border-collapse: collapse; width: 100%; font-size: 16px; }
.terms_area .info .tb_box th,
.terms_area .info .tb_box td { height: 60px; }
.terms_area .info .tb_box table tr > th { text-align: center; background: #ecf0f3; padding: 10px 20px; border-left: 1px #d8d8d8 solid; }
.terms_area .info .tb_box table tr > td { padding: 10px 20px; border-left: 1px #d8d8d8 solid; border-top: 1px #d8d8d8 solid; }
.terms_area .info .tb_box table tr > td:first-child,
.terms_area .info .tb_box table tr > th:first-child { word-break: keep-all; border-left: none; }
.terms_area .info .tb_box table tr > td.bl1{ border-left: 1px #d8d8d8 solid;}
.terms_area .info .index_box {display: flex; justify-content: left; flex-wrap: wrap; padding: 4% 5%; border: 1px solid #cdcdcd; border-radius: 5px;}
.terms_area .info .index_box .index_list {width: 50%; position: relative;}
.terms_area .info .index_box .index_list:first-child:after {content:""; display: block; position: absolute; top: 0; right: 0; border: 1px dashed #cdcdcd; height: 100%; }
.terms_area .info .index_box .index_list:last-child {padding-left: 5%;}
.terms_area .info .index_box .index_list li:hover {color: #91268f; font-weight: bold;}
.terms_area .info .index_box .index_list {list-style: decimal}
.terms_area .info .list0 li:before {content:"-"; display: block; position: absolute; left: 0;}
.terms_area .info .list0 li {position: relative; padding-left: 20px;}
.terms_area .info td a:hover,
.terms_area .info li a:hover {color: #91268f; font-weight: bold;}

/* 920 under  */
@media all and (max-width: 920px) {
    /**
    * nav
    **/
    .terms_nav .terms_tab li a span { display: block;}

    /**
    * terms common
    **/
    .terms_area .info .index_box .index_list {width: 100%;}
    .terms_area .info .index_box .index_list {padding-left: 3%;}
    .terms_area .info .index_box .index_list:last-child {padding-left: 3%;}
    .terms_area .info .index_box .index_list:first-child:after {display: none;}
}

/* 720 under  */
@media all and (max-width: 720px) {
    /**
    * layout
    **/
    [class^=terms_] .inner {padding: 0 5.5556vw; max-width: 170.1389vw;}

    /**
    * nav
    **/
    .terms_nav .logo { width: 29.7222vw; height: 13.8889vw; }
    .terms_nav .pop_close { width: 4.4444vw; height: 4.4444vw; margin-top: 4.1667vw; right: 5.5556vw; }
    .terms_nav .terms_tab { padding: 20vw 5.5556vw 0; max-width: 170.1389vw;}
    .terms_nav .terms_tab ul { height: 26.666vw;}
    .terms_nav .terms_tab li { height: 50%; font-size: 3.4722vw; line-height: 1.2;}

    /**
    * term select box
    **/
    .select { padding: 53.403vw 5.56vw 4.17vw 5.56vw; font-size: 3.4722vw; }
    .select_box { width: 100%; height: 11.64vw }
    .select_text { line-height: 11.64vw; padding-left: 3.08vw; }
    .select_text:after { width: 2.67vw; height: 1.75vw; }

    /**
    * terms popup
    **/
    .terms_popup .wrap .content p { margin-bottom: 10px; font-size: 2.5vw; }
    .btn_terms_open { font-size: 1.6vw; }

    /**
    * terms common
    **/
    .terms_area { padding-top: 69.722vw; padding-bottom: 6.9444vw; }
    .terms_area .title { /* padding-top: 10.8333vw; */ font-size: 4.1667vw; }
    .terms_area .info {letter-spacing: -0.1111vw; font-size: 2.5vw;}
    .terms_area .info > div {margin-top: 6.25vw; }
    .terms_area .info > div:last-child {margin-bottom: 6.9444vw;}
    .terms_area .info h4 { font-size: 4.1667vw; }
    .terms_area .info div p { font-size: 3.4722vw; margin-bottom: 1.3889vw; padding-bottom: 1.3889vw;}
    .terms_area .info .list1 {margin-top: 3.4722vw;}
    .terms_area .info .list1 > li { margin-bottom: 0.6944vw; }
    .terms_area .info ol.list2 {margin-top: 0.6944vw; font-size: 2.2222vw;}
    .terms_area .info ol.list2 > li {margin-left: 4.8611vw;}
    .terms_area .info ol.list2.type2 > li:before {left: 2.0833vw;}

    .terms_area .info .tb_box {margin: 2.7778vw 0; border: 0.1389vw solid #d8d8d8; border-radius: 0.6944vw;}
    .terms_area .info .tb_box table { font-size: 2.2222vw; }
    .terms_area .info .tb_box th,
    .terms_area .info .tb_box td { height: 8.3333vw; }
    .terms_area .info .tb_box table tr > th { padding: 1.3889vw 2.7778vw; border-left: 0.1389vw #d8d8d8 solid; }
    .terms_area .info .tb_box table tr > td { padding: 1.3889vw 2.7778vw; border-left: 0.1389vw #d8d8d8 solid; border-top: 0.1389vw #d8d8d8 solid; }

    .terms_area .info .list0 li {padding-left: 2.7778vw;}
}